/* ==========================================================================
   気生堂印刷所 コーポレート 共通ベース（front-page / services / company / policy 共有）
   renzyu 公式サイト（flavor-horizontal-scroll）のデザインシステムを踏襲。
   パレット・リセット・ヘッダー・共通UI。
   ※アクセントのみ気生堂ブランドのブルーに調整（紫に戻す場合は --brand/--accent を差し替え）。
   ========================================================================== */
:root{
  --bg:#0b0d10; --bg-alt:#14171b; --card:#161a1f; --border:#2a2f37;
  --text:#f4f6f8; --text-muted:#a4acb6; --text-faint:#6b727c;
  --brand:#0b5fa5; --accent:#3f9be0; --accent2:#3f9be0; --accent-ink:#fff;
  /* 追従ヘッダーの背景（本文がヘッダー裏を通過しても文字が重ならないように） */
  --header-bg:rgba(11,13,16,.94);
  /* 追従ヘッダーの実高さ。下の .bar の padding と連動させて更新すること。
     アンカー遷移時のスクロール位置補正に使う。 */
  --header-h:68px;
}
[data-theme="light"]{
  --bg:#fbfcfd; --bg-alt:#eef2f6; --card:#fff; --border:#e2e7ec;
  --text:#14181d; --text-muted:#515a64; --text-faint:#9aa2ac;
  --accent:#0b5fa5; --accent2:#0b5fa5;
  --header-bg:rgba(251,252,253,.95);
}
*{box-sizing:border-box;margin:0;padding:0}
body{background:var(--bg);color:var(--text);
  font-family:"Inter","Noto Sans JP",-apple-system,BlinkMacSystemFont,sans-serif;
  -webkit-font-smoothing:antialiased;transition:background .3s,color .3s}
a{color:inherit;text-decoration:none}
img{max-width:100%}

/* ---- ヘッダー ---- */
.corp-header{left:0;right:0;top:0;z-index:50}
.corp-header .bar{display:flex;align-items:center;justify-content:space-between;padding:16px 28px}
.corp-logo{display:inline-flex;align-items:center;gap:10px;font-family:"Montserrat",sans-serif;font-weight:400;font-size:1.3rem;letter-spacing:.02em;color:var(--text)}
.corp-logo .mark{font-weight:600;letter-spacing:.06em}
.corp-logo .mark b{color:var(--accent);font-weight:700}
.corp-logo .sub{font-family:"Noto Sans JP",sans-serif;font-weight:500;font-size:.8rem;color:var(--text-muted);letter-spacing:.04em}
.corp-nav{display:flex;align-items:center;gap:22px}
.corp-nav a{font-size:.78rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--text-muted);transition:.2s}
.corp-nav a.active,.corp-nav a:hover{color:var(--text)}
.corp-toggle{width:36px;height:36px;border-radius:999px;border:1px solid var(--border);background:var(--card);color:var(--text-muted);cursor:pointer;font-size:.95rem;display:grid;place-items:center;transition:.2s}
.corp-toggle:hover{color:var(--text)}
@media(min-width:768px){
  :root{--header-h:86px}
  .corp-header .bar{padding:22px 40px}
  .corp-logo{font-size:1.55rem}
  .corp-logo .sub{font-size:.88rem}
  .corp-nav{gap:28px}
  .corp-nav a{font-size:.9rem}
  .corp-toggle{width:42px;height:42px;font-size:1.1rem}
}
@media(max-width:720px){.corp-logo .sub{display:none}}
@media(max-width:640px) and (orientation:portrait){.corp-nav a.navlink{display:none}}

/* ---- 画面が低いとき（スマホ横向き等）はヘッダーを圧縮して本文の高さを稼ぐ ----
   ※ min-width:768px の拡大指定より後に置いて確実に優先させる */
@media (max-height:560px){
  :root{--header-h:50px}
  .corp-header .bar{padding:9px 18px}
  .corp-logo{font-size:1.12rem}
  .corp-logo .sub{font-size:.72rem}
  .corp-nav{gap:16px}
  .corp-nav a{font-size:.72rem}
  .corp-toggle{width:32px;height:32px;font-size:.85rem}
}

/* ---- 横スクロール型ページ（front / services） ---- */
body.corp-h{overflow:hidden}
body.corp-h .corp-header{position:fixed;pointer-events:none}
body.corp-h .corp-header .bar>*{pointer-events:auto}

/* ---- 縦スクロール型ページ（company / policy） ---- */
body.corp-v .corp-header{position:sticky}

/* 追従ヘッダーを不透明化。
   透明のままだと本文がヘッダーの裏を通過してロゴ・ナビと重なって読めなくなる。 */
body.corp-solidhead .corp-header{
  background:var(--bg);
  border-bottom:1px solid var(--border);
}
@supports ((backdrop-filter:blur(12px)) or (-webkit-backdrop-filter:blur(12px))){
  body.corp-solidhead .corp-header{
    background:var(--header-bg);
    -webkit-backdrop-filter:blur(12px) saturate(140%);
    backdrop-filter:blur(12px) saturate(140%);
  }
}

/* ---- アンカー遷移時のヘッダー被り対策 ----
   #sdgs のようなリンクで飛ぶと、着地点が追従ヘッダーの裏に入って見出しが読めない。
   対象側の scroll-margin-top だけでずらす。
   （コンテナ側の scroll-padding-top を併用すると offset が二重に効いて飛びすぎる） */
[id]{scroll-margin-top:calc(var(--header-h) + 16px)}

/* ---- 共通UI（進捗バー・スクロールヒント・固定CTA） ---- */
#prog{position:fixed;bottom:0;left:0;height:3px;background:var(--accent);width:0;z-index:60;transition:width .1s}
.hint{position:fixed;bottom:20px;right:24px;z-index:55;display:flex;align-items:center;gap:8px;color:var(--text-faint);font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;pointer-events:none}
.hint svg{width:26px;height:12px;animation:sw 1.6s ease-in-out infinite}
@keyframes sw{0%,100%{transform:translateX(0)}50%{transform:translateX(6px)}}
.fab-contact{position:fixed;left:50%;bottom:6vh;transform:translateX(-50%);z-index:70;
  display:inline-flex;align-items:center;gap:9px;font-size:.9rem;font-weight:700;
  padding:14px 30px;border-radius:999px;background:var(--accent);color:var(--accent-ink);
  box-shadow:0 12px 30px -8px rgba(0,0,0,.55);transition:.2s;white-space:nowrap}
.fab-contact:hover{transform:translateX(-50%) translateY(-2px)}
@media(max-width:640px){.fab-contact{bottom:4.5vh;padding:13px 26px;font-size:.86rem}}
/* 低高さ（スマホ横向き等）では中央固定CTAが本文の真上に被るため、右下に寄せて干渉を減らす。
   スクロールヒントは場所を取るだけなので隠す。 */
@media (max-height:560px){
  .fab-contact{left:auto;right:14px;bottom:12px;transform:none;padding:9px 18px;font-size:.8rem}
  .fab-contact:hover{transform:translateY(-2px)}
  .hint{display:none}
}