@charset "utf-8";

:root {
    /* ---------- フォント設定 ---------- */
    font-family: "Noto Serif JP", serif;
    font-optical-sizing: auto;
    font-weight: normal;
    font-style: normal;

    --noto-sans: "Noto Sans JP", sans-serif;
    --noto-serif: "Noto Serif JP", serif;
    --libre: "Libre Baskerville", serif;

    --demilight: 350;
    --regular: 400;
    --medium: 500;
    --semibold: 600;
    --bold: 700;
    --black: 900;

    line-height: 1.7;

    /* ---------- カスタムプロパティ(カラー設定ほか) ---------- */
    --white-color: rgb(255 255 255 / 1.0);
    --black-color: rgb(0 0 0 / 1.0);
    --primary-color: rgb(247 181 44 / 1.0);
    --primary-color2: rgb(252 203 96 / 1.0);
    --secondry-color: rgb(233 85 19 / 1.0);
    --sub-color01: rgb(248 246 241 / 1.0);
    --sub-color03: rgb(158 192 137 / 1.0);
    --sub-color02: rgb(255 220 205 / 1.0);
    --noimg-color: rgb(158 192 137 / 0.3);

    --bg-color: rgb(255 250 239 / 1.0);
    --bg-color02: rgb(255 224 161 / 1.0);

    --text-color: rgb(82 81 81 / 1.0);
    --text-charcoal: rgb(96 76 63 / 1.0);
    --text-charcoal2: rgb(41 9 0 / 1.0);

    --link-grad-up: rgb(255 247 228 / 0.4);
    --link-gard-down: rgb(255 226 165 / 0.4);
    --shadow-color: rgb(81 81 81 / 0.10);
    --boxshadow-color: rgb(81 81 81 / 0.25);

    color: var(--text-charcoal2);
    --text-body: 1rem;
    --text-small: 0.875rem;
}



/* -----------sp　全体レイアウト ---------- */
:root {
    font-size: 4.2666vw;
    /* 16px/375 */
    scroll-behavior: smooth;
    scrollbar-gutter: stable;
}

.break,
.s-break {
    display: block;
}

.p-break {
    display: inline;
}

.t-br {
    display: none;
}

html,
body {
    overflow-x: hidden;
    background-color: var(--sub-color01);
}

/* -----------tablet　全体レイアウト ---------- */
@media screen and (width > 499px) {
    :root {
        font-size: min(2.0833vw, 16px);
        /* 16px/768 */
    }

    .s-wrapper {
        max-width: 768px;
        margin: auto;
    }

    .s-break {
        display: inline;
    }

    .t-break {
        display: block;
    }

    .s-br {
        display: none;
    }

    .t-br {
        display: block;
    }
}

/* -----------PC　全体レイアウト ---------- */
@media screen and (width > 1023px) {
    :root {
        font-size: min(1.25vw, 16px);
        /* 16px/1280- */
    }

    .s-wrapper {
        position: relative;
        max-width: 1280px;
        margin: auto;
    }

    .t-break {
        display: inline;
    }

    .p-break {
        display: block;
    }

    .t-br {
        display: none;
    }

    .t-wrapper {
        max-width: 1920px;
        margin: auto;
    }
}



/* ----- 文字の大きさ設定 ----- */
:root {
    .h-xl {
        font-size: 3rem;
    }

    .h-l {
        font-size: 2rem;
    }

    .h-m {
        font-size: 1.5rem;
    }

    .h-s {
        font-size: 1.25rem;
    }

    .p-m {
        font-size: var(--text-body);
    }

    .p-s {
        font-size: var(--text-small);
    }
}





/* ---------- アニメーション ---------- */
@keyframes blinking {

    2.5%,
    7.5% {
        opacity: 0;
    }

    0%,
    5%,
    10%,
    100% {
        opacity: 1;
    }
}

.news-new {
    animation: blinking 10s infinite ease-in-out;
}





/* ---------- スクロールアニメーション ---------- */
/* ----- フェードイン ----- */
.fade-in {
    opacity: 0;
    translate: 0 70px;
    transition: all 0.5s ease-out;

    &.show {
        translate: 0 0;
        opacity: 1;
    }
}



/* ----- 回転して浮かび上がる ----- */
.rot-target .rot {
    display: inline-block;
    transition: 0.7s;
    opacity: 0;
    translate: 0 80px;
    scale: 0.2;
    rotate: 359deg;

    &.is-animated {
        opacity: 1;
        translate: 0;
        rotate: 0deg;
        scale: 1;
    }
}



/* ----- 彩度・輝度 ----- */
.sat-target {
    transition: all 1s;
    filter: saturate(0.4) brightness(0.4);

    &.show {
        filter: saturate(1.0) brightness(1.0);
    }
}



/* ----- opacity ----- */
.op-target {
    opacity: 0;
    transition: opacity 1s;

    &.show {
        opacity: 1;
    }
}





/* ----------- アニメーション停止 ---------- */
@media (prefers-reduced-motion: reduce) {

    *,
    .mascot-img,
    .news-new {
        animation: none;
        transition: none;
    }
}





/* ---------- スキップリンク ---------- */
.skip-link {
    position: absolute;
    top: -100%;
    /* 通常時は画面外に隠す */
    left: 0;
    padding: 8px 16px;
    background: #000;
    color: #fff;
    text-decoration: none;
    z-index: 9999;
}

/* フォーカス時だけ表示 */
.skip-link:focus {
    top: 0;
}





/* ---------- ヘッダーレイアウト ---------- */

/* ---------- sp レイアウト ---------- */
header {
    width: 100%;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1000;
    background-color: var(--sub-color01);

    .h-wrapper {
        .header-area {
            padding: 2.4375rem 3.6875rem 2.4375rem 3.125rem;
            display: flex;
            align-items: center;
            justify-content: space-between;

            .header-logo-area {

                img {
                    width: 11.5625rem;
                    height: auto;
                }
            }

            .hamburger {
                margin: 0;
                padding: 0;
                height: 1.6875rem;
                display: flex;
                flex-direction: column;
                gap: 0.6875rem;
                z-index: 1500;
                cursor: pointer;
                border: none;
                background-color: inherit;

                span {
                    display: block;
                    width: 2.125rem;
                    height: 0.125rem;
                    border-radius: 0.0625rem;
                    background-color: var(--primary-color);
                    transition: all 0.3s;
                    transform-origin: center;
                }
            }

            .hamburger.active span:nth-child(1) {
                transform: translate(2.3125rem, 0.8125rem) rotate(45deg);
            }

            .hamburger.active span:nth-child(2) {
                opacity: 0;
            }

            .hamburger.active span:nth-child(3) {
                transform: translate(2.3125rem, -0.8125rem) rotate(-45deg);
            }

            .header-nav {
                position: fixed;
                inset: 0;
                z-index: 1100;
                width: 100vw;
                height: 100vh;
                /* background-color: var(--sub-color01); */
                transition: all 0.3s;
                opacity: 0;
                visibility: hidden;
                display: grid;
                place-items: center;

                ul {
                    position: relative;
                    z-index: 1200;
                    margin: 0;
                    padding: 0;
                    display: flex;
                    flex-direction: column;
                    gap: 7.0422dvh;
                    opacity: 0;
                    transition: all 0.3s 0.3s;

                    li {

                        a {
                            display: flex;
                            align-items: center;
                            gap: 1rem;
                            font-family: var(--noto-sans);
                            font-size: 1.25rem;
                            color: var(--text-charcoal2);
                            font-weight: var(--regular);
                            line-height: 1.2;

                            &::before {
                                content: "";
                                display: block;
                                width: 1.125rem;
                                height: 1.125rem;
                                background-repeat: no-repeat;
                                background-size: contain;
                            }
                        }

                        &.current_page_item {
                            pointer-events: none;

                            a {
                                color: var(--secondry-color);
                            }
                        }

                        &:first-child {
                            a::before {
                                height: 1.3125rem;
                                background-image: url(../img/home-icon2.svg);
                            }
                        }

                        &:nth-child(2) {
                            a::before {
                                background-image: url(../img/news-icon2.svg);
                            }
                        }

                        &:nth-child(3) {
                            a::before {
                                background-image: url(../img/intro-icon2.svg);
                            }
                        }

                        &:nth-child(4) {
                            a::before {
                                background-image: url(../img/access-icon2.svg);
                            }
                        }

                        &:nth-child(5) {
                            a::before {
                                height: 1rem;
                                background-image: url(../img/company-icon2.svg);
                            }
                        }
                    }
                }

                .circle {
                    position: absolute;
                    z-index: 1190;
                    top: -50px;
                    right: 0;
                    width: 100px;
                    height: 100px;
                    background-color: var(--sub-color01);
                    border-radius: 50%;
                    filter: drop-shadow(0 0 50px var(--text-charcoal2));
                    transition: 1s;
                }
            }

            .header-nav.active {
                opacity: 1;
                visibility: visible;

                ul {
                    opacity: 1;
                }

                .circle {
                    scale: 28;
                }
            }
        }
    }
}

main {
    margin-top: 7.25rem;
}

/* ---------- tablet レイアウト ---------- */
@media screen and (width > 499px) {
    header {

        .h-wrapper {
            padding: 1.1625rem 0;

            .header-area {
                margin: 0;
                padding: 0;
                justify-content: center;
                align-items: center;
                gap: 2.9375rem;

                .header-logo-area {
                    margin: 0;

                    img {
                        width: 11.5625rem;
                        height: auto;
                    }
                }

                .hamburger {
                    margin: 0;
                    gap: 0.6875rem;

                    span {
                        width: 2.125rem;
                        height: 0.125rem;
                    }
                }

                .hamburger.active span:nth-child(1) {
                    transform: translate(13.9375rem, 0.8125rem) rotate(45deg);
                }

                .hamburger.active span:nth-child(3) {
                    transform: translate(13.9375rem, -0.8125rem) rotate(-45deg);
                }

                .header-nav {
                    ul {
                        margin: 0;

                        li {
                            a {
                                gap: 0.8125rem;
                                font-size: 1.5rem;

                                &::before {
                                    width: 1.25rem;
                                    height: 1.25rem;
                                }
                            }

                            &:first-child {
                                a::before {
                                    height: 1.4375rem;
                                }
                            }

                            &:nth-child(5) {
                                a::before {
                                    height: 1.125rem;
                                }
                            }
                        }
                    }

                    .circle {
                        right: 30%;
                    }
                }
            }
        }
    }

    main {
        margin-top: 4.5rem;
    }
}

/* ---------- pc レイアウト ---------- */
@media screen and (width > 1023px) {
    header {
        .h-wrapper {
            max-width: 1280px;
            margin: auto;
            padding: 1.3125rem 4.6562rem;

            .header-area {
                margin: 0;
                display: flex;
                justify-content: space-between;
                align-items: center;

                .header-logo-area {
                    margin: 0;

                    a {
                        transition: all 0.3s;

                        @media (any-hover: hover) {
                            &:hover {
                                filter: drop-shadow(0 0 6px var(--primary-color));
                            }
                        }

                        &:focus {
                            filter: drop-shadow(0 0 6px var(--primary-color));
                        }
                    }

                    img {
                        width: 18.5625rem;
                        height: auto;
                    }
                }

                .hamburger {
                    display: none;
                }

                .header-nav {
                    display: inherit;
                    position: inherit;
                    visibility: visible;
                    opacity: 1;
                    width: auto;
                    height: 2.5rem;
                    background-color: var(--white);
                    transition: none;

                    ul {
                        margin: 0;
                        padding-bottom: 0;
                        height: auto;
                        display: flex;
                        flex-direction: row;
                        justify-content: end;
                        gap: 1.5625rem;
                        opacity: 1;

                        li {
                            border: none;
                            margin-bottom: 0;

                            a {
                                padding: 0;
                                margin: 0;
                                display: block;
                                width: 8.375rem;
                                font-size: var(--text-body);
                                font-weight: var(--semibold);
                                color: var(--text-charcoal2);
                                text-align: center;
                                line-height: 2.5rem;
                                background-color: var(--primary-color);
                                transition: all 0.3s;

                                @media (any-hover: hover) {
                                    &:hover {
                                        color: var(--white-color);
                                        background-color: var(--secondry-color);
                                    }
                                }

                                &:focus {
                                    color: var(--white-color);
                                    background-color: var(--secondry-color);
                                }
                            }

                            &.current_page_item {
                                a {
                                    height: 100%;
                                    pointer-events: none;
                                    line-height: 2.25rem;
                                    border: 2px solid var(--primary-color);
                                    background-color: var(--white-color);
                                    color: var(--primary-color);
                                }
                            }

                            &:first-child,
                            &:nth-child(2),
                            &:nth-child(3),
                            &:nth-child(4),
                            &:nth-child(5) {
                                a::before {
                                    display: none;
                                }
                            }
                        }
                    }

                    .circle {
                        display: none;
                    }
                }
            }
        }
    }

    main {
        margin-top: 7rem;
    }
}





/* ----------- フッターエリア ---------- */

/* ---------- sp レイアウト ----------- */
footer {
    position: inherit;
    color: var(--text-charcoal2);
    background-color: var(--primary-color2);
    background-image: url(../img/footerbg_sp.webp);
    background-repeat: no-repeat;
    background-size: cover;

    .f-wrapper {
        padding: 1.5rem 0;

        address {
            display: flex;
            flex-direction: column;
            align-items: center;
            font-style: normal;
            gap: 1.875rem;

            .footer-logo {
                img {
                    width: 17.3125rem;
                    height: auto;
                }
            }

            .tel {
                a {
                    width: 18.8125rem;
                    height: 3.3125rem;
                    border-radius: 0.25rem;
                    border: 1px solid var(--primary-color);
                    background-image: linear-gradient(var(--link-grad-up),
                            var(--link-gard-down));
                    box-shadow: 3px 3px 10px var(--shadow-color);
                    font-family: var(--noto-sans);
                    font-size: 1.125rem;
                    font-weight: var(--bold);
                    color: var(--text-charcoal2);
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    gap: 0.4rem;

                    .sp-icon {
                        width: 0.9375rem;
                        height: 1.3125rem;
                        fill: var(--text-charcoal2);
                    }

                    &:active {
                        background-color: var(--white-color);
                        color: var(--text-charcoal2);

                        .sp-icon {
                            fill: var(--text-charcoal2);
                        }
                    }
                }
            }


            .address {
                margin: 1.875rem auto;
                width: fit-content;
                display: block;
                font-family: var(--noto-serif);
                font-weight: var(--medium);
                line-height: 1.4286;

                .nowrap {
                    white-space: nowrap;
                }
            }
        }

        .footer-nav {
            ul {
                margin: 0 0 1.875rem;
                padding: 0;
                display: flex;
                justify-content: center;
                gap: 0;

                li {
                    width: fit-content;

                    a {
                        padding-left: 0.4375rem;
                        display: flex;
                        justify-content: flex-end;
                        align-items: center;
                        gap: 0.4375em;
                        height: var(--text-small);
                        font-family: var(--noto-sans);
                        font-size: var(--text-small);
                        font-weight: var(--medium);
                        color: var(--text-charcoal2);
                        line-height: var(--text-small);
                        text-align: center;

                        &::after {
                            margin-top: 0.125rem;
                            display: block;
                            content: "";
                            height: var(--text-small);
                            width: 1px;
                            background-color: var(--text-charcoal2);
                        }
                    }

                    &:last-child {
                        a::after {
                            background-color: inherit;
                        }
                    }

                    &.current_page_item {
                        pointer-events: none;

                        a {
                            color: var(--secondry-color);
                        }
                    }
                }
            }
        }

        .copyright {
            text-align: center;

            small {
                font-size: 0.8125rem;
            }
        }
    }
}

/* ---------- tablet レイアウト ----------- */
@media screen and (width > 499px) {
    footer {
        background-image: url(../img/footerbg_tb.webp);

        .f-wrapper {
            address {
                gap: 1.5rem;

                .footer-logo {
                    img {
                        width: 25.0625rem;
                    }
                }

                .tel {
                    a {
                        font-size: 1.125rem;
                    }
                }


                .address {
                    margin: 1.625rem auto 1.5rem;
                    line-height: 1.7;
                }
            }

            .footer-nav {
                ul {
                    margin: 0 0 1.5rem;

                    li {

                        a {
                            padding-left: 0.6562rem;
                            gap: 0.6562em;
                            height: 1.3125rem;
                            font-size: 1.3125rem;
                            line-height: 1.3125rem;

                            &::after {
                                margin-top: 0.125rem;
                                height: 1.3125rem;
                            }
                        }
                    }
                }
            }
        }
    }
}

/* ---------- PC レイアウト ----------- */
@media screen and (width > 1023px) {
    footer {
        background-image: url(../img/footerbg_pc.webp);

        .f-wrapper {
            padding: 8.5625rem 0 1.875rem;

            address {
                margin-bottom: 5.625rem;
                flex-direction: row;
                justify-content: center;
                gap: 0 2.5rem;

                .footer-logo {
                    a {
                        img {
                            transition: all 0.3s;
                        }

                        @media (any-hover: hover) {
                            &:hover {
                                img {
                                    filter: drop-shadow(0 0 10px var(--text-charcoal2))
                                }
                            }
                        }

                        &:focus {
                            img {
                                filter: drop-shadow(0 0 10px var(--text-charcoal2))
                            }
                        }
                    }
                }

                .tel {

                    /* padding-left: 2.5rem; */
                    a {
                        margin: auto;
                        font-size: 1.125rem;
                        gap: 0.4rem;
                        pointer-events: none;
                    }
                }

                .address {
                    margin-bottom: 1.8125rem;
                    font-size: 1.5rem;
                    line-height: 1.4166;
                }
            }

            .footer-nav {
                ul {
                    margin: 0 0 5.625rem;
                    padding: 0.5625rem 0;

                    li {
                        a {
                            padding-left: 0.9375rem;
                            gap: 0.9375rem;
                            height: 3.0625rem;
                            font-size: 1.875rem;
                            line-height: 1.875rem;
                            transition: all 0.3s;

                            &::after {
                                height: 1.875rem;
                            }

                            @media (any-hover: hover) {
                                &:hover {
                                    text-shadow: 0 0 10px var(--text-charcoal);
                                }
                            }

                            &:focus {
                                text-shadow: 0 0 10px var(--text-charcoal);
                            }
                        }

                        &.current_page_item {
                            a:focus {
                                text-shadow: none;
                            }
                        }
                    }
                }
            }

            .copyright {
                small {
                    font-size: 1.25rem;
                    line-height: 1.2;
                }
            }
        }
    }
}





/*---------- トップ ヒーローエリア ---------- */
/* ----- sp レイアウト ----- */
.home {
    .top-hero-area {
        position: relative;

        .hero-img {
            width: 100%;

            img {
                width: 100%;
                height: auto;
            }
        }

        .hero-word {
            position: absolute;
            top: 9.875rem;
            left: 2.1875rem;
            width: 14.875rem;

            img {
                width: 100%;
                height: auto;
            }
        }
    }
}

/* ----- tb レイアウト ----- */
@media screen and (width > 499px) {
    .home {
        .top-hero-area {

            .hero-word {
                top: 10.0625rem;
                left: 2.875rem;
                width: 31.3125rem;
            }
        }
    }
}

/* ----- pc レイアウト ----- */
@media screen and (width > 1023px) {
    .home {
        .top-hero-area {
            max-width: 1920px;
            margin: auto;

            .hero-img {
                img {
                    width: 100%;
                    height: 37.5rem;
                    object-fit: cover;
                    object-position: center;
                }
            }

            .hero-word {
                top: 8.9375rem;
                left: 4rem;
                width: 31.375rem;
            }
        }
    }
}



/* ---------- 下層ヒーローエリア ---------- */
/* ----- sp レイアウト ----- */
.hero-area {
    position: relative;

    .hero-img {
        img {
            width: 100%;
            height: auto;
        }
    }

    .hero-word {
        position: absolute;
        top: 1.0625rem;
        left: 1.3125rem;
        width: 9.9375rem;

        img {
            width: 100%;
            height: auto;
        }
    }
}

/* ----- tb レイアウト ----- */
@media screen and (width > 499px) {
    .hero-area {

        .hero-word {
            top: 0.5625rem;
            left: 1.1875rem;
            width: 14.125rem;
        }
    }
}

/* ----- pc レイアウト ----- */
@media screen and (width > 1023px) {
    .hero-area {
        max-width: 1920px;
        margin: auto;

        .hero-img {
            width: 100%;

            img {
                width: 100%;
                height: 14.375rem;
                object-fit: cover;
                object-position: center;
            }
        }

        .hero-word {
            top: 1.8125rem;
            left: 3.0625rem;
            width: 18.435rem;
        }
    }
}





/* ---------- ご相談を　エリア ---------- */

/* ----- sp レイアウト ----- */
.contact-link-area {
    color: var(--text-charcoal2);

    .s-wrapper {
        padding: 12.5rem 1rem 6.25rem;

        .heading-area {
            margin-bottom: 2.5rem;
            position: relative;

            img {
                position: absolute;
                z-index: 1;
                left: 7.425rem;
                top: -6.6375rem;
                width: 18.3125rem;
                height: auto;
            }

            h2 {
                position: relative;
                z-index: 2;
                text-align: center;
                font-family: var(--noto-serif);
                font-weight: var(--medium);
            }
        }

        p {
            margin-bottom: 1.7em;
            font-family: var(--noto-serif);
            font-weight: var(--medium);
            line-height: 1.7;
            text-align: center;
        }

        ul {
            margin: 2.5rem 0 0;
            padding: 0;
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 1.125rem;

            li {
                a {
                    width: 18.8125rem;
                    height: 3.3125rem;
                    border-radius: 0.25rem;
                    border: 1px solid var(--primary-color);
                    /* background-color: var(--bg-color02); */
                    background: linear-gradient(var(--link-grad-up),
                            var(--link-gard-down));
                    box-shadow: 3px 3px 10px var(--shadow-color);
                    font-family: var(--noto-sans);
                    font-size: 1.125rem;
                    font-weight: var(--bold);
                    color: var(--text-charcoal2);
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    gap: 0.4rem;
                    transition: all 0.3s;

                    &:active {
                        background-color: var(--white-color);
                        background-image: none;
                    }

                    .sp-icon {
                        width: 0.9375rem;
                        height: 1.375rem;
                        fill: var(--text-charcoal2);
                    }
                }
            }
        }
    }
}

/* ----- tb レイアウト ----- */
@media screen and (width > 499px) {
    .contact-link-area {
        .s-wrapper {
            padding: 12.5rem 7.375rem 7.8125rem;

            .heading-area {
                margin-bottom: 4rem;

                img {
                    left: 13.875rem;
                    top: -6rem;
                    width: 28.4375rem;
                }

                h2 {
                    text-align: center;
                    font-family: var(--noto-serif);
                    font-weight: var(--medium);
                }
            }

            p {
                font-size: var(--text-body);
            }

            ul {
                margin-top: 4rem;
                gap: 1.125rem;

                li {
                    width: 18.8125rem;

                    a {
                        width: 100%;
                        height: 3.3125rem;
                        font-size: 1.125rem;
                        gap: 0.4rem;
                    }

                    .tel-link {
                        pointer-events: none;
                    }
                }
            }
        }
    }
}

/* ----- pc レイアウト ----- */
@media screen and (width > 1023px) {
    .contact-link-area {
        .s-wrapper {
            padding: 10rem 0 11.5rem;

            .heading-area {
                margin-bottom: 6.25rem;

                img {
                    left: 35.8125rem;
                    top: -12.6875rem;
                    width: 41.4375rem;
                }

                h2 {
                    font-size: 3.3125rem;
                }
            }

            p {
                margin: 0 auto 3.4rem;
                width: 27em;
                font-size: 2rem;
            }

            ul {
                margin-top: 6.25rem;
                flex-direction: row-reverse;
                justify-content: center;
                gap: 5rem;

                li {
                    width: 18.8125rem;

                    a {
                        font-size: 1.125rem;

                        &.tel-link {
                            pointer-events: none;
                        }

                        @media (any-hover: hover) {
                            &:hover {
                                filter: brightness(1.2);
                                transform: translateY(3px);
                                /* box-shadow: 3px 3px 10px var(--white-color); */
                                /* background-image: none; */
                                /* background-color: var(--white-color); */
                            }
                        }

                        &.contact-link:focus {
                            filter: brightness(1.2);
                            transform: translateY(3px);
                            /* box-shadow: 3px 3px 10px var(--white-color); */
                            /* background-image: none; */
                            /* background-color: var(--white-color); */
                        }
                    }
                }
            }
        }
    }
}





/* ---------- 画像付き見出し ---------- */
/* ----- sp レイアウト ----- */
.heading-area {
    color: var(--text-charcoal2);
    position: relative;
    margin: 0 0 4.5rem;

    img {
        position: absolute;
        z-index: 0;
        top: -8.8125rem;
        left: 6.1875rem;
        width: 19.125rem;
        height: auto;

    }

    .heading {
        position: relative;
        z-index: 2;
        margin: 0;
        width: 100%;
        text-align: center;
        font-size: 1.5rem;
        font-weight: var(--medium);
        line-height: 1.2;

        &::after {
            margin: 0.5rem auto 0;
            display: block;
            content: "";
            width: 5.125rem;
            border-bottom: 4px solid var(--primary-color);
        }
    }
}

/* ----- tb レイアウト ----- */
@media screen and (width > 499px) {
    .heading-area {
        margin-bottom: 6rem;

        img {
            top: -12.6875rem;
            left: 19.5rem;
            width: 24.6875rem;

        }

        .heading {
            font-size: 2rem;
            line-height: 1.4375;

            &::after {
                margin: 0.5rem auto 0;
            }
        }
    }
}

/* ----- pc レイアウト ----- */
@media screen and (width > 1023px) {
    .heading-area {

        img {
            top: -14.125rem;
            left: 34.3125rem;
            width: 27.375rem;

        }
    }
}





/* ---------- トップページ ---------- */
/* ----- sp レイアウト ----- */
.home {
    .container {
        .vision-area {
            color: var(--text-charcoal2);

            .s-wrapper {
                padding: 6.25rem 1rem;

                .text-area {
                    margin-top: 2.625rem;

                    p {
                        margin-bottom: 1.7rem;
                        text-align: center;
                        font-weight: var(--medium);

                        &:last-child {
                            margin-bottom: 1.5rem;
                        }
                    }
                }
            }
        }

        .traits-area {
            color: var(--text-charcoal2);

            .s-wrapper {
                padding: 6.25rem 1rem;

                .traits-img {
                    margin: 2.625rem 0 1.6875rem;

                    img {
                        width: 100%;
                        height: auto;
                    }
                }

                p {
                    margin-bottom: 1.7rem;

                    &:last-child {
                        margin-bottom: 0;
                    }
                }
            }
        }

        .works-area {
            .s-wrapper {
                margin: 6.25rem 0;

                .heading-area {
                    color: var(--text-charcoal2);

                    img {
                        top: -6.75rem;
                    }
                }

                .works-list {
                    margin: 0;
                    padding: 0;

                    li {
                        margin-top: 5rem;

                        &:first-child {
                            margin-top: 4rem;
                        }

                        p {
                            margin-bottom: 0.25rem;
                            font-weight: var(--medium);
                            text-align: center;

                            &::before {
                                content: "【";
                            }

                            &::after {
                                content: "】";
                            }
                        }

                        img {
                            width: 100%;
                            height: 11.75rem;
                            object-position: center;
                            object-fit: cover;
                        }
                    }
                }
            }
        }

        .working-image {
            color: var(--text-charcoal2);
            overflow: hidden;

            .s-wrapper {
                padding: 6.25rem 0;

                /* prefers-reduced-motion: アニメーション無効化 */
                @media (prefers-reduced-motion: reduce) {
                    .carousel-track {
                        transition: none !important;
                    }
                }

                .carousel-wrap {
                    position: relative;
                    width: 100%;
                    margin-top: 2.625rem;
                    padding: 0.4375rem 0 3.5625rem;
                    box-sizing: border-box;
                    overflow: hidden;
                    user-select: none;
                    touch-action: pan-y;
                }

                .carousel-track-container {
                    width: 100%;
                    overflow: visible;
                    position: relative;
                    height: 15.25rem;
                }

                .carousel-track {
                    display: flex;
                    align-items: center;
                    height: 100%;
                    transition: transform .5s cubic-bezier(.4, 0, .2, 1);
                }

                .carousel-slide {
                    padding: 0.4375rem 0.71875rem;
                    flex: 0 0 16.6875rem;
                    max-width: 16.6875rem;
                    height: 15.25rem;
                    overflow: hidden;
                    position: relative;
                    flex-shrink: 0;
                }

                .carousel-slide img {
                    width: 100%;
                    height: 100%;
                    object-fit: cover;
                    display: block;
                    pointer-events: none;
                }

                /* インジケーター */
                .indicators {
                    display: flex;
                    justify-content: center;
                    gap: 0.3125rem;
                    margin-top: 1.125rem;
                }

                /* タッチターゲットを44×44pxに確保しつつ、見た目は8×8px */
                .dot {
                    width: 11px;
                    height: 11px;
                    border-radius: 50%;
                    background: var(--bg-color02);
                    border: none;
                    padding: 0px;
                    /* クリック領域を44px相当に拡大 */
                    margin: 0px;
                    /* 隣接ドットとの見た目の間隔を維持 */
                    box-sizing: content-box;
                    cursor: pointer;
                    transition: background .3s, transform .3s;
                    position: relative;
                }

                /* paddingで広げた領域内に実際のドットを描く */
                .dot::after {
                    content: '';
                    position: absolute;
                    inset: 0;
                    border-radius: 50%;
                    background: var(--bg-color02);
                    transition: background .3s, transform .3s;
                }

                .dot.active::after {
                    background: var(--secondry-color);
                }

                /* フォーカスリングをdot本体に表示 */
                .dot:focus-visible {
                    outline: 2px solid #555;
                    outline-offset: 2px;
                    border-radius: 50%;
                }

                /* 一時停止ボタン */
                .pause-btn {
                    position: absolute;
                    z-index: 100;
                    bottom: 0;
                    right: 50%;
                    transform: translateX(50%);
                    background: var(--white--color);
                    border: 0.76px solid var(--secondry-color);
                    border-radius: 50%;
                    /* padding: 0.5rem 0.46rem; */
                    width: 1.8125rem;
                    height: 1.8125rem;
                    cursor: pointer;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    color: var(--secondry-color);

                    &:has(span.is-play) {
                        background-color: var(--secondry-color);
                        border-color: var(--secondry-color);
                    }
                }

                /* アイコン共通 */
                .btn-icon {
                    display: inline-block;
                    width: 0.4375rem;
                    height: 0.56255rem;
                    position: relative;
                    flex-shrink: 0;
                }

                /* ── 一時停止アイコン：縦二本線 ── */
                .btn-icon::before,
                .btn-icon::after {
                    content: '';
                    position: absolute;
                    top: 0rem;
                    width: 0.125rem;
                    height: 0.5625rem;
                    background: currentColor;
                }

                .btn-icon::before {
                    left: 0rem;
                }

                .btn-icon::after {
                    left: 0.3125rem;
                }

                /* ── 再生アイコン：右向き三角 ── */
                .btn-icon.is-play::before {
                    width: 0;
                    height: 0;
                    background: transparent;
                    border-radius: 0;
                    border-style: solid;
                    border-width: 0.41rem 0 0.41rem 0.6875rem;
                    border-color: transparent transparent transparent var(--white-color);
                    top: -0.1rem;
                    left: -0.01rem;
                }

                .btn-icon.is-play::after {
                    display: none;
                    /* 三角は::beforeだけで描く */
                }

                .pause-btn:focus-visible {
                    outline: 2px solid #555;
                    outline-offset: 2px;
                }
            }
        }

        .flow-area {
            color: var(--text-charcoal2);

            .s-wrapper {
                padding: 6.25rem 2.375rem;

                .heading-area {
                    img {
                        top: -9.25rem;
                        left: 3.875rem;
                    }
                }

                .flow-list {
                    margin: 0;

                    .contents {
                        margin-top: 2.625rem;
                        position: relative;
                        height: 19rem;

                        &:first-child {
                            height: 20.4375rem;
                        }

                        &:nth-child(2) {
                            height: 22rem;
                        }

                        dt {
                            position: absolute;
                            z-index: 1;
                            top: 0;
                            left: 50%;
                            transform: translateX(-50%);
                            width: 7.25rem;
                            height: 7.25rem;
                            border-radius: 50%;
                            border: 2px solid var(--primary-color);

                            .step {
                                padding-top: 0.75rem;
                                font-size: var(--text-body);
                                font-family: var(--libre);
                                color: var(--primary-color);
                                font-weight: var(--bold);
                                text-align: center;
                            }

                            .title {
                                position: absolute;
                                width: 1px;
                                height: 1px;
                                padding: 0;
                                margin: -1px;
                                overflow: hidden;
                                white-space: nowrap;
                                border: 0;
                                clip: rect(0, 0, 0, 0);
                                clip-path: inset(50%);
                            }
                        }

                        dd {
                            .detail {
                                position: absolute;
                                z-index: 2;
                                top: 2.625rem;

                                img {
                                    margin-bottom: 0.5rem;
                                    width: 100%;
                                    height: 9.8125rem;
                                    object-fit: cover;
                                    object-position: center;
                                    border-radius: 0.625rem;
                                }

                                p {
                                    font-family: var(--noto-sans);
                                    font-size: var(--text-small);
                                    font-weight: var(--medium);
                                }
                            }

                            .arrow {
                                position: absolute;
                                bottom: 0;
                                left: 50%;
                                transform: translateX(-50%);
                                width: 1.0625rem;

                                img {
                                    width: 100%;
                                    height: auto;
                                }
                            }
                        }
                    }
                }
            }
        }

        .news-area {
            color: var(--text-charcoal);

            .s-wrapper {
                padding: 6.25rem 1rem;

                .news-list {
                    padding: 1.25rem 2.25rem 1.5625rem;
                    border: 1px solid var(--text-charcoal);

                    h2 {
                        font-size: 1.25rem;
                        font-weight: var(--medium);
                        color: var(--text-charcoal);
                    }

                    ul {
                        margin: 0;
                        padding: 0;

                        li {
                            height: fit-content;
                            border-top: 1px solid var(--text-color);

                            &:last-child {
                                border-bottom: 1px solid var(--text-color);
                            }

                            a {
                                height: fit-content;
                                padding: 0.25rem 0 0.5rem;

                                div {
                                    padding-right: 0.3125rem;
                                    display: flex;
                                    align-items: baseline;
                                    justify-content: space-between;

                                    .news-date {
                                        display: inline-block;
                                        /* margin-right: 0.5625rem; */
                                        font-family: var(--noto-sans);
                                        font-size: var(--text-small);
                                        width: 7.5em;
                                    }

                                    .news-cat {
                                        display: inline-block;
                                        width: 10.5em;
                                        text-align: center;
                                        font-family: var(--noto-sans);
                                        font-size: var(--text-small);
                                        color: var(--white-color);
                                        line-height: 1.0625rem;
                                        background-color: var(--secondry-color);
                                    }
                                }

                                .news-title {
                                    width: 16em;
                                    white-space: nowrap;
                                    overflow: hidden;
                                    text-overflow: ellipsis;
                                }
                            }
                        }

                    }
                }
            }
        }
    }
}

/* ----- tb レイアウト ----- */
@media screen and (width > 499px) {
    .home {
        .container {
            .vision-area {
                .s-wrapper {
                    padding: 7.8125rem 0;

                    .text-area {
                        margin-top: 4rem;

                        p {
                            margin-bottom: 1.7rem;
                            font-size: var(--text-body);
                        }
                    }

                    .flower-img {
                        bottom: 8.5rem;
                        right: 5.438rem;
                        width: 5.625rem;
                    }
                }
            }

            .traits-area {
                .s-wrapper {
                    padding: 7.8125rem 0;

                    .traits-img {
                        margin: 4rem 1.5rem 1rem;
                    }

                    p {
                        font-size: var(--text-body);
                        margin: 0 1.5rem 1.7rem;

                        &:last-child {
                            margin-bottom: 0;
                        }
                    }
                }
            }

            .works-area {
                .s-wrapper {
                    margin: auto;
                    padding: 0;

                    .heading-area {
                        img {
                            top: -10.125rem;
                        }
                    }

                    .works-list {
                        margin: 3.25rem 0 0;
                        padding: 0;
                        display: grid;
                        justify-content: center;
                        grid-template-columns: repeat(2, 22.0625rem);
                        gap: 6.75rem 1rem;

                        li {
                            margin-top: 0;

                            &:first-child {
                                margin-top: 0;
                            }

                            p {
                                margin-bottom: 1rem;
                                font-size: 1.375rem;
                            }

                            img {
                                width: 100%;
                                height: 22.0625rem;
                            }

                            &:last-child {
                                padding-bottom: 0;
                            }
                        }
                    }
                }
            }

            .working-image {
                .s-wrapper {
                    margin: auto;
                    padding: 7.8725rem 0;

                    .carousel-wrap {
                        margin-left: calc(50% - 50vw);
                        margin-right: calc(50% - 50vw);
                        margin-top: 4rem;
                        padding: 0 0.5rem 8rem;
                        width: 100vw;
                    }

                    .carousel-track-container {
                        height: 33.125rem;
                    }

                    .carousel-slide {
                        padding: 0.9375rem 1.5625rem;
                        flex: 0 0 71.4286%;
                        max-width: 71.4286%;
                        height: 33.125rem;
                    }

                    /* インジケーター */
                    .indicators {
                        gap: 0.33rem;
                        margin-top: 1.625rem;
                    }

                    /* タッチターゲットを44×44pxに確保しつつ、見た目は8×8px */
                    .dot {
                        width: 0.75rem;
                        height: 0.75rem;
                    }

                    /* 一時停止ボタン */
                    .pause-btn {
                        border: 2px solid var(--secondry-color);
                        width: 3.9375rem;
                        height: 3.9375rem;
                    }

                    /* アイコン共通 */
                    .btn-icon {
                        width: 0.9375rem;
                        height: 1.1875rem;
                    }

                    /* ── 一時停止アイコン：縦二本線 ── */
                    .btn-icon::before,
                    .btn-icon::after {
                        top: 0rem;
                        width: 0.25rem;
                        height: 1.1875rem;
                    }

                    .btn-icon::before {
                        left: 0rem;
                    }

                    .btn-icon::after {
                        left: 0.625rem;
                    }

                    /* ── 再生アイコン：右向き三角 ── */
                    .btn-icon.is-play::before {
                        width: 0;
                        height: 0;
                        background: transparent;
                        border-radius: 0;
                        border-style: solid;
                        border-width: 0.8rem 0 0.8rem 1.4rem;
                        border-color: transparent transparent transparent var(--white-color);
                        top: -0.1rem;
                        left: -0.01rem;
                    }

                    .btn-icon.is-play::after {
                        display: none;
                        /* 三角は::beforeだけで描く */
                    }

                    .pause-btn:focus-visible {
                        outline: 2px solid #555;
                        outline-offset: 2px;
                    }
                }
            }

            .flow-area {
                .s-wrapper {
                    padding: 7.8125rem 7.25rem;

                    .heading-area {
                        img {
                            top: -13.125rem;
                            left: 11.625rem;
                        }
                    }

                    .flow-list {


                        .contents {
                            margin-top: 2.625rem;
                            height: 28.5625rem;

                            &:first-child {
                                height: 28.5625rem;
                            }

                            &:nth-child(2) {
                                height: 30.1875rem;
                            }

                            &:last-child {
                                height: 25.4375rem;
                            }

                            dt {
                                width: 10.8125rem;
                                height: 10.8125rem;
                                border: 1.5px solid var(--primary-color);

                                .step {
                                    padding-top: 1.125rem;
                                    font-size: 1.625rem;
                                }
                            }

                            dd {
                                .detail {
                                    position: absolute;
                                    z-index: 2;
                                    top: 3.9375rem;

                                    img {
                                        margin-bottom: 1rem;
                                        height: 17.0625rem;
                                        border-radius: 1.25rem;
                                    }

                                    p {
                                        padding: 0 0.3125rem;
                                        font-size: var(--text-body);
                                    }
                                }

                                .arrow {
                                    width: 2.6875rem;
                                }
                            }


                        }
                    }
                }
            }

            .news-area {
                .s-wrapper {
                    padding: 7.8125rem 1.5rem;

                    .news-list {
                        padding: 1.5rem 1.6875rem 2rem 2.1875rem;

                        h2 {
                            font-size: 1.25rem;
                        }

                        ul {
                            li {
                                margin-right: 0.75rem;

                                a {
                                    display: flex;
                                    align-items: center;
                                    padding: 0.5rem 0;
                                    gap: 2.75rem;

                                    div {
                                        padding: 0 0 0 0.625rem;
                                        width: 15.5625rem;

                                        .news-date {
                                            font-size: var(--text-body);
                                            /* white-space: nowrap; */
                                        }

                                        .news-cat {
                                            width: 7em;
                                            font-size: var(--text-small);
                                            line-height: 1.625rem;
                                        }
                                    }

                                    .news-title {
                                        width: 22em;
                                        font-size: var(--text-body);
                                    }
                                }
                            }
                        }
                    }
                }
            }
        }
    }
}

/* ----- pc レイアウト ----- */
@media screen and (width > 1023px) {
    .home {
        .container {
            .vision-area {
                .s-wrapper {
                    padding: 9.375rem 0;

                    .text-area {
                        margin-top: 5rem;
                    }
                }
            }

            .traits-area {
                .s-wrapper {
                    padding: 9.375rem 0;

                    .traits-img {
                        margin: 4.375rem 15.0625rem 1rem;
                    }

                    p {
                        margin: 0 15.0625rem 1.7rem;
                    }
                }
            }

            .works-area {
                .s-wrapper {
                    margin: auto;
                    padding: 9.375rem 0;

                    .heading-area {
                        img {
                            top: -9.1875rem;
                            left: 34.5625rem;
                            width: 29.1875rem;
                        }
                    }

                    .works-list {
                        margin: 4.25rem 0 0;
                        grid-template-columns: repeat(2, 31.0625rem);
                        gap: 10rem 1.375rem;

                        li {
                            margin-top: 0;

                            p {
                                margin-bottom: 1.375rem;
                                font-size: 1.25rem;
                            }

                            div {
                                width: 31.0625rem;
                                height: 31.0625rem;
                                overflow: hidden;

                                img {
                                    width: 100%;
                                    height: 100%;
                                }
                            }

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

            .working-image {
                margin: auto;
                padding: 0;

                .s-wrapper {
                    margin: auto;
                    position: relative;
                    padding: 9.375rem 0;

                    .heading-area {
                        img {
                            top: -11.875rem;
                            left: 35.1875rem;
                            width: 29.1875rem;
                        }

                        .heading {
                            font-size: 3.1875rem;
                        }
                    }

                    .carousel-wrap {
                        margin-left: calc(50% - 50vw);
                        margin-right: calc(50% - 50vw);
                        width: 100vw;
                        /* margin:  5rem auto 0; */
                        margin-top: 5rem;
                        padding: 0 0 11.313rem;
                        /* width: 100%; */
                    }

                    .carousel-track-container {
                        max-width: 1280px;
                        width: 100%;
                        margin: 0 auto;
                        height: 56.1875rem;
                    }

                    .carousel-slide {
                        padding: 0.1.5rem 2.5rem;
                        flex: 0 0 71.4286%;
                        max-width: 71.4286%;
                        height: 56.1875rem;
                    }

                    /* インジケーター */
                    .indicators {
                        margin-top: 2.625rem;
                    }

                    /* タッチターゲットを44×44pxに確保しつつ、見た目は8×8px */
                    .dot {
                        width: 0.75rem;
                        height: 0.75rem;
                    }

                    /* 一時停止ボタン */
                    .pause-btn {
                        border: 3.5px solid var(--secondry-color);
                        width: 6.3125rem;
                        height: 6.3125rem;
                    }

                    /* アイコン共通 */
                    .btn-icon {
                        width: 1.5rem;
                        height: 1.9375rem;
                    }

                    /* ── 一時停止アイコン：縦二本線 ── */
                    .btn-icon::before,
                    .btn-icon::after {
                        width: 0.4375rem;
                        height: 1.9375rem;
                    }

                    .btn-icon::before {
                        left: 0rem;
                    }

                    .btn-icon::after {
                        left: 1.0625rem;
                    }

                    /* ── 再生アイコン：右向き三角 ── */
                    .btn-icon.is-play::before {
                        border-width: 1.15rem 0 1.15rem 2.3rem;
                    }
                }
            }

            .flow-area {
                .s-wrapper {
                    padding: 9.375rem 14.6875rem;

                    .heading-area {
                        img {
                            top: -21.4375rem;
                            left: 15.875rem;
                            width: 43.8125rem;
                        }

                        .heading {
                            font-size: 3.375rem;
                        }
                    }

                    .flow-list {
                        .contents {
                            margin-top: 5rem;

                            &:first-child {
                                height: 46.3125rem;
                            }

                            &:nth-child(2) {
                                height: 47.1875rem;
                            }

                            &:nth-child(3) {
                                height: 45.1875rem;
                            }

                            &:nth-last-child(2) {
                                height: 44.375rem;
                            }

                            &:last-child {
                                height: 39.875rem;
                            }

                            dt {
                                width: 18.1875rem;
                                height: 18.1875rem;
                                border: 2.5px solid var(--primary-color);

                                .step {
                                    padding-top: 1.8125rem;
                                    font-size: 2.75rem;
                                }
                            }

                            dd {
                                .detail {
                                    width: 100%;
                                    top: 6.5625rem;

                                    img {
                                        margin-bottom: 1.6875rem;
                                        height: 25.937rem;
                                        border-radius: 1.875rem;
                                    }

                                    p {
                                        padding: 0 0.3125rem;
                                        font-size: 1.5rem;
                                    }
                                }

                                .arrow {
                                    width: 4.5625rem;
                                }
                            }
                        }
                    }
                }
            }

            .news-area {
                .s-wrapper {
                    padding: 9.375rem 8.25rem;

                    .news-list {
                        padding: 2.0625rem 3.1875rem 2.5625rem;

                        h2 {
                            font-size: 1.3rem;
                        }

                        ul {
                            li {
                                margin-right: 0;

                                a {
                                    padding: 0.9375rem 0 1rem;
                                    gap: 2.8125rem;

                                    div {
                                        padding: 0 0 0 0.625rem;
                                        width: 21rem;

                                        .news-date {
                                            font-size: var(--text-body);
                                            /* white-space: nowrap; */
                                            transition: all 0.3s;
                                        }

                                        .news-cat {
                                            width: 10.3em;
                                            font-size: var(--text-body);
                                            line-height: 1.75rem;
                                            transition: all 0.3s;
                                        }
                                    }

                                    .news-title {
                                        width: 31em;
                                        font-size: var(--text-body);
                                        transition: all 0.3s;
                                    }

                                    @media (any-hover: hover) {
                                        &:hover {
                                            backdrop-filter: saturate(2.5);

                                            div {
                                                .news-date {
                                                    color: var(--black-color);
                                                }

                                                .news-cat {
                                                    filter: brightness(0.8) contrast(1.6);
                                                }
                                            }

                                            .news-title {
                                                color: var(--black-color);
                                            }
                                        }
                                    }
                                }
                            }
                        }
                    }
                }
            }
        }
    }
}





/* ---------- 新着情報 ページ ---------- */
/* ----- sp レイアウト ----- */
.news-page {
    color: var(--text-charcoal);

    .news-area {
        .s-wrapper {
            

            .news-list {
                padding-top: 6.25rem;
                ul {
                    margin: 2.5rem 0 0;
                    padding: 0;
                    display: grid;
                    grid-template-columns: 21.4375rem;
                    justify-content: center;
                    gap: 1.375rem;

                    li {
                        display: flex;
                        border: 1px solid var(--text-charcoal);
                        background-color: var(--white-color);


                        a {
                            display: flex;
                            gap: 1.1875rem;
                            overflow: hidden;

                            .news-thumb {
                                position: relative;
                                width: 6.875rem;
                                height: 4.875rem;
                                background-color: var(--noimg-color);
                                /* filter: brightness(1.5); */
                                display: grid;
                                place-items: center;

                                img {
                                    width: 100%;
                                    height: 100%;
                                    object-fit: cover;
                                    object-position: center;
                                    overflow: hidden;
                                }

                                div {
                                    width: 80%;

                                    img {
                                        width: 100%;
                                        height: auto;
                                    }
                                }

                                .news-new {
                                    display: block;
                                    position: absolute;
                                    top: 8px;
                                    left: 0;
                                    background: var(--secondry-color);
                                    color: white;
                                    padding: 2px 10px;
                                    font-size: 10px;
                                    font-weight: bold;
                                }
                            }

                            .news-meta {
                                width: 11.75rem;

                                .time-cat-area {
                                    margin: 0.3125rem 0;
                                    display: flex;
                                    align-items: center;

                                    .news-date {
                                        width: 7.5em;
                                        font-size: var(--text-small);
                                        font-family: var(--noto-sans);
                                    }

                                    .news-cat {
                                        /* padding: 0.095rem 0; */
                                        display: block;
                                        line-height: 1.4166;
                                        font-size: 0.75rem;
                                        font-family: var(--noto-sans);
                                        color: var(--white-color);
                                        text-align: center;
                                        background-color: var(--secondry-color);
                                        width: 7em;
                                        white-space: nowrap;
                                    }
                                }

                                .news-title {
                                    display: -webkit-box;
                                    -webkit-box-orient: vertical;
                                    -webkit-line-clamp: 2;
                                    /* 2行で省略 */
                                    height: calc(var(--text-small) * 1.4 * 2);
                                    font-size: var(--text-small);
                                    font-weight: var(--medium);
                                    line-height: 1.4;
                                    overflow: hidden;
                                    overflow: clip;
                                    line-clamp: 2;
                                }

                                .news-excerpt {
                                    display: none;
                                }
                            }
                        }
                    }
                }
            }

            .pagination {
                padding: 2.5rem 1.6875rem 5rem;

                .page-list {

                    padding: 0;
                    display: flex;
                    justify-content: center;
                    gap: 5rem;

                    li {
                        width: 7.5rem;
                        height: 1.3125rem;
                    }

                    .first-list,
                    .last-list {

                        a,
                        .disabled {
                            display: flex;
                            align-items: center;
                            gap: 0.25rem;
                            width: 100%;
                            height: 100%;
                            border-radius: 0.6563rem;

                            .prev-arrow,
                            .next-arrow {
                                height: 0.5625rem;
                                display: block;
                                border-top: 0.3125rem solid transparent;
                                border-bottom: 0.3125rem solid transparent;
                            }

                            .text {
                                font-size: 0.75rem;
                                font-family: var(--noto-sans);
                                font-weight: var(--bold);
                            }
                        }

                        .disabled {
                            pointer-events: none;
                            opacity: 0.5;
                        }
                    }

                    .first-list {

                        a,
                        .disabled {
                            background-color: var(--text-charcoal2);

                            .prev-arrow {
                                margin-left: 1.125rem;
                                border-right: 0.5625rem solid var(--white-color);
                            }

                            .text {
                                color: var(--white-color);
                            }
                        }
                    }

                    .last-list {

                        a,
                        .disabled {
                            background-color: var(--white-color);
                            border: 1px solid var(--text-charcoal2);
                            justify-content: flex-end;

                            .next-arrow {
                                margin-right: 1.125rem;
                                border-left: 0.5625rem solid var(--text-charcoal2);
                            }

                            .text {
                                color: var(--text-charcoal2);
                            }
                        }
                    }
                }
            }
        }
    }
}

/* ----- tb レイアウト ----- */
@media screen and (width > 499px) {
    .news-page {
        .news-area {
            .s-wrapper {

                .news-list {
                    padding-top: 7.1875rem;
                    ul {
                        margin: 2.5rem 0 0;
                        padding: 0;
                        display: grid;
                        grid-template-columns: repeat(2, 21.875rem);
                        justify-content: center;
                        gap: 1rem;

                        li {
                            display: flex;
                            flex-direction: column;

                            a {
                                flex-direction: column;
                                gap: 1.5rem;

                                .news-thumb {
                                    width: 100%;
                                    height: 8rem;

                                    .news-new {
                                        display: block;
                                        padding: 2px 5px;
                                        top: 1.125rem;
                                        width: 4rem;
                                        text-align: center;
                                        font-size: var(--text-body);
                                        font-weight: normal;
                                    }

                                    div {
                                        width: 60%;
                                    }
                                }

                                .news-meta {
                                    width: auto;
                                    padding: 0 3.4375rem 1.5rem;

                                    .time-cat-area {
                                        align-items: flex-start;
                                        margin: 0 0 1rem;

                                        .news-date {
                                            width: 10em;
                                            font-size: var(--text-body);
                                        }

                                        .news-cat {
                                            line-height: 1.3125;
                                            font-size: 0.9125rem;
                                            width: 7.25rem;
                                        }
                                    }

                                    .news-title {
                                        margin-bottom: 1rem;
                                        -webkit-line-clamp: 3;
                                        /* 3行で省略 */
                                        height: calc(1.25rem * 1.7 * 3);
                                        font-size: 1.25rem;
                                        font-weight: var(--semibold);
                                        line-height: 1.7;
                                        line-clamp: 3;
                                    }

                                    .news-excerpt {
                                        display: -webkit-box;
                                        -webkit-box-orient: vertical;
                                        -webkit-line-clamp: 3;
                                        /* 3行で省略 */
                                        height: calc(1rem * 1.7 * 3);
                                        font-size: var(--text-body);
                                        line-height: 1.7;
                                        line-clamp: 3;
                                        overflow: hidden;
                                    }
                                }
                            }
                        }
                    }
                }

                .pagination {
                    padding: 2.5rem 24.5625rem 5rem;

                    .page-list {
                        gap: 10rem;

                        li {
                            width: 10.375rem;
                            height: 1.8125rem;
                        }

                        .first-list,
                        .last-list {

                            a,
                            .disabled {
                                width: 10.375rem;
                                gap: 0.3437rem;
                                border-radius: 0.9062rem;

                                .prev-arrow,
                                .next-arrow {
                                    height: var(--text-small);
                                    border-top: 0.44rem solid transparent;
                                    border-bottom: 0.44rem solid transparent;
                                }

                                .text {
                                    font-size: var(--text-body);
                                }
                            }
                        }

                        .first-list {

                            a,
                            .disabled {

                                .prev-arrow {
                                    margin-left: 1.5625rem;
                                    border-right: 0.75rem solid var(--white-color);
                                }
                            }
                        }

                        .last-list {

                            a,
                            .disabled {
                                .next-arrow {
                                    margin-right: 1.5625rem;
                                    border-left: 0.75rem solid var(--text-charcoal2);
                                }
                            }
                        }
                    }
                }
            }
        }
    }
}

/* ----- pc レイアウト ----- */
@media screen and (width > 1023px) {
    .news-page {
        .news-area {
            .s-wrapper {

                .news-list {
                    padding-top: 9.375rem;
                    ul {
                        grid-template-columns: repeat(2, 31.0625rem);
                        gap: 1.375rem;

                        li {
                            a {
                                gap: 2rem;
                                transition: box-shadow 0.3s;

                                .news-thumb {
                                    height: 10.9375rem;

                                    img {
                                        transition: all 0.7s;
                                    }

                                    .news-new {
                                        top: 1rem;
                                        width: 4rem;
                                        font-size: var(--text-body);
                                    }

                                    div {
                                        width: 40%;

                                        img {
                                            transition: all 0.7s;
                                        }
                                    }
                                }

                                @media (any-hover: hover) {

                                    &:hover {
                                        box-shadow: 4px 4px 12px var(--boxshadow-color);

                                        img {
                                            transform: scale(1.1);
                                        }

                                        .time-cat-area {

                                            .news-date {
                                                filter: saturate(1.7);
                                            }

                                            .news-cat {
                                                filter: brightness(0.8) contrast(1.6);
                                            }
                                        }

                                        .news-title {
                                            color: black;
                                        }

                                        .news-excerpt {
                                            filter: saturate(1.7);
                                        }
                                    }
                                }

                                &:focus {
                                    box-shadow: 4px 4px 12px var(--boxshadow-color);

                                    img {
                                        transform: scale(1.1);
                                    }

                                    .time-cat-area {

                                        .news-date {
                                            filter: saturate(1.7);
                                        }

                                        .news-cat {
                                            filter: brightness(0.8) contrast(1.6);
                                        }
                                    }

                                    .news-title {
                                        color: black;
                                    }

                                    .news-excerpt {
                                        filter: saturate(1.7);
                                    }
                                }

                                .news-meta {
                                    padding: 0 5.25rem 2rem;

                                    .time-cat-area {
                                        align-items: baseline;
                                        padding: 0;
                                        margin: 0 0 1.3125rem;

                                        .news-date {
                                            transition: all 0.3s;
                                            width: 8em;
                                            font-size: 1.3125rem;
                                        }

                                        .news-cat {
                                            width: 8em;
                                            font-size: 1.25rem;
                                            transition: all 0.3s;
                                        }
                                    }

                                    .news-title {
                                        font-size: 1.25rem;
                                        height: calc(1.25rem * 1.7 * 3);
                                        transition: all 0.3s;
                                    }

                                    .news-excerpt {
                                        font-size: var(--text-body);
                                        height: calc(1rem * 1.7 * 3);
                                        transition: all 0.3s;
                                    }
                                }
                            }
                        }
                    }
                }

                .pagination {
                    padding: 4rem 24.5625rem 10rem;

                    .page-list {

                        .first-list,
                        .last-list {

                            a,
                            .disabled {
                                gap: 0.5rem;
                                border-radius: 0.9062rem;

                                .prev-arrow,
                                .next-arrow {
                                    height: var(--text-small);
                                    border-top: 0.53rem solid transparent;
                                    border-bottom: 0.53rem solid transparent;
                                }

                                .text {
                                    font-size: var(--text-body);
                                }
                            }
                        }

                        .first-list {

                            a,
                            .disabled {
                                transition: all 0.3s;


                                .prev-arrow {
                                    margin-left: 1.5625rem;
                                    border-right: 0.8rem solid var(--white-color);
                                }

                                @media (any-hover: hover) {

                                    &:hover {
                                        filter: saturate(2.5);
                                    }
                                }

                                &:focus {
                                    filter: saturate(2.5);
                                }
                            }
                        }

                        .last-list {

                            a,
                            .disabled {
                                transition: all 0.3s;

                                .next-arrow {
                                    transition: all 0.3s;
                                    margin-right: 1.5625rem;
                                    border-left: 0.8rem solid var(--text-charcoal2);
                                }

                                .text {
                                    transition: all 0.3s;
                                }

                                @media (any-hover: hover) {

                                    &:hover {
                                        background-color: var(--text-charcoal2);
                                        filter: saturate(2.5);

                                        .next-arrow {
                                            border-left-color: var(--white-color);
                                        }

                                        .text {
                                            color: var(--white-color);
                                        }
                                    }
                                }

                                &:focus {
                                    background-color: var(--text-charcoal2);
                                    filter: saturate(2.5);

                                    .next-arrow {
                                        border-left-color: var(--white-color);
                                    }

                                    .text {
                                        color: var(--white-color);
                                    }
                                }
                            }
                        }
                    }
                }
            }
        }
    }
}





/* ---------- 個別投稿 ページ ---------- */

/* ----- sp レイアウト ------ */
.single-page {
    color: var(--text-charcoal2);

    .post-area {
        width: 100%;

        .s-wrapper {
            padding: 0 1rem 0;

            .heading-area {
                margin-top: 5rem;
                img {
                    left: 5.1875rem;
                }
            }

            .contents-area {
                padding-top: 2.5rem;

                .post-thumb {
                    width: 100%;
                    height: auto;
                    margin-bottom: 1.25rem;

                    img {
                        width: 100%;
                        height: 100%;
                        object-fit: cover;
                        object-position: center;
                    }
                }

                .date-cat-area {
                    margin: 0 0.7rem 0.75rem;
                    display: flex;
                    justify-content: space-between;
                    align-items: center;

                    .post-date,
                    .post-cat {
                        display: inline-block;
                    }

                    .post-date {
                        font-size: var(--text-body);
                        font-family: var(--noto-sans);
                        font-weight: var(--medium);
                        width: 8.5rem;
                    }

                    .post-cat {
                        width: 11.26em;
                        font-size: 0.9125rem;
                        height: 20px;
                        font-family: var(--noto-sans);
                        font-weight: var(--medium);
                        line-height: 20px;
                        text-align: center;
                        background-color: var(--primary-color);
                        color: var(--white-color);
                        a {
                            display: block;
                            width: 100%;
                            height: 100%;
                        }
                    }
                }

                .post-title {
                    margin: 0 0.7rem 1rem;
                    font-size: 1.3125rem;
                    font-weight: var(--semibold);
                }

                .post-content {
                    font-size: var(--text-body);
                    font-weight: var(--regular);
                    margin: 0 0.7rem 4rem;

                    h2 {
                        font-size: 1.28rem;
                    }

                    h3 {
                        font-size: 1.24rem;
                    }

                    h4 {
                        font-size: 1.20rem;
                    }

                    h5,
                    h6 {
                        font-size: 1.15rem;
                    }

                    h2,
                    h3,
                    h4,
                    h5,
                    h6 {
                        margin-top: 1em;
                        font-weight: var(--semibold);
                        line-height: 1.35;
                    }

                    p {
                        margin-top: 0.75em;
                    }

                    h2+p,
                    h3+p,
                    h4+p,
                    h5+p,
                    h6+p {
                        margin-top: 1em;
                    }

                    ul,
                    ol {
                        margin-top: 0.6em;

                        li {
                            line-height: 1.6;
                            list-style-position: outside;
                        }
                    }

                    ul {
                        li {
                            list-style-type: disc;
                        }
                    }

                    ol {
                        li {
                            list-style-type: decimal;
                        }
                    }

                    figure {
                        margin-top: 0.5em;
                        margin-bottom: 1em;
                    }

                    a {
                        text-decoration: underline;
                        color: var(--secondry-color);
                    }
                }
            }

            .pagination {
                .page-list {
                    margin: 0 1rem 4.0625rem;
                    padding: 0;
                    display: flex;
                    justify-content: space-between;

                    li {
                        width: 7.5rem;
                        height: 1.3125rem;
                    }

                    .first-list,
                    .last-list {

                        a,
                        .disabled {
                            display: flex;
                            align-items: center;
                            gap: 0.5rem;
                            width: 100%;
                            height: 100%;
                            border-radius: 0.6563rem;

                            .prev-arrow,
                            .next-arrow {
                                height: 0.5625rem;
                                display: block;
                                border-top: 0.3125rem solid transparent;
                                border-bottom: 0.3125rem solid transparent;
                            }

                            .text {
                                font-family: var(--noto-sans);
                                font-size: 0.75rem;
                                font-weight: var(--bold);
                            }
                        }

                        .disabled {
                            pointer-events: none;
                            opacity: 0.5;
                        }
                    }

                    .first-list {

                        a,
                        .disabled {
                            background-color: var(--text-charcoal2);

                            .prev-arrow {
                                margin-left: 1.125rem;
                                border-right: 0.5625rem solid var(--white-color);
                            }

                            .text {
                                color: var(--white-color);
                            }
                        }
                    }

                    .last-list {

                        a,
                        .disabled {
                            background-color: var(--white-color);
                            border: 1px solid var(--text-charcoal2);
                            justify-content: flex-end;

                            .next-arrow {
                                margin-right: 1.125rem;
                                border-left: 0.5625rem solid var(--text-charcoal2);
                            }

                            .text {
                                color: var(--text-charcoal2);
                            }
                        }
                    }
                }
            }
        }
    }
}

/* ----- tb レイアウト ----- */
@media screen and (width > 499px) {
    .single-page {
        .post-area {
            .s-wrapper {
                padding: 0;
                padding-inline: 7.4375rem;

                .heading-area {
                    img {
                        top: -9.25rem;
                        left: 21.4375rem;
                        width: 19.125rem;
                    }
                }

                .contents-area {
                    margin-bottom: 2.5rem;
                    padding: 2.5rem 0 0;

                    .post-thumb {
                        width: 100%;
                        margin-bottom: 1.25rem;
                    }

                    .date-cat-area {
                        margin: 0 1rem 1.25rem;

                        .post-date {
                            font-size: 1.25rem;
                            width: 7.6em;
                        }

                        .post-cat {
                            width: 10.791em;
                            font-size: 1.5rem;
                            height: 2.0625rem;
                            line-height: 2.0625rem;
                        }
                    }

                    .post-title {
                        margin: 0 1rem 1.25rem;
                        font-size: 1.3125rem;
                    }

                    .post-content {
                        /* ----- ここから ----- */
                        margin: 0 1rem 2.5rem;
                        font-size: var(--text-body);


                        h2 {
                            font-size: 1.28rem;
                        }

                        h3 {
                            font-size: 1.24rem;
                        }

                        h4 {
                            font-size: 1.20rem;
                        }

                        h5,
                        h6 {
                            font-size: 1.15rem;
                        }
                    }
                }

                .pagination {
                    padding-bottom: 4rem;

                    .page-list {
                        margin: 0;
                        display: flex;
                        justify-content: center;
                        gap: 10rem;

                        li {
                            width: 10.375rem;
                            height: 1.8125rem;
                        }

                        .first-list,
                        .last-list {

                            a,
                            .disabled {
                                gap: var(--text-small);
                                border-radius: 0.9063rem;

                                .prev-arrow,
                                .next-arrow {
                                    height: var(--text-small);
                                    border-top: 0.44rem solid transparent;
                                    border-bottom: 0.44rem solid transparent;
                                }

                                .text {
                                    font-size: var(--text-body);
                                }
                            }
                        }

                        .first-list {

                            a,
                            .disabled {

                                .prev-arrow {
                                    margin-left: 1.56255rem;
                                    border-right: 0.8rem solid var(--white-color);
                                }
                            }
                        }

                        .last-list {

                            a,
                            .disabled {
                                .next-arrow {
                                    margin-right: 1.5625rem;
                                    border-left: 0.8rem solid var(--text-charcoal2);
                                }
                            }
                        }
                    }
                }
            }
        }
    }
}

/* ----- pc レイアウト ----- */
@media screen and (width > 1023px) {
    .single-page {
        .post-area {
            .s-wrapper {
                .breadcrumb {
                    padding-inline: 8.0625rem;
                }

                .heading-area {
                    margin-top: 10rem;
                    img {
                        top: -14.125rem;
                        left: 34.3125rem;
                        width: 27.375rem;
                    }
                }

                .contents-area {
                    padding: 4rem 8.0625rem 8.875rem;
                    margin: 0;

                    .post-thumb {
                        width: 100%;
                        margin-bottom: 2rem;
                    }

                    .date-cat-area {
                        margin: 0 0 1.5rem;

                        .post-date {
                            font-size: 2rem;
                            width: 8.6em;
                        }

                        .post-cat {
                            width: 16.08em;
                            font-size: 1.5rem;
                            height: 2.1875rem;
                            line-height: 2.1875rem;
                        }
                    }

                    .post-title {
                        margin: 0 0 1.5rem;
                        font-size: 1.4375rem;
                        line-height: 1.3333;
                    }

                    .post-content {
                        margin: 0;
                        font-size: 1.125rem;
                        line-height: 1.75;


                        h2 {
                            font-size: 1.38rem;
                            margin-top: 3em;
                        }

                        h3 {
                            font-size: 1.31rem;
                            margin-top: 2em;
                        }

                        h4 {
                            font-size: 1.25rem;
                        }

                        h5,
                        h6 {
                            font-size: 1.15rem;
                        }

                        figure {
                            margin-bottom: 1.5em;
                        }
                    }
                }

                .pagination {
                    .page-list {
                        .first-list {
                            a {
                                transition: all 0.3s;

                                @media (any-hover: hover) {
                                    &:hover {
                                        filter: saturate(2.5);
                                    }
                                }

                                &:focus {
                                    filter: saturate(2.5);
                                }
                            }
                        }

                        .last-list {

                            a {
                                transition: all 0.3s;

                                @media (any-hover: hover) {
                                    &:hover {
                                        background-color: var(--text-charcoal2);
                                        filter: saturate(2.5);

                                        .next-arrow {
                                            border-left-color: var(--white-color);
                                        }

                                        .text {
                                            color: var(--white-color);
                                        }
                                    }
                                }

                                &:focus {
                                    background-color: var(--text-charcoal2);
                                    filter: saturate(2.5);

                                    .next-arrow {
                                        border-left-color: var(--white-color);
                                    }

                                    .text {
                                        color: var(--white-color);
                                    }
                                }
                            }
                        }
                    }
                }
            }
        }
    }
}





/* ---------- アーカイブ ページ ---------- */
/* ----- sp レイアウト ----- */
.archive {
    .news-page {
        .news-area {
            .s-wrapper {
                padding-top: 0;

                .breadcrumb {
                    padding: 1rem 1rem 3rem;
                }
            }
        }
    }
}

/* ----- tb レイアウト ----- */
@media screen and (width > 499px) {
    .archive {
        .news-page {
            .news-area {
                .s-wrapper {
                    padding-top: 0;
                }
            }
        }
    }
}

/* ----- tb レイアウト ----- */
@media screen and (width >1023px) {
    .archive {
        .news-page {
            .news-area {
                .s-wrapper {
                    .breadcrumb {
                        padding: 1rem 9.375rem 3.5rem;
                    }
                    .pagination {
                        padding-bottom: 3rem;
                    }
                }
            }
        }
    }
}



/* ---------- アーカイブリスト ---------- */
/* ----- sp レイアウト ----- */
.sidebar-archive {
    padding-top: 40px;
    padding-bottom: 44px;
    display: flex;
    align-items: start;

    .archive-month,
    .archive-category {
        width: 50%;

        summary {
            font-size: 1.2rem;
            text-align: center;
            color: var(--text-charcoal2);
        }

        ul {
            padding: 0;
            margin: 0 0 0 1rem;

            li {
                line-height: 2.5;
                color: var(--text-charcoal2);
                white-space: nowrap;

                &::before {
                    content: "・";
                }

                a {
                    color: var(--secondry-color);
                }
            }
        }
    }

    .archive-month {
        &[open] {
            border-right: 1px solid var(--text-charcoal2);

            &:has(+ .archive-category[open]) {
                border-right: 1px solid var(--text-charcoal2);
            }
        }

        &[open]+.archive-category {
            border: none;
        }

        &:has(+ .archive-category[open]) {
            border: none;
        }
    }

    .archive-category {
        border-left: 1px solid var(--text-charcoal2);
    }
}

/* ---------- teblet レイアウト ---------- */
@media screen and (width > 450px) {
    .sidebar-archive {
        padding-top: 30px;
        padding-bottom: 90px;

        .archive-month,
        .archive-category {

            summary {
                font-size: 1.6rem;
                margin-bottom: 1rem;
            }

            ul {
                margin-left: 3rem;

                li {
                    line-height: 1.8;
                    font-size: 1.4375rem;
                }
            }
        }
    }
}

/* ---------- pc レイアウト ---------- */
@media screen and (width > 768px) {
    .sidebar-archive {
        max-width: 1280px;
        margin-inline: auto;
        padding-bottom: 9rem;

        .archive-month,
        .archive-category {
            summary {
                cursor: pointer;
                transition: all 0.3s;

                &:hover {
                    text-shadow: 2px 2px 12px var(--secondry-color);
                }
            }

            ul {
                margin-left: 14rem;
            }
        }
    }
}





/* ---------- 事業紹介 ページ ---------- */
/* -----sp レイアウト ----- */
.works-page {
    .works-area {
        .s-wrapper {
            padding-top: 6.25rem;
            padding-bottom: 4.6875rem;

            .heading-area {
                img {
                    top: -6.75rem;
                }
            }

            .works-list {
                margin-top: 2.625rem;
                padding: 0;
                display: grid;
                grid-template-columns: 1fr;
                gap: 4rem;

                li {
                    .title {
                        margin-bottom: 0.5rem;
                        font-weight: var(--medium);
                        text-align: center;

                        &::before {
                            content: "【";
                        }

                        &::after {
                            content: "】";
                        }
                    }

                    .img {
                        width: 100%;
                        height: 11.75rem;

                        img {
                            width: 100%;
                            height: 100%;
                            object-position: center;
                            object-fit: cover;
                        }
                    }

                    .desc {
                        margin: 0.5rem 1.125rem 0;
                        font-size: var(--text-small);
                        line-height: 1.4286;

                    }
                }

            }
        }
    }

    .pcwork-img-area {
        .s-wrapper {
            padding-top: 5rem;
            padding-bottom: 7rem;

            .contents-area {
                padding-top: 2.675rem;

                .img-area {
                    margin: 0 1rem;
                    height: 14.375rem;
                    overflow: hidden;
                    background-color: var(--noimg-color);

                    img {
                        width: 100%;
                        height: 100%;
                        object-fit: cover;
                        object-position: center;
                    }
                }

                .desc-area {
                    padding: 0.5rem 1rem 0;
                    display: grid;
                    grid-template-columns: 1fr;
                    gap: 1.7rem;

                }
            }
        }
    }

    .office-img-area {
        .s-wrapper {
            padding: 5rem 0 5rem;

            .contents-area {
                padding-top: 2.875rem;

                .img-area {
                    margin: 0 1rem;
                    display: grid;
                    grid-template-columns: 1fr 1fr;
                    justify-content: center;
                    gap: 1rem;

                    img {
                        width: 100%;
                        height: 9.875rem;
                        object-fit: cover;

                        &:first-child {
                            grid-column: 1 / 3;
                            height: 11.25rem;
                        }
                    }
                }

                .desc-area {
                    padding: 1rem 1rem 0;
                    display: grid;
                    grid-template-columns: 1fr;
                    gap: 1.7rem;
                }
            }
        }
    }

    .staff-area {
        .s-wrapper {
            padding: 5rem 0;


            .contents-area {
                padding-top: 2.625rem;
                display: grid;
                grid-template-columns: 1fr;
                justify-content: center;
                gap: 3.75rem;

                .staff {
                    display: flex;
                    flex-direction: column;
                    align-items: center;
                    gap: 1rem;

                    .face-img {
                        width: 6.25rem;
                        height: 6.25rem;
                        border-radius: 50%;
                        overflow: hidden;

                        img {
                            width: 100%;
                            height: 100%;
                        }
                    }

                    h3 {
                        padding-bottom: 0.5625rem;
                        font-size: var(--text-small);
                        font-weight: var(--regular);
                        text-align: center;
                        letter-spacing: 0.03em;

                        span {
                            font-size: 1.0625rem;
                        }
                    }

                    p {
                        margin: auto;
                        width: 15rem;
                        font-size: 0.9375rem;
                        letter-spacing: 0.03em;
                        line-height: 1.5;
                    }
                }
            }
        }
    }
}

/* -----tb レイアウト ----- */
@media screen and (width > 499px) {
    .works-page {
        .works-area {
            .s-wrapper {
                padding-top: 7.1875rem;
                padding-bottom: 4.6875rem;

                .heading-area {
                    img {
                        top: -10.125rem;
                    }
                }

                .works-list {
                    margin: 0;
                    padding: 3.25rem 1.4375rem 8.625rem;
                    grid-template-columns: repeat(2, 1fr);
                    gap: 6.75rem 1rem;

                    li {
                        .title {
                            margin-bottom: 1rem;
                            font-size: 1.375rem;
                        }

                        .img {
                            width: 100%;
                            height: auto;
                            aspect-ratio: 1 / 1;
                        }

                        .desc {
                            margin: 1rem 0.4375rem 0;
                        }
                    }
                }
            }
        }

        .pcwork-img-area {
            .s-wrapper {
                padding: 5rem 0 5rem;

                .contents-area {
                    padding-top: 4rem;

                    .img-area {
                        margin: 0 1.5rem;
                        height: 23.0625rem;
                    }

                    .desc-area {
                        padding: 0.5rem 1.5rem 0;
                    }
                }
            }
        }

        .office-img-area {
            .s-wrapper {

                .contents-area {
                    padding-top: 4rem;

                    .img-area {
                        margin: 0 1.5rem;
                        gap: 3.4375rem 1.4375rem;

                        img {
                            height: 20.6875rem;

                            &:first-child {
                                height: 23.6875rem;
                            }
                        }
                    }

                    .desc-area {
                        padding: 1rem 1.5rem 0;
                    }
                }
            }
        }

        .staff-area {
            .s-wrapper {
                padding: 5rem 0;

                .heading-area {
                    img {
                        top: -11.6875rem;
                    }
                }

                .contents-area {
                    padding-top: 4rem;
                    margin: 0;
                    gap: 2rem;

                    .staff {
                        padding-top: 3.25rem;
                        gap: 0;

                        .face-img {
                            width: 12.0625rem;
                            height: 12.0625rem;
                        }

                        h3 {
                            padding-bottom: 0;
                            padding-top: 2.75rem;
                            font-size: 1.5rem;
                            font-weight: var(--medium);

                            span {
                                font-size: 1.5rem;
                            }
                        }

                        p {
                            width: 19em;
                            font-size: 1.5rem;
                            font-weight: var(--medium);
                            line-height: 1.4166;
                        }
                    }
                }
            }
        }
    }
}

/* -----pc レイアウト ----- */
@media screen and (width > 1023px) {
    .works-page {
        /* padding-bottom: 14.375rem; */

        .works-area {
            .s-wrapper {
                padding-top: 9.375rem;
                padding-bottom: 10rem;

                .heading-area {
                    img {
                        top: -15.4375rem;
                    }
                }

                .works-list {
                    padding: 4.25rem 8.25rem 0;
                    grid-template-columns: repeat(2, 31.0625rem);
                    gap: 10rem 1.375rem;

                    li {

                        h3 {
                            margin-bottom: 2.25rem;
                            font-size: 2.1875rem;
                        }

                        div {
                            width: 100%;
                            aspect-ratio: 1 / 1;
                            overflow: hidden;

                            img {
                                aspect-ratio: 1 / 1;
                                height: auto;
                                transition: all 0.7s ease-in-out;

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

                                &:focus {
                                    scale: 1.1;
                                }
                            }
                        }

                        .desc {
                            margin: 0;
                            padding: 1.3125rem 0 0;
                            font-size: var(--text-body);
                        }
                    }
                }
            }
        }

        .pcwork-img-area {
            .s-wrapper {
                padding-top: 5.75rem;

                .heading-area {
                    img {
                        top: -14.875rem;
                    }
                }

                .contents-area {

                    .img-area {
                        margin: 0 14.625rem;
                        height: 32.0625rem;

                        img {
                            width: 100%;
                            height: 100%;
                        }
                    }

                    .desc-area {
                        padding: 1rem 14.625rem 0;

                        p {
                            font-size: 1.125rem;
                        }
                    }
                }
            }
        }

        .office-img-area {
            .s-wrapper {
                padding: 5.75rem 0 7.125rem;

                .contents-area {


                    .img-area {
                        margin: 0 14.625rem;
                        gap: 1.9375rem 1.5rem;

                        img {
                            height: 23.5rem;

                            &:first-child {

                                img {
                                    height: 31.5625rem;
                                }
                            }
                        }
                    }

                    .desc-area {
                        padding: 1rem 14.625rem 0;

                        p {
                            font-size: 1.125rem;
                        }
                    }
                }
            }
        }

        .staff-area {
            .s-wrapper {
                padding: 5.75rem 0;

                .heading-area {
                    img {
                        top: -14.625rem;
                    }
                }

                .contents-area {
                    display: grid;
                    grid-template-columns: repeat(2, 22.9375rem);
                    justify-content: center;
                    gap: 5rem 7.6875rem;

                    .staff {
                        padding: 0;
                        gap: 2.125rem;

                        .face-img {
                            width: 17.875rem;
                            height: 17.875rem;

                            img {
                                position: relative;
                                z-index: 10;
                                transition: all 0.7s;
                            }
                        }

                        h3 {
                            padding: 0;
                            font-size: 1.5rem;
                        }

                        p {
                            width: 18em;
                            font-size: 1.25rem;
                        }

                        &:first-child {
                            grid-column: 1 / 3;
                            justify-self: center;
                        }

                        &:has(p:hover, h3:hover, img:hover) {
                            .face-img {
                                img {
                                    scale: 1.1;
                                }
                            }
                        }
                    }
                }
            }
        }
    }
}





/* ---------- アクセス ページ ---------- */
/* ----- sp レイアウト ----- */
.access-page {
    .access-area {
        .s-wrapper {
            padding-top: 6.25rem;
            margin-bottom: 2.8125rem;

            .info-list {
                margin: 0 1rem 1.625rem;
                display: grid;
                grid-template-columns: 1fr;
                gap: 2rem;

                dt {
                    padding-bottom: 0.5rem;
                    width: 100%;
                    font-family: var(--noto-sans);
                    font-size: 1.25rem;
                    color: var(--text-charcoal2);
                    line-height: 1.7;
                    border-bottom: 1px solid var(--text-charcoal);
                }

                dd {
                    padding-top: 0.5rem;
                    font-family: var(--noto-sans);
                    font-size: 0.9375rem;
                    color: var(--text-charcoal2);
                    line-height: 1.7;
                }
            }

            .map-area {
                margin: 0 1rem;
                display: flex;
                flex-direction: column;
                gap: 1rem;

                iframe {
                    width: 100%;
                    height: 18rem;
                }

                figure {
                    width: 100%;

                    img {
                        width: 100%;
                        height: 27.8125rem;
                        object-fit: cover;
                    }
                }

                p {
                    margin-top: -0.5rem;
                    font-size: var(--text-small);
                    font-weight: var(--regular);

                    &::before {
                        content: "■ ";
                    }
                }
            }
        }
    }
}

/* -----tb レイアウト ----- */
@media screen and (width > 499px) {
    .access-page {
        .access-area {
            .s-wrapper {
                padding: 7.1875rem 0 0;
                margin-bottom: 0;

                .info-list {
                    margin: 0 0 4rem;
                    display: grid;
                    grid-template-columns: repeat(2, 21.9375rem);
                    grid-template-rows: 8.5625rem 4.9375rem 4.9375rem;
                    grid-auto-flow: column;
                    justify-content: center;
                    gap: 1.5rem;

                    dt {
                        font-size: 1.25rem;

                        dd {
                            font-size: 1.0625rem;
                        }
                    }
                }

                .map-area {
                    margin: 0;
                    display: grid;
                    grid-template-columns: repeat(2, 21.9375rem);
                    justify-content: center;
                    gap: 1rem;

                    iframe {
                        width: 100%;
                        height: 29.75rem;
                    }

                    figure {
                        width: 100%;

                        img {
                            width: 100%;
                            height: 29.75rem;
                        }
                    }

                    p {
                        font-size: var(--text-small);
                    }
                }
            }
        }
    }
}


/* -----pc レイアウト ----- */
@media screen and (width > 1023px) {
    .access-page {
        .access-area {
            .s-wrapper {
                padding: 9.375rem 0 0;

                .info-list {
                    margin: 4.875rem 0 5rem;
                    grid-template-columns: repeat(2, 31.1875rem);
                    grid-template-rows: 11.8125rem 6.9375rem 6.9375rem;
                    gap: 2.125rem;

                    dt {
                        font-size: 1.8125rem;
                    }

                    dd {
                        font-size: 1.4375rem;
                    }
                }


                .map-area {
                    margin: 0;
                    grid-template-columns: repeat(2, 30.625rem);
                    gap: 2.125rem;

                    iframe {
                        width: 100%;
                        height: 42.9375rem;
                    }

                    figure {
                        width: 100%;

                        img {
                            height: 42.9375rem;
                        }
                    }

                    p {
                        margin-top: -1.375rem;
                        font-size: 1.0625rem;
                    }
                }
            }
        }
    }
}





/* ---------- 会社概要 ページ ---------- */
/* ----- sp レイアウト ----- */
.company-page {
    color: var(--text-charcoal);

    .greeting-area {
        .s-wrapper {
            padding: 6.25rem 0 0;

            .text-area {
                margin: 2.625rem 1.9375rem 4rem;
                padding: 3rem 2rem;
                background-color: var(--bg-color);

                p {
                    margin-bottom: calc(0.9375rem * 1.75);
                    font-family: var(--noto-serif);
                    font-weight: var(--medium);
                    font-size: 0.9375rem;
                    line-height: 1.75;

                    &:nth-last-child(2) {
                        margin-bottom: 0.5625rem;
                    }
                }

                .repre {
                    margin: 0;
                    font-size: 1.0625rem;
                    text-align: right;
                }
            }
        }
    }

    .outline-area {
        .s-wrapper {
            margin: 9.1875rem 0 4.375rem;

            .heading-area {
                img {
                    top: -9.8125rem;
                }
            }

            .outline-list {
                margin: 2.625rem 1.625rem 5rem;
                display: grid;
                grid-template-columns: 5.3125rem 14.75rem;
                justify-content: center;
                flex-wrap: wrap;

                dt {
                    width: 100%;
                    font-family: var(--noto-sans);
                    color: var(--white-color);
                    display: grid;
                    place-items: center;
                    background-color: var(--text-charcoal);
                    border-bottom: 1px solid var(--white-color);

                    &:last-of-type {
                        border-bottom: 1px solid var(--text-charcoal);
                    }
                }

                dd {
                    padding-left: 0.4375rem;
                    width: 100%;
                    line-height: 1.7;
                    border-right: 1px solid var(--text-charcoal);
                    border-bottom: 1px solid var(--text-charcoal);
                }

                dt,
                dd {
                    padding-top: 0.625rem;
                    padding-bottom: 0.625rem;
                    font-size: var(--text-small);
                    line-height: 1.7;

                    &:first-of-type {
                        border-top: 1px solid var(--text-charcoal);
                    }
                }
            }
        }
    }
}

/* ----- tb レイアウト ----- */
@media screen and (width > 499px) {
    .company-page {
        .greeting-area {
            .s-wrapper {
                padding: 7.1875rem 0 2.875rem;

                .text-area {
                    margin: 4rem 6rem 0;
                    padding: 8.75rem 5rem;

                    p {
                        margin-bottom: calc(1rem * 1.75);
                        font-size: var(--text-body);

                        &:nth-last-child(2) {
                            margin-bottom: 4.325rem;
                        }
                    }

                    .repre {
                        margin-right: 3.1875em;
                        font-size: 1.0625rem;
                        ;

                    }
                }
            }
        }

        .outline-area {
            .s-wrapper {
                margin: 5rem auto 5rem;

                .heading-area {
                    img {
                        top: -8.25rem;
                        left: 20.375rem;
                        width: 19.125rem;
                    }
                }

                .outline-list {
                    margin: 4rem 1.5rem;
                    grid-template-columns: 11.75rem 33rem;

                    dt {
                        border-bottom: 2px solid var(--white-color);

                        &:last-of-type {
                            border-bottom: 2px solid var(--text-charcoal);
                        }
                    }

                    dd {
                        padding-left: 0.625rem;
                        border-right: 2px solid var(--text-charcoal);
                        border-bottom: 2px solid var(--text-charcoal);
                    }

                    dt,
                    dd {
                        padding-top: 1.5rem;
                        padding-bottom: 1.5rem;
                        font-size: 1.5rem;

                        &:first-of-type {
                            border-top: 2px solid var(--text-charcoal);
                        }
                    }
                }
            }
        }
    }
}

/* ----- pc レイアウト ----- */
@media screen and (width > 1023px) {
    .company-page {
        .greeting-area {
            .s-wrapper {
                padding-top: 9.375rem;

                .text-area {
                    margin: 5rem 15.3125rem 5.75rem;
                    padding: 8.75rem 5rem;

                    p {
                        margin-bottom: calc(1rem * 1.75);
                        font-size: var(--text-body);

                        &:nth-last-child(2) {
                            margin-bottom: 0;
                        }
                    }

                    .repre {
                        margin-right: 0em;
                        font-size: var(--text-body);
                        ;

                    }
                }
            }
        }

        .outline-area {
            .s-wrapper {
                margin: 11.5rem auto 5.75rem;

                .heading-area {
                    img {
                        top: -14.8125rem;
                        left: 36.5rem;
                        width: 27.375rem;
                    }
                }

                .outline-list {
                    margin: 5rem 7.5rem 0;
                    grid-template-columns: 16.875rem 47.4375rem;

                    dt {
                        border-bottom: 3px solid var(--white-color);

                        &:last-of-type {
                            border-bottom: 3px solid var(--text-charcoal);
                        }
                    }

                    dd {
                        padding-left: 1.4375rem;
                        border-bottom: 3px solid var(--text-charcoal);
                    }

                    dt,
                    dd {
                        padding-top: 2.313rem;
                        padding-bottom: 2.313rem;
                        font-size: 2rem;

                        &:first-of-type {
                            border-top: 3px solid var(--text-charcoal);
                        }
                    }
                }
            }
        }
    }
}





/* --------- お問合せ ページ --------- */
/* ----- sp レイアウト ----- */
.form-area {
    color: var(--text-color);

    .s-wrapper {
        margin: 6.25rem 1.5rem 10rem;

        h1 {
            margin-bottom: 1.875rem;
            color: var(--text-charcoal);
            font-size: 1.5rem;
            text-align: center;
            font-weight: var(--medium);
        }

        label {
            .title {
                display: block;
                margin-top: 1.875rem;
                margin-bottom: 0.5rem;
                font-size: var(--text-body);
            }

            input,
            textarea {
                width: 100%;
                font-family: var(--noto-sans);
                border: 1px solid var(--text-charcoal);
            }

            input {
                min-height: 1.875rem;
            }

            textarea {
                height: 10.5625rem;
            }

            .wpcf7-not-valid-tip {
                margin-top: 0.5rem;
                font-family: var(--noto-sans);
                font-size: 0.8125rem;
                color: red;
            }
        }

        .submit-btn {
            width: 14.9375rem;
            height: 2.625rem;
            border-radius: 1.3125rem;
            border: none;
            background-color: var(--text-charcoal2);
            font-family: var(--noto-sans);
            font-size: var(--text-small);
            font-weight: var(--bold);
            color: var(--white-color);
            display: block;
            margin: 1.875rem auto 0;

            &:active {
                background-color: var(--white-color);
            }
        }
    }
}

/* ----- tb レイアウト ----- */
@media screen and (width > 499px) {
    .form-area {
        .s-wrapper {
            margin: 7.1875rem auto 10rem;
            padding: 0 7.25rem;

            h1 {
                margin-bottom: 2.9375rem;
                font-size: 1.5rem;
            }

            label {
                .title {
                    margin-top: 2.9375rem;
                    margin-bottom: 0.75rem;
                    font-size: 1.5rem;
                }

                input,
                textarea {
                    font-size: 1.4375rem;
                }

                input {
                    min-height: 2.9375rem;
                }

                textarea {
                    min-height: 16.4375rem;
                }

                .wpcf7-not-valid-tip {
                    margin-top: 0.9375rem;
                    font-size: 1.5rem;
                }
            }

            .submit-btn {
                margin: 2.9375rem auto 0;
            }
        }
    }
}

/* ----- pc レイアウト ----- */
@media screen and (width > 1023px) {
    .form-area {
        .s-wrapper {
            margin: 9.375rem auto 11.5rem;
            padding: 0 14.75rem;

            h1 {
                margin-bottom: 3.9375rem;
                font-size: 2rem;
            }

            label {
                .title {
                    margin-top: 3.9375rem;
                    margin-bottom: 1.0625rem;
                    font-size: 2rem;
                }

                input,
                textarea {
                    font-size: 1.94rem;
                }

                input {
                    min-height: 3.9375rem;
                }

                textarea {
                    height: 22.25rem;
                }

                .wpcf7-not-valid-tip {
                    margin-top: 0.9375rem;
                }
            }

            .submit-btn {
                width: 18.8125rem;
                height: 3.3125rem;
                border-radius: 1.6563rem;
                font-size: 1.125rem;
                margin: 3.9375rem auto 0;
                transition: all 0.3s;

                @media (any-hover: hover) {
                    &:hover {
                        filter: saturate(2.5);
                        transform: translateY(3px);
                    }
                }

                &:focus {
                    filter: saturate(2.5);
                    transform: translateY(3px);
                }
            }
        }
    }
}

/* ---------- お問い合わせ内容確認　ページ ---------- */

/* ----- sp レイアウト ----- */
.confirm-area {
    color: var(--text-color);

    .s-wrapper {
        margin: 6.25rem 0 9.625rem;
        padding: 0 1.5rem;

        h1 {
            margin-bottom: 1.875rem;
            color: var(--text-charcoal);
            font-size: 1.5rem;
            text-align: center;
            font-weight: var(--medium);
        }

        dl {
            dt {
                margin-top: 1.875rem;
                margin-bottom: 0.5rem;
                font-size: var(--text-body);
            }

            dd {
                border: 1px solid var(--text-charcoal);
                padding: 0.375rem 0.625rem;
                font-family: var(--noto-sans);
                font-size: 0.9375rem;
                background-color: var(--white-color);
            }
        }

        .button-area {
            margin-top: 1.875rem;
            display: flex;
            justify-content: center;
            gap: 1rem;

            .return-btn,
            .send-btn,
            div {
                width: 8.9375rem;
                height: 2.75rem;
                border-radius: 1.375rem;
                font-family: var(--noto-sans);
                font-size: 0.9375rem;
                font-weight: var(--bold);
            }

            .return-btn {
                border: 1px solid var(--text-charcoal2);
                background-color: var(--white-color);
                color: var(--text-charcoal2);

                &:active {
                    background-color: var(--white-color);
                }
            }

            .send-btn {
                border: none;
                background-color: var(--text-charcoal2);
                color: var(--white-color);

                &:active {
                    background-color: var(--white-color);
                }
            }
        }
    }
}

/* ----- tb レイアウト ----- */
@media screen and (width > 499px) {
    .confirm-area {
        .s-wrapper {
            margin: 7.1875rem auto 10rem;
            padding: 0 7.3rem;

            h1 {
                margin-bottom: 2.9375rem;
                font-size: 1.5rem;
            }

            dl {
                dt {
                    margin-top: 2.9375rem;
                    margin-bottom: 0.78rem;
                    font-size: 1.5rem;
                }

                dd {
                    padding: 0.5875rem 0.94rem;
                    font-size: 1.44rem;
                }
            }

            .button-area {
                margin-top: 2.9375rem;
                gap: 1rem;
            }
        }
    }
}

/* ----- pc レイアウト ----- */
@media screen and (width > 1023px) {
    .confirm-area {
        .s-wrapper {
            margin: 9.375rem auto 11.5rem;
            padding: 0 14.75rem;

            h1 {
                margin-bottom: 3.9375rem;
                font-size: 2rem;
            }

            dl {
                dt {
                    margin-top: 3.9375rem;
                    margin-bottom: 1.0625rem;
                    font-size: 2rem;
                }

                dd {
                    padding: 0.79rem 1.3125rem;
                    font-size: 1.97rem;
                }
            }

            .button-area {
                margin-top: 3.9375rem;

                .return-btn {

                    @media (any-hover: hover) {
                        &:hover {
                            background-color: var(--text-charcoal2);
                            filter: saturate(2.5);
                            color: var(--white-color);
                            transform: translateY(3px);
                        }
                    }

                    &:focus {
                        background-color: var(--text-charcoal2);
                        filter: saturate(2.5);
                        color: var(--white-color);
                        transform: translateY(3px);
                    }
                }

                .send-btn {

                    @media (any-hover: hover) {
                        &:hover {
                            filter: saturate(2.5);
                            transform: translateY(3px);
                        }
                    }

                    &:focus {
                        filter: saturate(2.5);
                        transform: translateY(3px);
                    }
                }

                .return-btn,
                .send-btn {
                    transition: all 0.3s;
                }
            }
        }
    }
}





/* ---------- ありがとうございました ページ ---------- */
/* ----- sp レイアウト ----- */
.page-id-58 {
    .t-wrapper {
        display: flex;
        flex-direction: column;
        min-height: 100dvh;

        #main-content {
            display: flex;
            flex-direction: column;
            flex: 1;

            .thanks-page {
                flex: 1;

                .thanks-area {
                    .s-wrapper {
                        padding: 10rem 0;

                        p {
                            margin-bottom: 5rem;
                            font-size: 1.5rem;
                            text-align: center;
                        }

                        a {
                            display: block;
                            margin: auto;
                            width: 15.5rem;
                            height: 3.3125rem;
                            font-size: 1.125rem;
                            font-family: var(--noto-sans);
                            font-weight: var(--bold);
                            color: var(--text-charcoal2);
                            text-align: center;
                            line-height: 3.3125rem;
                            border-radius: 1.6563rem;
                            border: 1px solid var(--text-charcoal2);

                            &:active {
                                background-color: var(--white-color);
                            }
                        }
                    }
                }
            }
        }
    }
}

/* ----- tb レイアウト ----- */
@media screen and (width > 499px) {
    .page-id-58 {
        .t-wrapper {
            #main-content {
                .thanks-page {
                    .thanks-area {
                        .s-wrapper {
                            padding: 10rem 0;

                            p {
                                margin-bottom: 5rem;
                                font-size: 1.5rem;
                            }
                        }
                    }
                }
            }
        }
    }
}

/* ----- pc レイアウト ----- */
@media screen and (width > 1023px) {
    .page-id-58 {
        .t-wrapper {
            #main-content {
                .thanks-page {
                    .thanks-area {
                        .s-wrapper {
                            padding: 11.5rem 0;

                            p {
                                margin-bottom: 5rem;
                                font-size: 2rem;
                            }

                            a {
                                transition: all 0.3s;

                                @media (any-hover: hover) {
                                    &:hover {
                                        background-color: var(--text-charcoal2);
                                        color: var(--white-color);
                                    }
                                }

                                &:focus {
                                    background-color: var(--text-charcoal2);
                                    color: var(--white-color);
                                }
                            }
                        }
                    }
                }
            }
        }
    }
}




/* ---------- 404 ページ ----------*/
.error404 {
    .error-404 {
        height: 60vh;

        .page-header {
            position: relative;
            top: 35%;
        }

        .page-content {
            position: relative;
            top: 40%;

            a {
                color: var(--secondry-color);
                text-decoration: underline;
            }
        }

        h1,
        p {
            text-align: center;
            margin-bottom: 20px;
        }

        h1 {
            font-size: 1.8rem;
        }
    }
}