/* ========================================
   index.css — Hero・Flow リデザイン
======================================== */

/* ---- HERO ---- */
.home-hero {
    position: relative;
    /* 止め絵準拠でややタイトに（PAINが少し覗く＝円が次セクションへ自然にかかる）。100vhだと縦長すぎて円とのバランスが崩れる */
    min-height: min(100vh, 980px);
    display: flex;
    flex-direction: column;
    justify-content: center;
    /* overflow:visible＝特大リングを次セクション(PAIN)へはみ出させる。横はみ出しは .home-scene-wrap{overflow-x:clip} が抑止。各セクション背景は透明なので円が下まで抜けて見える (2026-06-08) */
    overflow: visible;
    background: var(--c-bg);
}

/* 背景装飾 */
.home-hero-deco {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
}
.deco-circle {
    position: absolute;
    border-radius: 50%;
}
.deco-c1 {
    width: 600px;
    height: 600px;
    top: -200px;
    left: -100px;
    background: radial-gradient(
        circle,
        rgba(13, 193, 204, 0.3) 0%,
        transparent 65%
    );
    animation: decoFloat 12s ease-in-out infinite;
    transition: background 0.8s ease;
}
.deco-c2 {
    width: 400px;
    height: 400px;
    bottom: -100px;
    right: -150px;
    background: radial-gradient(
        circle,
        rgba(240, 77, 152, 0.16) 0%,
        transparent 65%
    );
    animation: decoFloat 10s ease-in-out infinite reverse;
    transition: background 0.8s ease;
}
.deco-c3 {
    width: 200px;
    height: 200px;
    top: 30%;
    left: 45%;
    background: radial-gradient(
        circle,
        rgba(13, 193, 204, 0.45) 0%,
        transparent 65%
    );
    animation: decoFloat 8s ease-in-out infinite 2s;
}
@keyframes decoFloat {
    0%,
    100% {
        transform: translate(0, 0) scale(1);
    }
    50% {
        transform: translate(20px, -30px) scale(1.05);
    }
}
.deco-lines {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

/* コンテンツ */
.home-hero-inner {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 48px;
    align-items: center;
    padding-top: 80px;
    padding-bottom: 80px;
}
.home-hero-left {
    display: flex;
    flex-direction: column;
    gap: 0;
}
.home-hero-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--c-primary);
    background: rgba(13, 193, 204, 0.1);
    border-radius: 999px;
    padding: 7px 18px;
    margin-bottom: 28px;
    width: fit-content;
    border: 1px solid rgba(13, 193, 204, 0.2);
}
.home-hero-title {
    font-family: var(--font-ja);
    font-weight: 900;
    line-height: 1.1;
    margin-bottom: 24px;
    display: flex;
    flex-direction: column;
}
.home-hero-title-line {
    display: block;
    font-size: clamp(2.8rem, 5.5vw, 4.2rem);
    color: var(--c-dark);
    opacity: 0;
    transform: translateY(24px);
    animation: titleIn 0.7s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}
.home-hero-title-line:nth-child(1) {
    animation-delay: 0.1s;
}
.home-hero-title-line:nth-child(2) {
    animation-delay: 0.25s;
}
.home-hero-title-line:nth-child(3) {
    animation-delay: 0.4s;
}
@keyframes titleIn {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
.home-hero-title-accent {
    color: var(--c-primary);
    position: relative;
    display: inline-block;
}
.home-hero-title-accent::after {
    content: "";
    position: absolute;
    bottom: 4px;
    left: 0;
    right: 0;
    height: 5px;
    background: linear-gradient(
        90deg,
        var(--c-primary) 0%,
        rgba(13, 193, 204, 0) 100%
    );
    border-radius: 2px;
    opacity: 0.4;
}
.home-hero-sub {
    font-size: 1rem;
    color: var(--c-gray);
    line-height: 1.85;
    font-weight: 500;
    margin-bottom: 36px;
}
.home-hero-actions {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
    margin-bottom: 12px;
}
.home-hero-btn-main {
    font-size: 1rem;
    padding: 14px 28px;
}
/* ビジュアル */
.home-hero-right {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}
.home-hero-visual {
    position: relative;
    width: 400px;
    height: 400px;
    margin-top: -40px;
    /* 止め絵に合わせ構図全体（円＋ティール円＋ティックスの基準）を約46px左へ。relative＝stacking context非生成で円の下方向はみ出しを保持 */
    right: 46px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.home-hero-visual-ring {
    position: absolute;
    border-radius: 50%;
    border: 1.5px solid var(--c-primary);
}
.home-hero-ring1 {
    width: 380px;
    height: 380px;
    opacity: 0.35;
    animation: ringPulse 4s ease-in-out infinite;
}
.home-hero-ring2 {
    width: 280px;
    height: 280px;
    opacity: 0.45;
    animation: ringPulse 4s ease-in-out infinite 0.5s;
    border-style: dashed;
    border-color: rgba(13, 193, 204, 0.4);
}
/* 参考デザインの「大きな円」＝メッセージ円と同心の特大リング（見出しの後ろ＝z-index:-1。heroのoverflow:hiddenでヒーロー枠にクロップ） */
.home-hero-ring-outer {
    /* 止め絵準拠＝ヒーロー幅の約0.67。さらに参考ではティール円と同心ではなく「やや下・やや左」へ
     オフセットされており、そのため中サイズの円でも下端がPAINに自然にかかる。translateで再現 */
    width: 900px;
    height: 900px;
    border-width: 1.2px;
    border-color: rgba(13, 193, 204, 0.45);
    z-index: -1;
    transform: translate(-55px, 100px);
}
@keyframes ringPulse {
    0%,
    100% {
        transform: scale(1);
        opacity: 0.35;
    }
    50% {
        transform: scale(1.03);
        opacity: 0.5;
    }
}
.home-hero-visual-center {
    position: relative;
    z-index: 2;
    /* 止め絵準拠＝ヒーロー幅の約0.19。大きな円との比率(約3.6:1)を合わせる */
    width: 240px;
    height: 240px;
    background: var(--c-primary);
    padding: 0 20px;
    border-radius: 50%;
    box-shadow:
        0 24px 60px rgba(13, 193, 204, 0.38),
        0 6px 18px rgba(13, 193, 204, 0.22);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    /* Tineedsの“心臓”＝これから動き出す鼓動（小さく→大きく脈打つ）。reduced-motionでは集約ブロックが自動停止 */
    transform-origin: center;
    animation: heartBeat 2.6s ease-in-out infinite;
    will-change: transform;
}
/* 鼓動：静止→キュッと縮む→ドクンと拡張→余韻のもう一拍→静止して次を待つ */
@keyframes heartBeat {
    0% {
        transform: scale(1);
    }
    10% {
        transform: scale(0.92);
    }
    26% {
        transform: scale(1.08);
    }
    40% {
        transform: scale(0.97);
    }
    52% {
        transform: scale(1.04);
    }
    66% {
        transform: scale(1);
    }
    100% {
        transform: scale(1);
    }
}
.home-hero-visual-label {
    width: 165px;
    height: auto;
    display: block;
}
/* ヒーロー中央キャッチフレーズ：日本語=1枚 / 英語=PC1行・スマホ2行で画像を差し替え（lang.jsが html[lang] を設定） */
.home-hero-visual-label.label-en {
    display: none;
}
html[lang="en"] .home-hero-visual-label.label-ja {
    display: none;
}
html[lang="en"] .home-hero-visual-label.label-en-pc {
    display: block;
    width: 185px;
}
@media (max-width: 768px) {
    html[lang="en"] .home-hero-visual-label.label-en-pc {
        display: none;
    }
    html[lang="en"] .home-hero-visual-label.label-en-sp {
        display: block;
    }
}

/* 惑星まわりのナビ＝周回する衛星のような円形ボタン */
.home-hero-badge {
    position: absolute;
    width: 84px;
    height: 84px;
    border-radius: 50%;
    background: #fff;
    box-shadow:
        0 10px 28px rgba(13, 193, 204, 0.2),
        inset 0 0 0 1.5px var(--c-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-size: 0.66rem;
    font-weight: 800;
    line-height: 1.3;
    letter-spacing: 0.02em;
    color: var(--c-primary);
    z-index: 3;
    /* フロートは translate、ホバー拡大は scale プロパティに分離して衝突回避 */
    animation: moonFloat 5s ease-in-out infinite;
}
/* 上下左右（N/E/S/W）に配置。中央寄せ transform とフロート/拡大は別プロパティ */
.home-hero-badge.b1 {
    top: -30px;
    left: 50%;
    transform: translateX(-50%);
    animation-delay: 0s;
}
.home-hero-badge.b2 {
    top: 50%;
    right: -30px;
    transform: translateY(-50%);
    animation-delay: 1.2s;
}
.home-hero-badge.b3 {
    bottom: -30px;
    left: 50%;
    transform: translateX(-50%);
    animation-delay: 0.6s;
}
.home-hero-badge.b4 {
    top: 50%;
    left: -30px;
    transform: translateY(-50%);
    animation-delay: 1.8s;
}
@keyframes moonFloat {
    0%,
    100% {
        translate: 0 0;
    }
    50% {
        translate: 0 -7px;
    }
}

/* ナビ円ボタン：ホバーでブランドカラーに点灯＋ふわっと拡大 */
.home-hero-nav {
    cursor: pointer;
    text-decoration: none;
    transition:
        scale 0.4s cubic-bezier(0.34, 1.56, 0.64, 1),
        background 0.3s ease,
        color 0.3s ease,
        box-shadow 0.3s ease;
}
.home-hero-nav:hover,
.home-hero-nav:focus-visible {
    background: radial-gradient(circle at 32% 28%, #34d6de, var(--c-primary));
    color: #fff;
    outline: none;
    box-shadow:
        0 16px 36px rgba(13, 193, 204, 0.45),
        inset 0 0 0 1.5px var(--c-primary);
    scale: 1.12;
    z-index: 5;
    outline: none;
}
.home-hero-nav:active {
    scale: 1.04;
}

/* ===== ホバー：小惑星の周りを渦巻く回転リング＋周回コメット（疑似要素のみ・レイアウト非破壊） ===== */
.home-hero-nav {
    isolation: isolate;
}
.home-hero-nav::before {
    content: "";
    position: absolute;
    inset: -11px;
    border-radius: 50%;
    z-index: -1;
    background: conic-gradient(
        from 0deg,
        rgba(13, 193, 204, 0) 0deg,
        rgba(13, 193, 204, 0) 120deg,
        var(--c-primary) 300deg,
        #6fe6ec 350deg,
        rgba(13, 193, 204, 0) 360deg
    );
    -webkit-mask: radial-gradient(
        farthest-side,
        transparent calc(100% - 4px),
        #000 calc(100% - 3px)
    );
    mask: radial-gradient(
        farthest-side,
        transparent calc(100% - 4px),
        #000 calc(100% - 3px)
    );
    opacity: 0;
    transform: rotate(0deg) scale(0.78);
    transition:
        opacity 0.35s ease,
        transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.home-hero-nav::after {
    content: "";
    position: absolute;
    inset: -11px;
    border-radius: 50%;
    z-index: -1;
    background: radial-gradient(
        circle 5px at 50% 0%,
        #fff 0 35%,
        var(--c-primary) 45%,
        rgba(13, 193, 204, 0) 70%
    );
    filter: drop-shadow(0 0 6px var(--c-primary-glow));
    opacity: 0;
    transform: rotate(0deg) scale(0.8);
    transition:
        opacity 0.3s ease,
        transform 0.4s ease;
}
.home-hero-nav:hover::before,
.home-hero-nav:focus-visible::before {
    opacity: 0.95;
    transform: scale(1);
    animation: badgeOrbitCW 2.6s linear infinite;
}
.home-hero-nav:hover::after,
.home-hero-nav:focus-visible::after {
    opacity: 1;
    transform: scale(1);
    animation: badgeOrbitCCW 3.2s linear infinite;
}
@keyframes badgeOrbitCW {
    to {
        transform: rotate(360deg) scale(1);
    }
}
@keyframes badgeOrbitCCW {
    to {
        transform: rotate(-360deg) scale(1);
    }
}

/* 装飾点 */
.home-hero-dot {
    position: absolute;
    border-radius: 50%;
    z-index: 1;
}
.d1 {
    width: 14px;
    height: 14px;
    background: var(--c-primary);
    opacity: 0.5;
    top: 30px;
    left: 30px;
    animation: dotPulse 3s ease-in-out infinite;
}
.d2 {
    width: 10px;
    height: 10px;
    background: var(--c-pink);
    opacity: 0.4;
    bottom: 40px;
    right: 20px;
    animation: dotPulse 3s ease-in-out infinite 0.8s;
}
.d3 {
    width: 6px;
    height: 6px;
    background: var(--c-primary);
    opacity: 0.6;
    top: 50%;
    left: 10px;
    animation: dotPulse 3s ease-in-out infinite 1.5s;
}
@keyframes dotPulse {
    0%,
    100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.4);
    }
}

/* ---- レスポンシブ（ヒーロー） ---- */
@media (max-width: 1024px) {
    /* 惑星モチーフはテキストの下に回り込ませて表示（消さない） */
    .home-hero-inner {
        grid-template-columns: 1fr;
        min-height: auto;
        gap: 28px;
        padding-bottom: 56px;
    }
    .home-hero-left {
        min-width: 0;
    }
    .home-hero-right {
        display: flex;
        min-width: 0;
    }
    /* transform-origin top で上方向に縮小し、負マージンで枠の余白を相殺（横はみ出し防止）。上に余白を足し実績ボックスとの被りを防止 */
    .home-hero-visual {
        transform: scale(0.8);
        transform-origin: top center;
        margin: 28px -40px 0;
        right: 0;
    }
}
@media (max-width: 768px) {
    /* スマホ：CTAボタンを縦積み＋中央寄せ。サービス詳細は左右パディングを広げてバランス調整 */
    .home-hero-actions {
        flex-direction: column;
        align-items: center;
    }
    .home-hero-actions .btn-secondary {
        padding: 15px 50px;
    }
    /* 惑星ナビの左寄りは .home-hero-right のベースルール(justify-content:center)復活で解消済み（旧:margin-left:40px の応急処置は不要） */
    .home-hero-title-line {
        font-size: 2.4rem;
    }    .home-hero-eyebrow {
        font-size: 0.72rem;
    }
    /* スマホは更に縮小。上に余白＋負マージンで400px枠を相殺し画面内に収める */
    .home-hero-visual {
        transform: scale(0.62);
        transform-origin: top center;
        /* ring-outer非表示で下側に余白ができるため、負の下マージンを増やして詰める */
        margin: 36px -72px -132px;
        right: 0;
    }
    /* スマホ：特大の外周リング(ring-outer)だけ非表示。トップ/サービスを繋ぐ軌道リング(ring1/ring2)は残す */
    .home-hero-ring-outer { display: none; }
    /* スマホ：軌道ナビの丸＋文字を+10%（84→92px / 0.66→0.73rem） */
    .home-hero-badge {
        width: 92px;
        height: 92px;
        font-size: 0.73rem;
    }
}

/* ヒーロー右下のティックス（imgmain TOP_TICKS_02・座り／参考デザイン準拠・heroに右下アンカー＝縦長キャンバス非依存で安定） */
/* 止め絵準拠＝ティックスはティール円の右下（中段）に小さく座る。大きな円の右下弧の上あたり */
.home-hero-ticks {
    position: absolute;
    right: clamp(6px, 2vw, 34px);
    top: 62%;
    width: clamp(112px, 11vw, 200px);
    height: auto;
    z-index: 2;
    pointer-events: none;
    filter: drop-shadow(0 14px 26px rgba(0, 0, 0, 0.14));
    animation: hs-float 6s ease-in-out infinite;
}
/* ≤1024px：1カラムでヒーローが縦伸びするため、ティックスは下アンカーに戻す（本文との重なり回避） */
@media (max-width: 1024px) {
    .home-hero-ticks {
        top: auto;
        bottom: 0;
        right: 2%;
        width: clamp(108px, 16vw, 160px);
    }
}
@media (max-width: 768px) {
    .home-hero-ticks {
        width: clamp(92px, 24vw, 132px);
        right: 1%;
    }
}

/* ---- WHY ---- */
.why {
    padding: 100px 0;
    position: relative;
    overflow: hidden;
}
.why-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    align-items: start; /* 開いたアコーディオンのカードだけが伸びるよう、等高stretchをやめる */
    position: relative;
    z-index: 1;
}
/* 閉じている時は3カードの高さを揃え、トグル(＋)を下端で揃える。開いたものだけ min-height を超えて伸びる（PC3列のみ） */
@media (min-width: 769px) {
  .why-card { min-height: 500px; }
}
.why-card {
    background: #fff;
    border-radius: var(--r-xl);
    box-shadow: var(--shadow-md);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease;
}
.why-card:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow-lg);
}
/* 止め絵準拠：カード上部はティール背景＋透過イラスト(TOP_三つの理由)を収める */
.why-card-photo {
    height: 210px;
    overflow: hidden;
    background: linear-gradient(155deg, #1ecbd5 0%, #0dc1cc 55%, #0aabb8 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px 16px;
}
.why-photo-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    transition: transform 0.5s ease;
    display: block;
}
.why-card:hover .why-photo-img {
    transform: scale(1.05);
}
.why-card-body {
    padding: 28px;
    display: flex;
    flex-direction: column;
    flex: 1; /* カード高さ揃え(stretch)で生じた余白を本文側が吸収 */
}
/* 本文量が違っても各カードのアコーディオン(対応業種一覧 等)を下端で揃える */
.why-card-body .industry-accordion { margin-top: auto; }
.why-num {
    font-family: var(--font-en);
    font-size: 2.2rem;
    font-weight: 900;
    color: var(--c-primary);
    opacity: 0.3;
    line-height: 1;
    margin-bottom: 8px;
    display: block;
}
.why-card-body h3 {
    font-size: 1rem;
    font-weight: 800;
    color: var(--c-dark);
    margin-bottom: 10px;
}
.why-card-body p {
    font-size: 0.85rem;
    color: var(--c-gray);
    line-height: 1.75;
    font-weight: 500;
}

/* 止め絵準拠：WHY見出し「選ばれる3つの理由」先頭にティールの大円（"選ば"の背後・見出しと同心） */
#why .section-header .section-title {
    position: relative;
    display: inline-block;
    z-index: 0;
}
#why .section-header .section-title::before {
    content: "";
    position: absolute;
    z-index: -1;
    left: -0.34em;
    top: 50%;
    transform: translateY(-50%);
    width: 1.55em;
    height: 1.55em;
    border-radius: 50%;
    background: var(--c-primary);
    opacity: 0.2;
}

/* ---- PROCESS ---- */
.process {
    padding: 100px 0;
    background: linear-gradient(135deg, #0dc1cc 0%, #079ab5 100%);
}
.process-steps {
    display: flex;
    align-items: stretch;
    gap: 24px;
    margin-top: 48px;
    position: relative;
}
/* ステップを繋ぐ1本のライン（番号ノードの中心を通す＝「流れ」を表現） */
.process-steps::before {
    content: "";
    position: absolute;
    top: 23px;
    left: 12.5%;
    right: 12.5%;
    height: 2px;
    background: rgba(255, 255, 255, 0.4);
}
.process-step {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    color: #fff;
    position: relative;
}
.process-step-body {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 1;
}
.process-step-num {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: #fff;
    color: #0aa7bc;
    font-family: var(--font-en);
    font-size: 1rem;
    font-weight: 900;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 18px;
    box-shadow: 0 4px 14px rgba(4, 52, 60, 0.28);
    position: relative;
    z-index: 1;
    transition: transform 0.3s ease;
}
.process-step:hover .process-step-num {
    transform: translateY(-4px);
}
.process-step h3 {
    font-size: 0.98rem;
    font-weight: 800;
    color: #fff;
    margin-bottom: 8px;
}
.process-step p {
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.85);
    line-height: 1.8;
    font-weight: 500;
    margin-bottom: 14px;
    max-width: 240px;
}
.process-tag {
    font-size: 0.7rem;
    font-weight: 700;
    background: rgba(255, 255, 255, 0.18);
    color: #fff;
    padding: 5px 14px;
    border-radius: 999px;
    margin-top: auto;
    align-self: center;
}
/* 「流れ」アクセント文字はティール背景に同化するので process 内は白に */
.process .section-title .text-primary {
    color: #fff;
}

/* ---- HOME-SERVICES ---- */
.home-services {
    padding: 100px 0;
    position: relative;
    /* 色鮮やかなメッシュグラデーション背景（カードは白で映える） */
    background:
        radial-gradient(
            circle at 8% 18%,
            rgba(13, 193, 204, 0.2),
            transparent 42%
        ),
        radial-gradient(
            circle at 92% 12%,
            rgba(240, 77, 152, 0.18),
            transparent 45%
        ),
        radial-gradient(
            circle at 78% 88%,
            rgba(124, 92, 246, 0.16),
            transparent 45%
        ),
        radial-gradient(
            circle at 18% 92%,
            rgba(255, 217, 61, 0.18),
            transparent 42%
        ),
        linear-gradient(180deg, #fbfeff 0%, #f4fbfc 100%);
}
.home-services-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 20px;
    margin-top: 48px;
}
.home-srv-card {
    flex: 1 1 300px;
    max-width: 360px;
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid var(--c-border);
    border-radius: var(--r-xl);
    padding: 28px 24px;
    text-decoration: none;
    color: inherit;
    position: relative;
    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease,
        border-color 0.3s ease;
    overflow: hidden;
}
.home-srv-card::before {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--c-primary), var(--c-pink));
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.35s ease;
}
.home-srv-card:hover::before {
    transform: scaleX(1);
}
.home-srv-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-lg);
    border-color: transparent;
}
.home-srv-card--featured {
    border: 2px solid var(--c-primary);
    background: linear-gradient(135deg, #f0fafa, #fff);
}
.home-srv-badge {
    position: absolute;
    top: 14px;
    right: 14px;
    font-size: 0.68rem;
    font-weight: 700;
    color: var(--c-primary);
    background: rgba(13, 193, 204, 0.1);
    padding: 4px 10px;
    border-radius: 999px;
    width: fit-content;
    margin-bottom: 0;
}
.home-srv-icon {
    font-size: 2.2rem;
    margin-bottom: 14px;
}
.home-srv-icon {
    line-height: 0;
}
.home-srv-icon svg {
    width: 60px;
    height: 60px;
    display: block;
    overflow: visible;
}
.home-srv-card h3 {
    font-size: 0.95rem;
    font-weight: 800;
    color: var(--c-dark);
    margin-bottom: 10px;
}
.home-srv-card p {
    font-size: 0.82rem;
    color: var(--c-gray);
    line-height: 1.75;
    font-weight: 500;
    flex: 1;
    margin-bottom: 16px;
}
.home-srv-link {
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--c-primary);
    margin-top: auto;
}

/* ---- FOOTER ---- */
.home-footer {
    position: relative;
    overflow: hidden;
    background: var(--c-dark);
    color: rgba(255, 255, 255, 0.88);
}
/* 上方から光が差し込む演出（teal グロー＋斜めの光ビーム） */
.home-footer::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background:
        radial-gradient(95% 60% at 50% -18%, rgba(13, 193, 204, 0.30), rgba(13, 193, 204, 0) 62%),
        linear-gradient(118deg, transparent 30%, rgba(255, 255, 255, 0.07) 43%, transparent 50%),
        linear-gradient(128deg, transparent 56%, rgba(255, 255, 255, 0.05) 67%, transparent 73%);
}
.home-footer-top,
.home-footer-bottom {
    position: relative;
    z-index: 1;
}
.home-footer-top {
    padding: 64px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}
.home-footer-top-inner {
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: 64px;
}
.home-footer-logo {
    display: block;
    height: 30px;
    width: auto;
    margin-bottom: 8px;
}
.home-footer-tagline {
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.95);
    margin-bottom: 14px;
}
.home-footer-desc {
    font-size: 0.8rem;
    line-height: 1.8;
    color: rgba(255, 255, 255, 0.82);
    font-weight: 500;
}
.home-footer-nav-group {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 30px;
}
.home-footer-nav-col {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.home-footer-nav-head {
    font-size: 0.72rem;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.75);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin-bottom: 4px;
}
.home-footer-nav-col a {
    position: relative;
    padding-left: 14px;
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.92);
    text-decoration: none;
    transition: color 0.2s;
}
.home-footer-nav-col a::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.3);
    transform: translateY(-50%);
    transition: background 0.2s, transform 0.2s;
}
.home-footer-nav-col a:hover {
    color: var(--c-primary);
}
.home-footer-nav-col a:hover::before {
    background: var(--c-primary);
    transform: translateY(-50%) scale(1.5);
}
.home-footer-bottom {
    padding: 20px 0;
}
.home-footer-bottom-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.home-footer-bottom p {
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.62);
}
.home-footer-bottom-links a {
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.62);
    text-decoration: none;
}
.home-footer-bottom-links a:hover {
    color: rgba(255, 255, 255, 0.6);
}

/* ---- レスポンシブ ---- */
@media (max-width: 1024px) {
    .home-services-grid {
        grid-template-columns: 1fr 1fr;
    }
    .home-footer-top-inner {
        grid-template-columns: 1fr;
        gap: 40px;
    }
    .home-footer-nav-group {
        grid-template-columns: repeat(3, 1fr);
    }
}
@media (max-width: 768px) {
    /* カードは幅80%くらいに・間隔ゆったり */
    .why-grid {
        grid-template-columns: 1fr;
        width: 82vw;
        max-width: 360px;
        margin-inline: auto;
        gap: 44px;
    }
    .why-card-body {
        padding: 24px;
    }
    .why-card-photo {
        height: 190px;
    }
    .process-steps {
        flex-direction: column;
        align-items: stretch;
        gap: 0;
    }
    .process-steps::before {
        display: none;
    }
    .process-step {
        flex-direction: row;
        align-items: flex-start;
        text-align: left;
        gap: 18px;
        padding-bottom: 34px;
    }
    .process-step:last-child {
        padding-bottom: 0;
    }
    /* ノード同士を縦線で連結（次ノード中心まで） */
    .process-step:not(:last-child)::before {
        content: "";
        position: absolute;
        left: 22px;
        top: 23px;
        height: 100%;
        width: 2px;
        background: rgba(255, 255, 255, 0.35);
    }
    .process-step-num {
        margin-bottom: 0;
        flex: none;
    }
    .process-step-body {
        align-items: flex-start;
        text-align: left;
        padding-top: 7px;
    }
    .process-step p {
        max-width: none;
    }
    .process-tag {
        align-self: flex-start;
    }
    /* スマホ: サービスカードを最小余白でコンパクトに（padding/間隔とも10px前後） */
    .home-services-grid {
        gap: 10px;
        margin-top: 28px;
    }
    .home-srv-card {
        max-width: none;
        padding: 10px 12px;
    }
    .home-srv-badge { margin-bottom: 8px; }
    .home-srv-icon { margin-bottom: 8px; }
    .home-srv-icon svg { width: 46px; height: 46px; }
    .home-srv-card h3 { margin-bottom: 6px; }
    .home-srv-card p { margin-bottom: 10px; line-height: 1.6; }
    .home-footer-nav-group {
        grid-template-columns: 1fr 1fr;
        gap: 24px;
    }
    /* スマホはロゴを中央に */
    .home-footer-logo {
        margin-inline: auto;
    }
    .home-footer-bottom-inner {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }
}

/* 業種文字をWHYセクション内に確実に収める */
.section-why,
.why {
    position: relative;
    overflow: hidden;
}
/* 止め絵準拠：業種ウォーターマークは導入事例(cases)の背景に置く＝位置基準を確保 */
#cases.case-studies {
    position: relative;
}
#cases .industry-parallax-layer {
    top: 20px;
}
.industry-parallax-layer {
    position: absolute;
    /* 山に被らないよう、上端を「山を避ける余白(--why-pad-top)＋少しの余裕」まで下げる。
     overflow:hidden で、ふわふわ/パララックスで上にはみ出す分も山側に出さない。 */
    top: calc(var(--why-pad-top, 0px) + 20px);
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
    z-index: 0;
    overflow: hidden;
}
.section-why .container,
.why .container {
    position: relative;
    z-index: 1;
}

/* ========================================
   PAIN：ミニマル番号付きリスト
======================================== */
.pain {
    padding: 100px 0;
    background: #fff;
    position: relative;
}
.pain .container {
    position: relative;
}
/* 止め絵準拠：右上の青い装飾丸 */
.pain-deco-dot {
    position: absolute;
    top: 32%; /* 止め絵準拠：PAINリスト項目03〜04の右（中央右端）に配置 */
    right: clamp(0px, 1vw, 14px);
    width: clamp(40px, 4.6vw, 62px);
    aspect-ratio: 1;
    border-radius: 50%;
    background: rgba(13, 193, 204, 0.28);
    z-index: 0;
    pointer-events: none;
}
/* 止め絵準拠：左カラムCTA下に座るティックス */
.pain-ticks {
    display: block;
    width: clamp(150px, 16vw, 250px);
    height: auto;
    margin-top: 44px;
    filter: drop-shadow(0 14px 26px rgba(0, 0, 0, 0.12));
    animation: hs-float 6s ease-in-out infinite;
}
.pain-layout {
    display: grid;
    grid-template-columns: 380px 1fr;
    gap: 80px;
    align-items: start;
}
.pain-left {
    position: sticky;
    top: 100px;
}
.pain-title {
    font-size: clamp(2rem, 4vw, 2.4rem);
    font-weight: 900;
    color: var(--c-dark);
    line-height: 1.25;
    margin: 16px 0 20px;
}
.pain-lead {
    font-size: 0.95rem;
    color: var(--c-gray);
    line-height: 1.85;
    font-weight: 500;
}

/* リスト */
.pain-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 0;
}
.pain-item {
    display: grid;
    grid-template-columns: 56px 1fr;
    gap: 24px;
    align-items: start;
    padding: 28px 0;
    border-bottom: 1px solid var(--c-border);
    transition: background 0.2s;
}
.pain-item:first-child {
    border-top: 1px solid var(--c-border);
}
.pain-item:hover {
    background: rgba(13, 193, 204, 0.03);
}
.pain-num {
    font-family: var(--font-en);
    font-size: 1.6rem;
    font-weight: 900;
    color: var(--c-primary);
    opacity: 0.35;
    line-height: 1;
    padding-top: 2px;
}
.pain-text strong {
    display: block;
    font-size: 0.97rem;
    font-weight: 800;
    color: var(--c-dark);
    margin-bottom: 6px;
    line-height: 1.4;
}
.pain-text p {
    font-size: 0.84rem;
    color: var(--c-gray);
    line-height: 1.75;
    font-weight: 500;
}

@media (max-width: 1024px) {
    .pain-layout {
        grid-template-columns: 1fr;
        gap: 40px;
    }
    .pain-left {
        position: static;
    }
}
@media (max-width: 768px) {
    .pain-item {
        grid-template-columns: 44px 1fr;
        gap: 16px;
        padding: 20px 0;
    }
    .pain-num {
        font-size: 1.2rem;
    }
    /* スマホ：PAIN左カラム（バッジ/見出し/本文/CTA/狐）を中央寄せ。
       inline系(label・btn-text)はtext-alignで、block画像(pain-ticks)はmargin autoで中央化 */
    .pain-left { text-align: center; }
    .pain-left .pain-ticks { margin-inline: auto; }
}

/* scroll-hint: home-hero内では絶対配置でセンタリング */
.home-hero .scroll-hint {
    position: absolute;
    bottom: 28px;
    /* fade-upアニメの最終transform(translateY)がtranslateX(-50%)を打ち消すため、
       transformに依存せず left/right:0 + margin auto で確実に中央寄せ */
    left: 0;
    right: 0;
    margin-inline: auto;
    width: max-content;
    z-index: 2;
}

/* ========================================
   index26：3D Tiltパララックス
======================================== */

/* シーン全体にperspectiveを設定 */
.why-3d-scene {
    perspective: 1200px;
    perspective-origin: 50% 40%;
}

/* カード本体：3D変換の受け皿 */
.why-tilt-card {
    transform-style: preserve-3d;
    transform: rotateX(0deg) rotateY(0deg) translateZ(0px);
    transition:
        transform 0.15s ease-out,
        box-shadow 0.15s ease-out;
    will-change: transform;
    position: relative;
    overflow: hidden;
}

/* 光の反射レイヤー */
.why-card-shine {
    position: absolute;
    inset: 0;
    background: radial-gradient(
        circle at 50% 50%,
        rgba(255, 255, 255, 0.18) 0%,
        transparent 65%
    );
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.2s ease;
    z-index: 2;
    mix-blend-mode: screen;
}
.why-tilt-card:hover .why-card-shine {
    opacity: 1;
}

/* 技術スタックリスト */
.why-tech-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 8px 0 4px;
}
.why-tech-list li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 0.8rem;
    color: var(--c-gray);
    line-height: 1.6;
    font-weight: 500;
}
.why-tech-badge {
    display: inline-block;
    font-size: 0.68rem;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 4px;
    min-width: 96px;
    text-align: center;
    white-space: nowrap;
    flex-shrink: 0;
    margin-top: 2px;
}
/* 技術スタックバッジ：各プロダクトの公式ブランドカラーに統一（bg=薄/文字=濃） */
.why-tech-badge--kintone {
    background: rgba(247, 223, 30, 0.3);
    color: #7a6a00;
} /* レモン（kintone=明るいレモン）*/
.why-tech-badge--js {
    background: rgba(234, 179, 8, 0.18);
    color: #a16207;
} /* ゴールド（JS=ゴールド）*/
.why-tech-badge--rest {
    background: rgba(100, 116, 139, 0.12);
    color: #475569;
} /* グレー(中立) */
.why-tech-badge--gas {
    background: rgba(52, 168, 83, 0.15);
    color: #2e8b47;
} /* GAS緑 */
.why-tech-badge--node {
    background: rgba(46, 125, 50, 0.16);
    color: #2e7d32;
} /* Node緑(濃) */
.why-tech-badge--firebase {
    background: rgba(245, 124, 0, 0.15);
    color: #c2570a;
} /* Firebaseアンバー */
.why-tech-badge--html {
    background: rgba(227, 79, 38, 0.15);
    color: #c2410c;
} /* HTMLオレンジ */
.why-tech-badge--css {
    background: rgba(21, 114, 182, 0.15);
    color: #1572b6;
} /* CSS青 */
.why-tech-badge--wp {
    background: rgba(33, 117, 155, 0.15);
    color: #21759b;
} /* WordPress青 */
.why-tech-badge--react {
    background: rgba(31, 168, 201, 0.18);
    color: #1290ad;
} /* React水色 */
.why-tech-badge--ts {
    background: rgba(49, 120, 198, 0.15);
    color: #2c6cb0;
} /* TypeScript青 */

/* サポート内容リスト */
.why-support-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 8px 0 4px;
}
.why-support-list li {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}
.why-support-icon {
    flex-shrink: 0;
    margin-top: 1px;
    color: var(--c-primary);
    line-height: 0;
}
.why-support-icon svg {
    width: 22px;
    height: 22px;
    display: block;
}
.why-support-list strong {
    display: block;
    font-size: 0.82rem;
    font-weight: 800;
    color: var(--c-dark);
    margin-bottom: 2px;
}
.why-support-list p {
    font-size: 0.75rem;
    color: var(--c-gray);
    line-height: 1.6;
    font-weight: 500;
    margin: 0;
}

/* WHYカード：パララックス用transform許可 */
.why-tilt-card {
    will-change: transform;
    transition: box-shadow 0.3s ease;
}
.why-tilt-card:hover {
    box-shadow:
        0 24px 48px rgba(13, 193, 204, 0.15),
        0 4px 12px rgba(0, 0, 0, 0.08);
}

/* ========================================
   導入事例（CASE STUDIES）
======================================== */
.case-studies {
    padding: 100px 0;
}
/* 導入事例：4枚の重いカード → 1枚の連結パネル(仕切り線)にスリム化＝ゴチャつき解消(2026-06-08) */
.case-study-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    margin-top: 40px;
    align-items: stretch;
    /* 業種ウォーターマーク(z-index:0)より前面へ＝白カードが透けず不透明に見える */
    position: relative;
    z-index: 1;
}
.cs-card {
    --cs-accent: var(--c-primary);
    position: relative;
    background: #fff;
    border: 1px solid var(--c-border);
    border-radius: 20px;
    box-shadow: 0 12px 30px rgba(10, 14, 20, 0.06);
    padding: 32px 28px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    overflow: hidden;
}
.cs-card::before {
    content: '';
    position: absolute;
    inset: 0 0 auto 0;
    height: 4px;
    background: var(--cs-accent);
}
.cs-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 18px 42px rgba(10, 14, 20, 0.1);
}
.cs-card-head {
    display: flex;
    align-items: center;
    gap: 12px;
}
.cs-icon {
    flex: 0 0 auto;
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    border-radius: 14px;
    color: var(--cs-accent);
    background: rgba(13, 193, 204, 0.12);
    background: color-mix(in srgb, var(--cs-accent) 12%, #fff);
}
.cs-icon svg {
    width: 22px;
    height: 22px;
}
.cs-industry {
    font-size: 0.8rem;
    font-weight: 800;
    color: var(--cs-accent);
    letter-spacing: 0.02em;
    line-height: 1.4;
}
.cs-title {
    font-size: 1.12rem;
    font-weight: 800;
    color: var(--c-dark);
    line-height: 1.55;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--c-border);
}
.cs-body {
    font-size: 0.88rem;
    font-weight: 500;
    color: var(--c-gray);
    line-height: 1.9;
}
.case-study-note {
    margin-top: 28px;
    font-size: 0.78rem;
    color: var(--c-gray-3);
    text-align: center;
    line-height: 1.7;
}
/* 内容駆動BP：3枚の長文カードは900px以下で縦積み */
@media (max-width: 900px) {
    .case-study-grid {
        grid-template-columns: 1fr;
        max-width: 560px;
        margin-left: auto;
        margin-right: auto;
    }
}

/* ======================================================
   Homepage scenery — sky → mountains → water parallax
   (layered 20260601 assets behind hero〜services)
====================================================== */
/* overflow-x:clip＝HEROの特大リング(overflow:visible)が右へはみ出して横スクロールを作るのを抑止。
   clipはスクロールコンテナを作らないので overflow-y は visible のまま＝円の下方向(PAIN)へのはみ出しは維持、sticky/fixedも安全 (2026-06-08) */
.home-scene-wrap {
    position: relative;
    isolation: isolate;
    overflow-x: clip;
}
.home-scene {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
}
.hs-layer {
    position: absolute;
    inset: 0;
    background-repeat: no-repeat;
    background-position: center top;
    background-size: 100% 100%; /* stretch the aligned canvas across the section stack */
}
.hs-sky {
    background-image: url("../img/top/sky-01.png");
}
/* 止め絵準拠：HERO/PAINの斜め角帯は雲素材(TOP_雲_01/02)。止め絵と同キャンバスなので全面(background-size:100% 100%)に敷くと角帯が止め絵の位置に来る。
   01=HERO上部の角帯 / 02=HERO下部〜PAINの角帯。素材自体が薄グレーなのでopacityはほぼ等倍。 */
.hs-clouds {
    opacity: 1;
}
.hs-clouds-1 {
    background-image: url("../img/top/cloud-01.png");
}
.hs-clouds-2 {
    background-image: url("../img/top/cloud-02.png");
}
/* 山1（右・淡）＋山2（左・カラフル）を重ねて一列の山並みに、PAIN下部へ */
.hs-mountain {
    transform: translateY(-11%);
}
.hs-mountain-1 {
    background-image: url("../img/top/mountain-01.png");
}
.hs-mountain-2 {
    background-image: url("../img/top/mountain-02.png");
}
/* === 山帯を固定厚に（架構修正 v63）=========================================
   伸縮キャンバス(background-size:100% 100%)だと、山PNGの不透明帯(画像の約0.46〜0.51)が
   キャンバス高Hに比例＝縦長ページほど厚くなり、コンテンツに被る（モバイルは特に縦長で深刻）。
   → 山レイヤーを固定高(--mtn-h)にして帯の厚みを幅非依存に固定し、帯の中心を pain→why の
   隙間中心へ JS(anchorHomeMountain)が --mtn-top(最終top) で連動配置する。**全幅(モバイル含む)で適用**。
   高さ・位置の算出は全てJS側（CSSに係数を持たせない＝二重管理による崩れを防ぐ）。
   実機(Go-Live)で最終確認（プレビューは ../img 404 で山非表示）。 */
.home-scene .hs-mountain {
    inset: auto 0 auto 0;
    top: var(--mtn-top, 35%);
    height: var(--mtn-h, 5700px);
    transform: none;
}
/* 止め絵準拠：カラフル山を左右ミラーして全幅の山並みに（右偏り解消）。背面に置く */
.home-scene .hs-mountain-mirror {
    transform: scaleX(-1);
    opacity: 0.92;
    z-index: -1;
}
/* 水面 — 導入の流れから下を満たす水（FLOW/SERVICESは background:transparent なので、この層が水全体の色）。
   手前(水面)→奥(海底)で色が深くなる縦グラデで奥行きを表現。
   採用色：水面 #12BAC6（ブランドシアン維持）→ 中間 #0E9AA4 → 底 #0A5F72。
   底に暖色 #A06651 を低不透明度(0.18)の楕円グローで重ね、深海の差し込み光を表現。 (v158) */
.hs-water {
    top: calc(var(--water-top, 70%) - 2%);
    background:
        radial-gradient(140% 46% at 50% 100%, rgba(160, 102, 81, 0.18) 0%, rgba(160, 102, 81, 0) 58%),
        linear-gradient(180deg, #12bac6 0%, #11b1bb 20%, #0e9aa4 46%, #0a7a86 74%, #0a5f72 100%);
}
/* 動く波（インラインSVG・3層・外部読み込みなし）。v158。
   幅依存で破綻しないよう、水面ライン(--water-top)基準で全幅にSVG波を敷き、translateX で横スクロール。
   要素幅200%＝波をシームレスにループ（-50%移動で1画面ぶん＝周期の整数倍でつながる）。
   3層を「手前=明/不透明/速い → 奥=暗/半透明/遅い」にし、速度差で視差＝うねりを表現。
   採用パラメータ：速度 front7s/mid12s/back18s、振幅 ≈ height×22/60（front18 / mid17 / back15px）、
   色 front#16C6D2(明) / mid#11AEB8 / back#0E9AA4(暗)。transform/opacityのみでGPU合成。 */
.hs-wave {
    position: absolute;
    left: 0;
    width: 200%;
    pointer-events: none;
    will-change: transform;
}
.hs-wave svg {
    display: block;
    width: 100%;
    height: 100%;
}
/* 奥：暗・半透明・最も遅い（最上＝波頭が一番高く、暗い波が後ろに覗く） */
.hs-wave-back {
    height: 42px;
    top: calc(var(--water-top, 70%) - 2% - 33px);
    opacity: 0.5;
    animation: hs-wave-move 18s linear infinite;
}
.hs-wave-back path { fill: #0e9aa4; }
/* 中間 */
.hs-wave-mid {
    height: 46px;
    top: calc(var(--water-top, 70%) - 2% - 27px);
    opacity: 0.7;
    animation: hs-wave-move 12s linear infinite;
}
.hs-wave-mid path { fill: #11aeb8; }
/* 手前：明・不透明・最も速い（最下＝明るい水面の主体） */
.hs-wave-front {
    height: 52px;
    top: calc(var(--water-top, 70%) - 2% - 22px);
    opacity: 1;
    animation: hs-wave-move 7s linear infinite;
}
.hs-wave-front path { fill: #16c6d2; }
@keyframes hs-wave-move {
    from {
        transform: translateX(0);
    }
    to {
        transform: translateX(-50%);
    }
}
/* モバイルは要素数・振幅を控えめに（奥の層を省き、振幅を下げる） */
@media (max-width: 767px) {
    .hs-wave-back {
        display: none;
    }
    .hs-wave-mid {
        height: 34px;
    }
    .hs-wave-front {
        height: 38px;
    }
}
/* 動きを減らす設定の利用者には波を止める */
@media (prefers-reduced-motion: reduce) {
    .hs-wave {
        animation: none !important;
    }
}
/* 岩（海底）：下端アンカーで深部水に岩の頂を覗かせる。岩PNGの岩頂はcanvas約70%にあるため、
   高さ50%・bottom配置にすると岩頂が画面の約85%（サービス一覧の深部水）に来る。%指定なので幅非依存で崩れない。 */
.hs-rocks {
    inset: auto 0 0 0;
    top: auto;
    height: 50%;
    background-image: url("../img/top/rock-01.png");
    background-position: center bottom;
    background-size: 100% 100%;
    clip-path: none;
}

/* TICKS — the astronaut ticks, floating in the scene */
.hs-ticks {
    position: absolute;
    height: auto;
    pointer-events: none;
    filter: drop-shadow(0 12px 24px rgba(0, 0, 0, 0.12));
}
/* 止め絵準拠：導入の流れの水中・右端で「潜るティックス(TICKS_03)＋立ち上る泡(TICKS_03_泡)」。
   ティックスは頭を左下へ向けて潜るので rotate(-18deg)、泡はその鼻先の上に小さく。 */
/* ティックスは水面ライン(--water-top)基準で「下＝水中」へ置く。+で潜水、泡は水面付近から立ち上る */
.hs-ticks-dive {
    top: calc(var(--water-top, 65%) + 3%);
    right: 4%;
    width: 15%;
    max-width: 500px;
    animation: hs-dive 5.5s ease-in-out infinite;
}
.hs-ticks-bubbles {
    top: calc(var(--water-top, 65%) + 3%);
    right: 10%;
    width: 6%;
    max-width: 120px;
    animation: hs-float 4s ease-in-out infinite;
}
@media (max-width: 768px) {
    .hs-ticks-dive {
        width: 30%;
        right: 3%;
        top: 74.5%;
    }
    .hs-ticks-bubbles {
        width: 10%;
        right: 9%;
        top: calc(var(--water-top, 65%) + 2%);
    }
}
@keyframes hs-float {
    0%,
    100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-18px);
    }
}
@keyframes hs-dive {
    0%,
    100% {
        transform: rotate(-18deg) translateY(0);
    }
    50% {
        transform: rotate(-18deg) translateY(-16px);
    }
}
@keyframes hs-float-flip {
    0%,
    100% {
        transform: scaleX(-1) translateY(0);
    }
    50% {
        transform: scaleX(-1) translateY(-18px);
    }
}

/* sections ride above the scenery */
.home-scene-wrap > section {
    position: relative;
    z-index: 1;
}

/* clear backgrounds so the painting shows through (light top, teal water bottom) */
.home-scene-wrap .home-hero,
.home-scene-wrap .pain,
.home-scene-wrap .section-why,
.home-scene-wrap .case-studies,
.home-scene-wrap .process,
.home-scene-wrap .home-services {
    background: transparent !important;
}

/* sections that now sit on the teal water → light headings for contrast */
.home-scene-wrap .home-services .label,
.home-scene-wrap .home-services .section-title,
.home-scene-wrap .home-services .section-desc {
    color: #ffffff !important;
}

/* keep the 選ばれる理由 section tidy — clip the oversized industry watermark */
.home-scene-wrap .section-why {
    overflow: hidden;
}

/* 風景セクションに余白のゆとりを（詰まり防止） */
.home-scene-wrap .pain {
    padding-top: 120px;
    padding-bottom: 96px;
}
/* --why-pad-top：pain→why見出しの隙間＝固定厚の山帯を中央に収めるための余白。
   山帯は固定高ルールで幅非依存になったため、全幅で clamp の下限(270px)を確保すれば
   モバイル(超縦長)でも帯が隙間に収まり、カード裏に被らない。業種ウォーターマークの
   開始位置にもこの変数を流用（山の下から出す）。全幅適用（モバイル含む）。 */
/* 山はcases下へ移動したので、WHY上の特大余白(旧:270〜640px)は不要。通常のセクション余白に戻して間延びを解消(2026-06-08) */
.home-scene-wrap .section-why {
    --why-pad-top: clamp(72px, 7vw, 112px);
    padding-top: var(--why-pad-top);
}
/* 事例の下〜水面の余白。山は base-anchor（裾を水面直下に固定 / js anchorHomeMountain）に変えたので、
   旧来の「山が水没しないための特大隙間(flow 350px)」は不要に。止め絵準拠で空白を詰め、山を
   カード直下へ引き上げる（事例注釈の約80px下に山頂、裾は水面）。
   flow padding-top は水面〜「導入の流れ」見出しの水中余白。ユーザー確認の理想形に合わせ 390px
   （水面の上に開けたteal空間を確保）。padding-topは水面ライン(=#flow上端)を動かさないので山は不変 (2026-06-10 v155) */
.home-scene-wrap .case-studies {
    padding-bottom: 200px;
}
.home-scene-wrap .process {
    margin-top: 200px;
    padding-top: 390px;
}
.home-scene-wrap .home-services {
    padding-top: 120px;
    padding-bottom: 130px;
}
/* スマホ：水中teal空白(process padding-top 390px)が過大で「導入の流れ」が下すぎるため詰める。
   padding-topは水面ライン(#flow上端)を動かさない＝山は不変のまま見出しだけ上げる (2026-06-10) */
@media (max-width: 768px) {
    /* 水面は #flow枠の約2%×シーン高(≈390px)上に固定。padding-topを0にしても残るため、
       山/水面アンカー(JS)は不動のまま、見出しブロックだけ負マージンで水面近くへ引き上げる。
       padding-topを小さく残すのは、section-headerの負マージンが#flowのmargin-topとcollapseして
       枠ごと（=水面）動くのを防ぐため（paddingがあると親子marginは相殺しない） */
    .home-scene-wrap .process { padding-top: 40px; }
    .home-scene-wrap .process .section-header { margin-top: -110px; }
}

/* 止め絵準拠：CONTACTをティール水＋海中の岩の上に白パネルとして浮かせる（シーン内に含めた）(2026-06-09) */
.home-scene-wrap .section-contact {
    background: transparent !important;
    padding-top: clamp(56px, 8vw, 104px);
    padding-bottom: clamp(90px, 12vw, 160px);
}
.section-contact .container {
    background: #fff;
    border-radius: 30px;
    padding: clamp(34px, 5vw, 60px);
    box-shadow: 0 34px 80px rgba(8, 40, 46, 0.3);
    max-width: 900px;
}
.section-contact .contact-card {
    background: transparent;
    box-shadow: none;
    border: none;
    padding: 0;
}