@charset "UTF-8";

/*------------------------------------*\
    $CONTENTS
\*------------------------------------*/
/**
 * CONTENTS............目次
 * HEADER..............ヘッダー
 * STYLES..............各種スタイル
 */





/*------------------------------------*\
    $HEADER
\*------------------------------------*/
.header {
    position: relative;
    z-index: 110;
    background-color: var(--primaryGreen-200);
}
@media screen and (orientation: landscape) {
    .header {
        aspect-ratio: 1920 / 1000;
        width: 100%;
        height: 100vh;
        height: 100svh;
        overflow: hidden;
    }
}
@media screen and (orientation: portrait) {
    .header {
        aspect-ratio: 375 / 547;
        /* aspect-ratio: 375 / 657; */
        max-height: 100% !important;
        margin-bottom: calc(100% * (42 / 375));
    }
    .header::before {
        content: "";
        aspect-ratio: 375 / 43;
        position: absolute;
        top: calc(100% - 1px);
        left: 0;
        width: 100%;
        background-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 375 42"><path fill="%23AACDE6" d="M0,0c-0.1,0,375,0,375,0v32.1C375,32.1,178.5,69.1,0,0z" /></svg>');
        background-repeat: no-repeat;
        background-position: 0 0;
        background-size: contain;
    }
}

    .header__logo {
        position: absolute;
        top: 0;
        left: 0;
        z-index: 10;
    }
    .header__logo::before {
        content: "";
        aspect-ratio: 1 / 1;
        position: absolute;
        z-index: -1;
        border-radius: 100%;
        background-color: white;
    }
    .header__logo img { aspect-ratio: 146 / 75 }
    @media screen and (orientation: landscape) {
        .header__logo {
            padding-top: calc(100vw * (50 / 1920));
            padding-left: calc(100vw * (50 / 1920));
        }
        .header__logo::before {
            top: calc(-100vw * (652 / 1920));
            left: calc(-100vw * (245 / 1920));
            width: calc(100vw * (970 / 1920));
        }
        .header__logo img { width: calc(100vw * (380 / 1920)) }
    }
    @media screen and (orientation: portrait) {
        .header__logo {
            padding-top: calc(100vw * (20 / 375));
            padding-left: calc(100vw * (36 / 375));
        }
        .header__logo::before {
            top: calc(-100vw * (179 / 375));
            left: calc(-100vw * (42 / 375));
            width: calc(100vw * (344 / 375));
        }
        .header__logo img { width: calc(100vw * (180 / 375)) }
    }


    .header__bg {
        position: absolute;
        inset: 0;
        z-index: 1;
    }
    .header__bg::before {
        content: "";
        position: absolute;
        z-index: -1;
        background-color: var(--primaryBlue-200);
    }
    @media screen and (orientation: landscape) {
        .header__bg::before {
            aspect-ratio: 1 / 1;
            top: calc(-100vw * (1344 / 1920));
            right: calc(-100vw * (713 / 1920));
            width: calc(100vw * (2303 / 1920));
            border-radius: 100%;
        }
    }
    @media screen and (orientation: portrait) {
        .header__bg::before {
            bottom: 0;
            left: 0;
            width: 100%;
            padding-bottom: calc(100vw * (620 / 375));
            /* padding-bottom: calc(100vw * (416 / 375)); */
        }
        .header__bg::after {
            content: "";
            aspect-ratio: 375 / 43;
            position: absolute;
            bottom: calc((100vw * (620 / 375)) - 1px);
            width: 100%;
            background-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 375 42"><path fill="%23AACDE6" d="M0,42c-0.1,0,375,0,375,0V9.9C375,9.9,178.5-27.1,0,42z" /></svg>');
            background-repeat: no-repeat;
            background-position: 0 100%;
            background-size: contain;
        }
    }

        .header__bg__text {
            aspect-ratio: 704.62 / 174.47;
            position: absolute;
        }
        .header__bg__text svg {
            display: block;
            width: 100%;
        }
        @media screen and (orientation: landscape) {
            .header__bg__text {
                bottom: calc(100vw * (14.5 / 1920));
                right: calc(100vw * (28.4 / 1920));
                width: min(calc(100vw * (704.62 / 1920)), calc(100vh * (704.62 / 1000)));
            }
        }
        @media screen and (orientation: portrait) {
            .header__bg__text {
                top: calc(100% - (100vw * (14.4 / 375)));
                right: calc(100vw * (20 / 375));
                width: calc(100vw * (172.66 / 375));
            }
        }


    .header__slider {
        position: absolute;
        inset: 0;
        z-index: 11;
        pointer-events: none;
    }

        .header__slider__item {
            aspect-ratio: 798 / 774;
            position: absolute;
            border-radius: 100%;
            overflow: hidden;
            animation-duration: 1s;
            animation-timing-function: var(--linear);
            animation-fill-mode: forwards;
        }
        .header__slider__item.is-active {
            animation-name: slideInLandscape;
            animation-duration: 1s;
            animation-timing-function: var(--linear);
            animation-fill-mode: forwards;
        }
        @keyframes slideInLandscape {
            from {
                top: -150%;
                left: -80%;
                transform: scale(0);
            }
            to {
                top: calc(50% - min(calc(100vw * (469 / 1920)), calc(100vh * (469 / 1000))));
                left: calc(50% - min(calc(100vh * (209 / 1000)), calc(100vw * (209 / 1920))));
                transform: scale(1);
            }
        }
        @keyframes slideOutLandscape {
            from {
                top: calc(50% - min(calc(100vw * (469 / 1920)), calc(100vh * (469 / 1000))));
                left: calc(50% - min(calc(100vh * (209 / 1000)), calc(100vw * (209 / 1920))));
                transform: scale(1);
            }
            to {
                top: 120%;
                left: 120%;
                transform: scale(0);
            }
        }
        @media screen and (orientation: landscape) {
            .header__slider__item {
                top: calc(50% - min(calc(100vw * (469 / 1920)), calc(100vh * (469 / 1000))));
                left: calc(50% - min(calc(100vh * (209 / 1000)), calc(100vw * (209 / 1920))));
                width: min(calc(100vw * (798 / 1920)), calc(100vh * (798 / 1000)));
                animation-name: slideOutLandscape;
            }
            .header__slider__item.is-active { animation-name: slideInLandscape }
        }

        @keyframes slideInPortrait {
            from {
                top: -150%;
                left: -80%;
                transform: scale(0);
            }
            to {
                top: calc(100vw * (115 / 375));
                left: calc(50% - (100vw * (125.5 / 375)));
                transform: scale(1);
            }
        }
        @keyframes slideOutPortrait {
            from {
                top: calc(100vw * (115 / 375));
                left: calc(50% - (100vw * (125.5 / 375)));
                transform: scale(1);
            }
            to {
                top: 120%;
                left: 120%;
                transform: scale(0);
            }
        }
        @media screen and (orientation: portrait) {
            .header__slider__item {
                width: calc(100vw * (307 / 375));
                top: calc(100vw * (115 / 375));
                left: calc(50% - (100vw * (125.5 / 375)));
                animation-name: slideOutPortrait;
            }
            .header__slider__item.is-active { animation-name: slideInPortrait }
        }

            .header__slider__item a {
                width: 100%;
                height: 100%;
                pointer-events: visible;
            }

            .header__slider__item img {
                width: 100%;
                height: 100%;
                object-fit: cover;
            }


        .header__slider__button {
            position: absolute;
            pointer-events: visible;
        }
        @media screen and (orientation: landscape) {
            .header__slider__button {
                top: calc(50% + min(calc(100vh * (151.71 / 1000)), calc(100vw * (151.71 / 1920))));
                left: calc(50% + min(calc(100vh * (464 / 1000)), calc(100vw * (464 / 1920))));
                width: min(calc(100vh * (70 / 1000)), calc(100vw * (70 / 1920)));
            }
        }
        @media screen and (orientation: portrait) {
            .header__slider__button {
                top: calc(100vw * (353 / 375));
                left: calc(100vw * (309 / 375));
                width: calc(100vw * (50 / 375));
            }
        }


        .header__slider__decoration {
            position: absolute;
            animation-name: sliderDecorationRoll;
            animation-duration: 120s;
            animation-iteration-count: infinite;
            animation-timing-function: var(--linear);
            animation-fill-mode: both;
            pointer-events: none;
        }
        @keyframes sliderDecorationRoll {
            from { transform: rotate(0) }
            to { transform: rotate(360deg) }
        }
        @media screen and (orientation: landscape) {
            .header__slider__decoration {
                top: calc(50% - min(calc(100vw * (235.13 / 1920)), calc(100vh * (235.13 / 1000))));
                left: calc(50% - (100vw * (640 / 1920)));
                width: min(calc(100vw * (631.24 / 1920)), calc(100vh * (631.24 / 1000)));
            }
        }
        @media screen and (orientation: portrait) {
            .header__slider__decoration {
                top: calc(100vw * (161.23 / 375));
                left: calc(-100vw * (112 / 375));
                width: calc(100vw * (235.81 / 375));
            }
        }


        .header__slider__decoration2 {
            position: absolute;
            inset: 0;
            pointer-events: none;
        }

            .header__slider__decoration2__01 { position: absolute }
            @media screen and (orientation: landscape) {
                .header__slider__decoration2__01 {
                    bottom: min(calc(100vh * (-56 / 1000)), calc(100vw * (-56 / 1920)));
                    left: calc(100vw * (274 / 1920));
                    width: min(calc(100vw * (319 / 1920)), calc(100vh * (319 / 1000)), 319px);
                }
            }
            @media screen and (orientation: portrait) {
                .header__slider__decoration2__01 {
                    top: 340px;
                    top: calc(100vw * (340 / 375));
                    left: calc(50% - (100vw * (177.5 / 375)));
                    width: calc(100vw * (67 / 375));
                }
            }

            .header__slider__decoration2__02 { position: absolute }
            @media screen and (orientation: landscape) {
                .header__slider__decoration2__02 {
                    top: min(calc(100vh * (37 / 1000)), calc(100vw * (37 / 1920)));
                    right: calc(100vw * (65 / 1920));
                    width: min(calc(100vw * (281 / 1920)), calc(100vh * (281 / 1000)), 319px);
                }
            }
            @media screen and (orientation: portrait) {
                .header__slider__decoration2__02 {
                    top: calc(100vw * (62 / 375));
                    right: calc(50% - (100vw * (177.5 / 375)));
                    width: calc(100vw * (78 / 375));
                }
            }


    .header__catchphrase {
        position: absolute;
        z-index: 12;
        color: var(--primaryBlue-500);
        font-weight: 700;
        text-align: center;
    }
    @media screen and (orientation: landscape) {
        .header__catchphrase {
            top: min(calc(100vh * (427 / 1000)), calc(100vw * (427 / 1920)));
            /* top: calc(100vh * (379 / 1000)); */
            left: calc(100vw * (70 / 1920));
            width: fit-content;
            font-size: min(max(1.0rem, calc(100vw * (24 / 1920))), max(1.0rem, calc(100vh * (24 / 1000))));
            line-height: 1.75;
        }
    }
    @media screen and (orientation: portrait) {
        .header__catchphrase {
            top: calc(100vw * (427 / 375));
            left: 50%;
            transform: translateX(-50%);
            width: 100%;
            font-size: max(1.0rem, calc(100vw * (16 / 375)));
            line-height: 1.5;
        }
    }


    .header__scroll-down {
        position: absolute;
        bottom: 0;
        left: 50%;
        transform: translateX(-50%);
        z-index: 6;
        width: calc(100vw * (245 / 1920));
    }
    @media screen and (orientation: portrait) {
        .header__scroll-down { display: none }
    }


    .header__control {
        color: var(--neutralColor-400);
        font-weight: 500;
        line-height: 2;
    }
    @media screen and (min-width: 1024px) {
        .header__control {
            position: fixed;
            top: -120px;
            left: 0;
            width: 100%;
            z-index: 9999;
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding-block: 0.84em;
            padding-right: min(80px, calc(100vw * (80 / 1920)));
            padding-left: min(30px, calc(100vw * (30 / 1920)));
            background-color: white;
            background-image: var(--multiColorSizeFixed);
            background-repeat: repeat-x;
            background-size: 40.8em .32em;
            box-shadow: 0 .12em .24em rgb(0 0 0 / .16);
            font-size: clamp(1.8rem, calc(100vw * (25 / 1920)), 2.5rem);
            transition: top .3s var(--linear);
        }
        .header__control.is-active { top: 0 }
    }
    @media screen and (max-width: 1023px) {
        .header__control {
            padding-top: 20px;
            padding-inline: calc(100vw * (20 / 375));
            font-size: 2.0rem;
        }
    }
    
        @media screen and (min-width: 1024px) {
            .header__control__logo {
                padding-top: .44em;
                width: 25.64em;
            }
        }
        @media screen and (max-width: 1023px) {
            .header__control__logo { display: none; }
        }


        @media screen and (min-width: 1024px) {
            .header__nav {
                display: flex;
                align-items: center;
                column-gap: .56em;
            }
        }
        @media screen and (max-width: 1023px) {
            .header__nav {
                position: fixed;
                inset: 0;
                z-index: 2;
                color: var(--neutralColor-400);
                font-size: 2.0rem;
                font-weight: 500;
                line-height: 2.7;
                pointer-events: none;
            }
            .header__nav.is-active {
                pointer-events: visible;
                z-index: 9999;
            }
            .header__nav.is-front { z-index: 9999 }
        }

            @media screen and (min-width: 1024px) {
                .header__nav__inner {
                    display: flex;
                    align-items: center;
                    column-gap: .56em;
                }
            }
            @media screen and (max-width: 1023px) {
                .header__nav__inner {
                    height: 0;
                    padding-inline: calc(100vw * (40 / 375));
                    background-color: white;
                    overflow-y: auto;
                    transition:
                        height .3s var(--linear),
                        padding-block .3s var(--linear);
                }
                .header__nav.is-active .header__nav__inner {
                    height: 100%;
                    padding-top: min(70px, calc(100vw * (70 / 375)));
                    padding-bottom: min(63px, calc(100vw * (63 / 375)));
                }
            }

            @media screen and (min-width: 1024px) {
                .header__nav__button { display: none }
            }
            @media screen and (max-width: 1023px) {
                .header__nav__button {
                    position: absolute;
                    top: 0;
                    right: 0;
                    z-index: 1;
                    width: min(86px, calc(100vw * (86 / 375)));
                    height: min(72px, calc(100vw * (72 / 375)));
                    pointer-events: visible;
                }
                .header__nav__button::before,
                .header__nav__button::after {
                    content: "";
                    position: absolute;
                    left: min(34px, calc(100vw * (34 / 375)));
                    width: min(32px, calc(100vw * (32 / 375)));
                    transition:
                        top .3s var(--easeOutQuart),
                        transform .3s var(--easeOutQuart);
                }
                .header__nav__button::before {
                    top: min(16px, calc(100vw * (16 / 375)));
                    height: min(11px, calc(100vw * (11 / 375)));
                    background-image:
                        linear-gradient(white, white),
                        linear-gradient(white, white);
                    background-repeat: no-repeat;
                    background-position: 0 0, 0 100%;
                    background-size: 100% min(2px, calc(100vw * (2 / 375)));
                }
                .header__nav__button::after {
                    top: min(34px, calc(100vw * (34 / 375)));
                    height: min(2px, calc(100vw * (2 / 375)));
                    background-color: white;
                }
                .header__nav.is-active .header__nav__button::before,
                .header__nav.is-active .header__nav__button::after { top: min(25px, calc(100vw * (25 / 375))) }
                .header__nav.is-active .header__nav__button::before {
                    transform: rotate(45deg);
                    height: min(2px, calc(100vw * (2 / 375)));
                }
                .header__nav.is-active .header__nav__button::after { transform: rotate(-45deg) }

                    .header__nav__button__bg {
                        position: absolute;
                        bottom: 0;
                        left: 0;
                        z-index: -1;
                        width: min(146px, calc(100vw * (146 / 375)));
                        height: min(146px, calc(100vw * (146 / 375)));
                        border-radius: 100%;
                        background-color: var(--primaryGreen-200);
                        transition:
                            bottom .3s var(--easeOutQuart),
                            left .3s var(--easeOutQuart),
                            width .3s var(--easeOutQuart),
                            height .3s var(--easeOutQuart);
                    }
                    .header__nav.is-active .header__nav__button__bg {
                        bottom: min(9px, calc(100vw * (9 / 375)));
                        left: max(-116px, calc(100vw * (-116 / 375)));
                        width: min(344px, calc(100vw * (344 / 375)));
                        height: min(344px, calc(100vw * (344 / 375)));
                        background-image: none;
                    }
            }

                @media screen and (min-width: 1024px) {
                    .header__nav__list {
                        display: flex;
                        column-gap: .56em;
                    }
                }

                    @media screen and (min-width: 1024px) {
                        .header__nav__item { position: relative }
                    }
                    @media screen and (max-width: 1023px) {
                        .header__nav__item {
                            display: flex;
                            flex-direction: column-reverse;
                            background-color: transparent !important;
                        }
                    }

                        @media screen and (min-width: 1024px) {
                            .header__nav__link {
                                position: relative;
                                display: block;
                                padding-inline: 1em;
                                border-radius: .24em;
                                transition:
                                    background-color .3s var(--easeOutQuart),
                                    color .3s var(--easeOutQuart);
                            }
                            .header__nav__item:hover .header__nav__link { color: white }
                            .header__nav__link::before {
                                content: "";
                                position: absolute;
                                top: 1.8em;
                                left: calc(50% - .2em);
                                width: .4em;
                                height: .4em;
                                border-radius: .2em;
                                transition: top .15s var(--linear);
                            }
                            .header__nav__item:hover .header__nav__link::before { top: 2.12em }
                            .header__nav__item:not(:hover) .header__nav__list--child + .header__nav__link::before {
                                top: 1.88em;
                            }

                            .header__nav__link::after {
                                content: "";
                                position: absolute;
                                top: 100%;
                                left: 0;
                                width: 100%;
                                height: .68em;
                                opacity: 0;
                                pointer-events: none;
                            }
                            .header__nav__item:hover .header__nav__link::after { pointer-events: visible }
                        }
                        @media screen and (max-width: 1023px) {
                            .header__nav__link,
                            .header__nav__link--child {
                                display: flex;
                                justify-content: space-between;
                                align-items: center;
                                border-bottom: 1px solid var(--primaryGreen-200);
                            }
                            .header__nav__link--child { padding-left: 2em }
                            .header__nav__item--child.no-indent .header__nav__link--child {
                                padding-left: 0;
                            }
                            .header__nav__link::after,
                            .header__nav__link--child::after {
                                content: "";
                                display: block;
                                width: 1.04em;
                                height: 1.04em;
                                background-image: url(../images/nav-arrow.svg);
                                background-repeat: no-repeat;
                                background-size: contain;
                            }
                        }

                    
                    @keyframes navChildOpen {
                        from { opacity: 0 }
                        to { opacity: 1 }
                    }
                    @media screen and (min-width: 1024px) {
                        .header__nav__list--child {
                            position: absolute;
                            top: 2.68em;
                            left: 0;
                            display: none;
                            flex-direction: column;
                            row-gap: .8em;
                            width: fit-content;
                            padding-block: 1.04em;
                            padding-inline: .68em;
                            border-width: .16em;
                            border-style: solid;
                            border-radius: .24em;
                            font-weight: 400;
                            line-height: 1.44;
                            white-space: nowrap;
                        }
                        .header__nav__item:last-of-type .header__nav__list--child {
                            right: 0;
                            left: auto;
                        }
                        .header__nav__item:hover .header__nav__list--child {
                            display: flex;
                            animation-name: navChildOpen;
                            animation-duration: .3s;
                            animation-timing-function: var(--easeOutQuart);
                            animation-fill-mode: both;
                        }

                        .header__nav__link--child {
                            display: flex;
                            justify-content: space-between;
                            align-items: center;
                            column-gap: 1.4em;
                        }
                        .header__nav__link--child::after {
                            content: "";
                            display: block;
                            width: 1.04em;
                            height: 1.04em;
                            background-image: url(../images/nav-arrow.svg);
                            background-repeat: no-repeat;
                            background-size: contain;
                        }
                    }

                    @media screen and (min-width: 1024px) {
                        .header__nav__contact {
                            height: max-content;
                            margin-top: .08em;
                        }
                    }
                    @media screen and (max-width: 1023px) {
                        .header__nav__contact {}
                    }
        
                        @media screen and (min-width: 1024px) {
                            .header__nav__contact > a {
                                aspect-ratio: 58 / 58;
                                display: block;
                                width: 58px;
                                background-image: url(../images/icon-contact.svg);
                                background-size: contain;
                            }
                        }
                        @media screen and (max-width: 1023px) {
                            .header__nav__contact a {
                                display: flex;
                                justify-content: space-between;
                                align-items: center;
                                border-bottom: 1px solid var(--primaryGreen-200);
                            }
                            .header__nav__contact a::after {
                                content: "";
                                display: block;
                                width: 1.04em;
                                height: 1.04em;
                                background-image: url(../images/nav-arrow.svg);
                                background-repeat: no-repeat;
                                background-size: contain;
                            }
                        }







/*------------------------------------*\
    $STYLES
\*------------------------------------*/
/* Concept */
.concept { display: grid }
@media screen and (orientation: portrait) {
    .concept { margin-top: calc(-100vw * (42 / 375)) }
}

    .concept__bg { grid-area: 1 / -1 }
    @media screen and (orientation: landscape) {
        .concept__bg::before {
            top: calc(-100vw * (206 / 1920));
            left: calc(100vw * (67 / 1920));
            width: calc(100vw * (642 / 1920));
            height: calc(100vw * (642 / 1920));
        }
        .concept__bg::after {
            top: calc(100vw * (194.3 / 1920));
            right: calc(-100vw * (320.78 / 1920));
            width: calc(100vw * (698.38 / 1920));
            height: calc(100vw * (578.74 / 1920));
        }
    }
    @media screen and (orientation: portrait) {
        .concept__bg::before {
            top: calc(-100vw * (63 / 375));
            left: calc(-100vw * (60 / 375));
            width: calc(100vw * (222 / 375));
            height: calc(100vw * (222 / 375));
        }
        .concept__bg::after {
            top: calc(100vw * (89 / 375));
            right: calc(-100vw * (88.04 / 375));
            width: calc(100vw * (214.87 / 375));
            height: calc(100vw * (178.06 / 375));
        }
    }

    .concept .block__inner {
        z-index: 1;
        grid-area: 1 / -1;
        display: flex;
        flex-direction: column;
    }
    @media screen and (orientation: landscape) {
        .concept .block__inner {
            row-gap: 100px;
            padding-top: 180px;
            padding-bottom: 66px;
        }
    }
    @media screen and (orientation: portrait) {
        .concept .block__inner {
            row-gap: 44px;
            padding-top: calc(100vw * (96 / 375));
            padding-bottom: 39px;
        }
    }

        .concept__block {}

            .concept .content-title { margin-bottom: clamp(22px, calc(100vw * (22 / 768)), 80px) }
            .concept .content-title:first-of-type { margin-bottom: clamp(40px, calc(100vw * (40 / 768)), 80px) }

            .concept__other { padding-inline: clamp(10px, calc(100vw * (10 / 768)), 20px) }

                .concept__other__list {
                    display: flex;
                    column-gap: clamp(10px, calc(100vw * (10 / 768)), 20px);
                }
                @media screen and (min-width: 768px) {
                    .concept__other__list {
                        row-gap: 48px;
                        justify-content: space-between;
                        margin-bottom: 64px;
                    }
                }
                @media screen and (max-width: 767px) {
                    .concept__other__list {
                        display: flex;
                        flex-direction: column;
                        row-gap: 20px;
                        max-width: 414px;
                        margin-inline: auto;
                        margin-bottom: 45px;
                    }
                }

                    @media screen and (min-width: 768px) {
                        .concept__other__item { width: min(329px, calc((100% - clamp(20px, calc(100vw * (20 / 768)), 40px)) / 3)) }
                    }
                    @media screen and (max-width: 767px) {
                        .concept__other__item { width: 100% }
                    }

                        @media screen and (min-width: 768px) {
                            .concept__other__link {
                                display: block;
                                height: 100%;
                                padding-bottom: 39.2px;
                                background-repeat: no-repeat;
                                background-position: 50% 100%;
                                background-size: 134px;
                            }
                        }
                        @media screen and (max-width: 767px) {
                            .concept__other__link {
                                position: relative;
                                display: grid;
                                grid-template-columns: 119px 1fr;
                                grid-template-rows: 90px 1fr;
                                grid-column-gap: 9.4px;
                                grid-row-gap: 10px;
                            }
                            .concept__other__link::before {
                                content: "";
                                position: absolute;
                                top: 66px;
                                right: -10px;
                                width: 30px;
                                height: 30px;
                            }
                        }

                            .concept__other__title {
                                font-size: clamp(2.0rem, calc(100vw * (20 / 768)), 3.0rem);
                                line-height: 1.5;
                                text-align: center;
                                background-repeat: no-repeat;
                                background-position: 50% 100%;
                            }
                            @media screen and (min-width: 768px) {
                                .concept__other__title {
                                    padding-bottom: calc(1em * (31.57 / 30));
                                    margin-bottom: calc(1em * (18.4 / 30));
                                    background-size: 7.172em;
                                }
                            }
                            @media screen and (max-width: 767px) {
                                .concept__other__title {
                                    padding-bottom: calc(1em * (22.5 / 20));
                                    margin-top: 1.3em;
                                    margin-right: 42px;
                                    background-size: 7.023em;
                                }
                            }

                            .concept__other__image { aspect-ratio: 329 / 239 }
                            .concept__other__image img {
                                width: 100%;
                                height: 100%;
                                object-fit: contain;
                            }
                            @media screen and (min-width: 768px) {
                                .concept__other__image { margin-bottom: .4em }
                            }
                            @media screen and (max-width: 767px) {
                                .concept__other__image {
                                    grid-column: 1 / 2;
                                    grid-row: 1 / 2;
                                }
                            }

                            .concept__other__text {
                                font-weight: 700;
                                line-height: 1.75;
                                text-align: center;
                            }
                            @media screen and (min-width: 768px) {
                                .concept__other__text { font-size: clamp(1.0rem, calc(100vw * (10 / 768)), 1.6rem) }
                            }
                            @media screen and (max-width: 767px) {
                                .concept__other__text {
                                    font-size: 1.6rem;
                                    grid-column: 1 / 3;
                                }
                            }



/* Message */
.message { display: grid }

    .message__bg {
        grid-area: 1 / -1;
        overflow: hidden;
    }
    @media screen and (orientation: landscape) {
        .message__bg::before {
            bottom: calc(-100vw * (82.6 / 1920));
            right: calc(100vw * (210 / 1920));
            width: calc(100vw * (410 / 1920));
            height: calc(100vw * (410 / 1920));
        }
        .message__bg::after {
            bottom: calc(100vw * (194.3 / 1920));
            left: calc(100vw * (157 / 1920));
            width: calc(100vw * (522.97 / 1920));
            height: calc(100vw * (413.82 / 1920));
        }
    }
    @media screen and (orientation: portrait) {
        .message__bg::before {
            bottom: calc(100vw * (30.6 / 375));
            right: calc(-100vw * (29 / 375));
            width: calc(100vw * (159 / 375));
            height: calc(100vw * (159 / 375));
        }
        .message__bg::after {
            bottom: calc(100vw * (147.4 / 375));
            left: calc(-100vw * (66.58 / 375));
            width: calc(100vw * (168.58 / 375));
            height: calc(100vw * (133.4 / 375));
        }
    }


    .message .block {
        grid-area: 1 / -1;
        z-index: 1;
    }

        .message .block__inner {
            padding-top: clamp(50px, calc(100vw * (50 / 768)), 64px);
            padding-bottom: clamp(59.6px, calc(100vw * (59.6 / 768)), 99.6px);
        }

        .message .content-title { margin-bottom: clamp(40px, calc(100vw * (40 / 768)), 80px) }

        .message .content-text { margin-bottom: clamp(37px, calc(100vw * (37 / 375)), 100px) }

        .message__movie {
            width: min(780px, 100%);
            margin-inline: auto;
        }

            .message__movie iframe {
                aspect-ratio: 16 / 9;
                display: block;
                width: calc(100% + 20px);
                margin-inline: -10px;
            }



.header__award {
    display: grid;
    grid-template-columns: calc(100% * (103.72 / 577.2)) 1fr;
    grid-column-gap: calc(100vw * (10.5 / 1920));
    align-items: center;
    width: calc(100vw * (590 / 1920));
    padding: calc(100vw * (12.6 / 1920)) 0 calc(100vw * (3.5 / 1920)) calc(100vw * (8.8 / 1920));
    margin-top: calc(100vw * (73 / 1920));
    margin-left: auto;
    margin-right: auto;
    border: max(1px, calc(100vw * (2 / 1920))) solid #0A4CA1;
    border-radius: calc(100vw * (10 / 1920));
    background-color: white;
    color: #333;
    font-size: calc(100vw * (20 / 1920));
    line-height: 2;
    text-align: left;
}

.header__award > img {
    
}

.header__award > p {
    margin-bottom: calc(100vw * (2.5 / 1920));
}

.header__award strong {
    background-image: linear-gradient(#333, #333);
    background-repeat: no-repeat;
    background-position: 0 100%;
    background-size: 100% 1px;
    font-weight: 400;
}

/* 
.header__award__top {
    display: grid;
    grid-template-columns: calc(100% * (157 / 570)) 1fr;
    align-items: center;
    grid-column-gap: calc(100% * (13 / 570));
}

.header__award__top > img {
    width: 100%;
}

.header__award strong > em.is-red {
    color: #F45354;
}
.header__award strong > em.is-green {
    color: #007C2B;
}
.header__award strong > em.is-blue {
    color: #0073C3;
}

.header__award__bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: calc(100% * (530 / 570));
    padding-top: calc(100% * (10 / 570));
    margin-top: calc(100% * (13 / 570));
    margin-right: auto;
    margin-left: auto;
    background-image: repeating-linear-gradient(90deg, #CEDC2D 0, #CEDC2D calc(100vw * (4 / 1920)), transparent calc(100vw * (4 / 1920)), transparent calc(100vw * (8 / 1920)));
    background-repeat: no-repeat;
    background-position: 0 0;
    background-size: 100% 1px;
    font-size: calc(100vw * (18 / 1920));
}

.header__award__nav {
    color: #C53A82;
    font-weight: bold;
}

.header__award__list {
    font-weight: 400;
}
.header__award__item > a {
    text-decoration: underline;
} */

.header__slider__decoration2__01 {
    /*width: min(calc(100vw * (228 / 1920)), calc(100vh * (228 / 1000)), 228px)*/
}

.header__special__course__banner img {
    margin-top: calc(100vw * -0.026);
    width: calc(100vw * 0.058);
}

.header__special__course__banner {
    width: calc(100vw * 0.32);
    border: 3px solid #c85392;
    text-decoration: none;
    border-radius: 10px;
    background: rgba(252,237,236,0.8);
    text-align: left;
    font-size: calc(100vw * 0.0104);
    color: #333;
    font-weight: normal;
    margin-top: calc(100vw * 0.04);
    padding: calc(100vw * 0.006) calc(100vw * 0.01) calc(100vw * 0.0039) calc(100vw * 0.01);
    margin-left: auto;
    margin-right: auto;
    font-weight: bold;
}

.header__special__course__banner__description {
    display: flex;
    align-items: center;
    gap: calc(100vw * 0.008);
}

.header__special__course__banner__description span:nth-of-type(1) {
    color: #F45354;
}

.header__special__course__banner__description span:nth-of-type(2) {
    color: #d01f35;
}

.header__special__course__banner__description span:nth-of-type(3) {
    color: #006aae;
}

.header__special__course__banner__links {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 2rem;
    border-top: 1px dashed #C53A82;
    margin-top: calc(100vw * 0.006);
    padding-top: calc(100vw * 0.005);
}

.header__special__course__banner__link__title {
    color: #C53A82;
    font-size: calc(100vw * 0.0095);
}

.header__special__course__banner__link__list a {
    display: block;
    text-decoration: underline;
    font-weight: normal;
    font-size: calc(100vw * 0.0095);
}


.header__special__course__banner__link__list a:hover {
    text-decoration: none;
}


.sp-only {
    display: none;
}


@media screen and (max-width: 1000px) {
    .header__special__course__banner br.less-580 {
        display: inline;
    }
}


@media screen and (orientation: landscape) {
    .header__catchphrase {
        top: min(calc(100vh * (377 / 1000)), calc(100vw * (377 / 1920))) 
    }

    .header {
        max-height: none!important;
    }
}


@media screen and (orientation: portrait) {
    
    .header {
        aspect-ratio: 375 / 677;
        aspect-ratio: 375 / 935;
    }

    .header__special__course__banner,
    .header__award {
        grid-template-columns: calc(100vw * (66.86 / 375)) 1fr;
        grid-column-gap: calc(100vw * (9 / 375));
        width: calc(100vw * (355 / 375));
        padding: calc(100vw * (9 / 375)) calc(100vw * (10 / 375)) calc(100vw * (13.7 / 375)) calc(100vw * (6.1 / 375));
        margin-top: calc(100vw * (15 / 375));
        border-width: max(1px, calc(100vw * (2 / 375)));
        border-radius: calc(100vw * (10 / 375));
        font-size: calc(100vw * (16 / 375));
        line-height: 1.5;
    }

    /* .header__award__top {
        grid-template-columns: calc(100% * (144 / 335)) 1fr;
        grid-column-gap: calc(100% * (10 / 335));
    }

    .header__award__bottom {
        display: block;
        width: calc(100% * (316 / 335));
        margin-top: calc(100% * (16 / 335));
        padding-top: calc(100% * (10 / 335));
        padding-left: calc(100% * (13 / 335));
        font-size: calc(100vw * (14 / 375));
        line-height: calc(20 / 14);
    }
 */
    .header__award__list {
        margin-top: calc(100% * (8 / 316));
        font-size: calc(100vw * (16 / 375));
        line-height: 2.125;
    }

    .header__special__course__banner__description {
        gap: calc(100vw * 0.03);
        margin-top: calc(100vw * -0.02);
    }

    .header__special__course__banner__link__title {
        font-size: calc(100vw * 0.04);
    }

    .header__special__course__banner__link__list a {
        font-size: calc(100vw * 0.04);
    }

    .header__special__course__banner__links {
        padding-top: calc(100vw * 0.03);
        margin-top: calc(100vw * 0.03);
        flex-flow: column;
        gap: calc(100vw * 0.01);
        align-items: flex-start;
        padding-left: calc(100vw * 0.07);
        padding-bottom: calc(100vw * 0.02);
    }

    .header__special__course__banner__link__title {
        margin-bottom: calc(100vw * 0.02);
        font-size: calc(100vw * 0.039);
    }

    .header__special__course__banner__links a + a {
        margin-top: calc(100vw * 0.03);
    }

    .header__special__course__banner {
        gap: calc(100vw * 0.04);
        
    }

    .header__special__course__banner img {
        width: calc(100vw * 0.25);
    }

    /*
    .header__bg::after {
        bottom: calc((100vw * (606 / 375)) - 1px)!important;
    }

    .header__bg::before {
        padding-bottom: calc((100vw * (606 / 375)) - 1px)!important;
    }
    */

    .sp-only {
        display: inline;
    }
}

.fs-course-type-color-award--before::before, .fs-course-type-color-award--after::after {
    background-color: #88b7ef;
}


.fs-course-type-color-award--before::before {
    background-color: #88b7ef;
}

.header__nav__item.fs-course-type-color-award:hover .header__nav__link {
    background-color: #88b7ef;
}

/*
.header__award {
    display: none;
}
*/

.header__special__course__banner {
    display: none;
}


.header__nav__list--child.contact {
    border-color: #194EA2;
    background-color: #E7EFFA;
    left: auto;
    right:  0;
    top: 3.2em;
    visibility: hidden;
}

.header__nav__list--child.contact .header__nav__link--child::after {
    background-image: url(../images/nav-arrow-blue.svg);
}

.header__nav__contact:hover .header__nav__list--child {
    display: flex;
    animation-name: navChildOpen;
    animation-duration: .3s;
    animation-timing-function: var(--easeOutQuart);
    animation-fill-mode: both;
    visibility: visible;
}

.header__nav__contact {
    position: relative;
    padding: 0 0 1.2em;
    margin:  0 0 -1.2em;
}

.sp-only {
    display: none;
}

.pc-only {
    display: block;
}


@media screen and (max-width: 1023px) {
    .header__nav__list--child.contact {
        background: none;
        visibility: visible;
    }

    .header__nav__list--child.contact .header__nav__link--child::after {
        background-image: url(../images/nav-arrow.svg);
    }

    .header__nav__contact .header__nav__list--child {
        display: block!important;
        animation: none!important;
    }

    .sp-only {
        display: block;
    }

    .pc-only {
        display: none;
    }

}

.header__nav__link {
    white-space: nowrap;
}