@charset "UTF-8";

/* ============================================================
   Design tokens (.claude/skills/design-system/SKILL.md 由来)
   以降のスタイルでは生の hex を直接書かない
   ============================================================ */
:root{
  /* Typography */
  --font-primary:"Noto Sans JP",-apple-system,BlinkMacSystemFont,"Hiragino Sans","Yu Gothic",sans-serif;
  --fs-base:16px;
  --lh-base:1.8;
  --fs-xs:12.8px;
  --fs-sm:16px;
  --fs-md:17.6px;
  --fs-lg:19.2px;
  --fs-xl:25.6px;
  --fs-2xl:28.8px;
  --fs-3xl:30.4px;
  --fs-4xl:33.6px;

  /* Color — SKILL.md tokens */
  --c-text:#333333;
  --c-link:#001e82;
  --c-text-inverse:#ffffff;
  --c-brand:#013c93;          /* surface.strong */
  --c-brand-alt:#005293;      /* surface.muted  */
  --c-overlay:#000000;        /* surface.base はオーバーレイ専用 */

  /* Color — 追加定義（抽出トークンだけでは面が組めないため） */
  --c-surface:#ffffff;
  --c-surface-muted:#f5f7fa;
  --c-border:#dfe4ec;
  --c-text-weak:#5f6b7a;

  /* Spacing */
  --sp-1:5.12px;
  --sp-2:8px;
  --sp-3:12px;
  --sp-4:12.8px;
  --sp-5:16px;
  --sp-6:17.6px;
  --sp-7:32px;
  --sp-8:39.84px;

  /* Radius / motion */
  --radius-pill:100px;
  --radius-card:8px;
  --dur:300ms;
  --ease:cubic-bezier(.22,.61,.36,1);

  /* Layout */
  --header-h:60px;
  --stage-w:44%;
  --rail-w:132px;
  --flow-max:640px;
}

/* ============================================================
   Reset / base
   ============================================================ */
*,*::before,*::after{box-sizing:border-box;}
html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
  scroll-padding-top:var(--sp-8);
}
body{
  margin:0;
  font-family:var(--font-primary);
  font-size:var(--fs-base);
  font-weight:400;
  line-height:var(--lh-base);
  color:var(--c-text);
  background:var(--c-surface);
  overflow-wrap:anywhere;
  word-break:normal;
  line-break:strict;
}
body.is-locked{overflow:hidden;}
h1,h2,h3,p,dl,dd,figure{margin:0;}
ul,ol{margin:0;padding:0;list-style:none;}
[hidden]{display:none !important;}
img{max-width:100%;height:auto;display:block;}
a{color:var(--c-link);}

:focus-visible{
  outline:3px solid var(--c-brand-alt);
  outline-offset:3px;
  border-radius:2px;
}
.stage :focus-visible,
.footer :focus-visible,
.nav.is-open :focus-visible{outline-color:var(--c-text-inverse);}

.skip-link{
  position:absolute;
  left:var(--sp-5);
  top:-120px;
  z-index:1000;
  padding:var(--sp-3) var(--sp-6);
  background:var(--c-brand);
  color:var(--c-text-inverse);
  border-radius:var(--radius-pill);
  text-decoration:none;
  transition:top var(--dur) var(--ease);
}
.skip-link:focus-visible{top:var(--sp-3);}

/* ============================================================
   Buttons
   ============================================================ */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:52px;
  min-width:200px;
  padding:var(--sp-3) var(--sp-8);
  border-radius:var(--radius-pill);
  font-size:var(--fs-sm);
  font-weight:700;
  line-height:1.4;
  text-decoration:none;
  border:2px solid var(--c-brand);
  transition:background-color var(--dur) var(--ease),
             color var(--dur) var(--ease),
             transform var(--dur) var(--ease);
}
.btn--solid{background:var(--c-brand);color:var(--c-text-inverse);}
.btn--solid:hover{background:var(--c-surface);color:var(--c-brand);transform:translateY(-2px);}
.btn:active{transform:translateY(0);}

/* ============================================================
   Layout shell（PC: 写真 / 本文 / 名前レール の3カラム）
   ============================================================ */
.shell{
  display:grid;
  grid-template-columns:minmax(0,1fr) var(--rail-w);
  align-items:start;
  padding-left:var(--stage-w);   /* 固定表示のステージぶんを空ける */
}

/* ---------- 左：写真ステージ ----------
   position:fixed にして、フッターまでスクロールしても顔が隠れないようにする
   （sticky だと .shell の終わりで押し上げられてしまう）           */
.stage{
  position:fixed;
  top:0;
  left:0;
  width:var(--stage-w);
  height:100vh;
  height:100svh;
  overflow:hidden;
  isolation:isolate;
  background:linear-gradient(160deg,var(--c-brand) 0%,var(--c-brand-alt) 100%);
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  padding:var(--sp-8);
  color:var(--c-text-inverse);
}
/* 筆のような斜めのストローク（写真がなくても様になるように） */
.stage::before,
.stage::after{
  content:"";
  position:absolute;
  z-index:-1;
  pointer-events:none;
}
.stage::before{
  inset:-20% -30% -20% -10%;
  background:
    linear-gradient(115deg,transparent 18%,rgba(255,255,255,.10) 19%,rgba(255,255,255,.10) 26%,transparent 27%),
    linear-gradient(115deg,transparent 42%,rgba(255,255,255,.07) 43%,rgba(255,255,255,.07) 58%,transparent 59%),
    linear-gradient(115deg,transparent 70%,rgba(0,0,0,.18) 71%,rgba(0,0,0,.18) 84%,transparent 85%);
}
.stage::after{
  inset:auto 0 0 0;
  height:45%;
  background:linear-gradient(180deg,transparent,rgba(0,0,0,.55));
}

.stage__media{
  position:absolute;
  inset:0;
  z-index:-2;
  background-size:cover;
  /* 切り抜きの中心。content.js の hero.focus で上書きできる */
  background-position:center 22%;
  display:grid;
  place-items:center;
}
.stage__media.has-photo .stage__initial{display:none;}
/* 写真を入れたとき、縦書きスローガン側だけ紺で落として白文字を読めるようにする
   （顔が来る中央〜右は素抜けのまま残す） */
.stage__media.has-photo::after{
  content:"";
  position:absolute;
  inset:0;
  /* 2枚重ね。上＝スローガンが載る天地、下＝縦書きが載る左側。
     左側だけを一律に濃くすると被写体の腕まで沈むので、上を厚くして左は控えめにする。 */
  background:
    linear-gradient(180deg,
      rgba(1,60,147,.55) 0%,
      rgba(1,60,147,.10) 42%,
      rgba(1,60,147,0)   60%),
    linear-gradient(100deg,
      rgba(1,60,147,.62) 0%,
      rgba(1,60,147,.42) 26%,
      rgba(1,60,147,.18) 55%,
      rgba(1,60,147,.08) 82%);
}
.stage__initial{
  font-size:clamp(120px,16vw,240px);
  font-weight:900;
  opacity:.16;
  letter-spacing:.08em;
  line-height:1;
}

.stage__slogan{
  position:absolute;
  top:var(--sp-8);
  left:var(--sp-8);
  z-index:1;
  writing-mode:vertical-rl;
  font-size:clamp(36px,4.4vw,68px);
  font-weight:900;
  line-height:1.25;
  letter-spacing:.08em;
  max-height:calc(100% - var(--sp-8) * 2);
  text-shadow:0 2px 28px rgba(0,0,0,.45);
}

.stage__foot{
  position:relative;
  z-index:1;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:var(--sp-5);
}
.stage__sns{
  display:flex;
  flex-wrap:wrap;
  gap:var(--sp-2);
  padding:var(--sp-3) var(--sp-5);
  background:var(--c-surface);
  border-radius:var(--radius-card);
  box-shadow:0 8px 24px rgba(0,0,0,.2);
}
.stage__sns .sns-link{color:var(--c-brand);border-color:var(--c-brand);}
.stage__date{
  font-size:var(--fs-xs);
  font-weight:700;
  letter-spacing:.14em;
  padding:var(--sp-1) var(--sp-6);
  border:1px solid rgba(255,255,255,.6);
  border-radius:var(--radius-pill);
}

/* ---------- 右：名前レール ---------- */
.rail{
  position:sticky;
  top:0;
  height:100vh;
  height:100svh;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:space-between;
  padding:var(--sp-8) var(--sp-3);
  gap:var(--sp-7);
}
.rail__name{
  writing-mode:vertical-rl;
  display:flex;
  align-items:flex-start;
  gap:var(--sp-4);
  min-height:0;
  overflow:hidden;
}
.rail__person{
  font-size:clamp(var(--fs-2xl),2.4vw,var(--fs-4xl));
  font-weight:900;
  letter-spacing:.14em;
  color:var(--c-brand);
  line-height:1.1;
}
.rail__org{
  font-size:var(--fs-xs);
  letter-spacing:.08em;
  color:var(--c-text-weak);
  align-self:flex-start;
  padding-top:.4em;
}
.rail__nav{
  display:flex;
  flex-direction:column;
  gap:var(--sp-4);
  flex:none;
}
.rail__link{
  display:grid;
  place-items:center;
  width:88px;
  height:88px;
  border-radius:var(--radius-pill);
  background:var(--c-brand);
  color:var(--c-text-inverse);
  font-size:var(--fs-xs);
  font-weight:700;
  line-height:1.5;
  text-align:center;
  text-decoration:none;
  transition:background-color var(--dur) var(--ease),transform var(--dur) var(--ease);
}
.rail__link:hover{background:var(--c-brand-alt);transform:translateY(-3px);}
.rail__link.is-current{background:var(--c-brand-alt);box-shadow:0 0 0 4px rgba(1,60,147,.16);}

/* ---------- 中央：本文 ---------- */
.flow{
  padding:var(--sp-8) clamp(var(--sp-7), 4vw, 72px);
}
.block{
  max-width:var(--flow-max);
  margin-inline:auto;
  padding-block:calc(var(--sp-8) * 1.6);
}
.block + .block{border-top:1px solid var(--c-border);}
.block--muted{
  max-width:none;
  margin-inline:calc(clamp(var(--sp-7), 4vw, 72px) * -1);
  padding-inline:clamp(var(--sp-7), 4vw, 72px);
  background:var(--c-surface-muted);
  border-top:0 !important;
}
.block--muted > *{max-width:var(--flow-max);margin-inline:auto;}

.block__eyebrow{
  position:relative;
  display:inline-block;
  padding-bottom:var(--sp-4);
  margin-bottom:var(--sp-8);
  font-size:var(--fs-lg);
  font-weight:700;
  letter-spacing:.14em;
  color:var(--c-brand);
}
.block__eyebrow::after{
  content:"";
  position:absolute;
  left:50%;
  transform:translateX(-50%);
  bottom:0;
  width:40px;height:3px;
  border-radius:var(--radius-pill);
  background:var(--c-brand);
}
.block__title{
  font-size:clamp(var(--fs-2xl),3vw,var(--fs-4xl));
  font-weight:700;
  line-height:1.5;
  letter-spacing:.04em;
  margin-bottom:var(--sp-5);
}
.block__lead{
  font-size:var(--fs-sm);
  color:var(--c-text-weak);
  margin-bottom:var(--sp-8);
}
.block__subtitle{
  font-size:var(--fs-lg);
  font-weight:700;
  margin:calc(var(--sp-8) * 1.2) 0 var(--sp-6);
  padding-left:var(--sp-4);
  border-left:4px solid var(--c-brand);
  line-height:1.6;
}
.block__actions{margin-top:var(--sp-8);}
.empty{
  padding:var(--sp-8);
  text-align:center;
  color:var(--c-text-weak);
  background:var(--c-surface);
  border:1px dashed var(--c-border);
  border-radius:var(--radius-card);
}

/* 出現アニメーション */
.reveal{
  opacity:0;
  transform:translateY(20px);
  transition:opacity .7s var(--ease),transform .7s var(--ease);
}
.reveal.is-visible{opacity:1;transform:none;}

/* ============================================================
   所信表明
   ============================================================ */
.lead__slogan{
  font-size:clamp(30px,3.6vw,52px);
  font-weight:900;
  line-height:1.4;
  letter-spacing:.04em;
  color:var(--c-brand);
  margin-bottom:var(--sp-5);
}
.lead__sub{
  font-size:clamp(var(--fs-md),1.6vw,var(--fs-xl));
  font-weight:500;
  line-height:1.9;
  letter-spacing:.12em;
  color:var(--c-brand-alt);
  margin-bottom:var(--sp-7);
}
.lead__meta{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:var(--sp-2) var(--sp-4);
  font-size:var(--fs-xs);
  color:var(--c-text-weak);
  padding-bottom:var(--sp-7);
  margin-bottom:var(--sp-7);
  border-bottom:1px solid var(--c-border);
}
.lead__role{
  padding:0 var(--sp-4);
  border:1px solid var(--c-border);
  border-radius:var(--radius-pill);
  line-height:2;
  color:var(--c-brand);
  font-weight:700;
}

.prose p{
  font-size:var(--fs-sm);
  line-height:2.1;
  margin-bottom:var(--sp-7);
}
.prose p:last-child{margin-bottom:0;}

.sign{
  margin-top:var(--sp-8);
  padding-top:var(--sp-7);
  border-top:1px solid var(--c-border);
  text-align:right;
  font-size:var(--fs-xs);
  color:var(--c-text-weak);
  line-height:2;
}
.sign strong{
  display:inline-block;
  font-size:var(--fs-lg);
  font-weight:700;
  letter-spacing:.08em;
  color:var(--c-text);
}

/* ============================================================
   ビジョン
   ============================================================ */
.vision__name{
  font-size:clamp(56px,8vw,104px);
  font-weight:900;
  line-height:1;
  letter-spacing:.02em;
  color:var(--c-brand);
}
.vision__tagline{
  display:flex;
  align-items:center;
  gap:var(--sp-3);
  margin-top:var(--sp-4);
  font-size:clamp(var(--fs-xl),3vw,var(--fs-3xl));
  font-weight:700;
  letter-spacing:.14em;
  color:var(--c-brand-alt);
}

.meanings{
  display:flex;
  flex-wrap:wrap;
  gap:var(--sp-3);
  margin-top:var(--sp-7);
}
.meaning{
  display:flex;
  align-items:baseline;
  gap:var(--sp-2);
  padding:var(--sp-1) var(--sp-5);
  background:var(--c-surface);
  border:1px solid var(--c-border);
  border-radius:var(--radius-pill);
}
.meaning__en{font-size:var(--fs-sm);font-weight:700;color:var(--c-brand);letter-spacing:.04em;}
.meaning__ja{font-size:var(--fs-xs);color:var(--c-text-weak);}

.vision__statement{
  margin-top:var(--sp-8);
  padding:var(--sp-7) 0 var(--sp-7) var(--sp-7);
  border-left:6px solid var(--c-brand);
  font-size:clamp(var(--fs-lg),2.4vw,var(--fs-2xl));
  font-weight:700;
  line-height:1.7;
  letter-spacing:.04em;
  color:var(--c-brand);
}
#visionLead{margin-top:var(--sp-7);}

.pillars{display:grid;gap:var(--sp-5);}
.pillar{
  position:relative;
  padding:var(--sp-7);
  background:var(--c-surface);
  border:1px solid var(--c-border);
  border-radius:var(--radius-card);
}
.pillar__no{
  display:block;
  font-size:var(--fs-lg);
  font-weight:900;
  font-style:italic;
  line-height:1;
  color:var(--c-brand);
  opacity:.3;
  margin-bottom:var(--sp-3);
}
.pillar__title{
  display:flex;
  flex-wrap:wrap;
  align-items:baseline;
  gap:var(--sp-2) var(--sp-4);
  margin:0 0 var(--sp-4);
}
.pillar__en{
  font-size:var(--fs-xl);
  font-weight:700;
  letter-spacing:.02em;
  color:var(--c-brand);
  line-height:1.4;
}
.pillar__ja{
  font-size:var(--fs-xs);
  font-weight:700;
  letter-spacing:.14em;
  color:var(--c-text-weak);
}
.pillar__body{font-size:var(--fs-sm);}

/* ============================================================
   公約
   ============================================================ */
.pledges{display:grid;gap:var(--sp-5);}
.pledge{
  position:relative;
  padding:var(--sp-7) var(--sp-7) var(--sp-7) calc(var(--sp-7) + var(--sp-2));
  background:var(--c-surface);
  border:1px solid var(--c-border);
  border-radius:var(--radius-card);
  overflow:hidden;
  transition:transform var(--dur) var(--ease),box-shadow var(--dur) var(--ease);
}
.pledge::before{
  content:"";
  position:absolute;
  left:0;top:0;bottom:0;
  width:6px;
  background:linear-gradient(180deg,var(--c-brand),var(--c-brand-alt));
  transform:scaleY(0);
  transform-origin:top;
  transition:transform var(--dur) var(--ease);
}
.pledge:hover{transform:translateY(-3px);box-shadow:0 12px 32px rgba(1,60,147,.12);}
.pledge:hover::before{transform:scaleY(1);}
.pledge__no{
  display:block;
  font-size:var(--fs-2xl);
  font-weight:900;
  font-style:italic;
  letter-spacing:.04em;
  line-height:1;
  color:var(--c-brand);
  opacity:.28;
  margin-bottom:var(--sp-4);
}
.pledge__title{
  font-size:var(--fs-xl);
  font-weight:700;
  line-height:1.5;
  margin-bottom:var(--sp-4);
}
.pledge__lead{
  font-size:var(--fs-sm);
  font-weight:700;
  color:var(--c-brand-alt);
  margin-bottom:var(--sp-5);
}
.pledge__body{font-size:var(--fs-sm);}

/* ============================================================
   プロフィール
   ============================================================ */
.profile{
  display:flex;
  align-items:center;
  gap:var(--sp-7);
  margin-bottom:var(--sp-8);
}
.portrait{
  flex:none;
  width:160px;
  aspect-ratio:3/4;
  border-radius:var(--radius-card);
  overflow:hidden;
  background:linear-gradient(150deg,var(--c-brand),var(--c-brand-alt));
  background-size:cover;
  /* 切り抜きの中心。content.js の candidate.focus で上書きできる */
  background-position:center 25%;
  display:grid;
  place-items:center;
}
.portrait.has-photo .portrait__initial{display:none;}
.portrait__initial{
  font-size:56px;
  font-weight:900;
  color:var(--c-text-inverse);
  opacity:.35;
  letter-spacing:.08em;
}
.profile__head{display:flex;flex-direction:column;gap:var(--sp-1);min-width:0;}
.profile__name{font-size:var(--fs-2xl);font-weight:700;letter-spacing:.08em;line-height:1.4;}
.profile__en{font-size:var(--fs-xs);letter-spacing:.2em;color:var(--c-text-weak);}

.facts__row{
  display:grid;
  grid-template-columns:6em minmax(0,1fr);
  gap:var(--sp-4);
  padding-block:var(--sp-3);
  border-bottom:1px solid var(--c-border);
}
.facts__row dt{font-size:var(--fs-xs);font-weight:700;color:var(--c-text-weak);padding-top:.25em;}
.facts__row dd{margin:0;font-size:var(--fs-sm);}

.timeline{position:relative;padding-left:var(--sp-7);}
.timeline::before{
  content:"";
  position:absolute;
  left:5px;top:10px;bottom:10px;
  width:2px;
  background:var(--c-border);
}
.timeline__item{
  position:relative;
  display:grid;
  grid-template-columns:6.5em minmax(0,1fr);
  gap:var(--sp-5);
  padding-block:var(--sp-4);
}
.timeline__item::before{
  content:"";
  position:absolute;
  left:calc(var(--sp-7) * -1);
  top:calc(var(--sp-4) + 10px);
  width:12px;height:12px;
  border-radius:var(--radius-pill);
  background:var(--c-brand);
  box-shadow:0 0 0 4px var(--c-surface);
}
.timeline__date{
  font-size:var(--fs-xs);
  font-weight:700;
  letter-spacing:.06em;
  color:var(--c-brand-alt);
  padding-top:.2em;
}
.timeline__text{font-size:var(--fs-sm);}

/* ============================================================
   SNS リンク（共通）
   ============================================================ */
.sns-link{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:44px;
  min-height:44px;
  padding:0 var(--sp-3);
  font-size:var(--fs-xs);
  font-weight:700;
  letter-spacing:.06em;
  text-decoration:none;
  color:inherit;
  border:1px solid currentColor;
  border-radius:var(--radius-pill);
  opacity:.85;
  transition:opacity var(--dur) var(--ease);
}
.sns-link:hover{opacity:1;}

/* ============================================================
   Footer
   ============================================================ */
.footer{
  background:var(--c-brand);
  color:var(--c-text-inverse);
  padding-block:var(--sp-8);
  padding-left:var(--stage-w);   /* 固定ステージの下に潜り込ませない */
}
.footer__inner{
  max-width:var(--flow-max);
  margin-inline:auto;
  padding-inline:var(--sp-5);
  text-align:center;
}
.footer__org{font-size:var(--fs-md);font-weight:700;letter-spacing:.06em;}
.footer__term{
  margin-top:var(--sp-2);
  font-size:var(--fs-xs);
  letter-spacing:.08em;
  opacity:.85;
}
.footer__sns{display:flex;justify-content:center;gap:var(--sp-3);margin-top:var(--sp-6);}

/* ============================================================
   モバイル用ヘッダー（PCでは非表示）
   ============================================================ */
.header{display:none;}

/* 写真の明るい部分にロゴが重なると読めなくなるので、天地だけ落とす。
   ヘッダーが白背景に切り替わったら不要なので消す。 */
.header::after{
  content:"";
  position:absolute;
  inset:0 0 auto 0;
  z-index:-1;
  height:calc(var(--header-h) + 32px);
  background:linear-gradient(180deg,rgba(1,60,147,.72) 0%,rgba(1,60,147,0) 100%);
  transition:opacity var(--dur) var(--ease);
}
.header.is-scrolled::after{opacity:0;}

.header__inner{
  height:100%;
  padding-inline:var(--sp-5);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:var(--sp-5);
}
.logo{
  display:flex;
  align-items:center;
  gap:var(--sp-3);
  text-decoration:none;
  color:var(--c-text-inverse);
  min-height:44px;
  transition:color var(--dur) var(--ease);
}
.header.is-scrolled .logo{color:var(--c-brand);}
.logo__mark{width:6px;height:28px;border-radius:var(--radius-pill);background:currentColor;flex:none;}
.logo__text{display:flex;flex-direction:column;line-height:1.3;}
.logo__org{font-size:var(--fs-sm);font-weight:700;}
.logo__sub{font-size:var(--fs-xs);opacity:.75;letter-spacing:.04em;}

.nav__list{display:flex;flex-direction:column;align-items:center;gap:var(--sp-5);}
.nav__list li{display:flex;justify-content:center;width:100%;}
.nav__link{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:52px;
  padding:0 var(--sp-7);
  font-size:var(--fs-lg);
  font-weight:700;
  text-decoration:none;
  color:var(--c-text-inverse);
  border-radius:var(--radius-pill);
}
.nav__link.is-current{background:rgba(255,255,255,.18);}
.nav__sns{display:flex;gap:var(--sp-2);color:var(--c-text-inverse);}

.burger{
  display:flex;
  position:relative;
  z-index:96;
  width:48px;height:48px;
  padding:0;border:0;background:transparent;cursor:pointer;
  flex-direction:column;align-items:center;justify-content:center;gap:6px;
}
.burger__bar{
  display:block;width:24px;height:2px;
  background:var(--c-text-inverse);
  transition:transform var(--dur) var(--ease),opacity var(--dur) var(--ease),background-color var(--dur) var(--ease);
}
.header.is-scrolled .burger__bar{background:var(--c-text);}
.burger[aria-expanded="true"] .burger__bar{background:var(--c-text-inverse);}
.burger[aria-expanded="true"] .burger__bar:nth-child(1){transform:translateY(8px) rotate(45deg);}
.burger[aria-expanded="true"] .burger__bar:nth-child(2){opacity:0;}
.burger[aria-expanded="true"] .burger__bar:nth-child(3){transform:translateY(-8px) rotate(-45deg);}

.nav-overlay{position:fixed;inset:0;z-index:90;background:var(--c-overlay);opacity:.5;}

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width:1279px){
  :root{--stage-w:40%;--rail-w:112px;}
  .rail__link{width:76px;height:76px;}
}

/* ---- タブレット / スマホ：1カラムに切り替え ---- */
@media (max-width:1023px){
  html{scroll-padding-top:var(--header-h);}

  .header{
    display:block;
    position:fixed;
    inset:0 0 auto 0;
    z-index:100;
    height:var(--header-h);
    transition:background-color var(--dur) var(--ease),box-shadow var(--dur) var(--ease);
  }
  .header.is-scrolled{background:var(--c-surface);box-shadow:0 1px 0 var(--c-border);}

  .nav{
    position:fixed;
    inset:0;
    z-index:95;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:var(--sp-8);
    background:linear-gradient(150deg,var(--c-brand),var(--c-brand-alt));
    transform:translateX(100%);
    visibility:hidden;
    transition:transform var(--dur) var(--ease),visibility var(--dur) var(--ease);
  }
  .nav.is-open{transform:none;visibility:visible;}

  .rail{display:none;}

  .shell{display:block;padding-left:0;}
  .footer{padding-left:0;}

  /* スマホは縦に細長い枠になり、cover だと左右が大きく削られる。
     写真を上部に置き、下端をマスクで紺へ溶かして本文の背面を空ける。 */
  .stage__media{
    inset:0 0 auto 0;
    height:66%;
    -webkit-mask-image:linear-gradient(180deg,#000 0%,#000 68%,transparent 100%);
    mask-image:linear-gradient(180deg,#000 0%,#000 68%,transparent 100%);
  }
  .stage__media.has-photo::after{
    background:linear-gradient(180deg,rgba(1,60,147,.28) 0%,rgba(1,60,147,.06) 45%,rgba(1,60,147,.34) 100%);
  }

  /* ステージ = 1枚目のヒーローに戻す（固定を解除） */
  .stage{
    position:relative;
    width:auto;
    height:auto;
    min-height:100svh;
    padding:calc(var(--header-h) + var(--sp-8)) var(--sp-5) var(--sp-8);
    justify-content:flex-end;
  }
  .stage__slogan{
    position:static;
    writing-mode:horizontal-tb;
    max-height:none;
    margin-bottom:var(--sp-7);
    font-size:clamp(34px,9vw,62px);
    letter-spacing:.04em;
  }
  .stage__foot{gap:var(--sp-6);}
  .stage__initial{font-size:clamp(140px,40vw,260px);}

  /* モバイルでは名前をステージ下部に出す（レールの代わり） */
  .stage__foot::before{
    content:attr(data-name);
    font-size:var(--fs-2xl);
    font-weight:900;
    letter-spacing:.12em;
  }

  .flow{padding:0;}
  .block{padding-inline:var(--sp-5);padding-block:calc(var(--sp-8) * 1.2);}
  .block--muted{margin-inline:0;padding-inline:var(--sp-5);}

  .lead__slogan{font-size:clamp(26px,6vw,38px);}
}

@media (max-width:520px){
  .btn{width:100%;min-width:0;}
  .profile{flex-direction:column;align-items:flex-start;gap:var(--sp-5);}
  .portrait{width:140px;}
  .timeline__item{grid-template-columns:minmax(0,1fr);gap:var(--sp-1);}
  .facts__row{grid-template-columns:5.5em minmax(0,1fr);}
  .pledge{padding:var(--sp-6) var(--sp-5) var(--sp-6) var(--sp-6);}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
  .reveal{opacity:1;transform:none;}
}

@media print{
  .header,.burger,.nav,.rail,.block__actions,.skip-link{display:none !important;}
  .shell{display:block;padding-left:0;}
  .footer{padding-left:0;}
  .stage{position:static;width:auto;height:auto;min-height:0;page-break-after:always;}
  .reveal{opacity:1;transform:none;}
  body{color:#000;}
}