@charset "utf-8";

/* ==================================================================

	numbers.css 共通（2021/10/14追加）

=================================================================== */

.contents .accent {
    background-image: url("../../images/numbers/title-img.jpg");
    background-position: 100% 50%;
}
@media only screen and (max-width : 640px) {
    .contents .accent {
        background-image: url("../../images/numbers/title-img-sp.jpg");
        background-position: 100% 50%;
    }
}
#working .contents .chapter {
    margin-bottom: 60px;
}
#working .contents .chapter:last-child {
    margin-bottom: 0;
}

/* ===================================================================
   ■ 数字で見る（2021/10/14追加）
==================================================================== */
.section-numbers {
    padding-bottom: 120px;
}
@media only screen and (max-width : 640px) {
    .section-numbers {
        padding-bottom: calc(24/375*100vw);
    }
}
.numbers-headding {
    display: flex;
    align-items: center;
    margin-top: 150px;
    margin-bottom: 0;
    /* font-size: 44px; */
    font-size: 275%;
    line-height: 1.5;
    text-align: center;
    color: #1184CB;
}
.numbers-headding.-firstChild { margin-top: 50px; }
@media only screen and (max-width : 640px) {
    .numbers-headding {
        margin-top: calc(70/375*100vw);
        font-size: calc(22/375*100vw);
    }
    .numbers-headding.-firstChild { margin-top: calc(30/375*100vw); }
}
.numbers-headding:before,
.numbers-headding:after {
    flex-grow: 1;
    border-top: 6px solid #C8E4F9;
    content: "";
}
.numbers-headding:before {
    margin-right: 1rem;
}
.numbers-headding:after {
    margin-left: 1rem;
}
.numbers-notes {
    margin-top: 1.4em;
    margin-bottom: 0;
    /* font-size: 15px; */
    font-size: 93.75%;
    line-height: 1.5;
    text-align: center;
    color: #1184CB;
}
@media only screen and (max-width : 640px) {
    .numbers-notes {
        font-size: calc(14/375*100vw);
        margin-top: .7em;
    }
}
.chart-list {
    display: flex;
    flex-wrap: wrap;
    margin: 20px -8px -8px;
}
@media only screen and (max-width : 640px) {
    .chart-list {
        display: block;
        margin: calc(10/375*100vw) -2% 2em;
    }
}
.chart-list >li {
    box-sizing: border-box;
    position: relative;
    padding: 8px;
    text-align: center;
}
@media only screen and (max-width : 640px) {
    .chart-list >li { padding: 0; }
    .chart-list >li:not(:first-child) { margin-top: calc(10/375*100vw); }
}
.chart-list >.col1 { width: 100%; }
.chart-list >.col2 { width: 50%; }
.chart-list >.col3 { width: 33.333%; }
.chart-list >.col4 { width: 25%; }
.chart-list >.col5 { width: 20%; }
@media only screen and (max-width : 640px) {
    .chart-list >.col2,
    .chart-list >.col3,
    .chart-list >.col4,
    .chart-list >.col5 {
        width: 100%;
    }
}
.chart-list >li >.caption {
    position: relative;
    display: inline-block;
    padding: .3em 2.1em;
    border-radius: .35em;
    /* font-size: 28px; */
    font-size: 175%;
    line-height: 1.5;
    color: #fff;
    background: #1184CB;
    transform: translate(0, -20%);
}
.chart-list >li >.caption.-narrow { padding: .3em 1em;; }
@media only screen and (max-width : 640px) {
    .chart-list >li >.caption {
        padding: .5em 3.3em;
        font-size: calc(18/375*100vw);
    }
    .chart-list >li >.caption.-narrow { padding: .5em 3.3em; }
}
.chart-list >li >.caption::after {
    display: block;
    position: absolute;
    bottom: 0;
    left: 50%;
    border-width: 10px 7px 0 7px;
    border-style: solid;
    border-color: #1184CB transparent;
    transform: translate(-50%,9px);
    content: "";
}
.chart-list >li >.image >img { display: block; width: 100%; height: auto; }
.chart-list >li >.image >img.-sp { display: none; }
@media only screen and (max-width : 640px) {
    .chart-list >li >.image >img.-pc { display: none; }
    .chart-list >li >.image >img.-sp { display: block; }
}

// scrollTrigger
//----------------------------------------

[data-trigger].-invisible { opacity: 0; }

[data-trigger].-flag { opacity: 0; }

[data-trigger].-visible { opacity: 1; -webkit-transition: opacity .8s ease-in; -o-transition: opacity .8s ease-in; transition: opacity .8s ease-in; }

[data-trigger="fadeIn"].-invisible { opacity: 0; }

[data-trigger="fadeIn"].-flag { opacity: 0; }

[data-trigger="fadeIn"].-visible { opacity: 1; -webkit-transition: opacity .8s ease-in; -o-transition: opacity .8s ease-in; transition: opacity .8s ease-in; }

[data-trigger="fadeInUp"].-invisible { opacity: 0; -webkit-transform: translateY(40px); -ms-transform: translateY(40px); transform: translateY(40px); }

[data-trigger="fadeInUp"].-flag { opacity: 0; -webkit-transform: translateY(40px); -ms-transform: translateY(40px); transform: translateY(40px); }

[data-trigger="fadeInUp"].-visible { opacity: 1; -webkit-transition: opacity .8s ease-out, -webkit-transform .8s ease-out; transition: opacity .8s ease-out, -webkit-transform .8s ease-out; -o-transition: opacity .8s ease-out, transform .8s ease-out; transition: opacity .8s ease-out, transform .8s ease-out; transition: opacity .8s ease-out, transform .8s ease-out, -webkit-transform .8s ease-out; -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); }

[data-trigger="fadeInLeft"].-invisible { opacity: 0; -webkit-transform: translateX(-40px); -ms-transform: translateX(-40px); transform: translateX(-40px); }

[data-trigger="fadeInLeft"].-flag { opacity: 0; -webkit-transform: translateX(-40px); -ms-transform: translateX(-40px); transform: translateX(-40px); }

[data-trigger="fadeInLeft"].-visible { opacity: 1; -webkit-transition: opacity .8s ease-out, -webkit-transform .8s ease-out; transition: opacity .8s ease-out, -webkit-transform .8s ease-out; -o-transition: opacity .8s ease-out, transform .8s ease-out; transition: opacity .8s ease-out, transform .8s ease-out; transition: opacity .8s ease-out, transform .8s ease-out, -webkit-transform .8s ease-out; -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); }

.box[data-trigger="custom"].-invisible { opacity: 1; -webkit-transform: rotate(360deg); -ms-transform: rotate(360deg); transform: rotate(360deg); }

.box[data-trigger="custom"].-visible { -webkit-transition: -webkit-transform 1s ease-in-out; transition: -webkit-transform 1s ease-in-out; -o-transition: transform 1s ease-in-out; transition: transform 1s ease-in-out; transition: transform 1s ease-in-out, -webkit-transform 1s ease-in-out; -webkit-transform: rotate(0deg); -ms-transform: rotate(0deg); transform: rotate(0deg); }

//----------------------------------------