:root {
    --main-color: #37B5B5;
    --sub-color: #BAA28A;
    --dark-color: #6F706D;
    --bg-color: #F1F1F1;
    --margin-s: 20px;
    --margin-m: 40px;
    --margin-l: 80px;
    --margin-xl: 120px;
    --max-width: 1200px;
    --main-gradient: linear-gradient(to right, #87B537,#37B5B5);
    @media screen and (max-width: 1024px) {
        --margin-l: 40px;
    }
}

/* typo */
h3 {
    font-size: 1.5em;
    font-weight: bold;
    color: var(--main-color);
}
@media screen and (max-width: 600px) {
    .text-box.center {
        text-align: left;
    }
}

/* layouts */
.section-title span{
    margin-bottom: 1.8em;
    display: inline-block;
}
.w-820 {
    max-width: 820px;
    margin: auto;
}
.text-box {
    display: flex;
    flex-direction: column; 
    gap: var(--margin-s);
    font-size: 1.6rem;
    @media screen and (max-width: 600px) {
        font-size: 1.4rem;
    }
}
figure img {
    display: block;
    width: 100%;
    max-width: unset;
    height: 100%;
    object-fit: cover;
}
#contents {
    & *:not(.section-title) {
        line-height: 1.6;
    }
    & a {
        color: var(--sub-color);
        font-weight: bold;
    }
    & section {
        padding: 0 var(--margin-s);
        & .contents-inner {
            display: flex;
            flex-direction: column; 
        }
        & .contents-inner {
            padding: var(--margin-l) 0;
            gap: var(--margin-m);
        }
        & div.details {
            @media screen and (max-width: 600px) {
                border-top: 1px dashed var(--sub-color);
            }
            & .row {
                display: flex;
                @media screen and (max-width: 1024px) {
                    gap: var(--margin-m);
                }
                @media screen and (max-width: 600px) {
                    display: block;
                }
                &:nth-child(2n) {
                    flex-direction: row-reverse;
                    & .text-box {
                        padding: var(--margin-l) 0 var(--margin-l) var(--margin-l);
                        @media screen and (max-width: 1024px) {
                            padding-left: 0;
                        }
                    }
                }
                & > * {
                    width: 50%;
                    @media screen and (max-width: 600px) {
                        width: 100%;
                    }
                }
                & .text-box{
                    padding: var(--margin-l) var(--margin-l) var(--margin-l) 0;
                    @media screen and (max-width: 1024px) {
                        padding-right: 0;
                    }
                }
                & figure {
                    position: relative;
                    & img {
                        position: absolute;
                        top: 0;
                        left: 0;
                        @media screen and (max-width: 600px) {
                            position: relative;
                            aspect-ratio: 5/3;
                        }
                    }
                }
            }
        }
    }
}
.mv-box {
    font-size: 3rem;
    font-weight: bold;
    color: #fff;
    @media screen and (max-width: 820px) {
        font-size: 2rem;
    }
    & h1 {
        padding: 0 10px;
        background: var(--main-gradient);
        & span {
            width: 100%;
            max-width: var(--max-width);
            height: 180px;
            margin: auto;
            display: flex;
            align-items: center;
            @media screen and (max-width: 600px) {
                height: 80px;
            }
        }
    }
    & .mv {
        width: 100%;
        height: auto;
        position: relative;
        & figure {
            aspect-ratio: 5/3;
             .mv.michishirube & {
                 aspect-ratio: 1440/694;
                 & img {
                     object-position: bottom;
                 }
             }
        }
        & p {
            white-space: nowrap;
            padding: var(--margin-m);
            position: absolute;
            bottom: var(--margin-xl);
            left: 50%;
            transform: translateX(-50%);
            z-index: 1;
            @media screen and (max-width: 600px) {
                position: relative;
                width: 100%;
                padding: var(--margin-m) var(--margin-s);
                transform: unset;
                inset: auto;
                white-space: unset;
            }
            &::before {
                content: "";
                display: block;
                width: 100%;
                height: 100%;
                background: var(--main-color);
                position: absolute;
                left: 0;
                top: 0;
                z-index: -1;
                opacity: .7;
            }
        }
    }
}
#contents.support .mv-box {
    position: relative;
    z-index: 1;
    & h2, & p {
        color: #333;
    }
    & h2 {
        font-size: 3rem;
        @media screen and (max-width: 600px) {
            font-size: 2.6rem;
        }
        & + p {
            font-size: 2rem;
        }
    }
    & p {
        font-size: 1.8rem;
        @media screen and (max-width: 600px) {
            font-size: 1.6rem;
            .sub-slogan & br {
                display: none;
            }
        }
    }
    & .contents-inner {
        display: flex;
        justify-content: space-between;
        gap: var(--margin-xl) var(--margin-m);
        @media screen and (max-width: 1023px) {
            flex-wrap: wrap;
        }
        @media screen and (max-width: 600px) {
            padding: 0;
            row-gap: 80px;
        }
    }
    & .heroarea {
        margin: auto;
        gap: var(--margin-m);
        padding: var(--margin-xl) var(--margin-s) 160px;
        position: relative;
        overflow: clip;
        --padding-top: calc(3rem*1.6*3 + var(--margin-m) + 2rem*1*1.6);
        @media screen and (max-width: 600px) {
            padding-bottom: 50vw;
        }
        &::before,&::after {
            content: "";
            display: block;
            position: absolute;
            z-index: -1;
        }
        &::before {
            aspect-ratio: 713/677;
            height: calc(var(--padding-top) + var(--margin-xl)*3);
            background: url('/wp-content/themes/basecareer/support/support_files/support/deco01.png') no-repeat center / contain;
            right: 0;
            top: calc((var(--margin-xl) + var(--padding-top)));
            transform: translate(20%,calc(-100% + var(--margin-s)));
            @media screen and (max-width: 600px) {
                height: calc(var(--padding-top) + var(--margin-m));
                top: 0;
                transform: translate(20%,-30%);
            }
        }
        &::after {
            aspect-ratio: 731/797;
            height: min(55vw,calc(100% - var(--padding-top) - var(--margin-xl)*2.4));
            background: url('/wp-content/themes/basecareer/support/support_files/support/deco02.png') no-repeat center / contain;
            left: 0;
            bottom: 0;
            transform: translate(-2%,0%);
            @media screen and (max-width: 600px) {
                transform: rotate(-20deg) translate(-2%,-6%);
                height: 50vw;
            }
        }
        & .slogan {
            gap: var(--margin-m);
        }
        & .sub-slogan {
            gap: 60px;
            padding: var(--padding-top) 0 140px;
            font-weight: normal !important;
            @media screen and (max-width: 1023px) {
                padding: 0 0 140px;
                text-align: right;
                width: 100%;
            }
            @media screen and (max-width: 600px) {
                text-align: left;
                gap: var(--margin-m);
                padding-bottom: 20px;
            }
            & strong {
                color: var(--main-color);
                font-weight: bold !important;
            }
        }
    }
}

@media screen and (max-width: 600px) {
    .sp-br {
        display: block;
    }
}

/* section */
section.about {
    background: var(--bg-color);
    & h2 {
        color:  var(--main-color);
    }
    & a {
        color: var(--main-color) !important;
    }
    & div.details {
        & .row {
            & .text-box{
                & h3 {
                    padding-bottom: var(--margin-s);
                }
            }
        }
    }
}

section.media {
    & h2 {
        color: var(--dark-color);
    }
    & div.details {
        & .row {
            padding: var(--margin-m) 0;
            & .text-box{
                padding: var(--margin-m) !important;
                padding-top: 0 !important;
                padding-bottom: 0 !important;
                @media screen and (max-width: 1024px) {
                    padding: 0 !important;
                }
                @media screen and (max-width: 600px) {
                    padding-bottom: var(--margin-m) !important;
                }
                & h3 {
                    color: var(--sub-color);
                }
            }
            & figure img{
                padding: 0 var(--margin-m) !important;
                @media screen and (max-width: 1024px) {
                    padding: 0 !important;
                }
                @media screen and (max-width: 600px) {
                    aspect-ratio: 5/2 !important;
                }
            }
            &:first-child {
                border-top: thin solid var(--sub-color);
                border-bottom: thin solid var(--sub-color);
                & img{
                    object-fit: contain;
                }
            }
            &:last-child {
                border-bottom: thin solid var(--sub-color);
                & ul {
                    list-style: disc;
                    padding-left: 1em;
                    margin-top: calc(-1*var(--margin-s));
                    & a {
                        display: block;
                    }
                }
               & img {
                object-position: top;
                }
            }
        }
    }
}

section.details {
    & h2 {
        color: var(--main-color);
    }
    & ul.flow {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: var(--margin-m);
       & li {
           color: #fff;
           font-weight: bold;
           width: 100%;
           max-width: 600px;
           text-align: center;
           font-size: 1.3em;
           padding: .2em;
           position: relative;
           &::before,&::after {
               content: "";
               display: block;
               width: 100%;
               height: 100%;
               position: absolute;
           }
           &::before {
               left: 0;
               top: 0;
               background: var(--sub-color);
               z-index: -1;
           }
           &::after {
               content: "";
               top: 100%;
               left: 50%;
               transform: translate(-50%,50%) scale(.7);
               width: auto;
               height: var(--margin-s);
               background: var(--main-color);
               aspect-ratio: 2/1;
               clip-path: polygon(100% 0, 0 0, 50% 100%);
           }
           &:last-child::after {
               display: none;
           }
       } 
    }
}

section.benefits {
    background: var(--bg-color);
    & h2 {
        color: var(--main-color);
    }
    & h3 {
        color: #333;
        font-size: 1.13em;
        margin-bottom: var(--margin-s);
        text-align: center;
        @media screen and (max-width: 600px) {
            font-size: 1.3em;
        }
        & span {
            display: inline-block;
            position: relative;
            z-index: 1;
            border-bottom: 1px dotted #333;
            margin: 0 .1em;
            &::before {
                content: "";
                display: block;
                width: 100%;
                height: 100%;
                background: var(--sub-color);
                position: absolute;
                z-index: -1;
                opacity: .3;
            }
        }
    }
    & ul {
        padding: var(--margin-m) 0 0;
        display: flex;
        justify-content: center;
        flex-wrap: wrap;
        gap: var(--margin-l) var(--margin-m);
        counter-reset: number;
        & li {
            counter-increment: number;
            width: calc((100% - var(--margin-m)*2)/3);
            background: #fff;
            padding: var(--margin-m);
            position: relative;
            font-size: 1.4rem;
            @media screen and (max-width: 820px) {
                width: calc((100% - var(--margin-m))/2);
            }
            @media screen and (max-width: 600px) {
                flex-basis: 100%;
                padding: var(--margin-m) var(--margin-s) var(--margin-s);
            }
            &::before {
                content: counter(number);
                font-size: 1.2em;
                font-weight: 600;
                display: flex;
                align-items: center;
                justify-content: center;
                border-radius: 50%;
                background: var(--sub-color);
                color: #fff;
                width: 30px;
                height: 30px;
                position: absolute;
                bottom: 100%;
                left: 50%;
                transform: translate(-50%,50%);
                z-index: 1;
            }
            &::after {
                content: "";
                display: block;
                width: 60px;
                height: 30px;
                background: #fff;
                position: absolute;
                bottom: 100%;
                left: 50%;
                transform: translateX(-50%);
                clip-path: ellipse(50% 100% at 50% 100%);
                z-index: 0;
            }
        }
    }
}

section.gallery {
    background: var(--bg-color);
    display: flex;
    gap: var(--margin-s);
    padding-bottom: var(--margin-l) !important;
    @media screen and (max-width: 1024px) {
        flex-wrap: wrap;
        & figure {
            width: calc((100% - var(--margin-s))/2);
        }
    }
    @media screen and (max-width: 600px) {
        & figure {
            width: calc((100% - 8px)/2);
        }
        gap: 8px;
    }
}

section.special {
    background: var(--bg-color);
    position: relative;
    &::before {
        content: "";
        display: block;
        width: 100vw;
        margin: 0 calc(50% - 50vw);
        aspect-ratio: 1440/160;
        background: url(/wp-content/themes/basecareer/support/support_files/support/deco03.svg) no-repeat bottom / cover;
        position: absolute;
        bottom: calc(100% + var(--margin-l));
        left: 0;
        @media screen and (max-width: 600px) {
            bottom: calc(100% + 10vw);
        }
    }
    &::after {
        content: "";
        display: block;
        width: 100vw;
        height: var(--margin-l);
        margin: 0 calc(50% - 50vw);
        position: absolute;
        bottom: 100%;
        left: 0;
        background: var(--bg-color);
        @media screen and (max-width: 600px) {
            height: 10vw;
        }
    }
    & .contents-inner {
        padding-top: 0 !important;
        padding-bottom: var(--margin-xl) !important;
        @media screen and (max-width: 600px) {
            padding-bottom: 80px !important;
        }
        &::before,&::after {
            content: "";
            display: block;
            width: 100vw;
            margin: 0 calc(50% - 50vw);
            background: #fff;
            position: absolute;
            left: 0;
        }
        &::before {
            bottom: 30%;
            aspect-ratio: 1440/160;
            mask: url(/wp-content/themes/basecareer/support/support_files/support/deco03.svg) no-repeat bottom / cover;
            -webkit-mask: url(/wp-content/themes/basecareer/support/support_files/support/deco03.svg) no-repeat bottom / cover;
        }
        &::after {
            height: 30.1%;
            bottom: 0;
        }
        & > * {
            position: relative;
            z-index: 1;
        }
    }
    & strong {
        display: block;
        font-size: 3rem;
        font-weight: bold;
        color: var(--main-color);
        margin-top: calc(-1*var(--margin-s));
        @media screen and (max-width: 600px) {
            font-size: 2.6rem;
        }
    }
    & .text-box a {
        font-size: 2.4rem;
        @media screen and (max-width: 600px) {
            font-size: 2rem;
        }
    }
}