:root {
  --brand: #0ea5e9;
  /* sky-500 */
  --brand-dark: #0284c7;
  /* sky-600 */
  --ink: #0f172a;
  /* slate-900 */
  --muted: #64748b;
  /* slate-500 */
  --bg: #f8fafc;
  /* slate-50 */

  --bg-white: #ffffff;
  --bg-ice: #f7fbff; /* ほんのり青み */
}

body {
  background: var(--bg);
  color: var(--ink);
}

.navbar {
  backdrop-filter: saturate(140%) blur(8px);
}

.navbar-custom {
  background: linear-gradient(90deg, #fafaf0 0%, #e6f2f8 100%);
}
.navbar-custom .nav-link {
  color: #374151; /* 濃いグレー文字で読みやすく */
  font-weight: 500;
}
.navbar-custom .nav-link:hover {
  color: #92400e; /* 茶系（#amberの暗め） */
}

/* ==== Brand 4行固定（共通） ==== */
.site-brand {
  min-width: 0;
}
.brand-logo {
  height: 34px;
  width: auto;
}

.brand-4lines {
  display: inline-flex;
  flex-direction: column;
  gap: 0.12rem;
  line-height: 1.15;
  /* 画面幅で自動調整（SP～PC） */
  min-width: 0;
}
.brand-4lines > span {
  display: block;
  white-space: nowrap; /* 各行は必ず1行 */
  overflow: hidden;
  text-overflow: ellipsis; /* はみ出しは…で省略 */
}

/* ナビ詰まり対策（右ボタンが長い場合に先に縮む） */
.navbar .navbar-brand {
  flex-shrink: 1;
  min-width: 0;
}
.navbar .navbar-nav {
  flex-wrap: wrap;
}

/* モバイル微調整 */
@media (max-width: 575.98px) {
  .brand-logo {
    height: 28px;
  }
  .navbar-brand {
    padding-top: 0.2rem;
    padding-bottom: 0.2rem;
  }
}

@media (min-width: 992px) {
  .brand-4lines {
    font-size: 0.84rem; /* ← PCだけ小さめに */
    line-height: 1.12;
    font-weight: 500; /* ← 軽いウエイトで薄字 */
    color: var(--muted, #64748b); /* ← 少し淡い色 */
  }
  /* 1行目だけは読みやすさ確保のため少しだけ強め */
  .brand-4lines .l1 {
    font-weight: 400; /* 300→400で控えめに強調 */
    color: inherit;
  }
}
/* ── スマホ/タブレットも薄字に（～991.98px） ── */
@media (max-width: 991.98px) {
  .brand-4lines {
    font-weight: 300; /* 薄字 */
    color: var(--muted, #64748b); /* 淡い文字色 */
  }
  .brand-4lines .l1 {
    font-weight: 400; /* 1行目だけ少し強め */
  }
}

@media (max-width: 991.98px) {
  .navbar {
    position: relative;
  }
  .navbar-toggler {
    position: absolute;
    right: 1rem;
    top: 0.5rem;
    margin: 0;
  }
  /* トグラー分の余白をブランド側に確保 */
  .navbar-brand {
    padding-right: 3rem;
  }
}

.hero-section {
  position: relative;
  min-height: 600px;
  display: flex;
  justify-content: center;
  overflow: hidden;
}

/* 背景レイヤー：要素ごとゆっくり横にスライド */
.hero-section::before {
  content: "";
  position: absolute;
  inset: -2% -6%; /* ← ほんの少し外側まで広げて縁切れ防止 */
  z-index: 0;
  background: url("/img/top_bg.png") center center / cover no-repeat;
  filter: blur(2px);
  will-change: transform; /* スムーズ化 */
  transform: translateZ(0) translateX(0);
  animation: bgPanTransform 30s linear infinite alternate; /* なめらか・往復 */
}

/* 前景は前面 */
.hero-section > * {
  position: relative;
  z-index: 1;
}

/* 擬似要素自体を左右にゆっくり動かす */
@keyframes bgPanTransform {
  0% {
    transform: translateZ(0) translateX(-3%);
  }
  100% {
    transform: translateZ(0) translateX(3%);
  }
}

/* スマホは少しだけ抑えめ＆さらにゆっくり */
@media (max-width: 767.98px) {
  .hero-section {
    min-height: 420px;
  }
  .hero-section::before {
    inset: -3% -8%;
    animation-duration: 100s;
  }
}

/* 人物画像を下端に固定 */
.hero-section img {
  position: absolute;
  bottom: 0;
  /* ← これで下に貼り付く */
  left: 50%;
  transform: translateX(-50%);
  height: auto;
  max-width: none;
  max-height: none;
  display: block;
  z-index: 1;
}

/* テキスト前面 */
.hero-section .hero-content {
  position: relative;
  z-index: 2;
  text-align: center;
}

/* スマホ時 */
@media (max-width: 767.98px) {
  .hero-section {
    min-height: 420px;
  }

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

/* ===== 共通（PC基準） ===== */
.top_h1 {
  font-family: "Noto Serif JP", "Hiragino Mincho ProN", "Yu Mincho", "游明朝",
    "MS PMincho", serif;
  font-weight: 900;
  line-height: 1.18;
  letter-spacing: 0.01em;
  font-size: 5.2rem;
  /* ← PCではこれで固定 */
  margin: 50px 0 0 0;
  text-align: left;
  width: 520px;
}

.top_lead {
  font-family: "Noto Serif JP", "Hiragino Mincho ProN", "Yu Mincho", "游明朝",
    "MS PMincho", serif;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 0.02em;
  font-size: 2.5rem;
  /* ← PCではこれで固定 */
  margin-top: 0.5rem;
  text-align: left;
}

.top_h1,
.top_lead {
  color: #fff;
  text-shadow: 0 0 2px rgba(0, 0, 0, 0.9),
    /* 細い濃い縁取り */ 0 3px 6px rgba(0, 0, 0, 0.7),
    0 8px 16px rgba(0, 0, 0, 0.5);
}

/* ===== スマホ用調整 ===== */
@media (max-width: 767.98px) {
  .top_h1 {
    font-size: 40px;
    /* ← 小さめに */
    margin-top: 2rem;
  }

  .top_lead {
    font-size: 20px;
    /* ← 小さめに */
    margin-top: 0.25rem;
  }

  .hero-content {
    margin-top: -0.5rem;
    /* 全体の位置をちょっと上に */
  }
}

/* アニメーションの初期状態＋適用 */
.top_h1 {
  /* 既存の指定そのまま + これだけ置き換え */
  opacity: 0;
  transform: translateY(30px);
  animation: fadeUpGlow 2.2s ease-out 1.5s forwards;
  /* ← fadeUp → fadeUpGlow */
  position: relative;
  z-index: 3;
  /* 背景ぼかしより前へ */
}

.top_lead {
  opacity: 0;
  transform: translateY(40px);
  animation: fadeUpGlow 2.5s ease-out 2.5s forwards;
  /* ← fadeUp → fadeUpGlow */
  position: relative;
  z-index: 3;
}

/* （任意）動きに弱い人向けにオフ */
@media (prefers-reduced-motion: reduce) {
  .top_h1,
  .top_lead {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}

/* キーフレームを定義 */
@keyframes fadeUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* 光るアニメーション */
@keyframes fadeUpGlow {
  0% {
    opacity: 0;
    transform: translateY(30px);
    text-shadow: 0 0 0px rgba(255, 255, 255, 0);
  }

  60% {
    opacity: 1;
    transform: translateY(0);
    text-shadow: 0 0 12px rgba(255, 255, 255, 0.8);
  }

  100% {
    text-shadow: 0 0 4px rgba(255, 255, 255, 0.4);
  }
}

@keyframes fadeUpGlow {
  0% {
    opacity: 0;
    transform: translateY(30px);
    /* まずは弱い縁取りで背景に負けないようにする */
    text-shadow: 0 0 0 rgba(255, 255, 255, 0), 0 1px 2px rgba(0, 0, 0, 0.35);
    /* うっすら黒縁 */
  }

  60% {
    opacity: 1;
    transform: translateY(0);
    text-shadow: 0 0 14px rgba(255, 255, 255, 0.95),
      /* 発光 */ 0 1px 2px rgba(0, 0, 0, 0.35);
    /* 縁取り維持 */
  }

  100% {
    opacity: 1;
    /* ← 最終的に必ず見える */
    transform: translateY(0);
    text-shadow: 0 0 6px rgba(255, 255, 255, 0.55),
      0 1px 2px rgba(0, 0, 0, 0.35);
  }
}

/* 念のため重なり順を前面に */
.hero-content {
  position: relative;
  z-index: 2;
}

/* 画像の基準（あなたの下端固定用 transform と共存） */
.hero-figure {
  will-change: transform;
}

/* ゆっくり上下＆ごく僅かな拡大縮小 */
@keyframes breathe {
  0% {
    transform: translateX(-50%) translateY(0) scale(1);
  }

  50% {
    transform: translateX(-50%) translateY(-8px) scale(1.02);
  }

  100% {
    transform: translateX(-50%) translateY(0) scale(1);
  }
}

@keyframes riseIn {
  from {
    opacity: 0;
    transform: translateX(-50%) translateY(40px) scale(0.96);
  }

  to {
    opacity: 1;
    transform: translateX(-50%) translateY(0) scale(1);
  }
}

.anim-rise {
  opacity: 0;
  animation: riseIn 2.8s cubic-bezier(0.2, 0.7, 0.2, 1) 5s forwards;
  /* ↑ 時間2.8秒・開始0.6秒後 */
}

.hero {
  position: relative;
  background: linear-gradient(180deg, #ffffff 0%, #f7fbff 100%);
}

/* 各セクションの背景：.bg-white をIDで上書き */
#merit {
  background: var(--bg-ice) !important;
}
#services {
  background: var(--bg-white) !important;
}
#prices {
  background: var(--bg-ice) !important;
}
#flow {
  background: var(--bg-white) !important;
}
#faq {
  background: var(--bg-ice) !important;
}
#contact {
  background: var(--bg-white) !important;
}

/* セクション境界の“空気感”を出す薄い仕切り（任意） */
.section + .section {
  box-shadow: inset 0 1px 0 rgba(2, 8, 23, 0.04);
}

/* ガラス感を少しだけ明るく（任意） */
.glass {
  background: rgba(255, 255, 255, 0.85);
  border-color: rgba(15, 23, 42, 0.06);
  box-shadow: 0 10px 30px rgba(2, 8, 23, 0.06);
}

.badge-soft {
  background: #e0f2fe;
  color: #075985;
  border: 1px solid #bae6fd;
}

.check {
  color: #10b981;
}

.xmark {
  color: #ef4444;
}

.lead-strong {
  font-size: 1.15rem;
  color: #0f172a;
}

.section {
  padding: 72px 0;
}

.shadow-hover {
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.shadow-hover:hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 30px rgba(2, 8, 23, 0.12) !important;
}

.cta-floating {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1030;
  display: none;
  background: rgba(255, 255, 255, 0.95);
  border-top: 1px solid rgba(15, 23, 42, 0.08);
  backdrop-filter: blur(8px);
}

@media (max-width: 991.98px) {
  .cta-floating {
    display: block;
  }
  body {
    padding-bottom: 72px; /* CTAの高さに合わせて調整 */
  }
}

.timeline {
  position: relative;
  margin-left: 0.75rem;
  padding-left: 1.5rem;
}

.timeline:before {
  content: "";
  position: absolute;
  left: 10px;
  top: 0;
  bottom: 0;
  width: 2px;
  background: #e2e8f0;
}

.timeline .step {
  position: relative;
  margin-bottom: 1.25rem;
}

.timeline .step:before {
  content: "";
  position: absolute;
  left: -0.45rem;
  top: 0.25rem;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--brand);
  box-shadow: 0 0 0 3px #e0f2fe;
}

.price-badge {
  position: absolute;
  right: 1rem;
  top: 1rem;
}

.hero-cta .btn {
  min-width: 170px;
}

/* QRコード（120x120）を背景で表示：トリミングなし＝contain */
.qr {
  width: 120px;
  height: 120px;
  border-radius: 0.5rem;
  background: #f1f5f9 url("../img/qr.png") center/contain no-repeat;
  display: block;
}

.list-check li {
  margin: 0.25rem 0;
}

.resp-features {
  list-style: none;
  padding-left: 0;
  margin-bottom: 0;
}

.resp-features .ic {
  width: 1.25rem;
  display: inline-block;
  text-align: center;
}

.hero > * {
  position: relative;
  z-index: 2;
}

/* PCだけ画像＆オーバーレイを出す */
@media (min-width: 992px) {
  .hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: url("../img/bg01_pc.png");
    background-size: cover;
    background-position: right center;
    background-repeat: no-repeat;
    filter: blur(5px);
    transform: scale(1.04);
    z-index: 0;
  }

  .hero::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
        90deg,
        rgba(255, 255, 255, 0.93) 0%,
        rgba(255, 255, 255, 0.86) 40%,
        rgba(255, 255, 255, 0.34) 70%,
        rgba(255, 255, 255, 0.1) 100%
      ),
      radial-gradient(
        1200px 600px at 80% -10%,
        rgba(14, 165, 233, 0.12),
        transparent 70%
      ),
      radial-gradient(
        900px 500px at -10% 20%,
        rgba(2, 132, 199, 0.08),
        transparent 60%
      );
    z-index: 1;
  }
}

/* 代表：正方形・角丸サムネ */
.avatar-sq {
  width: 160px;
  height: 160px;
  border-radius: 16px;
  object-fit: cover;
  box-shadow: 0 6px 18px rgba(2, 8, 23, 0.12);
  border: 2px solid rgba(15, 23, 42, 0.06);
}

@media (min-width: 768px) {
  .avatar-sq {
    width: 200px;
    height: 200px;
  }
}

@media (min-width: 992px) {
  .avatar-sq {
    width: 240px;
    height: 240px;
  }
}

@media (min-width: 1200px) {
  .avatar-sq {
    width: 280px;
    height: 280px;
  }
}

.rep-card .pill {
  background: #e0f2fe;
  color: #0369a1;
  border: 1px solid #bae6fd;
  border-radius: 9999px;
  padding: 0.25rem 0.6rem;
  display: inline-block;
}

/* 引用アイコンをうっすら背景演出に（オプション） */
/* 代表あいさつ：文章のみカード */
/* 代表あいさつ：文章のみカード */
.rep-card {
  position: relative;
}

.rep-card::after {
  content: "”";
  position: absolute;
  right: 12px;
  bottom: -8px;
  font-size: 72px;
  line-height: 1;
  color: rgba(2, 8, 23, 0.06);
  font-family: ui-serif, Georgia, "Times New Roman", Times, serif;
  pointer-events: none;
}

.rep-card .lead-strong {
  font-size: 1.05rem;
  color: #0f172a;
}

/* 代表あいさつ：インパクト強めの装飾 */
.lead-hero {
  font-weight: 800;
  font-size: 1.35rem; /* MD以上で少し大きく */
  letter-spacing: 0.02em;
  display: inline-block;
  padding-bottom: 0.35rem;
  position: relative;
}
@media (min-width: 768px) {
  .lead-hero {
    font-size: 1.5rem;
  }
}
.lead-hero::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 6px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--brand), rgba(14, 165, 233, 0.15));
}

/* 強調ハイライト（下線マーカー） */
.hl {
  background: linear-gradient(transparent 60%, #e0f2fe 0);
  font-weight: 700;
}

/* チップの横並び（バッジ風） */
.pill-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 0.75rem;
  margin: 0.75rem 0 1.25rem;
}
.pill {
  background: #e0f2fe;
  color: #0369a1;
  border: 1px solid #bae6fd;
  border-radius: 9999px;
  padding: 0.38rem 0.7rem;
  font-size: 0.95rem;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}
.zero-badge {
  display: inline-grid;
  place-items: center;
  width: 1.35rem;
  height: 1.35rem;
  margin-left: 0.2rem;
  border-radius: 50%;
  font-size: 0.8rem;
  font-weight: 800;
  background: #fff;
  color: #0369a1;
  border: 1px solid #bae6fd;
}

/* プルクオート（決め台詞の帯） */
.pull-quote {
  position: relative;
  padding: 0.9rem 1rem 0.9rem 1.1rem;
  margin: 0.5rem 0 1.25rem;
  background: #f8fafc;
  border-left: 4px solid var(--brand);
  font-style: italic;
}
.pull-quote::before {
  content: "“";
  position: absolute;
  left: 0.4rem;
  top: 0.35rem;
  color: rgba(2, 8, 23, 0.15);
  font-size: 2rem;
  line-height: 1;
}

/* 代表カードの大きな閉じクオート（既存の演出を少し上に） */
.rep-card::after {
  bottom: -6px;
  right: 10px;
}

/* CTAバナー（違うパターン） */
.cta-banner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  padding: 0.85rem 1rem;
  margin: 0.5rem 0 1.25rem;
  background: #f0f9ff;
  border: 1px dashed #bae6fd;
  border-radius: 12px;
  color: #0369a1;
  font-weight: 700;
}

/* 「安心できるカタチ」強調（グラデ文字＋マーカ―下線） */
.hl-strong {
  position: relative;
  font-weight: 800;
}
.hl-strong::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0.02em;
  height: 0.55em;
  border-radius: 6px;
  background: linear-gradient(
    180deg,
    rgba(14, 165, 233, 0.28),
    rgba(14, 165, 233, 0.12)
  );
  z-index: -1;
}
.grad-text {
  background: linear-gradient(
    90deg,
    var(--brand) 0%,
    #38bdf8 50%,
    #0284c7 100%
  );
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* キーポイント：SP縦／PC横、ドット付き */
.keypoints {
  list-style: none;
  padding-left: 0;
  margin: 0.75rem 0 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}
.keypoints li {
  position: relative;
  padding-left: 1.1em;
  line-height: 1.5;
}
.keypoints li::before {
  content: "•";
  position: absolute;
  left: 0;
  top: 0.05em;
  font-size: 1.1em;
  line-height: 1;
  color: var(--brand);
}
.keypoints .zero {
  font-weight: 800;
  font-size: 1.125rem;
  letter-spacing: 0.02em;
}

/* PCは横並び（折返し可）、頭はそろえたまま */
@media (min-width: 992px) {
  .keypoints {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 1.75rem;
  }
  .keypoints li {
    margin: 0;
  }
}
/* 横並びステップ（md以上で表示） */
.flow-steps {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 1.25rem;
  position: relative;
  margin: 0;
  padding: 0;
  list-style: none;
}
.flow-steps::before {
  content: "";
  position: absolute;
  top: 26px; /* ドットの中心に合わせる */
  left: 0;
  right: 0;
  height: 2px;
  background: #e2e8f0; /* ライン */
}
.flow-steps li {
  text-align: center;
}
.flow-steps .dot {
  width: 52px;
  height: 52px;
  border-radius: 9999px;
  background: #e0f2fe;
  border: 1px solid #bae6fd;
  color: #0369a1;
  font-weight: 700;
  display: grid;
  place-items: center;
  margin: 0 auto 0.5rem;
  position: relative; /* ラインより上に */
  z-index: 1;
}
.flow-steps .label {
  font-weight: 700;
  line-height: 1.2;
}
.flow-steps .sub {
  color: var(--muted);
  font-size: 0.875rem;
}

/* 表示切替：スマホ=縦（既存.timelineを使用）、md以上=横 */
.flow-steps-wrap {
  display: none;
}
@media (min-width: 768px) {
  .timeline-wrap {
    display: none;
  }
  .flow-steps-wrap {
    display: block;
  }
}

/* --- SPタイムラインのアイコン被り対策（768px未満） --- */
@media (max-width: 767.98px) {
  .timeline {
    margin-left: 0; /* 余計な左余白をリセット */
    padding-left: 2.25rem; /* ドットぶん＋余裕を確保（2.0〜2.5remで調整可） */
  }
  .timeline:before {
    left: 12px; /* 縦ラインの位置 */
  }
  .timeline .step {
    position: relative;
    margin-bottom: 1.1rem; /* 各行の間隔を少し広めに */
  }
  .timeline .step:before {
    left: 0; /* もともとの -.45rem をやめて被り防止 */
    top: 0.4rem; /* 見出しの行高さに合わせる（.35〜.5remで微調整可） */
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--brand);
    box-shadow: 0 0 0 3px #e0f2fe; /* 視認性はキープ */
  }
}

/* HERO：1つに統合（背景＋はみ出し処理） */
.hero {
  position: relative;
  overflow: hidden;
  background: linear-gradient(180deg, #ffffff 0%, #f7fbff 100%);
}
.hero > * {
  position: relative;
  z-index: 2;
}

/* PCだけ画像＆オーバーレイ */
@media (min-width: 992px) {
  .hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: url("../img/bg01_pc.png");
    background-size: cover;
    background-position: right center;
    background-repeat: no-repeat;
    filter: blur(5px);
    transform: scale(1.04);
    z-index: 0;
  }
  .hero::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
        90deg,
        rgba(255, 255, 255, 0.93) 0%,
        rgba(255, 255, 255, 0.86) 40%,
        rgba(255, 255, 255, 0.34) 70%,
        rgba(255, 255, 255, 0.1) 100%
      ),
      radial-gradient(
        1200px 600px at 80% -10%,
        rgba(14, 165, 233, 0.12),
        transparent 70%
      ),
      radial-gradient(
        900px 500px at -10% 20%,
        rgba(2, 132, 199, 0.08),
        transparent 60%
      );
    z-index: 1;
  }
}

/* feature-icon：サイズ指定＋“明るめ”背景を1本化 */
.feature-icon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  background: #eaf6ff; /* ← 明るい下地を採用 */
  color: #0369a1;
  border: 1px solid #dff0ff; /* うっすら縁（任意） */
}

/* rep-card の見出し強調：どちらか1つだけ残す想定 → これを採用 */
.rep-card .lead-strong {
  font-size: 1.05rem;
  color: #0f172a;
}

/* =========================
   1) パレットを緑系に
   ========================= */
:root {
  --brand: #10b981; /* emerald-500 */
  --brand-dark: #059669; /* emerald-600 */
  --ink: #0f172a;
  --muted: #64748b;
  --bg: #f8fafc;

  --bg-white: #ffffff;
  --bg-ice: #f4fbf7; /* ← “ほんのり緑”の淡色に変更 */
}

/* =========================
   2) HERO を緑グラデに
   ========================= */
.hero {
  position: relative;
  overflow: hidden;
  background: linear-gradient(180deg, #ffffff 0%, #f4fbf7 100%);
}
.hero > * {
  position: relative;
  z-index: 2;
}

@media (min-width: 992px) {
  .hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background: url("../img/bg01_pc.png") right center/cover no-repeat;
    filter: blur(5px);
    transform: scale(1.04);
    z-index: 0;
  }
  .hero::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(
        90deg,
        rgba(255, 255, 255, 0.93) 0%,
        rgba(255, 255, 255, 0.86) 40%,
        rgba(255, 255, 255, 0.34) 70%,
        rgba(255, 255, 255, 0.1) 100%
      ),
      radial-gradient(
        1200px 600px at 80% -10%,
        rgba(16, 185, 129, 0.12),
        transparent 70%
      ),
      radial-gradient(
        900px 500px at -10% 20%,
        rgba(4, 150, 105, 0.08),
        transparent 60%
      );
  }
}

/* 各セクション背景（マッピングはそのまま） */
#merit,
#prices,
#faq {
  background: var(--bg-ice) !important;
}

/* =========================
   3) コンポーネントの緑化
   ========================= */
/* 明るめ緑のアイコンバッジ */
.feature-icon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  background: #e8fff3; /* mint */
  color: #047857; /* emerald-700 */
  border: 1px solid #d1fae5;
}

/* 強調下線の色味（マーカー） */
.hl {
  background: linear-gradient(transparent 60%, #dcfce7 0); /* 淡い緑 */
  font-weight: 700;
}

/* 「安心できるカタチ」文字グラデ */
.grad-text {
  background: linear-gradient(90deg, #10b981 0%, #34d399 50%, #059669 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
/* 下地マーカーも緑寄りに */
.hl-strong::after {
  background: linear-gradient(
    180deg,
    rgba(16, 185, 129, 0.28),
    rgba(16, 185, 129, 0.12)
  );
}

/* チップ/バッジ風 */
.pill {
  background: #e8fff3;
  color: #047857;
  border: 1px solid #d1fae5;
  border-radius: 9999px;
  padding: 0.38rem 0.7rem;
  font-size: 0.95rem;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}
.zero-badge {
  display: inline-grid;
  place-items: center;
  width: 1.35rem;
  height: 1.35rem;
  margin-left: 0.2rem;
  border-radius: 50%;
  font-size: 0.8rem;
  font-weight: 800;
  background: #fff;
  color: #047857;
  border: 1px solid #d1fae5;
}

/* CTAバナー（やわらかミント） */
.cta-banner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  padding: 0.85rem 1rem;
  margin: 0.5rem 0 1.25rem;
  background: #ecfdf5;
  border: 1px dashed #a7f3d0;
  border-radius: 12px;
  color: #047857;
  font-weight: 700;
}

/* タイムラインのドット外周色も緑に寄せる */
.timeline .step:before {
  background: var(--brand);
  box-shadow: 0 0 0 3px #dcfce7;
}

/* ガラスカードは少しだけ軽く（そのままでもOK） */
.glass {
  background: rgba(255, 255, 255, 0.9);
  border-color: rgba(15, 23, 42, 0.06);
  box-shadow: 0 10px 30px rgba(2, 8, 23, 0.06);
}

.companion-img {
  width: 350px; /* 横幅固定 */
  height: 350px; /* 高さも同じで正方形 */
  object-fit: cover; /* トリミングして収める */
}

#flow-tiles {
  overflow: hidden;
}
/* タイルサイズはここ（--tile）で。ブレークポイントで調整も可 */
#flow-tiles .tile {
  width: var(--tile, 200px);
  aspect-ratio: 1 / 1;
  border-radius: 0.6rem;
  overflow: hidden;
  background: #f2f3f5;
  margin: 0 0.5rem; /* 左右両方に 0.5rem */
}

#flow-tiles .tile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* レーン／トラック */
#flow-tiles .marquee-row {
  --dur: 30s;
  padding: 0.35rem 0;
}

#flow-tiles .track {
  display: inline-flex; /* コンテンツ幅に追従 */
  white-space: nowrap; /* 折返し禁止でシームレスに */
  animation: marquee var(--dur) linear infinite;
}
#flow-tiles .reverse .track {
  animation-name: marquee-rev;
}

#flow-tiles .sequence {
  display: inline-flex;
  align-items: center;
}

/* 無限ループ：同じ並びを2連結した全体幅の“半分”だけ流す */
@keyframes marquee {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}
@keyframes marquee-rev {
  from {
    transform: translateX(-50%);
  }
  to {
    transform: translateX(0);
  }
}

/* 例：PCでタイルを少し大きくしたい場合 */
@media (min-width: 1200px) {
  #flow-tiles .tile {
    --tile: 220px;
  }
}

.avatar-sq {
  width: 180px; /* スマホ用の表示サイズ */
  height: auto; /* アスペクト比保持 */
  border-radius: 16px; /* 角丸 */
}
@media (min-width: 768px) {
  .avatar-sq {
    width: 240px;
  } /* タブレット以上 */
}
@media (min-width: 1200px) {
  .avatar-sq {
    width: 300px;
  } /* PC大きめ */
}

.hero {
  position: relative;
  overflow: hidden;
  /* 白からエメラルド〜濃緑へのグラデを少し軽く */
  background: linear-gradient(180deg, #f9fefc 0%, #6ee7b7 45%, #059669 100%);
}
.hero > * {
  position: relative;
  z-index: 2;
}

.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    /* 左→右フェード（前より白を強めに） */ linear-gradient(
      90deg,
      rgba(255, 255, 255, 0.92) 0%,
      rgba(255, 255, 255, 0.62) 35%,
      rgba(255, 255, 255, 0.2) 100%
    ),
    /* グローを少し薄め */
      radial-gradient(
        500px 320px at 85% -10%,
        rgba(5, 150, 105, 0.28),
        transparent 75%
      ),
    radial-gradient(
      420px 280px at -10% 40%,
      rgba(4, 120, 87, 0.18),
      transparent 60%
    );
}
.mascot-bg {
  position: absolute;
  right: 1rem;
  bottom: 0rem;
  width: 20%;
  height: auto;
  opacity: 0.12;
  pointer-events: none;
}

/* スマホ（～575.98px）だけ大きめ */
@media (max-width: 575.98px) {
  .mascot-bg {
    width: 32%; /* ← 少し大きめに調整 */
    right: 0.5rem; /* 余白も調整したい場合 */
  }
}

/* スマホだけさらに小さく */
@media (max-width: 575.98px) {
  .site-brand {
    font-size: 0.95rem;
  }
}

/* ===== Global Page Loader ===== */
#page-loader {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: grid;
  place-items: center;
  background: #08262c; /* トーンはサイトに合わせてOK */
  opacity: 1;
  transition: opacity 0.4s ease;
}
body.is-page-ready #page-loader {
  opacity: 0;
  pointer-events: none;
}

/* 上に出す要素のフェード（任意） */
.kv,
[data-fade] {
  opacity: 0;
  transition: opacity 0.5s ease;
}
body.is-page-ready .kv,
body.is-page-ready [data-fade] {
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  #page-loader,
  .kv,
  [data-fade] {
    transition: none !important;
  }
}