/* =========================================================
   AIC Snap Landing - FULL CSS (Clean / Stable)
   対象：.snap-root 配下のみ + AICヘッダー
========================================================= */
/* =========================
   LP 全体フォント統一
========================= */
.home-root,
.home-root *{
  font-family: "Noto Serif JP", serif !important;
}

/* =========================
   Variables
========================= */

/* 位置調整用（必要ならここだけ触る） */
:root{
  --aic-adminbar-h: var(--adminbar-h, 0px);
  --aic-header-h: var(--header-h, 88px);  /* header高さの実測に合わせてOK */
  --aic-fab-gap: 18px;
  --aic-fab-size: 86px;
  --aic-fab-right: clamp(16px, 2.2vw, 28px);
  --aic-fab-top-offset: 18px; /* ヘッダー下の余白 */
  --aic-fab-left-shift: 25px; /* “左に25px”＝右余白を増やす */
}

body.admin-bar{ --adminbar-h: 32px; }
@media (max-width: 782px){
  body.admin-bar{ --adminbar-h: 46px; }
}
/* =========================
   Floating FABs (page-global)
   - Headerを避ける
   - Firefoxでも落ちない(フォールバック付き)
   - Heroでは非表示（JSで制御する前提）
========================= */


.concept-fabs{
  position: fixed;
  right: calc(var(--aic-fab-right) + var(--aic-fab-left-shift));
  top: calc(var(--aic-adminbar-h) + var(--aic-header-h) + var(--aic-fab-top-offset));
  z-index: 9998; /* header(9999)より下でOK */

  flex-direction: column;
  gap: var(--aic-fab-gap);

  opacity: 1 !important;
  filter: none !important;

  /* 変なグレーの霞み(親のfilter/transform影響)を受けにくくする保険 */
  transform: translateZ(0);
  will-change: transform;
}

.concept-fab{
  width: var(--aic-fab-size);
  height: var(--aic-fab-size);
  border-radius: 999px;
  display: grid;
  place-items: center;
  text-align: center;
  text-decoration: none;

  box-shadow: 0 14px 30px rgba(0,0,0,.18);
  background-clip: padding-box;
}

.concept-fab__icon{
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .06em;
  opacity: .95;
}

.concept-fab__text{
  font-size: 11px;
  line-height: 1.2;
  margin-top: 6px;
}

/* 緑 */
.concept-fab--line{
  color: #fff;
  background: radial-gradient(circle at 30% 30%, #7ef0a2 0%, #2fd35f 45%, #16b84a 100%);
}

/* グレー（グラデが嫌なら “solid” に） */
.concept-fab--list{
  color: rgba(0,0,0,.70);
  /* ▼グラデ版 */
  /* background: radial-gradient(circle at 30% 30%, #f0f0f0 0%, #cfcfcf 55%, #b9b9b9 100%); */
  /* ▼フラット版（おすすめ） */
  background: #e6e6e6;
}

/* ▼スクロール操作の邪魔をしない保険
   wrapperはクリック無効、ボタンだけクリック有効 */
.concept-fabs{ pointer-events: none; }
.concept-fabs .concept-fab{ pointer-events: auto; }

/* -------------------------
   表示/非表示（Heroでは消す）
   JSが body に .is-after-hero を付けたら表示
------------------------- */
.concept-fabs{ display: none; }
body.is-after-hero .concept-fabs{ display: flex; }

/* SPはサイズ少し小さくして安全に */
@media (max-width: 900px){
  :root{
    --aic-fab-size: 74px;
    --aic-fab-gap: 14px;
    --aic-fab-left-shift: 18px;
  }
}



/* =========================
   Snap Root (scroll container)
========================= */
.snap-root{
  height: calc(100vh - var(--header-h) - var(--adminbar-h));
  min-height: calc(100vh - var(--header-h) - var(--adminbar-h));
  overflow-y: auto;
  overflow-x: hidden;

  -webkit-overflow-scrolling: touch;
  overscroll-behavior-y: contain;

  /* ★スナップ復活 */
  scroll-snap-type: y mandatory;

  /* ★ヘッダー分を考慮（スナップのズレ・詰まり防止） */
  scroll-padding-top: calc(var(--header-h) + var(--adminbar-h));

  /* ★FF安定用 */
  scrollbar-gutter: stable;

  position: relative;
}

.snap-root .snap-section{
  min-height: 100%;
  height: auto;

  scroll-snap-align: start;
  scroll-snap-stop: always;

  /* ★ヘッダー分を考慮（スナップ先頭が隠れない） */
  scroll-margin-top: calc(var(--header-h) + var(--adminbar-h));

  display: grid;
  place-items: center;

  padding: clamp(24px, 6vh, 64px) 0;
  box-sizing: border-box;
}

/* 中身：80%枠 */
.snap-root .snap-inner{
  width: var(--snap-content-w);
  max-width: var(--snap-content-max);
  padding: 0;
  box-sizing: border-box;
}

/* 仮の見え方（必要なら削除OK） */
.snap-root .snap-title{
  font-size: clamp(28px, 3vw, 44px);
  letter-spacing: 0.02em;
  margin: 0 0 12px;
}
.snap-root .snap-lead{
  font-size: clamp(14px, 1.2vw, 18px);
  line-height: 1.9;
  margin: 0;
}

/* =========================
   Hide Theme Header (front page only)
   ※クラス名が違う場合はここに追加
========================= */
body.home .site-header,
body.front-page .site-header,
body.home .oops-header,
body.front-page .oops-header,
body.home header.header,
body.front-page header.header,
body.home #header,
body.front-page #header{
  display: none !important;
}

/* =========================
   Custom Header (AIC)
========================= */
.aic-header, .aic-header *{ box-sizing: border-box; }

.aic-header{
  position: sticky;
  top: var(--adminbar-h); /* 管理バー分だけ下げる */
  left: 0;
  right: 0;
  width: 100%;
  background: #fff;
  z-index: 9999;
  border-bottom: 1px solid rgba(0,0,0,.06);
}

.aic-header__inner{
  width: var(--snap-content-w);
  max-width: var(--snap-content-max);
  margin: 0 auto;

  min-height: var(--header-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
}

/* 左：ロゴ */
.aic-brand{
  display: flex;
  align-items: center;
  min-width: 0;
}
.aic-brand__logo{
  display: block;
  height: 48px;
  width: auto;
  max-width: 100%;
}
@media (max-width: 900px){
  .aic-brand__logo{ height: 40px; }
}

/* 中央：ナビ */
.aic-nav{
  display: flex;
  align-items: center;
  gap: 34px;
  justify-content: center;
  flex: 1;
}
.aic-nav__item{
  text-decoration: none;
  color: rgba(0,0,0,.78);
  font-size: 14px;
  letter-spacing: .02em;
  white-space: nowrap;
}
.aic-nav__item:hover{ color: rgba(0,0,0,.95); }

/* 右：LINEボタン */
.aic-cta{ flex: 0 0 auto; }
.aic-linebtn{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 18px;
  border-radius: 999px;
  text-decoration: none;
  color: #fff;
  background: linear-gradient(180deg, #37d66b, #11b35a);
  box-shadow: 0 10px 22px rgba(17,179,90,.25);
  white-space: nowrap;
}
.aic-linebtn__icon{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 999px;
  background: rgba(255,255,255,.18);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .06em;
}
.aic-linebtn__text{
  font-size: 16px;
  font-weight: 800;
  letter-spacing: .02em;
}
.aic-linebtn__arrow{
  font-size: 18px;
  opacity: .95;
  margin-left: 2px;
}

/* SP：いったんナビ非表示 */
@media (max-width: 900px){
  .aic-header__inner{ width: 92vw; min-height: 72px; }
  .aic-nav{ display: none; }
  .aic-linebtn__text{ font-size: 14px; }
}

/* =========================
   HERO SCROLL indicator
========================= */
.s-hero .hero-scroll{
  position: absolute;
  right: 24px;
bottom: clamp(72px, 10vh, 140px);
  z-index: 6;

  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;

  text-decoration: none;
  color: rgba(0,0,0,.55);
  font-family: "Noto Serif JP", serif;
  font-size: 12px;
  letter-spacing: 0.18em;
}
.s-hero .hero-scroll__text{
  font-size: 11px;
  letter-spacing: 0.32em;
  writing-mode: vertical-rl;
  color: rgba(0,0,0,.55);
}
.s-hero .hero-scroll__arrow{
  font-size: 16px;
  color: rgba(0,0,0,.55);
  animation: scrollArrow 1.8s ease-in-out infinite;
}
@keyframes scrollArrow{
  0%   { transform: translateY(0); opacity: .4; }
  50%  { transform: translateY(6px); opacity: .9; }
  100% { transform: translateY(0); opacity: .4; }
}
@media (max-width: 900px){
  .s-hero .hero-scroll{ display: none; }
}

/* ふわっと上下 */
@keyframes heroScrollFloat{
  0%, 100% { transform: translateY(0); opacity: .85; }
  50%      { transform: translateY(10px); opacity: 1; }
}

.s-hero .hero-scroll{
  animation: heroScrollFloat 1.6s ease-in-out infinite;
}

/* 動き苦手設定の人には止める */
@media (prefers-reduced-motion: reduce){
  .s-hero .hero-scroll{ animation: none; }
}


/* =========================
   HERO (2-column + layered right)
========================= */
.s-hero{
  position: relative;

  background-image: url("https://doubutsu.clinic/wp-content/uploads/2026/01/aa3597767e649f1e3881ddbd1bf9c570494c9742-scaled-e1768378117434.png");
  background-size: cover;
  background-position: center right;
  background-repeat: no-repeat;

  filter: saturate(0.95) contrast(0.98);
overflow: visible; /* まずこれ */
}

/* hero-inner：2カラム */
.s-hero .hero-inner{
  position: relative;
  z-index: 1;

  width: var(--snap-content-w);
  max-width: var(--snap-content-max);
  margin: 0 auto;

  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  column-gap: clamp(24px, 4vw, 64px);

  height: 100%;
}

/* 左：コピー */
.s-hero .hero-copy{
  text-align: left;
  align-self: start;

  padding-top: clamp(12px, 2vh, 28px);

  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

/* コピー typography */
.s-hero .hero-eyebrow{
  font-family: "Noto Serif JP", serif;
  font-size: 38px;
  font-weight: 400;
  margin: 0 0 12px;
  white-space: nowrap;
}
@media (max-width: 900px){
  .s-hero .hero-eyebrow{ white-space: normal; }
}

.s-hero .hero-lead{
  font-family: "Noto Serif JP", serif;
  font-size: 36px;
  font-weight: 400;
  margin: 0 0 20px;
}
.s-hero .hero-title{
  font-family: "Noto Serif JP", serif;
  font-size: 86px;
  font-weight: 500;
  line-height: 1.15;
  margin: 0;
}
.s-hero .hero-title .is-sub{ font-weight: 400; }

/* CTA + 注釈（コピー直下） */
.s-hero .hero-bottom{
  margin-top: 28px;
  max-width: 560px;
}

.hero-linebtn{
  display: inline-flex;
  align-items: center;
  gap: 12px;

  padding: 14px 26px;
  border-radius: 999px;
  background: linear-gradient(135deg, #2fd35f, #16b84a);

  color: #fff;
  font-weight: 600;
  text-decoration: none;
}
.hero-note{
  margin-top: 14px;
  font-size: 19px;
  line-height: 1.6;
  color: rgba(0,0,0,.55);

  max-width: 520px;
  white-space: nowrap;

  font-family: "Noto Serif JP", serif;
  font-weight: 400;
}

/* 右：先生 */
.s-hero .hero-doctor{
  position: relative;
  height: 100%;
  min-height: 620px;
  text-align: left;
  overflow: visible;
}

/* 監修ブロック：右上へ */
.s-hero .hero-supervisor{
  position: absolute;
  z-index: 5;

  /* ↓ ここが肝：右カラム(0.8fr)の左下あたりに置く */
left: clamp(680px, 58vw, 860px); /* これは一旦そのまま */
	transform: translateX(-290px); /* ← 左へ */
  bottom: clamp(40px, 10vh, 120px);

  max-width: 420px;
  text-align: left;
  pointer-events: none;
}


.s-hero .hero-supervisor p{ margin: 0; }

.s-hero .hero-supervisor__label{
  font-size: 21px;
  font-weight: 400;
  margin: 0 0 2px;
}
.s-hero .hero-supervisor__cert{
  font-size: 21px;
  font-weight: 400;
  margin: 0 0 10px;
}
.s-hero .hero-supervisor__name{
  font-size: 51px;
  font-weight: 700;
  line-height: 1.12;
  margin: 0 0 6px;
  letter-spacing: 0.02em;
  color: rgba(0,0,0,.86);
}
.s-hero .hero-supervisor__en{
  font-size: 18px;
  font-weight: 400;
  letter-spacing: 0.10em;
  opacity: 0.75;
}

/* 先生画像：下固定 */
.s-hero .hero-doctor-image{
  position: absolute;
  right: 0;
  bottom: 0;
  z-index: 2;
}
.s-hero .hero-doctor-image img{
  display: block;
  height: clamp(560px, 78vh, 920px);
  width: auto;
  max-width: none;

transform: translate(90px, 20px); /* ← -70px を -40px などにして“下げる” */
}

/* 中サイズ */
@media (max-width: 1200px){
  .s-hero .hero-eyebrow{ font-size: 32px; }
  .s-hero .hero-lead{ font-size: 30px; }
  .s-hero .hero-title{ font-size: 64px; }
  .s-hero .hero-supervisor__name{ font-size: 42px; }

  .s-hero .hero-doctor-image img{
    height: clamp(480px, 70vh, 900px);
  }
}

/* SP：1カラムで安全運用 */
@media (max-width: 900px){
  .s-hero{
    background-position: center;
  }
  .s-hero::before{
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
      180deg,
      rgba(255,255,255,0.92) 0%,
      rgba(255,255,255,0.85) 55%,
      rgba(255,255,255,0.65) 100%
    );
    z-index: 0;
  }

  .s-hero .hero-inner{
    grid-template-columns: 1fr;
    row-gap: 18px;
    height: auto;
  }

  .s-hero .hero-eyebrow{ font-size: 20px; }
  .s-hero .hero-lead{ font-size: 18px; }
  .s-hero .hero-title{ font-size: 40px; }

  .s-hero .hero-doctor{ position: static; min-height: 0; }
  .s-hero .hero-supervisor,
  .s-hero .hero-doctor-image{ position: static; transform: none; }

  .s-hero .hero-doctor-image{
    display: flex;
    justify-content: center;
  }
  .s-hero .hero-doctor-image img{
    max-width: 100%;
    height: clamp(240px, 36vh, 360px);
    transform: none;
  }

  .hero-note{ white-space: normal; font-size: 12px; }
}

/* =========================
   SEC-2 Concept
========================= */
#sec-2.s-concept{
  position: relative;
  background-image: url("http://doubutsu.clinic/wp-content/uploads/2026/01/ae54784b9b7b5a3885248015f3d3d12ed3022c7b.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* 白い幕
.s-concept::before{
  content:"";
  position:absolute;
  inset:0;
  background: rgba(255,255,255,.70);
  z-index: 0;
} */

/* セクション内の土台 */
.s-concept .concept-inner{
  position: relative;
  z-index: 1;
  padding: clamp(56px, 7vh, 90px) 0;
}

/* コピー */
.s-concept .concept-copy{
  max-width: 860px;
}

.s-concept .concept-kicker{
  font-family: "Noto Serif JP", serif;
  font-weight: 400;
  font-size: 36px;
  margin: 0 0 22px;
}
.s-concept .concept-head{
  font-family: "Noto Serif JP", serif;
  font-weight: 700;
  font-size: 36px;
  line-height: 1.8;
  margin: 0 0 34px;
}
.s-concept .concept-body{
  font-family: "Noto Serif JP", serif;
  font-weight: 400;
  font-size: 24px;
  line-height: 2.0;
  margin: 0;
  color: rgba(0,0,0,.70);
}



/* 右下：ドット（Concept系共通） */
.snap-section .snap-dots{
  position: absolute;
  right: clamp(12px, 2vw, 28px);
  bottom: clamp(12px, 2vw, 28px);
  display: grid;
  gap: 10px;
  z-index: 2;
}
.snap-section .snap-dots .dot{
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: rgba(0,0,0,.16);
  display: block;
}
.snap-section .snap-dots .dot.is-active{
  background: rgba(0,0,0,.75);
}

@media (max-width: 900px){
  .snap-section .concept-fab{ width: 72px; height: 72px; }
  .snap-section .snap-dots{ display:none; }
}

/* =========================
 SEC-3 Concept
========================= */
#sec-3.s-concept{
  position: relative;
  background-image: url("http://doubutsu.clinic/wp-content/uploads/2026/01/1cc9339d9c692093fb46f9e09f84b5160d00809b.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* =========================
   SEC-4 Empathy
========================= */
.s-empathy{
  position: relative;
  background-image: url("https://doubutsu.clinic/wp-content/uploads/2026/01/aa3597767e649f1e3881ddbd1bf9c570494c9742-scaled-e1768378117434.png");
  background-size: cover;
  background-position: center right;
  background-repeat: no-repeat;
}

/* 読みやすさ用に“薄い幕”
.s-empathy::before{
  content:"";
  position:absolute;
  inset:0;
  background: rgba(255,255,255,.72);
  z-index: 0;
}
 */
.s-empathy .empathy-inner{
  position: relative;
  z-index: 1;
}

/* 見出し */
.s-empathy .empathy-title{
  font-family: "Noto Serif JP", serif;
  font-size: 41px;
  font-weight: 700;
  margin: 0 0 30px;
}

/* 3ブロック */
.s-empathy .empathy-grid{
  display: grid;
  gap: clamp(18px, 2.4vh, 26px);
  max-width: 980px;
}

/* 1ブロック：左テキスト / 右写真 */
.s-empathy .empathy-block{
  display: grid;
  grid-template-columns: 1fr 160px;
  gap: 24px;
  align-items: center;
}

/* 飾罫線（グレー背景） */
/* 飾り帯：細いグレーが“下に付く” */
.s-empathy .empathy-head{
  position: relative;
  display: inline-block; /* 行全体じゃなく見出し幅に合わせる */
  margin: 0 0 10px;
  font-family: "Noto Serif JP", serif;
  font-size: 33px;
  font-weight: 700;
  line-height: 1.35;
}

.s-empathy .empathy-head span{
  position: relative;
  z-index: 1;
  padding: 0;            /* ←丸背景の余白を消す */
  background: none;      /* ←丸背景を無効化 */
  border-radius: 0;
}

/* 下に敷く細い帯 */
.s-empathy .empathy-head::after{
  content:"";
  position: absolute;
  left: 0;
  right: 0;
  height: 12px;                 /* ←帯の太さ（好みで 10〜14） */
  bottom: 2px;                  /* ←文字の“下付き”位置（0〜4で調整） */
  background: rgba(0,0,0,.10);  /* ←グレー濃さ */
  border-radius: 999px;         /* 角は丸めるとそれっぽい */
  z-index: 0;
}


/* 本文 */
.s-empathy .empathy-body{
  margin: 0;
  font-family: "Noto Serif JP", serif;
  font-size: 18px;
  font-weight: 400;
  line-height: 2.0;
  color: rgba(0,0,0,.72);
}

/* 右写真 */
.s-empathy .empathy-photo{
  margin: 0;
  width: 160px;
  height: 160px;
  border-radius: 6px;
  overflow: hidden;
  background: rgba(255,255,255,.55);
}
.s-empathy .empathy-photo img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* 右上ボタン＆右下ドットは既存を流用（.concept-fabs / .snap-dots） */

/* SP */
@media (max-width: 900px){
  .s-empathy .empathy-title{
    font-size: 24px;
    margin-bottom: 18px;
  }
  .s-empathy .empathy-head{ font-size: 18px; }
  .s-empathy .empathy-body{ font-size: 14px; }

  .s-empathy .empathy-block{
    grid-template-columns: 1fr;
  }
  .s-empathy .empathy-photo{
    width: 100%;
    height: 180px;
  }
}

/* sec-5: layoutはs-concept流用 / 背景だけHeroと同じ */
#sec-5.s-concept{
  position: relative;
  background-image: url("https://doubutsu.clinic/wp-content/uploads/2026/01/aa3597767e649f1e3881ddbd1bf9c570494c9742-scaled-e1768378117434.png");
  background-size: cover;
  background-position: center right;
  background-repeat: no-repeat;
}

/* 中身を幕より前に */
#sec-5 .concept-inner{ position: relative; z-index: 1; }


/* =========================
   SEC-6 Map（レイアウトはs-concept流用）
========================= */
#sec-6.s-concept{
  background-image: url("http://doubutsu.clinic/wp-content/uploads/2026/01/PC06_修正_0106-scaled.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* =========================
   SEC: Doctor Evidence (s-doc)
========================= */

/* 背景（Heroと同じ） */
.s-doc{
  position: relative;
  background-image: url("http://doubutsu.clinic/wp-content/uploads/2026/01/aa3597767e649f1e3881ddbd1bf9c570494c9742-scaled-e1768378117434.png");
  background-size: cover;
  background-position: center right;
  background-repeat: no-repeat;
}

/* s-concept の白い幕を無効化（ここ重要） */
.s-doc::before{ content:none !important; }

/* レイアウト土台 */
.s-doc .doc-inner{
  position: relative;
  z-index: 1;
}

/* 上部：見出し群 */
.s-doc .doc-head{
  width: min(100%, 980px);
  margin: 0 auto 18px;
  text-align: center;
}
.s-doc .doc-head__kicker{
  font-family: "Noto Serif JP", serif;
  font-size: 30px;
  font-weight: 700;
  margin: 0 0 10px;
}
.s-doc .doc-head__title{
  font-family: "Noto Serif JP", serif;
  margin: 0;
  line-height: 1.25;
}
.s-doc .doc-head__title .is-36{
  font-size: 36px;
  font-weight: 700;
}
.s-doc .doc-head__title .is-30{
  font-size: 30px;
  font-weight: 700;
  margin: 0 .15em;
}

/* 左上の四角バッジ */
.s-doc .doc-badge{
  position: absolute;
  left: 0;
  top: 0;
  transform: translate(-6px, -6px);
  width: 160px; /* ← 132 → 160 に広げる */
  height: auto;
  border: 1px solid rgba(0,0,0,.35);
  background: rgba(255,255,255,.72);
  display: grid;
  place-items: center;
  text-align: center;
  padding: 14px 10px;
}

.s-doc .doc-badge__top{
  font-family: "Noto Serif JP", serif;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.2;
  margin-bottom: 6px;
}

.s-doc .doc-badge__num{
  font-family: "Noto Serif JP", serif;
  font-size: 46px;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap; /* ← ここが決定打 */
}

.s-doc .doc-badge__num span{
  font-size: 20px;
  margin-left: 4px;
}


/* 下段：2カラム */
.s-doc .doc-grid{
  width: min(100%, 1120px);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(12px, 1.6vw, 20px);
  align-items: start;
}

/* 左：写真 */
.s-doc .doc-photo{
  max-width: 420px;
  margin-top: 14px; /* 8〜20pxで微調整 */
}

.s-doc .doc-photo img{
  max-width: 100%;
  transform: scale(1.04); /* 4%だけ拡大 */
  height: auto;
}

/* 右：スクロールカード */
.s-doc .doc-card{
  border-radius: 8px;
  background: rgba(255,255,255,.78);
  box-shadow: 0 14px 34px rgba(0,0,0,.12);
  border: 1px solid rgba(0,0,0,.06);

  /* ▼ ここが重要 */
  width: 640px;
  max-width: calc(100% - 140px); /* 右UI分は絶対に空ける */
  margin-left: -32px;

  max-height: clamp(420px, 46vh, 520px);
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}

.s-doc .doc-card__inner{
  padding: 20px 22px;
}

/* タイポ */
.s-doc .doc-label{
  font-family: "Noto Serif JP", serif;
  font-size: 24px;
  font-weight: 400;
  margin: 0 0 10px;
}
.s-doc .doc-small{
  font-family: "Noto Serif JP", serif;
  font-size: 18px;
  font-weight: 400;
  margin: 0 0 12px;
  line-height: 1.6;
}
.s-doc .doc-name{
  font-family: "Noto Serif JP", serif;
  font-size: 52px;
  font-weight: 700;
  margin: 6px 0 6px;
  letter-spacing: .02em;
}
.s-doc .doc-en{
  font-family: "Noto Serif JP", serif;
  font-size: 13px;
  font-weight: 400;
  margin: 0 0 12px;
  letter-spacing: .12em;
  opacity: .75;
}
.s-doc .doc-hr{
  border: none;
  height: 1px;
  background: rgba(0,0,0,.18);
  margin: 14px 0 14px;
}
.s-doc .doc-body{
  font-family: "Noto Serif JP", serif;
  font-size: 18px;
  font-weight: 400;
  line-height: 1.6;
  color: rgba(0,0,0,.72);
}

/* SP：縦積み */
@media (max-width: 900px){
  .s-doc .doc-badge{
    position: static;
    transform: none;
    margin: 0 0 12px;
  }
  .s-doc .doc-head{ text-align: left; }
  .s-doc .doc-grid{ grid-template-columns: 1fr; }
  .s-doc .doc-card{ max-height: none; }
}

/* =========================
   SEC-8: 認定医（ダークグレーパネル）
   - セクション2/3と同型（丸ボタン＋ドットも同じ）
========================= */

/* 背景（おなじみ） */
#sec-8.s-cert{
  position: relative;
  background-image: url("https://doubutsu.clinic/wp-content/uploads/2026/01/aa3597767e649f1e3881ddbd1bf9c570494c9742-scaled-e1768378117434.png");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* 白い幕はいらないので、もし s-concept::before が効くなら無効化 */
#sec-8.s-cert::before{
  content: none !important;
}

/* 中央のダークグレーパネル */
#sec-8.s-cert .cert-panel{
  width: min(100%, 800px);   /* ← もう一段だけ絞る */
  margin: 0 auto;
  margin-right: clamp(80px, 10vw, 140px); /* ← 丸ボタン回避 */

  background: rgba(60,60,60,.92);
  color: rgba(255,255,255,.92);

  border-radius: 10px;
  box-shadow: 0 16px 40px rgba(0,0,0,.25);
  padding: clamp(26px, 3.5vw, 44px);

  position: relative;
  z-index: 10;
}

#sec-8.s-cert .cert-panel,
#sec-8.s-cert .cert-panel *{
  font-family: "Noto Serif JP", serif;
}


/* 見出し系 */
#sec-8.s-cert .cert-kicker{
  margin: 0 0 18px;
  font-size: 14px;
  letter-spacing: .02em;
  opacity: .9;
}

#sec-8.s-cert .cert-head{
  margin: 0 0 22px;
  font-size: clamp(22px, 2.3vw, 30px);
  line-height: 1.6;
  font-weight: 700;
  letter-spacing: .02em;
}

/* 本文 */
#sec-8.s-cert .cert-body p{
  margin: 0 0 16px;
  font-size: clamp(14px, 1.2vw, 31px);
  line-height: 2.0;
  opacity: .92;
  font-family: "Noto Serif JP", serif;
}
#sec-8.s-cert .cert-body p:last-child{ margin-bottom: 0; }

/* SP微調整 */
@media (max-width: 900px){
  #sec-8.s-cert .cert-panel{
    padding: 22px 18px;
    border-radius: 8px;
  }
}

/* =========================
   SEC-9: Counseling (sec-2同型 / 背景差し替え)
========================= */
#sec-9.s-counsel{
  position: relative;
  background-image: url("http://doubutsu.clinic/wp-content/uploads/2026/01/smartphone-scaled.jpg");
  background-size: cover;
  background-position: center right;
  background-repeat: no-repeat;
}

/* 白い幕が不要ならON（必要なら消す） */
/*
#sec-9.s-counsel::before{
  content: none !important;
}
*/

/* =========================
   SEC-10: Features（単色背景）
========================= */
#sec-10.s-features{
  position: relative;
  background: #ecf9ff;
  font-family: "Noto Serif JP", serif;
}

/* s-concept の白幕が効いてる場合は消す */
#sec-10.s-features::before{
  content: none !important;
}

#sec-10.s-features .concept-inner{
  padding: clamp(56px, 7vh, 90px) 0; /* sec-2/3と同じ雰囲気 */
}

#sec-10.s-features .feat-wrap{
  max-width: 980px;
	font-family: "Noto Serif JP", serif !important;
}

#sec-10.s-features .feat-title{
  margin: 0 0 26px;
  font-size: 22px;
  font-weight: 700;
  letter-spacing: .02em;
  color: rgba(0,0,0,.78);
	font-family: "Noto Serif JP", serif !important;
	font-weight: 700;
}

#sec-10.s-features .feat-grid{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px 22px;
  margin-bottom: 22px;
}

#sec-10.s-features .feat-card{
  border: 1px solid rgba(0,0,0,.18);
  background: rgba(255,255,255,.75);
  border-radius: 6px;
  padding: 18px 18px;
  text-align: center;

  font-size: 14px;
  line-height: 1.6;
  color: rgba(0,0,0,.75);
}

#sec-10.s-features .feat-note{
  margin: 0;
  font-size: 14px;
  line-height: 2.0;
  color: rgba(0,0,0,.70);
}

/* SP */
@media (max-width: 900px){
  #sec-10.s-features .feat-grid{
    grid-template-columns: 1fr;
    gap: 14px;
  }
  #sec-10.s-features .feat-title{
    font-size: 18px;
  }
}
/* =========================
   SEC-11: LINE Counseling
========================= */

#sec-11.s-line{
  position: relative;
  font-family: "Noto Serif JP", serif;

  background-image: url("http://doubutsu.clinic/wp-content/uploads/2026/01/%E7%9F%A2%E5%8D%B0%E8%83%8C%E6%99%AF.png");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* 中身（いつもの幅） */
#sec-11.s-line .line-inner{
  position: relative;
  z-index: 1;
}

/* 2カラム */
#sec-11.s-line .line-grid{
  height: 100%;
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  align-items: center;
  gap: clamp(18px, 3vw, 44px);
}

/* 左：コピー */
#sec-11.s-line .line-copy{
  max-width: 640px;
}

#sec-11.s-line .line-kicker{
  margin: 0 0 16px;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: .02em;
  color: rgba(0,0,0,.78);
}

#sec-11.s-line .line-title{
  margin: 0 0 18px;
  font-size: clamp(34px, 3.2vw, 46px);
  font-weight: 700;
  letter-spacing: .02em;
  color: rgba(0,0,0,.86);
}

#sec-11.s-line .line-lead{
  margin: 0 0 20px;
  font-size: 16px;
  line-height: 2.0;
  color: rgba(0,0,0,.65);
}

/* CTA（横長） */
#sec-11.s-line .line-cta{
  display: grid;
  grid-template-columns: 1fr 160px;
  align-items: stretch;

  width: min(100%, 520px);
  min-height: 92px;

  border-radius: 14px;
  overflow: hidden;
  text-decoration: none;

  box-shadow: 0 14px 30px rgba(0,0,0,.16);
  border: 1px solid rgba(0,0,0,.08);
  background: linear-gradient(180deg, rgba(60,235,135,.95), rgba(14,172,84,.96));
}

#sec-11.s-line .line-cta__left{
  padding: 14px 16px;
  color: #fff;
}

#sec-11.s-line .line-cta__mini{
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
  opacity: .95;
}

#sec-11.s-line .line-cta__badge{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 22px;
  border-radius: 999px;
  background: rgba(255,255,255,.18);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .06em;
}

#sec-11.s-line .line-cta__cap{
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .02em;
  white-space: nowrap;
}

#sec-11.s-line .line-cta__main{
  font-size: 18px;
  font-weight: 800;
  letter-spacing: .01em;
}

#sec-11.s-line .line-cta__right{
  background: rgba(255,255,255,.85);
  display: grid;
  place-items: center;
}

#sec-11.s-line .line-cta__right img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: saturate(0.95) contrast(1.02);
}

/* 右：先生画像 */
#sec-11.s-line .line-doctor{
  display: flex;
  justify-content: flex-end;
  align-items: flex-end;
  height: 100%;
}

#sec-11.s-line .line-doctor img{
  height: clamp(520px, 76vh, 920px);
  width: auto;
  display: block;
  filter: drop-shadow(0 22px 36px rgba(0,0,0,.18));
  transform: translate(10px, 10px); /* 微調整用 */
}

/* 丸ボタン＆ドットの“被り防止”余白（右側に安全領域） */
#sec-11.s-line .line-copy{
  padding-right: 120px; /* 右上丸ボタンが近い時の保険 */
}

/* SP：1カラム */
@media (max-width: 900px){
  #sec-11.s-line .line-grid{
    grid-template-columns: 1fr;
    align-items: start;
  }

  #sec-11.s-line .line-copy{
    padding-right: 0;
  }

  #sec-11.s-line .line-doctor{
    justify-content: center;
  }

  #sec-11.s-line .line-doctor img{
    height: clamp(260px, 40vh, 420px);
    transform: none;
  }

  #sec-11.s-line .line-cta{
    grid-template-columns: 1fr 120px;
    min-height: 84px;
  }

  #sec-11.s-line .line-cta__main{
    font-size: 16px;
  }
}

/* =========================
   SEC-12: Voices (white bg)
========================= */
#sec-12.s-voices{
  position: relative;
  background: #fff;              /* 真っ白 */
  background-image: none !important;
}

/* s-concept::before（白い幕）が残ってるなら無効化 */
#sec-12.s-voices::before{
  content: none !important;
}

#sec-12.s-voices .concept-inner{
  padding: clamp(56px, 7vh, 90px) 0; /* sec-2と揃える */
}

#sec-12.s-voices .concept-copy{
  max-width: 860px;
  font-family: "Noto Serif JP", serif;  /* 念のためここで固定 */
}

/* 見出し */
#sec-12.s-voices .voices-head{
  margin: 0 0 22px;
  font-size: clamp(22px, 2.2vw, 32px);
  font-weight: 700;
  line-height: 1.8;
}

/* 「」の引用3行 */
#sec-12.s-voices .voices-quotes{
  margin: 0 0 22px;
}
#sec-12.s-voices .voices-quotes p{
  margin: 0 0 10px;
  font-size: 16px;
  line-height: 2.0;
  color: rgba(0,0,0,.82);
}
#sec-12.s-voices .voices-quotes p:last-child{ margin-bottom: 0; }

/* 説明文 */
#sec-12.s-voices .voices-body{
  margin: 0 0 28px;
  font-size: 16px;
  line-height: 2.0;
  color: rgba(0,0,0,.70);
}

/* 下の枠（ポリシー） */
#sec-12.s-voices .policy-box{
  border: 1px solid rgba(0,0,0,.25);
  border-radius: 6px;
  padding: 14px 16px;
  max-width: 720px;
  background: rgba(255,255,255,.8);
}

#sec-12.s-voices .policy-box__title{
  margin: 0 0 8px;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .02em;
}

#sec-12.s-voices .policy-box__text{
  margin: 0;
  font-size: 14px;
  line-height: 1.9;
  color: rgba(0,0,0,.72);
}

/* SP */
@media (max-width: 900px){
  #sec-12.s-voices .voices-head{ font-size: 20px; }
  #sec-12.s-voices .voices-quotes p,
  #sec-12.s-voices .voices-body{ font-size: 15px; }
  #sec-12.s-voices .policy-box{ max-width: 100%; }
}

/* =========================
   SEC-13 : LINE診断フロー
========================= */

#sec-13.s-flow{
  position: relative;
  background-image: url("http://doubutsu.clinic/wp-content/uploads/2026/01/矢印背景.png");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* 中央コンテンツ */
.s-flow .flow-inner{
  width: min(100%, 980px);
  margin: 0 auto;
  text-align: left;
}

/* 見出し */
.s-flow .flow-head{
  margin: 0 0 36px;
  font-size: clamp(20px, 2.2vw, 26px);
  font-weight: 700;
  font-family: "Noto Serif JP", serif;
}

/* ステップ */
.s-flow .flow-steps{
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
}

/* 各STEP */
.s-flow .flow-step{
  background: #fff;
  border-radius: 10px;
  padding: 22px 26px;
  min-width: 220px;
  text-align: center;
  box-shadow: 0 10px 26px rgba(0,0,0,.12);
  position: relative;
}

.s-flow .flow-step__num{
  display: block;
  font-size: 13px;
  color: #2fbf63;
  font-weight: 700;
  margin-bottom: 6px;
}

.s-flow .flow-step__text{
  font-size: 16px;
  font-weight: 500;
}

/* 矢印 */
.s-flow .flow-arrow{
  width: 18px;
  height: 18px;
  border-top: 3px solid #2fbf63;
  border-right: 3px solid #2fbf63;
  transform: rotate(45deg);
}

/* STEP3強調 */
.s-flow .flow-step.is-accent{
  border: 2px solid #2fbf63;
}

.s-flow .flow-step__badge{
  position: absolute;
  top: -12px;
  right: -12px;
  background: #2fbf63;
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  padding: 6px 10px;
  border-radius: 999px;
}

/* CTAボタン（画像はボタン内に内蔵） */
.s-flow .flow-cta{
  width: min(100%, 520px);
  height: 78px;
  border-radius: 14px;
  overflow: hidden;
  display: grid;
  grid-template-columns: 1fr 110px;
  align-items: stretch;

  text-decoration: none;
  color: #fff;

  background: linear-gradient(90deg, #1fcf60 0%, #14b958 55%, #0fae52 100%);
  box-shadow: 0 14px 32px rgba(16,180,88,.28);
  border: 1px solid rgba(255,255,255,.22);
}

/* 左：テキスト領域 */
.s-flow .flow-cta__left{
  display: grid;
  grid-template-columns: 40px 1fr;
  grid-template-rows: auto auto;
  column-gap: 10px;
  row-gap: 2px;
  align-content: center;
  padding: 12px 14px;
}

.s-flow .flow-cta__lineicon{
  grid-row: 1 / span 2;
  width: 36px;
  height: 36px;
  border-radius: 999px;
  background: rgba(255,255,255,.18);
  display: grid;
  place-items: center;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .06em;
}

/* フロー下のCTA位置調整 */
.s-flow .flow-cta-wrap{
  margin-top: clamp(36px, 5vw, 64px); /* ← フローから離す */
  display: flex;
  justify-content: center;           /* ← ページ中央 */
}


.s-flow .flow-cta__meta{
  font-family: "Noto Serif JP", serif;
  font-size: 12px;
  letter-spacing: .04em;
  opacity: .95;
  line-height: 1.2;
}

.s-flow .flow-cta__title{
  font-family: "Noto Serif JP", serif;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: .02em;
  line-height: 1.2;
}

/* 右：写真は背景で“はめ込み” */
.s-flow .flow-cta__right{
  background-image: url("https://doubutsu.clinic/wp-content/uploads/2026/01/9200819136b6c5a07c52167ccc3bda625905caa8-1-e1768920018774.jpg");
  background-size: cover;
  background-position: center;
  border-left: 1px solid rgba(255,255,255,.22);
  filter: saturate(.98) contrast(.98);
}

/* hover（やりすぎない） */
@media (hover:hover){
  .s-flow .flow-cta:hover{
    transform: translateY(-1px);
    box-shadow: 0 18px 38px rgba(16,180,88,.32);
  }
}

/* SP */
@media (max-width: 900px){
  .s-flow .flow-cta{
    width: min(100%, 420px);
    height: 72px;
    grid-template-columns: 1fr 92px;
    border-radius: 12px;
  }
  .s-flow .flow-cta__title{ font-size: 14px; }
}


/* 右画像 */
.s-flow .flow-image{
  position: absolute;
  right: clamp(24px, 4vw, 80px);
  bottom: clamp(24px, 6vh, 80px); /* ← ここを上げすぎない */
  z-index: 2;
}

.s-flow .flow-image img{
  height: clamp(220px, 32vh, 340px); /* ← 小さくする */
  max-width: 100%;
}

/* SP */
@media (max-width: 900px){
  .s-flow .flow-steps{
    flex-direction: column;
    align-items: stretch;
  }

  .s-flow .flow-arrow{
    display: none;
  }

  .s-flow .flow-image{
    position: static;
    margin-top: 24px;
    text-align: center;
  }

  .s-flow .flow-image img{
    height: auto;
    max-width: 80%;
  }
}

html, body{ height: 100%; }
body.home, body.front-page{ overflow: hidden; }

.snap-root{
  height: calc(100vh - var(--header-h) - var(--adminbar-h));
  overflow-y: auto;
  scroll-snap-type: y mandatory;
  -webkit-overflow-scrolling: touch;
}
.snap-root > .snap-section{
  scroll-snap-align: start;
  scroll-snap-stop: always;
}
/* =========================================================
   AIC SNAP - EMERGENCY FIX (paste at VERY BOTTOM)
   目的：スクロール不能 + snap無効 を強制復旧
========================================================= */

/* 1) 必須変数を確実に定義（ここが核心） */
:root{
  --header-h: 88px;     /* AICヘッダー実測に合わせてOK */
  --adminbar-h: 0px;    /* 非ログインは0 */
}
body.admin-bar{ --adminbar-h: 32px; }
@media (max-width:782px){
  body.admin-bar{ --adminbar-h: 46px; }
}

/* 2) ページ全体はスクロールさせない（snap-rootだけにスクロールを集約） */
html, body{ height: 100%; }
body.home, body.front-page{ overflow: hidden !important; }

/* 3) snap-root を「唯一のスクロールコンテナ」に強制 */
body.home .snap-root,
body.front-page .snap-root{
  display: block !important;
  position: relative !important;

  /* 100vhだとモバイルでズレるので dvh を優先、ダメなら vh */
  height: calc(100dvh - var(--header-h) - var(--adminbar-h)) !important;
  max-height: calc(100dvh - var(--header-h) - var(--adminbar-h)) !important;

  overflow-y: auto !important;
  overflow-x: hidden !important;

  /* snap復旧 */
  scroll-snap-type: y mandatory !important;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;

  /* “スクロールできない”系の事故を潰す */
  overscroll-behavior-y: contain;
  touch-action: pan-y;
}

/* dvh 未対応ブラウザ用フォールバック */
@supports not (height: 100dvh){
  body.home .snap-root,
  body.front-page .snap-root{
    height: calc(100vh - var(--header-h) - var(--adminbar-h)) !important;
    max-height: calc(100vh - var(--header-h) - var(--adminbar-h)) !important;
  }
}

/* 4) セクションは “1画面” を守る（snapが効く前提の箱） */
body.home .snap-root > .snap-section,
body.front-page .snap-root > .snap-section{
  min-height: calc(100dvh - var(--header-h) - var(--adminbar-h)) !important;
  scroll-snap-align: start !important;
  scroll-snap-stop: always !important;
}

/* 5) 変な display:none/overflow の巻き込みを防ぐ（特にテーマ側） */
body.home #page,
body.front-page #page,
body.home #content,
body.front-page #content{
  overflow: visible !important;
}

/* 6) AICヘッダーが被らないように（sticky前提） */
.aic-header{
  top: var(--adminbar-h) !important;
  z-index: 9999 !important;
}
.aic-header__inner{
  min-height: var(--header-h) !important;
}

/* 7) 右上ボタンがスクロールを殺さない保険 */
.concept-fabs{ pointer-events: none !important; }
.concept-fabs .concept-fab{ pointer-events: auto !important; }

/* =========================================================
   AIC SNAP - ALIGN FIX (paste at VERY BOTTOM)
   目的：snapの停止位置ズレをゼロにする
========================================================= */

/* 0) 高さ計算はdvh優先のまま（ここはOK） */
body.home .snap-root,
body.front-page .snap-root{
  scroll-snap-type: y mandatory !important;
  scroll-padding-top: 0px !important;   /* ←二重オフセットを無効化 */
}

/* 1) セクション先頭の“補正”も無効化 */
body.home .snap-root .snap-section,
body.front-page .snap-root .snap-section{
  scroll-snap-align: start !important;
  scroll-snap-stop: always !important;

  scroll-margin-top: 0px !important;    /* ←二重オフセットを無効化 */

  /* “1画面”を確実に作る（padding込みでズレないように） */
  height: calc(100dvh - var(--header-h) - var(--adminbar-h)) !important;
  min-height: calc(100dvh - var(--header-h) - var(--adminbar-h)) !important;

  /* ここがズレの主犯：上下paddingをゼロにする（中はsnap-inner側で余白管理） */
  padding-top: 0 !important;
  padding-bottom: 0 !important;

  /* 中央寄せが不要ならこれも外せるけど、まずは維持 */
  display: block !important;
}

/* 2) 余白はsnap-innerに移す（セクションごとのズレを作らない） */
body.home .snap-root .snap-inner,
body.front-page .snap-root .snap-inner{
  padding: clamp(24px, 6vh, 64px) 0 !important;
  box-sizing: border-box;
}

/* 3) iOS対策：勢いで1pxズレる時の保険 */
body.home .snap-root,
body.front-page .snap-root{
  scroll-behavior: auto !important; /* smoothが噛むとズレる端末がある */
}