@charset "UTF-8";
/* =========================================================
   under.css … 下層ページ（page-〇〇.php）の本文
     1. セクション（ページの区切り）
     2. 見出し
     3. 文章
     4. 画像
     5. 箱・区切り線
     6. 画像＋文章の2列
     7. 手順（STEP）・アイコン付きの項目
     8. 並べる（グリッド）・項目と説明
     9. リスト・表・ボタン・地図
    10. ページ専用（アクセス・医院紹介・入れ歯・料金案内）
   画面幅の区切り：スマホ ～767px ／ タブレット 768～1024px ／ PC 1025px～
   ========================================================= */

.under-page { padding-bottom: 40px; overflow-x: clip; }


/* ---------------------------------------------------------
   1. セクション
     under-section            … 標準（上 90px・下 15px）
       --pt-l / --pt-s / --pt-none … 上の余白を 大きく(180px) / 小さく(35px) / なし(10px)
       --pb-m / --pb-l              … 下の余白を 中(75px) / 大きく(140px)
       --blue                       … 水色の背景（見出しは白文字）
       --photo                      … 写真の背景（<img class="under-section__bg"> を入れる）
     under-inner              … 中身の幅（最大 1170px）
   --------------------------------------------------------- */
.under-section { padding: 90px 0 15px; }
.under-section--pt-l    { padding-top: 180px; }
.under-section--pt-s    { padding-top: 35px; }
.under-section--pt-none { padding-top: 10px; }
.under-section--pb-m    { padding-bottom: 75px; }
.under-section--pb-l    { padding-bottom: 140px; }
.under-section--blue    { background: var(--color-light); }
.under-section--photo   { position: relative; padding: 150px 0; overflow: hidden; }
.under-section__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.under-section--photo::before { content: ""; position: absolute; inset: 0; background: rgba(255, 255, 255, .74); }
.under-section--photo .under-inner { position: relative; }

.under-inner { max-width: 1170px; margin: 0 auto; padding: 0 15px; }

@media screen and (max-width: 1199px) {
  .under-inner { padding: 0 24px; }
}
@media screen and (max-width: 767px) {
  .under-section          { padding: 40px 0 9px; }
  .under-section--pt-l    { padding-top: 60px; }
  .under-section--pt-s    { padding-top: 21px; }
  .under-section--pt-none { padding-top: 6px; }
  .under-section--pb-m    { padding-bottom: 45px; }
  .under-section--pb-l    { padding-bottom: 84px; }
  .under-section--photo   { padding: 90px 0; }
  .under-inner { padding: 0 18px; }
}


/* ---------------------------------------------------------
   2. 見出し
     under-title        … 飾りの画像＋大見出し（セクションの先頭）
     under-heading      … 大見出し（h2・45px・中央）  --left 左寄せ ／ --small 小さめ ／ --tooth 上に歯のアイコン
     under-heading-sub  … 中見出し（35px）            --icon 歯のアイコン付き ／ --center 中央 ／ --blue 青文字
     under-heading-s    … 小見出し（25px）            --center 中央 ／ --blue 青文字 ／ --orange オレンジ文字
     under-icon-title   … 歯のアイコン＋大見出し（横並び）
   --------------------------------------------------------- */
.under-title { text-align: center; }
.under-title__deco { display: block; width: 26%; margin: 0 auto 10px; }

.under-heading { margin: 18px 0 38px; font-size: 45px; line-height: 1.3; letter-spacing: .12em; text-align: center; }
.under-heading--left  { text-align: left; }
.under-heading--small { font-size: 30px; letter-spacing: .06em; }
.under-heading--tooth::before { content: ""; display: block; width: 34px; height: 36px; margin: 0 auto 6px; background: url("../images/common/icon-heading.webp") no-repeat center / contain; }
.under-section--blue .under-heading { color: #fff; }

.under-heading-sub { margin: 44px 0 16px; font-size: 35px; line-height: 1.4; letter-spacing: .12em; }
.under-heading-sub--icon { display: flex; align-items: center; gap: 10px; }
.under-heading-sub--icon::before { content: ""; flex: 0 0 auto; width: 34px; height: 36px; background: url("../images/common/icon-heading.webp") no-repeat center / contain; }
.under-heading-sub--center { text-align: center; justify-content: center; }
.under-heading-sub--blue   { color: var(--color-primary); }

.under-heading-s { margin: 36px 0 16px; font-size: 25px; line-height: 1.4; letter-spacing: .05em; }
.under-heading-s--center { text-align: center; }
.under-heading-s--blue   { color: var(--color-primary); }
.under-heading-s--orange { color: var(--color-orange); }

.under-icon-title { display: flex; align-items: center; justify-content: center; gap: 16px; margin: 0 0 30px; }
.under-icon-title__icon { flex: 0 0 auto; width: 60px; }
.under-icon-title .under-heading { margin: 0; }

/* 箱・手順の中の先頭の見出しは上の余白なし */
.under-box > :first-child,
.under-step__body > :first-child,
.under-icon-item__body > :first-child,
.under-media__text > :first-child,
.under-grid__item > :first-child { margin-top: 0; }

@media screen and (min-width: 768px) and (max-width: 1024px) {
  .under-heading { font-size: clamp(30px, 4vw, 45px); }
}
@media screen and (max-width: 767px) {
  .under-title__deco { width: 56%; }
  .under-heading { margin: 8px 0 18px; font-size: 24px; letter-spacing: .08em; }
  .under-heading--small { font-size: 20px; }
  .under-heading--tooth::before { width: 28px; height: 30px; }
  .under-heading-sub { font-size: 22px; letter-spacing: .06em; }
  .under-heading-sub--icon::before { width: 26px; height: 28px; }
  .under-heading-s { font-size: 20px; }
  .under-icon-title { gap: 8px; }
  .under-icon-title__icon { width: 36px; }
}


/* ---------------------------------------------------------
   3. 文章
     <p>                … 本文（17px）
     under-point        … 少し大きい強調の文（21px）
     under-lead         … さらに大きい文（24px）
     under-text-center  … 中央寄せの文
     under-space        … 1行あける
   --------------------------------------------------------- */
.under-page p { font-size: 17px; line-height: 1.7; letter-spacing: 0; }
.under-page .under-point { font-size: 21px; line-height: 1.6; letter-spacing: .06em; }
.under-page .under-lead  { font-size: 24px; line-height: 1.5; letter-spacing: .06em; }
.under-text-center { text-align: center; }
.under-space { min-height: 1.7em; }
.under-page p a { color: var(--color-primary); text-decoration: underline; }
.under-page p a.btn-round { color: #fff; text-decoration: none; }

@media screen and (max-width: 767px) {
  .under-page p { font-size: 15px; }
  .under-page .under-point { font-size: 17px; }
  .under-page .under-lead  { font-size: 18px; }
}


/* ---------------------------------------------------------
   4. 画像
     under-img        … 画像（元の大きさまで・中央）
       --full / --80 / --60 / --40 / --25 … 幅を 100% / 80% / 60% / 40% / 25% にする
     under-step-line  … 手順の間の青い線
   --------------------------------------------------------- */
.under-img { margin: 0 auto 10px; text-align: center; }
.under-img img { display: inline-block; width: auto; max-width: 100%; height: auto; }
.under-img--full, .under-img--80, .under-img--60, .under-img--40, .under-img--25 { margin-left: auto; margin-right: auto; }
.under-img--full img, .under-img--80 img, .under-img--60 img, .under-img--40 img, .under-img--25 img { display: block; width: 100%; }
.under-img--80 { width: 80%; }
.under-img--60 { width: 60%; }
.under-img--40 { width: 40%; }
.under-img--25 { width: 25%; }
.under-img--full img { border-radius: 10px; }

.under-step-line { margin: 10px 0; }
.under-step-line img { display: block; width: 100%; }

@media screen and (max-width: 767px) {
  .under-img--60 { width: 34%; }
  .under-img--40 { width: 34%; }
  .under-img--25 { width: 56%; }
}


/* ---------------------------------------------------------
   5. 箱・区切り線
     under-box     … 角丸の白い箱      --blue 薄い青 ／ --orange 薄いオレンジ ／ --clear 半透明の白
     under-hr      … 灰色の点線        --blue 青の線
     under-label   … 「文字＋右へ伸びる点線」の小見出し  --orange オレンジ
   --------------------------------------------------------- */
.under-box { margin: 20px 0; padding: 30px 30px 34px; border-radius: 10px; background: #fff; }
.under-box--blue   { background: var(--color-pale); }
.under-box--blue p{
	color:#3daaf4;
}
.under-box--blue h3{
	color:#3daaf4;
}
.under-box--orange { background: #fffaf8; }
.under-box--clear  { background: rgba(255, 255, 255, .83); }
/* 白い背景のセクションに置いた白い箱は、枠と影で囲む */
.under-section:not(.under-section--blue):not(.under-section--photo) .under-box:not(.under-box--blue):not(.under-box--orange) { border: 1px solid #e8e8e8; box-shadow: 0 2px 6px rgba(0, 0, 0, .06); }
.under-page .under-box--orange .under-define__term p { color: var(--color-orange); }

.under-hr { width: 100%; margin: 6px auto 16px; border: 0; border-top: 2px dashed rgba(191, 191, 191, .75); }
.under-hr--blue { border-top: 2px solid rgba(61, 170, 244, .75); }

.under-label { display: flex; align-items: center; gap: 14px; margin: 18px 0 10px; }
.under-page .under-label { font-weight: 700; font-size: 21px; letter-spacing: .1em; color: var(--color-primary); }
.under-label::after { content: ""; flex: 1; border-top: 2px dashed rgba(61, 170, 244, .75); }
.under-page .under-label--orange { color: var(--color-orange); }
.under-label--orange::after { border-top-color: rgba(255, 158, 87, .75); }

@media screen and (max-width: 767px) {
  .under-box { padding: 20px 16px 24px; }
  .under-page .under-label { font-size: 17px; }
}


/* ---------------------------------------------------------
   6. 画像＋文章の2列
     under-media           … 左に文章・右に画像
       --reverse           … 左に画像・右に文章
       --img-s / --img-xs  … 画像を小さめ（30%）／もっと小さく（16%）
     under-media__text / under-media__img
     ※スマホでは画像が上・文章が下の1列
   --------------------------------------------------------- */
.under-media { display: grid; grid-template-columns: 1fr 42%; gap: 30px; align-items: center; margin: 30px 0; }
.under-media--reverse { grid-template-columns: 42% 1fr; }
.under-media--img-s { grid-template-columns: 1fr 30%; }
.under-media--reverse.under-media--img-s { grid-template-columns: 30% 1fr; }
.under-media--img-xs { grid-template-columns: 1fr 16%; }
.under-media--reverse.under-media--img-xs { grid-template-columns: 16% 1fr; }
.under-media--reverse .under-media__img { order: -1; }
.under-media__img img { display: block; width: 100%; height: auto; border-radius: 10px; }
.under-media__img .under-img { margin-bottom: 10px; }

@media screen and (max-width: 767px) {
  .under-media, .under-media--reverse, .under-media--img-s, .under-media--reverse.under-media--img-s, .under-media--img-xs, .under-media--reverse.under-media--img-xs { grid-template-columns: 1fr; gap: 14px; }
  .under-media__img { order: -1; }
}


/* ---------------------------------------------------------
   7. 手順（STEP）・アイコン付きの項目
     under-step             … 番号の丸＋文章
       --photo              … 右に写真も並べる
     under-icon-item        … アイコン＋文章
     under-card-head        … 箱の見出し（左にイラスト）
   --------------------------------------------------------- */
.under-step { display: grid; grid-template-columns: 72px 1fr; gap: 24px; align-items: center; margin: 20px 0; }
.under-step--photo { grid-template-columns: 72px 1fr 33%; }
.under-step__num { width: 72px; }
.under-step__photo img { display: block; width: 100%; height: auto; border-radius: 10px; }

.under-icon-item { display: grid; grid-template-columns: 110px 1fr; gap: 24px; align-items: center; margin: 20px 0; }
.under-icon-item__icon { width: 100%; }

.under-card-head { display: flex; align-items: center; gap: 16px; }
.under-card-head__icon { flex: 0 0 auto; width: 80px; }
.under-card-head .under-heading-sub { margin: 0; }

@media screen and (max-width: 767px) {
  .under-step, .under-step--photo { grid-template-columns: 44px 1fr; gap: 12px; align-items: start; }
  .under-step__num { width: 44px; }
  .under-step__photo { grid-column: 1 / -1; }
.under-icon-item {
    grid-template-columns: 60px 1fr;
    gap: 12px;
    align-items: start;
}
}


/* ---------------------------------------------------------
   8. 並べる（グリッド）・項目と説明
     under-grid --2 / --3 / --4   … 同じ幅で2～4列に並べる（--card 枠付きのカードにする）
     under-define                  … 左に項目名・右に説明
   --------------------------------------------------------- */
.under-grid { display: grid; gap: 30px; margin: 30px 0; }
.under-grid--2 { grid-template-columns: repeat(2, 1fr); }
.under-grid--3 { grid-template-columns: repeat(3, 1fr); }
.under-grid--4 { grid-template-columns: repeat(4, 1fr); }
.under-grid__item .under-img { margin-bottom: 6px; }
.under-grid--card .under-grid__item { padding: 10px 10px 18px; border: 1px solid #e8e8e8; border-radius: 6px; background: #fff; box-shadow: 0 2px 6px rgba(0, 0, 0, .06); }
.under-grid--card .under-grid__item .under-img img { border-radius: 4px; }
.under-page .under-grid--card .under-lead { font-size: 19px; color: var(--color-primary); }

.under-define { display: grid; grid-template-columns: 32% 1fr; gap: 30px; align-items: center; margin: 24px 0; }
.under-define__term > * { margin: 0; }

@media screen and (max-width: 900px) {
  .under-grid--3, .under-grid--4 { grid-template-columns: repeat(2, 1fr); }
}
@media screen and (max-width: 767px) {
  .under-grid { gap: 18px; }
  .under-grid--2, .under-grid--3, .under-grid--4 { grid-template-columns: 1fr; }
  .under-define { grid-template-columns: 1fr; gap: 8px; }
}


/* ---------------------------------------------------------
   9. リスト・表・ボタン・地図
     under-checks  … 歯のアイコン付きの青い太字リスト
     under-list    … 普通のリスト
     under-table   … 項目｜内容 の表
     under-btn     … 中央に置くボタン（中に <a class="btn-round">）
     under-map     … Googleマップ
   --------------------------------------------------------- */
.under-checks { max-width: 1000px; margin: 30px auto; }
.under-checks li { position: relative; padding: 12px 0 12px 50px; font-weight: 700; font-size: 28px; line-height: 1.4; letter-spacing: .1em; color: var(--color-primary); }
.under-checks li::before { content: ""; position: absolute; top: 15px; left: 0; width: 32px; height: 34px; background: url("../images/common/icon-heading.webp") no-repeat center / contain; }

.under-list li { font-size: 17px; line-height: 1.7; }

.under-table { width: 100%; margin: 24px 0; border-collapse: collapse; font-size: 16px; }
.under-table th, .under-table td { padding: 12px 16px; border: 1px solid #c9dff2; text-align: left; vertical-align: top; }
.under-table th { background: #eaf5fe; font-weight: 700; white-space: nowrap; }

.under-btn { margin: 30px 0; text-align: center; }

.under-map iframe { display: block; width: 100%; height: 450px; margin: 30px 0 0; border: 0; border-radius: 10px; }

@media screen and (max-width: 767px) {
  .under-checks li { padding-left: 40px; font-size: 19px; }
  .under-checks li::before { top: 8px; width: 26px; height: 28px; }
  .under-list li { font-size: 15px; }
  .under-map iframe { height: 320px; }
}


/* ---------------------------------------------------------
   10. ページ専用
   --------------------------------------------------------- */

/* ---- アクセス（page-access.php）：アイコン｜項目名｜内容 ---- */
.access-row { display: grid; grid-template-columns: 44px 90px 1fr; gap: 0 14px; align-items: end; margin: 20px auto; }
.access-row__icon { width: 100%; }
.under-page .access-row__label { padding: 6px 0; border-bottom: 2px dashed rgba(191, 191, 191, .75); font-weight: 700; font-size: 17px; letter-spacing: .1em; color: var(--color-primary); text-align: center; }
.access-row__body { padding: 6px 0; border-bottom: 2px dashed rgba(191, 191, 191, .75); }
.under-page .access-row__body p { font-size: 17px; line-height: 1.6; letter-spacing: .04em; }

@media screen and (max-width: 767px) {
  .access-row { grid-template-columns: 40px 70px 1fr; gap: 0 10px; }
  .under-page .access-row__label { font-size: 15px; }
  .under-page .access-row__body p { font-size: 14px; }
}

/* ---- 医院紹介（page-clinic-introduction.php）：医院概要の表・診療時間・写真のカルーセル ---- */
.clinic-overview { max-width: 640px; margin: 20px auto 30px; border-collapse: collapse; }
.clinic-overview th, .clinic-overview td { padding: 10px 12px; border-bottom: 2px solid rgba(170, 213, 249, .75); vertical-align: middle; }
.clinic-overview th { width: 42%; font-weight: 700; font-size: 20px; letter-spacing: .2em; color: var(--color-primary); text-align: right; }
.clinic-overview td { font-size: 18px; letter-spacing: .08em; }
.clinic-hours { max-width: 520px; margin: 0 auto; }

.clinic-gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; max-width: 1000px; margin: 30px auto 0; }
.clinic-gallery__item { padding: 10px 10px 18px; border: 1px solid #e8e8e8; border-radius: 6px; background: #fff; box-shadow: 0 2px 6px rgba(0, 0, 0, .06); }
.clinic-gallery__item > img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 4px; }
.under-page .clinic-gallery__title { margin: 10px 0 8px; padding-bottom: 8px; border-bottom: 2px solid var(--color-light); font-weight: 700; font-size: 20px; letter-spacing: .1em; color: var(--color-primary); text-align: center; }
.under-page .clinic-gallery__text p { font-size: 15px; }

/* カルーセル（script.js が .clinic-gallery を包んで作る） */
.carousel { position: relative; max-width: 1020px; margin: 30px auto 0; padding: 0 0 40px; }
.carousel__view { overflow: hidden; }
.clinic-gallery.carousel__track { display: flex; gap: 0; max-width: none; margin: 0; transition: transform .45s ease; }
.carousel__track > .clinic-gallery__item { display: flex; flex-direction: column; flex: 0 0 calc(100% / 3); margin: 0; padding: 0 5px; border: 0; background: none; box-shadow: none; }
.carousel__track .clinic-gallery__item > img { padding: 8px 8px 0; border: 1px solid #e8e8e8; border-bottom: 0; border-radius: 6px 6px 0 0; }
.under-page .carousel__track .clinic-gallery__title { margin: 0; padding: 10px 8px 8px; border-left: 1px solid #e8e8e8; border-right: 1px solid #e8e8e8; }
.carousel__track .clinic-gallery__text { flex: 1; padding: 6px 12px 16px; border: 1px solid #e8e8e8; border-top: 0; border-radius: 0 0 6px 6px; }
.carousel__arrow { position: absolute; top: calc(50% - 40px); width: 30px; height: 30px; padding: 0; border: 2px solid var(--color-orange); border-radius: 50%; background: #fff; }
.carousel__arrow::before { content: ""; position: absolute; top: 9px; width: 8px; height: 8px; border-left: 2px solid var(--color-orange); border-bottom: 2px solid var(--color-orange); }
.carousel__arrow--prev { left: -46px; }
.carousel__arrow--prev::before { left: 10px; transform: rotate(45deg); }
.carousel__arrow--next { right: -46px; }
.carousel__arrow--next::before { left: 7px; transform: rotate(-135deg); }
.carousel__dots { position: absolute; left: 0; right: 0; bottom: 8px; display: flex; justify-content: center; gap: 6px; }
.carousel__dots button { width: 9px; height: 9px; padding: 0; border: 1px solid var(--color-orange); border-radius: 50%; background: #fff; }
.carousel__dots button.is-active { background: var(--color-orange); }

@media screen and (max-width: 1100px) {
  .carousel { margin-left: 40px; margin-right: 40px; }
}
@media screen and (max-width: 767px) {
  .clinic-overview th { width: 36%; font-size: 16px; letter-spacing: .1em; }
  .clinic-overview td { font-size: 15px; }
  .clinic-gallery { grid-template-columns: 1fr; gap: 16px; }
  .carousel__track > .clinic-gallery__item { flex-basis: 100%; }
  .carousel { margin-left: 36px; margin-right: 36px; }
  .carousel__arrow--prev { left: -34px; }
  .carousel__arrow--next { right: -34px; }
}

/* ---- 入れ歯（page-denture.php）：保険診療の入れ歯（水色の箱＋2列） ---- */
.denture-plan { max-width: 1042px; margin: 30px auto 0; padding: 20px 38px 30px; border-radius: 10px; background: var(--color-pale); }
.denture-plan__cols { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; margin-top: 24px; }
.denture-plan__col .under-label { margin: 0 0 12px; }

@media screen and (max-width: 767px) {
  .denture-plan { margin: 20px 8px 0; padding: 16px 26px 26px; }
  .denture-plan__cols { grid-template-columns: 1fr; gap: 26px; margin-top: 18px; }
}

/* ---- 料金案内（page-price.php）：見出しの上の歯アイコン・目次ボタン・料金表 ---- */
.price-icon { width: 40px; margin: 0 auto 6px; }
.price-icon img { display: block; width: 100%; }
.price-icon + .under-heading, .price-icon + .under-heading-sub { margin-top: 0; }
.price-nav { display: flex; flex-wrap: wrap; justify-content: center; gap: 18px 76px; max-width: 900px; margin: 46px auto 0; }
.price-nav li:nth-child(4) { margin-left: 20px; }
.price-nav li:nth-child(4), .price-nav li:nth-child(5) { margin-right: -36px; }
.price-nav .btn-round { min-width: 0; min-height: 44px; padding: 0 16px; gap: 22px; font-family: var(--font-base); font-weight: 500; font-size: 23px; letter-spacing: .1em; }
.price-nav .btn-round::after { content: "\f13a"; font-size: 22px; }

.price-table { width: 100%; max-width: 934px; margin: 36px auto 0; border-collapse: separate; border-spacing: 0 4px; font-size: 20px; letter-spacing: .08em; }
.price-table thead th { padding: 12px 16px; background: var(--color-light); font-weight: 700; font-size: 20px; letter-spacing: .3em; color: #fff; text-align: center; }
.price-table thead th:first-child { width: 66%; border-right: 2px solid #fff; border-radius: 10px 0 0 0; }
.price-table thead th:last-child { border-radius: 0 10px 0 0; text-align: left; }
.price-table tbody th { padding: 13px 16px; background: #f9fcff; font-weight: 700; font-size: 19px; line-height: 1.5; letter-spacing: .1em; color: var(--color-primary); text-align: center; }
.price-table tbody td { padding: 13px 16px; line-height: 1.5; text-align: left; vertical-align: middle; }
.price-table small { display: block; font-size: 15px; line-height: 1.4; }
.under-section[id^="price-"] { scroll-margin-top: 140px; }

@media screen and (max-width: 767px) {
  .price-icon { width: 30px; }
  .price-nav { flex-direction: column; align-items: center; gap: 12px; margin-top: 24px; }
  .price-nav li:nth-child(n) { margin: 0; }
  .price-nav .btn-round { justify-content: space-between; width: 210px; min-height: 38px; padding: 0 10px 0 16px; font-size: 17px; }
  .price-nav .btn-round::after { font-size: 20px; }
  .price-table, .price-table thead, .price-table tbody, .price-table tr, .price-table th, .price-table td { display: block; width: 100% !important; }
  .price-table { margin-top: 24px; font-size: 17px; }
  .price-table thead th:first-child { display: none; }
  .price-table thead th:last-child { border-radius: 10px 10px 0 0; font-size: 18px; text-align: center; }
  .price-table tbody tr { margin-top: 4px; }
  .price-table tbody th { padding: 10px 8px; font-size: 16px; }
  .price-table tbody td { padding: 12px 8px 14px; text-align: center; }
  .price-table small { font-size: 13px; }
  .under-section[id^="price-"] { scroll-margin-top: 80px; }
}