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

/* ==========================================================================
   KAZAMA DENTAL CLINIC — Natural Warm Theme (top page only)
   Loaded after style.min.css on / (index.html) INSTEAD of luxury-theme.css.
   Other pages keep luxury-theme.css, so nothing here is shared — every rule
   below may assume it is only ever applied to the top page.
   ========================================================================== */

:root{
  --kinari:#f7f4ec;      /* 生成り: page base */
  --paper:#fffdf8;       /* card surface */
  --clay:#e8e0d1;        /* soft fill */
  --sand:#c9b99f;        /* light warm border */
  --sand-pale:#e3d9c6;
  --wood:#a1855f;        /* warm accent */
  --wood-dark:#7d6547;
  --moss:#6f7d5e;        /* sage accent */
  --moss-dark:#4e5a41;
  --moss-deep:#333c2b;   /* darkest green */
  --bark:#3a332a;        /* warm charcoal */
  --ink:#2f2a23;         /* body text */
}

/* ---- base ---- */
body{
  background:var(--kinari);
  color:var(--ink);
}
::selection{background:var(--sand-pale);color:var(--bark)}

a{ text-decoration-color:var(--wood); }
a:hover{ opacity:1; color:var(--moss-dark); }

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

/* ---- headings ---- */
h2.com,
.clinicName h3,
#topMaincopy h2{
  font-family:"Shippori Mincho", serif;
  color:var(--bark);
  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(--moss), var(--sand));
}

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

/* ---- header / nav ---- */
#header{
  background:rgba(247,244,236,.78);
  border-bottom:1px solid rgba(201,185,159,.45);
}

#menu{
  background:rgba(58,51,42,.96);
}
#menu p.enTitle{ color:var(--sand); }
#menu ul.menuList li a{ color:var(--kinari); }
#menu ul.menuList li a:hover{ color:var(--sand); }
#menu div.hours table{ border-bottom-color:rgba(201,185,159,.5); }
#menu div.hours table tr th{ border-top-color:rgba(201,185,159,.5); }
#menu div.hours table tr td{ border-top-color:rgba(201,185,159,.25); }

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

/* ---- top visual ----
   Base photos are cool blue-grey clinical shots; a light warm grade keeps them
   from fighting the cream/sage palette below the fold. */
#topMv{
  background:var(--bark);
}
#topMv div.visuals div.visual{
  filter:sepia(.18) saturate(.92) contrast(1.02);
}
#topMv::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(180deg, rgba(58,51,42,0) 0%, rgba(58,51,42,.5) 100%);
  pointer-events:none;
  z-index:2;
}

/* ---- main copy ---- */
#topMaincopy h2{
  line-height:2em;
}

/* ---- buttons ---- */
.btn{
  border:1px solid var(--moss);
  color:var(--moss-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(--moss);
  border-color:var(--moss);
  color:var(--kinari)!important;
  opacity:1;
}
#footer a.btn,
#menu a.btn{
  border-color:var(--sand);
  color:var(--sand)!important;
}
#footer a.btn:hover,
#menu a.btn:hover{
  background:var(--sand);
  color:var(--bark)!important;
}

/* ---- footer ----
   Base declares these as div#footer / div#fixInfo (id + element), so plain
   #footer / #fixInfo lose on specificity no matter how late they load. */
div#footer{
  background:linear-gradient(160deg, var(--bark) 0%, var(--moss-deep) 100%);
  color:var(--kinari);
}
#footer p.enTitle span{ color:var(--sand); }
#footer div.hours table{ border-bottom-color:rgba(201,185,159,.5); }
#footer div.hours table tr th{ border-top-color:rgba(201,185,159,.5); }
#footer div.hours table tr td{ border-top-color:rgba(201,185,159,.25); }
#footer div.clinicName h3{ color:var(--sand); font-family:"Shippori Mincho", serif; }
#footer a{ color:var(--kinari); }
#footer a:hover{ color:var(--sand); }
#footer footer{ color:rgba(247,244,236,.6); letter-spacing:.05em; }

/* ---- access ---- */
#accessMap{ background:var(--kinari); }
#accessMap a.accessGmaps{
  color:var(--moss-dark);
  border-bottom:1px solid var(--wood);
}

/* ---- fixed bottom bar (base is #720000 red) ---- */
div#fixInfo{
  background:rgba(51,60,43,.94);
}
div#fixInfo ul li.tel a.tel{ color:var(--sand); }

/* ---- link icons (black SVG line art softens to warm grey on cream) ---- */
.linkIcons ul li a{ color:var(--bark); }
.linkIcons ul li a span{ opacity:.72; transition:transform .3s ease, opacity .3s ease; }
.linkIcons ul li a:hover span{ opacity:1; }

/* ---- links list (base sets li a{color:#000} at .linkTexts .linkTextsWrap ul li a) ---- */
.linkTexts .linkTextsWrap ul li.head a{ color:var(--bark); font-weight:600; }
.linkTexts .linkTextsWrap ul li a:hover{ color:var(--moss-dark); }

/* ---- section rhythm ---- */
.comBlock + .comBlock{
  border-top:1px solid rgba(201,185,159,.3);
}

/* ---- body copy links ----
   Matches bare `p a` as well as `p.com a`: base CSS sets no colour on `a`, so
   links in the news card's plain <p> otherwise fall back to browser blue. */
.comBlock div.comContent p a,
.comBlock div.comContent ul.com a,
.comBlock div.comContent dd a{
  color:var(--moss-dark);
  text-decoration-color:var(--sand);
}
.comBlock div.comContent p a:hover,
.comBlock div.comContent ul.com a:hover,
.comBlock div.comContent dd a:hover{
  color:var(--moss);
  text-decoration-color:var(--wood);
}

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

/* ---- news / info card ---- */
.comNews{
  border:1px solid rgba(201,185,159,.55);
  border-radius:3px;
  background:var(--paper);
}
div.comContent .comNews h2.com{ margin-top:0; }