@import url('https://fonts.googleapis.com/css2?family=Shippori+Mincho:wght@400;500;600&display=swap');
/* ==========================================================================
   案A｜白磁（HAKUJI）— 白 × 墨 × 淡金
   キーワードの重心：審美・ハイセンス・親しみやすさ・銀座
   「銀座の画廊の白壁」。色数を絞り、余白と罫の精度で上質さを出す。
   明るいので写真と歯の色が正確に見え、初診の方にも入りやすい。

   読み込み：sanitize → style.min → top-natural → 本ファイル
   （theme-sumi / theme-dark / top-light は読まない。本ファイル1枚で完結）
   ========================================================================== */

:root{
  --kinari:#faf8f5;      /* 地：ほんのり温かい白 */
  --paper:#ffffff;       /* カード面：純白 */
  --clay:#f1ede6;
  --sand:#e0d9cb;        /* 罫（淡） */
  --sand-pale:#eee9df;
  --wood:#ab9264;        /* 淡金アクセント */
  --wood-dark:#8a7346;
  --moss:#6d665b;        /* 二次色：温かいグレー */
  --moss-dark:#4a443b;
  --moss-deep:#2a2722;
  --bark:#22201c;        /* 見出しの墨 */
  --ink:#33302a;         /* 本文 */
  --sumi-mid:#3b3831;
}

/* ---- 1. 地と余白 ---- */
body{ background:var(--kinari); color:var(--ink); letter-spacing:.02em; }
table{ letter-spacing:normal; }
#accessMap{ background:var(--kinari); }
.comBlock.pdTB{ padding:118px 0; }
.comBlock.pdT{ padding-top:118px; }
.comBlock.pdB{ padding-bottom:118px; }
.comBlock + .comBlock{ border-top:1px solid var(--sand); }

/* ---- 2. ヘッダー・メニュー・固定バー ---- */
#header{
  background:rgba(250,248,245,.9);
  border-bottom:1px solid var(--sand);
}
#header div.clinicName h3,
#header h1.clinicName,
#header div.clinicName a{ color:var(--bark); letter-spacing:.24em; }
#headerBtnMenu .btn span{ background:var(--bark); }
#headerBtnMenu .name{ color:var(--moss); }
#breadCrumb, #breadCrumb li, #breadCrumb li a{ color:var(--moss); }
#menu{ background:rgba(34,32,28,.97); }
#menu p.enTitle{ color:var(--wood); }
#menu ul.menuList li a{ color:#f2eee6; }
#menu ul.menuList li a:hover{ color:var(--wood); }
#menu div.hours table{ border-bottom-color:rgba(171,146,100,.45); }
#menu div.hours table tr th{ border-top-color:rgba(171,146,100,.45); }
#menu div.hours table tr td{ border-top-color:rgba(171,146,100,.2); }
div#fixInfo{ background:rgba(34,32,28,.95); border-top:1px solid rgba(171,146,100,.4); }
div#fixInfo ul li.tel a.tel{ color:#e4d9c0; }

/* ---- 3. 見出し：墨で静かに、下に極細の金線 ---- */
.comBlock div.comContent h2.com{
  font-family:"Shippori Mincho", serif;
  color:var(--bark);
  font-weight:400;
  margin-top:0; margin-bottom:1.9em;
  padding-bottom:.7em;
}
.comBlock div.comContent h2.com::after{
  height:1px; width:3.4em;
  background:var(--wood);
}
.comBlock p.enTitle span{
  color:var(--wood-dark);
  font-family:"Shippori Mincho", serif;
  font-weight:400;
}

/* ---- 4. 本文・リンク ---- */
.comBlock div.comContent p.com{ line-height:2.15em; letter-spacing:.035em; }
.comBlock div.comContent ul.com li{ line-height:2.1em; letter-spacing:.035em; }
.comBlock div.comContent ul.com li::marker{ color:var(--wood); }
.comBlock div.comContent p.com a,
.comBlock div.comContent p a,
.comBlock div.comContent ul.com a,
.comBlock div.comContent dd a{
  color:var(--wood-dark);
  text-decoration-color:var(--sand);
}
.comBlock div.comContent p.com a:hover,
.comBlock div.comContent p a:hover,
.comBlock div.comContent ul.com a:hover,
.comBlock div.comContent dd a:hover{ color:var(--bark); text-decoration-color:var(--wood); }
.linkIcons ul li a{ color:var(--bark); }
.linkIcons ul li a span{ opacity:.7; }
.linkTexts .linkTextsWrap ul li a{ color:var(--moss-dark); }
.linkTexts .linkTextsWrap ul li.head a{ color:var(--bark); font-weight:600; }
.linkTexts .linkTextsWrap ul li a:hover{ color:var(--wood-dark); }
.linkTexts{ border-top-color:var(--sand); }
#accessMap a.accessGmaps{ color:var(--wood-dark); border-bottom-color:var(--wood); }

/* ---- 5. 写真：白壁に掛けた額装 ---- */
#topMv{ background:var(--clay); }
#topMv div.visuals div.visual{ filter:sepia(.1) saturate(.94) contrast(1.02); }
#topMv::after{ background:linear-gradient(180deg, rgba(34,32,28,0) 45%, rgba(34,32,28,.34) 100%); }
#pageMv{ border-bottom:1px solid var(--sand); filter:saturate(.94); }
.comBlock div.comContent div.video{
  border:1px solid var(--sand); border-radius:2px;
  box-shadow:0 10px 30px rgba(34,32,28,.07);
}

/* ---- 6. カード：純白＋一本罫 ---- */
.comNews, .landingApp{
  background:var(--paper);
  border:1px solid var(--sand);
  border-radius:2px;
}
.landingApp div.telFax a.contactTel, .landingApp div.telFax a.tel,
.landingApp div.telFax a.contactMail, .landingApp div.telFax a.mail,
.landingApp div.telFax a.web{ color:var(--bark); }
.landingApp div.telFax a.contactTel i, .landingApp div.telFax a.tel i,
.landingApp div.telFax a.contactMail i, .landingApp div.telFax a.mail i,
.landingApp div.telFax a.web i{ color:var(--wood); }

/* ---- 7. 料金表：白地＋墨の見出し行 ---- */
.comBlock div.comContent table[class^="price"] tr th,
.comBlock div.comContent table[class^="price"] tr th:nth-child(2){
  background:var(--bark)!important; color:#efe7d6!important;
  border-color:var(--bark)!important;
  letter-spacing:.1em; font-weight:500;
}
.comBlock div.comContent table[class^="price"] tr td:first-child{ color:var(--ink); }
.comBlock div.comContent table[class^="price"] tr td:nth-child(2){
  background:var(--sand-pale)!important; color:var(--bark);
}
.comBlock div.comContent table[class^="price"] tr td,
.comBlock div.comContent table[class^="price"] tr th,
.comBlock div.comContent table.simple tr td,
.comBlock div.comContent table.simple tr th{ border-top-color:var(--sand)!important; }
.comBlock div.comContent table[class^="price"]{ border-bottom:2px solid var(--wood)!important; }
.comBlock div.comContent table.simple{ border-bottom-color:var(--sand)!important; }

/* ---- 8. ボタン：墨の細枠、hover で墨ベタ ---- */
.comBlock div.comContent a.btn,
div#courseDetail a.btn, div#courseFooter div.link a.btn, div#courseContent a.btn{
  color:var(--bark); background:transparent;
  border:1px solid var(--bark); border-radius:0;
  letter-spacing:.16em; padding:1.05em 2.5em; font-weight:500;
}
.comBlock div.comContent a.btn:hover,
div#courseDetail a.btn:hover, div#courseFooter div.link a.btn:hover, div#courseContent a.btn:hover{
  background:var(--bark); border-color:var(--bark); color:#f2eee6!important; opacity:1;
}
#footer a.btn, #menu a.btn{
  border-radius:0; border-color:var(--wood); color:var(--wood)!important; letter-spacing:.16em;
}
#footer a.btn:hover, #menu a.btn:hover{ background:var(--wood); color:#fff!important; }

/* ---- 9. フッター：墨で締める ---- */
div#footer{
  background:var(--bark);
  border-top:1px solid var(--wood);
  color:#eee9df;
}
#footer p.enTitle span{ color:var(--wood); }
#footer div.clinicName h3{ color:#efe7d6; letter-spacing:.18em; }
#footer a{ color:#eee9df; }
#footer a:hover{ color:var(--wood); }
#footer footer{ color:rgba(238,233,223,.5); }
#footer div.hours table{ border-bottom-color:rgba(171,146,100,.45); }
#footer div.hours table tr th{ border-top-color:rgba(171,146,100,.45); }
#footer div.hours table tr td{ border-top-color:rgba(171,146,100,.2); }

/* ==========================================================================
   10. トップ：分割型ファーストビュー（左＝白の面／右＝写真）
   ========================================================================== */
#topMv{ position:absolute; top:0; right:0; width:54%; height:100vh; z-index:1; overflow:hidden; }
/* ロゴは固定ヘッダー（高さ60px・淡色で不透明度90%）の下に潜り込むと白ロゴが
   見えなくなる。ヘッダーの高さぶん下げて写真の上に置く */
#topMv div.logo{ justify-content:flex-start; align-items:flex-start; padding:92px 0 0 62px; }
#topMv div.logo p{ max-width:190px; width:190px; margin:0; }
/* 影は文字の輪郭に沿わせる。これが効くぶん、背後の暗がりは淡くできる */
#topMv div.logo p img{ mix-blend-mode:normal;
  filter:drop-shadow(0 1px 3px rgba(0,0,0,.85)) drop-shadow(0 2px 16px rgba(0,0,0,.5)); }
#topMv div.visuals div.visual{ background-position:center !important; }
#topMaincopy{
  position:relative; z-index:2; width:46%; min-height:100vh;
  display:flex; flex-direction:column; justify-content:center;
  padding:0 5.5vw; box-sizing:border-box; background:var(--kinari);
}
#topMaincopy::before{
  content:"GINZA / CERAMIC RESTORATION";
  font-family:"Shippori Mincho", serif; color:var(--wood-dark);
  margin-bottom:2.4em;
}
#topMaincopy h2{
  font-family:"Shippori Mincho", serif; margin:0; padding:0;
  color:var(--bark);
}
#topMaincopy h2 br{ display:none; }
#topMaincopy::after{ content:""; display:block; width:64px; height:1px; background:var(--wood); margin-top:2.6em; }
/* 明るい地の上のメニューボタンは墨のままで読める（チップ不要） */
#headerBtnMenu .btn span, #headerBtnMenu p.close{ background:var(--bark); }

@media screen and (max-width:1024px){
  #topMv{ width:50%; }
  #topMv div.logo{ padding:88px 0 0 34px; }
  #topMaincopy{ width:50%; padding:0 4.5vw; }
}
@media screen and (max-width:768px){
  #topMv{ position:relative; width:100%; height:56vh; }
  #topMv div.logo{ justify-content:center; align-items:center; padding:0; }
  #topMv div.logo p{ max-width:230px; width:62%; margin:auto; }
  #topMaincopy{ width:100%; min-height:0; padding:56px 8vw 46px; }
  #topMaincopy::before{ margin-bottom:2em; }
  #topMaincopy::after{ margin-top:2.2em; }
}
@media screen and (max-width:600px){
  .comBlock div.comContent h2.com{ margin-bottom:1.5em; }
  .comBlock.pdTB{ padding:66px 0; }
  .comBlock.pdT{ padding-top:66px; }
  .comBlock.pdB{ padding-bottom:66px; }
  .comBlock div.comContent a.btn{ padding:1em 1.7em; letter-spacing:.1em; }
}

/* ==========================================================================
   11. 文字階層（2026-08-26 再調整）
   このサイトは html{font-size:62.5%} なので 1rem = 10px。
   ベース(style.min.css)は「本文 1.2rem(12px) → 920px 以上で 1.4rem(14px)」と
   小さく、見出しとの差も小さいため、見出しだけを大きくすると安く見える。
   そこで〈本文を上げ、見出しは本文の約1.45倍に留め、字間と余白で格を作る〉。

   段階：既定（601〜919px）／920px 以上＝PC／600px 以下＝スマートフォン
   ========================================================================== */

/* ---- 既定（タブレット〜小型ノート） ---- */
.comBlock div.comContent p.com,
.comBlock div.comContent p,
.comBlock div.comContent ul.com li,
.comBlock div.comContent ol li,
.comBlock div.comContent dl dd{ font-size:1.5rem; line-height:2em; }
.comBlock div.comContent h2.com{ font-size:2rem; letter-spacing:.15em; line-height:1.75em; }
.comBlock div.comContent h3.com{ font-size:1.7rem; line-height:1.75em; }
.comBlock div.comContent h4.com{ font-size:1.6rem; line-height:1.75em; }
.comBlock p.enTitle span{ font-size:1.1rem; letter-spacing:.38em; }
.comBlock div.comContent a.btn{ font-size:1.4rem; }
.comBlock div.comContent table.simple,
.comBlock div.comContent table[class^="price"]{ font-size:1.4rem; line-height:1.85em; }
.linkTexts .linkTextsWrap ul li{ font-size:1.3rem; }
.linkTexts .linkTextsWrap ul li.head{ font-size:1.4rem; }
.linkIcons ul li{ font-size:1.35rem; }
#breadCrumb li{ font-size:1.15rem; }
#topMaincopy h2{ font-size:1.85rem; line-height:2.2em; letter-spacing:.07em; }
#topMaincopy::before{ font-size:.95rem; letter-spacing:.36em; }

/* ---- PC（920px 以上） ---- */
@media screen and (min-width:920px){
  .comBlock div.comContent p.com,
  .comBlock div.comContent p,
  .comBlock div.comContent ul.com li,
  .comBlock div.comContent ol li,
  .comBlock div.comContent dl dd{ font-size:1.6rem; line-height:2.05em; }
  /* 見出しは本文 16px の約1.45倍＝23px。明朝＋広い字間で、
     大きくせずに「格」を出す（数値を上げる方向へ戻さないこと） */
  .comBlock div.comContent h2.com{ font-size:2.3rem; letter-spacing:.16em; line-height:1.7em; }
  .comBlock div.comContent h3.com{ font-size:1.85rem; }
  .comBlock div.comContent h4.com{ font-size:1.7rem; }
  .comBlock p.enTitle span{ font-size:1.25rem; letter-spacing:.42em; }
  .comBlock div.comContent a.btn{ font-size:1.45rem; }
  .comBlock div.comContent table.simple,
  .comBlock div.comContent table[class^="price"]{ font-size:1.5rem; line-height:1.9em; }
  .linkTexts .linkTextsWrap ul li{ font-size:1.4rem; }
  .linkTexts .linkTextsWrap ul li.head{ font-size:1.5rem; }
  .linkIcons ul li{ font-size:1.45rem; }
  #breadCrumb li{ font-size:1.2rem; }
  #topMaincopy h2{ font-size:2.2rem; line-height:2.15em; letter-spacing:.08em; }
  #topMaincopy::before{ font-size:1.05rem; letter-spacing:.42em; }
}

/* ---- スマートフォン（600px 以下） ----
   ベースの 1.2rem(12px) は小さすぎるので 1.45rem(14.5px) まで上げる。
   見出しは 1.85rem(18.5px)。狭い幅で字間を広く取ると折り返しが増えるため、
   PC より字間を詰める。 */
@media screen and (max-width:600px){
  .comBlock div.comContent p.com,
  .comBlock div.comContent p,
  .comBlock div.comContent ul.com li,
  .comBlock div.comContent ol li,
  .comBlock div.comContent dl dd{ font-size:1.45rem; line-height:1.95em; letter-spacing:.02em; }
  .comBlock div.comContent h2.com{ font-size:1.95rem; letter-spacing:.1em; line-height:1.7em; }
  .comBlock div.comContent h3.com{ font-size:1.6rem; }
  .comBlock div.comContent h4.com{ font-size:1.5rem; }
  .comBlock p.enTitle span{ font-size:1.05rem; letter-spacing:.3em; }
  .comBlock div.comContent a.btn{ font-size:1.35rem; }
  .comBlock div.comContent table.simple,
  .comBlock div.comContent table[class^="price"]{ font-size:1.32rem; line-height:1.8em; }
  .linkTexts .linkTextsWrap ul li{ font-size:1.25rem; }
  .linkTexts .linkTextsWrap ul li.head{ font-size:1.35rem; }
  .linkIcons ul li{ font-size:1.2rem; }
  #breadCrumb li{ font-size:1.1rem; }
}
/* ヒーローのコピーは 768px 以下で写真の下へ回るため、別の刻みで詰める */
@media screen and (max-width:768px){
  #topMaincopy h2{ font-size:1.6rem; line-height:2.1em; letter-spacing:.05em; }
  #topMaincopy::before{ font-size:.9rem; letter-spacing:.3em; }
}

/* ---- スマホ：料金表の横はみ出しを止める ----
   ベース(style.min.css)が料金表のセルに white-space:nowrap を掛けているため、
   義歯関連の表（3列・長いリンク文言）が画面幅を超えて右へはみ出していた
   （変更前から発生。文字を上げたことで幅が広がり顕在化）。
   HTML には既に <br class="spOnly"> で改行位置が用意されているので、
   狭い幅では nowrap を解除して意図どおり折り返させる。 */
@media screen and (max-width:919px){
  .comBlock div.comContent table[class^="price"] tr th,
  .comBlock div.comContent table[class^="price"] tr td,
  .comBlock div.comContent table.simple tr th,
  .comBlock div.comContent table.simple tr td{
    white-space:normal;
    /* auto-phrase（文節折り返し）はここでは使わない。語句を割らないぶん
       列の最小幅が広がり、375px で横スクロールが再発する（実測 +89px）。
       禁則は line-break:strict が担うので、通常の折り返しで十分読める */
    word-break:normal;
    /* anywhere は禁則処理まで無効にして「デメリ／ット」のように
       小さい「ッ」を行頭へ送ってしまう。break-word なら
       どうしても入りきらない語だけを折る */
    overflow-wrap:break-word;
    line-break:strict;
  }
  /* 価格は 1 行に収める。「66,000／円」と割れていた。
     はみ出しの原因だったのは第1列の nowrap なので、最終列だけなら安全 */
  .comBlock div.comContent table[class^="price"] tr th:last-child,
  .comBlock div.comContent table[class^="price"] tr td:last-child{
    white-space:nowrap;
    padding-left:8px; padding-right:8px;
  }
}

/* ---- 長い URL の直書きが折り返せず画面外へ出るのを防ぐ ----
   about/acquaint の researchmap の URL が該当（変更前からある不具合。
   文字を上げたことで画面幅を超えた）。必要なときだけ途中で折り返す。 */
.comBlock div.comContent p a,
.comBlock div.comContent p.com a,
.comBlock div.comContent ul.com a,
.comBlock div.comContent dd a{ overflow-wrap:break-word; }

/* ---- 日本語の折り返し品質（2026-08-26）----
   禁則処理を厳密に効かせ、対応ブラウザでは文節（word-break:auto-phrase）で
   折り返す。見出しは text-wrap:pretty で最終行に 1 文字だけ残るのを防ぐ。
   未対応ブラウザでは単に既定の折り返しに戻るだけで、崩れない。 */
body{ line-break:strict; }
.comBlock div.comContent h2.com,
.comBlock div.comContent h3.com,
.comBlock div.comContent h4.com,
#topMaincopy h2{
  word-break:auto-phrase;
  text-wrap:pretty;
}
.comBlock div.comContent p.com,
.comBlock div.comContent p,
.comBlock div.comContent ul.com li,
.comBlock div.comContent dl dd{
  overflow-wrap:break-word;
  /* 本文に auto-phrase（文節折り返し）は使わない。語句を割らないぶん
     行末が20〜30%余り、同じ本文が約1.4倍の高さになる（2026-08-26 実測）。
     日本語の本文は「行を埋めて禁則で整える」のが標準。
     禁則は body の line-break:strict が担うので「ッ」の行頭送りは起きない。
     auto-phrase を残すのは見出しとボタン（1〜3行の短い文字列）だけ。 */
  word-break:normal;
}
/* 表とリンク一覧は幅が狭いので通常の折り返し＋厳密な禁則にとどめる */
.comBlock div.comContent table[class^="price"] td,
.comBlock div.comContent table[class^="price"] th,
.comBlock div.comContent table.simple td,
.comBlock div.comContent table.simple th,
.linkTexts .linkTextsWrap ul li a{
  overflow-wrap:break-word;
  word-break:normal;
}

/* ---- 本文中の画像が原寸のまま画面外へ出るのを防ぐ ----
   about/feedback・dev の写真が該当（変更前からの不具合）。
   トップの日経記事の画像も、狭い幅では右端が切れていた。 */
.comBlock div.comContent img{ max-width:100%; height:auto; }

/* ---- 写真の上の白ロゴを、どのスライドでも読めるようにする（2026-08-26）----
   ヒーローの写真はスライドで切り替わり、明るい写真（白いカーテン等）のときに
   白ロゴ logo_kdc_w.svg が背景へ溶けて読めなくなる。drop-shadow だけでは
   その明るさに足りなかったため、ロゴの背後にだけ淡い暗がりを敷く。
   楕円のグラデーションなので、暗いスライドではほぼ見えない。
   HTML は変更していない（#topMv div.logo > p > img の p に ::before を足す）。 */
/* PC・タブレット：ロゴは写真の左上に置かれるので、上端に沿った帯で暗さを作る。
   写真の下端には既に #topMv::after で同じ処理が入っており、上下で対称になる。
   .visuals が z-index:1、div.logo が z-index:9 なので、その間に差し込む。 */
@media screen and (min-width:769px){
  #topMv::before{
    content:"";
    position:absolute; left:0; right:0; top:0; height:260px;
    z-index:3; pointer-events:none;
    background:linear-gradient(180deg,
      rgba(18,16,13,.66)  0%,
      rgba(18,16,13,.46) 30%,
      rgba(18,16,13,.20) 62%,
      rgba(18,16,13,0)  100%);
  }
  /* 帯で足りているので、ロゴ背後の楕円はPCでは出さない（二重に暗くしない） */
  #topMv div.logo p::before{ display:none; }
}

/* スマホ：ロゴは写真の中央に置かれるため帯では覆えない。楕円の暗がりで受ける */
#topMv div.logo p{ position:relative; }
#topMv div.logo p::before{
  content:"";
  position:absolute; left:50%; top:50%;
  transform:translate(-50%, -50%);
  /* 小さく濃い暗がりは「灰色の楕円」として見えてしまう。
     広く・淡く・長い減衰にして境目を出さない */
  width:calc(100% + 300px); height:180px;
  pointer-events:none;
  background:radial-gradient(ellipse at center,
    rgba(0,0,0,.34)  0%,
    rgba(0,0,0,.24) 22%,
    rgba(0,0,0,.13) 42%,
    rgba(0,0,0,.05) 62%,
    rgba(0,0,0,0)   80%);
}
#topMv div.logo p img{ position:relative; z-index:1; }

/* ---- トップのみ：MENU ボタンに淡い地のチップを敷く（2026-08-26 復旧）----
   下層ページのヘッダーは生成りの帯なので墨のバー／ラベルで読める。
   しかしトップは写真が画面いっぱいに出るため、暗いスライドのときに
   墨のバーが沈んで MENU が見えなくなる（実際に沈んでいた）。
   旧 top-light.css が持っていたチップ処理をここへ移設した。
   `body:has(#topMv)` はトップだけを指す（#topMv はトップにしか無い）。
   HTML にクラスを足さずに済ませるための書き方。 */
body:has(#topMv) #headerBtnMenu{
  background:rgba(250,248,245,.88);
  border:1px solid rgba(34,32,28,.14);
  border-radius:2px;
  -webkit-backdrop-filter:blur(2px);
  backdrop-filter:blur(2px);
}
body:has(#topMv) #headerBtnMenu .btn span{ background:var(--bark); }
body:has(#topMv) #headerBtnMenu .name p{ color:var(--bark); letter-spacing:.12em; }
/* メニューを開いてもチップは淡いままなので、CLOSE も墨で置く
   （ベース CSS は p.close を #fff にしている） */
body:has(#topMv) #headerBtnMenu.open .name p.close{ color:var(--bark); }

/* ---- ボタンの折り返し（2026-08-26）----
   セミナー案内ボタンが「セラミック修／復」と語の途中で割れていた。
   ボタンは幅に余裕があるので文節折り返しを効かせてよい。 */
.comBlock div.comContent a.btn,
#footer a.btn,
#menu a.btn{
  word-break:auto-phrase;
  text-wrap:pretty;
  line-break:strict;
}