/*============================
// MARK: フォント
//============================*/
@font-face {
    font-family: 'local Zen Kaku Gothic New';
    font-weight: 400;
    font-style: normal;
    src: local('ZenKakuGothicNew-Regular');
}
@font-face {
    font-family: 'local Zen Kaku Gothic New';
    font-weight: 500;
    font-style: normal;
    src: local('ZenKakuGothicNew-Medium');
}
@font-face {
    font-family: 'local Zen Kaku Gothic New';
    font-weight: 700;
    font-style: normal;
    src: local('ZenKakuGothicNew-Bold');
}

@font-face {
    font-family: 'local Shippori Mincho B1';
    font-weight: 500;
    font-style: normal;
    src: local('ShipporiMinchoB1-Medium');
}
@font-face {
    font-family: 'local Shippori Mincho B1';
    font-weight: 600;
    font-style: normal;
    src: local('ShipporiMinchoB1-SemiBold');
}
@font-face {
    font-family: 'local Shippori Mincho B1';
    font-weight: 700;
    font-style: normal;
    src: local('ShipporiMinchoB1-Bold');
}

/*============================
// MARK: 変数
//============================*/
/* バリアブルコレクション - Mode 1 */
:where(:root) {
    /* color */
    --color-text-primary: #333;
    --color-neutral-white: #ffffff;
    --color-foreground-main--gold: #cbba16;
    --color-foreground-sub--green: #55bd72;
    --color-foreground-sub--indigo: #515aaf;
    --color-foreground-sub--pink: #d55176;
    --color-foreground-text--navy-900: #1c2a42;
    --color-foreground-text--deep-blue-900: #0F1E96;
    --color-foreground-text--gray-700: #333333;
    --color-background-separator: #cccccc;
    --color-background-base--creamlight: #fefbdf;
    --color-background-base--ivory: #f4f3e9;
    --color-foreground-text--gray-400: #777777;
    --color-foreground-text--link: #008ddc;
    --color-foreground-marker: #ffea48;
    /* transition */
    /* transition */
    --opacity-hover: 0.6;
    --transition-duration-normal: 0.6s;
    /* gradient */
    --gradation-sunlight-text: linear-gradient(90deg, #515ab0 0%, #796f0b 50%, #cbba16 100%);
    --gradation-sunlight-fill: linear-gradient(90deg, #4d57b2 0%, #d7c950 100%);
    --gradation-lavender: linear-gradient(90deg, #515aaf 0%, #9fa3cb 100%);
    --gradation-gold: linear-gradient(90deg, #e0cc0c 0%, #f9be28 100%);
    --gradation-green: linear-gradient(90deg, #54bd72 0%, #9dcc6e 100%);
    /* shadow */
    --drop-shadow-normal: 0 0 7px color-mix(in oklch, #000 30%, transparent);
    --drop-shadow-small: 0 0 12px color-mix(in oklch, #000 8%, transparent);
    --drop-shadow-medium: 0 4px 16px color-mix(in oklch, #000 8%, transparent);
    /* font size */
    --font-fontsize-h1: 32px;
    --font-fontsize-h2: 26px;
    --font-fontsize-h3: 22px;
    --font-fontsize-h4: 18px;
    --font-fontsize-p: 16px;
    --font-fontsize-p--botton: 17px;
    --font-fontsize-p--CTA: 20px;
    --font-fontsize-p--caption: 14px;
    --font-fontsize-p---list-table: 16px;
    /* radius */
    --radius-normal: 8px;
    --radius-small: 4px;
    --radius-full: 999px;
    /* font */
    --font-Font-Awesome-Pro: 'Font Awesome 6 Pro', sans-serif;
    --font-Font-Awesome-Brands: 'Font Awesome 6 Brands', sans-serif;
    --font-Zen-Kaku-Gothic-New: 'local Zen Kaku Gothic New', 'Zen Kaku Gothic New', sans-serif;
    --font-Shippori-Mincho-B1: 'local Shippori Mincho B1', 'Shippori Mincho B1', sans-serif;
    /* content width */
    --content-width-Width_base: 1000px;
    --content-width-Width_large: 1380px;
    --content-width-Width_medium: 680px;
    --padding-side-sp: 20px;
    --padding-side-pc: 60px;
}

/*============================
// MARK: 共通
//============================*/
body.features_lp {
    font-family: var(--font-Zen-Kaku-Gothic-New);
    font-weight: 400;
    font-size: var(--font-fontsize-p);
    line-height: 1.5;
    letter-spacing: 0.05em;
    color: var(--color-foreground-text--navy-900);
    .global_inner {
        max-width: calc(var(--content-width-Width_base) + var(--padding-side-sp) * 2);
        padding-inline: var(--padding-side-sp);
    }
    .global_wrapper {
        padding-top: var(--_header-height, 70px);
    }
    .global_group {
        overflow: hidden;
    }
    svg {
        display: block;
        width: 100%;
        height: 100%;
    }

    @media screen and (min-width: 768px) {
        .global_inner {
            max-width: calc(var(--content-width-Width_base) + var(--padding-side-pc) * 2);
            padding-inline: var(--padding-side-pc);
        }
    }
}

/*============================
// MARK: ヘッダー
//============================*/
.features_lp_header {
    height: auto;
    box-shadow: none;
    .inner {
        padding-block: 13px;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 4px;
        .pc_header {
            position: fixed;
            right: 0;
            bottom: 0;
            width: min(100%, 540px);
            .list {
                display: grid;
                grid-template-columns: 100fr 100fr 175fr;
                .item {
                    width: 100%;
                    transition: opacity var(--transition-duration-normal);
                    .link {
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        flex-direction: column;
                        width: 100%;
                        height: 100%;
                        padding-block: 5px 7px;
                        text-decoration: none;
                        .icon {
                            display: block;
                            width: 34px;
                            height: 30px;
                            flex-shrink: 0;
                            img {
                                width: 100%;
                                height: 100%;
                                object-fit: contain;
                            }
                        }
                        .text {
                            display: block;
                            font-weight: 700;
                            font-size: 13px;
                            line-height: calc(19 / 13);
                            letter-spacing: 0.05em;
                            color: var(--color-neutral-white);
                            margin-top: -1px;
                        }
                    }
                    &._document {
                        background: var(--gradation-lavender);
                    }
                    &._experience {
                        background: var(--gradation-gold);
                    }
                    &._visit {
                        background: var(--gradation-green);
                    }
                }
            }
        }
    }
    .gh_logo {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 4px;
        flex-shrink: 0;
        flex-grow: 1;
        a {
            display: block;
            width: min(100%, 220px);
            margin-inline: auto;
            flex-shrink: 0;
            transition: opacity var(--transition-duration-normal);
            img {
                width: auto;
            }
        }
    }
    .gh_logo_text {
        display: inline-block;
        font-size: 11px;
        line-height: calc(16 / 11);
        text-align: center;
        flex-shrink: 0;
    }

    @media screen and (min-width: 768px) {
        .inner {
            padding-block: 33px;
            padding-inline: 50px 30px;
            gap: 10px;
            flex-direction: row;
            .pc_header {
                display: block;
                flex-shrink: 0;
            }
        }
        .gh_logo {
            gap: 10px;
            flex-direction: row;
            a {
                width: min(100%, 240px);
                margin-inline: 0;
            }
        }
        .gh_logo_text {
            font-size: 13px;
            line-height: calc(19 / 13);
            text-align: left;
        }
    }

    @media screen and (min-width: 1180px) {
        .inner {
            .pc_header {
                position: static;
                .list {
                    grid-template-columns: 177fr 177fr 280fr;
                    gap: 20px;
                    .item {
                        border-radius: 4px;
                        .link {
                            flex-direction: row;
                            gap: 8px;
                            padding-block: 14px;
                            .text {
                                margin-top: 0;
                                font-size: 15px;
                                line-height: 1.4;
                            }
                        }
                    }
                }
            }
        }
    }

    @media screen and (min-width: 1320px) {
        .inner {
            .pc_header {
                width: min(100%, 674px);
                .list {
                    .item {
                        .link {
                            padding-block: 17px;
                            .text {
                                font-size: 18px;
                            }
                        }
                    }
                }
            }
        }
    }

    /* MARK: hover */
    @media (any-hover: hover) {
        .gh_logo {
            a {
                &:hover {
                    opacity: var(--opacity-hover);
                }
            }
        }
        .pc_header {
            .list {
                .item {
                    &:hover {
                        opacity: var(--opacity-hover);
                    }
                }
            }
        }
    }
}

/*============================
// MARK: フッター
//============================*/
.features_lp_footer {
    background: var(--color-background-base--ivory);
    padding: 0;
    .global_inner {
        padding-block: 30px 90px;
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    .gf_logo {
        width: min(100%, 260px);
        a{
            transition: opacity var(--transition-duration-normal);
        }
    }
    .gf_address {
        margin-top: 21px;
        font-weight: 500;
        line-height: 1.2;
        letter-spacing: 0.1em;
        font-size: 14px;
        text-align: center;
        a{
            transition: opacity var(--transition-duration-normal);
        }
    }
    .gf_tel {
        font-weight: 500;
        line-height: 1.2;
        letter-spacing: 0.1em;
        font-size: 14px;
        text-align: center;
        margin-top: 8px;
    }
    .gf_copyright {
        background-color: transparent;
        padding: 0;
        margin-top: 30px;
        text-align: center;
        font-weight: 500;
        font-size: 13px;
        line-height: 1.4;
        letter-spacing: 0.1em;
        color: var(--color-foreground-text--gray-400);
        text-align: center;
    }

    @media screen and (min-width: 1180px) {
        .global_inner {
            padding-block: 60px;
        }
        .gf_copyright {
            margin-top: 56px;
        }
    }

    /* MARK: hover */
    @media (any-hover: hover) {
        .gf_logo {
            a {
                &:hover {
                    opacity: var(--opacity-hover);
                }
            }
        }
        .gf_address {
            a {
                &:hover {
                    opacity: var(--opacity-hover);
                }
            }
        }
    }
}

/*============================
// MARK: TOP MV
//============================*/
.mainVisual {
    .alternate {
        position: absolute;
        width: 0;
        height: 0;
        overflow: hidden;
        visibility: hidden;
        opacity: 0;
        pointer-events: none;
        z-index: -1;
    }
    .visual {
        width: 100%;
        height: auto;
        border-radius: 5px;
        overflow: hidden;
        img {
            width: 100%;
            height: auto;
            aspect-ratio: 375 / 450;
            object-fit: contain;
            object-position: center;
        }
    }

    @media screen and (min-width: 768px) {
        .inner {
            padding-top: 10px;
            padding-inline: 30px;
            margin-inline: auto;
            max-width: var(--content-width-Width_large);
        }
        .visual {
            border-radius: 10px;
            img {
                aspect-ratio: 1320 / 380;
            }
        }
    }
}

/*============================
// MARK: メッセージ
//============================*/
.message {
    position: relative;
    z-index: 0;
    container-type: inline-size;
    max-width: var(--content-width-Width_medium);
    margin-inline: auto;
    .blurs {
        position: absolute;
        inset: 0;
        z-index: -1;
        pointer-events: none;
        .blur {
            position: absolute;
            z-index: 0;
            img {
                width: 100%;
                height: auto;
                aspect-ratio: var(--_aspect-ratio, 1 / 1);
                object-fit: cover;
                object-position: center;
            }
            &[data-num='01'] {
                top: calc(100cqi / 375 * 90);
                left: calc(100cqi / 375 * -123);
                width: calc(100cqi / 375 * 272);
                height: auto;
                --_aspect-ratio: 272 / 300;
            }
            &[data-num='02'] {
                top: calc(100cqi / 375 * -87);
                right: calc(100cqi / 375 * -167);
                width: calc(100cqi / 375 * 366);
                height: auto;
                --_aspect-ratio: 290 / 367;
            }
            &[data-num='03'] {
                bottom: calc(100cqi / 375 * -18);
                left: calc(100cqi / 375 * -144);
                width: calc(100cqi / 375 * 482);
                height: auto;
                --_aspect-ratio: 482 / 490;
            }
            &[data-num='04'] {
                bottom: calc(100cqi / 375 * 37);
                right: calc(100cqi / 375 * -121);
                width: calc(100cqi / 375 * 362);
                height: auto;
                --_aspect-ratio: 362 / 366;
                z-index: 1;
            }
        }
    }
    .inner {
        padding-top: 40px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }
    .heading {
        width: fit-content;
        margin-inline: auto;
        font-family: var(--font-Shippori-Mincho-B1);
        font-weight: 500;
        font-size: 30px;
        line-height: 1.6;
        letter-spacing: 0.12em;
        text-align: center;
        background: var(--gradation-sunlight-text);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
        background-size: 100%; /* 文字数 もしくは 100% */
        background-position: center;
        color: transparent;
    }
    .lead {
        font-weight: 500;
        font-size: 18px;
        line-height: 1.8;
        letter-spacing: 0.15em;
        text-align: center;
        margin-top: 20px;
        .dot {
            display: inline-block;
            position: relative;
            z-index: 0;
            &::before {
                content: '';
                display: block;
                width: 3px;
                height: 3px;
                background: currentColor;
                position: absolute;
                top: -2px;
                left: calc(50% - 0.075em);
                translate: -50% 0;
            }
        }
    }
    .text {
        font-size: 14px;
        line-height: 2;
        margin-top: 20px;
        padding-inline: 36px;
    }
    .images {
        margin-top: 10px;
        position: relative;
        pointer-events: none;
        display: grid;
        grid-template-areas:
            'image02 image03'
            'image01 image04';
        grid-template-columns: 208fr 167fr;
        grid-template-rows: 160fr 216fr;
        .image {
            img {
                width: 100%;
                height: auto;
                aspect-ratio: var(--_aspect-ratio, 1 / 1);
                object-fit: cover;
                object-position: center;
            }
            &[data-num='01'] {
                grid-area: image01;
                margin-top: calc(100cqi / 375 * 15);
                margin-left: calc(100cqi / 375 * 44);
                width: calc(100cqi / 375 * 136);
                height: auto;
                --_aspect-ratio: 200 / 240;
            }
            &[data-num='02'] {
                grid-area: image02;
                margin-top: calc(100cqi / 375 * 40);
                margin-left: calc(100cqi / 375 * 10);
                width: calc(100cqi / 375 * 198);
                height: auto;
                --_aspect-ratio: 300 / 160;
            }
            &[data-num='03'] {
                grid-area: image03;
                margin-left: calc(100cqi / 375 * 47);
                width: calc(100cqi / 375 * 120);
                height: auto;
                --_aspect-ratio: 260 / 360;
            }
            &[data-num='04'] {
                grid-area: image04;
                margin-top: calc(100cqi / 375 * 52);
                margin-left: calc(100cqi / 375 * 18);
                width: calc(100cqi / 375 * 109);
                height: auto;
                --_aspect-ratio: 160 / 220;
            }
        }
    }

    @media screen and (min-width: 768px) {
        .inner {
            padding-top: 100px;
        }
        .lead {
            font-size: 20px;
            margin-top: 30px;
        }
        .text {
            font-size: 16px;
            line-height: 2.8;
            text-align: center;
            margin-top: 50px;
        }
    }
    @media screen and (min-width: 1180px) {
        max-width: var(--content-width-Width_large);
        .blurs {
            .blur {
                &[data-num='01'] {
                    display: none;
                }
                &[data-num='02'] {
                    display: none;
                }
                &[data-num='03'] {
                    top: 49px;
                    left: -151px;
                    width: 482px;
                }
                &[data-num='04'] {
                    top: 146px;
                    right: -56px;
                    width: 430px;
                }
            }
        }
        .heading {
            font-size: 40px;
            letter-spacing: 0.18em;
        }
        .images {
            margin-top: 0;
            position: absolute;
            inset: 0;
            display: block;
            .image {
                position: absolute;
                &[data-num='01'] {
                    width: min(calc(100cqi / 1380 * 220), 200px);
                    margin: 0;
                    top: 310px;
                    left: calc(100cqi / 1380 * 80);
                }
                &[data-num='02'] {
                    width: min(calc(100cqi / 1380 * 310), 300px);
                    margin: 0;
                    top: 100px;
                    left: -50px;
                }
                &[data-num='03'] {
                    width: min(calc(100cqi / 1380 * 290), 260px);
                    margin: 0;
                    z-index: -1;
                    top: 100px;
                    right: -50px;
                }
                &[data-num='04'] {
                    width: min(calc(100cqi / 1380 * 170), 160px);
                    margin: 0;
                    top: 312px;
                    right: 130px;
                }
            }
        }
    }
}

/*============================
// MARK: 選ばれる理由
//============================*/
.reason {
    position: relative;
    z-index: 0;
    container-type: inline-size;
    padding-bottom: 60px;
    .inner {
        max-width: var(--content-width-Width_medium);
        margin-inline: auto;
        padding-top: 50px;
        padding-inline: var(--padding-side-sp);
        display: grid;
        gap: 40px;
    }
    .wrapper {
        display: grid;
        grid-template-areas:
            'hgroup'
            'image'
            'text';
        grid-template-columns: 1fr;
        grid-template-rows: auto auto 1fr;
        gap: 20px;
        position: relative;
        z-index: 0;
        padding-bottom: 40px;
        &::before {
            content: '';
            position: absolute;
            bottom: 0;
            left: 50%;
            translate: -50% 0;
            z-index: -1;
            display: block;
            width: 100cqi;
            height: 50%;
            background: var(--color-background-base--creamlight);
        }
    }
    .hgroup {
        grid-area: hgroup;
        height: fit-content;
        display: flex;
        align-items: center;
        gap: 15px;
        position: relative;
        z-index: 0;
        padding-bottom: 20px;
        &::after {
            content: '';
            display: block;
            width: 100%;
            height: 2px;
            background: var(--gradation-sunlight-fill);
            position: absolute;
            bottom: 0;
            left: 0;
            z-index: -1;
        }
        .circle {
            display: flex;
            align-items: center;
            justify-content: center;
            flex-direction: column;
            width: 85px;
            height: 85px;
            flex-shrink: 0;
            background: var(--gradation-sunlight-fill);
            border-radius: 50%;
            .label {
                margin-top: 4px;
                font-weight: 700;
                font-size: 10px;
                line-height: 1;
                letter-spacing: 0em;
                color: var(--color-neutral-white);
                filter: drop-shadow(var(--drop-shadow-normal));
            }
            .number {
                margin-top: 4px;
                font-family: var(--font-Shippori-Mincho-B1);
                font-weight: 500;
                font-size: 28px;
                line-height: 1;
                letter-spacing: 0.05em;
                color: var(--color-neutral-white);
                filter: drop-shadow(var(--drop-shadow-normal));
            }
        }
    }
    .title {
        font-family: var(--font-Shippori-Mincho-B1);
        font-weight: 500;
        font-size: 15px;
        line-height: calc(22 / 15);
        letter-spacing: 0.1em;
        text-align: center;
        flex-grow: 1;
        .large {
            font-size: 21px;
            line-height: calc(30 / 21);
            color: var(--color-foreground-text--deep-blue-900);
        }
    }
    .image {
        grid-area: image;
        img {
            width: 100%;
            height: auto;
            aspect-ratio: 540 / 320;
            object-fit: cover;
            object-position: center;
        }
    }
    .text {
        grid-area: text;
        font-size: 14px;
        line-height: 1.8;
    }
    .foot {
        margin-top: 40px;
        padding-block: 30px;
        padding-inline: 20px;
        border: 1px solid var(--color-foreground-sub--indigo);
        margin-inline: auto;
        width: calc(100cqi - var(--padding-side-sp) * 2);
        max-width: calc(var(--content-width-Width_medium) - var(--padding-side-sp) * 2);
        background-color: var(--color-neutral-white);
        box-shadow: var(--drop-shadow-medium);
        .heading {
            font-family: var(--font-Shippori-Mincho-B1);
            font-size: 24px;
            line-height: 1.5;
            color: var(--color-foreground-sub--indigo);
            padding-bottom: 20px;
            position: relative;
            text-align: center;
            z-index: 0;
            &::after {
                content: '';
                position: absolute;
                bottom: 0;
                left: 50%;
                translate: -50% 0;
                display: block;
                width: 64px;
                height: 1px;
                background-color: currentColor;
            }
        }
        .text {
            font-size: 16px;
            line-height: 1.8;
            margin-top: 20px;
        }
    }

    @media screen and (min-width: 768px) {
        padding-bottom: 120px;
        .inner {
            gap: 80px;
            padding-top: 133px;
        }
        .hgroup {
            padding-bottom: 30px;
            gap: 30px;
            .circle {
                width: 120px;
                height: 120px;
                .label {
                    font-size: 14px;
                }
                .number {
                    font-size: 40px;
                }
            }
        }
        .title {
            text-align: left;
            font-size: 26px;
            line-height: calc(38 / 26);
            .large {
                font-size: 30px;
                line-height: calc(43 / 36);
            }
        }
        .text {
            font-size: 18px;
        }
        .foot {
            margin-top: 80px;
            padding-block: 40px;
            padding-inline: 40px;
            max-width: 960px;
            .heading {
                font-size: 26px;
                &::after {
                    width: 80px;
                }
            }
            .text {
                font-size: 18px;
                text-align: center;
            }
        }
    }

    @media screen and (min-width: 1180px) {
        .inner {
            max-width: var(--content-width-Width_large);
            padding-inline: 110px;
        }
        .wrapper {
            grid-template-areas:
                'hgroup image'
                'text image';
            grid-template-columns: 590fr 540fr;
            grid-template-rows: auto 1fr;
            gap: 30px;
            padding-bottom: 60px;
            &::before {
                left: unset;
                translate: 0 0;
                right: 110px;
            }
            &:nth-child(even) {
                grid-template-areas:
                    'image hgroup'
                    'image text';
                grid-template-columns: 540fr 590fr;
                &::before {
                    left: 110px;
                    translate: 0 0;
                    right: unset;
                }
            }
        }
    }
}

/*============================
// MARK: 在校生の声
//============================*/
.voice {
    position: relative;
    z-index: 0;
    container-type: inline-size;
    background-color: #fbf6ea;
    .inner {
        max-width: calc(1160px - var(--padding-side-sp) * 2);
        margin-inline: auto;
        padding-block: 40px 50px;
        padding-inline: var(--padding-side-sp);
    }
    .heading {
        width: fit-content;
        margin-inline: auto;
        font-family: var(--font-Shippori-Mincho-B1);
        font-weight: 500;
        font-size: 30px;
        line-height: 1.6;
        letter-spacing: 0.12em;
        text-align: center;
        background: var(--gradation-sunlight-text);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
        background-size: 100%; /* 文字数 もしくは 100% */
        background-position: center;
        color: transparent;
    }
    .container {
        margin-top: 30px;
        display: grid;
        gap: 24px;
    }
    .box {
        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: auto 1fr;
        gap: 24px;
        box-shadow: var(--drop-shadow-small);
        background-color: var(--color-neutral-white);
        padding-block: 16px 24px;
        padding-inline: 20px;
    }
    .visual {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 12px;
        .image {
            width: 90px;
            height: auto;
            flex-shrink: 0;
            aspect-ratio: 1 / 1;
            object-fit: contain;
            object-position: center;
        }
        .caption {
            display: flex;
            align-items: center;
            justify-content: center;
            flex-direction: column;
            gap: 8px;
            .name {
                display: flex;
                align-items: baseline;
                justify-content: center;
                flex-wrap: wrap;
                gap: 0 12px;
                .initial {
                    font-weight: 500;
                    font-size: 13px;
                    line-height: calc(19 / 13);
                    letter-spacing: 0.1em;
                    color: var(--color-foreground-text--gray-400);
                    .large {
                        font-size: 20px;
                        line-height: calc(29 / 20);
                    }
                }
                .profile {
                    font-size: 14px;
                    line-height: 1.8;
                    letter-spacing: 0.05em;
                    color: var(--color-foreground-text--gray-400);
                }
            }
            .position {
                font-size: 12px;
                line-height: 1;
                background-color: #fff;
                padding-block: 4px;
                padding-inline: 12px;
                border-radius: 999em;
                &[data-name='shinkyu'] {
                    color: #de708f;
                    background-color: #ffeff4;
                }
                &[data-name='massage'] {
                    color: #9479b1;
                    background-color: #f2eef5;
                }
            }
        }
    }
    .content {
        display: grid;
        gap: 1em;
        .text {
            font-size: 15px;
            line-height: 1.5;
            color: var(--color-text-primary);
        }
    }

    @media screen and (min-width: 768px) {
        .inner {
            padding-block: 80px 120px;
        }
        .heading {
            font-size: 40px;
            letter-spacing: 0.18em;
        }
        .container {
            margin-top: 48px;
        }
        .box {
            padding-block: 40px;
            padding-inline: 48px;
            gap: 24px;
            grid-template-columns: 240px 1fr;
            grid-template-rows: 1fr;
            grid-template-areas: 'visual content';
            &:nth-child(even) {
                grid-template-columns: 1fr 240px;
                grid-template-areas: 'content visual';
            }
        }
        .visual {
            grid-area: visual;
            flex-direction: column;
            .image {
                width: 150px;
            }
            .caption {
                .name {
                    .initial {
                        font-size: 16px;
                        line-height: calc(23 / 16);
                        .large {
                            font-size: 24px;
                            line-height: calc(35 / 24);
                        }
                    }
                    .profile {
                        font-size: 16px;
                    }
                }
                .position {
                    font-size: 15px;
                    padding-block: 6px;
                    padding-inline: 16px;
                }
            }
        }
        .content {
            grid-area: content;
        }
    }

    @media screen and (max-width: 374px) {
        .box {
            padding-inline: 16px;
        }
    }
}

/*============================
// MARK: CTA
//============================*/
.cta {
    position: relative;
    z-index: 0;
    container-type: inline-size;
    .visual {
        img {
            width: 100%;
            height: auto;
            aspect-ratio: 375 / 260;
            object-fit: contain;
            object-position: center;
        }
    }
    .inner {
        max-width: calc(var(--content-width-Width_large) - var(--padding-side-sp) * 2);
        margin-inline: auto;
        padding-inline: var(--padding-side-sp);
    }
    .container {
        background-color: var(--color-neutral-white);
        border-radius: 10px;
        max-width: 1060px;
        margin-inline: auto;
        padding-block: 25px 50px;
        padding-inline: 20px;
        position: relative;
        z-index: 1;
        margin-top: -57px;
    }
    .heading {
        width: fit-content;
        margin-inline: auto;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        gap: 10px;
        .small {
            font-family: var(--font-Shippori-Mincho-B1);
            font-weight: 500;
            font-size: 14px;
            line-height: 1.5;
            letter-spacing: 0.1em;
            text-align: center;
        }
        .large {
            width: fit-content;
            margin-inline: auto;
            font-family: var(--font-Shippori-Mincho-B1);
            font-weight: 500;
            font-size: 28px;
            line-height: 1.4;
            letter-spacing: 0.12em;
            text-align: center;
            background: var(--gradation-sunlight-text);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
            background-size: 100%; /* 文字数 もしくは 100% */
            background-position: center;
            color: transparent;
        }
    }
    .text {
        font-size: 14px;
        line-height: 1.8;
        margin-top: 20px;
        text-align: center;
    }
    .buttons {
        margin-top: 48px;
        display: grid;
        grid-template-areas:
            'visit visit'
            'document experience';
        grid-template-columns: 1fr 1fr;
        grid-template-rows: auto auto;
        gap: 15px;
        width: min(500px, 100%);
        margin-inline: auto;
        .button {
            text-decoration: none;
            display: grid;
            grid-template-columns: 1fr;
            border-radius: 5px;
            padding-block: 25px 15px;
            width: min(500px, 100%);
            transition: opacity var(--transition-duration-normal);
            .label {
                font-family: var(--font-Shippori-Mincho-B1);
                font-weight: 600;
                font-size: 18px;
                line-height: 1.3;
                letter-spacing: 0.08em;
                color: var(--color-neutral-white);
                display: flex;
                align-items: center;
                justify-content: center;
            }
            .circle {
                width: 35px;
                height: 35px;
                background-color: var(--color-neutral-white);
                border-radius: 50%;
                display: flex;
                align-items: center;
                justify-content: center;
                &::before {
                    content: '';
                    display: block;
                    width: 14px;
                    height: 1.3px;
                    background-color: currentColor;
                }
                .icon {
                    display: block;
                    width: 6px;
                    height: 7px;
                    margin-top: 1px;
                }
            }
            &[data-name='visit'] {
                grid-area: visit;
                position: relative;
                z-index: 0;
                background: var(--gradation-green);
                margin-inline: auto;
                padding-block: 25px 23px;
                padding-inline: 20px 15px;
                grid-template-columns: 1fr 35px;
                .tip {
                    position: absolute;
                    left: 50%;
                    top: -17px;
                    translate: -50% 0;
                    width: 190px;
                    .alternate {
                        position: absolute;
                        z-index: -1;
                        inset: 0;
                        width: 0;
                        height: 0;
                        visibility: hidden;
                        opacity: 0;
                        pointer-events: none;
                    }
                    img {
                        width: 100%;
                        height: auto;
                        aspect-ratio: 190 / 39;
                        object-fit: contain;
                        object-position: center;
                    }
                }
                .label {
                    font-size: 20px;
                }
                .circle {
                    color: var(--color-foreground-sub--green);
                }
            }
            &[data-name='document'] {
                grid-area: document;
                background: var(--gradation-lavender);
                gap: 15px;
                justify-items: center;
                .circle {
                    color: var(--color-foreground-sub--indigo);
                }
            }
            &[data-name='experience'] {
                grid-area: experience;
                background: var(--gradation-gold);
                gap: 15px;
                justify-items: center;
                .circle {
                    color: var(--color-foreground-main--gold);
                }
            }
        }
    }

    @media screen and (min-width: 768px) {
        .visual {
            img {
                aspect-ratio: 1380 / 400;
            }
        }
        .container {
            padding-block: 80px 120px;
            padding-inline: 80px;
            margin-top: -80px;
        }
        .heading {
            .small {
                font-size: 24px;
            }
            .large {
                font-size: 40px;
            }
        }
        .text {
            margin-top: 30px;
            font-size: 17px;
        }
        .buttons {
            margin-top: 77px;
            gap: 60px;
            width: 100%;
            .button {
                &[data-name='visit'] {
                    grid-template-columns: 1fr 50px;
                    padding-block: 35px 30px;
                    padding-inline: 60px 30px;
                    border-radius: 8px;
                    .tip {
                        width: 280px;
                        img {
                            aspect-ratio: 280 / 39;
                        }
                    }
                    .label {
                        font-size: 26px;
                    }
                    .circle {
                        width: 50px;
                        height: 50px;
                        &::before {
                            width: 18px;
                        }
                    }
                }
                &[data-name='document'] {
                    grid-template-columns: 1fr 50px;
                    padding-block: 15px;
                    padding-inline: 70px 30px;
                    border-radius: 8px;
                    .label {
                        font-size: 22px;
                    }
                    .circle {
                        width: 50px;
                        height: 50px;
                    }
                }
                &[data-name='experience'] {
                    grid-template-columns: 1fr 50px;
                    padding-block: 15px;
                    padding-inline: 70px 30px;
                    border-radius: 8px;
                    .label {
                        font-size: 22px;
                    }
                    .circle {
                        width: 50px;
                        height: 50px;
                    }
                }
            }
        }
    }

    /* MARK: hover */
    @media (any-hover: hover) {
        .buttons {
            .button {
                &:hover {
                    opacity: var(--opacity-hover);
                }
            }
        }
    }
}

/*============================
// MARK: 東洋鍼灸についてもっと知る
//============================*/
.about {
    position: relative;
    z-index: 0;
    container-type: inline-size;
    background-color: #faf8e3;
    .inner {
        padding-block: 40px 50px;
        padding-inline: var(--padding-side-sp);
        max-width: 1200px;
        margin-inline: auto;
    }
    .heading {
        font-family: var(--font-Shippori-Mincho-B1);
        font-weight: 500;
        font-size: 22px;
        line-height: 1.4;
        letter-spacing: 0.15em;
        text-align: center;
    }
    .container {
        margin-top: 30px;
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 30px 14px;
    }
    .card {
        text-decoration: none;
        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: auto 1fr;
        gap: 10px;
        .image {
            overflow: hidden;
            img {
                width: 100%;
                height: auto;
                aspect-ratio: 360 / 240;
                object-fit: cover;
                object-position: center;
                transition: transform var(--transition-duration-normal);
            }
        }
        .content {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 4px;
            .title {
                font-weight: 500;
                font-size: 14px;
                line-height: 1.5;
                letter-spacing: 0.1em;
                color: var(--color-foreground-text--gray-700);
                overflow-wrap: anywhere;
                word-break: normal;
                line-break: strict;
            }
            .circle {
                flex-shrink: 0;
                width: 30px;
                height: 30px;
                background: var(--gradation-sunlight-fill);
                border-radius: 50%;
                display: flex;
                align-items: center;
                justify-content: center;
                color: var(--color-neutral-white);
                &::before {
                    content: '';
                    display: block;
                    width: 8px;
                    height: 1.3px;
                    background-color: currentColor;
                }
                .icon {
                    display: block;
                    width: 6px;
                    height: 7px;
                    margin-top: 1px;
                }
            }
        }
    }
    @media screen and (min-width: 768px) {
        .inner {
            padding-block: 60px 80px;
        }
        .heading {
            font-size: 30px;
        }
        .container {
            margin-top: 50px;
            gap: 40px;
            grid-template-columns: 1fr 1fr 1fr;
        }
        .card {
            .content {
                .title {
                    font-size: 18px;
                }
            }
        }
    }

    /* MARK: hover */
    @media (any-hover: hover) {
        .card {
            .image {
                &:hover {
                    img {
                        transform: scale(1.1);
                    }
                }
            }
        }
    }
}

/*============================
// MARK: アクセス
//============================*/
.access {
    position: relative;
    z-index: 0;
    container-type: inline-size;
    .inner {
        padding-block: 50px;
        padding-inline: var(--padding-side-sp);
        max-width: 1020px;
        margin-inline: auto;
    }
    .heading {
        font-family: var(--font-Shippori-Mincho-B1);
        font-weight: 500;
        font-size: 22px;
        line-height: 1.7;
        letter-spacing: 0.1em;
        text-align: center;
        .accent {
            color: var(--color-foreground-sub--pink);
        }
    }

    .container {
        margin-top: 20px;
        display: grid;
        grid-template-columns: 1fr;
        gap: 30px;
    }

    .wrapper {
    }

    .content {
        display: grid;
        gap: 15px;
        width: fit-content;
        margin-inline: auto;
    }

    .row {
        display: grid;
        grid-template-columns: 173px 50px 1fr;
        gap: 10px;

        .station {
            display: flex;
            align-items: center;
            justify-content: center;
            padding-block: 5px;
            color: var(--color-neutral-white);
            font-weight: 700;
            font-size: 13px;
            &[data-name='yamanote'] {
                background: #7ac249;
            }
            &[data-name='chuousoubu'] {
                background: #dbb600;
            }
            &[data-name='seibushinjuku'] {
                background: #01a6bf;
            }
        }

        .gate {
            display: flex;
            align-items: center;
            justify-content: center;
            padding-block: 5px;
            font-weight: 500;
            font-size: 13px;
            background-color: var(--color-neutral-white);
            border: 1px solid #7a726d;
        }

        .time {
            font-weight: 500;
            font-size: 14px;
            line-height: 1;
            display: flex;
            align-items: baseline;
            justify-content: flex-end;
            flex-wrap: wrap;
            .num {
                font-weight: 700;
                font-size: 32px;
                color: #de708f;
            }
        }
    }

    .button {
        margin-top: 30px;
        display: flex;
        align-items: center;
        width: min(260px, 100%);
        padding-block: 10px;
        padding-inline: 20px 15px;
        border-radius: 4px;
        background-color: #7a726d;
        margin-inline: auto;
        gap: 8px;
        text-decoration: none;
        transition: background-color var(--transition-duration-normal);
        border: 1px solid #7a726d;
        .pin {
            font-family: 'Font Awesome 5 Pro';
            font-weight: 400;
            font-size: 13px;
            line-height: 1;
            color: var(--color-neutral-white);
            transition: color var(--transition-duration-normal);
        }

        .label {
            font-weight: 500;
            font-size: 13px;
            letter-spacing: 0.1em;
            color: var(--color-neutral-white);
            transition: color var(--transition-duration-normal);
        }

        .arrow {
            flex-shrink: 0;
            display: flex;
            align-items: center;
            justify-content: center;
            color: var(--color-neutral-white);
            margin-left: auto;
            transition: color var(--transition-duration-normal);
            &::before {
                content: '';
                display: block;
                width: 33px;
                height: 1.3px;
                background-color: currentColor;
            }
            .icon {
                display: block;
                width: 6px;
                height: 7px;
                margin-top: 1px;
            }
        }
    }

    .info {
        margin-top: 32px;
        .address {
            text-align: center;
            font-weight: 500;
            font-size: 15px;
            line-height: 1.4;
            letter-spacing: 0.1em;
            a {
                color: var(--color-foreground-text--gray-700);
                text-decoration: none;
                transition: opacity var(--transition-duration-normal);
            }
        }
        .tel {
            text-align: center;
            font-weight: 500;
            font-size: 15px;
            line-height: 1.4;
            letter-spacing: 0.1em;
            a {
                color: var(--color-foreground-text--gray-700);
                text-decoration: none;
            }
        }
    }

    .map {
        max-width: var(--content-width-Width_medium);
        width: 100%;
        margin-inline: auto;
        iframe {
            width: 100%;
            height: auto;
            aspect-ratio: 335 / 240;
            border: 0;
        }
    }

    @media screen and (min-width: 768px) {
    }

    @media screen and (min-width: 960px) {
        .inner {
            padding-block: 80px 100px;
        }
        .heading {
            font-size: 32px;
        }
        .container {
            grid-template-columns: 480fr 500fr;
            margin-top: 40px;
        }
        .content {
            gap: 20px;
            margin-inline: 0;
            .row {
                grid-template-columns: 220px 100px 1fr;
                gap: 15px;
                .station {
                    font-size: 16px;
                }
                .gate {
                    font-size: 16px;
                }
                .time {
                    font-size: 16px;
                    .num {
                        font-size: 32px;
                    }
                }
            }
        }
        .info {
            margin-top: 40px;
            .address {
                text-align: left;
                font-size: 18px;
            }
            .tel {
                text-align: left;
                font-size: 18px;
            }
        }
        .button {
            width: min(360px, 100%);
            margin-top: 40px;
            padding-block: 15px;
            padding-inline: 25px 15px;
            margin-inline: 0;
            gap: 15px;
            .pin {
                font-size: 22px;
            }
            .label {
                font-size: 18px;
            }
        }
    }

    /* MARK: hover */
    @media (any-hover: hover) {
        .button {
            &:hover {
                background-color: transparent;
                .pin {
                    color: #7a726d;
                }
                .label {
                    color: #7a726d;
                }
                .arrow {
                    color: #7a726d;
                }
            }
        }
        .info {
            .address {
                a {
                    &:hover {
                        opacity: var(--opacity-hover);
                    }
                }
            }
        }
    }
}