/* 総合ページ（動きの案）の土台：色・文字・ヘッダー・ボタン・現れ方・一番上
   色は 黒が土台＋金1色（社長が決めたこと）。大きな見出しだけ細い明朝、本文は今の版と同じ */

:root {
  --kuro: #050507;
  --kin: #C9A227;
  --sen: #1C1C20;
  --usui: #C4C4CC;
  --yawaraka: cubic-bezier(.16, 1, .3, 1);
}

html { scroll-behavior: auto; }
body { margin: 0; min-width: 1280px; background: var(--kuro); color: #FFFFFF; overflow-x: clip;
  font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", sans-serif;
  font-size: 15px; line-height: 1.9; font-feature-settings: "palt" 1; }
a { color: #FFFFFF; text-decoration: none; }
a:hover { color: var(--kin); }
h1, h2, p { margin: 0; font-weight: inherit; font-size: inherit; }
p { text-wrap: pretty; }

.anton { font-family: "Anton", sans-serif; font-weight: 400; letter-spacing: .01em; }
.zk { font-family: "Zen Kaku Gothic New", sans-serif; }
.bc { font-family: "Barlow Condensed", sans-serif; font-variant-numeric: tabular-nums; }
.mincho { font-family: "Noto Serif JP", "Hiragino Mincho ProN", serif; font-weight: 300; letter-spacing: .04em; }
.seiyo { font-family: "Cormorant Garamond", "Noto Serif JP", serif; font-weight: 300; font-variant-numeric: lining-nums; }
.gold { color: var(--kin); }

.waku { max-width: 1280px; margin: 0 auto; padding: 0 32px; box-sizing: border-box; width: 100%; }

/* 写真の枠（今の版と同じ。右下の「見本」の札も残す） */
.ph { position: relative; overflow: hidden; background: #0C0C0F; display: block; }
.ph .fill { display: block; position: absolute; left: 0; top: 0; width: 100%; height: 100%; object-fit: cover; will-change: transform; }
.ph::after { content: "見本"; position: absolute; right: 8px; bottom: 8px; z-index: 3;
  font-family: "Barlow Condensed", sans-serif; font-size: 10px; letter-spacing: .18em;
  color: #FFFFFF; background: rgba(0,0,0,.5); padding: 1px 7px; line-height: 1.6; }
.dark { position: absolute; inset: 0; background: rgba(5,5,7,.62); }
.up { position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(5,5,7,.10) 0%, rgba(5,5,7,.60) 58%, rgba(5,5,7,.95) 100%); }
.on { position: absolute; inset: 0; display: flex; z-index: 2; }
.on-shita { align-items: flex-end; }

.sen { width: 52px; height: 1px; background: var(--kin); display: block; flex: none; }
.sen-mijika { width: 40px; }
.bango { font-size: 14px; letter-spacing: .3em; }
.bango-usui { font-size: 15px; color: #5A5A62; }

/* ── ヘッダー（常に出す） ── */
.atama { position: fixed; left: 0; right: 0; top: 0; z-index: 50;
  background: linear-gradient(180deg, rgba(5,5,7,.78) 0%, rgba(5,5,7,0) 100%);
  border-bottom: 1px solid transparent; transition: background-color .4s, border-color .4s; }
.atama.koi { background-color: rgba(5,5,7,.94); border-bottom-color: var(--sen); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.atama-naka { height: 84px; display: flex; align-items: center; gap: 34px; }
.atama-na { display: flex; align-items: baseline; gap: 14px; }
.atama-na:hover { color: #FFFFFF; }
.atama-rogo { font-size: 27px; letter-spacing: .06em; }
.atama-sha { font-size: 12.5px; font-weight: 500; color: #8A8A92; letter-spacing: .1em; }
.atama-michi { margin-left: auto; display: flex; gap: 26px; font-size: 13px; }
.atama-michi a { color: #B4B4BC; position: relative; padding: 6px 0; }
.atama-michi a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
  background: var(--kin); transform: scaleX(0); transform-origin: right; transition: transform .45s var(--yawaraka); }
.atama-michi a:hover { color: #FFFFFF; }
.atama-michi a:hover::after { transform: scaleX(1); transform-origin: left; }
.atama-botan { padding: 12px 26px; font-size: 13px; letter-spacing: .06em; }

/* ── ボタン（形は四角のまま。マウスを乗せた所から色が丸く広がって全体を塗る） ── */
.botan { position: relative; overflow: hidden; display: inline-block; box-sizing: border-box;
  padding: 17px 38px; font-weight: 700; font-size: 15px; line-height: 1.9;
  border: 1px solid var(--fuchi); color: var(--ji); background: var(--ji-shita);
  transition: color .3s, border-color .3s; }
.botan > span { position: relative; z-index: 1; }
.botan::before { content: ""; position: absolute; left: var(--mx, 50%); top: var(--my, 100%);
  width: var(--kei, 400px); height: var(--kei, 400px);
  margin: calc(var(--kei, 400px) / -2) 0 0 calc(var(--kei, 400px) / -2);
  border-radius: 50%; background: var(--nuri); transform: scale(0);
  transition: transform .45s var(--yawaraka); }
.botan:hover::before { transform: scale(1); }
.botan:hover { color: var(--ji-ato); border-color: var(--fuchi-ato); }
.nuri-kin  { --ji: #050507; --ji-shita: #C9A227; --fuchi: #C9A227; --nuri: #050507; --ji-ato: #C9A227; --fuchi-ato: #C9A227; }
.sen-shiro { --ji: #FFFFFF; --ji-shita: transparent; --fuchi: #8A8A92; --nuri: #C9A227; --ji-ato: #050507; --fuchi-ato: #C9A227; }
.sen-kin   { --ji: #C9A227; --ji-shita: transparent; --fuchi: #C9A227; --nuri: #C9A227; --ji-ato: #050507; --fuchi-ato: #C9A227; }
.botan-oki { padding: 19px 44px; }
.botan-narabi { display: flex; gap: 14px; margin-top: 36px; }
.botan-naka { justify-content: center; }

/* ── 現れ方（画面に入った時に1回だけ。動かす設定の時だけ効く） ── */
.gyo { display: block; overflow: hidden; }
.gyo > span { display: block; }
.ugoku .gyo > span { transform: translateY(108%);
  transition: transform 1.15s var(--yawaraka); transition-delay: calc(var(--jun, 0) * .11s); }
.ugoku .deru { opacity: 0; transform: translateY(26px);
  transition: opacity 1s ease, transform 1.1s var(--yawaraka); transition-delay: calc(var(--jun, 0) * .11s); }
.ugoku .maku { clip-path: inset(100% 0 0 0);
  transition: clip-path 1.25s var(--yawaraka); transition-delay: calc(var(--jun, 0) * .13s); }
.ugoku .mieta .gyo > span, .ugoku .mieta.gyo > span { transform: none; }
.ugoku .mieta .deru, .ugoku .mieta.deru { opacity: 1; transform: none; }
.ugoku .mieta .maku, .ugoku .mieta.maku { clip-path: inset(0 0 0 0); }

/* ── 一番上 ── */
.hero { height: 100vh; min-height: 640px; max-height: 1100px; }
.ugoku .hero-e { scale: 1.12; transition: scale 2.6s var(--yawaraka); }
.ugoku .hero.mieta .hero-e { scale: 1; }
.hero-kage { background: linear-gradient(180deg, rgba(5,5,7,.10) 0%, rgba(5,5,7,.30) 34%, rgba(5,5,7,.80) 72%, rgba(5,5,7,.97) 100%); }
.hero-on { align-items: flex-end; }
.hero-naka { padding-bottom: 72px; }
.kata { display: flex; align-items: center; gap: 14px; }
.kata-ji { font-size: 13px; letter-spacing: .26em; font-weight: 700; }
.hero-dai { font-size: clamp(64px, 9.4vh, 88px); line-height: 1.22; margin-top: 22px; letter-spacing: .02em; }
.hero-bun { margin-top: 24px; font-size: 16px; color: var(--usui); max-width: 50ch; font-weight: 300; }