@charset "UTF-8";
/* =========================================================
   口腔内フローラPCR検査 LP 専用スタイル
   （共通 base: reset / common / style を読み込んだ後に適用）
   ========================================================= */

/* =========================================================
   PC専用 額装レイアウト（参考: BOTANIST型）
   1000px以上：固定背景＋中央500pxカラム＋左右固定パネル
   〜999px：従来のレスポンシブ／スマホ表示のまま
   ========================================================= */
.l-bg, .l-side { display: none; }

@media (min-width: 841px) {
  body { background: #1668d6; }
  .header { display: none; }          /* PCでは横長ヘッダーを隠す */

  .l-bg {
    display: block;
    position: fixed; inset: 0; z-index: 0;
    background: linear-gradient(150deg, #2594ff 0%, #1a72e6 52%, #0f52bf 100%);
  }
  .l-bg canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }

  /* 中央コンテンツカラム（スマホ実機が浮いてる風） */
  .l-contents {
    position: relative; z-index: 3;
    width: 500px;
    margin: 40px auto;                /* 上下に余白を持たせる */
    background: #fff;
    min-height: calc(100vh - 80px);
    overflow: hidden;                 /* 角丸内に収める */
    border-radius: 32px;              /* スマホ風の角丸 */
    box-shadow: 0 20px 60px rgba(28,67,112,.28);
  }
  /* 枠内では2カラム系を1カラムに整える */
  .l-contents .flex__wrapper.is-2col { flex-direction: column; }
  .l-contents .flex__wrapper.is-2col > .col-7,
  .l-contents .flex__wrapper.is-2col > .col-6,
  .l-contents .flex__wrapper.is-2col > .col-5 { flex-basis: 100%; max-width: 100%; min-width: 0; }
  .l-contents .access_iframe iframe { width: 100%; height: 320px; }
  /* 診療時間テーブルはカラム内に収め、横スクロールで全曜日を表示 */
  .l-contents .access_table_wrap { max-width: 100%; overflow-x: auto; }
  /* セクション見出しの装飾ラインをカラム幅に収める */
  .l-contents .section_title--line::before,
  .l-contents .section_title--line::after { width: 100%; }
  /* PCではセクション見出しを少し小さく（32→28px） */
  .l-contents .section_title__text { font-size: 28px !important; }

  /* 左右パネル共通 */
  .l-side {
    display: flex; flex-direction: column;
    position: fixed; top: 0; height: 100vh; z-index: 2;
    width: calc((100vw - 500px) / 2);
    box-sizing: border-box;
  }

  /* 左：ロゴ＋サービス名＋キャッチ */
  .l-side--left {
    left: 0; justify-content: center;
    padding: 40px clamp(20px, 3vw, 60px);
  }
  .l-side__logo {
    position: fixed; top: 30px; left: clamp(20px, 3vw, 60px);
    width: min(220px, 16vw);
  }
  .l-side__logo img { width: 100%; height: auto; display: block; }
  .l-side__copy { color: #ffffff; text-shadow: 0 1px 12px rgba(0,0,0,.18); }
  .l-side__service {
    font-size: clamp(26px, 2.6vw, 40px);
    font-weight: 900; line-height: 1.4; margin: 0 0 18px;
  }
  .l-side__service-pcr { color: #ffe27a; }
  .l-side__catch {
    font-size: clamp(17px, 1.6vw, 25px);
    font-weight: 700; line-height: 1.6; margin: 0 0 16px;
    border-left: 4px solid #ffe27a; padding-left: 14px;
  }
  .l-side__lead {
    font-size: 16px; font-weight: 700;
    line-height: 1.9; color: rgba(255,255,255,.88); margin: 0;
  }

  /* 右：CVパネル（大きめ・全て太字） */
  .l-side--right {
    right: 0; justify-content: center; align-items: center;
    padding: 40px clamp(10px, 1.6vw, 30px);
  }
  .l-side__cv {
    width: 100%; max-width: 360px; text-align: center;
    color: #fff; text-shadow: 0 1px 12px rgba(0,0,0,.18); font-weight: 700;
  }
  .l-side__cv-ttl { font-size: clamp(19px,1.5vw,23px); font-weight: 800; color: #fff; line-height: 1.5; margin: 0 0 14px; }
  .l-side__tel { display: block; font-size: clamp(26px,2.4vw,34px); font-weight: 900; color: #fff; text-decoration: none; line-height: 1.1; letter-spacing: .02em; }
  .l-side__hours { font-size: clamp(16px,1.1vw,18px); font-weight: 700; line-height: 1.7; color: rgba(255,255,255,.85); margin: 9px 0 18px; }
  .l-side__hours span { color: rgba(255,255,255,.66); font-size: 16px; font-weight: 700; }
  .l-side__line {
    display: flex; align-items: center; justify-content: center; gap: 9px;
    background: #06C755; color: #fff; text-decoration: none;
    border-radius: 999px; padding: 16px 14px; font-weight: 800; line-height: 1.25;
    white-space: nowrap;
    text-shadow: none;                 /* 親のtext-shadow継承を解除（チラつき防止） */
    box-shadow: 0 6px 16px rgba(0,0,0,.24);
    transition: transform .2s ease;
    animation: ctaFloat 2.8s ease-in-out infinite;   /* コンテンツCTAと同じ浮遊アニメ */
    will-change: transform;            /* GPUレイヤー化で文字のピクつき防止 */
    backface-visibility: hidden;
  }
  .l-side__line:hover { animation-play-state: paused; transform: translateY(-4px); }
  .l-side__line svg { width: 28px; height: 28px; flex: 0 0 auto; }
  .l-side__line small { display: block; font-size: 16px; font-weight: 700; white-space: nowrap; opacity: 1; margin-top: 3px; }
  .l-side__cv-note { font-size: clamp(16px,1.1vw,18px); font-weight: 700; color: #ffe27a; margin: 13px 0 0; }
}
/* 841〜1259px：左右パネルの中身は隠し、左上ロゴだけ残す（背景＋センターカラムは維持） */
@media (min-width: 841px) and (max-width: 1259px) {
  .l-side__copy { display: none; }
  .l-side--right { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .l-side__line { animation: none; }
}

:root {
  --flora-teal: #2594ff;     /* 善玉・クリーン */
  --flora-teal-d: #1565d8;
  --flora-navy: #1c4370;     /* ブランド */
  --flora-red: #e95513;      /* 悪玉・注意 */
  --flora-mint: #eef3fb;     /* やわらかい背景 */
  --flora-line: #d9e4f0;
}

.text_teal { color: var(--flora-teal) !important; }

/* ---- 共通：読みやすい本文ブロック ---- */
.flora-lead {
  max-width: 720px;
  margin: 0 auto;
}
.flora-lead p {
  font-size: 16px;
  line-height: 2;
  margin: 0 0 1em;
  color: var(--c-text);
}
.flora-lead p:last-child { margin-bottom: 0; }

.flora-subhead {
  text-align: center;
  font-size: 22px;
  font-weight: 700;
  margin: 50px 0 24px;
  position: relative;
  padding-bottom: 14px;
}
.flora-subhead::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  width: 48px;
  height: 3px;
  border-radius: 2px;
  background: var(--flora-teal);
}

.flora-note {
  font-size: 16px;
  line-height: 1.8;
  color: var(--c-muted);
  margin-top: 20px;
  text-align: center;
}

/* 強調リード（ピックアップ） */
.flora-pickup {
  margin: 36px auto 0;
  max-width: 680px;
  text-align: center;
  font-size: 19px;
  font-weight: 700;
  line-height: 1.9;
  color: var(--flora-navy);
  background: #fff;
  border: none;
  border-radius: 14px;
  padding: 24px 20px;
}

/* =========================================================
   1. ファーストビュー
   ========================================================= */
.flora-hero {
  position: relative;
  overflow: hidden;
  padding: 64px 0 72px;
  background:
    radial-gradient(120% 90% at 80% 0%, rgba(37,148,255,.18) 0%, rgba(37,148,255,0) 55%),
    linear-gradient(160deg, #f3f8ff 0%, #e9f2fd 55%, #e1ecfb 100%);
  text-align: center;
}
.flora-hero__inner {
  position: relative;
  z-index: 2;
  max-width: 760px;
}
.flora-hero__eyebrow {
  display: inline-block;
  font-size: 16px;
  font-weight: 800;
  letter-spacing: .12em;
  color: #fff;
  background: #2594ff;
  border: none;
  border-radius: 999px;
  padding: 8px 22px;
  margin: 0 0 22px;
}
.flora-hero__eyebrow .eyebrow-pcr { color: #ffe27a; }
.flora-hero__title {
  font-size: 40px;
  font-weight: 900;
  line-height: 1.45;
  color: var(--flora-navy);
  margin: 0 0 24px;
}
.flora-hero__title .em { color: var(--flora-teal-d); }
.flora-hero__lead {
  font-size: 16px;
  font-weight: 700;
  line-height: 1.95;
  color: #2a3a45;
  margin: 0 auto 16px;
  max-width: 640px;
}
.flora-hero__lead strong { font-weight: 800; }
.flora-hero__catch {
  font-size: 20px;
  font-weight: 700;
  line-height: 1.8;
  color: var(--flora-navy);
  margin: 28px auto 0;
  padding: 18px 22px;
  background: #fff;
  border-radius: 14px;
  display: inline-block;
}
.flora-hero__catch span {
  display: inline-block;
  margin-top: 6px;
  color: #2594ff;
  border-bottom: 3px solid #2594ff;
  padding-bottom: 2px;
}
.flora-hero__cta {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  margin-top: 34px;
}
.flora-hero__cta .access_btn { margin: 0; }

/* 浮遊する泡（装飾）— 縁ボーダー無し／ツヤ＋やわらか影で立体感 */
.flora-hero__bubbles { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.flora-hero__bubbles span {
  position: absolute;
  display: block;
  border-radius: 50%;
  background: radial-gradient(circle at 33% 28%,
    rgba(255,255,255,.95) 0%,
    rgba(255,255,255,.40) 32%,
    rgba(150,200,255,.16) 68%,
    rgba(37,148,255,.22) 100%);
  box-shadow:
    inset 4px 4px 10px rgba(255,255,255,.6),     /* ふくらみのハイライト */
    inset -5px -6px 12px rgba(37,148,255,.18),    /* 内側の陰 */
    0 8px 18px rgba(28,67,112,.14);               /* 外側のやわらかい影で浮かせる */
  /* 浮遊(margin-top)＋ポップ出現(scale) を別プロパティで競合させず両立 */
  animation:
    floatBubble 8s ease-in-out infinite,
    bubblePop .8s cubic-bezier(.34,1.56,.64,1) both;
}
/* つやの反射ハイライト */
.flora-hero__bubbles span::before {
  content: "";
  position: absolute;
  top: 16%; left: 20%;
  width: 30%; height: 30%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,.95) 0%, rgba(255,255,255,0) 70%);
}
/* 各バブル：サイズ/位置／浮遊(速さ・位相)／ポップ出現(バラバラの遅延) */
.flora-hero__bubbles span:nth-child(1){ width:64px;height:64px; left:6%;  top:18%; animation-duration:9s,.8s;   animation-delay:0s,.20s; }
.flora-hero__bubbles span:nth-child(2){ width:30px;height:30px; left:14%; top:62%; animation-duration:7.5s,.8s; animation-delay:1.2s,.55s; }
.flora-hero__bubbles span:nth-child(3){ width:46px;height:46px; right:9%; top:24%; animation-duration:8.5s,.8s; animation-delay:.6s,.35s; }
.flora-hero__bubbles span:nth-child(4){ width:22px;height:22px; right:16%;top:64%; animation-duration:7s,.8s;   animation-delay:2s,.90s; }
.flora-hero__bubbles span:nth-child(5){ width:38px;height:38px; left:48%; top:8%;  animation-duration:10s,.8s;  animation-delay:1.6s,1.15s; }
.flora-hero__bubbles span:nth-child(6){ width:18px;height:18px; right:30%;top:80%; animation-duration:6.5s,.8s; animation-delay:.3s,.45s; }
.flora-hero__bubbles span:nth-child(7){ width:52px;height:52px; left:30%; top:40%; animation-duration:9.5s,.8s; animation-delay:.9s,.70s; }
.flora-hero__bubbles span:nth-child(8){ width:14px;height:14px; left:38%; top:74%; animation-duration:6s,.8s;   animation-delay:2.4s,1.35s; }
.flora-hero__bubbles span:nth-child(9){ width:26px;height:26px; right:40%;top:14%; animation-duration:8s,.8s;   animation-delay:1.9s,1.0s; }
.flora-hero__bubbles span:nth-child(10){ width:34px;height:34px; left:4%;  top:46%; animation-duration:8.8s,.8s; animation-delay:.5s,.28s; }
.flora-hero__bubbles span:nth-child(11){ width:20px;height:20px; right:6%; top:54%; animation-duration:7.2s,.8s; animation-delay:1.3s,1.5s; }
.flora-hero__bubbles span:nth-child(12){ width:42px;height:42px; right:22%;top:42%; animation-duration:9.2s,.8s; animation-delay:.2s,.60s; }
.flora-hero__bubbles span:nth-child(13){ width:16px;height:16px; left:22%; top:30%; animation-duration:6.8s,.8s; animation-delay:2.1s,1.25s; }
.flora-hero__bubbles span:nth-child(14){ width:28px;height:28px; left:60%; top:70%; animation-duration:8.3s,.8s; animation-delay:1s,.82s; }
@keyframes floatBubble {
  0%,100% { margin-top: 0; }
  50%     { margin-top: -16px; }
}
@keyframes bubblePop {
  from { opacity: 0; transform: scale(.2); }
  to   { opacity: 1; transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  .flora-hero__bubbles span { animation: none; }
}
@media (prefers-reduced-motion: reduce) {
  .flora-hero__bubbles span { animation: none; }
}

/* ゴーストボタン（サブCTA） */
.access_btn--ghost {
  background: #fff;
  color: var(--flora-navy) !important;
  border: 2px solid var(--flora-navy);
  box-shadow: none;
}
.access_btn--ghost span { color: var(--flora-navy); }

/* =========================================================
   2. わかること リスト
   ========================================================= */
.flora-know {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 14px;
  max-width: 720px;
  margin-inline: auto;
}
.flora-know li {
  display: flex;
  align-items: stretch;
  background: #fff;
  border: 1px solid var(--flora-line);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 14px rgba(28,67,112,.05);
}
.flora-know__label {
  flex: 0 0 38%;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-weight: 700;
  font-size: 16px;
  line-height: 1.5;
  color: #fff;
  background: #2594ff;
  padding: 16px 12px;
}
.flora-know__desc {
  flex: 1;
  display: flex;
  align-items: center;
  font-size: 16px;
  line-height: 1.8;
  padding: 16px 16px;
}

/* =========================================================
   4. 全身の関係 チップ
   ========================================================= */
.flora-body-map {
  list-style: none;
  margin: 28px auto;
  padding: 0;
  max-width: 480px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.flora-body-map li {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  aspect-ratio: 1 / 1;             /* 正方形の均等ボックス */
  font-size: 16px;
  font-weight: 700;
  line-height: 1.4;
  color: #2594ff;
  background: #e1ecfb;
  border-radius: 30px;
  padding: 8px;
}

/* =========================================================
   5. 菌カード
   ========================================================= */
.germ-cards {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 25px;
}
.germ-cards .germ-card:nth-child(5) {
  grid-column: 1 / -1;
}
.germ-card {
  background: #fff;
  border: 2px solid var(--flora-red);   /* 赤線をぐるり一周 */
  border-radius: 12px;
  padding: 20px 18px;
}
.germ-card__head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}
.germ-card__no {
  flex: 0 0 auto;
  width: 38px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  font-weight: 800;
  color: #fff;
  background: var(--flora-red);
  border-radius: 50%;
  font-family: "Noto Serif JP", serif;
}
.germ-card__name {
  font-size: 18px;
  font-weight: 800;
  color: var(--flora-navy);
  margin: 0;
  line-height: 1.3;
  font-style: italic;
}
.germ-card__desc {
  font-size: 16px;
  line-height: 1.7;
  margin: 0 0 14px;
}
.germ-card__rel {
  background: var(--flora-mint);
  border-radius: 10px;
  padding: 12px 14px;
}
.germ-card__rel-label {
  display: block;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: .04em;
  color: var(--flora-teal-d);
  margin-bottom: 5px;
}
.germ-card__rel p {
  font-size: 16px;
  line-height: 1.7;
  margin: 0;
}

/* =========================================================
   検査結果イメージ（5段階リスク）
   ========================================================= */
.result-card {
  max-width: 640px;
  margin: 0 auto;
  background: none;
  border: none;
  padding: 0;
  box-shadow: none;
  text-align: center;        /* 「検査結果イメージ」を中央に */
}
.result-card__caption {
  display: inline-block;
  font-size: 16px;
  font-weight: 800;
  letter-spacing: .06em;
  color: #fff;
  background: var(--flora-navy);
  border-radius: 6px;
  padding: 5px 14px;
  margin: 0;
}
.result-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.result-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 14px 0;
  border-bottom: 1px dashed var(--flora-line);
}
.result-row:last-child { border-bottom: none; }
.result-row__name {
  font-size: 16px;
  font-weight: 800;
  color: var(--flora-navy);
  font-style: italic;
  line-height: 1.3;
}
.result-row__name small {
  display: block;
  font-style: normal;
  font-weight: 600;
  font-size: 16px;
  color: var(--c-muted);
  margin-top: 3px;
}
/* リスク表示：ドットメーター＋数値 */
.result-row__risk {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.result-row__dots { display: inline-flex; gap: 5px; }
.result-row__dots i {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #e3e9ec;
  display: block;
}
.result-row__num {
  min-width: 2.8em;
  text-align: right;
  font-size: 19px;
  font-weight: 900;
  line-height: 1;
  color: #9aa7b0;
  font-style: normal;
}
.result-row__num small { font-size: 12px; font-weight: 700; opacity: .65; }

/* リスクレベルで色分け（低=青 / 中=アンバー / 高=赤） */
.result-row[data-risk="1"] .result-row__dots i.on,
.result-row[data-risk="2"] .result-row__dots i.on { background: #2594ff; }
.result-row[data-risk="3"] .result-row__dots i.on { background: #e0a52f; }
.result-row[data-risk="4"] .result-row__dots i.on,
.result-row[data-risk="5"] .result-row__dots i.on { background: var(--flora-red); }
.result-row[data-risk="1"] .result-row__num,
.result-row[data-risk="2"] .result-row__num { color: #2594ff; }
.result-row[data-risk="3"] .result-row__num { color: #d6951f; }
.result-row[data-risk="4"] .result-row__num,
.result-row[data-risk="5"] .result-row__num { color: var(--flora-red); }

/* 凡例：色の意味（低・中・高）を明示 */
.result-card__legend {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--flora-line);
}
.result-lv {
  font-size: 13px;
  font-weight: 800;
  color: #fff;
  border-radius: 999px;
  padding: 5px 14px;
}
.result-lv--low { background: #2594ff; }
.result-lv--mid { background: #e0a52f; }
.result-lv--high { background: var(--flora-red); }

/* =========================================================
   6. こんな方におすすめ
   ========================================================= */
.reco-list {
  list-style: none;
  overflow: hidden;          /* 右からのスライド時の横はみ出し防止 */
  margin: 0;
  padding: 0;
  display: grid;
  gap: 14px;
  max-width: 720px;
  margin-inline: auto;
}
.reco-item {
  background: #fff;
  border: 1px solid var(--flora-line);
  border-left: 5px solid var(--flora-teal);
  border-radius: 10px;
  padding: 18px 20px;
}
.reco-item__q {
  position: relative;
  font-size: 16.5px;
  font-weight: 800;
  color: var(--flora-navy);
  margin: 0 0 8px;
  padding-left: 30px;
}
.reco-item__q::before {
  content: "✓";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  color: #fff;
  background: var(--flora-teal);
  border-radius: 50%;
}
.reco-item__a {
  font-size: 16px;
  line-height: 1.8;
  margin: 0;
  color: #41525c;
}

/* =========================================================
   8. 検査後のアプローチ
   ========================================================= */
.approach {
  display: grid;
  gap: 40px;
  margin-top: 40px;
}
.approach__card {
  position: relative;
  background: #fff;
  border: 1px solid var(--flora-line);
  border-radius: 16px;
  padding: 40px 26px 28px;
  box-shadow: 0 8px 24px rgba(28,67,112,.07);
}
.approach__badge {
  position: absolute;
  top: -14px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 16px;
  font-weight: 800;
  letter-spacing: .04em;
  color: #fff;
  background: var(--flora-navy);
  border-radius: 999px;
  padding: 6px 18px;
  white-space: nowrap;
}
.approach__ttl {
  font-size: 22px;
  font-weight: 800;
  line-height: 1.4;
  margin: 0 0 18px;
  text-align: center;
}
.approach__img {
  margin: 0 0 18px;
  border-radius: 12px;
  overflow: hidden;
}
.approach__img img {
  width: 100%;
  height: auto;
  display: block;
}
.approach__text p {
  font-size: 16px;
  line-height: 1.95;
  margin: 0 0 1em;
}
.approach__text p:last-child { margin-bottom: 0; }

/* =========================================================
   9. 検査の流れ
   ========================================================= */
.flora-flow {
  max-width: 640px;
  margin: 0 auto;
  position: relative;
}
.flora-flow__step {
  position: relative;
  display: flex;
  gap: 18px;
  padding: 0 0 28px 0;
}
.flora-flow__step::before {
  content: "";
  position: absolute;
  left: 23px;
  top: 48px;
  bottom: -4px;
  width: 2px;
  background: rgba(37,148,255,.35);
  transform: scaleY(0);                 /* 視界に入ったら下へ描画 */
  transform-origin: top center;
  transition: transform 0.7s cubic-bezier(.22,.61,.36,1);
  z-index: 0;
}
.flora-flow__step:last-child { padding-bottom: 0; }
.flora-flow__step:last-child::before { display: none; }
.flora-flow__step.is-line-active::before { transform: scaleY(1); }
.flora-flow__num {
  flex: 0 0 auto;
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 17px;
  font-weight: 800;
  color: #fff;
  background: #2594ff;
  border-radius: 50%;
  position: relative;
  z-index: 1;
}
.flora-flow__body {
  flex: 1;
  background: #fff;
  border: 1px solid var(--flora-line);
  border-radius: 12px;
  padding: 14px 18px;
}
.flora-flow__body strong {
  display: block;
  font-size: 17px;
  font-weight: 800;
  color: var(--flora-navy);
  margin-bottom: 4px;
}
.flora-flow__body p {
  font-size: 16px;
  line-height: 1.7;
  margin: 0;
  color: #41525c;
}

/* =========================================================
   10. 症例紹介
   ========================================================= */
.case {
  background: #fff;
  border: 1px solid var(--flora-line);
  border-radius: 16px;
  padding: 32px 26px;
  box-shadow: 0 8px 24px rgba(28,67,112,.06);
  max-width: 740px;
  margin: 0 auto;
}
.case__profile {
  font-size: 22px;
  font-weight: 800;
  text-align: center;
  margin: 0 0 20px;
  padding-bottom: 14px;
  border-bottom: 2px dashed var(--flora-line);
}
.case .flora-lead { margin-bottom: 24px; }
.case__photos {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-top: 8px;
}
.case__photos--2 { grid-template-columns: repeat(2, 1fr); }
.case__photo { margin: 0; }
.case__photo img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 10px;
  box-shadow: 0 3px 12px rgba(0,0,0,.14);
}
.case__photo-frame {
  aspect-ratio: 4 / 3;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-size: 16px;
  font-weight: 700;
  color: var(--c-muted);
  background:
    repeating-linear-gradient(45deg, #f4f7f9 0 12px, #eef2f5 12px 24px);
  border: 2px dashed #c4d2cf;
  border-radius: 10px;
  padding: 8px;
}
.case__photo figcaption {
  text-align: center;
  font-size: 16px;
  font-weight: 700;
  color: var(--flora-navy);
  margin-top: 8px;
}

/* --- 検査→対策→変化 ステップフロー --- */
.case-flow__profile {
  background: #fff;
  border: 1px solid var(--flora-line);
  border-left: 5px solid var(--flora-navy);
  border-radius: 12px;
  padding: 18px 20px;
  margin: 0 0 30px;
  box-shadow: 0 4px 16px rgba(28,67,112,.06);
}
.case-flow__person {
  font-size: 18px;
  font-weight: 800;
  color: var(--flora-navy);
  margin: 0 0 8px;
}
.case-flow__profile p:last-child {
  font-size: 16px;
  line-height: 1.8;
  color: #41525c;
  margin: 0;
}

.case-flow {
  list-style: none;
  margin: 0 0 8px;
  padding: 0;
}
.case-flow__step {
  position: relative;
  padding: 0 0 34px 64px;
}
/* ステップを縦に結ぶ線（視界に入ったら上から下へ描画） */
.case-flow__step::before {
  content: "";
  position: absolute;
  left: 23px;
  top: 8px;
  bottom: -6px;
  width: 2px;
  background: rgba(37,148,255,.35);
  transform: scaleY(0);
  transform-origin: top center;
  transition: transform 0.7s cubic-bezier(.22,.61,.36,1);
  z-index: 0;
}
.case-flow__step.is-line-active::before { transform: scaleY(1); }
.case-flow__step--last { padding-bottom: 0; }
.case-flow__step--last::before { display: none; }

.case-flow__head {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 12px;
}
.case-flow__num {
  position: absolute;
  left: 0;
  top: 0;
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  font-weight: 800;
  color: #fff;
  background: linear-gradient(135deg, #2594ff, #1565d8);
  border-radius: 50%;
  z-index: 1;
}
.case-flow__title {
  font-size: 19px;
  font-weight: 800;
  line-height: 1.45;
  color: var(--flora-navy);
  margin: 0;
}
.case-flow__desc {
  font-size: 16px;
  line-height: 1.85;
  color: #41525c;
  margin: 0 0 18px;
}
.case-flow__desc b { color: var(--flora-navy); font-weight: 800; }

.case-flow__block { margin-top: 22px; }
/* 写真・検査結果ブロックはステップ番号のインデントを打ち消して本文幅へ戻す */
.case-flow__step--last .case-flow__block { margin-left: -64px; }
.case-flow__label {
  display: inline-block;
  font-size: 14px;
  font-weight: 800;
  color: #fff;
  padding: 5px 16px;
  background: var(--flora-navy);
  border-radius: 999px;
  margin: 0 0 14px;
}
.case-flow__block .ba-list { margin-top: 16px; }

@media (max-width: 740px) {
  .case-flow__step { padding-left: 54px; padding-bottom: 30px; }
  .case-flow__step::before { left: 19px; }
  .case-flow__num { width: 40px; height: 40px; font-size: 17px; }
  .case-flow__title { font-size: 17px; }
  .case-flow__step--last .case-flow__block { margin-left: -54px; }
}

/* =========================================================
   12. クロージング
   ========================================================= */
.closing-block {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(120% 80% at 50% 0%, rgba(63,110,180,.12) 0%, rgba(63,110,180,0) 60%),
    linear-gradient(160deg, #f1f5fb 0%, #e6edf7 100%);
  text-align: center;
}
/* ノイズテクスチャ画像を重ねる（白地はmultiplyで透過し、粒だけブルーに乗る） */
.closing-block::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 1;
  mix-blend-mode: multiply;
  background: url("../images/noise.png") repeat left top / 250px 250px;
}
.closing-block .container {
  position: relative;
  z-index: 1;
}
.closing-block__title {
  font-size: 28px;
  font-weight: 900;
  line-height: 1.55;
  color: var(--flora-navy);
  margin: 0 0 26px;
}
.closing-block__lead {
  font-size: 16px;
  line-height: 1.95;
  color: #2a3a45;
  max-width: 680px;
  margin: 0 auto 14px;
}
.closing-block__lead:last-child { margin-bottom: 0; }

/* =========================================================
   スマホ最適化（最優先）
   ========================================================= */
@media (max-width: 740px) {
  .flora-hero {
    padding: 40px 0 48px;
  }
  .flora-hero__eyebrow { font-size: 16px; padding: 6px 16px; margin-bottom: 18px; }
  .flora-hero__title { font-size: 27px; line-height: 1.5; margin-bottom: 18px; }
  .flora-hero__lead { font-size: 16px; line-height: 1.9; }
  .flora-hero__catch { font-size: 16px; padding: 16px 18px; margin-top: 22px; }
  .flora-hero__cta { margin-top: 26px; width: 100%; }
  .flora-hero__cta .access_btn { width: 100%; }

  .flora-lead p { font-size: 16px; line-height: 1.95; }
  .flora-subhead { font-size: 19px; margin: 40px 0 20px; }
  .flora-pickup { font-size: 16px; padding: 20px 16px; }

  /* わかること：縦積み */
  .flora-know li { flex-direction: column; }
  .flora-know__label { flex-basis: auto; padding: 12px; font-size: 16px; }
  .flora-know__desc { padding: 14px; }

  .flora-body-map { gap: 20px; }
  .flora-body-map li { border-radius: 30px; }

  /* 菌カード：1カラム */
  .germ-cards { grid-template-columns: 1fr; gap: 25px; }
  .germ-cards .germ-card:nth-child(5) { grid-column: auto; }
  .germ-card { padding: 18px 16px; }
  .germ-card__name { font-size: 16.5px; }

  .reco-item__q { font-size: 16px; }

  .result-card { padding: 20px 16px 16px; }
  .result-row { flex-direction: column; align-items: flex-start; gap: 10px; }
  .result-row__dots i { width: 18px; height: 18px; }
  .result-card__legend { gap: 10px; flex-wrap: wrap; }

  .approach__card { padding: 34px 18px 24px; }
  .approach__ttl { font-size: 19px; }
  .approach__text p { font-size: 16px; }

  .flora-flow__num { width: 42px; height: 42px; font-size: 16px; }
  .flora-flow__step { gap: 14px; }
  .flora-flow__step::before { left: 20px; top: 44px; }
  .flora-flow__body { padding: 12px 14px; }
  .flora-flow__body strong { font-size: 16px; }

  .case { padding: 24px 18px; }
  .case__profile { font-size: 19px; }
  .case__photos { grid-template-columns: 1fr; gap: 20px; }
  .case__photos--2 { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .case__photo-frame { aspect-ratio: 16 / 9; }

  .closing-block__title { font-size: 22px; }
  .closing-block__lead { font-size: 16px; }
}

/* =========================================================
   最小フォント16px徹底（流用パーツの本文テキスト）
   ※ヘッダー/フッター/診療時間テーブルのグリッドは対象外
   ========================================================= */
.access_btn span { font-size: 15px; }   /* 下部固定ボタンに合わせる */
.access_btn__sub { font-size: 10px; }
.access_caption,
.access_hours,
.access_address_text,
.access_notes li { font-size: 16px; line-height: 1.8; }
.l-side__line span { font-size: clamp(18px, 1.45vw, 20px); font-weight: 800; white-space: nowrap; }   /* CV LINEボタン 主ラベル */

/* =========================================================
   セクションタイトル & 上下グラデバーを MV ブルー(#2594ff)に統一
   ========================================================= */
.section_title__text { color: #2594ff !important; }
.section_title--line::before,
.section_title--line::after {
  background: linear-gradient(to right, transparent, #2594ff 20%, #2594ff 80%, transparent) !important;
}

/* =========================================================
   セクション上部の半円ドーム「帽子」
   ========================================================= */
/* わかること：ドーム天井の全幅ブルーパネル */
#about { padding-bottom: 0 !important; }   /* パネルを下まで密着（py90の!importantに勝つ） */
.flora-know-panel {
  position: relative;
  overflow: hidden;                        /* ノイズをドーム形にクリップ */
  width: 100%;
  margin-top: 48px;                       /* ドーム上の隙間 */
  padding: 44px 0 60px;                    /* 見出しをドーム上に乗せる */
  background: linear-gradient(#dce8f7 0%, #cdddf2 60%);
  border-radius: 50% 50% 0 0 / 140px 140px 0 0;   /* やや正円寄りのドーム */
}
.flora-know-panel .flora-know { margin-top: 56px; }   /* カードはドームを越えて下へ */
/* ノイズ入りブルー（白地はmultiplyで透過し粒だけ乗る） */
.flora-know-panel::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 1;
  mix-blend-mode: multiply;
  background: url("../images/noise.png") repeat left top / 250px 250px;
}
.flora-know-panel > .container { position: relative; z-index: 1; }
.flora-know-panel .flora-subhead { margin: 28px 0 0; }   /* ドーム上で少し下げる */
@media (max-width: 740px) {
  .flora-know-panel {
    margin-top: 36px;
    padding: 34px 0 48px;
    border-radius: 50% 50% 0 0 / 104px 104px 0 0;
  }
  .flora-know-panel .flora-know { margin-top: 34px; }
}

/* 「定期検診だけでは…」見出しの上下バー＋文字をネイビー(#1c4370)に */
.section_title--dark.section_title--line::before,
.section_title--dark.section_title--line::after {
  background: linear-gradient(to right, transparent, #1c4370 20%, #1c4370 80%, transparent) !important;
}
.section_title--dark .section_title__text { color: #1c4370 !important; }

/* =========================================================
   背景ノイズ（汎用）— セクション背景にザラ感を重ねる
   ========================================================= */
.bg-noise { position: relative; }
.bg-noise::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 1;
  mix-blend-mode: multiply;
  background: url("../images/noise.png") repeat left top / 250px 250px;
}
.bg-noise > .container { position: relative; z-index: 1; }

.flora-note--left { text-align: left; }

/* 駅徒歩バー：改行させず画面幅に合わせて縮小 */
.hero__barText { white-space: nowrap; font-size: clamp(11px, 3.6vw, 16px); }

/* 地図キャプション：改行させず縮小 */
.access_caption { white-space: nowrap; font-size: clamp(10px, 3.2vw, 15px) !important; }

/* =========================================================
   MV：先生がキャッチボックスからニョキッと生える構図
   ========================================================= */
.hero-cta {
  position: relative;
  max-width: 460px;
  margin: 14px auto 0;
}
/* 先生：右寄せ・ボックスのradius分だけ左へ・下端をボックスに差し込み */
.hero-cta__doctor {
  display: block;
  margin-left: auto;
  margin-right: 16px;          /* = ボックスの border-radius 分 左へ */
  margin-bottom: -26px;        /* 下端をボックスに差し込んで“生えてる”感 */
  width: 39%;
  max-width: 165px;
  height: auto;
  position: relative;
  z-index: 1;
}
/* キャッチボックス（先生の手前） */
.hero-cta .flora-hero__catch {
  display: block;
  width: 100%;
  position: relative;
  z-index: 2;
  margin: 0;
}
/* 吹き出し：ボックス左端より外に出さない */
.hero-cta__bubble {
  position: absolute;
  left: 0;
  top: 22px;
  z-index: 3;
  width: max-content;
  max-width: min(64%, 290px);
  background: #fff;
  border-radius: 26px;
  padding: 16px 18px;
  font-family: var(--font);        /* ゴシック体 */
  font-size: 19px;                  /* 約1.2倍 */
  font-weight: 700;
  line-height: 1.7;
  color: var(--flora-navy);
  text-align: center;
  box-shadow: 0 8px 20px rgba(28,67,112,.12);
  animation: bubbleUp .7s cubic-bezier(.22,.61,.36,1) both;
  animation-delay: .35s;
}
@keyframes bubbleUp {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .hero-cta__bubble { animation: none; }
}
.hero-cta__bubble::after {
  content: "";
  position: absolute;
  left: calc(100% - 2px);
  right: auto;
  top: 50%;
  transform: translateY(-50%);
  width: 0; height: 0;
  border-top: 15px solid transparent;
  border-bottom: 15px solid transparent;
  border-right: 0;
  border-left: 28px solid #fff;     /* しっぽ（付け根はバブル右端の外側） */
  filter: drop-shadow(2px 0 1px rgba(28,67,112,.05));
}

/* MV吹き出し：スマホは文字を小さく＆しっぽ調整 */
@media (max-width: 740px) {
  .hero-cta__bubble { font-size: 15px; width: min(60%, 220px); padding: 13px 14px; border-radius: 20px; }
  .hero-cta__bubble::after { left: calc(100% - 2px); right: auto; border-top-width: 11px; border-bottom-width: 11px; border-right-width: 0; border-left-width: 21px; }
}

/* 見出し内の数字（オレンジ＋大きく） */
.section_title__text .ttl-num { color: #e95513; font-size: 1.5em; font-weight: 900; }

/* =========================================================
   検査結果シート：トランプを扇形に開く
   ========================================================= */
.result-fan {
  position: relative;
  margin: 22px calc(50% - 50vw) 6px;   /* コンテナ幅を超えてビューポート全幅 */
  width: 100vw;
  height: 380px;
  overflow: hidden;
}
.result-fan__card {
  position: absolute;
  left: 50%;
  bottom: 70px;                    /* 回転で潜る下の角の逃げ */
  width: min(50%, 200px);
  height: auto;
  box-shadow: 0 3px 12px rgba(0,0,0,.14);   /* かる〜くモノクロシャドウ */
  transform-origin: 50% 100%;
  transform: translateX(-50%);     /* JS未動作時の中央寄せフォールバック */
  will-change: transform, opacity; /* アニメのGPUレイヤー化 */
  backface-visibility: hidden;
}
/* 若い数字を最前面（左が最上段） */
.result-fan__card:nth-child(1) { z-index: 5; }
.result-fan__card:nth-child(2) { z-index: 4; }
.result-fan__card:nth-child(3) { z-index: 3; }
.result-fan__card:nth-child(4) { z-index: 2; }
.result-fan__card:nth-child(5) { z-index: 1; }
@media (max-width: 740px) {
  .result-fan { height: 330px; }
  .result-fan__card { width: min(48%, 180px); bottom: 60px; }
}

/* キャンペーンバッジ（オレンジ） */
.campaign-badge {
  display: inline-block;
  background: linear-gradient(135deg, #f5872a, #e95513);
  color: #fff;
  font-weight: 800;
  font-size: 15px;
  line-height: 1.4;
  letter-spacing: .02em;
  padding: 8px 20px;
  border-radius: 999px;
  margin-bottom: 16px;
}
.l-side__cv .campaign-badge { font-size: clamp(13px, 1vw, 15px); }

/* 電話番号は一旦非表示（LP全体） */
.l-side__tel,
.header__tel { display: none !important; }
/* スマホヘッダーの TEL/診療時間ブロックも非表示 */
.header__info { display: none !important; }

/* ヘッダー内キャンペーンバッジ（スマホヘッダーの電話番号位置） */
.header-campaign {
  margin: 0;
  font-size: 12px;
  line-height: 1.35;
  padding: 6px 14px;
  text-align: center;
}
@media (min-width: 841px) { .header-campaign { display: none; } }   /* PCはヘッダーごと非表示 */

/* =========================================================
   検査結果の変化（Before / After）
   ========================================================= */
.case__sub {
  text-align: center;
  font-size: 20px;
  font-weight: 800;
  margin: 36px 0 16px;
  position: relative;
  padding-bottom: 12px;
}
.case__sub::after {
  content: "";
  position: absolute;
  left: 50%; bottom: 0; transform: translateX(-50%);
  width: 44px; height: 3px; border-radius: 2px;
  background: #2594ff;
}
.ba-compare {
  display: grid;
  grid-template-columns: 1fr;   /* 1カラム＝大きく表示して読めるように */
  gap: 16px;
  max-width: 480px;
  margin: 0 auto;
}
.ba-compare__item {
  position: relative;
  margin: 0;
}
.ba-compare__item img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 8px;
  box-shadow: 0 3px 12px rgba(0,0,0,.14);
}
.ba-compare__label {
  position: absolute;
  top: 8px; left: 8px;
  font-size: 13px;
  font-weight: 800;
  color: #fff;
  padding: 3px 12px;
  border-radius: 999px;
  letter-spacing: .04em;
}
.ba-compare__label--before { background: #8a98a6; }
.ba-compare__label--after  { background: #e95513; }
.ba-lead {
  font-size: 16px;
  font-weight: 700;
  line-height: 1.85;
  color: var(--flora-navy);
  margin: 30px 0 24px;
}
.ba-list {
  list-style: none;
  margin: 0 0 12px;
  padding: 0;
  display: grid;
  gap: 16px;
}
.ba-list li {
  background: #fff;
  border-left: 4px solid #2594ff;
  border-radius: 8px;
  padding: 16px 18px;
  box-shadow: 0 2px 8px rgba(0,0,0,.06);
}
.ba-list b {
  display: block;
  font-size: 15px;
  color: var(--flora-navy);
  margin-bottom: 4px;
}
.ba-list span {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  font-size: 16px;
  font-weight: 700;
  color: #2a3a45;
}
.ba-list em {
  font-style: normal;
  font-size: 13px;
  font-weight: 800;
  color: #fff;
  background: #e95513;
  border-radius: 999px;
  padding: 2px 10px;
  white-space: nowrap;
}

/* Before/After 締めの一文 */
.ba-closing {
  text-align: center;
  font-size: 17px;
  font-weight: 700;
  line-height: 1.85;
  color: var(--flora-navy);
  margin: 28px 0 4px;
}