@charset "utf-8";
/*
  ヒーロー <marutto-hero> の文書側のスタイル（ヒーロー設計書 §2.1・§2.4・§4.3・§5.5）。サイトの <head> で読む
  - このファイルは元。build（tools/build.mjs）が「__」で囲んだ印を config.js の値で置き換えて dist/marutto-hero.css を書く
    （書体の @font-face・画板の判定・待ちの上限を 2 か所に書かないため）。印を手で値に書き換えない
  - 箱の高さはここで先に決める（CLS を出さない）。読み込み待ちは白い箱（＝v13 の 0 秒のコマ。2026-10-06 今村決定 #8）
  - サイトのヘッダーはヒーローの上に積む（重ねない）。ヘッダーの高さは --site-header-h で渡す
    （サイトはレイの tokens.css の --header-h: 1024px 以上 104px・1023px 以下 64px。tokens.css で --site-header-h につないである）
*/
@font-face{font-family:"marutto-hero-serif";src:url("fonts/4ea3e10a40b1/marutto-hero-serif-600.woff2") format("woff2");font-weight:600;font-style:normal;font-display:swap;}
@font-face{font-family:"marutto-hero-round";src:url("fonts/4ea3e10a40b1/marutto-hero-round-700.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap;}
@font-face{font-family:"marutto-hero-round";src:url("fonts/4ea3e10a40b1/marutto-hero-round-500.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap;}
@font-face{font-family:"marutto-hero-mono";src:url("fonts/4ea3e10a40b1/marutto-hero-mono-400.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap;}

marutto-hero{
  display:block;
  position:relative;
  /* svh はアドレスバーの出入りで変わらない（dvh は変わるたびに組み直しになる）。最小は v13 と同じ（ヘッダー込み。config.js の BOX_MIN_HEIGHT） */
  height:calc(100vh - var(--site-header-h, 0px));
  height:calc(100svh - var(--site-header-h, 0px));
  min-height:calc(560px - var(--site-header-h, 0px));
  overflow:hidden;
  background:#FFFFFF;
  /* 静止画の出し分け（画板の判定）を部品の箱の大きさで行うため */
  container:marutto-hero / size;
}

/* 見出しと説明は見た目だけ隠す（読み上げ・検索には乗る。JS が無くても HTML にある） */
marutto-hero > h1,
marutto-hero > p{
  position:absolute; width:1px; height:1px; margin:-1px; padding:0; border:0; overflow:hidden;
  clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap;
}

/* 完成形の静止画。出す場面は 3 つ（ヒーロー設計書 §5.5）。どれも同じ要素・同じ画像で出す（二重に取得しない）
   1. JS が来ない・遅い: 部品が定義されないまま 4 秒たったら出す。背景画像はアニメーションが効いたときに
      初めて指定されるので、時間内に動き出したときは静止画を通信しない
   2. JS が動かない（scripting: none）: すぐ出す
   3. 動き出した後の失敗（書体の時間切れ・読めない）: 部品が fallback 属性を付ける。要素は Shadow DOM の slot で
      舞台の上・ボタンの下に描かれる */
marutto-hero > .marutto-hero__still{
  display:none;
  position:absolute; inset:0;
  background-color:#FFFFFF; background-position:center; background-size:contain; background-repeat:no-repeat;
}
marutto-hero:not(:defined) > .marutto-hero__still{
  display:block;
  animation:marutto-hero-still 0s linear 4s forwards;
}
@keyframes marutto-hero-still{
  to{ background-image:var(--marutto-hero-still); }
}
@media (scripting: none){
  marutto-hero:not(:defined) > .marutto-hero__still{
    animation:none;
    background-image:var(--marutto-hero-still);
  }
}
marutto-hero[fallback] > .marutto-hero__still{
  display:block;
  background-image:var(--marutto-hero-still);
}

/* 画板ごとの静止画（判定は config.js の BOARD_RULE。build がここに書く） */
marutto-hero > .marutto-hero__still{
  --marutto-hero-still:image-set(url("still/305b26149835/pc-1x.avif") 1x type("image/avif"), url("still/305b26149835/pc-2x.avif") 2x type("image/avif"), url("still/305b26149835/pc-1x.webp") 1x type("image/webp"), url("still/305b26149835/pc-2x.webp") 2x type("image/webp"));
}
@container marutto-hero (width < 900px) or (aspect-ratio < 900 / 1000){
  marutto-hero > .marutto-hero__still{
    --marutto-hero-still:image-set(url("still/305b26149835/sp-1x.avif") 1x type("image/avif"), url("still/305b26149835/sp-2x.avif") 2x type("image/avif"), url("still/305b26149835/sp-1x.webp") 1x type("image/webp"), url("still/305b26149835/sp-2x.webp") 2x type("image/webp"));
  }
}

/* 案 2 の置き方（align="content"）の静止画の位置（2026-10-06 今村決定）。部品の fit（src/stage.js の alignBoard）と同じ式を、
   画板の大きさ・ラベルの左端（config.js の CFG）から build が書く。静止画は画板そのもの（縮尺 1 で撮った画像）なので、
   大きさと位置を式で決める。部品の置き方と一致することは test/e2e/align.test.js が確かめる */
marutto-hero[align="content"] > .marutto-hero__still{
  --marutto-hero-l:max(var(--marutto-hero-content-margin, 0px), (100cqw - var(--marutto-hero-content-max, 100000px)) / 2);
    --marutto-hero-w:min(100cqh * 1.951219512195122, (100cqw - var(--marutto-hero-l)) * 1.0666666666666667);
    background-size:var(--marutto-hero-w) auto;
    background-position:calc(var(--marutto-hero-l) - var(--marutto-hero-w) * 0.0625) center;
}
@container marutto-hero (width < 900px) or (aspect-ratio < 900 / 1000){
  marutto-hero[align="content"] > .marutto-hero__still{
    --marutto-hero-l:max(var(--marutto-hero-content-margin, 0px), (100cqw - var(--marutto-hero-content-max, 100000px)) / 2);
    --marutto-hero-w:min(100cqh * 0.5, (100cqw - var(--marutto-hero-l)) * 1.054054054054054);
    background-size:var(--marutto-hero-w) auto;
    background-position:calc(var(--marutto-hero-l) - var(--marutto-hero-w) * 0.05128205128205128) center;
  }
}