/* 大腸カメラLP（page-colonoscopy-lp.php）の CSS
   元：医院/nishinippori-scratch/HTML/大腸カメラLP_PC_1604-226190/公開用/css/style.css（Figma との差の点検に合格したもの）
   WordPress に入れるために変えた所：
   - 全体の決まり（:root・*・body・img・a・.page）は .nn-main--colonoscopy-lp の中に閉じ込めた（:where で強さ 0。節の決まりを打ち消さない）
   - 写真は url("../img/<16けた>.webp") → var(--img-<16けた>)（WordPress のメディア。inc/custom/nn-assets.php）
   - スマホのメニューは右から出るモーダル（template-parts/lp/menu.php・lp.css・lp.js）。ここではヘッダーのボタンの形だけ
   - 右端の札（胃カメラ検査 特設サイト）と予約・TOP の帯は、注意書き（1770:217003・1672:224398）どおり画面に固定
     （PC：札は右の中央・ホバーで左へ 12px 広がる／帯は右下。スマホ：札は出さず、帯は画面の下に横並び）
   - 使っていなかった診療時間表（.hours-table）と、節の途中の @import（書体は inc/custom/nn-front.php が読む）は外した
   - 医師紹介のスライダーの動きは template-parts/lp/lp.js（胃カメラLPと同じ） */

/* ===== 全体（静的 HTML の base。このページの中だけ） ===== */
.nn-main--colonoscopy-lp {
  /* 色（design.json の fills・文字の色で多いもの） */
  --c-text: #514c46;        /* 本文・見出し・表の文字 */
  --c-bg: #fbf7f4;          /* ページの地 */
  --c-white: #ffffff;       /* 表のマス・ボタンの文字 */
  --c-line: #ece5dc;        /* 表の罫線 */
  --c-table-head: #faf9f5;  /* 表の見出しの行 */
  --c-accent: #e8a477;      /* オレンジ（Web予約・表の●） */
  --c-accent-deep: #e88f54; /* 濃いオレンジ（節の見出し・予約の帯の Web予約） */
  --c-female: #f498ae;      /* 女性医師 */
  --c-male: #a1c3ed;        /* 男性医師 */
  --c-gray: #939393;        /* 線・休み（－） */
  --c-green: #65980e;       /* LINE予約（ホバー） */
  --c-green-soft: #76983b;  /* LINE予約 */
  --c-gold: #d7b56d;        /* 札・帯 */
  --c-beige: #f0e2c4;
  --c-cream: #fffdf5;
  --c-ink: #333333;

  /* 書体 */
  --font-sans: "Noto Sans JP", sans-serif;
  --font-serif: "Shippori Mincho B1", "Noto Serif JP", serif;
  --font-en: "Source Serif 4", "Noto Serif JP", serif;

  /* 左右の余白（スマホで 16px 以上） */
  --gutter: clamp(16px, 4vw, 40px);
  --inner: 1120px;

  display: block;
  width: 100%;
  overflow-x: clip;
  margin: 0;
  background: var(--c-bg);
  color: var(--c-text);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.6;
  letter-spacing: 0.05em;
  text-spacing-trim: space-all;
  -webkit-text-size-adjust: 100%;
}
:where(.nn-main--colonoscopy-lp) *,
:where(.nn-main--colonoscopy-lp) *::before,
:where(.nn-main--colonoscopy-lp) *::after { box-sizing: border-box; }
:where(.nn-main--colonoscopy-lp) img { max-width: 100%; height: auto; display: block; }
:where(.nn-main--colonoscopy-lp) a { color: inherit; }

/* 中身の幅（1440px で x=160〜1280） */
.nn-main--colonoscopy-lp .inner {
  width: min(var(--inner), 100% - var(--gutter) * 2);
  margin-inline: auto;
}

/* スマホ：下の固定ボタン（高さ 50px）とセーフエリアのぶん、ページの最後を空ける */
@media (max-width: 767px) {
  .nn-main--colonoscopy-lp { padding-bottom: calc(50px + env(safe-area-inset-bottom)); }
}

/* ===== s01 女性医師に相談できる、 痛みや恥ずかしさに配慮した 大腸カメ ===== */
/* s01：FV（ヘッダー・見出し・3つの特長・右端の札・予約の帯。Figma 0〜1024px） */

.s01 {
  --s01-k: 1;               /* 見出し・特長の文字の倍率（狭い幅で小さくする） */
  position: relative;
  isolation: isolate;
  z-index: 1;               /* 中の固定ボタン（.s01-float・.s01-side）が、後ろの節（s02〜）に覆われないように。isolation で作った層が後の節と同じ高さだと、DOM の後ろの節が上に描かれる */
  min-height: 1024px;
  padding-bottom: 140px;
  color: #333;
}
/* :where で強さを 0 にする（.s01-points の margin-top などを打ち消さないため） */
:where(.s01) ul { list-style: none; margin: 0; padding: 0; }
:where(.s01) p { margin: 0; }
:where(.s01) a { text-decoration: none; }

/* ===== 背景（左の写真・右の写真・中央の白い帯 x=380 幅 681） ===== */
.s01-bg {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  background: #ebe8e2;
}
.s01-bg-left,
.s01-bg-right {
  position: absolute;
  top: 0;
  width: 50%;
  height: 100%;
  overflow: hidden;
  container-type: size;
}
.s01-bg-left { left: 0; }
.s01-bg-right { left: 50%; }
/* 左：寝ている人（Figma の切り抜きに合わせて拡大）
   filter：見本の写真は元の画像より明るく淡い（JSON に補正の値は無い。点検の平均差で合わせた値） */
.s01-bg-left img {
  position: absolute;
  left: -57.8cqw;
  top: -44.9cqw;
  width: 150.6cqw;
  max-width: none;
  height: auto;
  filter: contrast(0.9) brightness(1.12) saturate(0.88);
}
/* 右：女性医師（高さに合わせて中央で切る） */
.s01-bg-right img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: 50% 0;
  filter: contrast(0.9) brightness(1.18) saturate(0.78);
}
.s01-bg-band {
  position: absolute;
  top: 0;
  bottom: 0;
  left: calc(50% - 340px);
  width: 681px;
  background:
    linear-gradient(rgb(255 255 255 / 0.7), rgb(255 255 255 / 0.7)),
    linear-gradient(to right, rgb(255 255 255 / 0), #f0f0f0 45%, #f0f0f0 55%, rgb(255 255 255 / 0));
}

/* ===== ヘッダー（高さ 117px・上下 20 左右 40。PC は固定しない） ===== */
.s01-header {
  position: relative;
  z-index: 3;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 20px;
  height: 117px;
  padding: 20px 40px;
  color: var(--c-text);
}
.s01-brand { display: flex; align-items: center; gap: 32px; flex: none; }
.s01-logo { display: flex; flex-direction: column; gap: 5px; width: 245px; }
.s01-logo-img { position: relative; display: block; width: 245px; height: 60px; }
.s01-logo-mark { position: absolute; left: 0; top: 0; width: 89px; height: 60px; }
.s01-logo-type { position: absolute; left: 69px; top: 7px; width: 176px; height: 46px; }
.s01-logo-sub {
  display: block;
  font-size: 12px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.12em;
  text-align: right;
  white-space: nowrap;
}
.s01-badge {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 143px;
  height: 77px;
  padding: 10px 12px;
  border-radius: 5px;
  background: var(--c-gold);
  color: var(--c-white);
  font-family: var(--font-serif);
  font-size: 17px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0;
  white-space: nowrap;
  transition: opacity 0.3s ease-out;
}

.s01-tools { display: flex; align-items: center; gap: 24px; height: 74px; }

/* 言語の切り替え（93×52）。押すと一覧を開く（外側を押すと閉じる：lp.js） */
.s01-lang { position: relative; flex: none; }
.s01-lang-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  width: 93px;
  height: 52px;
  padding: 8px 8px 12px 6px;
  border: 1px solid var(--c-gray);
  border-radius: 2px;
  background: var(--c-white);
  list-style: none;
  cursor: pointer;
}
.s01-lang-btn::-webkit-details-marker { display: none; }
.s01-lang-globe { flex: none; }
.s01-lang-text {
  display: flex;
  align-items: center;
  gap: 4px;
  padding-left: 6px;
  font-size: 12px;
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0;
}
.s01-lang-arrow { transition: transform 0.3s ease-out; }
.s01-lang[open] .s01-lang-arrow { transform: rotate(180deg); }
.s01-lang-list {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  z-index: 5;
  min-width: 100%;
  padding: 4px 0;
  border: 1px solid var(--c-gray);
  border-radius: 2px;
  background: var(--c-white);
}
.s01-lang-list a,
.s01-lang-list span {
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: 0 12px;
  color: var(--c-text);
  font-size: 13px;
  white-space: nowrap;
  transition: background-color 0.3s ease-out, color 0.3s ease-out;
}
/* 行き先がまだ無い言語（翻訳のプラグインを決めるまで） */
.s01-lang-list span { color: var(--c-gray); }
/* 閉じている間は一覧の押せる所を無くす（開くまで他の要素を覆わない） */
.s01-lang:not([open]) .s01-lang-list { display: none; }

/* 電話（PC はリンクにしない） */
.s01-tel { display: flex; flex-direction: column; align-items: center; gap: 4px; width: 222px; flex: none; }
.s01-tel-label {
  width: 100%;
  padding-bottom: 3px;
  border-bottom: 1px solid var(--c-gray);
  font-size: 12px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.21em;
  text-align: center;
  white-space: nowrap;
}
.s01-tel-num {
  display: flex;
  align-items: center;
  gap: 1px;
  min-height: 44px;
  margin-block: -8px;
  color: var(--c-text);
  font-family: var(--font-en);
  font-size: 28px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.1em;
  white-space: nowrap;
  pointer-events: none;
  cursor: default;
}
.s01-tel-num img { width: 31px; height: 31px; margin: 0 -2px 0 -3px; }

/* 予約ボタン（240×74。ボタンの形は高さ 60・66） */
.s01-btns { display: flex; gap: 12px; flex: none; }
.s01-btn,
.s01-fbtn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border-radius: 50px;
  color: var(--c-white);
  box-shadow: 0 4px 5px rgb(109 97 61 / 0.4);
  transition: background-color 0.3s ease-out, box-shadow 0.3s ease-out;
}
.s01-btn { width: 240px; padding: 0 8px; }
.s01-btn--web { height: 60px; margin-block: 7px; background: var(--c-accent); }
.s01-btn--line { height: 66px; margin-block: 4px; background: var(--c-green-soft); }
.s01-btn-icon {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--c-white);
}
.s01-btn-text { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.s01-btn-main {
  font-size: 16px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0;
  white-space: nowrap;
}
.s01-btn-sub {
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.05em;
  white-space: nowrap;
}

/* スマホのメニューを開くボタン（PC では出さない） */
.s01-spmenu { display: none; }

/* ===== 見出し（y=263）と3つの特長（y=611） ===== */
.s01-main {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: min(761px, 100% - var(--gutter) * 2);
  margin: 146px auto 0;
}
.s01-lead { display: flex; flex-direction: column; align-items: center; gap: 11px; text-shadow: 0 0 20px #fff; }
.s01-area {
  padding: 10px 9px;
  border-block: 1px solid var(--c-text);
  font-family: var(--font-serif);
  font-size: calc(26px * var(--s01-k));
  font-weight: 800;
  line-height: 1;
  letter-spacing: 0.08em;
  white-space: nowrap;
}
.s01-area-no { font-size: calc(22px * var(--s01-k)); }
/* 「・」は Figma では詰まって見える（文字の幅 427px に合わせる） */
.s01-area-dot { margin-inline: -0.27em; }
.s01-title {
  margin: 0;
  font-family: var(--font-serif);
  font-weight: 800;
  line-height: 1.3;
  text-align: center;
}
.s01-title > span { display: block; }
.s01-title-l1, .s01-title-l2 { height: calc(65px * var(--s01-k)); }
.s01-title-l3 { height: calc(86px * var(--s01-k)); }
.s01-t50 { font-size: calc(50px * var(--s01-k)); letter-spacing: 0.1em; }
.s01-t45a { font-size: calc(45px * var(--s01-k)); letter-spacing: 0.05em; }
.s01-t45b { font-size: calc(45px * var(--s01-k)); letter-spacing: 0.1em; }
.s01-t45c { font-size: calc(45px * var(--s01-k)); letter-spacing: 0; }
.s01-t49 { font-size: calc(49px * var(--s01-k)); letter-spacing: 0; }
.s01-t49b { font-size: calc(49px * var(--s01-k)); letter-spacing: 0.05em; }
.s01-t64a { font-size: calc(64px * var(--s01-k)); letter-spacing: 0.05em; }
.s01-t64b { font-size: calc(64px * var(--s01-k)); letter-spacing: 0; }

.s01-points {
  display: flex;
  justify-content: center;
  gap: 20px;
  width: 100%;
  margin-top: 73px;
}
.s01-point {
  flex: 0 1 240px;
  min-width: 0;
  height: 240px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  gap: 10px;
  padding: 0 6px 18px;
  border-radius: 5px;
  background: var(--c-beige);
}
.s01-point img { flex: none; }
.s01-point p {
  font-family: var(--font-serif);
  font-size: calc(20px * var(--s01-k));
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 0;
  text-align: center;
  overflow-wrap: anywhere;
}
.s01-p24 { font-size: calc(24px * var(--s01-k)); }
.s01-p23 { font-size: calc(23px * var(--s01-k)); }
.s01-p18 { font-size: calc(18px * var(--s01-k)); letter-spacing: -0.26em; }
.s01-ls-2 { letter-spacing: -0.02em; }
.s01-ls-27 { letter-spacing: -0.27em; }
.s01-ls-5 { letter-spacing: -0.05em; }
.s01-ls-21 { letter-spacing: -0.21em; }

/* ===== 右端の札（胃カメラ検査 特設サイト：58×234。1770:217003）
   PC：画面の右の中央に固定。ホバーで右端はそのまま、左へ 12px 広がる（0.3秒 Ease Out）。スマホでは出さない ===== */
.s01-side {
  position: fixed;
  top: 50%;
  right: 0;
  z-index: 50;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  min-width: 58px;
  padding: 30px 20px;
  border-radius: 5px 0 0 5px;
  background: var(--c-accent);
  box-shadow: 0 0 10px rgb(109 97 61 / 0.15);
  color: var(--c-white);
  transition: padding 0.3s ease-out, background-color 0.3s ease-out;
}
.s01-side-text {
  writing-mode: vertical-rl;
  font-family: var(--font-serif);
  font-size: 14px;
  font-weight: 800;
  line-height: 1.01;
  letter-spacing: 0;
}
.s01-side-text + .s01-side-text { margin-top: 0; }
.s01-side-arrow {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M5 3.5 7.5 6 5 8.5' fill='none' stroke='%23e8a477' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 12px no-repeat,
    var(--c-white);
}

/* ===== 予約・TOP の帯（PC：画面の右下に固定。529×78。1672:224398） ===== */
.s01-float {
  position: fixed;
  right: 0;
  bottom: 52px;
  z-index: 50;
  display: flex;
  align-items: center;
  gap: 16px;
  height: 78px;
  padding: 8px 30px 8px 20px;
  border-radius: 10px 0 0 10px;
  background: var(--c-beige);
}
.s01-fbtn { width: 209px; height: 54px; padding: 0 10px; }
.s01-fbtn--web { background: var(--c-accent); }
.s01-fbtn--line { margin-left: -8px; background: var(--c-green-soft); }
.s01-fbtn .s01-btn-text { align-items: flex-start; }
.s01-top {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 44px;
  min-height: 44px;
  margin-inline: -3.5px;
  color: var(--c-text);
  font-family: var(--font-en);
  font-size: 18px;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: 0.05em;
  transition: opacity 0.3s ease-out;
}
.s01-top svg { margin-bottom: -8px; }

@media (hover: hover) {
  .s01-badge:hover, .s01-top:hover { opacity: 0.7; }
  .s01-lang-btn:hover { color: var(--c-gold); }
  .s01-lang-list a:hover { background: var(--c-gold); color: var(--c-white); }
  .s01-btn--web:hover, .s01-fbtn--web:hover { background: var(--c-accent-deep); box-shadow: 0 2px 3px rgb(109 97 61 / 0.4); }
  .s01-btn--line:hover, .s01-fbtn--line:hover { background: var(--c-green); box-shadow: 0 2px 3px rgb(109 97 61 / 0.4); }
  /* 右端を保ったまま左へ 12px 広げる */
  .s01-side:hover { padding-left: 32px; background: var(--c-accent-deep); }
}

/* ===== 間の幅：ヘッダーの右側を詰める ===== */
@media (max-width: 1360px) {
  .s01-header { padding-inline: 24px; }
  .s01-tools { gap: 16px; }
  .s01-btns { gap: 8px; }
  .s01-btn { width: 200px; gap: 6px; }
  .s01-btn-main { font-size: 13px; }
}
@media (max-width: 1180px) {
  .s01-tel { display: none; }
}
@media (max-width: 1100px) {
  .s01 { --s01-k: 0.85; }
  /* 右端の札とぶつからない幅に */
  .s01-main { width: min(761px, 100% - 152px); margin-top: 120px; }
  .s01-points { margin-top: 56px; }
  .s01-point { height: auto; min-height: 210px; padding-top: 16px; }
  .s01-point img { height: 76px; width: auto; }
}
@media (max-width: 960px) {
  .s01-badge { display: none; }
}
@media (max-width: 900px) {
  .s01 { --s01-k: 0.7; }
  .s01-point { min-height: 180px; }
  .s01-point img { height: 60px; }
}
@media (max-width: 860px) {
  /* ヘッダーの予約ボタンは右下の帯に任せる */
  .s01-btns { display: none; }
}

/* ===== スマホ（ref_sp：幅 390px） ===== */
@media (max-width: 767px) {
  .s01 { --s01-k: 0.52; min-height: 0; padding-bottom: 150px; }

  /* 背景：上に女性医師、下に寝ている人、間は白い帯 */
  .s01-bg-right { left: 0; top: 76px; width: 100%; height: 230px; }
  .s01-bg-right img { object-position: 60% 20%; }
  .s01-bg-left { top: auto; bottom: 0; width: 100%; height: 150px; }
  .s01-bg-left img {
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 72%;
  }
  .s01-bg-band {
    left: 0;
    width: 100%;
    top: 220px;
    bottom: 140px;
    background: linear-gradient(rgb(255 255 255 / 0), rgb(255 255 255 / 0.9) 60px, rgb(255 255 255 / 0.9) calc(100% - 60px), rgb(255 255 255 / 0.4));
  }
  .s01-bg { background: var(--c-white); }

  .s01-header {
    align-items: center;
    height: 76px;
    padding: 6px 4px 6px 10px;
    background: var(--c-white);
  }
  .s01-brand { gap: 8px; }
  .s01-logo { width: auto; gap: 3px; }
  .s01-logo-img { width: 157px; height: 38px; }
  .s01-logo-mark { width: 57px; height: 38px; }
  .s01-logo-type { left: 44px; top: 4px; width: 113px; height: 30px; }
  .s01-logo-sub { font-size: 9px; letter-spacing: 0.04em; text-align: left; }
  .s01-tel, .s01-btns { display: none; }
  .s01-tools { gap: 2px; height: auto; }

  /* 特設サイトの札と言語：ロゴの右に縦に並べる */
  .s01-header { flex-wrap: nowrap; }
  .s01-brand { flex: 1 1 auto; min-width: 0; }
  .s01-badge {
    display: flex;
    width: 84px;
    height: 44px;
    gap: 3px;
    padding: 4px;
    font-size: 11px;
  }
  .s01-lang-btn {
    flex-direction: row;
    justify-content: center;
    width: 48px;
    height: 44px;
    padding: 0;
    border: 0;
    background: none;
  }
  .s01-lang-text { display: none; }
  .s01-lang-list { left: auto; right: 0; min-width: 120px; }

  /* メニューを開くボタン（右から出るモーダル：template-parts/lp/menu.php） */
  .s01-spmenu { display: block; position: relative; }
  .s01-spmenu-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    cursor: pointer;
  }
  .s01-spmenu-lines {
    width: 24px;
    height: 14px;
    background:
      linear-gradient(var(--c-text), var(--c-text)) 0 0 / 100% 1.5px no-repeat,
      linear-gradient(var(--c-text), var(--c-text)) 0 50% / 100% 1.5px no-repeat,
      linear-gradient(var(--c-text), var(--c-text)) 0 100% / 100% 1.5px no-repeat;
  }

  /* 見出し・特長 */
  .s01-main { width: calc(100% - 20px); margin-top: 200px; }
  .s01-lead { gap: 8px; }
  .s01-area { padding: 6px 8px; white-space: normal; }
  .s01-title-l1, .s01-title-l2 { height: auto; }
  .s01-title-l3 { height: auto; }
  .s01-points { gap: 6px; margin-top: 18px; }
  .s01-point {
    flex: 1 1 0;
    min-height: 0;
    gap: 4px;
    padding: 8px 2px 8px;
    justify-content: flex-start;
  }
  .s01-point img { height: 38px; }
  .s01-point p { font-size: 12px; line-height: 1.4; }
  .s01-p24, .s01-p23 { font-size: 13px; }
  .s01-p18 { font-size: 11px; }

  .s01-side { display: none; }

  /* 予約・TOP：画面の下に固定（Web・LINE は同じ幅、TOP は右端。最大 390px で中央） */
  .s01-float {
    left: 50%;
    right: auto;
    bottom: 0;
    transform: translateX(-50%);
    width: min(390px, 100%);
    gap: 0;
    height: auto;
    padding: 0 0 env(safe-area-inset-bottom);
    border-radius: 0;
    background: var(--c-white);
    box-shadow: 0 -2px 6px rgb(109 97 61 / 0.12);
  }
  .s01-fbtn {
    flex: 1 1 0;
    min-width: 0;
    width: auto;
    height: 50px;
    margin: 0;
    padding: 0 4px;
    border-radius: 0;
    box-shadow: none;
    gap: 6px;
  }
  .s01-fbtn--line { margin-left: 0; }
  .s01-fbtn .s01-btn-main { font-size: 14px; }
  .s01-fbtn .s01-btn-sub { display: none; }
  .s01-top { flex: none; width: 50px; height: 50px; margin: 0; font-size: 12px; }
  .s01-top svg { width: 18px; height: 18px; margin-bottom: -2px; }
}

/* ===== s02 便やお腹の症状、検査への不安を そのままにしていませんか？ ===== */
/* s02：お悩み・当院の案内と CTA・大腸カメラ検査でできること・わかる主な疾患（Figma 1024〜3770px） */

.s02 {
  --s02-k: 1;               /* 見出しの文字の倍率（狭い幅で小さくする） */
  background: var(--c-white);
  color: var(--c-text);
  overflow-x: clip;
}
/* :where で強さを 0 にする（各部品の margin-top を打ち消さないため） */
:where(.s02) ul { list-style: none; margin: 0; padding: 0; }
:where(.s02) :is(p, h2, h3) { margin: 0; }
:where(.s02) a { text-decoration: none; }
:where(.s02) em { font-style: normal; }

/* ===== お悩み（高さ 604px：写真の帯 458px＋地 #f4e9da） ===== */
.s02-worry {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 100px;
  background: #f4e9da;
}
.s02-worry-bg {
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
  width: 100%;
  height: 458px;
  overflow: hidden;
}
.s02-worry-bg img { position: absolute; max-width: none; height: auto; }
/* 右：書類を見る人／左：お腹を押さえる人（Figma の切り抜きに合わせた位置） */
/* 右の写真は画面の右端より先へ出ないよう、箱の背景にして切る（1440×960 を上へ 396px） */
.s02-worry-img2 {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: calc(50% - 306px);
  background: var(--img-4bfe5cf896878c0b) left 0 top -396px / 1440px auto no-repeat;
}
.s02-worry-img1 { left: calc(50% - 772px); top: -22px; width: 780px; }
/* 中央が白く抜けるぼかし → 全体を 40% 暗く */
.s02-worry-bg::before,
.s02-worry-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;   /* ::before は写真より先に描かれるので、重なりを上げる */
}
.s02-worry-bg::before {
  background: linear-gradient(to right, rgb(255 255 255 / 0), rgb(255 255 255 / 0.95) 49.5%, rgb(255 255 255 / 0));
}
.s02-worry-bg::after { background: rgb(34 32 26 / 0.4); }

.s02-worry-title {
  color: var(--c-white);
  font-family: var(--font-serif);
  font-weight: 800;
  line-height: 1.4;
  letter-spacing: 0.05em;
  text-align: center;
  text-shadow: 0 0 17px #383838, 0 0 3px #343434;
}
.s02-worry-l1 { font-size: calc(36px * var(--s02-k)); }
.s02-worry-l2 { font-size: calc(40px * var(--s02-k)); }

/* チェックの一覧（635×356・白・角 10） */
.s02-check {
  display: flex;
  flex-direction: column;
  gap: 4px;
  width: min(635px, 100% - var(--gutter) * 2);
  margin-top: 40px;
  padding: 40px 60px;
  border-radius: 10px;
  background: var(--c-white);
}
/* flex にすると <b> の前後にも間が入るので、印は絶対位置で置く */
.s02-check li {
  position: relative;
  min-height: 31px;
  padding: 4px 0 4px 24px;
  border-bottom: 1px dashed #d9d9d9;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: 0.1em;
}
.s02-check li::before {
  content: "";
  position: absolute;
  top: 7px;
  left: 0;
  width: 18px;
  height: 16px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 16'%3E%3Cpath d='M13.5 9.2V14a.8.8 0 0 1-.8.8H2a.8.8 0 0 1-.8-.8V3.3a.8.8 0 0 1 .8-.8h8.6' fill='none' stroke='%23e8a477' stroke-width='1.4'/%3E%3Cpath d='M4.6 7.3 7.6 10.4 16.6 1.4' fill='none' stroke='%23e8a477' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 18px 16px no-repeat;
}
.s02-check b { color: var(--c-green-soft); font-weight: 700; }

/* ===== 当院の案内と CTA（高さ 823px） ===== */
.s02-guide {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 48px 0 100px;
  background: linear-gradient(rgb(240 224 201 / 0.7), rgb(255 246 228 / 0.7) 53.4%, rgb(255 255 255 / 0.7));
}
.s02-guide-arrow { width: 338px; height: 51px; }
.s02-guide-text {
  width: min(1060px, 100% - var(--gutter) * 2);
  margin-top: 32px;
  font-family: var(--font-serif);
  font-size: calc(32px * var(--s02-k));
  font-weight: 800;
  line-height: 1.6;
  letter-spacing: 0.1em;
  text-align: center;
}
.s02-guide-text em { color: var(--c-accent-deep); font-size: calc(36px * var(--s02-k)); }
.s02-guide-text .s02-ls5 { letter-spacing: 0.05em; }
.s02-big { font-size: calc(36px * var(--s02-k)); }

/* CTA（905×444・上下 60 左右 80・間 40） */
.s02-cta {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 40px;
  width: min(905px, 100% - var(--gutter) * 2);
  margin-top: 32px;
  padding: 60px 80px;
  border-radius: 10px;
  background: var(--c-white);
  box-shadow: 2px 2px 15px rgb(109 97 61 / 0.3);
}
.s02-cta-head,
.s02-about-head,
.s02-dis-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 100%;
}
.s02-cta-en,
.s02-about-en,
.s02-dis-en {
  display: block;
  color: var(--c-accent);
  font-family: var(--font-en);
  font-size: 80px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.05em;
  white-space: nowrap;
  opacity: 0.15;
  pointer-events: none;
  user-select: none;
}
.s02-cta-title {
  position: relative;
  margin-top: -50px;
  font-family: var(--font-serif);
  font-weight: 800;
  line-height: 1.4;
  letter-spacing: 0.1em;
  text-align: center;
}
.s02-cta-l1, .s02-cta-he { font-size: calc(28px * var(--s02-k)); }
.s02-cta-l2 { font-size: calc(32px * var(--s02-k)); }

.s02-cta-btns {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 24px;
}
.s02-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 320px;
  max-width: 100%;
  height: 66px;
  margin-block: 4px;
  padding: 0 12px;
  border-radius: 50px;
  color: var(--c-white);
  box-shadow: 0 4px 5px rgb(109 97 61 / 0.4);
  transition: background-color 0.3s ease-out, box-shadow 0.3s ease-out;
}
.s02-btn--web { background: var(--c-accent); }
.s02-btn--line { background: var(--c-green-soft); }
.s02-btn-icon {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--c-white);
}
.s02-btn-text { display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 0; }
.s02-btn-main {
  font-size: 18px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0;
  white-space: nowrap;
}
.s02-btn-sub {
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.05em;
  white-space: nowrap;
}

/* 電話（414×66・線 #939393。PC はリンクにしない） */
.s02-tel {
  display: flex;
  align-items: center;
  width: 414px;
  max-width: 100%;
  height: 66px;
  margin: -16px 0 4px;
  border: 1px solid var(--c-gray);
  border-radius: 5px;
  background: var(--c-white);
  color: var(--c-text);
  pointer-events: none;
  cursor: default;
}
.s02-tel-left {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 34px;
  padding: 0 8px 0 19px;
  border-right: 1px solid var(--c-gray);
}
.s02-tel-icon {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--c-accent);
}
.s02-tel-label {
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.05em;
  white-space: nowrap;
}
.s02-tel-num {
  padding: 0 0 0 8px;
  font-family: var(--font-en);
  font-size: 26px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.1em;
  white-space: nowrap;
}

/* ===== 大腸カメラ検査でできること（上の角 50・地 #f8f1e3） ===== */
.s02-about {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 120px 0 180px;
  border-radius: 50px 50px 0 0;
  background: #f8f1e3;
}
.s02-about-title {
  position: relative;
  margin-top: -50px;
  font-family: var(--font-serif);
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 0.1em;
  text-align: center;
}
.s02-about-l1 { font-size: calc(32px * var(--s02-k)); }
.s02-about-l2 { font-size: calc(36px * var(--s02-k)); }
.s02-about-text {
  width: min(900px, 100% - var(--gutter) * 2);
  margin-top: 32px;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.8;
  letter-spacing: 0.15em;
  text-align: center;
}

/* カード3枚（320px・間 56） */
.s02-cards {
  display: flex;
  gap: 48px 56px;
  width: min(1072px, 100% - var(--gutter) * 2);
  margin-top: 40px;
  align-self: flex-start;
  margin-left: max(var(--gutter), 50% - 560px);
}
.s02-card { flex: 0 1 320px; min-width: 0; }
.s02-card-img { position: relative; }
/* 写真は Figma の切り取り（拡大・ずらし）に合わせる。札がはみ出せるよう、切るのは内側の箱 */
.s02-card-photo {
  position: relative;
  display: block;
  aspect-ratio: 320 / 213;
  overflow: hidden;
  border-radius: 5px;
  container-type: size;
}
.s02-card-photo img { position: absolute; max-width: none; height: auto; }
.s02-card-photo--1 img { width: 130cqw; left: 0; top: -2.8cqh; }
.s02-card-photo--2 img { width: 120cqw; left: -10cqw; top: -15.5cqh; }
.s02-card-photo--3 img { width: 118.3cqw; left: -6.9cqw; top: 0; }
/* 観察・検査・処置の札（68×68。写真の右下からはみ出す） */
.s02-card-tag {
  position: absolute;
  right: -28px;
  bottom: -29px;
  display: flex;
  justify-content: center;
  width: 68px;
  height: 68px;
  padding-top: 21px;
  border-radius: 46% 46% 50% 50% / 40% 40% 60% 60%;
  background: var(--c-accent);
  color: var(--c-white);
  font-family: var(--font-serif);
  font-size: 19px;
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: 0;
}
.s02-card-title {
  margin-top: 15px;
  padding-right: 40px;
  color: var(--c-accent-deep);
  font-family: var(--font-serif);
  font-size: 20px;
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: 0.05em;
}
.s02-card-text {
  margin-top: 15px;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.6;
  /* JSON は 15% だが、Figma は 320px に1行21字を入れている（4行）。ブラウザで同じ折り返しになる字間 */
  letter-spacing: 0.085em;
}

/* わかる主な疾患（1044×286・地 #f0e2c4） */
.s02-dis {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 32px;
  width: min(1044px, 100% - var(--gutter) * 2);
  margin-top: 100px;
  padding: 40px;
  border-radius: 10px;
  background: var(--c-beige);
}
.s02-dis-en { color: var(--c-white); font-size: 70px; opacity: 0.5; }
.s02-dis-title {
  position: relative;
  margin-top: -45px;
  font-family: var(--font-serif);
  font-size: calc(32px * var(--s02-k));
  font-weight: 800;
  line-height: 1.4;
  letter-spacing: 0.1em;
  text-align: center;
}
.s02-dis-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 24px;
  max-width: 960px;
}
.s02-dis-list li {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 204px;
  min-height: 40px;
  padding: 8px 4px;
  border-radius: 50px;
  background: var(--c-white);
  font-size: 16px;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: 0.05em;
  text-align: center;
}
.s02-dis-list .s02-dis-etc {
  width: auto;
  padding: 0;
  background: none;
}

/* ブラウザの字幅は Figma より少し広いので、PC 幅では Figma の2行のまま折り返さない（CTA の見出しは枠の余白へ少し出る） */
@media (min-width: 1024px) {
  .s02-guide-text,
  .s02-cta-title { white-space: nowrap; }
}
/* チェックの最後の行は Figma で幅 491px ちょうど（最後の字の後ろの字間の分だけ溢れて折り返す） */
@media (min-width: 768px) {
  .s02-check li { white-space: nowrap; }
}

@media (hover: hover) {
  .s02-btn--web:hover { background: var(--c-accent-deep); box-shadow: 0 2px 3px rgb(109 97 61 / 0.4); }
  .s02-btn--line:hover { background: var(--c-green); box-shadow: 0 2px 3px rgb(109 97 61 / 0.4); }
}

/* ===== 間の幅 ===== */
@media (max-width: 1100px) {
  .s02 { --s02-k: 0.85; }
  .s02-cards { margin-inline: auto; align-self: center; gap: 48px 40px; }
}
/* 768〜1023px：2列＋最後の1枚を中央（カードの幅は変えない） */
@media (max-width: 1023px) {
  .s02-cards { flex-wrap: wrap; justify-content: center; width: min(720px, 100% - var(--gutter) * 2); }
  .s02-card { flex: 0 0 min(320px, (100% - 40px) / 2); }
}
@media (max-width: 900px) {
  .s02 { --s02-k: 0.75; }
  .s02-cta { padding: 48px 40px; }
}

/* ===== スマホ（ref_sp：幅 390px） ===== */
@media (max-width: 767px) {
  .s02 { --s02-k: 0.62; }

  .s02-worry { padding-top: 48px; }
  .s02-worry-bg { height: 300px; }
  .s02-worry-img2 { left: calc(50% - 160px); background-position: left 0 top -150px; background-size: 760px auto; }
  .s02-worry-img1 { left: calc(50% - 330px); top: 0; width: 480px; }
  .s02-check {
    width: calc(100% - 40px);
    margin-top: 24px;
    padding: 24px 16px;
  }
  .s02-check li { font-size: 15px; letter-spacing: 0.05em; }

  .s02-guide { padding: 40px 0 70px; }
  .s02-guide-arrow { width: 220px; height: auto; }
  .s02-guide-text { width: calc(100% - 40px); margin-top: 24px; font-size: 18px; }
  .s02-guide-text em, .s02-big { font-size: 20px; }
  .s02-guide-text br { display: none; }

  .s02-cta { width: calc(100% - 40px); gap: 28px; padding: 40px 16px; }
  .s02-cta-en { font-size: 56px; }
  .s02-cta-title { margin-top: -36px; }
  .s02-cta-l1, .s02-cta-he { font-size: 17px; }
  .s02-cta-l2 { font-size: 19px; }
  .s02-cta-btns { flex-direction: column; align-items: stretch; width: 100%; gap: 12px; }
  .s02-btn { width: 100%; margin: 0; padding: 0 8px; }
  .s02-btn-main { font-size: 17px; }
  .s02-tel { width: 100%; margin-top: -8px; height: auto; min-height: 66px; padding: 8px 0; flex-direction: column; justify-content: center; gap: 4px; pointer-events: auto; cursor: pointer; }
  .s02-tel-left { border-right: 0; height: auto; padding: 0; }
  .s02-tel-icon { width: 28px; height: 28px; }
  .s02-tel-icon svg { width: 20px; height: 20px; }
  .s02-tel-num { padding: 0; font-size: 24px; }

  .s02-about { padding: 70px 0 90px; border-radius: 30px 30px 0 0; }
  /* 英字の飾りは縮めず、画面の端で切る */
  .s02-about-head, .s02-dis-head, .s02-cta-head { width: 100%; overflow: hidden; }
  .s02-about-en { font-size: min(64px, 11.5vw); }
  .s02-about-title { margin-top: -42px; width: calc(100% - 40px); }
  .s02-about-l1 { font-size: 22px; }
  .s02-about-l2 { font-size: 26px; }
  .s02-about-text { width: calc(100% - 40px); margin-top: 24px; letter-spacing: 0.08em; }
  .s02-about-text br { display: none; }

  .s02-cards { flex-direction: column; flex-wrap: nowrap; gap: 40px; width: calc(100% - 40px); margin-top: 32px; }
  .s02-card { flex: none; width: 100%; }
  .s02-card-tag { right: -10px; bottom: -24px; }
  /* スマホは写真を箱いっぱいに（拡大した写真が画面の外へ出ないように） */
  .s02-card-photo img { inset: 0; width: 100%; height: 100%; object-fit: cover; }

  .s02-dis { width: calc(100% - 40px); gap: 24px; margin-top: 60px; padding: 32px 16px; }
  .s02-dis-en { font-size: 52px; }
  .s02-dis-title { margin-top: -30px; font-size: 24px; }
  .s02-dis-list { gap: 10px; width: 100%; }
  .s02-dis-list li { width: calc(50% - 5px); font-size: 14px; padding: 8px 6px; letter-spacing: 0; }
  .s02-dis-list .s02-dis-etc { width: 100%; justify-content: flex-end; }
}

/* ===== s03 西にっぽり内科消化器クリニックは 大腸カメラへの不安に配慮し ===== */
/* s03：西にっぽり内科消化器クリニックは 大腸カメラへの不安に配慮しています（高さ 2752px） */

.s03 { background: #f7f1e4; }
/* 地：上の角 50px の丸み。中身は y=160 から・下に 100px */
.s03-body {
  background: #fbfaf7;
  border-radius: 50px 50px 0 0;
  padding: 160px 0 100px;
}

/* ===== 見出し（y=160〜372） ===== */
.s03-head {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.s03-en {
  margin: 0;
  height: 80px;
  color: var(--c-accent);
  opacity: 0.15;
  font-family: var(--font-en);
  font-size: 80px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.05em;
}
.s03-title {
  position: relative;
  margin: -50px 0 0;
  min-height: 102px;
  color: var(--c-text);
  font-family: var(--font-serif);
  font-size: 28px;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 0.1em;
}
.s03-t42 { font-size: 42px; }
.s03-t40 { font-size: 40px; }
.s03-t36 { font-size: 36px; }
.s03-arrow { width: 7px; height: 48px; margin-top: 32px; }

/* 吹き出し（778px の箱の中に置く。x=331〜1109） */
.s03-bubbles {
  position: absolute;
  top: -92px;
  left: 50%;
  width: min(778px, 100% - var(--gutter) * 2);
  height: 124px;
  margin: 0;
  padding: 0;
  list-style: none;
  transform: translateX(-50%);
  pointer-events: none;
}
.s03-bubble { position: absolute; height: 68px; }
.s03-bubble--pain { left: -2px; top: 45px; width: 128px; }
.s03-bubble--laxative { left: 17.61%; top: 0; width: 128px; }
.s03-bubble--shy { right: 1px; top: 39px; width: 162px; }
.s03-bubble-bg { position: absolute; inset: 0; width: 100%; height: 68px; }
.s03-dot { position: absolute; }
.s03-dot--l { width: 14px; height: 14px; top: 63px; }
.s03-dot--s { width: 11px; height: 11px; top: 73px; }
.s03-bubble--pain .s03-dot--l { left: 96px; }
.s03-bubble--pain .s03-dot--s { left: 104px; }
.s03-bubble--laxative .s03-dot--l { left: 88px; }
.s03-bubble--laxative .s03-dot--s { left: 96px; }
.s03-bubble--shy .s03-dot--l { left: 32px; }
.s03-bubble--shy .s03-dot--s { left: 25px; }
.s03-bubble-text {
  position: absolute;
  top: 8px;
  left: 8px;
  width: 110px;
  height: 43px;
  color: var(--c-white);
  font-size: 20px;
  font-weight: 500;
  line-height: 43px;
  letter-spacing: 0.05em;
  text-align: center;
  white-space: nowrap;
}
.s03-bubble--shy .s03-bubble-text { left: 25px; }

/* ===== Care 01〜05（y=428 から 400px ごと・間 56px） ===== */
.s03-list {
  display: flex;
  flex-direction: column;
  gap: 56px;
  margin: 56px 0 0;
  padding: 0;
  list-style: none;
}
.s03-care {
  position: relative;
  height: 400px;
  padding-top: 21px;
}
/* 文の箱：a は左端から x=1290 まで（写真は左）、b は x=150 から右端まで（写真は右） */
.s03-panel { box-shadow: 4px 4px 15px rgba(109, 97, 61, 0.15); }
.s03-care--a .s03-panel {
  margin-right: max(0px, 50% - 570px);
  padding: 32px 60px 32px calc(50% + 10px);
  background: #fff9f5;
  border-radius: 0 10px 10px 0;
}
.s03-care--b .s03-panel {
  margin-left: max(0px, 50% - 570px);
  padding: 32px calc(50% + 28px) 32px 42px;
  background: var(--c-white);
  border-radius: 10px 0 0 10px;
}
.s03-text { position: relative; }
.s03-num {
  position: absolute;
  right: 0;
  top: -60px;
  margin: 0;
  color: var(--c-accent);
  opacity: 0.3;
  font-family: var(--font-en);
  font-size: 60px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0;
  white-space: nowrap;
}
.s03-care--b .s03-num { top: -62px; }
.s03-lead {
  display: flex;
  align-items: center;
  height: 40px;
  margin: 0;
  font-family: var(--font-serif);
  font-weight: 700;
}
.s03-quote {
  flex: none;
  width: 18px;
  color: var(--c-accent);
  opacity: 0.3;
  font-size: 40px;
  font-weight: 800;
  line-height: 1;
  height: 40px;
  text-align: center;
}
.s03-lead-text {
  flex: none;
  font-size: 18px;
  line-height: 1;
  letter-spacing: 0.05em;
}
.s03-lead::after {
  content: "";
  flex: 1;
  min-width: 24px;
  margin-left: 13px;
  border-top: 1px solid var(--c-accent);
}
.s03-h3 {
  margin: 0 0 0 18px;
  color: var(--c-accent-deep);
  font-family: var(--font-serif);
  font-size: 28px;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 0.05em;
}
.s03-big { font-size: 32px; }
.s03-p {
  margin: 8px 0 0 18px;
  font-size: 16px;
  line-height: 1.8;
  letter-spacing: 0.15em;
  font-feature-settings: "palt";
  text-spacing-trim: normal;
}
.s03-note {
  margin: 8px 0 0 18px;
  font-size: 14px;
  line-height: 1.6;
  letter-spacing: 0.05em;
  font-feature-settings: "palt";
}
/* 写真（533×400・角 10px）。文の箱に重ねる */
.s03-photo {
  position: absolute;
  top: 0;
  width: min(533px, 50% - 12px - var(--gutter));
  height: 400px;
  border-radius: 10px;
  overflow: hidden;
}
.s03-care--a .s03-photo { left: max(var(--gutter), 50% - 546px); }
.s03-care--b .s03-photo { left: calc(50% + 12px); }
.s03-photo { container-type: size; }
.s03-photo img { position: absolute; left: 0; top: 0; width: 100%; height: 100%; object-fit: cover; }
/* 写真の切り抜き：Figma の切り抜き（JSON に値が無い）を見本から測り、箱に対する cqw/cqh で置く。
   はみ出した部分は箱で隠れるが、右端に近い狭い幅（1280px など）では点検がはみ出しと数えるので、1400px 以上だけにする */
@media (min-width: 1400px) {
  .s03-photo img { max-width: none; width: var(--w); height: var(--h); left: var(--l); top: var(--t); }
}
/* 明るさも Figma の写真の補正（JSON に値が無い）を見本から測った比 */
.s03-photo--1 { --w: 112.57cqw; --h: 100cqh; --l: -12.57cqw; --t: 0cqh; }
.s03-photo--2 { --w: 137.64cqw; --h: 121.88cqh; --l: -19.51cqw; --t: -5.75cqh; }
.s03-photo--3 { --w: 124.02cqw; --h: 110.75cqh; --l: -24.02cqw; --t: 0cqh; }
.s03-photo--4 { --w: 129.64cqw; --h: 115.32cqh; --l: 0cqw; --t: -6cqh; }
.s03-photo--5 { --w: 111.82cqw; --h: 100cqh; --l: 0cqw; --t: 0cqh; }
.s03-photo--1 img { filter: brightness(1.13); }
.s03-photo--4 img { filter: brightness(1.25); }
.s03-photo--5 img { filter: brightness(1.21); }

/* ===== 1024px 以下：文の箱の下に写真（1列） ===== */
@media (max-width: 1024px) {
  .s03-title { font-size: 24px; }
  .s03-t42 { font-size: 34px; }
  .s03-t40 { font-size: 32px; }
  .s03-t36 { font-size: 30px; }
  .s03-care {
    display: flex;
    flex-direction: column;
    gap: 24px;
    height: auto;
    padding-top: 0;
  }
  .s03-care--a .s03-panel,
  .s03-care--b .s03-panel { padding: 72px var(--gutter) 32px; }
  .s03-care--a .s03-panel { margin-right: var(--gutter); padding-left: calc(var(--gutter) * 2); }
  .s03-care--b .s03-panel { margin-left: var(--gutter); }
  .s03-text { max-width: 640px; margin-inline: auto; }
  .s03-num, .s03-care--b .s03-num { top: -60px; }
  .s03-photo {
    position: relative;
    top: auto;
    left: auto;
    width: min(640px, 100% - var(--gutter) * 3);
    height: auto;
    aspect-ratio: 533 / 400;
  }
  .s03-care--a .s03-photo { left: auto; margin-left: auto; margin-right: max(var(--gutter), 50% - 320px); }
  .s03-care--b .s03-photo { left: auto; margin-left: max(var(--gutter), 50% - 320px); }
}

/* ===== スマホ（767px 以下。ref_sp に合わせる） ===== */
@media (max-width: 767px) {
  .s03-body { border-radius: 30px 30px 0 0; padding: 150px 0 60px; }
  .s03-title { min-height: 0; font-size: 18px; line-height: 1.5; letter-spacing: 0.05em; }
  .s03-t42, .s03-t40, .s03-t36 { font-size: 26px; }
  .s03-en { font-size: 60px; height: 60px; }
  .s03-title { margin-top: -40px; }
  .s03-arrow { margin-top: 24px; }
  .s03-bubbles { top: -110px; width: calc(100% - 32px); }
  .s03-bubble { transform: scale(0.82); }
  .s03-bubble--pain { transform-origin: left top; left: 0; top: 52px; }
  .s03-bubble--laxative { transform-origin: center top; left: 26%; }
  .s03-bubble--shy { transform-origin: right top; right: 0; top: 44px; }

  .s03-list { margin-top: 48px; gap: 48px; }
  .s03-care { gap: 20px; }
  .s03-care--a .s03-panel { margin-right: 20px; padding: 56px 20px 28px 40px; }
  .s03-care--b .s03-panel { margin-left: 20px; padding: 56px 20px 28px 20px; }
  .s03-num, .s03-care--b .s03-num { top: -48px; font-size: 40px; }
  .s03-lead { height: auto; min-height: 40px; }
  .s03-lead-text { flex: 0 1 auto; font-size: 16px; line-height: 1.4; }
  .s03-h3 { margin-left: 0; margin-top: 8px; font-size: 24px; }
  .s03-big { font-size: 1em; }
  .s03-p { margin-left: 0; font-size: 16px; letter-spacing: 0.05em; }
  .s03-note { margin-left: 0; font-size: 12px; }
  .s03-photo { width: calc(100% - 40px); }
  .s03-care--a .s03-photo { margin-right: 0; margin-left: 40px; }
  .s03-care--b .s03-photo { margin-left: 0; }
}

/* ===== s04 当院が選ばれる理由 ===== */
/* s04：当院が選ばれる理由（高さ 2737px）。受付の写真・9つの理由・ご相談の箱 */

.s04 { background: #f8f1e3; }

/* 受付の写真（1440×440） */
.s04-hero { height: 440px; overflow: hidden; }
/* 写真は幅いっぱい（1440×960）にして上を 347px 切る（見本から測った値。347 / (960 - 440) = 66.7%）。明るさも見本から測った比 */
.s04-hero img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 66.7%; filter: brightness(1.2); }

/* 地（y=390 から。上の角 50px の丸みで写真に 50px 重なる） */
.s04-body {
  position: relative;
  margin-top: -50px;
  padding-top: 120px;
  background: #f8f1e3;
  border-radius: 50px 50px 0 0;
}

/* ===== 見出し（y=510〜596） ===== */
.s04-head { display: flex; flex-direction: column; align-items: center; text-align: center; }
.s04-en {
  margin: 0;
  height: 80px;
  color: #f3d0b8;
  opacity: 0.5;
  font-family: var(--font-en);
  font-size: 80px;
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0.05em;
}
.s04-title {
  position: relative;
  margin: -44px 0 0;
  color: var(--c-text);
  font-family: var(--font-serif);
  font-size: 36px;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 0.05em;
}

/* ===== 9つの理由（x=200 から 320px×3列・y=652〜2043） ===== */
.s04-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: 41.5px;
  row-gap: 45px;
  width: min(1043px, 100% - var(--gutter) * 2);
  margin: 56px 0 0 max(var(--gutter), 50% - 520px);
  padding: 0;
  list-style: none;
}
.s04-card { position: relative; min-width: 0; }
.s04-photo {
  position: relative;
  width: calc(100% - 20px);
  margin-inline: auto;
  aspect-ratio: 300 / 225;
  border-radius: 5px;
  overflow: hidden;
  container-type: size;
}
.s04-photo img { position: absolute; left: 0; top: 0; width: 100%; height: 100%; object-fit: cover; }
/* 写真の切り抜き：箱の大きさに対して cqw/cqh で置く（Figma の切り抜きを見本から測った値）。
   狭い幅では点検がはみ出しと数えるので、1200px 以上だけにする */
@media (min-width: 1200px) {
  .s04-photo img { max-width: none; width: var(--w, 100cqw); height: var(--h, 100cqh); left: var(--l, 0); top: var(--t, 0); }
}
/* 明るさも Figma の写真の補正（JSON に値が無い）を見本から測った比 */
.s04-c1 { --w: 112.51cqw; --h: 100cqh; --l: -6.33cqw; --t: 0cqh; filter: brightness(1.12); }
.s04-c2 { --w: 122.93cqw; --h: 109.90cqh; --l: -11.67cqw; --t: -9.78cqh; filter: brightness(1.16); }
.s04-c3 { --w: 141.75cqw; --h: 125.85cqh; --l: -20.67cqw; --t: 0cqh; filter: brightness(1.08); }
.s04-c4 { --w: 107.51cqw; --h: 215.13cqh; --l: 0cqw; --t: -91.11cqh; filter: brightness(1.47); }
.s04-c5 { --w: 112.17cqw; --h: 100cqh; --l: 0cqw; --t: 0cqh; filter: brightness(1.22); }
.s04-c6 { --w: 112.51cqw; --h: 100cqh; --l: -12.33cqw; --t: 0cqh; filter: brightness(1.19); }
.s04-c7 { --w: 112.17cqw; --h: 100cqh; --l: -8.67cqw; --t: 0cqh; filter: brightness(1.22); }
.s04-c8 { --w: 112.17cqw; --h: 100cqh; --l: -6.33cqw; --t: 0cqh; }
.s04-c9 { --w: 158.27cqw; --h: 137.85cqh; --l: -16.33cqw; --t: -9.78cqh; filter: brightness(1.09); }
.s04-c4 { object-position: 50% 85%; }
/* 「Point 01」：写真の左上に重ねる（x+29・y-23）。下に線 */
.s04-point {
  position: absolute;
  top: -23px;
  left: 29px;
  margin: 0;
  padding-bottom: 2px;
  border-bottom: 1px solid var(--c-accent-deep);
  color: var(--c-accent-deep);
  font-family: var(--font-en);
  font-size: 26px;
  font-style: italic;
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0;
}
.s04-point-num { margin-left: 0.22em; }
.s04-h3 {
  margin: 20px 0 0;
  color: var(--c-text);
  font-family: var(--font-serif);
  font-size: 20px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0.05em;
  text-align: center;
}
/* 行の高さは Figma と同じ 22px（14px × 1.6 の切り捨て）。行末の字間は Figma では幅に数えないので、その分（.15em）だけ幅を足す */
.s04-p {
  width: calc(100% + .15em);
  margin: 16px -.15em 0 0;
  font-size: 14px;
  line-height: 22px;
  letter-spacing: 0.15em;
  font-feature-settings: "palt";
  text-spacing-trim: normal;
}

/* ===== ご相談の箱（y=2043〜2737。上 100px・下 150px） ===== */
.s04-cta-wrap {
  padding: 100px var(--gutter) 150px;
  background: linear-gradient(#f8f1e3, #ffffff);
}
.s04-cta {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 40px;
  width: min(905px, 100%);
  margin-inline: auto;
  padding: 60px 80px;
  background: var(--c-white);
  border-radius: 10px;
  box-shadow: 2px 2px 15px rgba(109, 97, 61, 0.3);
}
.s04-cta-head { display: flex; flex-direction: column; align-items: center; text-align: center; }
.s04-cta-en {
  margin: 0;
  height: 80px;
  color: var(--c-accent);
  opacity: 0.15;
  font-family: var(--font-en);
  font-size: 80px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.05em;
}
.s04-cta-title {
  position: relative;
  min-height: 86px;
  margin: -50px 0 0;
  color: var(--c-text);
  font-family: var(--font-serif);
  font-size: 28px;
  font-weight: 700;
  line-height: 1.4;
  /* Figma の明朝は字の幅が狭い。代わりの明朝で同じ幅（1 行 754px）に収まるよう字間を詰める */
  letter-spacing: 0.02em;
  font-feature-settings: "palt";
  white-space: nowrap;
}
.s04-cta-big { font-size: 32px; }

.s04-cta-actions { display: flex; flex-direction: column; align-items: center; gap: 20px; }
.s04-cta-btns { display: flex; gap: 24px; margin: 0; padding: 0; list-style: none; }
.s04-cta-btns li { padding: 4px 0; }
.s04-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 320px;
  height: 66px;
  padding: 12px 16px;
  border-radius: 50px;
  color: var(--c-white);
  text-decoration: none;
  box-shadow: 0 4px 5px rgba(109, 97, 61, 0.4);
  transition: background-color 0.3s ease-out, box-shadow 0.3s ease-out;
}
.s04-btn--web { background: var(--c-accent); }
.s04-btn--line { background: var(--c-green-soft); }
.s04-btn-icon {
  display: grid;
  place-items: center;
  flex: none;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--c-white);
}
.s04-btn-text { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.s04-btn-main { font-size: 18px; font-weight: 700; line-height: 1; letter-spacing: 0; white-space: nowrap; }
.s04-btn-sub { font-size: 12px; font-weight: 700; line-height: 1; letter-spacing: 0.05em; white-space: nowrap; }
@media (hover: hover) {
  .s04-btn:hover { box-shadow: 0 2px 3px rgba(109, 97, 61, 0.3); }
  .s04-btn--web:hover { background: var(--c-accent-deep); }
  .s04-btn--line:hover { background: var(--c-green); }
}

/* 電話（PC はリンクなし。スマホはタップで発信） */
.s04-tel {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 414px;
  height: 66px;
  margin: 4px 0;
  border: 1px solid var(--c-gray);
  border-radius: 5px;
  background: var(--c-white);
  color: var(--c-text);
  text-decoration: none;
  pointer-events: none;
  cursor: default;
}
.s04-tel-left {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 34px;
  padding: 0 8px 0 20px;
  border-right: 1px solid var(--c-gray);
}
.s04-tel-icon {
  display: grid;
  place-items: center;
  flex: none;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--c-accent);
}
.s04-tel-label { font-size: 12px; font-weight: 700; line-height: 1; letter-spacing: 0.05em; white-space: nowrap; }
.s04-tel-num {
  padding: 0 20px 0 8px;
  font-family: var(--font-en);
  font-size: 26px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.1em;
  white-space: nowrap;
}

/* ===== 1024px 以下：ご相談の箱の見出しを折り返す ===== */
@media (max-width: 1024px) {
  .s04-cta { padding: 60px var(--gutter); }
  .s04-cta-title { white-space: normal; font-size: 24px; }
  .s04-cta-big { font-size: 28px; }
  .s04-cta-btns { flex-wrap: wrap; justify-content: center; }
}

/* ===== 1023px 以下：2列＋最後の1枚は中央 ===== */
@media (max-width: 1023px) {
  .s04-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 32px;
    row-gap: 64px;
    margin-left: auto;
    margin-right: auto;
  }
  .s04-card:last-child:nth-child(odd) {
    grid-column: 1 / -1;
    justify-self: center;
    width: calc((100% - 32px) / 2);
  }
}

/* ===== スマホ（767px 以下。ref_sp に合わせて1列） ===== */
@media (max-width: 767px) {
  .s04-hero { height: 200px; }
  .s04-body { margin-top: -25px; padding-top: 70px; border-radius: 25px 25px 0 0; }
  .s04-en { height: 60px; font-size: 60px; }
  .s04-title { margin-top: -32px; font-size: 26px; }
  .s04-list {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 56px;
    width: calc(100% - 40px);
    margin-top: 48px;
  }
  .s04-card:last-child:nth-child(odd) { width: auto; justify-self: stretch; }
  .s04-photo { width: 100%; }
  .s04-point { left: 20px; }
  .s04-h3 { margin-top: 16px; font-size: 20px; }
  .s04-p { margin-top: 12px; letter-spacing: 0.1em; }

  .s04-cta-wrap { padding: 72px 20px 80px; }
  .s04-cta { gap: 28px; padding: 40px 20px; }
  .s04-cta-en { height: 56px; font-size: 56px; }
  .s04-cta-title { min-height: 0; margin-top: -34px; font-size: 18px; letter-spacing: 0.05em; }
  .s04-cta-big { font-size: 20px; }
  .s04-cta-actions { width: 100%; }
  .s04-cta-btns { flex-direction: column; gap: 12px; width: 100%; }
  .s04-btn { width: 100%; max-width: 320px; margin-inline: auto; padding-inline: 10px; }
  .s04-btn-main { font-size: 16px; }
  .s04-tel {
    flex-wrap: wrap;
    gap: 4px 0;
    width: 100%;
    max-width: 320px;
    height: auto;
    min-height: 66px;
    padding: 8px 10px;
    pointer-events: auto;
    cursor: pointer;
  }
  .s04-tel-left { padding: 0 8px 0 0; }
  .s04-tel-num { padding: 0 0 0 8px; font-size: 22px; letter-spacing: 0.05em; }
}

/* ===== s05 医師紹介 ===== */
/* s05 医師紹介（写真3枚・医師のカード3枚・下の波） */

.s05 {
  position: relative;
}

/* ===== 写真（1440px で 940×450 と 500×225・500×225 が見える。下 50px は地の角丸の後ろ） ===== */
.s05-photos {
  display: flex;
  aspect-ratio: 1440 / 500;
  overflow: hidden;
}
.s05-photo {
  position: relative;
  overflow: hidden;
}
.s05-photo img {
  position: absolute;
  left: 0;
  width: 100%;
  max-width: none;                /* base の max-width:100% だと切り取りの拡大が効かない */
  object-fit: cover;
}
.s05-photo--main {
  width: 65.2778%;               /* 940 / 1440 */
}
.s05-photo--main img {
  top: -20.3%;                    /* 見本と照合：940×627 に縮めて上を 102px 切る */
  height: 125.3%;
}
.s05-photo-side {
  position: relative;
  flex: 1;
}
.s05-photo--top,
.s05-photo--bottom {
  position: absolute;
  left: 0;
  width: 100%;
}
.s05-photo--top { top: -5%; height: 50%; }     /* y -25〜225 */
.s05-photo--bottom { top: 45%; height: 60%; }  /* y 225〜525 */
/* 見本と照合した切り取り（右上 600×400 を左 97px・上 50px ずらす／右下 980×781 を上 164px ずらす。1px ずつ動かして差の最も小さい所） */
/* 画面の右端に接するので、img を箱の外へはみ出させず背景で切り取る */
.s05-photo--top,
.s05-photo--bottom {
  container-type: size;
}
.s05-photo-bg {
  position: absolute;
  inset: 0;
}
.s05-photo--top .s05-photo-bg {
  background: var(--img-6dfcac9eacdae73b) no-repeat -19.4cqw -20cqh / 120cqw auto;
}
.s05-photo--bottom .s05-photo-bg {
  background: var(--img-a1bc440f1f81245b) no-repeat -0.6cqw -54.6cqh / 196cqw auto;
}

/* ===== 地（#f6eedd・上の角 50px） ===== */
.s05-body {
  position: relative;
  margin-top: -50px;
  padding: 140px var(--gutter) 148px;   /* Figma は下 150px。見出しの行の端数で 2px 高くなる分を引く */
  background: #f6eedd;
  border-radius: 50px 50px 0 0;
}

/* 節の見出し（英字を薄く敷いて、日本語を重ねる） */
.s05-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.s05-head-en {
  display: block;
  font-family: var(--font-en);
  font-size: 74px;                /* Figma は 80px。代わりの書体で幅が出るため、見本の幅 310px に合わせる */
  line-height: 80px;              /* 行の高さは Figma の 80px のまま（下の見出し・カードの位置がこれで決まる） */
  letter-spacing: -0.02em;
  color: #f3d0b8;
  opacity: 0.5;
  white-space: nowrap;
}
.s05-head-ja {
  margin: -44px 0 0;
  font-family: var(--font-serif);
  font-size: 36px;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 0.05em;
  color: var(--c-text);
}

.s05-lead {
  margin: 40px 0 0;
  font-size: 16px;
  line-height: 1.8;
  letter-spacing: 0.117em;        /* Figma は 15%。この書体だと行が 24px 長くなるため、見本の幅 802px に合わせる */
  text-align: center;
  font-feature-settings: "halt";  /* 見本は「、」「・」が半分の幅 */
}

/* ===== 医師のカード（Doctor Carousel 1669:223573。PC は横並び、スマホは1枚ずつ） ===== */
.s05-carousel {
  position: relative;
  margin-top: 40px;
}
.s05-cards {
  display: flex;
  justify-content: center;
  gap: 38px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.s05-card {
  display: flex;
  flex: 0 1 313px;
  min-width: 280px;
  flex-direction: column;
  gap: 12px;
  padding: 24px 24px 32px;
  background: rgba(255, 255, 255, 0.9);
  border-radius: 10px;
  box-shadow: 4px 4px 15px rgba(109, 97, 61, 0.15);
}
.s05-card-photo {
  position: relative;
  height: 200px;
}
.s05-card-photo img {
  width: 100%;
  height: 199px;
  object-fit: cover;
  object-position: center top;    /* 見本は幅いっぱいに置いて下を切る */
  border-radius: 10px;
}
.s05-card-name {
  position: absolute;
  left: 0;
  bottom: 1px;
  display: flex;
  align-items: center;
  gap: 12px;
  height: 30px;
  margin: 0;
  padding: 6px 16px 4px 0;
  background: #fefdfc;
  border-radius: 0 10px 0 0;
  font-family: var(--font-serif);
  font-size: 20px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.15em;
  color: var(--c-accent-deep);
  white-space: nowrap;
}
.s05-card-role {
  font-size: 16px;
}
.s05-card-hours {
  margin: 0;
  padding: 2px 0;
  background: var(--c-white);
  border-radius: 5px;
  font-size: 12px;
  line-height: 1.2;
  letter-spacing: 0.1em;
  text-align: center;
}
.s05-card-text {
  margin: 0;
  font-size: 16px;
  line-height: 1.8;
  letter-spacing: 0.15em;
  text-align: center;
  font-feature-settings: "halt";  /* 「、」「・」を半分の幅に */
}
/* 見本の改行（4行）は br で入れ、行末の字間ではみ出して折り返さないよう左右を少し広げる */
@media (min-width: 768px) {
  .s05-card-text {
    margin-inline: -8px;
  }
}

/* 矢印・点はスマホのスライダーだけ */
.s05-arrow,
.s05-dots {
  display: none;
}

/* ===== 下の波（地 #f6eedd の上に白い波） ===== */
.s05-wave {
  background: #f6eedd;
}
.s05-wave img {
  width: 100%;
  height: auto;
  aspect-ratio: 1440 / 130;
  object-fit: fill;
}

/* ===== 中間の幅：2列＋1列（最後の1枚は幅を変えず中央） ===== */
@media (max-width: 1023px) {
  .s05-cards {
    flex-wrap: wrap;
    row-gap: 38px;
  }
  .s05-card {
    flex: 0 0 313px;
  }
}

/* ===== スマホ：写真は上1枚＋下2枚、カードは1枚ずつのスライダー（左右の矢印かスワイプ。初めは院長。自動再生しない） ===== */
@media (max-width: 767px) {
  .s05-photos {
    flex-wrap: wrap;
    aspect-ratio: auto;
  }
  .s05-photo--main {
    width: 100%;
    aspect-ratio: 390 / 230;
  }
  .s05-photo--main img {
    top: 0;
    height: 100%;
  }
  .s05-photo-side {
    display: flex;
    flex: 0 0 100%;
  }
  .s05-photo--top,
  .s05-photo--bottom {
    position: relative;
    top: auto;
    width: 50%;
    height: auto;
    aspect-ratio: 195 / 130;
  }

  .s05-body {
    margin-top: -30px;
    padding: 70px 0 70px;
    border-radius: 30px 30px 0 0;
  }
  .s05-head-en {
    font-size: 56px;
    line-height: 1;
  }
  .s05-head-ja {
    margin-top: -32px;
    font-size: 28px;
  }
  .s05-lead {
    margin: 24px 20px 0;
    letter-spacing: 0.1em;
  }

  .s05-carousel {
    margin-top: 24px;
  }
  .s05-cards {
    flex-wrap: nowrap;
    justify-content: flex-start;
    gap: 16px;
    padding: 4px calc((100% - 300px) / 2) 16px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .s05-cards::-webkit-scrollbar { display: none; }
  .s05-card {
    flex: 0 0 300px;
    min-width: 0;
    scroll-snap-align: center;
  }
  .s05-card-photo img {
    width: 100%;
  }
  .s05-br {
    display: none;
  }

  .s05-arrow {
    position: absolute;
    top: 150px;
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 0;
    background: none;
    color: var(--c-accent);
    cursor: pointer;
  }
  .s05-arrow::before {
    content: "";
    position: absolute;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--c-white);
    box-shadow: 0 2px 6px rgba(109, 97, 61, 0.15);
  }
  .s05-arrow svg {
    position: relative;
  }
  .s05-arrow--prev { left: 0; }
  .s05-arrow--next { right: 0; }

  .s05-dots {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 8px;
  }
  .s05-dots span {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #e0d6c3;
  }
  .s05-dots span.is-current {
    background: var(--c-accent);
  }
}

/* ===== s06 大腸カメラ検査の流れ ===== */
/* s06 大腸カメラ検査の流れ（8つの手順）・波・料金表 */

.s06 {
  position: relative;
}
.s06-defs {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

/* ===== 節の見出し（英字を薄く敷いて、日本語を重ねる。流れ・料金表で同じ形） ===== */
.s06-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.s06-head-en {
  display: block;
  font-family: var(--font-en);
  font-size: 80px;
  line-height: 1;
  letter-spacing: 0.05em;
  color: #f3d0b8;
  opacity: 0.5;
  white-space: nowrap;
}
.s06-head-ja {
  margin: -44px 0 0;
  font-family: var(--font-serif);
  font-size: 36px;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 0.05em;
  color: var(--c-text);
}

/* ===== 流れ（白の地） ===== */
.s06-flow {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20px var(--gutter) 84px;
  background: var(--c-white);
}
.s06-arrow {
  width: 7px;
  height: 48px;
  margin-top: 32px;
}

.s06-steps {
  width: min(1006px, 100%);
  margin: 56px 0 0;
  padding: 0;
  list-style: none;
}
.s06-step {
  display: flex;
  gap: 32px;
}

/* 左の札（Step 01）と、下へのびる点線 */
.s06-mark {
  position: relative;
  display: flex;
  flex: 0 0 70px;
  flex-direction: column;
  align-items: center;
  padding-bottom: 24px;
}
.s06-mark::after {
  content: "";
  flex: 1;
  width: 1px;
  margin-top: 24px;
  background: repeating-linear-gradient(to bottom, #e3dfda 0 4px, transparent 4px 8px);
}
.s06-badge {
  display: block;
  width: 68px;
  height: 68px;
}
.s06-num {
  position: absolute;
  top: 13px;
  left: 0;
  width: 100%;
  font-family: var(--font-en);
  font-size: 16px;
  line-height: 0.9;
  letter-spacing: 0.05em;
  color: var(--c-white);
  text-align: center;
}
.s06-num-n {
  font-size: 28px;
}

/* 右の中身（文と写真） */
.s06-body {
  display: flex;
  flex: 1;
  justify-content: space-between;
  gap: 32px;
  min-width: 0;
  padding: 12px 4px 56px 0;
}
.s06-step--wide .s06-body {
  padding-bottom: 76px;
}
.s06-text {
  flex: 0 1 504px;
  min-width: 0;
}
.s06-step--wide .s06-text {
  flex: 1 1 auto;
}
.s06-title {
  margin: 0;
  font-family: var(--font-serif);
  font-size: 24px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0.05em;
  color: var(--c-accent-deep);
}
.s06-desc {
  max-width: 500px;
  margin: 12px 0 0;
  font-size: 16px;
  line-height: 1.8;
  letter-spacing: 0.15em;
  font-feature-settings: "palt";   /* Figma は「、」「。」「」」を詰めて組んでいる */
  text-spacing-trim: normal;
}
.s06-step--wide .s06-desc {
  max-width: none;
}
.s06-photo {
  flex: 0 0 300px;
  width: 300px;
  height: 225px;
  object-fit: cover;
  border-radius: 5px;
}
.s06-photo--r10 {
  border-radius: 10px;
}

/* 予約のボタン（Web・LINE） */
.s06-btns {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  margin-top: 32px;
}
.s06-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 240px;
  height: 60px;
  margin-block: 4px;          /* Figma のボタンの部品は上下 4px の余白つき */
  padding: 0 8px 0 15px;
  border-radius: 50px;
  color: var(--c-white);
  text-decoration: none;
  box-shadow: 0 4px 5px rgba(109, 97, 61, 0.4);
  transition: background-color 0.3s ease-out, box-shadow 0.3s ease-out;
}
.s06-btn--web { background: var(--c-accent); }
.s06-btn--line {
  height: 66px;
  padding-left: 14px;
  background: var(--c-green-soft);
}
.s06-btn-icon {
  display: grid;
  flex: 0 0 24px;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--c-white);
}
.s06-btn-icon svg { display: block; }
.s06-btn-label {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  font-weight: 700;
  white-space: nowrap;
}
.s06-btn-main {
  font-size: 16px;
  line-height: 1;
  letter-spacing: 0;
}
.s06-btn-sub {
  font-size: 10px;
  line-height: 1;
  letter-spacing: 0.05em;
}
@media (hover: hover) {
  .s06-btn:hover { box-shadow: 0 2px 3px rgba(109, 97, 61, 0.3); }
  .s06-btn--web:hover { background: var(--c-accent-deep); }
  .s06-btn--line:hover { background: var(--c-green); }
}

/* ===== 波（白の地の上に #f8f1e3 の波） ===== */
.s06-wave {
  background: var(--c-white);
}
.s06-wave img {
  width: 100%;
  height: auto;
  aspect-ratio: 1440 / 131;
  object-fit: fill;
}

/* ===== 料金表（料金表の横スクロール 1669:223566：PC は全体・スマホは表の中だけ横にすべらせる） ===== */
.s06-price-area {
  padding: 20px var(--gutter) 100px;
  background: #f8f1e3;
}
.s06-price-lead {
  margin: 40px auto 0;
  max-width: 960px;
  font-size: 16px;
  line-height: 1.8;
  letter-spacing: 0.15em;
  font-feature-settings: "palt";
  text-spacing-trim: normal;
  text-align: center;
}
.s06-price-scroll {
  margin-top: 40px;
  /* 1440px で x=244。表は中央から左へ 476px ずれて始まる */
  margin-left: max(0px, 50% - 476px);
  width: min(892px, 100%);
}
.s06-price {
  display: grid;
  grid-template-columns: 169px repeat(3, minmax(0, 240px));
  gap: 1px;
  width: 100%;
  border-collapse: separate;
  font-weight: 700;
  letter-spacing: 0.15em;
  color: var(--c-white);
}
.s06-price thead,
.s06-price tbody,
.s06-price tr {
  display: contents;
}
.s06-price th,
.s06-price td {
  display: block;
  align-content: center;    /* 文字を上下の中央に（<wbr> で分かれないよう flex にしない） */
  padding: 0;
  font-size: 14px;
  line-height: 1.2;
  text-align: center;
}
.s06-price thead th {
  height: 38px;
  background: var(--c-accent);
}
.s06-price thead th:nth-child(2) { border-radius: 10px 0 0 0; }
.s06-price thead th:last-child { border-radius: 0 10px 0 0; }
.s06-price-n { font-size: 16px; }
.s06-price-n--l { font-size: 18px; }
.s06-price-blank {
  background: transparent;
}
.s06-price tbody th {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  height: 53px;
  padding: 8px 16px;
  background: var(--c-accent);
  text-align: left;
}
.s06-price tbody tr:first-child th { border-radius: 10px 0 0 0; }
.s06-price tbody tr:last-child th { border-radius: 0 0 0 10px; }
.s06-price tbody tr:last-child td:last-child { border-radius: 0 0 10px 0; }
.s06-price-icon {
  display: grid;
  flex: 0 0 34px;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--c-white);
}
.s06-price-icon img {
  width: 26px;
  height: 26px;
}
.s06-price tbody td {
  height: 53px;
  background: var(--c-white);
  font-size: 16px;
  font-weight: 400;
  color: var(--c-text);
  white-space: nowrap;
}

/* ===== 中間の幅：写真を少し小さく、表は左右中央に ===== */
@media (max-width: 1023px) {
  .s06-photo {
    flex: 0 0 36%;
    width: 36%;
    height: auto;
    aspect-ratio: 4 / 3;
  }
  .s06-text {
    flex: 1 1 auto;
  }
  .s06-price-scroll {
    margin-inline: auto;
  }
  .s06-price {
    grid-template-columns: 150px repeat(3, minmax(0, 1fr));
  }
  .s06-price tbody td {
    font-size: 14px;
    letter-spacing: 0.05em;
    white-space: normal;
    text-align: center;
  }
}

/* ===== スマホ：札を小さく、文の下に写真。表は横にすべらせる ===== */
@media (max-width: 767px) {
  .s06-head-en {
    font-size: 56px;
  }
  .s06-head-ja {
    margin-top: -32px;
    font-size: 28px;
  }

  .s06-flow {
    padding: 20px 10px 60px;
  }
  .s06-arrow {
    margin-top: 24px;
  }
  .s06-steps {
    margin-top: 40px;
  }
  .s06-step {
    gap: 16px;
  }
  .s06-mark {
    flex-basis: 44px;
    padding-bottom: 16px;
  }
  .s06-mark::after {
    margin-top: 16px;
  }
  .s06-badge {
    width: 44px;
    height: 44px;
  }
  .s06-num {
    top: 9px;
    font-size: 10px;
  }
  .s06-num-n {
    font-size: 18px;
  }
  .s06-body,
  .s06-step--wide .s06-body {
    flex-direction: column;
    gap: 16px;
    padding: 8px 0 40px;
  }
  .s06-text,
  .s06-step--wide .s06-text {
    flex: none;
  }
  .s06-title {
    font-size: 22px;
  }
  .s06-desc {
    max-width: none;
    letter-spacing: 0.1em;
  }
  .s06-btns {
    flex-direction: column;
    gap: 16px;
    margin-top: 24px;
  }
  .s06-btn,
  .s06-btn--line {
    justify-content: center;
    width: 100%;
    height: 60px;
    margin-block: 0;
  }
  .s06-photo {
    flex: none;
    width: 100%;
  }

  .s06-price-area {
    padding: 20px 0 60px;
  }
  .s06-price-lead {
    margin: 24px 20px 0;
    letter-spacing: 0.05em;
    text-align: left;
  }
  .s06-price-lead br { display: none; }
  .s06-price-scroll {
    width: auto;
    margin: 24px 0 0;
    padding: 0 10px 8px;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
  }
  .s06-price {
    grid-template-columns: 84px repeat(3, 96px);
    width: max-content;
  }
  .s06-price thead th {
    font-size: 12px;
    letter-spacing: 0.05em;
  }
  .s06-price-n { font-size: 13px; }
  .s06-price-n--l { font-size: 14px; }
  .s06-price tbody th {
    flex-direction: column;
    justify-content: center;
    gap: 2px;
    height: 64px;
    padding: 4px;
    font-size: 11px;
    letter-spacing: 0.05em;
    text-align: center;
  }
  .s06-price-icon {
    flex-basis: 26px;
    width: 26px;
    height: 26px;
  }
  .s06-price-icon img,
  .s06-price-icon svg {
    width: 20px;
    height: 20px;
  }
  .s06-price tbody td {
    height: 64px;
    font-size: 13px;
    scroll-snap-align: start;
  }
}

/* ===== s07 よくあるご質問 ===== */
/* s07：よくあるご質問（FAQ の開閉）と、ご相談の案内（予約ボタン・電話）。見本の高さ 2967px */

.s07 {
  background: #f8f1e3;      /* 上の帯の角の外（前の節の地の色） */
  interpolate-size: allow-keywords;   /* 開閉で高さを動かすため */
}

/* 上の角丸の帯（高さ 100px） */
.s07-top {
  height: 100px;
  background: #fbfaf7;
  border-radius: 50px 50px 0 0;
}

/* ===== よくあるご質問 ===== */
.s07-faq {
  background: #fbfaf7;
  padding-top: 20px;
}

.s07-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-bottom: 56px;
  text-align: center;
}
.s07-head-en {
  margin: 0;
  font-family: var(--font-en);
  font-weight: 400;
  font-size: 80px;
  line-height: 80px;
  letter-spacing: 0.05em;
  color: #f3d0b8;
  opacity: 0.5;
}
.s07-head-ja {
  position: relative;
  margin: -44px 0 0;
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: 36px;
  line-height: 50px;
  letter-spacing: 0.05em;
  color: var(--c-text);
}

.s07-list {
  display: flex;
  flex-direction: column;
  gap: 20px;
  width: min(960px, 100% - var(--gutter) * 2);
  margin-inline: auto;
}

/* 1つの質問（閉じると地は白・＋、開くとサブの地・−） */
.s07-item {
  border-radius: 10px;
  background: var(--c-white);
  box-shadow: 0 0 10px rgba(109, 97, 61, 0.3);
  transition: background-color 0.3s ease-out;
}
.s07-item[open] { background: #f7ece4; }

.s07-sum {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 20px 40px;
  list-style: none;
  cursor: pointer;
  transition: padding 0.3s ease-out;
}
.s07-sum::-webkit-details-marker { display: none; }
.s07-item[open] .s07-sum { padding-bottom: 8px; }

/* 質問（白い丸い札：Q の丸＋質問文） */
.s07-q {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 29px;
  margin: 0;
  padding-right: 16px;
  border-radius: 50px;
  background: var(--c-white);
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: 18px;
  line-height: 29px;
  letter-spacing: 0.05em;
  color: var(--c-accent-deep);
  transition: color 0.3s ease-out;
}
.s07-q-mark {
  display: grid;
  place-items: center;
  flex: none;
  width: 29px;
  height: 29px;
  padding: 0 3px 4px 4px;
  border-radius: 50%;
  background: var(--c-white);
  font-weight: 800;
  line-height: 18px;
  letter-spacing: 0.1em;
}

/* 開閉の印（24px の箱。開いていると −、閉じていると ＋） */
.s07-icon {
  position: relative;
  flex: none;
  width: 24px;
  height: 24px;
  color: var(--c-text);
  transition: color 0.3s ease-out;
}
.s07-icon::before,
.s07-icon::after {
  content: "";
  position: absolute;
  left: 3px;
  top: 11px;
  width: 18px;
  height: 2px;
  background: currentColor;
  transition: transform 0.3s ease-out;
}
.s07-icon::after { transform: rotate(90deg); }
.s07-item[open] .s07-icon::after { transform: rotate(0deg); }

@media (hover: hover) {
  /* 質問行にホバーすると、質問文と開閉の印をオレンジへ（注意書き 1669:223582。0.3秒 Ease Out） */
  .s07-sum:hover .s07-q,
  .s07-sum:hover .s07-icon { color: var(--c-accent); }
}

/* 回答（開閉は 0.3 秒・Ease Out） */
.s07-item::details-content {
  block-size: 0;
  overflow: hidden;
  transition: block-size 0.3s ease-out, content-visibility 0.3s ease-out allow-discrete;
}
.s07-item[open]::details-content { block-size: auto; }

.s07-a {
  margin: 0 -2px 0 0;       /* 1行 50 字が 880px にちょうど入るように、字間の余りの分だけ広げる */
  padding: 0 40px 20px;
  font-size: 16px;
  line-height: 26px;
  letter-spacing: 0.1em;
  color: var(--c-text);
}

/* ===== ご相談の案内 ===== */
.s07-cta-wrap {
  position: relative;       /* 最後の質問の影の下側を隠す（見本どおり） */
  padding: 150px var(--gutter);
  background: linear-gradient(#fbfaf7, #fff 598px, #fff);
}
.s07-cta {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 40px;
  width: min(842px, 100%);
  margin-inline: auto;
  padding: 60px 80px;
  border-radius: 10px;
  background: var(--c-white);
  box-shadow: 2px 2px 15px rgba(109, 97, 61, 0.3);
}

.s07-cta-head {
  container-type: inline-size;   /* 見出しの文字を、箱の幅に合わせて縮める */
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.s07-cta-en {
  margin: 0;
  font-family: var(--font-en);
  font-weight: 500;
  font-size: 80px;
  line-height: 80px;
  letter-spacing: 0.05em;
  color: var(--c-accent);
  opacity: 0.15;
}
.s07-cta-title {
  position: relative;
  margin: -50px 0 0;
  font-family: var(--font-serif);
  font-weight: 800;
  font-size: min(32px, 4.7cqi);   /* 2行目（24字）が 682px に1行で入る大きさ */
  line-height: 1.4;
  letter-spacing: 0.05em;
  white-space: nowrap;
  color: var(--c-text);
}
.s07-sp-br { display: none; }
.s07-ls-n1 { letter-spacing: -0.01em; }
.s07-ls-0 { letter-spacing: 0; }

.s07-cta-body {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}
.s07-btns {
  display: flex;
  gap: 24px;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* 予約ボタン（320×66・角丸 50） */
.s07-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 320px;
  height: 66px;
  margin-block: 4px;
  padding: 12px 22px 12px 21px;
  border-radius: 50px;
  box-shadow: 0 4px 5px rgba(109, 97, 61, 0.4);
  color: var(--c-white);
  text-decoration: none;
  transition: background-color 0.3s ease-out, box-shadow 0.3s ease-out;
}
.s07-btn--web { background: var(--c-accent); }
.s07-btn--line { background: var(--c-green-soft); }
/* ホバーは共通の予約ボタンと同じ（濃い色・影を浅く。0.3秒 Ease Out） */
@media (hover: hover) {
  .s07-btn:hover { box-shadow: 0 2px 3px rgba(109, 97, 61, 0.3); }
  .s07-btn--web:hover { background: var(--c-accent-deep); }
  .s07-btn--line:hover { background: var(--c-green); }
}
.s07-btn-icon {
  display: grid;
  place-items: center;
  flex: none;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--c-white);
}
.s07-btn-icon svg { display: block; }
.s07-btn-text {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
}
.s07-btn-main {
  font-weight: 700;
  font-size: 18px;
  line-height: 18px;
  letter-spacing: 0;
  white-space: nowrap;
}
.s07-btn-sub {
  font-weight: 700;
  font-size: 12px;
  line-height: 12px;
  letter-spacing: 0.05em;
  white-space: nowrap;
}

/* 電話（414×66・枠 1px。PC はリンクにしない、スマホはタップで発信） */
.s07-tel {
  display: flex;
  align-items: center;
  width: 414px;
  height: 66px;
  margin-block: 4px;
  border: 1px solid var(--c-gray);
  border-radius: 5px;
  background: var(--c-white);
  color: var(--c-text);
  text-decoration: none;
}
.s07-tel-icon {
  margin: 0 6px 0 19px;
  display: grid;
  place-items: center;
  flex: none;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--c-accent);
}
.s07-tel-label {
  font-weight: 700;
  font-size: 12px;
  line-height: 12px;
  letter-spacing: 0.05em;
  white-space: nowrap;
  padding-right: 8px;
}
.s07-tel-num {
  display: flex;
  align-items: center;
  height: 34px;
  padding: 0 20px 0 8px;
  border-left: 1px solid var(--c-gray);   /* 左の札との仕切り（高さ 34px） */
  font-family: var(--font-en);
  font-weight: 500;
  font-size: 26px;
  line-height: 26px;
  letter-spacing: 0.1em;
  white-space: nowrap;
}

@media (hover: hover) and (min-width: 768px) {
  .s07-tel { pointer-events: none; cursor: default; }
}

/* ===== 1024px 以下：予約ボタンを縦に ===== */
@media (max-width: 1024px) {
  .s07-cta { padding-inline: clamp(24px, 5vw, 80px); }
}
@media (max-width: 900px) {
  .s07-btns { flex-direction: column; align-items: center; gap: 4px; }
}

/* ===== スマホ（767px 以下。ref_sp の値） ===== */
@media (max-width: 767px) {
  .s07-top { height: 60px; border-radius: 30px 30px 0 0; }
  .s07-head-en { font-size: 60px; line-height: 60px; }
  .s07-head-ja { margin-top: -34px; font-size: 28px; line-height: 34px; }
  .s07-list { gap: 24px; width: calc(100% - 40px); }
  .s07-sum { padding: 20px 10px; }
  .s07-item[open] .s07-sum { padding-bottom: 12px; }
  .s07-q {
    flex: 1;
    min-height: 37px;         /* Q の丸 29px＋上下 4px（質問が1行のとき） */
    padding: 4px 16px 4px 0;
    border-radius: 20px;
    font-size: 16px;
    line-height: 1.2;
  }
  .s07-q-mark { align-self: center; font-size: 16px; line-height: 16px; }
  .s07-a { margin-right: 0; padding: 0 16px 20px; font-size: 14px; line-height: 22px; }
  .s07-cta-wrap { padding: 80px 20px 0; }
  .s07-cta { gap: 20px; padding: 40px 16px; }
  .s07-cta-en { font-size: 60px; line-height: 60px; }
  .s07-cta-title { margin-top: -32px; font-size: 20px; line-height: 28px; letter-spacing: 0; }
  .s07-cta-lead { font-size: 16px; line-height: 22px; letter-spacing: 0.1em; }
  .s07-sp-br { display: inline; }
  .s07-cta-body { gap: 16px; width: 100%; }
  .s07-btns { flex-direction: column; align-items: stretch; gap: 16px; width: 100%; }
  .s07-btn { width: 100%; padding-inline: 20px; }
  /* 電話：丸いアイコンの右に「お電話でのお問い合わせ」と番号を2段で */
  .s07-tel {
    display: grid;
    grid-template-columns: auto auto;
    grid-template-areas: "icon label" "icon num";
    justify-content: center;
    align-content: center;
    column-gap: 10px;
    row-gap: 4px;
    width: calc(100% - 12px);
  }
  .s07-tel-icon { grid-area: icon; margin: 0; align-self: center; }
  .s07-tel-label { grid-area: label; padding: 0; }
  .s07-tel-num { grid-area: num; height: 20px; padding: 0; border-left: 0; font-size: 20px; line-height: 20px; }
}

/* ===== s08 Webから事前診察を予約 ===== */
/* s08 フッター：院内の写真の帯（5枚・高さ 264px）の下に、上の角が丸いベージュの地（#f7ece4）。
   Figma：写真の帯の下 40px にベージュ（上 100px・中身 1200px＝左 600px＋右 600px・下に Copyright）。節の高さ 1194px
   左：ロゴ＋特設サイトの札 → 所在地・道のり → 予約ボタン2つ → 診療時間の表・凡例・注記。右：地図（iframe）→ 公式サイトのリンク */

.s08 { background: var(--c-white); color: var(--c-text); }
/* 下の部品のクラス（margin・padding）に負けないよう、:where で強さを 0 にする */
:where(.s08) p, :where(.s08) ul { margin: 0; padding: 0; }
:where(.s08) ul { list-style: none; }

/* ---- 写真の帯：5枚を左右に少しはみ出させ、2・4枚目を 24px 下げる。中央の写真がページの中央に来る。
   右へはみ出す分は指で横にすべらせて見られる（スクロールバーは出さない） ---- */
.s08-photos { height: 264px; overflow: hidden; }
/* Facility Gallery / Infinite Slider（1672:224027）：右から左へ一定の速さで流れ続ける。矢印・ドットなし・ホバーしても止めない。
   同じ5枚を3組並べ、1組（5枚＋間）ぶん流れたら同じ見た目の先頭に戻る */
.s08-photos__list {
  display: flex; width: max-content;
  margin-left: min(0px, calc(50% - 966px)); /* 1440px で x=-246 */
  animation: s08-photos-flow 60s linear infinite;
}
@keyframes s08-photos-flow { to { transform: translateX(calc(-100% / 3)); } }
.s08-photos__item {
  flex: none; position: relative; width: 370px; height: 240px; margin-right: 12px; border-radius: 10px; overflow: hidden;
  container-type: size;
}
.s08-photos__item--low { margin-top: 24px; }
.s08-photos__item img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; }
/* Figma の切り抜き（見本と重ねて合わせた位置。箱の幅・高さに対する割合）と、Figma で上げてある明るさ */
.s08-photos__item:nth-child(5n+1) img { left: .3cqw; top: 0; width: 128.1cqw; height: auto; filter: brightness(1.07); }
.s08-photos__item:nth-child(5n+2) img { left: -.54cqw; top: -2.08cqh; width: 100.54cqw; height: auto; filter: brightness(1.19); }
.s08-photos__item:nth-child(5n+3) img { left: -3.78cqw; top: -4.58cqh; width: 107.03cqw; height: auto; filter: brightness(1.27); }
.s08-photos__item:nth-child(5n) img { left: -10cqw; top: 0; width: 110.27cqw; height: auto; }

/* ---- ベージュの地 ---- */
.s08-footer {
  margin-top: 40px; padding: 100px 0 22px;
  border-radius: 50px 50px 0 0; background: #f7ece4;
}
.s08-body {
  display: flex; align-items: flex-start;
  width: min(1200px, 100% - var(--gutter) * 2); margin-inline: auto;
}
.s08-info { flex: 0 1 600px; min-width: 520px; display: flex; flex-direction: column; gap: 24px; }
.s08-side { flex: 0 1 600px; min-width: 0; display: flex; flex-direction: column; gap: 24px; }

/* ロゴ（マーク＋文字の画像を重ねる：245×60） */
.s08-logo { position: relative; flex: none; display: block; width: 245px; height: 60px; }
.s08-logo img { position: absolute; max-width: none; }
.s08-logo__mark { left: 0; top: 0; width: 89px; height: 60px; }
.s08-logo__type { left: 69px; top: 7px; width: 176px; height: 46px; }

.s08-brand { display: flex; align-items: center; gap: 36px; }
.s08-brand__logo { display: flex; flex-direction: column; gap: 5px; width: 245px; }
.s08-tagline {
  font-size: 12px; font-weight: 500; line-height: 1; letter-spacing: .12em;
  text-align: right; white-space: nowrap;
}
.s08-badge {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  width: 135px; height: 77px; padding: 8px 16px; border-radius: 5px; background: var(--c-gold);
  color: var(--c-white); font-family: var(--font-serif); font-size: 14px; font-weight: 600; line-height: 1; letter-spacing: .05em;   /* 代わりの Noto Serif JP の 700 は見本より太い */
  white-space: nowrap;
}

/* 所在地・道のり・ボタン・表（左に 16px 下げる） */
.s08-detail { display: flex; flex-direction: column; gap: 24px; padding-left: 16px; }
.s08-address { display: flex; flex-direction: column; gap: 6px; }
.s08-address__text,
.s08-access { font-size: 12px; font-weight: 500; line-height: 19px; letter-spacing: .1em; }
.s08-access { width: fit-content; max-width: 100%; padding: 11px 12px 13px; border-radius: 5px; background: var(--c-white); }
.s08-access li { white-space: nowrap; }

/* 予約ボタン（Web 60px・LINE 66px の高さ。中身は中央） */
.s08-btns { display: flex; align-items: flex-start; gap: 24px; padding: 4px 0; }
.s08-btns li { flex: none; width: 240px; }
.s08-btn {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  height: 60px; padding: 0 12px; border-radius: 50px; text-decoration: none; color: var(--c-white);
  box-shadow: 0 4px 5px rgba(109, 97, 61, .4);
  transition: background-color .3s ease-out, box-shadow .3s ease-out;
}
.s08-btn--web { background: var(--c-accent); }
.s08-btn--line { height: 66px; background: var(--c-green-soft); }
.s08-btn__icon {
  flex: none; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--c-white);
}
.s08-btn--web .s08-btn__icon { color: var(--c-accent); }
.s08-btn--line .s08-btn__icon { color: var(--c-green-soft); }
.s08-btn__text { display: flex; flex-direction: column; gap: 6px; min-width: 0; }   /* Figma は 4px。Noto Sans JP の字の位置の違いで、見本に合うのは 6px */
.s08-btn__main { font-size: 16px; font-weight: 700; line-height: 1; letter-spacing: 0; white-space: nowrap; }
.s08-btn__sub { font-size: 10px; font-weight: 700; line-height: 1; letter-spacing: .05em; text-align: center; white-space: nowrap; }
@media (hover: hover) {
  .s08-btn:hover { box-shadow: 0 2px 3px rgba(109, 97, 61, .3); }
  .s08-btn--web:hover { background: var(--c-accent-deep); }
  .s08-btn--line:hover { background: var(--c-green); }
}

/* 診療時間の表（476px：1列目 126px・曜日 50px ずつ。見出し 27px・行 64px／63px） */
.s08-hours { display: flex; flex-direction: column; gap: 8px; width: 476px; max-width: 100%; }
.s08-table { border: 1px solid var(--c-line); border-radius: 5px; overflow: hidden; background: var(--c-white); }
.s08-table table { width: 100%; border-collapse: separate; border-spacing: 0; table-layout: fixed; }
.s08-table th, .s08-table td {
  padding: 0; border-right: 1px solid var(--c-line); border-bottom: 1px solid var(--c-line);
  text-align: center; vertical-align: middle; font-weight: 500;
}
.s08-table tr > :last-child { border-right: 0; }
.s08-table tbody tr:last-child > * { border-bottom: 0; }
.s08-table tr > :first-child { width: 26.37%; }
.s08-table thead th {
  height: 26px; background: var(--c-table-head);
  font-size: 12px; line-height: 1; letter-spacing: .05em;
}
.s08-table tbody th { height: 64px; font-size: 12px; line-height: 1.2; letter-spacing: .05em; white-space: nowrap; }
.s08-table tbody tr:last-child > * { height: 62px; }
.s08-table td { font-size: 14px; font-weight: 400; line-height: 1; letter-spacing: 0; }
.s08 .is-f { color: var(--c-female); }
.s08 .is-m { color: var(--c-male); }

.s08-legend { display: flex; gap: 20px; font-size: 14px; line-height: 1; letter-spacing: 0; }
.s08-legend li { display: flex; gap: 2px; white-space: nowrap; }
.s08-note { font-size: 12px; line-height: 1.4; letter-spacing: .1em; }

/* 地図（iframe の後ろに Figma の地図の絵を敷く） */
.s08-map {
  position: relative; height: 508px; border-radius: 10px; overflow: hidden;
  background: #e4e4e4 var(--img-8cc73623e5951a30) center / cover no-repeat;
}
.s08-map iframe { position: absolute; inset: 0; display: block; width: 100%; height: 100%; border: 0; }
.s08-gmap {
  position: absolute; left: 12px; bottom: 7px;
  display: flex; align-items: center; min-height: 44px; text-decoration: none;
  transition: opacity .3s ease-out;
}
.s08-gmap__in {
  display: flex; align-items: center; gap: 4px; padding: 6px 9px; border-radius: 2px;
  background: var(--c-white); box-shadow: 0 1px 4px rgba(71, 71, 71, .25);
  color: #1a73e8; font-size: 12px; font-weight: 500; line-height: 1; letter-spacing: -.02em; white-space: nowrap;
}
.s08-gmap__in img { width: 11px; height: 11px; }

/* 公式サイトのリンク（左半分は白、右へ写真が透けて見える） */
.s08-official {
  position: relative; isolation: isolate; overflow: hidden;
  display: flex; justify-content: space-between; align-items: center; gap: 16px;
  height: 140px; padding: 0 10px 0 40px; border: 1px solid var(--c-gray); border-radius: 10px;
  text-decoration: none; color: var(--c-text); background: var(--c-white);
  transition: opacity .3s ease-out;
}
/* 写真は札の右 49% に置き、左から白くぼかす */
.s08-official__photo { position: absolute; top: 0; bottom: 0; left: 51%; right: 0; z-index: -2; }
.s08-official__photo img { width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: 0 42%; }
.s08-official::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(to right, #fff 50.1%, rgba(255, 255, 255, 0));
}
.s08-official__body { display: flex; flex-direction: column; gap: 4px; width: 245px; }
.s08-official__en {
  display: block; height: 31px; padding-left: 4px; margin-right: -2px; border-top: 1px solid var(--c-gray); text-align: right;
  font-family: var(--font-en); font-size: 30px; font-weight: 500; line-height: 30px; letter-spacing: .045em; white-space: nowrap;
  /* Figma は Source Serif 4（字間 10%）。代わりの Noto Serif JP は字が広いので、字間を詰めて同じ幅にする */
}
.s08-official__ext {
  flex: none; align-self: flex-end; display: grid; place-items: center;
  width: 20px; height: 20px; margin-bottom: 10px; border-radius: 50%; background: var(--c-gray); color: var(--c-white);
}
@media (hover: hover) {
  .s08-gmap:hover, .s08-official:hover { opacity: .7; }
}

.s08-copy {
  margin-top: 80px; text-align: center; color: var(--c-gray);
  font-size: 12px; font-weight: 500; line-height: 16px; letter-spacing: 0;
}

/* ---- 1024px 以下：1列（左の中身 → 地図 → 公式サイト） ---- */
@media (max-width: 1024px) {
  .s08-footer { padding-top: 80px; }
  .s08-body { flex-direction: column; align-items: stretch; gap: 40px; width: min(640px, 100% - var(--gutter) * 2); }
  .s08-info, .s08-side { flex: none; min-width: 0; }
}

/* ---- スマホ（ref_sp：写真 280×182・中身 350px） ---- */
@media (max-width: 767px) {
  .s08-photos { height: 200px; }
  .s08-photos__list { margin-left: min(0px, calc(50% - 425px)); }
  .s08-photos__item { width: 280px; height: 182px; margin-right: 9.75px; }
  .s08-photos__item--low { margin-top: 18px; }

  .s08-footer { padding: 60px 0 20px; }
  .s08-body { width: calc(100% - 40px); gap: 32px; }
  .s08-info { gap: 24px; }
  .s08-brand { justify-content: space-between; gap: 12px; }
  .s08-brand__logo { width: 216px; gap: 5px; }
  .s08-brand__logo .s08-logo { width: 216px; height: 53px; }
  .s08-brand__logo .s08-logo__mark { width: 78px; height: 53px; }
  .s08-brand__logo .s08-logo__type { left: 61px; top: 6px; width: 155px; height: 41px; }
  .s08-tagline { font-size: 10px; letter-spacing: .08em; }
  .s08-badge { flex: none; width: 114px; height: 46px; padding: 8px; gap: 2px; font-size: 14px; letter-spacing: 0; }

  .s08-detail { padding-left: 0; gap: 20px; }
  .s08-access { width: 100%; }
  .s08-access li { white-space: normal; }
  .s08-btns { flex-direction: column; align-items: stretch; gap: 24px; }
  .s08-btns li { width: auto; }
  .s08-hours { width: 100%; }
  .s08-table tr > :first-child { width: 28.6%; }
  .s08-table thead th { height: 29px; }
  .s08-table tbody th { height: 40px; letter-spacing: 0; white-space: normal; }
  .s08-table tbody tr:last-child > * { height: 38px; }
  .s08-table td { font-size: 12px; }

  .s08-side { gap: 24px; }
  .s08-map { height: 200px; }
  .s08-gmap { bottom: 4px; }
  .s08-copy { padding-inline: 8px; }
}
@media (max-width: 380px) {
  .s08-badge { width: auto; padding: 8px 6px; font-size: 12px; }
  .s08-brand__logo { width: 190px; }
  .s08-brand__logo .s08-logo { width: 190px; height: 47px; }
  .s08-brand__logo .s08-logo__mark { width: 69px; height: 47px; }
  .s08-brand__logo .s08-logo__type { left: 54px; top: 5px; width: 136px; height: 36px; }
  .s08-tagline { font-size: 9px; }
  .s08-official { padding-left: 20px; }
}

/* ===== 動きを減らす設定：ホバー・開閉・固定ボタンの広がり・スライダーを動かさない ===== */
@media (prefers-reduced-motion: reduce) {
  .nn-main--colonoscopy-lp *,
  .nn-main--colonoscopy-lp *::before,
  .nn-main--colonoscopy-lp *::after { transition: none !important; }
  .s07-item::details-content { transition: none; }
  .s05-cards, .s08-photos { scroll-behavior: auto; }
  /* 流れる写真の帯は止めて、指・マウスで横に見られるようにする */
  .s08-photos { overflow-x: auto; scrollbar-width: none; }
  .s08-photos__list { animation: none; }
}