@charset "utf-8";

/* ==========================================================================
   Grand Couleur - Main stylesheet

   構成
   01. デザイン変数
   02. ベーススタイル
   03. 共通レイアウト・共通パーツ
   04. ヘッダー・グローバルナビ
   05. フッター
   06. トップページ
   07. お問い合わせページ
   08. サンクスページ
   09. PC表示（1024px以上）の上書き

   SPを基準に記述し、PC固有の差分はファイル末尾のメディアクエリで
   上書きするモバイルファースト構成。BEMクラスは既存HTMLに合わせて維持。
   ========================================================================== */

/* ==========================================================================
   01. デザイン変数
   ========================================================================== */
:root {
    /* カラー */
    --color-main: rgba(220 238 249 / 100%);
    --color-sub: rgba(16 128 195 / 100%);
    --color-sub-light: rgba(205 234 231 / 100%);
    --color-sec-pink: rgba(226 187 190 / 100%);
    --color-sec-yellow: rgba(247 255 180 / 100%);
    --color-bg: rgba(255 255 255 / 100%);
    --color-bg2: rgba(246 244 200 / 100%);
    --color-header-text: rgba(34 61 100 / 100%);
    --color-text-bg: rgba(242 249 253 / 100%);
    --color-text-body: rgba(51 51 51 / 100%);
    --color-text-small: rgba(141 141 141 / 100%);
    --color-text-card: rgba(103 103 103 / 100%);
    --color-text-card-bg: rgba(230 243 251 / 100%);
    --color-text-card-border: rgba(16 128 195 / 40%);
    --color-button: rgba(232 235 239 / 100%);
    --color-contact-text: rgba(202 213 226 / 100%);
    --color-required: rgba(229 106 106 / 100%);
    --color-bg-staff: rgba(254 234 234 / 100%);
    --color-error-box: rgba(255 238 174 / 100%);

    /* フォントサイズ */
    --font-size-display-xl: 4rem;
    --font-size-display-lg: 3rem;
    --font-size-display-md: 2.5rem;
    --font-size-heading-lg: 2rem;
    --font-size-heading-md: 1.5rem;
    --font-size-heading-sm: 1.25rem;
    --font-size-body: 1rem;
    --font-size-small: 0.875rem;
    --font-size-xsmall: 0.75rem;

    /* 余白：変数名は16px基準での実寸を表す */
    --space-4px: 0.25rem;
    --space-8px: 0.5rem;
    --space-12px: 0.75rem;
    --space-16px: 1rem;
    --space-20px: 1.25rem;
    --space-24px: 1.5rem;
    --space-32px: 2rem;
    --space-48px: 3rem;
    --space-72px: 4.5rem;
    --space-96px: 6rem;
    --space-112px: 7rem;
    --space-120px: 7.5rem;
    --space-128px: 8rem;
    --space-144px: 9rem;
    --space-160px: 10rem;
    --space-176px: 11rem;
    --space-224px: 14rem;

    /* 角丸 */
    --radius-light: 0.5rem;
    --radius-regular: 1rem;
    --radius-heavy: 1.5rem;
    --radius-pill: 999px;

    /* 影 */
    --shadow-base: 0 3px 6px rgba(0, 0, 0, 0.25);

    /* フォントウェイト */
    --font-weight-extra-light: 200;
    --font-weight-light: 300;
    --font-weight-regular: 400;
    --font-weight-medium: 500;
    --font-weight-semi-bold: 600;
    --font-weight-bold: 700;
    --font-weight-black: 900;
}

/* ==========================================================================
   02. ベーススタイル
   ========================================================================== */
html {
    font-family: "Noto Sans JP", sans-serif;
    font-size: 100%;
    scroll-behavior: smooth;
}

body {
    background-color: var(--color-bg);
    font-size: var(--font-size-body);
    line-height: 1.7;
    color: var(--color-text-body);
}

a {
    color: var(--color-sub);
    text-decoration: none;
}

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

main {
    width: 100%;
    margin-inline: auto;
}

/* ==========================================================================
   03. 共通レイアウト・共通パーツ
   ========================================================================== */

/* コンテンツ幅：SPでは画面幅の90%、PCではメディアクエリ内で上書き */
.container {
    width: 90%;
    margin-inline: auto;
}

/* セクション上部の英字ラベル */
.eyeblow {
    font-size: var(--font-size-xsmall);
    font-weight: var(--font-weight-bold);
    color: var(--color-sub);
}
#about,
#faq,
#access {
    scroll-margin-top: 120px;
}
#job-description {
    scroll-margin-top: 0px;
}
#voice,
#flow {
    scroll-margin-top: -60px;
}
/* ==========================================================================
   04. ヘッダー・グローバルナビ
   ========================================================================== */

/* ヘッダー本体 */
.site-header {
    position: sticky;
    top: 0;
    z-index: 300;
    height: 5.625rem;
    /*background-image: url("../img/header_bg_sp.webp");*/
    background-color: rgba(255, 255, 255, 0.6);
    backdrop-filter: blur(10px);
    background-position: top center;
    background-size: cover;
    box-shadow: var(--shadow-base);
}

.site-header h1 {
    display: none;
    width: 5rem;
    aspect-ratio: 833/134;
    background-image: url("../img/logo.svg");
    background-repeat: no-repeat;
    background-size: contain;
    font-size: 0;
}

/* SP用ハンバーガーボタン */
.site-header__toggle {
    position: absolute;
    top: 2rem;
    right: 1rem;
    z-index: 200;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 3rem;
    padding: 0;
    border: none;
    background: transparent;
    cursor: pointer;
}

.site-header__toggle.active {
    display: flex;
}

.site-header__toggle span:not(.site-header__toggle-text) {
    display: block;
    width: 28px;
    height: 2px;
    border-radius: 999px;
    background: var(--color-sub);
}

.site-header__toggle-text {
    margin-block-start: 2px;
    font-size: 0.5rem;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0.1em;
    color: var(--color-sub);
}

.site-header__toggle[aria-expanded="true"] span:nth-child(1) {
    transform: translateY(8px) rotate(45deg);
}

.site-header__toggle[aria-expanded="true"] span:nth-child(2) {
    opacity: 0;
}

.site-header__toggle[aria-expanded="true"] span:nth-child(3) {
    transform: translateY(-8px) rotate(-45deg);
}

.site-header__toggle span:not(.site-header__toggle-text) {
    transition: transform .3s, opacity .3s;
}
.site-header:has(.global-nav.is_open) {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}
/* SP用全画面メニュー */
.global-nav {
    position: fixed;
    inset: 0;
    z-index: 100;
    overflow-y: auto;
    overscroll-behavior: contain;
    width: 100%;
    height: 100vh;
    height: 100dvh;
    background-color: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    visibility: hidden;
    transform: translateY(-100%);
    transition: transform 0.3s ease, visibility 0.3s;
}

.global-nav.is_open {
    visibility: visible;
    transform: translateY(0);
}


.global-nav__list {
    position: absolute;
    top: 5rem;
    left: 1.5rem;
}

.global-nav__list .menu-item {
    margin-block-end: var(--space-48px);
    text-align: left;
}

.global-nav__list .menu-item:last-child {
    margin-block-end: 0;
}

/* ==========================================================================
   05. フッター
   ========================================================================== */
.site-footer {
    margin-block-start: var(--space-48px);
    padding-block-end: var(--space-32px);
    background-color: var(--color-main);
}

.site-footer::before {
    content: "";
    display: block;
    width: 100%;
    aspect-ratio: 375 / 137;
    background-color: var(--color-bg);
    background-image: url("../img/footer_wave_sp.svg");
    background-repeat: no-repeat;
    background-size: contain;
}

.site-footer__copyright {
    margin: 0;
    font-size: var(--font-size-small);
    color: var(--color-text-small);
}

.site-footer__title {
    height: 3rem;
    aspect-ratio: 833/134;
    margin-block-end: var(--space-16px);
    background-image: url("../img/logo.svg");
    background-size: contain;
    font-size: 0;
}

.site-footer__address {
    margin-block-end: var(--space-12px);
    font-size: var(--font-size-body);
    font-style: normal;
    color: var(--color-header-text);
}

.site-footer__contact {
    font-size: var(--font-size-small);
}

.site-footer__social-link-instagram {
    display: block;
    width: 2rem;
    height: 2rem;
    aspect-ratio: 1 / 1;
    margin-inline-start: auto;
    background-image: url("../img/instagram_logo.svg");
    background-repeat: no-repeat;
    background-size: contain;
    font-size: 0;
}

.site-footer__subtitle--pc {
    display: none;
}

.site-footer__subtitle {
    font-family: "Noto Serif JP", serif;
    font-size: var(--font-size-heading-sm);
    color: var(--color-sub);
    text-align: center;
}

.site-footer__contact-link {
    display: block;
    width: fit-content;
    margin-block: var(--space-16px) 0;
    margin-inline: auto;
    padding-block: var(--space-8px);
    padding-inline: var(--space-16px);
    border: 1px solid var(--color-sub);
    border-radius: var(--radius-pill);
    background-color: var(--color-sec-yellow);
    box-shadow: var(--shadow-base);
    font-size: var(--font-size-small);
    font-weight: var(--font-weight-medium);
    color: var(--color-sub);
    transition: background-color 0.3s ease;
}

.site-footer__contact-link::after {
    content: "";
    display: inline-block;
    width: 0.5rem;
    height: 0.5rem;
    margin-inline-start: 0.5em;
    border-top: 2px solid currentColor;
    border-right: 2px solid currentColor;
    transform: rotate(45deg) translateY(-2px);
}

.site-footer__contact-link:hover {
    background-color: var(--color-main);
    text-decoration: none;
}

.site-footer__divider {
    height: 1px;
    margin-block: var(--space-72px) var(--space-24px);
    margin-inline: auto;
    border: none;
    background: var(--color-sub);
}

.site-footer-nav__list {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0;
    margin: 0;
    padding: 0;
    text-align: center;
    list-style: none;
}

.site-footer-nav__list li {
    margin: 0;
}

.site-footer-nav__list li:last-child {
    display: none;
}

.site-footer-nav__list a {
    font-size: var(--font-size-xsmall);
    color: var(--color-sub);
    text-decoration: none;
}

.site-footer__copyright {
    color: var(--color-sub);
    text-align: center;
}

.site-footer__copyright::before {
    content: "";
    display: block;
    height: 70px;
    aspect-ratio: 63 / 70;
    background-image: url("../img/footer_bubble_sp.svg");
}

/* ==========================================================================
   06. トップページ
   ========================================================================== */

/* 06-01. メインビジュアル */
.hero {
    aspect-ratio: 375 / 904;
    width: 100%;
    background-image: url("../img/header_bg_sp.webp");
    background-repeat: no-repeat;
    background-position: center -90px;
    background-size: cover;
}

.hero .container {
    position: relative;
    width: calc(100% - 2rem);
    padding-block: 9.375rem;
    padding-inline: 0;
}

.hero .hero__title {
    height: 3rem;
    aspect-ratio: 833/134;
    margin-block-end: var(--space-16px);
    background-image: url("../img/logo.svg");
    background-size: contain;
    font-size: 0;
}

.hero .hero__catch {
    font-family: "Noto Serif JP", serif;
    font-size: var(--font-size-heading-lg);
    font-weight: var(--font-weight-medium);
    color: var(--color-header-text);
}

.hero .hero__lead {
    margin-block-end: var(--space-16px);
    font-family: "Noto Serif JP", serif;
    font-size: var(--font-size-heading-md);
    font-weight: var(--font-weight-medium);
    color: var(--color-header-text);
}

.hero .hero__text {
    width: 236px;
    font-family: "Noto Serif JP", serif;
    font-size: var(--font-size-xsmall);
    color: var(--color-header-text);
}

.hero .hero__text strong {
    font-size: var(--font-size-body);
    font-weight: var(--font-weight-medium);
    color: var(--color-sub);
}

.hero .hero__text br {
    display: none;
}

.global-nav__list .menu-item:last-child a,
.hero .hero__link {
    display: inline-block;
    margin-block-start: var(--space-16px);
    padding-block: var(--space-8px);
    padding-inline: var(--space-16px);
    border: 1px solid var(--color-sub);
    border-radius: var(--radius-pill);
    background-color: var(--color-sec-yellow);
    font-size: var(--font-size-small);
    font-weight: var(--font-weight-medium);
    color: var(--color-sub);
    transition: background-color 0.3s ease;
}

.global-nav__list .menu-item:last-child a::after,
.hero .hero__link::after {
    content: "";
    display: inline-block;
    width: 0.5rem;
    height: 0.5rem;
    margin-inline-start: 0.5em;
    border-top: 2px solid currentColor;
    border-right: 2px solid currentColor;
    transform: rotate(45deg) translateY(-2px);
}

.global-nav__list .menu-item:last-child a:hover,
.hero .hero__link:hover {
    background-color: var(--color-main);
    text-decoration: none;
}

/* 06-02. お悩み・課題 */
.worries {
    margin-block-end: var(--space-120px);
    padding-block-end: var(--space-72px);
    background-image: url("../img/worries_sp_bg.svg");
    background-repeat: no-repeat;
    background-position: center bottom;
    background-size: contain;
}

.worries .worries__title {
    font-family: "Noto Serif JP", serif;
    font-size: var(--font-size-heading-md);
    color: var(--color-header-text);
}

.worries .worries__subtitle_pc {
    display: none;
}

.worries .worries__subtitle_sp {
    font-family: "Noto Serif JP", serif;
    font-size: var(--font-size-heading-sm);
    font-weight: var(--font-weight-semi-bold);
    text-align: center;
    color: var(--color-sub);
}

.worries .worries__item {
    margin-block-end: var(--space-16px);
    padding: var(--space-16px);
    border: 1px solid var(--color-text-card-border);
    border-radius: var(--radius-regular);
    background: linear-gradient(135deg, var(--color-bg) 0%,var(--color-text-card-bg) 100%);
    box-shadow: var(--shadow-base);
    font-size: var(--font-size-body);
    font-weight: var(--font-weight-bold);
    color: var(--color-sub);
    text-align: center;
}

.worries .worries__item img {
    margin-inline: auto;
    margin-block-end: 0.625rem;
}

.worries .worries__text {
    font-family: "Noto Serif JP", serif;
    font-size: var(--font-size-heading-sm);
    font-weight: var(--font-weight-semi-bold);
    color: var(--color-header-text);
    text-align: center;
}

.worries .worries__text strong {
    font-weight: var(--font-weight-semi-bold);
    color: var(--color-sub);
}

/* 06-03. 事業所紹介 */
.about {
    padding-block-end: var(--space-176px);
    background-image: url("../img/about_bg_sp.svg");
    background-repeat: no-repeat;
    background-position: center bottom;
}

.about .about__title {
    font-size: var(--font-size-heading-sm);
    font-weight: var(--font-weight-medium);
    color: var(--color-header-text);
}

.about .about__subtitle {
    font-family: "Noto Serif JP", serif;
    font-size: var(--font-size-heading-sm);
    font-weight: var(--font-weight-semi-bold);
    color: var(--color-sub);
}

.about .about__image {
    display: none;
}

.about .about__text {
    margin-block-end: var(--space-16px);
}

.about .about__text:last-child {
    margin-block-end: 0;
}

.about .about__emphasis {
    background: linear-gradient(transparent 60%, var(--color-sec-yellow) 60%);
    font-size: var(--font-size-heading-sm);
    font-weight: var(--font-weight-regular);
    color: var(--color-sub);
}

/* 06-04. 業務内容 */
.job-description {
    padding-block-start: var(--space-144px);
    background: url("../img/job-description_bg_header_sp.svg") top center / 100% auto no-repeat, linear-gradient(var(--color-bg) 7rem,var(--color-main) 7rem);
}

.job-description::after {
    content: "";
    display: block;
    width: 100%;
    aspect-ratio: 375 / 147;
    background: url("../img/job-description_bg_footer_sp.svg") top center / 100% auto no-repeat, linear-gradient(var(--color-main) 4rem,var(--color-bg) 7rem);
}

.job-description .eyeblow,
.job-description .job-description__title,
.job-description .job-description__subtitle {
    text-align: center;
}

.job-description .job-description__title {
    margin-block-end: var(--space-8px);
    font-size: var(--font-size-heading-sm);
    font-weight: var(--font-weight-regular);
    color: var(--color-header-text);
}

.job-description .job-description__subtitle {
    font-size: var(--font-size-small);
    color: var(--color-sub);
}

.job-description .job-description__item {
    margin-block-end: var(--space-32px);
    border-radius: var(--radius-regular);
    background: linear-gradient(135deg,var(--color-bg) 55%, var(--color-text-card-bg) 100%);
    box-shadow: var(--shadow-base);
}

.job-description .job-description__item .job-description__item-image {
    border-radius: var(--radius-regular) var(--radius-regular) 0 0;
}

.job-description .job-description__item .job-description__content {
    padding: var(--space-16px);
}

.job-description .job-description__item .job-description__item-title {
    margin-block-end: var(--space-8px);
    font-size: var(--font-size-heading-md);
    font-weight: var(--font-weight-medium);
    color: var(--color-sub);
}

/* 06-05. 利用者の声 */
.users-voice {
    overflow: hidden;
    padding-block-end: var(--space-128px);
    background-color: var(--color-text-bg);
}

/* 白背景から利用者の声エリアへつなぐ波形 */
.users-voice::before {
    content: "";
    display: block;
    width: 100%;
    aspect-ratio: 375 / 212;
    background-color: var(--color-bg);
    background-image:
        url("../img/users-voice__header_sp.svg"),
        linear-gradient(
            to bottom,
            var(--color-bg) 0%,
            var(--color-bg) 58%,
            var(--color-text-bg) 58%,
            var(--color-text-bg) 100%
        );
    background-repeat: no-repeat;
    background-position: top center;
    background-size: 100% auto;
}

.users-voice .eyeblow,
.users-voice .users-voice__title {
    text-align: center;
}

.users-voice .users-voice__title {
    margin-block-end: var(--space-32px);
    font-size: var(--font-size-heading-sm);
    font-weight: var(--font-weight-medium);
    color: var(--color-sub);
}

/* 06-06. 職員の声 */
.staffs-voice {
    overflow: hidden;
    background-color: var(--color-bg2);
}

/* 利用者の声エリアから職員の声エリアへつなぐ波形 */
.staffs-voice::before {
    content: "";
    display: block;
    width: 100%;
    aspect-ratio: 375 / 133;
    background-color: var(--color-bg);
    background-image:
        url("../img/staffs-voice__header_sp.svg"),
        linear-gradient(
            to bottom,
            var(--color-text-bg) 0%,
            var(--color-text-bg) 58%,
            var(--color-bg2) 58%,
            var(--color-bg2) 100%
        );
    background-repeat: no-repeat;
    background-position: center top;
    background-size: cover;
}

.staffs-voice .eyeblow,
.staffs-voice .staffs-voice__title {
    text-align: center;
}

.staffs-voice .staffs-voice__title {
    margin-block-end: var(--space-32px);
    font-size: var(--font-size-heading-sm);
    font-weight: var(--font-weight-medium);
    color: var(--color-sub);
}

/* --------------------------------------------------------------------------
   声スライダー共通
   利用者・職員のHTMLクラスは別だが、見た目と動作が同じためCSSを共通化。
   -------------------------------------------------------------------------- */
.users-voice__list,
.staffs-voice__list {
    position: relative;
    display: flex;
    width: max-content;
    margin: 0;
    padding: 0;
    list-style: none;
    touch-action: pan-y;
    will-change: transform;
    transition: transform 0.3s ease;
}

.users-voice__item,
.staffs-voice__item {
    flex: 0 0 clamp(17.5rem, 75vw, 33.75rem);
    padding-block: 0;
    padding-inline: 0.375rem;
    opacity: 0.35;
    filter: blur(1px);
    transform: scale(0.9);
    transition:
        opacity 0.35s ease,
        filter 0.35s ease,
        transform 0.35s ease;
}

.users-voice__item.is-active,
.staffs-voice__item.is-active {
    opacity: 1;
    filter: none;
    transform: scale(1);
}

.users-voice-card,
.staffs-voice-card {
    width: 100%;
    height: 100%;
    padding: var(--space-16px);
    border: 1px solid var(--color-text-card-border);
    border-radius: 6px;
    background-color: var(--color-bg);
    box-shadow: var(--shadow-base);
}

.users-voice-card__figure,
.staffs-voice-card__figure {
    float: left;
    width: 64px;
    margin-block: 0 0.375rem;
    margin-inline: 0 0.625rem;
}

.users-voice-card__image,
.staffs-voice-card__image {
    display: block;
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
}

.users-voice-card__title,
.staffs-voice-card__title {
    font-size: var(--font-size-heading-sm);
    font-weight: var(--font-weight-medium);
    color: var(--color-sub);
}

.users-voice-card__position,
.staffs-voice-card__position {
    font-size: var(--font-size-small);
    font-weight: var(--font-weight-medium);
    color: var(--color-header-text);
}

.users-voice-card__section,
.staffs-voice-card__section {
    clear: both;
}

.users-voice-card__heading,
.staffs-voice-card__heading {
    margin-block-end: var(--space-8px);
    padding-block: var(--space-8px);
    border-bottom: 2px solid var(--color-main);
    font-size: var(--font-size-body);
    font-weight: var(--font-weight-bold);
    line-height: 1.2;
    color: var(--color-sub);
}

.users-voice-card__label,
.staffs-voice-card__label {
    font-size: var(--font-size-small);
    font-weight: var(--font-weight-bold);
    color: var(--color-sub);
}

.users-voice-card__text,
.staffs-voice-card__text {
    font-size: var(--font-size-body);
    color: var(--color-header-text);
}

/* 前へ・次へボタン */
.users-voice__button,
.staffs-voice__button {
    display: grid;
    place-items: center;
    width: var(--space-32px);
    height: var(--space-32px);
    padding: 0;
    border: none;
    border-radius: 50%;
    background-color: var(--color-sub);
    cursor: pointer;
}

.users-voice__button::before,
.staffs-voice__button::before {
    content: "";
    width: 10px;
    height: 10px;
    border-top: 2px solid var(--color-bg);
    border-right: 2px solid var(--color-bg);
}

.users-voice__button--prev::before,
.staffs-voice__button--prev::before {
    transform: translateX(2px) rotate(-135deg);
}

.users-voice__button--next::before,
.staffs-voice__button--next::before {
    transform: translateX(-2px) rotate(45deg);
}

.users-voice__button:disabled,
.staffs-voice__button:disabled {
    opacity: 0.35;
    cursor: default;
}

/* スライダー操作領域 */
.users-voice__controls,
.staffs-voice__controls {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-16px);
    margin-block-start: var(--space-32px);
}

.users-voice__pagination,
.staffs-voice__pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-16px);
}

.users-voice__dot,
.staffs-voice__dot {
    display: block;
    width: var(--space-12px);
    height: var(--space-12px);
    padding: 0;
    border: none;
    border-radius: var(--radius-pill);
    background-color: var(--color-button);
    box-shadow: var(--shadow-base);
    appearance: none;
    cursor: pointer;
}

.users-voice__dot.is-active,
.staffs-voice__dot.is-active {
    background-color: var(--color-sub);
}

/* 06-07. ご利用の流れ */
.flow::before {
    content: "";
    display: block;
    width: 100%;
    aspect-ratio: 375 / 133;
    margin-block-end: var(--space-112px);
    background-color: #fff;
    background-image:
    url("../img/flow__header_sp.svg"),
    linear-gradient(
        to bottom,
        var(--color-bg2) 0%,
        var(--color-bg2) 50%,
        var(--color-bg) 50%,
        var(--color-bg) 100%
    );
    background-repeat: no-repeat;
    background-position: center top;
    background-size: cover;
}

.flow .eyeblow,
.flow .flow__title,
.flow .flow__subtitle {
    text-align: center;
}

.flow .flow__title {
    font-size: var(--font-size-heading-sm);
    font-weight: var(--font-weight-medium);
    color: var(--color-header-text);
}

.flow .flow__subtitle {
    font-size: var(--font-size-small);
    font-weight: var(--font-weight-regular);
    color: var(--color-sub);
}

.flow .flow__item {
    display: flex;
    gap: 1.25rem;
    margin-block-end: var(--space-24px);
}

.flow .flow__step-number {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 3.75rem;
    height: 3.75rem;
    margin-block-end: var(--space-12px);
    border-radius: var(--radius-pill);
    background-color: var(--color-main);
    font-size: var(--font-size-heading-sm);
    color: var(--color-sub);
    text-align: center;
}

.flow .flow__step-number-small {
    display: block;
    margin-block-end: calc(var(--space-12px) * -1);
    font-size: var(--font-size-xsmall);
}

.flow .flow__step-image {
    width: 60px;
    background-color: var(--color-bg);
}

.flow .flow__item-title {
    font-weight: var(--font-weight-medium);
    color: var(--color-sub);
}

.flow .flow__item-text {
    padding: var(--space-16px);
    border-radius: 1rem;
    background-color: var(--color-main);
    font-size: var(--font-size-xsmall);
    color: var(--color-header-text);
}

.flow .flow__item .flow__aside {
    position: relative;
    display: flex;
    flex: 0 0 3.75rem;
    flex-direction: column;
    align-items: center;
    width: 3.75rem;
}

.flow .flow__item .flow__aside::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 1px;
    background-color: var(--color-sub);
    transform: translateX(-50%);
}

.flow .flow__item:nth-child(1) .flow__aside::after {
    top: calc(0.5rem + 4.5rem + 0.75rem + 60px);
}

.flow .flow__item:nth-child(2) .flow__aside::after {
    top: calc(0.5rem + 2rem + 0.75rem + 60px);
}

.flow .flow__item:nth-child(3) .flow__aside::after {
    top: calc(0.5rem + 3.125rem + 0.75rem + 60px);
}

.flow .flow__item:nth-child(4) .flow__aside::after {
    top: calc(0.5rem + 3.375rem + 0.75rem + 60px);
}

/* 06-08. お問い合わせCTA */
.contact {
    margin-block-end: var(--space-224px);
    text-align: center;
}

.contact .contact__title {
    color: var(--color-sub);
    text-align: center;
    border-bottom: var(--space-8px) solid var(--color-sec-yellow);
    width: fit-content;
    margin-inline: auto;
}

.contact .contact__title .contact__title-emphasis {
    font-size: var(--font-size-heading-sm);
    font-weight: var(--font-weight-bold);
}

.contact .contact__title::before {
    content: "";
    display: inline-block;
    width: 2rem;
    height: 2rem;
    background-image: url("../img/contact__title-emphasis.svg");
    background-repeat: no-repeat;
}

.contact .contact__title::after {
    content: "";
    display: inline-block;
    width: 2rem;
    height: 2rem;
    background-image: url("../img/contact__title-emphasis.svg");
    transform: scaleX(-1);
    background-repeat: no-repeat;
}

.contact .contact__button {
    display: block;
    width: fit-content;
    margin-block: var(--space-16px);
    margin-inline: auto;
    padding-block: var(--space-8px);
    padding-inline: var(--space-16px);
    border: 1px solid var(--color-sub);
    border-radius: var(--radius-pill);
    background-color: var(--color-sec-yellow);
    font-size: var(--font-size-heading-sm);
    font-weight: var(--font-weight-bold);
    color: var(--color-sub);
    box-shadow: var(--shadow-base);
    transition: background-color 0.3s ease;
}

.contact .contact__button::after {
    content: "";
    display: inline-block;
    width: 0.5rem;
    height: 0.5rem;
    margin-inline-start: 0.5em;
    border-top: 2px solid currentColor;
    border-right: 2px solid currentColor;
    transform: rotate(45deg) translateY(-2px);
}

.contact .contact__button:hover {
    background-color: var(--color-main);
    text-decoration: none;
}

.contact .contact__note {
    margin-bottom: var(--space-12px);
}

.contact .contact__note-text {
    font-size: var(--font-size-small);
    color: var(--color-text-small);
}

.contact .contact__phone-link {
    font-size: var(--font-size-heading-sm);
    font-weight: var(--font-weight-bold);
}

/* 06-09. よくある質問 */
.faq {
    margin-block-end: var(--space-160px);
}

.faq .eyeblow,
.faq .faq__title,
.faq .faq__subtitle {
    text-align: center;
}

.faq .faq__title {
    font-size: var(--font-size-heading-sm);
    font-weight: var(--font-weight-medium);
    color: var(--color-header-text);
}

.faq .faq__subtitle {
    margin-block-end: var(--space-32px);
    font-size: var(--font-size-small);
    font-weight: var(--font-weight-regular);
    color: var(--color-sub);
}

.faq .faq__item {
    margin-block-end: var(--space-24px);
    font-size: var(--font-size-small);
}

.faq .faq__question {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 0.75rem;
    padding: var(--space-16px);
    border-bottom: 1px solid var(--color-sub);
    border-left: 4px solid var(--color-sub);
    border-radius: var(--radius-light);
    background-color: var(--color-text-bg);
    box-shadow: var(--shadow-base);
}

.faq .faq__answer {
    display: flex;
    gap: 0.75rem;
    overflow: hidden;
    max-height: 0;
    padding-block: 0;
    padding-inline: var(--space-16px);
    border-left: 4px solid var(--color-main);
    border-radius: var(--radius-light);
    background-color: var(--color-bg);
    box-shadow: var(--shadow-base);
    transition:
        max-height 0.3s ease,
        padding 0.3s ease,
        border-bottom 0.3s ease;
}

.faq__item.is-open .faq__answer {
    max-height: 999px;
    padding: var(--space-16px);
    border-bottom: 1px solid var(--color-main);
}

.faq .faq__icon {
    position: relative;
    width: 18px;
    height: 18px;
}

.faq__icon::before,
.faq__icon::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 18px;
    height: 2px;
    background: var(--color-sub);
    transform: translate(-50%, -50%);
    transition: opacity 0.25s ease, transform 0.25s ease;
}

.faq__icon::after {
    transform: translate(-50%, -50%) rotate(90deg);
}

.faq__item.is-open .faq__icon::before {
    transform: translate(-50%, -50%) rotate(180deg);
}

.faq__item.is-open .faq__icon::after {
    opacity: 0;
    transform: translate(-50%, -50%) rotate(90deg) scaleY(0);
}

/* 06-10. アクセス・会社情報 */
.access {
    background: linear-gradient(
        to bottom,
        var(--color-bg) 0%,
        var(--color-main) 50%,
        var(--color-bg) 100%
    );
}

.access .access__title {
    font-size: var(--font-size-heading-sm);
    font-weight: var(--font-weight-medium);
    color: var(--color-header-text);
}

.access .access__subtitle {
    margin-block-end: var(--space-20px);
    font-size: var(--font-size-small);
    font-weight: var(--font-weight-regular);
    color: var(--color-sub);
}

.access .location,
.access .company {
    width: 100%;
    padding: var(--space-12px);
    background-color: var(--color-bg);
    box-shadow: var(--shadow-base);
}

.access .location {
    margin-block-end: var(--space-20px);
}

.access .location .location__heading,
.access .company .company__heading {
    font-size: var(--font-size-body);
    font-weight: var(--font-weight-medium);
    color: var(--color-sub);
}

.access .location .location__term, 
.access .company .company__term {
    font-size: var(--font-size-xsmall);
    font-weight: var(--font-weight-medium);
    color: var(--color-sub);
}

.access .location .location__description,
.access .company .company__description {
    font-size: var(--font-size-xsmall);
    color: var(--color-header-text);
}

.access .location .location__map {
    display: block;
    margin-block: var(--space-8px);
    margin-inline: auto;
}

.access .company .company__list {
    display: grid;
    grid-template-columns: 5rem minmax(0, 1fr);
    row-gap: 0.75rem;
    margin: 0;
}

/* ==========================================================================
   07. お問い合わせページ
   ========================================================================== */

/* ページ見出し */
.page-contact {
    margin-top: var(--space-72px);
}

.page-contact__title {
    font-size: var(--font-size-heading-lg);
    font-weight: var(--font-weight-bold);
    color: var(--color-header-text);
}

.page-contact__lead {
    font-size: var(--font-size-small);
    font-weight: var(--font-weight-medium);
    color: var(--color-sub);
}

.page-contact__eyebrow,
.page-contact__title,
.page-contact__lead {
    text-align: center;
}

.page-contact__faq-link {
    font-size: var(--font-size-heading-sm);
    font-weight: var(--font-weight-bold);
    color: var(--color-sub);
    background: linear-gradient(transparent 60%, var(--color-sec-yellow) 60%);
    margin-block: var(--space-48px) var(--space-24px);
    display: inline-block;
}

.wpcf7-form .required,
.wpcf7-form .not-required {
    font-size: var(--font-size-body);
    font-weight: var(--font-weight-bold);
    color: var(--color-header-text);
    margin-bottom: 0.5rem;
    display: inline-block;
}

.wpcf7-form .required::after {
    content: "必須";
    font-size: var(--font-size-xsmall);
    font-weight: var(--font-weight-regular);
    color: var(--color-bg);
    background-color: var(--color-required);
    border-radius: var(--radius-pill);
    padding: 0.125rem 0.5rem;
    margin-left: 0.75rem;
}

.wpcf7-form-control-wrap {
    display: block;
    margin-bottom: 2rem;
}

.wpcf7-form-control {
    border: 1px solid var(--color-sub);
    padding: 0.75rem 1rem;
    border-radius: 0.5rem;
    width: 100%;
}

/* 送信ボタン：input自体には疑似要素を付けられないため、矢印は親要素に表示 */
.submit-wrapper {
    display: flex;
    justify-content: center;
    margin-block-end: var(--space-32px);
}

.submit-wrapper > p {
    position: relative;
    display: inline-block;
    margin: 0;
}

.submit-wrapper input[type="submit"] {
    display: inline-block;
    appearance: none;
    width: 160px;
    height: 48px;
    margin-block-start: var(--space-16px);
    padding: 0 44px 0 24px;
    border: 1px solid var(--color-sub);
    border-radius: var(--radius-pill);
    background-color: var(--color-sec-yellow);
    box-shadow: var(--shadow-base);
    font-size: var(--font-size-body);
    font-weight: var(--font-weight-medium);
    color: var(--color-sub);
    cursor: pointer;
    transition: background-color 0.3s ease;
}

/* 送信ボタン右側の「>」 */
.submit-wrapper > p::after {
    content: "";
    position: absolute;
    top: 50%;
    right: 28px;
    width: 0.5rem;
    height: 0.5rem;
    border-top: 2px solid var(--color-sub);
    border-right: 2px solid var(--color-sub);
    transform: translateY(50%) rotate(45deg);
    pointer-events: none;
}

/* 送信中スピナーをボタン右側に配置 */
.submit-wrapper .wpcf7-spinner {
    position: absolute;
    top: 50%;
    left: calc(100% + 8px);
    margin: 0;
    transform: translateY(-50%);
}

.submit-wrapper input[type="submit"]:hover {
    background-color: var(--color-main);
}

/* Contact Form 7：入力エラー表示 */
.wpcf7-not-valid-tip {
    color: var(--color-required);
    font-size: var(--font-size-xsmall);
}

.wpcf7-not-valid {
    border: 1px solid var(--color-required);
    background-color: var(--color-bg-staff);
}

/* 連絡先カード */
.page-contact__address {
    width: 100%;
    border-radius: var(--radius-heavy);
    background-color: var(--color-text-card-bg);
    padding: var(--space-32px);
    box-shadow: var(--shadow-base);
}

.page-contact__address-title {
    font-size: var(--font-size-body);
    font-weight: var(--font-weight-bold);
    color: var(--color-header-text);
    border-bottom: 2px solid var(--color-sub);
    padding-bottom: var(--space-20px);
}

.page-contact-container {
    margin-top: var(--space-24px);
    display: flex;
}

.page-contact-container::before {
    content: "";
    width: 54px;
    height: 54px;
    background-size: cover;
    background-repeat: no-repeat;
    display: block;
}

.page-contact-container--business-hours::before {
    background-image: url("../img/page-contact__business-hours-title.svg");
}

.page-contact-container--telephone::before {
    background-image: url("../img/page-contact__telephone-title.svg");
}

.page-contact-container--email::before {
    background-image: url("../img/page-contact__email-title.svg");
}

.page-contact__business-hours-title,
.page-contact__telephone-title,
.page-contact__email-title {
    font-size: var(--font-size-xsmall);
    color: var(--color-sub);
}

.page-contact__business-hours-text,
.page-contact__telephone-link,
.page-contact__email-link {
    font-size: var(--font-size-small);
    color: var(--color-header-text);
}

.page-contact__business-hours-note {
    font-size: var(--font-size-xsmall);
    color: var(--color-text-small);
}

/* ==========================================================================
   08. サンクスページ
   ========================================================================== */
.page-thanks {
    margin-top: var(--space-72px);
}
.page-thanks__eyebrow {
    margin-bottom: var(--space-48px);
    text-align: center;
}
.page-thanks__title::before {
    content: "";
    width: 4rem;
    height: 4rem;
    display: block;
    background-image: url('../img/check-icon.svg');
    background-repeat: no-repeat;
    background-size: contain;
    margin-inline: auto;
    margin-bottom: var(--space-24px);
}
.page-thanks__title {
    font-size: var(--font-size-heading-md);
    font-weight: var(--font-weight-bold);
    color: var(--color-header-text);
    text-align: center;
    margin-bottom: var(--space-48px);
}
.page-thanks__lead{
    font-size: var(--font-size-body);
    font-weight: var(--font-weight-medium);
    color: var(--color-sub);
    text-align: center;
    margin-bottom: var(--space-48px);
}
.page-thanks__telephone-text {
    font-size: var(--font-size-small);
    color: var(--color-text-small);
    text-align: center;
}
.page-thanks__telephone-link::before {
    content: "";
    width: 1rem;
    height: 1rem;
    margin-right: 0.25rem;
    background-image: url('../img/tel-icon.svg');
    background-repeat: no-repeat;
    background-size: contain;
    display: inline-block;
}
.page-thanks__telephone-link {
    display: block;
    margin-inline: auto;
    width: fit-content;
}
.page-thanks__home-link {
    display: block;
    width: fit-content;
    margin-block: var(--space-16px) 0;
    margin-inline: auto;
    padding-block: var(--space-8px);
    padding-inline: var(--space-16px);
    border: 1px solid var(--color-sub);
    border-radius: var(--radius-pill);
    background-color: var(--color-sec-yellow);
    box-shadow: var(--shadow-base);
    font-size: var(--font-size-small);
    font-weight: var(--font-weight-medium);
    color: var(--color-sub);
    transition: background-color 0.3s ease;
}
.page-thanks__home-link::after {
    content: "";
    display: inline-block;
    width: 0.5rem;
    height: 0.5rem;
    margin-inline-start: 0.5em;
    border-top: 2px solid currentColor;
    border-right: 2px solid currentColor;
    transform: rotate(45deg) translateY(-2px);
}
.page-thanks__home-link:hover {
    background-color: var(--color-main);
    text-decoration: none;
}
/* ==========================================================================
   09. PC表示（1024px以上）
   SP側と異なる値だけを上書きする。
   ========================================================================== */
@media (min-width: 1024px) {
    /* ----------------------------------------------------------------------
       09-01. 共通レイアウト
       ---------------------------------------------------------------------- */
    .eyeblow {
        font-size: var(--font-size-heading-sm);
    }
    .container,
    .site-header-container,
    .hero .container {
        width: 84%;
        max-width: 1200px;
        margin-inline: auto;
    }
    /* ----------------------------------------------------------------------
       09-02. ヘッダー・グローバルナビ
       ---------------------------------------------------------------------- */
    .site-header-container {
        width: 84%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }
    .site-header__toggle {
        display: none;
    }
    .site-header h1 {
        flex: 0 0 auto;
        display: block;
        width: auto;
        height: 3rem;
        margin: 0;
        aspect-ratio: 157 / 134;
        background-image: url("../img/logo_mark.svg");
    }
    .site-header__logo-link {
        display: block;
        width: 100%;
        height: 100%;
    }
    .global-nav {
        position: relative;
        top: auto;
        left: auto;
        display: flex;
        flex: 1 1 auto;
        align-items: center;
        justify-content: flex-end;
        overflow: visible;
        width: auto;
        height: 100%;
        margin-left: clamp(2rem, 6vw, 7rem);
        visibility: visible; 
        background-image: none;
        transform: none;
        transition: none;
        background: none;
        backdrop-filter: unset;
    }
    .global-nav__list {
        position: static;
        display: flex;
        align-items: center;
        justify-content: flex-end;
        gap: clamp(0.9rem, 1.65vw, 1.75rem);
        width: 100%;
        margin: 0;
        padding: 0;
        white-space: nowrap;
    }
    .global-nav__list .menu-item {
        margin: 0;
        font-size: var(--font-size-body);
        font-weight: var(--font-weight-medium);
        line-height: 1.4;
        text-align: center;
    }
    .global-nav__list .menu-item a {
        display: block;
    }
    .global-nav__list .menu-item:last-child {
        margin-left: clamp(0.25rem, 0.7vw, 0.75rem);
    }
    .global-nav__list .menu-item:last-child a {
        margin-top: 0;
        padding: 0.55rem clamp(1rem, 1.7vw, 1.6rem);
        box-shadow: 0 3px 6px rgba(0, 0, 0, 0.18);
    }
    /* ==========================================================================
   05. フッター
   ========================================================================== */
    .site-footer {
        background-image: url("../img/footer_wave_pc.svg");
        background-repeat: no-repeat;
        background-size: cover;
        background-color: #fff;
        padding-block: var(--space-224px) var(--space-32px);
    }
    .site-footer::before {
        display: none;
    }
    .site-footer__main {
        display: flex;
        width: 100%;
    }
    .site-footer__contact {
        flex: 1;
        margin-inline-start: auto;
        align-self: flex-end;
    }
    .site-footer__subtitle--pc {
        display: block;
        font-size: var(--font-size-display-md);
        font-weight: var(--font-weight-bold);
        text-align: left;
        margin-block-end: var(--space-32px);
    }
    .site-footer__subtitle--sp {
        display: none;
    }
    .site-footer__contact-link {
        font-size: var(--font-size-heading-md);
        margin-inline: auto 0;
        margin-block-start: var(--space-48px);
    }
    .site-footer__contact-link::after {
        width: 1rem;
        height: 1rem;
        margin-inline-start: 0.5em;
        border-top: 4px solid currentColor;
        border-right: 4px solid currentColor;
    }
    .site-footer__divider {
        height: 0;
    }
    .site-footer-nav__list {
        display: flex;
        gap: 1rem;
        margin: 0 auto;
        width: fit-content;
    }
    .site-footer-nav__list li {
        margin: 0;
        border-right: 1px solid var(--color-header-text);
        padding-inline-end: 1rem;
    }
    .site-footer-nav__list li:nth-child(7) {
        border: none;
        padding-inline-end: 0;
    }
    .site-footer-nav__list a {
        font-size: var(--font-size-heading-sm);
    }
    .site-footer__copyright {
        color: var(--color-sub);
        text-align: center;
    }
    /* ==========================================================================
   06. トップページ
   ========================================================================== */

/* 06-01. メインビジュアル */
    .hero {
        aspect-ratio: 1440 / 995;
        height: auto;
        background-image: url("../img/header_bg_pc.webp");
        background-position: center -90px;
        background-size: contain;
    }
    .hero .hero__catch {
        font-size: var(--font-size-display-xl);
    }
    .hero .hero__lead {
        font-size: var(--font-size-display-lg);
    }
    .hero .hero__text {
        width: 674px;
        font-size: var(--font-size-heading-md);
    }
    .hero .hero__text strong {
        font-size: var(--font-size-heading-lg);
    }
    .hero .hero__link {
        display: none;
    }
    /* 06-02. お悩み・課題 */
    .worries {
        background-image: url("../img/worries_pc_bg.svg");
        background-size: cover;
        background-position: left bottom;
    }
    .worries .eyeblow {
        text-align: center;
    }
    .worries .worries__title {
        font-size: var(--font-size-display-lg);
        text-align: center;
    }
    .worries .worries__subtitle_pc {
        display: block;
        text-align: center;
        font-family: "Noto Serif JP", serif;
        font-size: var(--font-size-heading-lg);
        font-weight: var(--font-weight-semi-bold);
        color: var(--color-sub);
        margin-bottom: var(--space-20px);
    }
    .worries .worries__subtitle_sp {
        display: none;
    }
    .worries .worries__list {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 1rem;
        margin: 0;
        padding: 0;
        list-style: none;
    }
    .worries .worries__item {
        font-size: var(--font-size-heading-sm);
    }
    .worries .worries__text {
        font-size: var(--font-size-heading-lg);
    }
    /* 06-03. 事業所紹介 */
    .about .container {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 4rem;
    }
    .about .about__title {
        font-size: var(--font-size-display-md);
    }
    .about .about__subtitle {
        font-size: var(--font-size-display-md);
    }
    .about .about__image {
        display: block;
        flex: 0 0 550px;
        width: 550px;
    }
    .about .about__content {
        display: block;
    }
    .about .about__image-sp {
        display: none;
    }
    /* ----------------------------------------------------------------------
       09-07. 業務内容
       ---------------------------------------------------------------------- */
    .job-description {
        padding-block-start: var(--space-144px);
        margin-block-end: var(--space-96px);
        background: url("../img/job-description_bg_header_pc.svg") top center / 100% auto no-repeat, linear-gradient(var(--color-bg) 7rem, var(--color-main) 7rem);
    }
    .job-description::after {
        content: "";
        display: block;
        width: 100%;
        aspect-ratio: 1440 / 297;
        background: url("../img/job-description_bg_footer_pc.svg") top center / 100% auto no-repeat, linear-gradient(var(--color-main) 4rem,var(--color-bg) 7rem);
    }
    .job-description .job-description__title {
        font-size: var(--font-size-display-md);
    }
    .job-description .job-description__subtitle {
        font-size: var(--font-size-heading-sm);
        font-weight: var(--font-weight-medium);
    }
    .job-description__list {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        column-gap: 1.5rem;
        row-gap: 2.5rem;

        max-width: 1200px;
        margin-inline: auto;
        padding: 0;
        list-style: none;
    }

    .job-description .job-description__item {
        flex: 0 0 calc((100% - 3rem) / 3);
        margin-block-end: 0;
        overflow: hidden;
    }

    .job-description .job-description__item .job-description__item-image {
        display: block;
        width: 100%;
        height: 13.75rem;
        object-fit: cover;
    }

    .job-description .job-description__item .job-description__content {
        padding: 1.5rem;
    }

    /* ----------------------------------------------------------------------
       09-08. 利用者の声
       ---------------------------------------------------------------------- */
    .users-voice::before {
        content: "";
        display: block;
        width: 100%;
        aspect-ratio: 1440 / 186;
        background-color: #fff;
        background-image:
        url("../img/users-voice__header_pc.svg"),
        linear-gradient(
            to bottom,
            #fff 0%,
            #fff 58%,
            var(--color-text-bg) 58%,
            var(--color-text-bg) 100%
        );
        background-repeat: no-repeat;
        background-position: top center;
        background-size: 105%;
    }
    .users-voice .users-voice__title {
        font-size: var(--font-size-display-md);
    }
    /* ----------------------------------------------------------------------
       09-09. 職員の声
       ---------------------------------------------------------------------- */
    .staffs-voice::before {
        content: "";
        display: block;
        width: 100%;
        aspect-ratio: 1462 / 208;
        background-color: #fff;
        background-image:
        url("../img/users-voice__header_pc.svg"),
        linear-gradient(
            to bottom,
            var(--color-text-bg) 0%,
            var(--color-text-bg) 58%,
            var(--color-bg2) 58%,
            var(--color-bg2) 100%
        );
        background-repeat: no-repeat;
        background-position: center bottom;
        background-size: 105%;
    }
    .staffs-voice .staffs-voice__title {
        font-size: var(--font-size-display-md);
    }
    .staffs-voice .flow-container {
        padding-block-start: var(--space-120px);
    }
    /* ----------------------------------------------------------------------
       09-10. ご利用の流れ
       ---------------------------------------------------------------------- */

    .flow::before {
        content: "";
        display: block;
        width: 100%;
        aspect-ratio: 1462 / 208;
        margin-block-end: var(--space-112px);
        background-color: #fff;
        background-image:
        url("../img/flow__header_pc.svg"),
        linear-gradient(
            to bottom,
            var(--color-bg2) 0%,
            var(--color-bg2) 50%,
            var(--color-bg) 50%,
            var(--color-bg) 100%
        );
        background-repeat: no-repeat;
        background-position: center bottom;
        background-size: 105%;
    }
    .flow .container {
        width: 84%;
        max-width: 1200px;
        margin-inline: auto;
    }
    .flow .eyeblow {
        font-size: 1rem;
        text-align: center;
    }
    .flow .flow__title {
        margin-block-end: 0.75rem;
        font-size: var(--font-size-display-md);
        font-weight: var(--font-weight-medium);
        color: var(--color-header-text);
        text-align: center;
    }
    .flow .flow__subtitle {
        margin-block-end: 0;
        font-size: var(--font-size-heading-sm);
        font-weight: var(--font-weight-regular);
        color: var(--color-sub);
        text-align: center;
    }
    .flow .flow__list {
        width: 100%;
        max-width: 1020px;
        margin-block: var(--space-48px) var(--space-160px);
        margin-inline: auto;
        padding: 0;
    }
    .flow .flow__item {
        display: grid;
        grid-template-columns: 200px minmax(0, 1fr);
        align-items: stretch;
        column-gap: 28px;
        min-height: 256px;
        margin-block-end: 32px;
    }
    .flow .flow__item:last-child {
        margin-block-end: 0;
    }
    /* STEP番号とイラストを置く左側 */
    .flow .flow__item .flow__aside {
        position: relative;
        display: block;
        width: 200px;
        min-height: 256px;
    }
    .flow .flow__step-number {
        position: relative;
        z-index: 2;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        width: 128px;
        height: 128px;
        margin: 0;
        border-radius: 50%;
        background-color: var(--color-text-bg);
        font-size: var(--font-size-display-lg);
        line-height: 1;
        color: var(--color-sub);
        text-align: center;
    }
    .flow .flow__step-number-small {
        display: block;
        margin: 0 0 0.25rem;
        font-size: var(--font-size-body);
        font-weight: var(--font-weight-black);
        line-height: 1;
    }
    /* 各STEPをつなぐ縦線 */
    .flow .flow__item .flow__aside::after {
        content: "";
        position: absolute;
        top: 128px;
        bottom: -32px;
        left: 63px;
        width: 2px;
        background-color: var(--color-sub);
        transform: none;
    }
    .flow .flow__item:last-child .flow__aside::after {
        display: none;
    }
    /* STEP横のイラスト */
    .flow .flow__step-image {
        position: absolute;
        top: 144px;
        left: 100px;
        z-index: 2;

        width: auto;
        max-width: 100px;
        max-height: 110px;

        background-color: transparent;
        object-fit: contain;
    }
    /* 右側のタイトルと説明 */
    .flow .flow__content {
        min-width: 0;
        padding-block-start: 3.5rem;
    }
    .flow .flow__item-title {
        margin-block-end: 0.5rem;
        font-size: var(--font-size-heading-lg);
        font-weight: var(--font-weight-medium);
        line-height: 1.4;
        color: var(--color-sub);
    }
    .flow .flow__item-text {
        width: 100%;
        padding-block: 1.5rem;
        padding-inline: 2rem;

        border-radius: 1rem;
        background-color: var(--color-main);

        font-size: 1rem;
        line-height: 1.8;
        color: var(--color-header-text);
    }
    /* 06-08. お問い合わせCTA */
    .contact .contact__title {
        margin-block-end: var(--space-32px);
    }
    .contact .contact__title .contact__title-emphasis {
        font-size: var(--font-size-heading-lg);
    }
    .contact .contact__button {
        font-size: var(--font-size-display-md);
        padding-inline: var(--space-128px);
    }
    .contact .contact__button::after {
        width: 1.5rem;
        height: 1.5rem;
        border-top: 4px solid currentColor;
        border-right: 4px solid currentColor;
    }
    /* 06-09. よくある質問 */
    .faq .eyeblow, .faq .faq__title, .faq .faq__subtitle {
        text-align: left;
    }
    .faq .faq__title {
        font-size: var(--font-size-display-md);
    }
    .faq .faq__subtitle {
        font-size: var(--font-size-heading-sm);
    }
    .faq .faq__item {
        font-size: var(--font-size-heading-sm);
    }
    /* 06-10. アクセス・会社情報 */
    .access .access__title {
        font-size: var(--font-size-display-md);
    }
    .access .access__subtitle {
        font-size: var(--font-size-heading-sm);
    }
    .access .location .location__heading,
    .access .company .company__heading {
        font-size: var(--font-size-heading-md);
    }
    .access .location .location__term,
    .access .company .company__term,
    .access .location .location__description,
    .access .company .company__description {
        font-size: var(--font-size-body);
    }
    .access .company .company__list {
        column-gap: 1rem;
    }

    .location__container {
        display: flex;
        gap: var(--space-16px);
    }
    .location__map {
        flex: 0 0 620px;
        width: 620px;
        height: 338px;
        border: 0;
    }
    .location__list {
        flex: 1 1 auto;
        min-width: 0;
    }
    /* ==========================================================================
   07. お問い合わせページ
   ========================================================================== */

/* ページ見出し */
    .page-contact__eyebrow,
    .page-contact__title,
    .page-contact__lead {
        text-align: left;
    }
    input[name="your-name"],
    input[name="your-company"] {
        width: 312px;
    }
    input[name="your-email"],
    input[name="your-subject"],
    textarea[name="your-message"] {
        width: 656px;
    }
    .submit-wrapper {
        justify-content: flex-start;
    }
    .page-contact__address {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        row-gap: var(--space-24px);
        width: 100%;
        max-width: 794px;
        padding: var(--space-16px) var(--space-24px);
    }

    /* 見出しと罫線を3列全体に広げる */
    .page-contact__address-title {
        grid-column: 1 / -1;
        margin: 0;
        padding-bottom: 16px;
    }

    /* SP用の縦方向余白を解除 */
    .page-contact-container {
        align-items: flex-start;
        gap: 12px;
        min-width: 0;
        margin-top: 0;
    }

    /* アイコンの幅を固定 */
    .page-contact-container::before {
        flex: 0 0 54px;
    }

    /* アイコン右側のテキスト領域 */
    .page-contact-container > div {
        min-width: 0;
    }

    .page-contact__email-link {
        overflow-wrap: anywhere;
    }
    /* ==========================================================================
    08. サンクスページ
    ========================================================================== */
    .page-thanks__title::before {
        display: inline;
        margin: 0
    }
    .page-thanks__title {
        display: flex;
        width: fit-content;
        margin-inline: auto;
        align-items: center;
        gap: var(--space-20px);
    }
}