/* =========================================================
   ALLOY  style.css（10/10にデザインを見直し）

   考え方：「色は塗りだけ、区切りは細い線、字体で見せる」
   ・AIで作ったサイトによくある物（光るにじみ、グラデーション文字、
     角の丸い箱が浮く動き）はやめた
   ・参考にしたのは、Goodpatch・SmartHR・ミツカルの「仕組み」だけ
     （白い地と広い余白／日本語の字体を丁寧に整える／色は少しだけ／印は1つ）
   ========================================================= */

/* 色と字体はここで名前をつけて、下ではその名前で使う。
   変えたくなったら、ここだけ直せば全部変わる */
:root {
  --ink: #1f2933;         /* 鉄：文字と、濃い地の色 */
  --ink-deep: #151b21;    /* 鉄（もっと濃い）：フッター */
  --copper: #b8733f;      /* 銅：強調の色。使うのは少しだけ */
  --copper-dark: #8f5528; /* 銅（濃い）：明るい地の上の、小さい文字用（薄い銅だと読みにくい） */
  --copper-light: #d9a273;/* 銅（明るい）：濃い地の上の文字用 */
  --steel: #8a9aa8;       /* 鋼 */
  --paper: #f7f6f2;       /* 地の色（真っ白より少し温かい） */
  --paper-2: #efede7;     /* 1つおきのセクションの地 */
  --line: #d8d4cb;        /* 細い区切り線 */
  --text-sub: #3a434d;    /* 補足の文字。明朝は線が細いので濃くしている（10/11に2回。#5b6570 → #4b5560 → 今の色。FRIDAY：スマホで読みやすく） */
  --green: #2f7a55;       /* 「受付中」「公開中」の点 */
  --header-h: 109px;      /* 上に貼りつくヘッダーの高さ（スマホ）。画面に貼りつく演出が、ヘッダーのすぐ下で止まるように使う。パソコンは下の @media で 66px */

  /* 本文の字体（明朝）。10/11に、ゴシックから変えた（全部ゴシックだと、AIで作ったサイトっぽく見えたため）。
     しっぽり明朝の「B1」は、小さい文字でも読めるように線を太くした種類。読み込めない時は、スマホの明朝を使う */
  --font-body: "Shippori Mincho B1", "Hiragino Mincho ProN", "Yu Mincho", serif;
  /* 日本語のゴシック。大見出し、ボタン、目次など「はっきり見せたい所」だけに使う。
     10/11に Zen Kaku Gothic New から IBM Plex Sans JP に変えた（蓮：「AI感が強い。はっきりした字で」）。
     線がまっすぐで硬く、金属（ALLOY）の感じに合う。読み込めない時は、スマホに入っている字体を使う */
  --font-ja: "IBM Plex Sans JP", "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic", sans-serif;
  /* 英語と数字の字体。ロゴの文字と形が近い */
  --font-en: "Jost", "Helvetica Neue", Arial, sans-serif;
}

/* 全要素の余白計算を分かりやすくする定番設定 */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* ページ内リンクで飛ぶ時に、するっと動かす */
html {
  scroll-behavior: smooth;
}

/* 上に貼りつくヘッダー（ロゴ＋目次）の下に見出しが隠れないよう、飛んだ先を少し下で止める */
section {
  scroll-margin-top: 96px;
}

/* 本文の字体は明朝。
   letter-spacing（文字の間隔）を少し空けると、日本語がゆったり上品に見える。
   500（少し太め）にしているのは、明朝の400は画面だと細く見えるから */
body {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 16px;
  /* 10/11に、行の間と文字の間をもう少し空けた（ゆったり＝上品に見える） */
  line-height: 2;
  letter-spacing: 0.04em; /* 10/11、FRIDAY：スマホで読みやすく少し詰めた（前は 0.06em） */
  color: var(--ink-deep); /* 本文は一番濃い鉄色（10/11、FRIDAY：読みやすく） */
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
}

/* 文字をなぞって選んだ時の色。初期の青ではなく、銅色にする（細かい所まで ALLOY の色にそろえる） */
::selection {
  background: var(--copper);
  color: #fff;
}

/* ゴシックのまま残す所。
   大見出しは迫力を出すため、ボタン・目次・札・リンクは「押せる所」「大事な情報」がはっきり見えるため */
.hero-title,
.page-title,
.header-button,
.button,
.site-nav .nav-page,
.text-link,
.status,
.fact dd,
.member-name {
  font-family: var(--font-ja);
}

/* 見出しは "palt"（文字ごとの幅で詰める設定）で、「、」「。」の後ろの余分なすき間を詰める。
   見出しが締まって見える。本文には使わない（本文は均等な方が読みやすい） */
h1, h2, h3, h4 {
  font-feature-settings: "palt";
  letter-spacing: 0.03em;
  font-weight: 700;
}

/* 日本語の行を「意味のまとまり（文節）」で折り返す。「もっと良くした／い。」のように1文字だけ次の行に落ちるのを防ぐ。
   対応していないブラウザでは、今まで通りの折り返しになるだけで、壊れはしない */
h1, h2, h3, h4,
p,
li {
  word-break: auto-phrase;
  text-wrap: pretty;
}

/* 強調の色。トップの見出しの「事業」だけ */
.hl {
  color: var(--copper);
}

/* ===== ヘッダー =====
   白い地に細い線。position: sticky で、スクロールしても上に貼りついたままにする */
.site-header {
  position: sticky;
  top: 0;
  z-index: 10;
  background: var(--paper);
  border-bottom: 1px solid var(--line);
}

/* 読んだ量を示す銅色の線（10/11）。ヘッダーの下に、スクロールした分だけ左から伸びる。
   JavaScriptを使わず、CSSの「スクロールに合わせた動き」で作る。対応していないブラウザでは出ないだけ */
@supports (animation-timeline: scroll()) {
  .site-header::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -1px;
    width: 100%;
    height: 2px;
    background: var(--copper);
    transform-origin: left center;
    animation: read-progress linear both;
    animation-timeline: scroll(root);
  }
}

@keyframes read-progress {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}

.header-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 20px;
}

/* ロゴ：大きさだけ決める。width: auto で、縦横の比率はロゴのまま（形を崩さない） */
.logo {
  display: block;
  line-height: 0;
}

.logo img {
  display: block;
  height: 34px;
  width: auto;
}

/* 角は少しだけ丸める（2px）。丸すぎるとやわらかく、AIっぽく見える */
.header-button {
  position: relative;
  overflow: hidden;
  isolation: isolate; /* 押した時の波（.ripple）を、文字の後ろに出すため */
  color: #fff;
  background: var(--ink);
  font-size: 0.85rem;
  font-weight: 500; /* 下のボタンと同じく、細く・文字の間を広く（10/12） */
  letter-spacing: 0.14em;
  font-feature-settings: "palt";
  text-decoration: none;
  padding: 8px 16px;
  border-radius: 2px;
  transition: background 0.3s, transform 0.2s;
}

.header-button:hover {
  background: var(--copper);
}

.header-button:active {
  transform: scale(0.95);
}

/* 目次：入りきらない分は横にスライドできる（overflow-x: auto）。
   white-space: nowrap で、項目の途中で折り返さないようにする */
.site-nav {
  display: flex;
  gap: 4px;
  overflow-x: auto;
  white-space: nowrap;
  padding: 0 12px 10px;
  scrollbar-width: none;
}

.site-nav a {
  color: var(--ink);
  font-family: var(--font-en), var(--font-ja);
  font-weight: 500;
  font-size: 0.85rem;
  letter-spacing: 0.08em;
  text-decoration: none;
  padding: 4px 8px;
}

/* マウスを乗せると、下に銅色の線が出る */
.site-nav a:hover {
  box-shadow: inset 0 -2px 0 var(--copper);
}

/* 今いるページの目次には、いつも下線をつける（aria-current="page" がついたリンク） */
.site-nav a[aria-current="page"] {
  box-shadow: inset 0 -2px 0 var(--ink);
}

/* 事業のページへのリンク（Web支援など）。細い枠で囲んで、右端に寄せる（margin-left: auto）。
   ほかの目次は「同じページの中で動く」、これだけは「別のページに移る」ので、見た目で分ける（10/10） */
.site-nav .nav-page {
  margin-left: auto;
  font-family: var(--font-ja);
  font-weight: 500; /* ボタンとそろえて、細く・文字の間を広く（10/12） */
  letter-spacing: 0.14em;
  font-feature-settings: "palt";
  border: 1px solid var(--ink);
  border-radius: 2px;
  padding: 3px 10px;
}

.site-nav .nav-page:hover {
  box-shadow: none;
  border-color: var(--copper);
  color: var(--copper);
}

/* 今そのページにいる時は、枠を鉄色で塗りつぶす */
.site-nav .nav-page[aria-current="page"] {
  box-shadow: none;
  background: var(--ink);
  color: #fff;
}

/* ===== 共通のボタン（10/11に動きを足した） =====
   ・マウスを乗せると、色が左から右へ「流し込まれる」（::before の色の板が伸びる）。離すと、来た方（左）へ戻る
   ・矢印は、右へ少しすべる
   ・押すと少し沈む（--press）
   10/12、蓮：「カーソルが触れた時の動きが不自然」→ 次の3つをやめた。
     マウスの方へ引き寄せる動き（ボタンが逃げたり追いかけたりして、ふちでガタガタ揺れた）、
     離した時に色が右へ抜ける動き（向きが急に変わって、途中で跳んだ）、矢印が消えて戻る動き
   ・押した所から、銅色の波が広がる（js/main.js が .ripple を足す）
   流し込む色は --btn-fill で決める。ボタンの種類ごとに、下で色だけ変えている */
.button {
  --btn-fill: var(--copper);
  --press: 1;
  position: relative;
  overflow: hidden;
  isolation: isolate; /* ::before の色の板を、ボタンの文字の後ろ・ボタンの地の前に置くため */
  display: inline-flex;
  align-items: center;
  gap: 14px;
  background: var(--ink);
  color: #fff;
  /* 文字（10/12、蓮：「もう少しかっこよくシュッと」）：太さを700から500に細く、少し小さく、文字の間を広く。
     palt で字ごとの幅に詰めてから、letter-spacing で均等に空ける → 字がそろって、締まって見える */
  font-weight: 500;
  font-size: 0.92rem;
  letter-spacing: 0.16em;
  font-feature-settings: "palt";
  text-decoration: none;
  padding: 16px 22px; /* スマホ。2つ並べても1行に収まる幅。パソコンは下の @media で広げる */
  border: 1px solid var(--ink);
  border-radius: 2px;
  transform: scale(var(--press));
  /* 色の板（下の ::before）と同じ速さ・同じ動き方で、文字と枠の色も変える。ずれると、ちぐはぐに見える */
  transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1), color 0.45s cubic-bezier(0.22, 1, 0.36, 1), border-color 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}

/* 流し込む色の板。ふだんは幅0で左によせておき、乗せると左から伸びる。離すと左へ縮む。
   伸び始めが速く、最後はゆっくり止まる動き（0.22, 1, 0.36, 1）。マウスを少しかすめただけでも、途中から自然に戻る */
.button::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--btn-fill);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}

.button:hover::before {
  transform: scaleX(1);
}

.button:hover {
  border-color: var(--btn-fill);
}

.button:active {
  --press: 0.96;
}

/* 矢印はCSSで足す（HTMLに書かなくてよい）。乗せると右へ5pxすべる（inline-block でないと transform が効かない） */
.button::after {
  content: "→";
  display: inline-block;
  font-family: var(--font-en);
  font-weight: 300; /* 矢印も細く。文字と太さをそろえる */
  letter-spacing: 0;
  transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}

.button:hover::after {
  transform: translateX(5px);
}

/* 押した所から広がる銅色の波（js/main.js が span.ripple を足して、終わったら消す） */
.ripple {
  position: absolute;
  z-index: -1;
  width: 12px;
  height: 12px;
  margin: -6px 0 0 -6px;
  border-radius: 50%;
  background: var(--copper-light);
  opacity: 0.55;
  pointer-events: none;
  animation: ripple 0.6s ease-out forwards;
}

@keyframes ripple {
  to { transform: scale(40); opacity: 0; }
}

/* 枠線だけのボタン。2つ並べた時に、どちらが主役か分かるようにする */
.button-ghost {
  --btn-fill: var(--ink);
  background: transparent;
  color: var(--ink);
}

.button-ghost:hover {
  color: #fff;
}

/* ===== 開いた瞬間の演出（トップだけ。10/12） =====
   ロゴの「A」で、ALLOY（合金）の意味を見せる：
   0秒〜    銅の線（1人目）が左下から、鋼の線（2人目）が右下から、だんだん速くなりながら上がってくる
   0.8秒    2本がてっぺんでぶつかって合わさり、重なった所（合金）がパッと出る。マーク全体が少し跳ねる
   1.2秒〜  幕が、下のふちの銅色の線ごと上へ抜けて、トップが見える（全部で約1.9秒）
   ・見せるのは、1回の訪問で最初の1回だけ（index.html の <head> の小さなスクリプトが intro-play をつける）
   ・「動きを減らす」設定の人と、JavaScriptが動かない時は、出さない（intro-play がつかないので display: none のまま）
   ・幕を押すと、すぐ上がる（js/main.js）
   ・形と色はロゴのまま（暗い地用の色）。大きさと位置だけ動かしている */
.intro {
  display: none;
}

.intro-play .intro {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  place-items: center;
  background: var(--ink-deep);
  cursor: pointer;
  animation: intro-lift 0.75s cubic-bezier(0.76, 0, 0.24, 1) 1.2s forwards;
}

/* 幕の下のふちの銅色の線。幕と一緒に上がっていく */
.intro-play .intro::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 3px;
  background: var(--copper);
}

.intro svg {
  width: clamp(150px, 22vw, 240px);
  height: auto;
  overflow: visible;
  /* 2本が合わさった瞬間（0.8秒）に、マーク全体がガツンと少し大きくなって戻る */
  animation: mark-hit 0.45s cubic-bezier(0.22, 1, 0.36, 1) 0.8s both;
}

.intro .intro-cu {
  animation: leg-cu 0.75s cubic-bezier(0.7, 0, 0.84, 0) 0.05s both;
}

.intro .intro-st {
  animation: leg-st 0.75s cubic-bezier(0.7, 0, 0.84, 0) 0.05s both;
}

/* 重なった所は、てっぺん（100, 40）を中心に、0から少しはみ出して戻る（パッと出る感じ） */
.intro .core {
  transform-box: view-box;
  transform-origin: 100px 40px;
  animation: core-pop 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) 0.78s both;
}

/* 押してすぐ上げる時（js/main.js が intro-skip をつける） */
.intro-skip .intro {
  animation: intro-lift 0.45s cubic-bezier(0.76, 0, 0.24, 1) forwards;
}

@keyframes leg-cu {
  from { transform: translate(-80px, 110px); opacity: 0; }
  to { transform: translate(0, 0); opacity: 1; }
}

@keyframes leg-st {
  from { transform: translate(80px, 110px); opacity: 0; }
  to { transform: translate(0, 0); opacity: 1; }
}

@keyframes mark-hit {
  0% { transform: scale(1); }
  30% { transform: scale(1.08); }
  100% { transform: scale(1); }
}

@keyframes core-pop {
  from { transform: scale(0); }
  to { transform: scale(1); }
}

@keyframes intro-lift {
  to { transform: translateY(-100%); visibility: hidden; }
}

/* ===== 小さな英語の文字（トップの1行目） ===== */
.eyebrow {
  font-family: var(--font-en);
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  color: var(--copper-dark);
}

/* ===== トップ =====
   10/11に「いかつく」した：濃い地、画面いっぱいの高さ、大きな見出し。
   ロゴの「A」のマークは、濃い地だと重なった所（鉄色）が消えて形が変わって見えるので、ここには置かない
   （ヘッダー・私たち・フッターに出ている） */
.hero {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  /* 10/12に、上に「最初の1画面」ができたので、ここは画面いっぱいの高さにしない */
  padding: 72px 20px 64px;
  background: var(--ink-deep);
  color: #fff;
}

.hero .inner {
  position: relative;
  z-index: 1; /* 背景の写真より前に出す */
  width: 100%;
}

/* ▼ 市が尾の写真を敷いた時（HTMLで class="hero has-photo" にした時）
   ::before に写真を白黒・暗めにして置き、::after で下を濃くして、白い文字を読めるようにする。
   写真はゆっくり（14秒）少しだけ寄っていく。動きを減らす設定の人には動かさない（一番下） */
.hero.has-photo::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url("../images/ichigao.jpg") center / cover no-repeat;
  filter: grayscale(1) contrast(1.15) brightness(0.55);
  animation: hero-zoom 14s ease-out both;
}

.hero.has-photo::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(21, 27, 33, 0.95) 0%, rgba(21, 27, 33, 0.35) 60%, rgba(21, 27, 33, 0.55) 100%);
}

@keyframes hero-zoom {
  from { transform: scale(1.08); }
  to { transform: scale(1); }
}

.hero .eyebrow {
  color: var(--copper-light);
}

/* キャッチコピー「育った街から、世界へ。」（10/12）。このページの主役なので、本文とは段違いに大きく。
   IBM Plex Sans JP は700が一番太い。大きさは画面の幅に合わせて変わる（clamp(一番小さい, 画面幅の◯%, 一番大きい)） */
/* 字体は Zen Old Mincho の900（10/12、蓮：「かっこよく、力強く」。7つ見比べてCに決定）。
   index.html で、キャッチコピーの11文字だけ読みこんでいる。読みこめない時は、ほかのゴシックで出る */
.hero-title {
  font-family: "Zen Old Mincho", var(--font-ja);
  font-size: clamp(2.4rem, 12vw, 3rem); /* 10/12に少し大きく（力強く）。375pxで「育った街から、」が1行に収まる大きさ */
  font-weight: 900;
  line-height: 1.3;
  letter-spacing: 0.02em;
  margin: 0 0 20px;
}

/* 「途中で折り返さないかたまり」。日本語はどの文字の間でも折り返せるので、
   inline-block で囲んで、かたまりの間（読点のあと）でしか折り返さないようにする */
.hero-phrase {
  display: inline-block;
  white-space: nowrap; /* かたまりの中では絶対に折り返さない（下の「、」を詰めた時に、「、」だけ次の行に落ちたため） */
}

/* 「、」のうしろの空きを詰める（10/12）。Zen Old Mincho は palt（字ごとの幅で詰める設定）が効かず、
   「、」が1文字分の幅をとって、パソコンで「育った街から、　世界へ。」と間が空いて見えたため */
.hero-comma {
  /* margin-right をマイナスにする方法は、Safari では「かたまり」の幅が縮まず、効かなかった（10/12）。
     文字の間（letter-spacing）をマイナスにすると、Safari でも Chrome でも詰まる */
  letter-spacing: -0.45em;
}

/* 同じ仕組みを、どこでも使える短い名前で。言葉の途中で折り返してほしくない所を <span class="nb"> で囲む（nb = no break） */
.nb {
  display: inline-block;
}

.hero .hl {
  color: var(--copper-light);
}

/* 画面には出さず、読み上げソフトと検索にだけ伝える文字（よく使われる決まった書き方） */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* 日本語の見出しの下の、英語の一文「Two metals. One alloy.」。
   見出しの英語（CONTACT など）と同じ Jost の細い300。日本語の邪魔をしないよう、小さく、少し暗い色で */
.hero-en {
  font-family: var(--font-en);
  font-size: 1.05rem;
  font-weight: 300;
  letter-spacing: 0.08em;
  color: var(--copper-light);
  margin-bottom: 40px;
}

.hero-lead {
  margin-bottom: 40px;
  color: #dfe3e6;
}

.hero-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

/* 濃い地の上のボタン：主役は白、もう1つは白い枠 */
.hero .button {
  --btn-fill: var(--copper-light);
  background: #fff;
  border-color: #fff;
  color: var(--ink);
}

/* 乗せた時は明るい銅色（オレンジ）に染まる（10/12、蓮：白に染まると、隣の白いボタンと同じに見えて区別がつかない） */
.hero .button-ghost {
  --btn-fill: var(--copper-light);
  background: transparent;
  border-color: rgba(255, 255, 255, 0.6);
  color: #fff;
}

.hero .button-ghost:hover {
  color: var(--ink);
}

/* 数字の帯：上に線を1本。3つを横に並べる */
.facts {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin-top: 56px;
  border-top: 1px solid rgba(255, 255, 255, 0.4);
}

.fact {
  padding-top: 16px;
}

/* 2つ目と3つ目の数字の左に、細い縦線 */
.fact + .fact {
  border-left: 1px solid rgba(255, 255, 255, 0.18);
  padding-left: 12px;
}

.fact dt {
  font-family: var(--font-en);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  color: var(--steel);
}

.fact dd {
  font-size: 0.8rem;
  font-weight: 700;
}

/* 数字は細く大きく。細い数字は、太い数字より落ち着いて、きちんとして見える */
.num {
  font-family: var(--font-en);
  font-size: 1.75rem;
  font-weight: 300;
  line-height: 1.3;
  letter-spacing: 0;
}

/* =========================================================
   10/12 「確変」（蓮：「型を崩してもいいから、見るだけでこいつらやべえ、任せたいとなるように」）
   ・最初の1画面：ロゴの ALLOY の文字を画面いっぱいに。スクロールで文字が飛び散る
   ・巨大な文字の帯：大きな英語2行が、スクロールで逆向きに動く
   （「2人が合金になる」も作ったが、蓮が「いらない」で外した。10/12）
   動きはどれも「スクロールに合わせた動き」（animation-timeline）で作る。
   ・対応していないブラウザ、「動きを減らす」設定の人には、動かない完成形を見せる（画面に貼りつく仕掛けも出さない）
   ・動きのルールは、下の @media (prefers-reduced-motion: no-preference) と @supports の中だけに書く
   ========================================================= */

/* ===== 最初の1画面 ===== */
.stage {
  position: relative;
  background: var(--ink-deep);
  color: #fff;
}

.stage-pin {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: calc(100svh - var(--header-h));
  padding: 48px 20px 72px;
  overflow: hidden;
}

.stage .eyebrow {
  color: var(--copper-light);
}

/* ▼ 市が尾の写真を敷いた時（HTMLで class="stage has-photo"。10/12、蓮が撮った市が尾駅の夕方の写真）
   写真は「画面に貼りつく箱」（.stage-pin）の ::before に置く。白黒・暗めにして、::after で上下を濃くし、白い文字を読めるようにする。
   スマホの縦長の画面では、駅の入口（写真の右寄り）が見えるよう、少し右を中心にする */
.stage.has-photo .stage-pin::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url("../images/ichigao.jpg") 72% center / cover no-repeat;
  filter: grayscale(1) contrast(1.1) brightness(0.5);
}

.stage.has-photo .stage-pin::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(21, 27, 33, 0.55) 0%, rgba(21, 27, 33, 0.2) 45%, rgba(21, 27, 33, 0.85) 100%);
}

/* 文字は写真より前に出す */
.stage.has-photo .stage-pin > * {
  position: relative;
  z-index: 1;
}

.stage.has-photo .stage-scroll {
  position: absolute;
}

.stage-title {
  margin-top: 28px;
}

/* ロゴの文字。画面の幅いっぱい。形はロゴのまま、色は暗い地用の色 */
.wordmark {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
  fill: #f8f7f4;
}

/* 1文字ずつ、自分の真ん中を中心に動かす */
.wm {
  transform-box: fill-box;
  transform-origin: center;
}

.stage-sub {
  display: block;
  margin-top: 24px;
  font-family: var(--font-ja);
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  color: #d6dce1;
}

/* 下の「SCROLL」と、下へ流れる細い線 */
.stage-scroll {
  position: absolute;
  left: 20px;
  bottom: 20px;
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-en);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.3em;
  color: var(--steel);
}

.stage-scroll::after {
  content: "";
  width: 48px;
  height: 1px;
  background: linear-gradient(90deg, var(--copper-light) 50%, transparent 50%) 0 0 / 200% 100%;
}

/* ===== 巨大な文字の帯 ===== */
.kinetic {
  overflow: hidden;
  background: var(--ink-deep);
  padding: 32px 0 40px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.kinetic-row {
  width: max-content;
  font-family: var(--font-en);
  font-size: clamp(56px, 13vw, 200px);
  font-weight: 500;
  line-height: 1.05;
  letter-spacing: -0.01em;
  white-space: nowrap;
  word-break: normal;
}

/* 上の行は線だけ（中が透けた文字）、下の行は銅色 */
.kinetic-1 {
  color: transparent;
  -webkit-text-stroke: 1px rgba(255, 255, 255, 0.7);
}

.kinetic-2 {
  color: var(--copper);
  transform: translateX(-30%);
}

/* ===== マウスについてくる銅色の輪（パソコンだけ。js/main.js が .cursor を作る） ===== */
.cursor {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 200;
  width: 36px;
  height: 36px;
  margin: -18px 0 0 -18px;
  border: 1.5px solid var(--copper);
  border-radius: 50%;
  pointer-events: none;
  transition: width 0.25s, height 0.25s, margin 0.25s, background 0.25s, opacity 0.25s;
}

/* ボタンやリンクの上では、輪が大きくなって、うすく銅色に塗られる */
.cursor.is-link {
  width: 64px;
  height: 64px;
  margin: -32px 0 0 -32px;
  background: rgba(184, 115, 63, 0.18);
}

.cursor.is-out {
  opacity: 0;
}

/* ボタンの上では、輪を消す（10/12）。ボタン自身が色で反応するので、輪が重なると、ごちゃっとして不自然に見えた */
.cursor.is-button {
  opacity: 0;
  width: 20px;
  height: 20px;
  margin: -10px 0 0 -10px;
}

/* ===== ここから下が「動き」。動きを減らす設定でない人だけ ===== */
@media (prefers-reduced-motion: no-preference) {
  /* SCROLL の横の線が、下へ流れ続ける */
  .stage-scroll::after {
    animation: scroll-hint 1.6s linear infinite;
  }

  /* 文字の帯：スクロールの動きが使えないブラウザでは、ゆっくり流れ続ける（逆向き） */
  .kinetic-1 {
    animation: kinetic-left 40s linear infinite;
  }

  .kinetic-2 {
    animation: kinetic-left 40s linear infinite reverse;
  }

  @supports (animation-timeline: scroll()) {
    /* --- 最初の1画面：画面に貼りついたまま、スクロールで文字が飛び散る --- */
    .stage {
      height: calc(170svh - var(--header-h));
    }

    .stage-pin {
      position: sticky;
      top: var(--header-h);
      height: calc(100svh - var(--header-h));
    }

    /* 文字は、ページの一番上から 65svh スクロールする間に飛び散る */
    .wm {
      animation: wm-burst linear both;
      animation-timeline: scroll(root);
      animation-range: 0 65svh;
    }

    /* 1文字ずつ、飛ぶ向き・距離・回転を変える（真ん中から外へ） */
    .wm-a { --dx: -170%; --dy: 40%; --r: -24deg; }
    .wm-l1 { --dx: -120%; --dy: -70%; --r: 16deg; }
    .wm-l2 { --dx: -30%; --dy: 90%; --r: -10deg; }
    .wm-o { --dx: 80%; --dy: -60%; --r: 30deg; }
    .wm-y { --dx: 170%; --dy: 50%; --r: 22deg; }

    .stage .eyebrow,
    .stage-sub,
    .stage-scroll {
      animation: stage-fade linear both;
      animation-timeline: scroll(root);
      animation-range: 0 35svh;
    }

    /* 市が尾の写真：文字が飛び散るのと同時に、写真へゆっくり近づいていく（街に飛びこむ感じ） */
    .stage.has-photo .stage-pin::before {
      animation: stage-photo-in linear both;
      animation-timeline: scroll(root);
      animation-range: 0 65svh;
    }

    /* --- 文字の帯：スクロールした分だけ、逆向きに動く --- */
    .kinetic {
      view-timeline-name: --kinetic;
    }

    .kinetic-1 {
      animation: kinetic-scroll-left linear both;
      animation-timeline: --kinetic;
    }

    .kinetic-2 {
      animation: kinetic-scroll-right linear both;
      animation-timeline: --kinetic;
    }

  }
}

@keyframes scroll-hint {
  to { background-position: -100% 0; }
}

@keyframes kinetic-left {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

@keyframes kinetic-scroll-left {
  from { transform: translateX(5%); }
  to { transform: translateX(-40%); }
}

@keyframes kinetic-scroll-right {
  from { transform: translateX(-40%); }
  to { transform: translateX(5%); }
}

@keyframes wm-burst {
  to {
    transform: translate(var(--dx), var(--dy)) rotate(var(--r)) scale(1.3);
    opacity: 0;
  }
}

@keyframes stage-photo-in {
  to { transform: scale(1.18); }
}

@keyframes stage-fade {
  to { opacity: 0; transform: translateY(-24px); }
}

/* ===== 事業のページの頭（web.html など。10/10） =====
   トップへ戻るリンク → 小さな英語 → ページの名前 → 一言。下に細い線を引いて、中身と区切る */
.page-head {
  padding: 40px 20px 64px;
  border-bottom: 1px solid var(--line);
}

.back-link {
  display: inline-block;
  margin-bottom: 32px;
  color: var(--text-sub);
  font-size: 0.85rem;
  font-weight: 700;
  text-decoration: none;
}

.back-link:hover {
  color: var(--copper);
}

.page-title {
  font-size: 2.4rem;
  font-weight: 700;
  line-height: 1.3;
  margin: 10px 0 12px;
}

.page-lead {
  color: var(--text-sub);
}

/* ===== セクション共通 =====
   10/11に余白を広げた（72px → 104px）。詰まっていると安く見え、空いていると自信があるように見える */
.section {
  padding: 104px 20px;
}

/* 1つおきに地の色を変えて、区切りを分かりやすくする */
.section-tinted {
  background: var(--paper-2);
}

/* 濃い地のセクション。光やグラデーションは使わず、鉄色1色で塗る */
.section-dark {
  background: var(--ink);
  color: #e9ecee;
}

/* ===== 背景に写真を敷くセクション（10/11） =====
   トップと同じ扱い：写真を白黒・暗めにして ::before に置き、::after で下を濃くして、白い文字を読めるようにする。
   写真は bg-◯◯ の class で決める（下の3つ）。新しく足す時は、HTMLの section に
   「section-dark section-photo bg-◯◯」をつけて、ここに .bg-◯◯::before を1つ足す。
   写真はフリー素材（Unsplash。無料・商用OK・クレジット不要）か、2人が撮った本物だけ */
.section-photo {
  position: relative;
  /* はみ出した写真を切る。hidden だと、このセクションが「スクロールする箱」扱いになり、
     下の「スクロールに合わせた動き」が、ページではなくこの箱を見てしまって動かなかった（10/11）。
     clip は切るだけで箱にならない。clip を知らない古いブラウザは、上の hidden を使う */
  overflow: hidden;
  overflow: clip;
  background: var(--ink-deep);
}

.section-photo::before {
  content: "";
  position: absolute;
  inset: 0;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  filter: grayscale(1) contrast(1.1) brightness(0.5);
}

.section-photo::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(21, 27, 33, 0.55), rgba(21, 27, 33, 0.85));
}

/* 中身は写真より前に出す */
.section-photo .inner {
  position: relative;
  z-index: 1;
}

.bg-why::before {
  background-image: url("../images/bg-why.jpg");
}

.bg-journey::before {
  background-image: url("../images/bg-journey.jpg");
}

/* 連絡先の写真には実在のお店の看板が写っているので、ぼかして読めないようにする。
   ぼかすと端が白っぽくにじむので、少し大きくして（scale）端を外に出す */
.bg-contact::before {
  background-image: url("../images/bg-contact.jpg");
  filter: grayscale(1) contrast(1.1) brightness(0.45) blur(4px);
  transform: scale(1.08);
}

/* スクロールに合わせて、写真が少しだけ遅れて動く（奥行きが出る）。
   CSSの「スクロールに合わせた動き」で作るので、対応していないブラウザでは止まったままになるだけ。
   動く分だけ写真がはみ出すよう、上下に12%ずつ大きくしておく */
@supports (animation-timeline: view()) {
  /* 「画面のどこまで来たか」はセクション自身で測り、--photo という名前をつけて写真（::before）に渡す。
     ::before に直接 view() をつけると、Chrome では測ってくれず動かなかった（10/11） */
  .section-photo {
    view-timeline-name: --photo;
  }

  .section-photo::before {
    inset: -12% 0;
    animation: photo-drift linear both;
    animation-timeline: --photo;
  }

  .bg-contact::before {
    animation-name: photo-drift-blur;
  }
}

@keyframes photo-drift {
  from { transform: translateY(-8%); }
  to { transform: translateY(8%); }
}

/* 連絡先は scale も一緒に保つ（transform は1つにまとめて書かないと、上の scale が消える） */
@keyframes photo-drift-blur {
  from { transform: translateY(-8%) scale(1.08); }
  to { transform: translateY(8%) scale(1.08); }
}

/* 写真の上の「準備中」の点線と文字を、暗い地でも見えるようにする */
.section-dark .why-text.placeholder {
  color: var(--steel);
  border-left-color: rgba(255, 255, 255, 0.3);
}

/* 中身が横に広がりすぎないように、幅の上限を決めて真ん中に置く */
.inner {
  max-width: 960px;
  margin: 0 auto;
}

/* 見出しの前の番号（01、02…）を、CSSが自動で数える */
main {
  counter-reset: section;
}

/* 見出し：番号と線 → 大きな英語 → 小さな日本語。
   「英語を大きく、日本語を小さく」は2人で決めた「A」の形 */
.section-title {
  counter-increment: section;
  margin-bottom: 56px;
}

/* 番号の横に、細い線を右端まで引く */
.section-title::before {
  content: counter(section, decimal-leading-zero);
  display: flex;
  align-items: center;
  gap: 14px;
  font-family: var(--font-en);
  font-size: 0.85rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  color: var(--copper-dark);
  margin-bottom: 28px;
  /* 線は「番号の右の余白」に背景として描く。
     right から引くと右→左に伸びてしまうので、番号の幅（2.6em）だけ右にずらした left から引く */
  background: linear-gradient(var(--line), var(--line)) no-repeat 2.6em center / calc(100% - 2.6em) 1px;
  transition: background-size 1.4s cubic-bezier(0.22, 1, 0.36, 1);
}

/* 線を引く動き（10/11）。JavaScriptが動く時だけ、最初は線の長さを0にしておき、
   画面に入って is-in がつくと、左から右へ伸びる（js/main.js） */
.js .section-title:not(.is-in)::before {
  background-size: 0 1px;
}

/* 英語の見出し：細い300で大きく。太い大文字より、細い方が上品で、AIっぽさが出ない */
.title-en {
  display: block;
  font-family: var(--font-en);
  /* 10/12に、もっと大きく（最初の1画面の ALLOY と同じ「文字で見せる」形に）。画面の幅に合わせて大きさが変わる */
  font-size: clamp(2.8rem, 14vw, 4.2rem);
  font-weight: 300;
  line-height: 0.95;
  letter-spacing: -0.02em;
}

/* 英語の見出しが、画面に入った時に、下から「せり上がって」出てくる（10/12）。
   見えない線（clip-path）で下半分を隠しておき、is-in がつくと（js/main.js）、隠すのをやめて上へ動かす */
.js .section-title .title-en {
  transition: clip-path 1s cubic-bezier(0.76, 0, 0.24, 1), transform 1s cubic-bezier(0.22, 1, 0.36, 1);
}

.js .section-title:not(.is-in) .title-en {
  clip-path: inset(0 0 100% 0);
  transform: translateY(40%);
}

/* 日本語の見出し（10/11に見直し）。頭に短い線を引き、文字の間を大きく空ける。
   小さくても「わざと小さくしている」と分かり、雑誌の見出しのように見える */
.title-ja {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 18px;
  font-size: 0.9rem;
  font-weight: 700;
  letter-spacing: 0.32em;
}

.title-ja::before {
  content: "";
  width: 28px;
  height: 1px;
  background: currentColor;
}

.section-dark .section-title::before {
  color: var(--copper-light);
  background-image: linear-gradient(rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.2));
}

.section-lead {
  margin-bottom: 40px;
  font-size: 1.05rem;
}

.section-dark .section-lead {
  color: #d6dce1;
}

/* セクションの中の小見出し（「できること」「進め方」など） */
.sub-title {
  font-size: 1.25rem;
  line-height: 1.6;
  margin: 80px 0 20px;
}

/* 小見出しの上の、小さな英語のラベル（RESEARCH など） */
.sub-en {
  display: block;
  font-family: var(--font-en);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  color: var(--copper-dark);
  margin-bottom: 4px;
}

/* セクションの最初の小見出しだけ、上の余白をなくす */
.section-title + .sub-title {
  margin-top: 0;
}

/* ===== なぜやっているか =====
   ページの「思い」の部分なので、ほかより文字を大きく、行間を広くして、ゆっくり読ませる。
   左に銅色の細い線を1本 */
.why-text {
  /* 10/12に2人のメッセージが入ったので、大きな見出しに負けないよう大きく */
  font-size: 1.2rem;
  line-height: 2.1;
  padding-left: 20px;
  border-left: 2px solid var(--copper);
}

.why-text + .why-text {
  margin-top: 28px;
}

/* 文章がまだない時の「準備中」。本番の文と見分けがつくよう、灰色の点線にする */
.why-text.placeholder {
  color: var(--text-sub);
  border-left: 2px dashed var(--line);
}

/* ===== 状態の札（受付中・準備中など） =====
   色の箱をやめて、色の点＋文字にした。箱はにぎやかで、安っぽく見えやすい */
.status {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.8rem;
  font-weight: 700;
  margin-bottom: 10px;
}

.status::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--steel);
}

.status-open::before,
.status-done::before {
  background: var(--green);
}

.section-dark .status-open::before {
  background: #5cc08f;
}

/* ===== 私たち ===== */
/* 名前の意味：スマホではマークを上、文章を下に重ねる。パソコンでは横に並べる（下の @media） */
.name-meaning {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 20px;
  margin-bottom: 48px;
}

.name-meaning .sub-title {
  margin: 0 0 6px;
}

/* ロゴの「A」のマーク。大きさは height だけ決めて width: auto（形を崩さない）。
   flex-shrink: 0 で、横に並べた時に文章に押されてつぶれないようにする */
.alloy-mark {
  display: block;
  flex-shrink: 0;
  height: 96px;
  width: auto;
}

/* メンバー：スマホでも2人を横に並べる（grid で2列） */
.member-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

/* 写真の枠。aspect-ratio で縦横比を固定するので、写真を入れても形が崩れない。
   3 / 4 は縦長（スマホで撮った人物写真に合う） */
.member-photo {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  margin-bottom: 16px;
  /* 写真は白黒（10/11）。マウスを乗せる・画面の真ん中に来る（js/main.js が is-in をつける）と、ゆっくり色がつく。
     白黒＋銅色1色は、ミツカルから学んだ「テンプレっぽさを消す」仕組み */
  filter: grayscale(1) contrast(1.05);
  transition: filter 0.8s ease;
}

.member-photo:hover,
.member-photo.is-in {
  filter: none;
}

/* 写真がまだない時の枠。平らな灰色に、細い線 */
.member-photo-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #e2dfd8;
  border: 1px solid var(--line);
  color: var(--text-sub);
  font-family: var(--font-en);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.2em;
}

.member-name {
  font-size: 1.6rem;
  line-height: 1.3;
  letter-spacing: 0.02em;
}

.member-en {
  font-family: var(--font-en);
  font-size: 0.7rem;
  letter-spacing: 0.2em;
  color: var(--copper-dark);
}

.member-age {
  margin-top: 6px;
  font-family: var(--font-en);
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  color: var(--text-sub);
}

/* ひとこと：上に細い線を引いて区切る */
.member-quote {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--ink);
  font-size: 0.9rem;
  line-height: 1.8;
}

.member-quote-empty {
  color: var(--text-sub);
  border-top-color: var(--line);
}

/* 「2人で一緒に担当します」の一文 */
.member-note {
  margin-top: 36px;
  font-weight: 700;
}

/* ===== 一覧（活動・できること・作例） =====
   角の丸い箱をやめて、上の細い線で区切る形にした（雑誌のような作り）。
   スマホでは縦に並べ、パソコンでは横に3つ並べる（下の @media） */
.card-list {
  display: grid;
  gap: 0;
}

.card {
  padding: 24px 0 28px;
  border-top: 1px solid var(--line);
}

/* 一覧の最後にも線を引いて、閉じる */
.card:last-child {
  border-bottom: 1px solid var(--line);
}

.section-dark .card {
  border-color: rgba(255, 255, 255, 0.2);
}

.section-dark .card p {
  color: #d6dce1;
}

.card-title {
  font-size: 1.15rem;
  margin-bottom: 8px;
}

/* 文字のリンク：下線を少し離して引く。
   マウスを乗せると、銅色の線が左から右へ走って、元の線の上に重なる（10/11）。
   線は text-decoration ではなく、背景に2本描いている（上が銅色、下がふだんの線） */
.text-link {
  --link-line: var(--ink);
  --link-hover: var(--copper);
  display: inline-block;
  margin-top: 14px;
  padding-bottom: 4px;
  color: var(--ink);
  font-weight: 700;
  text-decoration: none;
  background:
    linear-gradient(var(--link-hover), var(--link-hover)) left bottom / 0 2px no-repeat,
    linear-gradient(var(--link-line), var(--link-line)) left bottom / 100% 1px no-repeat;
  transition: background-size 0.45s cubic-bezier(0.22, 1, 0.36, 1), color 0.2s;
}

.text-link:hover {
  color: var(--link-hover);
  background-size: 100% 2px, 100% 1px;
}

.section-dark .text-link {
  --link-line: #fff;
  --link-hover: var(--copper-light);
  color: #fff;
}

/* ===== できることと料金（10/10） =====
   1行ずつ細い線で区切った表。左に名前と説明、右に料金。
   料金の数字は細い大きな英語の字体、「月」「万円〜」は小さい日本語にして、数字が目に入るようにする */
.price-list {
  list-style: none;
  border-top: 1px solid var(--ink);
}

.price-row {
  display: grid;
  grid-template-columns: 1fr auto;
  column-gap: 16px;
  align-items: center;
  padding: 18px 0;
  border-bottom: 1px solid var(--line);
}

.price-row h4 {
  font-size: 1.05rem;
}

.price-row p:not(.price) {
  grid-column: 1;
  color: var(--text-sub);
  font-size: 0.9rem;
}

/* 料金は右の列に、2行分の高さで置く */
.price {
  grid-column: 2;
  grid-row: 1 / 3;
  font-family: var(--font-en);
  font-size: 2rem;
  font-weight: 300;
  line-height: 1;
  letter-spacing: 0;
  white-space: nowrap;
}

.price span {
  font-family: var(--font-ja);
  font-size: 0.8rem;
  font-weight: 700;
  margin-left: 2px;
}

.price span:first-child {
  margin: 0 2px 0 0;
}

.price-note {
  margin-top: 20px;
  color: var(--text-sub);
}

/* ===== モニター募集 =====
   ページの中で、ここだけ銅色の太い線で囲んで目立たせる（今いちばん伝えたいお知らせなので） */
.monitor {
  margin-top: 40px;
  padding: 24px 20px 28px;
  border: 2px solid var(--copper);
  background: #fff;
}

.monitor-label {
  font-family: var(--font-en);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  color: var(--copper-dark);
}

.monitor-title {
  font-size: 1.15rem;
  margin: 4px 0 12px;
}

.monitor p + p {
  margin-top: 8px;
}

/* 「最初の3か月は半額」だけ銅色の下線で強調 */
.monitor strong {
  box-shadow: inset 0 -0.45em 0 rgba(184, 115, 63, 0.25);
}

/* ===== 途中の相談ボタン（web.html。10/11、FRIDAY） ===== */
.cta-inline {
  margin-top: 40px;
}

/* ===== スマホで画面の下に固定する相談ボタン（web.html。10/11、FRIDAY） =====
   画面の幅いっぱいの鉄色の帯。iPhoneの下の余白（ホームバー）の分だけ、下に余白を足す（env(safe-area-inset-bottom)）。
   「連絡先」が見えている時は、js/main.js が is-hidden をつけて、下へ引っこめる。パソコンでは出さない（下の @media） */
.sticky-cta {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 16px 20px calc(16px + env(safe-area-inset-bottom));
  background: var(--ink);
  color: #fff;
  font-family: var(--font-ja);
  font-weight: 500; /* ほかのボタンとそろえる（10/12） */
  letter-spacing: 0.16em;
  font-feature-settings: "palt";
  text-decoration: none;
  border-top: 2px solid var(--copper);
  overflow: hidden;
  isolation: isolate; /* 押した時の波（.ripple）を、文字の後ろに出すため */
  transition: transform 0.3s ease;
}

.sticky-cta:active {
  background: var(--copper);
}

.sticky-cta::after {
  content: "→";
  font-family: var(--font-en);
}

.sticky-cta.is-hidden {
  transform: translateY(100%);
}

/* 固定ボタンがある時（web.html のスマホ）は、フッターの下に、ボタンの高さ分の余白をとる。
   ページの一番下の文字がボタンに隠れないようにするため。body に余白をとると、フッターの下に明るい帯が見えてしまった（10/11）ので、暗いフッターの中でとる */
body:has(.sticky-cta) .site-footer {
  padding-bottom: calc(48px + 66px + env(safe-area-inset-bottom));
}

@media (min-width: 700px) {
  .sticky-cta {
    display: none;
  }

  body:has(.sticky-cta) .site-footer {
    padding-bottom: 48px;
  }
}

/* ===== ご契約について =====
   4つの約束を、細い線で区切って並べる。頭に銅色の短い線 */
.terms-list {
  list-style: none;
  border-top: 1px solid var(--line);
}

.terms-list li {
  position: relative;
  padding: 14px 0 14px 24px;
  border-bottom: 1px solid var(--line);
}

.terms-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 1.55em;
  width: 12px;
  height: 2px;
  background: var(--copper);
}

/* ===== ALLOYに頼む理由（10/10） =====
   困りごとと同じ形：銅色の番号（01〜05）を左に置き、細い線で区切る */
.reason-list {
  list-style: none;
  counter-reset: reason;
  border-top: 1px solid var(--line);
}

.reason-list li {
  counter-increment: reason;
  display: grid;
  grid-template-columns: 48px 1fr;
  column-gap: 8px;
  padding: 16px 0;
  border-bottom: 1px solid var(--line);
  font-weight: 700;
}

.reason-list li::before {
  content: counter(reason, decimal-leading-zero);
  font-family: var(--font-en);
  font-size: 1.4rem;
  font-weight: 300;
  line-height: 1.3;
  color: var(--copper);
}

/* ===== よくある質問（10/10） =====
   質問（dt）の頭に「Q」、答え（dd）の頭に「A」を、英語の字体で置く */
.faq-list {
  border-top: 1px solid var(--line);
}

.faq-item {
  padding: 18px 0;
  border-bottom: 1px solid var(--line);
}

.faq-item dt,
.faq-item dd {
  display: grid;
  grid-template-columns: 32px 1fr;
  word-break: auto-phrase;
}

.faq-item dt {
  font-weight: 700;
  margin-bottom: 6px;
}

.faq-item dd {
  color: var(--text-sub);
}

.faq-item dt::before,
.faq-item dd::before {
  font-family: var(--font-en);
  font-size: 1.2rem;
  font-weight: 300;
  line-height: 1.5;
}

.faq-item dt::before {
  content: "Q";
  color: var(--copper);
}

.faq-item dd::before {
  content: "A";
}

/* 困りごとの下に文字のリンクを置く時は、少し小さくする */
.finding .text-link {
  margin-top: 6px;
  font-size: 0.9rem;
}

/* ===== 市が尾で分かったこと =====
   番号（01、02、03）を銅色で左に置き、細い線で区切る */
.finding-list {
  list-style: none;
  counter-reset: finding;
  margin-top: 24px;
  border-top: 1px solid var(--line);
}

.finding {
  counter-increment: finding;
  display: grid;
  grid-template-columns: 48px 1fr;
  column-gap: 8px;
  padding: 20px 0;
  border-bottom: 1px solid var(--line);
}

.finding::before {
  content: counter(finding, decimal-leading-zero);
  grid-row: 1 / 3;
  font-family: var(--font-en);
  font-size: 1.4rem;
  font-weight: 300;
  line-height: 1.3;
  color: var(--copper);
}

.finding h4 {
  font-size: 1.05rem;
}

.finding p {
  grid-column: 2;
  color: var(--text-sub);
}

/* ===== 進め方 =====
   番号は自分で数える（counter）。丸の中ではなく、細い大きな数字で左に置く */
.step-list {
  list-style: none;
  counter-reset: step;
  border-top: 1px solid var(--line);
}

.step {
  counter-increment: step;
  display: grid;
  grid-template-columns: 48px 1fr;
  column-gap: 8px;
  padding: 20px 0;
  border-bottom: 1px solid var(--line);
}

.step::before {
  content: counter(step);
  grid-row: 1 / 3;
  font-family: var(--font-en);
  font-size: 2rem;
  font-weight: 300;
  line-height: 1;
  color: var(--copper);
}

.step h4 {
  font-size: 1.05rem;
  line-height: 1.5;
  margin-bottom: 4px;
}

.step p {
  grid-column: 2;
  color: var(--text-sub);
}

/* ===== これまでの歩み（年表） =====
   10/10に「これまでの歩み」として使い始めた（トップ）。左に縦の細い線、各行の頭に銅色の点 */
.log-list {
  list-style: none;
  border-left: 1px solid var(--line);
  margin-left: 6px;
}

.log {
  position: relative;
  padding: 0 0 24px 24px;
}

.log::before {
  content: "";
  position: absolute;
  left: -5px;
  top: 8px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--copper);
}

.log-date {
  display: block;
  /* 日付は「10月5日」のように日本語も入るので、英語の字体のあとに日本語の字体を指定する
     （--font-en は最後が sans-serif なので、そのままだと日本語がスマホの字体になる） */
  font-family: "Jost", "IBM Plex Sans JP", sans-serif;
  font-weight: 500;
  color: var(--text-sub);
  font-size: 0.85rem;
}

/* 濃い地（写真の上）の年表：線と日付を明るくする（10/12） */
.section-dark .log-list {
  border-left-color: rgba(255, 255, 255, 0.3);
}

.section-dark .log-date {
  color: var(--copper-light);
  letter-spacing: 0.08em;
}

.section-dark .log p {
  color: #e6e9ec;
}

/* 一番下の「NOW」（今）：点を大きくして、まわりに輪をつける。文字も太く */
.log-now::before {
  left: -7px;
  top: 6px;
  width: 13px;
  height: 13px;
  box-shadow: 0 0 0 5px rgba(217, 162, 115, 0.25);
}

.log-now p {
  font-weight: 700;
}

.log:last-child {
  padding-bottom: 0;
}

/* ===== 発信（SNS） =====
   1行ずつ、細い線で区切った一覧。右に「準備中」や矢印 */
.sns-list {
  display: grid;
  border-top: 1px solid var(--ink);
}

.sns-link {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  column-gap: 12px;
  padding: 22px 0;
  border-bottom: 1px solid var(--line);
  color: var(--ink);
  text-decoration: none;
}

.sns-link:hover .sns-name {
  color: var(--copper);
}

.sns-name {
  font-family: var(--font-en);
  font-size: 1.6rem;
  font-weight: 300;
  line-height: 1.2;
}

.sns-desc {
  grid-column: 1;
  color: var(--text-sub);
  font-size: 0.85rem;
}

.sns-action {
  grid-column: 2;
  grid-row: 1 / 3;
  font-weight: 700;
  font-size: 0.85rem;
}

/* URLがまだない時：押せないようにして、少し薄く見せる */
.sns-link.is-pending {
  pointer-events: none;
}

.sns-link.is-pending .sns-name {
  color: var(--text-sub);
}

.sns-link.is-pending .sns-action {
  color: var(--text-sub);
  font-weight: 500;
}

/* ===== 連絡先 =====
   濃い地に、白いボタン。メールアドレスは大きな英語の字体で見せる */
/* ボタンはメールアドレスの下に、1つだけで置く（10/12）。display: flex で行を独り占めさせ、幅は中身の分だけ（fit-content） */
.contact .button {
  --btn-fill: var(--copper-light);
  display: flex;
  width: fit-content;
  margin-top: 40px;
  background: #fff;
  border-color: #fff;
  color: var(--ink);
}

.mail-address {
  margin-top: 16px;
  font-family: var(--font-en);
  font-size: 1.05rem;
  font-weight: 300;
  letter-spacing: 0.02em;
  color: #d6dce1;
}

/* ===== フッター ===== */
.site-footer {
  text-align: center;
  padding: 48px 24px;
  background: var(--ink-deep);
  color: var(--steel);
  font-family: var(--font-en);
  font-size: 0.8rem;
  letter-spacing: 0.08em;
}

.footer-logo {
  display: block;
  height: 52px;
  width: auto;
  margin: 0 auto 16px;
}

/* =========================================================
   10/12 下の方も「文字で見せる」形に（蓮：「今の感じは悪くない。下の方まで変えられる？」）
   ========================================================= */

/* ===== 大きな番号つきの行（活動・実績。HTMLで card-list に row-list をつけた所だけ） =====
   左に大きな銅色の番号（01、02…。CSSが数える）、右に中身。
   マウスを乗せると、行が下から銅色にうすく染まり、番号が少し右へ動く */
.row-list {
  counter-reset: row;
}

.row-list .card {
  counter-increment: row;
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: 20px;
  align-items: start;
  padding: 32px 0 36px;
}

.row-list .card > * {
  grid-column: 2;
}

.row-list .card::before {
  content: counter(row, decimal-leading-zero);
  grid-column: 1;
  grid-row: 1 / span 4;
  font-family: var(--font-en);
  font-size: clamp(3rem, 15vw, 7.5rem);
  font-weight: 300;
  line-height: 0.85;
  letter-spacing: -0.03em;
  color: var(--copper);
  transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

.section-dark .row-list .card::before {
  color: var(--copper-light);
}

/* 行が下から染まる板 */
.row-list .card::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: rgba(184, 115, 63, 0.12);
  transform: scaleY(0);
  transform-origin: bottom center;
  transition: transform 0.5s cubic-bezier(0.76, 0, 0.24, 1);
}

.row-list .card:hover::after {
  transform: scaleY(1);
}

.row-list .card:hover::before {
  transform: translateX(10px);
}

.row-list .card-title {
  font-size: clamp(1.4rem, 6vw, 2.6rem);
  line-height: 1.3;
}

/* ===== 発信（SNS）を大きな文字のリンクに ===== */
.sns-name {
  font-size: clamp(2.6rem, 13vw, 7rem);
  line-height: 1;
  letter-spacing: -0.02em;
  transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1), color 0.3s;
}

.sns-link {
  padding: 28px 0;
}

/* マウスを乗せると、名前が銅色になって右へすべる */
.sns-link:hover .sns-name {
  transform: translateX(12px);
}

/* ===== 連絡先：メールアドレスを画面の幅いっぱいの大きなリンクに ===== */
.mail-big {
  display: inline-block;
  margin-top: 40px;
  padding-bottom: 8px;
  font-family: var(--font-en);
  font-size: clamp(1.5rem, 8.6vw, 5.4rem);
  font-weight: 300;
  line-height: 1.1;
  letter-spacing: -0.01em;
  color: #fff;
  text-decoration: none;
  /* 下線は2本：ふだんの白い細い線と、乗せると左から走る銅色の線（text-link と同じ仕組み） */
  background:
    linear-gradient(var(--copper-light), var(--copper-light)) left bottom / 0 2px no-repeat,
    linear-gradient(rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.5)) left bottom / 100% 1px no-repeat;
  transition: background-size 0.6s cubic-bezier(0.22, 1, 0.36, 1), color 0.3s;
}

.mail-big:hover {
  color: var(--copper-light);
  background-size: 100% 2px, 100% 1px;
}

/* ===== フッターの一番下の大きな ALLOY ===== */
.footer-wordmark {
  display: block;
  width: 100%;
  height: auto;
  margin-top: 48px;
  fill: #222b34; /* 地（#151b21）より少しだけ明るい鉄色。うっすら浮かぶ */
}

/* ここから下がパソコン・タブレット用。
   画面幅が700px以上になったら、ロゴと目次を1行にして、一覧を横に並べる */
@media (min-width: 700px) {
  /* ボタンの横の余白は、パソコンでは広く（10/12） */
  .button {
    padding: 16px 30px;
  }

  .site-header {
    display: flex;
    align-items: center;
    padding: 0 48px;
  }

  /* パソコンでは中身の幅を少し広げる（余白を広く取っても、窮屈にならないように） */
  .inner {
    max-width: 1080px;
  }

  /* 並び順：ロゴ → 目次 → 連絡するボタン。
     display: contents で .header-top の箱を消し、中身を直接ヘッダーに並べる */
  .header-top {
    display: contents;
  }

  .logo {
    order: 1;
    padding: 16px 0;
  }

  .site-nav {
    order: 2;
    flex: 1;
    justify-content: center;
    gap: 12px;
    padding: 0;
  }

  /* パソコンでは、目次は真ん中にまとめ、Web支援は少しだけ離して並べる（右に押しやらない） */
  .site-nav .nav-page {
    margin-left: 16px;
  }

  .header-button {
    order: 3;
  }

  section {
    scroll-margin-top: 66px;
  }

  .page-head {
    padding: 64px 48px 104px;
  }

  .page-title {
    font-size: 3.6rem;
  }

  /* パソコンのヘッダーは1段（約66px） */
  :root {
    --header-h: 66px;
  }

  .hero {
    padding: 120px 48px 88px;
  }

  /* パソコンでは1行に収める大きさ（960pxの幅に11文字） */
  .hero-title {
    font-size: clamp(3.6rem, 6.8vw, 5.4rem);
    line-height: 1.25;
  }

  .hero-en {
    font-size: 1.4rem;
  }

  .hero-lead {
    max-width: 560px;
  }

  .facts {
    margin-top: 96px;
  }

  .fact + .fact {
    padding-left: 24px;
  }

  .fact dd {
    font-size: 0.9rem;
  }

  /* パソコンではラベルが1行に収まるので、高さをそろえなくてよい */
  .fact dt {
    min-height: 0;
  }

  .num {
    font-size: 3rem;
  }

  .section {
    padding: 176px 48px;
  }

  .section-title {
    margin-bottom: 88px;
  }

  .title-en {
    font-size: clamp(5rem, 9vw, 8.5rem);
  }

  .section-title {
    margin-bottom: 104px;
  }

  /* 大きな番号つきの行は、パソコンでも縦に1行ずつ（上の「横に3つ並べる」を打ち消す） */
  .card-list.row-list {
    grid-auto-flow: row;
    border-bottom: none;
  }

  /* 前からある「.card + .card」などの決まりより強くするため、.card-list.row-list と2つ重ねて書く */
  .card-list.row-list .card,
  .card-list.row-list .card + .card,
  .card-list.row-list .card:first-child,
  .card-list.row-list .card:last-child {
    column-gap: 56px;
    padding: 48px 24px 52px 0;
    border: none;
    border-bottom: 1px solid var(--line);
  }

  .section-dark .card-list.row-list .card {
    border-bottom-color: rgba(255, 255, 255, 0.2);
  }

  /* 発信も、大きな文字なので1列に */
  .sns-list {
    grid-template-columns: 1fr;
  }

  .sns-link {
    padding: 36px 0;
  }

  .footer-wordmark {
    margin-top: 72px;
  }

  .title-ja {
    font-size: 1rem;
  }

  .section-lead {
    font-size: 1.15rem;
  }

  /* 最初の1画面：パソコンでは左右の余白を広く */
  .stage-pin {
    padding-left: 48px;
    padding-right: 48px;
  }

  .stage-scroll {
    left: 48px;
  }

  .why-text {
    font-size: 1.55rem;
    line-height: 2;
    max-width: 860px;
  }

  .name-meaning {
    flex-direction: row;
    align-items: center;
    gap: 48px;
  }

  .alloy-mark {
    height: 140px;
  }

  /* 広い画面だと写真の枠が大きくなりすぎるので、2人分の幅に上限をつける */
  .member-list {
    max-width: 760px;
    gap: 32px;
  }

  .member-name {
    font-size: 1.9rem;
  }

  /* 一覧を横に3つ（作例は2つ）並べる。縦の細い線で区切る */
  .card-list {
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
  }

  .card,
  .card:last-child {
    border: none;
    padding: 28px 28px 32px;
  }

  .card:first-child {
    padding-left: 0;
  }

  .card + .card {
    border-left: 1px solid var(--line);
  }

  .section-dark .card-list,
  .section-dark .card + .card {
    border-color: rgba(255, 255, 255, 0.2);
  }

  .finding,
  .step {
    grid-template-columns: 72px 1fr;
    padding: 24px 0;
  }

  .reason-list li {
    grid-template-columns: 72px 1fr;
    padding: 20px 0;
  }

  .log-list {
    max-width: 720px;
  }

  .sns-list {
    grid-template-columns: 1fr 1fr;
    column-gap: 48px;
  }

  .mail-address {
    font-size: 1.6rem;
  }

  .price {
    font-size: 2.6rem;
  }

  .price-row {
    padding: 22px 0;
  }

  .monitor {
    padding: 32px 36px 36px;
  }
}

/* 動きを減らす設定にしている人には、動きを出さない */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  .button,
  .button::before,
  .button::after,
  .header-button,
  .section-title::before,
  .member-photo,
  .sticky-cta,
  .text-link,
  .js .section-title .title-en,
  .row-list .card::before,
  .row-list .card::after,
  .sns-name,
  .mail-big {
    transition: none;
  }

  /* 写真が寄る動き・写真が遅れて動く動き・読んだ量の線を止める（10/12の新しい動きは、最初から「動きを減らす設定でない人」だけに書いている） */
  .button:hover::after,
  .ripple,
  .hero.has-photo::before,
  .section-photo::before,
  .site-header::after {
    animation: none;
  }

  .site-header::after {
    display: none;
  }

  /* 矢印もすべらせない */
  .button:hover::after {
    transform: none;
  }
}