/* ========================================================================= presets.css ― セクション別プリセットの受け皿（Step0は最小／受け皿のみ） ------------------------------------------------------------------------- theme.json の指定でに付くクラス（例 preset-kenryu-default, hero-bottom-left など）に対して、将来ここでバリエーションを定義する。 ■ Step0時点：どのプリセットも見た目を変えない“素通し”。 Phase2でここに mask割り出し / 掛軸クリップ / 章番号等を実装して載せる。 ========================================================================= */ /* 全体プリセット（既定＝乾流。現状は素通し） */ .preset-kenryu-default{ /* 乾流デフォルト：tokens.css の既定値をそのまま使う */ } /* ヒーローのレイアウト・プリセット（受け皿。既定は bottom-left 相当＝現状維持） */ .hero-bottom-left .hero .inner{ /* 現状どおり左下寄せ（style.css既定と同じ） */ } /* タイポ級数プリセット（受け皿。既定 M＝現状） */ .type-scale-M{ /* 既定 */ } /* アニメ・プリセット（受け皿。Phase2でA/B/Cを実装） anim-reveal-mask … A テキストのマスク割り出し anim-image-kakejiku… B 画像の掛軸クリップ割り出し anim-chapter-kanji … C 章番号カウンタ（壱・弐・参） ※Step0では未実装＝現行のfade revealのまま */ /* ========================================================================= ヒーロー・レイアウト「ma」＝余白主義（掛軸の間）／乾流の既定 ------------------------------------------------------------------------- 紙・墨・朱・金の4色厳守。縦書き明朝・角版プレート(3:4)・落款一点・金は罫一本。 base .hero を上書きするため .hero.hero-ma（詳細度を上げて確実に勝たせる）。 ========================================================================= */ .hero.hero-ma{ color:var(--ink); background:var(--paper); align-items:center; justify-content:center; min-height:clamp(78vh,90vh,100vh); } .hero.hero-ma::after{ display:none; } /* 暗いグラデ膜は使わない */ .hero-ma .bg.bg-faint{ opacity:.07; } /* 写真は主役から降ろし極薄の地へ */ .hero-ma .ma-grid{ position:relative; z-index:2; display:flex; align-items:center; justify-content:flex-start; gap:clamp(16px,4.5vw,48px); max-width:var(--maxw); width:100%; margin:0 auto; padding:0 24px; } /* 人物＝縦長の角版プレート(3:4)。丸くしない。顔 or 代表作の1スロット */ .hero-ma .plate{ position:relative; flex:0 0 auto; width:clamp(150px,33vw,286px); opacity:0; animation:plateIn 1s ease .95s both; } .hero-ma .plate .imgbox,.hero-ma .plate .ph{ aspect-ratio:3/4; width:100%; box-shadow:0 8px 34px rgba(26,22,19,.16); } .hero-ma .plate .imgbox img{ animation:kbPlate 24s ease-out .8s both; transform-origin:50% 40%; } @keyframes kbPlate{ from{ transform:scale(1); } to{ transform:scale(1.04); } } /* ごく僅か */ @keyframes plateIn{ from{ opacity:0; transform:translateY(10px); } to{ opacity:1; transform:none; } } /* 落款：人物脇に“トンッ”と一点だけ（朱） */ .hero-ma .seal{ position:absolute; right:-14px; bottom:24px; width:clamp(44px,11vw,64px); height:clamp(44px,11vw,64px); opacity:0; animation:sealStamp .45s cubic-bezier(.2,.8,.3,1) 1.25s both; } .hero-ma .seal svg,.hero-ma .seal img{ width:100%; height:100%; display:block; } .hero-ma .seal svg{ filter:drop-shadow(0 2px 6px rgba(138,28,28,.35)); } @keyframes sealStamp{ 0%{ opacity:0; transform:scale(1.35); } 60%{ opacity:1; } 100%{ opacity:1; transform:scale(1); } } /* 金は“罫一本だけ”（面で使わない掟） */ .hero-ma .goldline{ flex:0 0 auto; width:1px; height:clamp(170px,40vh,340px); background:var(--gold); transform-origin:top; opacity:0; animation:lineIn 1.1s ease 1.1s both; } @keyframes lineIn{ from{ opacity:0; transform:scaleY(0); } to{ opacity:.75; transform:scaleY(1); } } /* 縦書きテキスト：名前(右・大)→一言(中)→役職(左・金細字) */ .hero-ma .vtext{ display:flex; flex-direction:row-reverse; align-items:flex-start; gap:clamp(10px,2.6vw,22px); } .hero-ma .vname,.hero-ma .vtag,.hero-ma .role{ writing-mode:vertical-rl; text-orientation:mixed; } .hero-ma .vname{ font-family:var(--font-ja); font-weight:600; color:var(--ink); font-size:clamp(40px,8vw,60px); letter-spacing:.15em; line-height:1.12; opacity:0; animation:softIn .9s ease 1.35s both; } .hero-ma .vtag{ font-family:var(--font-ja); color:var(--ink); font-size:clamp(18px,3.4vw,26px); letter-spacing:.12em; line-height:1.9; margin-top:clamp(16px,4vw,36px); /* 行頭を少し下げる＝“詫び” */ } .hero-ma .vtag span{ display:inline-block; opacity:0; animation:sumiDry .8s ease both; } @keyframes sumiDry{ from{ opacity:0; filter:blur(4px); } to{ opacity:1; filter:blur(0); } } /* 墨が乾く */ .hero-ma .role{ font-family:var(--font-ui); color:var(--gold); font-size:12px; letter-spacing:.3em; margin-right:2px; opacity:0; animation:softIn .9s ease 1.5s both; } .hero-ma .role .loc{ color:var(--sub); letter-spacing:.2em; } @keyframes softIn{ from{ opacity:0; transform:translateY(8px); } to{ opacity:1; transform:none; } } /* スクロール指示（ma用に下中央へ・墨で） */ .hero.hero-ma .scroll{ position:absolute; left:0; right:0; bottom:20px; margin:0; text-align:center; color:var(--sub); } /* --- スマホ縦：縦書き・角版・余白を保ったまま破綻させない --- */ @media(max-width:520px){ .hero-ma .ma-grid{ gap:clamp(10px,3vw,20px); padding:0 18px; justify-content:center; } .hero-ma .plate{ width:clamp(122px,32vw,168px); } .hero-ma .goldline{ height:clamp(150px,38vh,280px); } .hero-ma .vname{ font-size:clamp(34px,10vw,48px); } .hero-ma .vtag{ font-size:clamp(16px,4.6vw,22px); margin-top:clamp(12px,5vw,24px); } } /* --- 動きを減らす設定：ma演出も抑制（即・静止表示） --- */ @media (prefers-reduced-motion: reduce){ .hero-ma .plate,.hero-ma .seal,.hero-ma .goldline, .hero-ma .vname,.hero-ma .role,.hero-ma .vtag span{ opacity:1 !important; transform:none !important; filter:none !important; animation:none !important; } .hero-ma .plate .imgbox img{ animation:none !important; } }