/* ============================================================
   IT Sec Assistant
   - 親しみやすい青系パステル
   - 丸みのあるカードUI
   - レスポンシブ（モバイルファースト）
   ============================================================ */

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; border: none; background: none; }

/* ---------- Tokens ---------- */
:root {
  /* Brand blues */
  --blue-900: #1E5B86;
  --blue-700: #2E7DB0;
  --blue-500: #4FA8E0;     /* primary */
  --blue-400: #7FC0E8;
  --blue-300: #A8D5F0;
  --blue-200: #CCE6F7;
  --blue-100: #E5F2FB;
  --blue-50:  #F2F8FD;

  /* Warm accent */
  --orange-500: #FFA94D;
  --orange-300: #FFD4A1;
  --orange-100: #FFEEDB;

  /* Neutrals */
  --ink-900: #1F2A37;
  --ink-700: #3F4A5A;
  --ink-500: #6B7785;
  --ink-300: #B7BFCC;
  --ink-100: #E6EAF0;
  --bg:      #FBFDFF;
  --white:   #FFFFFF;

  /* Status */
  --green-500: #4CAF7B;
  --green-100: #E1F4E9;

  /* Type */
  --font-jp: "Zen Maru Gothic", "Hiragino Maru Gothic ProN", "Yu Gothic", sans-serif;
  --font-num: "Plus Jakarta Sans", var(--font-jp);

  /* Radius */
  --r-sm: 8px;
  --r-md: 16px;
  --r-lg: 24px;
  --r-xl: 32px;
  --r-pill: 999px;

  /* Shadow */
  --shadow-sm: 0 2px 8px rgba(31, 91, 134, 0.06);
  --shadow-md: 0 8px 24px rgba(31, 91, 134, 0.10);
  --shadow-lg: 0 16px 40px rgba(31, 91, 134, 0.14);

  /* Layout */
  --container: 1080px;
  --gutter: 20px;
}

/* ---------- Base ---------- */
html { scroll-behavior: smooth; }
/* 本文全体のフォント・色・行間を設定する基本スタイル */
body {
  font-family: var(--font-jp);
  font-weight: 500;
  color: var(--ink-900);
  background: var(--bg);
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
  font-feature-settings: "palt" 1;
  letter-spacing: 0.02em;
}

/* ---------- Layout helpers ---------- */
/* 最大幅を持ち、左右に余白を付けてコンテンツを中央揃えにするラッパー */
.container {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

/* 各セクションの上下余白 */
section { padding: 72px 0; position: relative; }
@media (max-width: 720px) { section { padding: 56px 0; } }

/* ---------- Decorative blobs / dots ---------- */
/* ヒーローや背景に置くぼかした丸いグラデーション装飾（ベース） */
.blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(40px);
  opacity: 0.5;
  z-index: 0;
  pointer-events: none;
}
/* 左上に配置する青の blob */
.blob.b1 { width: 280px; height: 280px; background: var(--blue-200); top: -80px; left: -80px; }
/* 右下に配置するオレンジの blob */
.blob.b2 { width: 220px; height: 220px; background: var(--orange-100); bottom: -60px; right: -40px; }

/* セクション背景に敷くドットグリッド模様 */
.dot-grid {
  position: absolute;
  inset: 0;
  background-image: radial-gradient(var(--blue-200) 1.2px, transparent 1.5px);
  background-size: 22px 22px;
  opacity: 0.35;
  pointer-events: none;
}

/* ---------- Header / Nav ---------- */
/* スクロール追従するサイトヘッダー（すりガラス効果付き） */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(251, 253, 255, 0.85);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--blue-100);
}
/* ヘッダー内部のロゴとナビを左右に並べるレイアウト */
.site-header .inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 64px;
}
/* ロゴ＋ブランド名をまとめたリンク */
.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 700;
  color: var(--blue-900);
}
/* ロゴアイコンを収める正方形のグラデーションボックス */
.brand-mark {
  width: 36px; height: 36px;
  border-radius: 12px;
  background: linear-gradient(135deg, var(--blue-500), var(--blue-400));
  display: grid; place-items: center;
  color: white;
  box-shadow: var(--shadow-sm);
}
/* ロゴ画像のサイズ調整 */
.brand-mark img {
  width: 22px;
  height: 26px;
  object-fit: contain;
}
/* ブランド名テキスト */
.brand-name { font-size: 16px; }
/* ブランド名の下に表示するサブテキスト（EC / AWS / Security / AI） */
.brand-sub { font-size: 11px; color: var(--ink-500); font-weight: 500; display: block; line-height: 1; margin-top: 2px;}

/* ヘッダーナビのリンクを横並びにするグループ */
.nav-links {
  display: flex;
  gap: 8px;
  align-items: center;
}
/* ナビの各リンクのパディング・形・色 */
.nav-links a {
  padding: 8px 14px;
  border-radius: var(--r-pill);
  font-size: 14px;
  color: var(--ink-700);
  transition: background 0.2s, color 0.2s;
}
/* ナビリンクのホバー時に薄い青背景 */
.nav-links a:hover { background: var(--blue-100); color: var(--blue-700); }
/* ナビ内のお問い合わせボタン（青塗りつぶし） */
.nav-links .cta {
  background: var(--blue-500);
  color: white;
  font-weight: 700;
}
/* CTAボタンのホバー時に濃い青に変化 */
.nav-links .cta:hover { background: var(--blue-700); color: white; }

/* モバイルではCTA以外のナビリンクを非表示にする */
@media (max-width: 720px) {
  .nav-links a:not(.cta) { display: none; }
  .brand-name { font-size: 14px; }
}

/* ============================================================
   HERO
   ============================================================ */
/* ヒーローセクション全体の背景グラデーション */
.hero {
  padding-top: 64px;
  padding-bottom: 96px;
  background:
    radial-gradient(ellipse at top right, var(--blue-100), transparent 60%),
    radial-gradient(ellipse at bottom left, var(--orange-100), transparent 50%),
    var(--bg);
  overflow: hidden;
}
/* ヒーロー内のテキスト列とカード列を横並びにするグリッド */
.hero-grid {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 56px;
  align-items: center;
}
/* タブレット以下は縦1列に変更 */
@media (max-width: 880px) {
  .hero-grid { grid-template-columns: 1fr; gap: 32px; text-align: center; }
}

/* h1の上に表示する「中小企業向け〜」のピルバッジ */
.hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  background: white;
  border: 1.5px solid var(--blue-200);
  border-radius: var(--r-pill);
  font-size: 13px;
  font-weight: 700;
  color: var(--blue-700);
  box-shadow: var(--shadow-sm);
}
/* アイブロウ内の緑の丸ドット（オンライン感を演出） */
.hero-eyebrow .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--green-500); }

/* ヒーローのメインキャッチコピー h1 */
.hero h1 {
  font-size: clamp(28px, 4.6vw, 48px);
  font-weight: 700;
  line-height: 1.4;
  margin: 20px 0 16px;
  letter-spacing: 0.01em;
}
/* h1 内の蛍光ペン風マーカー装飾（「回る形」部分） */
.hero h1 .marker {
  background: linear-gradient(transparent 60%, var(--orange-300) 60%);
  padding: 0 4px;
}
/* ヒーローの説明文（リード文） */
.hero p.lead {
  font-size: clamp(15px, 1.6vw, 17px);
  color: var(--ink-700);
  margin: 0 0 28px;
  max-width: 520px;
}
/* モバイルでリード文を中央揃えにする */
@media (max-width: 880px) { .hero p.lead { margin-left: auto; margin-right: auto; } }

/* ヒーロー内のCTAボタン群を横並びにするラッパー */
.hero-cta {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}
/* モバイルでCTAボタンを中央揃え */
@media (max-width: 880px) { .hero-cta { justify-content: center; } }

/* ヒーロー右側のプロフィールカード（白背景・大きな角丸） */
.profile-card {
  background: white;
  border-radius: var(--r-xl);
  padding: 28px;
  box-shadow: var(--shadow-lg);
  border: 1px solid var(--blue-100);
  position: relative;
}
/* プロフィールカードの背面に出るグラデーション枠線 */
.profile-card::before {
  content: "";
  position: absolute;
  inset: -8px;
  background: linear-gradient(135deg, var(--blue-200), var(--orange-100));
  border-radius: calc(var(--r-xl) + 8px);
  z-index: -1;
  opacity: 0.5;
}
/* タグ（16年以上・AWS移行PM・登録セキスペ）のフレックスラッパー */
.profile-tags {
  display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px;
}
/* 個々のタグピル（水色背景・小文字） */
.profile-tag {
  font-size: 11px; font-weight: 600;
  padding: 3px 10px;
  background: var(--blue-100); color: var(--blue-700);
  border-radius: var(--r-pill);
}
/* 得意領域・支援方針・対応形式を並べる dl グリッド */
.profile-meta {
  border-top: 1px dashed var(--blue-200);
  padding-top: 16px;
  display: grid;
  gap: 10px;
}
/* dl の各行を2列グリッドで表示（ラベル：値） */
.profile-meta dl { display: grid; grid-template-columns: 88px 1fr; gap: 10px; margin: 0; font-size: 13px;}
/* dl のラベル側 */
.profile-meta dt { color: var(--ink-500); font-weight: 600; }
/* dl の値側 */
.profile-meta dd { margin: 0; color: var(--ink-700); line-height: 1.7;}

/* ヒーロー右側のロゴカードレイアウト（ロゴ＋メタ情報をグリッドで並べる） */
.logo-card {
  display: grid;
  gap: 22px;
}
/* ヒーローに表示するサービスロゴ画像のサイズ制限 */
.hero-logo {
  width: min(100%, 360px);
  margin: 0 auto 4px;
}
/* タグ群の上に区切り線を付けるロゴカード用タグラッパー */
.logo-card-tags {
  border-top: 1px dashed var(--blue-200);
  padding-top: 18px;
}

/* ============================================================
   BUTTONS
   ============================================================ */
/* ボタン共通スタイル（inline-flex・角丸・ホバーアニメ） */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 24px;
  border-radius: var(--r-pill);
  font-weight: 700;
  font-size: 15px;
  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
  white-space: nowrap;
}
/* disabled 状態：半透明・クリック不可 */
.btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}
/* プライマリボタン（青塗りつぶし・影付き） */
.btn-primary {
  background: var(--blue-500);
  color: white;
  box-shadow: 0 6px 16px rgba(79, 168, 224, 0.35);
}
/* プライマリボタンのホバー時に濃い青＋浮き上がり効果 */
.btn-primary:hover {
  background: var(--blue-700);
  transform: translateY(-2px);
  box-shadow: 0 10px 22px rgba(79, 168, 224, 0.45);
}
/* disabled 状態でホバーしてもスタイルが変わらないようにする */
.btn-primary:disabled:hover {
  background: var(--blue-500);
  transform: none;
  box-shadow: none;
}
/* ゴーストボタン（白背景・青ボーダー） */
.btn-ghost {
  background: white;
  color: var(--blue-700);
  border: 1.5px solid var(--blue-200);
}
/* ゴーストボタンのホバー時に薄い青背景＋浮き上がり */
.btn-ghost:hover { background: var(--blue-50); border-color: var(--blue-400); transform: translateY(-2px); }

/* ============================================================
   SECTION HEADING
   ============================================================ */
/* セクションのタイトルブロック（中央揃え・下マージン付き） */
.sec-head { text-align: center; margin-bottom: 48px; }
/* セクション上部の英字ラベル（SERVICES / NEWS など） */
.sec-head .label {
  display: inline-block;
  font-size: 13px;
  font-weight: 700;
  color: var(--blue-500);
  letter-spacing: 0.2em;
  margin-bottom: 8px;
}
/* セクションの h2 見出し */
.sec-head h2 {
  font-size: clamp(24px, 3.4vw, 32px);
  font-weight: 700;
  margin: 0 0 12px;
  color: var(--ink-900);
  line-height: 1.4;
}
/* セクション見出し直下のサブ説明文 */
.sec-head p {
  color: var(--ink-500);
  margin: 0 auto;
  max-width: 620px;
  font-size: 16px;
}
/* 見出し下に表示する波線 SVG アクセント */
.wave-divider {
  display: block;
  margin: 16px auto 0;
  color: var(--blue-300);
}

/* ============================================================
   PROFILE DETAIL
   ============================================================ */
/* プロフィールセクションの背景色（白） */
.profile-section { background: var(--white); }
/* 資格・スタンスの2枚カードを横並びにするグリッド */
.profile-detail {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
}
/* モバイルでは縦1列に変更 */
@media (max-width: 720px) { .profile-detail { grid-template-columns: 1fr; } }

/* プロフィールの情報カード（資格・スタンス） */
.info-card {
  background: var(--blue-50);
  border-radius: var(--r-lg);
  padding: 28px;
  border: 1.5px solid var(--blue-100);
  position: relative;
  overflow: hidden;
  transition: transform 0.2s, box-shadow 0.2s;
}
/* カードホバー時に浮き上がり＋影 */
.info-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
/* カード内のアイコンボックス（白背景・角丸） */
.info-card .ico {
  width: 44px; height: 44px;
  border-radius: 14px;
  background: white;
  display: grid; place-items: center;
  color: var(--blue-500);
  margin-bottom: 14px;
  box-shadow: var(--shadow-sm);
}
/* カード内の小見出し */
.info-card h3 {
  margin: 0 0 12px;
  font-size: 17px;
  font-weight: 700;
  color: var(--blue-900);
}
/* カード内のリスト（箇条書き） */
.info-card ul {
  margin: 0; padding: 0; list-style: none;
  display: grid;
  gap: 8px;
  font-size: 14px;
  color: var(--ink-700);
}
/* リストの各行（アイコン＋テキスト） */
.info-card li {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  line-height: 1.65;
}
/* リスト行頭の青い丸ドット */
.info-card li::before {
  content: "";
  flex-shrink: 0;
  margin-top: 9px;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--blue-500);
}
/* 資格カード内の「IT/セキュリティ」「事業理解」グループ分けグリッド */
.cert-groups {
  display: grid;
  gap: 18px;
}
/* 資格グループのラベルテキスト */
.cert-groups p {
  margin: 0 0 8px;
  color: var(--blue-900);
  font-size: 13px;
  font-weight: 700;
}

/* ============================================================
   PAIN POINTS
   ============================================================ */
/* 課題セクション（薄青〜白のグラデーション背景） */
.pain-section {
  background: linear-gradient(180deg, var(--blue-50), var(--white));
  position: relative;
  overflow: hidden;
}
/* 3つの課題カードを横並びにするグリッド */
.pain-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
/* タブレット以下では縦1列に変更 */
@media (max-width: 880px) { .pain-list { grid-template-columns: 1fr; } }

/* 個々の課題カード（白背景・中央揃え） */
.pain-card {
  background: white;
  border-radius: var(--r-lg);
  padding: 28px 24px;
  text-align: center;
  border: 2px solid var(--blue-100);
  position: relative;
  transition: transform 0.25s, box-shadow 0.25s, border-color 0.25s;
}
/* ホバー時に浮き上がり＋ボーダーを青に変化 */
.pain-card:hover {
  transform: translateY(-4px);
  border-color: var(--blue-300);
  box-shadow: var(--shadow-md);
}
/* カード上部に飛び出るオレンジの番号バッジ（01・02・03） */
.pain-num {
  position: absolute;
  top: -14px; left: 50%;
  transform: translateX(-50%);
  width: 36px; height: 36px;
  background: var(--orange-500);
  color: white;
  border-radius: 50%;
  display: grid; place-items: center;
  font-weight: 700;
  font-size: 14px;
  font-family: var(--font-num);
  box-shadow: 0 4px 10px rgba(255, 169, 77, 0.4);
}
/* 課題カード内のアイコンボックス（薄青背景・角丸） */
.pain-card .ico {
  width: 64px; height: 64px;
  margin: 8px auto 16px;
  background: var(--blue-100);
  border-radius: 20px;
  display: grid; place-items: center;
  color: var(--blue-700);
}
/* 課題カードの小見出し */
.pain-card h3 {
  font-size: 16px;
  font-weight: 700;
  margin: 0 0 8px;
  color: var(--ink-900);
}
/* 課題カードの説明文 */
.pain-card p {
  font-size: 14px;
  color: var(--ink-500);
  margin: 0;
  line-height: 1.8;
}

/* 課題カード群の下に置く「そのままの言葉でご相談ください」の安心メッセージ */
.pain-note {
  margin: 36px auto 0;
  max-width: 640px;
  text-align: center;
  font-size: 15px;
  color: var(--ink-700);
  line-height: 2;
}
/* 安心メッセージ内の強調語に蛍光ペン風マーカー */
.pain-note strong {
  background: linear-gradient(transparent 60%, var(--orange-300) 60%);
  padding: 0 2px;
}

/* ============================================================
   SERVICES
   ============================================================ */
/* サービスセクション（白背景） */
.services-section { background: white; position: relative; overflow: hidden; }
/* サービスカードを3列グリッドで並べる基本レイアウト */
.services-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
/* 980px以下では縦1列に変更（max-width で中央揃え） */
@media (max-width: 980px) { .services-grid { grid-template-columns: 1fr; max-width: 480px; margin: 0 auto; } }
/* サービスカードを5列にする拡張クラス（提供サービスセクション用） */
.service-grid-5 {
  grid-template-columns: repeat(5, 1fr);
  max-width: none;
  margin: 0;
  align-items: start;
}
/* 1180px以下は3列に縮小 */
@media (max-width: 1180px) { .service-grid-5 { grid-template-columns: repeat(3, 1fr); } }
/* 880px以下は2列に縮小 */
@media (max-width: 880px) { .service-grid-5 { grid-template-columns: repeat(2, 1fr); } }
/* 640px以下は1列に縮小 */
@media (max-width: 640px) { .service-grid-5 { grid-template-columns: 1fr; max-width: 480px; margin: 0 auto; } }

/* サービスカード本体（縦フレックス・ホバーで浮き上がり） */
.svc-card {
  background: white;
  border-radius: var(--r-xl);
  overflow: hidden;
  border: 1px solid var(--ink-100);
  display: flex;
  flex-direction: column;
  position: relative;
  transition: transform 0.25s, box-shadow 0.25s;
}
/* ホバー時に上に浮き上がり＋大きな影 */
.svc-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); }

/* カード上部の細いカラーバー（カテゴリ識別用） */
.svc-banner {
  height: 14px;
  background: var(--blue-500);
  flex-shrink: 0;
}
/* EC：青系グラデーション */
.svc-card.svc-ec .svc-banner { background: linear-gradient(90deg, var(--blue-500), var(--blue-400)); }
/* AWS：淡い青系グラデーション */
.svc-card.svc-cloud .svc-banner { background: linear-gradient(90deg, var(--blue-400), var(--blue-200)); }
/* SEC：濃い青系グラデーション */
.svc-card.svc-security .svc-banner { background: linear-gradient(90deg, var(--blue-900), var(--blue-700)); }
/* OPS：オレンジ系グラデーション */
.svc-card.svc-ops .svc-banner { background: linear-gradient(90deg, var(--orange-500), var(--orange-300)); }
/* AI：グリーン系グラデーション */
.svc-card.svc-ai .svc-banner { background: linear-gradient(90deg, var(--green-500), #8ED7AA); }

/* カード左上に絶対配置する EC / AWS / SEC / OPS / AI のモードバッジ */
.svc-mode {
  position: absolute;
  top: 16px; left: 16px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  padding: 4px 10px;
  background: white;
  border-radius: var(--r-pill);
  color: var(--blue-700);
  box-shadow: var(--shadow-sm);
}
/* 各カテゴリのバッジ文字色 */
.svc-card.svc-cloud .svc-mode { color: var(--blue-500); }
.svc-card.svc-security .svc-mode { color: var(--blue-900); }
.svc-card.svc-ops .svc-mode { color: var(--orange-500); }
.svc-card.svc-ai .svc-mode { color: var(--green-500); }

/* カード上半分のアイコン表示エリア（カテゴリ色の背景） */
.svc-cover {
  height: 160px;
  background: var(--blue-50);
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
/* 各カテゴリのカバー背景色 */
.svc-card.svc-cloud .svc-cover { background: #EFF9FE; }
.svc-card.svc-security .svc-cover { background: #EAF0F7; }
.svc-card.svc-ops .svc-cover { background: var(--orange-100); }
.svc-card.svc-ai .svc-cover { background: var(--green-100); }
/* カバーエリア内に表示する大きなアイコンボックス（白背景・大きな角丸） */
.svc-cover .ico-big {
  position: relative;
  z-index: 1;
  width: 96px; height: 96px;
  background: white;
  border-radius: 28px;
  display: grid; place-items: center;
  color: var(--blue-500);
  box-shadow: var(--shadow-md);
}
/* 各カテゴリのアイコン色 */
.svc-card.svc-cloud .svc-cover .ico-big { color: var(--blue-400); }
.svc-card.svc-security .svc-cover .ico-big { color: var(--blue-900); }
.svc-card.svc-ops .svc-cover .ico-big { color: var(--orange-500); }
.svc-card.svc-ai .svc-cover .ico-big { color: var(--green-500); }

/* カード下半分のテキストエリア（縦フレックス・flex-grow で高さを揃える） */
.svc-body {
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  flex-grow: 1;
}
/* タグ群（現状整理・段階移行など）を横並びにするラッパー */
.svc-tag-row { display: flex; gap: 6px; flex-wrap: wrap; }
/* 個々のカテゴリタグ（小文字・ピル形） */
.svc-tag {
  font-size: 11px; font-weight: 600;
  padding: 3px 9px;
  background: var(--blue-100);
  color: var(--blue-700);
  border-radius: var(--r-pill);
}
/* 各カテゴリのタグ色 */
.svc-card.svc-cloud .svc-tag { background: #EFF9FE; color: var(--blue-700); }
.svc-card.svc-security .svc-tag { background: #EAF0F7; color: var(--blue-900); }
.svc-card.svc-ops .svc-tag { background: var(--orange-100); color: #C97316; }
.svc-card.svc-ai .svc-tag { background: var(--green-100); color: #2E7D55; }
/* サービス名の見出し */
.svc-title {
  font-size: 18px; font-weight: 700;
  margin: 0;
  line-height: 1.45;
  color: var(--ink-900);
}
/* サービスの短い説明文 */
.svc-desc {
  font-size: 14px;
  color: var(--ink-500);
  margin: 0;
  line-height: 1.75;
}

/* サービス内容の箇条書きリスト（破線ボーダーで区切り） */
.svc-price-list {
  margin: 0;
  padding: 14px 0;
  display: grid;
  gap: 10px;
  border-top: 1px dashed var(--ink-100);
  border-bottom: 1px dashed var(--ink-100);
  list-style: none;
}
/* リストの各行 */
.svc-price-list li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  font-size: 13px;
}
/* リスト内の期間・内容テキスト（折り返さない） */
.svc-price-list .duration { color: var(--ink-700); font-weight: 600; white-space: nowrap; flex-shrink: 0;}
/* 5列グリッド時は折り返しを許可し、タイトルを小さくして読みやすさを改善 */
.service-grid-5 .svc-price-list .duration {
  white-space: normal;
  overflow-wrap: break-word;
  flex-shrink: 1;
  min-width: 0;
}
.service-grid-5 .svc-title {
  font-size: 15px;
  line-height: 1.5;
}

/* ============================================================
   CASES
   ============================================================ */
/* 事例セクション（白背景） */
.cases-section {
  background: var(--white);
}
/* 事例カードを並べるリスト（2〜3件想定） */
.cases-list {
  max-width: 820px;
  margin: 0 auto;
  display: grid;
  gap: 18px;
}
/* 個々の事例カード */
.case-card {
  background: white;
  border: 1px solid var(--blue-100);
  border-radius: var(--r-lg);
  padding: 26px 28px;
  box-shadow: var(--shadow-sm);
}
/* 事例タイトル（改善した業務名） */
.case-card h3 {
  margin: 0 0 16px;
  color: var(--ink-900);
  font-size: 17px;
}
/* Before / After を矢印でつなぐ比較レイアウト */
.case-compare {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 14px;
  align-items: center;
  margin-bottom: 16px;
}
/* Before / After それぞれの枠（共通） */
.case-col {
  display: grid;
  gap: 4px;
  justify-items: center;
  padding: 16px 14px;
  border-radius: var(--r-md);
  text-align: center;
}
/* Before枠（グレー系） */
.case-before {
  background: var(--ink-100);
}
/* After枠（薄青系で改善後を強調） */
.case-after {
  background: var(--blue-50);
  border: 1.5px solid var(--blue-200);
}
/* Before / After のラベル */
.case-tag {
  font-family: var(--font-num);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--ink-500);
}
.case-after .case-tag {
  color: var(--blue-700);
}
/* 枠内の本文 */
.case-col p {
  margin: 0;
  color: var(--ink-900);
  font-size: 15px;
  font-weight: 700;
  line-height: 1.6;
}
/* 中央の矢印 */
.case-arrow {
  color: var(--blue-500);
  font-family: var(--font-num);
  font-size: 22px;
  font-weight: 700;
}
/* 事例詳細（note記事）へのリンク */
.case-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--blue-700);
  font-size: 14px;
  font-weight: 700;
  text-decoration: underline;
  text-decoration-color: var(--blue-300);
  text-decoration-thickness: 2px;
  text-underline-offset: 5px;
  transition: color 0.2s;
}
.case-link:hover {
  color: var(--blue-900);
}
/* セクション下の補足文（自分の業務での実践例である旨） */
.cases-note {
  max-width: 820px;
  margin: 22px auto 0;
  color: var(--ink-500);
  font-size: 13px;
  text-align: center;
}
/* モバイルでは Before / After を縦並びに変更 */
@media (max-width: 640px) {
  .case-compare {
    grid-template-columns: 1fr;
  }
  .case-arrow {
    transform: rotate(90deg);
    justify-self: center;
  }
}

/* ============================================================
   PRICING
   ============================================================ */
/* 料金セクション（白〜薄青のグラデーション背景） */
.pricing-section {
  background: linear-gradient(180deg, var(--white), var(--blue-50));
}
/* 料金表を囲むカード（モバイルでは横スクロール可） */
.price-table-wrap {
  max-width: 920px;
  margin: 0 auto;
  background: white;
  border: 1px solid var(--blue-100);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-md);
  overflow-x: auto;
}
/* 料金表本体 */
.price-table {
  width: 100%;
  min-width: 560px;
  border-collapse: collapse;
  font-size: 14px;
}
/* ヘッダー行（薄青背景） */
.price-table th {
  padding: 14px 20px;
  background: var(--blue-50);
  color: var(--blue-700);
  font-size: 13px;
  font-weight: 700;
  text-align: left;
  white-space: nowrap;
  border-bottom: 1.5px solid var(--blue-100);
}
/* 本文セル */
.price-table td {
  padding: 16px 20px;
  color: var(--ink-700);
  line-height: 1.7;
  border-bottom: 1px solid var(--blue-100);
  vertical-align: top;
}
/* 最終行は下ボーダーなし */
.price-table tbody tr:last-child td {
  border-bottom: none;
}
/* メニュー名セル（太字） */
.price-table .price-menu {
  color: var(--ink-900);
  font-weight: 700;
  white-space: nowrap;
}
/* 金額セル（数字フォント・改行させない） */
.price-table .price-amount {
  color: var(--blue-900);
  font-family: var(--font-num);
  font-weight: 700;
  white-space: nowrap;
}
/* 料金表の下の補足リスト（初回相談料の差し引き等） */
.price-notes {
  max-width: 920px;
  margin: 20px auto 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 8px;
}
.price-notes li {
  position: relative;
  padding-left: 20px;
  color: var(--ink-700);
  font-size: 14px;
  line-height: 1.8;
}
/* リスト先頭のチェック風マーカー */
.price-notes li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: var(--blue-500);
  font-weight: 700;
}
/* モニター割引の案内ボックス（オレンジ系で目を引かせる） */
.price-monitor {
  max-width: 920px;
  margin: 24px auto 0;
  padding: 22px 24px;
  background: var(--orange-100);
  border: 1.5px solid var(--orange-300);
  border-radius: var(--r-md);
}
/* 割引タイトル */
.price-monitor-title {
  display: inline-block;
  margin-bottom: 6px;
  color: var(--ink-900);
  font-size: 15px;
  font-weight: 700;
}
/* 割引の説明文 */
.price-monitor p {
  margin: 0;
  color: var(--ink-700);
  font-size: 14px;
  line-height: 1.85;
}
.price-monitor p strong {
  color: var(--ink-900);
}
/* モバイルでは表を縦積みのカード型に変更（料金が横スクロールなしで見えるように） */
@media (max-width: 640px) {
  .price-table {
    min-width: 0;
  }
  .price-table thead {
    display: none;
  }
  .price-table tbody,
  .price-table tr,
  .price-table td {
    display: block;
  }
  .price-table tr {
    padding: 16px 18px;
    border-bottom: 1px solid var(--blue-100);
  }
  .price-table tbody tr:last-child {
    border-bottom: none;
  }
  .price-table td {
    padding: 0;
    border-bottom: none;
  }
  .price-table .price-menu {
    white-space: normal;
    font-size: 15px;
  }
  .price-table td:nth-child(2) {
    color: var(--ink-500);
    font-size: 13px;
  }
  .price-table .price-amount {
    margin-top: 4px;
    font-size: 16px;
  }
  .price-monitor {
    padding: 18px 16px;
  }
}

/* ============================================================
   NEWS
   ============================================================ */
/* お知らせセクション（白背景） */
.news-section {
  background: var(--white);
}
/* お知らせ記事を縦に並べるリストコンテナ（上ボーダー付き） */
.news-list {
  max-width: 820px;
  margin: 0 auto;
  border-top: 1px solid var(--blue-100);
}
/* 個々のお知らせ行（日付＋リンクを横並び、下ボーダー付き） */
.news-item {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 20px 0;
  border-bottom: 1px solid var(--blue-100);
}
/* 日付＋カテゴリ（note など）を縦に並べる左側メタ情報 */
.news-meta {
  flex: 0 0 auto;
  display: grid;
  gap: 2px;
  min-width: 92px;
  color: var(--blue-700);
  font-family: var(--font-num);
  font-weight: 700;
}
/* 日付テキスト（グレー・小サイズ） */
.news-meta time {
  color: var(--ink-500);
  font-size: 12px;
}
/* カテゴリ名テキスト（note など） */
.news-meta span {
  font-size: 12px;
  letter-spacing: 0.08em;
}
/* 記事タイトルのリンク（下線付き・ホバーで色変化） */
.news-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--ink-900);
  font-size: 15px;
  font-weight: 700;
  text-decoration: underline;
  text-decoration-color: var(--blue-300);
  text-decoration-thickness: 2px;
  text-underline-offset: 5px;
  transition: color 0.2s;
}
/* リンクホバー時に青に変化 */
.news-link:hover {
  color: var(--blue-700);
}
/* リンク末尾の矢印アイコン（→） */
.news-link-icon {
  color: var(--blue-500);
  font-family: var(--font-num);
}
/* 「noteを見る」の誘導バナー（薄青背景・横並び） */
.news-more {
  max-width: 820px;
  margin: 22px auto 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 20px;
  background: var(--blue-50);
  border: 1px solid var(--blue-100);
  border-radius: var(--r-md);
}
/* バナー左側の説明テキスト */
.news-more p {
  margin: 0;
  color: var(--ink-700);
  font-size: 14px;
  font-weight: 600;
}
/* バナー右側の「noteを見る →」リンク */
.news-more a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--blue-700);
  font-size: 14px;
  font-weight: 700;
  white-space: nowrap;
}
/* リンクホバー時に濃い青に変化 */
.news-more a:hover {
  color: var(--blue-900);
}
/* モバイルではニュース行・バナーを縦並びに変更 */
@media (max-width: 640px) {
  .news-item {
    align-items: flex-start;
    flex-direction: column;
    gap: 6px;
  }
  .news-more {
    align-items: flex-start;
    flex-direction: column;
  }
}

/* 実績カードを5列で横並びにするグリッド */
.achievement-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 16px;
}
/* 980px以下は2列に縮小 */
@media (max-width: 980px) { .achievement-grid { grid-template-columns: repeat(2, 1fr); } }
/* 640px以下は1列に縮小 */
@media (max-width: 640px) { .achievement-grid { grid-template-columns: 1fr; } }
/* 個々の実績カード（薄青背景・縦フレックス） */
.achievement-card {
  min-height: 160px;
  padding: 24px 20px;
  border-radius: var(--r-lg);
  border: 1.5px solid var(--blue-100);
  background: var(--blue-50);
  display: flex;
  flex-direction: column;
  gap: 12px;
  transition: transform 0.2s, box-shadow 0.2s;
}
/* ホバー時に浮き上がり＋影 */
.achievement-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
}
/* 実績カードの見出し（EC内製化・AWS移行など） */
.achievement-card strong {
  color: var(--blue-900);
  font-size: 16px;
}
/* 実績カードの説明テキスト */
.achievement-card span {
  color: var(--ink-700);
  font-size: 13px;
  line-height: 1.7;
}

/* プロフィールセクションの説明文（中央揃え・最大幅制限） */
.profile-copy {
  max-width: 820px;
  margin: 0 auto 32px;
  color: var(--ink-700);
  font-size: 15px;
}
/* 説明文の段落間マージン */
.profile-copy p {
  margin: 0 0 14px;
}

/* ============================================================
   CONTACT
   ============================================================ */
/* お問い合わせセクション（青＋オレンジのグラデーション背景） */
.contact-section {
  background:
    radial-gradient(ellipse at top left, var(--blue-100), transparent 50%),
    radial-gradient(ellipse at bottom right, var(--orange-100), transparent 50%),
    var(--blue-50);
  text-align: center;
  position: relative;
  overflow: hidden;
}
/* お問い合わせセクション内の白いカード */
.contact-card {
  max-width: 720px;
  margin: 0 auto;
  background: white;
  border-radius: var(--r-xl);
  padding: 48px 32px;
  box-shadow: var(--shadow-lg);
  border: 1px solid var(--blue-100);
  position: relative;
}
/* カード内の見出し */
.contact-card h2 {
  font-size: clamp(22px, 3vw, 28px);
  margin: 0 0 12px;
  color: var(--ink-900);
  line-height: 1.5;
}
/* カード内の説明文 */
.contact-card p {
  color: var(--ink-500);
  margin: 0 0 32px;
  font-size: 15px;
}
/* カード内の英字ラベル（CONTACT） */
.contact-card > .label {
  display: inline-block;
  font-size: 13px;
  font-weight: 700;
  color: var(--blue-500);
  letter-spacing: 0.2em;
  margin-bottom: 8px;
}
/* カード内のグリッドレイアウト（説明リスト＋ボタンを横並び） */
.contact-grid {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 32px;
  text-align: left;
  align-items: center;
}
/* 720px以下では縦1列・中央揃えに変更 */
@media (max-width: 720px) {
  .contact-grid { grid-template-columns: 1fr; gap: 24px; text-align: center; }
}
/* 相談内容リストとボタンの列比率を調整するバリアント */
.consultation-grid {
  grid-template-columns: 1fr 1.2fr;
}
/* 「現状の課題整理」など3項目を縦に並べるリスト */
.consultation-list {
  display: grid;
  gap: 10px;
}
/* 相談内容リストの各アイテム（薄青背景・ドット付き） */
.consultation-list span {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  border-radius: var(--r-md);
  background: var(--blue-50);
  border: 1.5px solid var(--blue-100);
  color: var(--ink-700);
  font-size: 14px;
  font-weight: 700;
}
/* アイテム左端のオレンジ丸ドット */
.consultation-list span::before {
  content: "";
  width: 8px;
  height: 8px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--orange-500);
}
/* モバイルでは縦1列・中央揃え */
@media (max-width: 720px) {
  .consultation-grid { grid-template-columns: 1fr; }
  .consultation-list span { justify-content: center; }
}
/* お問い合わせボタンを左揃えで配置するラッパー */
.contact-actions {
  display: flex;
  justify-content: flex-start;
}
/* モバイルでは中央揃えに変更 */
@media (max-width: 720px) {
  .contact-actions { justify-content: center; }
}

/* ============================================================
   SUB PAGES / FORM
   ============================================================ */
/* サブページ（contact・privacy・thanks）の本文エリア背景 */
.sub-page {
  background: var(--bg);
}
/* サブページのヒーロー部分（グラデーション背景・タイトル表示エリア） */
.page-hero {
  padding: 72px 0 40px;
  background:
    radial-gradient(ellipse at top right, var(--blue-100), transparent 60%),
    radial-gradient(ellipse at bottom left, var(--orange-100), transparent 50%),
    var(--bg);
  overflow: hidden;
}
/* サブページの h1 と thanks カードの h1 共通スタイル */
.page-hero h1,
.thanks-card h1 {
  font-size: clamp(28px, 4vw, 40px);
  line-height: 1.4;
  margin: 0 0 12px;
  color: var(--ink-900);
}
/* お問い合わせフォームを囲むセクション */
.form-section {
  padding-top: 32px;
  background: linear-gradient(180deg, var(--bg), var(--blue-50));
}
/* フォーム全体を囲む白いカード */
.form-shell {
  max-width: 860px;
  margin: 0 auto;
  background: white;
  border: 1px solid var(--blue-100);
  border-radius: var(--r-xl);
  padding: 36px;
  box-shadow: var(--shadow-lg);
}
/* フォームフィールドを縦に並べるグリッド */
.contact-form {
  display: grid;
  gap: 22px;
}
/* メールアドレス・相談領域などを2列で並べるグリッド */
.form-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px;
}
/* モバイルではフォームを縦1列に変更 */
@media (max-width: 720px) {
  .form-shell { padding: 28px 20px; }
  .form-grid { grid-template-columns: 1fr; }
}
/* ラベル＋入力フィールドをセットで縦に並べるフィールドグループ */
.form-field {
  display: grid;
  gap: 8px;
}
/* フォームのラベルテキスト */
.form-field label {
  color: var(--blue-900);
  font-size: 14px;
  font-weight: 700;
}
/* ラベル内の「必須」バッジ（オレンジ） */
.form-field label span {
  color: var(--orange-500);
  font-size: 12px;
  margin-left: 4px;
}
/* input・select・textarea の共通スタイル（薄青背景・角丸） */
.form-field input,
.form-field select,
.form-field textarea {
  width: 100%;
  border: 1.5px solid var(--blue-100);
  border-radius: var(--r-md);
  background: var(--blue-50);
  color: var(--ink-900);
  font: inherit;
  font-size: 15px;
  padding: 13px 14px;
  outline: none;
  transition: border-color 0.15s, box-shadow 0.15s, background 0.15s;
}
/* テキストエリアの最小高さと縦リサイズ */
.form-field textarea {
  resize: vertical;
  min-height: 180px;
}
/* フォーカス時に白背景＋青ボーダー＋発光 */
.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus {
  background: white;
  border-color: var(--blue-400);
  box-shadow: 0 0 0 4px rgba(79, 168, 224, 0.16);
}
/* プレースホルダーテキストの色 */
.form-field input::placeholder,
.form-field textarea::placeholder {
  color: var(--ink-300);
}
/* プライバシーポリシー同意チェックボックス＋テキストのレイアウト */
.check-field {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  color: var(--ink-700);
  font-size: 14px;
  line-height: 1.7;
}
/* チェックボックス自体のサイズ・色 */
.check-field input {
  width: 18px;
  height: 18px;
  margin-top: 4px;
  accent-color: var(--blue-500);
  flex-shrink: 0;
}
/* フォーム内・プライバシーポリシーページ内のリンク文字色 */
.check-field a,
.policy-card a {
  color: var(--blue-700);
  text-decoration: underline;
  text-underline-offset: 3px;
}
/* フォーム内の注意事項（オレンジ背景の帯） */
.form-note {
  margin: 0;
  padding: 14px 16px;
  border-radius: var(--r-md);
  background: var(--orange-100);
  color: var(--ink-700);
  font-size: 13px;
  line-height: 1.7;
}
/* 送信ボタンと「トップへ戻る」を横並びにするラッパー */
.form-actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}
/* モバイルでは縦並びにして横幅を100%に */
@media (max-width: 640px) {
  .form-actions {
    flex-direction: column;
  }
  .form-actions .btn {
    width: 100%;
  }
}
/* 送信完了ページのセクション（画面高さいっぱいに広がる） */
.thanks-section {
  min-height: calc(100vh - 200px);
  display: grid;
  align-items: center;
  padding: 48px 0;
  background:
    radial-gradient(ellipse at top right, var(--blue-100), transparent 60%),
    radial-gradient(ellipse at bottom left, var(--orange-100), transparent 50%),
    var(--bg);
  overflow: hidden;
}
/* 送信完了メッセージを表示する中央揃えのカード */
.thanks-card {
  max-width: 720px;
  margin: 0 auto;
  text-align: center;
  background: white;
  border: 1px solid var(--blue-100);
  border-radius: var(--r-lg);
  padding: 36px 32px;
  box-shadow: var(--shadow-lg);
}
/* 送信完了のチェックマーク入り丸アイコン（グリーングラデーション） */
.thanks-icon {
  width: 60px;
  height: 60px;
  display: grid;
  place-items: center;
  margin: 0 auto 14px;
  color: white;
  background: linear-gradient(135deg, var(--green-500), #8ED7AA);
  border-radius: 50%;
  box-shadow: var(--shadow-md);
}
/* 送信完了カード内の英字ラベル（THANK YOU） */
.thanks-card .label {
  display: inline-block;
  font-size: 13px;
  font-weight: 700;
  color: var(--blue-500);
  letter-spacing: 0.2em;
  margin-bottom: 8px;
}
/* 送信完了カードの説明文 */
.thanks-card p {
  max-width: 560px;
  margin: 0 auto 22px;
  color: var(--ink-500);
  font-size: 15px;
}
/* 送信完了カード内のボタンを中央揃え */
.thanks-card .form-actions {
  justify-content: center;
}

/* プライバシーポリシーのコンテンツセクション */
.policy-section {
  padding-top: 32px;
  background: linear-gradient(180deg, var(--bg), var(--blue-50));
}
/* プライバシーポリシーのテキストを収める白いカード */
.policy-card {
  max-width: 860px;
  margin: 0 auto;
  background: white;
  border: 1px solid var(--blue-100);
  border-radius: var(--r-xl);
  padding: 40px;
  box-shadow: var(--shadow-lg);
}
/* ポリシーカード内のセクション間に上マージン＋破線区切り */
.policy-card section + section {
  margin-top: 28px;
  padding-top: 24px;
  border-top: 1px dashed var(--blue-200);
}
/* ポリシーの各項目見出し */
.policy-card h2 {
  margin: 0 0 10px;
  color: var(--blue-900);
  font-size: 18px;
  line-height: 1.5;
}
/* ポリシーの本文テキスト */
.policy-card p {
  margin: 0;
  color: var(--ink-700);
  font-size: 14px;
  line-height: 1.9;
}
/* ポリシーの制定日（右寄せ・グレー） */
.policy-date {
  margin-top: 32px !important;
  color: var(--ink-500) !important;
  font-size: 13px !important;
  text-align: right;
}
/* モバイルでポリシーカードの余白を縮小 */
@media (max-width: 720px) {
  .policy-card {
    padding: 28px 20px;
  }
}

/* ============================================================
   FOOTER
   ============================================================ */
/* サイトフッター（濃い青背景・中央揃え） */
.site-footer {
  background: var(--blue-900);
  color: rgba(255, 255, 255, 0.8);
  padding: 32px 0 24px;
  text-align: center;
}
/* フッター内のブランド名を白に */
.site-footer .brand-name { color: white; }
/* コピーライトテキスト（半透明白・小サイズ） */
.site-footer .copyright {
  font-size: 12px;
  margin-top: 12px;
  color: rgba(255, 255, 255, 0.5);
}
/* フッター内のロゴアイコンを青グラデーションに */
.site-footer .brand-mark {
  background: linear-gradient(135deg, var(--blue-500), var(--blue-400));
  color: white;
}
/* フッターのブランドリンクを中央揃え */
.site-footer .brand {
  justify-content: center;
}
/* フッターのリンク群（プライバシーポリシーなど）を横並び */
.footer-links {
  display: flex;
  justify-content: center;
  gap: 16px;
  margin-top: 16px;
}
/* フッターリンクの文字色（半透明白・下線付き） */
.footer-links a {
  color: rgba(255, 255, 255, 0.72);
  font-size: 12px;
  text-decoration: underline;
  text-underline-offset: 3px;
}
/* ホバー時に完全な白に */
.footer-links a:hover {
  color: white;
}

/* ============================================================
   SCROLL ANIMATIONS (CSS only)
   ============================================================ */
/* スクロール連動フェードインアニメーション（モーション許可時のみ） */
@media (prefers-reduced-motion: no-preference) {
  /* 要素がビューポートに入ったときに下から浮き上がってフェードイン */
  .reveal {
    opacity: 0;
    transform: translateY(24px);
    animation: reveal 0.8s ease forwards;
    animation-timeline: view();
    animation-range: entry 0% cover 30%;
  }
  /* 子要素を順番にフェードインさせるスタガーアニメーション */
  .reveal-stagger > * {
    opacity: 0;
    transform: translateY(20px);
    animation: reveal 0.7s ease forwards;
    animation-timeline: view();
    animation-range: entry 0% cover 25%;
  }
  /* 2〜4番目の子要素に段階的な遅延を付けて順番に出現させる */
  .reveal-stagger > *:nth-child(2) { animation-delay: 0.08s; }
  .reveal-stagger > *:nth-child(3) { animation-delay: 0.16s; }
  .reveal-stagger > *:nth-child(4) { animation-delay: 0.24s; }
}
/* フェードイン完了状態（透明→不透明・上に移動） */
@keyframes reveal {
  to { opacity: 1; transform: translateY(0); }
}

/* scroll-driven animations 非対応ブラウザ向けのフォールバック（常に表示） */
@supports not (animation-timeline: view()) {
  .reveal, .reveal-stagger > * { opacity: 1; transform: none;}
}

/* ヒーローの blob に適用するふわふわ浮遊アニメーション */
@keyframes float {
  0%, 100% { transform: translate(0, 0); }
  50% { transform: translate(0, -10px); }
}
/* 浮遊アニメーションを繰り返す要素に付与するクラス */
.float-anim { animation: float 6s ease-in-out infinite; }

/* ============================================================
   CONSULT（よくあるご相談）
   ============================================================ */
/* よくあるご相談セクション（薄青〜白のグラデーション背景） */
.consult-section {
  background: linear-gradient(180deg, var(--white), var(--blue-50));
}
/* 2枚の大きな相談カードを横並びにするグリッド */
.consult-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
  max-width: 960px;
  margin: 0 auto;
}
/* 880px以下では縦1列に変更 */
@media (max-width: 880px) {
  .consult-grid { grid-template-columns: 1fr; max-width: 540px; }
}
/* 相談カード本体（白背景・太めの青枠で目立たせる） */
.consult-card {
  background: white;
  border: 2px solid var(--blue-200);
  border-radius: var(--r-xl);
  padding: 32px 28px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  transition: transform 0.25s, box-shadow 0.25s, border-color 0.25s;
}
/* ホバー時に浮き上がり＋枠を濃い青に */
.consult-card:hover {
  transform: translateY(-4px);
  border-color: var(--blue-400);
  box-shadow: var(--shadow-md);
}
/* 相談カード上部のアイコンボックス（薄青背景・角丸） */
.consult-card .ico {
  width: 64px; height: 64px;
  background: var(--blue-100);
  border-radius: 20px;
  display: grid; place-items: center;
  color: var(--blue-700);
}
/* 相談カードの見出し */
.consult-card h3 {
  margin: 0;
  font-size: 20px;
  font-weight: 700;
  color: var(--ink-900);
  line-height: 1.5;
}
/* 見出し直下の一言サブテキスト */
.consult-sub {
  margin: 0;
  font-size: 14px;
  color: var(--ink-500);
  line-height: 1.8;
}
/* 「こんな相談」の箇条書きリスト（チェックマーク付き） */
.consult-list {
  margin: 0;
  padding: 16px 0;
  list-style: none;
  display: grid;
  gap: 10px;
  border-top: 1px dashed var(--blue-200);
  border-bottom: 1px dashed var(--blue-200);
}
/* リストの各行（チェック＋テキスト） */
.consult-list li {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  font-size: 14px;
  color: var(--ink-700);
  font-weight: 600;
  line-height: 1.7;
}
/* 行頭の緑のチェックマーク */
.consult-list li::before {
  content: "✓";
  flex-shrink: 0;
  width: 20px; height: 20px;
  margin-top: 2px;
  border-radius: 50%;
  background: var(--green-100);
  color: var(--green-500);
  font-size: 12px;
  font-weight: 700;
  display: grid;
  place-items: center;
}
/* カード末尾の「〜という段階からで大丈夫です」の一言 */
.consult-foot {
  margin: 0;
  font-size: 13px;
  color: var(--blue-700);
  font-weight: 700;
}

/* ============================================================
   FLOW（相談の流れ）
   ============================================================ */
/* 相談の流れセクション（白背景） */
.flow-section { background: var(--white); }
/* 4つのステップカードを横並びにするグリッド */
.flow-list {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  max-width: 1040px;
  margin: 0 auto;
}
/* 980px以下は2列に縮小 */
@media (max-width: 980px) { .flow-list { grid-template-columns: repeat(2, 1fr); max-width: 640px; } }
/* 600px以下は1列に縮小 */
@media (max-width: 600px) { .flow-list { grid-template-columns: 1fr; max-width: 480px; } }
/* 個々のステップカード（薄青背景・番号付き） */
.flow-step {
  background: var(--blue-50);
  border: 1.5px solid var(--blue-100);
  border-radius: var(--r-lg);
  padding: 24px 20px;
  transition: transform 0.2s, box-shadow 0.2s;
}
/* ホバー時に浮き上がり＋影 */
.flow-step:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
/* ステップ番号の丸バッジ（青背景・白数字） */
.flow-num {
  display: grid;
  place-items: center;
  width: 40px; height: 40px;
  margin-bottom: 14px;
  border-radius: 50%;
  background: var(--blue-500);
  color: white;
  font-family: var(--font-num);
  font-weight: 700;
  font-size: 17px;
  box-shadow: 0 4px 10px rgba(79, 168, 224, 0.35);
}
/* ステップの小見出し */
.flow-step h3 {
  margin: 0 0 8px;
  font-size: 16px;
  font-weight: 700;
  color: var(--ink-900);
}
/* ステップの説明文 */
.flow-step p {
  margin: 0;
  font-size: 14px;
  color: var(--ink-700);
  line-height: 1.8;
}
/* フロー下の「営業の連絡は繰り返しません」の安心メッセージ帯 */
.reassure-note {
  max-width: 640px;
  margin: 32px auto 0;
  padding: 14px 20px;
  text-align: center;
  background: var(--orange-100);
  border-radius: var(--r-md);
  color: var(--ink-700);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.8;
}

/* ============================================================
   FAQ（よくある質問）
   ============================================================ */
/* FAQセクション（薄青〜白のグラデーション背景） */
.faq-section {
  background: linear-gradient(180deg, var(--blue-50), var(--white));
}
/* 質問アコーディオンを縦に並べるリスト */
.faq-list {
  max-width: 760px;
  margin: 0 auto;
  display: grid;
  gap: 12px;
}
/* 個々の質問（details要素・白カード） */
.faq-item {
  background: white;
  border: 1.5px solid var(--blue-100);
  border-radius: var(--r-lg);
  overflow: hidden;
  transition: border-color 0.2s, box-shadow 0.2s;
}
/* 開いている質問は枠を青く強調 */
.faq-item[open] {
  border-color: var(--blue-300);
  box-shadow: var(--shadow-sm);
}
/* 質問文の行（クリック領域） */
.faq-item summary {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 18px 20px;
  font-size: 15px;
  font-weight: 700;
  color: var(--ink-900);
  cursor: pointer;
  list-style: none;
  line-height: 1.6;
}
/* ブラウザ標準の三角マーカーを非表示 */
.faq-item summary::-webkit-details-marker { display: none; }
/* 質問行頭の「Q」バッジ */
.faq-q-mark {
  flex-shrink: 0;
  width: 28px; height: 28px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--blue-100);
  color: var(--blue-700);
  font-family: var(--font-num);
  font-size: 14px;
}
/* 質問行末尾の開閉インジケーター（＋） */
.faq-item summary::after {
  content: "+";
  margin-left: auto;
  flex-shrink: 0;
  color: var(--blue-500);
  font-family: var(--font-num);
  font-size: 22px;
  font-weight: 600;
  line-height: 1;
  transition: transform 0.2s;
}
/* 開いたら＋を×の形に回転 */
.faq-item[open] summary::after { transform: rotate(45deg); }
/* 回答テキスト（Qバッジの分だけ左にインデント） */
.faq-a {
  margin: 0;
  padding: 0 20px 20px 60px;
  font-size: 14px;
  color: var(--ink-700);
  line-height: 1.9;
}
/* モバイルでは回答のインデントを浅くする */
@media (max-width: 600px) {
  .faq-a { padding-left: 20px; }
}