/* ================================================================
   shared.css — 東栄商会 共通スタイル
   全ページで読み込む。ページ固有スタイルは各HTMLの<style>に記述。
   ================================================================ */

/* ─── DESIGN TOKENS ─── */
:root {
  --navy:       #0d2040;
  --navy-mid:   #1a3a6b;
  --flame:      #c94535;
  --flame-lt:   #e05a48;
  --gold:       #b8963e;
  --cream:      #f7f3ec;
  --warm-white: #fdfbf8;
  --gray-warm:  #ede9e2;
  --text:       #1c1c1c;
  --muted:      #666;
  --border:     rgba(0,0,0,0.09);
}

/* ─── RESET ─── */
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior: smooth; }
body { font-family:'Noto Sans JP',sans-serif; background:var(--warm-white); color:var(--text); overflow-x:hidden; }
img { max-width:100%; height:auto; display:block; }
a { color:inherit; text-decoration:none; }

/* ─── HEADER ─── */
header {
  position:fixed; top:0; left:0; right:0; z-index:1000;
  background:rgba(13,32,64,0.97); backdrop-filter:blur(10px);
  display:flex; align-items:center; justify-content:space-between;
  padding:0 40px; height:64px;
}
.logo { display:flex; flex-direction:column; line-height:1.2; }
.logo-en { font-size:9px; letter-spacing:3px; color:var(--gold); text-transform:uppercase; }
.logo-ja { font-family:'Noto Sans JP',sans-serif; font-size:16px; font-weight:700; color:#fff; letter-spacing:1px; }

.h-nav { display:flex; gap:28px; align-items:center; }
.h-nav a { color:rgba(255,255,255,0.72); font-size:13px; letter-spacing:.5px; transition:color .2s; }
.h-nav a:hover { color:#fff; }
.h-tel {
  display:inline-flex; align-items:center; gap:8px;
  background:var(--flame); color:#fff !important;
  padding:9px 18px; font-size:13px; font-weight:700; letter-spacing:.5px;
  transition:background .2s;
}
.h-tel:hover { background:var(--flame-lt) !important; }

/* hamburger */
.hamburger { display:none; flex-direction:row; align-items:center; gap:5px; cursor:pointer; padding:8px; background:none; border:none; }
.ham-icon { font-size:22px; line-height:1; color:#fff; }
.ham-label { font-size:12px; letter-spacing:1px; font-weight:500; color:#fff; }

/* mobile menu */
.m-menu {
  display:none; position:fixed; inset:64px 0 0 0;
  background:rgba(13,32,64,.98); z-index:999;
  flex-direction:column; padding:32px 24px; gap:0;
}
.m-menu.open { display:flex; }
.m-menu > a { color:rgba(255,255,255,.8); font-size:16px; padding:16px 0; border-bottom:1px solid rgba(255,255,255,.07); letter-spacing:2px; }
.m-tels { display:flex; flex-direction:column; gap:10px; margin-top:28px; }
.m-tel-label { font-size:11px; color:rgba(255,255,255,.4); letter-spacing:2px; margin-bottom:2px; }
.m-tel-num {
  display:flex; align-items:center; gap:8px;
  background:var(--flame); color:#fff;
  padding:12px 16px; font-size:18px; font-weight:700;
}

/* ─── SECTION COMMONS ─── */
.s-label { font-size:10px; letter-spacing:5px; text-transform:uppercase; font-weight:500; margin-bottom:10px; }
.s-title { font-family:'Noto Sans JP',sans-serif; font-size:clamp(22px,3vw,36px); font-weight:700; letter-spacing:3px; line-height:1.4; }
.s-lead { font-size:14px; line-height:2; color:var(--muted); font-weight:300; margin-top:14px; }

/* ─── TRUST BAR ─── */
.trust { background:var(--navy); padding:64px 48px; }
.trust-inner {
  display:grid; grid-template-columns:repeat(3,1fr);
  gap:1px; background:rgba(255,255,255,.1);
  max-width:900px; margin:0 auto;
}
.trust-item { background:var(--navy); padding:40px 32px; text-align:center; }
.trust-num { font-family:'Noto Sans JP',sans-serif; font-size:56px; font-weight:900; color:var(--gold); line-height:1; margin-bottom:4px; }
.trust-unit { font-size:18px; color:var(--gold); opacity:.7; }
.trust-label { font-size:13px; color:rgba(255,255,255,.5); margin-top:12px; letter-spacing:1px; }

/* ─── BRANCHES ─── */
.branches { background:var(--cream); padding:100px 48px; }
.br-head { text-align:center; margin-bottom:60px; }
.br-head .s-label { color:var(--flame); }
.br-head .s-title { color:var(--navy); }
.br-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:20px; max-width:1100px; margin:0 auto; }

.br-card { background:#fff; overflow:hidden; }
.br-map { height:200px; background:#c5d4e3; }
.br-map iframe { width:100%; height:100%; border:0; }
.br-body { padding:24px 28px; border-left:3px solid var(--flame); }
.br-name { font-family:'Noto Sans JP',sans-serif; font-size:20px; font-weight:700; color:var(--navy); letter-spacing:2px; margin-bottom:10px; }
.br-addr { font-size:13px; color:var(--muted); line-height:1.8; font-weight:300; margin-bottom:14px; }
.br-tel {
  display:inline-flex; align-items:center; gap:8px;
  background:var(--flame); color:#fff;
  padding:12px 20px; font-size:18px; font-weight:700; letter-spacing:1px;
  transition:background .2s;
}
.br-tel:hover { background:var(--flame-lt); }

/* ─── CTA BANNER ─── */
.cta { background:var(--flame); padding:72px 48px; text-align:center; }
.cta h2 {
  font-family:'Noto Sans JP',sans-serif;
  font-size:clamp(20px,3vw,32px); font-weight:700; color:#fff; letter-spacing:3px; margin-bottom:10px;
}
.cta p { color:rgba(255,255,255,.8); font-size:14px; font-weight:300; letter-spacing:1px; margin-bottom:40px; }
.cta-label { font-size:12px; color:rgba(255,255,255,.65); letter-spacing:2px; margin-bottom:16px; }
.cta-tels { display:flex; gap:20px; flex-wrap:wrap; justify-content:center; }
.cta-tel { display:flex; flex-direction:column; align-items:center; gap:4px; }
.cta-tel-name { font-size:11px; color:rgba(255,255,255,.6); letter-spacing:1px; }
.cta-tel-num {
  display:inline-flex; align-items:center; gap:8px;
  background:rgba(255,255,255,.18); color:#fff;
  padding:11px 22px; font-size:20px; font-weight:700; letter-spacing:1px;
  transition:background .2s;
}
.cta-tel-num:hover { background:rgba(255,255,255,.28); }

/* ─── FOOTER ─── */
footer {
  background:#060e1c; padding:48px;
  display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:24px;
}
.ft-logo-ja { font-family:'Noto Sans JP',sans-serif; font-size:15px; color:rgba(255,255,255,.65); letter-spacing:2px; }
.ft-logo-en { font-size:9px; color:rgba(255,255,255,.28); letter-spacing:3px; text-transform:uppercase; margin-top:4px; }
.ft-nav { display:flex; gap:20px; justify-content:center; flex-wrap:wrap; }
.ft-nav a { color:rgba(255,255,255,.32); font-size:11px; letter-spacing:1px; transition:color .2s; }
.ft-nav a:hover { color:rgba(255,255,255,.7); }
.ft-copy { text-align:right; font-size:11px; color:rgba(255,255,255,.22); letter-spacing:1px; }

/* ─── REVEAL ANIMATION ─── */
.reveal { opacity:0; transform:translateY(28px); transition:opacity .7s, transform .7s; }
.reveal.visible { opacity:1; transform:none; }

/* ─── RESPONSIVE ─── */
@media (max-width:768px) {
  header { padding:0 20px; height:56px; }
  .h-nav { display:none; }
  .hamburger { display:flex; }

  .m-menu { inset:56px 0 0 0; }

  .trust { padding:48px 24px; }
  .trust-num { font-size:42px; }

  .branches { padding:64px 24px; }
  .br-grid { grid-template-columns:1fr; }

  .cta { padding:56px 24px; }
  .cta-tels { flex-direction:column; align-items:center; }

  footer { grid-template-columns:1fr; text-align:center; gap:16px; padding:40px 24px; }
  .ft-copy { text-align:center; }
}