@charset "utf-8";
:root {
    --header-height: 88px;
    --color-link: #0A79D9;
    --font-yu: "Yu Gothic Pr6N", "YuGoPr6N-Regular", "游ゴシック体 Pr6N", "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", sans-serif;
    --font-hel: Helvetica, "Helvetica Neue", sans-serif;
    --inner-width: 1213px;
    --bg-gradient: linear-gradient(180deg,
            rgba(0, 0, 0, 0.6) 0%,
            rgba(0, 0, 0, 0.3) 100%);
    --michi-color: #1495CC;
    --interview-color: #3D48AD;
    --donation-colorA: #E64D49;
    --donation-colorB: #F18035;
    --donation-colorC: #32A545;
    --point-color1: #70AF46;
    --point-color2: #ED7E47;
    --point-color3: #008CCC;
    @media screen and (max-width: 767px) {
        --header-height: 60px;
    }
}
.inner-wrap {
    width: min(var(--inner-width), 100% - 10vw);
    margin-inline: auto;
}
html, body {
    @media screen and (min-width: 768px) {
        min-width: 1480px;
    }
    @media screen and (max-width: 767px) {
        min-width: 100%;
    }
}
body:has(.js-sp-menu-btn.active) {
    overflow: hidden;
}
#wrap {
    margin-inline: auto;
    overflow: hidden;
    padding-top: var(--header-height);
}
main {
    /* position: relative; */
}
/*==========================================================================================================
hover
==========================================================================================================*/
@media (hover: hover) {
    a,
    a img {
        transition: opacity 0.3s ease;
    }
    a:hover {
        opacity: 0.7;
    }
}
/*==========================================================================================================
PC Only
==========================================================================================================*/
@media screen and (min-width: 768px) {
    .sp-menu-btn {
        display: none !important;
    }
    .sp-only {
        display: none !important;
    }
}
/*==========================================================================================================
 SP Only
==========================================================================================================*/
@media screen and (max-width: 767px) {
    .pc-only {
        display: none !important;
    }
}
/*---------------------------------------------
 header
---------------------------------------------*/
#header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 2000;
    background: rgba(255, 255, 255, 1);
    backdrop-filter: blur(10px);
    --inner-width: 1366px;
    .header-inner {
        width: min(var(--inner-width), 100%);
        min-width: 1200px;
        margin-inline: auto;
        display: grid;
        grid-template: "logo . right" /auto 1fr auto;
        height: var(--header-height);
        align-items: center;
        padding-right: 10px;
        @media screen and (max-width: 767px) {
            min-width: 100%;
        }
        .logo {
            grid-area: logo;
            display: flex;
            flex-direction: column;
            height: 100%;
            background: #fff;
            width: min(247px, 50vw);
            --_deg: 37px;
            clip-path: polygon(0 0, calc(100% - var(--_deg)) 0, 100% 100%, 0% 100%);
            .root {
                display: flex;
                flex: 1;
                padding: 6px 12px;
                @media screen and (max-width: 767px) {
                    padding: 3px 12px;
                }
                img {
                    @media screen and (max-width: 767px) {
                        width: 120px;
                        height: auto;
                    }
                }
            }
            .special {
                font-size: 1.1rem;
                padding: 6px 12px;
                display: inline-block;
                background: #EFEFEF;
                @media screen and (max-width: 767px) {
                    font-size: 0.9rem;
                    padding: 2px 10px;
                }
            }
        }
        .sp-menu-btn.active+.gnav {
            transform: translateY(100%);
            opacity: 1;
        }
        .gnav {
            grid-area: right;
            display: flex;
            padding-right: 20px;
            @media screen and (max-width: 767px) {
                position: absolute;
                bottom: var(--header-height);
                opacity: 0;
                left: 0;
                padding: 0;
                width: 100%;
                flex-direction: column;
                background: rgba(255, 255, 255, 1);
                backdrop-filter: blur(10px);
                padding: 10px;
                padding-top: calc(var(--header-height) + 10px);
                transform: translateY(0);
                transition: all 0.6s ease;
                z-index: -1;
                overflow-y: scroll;
                max-height: 100vh;
            }
            &>ul {
                display: flex;
                gap: 16px;
                align-items: center;
                @media screen and (max-width: 767px) {
                    flex-direction: column;
                    gap: 0;
                    align-items: normal;
                }
                &>li {
                    position: relative;
                    &.cur .mega-drop {
                        opacity: 1;
                        pointer-events: all;
                    }
                    &.nav-donation {
                        @media screen and (max-width: 767px) {
                            margin-top: 5px;
                            margin-bottom: 5px;
                        }
                        &>a {
                            background: #e36977;
                            height: auto;
                            padding: 10px 20px;
                            color: #fff;
                            border-radius: 100px;
                            &:after {
                                background: #fff !important;
                            }
                        }
                        .mega-drop {
                            top: calc(var(--header-height) - 44px);
                            @media screen and (max-width: 767px) {
                                margin-top: 10px;
                            }
                        }
                    }
                    &.nav-language {
                        white-space: nowrap;
                        text-align: center;
                        button {
                            color: var(--color-link);
                            &[data-stt-active] {
                                color: #000;
                                pointer-events: none;
                            }
                        }
                    }
                    .mega-drop {
                        position: absolute;
                        top: calc(var(--header-height) - 20px);
                        right: -20px;
                        width: 250px;
                        padding: 10px;
                        background: rgba(255, 255, 255, 0.9);
                        box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
                        opacity: 0;
                        transition: opacity 0.3s ease;
                        pointer-events: none;
                        @media screen and (max-width: 767px) {
                            position: static;
                            width: 100%;
                            box-shadow: none;
                            padding: 0;
                            overflow: hidden;
                        }
                        ul {
                            flex-direction: column;
                            li {
                                a {
                                    display: block;
                                    padding: 5px;
                                    font-size: 1.4rem;
                                    &[target="_blank"]:after {
                                        content: "";
                                        display: inline-block;
                                        content: "";
                                        background: url(../images/icon_blank.svg) no-repeat center / 12px auto;
                                        width: 12px;
                                        height: 10px;
                                        margin-left: 5px;
                                        clip-path: none;
                                    }
                                    @media screen and (max-width: 767px) {
                                        padding: 10px;
                                    }
                                }
                            }
                        }
                    }
                    a {
                        color: var(--color-link);
                    }
                    &>a {
                        display: flex;
                        height: var(--header-height);
                        align-items: center;
                        @media screen and (max-width: 767px) {
                            width: 100%;
                            height: auto;
                            padding: 10px;
                        }
                        &.mega-btn {
                            position: relative;
                            @media screen and (max-width: 767px) {
                                justify-content: space-between;
                            }
                            &:after {
                                content: "";
                                display: inline-block;
                                background: var(--color-link);
                                mask: url(../images/icon_nav_bottom.svg) no-repeat center;
                                width: 12px;
                                height: 12px;
                                margin-left: 6px;
                                margin-bottom: 4px;
                            }
                        }
                        @media screen and (max-width: 767px) {
                            .cur &.mega-btn {
                                &:after {
                                    margin: 0;
                                    transform: rotate(180deg);
                                }
                            }
                        }
                    }
                }
            }
        }
        .lang-btn-wrap {
            margin-left: min(30px, 2vw);
            display: flex;
            align-items: center;
            @media screen and (max-width: 767px) {
                margin-left: 0;
            }
            a {
                color: var(--color-link);
                display: flex;
                width: 48px;
                height: 48px;
                clip-path: circle(50%);
                background: #fff;
                justify-content: center;
                align-items: center;
                @media screen and (max-width: 767px) {
                    width: auto;
                    height: auto;
                    padding: 10px;
                    &:after {
                        content: attr(data-lang-jp);
                        font-size: inherit;
                        color: inherit;
                    }
                    span {
                        display: none;
                    }
                }
            }
        }
    }
    .sp-menu-btn {
        grid-area: 1/ -1;
        --_width: 44px;
        --_height: 44px;
        --_line-width: 24px;
        --_line-height: 2px;
        --_line-gap: 8px;
        --_line-color: var(--color-link);
        --_line-radius: 2px;
        --_duration: 0.2s;
        width: var(--_width);
        height: var(--_height);
        padding: 0;
        border: none;
        background: none;
        cursor: pointer;
        position: relative;
        .sp-menu-btn_line {
            position: absolute;
            display: block;
            width: var(--_line-width);
            height: var(--_line-height);
            background: var(--_line-color);
            border-radius: var(--_line-radius);
            text-indent: -9999px;
            transition: background var(--_duration);
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            &::before,
            &::after {
                content: "";
                position: absolute;
                left: 0;
                width: 100%;
                height: 100%;
                background: var(--_line-color);
                border-radius: var(--_line-radius);
                transition: transform var(--_duration);
            }
            &::before {
                top: calc(var(--_line-gap) * -1);
            }
            &::after {
                top: var(--_line-gap);
            }
        }
        &.active {
            .sp-menu-btn_line {
                background: transparent;
                &::before {
                    transform: translateY(var(--_line-gap)) rotate(45deg);
                }
                &::after {
                    transform: translateY(calc(var(--_line-gap) * -1)) rotate(-45deg);
                }
            }
        }
    }
}
/*---------------------------------------------
 footer
---------------------------------------------*/
#footer {
    padding: 64px 0;
    background: #fff;
    --inner-width: 1162px;
    position: relative;
    @media screen and (max-width: 767px) {
        padding: 40px 0;
    }
    .cv-side, .page-top {
        opacity: 0;
        pointer-events: none;
        transition: all 0.3s ease;
    }
    .cv-side.cur, .page-top.cur {
        opacity: 1;
        pointer-events: all;
    }
    .cv-side-before,
    .cv-side {
        position: fixed;
        right: 0;
        bottom: 50%;
        transform: translateY(50%);
        z-index: 7;
        @media screen and (max-width: 767px) {
            width: 40px;
        }
    }
    .cv-side-before {
        transform: translateY(calc(50% - 120px));
        @media screen and (max-width: 767px) {
            transform: translateY(calc(50% - 110px));
        }
        a:hover {
            img {
                opacity: 1;
            }
        }
        &+.cv-side-first {
            transform: translate(328px, calc(50% + 160px));
            @media screen and (max-width: 767px) {
                transform: translate(226px, calc(50% + 35px));
            }
            &.open {
                transform: translate(0, calc(50% + 160px));
                @media screen and (max-width: 767px) {
                    transform: translate(0, calc(50% + 35px));
                }
            }
        }
    }
    .cv-side-first {
        display: grid;
        grid-template-columns: auto 1fr;
        transform: translate(320px, 50%);
        transition: all 0.3s ease;
        @media screen and (max-width: 767px) {
            width: auto;
            transform: translate(228px, 50%);
        }
        &.open {
            transform: translate(0%, 50%);
            .cv-side-img {
                &:after {
                    background: url(../images/bnr_close.png) center /cover;
                }
            }
        }
        &:before,
        &:after {
            position: absolute;
            content: "";
        }
        &:before {
            background: #fff;
            opacity: 0.3;
            grid-area: 1 / 2 / 2 / 2;
            width: 1px;
            top: 10px;
            bottom: 22px;
            z-index: 1;
        }
        &:after {
            inset: 0 0 18px 0;
            background: #3CB371;
            z-index: -1;
            @media screen and (max-width: 767px) {
                inset: 0;
            }
        }
        .cv-side-nav {
            margin: 20px 20px 40px 20px;
            @media screen and (max-width: 767px) {
                margin: 10px 10px 10px 4px;
            }
            ul {
                display: flex;
                flex-direction: column;
                gap: 16px;
                background: #fff;
                border-radius: 20px;
                padding: 20px;
                font-weight: bold;
                @media screen and (max-width: 767px) {
                    padding: 10px;
                    font-size: 1.2rem;
                    gap: 4px;
                }
            }
        }
        .cv-side-nav-ttl {
            color: #fff;
            font-size: 1.8rem;
            font-weight: bold;
            margin-bottom: 0.8em;
            @media screen and (max-width: 767px) {
                font-size: 1.4rem;
                margin-bottom: 0.4em;
            }
        }
        .cv-side-img {
            position: relative;
            cursor: pointer;
            &:hover {
                opacity: 0.7;
            }
            @media screen and (max-width: 767px) {
                width: 40px;
            }
            &:after {
                position: absolute;
                content: "";
                bottom: -20px;
                left: 12px;
                background: url(../images/bnr_open.png) center /cover;
                width: 69px;
                height: 80px;
                @media screen and (max-width: 767px) {
                    display: none;
                }
            }
        }
    }
    .page-top {
        position: absolute;
        z-index: 1;
        right: 100px;
        top: -60px;
        width: 60px;
        height: 60px;
        border-radius: 50%;
        background: var(--color-link) url(../images/icon_page_top.svg) no-repeat center /15px auto;
        @media screen and (max-width: 767px) {
            width: 40px;
            height: 40px;
            right: 45px;
            top: 40px;
        }
    }
    .site-id-wrap {
        .logo {
            display: flex;
            flex-direction: column;
            gap: 20px;
            .special {
                font-size: 1.5rem;
            }
        }
        .about-site {
            font-size: 1.2rem;
            margin-top: 20px;
            a {
                color: var(--color-link);
                font-weight: normal;
                gap: 8px;
            }
        }
    }
    .footer-contents {
        .inner-wrap {
            display: grid;
            grid-template-columns: auto 1fr;
            gap: 120px;
            @media screen and (max-width: 767px) {
                grid-template-columns: 1fr;
                gap: 20px;
            }
        }
    }
    .footer-nav {
        display: grid;
        grid-template-columns: repeat(3, auto);
        gap: 32px;
        padding-top: 10px;
        @media screen and (max-width: 767px) {
            grid-template-columns: 1fr;
        }
        .parents-list {
            display: flex;
            flex-direction: column;
            gap: 16px;
            font-weight: bold;
            a {
                color: var(--color-link);
                &[target="_blank"]:after {
                    content: "";
                    display: inline-block;
                    content: "";
                    background: url(../images/icon_blank.svg) no-repeat center / 12px auto;
                    width: 12px;
                    height: 10px;
                    margin-left: 5px;
                    clip-path: none;
                }
            }
            .child-list {
                border-left: 1px solid var(--color-link);
                display: flex;
                flex-direction: column;
                gap: 10px;
                &:not(:first-child) {
                    margin-top: 20px;
                }
                li {
                    padding: 0 12px;
                }
            }
        }
    }
    .footer-bottom {
        margin-top: 60px;
        font-size: 1.2rem;
        a {
            color: var(--color-link);
        }
    }
    .footer-copy {
        margin-top: 40px;
    }
}
/*---------------------------------------------
 mv
---------------------------------------------*/
.mv {
    position: relative;
    height: 100vh;
    display: flex;
    .mv-item {
        height: 100%;
        width: 100%;
        top: 0;
        position: fixed;
        overflow: hidden;
        /* transform: skew(10deg); */
        .mv-item-outer,
        .mv-item-inner {
            width: 100%;
            height: 100%;
        }
        .mv-item-bg {
            display: flex;
            align-items: center;
            justify-content: center;
            position: absolute;
            height: 100%;
            width: 100%;
            top: 0;
            left: 0;
            background-image: url(https://images.unsplash.com/photo-1617478755490-e21232a5eeaf?crop=entropy&cs=srgb&fm=jpg&ixid=MnwxNDU4OXwwfDF8cmFuZG9tfHx8fHx8fHx8MTYxNzU1NjM5NA&ixlib=rb-1.2.1&q=75&w=1920);
            background-size: cover;
            background-position: center;
            h2 {
                z-index: 2;
            }
        }
    }
}
.mv-top {
    padding-top: 20px;
    margin-right: -6vw;
    padding-bottom: 60px;
    @media screen and (max-width: 767px) {
        padding-bottom: 100px;
        margin-right: 0;
    }
    .img {
        text-align: center;
    }
    .line-bnr {
        position: absolute;
        left: 0;
        bottom: 0;
        transition: all 0.3s ease;
        &.hidden {
            opacity: 0;
        }
        @media screen and (max-width: 767px) {
            width: 76%;
        }
    }
}
.concept-movie-view {
    opacity: 0;
    pointer-events: none;
    position: fixed;
    right: 15px;
    bottom: 125px;
    z-index: 7;
    transition: all 0.3s ease;
    @media screen and (max-width: 767px) {
        right: 10px;
        bottom: 24px;
    }
    &.cur {
        opacity: 1;
        pointer-events: all;
    }
    &.is-hide {
        opacity: 0;
        pointer-events: none;
    }
    .fit-bnr-close {
        background: #fff;
        border-radius: 50%;
        box-shadow: 0 3px 6px rgba(0, 0, 0, .16);
        width: 27px;
        height: 27px;
        position: absolute;
        right: -6px;
        top: -9px;
        z-index: 2;
        transition: opacity 0.3s ease;
        &::after,
        &::before {
            background: var(--color-link);
            content: '';
            display: block;
            width: 13px;
            height: 1px;
            margin: auto;
            position: absolute;
            left: 0;
            right: 0;
            top: 0;
            bottom: 0;
        }
        &::before {
            transform: rotate(45deg);
        }
        &::after {
            transform: rotate(-45deg);
        }
        @media (hover: hover) {
            &:hover {
                opacity: .7;
            }
        }
        @media screen and (max-width: 767px) {
            width: 24px;
            height: 24px;
            &::after,
            &::before {
                width: 12px;
            }
        }
        span {
            display: none;
        }
    }
    .fit-concept-movie-btn {
        border-radius: 16px;
        box-shadow: 0 3px 6px rgba(0, 0, 0, .16);
        width: 220px;
        position: relative;
        z-index: 1;
        transition: opacity 0.3s ease;
        @media (hover: hover) {
            &:hover {
                opacity: .7;
            }
        }
        @media screen and (max-width: 767px) {
            border-radius: 10px;
            width: 120px;
        }
        img {
            border-radius: 16px;
            width: 100%;
        }
    }
}
.num,
.en {
    font-family: var(--font-hel);
}
.entry-body {
    a {
        &:not(.btn) {
            &[target="_blank"] {
                &:after {
                    content: "";
                    display: inline-block;
                    content: "";
                    background: url(../images/icon_blank.svg) no-repeat center /12px auto;
                    width: 12px;
                    height: 10px;
                    margin-left: 4px;
                    margin-right: 4px;
                }
            }
        }
    }
}
.top-new {
    padding: 160px 0 0;
    @media screen and (max-width: 767px) {
        padding-top: 40px;
    }
}
.hd02 {
    margin-bottom: min(60px, 6vw);
    color: #fff;
    .en {
        font-size: clamp(3.2rem, calc(0.186rem + 0.303vw), 6rem);
        font-weight: bold;
        line-height: 1;
    }
    .num {
        font-size: clamp(4.8rem, calc(3.362rem + 3.835vw), 8.6rem);
        font-weight: bold;
        line-height: 1;
        small {
            font-size: 0.7em;
            margin-left: 4px;
        }
    }
    .range {
        margin-left: 10px;
        font-weight: bold;
    }
    .ja {
        font-size: clamp(1.3rem, calc(0.973rem + 0.605vw), 1.8rem);
        /* min: 12px, max: 18px */
        ;
        font-weight: bold;
    }
}
.new-slider {
    overflow: visible;
    clip-path: inset(0 -50vw 0 0);
    height: 612px;
    --swiper-pagination-color: #fff;
    --swiper-pagination-bullet-inactive-color: #fff;
    --swiper-pagination-bullet-inactive-opacity: 0.5;
    --swiper-pagination-bullet-size: 5px;
    --swiper-pagination-bullet-horizontal-gap: 7px;
    @media screen and (max-width: 767px) {
        height: 440px;
    }
    .swiper-slide {
        --_mt: 6.5%;
        transition: opacity 0.5s ease, transform 0.5s ease, margin 0.5s ease;
        @media screen and (max-width: 767px) {
            --_mt: 10%;
        }
        &.swiper-slide-prev {
            margin-top: calc(var(--_mt) *-1);
        }
        &.swiper-slide-active+& {
            margin-top: var(--_mt);
        }
        &.swiper-slide-active+&+& {
            margin-top: calc(var(--_mt) *2);
        }
        &.swiper-slide-active+&+&+& {
            margin-top: calc(var(--_mt) *3);
        }
    }
    .slide-nav {
        display: flex;
        width: fit-content;
        align-items: center;
        position: absolute;
        left: 20px;
        bottom: 76px;
        z-index: 10;
        font-size: 0;
        gap: 8px;
        @media screen and (max-width: 767px) {
            left: 5px;
        }
        .slide-prev:before,
        .slide-next:before {
            content: "";
            display: inline-block;
            background: url(../images/icon_prev.svg) no-repeat center;
            width: 10px;
            height: 12px;
        }
        .slide-next:before {
            transform: scale(-1);
        }
    }
}
.cat01,
.michi {
    --_cat-color: var(--michi-color);
}
.cat02 {
    --_cat-color: #E82C3D;
}
.cat03 {
    --_cat-color: #6D76C7;
}
.cat04 {
    --_cat-color: #723493;
}
.cat05 {
    --_cat-color: #000;
}
.new-item {
    --_deg: 18%;
    --_bd-color: #f00;
    clip-path: inset(-10px -10px -10px -10px);
    display: block;
    &[data-icon="NEW"] {
        .pic {
            &:after {
                content: "NEW";
                position: absolute;
                left: 0;
                bottom: var(--_deg);
                transform: translateY(50%);
                width: 48px;
                height: 56px;
                padding-right: 12px;
                clip-path: polygon(0 0, 0 100%, 100% 50%);
                background: #ED6070;
                color: #fff;
                display: flex;
                align-items: center;
                justify-content: center;
                font-size: 1.2rem;
            }
        }
    }
    .pic {
        position: relative;
        /* transform: skewY(8deg); */
        transform-origin: left;
        margin-bottom: -30px;
        z-index: -1;
        @media screen and (max-width: 767px) {
            margin-bottom: 0;
        }
        img {
            clip-path: polygon(0 0, 100% var(--_deg), 100% 100%, 0 calc(100% - var(--_deg)));
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
            aspect-ratio: 1.2 / 1;
            object-fit: cover;
            /* transform: skewY(-8deg); */
        }
    }
    .title {
        margin-top: 14px;
        font-size: 2rem;
        font-weight: bold;
        line-height: 1.6;
        color: #fff;
        @media screen and (max-width: 767px) {
            font-size: 1.4rem;
        }
    }
}
.cat {
    span {
        display: inline-block;
        padding: 4px 18px;
        color: #fff;
        font-weight: bold;
        border-radius: 100px;
        background: var(--_cat-color);
    }
}
.page-bg {
    position: fixed;
    inset: 0;
    z-index: -10;
    overflow: hidden;
    background: url(../images/bg_blue.png) no-repeat center /cover;
    &.common {
        background: none;
        position: absolute;
        height: 100%;
        .page-bg-scroll {
            opacity: 0.8;
            img {
                width: 100%;
            }
        }
    }
    .page-bg-entry-line {
        position: absolute;
        top: 190px;
        right: -30%;
        transform: scale(1.2);
        transform-origin: center top;
        &.top {
            top: 20px;
        }
        @media screen and (max-width: 767px) {
            right: -290%;
            transform: scale(0.6);
        }
    }
    .page-bg-video {
        background: #fff;
        position: fixed;
        inset: 0;
        video {
            /* opacity: 0.9; */
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
    }
    .page-bg-half {
        position: fixed;
        inset: 0;
        &.cur {
            opacity: 1 !important;
            visibility: visible !important;
        }
        img {
            width: 70%;
            height: 100%;
        }
        @media screen and (max-width: 767px) {
            display: none;
        }
    }
    .page-bg-deep-blue {
        position: fixed;
        inset: 0;
        z-index: -1;
        background: #286FCE;
        opacity: 0;
    }
    .page-bg-gray {
        position: fixed;
        inset: 0;
        z-index: -1;
        background: #F1F3F7;
        opacity: 0;
    }
    .page-bg-white {
        position: fixed;
        inset: 0;
        z-index: -1;
        background: url(../images/bg_white.jpg);
        opacity: 0;
        &.color {
            background: #fff;
        }
    }
    .page-bg-scroll {
        display: flex;
        width: 200%;
        transform: translateX(-50%);
        img {
            position: relative;
            width: 100vw;
            height: auto;
            object-fit: cover;
            @media screen and (max-width: 767px) {
                width: 200vw;
            }
        }
    }
}
.top-vision {
    padding-bottom: min(180px, 18vw);
    padding-top: min(60px, 6vw);
    --inner-width: 1172px;
    color: #fff;
    text-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
    &:before {
        content: "";
    }
    .lead-area {
        width: min(410px, 100%);
    }
    .vision-ttl {
        font-size: 2.2rem;
        font-weight: bold;
        margin-bottom: 20px;
        line-height: 1.7;
        @media screen and (max-width: 767px) {
            font-size: 1.8rem;
        }
    }
    .vision-text {
        font-size: 1.5rem;
        line-height: 1.7;
        @media screen and (max-width: 767px) {
            font-size: 1.4rem;
        }
    }
}
.top-pickup {
    padding: min(160px, 6vw) 0 min(120px, 6vw);
    --inner-width: 1172px;
    .hd02 {
        .en {
            font-size: 4rem;
        }
        .ja {
            margin-left: 16px;
        }
    }
}
.pickup-cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(265px, 1fr));
    gap: 50px 37px;
    align-items: start;
    @media screen and (max-width: 767px) {
        gap: 30px 10px;
        grid-template-columns: repeat(1, 1fr);
    }
}
.pickup-cards-item {
    margin-top: 64px;
    padding: 26px 20px 60px;
    border-radius: 130px 10px 130px 10px;
    background: rgba(255, 255, 255, 0.9);
    /* height: calc(100% - 64px); */
    @media screen and (max-width: 767px) {
        margin-top: 0;
        padding: 20px;
        border-radius: 13vw 1vw 13vw 1vw;
        height: auto;
    }
    .img {
        clip-path: circle(50%);
        margin-bottom: 12px;
        @media screen and (max-width: 767px) {
            width: 70%;
            margin-inline: auto;
        }
        img {
            width: 100%;
        }
    }
    .cat {
        margin-bottom: 10px;
        font-size: 1.5rem;
    }
    .title {
        font-weight: bold;
        font-size: 1.7rem;
        line-height: 1.4;
    }
    .pos {
        margin-top: 14px;
        font-size: 1.4rem;
        color: #871F2A;
    }
    &:nth-child(2n+1) {
        margin-top: 0;
        margin-left: 0;
        border-radius: 10px 130px 10px 130px;
        @media screen and (max-width: 767px) {
            border-radius: 1vw 13vw 1vw 13vw;
        }
        .pos {
            text-align: right;
        }
        .name {
            text-align: right;
        }
    }
}
.white-radius-section {
    position: relative;
    background-image: linear-gradient(0deg, rgba(255, 255, 255, 0) 0, rgba(255, 255, 255, 0) 60%, rgba(255, 255, 255, 1) 80%, rgba(255, 255, 255, 1)100%);
    mask: url(../images/mask_ellipse.svg) no-repeat top center/100% auto;
    margin-top: 64px;
    @media screen and (max-width: 767px) {
        mask: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 10%, rgba(0, 0, 0, 1) 10%, rgba(0, 0, 0, 1) 100%), url(../images/mask_ellipse.svg) no-repeat top center / 100% auto;
    }
    .other-entry-section {
        padding: 60px 0 80px;
        @media screen and (max-width: 767px) {
            padding: 30px 0 40px;
        }
    }
}
.top-mask-section {
    position: relative;
    &:before {
        position: absolute;
        inset: -100px 0 0;
        content: "";
        background: #F1F3F7;
        mask: url(../images/mask_ellipse.svg) no-repeat center top / 100% auto;
        z-index: -1;
        @media screen and (max-width: 767px) {
            top: -30px;
        }
    }
    &.deep:before {
        background: #E8ECF2;
    }
}
.bottom-mask-section {
    position: relative;
    &:before {
        position: absolute;
        inset: -100px 0 0;
        content: "";
        background: #F1F3F7;
        mask: url(../images/mask_ellipse_bottom.svg) no-repeat center bottom / 100% auto;
        z-index: -1;
        @media screen and (max-width: 767px) {
            top: -30px;
        }
    }
    &.deep:before {
        background: #E8ECF2;
    }
}
.anniversary-section {
    --inner-width: 1160px;
    padding: 140px 0 0;
    color: #fff;
    @media screen and (max-width: 767px) {
        padding-top: 40px;
    }
    &:before {
        background: url(../images/bg_donation_150.png) no-repeat bottom center / cover;
    }
    h2 {
        font-size: 10rem;
        font-family: var(--font-hel);
        line-height: 1.2;
        @media screen and (max-width: 767px) {
            font-size: 5rem;
        }
    }
    hgroup {
        text-align: center;
        font-size: 3.2rem;
        margin-bottom: 86px;
        @media screen and (max-width: 767px) {
            font-size: 2.4rem;
            margin-bottom: 1.4em;
            max-width: 80%;
            margin-inline: auto;
        }
        p {
            font-weight: bold;
            margin-top: 20px;
        }
    }
    .anniversary-comment {
        text-align: center;
        font-size: 1.8rem;
        line-height: 2.22;
        font-weight: bold;
        margin-bottom: 130px;
        @media screen and (max-width: 767px) {
            line-height: 1.8;
            margin-bottom: 3em;
            max-width: 86%;
            margin-inline: auto;
            font-size: 1.4rem;
        }
        p+p {
            margin-top: 2em;
        }
    }
    .contribution {
        border: 1px solid #fff;
    }
    .gray-bd {
        background: #fff;
    }
}
.guidelines-wrap {
    margin-top: 234px;
    margin-bottom: -352px;
    @media screen and (max-width: 767px) {
        margin-top: 90px;
    }
    &:before {
        background: url(../images/bg_blue2.png);
        content: "";
        position: absolute;
        bottom: -6%;
        left: 50%;
        width: 1200px;
        aspect-ratio: 1;
        clip-path: circle(50%);
        transform: translateX(-50%);
        z-index: -1;
    }
    h3 {
        font-size: 4.8rem;
        font-weight: bold;
        text-align: center;
        @media screen and (max-width: 767px) {
            font-size: 3rem;
        }
    }
}
.use-section {
    --inner-width: 1080px;
    padding-top: 480px;
    padding-bottom: 224px;
    @media screen and (max-width: 767px) {
        padding-top: 400px;
        padding-bottom: 80px;
    }
    hgroup {
        text-align: center;
        h2 {
            font-size: 4.8rem;
            font-weight: bold;
            margin-bottom: 30px;
            @media screen and (max-width: 767px) {
                font-size: 3.2rem;
                margin-bottom: 0.5em;
            }
        }
        p {
            line-height: 2;
        }
    }
}
.use-nav-link {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    margin-top: 36px;
    margin-bottom: 86px;
    @media screen and (max-width: 767px) {
        grid-template-columns: repeat(1, 1fr);
        gap: 12px;
        margin-bottom: 46px;
    }
    li {
        &:nth-child(1) {
            --_color: var(--donation-colorA);
        }
        &:nth-child(2) {
            --_color: var(--donation-colorB);
        }
        &:nth-child(3) {
            --_color: var(--donation-colorC);
        }
        a {
            position: relative;
            height: 88px;
            display: grid;
            grid-template-columns: auto auto;
            justify-content: center;
            align-items: center;
            gap: 15px;
            border-radius: 10px;
            background: var(--_color);
            color: #fff;
            font-size: 1.8rem;
            font-weight: bold;
            @media screen and (max-width: 767px) {
                gap: 10px;
                height: 54px;
                font-size: 1.6rem;
            }
            .icon {
                font-size: 3rem;
                @media screen and (max-width: 767px) {
                    font-size: 2rem;
                }
            }
            &:after {
                content: "";
                width: 10px;
                height: 8px;
                position: absolute;
                left: calc(50% - 5px);
                bottom: 10px;
                clip-path: polygon(50% 100%, 0 0, 100% 0);
                background: #fff;
                @media screen and (max-width: 767px) {
                    bottom: 6px;
                    width: 8px;
                    height: 6px;
                }
            }
        }
    }
}
.use-box-wrap {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 60px 40px;
    margin-bottom: 30px;
    @media screen and (max-width: 767px) {
        grid-template-columns: 1fr;
        gap: 30px;
    }
}
.use-box {
    position: relative;
    color: #000;
    &:before {
        content: "";
        position: absolute;
        inset: 0;
        background: var(--_color);
        border-radius: 10px;
        z-index: -1;
    }
    &:after {
        content: "";
        position: absolute;
        inset: 0;
        border-radius: 130px 10px 130px 10px;
        background: #fff;
        @media screen and (max-width: 767px) {
            border-radius: 64px 10px 64px 10px;
        }
    }
    &:nth-child(1) {
        --_color: var(--donation-colorA);
        grid-column: 1 / -1;
        @media screen and (max-width: 767px) {
            grid-column: inherit;
        }
    }
    &:nth-child(2) {
        --_color: var(--donation-colorB);
    }
    &:nth-child(3) {
        --_color: var(--donation-colorC);
    }
    hgroup {
        text-align: center;
        font-weight: bold;
        position: relative;
        z-index: 1;
        height: 130px;
        display: flex;
        align-items: center;
        justify-content: center;
        padding-top: 16px;
        color: var(--_color);
        border-bottom: var(--_color) 4px solid;
        @media screen and (max-width: 767px) {
            height: auto;
            padding: 20px 40px 10px;
        }
        .icon {
            font-size: 4.4rem;
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            transform: translateY(-50%);
            @media screen and (max-width: 767px) {
                font-size: 3.6rem;
            }
        }
        h3 {
            font-size: 2.8rem;
            font-weight: bold;
            @media screen and (max-width: 767px) {
                font-size: 2.2rem;
            }
        }
    }
    .use-box-content {
        padding: 64px;
        position: relative;
        z-index: 1;
        line-height: 2;
        @media screen and (max-width: 767px) {
            padding: 24px;
        }
        figure {
            margin-bottom: 20px;
            img {
                border-radius: 20px;
                @media screen and (max-width: 767px) {
                    width: 100%;
                }
            }
        }
    }
}
.use-wave {
    background: url(../images/bd_about_wave.png) center /100% 100%;
    height: 162px;
    display: block;
    position: absolute;
    z-index: -1;
    top: 500px;
    width: 100%;
    @media screen and (max-width: 767px) {
        height: 80px;
        bottom: -100px;
    }
}
.interview-wave {
    background: url(../images/bd_about_wave.png) center /100% 100%;
    height: 162px;
    display: block;
    position: absolute;
    z-index: -1;
    top: 500px;
    width: 100%;
    @media screen and (max-width: 767px) {
        height: 80px;
        bottom: -100px;
    }
}
.col-wrap {
    display: flex;
    gap: 56px;
    @media screen and (max-width: 767px) {
        flex-direction: column;
    }
    .col {
        flex: 1;
    }
    .ttl {
        font-size: 1.8rem;
        line-height: 1.7;
        text-align: center;
        margin-top: 26px;
        margin-bottom: 26px;
        font-weight: bold;
        color: var(--_color);
        @media screen and (max-width: 767px) {
            margin-top: 16px;
            margin-bottom: 16px;
        }
    }
    .text {
        font-size: 1.5rem;
        line-height: 1.75;
        p+p {
            margin-top: 1lh;
        }
    }
    .btn {
        width: min(200px, 100%);
    }
    figure {
        margin-bottom: 20px;
        img {
            border-radius: 20px;
            @media screen and (max-width: 767px) {
                width: 100%;
            }
        }
    }
}
.notice-text {
    font-size: 1.3rem;
    margin-top: 1em;
    line-height: 2;
    text-indent: -1em;
    padding-left: 1em;
}
.white-column-box {
    --inner-width: 800px;
    margin-top: 42px;
    border-radius: 10px 130px 10px 130px;
    background: #fff;
    color: #000;
    padding: 80px;
    position: relative;
    z-index: 1;
    @media screen and (max-width: 767px) {
        width: 100%;
        border-radius: 10px 64px 10px 64px;
        padding: 30px;
    }
    dl {
        padding: 1.6em 0;
        border-bottom: 1px solid #ccc;
        @media screen and (max-width: 767px) {
            padding-block: 1em;
        }
        &:first-child {
            padding-top: 0;
        }
        dt {
            border-radius: 100px;
            color: #fff;
            background: var(--color-link);
            width: fit-content;
            font-size: 2rem;
            margin-inline: auto;
            padding: 2px 24px;
            @media screen and (max-width: 767px) {
                font-size: 1.6rem;
            }
        }
        dd {
            font-size: 2.4rem;
            font-weight: bold;
            text-align: center;
            margin-top: 0.7em;
            @media screen and (max-width: 767px) {
                font-size: 1.8rem;
            }
            .notice {
                font-size: 1.2rem;
                margin-top: 0.5em;
                margin-bottom: 1em;
            }
        }
    }
}
.donation-status-section {
    padding: 46px 0 226px;
    text-align: center;
    color: #fff;
    --inner-width: 560px;
    @media screen and (max-width: 767px) {
        padding: 20px 0 80px;
    }
    h2 {
        font-size: 4.8rem;
        font-weight: bold;
        margin-bottom: 38px;
        @media screen and (max-width: 767px) {
            font-size: 3.2rem;
            margin-bottom: 0.5em;
        }
    }
    &:before {
        background: url(../images/map_donation.png) no-repeat center /1164px auto, url(../images/bg_blue.png) no-repeat center /cover;
    }
    .common-bg-text {
        font-size: 16rem;
    }
    .vertical.left {
        position: absolute;
        inset: 0;
        background: #f00;
        transform: rotate(-90deg);
    }
}
.donation-status-dl {
    dt {
        font-size: 2rem;
        font-weight: bold;
        background: #fff;
        color: var(--color-link);
        padding: 2px 24px;
        width: fit-content;
        border-radius: 200px;
        margin-inline: auto;
        margin-bottom: 24px;
        @media screen and (max-width: 767px) {
            font-size: 1.8rem;
            margin-bottom: 1em;
        }
    }
}
.donation-total__sub {
    margin-top: 10px;
    display: block;
}
.progress-bar-wrapper {
    background: rgba(0, 0, 0, 0.4);
    border-radius: 100px;
    padding: 4px;
    margin-top: 20px;
    .progress-bar {
        height: 48px;
        border-radius: 100px;
        background-image: linear-gradient(90deg, #ff9a36, #ed6070);
        width: 86%;
        display: flex;
        justify-content: end;
        align-items: center;
        padding: 0 30px;
        @media screen and (max-width: 767px) {
            height: 36px;
        }
        .progress-bar__percentage {
            em {
                font-size: 2.8rem;
                font-weight: bold;
                @media screen and (max-width: 767px) {
                    font-size: 2.2rem;
                }
            }
            small {
                font-size: 1.12em;
            }
        }
    }
}
.donation-status-dl {
    &+& {
        margin-top: 46px;
        @media screen and (max-width: 767px) {
            margin-top: 24px;
        }
    }
    dd {
        line-height: 1.5;
        em {
            font-size: 4.8rem;
            font-weight: bold;
            font-family: var(--font-yu);
            line-height: 1;
            @media screen and (max-width: 767px) {
                font-size: 4rem;
            }
        }
        small {
            font-size: 2.4rem;
            font-weight: bold;
            margin-left: 5px;
        }
    }
}
.support-progress__target {
    margin-top: 20px;
    font-size: 1.8rem;
    font-weight: bold;
    @media screen and (max-width: 767px) {
        margin-top: 0.5em;
        font-size: 1.6rem;
    }
}
.top-mask-section.gray-section {
    padding: 50px 0 120px;
    @media screen and (max-width: 767px) {
        padding: 20px 0 40px;
    }
    h2 {
        font-size: 4.8rem;
        text-align: center;
        font-weight: bold;
        margin-bottom: 40px;
        @media screen and (max-width: 767px) {
            font-size: 3.2rem;
            margin-bottom: 0.5em;
        }
    }
}
.top-mask-section {
    .other-entry-section {
        padding: 10px 0 220px;
        position: relative;
        @media screen and (max-width: 767px) {
            padding-bottom: 100px;
        }
        .inner-wrap {
            padding-top: 46px;
        }
        .other-entry-title {
            top: 46px;
        }
    }
}
.top-mask-section.deep {
    padding-bottom: 200px;
    @media screen and (max-width: 767px) {
        padding-bottom: 80px;
    }
    .other-entry-title.vartical {
        display: flex;
        flex-direction: column;
        font-size: 4rem;
        top: 136px;
        line-height: 1.25;
        @media screen and (max-width: 767px) {
            flex-direction: row;
            gap: 10px;
            font-size: 3rem;
            top: 50px;
        }
    }
    .btn-wrap.right {
        margin-top: 10px;
    }
    .other-entry-section {
        padding: 100px 0 100px;
        @media screen and (max-width: 767px) {
            padding: 64px 0 64px;
        }
        .inner-wrap {
            padding-top: 50px;
        }
        &+.inner-wrap .btn-wrap {
            margin-top: 0;
        }
    }
    .other-entry-section .purple {
        --_color: #723493;
        @media screen and (max-width: 767px) {
            padding-top: 0;
        }
        &:before {
            background: url(../images/bg_purple2.png);
        }
    }
}
.top-section.foot,
.top-mask-section.foot {
    padding: 64px 0;
    @media screen and (max-width: 767px) {
        padding: 42px 0;
    }
}
.donation-message-list {
    margin-top: 48px;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 40px;
    @media screen and (max-width: 767px) {
        margin-top: 32px;
        grid-template-columns: 1fr;
        gap: 20px;
    }
    .donation-message-list-item {
        --_color: #870015;
        background: #fff url(../images/bg_message.png) no-repeat bottom center / cover;
        border: 1px solid var(--_color);
        border-radius: 20px;
        display: flex;
        flex-direction: column;
        padding: 12px 30px 26px;
        .date {
            padding: 15px 0;
            font-size: 1.3rem;
            font-weight: bold;
            border-bottom: var(--_color) 1px solid;
            position: relative;
            color: var(--_color);
            &:before {
                content: "";
                position: absolute;
                inset: auto 0 -7px 0;
                border-bottom: 3px solid var(--_color);
            }
        }
        .donation-message-list-item-contents {
            padding-top: 26px;
            line-height: 1.86;
            font-size: 1.5rem;
            font-weight: bold;
            height: 100%;
            display: flex;
            flex-direction: column;
            position: relative;
            &:after {
                content: "";
                position: absolute;
                left: -10px;
                bottom: 0;
                width: 42px;
                height: 40px;
                background: var(--_color);
                mask: url(../images/icon_handshake.svg) no-repeat center /contain;
            }
        }
        .text {
            margin-top: 10px;
            text-align: right;
            font-size: 1.2rem;
            font-weight: normal;
            display: flex;
            flex-direction: column;
            justify-content: end;
            font-weight: bold;
            @media screen and (max-width: 767px) {
                height: auto;
                margin-top: 5px;
            }
        }
        .name {
            text-align: right;
            margin-top: 10px;
            line-height: 1.5;
            @media screen and (max-width: 767px) {
                margin-top: 5px;
            }
        }
        .amount {
            margin-top: 10px;
            text-align: right;
            color: var(--_color);
            font-size: 1.8rem;
            line-height: 1.5;
            .value {
                font-size: 2.4rem;
            }
        }
    }
}
.other-entry-section {
    padding: 100px 0 160px;
    @media screen and (max-width: 767px) {
        padding-bottom: 0;
    }
    --_circle-size: 1;
    &.new {
        --_color: #ED6070;
        .inner-wrap {
            &:before {
                display: none;
            }
        }
        .other-entry-title {
            color: #000;
            &:before {
                background: #000;
            }
        }
    }
    .inner-wrap {
        padding-top: 138px;
        padding-left: 138px;
        position: relative;
        @media screen and (max-width: 767px) {
            padding-top: 20px;
            padding-left: 48px;
        }
        &:before {
            content: "";
            position: absolute;
            top: -50px;
            left: -280px;
            width: 840px;
            aspect-ratio: 1;
            clip-path: circle(50%);
            background: url(../images/bg_michi.jpg);
            transform: scale(var(--_circle-size));
            z-index: -1;
            @media screen and (max-width: 767px) {
                width: 560px;
            }
        }
    }
    .btn-wrap {
        margin-top: 12px;
        margin-right: 14px;
        @media screen and (max-width: 767px) {
            margin-top: 32px;
            margin-right: 0;
        }
        .btn {
            gap: 40px;
        }
    }
}
.other-entry-title {
    position: absolute;
    top: 140px;
    bottom: 70px;
    left: 0;
    writing-mode: vertical-rl;
    font-size: 6rem;
    font-weight: bold;
    font-family: var(--font-hel);
    letter-spacing: -0.04em;
    color: #fff;
    --_bd-size: scaleY(100%);
    @media screen and (max-width: 767px) {
        font-size: 3rem;
        top: 50px;
    }
    &:before {
        display: block;
        content: "";
        position: absolute;
        left: 0;
        top: 0;
        bottom: 0;
        width: 1px;
        background: #fff;
        transform-origin: top;
        transform: var(--_bd-size);
    }
    span {
        display: inline-block;
    }
}
.other-sub-title {
    width: fit-content;
    font-size: 2.4rem;
    background-color: var(--_color);
    color: #fff;
    border-radius: 4px 20px 4px 20px;
    padding: 0.5em 1em;
    margin-bottom: 1.5em;
    @media screen and (max-width: 767px) {
        font-size: 1.6rem;
    }
}
.other-entry.swiper {
    overflow: visible;
    clip-path: inset(0 -50vw -80px 0);
    padding-bottom: 40px;
    .swiper-wrapper {
        width: auto;
    }
    .swiper-slide {
        width: min(266px, 100%);
        &:nth-child(even) {
            .pickup-cards-item {
                @media screen and (min-width: 768px) {
                    margin-top: 60px;
                    border-radius: 130px 10px 130px 10px;
                }
            }
        }
    }
    .pickup-cards-item {
        display: block;
        padding-bottom: 80px;
        border: 1px solid #E6E6E6;
        .pos {
            text-align: left;
        }
        .name {
            font-size: 2.4rem;
            font-weight: bold;
            text-align: left;
            margin-top: 5px;
        }
    }
    .slide-nav {
        display: flex;
        gap: 14px;
        align-items: center;
        position: relative;
        bottom: -34px;
        left: 0;
        right: 0;
        z-index: 3;
        .slide-prev, .slide-next, .slide-pause {
            width: 50px;
            aspect-ratio: 1;
            @media screen and (max-width: 767px) {
                width: 32px;
            }
        }
        .slide-prev {
            background: url(../images/icon_nav_left.svg) center /cover;
        }
        .slide-next {
            background: url(../images/icon_nav_right.svg) center /cover;
        }
        .slide-pause {
            background: url(../images/icon_nav_pause.svg) center /cover;
            &.paused {
                background-image: url(../images/icon_nav_play.svg);
            }
        }
        .slide-progressbar {
            flex: 1;
            height: 4px;
            background: rgba(0, 0, 0, 0.1);
            position: relative;
            margin-left: 24px;
            margin-right: 16px;
            --swiper-pagination-color: #000;
            @media screen and (max-width: 767px) {
                margin-left: 12px;
                margin-right: 0;
            }
        }
    }
}
.view-new>:nth-child(2n+1 of .top-special-issue) {
    .special-cards {
        margin-left: auto;
        justify-content: end;
    }
    .lead-area {
        left: 0;
        transform: translate(-56px, -42px);
        @media screen and (max-width: 767px) {
            transform: translate(-50%);
            left: 50%;
        }
    }
}
.view-new>:nth-child(2n of .top-special-issue) {
    .special-cards {
        margin-right: auto;
        justify-content: start;
        margin-left: -26px;
    }
    .lead-area {
        right: 0;
        transform: translate(40px, -40px);
        @media screen and (max-width: 767px) {
            right: auto;
            transform: translate(-50%);
            left: 50%;
        }
    }
}
.view-new>:nth-child(1 of .top-special-issue) {
    --_bg-circle: url(../images/bg_circle_blue.png) no-repeat center /100% auto;
}
.view-new>:nth-child(2 of .top-special-issue) {
    --_bg-circle: url(../images/bg_circle_pink.png) no-repeat center /100% auto;
    --_hash-color: #E82C3D;
}
.view-new>:nth-child(3 of .top-special-issue) {
    --_bg-circle: url(../images/bg_circle_navy.png) no-repeat center /100% auto;
    --_hash-color: #6D76C7;
}
.top-special-issue {
    min-height: 776px;
    --_hash-color: #57AEDE;
    --inner-width: 1336px;
    @media screen and (max-width: 767px) {
        margin-top: 40px;
        min-height: auto;
    }
    .inner-wrap {
        position: relative;
        padding: 110px 110px 196px;
        @media screen and (max-width: 767px) {
            padding: 20px 10px;
        }
    }
    .lead-area {
        position: absolute;
        top: 0;
        padding: min(90px, 9vw) min(120px, 12vw);
        width: min(120%, 635px);
        aspect-ratio: 1;
        color: #fff;
        display: grid;
        place-content: center;
        clip-path: circle(50%);
        background: var(--_bg-circle);
        hgroup {
            .hd {
                font-weight: bold;
                font-size: 2.4rem;
                @media screen and (max-width: 767px) {
                    font-size: 1.8rem;
                }
            }
            .mini {
                font-size: 1.5rem;
                margin-top: 4px;
                @media screen and (max-width: 767px) {
                    font-size: 1.2rem;
                }
            }
            h2 {
                font-size: 4.8rem;
                font-weight: bold;
                line-height: 1.2;
                margin-top: 30px;
                @media screen and (max-width: 767px) {
                    font-size: 2.4rem;
                    margin-top: 15px;
                }
            }
        }
        .text {
            margin-top: 16px;
            font-size: 1.4rem;
            line-height: 2;
            @media screen and (max-width: 767px) {
                margin-top: 8px;
                line-height: 1.8;
                font-size: 1.2rem;
            }
        }
        .more-dl {
            display: flex;
            justify-content: space-between;
            gap: 20px;
            width: min(300px, 100%);
            margin-left: auto;
            margin-top: 30px;
            margin-right: 10px;
            &+& {
                margin-top: 16px;
                @media screen and (max-width: 767px) {
                    margin-top: 8px;
                }
            }
            dt {
                font-size: 1.4rem;
            }
        }
        .btn-wrap {
            margin-top: 32px;
            justify-content: end;
            @media screen and (max-width: 767px) {
                margin-top: 16px;
            }
        }
    }
    .special-cards {
        width: 880px;
        display: flex;
        flex-wrap: wrap;
        gap: 50px;
        margin-top: 40px;
        @media screen and (max-width: 767px) {
            padding-top: 130%;
            width: 100%;
            margin: 0 !important;
            gap: 30px;
            justify-content: center !important;
        }
        &:has(.special-cards-item:only-child) {
            width: 610px;
            justify-content: center;
            @media screen and (max-width: 767px) {
                width: 100%;
            }
        }
        .special-cards-item {
            display: grid;
            grid-template-columns: 1fr;
            width: 268px;
            @media screen and (max-width: 767px) {
                width: 100%;
                margin: 0 !important;
            }
            .img {
                img {
                    width: 100%;
                    aspect-ratio: 1;
                    object-fit: cover;
                    border-radius: 50%;
                }
            }
            .cat {
                margin-top: 10px;
                margin-bottom: 10px;
            }
            .title {
                font-size: 1.8rem;
                font-weight: bold;
                margin-top: 12px;
            }
            .pos {
                font-size: 1.3rem;
                color: #871F2A;
                margin-top: 6px;
            }
            .name {
                font-size: 1.5rem;
                margin-top: 1px;
            }
            .interview-cat {
                margin-top: 10px;
                margin-bottom: 10px;
                span {
                    font-size: 1.5rem;
                    display: inline-block;
                    padding: 4px 12px;
                    background: #6D76C7;
                    color: #fff;
                    font-weight: bold;
                    border-radius: 100px;
                }
            }
            .interview-pos {
                font-size: 1.3rem;
            }
            .interview-name {
                font-size: 2.4rem;
                small {
                    font-size: 1.8rem;
                }
            }
            .interview-history {
                font-size: 1.3rem;
            }
            &:nth-child(2) {
                margin-left: 20px;
            }
            &:nth-child(n+3) {
                width: min(365px, 100%);
                grid-template-columns: auto 1fr;
                grid-template-rows: repeat(4, auto);
                gap: 0 20px;
                .img {
                    grid-row: 1 / -1;
                    margin: auto;
                    img {
                        width: 118px;
                    }
                }
                .interview-name,
                .title {
                    font-size: 1.5rem;
                }
                .interview-pos,
                .pos {
                    font-size: 1.2rem;
                }
                .name {
                    font-size: 1.4rem;
                }
                .interview-history {
                    font-size: 1.2rem;
                }
            }
            @media screen and (max-width: 767px) {
                &:nth-child(n+1) {
                    width: min(365px, 100%);
                    grid-template-columns: auto 1fr;
                    grid-template-rows: repeat(4, auto);
                    gap: 0 20px;
                    .img {
                        grid-row: 1 / -1;
                        margin: auto;
                        img {
                            width: 118px;
                        }
                    }
                    .interview-name,
                    .title {
                        font-size: 1.5rem;
                    }
                    .interview-pos,
                    .pos {
                        font-size: 1.2rem;
                    }
                    .name {
                        font-size: 1.4rem;
                    }
                    .interview-history {
                        font-size: 1.2rem;
                    }
                }
            }
        }
    }
    .hashtag-list {
        position: absolute;
        left: 0;
        right: 0;
        bottom: 100px;
        display: grid;
        grid-template-columns: 180px calc(100% - 180px);
        font-size: 2.2rem;
        align-items: center;
        padding: 0 30px 0 0;
        background: rgba(255, 255, 255, 0.6);
        @media screen and (max-width: 767px) {
            position: static;
            margin-top: 40px;
            font-size: 1.4rem;
            grid-template-columns: 80px calc(100% - 80px);
            padding-right: 10px;
        }
        dt {
            font-weight: bold;
            width: 158px;
            text-align: center;
            margin-right: 30px;
            border-right: 1px solid #070707;
            @media screen and (max-width: 767px) {
                width: 80px;
            }
        }
        dd {
            padding: 6px;
            overflow: hidden;
            .hashtag-list-loop {
                display: flex;
                white-space: nowrap;
                gap: 20px;
                @media screen and (max-width: 767px) {
                    gap: 10px;
                    font-size: 1.2rem;
                }
            }
            a {
                color: var(--_hash-color);
            }
        }
    }
}
.section-blue-wrap {
    background: url(../images/bg_royalblue.jpg) center;
    mask: url(../images/mask_ellipse.svg) no-repeat top center/cover;
    @media screen and (max-width: 767px) {
        margin-top: 40px;
        mask: linear-gradient(to bottom,
                rgba(0, 0, 0, 0) 0%,
                rgba(0, 0, 0, 0) 10%,
                rgba(0, 0, 0, 1) 10%,
                rgba(0, 0, 0, 1) 100%), url(../images/mask_ellipse.svg) no-repeat top center/100% auto;
    }
    &>:last-child {
        padding-bottom: 100px;
    }
}
.top-about,
.top-message {
    /* margin-top: -60px; */
    padding: 124px 0;
    --inner-width: 1134px;
    @media screen and (max-width: 767px) {
        padding: 12vw 0;
    }
    .inner-wrap {
        display: flex;
        align-items: center;
        gap: 32px;
        @media screen and (max-width: 767px) {
            flex-direction: column-reverse !important;
            gap: 6vw;
        }
        .lead-area {
            color: #fff;
            flex: 1;
            position: relative;
            padding-bottom: 40px;
            @media screen and (max-width: 767px) {
                padding-bottom: 0;
            }
            hgroup {
                margin-bottom: 40px;
                margin-right: -20px;
                @media screen and (max-width: 767px) {
                    margin-right: 0;
                    margin-bottom: 20px;
                }
                .mini {
                    font-size: 2.4rem;
                    font-weight: bold;
                    @media screen and (max-width: 767px) {
                        font-size: 1.8rem;
                    }
                }
                h2 {
                    font-size: 5rem;
                    line-height: 1.2;
                    font-family: var(--font-yu);
                    @media screen and (max-width: 767px) {
                        font-size: 3.2rem;
                    }
                }
            }
            .text {
                font-size: 1.4rem;
                width: min(344px, 100%);
                line-height: 2;
            }
            .btn-wrap {
                margin-top: 40px;
                justify-content: end;
                @media screen and (max-width: 767px) {
                    margin-top: 20px;
                }
            }
        }
        .circle-img {
            width: min(635px, 56%);
            @media screen and (max-width: 767px) {
                width: 50%;
            }
            img {
                clip-path: circle(50%);
            }
        }
        .circle-img-1 {
            @media screen and (max-width: 767px) {
                order: 1;
            }
        }
        .circle-img-1,
        .circle-img-2 {
            text-align: center;
            color: #fff;
            @media screen and (max-width: 767px) {
                width: 50%;
            }
            img {
                clip-path: circle(50%);
            }
            .txt-lead {
                margin-top: 15px;
                display: block;
                font-size: 1.3rem;
            }
            .txt-name {
                margin-top: 3px;
                display: block;
                font-size: 2.4rem;
                font-weight: bold;
            }
        }
    }
}
.top-about {
    padding-top: 0;
    margin-top: -120px;
    @media screen and (max-width: 767px) {
        margin-top: 0;
    }
    .inner-wrap {
        flex-direction: row-reverse;
    }
}
.btn-wrap {
    display: flex;
    justify-content: center;
    gap: 20px;
    @media screen and (max-width: 767px) {
        flex-direction: column;
        align-items: center;
    }
    &:not(:first-child) {
        margin-top: 40px;
        @media screen and (max-width: 767px) {
            margin-top: 30px;
        }
    }
    &.right {
        justify-content: end;
        @media screen and (max-width: 767px) {
            align-items: end;
        }
    }
    &.left {
        justify-content: start;
    }
    .btn.more {
        width: fit-content;
        padding: 15px 20px;
    }
    &:has(.contribution) {
        margin-top: 100px;
        @media screen and (max-width: 767px) {
            margin-top: 60px;
        }
    }
    &:first-child {
        margin-top: 0;
    }
}
.btn {
    border-radius: 200px;
    width: fit-content;
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    padding: 14px 24px;
    background: #000;
    color: #fff;
    transition: all 0.3s ease;
    &:hover {
        opacity: 0.7;
    }
    &.home {
        width: min(400px, 100%);
        text-align: center;
        grid-template-columns: auto 1fr;
        &:before {
            content: "";
            background: currentColor;
            width: 10px;
            height: 11px;
            clip-path: polygon(0 50%, 100% 100%, 100% 0);
        }
    }
    &.prev {
        width: fit-content;
        min-width: min(300px, 100%);
        max-width: 100%;
        text-align: center;
        font-size: 1.6rem;
        gap: 12px;
        grid-template-columns: auto 1fr;
        &:before {
            content: "";
            background: currentColor;
            width: 10px;
            height: 11px;
            clip-path: polygon(0 50%, 100% 100%, 100% 0);
        }
    }
    &.next {
        width: fit-content;
        min-width: min(300px, 100%);
        max-width: 100%;
        text-align: center;
        font-size: 1.6rem;
        gap: 12px;
        &:after {
            content: "";
            background: currentColor;
            width: 10px;
            height: 11px;
            clip-path: polygon(100% 50%, 0 0, 0 100%);
        }
    }
    &.apply {
        width: min(526px, 100%);
        text-align: center;
        font-size: 2.4rem;
        grid-template:
            ". ttl . icon"
            /1fr auto 1fr auto;
        padding: 24px;
        background: var(--color-link);
        color: #fff;
        @media screen and (max-width: 767px) {
            padding: 12px 24px;
            font-size: 2rem;
        }
        span {
            font-weight: bold;
            grid-area: ttl;
            padding-left: 50px;
            display: inline-block;
            background: url(../images/icon_apply.svg) no-repeat left center /36px auto;
            @media screen and (max-width: 767px) {
                background-size: 24px auto;
                padding-left: 34px;
            }
        }
        &:after {
            grid-area: icon;
            content: "";
            background: currentColor;
            width: 10px;
            height: 11px;
            clip-path: polygon(100% 50%, 0 0, 0 100%);
        }
    }
    &.blue {
        width: min(526px, 100%);
        text-align: center;
        font-size: 2.4rem;
        grid-template:
            ". ttl . icon"
            /1fr auto 1fr auto;
        padding: 24px;
        background: var(--color-link);
        color: #fff;
        @media screen and (max-width: 767px) {
            padding: 12px 24px;
            font-size: 2rem;
        }
        span {
            font-weight: bold;
            grid-area: ttl;
            display: inline-block;
            @media screen and (max-width: 767px) {}
        }
        &:after {
            grid-area: icon;
            content: "";
            background: currentColor;
            width: 10px;
            height: 11px;
            clip-path: polygon(100% 50%, 0 0, 0 100%);
        }
    }
    &.more {
        padding: 4px 10px 4px 16px;
        gap: 8px;
        width: 120px;
        font-size: 1.6rem;
        line-height: 1.2;
        &:after {
            content: "";
            background: currentColor;
            width: 10px;
            height: 11px;
            clip-path: polygon(100% 50%, 0 0, 0 100%);
        }
    }
    &.view-more {
        background: #fff;
        color: #58B8E4;
        font-size: 1.2rem;
        padding: 3px 10px 3px 10px;
        gap: 8px;
        text-align: center;
        width: 120px;
        &:hover {
            opacity: 1;
            background: #80d3fa;
            color: #fff;
        }
        &:after {
            content: "";
            background: currentColor;
            width: 5px;
            height: 6px;
            clip-path: polygon(100% 50%, 0 0, 0 100%);
        }
    }
    &.pink {
        background: #E26976;
        color: #fff;
        gap: 16px;
        font-size: 1.8rem;
        border: 2px solid #fff;
        width: min(400px, 100%);
        @media screen and (max-width: 767px) {
            padding: 12px 24px;
            font-size: 1.4rem;
        }
    }
    &.contribution {
        width: min(326px, 100%);
        text-align: center;
        grid-template:
            ". ill ttl . icon"
            /1fr auto auto 1fr auto;
        background: #E26976;
        color: #fff;
        gap: 16px;
        font-size: 1.8rem;
        border: 2px solid #fff;
        &:not(.normal) {
            width: min(526px, 100%);
            padding: 24px;
            font-size: 2.4rem;
            &:before {
                width: 45px;
                height: 42px;
            }
            @media screen and (max-width: 767px) {
                padding: 12px 24px;
                font-size: 2rem;
            }
        }
        span {
            grid-area: ttl;
        }
        &:before {
            grid-area: ill;
            content: "";
            background: url(../images/icon_handshake.svg) center /cover;
            width: 36px;
            height: 34px;
        }
        &:after {
            grid-area: icon;
            content: "";
            background: currentColor;
            width: 10px;
            height: 11px;
            clip-path: polygon(100% 50%, 0 0, 0 100%);
        }
    }
}
.gray-bd {
    background: #CCCCCC;
    margin: 48px 0;
    @media screen and (max-width: 767px) {
        margin: 24px 0;
    }
    &+.btn-wrap {
        margin-top: 0;
    }
}
.logo-hd {
    width: min(1132px, 100% - 10vw);
    margin-inline: auto;
}
.gec-image {
    color: #fff;
    margin: 40px auto 0;
    display: grid;
    grid-template:
        "col1 plus col3" 1fr
        ". plus col3" 36px
        "col2 plus col3" 1fr/ 236px 1fr 347px;
    width: min(694px, 100%);
    aspect-ratio: 694 / 196;
    @media screen and (max-width: 767px) {
        grid-template:
            "col1 . col2"
            ". plus ." 36px
            "col3 col3 col3" / 1fr auto 1fr;
    }
    .col1, .col2, .col3 {
        border: 2px solid;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 2.4rem;
        @media screen and (max-width: 767px) {
            font-size: 1.6rem;
            height: 40px;
        }
    }
    .col1 {
        grid-area: col1;
    }
    .col2 {
        grid-area: col2;
    }
    .col3 {
        grid-area: col3;
        font-size: 3.6rem;
        @media screen and (max-width: 767px) {
            font-size: 1.8rem;
        }
    }
    .plus {
        grid-area: plus;
        place-self: center;
        @media screen and (max-width: 767px) {
            img {
                width: 16px;
                height: auto;
                vertical-align: middle;
                margin-bottom: 5px;
            }
        }
    }
}
.btn-text-wrap {
    width: min(694px, 100%);
    margin: 36px auto 0;
    display: flex;
    align-items: end;
    gap: 50px;
    @media screen and (max-width: 767px) {
        flex-direction: column;
        gap: 20px;
    }
    .text {
        flex: 1;
        @media screen and (max-width: 767px) {
            line-height: 1.75;
        }
    }
}
.top-gec {
    color: #fff;
}
.top-contribution {
    color: #fff;
    padding-top: 220px;
    padding-bottom: 40px;
    @media screen and (max-width: 767px) {
        padding-top: 80px;
    }
    .bg-img {
        position: relative;
        @media screen and (max-width: 767px) {
            display: none;
        }
        img {
            border-radius: 50%;
            position: absolute;
            &:nth-child(1) {
                top: 108px;
                left: -19px;
            }
            &:nth-child(2) {
                top: 246px;
                left: 173px;
            }
            &:nth-child(3) {
                top: 110px;
                left: 230px;
            }
            &:nth-child(4) {
                top: 130px;
                right: 190px;
            }
            &:nth-child(5) {
                top: 265px;
                right: 84px;
            }
            &:nth-child(6) {
                top: 108px;
                right: -37px;
            }
        }
    }
}
.contribution-cv-wrap {
    position: relative;
    padding-top: 50px;
    &:before {
        position: absolute;
        content: "";
        inset: 0;
        z-index: -2;
        background: url(../images/bg_150map_big.png) no-repeat center right;
    }
}
.section-blue-wrap {
    .contribution-cv-wrap {
        &:before {
            background: url(../images/bg_150map_big.png) no-repeat center right, linear-gradient(0deg, rgba(40, 111, 206, 1) 82%, rgba(40, 111, 206, 0) 100%);
        }
    }
}
.contribution-cv {
    padding: 100px 0 160px;
    display: grid;
    grid-template-columns: 1fr 500px;
    color: #fff;
    @media screen and (max-width: 767px) {
        padding: 0 0 120px;
        grid-template-columns: 1fr;
        .bg-img {
            display: none;
        }
    }
    &.inner-wrap {
        padding-bottom: 80px;
    }
    .lead-area {
        width: min(670px, 100%);
        padding: 110px;
        padding-right: 0;
        position: relative;
        --_circle-size: scale(100%);
        @media screen and (max-width: 767px) {
            padding: 40px;
            height: auto;
        }
        &:before {
            content: "";
            position: absolute;
            top: 0;
            left: 10px;
            width: 516px;
            aspect-ratio: 1;
            clip-path: circle(50%);
            background-color: rgba(255, 255, 255, 0.2);
            transform: var(--_circle-size);
            backdrop-filter: blur(10px);
            @media screen and (max-width: 767px) {
                width: 100%;
                inset: 0;
            }
        }
        &:after {
            display: block;
            content: "";
            position: absolute;
            left: 52%;
            top: 8px;
            background: url(../images/txt_150th_alpha.svg) no-repeat center/contain;
            width: 377px;
            height: 146px;
            @media screen and (max-width: 767px) {
                width: 170px;
                height: 90px;
            }
        }
        h2 {
            font-size: 4.6rem;
            line-height: 1.28;
            font-family: var(--font-yu);
            font-weight: 500;
            position: relative;
            @media screen and (max-width: 767px) {
                font-size: 3.2rem;
            }
        }
        .lead {
            font-size: 1.8rem;
            margin-top: 30px;
            line-height: 1.7;
            position: relative;
        }
    }
    .cv-btn {
        position: relative;
        @media screen and (max-width: 767px) {
            aspect-ratio: 1 / 0.5;
        }
        .bg-img {
            img {
                border-radius: 50%;
                position: absolute;
                &:nth-child(1) {
                    top: 202px;
                    left: -24px;
                }
                &:nth-child(2) {
                    top: 386px;
                    left: 9px;
                }
                &:nth-child(3) {
                    top: 70px;
                    left: 70px;
                }
                &:nth-child(4) {
                    top: 160px;
                    left: 185px;
                }
                &:nth-child(5) {
                    top: 120px;
                    left: 305px;
                }
                &:nth-child(6) {
                    top: 356px;
                    left: 330px;
                }
            }
        }
        a {
            position: absolute;
            left: 20%;
            bottom: 16%;
            display: flex;
            flex-direction: column;
            text-align: center;
            justify-content: center;
            font-size: 2rem;
            gap: 20px;
            width: 180px;
            height: 180px;
            color: #fff;
            --_circle-size: scale(100%);
            --_color: #E26976;
            &:hover {
                --_color: #fd8490;
            }
            @media screen and (max-width: 767px) {
                left: 50%;
                bottom: 0;
                transform: translateX(-50%);
            }
            &:before {
                transition: all 0.3s ease;
                content: "";
                position: absolute;
                inset: 0;
                background: var(--_color);
                border-radius: 50%;
                border: 2px solid;
                z-index: -1;
                transform: var(--_circle-size);
            }
            &:after {
                content: "";
                position: absolute;
                inset: -30px;
                border-radius: 50%;
                z-index: -2;
                background: url(../images/bg_cv_grade.svg) no-repeat center /cover;
                transform: var(--_circle-size);
            }
        }
    }
}
.hd02-group {
    text-align: center;
    .mini {
        font-size: 2.4rem;
        font-weight: bold;
        font-family: var(--font-hel);
    }
}
.hd02-center {
    text-align: center;
    font-size: 3.2rem;
    font-family: var(--font-yu);
    @media screen and (max-width: 767px) {
        font-size: 2.4rem;
    }
}
.contribute-lead {
    text-align: center;
    margin-top: 50px;
    font-size: 1.5rem;
    line-height: 2.6;
    @media screen and (max-width: 767px) {
        font-size: 1.4rem;
        line-height: 2;
    }
}
.contribute-list {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 76px;
    margin: 70px auto;
    width: min(1122px, 100%);
    @media screen and (max-width: 767px) {
        grid-template-columns: repeat(2, 1fr);
        gap: 40px 20px;
    }
    li {
        display: grid;
        grid-template-rows: subgrid;
        grid-row: span 3;
        gap: 0;
    }
    .img {
        img {
            width: 323px;
            aspect-ratio: 1;
            object-fit: cover;
            clip-path: circle(50%);
        }
    }
    .title {
        margin-top: 12px;
        font-size: 1.8rem;
        text-align: center;
        @media screen and (max-width: 767px) {
            font-size: 1.4rem;
        }
    }
    .btn-wrap {
        margin-top: 10px;
        height: fit-content;
    }
}
.top-news {
    --inner-width: 908px;
    margin-top: -100px;
    padding-top: 140px;
    padding-bottom: 60px;
    background: #fff;
    position: relative;
    clip-path: inset(-100px 0);
    mask: url(../images/mask_ellipse.svg) no-repeat top center / cover;
    @media screen and (max-width: 767px) {
        margin-top: -50px;
        padding-top: 60px;
    }
    /* &:before {
        content: "";
        display: block;
        position: absolute;
        inset: 0 -100px;
        height: 70px;
        background: #fff;
        transform: translateY(-100%);
        border-top-left-radius: 50% 100%;
        border-top-right-radius: 50% 100%;
        z-index: 2;
        pointer-events: none;
    } */
    hgroup {
        margin-bottom: 40px;
        @media screen and (max-width: 767px) {
            margin-bottom: 20px;
        }
        .en {
            font-family: var(--font-hel);
            font-size: 2.4rem;
            font-weight: bold;
            @media screen and (max-width: 767px) {
                font-size: 1.8rem;
            }
        }
        h2 {
            font-size: 5rem;
            line-height: 1.2;
            font-family: var(--font-yu);
            position: relative;
            @media screen and (max-width: 767px) {
                font-size: 2.8rem;
            }
        }
    }
    .news-row-list {
        li {
            border-bottom: 1px solid #000;
            a {
                padding: 12px 0;
                display: grid;
                grid-template-columns: 158px 1fr;
                gap: 20px;
                @media screen and (max-width: 767px) {
                    grid-template-columns: 6em 1fr;
                    gap: 10px;
                }
            }
        }
    }
    .btn-wrap {
        margin-top: 60px;
        @media screen and (max-width: 767px) {
            margin-top: 30px;
        }
    }
}
.special-detail-cat {
    padding: 32px 0 46px;
    position: relative;
    &.shin {
        color: #fff;
        text-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
    }
    &.index {
        padding: 0;
        padding-top: 50px;
        display: grid;
        grid-template:
            "img ." 1fr
            "img ttl" auto
            "img lead" auto
            "img ." 1fr /auto 1fr;
        gap: 0 38px;
        margin-inline: auto;
        @media screen and (max-width: 767px) {
            grid-template:
                "img " 1fr
                "ttl" auto
                "lead" auto/ 1fr;
        }
        .wide-border {
            position: absolute;
            top: 50%;
            left: calc(50% - 100vw);
            right: calc(50% - 100vw);
            z-index: -1;
            transform-origin: left;
            @media screen and (max-width: 767px) {
                grid-row: 1 / 2;
            }
        }
        .special-detail-cat-title {
            margin-bottom: 20px;
            @media screen and (min-width: 768px) {
                font-size: 7rem;
            }
        }
        .special-detail-cat-lead {
            margin-top: 0;
            font-size: 1.5rem;
            line-height: 2;
            width: min(550px, 100%);
        }
        .special-detail-cat-image {
            grid-area: img;
            padding: 48px;
            border-radius: 50%;
            width: 550px;
            aspect-ratio: 1;
            background: url(../images/bg_circle_blue.png) center /cover;
            @media screen and (max-width: 767px) {
                width: 280px;
                padding: 24px;
                margin-inline: auto;
            }
            img {
                border-radius: 50%;
                position: relative;
                z-index: 10;
            }
        }
    }
    .special-detail-cat-title {
        grid-area: ttl;
        font-size: 6rem;
        font-weight: bold;
        color: var(--_cat-color);
        @media screen and (max-width: 767px) {
            font-size: 3.8rem;
        }
    }
    .special-detail-cat-lead {
        grid-area: lead;
        margin-top: 26px;
        font-weight: bold;
        line-height: 2;
        @media screen and (max-width: 767px) {
            margin-top: 16px;
            font-size: 1.4rem;
        }
    }
    hr {
        background: currentColor;
    }
    .common-bg-text-wrap {
        margin-bottom: -90px;
        opacity: 0.5;
        @media screen and (max-width: 767px) {
            margin-bottom: -30px;
        }
    }
}
.special-detail-profile {
    .inner-wrap {
        display: grid;
        grid-template:
            "img ." 40px
            "img ttl" auto
            "img ." 40px
            "img info" 1fr /auto 1fr;
        gap: 0 38px;
        @media screen and (max-width: 767px) {
            grid-template:
                "img"
                "." 20px
                "ttl"
                "." 20px
                "info" /1fr;
        }
    }
    .special-detail-profile-image {
        grid-area: img;
        padding: 48px;
        border-radius: 50%;
        background: url(../images/bg_circle_blue.png) center /cover;
        width: 550px;
        aspect-ratio: 1;
        @media screen and (max-width: 767px) {
            width: 280px;
            padding: 24px;
            margin-inline: auto;
        }
        img {
            border-radius: 50%;
        }
    }
    .special-detail-profile-title {
        grid-area: ttl;
        font-size: 4rem;
        line-height: 1.75;
        @media screen and (max-width: 767px) {
            font-size: 2.2rem;
        }
        h1, h2 {
            font-weight: bold;
        }
    }
}
.special-detail-profile-info {
    grid-area: info;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.9);
    color: #000;
    padding: 26px 40px;
    @media screen and (max-width: 767px) {
        padding: 20px;
    }
}
.profile-card {
    --_mb: 15px;
    display: grid;
    gap: 0 30px;
    grid-template:
        "ttl ttl"
        ". ." 10px
        "en en"
        "main main"
        ". ." var(--_mb) "text like" /1fr auto;
    @media screen and (max-width: 767px) {
        gap: 0 10px;
    }
    .profile-card-title {
        grid-area: ttl;
        font-size: 1.2rem;
    }
    .profile-card-name-en {
        grid-area: en;
        font-size: 1rem;
        color: #999999;
    }
    .profile-card-name-main {
        grid-area: main;
        font-size: 4rem;
        font-weight: bold;
        sub {
            font-size: 0.6em;
            vertical-align: middle;
        }
        @media screen and (max-width: 767px) {
            font-size: 2.4rem;
        }
    }
    .profile-card-text {
        grid-area: text;
        font-size: 1.2rem;
        line-height: 2;
    }
}
.like-button {
    grid-area: like;
    margin-top: auto;
    margin-bottom: 5px;
    .like-count {
        flex: 1;
        font-size: 1.4rem;
    }
}
.wpulike-heart .wp_ulike_general_class {
    background: #fff;
}
[class*="-detail-entry"] {
    --inner-width: 1080px;
    position: relative;
    &+& {
        margin-top: 64px;
        @media screen and (max-width: 767px) {
            margin-top: 32px;
        }
    }
    .inner-wrap {
        background: #fff;
        border-radius: 10px 130px 10px 130px;
        padding: 70px 80px;
        @media screen and (max-width: 767px) {
            padding: 30px 20px;
            border-radius: 5px 40px 5px 40px;
        }
    }
}
.entry-body {
    letter-spacing: 0.06em;
    .date {
        margin-bottom: -20px;
    }
    h2 {
        font-size: 2.8rem;
        margin-bottom: 1em;
        font-weight: bold;
        line-height: 1.75;
        @media screen and (max-width: 767px) {
            font-size: 2.4rem;
            margin-bottom: 0.5em;
        }
        &:not(:first-child) {
            margin-top: 58px;
            @media screen and (max-width: 767px) {
                margin-top: 24px;
            }
        }
    }
    p {
        font-size: 1.5rem;
        line-height: 2.1;
        &:not(:first-child) {
            margin-top: 1.5em;
        }
        @media screen and (max-width: 767px) {
            font-size: 1.4rem;
            line-height: 1.8;
        }
    }
    hr {
        background: #CCCCCC;
        margin: 64px auto;
        @media screen and (max-width: 767px) {
            margin-block: 24px;
        }
    }
    figure {
        margin-bottom: 48px;
        &:not(:first-child) {
            margin-top: 1.5em;
        }
        @media screen and (max-width: 767px) {
            margin-bottom: 24px;
        }
        figcaption {
            font-size: 1.2rem;
            margin-top: 10px;
            text-align: center;
        }
    }
    div:has(img),
    figure:not(:first-child) {
        margin-top: 92px;
        @media screen and (max-width: 767px) {
            margin-top: 24px;
        }
    }
    img {
        border-radius: 20px;
        @media screen and (max-width: 767px) {
            border-radius: 10px;
        }
    }
    .fl-wrap {
        overflow: hidden;
        margin-top: 64px;
        @media screen and (max-width: 767px) {
            margin-top: 32px;
        }
        &>* {
            overflow: hidden;
        }
        figure+h2 {
            margin-top: 0;
        }
        &.fl-left>figure {
            float: left;
            margin-right: 64px;
            @media screen and (max-width: 767px) {
                float: none;
                margin: 0 0 20px;
            }
        }
        &.fl-right>figure {
            float: right;
            margin-left: 64px;
            @media screen and (max-width: 767px) {
                float: none;
                margin: 0 0 20px;
            }
        }
    }
    .teacher-flex {
        margin-top: 0;
        display: flex;
        gap: 64px;
        @media screen and (max-width: 767px) {
            flex-direction: column;
            gap: 24px;
        }
        figure {
            margin-bottom: 0;
            @media screen and (max-width: 767px) {
                width: 100%;
            }
            img {
                border-radius: 40px;
            }
        }
        .teacher-box {
            flex: 1;
            h3 {
                font-size: 3.6rem;
                font-weight: bold;
                line-height: 1.25;
                @media screen and (max-width: 767px) {
                    font-size: 2rem;
                }
            }
        }
    }
    .event-flex {
        margin-top: 0;
        display: flex;
        flex-direction: row-reverse;
        gap: 64px;
        @media screen and (max-width: 767px) {
            gap: 24px;
            flex-direction: column;
        }
        h2 {
            margin-bottom: 1em;
            @media screen and (max-width: 767px) {
                margin-bottom: 0.5em;
            }
        }
        figure {
            margin-bottom: 0;
            img {
                border-radius: 40px;
            }
        }
        .event-box {
            flex: 1;
            font-size: 1.5rem;
            dl {
                display: grid;
            }
            hr {
                margin: 18px 0;
            }
        }
    }
}
.normal-dl {
    display: grid;
    grid-template-columns: auto 1fr;
    line-height: 2;
    @media screen and (max-width: 767px) {
        line-height: 1.75;
    }
    .normal-dl-item {
        display: grid;
        grid-template-columns: subgrid;
        grid-column: span 2;
        dt {
            font-weight: bold;
        }
    }
}
.normal-row-dl {
    line-height: 2;
    @media screen and (max-width: 767px) {
        line-height: 1.75;
    }
    .normal-dl-item {
        display: grid;
        dt {
            font-weight: bold;
        }
    }
}
.entry-big-img {
    margin-top: 150px;
    text-align: center;
    @media screen and (max-width: 767px) {
        margin-top: 60px;
    }
}
.my-waseda {
    --inner-width: 1080px;
    margin-top: 130px;
    background: url(../images/bg_michi.jpg);
    border-radius: 10px 130px 10px 130px;
    padding: 80px;
    position: relative;
    @media screen and (max-width: 767px) {
        margin-top: 60px;
        border-radius: 5px 60px 5px 60px;
        padding: 30px 20px 80px;
    }
    .my-waseda-bg-text {
        font-size: 11rem;
        position: absolute;
        clip-path: inset(0 0 0 0 round 0 0 10px 130px);
        bottom: 0;
        left: 0;
        right: 0;
        white-space: nowrap;
        color: #fff;
        font-weight: 300;
        opacity: 0.4;
        line-height: 1.7;
        @media screen and (max-width: 767px) {
            font-size: 6rem;
            clip-path: inset(0 0 0 0 round 0 0 5px 60px);
        }
    }
    .my-waseda-title {
        position: absolute;
        right: -33px;
        top: -33px;
        display: grid;
        grid-template:
            "a b"
            ". b";
        font-weight: bold;
        font-size: 5.6rem;
        line-height: 1.1;
        letter-spacing: 0.06em;
        pointer-events: none;
        @media screen and (max-width: 767px) {
            font-size: 3rem;
            right: -16px;
            top: -9px;
        }
        .my-waseda-title01 {
            grid-area: a;
        }
        .my-waseda-title02 {
            grid-area: b;
        }
    }
}
.flex-wrap {
    display: flex;
    gap: 60px;
    color: #fff;
    position: relative;
    @media screen and (max-width: 767px) {
        flex-direction: column;
        gap: 20px;
    }
    .flex-text {
        flex: 1;
        padding: 20px 0;
        line-height: 2;
        @media screen and (max-width: 767px) {
            padding: 0;
            line-height: 1.8;
        }
    }
}
.loop-wrap {
    display: flex;
    gap: 10px;
    overflow: hidden;
    white-space: nowrap;
    font-family: "Helvetica Neue", sans-serif;
}
.loop-text {
    padding-left: 0.25em;
}
.loop-text:nth-child(odd) {
    animation: loop 100s -50s linear infinite;
}
.loop-text:nth-child(even) {
    animation: loop2 100s linear infinite;
}
@keyframes loop {
    0% {
        transform: translateX(100%);
    }
    to {
        transform: translateX(-100%);
    }
}
@keyframes loop2 {
    0% {
        transform: translateX(0);
    }
    to {
        transform: translateX(-200%);
    }
}
.detail-tag-list {
    --inner-width: 1080px;
    margin-top: 100px;
    background: rgba(0, 0, 0, 0.05);
    border-radius: 200px;
    padding: 32px;
    @media screen and (max-width: 767px) {
        margin-top: 40px;
        padding: 16px;
    }
    .tag-list {
        display: flex;
        flex-wrap: wrap;
        gap: 14px;
        @media screen and (max-width: 767px) {
            gap: 10px;
        }
        a {
            display: inline-block;
            padding: 5px 20px;
            background: #fff;
            border: 1px solid #CCCCCC;
            border-radius: 100px;
            font-size: 1.4rem;
            color: #871F2A;
            font-weight: bold;
            @media screen and (max-width: 767px) {
                font-size: 1.2rem;
            }
        }
    }
}
.share-btn-list {
    margin-top: 64px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 24px;
    @media screen and (max-width: 767px) {
        gap: 12px;
        margin-top: 30px;
    }
    dt {
        font-family: var(--font-hel);
        font-weight: bold;
        font-size: 2rem;
        @media screen and (max-width: 767px) {
            font-size: 1.6rem;
        }
    }
    dd {
        display: flex;
        gap: 24px;
        @media screen and (max-width: 767px) {
            gap: 12px;
        }
        &:not(:last-child) {
            padding-right: 24px;
            border-right: 1px solid #000;
            @media screen and (max-width: 767px) {
                padding-right: 12px;
            }
        }
        /* &:last-child {
            margin-right: -24px;
        } */
        a {
            @media screen and (max-width: 767px) {
                width: 40px;
                aspect-ratio: 1;
            }
        }
    }
}
.bottom-section {
    --inner-width: 1080px;
    padding: 68px 0;
    background: #F1F3F7;
    @media screen and (max-width: 767px) {
        padding: 32px 0;
    }
}
.bottom-sns {
    margin-top: 48px;
    padding-top: 48px;
    border-top: 1px solid #CCCCCC;
    @media screen and (max-width: 767px) {
        margin-top: 24px;
        padding-top: 24px;
    }
    ul {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 24px;
        @media screen and (max-width: 767px) {
            gap: 12px;
        }
        img {
            @media screen and (max-width: 767px) {
                zoom: 0.8;
            }
        }
    }
}
.breadcrumbs {
    --inner-width: 1200px;
    padding: 34px 0;
    font-size: 1.5rem;
    letter-spacing: 0.04em;
    background: #fff;
    white-space: nowrap;
    @media screen and (max-width: 767px) {
        padding: 12px 0;
        font-size: 1.2rem;
    }
    &>div {
        display: flex;
        overflow-x: auto;
    }
    span:not(:last-child) {
        font-weight: bold;
    }
    span:not(:first-child) {
        display: flex;
        align-items: center;
        &:before {
            content: "";
            background: #000;
            display: inline-block;
            width: 10px;
            height: 1px;
            margin-left: 14px;
            margin-right: 14px;
        }
    }
}
.special-bg-text-wrap {
    position: relative;
    height: 140px;
    @media screen and (max-width: 767px) {
        height: 60px;
    }
}
.special-bg-text {
    font-size: 32rem;
    color: rgba(255, 255, 255, 0.6);
    position: absolute;
    bottom: 0;
    font-weight: 300;
    line-height: 1;
    z-index: -1;
    @media screen and (max-width: 767px) {
        font-size: 10rem;
    }
}
.special-list {
    --inner-width: 1200px;
    margin-bottom: 310px;
    @media screen and (max-width: 767px) {
        margin-bottom: 0px;
    }
    .pickup-cards-item {
        @media screen and (min-width: 768px) {
            padding-bottom: 70px;
        }
        .pos {
            text-align: left;
        }
        .name {
            font-size: 2.4rem;
            font-weight: bold;
            text-align: left;
            margin-top: 5px;
        }
    }
}
.common-bg-text-wrap {
    position: relative;
    height: 220px;
    z-index: -2;
    pointer-events: none;
    @media screen and (max-width: 767px) {
        height: 60px;
    }
}
.common-bg-text {
    font-size: 22rem;
    color: rgba(255, 255, 255, 0.6);
    position: absolute;
    bottom: 0;
    font-weight: 300;
    line-height: 1.2;
    z-index: -1;
    @media screen and (max-width: 767px) {
        font-size: 6rem;
    }
}
.common-title {
    font-size: 6rem;
    font-weight: bold;
    margin-top: -1.4em;
    &:has(.logo) {
        margin-top: -1.8em;
        .logo {
            display: inline-block;
            margin-bottom: 10px;
        }
    }
    @media screen and (max-width: 767px) {
        font-size: 3.2rem;
        margin-top: -0.5em;
        padding-bottom: 0.5em;
    }
    &+hr {
        margin-bottom: 100px;
        @media screen and (max-width: 767px) {
            margin-bottom: 40px;
        }
    }
}
.common-title-lead {
    font-weight: bold;
    font-size: 1.5rem;
    margin-top: -70px;
    margin-bottom: 70px;
    @media screen and (max-width: 767px) {
        margin-top: -30px;
        margin-bottom: 30px;
    }
}
.normal-select-wrap {
    width: fit-content;
    position: relative;
    &:before {
        content: "";
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        right: 10px;
        width: 10px;
        height: 8px;
        clip-path: polygon(0 0, 100% 0, 50% 100%);
        background: #000;
    }
}
.normal-select {
    border: 1px solid #ccc;
    padding: 10px 30px 10px 20px;
    border-radius: 100px;
    font-weight: bold;
    min-width: 7em;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
}
.news-index-list {
    margin-top: 42px;
    border-top: 1px solid #CCCCCC;
    .news-item {
        border-bottom: 1px solid #CCCCCC;
        padding: 48px 0;
        display: grid;
        grid-template:
            "img ." 1fr
            "img time" auto
            "img ttl" auto
            "img ." 1fr /
            auto 1fr;
        gap: 20px 50px;
        @media screen and (max-width: 767px) {
            grid-template:
                "img"
                "." 15px
                "time"
                "." 5px
                "ttl";
            gap: 0;
            padding: 26px 0;
        }
        img {
            grid-area: img;
            border-radius: 20px;
            width: 100%;
        }
        time {
            grid-area: time;
            font-size: 1.5rem;
            font-weight: bold;
            @media screen and (max-width: 767px) {
                font-size: 1.2rem;
            }
        }
        .ttl {
            grid-area: ttl;
            font-size: 2rem;
            font-weight: bold;
            @media screen and (max-width: 767px) {
                font-size: 1.6rem;
            }
        }
    }
}
.future .special-detail-profile-shin {
    &:before {
        background: url(../images/bg_circle_navy.png) center /100% auto;
    }
}
.special-detail-profile-shin {
    --inner-width: 1080px;
    margin-bottom: 40px;
    color: #fff;
    position: relative;
    --_size: 1;
    &:before {
        position: absolute;
        top: 20px;
        left: 50%;
        transform: translateX(-50%) scale(var(--_size));
        content: "";
        background: url(../images/bg_circle_pink.png) center /100% auto;
        width: 900px;
        aspect-ratio: 1;
        border-radius: 50%;
        @media screen and (max-width: 767px) {
            top: auto;
            bottom: -200px;
            width: 640px;
        }
    }
    .inner-wrap {
        display: grid;
        grid-template:
            "img date"
            "img ." 30px
            "img ttl"
            "img ." 36px
            "img info" 1fr
            / 454px 1fr;
        gap: 0 50px;
        position: relative;
        @media screen and (max-width: 767px) {
            grid-template:
                "img"
                "." 18px
                "date"
                "." 10px
                "ttl"
                "." 18px
                "info"
                / 1fr;
        }
    }
}
.special-detail-shin-list {
    margin-inline: auto;
    &.inner-wrap {
        --inner-width: 1080px;
        @media screen and (max-width: 767px) {
            width: 100%;
        }
    }
    @media screen and (min-width: 768px) {
        &.mini {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 40px;
            li:nth-child(2n) {
                padding-top: 48px;
            }
            a {
                border-radius: 130px 10px 130px 10px;
                grid-template:
                    "img ." 16px
                    "img date"
                    "img ." 28px
                    "img ttl"
                    "img ." 24px
                    "img info"
                    "img ." 1fr / 226px 1fr;
                padding: 20px;
                gap: 0 30px;
            }
            .special-detail-profile-icon {
                width: 60px;
                top: 0;
                left: 0;
            }
            .special-detail-profile-shin-date {
                display: flex;
                align-items: center;
                .date-head {
                    grid-template:
                        "year num week"
                        /auto auto auto;
                    gap: 5px;
                }
                .date-number,
                .date-year,
                .date-week {
                    font-size: 1.5rem;
                }
                .date-year {
                    &:after {
                        content: ".";
                    }
                }
                .date-time {
                    margin-top: 0;
                    margin-left: 20px;
                    font-size: 1.2rem;
                }
            }
            .special-detail-profile-shin-title {
                font-size: 1.7rem;
            }
        }
    }
    &>li {
        margin-top: 64px;
        @media screen and (max-width: 767px) {
            margin-top: 32px;
        }
    }
    a {
        background: #fff;
        color: #000;
        padding: 40px;
        display: grid;
        border-radius: 235px 10px 235px 10px;
        grid-template:
            "img ." 1fr
            "img date"
            "img ." 70px
            "img ttl"
            "img ." 36px
            "img info"
            "img ." 1fr
            / 390px 1fr;
        gap: 0 50px;
        position: relative;
        @media screen and (max-width: 767px) {
            grid-template:
                "img"
                "." 18px
                "date"
                "." 10px
                "ttl"
                "." 18px
                "info"
                / 1fr;
            border-radius: 100px 10px 100px 10px;
            padding: 20px;
        }
        .special-detail-profile-icon {
            top: 10px;
            left: 10px;
            @media screen and (max-width: 767px) {
                width: 60px;
                font-size: 1.2rem;
            }
        }
        .special-detail-profile-shin-image {
            text-align: center;
            img {
                @media screen and (max-width: 767px) {
                    width: 180px;
                }
            }
        }
        .special-detail-profile-shin-date {
            .date-time {
                color: #000;
                margin-top: 10px;
                &:before {
                    background-color: #000;
                }
            }
        }
        .special-detail-profile-shin-title {
            font-size: 2.8rem;
            @media screen and (max-width: 767px) {
                font-size: 2rem;
            }
        }
        .special-detail-profile-shin-info {
            & .detail-item {
                dt {
                    width: 40px;
                    span {
                        background: #F1F3F7;
                    }
                }
                dd {
                    color: inherit;
                }
            }
        }
    }
}
.special-detail-profile-icon {
    position: absolute;
    width: 88px;
    aspect-ratio: 1;
    top: 0;
    left: 0;
    background: var(--color-link);
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    line-height: 1.25;
    z-index: 2;
    font-weight: bold;
    color: #fff;
    &.end {
        background: #000;
    }
}
.special-detail-profile-shin-image {
    grid-area: img;
    img {
        width: 100%;
        height: auto;
        border-radius: 50%;
    }
}
.special-detail-profile-shin-date {
    grid-area: date;
    line-height: 1;
    @media screen and (max-width: 767px) {
        display: flex;
        align-items: center;
        gap: 10px;
    }
    .date-head {
        display: grid;
        grid-template:
            "num year"
            "num week"
            /auto 1fr;
        font-weight: bold;
        .date-number {
            grid-area: num;
        }
        .date-year {
            grid-area: year;
            font-size: 1.7rem;
            @media screen and (max-width: 767px) {
                font-size: 1.2rem;
            }
        }
        .date-week {
            grid-area: week;
            font-size: 2.3rem;
            @media screen and (max-width: 767px) {
                font-size: 1.4rem;
            }
        }
    }
    .date-time {
        margin-top: 6px;
        color: #fff;
        line-height: 1.25;
        position: relative;
        vertical-align: middle;
        &:before {
            content: "";
            display: inline-block;
            vertical-align: middle;
            margin-top: -2px;
            background: #fff;
            mask: url(../images/icon_time.svg) no-repeat left center;
            width: 16px;
            aspect-ratio: 1;
            line-height: 1;
        }
        @media screen and (max-width: 767px) {
            margin-top: 0;
        }
    }
    .date-number {
        font-size: 5rem;
        font-weight: bold;
        @media screen and (max-width: 767px) {
            font-size: 2.8rem;
        }
    }
}
.special-detail-profile-shin-title {
    grid-area: ttl;
    font-size: 4rem;
    font-weight: bold;
    @media screen and (max-width: 767px) {
        font-size: 2.2rem;
    }
    h2 {
        font-weight: inherit;
    }
}
.special-detail-profile-shin-info {
    grid-area: info;
    .event-details {
        display: grid;
        grid-template-columns: auto 1fr;
        gap: 14px 8px;
        @media screen and (max-width: 767px) {
            gap: 8px;
        }
    }
    .detail-item {
        display: grid;
        grid-template-columns: subgrid;
        grid-column: span 2;
        dt {
            font-size: 1.2rem;
            width: 65px;
            span {
                display: inline-block;
                background: #fff;
                color: #000;
                width: 100%;
                border-radius: 100px;
                text-align: center;
            }
        }
        dd {
            line-height: 1.25;
            font-size: 1.4rem;
            color: #fff;
            em {
                font-weight: bold;
            }
        }
    }
}
.special-detail-profile-shin-apply {
    position: absolute;
    right: 0;
    bottom: 50px;
    @media screen and (max-width: 767px) {
        bottom: -20px;
        right: 30px;
    }
    a {
        width: 160px;
        aspect-ratio: 1;
        background: var(--color-link);
        border-radius: 50%;
        border: 2px solid #fff;
        display: flex;
        flex-direction: column;
        gap: 20px;
        align-items: center;
        justify-content: center;
        font-weight: bold;
        color: #fff;
        font-size: 1.5rem;
        transition: all 0.3s ease;
        &:hover {
            opacity: 0.7;
        }
        @media screen and (max-width: 767px) {
            width: 80px;
            gap: 5px;
            font-size: 1.2rem;
        }
        &:before {
            content: "";
            background: url(../images/icon_apply.svg) center /cover;
            width: 36px;
            aspect-ratio: 1;
            margin-top: 10px;
            @media screen and (max-width: 767px) {
                width: 24px;
                margin-top: 0;
            }
        }
    }
}
.article-detail {
    padding-bottom: 150px;
    @media screen and (max-width: 767px) {
        padding-bottom: 64px;
    }
    &.common {
        background: #F1F3F7;
        position: relative;
    }
    &.shin {
        padding: 0;
        .special-detail-cat-mv {
            width: 100%;
            mask: linear-gradient(0deg, rgba(255, 255, 255, 0) 13%, rgba(0, 0, 0, 1) 14%), url(../images/mask_ellipse_bottom.svg) no-repeat bottom center /100% auto;
        }
        /* &:before {
            content: "";
            position: absolute;
            background: url(../images/bg_shin_waseda_detail.jpg) no-repeat top left /cover;
            width: 100%;
            mask: url(../images/mask_ellipse_bottom.svg) no-repeat bottom 40px center /100% auto;
        } */
        &.detail {
            margin-bottom: 120px;
            @media screen and (max-width: 767px) {
                margin-bottom: 30px;
            }
            .special-detail-cat-mv {
                background: url(../images/bg_shin_waseda_detail.jpg) no-repeat top center /cover;
                padding-bottom: 318px;
                margin-bottom: -320px;
            }
            .bg-svg-triangle {
                top: 1200px;
            }
        }
        &.index {
            .special-detail-cat-mv {
                background: url(../images/bg_shin_waseda.jpg) no-repeat top center /cover;
                height: 784px;
                @media screen and (max-width: 767px) {
                    height: auto;
                    padding-bottom: 60px;
                }
            }
            @media screen and (max-width: 767px) {
                aspect-ratio: auto;
                background-position: bottom center;
            }
            &:before {
                background: url(../images/bg_shin_waseda.jpg) no-repeat top left /cover;
                height: 100%;
            }
            .special-detail-cat.shin .special-detail-cat-title {
                font-size: 8rem;
                @media screen and (max-width: 767px) {
                    font-size: 3.2rem;
                }
            }
            .bg-svg-triangle {
                top: 860px;
            }
        }
        &.interview {
            .special-detail-cat-mv {}
        }
    }
    &.future.detail {
        margin-bottom: 0;
    }
}
.bg-svg-triangle {
    pointer-events: none;
    position: absolute;
    inset: 0 -3vw 0 -3vw;
    aspect-ratio: 1546 / 1053;
    opacity: 0.7;
    img {
        width: 100%;
        &#triangle02 {
            margin-top: -15vw;
        }
    }
}
.guide-section-wrap {
    padding: 30px 0 0;
}
.bg-svg-wave {
    position: absolute;
    top: 1340px;
    display: flex;
    width: 100%;
    @media screen and (max-width: 767px) {
        top: 2000px;
    }
    img {
        width: 100%;
        @media screen and (max-width: 767px) {
            width: 200%;
        }
    }
}
.special-detail-entry+.entry-bottom {
    margin-top: 100px;
}
.entry-bottom {
    background: #fff;
    padding: 64px 0;
    /* margin-bottom: 120px; */
    @media screen and (max-width: 767px) {
        margin-top: 30px;
        /* margin-bottom: 30px; */
        padding: 32px 0;
    }
    .lead {
        margin-top: 2.5em;
        font-size: 1.2rem;
        text-align: center;
        line-height: 2;
        @media screen and (max-width: 767px) {
            font-size: 1rem;
        }
    }
    hr {
        background: #CCCCCC;
        margin: 46px auto;
        @media screen and (max-width: 767px) {
            margin-block: 24px;
        }
    }
    .btn-wrap {
        margin: 0;
    }
}
.gray-radius-section {
    background: #F1F3F7;
    padding: 64px 0 164px;
    --inner-width: 1200px;
    @media screen and (max-width: 767px) {
        padding: 20px 0 40px;
    }
}
.gray-radius-section.deep {
    background: #E9ECF2;
    padding-top: 124px;
    padding-bottom: 220px;
    margin-bottom: -100px;
    mask: url(../images/mask_ellipse.svg) no-repeat top center / 100% auto;
    &.foot {
        margin-bottom: 0;
        padding-bottom: 64px;
    }
    @media screen and (max-width: 767px) {
        padding: 40px 0 50px;
        margin-bottom: -20px;
    }
}
.bd-hd {
    font-size: 4rem;
    font-weight: bold;
    padding-bottom: 20px;
    @media screen and (max-width: 767px) {
        font-size: 2.4rem;
        padding-bottom: 6px;
    }
}
.lead-left,
.lead-center {
    font-size: 1.5rem;
    line-height: 2;
    &+& {
        margin-top: 1.5lh;
    }
    a.normal-link {
        justify-content: center;
    }
}
.lead-center {
    text-align: center;
}
.faq-wrap {
    margin-top: 60px;
    max-width: 1080px;
    margin-inline: auto;
}
.faq-item {
    background: #fff;
    padding: 24px 34px 24px 34px;
    border-radius: 20px;
    @media screen and (max-width: 767px) {
        padding: 12px 20px;
        border-radius: 10px;
    }
    &+& {
        margin-top: 24px;
        @media screen and (max-width: 767px) {
            margin-top: 12px;
        }
    }
    &[open] {
        summary {
            &:after {
                background-image: url(../images/icon_acc_minus.svg);
            }
        }
    }
    summary {
        display: grid;
        grid-template: "qa txt icon" /auto 1fr auto;
        gap: 24px;
        @media screen and (max-width: 767px) {
            gap: 12px;
        }
        &:before {
            grid-area: qa;
            display: block;
            content: "";
            background: url(../images/icon_q.svg) no-repeat top /contain;
            width: 26px;
            @media screen and (max-width: 767px) {
                width: 20px;
            }
        }
        &:after {
            grid-area: icon;
            display: block;
            content: "";
            background: url(../images/icon_acc_plus.svg) no-repeat center /contain;
            width: 24px;
            aspect-ratio: 1;
            align-self: center;
            @media screen and (max-width: 767px) {
                width: 20px;
            }
        }
        span {
            grid-area: txt;
            font-weight: bold;
            font-size: 1.8rem;
            display: flex;
            align-items: center;
            @media screen and (max-width: 767px) {
                font-size: 1.6rem;
            }
        }
    }
    .faq-answer {
        display: grid;
        grid-template:
            ". ." 20px
            "bd bd" 1px
            ". ." 38px
            "qa txt"
            ". ." 20px /auto 1fr;
        gap: 0 24px;
        @media screen and (max-width: 767px) {
            grid-template:
                ". ." 10px
                "bd bd" 1px
                ". ." 14px
                "qa txt"
                ". ." 14px /auto 1fr;
            gap: 0 12px;
        }
        &:before {
            grid-area: qa;
            display: block;
            content: "";
            background: url(../images/icon_a.svg) no-repeat top/contain;
            width: 26px;
            @media screen and (max-width: 767px) {
                width: 20px;
            }
        }
        &:after {
            grid-area: bd;
            display: block;
            content: "";
            background: #000;
        }
        .con {
            grid-area: txt;
            line-height: 2;
            font-size: 1.5rem;
            @media screen and (max-width: 767px) {
                font-size: 1.4rem;
                line-height: 1.75;
            }
            ul {
                li {
                    display: grid;
                    grid-template-columns: 20px 1fr;
                    gap: 10px;
                    &:before {
                        content: "";
                        display: inline-block;
                        background: var(--color-link);
                        width: 7px;
                        height: 7px;
                        border-radius: 50%;
                        margin: calc(0.5lh - 0.25em) auto 0;
                    }
                }
            }
            a {
                color: var(--color-link);
                text-decoration: underline;
            }
            /* a {
                font-weight: bold;
                display: flex;
                align-items: center;
                gap: 10px;
                margin-top: 1em;
                &:after {
                    display: block;
                    width: 0.6em;
                    height: 0.5em;
                    content: "";
                    background: #000;
                    clip-path: polygon(70% 50%, 0 0, 0 100%);
                }
            } */
        }
    }
}
.guide-section {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
    --inner-width: 1200px;
    @media screen and (max-width: 767px) {
        grid-template-columns: 1fr;
    }
    &>li {
        background: #fff;
        padding: 60px 80px;
        border-radius: 10px 130px 10px 130px;
        @media screen and (max-width: 767px) {
            padding: 32px 24px;
            border-radius: 10px 64px 10px 64px;
        }
        &:nth-child(2n) {
            border-radius: 130px 10px 130px 10px;
            @media screen and (max-width: 767px) {
                border-radius: 64px 10px 64px 10px;
            }
        }
        .hd {
            font-size: 3.2rem;
            font-weight: bold;
            display: flex;
            align-items: center;
            gap: 10px;
            padding-bottom: 10px;
            border-bottom: 1px solid #000;
            margin-bottom: 40px;
            letter-spacing: 0.06em;
            @media screen and (max-width: 767px) {
                font-size: 2.4rem;
                margin-bottom: 20px;
                img {
                    width: 28px;
                }
            }
        }
        .guide-list {
            display: grid;
            grid-template-columns: repeat(2, auto);
            grid-template-rows: repeat(4, auto);
            grid-auto-flow: column;
            font-size: 1.5rem;
            gap: 15px 20px;
            @media screen and (max-width: 767px) {
                grid-template-columns: 1fr;
                grid-template-rows: auto;
                grid-auto-flow: row;
                gap: 10px;
            }
            a {
                display: flex;
                align-items: center;
                gap: 12px;
                font-weight: bold;
                &:after {
                    content: "";
                    width: 6px;
                    height: 7px;
                    background: #707070;
                    clip-path: polygon(100% 50%, 0 0, 0 100%);
                }
                &[target="_blank"]:after {
                    content: "";
                    display: inline-block;
                    content: "";
                    background: url(../images/icon_blank.svg) no-repeat center /contain;
                    width: 12px;
                    height: 10px;
                    clip-path: none;
                }
            }
        }
    }
}
.massage-end {
    text-align: right;
    margin-top: 30px;
}
.message-cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 45px;
    @media screen and (max-width: 767px) {
        grid-template-columns: 1fr;
    }
}
.message-cards-item {
    padding: 0 20px 40px;
    background: #fff;
    border-radius: 180px 180px 10px 10px;
    .img {
        background: url(../images/bg_circle_blue.png) no-repeat center /cover;
        width: fit-content;
        padding: 20px;
        margin-inline: -22px;
        img {
            aspect-ratio: 1;
            border-radius: 50%;
            object-fit: contain;
            width: 100%;
            @media screen and (max-width: 767px) {
                width: 100%;
            }
        }
    }
    .pos {
        font-size: 1.3rem;
        margin-top: 24px;
    }
    .name {
        font-size: 2.4rem;
        margin-bottom: 16px;
        font-weight: bold;
        margin-top: 8px;
    }
    .text {
        font-size: 1.5rem;
        line-height: 1.75;
    }
}
.special-detail-profile-sp-interview,
.special-detail-profile-interview {
    position: relative;
    z-index: 1;
    width: 1080px;
    display: grid;
    grid-template:
        "img . bd . info ."
        /auto 40px 1px 60px 1fr 24px;
    padding: 40px;
    background: url(../images/bg_purple.png);
    border-radius: 300px 130px 10px 300px;
    margin-bottom: 64px;
    @media screen and (max-width: 767px) {
        grid-template: "img" auto
            "." 20px
            "bd" 1px
            "." 30px
            "info" 1fr
            "." 20px;
        border-radius: 900px 900px 10px 100px;
        padding: 24px;
        width: min(var(--inner-width), 100% - 10vw);
        margin: 0 auto 40px;
    }
    &:before {
        content: "";
        grid-area: bd;
        background: #fff;
        opacity: 0.2;
    }
    .special-detail-profile-sp-interview-img,
    .special-detail-profile-interview-img {
        grid-area: img;
        img {
            border-radius: 50%;
        }
    }
    .special-detail-profile-info {
        background: none;
        padding: 0;
        color: #fff;
        align-self: center;
        .profile-card {
            --_mb: 110px;
            @media screen and (max-width: 767px) {
                --_mb: 30px;
            }
            .profile-card-name-main {
                font-size: 5.6rem;
                @media screen and (max-width: 767px) {
                    font-size: 3.2rem;
                }
            }
        }
    }
}
.shs-dummy {
    margin-top: 140px;
    margin-bottom: 140px;
    @media screen and (max-width: 767px) {
        margin-top: 64px;
        margin-bottom: 64px;
    }
}
.special-detail-profile-sp-interview {
    margin-top: 140px;
    margin-bottom: 140px;
    background: url(../images/bg_green.png) no-repeat center /cover;
    @media screen and (max-width: 767px) {
        margin-top: 64px;
        margin-bottom: 64px;
    }
    .special-detail-profile-info {
        align-self: stretch;
    }
}
.special-detail-profile-interview {
    margin-top: -24px;
}
.ob-profile-card {
    display: flex;
    flex-direction: column;
    align-content: start;
    height: 100%;
    padding: 24px 0;
    @media screen and (max-width: 767px) {
        padding: 0;
    }
    .profile-card-cat {
        font-size: 1.4rem;
        margin-bottom: 10px;
    }
    .profile-card-hd {
        font-size: 3.2rem;
        margin-bottom: 20px;
        font-weight: bold;
        @media screen and (max-width: 767px) {
            font-size: 2rem;
        }
    }
    .profile-card-text-pos {
        font-size: 1.2rem;
    }
    .profile-card-text-name {
        margin-top: 10px;
        small {
            font-size: 1.2rem;
        }
        em {
            font-size: 2rem;
            display: inline-block;
            margin-left: 10px;
            font-weight: bold;
        }
    }
    .profile-card-text-contents {
        margin-top: auto;
        font-size: 1.2rem;
        line-height: 2;
    }
    .profile-card-btn {
        margin-top: auto;
        @media screen and (max-width: 767px) {
            margin-top: 20px;
        }
        .btn-wrap {
            justify-content: left;
            .btn {
                width: min(300px, 100%);
                text-align: center;
            }
        }
    }
}
.interview-cards {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 40px;
    margin-bottom: 100px;
    @media screen and (max-width: 767px) {
        grid-template-columns: 1fr;
        margin-bottom: 40px;
    }
    .interview-cards-item {
        border-radius: 224px 130px 10px 224px;
        padding: 20px;
        background: url(../images/bg_purple.png);
        display: grid;
        grid-template:
            "img . ." 10px
            "img . pos"
            "img . ." 5px
            "img . name"
            "img . ." 5px
            "img . text" 1fr
            "img . more"
            "img . ." 5px
            /226px 32px 1fr
        ;
        color: #fff;
        @media screen and (max-width: 767px) {
            border-radius: 300px 300px 64px 10px;
            grid-template:
                "img"
                "." 15px
                "pos"
                "." 5px
                "name"
                "." 10px
                "text"
                "." 15px
                "more"
                "." 5px
                / 1fr
            ;
        }
        .img {
            grid-area: img;
            img {
                aspect-ratio: 1;
                border-radius: 50%;
                @media screen and (max-width: 767px) {
                    width: 100%;
                }
            }
        }
        .pos {
            grid-area: pos;
            font-size: 1.3rem;
        }
        .name {
            grid-area: name;
            font-size: 2.4rem;
            font-weight: bold;
            small {
                font-size: 0.8em;
            }
        }
        .text {
            grid-area: text;
            font-size: 1.3rem;
        }
        .more {
            padding-top: 20px;
            border-top: 1px solid #fff;
            grid-area: more;
            text-align: right;
            display: grid;
            grid-template-columns: 1fr auto;
            align-items: center;
            gap: 10px;
            &:after {
                content: "";
                background: currentColor;
                width: 6px;
                height: 8px;
                clip-path: polygon(100% 50%, 0 0, 0 100%);
            }
        }
    }
}
.shs-mv,
.about-mv,
.donation-mv {
    color: #fff;
    /* aspect-ratio: 1366/789; */
    height: 734px;
    position: relative;
    @media screen and (max-width: 767px) {
        height: 460px;
    }
    &:before {
        z-index: -3;
        position: absolute;
        content: "";
        display: block;
        inset: 0;
        background: url(../images/mv_donation.jpg) no-repeat center /cover;
    }
    .icon_1 {
        position: absolute;
        top: 228px;
        left: 61.2%;
    }
    .icon_2 {
        position: absolute;
        top: 476px;
        left: 39.6%;
    }
    .icon_3 {
        position: absolute;
        top: 438px;
        left: 14.4%;
    }
    @media screen and (max-width: 767px) {
        .icon_1 {
            top: 690px;
            zoom: 0.5;
            z-index: -1;
        }
        .icon_2 {
            display: none;
            z-index: -1;
        }
        .icon_3 {
            top: 690px;
            zoom: 0.5;
            z-index: -1;
        }
    }
    .common-bg-text {
        font-size: 16rem;
        bottom: 30px;
        @media screen and (max-width: 767px) {
            font-size: 6rem;
            bottom: -10px;
        }
    }
    .common-title {
        font-size: 6rem;
        line-height: 1.25;
        padding-bottom: 20px;
        @media screen and (max-width: 767px) {
            font-size: 3.2rem;
            margin-top: -0.5em;
        }
        small {
            font-size: 3.2rem;
            display: block;
            @media screen and (max-width: 767px) {
                font-size: 1.8rem;
            }
        }
        &+hr {
            margin-bottom: 30px;
            background: #fff;
        }
    }
    .btn-wrap {
        margin-top: 20px;
    }
}
.shs-mv {
    &:before {
        background: url(../images/mv_shs.png) no-repeat center /cover;
    }
    .logo {
        img {
            width: 100px;
            height: auto;
        }
    }
    &.detail {
        padding-top: 20px;
        height: 590px;
        .common-title {
            margin-top: 0;
        }
        &+.senior-section {
            margin-top: -240px;
            padding-bottom: 120px;
            @media screen and (max-width: 767px) {
                margin-top: -360px;
            }
            &:before {
                inset: 140px 0 0;
            }
            .special-detail-profile-sp-interview {
                margin-top: 0;
                margin-bottom: 60px;
            }
        }
    }
}
.normal-tab {
    max-width: 1080px;
    margin-inline: auto;
    .tab-title {
        margin-bottom: 88px;
        @media screen and (max-width: 767px) {
            margin-bottom: 20px;
        }
        ul {
            /* display: grid;
            grid-template-columns: repeat(auto-fit, minmax(344px, 1fr)); */
            display: flex;
            justify-content: center;
            gap: 24px;
            @media screen and (max-width: 767px) {
                /* grid-template-columns: 1fr; */
                gap: 10px;
                font-size: 1.4rem;
            }
        }
        .tab-btn {
            width: 33.33%;
            background: #fff;
            height: 56px;
            border-radius: 100px;
            display: flex;
            justify-content: center;
            align-items: center;
            font-weight: bold;
            position: relative;
            cursor: pointer;
            @media screen and (max-width: 767px) {
                height: 40px;
            }
            i {
                margin-right: 14px;
                @media screen and (max-width: 767px) {
                    margin-right: 4px;
                }
                img {
                    vertical-align: middle;
                    @media screen and (max-width: 767px) {
                        zoom: 0.5;
                    }
                }
            }
            &.cur {
                background: #000;
                color: #fff;
                &:before {
                    content: "";
                    position: absolute;
                    left: 50%;
                    bottom: 0;
                    width: 15px;
                    height: 12px;
                    background: #000;
                    transform: translate(-50%, 100%);
                    clip-path: polygon(50% 100%, 0 0, 100% 0);
                    @media screen and (max-width: 767px) {
                        width: 12px;
                        height: 8px;
                    }
                }
                i {
                    filter: invert(1);
                }
            }
        }
    }
    .tab-contents-list {
        display: none;
        &.cur {
            display: block;
        }
    }
}
.white-radius {
    padding: 72px 80px 100px;
    background: #fff;
    border-radius: 10px 130px 10px 130px;
    width: min(1080px, 100%);
    margin-inline: auto;
    overflow: hidden;
    margin-top: 72px;
    @media screen and (max-width: 767px) {
        padding: 32px 24px;
        border-radius: 10px 64px 10px 64px;
        font-size: 1.4rem;
        margin-top: 24px;
    }
    &.anniversary2032 {
        width: min(1288px, 100%);
        color: #000;
        padding: 100px;
        background: #F1F3F7;
        position: relative;
        overflow: visible;
        @media screen and (max-width: 767px) {
            padding: 40px 20px;
        }
        &:before {
            display: inline-block;
            position: absolute;
            inset: 230px -120px auto;
            content: "";
            background: url(../images/pic_anniversary.png) center /contain;
            width: 1556px;
            height: 907px;
            pointer-events: none;
            @media screen and (max-width: 767px) {
                display: none;
            }
        }
        .icon_1 {
            position: absolute;
            top: 69%;
            left: 2%;
            @media screen and (max-width: 767px) {
                zoom: 0.5;
                display: none;
            }
        }
        .icon_2 {
            position: absolute;
            top: 5.4%;
            left: 71.7%;
            @media screen and (max-width: 767px) {
                zoom: 0.5;
                display: none;
            }
        }
        .icon_3 {
            position: absolute;
            top: 84%;
            right: 2.8%;
            @media screen and (max-width: 767px) {
                zoom: 0.5;
                display: none;
            }
        }
    }
    &.member {
        width: min(1200px, 90%);
        color: #000;
        padding: 100px;
        @media screen and (max-width: 767px) {
            padding: 48px 20px;
        }
        .normal-title {
            display: flex;
            flex-direction: column;
            margin-bottom: 2em;
            @media screen and (max-width: 767px) {
                margin-bottom: 1em;
            }
            .sub {
                font-size: 1.5rem;
                font-weight: bold;
            }
            .ttl {
                font-family: var(--font-hel);
                font-size: 4.8rem;
                font-weight: 300;
                line-height: 1.5;
                @media screen and (max-width: 767px) {
                    font-size: 3.6rem;
                }
            }
        }
    }
    &.greeting {
        margin: 0;
        color: #000;
        line-height: 2;
        max-width: 689px;
        padding-bottom: 70px;
        @media screen and (max-width: 767px) {
            padding-bottom: 30px;
        }
        .normal-title {
            font-size: 3rem;
            font-weight: bold;
            margin-bottom: 0.8em;
            @media screen and (max-width: 767px) {
                font-size: 2.4rem;
                line-height: 1.7;
            }
        }
        .pos {
            margin-top: 3em;
            text-align: right;
            font-size: 1.5rem;
            @media screen and (max-width: 767px) {
                margin-top: 2em;
            }
        }
        .name {
            text-align: right;
            font-size: 2.8rem;
            font-weight: bold;
            margin-top: 0;
        }
    }
    &.red {
        --_color: #9A011C;
        border: 2px solid var(--_color);
        margin-top: 64px;
        @media screen and (max-width: 767px) {
            margin-top: 32px;
        }
        .fx-wrap {
            margin-top: 64px;
            gap: 40px;
            @media screen and (max-width: 767px) {
                margin-top: 32px;
                gap: 20px;
            }
            & img {
                @media screen and (max-width: 767px) {
                    border-radius: 10px;
                }
            }
        }
        .normal-table {
            th {
                background: #FFE3E8;
            }
        }
        .bg-title {
            margin: -72px -80px 48px;
            padding: 72px 80px 40px;
            font-size: 4rem;
            font-weight: bold;
            background: var(--_color) url(../images/bg_stock.png);
            color: #fff;
            position: relative;
            @media screen and (max-width: 767px) {
                font-size: 2.2rem;
                padding: 32px 24px;
                margin: -32px -24px 24px;
            }
            &:after {
                content: "";
                position: absolute;
                bottom: 18px;
                left: 0;
                width: 100%;
                height: 6px;
                border-top: 1px solid #CCA300;
                border-bottom: 2px solid #CCA300;
                @media screen and (max-width: 767px) {
                    bottom: 12px;
                }
            }
        }
    }
    .h3-title {
        margin-top: 1.5em;
        font-size: 3.2rem;
        font-weight: bold;
        margin-bottom: 0.5em;
        @media screen and (max-width: 767px) {
            font-size: 2rem;
        }
    }
    p {
        line-height: 2;
        &+&:not([class]) {
            margin-top: 0.5lh;
        }
    }
    .col-wrap {
        gap: 40px;
        &:not(:first-child) {
            margin-top: 60px;
            @media screen and (max-width: 767px) {
                margin-top: 30px;
            }
        }
        .btn-wrap {
            margin-top: 34px;
            @media screen and (max-width: 767px) {
                margin-top: 16px;
            }
            .btn {
                min-width: 100%;
            }
        }
    }
    .normal-list+p {
        margin-top: 0.5lh;
    }
    .red-center-hd {
        font-size: 2.4rem;
        font-weight: bold;
        text-align: center;
        line-height: 1.75;
        margin-bottom: 1.25em;
        color: #9A011C;
        @media screen and (max-width: 767px) {
            font-size: 1.6rem;
        }
        &.mini {
            margin-top: 1em;
            font-size: 2rem;
            @media screen and (max-width: 767px) {
                font-size: 1.6rem;
            }
        }
    }
    .exemption-img-01 {
        margin-bottom: 1em;
    }
}
.bd-title {
    font-size: 4rem;
    border-bottom: 1px solid currentColor;
    color: var(--_color);
    font-weight: bold;
    letter-spacing: 0.04em;
    padding-bottom: 0.6em;
    margin-bottom: 1.2em;
    display: grid;
    grid-template-columns: auto 1fr;
    @media screen and (max-width: 767px) {
        font-size: 2.2rem;
    }
    .unit {
        margin-right: 0.3em;
    }
    small {
        font-size: 0.6em;
    }
}
.blue-box {
    position: relative;
    background: #E4EFFF;
    border-radius: 10px;
    margin-top: 50px;
    .blue-box-label {
        min-width: 125px;
        width: fit-content;
        background: #276FCE;
        color: #fff;
        height: 42px;
        display: flex;
        align-items: baseline;
        justify-content: center;
        padding: 8px 20px;
        border-radius: 100px;
        margin-inline: auto;
        font-size: 2.6rem;
        gap: 0.2em;
        font-weight: bold;
        line-height: 1;
        position: absolute;
        top: 0;
        left: 50%;
        transform: translate(-50%, -30%);
        @media screen and (max-width: 767px) {
            font-size: 2rem;
            min-width: 80px;
            height: 36px;
            padding: 8px 14px;
        }
        .unit {
            font-size: 0.5em;
        }
    }
    .blue-box-header {
        text-align: center;
        font-size: 2.8rem;
        font-weight: bold;
        padding: 50px 20px 35px;
        border-bottom: 1px solid #C3CDDB;
        @media screen and (max-width: 767px) {
            padding: 36px 10px 10px;
            font-size: 1.8rem;
        }
    }
    .blue-box-body {
        padding: 26px 40px 40px;
        text-align: center;
        @media screen and (max-width: 767px) {
            padding: 20px;
        }
        .btn-wrap {
            margin-top: 24px;
        }
        .square-cards {
            margin-top: 24px;
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 20px 24px;
            @media screen and (max-width: 767px) {
                grid-template-columns: repeat(1, 1fr);
                gap: 12px;
                gap: 1.4rem;
            }
            &>li {
                border-radius: 10px;
                height: 87px;
                display: flex;
                justify-content: center;
                align-items: center;
                font-weight: bold;
                background: #fff;
                @media screen and (max-width: 767px) {
                    height: 60px;
                }
            }
        }
    }
}
.normal-table {
    margin-top: 1lh;
    width: 100%;
    &+.normal-list {
        margin-top: 1em;
    }
    th, td {
        font-size: 1.5rem;
        padding: 14px 24px;
        border: 1px solid #D9DBDE;
        line-height: 1.6;
        @media screen and (max-width: 767px) {
            font-size: 1.2rem;
            padding: 10px;
        }
    }
    th {
        width: 32%;
        background: #E4EFFF;
        font-weight: bold;
    }
    td {
        background: #fff;
    }
    &.tax {
        thead {
            th {
                width: auto;
            }
            th:first-child {
                width: 64%;
            }
            th:last-child {
                width: 18%;
            }
        }
        tbody {
            td:last-child {
                text-align: right;
            }
        }
    }
    &.area {
        tbody {
            th:first-child {
                width: 22%;
                vertical-align: top;
                @media screen and (max-width: 767px) {
                    width: 38%;
                }
            }
        }
    }
}
a.normal-link {
    display: flex;
    align-items: center;
    gap: 12px;
    font-weight: bold;
    &:after {
        content: "";
        width: 6px;
        height: 7px;
        background: #000;
        clip-path: polygon(100% 50%, 0 0, 0 100%);
    }
    &[target="_blank"]:after {
        content: "";
        display: inline-block;
        content: "";
        background: url(../images/icon_blank.svg) no-repeat center /12px auto;
        width: 12px;
        height: 10px;
        clip-path: none;
    }
    &[href*=".pdf"]:after {
        content: "";
        background: #000;
        mask: url(../images/icon_pdf.svg) no-repeat center / cover;
        width: 16px;
        height: 17px;
        clip-path: none;
    }
}
.anchor-link-box {
    margin-top: 48px;
    margin-bottom: 100px;
    display: flex;
    justify-content: center;
    gap: 24px;
    @media screen and (max-width: 767px) {
        margin-top: 24px;
        margin-bottom: 40px;
        flex-direction: column;
    }
    &>li {
        a {
            width: 344px;
            height: 120px;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            gap: 8px;
            padding: 10px 10px 20px;
            border-radius: 10px;
            background: #fff;
            position: relative;
            @media screen and (max-width: 767px) {
                width: 100%;
                height: 86px;
                gap: 4px;
            }
            &:before {
                content: "";
                position: absolute;
                bottom: 12px;
                left: 50%;
                width: 10px;
                height: 8px;
                background: #000;
                transform: translateX(-50%);
                clip-path: polygon(50% 100%, 0 0, 100% 0);
                @media screen and (max-width: 767px) {
                    bottom: 8px;
                }
            }
            .ttl {
                font-size: 2.4rem;
                font-weight: bold;
                @media screen and (max-width: 767px) {
                    font-size: 1.8rem;
                }
                .unit {
                    margin-right: 10px;
                }
            }
            .txt {
                font-size: 1.3rem;
                @media screen and (max-width: 767px) {
                    font-size: 1.1rem;
                }
            }
        }
    }
}
.text-link {
    color: var(--color-link);
    text-decoration: underline;
}
.normal-list {
    text-align: left;
    line-height: 2;
    &>li {
        margin-top: 5px;
        display: grid;
        grid-template-columns: auto 1fr;
        column-gap: 0.5em;
        em {
            font-weight: bold;
        }
        &:first-child {
            margin-top: 0;
        }
        &.red {
            color: #9A011C;
            p {
                font-size: 2rem;
            }
        }
        &::before {
            --_size: 0.5em;
            content: '';
            width: var(--_size);
            height: var(--_size);
            aspect-ratio: 1;
            margin-block: calc((1lh - var(--_size)) / 2);
            background-color: var(--_color, var(--color-link));
            border-radius: 50%;
        }
    }
}
.unit-list {
    margin-top: 1em;
    font-size: 1.3rem;
    line-height: 1.75;
    &.mini {
        font-size: 1.2rem;
    }
    &.normal {
        font-size: 1.5rem;
    }
    &>li {
        margin-top: 5px;
        display: grid;
        grid-template-columns: auto 1fr;
        column-gap: 0.25em;
        &:first-child {
            margin-top: 0;
        }
    }
    .bd-top {
        border-top: 1px solid #D2D2D2;
        margin-top: 1.5em;
        padding-top: 1.5em;
    }
}
.mini-table {
    margin-top: 20px;
    margin-inline: auto;
    background: #fff;
    width: min(100%, 382px);
    th, td {
        padding: 20px 16px;
        border: 1px solid #D9DBDE;
        @media screen and (max-width: 767px) {
            font-size: 1.2rem;
            padding: 10px;
        }
    }
    th {
        width: 100px;
        background: #F1F3F7;
    }
}
.center-h2 {
    text-align: center;
    line-height: 1.75;
    font-size: 3.2rem;
    font-weight: bold;
    margin-bottom: 24px;
    @media screen and (max-width: 767px) {
        font-size: 2.2rem;
    }
}
.hd-link-wrap {
    display: grid;
    grid-template: ". title nav" / 1fr auto 1fr;
    margin-top: 60px;
    margin-bottom: 32px;
    padding-bottom: 16px;
    border-bottom: 1px solid #CCCCCC;
    @media screen and (max-width: 767px) {
        grid-template:
            "title"
            "." 10px
            "nav" / 1fr;
    }
    h3 {
        text-align: center;
        grid-area: title;
        font-size: 4rem;
        font-weight: bold;
        line-height: 1.5;
    }
    ul {
        grid-area: nav;
        justify-content: end;
        align-items: end;
        gap: 8px;
    }
}
.archive-cat-list {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 16px;
    span,
    a {
        display: inline-block;
        font-size: 1.6rem;
        font-weight: bold;
        background: #fff;
        border-radius: 100px;
        padding: 4px 14px;
    }
    span {
        background: #000;
        color: #fff;
    }
}
.simulation-box {
    margin-top: 64px;
    width: min(800px, 100%);
    margin-inline: auto;
    @media screen and (max-width: 767px) {
        margin-top: 32px;
    }
}
.simulation-form {
    .form-label {
        display: inline-block;
        font-size: 3.2rem;
        font-weight: bold;
        margin-bottom: 0.6em;
        &.mini {
            font-size: 1.8rem;
        }
        @media screen and (max-width: 767px) {
            font-size: 2.2rem;
        }
    }
    .form-item {
        &:not(:first-child) {
            margin-top: 64px;
            @media screen and (max-width: 767px) {
                margin-top: 32px;
            }
        }
        &:has(.mini) {
            margin-top: 42px;
        }
    }
    .input-wrap {
        display: grid;
        grid-template-columns: 1fr auto;
        gap: 10px;
        font-size: 1.5rem;
        input {
            height: 56px;
            width: 100%;
            border: 1px solid #E5E5E5;
            border-radius: 10px;
            padding: 1em;
            background: #FAFAFA;
        }
        .input-unit {
            display: flex;
            justify-content: center;
            align-items: center;
            font-weight: bold;
        }
    }
    .select-wrap {
        width: min(420px, 100%);
        position: relative;
        &:after {
            content: "";
            position: absolute;
            top: 50%;
            right: 20px;
            width: 13px;
            height: 10px;
            background: #000;
            transform: translateY(-50%);
            clip-path: polygon(50% 100%, 0 0, 100% 0);
        }
    }
    .form-select {
        height: 56px;
        width: 100%;
        border: 1px solid #E5E5E5;
        background: #FAFAFA;
        border-radius: 10px;
        padding: 1em;
        appearance: none;
    }
    .form-description {
        margin-bottom: 1.5em;
    }
    .checkbox-group {
        display: flex;
        flex-direction: column;
        gap: 16px;
        .checkbox-label {
            padding: 1.25em 1.25em;
            background: #FAFAFA;
            border: 1px solid #E5E5E5;
            display: block;
            border-radius: 10px;
            display: grid;
            grid-template-columns: auto 1fr;
            gap: 1.25em;
            position: relative;
            cursor: pointer;
            @media screen and (max-width: 767px) {
                gap: 1em;
            }
            &:has(:checked)::after {
                content: '';
                position: absolute;
                transform: rotate(45deg);
                width: 8px;
                height: 12px;
                border: solid #000;
                border-width: 0 3px 3px 0;
                grid-row: 1 / 2;
                grid-column: 1 / 2;
                top: 5px;
                left: 33%;
            }
            input {
                width: 24px;
                aspect-ratio: 1;
                border: none;
                background: #E0E0E0;
                appearance: none;
                border-radius: 4px;
            }
        }
    }
    .info-link-wrap {
        margin-top: 1.25em;
    }
}
.white-radius.simulation-box {
    &+.simulation-result-box {
        margin-top: 154px;
        position: relative;
        @media screen and (max-width: 767px) {
            margin-top: 64px;
        }
        &:before {
            content: "";
            position: absolute;
            left: 50%;
            top: -80px;
            width: 33px;
            height: 20px;
            transform: translateX(-50%);
            background: #000;
            clip-path: polygon(50% 100%, 0 0, 100% 0);
            @media screen and (max-width: 767px) {
                top: -40px;
            }
        }
    }
}
.deduction-calc {
    display: grid;
    grid-template-columns: 1fr 50px 1fr 50px 1fr;
    @media screen and (max-width: 767px) {
        grid-template-columns: 1fr;
    }
    &+.unit-list {
        margin-top: 48px;
        @media screen and (max-width: 767px) {
            margin-top: 24px;
        }
    }
}
.deduction-calc-operator {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 4rem;
    @media screen and (min-width: 768px) {
        grid-row: 2;
        &.plus {
            grid-column: 2;
        }
        &.equal {
            grid-column: 4;
        }
    }
}
.deduction-calc-list {
    &>dt {
        font-size: 1.5rem;
        &:not(:first-child) {
            margin-top: 1.25em;
        }
    }
}
.deduction-calc-amount {
    font-size: 1.8rem;
    font-weight: bold;
}
.deduction-calc-item {
    display: grid;
    gap: 0;
    border: 1px solid #D9DBDE;
    @media screen and (min-width: 768px) {
        grid-template-rows: subgrid;
        grid-row: span 2;
    }
    .deduction-calc-title {
        background: #E3EFFF;
        font-size: 1.5rem;
        padding: 1em;
        text-align: center;
        font-weight: bold;
        background: #E3EFFF;
    }
    .deduction-calc-content {
        padding: 1.2em;
        text-align: center;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    &.is-total {
        --_color: var(--color-link);
        .deduction-calc-title {
            background: var(--_color);
            color: #fff;
            border-bottom: #D9DBDE 1px solid;
        }
        .deduction-calc-amount {
            font-size: 2.4rem;
            color: var(--_color);
        }
    }
}
.deduction_ttl {
    margin-top: 64px;
    margin-bottom: 24px;
    @media screen and (max-width: 767px) {
        margin-top: 32px;
        margin-bottom: 12px;
    }
}
.area-cards {
    margin-top: 32px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 40px;
    @media screen and (max-width: 767px) {
        grid-template-columns: 1fr;
        gap: 32px;
    }
    .area-cards-item {
        border-radius: 10px;
        background: var(--_color);
        color: #fff;
        &:nth-child(1) {
            --_color: #E64D49;
        }
        &:nth-child(2) {
            --_color: #F18035;
        }
        &:nth-child(3) {
            --_color: #32A545;
        }
        .area-cards-header {
            padding: 12px 16px;
            display: flex;
            /* display: grid; */
            grid-template:
                "unit ttl"
                "txt ttl" /
                auto 1fr;
            gap: 0 8px;
            align-items: center;
            position: relative;
            &:after {
                position: absolute;
                left: 50%;
                bottom: 0;
                transform: translate(-50%, 100%);
                content: "";
                clip-path: polygon(50% 50%, 0 0, 100% 0);
                background: var(--_color);
                width: 10px;
                height: 10px;
            }
            .unit {
                /* grid-area: unit; */
                color: var(--_color);
                background: #fff;
                width: 46px;
                aspect-ratio: 1;
                text-align: center;
                border-radius: 50%;
                em {
                    font-size: 3rem;
                    font-weight: bold;
                    margin-top: -5px;
                    display: inline-block;
                }
                small {
                    font-size: 1rem;
                    display: block;
                    line-height: 1;
                    margin-top: -8px;
                }
            }
            .title {
                /* grid-area: ttl; */
                font-size: 1.8rem;
                font-weight: bold;
            }
            .txt {
                /* grid-area: txt; */
                text-align: center;
                font-size: 1.2rem;
                margin-top: 5px;
            }
        }
        .area-cards-contents {
            img {
                width: 100%;
                height: auto;
            }
        }
        .area-cards-footer {
            padding: 12px 16px;
            text-align: center;
        }
    }
}
.base-amount-wrap {
    margin-top: 48px;
    display: grid;
    grid-template-columns: 112px 1fr;
    gap: 16px;
    @media screen and (max-width: 767px) {
        grid-template-columns: 1fr;
    }
    .base-amount-header {
        display: flex;
        align-items: center;
        justify-content: center;
        background: #FFE3E8;
        font-weight: bold;
    }
    .base-amount-contents {
        overflow: auto;
    }
    .base-table {
        width: 100%;
        --_color: #9A011C;
        color: #fff;
        table-layout: fixed;
        @media screen and (max-width: 767px) {
            width: 680px;
        }
        th, td {
            border: 1px solid #D9DBDE;
            padding: 1em;
        }
        th {
            text-align: center;
            &:first-child {
                width: 80px;
            }
        }
        thead {
            th {
                background: var(--_color);
            }
        }
        tbody {
            th {
                background: #FFE3E8;
                color: #000;
            }
            td {
                text-align: right;
                color: #000;
            }
        }
    }
}
.white-radius-wrap {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 40px;
    width: min(1080px, 100%);
    margin-inline: auto;
    @media screen and (max-width: 767px) {
        grid-template-columns: 1fr;
        gap: 0;
    }
    .white-radius {
        padding: 36px 36px 60px;
        text-align: center;
        &.red {
            background: #fff url(../images/bg_gift_box.png) no-repeat center;
        }
        &:nth-child(2n) {
            border-radius: 130px 10px 130px 10px;
            @media screen and (max-width: 767px) {
                border-radius: 64px 10px 64px 10px;
            }
        }
        .bg-title {
            padding: 26px 36px 46px;
            margin: -36px -36px 8px;
            text-align: center;
            font-size: 2.8rem;
            @media screen and (max-width: 767px) {
                padding: 16px 16px 24px;
                font-size: 2rem;
            }
            &.icon-hd {
                display: flex;
                align-items: center;
                justify-content: center;
                gap: 10px;
            }
            em {
                font-size: 4rem;
                font-weight: bold;
                margin-right: 5px;
                @media screen and (max-width: 767px) {
                    font-size: 3.2rem;
                }
            }
        }
        .gift-ttl {
            margin-top: 0;
            font-size: 2rem;
            font-weight: bold;
            line-height: 1.75;
        }
        .gift-txt {
            line-height: 1.75;
            text-align: left;
        }
    }
}
.doc-list {
    display: flex;
    flex-direction: column;
    gap: 16px;
    a {
        display: grid;
        grid-template-columns: 1fr auto;
        align-items: center;
        gap: 16px;
        padding: 1em 1.5em;
        border: 1px solid var(--color-link);
        color: var(--color-link);
        border-radius: 100px;
        font-size: 2.4rem;
        font-weight: bold;
        @media screen and (max-width: 767px) {
            font-size: 1.6rem;
        }
        &:after {
            content: "";
            background: url(../images/icon_pdf.svg) no-repeat center /cover;
            width: 20px;
            height: 21px;
        }
    }
}
.presentation-dl {
    margin-top: 24px;
    font-size: 1.5rem;
    dt {
        background: #FFE3E8;
        padding: 1em;
        font-weight: bold;
        text-align: center;
        border-radius: 10px;
        margin-bottom: 10px;
    }
}
.award-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
    gap: 10px;
    &>li {
        height: 92px;
        background: var(--_color);
        border-radius: 6px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        color: #fff;
        &:nth-child(1) {
            --_color: #DF365B;
        }
        &:nth-child(2) {
            --_color: #CF003A;
        }
        &:nth-child(3) {
            --_color: #C30135;
        }
        &:nth-child(4) {
            --_color: #C1003D;
        }
        &:nth-child(5) {
            --_color: #B3012F;
        }
        &:nth-child(6) {
            --_color: #99012A;
        }
        .ttl {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 6px;
            margin-bottom: 8px;
            &:before, &:after {
                display: inline-block;
                content: "";
                background: url(../images/icon_award_l.svg) no-repeat center;
                width: 8px;
                height: 20px;
            }
            &:after {
                background: url(../images/icon_award_r.svg) no-repeat center;
            }
        }
        .txt {
            font-weight: bold;
            em {
                font-size: 2rem;
                font-weight: bold;
            }
        }
    }
}
.every-list {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    @media screen and (max-width: 767px) {
        grid-template-columns: 1fr;
    }
    li {
        border: 1px solid #D9DBDE;
        border-radius: 10px;
        height: 87px;
        display: grid;
        place-items: center;
        font-weight: bold;
        @media screen and (max-width: 767px) {
            height: 60px;
        }
    }
}
.blue-area {
    background: #F7F8FA;
    border-radius: 10px;
    padding: 2em 2.5em;
    font-size: 1.5rem;
    margin-top: 1.5em;
    @media screen and (max-width: 767px) {
        font-size: 1.2rem;
        padding: 1em 1.5em;
    }
}
.formula-text {
    margin-top: 0.25em;
    margin-bottom: 0.75em;
    font-size: 2rem;
    font-weight: bold;
    color: #2770CE;
    @media screen and (max-width: 767px) {
        font-size: 1.6rem;
    }
    &:first-child {
        margin-top: 0;
    }
}
.fx-wrap {
    display: flex;
    gap: 60px;
    line-height: 1.75;
    text-align: center;
    @media screen and (max-width: 767px) {
        flex-direction: column;
        gap: 24px;
    }
    >* {
        flex: 1;
    }
    img {
        border-radius: 40px;
        @media screen and (max-width: 767px) {
            border-radius: 20px;
        }
    }
    .title {
        font-size: 2.4rem;
        font-weight: bold;
        margin-bottom: 1em;
        display: block;
        @media screen and (max-width: 767px) {
            font-size: 2rem;
            margin-bottom: 0.5em;
        }
    }
}
.about-mv {
    width: 100%;
    mask: linear-gradient(0deg, rgba(255, 255, 255, 0) 13%, rgba(0, 0, 0, 1) 14%), url(../images/mask_ellipse_bottom.svg) no-repeat bottom center / 100% auto;
    &:before {
        background: url(../images/mv_about.jpg) no-repeat center bottom /cover;
        @media screen and (max-width: 767px) {
            background-position: 70% bottom;
        }
    }
}
.project-mv {
    width: 100%;
    mask: linear-gradient(0deg, rgba(255, 255, 255, 0) 13%, rgba(0, 0, 0, 1) 14%), url(../images/mask_ellipse_bottom.svg) no-repeat bottom center / 100% auto;
    padding-bottom: 240px;
    color: #fff;
    position: relative;
    &.detail {
        background: rgba(0, 0, 0, 0.8);
        padding-bottom: 148px;
        /* background: url(../images/mv_project.jpg) no-repeat center top /100% auto; */
        mask: linear-gradient(0deg, rgba(255, 255, 255, 0) 200px, rgba(0, 0, 0, 1) 201px), url(../images/mask_ellipse_bottom.svg) no-repeat bottom center / 100% auto;
        @media screen and (max-width: 767px) {
            padding-bottom: 38px;
        }
        &::before {
            opacity: 0.8;
            filter: blur(10px);
        }
    }
    @media screen and (min-width: 767px) {
        .common-bg-text {
            font-size: 18rem;
        }
    }
    @media screen and (max-width: 767px) {
        padding-bottom: 100px;
    }
    &::before {
        z-index: -3;
        position: fixed;
        content: "";
        display: block;
        inset: 0px;
        background: url(../images/mv_project.jpg) no-repeat center top /100% auto;
        @media screen and (max-width: 767px) {
            background-size: auto 100%;
        }
    }
    hr {
        background: #fff;
        margin-bottom: 40px;
        @media screen and (max-width: 767px) {
            margin-bottom: 20px;
        }
    }
    .common-lead {
        margin-bottom: 500px;
        @media screen and (max-width: 767px) {
            margin-bottom: 40px;
        }
    }
}
.project-mv-box {
    color: #000;
    font-size: 1.8rem;
    text-align: center;
    font-weight: bold;
    padding: 72px;
    margin-bottom: 110px;
    background: rgba(255, 255, 255, 0.6);
    backdrop-filter: blur(10px);
    @media screen and (max-width: 767px) {
        padding: 24px;
        width: 90%;
        font-size: 1.6rem;
        margin-bottom: 80px;
    }
    p {
        line-height: 2.2;
        @media screen and (max-width: 767px) {
            line-height: 1.8;
        }
    }
}
.project-mv-sub {
    font-size: 3.2rem;
    text-align: center;
    font-weight: bold;
    padding: 0 40px;
    @media screen and (max-width: 767px) {
        font-size: 2rem;
    }
}
.project-mv-ttl {
    font-size: 4.8rem;
    text-align: center;
    font-weight: bold;
    padding: 0 40px;
    @media screen and (max-width: 767px) {
        margin-top: 10px;
        font-size: 2.8rem;
    }
}
.project-mv-img {
    text-align: center;
    margin-top: 42px;
    padding: 0 20px;
}
.project-point-section {
    padding-top: 30px;
    padding-bottom: 210px;
    @media screen and (max-width: 767px) {
        padding-bottom: 80px;
    }
    --inner-width: 1080px;
    &:before {
        background: #F1F3F7 url(../images/map_project.png) no-repeat center;
    }
    h2 {
        font-size: 4.8rem;
        font-weight: bold;
        text-align: center;
        margin-bottom: 0.6em;
        @media screen and (max-width: 767px) {
            font-size: 3rem;
        }
    }
    h3 {
        font-weight: bold;
        text-align: center;
        font-size: 2.4rem;
        margin-top: 1.5em;
    }
    hr {
        background: #CCCCCC;
        margin: 45px 0;
        @media screen and (max-width: 767px) {
            margin: 28px 0;
        }
    }
}
.point-nav-link {
    display: flex;
    justify-content: center;
    gap: 24px;
    margin-top: 36px;
    @media screen and (max-width: 767px) {
        flex-direction: column;
        gap: 12px;
    }
    li {
        flex: 1;
        max-width: 392px;
        &:nth-child(1) {
            --_color: var(--point-color1);
        }
        &:nth-child(2) {
            --_color: var(--point-color2);
        }
        &:nth-child(3) {
            --_color: var(--point-color3);
        }
        a {
            position: relative;
            height: 88px;
            display: grid;
            grid-template-columns: auto auto;
            justify-content: center;
            align-items: center;
            gap: 15px;
            border-radius: 10px;
            background: var(--_color);
            color: #fff;
            font-size: 1.8rem;
            font-weight: bold;
            &.white {
                background: #fff;
                color: #000;
                .unit {
                    background: #000;
                    color: #fff;
                    border: none;
                }
                &:after {
                    background: #000;
                }
            }
            @media screen and (max-width: 767px) {
                gap: 10px;
                height: 54px;
                font-size: 1.6rem;
            }
            .unit {
                border: 1px solid #fff;
                width: 1.75em;
                height: 1.75em;
                line-height: 1.85;
                text-align: center;
                border-radius: 50%;
                font-size: 1.3rem;
            }
            &:after {
                content: "";
                width: 10px;
                height: 8px;
                position: absolute;
                left: calc(50% - 5px);
                bottom: 10px;
                clip-path: polygon(50% 100%, 0 0, 100% 0);
                background: #fff;
                @media screen and (max-width: 767px) {
                    bottom: 6px;
                    width: 8px;
                    height: 6px;
                }
            }
        }
    }
}
.project-section {
    padding-top: 64px;
    padding-bottom: 64px;
    @media screen and (max-width: 767px) {
        padding-bottom: 0;
    }
    .white-radius:first-child {
        margin-top: 0;
    }
    .white-radius:nth-child(1) {
        --_color: var(--point-color1);
    }
    .white-radius:nth-child(2) {
        --_color: var(--point-color2);
    }
    .white-radius:nth-child(3) {
        --_color: var(--point-color3);
    }
}
.top-mask-section.greeting-section {
    &:before {
        background: none;
    }
}
.greeting-section {
    color: #fff;
    padding-top: 48px;
    padding-bottom: 80px;
    @media screen and (max-width: 767px) {
        padding-top: 24px;
        padding-bottom: 40px;
    }
}
.greeting-hd {
    font-family: var(--font-hel);
    font-weight: 300;
    font-size: 10rem;
    line-height: 1.5;
    margin-bottom: 48px;
    @media screen and (max-width: 767px) {
        font-size: 5rem;
        margin-bottom: 2rem;
    }
}
.greeting-message {
    padding: 140px 0 140px 0;
    position: relative;
    clip-path: inset(0);
    --inner-width: 1184px;
    @media screen and (max-width: 767px) {
        padding: 30px 0 60% 0;
    }
    &:before {
        content: "";
        background: url(../images/bg_greeting.jpg) no-repeat right bottom /100% auto;
        object-fit: cover;
        /* position: fixed; */
        position: absolute;
        inset: 0;
        z-index: -1;
        @media screen and (max-width: 767px) {
            background-size: 140% auto;
            background-position: right bottom;
            position: absolute;
        }
    }
}
.greeting-about {
    margin-top: 100px;
    @media screen and (max-width: 767px) {
        margin-top: 0px;
        padding-top: 60px;
        z-index: 0;
        position: relative;
        &:before {
            content: "";
            position: absolute;
            inset: 0;
            background: url(../images/bg_blue.png) no-repeat top / cover;
            z-index: -2;
        }
    }
    .greeting-about-hd {
        font-size: 4.8rem;
        font-weight: bold;
        text-align: center;
        margin-bottom: 0.8em;
        @media screen and (max-width: 767px) {
            font-size: 2.8rem;
        }
    }
    .lead-center {
        font-size: 1.8rem;
        line-height: 2.2;
        @media screen and (max-width: 767px) {
            line-height: 2;
            font-size: 1.5rem;
        }
    }
    .chairperson {
        margin-top: 58px;
        display: grid;
        grid-template-columns: 398px 558px;
        gap: 64px;
        position: relative;
        @media screen and (max-width: 767px) {
            grid-template-columns: 1fr;
            margin-top: 40px;
            gap: 24px;
        }
        &:before {
            content: "";
            position: absolute;
            top: -90px;
            left: 50%;
            transform: translateX(-50%);
            place-content: center;
            clip-path: circle(50%);
            background: url(../images/bg_circle_sky.png) no-repeat center /100% auto;
            width: 1132px;
            height: 1132px;
            z-index: -1;
        }
        .img {
            text-align: center;
            img {
                border-radius: 80px;
                @media screen and (max-width: 767px) {
                    border-width: 20px;
                    max-width: 70%;
                }
            }
        }
        .text-wrap {
            padding: 12px 0;
            line-height: 2;
            .name {
                font-size: 3.2rem;
                font-weight: bold;
            }
            .sub {
                font-size: 1.2rem;
            }
            .ttl {
                font-size: 3rem;
                font-weight: bold;
                margin-top: 1em;
                margin-bottom: 1em;
                @media screen and (max-width: 767px) {
                    font-size: 2rem;
                }
            }
            .txt {
                font-size: 1.5rem;
            }
        }
    }
}
.place-list,
.member-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(312px, 1fr));
    gap: 32px;
    @media screen and (max-width: 767px) {
        grid-template-columns: 1fr;
        gap: 16px;
    }
    &>li {
        padding: 24px;
        border-radius: 10px;
        background: #F1F3F7;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        text-align: center;
        gap: 8px;
        .name {
            font-size: 2.4rem;
            font-weight: bold;
            line-height: 1.5;
        }
        .en,
        .pos {
            margin-top: 0 !important;
            font-size: 1.2rem;
            line-height: 1.8;
        }
    }
}
.anniversary2032-section {
    margin-top: 100px;
    padding-top: 154px;
    position: relative;
    @media screen and (max-width: 767px) {
        margin-top: 80px;
        padding: 60px 20px 0;
    }
    &:before {
        content: "";
        position: absolute;
        top: 0px;
        left: 50%;
        transform: translateX(-50%);
        place-content: center;
        clip-path: circle(50%);
        background: url(../images/bg_circle_sky.png) no-repeat center /100% auto;
        width: 1132px;
        height: 1132px;
        z-index: -1;
    }
    .anniversary2032-hd {
        text-align: center;
        font-family: var(--font-hel);
        font-size: 10rem;
        font-weight: 400;
        @media screen and (max-width: 767px) {
            font-size: 4rem;
        }
    }
    .anniversary2032-lead {
        text-align: center;
        font-size: 3.2rem;
        margin-top: 10px;
        font-weight: bold;
        @media screen and (max-width: 767px) {
            font-size: 1.8rem;
        }
    }
}
.anniversary-hd {
    font-size: 2.4rem;
    font-weight: bold;
    display: flex;
    align-items: center;
    gap: 10px;
    padding-bottom: 0.6em;
    margin-bottom: 2.5em;
    border-bottom: #000 1px solid;
    @media screen and (max-width: 767px) {
        font-size: 2rem;
        margin-bottom: 1.5em;
    }
    &:not(:first-child) {
        margin-top: 5em;
        @media screen and (max-width: 767px) {
            margin-top: 2em;
        }
    }
    &:before {
        display: inline-block;
        content: "";
        background: url(../images/icon_w_m.png) center /contain;
        width: 20px;
        height: 30px;
    }
}
.statement-logo {
    text-align: center;
    img {
        @media screen and (max-width: 767px) {
            width: 60px;
        }
    }
}
.statement-lead {
    margin-top: 1.5em;
    font-size: 3rem;
    text-align: center;
    font-weight: bold;
    @media screen and (max-width: 767px) {
        font-size: 2.4rem;
        margin-top: 1em;
    }
}
.statement-ttl {
    text-align: center;
    font-family: var(--font-hel);
    font-size: 5.6rem;
    margin-bottom: 0.5em;
    @media screen and (max-width: 767px) {
        font-size: 2.4rem;
    }
}
.statement-text {
    text-align: center;
    font-size: 1.8rem;
    @media screen and (max-width: 767px) {
        font-size: 1.5rem;
    }
    &+& {
        margin-top: 2.8em;
    }
}
.gl-img {
    margin: 40px 0;
    &:last-child {
        margin-bottom: 0;
    }
}
.topics-box {
    border: 1px solid var(--_color);
    border-radius: 10px;
    display: grid;
    grid-template-columns: auto 1fr;
    @media screen and (max-width: 767px) {
        grid-template-columns: 1fr;
    }
    &+& {
        margin-top: 12px;
    }
    .topics-box-title {
        border-right: 1px solid var(--_color);
        color: var(--_color);
        display: flex;
        justify-content: center;
        align-items: center;
        font-weight: bold;
        font-size: 1.5rem;
        padding: 12px 20px;
        @media screen and (max-width: 767px) {
            border-right: none;
            border-bottom: 1px solid var(--_color);
            padding: 8px;
        }
    }
    .topics-box-body {
        padding: 12px 20px;
        &.col2 {
            display: grid;
            grid-template-columns: 1fr 190px;
            align-items: center;
            @media screen and (max-width: 767px) {
                grid-template-columns: 1fr;
                gap: 12px;
            }
            .btn {
                min-width: 100%;
                text-align: left;
            }
        }
        .normal-list {
            &>li {
                margin-top: 0;
            }
        }
        .btn-wrap {
            margin-top: 0;
        }
    }
}
.qa-h2 {
    font-weight: bold;
    font-size: 3.2rem;
    margin-bottom: 1em;
    margin-top: 2em;
    @media screen and (max-width: 767px) {
        font-size: 2.2rem;
    }
    &:first-child {
        margin-top: 0;
    }
}
.soon-box {
    background: #DFE2E8;
    color: #fff;
    text-align: center;
    height: 240px;
    font-size: 5rem;
    font-family: var(--font-hel);
    font-weight: 300;
    display: grid;
    place-content: center;
    border-radius: 10px;
    @media screen and (max-width: 767px) {
        font-size: 3rem;
        height: 120px;
    }
}
.wpulike-heart .wp_ulike_general_class {
    background: #fff;
}
.senior-section {
    margin-top: -150px;
    padding-bottom: 260px;
    @media screen and (max-width: 767px) {
        padding-bottom: 100px;
    }
    &:before {
        inset: 40px 0 0;
        background: #F1F3F7 url(../images/bd_shs.png) repeat-x top 1720px center /auto 114px;
    }
    .box-lead {
        width: min(1080px, 100%);
        margin-inline: auto;
        background: url(../images/bg_green.png) no-repeat center / cover;
        padding: 72px 30px;
        text-align: center;
        font-weight: bold;
        border-radius: 10px 130px 10px 130px;
        color: #fff;
        @media screen and (max-width: 767px) {
            padding: 42px 20px;
            border-radius: 10px 64px 10px 64px;
        }
        .ttl {
            font-size: 3.2rem;
            margin-bottom: 30px;
            @media screen and (max-width: 767px) {
                font-size: 2rem;
            }
        }
        .lead {
            font-size: 1.8rem;
            line-height: 2.2;
            @media screen and (max-width: 767px) {
                font-size: 1.3rem;
            }
        }
    }
    hgroup {
        text-align: center;
        h2 {
            font-weight: bold;
            font-size: 4.8rem;
            margin-bottom: 32px;
            line-height: 1.25;
            @media screen and (max-width: 767px) {
                font-size: 3.2rem;
            }
        }
        p {
            line-height: 2;
        }
    }
}
.bd-type2 {
    margin-top: 82px;
    position: relative;
    margin-bottom: 64px;
    @media screen and (max-width: 767px) {
        margin-top: 60px;
        margin-bottom: 24px;
    }
    .hd-main {
        font-family: var(--font-hel);
        font-size: 10rem;
        font-weight: 200;
        @media screen and (max-width: 767px) {
            font-size: 3.6rem;
        }
    }
    .hd-sub {
        font-size: 2.4rem;
        margin-left: 1em;
        font-weight: bold;
        @media screen and (max-width: 767px) {
            font-size: 1.4rem;
        }
    }
    &:after {
        position: absolute;
        content: "";
        left: 0;
        bottom: 0;
        right: 0;
        background: #000;
        height: 1px;
    }
}
.senior-height-message {
    display: grid;
    grid-template-columns: 318px 1fr;
    gap: 64px;
    @media screen and (max-width: 767px) {
        grid-template-columns: 1fr;
        gap: 32px;
    }
    .senior-height-message-img {
        font-weight: bold;
        @media screen and (max-width: 767px) {
            margin: 0 40px;
        }
        img {
            border-radius: 320px;
        }
        figcaption {
            margin-top: 30px;
            text-align: center;
        }
        .pos {
            font-size: 1.5rem;
            display: block;
        }
        .name {
            font-size: 3.2rem;
            display: block;
        }
    }
    .senior-height-message-text {
        background: var(--donation-colorC);
        border-radius: 10px;
        position: relative;
        z-index: 0;
        padding: 80px 64px;
        line-height: 2;
        @media screen and (max-width: 767px) {
            padding: 40px 20px;
            font-size: 1.4rem;
        }
        p+p {
            margin-top: 1.5em;
        }
        &:before {
            content: "";
            position: absolute;
            inset: 0;
            background: #fff;
            z-index: -1;
            border-radius: 10px 130px 10px 130px;
            @media screen and (max-width: 767px) {
                border-radius: 10px 64px 10px 64px;
            }
        }
    }
}
.target-box {
    background: var(--donation-colorC);
    border-radius: 10px;
    position: relative;
    z-index: 0;
    padding: 34px 80px 80px;
    margin-top: 46px;
    line-height: 2;
    @media screen and (max-width: 767px) {
        padding: 20px;
    }
    &:before {
        content: "";
        position: absolute;
        inset: 0;
        background: #fff;
        z-index: -1;
        border-radius: 10px 130px 10px 130px;
        @media screen and (max-width: 767px) {
            border-radius: 10px 64px 10px 64px;
        }
    }
    h3 {
        text-align: center;
        font-weight: bold;
        font-size: 2.8rem;
        margin-bottom: 24px;
    }
    .name {
        color: var(--donation-colorC);
    }
}
.top-mask-section.photo-section {
    padding: 60px 0 240px;
    z-index: 0;
    --inner-width: 870px;
    @media screen and (max-width: 767px) {
        padding: 42px 0 90px;
    }
    &:before {
        background: url(../images/bg_blue2.png) no-repeat top 100px center / 1200px auto, url(../images/map_donation.png) no-repeat center / 1164px auto, url(../images/bg_blue.png) no-repeat center / cover;
        z-index: -2;
    }
    &:after {
        position: absolute;
        inset: 740px 0 0;
        content: "";
        background: #E8ECF2;
        mask: url(../images/mask_ellipse.svg) no-repeat center top / 100% auto;
        z-index: -2;
    }
    .interaction-wrap {
        hgroup {
            color: #fff;
        }
        h3 {
            text-align: center;
            font-size: 4.8rem;
            font-weight: bold;
            margin-bottom: 24px;
            @media screen and (max-width: 767px) {
                font-size: 3.2rem;
            }
        }
        p {
            line-height: 2;
        }
    }
}
.img-slider {
    margin-top: 46px;
    position: relative;
    padding-bottom: 50px;
    @media screen and (max-width: 767px) {
        margin-top: 100px;
    }
    img {
        border-radius: 10px;
    }
    .caption {
        padding: 16px 100px 16px 40px;
        font-size: 2rem;
        font-weight: bold;
        position: absolute;
        bottom: -60px;
        left: 0;
        @media screen and (max-width: 767px) {
            font-size: 1.6rem;
            padding: 10px 90px 10px 30px;
        }
        &:before {
            content: "";
            position: absolute;
            left: 20px;
            top: -44px;
            bottom: 0;
            width: 4px;
            background: var(--donation-colorC);
            border-radius: 4px;
            @media screen and (max-width: 767px) {
                left: 10px;
            }
        }
    }
    .slide-pagination {
        position: absolute;
        right: 22px;
        bottom: 0;
        left: auto;
        width: 80px;
        padding: 5px;
        background: var(--donation-colorC);
        height: 50px;
        border-radius: 0 0 10px 10px;
        display: flex;
        font-size: 1.5rem;
        padding-top: 10px;
        color: #fff;
        align-items: baseline;
        .swiper-pagination-current {
            font-size: 2.4rem;
            font-weight: bold;
            @media screen and (max-width: 767px) {
                font-size: 2rem;
            }
        }
        .swiper-pagination-total {
            margin-left: 5px;
        }
    }
}
.thumbnail-slider-wrap {
    position: relative;
    padding: 0 60px;
    margin: 0 -60px;
    .button-prev, .button-next {
        position: absolute;
        width: 40px;
        height: 40px;
        top: 50%;
        transform: translateY(-50%);
        z-index: 2;
        cursor: pointer;
    }
    .button-prev {
        left: 0;
        background: url(../images/icon_nav_left.svg) no-repeat center /contain;
    }
    .button-next {
        right: 0;
        background: url(../images/icon_nav_right.svg) no-repeat center /contain;
    }
}
.thumbnail-slider {
    margin-top: 30px;
    position: relative;
    .is-active {
        img {
            border: 3px solid var(--donation-colorC);
        }
    }
    img {
        cursor: pointer;
        border-radius: 10px;
    }
}
.overview-section {
    padding: 30px 0 140px;
    z-index: 0;
    @media screen and (max-width: 767px) {
        padding-bottom: 40px;
    }
    &:before {
        background: #F1F3F7;
    }
    hgroup {
        text-align: center;
        h2 {
            font-weight: bold;
            font-size: 4.8rem;
            margin-bottom: 42px;
            line-height: 1.25;
            @media screen and (max-width: 767px) {
                font-size: 3.2rem;
            }
        }
        p {
            line-height: 2;
        }
    }
}
.overview-table {
    table {
        width: 100%;
        border-bottom: 1px solid #CED3DB;
        tr, th, td {
            @media screen and (max-width: 767px) {
                display: block;
            }
        }
        th, td {
            border-top: 1px solid#CED3DB;
        }
        th {
            padding: 30px 48px;
            font-size: 2rem;
            font-weight: 600;
            width: 310px;
            vertical-align: top;
            @media screen and (max-width: 767px) {
                width: 100%;
                padding: 16px 0 0;
                font-size: 1.4rem;
            }
            span {
                display: inline-block;
                padding: 2px 24px;
                background: var(--donation-colorC);
                color: #fff;
                border-radius: 100px;
            }
        }
        td {
            padding: 24px 48px;
            line-height: 2;
            @media screen and (max-width: 767px) {
                border-top: none;
                padding: 0 0 10px;
                font-size: 1.4rem;
            }
            strong {
                font-size: 2.4rem;
                font-weight: bold;
                @media screen and (max-width: 767px) {
                    font-size: 1.8rem;
                }
            }
            .em-lead {
                font-weight: bold;
                font-size: 2rem;
                @media screen and (max-width: 767px) {
                    font-size: 1.4rem;
                }
            }
            .notice-text {
                font-size: 1.2rem;
                margin-top: 0;
            }
        }
    }
}
.return-gift-wrap {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 40px;
    margin-top: 30px;
    margin-bottom: 10px;
    @media screen and (max-width: 767px) {
        grid-template-columns: 1fr;
        gap: 24px;
    }
    .return-gift {
        background: #fff;
        border-radius: 10px;
        .bg-title {
            padding: 22px 32px 16px 32px;
            border-bottom: 1px solid var(--donation-colorC);
            font-size: 1.8rem;
            font-weight: bold;
            line-height: 1;
            @media screen and (max-width: 767px) {
                padding: 20px 60px;
            }
            .txt {
                display: flex;
                justify-content: space-between;
                align-items: end;
                strong {
                    color: var(--donation-colorC);
                }
                em {
                    font-size: 3.2rem;
                    font-weight: bold;
                }
            }
        }
        .gift-img {
            padding: 10px 50px;
            @media screen and (max-width: 767px) {
                padding: 20px 40px;
            }
        }
        .gift-ttl {
            text-align: center;
            font-weight: bold;
            line-height: 1.75;
        }
        .gift-txt {
            padding: 10px 38px 40px;
            line-height: 1.75;
        }
    }
}
.topics-detail {
    --inner-width: 1080px;
    padding: 40px 0;
    line-height: 2;
    font-size: 1.5rem;
    letter-spacing: 0.04em;
    &.point02 {
        --_color: var(--point-color2);
    }
    &.point03 {
        --_color: var(--point-color3);
    }
    .bd-title {
        color: var(--_color);
        font-size: 4.8rem;
        padding-bottom: 0.3em;
        line-height: 1.5;
        @media screen and (max-width: 767px) {
            font-size: 2rem;
        }
    }
    .topics-detail-entry-box {
        background: var(--_color);
        padding: 60px 80px 100px;
        border-radius: 10px;
        position: relative;
        z-index: 0;
        @media screen and (max-width: 767px) {
            padding: 30px 20px 40px;
            font-size: 1.3rem;
        }
        &:before {
            position: absolute;
            inset: 0;
            z-index: -1;
            content: "";
            background: #fff;
            border-radius: 10px 130px 10px 130px;
            @media screen and (max-width: 767px) {
                border-radius: 10px 64px 10px 64px;
            }
        }
        h4 {
            font-size: 2.4rem;
            font-weight: bold;
            padding-bottom: 10px;
            border-bottom: 1px solid #000;
            margin-bottom: 30px;
            line-height: 1.6;
            @media screen and (max-width: 767px) {
                font-size: 1.8rem;
            }
            &:not(:first-child) {
                margin-top: 60px;
                @media screen and (max-width: 767px) {
                    margin-top: 24px;
                }
            }
        }
        figure {
            text-align: center;
            &:not(:first-child) {
                margin-top: 40px;
                @media screen and (max-width: 767px) {
                    margin-top: 24px;
                }
            }
        }
    }
}
.topics-hd {
    display: grid;
    grid-template:
        "num lead"
        "num ttl" /145px 1fr;
    gap: 5px 20px;
    margin: 0 -80px 46px;
    padding-bottom: 32px;
    padding-right: 80px;
    border-bottom: 4px solid var(--_color);
    line-height: 1.5;
    &:not(:has(.num)) {
        grid-template:
            ". lead"
            ". ttl" /60px 1fr;
    }
    @media screen and (max-width: 767px) {
        grid-template:
            "num lead"
            "num ttl" /3.5em 1fr;
        margin: 0 -20px 32px;
        padding-right: 10px;
        gap: 5px 10px;
        padding-bottom: 16px;
        &:not(:has(.num)) {
            grid-template:
                ". lead"
                ". ttl" /10px 1fr;
        }
    }
    .num {
        grid-area: num;
        font-size: 5rem;
        font-family: var(--font-hel);
        background: var(--_color);
        color: #fff;
        border-radius: 0 5px 5px 0;
        padding-left: 80px;
        display: flex;
        align-items: center;
        @media screen and (max-width: 767px) {
            padding-left: 10px;
            font-size: 2.4rem;
        }
    }
    .lead {
        grid-area: lead;
        font-size: 2rem;
        font-weight: bold;
        line-height: 1.25;
        @media screen and (max-width: 767px) {
            font-size: 1.4rem;
        }
    }
    .ttl {
        grid-area: ttl;
        font-size: 3.2rem;
        font-weight: bold;
        line-height: 1.5;
        @media screen and (max-width: 767px) {
            font-size: 1.8rem;
        }
    }
}
.topics-note {
    margin-top: 80px;
    border: 1px solid var(--_color);
    border-radius: 10px;
    padding: 32px 50px 48px;
    @media screen and (max-width: 767px) {
        padding: 16px 20px 20px;
        margin-top: 40px;
    }
    .hd {
        font-size: 2rem;
        font-weight: bold;
        color: var(--_color);
        margin-bottom: 24px;
        @media screen and (max-width: 767px) {
            font-size: 1.6rem;
            margin-bottom: 8px;
        }
    }
    .topics-note-fl {
        overflow: hidden;
        &.right {
            @media screen and (max-width: 767px) {
                display: flex;
                flex-direction: column;
            }
            figure {
                float: right;
                margin-left: 30px;
                img {
                    border-radius: 16px;
                }
                @media screen and (max-width: 767px) {
                    float: none;
                    margin: 0 0 20px;
                    img {
                        width: 100%;
                    }
                }
            }
        }
        .flex-text {
            overflow: hidden;
        }
    }
}
@media screen and (min-width: 768px) {
    html[lang="en"] #footer .cv-side-first:not(.open) {
        transform: translate(460px, 50%);
    }
}
@media screen and (max-width: 767px) {
    html[lang="en"] #footer .cv-side-first:not(.open) {
        transform: translate(330px, 50%);
    }
}
.white-note {
    background: #fff;
    padding: 60px;
    border-radius: 10px;
    @media screen and (max-width: 767px) {
        padding: 24px;
    }
}
.page-video-wrap {
    width: 100%;
    position: relative;
    video {
        width: 100%;
        vertical-align: middle;
    }
    .movie-play {
        position: absolute;
        inset: 0;
        background: url(../images/icon_movie_play.svg) no-repeat center / 100px auto;
    }
}
.archive-col-wrap {
    display: grid;
    grid-template: ". mon search" /1fr auto 1fr;
    gap: 20px;
    @media screen and (max-width: 767px) {
        grid-template:
            "mon" "search" 1fr;
    }
    .archive-cat-list {
        grid-area: mon;
    }
    .right-col {
        grid-area: search;
        display: flex;
        justify-content: end;
    }
}
.search-col-wrap {
    display: flex;
    text-align: right;
    border-radius: 4px;
    border: 1px solid #CCCCCC;
    overflow: hidden;
    background: #fff;
    .search-form__input {
        padding: 4px 8px;
        border: none;
        border-radius: 0;
        background: none;
    }
    .search-form__button {
        background: #000;
        color: #fff;
        padding: 4px 12px;
    }
}
@media screen and (min-width: 768px) {
    html[lang="en"] #footer .cv-side-first:not(.open) {
        transform: translate(460px, calc(50% + 160px));
    }
}

@media screen and (min-width: 768px) {
    html[lang="en"] #footer .cv-side-first .cv-side-nav {
        width:420px;
    }
}

@media screen and (max-width: 767px) {
    html[lang="en"] #footer .cv-side-first:not(.open) {
        transform: translate(324px, calc(50% + 35px));
    }
}

@media screen and (max-width: 767px) {
    html[lang="en"] #footer .cv-side-first .cv-side-nav {
        width:310px;
    }
}
body.is-movie .concept-movie-view {
    opacity: 0;
}