@charset "utf-8";
/* ==========================================================================
   page-esthetic.css — 「歯の見た目を整える治療」の入口ページ専用パーツ
   （2026-11-01 追加・/service/esthetic.html だけが読む）

   読み込み順：sanitize → style.min → top-natural → theme-hakuji → page-veneer → 本ファイル
   page-veneer.css（vLead / vCards / vSteps / vNote / vFaq / vTable）はそのまま使い、
   このファイルは 1 画面目の「4点パネル」と「4つの治療カード」だけを足す。
   <link> 1行を外せばスタイルだけ素に戻る（HTML ブロックはプレーン表示で残る）。

   新しい色は足していない。theme-hakuji.css 冒頭の :root
   （--kinari / --paper / --sand / --wood / --wood-dark / --bark / --ink / --moss）を使う。
   このサイトは html{font-size:62.5%} なので 1rem = 10px。16px 前提で書かないこと。
   ========================================================================== */

/* ---- 1. 1画面目：自由診療の4点（治療内容／費用／期間と回数／主なリスク）を同じ場所に ----
   医療広告ガイドラインの限定解除要件。ページ下部へ回さず、予約ボタンの手前に置く。 */
.comBlock div.comContent dl.eKey{
  display:grid; grid-template-columns:repeat(4, 1fr); gap:0;
  margin:2.2em 0 1.6em;
  border:1px solid var(--sand); border-top:3px solid var(--wood);
  background:var(--paper);
}
.comBlock div.comContent dl.eKey > div{
  padding:22px 22px 20px;
  border-left:1px solid var(--sand);
  box-sizing:border-box;
}
.comBlock div.comContent dl.eKey > div:first-child{ border-left:0; }
.comBlock div.comContent dl.eKey dt{
  margin:0 0 .8em;
  font-family:"Shippori Mincho", serif; font-weight:500;
  font-size:1.45rem; letter-spacing:.12em; line-height:1.6em;
  color:var(--wood-dark);
}
.comBlock div.comContent dl.eKey dd{
  margin:0;
  font-size:1.38rem; line-height:1.95em; color:var(--ink);
}
.comBlock div.comContent dl.eKey dd + dd{ margin-top:.5em; }
.comBlock div.comContent dl.eKey dd b{
  font-weight:600; color:var(--bark);
  font-variant-numeric:tabular-nums;
}

/* 1画面目の症例写真（2026-11-11 追加）。「見た目」のページで最初に見せるべきは実際の変化なので、
   このページで唯一大きく扱う要素にする。すぐ下に4点（dl.eKey）が来る位置から動かさないこと。 */
.eHero{ margin:2.2em 0 0; }
.eHeroPics{ display:grid; grid-template-columns:1fr 1fr; gap:6px; }
.eHero figure{ margin:0; min-width:0; }
.eHero figure img{ display:block; width:100%; height:auto; }
.comBlock div.comContent .eHero figcaption{
  margin:.45em 0 0;
  font-family:"Shippori Mincho", serif;
  font-size:1.35rem; letter-spacing:.12em; line-height:1.6em; color:var(--wood-dark);
}
.comBlock div.comContent .eHero p.eHeroText{
  margin:.9em 0 0;
  font-size:1.3rem; line-height:1.85em; color:var(--moss);
  line-break:strict; overflow-wrap:break-word;
}

/* 治療した歯の丸印と拡大（2026-11-11 院長が試作5案から3・4を採用）。
   丸の位置は院内の症例集で院長が付けた印と同じ（写真に対する％）。写真そのものは加工しない。
   拡大は同じ写真を背景として大きく表示しているだけ。 */
.eMarkBox{ position:relative; display:block; }
.eMarkBox i.eRing{
  position:absolute; border:2px solid #fff; border-radius:50%;
  box-shadow:0 0 0 1px rgba(34,32,28,.35); pointer-events:none;
}
.eZoomRow{ display:grid; grid-template-columns:1fr 1fr; gap:6px; margin-top:10px; }
.eZoomRow figure{ margin:0; min-width:0; }
.eZoom{
  aspect-ratio:4 / 3;
  background-repeat:no-repeat; background-size:240%; background-position:28% 31%;
  border:1px solid var(--sand);
}

/* 1画面目の補足行（初診で何をするか／5年保証の制度） */
.comBlock div.comContent p.eFirst{
  margin:0 0 1.6em;
  font-size:1.4rem; line-height:1.95em; color:var(--ink);
}
.comBlock div.comContent p.eFirst b{ font-weight:600; color:var(--bark); }

/* ---- 2. 4つの治療カード（それぞれに4点を併記。症例写真は4点の直下に置く：2026-11-11） ---- */
.eCards{
  display:grid; grid-template-columns:1fr 1fr; gap:24px;
  align-items:start; /* 写真の枚数がカードごとに違うので、高さを揃えると短い側の下に大きな空白が出る */
  margin:0 0 2.4em;
}
.eCards article{
  background:var(--paper);
  border:1px solid var(--sand);
  border-top:3px solid var(--wood);
  padding:26px 26px 22px;
  box-sizing:border-box;
  display:flex; flex-direction:column;
}
.comBlock div.comContent .eCards h3{
  margin:0 0 .5em; padding:0;
  font-family:"Shippori Mincho", serif; font-weight:500;
  font-size:1.7rem; letter-spacing:.1em; line-height:1.7em;
  color:var(--bark);
}
.comBlock div.comContent .eCards p.eWho{
  margin:0 0 1.2em;
  font-size:1.35rem; line-height:1.9em; color:var(--moss);
}
.comBlock div.comContent .eCards dl{
  margin:0 0 1.4em;
  border-top:1px solid var(--sand);
}
.comBlock div.comContent .eCards dl > div{
  display:grid; grid-template-columns:6.4em 1fr; gap:0 14px;
  padding:10px 0;
  border-bottom:1px solid var(--sand);
}
.comBlock div.comContent .eCards dt{
  font-family:"Shippori Mincho", serif;
  font-size:1.3rem; letter-spacing:.08em; line-height:1.9em;
  color:var(--wood-dark);
}
.comBlock div.comContent .eCards dd{
  margin:0;
  font-size:1.35rem; line-height:1.9em; color:var(--ink);
}
.comBlock div.comContent .eCards dd b{ font-weight:600; color:var(--bark); font-variant-numeric:tabular-nums; }
.comBlock div.comContent .eCards p.eMore{
  margin:auto 0 0; padding-top:.2em;
  font-size:1.35rem; line-height:1.9em;
}

/* ---- 2b. カード内の症例写真（2026-11-11 追加）
   写真は院内の症例集（2026-11 作成）と同じ向き・トリミング。4点（上の dl）の直下に置き、
   「治療したのはこの歯のみ」を本文で必ず添える。外すと他の歯の見え方まで効果に見える。 */
.eCase{
  margin:0 0 1em; padding:16px 0 0;
  border-top:1px solid var(--sand);
}
.comBlock div.comContent .eCase p.eCaseTitle{
  margin:0 0 .8em;
  font-family:"Shippori Mincho", serif; font-weight:500;
  font-size:1.4rem; letter-spacing:.08em; line-height:1.7em;
  color:var(--wood-dark);
}
.eCasePics{ display:grid; gap:8px; margin:0 0 .9em; }
.eCasePics.c2{ grid-template-columns:1fr 1fr; }
.eCasePics.c3{ grid-template-columns:1fr 1fr 1fr; }
.eCase figure{ margin:0; min-width:0; }
.eCase figure img{ display:block; width:100%; height:auto; }
.eCase figure.eCaseWide{ margin:0 0 .9em; }
.comBlock div.comContent .eCase figcaption{
  margin:.35em 0 0;
  font-size:1.2rem; line-height:1.6em; color:var(--moss); text-align:center;
}
.comBlock div.comContent .eCase p.eCaseText{
  margin:0;
  font-size:1.32rem; line-height:1.9em; color:var(--ink);
}
.comBlock div.comContent .eCase p.eCaseText b{ font-weight:600; color:var(--bark); }
.comBlock div.comContent .eCards p.eCaseNote{
  margin:0 0 1.2em;
  font-size:1.2rem; line-height:1.8em; color:var(--moss);
}
.eCaseText, .eCaseNote{ line-break:strict; overflow-wrap:break-word; word-break:normal; }

/* ---- 2c. リスクの全項目は折りたたみ（2026-11-11）。各カードに主なリスクがあるので、全項目は開いた人だけに ---- */
details.eRiskAll{
  margin:1.4em 0 1.8em;
  border-top:1px solid var(--sand); border-bottom:1px solid var(--sand);
}
details.eRiskAll > summary{
  cursor:pointer; list-style:none;
  padding:14px 2.2em 14px 0; position:relative;
  font-family:"Shippori Mincho", serif; font-size:1.5rem; letter-spacing:.08em; line-height:1.7em;
  color:var(--bark);
}
details.eRiskAll > summary::-webkit-details-marker{ display:none; }
details.eRiskAll > summary::after{
  content:"＋"; position:absolute; right:.2em; top:50%; transform:translateY(-50%);
  color:var(--wood-dark);
}
details.eRiskAll[open] > summary::after{ content:"－"; }
details.eRiskAll > summary:focus-visible{ outline:2px solid var(--wood-dark); outline-offset:3px; }
details.eRiskAll[open]{ padding-bottom:.6em; }

/* ---- 3. 「1回で終わる理由」の3段 ---- */
.eWhy{
  display:grid; grid-template-columns:repeat(3, 1fr); gap:24px;
  margin:0 0 2.4em;
}
.eWhy section{
  background:var(--paper);
  border:1px solid var(--sand);
  padding:24px 24px 20px;
  box-sizing:border-box;
}
.comBlock div.comContent .eWhy h3{
  margin:0 0 .9em; padding:0;
  font-family:"Shippori Mincho", serif; font-weight:500;
  font-size:1.55rem; letter-spacing:.1em; line-height:1.7em;
  color:var(--wood-dark);
}
.comBlock div.comContent .eWhy p{ margin:0; font-size:1.4rem; line-height:1.95em; }

/* ---- 4. 日本語の折り返し（theme-hakuji.css と同じ方針。anywhere は使わない） ---- */
.eKey dd, .eCards dd, .eCards p, .eWhy p, p.eFirst{
  line-break:strict; overflow-wrap:break-word; word-break:normal;
}
.eKey dt, .eCards h3, .eWhy h3{ word-break:auto-phrase; text-wrap:pretty; }

/* ---- 5. タブレット・スマートフォン ---- */
@media screen and (max-width:1024px){
  .comBlock div.comContent dl.eKey{ grid-template-columns:1fr 1fr; }
  .comBlock div.comContent dl.eKey > div:nth-child(3){ border-left:0; }
  .comBlock div.comContent dl.eKey > div:nth-child(n+3){ border-top:1px solid var(--sand); }
  .eWhy{ grid-template-columns:1fr; gap:18px; }
}
@media screen and (max-width:768px){
  .eCards{ grid-template-columns:1fr; gap:18px; }
  .eCards article{ padding:22px 20px 18px; }
}
@media screen and (max-width:600px){
  .comBlock div.comContent dl.eKey{ grid-template-columns:1fr; }
  .comBlock div.comContent dl.eKey > div{ border-left:0; padding:18px 18px 16px; }
  .comBlock div.comContent dl.eKey > div + div{ border-top:1px solid var(--sand); }
  .comBlock div.comContent .eCards dl > div{ grid-template-columns:1fr; gap:2px; }
  .eWhy section{ padding:20px 18px 16px; }
  /* 3枚並び（前歯のやり直し）は、スマホでは1枚が小さすぎて色の差が見えない（2026-11-11 院長指示）。
     「治療前」「治療後」を上段に大きく並べ、途中の「形を整えたところ」を下段の中央へ回す。 */
  .eCasePics.c3{ grid-template-columns:1fr 1fr; }
  .eCasePics.c3 figure:nth-child(1){ order:1; }
  .eCasePics.c3 figure:nth-child(3){ order:2; }
  .eCasePics.c3 figure:nth-child(2){ order:3; grid-column:1 / -1; justify-self:center; width:calc(50% - 4px); }
  /* カードの内側余白（左右20px）まで写真を広げる。文字は余白の内側のまま */
  .eCasePics, .eCase figure.eCaseWide{ margin-left:-20px; margin-right:-20px; }
}