/* ===== 基本設定とCSS変数 ===== */
:root {
    --main-color: #005B9A;
    --accent-color: #FF6600;
    --text-color: #333333;
    --bg-color-light: #F4F8FA;
    --bg-color-white: #FFFFFF;
    --border-color: #DDDDDD;
    --header-height: 70px;
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: 'Noto Sans JP', sans-serif;
    color: var(--text-color);
    line-height: 1.7;
    background-color: var(--bg-color-white);
}

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

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

.container {
    max-width: 95%;
    margin: 0 auto;
    padding: 0 5px;
}

section {
    padding: 40px 0;
}

section:nth-of-type(even) {
    background-color: var(--bg-color-light);
}

h1, h2, h3 {
    font-weight: 700;
    line-height: 1.4;
    margin-bottom: 20px;
}

h1 {
    font-size: 2.8rem;
}

h2 {
    font-size: 2.2rem;
    text-align: center;
    margin-bottom: 40px;
}

h3 {
    font-size: 1.1rem;
}

p {
    margin-bottom: 15px;
}

.sp-only {
    display: none;
}

/* ===== ボタン共通スタイル ===== */
.btn {
    display: inline-block;
    padding: 12px 28px;
    font-size: 1rem;
    font-weight: 700;
    border-radius: 8px;
    text-align: center;
    transition: all 0.3s ease;
    cursor: pointer;
    border: 2px solid transparent;
}

.btn-large {
    padding: 15px 35px;
    font-size: 1.1rem;
}

.btn-small {
    padding: 8px 18px;
    font-size: 0.9rem;
}

.btn-primary {
    background-color: var(--accent-color);
    color: #FFFFFF;
    border-color: var(--accent-color);
}
.btn-primary:hover {
    background-color: #e65c00;
    border-color: #e65c00;
}

.btn-secondary {
    background-color: #FFFFFF;
    color: var(--main-color);
    border-color: var(--main-color);
}
.btn-secondary:hover {
    background-color: #f0f5ff;
}

/* ===== ヘッダー ===== */
.header {
    width: 100%;
    height: var(--header-height);
    background-color: var(--bg-color-white);
    border-bottom: 1px solid var(--border-color);
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1000;
}

.header-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 100%;
}

.logo img {
    height: 40px;
    width: auto;
}

.menu-toggle {
    display: none; /* モバイルでのみ表示 */
    background: none;
    border: none;
    cursor: pointer;
}
.menu-toggle span {
    display: block;
    width: 25px;
    height: 3px;
    background: var(--main-color);
    margin: 5px 0;
    transition: all 0.3s;
}

/* ===== 1. ヒーローセクション ===== */
/* style.css の「===== SVG背景...」付近、または末尾に追加・修正 */

/* 1. ベースの配置設定（ここを修正） */
.hero-bg-svg {
    position: absolute;
    top: 0;           /* 上端に合わせる */
    left: 50%;        /* ★重要：基準を画面中央にする */
    transform: translateX(-50%); /* 中央基準から自身の半分だけ左に戻す＝完全中央寄せ */
    
    width: 140%;      /* 幅は少し広めに */
    max-width: 1600px;
    height: 100%;
    
    z-index: 0;       /* コンテンツ(z-index:2)より下、背景色より上 */
    pointer-events: none; /* クリックを邪魔しないように */
    overflow: visible;
    mix-blend-mode: screen; /* 背景色となじませる */
    opacity: 0.8;     /* 全体の濃さを調整 */
}

/* 2. アニメーション設定（既存の定義があればそのままでOKですが、念のため確認） */

/* 線の種類ごとの基本設定 */
.hero-bg-svg .anim-line { 
    stroke-linecap: round; 
    stroke-linejoin: round; 
    vector-effect: non-scaling-stroke; 
}

/* 太めのゆったり流れるライン */
.hero-bg-svg .anim-line.large {
    stroke-dasharray: 720; 
    stroke-dashoffset: 720;
    animation: lineFlowSlow 15s linear infinite;
}

/* 高速で流れる細いライン */
.hero-bg-svg .anim-line.fast {
    stroke-dasharray: 420; 
    stroke-dashoffset: 420;
    animation: lineFlowFast 8s linear infinite;
}

/* アニメーション定義（もしファイル内になければ追加してください） */
@keyframes lineFlowSlow {
    0%   { stroke-dashoffset: 720; opacity: 0; }
    20%  { opacity: 1; }
    80%  { opacity: 1; }
    100% { stroke-dashoffset: -720; opacity: 0; }
}

@keyframes lineFlowFast {
    0%   { stroke-dashoffset: 420; opacity: 0; }
    10%  { opacity: 0.8; }
    90%  { opacity: 0.8; }
    100% { stroke-dashoffset: -420; opacity: 0; }
}

/* ドットの点滅アニメーション */
.hero-bg-svg .dot {
    transform-origin: center;
    animation: dotPulse 4s ease-in-out infinite alternate;
}
@keyframes dotPulse {
    0%   { transform: scale(0.8); opacity: 0.3; }
    100% { transform: scale(1.2); opacity: 0.8; }
}

.hero {
    /* 深めのナイトブルーグラデーションで先進的な印象 */
    background: radial-gradient(1200px 600px at 85% 30%, rgba(66,140,255,0.06), transparent 10%),
                linear-gradient(180deg, #071229 0%, #081831 45%, #071229 100%);
    color: #e6f3ff;
    padding-top: calc(var(--header-height) + 12px);
    padding-bottom: 56px;
    min-height: 440px;
    display: flex;
    align-items: center;
    position: relative;
    overflow: visible;
}

/* 未来感のある薄いグリッド／ライン（装飾） */
.hero::before {
    content: "";
    position: absolute;
    inset: -10% -5% auto -5%;
    height: 60%;
    background: linear-gradient(90deg, rgba(255,255,255,0.02) 0%, rgba(255,255,255,0.00) 50%, rgba(255,255,255,0.02) 100%);
    transform: skewY(-6deg);
    filter: blur(18px);
    pointer-events: none;
    z-index: 0;
}

/* テキスト寄りの比率を少し強化（さらにリッチ感） */
.hero-content {
    display: grid;
    grid-template-columns: 50% 55%; /* 72%→60% : ビジュアルを大きく */
    grid-template-areas: "text visual"; /* ここでテキスト左・ビジュアル右を固定 */
    gap: 4px;
    align-items: center;
    position: relative;
    z-index: 1; /* 装飾より上に出す */
}

.hero-text { grid-area: text; }
.hero-visual { grid-area: visual; position: relative; z-index: 2; min-height: 260px; }

/* ガラスカード風（ややダーク） */
.hero-card {
    background: linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0.02));
    border: 1px solid rgba(255,255,255,0.06);
    padding: 28px; /* 40 -> 28 */
    border-radius: 12px;
    box-shadow: 0 18px 50px rgba(3,12,28,0.6);
    color: #eaf3ff;
    backdrop-filter: blur(6px) saturate(120%);
}

/* 見出し：重厚かつ先進的に */
.hero-card h1 {
    font-size: 2rem; /* 少し縮小して密度感を上げる */
    font-feature-settings: "palt";
    margin-bottom: 10px;
    color: #f5fbff;
    font-weight: 800;
    letter-spacing: -0.02em;
    text-shadow: 0 6px 30px rgba(2,8,24,0.6);
    text-wrap: balance;       /* 行の長さを自動でいい感じに揃える */
    word-break: auto-phrase;  /* 変な位置（単語の途中）で改行させない */
    line-height: 1.3;         /* 行間を少し詰めて見出しらしく */
}

/* 見出しの一部にグラデーションアクセント（先進的） */
.hero-card h1 .accent {
    background: linear-gradient(90deg, #60a5fa 0%, #7dd3fc 45%, #8b5cf6 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    font-weight: 900;
    text-shadow: 0 8px 30px rgba(11,20,32,0.45);
}

/* リード文：落ち着いた薄色 */
.hero-card {
    color: rgba(234,243,255,0.85);
    font-size: 1.02rem;
    margin-bottom: 18px;
    opacity: 0.95;
}

/* スタッツエリア全体 */
.hero-stats {
    display: flex;
    justify-content: space-between; /* 3つを均等配置 */
    gap: 12px;
    margin-top: 24px;
    margin-bottom: 32px;
    width: 100%;
}

/* カード共通スタイル */
.stat-card {
    flex: 1; /* 幅を均等に */
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 10px;
    padding: 12px 8px;
    display: flex;
    flex-direction: column; /* アイコン上、テキスト下 */
    align-items: center;
    text-align: center;
    backdrop-filter: blur(4px);
    transition: transform 0.3s ease;
}

.stat-card:hover {
    background: rgba(255, 255, 255, 0.12);
    transform: translateY(-3px);
}

/* テキストラッパー */
.stat-content {
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* ラベル（上の小さな文字） */
.stat-label {
    font-size: 0.7rem;
    font-weight: 700;
    color: #dbeafe;
    margin-bottom: 4px;
    white-space: nowrap;
}

/* メインの強調文字/数字 */
.stat-value {
    font-size: 0.9rem;
    font-weight: 700;
    color: #ffffff;
    margin: 0;
    line-height: 1.1;
    white-space: nowrap;
}

/* 数字の強調 */
.stat-value .num {
    font-size: 1.8rem;
    font-weight: 900;
    background: linear-gradient(90deg, #60a5fa, #a78bfa);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    margin-right: 2px;
}

/* 文字だけの強調（自動収集・自由自在など） */
.stat-value.text-mid {
    font-size: 1.25rem; /* 文字サイズを少し大きく */
    background: linear-gradient(90deg, #60a5fa, #a78bfa);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    padding: 4px 0; /* 上下の余白 */
}

/* 下の補足説明 */
.stat-desc {
    font-size: 0.65rem;
    color: rgba(255, 255, 255, 0.75);
    margin-top: 4px;
    margin-bottom: 0;
}

/* ===== モバイル対応 (768px以下) ===== */
@media (max-width: 768px) {
    .hero-stats {
        gap: 8px;
    }
    .stat-card {
        padding: 10px 4px;
    }
    .stat-value.text-mid {
        font-size: 1.0rem; /* スマホでは少し小さくして改行を防ぐ */
    }
    .stat-value .num {
        font-size: 1.5rem;
    }
    .stat-label {
        font-size: 0.65rem;
    }
}

/* 課題セクション調整 */
.problems {
    background-color: #f8fafc; /* 少し落ち着いた背景色に */
    text-align: center;
}

.problems h2 {
    font-size: 2.0rem;
    margin-bottom: 10px;
    color: #1e293b;
}

/* リード文（見出し下の補足） */
.section-lead {
    font-size: 1.1rem;
    color: #64748b;
    margin-bottom: 40px;
    font-weight: 700;
}

.problem-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 24px;
    max-width: 1100px;
    margin: 0 auto;
}

.card {
    background-color: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 12px; /* 角丸を少し大きく */
    padding: 32px 24px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.02);
    text-align: left; /* 文章は左揃えの方が読みやすい */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    position: relative;
}

.card:hover {
    transform: translateY(-5px);
    box-shadow: 0 12px 20px rgba(0, 0, 0, 0.05);
}

/* アイコンの装飾 */
.card-icon-wrapper {
    font-size: 3rem;
    margin-bottom: 20px;
    text-align: center;
    background: #f1f5f9;
    width: 80px;
    height: 80px;
    line-height: 80px;
    border-radius: 50%;
    margin-left: auto;
    margin-right: auto;
}

.card h3 {
    font-size: 1.25rem;
    font-weight: 700;
    color: #0f172a;
    margin-bottom: 16px;
    line-height: 1.5;
    text-align: center; /* 見出しは中央揃え */
    min-height: 3.0em; /* 高さを揃える */
}

.card p {
    font-size: 0.95rem;
    color: #475569;
    line-height: 1.8;
    margin-bottom: 0;
}

/* スマホ対応 */
@media (max-width: 768px) {
    .problems h2 {
        font-size: 1.5rem;
        line-height: 1.4;
    }
    .section-lead {
        font-size: 0.9rem;
    }
    .card {
        padding: 24px 20px;
    }
    .card h3 {
        font-size: 1.1rem;
        min-height: auto; /* スマホでは高さ制限解除 */
    }
    .card-icon-wrapper {
        width: 60px;
        height: 60px;
        line-height: 60px;
        font-size: 2rem;
    }
}

/* CTA：ネオンに近いアクセント、輪郭をシャープに */
.cta-buttons { display:flex; gap:14px; margin-top:10px; flex-wrap:wrap; align-items:center; }
.btn-primary {
    background: linear-gradient(90deg,#0ea5e9,#7c3aed 95%);
    border: none;
    color: #fff;
    padding: 14px 34px;
    font-weight: 800;
    box-shadow: 0 12px 30px rgba(124,58,237,0.14), 0 6px 18px rgba(14,165,233,0.08);
    border-radius: 12px;
    transition: transform .18s ease, box-shadow .18s ease;
}
.btn-primary:hover { transform: translateY(-4px); box-shadow: 0 22px 60px rgba(124,58,237,0.22); }
.btn-secondary {
    background: transparent;
    border: 1px solid rgba(255,255,255,0.08);
    color: rgba(234,243,255,0.95);
    padding: 12px 26px;
    border-radius: 10px;
    backdrop-filter: blur(4px);
}

/* ビジュアル：浮遊感と光の縁取りで先進性を演出 */
.hero-visual { grid-area: visual; display:flex; align-items:center; justify-content:center; pointer-events:none; }
.hero-image {
    width: 100%;
    max-width: 560px;
    border-radius: 12px;
    box-shadow: 0 50px 110px rgba(2,8,24,0.66), 0 12px 30px rgba(99,102,241,0.06);
    transform: translateY(0) scale(1); /* 斜め回転を削除、水平に配置 */
    transition: transform .45s ease, box-shadow .25s ease;
    border: 2px solid rgba(255,255,255,0.03);
    position: relative;
    z-index: 3;
    object-fit: cover;
}

/* hero 視覚ラップに薄い光の輪郭 */
.hero-visual {
    position: relative;
}
.hero-visual::before {
    content: "";
    position: absolute;
    inset: -8% -6% -6% -6%;
    border-radius: 20px;
    background: radial-gradient(circle at 20% 10%, rgba(124,58,237,0.06), transparent 18%),
                radial-gradient(circle at 80% 90%, rgba(14,165,233,0.04), transparent 20%);
    filter: blur(14px);
    z-index: 0;
    pointer-events: none;
}
.hero-image { position: relative; z-index: 2; }

/* ホバーでより上に浮く（控えめ） */
.hero-visual:hover .hero-image { transform: translateY(-10px) scale(1.01); box-shadow: 0 80px 160px rgba(2,8,24,0.7); }

/* Authority バッジのコントラスト向上（中央揃え） */
.authority { display:flex; gap:14px; margin-top:18px; align-items:center; flex-wrap:wrap; }
.authority-badge {
    display:inline-flex; align-items:center; gap:10px;
    background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.015));
    border: 1px solid rgba(255,255,255,0.04);
    padding: 8px 12px; border-radius:10px; color: rgba(234,243,255,0.95); font-weight:700;
}
.authority-badge img { width:28px; height:28px; object-fit:cover; display:block; }

/* 全体の横スクロールをまず抑制（必要ならプロジェクト全体で） */
html, body {
    overflow-x: hidden;
}

/* hero の overflow-x は明示的に隠す（縦は visible のまま） */
.hero {
    overflow-x: hidden;
}

.hero-card {
    padding: 24px; /* 引き締め */
    border-radius: 12px;
    box-shadow: 0 16px 40px rgba(3,12,28,0.55);
}

/* hero-image の主張を強めつつ過度にならないように調整 */
.hero-image {
    width: 100%;
    max-width: 560px;
    border-radius: 12px;
    box-shadow: 0 50px 110px rgba(2,8,24,0.66), 0 12px 30px rgba(99,102,241,0.06);
    transform: translateY(0) scale(1); /* 斜め回転を削除、水平に配置 */
    transition: transform .45s ease, box-shadow .25s ease;
    border: 2px solid rgba(255,255,255,0.03);
    position: relative;
    z-index: 3;
    object-fit: cover;
}

/* hero-visual の光輪は控えめに */
.hero-visual::before {
    inset: -6% -4% -4% -4%;
    filter: blur(12px);
}

/* ホバー時の浮き上がりを控えめに */
.hero-visual:hover .hero-image {
    transform: translateY(-10px) scale(1.01);
    box-shadow: 0 80px 160px rgba(2,8,24,0.7);
}

/* レスポンシブ微調整 */
@media (max-width: 1000px) {
    .hero-content { grid-template-columns: 65% 35%; gap: 28px; }
    .hero-image { max-width: 480px; }
}
@media (max-width: 768px) {
    .hero-content { grid-template-columns: 1fr; grid-template-areas: "visual" "text"; gap: 16px; }
    .hero-card { padding: 18px; }
    .hero-card h1 { font-size: 1.85rem; }
    .hero-bg-svg { display: none; } /* 小画面では非表示 */
}

/* ===== 2. 課題提起セクション ===== */
.problem-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
}

.card {
    background-color: var(--bg-color-white);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 25px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.05);
    text-align: center;
}

.card .card-icon {
    font-size: 2.5rem;
    display: block;
    margin-bottom: 15px;
}

/* ===== 3. ソリューションセクション ===== */
.solution {
    background: linear-gradient(180deg, #f8faff 0%, #ffffff 100%);
    padding: 20px 0;
    overflow: hidden;
    position: relative;
}

/* 装飾的な背景要素 */
.solution::before {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: 
        radial-gradient(1000px 600px at 80% 40%, rgba(96,165,250,0.03), transparent),
        radial-gradient(800px 800px at 20% 60%, rgba(124,58,237,0.03), transparent);
    pointer-events: none;
}

/* コンテナのレイアウト調整 */
.solution-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: center;
    position: relative;
    z-index: 2;
}

/* テキストエリアの強化 */
.solution-text {
    padding-right: 20px;
}

.solution-text h2 {
    font-size: 2rem;
    line-height: 1.3;
    color: #0f2942;
    margin-bottom: 24px;
    text-align: left;
}

.solution-text p {
    color: #334155;
    font-size: 1.0rem;
    line-height: 1.8;
    margin-bottom: 28px;
}

/* 画像エリアの強化 */
.solution-image {
    position: relative;
    padding: 20px;
}

.solution-image img {
    width: 100%;
    max-width: 540px;
    border-radius: 16px;
    box-shadow: 
        0 30px 60px rgba(2,12,28,0.12),
        0 8px 24px rgba(2,12,28,0.08);
    transform: translateY(0);
    transition: transform 0.4s ease;
}

/* ホバーエフェクト */
.solution-image:hover img {
    transform: translateY(-8px);
}

/* 画像の装飾 */
.solution-image::before {
    content: "";
    position: absolute;
    inset: 40px -20px -20px 20px;
    background: linear-gradient(135deg, rgba(96,165,250,0.08), rgba(124,58,237,0.08));
    border-radius: 20px;
    z-index: -1;
}

/* 強調ポイント用のスタイル */
.highlight-point {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(96,165,250,0.08);
    padding: 6px 16px;
    border-radius: 100px;
    color: #0369a1;
    font-weight: 700;
    font-size: 0.95rem;
    margin-bottom: 16px;
}

/* レスポンシブ対応 */
@media (max-width: 1024px) {
    .solution-container {
        grid-template-columns: 55% 45%;
        gap: 40px;
    }
    .solution-text h2 {
        font-size: 2rem;
    }
}

@media (max-width: 768px) {
    .solution {
        padding: 60px 0;
    }
    .solution-container {
        grid-template-columns: 1fr;
        gap: 32px;
    }
    .solution-text {
        padding-right: 0;
    }
    .solution-text h2 {
        font-size: 1.8rem;
        text-align: center;
    }
    .solution-image::before {
        display: none;
    }
}

/* ===== 5. 導入メリットセクション ===== */
.merit-list {
    display: flex;
    flex-direction: column;
    gap: 25px;
    max-width: 900px;
    margin: 0 auto;
}

.merit-item {
    display: flex;
    align-items: center;
    gap: 20px;
    background: var(--bg-color-white);
    padding: 25px;
    border-radius: 8px;
    border: 1px solid var(--border-color);
}

.merit-number {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--main-color);
    background-color: #e6f0f7;
    border-radius: 50%;
    min-width: 40px;
    height: 40px;
    display: inline-flex;
    justify-content: center;
    align-items: center;
}
.merit-item h3 {
    margin-bottom: 5px;
}

/* ===== 6. 導入事例セクション ===== */
.section-sub {
    text-align: center;
    color: #64748b;
    margin-bottom: 40px;
}

/* カードレイアウト */
.case-study-cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* 3列固定 */
    gap: 24px;
    max-width: 1100px;
    margin: 0 auto;
}

/* 個別のカードデザイン */
.case-card {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 28px 24px;
    box-shadow: 0 4px 6px rgba(0,0,0,0.02);
    display: flex;
    flex-direction: column;
    text-align: left; /* 左揃えにする */
    transition: transform 0.3s ease;
}

.case-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 12px 20px rgba(0,0,0,0.08);
}

/* 上部のタグ（属性） */
.case-tags {
    margin-bottom: 16px;
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.tag {
    font-size: 0.7rem;
    background: #f1f5f9;
    color: #475569;
    padding: 4px 10px;
    border-radius: 4px;
    font-weight: 700;
}

/* キャッチコピー（見出し） */
.case-title {
    font-size: 1.1rem;
    font-weight: 700;
    color: #0f172a;
    line-height: 1.5;
    margin-bottom: 16px;
    min-height: 3.2em; /* 高さを揃える */
    border-bottom: 1px dashed #e2e8f0;
    padding-bottom: 16px;
    /* 1. 左右の行の長さを自動でバランスよく揃える（超便利！） */
    text-wrap: balance;
    
    /* 2. 日本語の句読点などの余白を詰めて、1行に入る文字数を増やす */
    font-feature-settings: "palt";
    
    /* 3. 単語の途中で改行させない（ブラウザによるが効果あり） */
    word-break: auto-phrase;
}

/* 本文 */
.case-story {
    font-size: 0.9rem;
    color: #334155;
    line-height: 1.7;
    flex-grow: 1; /* 下のプロフィールを底に押しやる */
    margin-bottom: 24px;
}

/* プロフィール欄 */
.case-profile {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: auto; /* 常に最下部へ */
}

/* 簡易アバター（画像がない場合用） */
.case-avatar {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
    background: #eee;
}

.case-info .company {
    font-size: 0.8rem;
    font-weight: 700;
    color: #1e293b;
    margin-bottom: 0;
}

.case-info .role {
    font-size: 0.7rem;
    color: #64748b;
    margin-bottom: 0;
}

/* スマホ対応 */
@media (max-width: 768px) {
    .case-study-cards {
        grid-template-columns: 1fr; /* スマホは1列 */
        gap: 20px;
    }
    .case-title {
        min-height: auto;
    }
}

/* ===== 7. キャンペーンセクション ===== */

/* キャンペーンセクション全体 */
.campaign {
    padding: 60px 0;
    background: transparent; /* 背景はコンテナ側でつけるので透明に */
}

/* キャンペーンボックス（バナー風デザイン） */
.campaign-container {
    position: relative;
    background: linear-gradient(135deg, #1e3a8a 0%, #3b82f6 100%); /* 濃い青〜明るい青 */
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 20px 40px rgba(30, 58, 138, 0.2);
    color: #fff;
    text-align: center; /* 中央揃え */
    padding: 60px 20px;
}

/* 背景の装飾（キラキラ感） */
.campaign-bg-deco {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background: 
        radial-gradient(circle at 10% 10%, rgba(255,255,255,0.1) 0%, transparent 20%),
        radial-gradient(circle at 90% 90%, rgba(255,255,255,0.1) 0%, transparent 20%);
    pointer-events: none;
}

/* コンテンツの配置 */
.campaign-content {
    position: relative;
    z-index: 2;
    max-width: 600px;
    margin: 0 auto;
}

/* 「期間限定」バッジ */
.campaign-badge {
    display: inline-block;
    background: #fbbf24; /* ゴールド/黄色 */
    color: #92400e;
    font-weight: 800;
    font-size: 0.9rem;
    padding: 6px 16px;
    border-radius: 50px;
    margin-bottom: 20px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}

/* 見出し */
.campaign h2 {
    font-size: 2.0rem;
    color: #fff;
    margin-bottom: 16px;
    line-height: 1.3;
    text-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

/* 「0円」の超強調 */
.price-zero {
    font-size: 3.5rem; /* 特大サイズ */
    font-weight: 900;
    color: #fbbf24; /* 黄色で目立たせる */
    margin: 0 4px;
    font-family: sans-serif; /* 数字は見やすいフォントで */
    line-height: 1;
    vertical-align: -4px;
}

/* 本文 */
.campaign p {
    font-size: 1.0rem;
    color: rgba(255, 255, 255, 0.9);
    margin-bottom: 32px;
}

/* キャンペーン専用ボタン */
.btn-campaign {
    background: #fff;
    color: #1e3a8a; /* 青文字 */
    font-weight: 800;
    padding: 16px 40px;
    border-radius: 50px;
    box-shadow: 0 8px 20px rgba(0,0,0,0.15);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    border: none;
    font-size: 1.1rem;
}

.btn-campaign:hover {
    transform: translateY(-3px) scale(1.02);
    box-shadow: 0 12px 30px rgba(0,0,0,0.2);
    background: #f8fafc;
}

/* スマホ対応 */
@media (max-width: 768px) {
    .campaign-container {
        padding: 40px 20px;
        border-radius: 16px;
    }
    .campaign h2 {
        font-size: 1.6rem;
    }
    .price-zero {
        font-size: 2.8rem;
    }
    .btn-campaign {
        width: 100%; /* スマホでは幅一杯に */
        padding: 14px;
    }
}

/* ===== 8. FAQセクション ===== */
.faq-list {
    max-width: 800px;
    margin: 0 auto;
}
.faq-item {
    border-bottom: 1px solid var(--border-color);
}
.faq-question {
    width: 100%;
    background: none;
    border: none;
    padding: 20px 0;
    text-align: left;
    font-size: 1.1rem;
    font-weight: 700;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.faq-icon {
    width: 14px;
    height: 14px;
    border-right: 3px solid var(--text-color);
    border-bottom: 3px solid var(--text-color);
    transform: rotate(45deg);
    transition: transform 0.3s;
}
.faq-question.active .faq-icon {
    transform: rotate(-135deg);
}

.faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease-out;
}
.faq-answer p {
    padding: 0 10px 20px;
}
.faq-answer.active {
    max-height: 200px; /* 十分な高さを確保 */
}

/* ===== 9. クロージング（CTA）セクション ===== */
.cta {
    text-align: center;
    background-color: var(--main-color);
    color: #FFFFFF;
}
.cta h2, .cta p {
    color: #FFFFFF;
}
.cta .cta-buttons {
    justify-content: center;
    margin-bottom: 40px;
}
.cta .btn-secondary {
    background-color: var(--bg-color-white);
    color: var(--main-color);
    border-color: var(--bg-color-white);
}
.cta .btn-secondary:hover {
    background-color: #f0f0f0;
}

/* 簡易フォーム */
.contact-form {
    max-width: 600px;
    margin: 0 auto;
    background: var(--bg-color-white);
    color: var(--text-color);
    padding: 30px;
    border-radius: 8px;
    text-align: left;
}
.contact-form h3 {
    text-align: center;
}
.form-group {
    margin-bottom: 15px;
}
.form-group label {
    display: block;
    margin-bottom: 5px;
    font-weight: 700;
}
.form-group input,
.form-group textarea {
    width: 100%;
    padding: 10px;
    border: 1px solid var(--border-color);
    border-radius: 5px;
    font-family: 'Noto Sans JP', sans-serif;
    font-size: 1rem;
}
.btn-submit {
    width: 100%;
    padding: 15px;
    font-size: 1.1rem;
}
.form-privacy {
    font-size: 0.8rem;
    text-align: center;
    margin-top: 15px;
    margin-bottom: 0;
}

/* ===== フッター ===== */
.footer {
    background-color: #333;
    color: #f0f0f0;
    padding: 48px 0 24px;
    border-top: none;
}

.footer-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0px;
    margin-bottom: 32px;
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
}

.footer-links {
    display: flex;
    flex-direction: column;
    gap: 12px;
    flex: 1.5;
    min-width: 180px;
}

.footer-links a {
    color: #f0f0f0;
    text-decoration: none;
    font-size: 0.95rem;
    transition: color 0.2s ease;
}

.footer-links a:hover {
    color: #ffffff;
    text-decoration: underline;
}

.footer-logo {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: right;
    min-width: 100px;
    margin-right: 5px;
}

.jpx-logo {
    height: 60px;
    width: auto;
}

.footer-text {
    flex: 1;
    text-align: right;
    min-width: 180px;
}

.footer-text p {
    color: #f0f0f0;
    font-size: 0.9rem;
    line-height: 1.6;
    margin: 0;
}

.footer-copyright {
    text-align: center;
    padding-top: 24px;
    border-top: 1px solid rgba(255, 255, 255, 0.2);
}

.footer-copyright p {
    color: #bcd9ef;
    font-size: 0.85rem;
    margin: 0;
}

/* レスポンシブ対応 */
@media (max-width: 768px) {
    .footer-content {
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 18px;
    }
    
    .footer-links {
        align-items: center;
        text-align: center;
    }
    
    .footer-text {
        text-align: center;
    }

    .footer-logo {
        justify-content: center;
        margin-right: 0;
    }
    
    .jpx-logo {
        height: 50px;
    }
}


/* ===== レスポンシブ対応 (モバイル) ===== */
@media (max-width: 768px) {
    .sp-only {
        display: block;
    }

    /* ヒーロー: モバイルではビジュアルを上、テキストを下に並べる */
    .hero-content {
        grid-template-columns: 1fr;
        grid-template-areas:
            "visual"
            "text";
        gap: 20px;
    }

    .hero-image {
        max-width: 100%;
    }

    /* 既存のモバイル調整と競合しないように残す */
    .hero {
        padding-top: calc(var(--header-height) + 60px);
        padding-bottom: 60px;
    }
    .hero h1 {
        font-size: 1.5rem; /* モバイル用に調整 */
    }
    .hero p {
        font-size: 1rem;
    }
}

/* Authority バッジ：アイコンとテキストを縦方向中央揃え */
.authority {
    display: flex;
    gap: 16px;
    margin-top: 20px;
    align-items: center; /* ここで縦中央揃え */
    flex-wrap: wrap;
}

.authority-badge {
    display: inline-flex;
    align-items: center; /* アイコンとテキストを中央揃え */
    gap: 10px;
    background: rgba(255,255,255,0.9);
    padding: 8px 14px;
    border-radius: 8px;
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--text-color);
}

.authority-badge img {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    object-fit: cover;
    display: block;
    margin: 0; /* 不要なマージンをリセット */
}

/* ===== SVG背景（ドット／ネットワーク）用スタイル ===== */
.hero {
    position: relative; /* 既にありますが、念のため上位に配置 */
}

/* 既存の lineFlowSlow / lineFlowFast キーがある前提。無ければ定義してください（既存と競合しない簡易版） */
@keyframes lineFlowSlow {
    0%   { stroke-dashoffset: 560; transform: translateX(0); opacity: 0.05; }
    50%  { stroke-dashoffset: 0;   transform: translateX(-6px); opacity: 0.14; }
    100% { stroke-dashoffset: -560; transform: translateX(0); opacity: 0.05; }
}

/* パフォーマンス配慮: 低負荷モード時は停止 */
@media (prefers-reduced-motion: reduce) {
    .hero-bg-svg .anim-line,
    .hero-bg-svg .lines.extra .anim-line,
    .hero-bg-svg .dot,
    .hero-bg-svg .moving-dots circle {
        animation: none !important;
    }
}


/* 小画面調整：画像は幅優先で表示 */
@media (max-width: 1000px) {
    .hero-content { grid-template-columns: 40% 60%; }
    .hero-image { max-width: 460px; }
}
@media (max-width: 768px) {
    .hero-content { grid-template-columns: 1fr; grid-template-areas: "visual" "text"; gap: 18px; }
    .hero-image { max-width: 100%; transform: none; box-shadow: 0 18px 50px rgba(3,12,28,0.45); }
    .hero-visual::before { display:none; }
}

/* ===== Features セクション (グリッドデザイン) ===== */

/* PC画面 (769px以上) のときだけ「横並び・互い違い」にする */
@media (min-width: 769px) {
    
    /* 1. 基本: カードを横並びにする */
    .feature-item {    
        background: #0f172a;
        display: flex;          /* フレックスボックス化 */
        flex-direction: row;    /* 左：画像、右：文章 */
        align-items: stretch;   /* 画像と文章の高さを強制的に揃える */
        min-height: 240px;      /* カードの最低高さを確保 */
        padding: 0 !important;  /* カード自体のパディングはなくす */
        border-radius: 12px;
    }

    /* 2. 偶数番目 (Point 2, 4) だけ「左右反転」させる */
    .feature-item:nth-child(even) {
        flex-direction: row-reverse; /* 左：文章、右：画像 */
    }

    /* 3. 画像エリアの設定（完全に半分埋める） */
    .feature-icon {
        width: 35% !important;       /* 幅は50%固定 */
        height: auto !important;     /* 高さはなりゆき */
        max-height: 100%;            /* カードからはみ出さないように */
        object-fit: contain;         /* 画像全体を表示する（切り取らない） */
        align-self: center;          /* 上下中央に配置 */
        margin: auto;                /* 余白を均等に */
        padding: 5px;
        border: none !important;     
        border-radius: 12px !important; /* 画像自体も少し角丸にすると可愛い */
        
        /* 以前の区切り線は、画像が小さい*/
    }

    /* 4. 文章エリアの設定（残り半分） */
    .feature-content {
        width: 65% !important;       /* 幅は50%固定 */
        display: flex;
        flex-direction: column;
        justify-content: center;     /* 上下中央揃え */
        padding: 4px;               /* たっぷり余白をとる */
    }
    
    /* 見出しの調整 */
    .feature-item h3 {
        font-size: 1.4rem;
        margin-top: 10px;
    }
}
section.features {
    background: #2d3a4e !important; 
    padding: 80px 0;
    color: #fff;
}

.features h2 {
    text-align: center;
    font-size: 2.2rem;
    margin-bottom: 50px;
    color: #fff;
}

/* グリッドレイアウトの定義 */
.feature-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* 2列にする */
    gap: 10px; /* カード間の隙間 */
    width: 95%;
    margin: 0 auto; /* 中央寄せ */
}

/* ホバー時の浮き上がり */
.feature-item:hover {
    transform: translateY(-5px);
    background: rgba(255, 255, 255, 0.08);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
    border-color: rgba(96, 165, 250, 0.3); /* 枠線を青く光らせる */
}


/* ステップ番号 (POINT 01) */
.feature-step {
    display: inline-block;
    color: #60a5fa;
    font-size: 0.8rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    margin-bottom: 8px;
}

/* 本文 */
.feature-item p {
    font-size: 0.95rem;
    line-height: 1.7;
    color: #cbd5e1; /* 少しグレーを入れて読みやすく */
    margin-bottom: 0;
}


/* ===== レスポンシブ対応 (スマホ) ===== */
@media (max-width: 768px) {
    .features {
        padding: 60px 0;
    }
    /* スマホでは1列に戻す */
    .feature-grid {
        grid-template-columns: 1fr; 
        gap: 24px;
    }
    .feature-icon {
        height: 180px; /* スマホでは少し画像を低く */
    }
    .feature-item h3 {
        font-size: 1.2rem;
    }
    .feature-content {
        padding: 24px;
    }
}
.campaign-content .cta-buttons {
    justify-content: center;
}

/* =========================================
   Googleフォームのレスポンシブ対応
   ========================================= */

/* --- 共通設定（PCベース） --- */
.form-wrapper {
    width: 100%;
    max-width: 640px;       /* PCでの最大幅 */
    margin: 0 auto;         /* 中央寄せ */
    background: #ffffff;
    border-radius: 12px;    /* 角丸で柔らかく */
    box-shadow: 0 4px 20px rgba(0,0,0,0.05); /* 影をつけてデザインに馴染ませる */
    overflow: hidden;
}

.form-wrapper iframe {
    width: 100%;            /* 親要素に合わせて伸縮 */
    height: 1100px;         /* PCでの高さ */
    display: block;         /* 謎の隙間対策 */
}

/* --- スマホ対応 --- */
@media (max-width: 768px) {
    .contact {
        padding: 0 10px;    /* 画面端ギリギリにならないように余白 */
    }

    .form-wrapper {
        box-shadow: none;   /* スマホではフラットにして圧迫感を減らす（お好みで） */
        border-radius: 8px;
    }

    .form-wrapper iframe {
        /* スマホは1行1項目になり縦に伸びるため、高さを増やす */
        height: 1500px !important; 
    }
}

/* =========================================
   SP対応：ハンバーガーメニューとナビゲーション
   ========================================= */
@media (max-width: 768px) {
    
    /* --- 1. メニュー本体（開いたときの箱） --- */
    .header-nav {
        position: fixed;
        top: var(--header-height); /* ヘッダーのすぐ下に配置 */
        left: 0;
        width: 100%;
        background-color: rgba(255, 255, 255, 0.98); /* 背景色（少し透過） */
        padding: 40px 20px;
        box-shadow: 0 10px 20px rgba(0,0,0,0.05);
        text-align: center;
        
        /* アニメーションの準備（隠しておく） */
        visibility: hidden;
        opacity: 0;
        transform: translateY(-20px);
        transition: all 0.3s ease;
        z-index: 990;
    }

    /* .activeがついたら表示（JSで制御） */
    .header-nav.active {
        visibility: visible;
        opacity: 1;
        transform: translateY(0);
    }

    /* 中のボタンをスマホ用に調整 */
    .header-nav .btn {
        display: block;      /* 縦並びにする */
        width: 100%;         /* 幅いっぱいに */
        margin-bottom: 15px; /* ボタン同士の間隔 */
    }

    /* --- 2. ハンバーガーボタンのアニメーション --- */
    /* ボタンが表示されるようにする */
    .menu-toggle {
        display: block;
        z-index: 1001;
        position: relative;
    }

    /* 3本線の共通設定 */
    .menu-toggle span {
        transition: all 0.3s;
    }

    /* クリックされたら「×」印に変形させる */
    .menu-toggle.active span:nth-child(1) {
        transform: translateY(8px) rotate(45deg);
    }
    .menu-toggle.active span:nth-child(2) {
        opacity: 0; /* 真ん中の線を消す */
    }
    .menu-toggle.active span:nth-child(3) {
        transform: translateY(-8px) rotate(-45deg);
    }
}
/* style.css の末尾のスマホ用メディアクエリ内に追加・修正 */

@media (max-width: 768px) {
    
    /* --- 1. ロゴのサイズ調整 --- */
    /* ヘッダー内のロゴ画像を少し小さくして余白を持たせる */
    .header .logo img {
        height: 28px; /* 元の40pxから縮小 */
        margin-top: 4px; /* 垂直位置の微調整 */
    }
    
    /* --- 2. 特徴セクション（Features）の画像修正 --- */
    
    /* カード全体を縦積みに強制する */
    .feature-item {
        display: block !important; /* flexを解除 */
        text-align: center; /* 中身を中央揃えに */
        padding-bottom: 30px !important;
    }
    
    /* 偶数番目の「反転」もスマホでは解除 */
    .feature-item:nth-child(even) {
        flex-direction: normal !important;
    }

    /* 画像を大きく、中央に配置 */
    .feature-icon {
        width: 100% !important;     /* 横幅いっぱいに */
        max-width: 400px;           /* 大きくなりすぎないよう制限 */
        height: auto !important;    /* 高さはなりゆきで（歪み防止） */
        margin: 0 auto 20px auto;   /* 中央寄せ ＆ 下に余白 */
        display: block;
        object-fit: cover;
    }

    /* テキストエリアの調整 */
    .feature-content {
        width: 100% !important;
        padding: 0 10px;
        text-align: left; /* テキストは左揃えの方が読みやすい（お好みでcenterでも可） */
    }

    /* --- ヒーローセクションのスタッツ（3つの箱）修正 --- */
    .hero-stats {
        flex-direction: column; /* 横並びをやめて、縦並びにする */
        gap: 12px;              /* 箱と箱の間隔 */
    }

    .stat-card {
        width: 100%;            /* 横幅いっぱいに広げる */
        
        /* 縦積みになったので、少しスリムにして高さを節約（お好みで） */
        display: flex;       
        flex-direction: row;    /* 中身を横並び（左：ラベル、右：値）にするレイアウト変更 */
        justify-content: space-between;
        align-items: center;
        padding: 12px 20px;     /* 内側の余白調整 */
        text-align: left;       /* 文字を左寄せに */
    }

    /* 中身の配置調整 */
    .stat-content {
        flex-direction: row;    /* フレックスの向きを横に */
        align-items: center;
        width: 100%;
        justify-content: space-between;
    }

    /* テキストの並び順や余白の微調整 */
    .stat-label {
        margin-bottom: 0;       /* 下余白を削除 */
        font-size: 0.8rem;      /* 少し大きくしてもOK */
    }
    
    .stat-value {
        order: 2;               /* 値を右側に */
    }
    
    .stat-desc {
        display: none;          /* 【任意】高さ節約のため補足テキストはスマホで隠す、または .stat-labelの横に入れるなど */
    }

    /* --- 1. 背景のドット・線を表示させる --- */
    .hero-bg-svg {
        display: block !important; /* 「非表示」設定を強制解除 */
        width: 180%;               /* スマホ用に少し拡大 */
        left: 50%;
        transform: translateX(-50%);
        top: -10%;                 /* 少し上にずらして配置 */
        opacity: 0.6;              /* スマホでは少し薄めにして文字を見やすく */
    }

    /* --- 2. ヒーローセクションの余白を詰める --- */
    .hero {
        /* 元の設定（約130px）を上書きして詰める */
        padding-top: calc(var(--header-height) + 20px) !important; 
        padding-bottom: 40px !important;
        min-height: auto !important; /* 無駄な高さをなくす */
    }

    /* --- 3. 画像とテキストの隙間も調整 --- */
    .hero-content {
        gap: 15px !important; /* 画像とテキストの間隔を詰める */
    }
    
    /* ヒーロー画像を少し大きく表示 */
    .hero-image {
        max-width: 100% !important;
        margin-bottom: 10px;
    }

    /* --- キャッチコピー（H1）の修正 --- */
    .hero-card h1 {
        /* バランス調整を無効化し、画面幅いっぱいに文字を流す */
        text-wrap: wrap !important;
        
        /* 日本語の改行ルールを自然にする */
        word-break: normal !important;
        
        /* スマホ用にフォントサイズを最適化 */
        font-size: 1.6rem !important; 
        line-height: 1.5;
        
        /* 念のため幅を100%指定 */
        width: 100%;
        margin-bottom: 20px;
    }

    /* brタグ（改行）をスマホでは無効化して、自然な折り返しに任せる */
    .hero-card h1 br {
        display: none;
    }
}