@charset "UTF-8";
/* =====================================================================
   2026-09-14 修正版（第3回）
   ①③⑤⑥ 書体の統一・可読性向上   ②⑤⑩ 左寄りの解消（センターバランス）
   ④ バナーの大きさ・配置の統一     ⑥⑦⑧⑨ 横スクロール廃止・画像比率の適正化
   ⑪ STEP画像の拡大表示をやめ原寸基準に
   ※ 既存CSSの後に読み込む上書きレイヤー
   ===================================================================== */

:root{
  --font-jp:"Noto Sans JP","Hiragino Kaku Gothic ProN","Hiragino Sans","Yu Gothic","YuGothic",Meiryo,sans-serif;
  --ink:#2b333c;
  --ink-sub:#4d5762;
  --navy:#324860;
  --re:#b22d00;
  --bl:#2556a2;
  --line:#dfe4e9;
  --fs-body:17px;
  --fs-body-sp:16px;
}

/* ---------------------------------------------------------------
   ① ③ 書体の統一（明朝／ゴシック混在をやめ、全ページ同一書体に）
   --------------------------------------------------------------- */
body,
input,button,select,textarea,
#cat h2,#cat h3,#cat ul#ans li ol li,
#about h2,#about h3,#about p,
.g-box h2,.g-box h3,.g-box h4,.g-box h5,
h3.re,h3.bl,.g-box h4.re,
.type1-4 h3,.type1-4 h4,.type2-4 h3,.type3-1-2 h4,.price h3,
.res-table th,.res-table td,
footer,footer p,#ftnav,#sp_drw{
  font-family:var(--font-jp) !important;
}
body{
  color:var(--ink);
  font-size:var(--fs-body);
  line-height:1.9;
  letter-spacing:.03em;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
}
h1,h2,h3,h4,h5{ font-feature-settings:"palt" 1; letter-spacing:.05em; }

/* 見出しサイズを1つのスケールに統一 --------------------------------- */
#cat h2,#about h2,.g-box h2{
  font-size:clamp(22px,2.2vw,30px);
  font-weight:700;
  line-height:1.55;
  color:#24313d;
  text-align:center;
  margin:0 auto 6px;
}
.g-box h2{
  position:relative;
  padding-bottom:16px;
  margin-bottom:22px;
}
.g-box h2::after{
  content:"";
  display:block;
  width:56px;height:3px;
  margin:14px auto 0;
  background:var(--navy);
  position:absolute;left:0;right:0;bottom:0;
}
#cat h3{
  font-size:clamp(17px,1.6vw,21px);
  font-weight:700;
  line-height:1.7;
  color:var(--navy);
}
#about h3{
  font-size:clamp(17px,1.5vw,20px);
  font-weight:700;
  line-height:1.8;
  margin-top:20px;
}
#about p{ font-size:clamp(16px,1.4vw,18px); line-height:1.8; }
.g-box h5{
  font-size:clamp(18px,1.8vw,23px);
  font-weight:700;
  line-height:1.6;
  padding:12px 18px;
  margin:32px 0 20px;
  background:var(--navy);
  color:#fff;
  border-radius:4px;
  text-align:center;
}
h3.re,h3.bl,.type1-4 h3,.type2-4 h3{
  font-size:clamp(18px,1.7vw,22px);
  font-weight:700;
  line-height:1.6;
}
.g-box h4.re{ font-size:clamp(16px,1.5vw,19px); font-weight:700; line-height:1.8; }
.type1-4 h4,.type3-1-2 h4,.price h3,.benefit-heading{
  font-size:clamp(16px,1.5vw,19px);
  font-weight:700;
  line-height:1.8;
}
.g-box p,.g-box li,.case p,.point p{ font-size:inherit; }
.pan{ font-size:14px; color:var(--ink-sub); }

/* ---------------------------------------------------------------
   ② TOPカテゴリーカード：文字ブロックを中央に揃える
   --------------------------------------------------------------- */
#cat ul#ans > li{
  display:flex;
  flex-direction:column;
  align-items:center;
  border:1px solid var(--line) !important;
  border-radius:8px;
  background:#fff;
  padding:22px 20px !important;
}
#cat ul#ans li img{ margin:6px auto 4px !important; }
#cat ul#ans li ol{
  width:-moz-fit-content !important;
  width:fit-content !important;
  max-width:100% !important;
  margin:10px auto 4px !important;
  text-align:left;
}
#cat ul#ans li ol li{
  font-size:16px;
  line-height:1.9;
  padding:2px 0;
  max-width:none !important;
  white-space:normal;
}
#cat ul#ans li p.detail{ margin:16px auto 4px; }
#cat ul#ans li p.detail img{ width:191px !important; max-width:100%; }

/* TOP 治療の流れ：左右の余白を均等に */
#about{ text-align:center; }
#about h3,#about p{
  width:-moz-fit-content;
  width:fit-content;
  max-width:100%;
  margin-left:auto;
  margin-right:auto;
  text-align:left;
}
#about h2{ margin-bottom:10px; }

/* ---------------------------------------------------------------
   ⑤ 導入文・説明文のセンターバランス
   --------------------------------------------------------------- */
.intro-section .type1-1 > p,
.intro-section .type2-1-1 > p,
.page-type1 .type1-1 > p,
.type2-1-2 p,
.type2-3 > p,
.type2-5 > p,
.txt-c{
  width:auto !important;
  max-width:100% !important;
  margin-left:auto !important;
  margin-right:auto !important;
  text-align:center !important;
}
.intro-section .intro-list,
.type3-1-1 > ul.li-dot,
.page-type1 ul.li-re-big{
  width:-moz-fit-content;
  width:fit-content;
  max-width:100%;
  margin-left:auto;
  margin-right:auto;
}
.g-box h4.re,.type3-1-2 h4{ text-align:center !important; }
.point p{ text-align:left !important; }
.point{ border-radius:8px; border:1px solid var(--line); }

/* ---------------------------------------------------------------
   ⑥⑦⑧⑨ 図版：横スクロールを廃止し、原寸を超えない並列レイアウトに
   --------------------------------------------------------------- */
.fig-row{
  display:flex;
  flex-wrap:nowrap;
  align-items:center;
  justify-content:center;
  gap:20px;
  width:100%;
  max-width:min(100%,var(--fig-max,100%));
  margin:22px auto;
}
.fig-cell{
  flex:var(--w,1) 1 0;
  min-width:0;
  text-align:center;
}
.fig-cell img{
  display:block;
  width:100%;
  max-width:100%;
  height:auto;
  margin:0 auto;
}
.fig-label{
  display:block;
  margin-top:8px;
  font-size:15px;
  font-weight:700;
  letter-spacing:.08em;
  color:var(--navy);
}
.fig-arrow{
  flex:0 0 34px;
  width:34px;height:26px;
  display:flex;align-items:center;justify-content:center;
}
.fig-arrow::before{
  content:"";
  width:0;height:0;
  border-left:20px solid #b42900;
  border-top:13px solid transparent;
  border-bottom:13px solid transparent;
}
/* 旧・横スクロール表示は使用しない */
.clinical-figure,.figure-scroll{ overflow:visible !important; }
.clinical-figure figcaption{ display:none !important; }

/* ---------------------------------------------------------------
   画像は原寸を超えて拡大しない（ぼやけ・縦つぶれ対策）⑦⑧⑨⑪
   --------------------------------------------------------------- */
.intro-figure > img,
.flexbox3-white .box > img,
.flexbox3-case .box img,
.flexbox2-case .box img,
.center-box img{
  width:auto !important;
  max-width:100% !important;
  height:auto !important;
  margin-left:auto !important;
  margin-right:auto !important;
}
.flexbox3-case .box,.flexbox2-case .box{ text-align:center; }
.flexbox3-case .box img,.flexbox2-case .box img{ margin-bottom:10px !important; }
.flexbox3-case .box p,.flexbox2-case .box p{ font-size:16px; line-height:1.8; }

/* ---------------------------------------------------------------
   ⑩ 治療の流れ（Step）：カード化して左右バランスを揃える
   --------------------------------------------------------------- */
.type2-4{
  display:flex !important;
  flex-wrap:wrap;
  align-items:center;
  justify-content:center;
  gap:18px 28px;
  width:100%;
  max-width:780px;
  margin:0 auto 16px !important;
  padding:22px 26px !important;
  background:#fff;
  border:1px solid var(--line);
  border-bottom:1px solid var(--line) !important;
  border-radius:10px;
}
.type2-4 > img{
  flex:0 0 auto;
  width:150px !important;
  max-width:100%;
  height:auto;
  float:none !important;
  padding:0 !important;
}
.type2-4 .step-copy{
  flex:1 1 340px;
  min-width:0;
  text-align:left;
}
.type2-4 h3{
  margin:0 0 6px !important;
  color:var(--navy);
}
.type2-4 .step-copy p,
.type2-4 .step-copy ul{ margin-top:4px; }
.type2-4 ul.li-dot-no{ display:block; }

/* ---------------------------------------------------------------
   ④ フッターバナーの大きさ・間隔を統一
   --------------------------------------------------------------- */
footer .foot-logo img{ float:none; }
.foot-assist ul{ margin-bottom:0 !important; }
@media screen and (min-width:1131px){
  footer .foot-logo{
    display:flex; align-items:center; gap:18px;
  }
  footer .foot-logo img{ margin:0 !important; }
  footer .foot-logo img.logo{ width:274px; }
  .foot-assist ul{ display:flex; gap:14px; }
  .foot-assist li{ float:none; padding:0 !important; }
  .foot-assist li img{ width:208px; margin:0 !important; }
}
@media screen and (max-width:1130px){
  footer .foot-logo{
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:18px;
  }
  footer .foot-logo img{ margin:0 !important; float:none !important; }
  footer .foot-logo img.logo{ width:min(208px,66vw) !important; }
  footer .foot-logo img.btn{ width:min(208px,66vw) !important; }
  .foot-assist{
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:12px;
    width:100% !important;
    margin:12px auto 0 !important;
  }
  .foot-assist ul{
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:12px;
    width:100%;
    margin:0 !important;
  }
  .foot-assist li{
    float:none !important;
    width:min(208px,66vw) !important;
    margin:0 !important;
  }
  .foot-assist li img,
  .foot-assist > a img.tel{
    width:100% !important;
    max-width:100% !important;
    margin:0 auto !important;
  }
  .foot-assist > a{ display:block; width:min(208px,66vw); }
  #foot-r img.time{ width:100% !important; max-width:440px; margin:8px auto !important; display:block; }
  #foot-r p.re{ text-align:center; font-size:14px; line-height:1.8; }
}

/* 固定フッターナビ */
#ftnav ul{ gap:8px; }
#ftnav ul li{ width:32%; }

/* ---------------------------------------------------------------
   表組み
   --------------------------------------------------------------- */
/* TOPカテゴリー画像も原寸を超えて拡大しない */
#cat > ul > li > a > img{ width:auto !important; max-width:100% !important; }

.res-table{ font-size:16px; line-height:1.8; }
.res-table th{ font-weight:700; color:#25313c; }

/* ---------------------------------------------------------------
   タブレット／スマートフォン
   --------------------------------------------------------------- */
@media screen and (max-width:1000px){
  .treatment-page .g-box{ padding:28px 24px !important; }
}
@media screen and (max-width:767px){
  body{ font-size:var(--fs-body-sp); }
  #cat ul#ans li ol li{ font-size:15px; }
  #about h3,#about p{ width:100%; }
  .g-box h2{ padding-bottom:14px; margin-bottom:18px; }
  .g-box h5{ margin:24px 0 16px; padding:10px 14px; }
  .type2-4{ padding:20px 18px !important; gap:14px; }
  .type2-4 .step-copy{ flex:1 1 100%; text-align:left; }
  .type2-4 h3{ text-align:center; }
  .flexbox3-case .box p,.flexbox2-case .box p{ font-size:15px; }
  .res-table{ font-size:15px; }
}

/* 図版：狭い画面では横に並べず縦に積む（横スクロールを発生させない） */
@media screen and (max-width:700px){
  .fig-row{
    flex-direction:column;
    align-items:center;
    gap:14px;
    max-width:100%;
  }
  .fig-cell{
    flex:0 0 auto !important;
    width:calc(var(--w,200) * 1px);
    max-width:100%;
  }
  .fig-arrow{
    flex:0 0 auto;
    width:26px;height:34px;
    transform:rotate(90deg);
  }
}


/* ---------------------------------------------------------------
   追加調整（2026-09-14）
   --------------------------------------------------------------- */
/* 見出しの改行位置をスマホで元の意図どおりに戻す */
@media screen and (max-width:767px){
  .g-box h2 br.sp{ display:inline !important; }
  .g-box h2 br.pc{ display:none !important; }
}

/* 症例ブロック：見出しと本文の重心を中央に */
.case h3,
.case h4,
.type1-4 > p.txt-c{ text-align:center; }
.case p{
  width:100%;
  max-width:100%;
  margin-left:auto;
  margin-right:auto;
  text-align:center;
}

/* Step カード：1行説明はセンター、箇条書きは左揃えのまま中央配置 */
@media screen and (max-width:767px){
  .type2-4 .step-copy{ text-align:center; }
  .type2-4 .step-copy ul{
    width:-moz-fit-content;
    width:fit-content;
    max-width:100%;
    margin-left:auto;
    margin-right:auto;
    text-align:left;
  }
}

/* 症例カードの段組：3 → 2 → 1 列 */
@media screen and (max-width:840px) and (min-width:560px){
  .flexbox3-case{ grid-template-columns:repeat(2,minmax(0,1fr)) !important; }
  .flexbox3-case .box,.flexbox2-case .box{ max-width:none !important; }
}
@media screen and (max-width:559px){
  .flexbox3-case,.flexbox2-case{ grid-template-columns:1fr !important; }
}

/* =====================================================================
   2026-09-14 修正版（第4回）
   ① スマホのメインビジュアルを縦長比に（画像を大きく表示）
   ② TOPカード内の改行バランス調整
   ③④ 縦につぶれていた図版の縦横比を補正（画像側を差し替え済み）
   ⑤ 「歯冠長延長の治療例」の症例画像を他の症例と同じ大きさに
   ===================================================================== */

/* ① メインビジュアル：スマホでは余白をトリミングした専用画像を使用し、
      縦横比 1153 : 580（縦 50.3%）で全体が見えるようにする */
@media screen and (max-width:767px){
  #header #vi{
    background-image:url(../img/main-sp.jpg) !important;
    background-size:cover !important;
    background-position:center center !important;
    background-repeat:no-repeat !important;
    width:100% !important;
    height:0;
    padding-bottom:50.3% !important;
  }
  #header #vi div{ padding:0 !important; margin:0 !important; }
}

/* ② TOPカード：1行に収まる幅を確保し、「ます」だけが送られないようにする */
#cat ul#ans{ max-width:1120px !important; }
#cat ul#ans > li{ width:32% !important; }
#cat ul#ans li ol li{
  font-size:15px;
  line-height:2;
  text-indent:-1em;
  padding-left:1em;
}
@media screen and (max-width:1000px){
  #cat ul#ans > li{ width:100% !important; max-width:620px !important; }
  #cat ul#ans li ol li{ font-size:16px; }
}
@media screen and (max-width:767px){
  #cat ul#ans li ol li{ font-size:15px; }
}

/* ⑤ 歯冠長延長の治療例：他の症例（277px）と同じ表示サイズに揃える */
.flexbox2-case .box img{
  width:auto !important;
  max-width:min(100%,277px) !important;
  height:auto !important;
  margin-left:auto !important;
  margin-right:auto !important;
}

/* ② 補足：3カラム時の1行あたり文字数を確保（中間幅での折り返し防止） */
#cat ul#ans{ width:min(96vw,1120px) !important; }
@media screen and (min-width:1001px) and (max-width:1199px){
  #cat ul#ans > li{ padding:20px 14px !important; }
  #cat ul#ans li ol li{ font-size:13.5px; }
}

/* ⑤ 補足：2枚組の症例は画像幅に合わせて枠を絞り、間延びを防ぐ */
.flexbox2-case{
  max-width:600px !important;
  margin-left:auto !important;
  margin-right:auto !important;
}

/* =====================================================================
   2026-09-15 修正版（第5回）
   「結合組織移植術とは」のイラストをスマホで大きく見せる
   　連結画像（img5.png / img6.png）を1枚ずつに分割し、
   　文字・枠はHTML＋CSSで組み直しています。
   　PC：横3列（従来どおり）／スマホ：縦1列で大きく表示
   ===================================================================== */
.method-wrap{
  width:100%;
  max-width:666px;
  margin:24px auto 8px;
  text-align:center;
}
.method-tab{
  display:inline-block;
  background:#ccc;
  color:#333;
  font-weight:700;
  font-size:clamp(17px,1.7vw,21px);
  line-height:1.5;
  padding:8px 46px 6px;
  border-radius:14px 14px 0 0;
  margin:0 auto;
}
.method-box{
  border-radius:10px;
  padding:18px 22px 24px;
  text-align:center;
}
.method-box--old{
  background:#ccc;
  color:#333;
}
.method-cap{
  font-size:clamp(16px,1.6vw,20px);
  font-weight:700;
  line-height:1.6;
  margin:10px 0 14px;
}
.method-row{
  display:flex;
  flex-wrap:nowrap;
  justify-content:center;
  align-items:flex-start;
  gap:10px;
}
.method-fig{
  margin:0;
  flex:1 1 0;
  min-width:0;
  max-width:158px;
}
.method-fig img{
  display:block;
  width:100%;
  height:auto;
  margin:0 auto;
}
.method-down{
  width:0;height:0;
  margin:18px auto 4px;
  border-left:17px solid transparent;
  border-right:17px solid transparent;
  border-top:22px solid #b62b00;
}
.method-lead{
  font-weight:700;
  font-size:clamp(16px,1.6vw,20px);
  color:#333;
  margin:26px 0 12px;
}
.method-box--ours{
  background:#184fa8;
  color:#fff;
  padding-top:22px;
}
.method-pill{
  display:inline-block;
  border:2px solid #fff;
  border-radius:999px;
  color:#ff0;
  font-weight:700;
  font-size:clamp(16px,1.7vw,20px);
  line-height:1.5;
  padding:7px 30px;
  margin:0 0 18px;
}
.method-note{
  margin:18px auto 0;
  line-height:1.9;
  font-size:clamp(15px,1.5vw,18px);
}
.method-hl{ color:#ff0; font-weight:700; }
.method-br-sp{ display:none; }

/* タブレット以下：イラストを1枚ずつ大きく */
@media screen and (max-width:600px){
  .method-wrap{ margin:20px auto 4px; }
  .method-box{ padding:16px 14px 20px; }
  .method-tab{ padding:7px 34px 5px; }
  .method-row{
    flex-direction:column;
    align-items:center;
    gap:12px;
  }
  .method-fig{
    flex:0 0 auto;
    width:100%;
    max-width:300px;
  }
  .method-down{ margin:16px auto 2px; }
  .method-note{ font-size:15px; letter-spacing:0; }
  .method-br-sp{ display:inline; }
}

/* =====================================================================
   2026-09-15 追記
   幅を内容に合わせている見出し（width:fit-content）が、
   second-p.css の margin:0 指定により左寄せになっていたのを中央に戻す
   ===================================================================== */
.g-box h4.re,
.type3-1-2 h4,
.type3-1-2 h4.re{
  margin-left:auto !important;
  margin-right:auto !important;
  text-align:center !important;
}