/* ==========================================================================
   Design Tokens & Variables
   ========================================================================== */
:root {
    /* Colors */
    --color-white: #ffffff;
    --color-off-white: #f9f9f9;
    --color-gray-50: #f5f5f5;
    --color-gray-100: #eeeeee;
    --color-gray-200: #dddddd;
    --color-gray-400: #999999;
    --color-gray-800: #333333;
    --color-black: #1a1a1a;

    --color-primary: #62b850;
    /* Base Green */
    --color-primary-light: #e9f4e6;
    --color-primary-dark: #62b850;

    --color-accent-orange: #ff8e3f;
    --color-accent-yellow: #f2d431;

    --color-text-main: var(--color-gray-800);
    --color-text-muted: #666666;
    --color-text-inverse: var(--color-white);

    /* Typography */
    --font-family-base: 'Noto Sans JP', sans-serif;
    --font-family-heading: 'Zen Kaku Gothic New', sans-serif;
    --font-family-en: 'Inter', sans-serif;

    /* Spacing (Fluid Typography & Spacing based on clamp) */
    --space-xs: clamp(0.5rem, 0.43rem + 0.36vw, 0.75rem);
    /* 8px - 12px */
    --space-sm: clamp(0.75rem, 0.61rem + 0.71vw, 1.25rem);
    /* 12px - 20px */
    --space-md: clamp(1.25rem, 1.04rem + 1.07vw, 2rem);
    /* 20px - 32px */
    --space-lg: clamp(2rem, 1.43rem + 2.86vw, 4rem);
    /* 32px - 64px */
    --space-xl: clamp(3rem, 2.14rem + 4.29vw, 6rem);
    /* 48px - 96px */
    --space-xxl: clamp(4rem, 2.57rem + 7.14vw, 9rem);
    /* 64px - 144px */

    /* Container */
    --container-width: 1320px;
    --container-padding: var(--space-md);

    /* Shadows */
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.04);
    --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.08);
    --shadow-lg: 0 16px 48px rgba(0, 0, 0, 0.12);
    --shadow-hover: 0 20px 40px rgba(98, 184, 80, 0.15);

    /* Border Radius */
    --radius-sm: 8px;
    --radius-md: 16px;
    --radius-lg: 24px;
    --radius-full: 9999px;

    /* Transitions */
    --transition-fast: 0.2s ease;
    --transition-normal: 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    --transition-slow: 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

/* ==========================================================================
   Reset & Base
   ========================================================================== */
*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    scroll-behavior: smooth;
    font-size: 16px;
    /* clip: 横スクロールを抑制しつつ position:sticky を壊さない（hidden だとスクロールコンテナ化して追従が無効になる） */
    overflow-x: clip;
}

body {
    font-family: var(--font-family-base);
    color: var(--color-text-main);
    background-color: var(--color-white);
    line-height: 1.6;
    overflow-x: clip;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

a {
    color: inherit;
    text-decoration: none;
    transition: color var(--transition-fast);
}

ul,
ol {
    list-style: none;
}

button {
    background: none;
    border: none;
    cursor: pointer;
    font: inherit;
    color: inherit;
}

/* Typography Base Classes */
h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: var(--font-family-heading);
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: 0.1em;
}

/* ==========================================================================
   Utility Classes
   ========================================================================== */
.container {
    width: 100%;
    max-width: var(--container-width);
    margin: 0 auto;
    padding: 0 var(--container-padding);
}

.relative {
    position: relative;
}

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

.bg-gray {
    background-color: var(--color-off-white);
}

.color-white {
    color: var(--color-white) !important;
}

.u-pc-only {
    display: none !important;
}

.u-sp-only {
    display: inline;
}

/* 段落中に置くと、スマホでだけ改行＋段落の空きを作る（PCでは何も起きない）。
   長い本文をスマホで二分割して読みやすくするために使う */
.u-sp-para {
    display: none;
}

@media (max-width: 767px) {
    .u-sp-para {
        display: block;
        height: 1.3em;
    }
}

@media (min-width: 768px) {
    .u-sp-only {
        display: none;
    }
}

@media (min-width: 768px) {
    .u-pc-only {
        display: inline !important;
    }
}

/* Background Patterns & Ornaments */
.pattern-dots {
    background-image: radial-gradient(var(--color-primary-light) 2px, transparent 2px);
    background-size: 20px 20px;
}

.pattern-dots-gray {
    background-image: radial-gradient(var(--color-gray-200) 2px, transparent 2px);
    background-size: 20px 20px;
}

.bg-ornament {
    position: absolute;
    z-index: 0;
    pointer-events: none;
    opacity: 0.5;
}

/* Water drop / Blob shape */
.bg-blob {
    border-radius: 40% 60% 70% 30% / 40% 50% 60% 50%;
    filter: blur(40px);
    animation: morph 8s ease-in-out infinite both alternate;
}

@keyframes morph {

    0%,
    100% {
        border-radius: 40% 60% 70% 30% / 40% 50% 60% 50%;
    }

    34% {
        border-radius: 70% 30% 50% 50% / 30% 30% 70% 70%;
    }

    67% {
        border-radius: 100% 60% 60% 100% / 100% 100% 60% 60%;
    }
}

/* Floating circles */
.bg-circle {
    border-radius: 50%;
}

.bg-circle--filled {
    background: radial-gradient(circle, var(--color-primary-light) 0%, rgba(255, 255, 255, 0) 70%);
}

.bg-circle--outlined {
    border: 2px dashed var(--color-primary-light);
}

/* Floating animation */
.float-anim {
    animation: floating 6s ease-in-out infinite;
}

.float-anim-reverse {
    animation: floating-reverse 8s ease-in-out infinite;
}

@keyframes floating {
    0% {
        transform: translateY(0px) rotate(0deg);
    }

    50% {
        transform: translateY(-20px) rotate(5deg);
    }

    100% {
        transform: translateY(0px) rotate(0deg);
    }
}

@keyframes floating-reverse {
    0% {
        transform: translateY(0px) rotate(0deg);
    }

    50% {
        transform: translateY(20px) rotate(-5deg);
    }

    100% {
        transform: translateY(0px) rotate(0deg);
    }
}

/* Spacing Utils */
.mb-xs {
    margin-bottom: var(--space-xs);
}

.mb-sm {
    margin-bottom: var(--space-sm);
}

.mb-md {
    margin-bottom: var(--space-md);
}

.mb-lg {
    margin-bottom: var(--space-lg);
}

.mt-m {
    margin-top: var(--space-lg);
}

.pb-m {
    padding-bottom: var(--space-lg);
}

/* Buttons */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.75rem 2rem;
    border-radius: var(--radius-full);
    font-weight: 700;
    font-family: var(--font-family-heading);
    text-align: center;
    transition: all var(--transition-normal);
    box-shadow: var(--shadow-sm);
}

.btn:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-hover);
}

.btn--primary {
    background-color: var(--color-primary);
    color: var(--color-white);
}

.btn--primary:hover {
    background-color: var(--color-primary-dark);
}

.btn--white {
    background-color: var(--color-white);
    color: var(--color-primary);
}

.btn--white:hover {
    color: var(--color-primary-dark);
}

.btn--large {
    padding: 1.25rem 4rem;
    font-size: 1.125rem;
}

.btn--submit {
    background-color: var(--color-accent-orange);
    color: var(--color-white);
    width: 100%;
    padding: 1.25rem;
    font-size: 1.125rem;
}

.btn--submit:hover {
    background-color: #e67d32;
    box-shadow: 0 10px 20px rgba(255, 142, 63, 0.2);
}

@media (min-width: 768px) {
    .btn--submit {
        width: 320px;
    }
}

/* Section Header */
.section {
    padding: var(--space-xl) 0;
}

@media (max-width: 767px) {
    .section {
        padding: 60px 0;
        /* Adjusted from 80px to prevent excessive gaps */
    }
}

.section-header {
    margin-bottom: var(--space-lg);
    text-align: center;
}

@media (max-width: 767px) {
    .section-header {
        margin-bottom: 50px;
        /* Increase header margin on mobile */
    }
}

.section-header.center {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.section-en {
    display: block;
    font-family: var(--font-family-en);
    font-weight: 600;
    color: var(--color-primary);
    font-size: 1rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    margin-bottom: 0.5rem;
}

.section-title {
    font-size: clamp(1.6rem, 1.26rem + 1.71vw, 2.8rem);
    /* 80% of original: 32px~56px → 25.6px~44.8px */
    letter-spacing: 0.15em;
    position: relative;
    display: inline-block;
}

/* スマホは字送り0.15emのぶん横に伸びるので、24pxまで落として1〜2行に収める */
@media (max-width: 767px) {
    .section-title {
        font-size: 24px;
    }
}

/* Animations */
.fade-in {
    opacity: 0;
    transition: opacity var(--transition-slow);
}

.fade-in.is-visible {
    opacity: 1;
}

.fade-in-up {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity var(--transition-slow), transform var(--transition-slow);
}

.fade-in-up.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* ==========================================================================
   Header
   studio.design/ja/business ライク。丸い枠で包まず、画面幅いっぱいの薄いバーにする。
   ヒーロー（緑地）の上では地を透過して白文字、スクロールして白い本文に入ったら
   白地＋濃い文字へ切り替える（.is-scrolled は main.js が付け外しする）。
   ========================================================================== */
.header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
    background-color: transparent;
    transition: background-color var(--transition-normal),
        box-shadow var(--transition-normal);
}

/* ヒーローを抜けた後。白い本文の上に重なるので地を白へ落とす */
.header.is-scrolled {
    background-color: rgba(255, 255, 255, 0.92);
    backdrop-filter: blur(12px);
    box-shadow: 0 1px 12px rgba(0, 0, 0, 0.05);
}

/* 中央寄せをやめたので translateX の打ち消しは不要になった */
.header--hidden {
    transform: translateY(0);
}

.header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 72px;
    /* 枠を外したぶん、中身は画面の端に沿わせる（参考サイトと同じ全幅レイアウト） */
    padding: 16px clamp(20px, 2.6vw, 40px);
}

.header__logo {
    font-family: var(--font-family-heading);
    font-size: 1.3rem;
    font-weight: 800;
    color: #ffffff;
    letter-spacing: -0.02em;
    transition: color var(--transition-normal);
}

.header.is-scrolled .header__logo {
    color: var(--color-primary);
}

.header__logo a {
    color: inherit;
    text-decoration: none;
}

.header__nav {
    display: none;
}

@media (min-width: 992px) {
    .header__nav {
        display: block;
        /* ナビは中央ではなく右へ寄せ、CTA と一続きのまとまりにする */
        margin-left: auto;
        margin-right: 32px;
    }
}

.header__nav-list {
    display: flex;
    align-items: center;
    gap: 28px;
}

.header__nav-list a {
    font-size: 1rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.9);
    transition: color var(--transition-fast);
}

.header__nav-list a:hover {
    color: #ffffff;
}

.header.is-scrolled .header__nav-list a {
    color: #333;
}

.header.is-scrolled .header__nav-list a:hover {
    color: var(--color-primary);
}

/* 区切りの「|」は参考サイトに倣って廃止（HTML からも削除済み） */
.header__nav-separator {
    display: none;
}

.header__btn {
    display: none;
    align-items: center;
    gap: 8px;
    /* 参考サイトの CTA に合わせたピル型。ナビ 16px に合わせて少し大きめに */
    height: 52px;
    padding: 0 30px;
    background-color: #ff8e52;
    color: var(--color-white);
    border-radius: 100px;
    font-weight: 700;
    font-size: 1.1rem;
    letter-spacing: 0.02em;
    transition: all var(--transition-fast);
}

@media (min-width: 768px) {
    .header__btn {
        display: inline-flex;
    }
}

/* ナビが隠れるタブレット幅では CTA が中央に取り残されるので、
   ハンバーガーと一緒に右へ寄せる */
@media (max-width: 991px) {
    .header__btn {
        margin-left: auto;
        margin-right: 18px;
    }
}

.header__btn:hover {
    background-color: #ff7d38;
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(255, 142, 82, 0.35);
}

/* 白丸のバッジは外し、文字と同じ高さのメールアイコンだけ残す */
.header__btn-icon {
    display: flex;
    align-items: center;
    flex-shrink: 0;
}

/* スマホ・タブレット用の小さなお問い合わせボタン（ハンバーガーの左）。
   PC の .header__btn と同じオレンジのピル型を、高さ34pxまで縮めたもの。
   ヒーローの緑地でもスクロール後の白地でも同じ色で通す */
.header__btn-mobile {
    display: none;
    align-items: center;
    gap: 5px;
    height: 42px;
    padding: 0 18px;
    background-color: #ff8e52;
    color: var(--color-white);
    border-radius: 100px;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-decoration: none;
    white-space: nowrap;
    flex-shrink: 0;
}

.header__btn-mobile svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

/* ハンバーガーが出る幅（991px以下）でだけ表示する */
@media (max-width: 991px) {
    .header__btn-mobile {
        display: inline-flex;
    }
}

.header__mobile-actions {
    display: none;
    align-items: center;
    gap: 10px;
}

/* ==========================================================================
   Hero
   ========================================================================== */
/* ==========================================================================
   Hero
   ========================================================================== */
.hero {
    padding-top: 140px;
    padding-bottom: clamp(60px, 10vh, 120px);
    /* 画面の85%。下のセクションの頭を少し覗かせて、続きがあることを分からせる */
    min-height: 85svh;
    display: flex;
    align-items: center;
    /* 地の色。柄（紙目・グラデ・四隅の光）は下の ::before が持つので、ここは
       読み込み中にちらつかないよう同系の緑を置いておくだけ */
    background-color: #62b850;
    position: relative;
    overflow: hidden;
    /* 白フレームは廃止し、灰地を画面いっぱいに敷く */
    margin: 0;
    border-radius: 0;
}

/* 緑のグラデーション地。料金プラン（.price.section::before）と同じ作りで、
   ・紙目タイル（paper-grain-overlay.webp）を soft-light で重ねてムラだけ足す
   ・四隅にやわらかい光を置いて中央（＝キャッチが載る帯）を明るく抜く
   下端はまっすぐ切り、次の課題提起（灰地）とは直線の境目で接する。

   緑は料金プラン（.price.section::before）と同一のランプにそろえてある
   （#76c665 → #62b850 → #52a442）。お問い合わせ（.contact）の地も同じ #62b850。
   以前は白文字とのコントラストを稼ぐため #4a9a3c 中央の一段濃い配色だったが、
   FVが重く見えるため 2026-08-26 に薄いほうへ寄せた。
   代償として白文字とのコントラストは 3.5:1 → 2.5:1（中央部）まで落ちている。
   本文サイズの白文字をこの地に新しく載せるのは避け、白いカードの中に置くこと */
.hero::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background-color: var(--color-primary);
    background-image:
        url('assets/paper-grain-overlay.webp'),
        radial-gradient(21% 34% at 21% 16%, rgba(255, 255, 255, 0.22), rgba(255, 255, 255, 0) 70%),
        radial-gradient(23% 36% at 79% 62%, rgba(31, 82, 56, 0.22), rgba(31, 82, 56, 0) 70%),
        radial-gradient(25% 30% at 50% 105%, rgba(31, 82, 56, 0.18), rgba(31, 82, 56, 0) 70%),
        linear-gradient(174deg, #76c665 0%, #62b850 45%, #52a442 100%);
    background-size: 256px 256px, auto, auto, auto, auto;
    background-repeat: repeat, no-repeat, no-repeat, no-repeat, no-repeat;
    background-blend-mode: soft-light, normal, normal, normal, normal;
}

@media (max-width: 1350px) {
    .hero {
        /* スマホ〜スモールPC(〜1350px)では白フレームを外して背景を画面いっぱいに（上下左右の余白なし） */
        margin: 0;
        border-radius: 0;
        /* 余白(上16px)が無くなったぶん、固定ヘッダー(下端≒87px)をクリアできるよう確保 */
        padding-top: 96px;
        padding-bottom: 18px;
        min-height: 85svh;
    }
}

/* タブレット〜スモールPC(768〜1350px)：全面表示だが、スマホ基準の
   padding-top:96px / padding-bottom:18px ではヘッダー(下端≒89px)に近すぎるため
   上下のゆとりを広げる。スマホ(〜767px)は従来どおり詰めたまま。 */
@media (min-width: 768px) and (max-width: 1350px) {
    .hero {
        padding-top: 132px;
        padding-bottom: 56px;
    }
}

/* PC(1351px〜)：固定ヘッダー分の上下余白 */
@media (min-width: 1351px) {
    .hero {
        /* 固定ヘッダー分のクリアランス */
        padding-top: 120px;
        padding-bottom: 80px;
        /* PCだけ画面の90%。ファーストビューを大きく見せる（他は85svhのまま） */
        min-height: 90svh;
    }

    /* 道は slice 配置なので箱を高くすると拡大され、右側（道標を置いた側）から
       画面外へ切れていく。道標の表示しきい値は箱の高さ＝hero 85svh 前提で
       逆算してあるので、hero を 90svh にしても道の箱だけは 85svh 相当
       （90% × 94.4% ≒ 85%）に据え置き、下端合わせで見え方を変えない */
    .hero__road--pc {
        top: auto;
        bottom: 0;
        height: 94.4%;
    }
}

/* FVの道。制作メンバー（.member__road）・ご利用の流れ（.flow__road）と同じ作りで、
   白い外側線＋アスファルト＋ざらつき＋センターの白破線を重ねる。
   路面は本文（z-index:10）の下、緑地（.hero::before）の上に敷く */
/* タクシーのスプライト置き場。描画はせず、参照されるだけ */
.hero__sprite {
    position: absolute;
    width: 0;
    height: 0;
    overflow: hidden;
}

/* 道はPC用とSP用の2本を持ち、ブレークポイントで入れ替える */
.hero__road--sp {
    display: none;
}

.hero__road {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    pointer-events: none;
    /* 奥（上端）へ向かって霞ませる。遠近感が出るのと、ヘッダーの白いナビの裏で
       路面がぶつかるのを防ぐのを兼ねる */
    -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 18%);
    mask-image: linear-gradient(to bottom, transparent 0, #000 18%);
}

/* 路肩の白線。アスファルトより太い白を下に敷いて縁に見せる */
.hero__road-edge path {
    fill: none;
    stroke: #ffffff;
    stroke-width: 72;
    stroke-linecap: butt;
    stroke-linejoin: round;
}

.hero__road-asphalt path {
    fill: none;
    stroke: #75787c;
    stroke-width: 61;
    stroke-linecap: butt;
    stroke-linejoin: round;
}

.hero__road-grain path {
    fill: none;
    stroke: url(#heroRoadGrain);
    stroke-width: 61;
    stroke-linecap: butt;
    stroke-linejoin: round;
}

.hero__road-dash path {
    fill: none;
    stroke: rgba(255, 255, 255, 0.95);
    stroke-width: 3;
    stroke-linecap: butt;
    stroke-dasharray: 18 15;
}

/* 二手に分かれた道の行き先を示す木の道標。道と同じSVGの中にあるので、
   置き場所は viewBox（1440x760）の座標で、原点＝柱の接地点で指定する。
   道は slice 配置なので、画面が縦長になるほど拡大され、右側＝道標を置いた側から
   順に画面外へ切れていく。中途半端に切れた板は読めないので、収まらない縦横比では出さない。
   しきい値は「見えている viewBox 幅 ≒ 760 × 画面幅 ÷ 道の箱の高さ」に、
   箱の高さ（hero 85svh の 100% / 72% / 58%）を入れて逆算した値 */
.hero__road--pc .hero__signpost {
    display: none;
}

/* 本線（＝今までのケアマネ紹介）の看板。本線の左脇の草地に立てる。
   道は上へ行くほど右へ寄るので、板の下端（y=326）で路肩に一番近づく。
   そこで16の余白が残る位置＝柱x=818 に置く */
.hero__road--pc .hero__signpost--care {
    transform: translate(818px, 372px);
}

/* 分岐した道（＝これから増えるホームページ集客）の看板。その道の手前側の脇に立てる。
   分岐は右へ行くほど上がるので、右へ寄せつつ少し下げると路肩から離れる。
   ケアマネ看板と同じ16前後の余白が残る位置＝柱(1080, 624) に置く */
.hero__road--pc .hero__signpost--web {
    transform: translate(1080px, 624px);
}

@media (min-width: 1100px) and (min-aspect-ratio: 7/5) {
    .hero__road--pc .hero__signpost {
        display: block;
    }
}

@media (min-width: 881px) and (max-width: 1099px) and (min-aspect-ratio: 1/1) {
    .hero__road--pc .hero__signpost {
        display: block;
    }
}

@media (min-width: 768px) and (max-width: 880px) and (min-aspect-ratio: 4/5) {
    .hero__road--pc .hero__signpost {
        display: block;
    }
}

/* 板の文字。木目の上に載るので黒でなく焦茶にする */
.hero__signpost-text {
    font-family: var(--font-family-heading);
    font-weight: 700;
    /* 板（幅200）に8文字が収まる大きさ。左右に20ずつ余白が残る */
    font-size: 20px;
    fill: #2e1c0e;
    text-anchor: middle;
}

/* タブレット〜スモールPC：slice の拡大率は「高さ / 760」で決まるので、
   画面が縦長になるほど道が寄って分岐点が右へ切れてしまう。
   箱の高さを下寄せで縮めて拡大率を下げ、分岐が必ず画面に入るようにする */
@media (max-width: 1099px) {
    .hero__road {
        top: auto;
        bottom: 0;
        height: 72%;
    }
}

@media (max-width: 880px) {
    .hero__road {
        height: 58%;
    }
}

/* SP：横長のPC用は下げ、縦画面向けに引き直したSP用を画面下端の帯として出す。
   文字は .hero__inner（z-index 10）が上に載るので重ならない */
@media (max-width: 767px) {
    .hero__road--pc {
        display: none;
    }

    /* 道が入って本文が min-height(85svh) を超えたため、align-items:center の
       上下中央寄せが効かなくなり、キャッチが固定ヘッダー（下端≒87px）に近づいた。
       ヘッダー下に55px前後のゆとりが残るよう、上余白で直接あける */
    .hero {
        padding-top: 142px;
    }

    /* 道は .hero__content の中にあるので、親が 640px で頭打ちになると
       広いSP（688px超）で画面端まで届かない。SPでは頭打ちを外す。
       基本ルール（.hero__content）はこのブロックより後方にあるので、
       詳細度を1つ上げて順序に依存しないようにする */
    .hero .hero__content {
        max-width: none;
    }

    /* 背景に敷かず、キャッチコピーの下に並ぶ普通のブロックとして流す */
    .hero__road--sp {
        display: block;
        position: static;
        /* SVGは置換要素なので width:auto だと内在比率から幅を決めてしまい、
           グリッドに引き伸ばされない。親いっぱい＋左右パディングぶんで明示する */
        width: calc(100% + var(--container-padding) * 2);
        /* viewBox（390x440）と同じ 1:1.128 で高さを出す。上限を付けると
           そこから先は上が切られ、道が見えない線で断ち切られてしまうので付けない。
           aspect-ratio と max-height を併用すると、置換要素は高さでなく幅のほうを
           縮めて比率を守ろうとして道が右端まで届かなくなるので、高さで直接指定する */
        height: 112.8vw;
        /* コンテナの左右パディングを打ち消して、道だけ画面端まで抜く */
        margin-inline: calc(-1 * var(--container-padding));
        /* 道が枠を横切るのは左右の端だけなので、霞ませる必要はない。
           .hero__road のPC用マスク（上端フェード）はここで打ち消す */
        -webkit-mask-image: none;
        mask-image: none;
        /* 上へ引き上げてキャッチコピーの帯に食い込ませる。道はコピーの右脇を
           駆け上がって画面外へ抜けるので、文字とは重ならない。
           万一かすっても文字が上に来るよう、道だけ後ろ（z-index:-1）へ送る。
           .hero__inner が z-index:10 で重なりの文脈を作っているため、
           マイナス値でも緑地より後ろへは落ちない */
        position: relative;
        z-index: -1;
        margin-block: -110px 22px;
    }

}

/* SP用は viewBox が 390 幅なので、路面の太さもその縮尺に合わせて引き直す */
.hero__road--sp .hero__road-edge path {
    stroke-width: 54;
}

.hero__road--sp .hero__road-asphalt path,
.hero__road--sp .hero__road-grain path {
    stroke-width: 46;
}

.hero__road--sp .hero__road-grain path {
    stroke: url(#heroRoadGrainSp);
}

.hero__road--sp .hero__road-dash path {
    stroke-width: 2.6;
    stroke-dasharray: 14 12;
}

/* SP用の道は meet 配置で切れないので、道標は常に出す。
   本線の道標は本線の上側の草地に、分岐の道標は分岐の手前側（下）の草地に立てる。
   二本の道にはさまれた草地は、本線が斜めに横切るぶん板の左端がぶつかるので使わない。
   板は8文字ぶん190幅あり、0.5では文字が10pxまで落ちて読めなかったので0.72まで戻した */
.hero__road--sp .hero__signpost--care {
    transform: translate(145px, 275px) scale(0.72);
}

.hero__road--sp .hero__signpost--web {
    transform: translate(300px, 434px) scale(0.72);
}

/* ==========================================================================
   FVの導入アニメーション（PCの道だけ）
   道は最初から敷いてある。ページを開いた直後に、その上へ 車 → 道標 の順で乗る。
   1. 車：奥のもやの中から本線を手前へ下ってきて、静止画のときと同じ位置で止まる。
      道は幅が一定＝遠近をつけていないので、車も大きさを変えず 0.52 のまま走らせる
      （途中で大きくすると、道幅と合わなくなって不自然に見える）。
      道は曲がっているので、道の上を等時間で17点サンプリングし、その点の座標と傾きを
      キーフレームに並べてある（座標は本線の中心線＋手前側へ15、傾きはその点の接線。
      generate: 道の2本のベジェを弧長でたどって算出）。
      減速は距離の配分のほう（1-(1-t)^2.4）でつけてあるので、timing-function は linear
   2. 道標：上から落として、軽く跳ねて据わる。接地影は板といっしょに動くと
      宙に浮いてしまうので、影だけ板の外に出して着地に合わせて出す
   止まったあとの姿は、アニメを外した素の状態（＝HTMLの transform 属性と
   上のCSS）とぴったり同じ。JSは使っていないので、読み込み直後から動く
   ========================================================================== */

/* 1. 車が奥から走ってきて止まる。
      各キーフレームは「本線の中心線上の点＋手前側へ法線方向に15」で、
      rotate はその点での道の傾き。100% はHTMLの transform 属性と同じ値なので、
      終わったあとにズレない */
@keyframes heroTaxiDriveIn {
    0% {
        transform: translate(1085.5px, 130.5px) rotate(-68.2deg) scale(0.52);
    }

    6.25% {
        transform: translate(1039.9px, 233.7px) rotate(-63.9deg) scale(0.52);
    }

    12.5% {
        transform: translate(990.4px, 324.8px) rotate(-58.7deg) scale(0.52);
    }

    18.75% {
        transform: translate(937.7px, 402.5px) rotate(-52.9deg) scale(0.52);
    }

    25% {
        transform: translate(883.1px, 467.3px) rotate(-46.7deg) scale(0.52);
    }

    31.25% {
        transform: translate(828.6px, 519.4px) rotate(-40.7deg) scale(0.52);
    }

    37.5% {
        transform: translate(776.3px, 560.2px) rotate(-35.2deg) scale(0.52);
    }

    43.75% {
        transform: translate(728.4px, 591.7px) rotate(-32deg) scale(0.52);
    }

    50% {
        transform: translate(686.7px, 616.9px) rotate(-30.1deg) scale(0.52);
    }

    56.25% {
        transform: translate(650.6px, 637.1px) rotate(-28.5deg) scale(0.52);
    }

    62.5% {
        transform: translate(621px, 652.8px) rotate(-27.3deg) scale(0.52);
    }

    68.75% {
        transform: translate(597.3px, 664.7px) rotate(-26.3deg) scale(0.52);
    }

    75% {
        transform: translate(579.4px, 673.4px) rotate(-25.6deg) scale(0.52);
    }

    81.25% {
        transform: translate(566.7px, 679.5px) rotate(-25.1deg) scale(0.52);
    }

    87.5% {
        transform: translate(558.5px, 683.3px) rotate(-24.8deg) scale(0.52);
    }

    93.75% {
        transform: translate(554.6px, 685.1px) rotate(-24.6deg) scale(0.52);
    }

    100% {
        transform: translate(553.6px, 685.6px) rotate(-24.6deg) scale(0.52);
    }
}

@keyframes heroTaxiFadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

.hero__road--pc .hero__taxi {
    /* CSSのtransformはSVGの transform 属性と原点の扱いが違う。
       view-box + 原点(0,0) にすると属性のときと同じ座標系になり、
       キーフレームにHTMLと同じ数値をそのまま書ける */
    transform-box: view-box;
    transform-origin: 0 0;
    /* 出発点は上端のもや（.hero__road のマスク）の中なので、車は霞から現れる */
    animation:
        heroTaxiDriveIn 1.5s linear 0.2s both,
        heroTaxiFadeIn 0.3s linear 0.2s both;
}

/* 2. 道標が上から落ちてくる。跳ね返りは板が地面を打ってから2回だけ */
@keyframes heroSignDrop {
    0% {
        transform: translateY(-210px);
        animation-timing-function: cubic-bezier(0.55, 0, 0.85, 0.25);
    }

    70% {
        transform: translateY(0);
        animation-timing-function: cubic-bezier(0.2, 0, 0.35, 1);
    }

    84% {
        transform: translateY(-14px);
        animation-timing-function: cubic-bezier(0.6, 0, 0.9, 0.35);
    }

    94% {
        transform: translateY(0);
        animation-timing-function: cubic-bezier(0.2, 0, 0.35, 1);
    }

    97% {
        transform: translateY(-4px);
    }

    100% {
        transform: translateY(0);
    }
}

@keyframes heroSignFadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

/* 影は板が着地するころに合わせて出す */
@keyframes heroSignShadowIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 0.16;
    }
}

.hero__road--pc .hero__signpost-drop {
    animation:
        heroSignDrop 0.8s linear both,
        heroSignFadeIn 0.22s linear both;
}

.hero__road--pc .hero__signpost-shadow {
    animation: heroSignShadowIn 0.25s linear both;
}

/* 車が止まりきる少し前から落としはじめて、間があかないようにする */
.hero__road--pc .hero__signpost--care .hero__signpost-drop {
    animation-delay: 1.5s;
}

.hero__road--pc .hero__signpost--care .hero__signpost-shadow {
    /* 落下0.8sのうち7割で着地する（1.5 + 0.8 × 0.7 = 2.06s） */
    animation-delay: 1.95s;
}

.hero__road--pc .hero__signpost--web .hero__signpost-drop {
    animation-delay: 1.8s;
}

.hero__road--pc .hero__signpost--web .hero__signpost-shadow {
    animation-delay: 2.25s;
}

/* 動きを減らす設定のときは、最初から出来上がった姿で置く */
@media (prefers-reduced-motion: reduce) {

    .hero__road--pc .hero__taxi,
    .hero__road--pc .hero__signpost-drop,
    .hero__road--pc .hero__signpost-shadow {
        animation: none;
    }
}

.hero__inner {
    display: grid;
    grid-template-columns: 1fr;
    gap: 60px;
    align-items: center;
    position: relative;
    z-index: 10;
}

/* FVは1カラム。右側の無料相談フォームを撤去したため、全幅でテキストのみを置く */

.hero__content {
    max-width: 640px;
    /* FVの塊（キャッチ〜お問い合わせボタン）を、緑地の中央よりわずかに上へ置く。
       align-items:center のままだと道の分岐点と重心が下に沈んで見えるため、
       レイアウトの高さは変えずに位置だけ持ち上げる */
    position: relative;
    top: -20px;
}

@media (min-width: 1200px) {
    .hero__content {
        /* 8マスのキャッチが原寸(最大80px×8+gap)で収まる幅 */
        max-width: 720px;
    }
}

/* PC(1351px〜)は上下の余白が広いぶん、持ち上げ量も少し大きくする */
@media (min-width: 1351px) {
    .hero__content {
        top: -32px;
    }
}

/* Hero title and description */
.hero__title {
    font-size: clamp(2rem, 1.5rem + 3vw, 4.5rem);
    line-height: 1.3;
    margin-bottom: 32px;
    color: var(--color-white);
    letter-spacing: 0.03em;
    /* Increased from -0.01em */
}

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

/* 緑背景のため、FV内の見出し・装飾は白に */
.hero .hero__title,
.hero .text-primary {
    color: var(--color-white);
}

/* しゃぼん玉風タイトル：1文字ずつ丸い円で囲む */
.hero__title--bubbles {
    font-size: clamp(1.4rem, 1rem + 1.8vw, 2.6rem);
    letter-spacing: 0;
    line-height: 1.5;
}

.hero__title--bubbles .bubble {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.95em;
    height: 1.95em;
    margin: 0.02em;
    border-radius: 50%;
    color: #333;
    background-color: var(--color-white);
}

/* キャッチコピー（dual-life風・横書き／ゴシック） */
.hero__catch {
    writing-mode: horizontal-tb;
    font-family: var(--font-family-heading);
    font-weight: 700;
    color: var(--color-white);
    /* PCで64px。狭い画面では2rem(32px)まで落として、
       「一本から二本へ。」の8文字が必ず1行に収まるようにしている */
    font-size: clamp(2rem, 1.2rem + 3.6vw, 4rem);
    /* 64pxの見出しは既定の字間だと窮屈に見えるのであける。
       原稿用紙のマス組みだった頃は 0.16em で、そこまでは広げない */
    letter-spacing: 0.12em;
    line-height: 1.3;
    margin: 0 0 36px;
}

.hero__catch-line {
    display: block;
}

/* 2行の間。行送り(line-height)だけだと詰まって見えるので一拍だけあける。
   0.5emでは離れすぎて2行が別々の見出しに見え、0.3emでも2行が離れて見えたため
   0.14emまで詰めた。line-height 1.3 と合わせて行送りの合計は 1.44em */
.hero__catch-line + .hero__catch-line {
    margin-top: 0.14em;
}

/* SP：FV全体を画面内に収める */
@media (max-width: 767px) {
    .hero__catch {
        line-height: 1.3;
        /* 見出しの塊と説明文の塊をしっかり分ける */
        margin-bottom: 24px;
    }

    /* 2行が窮屈に見えたので一拍だけ広げる。PC(0.14em)ほどは離さない */
    .hero__catch-line + .hero__catch-line {
        margin-top: 8px;
    }
}

/* サービス名（キャッチコピーの補足・小さく） */
.hero__service {
    font-size: clamp(1rem, 0.9rem + 0.5vw, 1.25rem);
    font-weight: 700;
    color: var(--color-white);
    letter-spacing: 0.12em;
    line-height: 1.6;
    margin-bottom: 16px;
    display: inline-flex;
    align-items: center;
    gap: 0.6em;
}

/* 先頭に短いアクセントバー */
.hero__service::before {
    content: '';
    width: 28px;
    height: 2px;
    background-color: rgba(255, 255, 255, 0.7);
}

.hero__desc {
    font-size: 17px;
    /* 緑地の上。地の文だけ白を少し落として、下の強調2つを純白で立たせる */
    color: rgba(255, 255, 255, 0.9);
    line-height: 2;
    margin-bottom: 40px;
}

/* PCは1px上げて18px。料金・ご利用の流れ・FAQのリード文（.price__lead ほか）と
   同じ切り替え幅・同じ字送りに揃える。SPは17pxのまま */
@media (min-width: 768px) {
    .hero__desc {
        font-size: 18px;
    }
}

/* 本文中の強調（参考サイト風に一部だけ大きく・太く） */
.hero__desc-em {
    font-size: 1em;
    font-weight: 700;
    color: var(--color-white);
}

/* Studio エキスパート認定ロゴ。
   元画像は上下に透明の余白を持っていて、実際のロゴは canvas 高の 61% しかない。
   つまり指定した height の6割強しか目視のサイズにならない点に注意 */
.hero__experts {
    display: flex;
    margin-top: -20px;
    margin-bottom: 32px;
}

/* 白い角丸の下敷きは廃止。ロゴを緑地に直接置く。
   height は canvas の高さ。実際のロゴはその61%しか占めないので、
   44px 指定でも目視のロゴ高さは27px前後にしかならない */
.hero__experts img {
    height: 44px;
    width: auto;
    display: block;
}

.hero__cta {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
}

@media (max-width: 576px) {
    .hero__cta {
        flex-direction: column;
        gap: 0;
    }

    .btn--hero {
        width: 100%;
        margin-bottom: 1rem;
    }
}

.btn--hero {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    height: 56px;
    padding: 0 40px;
    border-radius: 100px;
    font-weight: 700;
    font-size: 1rem;
    transition: all var(--transition-normal);
    color: var(--color-white);
    min-width: 260px;
}

.btn--hero-contact {
    background-color: var(--color-accent-orange);
    box-shadow: 0 10px 20px rgba(255, 142, 63, 0.2);
}

.btn--hero-contact__icon {
    display: flex;
    align-items: center;
    flex-shrink: 0;
}

.btn--hero-contact:hover {
    background-color: #ff7d26;
    transform: translateY(-3px);
    box-shadow: 0 15px 30px rgba(255, 142, 63, 0.3);
}

.btn--hero .btn-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.2);
}

/* Hero Visual（左カラム内のイラスト） */
.hero__visual {
    position: relative;
    width: 100%;
    margin-top: 32px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    z-index: 5;
}

/* SPでは縦長になりすぎるためフォームを優先して非表示 */
@media (max-width: 991px) {
    .hero__visual {
        display: none;
    }
}

/* 白背景イラストを丸みのある白カードとして見せる */
.hero__main-visual {
    width: 300px;
    max-width: 80%;
    height: auto;
    background-color: var(--color-white);
    border-radius: 20px;
    padding: 12px;
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.18);
}

/* FV 資料ダウンロードフォーム（白いカード / Carely風） */
.hero-form-card {
    position: relative;
    width: 100%;
    max-width: 460px;
    margin: 0 auto;
    background: var(--color-accent-orange);
    border-radius: 18px;
    padding: 28px 16px 18px;
    border: 2px solid #000;
    box-shadow: 0 24px 55px rgba(0, 0, 0, 0.25);
}

/* スマホFV用CTAボタン：PC（〜768px以上）では非表示 */
.hero__mobile-cta {
    display: none;
}

/* 資料を読むスタッフアイコン */
.hero-form-card__icon {
    position: absolute;
    top: -100px;
    right: -20px;
    width: 180px;
    height: auto;
    z-index: 5;
    pointer-events: none;
    filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.15));
}

@media (max-width: 768px) {
    .hero-form-card__icon {
        width: 128px;
        top: -72px;
        right: -8px;
    }
}

/* スマホ：フォームカードの横幅を広げる（左右の余白を詰めて入力欄を広く） */
@media (max-width: 540px) {
    .hero-form-card {
        /* コンテナ左右パディング分を相殺してカードを画面いっぱい寄りに */
        margin-inline: calc(var(--container-padding) * -0.5);
        padding-left: 12px;
        padding-right: 12px;
    }

    .hero-form-card__paper {
        padding: 18px 16px;
    }
}

/* クリップボードの金具 */
.hero-form-card__clip {
    position: absolute;
    top: -16px;
    left: 50%;
    transform: translateX(-50%);
    width: 96px;
    height: 30px;
    background: linear-gradient(#f2f2f2, #c7c7c7);
    border: 2px solid #000;
    border-radius: 9px;
    z-index: 4;
}

.hero-form-card__clip::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 42px;
    height: 7px;
    border-radius: 4px;
    background: rgba(0, 0, 0, 0.2);
}

/* 記録用紙 */
.hero-form-card__paper {
    position: relative;
    background: var(--color-white);
    border-radius: 4px;
    padding: 30px 26px;
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - 28px), calc(100% - 28px) 100%, 0 100%);
}

/* 折れたページの角 */
.hero-form-card__paper::after {
    content: "";
    position: absolute;
    right: 0;
    bottom: 0;
    width: 28px;
    height: 28px;
    background: linear-gradient(135deg, #d6d6d6, #f3f3f3);
    clip-path: polygon(100% 0, 100% 100%, 0 100%);
}

.hero-form-card__head {
    position: relative;
    text-align: center;
    margin-bottom: 24px;
    padding: 0 56px 18px;
    border-bottom: 2px dashed #d0d0d0;
}

.hero-form-card__title {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--color-gray-800);
    line-height: 1.3;
}

.hero-form-card__sub {
    display: block;
    font-size: 1rem;
    font-weight: 700;
    margin-top: 4px;
}

.hero-form-card__badge {
    position: absolute;
    top: -2px;
    right: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 58px;
    height: 58px;
    border-radius: 50%;
    background-color: var(--color-accent-orange);
    color: var(--color-white);
    font-size: 0.82rem;
    font-weight: 700;
    line-height: 1.25;
}

.hero-form {
    padding: 0;
}

.hero-form__row {
    margin-bottom: 18px;
}

.hero-form__row label {
    display: block;
    font-size: 0.92rem;
    font-weight: 700;
    color: var(--color-gray-800);
    margin-bottom: 8px;
}

.hero-form__row input,
.hero-form__row textarea {
    width: 100%;
    padding: 15px 16px;
    border: 1px solid var(--color-gray-200);
    border-radius: 4px;
    background-color: #fff;
    box-shadow: 0 0 0 4px rgba(51, 51, 51, 0.03);
    font-size: 1rem;
    font-family: inherit;
    color: var(--color-gray-800);
    transition: border-color var(--transition-normal), box-shadow var(--transition-normal);
}

.hero-form__row textarea {
    resize: vertical;
    min-height: 84px;
    line-height: 1.6;
}

.hero-form__row input::placeholder,
.hero-form__row textarea::placeholder {
    color: #b5b5b5;
}

.hero-form__row input:focus,
.hero-form__row textarea:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 4px rgba(98, 184, 80, 0.14);
}

.hero-form__btn {
    width: 100%;
    margin-top: 10px;
    padding: 19px;
    background-color: #000;
    color: var(--color-white);
    border: none;
    border-radius: 10px;
    font-size: 1.15rem;
    font-weight: 700;
    font-family: inherit;
    cursor: pointer;
    transition: all var(--transition-normal);
}

.hero-form__btn:hover {
    background-color: #222;
    transform: translateY(-2px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.25);
}

.hero-form__btn.is-submitting {
    opacity: 0.7;
    pointer-events: none;
}

.hero-form__privacy {
    text-align: center;
    font-size: 0.78rem;
    color: var(--color-text-muted);
    margin: 4px 0 16px;
}

.hero-form__privacy a {
    color: var(--color-primary);
    text-decoration: underline;
}

.hero-form__note {
    text-align: center;
    font-size: 0.76rem;
    color: var(--color-text-muted);
    margin-top: 14px;
}

/* ===== SP：FV全体を1画面に収めるためのコンパクト調整 =====
   （ベースのフォーム指定より後に置くことで確実に上書きする） */
@media (max-width: 767px) {
    /* PCの強制改行を解除し、画面幅で自然に折り返す（横はみ出し防止） */
    .pc-br {
        display: none;
    }

    .hero__desc {
        font-size: 15px;
        /* 行間を広げて読みやすく（説明文の塊としてまとまりを持たせる） */
        line-height: 1.8;
        margin-bottom: 0;
    }

    /* SPは .hero__desc の下マージンが0なので、PC用の -20px のままだと
       ロゴが説明文の最終行に食い込む。白い下敷きも無くなったので正の間隔に戻す */
    .hero__experts {
        margin-top: 14px;
        margin-bottom: 26px;
    }

    /* SPは説明文が16pxまで下がるので、ロゴもそれに合わせて一段落とす
       （canvas 36px ＝ 目視のロゴ高さ22px前後） */
    .hero__experts img {
        height: 36px;
    }

    /* SPでは強調を控えめにして横幅のはみ出しを防ぐ */
    /* スマホFVはフォーム実体を非表示にし、CTAボタン1つに集約 */
    .hero-form-card {
        display: none;
    }

    .hero__mobile-cta {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        width: 100%;
        max-width: 420px;
        margin: 22px auto 0;
        padding: 16px 18px;
        background: var(--color-accent-orange);
        color: #fff;
        font-size: 1.08rem;
        font-weight: 700;
        text-decoration: none;
        border-radius: 12px;
        box-shadow: 0 10px 24px rgba(0, 0, 0, 0.22);
    }

    .hero__mobile-cta-icon {
        display: inline-flex;
        transition: transform 0.2s ease;
    }

    .hero__mobile-cta:active .hero__mobile-cta-icon {
        transform: translateX(3px);
    }

    .hero-form-card__paper {
        padding: 16px 16px;
    }

    .hero-form-card__head {
        margin-bottom: 12px;
        padding: 0 44px 10px;
    }

    .hero-form-card__title {
        font-size: 1.15rem;
    }

    .hero-form-card__sub {
        font-size: 0.85rem;
        margin-top: 2px;
    }

    .hero-form-card__badge {
        width: 46px;
        height: 46px;
        font-size: 0.7rem;
    }

    .hero-form__row {
        margin-bottom: 9px;
    }

    .hero-form__row label {
        font-size: 0.83rem;
        margin-bottom: 4px;
    }

    .hero-form__row input,
    .hero-form__row textarea {
        /* iOSのフォーカス時ズーム回避のため16px(1rem)は維持、余白だけ圧縮 */
        padding: 10px 13px;
        border-radius: 4px;
    }

    .hero-form__btn {
        padding: 12px;
        font-size: 1.02rem;
        margin-top: 2px;
        border-radius: 8px;
    }

    .hero-form__privacy {
        font-size: 0.7rem;
        margin: 3px 0 8px;
    }

    .hero-form__note {
        font-size: 0.7rem;
        margin-top: 6px;
    }
}

/* PC(1200px〜)：フォーム撤去に伴い2カラム指定は廃止。キャッチは原寸のまま表示する */

/* Background Mesh and Blurs */
.hero__bg-mesh {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image:
        repeating-linear-gradient(135deg,
            rgba(255, 255, 255, 0.13) 0,
            rgba(255, 255, 255, 0.13) 2px,
            transparent 2px,
            transparent 13px),
        radial-gradient(at 100% 0%, rgba(98, 184, 80, 0.05) 0px, transparent 50%),
        radial-gradient(at 0% 100%, rgba(255, 142, 63, 0.05) 0px, transparent 50%);
    pointer-events: none;
    z-index: 1;
}

/* Curved Solid Background（緑ベタ背景にしたため非表示） */
.hero__bg-curve {
    display: none;
    position: absolute;
    top: 0;
    right: 0;
    width: 45%;
    height: 100%;
    /* Outer layer (Light Green to Medium Green) */
    background: linear-gradient(135deg, var(--color-primary-light) 0%, #a2d693 100%);
    border-top-left-radius: 400px;
    border-bottom-left-radius: 100px;
    z-index: 0;
    overflow: hidden;
}

.hero__bg-curve::before,
.hero__bg-curve::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    height: 100%;
    border-top-left-radius: 400px;
    border-bottom-left-radius: 100px;
}

.hero__bg-curve::before {
    width: 85%;
    /* Middle layer (Medium Green to Stronger Green) */
    background: linear-gradient(135deg, #a2d693 0%, #7ad66b 100%);
    z-index: 1;
}

.hero__bg-curve::after {
    width: 70%;
    /* Inner layer (Stronger Green to Primary Green) */
    background: linear-gradient(135deg, #7ad66b 0%, var(--color-primary) 100%);
    z-index: 2;
}

@media (max-width: 991px) {
    .hero__bg-curve {
        width: 100%;
        height: 55%;
        top: auto;
        bottom: 0;
        border-top-left-radius: 50%;
        border-top-right-radius: 50%;
        border-bottom-left-radius: 0;
    }

    .hero__bg-curve::before,
    .hero__bg-curve::after {
        width: 100%;
        top: auto;
        bottom: 0;
        border-top-left-radius: 50%;
        border-top-right-radius: 50%;
        border-bottom-left-radius: 0;
    }

    .hero__bg-curve::before {
        height: 85%;
    }

    .hero__bg-curve::after {
        height: 70%;
    }
}

/* Scroll Indicator */
.hero__scroll {
    position: absolute;
    left: 40px;
    bottom: 40px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    z-index: 10;
    color: var(--color-white);
    text-decoration: none;
    transition: color var(--transition-normal), opacity var(--transition-normal);
}

.hero__scroll:hover {
    opacity: 0.7;
}

@media (max-width: 767px) {
    .hero__scroll {
        display: none;
        /* Hide on mobile to save space */
    }
}

.hero__scroll-text {
    writing-mode: vertical-rl;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.25em;
    font-family: var(--font-family-en);
}

.hero__scroll-line {
    width: 2px;
    height: 80px;
    background-color: rgba(255, 255, 255, 0.4);
    position: relative;
    overflow: hidden;
}

.hero__scroll-line::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--color-white);
    animation: scrollSlideDown 2.8s cubic-bezier(0.77, 0, 0.175, 1) infinite;
}

@keyframes scrollSlideDown {
    0% {
        transform: translateY(-100%);
    }

    60% {
        transform: translateY(100%);
    }

    100% {
        transform: translateY(100%);
    }
}

/* Base floating animation */
@keyframes floatLaptop {

    0%,
    100% {
        transform: translateY(0) rotate(0);
    }

    50% {
        transform: translateY(-20px) rotate(1deg);
    }
}

/* ==========================================================================
   Strengths
   ========================================================================== */
/* ==========================================================================
   サービスの強み — leapyのコーポレートサイト特徴セクションに準拠
   画像は画面端まで断ち切り、左右交互。テキストは中央寄せ枠の内側に配置。
   ========================================================================== */
/* セクション上下の余白を共通 .section より広めに確保 */
.strengths__lead {
    margin-top: 1.2rem;
    font-size: 15px;
    line-height: 1.9;
    color: var(--color-black);
}

@media (min-width: 768px) {
    .strengths__lead {
        font-size: 18px;
    }
}

/* 料金プラン・ご利用の流れ・よくある質問の h2 直下リード。
   .strengths__lead / .works__lead と同じ見え方に揃える */
.price__lead,
.flow__lead,
.faq__lead {
    width: 100%;
    margin-top: 1.2rem;
    font-size: 15px;
    line-height: 1.9;
    color: var(--color-black);
}

@media (min-width: 768px) {

    .price__lead,
    .flow__lead,
    .faq__lead {
        font-size: 18px;
    }
}

.strengths.section {
    /* 最大1440pxで頭打ち、それ以下の画面幅では横幅100%。
       はみ出し量の計算にも使うので変数化している */
    --strength-list-w: min(1440px, 100vw);
    /* セクションの左右余白。はみ出し量の計算にも使うので変数化 */
    --strength-pad: clamp(var(--container-padding), 4.5vw, 72px);
    padding-top: clamp(5rem, 3rem + 8vw, 10rem);
    padding-bottom: clamp(5rem, 3rem + 8vw, 10rem);
    /* 白のまま紙の質感を出す。前後の灰地セクションと同じ 256px のムラ
       （paper-grain.webp）を敷き、その上に紙色のベールを 70% かぶせて
       ムラだけを 30% の濃さに落としている（合成後 ≒ #faf9f7）。
       タイルの平均は #f2f2f2 なので、そのまま敷くと灰地セクションと同じ明度になる。
       疑似要素＋z-index:-1 で重ねるとセクション自身の背景色の裏に回って消えるため、
       背景プロパティ1枚に重ねる形にしてある。 */
    background-color: #fdfcf9;
    background-image:
        linear-gradient(rgba(253, 252, 249, 0.7), rgba(253, 252, 249, 0.7)),
        url('assets/paper-grain.webp');
    background-repeat: repeat, repeat;
    background-size: auto, 256px 256px;
}

.strength__list {
    display: flex;
    flex-direction: column;
    gap: 80px;
    margin-top: var(--space-lg);
    position: relative;
    z-index: 1;
    /* 画面端まで断ち切らず、サイト共通コンテナの内側に収める。
       画像は左右交互に寄るだけで、端にはくっつかない */
    max-width: var(--strength-list-w);
    margin-inline: auto;
    /* 1440px以下は横幅100%。左右余白だけ画面幅に応じて広げ、
       画像が画面端に寄りすぎないようにしている */
    padding-inline: var(--strength-pad);
}

.strength__item {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 1fr;
    gap: 0;
    align-items: center;
    /* 画像だけコンテナの外へはみ出させる量。
       画面端との間には最低80pxを残すので、端に寄りすぎない。
       広い画面ほど大きく寄り、1380px以下では0になる */
    --lean: clamp(0px,
        calc((100vw - var(--strength-list-w)) / 2 + var(--strength-pad)
            - clamp(80px, 5.5vw, 130px)),
        120px);
}

@media (min-width: 768px) {
    /* 画像 左45% ＋ テキスト 右55%。
       画像とテキストの間隔を空けつつ本文幅も確保するため 45:55 に振ってある */
    .strength__item {
        grid-template-columns: 0.9fr 1.1fr;
        gap: clamp(56px, 4.2vw, 80px);
    }

    .strength__body {
        padding: var(--space-lg) 0;
    }

    /* 反転：画像 右 ＋ テキスト 左。
       order で画像が第2カラムに入るので、45:55 の比も左右そのまま入れ替える。
       ここを 0.9fr 1.1fr のままにすると反転側だけ画像が広く・本文が狭くなる */
    .strength__item--reverse {
        grid-template-columns: 1.1fr 0.9fr;
    }

    /* 01・03は左へ、02・04は右へ。画像だけ画面端側へ寄せて、
       4項目が同じ枠に整列しないようにする */
    .strength__item:not(.strength__item--reverse) .strength__image {
        margin-left: calc(-1 * var(--lean));
    }

    .strength__item--reverse .strength__image {
        order: 2;
        margin-right: calc(-1 * var(--lean));
    }

    .strength__item--reverse .strength__body {
        order: 1;
        /* 反転側は本文を右詰めにして画像側へ寄せる。
           左詰めのままだと本文カラムの余りが画像との間に入り、間隔が広く見える */
        justify-content: flex-end;
    }
}

.strength__body {
    display: flex;
    align-items: center;
}

.strength__content {
    position: relative;
    width: 100%;
    max-width: clamp(560px, 40vw, 680px);
}

/* 番号＋短いラベル（leapyの editor-ttl-en 相当：下に短い下線アクセント） */
.strength__eyebrow {
    position: relative;
    display: flex;
    align-items: baseline;
    gap: 0.6em;
    line-height: 1;
    padding-bottom: 1rem;
    margin-bottom: 1.25rem;
}

.strength__eyebrow::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 28px;
    height: 2px;
    background-color: var(--color-primary);
}

.strength__num {
    font-family: var(--font-family-en);
    font-weight: 600;
    /* leapy editor-ttl-en と同値 */
    font-size: clamp(1.25rem, 2.0833vw, 2.5rem);
    line-height: 1;
    letter-spacing: 0.02em;
    color: var(--color-text-main);
}

.strength__eyebrow small {
    font-size: 0.9rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    color: var(--color-primary);
}

/* 英字ラベル＋番号（REASON 01）：福祉車両のイラストの側面パネルに文字を載せる。
   車体は装飾なので背景画像で敷き、文字はHTMLのまま（読み上げ・選択できる）。
   寸法はすべて em なので、--van-unit を変えれば車ごと文字が拡大縮小する。
   SVGは 258 x 130（軽バン・ワンボックス）、文字を置くパネル中心は (114, 76) = 横44.2% / 縦58.5%。
   窓は3枚だがベルトラインを高く取り、下half をまるごと文字の場所にしてある。 */
.strength__eyebrow--en {
    --van-unit: 6.8px;
    font-size: var(--van-unit);
    box-sizing: border-box;
    flex-direction: column;
    width: 25.8em;
    height: 13em;
    /* 上6.15em / 下3.05em / 左6.9em / 右9.9em。窓の下端(SVG y=54)〜車体の下端(y=104)の
       帯の中心 y=79 に、文字の「見た目の中心」が来る値。数字は下に伸びない字形で
       ボックス中心より約1.7ユニット上に見えるため、そのぶんを足して下げている */
    padding: 6.15em 9.9em 3.05em 6.9em;
    background: url('assets/reason-van.svg') no-repeat center / contain;
    align-items: center;
    justify-content: center;
    gap: 0;
    line-height: 1;
    margin-bottom: 1rem;
}

.strength__eyebrow--en::after {
    display: none;
}

.strength__eyebrow--en .strength__label {
    font-family: var(--font-family-en);
    font-weight: 700;
    font-size: 1.2em;
    letter-spacing: 0.1em;
    color: var(--color-primary);
}

/* 番号だけは黒に統一（ラベルの英字は緑のまま） */
.strength__eyebrow--en .strength__num {
    font-size: 2.6em;
    font-weight: 800;
    color: var(--color-text-main);
}

/* 見出し（leapyの editor-ttl 相当：PC 2rem / SP 1.35rem） */
.strength__title {
    font-size: clamp(1.35rem, 1.05rem + 1.4vw, 2rem);
    line-height: 1.55;
    letter-spacing: 0.04em;
    font-weight: 700;
    margin-bottom: 1.25rem;
}

/* 本文（16px / line-height 2） */
.strength__title-em {
    color: var(--color-primary-dark);
}

.strength__desc {
    font-size: 1rem;
    color: var(--color-text-main);
    line-height: 2;
}

.strength__desc-em {
    font-weight: 700;
}

.strength__note {
    margin-top: 0.85rem;
    font-size: 0.8125rem;
    line-height: 1.8;
    color: var(--color-text-muted);
}

@media (max-width: 767px) {
    .strength__title {
        font-size: 20px;
        line-height: 1.4;
        margin-bottom: 1rem;
    }

    .strength__desc {
        font-size: 15px;
        line-height: 1.9;
    }
}

/* 写真は横長の3:2。理由02・04のカードは中身の行数で高さが決まるので、
   4枚をきっちり同じ形には揃えず、写真＝横長／カード＝ほぼ正方形の対比にしている */
.strength__image {
    position: relative;
    overflow: hidden;
    background-color: var(--color-gray-50);
    aspect-ratio: 3 / 2;
    /* 制作メンバーのカード（.member__card）と同じ黒枠＋角丸＋右下へずらした影で揃える */
    border: 2px solid #000;
    border-radius: 20px;
    box-shadow: 0.4rem 0.4rem 0 rgba(0, 0, 0, 0.08);
}

.strength__image img,
.strength__video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--transition-slow);
    /* 画像や動画のぼやけ(画質低下)を防ぐための指定 */
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    transform: translateZ(0);
}


/* スマホ：画像を上に画面幅いっぱい(3:2)、テキストを下に積む */
@media (max-width: 767px) {
    .strength__image {
        aspect-ratio: 3 / 2;
        min-height: 0;
    }

    /* 写真とタクシーのバッジの間隔。--space-sm(約12px)では近すぎる */
    .strength__body {
        padding: 1.5rem 0 0;
    }

    .strength__content {
        max-width: none;
    }

    /* スマホ：画像〜REASON 01ラベル〜タイトルの間隔を詰めて一体感を出す */
    .strength__eyebrow--en {
        --van-unit: 4.8px;
        margin-bottom: 1rem;
    }

    /* 4つの理由の間隔。PCの80pxは縦積みのスマホでは空きすぎる */
    .strength__list {
        gap: 56px;
    }
}

/* 画像をやめHTMLカードで表示（鮮明・SEO・読み上げに有利）。理由02＝.surveycard／理由03＝.serpcard */
/* .lawcard（許可番号・認可運賃などの掲載項目4群）は2026-08-23の理由02差し替えで未使用になった。
   道路運送法の表示対応は理由02の本文1文に残してある。図版として戻すときに再利用する */
.strength__image--card {
    aspect-ratio: auto;
    background-color: var(--color-primary-light);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: clamp(20px, 3vw, 40px);
}

/* カード枠の余白。768〜1279pxは枠が中身より小さくなるので高さは中身なりに任せる */
@media (min-width: 768px) {
    .strength__image--card {
        padding: clamp(14px, 1.4vw, 22px);
    }
}


.lawcard {
    width: 100%;
    background-color: #fff;
    border-radius: var(--radius-md);
    padding: clamp(20px, 2.4vw, 32px);
    box-shadow: 0 12px 32px rgba(74, 140, 61, 0.10);
    display: flex;
    flex-direction: column;
    gap: clamp(16px, 1.8vw, 24px);
}

.lawcard__head {
    display: flex;
    align-items: center;
    gap: 0.5em;
    background-color: var(--color-primary);
    color: #fff;
    font-weight: 700;
    font-size: clamp(0.95rem, 0.86rem + 0.4vw, 1.1rem);
    line-height: 1.4;
    letter-spacing: 0.02em;
    padding: 0.5em 0.85em;
    border-radius: var(--radius-sm);
    margin-bottom: 0.75rem;
}

.lawcard__num {
    font-weight: 700;
}

.lawcard__list {
    list-style: none;
    margin: 0;
    padding: 0 0 0 0.25rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.lawcard__list li {
    position: relative;
    padding-left: 1rem;
    font-size: clamp(0.82rem, 0.78rem + 0.2vw, 0.95rem);
    line-height: 1.7;
    color: var(--color-text-main);
}

.lawcard__list li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.62em;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background-color: var(--color-primary);
}

.lawcard__list b {
    font-weight: 700;
}

@media (max-width: 767px) {
    .strength__image--card {
        padding: var(--container-padding);
    }
}


/* 全国278社の実測（掲載率）。数値は brief.md「8. サイト構成の型」が正本。
   母数は278社ではなく構成を分類できた177社なので、注記で必ず書き分ける。
   2026-08-23に理由02（278社の枠）ごと廃止したため現在は未使用。278社の話はセクションリードに残っている */
.surveycard {
    width: 100%;
    max-width: 460px;
    margin: 0 auto;
    background-color: #fff;
    border-radius: var(--radius-md);
    padding: clamp(20px, 2.4vw, 32px);
    box-shadow: 0 12px 32px rgba(74, 140, 61, 0.10);
}

.surveycard__head {
    background-color: var(--color-primary);
    color: #fff;
    border-radius: var(--radius-sm);
    padding: 0.7em 0.9em;
    font-family: var(--font-family-heading);
    font-weight: 700;
    font-size: clamp(1.05rem, 0.95rem + 0.45vw, 1.25rem);
    line-height: 1.35;
    letter-spacing: 0.02em;
}

.surveycard__head-sub {
    display: block;
    font-size: 0.68em;
    font-weight: 500;
    letter-spacing: 0.06em;
    opacity: 0.9;
    margin-bottom: 0.15em;
}

.surveycard__rows {
    margin: clamp(14px, 1.6vw, 20px) 0 0;
    padding: 0;
}

.surveycard__row {
    display: flex;
    align-items: center;
    gap: 0.8em;
    padding: 0.42em 0;
}

.surveycard__row dt {
    width: 8.5em;
    flex-shrink: 0;
    font-size: clamp(0.78rem, 0.75rem + 0.16vw, 0.87rem);
    line-height: 1.5;
    color: var(--color-text-main);
}

.surveycard__row dd {
    margin: 0;
    flex: 1;
    display: flex;
    align-items: center;
    gap: 0.6em;
}

.surveycard__row dd b {
    width: 2.6em;
    flex-shrink: 0;
    text-align: right;
    font-family: var(--font-family-en);
    font-weight: 700;
    font-size: 0.85rem;
    color: var(--color-gray-400);
}

.surveycard__bar {
    display: block;
    flex: 1;
    height: 10px;
    border-radius: var(--radius-full);
    background-color: var(--color-gray-100);
    position: relative;
    overflow: hidden;
}

.surveycard__bar::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: var(--rate, 0%);
    border-radius: var(--radius-full);
    background-color: var(--color-gray-200);
}

/* 掲載率が低い＝同業が抜かしている項目。ここだけ色を持たせて空きを示す */
.surveycard__row--gap dt {
    font-weight: 700;
    color: var(--color-primary-dark);
}

.surveycard__row--gap dd b {
    color: var(--color-primary-dark);
}

.surveycard__row--gap .surveycard__bar {
    background-color: var(--color-primary-light);
}

.surveycard__row--gap .surveycard__bar::before {
    background-color: var(--color-primary);
}

.surveycard__foot {
    display: flex;
    align-items: flex-start;
    gap: 0.6em;
    margin-top: clamp(14px, 1.6vw, 20px);
    padding: 0.75em 0.9em;
    background-color: var(--color-primary-light);
    border-radius: var(--radius-sm);
    font-size: clamp(0.78rem, 0.75rem + 0.16vw, 0.87rem);
    font-weight: 700;
    line-height: 1.6;
    color: var(--color-primary-dark);
}

.surveycard__foot-mark {
    flex-shrink: 0;
    width: 7px;
    height: 7px;
    margin-top: 0.55em;
    border-radius: 50%;
    background-color: var(--color-primary);
}

.surveycard__note {
    margin-top: 0.9em;
    text-align: right;
    font-size: 0.75rem;
    letter-spacing: 0.04em;
    color: var(--color-gray-400);
}

@media (max-width: 767px) {
    .surveycard__row dt {
        width: 7em;
    }
}


/* 理由05：サイトに設置するお問い合わせフォームの画面イメージ。
   空き枠管理・自動確定のシステムではないため「予約」と書かない（本文・ラベルとも「ご依頼」で統一） */
/* 理由04のフォーム図版。2026-08-23に assets/reason4.webp（実画面のモックアップ）へ差し替えたため未使用。
   図版としてHTMLカードに戻すときに再利用する */
.orderform {
    width: 100%;
    max-width: 420px;
    margin: 0 auto;
    background-color: #fff;
    border-radius: var(--radius-md);
    padding: clamp(18px, 1.8vw, 24px);
    box-shadow: 0 12px 32px rgba(74, 140, 61, 0.10);
}

.orderform__head {
    background-color: var(--color-primary);
    color: #fff;
    border-radius: var(--radius-sm);
    padding: 0.55em 0.9em;
    font-family: var(--font-family-heading);
    font-weight: 700;
    font-size: clamp(1rem, 0.92rem + 0.4vw, 1.18rem);
    line-height: 1.35;
    letter-spacing: 0.02em;
}

.orderform__head-sub {
    display: block;
    font-size: 0.68em;
    font-weight: 500;
    letter-spacing: 0.06em;
    opacity: 0.9;
    margin-bottom: 0.15em;
}

.orderform__rows {
    display: flex;
    flex-direction: column;
    gap: clamp(8px, 0.85vw, 10px);
    margin-top: clamp(11px, 1.1vw, 14px);
}

.orderform__label {
    font-size: 0.78rem;
    font-weight: 700;
    line-height: 1.5;
    color: var(--color-text-muted);
    margin-bottom: 0.25em;
}

.orderform__field {
    display: flex;
    flex-direction: column;
    gap: 0.4em;
    background-color: var(--color-gray-50);
    border: 1px solid var(--color-gray-200);
    border-radius: var(--radius-sm);
    padding: 0.5em 0.85em;
    font-size: clamp(0.82rem, 0.78rem + 0.2vw, 0.92rem);
    line-height: 1.5;
    color: var(--color-text-main);
}

/* 氏名・連絡先は事業者ごとに変わるためバーで置き、架空の個人情報を出さない */
.orderform__field--muted {
    padding-top: 0.95em;
    padding-bottom: 0.95em;
}

.orderform__bar {
    display: block;
    height: 8px;
    border-radius: var(--radius-full);
    background-color: var(--color-gray-200);
}

.orderform__bar--sm {
    width: 45%;
}

.orderform__bar--md {
    width: 72%;
}

.orderform__choices {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.4em;
}

.orderform__choices li {
    background-color: var(--color-gray-50);
    border: 1px solid var(--color-gray-200);
    border-radius: var(--radius-full);
    padding: 0.38em 0.85em;
    font-size: clamp(0.78rem, 0.75rem + 0.16vw, 0.87rem);
    line-height: 1.4;
    color: var(--color-text-muted);
}

.orderform__choices .is-selected {
    background-color: var(--color-primary-light);
    border-color: var(--color-primary);
    color: var(--color-primary-dark);
    font-weight: 700;
}

.orderform__submit {
    margin-top: clamp(12px, 1.2vw, 16px);
    background-color: var(--color-primary);
    color: #fff;
    border-radius: var(--radius-full);
    padding: 0.85em 1em;
    text-align: center;
    font-family: var(--font-family-heading);
    font-weight: 700;
    font-size: clamp(0.9rem, 0.85rem + 0.25vw, 1rem);
    line-height: 1.4;
}

/* 送信後に何が起きるかの注記。フォーム本体ではなく仕組みの説明なので色を分ける */
.orderform__foot {
    display: flex;
    align-items: flex-start;
    gap: 0.6em;
    margin-top: clamp(10px, 1vw, 13px);
    padding: 0.6em 0.85em;
    background-color: var(--color-primary-light);
    border-radius: var(--radius-sm);
    font-size: clamp(0.78rem, 0.75rem + 0.16vw, 0.87rem);
    font-weight: 700;
    line-height: 1.5;
    color: var(--color-primary-dark);
}

.orderform__foot-mark {
    flex-shrink: 0;
    width: 7px;
    height: 7px;
    margin-top: 0.55em;
    border-radius: 50%;
    background-color: var(--color-primary);
}

.orderform__note {
    margin-top: 0.6em;
    text-align: right;
    font-size: 0.75rem;
    letter-spacing: 0.04em;
    color: var(--color-gray-400);
}

/* ケアマネ向け料金表PDFの紙面イメージ（金額は事業者ごとに異なるためバーで表す）。
   2026-08-23に理由03を「検索に出る設計で制作」へ差し替えたため現在はどこからも使っていない。
   料金表PDFを別セクションで見せることになったときに再利用する */
.pricesheet {
    width: 100%;
    max-width: 440px;
    margin: 0 auto;
    background-color: #fff;
    border-radius: 4px;
    padding: clamp(20px, 2.4vw, 32px);
    box-shadow: 0 12px 32px rgba(74, 140, 61, 0.10);
}

.pricesheet__head {
    background-color: var(--color-primary);
    color: #fff;
    border-radius: var(--radius-sm);
    padding: 0.7em 0.9em;
    font-family: var(--font-family-heading);
    font-weight: 700;
    font-size: clamp(1.05rem, 0.95rem + 0.45vw, 1.25rem);
    line-height: 1.35;
    letter-spacing: 0.02em;
}

.pricesheet__head-sub {
    display: block;
    font-size: 0.68em;
    font-weight: 500;
    letter-spacing: 0.06em;
    opacity: 0.9;
    margin-bottom: 0.15em;
}

.pricesheet__rows {
    margin: clamp(14px, 1.6vw, 20px) 0 0;
    padding: 0;
}

.pricesheet__row {
    display: flex;
    align-items: baseline;
    gap: 0.75em;
    padding: 0.6em 0;
    border-bottom: 1px dotted var(--color-gray-200);
}

.pricesheet__row dt {
    font-size: clamp(0.82rem, 0.78rem + 0.2vw, 0.95rem);
    line-height: 1.6;
    color: var(--color-text-main);
    white-space: nowrap;
}

.pricesheet__row dd {
    margin: 0;
    flex: 1;
    display: flex;
    justify-content: flex-end;
}

.pricesheet__bar {
    display: block;
    height: 9px;
    border-radius: var(--radius-full);
    background-color: var(--color-gray-100);
}

.pricesheet__bar--sm {
    width: 52px;
}

.pricesheet__bar--md {
    width: 76px;
}

.pricesheet__bar--lg {
    width: 104px;
}

.pricesheet__foot {
    display: flex;
    align-items: center;
    gap: 0.75em;
    margin-top: clamp(14px, 1.6vw, 20px);
    padding: 0.7em 0.9em;
    background-color: var(--color-primary-light);
    border-radius: var(--radius-sm);
}

.pricesheet__foot-label {
    font-size: clamp(0.78rem, 0.74rem + 0.2vw, 0.88rem);
    font-weight: 700;
    color: var(--color-primary-dark);
    white-space: nowrap;
}

.pricesheet__foot .pricesheet__bar {
    background-color: #fff;
}

.pricesheet__note {
    margin-top: 0.9em;
    text-align: right;
    font-size: 0.75rem;
    letter-spacing: 0.04em;
    color: var(--color-gray-400);
}

@media (max-width: 767px) {
    .pricesheet__row dt {
        white-space: normal;
    }
}


/* 理由03：検索結果の表示イメージ（自社の1件だけ中身を出し、他社はグレーのバーで置く）。
   実在の検索結果ではないため、順位や社名は書かず .serpcard__note でイメージだと明記する */
/* 理由02の検索結果の図版。2026-08-23に assets/reason2.webp（実際の検索結果のスクリーンショット）へ
   差し替えたため未使用。図版としてHTMLカードに戻すときに再利用する */
.serpcard {
    width: 100%;
    max-width: 440px;
    margin: 0 auto;
    background-color: #fff;
    border-radius: var(--radius-md);
    padding: clamp(18px, 1.8vw, 24px);
    box-shadow: 0 12px 32px rgba(74, 140, 61, 0.10);
}

/* 検索窓 */
.serpcard__query {
    display: flex;
    align-items: center;
    gap: 0.6em;
    background-color: var(--color-gray-50);
    border: 1px solid var(--color-gray-200);
    border-radius: var(--radius-full);
    padding: 0.65em 1.1em;
}

.serpcard__query-icon {
    flex-shrink: 0;
    width: 15px;
    height: 15px;
    border: 2px solid var(--color-gray-400);
    border-radius: 50%;
    position: relative;
}

.serpcard__query-icon::after {
    content: "";
    position: absolute;
    right: -5px;
    bottom: -3px;
    width: 7px;
    height: 2px;
    border-radius: var(--radius-full);
    background-color: var(--color-gray-400);
    transform: rotate(45deg);
}

.serpcard__query-text {
    font-size: clamp(0.9rem, 0.84rem + 0.3vw, 1.02rem);
    font-weight: 700;
    line-height: 1.4;
    color: var(--color-text-main);
}

.serpcard__results {
    display: flex;
    flex-direction: column;
    gap: clamp(10px, 1vw, 14px);
    margin-top: clamp(12px, 1.2vw, 16px);
}

.serpcard__result {
    padding: clamp(10px, 1.1vw, 14px) clamp(13px, 1.5vw, 20px);
    border-radius: var(--radius-sm);
    background-color: var(--color-gray-50);
}

/* 自社の1件だけ色を持たせる */
.serpcard__result--own {
    position: relative;
    background-color: var(--color-primary-light);
    border: 2px solid var(--color-primary);
}

.serpcard__flag {
    display: inline-block;
    background-color: var(--color-primary);
    color: #fff;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    line-height: 1;
    padding: 0.45em 0.8em;
    border-radius: var(--radius-full);
    margin-bottom: 0.7em;
}

.serpcard__site {
    font-size: 0.78rem;
    line-height: 1.5;
    color: var(--color-primary-dark);
    margin-bottom: 0.35em;
}

.serpcard__site--muted {
    color: var(--color-gray-400);
    margin-bottom: 0.7em;
}

.serpcard__title {
    font-family: var(--font-family-heading);
    font-weight: 700;
    font-size: clamp(0.92rem, 0.86rem + 0.28vw, 1.05rem);
    line-height: 1.5;
    color: var(--color-text-main);
    margin-bottom: 0.4em;
}

.serpcard__snippet {
    font-size: clamp(0.78rem, 0.75rem + 0.16vw, 0.87rem);
    line-height: 1.7;
    color: var(--color-text-muted);
}

.serpcard__tags {
    list-style: none;
    margin: 0.8em 0 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.4em;
}

.serpcard__tags li {
    background-color: #fff;
    border: 1px solid var(--color-primary);
    color: var(--color-primary-dark);
    font-size: 0.72rem;
    font-weight: 700;
    line-height: 1;
    padding: 0.45em 0.7em;
    border-radius: var(--radius-full);
}

/* 他社の行は中身を書かずバーで置く */
.serpcard__bar {
    display: block;
    height: 9px;
    border-radius: var(--radius-full);
    background-color: var(--color-gray-100);
}

.serpcard__bar + .serpcard__bar {
    margin-top: 0.55em;
}

.serpcard__bar--sm {
    width: 45%;
}

.serpcard__bar--md {
    width: 68%;
}

.serpcard__bar--lg {
    width: 88%;
}

.serpcard__note {
    margin-top: 0.9em;
    text-align: right;
    font-size: 0.75rem;
    letter-spacing: 0.04em;
    color: var(--color-gray-400);
}

/* Hover removed by user request (only clickable items) */

/* ==========================================================================
   Price
   ========================================================================== */
/* 緑のグラデーション地＋ドット。上下の境目は幅いっぱいの大きな楕円で丸く抜き、
   前後の灰地セクションへゆるいアーチでつなぐ（直線の黒罫は廃止）。
   四隅にブランドグリーンのやわらかい光を置いて真ん中を明るく抜き、
   白いカードが浮いて見えるようにしている。
   （bg-gray / pattern-dots-gray を上書き） */
.price.section {
    /* 上下の境目の反り（＝中央と左右の端の高さの差）。この値だけ変えれば丸みが決まる。
       楕円の縦半径 --price-arc-radius はここから自動で決まる（下の ::before を参照） */
    --price-arc: clamp(44px, 11.5vw, 172px);
    --price-arc-radius: calc(var(--price-arc) * 7.46);
    padding-top: calc(var(--space-xxl) + var(--price-arc) * 0.45);
    /* 下の弧は中央が下へ膨らむぶん、左右では緑がこの反りぶん早く終わる。
       保守プラン表の下が詰まって見えないよう、下だけ反りの分をまるごと足す */
    padding-bottom: calc(var(--space-xxl) + var(--price-arc) * 1.2);
    border: 0;
    /* セクションの地（灰）は下の ::after へ逃がしてある。
       ここで背景を持たせると、制作メンバーの道路が境目で切り落とされてしまう */
    background-color: transparent;
    background-image: none;
}

/* セクションの地。前後（制作メンバー・制作実績）と同じ灰地で、アーチの外側に残る
   左右の欠けがそのまま前後のセクションへつながる。
   z-index:-1 でセクションの背面に敷くのは、直前の「制作メンバー」から下りてくる
   道路（.member__road）がこの灰の上を通って、緑のアーチの下へもぐり込めるようにするため。
   ここを background-color に戻すと、道路が境目でぶつ切りになる。 */
.price.section::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background-color: #f2f2f2;
    background-image: url('assets/paper-grain.webp');
    background-repeat: repeat;
    background-size: 256px 256px;
}

/* 緑のグラデーション地。上下の境目を幅いっぱいの大きな楕円で丸く抜き、
   前後の灰地セクションへゆるいアーチでつなぐ（直線の黒罫は廃止）。
   四隅にブランドグリーンのやわらかい光を置いて真ん中（＝カードが並ぶ帯）を明るく抜き、
   白いカードが浮いて見えるようにしている。 */
/* 画面幅の2倍に広げた層を左右へはみ出させ、その大きな楕円の「まん中だけ」を見せる。
   セクション幅ちょうどの楕円だと左右の端で立ち上がりが急になり、ドーム型に見えてしまう。
   楕円の縦半径は「見せたい反り（--price-arc）」の約7.5倍（端の落差 = R×(1-cos30°)）。
   はみ出した左右は .overflow-hidden で切り落とす。 */
.price.section::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: -50%;
    width: 200%;
    z-index: 0;
    pointer-events: none;
    border-radius: 50% / var(--price-arc-radius);
    background-color: var(--color-primary);
    background-image:
        url('assets/paper-grain-overlay.webp'),
        radial-gradient(21% 34% at 21% 16%, rgba(255, 255, 255, 0.22), rgba(255, 255, 255, 0) 70%),
        radial-gradient(23% 36% at 79% 62%, rgba(46, 107, 79, 0.20), rgba(46, 107, 79, 0) 70%),
        radial-gradient(25% 30% at 50% 105%, rgba(46, 107, 79, 0.16), rgba(46, 107, 79, 0) 70%),
        linear-gradient(174deg, #76c665 0%, #62b850 45%, #52a442 100%);
    background-size: 256px 256px, auto, auto, auto, auto;
    background-repeat: repeat, no-repeat, no-repeat, no-repeat, no-repeat;
    /* 紙目は中間グレー基準のタイル（paper-grain-overlay.webp）を soft-light で重ねる。
       灰地セクションの paper-grain.webp と同じムラを、色を変えずに緑の上へ乗せている */
    background-blend-mode: soft-light, normal, normal, normal, normal;
}

/* 中身はグラデーション層より前に置く */
.price.section > .container {
    position: relative;
    z-index: 1;
}

/* 地が問い合わせセクションと同じブランドグリーンになったので、
   地の上に直に載る文字・記号は白側へ振る（カードと表の中身はそのまま） */
.price.section .section-en,
.price.section .section-title,
.price.section .subsection-title,
.price.section .price__lead {
    color: var(--color-white);
}

.price.section .icon-dashed {
    background-image: linear-gradient(to right, var(--color-white) 50%, transparent 50%);
}

.price.section .price__plus-text,
.price.section .price__note-item {
    color: rgba(255, 255, 255, 0.92);
}

.price.section .price__note-mark {
    color: #ffd0a8;
}

/* 表のヘッダー帯。緑地の上に緑の表を置くと濃さでしか区別できず沈むので、
   3つの表（制作プランの内容・オプション・保守プラン）とも無彩色にする。
   基本は薄いグレー地＋濃い文字。濃いグレーは保守プランの「保守管理あり」列にだけ使い、
   どちらを選んでほしいかがひと目で分かるようにしている */
.price.section {
    --table-head: #f2f3f5;
    --table-head-text: #333333;
    /* 推奨列はサイトのベースグリーンを薄く敷く。「保守管理なし」列(--table-head)は
       ごく薄いグレーなので、色味の違いで推奨列と分かる */
    --table-reco-bg: #dfeed8;
    --table-reco-border: #c6dfbb;
    --table-reco-text: #333333;
}

.price.section .maintenance__table th,
.price.section .maintenance__table .col-plan-1,
.price.section .maintenance__table .col-plan-2,
.price.section .maintenance__table .col-plan-3 {
    background-color: var(--table-head);
    color: var(--table-head-text);
}

.price.section .maintenance__table th .plan-price {
    color: #2f3540;
}

.price.section .maintenance__table th .plan-desc {
    color: var(--color-text-muted);
}

/* 保守プランの「保守管理あり」列は、薄い温かみのあるグレー地＋黒文字 */
.price.section .maintenance__table .col-plan--reco {
    background-color: var(--table-reco-bg);
    color: var(--table-reco-text);
}

.price.section .maintenance__table .col-plan--reco .plan-price {
    color: var(--table-reco-text);
}

.price.section .maintenance__table .col-plan--reco .plan-desc {
    color: var(--color-text-muted);
}

/* 推奨列の本文側もうっすら同系の地を敷く */
.price.section .maintenance__table--monthly tbody td:last-child {
    background-color: rgba(98, 184, 80, 0.07);
}

/* 「おすすめ」バッジは薄緑の地に乗るので、ベースグリーンで置く */
.price.section .plan-reco {
    background-color: var(--color-primary);
}

/* 「制作プラン｜初回のみ」の見出しとカードの間。
   カードの上には「おすすめ」バッジ（と高さ合わせのダミー）が一段乗っていて、
   その高さ＋10px が既に空くので、見出し側の margin まで足すと離れすぎる。
   見出しの下マージンは殺し、バッジの一段ぶんだけを間にする */
.price__plan-wrapper > .subsection-title {
    margin-bottom: 0;
}

.price__cards {
    display: grid;
    grid-template-columns: 1fr;
    /* カードの高さは3枚とも揃える（stretch）。枠数の差で生まれる余白は
       「ページ構成」の枠の中で吸収する（.sitemap-diagram__branches を flex: 1） */
    align-items: stretch;
    gap: 40px;
    /* Increased from var(--space-md) for mobile separation */
    margin-bottom: var(--space-md);
}

/* スマホ：1列で縦に積むので、40pxだと3枚がバラバラに見えるぶんまで空く */
@media (max-width: 767px) {
    .price__cards {
        gap: 24px;
    }

    /* 3枚の上端を揃えるためのダミーバッジは、縦積みでは役目がなく
       ライト・プレミアムの上に50px超の空白を作るだけなので消す */
    .price__recommended--placeholder {
        display: none;
    }
}

/* タブレット〜小型PC（768〜1199px）：3カラムだとカードが細く窮屈になるため2カラムに。
   料金プランは3枚なので、3枚目（松プラン）は下段の左側に通常幅で並ぶ（左寄せ） */
@media (min-width: 768px) {
    .price__cards {
        grid-template-columns: repeat(2, 1fr);
        gap: 40px;
    }
}

/* 1200px以上：従来どおり3カラム */
@media (min-width: 1200px) {
    .price__cards {
        grid-template-columns: repeat(3, 1fr);
        gap: 60px;
    }
}

.price__card {
    background-color: var(--color-white);
    border-radius: var(--radius-md);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: transform var(--transition-normal), box-shadow var(--transition-normal);
    position: relative;
    /* 外枠は LP 共通の黒。ステップカード(.flow__card)・課題カード(.issues__item)と同じ */
    border: 2px solid var(--color-black);
}

/* === カードのテーマ色 ===
   カードごとに色が違うのは「ヘッダー帯」と「外枠」の2つだけ。
   ライト→プレミアムを 薄い→中間→濃い の階段にして、明るさの差だけでプランの上下を表す。
   彩度の高い緑地の上でカードの中まで色を持たせると騒がしくなるので、
   金額・バッジ・ページ構成図といった中身は3枚とも同じ黒系で揃える（下の .price__card）。

     --plan     ヘッダー帯と外枠の色（3枚で違う）
     --plan-on  ヘッダー帯の上に乗る文字色。--plan との対比を 4.5:1 以上に保つこと。
                ライトの帯は白に近いので、ここだけ白ではなく黒系になる */
.price__card--ume {
    --plan: #f4f4f4;
    --plan-on: #333333;
}

.price__card--take {
    /* ブランドグリーン #62b850 を白へ3割ほど混ぜた薄緑 */
    --plan: #d0eacb;
    --plan-on: #333333;
}

.price__card--matsu {
    /* 階段の濃い端。ここも「薄い緑」の範囲に収める。
       セクションの地はブランドグリーンのグラデーション（カードが並ぶ高さで実測 #73c362 / L*72）で、
       帯を #62b850(L*68) まで濃くすると地と同化して枠だけのカードに見えてしまう。
       L*81 は地との差が9あり、同化させずに3枚のなかで一番濃い端を作れる下限。
       これ以上濃くすると再び地に沈む。黒系文字が 7.6:1 で乗る */
    --plan: #a4d69a;
    --plan-on: #333333;
}

/* カードの中身は3枚とも共通。ここを触ると3枚まとめて変わる。
   目立たせたいラベル（制作費・納期・ページ数）だけブランドグリーンを差し、
   数字と図は黒系のままにして、緑が「ここを見て」の合図としてだけ効くようにする */
.price__card {
    --card-ink: #333333;
    /* 金額・ページ数・ページ名の文字 */
    --card-accent: var(--color-primary);
    /* 強調ラベルの地。制作費/納期バッジ・ページ数ラベル */
    --card-on-accent: #ffffff;
    /* 強調ラベルの文字。#62b850 に白文字はコントラスト 2.47:1 で WCAG AA を下回るが、
       ブランドの見え方を優先して白で確定（LP内の他の緑ラベルとも揃う）。
       AA に寄せる場合は --card-accent を #428034 まで暗くすれば白のまま 4.81:1 になる */
    --card-window: #457a3a;
    /* ページ構成図のトップページ枠。図の起点なので一番濃く塗り、
       下層ページ（白地）との主従をここだけで作る。
       以前は無彩色のグレー（#6b6b6b）だったが、カードの中で図だけが灰色に浮いて
       見えたため、深緑に置き換えた。ブランドグリーン（#62b850）そのものは使わない。
       ヘッダー帯・制作費バッジ・ページ数バッジで既に3回出ている色なので、
       図まで同じ緑にすると緑が主役の面になる。ここは一段暗い緑で受ける。
       白文字が 5.1:1 で乗る濃さ（旧グレーの 5.3:1 とほぼ同じ）。
       これより明るくすると窓の中の「トップページ」が読めなくなる */
    --card-line: #b9d1b2;
    /* ページ構成図の枠線・連結線・ウィンドウの3点。緑を混ぜたグレー。
       白地のカードの上で線として見える下限の濃さ（旧グレー #c4c4c4 と同じ見え方） */
    --card-line-rgb: 185, 209, 178;
    /* ページ構成図のウィンドウのヘッダー地。ブランドグリーンのごく薄いアルファ。
       黒だと図だけ無彩色に沈むので、窓の中にも緑をひと匙だけ入れる */
    --card-map-rgb: 98, 184, 80;
    --card-tint-rgb: 98, 184, 80;
    /* 「ページ構成」ラベルの地。ブランドグリーンのごく薄いティント */
}

.price__card--ume .price__card-header,
.price__card--take .price__card-header,
.price__card--matsu .price__card-header {
    background-color: var(--plan);
    color: var(--plan-on);
}

.price__card--ume .price__amount,
.price__card--take .price__amount,
.price__card--matsu .price__amount {
    color: var(--card-ink);
}

.price__card--ume .price__badge,
.price__card--take .price__badge,
.price__card--matsu .price__badge {
    background-color: var(--card-accent);
    color: var(--card-on-accent);
}

/* おすすめ吹き出し */
.price__card-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 100%;
}

/* 「おすすめ」バッジのないカードにも同じ高さの見えないバッジを置き、3枚の上端を揃える */
.price__recommended--placeholder {
    visibility: hidden;
}

.price__card-wrapper .price__card {
    width: 100%;
    flex: 1;
}

.price__recommended {
    display: inline-block;
    background-color: var(--color-accent-orange);
    color: var(--color-white);
    font-size: 1rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    padding: 0.6rem 2rem;
    border-radius: var(--radius-sm);
    margin-bottom: 10px;
    position: relative;
    white-space: nowrap;
    /* 緑地から浮かせて、灰色の帯3枚の上でここだけ手前に出す */
    box-shadow: 0 4px 12px rgba(255, 142, 63, 0.45);
}

/* 吹き出しの下向き三角 */
/* 帯を灰の階段にしたぶん、「おすすめ」だけはアクセントのオレンジで拾わせる。
   カードのヘッダーと同色に繋げるより、1点だけ色を差すほうが視線が止まる */
.price.section .price__recommended {
    background-color: var(--color-accent-orange);
}

.price.section .price__recommended::after {
    border-top-color: var(--color-accent-orange);
}

.price__recommended::after {
    content: '';
    position: absolute;
    bottom: -10px;
    left: 50%;
    transform: translateX(-50%);
    border-width: 10px 8px 0;
    border-style: solid;
    border-color: var(--color-accent-orange) transparent transparent;
}

/* old ::before removed — using .price__recommended element instead */

.price__card-header {
    text-align: center;
    padding: var(--space-sm);
    /* 帯と本文の境。外枠と同じ黒で仕切る */
    border-bottom: 2px solid var(--color-black);
    /* 枠線(2px)＋角丸(16px)で生じる上部角の白い隙間を塞ぐ */
    border-top-left-radius: calc(var(--radius-md) - 2px);
    border-top-right-radius: calc(var(--radius-md) - 2px);
}

.price__card-header h4 {
    font-size: 1.25rem;
    color: inherit;
}

.price__card-body {
    padding: var(--space-md);
    text-align: left;
    display: flex;
    flex-direction: column;
    flex: 1;
    /* 金額と納期の文字サイズをカード幅に追従させるための基準。
       ビューポート幅だと 3→2→1 カラムの切り替わりを追えず、
       1200px ちょうどで「制作費」の行がはみ出していた */
    container-type: inline-size;
}

/* 料金・納期の横並び行。2行で1つのかたまりに見せたいので行間は詰め、
   下の区切り線との間（--space-md）で次のブロックと離す */
.price__row {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    margin-bottom: var(--space-xs);
}

/* 以下の clamp はいずれも「カード幅の何%」で効く（cqw）。
   3カラムで一番カードが細くなる 1200px 付近でも、ピルと金額が並んで収まる。

   金額と納期は同じ指定にまとめてある。以前は数字が 3rem / 2.5rem と違い、
   行の高さが 48px / 40px にずれてピルの位置も行ごとに変わっていた */
.price__amount,
.price__duration,
.price__pages {
    /* 数字・単位・（税込）を1本のベースラインに揃え、gap で一拍あける */
    /* 数字の実寸。下の translateY と font-size の両方がこれを基準にする */
    --num-size: clamp(2.2rem, 13.5cqw, 3rem);
    /* 数字・単位・（税込）を1本のベースラインに揃え、gap で一拍あける */
    display: flex;
    align-items: baseline;
    gap: 0.24em;
    font-size: clamp(1.1rem, 6.7cqw, 1.5rem);
    font-weight: 700;
    line-height: 1;
    white-space: nowrap;
    letter-spacing: 0.02em;
    /* line-height:1 では数字の ink が箱の中心より約 0.07em 下に寄る。
       align-items:center は箱を揃えるだけなので、そのままだとピルより数字が
       下がって見える。ink の中心をピルの中心に合わせるぶんだけ持ち上げる */
    transform: translateY(calc(var(--num-size) * -0.07));
}

.price__amount {
    color: var(--color-primary-dark);
}

/* プレミアムだけは金額を出さず「要相談」。数字より字数が多いので、
   3行のピルと高さが揃う範囲で一段小さくする（数字と同じ大きさだと行が膨らむ） */
.price__amount--ask {
    /* 数字より背が低いぶん行が詰まり、3枚のカードで区切り線の高さがずれる。
       数字1文字ぶんの高さを確保して、ライト・スタンダードと行を揃える */
    min-height: var(--num-size);
    align-items: center;
}

.price__amount--ask .price__ask {
    font-size: clamp(1.5rem, 9cqw, 2.1rem);
    line-height: 1;
    letter-spacing: 0.04em;
}

.price__amount .price__number,
.price__duration .price__number,
.price__pages .price__number {
    font-size: var(--num-size);
    line-height: 1;
    /* 22.8 のような小数は詰めると桁が団子になるので、既定より少しあける */
    letter-spacing: 0.03em;
}

.price__amount .price__tax,
.price__pages-note {
    font-size: clamp(0.75rem, 4cqw, 0.9rem);
    color: var(--color-text-muted);
    font-weight: normal;
    letter-spacing: 0.02em;
    /* 「万円」と（税込）の間は、数字↔単位より広くあけて役割の違いを出す */
    margin-left: 0.3em;
}

/* 「万円」「週間〜」「（税込）」の光学調整。
   CJK は仮想ボディいっぱいに描かれるので、欧文ベースラインに揃えると
   数字より 2px ほど下に沈んで見える（実測: 数字の下端637 に対し 万円は639）。
   自身の 0.085em ぶん持ち上げて、数字と下端が揃って見えるようにする。
   position:relative なのでレイアウトは動かない */
.price__amount .price__unit,
.price__duration .price__unit,
.price__amount .price__tax,
.price__pages .price__unit,
.price__pages-note {
    position: relative;
    top: -0.085em;
}

.price__badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    /* 3つのピルは同じ幅で左端を揃える。一番長い「ページ数」（4文字＋字送り）が
       1行で収まる幅にしてある。狭めると「ページ／数」に折れる */
    width: 5rem;
    white-space: nowrap;
    background-color: var(--color-gray-400);
    color: var(--color-white);
    font-size: 0.85rem;
    font-weight: 700;
    padding: 0.4rem 0.4rem;
    /* letter-spacing の分だけ右に寄るのを打ち消して中央に見せる */
    text-indent: 0.08em;
    border-radius: var(--radius-full);
    letter-spacing: 0.08em;
}

/* ページ数。制作費・納期と同じ「ピル → 大きい数字 → 小さい単位」の並びに揃えてある。
   「トップ＋3ページ」と書いていた頃は、ピルの直後に小さい「トップ＋」が来るため
   3行のうちこの行だけ数字の始まる位置が下がって、行が不揃いに見えていた。
   「トップ含む」の但し書きは（税込）と同じ扱いで数字の後ろへ逃がしている */



/* Sitemap example label */
/* 図の見出し。「ページ構成」＋固定/一例の小さな札の2つだけで、
   罫線やカッコ書きは持たせない（横線で挟んだ中央寄せのピルは飾りが勝つ） */
.sitemap-example-label {
    display: flex;
    align-items: baseline;
    gap: 8px;
    /* 金額・納期・ページ数の3行と図を切り分けるグレーの区切り線 */
    border-top: 1px solid var(--color-gray-200);
    margin-top: var(--space-md);
    padding-top: var(--space-md);
    margin-bottom: 6px;
}

.sitemap-example-label__title {
    font-size: 0.95rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    color: var(--color-gray-800);
    white-space: nowrap;
}

.sitemap-example-label__tag {
    font-size: 0.85rem;
    font-weight: 800;
    line-height: 1.5;
    letter-spacing: 0.04em;
    white-space: nowrap;
    padding: 4px 14px;
    border-radius: var(--radius-full);
    color: var(--color-text-muted);
    background-color: rgba(0, 0, 0, 0.04);
    border: 1px solid var(--color-gray-200);
}

/* Maintenance Table */
.subsection-title {
    font-size: 1.75rem;
    margin-bottom: var(--space-md);
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.icon-dashed {
    display: inline-block;
    width: 20px;
    height: 4px;
    background-image: linear-gradient(to right, var(--color-primary) 50%, transparent 50%);
    background-size: 10px 100%;
}

.table-responsive {
    overflow-x: auto;
    /* テーブルの角丸に合わせ、料金カードと同じ影をラッパーに付与
       （影をテーブル自身に付けると overflow-x で切り取られるため） */
    border-radius: var(--radius-md);
    box-shadow: 0.4rem 0.4rem 0 rgba(0, 0, 0, 0.1);
}

.maintenance__table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    background-color: var(--color-white);
    border: 2px solid #000;
    border-radius: var(--radius-md);
    overflow: hidden;
    min-width: 600px;
}

.maintenance__table th,
.maintenance__table td {
    padding: var(--space-sm);
    font-size: 1.05rem;
    line-height: 1.8;
    border-right: 1px solid var(--color-gray-100);
    border-bottom: 1px solid var(--color-gray-100);
}

/* 右端・下端のセルは外枠と重なるため内側線を消す */
.maintenance__table th:last-child,
.maintenance__table td:last-child {
    border-right: 0;
}

.maintenance__table tr:last-child td {
    border-bottom: 0;
}

.maintenance__table th {
    background-color: #62b850;
    color: var(--color-white);
    text-align: left;
    vertical-align: top;
}

.maintenance__table .col-plan-1,
.maintenance__table .col-plan-2 {
    width: 30%;
    background-color: #62b850;
    color: var(--color-white);
}

.maintenance__table .col-plan-1 .plan-price,
.maintenance__table .col-plan-2 .plan-price {
    color: var(--color-white);
}

.maintenance__table .col-plan-1 .plan-desc,
.maintenance__table .col-plan-2 .plan-desc {
    color: rgba(255, 255, 255, 0.85);
}

.plan-price {
    font-size: 3.2rem;
    font-weight: 700;
    color: var(--color-primary);
    margin: 0.5rem 0;
    /* 小数点まわりが団子にならないよう、桁の間を少しあける */
    letter-spacing: 0.03em;
}

/* 「要相談」は数字ではないので、3.2rem のままだと列からはみ出す */
.plan-price--ask {
    font-size: 2rem;
    letter-spacing: 0.06em;
}

.plan-price span {
    font-size: 0.9rem;
    font-weight: normal;
    /* 数字と「万円（税込）」がくっついて見えるので一拍あける */
    margin-left: 0.35em;
    letter-spacing: 0.02em;
}

.plan-desc {
    font-size: 1rem;
    color: var(--color-text-muted);
    font-weight: normal;
}

/* 中央寄せのセルは●が主体で字面が小さく見えるため、本文より一回り大きくする */
.maintenance__table td.center {
    text-align: center;
    color: #333;
    font-size: 1.1rem;
}

/* 左端のラベル列（項目名）を少し太く */
.maintenance__table tbody td:first-child {
    font-weight: 500;
}

/* 3プランの枠から外れる相談の受け皿。カードと同じ白地＋黒枠で、
   料金表の続き（4枚目のカードではなく、3枚を受ける帯）として見せる */
.price__consult {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    margin-top: var(--space-md);
    padding: var(--space-md) var(--space-lg);
    /* 白のままだと3枚の白いカードと地続きに見えて帯として立たない。
       #f4f4f4 では白との差が出なかったので、もう一段落としたグレーにする */
    background-color: #e8e8e8;
    border: 2px solid var(--color-black);
    border-radius: var(--radius-md);
}

.price__consult-body {
    flex: 1;
}

.price__consult-title {
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--color-gray-800);
    margin: 0 0 0.35rem;
}

.price__consult-text {
    font-size: 1.05rem;
    line-height: 1.8;
    color: var(--color-text-muted);
    margin: 0;
}

.price__consult-btn {
    flex-shrink: 0;
    /* 相談導線なので、LPの他のCTA（無料相談ボタン）と同じアクセントのオレンジ。
       ここだけ緑にすると、料金表の中で「次にどこを押すか」が分かれる */
    background-color: var(--color-accent-orange);
    color: var(--color-white);
    gap: 10px;
    padding: 1.05rem 2.4rem;
    font-size: 1.15rem;
    white-space: nowrap;
}

.price__consult-btn:hover {
    background-color: #ef7a26;
}

.price__consult-btn-icon {
    display: inline-flex;
    align-items: center;
    /* 文字の視覚的な中心に合わせる。封筒は下辺が重いので1pxだけ上げる */
    margin-top: -1px;
}

@media (max-width: 767px) {
    .price__consult {
        flex-direction: column;
        align-items: stretch;
        gap: var(--space-sm);
        padding: var(--space-md);
    }

    .price__consult-title {
        font-size: 1.1rem;
    }

    .price__consult-text {
        font-size: 0.9rem;
        line-height: 1.75;
    }

    .price__consult-btn {
        padding: 0.95rem 1.5rem;
        font-size: 1.05rem;
    }
}

/* Price Notes */
.price__notes {
    margin-top: 0;
    padding: 0;
}

.price__note-item {
    font-size: 0.85rem;
    color: var(--color-text-muted);
    line-height: 1.8;
    margin-bottom: 2px;
}

.price__note-mark {
    color: var(--color-accent-orange);
    font-weight: bold;
    margin-right: 2px;
}

.price__note-item:last-child {
    margin-bottom: 0;
}

@media (max-width: 767px) {
    .price__note-item {
        font-size: 0.72rem;
        line-height: 1.7;
    }

    .subsection-title {
        font-size: 18px;
    }

    .plan-kind {
        font-size: 0.8rem;
        padding: 0.3rem 0.7rem;
    }

    .plan-price {
        font-size: 1.8rem;
    }

    .plan-price span {
        font-size: 0.75rem;
    }

    .plan-desc {
        font-size: 15px;
    }
}

.mt-s {
    margin-top: var(--space-sm);
}

/* Sitemap Diagram */
.sitemap-wrapper {
    margin-top: var(--space-xl);
    text-align: center;
}

/* Sitemap Diagram — 料金カード内統合用 */
.price__card .sitemap-diagram {
    padding: var(--space-sm) 0;
    max-width: 100%;
}

.price__card .sitemap-diagram__branches {
    gap: 8px;
    padding: 10px;
}

.price__card .sitemap-window:not(.sitemap-window--main) {
    width: calc(50% - 8px);
}

.price__card .sitemap-window--main {
    width: 140px;
    max-width: 90%;
    margin: 0 auto;
}

/* トップページのウィンドウは3枚とも同じグリーン。プランごとの色は付けない。
   ベタ塗りだと図の中でここだけ black box のように重く沈むので、
   下層ページと同じ「白い紙＋緑のタイトルバー」に揃える。
   濃さの差はタイトルバー（メインカラーのベタ）だけで出す */
.price__card .sitemap-window--main {
    background-color: var(--color-white) !important;
    border-color: var(--color-primary) !important;
}

.price__card .sitemap-window--main .sitemap-window__header {
    background-color: var(--color-primary);
    border-bottom: none;
}

/* 下層ページのウィンドウ・枠・線もカードのテーマ色に合わせる */
.price__card .sitemap-window:not(.sitemap-window--main) {
    border-color: var(--card-line);
}

.price__card .sitemap-window:not(.sitemap-window--main) .sitemap-window__header {
    /* 黒0.05から緑0.08へ。緑は同じ濃さでも黒より軽く見えるので、
       アルファを少し上げないと窓のヘッダーが白地に消える */
    background-color: rgba(var(--card-map-rgb), 0.08);
    border-bottom-color: rgba(var(--card-line-rgb), 0.75);
}

.price__card .sitemap-window:not(.sitemap-window--main) .sitemap-window__header span {
    background-color: var(--card-line);
}

.price__card .sitemap-window__body {
    color: var(--card-ink);
}

.price__card .sitemap-window--main .sitemap-window__body {
    /* 白地になったので文字は濃い緑。--color-primary のままだと 2.6:1 しか出ない */
    color: var(--card-window);
}

/* 図の中に緑を入れたので、札も同じ薄さの緑で受ける。
   共通版（.sitemap-example-label）はグレーのまま。上書きは料金カードの中だけ */
/* 札は2種類しかない。「決まった型（ライト・スタンダード）」は緑のベタ、
   「ゼロから設計（プレミアム）」は黒のベタ。色そのものを変えることで、
   読む前に「この2つは種類が違う」と分かるようにする。
   オレンジは図の中で「＋追加ページ」の意味を持たせているのでここでは使わない */
.price__card .sitemap-example-label--fixed .sitemap-example-label__tag {
    color: var(--color-white);
    background-color: var(--color-black);
    border-color: var(--color-black);
}

.price__card .sitemap-example-label--sample .sitemap-example-label__tag {
    color: var(--color-white);
    background-color: #6b6b6b;
    border-color: #6b6b6b;
}

/* 札を大きくしたぶん、隣の「ページ構成」の文字も少し上げて釣り合わせる */
.price__card .sitemap-example-label__title {
    font-size: 1rem;
}

/* === プレミアムの図だけ無彩色にする ===
   プレミアムは「図は一例」で、どのページを何ページ作るかが決まっていない。
   ライト・スタンダードと同じ緑で描くと、同じように確定した構成に見えてしまう。
   確定していないことを文字（オーダーメイド・破線の札）だけでなく色でも出すため、
   この1枚だけ緑を抜いてグレーに落とす。オレンジは「＋追加」の意味を持つ色なので使わない。

   グレーにするのは下層ページ（＝まだ決まっていないページ）の側だけ。
   トップページの窓は3枚とも同じ緑のままにする。トップページはどのプランでも必ず作る
   確定したページで、図の起点でもあるため、ここまでグレーにすると
   プレミアムだけ別物の図に見えてしまう。
   ページ名が乗る白い紙の部分も3枚とも白のままで、カードをまたいだ統一感は保つ。 */
.price__card--matsu {
    --card-line: #d2d2d2;
    /* 図の枠線・連結線・ウィンドウの3点 */
    --card-line-rgb: 210, 210, 210;
    /* 下層ページのヘッダー地。緑(98,184,80)を無彩色に置き換え */
    --card-map-rgb: 110, 110, 110;
    --card-tint-rgb: 110, 110, 110;
}

.price__card--matsu .sitemap-example-label__tag {
    /* 図がグレーになったので札の文字も緑を抜く。地は破線の白抜きのまま */
    color: #6b6b6b;
}


/* 料金セクションの注記は緑地の上に直接置く前提で白にしてあるが、
   カードの中（白地）に入る注記だけは黒系に戻さないと文字が消える */
.price.section .price__card .price__note-item {
    color: var(--color-text-muted);
}

.price.section .price__card .price__note-mark {
    color: var(--color-accent-orange);
}

/* リード文の2段落目。1段落目より一段弱くしてプラン共通の前置きだと分かるようにする */
.price.section .price__lead--sub {
    margin-top: 0.6rem;
    font-size: 14px;
    color: rgba(255, 255, 255, 0.92);
}

@media (min-width: 768px) {
    .price.section .price__lead--sub {
        font-size: 16px;
    }
}

.sitemap-title {
    font-size: 1.25rem;
    margin-bottom: var(--space-md);
    color: var(--color-gray-800);
}

/* 枝分かれ部分の枠線・縦線もカードのテーマ色 */
.price__card .sitemap-diagram__branches {
    border-color: rgba(var(--card-line-rgb), 0.55);
}

.price__card .sitemap-diagram__line {
    background-color: var(--card-line);
}

.sitemap-diagram {
    display: flex;
    flex-direction: column;
    align-items: center;
    max-width: 900px;
    margin: 0 auto;
    /* カードの高さを揃えたときの余りをここで吸収する */
    flex: 1;
    width: 100%;
}

.sitemap-diagram__top {
    z-index: 2;
}

.sitemap-diagram__line {
    width: 2px;
    height: 20px;
    /* 少し短く */
    background-color: var(--color-primary);
}

@media (max-width: 767px) {
    .maintenance__table {
        font-size: 15px;
    }

    /* スマホ時：1列目（項目名）の横幅を少し狭める */
    .maintenance__table th:first-child,
    .maintenance__table td:first-child {
        width: 38%;
    }

    /* スマホ時：横スクロールできることが伝わるよう、コンテナ余白を打ち消して
       スクロール領域を画面端まで広げる（右端で表が見切れる＝右にスライドできるサイン）。
       表の開始位置は本文と揃えるため padding で余白を内側に戻す */
    .price__maintenance .table-responsive {
        margin-inline: calc(-1 * var(--container-padding));
        padding-inline: var(--container-padding);
        /* padding を付けると角丸・影が表本体とズレるため、表自身に持たせる */
        border-radius: 0;
        box-shadow: none;
    }

    .price__maintenance .maintenance__table {
        box-shadow: 0.4rem 0.4rem 0 rgba(0, 0, 0, 0.1);
    }
}

.sitemap-diagram__branches {
    display: flex;
    flex-wrap: wrap;
    /* 折り返した最終行が中央に寄らないよう左揃え */
    justify-content: flex-start;
    /* 枠が縦に伸びても、ページの枠は上に詰めたまま（行が引き伸ばされないように） */
    align-content: flex-start;
    flex: 1;
    gap: 15px;
    padding: var(--space-md);
    border: 2px solid rgba(98, 184, 80, 0.2);
    border-radius: var(--radius-md);
    background-color: var(--color-white);
    width: 100%;
}

.sitemap-window {
    width: calc(50% - 15px);
    border: 2px solid var(--color-primary);
    border-radius: 6px;
    background-color: var(--color-white);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    transition: transform var(--transition-fast);
}

/* 紐づいているページ（お知らせ一覧と詳細など）のスタイル */
.sitemap-window--linked {
    border-style: solid;
    border-color: #ff8e52 !important;
    /* アクセントカラーのオレンジ */
    background-color: #fff9f6;
    position: relative;
}

/* コネクター線（一覧から詳細へ） */
.sitemap-window--linked:nth-of-type(odd)::after {
    content: '';
    position: absolute;
    top: 50%;
    right: -17px;
    /* 枝分かれのギャップ(15px)を繋ぐ */
    width: 17px;
    height: 2px;
    border-top: 2px dashed #ff8e52;
    z-index: 1;
}

/* スマホ表示や折り返しで縦に並ぶ場合は線を消すか調整 */
@media (max-width: 767px) {
    .sitemap-window--linked:nth-of-type(odd)::after {
        display: none;
    }
}

.sitemap-window--linked .sitemap-window__header {
    background-color: rgba(255, 142, 82, 0.1);
    border-color: rgba(255, 142, 82, 0.2);
}

.sitemap-window--linked .sitemap-window__header span {
    background-color: #ff8e52;
}

.sitemap-window--linked .sitemap-window__body {
    color: #e67639;
}

/* === そのプランで増えるページ ===
   スタンダードの「対応車両・対応状態」「会社概要」だけに付ける。
   ライトから何が増えるかを、カードを見比べなくても1枚で読めるようにする目印。
   色は「おすすめ」バッジと同じ --color-accent-orange を流用し、LPに新しい色を足さない。
   色だけに意味を持たせないよう、窓のヘッダー左に「＋追加」の文字も必ず出す。

   セレクタが .price__card-body まで含んでいるのは、カード内の窓を
   テーマ色（緑）で塗り直す既存ルールより詳細度を上げて確実に勝たせるため。 */
.price__card .price__card-body .sitemap-window--added {
    border-color: var(--color-accent-orange);
    background-color: #fff8f3;
}

.price__card .price__card-body .sitemap-window--added .sitemap-window__header {
    background-color: rgba(255, 142, 63, 0.12);
    border-bottom-color: rgba(255, 142, 63, 0.35);
    /* ドットは右寄せのまま。空いている左側にバッジを入れる */
    justify-content: flex-end;
}

.price__card .price__card-body .sitemap-window--added .sitemap-window__header::before {
    content: '＋追加';
    margin-right: auto;
    font-size: 0.58rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    line-height: 1;
    color: var(--color-white);
    background-color: var(--color-accent-orange);
    padding: 2px 5px;
    border-radius: var(--radius-full);
    white-space: nowrap;
}

.price__card .price__card-body .sitemap-window--added .sitemap-window__header span {
    background-color: var(--color-accent-orange);
}

.price__card .price__card-body .sitemap-window--added .sitemap-window__body {
    /* #ff8e3f のままだと白地で 2.2:1 しか出ないので、文字は一段暗いオレンジにする */
    color: #c2600f;
}

/* 凡例。オレンジが何を指すのかを図の直下で受ける */
.sitemap-legend {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    margin-top: 10px;
    font-size: 0.75rem;
    line-height: 1.7;
    color: var(--color-text-muted);
}

.sitemap-legend__swatch {
    flex: none;
    width: 12px;
    height: 12px;
    margin-top: 4px;
    border: 2px solid var(--color-accent-orange);
    border-radius: 3px;
    background-color: #fff8f3;
}

@media (max-width: 767px) {
    .sitemap-legend {
        font-size: 0.7rem;
    }
}

@media (min-width: 768px) {
    .sitemap-window {
        width: calc(25% - 15px);
    }
}

/* Hover removed */

.sitemap-window--main {
    border-color: var(--color-primary);
    background-color: var(--color-primary);
    color: var(--color-white);
    box-shadow: var(--shadow-md);
}

.sitemap-window__header {
    height: 24px;
    background-color: rgba(98, 184, 80, 0.1);
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding: 0 10px;
    gap: 5px;
    border-bottom: 1px solid rgba(98, 184, 80, 0.2);
}

.sitemap-window--main .sitemap-window__header {
    background-color: rgba(255, 255, 255, 0.15);
    border-bottom: none;
}

.sitemap-window__header span {
    display: block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background-color: var(--color-primary);
    opacity: 0.6;
}

.sitemap-window--main .sitemap-window__header span {
    background-color: var(--color-white);
    opacity: 0.8;
}

.sitemap-window__body {
    padding: 0.6rem 0.1rem;
    /* パディングをさらに削る */
    font-weight: 700;
    font-size: 0.75rem;
    color: var(--color-primary-dark);
    white-space: nowrap;
    text-align: center;
    width: 100%;
}

.sitemap-window--main .sitemap-window__body {
    color: var(--color-white);
    font-size: 0.82rem;
    /* 0.85から微調整 */
}

/* ==========================================================================
   Flow
   ========================================================================== */
/* 横だけ clip する。縦を visible にしているのは、道路の右下の抜けが
   そのまま #faq へ入り込んでいく見せ方にしているため（clip すると
   セクションの変わり目でぶつ切りになる）。
   overflow:hidden ではなく clip なのは、hidden だと position:sticky が効かないから。
   z-index は #faq（.faq__bg が position:absolute）より上に置くために必要 */
#flow.overflow-hidden {
    overflow-x: clip;
    overflow-y: visible;
    z-index: 1;
}

/* 上は前のCTA（写真）との境目から道路が出てくるまでの助走ぶんだけ。
   広く取ると見出しの上に灰色の空白が居座るので、下と同じ量に揃えている。
   下も控えめ。直後の #faq も同じ灰地で、道路のGOAL余走路（--road-tail）も
   下に伸びるため、ここを広く取ると灰色の空白が続いて見える */
.flow.section {
    padding-top: clamp(3rem, 1.5rem + 4.5vw, 6rem);
    padding-bottom: clamp(3rem, 1.5rem + 4.5vw, 6rem);
    background-color: #f2f2f2;
}

/* スマホは道路が縦1列になって助走路が短くなるぶん、上を詰める理由がなくなる。
   直前のセクションとの切れ目が弱く見えるので、
   「選ばれる4つの理由」（.strengths.section）と同じ上余白に戻す */
@media (max-width: 767px) {
    .flow.section {
        padding-top: clamp(5rem, 3rem + 8vw, 10rem);
    }
}

/* 見出しの直下に道路の助走路が来るので、共通の余白（--space-lg）だと空きすぎる */
.flow .section-header {
    margin-bottom: var(--space-sm);
}

/* SPはリード文が2行に折り返すぶん、道路の起点まで詰まって見えるので少し空ける */
@media (max-width: 767px) {
    .flow .section-header {
        margin-bottom: 2rem;
    }
}

/* ==========================================================================
   Flow  ── カードの後ろを道路が通り抜けるステップ
   1200px〜：4枚＋3枚の2段組み。段内でカードを上下に振り、道路がその背面をうねって通る
   〜1199px ：1列。道路はカードの背面を縦に通り、カードの隙間だけに顔を出す
   道路は SVG（main.js の drawFlowRoad がカードの実測位置からパスを引く）
   ========================================================================== */

.flow__road {
    position: relative;
    /* 超ワイド画面での上限。これ以下では画面幅いっぱいに使う */
    max-width: 2200px;
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--turn);
    padding-right: var(--turn);
    /* 見出しと道路の起点がぶつからないよう確保（marginは見出しと相殺されるためpadding）。
       ここは1枚目のカードの上に出る助走路の長さでもある */
    padding-top: clamp(2.5rem, 1.75rem + 2.25vw, 4rem);

    /* 道路まわりの寸法。JS（drawFlowRoad）も同じ値を読む */
    /* 路面の幅。「制作メンバー」の道路と揃えるため .member の --member-lane と
       同じ値・同じブレークポイントで刻む（50 → 60 → 72px）。片方を変えたら両方直す。
       JS（drawFlowRoad）は parseFloat で読むので clamp() でなく素の px で書くこと
       （clamp だと先頭の値しか効かず、どの画面幅でも太らない） */
    --lane: 50px;
    --turn: var(--container-padding);
    /* カードを画面の左右の端からどれだけ離すか */
    --stagger: 0px;
    /* 段のなかでカードを上下に振る量 */
    --num-size: 50px;
    /* タクシーの幅。路面に対しておよそ55%。--lane を変えたらここも合わせる */
    --taxi-w: 28px;
    --road-head: 54px;
    /* STARTの助走路 */
    --road-tail: 48px;
    /* GOALまでの余走路 */
}

/* タブレット〜1199px：1列のままだとカードが横に伸びすぎるので幅を絞る */
@media (min-width: 768px) and (max-width: 1199px) {
    .flow__road {
        max-width: 880px;
        margin-left: auto;
        margin-right: auto;
        --lane: 60px;
        --taxi-w: 33px;
        --num-size: 56px;
        --road-head: 62px;
        --road-tail: 58px;
    }
}

@media (min-width: 1200px) {
    .flow__road {
        /* カードを画面端から120pxまで寄せる（狭いPCでは詰まりすぎないようclamp） */
        --turn: clamp(72px, 6vw, 120px);
        /* カード1枚の幅。画面が広がっても太らせず、余った幅は隙間＝道路の見え幅に回す */
        --card-w: clamp(230px, 20vw, 340px);
        --stagger: 64px;
        --lane: 72px;
        --taxi-w: 40px;
        --num-size: 60px;
        --road-head: 74px;
        --road-tail: 74px;
    }
}

/* 道路のSVG：カードの背面に敷く */
.flow__road-svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: visible;
    z-index: 0;
    pointer-events: none;
}

/* 路肩の白線。セクションの地色（#f2f2f2）と白は明度が近く、白いだけだと
   路肩が背景に溶ける。白の外側にごく薄い影を落として道路の輪郭を立たせる */
.flow__road-edge {
    fill: none;
    stroke: #ffffff;
    stroke-linecap: butt;
    stroke-linejoin: round;
    filter: drop-shadow(0 0 1px rgba(35, 38, 42, 0.45)) drop-shadow(0 2px 4px rgba(35, 38, 42, 0.16));
}

.flow__road-asphalt {
    fill: none;
    stroke: #75787c;
    stroke-linecap: butt;
    stroke-linejoin: round;
}

/* 路面のざらつき */
.flow__road-grain {
    fill: none;
    stroke: url(#flowGrain);
    stroke-linecap: butt;
    stroke-linejoin: round;
}

/* センターラインの白い破線 */
.flow__road-dash {
    fill: none;
    stroke: rgba(255, 255, 255, 0.95);
    stroke-width: 3;
    stroke-linecap: butt;
    stroke-dasharray: 18 15;
}

.flow__road-label {
    font-family: var(--font-family-en);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.18em;
    fill: var(--color-text-muted);
}

/* 走るタクシー。道路と同じ層にいるので、カードの後ろに隠れて走り抜ける */
.flow__taxi {
    filter: drop-shadow(0 3px 5px rgba(0, 0, 0, 0.35));
}

/* ===== 段 ===== */
.flow__row {
    position: relative;
    z-index: 1;
}

@media (min-width: 1200px) {
    .flow__row {
        display: flex;
        column-gap: clamp(24px, 2vw, 40px);
        align-items: stretch;
    }

    .flow__item {
        flex: 0 0 var(--card-w);
    }

    /* 1段目は左端から、2段目は右端に寄せる（あいだを道路が大きく回り込む） */
    .flow__row:first-of-type {
        justify-content: flex-start;
    }

    .flow__row:last-of-type {
        justify-content: flex-end;
    }

    /* 段のなかで1枚おきに下げる（道路が背面をうねる） */
    .flow__item:nth-child(even) {
        transform: translateY(var(--stagger));
    }

    /* 1段目と2段目のあいだ＝折り返しの道が走る帯 */
    .flow__row:first-of-type {
        margin-bottom: calc(176px + var(--stagger));
    }
}

/* 〜1199px：1列。カードの隙間から道路が見える */
@media (max-width: 1199px) {

    /* この幅では道路が縦一本になる。最後のカードの下にGOALまでの余走路ぶんを空ける */
    .flow__road {
        padding-bottom: calc(var(--road-tail) + 18px);
    }

    .flow__row {
        display: contents;
    }

    /* .flow__row が display:contents のため :last-child は「段のなかの最後」を指す。
       それだと1段目の最後（04）に下マージンが付かず、次の段の先頭（05）とくっつく。
       全カードに空けてから、通し番号で最後の1枚だけ打ち消す */
    .flow__item {
        margin-bottom: 52px;
    }

    .flow__row:last-of-type .flow__item:last-child {
        margin-bottom: 0;
    }
}

/* ===== ステップカード ===== */
.flow__item {
    position: relative;
    z-index: 1;
    display: flex;
}

.flow__card {
    position: relative;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    background-color: var(--color-white);
    border: 2px solid var(--color-black);
    border-radius: var(--radius-md);
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.12);
    padding: var(--space-md);
    transition: box-shadow var(--transition-normal), transform var(--transition-normal);
}

@media (min-width: 768px) {
    .flow__card {
        padding: var(--space-md) var(--space-lg);
    }
}

@media (min-width: 1200px) {
    .flow__card {
        padding: var(--space-md);
    }
}

.flow__card:hover {
    box-shadow: 0 16px 32px rgba(0, 0, 0, 0.16);
    transform: translateY(-3px);
}

/* PCで1枚おきに下げたカードは、hoverの持ち上げが段差を打ち消さないようにする */
@media (min-width: 1200px) {
    .flow__item:nth-child(even):hover {
        transform: translateY(calc(var(--stagger) - 3px));
    }

    .flow__item:nth-child(even) .flow__card:hover {
        transform: none;
    }
}

/* ステップ番号：カードの左上に掛ける */
.flow__num {
    position: absolute;
    top: calc(var(--num-size) * -0.62);
    left: -10px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--num-size);
    height: var(--num-size);
    border-radius: 50%;
    background-color: var(--color-primary);
    border: 3px solid var(--color-black);
    color: var(--color-white);
    font-family: var(--font-family-en);
    font-weight: 800;
    font-size: calc(var(--num-size) * 0.38);
    line-height: 1;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
    transition: transform var(--transition-normal);
}

/* SPは円が50pxまで小さくなるので、3pxの枠だと太く見える */
@media (max-width: 767px) {
    .flow__num {
        border-width: 2px;
    }
}

/* タクシーが通りかかっているステップだけ少し大きく */
.flow__item.is-current .flow__num {
    transform: scale(1.12);
}

.flow__title {
    font-size: 1.25rem;
    margin-bottom: var(--space-sm);
    color: var(--color-text-main);
}

@media (min-width: 768px) and (max-width: 1199px) {
    .flow__title {
        font-size: 1.5rem;
    }
}

/* PC：4カラムでカードが細くなるぶん、見出しと本文を絞る */
@media (min-width: 1200px) {
    .flow__title {
        font-size: 1.2rem;
        margin-bottom: var(--space-xs);
    }
}

.flow__text {
    font-size: 1rem;
    color: #333333;
    line-height: 1.8;
    /* 本文が長いカードでも、下の破線（担当欄の区切り）と本文がくっつかないよう最低限の隙間を確保する */
    margin: 0 0 var(--space-sm);
}

/* スマホ：カード幅が狭く1行の文字数が稼げないので本文を一段小さく */
@media (max-width: 767px) {
    .flow__text {
        font-size: 15px;
    }
}

@media (min-width: 1200px) {
    .flow__text {
        font-size: 1rem;
        line-height: 1.75;
    }
}

/* この作業の担当（お客様／当社） */
.flow__assignee {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    /* カードの高さが揃う段組みでは、担当欄を下端に揃える */
    margin-top: auto;
    padding-top: var(--space-md);
    border-top: 1px dashed #000000;
}

.flow__assignee-label {
    width: 100%;
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--color-text-muted);
    letter-spacing: 0.02em;
    margin-bottom: 0.1rem;
}

.flow__assignee-tag {
    display: inline-flex;
    align-items: center;
    /* 縦は詰め、横だけ余裕を持たせた平たいピル */
    padding: 0.28rem 1.1rem;
    border-radius: var(--radius-full);
    font-size: 0.9rem;
    font-weight: 700;
    line-height: 1.5;
    background-color: #000;
    color: #fff;
}

/* PC：カードが細いのでタグを一回り小さく */
@media (min-width: 1200px) {
    .flow__assignee-tag {
        padding: 0.35rem 0.85rem;
        font-size: 0.82rem;
    }
}

/* 担当でない場合は薄くして見えにくくする */
.flow__assignee-tag--inactive {
    opacity: 0.25;
}

/* ==========================================================================
   Flow ── 1カラムのスラローム（2026-08-21 採用）
   カードを左右に振り、道路がそのあいだを縫って下る。
       ■        ← 中
   ■            ← 左
       ■        ← 中
           ■    ← 右
       ■        ← 中
   ■            ← 左
       ■        ← 中
   比較用に併設していた「直角に折り返す案」は削除済み。`.flow--alt` は当時の
   B案を指すクラス名で、いまはこれ1本だけ（上の .flow__* は共通の土台）。
   ========================================================================== */

/* 1200px未満はA案と同じく1列（全幅）に落とす。スラロームだとカードが細くなりすぎるため */
@media (min-width: 1200px) {
    .flow--alt .flow__road {
        /* 横に隣り合うカードが重ならない幅取り。隣の列とのすき間（振り幅 − カード幅）が、
           道路が斜めに顔を出す窓になる。振り幅は当初36%（＝左右いっぱい）だったが
           離れすぎたため32%に寄せた */
        --alt-card-w: 28%;
        --alt-step: 32%;
        /* 左右いっぱいを使わなくなったぶん、スラローム全体を横方向で中央に置く */
        --alt-inset: calc((100% - (var(--alt-step) * 2 + var(--alt-card-w))) / 2);
        /* カードの高さを揃えて段差を一定にする。1段下がる量が --alt-step-y。
           同じ列に戻るのは2枚先なので、--alt-step-y × 2 がカード高さを上回る必要がある。
           168px＝詰めすぎ／250px＝離れすぎ で、200pxに着地した */
        --alt-card-h: 320px;
        --alt-step-y: 200px;
        /* alt はカードを広く取りたいので左右の余白を詰める */
        --turn: 44px;
        /* ⑦から右下へ抜ける道路は #faq へ入り込ませるので、ここで場所を空けない
           （空けると「よくある質問」との距離が不自然に開く） */
        padding-bottom: 0;
    }

    /* 段組みを解除して1列に積む */
    .flow--alt .flow__row {
        display: contents;
    }

    .flow--alt .flow__item {
        display: block;
        width: var(--alt-card-w);
        /* 横に重ならないので、上下は食い込ませて縦を詰める */
        margin-top: calc(var(--alt-step-y) - var(--alt-card-h));
        margin-bottom: 0;
    }

    .flow--alt .flow__card {
        min-height: var(--alt-card-h);
        padding: var(--space-md);
    }

    .flow--alt .flow__row:first-of-type .flow__item:first-child {
        margin-top: 0;
    }

    /* A案の上下の段違いは打ち消す */
    .flow--alt .flow__item:nth-child(even) {
        transform: none;
    }

    /* 左右の振り：左 → 中 → 右 → 中 の繰り返し
       （1段目4枚＝左・中・右・中／2段目3枚＝左・中・右） */
    .flow--alt .flow__item:nth-child(1) {
        margin-left: var(--alt-inset);
    }

    .flow--alt .flow__item:nth-child(2),
    .flow--alt .flow__item:nth-child(4) {
        margin-left: calc(var(--alt-inset) + var(--alt-step));
    }

    .flow--alt .flow__item:nth-child(3) {
        margin-left: calc(var(--alt-inset) + var(--alt-step) * 2);
    }

    /* 重なりの前後関係を並び順どおりにする */
    .flow--alt .flow__item {
        z-index: 1;
    }

    .flow--alt .flow__row:last-of-type .flow__item {
        z-index: 2;
    }

    /* 1列ぶんの幅があるので、A案で絞っていた文字サイズは戻す */
    .flow--alt .flow__title {
        font-size: 1.2rem;
        margin-bottom: var(--space-xs);
    }

    .flow--alt .flow__text {
        font-size: 1rem;
        line-height: 1.85;
    }

    .flow--alt .flow__assignee {
        padding-top: var(--space-md);
    }

    .flow--alt .flow__assignee-tag {
        padding: 0.4rem 1rem;
        font-size: 0.86rem;
    }
}

/* ==========================================================================
   Member  ── カードを階段状に並べるレイアウト
   ========================================================================== */
/* セクションの上下に余白をたっぷり取る */
.member.section {
    padding-top: clamp(4.5rem, 2rem + 7vw, 9rem);
    padding-bottom: clamp(4.5rem, 2rem + 7vw, 9rem);
}

.member__inner {
    width: 85%;
    max-width: 1800px;
    margin: 0 auto;
    padding: 0;
}

/* タイトルを左揃えに */
.section-header--left {
    text-align: left;
}

/* 3カードを横並び（同じ高さで揃える） */
.member__list {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: clamp(1.25rem, 0.5rem + 2.5vw, 2.75rem);
    align-items: start;
}

.member__card {
    display: flex;
    flex-direction: column;
}

/* 画像：やわらかい角丸と影 */
.member__media {
    position: relative;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    border: 2px solid #000;
    border-radius: 14px;
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.10);
}

.member__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* Retinaで本来の解像度を保つため、GPUレイヤー昇格(translateZ等)は使わない */
    image-rendering: auto;
}

/* 頭の上に余白を作るため、写真の切り取り位置を上寄りに（被写体を下げる） */
.member__card:nth-child(1) .member__media img {
    object-position: 50% 25%;
}

.member__card:nth-child(2) .member__media img {
    object-position: 50% 25%;
}

.member__card:nth-child(3) .member__media img {
    object-position: 50% 12%;
}

.member__body {
    padding-top: var(--space-md);
}

.member__name {
    font-size: clamp(1.35rem, 1.1rem + 0.9vw, 1.75rem);
    line-height: 1.25;
    margin-bottom: var(--space-sm);
    display: flex;
    /* 漢字とラテン文字はベースラインを揃えても目線は揃わない（漢字は字面が
       ベースラインより下まで来る）。字面の中心どうしで合わせる */
    align-items: center;
    flex-wrap: wrap;
    gap: 0.4em 0.6em;
}

.member__en-name {
    font-family: var(--font-family-en);
    font-size: 0.78rem;
    font-weight: 500;
    line-height: 1;
    letter-spacing: 0.1em;
    color: var(--color-text-muted);
    text-transform: uppercase;
    /* 和文フォントは行ボックスの中心が字面の中心より上にある。その分だけ戻す */
    transform: translateY(0.06em);
}

.member__desc {
    font-size: 1.05rem;
    line-height: 1.9;
    color: var(--color-gray-800);
}

/* タブレット以下：階段を解除して縦に積む */
@media (max-width: 991px) {
    .member__list {
        grid-template-columns: 1fr;
        gap: var(--space-lg);
        max-width: 560px;
    }

    .member__card:nth-child(2),
    .member__card:nth-child(3) {
        margin-top: 0;
    }

    .member__media {
        aspect-ratio: 16 / 10;
    }
}

@media (max-width: 767px) {
    .member__list {
        gap: 2.75rem;
    }

    .member__desc {
        font-size: 1rem;
    }
}

/* ==========================================================================
   FAQ
   ========================================================================== */
.faq {
    position: relative;
}

/* セクションの上下に余白をたっぷり取る（上は #flow と地続きの灰地なので詰める） */
.faq.section {
    padding-top: clamp(3rem, 1.5rem + 4vw, 5.5rem);
    /* 下は #contact（上部が角丸のグリーン）と接する。#contact 側に上余白が無いので、
       質問と問い合わせのあいだの空きはここだけで決まる */
    padding-bottom: clamp(5.5rem, 2.5rem + 8.5vw, 11rem);
}

/* 「よくある悩み」と同じ灰地 */
.faq__bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    /* 直後の #contact は上部が角丸なので、その裏側にも灰地を伸ばして
       角の外側が白く抜けるのを防ぐ（角丸ぶん＝PC 100px / SP 50px） */
    height: calc(100% + 100px);
    background-color: #f2f2f2;
    z-index: 0;
}

@media (max-width: 767px) {
    .faq__bg {
        height: calc(100% + 50px);
    }
}

/* コンテンツを前面に */
.faq .container {
    position: relative;
    z-index: 2;
}

/* Add a pseudo-element for background decoration if needed */

.faq__list {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-sm);
}

/* FAQは横幅を広めに使う */
@media (min-width: 992px) {
    .faq .container {
        max-width: 1480px;
    }

    .faq__list {
        grid-template-columns: 1fr 1fr;
        gap: var(--space-lg);
        align-items: start;
    }
}

.faq__column {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
}

.faq__item {
    background-color: var(--color-white);
    border-radius: var(--radius-md);
    overflow: hidden;
    border: 2px solid #000;
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.faq__item:hover {
    border-color: var(--color-primary);
}

.faq__item.is-open {
    box-shadow: var(--shadow-md);
    background-color: var(--color-white);
    border-color: var(--color-primary);
}

/* 開いた質問バーを緑でベタ塗り＋白文字にして目立たせる */
.faq__item.is-open .faq__q {
    background-color: var(--color-primary);
    color: var(--color-text-inverse);
}

.faq__item.is-open .faq__q::before {
    color: var(--color-text-inverse);
}

.faq__item.is-open .faq__icon::before,
.faq__item.is-open .faq__icon::after {
    background-color: var(--color-text-inverse);
}

.faq__q {
    padding: var(--space-md) var(--space-md);
    padding-right: 3.75rem;
    font-weight: 700;
    font-size: clamp(1.0625rem, 0.95rem + 0.5vw, 1.25rem);
    line-height: 1.6;
    cursor: pointer;
    position: relative;
    user-select: none;
    display: flex;
    align-items: center;
    transition: background-color var(--transition-fast), color var(--transition-fast);
}

.faq__q::before {
    content: 'Q';
    color: var(--color-primary);
    font-family: var(--font-family-en);
    font-size: 1.75rem;
    line-height: 1;
    margin-right: 1rem;
    flex-shrink: 0;
}

.faq__icon {
    position: absolute;
    right: 1.75rem;
    top: 50%;
    transform: translateY(-50%);
    width: 24px;
    height: 24px;
}

.faq__icon::before,
.faq__icon::after {
    content: '';
    position: absolute;
    background-color: var(--color-text-main);
    transition: transform var(--transition-fast), background-color var(--transition-fast);
}

.faq__icon::before {
    top: 11px;
    left: 0;
    width: 24px;
    height: 2px;
}

.faq__icon::after {
    top: 0;
    left: 11px;
    width: 2px;
    height: 24px;
}

.faq__item.is-open .faq__icon::after {
    transform: rotate(90deg);
    opacity: 0;
}

.faq__a {
    padding: 0 var(--space-md);
    max-height: 0;
    overflow: hidden;
    transition: max-height var(--transition-normal), padding var(--transition-normal);
    opacity: 0;
    background-color: var(--color-white);
    display: flex;
    align-items: flex-start;
    font-size: clamp(1rem, 0.93rem + 0.32vw, 1.125rem);
    line-height: 1.85;
}

.faq__item.is-open .faq__a {
    padding: var(--space-sm) var(--space-md) var(--space-md) var(--space-md);
    max-height: 800px;
    /* Arbitrary large number */
    opacity: 1;
}

.faq__a::before {
    content: 'A';
    color: var(--color-accent-orange);
    font-family: var(--font-family-en);
    font-size: 1.75rem;
    line-height: 1;
    font-weight: 700;
    margin-right: 1rem;
    flex-shrink: 0;
    margin-top: 0.3rem;
}

@media (max-width: 767px) {
    .faq__q {
        font-size: 1rem;
        /* SPは左右を詰めつつ、上下は指で押せる高さを残す */
        padding: 1.2rem 1rem;
        padding-right: 2.85rem;
        font-weight: 400;
        line-height: 1.6;
    }

    .faq__q::before {
        font-size: 1.375rem;
        margin-right: 0.6rem;
        /* 本文は400にするが、Q/Aの記号だけは太さを揃えて残す */
        font-weight: 700;
    }

    .faq__icon {
        width: 18px;
        height: 18px;
        right: 1rem;
    }

    .faq__icon::before {
        width: 18px;
        top: 8px;
    }

    .faq__icon::after {
        height: 18px;
        left: 8px;
    }

    .faq__a {
        font-size: 0.9375rem;
        line-height: 1.8;
        padding: 0 1rem;
    }

    .faq__a::before {
        font-size: 1.375rem;
        margin-right: 0.6rem;
        margin-top: 0.2rem;
    }

    .faq__item.is-open .faq__a {
        padding: 0.75rem 1rem 1.25rem 1rem;
    }
}


/* ==========================================================================
   Voice (Customer Voice)
   ========================================================================== */
/* ==========================================================================
   Voice (Customer Voice) — モダンリデザイン
   ========================================================================== */
.voice {
    background-color: var(--color-white);
    position: relative;
    overflow: hidden;
    padding: var(--space-xl) 0;
    /* セクション左右の基準余白（カルーセル・見出しを揃える） */
    --voice-px: var(--container-padding);
}

/* 大画面では1320pxのコンテナに固定せず、画面端寄りの余白で全幅を活用する */
@media (min-width: 992px) {
    .voice {
        --voice-px: clamp(48px, 5vw, 120px);
    }
}

/* 緑色の背景パネル */
.voice__decoration {
    position: absolute;
    top: 0;
    left: 0;
    width: calc(100% - 100px);
    /* 右側に余白 */
    height: 100%;
    background-color: var(--color-primary);
    /* 参考画像に近い緑色 */
    border-radius: 0 160px 0 0;
    z-index: 1;
}

@media (min-width: 992px) {
    .voice__decoration {
        width: calc(100% - 200px);
        /* デスクトップではもう少し広めに空ける */
        border-radius: 0 240px 0 0;
    }
}

.voice .container {
    z-index: 2;
}

/* 大画面ではコンテナ幅の制約を外し、画面端寄りの余白で広く使う */
@media (min-width: 992px) {
    .voice .container {
        max-width: 100%;
        /* 左側はゆとりを持たせ、右側は画面端まで伸ばす基準余白を維持 */
        padding-left: clamp(64px, 7vw, 180px);
        padding-right: var(--voice-px);
    }
}

.voice__header {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-bottom: var(--space-sm);
    /* 余白を詰める */
}

@media (min-width: 992px) {
    .voice__header {
        /* コンテナの左右余白に収め、見出しを左の余白基準に揃える */
        margin-right: 0;
    }

    /* 矢印はコンテナ余白を相殺して画面右端寄り（約40px）に配置 */
    .voice__nav {
        right: calc(40px - var(--voice-px));
    }
}

.voice__en {
    display: flex;
    align-items: center;
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--color-white);
    margin-bottom: 0.5rem;
}

.voice__dot {
    display: inline-block;
    width: 12px;
    height: 12px;
    background-color: #ff8e52;
    /* 参考画像のオレンジ */
    border-radius: 50%;
    margin-right: 12px;
}

.voice__title-main {
    font-weight: 800;
    color: var(--color-white);
    margin-bottom: 1rem;
    letter-spacing: 0.05em;
}

/* 見出し下の補足文（緑パネル上に白文字で配置） */
.voice__lead {
    max-width: 44em;
    margin: 0 0 2.5rem;
    font-size: 15px;
    line-height: 1.9;
    color: var(--color-white);
}

@media (min-width: 768px) {
    .voice__lead {
        font-size: 18px;
    }
}

/* カルーセルとナビ矢印の位置基準 */
.voice__carousel-wrap {
    position: relative;
}

/* 矢印はカルーセル右上（見出し横の元位置）に絶対配置で復元 */
.voice__nav {
    display: flex;
    gap: 12px;
    position: absolute;
    right: 0;
    bottom: 100%;
    margin-bottom: calc(var(--space-sm) + 10px);
    z-index: 5;
}

.voice__arrow {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background-color: #333;
    color: var(--color-white);
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all var(--transition-fast);
}

.voice__arrow:hover {
    background-color: #444;
    transform: scale(1.05);
}

.voice__carousel {
    display: flex;
    /* カード間の隙間（共通変数より詰めて最大40px程度に） */
    gap: clamp(20px, 2.2vw, 40px);
    overflow-x: auto;
    padding: 5px 0 60px;
    /* 上の余白をさらに詰め、シャドウが見える最小限に */
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
}

.voice__carousel::-webkit-scrollbar {
    display: none;
}

@media (min-width: 992px) {
    .voice__carousel {
        /* 左はコンテナ余白で見出しと揃え、右はpaddingを相殺して画面端まで伸ばす */
        margin-right: calc(-1 * var(--voice-px));
        padding-right: var(--voice-px);
    }
}

.voice__card {
    flex: 0 0 calc(100% - 60px);
    /* 40pxから60pxに変更して余白を確保 */
    background-color: var(--color-white);
    color: var(--color-text-main);
    border-radius: 24px;
    /* 大きめの角丸 */
    border: 2px solid #000;
    overflow: hidden;
    scroll-snap-align: center;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
    /* 薄いシャドウを追加 */
    transition: transform var(--transition-normal), box-shadow var(--transition-normal);
}

@media (min-width: 768px) {
    .voice__card {
        flex: 0 0 480px;
        /* カードをさらに大きく (420px -> 480px) */
        scroll-snap-align: start;
    }
}

.voice__card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.08);
}

.voice__image img {
    width: 100%;
    aspect-ratio: 16/10;
    object-fit: cover;
}

.voice__content {
    padding: 2rem;
}

.voice__category {
    display: inline-block;
    font-size: 0.85rem;
    color: #333;
    background-color: #e5e5e5;
    padding: 0.4rem 1.2rem;
    border-radius: 20px;
    font-weight: 700;
    margin-bottom: 1.2rem;
}

.voice__title {
    font-size: 1.2rem;
    font-weight: 800;
    line-height: 1.5;
    margin-bottom: 1.1rem;
    color: #000;
}

.voice__company {
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--color-primary-dark, #62b850);
    margin-bottom: 0.6rem;
    line-height: 1.4;
}

.voice__tags {
    display: flex;
    gap: 1rem;
}

.voice__tags span {
    font-size: 0.85rem;
    color: #999;
}

/* スマホ時の調整（基本ルールより後ろに置いて確実に上書きする） */
@media (max-width: 767px) {
    /* セクションの上下paddingを72pxで揃える */
    .voice {
        padding: 72px 0;
    }

    /* 緑背景を画面幅いっぱいに・角丸は弱める */
    .voice__decoration {
        width: 100%;
        border-radius: 0 60px 0 0;
    }

    /* フレックスを解除し、見出し・本文を横幅100%で使う */
    .voice__header {
        display: block;
    }

    .voice__lead {
        max-width: 100%;
    }

    /* カード内のタイトル・会社名を少し小さく */
    .voice__title {
        font-size: 1rem;
    }

    .voice__company {
        font-size: 0.85rem;
    }

    /* 本文エリアのpaddingを詰める */
    .voice__content {
        padding: 1.25rem;
    }

    /* カルーセルを画面端まで広げ、両隣のカードが画面端まで自然に覗くようにする
       （コンテナ余白の内側で切れて緑背景が見える＝見切れを防ぐ）。下padding 60pxも削除 */
    .voice__carousel {
        margin-left: calc(-1 * var(--container-padding));
        margin-right: calc(-1 * var(--container-padding));
        padding-bottom: 0;
    }

    /* 中央カードを少し細くして、両隣のカードがもう少し見えるようにする */
    .voice__card {
        flex-basis: calc(100% - 100px);
    }

    /* 矢印を中央カードの左右両端に重ねて配置 */
    .voice__nav {
        top: 50%;
        bottom: auto;
        left: 0;
        right: 0;
        transform: translateY(-50%);
        margin: 0;
        padding: 0 12px;
        justify-content: space-between;
        pointer-events: none;
        /* 矢印自体だけクリック可能にし、中央はスワイプを妨げない */
    }

    .voice__arrow {
        width: 40px;
        height: 40px;
        pointer-events: auto;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
    }
}

/* ==========================================================================
   Contact
   ========================================================================== */
/* ==========================================================================
   Contact — 画像付きリデザイン
   ========================================================================== */
.contact {
    /* セクション全体をグリーンに（旧：上部バナーのみ） */
    position: relative;
    background-color: var(--color-primary);
    /* 料金プランと同じ紙目。中間グレー基準のタイルを soft-light で重ねるので、
       緑の色味は変えずにムラだけが乗る */
    background-image: url('assets/paper-grain-overlay.webp');
    background-repeat: repeat;
    background-size: 256px 256px;
    background-blend-mode: soft-light;
    border-radius: 100px 100px 0 0;
    /* 極端な角丸 */
    padding: 0 0 60px;
    overflow: hidden;
}

@media (max-width: 767px) {
    .contact {
        border-radius: 50px 50px 0 0;
        padding: 0 0 40px;
    }
}

/* 上部バナー（背景は .contact 側に統合） */
.contact__banner {
    background-color: transparent;
    padding: 110px 20px 200px;
    text-align: center;
    color: var(--color-white);
}

@media (max-width: 767px) {
    .contact__banner {
        padding: 80px 10px 140px;
        /* スマホ：CONTACT・タイトル・説明文すべて左寄せ */
        text-align: left;
    }

    /* スマホ：説明文の横幅を確保するため内側コンテナの左右余白を詰める */
    .contact__banner .container {
        padding-inline: 12px;
    }
}

/* === 背景の装飾シェイプ（Teraceロゴマーク＋三角・うっすら白） === */
.contact__shapes {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    overflow: hidden;
}

/* 装飾より前面にコンテンツを置く */
.contact__banner,
.contact>.container {
    position: relative;
    z-index: 1;
}

.contact__shape {
    position: absolute;
    width: var(--size);
    height: var(--size);
    transform: rotate(var(--rot, 0deg));
    will-change: transform;
}

.contact__shape::before {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--bg, #fff) center / contain no-repeat;
    clip-path: var(--clip, none);
    opacity: var(--op, 0.1);
    will-change: transform;
    animation: contactDrift var(--dur, 18s) ease-in-out var(--delay, 0s) infinite;
}

/* 大きいシェイプ用：ごくゆっくり漂う */
@keyframes contactDrift {
    0% {
        transform: translate3d(0, 0, 0) rotate(0deg);
    }

    25% {
        transform: translate3d(12px, -16px, 0) rotate(1.4deg);
    }

    50% {
        transform: translate3d(-10px, -24px, 0) rotate(-1.2deg);
    }

    75% {
        transform: translate3d(-14px, -10px, 0) rotate(0.9deg);
    }

    100% {
        transform: translate3d(0, 0, 0) rotate(0deg);
    }
}

/* 1: 特大ロゴ（左上・左端から見切れる） */
.contact__shape--logo-a {
    top: 1%;
    left: -10%;
    --size: clamp(300px, 38vw, 620px);
    --rot: -13deg;
    --bg: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20500%20500'%3E%3Cg%20fill='none'%20stroke='%23fff'%20stroke-width='20'%20stroke-linejoin='round'%20stroke-linecap='round'%3E%3Cpath%20d='M44,240%20A206,206%200%200%201%20456,240%20L313,240%20A63,63%200%200%200%20187,240%20Z'/%3E%3Cpath%20d='M44,262%20A206,206%200%200%200%20456,262%20Z'/%3E%3C/g%3E%3C/svg%3E");
    --op: 0.24;
    --dur: 21s;
    --delay: 0s;
}

/* 2: 特大三角（右・中段／逆さで見切れる） */
.contact__shape--tri-a {
    top: 41%;
    right: -9%;
    --size: clamp(210px, 28vw, 470px);
    --rot: 152deg;
    --bg: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20100%20100'%3E%3Cpolygon%20points='50,7%2093,93%207,93'%20fill='none'%20stroke='%23fff'%20stroke-width='5'%20stroke-linejoin='round'/%3E%3C/svg%3E");
    --op: 0.26;
    --dur: 23s;
    --delay: -8s;
}

@media (max-width: 767px) {
    .contact__shape--logo-a {
        top: 1%;
        left: -30%;
    }

    .contact__shape--tri-a {
        top: 36%;
        right: -26%;
    }
}

@media (prefers-reduced-motion: reduce) {
    .contact__shape::before {
        animation: none;
    }
}

.contact__dot {
    display: inline-block;
    width: 12px;
    height: 12px;
    background-color: #ff8e52;
    /* 参考画像のオレンジ */
    border-radius: 50%;
    margin-right: 12px;
    z-index: 5;
}

.contact__en {
    display: block;
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    margin-bottom: 0.5rem;
    opacity: 0.9;
}

.contact__title {
    font-size: 2.5rem;
    font-weight: 800;
    color: var(--color-white);
    margin-bottom: 1.5rem;
}

.contact__desc {
    font-size: 1rem;
    line-height: 2;
    max-width: 600px;
    margin: 0 auto;
    text-align: center;
}

@media (max-width: 767px) {
    .contact__desc {
        font-size: 15px;
        text-align: left;
    }

    .contact__desc br {
        display: none;
    }
}

/* 白いフローティングカード */
.contact__card {
    background: var(--color-white);
    border: 2px solid #333;
    /* 画像にあるはっきりした枠線 */
    border-radius: 50px;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
    max-width: 980px;
    margin: -140px auto 100px;
    /* バナーに大きく被せる */
    padding: 60px 20px;
    position: relative;
    z-index: 10;
}

@media (max-width: 767px) {
    /* スマホ：カード外側（画面端〜カード）の余白を詰めてフォーム幅を確保 */
    .contact>.container {
        padding-inline: 12px;
    }

    .contact__card {
        /* カード幅が狭いSPでは、PC同等の丸みだと角が過剰に効いて見える */
        border-radius: 20px;
        padding: 40px 20px;
        margin-top: -100px;
        margin-bottom: 60px;
    }
}

@media (min-width: 768px) {
    .contact__card {
        padding: 50px 80px;
    }
}

.form-title {
    text-align: center;
    font-size: 2rem;
    font-weight: 800;
    margin-bottom: 50px;
}

@media (max-width: 767px) {
    .contact__title {
        font-size: 24px;
        margin-bottom: 1rem;
    }

    .form-title {
        font-size: 20px;
        margin-bottom: 24px;
    }
}

/* フォームの各行（PC時は横並び） */
.form-group {
    border-top: 1px dotted #ccc;
    /* 画像にあるドットの区切り線 */
    padding: 30px 0;
    display: flex;
    flex-direction: column;
    gap: 15px;
}

@media (max-width: 767px) {
    .form-group {
        padding: 20px 0;
        gap: 10px;
    }
}

.form-group:first-of-type {
    border-top: none;
}

.form-group:last-of-type {
    border-bottom: 1px dotted #ccc;
    margin-bottom: 40px;
}

@media (min-width: 768px) {
    .form-group {
        flex-direction: row;
        align-items: center;
        gap: 40px;
    }

    .form-label {
        width: 180px;
        flex-shrink: 0;
    }

    .form-control {
        flex: 1;
    }
}

.form-label {
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 800;
    font-size: 1rem;
}

@media (max-width: 767px) {
    .form-label {
        font-size: 15px;
    }
}

/* バッジのカラーを画像に合わせる */
.badge {
    font-size: 0.7rem;
    font-weight: 700;
    padding: 2px 10px;
    border-radius: 4px;
    white-space: nowrap;
}

.badge--optional {
    background-color: #8da6ca;
    /* 画像の淡いブルーに近い色 */
    color: var(--color-white);
}

.badge--required {
    background-color: #f28b8b;
    /* 画像の淡い赤に近い色 */
    color: var(--color-white);
}

/* 入力フィールド */
.form-control {
    width: 100%;
    padding: 16px 20px;
    border: 1px solid #dcdcdc;
    border-radius: 4px;
    background-color: #f5f5f5;
    /* 画像の薄グレー */
    font-family: inherit;
    font-size: 1rem;
    transition: background-color 0.3s, border-color 0.3s;
}

@media (max-width: 767px) {
    .form-control {
        padding: 12px 16px;
        font-size: 15px;
    }
}

.form-control:focus {
    outline: none;
    background-color: #ececec;
}

textarea.form-control {
    resize: vertical;
    min-height: 160px;
}

/* 希望するプラン（選択式ラジオ） */
.plan-select {
    display: grid;
    gap: 10px;
    width: 100%;
}

@media (min-width: 768px) {
    .plan-select {
        flex: 1;
        gap: 12px;
    }
}

.plan-option {
    position: relative;
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 14px;
    padding: 16px 20px;
    border: 2px solid var(--color-gray-200);
    border-radius: var(--radius-sm);
    background-color: var(--color-white);
    cursor: pointer;
    transition: border-color var(--transition-fast);
}

@media (max-width: 767px) {
    .plan-option {
        grid-template-columns: auto 1fr;
        row-gap: 2px;
        padding: 14px 16px;
        gap: 12px;
    }
}

@media (hover: hover) {
    .plan-option:hover {
        border-color: #a9d79f;
    }
}

/* 選択中：枠の色で「いま選んでいる行」を示す（地は白のまま） */
.plan-option:has(.plan-option__input:checked) {
    border-color: var(--color-primary);
}

/* ネイティブのラジオは隠して、丸印は自前で描く（ブラウザ差をなくす） */
.plan-option__input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
    margin: 0;
    pointer-events: none;
}

.plan-option__mark {
    width: 22px;
    height: 22px;
    border: 2px solid #c4c4c4;
    border-radius: 50%;
    background-color: var(--color-white);
    display: grid;
    place-items: center;
    flex-shrink: 0;
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.plan-option__mark::after {
    content: "";
    /* 枠の内側は 18px（22px - 枠2px×2）。中の丸を奇数の11pxにすると
       余白が3.5pxずつになり、端数の丸めで上と右に1pxずれる。
       偶数の10pxにして、上下左右とも4pxちょうどで囲む */
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: var(--color-primary);
    transform: scale(0);
    transition: transform var(--transition-fast);
}

.plan-option__input:checked+.plan-option__mark {
    border-color: var(--color-primary);
}

.plan-option__input:checked+.plan-option__mark::after {
    transform: scale(1);
}

/* キーボード操作時のフォーカス位置がわかるように */
.plan-option__input:focus-visible+.plan-option__mark {
    box-shadow: 0 0 0 4px rgba(98, 184, 80, 0.25);
}

.plan-option__name {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 1rem;
    font-weight: 800;
    line-height: 1.4;
}

.plan-option__meta {
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--color-text-muted);
    white-space: nowrap;
}

@media (max-width: 767px) {
    .plan-option__name {
        font-size: 15px;
    }

    /* スマホ：金額は名前の下へ回す */
    .plan-option__meta {
        grid-column: 2 / 3;
        font-size: 12px;
    }
}

.plan-option__tag {
    padding: 2px 8px;
    border-radius: var(--radius-full);
    background-color: var(--color-accent-orange);
    color: var(--color-white);
    font-size: 0.7rem;
    font-weight: 700;
    line-height: 1.6;
    white-space: nowrap;
}

.form-submit {
    text-align: center;
}

.btn--submit {
    background-color: var(--color-accent-orange);
    color: var(--color-white);
    font-size: 1.1rem;
    font-weight: 700;
    padding: 18px 60px;
    border-radius: 100px;
    transition: all var(--transition-normal);
    box-shadow: 0 10px 20px rgba(255, 142, 63, 0.15);
    width: 100%;
    max-width: 320px;
}

@media (max-width: 767px) {
    .btn--submit {
        padding: 12px 30px;
        font-size: 1rem;
        max-width: 220px;
    }
}

.btn--submit:hover {
    background-color: #ff7d26;
    transform: translateY(-3px);
    box-shadow: 0 15px 30px rgba(255, 142, 63, 0.25);
}

.btn--submit.is-submitting {
    opacity: 0.7;
    pointer-events: none;
}

/* ==========================================================================
   Bottom CTA
   ========================================================================== */
.bottom-cta {
    padding: 0;
    overflow: hidden;
}

.bottom-cta__split {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
}

/* CTAが1本（無料相談のみ）のとき：横幅いっぱいに1ボックス */
.bottom-cta__split--single .cta-box {
    flex: 1 1 100%;
}

.cta-box {
    flex: 1;
    min-width: 320px;
    padding: 104px 40px;
    text-align: center;
    position: relative;
    color: var(--color-white);
    display: flex;
    flex-direction: column;
    align-items: center;
    overflow: hidden;
}

@media (max-width: 767px) {
    .cta-box {
        padding: 68px 20px;
    }
}

.cta-box > * {
    position: relative;
    z-index: 1;
}

.cta-box--contact {
    background-color: #241a12;
    /* 中の position: fixed をこのボックスの形に切り抜く。
       overflow: hidden では fixed を切り取れないので clip-path を使う */
    -webkit-clip-path: inset(0);
    clip-path: inset(0);
}

/* 背景写真（リフト車）：ビューポートに固定し、スクロールで覗く窓のように見せる */
.cta-photo-bg {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    z-index: 0;
    background-image: url('assets/contact-bg.webp');
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    pointer-events: none;
}

/* 視差を望まない設定のときは、素直にセクションへ貼る */
@media (prefers-reduced-motion: reduce) {
    .cta-photo-bg {
        position: absolute;
        inset: 0;
        width: auto;
        height: auto;
    }
}

/* 暗転：写真の上に落とす。白カードと文字の可読性を確保する。
   全面を濃くすると写真が18%しか通らずリフト車が読めないので、
   文字が乗る左側だけスクリムで守り、面の暗転は薄くする。
   実測：写真の通過率18%→約45%、白文字コントラストは最悪4.0:1を維持 */
.cta-photo-bg::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(90deg, rgba(26, 16, 8, 0.34) 0%, rgba(26, 16, 8, 0) 55%),
        linear-gradient(180deg, rgba(26, 16, 8, 0.40) 0%, rgba(26, 16, 8, 0.30) 50%, rgba(26, 16, 8, 0.46) 100%),
        linear-gradient(135deg, rgba(240, 130, 45, 0.14), rgba(0, 0, 0, 0.20));
}

/* モバイルは1カラムで文字が全幅に乗るため、左スクリムでは守れない。
   面の暗転を戻して補う（それでも現状の約2倍明るい・最悪4.1:1） */
@media (max-width: 767px) {
    .cta-photo-bg::after {
        background:
            linear-gradient(90deg, rgba(26, 16, 8, 0.20) 0%, rgba(26, 16, 8, 0) 55%),
            linear-gradient(180deg, rgba(26, 16, 8, 0.52) 0%, rgba(26, 16, 8, 0.44) 50%, rgba(26, 16, 8, 0.58) 100%),
            linear-gradient(135deg, rgba(240, 130, 45, 0.14), rgba(0, 0, 0, 0.20));
    }
}

/* 2カラム：左にキャッチと申し込み、右に相談内容のカード */
.cta-inner {
    width: 100%;
    /* コンテナ幅いっぱいだと左右が離れすぎるので絞る */
    max-width: 1440px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: clamp(2rem, 3vw, 3rem);
}

.cta-lead {
    flex: 1 1 0;
    min-width: 0;
    text-align: left;
    color: var(--color-white);
}

.cta-lead__catch {
    font-family: var(--font-family-heading);
    font-size: clamp(1.375rem, 1.05rem + 2vw, 2.5rem);
    font-weight: 700;
    line-height: 1.6;
    letter-spacing: 0.07em;
    color: var(--color-white);
    text-shadow: 0 2px 16px rgba(0, 0, 0, 0.45);
}

/* 2カラムのときは左カラムの実幅に合わせて縮める。
   「まずは、話を聞かせてください。」を1行に保つための係数 */
@media (min-width: 1150px) {
    .cta-lead__catch {
        font-size: clamp(1.5rem, 2.97vw - 5.19px, 2.5rem);
    }
}

/* キャッチの中の数字を1つだけ立てる */
.cta-lead__num {
    font-family: var(--font-family-en);
    font-style: normal;
    font-weight: 800;
    font-size: 1.95em;
    line-height: 1;
    letter-spacing: 0;
    color: var(--color-accent-orange);
    /* 数字自身の letter-spacing は 0 なので、そのままだと「は」「円」がほぼ接触する。
       前後の余白はこの margin だけで作る（左は見出しの字間0.07emが加わる分だけ小さく） */
    margin: 0 0.13em 0 0.09em;
    /* 欧文の数字はベースラインで止まるが「円」の墨はその下まで伸びるため、
       素のままだと大きい数字だけ上に浮く。実測2.2px(親比0.055em)を下げて底を揃える */
    vertical-align: -0.03em;
}

/* ボタン2本を横並びに。2カラムのとき左カラムは 1150px 幅で約535pxまで
   縮むので、基準幅240pxで割り付けて、入らなくなったら折り返す */
.cta-lead__btns {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-top: 2.25rem;
}

.cta-lead__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /* 2本を等幅で分け合う。240pxは「無料で相談する」＋丸アイコンが収まる下限 */
    flex: 1 1 240px;
    min-width: 0;
    gap: 10px;
    padding: 15px 22px;
    background-color: var(--color-accent-orange);
    color: var(--color-white);
    font-family: var(--font-family-heading);
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1.4;
    letter-spacing: 0.03em;
    white-space: nowrap;
    text-decoration: none;
    border-radius: 100px;
    box-shadow: 0 18px 38px rgba(0, 0, 0, 0.32);
}

/* LINEはブランド色（#06C755）のまま使う。追従CTAのボタンと同じ考え方で、
   サイトの緑に寄せるとLINEのボタンだと気づかれず、押される率が落ちる */
.cta-lead__btn--line {
    background-color: #06c755;
}

.cta-lead__btn-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.45);
}

.cta-lead__btn-icon svg {
    width: 20px;
    height: 20px;
}

.cta-note {
    margin-top: 0.875rem;
    font-size: 0.8125rem;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.72);
}

/* 右：どんな相談を受けているかを白いカードで並べる */
/* 右カラム：一言 ＋ カード */
.cta-aside {
    /* 左カラムと半々。固定幅にすると狭い画面で左が潰れる */
    flex: 1 1 0;
    min-width: 0;
}

.cta-aside__lead {
    display: flex;
    /* イラストはカードに接地させたまま、文言はその中央に置く */
    align-items: center;
    justify-content: flex-start;
    gap: 0.5rem;
    font-family: var(--font-family-heading);
    font-size: clamp(1.125rem, 0.9rem + 0.9vw, 1.5rem);
    font-weight: 700;
    line-height: 1.6;
    letter-spacing: 0.04em;
    color: var(--color-white);
    text-shadow: 0 2px 12px rgba(0, 0, 0, 0.45);
    margin-bottom: 0;
    padding-left: 0.5rem;
}

.cta-aside__icon {
    flex: 0 0 auto;
    width: auto;
    height: 92px;
    /* 暗い写真の上で輪郭が沈まないよう、うっすら影を敷く */
    filter: drop-shadow(0 3px 10px rgba(0, 0, 0, 0.45));
}

.cta-cases {
    list-style: none;
    margin: 0;
    padding: 0;
    text-align: left;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
}

.cta-case {
    background-color: var(--color-white);
    border-radius: 16px;
    padding: 1.75rem 1.5rem;
    box-shadow: 0 16px 36px rgba(0, 0, 0, 0.18);
}

.cta-case__icon {
    display: block;
    color: var(--color-accent-orange);
    margin-bottom: 0.875rem;
    line-height: 0;
}

.cta-case__label {
    display: block;
    font-family: var(--font-family-heading);
    font-size: 1.125rem;
    font-weight: 700;
    line-height: 1.5;
    color: var(--color-text-main);
    margin-bottom: 0.5rem;
}

.cta-case__text {
    font-size: 1rem;
    line-height: 1.8;
    color: var(--color-text-muted);
}

@media (max-width: 1149px) {
    .cta-inner {
        flex-direction: column;
        align-items: stretch;
        gap: 2rem;
        max-width: 720px;
    }

    .cta-aside {
        flex: 0 0 auto;
        width: 100%;
    }
}

@media (max-width: 767px) {
    .cta-case__text {
        font-size: 14px;
    }

    .cta-lead__catch {
        /* 375px幅で「まずは、お話を聞かせてください。」が1行に収まるサイズ */
        font-size: 1.1875rem;
        line-height: 1.6;
    }

    /* 横に2本並べると1本あたりが狭すぎるので、縦に積む */
    .cta-lead__btns {
        flex-direction: column;
        gap: 12px;
        margin-top: 1.5rem;
    }

    .cta-lead__btn {
        /* 縦並びでは flex-basis が高さの指定になってしまうので、内容なりに戻す */
        flex: 0 0 auto;
        width: 100%;
        padding: 14px 24px;
        gap: 14px;
        font-size: 1.125rem;
    }

    .cta-lead__btn-icon {
        width: 36px;
        height: 36px;
    }

    .cta-note {
        text-align: center;
    }

    /* 縦に伸びすぎないよう、アイコンを左に置いた横並びにする */
    .cta-cases {
        grid-template-columns: 1fr;
        gap: 0.625rem;
    }

    .cta-aside__lead {
        font-size: 1rem;
    }

    .cta-aside__icon {
        height: 68px;
    }

    /* アイコンは文字の左でなく上に置く（PCと同じ縦積み） */
    .cta-case {
        display: block;
        padding: 1.25rem 1.125rem;
    }

    .cta-case__icon {
        margin-bottom: 0.625rem;
    }

    .cta-case__icon svg {
        width: 26px;
        height: 26px;
    }

    .cta-case__label {
        font-size: 16px;
        margin-bottom: 0.375rem;
    }
}

/* ==========================================================================
   Footer
   ========================================================================== */
.footer {
    background-color: #1a1a1a;
    color: var(--color-white);
    padding: var(--space-xl) 0;
    position: relative;
}

.footer__container {
    display: flex;
    flex-direction: column;
    gap: 4rem;
}

.footer__main {
    display: flex;
    flex-direction: column;
    gap: 3rem;
}

@media (min-width: 768px) {
    .footer__main {
        flex-direction: row;
        justify-content: space-between;
        align-items: flex-start;
    }
}

.footer__left {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.footer__logo {
    font-family: var(--font-family-heading);
    font-size: 2rem;
    color: var(--color-white);
    margin: 0;
    letter-spacing: 0.05em;
    font-weight: 800;
}

.footer__logo a {
    color: inherit;
    text-decoration: none;
}

.footer__company-info {
    font-size: 0.85rem;
    line-height: 2;
    color: rgba(255, 255, 255, 0.6);
}

.footer__company-name {
    font-weight: 700;
    margin-bottom: 0.2rem;
}

.footer__copy {
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.4);
}

.footer__bottom-row {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding-top: 2rem;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

@media (min-width: 768px) {
    .footer__bottom-row {
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
    }
}

.footer__right {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

@media (min-width: 768px) {
    .footer__right {
        align-items: flex-end;
        text-align: right;
    }
}

.footer__nav-links {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem 2rem;
    margin: 0;
    padding: 0;
    justify-content: flex-end;
}

.footer__nav-links a {
    color: rgba(255, 255, 255, 0.8);
    text-decoration: none;
    font-size: 0.95rem;
    font-weight: 500;
    transition: color var(--transition-fast);
}

.footer__nav-links a:hover {
    color: var(--color-white);
}

.footer__legal {
    display: flex;
    gap: 1.5rem;
}

.footer__legal a {
    color: rgba(255, 255, 255, 0.4);
    text-decoration: none;
    font-size: 0.75rem;
    transition: color var(--transition-fast);
}

.footer__legal a:hover {
    color: rgba(255, 255, 255, 0.8);
}

@media (max-width: 767px) {
    /* スマホ：フッターは補助情報なので、文字・余白とも一段小さく締める */
    .footer {
        padding: 2.5rem 0;
    }

    .footer__container {
        gap: 2rem;
    }

    .footer__main {
        gap: 1.75rem;
        align-items: flex-start;
        text-align: left;
    }

    .footer__left,
    .footer__right {
        display: contents;
    }

    .footer__logo {
        order: 1;
        font-size: 1.35rem;
    }

    .footer__nav-group {
        order: 2;
        width: 100%;
    }

    .footer__nav-links {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.85rem;
    }

    .footer__nav-links a {
        font-size: 0.9rem;
    }

    .footer__company-info {
        order: 3;
        font-size: 0.75rem;
        line-height: 1.8;
    }

    .footer__address-zip {
        display: block;
    }

    .footer__bottom-row {
        padding-top: 1.25rem;
        gap: 0.75rem;
    }

    .footer__copy {
        font-size: 0.7rem;
    }

    /* 3本並ぶと375pxではみ出すので折り返す */
    .footer__legal {
        flex-wrap: wrap;
        gap: 0.5rem 1rem;
    }

    .footer__legal a {
        font-size: 0.7rem;
    }
}

.page-top {
    position: absolute;
    right: 20px;
    top: -30px;
    width: 60px;
    height: 60px;
    background-color: var(--color-primary);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: var(--shadow-md);
    transition: transform var(--transition-fast);
}

.page-top::before {
    content: '';
    width: 12px;
    height: 12px;
    border-top: 2px solid var(--color-white);
    border-right: 2px solid var(--color-white);
    transform: rotate(-45deg);
    margin-top: 6px;
}

.page-top:hover {
    transform: translateY(-5px);
}

/* Utilities */
.relative {
    position: relative;
}

.overflow-hidden {
    overflow: hidden;
}

/* ==========================================================================
   Drawer Menu & Hamburger
   ========================================================================== */

/* Hamburger Button */
.header__hamburger {
    display: none;
    flex-direction: column;
    justify-content: space-between;
    width: 24px;
    height: 16px;
    z-index: 1100;
    transition: all var(--transition-normal);
    padding: 0;
}

@media (max-width: 991px) {
    .header__hamburger {
        display: flex;
    }
}

.header__hamburger span {
    display: block;
    width: 100%;
    height: 2.5px;
    /* 透過ヘッダーの既定は緑のヒーローの上なので白 */
    background-color: #ffffff;
    border-radius: 2.5px;
    transition: all var(--transition-normal);
}

/* 白地に変わったとき／白いドロワーの上に重なるときは濃い色へ戻す */
.header.is-scrolled .header__hamburger span,
body.is-drawer-open .header__hamburger span {
    background-color: var(--color-gray-800);
}

/* Hamburger X Morph （線2.5px・高さ16px基準: (16-2.5)/2 = 6.75px） */
.header__hamburger.is-active span:nth-child(1) {
    transform: translateY(6.75px) rotate(45deg);
}

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

.header__hamburger.is-active span:nth-child(3) {
    transform: translateY(-6.75px) rotate(-45deg);
}

/* Drawer Container */
.drawer {
    position: fixed;
    top: 15px;
    right: -100%;
    width: calc(100% - 30px);
    max-width: 320px;
    height: calc(100vh - 30px);
    background-color: var(--color-white);
    z-index: 1050;
    transition: right var(--transition-normal);
    box-shadow: -10px 0 30px rgba(0, 0, 0, 0.05);
    border-radius: 30px;
    border: 1px solid rgba(0, 0, 0, 0.1);
}

.drawer.is-open {
    right: 0;
}

.drawer__inner {
    height: 100%;
    display: flex;
    flex-direction: column;
    padding: 30px 30px 40px;
}

.drawer__header {
    display: flex;
    align-items: center;
    /* 左にロゴ、右に閉じるボタン */
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 40px;
}

/* ドロワーは白地なので、ヘッダーのスクロール後と同じ緑のロゴにする */
.drawer__logo {
    font-family: var(--font-family-heading);
    font-size: 1.05rem;
    font-weight: 800;
    letter-spacing: -0.03em;
    line-height: 1.2;
    color: var(--color-primary);
    margin: 0;
}

.drawer__logo a {
    color: inherit;
    text-decoration: none;
}

.drawer__close {
    width: 24px;
    height: 24px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.drawer__close span {
    position: absolute;
    width: 100%;
    height: 1.5px;
    background-color: var(--color-gray-800);
    border-radius: 1.5px;
}

.drawer__close span:nth-child(1) {
    transform: rotate(45deg);
}

.drawer__close span:nth-child(2) {
    transform: rotate(-45deg);
}

.drawer__nav {
    margin-bottom: 40px;
}

.drawer__nav-list {
    display: flex;
    flex-direction: column;
    /* 距離を縮め、項目間に区切り線を入れて「ひとかたまりのメニュー」として見せる */
    gap: 0;
}

.drawer__nav-list li + li {
    border-top: 1px solid var(--color-gray-200);
}

.drawer__nav-list a {
    font-size: 1.125rem;
    font-weight: 700;
    font-family: var(--font-family-heading);
    color: var(--color-gray-800);
    position: relative;
    display: block;
    padding: 0.85rem 0;
}

.drawer__nav-list a::after {
    content: '';
    position: absolute;
    bottom: 0.55rem;
    left: 0;
    width: 0;
    height: 2px;
    background-color: var(--color-primary);
    transition: width var(--transition-normal);
}

.drawer__nav-list a:hover::after {
    width: 100%;
}

.drawer__buttons {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.drawer__btn {
    width: 100%;
    gap: 10px;
    padding: 1.15rem 1.5rem;
    font-size: 1.05rem;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2);
}

.drawer__btn--contact {
    background-color: var(--color-accent-orange);
    color: var(--color-white);
}

.drawer__btn--contact:hover {
    background-color: #ff7d38;
}

.drawer__btn-icon {
    width: 32px;
    height: 32px;
    background-color: var(--color-white);
    color: var(--color-primary);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Drawer Overlay */
.drawer-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(4px);
    z-index: 1040;
    opacity: 0;
    visibility: hidden;
    transition: all var(--transition-normal);
}

.drawer-overlay.is-visible {
    opacity: 1;
    visibility: visible;
}

/* Body Lock */
body.is-drawer-open {
    overflow: hidden;
}

@media (max-width: 767px) {
    .header__inner {
        height: 60px;
        /* ハンバーガーの右余白をロゴの左余白(18px)と揃える */
        padding: 0 18px;
    }

    .header__logo {
        font-size: 1.05rem;
        letter-spacing: -0.03em;
    }

    .header__hamburger {
        width: 28px;
        height: 20px;
    }

    /* スマホは高さ20px基準でX化: (20-2.5)/2 = 8.75px */
    .header__hamburger.is-active span:nth-child(1) {
        transform: translateY(8.75px) rotate(45deg);
    }

    .header__hamburger.is-active span:nth-child(3) {
        transform: translateY(-8.75px) rotate(-45deg);
    }

    /* 狭い端末でもロゴと並ぶよう、スマホはわずかに詰める */
    .header__btn-mobile {
        height: 40px;
        padding: 0 15px;
    }
}

/* ハンバーガー本体が .header__mobile-actions の中にあるため、
   タブレット幅（768〜991px）でも器ごと表示しないとナビが消える */
@media (max-width: 991px) {
    .header__mobile-actions {
        display: flex;
        align-items: center;
        gap: 12px;
    }
}

/* ==========================================================================
   Download Page Styles
   ========================================================================== */
/* 白地のページではヒーローが無いので、最初から白ヘッダーとして扱う */
.page-download .header {
    background-color: rgba(255, 255, 255, 0.92);
    backdrop-filter: blur(12px);
}

.page-download .header__logo {
    color: var(--color-primary);
}

.page-download .header__nav-list a {
    color: #333;
}

.page-download .header__hamburger span {
    background-color: var(--color-gray-800);
}

.download-hero {
    padding-top: 140px;
    padding-bottom: 60px;
    background-color: #f7fafc;
    position: relative;
    border-bottom: 1px solid var(--color-gray-100);
}

@media (max-width: 991px) {
    .download-hero {
        padding-top: 130px;
        padding-bottom: 40px;
    }
}

@media (max-width: 767px) {
    .download-hero {
        padding-top: 110px;
        padding-bottom: 30px;
    }
}

.download-hero__inner {
    max-width: 800px;
    margin: 0 auto;
    text-align: center;
}

@media (max-width: 767px) {
    .download-hero__inner .section-en {
        font-size: 0.85rem;
    }

    .download-hero__inner .section-title {
        font-size: 24px;
        letter-spacing: 0.1em;
    }
}

.download-hero__desc {
    margin-top: 20px;
    font-size: 1.1rem;
    color: var(--color-text-muted);
}

@media (max-width: 767px) {
    .download-hero__desc {
        font-size: 0.875rem;
        margin-top: 15px;
        line-height: 1.6;

        br {
            display: none;
        }
    }
}

.breadcrumb {
    margin-bottom: 2rem;
    font-size: 0.875rem;
    color: var(--color-text-muted);
    text-align: left;
}

@media (max-width: 767px) {
    .breadcrumb {
        font-size: 0.75rem;
        margin-bottom: 1.5rem;
    }
}

.breadcrumb a {
    transition: color var(--transition-fast);
}

.breadcrumb a:hover {
    color: var(--color-primary);
}

.breadcrumb__separator {
    margin: 0 0.5rem;
}

.download-hero__bg-mesh {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: radial-gradient(at 100% 0%, rgba(98, 184, 80, 0.03) 0px, transparent 50%);
    pointer-events: none;
    z-index: 0;
}

.download-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 40px;
    align-items: start;
}

@media (min-width: 992px) {
    .download-grid {
        grid-template-columns: 1fr 1fr;
    }
}

.material-card {
    background: var(--color-white);
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-md);
    border: 1px solid var(--color-gray-100);
}

.material-image {
    background-color: #f0f4f8;
    padding: 0;
}

.material-image img {
    width: 100%;
    height: auto;
    display: block;
}

.material-info {
    padding: 30px;
}

@media (max-width: 767px) {
    .material-info {
        padding: 30px 20px;
    }
}

.material-title {
    font-size: 1.5rem;
    margin-bottom: 10px;
    color: var(--color-gray-800);
}

@media (max-width: 767px) {
    .material-title {
        font-size: 1.25rem;
    }
}

.material-stats {
    font-size: 0.875rem;
    color: var(--color-primary);
    font-weight: 700;
    margin-bottom: 20px;
}

.material-features {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.material-features li {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 1rem;
    color: var(--color-text-muted);
}

.feature-icon {
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    background-color: var(--color-primary-light);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Form Styling within Download Page */
.download-form-container {
    background: var(--color-white);
    border-radius: var(--radius-lg);
    padding: 40px;
    box-shadow: var(--shadow-lg);
    border: 1px solid var(--color-gray-100);
}

@media (max-width: 767px) {
    .download-form-container {
        padding: 30px 20px;
    }
}

.form-wrapper .form-title {
    font-size: 1.5rem;
    margin-bottom: 12px;
    color: var(--color-black);
    text-align: left;
}

@media (max-width: 767px) {
    .form-wrapper .form-title {
        font-size: 1.25rem;
    }
}

.form-wrapper .form-instruction {
    font-size: 0.95rem;
    color: var(--color-text-muted);
    margin-bottom: 24px;
    text-align: left;
}

@media (max-width: 767px) {
    .form-wrapper .form-instruction {
        font-size: 0.85rem;
        margin-bottom: 20px;
    }
}

.download-form {
    display: flex;
    flex-direction: column;
    gap: 32px;
}

@media (max-width: 767px) {
    .download-form {
        gap: 24px;
    }
}

.download-form .form-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
    align-items: flex-start;
    border: none !important;
    padding: 0 !important;
    margin-bottom: 0 !important;
}

.download-form .form-group:last-of-type {
    border-bottom: none !important;
    margin-bottom: 0 !important;
}

.download-form .form-label {
    font-size: 0.95rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 8px;
    text-align: left;
    margin-bottom: 0;
}

.label-required {
    font-size: 0.7rem;
    padding: 2px 6px;
    background-color: #ff5252;
    color: var(--color-white);
    border-radius: 4px;
    letter-spacing: 0;
}

.download-form .form-control {
    width: 100%;
    padding: 13px 14px;
    border: 1.5px solid var(--color-gray-200);
    border-radius: var(--radius-sm);
    font-size: 1rem;
    transition: all var(--transition-fast);
    background-color: var(--color-white);
}

@media (max-width: 767px) {
    .download-form .form-control {
        padding: 10px 14px;
        font-size: 0.95rem;
    }
}

.download-form .form-control:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 4px var(--color-primary-light);
}

.form-privacy {
    font-size: 0.85rem;
    color: var(--color-text-muted);
    line-height: 1.5;
    margin-top: 4px;
}

.form-privacy a {
    text-decoration: underline;
}

.form-submit {
    margin-top: 8px;
}

.form-submit .btn--submit {
    width: 100%;
    font-size: 1.1rem;
    height: 56px;
}

@media (max-width: 767px) {
    .btn--download-submit {
        font-size: 16px !important;
        max-width: 250px;
        height: 52px !important;
    }
}

/* -------------------------------------------
  Submission Modal
------------------------------------------- */
.modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2000;
    opacity: 0;
    visibility: hidden;
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.modal.is-active {
    opacity: 1;
    visibility: visible;
}

.modal__overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(15, 23, 42, 0.6);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.modal__content {
    position: relative;
    background: #fff;
    width: 90%;
    max-width: 480px;
    padding: 48px 32px;
    border-radius: 32px;
    text-align: center;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    transform: scale(0.9) translateY(20px);
    transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

.modal.is-active .modal__content {
    transform: scale(1) translateY(0);
}

.modal__icon {
    width: 80px;
    height: 80px;
    background: var(--color-primary-light);
    color: var(--color-primary);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 24px;
}

.modal__title {
    font-size: 24px;
    font-weight: 700;
    color: var(--color-text-main);
    margin-bottom: 16px;
    /* もとは未定義の var(--font-zen) を参照しており、指定が無効になっていた */
    font-family: var(--font-family-heading);
}

.modal__text {
    font-size: 16px;
    color: var(--color-text-sub);
    line-height: 1.8;
    margin-bottom: 32px;
}

.modal__btn {
    width: 100%;
    padding: 18px;
    border-radius: 16px;
    font-weight: 700;
    font-size: 16px;
    transition: all 0.3s ease;
}

@media (max-width: 768px) {
    .modal__content {
        padding: 40px 24px;
        border-radius: 24px;
    }

    .modal__title {
        font-size: 20px;
    }

    .modal__text {
        font-size: 15px;
    }
}

/* ==========================================================================
   Works — 制作実績ギャラリー
   ========================================================================== */
/* 上下の余白を広めに確保（共通の .section より一回り大きく取る） */
.works {
    position: relative;
    padding-top: clamp(4.5rem, 3rem + 6vw, 8.5rem);
    padding-bottom: clamp(6.5rem, 4rem + 10vw, 13rem);
    /* 課題提起・制作メンバー・ご利用の流れ・よくある質問と同じ灰地
       （紙目はファイル末尾の共通ルールでまとめて敷く） */
    background-color: #f2f2f2;
}

/* コンテンツを前面に */
.works .container {
    position: relative;
    z-index: 1;
}

.works__lead {
    margin-top: 1.2rem;
    font-size: 15px;
    line-height: 1.9;
    color: var(--color-black);
}

@media (min-width: 768px) {
    .works__lead {
        font-size: 18px;
    }
}

/* leapy.jp の制作実績デザインを再現：4列グリッド＋スラッシュ区切りタグ */
.works__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: clamp(48px, 4.5vw, 72px) clamp(20px, 2.5vw, 38px);
}

/* PC：コンテナの制約を外し、画面幅の約85%を使うワイドなモダンレイアウト */
@media (min-width: 993px) {
    .works__grid {
        width: 85vw;
        margin-left: calc(50% - 42.5vw);
        margin-right: calc(50% - 42.5vw);
    }
}

/* タブレット：2列 */
@media (max-width: 992px) {
    .works__grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* モバイル：2列 */
@media (max-width: 600px) {
    .works__grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 48px 16px;
    }
}

.works__card {
    position: relative;
    display: block;
    color: inherit;
}

/* 画像：16:9・カバー・ホバーでズーム（境目がわかる軽いシャドウ付き） */
.works__img {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    margin-bottom: 16px;
    overflow: hidden;
    border-radius: 4px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08), 0 0 0 1px rgba(0, 0, 0, 0.04);
    transition: box-shadow 0.4s ease;
}

.works__card:hover .works__img {
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12), 0 0 0 1px rgba(0, 0, 0, 0.05);
}

.works__img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top center;
    transition: transform 0.4s ease;
}

.works__card:hover .works__img img {
    transform: scale(1.05);
}

/* タイトル：画像下の小さめ見出し */
.works__ttl {
    font-size: 0.9rem;
    line-height: 1.6;
    font-weight: 700;
    color: var(--color-black);
    margin-bottom: 8px;
    letter-spacing: 0.01em;
    transition: color var(--transition-fast);
}

.works__card:hover .works__ttl {
    color: var(--color-primary-dark);
}

/* タグ：グレーのスラッシュ区切りテキスト */
.works__terms {
    display: flex;
    flex-wrap: wrap;
    list-style: none;
    font-size: 0.8125rem;
    line-height: 1.6;
    letter-spacing: 0.02em;
}

.works__terms li {
    color: var(--color-text-muted);
}

.works__terms li:not(:last-child)::after {
    content: "/";
    margin-inline: 4px;
    color: var(--color-gray-200);
}

/* スマホ：2列でカードが165px前後まで細るので、タイトルとカテゴリを
   カード幅に合わせて一段落とし、画像との間も詰める */
@media (max-width: 600px) {
    .works__img {
        margin-bottom: 10px;
    }

    .works__ttl {
        font-size: 13px;
        line-height: 1.55;
        margin-bottom: 5px;
    }

    .works__terms {
        font-size: 11px;
        line-height: 1.5;
    }

    .works__terms li:not(:last-child)::after {
        margin-inline: 3px;
    }
}

.works__more {
    margin-top: var(--space-lg);
    text-align: center;
}

.works__more-link {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    font-weight: 700;
    color: var(--color-primary-dark);
    border-bottom: 2px solid transparent;
    padding-bottom: 2px;
    transition: border-color var(--transition-fast), gap var(--transition-fast);
}

.works__more-link:hover {
    border-color: var(--color-primary);
    gap: 0.9rem;
}

/* ==========================================================================
   Campaign Bar — ヒーロー直下のキャンペーン告知バー
   ========================================================================== */
.campaign-bar {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0.6rem 1rem;
    padding: 0.85rem 1.4rem;
    background: var(--color-primary-dark);
    color: var(--color-white);
    text-decoration: none;
    font-weight: 700;
    transition: filter var(--transition-fast);
}

.campaign-bar:hover {
    filter: brightness(1.08);
}

.campaign-bar__badge {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    font-size: 0.85rem;
    font-weight: 800;
    padding: 0.3rem 0.9rem;
    border: 1.5px solid rgba(255, 255, 255, 0.7);
    border-radius: var(--radius-full);
}

.campaign-bar__dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: var(--color-white);
    animation: monitor-blink 1.4s ease-in-out infinite;
}

.campaign-bar__text {
    font-size: clamp(0.95rem, 0.85rem + 0.4vw, 1.15rem);
    letter-spacing: 0.01em;
}

.campaign-bar__text strong {
    display: inline-block;
    color: var(--color-primary-dark);
    background-color: var(--color-white);
    font-weight: 900;
    font-size: 1.05em;
    line-height: 1;
    padding: 0.22em 0.55em;
    margin: 0 0.15em;
    border-radius: var(--radius-sm);
}

.campaign-bar__arrow {
    display: inline-flex;
    transition: transform var(--transition-fast);
}

.campaign-bar:hover .campaign-bar__arrow {
    transform: translateX(4px);
}

/* ==========================================================================
   Monitor — モニター施設募集
   ========================================================================== */
.monitor__card {
    position: relative;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    overflow: hidden;
}

@media (max-width: 767px) {
    .monitor__card {
        border-radius: var(--radius-sm);
    }
}

/* ===== バナー画像 ===== */
.monitor__banner-img {
    display: block;
    width: 100%;
    height: auto;
}

/* PC：黒枠を4pxに太くし、立体的なオフセットシャドウを付与 */
@media (min-width: 992px) {

    .flow__card,
    .member__media,
    .faq__item,
    .voice__card,
    .contact__card {
        border-width: 4px;
        box-shadow: 0.4rem 0.4rem 0 rgba(0, 0, 0, 0.1);
    }

    /* PC：その他の黒枠も4pxに太くする（ヘッダーは枠を持たないので対象外） */
    .hero-form-card,
    .hero-form-card__clip,
    .price__card,
    .maintenance__table {
        border-width: 4px;
    }

}

/* ==========================================================================
   ===== taxi additions =====
   介護タクシー版で新設したブロックだけを補う追記。既存ルールは変更していない。
   ========================================================================== */

/* 制作プラン比較表の3列目（既存の col-plan-1 / col-plan-2 と同じ見た目） */
.maintenance__table .col-plan-3 {
    width: 25%;
    background-color: #62b850;
    color: var(--color-white);
}

.maintenance__table .col-plan-3 .plan-price {
    color: var(--color-white);
}

.maintenance__table .col-plan-3 .plan-desc {
    color: rgba(255, 255, 255, 0.85);
}

/* 3プラン比較表は列が増えるため数字を少し小さく（2プランの表には影響しない） */
.maintenance__table--three .plan-price {
    font-size: 2.2rem;
}

/* === 「制作プランの内容」表の見出し色を、上の3枚のカードと揃える ===
   カードの帯（.price__card--ume/--take/--matsu の --plan）と同じ明るさの階段を
   そのまま列見出しに敷き、表とカードでプランの上下が同じ見え方になるようにする。
   触るのは thead の3列だけで、tbody は白のまま（カードの本体が白なのと同じ）。
   オプション表・保守プラン表は --three が付かないので影響しない */
.price.section .maintenance__table--three .col-plan-1 {
    background-color: #f4f4f4;
}

.price.section .maintenance__table--three .col-plan-2 {
    background-color: #d0eacb;
}

.price.section .maintenance__table--three .col-plan-3 {
    background-color: #a4d69a;
}

/* プラン名・金額・説明とも #333333 で統一する。
   説明文はもともと --color-text-muted (#666666) だったが、
   3列とも地が明るいぶん 4.5:1 を割る列が出る。
   3列が同じ文字色になることで「揃っている」という見え方も強くなる */
.price.section .maintenance__table--three .col-plan-1,
.price.section .maintenance__table--three .col-plan-2,
.price.section .maintenance__table--three .col-plan-3,
.price.section .maintenance__table--three th .plan-price,
.price.section .maintenance__table--three th .plan-desc {
    color: #333333;
}

/* === 「制作プランの内容」表：ライト／スタンダード／プレミアムを同じ幅に ===
   列幅を内容任せにすると説明文の長さで3列がバラつくため、この表だけ固定レイアウトにし、
   3プラン列に同じ幅を与える（既存の col-plan-1/2=30%・col-plan-3=25% を上書き）。
   オプション表・保守プラン表は --three が付かないので影響しない */
.maintenance__table--three {
    table-layout: fixed;
}

.price.section .maintenance__table--three .col-head,
.price.section .maintenance__table--three .col-plan-1,
.price.section .maintenance__table--three .col-plan-2,
.price.section .maintenance__table--three .col-plan-3 {
    width: 25%;
}

/* === スマホ：「制作プラン｜初回のみ」の見出し直下の余白 ===
   3枚の上端を揃えるためのダミーバッジ（.price__recommended--placeholder）は
   縦積みでは役目がなく、見出しとライトプランの間に55pxの空白を作るだけ。
   max-width:767px で display:none を当てているが、後段の
   .price__recommended { display: inline-block } と同じ詳細度で負けて効いていない。
   クラス2つ分に上げて確実に消し、代わりに見出し側へ最小限の下マージンを戻す
   （PCではバッジ一段ぶんが間隔になるので見出しの margin は 0 のまま） */
@media (max-width: 767px) {
    .price__recommended.price__recommended--placeholder {
        display: none;
    }

    .price__plan-wrapper > .subsection-title {
        margin-bottom: var(--space-sm);
    }
}

/* === スマホ：料金セクション内の各ブロックの間隔 ===
   .mt-m（--space-lg）はスマホだと約34pxまで縮み、見出し・表・見出し・表が
   等間隔に並んで「制作プラン／内容／オプション／保守プラン」が一つの塊に見える。
   ブロック間だけを広げて、どこで話題が切り替わるかを余白で示す。
   PC（768px〜）は横幅があるぶん塊化しないので .mt-m のまま */
@media (max-width: 767px) {
    .price__compare.mt-m,
    .price__option.mt-m,
    .price__maintenance.mt-m {
        margin-top: 56px;
    }
}

/* プライバシーポリシーのみなし同意（送信ボタンの直上に置く注記） */
.form-consent-note {
    margin-bottom: 16px;
    font-size: 0.85rem;
    line-height: 1.6;
    color: var(--color-text-muted);
    text-align: center;
}

.form-consent-note a {
    color: var(--color-text);
    text-decoration: underline;
}

.form-submit .form-privacy {
    text-align: center;
    margin-top: 12px;
}

/* 送信失敗時だけ出る一行。通常は HTML の hidden 属性で隠れている */
.form-error {
    margin-bottom: 16px;
    padding: 12px 16px;
    border: 1px solid #e5b4b4;
    border-radius: 8px;
    background: #fdf2f2;
    color: #a33a3a;
    font-size: 0.875rem;
    line-height: 1.7;
    text-align: center;
}

.form-error[hidden] {
    display: none;
}

/* 送信中は二重送信を止めるので、押せないことを見た目でも伝える */
.btn--submit:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

/* スマホ：注記なので一段小さく */
@media (max-width: 767px) {
    .form-privacy {
        font-size: 0.75rem;
    }
}

/* 月額プラン：右列（保守管理あり）を推奨表示 */
.maintenance__table .col-plan--reco {
    background-color: #2f6b4a;
}
.maintenance__table--monthly tbody td:last-child {
    background-color: rgba(98, 184, 80, 0.06);
}
.plan-reco {
    display: inline-block;
    background-color: var(--color-accent-orange);
    color: var(--color-white);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    padding: 0.2rem 0.8rem;
    border-radius: var(--radius-sm);
    margin-right: 0.6em;
    vertical-align: middle;
    white-space: nowrap;
}


/* 料金プランの横幅を広げる
   PC(1200px〜)では3カラムが窮屈だったため、カード間の隙間を60→36pxに詰め、
   さらにコンテナ(1320px)の外側へ左右対称に最大120pxずつはみ出させる。
   はみ出し量は画面幅に応じて自動計算し、画面端には最低40pxの余白を残す。
   制作プラン（見出し・注記込み）、制作プランの内容（比較表）、オプション、＋の区切り、保守プランを同じ幅に揃える。 */
@media (min-width: 1200px) {
    .price__plan-wrapper,
    .price__compare,
    .price__option,
    .price__plus,
    .price__maintenance {
        --price-cards-bleed: clamp(0px, calc((100vw - var(--container-width)) / 2 + var(--container-padding) - 40px), 120px);
        margin-left: calc(-1 * var(--price-cards-bleed));
        margin-right: calc(-1 * var(--price-cards-bleed));
    }

    .price__plan-wrapper .price__cards {
        gap: 36px;
    }
}

/* 制作プランと保守プランは「どちらか」ではなく「足し算」。
   2つの表が並列に見えると別プランの選択肢と誤読されるため、間に＋を挟む */
.price__plus {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.6rem;
    text-align: center;
}

.price__plus-mark {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border: 2px solid #000;
    border-radius: var(--radius-full);
    background-color: var(--color-white);
    box-shadow: 0.3rem 0.3rem 0 rgba(0, 0, 0, 0.1);
    font-size: 1.8rem;
    font-weight: 700;
    line-height: 1;
    color: var(--color-primary);
}

.price__plus-text {
    font-size: 1.05rem;
    line-height: 1.8;
    color: var(--color-text-muted);
    margin: 0;
}

/* 見出し横の種別バッジ（初回のみ／毎月） */
.plan-kind {
    display: inline-block;
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    padding: 0.25rem 0.7rem;
    border-radius: var(--radius-full);
    border: 1px solid #000;
    line-height: 1;
}

/* 初回のみ／必要な方のみ／毎月は、種別の違いを色で語らせず白地に統一する */
.plan-kind--once,
.plan-kind--monthly,
.plan-kind--option {
    background-color: var(--color-white);
    color: #000;
    border-color: #000;
}

/* オプション表：メニュー名・料金・内容の3カラム */
.maintenance__table--option {
    min-width: 560px;
}

.maintenance__table--option .col-option-head {
    width: 24%;
}

.maintenance__table--option .col-option-price {
    width: 16%;
}

.option-unit {
    font-size: 0.8rem;
    font-weight: normal;
}

.option-unit--block {
    display: block;
    margin-top: 0.2em;
    color: var(--color-text-muted);
}

.option-link {
    color: var(--color-primary-dark);
    text-decoration: underline;
    text-underline-offset: 0.2em;
}

.option-link:hover {
    color: var(--color-primary);
}

.maintenance__table--option tbody td {
    vertical-align: top;
}

/* --------------------------------------------------------------------------
   制作メンバー（介護タクシー版で復活。既存 .member ルールへの上書きはここに集約）
   PCは左に見出し（sticky）・右に3人を縦に並べる非対称レイアウト
   -------------------------------------------------------------------------- */

.member {
    /* 課題提起セクションと同じ灰地 */
    background-color: #f2f2f2;

    /* 丸写真の直径と行の余白。連結線の位置計算にも使う */
    --member-photo: clamp(96px, 4rem + 5.5vw, 168px);
    /* カードの内側。左右は上下よりわずかに広く取って、文章が縁に触れないようにする */
    --member-rowpad: clamp(1.9rem, 1.1rem + 2.2vw, 3.1rem);
    --member-cardgap: clamp(2.2rem, 1.2rem + 3vw, 4rem);
    --member-gap: clamp(1.4rem, 0.7rem + 2.2vw, 2.9rem);
    /* 道路の幅（アスファルト＋左右の白線）。丸写真より必ず細くする。
       道路が上下のカードを突き抜けて伸びる長さ。通常はセクションの上下の縁ぴったりで
       止める（JSが実測する）ので、これは見出しの下で止めるときなどの保険の値。
       この2つは main.js が parseFloat で読むので clamp() でなく素の px で書くこと */
    --member-lane: 50px;
    --member-run: 48px;
    /* 1枚目を左・3枚目を右へ振る量（＝道路が蛇行する幅）。カードはそのぶん細くなる */
    --member-stagger: 0px;
}

/* 前のセクションとのあいだを他より広く取る。道路の助走路と、その上に置いた
   信号機がまるごと顔を出せるだけの高さをここで確保する */
.member.section {
    padding-top: calc(var(--space-xl) + 3rem);
}

/* このセクションだけ他より横に広く取る（カードを広く見せるため） */
.member__inner {
    width: 100%;
    max-width: 1560px;
    padding: 0 var(--container-padding);
}

.member .section-header--left {
    margin-bottom: var(--space-md);
}

.member__lead {
    font-size: clamp(1rem, 0.95rem + 0.3vw, 1.12rem);
    line-height: 2;
    color: var(--color-gray-800);
}

/* --- 3人のリスト（1人1枚のカードを縦に積み、道路でつなぐ） --- */
.member__list {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: var(--member-cardgap);
}

/* 3人をつなぐ道路。カードの背面を通り、カードの隙間と上下の端だけ顔を出す。
   路面はご利用の流れ（.flow__road）と同じ：白い外側線＋アスファルト＋ざらつき＋センターの白破線。
   1枚目を左・3枚目を右へ振ってあるので、道路はそのあいだを斜めに縫って下る。
   実際のパスは main.js の setupMemberRoad がカードの実測位置から引く */
.member__road {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    /* 上下のカードを突き抜けた助走路・余走路を描くため、箱の外にはみ出させる */
    overflow: visible;
    z-index: 0;
    pointer-events: none;
}

/* 外側線。アスファルトより太い白を下に敷いて、路肩の白線に見せる */
.member__road-edge {
    fill: none;
    stroke: #ffffff;
    stroke-linecap: butt;
    stroke-linejoin: round;
    /* 灰地に白が溶けないよう、Flow の道路と同じ輪郭の影を落とす */
    filter: drop-shadow(0 0 1px rgba(35, 38, 42, 0.45)) drop-shadow(0 2px 4px rgba(35, 38, 42, 0.16));
}

.member__road-asphalt {
    fill: none;
    stroke: #75787c;
    stroke-linecap: butt;
    stroke-linejoin: round;
}

/* 路面のざらつき */
.member__road-grain {
    fill: none;
    stroke: url(#memberGrain);
    stroke-linecap: butt;
    stroke-linejoin: round;
}

/* センターラインの白い破線 */
.member__road-dash {
    fill: none;
    stroke: rgba(255, 255, 255, 0.95);
    stroke-width: 3;
    stroke-linecap: butt;
    stroke-dasharray: 18 15;
}

/* 路面の上に置いた信号機（横型・青が点灯）。カードより上に出た助走路の位置に置く。
   影はカードと同じ「ずらした真っ黒」でポップに寄せる（ぼかした写実の影にしない）。
   translate と scale は main.js（setupMemberRoad）が路面の実測から与える */
.member__signal {
    filter: drop-shadow(4px 6px 0 rgba(26, 26, 26, 0.22));
}

/* 点灯している青のにじみと光の線。ゆっくり明滅させて「進んでいい」ことを伝える */
.member__signal-glow {
    opacity: 0.3;
    animation: memberSignalGlow 2.4s ease-in-out infinite;
}

.member__signal-rays {
    opacity: 0.85;
    animation: memberSignalRays 2.4s ease-in-out infinite;
}

@keyframes memberSignalGlow {

    0%,
    100% {
        opacity: 0.2;
    }

    50% {
        opacity: 0.46;
    }
}

@keyframes memberSignalRays {

    0%,
    100% {
        opacity: 0.55;
    }

    50% {
        opacity: 1;
    }
}

@media (prefers-reduced-motion: reduce) {

    .member__signal-glow,
    .member__signal-rays {
        animation: none;
    }
}


.member__card {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: var(--member-photo) minmax(0, 1fr);
    column-gap: var(--member-gap);
    align-items: start;
    padding: var(--member-rowpad) calc(var(--member-rowpad) + 0.6rem);
    border: 2px solid #000;
    border-radius: 20px;
    background-color: var(--color-white);
    box-shadow: 0.4rem 0.4rem 0 rgba(0, 0, 0, 0.08);
}

/* 1枚目を左・3枚目を右へ寄せて、そのあいだを道路が蛇行できるようにする。
   3枚とも同じ幅にして、寄せた量だけ細くする（＝丸写真の中心が等間隔にずれる） */
.member__card {
    width: calc(100% - var(--member-stagger));
}

.member__card:first-of-type {
    align-self: flex-start;
}

.member__card:nth-of-type(2) {
    align-self: center;
}

.member__card:last-of-type {
    align-self: flex-end;
}

/* 幅が狭いと振る余地がなく本文も細くなるので、スマホでは振らず道路も縦一本にする */
@media (min-width: 768px) {
    .member {
        --member-lane: 60px;
        --member-run: 64px;
        --member-stagger: clamp(60px, 11vw, 200px);
    }
}

@media (min-width: 1200px) {
    .member {
        --member-lane: 72px;
        --member-run: 88px;
    }
}

/* 丸・小さめ。既存の 4:3・角丸・影を打ち消す */
.member__media {
    width: var(--member-photo);
    aspect-ratio: 1 / 1;
    border-radius: 50%;
    border: 2px solid #000;
    /* 線が入っていく先を円として見せる二重丸 */
    box-shadow: 0 0 0 7px rgba(98, 184, 80, 0.16);
}

.member__card:nth-child(1) .member__media img,
.member__card:nth-child(2) .member__media img,
.member__card:nth-child(3) .member__media img {
    object-position: 50% 50%;
}

.member__body {
    /* 丸写真の上端と、ラベルの文字の高さを見た目で揃える */
    padding-top: 0.35rem;
    /* 1行が長くなりすぎないように */
    max-width: 44em;
}

/* 担当領域のラベル。氏名と1つのかたまりなので、ここだけ間を詰める */
.member__role {
    display: inline-block;
    padding: 0.42em 1.05em;
    margin-bottom: 0.55rem;
    border-radius: 999px;
    background-color: var(--color-primary);
    color: var(--color-white);
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 0.04em;
}

/* 破線はここ（名乗りの下）で引く。上=誰か／下=その人が言っていること、で切る */
.member__name {
    font-size: clamp(1.3rem, 1.1rem + 0.7vw, 1.6rem);
    padding-bottom: clamp(1.1rem, 0.85rem + 0.5vw, 1.5rem);
    margin-bottom: clamp(1.2rem, 0.9rem + 0.6vw, 1.7rem);
    border-bottom: 2px dashed rgba(98, 184, 80, 0.4);
}

/* 一言。ここがいちばん先に目に入るようにする */
.member__catch {
    font-size: clamp(1.02rem, 0.96rem + 0.3vw, 1.18rem);
    font-weight: 700;
    line-height: 1.75;
    color: var(--color-gray-800);
    /* 説明文の見出しなので、ここは近づける（破線より狭いこと） */
    margin-bottom: 0.85rem;
}

.member__desc {
    font-size: 1rem;
    line-height: 2.1;
    /* 説明文だけは1行を短めにして、右の縁との間に余白を残す */
    max-width: 40em;
}

/* スマホ：他セクションの本文と同じ15pxに揃える */
@media (max-width: 767px) {

    .member__lead,
    .member__desc {
        font-size: 15px;
    }

    /* 15pxで行間2.1だと1行おきに空きすぎて見えるので詰める */
    .member__desc {
        line-height: 1.8;
    }
}

/* --- PC：左に見出しを置いて、スクロール中は貼り付ける --- */
@media (min-width: 992px) {
    /* PCは道路がこの余白のぶんだけ助走路になる。信号機の上下に路面を残すため広めに取る */
    .member.section {
        padding-top: calc(var(--space-xl) + 5rem);
    }

    .member__inner {
        display: grid;
        grid-template-columns: minmax(260px, 0.8fr) minmax(0, 1.75fr);
        column-gap: clamp(2rem, 0.5rem + 3.5vw, 4.5rem);
        align-items: start;
    }

    .member__intro {
        position: sticky;
        top: 110px;
    }
}

@media (max-width: 991px) {
    /* この幅では見出しが道路の真上に積まれる。道路の助走路と、そこに置いた信号機が
       まるごと顔を出すぶんだけ空ける（詰めると信号機が1枚目のカードに潜る） */
    .member__intro {
        margin-bottom: clamp(6.5rem, 4.6rem + 5vw, 8.2rem);
    }

    /* 姉妹LP由来の max-width:560px / gap を打ち消す */
    .member__list {
        max-width: none;
        gap: var(--member-cardgap);
    }

    /* 既存ルールの 16 / 10 を打ち消して丸のまま */
    .member__media {
        aspect-ratio: 1 / 1;
    }
}

/* スマホは路面の信号機を出さない（道路だけを見せる）。
   信号機のぶんだけ空けていた助走路も、そのままだと道路が長く空くので詰める */
@media (max-width: 767px) {
    .member__signal {
        display: none;
    }

    .member__intro {
        margin-bottom: 3.2rem;
    }

    /* --member-rowpad は最小値でも30px超あり、375px幅では左右で80px取られて
       文章の幅が残らない。スマホは実寸で詰める */
    .member__card {
        padding: 1.2rem 1.25rem;
    }

    .member__name {
        font-size: 18px;
    }

    .member__en-name {
        font-size: 0.65rem;
        letter-spacing: 0.08em;
    }

    .member__role {
        font-size: 12px;
        padding: 0.4em 0.95em;
    }
}

/* 横に写真と文章を並べると文章が細くなりすぎる幅。写真を上に置く */
@media (max-width: 640px) {
    .member__card {
        grid-template-columns: minmax(0, 1fr);
        row-gap: var(--space-sm);
    }

}

/* 制作メンバーを足してナビが5項目になったため、狭いPC幅で折り返さないよう詰める */
.header__nav-list a {
    white-space: nowrap;
}

@media (min-width: 992px) and (max-width: 1179px) {
    .header__nav-list {
        gap: 16px;
    }

    .header__logo a {
        white-space: nowrap;
    }

    .header__btn {
        white-space: nowrap;
        height: 48px;
        padding: 0 20px;
        font-size: 1rem;
    }
}


/* ==========================================================================
   課題提起（Issues）
   ページ内で唯一「不安を突く」ブロック。灰地＋巨大な「？」＋黒縁カードで、
   前後の白いセクションから意図的に浮かせる。
   ========================================================================== */
.issues.section {
    --issues-alert: #e2551f;
    position: relative;
    z-index: 1;
    overflow: hidden;
    background-color: #f2f2f2;
    padding-top: clamp(4rem, 2.5rem + 6vw, 7.5rem);
    padding-bottom: clamp(4rem, 2.5rem + 6vw, 7.5rem);
}

.issues .container {
    position: relative;
    z-index: 1;
}

/* 背景の巨大な「？」（装飾・読み上げ対象外） */
.issues__mark {
    position: absolute;
    top: 0;
    left: 40px;
    z-index: 0;
    color: #ffffff;
    font-family: var(--font-family-en);
    font-size: clamp(18rem, 28vw, 30rem);
    font-weight: 700;
    line-height: 1;
    transform: rotate(-7deg);
    pointer-events: none;
    user-select: none;
}

.issues__mark--right {
    top: auto;
    left: auto;
    right: 40px;
    bottom: 0;
    transform: rotate(7deg);
}

.issues__head {
    text-align: center;
    margin-bottom: clamp(2.5rem, 1.8rem + 3vw, 5rem);
}

.issues__title {
    font-family: var(--font-family-heading);
    font-size: clamp(1.35rem, 0.95rem + 2vw, 2.5rem);
    font-weight: 700;
    line-height: 1.9;
    letter-spacing: 0.04em;
}

.issues__title-em {
    color: var(--issues-alert);
    font-size: 1.1em;
    padding: 0 0.12em;
    background-image: linear-gradient(transparent 62%, rgba(242, 212, 49, 0.5) 62%);
}

/* 課題カード */
.issues__items {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 28px;
    max-width: 1180px;
    margin: 0 auto;
}

.issues__item {
    position: relative;
    background-color: #ffffff;
    border: 2px solid var(--color-black);
    border-radius: var(--radius-md);
    box-shadow: 2px 2px 12px rgba(0, 0, 0, 0.12);
    /* ①のバッジ（top14px＋38px）の下に余白を残すため上を厚めに取る */
    padding: 72px 36px 36px;
    text-align: center;
}

.issues__num {
    position: absolute;
    top: 14px;
    left: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background-color: var(--issues-alert);
    color: #ffffff;
    font-family: var(--font-family-en);
    font-size: 1.05rem;
    font-weight: 700;
    line-height: 1;
}

.issues__item-title {
    font-family: var(--font-family-heading);
    font-size: clamp(1.2rem, 0.98rem + 0.85vw, 1.55rem);
    font-weight: 700;
    line-height: 1.65;
    letter-spacing: 0.02em;
    text-align: center;
    margin-bottom: 24px;
}

.issues__item-title span {
    color: var(--color-primary-dark);
}

.issues__item-desc {
    text-align: center;
    color: var(--color-text-muted);
    font-size: 1.08rem;
    line-height: 1.9;
}

/* 下向き矢印（カード群 → 結び） */
.issues__arrows {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    margin-top: clamp(2rem, 1.5rem + 2vw, 3.2rem);
}

.issues__arrow {
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 16px 20px 0 20px;
    border-color: var(--color-primary) transparent transparent transparent;
}

/* 結び */
.issues__end {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: clamp(1rem, 2vw, 2rem);
    margin-top: clamp(1.5rem, 1rem + 2vw, 2.5rem);
}

.issues__end-text {
    font-family: var(--font-family-heading);
    font-size: clamp(1.3rem, 0.95rem + 1.6vw, 2.3rem);
    font-weight: 700;
    line-height: 1.6;
    letter-spacing: 0.02em;
}

.issues__end-faces {
    display: flex;
}

.issues__end-faces img {
    width: clamp(64px, 8vw, 92px);
    height: clamp(64px, 8vw, 92px);
    border-radius: 50%;
    object-fit: cover;
    object-position: center top;
    border: 3px solid #ffffff;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12);
}

.issues__end-faces img + img {
    margin-left: -18px;
}

@media (max-width: 767px) {
    .issues__mark {
        font-size: 13rem;
        top: -0.06em;
        left: 4px;
    }

    .issues__mark--right {
        display: none;
    }

    .issues__head {
        text-align: left;
    }

    .issues__title {
        line-height: 1.85;
    }

    .issues__items {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .issues__item {
        padding: 60px 18px 24px;
    }

    .issues__num {
        top: 12px;
        left: 12px;
        width: 32px;
        height: 32px;
        font-size: 0.92rem;
    }

    .issues__item-title {
        text-align: left;
        margin-bottom: 20px;
    }

    .issues__item-desc {
        text-align: left;
        font-size: 15px;
    }

    .issues__arrow {
        border-width: 12px 15px 0 15px;
    }

    .issues__arrow--pc {
        display: none;
    }

    .issues__end {
        flex-direction: column;
        gap: 1rem;
    }

    /* スマホでも1行で見せる。16文字（字送り0.02em込みで約16.3em）が
       画面幅から左右余白を引いた幅に収まるサイズを上限にする */
    .issues__end-text {
        font-size: min(5.2vw, 1.3rem);
        white-space: nowrap;
    }
}

/* ==========================================================================
   灰地セクションの紙目
   #f2f2f2 のベタ塗りに、ごく薄いムラのタイル（assets/paper-grain.webp・256px）を
   重ねる。タイル自体の平均が #f2f2f2 なので、色は変えずに質感だけ足せる。
   継ぎ目が出ないよう循環ぼかしで作ってあるので、そのまま repeat してよい。
   対象は灰地の5セクション（課題提起・制作メンバー・制作実績・ご利用の流れ・よくある質問）。
   FVは緑地なので対象外（紙目は .hero::before が別に持っている）。
   ========================================================================== */
.issues.section,
.member,
.works,
.flow.section,
.faq__bg {
    background-image: url('assets/paper-grain.webp');
    background-repeat: repeat;
    background-size: 256px 256px;
}


/* ==========================================================================
   スマホの本文まわり：15pxに揃えた文字は行間も 1.8 で統一する
   （基準は制作メンバーの詳細文 .member__desc）。
   入力欄・表・ボタンは行の高さが箱の高さに直結するので対象外。
   ========================================================================== */
@media (max-width: 767px) {

    .strength__desc,
    .strengths__lead,
    .price__lead,
    .flow__lead,
    .faq__lead,
    .works__lead,
    .voice__lead,
    .member__lead,
    .member__desc,
    .cta-case__text,
    .contact__desc,
    .plan-desc,
    .issues__item-desc,
    .flow__text,
    .faq__a {
        line-height: 1.8;
    }
}



/* ==========================================================================
   スマホ（〜767px）：料金の3つの表を読める大きさに詰める
   --------------------------------------------------------------------------
   表のままで解決する。見にくさの原因は、セルの文字が 1.05rem（＝16.8px）と
   PCと同じ大きさのまま、列幅だけが 80〜130px に縮んでいたこと。
   1行に2〜3文字しか入らず、どの行も何行にも折り返していた。
   文字と余白を詰め、表を画面端まで使い、横スクロールを最小限にする。
   PC（768px〜）には一切影響しない。
   ========================================================================== */
@media (max-width: 767px) {

    /* --- 表を画面端まで使う（左右の余白ぶん、1行あたり40px広くなる） ---
       これまで保守プランだけに掛けていた処理を3つの表に広げる */
    .price.section .table-responsive {
        margin-inline: calc(-1 * var(--container-padding));
        /* 本文の左右余白（約23px）まで表に使わせ、左右8pxだけ残す。
           1行あたり約30px広がり、「スタンダード」のような語が折り返さなくなる。
           8pxは表の枠線とオフセット影（6.4px）が画面端で切れないための逃げ */
        padding-inline: 8px;
        border-radius: 0;
        box-shadow: none;
    }

    .price.section .maintenance__table {
        min-width: 0;
        box-shadow: 0.4rem 0.4rem 0 rgba(0, 0, 0, 0.1);
    }

    /* --- 文字と余白を詰める。ここが今回の本体 --- */
    .price.section .maintenance__table th,
    .price.section .maintenance__table td {
        padding: 0.5rem 0.45rem;
        font-size: 13px;
        line-height: 1.7;
    }

    /* ●や「3週間〜」が入る中央寄せセルも本文と同じ大きさに揃える */
    .price.section .maintenance__table td.center {
        font-size: 13px;
    }

    /* 左端の項目名は行の目印なので、本文よりわずかに詰めて折り返しを減らす */
    .price.section .maintenance__table tbody td:first-child {
        font-size: 12.5px;
        line-height: 1.6;
        letter-spacing: -0.01em;
    }

    /* --- 見出し行（プラン名・金額・説明） --- */
    .price.section .maintenance__table thead th {
        /* 「スタンダード」が1行で収まる大きさ（列幅の実測は約79px） */
        font-size: 12.5px;
        line-height: 1.5;
        letter-spacing: -0.02em;
        padding: 0.6rem 0.4rem;
    }

    .price.section .plan-price {
        font-size: 1.5rem;
        margin: 0.35rem 0 0.25rem;
        letter-spacing: 0;
    }

    .price.section .maintenance__table--three .plan-price {
        font-size: 1.35rem;
    }

    /* 「万円（税込）」だけ数字の下に落とす。金額の出し分け用の span まで
       display:block にすると、詳細度でこの指定が
       html[data-monitor="on"] .is-listprice-only の display:none に勝ってしまい、
       モニター価格と正価の2つの金額が縦に並んで出てしまう */
    .price.section .plan-price span:not(.is-monitor-only):not(.is-listprice-only):not(.u-sr) {
        display: block;
        margin-left: 0;
        font-size: 11px;
    }

    .price.section .plan-desc {
        font-size: 11.5px;
        line-height: 1.65;
        letter-spacing: -0.01em;
        /* 金額のすぐ下に説明が張り付いていたので一段あける */
        margin-top: 0.45rem;
    }

    /* 「おすすめ」バッジはプラン名と同じ行に入りきらないので、1行使って上に置く */
    .price.section .plan-reco {
        display: block;
        width: fit-content;
        font-size: 10px;
        padding: 0.15rem 0.5rem;
        margin-right: 0;
        margin-bottom: 0.3rem;
    }

    /* --- 列幅：空の左上セルに幅を与えず、プラン列に回す --- */
    .price.section .maintenance__table--three .col-head {
        width: 26%;
    }

    .price.section .maintenance__table--three .col-plan-1,
    .price.section .maintenance__table--three .col-plan-2,
    .price.section .maintenance__table--three .col-plan-3 {
        width: 24.66%;
    }

    .price.section .maintenance__table--monthly {
        table-layout: fixed;
    }

    .price.section .maintenance__table--monthly th:first-child,
    .price.section .maintenance__table--monthly td:first-child {
        width: 34%;
    }

    /* オプションは説明文が主役なので、メニュー名・料金を絞って内容に幅を回す */
    .price.section .maintenance__table--option {
        min-width: 0;
        table-layout: fixed;
    }

    .price.section .maintenance__table--option .col-option-head {
        width: 27%;
    }

    .price.section .maintenance__table--option .col-option-price {
        width: 19%;
    }

    .price.section .maintenance__table--option tbody td:last-child {
        font-size: 12.5px;
        line-height: 1.8;
    }

    .price.section .option-unit {
        font-size: 11px;
    }
}

/* === スマホ：保守プラン表の「0円/月」と「7,800円/月」の高さを揃える ===
   「おすすめ」バッジはスマホだけ display:block でプラン名の上に1行使う（上の @media 参照）。
   その1行ぶん「保守管理あり」側だけが下に押され、金額・説明文が「保守管理なし」と
   段違いになっていた。左の列にも同じ寸法の見えない1行を置いて起点を揃える
   （visibility:hidden なので読み上げ・選択の対象にはならない） */
@media (max-width: 767px) {
    .price.section .maintenance__table--monthly .col-plan-1::before {
        content: 'おすすめ';
        display: block;
        width: fit-content;
        visibility: hidden;
        /* .plan-reco のスマホ指定と同じ値にする（変えるときは両方直す） */
        font-size: 10px;
        font-weight: 700;
        letter-spacing: 0.1em;
        padding: 0.15rem 0.5rem;
        margin-bottom: 0.3rem;
        border-radius: var(--radius-sm);
    }
}

/* ==========================================================================
   モニター価格の切り替え（先着3名）
   --------------------------------------------------------------------------
   出し入れは index.html の <html> タグ1か所だけで行う。
     data-monitor="on"  … モニター価格を表示
     data-monitor="off" … 正価を表示（属性ごと消しても、値を書き間違えても正価に倒れる）

   文字の出し分けは、この2つのクラスを付けるだけ。
     .is-monitor-only   … モニター価格のときだけ出す
     .is-listprice-only … 正価のときだけ出す
   display を指定し直していないので、インライン・フレックスの子など
   元の並び方をそのまま保てる（バッジを flex の中に置いても崩れない）。

   募集を完全に終えるときは、この節と index.html の2クラス・data-monitor 属性を消す
   ========================================================================== */
html:not([data-monitor="on"]) .is-monitor-only {
    display: none;
}

html[data-monitor="on"] .is-listprice-only {
    display: none;
}

/* 「モニター価格」バッジ。スタンダードの「おすすめ」（オレンジ）と
   同じ列に並ぶので、緑にして別の種類の印であることを見せる */
.plan-option__tag--monitor {
    background-color: var(--color-primary);
}

/* 割引前の価格。取り消し線（<s>のブラウザ既定）＋灰色で、
   もう効いていない値段だと一目で分かるようにする */
.plan-option__was {
    margin-right: 0.45em;
    color: var(--color-text-muted);
    font-weight: 600;
    opacity: 0.8;
}

/* 割引後の価格。この行でいちばん強く見せる1か所。
   送信ボタンと同じオレンジにそろえ、少しだけ大きくする */
.plan-option__now {
    color: var(--color-accent-orange);
    font-size: 1.15em;
    font-weight: 800;
}

/* スマホでは金額がプラン名の下の1行に回る（.plan-option__meta の @media 参照）。
   モニター表示だと割引前の金額6字ぶん増えて 375px で溢れるので、
   この行だけ nowrap を解いて折り返せるようにする。
   プラン名の行も、「スタンダードプラン」＋バッジで 375px はぎりぎりなので、
   保険として折り返しを許しておく（収まる場合は折り返らない。
   .plan-option__name は flex なので nowrap が既定） */
@media (max-width: 767px) {
    html[data-monitor="on"] .plan-option__meta {
        white-space: normal;
    }

    html[data-monitor="on"] .plan-option__name {
        flex-wrap: wrap;
        row-gap: 4px;
    }
}

/* --------------------------------------------------------------------------
   制作プランのカード（#price の3枚）の制作費
   -------------------------------------------------------------------------- */

/* 割引前の価格。ピルと金額が並ぶ行の「外」、その上に置いている。
   行の中に入れると、3カラムでカードが一番細くなる 1200px 付近で
   nowrap の金額とぶつかってはみ出すため。
   ピルの幅（.price__badge の 5rem）＋ gap ぶん字下げして、下の数字と頭を揃える */
.price__was {
    display: block;
    margin: 0 0 0.15rem calc(5rem + var(--space-sm));
    color: var(--color-text-muted);
    font-size: 0.95rem;
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: 0.02em;
    opacity: 0.8;
}

/* 取り消し線は金額だけに引く。「通常価格」の4文字まで消すと
   何の値段だったのかが読み取りにくくなる */
.price__was-label {
    margin-right: 0.45em;
}

/* プレミアムは「要相談」で割引前の価格がない。ただし1行ぶんの高さがないと
   3枚のカードで以降の行がずれるので、場所だけ取って見えなくする
   （.price__recommended--placeholder と同じ考え方） */
.price__was--placeholder {
    visibility: hidden;
}

/* モニター価格はカードの中でいちばん強く見せる1か所。
   フォームの .plan-option__now と同じオレンジにそろえる。
   プレミアムの「要相談」は値引きではないので元の色のまま */
html[data-monitor="on"] .price__amount:not(.price__amount--ask) {
    color: var(--color-accent-orange);
}

/* --------------------------------------------------------------------------
   制作プランの比較表（.price__compare の見出しセル）
   -------------------------------------------------------------------------- */

/* 列の地色が3列で違うので、文字色は th から継ぐ（inherit）。
   薄くするのは opacity で行い、白地でも濃い地でも同じ見え方にする */
.plan-price-was {
    display: block;
    margin-top: 0.6rem;
    color: inherit;
    font-size: 0.95rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    opacity: 0.65;
}

.plan-price-was__label {
    margin-right: 0.45em;
}

.plan-price-was--placeholder {
    visibility: hidden;
}

/* .plan-price span は「万円（税込）」向けに 0.9rem／normal を当てている。
   金額を出し分けるための span はその指定から外し、親の大きさに戻す */
.plan-price .is-monitor-only,
.plan-price .is-listprice-only {
    font-size: inherit;
    font-weight: inherit;
    letter-spacing: inherit;
    margin-left: 0;
}

/* 割引後の金額はカードと同じアクセントのオレンジで見せる。
   .price.section .maintenance__table th .plan-price（#2f3540）より
   詳細度を上げる必要があるので、html[data-monitor] から書き起こす。
   プレミアムの「要相談」は値引きではないので元の色のまま */
html[data-monitor="on"] .price__compare .maintenance__table th .plan-price:not(.plan-price--ask) {
    color: var(--color-accent-orange);
}

/* 読み上げ専用。取り消し線は音声に伝わらないため、
   「通常価格」「モニター価格」という語をここで補う */
.u-sr {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

/* ==========================================================================
   PC専用の追従CTA（右下固定）
   --------------------------------------------------------------------------
   スマホでは出さない。画面が狭いうえ、下部には本文とフォームが来るため、
   固定パネルを置くと読んでいる最中の文章を覆ってしまう。
   出し入れの条件（FVを通り過ぎたら出し、あとは出しっぱなし）は main.js 側。
   z-index は 900。ヘッダー(1000)・ドロワー(1050)・モーダル(2000)より下に置き、
   メニューを開いているときにパネルが手前に出てこないようにする
   ========================================================================== */
.floating-cta {
    display: none;
}

@media (min-width: 768px) {
    .floating-cta {
        position: fixed;
        right: 24px;
        bottom: 24px;
        z-index: 900;
        display: flex;
        flex-direction: column;
        gap: 10px;
        width: 288px;
        padding: 18px;
        background-color: var(--color-white);
        /* 問い合わせカード（.contact__card）と同じ太さの黒枠でそろえる */
        border: 2px solid #333;
        border-radius: var(--radius-md);
        box-shadow: 0 14px 34px rgba(0, 0, 0, 0.18);
        /* 出るまでは触れない・読み上げない状態にしておく */
        opacity: 0;
        visibility: hidden;
        transform: translateY(12px);
        transition: opacity var(--transition-normal),
            transform var(--transition-normal),
            visibility var(--transition-normal);
    }

    .floating-cta.is-visible {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
    }
}

/* 飾りの担当者イラスト。パネルの右上から少しだけ顔を出す。
   左上に置くと、はみ出したぶんが本文の上に重なりやすい。パネルは画面の
   右下（right:24px）にいるので、右に寄せれば画面の余白側にはみ出す。
   本文（.floating-cta__note）はパネルの中央に置かれ、上端の余白は18pxなので、
   イラストの下端を上端から14pxの位置で止めれば文字とは重ならない。
   クリックはパネルの2つのボタンにだけ通したいので pointer-events は切る */
.floating-cta__staff {
    position: absolute;
    right: 4px;
    bottom: calc(100% - 14px);
    width: 74px;
    height: auto;
    pointer-events: none;
    user-select: none;
}

.floating-cta__note {
    margin: 0 0 6px;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.6;
    color: var(--color-text-main);
    text-align: center;
}

.floating-cta__btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    padding: 15px 12px;
    border-radius: var(--radius-sm);
    color: var(--color-white);
    font-size: 16px;
    font-weight: 700;
    line-height: 1.4;
    text-decoration: none;
    white-space: nowrap;
    transition: background-color var(--transition-fast), transform var(--transition-fast);
}

.floating-cta__icon {
    flex-shrink: 0;
}

/* フォーム側は、送信ボタン（.btn--submit）と同じオレンジにそろえる */
.floating-cta__btn--form {
    background-color: var(--color-accent-orange);
}

/* LINEはブランド色（#06C755）のまま使う。サイトの緑（#62b850）に寄せると
   LINEのボタンだと気づかれず、押される率が落ちる */
.floating-cta__btn--line {
    background-color: #06c755;
}

@media (hover: hover) {
    .floating-cta__btn--form:hover {
        background-color: #ff7d38;
    }

    .floating-cta__btn--line:hover {
        background-color: #05b04b;
    }

    .floating-cta__btn:hover {
        transform: translateY(-1px);
    }
}

.floating-cta__btn:focus-visible {
    outline: 3px solid var(--color-primary);
    outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
    .floating-cta {
        transition: none;
        transform: none;
    }

    .floating-cta.is-visible {
        transform: none;
    }

    .floating-cta__btn {
        transition: none;
    }

    .floating-cta__btn:hover {
        transform: none;
    }
}

/* ==========================================================================
   今だけモニター価格（#monitor）
   --------------------------------------------------------------------------
   「選ばれる4つの理由」と「制作メンバー」のあいだに挟む募集ブロック。
   前後が白・薄灰の明るいセクションなので、ここだけ濃い緑の帯にして
   スクロール中に必ず一度目が止まるようにしてある。

   セクションごと <section class="... is-monitor-only"> で包んであるので、
   index.html の <html data-monitor="off"> にすればこの節は丸ごと消える。
   （料金セクションの割引表示と同じスイッチ。style.css の「モニター価格の切り替え」節を参照）
   ========================================================================== */
.monitor-offer {
    position: relative;
    /* 地の色。柄（紙目・グラデ・四隅の光）は下の ::before が持つので、ここは
       読み込み中にちらつかないよう同系の緑を置いておくだけ（FVと同じ作り） */
    background-color: var(--color-primary);
    color: var(--color-white);
    padding: var(--space-xl) 0;
}

@media (max-width: 767px) {
    .monitor-offer {
        padding: 60px 0;
    }
}

/* 緑のグラデーション地。FV（.hero::before）と同一の層をそのまま使う。
   ・紙目タイル（paper-grain-overlay.webp）を soft-light で重ねてムラだけ足す
   ・四隅にやわらかい光を置いて中央（＝カードが並ぶ帯）を明るく抜く
   緑のランプ（#76c665 → #62b850 → #52a442）はFV・料金プラン・お問い合わせと共通。
   上下端はまっすぐ切り、白（選ばれる理由）と灰（制作メンバー）に直線で接する */
.monitor-offer::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background-color: var(--color-primary);
    background-image:
        url('assets/paper-grain-overlay.webp'),
        radial-gradient(21% 34% at 21% 16%, rgba(255, 255, 255, 0.22), rgba(255, 255, 255, 0) 70%),
        radial-gradient(23% 36% at 79% 62%, rgba(31, 82, 56, 0.22), rgba(31, 82, 56, 0) 70%),
        radial-gradient(25% 30% at 50% 105%, rgba(31, 82, 56, 0.18), rgba(31, 82, 56, 0) 70%),
        linear-gradient(174deg, #76c665 0%, #62b850 45%, #52a442 100%);
    background-size: 256px 256px, auto, auto, auto, auto;
    background-repeat: repeat, no-repeat, no-repeat, no-repeat, no-repeat;
    background-blend-mode: soft-light, normal, normal, normal, normal;
}

/* 中身はグラデーション層より前に置く（料金プランと同じ） */
.monitor-offer > .container {
    z-index: 1;
}

/* --------------------------------------------------------------------------
   見出しまわり
   -------------------------------------------------------------------------- */
.monitor-offer__head {
    text-align: center;
}

/* 「残り3枠」。点滅する丸とオレンジの大きな数字は広告のバナーに寄りすぎるので、
   このLP共通の型（白地＋黒枠）の小さな札に戻した。字の大きさは全部そろえて、
   数字だけを飾らない。緑地の上でも白い矩形1枚で十分に立つ（2026-08-26） */
.monitor-offer__badge {
    /* 「残り」「3」「枠」を一本のベースラインに載せる。inline-block のままだと
       大きい数字の行ボックスが 1em の strut をはみ出して、天地の余白が
       上下でずれる（2026-08-26 修正） */
    display: inline-flex;
    align-items: baseline;
    justify-content: center;
    /* 下だけ気持ち厚い。数字はベースラインから上にだけ伸びるので、
       上下同じ数値にすると字面が沈んで見える */
    padding: 0.72rem 1.9rem 0.82rem;
    /* letter-spacing は最後の1字のうしろにも入るので、そのぶん左を厚くして
       文字列を枠の中央に戻す（text-indent は flex では効かない） */
    padding-left: calc(1.9rem + 0.12em);
    background-color: var(--color-white);
    color: var(--color-black);
    font-family: var(--font-family-heading);
    font-size: clamp(1.05rem, 0.97rem + 0.4vw, 1.3rem);
    font-weight: 700;
    letter-spacing: 0.12em;
    line-height: 1;
    border: 2px solid var(--color-black);
    border-radius: var(--radius-sm);
}

/* 見るべきは残数ひとつなので、数字だけ一段大きく。行の高さは line-height: 1 の
   まま揃うので、札の天地は「残り」「枠」の側で決まる */
.monitor-offer__badge-num {
    margin: 0 0.14em;
    font-size: 1.55em;
    font-weight: 700;
    /* 親の 1 を継がせると 1.55em ぶんの行ボックスになるので、ここでも明示する */
    line-height: 1;
    letter-spacing: 0.02em;
    /* 数字だけアクセントのオレンジ。「残り」「枠」は黒のまま添え字にする */
    color: var(--color-accent-orange);
}

@keyframes monitor-blink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.25; }
}

.monitor-offer__title {
    margin-top: 1.6rem;
    font-size: clamp(1.6rem, 1.26rem + 1.71vw, 2.8rem);
    letter-spacing: 0.1em;
    line-height: 1.45;
}

@media (max-width: 767px) {
    .monitor-offer__title {
        font-size: 24px;
    }
}

/* 「モニター価格」はマーカーを敷かず、地の見出しのまま。
   緑地に白い見出し1本で十分に立っているので、下線を引くと飾りが勝つ
   （2026-08-26。黄色→オレンジと試したうえで撤去） */

.monitor-offer__lead {
    margin-top: 1.8rem;
    font-size: clamp(0.95rem, 0.9rem + 0.25vw, 1.05rem);
    line-height: 2.1;
    color: rgba(255, 255, 255, 0.92);
}

/* --------------------------------------------------------------------------
   お願いすること（.monitor-terms）
   --------------------------------------------------------------------------
   値引きの理由が分からないと身構えられるので、価格を見せる前にここで先に片付ける。
   黒枠＋ずらし影の白い札は、料金カード・ステップカードと同じLPの型。
   下のプランカードとは、横長・左揃え・連番つきという形の違いで見分けさせる */
.monitor-terms {
    position: relative;
    /* 下のプラン2枚（.monitor-offer__cards）と横幅をそろえる。
       札だけ幅が違うと、同じ帯の中で2つの箱組みがずれて見える */
    max-width: 880px;
    /* 見出しラベルが上辺に半分乗るので、その半分（約1.1rem）ぶん上を厚くする */
    margin: calc(var(--space-md) + 1.1rem) auto 0;
    padding: calc(var(--space-md) + 0.6rem) calc(var(--space-md) + 0.25rem) var(--space-md);
    background-color: var(--color-white);
    color: var(--color-text-main);
    border: 2px solid var(--color-black);
    border-radius: var(--radius-md);
    box-shadow: 0.4rem 0.4rem 0 rgba(0, 0, 0, 0.12);
    text-align: left;
}

@media (min-width: 992px) {
    .monitor-terms {
        border-width: 4px;
    }
}

/* 見出しは札の中に置かず、上辺の線にまたがせて「ラベル」に見せる。
   中に置くと本文と地続きになって、2件の前置きだと分かるまでに一拍かかる。
   地は黒。白い札・緑の地のどちらにも重なるので、緑側でも沈まない色にしてある */
.monitor-terms__title {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate(-50%, -50%);
    padding: 0.6rem 1.6rem;
    background-color: var(--color-black);
    color: var(--color-white);
    font-family: var(--font-family-heading);
    font-size: clamp(0.9rem, 0.83rem + 0.3vw, 1.1rem);
    font-weight: 700;
    letter-spacing: 0.06em;
    /* letter-spacing のぶん右に寄るのを打ち消して中央に見せる */
    text-indent: 0.06em;
    line-height: 1;
    white-space: nowrap;
    border-radius: var(--radius-full);
}

@media (max-width: 480px) {
    .monitor-terms__title {
        padding: 0.55rem 1.15rem;
    }
}

.monitor-terms__list {
    display: grid;
    /* 2件のあいだは、番号の丸と本文のかたまりが分かれて見える程度にあける */
    gap: 1.9rem;
}

.monitor-terms__item {
    display: flex;
    align-items: flex-start;
    gap: 1.1rem;
}

/* 01と02のあいだの区切り線。2つのお願いが別々のものだと見た目でわかるように */
.monitor-terms__item + .monitor-terms__item {
    padding-top: 1.9rem;
    border-top: 1px dashed var(--color-black);
}

/* 連番。課題提起の .issues__num と同じ「緑の丸に欧文の数字」 */
.monitor-terms__num {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 34px;
    height: 34px;
    /* 本文1行目（line-height 1.75）の中心に丸の中心を合わせる */
    margin-top: 0.05em;
    border-radius: 50%;
    background-color: var(--color-primary);
    color: var(--color-white);
    font-family: var(--font-family-en);
    font-size: 0.95rem;
    font-weight: 700;
    line-height: 1;
}

/* 番号の右は「本文＋記事リンク」でひとかたまり。div で包まないと、
   リンクの行が li の flex の3つめの子になって右カラムに飛ぶ */
.monitor-terms__body {
    min-width: 0;
}

.monitor-terms__text {
    font-size: clamp(0.925rem, 0.89rem + 0.18vw, 1rem);
    /* 02は4文で3〜4行に回る。行間を広く取ると行どうしが離れて、
       ひとつのお願いではなく箇条書きが続いているように見える */
    line-height: 1.75;
    letter-spacing: 0.01em;
}

/* お願いの中身と、相手側の見返りだけ濃く。あいだの説明は地の文のまま */
.monitor-terms__text strong {
    font-weight: 700;
    color: var(--color-black);
}

/* 記事の実例へのリンク。「どんな記事に載るのか」が見えないと、
   取材のお願いは重く受け取られるので、実際の記事を2本ぶら下げている。
   本文の続きではなく1行落とし、「記事の例」の札を頭に置いて参照先だと分からせる */
.monitor-terms__links {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.5rem 1.1rem;
    margin-top: 1rem;
    font-size: clamp(0.875rem, 0.85rem + 0.15vw, 0.95rem);
    line-height: 1.7;
}

.monitor-terms__links-label {
    flex-shrink: 0;
    padding: 0.2rem 0.7rem;
    background-color: var(--color-gray-100);
    color: var(--color-text-muted);
    font-size: 0.8125rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    border-radius: var(--radius-full);
}

/* 色と下線は表内リンク（.option-link）と共通 */
.monitor-terms__link {
    display: inline-flex;
    align-items: center;
    gap: 0.3em;
    color: var(--color-primary-dark);
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: 0.25em;
}

.monitor-terms__link:hover {
    color: var(--color-primary);
}

/* 外部リンクの矢印。下線を引き継がないよう、アイコンだけ外に出す */
.monitor-terms__link-icon {
    display: inline-flex;
    text-decoration: none;
}

/* 「変わらないこと」はお願いではないので、番号を振らず破線の下に置く。
   制作メンバーのカード（.member__name）と同じ、役割の切り替えを示す破線 */
.monitor-terms__foot {
    margin-top: 1.9rem;
    padding-top: 1.6rem;
    border-top: 1px dashed rgba(0, 0, 0, 0.18);
    font-size: clamp(0.85rem, 0.83rem + 0.12vw, 0.925rem);
    line-height: 1.8;
    letter-spacing: 0.01em;
    color: var(--color-text-muted);
    /* 上の01・02と行頭を揃える。中央寄せにすると、番号つきの2件から
       切り離された別のかたまりに見えてしまう */
    text-align: left;
}

/* --------------------------------------------------------------------------
   プラン2枚
   -------------------------------------------------------------------------- */
.monitor-offer__cards {
    display: grid;
    /* 2枚が並ぶのは 800px 以上（カード下限 348px + gap）。それ未満は自動で1列。
       下限が 340px だと 759〜779px で1枚あたり332pxしか取れず、
       「19.8 万円（税込）」がカードの右padding を数px はみ出す（768px = iPad縦が該当）。
       金額が1行で収まる最小幅 348px まで上げて、収まらない幅は1列に落とす */
    grid-template-columns: repeat(auto-fit, minmax(348px, 1fr));
    gap: var(--space-md);
    max-width: 880px;
    /* 「お願いすること」の札との間。--space-lg だと「おすすめ」の札の高さが
       上乗せされて、条件と価格が別のかたまりに切れて見える */
    margin: var(--space-md) auto 0;
}

@media (max-width: 400px) {
    .monitor-offer__cards {
        grid-template-columns: 1fr;
    }
}

/* 「おすすめ」の札はカードの外に出す。料金カード（.price__card-wrapper）と
   同じ作りで、札のない側にも同じ高さのダミーを置いて上端を揃える */
.monitor-plan {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.monitor-plan__flag {
    display: inline-block;
    margin-bottom: 10px;
    padding: 0.45rem 1.6rem;
    background-color: var(--color-accent-orange);
    color: var(--color-white);
    font-family: var(--font-family-heading);
    font-size: 0.95rem;
    font-weight: 800;
    line-height: 1;
    letter-spacing: 0.12em;
    text-indent: 0.12em;
    white-space: nowrap;
    border-radius: var(--radius-sm);
    box-shadow: 0 4px 12px rgba(255, 142, 63, 0.45);
}

.monitor-plan__flag--placeholder {
    visibility: hidden;
}

/* ここから下は1列（カードが縦に積まれる）。上の auto-fit が2列に割れるのは
   800px からなので、しきい値をそれに合わせる。400px 起点だとカードが縦積みの
   幅帯（401〜799px）に手当てが効かず、札が宙に浮いたままになる */
@media (max-width: 799px) {
    /* 1列になると上端を揃える相手がいないので、ダミーは場所ごと畳む */
    .monitor-plan__flag--placeholder {
        display: none;
    }

    /* 1列だと札が2枚のカードのちょうど中間に浮き、上下どちらのプランの札か
       読み取れない（「19.8万円（税込）→ おすすめ → スタンダードプラン」と、
       札だけが宙に浮いて見える）。カードの上辺にかぶせて、下のカードのものだと
       一目で分かるようにする */
    .monitor-plan__flag {
        position: relative;
        z-index: 2;
        margin-bottom: -0.72rem;
    }

    /* 札が食い込むぶん、プラン名との間を空けなおす。
       札のないライトプラン側は既定の余白のまま */
    .monitor-plan__flag:not(.monitor-plan__flag--placeholder) + .monitor-plan__card {
        padding-top: calc(var(--space-md) + 0.55rem);
    }
}

.monitor-plan__card {
    width: 100%;
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: var(--space-md) var(--space-md) calc(var(--space-md) + 0.25rem);
    background-color: var(--color-white);
    color: var(--color-text-main);
    /* 黒枠＋ずらし影は、料金カード・ステップカードと共通のLPの型 */
    border: 2px solid var(--color-black);
    border-radius: var(--radius-md);
    box-shadow: 0.4rem 0.4rem 0 rgba(0, 0, 0, 0.12);
}

@media (min-width: 992px) {
    .monitor-plan__card {
        border-width: 4px;
    }
}

/* カードの区別はヘッダーの下線1本だけに持たせる（料金カードの帯と同じ順序で
   ライト＝無彩色、スタンダード＝薄緑。中身は2枚とも同じ黒系で揃える） */
.monitor-plan__card--light {
    --mp-line: var(--color-gray-200);
}

.monitor-plan__card--standard {
    --mp-line: #a4d69a;
}

.monitor-plan__head {
    padding-bottom: 0.95rem;
    border-bottom: 3px solid var(--mp-line);
    text-align: center;
}

.monitor-plan__name {
    font-size: clamp(1.15rem, 1.05rem + 0.4vw, 1.4rem);
    letter-spacing: 0.08em;
    text-indent: 0.08em;
}

.monitor-plan__spec {
    margin-top: 0.7rem;
    font-size: 0.9rem;
    font-weight: 600;
    letter-spacing: 0.03em;
    color: var(--color-text-muted);
}

.monitor-plan__spec-sep {
    margin: 0 0.15em;
    opacity: 0.55;
}

/* 金額は「通常価格 → モニター価格」の2行。ラベルをピルにして左端で揃え、
   数字の左端も1本の線に乗せる（料金カード .price__row と同じ並べ方）。
   矢印や中央寄せの積み上げをやめたぶん、2枚のカードで行の高さも揃う */
.monitor-plan__price {
    display: grid;
    /* 1列目はピル幅で固定。2枚のカードでラベルが同じ文字数なので、
       カードをまたいでも金額の左端が揃う */
    grid-template-columns: auto 1fr;
    align-items: center;
    column-gap: 0.85rem;
    row-gap: 0.6rem;
    /* ヘッダーの下線から一拍あける。詰めるとプラン名と金額が
       同じかたまりに見えて、どこから値段の話か分かりにくい */
    margin: 1.75rem 0 0;
    text-align: left;
}

.monitor-plan__price dd {
    /* dd の既定インデント（40px）を消して、数字をピルの右に付ける */
    margin: 0;
}

.monitor-plan__label {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /* 長いほうの「モニター価格」が1行で収まる幅。狭めると2行に折れる */
    width: 6.2rem;
    padding: 0.4rem 0.4rem;
    white-space: nowrap;
    font-size: 0.8rem;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0.06em;
    /* letter-spacing の分だけ右に寄るのを打ち消して中央に見せる */
    text-indent: 0.06em;
    border-radius: var(--radius-full);
}

.monitor-plan__label--was {
    background-color: var(--color-gray-400);
    color: var(--color-white);
}

.monitor-plan__label--now {
    background-color: var(--color-accent-orange);
    color: var(--color-white);
}

.monitor-plan__value--was {
    font-size: 1.05rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: var(--color-text-muted);
}

.monitor-plan__value--was s {
    /* 取り消し線は金額だけに引く。ラベルまで消すと何の値段か読み取れない */
    text-decoration-thickness: 2px;
}

.monitor-plan__value--now {
    /* 数字・単位・（税込）を1本のベースラインに揃え、gap で一拍あける */
    --mp-num: clamp(2.4rem, 2rem + 1.6vw, 3rem);
    display: flex;
    align-items: baseline;
    gap: 0.2em;
    white-space: nowrap;
    color: var(--color-accent-orange);
    font-family: var(--font-family-heading);
    font-weight: 700;
    line-height: 1;
    /* line-height:1 では数字の ink が箱の中心より約 0.07em 下に寄る。
       align-items:center は箱を揃えるだけなので、ピルより数字が沈んで見える。
       ink の中心をピルの中心に合わせるぶんだけ持ち上げる（料金カードと同じ） */
    transform: translateY(calc(var(--mp-num) * -0.07));
}

.monitor-plan__num {
    font-size: var(--mp-num);
    /* 19.8 のような小数は詰めると桁が団子になるので、既定より少しあける */
    letter-spacing: 0.03em;
}

.monitor-plan__unit {
    font-size: clamp(1.1rem, 1rem + 0.5vw, 1.4rem);
    /* CJK は仮想ボディいっぱいに描かれるので、欧文ベースラインに揃えると
       数字より沈んで見える。料金カードの .price__unit と同じ光学調整 */
    position: relative;
    top: -0.085em;
}

.monitor-plan__tax {
    position: relative;
    top: -0.085em;
    margin-left: 0.15em;
    font-size: 0.85rem;
    font-weight: normal;
    letter-spacing: 0.02em;
    color: var(--color-text-muted);
}

/* 差額。通常価格とモニター価格のあいだに矢印で挟んで、
   「25.8 から 6万円下がって 19.8」の順に目が動くようにする。
   金額と同じ2列目に置いて、上下の数字と左端を揃える */
.monitor-plan__off {
    grid-column: 2;
    justify-self: start;
    display: inline-flex;
    align-items: center;
    gap: 0.45em;
    /* 上下の行に近づけて、2つの金額をつなぐ矢印だと分からせる */
    margin: -0.15rem 0;
    font-family: var(--font-family-heading);
    line-height: 1;
}

/* 矢印は札の外。オレンジのまま残して「下がる」動きだけを受け持たせる */
.monitor-plan__off-arrow {
    display: inline-flex;
    color: var(--color-accent-orange);
}

/* 差額だけ黒地に白抜き。カードの黒枠と同じ色なので浮かず、
   まわりが白と薄い色ばかりのぶん、いちばん強く目に入る */
.monitor-plan__off-num {
    display: inline-flex;
    align-items: center;
    padding: 0.42rem 0.95rem;
    background-color: var(--color-black);
    color: var(--color-white);
    border-radius: var(--radius-sm);
    font-size: 1.2rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    /* letter-spacing の分だけ右に寄るのを打ち消して中央に見せる */
    text-indent: 0.04em;
}

@media (max-width: 480px) {
    /* 1列に落とすと「25.8万円 / −6万円 / 19.8万円」が縦に続いて、
       どれがどの値段か読み取れなくなる。ピルと金額の横並びは保ったまま、
       ラベル幅・字送り・数字の大きさを詰めて幅に収める */
    .monitor-plan__price {
        column-gap: 0.5rem;
        row-gap: 0.5rem;
    }

    .monitor-plan__label {
        width: 5.2rem;
        padding: 0.35rem 0.2rem;
        font-size: 0.72rem;
        letter-spacing: 0.02em;
        text-indent: 0.02em;
    }

    .monitor-plan__value--was {
        font-size: 0.95rem;
    }

    .monitor-plan__value--now {
        --mp-num: 2.05rem;
    }

    .monitor-plan__unit {
        font-size: 1.1rem;
    }

    .monitor-plan__tax {
        margin-left: 0.05em;
        font-size: 0.72rem;
    }

    .monitor-plan__off-num {
        padding: 0.35rem 0.7rem;
        font-size: 1.05rem;
    }
}

/* iPhone SE(1) など 320px 級。上の詰めでもまだ1行に乗らないので、
   数字と（税込）をもう一段落とす。横並びを崩さないことを優先する */
@media (max-width: 359px) {
    .monitor-plan__label {
        width: 4.8rem;
        font-size: 0.68rem;
    }

    .monitor-plan__value--now {
        --mp-num: 1.85rem;
    }

    .monitor-plan__unit {
        font-size: 1rem;
    }

    .monitor-plan__tax {
        font-size: 0.68rem;
    }
}

.monitor-offer__note {
    max-width: 880px;
    margin: 1.7rem auto 0;
    font-size: 0.8125rem;
    line-height: 1.8;
    letter-spacing: 0.01em;
    color: rgba(255, 255, 255, 0.88);
    text-align: center;
}

/* --------------------------------------------------------------------------
   コンバージョン
   -------------------------------------------------------------------------- */
.monitor-offer__cta {
    max-width: 880px;
    margin: var(--space-lg) auto 0;
    padding-top: var(--space-md);
    /* カードとボタンのあいだの区切り。地が濃いので白の破線で引く */
    border-top: 1px dashed rgba(255, 255, 255, 0.5);
    text-align: center;
}

.monitor-offer__cta-lead {
    font-family: var(--font-family-heading);
    font-size: clamp(1.05rem, 0.95rem + 0.5vw, 1.35rem);
    font-weight: 700;
    line-height: 1.7;
    letter-spacing: 0.06em;
}

/* ボタン2本。下部CTA（.cta-lead__btns）と同じ割り付けにそろえる */
.monitor-offer__btns {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 14px;
    margin-top: 1.9rem;
}

.monitor-offer__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /* 2本を等幅で分け合う。260pxは「フォームで相談する」＋丸アイコンが収まる下限 */
    flex: 0 1 300px;
    min-width: 260px;
    gap: 10px;
    padding: 15px 22px;
    color: var(--color-white);
    font-family: var(--font-family-heading);
    font-size: 1.2rem;
    font-weight: 700;
    line-height: 1.4;
    letter-spacing: 0.03em;
    white-space: nowrap;
    border-radius: 100px;
    box-shadow: 0 14px 30px rgba(0, 0, 0, 0.28);
    transition: transform var(--transition-fast), filter var(--transition-fast);
}

.monitor-offer__btn--form {
    background-color: var(--color-accent-orange);
}

/* LINEはブランド色（#06C755）のまま使う。サイトの緑に寄せると
   LINEのボタンだと気づかれず、押される率が落ちる（下部CTAと同じ判断） */
.monitor-offer__btn--line {
    background-color: #06c755;
}

.monitor-offer__btn:hover {
    transform: translateY(-2px);
    filter: brightness(1.05);
}

.monitor-offer__btn:focus-visible {
    outline: 3px solid var(--color-white);
    outline-offset: 3px;
}

.monitor-offer__btn-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.45);
}

.monitor-offer__btn-icon svg {
    width: 20px;
    height: 20px;
}

.monitor-offer__cta-note {
    margin-top: 1.2rem;
    font-size: 0.8125rem;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.88);
}

@media (prefers-reduced-motion: reduce) {
    .monitor-offer__btn,
    .monitor-offer__btn:hover {
        transition: none;
        transform: none;
    }
}

@media (max-width: 767px) {
    .monitor-offer__btn {
        flex: 1 1 100%;
        min-width: 0;
        font-size: 1.1rem;
    }
}