/* v1のカルーセル(#card-slider2/3)向けの指定がありましたが、
対象要素が現在のテンプレートに存在しないため削除しました。 */
/* ============================================================
Decision GYM — 補完CSS
設置先: /wp-content/themes/wp-decision-gym-v3/custom/custom.css
（現在0バイト。読み込み順は最後なので上書きが効きます）
方針: 現行のデザイン言語は変更しない。
配色・書体・イタリック・weight・地色の交替はそのまま。
不足している制御だけを足す。
============================================================ */
/* ------------------------------------------------------------
1. 本文サイズ 14px → 16px
Phase1: 来店層を考えると14pxは小さい
※ 見た目が変わるため、最初に目視確認してください
------------------------------------------------------------ */
body { font-size: 16px; }
/* ------------------------------------------------------------
2. ファーストビューのスクリム
Phase1: 明るいスライドでリード文が読めない
写真の下方向にだけ暗さを足す。色も書体も変えない。
------------------------------------------------------------ */
.hero { position: relative; }
/* 重ね順は下の「ブラーと黒は別のレイヤーに分ける」にまとめてあります。
※ 以前ここで .hero-content を z-index:2 に下げてしまい、
テーマの .hero-overlay(z:10) がテキストの上に来て
文字が沈む不具合を起こしました。content の z-index は変更しません。 */
/* --- 黒の総量を減らす ----------------------------------------
テーマの .hero-overlay は全面に rgba(0,0,0,.8) の斜めグラデーション。
その上に下方向のスクリムを重ねると、左下で合成 約92% の黒になり、
映像がほとんど見えなくなっていました。
斜めのほうを弱めて、締めは下部のスクリムに任せます。 */
.hero-overlay {
background: linear-gradient(
to top right,
rgba(0,0,0,.50),
rgba(0,0,0,0) 62%
) !important;
}
/* --- ブラーと黒は別のレイヤーに分ける ------------------------
ブラーは輝度を下げません。ヒーロー動画の文字が乗る範囲を
実測した結果:
素材そのまま 白文字とのコントラスト 1.64:1
ブラー20pxをかけた後 1.68:1
WCAG AA（大きい文字）の基準 3.0:1
つまり黒の代わりにはならないので、役割を分けます。
::before … ブラー。左下だけ。質感のため
::after … 黒。下部全体。可読性のため
ブラーを左下に寄せたいからといって黒まで左下に寄せると、
右下の文字（H1の右端・リード文の右端）が
コントラスト 2.39:1 まで落ちて読めなくなります。
黒は下いっぱいに残すこと。
重ね順（テーマ側の値を尊重すること）
.hero-video z-index: 0
.hero-overlay z-index: 10
.hero::before z-index: 11 … ブラー（黒より下。黒をぼかしても無意味）
.hero::after z-index: 12 … 黒のスクリム
.hero-content z-index: 20 … テキスト（テーマの値。触らない） */
/* --- ブラー：左下だけ、弱く ---------------------------------- */
.hero::before {
content: "";
position: absolute;
inset: 0;
z-index: 11;
pointer-events: none;
-webkit-backdrop-filter: blur(8px);
backdrop-filter: blur(8px);
/* 左下角を中心にした楕円。右下と上には届きません。
縁が線に見えないよう、外側は長めに減衰させています。 */
-webkit-mask-image: radial-gradient(
ellipse 78% 58% at 0% 100%,
#000 0%,
rgba(0,0,0,.55) 42%,
rgba(0,0,0,0) 74%
);
mask-image: radial-gradient(
ellipse 78% 58% at 0% 100%,
#000 0%,
rgba(0,0,0,.55) 42%,
rgba(0,0,0,0) 74%
);
}
/* --- 黒のスクリム：下部全体 ---------------------------------- */
.hero::after {
content: "";
position: absolute;
inset: 0;
z-index: 12;
pointer-events: none;
background: linear-gradient(
180deg,
rgba(0,0,0,0) 0%,
rgba(0,0,0,.14) 42%,
rgba(0,0,0,.60) 100%
);
}
/* --- モバイルではブラーを切る --------------------------------
backdrop-filter を再生中の動画に全画面でかけると、
毎フレームぼかし直しが走ります。
iOS Safari は video の上の backdrop-filter に不具合もあるため、
ブラー層ごと消します。黒は残るので可読性は変わりません。 */
@media (max-width: 767px) {
.hero::before { display: none; }
.hero::after {
background: linear-gradient(
180deg,
rgba(0,0,0,0) 0%,
rgba(0,0,0,.16) 40%,
rgba(0,0,0,.62) 100%
);
}
}
/* ------------------------------------------------------------
3. CTAの主従
Phase1: 同じ黄色の塗りが2つ並び、判断コストが発生
主 = 黄色の塗り（現状維持） / 従 = 線
新しい色は追加していません。
------------------------------------------------------------ */
/* このテーマは要素の41%（737中304）にインラインstyleを持ちます。
2つのCTAは同一のインラインstyle
style="padding:14px 13px; font-size:10px; gap:12px;
background:var(--primary); color:black;"
を持つため、CSSだけで区別するのは筋が悪い作りになります。
★推奨: テンプレート側で2つ目のボタンにクラスを1つ足してください。
無料体験はこちら
レンタルジムはこちら ← 追加
その上で下の .btn-secondary が効きます（!important 不要）。
テンプレートを触れない場合は、その下のフォールバックを使ってください。 */
.hero-content .btn-secondary {
background: transparent;
color: #ffffff;
border: 1px solid rgba(255,255,255,.55);
}
.hero-content .btn-secondary:hover,
.hero-content .btn-secondary:focus-visible {
border-color: #facc15;
color: #facc15;
background: transparent;
}
/* --- フォールバック（テンプレートを変更しない場合） ---------------
隣接セレクタで2つ目を狙い、インラインstyleに !important で対抗します。
※ 実サイトでの動作確認が取れていません。適用後に必ず目視してください。
※ 効かない場合は上のテンプレート修正に切り替えてください。 */
.hero-content .btn-primary + .btn-primary:not(.btn-secondary) {
background: transparent !important;
color: #ffffff !important;
border: 1px solid rgba(255,255,255,.55) !important;
}
/* ------------------------------------------------------------
4. タップ領域 44px以上を確保
Phase1: 44px未満が9件。最小はフッターの高さ16px
流入の81.7%がモバイル
------------------------------------------------------------ */
/* フッターのテキストリンク（無料体験予約 / レンタルジム予約 / Instagram） */
footer .flex > .flex > a {
display: flex;
align-items: center;
min-height: 44px;
}
/* ヘッダーの体験予約ボタン（現在 88×32） */
.btn-primary {
min-height: 44px !important;
display: inline-flex;
align-items: center;
justify-content: center;
}
/* PCナビ（現在 高さ36px） */
.nav-link {
display: inline-flex;
align-items: center;
min-height: 44px;
}
/* アクセスの BY TRAIN / BY CAR（現在 高さ31px） */
.dg-tab-btn { min-height: 48px; }
/* ハンバーガー / 閉じるボタン（現在 24×24）
見た目のサイズは変えず、当たり判定だけを広げます */
#menu-open,
#menu-close {
box-sizing: content-box;
padding: 12px;
margin: -12px;
}
/* ------------------------------------------------------------
5. 日本語の改行制御
Phase1: モバイルでH1が3行に割れ、最終行が「す。」の2文字
text-wrap:balance で行長を均し、孤立行を防ぎます
------------------------------------------------------------ */
.hero-title,
.single-header-title,
h2, h3 {
line-break: strict;
text-wrap: balance;
}
/* ------------------------------------------------------------
6. 「おすすめプラン」の行間
Phase1: font-size 60px に対し line-height 51px（0.85倍）
文字が詰まる唯一の箇所。他の見出しは正常です。
------------------------------------------------------------ */
/* ------------------------------------------------------------
7. モバイルのヒーロー写真クロップ
Phase1: 縦画面で被写体が外れ、上部40%が天井の暗部になる
※ 35% は初期値です。実機で見て調整してください
------------------------------------------------------------ */
@media (max-width: 639px) {
.hero img { object-position: 50% 35%; }
}
/* ------------------------------------------------------------
8. prefers-reduced-motion 対応
Phase1: 完全未対応。1秒のtransitionが全セクションに適用
------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: .01ms !important;
animation-iteration-count: 1 !important;
transition-duration: .01ms !important;
scroll-behavior: auto !important;
}
.reveal {
opacity: 1 !important;
transform: none !important;
}
}
/* ------------------------------------------------------------
9. モバイル追従CTA（削除）
.dg-sticky-cta のCSSが一式ありましたが、この要素は
どのテンプレートにも存在しません（当時のコメントにも
「別途マークアップの追加が必要」とありました）。
実体がないので見た目には何も出ない一方、同じブロックの
@media (max-width: 1023px) { body { padding-bottom: 76px } }
だけが効いて、ページ最下部に76pxの空白を作っていました。
ブロックごと削除しています。
右下の追従CTA（.sticky-cta）は footer.php にあり、別物です。
------------------------------------------------------------ */
/* ============================================================
ここから：精度監査（Phase2）の対応
デザインの方向性は変更していません。ずれを直すだけです。
============================================================ */
/* ------------------------------------------------------------
10. ヒーローの左端を他セクションに揃える ★効き最大★
実測: .hero-content は max-width:1280px + padding:32px → 左端 105px
.container（他の全セクション） → 左端 24px
その差 81px。ファーストビューだけ内側に寄っていました。
------------------------------------------------------------ */
.hero-content {
max-width: 1440px;
padding-left: 24px;
padding-right: 24px;
}
/* ------------------------------------------------------------
11. 「選ばれる理由」の画像 16:9 → 4:3
実測: 素材 2400×1600（3:2）を 16/9 の枠に cover
→ 上下25%が切り落とされ、天井と床が消えていました。
4:3 なら切り落としは11%に収まります。
------------------------------------------------------------ */
.reason-visual { aspect-ratio: 4 / 3; }
/* ------------------------------------------------------------
12. 代表写真の歪み防止
実測: object-fit が未指定（= fill）。
現在は枠比と素材比がたまたま一致していますが、
幅が変わると人物が伸縮します。
------------------------------------------------------------ */
/* ------------------------------------------------------------
13. モバイルの極小文字を底上げ
実測: 375px時点で18種類のサイズ・107要素が12px未満
------------------------------------------------------------ */
/* アクセス欄の出口ラベル（実測 5px → 判読不能） */
.dg-exit-labels .en { font-size: 10px; }
@media (max-width: 1023px) {
/* 主要CTA（実測 10px）— インラインstyleのため !important が必要 */
.hero-content .btn-primary { font-size: 14px !important; }
/* ヒーローのリード文（実測 11px） */
.hero-content p { font-size: 13px; }
}
/* ------------------------------------------------------------
14. モバイルのギャラリーを 3列 → 2列
実測: 9枚を3列に詰め、1枚が 99×74px。
この寸法では被写体が判別できません。
------------------------------------------------------------ */
@media (max-width: 639px) {
.gallery-grid { grid-template-columns: repeat(2, 1fr); }
}
/* ------------------------------------------------------------
15. 孤立行の抑制
実測: 料金注記が「分割払いなら月々4,600円（税 / 込）〜」と
括弧の途中で分断されていました。
★対象は本来の目的である料金注記だけに限定すること。
以前は #price p / .reason-item p / .service-card p の本文にも
掛けていたが、text-wrap:pretty はブラウザで実装が違う。
Chrome は最終行付近しか調整しないのに対し、
Safari(iOS 18.2〜) は段落「全体」の行長を均すため、
日本語本文では全行が短くなり右側に余白ができる。
iPhoneの実機で「選ばれる理由・サービス内容の本文が左寄りで
右に余白が出る」報告があり、これが原因だった。
------------------------------------------------------------ */
.plan-banner-lead {
text-wrap: pretty;
}
/* ------------------------------------------------------------
16. 欧文を Helvetica に
和文は Helvetica が字形を持たないため Noto Sans JP に落ちます。
和文書体・イタリック・weight 900 は現行のまま変更していません。
------------------------------------------------------------ */
body, h1, h2, h3, h4, h5,
p, a, li, td, th, button, input, select, textarea {
font-family: "Helvetica Neue", Helvetica, Arial,
"Noto Sans JP", "Hiragino Kaku Gothic ProN", sans-serif;
}
/* ------------------------------------------------------------
17. 料金の「(税込)」改行 ※制作者の意図的な実装を上書きします
common.css に以下の実装があります（コメント付き）:
@media (max-width:768px){
.tax-small{ display:block; } ← 「ブロック要素にすることで強制改行」
}
つまりモバイルで ¥288,000 と (税込) が2行に分かれるのは
バグではなく、制作者が意図して入れたものです。
ただし実測したところ、inline に戻しても1行に収まり
横溢れも起きませんでした（375px / 344px で確認）。
2行のほうが読みやすいと判断されるなら、このブロックは削除してください。
※ 320px 幅では未検証です。導入する場合は実機でご確認ください。
------------------------------------------------------------ */
@media (max-width: 768px) {
}
/* ============================================================
アクセシビリティ対応（fixing-accessibility スキル準拠）
============================================================ */
/* ------------------------------------------------------------
18. 閉じたモバイルメニューがキーボードで到達できてしまう
【優先度2：キーボードアクセス / critical】
実測: #mobile-menu は閉じている間も display:flex / visibility:visible で、
transform:translateX(100%) で画面外へ出しているだけ。
中の9リンクがすべて Tab で到達可能。
キーボード利用者はフォーカスが画面外へ消えます。
visibility:hidden はフォーカス順から除外されます。
transition の遅延指定でスライド演出は維持します。
------------------------------------------------------------ */
#mobile-menu {
visibility: hidden;
transition: transform .5s, visibility 0s .5s;
}
#mobile-menu.active {
visibility: visible;
transition: transform .5s, visibility 0s 0s;
}
/* ------------------------------------------------------------
19. 数字の桁揃え（baseline-ui: MUST use tabular-nums for data）
料金と実績の数値が均等幅になっていませんでした。
------------------------------------------------------------ */
#price p,
#case h3,
.dg-sticky-cta {
font-variant-numeric: tabular-nums;
}
/* ============================================================
画像配置（gorakadan の実測にもとづく）
あちらの計測結果（519px幅）
本文の画像16点：全幅4／内寄せ10／右抜き2
全幅は画面外まで出る（幅107%、左-25px）
幅は 42/46/56/70/71/73/80/85/107% とばらばら
内寄せの左位置は 32/46/63/69/71/108/132/216px の8種類
縦横を半々で混ぜている
Decisionへの適用
・全幅の抜き出しを導入（107%相当）
・幅と位置をばらす
・縦位置写真は素材が無いため見送り（横位置のまま変化をつける）
============================================================ */
/* 既存のスクロール表示はGSAPが制御するため、CSS側の遷移は無効化する
（二重制御になると初期表示でちらつく） */
.reveal{ transition: none; }
/* --- 透明での待機をやめる ★重要 ------------------------------
テーマ側 common.css:3508 が
.reveal { opacity: 0; transform: translateY(30px); }
としており、script.js の IntersectionObserver が
.is-visible を付けるまで中身が透明のままになります。
このページは全高が約11,800px あるため、
スクロールが届いていない下のセクションの写真が
長いあいだ「消えている」状態になり、
表示位置が少し動いただけで写真の無いページに見えます。
透明での待機はやめ、動きは GSAP の y だけに任せます。
transform は指定しないこと。!important を付けると
GSAP がインラインで書く transform まで殺してしまいます。 */
.reveal { opacity: 1 !important; }
/* ------------------------------------------------------------
L1. 横スクロールの抑止
画像が枠を越えて広がるため、ページ側のはみ出しを止める
------------------------------------------------------------ */
body{ overflow-x: clip; }
/* ------------------------------------------------------------
L2. 「選ばれる理由」— 写真を主役にした縦積み
変更前は左右交互 + 幅を3種類にばらす構成でした。
写真を大きく見せる方針に変更したため、
横並びをやめて「写真 → 番号 → 見出し → 本文」の縦積みにします。
★素材の制約（実測）
4.jpg / 2.jpg / 8.jpg はいずれも 900×600 しかありません。
コンテナ全幅(1392px)で表示すると1.55倍に引き伸ばされ、
高精細ディスプレイでは実質3.1倍相当になってぼやけます。
そのため画像の幅に上限を設けています。
より大きい素材（1800px以上）に差し替えれば
この上限は外して全幅にできます。
------------------------------------------------------------ */
/* HTMLの並びは text → visual です。
写真を先に見せたいので、flex の order で入れ替えます。
テンプレートを触らずに済み、読み上げ順も
「見出し → 本文 → 画像」のまま保てます。 */
.reason-item {
display: flex;
flex-direction: column;
gap: 0;
}
.reason-item.reverse {
flex-direction: column; /* 左右反転の指定を打ち消す */
}
.reason-visual {
order: -1; /* 画像を先頭へ */
/* テーマ側は flex:1（= flex-basis:0）。
縦並びにすると高さが0から計算され、
aspect-ratio が無視されて写真が潰れます。
auto に戻して aspect-ratio に高さを決めさせます。 */
flex: 0 0 auto;
width: 100%;
aspect-ratio: 3 / 2; /* 素材と一致。トリミングが出ません */
margin: 0 0 20px;
}
.reason-text {
flex: 1 1 auto;
}
/* --- 番号と見出し --------------------------------------------
テンプレートは .flex で番号と見出しを横並びにしています。
カラムが細くなると窮屈なので、番号を小さくして
見出しの上に置きます。 */
.reason-item .reason-text > .flex {
flex-direction: column;
align-items: flex-start !important;
gap: 4px !important;
margin-bottom: 12px !important;
}
/* テーマ側は 40px の装飾数字なので --zinc-100 でも成立していましたが、
ラベルとして小さくする以上は読める濃さが要ります。
白背景に対するコントラスト実測:
--zinc-300 1.48:1 ／ --primary 1.53:1 ／ --zinc-500 4.83:1
--zinc-600 7.73:1 ← これを採用
黄色は白地では 1.53:1 しかなく、小さい文字には使えません。 */
/* --- 文字サイズは drtraining.jp の実測値に合わせる ------------
あちらの PROMISE セクション（この「選ばれる理由」に相当）を
ブラウザで実測した値:
PC(1440px) SP(390px)
ラベル 16px 12.7px
見出し 24px / 700 18.1px
本文 17px / lh1.60 14.5px
コンテナ 1180px(82%) 365px(93%)
カラム 3列×370px 1列
隙間 35px －
あちらは html{font-size:0.0694vw} で 1rem=1px@1440px という
完全流動です。Decisionは固定pxで組まれているので、
同じ挙動を clamp() で近似します。
1440pxで上の値ちょうど、狭い画面では下限で止まります。 */
.reason-num {
font-size: clamp(12px, 1.11vw, 16px);
letter-spacing: .12em;
line-height: 1.15;
color: var(--zinc-600);
}
.reason-item h3 {
font-size: clamp(18px, 1.67vw, 24px) !important;
line-height: 1.35 !important;
font-weight: 700 !important;
}
.reason-item p {
font-size: clamp(14px, 1.18vw, 17px);
line-height: 1.6 !important;
}
/* --- 左の縦線 ------------------------------------------------
あちらは各項目の左に 1px の線を引き、20px空けて文字を置きます。
線の色は赤(#ff0000)ですが、Decisionのアクセントは黄なので
そちらに置き換えます。
（番号まで黄にすると白地で 1.53:1 しかなく読めないため、
線だけを黄、文字は zinc-600 のままにしています） */
/* 参考サイトは各項目の左に1pxの線を引いていますが、
Decisionでは使わない判断になったため入れていません。 */
/* --- PC：3カラム ---------------------------------------------
あちらは 1180px(画面の82%) に 370px×3、隙間35px。
1440pxでちょうどこの値になります。 */
@media (min-width: 1024px){
.reasons-list {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: clamp(20px, 2.43vw, 35px);
align-items: start;
width: min(1180px, 88vw);
margin-inline: auto;
}
/* 02 の見出しに入っている
はカラム幅では不要 */
.reason-item h3 br { display: none; }
}
/* --- タブレット：横並び1カラム -------------------------------
あちらの区切りは767pxの1点だけ（実測1436件）ですが、
同じにはできません。
あちらは html{font-size:0.0694vw} の完全流動で、
画面が狭くなると文字も一緒に縮みます。
768pxでは本文11.8pxまで小さくなり、
3カラムのままでも「1440pxの縮小版」として成立します。
Decisionは文字に下限（本文14px）を設けているため、
同じ3カラムだと本文が1行15文字になって読めません。
ここだけは列を減らして行長を確保します。 */
@media (min-width: 768px) and (max-width: 1023px){
.reasons-list { gap: 40px; width: 88%; margin-inline: auto; }
/* .reason-item.reverse はクラス2つで詳細度が高いので、
同じ強さで指定しないと02だけ縦積みのまま残ります */
.reason-item,
.reason-item.reverse {
flex-direction: row;
/* center にすると、文章量が違う項目どうしで
文字ブロックの上端がずれます（02は本文が1行少ないぶん
中央寄せで11px下がっていた）。上端でそろえます。 */
align-items: flex-start;
gap: 28px;
}
.reason-visual { flex: 0 0 40%; margin-bottom: 0; }
}
/* --- SP：縦積み1カラム ---------------------------------------
あちらのSPコンテナは画面幅の93%。
ここで width:93% とすると親 .container の左右padding(24px)を
引いた残りの93%になり、実効82%まで落ちます。
画面幅そのものを基準にしたいので vw を使い、
はみ出す分を負のマージンで戻します。 */
@media (max-width: 767px){
/* 幅は他セクションと同じ（コンテナいっぱい）。
以前は 93vw ＋ 負マージン ＋ common.css の padding:0 16px の
三段重ねで、結果的に他セクションより6px内側にずれていた。
基準を1つ（コンテナ幅）に戻す。 */
.reasons-list {
gap: 40px;
width: auto;
margin-inline: 0;
padding: 0;
}
}
/* 影は弱める（あちらはほとんど使わない） */
.reason-visual{ box-shadow: 0 12px 32px -20px rgba(0,0,0,.16); }
/* ------------------------------------------------------------
L3. 動きを減らす設定への対応
------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce){
.reveal{ opacity: 1 !important; transform: none !important; }
.reason-visual img{ transform: none !important; }
}
/* ============================================================
20. 見出しのブラー演出とページ遷移（gorakadan.com/fuji/golf を参考）
あちらの app.css / app.js を読んで確認した値をもとにしています。
推測ではなく実際のソースの数値です。
============================================================ */
/* --- 20-1. ページ離脱時のフェードアウト ----------------------
参考: .fade-leave-to { opacity:0; translateY(-50px); blur(16px) }
ブラーは見出しだけに使う方針なので、ここでは外し、
透明度と位置だけで送り出します。
50px は縦に大きく動きすぎるので 24px に落としています。
（あちらは遷移先が即座に被さるので大きくても成立しますが、
こちらは白い画面が見えるため、動きが目立ちすぎる） */
html.dg-leaving body {
opacity: 0;
transform: translateY(-24px);
pointer-events: none;
}
body {
transition: opacity 0.38s ease,
transform 0.38s ease;
}
/* --- 20-2. 画像ホバー ----------------------------------------
参考サイトの @keyframes hoverPicture は
scale(1)→(1.01)→(1.02) の途中で blur(3px) を通過させますが、
ブラーは見出しだけに使う方針のため、拡大だけを採用します。
→ その後、キャンペーン画像は拡大しない方針になりました。
テーマ側 common.css:3384 の
.campaign-card:hover img { transform: scale(1.05); }
を打ち消します。 */
.campaign-card img,
.campaign-card:hover img,
.campaign-card:focus-visible img {
transform: none !important;
transition: none;
}
/* --- 20-3. 動きを減らす設定への対応 -------------------------- */
@media (prefers-reduced-motion: reduce) {
body { transition: none; }
html.dg-leaving body {
opacity: 1;
filter: none;
transform: none;
}
.campaign-card img { transition: none; }
}
/* JavaScript側で reduce を検知した場合も同じ扱いにする */
html.dg-no-motion body { transition: none; }
/* --- 20-4. 印刷時は演出を無効化 ------------------------------
リビール演出は要素を opacity:0 で待機させます。
印刷ダイアログはスクロールを伴わないため、
このままだと本文が白紙で出力されます。 */
@media print {
.reveal,
main h1, main h2,
.reasons-list > *, .service-grid > *, .campaign-grid > * {
opacity: 1 !important;
filter: none !important;
transform: none !important;
visibility: visible !important;
}
.hero::before, .hero::after { display: none; }
}
/* ------------------------------------------------------------
L3. サービスカードの見出しが途中で折れる問題
「パーソナルトレーニング」が
「パーソナルト」／「レーニング」で割れていました。
実測（768px時）:
.container 720px － gap24×2 → カード幅 224px
.service-card の padding 40px×2 を引くと 内側 144px
h3 は 20px 固定なので 11文字 = 220px 必要 → 収まらない
カタカナは禁則処理の対象外で、日本語としてどこでも折れます。
word-break では防げないので、
文字と余白の両方を幅に追従させて1行に収めます。
------------------------------------------------------------ */
.service-card {
padding: clamp(20px, 2.78vw, 40px);
}
.service-card h3 {
font-size: clamp(13px, 1.39vw, 20px) !important;
white-space: nowrap;
}
/* アイコン上の英字ラベルも同じ理由で折らない */
.service-card > p:first-of-type {
white-space: nowrap;
}
/* ------------------------------------------------------------
L4. セクション見出しの上の英字ラベル
.section-label は home.php で見出しの上（一部は直下）にある
英字ラベルに付けたクラスです。
インラインの letter-spacing は消しましたが、それだけでは
まだ字間が残ります。テーマの
body { letter-spacing: 0.1em } ← common.css:277
が継承され、body の 16px に対して 1.6px として効くためです。
（em指定の letter-spacing は指定時のfont-sizeで絶対値になり、
子要素はその絶対値を受け継ぎます）
body 側は他の全要素に影響するので触らず、
ここだけ normal に戻します。
------------------------------------------------------------ */
/* ------------------------------------------------------------
L5. 見出しの折返しを是正（全セクション）
固定pxの見出しが狭い幅で語中から割れていました。実測:
768px おすすめプラン 60px 枠321px 必要431px → 44.6px以下が必要
トータルサポートコース 28px 枠209px 必要324px → 18.0px以下
375px トータルサポートコース 28px 枠247px 必要324px → 21.3px以下
Decision Monthly Pay 24px 枠231px 必要277px → 20.0px以下
参考サイト(drtraining.jp)は html{font-size:0.0694vw} の完全流動で、
画面幅に対して全ての文字が比例して縮みます。
同じ挙動を clamp(下限, N vw, 現在値) で近似します。
N は「1440pxでちょうど現在値になる」係数（現在値 ÷ 14.4）。
いずれもインラインstyleで指定されているため !important が要ります。
------------------------------------------------------------ */
/* おすすめプラン
768pxでの内訳（枠321px / 209px）:
h2「おすすめプラン」 7文字×44.5px + 字間1.6px×6 = 321.1px → 0.1pxあふれ
h3「トータルサポートコース」11文字×18px + 字間1.6px×11 = 215px → 6pxあふれ
body{letter-spacing:0.1em} の継承分が効くので、
文字サイズだけで見積もると必ず足りなくなります。 */
#recommend h3 { font-size: clamp(16px, 1.94vw, 28px) !important; }
/* 実績（長文なので1行化はせず、サイズだけ追従させる） */
#case h3 { font-size: clamp(14px, 1.25vw, 18px) !important; }
/* 料金プラン */
/* 375pxで枠231pxに対し必要277px。24px→20.0pxでちょうど境界に
乗ってしまい2行に割れるため、少し余裕を持たせる */
#price h4 { font-size: clamp(16px, 5.06vw, 24px) !important; }
/* 数値と単位が離れないようにするための汎用クラス。
例:「１４．５kg減」が「…kg／減、…」と割れるのを防ぐ */
.nowrap { white-space: nowrap; }
/* ------------------------------------------------------------
L6. 狭い画面での折返し（344px時の実測にもとづく）
------------------------------------------------------------ */
/* --- ヒーロー見出しの「す。」孤立 ----------------------------
テーマ側は clamp(28px, 6vw, 48px)。
344pxでは 6vw=20.6px が下限28pxで止まるため、
「全力でサポートします。」に必要な323pxが枠272pxを超えて
「全力でサポートしま／す。」と割れていました。
1行化には23.6px以下が必要なので下限を22pxに下げます。
上限48pxは変えないのでPCの見た目は元のままです。 */
.hero-title { font-size: clamp(22px, 6vw, 48px) !important; }
/* --- Decision Monthly Payment -------------------------------
320px（vwはスクロールバーを含む幅で計算される）で
枠176pxに対し必要187px。1行化には15.2px以下が必要。
5.06vw では16.19pxにしかならないため係数を下げます。 */
#price h4 { font-size: clamp(13px, 4.5vw, 24px) !important; }
/* ============================================================
L7. セクション間の不統一をそろえる
実測（1440px）で判明したばらつき:
セクション 上下padding 左右padding コンテンツ幅 h2
campaign 64px 24px 1377px 18px
reasons 96px 0px 1180px 36px
service 96px 0px 1377px 36px
recommend 96px 0px 1377px 60px
case 96px 24px (containerなし) 36px
price 96px 0px 1377px 36px
staff 96px 24px (containerなし) 40px
gallery 96px 0px 1377px 32px
・上下が64と96で混在
・左右0と24が混在し、24のセクションはcontainerの24と二重になって
左端が48pxまで押し込まれていた
・コンテンツ幅が1180と1377で混在
・h2が 18/32/36/40/60 と5種類
参考サイト(drtraining.jp)はセクション見出しが22pxで一貫、
コンテンツ幅は画面の82%前後。
Decisionの現行の多数派（36px）を基準に、幅は82%側へそろえます。
============================================================ */
/* --- 上下と左右の余白をそろえる ------------------------------
★!important が要る理由
.section-campaign { padding:64px 24px } のように
クラスで指定されているものは詳細度(0,1,0)で、
main > section の(0,0,2)に勝ってしまいます。
#staff の中の div は max-width:900px をインラインstyleで
持っており、これはさらに強い。
このテーマは要素の41%がインラインstyleを持つ作りなので、
全体をそろえる指定はここで押し切ります。 */
main > section {
padding-top: 96px !important;
padding-bottom: 96px !important;
padding-left: 0 !important;
padding-right: 0 !important;
}
/* ヒーローだけは全画面なので上下を別扱いにする。
下の96pxはセクション共通の間隔（見出しと本文の間）を想定した値で、
内容を下端に寄せるヒーローに当てると、ボタンの下に何もない帯が
できてしまう。スマホでは画面が狭いぶん特に目立つ。
共通ルールが !important なので、ここも同じ強さで上書きする。 */
.hero {
padding-top: 0 !important;
padding-bottom: 80px !important;
}
@media (max-width: 767px) {
.hero { padding-bottom: 36px !important; }
}
/* --- コンテンツ幅をそろえる ----------------------------------
containerを使っていないセクション(#case,#staff)も同じ幅に。
★ の外にある要素は「main > section >」に当たらない。
フッターの .container がテーマ既定（max-width:1440px / padding:0 24px）の
ままで、どの画面幅でも左右いっぱいまで広がっていた。
同じ理由でアクセスセクションもかつてずれていた。
main の外に新しいブロックを足すときは、ここに追加すること。 */
main > section > .container,
main > section > .dg-container,
.site-footer > .container,
#case > *:not(script),
/* 背景画像とオーバーレイは全幅で敷くので、幅の統一からは外す */
#staff > *:not(script):not(.staff-bg):not(.staff-overlay) {
width: min(1180px, 88vw) !important;
max-width: none !important;
margin-inline: auto !important;
padding-left: 0 !important;
padding-right: 0 !important;
}
/* --- 本文をそろえる ------------------------------------------
選ばれる理由で使っている値（参考サイトのPROMISE本文17px）に合わせます。 */
#service .service-card p:last-child,
#case .case-text p,
#recommend .recommend-box > div {
font-size: clamp(14px, 1.18vw, 17px);
line-height: 1.6;
}
/* --- ギャラリーの比率を素材に合わせる ------------------------
素材は900×600（3:2）ですが枠が4:3で、上下がトリミングされていました。
キャンペーンは素材が850×850なので1:1のままが正しく、変更しません。 */
/* 枠を決めているのは .gallery-item のほう。
img はインラインで height:100% を持つので、
img 側に aspect-ratio を書いても親の高さに従ってしまいます。 */
#gallery .gallery-item {
aspect-ratio: 3 / 2;
/* テーマは transition:all 0.5s。all だと aspect-ratio まで補間対象になり、
common.cssの4/3からここの3/2へ0.5秒かけて枠が変形します。
読み込み時に画像がぐにゃりと縮んで見えるので、
ホバーで実際に変わるものだけに限定します。 */
transition-property: border-color, box-shadow, opacity;
}
#gallery img { object-fit: cover; }
/* ------------------------------------------------------------
L8. 「豊富なマシン設備と綺麗な内装」の本文だけ位置がずれる問題
.reason-text はブロック要素で、テンプレート上は
←.flex の閉じ
（改行＋インデント）
となっています。この改行＋インデントが空白テキストノードとして
行ボックスを作り、01と03では高さ19pxを占めていました。
（02だけ0だったため、02の本文が一段上に見えていた）
実測: 見出し下端から本文まで 01/03=38px 02=12px
flex コンテナにすると空白のみのテキストノードは無視されるので、
3つとも同じ位置にそろいます。
------------------------------------------------------------ */
.reason-text {
display: flex;
flex-direction: column;
}
/* ============================================================
L9. 文字サイズをセクション横断でそろえる
実測（1440px）では本文相当の文字が
8 / 9 / 10 / 11 / 12 / 13 / 16 / 17px
の8種類に散っていました。役割ごとに3段階へ整理します。
本文 clamp(14px, 1.18vw, 17px) 説明文・リード文
補助 clamp(12px, 0.90vw, 13px) 注釈・資格リスト・キャプション
英字ラベル 10px 見出しの上に置く英語（.section-label と同じ）
17px は「選ばれる理由」で使っている値で、
参考サイト(drtraining.jp)のPROMISE本文と同じです。
============================================================ */
/* --- 本文 ---------------------------------------------------- */
.hero-desc,
#service .service-card p:last-of-type,
/* :not(.section-label) を必ず付けること。
付け忘れると見出し上の英字ラベルまで本文サイズに膨らみます。 */
#case p:not(.section-label),
#recommend .recommend-box > div {
font-size: clamp(14px, 1.18vw, 17px) !important;
line-height: 1.7;
}
/* --- 英字ラベル ---------------------------------------------
.section-label は10pxでそろえてあります。
同じ役割なのに 8px / 9px になっていたものを合わせます。 */
.hero-tag,
#service .service-card p:first-of-type,
/* ★ここは div に限定すること。
.italic だけで狙うと、class="font-black italic" を持つ
h2「おすすめプラン」まで10pxに落ちます。 */
#recommend .reveal > div.italic {
font-size: 10px !important;
}
/* ------------------------------------------------------------
L10. 「選ばれる理由」02 の行が他とずれる（1024px未満）
02 の見出しだけ「豊富なマシン設備と
綺麗な内装」と
を持つため2行になり、本文の開始位置が下がっていました。
実測（900px）:
見出しの高さ 01=24px 02=49px 03=24px
見出し→本文 01=36px 02=61px 03=36px
を消す指定は @media (min-width:1024px) の中にしか
書いていなかったのが原因です。幅は十分あるので全幅で外し、
折り返しはブラウザに任せます。
------------------------------------------------------------ */
.reason-item h3 br { display: none; }
/* ------------------------------------------------------------
L11. 「おすすめプラン」のリード文が小さい
h2 が36pxなのにリード文が18pxで、本文(17px)とほぼ同じ大きさでした。
見出しに準ずる扱いなので中間の階層に引き上げます。
h2 36px → リード 24px → 本文 17px
------------------------------------------------------------ */
#recommend .container > .reveal > p.font-black,
#recommend p.font-black.italic {
font-size: clamp(18px, 1.67vw, 24px) !important;
line-height: 1.7 !important;
}
/* ============================================================
セクションタイトル ― 唯一の定義
★ここ以外で h2 / .section-label の見た目を触らないこと。
以前は同じ要素への指定が8箇所に散らばり、後から書いたものが
前のものを部分的に上書きする状態になっていて、
どれだけ直しても揃わなかった。
テンプレートは全セクションこの形にそろえてある:
インラインstyleは色の指定だけに整理したので、
!important は不要になっている。
============================================================ */
.section-title-area {
text-align: center;
margin-bottom: 64px;
/* テンプレートの改行＋インデントが行ボックスを作り、
ラベルと見出しの間隔がセクションごとにずれる。
親を0にして潰し、中身は子で指定し直す */
line-height: 0;
}
.section-title-area > * { line-height: normal; }
/* --- 英字ラベル ---------------------------------------------
.section-label はセクションタイトル以外（カード内の小ラベル）でも
使うため、共通の書式はここで一括指定する。 */
.section-label {
font-size: 10px;
font-weight: 900;
font-style: normal;
line-height: 1.6;
letter-spacing: normal; /* body の 0.1em 継承を打ち消す */
text-transform: uppercase;
}
.section-title-area .section-label {
display: block;
margin: 0 0 12px;
}
/* --- 見出し --------------------------------------------------
#staff は写真の横に置くレイアウトのため
.section-title-area の構造には入れていないが、書式は共通。 */
.section-title-area h2,
#staff h2 {
margin: 0;
font-size: clamp(24px, 2.5vw, 36px);
line-height: 1.35;
letter-spacing: 0.045em;
font-weight: 900;
font-style: italic;
text-transform: uppercase;
}
/* 人名の後ろに付くローマ字は大文字化しない */
#staff h2 span { text-transform: none; }
/* staff だけ見出しの下に本文が続くので余白を持たせる */
#staff h2 { margin-bottom: 24px; }
/* --- 見出しの下の線 ------------------------------------------ */
.section-title-bar {
width: 40px;
height: 4px;
margin: 24px auto 0;
background: var(--primary);
}
/* --- 暗い背景のセクション ------------------------------------ */
#service .section-title-area .section-label,
#recommend .section-title-area .section-label { color: var(--primary); }
#recommend .section-title-area h2 {
color: #fff;
text-shadow: 0 2px 10px rgba(0,0,0,.35);
}
/* ------------------------------------------------------------
フッターまわりの hover（インラインの onmouseover から移設）
見た目・数値は元のインライン指定と同一
------------------------------------------------------------ */
.footer-sns-link { transition: color 0.3s; }
.footer-sns-link:hover,
.footer-sns-link:focus-visible { color: var(--primary); }
.sticky-cta-btn:hover,
.sticky-cta-btn:focus-visible { transform: scale(1.1); }
/* ============================================================
固定ヘッダーの位置ずれ（実バグの修正）
テーマ側 common.css:3261 の .main-nav は
position: fixed; width: 100%; z-index: 100;
と書かれていますが、top / left の指定がありません。
fixed で top:auto の場合、要素は「静的位置」に置かれます。
トップページでは偶然それが 0 になるため問題が出ませんでしたが、
ブログ記事では静的位置が 48px となり、
ヘッダーが画面上端から48px浮いて、
その隙間から本文が透けて見える状態になっていました。
実測（本番 /blog/4241/）:
computed top = 48px ／ static にすると 0
→ top を明示していないことが原因と確定
→ top:0 を当てると 48px → 0px になることも確認済み
トップページは元から 0 なので見た目は変わりません。
============================================================ */
.main-nav {
top: 0;
left: 0;
}
/* ------------------------------------------------------------
下層ページのヘッダー（ブログ・固定ページ）
ヘッダーは元々ヒーロー動画に重ねる前提で作られており、
スクロール前は 背景=透明 / ロゴ=白 / リンク=白 です。
トップは暗い動画の上なので見えますが、
白背景の下層ページでは何も見えない状態でした（実測で確認）。
また position:fixed のため、下層では本文が
ヘッダーの下に潜り込んでいました（main上端46px < nav高73px）。
トップ（body.home）は一切変更せず、下層だけ
「最初からスクロール後の見た目」に固定し、高さ分の余白を確保します。
------------------------------------------------------------ */
body:not(.home) .main-nav {
background: #fff;
padding: 12px 0;
border-bottom: 1px solid var(--zinc-100);
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, .05);
}
body:not(.home) .nav-logo { filter: brightness(0); }
body:not(.home) .nav-link { color: var(--zinc-900); }
/* テーマ側は #menu-open { color: white !important } なので
同じ強さで返さないとハンバーガーが白いままになります
（白背景に白アイコンで見えなくなっていた） */
body:not(.home) #menu-open { color: var(--zinc-900) !important; }
/* 固定ヘッダーの高さぶんコンテンツを下げる。
ヘッダー実測49px。元の余白と足して開きすぎないよう最小限にする */
body:not(.home) .contents { padding-top: 49px; }
/* ============================================================
ブログをトップと同じ世界観にそろえる
実測した差分（1440px）:
トップ ブログ（変更前）
コンテンツ幅 1180px 1200px（左113 / トップは左123）
本文 17px / 行間1.6 15px / 行間1.77
見出し h2 36px italic 900 20px normal 700（黄色ベタ塗り）
一覧カード 3列 2列
構造・URL・本文テキストは一切変更していません。
変えているのは寸法と書式だけです。
============================================================ */
/* --- 幅と左端をトップに合わせる ------------------------------ */
.single-inner {
width: min(1180px, 88vw);
max-width: none;
margin-inline: auto;
}
/* --- 本文：トップの本文と同じ階層に --------------------------
17px / 行間1.9。1行50文字は日本語には長いので、
本文カラム側で行長を抑える */
.single-content p,
.single-content li {
font-size: clamp(14px, 1.18vw, 17px);
line-height: 1.9;
}
/* --- 記事内の見出し：トップの見出し言語（イタリック900）へ ----
黄色のベタ塗りは維持しつつ、書体だけそろえる */
.single-content h2 {
font-size: clamp(20px, 1.94vw, 28px);
font-weight: 900;
font-style: italic;
line-height: 1.45;
}
.single-content h3 {
font-size: clamp(17px, 1.53vw, 22px);
font-weight: 900;
font-style: italic;
line-height: 1.5;
}
/* --- 記事タイトル（黒帯）は維持。サイズだけ本文階層に合わせる - */
.single-header-title {
font-size: clamp(20px, 2.22vw, 32px);
line-height: 1.45;
}
/* --- 一覧のCSSはこの下の「ブログ一覧」節へ移設 ----------------
.archive-content / .entry-* / .archive-header* を前提にした指定が
ありましたが、カンプに合わせて archive.php を書き直したため
対象の要素が存在しなくなりました。まとめて撤去しています。 */
/* --- サイドバーの見出し ---------------------------------------
記事本文の h2 と同じ大きさだと階層が混ざって見えるため、
補助情報として一段落とす（セマンティクスは h2 のまま） */
.single-sidebar-title {
font-size: clamp(13px, 1.11vw, 16px);
font-weight: 900;
font-style: italic;
line-height: 1.45;
}
/* ==================================================================
ブログ記事の構成パーツ
mag.smarthr.jp の記事ページの「構造」を参考にしたもの。
見た目はトップページの言語（イタリック900・黄色のライン・
10px の英字ラベル・薄いグレーの面）に合わせている。
パンくず → 目次 → 本文 → 執筆者 → 話題のキーワード
の順で並ぶ。
================================================================== */
/* --- パンくず ------------------------------------------------- */
.dg-breadcrumb {
margin: 0 0 20px;
}
.dg-breadcrumb ol {
display: flex;
/* 折り返さない。記事タイトルは長いので、最後の項目を縮めて
省略記号で収める（折り返すとヘッダー直下で2行になる） */
flex-wrap: nowrap;
align-items: center;
gap: 8px;
list-style: none;
margin: 0;
padding: 0;
}
.dg-breadcrumb li:not(:last-child) { flex: none; }
.dg-breadcrumb li:last-child { min-width: 0; }
.dg-breadcrumb li {
display: flex;
align-items: center;
font-size: clamp(11px, 0.83vw, 12px);
line-height: 1.5;
color: var(--zinc-500);
/* 記事タイトルは長いので、パンくずの中では1行に収める */
min-width: 0;
}
/* 区切りは文字ではなく擬似要素で。読み上げに混ざらないようにする */
.dg-breadcrumb li + li::before {
content: "";
flex: none;
width: 5px;
height: 5px;
margin-right: 8px;
border-top: 1px solid var(--zinc-400);
border-right: 1px solid var(--zinc-400);
transform: rotate(45deg);
}
.dg-breadcrumb a {
color: var(--zinc-500);
text-decoration: none;
transition: color .2s;
}
.dg-breadcrumb a:hover {
color: var(--zinc-900);
}
.dg-breadcrumb [aria-current="page"] {
color: var(--zinc-900);
font-weight: 700;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
@media (max-width: 767px) {
/* 記事ページ（3階層）のときだけ、現在地＝記事タイトルを隠す。
長くて幅を圧迫するうえ、すぐ下の見出しと同じ文言になるため。
ブログ一覧（2階層）で隠すと「ホーム」だけになってしまうので、
3つ目がある場合に限定する。 */
.dg-breadcrumb li:last-child:nth-child(n + 3) { display: none; }
}
/* --- 目次 ----------------------------------------------------- */
.dg-toc {
/* 記事ヘッダーとの間隔。スマホではヘッダーの下余白が
つかないため、ここで明示的に空ける */
margin: clamp(24px, 2.6vw, 38px) 0 clamp(28px, 3vw, 44px);
}
.dg-toc-box {
background: var(--zinc-50);
border: 1px solid var(--zinc-200);
border-left: 4px solid var(--primary);
padding: clamp(18px, 1.8vw, 26px) clamp(18px, 2vw, 28px);
}
.dg-toc-summary {
list-style: none;
cursor: pointer;
display: flex;
align-items: baseline;
gap: 12px;
/* 開閉の三角はブラウザ既定を消して自前で描く */
}
.dg-toc-summary::-webkit-details-marker { display: none; }
.dg-toc-summary .section-label {
color: var(--zinc-400);
margin: 0;
}
.dg-toc-heading {
font-size: clamp(15px, 1.25vw, 18px);
font-weight: 900;
font-style: italic;
line-height: 1.4;
letter-spacing: 0.045em;
}
/* 開閉マーク（右端） */
.dg-toc-summary::after {
content: "";
margin-left: auto;
align-self: center;
width: 8px;
height: 8px;
border-bottom: 2px solid var(--zinc-900);
border-right: 2px solid var(--zinc-900);
transform: rotate(-135deg);
transition: transform .25s;
}
.dg-toc-box:not([open]) .dg-toc-summary::after {
transform: rotate(45deg);
}
.dg-toc-list {
margin: 18px 0 0;
padding: 0;
list-style: none;
counter-reset: dgtoc;
}
.dg-toc-item {
counter-increment: dgtoc;
line-height: 1.7;
}
.dg-toc-item + .dg-toc-item { margin-top: 8px; }
.dg-toc-item a {
display: flex;
gap: 10px;
font-size: clamp(13px, 1.04vw, 15px);
color: var(--zinc-600);
text-decoration: none;
transition: color .2s;
}
.dg-toc-item a::before {
content: counter(dgtoc, decimal-leading-zero);
flex: none;
font-size: 11px;
font-weight: 900;
font-style: italic;
color: var(--zinc-400);
line-height: 1.9;
transition: color .2s;
}
.dg-toc-item a:hover { color: var(--zinc-900); }
.dg-toc-item a:hover::before { color: var(--primary); }
/* h3 は一段下げる */
.dg-toc-item.is-level3 { padding-left: 22px; }
.dg-toc-item.is-level3 a { font-size: clamp(12px, 0.97vw, 14px); }
/* 目次から飛んだとき、固定ヘッダーの下に見出しが隠れないように */
.single-content h2,
.single-content h3 { scroll-margin-top: 90px; }
/* --- 執筆者 --------------------------------------------------- */
.dg-author {
display: grid;
grid-template-columns: auto 1fr;
align-items: start;
gap: 8px 20px;
margin: clamp(36px, 4vw, 56px) 0 0;
padding: clamp(20px, 2.2vw, 32px);
background: var(--zinc-50);
border-top: 4px solid var(--primary);
}
.dg-author .section-label {
grid-column: 1 / -1;
color: var(--zinc-400);
margin: 0 0 4px;
}
.dg-author-photo {
width: 64px;
height: 64px;
border-radius: 50%;
overflow: hidden;
background: var(--zinc-200);
}
.dg-author-photo img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.dg-author-name {
font-size: clamp(15px, 1.25vw, 18px);
font-weight: 900;
font-style: italic;
line-height: 1.4;
letter-spacing: 0.045em;
}
.dg-author-desc {
margin-top: 8px;
font-size: clamp(12px, 0.97vw, 14px);
line-height: 1.8;
color: var(--zinc-600);
}
/* --- 話題のキーワード ------------------------------------------ */
.dg-keywords {
margin: clamp(36px, 4vw, 56px) 0 0;
}
.dg-keywords .section-label {
color: var(--zinc-400);
margin: 0 0 8px;
}
.dg-keywords-title {
font-size: clamp(17px, 1.53vw, 22px);
font-weight: 900;
font-style: italic;
line-height: 1.4;
letter-spacing: 0.045em;
margin: 0 0 18px;
/* 記事本文の h2 と同じ装飾（左の黄色線）がつくのを避ける */
padding: 0;
border: 0;
}
.dg-keyword-list {
display: flex;
flex-wrap: wrap;
gap: 8px;
list-style: none;
margin: 0;
padding: 0;
}
.dg-keyword {
display: inline-block;
padding: 7px 14px;
border: 1px solid var(--zinc-200);
border-radius: 999px;
background: #fff;
font-size: clamp(12px, 0.90vw, 13px);
line-height: 1.5;
color: var(--zinc-600);
text-decoration: none;
transition: background .2s, border-color .2s, color .2s;
}
.dg-keyword::before {
content: "#";
color: var(--zinc-400);
margin-right: 3px;
transition: color .2s;
}
.dg-keyword:hover {
background: var(--primary);
border-color: var(--primary);
color: var(--zinc-900);
}
.dg-keyword:hover::before { color: var(--zinc-900); }
/* サイドバー内のキーワードは、既にブロック見出しがあるので
ブロック内の見出しとラベルは重複になる。消す。 */
.single-sidebar-block .dg-keywords { margin: 0; }
.single-sidebar-block .dg-keywords .section-label,
.single-sidebar-block .dg-keywords-title { display: none; }
.single-sidebar-block .dg-keyword {
padding: 5px 11px;
font-size: 12px;
}
/* ==================================================================
フロントページの修正（2026-08-31）
================================================================== */
/* --- ヒーロー：スマホで下が見切れる ---------------------------
.hero は 100vh。iOS Safari の 100vh は「アドレスバーが隠れた状態」の
高さなので、読み込み直後（バーが出ている状態）では画面より縦に長くなり、
下端のボタンがバーの裏に入って見えなくなる。
実際に見えている高さ = 100svh に変える。
svh 非対応のブラウザではこの宣言ごと無効になり、
common.css の 100vh がそのまま残る（＝従来どおり）。 */
.hero { height: 100svh; }
@media (max-width: 767px) {
.hero-desc { margin-bottom: 24px; }
}
/* ヒーローのタグラインは日本語になったので、
英字用の字間（0.6em）と大文字化を外す */
.hero-tag {
letter-spacing: 0.04em;
text-transform: none;
font-weight: 700;
font-size: 11px;
}
/* --- アクセスセクションの上余白 -------------------------------
.dg-access-section は padding-top が 0 で、直前のギャラリーと
背景の切れ目に見出しが貼り付いていた。
他のセクション（.section-py = 96px）と同じ間隔にそろえる。 */
.dg-access-section { padding-top: clamp(64px, 6.7vw, 96px); }
/* --- フッター ------------------------------------------------
Googleマップを外したので、ロゴ／Location／Hours の3カラムに
組み直す。以前はインラインstyleで書かれていたものをここへ移した。 */
.site-footer {
background: var(--zinc-900);
color: #fff;
padding: clamp(72px, 8.9vw, 128px) 0 clamp(48px, 6.7vw, 96px);
}
.footer-top {
display: grid;
grid-template-columns: 1fr;
gap: clamp(40px, 4.4vw, 64px);
padding-bottom: clamp(48px, 5.6vw, 80px);
}
@media (min-width: 768px) {
/* ロゴを広めに、情報2列を等幅で */
.footer-top { grid-template-columns: 1.4fr 1fr 1fr; gap: clamp(40px, 5vw, 72px); }
}
.site-footer .footer-logo {
height: 20px;
width: auto;
filter: invert(1);
display: block;
}
.footer-lead {
margin-top: 24px;
font-size: clamp(12px, 0.97vw, 14px);
line-height: 1.9;
color: var(--zinc-400);
}
.footer-heading {
font-size: 10px;
font-weight: 900;
font-style: italic;
color: var(--primary);
letter-spacing: 0.4em;
text-transform: uppercase;
border-bottom: 1px solid rgba(255, 255, 255, .1);
padding-bottom: 12px;
margin-bottom: 24px;
}
.footer-item {
display: flex;
gap: 16px;
align-items: flex-start;
}
.footer-item + .footer-item { margin-top: 20px; align-items: center; }
.footer-icon { flex: none; color: var(--primary); margin-top: 4px; }
.footer-item + .footer-item .footer-icon { margin-top: 0; }
.site-footer .footer-address {
margin-top: 0; /* common.css の 40px を打ち消す */
font-size: 12px;
font-weight: 700;
line-height: 1.8;
color: var(--zinc-300);
}
.footer-tel {
font-size: 16px;
font-weight: 900;
font-style: italic;
color: #fff;
text-decoration: none;
letter-spacing: 0.02em;
transition: color .2s;
}
.footer-tel:hover { color: var(--primary); }
.footer-hours {
display: grid;
gap: 8px;
font-size: 13px;
font-weight: 900;
font-style: italic;
margin: 0;
}
.footer-hours > div {
display: flex;
justify-content: space-between;
gap: 16px;
padding-bottom: 8px;
border-bottom: 1px solid rgba(255, 255, 255, .05);
}
.footer-hours > div:last-child { border-bottom: 0; padding-bottom: 0; }
.footer-hours dt, .footer-hours dd { margin: 0; }
.footer-hours dd { color: var(--zinc-300); }
.footer-bottom {
display: flex;
flex-direction: column;
align-items: center;
gap: 32px;
border-top: 1px solid rgba(255, 255, 255, .1);
padding-top: clamp(40px, 4.4vw, 64px);
}
.footer-links {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 16px 40px;
}
.footer-links a {
font-size: 10px;
font-weight: 900;
font-style: italic;
letter-spacing: 0.4em;
text-transform: uppercase;
color: #fff;
text-decoration: underline;
text-decoration-color: var(--primary);
text-underline-offset: 8px;
transition: color .2s;
}
.footer-links a:hover { color: var(--primary); }
.footer-copy {
font-size: 10px;
font-weight: 900;
font-style: italic;
letter-spacing: 0.4em;
text-transform: uppercase;
color: var(--zinc-500);
text-align: center;
}
@media (max-width: 767px) {
/* コピーライトは字間が広いと2行に割れて読みにくいので詰める。
右下の固定CTA（56px）と重ならないよう下にも余白を足す。 */
.footer-copy { letter-spacing: 0.2em; line-height: 1.8; }
.footer-bottom { padding-bottom: 72px; }
}
/* --- キャンペーン：スマホの余白とドット位置 --------------------
コンテンツ幅は min(1180px, 88vw)。スマホでは左右に 6vw ずつ
余白が空くので、上下も同じ 6vw にそろえて額縁のように見せる。
（見出しを外して画像だけのセクションになったため、
上下96pxのままだと間延びして見える） */
@media (max-width: 767px) {
#campaign {
padding-top: 6vw !important;
padding-bottom: 6vw !important;
}
}
/* 表示位置バーはスライダーの下へ。
デスクトップは3枚とも並ぶので出さない。 */
#campaign .slider-dots {
display: none;
justify-content: center;
margin-top: 20px;
}
@media (max-width: 767px) {
#campaign .slider-dots { display: flex; }
}
/* ==================================================================
代表トレーナー（TRAINER MESSAGE）
ジムの内観を背景に敷き、黒のグラデーションを重ねた全幅の暗い帯。
その上に背景透過の人物写真（切り抜き）とメッセージを載せる。
写真が切り抜きなので、枠・角丸・矩形の影は付けない。
代わりに drop-shadow（アルファに沿う影）と背後の淡い光で
暗い背景から人物を起こす。
レイアウトは grid-template-areas で切り替える：
PC "photo head" / "photo body" （写真が2行ぶんを受け持つ）
SP "photo head" / "body body" （名前だけ写真の横に置く）
スマホで写真を上に大きく積むと、写真と文章の量が釣り合わない。
・仕切りに縦線は使わない
・文字サイズはこのセクションの変数3つだけを使う
（見出しは他セクションと共通の #staff h2 に任せる）
・白文字のコントラストは実測で最悪 8.5:1（AA基準 4.5:1）
================================================================== */
#staff {
--staff-fs-body: clamp(12px, 0.97vw, 14px); /* プロフィールの値 */
--staff-fs-label: 10px; /* 英字ラベル・項目名 */
position: relative;
isolation: isolate;
overflow: hidden;
background: var(--zinc-900); /* 背景画像が届く前の下地 */
color: #fff;
}
/* --- 背景と覆い ------------------------------------------------
背景は ![]()
で置いている。CSSの background-image と違って
loading="lazy" が効き、幅と高さを持たせられるため。 */
.staff-bg {
position: absolute;
inset: 0;
z-index: 0;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center 42%;
}
.staff-overlay {
position: absolute;
inset: 0;
z-index: 1;
background:
/* 文字が乗る右側ほど濃く */
linear-gradient(100deg, rgba(0,0,0,.56) 0%, rgba(0,0,0,.72) 45%, rgba(0,0,0,.82) 100%),
/* 上下を軽く締めて帯として見せる */
linear-gradient(180deg, rgba(0,0,0,.40) 0%, rgba(0,0,0,0) 24%, rgba(0,0,0,0) 76%, rgba(0,0,0,.40) 100%);
}
@media (max-width: 899px) {
/* 縦積みになると帯が1400px近い高さになり、16:9の画像が
大きく引き伸ばされて天井の照明が画面を占める。
横方向のグラデーションでは足りないので、全面を濃く落とす。 */
.staff-overlay {
background:
linear-gradient(180deg, rgba(0,0,0,.74) 0%, rgba(0,0,0,.82) 50%, rgba(0,0,0,.88) 100%);
}
}
/* --- 配置 ------------------------------------------------------ */
.staff-layout {
position: relative;
z-index: 2;
display: grid;
/* スマホ: 人物の横に名前、メッセージは下に回す。
写真が縦長（およそ 5:7）なので、名前は上下中央に置いて
写真の高さと釣り合わせる（下揃えだと名前が沈んで見える） */
grid-template-columns: minmax(0, 46%) minmax(0, 1fr);
grid-template-areas:
"photo head"
"body body";
align-items: center;
gap: clamp(18px, 2.4vw, 28px) clamp(14px, 2.1vw, 22px);
}
@media (max-width: 899px) {
/* 写真の高さ（幅の約1.43倍）に対して名前まわりが軽いので、
名前を一段大きくして釣り合わせる。
セクション共通の見出しは 24px だが、ここは写真と並ぶため
少し上げている（PCでは共通の36pxのまま）。 */
#staff h2 { font-size: clamp(22px, 7.2vw, 30px); }
}
.staff-photo { grid-area: photo; }
.staff-head { grid-area: head; }
.staff-body { grid-area: body; }
@media (min-width: 900px) {
/* PC: 左に人物、右に名前とメッセージ */
.staff-layout {
grid-template-columns: minmax(0, 0.72fr) minmax(0, 1fr);
grid-template-areas:
"photo head"
"photo body";
align-items: start;
gap: 0 clamp(40px, 4.7vw, 72px);
}
.staff-photo { align-self: end; }
.staff-head { margin-bottom: clamp(24px, 2.6vw, 36px); }
}
/* --- 人物（切り抜き）------------------------------------------- */
.staff-photo {
position: relative;
margin: 0;
}
/* 背後の淡い光。暗い背景に人物が沈まないようにする。
closest-side にして、必ず枠の内側で透明に戻す
（枠の角まで色が残ると、四角い面が浮いて見えてしまう） */
.staff-photo::before {
content: "";
position: absolute;
inset: 0;
z-index: -1;
background: radial-gradient(closest-side at 50% 52%,
rgba(255, 255, 255, .14) 0%,
rgba(255, 255, 255, 0) 100%);
}
.staff-photo img {
display: block;
width: 100%;
height: auto;
/* 切り抜きは前腕のところで水平に切れている。
そのままだと暗い背景の上で四角いブロックに見えるので、
下端を透明に溶かして背景となじませる。 */
-webkit-mask-image: linear-gradient(180deg, #000 76%, rgba(0, 0, 0, 0) 100%);
mask-image: linear-gradient(180deg, #000 76%, rgba(0, 0, 0, 0) 100%);
}
/* --- 名前まわり -----------------------------------------------
暗い面に載るので、英字ラベルはブランドの黄色に戻せる
（白背景では 1.5:1 しかなく使えなかった） */
.staff-head .section-label {
display: block;
color: var(--primary);
margin: 0 0 10px;
}
/* 名前はシアーしない。
セクション共通の見出しは font-style: italic だが、日本語には
イタリック字形がないため、ブラウザが機械的に傾ける（疑似斜体）。
人名でそれをやると字が歪んで見えるので、ここだけ立体に戻す。
大きさ・太さ・字送りは共通ルールのまま。 */
#staff h2 {
font-style: normal;
letter-spacing: 0.02em;
}
/* ローマ字表記は名前の下に落として副題にする */
#staff h2 span {
display: block;
margin-top: 10px;
font-size: var(--staff-fs-label);
font-weight: 900;
font-style: normal;
letter-spacing: 0.24em;
color: var(--zinc-300);
}
/* --- メッセージ本文 -------------------------------------------
手書き文字の画像（白・背景透過）。全文は alt に持たせている。
964×363 の横長なので、原寸以上に拡大されないよう上限を設ける。 */
.staff-quote-img {
display: block;
width: 100%;
max-width: 560px;
height: auto;
margin: 0 0 clamp(24px, 2.6vw, 36px);
}
/* 黄色のバーは見出しに属する装飾なので、名前の下に置く
（他セクションの .section-title-bar と同じ役割） */
.staff-head::after {
content: "";
display: block;
width: 40px;
height: 4px;
margin-top: clamp(14px, 1.6vw, 20px);
background: var(--primary);
}
/* --- プロフィール ---------------------------------------------
暗い帯の上なので、面はガラス（半透明＋ぼかし）。
囲われたデータのかたまりだと一目で分かるようにする。 */
.staff-meta-grid {
display: grid;
gap: clamp(20px, 2.2vw, 28px) clamp(24px, 3vw, 48px);
padding: clamp(20px, 2.2vw, 32px);
background: rgba(255, 255, 255, .07);
border: 1px solid rgba(255, 255, 255, .16);
border-radius: 8px;
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
}
@media (min-width: 600px) {
.staff-meta-grid { grid-template-columns: 1fr 1fr; }
}
.staff-meta-item.is-wide {
grid-column: 1 / -1;
/* 区切りは横線だけ */
padding-top: clamp(20px, 2.2vw, 28px);
border-top: 1px solid rgba(255, 255, 255, .16);
}
.staff-meta-item h3 {
display: flex;
align-items: center;
gap: 8px;
margin-bottom: 10px;
font-size: var(--staff-fs-label);
font-weight: 900;
letter-spacing: 0.08em;
color: #fff;
}
.staff-meta-item h3::before {
content: "";
flex: none;
width: 12px;
height: 2px;
background: var(--primary);
}
/* 12〜14pxの日本語にイタリックを掛けると、実体のない
疑似斜体になって読みにくいので、小さい文字は立体のまま。 */
.staff-meta-item p,
.staff-meta-list {
font-size: var(--staff-fs-body);
line-height: 1.75;
font-style: normal;
font-weight: 700;
color: var(--zinc-300);
}
.staff-meta-list {
list-style: none;
display: grid;
gap: 8px;
margin: 0;
padding: 0;
}
@media (min-width: 600px) {
.staff-meta-list { grid-template-columns: 1fr 1fr; gap: 8px 32px; }
}
.staff-meta-list li {
display: flex;
gap: 10px;
align-items: start;
}
.staff-meta-list li::before {
content: "";
flex: none;
width: 4px;
height: 4px;
margin-top: 0.66em;
background: var(--primary);
}
/* ==================================================================
料金プラン
すべてカード1種類（.plan-card）で組み直したもの。
以前は タブごとに 行レイアウト／3列グリッド／中央寄せ文章／
縦罫線で仕切った2段組 と作りがバラバラで、文字も
7・8・9・10・12・16・18・24px が混在していた。
・文字サイズはこのセクションの変数4つだけを使う（下の :root 相当）
・仕切りに縦線は使わない。区切りは余白と横線だけ
・タブは5つとも常に画面内。横スクロールはしない
================================================================== */
#price {
--plan-fs-tab: clamp(11px, 0.97vw, 13px); /* タブの文字。全タブ共通 */
--plan-fs-count: clamp(20px, 1.94vw, 28px); /* 回数 */
--plan-fs-price: clamp(16px, 1.53vw, 22px); /* 金額 */
--plan-fs-body: clamp(11px, 0.97vw, 13px); /* 単価・注記 */
--plan-fs-label: 10px; /* 英字ラベル */
}
.plan-taxnote {
margin-top: 10px;
font-size: var(--plan-fs-label);
font-weight: 900;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--zinc-400);
}
/* --- タブ ------------------------------------------------------
5つを必ず画面内に収める。狭い画面では2列に折り返し、
数が奇数のときは最後の1つを横いっぱいにして端を揃える。 */
.price-tabs {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 8px;
margin-bottom: clamp(28px, 3.2vw, 44px);
}
.price-tabs > :last-child:nth-child(odd) { grid-column: 1 / -1; }
@media (min-width: 700px) {
.price-tabs { grid-template-columns: repeat(5, 1fr); }
.price-tabs > :last-child:nth-child(odd) { grid-column: auto; }
}
.tab-trigger {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
gap: 2px;
min-height: 60px;
padding: 10px 12px;
background: #fff;
border: 1px solid var(--zinc-200);
border-radius: 6px;
cursor: pointer;
/* 書体・字送りはここだけで決める。全タブが同じ値を使う */
font-size: var(--plan-fs-tab);
line-height: 1.35;
letter-spacing: 0.04em;
color: var(--zinc-500);
text-align: center;
transition: background .25s, border-color .25s, color .25s;
}
.tab-trigger .tab-name { font-weight: 900; font-style: italic; }
.tab-trigger .tab-sub { font-weight: 700; color: var(--zinc-400); }
.tab-trigger .tab-name,
.tab-trigger .tab-sub { font-size: inherit; } /* 大きさは1つに統一 */
.tab-trigger:hover { border-color: var(--zinc-400); color: var(--zinc-900); }
.tab-trigger.active {
background: var(--zinc-900);
border-color: var(--zinc-900);
color: #fff;
}
.tab-trigger.active .tab-sub { color: var(--primary); }
/* --- カードの並び ---------------------------------------------- */
.plan-grid {
display: grid;
gap: clamp(10px, 1.1vw, 14px);
grid-template-columns: repeat(2, 1fr);
align-items: start;
}
/* 上級者向け（1枚に3行の内訳が入る）と オプション は
狭い画面では1列。半幅と全幅が混在すると、カードごとに
金額と単価が「縦積み／横並び」に分かれて不揃いに見えるため。 */
.plan-grid.is-2,
.plan-grid.is-3 { grid-template-columns: 1fr; }
/* 奇数個の最後は横いっぱいにして右端の欠けをなくす */
.plan-grid.is-5 > :last-child:nth-child(odd) { grid-column: 1 / -1; }
@media (min-width: 700px) {
.plan-grid.is-2 { grid-template-columns: repeat(2, 1fr); }
.plan-grid.is-3,
.plan-grid.is-4,
.plan-grid.is-5 { grid-template-columns: repeat(3, 1fr); }
.plan-grid.is-5 > :last-child:nth-child(odd) { grid-column: auto; }
}
@media (min-width: 1000px) {
.plan-grid.is-4 { grid-template-columns: repeat(4, 1fr); }
.plan-grid.is-5 { grid-template-columns: repeat(5, 1fr); }
}
/* --- カード ----------------------------------------------------- */
.plan-card {
background: #fff;
border: 1px solid var(--zinc-200);
border-radius: 8px;
padding: clamp(16px, 1.7vw, 24px);
display: flex;
flex-direction: column;
gap: 10px;
height: 100%;
font-variant-numeric: tabular-nums;
}
.plan-count {
font-size: var(--plan-fs-count);
font-weight: 900;
font-style: italic;
line-height: 1;
letter-spacing: 0.02em;
color: var(--zinc-900);
}
.plan-price {
font-size: var(--plan-fs-price);
font-weight: 900;
font-style: italic;
line-height: 1.25;
letter-spacing: 0.01em;
color: var(--zinc-900);
white-space: nowrap; /* 「¥288,000」と「税込」を割らない */
}
.plan-price.is-sm { font-size: var(--plan-fs-price); }
.plan-tax {
margin-left: 4px;
font-size: var(--plan-fs-label);
font-weight: 700;
font-style: normal;
letter-spacing: 0;
color: var(--zinc-400);
}
.plan-unit {
font-size: var(--plan-fs-body);
font-weight: 700;
line-height: 1.5;
color: var(--zinc-500);
white-space: nowrap;
}
/* 注記。区切りは横線（縦線は使わない） */
.plan-notes {
list-style: none;
margin: 2px 0 0;
padding: 12px 0 0;
border-top: 1px solid var(--zinc-100);
display: grid;
gap: 5px;
font-size: var(--plan-fs-body);
font-weight: 700;
line-height: 1.6;
color: var(--zinc-500);
}
/* --- カード内の内訳（Personal / Pair / 60min など）-------------- */
.plan-rows {
margin: 0;
display: grid;
gap: 12px;
}
.plan-rows > .plan-row { margin: 0; }
.plan-row + .plan-row {
padding-top: 12px;
border-top: 1px solid var(--zinc-100);
}
.plan-rowlabel {
margin: 0 0 4px;
font-size: var(--plan-fs-label);
font-weight: 900;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--zinc-400);
}
.plan-rowlabel.is-jp {
letter-spacing: 0.04em;
text-transform: none;
font-size: var(--plan-fs-body);
font-weight: 700;
color: var(--zinc-500);
margin: 0;
}
.plan-rowvalue {
margin: 0;
display: flex;
flex-wrap: wrap;
align-items: baseline;
gap: 4px 10px;
}
/* 体験料・アメニティは「項目 …… 金額」を1行で */
.plan-rows.is-inline .plan-row {
display: flex;
justify-content: space-between;
align-items: baseline;
gap: 16px;
}
.plan-rows.is-inline { gap: 10px; }
.plan-rows.is-inline .plan-row + .plan-row { padding-top: 10px; }
/* --- 法人向け（1枚もの）----------------------------------------- */
.plan-card.is-feature {
align-items: center;
text-align: center;
gap: 18px;
padding: clamp(32px, 4.4vw, 64px) clamp(20px, 2.2vw, 32px);
}
.plan-feature-title {
font-size: var(--plan-fs-count);
font-weight: 900;
font-style: italic;
line-height: 1.3;
}
.plan-feature-text {
max-width: 44em;
font-size: var(--plan-fs-body);
font-weight: 700;
line-height: 1.9;
color: var(--zinc-500);
}
.plan-feature-btn {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 16px 40px;
background: var(--zinc-900);
color: #fff;
border-radius: 6px;
font-size: var(--plan-fs-body);
font-weight: 900;
font-style: italic;
letter-spacing: 0.12em;
text-decoration: none;
transition: background .25s, color .25s;
}
.plan-feature-btn:hover { background: #000; color: var(--primary); }
/* --- 注記ブロック（旧：黄色の縦線つき）------------------------- */
.plan-note {
margin-top: clamp(14px, 1.5vw, 20px);
padding: clamp(16px, 1.7vw, 24px);
background: #fff;
border: 1px solid var(--zinc-200);
border-radius: 8px;
display: grid;
gap: 6px;
font-size: var(--plan-fs-body);
font-weight: 700;
line-height: 1.8;
color: var(--zinc-500);
}
/* --- 分割払いバナー --------------------------------------------- */
.plan-banner {
margin-top: clamp(28px, 3.2vw, 48px);
padding: clamp(24px, 3.2vw, 48px);
background: var(--primary);
border-radius: 8px;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
gap: 24px;
}
.plan-banner h4 {
font-size: clamp(17px, 1.67vw, 24px);
line-height: 1.2;
letter-spacing: -0.02em;
margin-bottom: 8px;
}
.plan-banner-lead {
font-size: var(--plan-fs-body);
font-weight: 700;
font-style: italic;
line-height: 1.7;
color: rgba(0, 0, 0, .62);
}
.plan-banner-lead span {
display: block;
margin-top: 4px;
font-weight: 400;
font-style: normal;
opacity: .7;
}
.plan-banner .banner-cards-img {
width: auto;
max-width: 250px;
filter: none;
opacity: 1;
}
/* ==================================================================
締めのCTA（アクセスの直後・フッターの直前）
黄色一面のバンド。料金表の下の Monthly Payment と同じ言語で、
暗色のフッターとの境がはっきり出る。
PC: 左に見出し・右にボタン2つ ／ SP: 縦積み中央揃え
================================================================== */
.cta-band {
background: var(--primary);
padding: clamp(56px, 6vw, 88px) 0;
}
.cta-band-inner {
width: min(1180px, 88vw);
margin-inline: auto;
display: grid;
gap: 32px;
align-items: center;
text-align: center;
}
@media (min-width: 900px) {
.cta-band-inner {
grid-template-columns: 1fr auto;
text-align: left;
}
}
.cta-band .section-label {
color: rgba(0, 0, 0, .45);
margin: 0 0 12px;
}
.cta-band h2 {
margin: 0;
font-size: clamp(24px, 2.5vw, 36px);
line-height: 1.35;
letter-spacing: 0.045em;
color: var(--zinc-900);
}
.cta-band-desc {
margin: 16px 0 0;
font-size: clamp(13px, 1.04vw, 15px);
line-height: 1.9;
font-weight: 700;
color: rgba(0, 0, 0, .62);
}
.cta-band-actions {
display: flex;
flex-direction: column;
gap: 12px;
align-items: center;
}
@media (min-width: 900px) {
.cta-band-actions { align-items: stretch; }
}
.cta-band-btn {
display: flex;
align-items: center;
justify-content: center;
min-width: 260px;
padding: 18px 32px;
border: 2px solid var(--zinc-900);
font-size: 12px;
font-weight: 900;
font-style: italic;
letter-spacing: 0.14em;
color: var(--zinc-900);
text-decoration: none;
transition: background .25s, color .25s;
}
.cta-band-btn:hover {
background: var(--zinc-900);
color: var(--primary);
}
.cta-band-btn.is-primary {
background: var(--zinc-900);
color: #fff;
}.cta-band-btn.is-primary:hover {
background: #000;
color: var(--primary);
}
/* --- 追従CTA（右下のメッセージアイコン）----------------------
トップページではヒーローの上に重ねず、キャンペーンセクションに
入ってから現れるようにする。下層ページは従来どおり常に表示。 */
.sticky-cta {
position: fixed;
bottom: 32px;
right: 32px;
z-index: 200;
}
body.home .sticky-cta {
opacity: 0;
visibility: hidden;
transform: translateY(12px);
transition: opacity .4s ease, transform .4s ease, visibility .4s;
}
body.home .sticky-cta.is-visible {
opacity: 1;
visibility: visible;
transform: none;
}
@media (prefers-reduced-motion: reduce) {
body.home .sticky-cta { transition: none; }
}
/* --- ヒーローのボタン ------------------------------------------
包んでいる div に display 指定がなく、.btn-primary は
inline-flex + margin-left:8px だった。スマホで2つが
縦に折り返すと行間がゼロになり、ボタン同士がくっついていた。
包み側を flex にして、縦横どちらにも間隔を持たせる。 */
.hero-actions {
display: flex;
flex-wrap: wrap;
gap: 12px;
}
.hero-actions .btn-primary { margin-left: 0; }
/* --- iOS Safari の文字自動拡大を止める --------------------------
既定は -webkit-text-size-adjust: auto で、iPhoneでは横向きなどの
条件で本文が勝手に拡大される。拡大されると要素が画面幅を超え、
Safariがページ全体を縮小表示して「全体が左に寄って右が余る」
見え方になる。100% に固定して自動拡大を止める。 */
html {
-webkit-text-size-adjust: 100%;
-moz-text-size-adjust: 100%;
text-size-adjust: 100%;
}
/* ==================================================================
おすすめプラン（#recommend）のレスポンシブ整理
モバイルで一番崩れていたセクション。
・見出しがインラインの !important で左固定 → 単一カラムでは
他セクションと同じ中央に（PCの2カラムでは従来どおり左）
・キャッチの左に立っていた黄色の縦線4pxを撤去（縦線は使わない方針）
・白55%のボックスは背景の人物が透けて文字が読みにくい → 90%に
・チェック項目が2行に折り返すと、中央揃えのアイコンが
行間に浮いて見えた → 1行目に揃える
================================================================== */
/* 見出しまわり。キャッチが直下に続くので下余白は詰める */
#recommend .section-title-area { margin-bottom: 32px; }
.recommend-catch {
margin: 0;
font-size: clamp(16px, 1.4vw, 20px);
line-height: 1.9;
font-weight: 900;
font-style: italic;
color: #fff;
text-align: center; /* モバイル＝中央（見出しに合わせる） */
text-shadow: 0 2px 12px rgba(0, 0, 0, .45);
}
@media (min-width: 900px) {
/* PCは左右2カラムの語りなので左揃え */
#recommend .section-title-area { text-align: left; }
#recommend .section-title-area .section-title-bar { margin-left: 0; }
.recommend-catch { text-align: left; }
}
/* ボックス。背景が透けすぎて本文（zinc-600）が読みにくかった */
.recommend-box {
background: rgba(255, 255, 255, .9);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
}
@media (max-width: 899px) {
/* インラインの auto-fit(minmax 300px) だと 665px 前後から
2カラムになり、中央揃えの見出しが左カラムの中で浮く。
テキストの切り替え（900px）とカラムの切り替えを一致させる */
#recommend .container { grid-template-columns: 1fr !important; }
/* 背景写真は人物が大きく写る。文字が乗る単一カラムでは
斜めグラデーションより全面を均一に落とすほうが読める */
.recommend-overlay {
background: linear-gradient(180deg, rgba(0,0,0,.52) 0%, rgba(0,0,0,.62) 100%);
}
/* 40pxのpaddingは330px幅では本文が1行12文字になる */
.recommend-box { padding: 28px 22px; }
/* キャッチとボックスの間。inline の gap:64px は上書きできないため
!important（インラインstyle対抗の例外） */
#recommend .container { gap: 40px !important; }
}
/* チェック項目：2行に折り返してもアイコンが1行目に揃うように */
#recommend .check-item { align-items: flex-start; }
#recommend .check-item .check-circle { flex: none; margin-top: .18em; }
/* 見出しは背景写真（明るい野菜）に白が溶けるので影で起こす */
#recommend .section-title-area h2 {
text-shadow: 0 2px 12px rgba(0, 0, 0, .5);
}
/* ボタン内の文字が左に寄っていた（幅100%なのに中身が左詰め） */
#recommend .btn-trial { justify-content: center; }
/* PCでは文字が左カラムに乗る。共通の135deg一様40%では
明るい野菜の上で白文字が薄いので、左側だけ濃くする。
（右側は白いボックスが乗るので薄いままで良い） */
@media (min-width: 900px) {
.recommend-overlay {
background: linear-gradient(100deg,
rgba(0, 0, 0, .58) 0%,
rgba(0, 0, 0, .42) 45%,
rgba(0, 0, 0, .22) 100%);
}
}
/* ==================================================================
ブログ一覧（デザインカンプ 1x/image.ai に準拠）
カンプの構成をそのまま：
パンくず → 見出しと検索を同じ段に → 1件目を大きく → 3カラム
→ 右カラムに 新着記事 と タグ
面は白（サイト全体に合わせる）。カンプは黒地だったが、
トップ・記事ページと明暗が揃わないため白で組み直している。
サムネイルは 1:1。素材が 4:3 でも object-fit: cover で
中央を切り出すので、比率が混ざっても並びが崩れない。
================================================================== */
.blog-index {
--blog-fs-meta: clamp(11px, 0.90vw, 13px);
--blog-fs-title: clamp(13px, 1.04vw, 15px);
--blog-fs-date: clamp(11px, 0.90vw, 13px);
background: #fff;
color: var(--zinc-900);
/* 固定ヘッダーぶんの逃げは、テーマ側の
.archive .contents { margin-top: 48px / 64px }
がすでに持っている。ここで padding-top:49px を足し、さらに
.blog-index-inner でも 40px 足していたため、ナビ下から
パンくずまで84pxも空いていた。逃げは1箇所にまとめる。 */
padding: clamp(24px, 2.6vw, 36px) 0 clamp(56px, 6vw, 96px);
}
.blog-index-inner {
width: min(1180px, 88vw);
margin-inline: auto;
}
/* 下層ページ共通の padding-top はここでは不要（上の margin-top と
二重になる）。ブログ一覧だけ解除する。 */
body:not(.home) .contents.blog-index { padding-top: clamp(24px, 2.6vw, 36px); }
/* --- 見出しと検索を同じ段に ----------------------------------
カンプは左上にパンくず、その下に検索。見出しが無かったが、
H1 はページの主題を示すのに必要なので左に置き、
検索はカンプと同じく右寄りに並べる。 */
.blog-index-header {
display: grid;
grid-template-columns: 1fr;
gap: clamp(20px, 2.2vw, 28px);
align-items: end;
margin: clamp(14px, 1.6vw, 20px) 0 clamp(24px, 2.6vw, 34px);
padding-bottom: clamp(16px, 1.8vw, 22px);
border-bottom: 1px solid var(--zinc-200);
}
@media (min-width: 768px) {
.blog-index-header { grid-template-columns: auto minmax(0, 520px); }
}
/* 見出しは Helvetica。頭文字だけ大文字（uppercase は掛けない）。
日本語にイタリック字形は無く、掛けると疑似斜体で歪むので立体のまま。 */
.blog-index-heading { min-width: 0; }
.blog-index-title {
margin: 0;
font-family: Helvetica, "Helvetica Neue", Arial, sans-serif;
font-size: clamp(24px, 2.5vw, 36px);
line-height: 1.25;
letter-spacing: 0.01em;
font-weight: 700;
font-style: normal;
text-transform: none;
}
/* 見出しの下の小さな和文。英字だけ Helvetica、「ブログ」は Noto Sans */
.blog-index-subtitle {
margin: 8px 0 0;
font-size: clamp(11px, 0.90vw, 13px);
font-weight: 700;
letter-spacing: 0.08em;
color: var(--zinc-400);
}
.blog-index-subtitle .is-en {
font-family: Helvetica, "Helvetica Neue", Arial, sans-serif;
margin-right: 0.35em;
}
.blog-index-subtitle .is-ja {
font-family: "Noto Sans JP", sans-serif;
}
.blog-search {
display: flex;
align-items: center;
gap: 10px;
width: 100%;
padding: 0 8px 0 20px;
height: 54px;
background: var(--zinc-50);
border: 1px solid var(--zinc-200);
border-radius: 999px;
}
@media (min-width: 768px) { .blog-search { justify-self: end; } }
/* ラベルは読み上げ用に残し、画面からは隠す */
.blog-search-label {
position: absolute;
width: 1px; height: 1px;
margin: -1px; padding: 0;
overflow: hidden; clip-path: inset(50%);
white-space: nowrap;
}
.blog-search-icon { flex: none; color: var(--primary); }
.blog-search-field {
flex: 1;
min-width: 0;
border: 0;
background: transparent;
font-size: clamp(13px, 1.04vw, 15px);
font-weight: 700;
color: var(--zinc-900);
}
.blog-search-field::placeholder { color: var(--zinc-400); font-weight: 500; }
.blog-search-field:focus { outline: none; }
.blog-search:focus-within {
border-color: var(--primary);
box-shadow: 0 0 0 3px rgba(250, 204, 21, .3);
}
.blog-search-submit {
flex: none;
border: 0;
padding: 0 18px;
height: 40px;
border-radius: 999px;
background: var(--zinc-900);
color: #fff;
font-size: 11px;
font-weight: 900;
font-style: italic;
letter-spacing: 0.1em;
cursor: pointer;
transition: background .2s, color .2s;
}
.blog-search-submit:hover { background: #000; color: var(--primary); }
/* --- 本文と右カラム ------------------------------------------- */
.blog-index-body {
display: grid;
grid-template-columns: 1fr;
gap: clamp(40px, 4.4vw, 64px);
align-items: start;
}
@media (min-width: 1024px) {
.blog-index-body { grid-template-columns: minmax(0, 1fr) 260px; }
}
/* --- カード ---------------------------------------------------- */
.blog-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: clamp(24px, 2.6vw, 36px) clamp(14px, 1.8vw, 24px);
align-items: start;
}
@media (min-width: 768px) {
.blog-grid { grid-template-columns: repeat(3, 1fr); }
}
.blog-card { margin: 0; }
/* 1件目はカンプ同様に大きく。2列ぶんを占める */
@media (min-width: 768px) {
.blog-card.is-featured { grid-column: span 2; }
.blog-card.is-featured .blog-card-title { font-size: clamp(16px, 1.46vw, 21px); }
/* 幅が2倍になるぶん、1:1のままだと縦に伸びすぎるので 4:3 に */
.blog-card.is-featured .blog-card-thumb { aspect-ratio: 4 / 3; }
}
.blog-card-link {
display: block;
text-decoration: none;
color: inherit;
}
.blog-card-thumb {
overflow: hidden;
border-radius: 8px;
background: var(--zinc-100);
border: 1px solid var(--zinc-200);
/* 基本は正方形。素材が4:3でも中央を切り出して並びをそろえる */
aspect-ratio: 1 / 1;
}
.blog-card-thumb img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transition: transform .6s ease;
}
.blog-card-link:hover .blog-card-thumb img { transform: scale(1.04); }
.blog-card-meta {
display: flex;
align-items: center;
gap: 8px;
margin: 14px 0 8px;
font-size: var(--blog-fs-meta);
font-weight: 900;
font-style: italic;
letter-spacing: 0.06em;
}
/* カンプのカテゴリ配色。該当しないカテゴリは黒にする */
.blog-card-cat { color: var(--zinc-900); }
.blog-card-cat.is-news,
.blog-card-cat.is-oshirase { color: #d93025; }
.blog-card-cat.is-blog { color: #2f5bd7; }
.blog-card-dot { color: var(--zinc-300); }
.blog-card-read { color: var(--zinc-500); }
.blog-card-title {
margin: 0 0 10px;
font-size: var(--blog-fs-title);
line-height: 1.7;
font-weight: 700;
color: var(--zinc-900);
/* 枕詞を外しても長い記事はあるので3行で止める */
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
overflow: hidden;
transition: color .2s;
}
.blog-card-link:hover .blog-card-title { color: var(--zinc-500); }
.blog-card-date {
display: block;
font-size: var(--blog-fs-date);
font-weight: 900;
font-style: italic;
letter-spacing: 0.06em;
color: var(--zinc-400);
font-variant-numeric: tabular-nums;
}
.blog-empty {
padding: 48px 0;
color: var(--zinc-500);
font-weight: 700;
}
/* --- 右カラム -------------------------------------------------- */
.blog-rail { display: grid; gap: clamp(28px, 3vw, 40px); }
.blog-rail-title {
margin: 0 0 18px;
padding-bottom: 12px;
border-bottom: 1px solid var(--zinc-200);
font-size: 10px;
font-weight: 900;
font-style: italic;
letter-spacing: 0.24em;
text-transform: uppercase;
color: var(--zinc-400);
}
/* 新着記事：サムネ＋日付＋タイトル */
.blog-rail .sidebar-post-list {
list-style: none;
margin: 0;
padding: 0;
display: grid;
gap: 16px;
}
/* テーマ側が .sidebar-post-link に display:flex !important を
持っているため grid には変えられない。flex のまま組む。
（grid を当てても効かず、サムネが width:100% で
カラム全幅まで伸びてしまう） */
.blog-rail .sidebar-post-link {
align-items: center;
gap: 14px;
text-decoration: none;
color: inherit;
}
/* サムネイルはテーマ側で
.sidebar-post-thumbnail-inner { padding-top: 75% }（4:3の箱）
が入っており、そこに 1:1 を重ねると画像が中途半端に切れる。
内側の箱ごと 1:1 にそろえ、画像は全体が入るように contain で置く。
（キャンペーン画像は文字が入っているため、切らずに見せる） */
.blog-rail .sidebar-post-thumbnail {
flex: 0 0 76px;
width: 76px;
border-radius: 6px;
overflow: hidden;
background: var(--zinc-100);
border: 1px solid var(--zinc-200);
}
.blog-rail .sidebar-post-thumbnail-inner {
padding-top: 100%;
position: relative;
}
.blog-rail .sidebar-post-thumbnail img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: contain;
display: block;
}
/* テーマ側は .sidebar-post-textbox に灰色の面を敷いている。
カード型に組み直したので背景と余白は解除する。 */
.blog-rail .sidebar-post-textbox {
flex: 1 1 auto;
min-width: 0;
background: transparent;
padding: 0;
}
.blog-rail .sidebar-post-date {
font-size: 11px;
font-weight: 900;
font-style: italic;
letter-spacing: 0.06em;
color: var(--zinc-400);
font-variant-numeric: tabular-nums;
}
.blog-rail .sidebar-post-title {
margin-top: 4px;
font-size: 12px;
line-height: 1.6;
font-weight: 700;
color: var(--zinc-700, #3f3f46);
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;
}
.blog-rail .sidebar-post-link:hover .sidebar-post-title { color: var(--zinc-900); }
/* 人気記事の順位バッジ。サムネの左上に重ねる */
.blog-rail .popularity-post-thumbnail { position: relative; }
.blog-rail .popularity-post-num-wrap {
position: absolute;
top: 0;
left: 0;
z-index: 2;
}
.blog-rail .popularity-post-num {
display: flex;
align-items: center;
justify-content: center;
width: 22px;
height: 22px;
background: var(--zinc-900);
color: #fff;
font-size: 11px;
font-weight: 900;
font-style: italic;
border-bottom-right-radius: 6px;
}
/* タグ */
.blog-rail-block.is-tags .dg-keywords .section-label,
.blog-rail-block.is-tags .dg-keywords-title { display: none; }
.blog-rail-block.is-tags .dg-keyword {
padding: 6px 12px;
font-size: 12px;
}
/* --- ページ送り ------------------------------------------------ */
.blog-index .pagination {
margin-top: clamp(36px, 4vw, 56px);
display: flex;
justify-content: center;
}
.blog-index .nav-links {
display: flex;
flex-wrap: wrap;
gap: 8px;
align-items: center;
}
.blog-index .page-numbers {
display: flex;
align-items: center;
justify-content: center;
min-width: 44px;
height: 44px;
padding: 0 12px;
border: 1px solid var(--zinc-200);
border-radius: 6px;
color: var(--zinc-600);
text-decoration: none;
font-size: 13px;
font-weight: 900;
font-style: italic;
transition: background .2s, color .2s, border-color .2s;
}
.blog-index .page-numbers:hover {
border-color: var(--zinc-900);
color: var(--zinc-900);
}
.blog-index .page-numbers.current {
background: var(--zinc-900);
border-color: var(--zinc-900);
color: #fff;
}
/* --- 右カラム：キャンペーン ------------------------------------
トップの Current Campaign と同じ画像。右カラムは幅が狭いので
スライダーにせず縦に積む（横スクロールは作らない方針）。 */
.blog-rail-campaign {
display: grid;
gap: 12px;
}
.blog-rail-campaign-item {
display: block;
overflow: hidden;
border: 1px solid var(--zinc-200);
border-radius: 8px;
background: #fff;
}
.blog-rail-campaign-item img {
display: block;
width: 100%;
height: auto;
aspect-ratio: 1 / 1;
object-fit: cover;
transition: transform .6s ease;
}
.blog-rail-campaign-item:hover img { transform: scale(1.03); }
/* --- 右カラム：予約への導線 ------------------------------------ */
.blog-rail-block.is-cta {
display: grid;
gap: 10px;
}
.blog-rail-cta {
display: flex;
align-items: center;
justify-content: center;
min-height: 52px;
padding: 14px 16px;
border: 2px solid var(--zinc-900);
border-radius: 6px;
font-size: clamp(12px, 0.97vw, 13px);
font-weight: 900;
font-style: italic;
letter-spacing: 0.1em;
color: var(--zinc-900);
text-align: center;
text-decoration: none;
transition: background .25s, color .25s;
}
.blog-rail-cta:hover { background: var(--zinc-900); color: var(--primary); }
.blog-rail-cta.is-primary {
background: var(--primary);
border-color: var(--primary);
color: var(--zinc-900);
}
.blog-rail-cta.is-primary:hover { background: var(--zinc-900); border-color: var(--zinc-900); color: var(--primary); }
/* --- 著者チップ（一覧カードの日付の下）------------------------
画像が未設定のときは名前の頭文字を丸で出す。
別のトレーナーの写真が出るより誤解がないため。 */
.dg-author-chip {
display: flex;
align-items: center;
gap: 8px;
margin-top: 10px;
min-width: 0;
}
.dg-author-chip-img {
flex: none;
width: 24px;
height: 24px;
border-radius: 50%;
object-fit: cover;
background: var(--zinc-100);
border: 1px solid var(--zinc-200);
}
/* 画像が無いときの頭文字。黄色は主張が強すぎたので、
写真が入る場所だと分かる程度の淡いグレーにする。 */
.dg-author-chip-img.is-initial {
display: flex;
align-items: center;
justify-content: center;
background: var(--zinc-100);
border-color: var(--zinc-200);
color: var(--zinc-500);
font-size: 10px;
font-weight: 700;
font-style: normal;
line-height: 1;
}
.dg-author-chip-name {
font-size: clamp(11px, 0.90vw, 12px);
font-weight: 700;
color: var(--zinc-500);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.blog-card-link:hover .dg-author-chip-name { color: var(--zinc-900); }
/* 記事末尾の執筆者ブロックも、画像が無いときは頭文字で */
.dg-author-photo.is-initial {
display: flex;
align-items: center;
justify-content: center;
width: 64px;
height: 64px;
border-radius: 50%;
background: rgba(255, 255, 255, .12);
border: 1px solid rgba(255, 255, 255, .2);
color: rgba(255, 255, 255, .8);
font-size: 22px;
font-weight: 700;
}
/* ==================================================================
入場アニメーション
ロード画面（#preloader）が明けるのと同じ瞬間に、
script.js が に .is-entered を付ける。それを合図に動かす。
ロゴ 左から
ハンバーガー 右から
ナビの各項目 上から（左から順に少しずつ遅らせる）
↓ 少し遅れて
ヒーローの見出し・リード・ボタン フェードイン
ロード画面は最低1.5秒出ているため、それまでは画面が覆われている。
初期状態を隠しておいても、ちらつきは起きない。
保険：header.php のインラインスクリプトが6秒後に必ず .is-entered を
付けるので、JSが途中で止まってもナビが消えたままにはならない。
================================================================== */
/* イージングは1箇所で管理する。
出だしを速く、着地でぐっと減速する強めのカーブ。
（以前の cubic-bezier(0.16,1,0.3,1) よりさらに効きを強くしている） */
:root {
--enter-ease: cubic-bezier(0.05, 0.85, 0.15, 1);
--enter-dur: 1.1s;
/* 開始タイミング。ロゴ・ハンバーガー・ナビ・ヒーローすべて共通。
ここ1行を変えれば全体が前後する。 */
--enter-delay: .5s;
}
/* --- ヘッダー ------------------------------------------------- */
.nav-logo,
#menu-open,
.nav-links > * {
transition:
opacity var(--enter-dur) var(--enter-ease),
transform var(--enter-dur) var(--enter-ease);
}
html:not(.is-entered) .nav-logo { opacity: 0; transform: translateX(-28px); }
html:not(.is-entered) #menu-open { opacity: 0; transform: translateX(28px); }
html:not(.is-entered) .nav-links > * { opacity: 0; transform: translateY(-16px); }
/* 開始はロゴ・ハンバーガー・ナビ全項目そろって同じタイミング。
（以前は項目ごとに110msずつずらしていた） */
.nav-logo,
#menu-open,
.nav-links > * { transition-delay: var(--enter-delay); }
/* --- ヒーロー -------------------------------------------------
テーマの .animate-slide-up / .animate-fade-in は読み込み直後に
走り始めるため、ロード画面が明ける頃には終わってしまっていた。
.is-entered が付くまで一時停止させ、明けてから動かす。
停止中も「開始前の状態」を見せる必要があるので fill-mode を both に。
forwards のままだと待機中に完成形が見えてしまう。 */
.hero .animate-fade-in,
.hero .animate-slide-up {
animation-fill-mode: both;
animation-play-state: paused;
/* テーマ側は fadeIn 1.5s / slideUp 1.2s と長さが違う。
4つを同時に出すので、長さとカーブもそろえないと
終わる順番がばらついて見える。 */
animation-duration: var(--enter-dur);
animation-timing-function: var(--enter-ease);
}
html.is-entered .hero .animate-fade-in,
html.is-entered .hero .animate-slide-up {
animation-play-state: running;
}
/* ヒーローの4要素もヘッダーと同じタイミングで動き出す。 */
.hero .hero-tag-line,
.hero .hero-title,
.hero .hero-desc,
.hero .hero-actions { animation-delay: var(--enter-delay); }
/* --- 動きを減らす設定のとき ------------------------------------
位置ずれもフェードもさせず、最初から確定した状態で見せる。 */
@media (prefers-reduced-motion: reduce) {
.nav-logo,
#menu-open,
.nav-links > * {
opacity: 1 !important;
transform: none !important;
transition: none !important;
}
.hero .animate-fade-in,
.hero .animate-slide-up {
animation: none !important;
opacity: 1 !important;
transform: none !important;
}
}