/* ============================================================
   出雲大社東京分祠 リニューアルデモ 共通スタイル
   ============================================================ */
:root{
  color-scheme:light;
  --paper:#F6F5F2;
  --paper-d:#EFEDE7;
  --white:#FFFFFF;
  --ink:#1B2430;
  --ink-2:#4A5260;
  --grey:#6E6E68;
  --shu:#B5372A;
  --shu-d:#8E2A20;
  --moss:#2F4A40;
  --gold:#7E6330;
  --rule:#DEDCD5;
  --mincho:"Hiragino Mincho ProN","Hiragino Mincho Pro","Yu Mincho","YuMincho","Noto Serif JP",serif;
  --gothic:"Hiragino Sans","Hiragino Kaku Gothic ProN","Yu Gothic","YuGothic","Noto Sans JP",system-ui,sans-serif;
  --shadow:0 1px 2px rgba(27,36,48,.04),0 10px 30px -14px rgba(27,36,48,.18);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
[id]{scroll-margin-top:90px}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--gothic);font-size:16px;line-height:1.9;
  -webkit-font-smoothing:antialiased;font-feature-settings:"palt" 1;
}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
:focus-visible{outline:2px solid var(--shu);outline-offset:2px}
.sr-only{position:absolute;width:1px;height:1px;clip-path:inset(50%);overflow:hidden;white-space:nowrap}

/* demo bar */
.demobar{
  background:var(--ink);color:#D8D5CE;font-size:12px;letter-spacing:.08em;
  text-align:center;padding:7px 16px;
}
.demobar b{color:#E8A99E;font-weight:700}

/* header */
.hdr{
  position:sticky;top:0;z-index:50;background:rgba(246,245,242,.94);
  backdrop-filter:saturate(1.4) blur(10px);border-bottom:1px solid var(--rule);
}
.hdr-in{
  max-width:1180px;margin:0 auto;padding:12px 20px;
  display:flex;align-items:center;gap:20px;
}
.brand{display:flex;align-items:center;gap:11px;text-decoration:none;flex:none}
.brand .nm{font-family:var(--mincho);font-size:17px;letter-spacing:.06em;line-height:1.25;font-weight:600}
.brand .nm small{display:block;font-family:var(--gothic);font-size:10px;letter-spacing:.16em;color:var(--grey);font-weight:400}
.gnav{margin-left:auto;display:flex;gap:2px}
.gnav a{
  text-decoration:none;font-size:14px;padding:9px 13px;border-radius:2px;
  color:var(--ink-2);transition:background .15s,color .15s;
}
.gnav a:hover,.gnav a:focus-visible{background:var(--paper-d);color:var(--ink)}
.gnav a[aria-current]{color:var(--shu);font-weight:600}
.hdr-cta{display:flex;gap:9px;align-items:center;flex:none;margin-left:auto}
.gnav+.hdr-cta{margin-left:0}
.tel{
  font-family:var(--mincho);font-size:19px;letter-spacing:.02em;text-decoration:none;
  color:var(--ink);line-height:1.15;font-variant-numeric:tabular-nums;
}
.tel small{display:block;font-family:var(--gothic);font-size:10px;letter-spacing:.1em;color:var(--grey)}
.btn{
  display:inline-block;text-decoration:none;font-size:13.5px;font-weight:600;
  padding:11px 18px;border:1px solid var(--ink);color:var(--ink);
  transition:background .15s,color .15s;white-space:nowrap;
}
.btn:hover,.btn:focus-visible{background:var(--ink);color:var(--paper)}
.btn.fill{background:var(--shu);border-color:var(--shu);color:#fff}
.btn.fill:hover,.btn.fill:focus-visible{background:var(--shu-d);border-color:var(--shu-d)}
@media(max-width:1040px){.gnav{display:none}}
@media(max-width:560px){
  .hdr-cta .btn{display:none}
  .brand .nm{font-size:15px}
  .brand .nm small{display:none}
  .tel{font-size:16px}
  .tel small{display:none}
  .hdr-in{padding:10px 14px;gap:12px}
}

/* layout */
.wrap{max-width:1180px;margin:0 auto;padding:0 20px}
.crumb{font-size:12.5px;color:var(--grey);padding:18px 0 0}
.crumb a{text-decoration:none}
.crumb a:hover{color:var(--shu)}
.crumb span{margin:0 8px;color:var(--rule)}

.page-head{padding:clamp(28px,4vw,44px) 0 clamp(24px,3.4vw,40px)}
.page-head .en{font-size:11px;letter-spacing:.24em;color:var(--shu);font-weight:700;display:block;margin-bottom:11px}
.page-head h1{
  font-family:var(--mincho);font-weight:600;margin:0;
  font-size:clamp(26px,3.6vw,36px);letter-spacing:.1em;
}
.page-head p.lead{margin:14px 0 0;max-width:64ch;color:var(--ink-2);font-size:15px}

.sec{padding:0 0 clamp(44px,5.5vw,64px)}
.sec-h{
  font-family:var(--mincho);font-weight:600;margin:0 0 18px;
  font-size:clamp(19px,2.4vw,24px);letter-spacing:.1em;
  border-left:4px solid var(--shu);padding-left:14px;
}
.note{font-size:12.5px;color:var(--grey);line-height:1.9}

/* info rows */
.infoblock{border-top:2px solid var(--ink);margin:0}
.row{display:grid;grid-template-columns:110px 1fr;gap:16px;padding:15px 2px;border-bottom:1px solid var(--rule)}
.row dt{font-size:12.5px;letter-spacing:.1em;color:var(--grey);padding-top:3px}
.row dd{margin:0;font-size:15px}
.row dd b{font-family:var(--mincho);font-size:18px;font-weight:600;letter-spacing:.02em}
.row dd small{display:block;font-size:12.5px;color:var(--grey);margin-top:3px}

/* steps */
.flow ol{list-style:none;margin:0;padding:0;counter-reset:f}
.flow li{
  counter-increment:f;display:grid;grid-template-columns:34px 1fr;gap:12px;
  padding:10px 0;font-size:14px;color:var(--ink-2);align-items:baseline;
}
.flow li::before{
  content:counter(f,cjk-ideographic);font-family:var(--mincho);font-weight:600;
  color:var(--gold);font-size:15px;text-align:center;border:1px solid var(--rule);
  line-height:30px;height:32px;background:var(--white);
}

/* tables */
.tblw{overflow-x:auto;border:1px solid var(--rule);background:var(--white)}
table.tbl{border-collapse:collapse;width:100%;min-width:540px;font-size:14px}
.tbl th,.tbl td{padding:12px 14px;text-align:left;border-bottom:1px solid var(--rule);vertical-align:top}
.tbl thead th{
  background:var(--paper-d);font-size:12px;letter-spacing:.08em;color:var(--ink-2);
  font-weight:600;white-space:nowrap;
}
.tbl tbody tr:last-child th,.tbl tbody tr:last-child td{border-bottom:none}
.tbl tbody th{font-weight:600;white-space:nowrap;background:var(--paper)}
.tbl .p{font-family:var(--mincho);font-weight:600;white-space:nowrap;font-variant-numeric:tabular-nums}

/* figure */
figure{margin:0}
figure figcaption{font-size:12.5px;color:var(--grey);margin-top:9px}

/* back link */
.back{margin:10px 0 56px}
.back a{
  font-size:13.5px;letter-spacing:.06em;text-decoration:none;color:var(--ink-2);
  border-bottom:1px solid var(--rule);padding-bottom:3px;
}
.back a:hover{color:var(--shu);border-color:var(--shu)}

/* tel banner (page-level cta) */
.telbox{
  border:1px solid var(--rule);background:var(--white);
  display:grid;gap:16px;align-items:center;padding:clamp(22px,3vw,30px);
  margin:0 0 clamp(44px,5.5vw,64px);
}
@media(min-width:760px){.telbox{grid-template-columns:1fr auto}}
.telbox p{margin:0;font-size:14px;color:var(--ink-2)}
.telbox .bigtel{
  background:var(--shu);color:#fff;text-decoration:none;text-align:center;padding:14px 26px;
  font-family:var(--mincho);font-size:24px;letter-spacing:.03em;line-height:1.15;font-weight:600;
  font-variant-numeric:tabular-nums;transition:background .15s;
}
.telbox .bigtel:hover{background:var(--shu-d)}
.telbox .bigtel small{display:block;font-family:var(--gothic);font-size:10.5px;letter-spacing:.1em;opacity:.92;margin-top:5px;font-weight:400}

/* footer */
footer{background:var(--paper-d);border-top:1px solid var(--rule);padding:36px 0 26px}
footer .f-line{font-size:13.5px;color:var(--ink-2);margin:0 0 5px;text-align:center}
.copy{margin-top:14px;font-size:12px;color:var(--grey);text-align:center}

@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}html{scroll-behavior:auto}}