/* ──────────────────────────────────────────────────────────────
   型：スタイリッシュ（stylish）
   向く相手：美容室・ネイル・エステ・カフェ・飲食・写真館・治療院・教室

   2026-08-20 本間さん「組み合わせてやわらかくスタイリッシュでかっこいい
   テンプレ作ろう」。3つを1つにまとめた型。

     やわらかさ      … 大きめの角丸・広い余白・丸い番号・淡い面
     スタイリッシュ  … 明朝・広い字間・細い罫・縦組みの見出し
     かっこよさ      … 地を黒にも振れる・締まった対比・1枚ずつめくるメニュー

   背骨は「縦組みの見出しと罫」。節の名前を縦に組んで左端に立て、細い罫を添える。
   硬派の型が「折り目（skewX -18deg）」で通したのと同じ役目で、
   色や写真が変わっても、この組みが揃っていれば同じ型に見える。

   ★色は材料（JSON）の palette で決める。型のCSSは客ごとに書き換えない。
     地は light（白）か dark（黒）、あとはアクセント1色だけ。
     参考にもらった4本（ネイル／アパレル／美容室／レストラン）は、
     全部この組み合わせで出せる。型を4つ作ると手入れも4倍になる。
   ★字体を外から読みに行かない。参考は Google Fonts の日本語明朝を読んでいるが、
     数MBある。「速い」が売り文句なので、端末が持っている明朝で組む。
   ★動くものを置かない。参考は jQuery と inview で動かしているが、全部CSSでやる。
     動くものを置いた時点で「壊れない・保守費0円」が嘘になる。
   ────────────────────────────────────────────────────────────── */

:root {
  /* 客に聞くのはこの1色だけ。3色聞くと必ず揉める */
  --accent: #bd7b6b;          /* くすんだ珊瑚。店の仕切りの色から取った */

  /* 地の色。材料の palette:"dark" で頭から上書きされる */
  --ground: #fcfaf8;          /* 白より少しあたためる */
  --panel: #f5efec;           /* 淡い面（帯・流れ・声・締め） */
  --paper: #ffffff;           /* 浮いている面（札・めくる札） */
  --ink: #463b39;             /* 黒にしない。温かいこげ茶 */
  --muted: #8a7b77;
  --line: #e7dcd7;

  --round: 22px;              /* 角の丸み。やわらかさはここと余白で作る */
  --round-lg: 40px;           /* 大きい面（帯・めくる札・締め） */

  --wide: 1140px;
  --narrow: 700px;

  /* ★地の字はゴシック。明朝は見せ場だけに使う。
     全部を明朝で組むと「上質」にはなるが、同時に年配向けに見える。
     2026-08-20 本間さん「サイトの雰囲気を全体的に若めに」。
     ★どちらも端末が持っている字だけ。外からは読みに行かない。 */
  --jp: "Hiragino Sans", "Yu Gothic", YuGothic, "Noto Sans JP", Meiryo, sans-serif;
  --jp-mincho: "Hiragino Mincho ProN", "ヒラギノ明朝 ProN", "Yu Mincho", YuMincho,
               "游明朝", "MS PMincho", serif;
  --jp-gothic: "Hiragino Sans", "Yu Gothic", YuGothic, "Noto Sans JP", Meiryo, sans-serif;
  --num: Garamond, "Palatino Linotype", Palatino, Georgia, serif;
  --track: .34em;             /* 英字ラベルの字間。ここも背骨のひとつ */
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--jp);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.92;          /* ★行間を詰めると若く、空けると落ち着いて見える */
  letter-spacing: .05em;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }
a { color: inherit; }
::selection { background: var(--accent); color: var(--ground); }

/* ── 頭 ───────────────────────────────────────── */

.site-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 24px; flex-wrap: wrap;
  max-width: var(--wide); margin: 0 auto; padding: 30px 32px;
}
.brand { text-decoration: none; font-size: 1rem; letter-spacing: .22em; }
.logo { height: 88px; width: auto; }
@media (max-width: 900px) { .logo { height: 64px; } }

.site-head nav { display: flex; gap: 8px; flex-wrap: wrap; }
.site-head nav a {
  text-decoration: none; font-family: var(--jp-gothic);
  font-size: .76rem; letter-spacing: .18em; color: var(--muted);
  padding: 10px 20px; border-radius: 999px; border: 1px solid transparent;
  transition: color .3s ease, border-color .3s ease;
}
.site-head nav a:hover { color: var(--ink); border-color: var(--line); }
.site-head nav a.here { color: var(--accent); border-color: var(--accent); }

/* ── ホームの見せ場 ─────────────────────────────── */

.hero { position: relative; overflow: hidden; padding: 76px 32px 92px; }
.hero-inner { max-width: var(--wide); margin: 0 auto; position: relative; z-index: 2; }
.hero .eyebrow {
  margin: 0 0 34px; color: var(--accent); font-family: var(--jp-gothic);
  font-size: .7rem; letter-spacing: var(--track);
}
.hero h1 {
  font-family: var(--jp-mincho);
  margin: 0 0 32px; font-weight: 400;
  font-size: clamp(2rem, 5.6vw, 3.9rem);
  line-height: 1.5; letter-spacing: .04em;   /* ★字送りを詰めると今どきに見える。
                                                広く空けるほど、格式は出るが古く見える */
  max-width: 14em; text-wrap: balance;
}
.hero .lead {
  margin: 0 0 48px; max-width: 27em; color: var(--muted);
  font-size: .95rem; line-height: 2.3;
}
.hero-call {
  display: inline-flex; align-items: center; gap: 18px;
  text-decoration: none; font-family: var(--jp-gothic);
  font-size: .8rem; letter-spacing: .22em; color: var(--ink);
  padding: 18px 44px; border: 1px solid var(--accent); border-radius: 999px;
  background: var(--accent); color: var(--paper);
  transition: background .35s ease, color .35s ease, box-shadow .35s ease;
  box-shadow: 0 14px 30px -18px var(--accent);
}
.hero-call::after {
  content: "→"; color: var(--paper);
  transition: transform .4s cubic-bezier(.2, .8, .2, 1), color .35s ease;
}
.hero-call:hover { background: transparent; color: var(--ink); box-shadow: none; }
.hero-call:hover::after { transform: translateX(8px); color: var(--accent); }

/* 写真は縦長の窓にして右に置く。地に敷かない（文字と取り合いにならない）。
   ★上だけ大きく丸める。四隅を同じ丸みにすると、ただの角丸箱になる。
   ★写真が無くても窓は出る。そのときは色の面になる。穴に見せないため。 */
.hero-inner::after {
  content: ""; display: block;
  background: linear-gradient(168deg, var(--accent) -30%, var(--panel) 58%);
  background-size: cover; background-position: 50% 42%;
  border: 1px solid var(--line);
  border-radius: 200px 200px var(--round-lg) var(--round-lg)
               / 44% 44% var(--round-lg) var(--round-lg);
}
.hero.has-photo .hero-inner::after { background-image: var(--hero-photo); }

/* ──────────────────────────────────────────────
   見せ場：一言が写真の上を渡っていく

   2026-08-21、試作で本間さんに見てもらって「いいですね」。型へ入れる。

   一言は横いっぱいに1行。右の写真は上まで伸びて、一言と重なる。
   ★重ねること自体は悪くない。悪いのは、字の下が賑やかなこと。
     字が渡る側だけ地の色へ溶かせば、字は立ち、写真も死なない。
   ★左の柱に押し込むと、1行にするために字を小さくするしかなくなる。
     横を全部使えば、同じ1行でもずっと大きく置ける（幅1440で43px→78px）。
   ★「折り返さない」指定はしない。長い一言の客が来たとき、はみ出して読めなくなる。
     幅が足りていれば1行になり、足りなければ折り返す。型は次の客にも使う。
   ★溶かす色は --ground なので、白地でも黒地でも砂地でも同じように効く。
   ────────────────────────────────────────────── */

.hero.has-back {
  position: relative; overflow: hidden; background-image: none;
  padding: 0 0 84px;
  display: grid; grid-template-rows: auto minmax(0, 1fr);
}
.hero-shot {
  position: absolute; top: 0; right: 0; bottom: 0; width: 52%; z-index: 0;
  overflow: hidden;
  background-image: var(--hero-back);
  background-size: cover; background-position: var(--hero-back-at, 50% 45%);
}
/* ★字が渡る側（左）だけ、地の色へ溶かす。右端は写真のまま見せる */
.hero-shot::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(100deg,
    var(--ground) 0%,
    color-mix(in srgb, var(--ground) 92%, transparent) 22%,
    color-mix(in srgb, var(--ground) 55%, transparent) 52%,
    color-mix(in srgb, var(--ground) 12%, transparent) 82%,
    transparent 100%);
}
/* ★1行で締まるのは 460px より広い画面。それより狭い電話では2行に折り返す。
   折り返さずに収めようとすると字が19pxまで落ちて、見出しに見えなくなる。
   電話では、1行より読める大きさを取る。 */
.hero.has-back h1 {
  position: relative; z-index: 2;
  max-width: none; margin: 0; padding: 0 32px;
  font-size: clamp(1.5rem, 5.2vw, 4.6rem);
  line-height: 1.34; letter-spacing: .03em;
}
.hero.has-back .hero-inner {
  position: relative; z-index: 2; display: block;
  max-width: var(--wide); margin: 0 auto; padding: 0;
  align-self: end;
}
.hero.has-back .hero-inner::after { display: none; }
.hero.has-back .eyebrow { padding: 0 32px; }
.hero.has-back .lead { max-width: 26em; padding: 0 32px; margin-bottom: 40px; }
.hero.has-back .hero-call { margin-left: 32px; }

@media (min-width: 940px) {
  .hero.has-back { padding-top: 8px; }
  .hero.has-back .hero-inner { max-width: min(52%, 34em); margin: 0; }
}
@media (max-width: 939px) {
  /* 狭い画面では上下に積む。溶かす向きも上から下へ変える（横に溶かしても意味がない） */
  .hero.has-back { display: block; padding-bottom: 56px; }
  .hero-shot { position: relative; width: auto; height: 42svh; margin-bottom: 30px; }
  .hero-shot::after {
    background: linear-gradient(180deg,
      color-mix(in srgb, var(--ground) 78%, transparent) 0%, transparent 46%);
  }
}

/* ── 数字 ─────────────────────────────────────── */

.stats { max-width: var(--wide); margin: 0 auto; padding: 0 32px; }
.stat-row {
  display: grid; gap: 14px;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
}
.stat {
  padding: 44px 26px 46px; text-align: center;
  background: var(--panel); border-radius: var(--round);
}
.stat b {
  display: block; font-family: var(--num); font-weight: 400;
  font-size: clamp(2.3rem, 5vw, 3.3rem); line-height: 1.1;
  letter-spacing: .01em; color: var(--accent);
  font-variant-numeric: tabular-nums;
}
.stat b i {
  font-style: normal; font-family: var(--jp);
  /* 単位はゴシック。数字（Garamond）との差がはっきりする */
  font-size: .34em; letter-spacing: .14em; margin-left: .6em; color: var(--ink);
}
.stat span {
  display: block; margin-top: 14px; font-family: var(--jp-gothic);
  font-size: .73rem; letter-spacing: .14em; color: var(--muted); line-height: 1.9;
}

/* ── 節（背骨：見出しを縦に組んで左端に立てる） ────── */

main > section { max-width: var(--wide); margin: 0 auto; padding: 96px 32px; }

main > section > h2 {
  font-family: var(--jp-mincho);
  margin: 0 0 44px; font-weight: 400;
  font-size: clamp(1.2rem, 2.4vw, 1.45rem); letter-spacing: .3em;
}

@media (min-width: 940px) {
  main > section:has(> h2):not(#cta) {
    display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 72px;
  }
  main > section:has(> h2):not(#cta) > h2 {
    writing-mode: vertical-rl;          /* ← この型の背骨 */
    margin: 0; align-self: stretch;
    border-left: 1px solid var(--accent);
    padding-left: 28px; letter-spacing: .4em;
    white-space: nowrap;
  }
}

/* 淡い面の帯。角を大きく丸めて、まっすぐ切らない */
.band { background: var(--panel); border-radius: var(--round-lg); }

/* ── 札（できること・選ばれる理由） ─────────────── */

.cards { display: grid; gap: 16px; }
@media (min-width: 700px) { .cards { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1040px) { .cards { grid-template-columns: repeat(3, 1fr); } }

.card {
  background: var(--paper); padding: 40px 32px 46px;
  border: 1px solid var(--line); border-radius: var(--round);
  transition: transform .4s ease, border-color .4s ease;
}
/* ★hover で transform を使わない。入場の動きと同じ場所を取り合って、
   どちらかが効かなくなる。scale は別枠なので重ねられる */
.card:hover { scale: 1.02; border-color: var(--accent); }
.card h3 { margin: 0 0 16px; font-size: 1rem; font-weight: 400; letter-spacing: .16em; }
.card p {
  margin: 0; color: var(--muted); font-family: var(--jp-gothic);
  font-size: .84rem; line-height: 2.1;
}

/* 罫だけの並び。地の面を持たせないので、より静かになる */
.card.plain {
  background: transparent; border: 0; border-left: 1px solid var(--line);
  border-radius: 0; padding: 26px 24px 30px;
}
.card.plain:hover { scale: 1; border-left-color: var(--accent); }
.card.plain h3 { color: var(--accent); }
.band .card { background: var(--ground); }
.band .card.plain { background: transparent; }

/* ── 流れ ─────────────────────────────────────── */

#flow .steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.step {
  position: relative; padding: 30px 34px 32px 100px;
  background: var(--panel); border-radius: var(--round);
}
.step-no {
  position: absolute; left: 30px; top: 30px;
  width: 46px; height: 46px; border-radius: 999px;   /* 丸い番号。ここがやわらかさ */
  border: 1px solid var(--accent); color: var(--accent);
  display: grid; place-items: center;
  font-family: var(--num); font-size: 1.15rem; letter-spacing: .02em;
}
.step:nth-child(-n+9) .step-no::before { content: "0"; }  /* 10手目からは付けない */
.step h3 { margin: 0 0 8px; font-size: .98rem; font-weight: 400; letter-spacing: .14em; }
.step p { margin: 0; color: var(--muted); font-family: var(--jp-gothic); font-size: .84rem; }

/* ── 声 ───────────────────────────────────────── */

.voice-row { display: grid; gap: 16px; }
@media (min-width: 860px) { .voice-row { grid-template-columns: repeat(3, 1fr); } }
.voice {
  margin: 0; background: var(--ground); padding: 42px 32px 38px;
  border: 1px solid var(--line); border-radius: var(--round);
}
.voice blockquote { margin: 0 0 24px; font-size: .92rem; line-height: 2.3; }
.voice figcaption {
  font-family: var(--jp-gothic); font-size: .72rem; letter-spacing: .18em; color: var(--muted);
}
.voice figcaption::before {
  content: ""; display: block; width: 28px; height: 1px;
  background: var(--accent); margin-bottom: 16px;
}

/* ── 締め ─────────────────────────────────────── */

#cta {
  max-width: none; background: var(--panel);
  border-radius: var(--round-lg) var(--round-lg) 0 0;
  padding: 96px 32px 104px; text-align: center;
}
#cta > * { max-width: var(--narrow); margin-left: auto; margin-right: auto; }
#cta h2 { letter-spacing: .3em; }
#cta .lead { color: var(--muted); font-family: var(--jp-gothic); font-size: .86rem; }
#cta .big {
  margin: 34px 0 6px; font-family: var(--num);
  font-size: clamp(1.8rem, 4.6vw, 2.5rem); letter-spacing: .06em; color: var(--accent);
}
#cta .big a { text-decoration: none; transition: opacity .3s ease; }
#cta .big a:hover { opacity: .62; }
#cta .small {
  margin: 0; font-family: var(--jp-gothic);
  font-size: .72rem; letter-spacing: .16em; color: var(--muted);
}

/* ── 下層ページの頭（案A：地のまま・大見出し） ────── */

.page-head-inner { max-width: var(--wide); margin: 0 auto; padding: 0 32px; }
.page-head.quiet .page-head-inner { padding: 84px 32px 4px; }
.page-head.quiet h1 {
  font-family: var(--jp-mincho);
  margin: 0 0 20px; font-weight: 400;
  font-size: clamp(1.8rem, 4.6vw, 2.7rem); letter-spacing: .22em;
}
.page-head.quiet .kicker {
  margin: 0; color: var(--accent); font-family: var(--jp-gothic);
  font-size: .68rem; letter-spacing: var(--track);
}

/* 濃い帯の作り（案B）と、左の柱の作り（案C）。この型では使わないが残してある */
.page-head:not(.quiet):not(.aside) {
  background: var(--panel); border-radius: 0 0 var(--round-lg) var(--round-lg);
}
.page-head:not(.quiet):not(.aside) .page-head-inner { padding: 76px 32px 84px; }
.page-head:not(.quiet):not(.aside) .eyebrow {
  margin: 0 0 16px; color: var(--accent); font-size: .68rem; letter-spacing: var(--track);
}
.page-head:not(.quiet):not(.aside) h1 {
  margin: 0; font-weight: 400; font-size: clamp(1.8rem, 4.6vw, 2.7rem); letter-spacing: .22em;
}
.editorial { max-width: var(--wide); margin: 0 auto; padding: 0 32px; }
.editorial > section { max-width: none; padding-left: 0; padding-right: 0; }
@media (min-width: 940px) {
  .editorial {
    display: grid; grid-template-columns: 250px minmax(0, 1fr);
    column-gap: 64px; align-items: start;
  }
  .editorial > .page-head.aside { grid-column: 1; grid-row: 1 / 40; position: sticky; top: 32px; }
  .editorial > section:not(.page-head) { grid-column: 2; }
}
.page-head.aside .page-head-inner { padding: 84px 0 20px; }
.page-head.aside h1 {
  margin: 0 0 .6em; font-weight: 400;
  font-size: clamp(1.6rem, 3.4vw, 2.1rem); letter-spacing: .18em;
}
.page-head.aside .kicker {
  margin: 0; color: var(--accent); font-size: .68rem; letter-spacing: var(--track);
  padding-top: 16px; border-top: 1px solid var(--accent); display: inline-block;
}

/* ── 地図 ─────────────────────────────────────── */

/* ★この型で唯一、外を読みにいく部品。
   後から読み込むので、最初の表示は遅くならない。 */
.map {
  border: 1px solid var(--line); border-radius: var(--round-lg);
  overflow: hidden; line-height: 0;
}
.map iframe { width: 100%; height: 420px; border: 0; display: block; }
@media (max-width: 640px) { .map iframe { height: 300px; } }

/* 見本の1枚では地図を出せないので、代わりに置く札 */
.map-stand-in {
  border: 1px dashed var(--line); border-radius: var(--round-lg);
  padding: 62px 32px; text-align: center;
  color: var(--muted); font-family: var(--jp-gothic);
  font-size: .82rem; letter-spacing: .12em; line-height: 2.2;
}

/* ── 会社概要の表 ─────────────────────────────── */

.profile { width: 100%; border-collapse: separate; border-spacing: 0 10px; }
.profile th, .profile td {
  text-align: left; padding: 22px 26px; vertical-align: top;
  background: var(--panel); font-weight: 400;
}
.profile th {
  width: 10em; border-radius: var(--round) 0 0 var(--round);
  font-family: var(--jp-gothic); font-size: .73rem; letter-spacing: .2em; color: var(--accent);
}
.profile td { border-radius: 0 var(--round) var(--round) 0; font-size: .92rem; }
@media (max-width: 640px) {
  .profile th, .profile td { display: block; width: auto; }
  .profile th { border-radius: var(--round) var(--round) 0 0; padding-bottom: 4px; }
  .profile td { border-radius: 0 0 var(--round) var(--round); padding-top: 4px; }
}

/* ──────────────────────────────────────────────
   追加ページ：大きな札を1枚ずつめくる

   横に並べて、1枚ずつ吸い付くようにする（scroll-snap）。
   指でも、ホイールでも、番号を押しても、1枚ずつ送れる。
   ★JavaScriptは1行も使っていない。だから止まらないし、壊れない。
   ────────────────────────────────────────────── */

#works { padding-bottom: 110px; }

.work-index { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 40px; }
.work-index a {
  display: flex; align-items: baseline; gap: 12px;
  text-decoration: none; color: var(--muted);
  font-family: var(--jp-gothic); font-size: .75rem; letter-spacing: .14em;
  padding: 13px 26px; border: 1px solid var(--line); border-radius: 999px;
  transition: color .3s ease, border-color .3s ease;
}
.work-index a span { font-family: var(--num); font-size: 1rem; color: var(--accent); }
.work-index a:hover { color: var(--ink); border-color: var(--accent); }

/* 読み飛ばすボタン。留まる作りのときだけ出す（留まらないなら飛ばす先が無い）。
   2026-08-20 本間さん「スクロールにとられちゃう人対策はスキップボタンを薄く設置」。
   ★薄く置くが、押せないほど薄くはしない。触れると濃くなる。 */
.deck-skip { display: none; }
#works-end { display: block; scroll-margin-top: 24px; }

.works {
  display: flex; gap: 26px;
  overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  perspective: 1600px;
  padding: 12px 0 36px;
  scrollbar-width: thin; scrollbar-color: var(--accent) transparent;
}
.works::-webkit-scrollbar { height: 2px; }
.works::-webkit-scrollbar-thumb { background: var(--accent); }

.work {
  flex: 0 0 min(560px, 84vw);
  scroll-snap-align: center;
  background: var(--paper); border: 1px solid var(--line);
  border-radius: var(--round-lg); overflow: hidden;
  transform-style: preserve-3d; will-change: transform;
}
.work-photo { margin: 0; aspect-ratio: 3 / 2; overflow: hidden; }
.work-photo img { width: 100%; height: 100%; object-fit: cover; }
.work-words { padding: 52px 46px 58px; }
.work-no {
  display: block; font-family: var(--num); font-size: 1.15rem;
  color: var(--accent); letter-spacing: .06em; margin-bottom: 22px;
}
.work-words h3 {
  font-family: var(--jp-mincho);
  margin: 0 0 22px; font-weight: 400;
  font-size: clamp(1.25rem, 3vw, 1.65rem); letter-spacing: .18em;
}
.work-words p {
  margin: 0; color: var(--muted); font-family: var(--jp-gothic);
  font-size: .86rem; line-height: 2.2;
}

/* めくる手ざわり。真ん中の1枚だけが正面を向く。
   ★下の「横に流れる」に対応していない端末では、ここだけが効く。 */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .work {
      animation: turn-page linear both;
      animation-timeline: view(inline);
      animation-range: entry 0% exit 100%;
    }
  }
}
@keyframes turn-page {
  0%   { transform: rotateY(24deg) scale(.9); opacity: .38; }
  50%  { transform: rotateY(0) scale(1); opacity: 1; }
  100% { transform: rotateY(-24deg) scale(.9); opacity: .38; }
}

/* ──────────────────────────────────────────────
   縦にスクロールすると、札が横に流れる

   2026-08-20 本間さん「あのスクロールで写真が横に動く感じでメニューにするのは
   どう？」。画面をその場に留めて、中身だけを横へ送る。

   ★これもJavaScriptを使わない（スクロール連動のアニメーションはCSSにある）。
   ★大きい画面のときだけ。スマホでこれをやると、指で送れず窮屈になるので、
     そのときは今までどおり横に吸い付く並びのまま。
   ★動きを止めている人にも、横に吸い付く並びのまま出す。
   ★対応していない端末でも同じ。足場（works-track / works-pin）が
     何もしない箱に戻るだけで、崩れない。
   ────────────────────────────────────────────── */

/* ★横送りは自前のJSが引き受ける（html.slides が付く）。
   CSSのスクロール連動でも書けるが、対応していると答えて実際には動かない場面が
   あるため（2026-08-21、それで動かなかった）。JSが死ねば、ふつうに横へ払える
   帯として残る。 */
html.slides #works { max-width: none; padding: 0; }
html.slides .works-track {
  /* 1枚がほぼ1画面ぶんあるので、1枚あたり1画面ぶん近く回す。
     短くすると、大きい札が猛烈な速さで通り過ぎて読めない */
  height: calc(100vh + var(--deck-cards, 4) * 96vh);
  position: relative;
}
html.slides .works-pin {
  position: sticky; top: 0; height: 100vh;
  display: grid; align-content: center; overflow: hidden;
}
html.slides .works {
  overflow: visible; width: max-content;
  scroll-snap-type: none; padding: 0 7vw; gap: 44px;
  will-change: transform;
}
/* ★1枚でほぼ1ページぶん（本間さん「1カード1ページくらいで」）。
   高さは画面の8割まで。画面いっぱいにすると、上下が窮屈で息が詰まる。
   ★大きくするなら横に。縦に伸ばすと画面の高さをはみ出して下が切れる。 */
html.slides .works .work {
  flex-basis: min(1180px, 86vw);
  display: grid; grid-template-columns: 1.15fr .85fr;
  height: min(80vh, 660px);
  animation: none;
}
html.slides .works .work-photo { aspect-ratio: auto; height: 100%; }
html.slides .works .work-words {
  align-content: center; padding: 48px 56px 52px;
  border-left: 1px solid var(--line);
}
html.slides .works .work-no { font-size: 3.4rem; line-height: 1; margin-bottom: 26px; opacity: .5; }
html.slides .works .work-words h3 {
  font-size: clamp(1.8rem, 3.4vw, 2.9rem); margin-bottom: 26px; letter-spacing: .16em;
}
html.slides .works .work-words p { font-size: 1rem; line-height: 2.3; }

/* 読み飛ばすボタン。★留まる作りのときだけ出す（留まらないなら飛ばす先が無い）。
   薄く置くが、押せないほど薄くはしない。触れると濃くなる。 */
html.slides .deck-skip {
  display: inline-block; position: absolute; right: 7vw; bottom: 34px; z-index: 3;
  text-decoration: none; font-family: var(--jp-gothic);
  font-size: .72rem; letter-spacing: .16em; color: var(--muted);
  padding: 9px 20px; border: 1px solid var(--line); border-radius: 999px;
  background: color-mix(in srgb, var(--ground) 72%, transparent);
  opacity: .55; transition: opacity .3s ease, color .3s ease, border-color .3s ease;
}
html.slides .deck-skip:hover, html.slides .deck-skip:focus-visible {
  opacity: 1; color: var(--ink); border-color: var(--accent);
}

/* どこまで来たかの細い線。横の区間に入ったことが分かるようにする */
html.slides .works-pin::after {
  content: ""; position: absolute; left: 7vw; right: 7vw; bottom: 48px;
  height: 1px; background: var(--line);
}
html.slides .works-pin::before {
  content: ""; position: absolute; left: 7vw; bottom: 48px; z-index: 2;
  height: 1px; background: var(--accent);
  width: calc((100% - 14vw) * var(--deck-done, 0));
}
/* 送っている間は番号の並びを出さない。飛び先が動いているので、押しても合わない */
html.slides #works .work-index { display: none; }

}

}

.photo {
  margin: 0; overflow: hidden;
  border: 1px solid var(--line); border-radius: var(--round-lg);
}
.photo img { width: 100%; height: 360px; object-fit: cover; }

.lead { font-size: .95rem; }
.big-lead {
  font-family: var(--jp-mincho);
  max-width: var(--narrow); margin: 0;
  font-size: clamp(1rem, 2.2vw, 1.16rem); line-height: 2.4;
}

/* ── 足 ───────────────────────────────────────── */

.site-foot {
  padding: 46px 32px 56px; text-align: center;
  color: var(--muted); font-family: var(--jp-gothic);
  font-size: .72rem; letter-spacing: .18em;
}
.site-foot p { margin: 0; }

/* ──────────────────────────────────────────────
   動き。JavaScript は置かない（壊れないことが売り物なので）。
   ★動きを止めている人には、いっさい動かさない。
   ────────────────────────────────────────────── */

/* ──────────────────────────────────────────────
   ふわっと上がってくる

   2026-08-20 本間さん「お客様の声までをカードが下から出てくるイメージで」
   →「ふわって上がってくる感じで」。

   下から上がる・少し大きくなる・ぼけが晴れる、の3つを重ねる。
   ぼけが晴れる分があると、ただ動くのではなく「浮かび上がる」に見える。

   ★1枚ずつ間を空ける（同じ並びの2枚目・3枚目…と遅らせる）。
     全部が同時に出ると、板が1枚動いただけに見えて、札に見えない。
   ★動きを止めている人には、いっさい動かさない。
   ★対応していない端末では、最初からそこに在る。何も欠けない。
   ────────────────────────────────────────────── */

/* 泡が浮かび上がって、少し行き過ぎて、止まる。
   ★「行き過ぎて戻る」が入っていないと、ただ上へ動いただけに見える。
     泡に見えるのは、この最後のひと揺れのおかげ。 */
@keyframes bubble-up {
  0%   { opacity: 0; transform: translateY(190px) scale(.82) rotate(-1.6deg); filter: blur(14px); }
  45%  { opacity: 1; }
  74%  { transform: translateY(-30px) scale(1.035) rotate(.7deg); filter: blur(0); }
  88%  { transform: translateY(9px) scale(.995) rotate(-.25deg); }
  100% { opacity: 1; transform: none; filter: blur(0); }
}
/* 右へ／左へ、ほんの少し流れながら上がる。まっすぐ上がると機械に見える */
@keyframes bubble-up-left {
  0%   { opacity: 0; transform: translate(44px, 190px) scale(.82) rotate(1.6deg); filter: blur(14px); }
  45%  { opacity: 1; }
  74%  { transform: translate(-14px, -30px) scale(1.035) rotate(-.7deg); filter: blur(0); }
  88%  { transform: translate(4px, 9px) scale(.995) rotate(.25deg); }
  100% { opacity: 1; transform: none; filter: blur(0); }
}

/* スクロールしている間だけ、ゆらゆらする。
   2026-08-20 本間さん「止まってるときに動くのはやめて酔う」。

   ★時間で動かすのをやめて、スクロールで動かす。手を止めれば、絵も止まる。
     ずっと動いているものが画面にあると、読んでいるあいだ中ずっと目が引かれて酔う。
   ★transform ではなく translate / rotate を使う。transform は浮かび上がりが
     使っているので、同じ場所に2つ書くと片方しか効かない。別枠なら重ねられる。
   ★行きと帰りで違う道を通る。同じ道を往復すると、振り子に見えて機械っぽい。 */
@keyframes sway-a {
  0%   { translate: 0 0; rotate: 0deg; }
  22%  { translate: 7px -17px; rotate: .75deg; }
  52%  { translate: -6px -24px; rotate: -.6deg; }
  78%  { translate: 4px -9px; rotate: .35deg; }
  100% { translate: 0 0; rotate: 0deg; }
}
@keyframes sway-b {
  0%   { translate: 0 0; rotate: 0deg; }
  26%  { translate: -8px -21px; rotate: -.8deg; }
  58%  { translate: 6px -12px; rotate: .55deg; }
  82%  { translate: -3px -18px; rotate: -.3deg; }
  100% { translate: 0 0; rotate: 0deg; }
}
@keyframes draw { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@keyframes ease-in-close { from { opacity: 0; transform: scale(1.06); filter: blur(8px); }
                           to { opacity: 1; transform: none; filter: blur(0); } }

/* ページを開いた1回だけ動く分。ここは時間で動くが、終われば止まる */
.hero .eyebrow { animation: bubble-up 1.2s cubic-bezier(.16, .84, .32, 1) .05s backwards; }
.hero h1 { animation: bubble-up 1.4s cubic-bezier(.16, .84, .32, 1) .22s backwards; }
.hero .lead { animation: bubble-up-left 1.4s cubic-bezier(.16, .84, .32, 1) .42s backwards; }
.hero-call { animation: bubble-up 1.4s cubic-bezier(.16, .84, .32, 1) .62s backwards; }
.hero-inner::after { animation: ease-in-close 1.9s cubic-bezier(.16, .84, .32, 1) .1s backwards; }

@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    /* ★入場（浮かび上がり）は .in に一本化した。ここに残すのは、スクロールに
       連れて進む「ゆらゆら」だけ。両方をCSSで持つと、二重に動く。 */
    .stat, .card, .step, .voice, .photo-band .photo, .big-lead, .work-index, .profile tr {
      animation: sway-a 1s linear both;
      animation-timeline: view();
      animation-range: cover 0% cover 100%;
    }
    .stat-row > :nth-child(even), .cards > :nth-child(even),
    .steps > :nth-child(even), .voice-row > :nth-child(even) { animation-name: sway-b; }

    /* 1枚ずつ、浮かび始める位置をずらす（スクロールで進む動きなので、
       時間ではなく位置をずらす）。ゆらゆらのほうは通り過ぎるあいだ中で固定 */
    .stat-row > :nth-child(2), .cards > :nth-child(2),
    .steps > :nth-child(2), .voice-row > :nth-child(2) {
      animation-range: cover 0% cover 100%; }
    .stat-row > :nth-child(3), .cards > :nth-child(3),
    .steps > :nth-child(3), .voice-row > :nth-child(3) {
      animation-range: cover 0% cover 100%; }
    .stat-row > :nth-child(4), .cards > :nth-child(4),
    .steps > :nth-child(4) {
      animation-range: cover 0% cover 100%; }
    .cards > :nth-child(5), .steps > :nth-child(5) {
      animation-range: cover 0% cover 100%; }
    .cards > :nth-child(6), .steps > :nth-child(6) {
      animation-range: cover 0% cover 100%; }

    main > section:has(> h2):not(#cta) > h2 {
      animation: draw .9s cubic-bezier(.16, .84, .32, 1) both; transform-origin: top;
      animation-timeline: view(); animation-range: entry 0% entry 46%;
    }
  }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation: none !important; transition: none !important;
    translate: none !important; rotate: none !important;
  }
}

/* 働いているところの1枚。求人ページの真ん中に、横に広く置く。
   ★字だけの求人ページは「どんな店か」が伝わらない。ここは写真の役目が大きい。 */
.photo-band { padding-top: 8px; padding-bottom: 8px; }
.photo-band .photo img { height: clamp(240px, 42vw, 480px); }

/* 数字は0から数え上がる。★数える係はJSに一本化した（2026-08-21）。

   はじめはCSSだけ（@property と counter）でやっていたが、危ない作りだった。
   ブラウザが「対応している」と答えるのに実際には動かない場面があり、そのとき
   数字が「0」のまま止まって出る。数字が0で出るのは、動かないより悪い。
   JSなら、数え上がらなくても最後の数字がそのまま出ている。
   ★桁区切りのある数（26,000）は数え上げない。カンマが打てず読みにくくなるので。 */

}

/* ──────────────────────────────────────────────
   見せ場：一言が1文字ずつ立ち上がる

   ★字で写真を切り抜くのはやめた（柄にしか見えない）。字でやるなら、
     字そのものを動かすほうが効くし、読みやすさも落ちない。
   ★1文字ごとに 40ms ずつ遅らせる。15文字で0.6秒。長すぎると待たされる。
   ★対応していない端末・動きを止めている人には、最初からそこに在る。
   ────────────────────────────────────────────── */

.hero h1 span {
  display: inline-block;
  animation: letter-up .9s cubic-bezier(.16, .84, .32, 1) backwards;
  animation-delay: calc(.34s + var(--i) * 40ms);
}
@keyframes letter-up {
  from { opacity: 0; transform: translateY(46px) rotate(-4deg); filter: blur(6px); }
  to   { opacity: 1; transform: none; filter: blur(0); }
}


/* ──────────────────────────────────────────────
   受け皿：CSSのスクロール連動が効かない端末のため

   2026-08-21、JSの決めを直した。外の部品はゼロのまま、自前・インライン・
   数十行だけ使う。CSSのスクロール連動は2023年からの新しい機能で、少し古い端末
   （特にSafari）では効かない＝何も動かない。そこを埋める。

   ★隠す指定は、JSが付ける .js-motion の下にしか置かない。
     JSが死ねば何も隠れず、中身は最初から全部読める。
   ────────────────────────────────────────────── */

html.js-motion .stat, html.js-motion .card, html.js-motion .step,
html.js-motion .voice, html.js-motion .work-index, html.js-motion .big-lead,
html.js-motion .photo-band .photo, html.js-motion .profile tr { opacity: 0; }
html.js-motion .in { animation: bubble-up 1s cubic-bezier(.16, .84, .32, 1) both; }
html.js-motion .stat-row > :nth-child(even).in, html.js-motion .cards > :nth-child(even).in,
html.js-motion .steps > :nth-child(even).in, html.js-motion .voice-row > :nth-child(even).in {
  animation-name: bubble-up-left;
}

/* 1枚ずつ遅らせる。★全部が同時に出ると、板が1枚動いただけに見えて、札に見えない。 */
html.js-motion .stat-row > :nth-child(2).in, html.js-motion .cards > :nth-child(2).in,
html.js-motion .steps > :nth-child(2).in, html.js-motion .voice-row > :nth-child(2).in { animation-delay: .09s; }
html.js-motion .stat-row > :nth-child(3).in, html.js-motion .cards > :nth-child(3).in,
html.js-motion .steps > :nth-child(3).in, html.js-motion .voice-row > :nth-child(3).in { animation-delay: .18s; }
html.js-motion .stat-row > :nth-child(4).in, html.js-motion .cards > :nth-child(4).in,
html.js-motion .steps > :nth-child(4).in { animation-delay: .27s; }
html.js-motion .cards > :nth-child(5).in, html.js-motion .steps > :nth-child(5).in { animation-delay: .36s; }
html.js-motion .cards > :nth-child(6).in, html.js-motion .steps > :nth-child(6).in { animation-delay: .45s; }


/* ──────────────────────────────────────────────
   ページを移っても、切り替わらずに繋がる

   2026-08-21、試作で本間さんに見てもらって「いいですね」。本番へ入れる。
   ★これはCSSだけの仕事。JavaScriptは1行も足していない。
     ブラウザに2024年から入った仕組みで、jQuery時代の作りでは原理的にできない。
   ★対応していない端末では、ふつうにページが切り替わるだけ。中身は何も欠けない。
   ★上の並び（店名と献立）には同じ名前を付けてある。ページを移っても、そこだけは
     動かずに残る。動かないものが1つあると、移動が「同じ建物の中の移動」に見える。
   ────────────────────────────────────────────── */

@view-transition { navigation: auto; }

.site-head { view-transition-name: site-head; }

::view-transition-group(*) {
  animation-duration: .6s;
  animation-timing-function: cubic-bezier(.2, .84, .24, 1);
}
::view-transition-group(site-head) { animation-duration: .01s; }

::view-transition-new(root) { animation: page-rise .62s cubic-bezier(.16, .84, .32, 1) both; }
::view-transition-old(root) { animation: page-sink .32s ease both; }
@keyframes page-rise { from { opacity: 0; transform: translateY(26px); } }
@keyframes page-sink { to { opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) {
    animation: none !important;
  }
}