/* ============================================================
TSUGI HANDS — style.css
トークン / リセット / ナビ / セクション(黒・クリーム) / 各コンポーネント
============================================================ */
/* Google Fonts は各HTMLので + として読み込む
（CSS内の@importは読み込みがブロッキングになり表示が遅くなるため、ここでは使わない） */
/* ページ遷移をブラウザ標準のView Transitions APIでクロスフェードにする。
対応ブラウザ（Chrome/Edge）だけ効果があり、未対応ブラウザでは通常の遷移のまま
（壊れることはない、安全なプログレッシブエンハンスメント）。 */
@view-transition{
navigation: auto;
}
@media (prefers-reduced-motion: reduce){
@view-transition{ navigation: none; }
}
:root{
/* --- カラートークン --- */
--black: #15110c;
--black-2: #1e1810; /* 黒地の上のカード等 */
--cream: #ece4d3;
--cream-2: #e2d8c2; /* クリーム地の上のカード等 */
--ink: #2b2117; /* クリーム地の本文色 */
--white: #f5f1e8; /* 黒地の本文色 */
--kaki: #c9a24b;
--terracotta: #d4622e;
--ai: #3d6580;
--line-black: rgba(245,241,232,.14);
--line-cream: rgba(43,33,23,.14);
/* --- タイプスケール --- */
--fs-eyebrow: 11px;
--fs-h1: clamp(28px, 7vw, 52px);
--fs-h2: clamp(24px, 5.5vw, 38px);
--fs-h3: clamp(18px, 3.6vw, 22px);
--fs-lead: 16px;
--fs-body: 15px;
--font-display: "Noto Sans JP", sans-serif;
--font-serif: "Zen Old Mincho", serif;
--container: 1080px;
}
*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
html, body{ overflow-x:hidden; max-width:100%; }
body{
margin:0;
font-family:var(--font-display);
background:var(--black);
color:var(--white);
-webkit-font-smoothing:antialiased;
text-rendering:optimizeLegibility;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
ul{ margin:0; padding:0; list-style:none; }
button{ font-family:inherit; cursor:pointer; }
mark{ background:none; color:var(--kaki); }
.section-cream mark{ color:var(--terracotta); }
/* 日本語の長文では word-break:keep-all を使わない（文節がすべて1単語扱いになり、
横にあふれる原因になるため）。overflow-wrapだけを安全策として全体にかけ、
短いラベル・ボタン・見出し的な文字列にだけ keep-all を限定的に使う。 */
body{
overflow-wrap:break-word;
}
.eyebrow, .btn, .nav-links a, #mobile-menu a, .logo-word, .news-tab,
.problem-num, .founder-role, .founder-name, .news-cat-badge, .qa-q{
word-break:keep-all;
overflow-wrap:break-word;
}
:focus-visible{ outline:2px solid var(--kaki); outline-offset:3px; }
.wrap{ max-width:var(--container); margin:0 auto; padding:0 24px; }
@media (prefers-reduced-motion: reduce){
*{ animation-duration:.001ms !important; transition-duration:.001ms !important; }
}
/* ============================================================
セクション基調（黒 / クリーム の交互構造）
============================================================ */
.section-black{ background:var(--black); color:var(--white); position:relative; }
.section-cream{ background:var(--cream); color:var(--ink); position:relative; }
.section-cream .eyebrow{ color:var(--terracotta); }
.section-black .eyebrow{ color:var(--kaki); }
/* 和紙調の極薄ノイズ（クリーム面のみ／白の壁感を抜く） */
.section-cream::before{
content:"";
position:absolute; inset:0; z-index:0; pointer-events:none;
background-image:url("data:image/svg+xml;utf8,");
opacity:.035;
mix-blend-mode:multiply;
}
.section-black > *, .section-cream > *{ position:relative; z-index:1; }
.section-pad{ padding:96px 0; }
@media (max-width:640px){ .section-pad{ padding:64px 0; } }
.eyebrow{
display:inline-flex; align-items:center; gap:10px;
font-size:var(--fs-eyebrow); font-weight:700; letter-spacing:.1em;
margin-bottom:18px;
}
.eyebrow::before{ content:""; width:18px; height:2px; background:currentColor; display:block; }
h1,h2,h3{ font-weight:900; line-height:1.35; margin:0 0 16px; }
h1{ font-size:var(--fs-h1); line-height:1.4; }
h2{ font-size:var(--fs-h2); }
h3{ font-size:var(--fs-h3); }
p.lead{ font-size:var(--fs-lead); line-height:1.8; margin:0 0 24px; max-width:640px; }
p{ font-size:var(--fs-body); line-height:1.85; margin:0 0 18px; }
p:last-child{ margin-bottom:0; }
/* スマホ：見出しサイズと上下マージンを詰めて、1画面に収まる情報量を増やす */
@media (max-width:640px){
h1{ margin-bottom:12px; }
h2{ margin-bottom:12px; }
h3{ margin-bottom:8px; }
.eyebrow{ margin-bottom:12px; }
p.lead{ font-size:14.5px; margin-bottom:18px; }
p{ margin-bottom:14px; }
}
.kw{ position:relative; font-weight:700; white-space:normal; }
.kw::after{
content:""; position:absolute; left:-2px; right:-2px; bottom:.04em;
height:.42em; z-index:-1; width:0;
background:var(--kaki); opacity:.45;
transition:width .6s ease;
}
.section-cream .kw::after{ background:var(--terracotta); opacity:.28; }
.kw.in::after{ width:100%; }
.btn{
display:inline-flex; align-items:center; justify-content:center;
gap:8px; padding:14px 28px; border-radius:999px;
font-size:14px; font-weight:700; letter-spacing:.02em;
border:1px solid transparent; transition:transform .25s ease, background .25s ease, color .25s ease;
}
.btn:hover{ transform:translateY(-2px); }
.btn-primary{ background:var(--terracotta); color:#fff; }
.btn-outline{ border-color:currentColor; background:transparent; }
.section-black .btn-outline{ color:var(--white); }
.section-cream .btn-outline{ color:var(--ink); border-color:var(--ink); }
.btn-row{ display:flex; gap:14px; flex-wrap:wrap; }
/* ============================================================
ヘッダー / ナビ
============================================================ */
#nav{
position:fixed; top:0; left:0; right:0; z-index:100;
display:flex; align-items:center; justify-content:space-between;
padding:18px 24px; background:transparent;
transition:background .35s ease, padding .35s ease, box-shadow .35s ease;
}
#nav.solid{
background:rgba(21,17,12,.92); backdrop-filter:blur(6px);
padding:12px 24px; box-shadow:0 1px 0 var(--line-black);
}
.logo{ display:flex; align-items:center; gap:10px; }
.logo-mark{ height:28px; width:auto; display:block; }
.logo-word{ font-weight:900; font-size:15px; letter-spacing:.02em; }
.logo-word span{ color:var(--terracotta); }
.logo-sub{ font-size:9px; opacity:.55; letter-spacing:.08em; display:block; margin-top:1px; }
.nav-links{ display:flex; align-items:center; gap:32px; }
.nav-links a{ font-size:13px; font-weight:700; opacity:.85; position:relative; }
.nav-links a[aria-current="page"]{ color:var(--terracotta); opacity:1; }
.nav-right{ display:flex; align-items:center; gap:18px; }
.lang-toggle{ display:flex; gap:6px; font-size:11px; font-weight:700; }
.nav-social-icon{
display:flex; align-items:center; opacity:.75; transition:opacity .2s ease, color .2s ease;
}
.nav-social-icon:hover{ opacity:1; color:var(--terracotta); }
.nav-social-icon svg{ width:19px; height:19px; }
.mobile-menu-social{
display:flex; align-items:center; gap:10px; font-size:15px; font-weight:700; margin-top:8px;
}
.mobile-menu-social svg{ width:22px; height:22px; }
.lang-toggle button{ background:none; border:none; color:inherit; opacity:.5; padding:4px; }
.lang-toggle button.active{ opacity:1; color:var(--kaki); }
.hamburger{ display:none; flex-direction:column; gap:5px; background:none; border:none; padding:6px; }
.hamburger span{ width:22px; height:2px; background:var(--white); transition:transform .3s, opacity .3s; }
.hamburger.open span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.hamburger.open span:nth-child(2){ opacity:0; }
.hamburger.open span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }
#mobile-menu{
position:fixed; inset:0; z-index:99; background:var(--black);
display:flex; flex-direction:column; justify-content:center; gap:28px;
padding:24px; transform:translateY(-100%); transition:transform .4s ease;
}
#mobile-menu.open{ transform:translateY(0); }
#mobile-menu a{ font-size:24px; font-weight:900; }
.lang-toggle-mobile{ font-size:15px; margin-top:8px; }
.lang-toggle-mobile button{ padding:6px; }
@media (max-width:860px){
.nav-links{ display:none; }
.hamburger{ display:flex; }
.nav-right > .lang-toggle{ display:none; } /* 幅の狭い画面ではヘッダーの文字と重なるため、ハンバーガーメニュー内に移す */
.nav-social-icon{ display:none; } /* 同上の理由でハンバーガーメニュー内に移す */
}
/* ============================================================
ヒーロー（全ページ共通・黒地＝ブランドの瞬間）
============================================================ */
.hero{
position:relative; overflow:hidden;
min-height:92vh; display:flex; align-items:center;
padding:140px 24px 80px;
}
.hero.hero-sub{ min-height:46vh; padding:150px 24px 70px; }
.hero-circle{
position:absolute; top:-12%; right:-14%;
width:60vw; height:60vw; max-width:760px; max-height:760px;
border-radius:50%; background:var(--terracotta);
opacity:.85; z-index:0;
}
.hero-photo{
position:absolute; top:-10%; right:-8%; z-index:0;
width:58vw; height:58vw; max-width:680px; max-height:680px;
border-radius:50%; overflow:hidden;
box-shadow:0 0 0 1px var(--line-black);
}
.hero-photo img{
width:100%; height:100%; object-fit:cover; display:block;
filter:grayscale(75%) brightness(.92);
transform:scale(1.0);
transition:transform .45s ease;
animation:photo-develop 1.3s ease forwards;
animation-delay:.7s;
}
@keyframes photo-develop{ to{ filter:grayscale(0%) brightness(1); } }
@media (hover:hover){
.hero-photo:hover img{ transform:scale(1.07); }
}
.hero-photo:active img{ transform:scale(1.04); }
.hero-grain{
position:absolute; inset:0; z-index:0; opacity:.5; pointer-events:none;
background:radial-gradient(circle at 18% 78%, rgba(201,162,75,.18), transparent 55%);
}
.hero-content{ position:relative; z-index:1; max-width:760px; }
.hero h1 .hl1, .hero h1 .hl2{ display:block; }
.hero h1 .phrase{ display:inline-block; }
.hero h1 .ac-kaki{ color:var(--kaki); }
.hero h1 .ac-ai{ color:var(--ai); }
.scroll-hint{
position:absolute; left:24px; bottom:28px; z-index:1;
display:flex; align-items:center; gap:10px; font-size:10px; letter-spacing:.14em; opacity:.55;
}
.scroll-hint::after{ content:""; width:1px; height:26px; background:currentColor; animation:scrollline 1.8s ease-in-out infinite; }
@keyframes scrollline{ 0%{ transform:scaleY(0); transform-origin:top; } 50%{ transform:scaleY(1); transform-origin:top; } 51%{ transform-origin:bottom; } 100%{ transform:scaleY(0); transform-origin:bottom; } }
/* ============================================================
ローディング画面（実ロゴ1枚・object-fit:containで歪み無し・合計0.6秒以内）
============================================================ */
#loader{
position:fixed; inset:0; z-index:9999; background:var(--black);
display:flex; align-items:center; justify-content:center;
animation:loader-out .2s ease forwards;
animation-delay:.4s;
}
@keyframes loader-out{ to{ opacity:0; visibility:hidden; } }
.loader-logo{
width:min(52vw, 260px);
height:auto;
max-height:50vh;
object-fit:contain;
display:block;
opacity:0;
transform:scale(.86);
animation:loader-in .35s ease-out forwards;
}
@keyframes loader-in{ to{ opacity:1; transform:scale(1); } }
@media (prefers-reduced-motion: reduce){
#loader{ animation:none; opacity:0; visibility:hidden; }
.loader-logo{ animation:none; opacity:1; transform:none; }
.hero-photo img{ animation:none; filter:grayscale(0%); }
}
/* ============================================================
TOP — 概要(クリーム) / NEWS(黒)
============================================================ */
.summary-grid{ display:grid; gap:48px; align-items:start; }
@media (min-width:860px){ .summary-grid{ grid-template-columns:1fr 1fr; gap:64px; } }
/* 仕組みの図解（循環ダイアグラム） */
.cycle-diagram{ margin:40px 0 8px; position:relative; }
.cycle-flow{
display:flex; align-items:center; justify-content:center; gap:14px;
text-align:left; max-width:440px; margin:0 auto; position:relative; z-index:2;
}
.cycle-flow-icon{
width:40px; height:40px; border-radius:50%; flex-shrink:0;
display:flex; align-items:center; justify-content:center; color:#fff;
}
.cycle-flow-icon svg{ width:20px; height:20px; }
.cycle-flow-top .cycle-flow-icon{ background:var(--terracotta); }
.cycle-flow-bottom .cycle-flow-icon{ background:var(--ai); }
.cycle-flow strong{ display:block; font-size:15px; margin-bottom:2px; }
.cycle-flow-top strong{ color:var(--terracotta); }
.cycle-flow-bottom strong{ color:var(--ai); }
.cycle-flow > div > span{ font-size:12px; opacity:.65; }
/* 円の上下をつなぐ、循環していることが分かる曲線の矢印（流れるアニメーション付き） */
.cycle-arc{ display:block; width:100%; max-width:780px; height:auto; aspect-ratio:1000/180; margin:-6px auto; position:relative; z-index:1; }
.cycle-arc path{
stroke-dasharray:14 10;
animation:cycle-flow-dash 1.1s linear infinite;
}
@keyframes cycle-flow-dash{ to{ stroke-dashoffset:-48; } }
.cycle-row{
display:flex; align-items:center; justify-content:center; gap:4%;
max-width:1000px; margin:0 auto; position:relative; z-index:2;
}
.cycle-circle{
flex:0 0 30%; aspect-ratio:1/1; border-radius:50%; background:#fff;
display:flex; flex-direction:column; align-items:center; justify-content:center;
text-align:center; padding:6%; min-width:0;
box-shadow:0 1px 0 var(--line-cream);
}
.cycle-circle.cycle-craft{ border:2px solid var(--terracotta); }
.cycle-circle.cycle-youth{ border:2px solid var(--ai); }
.cycle-icon{ width:clamp(24px,4vw,36px); height:clamp(24px,4vw,36px); margin-bottom:10px; }
.cycle-craft .cycle-icon{ color:var(--terracotta); }
.cycle-youth .cycle-icon{ color:var(--ai); }
.cycle-circle h3{ font-size:clamp(13px,2vw,16px); margin-bottom:10px; }
.cycle-circle ul{ font-size:clamp(10px,1.6vw,12px); opacity:.75; line-height:1.7; }
.cycle-circle li{ margin-bottom:2px; }
.cycle-center{
flex:0 0 24%; display:flex; flex-direction:column; align-items:center; gap:10px; text-align:center;
}
.cycle-center img{ width:80%; height:auto; }
.cycle-center p{ font-size:clamp(10px,1.6vw,12px); opacity:.7; line-height:1.6; margin:0; }
@media (max-width:760px){
.cycle-arc{ display:none; }
.cycle-flow{ max-width:320px; margin:0 auto 24px; }
.cycle-flow-bottom{ margin:24px auto 0; }
.cycle-row{ flex-direction:column; gap:24px; }
.cycle-circle{ flex:none; width:84%; max-width:280px; padding:10%; }
.cycle-center{ flex:none; width:84%; max-width:280px; }
.cycle-center img{ width:50%; }
}
.news-preview-head{ display:flex; align-items:flex-end; justify-content:space-between; gap:24px; flex-wrap:wrap; margin-bottom:32px; }
/* ============================================================
ニュースカード / タブ
============================================================ */
.news-tabs{ display:flex; gap:10px; flex-wrap:wrap; margin-bottom:36px; }
.news-tab{
padding:9px 18px; border-radius:999px; font-size:12px; font-weight:700;
border:1px solid currentColor; opacity:.6; background:none; color:inherit;
transition:opacity .25s, background .25s, color .25s;
}
.news-tab.active{ opacity:1; background:var(--terracotta); border-color:var(--terracotta); color:#fff; }
.news-grid{ display:grid; gap:24px; grid-template-columns:repeat(auto-fill, minmax(min(260px,100%),1fr)); }
.news-card{ min-width:0;
display:flex; flex-direction:column; border-radius:18px; overflow:hidden;
background:var(--black-2); color:var(--white);
transition:transform .3s ease, box-shadow .3s ease;
}
.section-cream .news-card{ background:#fff; color:var(--ink); box-shadow:0 1px 0 var(--line-cream); }
.news-card:hover{ transform:translateY(-4px); box-shadow:0 14px 30px rgba(0,0,0,.18); }
.news-thumb{ aspect-ratio:16/10; overflow:hidden; background:var(--black-2); }
.news-thumb img,.news-thumb svg{ width:100%; height:100%; object-fit:cover; }
.news-card-body{ padding:20px; display:flex; flex-direction:column; gap:8px; flex:1; }
.news-cat-badge{ font-size:10px; font-weight:700; letter-spacing:.06em; color:var(--terracotta); }
.news-title-j{ font-weight:700; font-size:15px; line-height:1.6; margin:0; }
.news-excerpt{ font-size:13px; opacity:.7; line-height:1.7; margin:0; flex:1; }
.news-date{ font-size:11px; opacity:.5; }
.news-empty{ display:none; padding:48px 0; text-align:center; opacity:.6; }
/* ============================================================
ABOUT — 課題(クリーム) / unite図解
============================================================ */
.problems-grid{ display:grid; gap:20px; margin-bottom:48px; }
@media (min-width:760px){ .problems-grid{ grid-template-columns:1fr 1fr; gap:28px; } }
.problem-card{ min-width:0;
background:#fff; border-radius:20px; padding:32px 28px;
box-shadow:0 1px 0 var(--line-cream);
}
.problem-num{ font-size:12px; font-weight:700; color:var(--terracotta); letter-spacing:.06em; margin-bottom:14px; display:block; }
.problem-card h3{ margin-bottom:14px; }
.unite-wrap{ display:flex; flex-direction:column; align-items:center; gap:18px; text-align:center; margin:0 auto 8px; max-width:560px; }
.unite-line{ width:100%; max-width:340px; height:36px; }
.unite-line path{ fill:none; stroke:var(--terracotta); stroke-width:2; stroke-dasharray:340; stroke-dashoffset:340; }
.unite-eyebrow{ font-size:12px; letter-spacing:.1em; color:var(--terracotta); font-weight:700; }
.unite-text{ font-size:18px; font-weight:700; opacity:0; }
/* 挑戦したい活動 */
.challenge-grid{ display:grid; gap:20px; grid-template-columns:repeat(auto-fit,minmax(min(240px,100%),1fr)); }
.challenge-card{ min-width:0; background:#fff; border-radius:18px; padding:26px 24px; box-shadow:0 1px 0 var(--line-cream); }
.challenge-card h3{ font-size:16px; margin-bottom:10px; }
.challenge-card p{ font-size:14px; }
/* 団体名について（黒・短い概念提示） */
.namesplit-grid{ display:grid; gap:18px; margin:32px 0; }
@media (min-width:640px){ .namesplit-grid{ grid-template-columns:1fr 1fr; } }
.namesplit-piece{ min-width:0; border:1px solid var(--line-black); border-radius:18px; padding:24px; }
.namesplit-jp{ font-size:30px; font-weight:900; color:var(--kaki); margin-bottom:8px; }
.namesplit-en{ font-size:12px; opacity:.6; letter-spacing:.03em; }
/* 共同代表（クリーム・引用は明朝） */
.founders-grid{ display:grid; gap:28px; }
@media (min-width:760px){ .founders-grid{ grid-template-columns:1fr 1fr; } }
.founder-card{ min-width:0; background:#fff; border-radius:20px; padding:32px 28px; box-shadow:0 1px 0 var(--line-cream); }
.founder-head{ display:flex; align-items:center; gap:16px; margin-bottom:20px; }
.founder-photo{
width:64px; height:64px; border-radius:50%; object-fit:cover; flex-shrink:0;
border:2px solid var(--terracotta);
}
.founder-role{ font-size:12px; font-weight:700; color:var(--terracotta); letter-spacing:.04em; min-width:0; }
.founder-quote{
font-family:var(--font-serif); font-size:18px; line-height:1.85;
margin:0 0 18px; quotes:"「" "」";
}
.founder-quote::before{ content:open-quote; color:var(--kaki); }
.founder-quote::after{ content:close-quote; color:var(--kaki); }
.founder-name{ font-weight:700; font-size:14px; }
.founder-name-en{ display:block; font-weight:500; font-size:11px; opacity:.55; letter-spacing:.04em; margin-top:2px; }
.member-count{ text-align:center; margin-top:40px; }
.member-count .count-num{ font-size:clamp(48px,9vw,80px); font-weight:900; color:var(--terracotta); line-height:1; }
.member-count p{ max-width:360px; margin:8px auto 0; }
.photo-placeholder{
margin-top:48px; border-radius:22px; overflow:hidden;
background:linear-gradient(135deg, var(--terracotta), var(--kaki) 60%, #2D2920);
min-height:240px; display:flex; align-items:center; justify-content:center;
position:relative;
}
.photo-placeholder svg{ width:100%; height:100%; max-width:380px; opacity:.9; }
.photo-placeholder span{
position:absolute; bottom:16px; left:20px; font-size:11px; color:#fff; opacity:.75;
}
/* サポートのお願い（クリーム） */
.support-grid{ display:grid; gap:18px; grid-template-columns:repeat(auto-fit,minmax(min(240px,100%),1fr)); margin-top:8px; }
.support-card{ min-width:0; background:#fff; border-radius:18px; padding:26px 24px; box-shadow:0 1px 0 var(--line-cream); }
.support-card h3{ font-size:15px; margin-bottom:10px; }
.support-card p{ font-size:13px; }
/* ============================================================
JOIN — 役割カード(クリーム) / FAQ(クリーム) / フォーム導線(黒)
============================================================ */
.role-grid{ display:grid; gap:20px; grid-template-columns:repeat(auto-fit,minmax(min(220px,100%),1fr)); margin-bottom:64px; }
.role-card{ min-width:0; background:#fff; border-radius:18px; padding:28px 24px; box-shadow:0 1px 0 var(--line-cream); }
.role-icon{ width:34px; height:34px; margin-bottom:16px; color:var(--terracotta); }
.role-card h3{ font-size:16px; margin-bottom:10px; }
.role-card p{ font-size:13px; }
.qa-list{ border-top:1px solid var(--line-cream); }
.qa-item{ border-bottom:1px solid var(--line-cream); }
.qa-q{
width:100%; text-align:left; background:none; border:none; color:inherit;
display:flex; justify-content:space-between; align-items:center; gap:16px;
padding:22px 4px; font-size:15px; font-weight:700;
}
.qa-q::after{ content:"+"; font-size:20px; font-weight:400; transition:transform .3s ease; flex-shrink:0; }
.qa-item.open .qa-q::after{ content:"–"; }
.qa-a{
display:grid; grid-template-rows:0fr;
overflow:hidden; transition:grid-template-rows .35s ease;
}
.qa-item.open .qa-a{ grid-template-rows:1fr; }
.qa-a-inner{ overflow:hidden; min-height:0; }
.qa-a-inner p{ padding:0 4px 22px; font-size:14px; opacity:.85; }
/* grid-template-rowsのアニメーションに対応していない古いブラウザ向けの安全策 */
@supports not (grid-template-rows: 1fr){
.qa-a{ display:block; max-height:0; }
.qa-item.open .qa-a{ max-height:2000px; }
}
/* ============================================================
お問い合わせ・参加申し込みフォーム（直接埋め込み）
============================================================ */
.form-embed-card{
margin-top:32px; background:#fff; border-radius:24px; overflow:hidden;
box-shadow:0 18px 50px rgba(43,33,23,.14);
}
.form-embed-card iframe{
width:100%; height:1080px; border:0; display:block; background:#fff;
}
@media (max-width:480px){
.form-embed-card iframe{ height:1320px; }
}
/* ============================================================
フローティングCTA
============================================================ */
#float-cta{
position:fixed; right:18px; bottom:18px; z-index:60;
width:60px; height:60px; border-radius:50%;
background:var(--terracotta); color:#fff;
display:flex; align-items:center; justify-content:center;
font-size:11px; font-weight:700; text-align:center; line-height:1.2;
opacity:0; transform:translateY(20px) scale(.85);
transition:opacity .4s ease, transform .4s ease, background .5s ease;
box-shadow:0 8px 24px rgba(0,0,0,.4);
}
#float-cta.show{ opacity:1; transform:translateY(0) scale(1); animation:cta-pulse 2.6s ease-out infinite; }
#float-cta.deep{ background:var(--kaki); }
@keyframes cta-pulse{
0%,100%{ box-shadow:0 0 0 0 rgba(212,98,46,.42); }
50%{ box-shadow:0 0 0 9px rgba(212,98,46,0); }
}
@media (min-width:861px){ #float-cta{ display:none; } } /* PCはヘッダーCTAで十分 */
/* ============================================================
フッター
============================================================ */
footer{ background:var(--black); padding:64px 24px 32px; }
.footer-grid{ display:grid; gap:40px; grid-template-columns:1fr; }
@media (min-width:760px){ .footer-grid{ grid-template-columns:1.4fr 1fr 1fr; } }
.footer-tag{ font-size:13px; opacity:.6; max-width:280px; margin-top:14px; }
.footer-col h4{ font-size:11px; letter-spacing:.08em; opacity:.5; margin-bottom:16px; font-weight:700; }
.footer-col a{ display:block; font-size:13px; opacity:.8; margin-bottom:10px; }
.footer-link-pending{ display:block; font-size:13px; opacity:.4; margin-bottom:10px; cursor:default; }
.social-links{ display:flex; gap:18px; margin-top:6px; flex-wrap:wrap; }
.footer-col .social-link{
display:flex; align-items:center; gap:7px;
font-size:13px; opacity:.8; margin-bottom:0; transition:opacity .2s ease, color .2s ease;
}
.footer-col .social-link:hover{ opacity:1; color:var(--terracotta); }
.social-icon{ width:19px; height:19px; flex-shrink:0; }
.footer-bottom{ border-top:1px solid var(--line-black); margin-top:48px; padding-top:20px; font-size:11px; opacity:.4; text-align:center; }
/* ============================================================
reveal / stagger（JSが動かない場合も常に表示される設計）
============================================================ */
.reveal, .reveal-stagger > *{ will-change:transform, opacity; }