/* 胃カメラLP（page-gastroscopy-lp.php）の CSS
   元：医院/nishinippori-scratch/HTML/胃カメラLP_PC_1604-226447/公開用/css/style.css（Figma との差の点検に合格したもの）
   WordPress に入れるために変えた所：
   - 全体の決まり（:root・*・body・img・a・.page）は .nn-main--gastroscopy-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）。ここではヘッダーのボタンの形だけ
   - 言語の切り替えは details（開閉・外側で閉じる）
   - スマホでは下の固定ボタンの高さぶん、ページの下に余白 */

/* 英字（Source Serif 4）は字の大きさ別の形（opsz）付きで読み込み直す。共通の読み込み（inc/custom/nn-front.php）は wght だけで、
   「Care 01」「REASON」などの大きい英字が Figma より広く太く出ていた（Care 01：208px → 180px、Figma 183px。2026-10-26） */
@import url("https://fonts.googleapis.com/css2?family=Source+Serif+4:opsz,wght@8..60,400..700&display=swap");

/* ===== 全体（静的 HTML の base。このページの中だけ） ===== */
.nn-main--gastroscopy-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; /* 濃いオレンジ */
  --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--gastroscopy-lp) *,
:where(.nn-main--gastroscopy-lp) *::before,
:where(.nn-main--gastroscopy-lp) *::after { box-sizing: border-box; }
:where(.nn-main--gastroscopy-lp) img { max-width: 100%; height: auto; display: block; }
:where(.nn-main--gastroscopy-lp) a { color: inherit; }

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

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

/* ===== 共通の部品 ===== */

/* 診療時間表（大きさは変数で節ごとに変える） */
.hours-table {
  --ht-head-size: 16px;
  --ht-head-pad: 7px;
  --ht-time-size: 18px;
  --ht-cell-size: 16px;
  --ht-row-h: 68px;
  --ht-first: 34.375%;
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  table-layout: fixed;
  border-top: 1px solid var(--c-line);
  border-left: 1px solid var(--c-line);
  border-radius: 5px 5px 0 0;
  color: var(--c-text);
  font-weight: 500;
  letter-spacing: 0.05em;
  text-align: center;
}
.hours-table th,
.hours-table td {
  border-right: 1px solid var(--c-line);
  border-bottom: 1px solid var(--c-line);
  padding: 0 4px;
  vertical-align: middle;
  font-weight: 500;
}
.hours-table thead th {
  background: var(--c-table-head);
  padding-block: var(--ht-head-pad);
  font-size: var(--ht-head-size);
  line-height: 1;
}
.hours-table thead th:first-child { width: var(--ht-first); border-top-left-radius: 5px; }
.hours-table thead th:last-child { border-top-right-radius: 5px; }
.hours-table tbody th,
.hours-table tbody td {
  background: var(--c-white);
  height: var(--ht-row-h);
}
.hours-table tbody th {
  font-size: var(--ht-time-size);
  line-height: 1.2;
}
.hours-table tbody td {
  font-size: var(--ht-cell-size);
  line-height: 1;
  letter-spacing: 0;
}
.hours-table .is-female { color: var(--c-female); }
.hours-table .is-male { color: var(--c-male); }
.hours-table .is-off { color: var(--c-gray); }
.hours-table .is-open { color: var(--c-accent); }

.hours-table--s {
  --ht-head-size: 14px;
  --ht-head-pad: 7px;
  --ht-time-size: 16px;
  --ht-cell-size: 14px;
  --ht-row-h: 64px;
  --ht-first: 28.57%;
}

@media (max-width: 767px) {
  .hours-table,
  .hours-table--s {
    --ht-head-size: 13px;
    --ht-time-size: 13px;
    --ht-cell-size: 12px;
    --ht-row-h: 56px;
    --ht-first: 30%;
  }
  .hours-table th,
  .hours-table td { padding-inline: 2px; }
}

/* ===== s01 女性医師チームが、 苦痛に配慮した 胃カメラ検査を行います ===== */
/* s01：ヘッダー・FV（キャッチと3つの特長）・右と下の固定ボタン（Figma 0〜1024px） */

.s01 { position: relative; }
.s01 ul { list-style: none; margin: 0; padding: 0; }
.s01 p { margin: 0; }
.s01 a { text-decoration: none; }
.s01-defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.s01-sp { display: none; }

/* ===== FV（1440×1024。写真＋左を白くする帯＋人物の切り抜き） =====
   写真は幅 147.01%（1440px で 2117px）にして、左 0・上 -20px に置く（見本と照合） */
.s01-fv {
  position: relative;
  isolation: isolate;
  min-height: 1024px;
  padding-bottom: 60px;
  background: #e9e6e0;
}
.s01-bg { position: absolute; inset: 0; z-index: -1; overflow: hidden; container-type: inline-size; }
.s01-bg-filters { position: absolute; width: 0; height: 0; overflow: hidden; }
.s01-bg-photo {
  position: absolute;
  inset: 0;
  background: var(--img-ace17f6a17c69d72) 0 -1.39cqw / 147.01cqw auto no-repeat;
  filter: url(#s01-tone-bg);
}
/* 医師の層は背景の層と色の調子が違う（見本では医師がくっきり濃い） */
.s01-bg-photo--cut { background-image: var(--img-e7421f8c9a55d2f2); filter: url(#s01-tone-cut); }
.s01-bg-veil {
  position: absolute;
  left: 0;
  top: 0;
  width: 75.83%;
  height: 100%;
  background: linear-gradient(to right, rgb(255 255 255 / 0.65) 51.9%, rgb(255 255 255 / 0) 100%);
}

/* ===== ヘッダー（高さ 117px・左右 40px。PC は固定しない） ===== */
.s01-header {
  position: relative;
  z-index: 3;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px 0;
  min-height: 117px;
  padding: 20px 40px;
}
.s01-header-left { display: flex; align-items: center; gap: 32px; }
.s01-logo { display: flex; flex-direction: column; gap: 5px; width: 245px; color: var(--c-text); }
.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;
  margin-right: -0.12em;
}
/* 大腸カメラ検査 特設サイト（143×77・金） */
.s01-special {
  display: flex;
  width: 143px;
  height: 77px;
  border-radius: 5px;
  background: var(--c-gold);
  color: var(--c-white);
  transition: opacity 0.3s ease-out;
}
.s01-special-in {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  font-family: var(--font-serif);
  font-size: 17px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0;
  white-space: nowrap;
}

.s01-header-right { display: flex; align-items: center; gap: 24px; height: 74px; margin-left: auto; }

/* 言語の切り替え（93×52）。押すと一覧を開く（外側を押すと閉じる：lp.js） */
.s01-lang { position: relative; color: var(--c-text); }
.s01-lang-sum {
  display: block;
  list-style: none;
  cursor: pointer;
}
.s01-lang-sum::-webkit-details-marker { display: none; }
.s01-lang-box {
  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);
  transition: color 0.3s ease-out;
}
.s01-lang-globe { width: 18px; height: 18px; }
.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-text svg { transition: transform 0.3s ease-out; }
.s01-lang[open] .s01-lang-text svg { transform: rotate(180deg); }
.s01 .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; }
/* 開閉は 0.3秒 Ease Out（注意書き 1668:223502）。::details-content が使える環境では、閉じる動きも見せる */
@supports selector(::details-content) {
  .s01-lang:not([open]) .s01-lang-list { display: block; visibility: hidden; transition: visibility 0s 0.3s; }   /* 閉じている間は押せない・指で押す点検にも数えない（閉じる動きの 0.3秒の後に隠す。2026-10-26） */
  .s01-lang::details-content {
    opacity: 0;
    transition: opacity 0.3s ease-out, content-visibility 0.3s ease-out allow-discrete;
  }
  .s01-lang[open]::details-content { opacity: 1; }
  @starting-style {
    .s01-lang[open]::details-content { opacity: 0; }
  }
}
@media (prefers-reduced-motion: reduce) {
  .s01-lang::details-content { transition: none; }
}

/* 電話（PC はリンクにしない） */
.s01-tel { display: flex; flex-direction: column; align-items: center; gap: 4px; width: 222px; color: var(--c-text); }
.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 .s01-tel-num {
  display: flex;
  align-items: center;
  gap: 1px;
  height: 28px;
  font-family: var(--font-en);
  font-size: 28px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.068em; /* 見本の幅 190px に合わせる（Figma は 10%） */
  white-space: nowrap;
}
.s01-tel-num svg { flex: none; width: 31px; height: 31px; }

/* 予約ボタン（Web 240×60・LINE 240×66） */
.s01-hbtns { display: flex; align-items: center; gap: 12px; height: 74px; }
.s01-rbtn,
.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-rbtn { width: 240px; height: 60px; padding: 0 12px; }
.s01-rbtn--line { height: 66px; }
.s01-rbtn--web, .s01-fbtn--web { background: var(--c-accent); }
.s01-rbtn--line, .s01-fbtn--line { background: var(--c-green-soft); }
.s01-rbtn-icon {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--c-white);
}
.s01-rbtn--web .s01-rbtn-icon, .s01-fbtn--web .s01-rbtn-icon { color: var(--c-accent); }
.s01-rbtn--line .s01-rbtn-icon, .s01-fbtn--line .s01-rbtn-icon { color: var(--c-green-soft); }
.s01-rbtn-text { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.s01-rbtn-main, .s01-fbtn-main {
  font-size: 16px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0;
  white-space: nowrap;
}
.s01-rbtn-sub, .s01-fbtn-sub {
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.05em;
  white-space: nowrap;
}

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

/* ===== キャッチ（x=108・y=244） ===== */
.s01-lead {
  position: relative;
  z-index: 1;
  margin: 127px 0 0 max(var(--gutter), 50% - 612px);
  color: var(--c-ink);
  font-family: var(--font-serif);
  font-weight: 800;
}
.s01-lead-sub {
  display: inline-block;
  min-width: 516px;
  padding: 10px;
  border-block: 1px solid var(--c-text);
  font-size: 26px;
  line-height: 31px;
  letter-spacing: 0.025em;
  font-feature-settings: "palt";
  text-shadow: 0 0 20px #fff;
}
.s01-title {
  --s01-big: 58px;
  margin: 15px 0 0;
  font-size: calc(var(--s01-big) * 50 / 58);
  font-weight: 800;
  line-height: calc(var(--s01-big) * 1.3);
  letter-spacing: 0.1em;
  white-space: nowrap;
  text-shadow: 0 0 20px #fff;
}
.s01-title .s01-l { font-size: var(--s01-big); line-height: 1; }

/* ===== 3つの特長（240×240・間 20px） ===== */
.s01 .s01-points {
  position: relative;
  z-index: 1;
  display: flex;
  gap: 20px;
  margin: 58px 0 0 max(var(--gutter), 50% - 612px);
}
.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-bottom: 18px;
  border-radius: 5px;
  background: rgb(240 226 196 / 0.85);
}
.s01-point:nth-child(3) img { margin-bottom: 0; }
.s01-point:nth-child(3) { gap: 10px; }
.s01-point-text {
  color: var(--c-ink);
  font-family: var(--font-serif);
  font-size: 20px;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 0;
  text-align: center;
  white-space: nowrap;
}
.s01-point-text .s01-l { font-size: 24px; }
.s01-point-text .s01-m { font-size: 23px; }
.s01-k1 { letter-spacing: -0.02em; }
.s01-k2 { letter-spacing: -0.27em; }
.s01-k3 { letter-spacing: -0.05em; }
.s01-k4 { letter-spacing: -0.21em; }
.s01-k5 { font-size: 18px; letter-spacing: -0.26em; }
.s01-point:nth-child(1) .s01-point-text { height: 89px; }
.s01-point:nth-child(2) .s01-point-text { height: 98px; }
.s01-point:nth-child(3) .s01-point-text { height: 96px; }

/* ===== 右の固定ボタン（大腸カメラ検査 特設サイト。58×248・右の中央。1770:217003） ===== */
.s01-side {
  position: fixed;
  z-index: 50;
  right: 0;
  top: calc(50% + 24px);
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  width: auto;
  padding: 30px 20px;
  border-radius: 5px 0 0 5px;
  background: var(--c-accent);
  color: var(--c-white);
  box-shadow: 0 0 10px rgb(109 97 61 / 0.15);
  transition: padding 0.3s ease-out, background-color 0.3s ease-out;
}
.s01-side-text {
  writing-mode: vertical-rl;
  width: 18px;
  font-family: var(--font-serif);
  font-size: 14px;
  font-weight: 800;
  line-height: 18px;
  letter-spacing: 0;
  white-space: nowrap;
}
.s01-side svg { flex: none; margin-top: 0; }

/* ===== 下の固定ボタン（PC：右下。529×78。1672:224398） ===== */
.s01-float {
  position: fixed;
  z-index: 50;
  right: 0;
  bottom: 52px;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 8px 30px 8px 20px;
  border-radius: 10px 0 0 10px;
  background: var(--c-beige);
}
.s01-fbtn {
  width: 209px;
  height: 54px;
  margin-block: 4px;
  padding: 0 12px;
}
.s01-fbtn + .s01-fbtn { margin-left: -8px; }
.s01-fbtn-text { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; min-width: 97px; }
.s01-top {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  width: 44px;
  height: 44px;
  margin: -1px -3.5px;
  color: var(--c-text);
  transition: opacity 0.3s ease-out;
}
.s01-top svg { flex: none; width: 24px; height: 24px; }
.s01-top span {
  margin-top: -8px;
  font-family: var(--font-en);
  font-size: 18px;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: 0.05em;
}

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

/* ===== 間の幅：ヘッダーのボタンを少し細く。入りきらなければ2段に ===== */
@media (max-width: 1360px) {
  .s01-header-left { gap: 16px; }
  .s01-tel { width: auto; min-width: 200px; }
  .s01-tel-label { letter-spacing: 0.12em; }
  .s01 .s01-tel-num { font-size: 24px; }
  .s01-rbtn { width: 210px; padding: 0 8px; }
  .s01-rbtn-main { font-size: 14px; }
}
@media (max-width: 1240px) {
  .s01-lead { margin-top: 60px; }
}
@media (max-width: 1100px) {
  .s01-title { --s01-big: clamp(34px, 5.3vw, 58px); }
}
@media (max-width: 1024px) {
  .s01-fv {
    min-height: 0;
    padding-bottom: 120px;
  }
  .s01-bg-photo { background-size: cover; background-position: 62% 20%; }
  .s01-bg-veil { width: 100%; background: linear-gradient(to right, rgb(255 255 255 / 0.7) 45%, rgb(255 255 255 / 0) 100%); }
  .s01-header { padding-inline: var(--gutter); }
  .s01-header-right { flex-wrap: wrap; justify-content: flex-end; height: auto; row-gap: 12px; }
  .s01-tel { padding: 4px 8px; border-radius: 4px; background: rgb(255 255 255 / 0.85); }
  .s01-lead-sub { min-width: 0; font-size: clamp(20px, 2.6vw, 26px); line-height: 1.2; }
}
@media (max-width: 900px) {
  .s01-point-text { font-size: 18px; }
  .s01-point-text .s01-l { font-size: 21px; }
  .s01-point-text .s01-m { font-size: 20px; }
  .s01-k5 { font-size: 16px; }
  .s01 .s01-points { gap: 12px; margin-right: var(--gutter); }
}

/* ===== スマホ（ref_sp：幅 390px。ヘッダー 78px・FV 720px） ===== */
@media (max-width: 767px) {
  .s01-pc { display: none; }
  .s01-sp { display: inline; }

  .s01-fv { padding-bottom: 54px; }
  .s01-bg-photo { background-size: auto 600px; background-position: calc(50% + 120px) 200px; }
  .s01-bg-veil { background: linear-gradient(to right, rgb(255 255 255 / 0.65) 51.9%, rgb(255 255 255 / 0) 100%); }

  .s01-header { display: block; height: 78px; min-height: 0; padding: 10px 12px 0; }
  .s01-logo { width: 190px; gap: 5px; }
  .s01-logo-img { width: 180px; height: 44px; }
  .s01-logo-mark { width: 65px; height: 44px; }
  .s01-logo-type { left: 51px; top: 5px; width: 129px; height: 34px; }
  .s01-logo-sub { font-size: 10px; letter-spacing: 0.08em; text-align: left; }
  /* 特設サイト（見た目 76×30。押す所は高さ 44px） */
  .s01-special {
    position: absolute;
    top: 1px;
    right: 78px;
    width: 76px;
    height: 44px;
    align-items: center;
    background: none;
  }
  .s01-special-in {
    height: 30px;
    gap: 2px;
    border-radius: 3px;
    background: var(--c-gold);
    font-size: 10px;
  }
  .s01-header-right { position: absolute; top: 36px; right: 74px; height: 44px; margin: 0; }
  .s01-tel, .s01-hbtns { display: none; }
  .s01-lang-sum { display: flex; align-items: center; height: 44px; }
  .s01-lang-box { flex-direction: row; justify-content: center; width: 84px; height: 24px; padding: 0 6px; }
  .s01-lang-globe { display: none; }
  .s01-lang-text { font-size: 10px; gap: 4px; padding-left: 0; }
  .s01 .s01-lang-list { top: 100%; left: auto; right: 0; min-width: 120px; }

  /* メニューを開くボタン（ハンバーガー 26×18。押す所は 48px） */
  .s01-spmenu { display: block; position: absolute; top: 15px; right: 4px; }
  .s01-spmenu-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
  }
  .s01-spmenu-lines {
    width: 26px;
    height: 18px;
    background:
      linear-gradient(var(--c-text), var(--c-text)) 0 0 / 100% 2px no-repeat,
      linear-gradient(var(--c-text), var(--c-text)) 0 50% / 100% 2px no-repeat,
      linear-gradient(var(--c-text), var(--c-text)) 0 100% / 100% 2px no-repeat;
  }

  /* キャッチ（x=14・y=105） */
  .s01-lead { margin: 27px 14px 0; }
  .s01-lead-sub { padding: 8px 4px; font-size: 14px; line-height: 17px; letter-spacing: -0.05em; }
  .s01-title { --s01-big: 32px; font-size: 28px; line-height: 40px; letter-spacing: 0.07em; white-space: normal; }

  /* 3つの特長：350×80 を縦に（間 10px） */
  .s01 .s01-points { flex-direction: column; gap: 10px; margin: 194px 20px 0; }
  .s01-point {
    flex: none;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    height: 80px;
    padding: 0;
  }
  .s01-point img { width: auto; height: 54px; }
  .s01-point:nth-child(3) img { height: 44px; margin-top: 0; }
  .s01-point-text { font-size: 14px; }
  .s01 .s01-point:nth-child(n) .s01-point-text { height: auto; }
  .s01-point-text .s01-l { font-size: 18px; }
  .s01-point-text .s01-m { font-size: 17px; }
  .s01-point-text--1 { font-size: 14px; }
  .s01-k5 { font-size: 13px; }

  .s01-side { display: none; }

  /* 下の固定ボタン：Web・LINE・TOP を横並び（最大 390px で中央） */
  .s01-float {
    left: 50%;
    right: auto;
    bottom: 0;
    transform: translateX(-50%);
    width: min(390px, 100%);
    gap: 1px;
    padding: 0 0 env(safe-area-inset-bottom);
    border-radius: 0;
    background: var(--c-white);
  }
  .s01-fbtn {
    flex: 1 1 0;
    min-width: 0;
    width: auto;
    height: 44px;
    margin: 0;
    border-radius: 0;
    box-shadow: none;
  }
  .s01-fbtn + .s01-fbtn { margin-left: 0; }
  .s01-fbtn .s01-rbtn-icon { background: none; color: var(--c-white); }
  .s01-fbtn .s01-rbtn-icon svg { width: 24px; height: 24px; }
  .s01-fbtn-text { min-width: 0; }
  .s01-fbtn-main { font-family: var(--font-serif); font-size: 18px; font-weight: 800; }
  .s01-fbtn-sub { display: none; }
  .s01-top {
    flex: none;
    justify-content: center;
    margin: 0;
    background: var(--c-gray);
    color: var(--c-white);
  }
  .s01-top svg { width: 20px; height: 20px; }
  .s01-top span { margin-top: -4px; font-size: 12px; line-height: 1.2; }
}

/* ===== s02 続く胃の不調を、 いつものことにしていませんか？ ===== */
/* s02：続く胃の不調を・確認することが大切・相談の CTA・胃カメラ検査で直接確認・わかる主な疾患（Figma 1024〜3531px） */

.s02 { position: relative; background: var(--c-bg); color: var(--c-text); }
.s02 ul { list-style: none; margin: 0; padding: 0; }
.s02 p { margin: 0; }
.s02 a { text-decoration: none; }
.s02-defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.s02-spbr { display: none; }

/* 見出しの共通（うしろの英字は薄く重ねる） */
.s02-head { position: relative; display: flex; flex-direction: column; align-items: center; margin: 0; }
.s02-head-en {
  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;
}
.s02-head-en--white { color: var(--c-white); font-size: 70px; opacity: 0.5; }
.s02-head-ja {
  position: relative;
  margin-top: -50px;
  font-family: var(--font-serif);
  font-weight: 800;
  text-align: center;
}

/* ===== 続く胃の不調を（地 #f4e9da・高さ 566px） ===== */
.s02-worry { padding-bottom: 0; background: #f4e9da; }
/* 写真の帯（1440×455）：女性の写真＋男性の写真 70%＋中央を白く＋全体を暗く 40% */
.s02-hero {
  position: relative;
  isolation: isolate;
  height: 455px;
  padding-top: 103px;
  background: var(--img-bc179352a78c5bb1) right -464px top -263px / 1280px auto no-repeat, #b9b6b0;
}
.s02-hero::before,
.s02-hero::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.s02-hero::before {
  background: var(--img-f69cd49b7f41c578) left -94px top -20px / 720px auto no-repeat;
  opacity: 0.7;
}
.s02-hero::after {
  background:
    linear-gradient(rgb(34 32 26 / 0.4), rgb(34 32 26 / 0.4)),
    linear-gradient(to right, rgb(255 255 255 / 0) 0%, rgb(255 255 255 / 0.95) 38%, rgb(255 255 255 / 0.95) 60.8%, rgb(255 255 255 / 0) 100%);
}
.s02-hero-title {
  margin: 0;
  color: var(--c-white);
  font-family: var(--font-serif);
  font-size: 36px;
  font-weight: 800;
  line-height: 1.4;
  letter-spacing: -0.12em;
  text-align: center;
  text-shadow: 0 0 17px #383838, 0 0 3px #343434;
}
/* 当てはまる症状（581×321・帯に 210px 重ねる） */
.s02 .s02-checks {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 4px;
  width: min(581px, 100% - var(--gutter) * 2);
  margin: -210px auto 0;
  padding: 40px 60px;
  border-radius: 10px;
  background: var(--c-white);
}
.s02-checks li {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 0;
  border-bottom: 1px dashed #d9d9d9;
}
.s02-checks svg { flex: none; width: 18px; height: 16px; }
.s02-checks p {
  font-size: 16px;
  font-weight: 500;
  line-height: 22px;
  letter-spacing: 0.1em;
  white-space: nowrap;
}
.s02-checks b { color: var(--c-green); font-weight: 700; }
.s02-checks b.s02-g2 { color: var(--c-green-soft); }

/* ===== 確認することが大切です＋CTA（高さ 818px） ===== */
.s02-advice {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 32px;
  padding: 32px 0 100px;
  background: linear-gradient(#f3e7d6, #fef6e9 53.4%, #fefdfc);
}
.s02-arrow { width: 338px; height: 51px; margin-top: 16px; }
.s02-advice-text {
  font-family: var(--font-serif);
  font-size: 32px;
  font-weight: 800;
  line-height: 1.6;
  letter-spacing: -0.03em;
  text-align: center;
  white-space: nowrap;
}
.s02-wide { letter-spacing: 0.17em; }
.s02-w31 { font-size: 31px; }
.s02-advice-text em { color: var(--c-accent-deep); font-size: 36px; font-style: normal; }

/* CTA（905×444） */
.s02-cta {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 40px;
  width: min(905px, 100% - var(--gutter) * 2);
  padding: 60px 80px 64px;
  border-radius: 10px;
  background: var(--c-white);
  box-shadow: 2px 2px 15px rgb(109 97 61 / 0.3);
}
.s02-cta .s02-head { min-height: 116px; }
.s02-cta-title { font-size: 28px; line-height: 1.4; letter-spacing: -0.025em; }
.s02-cta-title .s02-l { font-size: 32px; }
/* PC は Figma の2行のまま（WordPress では Shippori Mincho B1 が読み込まれ、字の幅が静的 HTML より広い） */
@media (min-width: 1025px) {
  .s02-cta-title { white-space: nowrap; }
}
.s02-cta-btns { display: flex; justify-content: center; gap: 24px; padding-block: 4px; }
.s02-rbtn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 320px;
  height: 66px;
  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-rbtn--web { background: var(--c-accent); }
.s02-rbtn--line { background: var(--c-green-soft); }
.s02-rbtn-icon {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--c-white);
}
.s02-rbtn--web .s02-rbtn-icon { color: var(--c-accent); }
.s02-rbtn--line .s02-rbtn-icon { color: var(--c-green-soft); }
.s02-rbtn-text { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.s02-rbtn-main { font-size: 18px; font-weight: 700; line-height: 1; letter-spacing: 0; white-space: nowrap; }
.s02-rbtn-sub { font-size: 12px; font-weight: 700; line-height: 1; letter-spacing: 0.05em; white-space: nowrap; }

/* 電話（414×66。PC はリンクにしない・スマホはタップで発信） */
.s02-tel {
  display: flex;
  align-items: center;
  width: 414px;
  height: 66px;
  margin-top: -16px;
  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;
  width: 207px;
  height: 34px;
  padding: 0 8px 0 20px;
  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);
  color: var(--c-white);
}
.s02-tel-label { font-size: 12px; font-weight: 700; line-height: 1; letter-spacing: 0.05em; white-space: nowrap; }
.s02-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;
}

/* ===== 胃カメラ検査で直接確認します（上の角 50px・地 #f8f1e3） ===== */
.s02-about {
  padding: 120px 0 100px;
  border-radius: 50px 50px 0 0;
  background: #f8f1e3;
}
.s02-about-row {
  display: flex;
  align-items: flex-start;
  gap: 56px;
  margin-left: max(var(--gutter), 50% - 421px);
  margin-right: var(--gutter);
}
.s02-about-text { flex: 0 1 541px; min-width: 0; }
.s02-head--left { align-items: flex-start; }
.s02-head--left .s02-head-en { align-self: stretch; text-align: center; }
.s02-about-title {
  font-size: 32px;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 0.02em;
  text-align: left;
}
.s02-about-title .s02-l { font-size: 36px; }
.s02-about-text .s02-head { margin-bottom: 32px; }
.s02-about-text p,
.s02-diseases-text {
  font-size: 16px;
  font-weight: 400;
  line-height: 1.8;
  letter-spacing: 0.05em;
}
.s02-about-text p + p { margin-top: 12px; }
/* 写真2枚（365×427。大 255×340 の左下に小 160×200 を重ねる） */
.s02-photos { position: relative; flex: none; width: 365px; height: 427px; }
.s02-photo-l { position: absolute; right: 0; top: 0; width: 255px; height: 340px; border-radius: 10px; object-fit: cover; object-position: 90% 0; }
.s02-photo-s {
  position: absolute;
  left: 0;
  top: 227px;
  width: 160px;
  height: 200px;
  overflow: hidden;
  border-radius: 10px;
  container-type: size;
}
.s02-photo-s img { position: absolute; left: -65cqw; top: -13cqh; width: 237.5cqw; max-width: none; height: auto; }

/* わかる主な疾患（1044×376・地 #f0e2c4） */
.s02-diseases {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 32px;
  width: min(1044px, 100% - var(--gutter) * 2);
  margin: 100px auto 0;
  padding: 40px;
  border-radius: 10px;
  background: var(--c-beige);
}
.s02-diseases .s02-head-ja { margin-top: -45px; }
.s02-diseases-title { font-size: 32px; line-height: 1.4; letter-spacing: 0.08em; }
.s02-diseases-text { text-align: center; }
.s02-tags {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 24px;
  max-width: 960px;
}
.s02-tags li {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 204px;
  height: 40px;
  padding: 0 16px;
  border-radius: 50px;
  background: var(--c-white);
  font-size: 16px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.05em;
  white-space: nowrap;
}
.s02 .s02-tags .s02-tags-etc { width: auto; padding: 0; background: none; font-weight: 400; }

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

/* ===== 間の幅 ===== */
@media (max-width: 1100px) {
  .s02-about-row { flex-direction: column; align-items: center; gap: 48px; margin-inline: var(--gutter); }
  .s02-about-text { flex: none; width: min(541px, 100%); }
}
@media (max-width: 1024px) {
  .s02-advice-text { font-size: 26px; white-space: normal; padding-inline: var(--gutter); }
  .s02-w31 { font-size: 25px; }
  .s02-advice-text em { font-size: 30px; }
  .s02-cta { padding: 48px 40px 52px; }
  .s02-cta-title { font-size: 24px; }
  .s02-cta-title .s02-l { font-size: 26px; }
  .s02-cta-btns { flex-wrap: wrap; }
}

/* ===== スマホ（ref_sp：幅 390px・高さ 2758px） ===== */
@media (max-width: 767px) {
  .s02-spbr { display: inline; }
  .s02-pc, .s02-pcbr { display: none; }

  .s02-hero {
    height: 374px;
    padding-top: 60px;
    background: var(--img-bc179352a78c5bb1) right -230px top -110px / 640px auto no-repeat, #b9b6b0;
  }
  .s02-hero::before { background: var(--img-f69cd49b7f41c578) left -80px top 0 / 420px auto no-repeat; }
  .s02-hero-title { font-size: 23px; letter-spacing: -0.11em; }
  .s02 .s02-checks {
    width: calc(100% - 40px);
    margin-top: -230px;
    padding: 20px 16px;
  }
  .s02-checks li { align-items: flex-start; padding: 4px 0 8px; }
  .s02-checks svg { width: 14px; height: 12px; margin-top: 3px; }
  .s02-checks p { font-size: 14px; line-height: 17px; white-space: normal; }

  .s02-advice { padding: 32px 0 80px; }
  .s02-arrow { width: 258px; height: auto; margin-top: 6px; }
  .s02-advice-text { padding-inline: 20px; font-size: 16px; line-height: 1.55; letter-spacing: 0.05em; }
  .s02-wide { letter-spacing: 0.05em; }
  .s02-w31 { font-size: 16px; }
  .s02-advice-text em { font-size: 18px; }
  .s02-cta { width: calc(100% - 40px); gap: 20px; padding: 40px 10px; }
  .s02-cta .s02-head { min-height: 108px; }
  .s02 .s02-cta .s02-head-en { font-size: 60px; }
  .s02-cta .s02-head-ja { margin-top: -32px; }
  .s02-cta-title { font-size: 16px; line-height: 1.6; letter-spacing: 0; }
  .s02-cta-title .s02-l { font-size: 18px; }
  .s02-cta-btns { flex-direction: column; flex-wrap: nowrap; gap: 24px; width: 100%; }
  .s02-rbtn { width: 100%; }
  .s02-tel {
    display: grid;
    grid-template-columns: 34px auto;
    justify-content: center;
    align-content: center;
    gap: 4px 10px;
    width: calc(100% - 12px);
    margin-top: 0;
    pointer-events: auto;
    cursor: pointer;
  }
  .s02-tel-left { display: contents; }
  .s02-tel-icon { grid-column: 1; grid-row: 1 / 3; align-self: center; }
  .s02-tel-label { grid-column: 2; grid-row: 1; }
  .s02-tel-num { grid-column: 2; grid-row: 2; padding: 0; font-size: 20px; }

  .s02-about { padding: 80px 0 80px; border-radius: 30px 30px 0 0; }
  .s02-about-row { gap: 32px; margin-inline: 20px; }
  .s02-photos { order: -1; width: 365px; max-width: calc(100vw - 25px); }
  .s02-about-text { width: 100%; }
  .s02-about-text .s02-head { margin-bottom: 20px; }
  .s02 .s02-about .s02-head-en { font-size: 52px; }
  .s02-head--left { align-items: center; }
  .s02-about .s02-head-ja { margin-top: -28px; }
  .s02-about-title { font-size: 24px; line-height: 37px; letter-spacing: 0.05em; text-align: center; }
  .s02-about-title .s02-l { font-size: 24px; }
  .s02-about-text p,
  .s02-diseases-text { font-size: 14px; line-height: 1.6; text-align: left; }
  .s02-about-text p br:not(.s02-keep),
  .s02-diseases-text br { display: none; }
  .s02-about-text p + p { margin-top: 20px; }

  .s02-diseases { width: calc(100% - 40px); margin-top: 60px; padding: 40px 10px; }
  .s02 .s02-diseases .s02-head-en { font-size: 68px; }
  .s02-diseases .s02-head-ja { margin-top: -50px; }
  .s02-diseases-title { font-size: 28px; }
  .s02-tags { gap: 8px; }
  .s02-tags li { width: 160px; height: 37px; font-size: 13px; padding: 0 8px; }
  .s02 .s02-tags .s02-tags-etc { font-size: 14px; }
}

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

.s03 {
  background: #f7f1e4;
}

.s03-body {
  position: relative;
  background: #fbfaf7;
  border-radius: 50px 50px 0 0;
  padding: 160px 0 100px;
}

/* ===== 見出し（CARE・題・矢印） ===== */
.s03-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-inline: var(--gutter);
}

/* 吹き出し（痛み・苦しい・えずき）。1440px で x=331・470・966 */
.s03-voices {
  margin: 0;
  padding: 0;
  list-style: none;
}
.s03-voice {
  position: absolute;
  width: 122px;
  height: 78px;
}
.s03-voice--1 { top: 115px; left: calc(50% - 389px); }
.s03-voice--2 { top: 70px; left: calc(50% - 250px); }
.s03-voice--3 { top: 109px; left: calc(50% + 246px); width: 120px; }
.s03-voice-bg,
.s03-voice-dot {
  position: absolute;
  max-width: none;
}
.s03-voice-bg { top: -2px; left: -2px; }
.s03-voice--1 .s03-voice-dot--l { left: 94px; top: 61px; }
.s03-voice--1 .s03-voice-dot--s { left: 102px; top: 71px; }
.s03-voice--2 .s03-voice-dot--l { left: 86px; top: 61px; }
.s03-voice--2 .s03-voice-dot--s { left: 94px; top: 71px; }
.s03-voice--3 .s03-voice-dot--l { left: 12px; top: 61px; }
.s03-voice--3 .s03-voice-dot--s { left: 5px; top: 71px; }
.s03-voice-text {
  position: absolute;
  top: 6px;
  left: 6px;
  width: 110px;
  height: 43px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 20px;
  font-weight: 500;
  line-height: 1.8;
  letter-spacing: 0.05em;
}

.s03-en {
  margin: 0;
  color: #e8a477;
  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;
  color: var(--c-text);
  font-family: var(--font-serif);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-align: center;
}
.s03-title-sub {
  display: block;
  font-size: 28px;
  line-height: 1.4;
}
.s03-title-main {
  display: block;
  font-size: 42px;
  line-height: 1.4;
  margin-top: 4px;
}
@media (min-width: 1025px) {
  .s03-title-main { white-space: nowrap; }
}
.s03-fs42 { font-size: 1em; }
.s03-fs36 { font-size: 0.8571em; }
.s03-fs40 { font-size: 0.9524em; }

.s03-arrow {
  margin-top: 32px;
  width: 7px;
  height: 49px;
}

/* ===== Care の3つの段 ===== */
.s03-cares {
  display: flex;
  flex-direction: column;
  gap: 56px;
  margin-top: 55px;
}

.s03-care {
  position: relative;
  padding-top: 21px;
}
.s03-care--1 { min-height: 447px; }
.s03-care--2 { min-height: 427px; }
.s03-care--3 { min-height: 400px; }

/* 帯（写真が左の段は左端から x=1290 まで、右の段は x=150 から右端まで） */
.s03-card {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  width: calc(100% - max(var(--gutter), 50% - 570px));
  padding: 32px 60px 32px max(var(--gutter), 50% - 546px);
  background: #fff9f5;
  border-radius: 0 10px 10px 0;
  box-shadow: 4px 4px 15px rgba(109, 97, 61, 0.15);
}
.s03-care--2 .s03-card {
  margin-left: auto;
  padding: 32px max(var(--gutter), 50% - 545px) 32px 42px;
  background: #fff;
  border-radius: 10px 0 0 10px;
}

.s03-photo {
  flex: 0 1 533px;
  min-width: 0;
  margin: -53px 0 -71px;
  aspect-ratio: 533 / 400;
  border-radius: 10px;
  overflow: hidden;
}
.s03-photo { position: relative; container-type: size; }
.s03-photo img {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
@media (min-width: 1400px) {
  .s03-photo img { max-width: none; width: var(--w, 100cqw); height: var(--h, 100cqh); left: var(--l, 0); top: var(--t, 0); }
}
.s03-care--1 .s03-photo { --w: 136cqw; --h: 120.9cqh; --l: -4.9cqw; --t: -20.75cqh; }
.s03-care--2 .s03-photo { --w: 114.8cqw; --h: 102cqh; --l: -1.1cqw; --t: -1cqh; }
.s03-care--3 .s03-photo img { filter: brightness(1.28); }

.s03-text {
  position: relative;
  flex: 0 1 500px;
  min-width: 0;
  margin-left: 23px;
}
.s03-care--2 .s03-text { margin: 0 40px 0 0; }

.s03-no {
  position: absolute;
  top: -60px;
  right: 0;
  margin: 0;
  color: #e8a477;
  opacity: 0.3;
  font-family: var(--font-en);
  font-size: 60px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0;
  white-space: nowrap;
  pointer-events: none;
}

/* 「“」＋小見出し＋線 */
.s03-lead {
  display: flex;
  align-items: center;
  gap: 13px;
  min-height: 40px;
  margin: 0;
  font-family: var(--font-serif);
}
.s03-lead::after {
  content: "";
  flex: 1 1 0;
  min-width: 24px;
  border-top: 1px solid #e8a477;
}
.s03-quote {
  flex: none;
  width: 18px;
  margin-right: -13px;
  color: #e8a477;
  opacity: 0.3;
  font-size: 40px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: 0.05em;
  text-align: center;
  align-self: flex-start;
}
.s03-lead-text {
  font-feature-settings: "palt";
  font-size: 18px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.05em;
}

.s03-text-body {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-left: 18px;
}

.s03-h3 {
  margin: 0;
  color: #e88f54;
  font-family: var(--font-serif);
  font-size: 28px;
  font-weight: 700;
  line-height: 39px;
  letter-spacing: 0.05em;
}
.s03-line { display: block; }
.s03-l24 { font-size: 24px; }
.s03-h3--l {
  font-size: 32px;
  line-height: 1.4;
}
.s03-l28,
.s03-fs28 { font-size: 28px; }
.s03-tight { letter-spacing: -0.05em; }

.s03-p {
  margin: 0;
  font-size: 16px;
  line-height: 1.8;
  letter-spacing: 0.15em;
  font-feature-settings: "palt";
  text-spacing-trim: normal;
}
.s03-note {
  margin: 0;
  font-feature-settings: "palt";
  font-size: 14px;
  line-height: 1.6;
  letter-spacing: 0.05em;
}

/* ===== 1024px 以下：写真を文の下に置いて1列 ===== */
@media (max-width: 1024px) {
  .s03-care,
  .s03-care--1,
  .s03-care--2,
  .s03-care--3 { min-height: 0; padding-top: 60px; }
  .s03-card,
  .s03-care--2 .s03-card {
    flex-direction: column;
    align-items: center;
    gap: 24px;
    width: calc(100% - var(--gutter));
    padding: 32px var(--gutter) 40px;
  }
  .s03-text,
  .s03-care--2 .s03-text {
    order: 1;
    flex: none;
    width: min(100%, 640px);
    margin: 0;
  }
  .s03-photo {
    order: 2;
    flex: none;
    width: min(100%, 640px);
    margin: 0;
  }
}

/* ===== 767px 以下：スマホのデザイン ===== */
@media (max-width: 767px) {
  .s03-body {
    border-radius: 30px 30px 0 0;
    padding: 150px 0 80px;
  }
  .s03-voice { transform: scale(0.66); transform-origin: 0 0; }
  .s03-voice--1 { top: 56px; left: 4%; }
  .s03-voice--2 { top: 24px; left: calc(50% - 60px); }
  .s03-voice--3 { top: 54px; left: auto; right: calc(4% - 40px); }
  .s03-en { font-size: 56px; }
  .s03-title { margin-top: -36px; letter-spacing: 0.08em; }
  .s03-title-sub { font-size: 16px; }
  .s03-title-main { font-size: 28px; margin-top: 2px; }
  .s03-arrow { margin-top: 24px; }
  .s03-cares { gap: 40px; margin-top: 40px; }
  .s03-care,
  .s03-care--1,
  .s03-care--2,
  .s03-care--3 { padding-top: 50px; }
  .s03-card,
  .s03-care--2 .s03-card {
    width: calc(100% - 20px);
    padding: 24px 20px 28px;
  }
  .s03-no { top: -52px; font-size: 44px; }
  .s03-lead-text { font-size: 16px; line-height: 1.4; }
  .s03-h3 { font-size: 24px; line-height: 1.3; }
  .s03-l24 { font-size: 22px; }
  .s03-h3--l { font-size: 24px; line-height: 1.3; }
  .s03-l28,
  .s03-fs28 { font-size: 22px; }
  .s03-tight { letter-spacing: 0; }
}

/* ===== s04 荒川区のみなさまに 選ばれる9つの理由 ===== */
/* s04：荒川区のみなさまに 選ばれる9つの理由（1440px で高さ 2801px） */

.s04 {
  background: #fff;
}

/* ===== 上の写真の帯（1440×440。下の 50px に次の地が重なる） =====
   注意書き「画像固定」：PC は背景の写真だけを画面に固定し、スマホは通常のスクロール */
.s04-photo {
  position: relative;
  height: 440px;
  overflow: hidden;
}
.s04-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.s04-main {
  position: relative;
  margin-top: -50px;
  background: #f8f1e3;
  border-radius: 50px 50px 0 0;
}

/* ===== 9つの理由 ===== */
.s04-reason {
  padding: 120px var(--gutter) 0;
}

.s04-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.s04-en {
  margin: 0;
  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-weight: 700;
  letter-spacing: 0.05em;
}
.s04-title-sub {
  display: block;
  font-size: 28px;
  line-height: 1.4;
}
.s04-title-main {
  display: block;
  margin-top: 2px;
  font-size: 36px;
  line-height: 1.4;
}

/* カード（1440px で 3列・幅 320px。x=200・562・923） */
.s04-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 320px));
  justify-content: center;
  column-gap: 41.5px;
  row-gap: 45px;
  margin: 56px 0 0;
  padding: 0;
  list-style: none;
}
.s04-item {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 0;
}
.s04-pt {
  position: absolute;
  top: -23px;
  left: 29px;
  z-index: 1;
  margin: 0;
  padding-bottom: 2px;
  border-bottom: 1px solid #e88f54;
  color: #e88f54;
  font-family: var(--font-en);
  font-size: 26px;
  font-style: italic;
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0;
  white-space: nowrap;
}
.s04-pt-t { letter-spacing: 0.22em; }
.s04-img {
  width: calc(100% - 20px);
  aspect-ratio: 4 / 3;
  border-radius: 5px;
  overflow: hidden;
}
.s04-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.s04-item:nth-child(4) .s04-img img,
.s04-item:nth-child(5) .s04-img img,
.s04-item:nth-child(6) .s04-img img { filter: brightness(1.12); }
.s04-h3 {
  width: 100%;
  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;
}
.s04-p {
  width: calc(100% + 0.15em);
  margin: 16px -0.15em 0 0;
  font-size: 14px;
  line-height: 22px;
  letter-spacing: 0.15em;
  font-feature-settings: "palt";
  text-spacing-trim: normal;
}

/* ===== 相談の箱（CTA） ===== */
.s04-contact {
  padding: 100px var(--gutter) 150px;
  background: linear-gradient(#f8f1e3, #fff);
}
.s04-cta {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 40px;
  width: min(905px, 100%);
  margin-inline: auto;
  padding: 60px 80px;
  background: #fff;
  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;
  color: #e8a477;
  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;
  margin: -50px 0 0;
  color: var(--c-text);
  font-family: var(--font-serif);
  font-weight: 800;
  letter-spacing: 0.1em;
}
.s04-cta-l1 {
  display: block;
  font-size: 28px;
  line-height: 1.4;
}
.s04-cta-l2 {
  display: block;
  margin-top: 2px;
  font-size: 32px;
  line-height: 1.4;
}
.s04-fs28 { font-size: 28px; }
@media (min-width: 1025px) {
  .s04-cta-l2 { white-space: nowrap; }
}

.s04-cta-btns {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}
.s04-cta-row {
  display: flex;
  gap: 24px;
}

/* 予約ボタン（ホバーで濃い色・影を浅く 0.3秒） */
.s04-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 320px;
  min-height: 66px;
  margin-block: 4px;
  padding: 12px 22px 12px 21px;
  border-radius: 50px;
  color: #fff;
  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: #e8a477; }
.s04-btn--line { background: #76983b; }
@media (hover: hover) {
  .s04-btn--web:hover { background: #e88f54; box-shadow: 0 2px 3px rgba(109, 97, 61, 0.3); }
  .s04-btn--line:hover { background: #65980e; box-shadow: 0 2px 3px rgba(109, 97, 61, 0.3); }
}
.s04-btn-icon {
  flex: none;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: #fff;
}
.s04-btn-text {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  min-width: 0;
}
.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;
}

/* 電話（PC はリンクなし・スマホはタップで発信） */
.s04-tel {
  display: flex;
  align-items: center;
  width: 414px;
  min-height: 66px;
  margin-block: 4px;
  padding: 16px 0;
  border: 1px solid #939393;
  border-radius: 5px;
  background: #fff;
  color: var(--c-text);
  text-decoration: none;
}
@media (min-width: 768px) {
  .s04-tel { pointer-events: none; cursor: default; }
}
.s04-tel-left {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0 8px 0 20px;
  border-right: 1px solid #939393;
}
.s04-tel-icon {
  flex: none;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: #e8a477;
}
.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;
}

/* 画像固定（画像固定 1668:223505。PC だけ。写真の帯の中で、写真を画面に固定して覆う。スマホは普通にスクロール） */
@media (min-width: 768px) and (hover: hover) {
  .s04-photo { clip-path: inset(0); }
  .s04-photo img {
    position: fixed;
    inset: 0;
    width: 100vw;
    height: 100vh;
  }
}

/* ===== 1024px 以下：2列（最後の1枚は幅を変えず中央）・箱の中を詰める ===== */
@media (max-width: 1024px) {
  .s04-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
  }
  .s04-item { width: min(320px, 100%); }
  .s04-cta { padding: 60px var(--gutter); }
  .s04-cta-l2 { font-size: 28px; }
  .s04-fs28 { font-size: 24px; }
  .s04-cta-row { flex-wrap: wrap; justify-content: center; }
}

/* ===== 767px 以下：スマホのデザイン（1列） ===== */
@media (max-width: 767px) {
  .s04-photo { height: 300px; }
  .s04-main { margin-top: -30px; border-radius: 30px 30px 0 0; }
  .s04-reason { padding: 70px 20px 0; }
  .s04-en { font-size: 56px; }
  .s04-title { margin-top: -30px; letter-spacing: 0.08em; }
  .s04-title-sub { font-size: 22px; }
  .s04-title-main { font-size: 28px; }
  .s04-list { flex-direction: column; flex-wrap: nowrap; align-items: stretch; row-gap: 48px; margin-top: 48px; }
  .s04-item { width: 100%; }
  .s04-pt { left: 20px; top: -20px; font-size: 24px; }
  .s04-img { width: 100%; }
  .s04-h3 { margin-top: 18px; }
  .s04-p { margin-top: 12px; }
  .s04-contact { padding: 70px 20px 90px; }
  .s04-cta { gap: 28px; padding: 40px 16px; }
  .s04-cta-en { font-size: 50px; }
  .s04-cta-title { margin-top: -32px; letter-spacing: 0.05em; }
  .s04-cta-l1 { font-size: 20px; }
  .s04-cta-l2 { font-size: 22px; }
  .s04-fs28 { font-size: 20px; }
  .s04-cta-btns { width: 100%; gap: 16px; }
  .s04-cta-row { flex-direction: column; width: 100%; gap: 16px; }
  .s04-btn { width: 100%; margin: 0; }
  .s04-btn-main { font-size: 17px; }
  .s04-tel {
    flex-direction: column;
    gap: 6px;
    width: 100%;
    margin: 0;
    padding: 12px 10px;
  }
  .s04-tel-left { padding: 0; border-right: 0; }
  .s04-tel-label { padding-top: 0; font-size: 13px; }
  .s04-tel-num { padding: 0; font-size: 24px; }
}

/* ===== s05 医師紹介 ===== */
/* s05 医師紹介（高さ 1542px：写真 550・地 #f6eedd の帯・下の波） */

.s05 {
  position: relative;
  overflow: hidden;
  color: var(--c-text);
  font-feature-settings: "halt";
  text-spacing-trim: normal;
}

/* ===== 上の写真3枚（左 940×550・右 500×250 と 500×300） ===== */
.s05-photos {
  display: flex;
  aspect-ratio: 1440 / 550;
}
.s05-photo {
  position: relative;
  overflow: hidden;
  container-type: size;
}
.s05-photo img {
  position: absolute;
  max-width: none;
}
.s05-photo--main img { left: 0; bottom: 1px; width: 100cqw; }
.s05-photo--top img { left: -18.2cqw; top: -9.5cqw; width: 118cqw; }
.s05-photo--bottom img {
  left: -0.24cqw;
  top: -32.5cqw;
  width: 100.24cqw;
  height: 154.8cqw;
  object-fit: cover;
  object-position: left top;
}
.s05-photo--main { flex: 0 0 65.2778%; }
.s05-photo-col {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.s05-photo--top { flex: 250 1 0; }
.s05-photo--bottom { flex: 300 1 0; }

/* ===== 地の帯（上の角 50px・写真に 50px 重なる） ===== */
.s05-body {
  position: relative;
  margin-top: -50px;
  padding: 140px 0 120px;
  background: #f6eedd;
  border-radius: 50px 50px 0 0;
}

.s05-title {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 0;
  font-weight: 700;
  text-align: center;
}
.s05-title-en {
  font-family: var(--font-en);
  font-weight: 400;
  font-size: 80px;
  line-height: 80px;
  letter-spacing: 0.05em;
  color: #f3d0b8;
  opacity: 0.5;
  white-space: nowrap;
}
.s05-title-ja {
  position: relative;
  margin-top: -44px;
  font-family: var(--font-serif);
  font-size: 36px;
  line-height: 1.4;
  letter-spacing: 0.05em;
  color: var(--c-text);
}

.s05-lead {
  width: min(960px, 100% - var(--gutter) * 2);
  margin: 40px auto 0;
  font-size: 16px;
  line-height: 1.8;
  letter-spacing: 0.125em;
  text-align: center;
  position: relative;
  left: 2px;
}

/* ===== 医師のカード（313×428・間 38px） ===== */
.s05-slider { position: relative; margin-top: 40px; }
.s05-cards {
  display: flex;
  justify-content: center;
  gap: 38px;
  margin: 0;
  padding: 0 var(--gutter);
  list-style: none;
}
.s05-card {
  flex: 0 1 313px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
  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-img {
  position: relative;
  aspect-ratio: 265 / 199;
  margin-bottom: 1px;
  border-radius: 10px;
  overflow: hidden;
  container-type: inline-size;
}
.s05-card-img img {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: auto;
}
.s05-card-img .s05-card-bg {
  top: 0;
  height: 100%;
  object-fit: cover;
}
.s05-card-name {
  position: absolute;
  left: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0;
  padding: 6px 16px 4px 0;
  background: #fefdfc;
  border-radius: 0 10px 0 0;
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: 20px;
  line-height: 1;
  letter-spacing: 0.15em;
  color: var(--c-accent-deep);
  white-space: nowrap;
}
.s05-card-role { font-size: 16px; }

.s05-card-time {
  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;
  font-feature-settings: normal;
}
.s05-card-text {
  margin: 0;
  font-size: 16px;
  line-height: 1.8;
  letter-spacing: 0.1em;
  text-align: center;
}

/* 矢印と点はスマホだけ */
.s05-arrow,
.s05-dots { display: none; }

/* ===== 下の波（白） ===== */
.s05-wave {
  height: 130px;
  background: #f6eedd;
  overflow: hidden;
}
.s05-wave img {
  width: 100%;
  height: auto;
  min-height: 131px;
}

/* ===== 間の幅：カードは 2列＋1枚を中央に ===== */
@media (max-width: 1100px) {
  .s05-cards { flex-wrap: wrap; row-gap: 32px; }
  .s05-card { flex: 0 0 313px; }
  .s05-body { padding-bottom: 120px; }
}

/* ===== スマホ：写真は上の1枚、カードは1枚ずつのスライダー（Doctor Carousel 1669:223573。自動再生なし） ===== */
@media (max-width: 767px) {
  .s05-photos { aspect-ratio: 390 / 230; }
  .s05-photo--main { flex-basis: 100%; }
  .s05-photo-col { display: none; }

  .s05-body {
    margin-top: -30px;
    padding: 70px 0 60px;
    border-radius: 30px 30px 0 0;
  }
  .s05-title-en { font-size: 60px; line-height: 60px; }
  .s05-title-ja { margin-top: -34px; font-size: 28px; line-height: 1.2; }
  .s05-lead { margin-top: 24px; font-size: 14px; letter-spacing: 0.15em; }
  .s05-lead br { display: none; }

  .s05-slider { margin-top: 24px; }
  .s05-cards {
    --card-w: min(312px, 100vw - 78px);
    flex-wrap: nowrap;
    justify-content: flex-start;
    gap: 20px;
    padding: 4px calc((100% - var(--card-w)) / 2) 20px;
    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 var(--card-w);
    scroll-snap-align: center;
  }
  .s05-card-text { margin: 0; font-size: 14px; letter-spacing: 0.1em; }

  .s05-arrow {
    display: block;
    position: absolute;
    top: 40%;
    width: 44px;
    height: 44px;
    margin-top: -22px;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
  }
  .s05-arrow::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 24px;
    height: 24px;
    margin: -12px 0 0 -12px;
    border-radius: 50%;
    background: var(--c-white);
    box-shadow: 0 1px 4px rgba(109, 97, 61, 0.2);
  }
  .s05-arrow::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 6px;
    height: 6px;
    margin: -3px 0 0 -2px;
    border-top: 1.5px solid var(--c-accent);
    border-right: 1.5px solid var(--c-accent);
    transform: rotate(45deg);
  }
  .s05-arrow--prev { left: 0; }
  .s05-arrow--prev::after { margin-left: -4px; transform: rotate(-135deg); }
  .s05-arrow--next { right: 0; }

  .s05-dots {
    display: flex;
    justify-content: center;
    gap: 10px;
  }
  .s05-dots span {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #d9d9d9;
  }
  .s05-dots .is-current { background: #9a9a9a; }

  .s05-wave { height: auto; }
  .s05-wave img { min-height: 0; }
}

/* ===== s06 胃カメラ検査の流れ ===== */
/* s06 胃カメラ検査の流れ（高さ 3200px：流れ 2525・波 131・料金表 544） */

.s06 {
  position: relative;
  overflow: hidden;
  color: var(--c-text);
  font-feature-settings: "halt";
  text-spacing-trim: normal;
}
.s06-defs { position: absolute; width: 0; height: 0; overflow: hidden; }

/* ===== 節の見出し（英字 80px の上に和文 36px を 44px 重ねる。料金表と共通） ===== */
.s06-title {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 0;
  font-weight: 700;
  text-align: center;
}
.s06-title-en {
  font-family: var(--font-en);
  font-weight: 400;
  font-size: 80px;
  line-height: 80px;
  letter-spacing: 0.05em;
  color: #f3d0b8;
  opacity: 0.5;
  white-space: nowrap;
}
.s06-title-ja {
  position: relative;
  margin-top: -44px;
  font-family: var(--font-serif);
  font-size: 36px;
  line-height: 1.4;
  letter-spacing: 0.05em;
  color: var(--c-text);
}

/* ===== 流れ（白地） ===== */
.s06-flow {
  padding: 20px 0 113px;
  background: var(--c-white);
}
.s06-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 32px;
}
.s06-head-arrow { width: 6px; height: 48px; }

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

/* 左の列：札（68px）と点線 */
.s06-step-side {
  flex: 0 0 70px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  padding-bottom: 24px;
}
.s06-badge {
  position: relative;
  display: grid;
  place-items: center;
  width: 68px;
  height: 68px;
  margin: 0;
  font-family: var(--font-en);
  color: var(--c-white);
  letter-spacing: 0.05em;
}
.s06-badge svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.s06-badge-text {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  line-height: 0.9;
}
.s06-badge-en { font-size: 16px; }
.s06-badge-num { font-size: 28px; }
.s06-step-line {
  flex: 1 1 auto;
  width: 0;
  border-left: 1px dashed #e0e0e0;
}

/* 右の列：文（500px）と写真（300×225） */
.s06-step-main {
  flex: 1 1 auto;
  display: flex;
  justify-content: space-between;
  gap: 32px;
  min-width: 0;
  padding: 12px 4px 56px 0;
}
.s06-step-body {
  flex: 0 1 500px;
  min-width: 0;
}
.s06-step-body--wide { flex-basis: 504px; }
.s06-step--noimg .s06-step-body { flex-basis: 100%; padding-bottom: 20px; }
.s06-step-title {
  margin: 0;
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: 24px;
  line-height: 1.2;
  letter-spacing: 0.05em;
  color: var(--c-accent-deep);
  font-feature-settings: normal;
}
.s06-step-text {
  margin: 12px -3px 0 0;
  font-size: 16px;
  line-height: 1.8;
  letter-spacing: 0.15em;
}
/* PC：Figma の改行（Step01「選択し／てください」・Step05「いただ／きます」・Step07「お休みい／ただきます」）にそろう字間（2026-10-26） */
@media (min-width: 768px) {
  .s06-step-text { letter-spacing: 0.13em; }
}
.s06-step-img {
  flex: 0 0 300px;
  align-self: flex-start;
  aspect-ratio: 300 / 225;
  border-radius: 5px;
  overflow: hidden;
}
.s06-step-img--r10 { border-radius: 10px; }
.s06-step-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* 予約ボタン（240×60・240×66） */
.s06-btns {
  display: flex;
  flex-wrap: wrap;
  gap: 0 24px;
  margin: 32px 0 0;
  padding: 0;
  list-style: none;
}
.s06-btns li { padding: 4px 0; }
.s06-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 240px;
  height: 60px;
  border-radius: 50px;
  background: var(--c-accent);
  box-shadow: 0 4px 5px rgba(109, 97, 61, 0.4);
  color: var(--c-white);
  text-decoration: none;
  white-space: nowrap;
  transition: background-color 0.3s ease-out, box-shadow 0.3s ease-out;
}
.s06-btn--line {
  height: 66px;
  background: var(--c-green-soft);
}
.s06-btn-icon {
  flex: 0 0 24px;
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--c-white);
}
.s06-btn-label {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  font-weight: 700;
  line-height: 1;
}
.s06-btn-main { font-size: 16px; letter-spacing: 0; }
.s06-btn-sub { font-size: 10px; letter-spacing: 0.05em; }
@media (hover: hover) {
  .s06-btn--web:hover { background: var(--c-accent-deep); box-shadow: 0 2px 3px rgba(109, 97, 61, 0.3); }
  .s06-btn--line:hover { background: var(--c-green); box-shadow: 0 2px 3px rgba(109, 97, 61, 0.3); }
}

/* ===== 波（白 → #f8f1e3） ===== */
.s06-wave {
  height: 131px;
  background: var(--c-white);
  overflow: hidden;
}
.s06-wave img { width: 100%; height: 100%; }

/* ===== 料金表（#f8f1e3・高さ 544） ===== */
.s06-price {
  padding: 20px 0 154px;
  background: #f8f1e3;
}
.s06-price-lead {
  width: min(960px, 100% - var(--gutter) * 2);
  margin: 40px auto 0;
  font-size: 16px;
  line-height: 1.8;
  letter-spacing: 0.15em;
  text-align: center;
}
.s06-table-wrap {
  width: min(952px, 100% - var(--gutter) * 2);
  margin: 40px auto 0;
  padding-right: 60px;
}
.s06-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  table-layout: fixed;
  letter-spacing: 0.15em;
  text-align: center;
}
.s06-table th,
.s06-table td {
  padding: 0;
  font-weight: 400;
  vertical-align: middle;
}
.s06-table-blank { width: 19.06%; }
.s06-table thead th {
  height: 39px;
  border-right: 1px solid #f7ece4;
  border-bottom: 1px solid #f7ece4;
  background: var(--c-accent);
  color: var(--c-white);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.2;
}
.s06-table thead th:nth-child(2) { border-top-left-radius: 10px; }
.s06-table thead th:last-child { border-right: 0; border-top-right-radius: 10px; }
.s06-num { font-size: 16px; }
.s06-num--l { font-size: 18px; }

.s06-table tbody td {
  height: 54px;
  border-right: 1px solid #f7ece4;
  border-bottom: 1px solid #f7ece4;
  background: var(--c-white);
  font-size: 16px;
  line-height: 1.2;
}
.s06-table tbody td:last-child { border-right: 0; }
.s06-table tbody tr:last-child td { height: 53px; border-bottom: 0; }

.s06-table tbody th {
  padding: 0 16px;
  border-bottom: 1px solid #f8f1e3;
  background: var(--c-accent);
  color: var(--c-white);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.2;
  text-align: left;
}
.s06-table tbody tr:first-child th { border-top-left-radius: 10px; }
.s06-table tbody tr:last-child th { border-bottom: 0; border-bottom-left-radius: 10px; }
.s06-badge-row {
  display: flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
}
.s06-row-icon {
  flex: 0 0 34px;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--c-white);
}
.s06-row-icon img { width: 26px; height: 26px; }

/* ===== 間の幅 ===== */
@media (max-width: 1100px) {
  .s06-step-img { flex: 0 1 300px; min-width: 200px; }
  .s06-btns { gap: 8px 16px; }
  .s06-table-wrap { padding-right: 0; }
}

/* ===== スマホ ===== */
@media (max-width: 767px) {
  .s06-title-en { font-size: 60px; line-height: 60px; }
  .s06-title-ja { margin-top: -34px; font-size: 28px; line-height: 1.2; }

  .s06-flow { padding: 20px 0 40px; }
  .s06-steps { margin-top: 40px; }
  .s06-step { gap: 12px; }
  .s06-step-side { flex-basis: 40px; gap: 12px; padding-bottom: 12px; }
  .s06-badge { width: 40px; height: 40px; }
  .s06-badge-en { font-size: 10px; }
  .s06-badge-num { font-size: 17px; }

  .s06-step-main {
    flex-direction: column;
    gap: 20px;
    padding: 4px 0 40px;
  }
  .s06-step-body,
  .s06-step-body--wide { flex-basis: auto; }
  .s06-step--noimg .s06-step-body { padding-bottom: 0; }
  .s06-step-title { font-size: 24px; }
  .s06-step-img { flex: none; width: 100%; min-width: 0; }

  .s06-btns { flex-direction: column; gap: 8px; margin-top: 24px; }
  .s06-btn { width: 100%; }

  .s06-price { padding: 40px 0 60px; }
  .s06-price-lead { margin-top: 24px; font-size: 14px; }
  .s06-price-lead br { display: none; }

  /* 料金表の横スクロール（1669:223566）：表の中だけ横にすべる（見出し・説明文は動かない。初めは左端） */
  .s06-table-wrap {
    width: auto;
    margin: 24px var(--gutter) 0;
    padding: 0;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .s06-table { width: 430px; }
  .s06-table-blank { width: 100px; }
  .s06-table thead th { font-size: 12px; }
  .s06-num { font-size: 14px; }
  .s06-num--l { font-size: 15px; }
  .s06-table tbody td { font-size: 13px; }
  .s06-table tbody th { padding: 6px 4px; font-size: 12px; text-align: center; }
  .s06-badge-row { flex-direction: column; gap: 4px; }
  .s06-row-icon { flex-basis: 28px; width: 28px; height: 28px; }
  .s06-row-icon img,
  .s06-row-icon svg { width: 20px; height: 20px; }
}

/* ===== s07 よくあるご質問 ===== */
/* s07：よくあるご質問（FAQ 12問）と予約の箱（CTA）。1440px で高さ 2856px */

.s07 {
  background: #f8f1e3;
  interpolate-size: allow-keywords;
}

.s07-faq {
  background: #fbfaf7;
  border-radius: 50px 50px 0 0;
  padding-top: 120px;
}

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

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

/* 1問の箱（開いた状態が Figma の絵） */
.s07-item {
  background: #f7ece4;
  border-radius: 10px;
  box-shadow: 0 0 10px rgba(109, 97, 61, 0.3);
  padding: 0 40px 20px;
}
.s07-item:not([open]) { background: var(--c-white); }
.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-q {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  padding-top: 20px;
  list-style: none;
  cursor: pointer;
}
.s07-q::-webkit-details-marker { display: none; }
.s07-q__pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 29px;
  padding-right: 16px;
  background: var(--c-white);
  border-radius: 50px;
}
.s07-q__mark {
  flex: none;
  display: grid;
  place-items: center;
  width: 29px;
  height: 29px;
  padding: 0 3px 4px 4px;
  border-radius: 50%;
  font-family: var(--font-serif);
  font-size: 18px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: 0.1em;
  color: var(--c-accent-deep);
}
.s07-q__text {
  font-family: var(--font-serif);
  font-size: 18px;
  font-weight: 700;
  line-height: 1.6;
  letter-spacing: 0.05em;
  color: var(--c-accent-deep);
  transition: color 0.3s ease-out;
}

/* 開閉の印（開：−　閉：＋） */
.s07-q__icon {
  position: relative;
  flex: none;
  width: 24px;
  height: 24px;
  color: var(--c-text);
  transition: color 0.3s ease-out;
}
.s07-q__icon::before,
.s07-q__icon::after {
  content: "";
  position: absolute;
  left: 4px;
  top: 11px;
  width: 16px;
  height: 2px;
  border-radius: 1px;
  background: currentColor;
  transition: transform 0.3s ease-out;
}
.s07-q__icon::after { transform: rotate(90deg); }
.s07-item[open] .s07-q__icon::after { transform: rotate(0deg); }

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

.s07-a {
  margin: 0;
  padding-top: 8px;
  font-size: 16px;
  line-height: 26px;
  letter-spacing: 0.1em;
  color: var(--c-text);
}

/* ===== 予約の箱 ===== */
.s07-contact {
  padding: 150px 0;
  background: linear-gradient(#fbfaf7, #ffffff) top / 100% calc(100% - 150px) no-repeat, #ffffff;
}
.s07-cta {
  width: min(842px, 100% - var(--gutter) * 2);
  margin-inline: auto;
  padding: 60px 80px;
  background: var(--c-white);
  border-radius: 10px;
  box-shadow: 2px 2px 15px rgba(109, 97, 61, 0.3);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 40px;
}
.s07-cta__head { text-align: center; }
.s07-cta__en {
  display: block;
  font-family: var(--font-en);
  font-size: 80px;
  font-weight: 500;
  line-height: 1;
  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-size: 32px;
  font-weight: 800;
  line-height: 45px;
  letter-spacing: 0.05em;
  color: var(--c-text);
}
.s07-cta__l2 { letter-spacing: 0; }
@media (min-width: 1025px) {
  .s07-cta__l2 { white-space: nowrap; font-feature-settings: "palt"; }
}
.s07-sp { display: none; }

.s07-cta__actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}
.s07-cta__btns {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 24px;
}

.s07-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 320px;
  max-width: 100%;
  height: 66px;
  margin-block: 4px;
  padding: 12px 22px;
  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); }
.s07-btn__icon {
  flex: none;
  display: grid;
  place-items: center;
  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: 4px;
  font-weight: 700;
  line-height: 1;
}
.s07-btn__main { font-size: 18px; letter-spacing: 0; white-space: nowrap; }
.s07-btn__sub { font-size: 12px; letter-spacing: 0.05em; white-space: nowrap; }

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

.s07-tel {
  display: flex;
  align-items: center;
  width: 414px;
  max-width: 100%;
  height: 66px;
  margin-block: 4px;
  background: var(--c-white);
  border: 1px solid var(--c-gray);
  border-radius: 5px;
  color: var(--c-text);
  text-decoration: none;
}
@media (min-width: 768px) {
  .s07-tel { pointer-events: none; cursor: default; }
}
.s07-tel__left {
  flex: none;
  display: flex;
  align-items: center;
  gap: 6px;
  width: 207px;
  height: 34px;
  padding: 0 8px 0 20px;
  border-right: 1px solid var(--c-gray);
}
.s07-tel__icon {
  flex: none;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--c-accent);
}
.s07-tel__icon svg { display: block; }
.s07-tel__label {
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.05em;
  white-space: nowrap;
}
.s07-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;
}

@media (max-width: 1024px) {
  .s07-cta { padding: 60px 40px; }
  .s07-cta__title { font-size: clamp(22px, 3.2vw, 32px); line-height: 1.4; }
}

@media (max-width: 767px) {
  .s07-faq {
    border-radius: 30px 30px 0 0;
    padding-top: 70px;
  }
  .s07-head__en { font-size: 60px; }
  .s07-head__title { margin-top: -34px; font-size: 28px; line-height: 34px; }

  .s07-list { width: calc(100% - 40px); gap: 24px; }
  .s07-item { padding: 0 10px 20px; }
  .s07-q__pill { padding: 4px 16px 4px 0; border-radius: 30px; }
  .s07-q__text { font-size: 16px; line-height: 1.2; }
  .s07-a { padding: 12px 6px 0; font-size: 14px; line-height: 22px; }

  .s07-contact {
    padding: 80px 20px 80px;
    background-size: 100% calc(100% - 80px);
  }
  .s07-cta { width: 100%; padding: 40px 16px; gap: 20px; }
  .s07-cta__en { font-size: 60px; }
  .s07-cta__title { margin-top: -32px; font-size: 18px; line-height: 1.5; }
  .s07-sp { display: inline; }
  .s07-cta__actions { width: 100%; gap: 16px; }
  .s07-cta__btns { flex-direction: column; flex-wrap: nowrap; align-items: center; gap: 16px; width: 100%; }
  .s07-btn { width: 100%; max-width: 318px; }
  .s07-btn__main { font-size: 18px; }

  .s07-tel {
    display: grid;
    grid-template-columns: 34px auto;
    grid-template-rows: auto auto;
    justify-content: center;
    align-content: center;
    column-gap: 10px;
    row-gap: 4px;
    width: calc(100% - 12px);
    max-width: 306px;
  }
  .s07-tel__left { display: contents; }
  .s07-tel__icon { grid-row: 1 / 3; }
  .s07-tel__num { padding: 0; font-size: 20px; letter-spacing: 0.05em; }
}

/* ===== s08 Webから事前診察を予約 ===== */
/* s08（LP のフッター）：上に写真の帯（5枚・互い違い）、下にベージュの地（上の角 50px）。
   左にロゴ・所在地・予約ボタン・診療時間表、右に地図（Google マップの埋め込み）と公式サイトへのリンク。いちばん下にコピーライト */

.s08 { overflow-x: clip; color: var(--c-text); background: var(--c-white); }
:where(.s08) :where(p, ul) { margin: 0; padding: 0; }
:where(.s08) :where(ul) { list-style: none; }

/* 施設の写真の帯（Facility Gallery / Infinite Slider 1672:224027）：右から左へ一定の速さで流れ続ける。
   矢印・ドットなし・ホバーしても止めない。1組（5枚＋間）ぶん流れたら、同じ見た目の先頭に戻る（3組並べて継ぎ目を消す） */
.s08-photos { margin-bottom: 40px; overflow: hidden; }
.s08-photos__track {
  display: flex; align-items: flex-start; width: max-content;
  margin-left: min(0px, calc(50% - 966px));
  animation: s08-photos-flow 60s linear infinite;
}
@keyframes s08-photos-flow { to { transform: translateX(calc(-100% / 3)); } }
.s08-photo { flex: none; width: 370px; height: 240px; margin-right: 12px; border-radius: 10px; overflow: hidden; }
.s08-photo--low { margin-top: 24px; }
.s08-photo img { width: 100%; height: 100%; object-fit: cover; }
.s08-photo:nth-child(5n) img { object-position: center top; }

.s08-foot {
  background: #f7ece4; border-radius: 50px 50px 0 0;
  padding: 100px 0 20px;
}
.s08-body {
  display: flex; align-items: flex-start;
  width: min(1200px, 100% - var(--gutter) * 2); margin-inline: auto; margin-bottom: 80px;
}

.s08-info { flex: 1 1 600px; min-width: 0; display: flex; flex-direction: column; gap: 24px; }
.s08-head { display: flex; align-items: center; gap: 36px; }
.s08-brand { flex: none; width: 245px; display: flex; flex-direction: column; gap: 5px; }
.s08-logo { display: block; position: relative; 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-tagline {
  font-size: 12px; font-weight: 500; line-height: 1; letter-spacing: .12em;
  text-align: right; white-space: nowrap; margin-right: -1.44px;
}
.s08-badge {
  flex: none; display: flex; align-items: center; justify-content: center;
  width: 120px; height: 77px; padding: 8px 12px; border-radius: 5px; background: var(--c-gold);
  color: var(--c-white); font-family: var(--font-serif); font-size: 14px; font-weight: 700;
  line-height: 18px; letter-spacing: .05em; text-align: center; white-space: nowrap;
}

.s08-detail { display: flex; flex-direction: column; gap: 24px; padding-left: 16px; }
.s08-access { display: flex; flex-direction: column; gap: 6px; }
.s08-address, .s08-route { font-size: 12px; font-weight: 500; line-height: 1.6; letter-spacing: .1em; }
.s08-route { width: fit-content; max-width: 100%; padding: 12px; border-radius: 5px; background: var(--c-white); }

.s08-btns { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 24px; padding-block: 4px; }
.s08-btn {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  width: 240px; height: 60px; padding: 12px 22px; border-radius: 50px;
  background: var(--c-accent); color: var(--c-white); text-decoration: none;
  box-shadow: 0 4px 5px rgba(109, 97, 61, .4);
  transition: background-color .3s ease-out, box-shadow .3s ease-out;
}
.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); color: var(--c-accent);
}
.s08-btn--line .s08-btn__icon { color: var(--c-green-soft); }
.s08-btn__text { display: flex; flex-direction: column; align-items: center; gap: 4px; white-space: nowrap; }
.s08-btn__main { font-size: 16px; font-weight: 700; line-height: 1; letter-spacing: 0; }
.s08-btn__sub { font-size: 10px; font-weight: 700; line-height: 1; letter-spacing: .05em; }
@media (hover: hover) {
  .s08-btn--web:hover { background: var(--c-accent-deep); box-shadow: 0 2px 3px rgba(109, 97, 61, .4); }
  .s08-btn--line:hover { background: var(--c-green); box-shadow: 0 2px 3px rgba(109, 97, 61, .4); }
}

/* 診療時間表（幅 476px・見出しの行 27px・行 64/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; }
.s08-table table { width: 100%; border-collapse: collapse; table-layout: fixed; background: var(--c-white); }
.s08-table th, .s08-table td { border-left: 1px solid var(--c-line); border-top: 1px solid var(--c-line); padding: 0; text-align: center; }
.s08-table tr > :first-child { border-left: 0; width: 26.47%; }
.s08-table thead th {
  border-top: 0; height: 26px; background: var(--c-table-head);
  font-size: 12px; font-weight: 500; line-height: 1; letter-spacing: .05em;
}
.s08-table tbody th { height: 63px; font-size: 12px; font-weight: 500; line-height: 1.2; letter-spacing: .05em; }
.s08-table tbody tr:last-child th { height: 61px; }
.s08-table td { font-size: 14px; line-height: 1; letter-spacing: 0; }
.s08 .is-female { color: var(--c-female); }
.s08 .is-male { 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; }

/* 右：地図（Google マップの埋め込み。読み込むまでは Figma の仮の地図の絵）＋公式サイト */
.s08-side { flex: 1 1 600px; min-width: 0; display: flex; flex-direction: column; gap: 24px; }
.s08-map {
  position: relative; height: 508px; border-radius: 10px; overflow: hidden;
  background: var(--c-text) var(--img-8cc73623e5951a30) center / cover no-repeat;
}
.s08-map iframe { display: block; width: 100%; height: 100%; border: 0; }
.s08-maplink { position: absolute; left: 12px; bottom: 7px; display: flex; align-items: center; height: 44px; text-decoration: none; }
.s08-maplink__box {
  display: flex; align-items: center; gap: 4px; height: 24px; 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;
  transition: opacity .3s ease-out;
}
.s08-maplink__box img { width: 11px; height: 11px; }

.s08-official {
  position: relative; display: flex; align-items: center; justify-content: space-between;
  height: 140px; padding: 0 10px 0 40px; border: 1px solid var(--c-gray); border-radius: 10px;
  background: linear-gradient(to right, #fff 50.1%, rgba(255, 255, 255, 0) 100%), #fff var(--img-9a1190b2857d0669) right -24px center / 334px auto no-repeat;
  color: var(--c-text); text-decoration: none; transition: opacity .3s ease-out;
}
.s08-official__body { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.s08-official__en {
  display: block; width: 245px; 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: .043em; white-space: nowrap;
}
.s08-official__icon {
  align-self: flex-end; margin-bottom: 10px;
  display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: var(--c-gray);
}
@media (hover: hover) {
  .s08-official:hover, .s08-maplink:hover .s08-maplink__box { opacity: .7; }
}

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

@media (max-width: 1024px) {
  .s08-body { flex-direction: column; align-items: stretch; gap: 56px; }
  .s08-info, .s08-side { flex: none; }
}

@media (max-width: 767px) {
  .s08-photos { margin-bottom: 40px; }
  .s08-photos__track { margin-left: min(0px, calc(50% - 434px)); }
  .s08-photo { width: 283px; height: 184px; margin-right: 9px; }
  .s08-photo--low { margin-top: 18px; }
  .s08-foot { border-radius: 40px 40px 0 0; padding: 60px 0 20px; }
  .s08-body { width: calc(100% - 40px); gap: 32px; margin-bottom: 48px; }
  .s08-head { justify-content: space-between; gap: 12px; }
  .s08-brand { width: 210px; }
  .s08-logo { width: 210px; height: 52px; }
  .s08-logo__mark { width: 77px; height: 52px; }
  .s08-logo__type { left: 59px; top: 6px; width: 151px; height: 40px; }
  .s08-tagline { font-size: 10px; letter-spacing: .08em; }
  .s08-badge { width: 112px; height: 50px; padding: 6px 8px; font-size: 13px; }
  .s08-detail { padding-left: 0; gap: 20px; }
  .s08-route { width: auto; }
  .s08-btns { flex-direction: column; gap: 16px; }
  .s08-btn, .s08-btn--line { width: 100%; height: 60px; }
  .s08-hours { width: 100%; }
  .s08-table tr > :first-child { width: 28%; }
  .s08-table tbody th, .s08-table tbody tr:last-child th { height: 44px; font-size: 11px; letter-spacing: 0; }
  .s08-table td { font-size: 12px; }
  .s08-map { height: 200px; }
  .s08-official { height: 100px; padding-left: 20px; }
  .s08-official__logo { width: 200px; height: 49px; }
  .s08-official__logo .s08-logo__mark { width: 73px; height: 49px; }
  .s08-official__logo .s08-logo__type { left: 56px; top: 6px; width: 144px; height: 37px; }
  .s08-official__en { width: 200px; font-size: 24px; line-height: 26px; }
  .s08-copy { font-size: 10px; }
}

/* ===== PC：Figma の要素の上端にそろえる 1〜2px の直し（2026-10-26 差の直し） =====
   要素の上端を Figma（1604:226447）と比べ、ずれが変わる所だけ足し引きした。これで s02 から下のずれ（−1〜−3px）が 0 になり、
   ページの高さも Figma と同じ 17,036px になる */
@media (min-width: 1025px) {
  .s02-cta { margin-top: 2px; }                                 /* 「確認することが大切です」→ CONTACT の枠：Figma より 2px 短かった */
  .s03-body { padding-top: 161px; }                             /* CARE の節の上：1px 短かった */
  .s04-contact { padding-bottom: 148px; }                       /* 9つの理由の節の下：2px 長かった */
  .s06-btns { margin-top: 33px; }                               /* Step01（ボタンあり）の段：1px 短かった */
  .s06-step:nth-child(3) .s06-step-body { padding-bottom: 21px; } /* Step03（写真なし・3行）の段：1px 短かった */
}

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