/* =========================================================
   UI FIX V9 — button contrast, menu separators, CTA wrapping,
   profile disclosure, NEWS dividers, contact submit
   Loaded LAST. 2026-09-03
   ========================================================= */
:root{
  --v9-yellow:#F2B200;
  --v9-ivory:#FFF8E8;
  --v9-navy:#163F63;
  --v9-ink:#111214;
  --v9-white:#FFFFFF;
}

/* ---------- UNIVERSAL BUTTON CONTRAST ----------
   Dark / navy buttons = white copy.
   White / ivory buttons = dark copy.
   These rules intentionally sit at the very end of the cascade. */
html body :is(a.btn-primary,a.btn-dark,button.btn-dark,.header-cta),
html body :is(a.btn-primary,a.btn-dark,button.btn-dark,.header-cta) :is(span,strong,small){
  background:#111214 !important;
  color:#FFFFFF !important;
  -webkit-text-fill-color:#FFFFFF !important;
  border-color:#111214 !important;
  opacity:1 !important;
  visibility:visible !important;
  text-shadow:none !important;
}

/* Navy buttons that do not use btn-dark. */
html body :is(.story-services-link,.youtube-channel-btn),
html body.service-page .page-nav a,
html body.service-page #related-services :is(.related,.related-grid) a,
html body.service-page #price .price-bottom a.btn{
  background:var(--v9-navy) !important;
  color:#FFFFFF !important;
  -webkit-text-fill-color:#FFFFFF !important;
  border-color:var(--v9-navy) !important;
  opacity:1 !important;
  visibility:visible !important;
}
html body :is(.story-services-link,.youtube-channel-btn) *,
html body.service-page .page-nav a *,
html body.service-page #related-services :is(.related,.related-grid) a *,
html body.service-page #price .price-bottom a.btn *{
  color:#FFFFFF !important;
  -webkit-text-fill-color:#FFFFFF !important;
}

/* White buttons must always have dark text. */
html body :is(a.btn-light,button.btn-light,.site-menu-btn,.menu-close),
html body :is(a.btn-light,button.btn-light,.site-menu-btn,.menu-close) :is(span,strong,small,.menu-label){
  background:#FFFFFF !important;
  color:var(--v9-ink) !important;
  -webkit-text-fill-color:var(--v9-ink) !important;
  border-color:rgba(17,18,20,.22) !important;
  opacity:1 !important;
  visibility:visible !important;
  text-shadow:none !important;
}

/* Yellow CTA buttons are a separate brand treatment. */
html body.home-page #contact-form button.submit{
  background:var(--v9-yellow) !important;
  color:var(--v9-ink) !important;
  -webkit-text-fill-color:var(--v9-ink) !important;
  border:2px solid var(--v9-yellow) !important;
  box-shadow:0 8px 0 rgba(17,18,20,.30) !important;
}
html body.home-page #contact-form button.submit:not(:disabled){
  opacity:1 !important;
  cursor:pointer !important;
}
html body.home-page #contact-form button.submit:disabled{
  opacity:.56 !important;
  cursor:not-allowed !important;
}

/* ---------- HOME MENU ---------- */
html body .menu-drawer,
html body .menu-drawer-head,
html body .menu-links,
html body .menu-links a{
  background:#FFFFFF !important;
  color:var(--v9-ink) !important;
  -webkit-text-fill-color:var(--v9-ink) !important;
  color-scheme:light !important;
}
html body .menu-drawer-head{
  border-bottom:1px solid rgba(17,18,20,.34) !important;
}
html body .menu-links a{
  border-bottom:1px solid rgba(17,18,20,.34) !important;
}
html body .menu-links a::after{
  color:var(--v9-ink) !important;
  -webkit-text-fill-color:var(--v9-ink) !important;
  opacity:.78 !important;
}

/* ---------- PROFILE DISCLOSURE: clearly tappable ---------- */
html body.home-page #profile .profile-details{
  border:0 !important;
  margin-top:20px !important;
}
html body.home-page #profile .profile-details summary{
  list-style:none !important;
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  gap:14px !important;
  width:100% !important;
  min-height:54px !important;
  padding:14px 18px !important;
  border:2px solid var(--v9-ivory) !important;
  border-radius:999px !important;
  background:var(--v9-ivory) !important;
  color:var(--v9-navy) !important;
  -webkit-text-fill-color:var(--v9-navy) !important;
  font-weight:900 !important;
  cursor:pointer !important;
  box-shadow:0 7px 0 rgba(7,24,38,.22) !important;
}
html body.home-page #profile .profile-details summary::-webkit-details-marker{display:none !important;}
html body.home-page #profile .profile-details summary::after{
  content:'開く ＋';
  flex:0 0 auto;
  font-size:12px;
  font-weight:900;
  letter-spacing:.02em;
  color:var(--v9-navy) !important;
  -webkit-text-fill-color:var(--v9-navy) !important;
}
html body.home-page #profile .profile-details[open] summary::after{content:'閉じる −';}
html body.home-page #profile .profile-details .bio{
  margin-top:18px !important;
  padding:0 4px 8px !important;
}

/* ---------- NEWS: slightly stronger separators ---------- */
html body.home-page #news .news-box{
  border-top:2px solid rgba(255,255,255,.46) !important;
}
html body.home-page #news .news-item{
  border-bottom:2px solid rgba(255,255,255,.46) !important;
}

/* ---------- CONTACT CTA: intentional line break on phone ---------- */
html body.home-page #contact .contact-title-fixed{
  text-align:center !important;
}
html body.home-page #contact .contact-title-fixed span{
  display:inline !important;
}

/* ---------- DARK MODE: keep the explicit contrast above ---------- */
@media(prefers-color-scheme:dark){
  html body :is(a.btn-primary,a.btn-dark,button.btn-dark,.header-cta),
  html body :is(a.btn-primary,a.btn-dark,button.btn-dark,.header-cta) :is(span,strong,small){
    background:#111214 !important;
    color:#FFFFFF !important;
    -webkit-text-fill-color:#FFFFFF !important;
  }
  html body :is(a.btn-light,button.btn-light,.site-menu-btn,.menu-close),
  html body :is(a.btn-light,button.btn-light,.site-menu-btn,.menu-close) :is(span,strong,small,.menu-label){
    background:#FFFFFF !important;
    color:var(--v9-ink) !important;
    -webkit-text-fill-color:var(--v9-ink) !important;
  }
  html body .menu-drawer,
  html body .menu-drawer-head,
  html body .menu-links,
  html body .menu-links a{
    background:#FFFFFF !important;
    color:var(--v9-ink) !important;
    -webkit-text-fill-color:var(--v9-ink) !important;
  }
  html body.home-page #contact-form button.submit{
    background:var(--v9-yellow) !important;
    color:var(--v9-ink) !important;
    -webkit-text-fill-color:var(--v9-ink) !important;
  }
}

@media(max-width:767px){
  /* Make the MENU label visible so the white control reads as an action. */
  html body .site-menu-btn .menu-label{
    display:inline !important;
    color:var(--v9-ink) !important;
    -webkit-text-fill-color:var(--v9-ink) !important;
  }

  /* Home and every service CTA: fixed two-line rhythm. */
  html body.home-page #contact .contact-title-fixed span,
  html body.service-page .cta-title-fixed span{
    display:block !important;
    white-space:nowrap !important;
  }
  html body.home-page #contact .contact-title-fixed,
  html body.service-page .cta-title-fixed{
    margin-inline:auto !important;
    max-width:100% !important;
    font-size:clamp(34px,9vw,42px) !important;
    line-height:1.22 !important;
    letter-spacing:-.035em !important;
    text-align:center !important;
  }

  /* Profile disclosure remains compact but unmistakably pressable. */
  html body.home-page #profile .profile-details summary{
    min-height:52px !important;
    padding:13px 16px !important;
    font-size:14px !important;
  }

  /* Clear, readable menu separators. */
  html body .menu-links a{
    border-bottom-width:1px !important;
    border-bottom-style:solid !important;
    border-bottom-color:rgba(17,18,20,.40) !important;
  }
}

/* ---------- SECONDARY / STANDALONE BUTTONS ---------- */
html body a.btn-outline,
html body a.btn-outline :is(span,strong,small){
  background:#FFFFFF !important;
  color:var(--v9-ink) !important;
  -webkit-text-fill-color:var(--v9-ink) !important;
  border-color:rgba(17,18,20,.24) !important;
}
html body.thanks-page a.btn,
html body.thanks-page a.btn :is(span,strong,small){
  background:var(--v9-yellow) !important;
  color:var(--v9-ink) !important;
  -webkit-text-fill-color:var(--v9-ink) !important;
  border-color:var(--v9-yellow) !important;
}