/* ==========================================================================
   KAZAMA DENTAL CLINIC — Luxury Theme Override (Wine x Gold)
   Loaded after style.min.css to layer a premium visual identity
   without touching the compiled base stylesheet.
   ========================================================================== */

:root{
  --wine-dark:#3d0d14;
  --wine:#6b1423;
  --wine-light:#8f2536;
  --gold:#b8965f;
  --gold-light:#d9c092;
  --gold-dark:#8a6d3f;
  --cream:#faf7f2;
  --charcoal:#1c1815;
}

@import url('https://fonts.googleapis.com/css2?family=Shippori+Mincho:wght@400;500;600;700&display=swap');

/* ---- base ---- */
body{
  background:var(--cream);
  color:#2a211f;
}
::selection{background:var(--gold-light);color:var(--wine-dark)}

a{ text-decoration-color:var(--gold-dark); }
a:hover{ opacity:1; color:var(--wine-light); }

.colorRed{ color:var(--wine)!important; }

/* ---- headings ---- */
h2.com,
.clinicName h3,
#topMaincopy h2{
  font-family:"Shippori Mincho", serif;
  color:var(--wine-dark);
  letter-spacing:.04em;
}

.comBlock div.comContent h2.com{
  position:relative;
  padding-bottom:.5em;
  display:inline-block;
}
.comBlock div.comContent h2.com::after{
  content:"";
  position:absolute;
  left:0;
  bottom:0;
  width:3em;
  height:2px;
  background:linear-gradient(90deg, var(--gold), var(--gold-light));
}

.comBlock p.enTitle span{
  color:var(--gold-dark);
  font-weight:600;
  letter-spacing:.15em;
}

/* ---- header / nav ---- */
#header{
  background:rgba(250,247,242,.75);
  border-bottom:1px solid rgba(184,150,95,.35);
}

#menu{
  background:rgba(28,24,21,.96);
}
#menu p.enTitle{ color:var(--gold-light); }
#menu ul.menuList li a{ color:var(--cream); }
#menu ul.menuList li a:hover{ color:var(--gold-light); }
#menu div.hours table{ border-bottom-color:rgba(184,150,95,.5); }
#menu div.hours table tr th{ border-top-color:rgba(184,150,95,.5); }
#menu div.hours table tr td{ border-top-color:rgba(184,150,95,.25); }
#menu a.btn{ border-color:var(--gold); color:var(--gold-light)!important; }

#headerBtnMenu .btn span{ background:var(--wine-dark); }

/* ---- top visual ---- */
#topMv{
  background:var(--charcoal);
}
#topMv::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(180deg, rgba(28,24,21,0) 0%, rgba(28,24,21,.55) 100%);
  pointer-events:none;
}

/* ---- buttons ---- */
.btn{
  border:1px solid var(--wine);
  color:var(--wine-dark);
  border-radius:2px;
  font-family:"Shippori Mincho", serif;
  letter-spacing:.08em;
  transition:background .35s ease, color .35s ease, border-color .35s ease;
}
.btn:hover{
  background:var(--wine);
  border-color:var(--wine);
  color:var(--cream)!important;
  opacity:1;
}
#footer a.btn,
#menu a.btn{
  border-color:var(--gold);
  color:var(--gold-light);
}
#footer a.btn:hover,
#menu a.btn:hover{
  background:var(--gold);
  color:var(--charcoal)!important;
}

/* ---- footer ---- */
#footer{
  background:linear-gradient(160deg, var(--charcoal) 0%, var(--wine-dark) 100%);
  color:var(--cream);
}
#footer p.enTitle span{ color:var(--gold-light); }
#footer div.hours table{ border-bottom-color:rgba(184,150,95,.5); }
#footer div.hours table tr th{ border-top-color:rgba(184,150,95,.5); }
#footer div.hours table tr td{ border-top-color:rgba(184,150,95,.25); }
#footer div.clinicName h3{ color:var(--gold-light); font-family:"Shippori Mincho", serif; }
#footer a{ color:var(--cream); }
#footer a:hover{ color:var(--gold-light); }
#footer footer{ color:rgba(250,247,242,.6); letter-spacing:.05em; }

/* ---- access / info blocks ---- */
#accessMap{ background:var(--cream); }
#accessMap a.accessGmaps{
  color:var(--wine);
  border-bottom:1px solid var(--gold);
}

#fixInfo{
  background:rgba(28,24,21,.92);
}
#fixInfo li.tel a.tel{ color:var(--gold-light); }

/* ---- links list / icons ---- */
.linkTextsWrap li.head a{ color:var(--wine-dark); font-weight:600; }
.linkTextsWrap li a:hover{ color:var(--wine-light); }

/* ---- section rhythm on white/cream content areas ---- */
.comBlock + .comBlock{
  border-top:1px solid rgba(184,150,95,.25);
}

/* ---- body copy links ---- */
.comBlock div.comContent p.com a,
.comBlock div.comContent ul.com a,
.comBlock div.comContent dd a{
  color:var(--wine);
  text-decoration-color:var(--gold);
}
.comBlock div.comContent p.com a:hover,
.comBlock div.comContent ul.com a:hover,
.comBlock div.comContent dd a:hover{
  color:var(--wine-light);
  text-decoration-color:var(--gold-light);
}

/* ---- list markers ---- */
.comBlock div.comContent ul.com li::marker{
  color:var(--gold-dark);
}

/* ---- news / info card ---- */
.comNews{
  border:1px solid rgba(184,150,95,.4);
  border-radius:2px;
  background:#fffdf9;
}
.comNews h2.com{ margin-top:0; }

/* ---- price tables (covers priceCerec/priceOthers/priceGeneral/priceDenture/priceSurgery/priceExam) ---- */
.comBlock div.comContent table[class^="price"] tr th{
  background:var(--wine-dark)!important;
  color:var(--cream)!important;
  border-color:var(--wine-dark)!important;
}
.comBlock div.comContent table[class^="price"] tr th:nth-child(2){
  background:var(--wine)!important;
}
.comBlock div.comContent table[class^="price"] tr td:nth-child(2){
  background:#f7ecd9!important;
  color:var(--wine-dark);
}
.comBlock div.comContent table[class^="price"] tr td:first-child{
  color:var(--wine-dark);
}
.comBlock div.comContent table[class^="price"]{
  border-bottom-color:var(--gold-dark)!important;
}
.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:rgba(184,150,95,.35)!important;
}
.comBlock div.comContent table.simple{
  border-bottom-color:rgba(184,150,95,.6)!important;
}
/* スマホで料金表（特に priceDenture）が画面幅を超えるのを防ぐ。
   表を画面幅に収め、項目名は折り返す（価格「○○円」は1行のまま） */
@media screen and (max-width:600px){
  .comBlock div.comContent table[class^="price"]{
    width:100%!important;
    max-width:100%!important;
    table-layout:fixed!important;
  }
  .comBlock div.comContent table[class^="price"] tr td,
  .comBlock div.comContent table[class^="price"] tr th{
    white-space:normal!important;
    word-break:break-word!important;
  }
}

/* ---- page link cards (policy/menu index lists) ---- */
.comBlock div.comContent ul.pageLinks li a{ color:var(--wine-dark); }
.comBlock div.comContent ul.pageLinks li a:hover{ color:var(--wine-light); }
.comBlock div.comContent ul.pageLinks li a h3 i{ color:var(--gold-dark); }

/* ---- landing info card ---- */
.landingApp{
  border:1px solid rgba(184,150,95,.4);
  background:#fffdf9;
}
.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(--wine-dark);
}
.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(--gold-dark);
}

/* ---- video embeds ----
   Base site renders YouTube embeds at full column width (~860px),
   oversized and visually loud for a private-pay ceramics clinic.
   Scale down, center, and frame like a curated media piece. */
.comBlock div.comContent div.video{
  max-width:640px;
  margin:2em auto 2.6em;
  border:1px solid rgba(184,150,95,.5);
  border-radius:3px;
  overflow:hidden;
  box-shadow:0 8px 24px rgba(61,13,20,.12);
}