@charset "UTF-8";
/* ==========================================================================
   LIFE HOUSE renewal — base.css
   リセット / デザイントークン / タイポグラフィ基盤
   ========================================================================== */

/* --------------------------------------------------------------------------
   Fonts
   和欧ともに Zen Kaku Gothic New（Google Fonts / HTML側で <link>）を基準にし、
   和文システムフォントで代替する。

   ※ ウェイトは 400 / 500 / 700 の3つを読み込んでいる（build.py の HEAD）。
     このサイトは見出しに font-weight:500 を多用しているため、
     500 を持たない書体に差し替えると「見出しが全部レギュラーで出る」状態に
     なる。書体を替えるときは必ず 500 の有無を確認し、無ければ
     Google Fonts のリクエストと CSS の指定を両方そろえて直すこと。
     （実際、以前 LINE Seed JP を先頭にしていたときは
       500 が存在せず、12箇所の font-weight:500 が全て無効化されていた）

   ※ Marcellus（ローカル TTF・43KB）は PC余白レールのカード見出し専用に復活。
     design01 のセリフ見出し（OPEN HOUSE / GALLERY …）がこの字面。
     --font-serif で参照する。本文・スマホ帯では使っていない。
   -------------------------------------------------------------------------- */

@font-face {
  font-family: "Marcellus";
  src: url("../fonts/Marcellus-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  /* 使うのは欧文の見出しだけなので、取得範囲を Latin に絞る */
  unicode-range: U+0000-00FF, U+2000-206F, U+2190-21FF;
}

/* --------------------------------------------------------------------------
   Design tokens
   -------------------------------------------------------------------------- */
:root {
  /* --- Color : コーポレートカラー = インディゴ（藍色 / ジャパンインディゴ）---
     藍染め・デニムの「深く落ち着いた紺」に振り直したスケール。
     旧スケールは彩度を上げて色相をバイオレット側へ寄せていたため、
     インディゴというより発色の強いロイヤルブルーに見えていた。
     ここでは色相を青側（210〜215度）へ戻し、彩度を各段階で下げて
     深さを出している。青紫の華やかさが減るぶん、写真の木部が引き立つ。
     コントラストは全ペア WCAG AA(4.5:1) を満たすことを確認済み。 --- */
  --c-ink: #0f1c33; /* 見出し・本文の最濃色 */
  --c-charcoal: #1c3661; /* 面として敷く濃色（フッター・ドロワー・PC余白） */
  --c-stone: #4a6182; /* 補助テキスト。淡い面(--c-sand)の上でも 5.1:1 */
  --c-mist: #cfc9ae; /* 罫線・非活性・装飾。本文には使わない */
  --c-sand: #f6f0dc; /* 淡い面。--c-paper を一段沈めた同系のクリーム */
  /* 基本背景。以前はごく淡い青白（#f0f8ff）だったが、
     生成り（クリーム）に振り直した。自然素材・無垢材・塗り壁の
     手触りに寄せるための地色で、面積のほとんどをこの色が占める。
     ★ ここを変えたら --c-paper-rgb（下）と --c-sand も必ず揃えること。
       前者は rgba() 経由でヘッダーの半透明地に使われており、
       置き忘れると「スクロールで青白い帯が浮く」状態になる。 */
  --c-paper: #fdfbef;
  --c-white: #ffffff;

  --c-accent: #2a4f8f; /* リンクとCTAのメインカラー */
  /* hover等の濃色。藍のスケールでは --c-charcoal と同値でよい
     （面として敷く紺と、ベタ塗りCTAの紺を揃えている）。
     hover をもう一段はっきりさせたいときだけ、ここを分離すること。 */
  --c-accent-deep: #1c3661;
  /* 濃色面の上で使うアクセント。--c-accent は charcoal 上だと 1.6:1 しか
     出ないため、明るい側の対になる色を別に持たせている。 */
  --c-accent-light: #9fbbe4;

  /* --- 差し色（クライアント支給パレットのオレンジ）---
     インディゴ一色の落ち着きを保ったまま、視線を引きたい点（タグ・
     カード角の印・セクション連番・見出しロゴ）だけに使う。面には広げないこと。 */
  --c-flare: #d9822b;
  --c-flare-rgb: 217, 130, 43;

  /* --- イベントのカテゴリ色（同じくクライアント支給パレット）---
     SEMINAR=--c-flare、CONSULTING=--c-mustard、RENOVATION=--c-rose。
     OPEN HOUSE・RECRUIT は専用色を割り当てず、タグの既定色（インディゴ）のまま。
     どちらも彩度が高く白文字・淡色文字のどちらでも AA が出ないため、
     使うときは必ず塗り地＋濃色インク文字の組み合わせにすること
     （.event-card__tag 参照）。 */
  --c-mustard: #f2c94c;
  --c-rose: #c95a67;

  /* --- LINE のブランドカラー ---
     LINE への導線（右レール／ドロワーの帯、巻末CTAのマークとボタン）だけに使う。
     サイトのアクセントではないので、それ以外の面には広げないこと。

     ★ 白文字と組み合わせないこと。#06c755 と白の対比は 2.2:1 で AA 未達。
       --c-mustard / --c-rose と同じく「塗り地＋濃色インク文字」で組む。
       --c-ink（#0f1c33）との対比は 7.7:1、--c-line-deep でも 5.6:1 あり AA を満たす。 */
  --c-line: #06c755;
  --c-line-deep: #05a948; /* hover 用に一段暗くした緑 */

  /* --- SNS のブランドカラー ---
     SNSアイコン（ヒーロー足元／ドロワー／フッター／PC右レール）は
     各サービス指定の色で出す。ここはサイトのパレットではなく
     「各社のロゴ規定の色」なので、トーンを合わせようとして
     勝手に濁らせないこと。

     Instagram だけは単色ではなくグラデーション指定なので
     --g-instagram を併せて持たせている（丸ボタンの塗りに使う）。
     単色が必要な場面（線・文字色）は --c-instagram を使う。

     ★ アイコンのグリフは各社とも「白抜き」が正式形。
       白文字のコントラスト基準（AA 4.5:1）はテキストの規定であり、
       ロゴマークには適用されない。ここだけは各社の規定を優先する。 */
  --c-instagram: #d62976;
  --g-instagram: radial-gradient(circle at 28% 105%,
      #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285aeb 90%);
  --c-youtube: #ff0000;
  /* LINE は上の --c-line（#06c755）をそのまま使う */

  /* --- 商品（住宅プラン）のメインカラー ---
     4商品それぞれのブランドカラー。ドロワー／プラン切替タブ／
     プランカード／商品ページの見出し・価格に効かせる。

     3つの役割を分けて持たせている。取り違えるとコントラストが崩れる。
       --c-*        … 支給されたブランドカラーそのもの。罫・点・小さな面。
       --c-*-ink    … 淡い地（--c-paper / 白）の上に置く「文字色」。
                       支給色そのままだと KAJITORU（#ffa336）が
                       クリーム地で 1.9:1 しか出ないため、暗い対を持たせる。
       --c-*-on     … その色をベタ塗りにしたときに乗せる文字色。
                       #2b5291 だけが白、他3色は明るいので --c-ink。

     CRAFREE α は「黄色→白」のグラデーションでゴールドを演出する指定。
     グラデーションは color 値として使えないので、面には --g-alpha を、
     罫や文字には代表色 --c-alpha / --c-alpha-ink を使う。 */
  --c-kajitoru: #ffa336;
  --c-kajitoru-ink: #a05a00;
  --c-kajitoru-on: var(--c-ink);

  --c-crafree: #2b5291;
  --c-crafree-ink: #2b5291;
  --c-crafree-on: var(--c-white);

  --c-alpha: #d9a93c;
  --c-alpha-ink: #8f6a12;
  --c-alpha-on: var(--c-ink);
  /* ゴールドの艶。黄色と白を交互に置いて金属の照り返しを作る。
     角度を変えるときは白の帯（30%付近）を必ず1本残すこと。
     白が消えると、ただの黄土色のベタ塗りになる。 */
  --g-alpha: linear-gradient(115deg,
      #b8891f 0%, #f6dd8a 15%, #ffffff 29%, #e8c25a 45%,
      #fffae6 61%, #d9a93c 78%, #a8781a 100%);

  --c-greenbell: #339966;
  --c-greenbell-ink: #1f7a4d;
  --c-greenbell-on: var(--c-ink);

  /* --- PC余白（レール）の地 ---
     design01 でここが反転した。以前は --c-charcoal のベタ塗りだったが、
     ほぼ白の地にインディゴを差す構成に変更している。
     本体帯（--c-paper）よりわずかに冷たく・暗くして、
     「机の上に置かれた紙」として本体が浮かんで見えるようにしている。 */
  --c-rail-bg: #f7f4ec;
  --rail-line: rgba(var(--c-ink-rgb), 0.1); /* レール内のヘアライン */
  --rail-line-strong: rgba(var(--c-ink-rgb), 0.22);

  /* 半透明で使う色は RGB 成分を持たせておき、rgba() には必ずこれを渡す。
     （配色を差し替えたときに旧パレットの値が取り残されるのを防ぐため。
       過去にインディゴ化した際、ヘッダーとフッターに暖色グレーが残っていた） */
  --c-ink-rgb: 15, 28, 51;
  --c-charcoal-rgb: 28, 54, 97;
  --c-paper-rgb: 253, 251, 239;
  --c-white-rgb: 255, 255, 255;
  --c-accent-deep-rgb: 28, 54, 97;

  /* --- Semantic --- */
  --bg-body: var(--c-paper);
  --text-main: var(--c-ink);
  --text-sub: var(--c-stone);
  --text-invert: var(--c-white);
  --line: rgba(var(--c-ink-rgb), 0.12);
  --line-strong: rgba(var(--c-ink-rgb), 0.28);
  --line-invert: rgba(var(--c-white-rgb), 0.22);

  /* --- エディトリアル表現（角丸・傾き・写真の重なり） ---
     このデザインでは黒を一切使わない。影も罫線も必ず --c-ink の透過で作る。
     生の rgba(0,0,0,...) を書くと、インディゴの面の上でだけ濁って見える。

     ※ 旧「計器・図面」トーンの --grid-line / --grid-size / --tick は廃止した。
       コーナートンボと方眼はテクニカルな声そのものだったため、
       角丸（--radius-*）と傾き（--tilt-*）に置き換えている。
       --tick-w だけはヘアライン幅として全域で参照されているので残す。 */
  --tick-w: 1px; /* ヘアライン幅。罫線の基準値として引き続き使う */

  /* 角丸。雑誌のスクラップ／プリントの手触りを出す最大の要素。
     写真とカードは -lg、チップとボタンは -pill を基本にする。 */
  --radius-lg: 20px;
  --radius-md: 12px;
  --radius-sm: 8px;
  --radius-pill: 999px;

  /* ※ 写真の傾き（--tilt-a / --tilt-b と .frame--tilt-*）は一度入れたが
       不採用になったので撤去した。角丸だけで見せる。
       復活させる場合は 3deg を上限にすること（それ以上は隣のカードと
       ぶつかる。幅200px・高さ300pxの箱を1.8度回すと四隅は3〜5pxはみ出す）。 */

  /* 写真の上に白い要素を置くときの影。黒ではなく最濃インディゴで落とす。 */
  --shadow-text: 0 1px 3px rgba(var(--c-ink-rgb), 0.7),
    0 2px 18px rgba(var(--c-ink-rgb), 0.5);

  /* --- Typography ---
     サイト全体のフォントは Zen Kaku Gothic New を基準にする。
     --font-en は「欧文見出し・数値」用。書体は同じだが字間（--ls-en）を併せて当てる前提。
     フォールバックはセリフではなくサンセリフで揃える（読み込み失敗時に印象が変わらないよう） */
  --font-jp: "Zen Kaku Gothic New", "Hiragino Sans",
    "Hiragino Kaku Gothic ProN", "Yu Gothic Medium", "Yu Gothic", "Noto Sans JP",
    "Meiryo", sans-serif;
  --font-en: "Zen Kaku Gothic New", "Helvetica Neue", Arial, sans-serif;
  /* トップのヒーローのキャッチコピー専用（WordPress 版と同じ Noto Sans JP 500/700） */
  --font-hero: "Noto Sans JP", "Zen Kaku Gothic New", sans-serif;

  /* --- ディスプレイ書体（Rubik Mono One）---
     連番・号数などの「見せる数字」専用（.masthead__issue / .numeral）。
     どちらも2〜4文字なので font-size 指定のままで収まる。
     ※ ウェイトは 400 のみ。font-weight を書いても効かない。 */
  --font-display: "Rubik Mono One", "Arial Black", "Helvetica Neue", Arial,
    sans-serif;
  --ls-display: 0; /* 等幅なので字間は足さない。足すと字送りが崩れる */

  /* --- 欧文見出し書体（Anton）---
     セクション見出し（.sec-title__en）と下層ページのヒーロー見出し
     （.hero-panel__en）専用。素のテキストで組み、飾りは付けない。
     縦に細長いコンデンス書体なので、"PERFORMANCE"（11字）でも
     器（--site-max 500px）に収まる。
     ※ ウェイトは 400 のみ。
     ※ ギリシャ文字を持たない。CRAFREE α の α は後続の Impact 等で描かれる。 */
  --font-heading: "Anton", Impact, "Arial Narrow", sans-serif;

  /* 見出しの大きさは font-size ではなく「大文字の高さ」で持つ。
     Anton のキャップハイトは 0.86em（実測）なので、
     components.css 側で font-size = --en-cap / 0.86 に換算している。 */
  --en-cap: clamp(2.25rem, 0.9rem + 8vw, 3.25rem);
  --en-fill: var(--c-charcoal); /* 字の色 */

  /* --- ラベル書体 ---
     旧 --font-mono（JetBrains Mono）の置き換え。
     等幅は「計器盤の声」そのものだったので全廃し、本文と同じ Zen Kaku を
     大字間・大文字で使う。雑誌のキャプション見出しの声になる。
     ※ --font-mono / --ls-mono は廃止トークン。参照が残っていたら --font-label
       / --ls-label に読み替えること（残すと未定義変数で font が継承に化ける）。 */
  --font-label: "Zen Kaku Gothic New", "Hiragino Sans", "Yu Gothic Medium",
    "Noto Sans JP", sans-serif;
  --ls-label: 0.18em; /* ラベルの字間。等幅を失った分を字間で補う */

  /* セリフ。レールのカード見出しに加えて、写真キャプションと
     「( 01 )」形式の連番にも展開した（GLOBAL WORK 型の手触り担当）。 */
  --font-serif: "Marcellus", "Times New Roman", serif;

  /* 流動タイポ : 375px → 1600px で滑らかに変化 */
  --fs-h1: clamp(1.75rem, 1.2rem + 2.2vw, 3rem);
  --fs-h2: clamp(1.5rem, 1.15rem + 1.5vw, 2.25rem);
  --fs-h3: clamp(1.125rem, 1rem + 0.5vw, 1.375rem);
  --fs-lead: clamp(0.9375rem, 0.88rem + 0.3vw, 1.0625rem);
  --fs-body: clamp(0.875rem, 0.84rem + 0.18vw, 0.9375rem);
  --fs-small: 0.8125rem;
  --fs-micro: 0.6875rem;

  --lh-normal: 1.7;
  --lh-loose: 2;

  --ls-en: 0.14em; /* 欧文見出しの字間 */
  --ls-jp: 0.06em;

  /* --- Space（8pxベース） --- */
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.5rem;
  --sp-6: 2rem;
  --sp-7: 3rem;
  --sp-8: 4rem;
  --sp-9: 6rem;
  --sp-section: clamp(3.5rem, 2rem + 6vw, 7rem);
  --sp-gutter: clamp(1.25rem, 0.6rem + 2.6vw, 3rem);

  /* --- Layout --- */
  --site-max: 500px; /* サイト本体の最大幅。この幅の1カラムに固定し、中央に表示する */
  --header-h: 72px;
  --actionbar-h: 60px;
  /* PC時、左右の余白に置くレールの幅。
     余白の広さに応じて伸びるが、ブレークポイント(1180px)でも
     余白からはみ出さない下限と、広い画面で間延びしない上限を持たせる。 */
  --pc-rail-w: clamp(260px, 22vw, 340px);

  /* --- Motion --- */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-1: 0.2s;
  --dur-2: 0.4s;
  --dur-3: 0.8s;

  /* --- Elevation --- */
  --shadow-2: 0 4px 12px rgba(var(--c-ink-rgb), 0.08), 0 12px 32px rgba(var(--c-ink-rgb), 0.08);

  /* --- 重なり順 ---
     .site-frame には z-index を付けないこと。
     付けると本文枠が stacking context になり、下の値が「枠の中での順番」に
     閉じてしまう。実際 --z-frame:80 を置いていたときは、本文枠が
     action-bar(70) より手前に来て、下部固定CTAが最後まで見えなかった。 */
  --z-header: 60;
  --z-actionbar: 70;
  --z-drawer: 90;
  --z-modal: 95;
  --z-loader: 100;
}

/* --------------------------------------------------------------------------
   商品ページの色づけ
   商品ページ（kajitoru / crafree / crafree-alpha / greenbell）は
   <body data-product="..."> を持つ。ここで4色を1組の意味トークンに束ね、
   ページ側は --product / --product-ink / --product-on / --product-grad の
   4つだけを見るようにしておく。商品を増やすときはこのブロックに1つ足す。

   ★ --product-grad は「面の塗り」なので background に、
     --product は「色」なので color / border に使うこと。
     グラデーションは color 値ではないので border-color には入らない。
   -------------------------------------------------------------------------- */
[data-product] {
  --product-grad: var(--product);
}

[data-product="kajitoru"] {
  --product: var(--c-kajitoru);
  --product-ink: var(--c-kajitoru-ink);
  --product-on: var(--c-kajitoru-on);
}

[data-product="crafree"] {
  --product: var(--c-crafree);
  --product-ink: var(--c-crafree-ink);
  --product-on: var(--c-crafree-on);
}

[data-product="crafree-alpha"] {
  --product: var(--c-alpha);
  --product-ink: var(--c-alpha-ink);
  --product-on: var(--c-alpha-on);
  --product-grad: var(--g-alpha);
}

[data-product="greenbell"] {
  --product: var(--c-greenbell);
  --product-ink: var(--c-greenbell-ink);
  --product-on: var(--c-greenbell-on);
}

/* 商品ページでは見出しの字も商品色にする。 */
[data-product] {
  --en-fill: var(--product-ink);
}

/* ドロワー・プラン切替タブなど「4商品が並ぶ場所」用。
   body の data-product に関係なく、その項目自身の色を持たせる。 */
.is-kajitoru {
  --product: var(--c-kajitoru);
  --product-ink: var(--c-kajitoru-ink);
  --product-on: var(--c-kajitoru-on);
  --product-grad: var(--c-kajitoru);
}

.is-crafree {
  --product: var(--c-crafree);
  --product-ink: var(--c-crafree-ink);
  --product-on: var(--c-crafree-on);
  --product-grad: var(--c-crafree);
}

.is-crafree-alpha {
  --product: var(--c-alpha);
  --product-ink: var(--c-alpha-ink);
  --product-on: var(--c-alpha-on);
  --product-grad: var(--g-alpha);
}

.is-greenbell {
  --product: var(--c-greenbell);
  --product-ink: var(--c-greenbell-ink);
  --product-on: var(--c-greenbell-on);
  --product-grad: var(--c-greenbell);
}

/* --------------------------------------------------------------------------
   Reset
   -------------------------------------------------------------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* ドロワーを開いた瞬間にスクロールバーが消えて
     レイアウトが横にずれるのを防ぐ */
  scrollbar-gutter: stable;
  /* 固定ヘッダー分だけアンカー位置をずらす */
  scroll-padding-top: calc(var(--header-h) + 16px);
  /* .site-frame（幅500px）の外側、PC閲覧時に見える背景。
     design01 に合わせてインディゴのベタ塗りから淡色に反転。
     この1行を変えると PC余白（.pc-rail）の文字色も全部反転が必要になる。 */
  background: var(--c-rail-bg);
}

/* スマホ特化型レイアウト本体は .site-frame（layout.css）が担う。
   body 自体は無指定のビューポート＝ position:fixed の pc-rail / action-bar が
   ブラウザ全幅を基準にできるようにしておく。 */
body {
  /* 面の色は --bg-body（= --c-paper）に一本化する。
     ここに16進を直書きするとトークンと二重管理になり、
     実際 --c-paper だけ差し替えたときに body の地が取り残されていた。 */
  background-color: var(--bg-body);
  font-family: var(--font-jp);
  font-size: var(--fs-body);
  font-weight: 400;
  line-height: var(--lh-normal);
  letter-spacing: var(--ls-jp);
  color: var(--text-main);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: "palt" 1; /* 和文の詰め */
  overflow-x: hidden;
}

/* ドロワー表示中のスクロールロック。
   body{overflow:hidden} だけだと文書の scrollHeight が潰れてスクロール位置が
   0 にクランプされる（＝開いた瞬間トップに飛ぶ）ため、position:fixed で
   その場に固定し、top に退避したスクロール量を JS 側から入れる。 */
body.is-locked {
  position: fixed;
  inset-inline: 0;
  width: 100%;
  overflow: hidden;
}

img,
picture,
video,
svg {
  display: block;
  max-width: 100%;
  height: auto;
}

/* コンポーネント側の display 指定に負けないようにする
   （.works-card { display:block } などが [hidden] を打ち消すため） */
[hidden] {
  display: none !important;
}

a {
  color: inherit;
  text-decoration: none;
  transition: color var(--dur-1) var(--ease), opacity var(--dur-1) var(--ease);
}

button {
  font: inherit;
  color: inherit;
  background: none;
  border: none;
  cursor: pointer;
}

ul,
ol {
  list-style: none;
}

table {
  border-collapse: collapse;
  width: 100%;
}

th,
td {
  text-align: left;
  vertical-align: top;
}

address {
  font-style: normal;
}

/* フォーカスリング : キーボード操作時のみ表示 */
:focus-visible {
  outline: 2px solid var(--c-accent);
  outline-offset: 3px;
  border-radius: 2px;
}

::selection {
  background: var(--c-ink);
  color: var(--c-white);
}

/* --------------------------------------------------------------------------
   Typography helpers
   -------------------------------------------------------------------------- */
.u-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* 本文へスキップ（キーボード操作時のみ出現）。
   ヘッダーが fixed で常に前面にあるため、これが無いと毎ページ全ナビを通過することになる。 */
.skip-link {
  position: absolute;
  top: var(--sp-2);
  left: var(--sp-2);
  z-index: calc(var(--z-loader) + 1);
  padding: var(--sp-3) var(--sp-4);
  background: var(--c-ink);
  color: var(--c-white);
  font-size: var(--fs-small);
  letter-spacing: 0.08em;
  transform: translateY(-200%);
}

.skip-link:focus-visible {
  transform: none;
}

/* JavaScript 無効時のフォールバックナビ。
   burger はスクリプトが無いと無反応なので、代わりに素のリンク一覧を出す。 */
.nojs-nav {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2) var(--sp-4);
  padding: calc(var(--header-h) + var(--sp-3)) var(--sp-gutter) var(--sp-3);
  background: var(--c-charcoal);
  color: var(--text-invert);
  font-size: var(--fs-small);
  letter-spacing: 0.08em;
}

.nojs-nav a {
  border-bottom: 1px solid var(--line-invert);
}

/* --------------------------------------------------------------------------
   連番の共通表現
   旧版は -webkit-text-stroke による「輪郭だけの数字」だったが、
   輪郭は図面の声だったので廃止し、ディスプレイ書体のベタ塗りに
   変更した（.numeral）。
   ベタ塗りになったことで、stroke 非対応環境で数字が消える問題
   （color:transparent だけが残る）そのものが無くなり、@supports の
   フォールバック分岐も不要になっている。
   実体は components.css の .numeral 側にある。
   -------------------------------------------------------------------------- */

/* --------------------------------------------------------------------------
   Scroll reveal
   JS が .is-inview を付与。JS 無効時も必ず読めるよう no-js で無効化する。
   -------------------------------------------------------------------------- */
.js [data-reveal] {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity var(--dur-3) var(--ease-out),
    transform var(--dur-3) var(--ease-out);
  transition-delay: var(--reveal-delay, 0s);
}

.js [data-reveal].is-inview {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  .js [data-reveal] {
    opacity: 1;
    transform: none;
  }
}

/* --------------------------------------------------------------------------
   Print
   -------------------------------------------------------------------------- */
@media print {
  .site-header,
  .drawer,
  .drawer-scrim,
  .action-bar,
  .hero-panel,
  .loader {
    display: none !important;
  }

  body {
    background: #fff;
  }
}