@charset "UTF-8";

/* =========================================================
   佐々木あやの 公式サイト 共通スタイル
   色・フォントなどの値は :root のカスタムプロパティに集約する
   ========================================================= */

/* ---------------------------------------------------------
   1. デザイントークン（Figma変数）
   --------------------------------------------------------- */
:root {
  /* 色 */
  --color-primary: #00afcc;
  --color-primary-light: #eaf8fa;
  --color-primary-dark: #006a7c;        /* Figma変数 primary_dark。白地の上の文字・線用 */
  --color-black: #212121;
  --color-light-gray: #ebebeb;
  --color-white: #ffffff;
  --color-accent: #fffb00;
  --color-history-highlight: #ffffed;   /* 経歴カードのうち「福岡での取り組み」の薄い黄色 */
  --color-ui-gradient-start: #0081cc;   /* 右カラム上 */
  --color-ui-gradient-end: #00afcc;     /* 右カラム下 */
  --color-youtube: #f02f1d;

  /* フォント */
  --font-ja: "Noto Sans JP", sans-serif;
  --font-en: "Inter", sans-serif;

  /* カラム幅 */
  --col-main-max: 480px;   /* 中央カラムの最大幅（参照サイト準拠） */
  --col-ui-min: 220px;     /* 右カラムの最小幅（ナビ文言が収まる下限） */
  --col-ui-max: 400px;     /* 右カラムの最大幅（大きなモニターで青だけが広がらないようにする） */
  --col-main-cap: 640px;   /* 中央カラムの上限（1513px〜は 480px から右カラムと一緒に広がる） */
  --layout-max: 1920px;    /* 全体幅の上限（1921px〜は下のメディアクエリで写真の高さ基準に切り替え） */
  --col-main-pad-x: clamp(20px, 2.25vw, 34px);  /* 中央カラムの左右余白（1512pxで34px） */

  /* 本文 */
  --font-size-base: 17px;
  --line-height-base: 1.9;

  /* Hero（左カラム）のレイアウト数値。Figma 756×982 基準、bottom 基準で指定 */
  /* スローガン（2026-09-16 差し替え：帯込みの1枚SVG slogan.svg、viewBox 209.87×95.66）
     位置は左71px・下157/982（Figma旧ブロックと同じ）。幅は写真幅の70%を基本に、
     大画面で大きくなりすぎないよう 560px、低いウィンドウで顔に掛からないよう 70vh で頭打ち */
  /* SVGの箱は帯の下に約21%・文字の上に約23%の透明余白を含む。見た目の帯の下端＝箱の下端＋箱の高さ×0.21。
     Figma（2026-09-16 タツキさん案）: 帯の下端が写真下端から約110px、箱幅は写真幅の約85% */
  --hero-slogan-left: 71px;
  --hero-slogan-bottom: calc(var(--hero-sns-height) - 12px);   /* 箱の下端48px → 見た目の帯下端は約110px（幅640時） */
  --hero-slogan-width: min(85%, 700px, 65vh);   /* 65vh: 横長で低いウィンドウでも顔に掛からないように（982px高では従来と同じ636px） */
  /* 白いハロー（縁取り＋ぼかし）は slogan.svg 内の halo-soft / halo-hard グループで持つ。
     CSS の drop-shadow は iPhone Safari で矩形の縁が見えたため使わない（none のまま） */
  --hero-slogan-halo: none;
  --hero-sns-width: 418px;     /* Threads 一時非表示中はアイコン7個ぶん（2026-09-18）。8個に戻すときは 472px */
  --hero-sns-height: 60px;
  --hero-sns-padding-x: 22px;
  --hero-sns-gap: 10px;        /* 7個: 44×7 ＋ 10×6 ＋ 22×2 = 412px（8個なら 466px で帯の472pxに収まる） */

  /* UI（右カラム）のレイアウト数値 */
  --ui-nav-item-height: 70px;

  /* SP（1199px以下）の固定ヘッダーの高さ */
  --sp-header-h: 80px;

  /* SPのSNS表示とフッター余白（値は .footer の基本 padding-bottom と揃える） */
  --footer-padding-bottom: 47px;
  --nav-sns-padding: 12px 8px 16px;
  --nav-sns-heading-margin: 0 0 4px 28px;
  --nav-sns-heading-size: 14px;
  --nav-sns-list-padding-x: 20px;

  /* タップ領域の最小サイズ（WCAG 2.2 AA） */
  --tap-size: 44px;
}

/* ---------------------------------------------------------
   2. 軽いリセット
   --------------------------------------------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  /* ページ内リンク（ナビ・「日々の活動」ボタン）は慣性のある移動にする。
     左右が固定されたレイアウトでは即時ジャンプだと切り替わりが分かりにくいため。
     「視差効果を減らす」設定では下の reduced-motion ブロックで即時移動に戻す */
  scroll-behavior: smooth;
}

body,
h1, h2, h3, h4, p, figure, ul, ol {
  margin: 0;
}

ul, ol {
  padding: 0;
  list-style: none;
}

img, svg {
  max-width: 100%;
  height: auto;
  vertical-align: middle;
}

a {
  color: inherit;
}

body {
  font-family: var(--font-ja);
  font-size: var(--font-size-base);
  font-weight: 400;
  line-height: var(--line-height-base);
  color: var(--color-black);
  background-color: var(--color-white);
}

/* 全体幅の上限（1920px）を超える画面で、左右の余白を薄い水色にする */
@media (min-width: 1921px) {
  body {
    background-color: var(--color-primary-light);
  }
}

/* ---------------------------------------------------------
   3. 共通ユーティリティ
   --------------------------------------------------------- */

/* スクリーンリーダー専用テキスト */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* 本文へスキップ（フォーカス時のみ表示） */
.skip-link {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 100;
  padding: 12px 20px;
  background-color: var(--color-white);
  color: var(--color-black);
  font-weight: 700;
  text-decoration: underline;
  transform: translateY(-200%);
}

.skip-link:focus {
  transform: translateY(0);
}

/* フォーカス表示：内側 黄 ＋ 外側 黒 の2重リング
   （白地・青地・写真の上、どの背景でも視認できる） */
a:focus-visible,
button:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid var(--color-accent);
  outline-offset: 0;
  box-shadow: 0 0 0 6px var(--color-black);
}

/* ---------------------------------------------------------
   4. レイアウト（3カラム）
   --------------------------------------------------------- */
/* 左50%｜中央｜右（ナビ）。右は 220〜400px、中央は「残り」だが 640px まで。
   〜1512px は従来どおり（中央480px）。1513〜1920px は中央と右が一緒に広がり、
   1920px を超える画面は全体を中央寄せにする（27インチ QHD 対応） */
.layout {
  display: grid;
  grid-template-columns:
    50%
    min(var(--col-main-cap), calc(50% - clamp(var(--col-ui-min), calc(50% - var(--col-main-max)), var(--col-ui-max))))
    minmax(0, 1fr);
  align-items: start;
  max-width: var(--layout-max);
  margin-inline: auto;
  background-color: var(--color-white);
}

/* 左（写真）と右（UI）は画面に貼り付け、中央だけが通常フローでスクロールする */
.hero,
.ui {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100dvh;
  align-self: start;
  overflow: hidden;
}

/* ---------------------------------------------------------
   5. section: hero（左カラム）
   --------------------------------------------------------- */
.hero {
  grid-column: 1;
  grid-row: 1;
  background-color: var(--color-light-gray);
}

/* <picture> は箱を作らせず、絶対配置の写真をそのまま .hero の子として扱う
   （PC・SPとも、空のインラインボックスによる行の発生を防ぐ） */
.hero picture {
  display: contents;
}

/* 横長画面では下側だけが切れ、頭は切れない。1512×982でFigmaと同じ切り抜き */
.hero__photo {
  position: absolute;
  inset: 0;
  width: 100%;
  max-width: none;
  height: 100%;
  object-fit: cover;
  object-position: 50% 0;
}

/* スローガン：帯込みの1枚SVG。ブロックは位置決めだけを担当し、幅はSVGがそのまま持つ */
.hero__slogan-block {
  position: absolute;
  left: var(--hero-slogan-left);
  bottom: var(--hero-slogan-bottom);
  width: var(--hero-slogan-width);
}

.hero__slogan {
  display: block;
  width: 100%;
  height: auto;
  max-width: none;
  filter: var(--hero-slogan-halo);
}

/* SNS リンク帯 */
.hero__sns {
  position: absolute;
  left: 0;
  bottom: 0;
  width: var(--hero-sns-width);
  height: var(--hero-sns-height);
  background-color: var(--color-white);
  border-top-right-radius: 10px;
}

.sns-list {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--hero-sns-gap);
  height: 100%;
  padding: 0 var(--hero-sns-padding-x);
}
/* 44×8 + 10×7 + 22×2 = 466px（帯は472px） */

.sns-link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--tap-size);
  height: var(--tap-size);
  color: var(--color-black);
  text-decoration: none;
}

.sns-icon {
  max-width: none;
  flex-shrink: 0;
}

.sns-icon--youtube {
  width: 36px;
  height: 26px;
  color: var(--color-youtube);
}

.sns-icon--x {
  width: 28px;
  height: 28px;
}

.sns-icon--instagram {
  width: 30px;
  height: 30px;
}

.sns-icon--facebook {
  width: 32px;
  height: 32px;
}

.sns-icon--tiktok {
  width: 28px;
  height: 28px;
}

/* 元データは 448×512。高さを他のアイコンと揃え、幅は比率で決める */
.sns-icon--threads {
  width: 25px;
  height: 28px;
}

.sns-icon--note {
  width: 30px;
  height: 30px;
}

.sns-icon--line {
  width: 30px;
  height: 30px;
}

/* ---------------------------------------------------------
   6. section: main（中央カラム）
   --------------------------------------------------------- */
/* 本文の行末処理：最終行が1〜2文字だけになる「ぶら下がり」を避ける。
   対応ブラウザ（Chrome/Edge、Safari 26以降）だけで効き、非対応では従来どおりの折り返し */
.main p,
.main li,
.main dd {
  text-wrap: pretty;
}

/* Safari（26以降）の pretty は段落全体の行長をそろえる方式で、和文だと各行が短くなり
   本文の箱が狭く見える（iPhoneで確認、2026-09-16）。Safari だけ従来の折り返しに戻す。
   `font: -apple-system-body` は Safari だけが解釈する */
@supports (font: -apple-system-body) {
  .main p,
  .main li,
  .main dd {
    text-wrap: wrap;
  }
}

.main {
  grid-column: 2;
  grid-row: 1;
  position: relative;
  z-index: 1;   /* 両隣のカラムに影を落とす */
  min-height: 100vh;
  padding: 80px var(--col-main-pad-x);
  background-color: var(--color-white);
  box-shadow: 0 0 20px rgba(0, 0, 0, .15);
}

.content-section {
  scroll-margin-top: 24px;
}

.content-section + .content-section {
  margin-top: 80px;
}

.content-section h2 {
  margin: 0 0 40px;
  color: var(--color-primary);
  font-size: 32px;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.03em;
  word-break: keep-all;        /* 「・」「、」の後でだけ折り返す */
  overflow-wrap: anywhere;     /* それでも収まらない場合の保険 */
}

/* --- 6-1. セクション見出し（02以降の共通スタイル） --- */
/* ごあいさつの h2（32px・左寄せ）とは別物。`.content-section h2` の指定より
   詳細度を上げる必要があるため、`.content-section` を前置している */
.content-section .section-heading {
  margin: 0;
  color: var(--color-primary);
  font-size: 40px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 0.03em;
  word-break: keep-all;        /* 「・」「、」の後でだけ折り返す */
  overflow-wrap: anywhere;     /* それでも収まらない場合の保険 */
}

.section-heading--center {
  text-align: center;
}

/* 「02 / PROFILE」のラベル。見出し本文の上に別行で置く */
.section-heading__label {
  display: block;
  margin-bottom: 10px;
  font-family: var(--font-en);
  font-size: 16px;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: 0.03em;
}

/* --- 6-2. 背景色付きセクション（帯） --- */
/* 中央カラムの左右余白ぶん外へ広げ、背景をカラムの端まで届かせる。
   余白は同じ変数で戻すので、中身の左右位置は他セクションの本文と揃う */
.content-section--band {
  margin-inline: calc(-1 * var(--col-main-pad-x));
  padding: 40px var(--col-main-pad-x);
  background-color: var(--color-primary-light);
}

/* 帯なしでも同じ縦リズムにしたいセクション（プロフィール。2026-09-16 に帯を経歴へ移した） */
.content-section--stack {
  padding: 40px 0;
}

.content-section--band > * + *,
.content-section--stack > * + * {
  margin-top: 40px;
}

/* 経歴を帯にしたときは、カード列の白い下地を外して帯の色を通す（カード自体は白／薄黄）。
   帯の下余白40pxはトラック側に移し、スクロールバーが帯の下端に付くようにする（2026-09-16 指示） */
.content-section--band .history {
  background-color: transparent;
}

.content-section--band.content-section--history {
  padding-bottom: 0;
}

.content-section--band .history .history__track {   /* 後出の .history .history__track より強くする */
  padding-bottom: 56px;   /* 16px（元の下余白）＋ 40px（帯の下余白） */
}

/* --- 6-3. 汎用スライダー（プロフィール・経歴で使い回す。自動再生なし） --- */
.slider__track {
  display: flex;
  gap: 0;
  margin: 0;
  padding: 0;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  list-style: none;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;             /* Firefox */
}

.slider__track::-webkit-scrollbar {
  display: none;                     /* Safari / Chrome */
}

.slider__slide {
  flex: 0 0 100%;
  scroll-snap-align: start;
}

.slider__slide img {
  display: block;
  width: 100%;
  aspect-ratio: 354 / 220;
  object-fit: cover;
}

.slider__nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 12px;
}

.slider__btn {
  position: relative;   /* 中の隠しテキスト（absolute）をボタン内に閉じ込め、スクロール領域の外へはみ出させない */
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: var(--tap-size);
  height: var(--tap-size);
  padding: 0;
  border: 0;
  background-color: transparent;
  color: var(--color-primary);
  cursor: pointer;
}

.slider__icon {
  width: 24px;
  height: 24px;
  max-width: none;
  flex-shrink: 0;
}

/* 先頭・末尾での無効表示。disabled にするとフォーカスが飛ぶので aria-disabled で表す
   （JS側もこの状態のときはスクロールさせない） */
.slider__btn[aria-disabled="true"] {
  color: var(--color-primary);
  opacity: .35;         /* 薄青の帯の上でも「無効」と分かる程度に残す */
  cursor: default;
}

.slider__count {
  margin: 0;
  color: var(--color-primary);
  font-family: var(--font-en);
  font-weight: 700;
  line-height: 1;
}

.slider__current {
  font-size: 40px;
}

.slider__total {
  font-size: 20px;
}

/* JS無効時：ボタンが効かないのでナビ行ごと隠す。トラックは横スクロールで全枚数見られる */
html:not(.js) .slider__nav {
  display: none;
}

/* --- 6-3b. 写真のクロスフェード（プロフィール。自動切替＋一時停止／再生ボタン） --- */
/* 自動で動くので WCAG 2.2.2（動きの制御）に沿ってボタンを必ず添える。
   自動開始の抑制（prefers-reduced-motion）とタブ非表示中の停止はJS側（fader.js） */
.fader {
  display: flex;
  flex-direction: column;
  align-items: flex-end;   /* ボタンを画像の直下・右寄せに置く */
}

/* 5枚を同じ箱に重ねる。比率は共通スライダーの写真と同じ 354/220 */
.fader__stack {
  position: relative;
  width: 100%;
  aspect-ratio: 354 / 220;
  margin: 0;
  padding: 0;
  overflow: hidden;
  list-style: none;
}

.fader__slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 1s ease;
}

.fader__slide.is-active {
  opacity: 1;
}

.fader__slide img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 動きを抑える設定のときはディゾルブしない（自動開始そのものはJS側で止める） */
@media (prefers-reduced-motion: reduce) {
  .fader__slide {
    transition: none;
  }
}

/* 一時停止／再生ボタン。タップ領域44px以上・常時表示。
   フォーカスリングは共通指定（button:focus-visible）に任せるので outline は触らない */
.fader__toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: var(--tap-size);
  padding: 0 12px;
  border: 0;
  background: none;
  color: var(--color-primary);
  font: 700 16px var(--font-ja);
  text-decoration: underline;
  cursor: pointer;
}

.fader__toggle-icon {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
}

/* アイコンは状態で入れ替える（aria-pressed="true" ＝ 停止中なので「再生」を出す） */
.fader__toggle .fader__toggle-icon--play,
.fader__toggle[aria-pressed="true"] .fader__toggle-icon--pause {
  display: none;
}

.fader__toggle[aria-pressed="true"] .fader__toggle-icon--play {
  display: block;
}

/* JS無効時：自動切替もボタンも効かないので、重ねるのをやめて5枚を縦に並べ全部見せる */
html:not(.js) .fader__stack {
  aspect-ratio: auto;
}

html:not(.js) .fader__slide {
  position: relative;
  opacity: 1;
}

html:not(.js) .fader__slide + .fader__slide {
  margin-top: 12px;
}

html:not(.js) .fader__slide img {
  height: auto;
}

html:not(.js) .fader__toggle {
  display: none;
}

/* section: greeting */
.greeting__body p + p {
  margin-top: calc(var(--line-height-base) * 1em);
}

.greeting__sign {
  margin: 24px 0 0;
  text-align: right;
}

.greeting__sign img {
  display: inline-block;
  width: 184px;
  height: 34px;
}

/* section: profile */
.profile__body > * + * {
  margin-top: 16px;
}

.profile__name {
  margin: 0;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.6;
}

/* 氏名・読み・漢字をそれぞれ一かたまりにし、途中で改行させない */
.profile__name-part {
  display: inline-block;
  white-space: nowrap;
}

.profile__basic {
  margin: 0;
}

/* FAVORITE ボックス（白地・ターコイズの枠） */
.favorite {
  padding: 32px 24px;
  border: 1px solid var(--color-primary);
  border-radius: 10px;
  background-color: var(--color-white);
}

.favorite > * + * {
  margin-top: 16px;
}

/* Figma：46px・行高 normal（≒56px）で、見出しの下は16pxあける */
.favorite__title {
  /* 2026-09-17 テキスト → ロゴ風SVG（favorite-title.svg 400×57）に差し替え。文字サイズ30px相当の高さに合わせる */
  margin: 0 0 32px;
  font-size: 1rem;   /* h3 の既定サイズを打ち消す（中身は画像） */
  line-height: 1;
}

.favorite__title img {
  display: block;
  width: min(100%, 236px);   /* 400:57 → 高さ約34px */
  height: auto;
}

.favorite__list {
  margin: 0;
}

/* 項目名。Figma上で「好きな」だけ太いなどの揺れがあるが、データの乱れなので
   dt全体を太字・dd全体を通常に揃える */
.favorite__list dt {
  color: var(--color-primary);
  font-size: 16px;
  font-weight: 700;
  line-height: 2;                       /* Figma: 16px / 32px */
}

.favorite__list dt > span {
  margin-right: 6px;
}

.favorite__list dd {
  margin: 0;
  font-size: var(--font-size-base);
  line-height: var(--line-height-base);
}

/* 項目どうしは1行分あける */
.favorite__list dd + dt {
  margin-top: calc(var(--line-height-base) * 1em);
}

/* --- 6-4. section: career（経歴・福岡での取り組み） --- */
/* この見出しだけ letter-spacing 4px（Figma指定） */
.content-section .section-heading--history {
  letter-spacing: 4px;
}

/* 横スクロールできることの示唆（装飾）。JSの有無にかかわらず表示する */
.content-section--history .scroll-hint {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  margin: 8px 0 0;
  color: var(--color-black);
  font-family: var(--font-en);
  font-size: 14px;
  font-weight: 400;
  line-height: 1.4;
}

.scroll-hint__arrow {
  width: 20px;
  height: 9px;
  max-width: none;
  flex-shrink: 0;
}

/* カード列。中央カラムの左右余白ぶん外へ広げ、スクロールできる範囲をカラムの端まで届かせる。
   横スクロールはこのトラックの中だけで完結するので、ページ全体には横スクロールが出ない */
.content-section--history .history {
  margin-top: 16px;
}

.history {
  margin-inline: calc(-1 * var(--col-main-pad-x));
  background-color: var(--color-white);
}

/* 余白はトラック側に持たせる。こうすると
   ・背景と スクロール範囲 はカラムの端まで届く
   ・先頭カードの左端と最終カードの右端は本文と揃う
   の両方が成り立つ（scroll-padding-inline はスナップ位置をこの余白に合わせるため） */
.history .history__track {
  display: flex;
  align-items: stretch;          /* カードの高さを揃える */
  gap: 24px;
  padding: 16px var(--col-main-pad-x);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--col-main-pad-x);
  scrollbar-width: thin;         /* 共通スライダーと違い、隠さず細く出す（操作の手がかり） */
  scrollbar-color: var(--color-primary) var(--color-light-gray);
}

/* マウスでつかんで左右に送れる（slider.js の enableMouseDrag）。マウスなどの精密ポインタのときだけ
   「つかむ手」のカーソルにし、ドラッグと両立しない文字選択は切る */
@media (hover: hover) and (pointer: fine) {
  .js .history .history__track {
    cursor: grab;
    user-select: none;
    -webkit-user-select: none;
  }

  .js .history .history__track .slider__btn {
    cursor: pointer;
  }
}

/* ドラッグ中：スナップを一時的に切って指に追従させ、離したあと slider.js が最寄りのカードへ送る */
.slider.is-dragging .history__track {
  scroll-snap-type: none;
  scroll-behavior: auto;
  cursor: grabbing;
}

.history .history__track::-webkit-scrollbar {
  display: block;
  height: 8px;
}

.history .history__track::-webkit-scrollbar-track {
  border-radius: 4px;
  background-color: var(--color-light-gray);
}

.history .history__track::-webkit-scrollbar-thumb {
  border-radius: 4px;
  background-color: var(--color-primary);
}

/* 幅303px固定。狭い端末ではトラックの幅まで縮める */
.history .history__card {
  flex: 0 0 90%;                        /* 本文カラムの内容幅の90%（Figmaの303pxは402px幅での値） */
  max-width: 100%;
  scroll-snap-align: start;
}

.history__inner {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 24px;
  border: 1px solid var(--color-primary);
  border-radius: 10px;
  background-color: var(--color-white);
}

/* 「福岡での取り組み」のカード */
.history__card[data-tone="yellow"] .history__inner {
  background-color: var(--color-history-highlight);
}

.history .history__inner > * + * {
  margin-top: 16px;
}

.history__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.history__year {
  margin: 0;
  color: var(--color-primary);   /* 方針A：Figmaどおり。コントラスト調整は後で :root で一括 */
  font-size: 16px;
  font-weight: 700;
  line-height: 1.5;
}

/* 方針A：Figmaどおり primary（白文字との比 2.6:1 は後で :root で一括調整） */
.history__tag {
  flex-shrink: 0;
  margin-left: auto;   /* 年表記のないカードでも右寄せを保つ（history__headがtagのみになる場合の保険） */
  padding: 4px 12px;
  border-radius: 50px;
  background-color: var(--color-primary);
  color: var(--color-white);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.5;
}

.history__title {
  margin: 0;
  color: var(--color-black);
  font-size: 18px;
  font-weight: 700;
  line-height: 1.78;   /* Figma 18/32 */
}

/* 共通スライダーの `.slider__slide img`（aspect-ratio 354/220）を打ち消す */
.history .history__photo {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;                  /* Figma 255×170 と同じ比率。カード幅に追従 */
  object-fit: cover;
}

.history__body {
  font-size: 16px;
  line-height: 2;      /* Figma 16/32 */
}

.history__body p {
  margin: 0;
}

.history__body p + p {
  margin-top: 2em;     /* 段落間は1行ぶん */
}

/* ナビ行はカードの下端に寄せる（カードの高さが揃っても位置がそろう） */
.history .slider__nav--card {
  margin-top: auto;
  padding-top: 16px;
}

/* --- 6-5. section: policy（政策） --- */
/* 中央カラムの左右余白ぶん外へ広げ、上部ビジュアル・一覧・波形をカラムの端まで届かせる。
   `.content-section--band` と違い、上下paddingは持たせない（一覧側で40px確保する） */
.content-section--policy {
  margin-inline: calc(-1 * var(--col-main-pad-x));
  padding: 0;
}

/* 上部ビジュアル：比率 402/245 の写真の上に見出しを重ねる */
.policy__visual {
  position: relative;
  aspect-ratio: 402 / 245;
}

.policy__photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 見出しは左52px・縦中央固定（写真の背景はほぼ白なので白地の文字と同じ扱い） */
.content-section .section-heading--policy {
  position: absolute;
  left: 52px;
  top: 50%;
  transform: translateY(-50%);
  line-height: 48px;
  letter-spacing: 4px;
}

.section-heading--policy .section-heading__label {
  line-height: 48px;
}

/* 一覧：背景は薄いプライマリカラー、左右paddingは他セクションと揃える */
.policy__list {
  padding: 40px var(--col-main-pad-x);
  background-color: var(--color-primary-light);
}

/* 一覧の末尾の注記（一覧と同じ薄い水色の地に続ける。文字は最小16px） */
.policy__note {
  margin: 0;
  padding: 0 var(--col-main-pad-x) 40px;
  background-color: var(--color-primary-light);
  font-size: 16px;
  line-height: 1.8;
}

/* 文ごとにまとめて折り返す（「近／日中に」のように語の途中で行が変わるのを避ける） */
.policy__note span {
  display: inline-block;
}

/* 政策の一文も同じ考え方で、文節（span）ごとにまとめて折り返す。
   PC は <br> の位置で2行、幅が足りないときだけ文節の切れ目で行を変える
   （「豊か／さが」のように語の途中で行が変わるのを避ける） */
.policy__text p span {
  display: inline-block;
}

/* 404 の見出しも文節ごとに折り返す（「見つかりませ／ん」を避ける） */
.content-section h1 span {
  display: inline-block;
}

.policy__item + .policy__item {
  margin-top: 40px;
}

.policy__item {
  display: flex;
  align-items: flex-start;
  gap: 20px;
}

/* 番号は装飾的な役割（構造は<ol>で伝わるため）なのでaria-hidden */
.policy__num {
  flex-shrink: 0;
  font-family: "Petit Formal Script", cursive;
  font-size: 56px;
  line-height: 56px;
  color: var(--color-primary);
  letter-spacing: -0.05em;
}

.policy__text {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-top: 12px;
}

.policy__title {
  margin: 0;
  color: var(--color-primary);
  font-size: 24px;
  font-weight: 700;
}

.policy__text p {
  margin: 0;
}

/* 波形：薄いプライマリカラーから白へのつなぎ目 */
.policy__wave {
  display: block;
  width: 100%;
  height: auto;
}

@media (max-width: 1199px) {
  /* SPでは列幅に対する比率で左位置を保つ（PCの52pxをそのまま使うと余白比が崩れる） */
  .content-section .section-heading--policy {
    left: calc(52 / 402 * 100%);
  }
}

/* --- 6-6. section: support（佐々木あやのを応援する） --- */
/* ブロックが hidden のときに余白だけ残らないよう、ブロック間の40pxは gap で作る
   （margin だと非表示のブロックぶんの余白が残ってしまう） */
.support {
  display: flex;
  flex-direction: column;
  gap: 40px;
  margin-top: 40px;
}

/* 階層感は .favorite__title と同等（24px / 700 / primary） */
.support__title {
  margin: 0 0 16px;
  color: var(--color-primary);
  font-size: 24px;
  font-weight: 700;
  line-height: 1.6;
}

.support__block p {
  margin: 0;
}

/* 黄色いピルのボタン（.footer__contact と同じ見た目。白地に置くので幅は最大320pxで中央寄せ）。
   フォーカスリングは共通指定（a:focus-visible）に任せるので outline は触らない */
.btn-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: 320px;
  min-height: 50px;
  margin: 24px auto 0;
  padding: 8px 24px;
  background-color: var(--color-accent);
  color: var(--color-black);
  border-radius: 100px;
  font-family: var(--font-ja);
  font-size: 16px;
  font-weight: 700;
  line-height: 1.5;
  text-align: center;
  text-decoration: none;
}

.btn-cta:hover {
  text-decoration: underline;
}

/* --- 6-7. section: activities（日々の活動） --- */
.content-section--activities > * + * {
  margin-top: 24px;
}

/* Instagramグリッド（2列×3行）。data-feed-url が空の間はこの灰色のダミーが出る */
.insta-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

.insta-grid__item {
  aspect-ratio: 108 / 135;
  background-color: #d9d9d9;   /* ダミーなのでトークン化しない */
}

/* フィード取得後：<li> の中身はリンク＋写真。マスの縦横比のまま切り抜いて敷く */
.insta-grid__item a {
  display: block;
  width: 100%;
  height: 100%;
}

.insta-grid__item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 取得できなかったときの案内文（instagram.js が hidden を外す） */
.insta-note {
  padding: 16px;
  background-color: var(--color-primary-light);
  text-align: center;
  line-height: var(--line-height-base);
}

/* 幅が足りないときは「Instagramでご覧ください。」をひとかたまりで次行へ送る（「くださ／い」の孤立を防ぐ） */
.insta-note__unit {
  display: inline-block;
}

/* .insta-grid の display:grid はUA既定の [hidden] より強いので、明示的に消す */
.insta-grid[hidden],
.insta-note[hidden] {
  display: none;
}

.btn-insta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  min-height: 52px;
  padding: 14px;
  background-color: var(--color-black);
  color: var(--color-white);
  border-radius: 100px;
  font-family: var(--font-en);
  font-size: 20px;
  font-weight: 700;
  line-height: 1.4;
  text-decoration: none;
}

.btn-insta:hover {
  background-color: #000;
  text-decoration: underline;
}

.btn-insta__icon {
  width: 20px;
  height: 20px;
  max-width: none;
  flex-shrink: 0;
}

/* 本文中のSNS帯（hero__sns と同じ .sns-list を流用。Instagramは上のボタンがあるため含めない） */
.sns-inline .sns-list {
  height: auto;
  padding: 0;
  justify-content: center;
  flex-wrap: wrap;                      /* 幅が足りない端末だけ折り返す保険 */
  gap: clamp(2px, 2.5vw, 16px);         /* 390px幅で約10px。6個×44px が1行に収まる */
}

/* ---------------------------------------------------------
   7. section: header-ui（右カラム）
   --------------------------------------------------------- */
.ui {
  grid-column: 3;
  grid-row: 1;
  display: flex;
  flex-direction: column;
  isolation: isolate;   /* ノイズの合成をこのカラム内に閉じる */
  background-image: linear-gradient(171.3deg, var(--color-ui-gradient-start) 4.26%, var(--color-ui-gradient-end) 98.28%);
  color: var(--color-white);
}

/* ノイズ質感（文字の下に敷いて可読性を落とさない） */
.ui::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image: url(../img/noise.svg);
  background-repeat: repeat;
  mix-blend-mode: multiply;
  pointer-events: none;
}

.ui__name,
.ui__nav {
  position: relative;
  z-index: 1;
}

/* 氏名（縦書きSVG）。余白はSVG側に焼き込み済みなのでカラム上端にぴったり置く */
.ui__name {
  flex-shrink: 0;
  height: auto;
  font-size: 1rem;   /* h1 のブラウザ既定値を打ち消す（中身は画像） */
  line-height: 1;
}

/* PCは縦組みの氏名SVGのみ表示（ヨコ組みはSP専用） */
.ui__name-img--pc {
  display: block;
  width: min(100%, 276px);
  height: auto;
}

.ui__name-img--sp {
  display: none;
}

/* SP専用の要素はPCでは出さない（SP側のメディアクエリで表示に戻す） */
.header-activity,
.menu-toggle,
.nav-close,
.nav-sns,
.hero__scroll {
  display: none;
}

/* サイト内ナビゲーションはカラム下端に置く（70px × 6 = 420px） */
.ui__nav {
  margin-top: auto;
  flex-shrink: 0;
}

.ui-nav__link {
  display: flex;
  align-items: center;
  gap: 10px;
  height: var(--ui-nav-item-height);
  padding-left: clamp(20px, 2.4vw, 36px);
  padding-right: 12px;
  color: var(--color-white);
  font-size: 16px;
  font-weight: 700;
  line-height: 1.4;
  text-decoration: none;
  transition: background-color .2s;
}

/* 罫線：1項目目は上下、2〜5項目目は下のみ、6項目目（最後）はなし */
.ui-nav-list > li:first-child .ui-nav__link {
  border-top: 1px solid var(--color-white);
}

.ui-nav-list > li:nth-child(-n+5) .ui-nav__link {
  border-bottom: 1px solid var(--color-white);
}

.ui-nav__num {
  font-family: var(--font-en);
  font-weight: 700;
}

.ui-nav__label {
  min-width: 0;
  font-family: var(--font-ja);
  font-weight: 700;
  word-break: keep-all;        /* 「・」「、」の後でだけ折り返す */
  overflow-wrap: anywhere;     /* それでも収まらない場合の保険 */
}

.ui-nav__link:hover,
.ui-nav__link:focus-visible {
  background-color: rgba(255, 255, 255, .15);
}

/* フォーカスリングをリンクの内側に描き、左右が隠れるのを防ぐ */
.ui-nav__link:focus-visible {
  outline-offset: -3px;
  box-shadow: inset 0 0 0 6px var(--color-black);
}

.ui-nav__link:hover .ui-nav__label,
.ui-nav__link:focus-visible .ui-nav__label {
  text-decoration: underline;
}

/* ---------------------------------------------------------
   8. section: footer
   --------------------------------------------------------- */
.footer {
  grid-column: 2;
  grid-row: 2;
  position: relative;
  z-index: 1;
  padding: 47px 26px;
  background-color: var(--color-black);
  color: var(--color-white);
  text-align: center;
}

.footer > * + * {
  margin-top: 35px;
}

.footer__name {
  margin: 0;
}

.footer__name-main,
.footer__name-sub {
  font-family: var(--font-ja);
  font-weight: 700;
  line-height: 40px;
}

.footer__name-main {
  font-size: 24px;
}

.footer__name-sub {
  font-size: 16px;
}

.footer__mail a {
  color: var(--color-white);
  font-family: var(--font-en);
  font-size: 16px;
  text-decoration: underline;
}

.footer__contact {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 250px;
  min-height: 50px;
  background-color: var(--color-accent);
  color: var(--color-black);
  border-radius: 100px;
  font-family: var(--font-ja);
  font-size: 16px;
  font-weight: 700;
  line-height: 2;
  text-decoration: none;
}

/* hover は他のボタン（.btn-insta / .btn-cta）と同じく下線で示す */
.footer__contact:hover {
  text-decoration: underline;
}

/* 封筒SVG（14×12）から LINE アイコン（正方形PNG 60×60）に差し替え済み。正方形のまま 22px で表示 */
.footer__contact-icon {
  width: 22px;
  height: 22px;
  max-width: none;
  flex-shrink: 0;
}

.footer__links {
  display: flex;
  justify-content: center;
  gap: 20px;
  margin: 35px 0 0;                     /* 要素間35px（.footer > * + * と同値。margin:0 で打ち消さない） */
}

.footer__links li {
  display: flex;
  align-items: center;
}

/* 区切り線：flexのgapで前の項目との間隔を、margin-rightで次項目のテキストとの間隔を作る */
.footer__links li + li::before {
  content: "";
  display: inline-block;
  width: 1px;
  height: 16px;
  margin-right: 20px;
  background-color: var(--color-white);
  vertical-align: middle;
}

.footer__links a {
  color: var(--color-white);
  font-family: var(--font-ja);
  font-size: 16px;
  font-weight: 500;
  text-decoration: underline;
}

.footer__copyright small {
  font-family: var(--font-en);
  font-size: 14px;
}

/* ---------------------------------------------------------
   9. SP版（1199px 以下）
      固定ヘッダー ＋ 画面いっぱいのHero ＋ 本文 ＋ フッターの縦積み。
      縦積み順は DOM順のまま（order は使わない）。
      数値は Figma `sp` ページ iPhone 17（402×874）基準。
   --------------------------------------------------------- */
/* PCでウィンドウ高が低いとき（ナビ6項目=420px と氏名画像470px の合計が 100vh を超える）は、
   ナビ項目を詰め（44px以上は維持）、氏名画像を残り高さに合わせて縮める */
/* PCで高さが低いウィンドウ：写真は幅基準で拡大されて顔が下まで来るので、頭上の余白を詰めて少し上へずらす */
@media (min-width: 1200px) and (max-height: 760px) {
  .hero__photo {
    object-position: 50% 25%;
  }
}

/* それより高い窓でも、横長だと写真が縦にはみ出す。はみ出した分の20%を上側（頭上の余白）で切る。
   縦に余裕のある窓（1512×982 など）でははみ出しが無いので、何も変わらない */
@media (min-width: 1200px) and (min-height: 761px) {
  .hero__photo {
    object-position: 50% 20%;
  }
}

/* 極端に横長で低いウィンドウ（例：2000×710）：写真が大きく写り、左下にコピーを置くと顔に掛かる。
   このときだけコピーを右下（SNS帯の右横）へ移す。
   判定は画面ではなく「写真カラム自体の縦横比」で行う（コンテナクエリ）。
   1921px〜は写真カラムが画面の半分ではなくなるため、画面基準では判定できない（2026-09-18） */
@media (min-width: 1200px) {
  .hero {
    container-type: size;
  }

  @container (min-aspect-ratio: 23/20) {
    .hero__slogan-block {
      left: auto;
      right: 16px;
      bottom: 4px;
      width: min(calc(100% - var(--hero-sns-width) - 24px), 520px, 60vh);
    }
  }
}

@media (min-width: 1200px) and (max-height: 900px) {
  :root {
    --ui-nav-item-height: 56px;
  }
  .ui__name {
    flex-shrink: 1;
    min-height: 0;
  }
  .ui__name-img--pc {
    width: auto;
    max-width: min(100%, 276px);
    max-height: 100%;
  }
}

/* 大きなモニター（27インチ QHD などで文字が小さく見えないように）
   ・1921px〜：本文カラムを 760px・右カラムを 440px に固定し、残りを写真カラムに渡す（下の 1921px 用ブロック参照）
   ・本文カラムは中身を丸ごと拡大（zoom）。文字・写真・余白が同じ比率で大きくなり、1行の文字数は変わらない
   ・ナビは、幅も高さも十分あるときだけ大きくする。そのぶん氏名は窓の高さに合わせて縮む（ナビが見切れないように） */
@media (min-width: 1700px) {
  .main {
    zoom: 1.08;
  }
}

/* 1921px〜：本文 760px・ナビ 440px は固定し、残りは写真カラムが受け取る（余白を出さない）。
   全体の上限は「本文＋ナビ＋写真（窓の高さ×1.3）」。写真がそれ以上横長になると頭が切れるので、
   超えたぶんだけ左右に余白を出す（3440×1440 で 177px ずつ） */
@media (min-width: 1921px) {
  :root {
    --col-main-cap: 760px;
    --col-ui-max: 440px;
    --layout-max: calc(var(--col-main-cap) + var(--col-ui-max) + 130vh);
  }
  .layout {
    grid-template-columns:
      minmax(0, 1fr)
      min(var(--col-main-cap), calc(50% - var(--col-ui-max)))
      var(--col-ui-max);
  }
}

@media (min-width: 2100px) {
  .main {
    zoom: 1.14;
  }
}

@media (min-width: 2300px) {
  .main {
    zoom: 1.2;
  }
}

@media (min-width: 2100px) and (min-height: 901px) {
  :root {
    --ui-nav-item-height: 78px;
  }
  .ui-nav__link {
    font-size: 17px;
  }
  .ui__name {
    flex-shrink: 1;
    min-height: 0;
  }
  .ui__name-img--pc {
    width: auto;
    max-width: min(100%, 276px);
    max-height: 100%;
  }
}

@media (max-width: 1199px) {
  /* 本文のSNS帯は7個が1行に入らないので、幅を4個分に絞って 4＋3 の2段に揃える */
  .sns-inline .sns-list {
    /* Threads 一時非表示中は6個なので 3＋3。8個に戻すときは 4 * var(--tap-size) + 3 * 16px + 1px（4＋3）に戻す */
    max-width: calc(3 * var(--tap-size) + 2 * 16px + 1px);
    margin-inline: auto;
  }


  /* SPの中央カラム左右余白。`.content-section--band` の逆マージンも同じ値を参照するので、
     数値を直接書かず変数を上書きする */
  :root {
    --col-main-pad-x: 32px;
  }

  /* 固定ヘッダーに隠れないよう、ページ内リンクの着地位置をずらす */
  html {
    scroll-padding-top: var(--sp-header-h);
  }

  /* メニューを開いている間は背面をスクロールさせない */
  html[data-menu-open] body {
    overflow: hidden;
  }

  .layout {
    display: block;
  }

  /* --- 9-1. 固定ヘッダー（.ui） --- */
  .ui {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 20;
    height: auto;                        /* 200%拡大で文字が折り返しても切れないようにする */
    min-height: var(--sp-header-h);
    flex-direction: row;
    flex-wrap: nowrap;                   /* 320px幅でもボタンを2段目に落とさない（氏名側が縮む） */
    align-items: center;
    padding-left: 24px;
    overflow: visible;
    background-image: linear-gradient(179.5deg, var(--color-ui-gradient-start) 4.26%, var(--color-ui-gradient-end) 98.28%);
    box-shadow: 0 4px 5px rgba(0, 0, 0, .1);
  }

  /* 氏名（ヨコ組み）。残り幅をすべて使い、狭い端末では縮める */
  .ui__name {
    flex: 1 1 auto;
    min-width: 0;
  }

  .ui__name-img--pc {
    display: none;
  }

  .ui__name-img--sp {
    display: block;
    width: 171px;
    max-width: 100%;
    height: auto;
  }

  /* 「日々の活動」へのショートカット（80×80のタップ領域） */
  .header-activity {
    position: relative;
    z-index: 1;                          /* ノイズ（.ui::before）より前面 */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    flex-shrink: 0;
    align-self: stretch;
    width: 80px;
    min-height: var(--sp-header-h);
    border-left: 1px solid var(--color-white);
    color: var(--color-white);
    font-size: 14px;
    font-weight: 500;
    line-height: 18px;
    text-align: center;
    text-decoration: none;
  }

  .header-activity__icon {
    width: 11px;
    height: 6px;
    max-width: none;
    flex-shrink: 0;
  }

  /* メニュー開閉ボタン（白地・80×80） */
  .menu-toggle {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    flex-shrink: 0;
    align-self: stretch;
    width: 80px;
    min-height: var(--sp-header-h);
    padding: 0;
    border: 0;
    background-color: var(--color-white);
    color: var(--color-primary-dark);
    font: 500 14px/12px var(--font-en);
    cursor: pointer;
  }

  .menu-toggle__bars {
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: 36px;
  }

  .menu-toggle__bars > span {
    display: block;
    width: 36px;
    height: 2px;
    background-color: currentColor;
    transition: transform .2s;
  }

  /* 開いているときは2本線を×にする（線の中心間は 2+12=14px なので各7px寄せる） */
  html[data-menu-open] .menu-toggle__bars > span:first-child {
    transform: translateY(7px) rotate(45deg);
  }

  html[data-menu-open] .menu-toggle__bars > span:last-child {
    transform: translateY(-7px) rotate(-45deg);
  }

  /* --- 9-2. メニュー（.ui__nav） --- */
  .ui__nav {
    display: none;
    margin-top: 0;
  }

  /* 開いたときだけヘッダー下の全面に出す */
  html[data-menu-open] .ui__nav {
    display: block;
    position: fixed;
    top: var(--sp-header-h);
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 19;
    overflow-y: auto;
    padding-bottom: 24px;
    background-image: linear-gradient(179.5deg, var(--color-ui-gradient-start) 4.26%, var(--color-ui-gradient-end) 98.28%);
  }

  .nav-close {
    display: block;
    width: 100%;
    height: 56px;
    padding: 0 12px 0 36px;
    border: 0;
    background-color: transparent;
    color: var(--color-white);
    font-family: var(--font-ja);
    font-size: 16px;
    font-weight: 700;
    line-height: 1.4;
    text-align: left;
    cursor: pointer;
  }

  /* --- 9-3. JS無効時のフォールバック --- */
  /* 開閉できないので、ボタンを隠してナビをヘッダー内に縦に並べる */
  html:not(.js) .menu-toggle,
  html:not(.js) .nav-close {
    display: none;
  }

  /* 背の高い固定ヘッダーで画面を塞がないよう、ヘッダー自体を通常フローに戻す
     （::before の基準を保つため static ではなく relative） */
  html:not(.js) .ui {
    position: relative;
    flex-wrap: wrap;                     /* ナビがヘッダー内に並ぶので折り返しを許す */
    box-shadow: none;
  }

  html:not(.js) .ui__nav {
    display: block;
    position: static;
    flex: 1 0 100%;
  }

  /* --- 9-4. Hero --- */
  /* 固定ヘッダーの下に潜り込ませる。写真上端の74pxぶんは空を見せる意図 */
  .hero {
    position: relative;
    height: 100vh;
    height: 100svh;
    min-height: 600px;
    overflow: hidden;
    background-color: var(--color-primary-light);
  }

  /* 写真：Figma（402×874）の構図を「画面の高さ」基準で再現する。
     幅基準にすると背の低い画面（実機Safari）で上下が切れて頭が欠けるため、
     高さから画像サイズを決め、上端は切らない（top をマイナスにして Figma の77px分の上カットを再現）。
     1.445 = 1156/800（Figmaの画像高 ÷ 写真エリア高）、0.096 = 77/800 */
  .hero__photo {
    position: absolute;
    top: calc(74px - (100% - 74px) * 0.096);
    left: 50%;
    transform: translateX(-50%);
    width: auto;
    height: calc((100% - 74px) * 1.445);
    max-width: none;
    object-fit: cover;
    object-position: 50% 0;
  }

  /* スローガン（帯込みの1枚SVG）。箱は画面幅いっぱい（SVG内の余白で左右約40pxが空く＝見た目の帯は幅の約78%）。
     タブレットは480pxで頭打ち。見た目の帯下端がSNS帯の約24px上に来る位置 */
  .hero__slogan-block {
    left: 0;
    bottom: calc(var(--hero-sns-height) - 14px);
    width: 100%;
    max-width: 480px;
  }

  /* 下へスクロールできることの示唆 */
  .hero__scroll {
    position: absolute;
    right: 14px;
    bottom: 15px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    color: var(--color-black);
  }

  .hero__scroll-text {
    font: 400 14px/16px var(--font-en);
    writing-mode: vertical-rl;
  }

  /* 元データは20×9の「→」。90度回して下向きにする */
  .hero__scroll-arrow {
    width: 20px;
    height: 9px;
    max-width: none;
    transform: rotate(90deg);
  }

  .nav-sns {
    display: none;
  }

  /* --- 9-5. SNS帯 --- */
  /* 右下の SCROLL 表示（右余白14px＋幅20px）に10px の隙間を残して画面幅いっぱいに広げる。
     最小 324px、最大 420px。
     アイコンは8個（44×8 ＋ 左右8px ＝ 368px）なので、画面幅が412px未満だとこの幅に収まらない。
     その場合はこのブロックの後ろの「幅の狭い端末のSNS帯」で帯を画面幅いっぱいに広げる */
  .hero__sns {
    position: fixed;
    z-index: 15;
    left: 0;
    right: auto;
    bottom: 0;
    width: clamp(min(324px, 100%), calc(100% - 44px), 420px);
    height: auto;
    min-height: var(--hero-sns-height);
    border-top-right-radius: 10px;
  }

  .sns-list {
    flex-wrap: wrap;                 /* 360px未満で収まらないときの保険 */
    justify-content: space-between;  /* 帯の幅に合わせてアイコンを等間隔に */
    gap: 0;
    height: auto;
    min-height: var(--hero-sns-height);
    padding: 0 8px;
  }

  .sns-icon--youtube {
    width: 27px;
    height: 20px;
  }

  .sns-icon--x {
    width: 21px;
    height: 21px;
  }

  .sns-icon--instagram {
    width: 20px;
    height: 20px;
  }

  .sns-icon--facebook {
    width: 20px;
    height: 20px;
  }

  .sns-icon--tiktok {
    width: 18px;
    height: 20px;
  }

  .sns-icon--threads {
    width: 18px;
    height: 20px;
  }

  .sns-icon--note {
    width: 20px;
    height: 20px;
  }

  .sns-icon--line {
    width: 20px;
    height: 20px;
  }

  /* --- 9-6. 本文・フッター --- */
  .main {
    min-height: 0;
    z-index: auto;
    padding: 80px var(--col-main-pad-x);
    box-shadow: none;
  }

  /* 縦向きSPのみ、下端に固定表示される .hero__sns の帯にコピーライト等が隠れないよう
     padding-bottom だけを底上げする（左右・上は基本の .footer のまま） */
  .footer {
    padding-bottom: calc(var(--footer-padding-bottom) + var(--hero-sns-height));
  }
}

/* 幅の狭い端末のSNS帯（412px未満）
   Threads を加えてアイコンが8個になり、44×8 ＋ 左右8px ＝ 368px が
   通常の帯幅（画面幅 − 44px）に収まらなくなるため、ここだけ帯を画面幅いっぱいに広げる。
   左右の余白も外して1行に並べ、折り返さない（nowrap）。
   ※360px未満ではリンクの当たり判定が本サイトの基準44pxを下回る。
     縮みの下限は min-width: 40px で、320px幅でちょうど40px（WCAG 2.5.8 の24pxは満たす）。
   ※帯が画面幅いっぱいになるぶん、Hero右下の SCROLL 表示（装飾）は帯の下に隠れる */
@media (max-width: 411px) {
  /* 帯が全幅になるので右下の SCROLL 表示（装飾）は帯に隠れる。この幅では出さない */
  .hero__scroll {
    display: none;
  }

  .hero__sns {
    width: 100%;
    border-top-right-radius: 0;
  }

  .hero__sns .sns-list {
    flex-wrap: nowrap;
    gap: 0;
    padding: 0;
  }

  /* 8個を等分。320px幅で40px（プロジェクト基準44pxの例外。デスクトップでスクロールバー分だけ狭い場合は36pxまで縮む） */
  .hero__sns .sns-link {
    flex: 1 1 0;
    width: auto;
    min-width: 36px;
  }
}

/* 横長・タブレットのSP画面（縦横比 0.7 以上）：Figmaのスマホ用ズームをやめ、上端固定の通常 cover にする */
@media (max-width: 1199px) and (min-aspect-ratio: 7/10) {
  .hero__sns {
    display: none;
  }

  .footer {
    padding-bottom: var(--footer-padding-bottom);
  }

  .nav-sns {
    display: block;
    background: var(--color-white);
    padding: var(--nav-sns-padding);
  }

  .nav-sns__heading {
    margin: var(--nav-sns-heading-margin);
    font: 700 var(--nav-sns-heading-size)/1.4 var(--font-en);
    color: var(--color-primary-dark);
  }

  .nav-sns .sns-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0;
    padding: 0 var(--nav-sns-list-padding-x);
  }

  .hero__photo {
    left: 0;
    width: 100%;
    height: calc(100% - 74px);
    transform: none;
    object-position: 50% 0;
  }
}

/* ---------------------------------------------------------
   初回表示の演出
   ・html.intro が付いているときだけ動く（intro.js が付与／解除する）。
     このクラスが付かない限り、以下のルールは一切効かない。
   ・DOMの順序・内容は変えず、opacity と transform だけを動かす
     （visibility/display/pointer-events は使わない＝読み上げ・操作に影響させない）。
   --------------------------------------------------------- */
@keyframes intro-fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes intro-fade-up {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}

@keyframes intro-photo {
  from { opacity: 0; transform: scale(1.03); }
  to   { opacity: 1; transform: none; }
}


/* 写真：0s〜0.9s */
html.intro .hero__photo {
  transform-origin: 50% 30%;
  animation: intro-photo .9s cubic-bezier(.2, .7, .2, 1) 0s both;
}

/* 氏名：0.2s〜0.9s */
html.intro .ui__name {
  animation: intro-fade-up .7s cubic-bezier(.2, .7, .2, 1) .2s both;
}

/* SP：日々の活動ショートカット・メニュー開閉ボタン：0.2s〜0.9s */
html.intro .header-activity,
html.intro .menu-toggle {
  animation: intro-fade .7s cubic-bezier(.2, .7, .2, 1) .2s both;
}

/* スローガン（帯込み1枚）：0.9s〜1.5s。帯のワイプは廃止し、ブロックごと下からふわっと出す */
html.intro .hero__slogan-block {
  animation: intro-fade-up .6s cubic-bezier(.2, .7, .2, 1) .9s both;
}

/* 本文・フッター：1.6s〜2.1s（.main は z-index を持つため opacity のみ） */
html.intro .main,
html.intro .footer {
  animation: intro-fade .5s cubic-bezier(.2, .7, .2, 1) 1.6s both;
}

/* PC右ナビ：1.6s〜2.1s（SPでは .ui__nav は非表示のため影響なし） */
html.intro .ui__nav {
  animation: intro-fade-up .5s cubic-bezier(.2, .7, .2, 1) 1.6s both;
}

/* SNS帯・スクロール示唆：1.8s〜2.2s */
html.intro .hero__sns,
html.intro .hero__scroll {
  animation: intro-fade .4s cubic-bezier(.2, .7, .2, 1) 1.8s both;
}

/* SPの .hero__photo は既に transform: translateX(-50%) を持っているため、
   intro-photo（scale）を使うと位置がずれる。opacity のみの intro-fade に差し替える。
   （animation-name だけを上書きし、長さ・遅延・タイミング関数は共通のまま） */
@media (max-width: 1199px) {
  html.intro .hero__photo {
    animation-name: intro-fade;
  }
}

/* ---------------------------------------------------------
   10. 動きの抑制
   --------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
  }
}