@charset "utf-8";
/* ==========================================================================
NOVA Design ｜ 自社サイト
設計の根拠：06_NOVA自社サイト/リサーチノート.md ／ Notion「デザイン業界」分析4件
／ 00_管理資料/スキル/制作/HP制作_スタンダード.md §3 §5
--------------------------------------------------------------------------
★トークン制約（スキル §3）
色 ：文字2種／背景2種／ブランド赤3段＋金1 ＝ 計8
書体 ：2種（和文1＋欧文ディスプレイ1）
級数 ：5段階のみ 角丸：反転セクションのみ 影：なし
実測の根拠：上位3件＝級数2〜5段階・CSS変数15〜24件／kobako＝級数17段階・変数2件
--------------------------------------------------------------------------
★色はロゴから起こしている（スキル §5 技法⑬）
nova-badge.svg = #46202B（ボルドー） / #F2EADF（クリーム）
カバー配色 = #46202B × #C9B27C（金）
色相を 343〜348° に固定したまま、彩度と明度だけ変えて3段作った。
========================================================================== */
:root{
/* --- 色（★2026-08-14 反転：地を黒にして、銀河を透かす） -------------
NOVA＝新星。Aboutの本文「星が明るくなって見えるようになる」と地を一致させる。
すべて色相 343〜348°（ロゴのボルドーと同じ）に揃えてあり、彩度と明度だけ動かす。 */
/* 地。⚠️ 最初 #140F12（H324 S14%）にしたら、パネルの #46202B（H343 S37%）から
色相が19°・彩度が23ポイント離れていて、赤と黒が「別の色」として浮いた（本人指摘）。
★色相と彩度をパネルに揃え、明度だけ落とす（H344 S37% L8%）。 */
--c-bg: #1C0D11;
--c-ink: #F2EADF; /* 本文。ロゴのクリームそのもの。地に対して 14.7:1 */
--c-sub: #9A8E8B; /* 副文字。地に対して 5.9:1（AA） */
--c-line: #3A2129; /* 罫線。装飾のみ。これも同じ色相に乗せる */
/* ブランドの赤・金（★用途を混ぜない） */
--c-brand: #46202B; /* hsl(343,37%,20%) ロゴ本体・パネルの面 */
--c-accent: #D2566F; /* hsl(348,58%,58%) 黒地で文字に使える赤。地に対して 4.8:1 */
--c-glow: #B5304B; /* ★光と粒子専用。color: に書いたら設計違反 */
--c-gold: #C9B27C; /* ブランドの金。地に対して 9.2:1。黒地では主力の色になる */
/* パネル（FV・料金・フッター）＝カバー画像の実測そのまま */
/* パネル。★端を地に寄せて（L20%→L12%）、境目の段差を消す。
さらに 4〜6% 透かして、後ろの銀河をうっすら通す＝赤と黒が同じ素材に見える。 */
--g-deep: radial-gradient(125% 95% at 82% 6%,
rgba(90,42,55,.82) 0%, rgba(70,32,43,.82) 44%, rgba(51,24,33,.76) 100%);
/* --- 書体（2種） ---------------------------------------------------- */
/* 和文はシステムフォント。
⚠️ Google Fonts の和文は日本語サブセット分割で 51ファイル・465KB になり、
転送量が 512KB（目標300KB）を超えた。kobako が 737ファイルになったのと同じ現象。 */
--f-ja: "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic Medium", "Yu Gothic", "Noto Sans JP", system-ui, sans-serif;
--f-en: "Marcellus", Georgia, "Times New Roman", serif; /* 見出し・ラベル専用 */
/* --- 級数（5段階のみ。中間サイズを足さない） ------------------------ */
--t-xs: clamp(11px, .78vw, 12px);
--t-s: clamp(14px, .95vw, 15px);
--t-m: clamp(18px, 1.4vw, 21px);
--t-l: clamp(30px, 3.6vw, 52px);
/* ⚠️ 下限38pxだと 320px幅で「開業の世界観を、」が入りきらず、
「、」だけが次の行に取り残された（実機320pxで検出）。
vw係数を上げて下限を30pxに落とし、狭い画面でも1行に収まるようにする。
上限104pxは、右上の3Dロゴにぶつからない値として実測で決めたもの。 */
--t-xl: clamp(30px, 8.6vw, 104px);
/* --- 余白（8の倍数） ------------------------------------------------ */
--sp-1: 8px; --sp-2: 16px; --sp-3: 24px; --sp-4: 40px;
--sp-5: 64px; --sp-6: 96px; --sp-7: 128px;
--pdg-side: clamp(20px, 5vw, 100px);
--h-header: 78px;
--wrap: 1240px;
/* --- 秒数とイージング（すべて実測値） -------------------------------- */
--e-out: cubic-bezier(.22,.61,.36,1);
--e-back: cubic-bezier(.175,.885,.32,1.275); /* タニカの「ポンっ」 */
--e-mask: cubic-bezier(.32,.94,.60,1); /* GARDEN EIGHT */
--d-hover: .25s;
--d-sand: .50s; /* 技法⑫：1文字の所要時間 */
--d-char: 22ms; /* 技法⑫：1文字あたりのずらし */
--progress: 0;
}
/* ========== リセット ========== */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body{
margin:0; background:var(--c-bg); color:var(--c-ink);
font-family:var(--f-ja); font-size:var(--t-s); font-weight:400;
line-height:2; letter-spacing:.04em;
font-feature-settings:"palt";
overflow-x:hidden;
}
img,svg,video{ max-width:100%; height:auto; display:block; }
a{ color:inherit; text-decoration:none; }
ul,ol{ list-style:none; margin:0; padding:0; }
h1,h2,h3,h4,p,figure,dl,dd{ margin:0; }
button,input,select,textarea{ font:inherit; color:inherit; }
/* キーボード操作を見えるようにする（実測4件中2件が :focus 0件） */
:focus-visible{ outline:2px solid var(--c-accent); outline-offset:3px; }
.skip{ position:absolute; left:-9999px; top:0; z-index:100; background:var(--c-ink); color:var(--c-bg); padding:12px 20px; min-height:44px; display:flex; align-items:center; }
.skip:focus{ left:0; }
/* ========== 共通レイアウト ========== */
.wrap{ width:min(100% - var(--pdg-side)*2, var(--wrap)); margin-inline:auto; }
.section{ padding-block:clamp(72px,10vw,var(--sp-7)); }
.lead{ font-size:var(--t-m); line-height:1.95; }
.sub{ color:var(--c-sub); }
.sec-label{
font-family:var(--f-en); font-size:var(--t-xs);
letter-spacing:.28em; text-transform:uppercase; color:var(--c-sub);
display:flex; align-items:center; gap:12px; margin-bottom:var(--sp-2);
}
.sec-label::before{ content:""; width:6px; height:6px; background:var(--c-accent); flex:none; }
.sec-title{ font-size:var(--t-l); line-height:1.42; letter-spacing:.02em; font-weight:500; }
/* ==========================================================================
★技法⑫：文字が「砂のように」端から現れる
--------------------------------------------------------------------------
マスクせり上がり（技法①）は行がガタッと上下するため、和文の見出しでは
「文字が震えている」ように見えた（本人指摘・2026-08-14）。全面的にこちらへ置換。
JS が1文字ずつ span に割り、元の文は aria-label に残す（読み上げ対策）。
========================================================================== */
/* 1行＝1つの [data-sand]。改行は
ではなく要素を分ける（JSがtextContentを割るため） */
h1 > [data-sand], .sec-title > [data-sand]{ display:block; }
.sand > span{
display:inline-block;
opacity:0;
/* ★ぼかしと散らしは em で書く。px固定だと 128px の見出しでは効かず、
15px の文字では飛びすぎる（級数が5段階＝10倍の差があるため） */
filter:blur(.1em);
transform:translate(calc(var(--r) * .20em), calc(var(--r) * .13em)) scale(.84);
transition:
opacity var(--d-sand) ease-out,
filter var(--d-sand) ease-out,
transform var(--d-sand) var(--e-out);
transition-delay:calc(var(--i) * var(--d-char));
}
.is-shown .sand > span{ opacity:1; filter:blur(0); transform:none; }
/* 軽い出現（見出し以外） */
.rise{ opacity:0; transform:translateY(18px); transition:opacity .66s var(--e-out), transform .66s var(--e-out); }
.is-shown .rise, .rise.is-shown{ opacity:1; transform:none; }
.d1{ transition-delay:.10s } .d2{ transition-delay:.20s } .d3{ transition-delay:.30s }
/* 子要素を順番に立ち上げる */
.stagger > *{ opacity:0; transform:translateY(20px); transition:opacity .66s var(--e-out), transform .66s var(--e-out); }
.is-shown .stagger > *{ opacity:1; transform:none; }
.is-shown .stagger > *:nth-child(1){ transition-delay:.04s }
.is-shown .stagger > *:nth-child(2){ transition-delay:.10s }
.is-shown .stagger > *:nth-child(3){ transition-delay:.16s }
.is-shown .stagger > *:nth-child(4){ transition-delay:.22s }
.is-shown .stagger > *:nth-child(5){ transition-delay:.28s }
.is-shown .stagger > *:nth-child(6){ transition-delay:.34s }
.is-shown .stagger > *:nth-child(7){ transition-delay:.40s }
.is-shown .stagger > *:nth-child(n+8){ transition-delay:.46s }
/* ========== ヘッダー（ロゴマーク＋ワードマーク） ========== */
.header{
position:fixed; inset:0 0 auto 0; height:var(--h-header); z-index:50;
display:flex; align-items:center;
background:color-mix(in srgb, var(--c-bg) 88%, transparent);
backdrop-filter:saturate(140%) blur(10px);
border-bottom:1px solid transparent;
transition:border-color .4s var(--e-out), transform .5s var(--e-out);
}
.header.is-scrolled{ border-bottom-color:var(--c-line); }
/* ★FVがボルドーの面なので、いちばん上にいる間だけヘッダーをクリームで出す。
FVを持たない下層ページ（.has-hero が付かない）では最初から通常表示。 */
.has-hero .header:not(.is-scrolled){ background:transparent; backdrop-filter:none; }
.has-hero .header:not(.is-scrolled) .logo .mark{ color:var(--c-ink); }
.has-hero .header:not(.is-scrolled) .logo .word i{ color:color-mix(in srgb, var(--c-ink) 66%, transparent); }
.has-hero .header:not(.is-scrolled) .burger span{ background:var(--c-ink); }
.header.is-hidden{ transform:translateY(-100%); }
.header .wrap{ display:flex; align-items:center; justify-content:space-between; gap:var(--sp-3); }
.logo{ display:flex; align-items:center; gap:11px; min-height:44px; }
.logo .mark{
width:34px; height:34px; flex:none; display:block; color:var(--c-ink);
opacity:0; transform:scale(.72) rotate(-14deg);
transition:opacity .9s var(--e-out), transform .9s var(--e-back);
}
.is-lit .logo .mark{ opacity:1; transform:none; }
.logo .word{
display:flex; flex-direction:column; line-height:1.1;
opacity:0; transform:translateX(-6px);
transition:opacity .8s .18s var(--e-out), transform .8s .18s var(--e-out);
}
.is-lit .logo .word{ opacity:1; transform:none; }
.logo .word b{ font-family:var(--f-en); font-size:17px; font-weight:400; letter-spacing:.2em; }
.logo .word i{ font-style:normal; font-size:10px; letter-spacing:.28em; color:var(--c-sub); }
.gnav ul{ display:flex; gap:clamp(18px,2.4vw,38px); }
.gnav a{
font-family:var(--f-en); font-size:var(--t-xs); letter-spacing:.2em; text-transform:uppercase;
min-height:44px; display:flex; align-items:center; padding:0 2px; position:relative; /* タップ44px */
transition:opacity var(--d-hover) var(--e-out);
}
.gnav a::after{
content:""; position:absolute; left:0; right:0; bottom:12px; height:1px;
background:currentColor; transform:scaleX(0); transform-origin:right;
transition:transform .5s var(--e-out);
}
.gnav a:hover::after, .gnav a[aria-current="page"]::after{ transform:scaleX(1); transform-origin:left; }
.burger{ display:none; width:44px; height:44px; background:none; border:0; cursor:pointer; padding:0; }
.burger span{ display:block; width:22px; height:1px; background:var(--c-ink); margin:5px auto; transition:transform .25s var(--e-out), opacity .25s; }
.is-open .burger span:nth-child(1){ transform:translateY(6px) rotate(45deg); }
.is-open .burger span:nth-child(2){ opacity:0; }
.is-open .burger span:nth-child(3){ transform:translateY(-6px) rotate(-45deg); }
/* ========== FV（★カバー画像と同じ「ボルドーの面 × クリームの文字」） ========== */
.hero{
position:relative; min-height:100svh; display:flex; align-items:center;
padding-top:var(--h-header);
background:var(--g-deep); color:var(--c-ink);
border-radius:0 0 clamp(24px,4vw,64px) clamp(24px,4vw,64px);
overflow:hidden;
}
.hero .wrap{ position:relative; z-index:2; padding-bottom:clamp(64px,11vh,120px); }
.hero h1{
font-size:var(--t-xl); font-family:var(--f-ja); font-weight:500;
line-height:1.16; letter-spacing:.01em; max-width:14em;
line-break:strict; /* 句読点が行頭に来ないようにする（禁則） */
word-break:normal; overflow-wrap:anywhere;
}
.hero .en{
font-family:var(--f-en); font-size:var(--t-xs); letter-spacing:.3em;
text-transform:uppercase; margin-bottom:var(--sp-3);
color:var(--c-gold);
}
.hero .desc{ margin-top:var(--sp-4); max-width:34em; }
/* 濃色面なので .sub の暗いグレーは効かない。クリームの透過で階調を作る */
.hero .desc.sub, .hero .meta{ color:color-mix(in srgb, var(--c-ink) 78%, transparent); }
.hero .meta{
position:absolute; left:0; bottom:var(--sp-4);
display:flex; gap:var(--sp-3); font-family:var(--f-en);
font-size:var(--t-xs); letter-spacing:.16em;
}
/* FVの立ち上がり順 */
.hero .en, .hero .desc, .hero .meta, .scroll-cue{
opacity:0; transform:translateY(14px);
transition:opacity .74s var(--e-out), transform .74s var(--e-out);
}
.hero.is-shown .en { opacity:1; transform:none; transition-delay:.05s; }
.hero.is-shown .desc { opacity:1; transform:none; transition-delay:.46s; }
.hero.is-shown .meta { opacity:1; transform:none; transition-delay:.62s; }
.hero.is-shown .scroll-cue{ opacity:1; transform:none; transition-delay:.78s; }
.scroll-cue{
position:absolute; right:var(--pdg-side); bottom:0; z-index:2;
display:grid; gap:10px; justify-items:center;
font-family:var(--f-en); font-size:var(--t-xs); letter-spacing:.24em;
writing-mode:vertical-rl; color:color-mix(in srgb, var(--c-ink) 70%, transparent);
}
.scroll-cue i{ display:block; width:1px; height:44px; background:color-mix(in srgb, var(--c-ink) 28%, transparent); position:relative; overflow:hidden; }
.scroll-cue i::after{
content:""; position:absolute; inset:0; background:var(--c-gold);
animation:cue 2.2s var(--e-out) infinite;
}
@keyframes cue{ 0%{transform:translateY(-100%)} 60%,100%{transform:translateY(100%)} }
/* ---------- FVの3D（ロゴ本体・canvas） ---------- */
.nova-wrap{ position:absolute; inset:0; z-index:1; pointer-events:none; overflow:hidden; }
.nova-cv{ width:100%; height:100%; display:block; }
/* ---------- ★ページ全体の背後を流れる粒子の3D（nirnor の型） ----------
位置固定・全画面。地の色の面は透明のままにして、この canvas を透かして見せる。
濃色セクション（.deep）は自前の背景を持つので、その上には出ない。 */
.field-cv{
position:fixed; inset:0; width:100%; height:100%;
z-index:0; pointer-events:none; display:block;
}
/* ⚠️ ここを `body > *:not(.field-cv)` と書いたら、`.skip{position:absolute}` が
relative に戻されて流れに残り、ページ上端に44pxの黒帯ができた。
★`親 > *` で position を書くと、絶対配置の子を必ず壊す。器だけを名指しする。
（同じ間違いを `.deep > *` でも踏んで canvas を潰している） */
main, .foot{ position:relative; z-index:1; }
/* ========== 濃色セクション（★地の色を1回だけ反転。角丸で覆う） ========== */
.invert{
background:var(--g-deep); color:var(--c-ink);
border-radius:clamp(24px,4vw,64px) clamp(24px,4vw,64px) 0 0;
position:relative;
box-shadow:0 -40px 80px -60px rgba(70,32,43,.45);
}
/* ========== 3つの約束・カード ========== */
.grid-3{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(20px,3vw,44px); }
.card{ border-top:1px solid var(--c-line); padding-top:var(--sp-3); }
.card .no{ font-family:var(--f-en); font-size:var(--t-xs); letter-spacing:.2em; color:var(--c-accent); }
.card h3{ font-size:var(--t-m); font-weight:500; line-height:1.6; margin:var(--sp-1) 0 var(--sp-2); }
.card p{ color:var(--c-sub); }
/* ========== できること（サービス） ========== */
.svc{ border-top:1px solid var(--c-line); }
.svc-row{
display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.5fr) auto;
gap:var(--sp-3); align-items:baseline;
padding-block:clamp(22px,2.6vw,34px); border-bottom:1px solid var(--c-line);
transition:opacity 1.5s var(--e-out), background .5s var(--e-out); /* ★nirnor 実測：1.5秒 */
}
.svc:hover .svc-row{ opacity:.42; }
.svc .svc-row:hover{ opacity:1; background:color-mix(in srgb, var(--c-accent) 5%, transparent); }
.svc-row h3{ font-size:var(--t-m); font-weight:500; transition:transform .55s var(--e-out); }
.svc-row:hover h3{ transform:translateX(6px); }
.svc-row .en{ font-family:var(--f-en); font-size:var(--t-xs); letter-spacing:.2em; color:var(--c-sub); text-transform:uppercase; }
.svc-row .price{ font-family:var(--f-en); font-size:var(--t-m); white-space:nowrap; transition:transform .55s var(--e-out), color .55s var(--e-out); }
.svc-row:hover .price{ transform:translateX(-4px); color:var(--c-accent); }
.svc-row .price small{ font-family:var(--f-ja); font-size:var(--t-xs); color:var(--c-sub); margin-left:4px; }
.svc-row .tags{ display:flex; flex-wrap:wrap; gap:8px; margin-top:6px; }
.tags li{ font-size:var(--t-xs); color:var(--c-sub); }
.tags li::before{ content:"# "; color:var(--c-line); }
/* ========== 制作の流れ ========== */
.flow{ counter-reset:step; display:grid; gap:0; }
.flow li{
counter-increment:step; display:grid;
grid-template-columns:auto minmax(0,14em) minmax(0,1fr); gap:var(--sp-3);
padding-block:var(--sp-3); border-bottom:1px solid var(--c-line); align-items:baseline;
transition:background .5s var(--e-out);
}
.flow li:hover{ background:color-mix(in srgb, var(--c-accent) 4%, transparent); }
.flow li::before{
content:"0" counter(step); font-family:var(--f-en); font-size:var(--t-xs);
letter-spacing:.16em; color:var(--c-accent);
}
.flow h3{ font-size:var(--t-s); font-weight:500; }
.flow p{ color:var(--c-sub); font-size:var(--t-xs); line-height:1.9; }
/* ========== FAQ ========== */
.faq details{ border-bottom:1px solid var(--c-line); }
.faq summary{
cursor:pointer; list-style:none; padding-block:var(--sp-3);
display:flex; gap:var(--sp-2); align-items:flex-start; font-size:var(--t-s);
transition:opacity var(--d-hover) var(--e-out);
}
.faq summary::-webkit-details-marker{ display:none; }
.faq summary:hover{ opacity:.55; }
.faq summary::after{
content:""; margin-left:auto; flex:none; width:11px; height:11px; margin-top:.7em;
border-right:1px solid currentColor; border-bottom:1px solid currentColor;
transform:rotate(45deg); transition:transform .35s var(--e-out);
}
.faq details[open] summary::after{ transform:rotate(-135deg); }
.faq .q{ color:var(--c-accent); font-family:var(--f-en); font-size:var(--t-xs); margin-top:.45em; }
.faq .a{ padding:0 0 var(--sp-3) calc(var(--t-xs) + var(--sp-2)); color:var(--c-sub); }
/* ========== 実績 ========== */
.work{ border-top:1px solid var(--c-line); padding-block:clamp(28px,4vw,56px); }
.work .head{ display:flex; flex-wrap:wrap; gap:var(--sp-2); align-items:baseline; }
.work .client{ font-size:var(--t-xs); color:var(--c-sub); }
.work .badge{ font-size:var(--t-xs); letter-spacing:.08em; border:1px solid var(--c-line); padding:2px 10px; color:var(--c-sub); }
/* ⚠️ h1→h3 の飛びを検出したため h2 に変更（1実績＝1セクション） */
.work h2{ font-size:var(--t-m); font-weight:500; line-height:1.6; margin:var(--sp-2) 0; max-width:38em; }
.work .tags{ display:flex; flex-wrap:wrap; gap:12px; }
/* 写真が入るまでの置き場所（比率だけ確保してCLSを出さない） */
.thumb{
aspect-ratio:16/9; border:1px solid var(--c-line); margin-bottom:var(--sp-3);
display:grid; place-items:center; color:var(--c-sub);
font-family:var(--f-en); font-size:var(--t-xs); letter-spacing:.24em;
background:repeating-linear-gradient(-45deg, transparent 0 9px, color-mix(in srgb, var(--c-line) 45%, transparent) 9px 10px);
transition:opacity 1.5s var(--e-out), transform 1.2s var(--e-out); /* nirnor 実測 */
}
.work:hover .thumb{ opacity:.55; transform:scale(1.01); }
/* ========== 注記ボックス ========== */
.note{
border-left:1px solid var(--c-accent); padding:var(--sp-1) 0 var(--sp-1) var(--sp-3);
color:var(--c-sub); font-size:var(--t-xs); line-height:2.1;
}
/* ========== ボタン ========== */
.btn{
display:inline-flex; align-items:center; gap:14px;
min-height:52px; padding:0 30px; border:1px solid currentColor;
font-family:var(--f-en); font-size:var(--t-xs); letter-spacing:.2em; text-transform:uppercase;
position:relative; overflow:hidden; background:none; cursor:pointer;
}
.btn span{ position:relative; z-index:1; transition:color .5s var(--e-out); }
.btn::before{
content:""; position:absolute; inset:0; background:var(--c-ink);
transform:translateY(101%); transition:transform .5s var(--e-mask);
}
.btn:hover::before{ transform:translateY(0); }
.btn:hover span{ color:var(--c-bg); }
.invert .btn::before, .foot .btn::before{ background:var(--c-ink); }
.invert .btn:hover span, .foot .btn:hover span{ color:var(--c-brand); }
.btn.solid{ background:var(--c-ink); color:var(--c-bg); border-color:var(--c-ink); }
.btn.solid::before{ background:var(--c-accent); }
.btn.solid:hover span{ color:var(--c-bg); }
[data-magnet]{ transition:transform .45s var(--e-out); will-change:transform; }
/* ========== フォーム ========== */
.form{ display:grid; gap:var(--sp-3); max-width:52em; }
.field-row{ display:grid; gap:6px; }
.field-row label{ font-size:var(--t-xs); letter-spacing:.08em; }
.field-row label .req{ color:var(--c-accent); margin-left:6px; }
.field-row input, .field-row select, .field-row textarea{
width:100%; padding:14px 16px; background:color-mix(in srgb, var(--c-ink) 5%, transparent);
border:1px solid transparent; border-radius:0; min-height:52px;
transition:border-color .3s var(--e-out), background .3s var(--e-out);
}
.field-row textarea{ min-height:190px; line-height:1.9; resize:vertical; }
/* ⚠️ ::placeholder を指定しないとブラウザ既定の #757575 になり、
この入力欄の地に対して 3.70:1（AA 4.5:1 未満）だった（実物で計測して検出）。
★DOMのテキストだけ見る監査では見つからない。疑似要素も必ず測る。 */
.field-row ::placeholder{ color:var(--c-sub); opacity:1; }
.field-row input:focus, .field-row select:focus, .field-row textarea:focus{
border-color:var(--c-accent); background:transparent; outline:none;
}
/* キーボードで来たときだけ枠を足す。1pxの罫線だけだと指標として弱い（WCAG 2.4.7） */
.field-row input:focus-visible, .field-row select:focus-visible, .field-row textarea:focus-visible{
outline:2px solid var(--c-accent); outline-offset:2px;
}
.field-row select{ appearance:none; background-image:none; }
.two{ display:grid; grid-template-columns:1fr 1fr; gap:var(--sp-3); }
.hp-trap{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }
.consent{ display:flex; gap:12px; align-items:flex-start; font-size:var(--t-xs); }
/* チェックボックス本体は小さいが、label 全体がタップ領域になる（44px以上を確保） */
.consent{ min-height:44px; padding-block:4px; }
.consent input{ min-height:auto; width:22px; height:22px; margin-top:.4em; flex:none; accent-color:var(--c-accent); }
/* ========== フッター ========== */
.foot{ background:var(--g-deep); color:var(--c-ink); }
.foot .invite{ max-width:40em; font-size:var(--t-m); line-height:1.9; }
.foot .sec-label::before{ background:var(--c-gold); }
.foot .cols{
display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:var(--sp-4);
padding-top:var(--sp-5); margin-top:var(--sp-5);
border-top:1px solid color-mix(in srgb, var(--c-ink) 18%, transparent);
}
.foot .foot-h{ font-family:var(--f-en); font-size:var(--t-xs); letter-spacing:.24em; text-transform:uppercase; margin-bottom:var(--sp-2); color:var(--c-gold); font-weight:400; }
.foot li a{ min-height:44px; display:inline-flex; align-items:center; }
.foot li:not(:has(a)){ min-height:44px; display:flex; align-items:center; }
.foot a{ transition:opacity var(--d-hover) var(--e-out); }
.foot a:hover{ opacity:.55; }
.foot .copy{
display:flex; justify-content:space-between; gap:var(--sp-3); flex-wrap:wrap;
padding-block:var(--sp-3); font-family:var(--f-en); font-size:var(--t-xs);
letter-spacing:.14em; color:color-mix(in srgb, var(--c-ink) 60%, transparent);
border-top:1px solid color-mix(in srgb, var(--c-ink) 18%, transparent); margin-top:var(--sp-5);
}
/* ==========================================================================
アニメーション層
========================================================================== */
/* ---------- オープニングのカーテン ----------
⚠️ JSが無効／読み込みに失敗したとき白いまま固まるのを防ぐ。
head のインラインscriptが .js を付けたときだけ出し、同じscriptが2.6秒で必ず開ける。 */
.curtain{ display:none; }
.js .curtain{
display:block; position:fixed; inset:0; z-index:80; background:var(--c-bg);
pointer-events:none;
transition:transform .72s var(--e-mask), opacity .35s .38s linear;
}
.is-booted .curtain{ transform:translateY(-100%); opacity:0; }
/* ---------- スクロール進捗 ---------- */
.progress{
position:fixed; top:0; left:0; height:2px; z-index:60; width:100%;
transform-origin:left; transform:scaleX(var(--progress));
background:var(--c-accent); pointer-events:none;
}
/* ---------- カスタムカーソル（点＋追従リング。GARDEN EIGHT の型） ---------- */
.cursor{
position:fixed; top:0; left:0; z-index:95; pointer-events:none;
width:6px; height:6px; border-radius:50%; background:var(--c-accent);
opacity:0; transition:opacity .3s;
}
.cursor.is-on{ opacity:1; }
.cursor-ring{
position:fixed; top:0; left:0; z-index:94; pointer-events:none;
width:30px; height:30px; border-radius:50%;
border:1px solid color-mix(in srgb, var(--c-accent) 55%, transparent);
opacity:0;
transition:width .38s var(--e-back), height .38s var(--e-back),
background .38s var(--e-out), border-color .38s var(--e-out), opacity .3s;
}
.cursor-ring.is-on{ opacity:1; }
.cursor-ring.is-lg{
width:64px; height:64px;
background:color-mix(in srgb, var(--c-accent) 12%, transparent);
border-color:color-mix(in srgb, var(--c-accent) 30%, transparent);
}
@media (hover:none), (pointer:coarse){ .cursor, .cursor-ring{ display:none; } }
/* ---------- 保険：JSが落ちたら、隠していたものを全部出す ---------- */
.js-fallback .rise,
.js-fallback .stagger > *,
.js-fallback .sand > span,
.js-fallback .hero .en,
.js-fallback .hero .desc,
.js-fallback .hero .meta,
.js-fallback .scroll-cue,
.js-fallback .logo .mark,
.js-fallback .logo .word{
opacity:1 !important; transform:none !important; filter:none !important;
}
/* ==========================================================================
★濃色面（.invert / .foot）の文字色を、部品CSSより「後ろ」で上書きする
--------------------------------------------------------------------------
⚠️ 2度踏んだ事故：`.invert .price small` と `.svc-row .price small` は
詳細度が同じ (0,2,1) なので、**後ろに書いてあるほう**が勝つ。
部品CSSの前に置いていたため、濃色の料金表で「円〜」だけ 2.57:1 のまま残っていた。
→ 濃色面の上書きは必ずファイルのこの位置（全部品の後ろ）にまとめる。
========================================================================== */
/* ⚠️ .sub / .sec-label / .note / small は地色前提の暗い文字。
濃色面に置くと 2.94:1 で読めなくなる（自己監査で検出・2度踏んだ）。
★クラス単位ではなく「濃色面」単位でまとめて上書きする。 */
.invert .sub, .invert .sec-label, .invert .note,
.invert .price small, .invert .tags li, .invert .card p,
.foot .sub, .foot .sec-label, .foot .note{
color:color-mix(in srgb, var(--c-ink) 76%, transparent);
}
.invert .note, .foot .note{ border-left-color:var(--c-gold); }
.invert .sec-label::before{ background:var(--c-gold); }
.invert a{ color:var(--c-ink); }
.invert .card{ border-color:color-mix(in srgb, var(--c-ink) 22%, transparent); }
.invert .card .no, .invert .flow li::before, .invert .q{ color:var(--c-gold); }
.invert .svc-row, .invert .flow li, .invert .faq details{ border-color:color-mix(in srgb, var(--c-ink) 20%, transparent); }
/* ==========================================================================
★濃色面の「生きている地」（コーポレートサイトでよく使われる、地がゆっくり動く型）
--------------------------------------------------------------------------
大きなぼかし円を2つ、別々の速度・向きでゆっくり漂わせる。
⚠️ canvas で毎フレーム radial-gradient を塗ると全画面を3回埋めることになって重い。
CSSのアニメーションならGPUの合成だけで済むので、JSの負荷は0のまま。
秒数は実測の基準（背景ズーム15s／回転10s・25s の2速度）に合わせて 28s と 44s。
========================================================================== */
.deep{ position:relative; overflow:hidden; isolation:isolate; }
/* ⚠️ ここを `.deep > *` と書いたら、同じ詳細度で後ろにあるため
`.nova-wrap{position:absolute}` を relative で上書きしてしまい、
canvas が 170×84 に潰れた（自己監査の「描画画素サンプル」で検出）。
中身の器（.wrap）だけを名指しする。 */
.deep > .wrap{ position:relative; z-index:1; }
.deep::before, .deep::after{
content:""; position:absolute; z-index:0; pointer-events:none;
width:92vmax; height:92vmax; border-radius:50%;
will-change:transform;
}
/* ① 大きくて明るい光。右上から入って、ゆっくり左下へ流れる */
.deep::before{
top:-46vmax; right:-30vmax;
background:radial-gradient(circle closest-side, rgba(154,66,92,.55) 0%, rgba(154,66,92,0) 70%);
animation:deep-a 44s ease-in-out infinite alternate;
}
/* ② 小さめで暗い影。逆向きに動かして、地に流れをつくる */
.deep::after{
bottom:-52vmax; left:-34vmax;
width:74vmax; height:74vmax;
background:radial-gradient(circle closest-side, rgba(28,10,17,.6) 0%, rgba(28,10,17,0) 70%);
animation:deep-b 28s ease-in-out infinite alternate;
}
@keyframes deep-a{
from{ transform:translate3d(0,0,0) scale(1); }
to { transform:translate3d(-14vmax,10vmax,0) scale(1.18); }
}
@keyframes deep-b{
from{ transform:translate3d(0,0,0) scale(1); }
to { transform:translate3d(12vmax,-9vmax,0) scale(1.24); }
}
@media (prefers-reduced-motion: reduce){
.deep::before, .deep::after{ animation:none; }
}
/* ========== レスポンシブ ========== */
@media (max-width:1024px){
.grid-3{ grid-template-columns:1fr 1fr; }
.foot .cols{ grid-template-columns:1fr 1fr; }
}
@media (max-width:768px){
/* ★スマホでは最小級数を 11px → 12px に上げる。
⚠️ 実機5サイズで測ったところ、11px の要素に「注記」「制作の流れの説明文」など
“ラベルではなく文章” が混ざっていた。ラベルは12pxでよいが、文章は本文級にする。 */
:root{ --h-header:64px; --t-xs: 12px; }
body{ line-height:1.95; }
.flow p, .note{ font-size:var(--t-s); line-height:1.85; }
/* 屋号の下の英字は装飾。狭い画面では出さない（10pxでも小さいため） */
.logo .word i{ display:none; }
.logo .word b{ font-size:16px; }
.burger{ display:block; }
.gnav{
position:fixed; inset:0; background:var(--c-bg); display:grid; place-content:center;
opacity:0; visibility:hidden; transition:opacity .4s var(--e-out), visibility .4s;
}
.is-open .gnav{ opacity:1; visibility:visible; }
.gnav ul{ flex-direction:column; gap:var(--sp-3); text-align:left; }
.gnav a{ font-size:var(--t-m); letter-spacing:.16em; }
.grid-3{ grid-template-columns:1fr; }
.svc-row{ grid-template-columns:1fr; gap:6px; }
.flow li{ grid-template-columns:auto 1fr; }
.flow li p{ grid-column:2; }
.two{ grid-template-columns:1fr; }
.foot .cols{ grid-template-columns:1fr; gap:var(--sp-3); }
/* ★SPでは3Dロゴを出さない（本人指摘・2026-08-15）。
ロゴ用に空けていた padding-bottom:260px も不要になるので、通常の中央寄せに戻す。
背景の銀河はボルドー面を透かして見えるため、これでも FV は単色にならない。 */
.nova-wrap{ display:none; }
.hero{ align-items:center; padding-top:var(--h-header); padding-bottom:var(--sp-5); }
.hero .wrap{ padding-bottom:var(--sp-4); }
.hero .meta{ position:static; margin-top:var(--sp-4); }
.scroll-cue{ display:none; }
.logo .mark{ width:30px; height:30px; }
}
/* ========== 触る端末・タブレット ==========
⚠️ 幅だけで切ると iPad（1024px）が漏れ、実測でiPad Proだけ11pxのまま残っていた。
★「小さい画面か」ではなく「指で触るか」で切るのが本筋だが、
pointer の判定は環境で揺れるので、幅の条件も併記して二重に効かせる。 */
@media (max-width:1024px), (pointer:coarse){
:root{ --t-xs: 12px; }
.flow p, .note{ font-size:var(--t-s); line-height:1.85; }
.logo .word i{ display:none; } /* 屋号の下の英字は装飾。指で使う画面では出さない */
}
/* ========== ★動きを減らす設定への対応 ==========
実測した4件すべてが未対応。ここは確実に上回れる差別化点。
⚠️ 3Dは「消す」のではなく「止めて出す」（nova.js 側で静止画を1枚だけ描く）。 */
@media (prefers-reduced-motion: reduce){
*,*::before,*::after{
animation-duration:.01ms !important; animation-iteration-count:1 !important;
transition-duration:.01ms !important; scroll-behavior:auto !important;
}
.curtain, .progress, .cursor, .cursor-ring{ display:none; }
.rise, .stagger > *{ opacity:1; transform:none; }
.sand > span{ opacity:1; transform:none; filter:none; }
.logo .mark, .logo .word{ opacity:1; transform:none; }
.hero .en, .hero .desc, .hero .meta, .scroll-cue{ opacity:1; transform:none; }
.header.is-hidden{ transform:none; }
}
/* ========== 印刷 ========== */
@media print{
.header,.cursor,.cursor-ring,.scroll-cue,.nova-wrap,.curtain,.progress{ display:none; }
body{ background:#fff; color:#000; }
}
/* ==========================================================================
★技法⑭：写真の出し方（実績のスクリーンショット）
--------------------------------------------------------------------------
画面に入ると、画素が粒になって散った状態から**左端から順に**集まり、絵になる。
組み上がったら canvas を消して本物の ![]()
に入れ替える（最終画質は元のまま）。
⚠️ ホバーで縦長スクショを流す案は不採用（本人判断）。
========================================================================== */
.visual{ position:relative; margin-bottom:var(--sp-3); }
.shot{
position:relative; aspect-ratio:16/9; overflow:hidden;
background:color-mix(in srgb, var(--c-ink) 4%, transparent);
border:1px solid var(--c-line);
}
.shot__img, .shot__cv{
position:absolute; inset:0; width:100%; height:100%; display:block;
object-fit:cover;
}
/* ★既定は「本物の写真が見えている」。
⚠️ 逆にして（既定で隠して）JSで戻す作りにしたら、file:// で開いたときに
getImageData が例外になり、写真が出ないまま固まった。
**JSで隠すのではなく、成功したときだけ砂に差し替える。** */
.shot__img{ opacity:1; transition:opacity .38s var(--e-out); }
.shot__cv { opacity:0; transition:opacity .38s var(--e-out); }
.shot.is-sanding .shot__img{ opacity:0; }
.shot.is-sanding .shot__cv { opacity:1; }
/* スマホ表示のミニ画面。絵が組み上がってから出す */
.shot-sp{
position:absolute; right:2.5%; bottom:-6%; z-index:2;
width:clamp(64px, 8.4%, 108px); height:auto;
border:1px solid color-mix(in srgb, var(--c-ink) 26%, transparent);
border-radius:6px;
opacity:0; transform:translateY(24px) rotate(2.5deg);
transition:opacity .9s var(--e-out), transform .9s var(--e-back);
transition-delay:1.05s;
}
.is-shown .shot-sp{ opacity:1; transform:translateY(0) rotate(2.5deg); }
.work:hover .shot-sp{ transform:translateY(-8px) rotate(0deg); transition-delay:0s; }
@media (max-width:768px){ .shot-sp{ width:64px; bottom:-8%; } }
@media (prefers-reduced-motion: reduce){
/* 砂は組み上げず、最初から本物の画像を出す（nova.js 側でも早期に onDone を呼ぶ） */
.shot__img{ opacity:1; }
.shot__cv{ display:none; }
.shot-sp{ opacity:1; transform:rotate(2.5deg); }
}
/* ==========================================================================
実績：写真が入っていない枠のバリエーション
--------------------------------------------------------------------------
・.shot--reveal … 砂を使わない出し方（下からめくれる／中身が寄ってくる）
・.shot--4x3 … ロゴ・名刺・チラシのような「1枚もの」の枠
・.gworks … 1枚ものを並べる格子
========================================================================== */
/* ★実績の写真は全部「砂で組み上がる」に統一（本人指示）。
めくって出す版（clip-path）は使わない。 */
.shot--4x3{ aspect-ratio:4/3; }
.gworks{ display:grid; grid-template-columns:repeat(2,1fr); gap:clamp(28px,4vw,64px); }
.gwork{ margin:0; }
.gwork figcaption{ padding-top:var(--sp-3); }
.gwork .client{ font-size:var(--t-xs); color:var(--c-sub); }
.gwork h3{
font-size:var(--t-m); font-weight:500; line-height:1.5;
margin:6px 0 var(--sp-2); display:flex; flex-wrap:wrap; align-items:center; gap:10px;
}
.gwork .tags{ display:flex; flex-wrap:wrap; gap:12px; margin-top:var(--sp-2); }
/* 写真がまだ無いもの（進行中）は枠を作らず、罫線だけで見せる */
.gwork--text figcaption{ border-top:1px solid var(--c-line); padding-top:var(--sp-3); }
@media (max-width:768px){
.gworks{ grid-template-columns:1fr; }
}