@charset "utf-8";
/* ==========================================================================
   page-veneer.css — セラミックラミネートベニア専用ページのパーツ
   （2026-08-27 追加）

   読み込み順：sanitize → style.min → top-natural → theme-hakuji → 本ファイル
   /service/laminate_veneer.html だけが読む。<link> 1行を外せば
   スタイルだけ素に戻る（HTML ブロックはプレーン表示で残る）。

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

/* ---- 1. 各節の冒頭に置く「結論の1〜2文」（AI検索が引用しやすい単位） ---- */
.comBlock div.comContent p.vLead{
  border-left:2px solid var(--wood);
  margin:0 0 2.2em;
  padding:.2em 0 .2em 20px;
  font-family:"Shippori Mincho", serif;
  font-size:1.6rem; line-height:2em; letter-spacing:.04em;
  color:var(--bark);
}

/* ---- 2. 2カラム（適応しやすい／慎重な検討が必要） ---- */
.vCols{
  display:grid; grid-template-columns:1fr 1fr; gap:24px;
  margin:0 0 2.4em;
}
.vCols section{
  background:var(--paper);
  border:1px solid var(--sand);
  border-top:3px solid var(--wood);
  padding:26px 26px 22px;
  box-sizing:border-box;
}
.vCols section.vCaution{ border-top-color:var(--moss); }
.comBlock div.comContent .vCols h3{
  margin:0 0 1.2em; padding:0;
  font-family:"Shippori Mincho", serif; font-weight:500;
  font-size:1.6rem; letter-spacing:.1em; line-height:1.7em;
  color:var(--bark);
}
.comBlock div.comContent .vCols ul{ margin:0; padding:0; list-style:none; }
.comBlock div.comContent .vCols li{
  font-size:1.45rem; line-height:1.95em; color:var(--ink);
  padding-left:1.1em; text-indent:-1.1em;
  margin-bottom:.5em;
}
.comBlock div.comContent .vCols li::before{ content:"・"; color:var(--wood); }

/* ---- 3. 治療の流れ（縦並び・番号付き） ---- */
.comBlock div.comContent ol.vSteps{
  margin:0 0 1em; padding:0; list-style:none;
  counter-reset:vstep;
}
.comBlock div.comContent ol.vSteps > li{
  counter-increment:vstep;
  position:relative;
  border-top:1px solid var(--sand);
  padding:26px 0 26px 62px;
}
.comBlock div.comContent ol.vSteps > li:last-child{ border-bottom:1px solid var(--sand); }
.comBlock div.comContent ol.vSteps > li::before{
  content:counter(vstep);
  position:absolute; left:0; top:24px;
  width:38px; height:38px; line-height:38px; text-align:center;
  border:1px solid var(--wood); border-radius:50%;
  font-family:"Shippori Mincho", serif; font-size:1.5rem;
  color:var(--wood-dark);
}
.comBlock div.comContent ol.vSteps h3{
  margin:0 0 .7em; padding:0;
  font-family:"Shippori Mincho", serif; font-weight:500;
  font-size:1.6rem; letter-spacing:.1em; line-height:1.7em;
  color:var(--bark);
}
.comBlock div.comContent ol.vSteps p{ margin:0; }

/* ---- 4. エビデンスのカード ---- */
.vCards{
  display:grid; grid-template-columns:1fr 1fr; gap:24px;
  margin:0 0 2.4em;
}
.vCards article{
  background:var(--paper);
  border:1px solid var(--sand);
  padding:26px 26px 22px;
  box-sizing:border-box;
}
.comBlock div.comContent .vCards h3{
  margin:0 0 1.1em; 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 .vCards p{
  margin:0; font-size:1.45rem; line-height:2em;
}

/* ---- 5. 写真と、その近傍に置く限定解除キャプション ----
   医療広告ガイドライン：治療前後の写真には治療内容・費用・主なリスク／副作用を
   写真の近くに併記する。ページ下部へまとめない。 */
.comBlock div.comContent figure.vFig{
  margin:0 0 2.6em; padding:0;
}
.comBlock div.comContent figure.vFig img{
  display:block; width:100%; height:auto;
  border:1px solid var(--sand);
}
.vPair{
  display:grid; grid-template-columns:1fr 1fr; gap:16px;
}
.vPair figure{ margin:0; padding:0; }
.vPair figure img{ display:block; width:100%; height:auto; border:1px solid var(--sand); }
.vPair figure figcaption{
  margin-top:.7em;
  font-size:1.25rem; line-height:1.8em; letter-spacing:.06em;
  color:var(--wood-dark);
}
.comBlock div.comContent .vFig figcaption,
.comBlock div.comContent .vCaption{
  margin-top:1.1em;
  border-left:2px solid var(--wood);
  padding:.2em 0 .2em 18px;
  font-size:1.3rem; line-height:1.95em; color:var(--ink);
}
.comBlock div.comContent .vCaption dl{ margin:0; }
.comBlock div.comContent .vCaption dt{
  font-family:"Shippori Mincho", serif;
  font-size:1.3rem; letter-spacing:.08em; color:var(--wood-dark);
  margin-top:.7em;
}
.comBlock div.comContent .vCaption dt:first-child{ margin-top:0; }
.comBlock div.comContent .vCaption dd{
  margin:0 0 .2em; font-size:1.3rem; line-height:1.95em; color:var(--ink);
}

/* ---- 6. 注記ブロック（自由診療・リスク・出典の但し書き） ---- */
.vNote{
  border-left:2px solid var(--wood);
  padding:4px 0 4px 20px;
  margin:2.2em 0 0;
}
.comBlock div.comContent .vNote h3{
  margin:0 0 .9em; padding:0;
  font-family:"Shippori Mincho", serif; font-weight:500;
  font-size:1.45rem; letter-spacing:.1em; color:var(--wood-dark);
}
.comBlock div.comContent .vNote p{ margin:0 0 .8em; font-size:1.35rem; line-height:1.95em; }
.comBlock div.comContent .vNote ul{ margin:0; padding:0; list-style:none; }
.comBlock div.comContent .vNote li{
  font-size:1.35rem; line-height:1.95em; color:var(--ink);
  padding-left:1.1em; text-indent:-1.1em;
}
.comBlock div.comContent .vNote li::before{ content:"・"; color:var(--wood); }

/* ---- 7. よくあるご質問（アコーディオン・JS 不要） ---- */
.vFaq{ border-top:1px solid var(--sand); margin:0 0 1em; }
.vFaq details{ border-bottom:1px solid var(--sand); }
.vFaq summary{
  list-style:none; cursor:pointer; position:relative;
  padding:22px 44px 22px 30px;
  font-family:"Shippori Mincho", serif;
  font-size:1.55rem; line-height:1.8em; letter-spacing:.06em;
  color:var(--bark);
}
.vFaq summary::-webkit-details-marker{ display:none; }
.vFaq summary::before{
  content:"Q"; position:absolute; left:0; top:22px;
  font-family:"Shippori Mincho", serif; font-size:1.4rem;
  color:var(--wood-dark);
}
/* 開閉の目印：横棒（固定）＋縦棒（開くと横棒に重なる）で ＋ → − にする。
   画像もアイコンフォントも足さない。 */
.vFaq summary::after{
  content:""; position:absolute; right:8px; top:50%;
  width:13px; height:1px; background:var(--wood-dark);
}
.vFaq summary .vPlus{
  position:absolute; right:8px; top:50%;
  width:13px; height:1px; background:var(--wood-dark);
  transform:rotate(90deg); transition:transform .25s;
}
.vFaq details[open] summary .vPlus{ transform:rotate(0deg); }
.vFaq summary:hover{ color:var(--wood-dark); }
.comBlock div.comContent .vFaq .vAnswer{
  position:relative;
  margin:0; padding:0 8px 24px 30px;
}
.comBlock div.comContent .vFaq .vAnswer::before{
  content:"A"; position:absolute; left:0; top:0;
  font-family:"Shippori Mincho", serif; font-size:1.4rem;
  color:var(--wood-dark);
}
.comBlock div.comContent .vFaq .vAnswer p{ margin:0 0 .9em; }
.comBlock div.comContent .vFaq .vAnswer p:last-child{ margin-bottom:0; }

/* ---- 8. 参考文献（本文より1段階小さく） ---- */
.comBlock div.comContent p.vRefLead{
  font-size:1.35rem; line-height:1.95em; margin:0 0 1.8em;
}
.comBlock div.comContent ol.vRefList{
  margin:0; padding:0 0 0 1.8em;
}
.comBlock div.comContent ol.vRefList li{
  font-size:1.3rem; line-height:1.95em; color:var(--ink);
  margin-bottom:1.1em;
  overflow-wrap:break-word;
}
.comBlock div.comContent ol.vRefList li .vRefJa{ color:var(--moss-dark); }
/* 本文の上付き番号から飛んできたときに、対象の文献を淡く起こす */
.comBlock div.comContent ol.vRefList li:target{
  background:rgba(171,146,100,.14);
  box-shadow:0 0 0 6px rgba(171,146,100,.14);
}
.comBlock div.comContent sup a{
  text-decoration:none; padding:0 .15em;
  color:var(--wood-dark);
}
.comBlock div.comContent sup a:hover{ color:var(--bark); }

/* ---- 9. 日本語の折り返し（theme-hakuji.css と同じ方針） ----
   anywhere は禁則処理まで無効にして「デメリ／ット」になるため使わない。 */
.vCols li, .vCards p, .vNote li, .vNote p,
.vFaq summary, .vFaq .vAnswer p,
.vRefList li, .vCaption dd, p.vLead,
ol.vSteps p{
  line-break:strict;
  overflow-wrap:break-word;
  word-break:normal;
}
.vCols h3, .vCards h3, .vSteps h3, .vNote h3, p.vLead{
  word-break:auto-phrase;
  text-wrap:pretty;
}

/* ---- 10. タブレット・スマートフォン ---- */
@media screen and (max-width:919px){
  .vCols, .vCards{ gap:20px; }
}
@media screen and (max-width:768px){
  .vCols, .vCards{ grid-template-columns:1fr; gap:18px; }
  .vCols section, .vCards article{ padding:22px 20px 18px; }
  .vPair{ grid-template-columns:1fr; gap:20px; }
}
@media screen and (max-width:600px){
  .comBlock div.comContent p.vLead{ font-size:1.5rem; padding-left:16px; }
  .comBlock div.comContent ol.vSteps > li{ padding:22px 0 22px 50px; }
  .comBlock div.comContent ol.vSteps > li::before{
    width:32px; height:32px; line-height:32px; font-size:1.35rem; top:21px;
  }
  .vFaq summary{ padding:18px 34px 18px 26px; font-size:1.45rem; }
  .vFaq summary::before{ top:18px; }
  .comBlock div.comContent .vFaq .vAnswer{ padding-left:26px; padding-bottom:20px; }
  .comBlock div.comContent .vCaption,
  .comBlock div.comContent .vFig figcaption{ padding-left:14px; font-size:1.25rem; }
  .vNote{ padding-left:16px; }
}

/* ==========================================================================
   11. 比較表（2026-08-27 追加）
   「他の治療法との違い」「2つの製作方法」で使う共通の表。
   医療広告ガイドラインの比較優良広告を避けるため、**他院ではなく治療法どうし**を
   比べる用途に限る（top の .llmoCompare と同じ考え方）。
   600px 以下は横スクロールをやめ、1行＝1カードに積む。列名は HTML の
   data-label を ::before で出す（横スクロールは「右に続きがある」と気づけない）。
   ========================================================================== */
.vTableWrap{ overflow-x:auto; -webkit-overflow-scrolling:touch; margin:0 0 1.6em; }
.comBlock div.comContent table.vTable{
  width:100%; min-width:680px;
  table-layout:fixed;
  border-collapse:collapse;
  background:var(--paper);
  font-size:1.35rem; line-height:1.85em;
  color:var(--ink);
}
.comBlock div.comContent table.vTable caption{
  caption-side:top; text-align:left;
  padding-bottom:.9em;
  font-size:1.25rem; letter-spacing:.08em; color:var(--wood-dark);
}
.comBlock div.comContent table.vTable th,
.comBlock div.comContent table.vTable td{
  border:1px solid var(--sand);
  padding:13px 14px;
  vertical-align:top; text-align:left;
  white-space:normal;
}
.comBlock div.comContent table.vTable thead th{
  background:var(--sumi-mid);
  color:var(--sand);
  font-family:"Shippori Mincho", serif;
  font-weight:500; letter-spacing:.08em;
}
/* 当院で行う治療の列・行は地を起こして視線を止める（優劣ではなく現在地の明示） */
.comBlock div.comContent table.vTable thead th.vOurs{ background:var(--bark); color:#e8d9b4; }
.comBlock div.comContent table.vTable tbody th{
  width:22%;
  background:rgba(244,241,233,.9);
  font-weight:500; letter-spacing:.06em;
  color:var(--bark);
}
.comBlock div.comContent table.vTable td.vOurs,
.comBlock div.comContent table.vTable tbody tr.vOurs th{ background:rgba(171,146,100,.14); }
.comBlock div.comContent table.vTable tbody tr.vOurs th{ color:var(--bark); }

/* 総額例の表は数字を右へ揃える */
.comBlock div.comContent table.vTable.vTotal td{ text-align:right; font-variant-numeric:tabular-nums; }
.comBlock div.comContent table.vTable.vTotal td.vSum{ font-weight:600; color:var(--bark); }
.comBlock div.comContent table.vTable.vTotal{ min-width:560px; }

@media screen and (max-width:600px){
  .vTableWrap{ overflow-x:visible; }
  .comBlock div.comContent table.vTable{ min-width:0; width:100%; display:block; }
  /* .vTotal の min-width はクラス1つぶん詳細度が高く、メディアクエリでは
     打ち消せない（メディアクエリは詳細度を上げない）。同じ詳細度で明示的に戻す。
     これを外すと 375px で総額表が 560px のまま残り、ページ全体が横スクロールする */
  .comBlock div.comContent table.vTable.vTotal{ min-width:0; }
  .comBlock div.comContent table.vTable thead{ display:none; }
  .comBlock div.comContent table.vTable tbody,
  .comBlock div.comContent table.vTable tbody tr,
  .comBlock div.comContent table.vTable tbody th,
  .comBlock div.comContent table.vTable tbody td{ display:block; width:auto; }
  .comBlock div.comContent table.vTable tbody tr{
    border:1px solid var(--sand);
    margin-bottom:18px;
  }
  .comBlock div.comContent table.vTable tbody tr:last-child{ margin-bottom:0; }
  .comBlock div.comContent table.vTable tbody th{
    background:var(--sumi-mid); color:var(--sand);
    font-family:"Shippori Mincho", serif; font-weight:500;
    font-size:1.45rem; letter-spacing:.08em;
    border:0; padding:12px 14px;
  }
  .comBlock div.comContent table.vTable tbody tr.vOurs th{
    background:var(--bark); color:#e8d9b4;
  }
  .comBlock div.comContent table.vTable tbody td{
    border:0; border-top:1px solid rgba(224,217,203,.8);
    padding:12px 14px;
  }
  .comBlock div.comContent table.vTable tbody td::before{
    content:attr(data-label);
    display:block; margin-bottom:.45em;
    font-size:1.15rem; letter-spacing:.06em; line-height:1.5;
    color:var(--wood-dark);
  }
  .comBlock div.comContent table.vTable.vTotal td{ text-align:left; }
  /* display:block にすると caption が内容幅に潰れるので横幅を明示する */
  .comBlock div.comContent table.vTable caption{
    display:block; width:100%; box-sizing:border-box;
    font-size:1.2rem; line-height:1.7; text-align:left;
  }
}

/* ---- 治療の流れ：来院回数のバッジ ---- */
.comBlock div.comContent ol.vSteps h3 .vVisit{
  display:inline-block; vertical-align:middle;
  margin-left:.9em;
  border:1px solid var(--sand); border-radius:2px;
  padding:.15em .7em;
  font-family:-apple-system,BlinkMacSystemFont,"Helvetica Neue",sans-serif;
  font-size:1.1rem; letter-spacing:.06em; font-weight:400;
  color:var(--wood-dark); background:var(--kinari);
}

/* ---- ルート見出し（CEREC即日／技工所製作） ---- */
.comBlock div.comContent h3.vRoute{
  margin-top:2.6em;
  padding:.55em 0 .55em 16px;
  border-left:3px solid var(--wood);
  font-size:1.7rem;
}
.comBlock div.comContent h3.vRoute:first-of-type{ margin-top:0; }
.comBlock div.comContent h3.vRoute span{
  display:block;
  font-family:-apple-system,BlinkMacSystemFont,"Helvetica Neue",sans-serif;
  font-size:1.2rem; letter-spacing:.08em; color:var(--wood-dark);
  margin-top:.5em;
}

/* 折り返しの方針は theme-hakuji.css と同じ（anywhere は使わない） */
.vTable td, .vTable th{
  line-break:strict; overflow-wrap:break-word; word-break:normal;
}