/* variables -------------------------------- */

:root {
    --color-text: #000;
}

/* base ------------------------------------- */

img { vertical-align: middle; }

.main {
    /* 共通 header 余白調整 */
    @media screen and (min-width: 768px) {
        padding: 186px 0 29.23077rem !important;
    }
}

.articleContent {
    background-color: #fff;
    color: var(--color-text);
}

/* component -------------------------------- */

.wrap-1280, .wrap-1056, .wrap-1020 { margin: 0 auto; width: 100%; }
.wrap-1280 { max-width: 1280px; }
.wrap-1056 { max-width: 1056px; }
.wrap-1020 { max-width: 1020px; }

.section-container {
    display: flex;
    flex-direction: column;
    @media screen and (min-width: 768px) { padding: 108px 0 60px; }
    @media screen and (max-width: 767px) { padding: 0 0 80px; }
}
.section-bottom {
    display: flex;
    flex-direction: column;
    @media screen and (min-width: 768px) { padding: 0 0 120px; gap: 100px; }
    @media screen and (max-width: 767px) { padding: 0 0 80px; }
}
.section-a {
    display: flex;
    flex-direction: column;
    @media screen and (min-width: 768px) { gap: 120px; }
    @media screen and (max-width: 767px) { gap: 80px; }
}
.section-b {
    display: flex;
    flex-direction: column;
    @media screen and (min-width: 768px) { gap: 100px; }
    @media screen and (max-width: 767px) { gap: 80px; }
}
.section-c {
    display: flex;
    flex-direction: column;
    @media screen and (min-width: 768px) { gap: 40px; }
    @media screen and (max-width: 767px) { gap: 20px; }
}

.page-label {
    position: absolute;
    font-family: "Afacad", sans-serif;
    color: #fff;
    @media screen and (min-width: 768px) {
        font-size: 16px;
        top: 36px;
        left: 20px;
    }
    @media screen and (max-width: 767px) {
        font-size: 11px;
        top: 20px;
        left: 20px;
    }
}

.c-text {
    text-align: justify;
    @media screen and (min-width: 768px) { font-size: 19px; line-height: 28px; letter-spacing: 0.05em; }
    @media screen and (max-width: 767px) { font-size: 14px; line-height: 22px; letter-spacing: 0.05em; }
    &:not(:first-child){ margin-top: 1.4em; }
    & em { font-style: normal; font-weight: bold; }
}
.c-caption {
    text-align: justify;
    @media screen and (min-width: 768px) { margin-top: 1.6em; font-size: 14px; line-height: 24px; }
    @media screen and (max-width: 767px) { margin-top: 2em; font-size: 12px; line-height: 20px; letter-spacing: 0.05em; }
}
.c-button {
    position: relative;
    display: inline-block;
    height: 60px;
    background-color: var(--color-text);
    align-content: center;
    line-height: 1;
    font-weight: 500;
    text-align: center;
    text-box-trim: trim-both;
    color: #fff;
    @media screen and (min-width: 768px) { width: 300px; font-size: 18px; }
    @media screen and (max-width: 767px) { width: 100%; font-size: 16px; }
    &::after {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        width: 8px;
        height: 15px;
        background: url(../images/icon-arr.svg) no-repeat center center;
        background-size: 100% auto;
        content: '';
        @media screen and (min-width: 768px) { right: 16px; }
        @media screen and (max-width: 767px) { right: 25px; }
    }
}

.is-pc {
    @media screen and (min-width: 768px) { display: block; }
    @media screen and (max-width: 767px) { display: none; }
}
.is-sp {
    @media screen and (min-width: 768px) { display: none; }
    @media screen and (max-width: 767px) { display: block; }
}

.js-fadeIn {
    opacity: 0;
    transition: .8s ease;
    transform: translateY(20px);
    &.is-inview { opacity: 1; transform: translateY(0); }
}
@keyframes fadeIn {
    0%   { opacity: 0; transform: translateY(10px); }
    100% { opacity: 1; transform: translateY(0); }
}

/* section ------------------------------------ */

.section-lead {
    padding: 0 20px;
    text-align: center;
    @media screen and (min-width: 768px) { font-size: 20px; line-height: 1.8; letter-spacing: 0.14em; }
    @media screen and (max-width: 767px) { font-size: 14px; line-height: 1.71; letter-spacing: 0.05em; }
}

.section-01 {
    @media screen and (min-width: 768px) {
        padding: 24px 0;
        background-color: #3F3734;
    }
    .section-inner {
        position: relative;
        display: flex;
        @media screen and (max-width: 767px) { flex-direction: column; }
        > div { width: 100%; }
        .section-inner-txt {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            background-color: #fff;
            text-align: center;
            color: #3E3E41;
            @media screen and (min-width: 768px) { gap: 36px; }
            @media screen and (max-width: 767px) { gap: 16px; padding: 40px 0 36px; }
        }
        h1 {
            font-family: "Crimson Pro", serif;
            font-weight: 300;
            line-height: normal;
            @media screen and (min-width: 768px) { font-size: 80px; }
            @media screen and (max-width: 767px) { font-size: 48px; }
        }
    }
}


.section-02, .section-03, .section-04, .section-05, .section-07 {
    & .section-inner { display: flex; }
}
.section-06 {
    span { white-space: nowrap; }
}
@media screen and (min-width: 768px) {
    .section-02, .section-03, .section-04, .section-05, .section-07 {
        & .section-inner {
            gap: 5.882%;
            align-items: center;
            & .section-inner-img { width: 63.43%; flex-shrink: 0; }
        }
    }
    .section-02, .section-04 {
        & .section-inner {
            & .section-inner-img { padding-left: 3.923%; }
        }
    }
    .section-03, .section-05 {
        & .section-inner {
            flex-direction: row-reverse;
            & .section-inner-img { padding-right: 3.923%; }
        }
    }
    .section-07 {
        & .section-inner {
            flex-direction: row-reverse;
            & .section-inner-txt { padding-left: 3.923%; }
        }
    }
    .section-06 {
        .section-inner { position: relative; }
        .section-inner-txt    { margin: 30px 10% 36px auto; max-width: 475px; width: 37.11%; }
        .section-inner-img    { position: relative; font-size: 20px; line-height: 28px; }
        .section-inner-img-01,
        .section-inner-img-02,
        .section-inner-img-03 { width: 30.78%; max-width: 394px; }
        .section-inner-img-01 { margin-left: 40.5%; }
        .section-inner-img-02 { position: absolute; top: 50%; left: 5%; opacity: 0; }
        .section-inner-img-03 { position: absolute; top: 151.5%; left: 16.5%; opacity: 0; }
        &.is-inview .section-inner-img-02 { animation: fadeIn .8s ease forwards 0.5s; }
        &.is-inview .section-inner-img-03 { animation: fadeIn 1.6s ease forwards 0.5s; }
    }
}
@media screen and (max-width: 767px) {
    .section-02, .section-03, .section-04, .section-05, .section-06, .section-07 {
        & .section-inner {
            display: flex;
            gap: 20px;
            flex-direction: column;
            & .section-inner-txt { margin: 0 20px; }
        }
    }
    .section-02, .section-04, .section-05 {
        & .section-inner {
            & .section-inner-img { margin-right: 20px; }
            }
    }
    .section-03, .section-07 {
        & .section-inner {
            & .section-inner-img { padding-left: 3.923%; }
        }
    }
    .section-06 {
        margin-top: -30px;
        .section-inner-img    { display: flex; flex-direction: column; gap: 18px; font-size: 16px; line-height: 1; }
        .section-inner-img-01,
        .section-inner-img-02,
        .section-inner-img-03 { display: flex; gap: 8px; width: 67%; }
        .section-inner-img-01 { margin-left: 26.5%; flex-direction: row-reverse; }
        .section-inner-img-02 { margin-left: 6%; }
        .section-inner-img-03 { margin-left: 27.5%; flex-direction: row-reverse; }
        span { display: flex; }
    }
}


/* section-bottom */

.section-contact, .section-credit, .section-collab, .section-gotop {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    @media screen and (max-width: 767px) { width: calc(100% - 40px); padding: 0 20px; }
}

.section-contact {
    h2 {
        margin-bottom: 8px;
        font-weight: 400;
        line-height: normal;
        @media screen and (min-width: 768px) { font-size: 16px; }
        @media screen and (max-width: 767px) { font-size: 12px; }
        & span {
            position: relative;
            display: inline-block;
            &::after {
                position: absolute;
                left: 0;
                width: 100%;
                background-color: var(--color-text);
                content: '';
                @media screen and (min-width: 768px) { bottom: -6px; height: 2px; }
                @media screen and (max-width: 767px) { bottom: -6px; height: 1px; }
            }
        }
    }
    p {
        font-size: 16px;
        line-height: 1.8;
    }
    ul {
        display: flex;
        justify-content: center;
        gap: 30px;
    }
    div { width: 100%; }
}

.section-credit {
    font-weight: 300;
    @media screen and (min-width: 768px) { font-size: 14px; line-height: 22px; }
    @media screen and (max-width: 767px) { font-size: 11px; line-height: 20px; }
}

.section-collab {
    .section-collab-list {
        display: flex;
        flex-direction: column;
        gap: 1.6em;
        @media screen and (min-width: 768px) { font-size: 10px; line-height: 16px; }
        @media screen and (max-width: 767px) { font-size: 10px; line-height: 20px; }
        & dt { font-weight: bold; }
    }
}

.section-gotop {
    font-weight: 300;
    font-size: 14px;
    line-height: normal;
    text-decoration: underline;
}