@layer foundation, layout, object;
@layer foundation.font, foundation.reset, foundation.property, foundation.base;
@layer object.component, object.project, object.utility;

/* ===========================================
 * Webフォント
 * ======================================== */

/* Noto Sans JP */
/* ======================================== */

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&display=swap');

/* Jost */
/* ======================================== */

@import url('https://fonts.googleapis.com/css2?family=Jost:ital,wght@0,100..900;1,100..900&display=swap');

/* ===========================================
 * リセットCSS
 * ======================================== */

/* kiso.css */
/* ======================================== */

@import url("./vendor/reset/kiso.css") layer(foundation.reset);

/* ===========================================
 * ファウンデーション
 * ======================================== */

@layer foundation {

    /* カスタムプロパティ */
    /* ======================================== */

    @layer property {

        :where(:root) {

            /* 色 */
            /* ======================================== */

            --color-base-black: #333333;
            --color-base-white: #fafafa;
            --color-primary: #366091;
            --color-secondary: #967f49;
            --color-ivory: #f8f5e3;
            --color-light-ivory: #F5F4EF;
            --color-dark-gray: #707070;
            --color-light-gray: #d8d8d8;
            --color-success: #6ade60;
            --color-error: #e9494b;
            --color-warning: #f8ea2d;
            --color-black: #000000;
            --color-white: #ffffff;
            --color-white-60: rgba(255, 255, 255, 0.6);

            /* フォントサイズ */
            /* ======================================== */

            --font-size-xxs: .75rem;
            --font-size-xs: .875rem;
            --font-size-sm: 1rem;
            --font-size-md: 1.25rem;
            --font-size-lg: 1.5rem;
            --font-size-xl: 1.75rem;
            --font-size-2xl: 2rem;
            --font-size-3xl: 2.5rem;
            --font-size-4xl: 3rem;
            --font-size-5xl: 4rem;
            --font-size-6xl: 5rem;

            /* フォントの太さ */
            /* ======================================== */

            --font-weight-normal: 400;
            --font-weight-medium: 500;
            --font-weight-bold: 700;

            /* アイコン */
            /* ======================================== */

            --icon-chevron-right: url('../img/icon/chevron-right.svg');
            --icon-new-tab: url('../img/icon/new-tab.svg');

            /* 行の高さ */
            /* ======================================== */

            --line-height-trim: calc((1em - 1lh) / 2);
            --line-height-tight: 1.2;
            --line-height-normal: 1.6;
            --line-height-loose: 2;

            /* 文字の間隔 */
            /* ======================================== */

            --letter-spacing-tight: .02em;
            --letter-spacing-normal: .044em;
            --letter-spacing-loose: .1em;

            /* 角丸 */
            /* ======================================== */

            --border-radius-sm: 4px;
            --border-radius-md: 8px;
            --border-radius-lg: 9px;
            --border-radius-xl: 13.5px;
            --border-radius-2xl: 14.5px;
            --border-radius-full: calc(1px * infinity);

            /* 角丸 */
            /* ======================================== */

            --spacing-xxs: 4px;
            --spacing-xs: 8px;
            --spacing-sm: 12px;
            --spacing-md: 16px;
            --spacing-lg: 24px;
            --spacing-xl: 40px;
            --spacing-2xl: 64px;
            --spacing-3xl: 96px;
            --spacing-4xl: 128px;
            --spacing-5xl: 160px;
            --spacing-6xl: 192px;
            --spacing-7xl: 224px;
            --spacing-8xl: 256px;
            --spacing-9xl: 288px;
            --spacing-10xl: 320px;
            --spacing-11xl: 352px;
            --spacing-12xl: 384px;
            --spacing-13xl: 416px;

            /* 要素の重なり */
            /* ======================================== */

            --z-index-top: calc(infinity);
            --z-index-forward: 1;
            --z-index-backward: -1;
            --z-index-header: 20;

            /* デュレーション */
            /* ======================================== */

            --duration--short: .2s;
            --duration--normal: .3s;
            --duration--long: .5s;

            /* 横幅 */
            /* ======================================== */

            --inline-size-button: 240px;
            --inline-size-logo: 260px;

            /* 縦幅 */
            /* ======================================== */

            --block-size-header: 120px;
            --block-size-header-sp: 80px;

            /* アスペクト比 */
            /* ======================================== */

            --aspect-ratio-wide-screen: 16 / 9;
            --aspect-ratio-screen: 4 / 3;
            --aspect-ratio-banner: 3 / 1;
            --aspect-ratio-square: 1;

        }

    }

    /* ベーススタイル */
    /* ======================================== */

    @layer base {
        :where(body) {
            background-color: var(--color-base-white);
            color: var(--color-base-black);
            font-family: "Noto Sans JP", 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', 'ヒラギノ角ゴ Pro W3', 'メイリオ', Meiryo, sans-serif, "Apple Color Emoji";
            font-weight: var(--font-weight-normal);
            letter-spacing: var(--letter-spacing-normal);
            line-height: var(--line-height-normal);
            overflow-x: clip;
        }

        :where(h1) {
            margin-block: 0;
        }
    }
}

/* ===========================================
 * レイアウト
 * ======================================== */

@layer layout {

    .l-wrapper {
        display: grid;
        grid-template:
            "header"
            "main  " 1fr
            "footer";
        min-block-size: 100dvb;
        position: relative;

        & .l-header {
            grid-area: header;
        }

        & .l-main {
            grid-area: main;
        }

        & .l-footer {
            grid-area: footer;
        }
    }

    .l-header {
        block-size: var(--block-size-header);
        inline-size: 100%;

        @media (max-width: 991.98px) {
            block-size: var(--block-size-header-sp);
        }
    }

}

/* ===========================================
 * オブジェクト
 * ======================================== */

@layer object {

    /* コンポーネント */
    /* ======================================== */

    @layer component {

        /* セクション */
        /* ======================================== */

        .c-section {
            padding-block-start: var(--spacing-4xl);
        }

        /* コンテナ */
        /* ======================================== */

        .c-container {
            max-inline-size: 1270px;
            margin-inline: auto;
            padding-inline: var(--spacing-xl);

            @media (max-width: 1270px) {
                padding-inline: var(--spacing-lg);
            }
        }

        .c-container-contactMail {
            max-inline-size: 1080px;

            @media (max-width: 1270px) {
                max-inline-size: 1270px;
            }
        }

        /* サブヒーロー */
        /* ======================================== */

        .c-subHero {
            block-size: 300px;
            display: table;
            inline-size: 100%;
            overflow: hidden;
            position: relative;
        }

        .c-subHero__img {
            block-size: 100%;
            inline-size: 100%;
            object-fit: cover;
            opacity: 0.8;
            filter: blur(0.5px);
            position: absolute;
            z-index: var(--z-backward);
        }

        .c-subHero__heading {
            inset-block-start: 50%;
            translate: 0 -50%;
            position: absolute;

            @media (max-width:575.98px) {
                & .c-heading--3 {
                    font-size:25px;
                }
            }

            
        }

        .c-subHero__banner {
            inset-block-start: 67%;
            translate: 0 -50%;
            position: absolute;
            left: 50%;
            transform: translateX(150px);
            width: 31%;
            max-width: 450px;

            @media (max-width:1400px) {
                width: 40%;
            }

            @media (max-width:1250px) {
                transform: translateX(50px);
            }

            @media (max-width:991.98px) {
                inset-block-start: 73%;
            }

            @media (max-width:575.98px) {
                width: 73%;
                left: 21%;
                transform: translateX(0px);
            }
        }

        /* トップに戻るボタン */

        .c-page-top {
            aspect-ratio: 1;
            position: fixed;
            bottom: 3rem;
            right: 3rem;
            width: 3.5rem;
            background-color: var(--color-primary);
            border-radius: var(--border-radius-full);
            opacity: 0;
            visibility: hidden;
            z-index: 1;
            transition: opacity 0.3s ease, visibility 0.3s ease;

            @media (max-width: 767.98px) {
                bottom: 2rem;
                right: 2rem;
                width: 4rem;
            }
        }

        .c-page-top.is-show {
            opacity: 1;
            visibility: visible;
        }

        .c-page-top__button {
            position: relative;
            display:    block;
            width: 100%;
            height: 100%;
        }

        .c-page-top__button::after {
            aspect-ratio: 1;
            background-color: currentColor;
            color: var(--color-base-white);
            content: '';
            inline-size: 29px;
            inset-block-end: 15px;
            inset-inline-end: 14px;
            mask-image: var(--icon-chevron-right);
            mask-repeat: no-repeat;
            mask-position: center;
            mask-size: contain;
            position: absolute;
            transition: color var(--duration--short) ease-in-out;
            z-index: var(--z-index-forward);
            transform: rotate(-90deg);

            @media (max-width: 767.98px) {
                inline-size: 30px;
                inset-block-end: 20px;
                inset-inline-end: 18px;
            }
        }

        @media (hover: hover) {
            .c-page-top:hover {
                opacity: 0.8;
            }
        }

        /* パンくずリスト */
        /* ======================================== */

        .c-breadcrumb {
            padding-block: var(--spacing-xs);
        }

        .c-breadcrumb__list {
            column-gap: var(--spacing-md);
            display: flex;
            font-size: 14px;
        }

        .c-breadcrumb__item {
            position: relative;

            &:not(:last-child)::after {
                aspect-ratio: 1;
                background-color: currentColor;
                content: '';
                inline-size: 12px;
                inset-block-start: 53%;
                inset-inline-end: -14px;
                mask-image: var(--icon-chevron-right);
                mask-repeat: no-repeat;
                mask-position: center;
                mask-size: contain;
                position: absolute;
                translate: 0 -50%;
            }
        }

        .c-breadcrumb__link {
            @media (any-hover: hover) {
                &:hover {
                    color: var(--color-primary);
                    text-decoration: underline;
                }
            }
        }

        /* ボタン */
        /* ======================================== */

        .c-button {
            --background-color: "";
            align-items: center;
            border-radius: var(--border-radius-2xl);
            color: var(--color-white);
            display: grid;
            font-weight: var(--font-weight-medium);
            grid-template-columns: 1fr auto 1fr;
            padding: var(--spacing-sm) var(--spacing-md);
            transition: background-color var(--duration--normal) ease-in-out;

            @supports (corner-shape:squircle) {
                corner-shape: squircle;
            }

            &::before {
                content: '';
            }

            &::after {
                aspect-ratio: 1;
                background-color: currentColor;
                content: '';
                inline-size: 14px;
                justify-self: end;
                mask-image: var(--icon-chevron-right);
                mask-repeat: no-repeat;
                mask-position: center;
                mask-size: contain;
            }

            &:not([target="_blank"]) {
                &::after {
                    transition: translate var(--duration--normal) ease-in-out;
                }

                @media (any-hover: hover) {
                    &:hover::after {
                        translate: 4px 0;
                    }
                }
            }

            @media (max-width:575.98px) {
                border-radius: var(--border-radius-lg);
            }
        }

        .c-button--headerprimary {
            &::after {
                transition: translate var(--duration--normal) ease-in-out;
            }

            @media (any-hover: hover) {
                &:hover::after {
                    translate: 4px 0;
                }
            }
        }

        .c-button--header {
            grid-template-columns: 3fr auto 4fr;

            @media (max-width:575.98px) {
                grid-template-columns: 4fr auto 4fr;
            }
        }

        .c-button--headerprimary {
            grid-template-columns: 2fr auto 3fr;

            @media (max-width:575.98px) {
                grid-template-columns: 4fr auto 4fr;
            }
        }

        .c-button--news {
            --background-color: "";
            align-items: center;
            border-radius: var(--border-radius-2xl);
            color: var(--color-black);
            display: grid;
            position: relative;
            font-weight: var(--font-weight-medium);
            grid-template-columns: 1fr auto;
            padding: var(--spacing-sm) var(--spacing-md);
            max-width: 237px;
            transition: background-color var(--duration--normal) ease-in-out;

            @supports (corner-shape:squircle) {
                corner-shape: squircle;
            }

            &::before {
                aspect-ratio: 1;
                border: 1px solid var(--color-dark-gray);
                border-radius: 50%;
                content: '';
                inline-size: 28px;
                position: absolute;
                margin-left: 12.5rem;
                transition: translate var(--duration--normal) ease-in-out;
                z-index: -1;
            }

            &::after {
                aspect-ratio: 1;
                background-color: currentColor;
                content: '';
                inline-size: 14px;
                justify-self: end;
                mask-image: var(--icon-chevron-right);
                mask-repeat: no-repeat;
                mask-position: center;
                mask-size: contain;
            }

            &:not([target="_blank"]) {
                &::after {
                    transition: translate var(--duration--normal) ease-in-out;
                }

                @media (any-hover: hover) {
                    &:hover::after {
                        translate: 4px 0;
                    }

                    &:hover::before {
                        translate: 4px 0;
                        border: 1px solid var(--color-primary);
                    }
                }
            }

            &[target="_blank"]::after {
                mask-image: var(--icon-new-tab);
            }

            &:hover {
                color: var(--color-primary);
            }

            @media (max-width: 575.98px) {
                &::before {
                margin-left: 10.18rem;
            }
            }
        }

        .c-button2 {
            grid-template-columns: 1fr auto 2fr;
        }

        .c-link {
            padding-left: 18px;
            transition: background-color var(--duration--normal) ease-in-out;

            span {
                padding:var(--spacing-sm) 3px var(--spacing-sm) 7px;
                font-size: 15px;

                &::after {
                    aspect-ratio: 1;
                    background-color: black;
                    content: "";
                    display: inline-flex;
                    justify-content: center;
                    inline-size: 14px;
                    justify-self: end;
                    mask-image: var(--icon-chevron-right);
                    mask-repeat: no-repeat;
                    mask-position: center;
                    mask-size: contain;
                    margin-left: 0.65rem;
                    transition: translate var(--duration--normal) ease-in-out;
                }

                &:before {
                    aspect-ratio: 1;
                    border: 1px solid var(--color-dark-gray);
                    border-radius: 50%;
                    content: '';
                    inline-size: 28px;
                    position: absolute;
                    margin-left: 10.99rem;
                    translate: 0 -3px;
                    transition: translate var(--duration--normal) ease-in-out;
                    z-index: var(--z-index-forward)
                }

                @media (any-hover: hover) {
                    &:hover {
                        color: var(--color-primary);
                        &::after {
                            aspect-ratio: 1;
                            background-color: var(--color-primary);
                            translate: 4px 0;
                        }

                        &::before {
                            aspect-ratio: 1;
                            translate: 4px -3px;
                            border: 1px solid var(--color-primary);
                        }
                    }
                }
            }
        }

        .c-button--primary {
            background-color: var(--color-primary) !important;

            @media (any-hover: hover) {
                &:hover {
                    background-color: color-mix(in srgb, var(--color-primary) 80%, var(--color-black));
                }
            }
        }

        .c-button--secondary {
            background-color: var(--color-secondary) !important;

            @media (any-hover: hover) {
                &:hover {
                    background-color: color-mix(in srgb, var(--color-secondary) 80%, var(--color-black));
                }
            }
        }

        /* 見出し */
        /* ======================================== */

        .c-headingGroup {
            display: grid;
            row-gap: var(--spacing-md);
        }

        .c-heading {
            font-weight: var(--font-weight-bold);
            letter-spacing: var(--letter-spacing-tight);
            line-height: var(--line-height-tight);
            margin-block: var(--line-height-trim);
            position: relative;

            @media (max-width:575.98px) {
                font-size: 15px;
            }
        }

        .c-heading--1 {
            font-family: "Jost", sans-serif;
            font-size: clamp(var(--font-size-2xl), 1.545rem + 1.94vw, var(--font-size-4xl));
            @media (max-width:575.98px) {
                font-size: 31px;
            }
        }

        .c-heading--2 {
            font-size: clamp(var(--font-size-xl), 1.409rem + 1.45vw, var(--font-size-3xl));
        }

        .c-heading--3 {
            font-size: clamp(var(--font-size-lg), 1.273rem + 0.97vw, var(--font-size-2xl));
        }

        .c-heading--4 {
            font-size: clamp(var(--font-size-md), 1.023rem + 0.97vw, var(--font-size-xl));
            padding-inline-start: var(--spacing-md);
            position: relative;

            &::after {
                background-color: var(--color-secondary);
                block-size: 120%;
                content: '';
                inline-size: 8px;
                inset-block-start: 60%;
                inset-inline-start: 0;
                position: absolute;
                translate: 0 -55%;
            }

            @media (max-width:575.98px) {
                font-size: 18.5px;
            }
        }

        .c-heading--4-2 {
            font-size: clamp(var(--font-size-md), 1.023rem + 0.97vw, var(--font-size-xl));
            @media (max-width:575.98px) {
                font-size: 18.5px;
            }
        }

        .c-heading--newsletter {
            margin-left: 2.5rem;
            
            @media (max-width:575.98px) {
                margin-left: 0;
            }
        }

        .c-heading--5 {
            font-size: clamp(var(--font-size-sm), 0.473rem + 0.87vw, var(--font-size-lg));
        }

        .c-heading--5-2 {
            font-size: clamp(var(--font-size-sm), 0.473rem + 0.7vw, var(--font-size-lg));
            margin-top: 0.5rem;
        }

        .c-heading--6 {
            font-size: var(--font-size-sm);
        }

        /* 段落 */
        /* ======================================== */

        .c-paragraph:not(:first-child) {
            margin-block-start: var(--spacing-md);
        }

        .c-paragraph:not(:last-child) {
            margin-block-end: var(--spacing-md);
        }

        /* カテゴリ一覧 */
        /* ======================================== */

        .c-categoryList {
            column-gap: var(--spacing-md);
            display: grid;
            grid-template-columns: repeat(3, 1fr);

            @media (max-width: 575.98px) {
                grid-template-columns: 1fr;
                row-gap: var(--spacing-md);
            }
        }

        .c-categoryList__button {
            border-radius: var(--border-radius-xl);
            color: var(--color-base-black);
            font-weight: var(--font-weight-medium);
            padding-block: var(--spacing-md);
            text-align: center;
            border: 1px solid var(--color-light-gray);

            @supports (corner-shape:squircle) {
                corner-shape: squircle;
            }

            &:nth-child(1) {
                background-color: var(--color-base-white);
                transition: background-color .2s ease-in-out,color .2s ease-in-out,font-weight .2s ease-in-out;
            }
            &:nth-child(1).active {
                background-color: #8D8580;
                color: var(--color-base-white);
                font-weight: var(--font-weight-bold);
            }

            &:nth-child(2) {
                background-color: var(--color-base-white);
                transition: background-color .2s ease-in-out,color .2s ease-in-out,font-weight .2s ease-in-out;
            }
            &:nth-child(2).active {
                background-color: var(--color-primary);
                color: var(--color-base-white);
                font-weight: var(--font-weight-bold);
            }

            &:nth-child(3) {
                background-color: var(--color-base-white);
                transition: background-color .2s ease-in-out,color .2s ease-in-out,font-weight .2s ease-in-out;
            }
            &:nth-child(3).active {
                background-color: var(--color-secondary);
                color: var(--color-base-white);
                font-weight: var(--font-weight-bold);
            }

            @media (any-hover: hover) {
                &:nth-child(1):hover {
                    background-color: #8D8580;
                    color: var(--color-base-white);
                    font-weight: var(--font-weight-bold);
                    z-index: 100;
                }

                &:nth-child(2):hover {
                    background-color: var(--color-primary);
                    color: var(--color-base-white);
                    font-weight: var(--font-weight-bold);
                }

                &:nth-child(3):hover {
                    background-color: var(--color-secondary);
                    color: var(--color-base-white);
                    font-weight: var(--font-weight-bold);
                }
            }

            @media (max-width:575.98px){
                border-radius: var(--border-radius-lg);
            }
        }

        /* お知らせ一覧 */
        /* ======================================== */

        .c-newsList__item {
            border-block-end: 1px solid var(--color-light-gray);
        }

        .c-newsList__item:first-child {
            border-block-start: 1px solid var(--color-light-gray);
        }

        .c-newsList__link {
            column-gap: var(--spacing-md);
            display: grid;
            font-weight: var(--font-weight-medium);
            grid-template:
                "time category ." auto
                "title title title" auto / auto auto 1fr;
            padding-block: var(--spacing-lg);
            position: relative;
            row-gap: var(--spacing-sm);
        }

        @media (any-hover: hover) {
            .c-newsList__link:hover .c-newsList__title {
                color: var(--color-primary);
            }
        }

        .c-newsList__time {
            font-size: 14px;
            grid-area: time;
        }

        .c-newsList__category {
            border-radius: var(--border-radius-sm);
            color: var(--color-white);
            font-size: 14px;
            font-weight: var(--font-weight-normal);
            grid-area: category;
            padding-inline: var(--spacing-sm);

            @supports (corner-shape:squircle) {
                corner-shape: squircle;
            }
        }

        .c-newsList__category[data-category="1"] {
            background-color: var(--color-primary);
        }

        .c-newsList__category[data-category="2"] {
            background-color: var(--color-secondary);
        }

        .c-newsList__category[data-category="1f5cb5"] {
            background-color: var(--color-primary);
        }

        .c-newsList__category[data-category="967f49"] {
            background-color: var(--color-secondary);
        }

        .c-newsList__title {
            grid-area: title;
            transition: color .3s ease-in-out;
        }

        /* アコーディオン */
        /* ======================================== */

        .c-accordion[open] .c-accordion__question {
            &::before {
                transform: rotate(90deg);
            }

            &::after {
                opacity: 0;
                transform: rotate(90deg);
            }
        }

        .c-accordion[open] .c-accordion__company {
            &:first-child::before {
                transform: rotate(90deg);
            }

            &:first-child::after {
                opacity: 0;
                transform: rotate(90deg);
            }
        }

        .c-accordion__question {
            background-color: var(--color-light-ivory);
            padding: var(--spacing-lg);
            position: relative;

            &::before {
                background-color: currentColor;
                block-size: 20px;
                content: '';
                inline-size: 2px;
                inset-block-start: 50%;
                inset-inline-end: 25px;
                position: absolute;
                transition: transform var(--duration--normal) ease-in-out;
                translate: 0 -50%;

                @media(max-width:575.98px) {
                    block-size: 17px;
                }
            }

            &::after {
                background-color: currentColor;
                block-size: 2px;
                content: '';
                inline-size: 20px;
                inset-block-start: 50%;
                inset-inline-end: 16px;
                position: absolute;
                transition: transform var(--duration--normal) ease-in-out, opacity var(--duration--normal) ease-in-out;
                translate: 0 -50%;

                @media(max-width:575.98px) {
                    inline-size: 17px;
                    inset-inline-end: 17.3px;
                }
            }

            @media (max-width: 575.98px) {
                font-size: 15px;
            }
        }

        .c-accordion__company {
            border-inline: 1px solid var(--color-light-gray);
            border-top: 1px solid var(--color-light-gray);
            padding: 12px;
            position: relative;

            @media (max-width: 575.98px) {
                background-color: var(--color-primary);
                color: white;
                border-inline: none;
                border-top: none;
                border-radius: var(--border-radius-lg);
            }

            &::before {
                background-color: currentColor;
                block-size: 20px;
                content: '';
                inline-size: 2px;
                inset-block-start: 50%;
                inset-inline-end: 25px;
                position: absolute;
                transition: transform var(--duration--normal) ease-in-out;
                translate: 0 -50%;

                @media(max-width:575.98px) {
                    block-size: 17px;
                    inline-size: 1.5px;
                    background-color: white;
                }
            }

            &::after {
                background-color: currentColor;
                block-size: 2px;
                content: '';
                inline-size: 20px;
                inset-block-start: 50%;
                inset-inline-end: 16px;
                position: absolute;
                transition: transform var(--duration--normal) ease-in-out, opacity var(--duration--normal) ease-in-out;
                translate: 0 -50%;

                @media(max-width:575.98px) {
                    inline-size: 17px;
                    inset-inline-end: 17.3px;
                    block-size: 1.5px;
                    background-color: white;
                }
            }

            @media (max-width: 575.98px) {
                font-size: 15px;
            }
        }
        
        @media (max-width: 575.98px) {
            .c-accordion[open] .c-accordion__company {
                border-radius: 8px 8px 0 0;
            }
        }

        .c-accordion__answer {
            padding: var(--spacing-lg);
        }

        .c-accordion__detailsp {
            padding: 10px 12px;
        }

        /* アコーディオン */
        /* ======================================== */

        .c-accordion[open] .c-accordion__question {
            &::before {
                transform: rotate(90deg);
            }

            &::after {
                opacity: 0;
                transform: rotate(90deg);
            }
        }

        .c-accordion__question {
            background-color: var(--color-light-ivory);
            padding: var(--spacing-lg);
            position: relative;

            &::before {
                background-color: currentColor;
                block-size: 20px;
                content: '';
                inline-size: 2px;
                inset-block-start: 50%;
                inset-inline-end: 25px;
                position: absolute;
                transition: transform var(--duration--normal) ease-in-out;
                translate: 0 -50%;

                @media(max-width:575.98px) {
                    block-size: 17px;
                }
            }

            &::after {
                background-color: currentColor;
                block-size: 2px;
                content: '';
                inline-size: 20px;
                inset-block-start: 50%;
                inset-inline-end: 16px;
                position: absolute;
                transition: transform var(--duration--normal) ease-in-out, opacity var(--duration--normal) ease-in-out;
                translate: 0 -50%;

                @media(max-width:575.98px) {
                    inline-size: 17px;
                    inset-inline-end: 17.3px;
                }
            }

            @media (max-width: 575.98px) {
                font-size: 15px;
            }
        }

        .c-accordion__answer {
            padding: var(--spacing-lg);
        }

        /* テーブル */
        /* ======================================== */

        .c-table {
            inline-size: 100%;
            border-color: var(--color-light-gray);
            table-layout: fixed;
        }

        .c-table__head {
            @media (max-width: 767.98px) {
                display: none;
            }
        }

        .c-table__heading {
            background-color: var(--color-primary);
            color: var(--color-white);
            font-weight: var(--font-weight-medium);
            padding-block: var(--spacing-lg);
            text-align: center;
        }

        .c-table__body {
            @media (max-width:575.98px) {
                font-size: 15px;
            }
        }

        .c-table__bodysp h3 {
            margin: 1.2rem 0 0.5rem;
            font-size: var(--font-size-sm);
        }

        .c-table__bodypc table thead th:first-child,
        .c-table__bodypc table tbody tr:nth-child(-n+4) td:first-child,
        .c-table__bodypc table tbody tr:nth-child(n+15) td:first-child {
            width: 13%;
        }

        @media (max-width: 767.98px) {
            .c-table__bodypc {
                display: none;
            }
        }

        @media (min-width: 767.98px) {
            .c-table__bodysp {
                display: none;
            }
        }

        .c-table__row {
            @media (max-width: 767.98px) {
                display: grid;
                grid-template-columns: 1fr;
            }
        }

        .c-table__data {
            padding: 16px 12px;

            @media (max-width: 767.98px) {
                &:first-child {
                    background-color: var(--color-primary);
                    color: var(--color-white);
                }

                &:not(:first-child):not(:last-child) {
                    padding-block-end: 0;
                }

                &:not(:first-child) {
                    border-block: unset;
                    border-inline: 1px solid var(--color-light-gray);
                }

            }
            @media (max-width: 575.98px) {
                padding: 12px;

                &:nth-child(n+2) {
                    padding: 10px;
                }
            }
        }

        .c-table__datasp {
            padding: var(--spacing-sm);

            @media (max-width: 767.98px) {
                &:first-child {
                    background-color: var(--color-primary);
                    color: var(--color-white);
                }

                &:not(:first-child) {
                    border-inline: 1px solid var(--color-light-gray);
                }

            }
        }

        .c-table__data[colspan="2"] {
            text-align: center;

            @media (max-width: 767.98px) {
                text-align: start;
            }
        }

    }

    /* プロジェクト */
    /* ======================================== */

    @layer project {

        /* ヘッダー */
        /* ======================================== */

        .p-header {
            background-color: var(--color-base-white);
            block-size: var(--block-size-header);
            inline-size: 100%;
            inset-block-start: 0;
            padding-inline: var(--spacing-xl);
            position: fixed;
            transition: box-shadow .3s ease-in-out;
            z-index: var(--z-index-header);

            &.is-shadow {
                box-shadow: 0 2px 5px rgb(from var(--color-black) r g b / .1);
            }

            @media (max-width: 1270px) {
                padding-inline: var(--spacing-lg);
            }

            @media (max-width: 991.98px) {
                block-size: var(--block-size-header-sp);
            }
        }

        .p-header__inner {
            align-items: center;
            block-size: var(--block-size-header);
            display: grid;
            grid-template:
                "logo . menu" / max-content 1fr max-content;

            & .p-logo {
                grid-area: logo;
            }

            & .p-headerMenu {
                grid-area: menu;
            }

            @media (max-width: 991.98px) {
                block-size: max-content;
                grid-template:
                    "logo" var(--block-size-header-sp) "menu" / 1fr;
            }

            @media (max-width: 575.98px) {
                & img {
                    width: 80%;
                }
            }
        }

        .p-logo__link {
            display: inline-block;
        }

        .p-logo__image {
            inline-size: var(--inline-size-logo);
        }

        .p-headerMenu {
            display: grid;

            @media (max-width: 991.98px) {
                background-color: var(--color-base-white);
                grid-template-rows: 0fr;
                inline-size: 100%;
                inset-block-start: var(--block-size-header-sp);
                inset-inline-start: 0;
                overflow: hidden;
                position: absolute;
                transition: grid-template-rows var(--duration--normal) ease-in-out, box-shadow var(--duration--normal) ease-in-out;

                &.is-open {
                    box-shadow: 0 2px 5px rgb(from var(--color-black) r g b / .1);
                    grid-template-rows: 1fr;
                    max-block-size: calc(100dvb - var(--block-size-header-sp));
                    overflow: scroll;

                    & .p-headerMenu__inner {
                        overflow: scroll;
                    }
                }
            }
        }

        .p-headerMenu__inner {
            display: grid;
            grid-template: "secondary" "primary";
            padding-inline: var(--spacing-lg);
            row-gap: var(--spacing-sm);

            @media (max-width: 991.98px) {
                grid-template:
                    "primary" "secondary"
                    "." var(--spacing-xxs) / 1fr;
                overflow: hidden;
            }
        }

        .p-headerMenu__secondary {
            column-gap: var(--spacing-md);
            display: grid;
            grid-area: secondary;
            grid-template-columns: repeat(2, 200px);
            justify-content: end;

            @media (max-width: 991.98px) {
                grid-template-columns: repeat(2, var(--inline-size-button));
                justify-content: center;
                row-gap: var(--spacing-md);
            }

            @media (max-width: 575.98px) {
                grid-template-columns: 1fr;
            }
        }

        .p-gnav {
            grid-area: primary;
        }

        .p-gnav__list {
            column-gap: var(--spacing-xl);
            display: flex;
            justify-content: end;

            @media (max-width: 991.98px) {
                border-block-start: 1px solid var(--color-light-gray);
                flex-direction: column;
            }
        }

        .p-gnav__link {
            display: block;
            font-weight: var(--font-weight-medium);
            position: relative;
            transition: color var(--duration--normal) ease-in-out;

            &.is-active {
                color: var(--color-primary);

                &::after {
                    inline-size: 100%;
                }
            }

            &::after {
                background-color: currentColor;
                block-size: 2px;
                content: '';
                inline-size: 0;
                inset-block-end: calc(-1 * var(--spacing-xs));
                inset-inline-start: 0;
                position: absolute;
                transition: inline-size var(--duration--normal) ease-in-out;
            }

            @media (any-hover: hover) {
                &:hover {
                    color: var(--color-primary);
                }

                &:hover::after {
                    inline-size: 100%;
                }
            }

            @media (max-width: 991.98px) {
                border-block-end: 1px solid var(--color-light-gray);
                padding-block: var(--spacing-md);

                &.is-active {
                    color: currentColor;
                }

                &.is-active::after {
                    display: none;
                }
            }
        }

        .p-hamburger {
            display: none;

            @media (max-width: 991.98px) {
                display: block;
            }
        }

        .p-header__hamburger {
            inset-block-start: var(--spacing-lg);
            inset-inline-end: var(--spacing-lg);
            position: absolute;

            @media (max-width: 575.98px) {
                inset-block-start: 0;
                inset-inline-end: 0;
                padding: var(--spacing-lg);
            }
        }

        .p-hamburger__icon {
            block-size: 30px;
            cursor: pointer;
            display: inline-block;
            inline-size: 40px;
        }

        .p-hamburger__border {
            background: var(--color-base-black);
            border-radius: var(--border-radius-sm);
            display: block;
            height: 2px;
            margin: 8px 0;
            transition: transform var(--duration--normal), opacity var(--duration--normal);
        }

        .p-hamburger__input:checked+:where(.p-hamburger__icon)>:where(.p-hamburger__border) {
            &:nth-child(1) {
                transform: translateY(10px) rotate(45deg);
            }

            &:nth-child(2) {
                opacity: 0;
            }

            &:nth-child(3) {
                transform: translateY(-10px) rotate(-45deg);
            }
        }

        /* フッター */
        /* ======================================== */

        .p-footerCityscape {
            block-size: 300px;
            position: relative;
        }

        .p-footerCityscape__img {
            block-size: 100%;
            inline-size: 100%;
            inset: 0;
            object-fit: cover;
            position: absolute;
            z-index: var(--z-index-backward);
        }

        .p-footerMenu {
            column-gap: var(--spacing-2xl);
            display: grid;
            grid-template:
                "unav unav"
                ". ." var(--spacing-2xl) "information fnav"
                ". ." var(--spacing-xl) / 1fr max-content;

            & .p-unav {
                grid-area: unav;
            }

            & .p-footerInformation {
                grid-area: information;
                padding-inline-start: 8%;

                @media (max-width: 1270px) {
                    padding-inline: var(--spacing-lg);
                }
            }

            & .p-fnav {
                grid-area: fnav;
                padding-inline-end: var(--spacing-4xl);

                @media (max-width: 1270px) {
                    padding-inline: var(--spacing-lg);
                }
            }

            @media (max-width: 1270px) {
                padding-inline: 0;
            }

            @media (max-width: 991.98px) {
                grid-template:
                    "unav"
                    "." var(--spacing-2xl) "information"
                    "." var(--spacing-xl) "fnav"
                    "." var(--spacing-2xl) / 1fr;
            }

            @media (max-width: 575.98px) {
                grid-template:
                    "unav"
                    "." var(--spacing-lg) "information"
                    "." var(--spacing-lg) "fnav"
                    "." var(--spacing-2xl) / 1fr;
            }
        }

        .p-unav {
            border-block-end: 1px solid var(--color-light-gray);
            color: var(--color-dark-gray);
            font-weight: var(--font-weight-bold);
            padding-block: var(--spacing-md);
        }

        .p-unav__list {
            column-gap: var(--spacing-xl);
            display: flex;
            justify-content: center;

            @media (max-width: 575.98px) {
                column-gap: var(--spacing-lg);
            }
        }

        .p-unav__link {
            @media (any-hover: hover) {
                &:hover {
                    color: var(--color-primary);
                    text-decoration: underline;
                }
            }
            @media (max-width: 575.98px) {
                font-size: 15px;
            }
        }

        .p-footerInformation {
            display: grid;
            grid-template-rows: repeat(2, max-content);
            row-gap: var(--spacing-md);
        }

        .p-footerAddress {
            font-size: var(--font-size-sm);
            @media (max-width:575.98px) {
                font-size: 15px;
            }
        }

        .p-fnav__list {
            column-gap: var(--spacing-2xl);
            display: flex;
            justify-content: spacing-between;

            @media (max-width: 767.98px) {
                border-block-start: 1px solid var(--color-light-gray);
                flex-direction: column;
                row-gap: 0;
            }
        }

        .p-fnav__item {
            display: flex;
            flex-direction: column;
            row-gap: var(--spacing-md);

            @media (max-width: 767.98px) {
                row-gap: 0;
            }
        }

        .p-fnav__item>.p-fnav__link {
            font-weight: var(--font-weight-bold);

            @media (max-width: 767.98px) {
                border-block-end: 1px solid var(--color-light-gray);
                padding-block: var(--spacing-md);

            }
        }

        .p-fnav__link {
            display: block;

            @media (any-hover: hover) {
                &:hover {
                    color: var(--color-primary);
                    text-decoration: underline;
                }
            }
        }

        .p-fnav__childList {
            display: flex;
            flex-direction: column;
            padding-block: var(--spacing-xs);
            row-gap: var(--spacing-xs);

            @media (max-width: 767.98px) {
                border-block-end: 1px solid var(--color-light-gray);
            }

            @media (max-width: 575.98px) {
                font-size: 15px;
            }
        }

        .p-copyright {
            text-align: center;

            @media (max-width: 1270px) {
                padding-inline: 0;
            }
        }

        .p-copyright__writing {
            border-block-start: 1px solid var(--color-light-gray);
            color: var(--color-dark-gray);
            display: block;
            font-size: var(--font-size-xxs);
            padding: var(--spacing-xs) var(--spacing-xl);
        }

        /* ヒーロー */
        /* ======================================== */

        .p-topHero {
            block-size: 95dvb;
            position: relative;
            @media (max-width: 575.98px) {
                block-size: 75dvb;
            }
        }

        .p-topHero__img {
            block-size: 100%;
            inline-size: 100%;
            inset-block-start: 0;
            inset-inline-start: 0;
            object-fit: cover;
            position: absolute;
            z-index: var(--z-index-backward);
        }

        .p-topHero__imgsp {
            block-size: 100%;
            inline-size: 100%;
            inset-block-start: 0;
            inset-inline-start: 0;
            object-fit: cover;
            position: absolute;
            z-index: var(--z-index-backward);
        }

        .p-topHero__wave {
            block-size: 200px;
            inline-size: 100%;
            inset-block-end: 0;
            inset-inline-start: 0;
            position: absolute;

            @media (max-width: 575.98px) {
                block-size: 100px;
            }
        }

        .p-copy {
            display: grid;
            font-weight: var(--font-weight-bold);
            inset-block-start: 30%;
            position: absolute;


            @media (max-width:1270px) {
                inset-inline-start: var(--spacing-lg);
            }

            @media (max-width: 998.98px) {
                margin-left: 0;
            }

            @media (max-width: 767.98px) {
                inset-block-start: var(--spacing-4xl);
            }
        }

        .p-copy__main {
            font-size: clamp(var(--font-size-lg), 6vw, var(--font-size-4xl));
            letter-spacing: var(--letter-spacing-normal);
            text-shadow: 3px 3px 1px rgb(243, 242, 237);

            @media (max-width: 767.98px) {
                text-shadow: none;
            }

            & span {
                color: #967f49;
            }

            @media (max-width: 575.98px) {
                font-size: 26px;
            }
        }

        .p-copy__sub {
            font-size: clamp(var(--font-size-xs), 4vw, 1.71rem);
            letter-spacing: var(--letter-spacing-normal);
            text-shadow: 1.4px 1.4px 1px rgb(243, 242, 237);

            @media (max-width: 767.98px) {
                text-shadow: none;
            }

            @media(max-width:575.98px) {
                font-size: 16px;
                letter-spacing: .08em;
            }
        }

        .p-topic {
            background-color: #cf9100;
            border-radius: var(--border-radius-2xl) 0 0 var(--border-radius-xl);
            color: var(--color-white);
            display: inline-block;
            letter-spacing: var(--ls-loose);
            padding: var(--spacing-lg) var(--spacing-lg) var(--spacing-xl);
            position: fixed;
            top: 37%;
            right: 0;
            writing-mode: vertical-lr;
            transition: background-color .3s ease-in-out;
            z-index: 1;

            @supports (corner-shape:squircle) {
                corner-shape: squircle;
            }

            &::after {
                color: var(--color-white);
                content: '→';
                inset-block-start: unset;
                inset-block-end: var(--spacing-xs);
                inset-inline-end: 45%;
                position: absolute;
                transition: translate var(--duration--normal) ease-in-out;
                writing-mode: horizontal-tb;
            }

            @media (any-hover: hover) {
                &:hover {
                    background-color: color-mix(in srgb, #d9b84a 80%, var(--color-black));
                }

                &:hover::after {
                    translate: 4px 0;
                }
            }

            @media (max-width: 1250px) {
                position: absolute;
            }

            @media (max-width: 767.98px) {
                border-radius: var(--border-radius-md);
                padding: var(--spacing-lg) var(--spacing-2xl) var(--spacing-lg) var(--spacing-md);
                writing-mode: horizontal-tb;
                position: absolute;
                right: 5%;
                top: 57%;

                &::before {
                    inset-block-start: 50%;
                    inset-inline-end: var(--spacing-2xl);

                }

                &::after {
                    inset-block-start: 40%;
                    inset-inline-end: var(--spacing-lg);

                }

                @media (any-hover: hover) {
                    &:hover::after {
                        translate: 4px 0;
                    }
                }
            }

            @media (max-width: 575.98px) {
                padding: var(--spacing-md) var(--spacing-2xl) var(--spacing-md) var(--spacing-sm);

                &::before {
                    inset-inline-end: var(--spacing-xl);

                }

                &::after {
                    inset-block-start: 35%;
                    inset-inline-end: var(--spacing-md);

                }

            }
        }

        .p-topic__main {
            font-size: var(--font-size-md);
            font-weight: var(--font-weight-medium);

            @media (max-width: 767.98px) {
                font-size: 17px;
            }

            @media (max-width: 575.98px) {
                font-size: 16px;

            }
        }

        .p-topic__lead {
            font-size: var(--font-size-xs);
            font-weight: var(--font-weight-medium);

            @media (max-width: 767.98px) {
                font-size: 11px;
            }

            @media (max-width: 575.98px) {
                font-size: 12px;

            }
        }

        /* TOP - お知らせ */
        /* ======================================== */

        .p-topNews {
            padding-block: 0 var(--spacing-2xl);
        }

        .p-topNews__inner {
            display: grid;
            row-gap: var(--spacing-xl);
        }

        .p-topNews__body {
            display: grid;
            row-gap: var(--spacing-lg);
        }

        .p-topNews__link {
            display: grid;
            grid-template-columns: var(--inline-size-button);
            justify-content: end;

            @media (max-width: 575.98px) {
                grid-template-columns: 200px;
            }
        }

        /* TOP - 補償コンサルタントとは */
        /* ======================================== */

        .p-topAbout {
            background-color: var(--color-light-ivory);
            padding-block: var(--spacing-2xl);

            @media (max-width: 575.98px) {
                padding-block:var(--spacing-2xl);
            }
        }

        .p-topAbout__inner {
            display: grid;
            row-gap: var(--spacing-xl);
        }

        .p-topAbout__body {
            display: grid;
            gap: var(--spacing-xl) var(--spacing-2xl);
            grid-template:
                "consultants newsletter"
                "drama newsletter" / 2fr 1fr;

            & .p-topConsultants {
                grid-area: consultants;
            }

            & .p-topNewsletter {
                grid-area: newsletter;
            }

            & .p-topDrama {
                grid-area: drama;
            }

            @media (max-width: 900px) {
                gap: var(--spacing-2xl) var(--spacing-2xl);
            }

            @media (max-width: 767.98px) {
                grid-template:
                    "consultants"
                    "newsletter"
                    "drama" / 1fr;
            }
        }

        .p-topConsultants__inner {
            column-gap: var(--spacing-2xl);
            grid-template:
                "description img" / 1fr 1fr;

            & .p-topConsultants__description {
                grid-area: description;
            }

            & .p-topConsultants__imgWrapper {
                grid-area: img;
            }

            @media (max-width: 767.98px) {
                grid-template:
                    "img"
                    "description" / 1fr;
                row-gap: var(--spacing-lg);
            }
        }

        .p-topConsultants__description {
            align-self: flex-start;
            display: grid;
            grid-template:
                "lead"
                "." var(--spacing-lg) "text"
                "." var(--spacing-md) "link" / 1fr;

            & .p-topConsultants__lead {
                grid-area: lead;
            }

            & .p-topConsultants__text {
                grid-area: text;
                line-height: var(--line-height-loose);
                @media(max-width:575.98px) {
                   .c-paragraph {
                        text-align: justify;
                    } 
                }
            }

            & .p-topConsultants__link {
                grid-area: link;
            }
        }

        .p-topConsultants__link {
            display: grid;
            grid-template-columns: var(--inline-size-button);

            @media (max-width:575.98px) {
                justify-content: center;
            }
        }

        .p-topConsultants__img {
            aspect-ratio: 8/5;
            border-radius: 20px;
            inline-size: 100%;
            object-fit: cover;

            @supports (corner-shape:squircle) {
                corner-shape: squircle;
            }

            @media (max-width: 767.98px) {
                aspect-ratio: var(--aspect-ratio-wide-screen);
            }
        }

        .p-topNewsletter__inner {
            display: grid;
            row-gap: 30px;
            border-left: 1px solid var(--color-light-gray);

            @media (max-width: 767.98px) {
                border-left: 0;
                row-gap: var(--spacing-lg);
            }
        }

        .p-topNewsletter__body {
            display: grid;
            row-gap: 20px;

             @media (max-width: 767.98px) {
                row-gap: var(--spacing-md);
            }
        }

        .p-topNewsletter__link {
            display: grid;
            row-gap: var(--spacing-sm);
            grid-template-columns: var(--inline-size-button);
            justify-content: center;

            @media(max-width:575.98px) {
                row-gap: var(--spacing-sm);
                justify-content: center;
            }
        }

        .p-topDrama__inner {
            display: grid;
            row-gap: var(--spacing-md);
        }

        .p-topDrama__body {
            

            & .p-topDrama__text {
                display: grid;
                row-gap: var(--spacing-md);
            }

            & .c-paragraph {
                margin-bottom: 1.6rem;
            }

            @media(max-width:1250px) {
                & .c-paragraph {
                    margin-bottom: 0;
                }
            }

            & .p-topDrama__imgWrapperframe {
                position: relative;
                width: 75%;

                & .p-topDrama__imgWrapper {
                    cursor: pointer;
                    display: block;
                    overflow: hidden;

                    @media (any-hover: hover) {
                        &:hover .p-topDrama__img {
                            scale: 1.1;
                        }
                    }
                    .p-topDrama__img {
                        transition: scale var(--duration--short) ease-in-out;
                    }
                }
                @media(max-width:767.98px) {
                    width: 100%;
                }
            }
            
        }

        @media(max-width:575.98px) {
            .c-paragraph {
                font-size: 15px;
            }
        }

        .p-topDrama__link {
            display: block;
        }

        .p-topDrama__img {
            inline-size: 100%;

            @supports (corner-shape:squircle) {
                corner-shape: squircle;
            }
        }

        #modal-video {
            cursor: pointer;
            display: flex;
            justify-content: center;
            align-items: center;
            position: fixed;
            z-index: 8;
            top: 0;
            left: 0;
            width: 100vw;
            height: 100vh;
            background-color: rgba(0, 0, 0, 0.75);
            transition: 0.5s;
            }
            #modal-video.close {
            filter: opacity(0);
            visibility: hidden;
            }
            #modal-video.open {
            filter: opacity(1);
            visibility: visible;
            }
            #modal-video iframe {
            width: 60vw;
            height: 33.9vw;
            }
            @media (max-width: 991.98px) {
            #modal-video iframe {
                width: 85vw;
                height: 55vw;
            }
            #main .text-right{
                text-align: left!important;
            }

            
        }

        #modal-video::before {
            color: var(--color-white-60);
            content: '×';
            position: absolute;
            transform: translate(32vw, -29vh);
            z-index: 999;
            font-size: 50px;

            @media (max-width: 992.98px) {
                transform: translate(37vw, -24vh);
                font-size: 40px;
            }
        }

        body.no_scroll{
            overflow: hidden;
        }

        .p-topNewsletter__imgWrapper {
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .p-topNewsletter__imgWrapper img {
            width: 78.5%;
        }

        

        /* TOP - 協会について */
        /* ======================================== */

        .p-topAssociation {
            padding-block: var(--spacing-3xl) var(--spacing-4xl);
            @media (max-width: 575.98px) {
                padding-block:var(--spacing-2xl) var(--spacing-4xl);
            }
        }

        .p-topAssociation__inner {
            display: grid;
            row-gap: var(--spacing-xl);
        }

        .p-topAssociation__list {
            display: grid;
            gap: var(--spacing-xl);
            grid-template-columns: repeat(2, 1fr);

            @media (max-width: 767.98px) {
                grid-template-columns: 1fr;
            }

            @media (max-width: 575.98px) {
                gap: var(--spacing-lg);
            }
        }

        .p-topAssociation__item {
            position: relative;
        }

        .p-topAssociation__link {
            display: block;
            overflow: hidden;

            @media (any-hover: hover) {
                &:hover .p-topAssociation__img {
                    scale: 1.1;
                }
            }

            @media (any-hover: hover) {
                &:hover::after {
                    block-size: calc(100% - var(--spacing-md));
                    inline-size: calc(100% - var(--spacing-md));
                }
            }
        }

        .p-topAssociation__img {
            aspect-ratio: var(--aspect-ratio-banner);
            filter: brightness(90%) blur(0px);
            inline-size: 100%;
            object-fit: cover;
            transition: scale var(--duration--short) ease-in-out;

            @supports (corner-shape:squircle) {
                corner-shape: squircle;
            }

            @media (max-width: 575.98px) {
                filter: brightness(90%) blur(0px);
            }
        }

        .p-topAssociation__title {
            color: var(--color-white);
            inset: 0;
            place-content: center;
            position: absolute;
            text-align: center;
        }

        /* 建物移転のお話が来た方へ - 建物移転が必要な理由 */
        /* ======================================== */

        .p-announceReason {
            padding-block: var(--spacing-2xl) var(--spacing-lg);

            @media (max-width: 767.98px) {
                padding-block: var(--spacing-2xl) var(--spacing-3xl);
            }

            @media (max-width: 575.98px) {
                padding-block: var(--spacing-2xl);
            }
        }

        .p-announceReason__inner {
            display: grid;
            row-gap: var(--spacing-xl);
        }

        .p-announceReason__body {
            column-gap: var(--spacing-2xl);
            display: grid;
            grid-template:
                "description img" / 1fr 1fr;

            @media (max-width: 767.98px) {
                grid-template:
                    "img"
                    "description" / 1fr;
                row-gap: var(--spacing-lg);
            }

            & .p-announceReason__description {
                grid-area: description;
            }

            & .p-announceReason__imgWrapper {
                grid-area: img;
            }
        }

        .p-announceReason__description {
            align-self: flex-start;
            display: grid;
            row-gap: var(--spacing-md);
        }

        .p-announceReason__list {
            list-style-type: disc;
            padding-inline-start: var(--spacing-lg);
        }

        .p-announceReason__img {
            aspect-ratio: var(--aspect-ratio-wide-screen);
            inline-size: 100%;
            object-fit: cover;

            @supports (corner-shape:squircle) {
                corner-shape: squircle;
            }

            @media(min-width:767.98px) {
                position: relative;
                top: -17%;
            }

            @media (max-width: 767.98px) {
                aspect-ratio: var(--aspect-ratio-wide-screen);
            }
        }

        /* 建物移転のお話が来た方へ - 補償の種類 */
        /* ======================================== */

        .p-announceType {
            background-color: var(--color-light-ivory);
            padding-block: var(--spacing-3xl) var(--spacing-3xl);
            @media (max-width: 575.98px) {
                padding-block: var(--spacing-2xl);
            }
        }

        .p-announceType__inner {
            display: grid;
            row-gap: var(--spacing-xl);

            @media (max-width:575.98px) {
                row-gap: 35px;
            }
        }

        /* 建物移転のお話が来た方へ - 補償を受けるまでの流れ */
        /* ======================================== */

        .p-announceFlow {
            padding-block: var(--spacing-xl) var(--spacing-3xl);
            @media (max-width: 575.98px) {
                padding-block: var(--spacing-2xl);
            }
        }

        .p-announceFlow__inner {
            display: grid;
            row-gap: var(--spacing-xl);
        }

        .p-announceFlow__list {
            display: grid;
            row-gap: var(--spacing-xl);
        }

        .p-announceFlow__item {
            column-gap: var(--spacing-xl);
            display: grid;
            grid-template-columns: auto 1fr;

            @media (max-width: 767.98px) {
                grid-template-columns: 1fr;
                row-gap: var(--spacing-lg);
            }
        }

        .p-announceFlow__imgWrapper {
            aspect-ratio: 1;
            background-color: var(--color-light-ivory);
            border-radius: var(--border-radius-md);
            display: grid;
            inline-size: 200px;
            place-content: center;

            @supports (corner-shape:squircle) {
                corner-shape: squircle;
            }

            @media (max-width: 767.98px) {
                aspect-ratio: unset;
                inline-size: 100%;
                padding-block: var(--spacing-xl);
            }
        }

        .p-announceFlow__img {
            inline-size: 100px;
        }

        .p-announceFlow__content {
            align-self: flex-start;
            display: grid;
            padding-block-start: var(--spacing-xs);
            row-gap: var(--spacing-md);

            @media (max-width: 767.98px) {
                padding-block-start: unset;
            }
        }

        /* .p-announceBook__inner {
           display: grid;
            grid-template-columns: 1.035fr 1fr; 
            gap: 50px; 

            @media(max-width:575.98px) {
                grid-template-columns: 1fr;
            }
        }

        .p-announceBookmain__inner img {
        width: 100%;
        height: auto;
        display: block;
        }

        .p-announceBookdetail__inner {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 20px;

            & p {
                text-align: center;
                margin-top: 8px; 
            }

            @media(max-width:575.98px) {
                grid-template-columns: 1fr;
            }
        }

        .p-announceBookdetailitem__body img {
            width: 100%;
            height: auto;
            display: block;
        }*/

        .p-announceBookdetail__inner {
           display: flex;
            gap: 20px;

            & p {
                    text-align: center;
            }

            & img {
                    margin-bottom: 5px;
                }

            @media(max-width:575.98px) {
                display: grid;
                grid-template-columns: 1fr;
                text-align: center;
                width: 80%;

                @media(max-width:575.98px) {
                    margin: 0 auto;
                }

                & img {
                    width: 100%;
                    height: auto;
                    display: block;
                    margin-bottom: 10px;
                }
            }
        }

        .p-announceBook {
            background-color: var(--color-light-ivory);
            border-radius: var(--border-radius-md);
            @media(max-width:575.98px) {
                background-color: transparent;
            }
        }


        .p-announceBook__inner02 {
           display: grid;
            grid-template-columns: 4fr 5fr; 
            gap: 0px; 
            max-width: 85%;
            margin: 0 auto;
            padding: 58px 30px 33px 20px;
            

            @media(max-width:575.98px) {
                grid-template-columns: 1fr;
                padding: 0 0 20px;
            }
        }

        .p-announceBookmain__inner02 {
            width: 83.5%;
            margin: 0 auto;
            overflow: hidden;

            & p {
                text-align: center;
                margin-top: 8px; 

                @media(max-width:575.98px) {
                    font-weight: bold;
                    margin-bottom: 20px;
                    font-size: 15px;
                }
            }

            & .p-announceBookmaindetail__inner02 {
                overflow: hidden;
            }

            & img {
                
                width: 100%;
                height: auto;
                display: block;
                transition: transform 0.3s ease;
            }

            @media (any-hover: hover) {
                &:hover img {
                    transform: scale(1.1);
                }
            }

            @media(max-width:575.98px) {
                width: 100%;
            }
        }

        .p-announceBookdetail__inner02 {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 20px 0px;

            & p {
                text-align: center;
                margin-top: 8px;
                
                @media(max-width:575.98px) {
                    font-weight: bold;
                    font-size: 15px;
                }
            }

            @media(max-width:575.98px) {
                grid-template-columns: 1fr;
            }
        }

        .p-announceBookdetailitem__body02{
            

            & a {
                display: block; 
               width: 60%;
               margin: 0 auto;
               overflow: hidden;

               @media(max-width:575.98px) {
                    width: 100%;
                }
            }
            
            & img {
                width: 100%;
                height: auto;
                display: block;
                transition: transform 0.3s ease;
            }

            @media (any-hover: hover) {
                & a:hover img {
                    transform: scale(1.1); 
                }
            }

        }

        .p-announceBookdetailitem__source {
            margin-top: 20px;
            max-width: 97%;
            font-size: 14px;
            text-align: right;

            & a:nth-child(2) {
                text-decoration: underline;
            }

            & a:hover {
                color: var(--color-primary);
            }
            @media(max-width:575.98px) {
                margin-top: 0;
                font-size: 13.5px;
                text-align: left;
            }
        }

        .p-announceBookdetailitem__source02 {
            max-width: 97%;
            text-align: right;
            font-size: 14px;

            & a:hover {
                color: var(--color-primary);
            }
            @media(max-width:575.98px) {
                margin-top: 0;
                font-size: 13.5px;
                text-align: left;
            }
        }
        
        

        /* 建物移転のお話が来た方へ - よくある質問 */
        /* ======================================== */

        .p-announceFaq {
            padding-block-end: var(--spacing-4xl);

            @media (max-width: 575.98px) {
                padding-block: var(--spacing-lg) var(--spacing-4xl);
            }
        }

        .p-announceFaq__inner {
            display: grid;
            row-gap: var(--spacing-xl);
        }

        /* 補償コンサルタントとは - 補償とは */
        /* ======================================== */

        .p-aboutIntro {
            padding-block: var(--spacing-2xl) var(--spacing-2xl);
            
            @media (max-width: 575.98px) {
                padding-block: var(--spacing-2xl);
            }
        }

        .p-aboutIntro__inner {
            display: grid;
            row-gap: var(--spacing-xl);
        }

        /* 補償コンサルタントとは - 補償コンサルタントとは */
        /* ======================================== */

        .p-aboutConsultants {
            background-color: var(--color-light-ivory);
            padding-block: var(--spacing-3xl) var(--spacing-xl);

            @media (max-width: 767.98px) {
                padding-block: var(--spacing-3xl);
            }

            @media (max-width: 575.98px) {
                padding-block: var(--spacing-2xl);
            }
        }

        .p-aboutConsultants__inner {
            display: grid;
            row-gap: var(--spacing-xl);
        }

        .p-aboutConsultants__body {
            column-gap: var(--spacing-2xl);
            display: grid;
            grid-template:
                "description img" / 1fr 1fr;

            @media (max-width: 767.98px) {
                grid-template:
                    "img"
                    "description" / 1fr;
                row-gap: var(--spacing-lg);
            }

            & .p-aboutConsultants__description {
                grid-area: description;
            }

            & .p-aboutConsultants__imgWrapper {
                grid-area: img;
            }
        }

        .p-aboutConsultants__img {
            aspect-ratio: var(--aspect-ratio-wide-screen);
            inline-size: 100%;
            object-fit: cover;

            @supports (corner-shape:squircle) {
                corner-shape: squircle;
            }

            @media(min-width:767.98px) {
                position: relative;
                top: -17%;
            }

            @media (max-width: 767.98px) {
                aspect-ratio: var(--aspect-ratio-wide-screen);
            }
        }

        /* 補償コンサルタントとは - 部門 */
        /* ======================================== */

        .p-aboutDepartment {
            padding-block: var(--spacing-2xl) var(--spacing-4xl);

            @media (max-width: 575.98px) {
                padding-block: var(--spacing-2xl) var(--spacing-3xl);
            }
        }

        .p-aboutDepartment__inner {
            display: grid;
            row-gap: var(--spacing-xl);
        }

        .p-aboutDepartment__body {
            display: grid;
            row-gap: var(--spacing-xl);
        }

        .p-aboutDepartment__img {
            aspect-ratio: var(--aspect-ratio-banner);
            inline-size: 100%;
            object-fit: cover;
        }

        .p-aboutDepartment__list {
            display: grid;
            row-gap: var(--spacing-xl);
        }

        .p-aboutDepartment__item {
            column-gap: var(--spacing-xl);
            display: grid;
            grid-template-columns: max-content 1fr;
        }

        @media (max-width: 767.98px) {
            .p-aboutDepartment__item {
                grid-template-columns: 1fr;
                row-gap: var(--spacing-lg);
            }
        }

        .p-aboutDepartment__iconWrapper {
            aspect-ratio: var(--aspect-ratio-square);
            background-color: var(--color-light-ivory);
            border-radius: var(--border-radius-md);
            display: grid;
            inline-size: 200px;
            place-content: center;

            @supports (corner-shape:squircle) {
                corner-shape: squircle;
            }

            @media (max-width: 767.98px) {
                aspect-ratio: unset;
                inline-size: 100%;
                padding-block: var(--spacing-xl);
            }
        }

        .p-aboutDepartment__icon {
            inline-size: 100px;
        }

        .p-aboutDepartment__content {
            align-self: flex-start;
            display: grid;
            padding-block-start: var(--spacing-sm);
            row-gap: var(--spacing-md);

            @media (max-width: 767.98px) {
                padding-block-start: unset;
            }
        }

        /* 協会について - TOP */
        /* ======================================== */

        .p-associationSummary {
            padding-block: var(--spacing-2xl) var(--spacing-4xl);

            @media (max-width: 575.98px) {
                padding-block: var(--spacing-2xl) var(--spacing-3xl);

                .p-associationSummary__description {
                    font-size: 15px;
                }

                .p-associationSummary__title {
                    margin-top: 12px;
                }

            }
        }

        .p-associationSummary__inner {
            display: grid;
            row-gap: var(--spacing-xl);
        }

        .p-associationSummary__list {
            display: grid;
            gap: var(--spacing-xl);
            grid-template-columns: repeat(2, 1fr);

            @media (max-width: 767.98px) {
                grid-template-columns: 1fr;
            }
        }

        .p-associationSummary__link {
            display: grid;
            row-gap: var(--spacing-md);

            @media (max-width: 575.98px) {
                row-gap: var(--spacing-xxs);
            }
        }

        @media (any-hover: hover) {
            .p-associationSummary__link:hover .p-associationSummary__img {
                scale: 1.1;
            }

            .p-associationSummary__link:hover .p-associationSummary__imgWrapper::before {
                background-color: var(--color-primary);
                border-color: var(--color-primary);
            }

            .p-associationSummary__link:hover .p-associationSummary__imgWrapper::after {
                color: var(--color-white);
            }
        }

        .p-associationSummary__imgWrapper {
            overflow: hidden;
            position: relative;

            &::before {
                aspect-ratio: 1;
                background-color: var(--color-white);
                border: 1px solid var(--color-light-gray);
                border-radius: 50%;
                content: '';
                inline-size: 48px;
                inset-block-end: var(--spacing-lg);
                inset-inline-end: var(--spacing-lg);
                position: absolute;
                transition: background-color var(--duration--short) ease-in-out, border-color var(--duration--short) ease-in-out;
                z-index: var(--z-index-forward);

                @media(max-width:575.98px) {
                    inset-block-end: var(--spacing-md);
                    inset-inline-end: var(--spacing-md);
                }
            }

            &::after {
                aspect-ratio: 1;
                background-color: currentColor;
                color: var(--color-primary);
                content: '';
                inline-size: 20px;
                inset-block-end: 28px;
                inset-inline-end: 36px;
                mask-image: var(--icon-chevron-right);
                mask-repeat: no-repeat;
                mask-position: center;
                mask-size: contain;
                position: absolute;
                transition: color var(--duration--short) ease-in-out;
                translate: 0 -50%;
                z-index: var(--z-index-forward);

                @media(max-width:575.98px) {
                    inset-block-end: 20px;
                    inset-inline-end: 30px;
                }
            }
        }

        .p-associationSummary__img {
            aspect-ratio: var(--aspect-ratio-wide-screen);
            inline-size: 100%;
            object-fit: cover;
            transition: scale var(--duration--short) ease-in-out;
        }

        /* 会長あいさつ - 本文 */
        /* ======================================== */

        .p-messageContent {
            padding-block: var(--spacing-2xl) var(--spacing-4xl);

            @media (max-width: 575.98px) {
                padding-block: var(--spacing-2xl) var(--spacing-3xl);

            }
        }

        .p-messageContent__inner {
            display: grid;
            row-gap: var(--spacing-md);
        }

        .p-messageContent__body {
            column-gap: var(--spacing-3xl);
            display: grid;
            grid-template:
                "lead img"
                ". img" var(--spacing-lg) "description img"
                ". img" var(--spacing-md) "author img"
                ". img" 1fr / 3fr 2fr;

            @media (max-width: 991.98px) {
                grid-template:
                    "img"
                    "." var(--spacing-xs) "lead"
                    "." var(--spacing-xs) "description"
                    "." var(--spacing-md) "author" / 1fr;
            }

            & .p-messageContent__lead {
                grid-area: lead;

                @media (max-width:575.98px) {
                    width: 95%;
                    text-align: justify;
                }

                @media(max-width:430px) {
                    margin: 0 auto;
                }
            }

            & .p-messageContent__description {
                grid-area: description;
                text-align: justify;
                @media(max-width:575.98px) {
                    width: 95%;
                }

                @media(max-width:430px) {
                    margin: 0 auto;
                }
            }

            & .p-messageContent__author {
                grid-area: author;
                text-align: right;
                margin-right: 10px;

                @media (max-width:575.98px) {
                    margin-right: 6px;

                    .p-messageContent__association {
                        font-size: 15px;
                    }
                }

                @media (max-width:430px) {
                    margin-right: 9px;
                }
            }

            & .p-messageContent__imgWrapper {
                grid-area: img;
            }
        }

        .p-messageContent__name {
            font-size: 20px;

            @media(max-width:575.98px) {
                font-size: 17px;

            }
        }

        .p-messageContent__img img {
            inline-size: 100%;
            object-fit: cover;

            @supports (corner-shape:squircle) {
                corner-shape: squircle;
            }

            @media (max-width: 991.98px) {
                aspect-ratio: var(--aspect-ratio-wide-screen);
            }
        }

        /* 組織と所掌職務 - 組織図 */
        /* ======================================== */

        .p-organizationMap {
            padding-block-start: var(--spacing-2xl);
        }

        .p-organizationMap__inner {
            display: grid;
            row-gap: var(--spacing-xl);
        }

        .p-organizationMap__body {
            text-align: center;
        }

        .p-organizationMap__img {
            inline-size: 96%;

            @media (max-width: 767.98px) {
                inline-size: 100%;
            }
        }

        .p-organizationMap__img2 {
            inline-size: 73%;

            @media (max-width: 767.98px) {
                inline-size: 100%;
            }
        }

        .p-organizationMap__text {
            margin-top: 0.4rem;
            @media (max-width:575.98px) {
                font-size: 15px;
            }
        }

        /* 組織と所掌職務 - 役員名簿 */
        /* ======================================== */

        .p-organizationMember {
            padding-block-start: var(--spacing-3xl);
        }
        
        @media (max-width: 575.98px) {
            .p-organizationMember {
                padding-block: var(--spacing-2xl);
            }
        }
            .p-organizationMember__inner {
            display: grid;
            row-gap: var(--spacing-xl);

            @media (max-width: 767.98px) {
                & .p-organizationMember__body tbody tr:nth-child(13) td:nth-child(n+3) {
                    display: none;
                }

                & .p-organizationMember__body tbody tr:nth-child(13) td:nth-child(2) {
                    padding-block-end: var(--spacing-sm);
                }
            }
        }


        /* 組織と所掌職務 - 委員会名簿 */
        /* ======================================== */

        .p-organizationCommitee {
            padding-block-start: var(--spacing-3xl);
            padding-block-end: var(--spacing-4xl);
            @media (max-width: 575.98px) {
                padding-block:var(--spacing-xl) var(--spacing-3xl);
            }
        }

        .p-organizationCommitee__inner {
            display: grid;
            row-gap: var(--spacing-xl);
        }

        /* 協会へのアクセス - 本文 */
        /* ======================================== */

        .p-accessContent {
            padding-block: var(--spacing-2xl) var(--spacing-4xl);
            @media (max-width: 575.98px) {
                padding-block: var(--spacing-2xl) var(--spacing-3xl);

            }
        }

        .p-accessContent__address {
            @media (max-width:575.98px) {
                font-size: 15px;
            }
        }

        .p-accessContent__inner {
            display: grid;
            row-gap: var(--spacing-xl);
        }

        .p-accessContent__body {
            display: grid;
            row-gap: var(--spacing-xl);
        }

        .p-accessContent__map {
            aspect-ratio: 16 / 6;
            inline-size: min(1150px, 100%);
        }

        @media (max-width: 575.98px) {
            .p-accessContent__map {
                aspect-ratio: var(--aspect-ratio-square);
            }
        }

        .p-accessContent__route {
            display: grid;
            row-gap: var(--spacing-md);
        }

        /* 会員紹介 - 本文 */
        /* ======================================== */

        .p-memberContent {
            padding-block: var(--spacing-2xl) var(--spacing-4xl);
            @media (max-width: 575.98px) {
                padding-block: var(--spacing-2xl) 0;

                & .p-memberTable {
                    display: none;
                }
            }
        }

        .p-memberContent__inner {
            display: grid;
            row-gap: var(--spacing-xl);
        }

        .p-memberContent__body {
            display: grid;
            row-gap: var(--spacing-xl);

            @media (max-width:575.98px) {
                font-size: 15px;
            }
        }

        .p-memberDepartment__list {
            display: grid;
            gap: var(--spacing-xs) var(--spacing-md);
            grid-template-columns: repeat(4, max-content);
            justify-content: end;

            @media (max-width: 767.98px) {
                grid-template-columns: repeat(2, max-content);
            }

            @media (max-width: 575.98px) {
                justify-content: center;
            }
        }

        .p-memberDepartment__item {
            align-items: center;
            display: grid;
            grid-template-columns: repeat(2, max-content);
        }

        .p-memberDepartment__initial {
            border-radius: var(--border-radius-md);
            color: var(--color-white);
            line-height: 1;
            padding: var(--spacing-xs);

            @supports (corner-shape:squircle) {
                corner-shape: squircle;
            }
        }

        .p-member-tab__list {
            column-gap: var(--spacing-xs);
            display: grid;
            grid-template-columns: repeat(3, 1fr);

            @media (max-width: 575.98px) {
                grid-template-columns: 1fr;
                row-gap: var(--spacing-xs);
                display: none;
            }
        }

        .p-memberTable {
            inline-size: 100%;
            border-color: var(--color-light-gray);
        }

        .p-memberTable__head {
            @media (max-width: 991.98px) {
                display: none;
            }
        }

        .p-memberTable__heading {
            background-color: color-mix(in srgb, var(--color-primary) 80%, var(--color-black));
            color: var(--color-white);
            font-weight: var(--font-weight-medium);
            padding-block: var(--spacing-lg);
            text-align: center;
        }

        .p-memberTable__row {
            @media (max-width: 991.98px) {
                display: grid;
                grid-template-columns: 1fr;
            }
        }

        .p-memberTable__data {
            padding: var(--spacing-sm);
            &:nth-child(4),
            &:nth-child(6) {
                text-align: center;
            }

            @media (max-width: 991.98px) {
                &:first-child {
                    background-color: var(--color-primary);
                    color: var(--color-white);
                }

                &:not(:first-child):not(:last-child) {
                    padding-block-end: 0;
                }

                &:not(:first-child) {
                    border-block: unset;
                    border-inline: 1px solid var(--color-light-gray);
                }

                &:last-child {
                    display: flex;
                }

                &:nth-child(4),
                &:nth-child(6) {
                    text-align: start;
                }
            }

            @media (max-width: 767.98px) {
                &:nth-child(6) {
                    justify-content: center;
                }
            }

            @media (max-width: 575.98px) {
                &:nth-child(n+2):nth-child(-n+4) {
                    padding-top: 6px;
                }

                &:nth-child(5) {
                    padding-top: 8px;
                }

                &:nth-child(6):not(:has(a)) {
                    padding-bottom: 2px;

                }

                &:first-child {
                    background-color:#e5e5e5;
                    color: var(--color-base-black);
                    border-inline: 1px solid var(--color-light-gray);
                }
            }
        }

        @media(max-width:575.98px) {
            .p-memberTable__dataframe {
                border-bottom: 1px solid var(--color-light-gray);
            }
        }

        .p-memberTable__list {
            display: grid;
            gap: var(--spacing-xs);
            grid-template-columns: repeat(4, max-content);
            justify-content: center;

            @media (max-width: 991.98px) {
                justify-content: start;
            }

            @media (max-width: 575.98px) {
                gap: 0;
                justify-content: space-between;
                grid-template-columns: repeat(8, max-content);
                
            }
        }

        .p-memberTable__item {
            border-radius: var(--border-radius-md);
            color: var(--color-white);
            line-height: 1;
            padding: var(--spacing-xs);

            @supports (corner-shape:squircle) {
                corner-shape: squircle;
            }

            &:not(.is-active) {
                visibility: hidden;
            }
        }

        .p-memberDepartment__item:nth-child(1) .p-memberDepartment__initial,
        .p-memberTable__item:nth-child(1) {
            background-color: #911121;
        }

        .p-memberDepartment__item:nth-child(2) .p-memberDepartment__initial,
        .p-memberTable__item:nth-child(2) {
            background-color: #C2D037;
        }

        .p-memberDepartment__item:nth-child(3) .p-memberDepartment__initial,
        .p-memberTable__item:nth-child(3) {
            background-color: #F2BF17;
        }

        .p-memberDepartment__item:nth-child(4) .p-memberDepartment__initial,
        .p-memberTable__item:nth-child(4) {
            background-color: #357F29;
        }

        .p-memberDepartment__item:nth-child(5) .p-memberDepartment__initial,
        .p-memberTable__item:nth-child(5) {
            background-color: #106AB4;
        }

        .p-memberDepartment__item:nth-child(6) .p-memberDepartment__initial,
        .p-memberTable__item:nth-child(6) {
            background-color: #693D8C;
        }

        .p-memberDepartment__item:nth-child(7) .p-memberDepartment__initial,
        .p-memberTable__item:nth-child(7) {
            background-color: #8d764b;
        }

        .p-memberDepartment__item:nth-child(8) .p-memberDepartment__initial,
        .p-memberTable__item:nth-child(8) {
            background-color: #37A2BF;
        }

        .p-memberTable__link {
            border: 1px solid currentColor;
            border-radius: var(--border-radius-md);
            padding: var(--spacing-xs) var(--spacing-lg);
            transition: background-color var(--duration--short) ease-in-out;
            white-space: nowrap;

            @supports (corner-shape:squircle) {
                corner-shape: squircle;
            }

            @media (any-hover: hover) {
                &:hover {
                    background-color: var(--color-light-gray);
                }
            }

            @media (max-width: 767.98px) {
                padding: var(--spacing-xs) var(--spacing-xl);
            }
        }

        .p-memberContent__body table thead th:first-child, .p-memberContent__body table tbody tr:nth-child(-n+45) td:first-child {
            width: 24%;
        }

        .p-memberContent__body table thead th:nth-child(2), .p-memberContent__body table tbody tr:nth-child(-n+45) td:nth-child(2) {
            width: 24%;
        }

        @media (max-width: 991.98px) {
            .p-memberContent__body table thead th:first-child, .p-memberContent__body table tbody tr:nth-child(-n+45) td:first-child {
                width: 100%;
            }

            .p-memberContent__body table thead th:nth-child(2), .p-memberContent__body table tbody tr:nth-child(-n+45) td:nth-child(2) {
                width: 100%;
            }
        }

        @media (max-width: 575.98px) {
            .p-memberContent__body table thead th:nth-child(2), .p-memberContent__body table tbody tr:nth-child(-n+45) td:nth-child(2) {
                padding-top: 10px;
            }
        }

        /* お知らせ - 一覧 */
        /* ======================================== */

        .p-newsSummary {
            padding-block: var(--spacing-2xl) var(--spacing-4xl);
            @media (max-width: 575.98px) {
                padding-block: var(--spacing-2xl) var(--spacing-3xl);
            }
        }

        .p-newsSummary__inner {
            display: grid;
            row-gap: var(--spacing-xl);
        }

        .p-newsSummary__body {
            display: grid;
            row-gap: var(--spacing-xl);
        }

        #categoryList {
            column-gap: var(--spacing-md);
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            text-align: center;

            @media (max-width: 575.98px) {
                grid-template-columns: 1fr;
                row-gap: var(--spacing-md);
            }
        }

        .categoryBtn {
            border: 1px solid var(--color-light-gray);
            border-radius: var(--border-radius-md);
            padding-block: var(--spacing-sm);

            @media (any-hover: hover) {
                &:nth-child(1):hover {
                    color: var(--color-white);
                    font-weight: var(--font-weight-bold);
                    background-color: rgb(141, 133, 128);
                }

                &:nth-child(2):hover {
                    color: var(--color-white);
                    font-weight: var(--font-weight-bold);
                    background-color: var(--color-primary);
                }

                &:nth-child(3):hover {
                    color: var(--color-white);
                    font-weight: var(--font-weight-bold);
                    background-color: var(--color-secondary);
                }
            }

            @supports (corner-shape:squircle) {
                corner-shape: squircle;
            }
        }

        #pagination {
            column-gap: var(--spacing-xs);
            display: flex;
            justify-content: center;

            & a {
                border: 1px solid var(--color-light-gray);
                border-radius: var(--border-radius-sm);
                padding: var(--spacing-xxs) var(--spacing-sm);
            }
        }

        #pagination .paginationActive {
            color: var(--color-white);
            background-color: var(--color-primary);
        }

        #pagination a:not(.paginationActive):hover {
            background-color: var(--color-light-gray);
        }

        /* 会員紹介 - 本文 */
        /* ======================================== */

        .p-memberContentsp {
            padding-block: var(--spacing-2xl) var(--spacing-4xl);
            display: none;

            & details:last-child {
                border-bottom: 1px solid var(--color-light-gray);
                @media (max-width: 575.98px) {
                    border-bottom: none;
                }
            }
            @media (max-width: 575.98px) {
                padding-block: 0 var(--spacing-3xl);
                display: block;
                
            }
        }

        .p-memberContentsp__inner {
            display: grid;
            row-gap: var(--spacing-xl);

            @media(max-width:575.98px) {
                row-gap: var(--spacing-xs);
            }
        }

        /* お知らせ - 詳細 */
        /* ======================================== */

        .p-detailContent {
            padding-block: var(--spacing-2xl) var(--spacing-4xl);
            @media (max-width: 575.98px) {
                padding-block: var(--spacing-2xl) var(--spacing-3xl);
            }
        }

        .p-article {
            display: grid;
            row-gap: var(--spacing-lg);
        }

        .p-article__link {
            display: grid;
            grid-template-columns: var(--inline-size-button);
            justify-content: center;
        }

        .p-article__file {
            color: var(--color-primary);
            text-decoration: underline;
        }

        .p-article__gallery {
            column-gap: var(--spacing-md);
            display: grid;
            grid-template-columns: repeat(4, 1fr);
        }

        .p-article-modal {
            display: none;
        }

        .p-article-modal.is-show {
            display: block;
            inset: 0;
            position: fixed;
            z-index: 2000;
        }

        .p-article-modal__overlay {
            background-color: rgb(from var(--color-black) r g b / .5);
            inset: 0;
            position: fixed;
            z-index: 3000;
        }

        .p-article-modal__close {
            aspect-ratio: 1;
            line-height: 5rem;
            position: absolute;
            right: 3rem;
            top: 3rem;
            width: 5rem;
        }

        .p-article-modal__image {
            left: 50%;
            max-height: calc(100svh - 16rem);
            max-width: calc(100svw - 8rem);
            position: absolute;
            translate: -50% -50%;
            top: 50%;
            z-index: 4000;
        }

        .p-article-modal__close::after {
            content: var(--content-close);
            font-family: bootstrap-icons;
            font-size: 5rem;
            font-weight: 700;
        }

        /* お問い合わせ - 電話 */
        /* ======================================== */

        .p-contactTel {
            padding-block: var(--spacing-2xl) 0;
        }

        .p-contactTel__body {
            display: grid;
            row-gap: var(--spacing-xl);
        }

        .p-contactInformation {
            background-color: var(--color-light-ivory);
            display: grid;
            justify-content: center;
            padding: var(--spacing-2xl) var(--spacing-xl);
            row-gap: var(--spacing-lg);
            text-align: center;

            @media (max-width: 575.98px) {
                padding: var(--spacing-xl);
                row-gap: var(--spacing-md);
            }
        }

        .p-contactAddress {
            column-gap: var(--spacing-lg);
            display: grid;
            font-size: 24px;
            font-weight: var(--font-weight-bold);
            grid-template-columns: repeat(2, max-content);

            @media (max-width: 767.98px) {
                grid-template-columns: 1fr;
            }

            @media (max-width: 575.98px) {
                font-size: 16px;
            }
        }

        /* お問い合わせ - フォーム */
        /* ======================================== */

        .p-contactMail {
            padding-block: var(--spacing-2xl) var(--spacing-4xl);
            @media (max-width: 575.98px) {
                padding-block: var(--spacing-2xl) var(--spacing-3xl);
            }  
        }

        .p-contactMail__inner {
            display: grid;
            row-gap: var(--spacing-xl);
        }

        .p-contactMail__body {
            inline-size: 100%;
            max-inline-size: 900px;
            margin-inline: auto;
            
        }

        .p-contactForm {
            display: grid;
            row-gap: var(--spacing-lg);
            
        }

        .p-contactForm__list {
            display: grid;
            row-gap: var(--spacing-xs);
        }

        .p-contactForm__term {
            font-size: 16px;
            font-weight: var(--font-weight-bold);

            @media (max-width: 575.98px) {
                font-size: 15px;
            }
        }

        .p-contactForm__radio {
            display: grid;
            row-gap: var(--spacing-xs);
            @media (max-width: 575.98px) {
                font-size: 15px;
            }
        }

        .p-contactForm__input[type="text"],
        .p-contactForm__input[type="tel"],
        .p-contactForm__input[type="email"],
        .p-contactForm__textarea {
            border-radius: var(--border-radius-md);
            inline-size: 100%;
            padding: var(--spacing-xs);
        }

        .p-contactForm__link {
            color: var(--color-primary);
            text-decoration: underline;
        }

        .p-contactForm__submit {
            display: grid;
            grid-template-columns: 240px;
            justify-content: center;
            text-align: center;
        }

        .p-contactForm__agreement {
            text-align: center;
        }

        .p-contactForm__agree-check {
            display: grid;
        }

        .p-contactForm__label {
            display: inline-block;
        }

        form#mail_form dl dd span.error_blank,
        form#mail_form dl dd span.error_format,
        form#mail_form dl dd span.error_match {
            color: var(--color-error);
            display: block;
            margin-block-start: var(--spacing-xxs);
        }

        form#mail_form div#agreement span.error_check {
            color: var(--color-error);
            display: none;
            margin-block-start: var(--spacing-xxs);
        }

        form#mail_form dl dt span.required {
            border-radius: var(--border-radius-full);
            color: var(--color-white);
            display: inline-block;
            font-size: 12px;
            margin-inline-start: var(--spacing-md);
            padding: var(--spacing-xxs) var(--spacing-sm);
        }

        form#mail_form dl dt span.optional {
            display: none;
        }

        form#mail_form dl dt span.required {
            background: var(--color-error);
            border: 1px solid var(--color-error);
        }

        /* サンクス - 本文 */
        /* ======================================== */

        .p-thanksContent {
            padding-block: var(--spacing-2xl) var(--spacing-4xl);
            @media (max-width: 575.98px) {
                padding-block: var(--spacing-2xl) var(--spacing-3xl);
            }
        }

        .p-thanksContent__inner {
            display: grid;
            row-gap: var(--spacing-xl);
        }

        .p-thanksContent__head {
            display: grid;
            justify-content: center;
        }

        .p-thanksContent__body {
            display: grid;
            justify-content: center;
            row-gap: var(--spacing-xl);
        }

        .p-thanksContent__link {
            display: grid;
            grid-template-columns: var(--inline-size-button);
            justify-content: center;
        }

        /* リンク集 - 本文 */
        /* ======================================== */

        .p-linksContent {
            padding-block: var(--spacing-2xl) var(--spacing-4xl);

            @media (max-width: 575.98px) {
                padding-block: var(--spacing-2xl) var(--spacing-3xl);
            }
        }

        .p-linksContent__inner {
            display: grid;
            row-gap: var(--spacing-xl);
        }

        .p-linksContent__list {
            gap: 55px 28px;
            display: grid;
            grid-template-columns: repeat(3, 1fr);

            @media (max-width: 767.98px) {
                grid-template-columns: repeat(2, 1fr);
            }

            @media (max-width: 575.98px) {
                grid-template-columns: 1fr;
                gap: var(--spacing-xl);
            }
        }

        .p-linksContent__link {
            div {
                overflow: hidden;
            }

            p {
                font-size: 17.2px;
                margin: 10px 10px 0;
                /*border-bottom: 1px solid var(--color-dark-gray);*/

                span {
                    display: inline-flex;
                    align-items: center;
                    /*justify-content: space-between;*/
                    width: 98%;
                    gap: 8px;
                }

                span::after {
                    aspect-ratio: 1;
                    background-color: black;
                    content: "";
                    display: inline-block;
                    inline-size: 15px;
                    justify-self: end;
                    mask-image: var(--icon-new-tab);
                    mask-repeat: no-repeat;
                    mask-position: center;
                    mask-size: contain;
                }

                @media (max-width: 575.98px) {
                    font-size: 15.5px;
                }
            }
        }

        .p-linksContent__img {
            inline-size: 100%;
            border-radius: var(--border-radius-lg);
            object-fit: cover;
            transition: scale var(--duration--short) ease-in-out;

            @media (any-hover: hover) {
                &:hover {
                    scale: 1.1;
                }
            }
        }

        /* サイトマップ - 本文 */
        /* ======================================== */

        .p-sitemapContent {
            padding-block: var(--spacing-2xl) var(--spacing-4xl);
            @media(max-width:575.98px) {
                padding-block: var(--spacing-2xl) var(--spacing-3xl);
            }
        }

        .p-sitemapContent__inner {
            display: grid;
            row-gap: var(--spacing-xl);
        }

        .p-sitemapContent__list {
            display: grid;
            grid-template-columns: repeat(2, 1fr);

            @media (max-width: 575.98px) {
                grid-template-columns: 1fr;
                row-gap: var(--spacing-md);
            }
        }

        .p-sitemapContent__row {
            align-self: flex-start;
            display: grid;
            row-gap: var(--spacing-md);
        }

        .p-sitemapContent__category {
            font-size: 17.5px;
            font-weight: var(--font-weight-medium);
            @media (max-width: 575.98px) {
                font-size: 15px;
            }
        }

        .p-sitemapContent__items {
            display: grid;
            padding-inline-start: var(--spacing-md);
            row-gap: var(--spacing-xs);
        }

        .p-sitemapContent__item {
            font-size: var(--font-size-sm);
        }

        .p-sitemapContent__link {
            @media (max-width: 575.98px) {
                font-size: 15px;
            }
            @media (any-hover: hover) {
                &:hover {
                    color: var(--color-primary);
                    text-decoration: underline;
                }
            }
        }

        /* 個人情報保護方針 - 本文 */
        /* ======================================== */

        .p-privacyContent {
            padding-block: var(--spacing-2xl) var(--spacing-4xl);
            @media (max-width: 575.98px) {
                padding-block: var(--spacing-2xl) var(--spacing-3xl);
            }
        }

        .p-privacyContent__inner {
            display: grid;
            row-gap: var(--spacing-xl);
        }

        .p-privacyContent__body {
            display: grid;
            row-gap: var(--spacing-xl);
        }

        .p-privacyChapter__list {
            display: grid;
            list-style-type: disc;
            padding-inline-start: var(--spacing-lg);
            row-gap: var(--spacing-xs);
        }

        /* メガメニュー */
        /* ======================================== */

        .p-gnav__list {
            position: relative;
        }

        .p-megamenu {
            border-block-end: 1px solid var(--color-light-gray);
            inset-block-start: calc(1lh + var(--spacing-xs) - 2px);
            opacity: 0;
            position: absolute;
            transition: opacity var(--duration--normal) ease-in-out, visibility var(--duration--normal) ease-in-out;
            visibility: hidden;

            @media (max-width: 991.98px) {
                inset-block-start: 0;
                opacity: 1;
                position: relative;
                visibility: visible;
            }
        }

        .p-gnav__item:hover>.p-megamenu {
            opacity: 1;
            visibility: visible;
        }

        .p-megamenu__inner {
            background-color: var(--color-primary);
            color: var(--color-white);
            padding: var(--spacing-lg) var(--spacing-md);

            @media (max-width: 991.98px) {
                background-color: transparent;
                color: var(--color-base-black);
                padding: var(--spacing-xs) 0;
            }
        }

        .p-megamenu__list {
            display: grid;
            row-gap: var(--spacing-sm);

            @media (max-width: 991.98px) {
                row-gap: var(--spacing-xxs);
            }
        }

        .p-megamenu__link {
            display: block;
            padding: var(--spacing-xxs) 0 var(--spacing-xxs) var(--spacing-md);
            position: relative;

            &::before {
                aspect-ratio: 1;
                background-color: currentColor;
                content: '';
                inline-size: 12px;
                inset-block-start: 53%;
                inset-inline-start: 0;
                mask-image: var(--icon-chevron-right);
                mask-repeat: no-repeat;
                mask-position: center;
                mask-size: contain;
                position: absolute;
                translate: 0 -50%;
            }

            &::after {
                background-color: var(--color-white);
                block-size: 1px;
                content: '';
                inline-size: 0;
                inset-block-end: 0;
                inset-inline-start: 0;
                position: absolute;
                transition: inline-size var(--duration--normal) ease-in-out;
            }

            @media (max-width: 991.98px) {
                padding: var(--spacing-xxs) 0;

                &::before {
                    display: none;
                }
            }

            @media (any-hover: hover) {
                &:hover::after {
                    inline-size: 100%;
                }
            }
        }


    }

    /* ユーティリティ */
    /* ======================================== */

    @layer utility {
        .u-color-error {
            color: var(--color-error);
        }
    }

    .u-d-none-sm,.u-d-none-lg {
        display: none;
    }

    @media (max-width: 767.98px) {
        .u-d-none-lg {
            display: block;
            text-align: end;
            font-weight: bold;
            padding: 0 20% 2% 0;
        }
    }

    @media (max-width: 575.98px) {
        .u-d-none-sm {
            display: block;
        }
        .u-d-none-lg {
            text-align: center;
            padding: 0 0 2%;
            font-size: 16px;
        }
    }

}

.spbr {
    display: none;

    @media (max-width: 575.98px) {
        display: block;
    }
}

/*フェードイン
.fadein {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.8s ease, transform 0.8s ease;
}

.fadein.scrollin {
  opacity: 1;
  transform: translateY(0);
}*/