/* ============================================
   株式会社医療発信 — Final Site v2 (Bold Gothic)
   Ref: imarke.jp / clinic-web-souken.com — dynamic, strong
   ============================================ */

:root{
  --navy:#12213A;
  --navy-2:#1a2d4d;
  --navy-3:#0b1528;
  --iris:#6F62D9;
  --iris-2:#5548c9;
  --iris-mist:#EFEDF9;
  --iris-mist-2:#f6f4fc;
  --white:#FAFAF7;
  --white-2:#ffffff;
  --ink:#0d1424;
  --ink-2:#2a2f3f;
  --line:#e6e2d6;
  --line-2:#d4cfbf;
  --line-navy:rgba(18,33,58,.12);
  --muted:#6b6558;
  --muted-2:#8a8474;
  --yellow:#ffe94a;   /* highlight for emphasis strokes if needed */

  /* 固定ヘッダー(.site-nav)の高さ。hero はこの値だけ下げて下端に密着させる */
  --nav-h:87px;

  --f-gothic:"Noto Sans JP", "Zen Kaku Gothic New", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;
  --f-display:"Noto Sans JP", "Zen Kaku Gothic New", "Hiragino Kaku Gothic ProN", sans-serif;
  --f-mincho:"Zen Old Mincho", serif;   /* very sparing use */
  --f-inter:"Inter", "Helvetica Neue", sans-serif;
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:var(--nav-h)}
body{
  font-family:var(--f-gothic);
  color:var(--ink);
  background:var(--white);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  line-height:1.75;
  font-weight:500;
}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;cursor:pointer;border:none;background:none;color:inherit}

/* ========== NAV ========== */
.site-nav{
  position:fixed;top:0;left:0;right:0;z-index:100;
  padding:16px 48px;
  display:grid;grid-template-columns:auto 1fr auto;gap:56px;
  align-items:center;
  background:rgba(250,250,247,.96);
  backdrop-filter:blur(12px);
  border-bottom:2px solid var(--navy);
}
.site-nav .brand{display:flex;align-items:center;gap:12px}
.site-nav .brand img{width:34px;height:30px;object-fit:contain;align-self:center;display:block}
.site-nav .brand > div{display:flex;flex-direction:column;justify-content:center;line-height:1.2}
.site-nav .brand .kk{
  font-family:var(--f-gothic);
  font-size:10px;letter-spacing:.28em;color:var(--muted);
  font-weight:500;
}
.site-nav .brand .nm{
  font-family:var(--f-gothic);
  font-size:18px;letter-spacing:.12em;color:var(--navy);font-weight:900;
  margin-top:0;line-height:1.2;
}
.site-nav .links{
  display:flex;justify-content:center;gap:40px;
}
.site-nav .links a{
  font-family:var(--f-gothic);
  font-size:14px;letter-spacing:.12em;color:var(--navy);
  font-weight:700;
  padding:8px 0;
  transition:color .2s;position:relative;
}
.site-nav .links a::after{
  content:"";position:absolute;left:50%;right:50%;bottom:-2px;
  height:3px;background:var(--iris);transition:left .3s,right .3s;
}
.site-nav .links a:hover::after,
.site-nav .links a.is-active::after{left:0;right:0}
.site-nav .links a:hover{color:var(--iris)}
.site-nav .cta{
  padding:14px 24px;
  background:var(--iris);color:var(--white);
  font-family:var(--f-gothic);
  font-size:14px;letter-spacing:.1em;font-weight:800;
  transition:all .25s;
  box-shadow:0 4px 0 var(--navy);
  transform:translateY(-2px);
}
.site-nav .cta:hover{
  background:var(--navy);
  box-shadow:0 2px 0 var(--iris);
  transform:translateY(0);
}

/* ========== Common section shell ========== */
.wrap{max-width:1280px;margin:0 auto;padding:0 48px}
.sec{padding:120px 0;position:relative}
.sec-tight{padding:80px 0}
.sec-alt{background:var(--iris-mist)}
.sec-dark{background:var(--navy);color:var(--white)}

/* Section number tag — strong style */
.sec-num{
  display:inline-flex;align-items:baseline;gap:10px;
  margin-bottom:20px;
}
.sec-num .no{
  padding:4px 12px;background:var(--navy);color:var(--white);
  font-family:var(--f-inter);font-size:13px;letter-spacing:.12em;
  font-weight:700;
}
.sec-num .lbl{
  font-family:var(--f-gothic);font-size:12px;letter-spacing:.28em;
  color:var(--muted);font-weight:700;text-transform:uppercase;
}
.sec-dark .sec-num .no{background:var(--iris);color:var(--white)}
.sec-dark .sec-num .lbl{color:var(--iris-mist)}

/* Section title — huge gothic */
.sec-title{
  font-family:var(--f-gothic);
  font-size:52px;color:var(--navy);letter-spacing:.02em;
  font-weight:900;line-height:1.35;
}
.sec-dark .sec-title{color:var(--white)}
.sec-title .il{color:var(--iris)}
.sec-dark .sec-title .il{color:var(--iris-mist)}

/* Highlight — the imarke/clinic-web-souken signature */
.hl{
  display:inline-block;
  background:var(--iris);color:var(--white);
  padding:.05em .35em;
  font-weight:900;
}
.hl-navy{
  display:inline-block;
  background:var(--navy);color:var(--white);
  padding:.05em .35em;
  font-weight:900;
}
.hl-outline{
  display:inline-block;
  background:var(--white);color:var(--navy);
  padding:.05em .35em;
  font-weight:900;
  box-shadow:inset 0 0 0 3px var(--navy);
}
.hl-underline{
  background:linear-gradient(transparent 55%, rgba(111,98,217,.35) 55%);
  font-weight:900;
  padding:0 .1em;
}

.sec-lead{
  margin-top:24px;
  font-family:var(--f-gothic);
  font-size:16px;line-height:2;color:var(--ink-2);
  max-width:680px;
  font-weight:500;
}
.sec-dark .sec-lead{color:rgba(255,255,255,.86)}

/* fade in */
.fade-in{
  opacity:0;transform:translateY(24px);
  transition:opacity .9s ease, transform .9s cubic-bezier(.2,.7,.2,1);
}
.fade-in.visible{opacity:1;transform:translateY(0)}

/* CTAs — with drop shadow "stamp" style */
.btn-primary{
  display:inline-flex;align-items:center;gap:12px;
  padding:20px 32px;
  background:var(--navy);color:var(--white);
  font-family:var(--f-gothic);font-size:15px;letter-spacing:.1em;font-weight:800;
  transition:all .25s;
  box-shadow:6px 6px 0 var(--iris);
}
.btn-primary .arw{
  font-family:var(--f-inter);font-size:18px;font-weight:400;
  transition:transform .3s;
}
.btn-primary:hover{
  background:var(--iris);
  box-shadow:2px 2px 0 var(--navy);
  transform:translate(4px, 4px);
}
.btn-primary:hover .arw{transform:translateX(4px)}
.btn-primary.iris{background:var(--iris);box-shadow:6px 6px 0 var(--navy)}
.btn-primary.iris:hover{
  background:var(--navy);
  box-shadow:2px 2px 0 var(--iris);
}

.btn-ghost{
  display:inline-flex;align-items:center;gap:12px;
  padding:20px 28px;
  background:var(--white);color:var(--navy);
  border:2px solid var(--navy);
  font-family:var(--f-gothic);font-size:15px;letter-spacing:.1em;font-weight:800;
  transition:all .25s;
  box-shadow:6px 6px 0 var(--navy);
}
.btn-ghost .arw{font-family:var(--f-inter);font-size:18px;font-weight:400;transition:transform .3s}
.btn-ghost:hover{
  background:var(--navy);color:var(--white);
  box-shadow:2px 2px 0 var(--navy);
  transform:translate(4px, 4px);
}
.btn-ghost:hover .arw{transform:translateX(4px)}

/* Footer */
.footer{
  background:var(--navy);color:rgba(255,255,255,.75);
  padding:64px 48px 32px;margin-top:0;
  border-top:6px solid var(--iris);
}
.footer-in{max-width:1280px;margin:0 auto}
.footer .top{
  display:grid;grid-template-columns:1.4fr auto;gap:64px;
  padding-bottom:36px;border-bottom:1px solid rgba(255,255,255,.14);
  margin-bottom:24px;
}
.footer .brand{display:flex;align-items:center;gap:14px}
.footer .brand img{width:52px;height:44px;object-fit:contain}
.footer .brand .kk{font-family:var(--f-gothic);font-size:11px;letter-spacing:.28em;color:rgba(255,255,255,.6);font-weight:500}
.footer .brand .nm{font-family:var(--f-gothic);font-size:22px;letter-spacing:.14em;color:var(--white);font-weight:900;margin-top:2px}
.footer .cols{display:grid;grid-template-columns:repeat(3,auto);gap:56px}
.footer .col h5{
  font-family:var(--f-gothic);font-size:12px;letter-spacing:.24em;
  color:var(--iris-mist);text-transform:uppercase;
  margin-bottom:14px;font-weight:800;
}
.footer .col a{
  display:block;font-family:var(--f-gothic);font-size:14px;
  color:rgba(255,255,255,.9);letter-spacing:.04em;padding:5px 0;font-weight:500;
}
.footer .col a:hover{color:var(--iris-mist)}
.footer .bottom{
  display:flex;justify-content:space-between;align-items:center;
  font-family:var(--f-inter);font-size:10.5px;letter-spacing:.24em;
  color:rgba(255,255,255,.5);text-transform:uppercase;
}

/* Case switcher pill */
.case-switcher{
  position:fixed;top:84px;left:50%;transform:translateX(-50%);
  z-index:99;display:flex;gap:2px;
  background:var(--white);
  padding:4px;border:2px solid var(--navy);
  box-shadow:4px 4px 0 var(--navy);
}
.case-switcher a{
  padding:7px 14px;
  font-family:var(--f-gothic);font-size:11.5px;letter-spacing:.1em;
  color:var(--navy);font-weight:700;transition:all .2s;
}
.case-switcher a:hover{color:var(--iris)}
.case-switcher a.active{background:var(--navy);color:var(--white)}

/* ========== Mobile menu toggle ========== */
.nav-toggle{
  display:none;width:44px;height:44px;
  border:2px solid var(--navy);background:var(--white);
  position:relative;flex:none;
}
.nav-toggle span{
  position:absolute;left:10px;right:10px;height:2px;background:var(--navy);
  transition:transform .25s, opacity .2s;
}
.nav-toggle span:nth-child(1){top:13px}
.nav-toggle span:nth-child(2){top:20px}
.nav-toggle span:nth-child(3){top:27px}
.site-nav.is-open .nav-toggle span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.site-nav.is-open .nav-toggle span:nth-child(2){opacity:0}
.site-nav.is-open .nav-toggle span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* ========== RESPONSIVE (shared) ========== */
@media (max-width:1024px){
  :root{--nav-h:79px}
  .site-nav{padding:12px 32px;gap:24px}
  .site-nav .links{gap:24px}
  .site-nav .links a{font-size:13px;letter-spacing:.06em}
  .wrap{padding:0 32px}
  .sec{padding:88px 0}
  .sec-title{font-size:40px}
  .footer{padding:56px 32px 28px}
  .footer .top{grid-template-columns:1fr;gap:36px}
  .footer .cols{grid-template-columns:repeat(3,1fr);gap:28px}
}
@media (max-width:860px){
  :root{--nav-h:67px}
  .site-nav{grid-template-columns:1fr auto auto;gap:12px;padding:10px 20px}
  .site-nav .brand img{width:30px;height:30px}
  .site-nav .brand .nm{font-size:16px}
  .site-nav .cta{padding:11px 16px;font-size:13px}
  .nav-toggle{display:block}
  .site-nav .links{
    display:none;position:absolute;top:100%;left:0;right:0;
    flex-direction:column;gap:0;background:var(--white);
    border-bottom:2px solid var(--navy);padding:8px 20px 16px;
  }
  .site-nav.is-open .links{display:flex}
  .site-nav .links a{font-size:15px;padding:14px 0;border-bottom:1px solid var(--line)}
  .site-nav .links a:last-child{border-bottom:none}
  .site-nav .links a::after{display:none}
}
@media (max-width:560px){
  .wrap{padding:0 20px}
  .sec{padding:64px 0}
  .sec-title{font-size:28px}
  .btn-primary,.btn-ghost{padding:18px 22px;font-size:14px}
  .footer{padding:48px 20px 24px}
  .footer .cols{grid-template-columns:1fr 1fr;gap:24px}
  .footer .bottom{flex-direction:column;align-items:flex-start;gap:8px}
}

/* ===== Form: honeypot / error / submit state ===== */
.hp-field{
  position:absolute !important;
  left:-9999px !important;top:auto !important;
  width:1px;height:1px;overflow:hidden;
}
.form-error{
  margin:0 0 24px;padding:16px 20px;
  background:#fdecea;border-left:4px solid #c0392b;
  color:#922b21;font-family:var(--f-gothic);
  font-size:14px;line-height:1.8;font-weight:700;
}
.form-error::before{content:"⚠ ";font-weight:900}
.submit[disabled]{opacity:.6;cursor:not-allowed;transform:none !important}
.field.has-error input,
.field.has-error select,
.field.has-error textarea{
  box-shadow:inset 0 0 0 3px #c0392b !important;
}
.field .field-msg{
  font-family:var(--f-gothic);font-size:12px;
  color:#c0392b;font-weight:700;margin-top:2px;
}