/* ============================================================
SUZUKI FLEET テーマ スタイルシート
------------------------------------------------------------
■ 書き方のルール（守らないとすぐ散らかります）
1. 末尾に追記しない。そのコンポーネントの定義がある場所に書く
2. 1コンポーネント = 1ブロック。
SPの基本スタイル → 直後に @media (min-width: 768px) でPC上書き
3. カンプの実測値はコメントに残す（なぜその数値かを追えるように）
4. トークンに % を入れない（入れ子で 100% が親基準に再計算されるため）
■ ブレイクポイント
768px … PC/SPの唯一の境目。ほぼ全てのPC上書きはここ
600px / 900px … 活用事例一覧のグリッド段数だけに使う例外（1→2→3列）
■ 品質チェック
npm run lint:css 重複セレクタ・詳細度の逆転などを検出
■ 目次
- トークン（色・サイズ）
- リセット / ベース
- レイアウト土台
- ボタン
- ヘッダー / ハンバーガー
- アニメーション
- ヒーロー
- 企業ロゴ 自動スライド
- Service Lineup
- 横スワイプスライダー（scroll-snap）
- イベント
- FAQ アコーディオン
- 追従バナー（下部固定 Right/Pro）
- フッター
- 活用事例アーカイブ（archive-case.php）
- ブロックパターン ブリッジ（コアブロックをテーマ調に）
- レスポンシブ（PC）
- デザインシステム更新（0808コンプ準拠）
- ヒーローCTAボタン共通（TOP / Pro / Right 全ページ）
- ヒーロー内の SUZUKI ロゴ（TOP / Pro / Right 共通）
- 動きを減らす設定への配慮
- SUZUKI FLEET Pro ページ（page-professional.php / 0730カンプ準拠）
- Pro / Right ヒーロー：PC実測合わせ（カンプ pc0817_2 4ページ目）
- Proページ PCレイアウト（0817_2コンプ実測）
- イベント情報 詳細ページ（single-event.php）
- 横スクロールのヒント（ScrollHint相当・自前実装）
- 最新情報 詳細ページ（single.php）
- TOP：ヘッダー＋ヒーロー PC実測合わせ（pc0817_2 カンプ）
============================================================ */
@charset "UTF-8";
/**
* SUZUKI_LP メインスタイル
*
* ★ これは「支給デザイン確定前の仮スタイル（プレースホルダー）」です。
* 色・余白・サイズはコンプ(0730)の青系を仮置き。素材確定後に差し替える前提。
* クラス構造と動き(main.js)のフックはこのまま流用できます。
*/
/* ============================================================
トークン（色・サイズ）
============================================================ */
:root {
/* カンプ(pc0817_2)を実測したところ、使われている紺は #00368f の1色だけだった。
--navy(#0a2b52) はカンプに存在しない色で、バッジ・フッター文字・枠線などに
混ざって「色が違う」原因になっていたため、値を --blue と同じ #00368f に統一する。
※ 変数名は多数の箇所から参照されているため残し、値だけ揃えている。 */
--navy: #00368f;
--blue: #00368f;
--blue-mid: #1a73c2;
--blue-bright: #0098d9;
--blue-pale: #eaf2fb;
--cta: #e2231a;
/* もう1つの赤。カンプでは特徴の番号タブとヘッダーCTAのグラデ下半分に
この色が使われている（--cta とは別系統）。 */
--cta-deep: #de0039;
--gray-bg: #eef3f7;
--text: #000; /* カンプ実測：カード本文・説明文とも純黒 */
--muted: #5a6b7b;
--line: #dfe6ec;
--radius: 12px;
/* --- ボタンの影 ---
カンプ実測（導入事例「一覧を見る」）：ボタン下端の直下が rgba(0,0,0,.16) 相当で、
下方向へ約16pxかけてフェードする。左右にはほとんど広がらない。
濃さ・距離を変えたい時は、この2つの変数だけ触ればよい。
付与は .btn--shadow クラスで行う（付ける/外すをHTML側で切り替えられる）。 */
--btn-shadow-color: rgb(0, 0, 0, .18);
--btn-shadow: 0 3px 12px var(--btn-shadow-color);
/* --- レイアウト幅 ---
本番サイト https://www.fleet.suzuki/ の実測に合わせる。
あちらは「1200px固定・1280px時は左右40px」で、どれだけ画面が広くても1200pxで止まる。
全幅 : ヒーロー左端・FAQ帯・資料DLバナー
--shiki : 座布団（セクション背景）＝ 本番サイトのコンテンツ幅 1200px
--container: コンテンツ（カード列・本文）＝ 座布団の内側40px×2を引いた値
（コンプの内側は66pxだが、本番サイトのカード幅に近づけるため40pxに詰めている）
SPは座布団=全幅、コンテンツ=左右 --gutter
※トークンには % を入れない。min(…, 100% - x) を変数に埋めると、
「座布団の中のコンテナ」のように入れ子になった時に 100% が親基準で
再計算され、同じ変数でもセクションごとに幅が変わってしまうため。
画面が狭い時の縮小は、変数を使う各所の min(var(--x), 100% - …) 側で行う。 */
--shiki: 1200px; /* 座布団の最大幅（本番サイト実測） */
--container: 1120px; /* コンテンツの最大幅（座布団の内側40px×2） */
--gutter: 24px;
/* 帯（特徴の番号タブ＋横線）の内側に、中身をどれだけ寄せるか。
カンプ実測：横線980pxに対し中身848px ＝ 左右66pxずつ。
特徴ブロックの内側余白を変えたい時はここだけ触ればよい。 */
--block-inset: 66px;
--ease-appear: cubic-bezier(.4, .4, 0, 1);
--appear-dur: .8s;
--appear-shift: 40px;
}
/* ============================================================
リセット / ベース
============================================================ */
*,
*::before,
*::after { box-sizing: border-box; }
/* Safari/iOS はいまだに -webkit- 付きしか解釈しないため、両方書く。
stylelint の自動整形が -webkit- を落とすことがあるので消さないこと。 */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
margin: 0;
font-family: "Noto Sans JP", "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN",
"Hiragino Sans", Meiryo, sans-serif;
line-height: 1.8;
color: var(--text);
background: #fff;
}
img { max-width: 100%; height: auto; vertical-align: bottom; }
a { color: inherit; text-decoration: none; }
ul, ol { margin: 0; padding: 0; list-style: none; }
h1, h2, h3, p { margin: 0; }
/* ============================================================
レイアウト土台
============================================================ */
.l-container {
width: min(var(--container), 100% - var(--gutter) * 2);
margin-inline: auto;
}
/* コンプ上はPro/Rightページも同じ848pxなので --narrow も同幅（別名として残す） */
.l-container--narrow { width: min(var(--container), 100% - var(--gutter) * 2); }
/* 0831カンプの基準幅。座布団・CTAバナー・一覧見出しがすべて980で揃っている。 */
/* ------------------------------------------------------------
座布団のグラデーション（0910_3カンプを72dpiで9点サンプリング）
ストップが少ないと傾きが折れて「段々」に見えるので、
紺系はカンプのイーズをそのまま9点で持たせる。
水色系はカンプが直線なので2点でよい。
------------------------------------------------------------ */
:root {
--grad-navy: linear-gradient(180deg,
#21509d 0%, #476eae 12.5%, #7390c1 25%, #99aed2 37.5%, #b9c8e1 50%,
#d4ddec 62.5%, #e9eef5 75%, #f8f9fc 87.5%, #fff 100%);
--grad-aqua: linear-gradient(180deg, #a1d7f0 0%, #fff 100%);
}
.l-container--980 { width: min(980px, 100% - var(--gutter) * 2); }
/* ヘッダー（.site-header__inner）と同じ幅。記事詳細ページで使う。
記事だけ980だと、ヘッダーのロゴ／ボタンと左右がズレて見えるため。 */
.l-container--shiki { width: min(var(--shiki), 100% - var(--gutter) * 2); }
/* ============================================================
余白のスケール（サイト共通）
------------------------------------------------------------
セクションごとに 88 / 84 / 72 / 64 / 56 / 52 / 48 とバラバラの
数値が入っていて、詰まって見える場所と空きすぎる場所が混在していた。
使える値をこの6段に限定し、各セクションはここから選ぶだけにする。
全体をもう少し空けたい／詰めたいときは、この6行だけを触ればいい。
3xl … ページ最上部・特大の区切り
2xl … セクションの上下（標準）
xl … セクション内の大きなブロック間
lg … 見出し → 中身
md … 小見出し → 本文
sm … カード間・要素間
============================================================ */
:root {
--sp-3xl: clamp(64px, 7vw, 104px);
--sp-2xl: clamp(48px, 6vw, 88px);
--sp-xl: clamp(36px, 4.5vw, 64px);
--sp-lg: clamp(28px, 3.4vw, 48px);
--sp-md: clamp(20px, 2.4vw, 32px);
--sp-sm: clamp(12px, 1.6vw, 20px);
/*
* セクションの上下。
* --sp-section … 色帯・座布団があるセクション（区切りが強いのでゆったり）
* --sp-section-plain … 背景のない白地のセクション。
* 白同士は境目が見えないので、隣り合うと余白が2つぶん
* 足し算されて空きすぎる。2つ足しても section 1つぶん
* （lg×2 ≒ 2xl）に収まる値にしてある。
*/
--sp-section: var(--sp-2xl);
--sp-section-plain: var(--sp-lg);
/* Pro / Right は「座布団が白地の上に並ぶ」構成で、カンプの余白が
TOPよりかなり広い（実測：機能カード下端 → Recommend座布団 204px）。
白地の余白は上下で分担するので、1つぶんはその半分。 */
--sp-panel-gap: clamp(56px, 8vw, 102px);
}
/* 下層のサービスページは座布団どうしの間隔を広く取る（カンプ準拠）。 */
.p-pro {
--sp-section-plain: var(--sp-panel-gap);
/*
* 横幅。カンプではヘッダーと各セクションの左右が一直線に揃っている。
* 実装はヘッダー1200 / l-container 1120 / 座布団980 の3種が混在していて
* 左端が 40 / 80 / 150 とバラバラだったので、ヘッダー幅（--shiki）に合わせる。
*/
--container: var(--shiki);
}
/* Pro / Right の座布団はヘッダーと同じ幅にする（既定の980を上書き）。 */
.p-pro .l-container--980,
.p-pro .p-feat__panel,
.p-pro .p-reco__panel,
.p-pro .p-usecase__panel,
.p-pro .p-reason__panel {
width: min(var(--shiki), 100% - var(--gutter) * 2);
}
/* TOPはセクション数が多く、同じ間隔だと間延びするので一段詰める。 */
.p-top { --sp-section: var(--sp-xl); }
.section { padding-block: var(--sp-section); }
.section--gray { background: var(--gray-bg); }
.section-head { text-align: center; margin-bottom: var(--sp-lg); }
.section-head__en {
display: block;
/* 各章の英字サブテキストは「背景によって色を変える」仕様。
既定は濃い背景（水色座布団・紺帯）に載るので白。
白背景に載るセクションだけ、個別に紺を指定すること。
※本多さんが白に修正済みの箇所。勝手に var(--blue-bright) に戻さないこと。 */
color: #fff;
font-size: 0.8rem;
font-weight: 700;
letter-spacing: 0.14em;
}
/* 白背景に載る英字サブテキストだけ紺（カンプ実測 #00368f）。
既定は濃い背景（水色座布団・紺帯）用の白なので、白背景では読めなくなるため。
対象：イベント情報のタブ型見出し。 */
.section-head--framed .section-head__en, /* イベント情報のタブ型見出し */
.p-pro-features .section-head__en { color: var(--blue); } /* Pro/Rightの「Features」（白背景） */
.section-head__ja {
/* 下線（::after）を見出しの文字幅に合わせるため、幅を内容に合わせて縮める。
※ text-wrap:balance はここでは外す。幅が内容依存になると
balance が「最小幅で折り返す」方に働き、1文字ずつ縦積みになるため。 */
width: fit-content;
/* 中央寄せ。h2 のリセット（h1,h2,h3,p { margin:0 }）に確実に勝たせるため
左右を個別に指定する。fit-content で幅が縮むぶん、auto が無いと左に寄る。 */
margin-left: auto;
margin-right: auto;
font-size: clamp(1.4rem, 4vw, 2rem);
font-weight: 700;
line-height: 1.4;
color: var(--navy);
}
.section-note { margin-top: 16px; font-size: 0.8rem; color: var(--muted); }
.section-more { margin-top: 28px; text-align: center; }
/* ============================================================
ボタン
============================================================ */
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
min-height: 48px;
padding: 0 28px;
border-radius: 999px;
font-weight: 700;
line-height: 1.3;
transition: opacity .2s ease, background-color .2s ease;
}
/* ---- 矢印つきボタン（AUN #30・#31「追従と同様に、矢印追加」）----
追従バナーの「▶＋詳細を見る」と同じ合図を、TOP下部のプラン誘導ボタンにも付ける。
円も三角も currentColor なので、ホバーで文字色が変わればそのまま追従する。 */
.btn--arrow { position: relative; padding-right: 52px; }
.btn--arrow::after {
content: "";
position: absolute;
right: 14px;
top: 50%;
width: 22px;
height: 22px;
margin-top: -11px;
border: 1.5px solid currentColor;
border-radius: 50%;
}
.btn--arrow::before {
content: "";
position: absolute;
right: 22px;
top: 50%;
margin-top: -4px;
border-left: 6px solid currentColor;
border-top: 4px solid transparent;
border-bottom: 4px solid transparent;
}
.plan-nav__cta .btn--arrow::after { right: 11px; width: 20px; height: 20px; margin-top: -10px; }
.plan-nav__cta .btn--arrow::before { right: 18px; }
/*
* ボタンらしい手応えを付ける（0910_3の指摘：AUN #7「もう少しボタンっぽい挙動」）。
* 以前は opacity を下げるだけで、押した感じも浮いた感じも無かった。
* hover … 少し浮かせて影を強める
* active … 沈ませて影を弱める（押し込み）
* focus … キーボード操作でも位置が分かるように輪郭を出す
* 影を持たないボタン（.btn--shadow が無いもの）でも浮き沈みは効く。
*/
.btn {
cursor: pointer;
/* 動き（浮き沈み・影）は素早く、色の切り替わりだけゆっくり。 */
transition: transform .18s var(--ease-appear, ease), box-shadow .18s ease,
background-color .45s ease, color .45s ease, border-color .45s ease;
}
@media (hover: hover) {
.btn:hover { transform: translateY(-2px); }
.btn--shadow:hover { box-shadow: 0 10px 22px rgb(10, 58, 115, .22); }
/* アウトラインは塗りつぶして「押せる」ことをはっきり示す。 */
.btn--outline:hover { background: var(--blue-bright); color: #fff; }
.btn--primary:hover,
.btn--cta:hover { filter: brightness(1.06); }
}
.btn:active {
transform: translateY(1px);
box-shadow: 0 2px 6px rgb(10, 58, 115, .18);
}
.btn:focus-visible {
outline: 3px solid var(--blue-bright, #0098d9);
outline-offset: 3px;
}
/*
* 「視差効果を減らす」設定では“動き”だけを止める。
* 色のフェードは動きではないので残す（ここまで消すと
* ホバーの色が一瞬で切り替わってしまう）。
*/
@media (prefers-reduced-motion: reduce) {
.btn,
.btn:hover,
.btn:active {
transform: none;
transition: background-color .45s ease, color .45s ease, border-color .45s ease;
}
}
.btn--primary { background: var(--blue); color: #fff; }
/* 「一覧を見る」「詳細を見る」のアウトラインボタン。
カンプ実測では枠・文字とも水色 #0098d9（紺ではない）。
フッターのボタンだけは枠=水色/文字=紺なので、後段で個別に上書きしている。 */
.btn--outline { background: #fff; color: var(--blue-bright); border: 1.5px solid var(--blue-bright); }
.btn--cta { background: var(--cta); color: #fff; box-shadow: 0 6px 16px rgb(226,35,26,.25); }
.btn--text { background: none; color: var(--blue); text-decoration: underline; min-height: auto; padding: 0; }
.btn--pill { min-width: 220px; }
/* 影を付けたいボタンにだけ付与する修飾クラス。
影そのものは :root の --btn-shadow で一元管理。 */
.btn--shadow { box-shadow: var(--btn-shadow); }
/* ============================================================
ヘッダー / ハンバーガー
============================================================ */
/* ヘッダー自体は追従させない。
上段（SUZUKIロゴ帯）はページ最上部にだけ置き、スクロールで自然に流れて消える。
下段だけを sticky にすることで「ヘッダーの高さが変わらない」＝本文がずれない。
以前は全体を sticky にして上段を JS で畳んでいたが、
畳む瞬間にヘッダーが 113px→64px に縮み、本文が49px跳ねてカクついていた。 */
/* ロゴ/CTA/ハンバーガーの段。ここだけが追従する。
高さが変わらないので、スクロール中に本文が跳ねない。 */
.site-header {
position: sticky;
top: 0;
z-index: 210;
background: #fff;
}
/* --- 上段：SUZUKI コーポレートロゴのバー ---
カンプ 0831 実測（PC）
上段の高さ 48px ＋ 下線1px（#cdcccc）
ロゴ 107×20（suzuki_logo.svg の0.66倍）／左端151・上余白16
「最上部時のみ表示・スライドで非表示」＝この帯は通常フローのまま置き、
スクロールで自然に流れて消える。追従するのは下段（.site-header__inner）だけ。
height ではなく grid-template-rows で畳むと、中身の高さを測らずに滑らかに動く。 */
/* 上バー（SUZUKIロゴ）の下は、線ではなく影。
0910カンプ実測（PC p.1）：バー下端から14pxかけて薄くなる。
接地点で約20%（rgb(205,204,204)＝白地に対して0.2）。
1pxの罫線は入っていないので border は外した。 */
.site-header__top {
/* 影が背面に透けないよう、地色を必ず持たせる。
（border-bottom だった頃は地色が無くても成立していた） */
position: relative;
/* この帯は .site-header の「中」ではなく body 直下の兄弟。
.site-header は z-index:210 ＋ 白地なので、ここが 210 未満だと
下の影がまるごと白で塗りつぶされて見えなくなる（これが原因だった）。 */
z-index: 220;
background: #fff;
/* ロゴの上下マージンを内側に閉じ込める（マージン相殺の対策）。
上下ともパディングで持たないと、ロゴの margin が親の外へ抜けて
バー自体が下にずれ、その上の隙間に影がはみ出して見えていた。 */
padding-top: 16px;
padding-bottom: 12px;
/* カンプはごく薄いグラデ状の影。
ぼかしだけだと上にも回り込むので、負のspreadで下方向だけに出す。 */
box-shadow: 0 6px 10px -4px rgb(0, 0, 0, .16);
}
.site-header__top-inner {
width: min(var(--shiki), 100% - var(--gutter) * 2);
margin-inline: auto;
}
/* 上の余白は親（.site-header__top）の padding-top で持つ。ここでは0。 */
.site-header__corp { display: block; width: 107px; height: auto; margin: 0; }
.site-header__inner {
--hdr-pad: 12px;
display: flex;
align-items: center;
justify-content: space-between;
width: min(var(--shiki), 100% - var(--gutter) * 2); /* コンプ:ロゴ左端/ハンバーガー右端が座布団と同ライン */
margin-inline: auto;
padding-block: var(--hdr-pad);
}
/* タブ型メニューがヘッダーの天面〜下端を基準に伸びられるよう、この行は縦いっぱいに。
（中身のCTAは align-items:center のままなので見た目は変わらない） */
.site-header__right {
display: flex;
align-self: stretch;
align-items: center;
}
.site-header__logo { font-weight: 800; font-size: 1.1rem; letter-spacing: .02em; color: var(--navy); }
.site-header__logo a { display: block; line-height: 1; }
.site-header__logo img {
display: block;
/* width: 200px; */
/* SPカンプ実測：220x30。logo.svg のアスペクト(252.2:34.47)と一致するので高さ指定だけで合う。
PCは @media (min-width:768px) で 35px に上書き（PCカンプ実測）。 */
height: 30px;
}
/* ヘッダーCTA（資料DL/お問い合わせ）: SPは非表示、PCのみヘッダーに常時表示 */
.site-header__cta { display: none; }
.btn--sm { padding: 0 20px; min-height: 40px; font-size: .85rem; }
/* ヘッダーCTA（0817コンプ実測）
上下2色のベタ塗りで、境目は高さ50%でくっきり切り替わる（グラデーションではない）。
サイズも実測：幅132px / 高さ31px / 角丸7px / アイコンなし。 */
.site-header__cta .btn {
position: relative;
overflow: hidden;
width: 132px;
min-height: 31px;
padding: 0 10px;
border: 0;
border-radius: 7px;
font-size: .76rem;
/* 0910カンプ実測：ボタン下端から14pxの薄い影（接地点で約16%）。 */
box-shadow: 0 3px 12px rgb(0, 0, 0, .16);
}
.site-header__cta .btn--cta {
background: linear-gradient(180deg, #e74770 0 50%, #de0039 50% 100%);
color: #fff;
}
.site-header__cta .btn--primary {
background: linear-gradient(180deg, #476dae 0 50%, #00368f 50% 100%);
color: #fff;
}
/* ヘッダー内では▼の丸アイコンは出さない */
.site-header__cta .btn--cta::after,
.site-header__cta .btn--cta::before { content: none; }
.menu-toggle {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 8px 12px;
background: transparent;
color: var(--navy, #00368f);
border: 0;
border-radius: 8px;
font-weight: 700;
font-size: 0.8rem;
cursor: pointer;
}
.menu-toggle__lines { display: inline-grid; gap: 4px; width: 18px; }
.menu-toggle__lines span { height: 2px; background: currentColor; border-radius: 2px; }
/* メニューパネル（0817コンプ実測 / 0831SPカンプ p.1 で向きを確認）
ヘッダーの直下から画面右端に沿って出る「タブ」状のパネル。全画面は覆わず、
左側にヒーローが見えたまま。PC幅709px / SPは左26px空け、左側だけ角丸R48。
※以前はSPだけ左から出していたが、カンプはPC・SPとも右。 */
.global-menu {
position: fixed;
left: auto;
right: 0;
top: var(--header-h, 64px);
z-index: 300;
width: min(765px, 100% - 26px);
max-height: calc(100dvh - var(--header-h, 64px) - 20px);
/* パネル自体はスクロールさせず、中身(__inner)だけをスクロールさせる。
こうしないと絶対配置の×ボタンが中身と一緒に流れてしまう。 */
display: flex;
flex-direction: column;
overflow: hidden;
background: linear-gradient(180deg, #f0f3f8 0%, #f0f8fc 100%);
border-radius: 48px 0 0 48px;
box-shadow: 0 18px 44px rgb(10, 43, 82, .16);
}
.global-menu__inner {
flex: 1 1 auto;
overflow-y: auto; /* スクロールはここだけ（×はパネル側に固定されたまま） */
padding: 80px clamp(24px, 7vw, 96px) 40px; /* 上は×ボタン(top20+44)の下に内容が来る高さ */
}
.global-menu__close {
display: flex;
align-items: center;
justify-content: center;
position: absolute;
top: 20px;
right: 28px; /* パネル右上（角丸R48の内側） */
z-index: 2;
width: 44px;
height: 44px;
padding: 0;
background: var(--blue); /* 青丸＋白✕ */
color: #fff;
border: 0;
border-radius: 50%;
font-size: 1.1rem;
line-height: 1;
cursor: pointer;
}
/* Right/Pro 大型カード（コンプ実測：中央揃え・丸枠アイコンは文字の下・間隔28px） */
.global-menu__plans { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; margin-bottom: 28px; }
.global-menu__plan {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 10px;
min-height: 135px; /* 0831カンプ実測：250x135 */
padding: 20px 14px;
border-radius: 16px;
color: #fff;
font-weight: 800;
line-height: 1.45;
text-align: center;
}
.global-menu__plan-name { font-size: .95rem; }
.global-menu__plan-name strong { font-weight: 800; } /* SPは自然に2行、PCは1行に収まる */
/* 0831カンプで追加されたキャッチコピー2行 */
.global-menu__plan-copy { font-size: .72rem; line-height: 1.65; }
.global-menu__plan--right { background: var(--blue-bright, var(--blue)); }
.global-menu__plan--pro { background: var(--blue); } /* コンプ実測 #00368f */
.global-menu__plan-icon {
display: flex;
align-items: center;
justify-content: center;
width: 24px;
height: 24px;
border: 2px solid #fff; /* 塗りつぶしではなく丸枠＋三角 */
border-radius: 50%;
font-size: .6rem;
}
/* リンク一覧：コンプ実測でSPも2カラム。アイコンは青の丸枠＋三角 */
.global-menu__list { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 28px; }
.global-menu__list a {
display: flex;
align-items: center;
gap: 8px;
padding: 12px 2px;
font-size: .82rem; /* コンプ実測：SPで折り返さない大きさ */
font-weight: 700;
color: var(--blue);
border-bottom: 1px solid #b9cbe0;
}
.global-menu__list a::before {
content: "▶";
flex: 0 0 auto;
display: inline-flex;
align-items: center;
justify-content: center;
width: 22px;
height: 22px;
border: 2px solid var(--blue);
border-radius: 50%;
color: var(--blue);
font-size: .5em;
margin: 0;
}
.global-menu__list .sub-menu { margin: 0 0 8px 16px; }
.global-menu__list .sub-menu a { font-weight: 400; font-size: 0.9rem; }
.global-menu__list .sub-menu a::before { display: none; }
.global-menu__note { margin-top: 12px; font-size: 0.75rem; color: var(--muted); }
/* CTA：コンプ実測では2つとも白地＋青枠の角丸四角（ピルではない） */
.global-menu__cta { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 20px; margin-top: 28px; }
/* 3つ目（料金）は2列ぶんに広げる。PCでは3等分に並べる。 */
.global-menu__cta-wide { grid-column: 1 / -1; }
@media (min-width: 768px) {
.global-menu__cta { grid-template-columns: repeat(3, 1fr); }
.global-menu__cta-wide { grid-column: auto; }
}
/* 見た目はフッターのCTAボタン（.site-footer__cta .btn）と完全に揃える。
以前は枠が紺・太さ700・影も薄く、並べると別部品に見えていた。
白地／水色1px枠／角丸8px／紺文字800／影 0 3px 12px rgb(0,0,0,.18) */
.global-menu__cta .btn {
width: 100%;
min-height: 49px;
padding: 0 8px;
background: #fff;
color: var(--navy, #00368f);
border: 1px solid var(--blue-bright, #0098d9);
border-radius: 8px;
font-size: .82rem;
font-weight: 800;
box-shadow: 0 3px 12px rgb(0, 0, 0, .18);
}
/* フッターリーガルリンク：SPは縦積み（PCは横並びに上書き） */
.global-menu__legal-list {
display: grid;
gap: 12px;
margin-top: 28px;
font-size: .82rem;
color: var(--blue);
}
.global-menu__legal-list a { color: var(--blue); font-weight: 500; }
/* SP微調整（0831 SPカンプ p.2「メニュー表示イメージ」実測・アートボード390基準）
パネル 左27・右端まで・上はヘッダー直下・左側だけ角丸48
✕ 径31・パネル右上から right22 / top21
プラン 139x98（キャッチコピーはSPカンプには無く、PC用）
リンク 行ピッチ54
ボタン 高さ43
リーガル 行ピッチ28 */
@media (max-width: 767px) {
.global-menu__inner { padding-top: 69px; }
.global-menu__close {
width: 32px;
height: 32px;
top: 21px;
right: 22px;
font-size: .85rem;
}
.global-menu__plan { min-height: 98px; gap: 8px; padding: 14px 12px; }
/* キャッチコピーはPCカンプにだけある。SPは名前＋▶のみ。
（消さずにSPで隠しているだけ。PCではそのまま出る） */
.global-menu__plan-copy { display: none; }
.global-menu__cta .btn { min-height: 46px; }
.global-menu__legal-list { gap: 9px; font-size: .72rem; }
}
/* SPはパネルがほぼ全画面を覆うので背面をロック（パネル内はoverflow-y:autoでスクロールする）。
PCはパネルが浮いたカードで背面が見えているため、ロックせずページを動かせるようにする（下の768px以上で解除）。 */
body.is-menu-open { overflow: hidden; }
/* =========================================================
アニメーション
- メニュー：フェード＋項目スタガー
- スクロール表示：見出し/カード/CTA がビューポートに入ったらふわっと
- prefers-reduced-motion では動き（translate）を無効化し即表示
========================================================= */
/* メニュー オーバーレイのフェード（フェードは控えめなので常時有効。
閉じ完了検知に opacity の transitionend を使う） */
.global-menu {
opacity: 0;
transform: translateX(100%); /* 右からスライドイン（PC・SP共通） */
transition: transform .34s var(--ease-appear), opacity .24s ease;
}
.global-menu.is-open { opacity: 1; transform: translateX(0); }
/* メニュー項目のスタガー（“動き”なので reduce では無効） */
@media (prefers-reduced-motion: no-preference) {
.global-menu__list li,
.global-menu__cta {
opacity: 0;
transform: translateY(14px);
transition: opacity .45s ease, transform .45s ease;
}
.global-menu.is-open .global-menu__list li,
.global-menu.is-open .global-menu__cta {
opacity: 1;
transform: none;
}
.global-menu.is-open .global-menu__list li:nth-child(1) { transition-delay: .06s; }
.global-menu.is-open .global-menu__list li:nth-child(2) { transition-delay: .12s; }
.global-menu.is-open .global-menu__list li:nth-child(3) { transition-delay: .18s; }
.global-menu.is-open .global-menu__list li:nth-child(4) { transition-delay: .24s; }
.global-menu.is-open .global-menu__list li:nth-child(5) { transition-delay: .30s; }
.global-menu.is-open .global-menu__list li:nth-child(6) { transition-delay: .36s; }
.global-menu.is-open .global-menu__cta { transition-delay: .42s; }
}
/* --- スクロール表示 --------------------------------------------------------
フェード（透明→表示）は常時＝reduce環境でも“動きなし”で各ブロックが出現。
スライド（translateY）は reduce OFF のときだけ付与（末尾の @media）。
スタガー（transition-delay）はフェードにも効くので常時側に置く。
--------------------------------------------------------------------------- */
.js .section-head,
.js .lineup__card,
.js .event-card,
.js .section-more,
.js .p-pro-worry__item,
.js .p-pro-feature,
.js .p-pro-worry__head,
.js .p-pro-solve__band,
.js .p-pro-solve__media,
.js .faq-item,
.js .p-pro-subcard,
.js .p-pro-step,
.js .p-reco__head,
.js .p-reco-card,
.js .p-pro-reco__head,
.js .p-pro-reco__list li,
.js .p-pro-dlbanner__title,
.js .lp-form,
.js .p-func__lead,
.js .p-func__head,
.js .p-func-card,
.js .slider .slider__item {
opacity: 0;
transition: opacity var(--appear-dur) var(--ease-appear);
}
.js .section-head.is-in,
.js .lineup__card.is-in,
.js .event-card.is-in,
.js .section-more.is-in,
.js .p-pro-worry__item.is-in,
.js .p-pro-feature.is-in,
.js .p-pro-worry__head.is-in,
.js .p-pro-solve__band.is-in,
.js .p-pro-solve__media.is-in,
.js .faq-item.is-in,
.js .p-pro-subcard.is-in,
.js .p-pro-step.is-in,
.js .p-reco__head.is-in,
.js .p-reco-card.is-in,
.js .p-pro-reco__head.is-in,
.js .p-pro-reco__list li.is-in,
.js .p-pro-dlbanner__title.is-in,
.js .lp-form.is-in,
.js .p-func__lead.is-in,
.js .p-func__head.is-in,
.js .p-func-card.is-in,
.js .slider.is-in .slider__item {
opacity: 1;
}
/* 機能カードは2列×2行。左上→右上→左下→右下 の順に少しずつ遅らせる。 */
.js .p-func-card:nth-child(2) { transition-delay: .08s; }
.js .p-func-card:nth-child(3) { transition-delay: .16s; }
.js .p-func-card:nth-child(4) { transition-delay: .24s; }
/* スタガー（順番に出す） */
.js .lineup__card:nth-child(2),
.js .p-pro-worry__item:nth-child(2) { transition-delay: .12s; }
.js .p-pro-worry__item:nth-child(3) { transition-delay: .24s; }
.js .p-pro-solve__media { transition-delay: .15s; }
.js .faq-item:nth-child(2) { transition-delay: .1s; }
.js .faq-item:nth-child(3) { transition-delay: .2s; }
.js .faq-item:nth-child(4) { transition-delay: .3s; }
.js .faq-item:nth-child(5) { transition-delay: .4s; }
.js .slider.is-in .slider__item:nth-child(2) { transition-delay: .12s; }
.js .slider.is-in .slider__item:nth-child(3) { transition-delay: .24s; }
.js .slider.is-in .slider__item:nth-child(4) { transition-delay: .36s; }
.js .slider.is-in .slider__item:nth-child(5) { transition-delay: .48s; }
.js .slider.is-in .slider__item:nth-child(6) { transition-delay: .60s; }
/* スライド（動き）は reduce OFF のときだけ足す */
@media (prefers-reduced-motion: no-preference) {
.js .section-head,
.js .lineup__card,
.js .event-card,
.js .section-more,
.js .p-pro-worry__item,
.js .p-pro-feature,
.js .p-pro-worry__head,
.js .p-pro-solve__band,
.js .p-pro-solve__media,
.js .faq-item,
.js .slider .slider__item {
transform: translateY(var(--appear-shift));
transition: opacity var(--appear-dur) var(--ease-appear), transform var(--appear-dur) var(--ease-appear);
}
.js .section-head.is-in,
.js .lineup__card.is-in,
.js .event-card.is-in,
.js .section-more.is-in,
.js .p-pro-worry__item.is-in,
.js .p-pro-feature.is-in,
.js .p-pro-worry__head.is-in,
.js .p-pro-solve__band.is-in,
.js .p-pro-solve__media.is-in,
.js .faq-item.is-in,
.js .slider.is-in .slider__item {
transform: none;
}
}
/* Proの追加ブロックにもスライド（reduce OFF時のみ） */
@media (prefers-reduced-motion: no-preference) {
.js .p-pro-subcard,
.js .p-pro-step,
.js .p-reco__head,
.js .p-reco-card,
.js .p-pro-dlbanner__title,
.js .lp-form {
transform: translateY(var(--appear-shift));
transition: opacity var(--appear-dur) var(--ease-appear), transform var(--appear-dur) var(--ease-appear);
}
.js .p-pro-subcard.is-in,
.js .p-pro-step.is-in,
.js .p-reco__head.is-in,
.js .p-reco-card.is-in,
.js .p-pro-dlbanner__title.is-in,
.js .lp-form.is-in {
transform: none;
}
/* サブカード・フローステップを順番にスタガー */
.js .p-pro-subcard:nth-child(2) { transition-delay: .12s; }
.js .p-pro-subcard:nth-child(3) { transition-delay: .24s; }
.js .p-reco-card:nth-child(2) { transition-delay: .12s; }
.js .p-reco-card:nth-child(3) { transition-delay: .24s; }
}
/* ヒーローの読み込み時フェードアップ（KAGAMI風・上から順番に） */
@keyframes appear-up {
from { opacity: 0; transform: translateY(var(--appear-shift)); }
to { opacity: 1; transform: none; }
}
/* 動きを減らす設定の時に使う、フェードだけの版 */
@keyframes appear-fade {
from { opacity: 0; }
to { opacity: 1; }
}
/* ヒーローの登場アニメーション。
以前は動き（translate）とフェードをまとめて no-preference の中に入れていたため、
OSの「視差効果を減らす」がONだとヒーローだけ一切動かず、
他セクション（フェードは常に残す作り）と挙動が揃っていなかった。
ここでは常にフェードさせ、上へのスライドだけを no-preference に限定する。 */
.js .p-pro-hero__badge,
.js .p-pro-hero__title,
.js .p-pro-hero__lead,
.js .p-pro-hero .p-pro-cap,
.js .p-pro-hero__cta,
.js .p-hero .hero__badge,
.js .p-hero .hero__logo,
.js .p-hero .hero__title,
.js .p-hero .hero__lead,
.js .p-hero .hero__cta { animation: appear-fade var(--appear-dur) var(--ease-appear) both; }
@media (prefers-reduced-motion: no-preference) {
/* Pro / Right ヒーロー */
.js .p-pro-hero__badge,
.js .p-pro-hero__title,
.js .p-pro-hero__lead,
.js .p-pro-hero .p-pro-cap,
.js .p-pro-hero__cta { animation: appear-up var(--appear-dur) var(--ease-appear) both; }
.js .p-pro-hero__title { animation-delay: .08s; }
.js .p-pro-hero__lead { animation-delay: .18s; }
.js .p-pro-hero .p-pro-cap { animation-delay: .28s; }
.js .p-pro-hero__cta { animation-delay: .38s; }
/* TOP ヒーロー（カバーブロック） */
.js .p-hero .hero__badge,
.js .p-hero .hero__logo,
.js .p-hero .hero__title,
.js .p-hero .hero__lead,
.js .p-hero .hero__cta { animation: appear-up var(--appear-dur) var(--ease-appear) both; }
.js .p-hero .hero__logo { animation-delay: .08s; }
.js .p-hero .hero__title { animation-delay: .16s; }
.js .p-hero .hero__lead { animation-delay: .26s; }
.js .p-hero .hero__cta { animation-delay: .36s; }
}
/* ============================================================
ヒーロー
============================================================ */
.hero {
background: linear-gradient(135deg, var(--blue) 0%, var(--blue-mid) 100%);
color: #fff;
}
.hero__inner {
width: min(var(--container), 90%);
margin-inline: auto;
padding-block: clamp(56px, 12vw, 120px);
text-align: center;
}
.hero__eyebrow { font-weight: 700; letter-spacing: .12em; opacity: .85; }
.hero__title {
margin-top: 8px;
font-size: clamp(1.8rem, 6vw, 3rem);
font-weight: 800;
line-height: 1.35;
text-wrap: balance;
}
.hero__lead { margin-top: 16px; opacity: .9; }
.hero__cta { margin-top: 28px; }
/* ============================================================
企業ロゴ 自動スライド
============================================================ */
/* 下線は 0910_3 の指摘（AUN #4「線が入ってる？」）で削除。 */
.p-top__logos { padding-block: 28px; overflow: hidden; }
.logo-marquee { overflow: hidden; }
.logo-marquee__track {
display: flex;
gap: 40px;
width: max-content;
animation: logo-scroll 28s linear infinite;
}
.logo-ph {
display: inline-flex;
align-items: center;
justify-content: center;
width: 140px;
height: 56px;
background: #fff;
border: 1px solid var(--line);
border-radius: 6px;
color: #9fb2c4;
font-size: .8rem;
font-weight: 700;
}
/* ロゴの高さ：56px → 45px（約80%。本多さん指示「ロゴが少し大きい」）。 */
.logo-marquee__item .logo-img {
width: auto;
height: 45px;
object-fit: contain;
}
/* 企業ロゴ：コア「ギャラリー」ブロックをマーキー化（TOP編集画面で管理）
※ コアのギャラリー既定より詳細度を上げて上書きする */
.p-top__logos .wp-block-gallery.js-logo-marquee {
/* 横並びはコアのレイアウト機能（is-layout-flex）任せにせず自前で持つ。
管理画面「導入企業ロゴ」から出力する時はそのクラスが付かないため（inc/logos.php）。 */
display: flex;
flex-wrap: nowrap;
width: max-content;
max-width: none;
gap: 40px;
justify-content: flex-start;
animation: logo-scroll 28s linear infinite;
}
.p-top__logos .wp-block-gallery.js-logo-marquee figure.wp-block-image {
flex: 0 0 auto !important;
width: auto !important;
height: auto !important;
margin: 0;
}
/* 画像の高さを45pxに揃える（当初56px、約80%に縮小）。
WordPressコアの「画像を切り抜く（is-cropped）」が
.wp-block-gallery.has-nested-images.is-cropped figure.wp-block-image:not(#individual-image) img
{ height:100%; width:100%; object-fit:cover; flex:1 0 0% }
という **:not(#individual-image) 入り＝ID相当の詳細度** で指定してくるため、
同じ形をなぞった上で .p-top__logos を足して勝つ必要がある。
（単に .js-logo-marquee … img と書くだけでは !important を付けても負ける）
height:100% のままだと、一番背の高い画像（3000×1500）に全部が引き伸ばされる。 */
.p-top__logos .wp-block-gallery.js-logo-marquee figure.wp-block-image img,
.p-top__logos .wp-block-gallery.has-nested-images.is-cropped figure.wp-block-image:not(#individual-image) img,
.p-top__logos .wp-block-gallery.has-nested-images.is-cropped figure.wp-block-image:not(#individual-image) > a img {
height: 45px !important;
width: auto !important;
max-width: none !important;
/* aspect-ratio は指定しない。
img には width/height 属性から自動で aspect-ratio が入っており、
これが「読み込み前でも正しい幅を確保する」役割をしている。
ここで aspect-ratio:auto を書くとその手がかりを消してしまい、
遅延読み込み（loading=lazy）の画像が読み込まれるまで異常な幅になる。 */
object-fit: contain !important;
flex: 0 0 auto !important;
}
/* ロゴ自動スライド：JSで中身を2周ぶんに複製し、1周ぶん動かして先頭へ戻す。
トラック全幅には「2周の間の隙間」も含まれるため、単純な -50% では
gapの半分（40px÷2）ぶん行き過ぎて継ぎ目が出る。その分を戻して無限ループにする。 */
@keyframes logo-scroll {
from { transform: translateX(0); }
to { transform: translateX(calc(-50% - var(--logo-gap, 40px) / 2)); }
}
/* ============================================================
Service Lineup
============================================================ */
.lineup { display: grid; gap: 20px; }
.lineup__card {
padding: clamp(24px, 5vw, 40px);
background: var(--blue-pale);
border-radius: var(--radius);
text-align: center;
}
.lineup__name { font-size: 1.3rem; color: var(--navy); }
/* ============================================================
横スワイプスライダー（scroll-snap）
============================================================ */
.slider {
display: flex;
gap: 16px;
overflow-x: auto;
scroll-snap-type: x mandatory;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
/*
* overflow-x を指定すると縦方向も切り取られるため、
* カードのドロップシャドウが上下で四角く途切れて見えていた。
* 影が収まるぶんの余白を内側に確保し、同じ量を負のマージンで戻して
* 見た目の間隔は変えない。ホバーで影が濃くなるぶんも見込んでいる。
*/
padding-block: 14px 30px;
margin-block: -14px -30px;
}
.slider::-webkit-scrollbar { display: none; }
.slider__item {
flex: 0 0 auto;
width: min(78%, 300px);
scroll-snap-align: start;
}
/* スマホ：スライダーを左右とも画面端まで全幅化。
・止まってる時は padding で先頭カードをコンテナ左(5vw)に揃える
・スクロールすると左右どちらも画面端まで動いてカードが見切れる
・mandatory は先頭を左端に強制スナップしてインセットが消えるため proximity */
@media (max-width: 767px) {
.slider {
margin-inline: calc((100% - 100vw) / 2);
padding-left: 5vw;
padding-right: 5vw;
scroll-snap-type: x proximity;
scroll-padding-left: 5vw;
}
}
/* 事例カード */
.case-card, .info-card {
height: 100%;
background: #fff;
border: 1px solid var(--line);
border-radius: var(--radius);
overflow: hidden;
}
.case-card__link, .info-card__link { display: block; height: 100%; }
.case-card__thumb, .info-card__thumb {
display: block;
aspect-ratio: 16 / 10;
background: #dae6f0;
}
.case-card__thumb img, .info-card__thumb img { width: 100%; height: 100%; object-fit: cover; }
.case-card__thumb--ph, .info-card__thumb--ph,
.event-card__thumb--ph {
background: repeating-linear-gradient(45deg, #e4edf4, #e4edf4 10px, #dae6f0 10px, #dae6f0 20px);
}
.case-card__body, .info-card__body { padding: 14px 16px 18px; }
.case-card__tags { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.case-card__tag {
padding: 2px 10px;
background: var(--blue-pale);
color: var(--blue);
border-radius: 999px;
font-size: .72rem;
font-weight: 700;
}
.case-card__title, .info-card__title { font-size: 1rem; line-height: 1.5; }
.case-card__date, .info-card__date { display: block; margin-top: 8px; color: var(--muted); font-size: .8rem; }
/* カードの写真はマージン付き（フルフレームにしない）＋角丸。
コンプ実測：導入事例・お役立ち記事・最新情報すべて左右18px／上16px前後で共通。 */
.case-card__thumb,
.info-card__thumb { margin: 16px 16px 0; border-radius: 10px; overflow: hidden; }
/* 抜粋は 0910_3カンプで無くなった（AUN #5 / #22）。
.case-card__excerpt の定義は他で使う可能性があるので残しつつ、
導入事例カードでは出力自体をやめている（template-parts/card-case.php）。 */
.case-card__excerpt {
margin-top: 8px;
color: var(--text);
font-size: .85rem;
line-height: 1.7;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
/* ---- 0910_3カンプのカード下部：区切り線＋カテゴリータグ＋日付＋会社名 ---- */
.case-card__meta {
margin-top: 18px;
padding-top: 16px;
border-top: 1px solid var(--navy, #00368f);
}
.case-card__cats {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin: 0 0 16px;
padding: 0;
list-style: none;
}
.case-card__cat {
padding: 3px 14px;
border: 1px solid var(--navy, #00368f);
border-radius: 999px;
color: var(--navy, #00368f);
font-size: .75rem;
font-weight: 700;
line-height: 1.6;
white-space: nowrap;
}
.case-card__meta .case-card__date {
display: block;
margin: 0 0 2px;
color: var(--navy, #00368f);
font-size: .8125rem;
font-weight: 500;
}
.case-card__client {
margin: 0;
/* 会社名だけ黒。日付は紺のまま（カンプの並びに合わせた指示）。 */
color: var(--ink, #1a1a1a);
font-size: .8125rem;
font-weight: 500;
line-height: 1.6;
}
.info-card__date { margin: 0 0 6px; }
/* ============================================================
イベント
============================================================ */
.event-card {
display: grid;
gap: 20px;
background: #fff;
border-radius: var(--radius);
overflow: hidden;
border: 1px solid var(--line);
}
.event-card__thumb { aspect-ratio: 16 / 7; background: #dae6f0; }
.event-card__body { padding: 8px 0 8px; }
.event-card__label {
display: inline-block;
margin-bottom: 8px;
padding: 2px 12px;
background: var(--navy);
color: #fff;
border-radius: 4px;
font-size: .75rem;
font-weight: 700;
}
.event-card__title { font-size: 1.15rem; line-height: 1.5; }
/* 受付ステータスのバッジ（AUN #9）。詳細ページの .event-status と同じ色づかい。 */
.event-card__status {
display: inline-block;
margin: 0 0 8px;
padding: 3px 16px;
border-radius: 999px;
background: var(--cta-deep, #de0039);
color: #fff;
font-size: .75rem;
font-weight: 700;
line-height: 1.5;
}
.event-card__status--closed { background: var(--muted, #7a7a7a); }
.event-card__meta { margin-top: 12px; color: var(--muted); font-size: .9rem; }
/* ============================================================
FAQ アコーディオン
============================================================ */
.faq { background: #fff; border-radius: var(--radius); overflow: hidden; }
.accordion { border-bottom: 1px solid var(--line); }
.accordion:last-child { border-bottom: 0; }
.accordion__head {
display: flex;
align-items: center;
gap: 10px;
width: 100%;
padding: 20px 20px;
background: none;
border: 0;
font: inherit;
font-weight: 700;
text-align: left;
cursor: pointer;
}
.accordion__q { color: var(--blue); font-weight: 800; }
.accordion__head::after {
content: "＋";
margin-left: auto;
color: var(--blue);
transition: transform .3s ease;
}
.accordion.is-open .accordion__head::after { content: "−"; }
.accordion__body { overflow: hidden; }
.accordion__inner { padding: 0 20px 20px; color: var(--muted); }
.accordion__a { color: var(--cta); font-weight: 800; margin-right: 4px; }
/* ============================================================
追従バナー（画面右端・縦積み）
------------------------------------------------------------
0831カンプ実測（TOP p.1 / Pro p.3 / Right p.4 とも同一）：
画面右端に接地・幅90 ／ Right(水色)とPro(紺)の2ブロックを縦に積む
各ブロック 195px ／ 左側だけ角丸14（右は画面端なので角なし）
SPは画面幅が足りないので従来どおり下部固定の横並びに切り替える。
============================================================ */
.sticky-bar {
position: fixed;
left: 0;
right: 0;
bottom: 0;
z-index: 220;
display: flex;
transform: translateY(100%);
transition: transform .38s cubic-bezier(.34, 1.25, .64, 1);
box-shadow: 0 -4px 16px rgb(0, 0, 0, .12);
border-radius: 15px 15px 0 0;
overflow: hidden;
}
.sticky-bar.is-visible { transform: translateY(0); }
.sticky-bar__btn {
flex: 1;
display: grid;
place-content: center;
gap: 2px;
padding: 12px 8px;
text-align: center;
color: #fff;
line-height: 1.3;
}
.sticky-bar__btn--right { background: var(--blue-bright, #0098d9); }
.sticky-bar__btn--pro { background: var(--navy); }
/* 今いるページ側はグレーに落とす（AUN #28）。
「どちらのページにいるか」を色で示すのが目的なので、
ホバーで持ち上がる演出もこちらだけ止める。 */
/* 今いるページ側はグレーアウト（AUN #28）。
#9aa4b0 は濃くて「押せそう」に見えたので、もう少し薄いグレーにする。 */
.sticky-bar__btn.is-here {
background: #c4ccd4;
cursor: default;
}
.sticky-bar__btn.is-here:hover { transform: none; opacity: 1; }
.sticky-bar__name { font-weight: 700; font-size: .9rem; }
.sticky-bar__icon {
display: none;
width: 30px;
height: 30px;
margin: 0 auto 6px;
border-radius: 50%;
background: rgb(255, 255, 255, .18);
color: #fff;
align-items: center;
justify-content: center;
font-size: .8rem;
}
.sticky-bar__sub {
display: inline-block;
font-size: .72rem;
border: 1.5px solid rgb(255, 255, 255, .8);
border-radius: 999px;
padding: 5px 14px;
margin: 8px 0;
}
/* ============================================================
フッター
============================================================ */
.site-footer {
margin-bottom: 64px; /* 追従バナーと重ならないよう下に余白 */
background: #fff;
color: var(--navy);
}
.site-footer__inner { width: min(760px, 88%); margin-inline: auto; padding-block: 56px 40px; }
/* フッターのロゴはSUZUKIコーポレート1つだけ（0910_3カンプ）。
0910_2で一度FLEETロゴを足したが最新版で削除されたため、
.site-footer__logo（FLEET側）の指定も不要になっている。 */
.site-footer__logos { margin: 0 0 32px; }
.site-footer__corp { display: block; width: 161px; height: auto; margin: 0; }
.site-footer__cta {
display: flex;
flex-wrap: wrap;
gap: 12px;
margin-bottom: 40px;
}
/* SPカンプ実測：158x46・文字14.5px・左右パディング21。
.btn の既定パディング(0 28px)＋16pxのままだと「資料ダウンロード」が
ボタン幅(157px)に収まらず「資料ダウンロ／ード」で折り返していた。
狭い端末でも折り返さないよう、文字サイズは 3.8vw で下限まで詰める。 */
/* SPは3つ横並びにすると1つ99px前後まで縮み、「資料ダウンロード」が入らない。
2列で折り返し、3つ目（料金）は1行使って収める。 */
.site-footer__cta .btn {
flex: 1 1 calc(50% - 6px);
min-width: 0;
min-height: 46px;
padding: 0 12px;
font-size: clamp(.8rem, 3.8vw, .9rem);
white-space: nowrap;
}
.site-footer__cta .btn:nth-child(3) { flex-basis: 100%; }
.site-footer__cta .btn--outline {
border-color: var(--blue-bright);
border-radius: 10px;
color: var(--navy);
font-weight: 800;
}
/* このブロックの色指定が共通の .btn--outline:hover より後ろに来るため、
ホバー時に文字が紺のままだった。塗りつぶしに合わせて白にする。 */
@media (hover: hover) {
.site-footer__cta .btn--outline:hover { color: #fff; }
}
.footer-nav__list {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 0;
}
/* 段の切れ目（footer.php が差し込む幅100%のダミー項目）。
flex の折り返しを狙った位置で起こすためだけのもので、見た目は持たない。 */
.footer-nav__break {
flex: 0 0 100%;
width: 100%;
height: 0;
margin: 0;
padding: 0;
list-style: none;
}
/* 段を固定するのは、2段に組む1100px以上のときだけ。
それより狭いときは幅なりに折り返させる。 */
@media (max-width: 1099px) {
.footer-nav__break { display: none; }
}
.footer-nav__list a {
color: var(--blue);
font-weight: 700;
font-size: .95rem;
text-decoration: none;
transition: opacity .2s;
}
.footer-nav__list a:hover { opacity: .7; }
.site-footer__band {
width: min(var(--shiki), 100%); /* 座布団と同じ980px（コンプ実測） */
margin: 8px auto 0;
background: var(--grad-aqua);
border-radius: 28px 28px 0 0;
padding: 30px 20px;
text-align: center;
}
.site-footer__copy { margin: 0; font-size: .8rem; font-weight: 500; color: var(--blue); } /* カンプ実測 #00368f（--blue-mid はカンプに無い色） */
/* ---- プラン誘導（よくある質問とフッターの間・コンプ実測） ----
コンテナ980pxを中央2pxの縦罫線で2分割。各カラム中央に
プラン名／説明2行／詳細を見る(123×45)。SPコンプには無いのでPCのみ表示。 */
.plan-nav { display: none; }
@media (min-width: 768px) {
/* コンプ実測：上のセクション（FAQ帯）から91px空けて罫線が始まり、
罫線の下端からフッターの内容まで154px（うち64pxはフッター側のpadding）。 */
.plan-nav { display: block; padding-block: 91px 90px; }
.plan-nav__inner {
width: min(var(--shiki), 100% - var(--gutter) * 2);
margin-inline: auto;
display: grid;
grid-template-columns: 1fr 1fr;
align-items: stretch;
}
.plan-nav__item {
padding: 55px 12px 37px; /* 罫線が本文より上下に伸びる分 */
text-align: center;
}
.plan-nav__item + .plan-nav__item { border-left: 2px solid var(--blue); }
.plan-nav__name { margin: 0; font-size: 1.5rem; font-weight: 800; line-height: 1.3; }
.plan-nav__item--right .plan-nav__name { color: var(--blue-bright); } /* 実測 #0098d9 */
.plan-nav__item--pro .plan-nav__name { color: var(--blue); } /* 実測 #00368f */
.plan-nav__desc {
margin: 22px 0 0;
color: #000;
font-size: .95rem;
font-weight: 700;
line-height: 1.7;
}
.plan-nav__cta { margin: 30px 0 0; }
/* ホバーは他のアウトラインボタンと同じく塗りつぶし。
この .plan-nav__cta .btn の background:#fff が共通の :hover より後ろに
来るため、指定しないと白のままで変化が分からなかった。 */
.plan-nav__cta .btn {
min-width: 0;
/* 矢印（AUN #30・#31）を入れたぶん、カンプの123pxから広げる。 */
width: 158px;
min-height: 45px;
padding: 0 38px 0 14px;
background: #fff;
/* カンプ実測：枠・文字とも水色 #0098d9（文字だけ紺になっていた） */
color: var(--blue-bright);
border: 1.5px solid var(--blue-bright);
font-size: .82rem;
}
@media (hover: hover) {
.plan-nav__cta .btn:hover { background: var(--blue-bright); color: #fff; }
}
}
/* PCフッター：左にロゴ／右にボタン＋リンク2段（コンプ実測）
コンテナ980px・ロゴ271px・間130px・ボタン157×49(間21)・リンク間隔42px */
@media (min-width: 768px) {
/* フッター上部の区切り線。カンプ 0831 実測：紺 #00368f・2px・幅980（＝座布団幅）。
コンテンツ幅を1200pxに広げているので、線も座布団幅（--shiki）に合わせる。 */
/* 一覧・詳細ページのカンプ（p.5 等）には区切り線が無い。
TOP / Pro / Right では従来どおり出す。判定は body.is-list-context。 */
body.is-list-context .site-footer::before { display: none; }
.site-footer::before {
content: "";
display: block;
width: min(var(--shiki), 100% - var(--gutter) * 2);
height: 2px;
margin-inline: auto;
background: var(--blue);
}
.site-footer__inner {
width: min(var(--shiki), 100% - var(--gutter) * 2);
display: grid;
/* ロゴ列とリンク列の間隔はカンプのまま（本多さん指示）。 */
grid-template-columns: 271px 1fr;
column-gap: 130px;
align-items: center;
padding-block: 64px 56px;
}
/* ロゴは左カラムに置く。 */
.site-footer__logos {
grid-column: 1;
grid-row: 1 / span 2;
align-self: center;
margin: 0;
}
.site-footer__corp { width: 130px; margin: 0; }
.site-footer__cta {
grid-column: 2;
grid-row: 1;
gap: 21px;
margin: 0 0 30px;
}
/* 0910_3でボタンが3つ（資料DL／お問い合わせ／料金）。
固定幅157pxだと3つで横に溢れるので、等幅に伸ばす。 */
.site-footer__cta .btn,
.site-footer__cta .btn:nth-child(3) {
flex: 1 1 0;
min-width: 0;
max-width: 170px;
min-height: 49px;
padding: 0 8px;
border-radius: 8px;
font-size: .82rem;
white-space: nowrap;
}
.footer-nav { grid-column: 2; grid-row: 2; }
.footer-nav__list {
flex-flow: row wrap;
gap: 20px 36px;
}
.footer-nav__list a { font-size: .8rem; }
}
/* フッターのサイトマップ：サイト内リンク（料金〜最新情報）と
規約まわりのリンクで段を分ける。5番目＝「SUZUKI FLEET
プライバシーポリシー」から必ず改行させたいので、幅なりの折り返しでは
なく4列のグリッドで段を固定する。
4列が収まらない幅では、従来どおり幅なりに折り返させる。 */
@media (min-width: 1100px) {
/*
* リンクは4列・左揃え・等間隔（AUN 0916 #25、本多さん「均等左揃え」）。
*
* 4等分（repeat(4, 1fr)）にすると、ロゴの右に残る799pxでは1列200px弱にしかならず
* 「SUZUKI FLEET プライバシーポリシー」（220px必要）が2行に折り返してしまう。
* ロゴとの間隔は詰めない、という指示なので、列幅を内容なり（auto）にして
* 余りを space-between で列間へ均等に配る。
* ・上下の段で列の左端がぴったり揃う（＝左揃え）
* ・列と列のあいだが全部同じ幅になる（＝等間隔）
* ・どの項目も折り返さない
*/
/*
* カンプ（PC p.3/p.4）どおり、リンクは左から等間隔に並べる。
* 4列グリッドにすると列幅が「SUZUKI FLEET プライバシーポリシー」に
* そろってしまい、上の段（料金・導入事例…）の間隔が空きすぎて見えるため、
* 列はそろえずに flex の折り返しで並べる。
* 段の切れ目は .footer-nav__break（footer.php が差し込むダミー項目）で固定。
*/
.footer-nav__list {
display: flex;
flex-flow: row wrap;
justify-content: flex-start;
/*
* カンプ実測：行間14 / 列間38。
* 行間は「段の切れ目」のダミー項目をはさむぶん2回ぶん効くので、
* 指定は半分（7px）にして合計14pxにそろえる。
*/
gap: 7px 38px;
}
}
/* ============================================================
活用事例アーカイブ（archive-case.php）
============================================================ */
/* ============================================================
一覧ページ共通（導入事例 / お役立ち記事 / 最新情報 / イベント）
0831カンプ実測：
ヒーロー 水色グラデ #99d6f0 → #fff（高さ約395）＋パンくず＋見出し
見出し EN 40px ＋ JA 19px を横並び・左寄せ
タブ 174x47・座布団の上端に接地。選択中はブランド色、非選択は #999
座布団 幅980 / 内側65 / 白 / 角丸16
カード 259幅 x 3列 / gap 36
CTAバナー 幅980を2分割（各489）/ 高さ150
============================================================ */
/* 下のCTAバナーとフッターの間が空きすぎていた。
フッター側が padding-top 64px を持っているので、ここは詰める。 */
.p-case-archive { padding-bottom: 0; }
/* --- ヒーロー --- */
.p-archive-hero {
/* 上のパディングは .p-archive-hero__crumb 側で持つ（帯の高さを実測に合わせるため）。 */
padding: 0 0 46px;
/* 「段々」に見えていた原因は途中の中間色（傾きの折れ）だったので2ストップにする。
長さはpx固定ではなく要素の高さ基準。px固定にすると、ヒーローが低い
詳細ページで白まで届かず、下辺が硬い色の切れ目になってしまう。 */
background: linear-gradient(180deg, #99d6f0 0%, #fff 100%);
}
/* パンくず帯。カンプ実測：高さ35px、直下に白1pxの区切り線（全幅）。 */
/* パンくず帯。上下が詰まりすぎないよう md を使う。 */
.p-archive-hero__crumb {
padding-block: var(--sp-sm);
border-bottom: 1px solid #fff;
}
.p-archive-hero__crumb + .l-container { padding-top: 0; }
/* 見出しではなく現在地の表示なので、太字にせず細字で控えめに。 */
.breadcrumb { font-size: .8rem; font-weight: 400; color: var(--navy); }
.breadcrumb a { color: inherit; text-decoration: none; }
.breadcrumb a:hover { text-decoration: underline; }
/* カンプは半角の「>」。▶(U+25B6) はフォントに無くトウフ(□)になるため使わない。 */
.breadcrumb__sep { margin: 0 .55em; }
.p-archive-hero__title {
display: flex;
align-items: baseline;
flex-wrap: wrap;
gap: 0 24px;
margin: 42px 0 0;
color: var(--navy);
}
.p-archive-hero__en { font-size: clamp(1.7rem, 5.6vw, 2.5rem); font-weight: 800; letter-spacing: .01em; }
.p-archive-hero__ja { font-size: clamp(.95rem, 2.6vw, 1.2rem); font-weight: 800; }
/* イベント情報一覧だけ紺グラデ＋白文字（0910_3カンプ p.9 ／ AUN #25「最新デザイン踏襲」）。
実測：ヘッダー直下 #0a3e93 → 中間 #7996c4 → 白。パンくずも白。 */
.p-archive-hero--navy {
/* 同じく2ストップ。長さは要素の高さ基準。 */
background: linear-gradient(180deg, #0a3e93 0%, #fff 100%);
color: #fff;
}
.p-archive-hero--navy .breadcrumb,
.p-archive-hero--navy .breadcrumb a,
.p-archive-hero--navy .p-archive-hero__title { color: #fff; }
/* SPカンプ（p.6 導入事例一覧 ほか）では英字見出しと日本語見出しが縦積み。
PCは横並びのままなので、SPだけ block に戻す。 */
@media (max-width: 767px) {
.p-archive-hero__title { display: block; }
.p-archive-hero__en { display: block; }
.p-archive-hero__ja { display: block; margin-top: 8px; font-size: 1.0625rem; }
}
/* --- プランで絞り込みタブ --- */
.case-tabs { display: flex; gap: 2px; }
.case-tab {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 174px;
height: 47px;
padding: 0 16px;
border-radius: 8px 8px 0 0;
background: #999;
color: #fff;
font-size: .82rem;
font-weight: 800;
text-decoration: none;
transition: background-color .2s;
}
.case-tab--right.is-on { background: var(--blue-bright, #0098d9); }
.case-tab--pro.is-on { background: var(--navy); }
/* --- 座布団 --- */
.case-panel {
padding: 34px 24px 44px;
background: #fff;
border-radius: 16px;
box-shadow: 0 6px 24px rgba(0, 40, 90, .10);
}
/* 導入事例一覧の企業ロゴ帯（AUN #21）。
TOPと同じマーキーを使うが、座布団の中に収めるので上下の余白だけ調整する。 */
.case-panel__logos { margin: -6px 0 26px; }
.case-panel__logos .p-top__logos { padding-block: 0 22px; }
/* --- カテゴリーで絞り込み --- */
/* カンプでは選択中だけ枠付きピル、それ以外は文字のみ。 */
.case-filter { margin: 0 0 32px; }
.case-filter__list {
display: flex;
flex-wrap: wrap;
gap: 6px 10px;
/* 左揃え（本多さんの指示）。以前は中央寄せで、項目が少ないと
カードの左端と揃わずズレて見えていた。 */
justify-content: flex-start;
list-style: none;
margin: 0;
padding: 0;
}
/* カンプでは「ALL」のピルの外枠と、下のカードの左端が揃う。
文字位置ではなくボックスを合わせるので、負のマージンは入れない。 */
/* 0831カンプ実測：
選択中 白地＋1px枠 #00368f・文字も #00368f（ピル 81x27 / 左右padding 28）
非選択 枠なし・同じ #00368f を約48%まで透過（別色ではない） */
.case-filter__link {
display: inline-block;
padding: 3px 28px;
border: 1px solid transparent;
border-radius: 999px;
background: transparent;
font-size: 0.85rem;
font-weight: 700;
font-family: inherit;
line-height: 1.4;
color: var(--navy);
opacity: .48;
text-decoration: none;
cursor: pointer;
transition: opacity .2s, border-color .2s;
}
.case-filter__link:hover { opacity: 1; }
.case-filter__link.is-current {
opacity: 1;
border-color: var(--navy);
}
/* ============================================================
イベント詳細ページ（0910カンプ p.10）
------------------------------------------------------------
上から順に
.event-status … 記事の左上に食い込む赤いバッジ「予約受付中」
.event-head … 開催形式バッジ＋開催日時＋申し込みボタン
.event-detail … 本文の下の薄青パネル「セミナー詳細」
どれも中身が空なら PHP 側で出力ごと省くので、
記事作成中でもレイアウトは崩れない。
============================================================ */
/* 受付ステータスのバッジ。カンプではカード左上の角に食い込む。 */
/* 0910_3カンプ p.10：バッジの上辺は座布団の上辺とツライチで、下へ垂れるタブ。
座布団の上パディングぶん引き上げて、天面に貼り付ける。 */
.event-status {
/* inline-block のままだと負のマージンが「行ボックスが縮むだけ」で効かず、
座布団の天面まで上がらない。block＋width:max-content にする。 */
display: block;
width: max-content;
max-width: 100%;
margin: calc(var(--panel-pad-top, 34px) * -1) 0 22px;
padding: 9px 26px;
border-radius: 0 0 6px 6px;
background: var(--cta-deep, #de0039);
color: #fff;
font-size: .9375rem;
font-weight: 700;
line-height: 1.4;
}
/* 終了したものは主張させない。 */
.event-status--closed { background: var(--muted, #7a7a7a); }
/* アイキャッチ（左）＋開催情報（右）の2カラム。
カンプ実測：カード内側852 ＝ 画像500 ／ 余白52 ／ 情報300。
比率で持たせて、カード幅が変わっても崩れないようにする。 */
.event-hero {
display: grid;
grid-template-columns: minmax(0, 500fr) minmax(0, 300fr);
gap: 0 52px;
align-items: start;
margin: 0 0 36px;
}
/* 画像が無い記事では情報欄だけを左に置く。 */
.event-hero--noimg { grid-template-columns: minmax(0, 1fr); }
.event-hero__media { margin: 0; }
.event-hero__media img {
display: block;
width: 100%;
height: auto;
/* カンプ実測 500×277。素材の比率がずれても枠は保つ。 */
aspect-ratio: 500 / 277;
object-fit: cover;
border-radius: 6px;
}
.event-hero__info { min-width: 0; }
/* カンプではタイトルとリードの間が1行ぶんあく。 */
.single-event .case-single__lead { margin-top: 18px; }
.event-head__format {
display: inline-block;
margin: 0 0 20px;
padding: 4px 20px;
border: 1px solid var(--navy, #00368f);
border-radius: 999px;
color: var(--navy, #00368f);
font-size: .8125rem;
font-weight: 700;
line-height: 1.6;
}
/* 開催日時。飾りは付けず、ラベル → 日付 → 時刻 を素直に積むだけ。
1行に詰めると「開催日時：2025/08/28」で途中折れして読めないので段は分ける。 */
.event-head__date {
margin: 0 0 24px;
}
.event-head__label {
display: block;
margin-bottom: 4px;
color: #7a7a7a;
font-size: .75rem;
font-weight: 700;
letter-spacing: .08em;
line-height: 1.5;
}
.event-head__day {
display: block;
color: var(--navy, #00368f);
font-size: 1.25rem;
font-weight: 800;
line-height: 1.4;
/* 数字の幅を揃えて日付らしく見せる。 */
font-feature-settings: "tnum" 1;
}
/* 開催場所は日付ではないので等幅数字は切る。 */
.event-head__place .event-head__day { font-feature-settings: normal; }
/* 曜日は日付より一回り小さく。 */
.event-head__wd {
margin-left: .1em;
font-size: .75em;
font-weight: 700;
}
.event-head__time {
display: block;
margin-top: 2px;
color: var(--navy, #00368f);
font-size: 1rem;
font-weight: 700;
line-height: 1.5;
font-feature-settings: "tnum" 1;
}
.event-head__apply { margin: 0; }
.event-head__apply .btn {
/* カンプ実測 270×56。情報欄300の中でいっぱいに広げる。 */
display: flex;
width: 100%;
max-width: 270px;
min-height: 56px;
/* 情報欄が狭まっても「申し込みはこ／ちら」と折れないようにする。 */
white-space: nowrap;
padding-inline: 14px;
}
@media (max-width: 767px) {
.event-hero { grid-template-columns: minmax(0, 1fr); gap: 22px; }
.event-head__apply .btn { max-width: none; }
}
/* 「こんな方におすすめ！」。本文の直前に置く箇条書き。 */
.event-target { margin: 0 0 34px; }
.event-target__title {
margin: 0 0 14px;
color: var(--navy, #00368f);
font-size: 1.125rem;
font-weight: 800;
line-height: 1.5;
}
.event-target__list { margin: 0; padding: 0; list-style: none; }
.event-target__list li {
position: relative;
padding: 0 0 0 1.4em;
color: var(--ink, #1a1a1a);
font-size: .9375rem;
line-height: 1.9;
}
.event-target__list li::before {
content: "";
position: absolute;
left: .3em;
top: .72em;
width: 7px;
height: 7px;
border-radius: 50%;
background: var(--blue-bright, #0098d9);
}
/* ------------------------------------------------------------
イベント詳細：セミナー詳細の下の「波線 → フォーム → 申し込む → 一覧に戻る」
0910_3カンプ p.10 ／ SPカンプ p.11
波線 紺 #00368f の細線3本。座布団の左右いっぱいに敷く
フォーム枠 グレー #e6e6e6・角丸12
ボタン 赤ピル・中央
一覧に戻る 左寄せ
------------------------------------------------------------ */
.event-form { margin: 0 0 8px; }
/* 埋め込みフォームは幅を持たないことがあるので、器側で中央に寄せる。 */
.event-form__body { max-width: 560px; margin-inline: auto; }
.event-form__body :is(input, select, textarea) { max-width: 100%; }
/* 未入力のうちはカンプと同じグレーの枠を出す。 */
.event-form__ph {
display: grid;
place-items: center;
min-height: 290px;
padding: 24px;
border-radius: 12px;
background: #e6e6e6;
}
.event-form__ph-main {
margin: 0;
color: var(--cta-deep, #de0039);
font-size: 1.0625rem;
font-weight: 800;
text-align: center;
}
.event-form__cta { margin: 26px 0 0; text-align: center; }
.event-form__cta .btn { min-width: 246px; }
/* 座布団の中に置く「一覧に戻る」は左寄せ・小さめ（カンプ実測）。 */
/* 後方の .case-single__back（中央寄せ）より後に効かせたいので詳細度を上げる。 */
.case-single__back.case-single__back--inpanel { margin-top: 34px; text-align: left; }
.case-single__back--inpanel .btn {
min-width: 0;
min-height: 34px;
padding: 0 20px;
font-size: .8125rem;
}
/* 「セミナー詳細」パネル。 */
.event-detail,
.case-detail {
margin: 40px 0;
padding: 34px clamp(20px, 4vw, 54px) 30px;
border-radius: 16px;
background: var(--blue-pale, #eaf2fb);
}
.event-detail__title,
.case-detail__title {
margin: 0 0 26px;
padding-bottom: 12px;
color: var(--navy, #00368f);
font-size: 1.125rem;
font-weight: 800;
text-align: center;
}
/* 見出し下の二色ライン（紺→赤）。他セクションの見出しと同じ表現。 */
.event-detail__title,
.case-detail__title { position: relative; }
.event-detail__title::after,
.case-detail__title::after {
content: "";
position: absolute;
left: 50%;
bottom: 0;
transform: translateX(-50%);
width: 96px;
height: 2px;
background: linear-gradient(90deg, var(--navy, #00368f) 0 60%, var(--cta-deep, #de0039) 60% 100%);
}
.event-detail__list,
.case-detail__list { margin: 0; }
/* 0910_3カンプ p.6 実測：ラベル13.4px・行の上下はゆったり・区切りは細い青線。
ラベル列は1カラム化（AUN #23）で座布団が広くなったため、em ではなく px で固定する。 */
.event-detail__row,
.case-detail__row {
display: grid;
grid-template-columns: 132px 1fr;
gap: 0 28px;
padding: 20px 0;
}
.event-detail__row + .event-detail__row,
.case-detail__row + .case-detail__row { border-top: 1px solid rgb(0 54 143 / .22); }
.event-detail__label,
.case-detail__label {
margin: 0;
color: var(--navy, #00368f);
font-size: .875rem;
font-weight: 700;
line-height: 1.9;
}
.event-detail__value,
.case-detail__value {
margin: 0;
color: var(--ink, #1a1a1a);
font-size: .9375rem;
line-height: 1.9;
}
/* 公演内容の箇条書き。カンプは行頭「・」。 */
.event-detail__program { margin: 0; padding: 0; list-style: none; }
.event-detail__program li { padding-left: 1em; text-indent: -1em; }
.event-detail__program li::before { content: "・"; }
@media (max-width: 767px) {
/* 横並びだとラベルが窮屈なので、SPは上下に積む。 */
.event-detail__row,
.case-detail__row { grid-template-columns: 1fr; gap: 4px; }
.event-detail,
.case-detail { padding: 26px 20px 22px; }
}
/* --- イベントの開催概要（旧・現在は未使用。既存記事の互換のため残す） --- */
.event-meta {
width: 100%;
margin: 0 0 26px;
border-collapse: collapse;
font-size: .9rem;
line-height: 1.8;
}
.event-meta th,
.event-meta td { padding: 12px 14px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.event-meta th {
width: 7.5em;
background: #f3f7fb;
color: var(--navy);
font-weight: 700;
white-space: nowrap;
}
.event-meta tr:first-child th,
.event-meta tr:first-child td { border-top: 1px solid var(--line); }
.event-apply { margin: 0 0 26px; text-align: center; }
/* --- 固定ページ共通（0831カンプ p.13 / p.14） --- */
.p-page__body { color: #14324f; line-height: 1.95; }
.p-page__body > *:first-child { margin-top: 0; }
.p-page__body h2 { margin: 2em 0 .6em; color: var(--navy); font-size: 1.175rem; font-weight: 800; }
.p-page__body h3 { margin: 1.6em 0 .5em; color: var(--navy); font-size: 1.05rem; font-weight: 800; }
.p-page__body p { margin: 0 0 1.4em; }
.p-page__body ul, .p-page__body ol { margin: 0 0 1.4em 1.4em; }
.p-page__body li { margin-bottom: .5em; }
.p-page__body a { color: var(--blue-bright, #0098d9); text-decoration: underline; }
.p-page__form { margin-top: 32px; }
/* CRM埋め込み前の確認用プレースホルダー */
.p-page__form--ph {
display: flex;
align-items: center;
justify-content: center;
min-height: 320px;
background: #e6e6e6;
border-radius: 8px;
color: var(--cta-deep, #de0039);
font-weight: 800;
}
/* --- 404 --- */
.p-404 { text-align: center; }
.p-404__lead { margin: 0 0 10px; color: var(--navy); font-size: 1.15rem; font-weight: 800; }
.p-404__text { margin: 0 0 28px; color: var(--muted); font-size: .9rem; }
.p-404__links { display: flex; flex-wrap: wrap; gap: 10px 24px; justify-content: center; list-style: none; margin: 0; padding: 0; }
.p-404__links a { color: var(--blue-bright, #0098d9); font-weight: 700; font-size: .9rem; }
/* --- ページャー --- */
.case-pager { display: flex; justify-content: center; gap: 12px; margin-top: 40px; }
.case-pager .page-numbers {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 34px;
height: 34px;
padding: 0 6px;
border-radius: 50%;
color: var(--navy);
font-weight: 800;
font-size: .95rem;
text-decoration: none;
}
.case-pager .page-numbers.current { background: var(--navy); color: #fff; }
.case-pager a.page-numbers:hover { background: rgba(0, 54, 143, .1); }
/* --- 下部CTAバナー --- */
/* 0831カンプ実測：箱 489x184・上だけ角丸24・下は角のまま。左右は2pxだけ空ける。
ボタンは 271x52・白フチ2px・右端に白リングの▶。 */
/* カンプ実測：バナー下端からフッターのロゴまで約86px（フッター側padding 56 + ここで30）。 */
/* 下は詰める（フッター上の余白が空きすぎて見えていた）。 */
.cta-banner { padding: 56px 0 0; }
.cta-banner__grid { display: grid; gap: 2px; }
.cta-banner__box {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 20px;
min-height: 184px;
padding: 28px 20px;
border-radius: 24px 24px 0 0;
text-align: center;
}
.cta-banner__box--dl { background: var(--navy); }
.cta-banner__box--contact { background: var(--blue-bright, #0098d9); }
.cta-banner__title { margin: 0; color: #fff; font-size: 1.15rem; font-weight: 800; }
.cta-banner .btn {
position: relative;
min-width: min(271px, 100%);
min-height: 52px;
padding: 0 56px 0 32px;
border: 2px solid #fff;
border-radius: 999px;
color: #fff;
font-weight: 800;
font-size: .95rem;
/* カンプはボタンの下に影が落ちている（平面ではない）。 */
box-shadow: 0 6px 14px rgb(0, 0, 0, .2);
}
/* カンプ実測：上下2色のベタ（境目は50%でハッキリ割る）＋白フチ＋影。
フラットな1色だと平面に見えるため、ヘッダーCTAと同じ作りに揃える。
資料DL 上 #e74770 / 下 #de0039
お問合せ 上 #476dae / 下 #00368f */
.cta-banner__box--dl .btn {
background: linear-gradient(180deg, #e74770 0 50%, var(--cta-deep, #de0039) 50% 100%);
}
/* 固定ページのSPは、下部CTAバナーを出さない。
0831 SPカンプ：一覧・詳細（p.6〜p.13）には有るが、
フォーム系の固定ページ（p.14 資料ダウンロード / p.15 お問い合わせ）には無い。
PCと、一覧・詳細ページのSPでは従来どおり表示する。 */
@media (max-width: 767px) {
body.page .cta-banner { display: none; }
}
.cta-banner__box--contact .btn {
background: linear-gradient(180deg, #476dae 0 50%, var(--navy, #00368f) 50% 100%);
}
/* ホバーの中身はファイル末尾の「リンク・ボタンのホバーを全体で揃える」に集約。
ここでは動きの速さだけ決めておく。 */
.cta-banner .btn { transition: transform .2s ease, box-shadow .2s ease, background .2s ease; }
/* アイコン：白リングの丸に白い▶（塗りつぶしの白丸＋▼ではない） */
.cta-banner .btn::after {
content: "\25B6";
position: absolute;
right: 14px;
top: 50%;
transform: translateY(-50%);
display: flex;
align-items: center;
justify-content: center;
width: 26px;
height: 26px;
border: 2px solid #fff;
border-radius: 50%;
font-size: 9px;
line-height: 1;
}
.case-list {
display: grid;
grid-template-columns: 1fr;
gap: 20px;
}
@media (min-width: 768px) {
.p-archive-hero { padding: 0 0 60px; }
.case-panel { padding: 40px 65px 50px; }
.case-list { grid-template-columns: repeat(3, 1fr); gap: 36px; }
.cta-banner__grid { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 600px) { .case-list { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px) { .case-list { grid-template-columns: repeat(3, 1fr); } }
/* ── FAQアーカイブ（/faq/）── caseのフィルタをミラー、一覧は白背景アコーディオン ── */
.p-faq-archive { padding-block: clamp(40px, 8vw, 72px); }
.p-faq-archive__title {
text-align: center;
font-size: clamp(1.6rem, 5vw, 2.4rem);
font-weight: 800;
}
.faq-filter { margin: 24px 0 32px; }
.faq-filter__list {
display: flex;
flex-wrap: wrap;
gap: 10px;
justify-content: center;
}
.faq-filter__link {
display: inline-block;
padding: 8px 18px;
background: #fff;
border: 1px solid var(--line);
border-radius: 999px;
font-size: 0.85rem;
font-weight: 700;
font-family: inherit;
line-height: 1.4;
color: var(--muted);
cursor: pointer;
transition: background-color .2s, color .2s, border-color .2s;
}
.faq-filter__link:hover,
.faq-filter__link.is-current {
background: var(--blue);
border-color: var(--blue);
color: #fff;
}
/* JS絞り込みで非表示 */
.faq-item.is-hidden { display: none; }
.p-faq-archive__empty { text-align: center; color: var(--muted); padding: 32px 0; }
/* アーカイブではリビール無効（絞り込みで表示した下方の項目が opacity:0 のまま消えるのを防ぐ） */
.js .p-faq-archive .faq-item { opacity: 1; transform: none; }
/* ページネーション（the_posts_pagination） */
.pagination { margin-top: 44px; }
.pagination .nav-links {
display: flex;
flex-wrap: wrap;
gap: 8px;
justify-content: center;
}
.page-numbers {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 42px;
height: 42px;
padding: 0 12px;
background: #fff;
border: 1px solid var(--line);
border-radius: 8px;
font-weight: 700;
}
.page-numbers.current { background: var(--blue); border-color: var(--blue); color: #fff; }
.page-numbers.dots { border: 0; background: none; }
/* 活用事例 詳細（single-case.php） */
/* ============================================================
導入事例 詳細（0831カンプ p.6 実測）
コンテンツ980 ＝ メイン679 ＋ 間42 ＋ サイド259
記事パネル内側65 ／ プランタブ 146x42・パネル上端に接地・左78
============================================================ */
.p-case-single { padding-bottom: clamp(32px, 6vw, 56px); }
/* 0910_3カンプ p.6：座布団の天面にツライチ、下だけ角丸のタブ（幅169・高さ45）。
inline-block だと負のマージンが効かないので block ＋ width:max-content。 */
.case-single__tab {
display: block;
width: max-content;
min-width: 169px;
max-width: 100%;
margin: calc(var(--panel-pad-top, 34px) * -1) 0 24px;
padding: 12px 24px;
background: var(--navy);
color: #fff;
font-size: .8125rem;
font-weight: 800;
line-height: 1.4;
text-align: center;
border-radius: 0 0 10px 10px;
}
.case-single__tab--right { background: var(--blue-bright, #0098d9); }
/* 2カラムは「980がそのまま入る幅」以上でだけ組む。
コンテナは min(980, 100% - gutter*2) なので、980が収まるのは 1028px 以上。
それ未満で 679px 固定のまま組むと右サイドがはみ出して横スクロールが出る。 */
.case-single__layout { display: grid; gap: 42px; }
.case-single__main {
--panel-pad-top: 34px;
--panel-pad-x: 24px;
padding: var(--panel-pad-top) var(--panel-pad-x) 44px;
background: #fff;
border-radius: 16px;
box-shadow: 0 6px 24px rgba(0, 40, 90, .10);
}
/* 文字サイズは 0831カンプ p.6 の字幅から実測（日本語は1字=1em で割り出し）
タイトル22 / タグ14 / サブリード16 / 本文14.7
------------------------------------------------------------
記事冒頭は 日付 → 会社名 → タイトル → カテゴリ → リード → 写真 と
6つの要素が続くので、間隔が詰まっていると一塊に見えて読みにくい。
役割の切れ目（会社名とタイトルの間、リードと写真の間）を広く取る。 */
.case-single__date { display: block; margin-bottom: 10px; color: var(--muted); font-size: .95rem; font-weight: 700; }
/*
* 導入事例のタイトル周り（AUN #7「表示順とテキストのメリハリ」）。
* タイトル＞会社名＞日付 の順にはっきり差を付ける。
* タイトル 28px 紺 800 ／ 会社名 16px 紺 700 ／ 日付 13px グレー
* 会社名と日付は1行のメタ情報にまとめ、中黒で区切る。
*/
.single-case .case-single__title { font-size: clamp(1.375rem, 2.6vw, 1.75rem); line-height: 1.45; margin-bottom: 14px; }
.case-single__meta { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; margin: 0 0 20px; }
.case-single__meta .case-single__client { margin: 0; font-size: 1rem; font-weight: 700; color: var(--navy); }
.case-single__meta .case-single__date { display: inline; margin: 0; font-size: .8125rem; font-weight: 500; color: var(--muted, #7a7a7a); }
/* 会社名。0831カンプ p.7 実測：8字で幅177.8 ＝ 22px・紺・太字。
日付の下、カテゴリの上に入る。「様」はテンプレート側で付けている。 */
.case-single__client { margin: 0 0 20px; color: var(--navy); font-size: 1.375rem; font-weight: 800; line-height: 1.4; }
/* 記事タイトル。カンプ（PC p.6）は Noto Sans JP Bold＝700。800だと潰れて重く見えていた。 */
.case-single__title { margin: 0 0 20px; color: var(--navy); font-size: clamp(1.25rem, 3.4vw, 1.375rem); font-weight: 700; line-height: 1.55; }
/* 会社名を取材先サイトへリンクさせたとき（AUN #26「リンクアイコンを入れる」）。
別タブで開くことが伝わるよう、社名のうしろに小さな外部リンクアイコンを添える。
アイコンは currentColor で描いた SVG なので、ホバーで色が変わればアイコンも追従する。 */
.case-single__client-link { color: inherit; text-decoration: none; }
.case-single__client-icon {
display: inline-block;
/* .62em（約11px）では小さすぎた（本多さん指摘）→ 文字の高さ程度の .95em（約16px）に */
width: .95em;
height: .95em;
margin-left: .3em;
vertical-align: -.1em;
background: currentColor;
-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M14 3h7v7h-2V6.41l-9.29 9.3-1.42-1.42 9.3-9.29H14V3Z'/%3E%3Cpath d='M5 5h5v2H6v11h11v-4h2v6H4V5h1Z'/%3E%3C/svg%3E") no-repeat center / contain;
mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M14 3h7v7h-2V6.41l-9.29 9.3-1.42-1.42 9.3-9.29H14V3Z'/%3E%3Cpath d='M5 5h5v2H6v11h11v-4h2v6H4V5h1Z'/%3E%3C/svg%3E") no-repeat center / contain;
}
@media (hover: hover) {
.case-single__client-link:hover { color: var(--blue-bright, #0098d9); text-decoration: underline; text-underline-offset: .25em; }
.case-single__client-link:hover .case-single__client-icon { text-decoration: none; }
}
/* 読み上げ専用のテキスト（画面には出さない） */
.u-visually-hidden {
position: absolute !important;
width: 1px;
height: 1px;
margin: -1px;
padding: 0;
border: 0;
overflow: hidden;
clip: rect(0 0 0 0);
clip-path: inset(50%);
white-space: nowrap;
}
.case-single__cats { display: flex; flex-wrap: wrap; gap: 10px; list-style: none; margin: 0 0 24px; padding: 0; }
.case-single__cats a {
display: inline-block;
padding: 3px 18px;
border: 1px solid var(--blue-bright, #0098d9);
border-radius: 999px;
color: var(--blue-bright, #0098d9);
font-size: .875rem;
font-weight: 700;
text-decoration: none;
}
/* 最新情報の詳細：TOP・一覧と同じ塗りのピル（枠線ピルではない）。 */
.case-single__cats--news { margin: 0 0 14px; }
.case-single__cats--news a {
display: inline-block;
width: auto;
min-width: 97px;
padding: 4px 18px;
border: 0;
border-radius: 999px;
color: #fff;
font-size: .8125rem;
font-weight: 700;
line-height: 1.5;
text-align: center;
text-decoration: none;
}
/* タイトルの下のリード。
0910_3カンプ p.6 実測：タイトル22px に対してサブ見出しは17.4px。
以前は 19px・太さ800 でタイトルとほぼ同じ存在感になっていたため、
ひと回り小さく・太字をやめて主従をはっきりさせる。 */
.case-single__lead {
/* 本文（アイキャッチ以降）との区切りに細い罫を1本引く。
色は水色で、利用イメージのリード（.p-usecase__lead）と同じ言語。 */
margin: 0 0 32px;
padding-bottom: 16px;
border-bottom: 1px solid var(--blue-bright, #0098d9);
color: var(--navy);
font-size: 1.0625rem;
font-weight: 400;
line-height: 1.7;
}
.case-single__sublead { margin: 0 0 15px; color: var(--blue-bright, #0098d9); font-size: 1rem; font-weight: 700; }
/* --- 導入事例のタイトルまわり（1カラム） ---
並びは 日付＋カテゴリー（同じ行） → タイトル → 会社名 → リード → アイキャッチ。 */
.case-single__metarow {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 10px 16px;
margin: 0 0 14px;
}
.case-single__metarow .case-single__date { margin: 0; }
.case-single__metarow .case-single__cats { margin: 0; }
.single-case .case-single__client { margin: 0 0 18px; font-size: 1.0625rem; font-weight: 700; }
.case-single__thumb { margin: 0 0 36px; border-radius: 10px; overflow: hidden; }
.case-single__thumb img { display: block; width: 100%; height: auto; }
.case-single__body { font-size: .92rem; line-height: 1.95; }
.case-single__body p { margin: 0 0 1.2em; }
.case-single__back { margin-top: 40px; text-align: center; }
/* --- サイド --- */
/* 積み上がった時は横並びにして、縦に伸びすぎないようにする */
.case-single__side { display: grid; gap: 20px; align-content: start; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
/* 資料DL誘導。0831カンプ実測：
箱 259x261 / 角丸12 / 縦グラデ #00368f→#0098d9 / 内側16-18
資料イメージ 幅223（支給素材） ／ 赤ピル 207x39 */
.case-single__dl {
display: flex;
flex-direction: column;
align-items: center;
gap: 12px;
min-height: 261px;
padding: 16px 18px 28px;
background: linear-gradient(180deg, var(--navy) 0%, #0060ae 55%, var(--blue-bright, #0098d9) 100%);
border-radius: 12px;
text-decoration: none;
}
.case-single__dl-doc {
display: block;
width: 100%;
height: auto;
border-radius: 4px;
box-shadow: 0 4px 12px rgba(0, 0, 0, .18);
}
.case-single__dl-doc--ph {
display: flex;
align-items: center;
justify-content: center;
aspect-ratio: 223 / 167;
background: #fff;
color: var(--muted);
font-size: .72rem;
font-weight: 700;
}
.case-single__dl-btn {
display: flex;
align-items: center;
justify-content: center;
width: min(207px, 100%);
min-height: 39px;
margin-top: auto;
padding: 0 12px;
background: var(--cta-deep, #de0039);
border: 2px solid rgba(255, 255, 255, .55);
border-radius: 999px;
color: #fff;
font-size: .76rem;
font-weight: 800;
line-height: 1.3;
text-align: center;
}
.case-single__dl:hover .case-single__dl-btn { opacity: .9; }
@media (min-width: 768px) {
.case-single__main { --panel-pad-top: 54px; --panel-pad-x: 65px; padding: var(--panel-pad-top) var(--panel-pad-x) 64px; }
}
/*
* 記事本文は1カラム（AUN #23「右カラムが狭いので、1カラムだといかがでしょう？」）。
* 関連記事・資料バナーは本文の下に横並びで置く。
* 2カラムに戻す場合は下の grid-template-columns を復活させる。
*/
@media (min-width: 1028px) {
.case-single__layout { grid-template-columns: minmax(0, 1fr); }
.case-single__side {
/* 本文の下に回るので、カード3枚を横に並べる。 */
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
gap: 24px;
position: static;
}
}
/* ============================================================
ブロックパターン ブリッジ（コアブロックをテーマ調に）
============================================================ */
/* コアボタン → テーマの btn 見た目 */
.p-top .wp-block-button__link {
/* display: inline-flex; */
align-items: center;
justify-content: center;
min-height: 48px;
padding: 0 28px;
border-radius: 10px;
font-weight: 700;
line-height: 1.3;
text-decoration: none;
border-bottom-right-radius: 0;
border-bottom-left-radius: 0;
}
.hero .wp-block-buttons { justify-content: center; }
.hero .wp-block-button__link { background: var(--cta); color: #fff; box-shadow: 0 6px 16px rgb(226,35,26,.25); }
.p-top__lineup .wp-block-button__link { background: #fff; color: var(--blue); border: 1.5px solid var(--blue); }
/* TOPの座布団どうしの間隔。
基準は「前のセクションの最後の要素の下端 → 次のセクションの英字見出しの上端」。
ここを全ての境目で 112〜117px に揃える（実測で合わせている）。
セクションごとに中身の余り方が違うので、パディングは一律ではなく
この基準値から逆算した値を入れている。
お役立ち資料 → 導入事例 … 117
導入事例 → イベント情報 … 112
イベント情報 → 最新情報 … 117
FAQ だけは見出しが縦中央に置かれる別レイアウトなので、
セクション同士の隙間（88px）で合わせる。 */
.p-top__doc,
.p-top__cases,
.p-top__event,
.p-top__news,
.p-top__faq { padding-block: var(--sp-section); }
/* 見出しの上に帯のグラデーションぶんの余白があるので、上は詰めてよい。 */
.p-top__lineup { padding-top: var(--sp-section); }
.p-top__event { padding-top: var(--sp-sm); }
.p-top__doc { padding-bottom: var(--sp-lg); }
.p-top__news { padding-top: var(--sp-lg); padding-bottom: var(--sp-lg); }
/* 導入事例→イベント情報の間が空きすぎていたので、座布団の下側も詰める。 */
.p-top__cases { padding-bottom: var(--sp-md); }
/* SPのセクション間隔。0910_2 SPカンプ p.1 実測
（「一覧を見る」の文字下端 → 次セクションの英字見出しの文字上端）:
導入事例 → イベント情報 93 ／ イベント情報 → 最新情報 100 ／ 最新情報 → FAQ 119
トークンの最小値（SPで効く側）のままだと 74 / 85 / 85 で足りないため、
この3つの境目だけ実測値から逆算した padding を入れる。 */
@media (max-width: 767px) {
.p-top__cases { padding-bottom: 30px; }
.p-top__event { padding-top: 21px; padding-bottom: 44px; }
.p-top__news { padding-top: 35px; padding-bottom: 45px; }
.p-top__faq { padding-top: 53px; }
}
/* 導入事例の「一覧を見る」。カンプ p.1 実測では
カード最終行（会社名）の下端 → ボタン上端が73px。共通の28pxだと詰まって見える。 */
.p-top__cases .section-more { margin-top: 55px; }
/* 見出しとカードの間。スマホが帯の上へ25pxはみ出すぶん、見た目の余白が
その分詰まって見えるので、はみ出し量を足した値を入れている。
（見出し下の罫 → スマホ天面が実測95px、→ 帯の上端が120px） */
.p-top__lineup .section-head { margin-bottom: 120px; }
/* サービス詳細〜「業務で車両を…」〜機能セクションの間隔。
カンプ実測では ボタン下端 → 見出し で約90px。従来は 236px 空いていた
（座布団の下パディング88＋カードの下マージン24＋columnsの下マージン28
＋機能セクションの上パディング72）。ここを詰めて釣り合いを取る。 */
.p-top__lineup { padding-bottom: 24px; }
.p-top__lineup .wp-block-columns { margin-bottom: 0; }
.p-top__lineup .lineup__card { margin-bottom: 0; }
/* lineup（コアcolumns） */
.p-top__lineup .wp-block-columns { gap: 20px; align-items: stretch; }
/* SPはカードが縦に積まれる。20pxだと下のカードのスマホが上のカードのボタンに
ぶつかって見えるので、カンプ実測(31px)に合わせて広げる。 */
@media (max-width: 781px) {
.p-top__lineup .wp-block-columns { row-gap: 32px; }
}
.p-top__lineup .wp-block-column { display: flex; }
.p-top__lineup .lineup__card { width: 100%; }
/* section-head 内のコア見出し（ブロックエディタで置いた h2）
margin:0 だと .section-head__ja の左右 auto（中央寄せ）を打ち消してしまうため、
上下だけ 0 にして左右は auto を残す。 */
.section-head .wp-block-heading {
margin-block: 0;
margin-inline: auto;
color: #00368f;
}
/* FAQ：コアの詳細ブロック（details）をアコーディオン調に */
.faq { background: #fff; border-radius: var(--radius); overflow: hidden; }
.faq .faq-item { border-bottom: 1px solid var(--line); }
.faq .faq-item:last-child { border-bottom: 0; }
.faq-item summary {
list-style: none;
cursor: pointer;
display: flex;
align-items: center;
gap: 10px;
padding: 20px;
font-weight: 700;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::before { content: "Q."; color: var(--blue); font-weight: 800; }
.faq-item summary::after { content: "＋"; margin-left: auto; color: var(--blue); }
.faq-item[open] summary::after { content: "−"; }
.faq-item > :not(summary) { margin: 0; padding: 0 20px 20px; color: var(--muted); }
/* 開いた時に回答をふわっとスライドダウン表示（native details は即開くので中身をアニメ） */
@keyframes faq-open {
from { opacity: 0; transform: translateY(-8px); }
to { opacity: 1; transform: translateY(0); }
}
.faq-item[open] > :not(summary) {
animation: faq-open .32s var(--ease-appear, cubic-bezier(.4, .4, 0, 1)) both;
}
/* ＋/− マーカーもふわっと切り替わるように */
.faq-item summary::after { transition: transform .25s ease, opacity .2s ease; }
.faq-item[open] summary::after { transform: scale(1.15); }
/* ============================================================
レスポンシブ（PC）
============================================================ */
@media (min-width: 768px) {
.menu-toggle { font-size: .85rem; }
.lineup { grid-template-columns: 1fr 1fr; }
/* PCはコンテナ内にちょうど3枚が収まる幅にする（本番サイト実測：間40px）。
固定幅だと3枚目が右で見切れるため、間隔を引いた1/3で算出する。 */
.slider { gap: 40px; scroll-padding-left: 0; }
.slider__item { width: calc((100% - 80px) / 3); }
.event-card { grid-template-columns: 5fr 6fr; align-items: center; }
.event-card__thumb { height: 100%; aspect-ratio: auto; }
.p-top__event .event-card { grid-template-columns: 1fr; padding: 20px; }
.p-top__event .event-card__link {display: grid;grid-template-columns: 5fr 6fr;align-items: center;gap: 20px;justify-content: center;}
.p-top__event .event-card__thumb { aspect-ratio: 16 / 10; height: auto; margin-bottom: 0; }
.p-top__event .event-card__body { padding: 8px 12px; }
.global-menu__cta { max-width: 520px; }
/* リーガルリンクはPCのみ横並び（SPは縦積み） */
.global-menu__legal-list { display: flex; flex-wrap: wrap; gap: 10px 24px; }
/* タブ型メニューがヘッダーの天面〜下端を基準に伸びられるよう、この行自体を縦いっぱいに。 */
.site-header__right { display: flex; align-self: stretch; align-items: center; gap: 12px; }
.site-header__cta { display: flex; align-items: center; gap: 12px; }
/* 追従バナー：PCは画面右端に縦積みカードで表示（SPは下部横並びのまま） */
.sticky-bar {
inset: 50% 0 auto auto;
flex-direction: column;
width: 92px; /* コンプ実測 */
border-radius: 15px 0 0 15px;
transform: translate(100%, -50%);
}
.sticky-bar.is-visible { transform: translate(0, -50%); }
.sticky-bar__btn { min-height: 195px; padding: 22px 10px; align-content: center; gap: 0; }
.sticky-bar__name { display: block; font-size: .8rem; line-height: 1.45; }
/* カンプ：名前の下に細い区切り線 → ▶の丸 → 詳細を見る（ピル枠ではない） */
.sticky-bar__icon {
display: flex;
position: relative;
width: 24px;
height: 24px;
margin: 30px auto 4px;
border: 1.5px solid #fff;
background: none;
font-size: .55rem;
}
.sticky-bar__icon::before {
content: "";
position: absolute;
top: -18px;
left: 50%;
transform: translateX(-50%);
width: 46px;
height: 1px;
background: rgb(255, 255, 255, .6);
}
.sticky-bar__sub { border: 0; border-radius: 0; padding: 0; margin: 0; font-size: .72rem; }
/* 右端に出るので、下部固定用の逃げ余白は不要 */
.site-footer { margin-bottom: 0; }
/* メニューオーバーレイ：PCは2カラムリンクリスト＋幅を抑えて中央寄せ */
/* PCは新版コンプ準拠：パネルを右側に置き、画面右端から57px浮かせる。
四隅R48の浮きカードで、右からスライドイン。（SPは従来どおり左から） */
.global-menu {
left: auto;
right: 0; /* 画面の右端にぴったり付ける */
width: 709px;
height: 90dvh; /* 中身の量に関わらず画面の8割の高さを確保 */
max-height: calc(100dvh - var(--header-h, 64px) - 20px);
border-radius: 48px 0 0 48px; /* 右端に接するので左側だけ角丸 */
transform: translateX(100%);
}
/* 高さを固定した分、中身は上下中央に置く（余白が下に溜まって見えないように）。
safe を付けると、中身が高さを超えた時に上が切れずスクロールできる。 */
.global-menu__inner {
display: flex;
flex-direction: column;
justify-content: safe center;
}
.global-menu.is-open { transform: translateX(0); }
/* PCはメニューを開いてもページをスクロールできるようにする（パネルは浮きカードなので背面が見えている） */
/* PCでも背面のスクロールは止める（本多さんの指示 2026-09-10）。
以前は「パネルが浮きカードで背面が見えているから」動かせるようにしていたが、
メニュー展開中に裏がスクロールすると位置を見失うため統一した。
横ズレ防止の padding-right は main.js 側で入れている。 */
.global-menu__plans { max-width: 520px; gap: 20px; }
.global-menu__list { column-gap: 32px; }
}
/* ============================================================
デザインシステム更新（0808コンプ準拠）
座布団 / 角丸写真 / 2色下線見出し / カバーヒーロー
============================================================ */
/* ---- ハンバーガー⇄✕ 変形ボタン（青丸＋白ライン。開くと同じボタンが✕に変形） ---- */
/*
* ヘッダーのメニューボタン。
*
* 先方提示の参考2サイト（pawpark.jp / art NIKKEI）を実測したところ、
* どちらも共通して
* ・ベタ塗り（白抜きではない）
* ・アイコンの下に MENU の文字を重ねる
* ・他のボタンと揃えず、独立したブロックとして置く
* ・周囲より一回り大きい
* という作りで目立たせていた（art NIKKEI は 70x62 の水色ベタ）。
* 隣のCTAと高さ・形を揃えると逆に埋もれるため、ここでは
* 紺のベタ塗りでヘッダーの高さいっぱいに立て、間隔も広く取る。
* 色は赤（CTA）と競合させないため紺。
*/
.menu-toggle {
position: relative;
display: inline-flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 7px;
width: 76px;
/* 全角丸のボタン。ヘッダーからはみ出さず、行の中で独立したブロックに見せる。
色はメニューパネル上端（#f0f3f8）と同じにして、開いたときに面がつながる。 */
align-self: center;
margin: 0 0 0 16px;
/* 76×72。上下の余白を広めに取って、隣のCTAより一回り大きく見せる。 */
padding: 16px 0 15px;
/* 見た目はフッターのボタン（.site-footer__cta .btn--outline）と揃える。
白地・水色1.5px枠・角丸10px・紺文字。 */
background: #fff;
border: 1.5px solid var(--blue-bright, #0098d9);
border-radius: 10px;
color: var(--navy, #00368f);
cursor: pointer;
transition: background-color .45s ease, color .45s ease, border-color .45s ease;
}
.menu-toggle__label {
font-size: .8125rem;
font-weight: 900;
letter-spacing: .12em;
line-height: 1;
color: inherit;
}
/* ホバーもフッターのアウトラインボタンと同じ：水色で塗りつぶして白文字。 */
@media (hover: hover) {
.menu-toggle:hover {
background: var(--blue-bright, #0098d9);
border-color: var(--blue-bright, #0098d9);
color: #fff;
}
}
/* 開いている間は「押されている」状態として塗りつぶしのまま残す。 */
body.is-menu-open .menu-toggle {
background: var(--blue-bright, #0098d9);
border-color: var(--blue-bright, #0098d9);
color: #fff;
}
.menu-toggle:focus-visible { outline: 3px solid var(--blue-bright, #0098d9); outline-offset: 2px; }
.menu-toggle__lines {
position: relative;
display: block;
width: 34px;
height: 22px;
}
.menu-toggle__lines span {
position: absolute;
left: 0;
right: 0;
/* 3pxだと細く見えるので4pxに（本多さん指摘）。 */
height: 4px;
background: currentColor;
border-radius: 2px;
transition: background-color .45s ease, transform .3s ease, opacity .2s ease;
}
.menu-toggle__lines span:nth-child(1) { top: 0; }
.menu-toggle__lines span:nth-child(2) { top: 9px; }
.menu-toggle__lines span:nth-child(3) { top: 18px; }
/* SPも同じ太さで（細い線は小さい画面ほど目立たないため） */
@media (prefers-reduced-motion: reduce) {
.menu-toggle::after { transition: opacity .45s ease; transform: translateX(-50%) scaleX(1); }
}
/* SPはヘッダーが低いので、伸ばさず中央に収める。 */
@media (max-width: 767px) {
.menu-toggle {
align-self: center;
margin: 0 0 0 8px;
width: 62px;
gap: 6px;
padding: 13px 0 12px;
border-radius: 12px;
}
.menu-toggle__lines { width: 28px; height: 20px; }
.menu-toggle__lines span:nth-child(2) { top: 8px; }
.menu-toggle__lines span:nth-child(3) { top: 16px; }
.menu-toggle::after { bottom: 3px; width: 34px; }
}
/* 開いている間は3本線を✕へ */
/* コンプではメニューを開いてもヘッダーは☰のまま（閉じるのはパネル内の×）ため変形させない */
/* メニュー表示中はヘッダーをオーバーレイ(z-index:300)より前面に＝同じボタンが✕として残り、位置がズレない */
body.is-menu-open .site-header {
z-index: 320;
border-bottom-color: transparent;
}
/* ---- 見出し 2色下線（青→赤） ---- */
.section-head__ja {
position: relative;
padding-bottom: 16px;
}
/* 2色下線。カンプ実測では「見出しの文字幅と同じ長さ」（72px固定ではない）。
例）TOP「導入事例」 文字72px / 下線76px
Pro「〜の特徴」 文字224px / 下線223px
見出しを inline-block にした上で width:100% にすると文字幅に自動追従する。 */
.section-head__ja::after {
content: "";
position: absolute;
left: 0; right: 0; bottom: 0;
width: 100%; height: 3px;
background: linear-gradient(90deg, var(--blue) 0 50%, var(--cta) 50% 100%);
}
/* 濃色背景のセクション用。下線の青half（#0098d9）が背景に溶けて消えるため白に反転する。
背景がネイビー／濃青のセクションでは .section-head に --invert を足すこと。 */
.section-head--invert .section-head__ja { color: #fff; }
.section-head--invert .section-head__ja::after {
background: linear-gradient(90deg, #fff 0 50%, var(--cta) 50% 100%);
}
/* ---- 座布団セクション（青系グラデ）----
SP : 画面全幅・上だけ角丸（コンプ実測：SP390pxで左右余白なし）
PC : 980pxの独立した島・四隅角丸（コンプ実測：1280px中で左右150pxずつ空く）
地色（--shiki-grad）と、その上に載る見出しの色（--shiki-head）をセットで持つ。
ページによって色を変えたい時は、**セクションに対して**この2変数を上書きする。
ページ全体（.p-pro など）に上書きすると、座布団に載っていない見出し
（Proの「Features」＝白背景）まで白文字になって消えるので注意。 */
.p-top__lineup,
.p-top__cases,
.p-top__articles,
.p-top__news {
--shiki-grad: var(--grad-aqua);
--shiki-head: var(--blue);
background: var(--shiki-grad) !important;
border-radius: 32px 32px 0 0;
}
.p-top__lineup .section-head__ja,
.p-top__cases .section-head__ja,
.p-top__articles .section-head__ja,
.p-top__news .section-head__ja { color: var(--shiki-head); }
/* Pro / Right の導入事例だけ紺の座布団。
カンプ実測（pc0817_2 4ページ目）で、Proの導入フローと同じグラデだった。
見出し「導入事例」も白に反転する。 */
.p-pro .p-top__cases {
--shiki-grad: var(--grad-navy);
--shiki-head: #fff;
}
@media (min-width: 768px) {
.p-top__lineup,
.p-top__cases,
.p-top__articles,
.p-top__news {
width: min(var(--shiki), 100% - var(--gutter) * 2);
margin-inline: auto;
margin-bottom: 24px;
border-radius: 32px;
}
}
/* ---- 導入事例：Right/Pro プランタグ ----
0831カンプ実測（TOP p.1 / 一覧 p.5 共通）：64x24・カード左端から19px。
カードの上端とバッジの上端が同じ位置で、**上の角は角なし・下だけ角丸**。
つまりカードの縁からぶら下がる形。四隅を丸めた独立バッジにしないこと。
バッジ下端と写真上端の間は16px。 */
.case-card__plan {
/* inline-block だと行送りの分だけ上に隙間が出て、カード上端から浮いてしまう。
ぶら下がりを成立させるため block + width:max-content にする。 */
display: block;
width: max-content;
max-width: calc(100% - 38px);
margin: 0 0 0 19px;
padding: 3px 21px;
border-radius: 0 0 6px 6px;
color: #fff;
font-size: .78rem;
font-weight: 800;
line-height: 1.4;
background: var(--blue);
}
/* バッジがある時は、写真の上マージンをバッジとの間隔（16px）に使う */
.case-card__plan + .case-card__thumb { margin-top: 16px; }
.case-card__plan--pro { background: var(--navy); }
.case-card__plan--right { background: var(--blue); }
/* お役立ち記事・最新情報のカードは、同じ位置のバッジが日付になる（0831カンプ p.7/p.9） */
.case-card__plan--date { background: var(--navy); font-family: inherit; letter-spacing: .02em; }
/* イベントは開催状況で色が変わる（0831カンプ p.12 実測）
予約受付中 #de0039（赤） ／ 開催終了 #808080（グレー）
紺のままだと両者が見分けられないので必ず出し分けること。 */
.case-card__plan--accepting { background: var(--cta-deep, #de0039); }
.case-card__plan--closed { background: #808080; }
/* ---- 情報カード（お役立ち記事・最新情報）：日付ネイビーバッジ＋抜粋 ---- */
/* バッジはサムネではなくカード基準で配置（導入事例のPro/Rightタグと同じ考え方）。
サムネにマージンが付いてもカード上端をまたぐ位置を保つ。 */
.info-card { position: relative; }
.info-card__thumb { display: block; }
.info-card__date-badge {
position: absolute;
top: 0;
left: 12px;
z-index: 2;
background: var(--blue);
color: #fff;
font-size: .8rem;
font-weight: 700;
/* カンプ実測：高さ24px・幅96px。padding 6px だと35pxになっていた。 */
padding: 2px 12px;
border-radius: 6px;
border-top-left-radius: 0;
border-top-right-radius: 0;
}
.info-card__excerpt {
margin: 8px 0 0;
/* カンプ実測：カードの抜粋は黒。グレー(--muted)ではない。 */
color: var(--text);
font-size: .9rem;
line-height: 1.7;
}
/* ---- イベント情報：切り欠き見出し枠＋青カード ---- */
.p-top__event { background: #fff; }
.section-head-wrap { position: relative; text-align: center; margin-bottom: 32px; }
.section-head-wrap::before {
content: "";
position: absolute;
left: 0; right: 0; bottom: 0;
height: 2px;
background: var(--navy);
z-index: 0;
}
.section-head--framed {
display: inline-block;
position: relative;
z-index: 1;
margin: 0;
/* 左右パディング：SPカンプ実測38／PCカンプ実測98。
90px 固定だとSPで箱が幅いっぱいになり、左右に伸びる2pxの罫線が見えなくなる。 */
padding: 19px clamp(38px, 9vw, 90px) 14px;
background: #fff;
border-top: 2px solid var(--navy);
border-left: 2px solid var(--navy);
border-right: 2px solid var(--navy);
border-bottom: none;
border-radius: 12px 12px 0 0;
}
.section-head--framed .section-head__ja { padding-bottom: 0; }
.section-head--framed .section-head__ja::after { display: none; }
.p-top__event .event-card {
/* カンプ実測：ベタ塗りではなく、上=紺 #00368f → 下=水色 #0082c9 の縦グラデーション。 */
background: linear-gradient(180deg, #00368f 0%, #0082c9 100%);
color: #fff;
border-radius: 20px;
box-shadow: 0 12px 30px rgb(10,58,115,.12);
padding: 28px;
}
.p-top__event .event-card__thumb {
display: block;
aspect-ratio: 16 / 10;
border-radius: 12px;
overflow: hidden;
background: #e6e6e6;
}
.p-top__event .event-card__thumb img { width: 100%; height: 100%; object-fit: cover; }
/*
* 受付ステータス（0910_3カンプ p.1）。
* 情報側カラムの左上に、カードの上端をまたぐ形で赤いバッジが乗る。
* 上の角は角なし・下だけ角丸で、カードの縁からぶら下がる見た目にする。
*/
.p-top__event .event-card__link { position: relative; }
.p-top__event .event-card__status {
position: absolute;
top: -28px; /* カードの padding 28px ぶん上げてカード上端に合わせる */
left: calc(45.4% + 20px); /* 画像カラム(5fr)＋gap のぶん右へ。情報カラムの左端に合わせる */
z-index: 2;
margin: 0;
padding: 8px 26px;
border: 0;
border-radius: 0 0 6px 6px;
background: var(--cta-deep, #de0039);
color: #fff;
font-size: .95rem;
font-weight: 700;
line-height: 1.4;
white-space: nowrap;
}
.p-top__event .event-card__status--closed { background: #7a8899; }
.p-top__event .event-card__title { color: #fff; font-size: 1.15rem; line-height: 1.55; margin: 0 0 14px; font-weight: 800; }
/* 開催日時。行頭の白い■は装飾なので読み上げには出さない。 */
.p-top__event .event-card__when {
margin: 0 0 14px;
color: #fff;
font-size: .95rem;
line-height: 1.7;
}
.p-top__event .event-card__when::before {
content: "";
display: inline-block;
width: .72em;
height: .72em;
margin-right: .5em;
background: currentColor;
vertical-align: baseline;
}
/* 開催形式は枠線のピル（カンプはテキスト行ではなくバッジ）。 */
.p-top__event .event-card__format {
display: inline-block;
margin: 0;
padding: 3px 20px;
border: 1px solid #fff;
border-radius: 999px;
color: #fff;
font-size: .85rem;
font-weight: 700;
line-height: 1.7;
}
@media (max-width: 767px) {
/* SPは1カラムになるので、バッジは情報カラムの左端＝カード左端に戻す。 */
.p-top__event .event-card__status { left: 0; top: -20px; }
}
/* ---- FAQ：紺背景・白文字 ---- */
.p-top__faq {
background: var(--blue) !important;
color: #fff;
border-radius: 0;
}
.p-top__faq .section-head__en { color: #fff; } /* カンプ実測：紺帯の上は白（#cdd9ea はカンプに無い色） */
.p-top__faq .section-head__ja { color: #fff; }
.p-top__faq .section-head__ja::after {
background: linear-gradient(90deg, #fff 0 50%, var(--cta) 50% 100%);
}
.p-top__faq .faq { background: transparent; border-radius: 0; }
.p-top__faq .accordion { border-color: rgb(255,255,255,.25); }
.p-top__faq .accordion__head { color: #fff; }
.p-top__faq .accordion__q { color: #fff; }
.p-top__faq .accordion__head::after { color: #fff; }
.p-top__faq .accordion__inner { color: #d5deea; }
.p-top__faq .faq-item { border-color: rgb(255,255,255,.25); }
.p-top__faq .faq-item summary { color: #fff; }
.p-top__faq .faq-item summary::before { color: #fff; }
.p-top__faq .faq-item summary::after { color: #fff; }
.p-top__faq .faq-item > :not(summary) { color: #d5deea; }
/* 「一覧を見る」：紺帯の上なので白抜きピル。
.btn--outline の既定は白地＋青文字で、紺の上だと白いカプセルが浮いてしまう。
0831 SPカンプ実測（TOP p.1 / Pro p.3 とも同じ）：121x40・枠1px白・文字白13px。 */
.p-top__faq .section-more .btn {
min-width: 121px;
width: auto;
min-height: 40px;
padding: 0 22px;
background: transparent;
color: #fff;
border: 1px solid #fff;
font-size: .82rem;
box-shadow: none;
}
/* PCは2カラム（コンプ実測：左290px＝見出し＋一覧ボタン／間58px／右にQ&A） */
@media (min-width: 768px) {
.p-top__faq .l-container {
display: grid;
grid-template-columns: 290px 1fr;
column-gap: 58px;
grid-template-areas:
"head faq"
"more faq";
align-content: center;
}
.p-top__faq .section-head { grid-area: head; align-self: end; margin-bottom: 22px; }
.p-top__faq .section-more { grid-area: more; align-self: start; margin: 0; }
.p-top__faq .faq { grid-area: faq; }
/* Qは「上に罫線」（最初のQの上にも線が入り、最後のQの下には入らない） */
.p-top__faq .faq .faq-item {
border-top: 1px solid rgb(255, 255, 255, .35);
border-bottom: 0;
}
.p-top__faq .faq .faq-item summary { padding-inline: 4px; }
/* 一覧を見る：紺地なので白抜き。コンプ実測 120×37 */
.p-top__faq .section-more .btn {
min-width: 0;
width: 120px;
min-height: 37px;
padding: 0 12px;
background: transparent;
color: #fff;
border: 1.5px solid #fff;
font-size: .78rem;
}
}
/* ---- ダミーバッジ（共通） ---- */
.dummy-badge,
.hero__badge {
z-index: 3;
margin: 0;
background: var(--cta);
color: #fff;
font-size: .72rem;
font-weight: 700;
padding: 5px 12px;
border-radius: 4px;
}
/* ---- ヒーロー（カバーブロック） ---- */
.p-hero.wp-block-cover {
min-height: 82vh;
padding: 0;
align-items: stretch;
border-radius: 0 28px 28px 0;
overflow: hidden;
margin-right: 26px;
/* カンプ 0831 実測（PC・ヒーロー site y112..772 の660px内での位置）
0〜55% #00368f のベタ
60% #003790
73% #0053a5
87% #006eba
100% #0084cb 付近
写真ではなく紺→水色のグラデーション。イラストは別レイヤーで重ねる。 */
background-image: linear-gradient(180deg, #00368f 0 55%, #0053a5 73%, #006eba 87%, #0084cb 100%) !important;
background-size: cover !important;
background-position: center top !important;
}
/* メインビジュアルのイラスト（車＋アイコン群）。
ヒーローの右側に重ねる。素材は assets/images/top/mv_illust.png（透過PNG）。
未設置でも背景グラデだけが出るので表示は崩れない。 */
.p-hero.wp-block-cover::before {
content: "";
position: absolute;
/* カンプ実測：ヒーローの右端・下端から約11px内側。
イラスト(772×708)は contain で収める。 */
/* カンプ実測（PC・ヒーロー1224×660 内での位置）
イラストの外形 463×440
右端から164px（=13.4%）／下端から102px（=15.5%）
比率で置くと画面幅が変わっても関係が崩れず、
右下のSUZUKIロゴ（右68px・下50px）とも重ならない。 */
right: 13.4%;
bottom: 15.5%;
width: 38%;
height: 67%;
background: url('../images/top/mv_illust.webp') no-repeat right bottom / contain;
pointer-events: none;
z-index: 0;
}
/* 文字とボタンはイラストより前面に */
.p-hero.wp-block-cover .wp-block-cover__inner-container { z-index: 1; }
/* スマホ：ヒーローを低くして、直下のロゴ自動スライド（動くアイコン）が初期表示で覗くように。
カバーブロックのインライン min-height:84vh を上書きするため !important。値は好みで調整可。 */
/* 右だけ空けて角丸（コンプ実測：SP 26px / PC 56px。左端は全幅） */
@media (min-width: 768px) {
.p-hero.wp-block-cover { margin-right: 56px; }
}
/* WPが自動生成する![]()
はCSS背景画像を優先するため非表示 */
.p-hero .wp-block-cover__image-background {
display: none;
}
/* ブルー透過オーバーレイ */
/* 背景が写真からグラデーションに変わったため、青の透過オーバーレイは不要。
カバーブロックが必ず出力する要素なので、透明にして無効化する。 */
.p-hero .wp-block-cover__background {
background-color: transparent !important;
opacity: 0 !important;
}
.p-hero .wp-block-cover__inner-container {
position: relative;
display: flex;
flex-direction: column;
justify-content: center;
width: 100%;
padding: 20px 24px 44px;
color: #fff;
}
.p-hero .hero__badge { position: absolute; top: 20px; left: 24px; }
.p-hero .hero__logo {
font-size: 0; /* 既存テキストを非表示 */
line-height: 0;
margin: 0 0 18px;
}
.p-hero .hero__logo::before {
content: '';
display: block;
background-image: url('../images/top/mv_logo01.svg');
background-repeat: no-repeat;
background-size: contain;
background-position: left center;
/* width: 140px; */
height: 116px; /* viewBox 161×52 の比率に合わせた高さ */
}
.p-hero .hero__title {
color: #fff;
/* 0910カンプ実測：PC 33px・行送り45.4（＝1.37）。
「アルコールチェック漏れ防止を」14字＝464.7px。
ここを大きくすると3行に収まらず4行に折り返す。 */
font-size: clamp(1.3125rem, 2.6vw, 2.0625rem);
font-weight: 800;
line-height: 1.37;
margin: 0 0 14px;
text-shadow: 0 2px 10px rgb(0,0,0,.18);
}
.p-hero .hero__lead {
color: #fff;
font-size: 1rem;
line-height: 1.85;
margin: 0 0 28px;
}
.p-hero .hero__cta .wp-block-button { width: 100%; }
.p-hero .hero__cta .wp-block-button__link {
/* display: flex; */
align-items: center;
justify-content: center;
width: 100%;
min-height: 80px;
background: #de0039; /* カンプ実測。上半分は ::before の白28%で #e74770 になる */
color: #fff;
border: 3px solid #fff;
border-radius: 999px;
font-size: 1.15rem;
font-weight: 800;
position: relative;
overflow: hidden;
box-shadow: 0 12px 26px rgb(226, 35, 26, 0);
}
/* ================================================
ヒーローCTAボタン共通（TOP / Pro / Right 全ページ）
ここを変えれば全ページ一括反映
================================================ */
.p-hero .hero__cta .wp-block-button__link,
.p-pro-hero__cta .btn--cta,
.p-pro-dlbanner__cta .btn--cta {
padding-right: 56px; /* アイコン分の余白 */
}
/* 光沢：上半分ハードエッジ */
.p-hero .hero__cta .wp-block-button__link::before,
.p-pro-hero__cta .btn--cta::before,
.p-pro-dlbanner__cta .btn--cta::before {
content: '';
position: absolute;
inset: 0;
border-radius: 999px;
background: linear-gradient(
to bottom,
rgb(255, 255, 255, .28) 0%,
rgb(255, 255, 255, .28) 50%,
rgb(255, 255, 255, 0) 50%
);
pointer-events: none;
z-index: 0;
}
/* アイコン（白丸＋SVG） */
.p-hero .hero__cta .wp-block-button__link::after,
.p-pro-hero__cta .btn--cta::after,
.p-pro-dlbanner__cta .btn--cta::after {content: '';width: 30px;height: 30px;border-radius: 50%;background: url("../images/top/mv_btn_icon.svg") no-repeat center / 25px 25px;position: absolute;right: 16px;top: 50%;transform: translateY(-50%);z-index: 1;}
/* テキストをオーバーレイより前面に */
.p-hero .hero__cta .wp-block-button__link > *,
.p-pro-hero__cta .btn--cta > *,
.p-pro-dlbanner__cta .btn--cta > * { position: relative; z-index: 1; }
/* Pro/Right の CTA ボタンはヒーローCTAと同じ厚みに（PCデザイン踏襲。従来 min-height:48px で細すぎたため） */
.p-pro-hero__cta .btn--cta,
.p-pro-dlbanner__cta .btn--cta {
min-height: 76px;
}
@media (max-width: 767px) {
.p-pro-hero__cta .btn--cta,
.p-pro-dlbanner__cta .btn--cta { min-height: 62px; }
}
@media (max-width: 767px) {
/* ------------------------------------------------------------------
SPメインビジュアル：0831 SPカンプ p.1 実測
アートボード390 / ヒーローは site y120..678。以下の y はヒーロー上端から。
枠 x0..362（右28空け）・高さ559・角丸は右上/右下 40（左は角なし）
背景 #00368f 0→72% → #0098d9 100% の縦グラデ
ロゴ x30 y49 151×50
見出し x30 y116 24px・行送り37（2行）
サブ x30 y196 14px・行送り26（2行）
イラスト x100 y243 197×198 ← PCのような右下ではなく「本文の下・中央寄り」
CTA x58 y458 247×58・中央・ピル・白フチ2px
縦の並びが重ならない実測値なので、イラストとCTAは絶対配置でカンプ位置に固定する。
------------------------------------------------------------------ */
.p-hero.wp-block-cover {
min-height: 600px !important; /* イラスト拡大ぶん伸ばす（カンプ 559px） */
margin-right: 28px;
border-radius: 0 40px 40px 0;
background-image: linear-gradient(180deg, #00368f 0 72%, #0098d9 100%) !important;
}
.p-hero .wp-block-cover__inner-container {
justify-content: flex-start;
padding: 49px 30px 0;
/* カバーはflex行。既定の flex-shrink:1 だと中身の幅（252px）まで縮み、
CTAの中央揃えがヒーロー中央とズレるので、ヒーロー幅いっぱいに固定する。 */
flex: 0 0 100%;
}
.p-hero .hero__logo { margin: 0 0 17px; }
.p-hero .hero__logo::before { height: 50px; background-position: left top; }
/* 0910カンプ実測：SP 21px・行送り31.2（＝1.48）。14字＝293.7px。 */
.p-hero .hero__title { font-size: 1.3125rem; line-height: 1.48; margin: 0 0 6px; }
.p-hero .hero__lead { font-size: .875rem; line-height: 1.86; margin: 0; }
/* イラスト：本文の下・ヒーローの中央。
left を実測値(27.6%)で置いていたぶん中心が右に17pxずれていたので、
50%＋translateX(-50%) で必ず中央に来るようにする。 */
.p-hero.wp-block-cover::before {
right: auto;
bottom: auto;
left: 50%;
transform: translateX(-50%);
/* 2026-09-17 本多さん指示でカンプ(197×198)より拡大 */
top: 222px;
width: 73.5%; /* 266 / 362 */
height: 266px;
background-position: center center;
}
/* CTA：イラストの下・ヒーロー幅の中央 */
.p-hero .hero__cta {
position: absolute;
top: 500px;
left: 0;
right: 0;
margin: 0;
display: flex;
justify-content: center;
}
.p-hero .hero__cta .wp-block-button { width: 247px; }
.p-hero .hero__cta .wp-block-button__link {
min-height: 58px;
border-width: 2px;
font-size: 1.05rem;
}
}
/* ヒーロー内の SUZUKI ロゴは削除（2026-09-07）。
0831カンプ（TOP PC p.1 / TOP SP p.1 / Pro PC p.3）いずれにも存在せず、
本多さんの指示で削除。復活させる場合は git ではなくこのコメントを手がかりに
`assets/images/suzuki_logo.svg` を疑似要素で置き直す（ヘッダー上バーでは今も使用中）。 */
/* ---- カード：角丸＋影 ---- */
.case-card, .info-card, .event-card {
border: 0;
border-radius: 18px;
box-shadow: 0 10px 30px rgb(10,58,115,.08);
transition: transform .3s var(--ease-appear), box-shadow .3s var(--ease-appear);
}
/* ホバーで少し浮かせる（影も強めて浮遊感を出す）。
指で触る端末には hover が無いので、マウス等がある環境だけに限定する。 */
@media (hover: hover) {
.case-card:hover, .info-card:hover, .event-card:hover {
transform: translateY(-6px);
box-shadow: 0 18px 38px rgb(10,58,115,.16);
}
/* 写真がわずかに寄る演出。カード側で overflow:hidden しているのではみ出さない。 */
.case-card:hover .case-card__thumb img,
.info-card:hover .info-card__thumb img { transform: scale(1.04); }
}
.case-card__thumb img, .info-card__thumb img { transition: transform .45s var(--ease-appear); }
/* 動きを減らす設定の環境では浮き上がり/拡大をやめる（影の変化だけ残す） */
@media (prefers-reduced-motion: reduce) {
.case-card:hover, .info-card:hover, .event-card:hover { transform: none; }
.case-card:hover .case-card__thumb img,
.info-card:hover .info-card__thumb img { transform: none; }
}
/* 導入事例カード：タグを写真左上にオーバーレイ */
/* 0831カンプ実測（SP p.1 / PC p.1）：カード直下に約14pxの影。
カード下端の1px目が rgb(213,213,213)＝白地に対して約16%。 */
.case-card {
position: relative;
/* 既定の 0 10px 30px / .08 はカンプより薄く、SPだと影が見えなかった。 */
box-shadow: 0 4px 14px rgb(10,58,115,.16);
}
.case-card__tags { position: absolute; top: 12px; left: 12px; margin: 0; z-index: 2; }
.case-card__tag { background: var(--blue); color: #fff; }
.case-card__body { padding-top: 16px; }
/* ---- サービス詳細カード：写真＋下辺掛かり青ボタン ---- */
.lineup__card {
position: relative;
background: #fff;
border-radius: 20px;
box-shadow: 0 12px 30px rgb(10,58,115,.10);
/* 「詳細をみる」はカンプ通り、カード下端に接して下側の角丸が無い形にする。
（はみ出しではなく意図した見た目。padding-bottom を 0 にして
ボタンをカード下端にぴったり付ける。勝手に変えないこと。） */
padding: 0 24px 32px;
padding-bottom: 0;
text-align: center;
margin-bottom: 24px;
transition: transform .3s var(--ease-appear), box-shadow .3s var(--ease-appear);
}
/* 導入事例カードなどと同じホバー挙動に揃える */
@media (hover: hover) {
.lineup__card:hover {
transform: translateY(-6px);
box-shadow: 0 20px 40px rgb(10,58,115,.18);
}
/* 画像は枠で切らなくなった（スマホが上にはみ出す形）ので、
ここでズームさせると見出しに重なってしまう。カードの浮き上がりだけにする。 */
}
@media (prefers-reduced-motion: reduce) {
.lineup__card:hover { transform: none; }
}
.lineup__card .wp-block-image img { transition: transform .45s var(--ease-appear); }
/* 0910_3カンプ p.1：色帯の上端＝カードの上端で、帯の上の角はカードの角丸に沿う。
そしてスマホだけが帯の上へはみ出す。
支給素材は「上に透過の余白（スマホ）＋その下が色帯」という作りなので、
枠（figure） … 帯だけの高さ。角丸＋帯色を持つ＝帯の実体
画像 … 透過ぶん上へずらして重ねる。はみ出したスマホは切らない
という二段構えにしている。画像側の帯の角も同じ半径で抜いてあるので、
枠の角丸がそのまま見える。
--lineup-band-ar … 帯だけの縦横比（枠の高さ）
--lineup-img-top … 画像を上へずらす量（枠幅に対する％＝透過部分の高さ）
実測（0910版の画像・2026-09-17に再計測）：Right 帯上端 y34/777（4.38%）／Pro y32/777（4.12%）、
帯の高さはどちらも 308（777:308）。
※以前は旧画像の値（y46・y44・777:296）のままで、画像の帯がCSSの帯より約8px上にずれ、
カード上端の角が二段に見えていた。画像を差し替えたら必ずこの3つを測り直すこと。 */
.lineup__card .wp-block-image {
position: relative;
/* 画像の負のマージンが枠の外へ抜ける（マージン相殺）と、枠ごと上へずれてしまう。
flow-root でブロック整形コンテキストを作って閉じ込める。 */
display: flow-root;
margin: 0 -24px 24px; /* カード左右いっぱいに写真を広げる（ふち無し） */
aspect-ratio: var(--lineup-band-ar, 777 / 296);
height: auto;
overflow: visible; /* スマホの頭を出すため。切らない */
border-radius: 20px 20px 0 0;
/* 画像は777pxを524pxなどへ縮小して表示するため、端の1列が下地の白と
混ざって細い線に見えることがある。帯の下地を画像と同じ色にして塞ぐ。 */
background: var(--lineup-band-bg, transparent);
}
.lineup__card--right { --lineup-band-bg: var(--blue-bright, #0098d9); --lineup-img-top: -4.38%; --lineup-band-ar: 777 / 308; }
.lineup__card--pro { --lineup-band-bg: var(--navy, #00368f); --lineup-img-top: -4.12%; --lineup-band-ar: 777 / 308; }
.lineup__card .wp-block-image img {
display: block;
width: 100%;
height: auto;
/* ％マージンは「枠の幅」基準なので、幅が変わっても比率が保たれる。 */
margin-top: var(--lineup-img-top, -5.9%);
}
/* 支給画像の左右にあった透明の余白（Right 左3px・右2px／Pro 右1px）は、
帯がカードの端まで届かず白い線に見えたため切り落とした（どちらも幅777pxに統一）。
元ファイルは *.orig.bak として uploads に残してある。 */
.lineup__card .dummy-badge { position: absolute; top: 26px; left: 32px; }
.lineup__card p { font-weight: 800; }
/* タイトル下の罫線。0831カンプ実測（PC p.1 / SP p.1 とも有り）：
1px・タイトルと同色（Right #0098d9 / Pro #00368f）・カード左右から38inset。
カードの padding が24なので、あと14を margin で足して38にしている。
色は currentColor なので Right / Pro の色分けがそのまま効く。 */
.lineup__name {
color: var(--blue-bright);
font-size: 1.5rem;
font-weight: 800;
margin: 0 14px 24px;
padding-bottom: 20px;
border-bottom: 1px solid currentColor;
}
/* 小見出し・説明文。0831カンプ p.1 実測（1:1）：
小見出し 18px・罫線から24px下、説明文 14px・行送り22px・左揃え・
カード左右から44inset（padding24＋margin20）。 */
.lineup__catch {
color: var(--ink, #1a1a1a);
font-size: 1.125rem;
line-height: 1.5;
margin: 0 0 22px;
}
/* 説明文だけは .lineup__card p の font-weight:800 より弱い Bold に戻すため、
詳細度を上げて指定する（カンプの本文は ExtraBold ではない）。 */
.lineup__card .lineup__desc {
color: var(--ink, #1a1a1a);
font-size: .875rem;
font-weight: 700;
line-height: 1.6; /* カンプ実測：14px・行送り22px */
text-align: left;
margin: 0 20px;
}
.p-top__lineup .wp-block-buttons { justify-content: center; }
.p-top__lineup .lineup__card .wp-block-button {
position: static; /* 下付きをやめてカード内に収める */
transform: none;
margin: 20px auto 0;
width: auto;
}
.p-top__lineup .lineup__card .wp-block-button__link {
width: auto;
min-width: 220px;
/* カンプ準拠：上だけ角丸、下は角のまま（カード下端に接するため）。 */
border-radius: 10px 10px 0 0;
}
/* サービス詳細：Right=青／Pro=紺 の配色分け（各カードの追加CSSクラスで切替）
色は :root 変数で一元管理。カードを増やす時も同じクラスを付ければOK。 */
.lineup__card--right .lineup__name { color: var(--blue-bright, #1a73c2); }
.p-top__lineup .lineup__card--right .wp-block-button__link {
background: var(--blue-bright, #1a73c2);
box-shadow: 0 8px 18px rgb(26,115,194,.28);
}
.lineup__card--pro .lineup__name {
color: var(--blue);
}
.p-top__lineup .lineup__card--pro .wp-block-button__link {
background: var(--blue);
box-shadow: 0 8px 18px rgb(10,43,82,.28);
}
.p-top__lineup .wp-block-button__link {
background: var(--blue-bright);
color: #fff;
border: 0;
display: flex; align-items: center; justify-content: center; gap: 8px;
width: 100%;
box-shadow: 0 8px 18px rgb(13,79,158,.25);
}
.p-top__lineup .wp-block-button__link::after {
content: "";
width: 18px; height: 18px;
background: currentColor;
mask: url("data:image/svg+xml;utf8,") center/contain no-repeat;
mask: url("data:image/svg+xml;utf8,") center/contain no-repeat;
}
/* ============================================================
動きを減らす設定への配慮
============================================================ */
@media (prefers-reduced-motion: reduce) {
.slider { scroll-behavior: auto; }
.accordion__body, .accordion__head::after { transition: none; }
/* .btn はここでは触らない。ボタンの扱いは上の
「視差効果を減らす設定では動きだけ止める」ブロックに集約している
（ここで transition:none を掛けると、色のフェードまで消えてしまう）。 */
/* .sticky-bar は下からのスライドアップ（軽微な動き）なので reduce でも残す */
/* .logo-marquee__track（企業ロゴ自動スライド）は TOP のギャラリー版と挙動を揃えるため reduce でも動かす */
}
/* ============================================================
SUZUKI FLEET Pro ページ（page-professional.php / 0730カンプ準拠）
============================================================ */
/* 共通プレースホルダー（画像支給待ち） */
.p-pro-ph {
display: flex;
align-items: center;
justify-content: center;
background: #e6e6e6;
color: #9aa5b1;
font-weight: 700;
font-size: .9rem;
border-radius: 12px;
}
.p-pro-ph--wide { width: 100%; aspect-ratio: 16 / 9; }
.p-pro-ph--product { width: 100%; aspect-ratio: 16 / 10; background: #dfe6ee; }
/* ACF画像フィールドで実画像を入れたとき：プレースホルダーと同じ枠・角丸に揃える */
.p-pro-img { display: block; width: 100%; height: auto; border-radius: 12px; object-fit: cover; }
.p-pro-img--wide { aspect-ratio: 16 / 9; }
/* 特徴セクション用。支給素材の比率がまちまち（img07=1.35 / img08=1.57）なので
16:9 に押し込まず原寸比で出す。比率は実寸から inline style で与えている
（suzuki_field_img の variant='natural'）。CSS側で auto にすると、
複数行にまたがるグリッド項目として行高と相互依存し画像が膨らむ。
※お悩み・導入フローはカード高を揃える意図なので 16:9 + cover のままにすること。 */
.p-pro-img--natural { height: auto; object-fit: contain; }
.p-pro-ph.p-pro-img--natural { aspect-ratio: 16 / 9; } /* 未設定時の枠だけは比率固定 */
.p-pro-img--product { aspect-ratio: 16 / 10; }
/* CTAボタン（赤・淡ピンク外枠＋白▼丸／コンプのレトロ調） */
.btn--cta {
position: relative;
background: var(--cta);
color: #fff;
border: 4px solid #f4a6a6;
box-shadow: 0 6px 16px rgb(226,35,26,.25);
padding-right: 56px;
padding-left: 56px;
}
.btn--cta::after {
content: "\25BC";
position: absolute;
right: 12px;
top: 50%;
transform: translateY(-50%);
display: flex;
align-items: center;
justify-content: center;
width: 30px;
height: 30px;
border-radius: 50%;
background: #fff;
color: var(--cta);
font-size: 9px;
}
/* ブロックパターン用ボタン（エディタから挿入する再利用ボタン） */
.wp-block-button.is-cta .wp-block-button__link {
background: var(--cta);
color: #fff;
border-radius: 999px;
padding: 14px 40px;
font-weight: 700;
box-shadow: 0 6px 16px rgb(226,35,26,.25);
}
.wp-block-button.is-outline .wp-block-button__link {
background: #fff;
color: var(--blue);
border: 1.5px solid var(--blue);
border-radius: 999px;
padding: 13px 40px;
min-width: 200px;
font-weight: 700;
text-align: center;
}
/* --- 1) ヒーロー --- */
.p-pro-hero {
/*
* 0910_3カンプ（p.3 / p.4）でヒーローは写真背景ではなく
* ブランド色のベタ塗りになった（Pro #00368f ／ Right #0098d9）。
* 製品画像はコピーの下に「前景の画像」として置く形。
* 写真背景に戻す場合は --hero-image / --hero-overlay を使う指定へ差し替える。
*/
position: relative;
display: flex;
align-items: flex-end; /* コンテンツを下寄せ（TOPと同じ） */
min-height: 82vh;
padding: 24px;
color: #fff;
background: var(--brand, var(--navy));
border-radius: 0 28px 28px 0; /* 右角丸フレーム（TOPと同じ） */
margin-right: 20px;
overflow: hidden;
}
/* ============================================================
Pro / Right のブランド色トークン
------------------------------------------------------------
0831カンプ実測：主役の色が Pro と Right で入れ替わっている。
Pro 主役 #00368f(紺) / 従 #0098d9(水) 面積 124,022 : 47,591
Right 主役 #0098d9(水) / 従 #00368f(紺) 面積 109,631 : 68,856
共通テンプレートを2本に分けず、ここのトークンだけで切り替える。
ページ内のパーツは色を直接書かず var(--brand*) を参照すること。
============================================================ */
.p-pro {
--brand: var(--navy); /* 主役 */
--brand-sub: var(--blue-bright, #0098d9); /* 従 */
--brand-pale: #e1e9f6; /* 淡色（座布団など） */
--flow-top: #21509d; /* 導入フローのグラデ（従来値） */
--flow-mid1: #839dc9;
--flow-mid2: #cbd6e8;
--solve-end: #0098d9; /* 解決帯の下端 */
--worry-1: #21509d; /* こんなお悩み帯（従来値） */
/* 「こんなお悩みありませんか？」の見出し帯。0831 SPカンプ p.3/p.4 実測。
Pro ＝ #21509d → 白（見出しは白）
Right＝ #99d6f0 → 白（見出しは紺）※ Right は帯が明るいので白文字だと読めない */
--worry-head-top: #21509d;
--worry-head-mid: #6b8abe;
--worry-head-title: #fff;
--worry-2: #6384bb;
--worry-3: #a9bbd9;
--worry-4: #dbe3ef;
}
.p-pro.p-right {
--brand: var(--blue-bright, #0098d9);
--brand-sub: var(--navy);
--brand-pale: #99d6f0; /* Right のみに出る淡い水色 */
/* 導入フロー／解決帯のグラデも水色系へ（0831カンプ実測 #bbe3f5 付近） */
--flow-top: #0098d9;
--flow-mid1: #6bc3e9;
--flow-mid2: #bbe3f5;
--solve-end: #99d6f0;
/* 導入フローの座布団はカンプ実測で水色の直線（#99d6f0→白・460px）。 */
--flow-grad: linear-gradient(180deg, #99d6f0 0%, #fff 100%);
--solve-solid: 5%; /* Rightはベタ部分がほぼ無い（カンプ実測） */
--solve-h: 305px;
--flow-head: var(--navy); /* 導入フロー見出しの文字色 */
/* こんなお悩み帯（カンプ実測） */
--worry-1: #bde4f5;
--worry-head-top: #99d6f0;
--worry-head-mid: #c7e9f7;
--worry-head-title: var(--navy);
--worry-2: #b4e1f4;
--worry-3: #d5eef9;
--worry-4: #f5fbfd;
}
.p-pro-hero__inner { width: 100%; }
/* Right版はブランドカラー（青）グラデ（画像なし・背景を上書き） */
/* Right は --brand が #0098d9 なので、上の指定だけでカンプ通りになる。 */
/* スマホはヒーローを低めに（TOP同様、直下が覗く）。
下余白は SUZUKI ロゴ（下19px・高19px）のぶんを空ける。
カンプ実測：CTA下端からヒーロー下端まで59px。 */
@media (max-width: 767px) {
.p-pro-hero { min-height: 62vh; padding-bottom: 59px; }
}
/* 赤バッジ「ダミーイメージです。」はヒーロー左上に絶対配置。
ヒーローは display:flex なので、流し込みのままだと flex アイテムになって
__inner と横に並び、レイアウトが崩れる。
カンプ実測：SP 左21/上17（137×26） ／ PC 左34/上33 */
.p-pro-hero__badge {
position: absolute;
top: 17px;
left: 21px;
margin: 0;
padding: 6px 14px;
background: var(--cta);
color: #fff;
font-weight: 700;
font-size: .85rem;
border-radius: 4px;
}
.p-pro-hero__brand { display: block; margin-bottom: 6px; font-size: 1.5rem; font-weight: 800; }
.p-pro-hero__title { margin: 0; font-size: clamp(1.7rem, 6.5vw, 2.4rem); font-weight: 800; line-height: 1.4; }
.p-pro-hero__lead { margin: 16px 0 0; opacity: .9; font-size: .95rem; }
.p-pro-cap {
position: relative;
margin: 34px auto 14px;
width: max-content;
max-width: 90%;
padding: 0 26px;
/* カンプ実測（SP p.3 / p.4）：15字で幅210 ＝ 14px。
既定の16pxのままだと 240+パディング52=292 が max-width(290) を超え、
「…はこち／ら」で1文字だけ折り返していた。 */
font-size: .875rem;
font-weight: 700;
text-align: center;
}
.p-pro-cap::before,
.p-pro-cap::after {
content: "";
position: absolute;
top: 50%;
width: 2px;
height: 1.5em;
/* 斜線は文字と同じ色。紺地では白、便利な機能の水色座布団では紺になる。
#fff 固定だったため、座布団の上では見えなくなっていた。 */
background: currentColor;
}
.p-pro-cap::before { left: 0; transform: translateY(-50%) rotate(-22deg); }
.p-pro-cap::after { right: 0; transform: translateY(-50%) rotate(22deg); }
.p-pro-hero__cta { margin: 0; text-align: center; }
.p-pro-hero__cta .btn { width: 100%; max-width: 360px; }
/* ヒーローCTAボタン：ページ固有スタイル（共通部分は上の共通ブロックで管理） */
.p-pro-hero__cta .btn--cta {
position: relative;
overflow: hidden;
border: 4px solid #f4a6a6;
}
/* ============================================================
Pro / Right ヒーロー：PC実測合わせ（カンプ pc0817_2 4ページ目）
------------------------------------------------------------
カンプ実測値（site座標／ヘッダー下端=64・ヒーローは 64..702）
ヒーロー 高さ638 ／ 右余白56 ／ 角丸 右上48・右下24
赤バッジ 97..123（左34・上33／137×27）
SUZUKI FLEET Pro 211..242（約44px）
走り続けるビジネスに、 308..346
確かな安心と効率を。 372..411 … 48px・行送り64px
法人向けクラウド型… 438..453（約20px）
＼料金お見積もり／ 527..539（左寄せ・x=154）
CTA（白リング込み） 561..618
中身の下端がヒーロー下端から84pxなので、flex-end + padding-bottom:84px で合わせる。
※ TOPのヒーローは .p-hero（カバーブロック）で別クラス。ここを触っても影響しない。
============================================================ */
@media (min-width: 768px) {
.p-pro-hero {
min-height: 638px;
/*
* 右の空き。カンプは56pxだが、画面幅がコンテンツ幅（--shiki）に近いと
* 帯が中身より狭くなって右端がはみ出すので、そのぶん詰める。
* padding-left と同じ値にすることで、中身の中心＝画面の中心になり、
* __inner の左右がヘッダーと一直線に揃う。
*/
--hero-gap: clamp(24px, calc((100% - var(--shiki)) / 2 - 16px), 56px);
margin-right: var(--hero-gap);
/* 右上と右下で半径が違う（カンプ実測）。左端は全幅なので角丸なし。 */
border-radius: 0 48px 24px 0;
/* padding-left は「右余白ぶんを左に足して中央軸を画面中央へ戻す」ための値。
TOPのヒーローと同じ考え方。margin-right と必ず同じ値にすること。 */
padding: 0 0 84px var(--hero-gap);
}
/* ヒーローの横幅はヘッダー（.site-header__inner）と同じ --shiki に揃える。
以前はカンプ実測の980にしていたが、ヘッダーとの左右のズレが目立つため。 */
.p-pro-hero__inner {
/* 帯の内側は padding-left で余白を持っているので、ここでガターを引くと
そのぶん中身が縮んでヘッダーとズレる。 */
width: min(var(--shiki), 100%);
margin-inline: auto;
padding-inline: 0;
}
/* 赤バッジ：PCはカンプ実測で 左34 / 上33 */
.p-pro-hero__badge { top: 33px; left: 34px; padding: 4px 12px; font-size: .7rem; }
/*
* 0910_3カンプ p.3 の実測（文字の「見えている上下」で計測）：
* ブランド下端→タイトル1行目 52 ／ タイトル行間 21（行送り53＝行高1.15）
* タイトル2行目→リード 47 ／ リード→ボタン 66
* 以前は「＼料金お見積もり／」のキャプションが間に入る前提で
* リードとボタンの余白をほぼ0にしていたが、そのキャプションは
* 0910_3で削除されたため、リード以下が詰まって見えていた。
*/
/*
* 0910_3カンプ p.3 実測（字幅÷字数）：
* タイトル「走行データを活用した」349px/10字＝35px（行送り54＝1.54）
* リード 「法人向け〜サービス」278px/17字＝16px
* ブランド「SUZUKI FLEET Pro」378px ＝ Right と同じ36px相当
* 以前は0817カンプの値（48px/20px/44px）のままで、
* 文字が大きすぎてテキスト側のカラムが広がり、製品画像が小さくなっていた。
* 余白は文字の見えている上下で計測：ブランド→52／行送り53／→リード47／→ボタン66。
*/
.p-pro-hero__brand { font-size: 2.25rem; margin-bottom: 32px; }
.p-pro-hero__title { font-size: 2.1875rem; line-height: 1.54; }
.p-pro-hero__lead { font-size: 1rem; margin-top: 28px; }
/* ＼料金お見積もり／ はカンプでは左寄せ。
資料DLバナー側（.p-pro-cap--onblue）は中央のままにしたいので、
ヒーロー内に限定して左寄せにする。 */
/* キャプションとボタンは左寄せの一群。カンプではコンテナ左端から10px内側で、
両者の中心が揃う（キャプション中心 site284 ／ ボタン中心 site283）。 */
/* キャプションはカンプ実測で14px。ボタンより7px左から始まる。 */
.p-pro-hero .p-pro-cap { margin: 55px 0 19px 3px; font-size: .875rem; }
.p-pro-hero__cta { text-align: left; margin: 58px 0 0 10px; }
/* ボタン実測：外形246x56・白1.5pxリング・#de0039（ピンク4px枠ではない） */
.p-pro-hero__cta .btn--cta {
width: 246px;
max-width: 100%;
min-height: 56px;
padding: 0 52px 0 24px;
border: 1.5px solid #fff;
background: var(--cta-deep, #de0039);
}
}
/* --- パンくず --- */
/* ヒーローの色帯と次の座布団のちょうど間。詰めすぎると帯に貼り付いて見える。 */
.p-pro .breadcrumb { padding-block: var(--sp-md); display: flex; gap: 6px; align-items: center; }
/* --- 2) 企業ロゴ --- */
/* TOPの .p-top__logos と同じく、下の罫線はカンプに無いので出さない。 */
.p-pro-logos { padding-block: 24px; overflow: hidden; }
/* --- 4) こんなお悩み --- */
.p-pro-worry__head {
text-align: center;
padding: 40px 24px 56px;
/* カンプ実測（帯の上端からの絶対位置）：
0〜12px 上の色ベタ
132px 中間色
252px 白
％ではなく px で置く。帯の高さが変わっても見出しが乗る色が変わらず、
カンプと同じ濃さ（見出し位置で約 rgb(88,124,182)）を保てる。 */
background: linear-gradient(180deg,
var(--worry-head-top, #21509d) 0 12px,
var(--worry-head-mid, #6b8abe) 132px,
#fff 252px);
border-radius: 28px 28px 0 0;
overflow: hidden;
}
.p-pro-worry__icon {
position: relative;
display: inline-block;
width: 54px;
height: 40px;
margin-bottom: 14px;
background: #fff;
border-radius: 12px;
}
.p-pro-worry__icon::before {
content: "•••";
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
color: var(--navy);
font-size: 1.3rem;
letter-spacing: 2px;
line-height: 1;
}
.p-pro-worry__icon::after {
content: "";
position: absolute;
bottom: -6px;
left: 50%;
transform: translateX(-50%);
border: 7px solid transparent;
border-bottom: 0;
border-top-color: #fff;
}
.p-pro-worry__title { margin: 0; color: var(--worry-head-title, #fff); font-size: 1.4rem; font-weight: 800; }
.p-pro-worry__item {
text-align: center;
padding: 0 0 24px;
margin-bottom: 20px;
}
/* 写真：全角丸＋ドロップシャドウで単体で浮かせる（カードの枠・白背景は無し） */
.p-pro-worry__item .p-pro-ph,
.p-pro-worry__item .p-pro-img,
.p-pro-worry__item img {
width: 100%;
display: block;
margin-bottom: 20px;
border-radius: 16px;
box-shadow: 0 14px 28px rgb(10, 58, 115, .18);
}
.p-pro-worry__lead {
position: relative;
margin: 0 20px 16px;
padding-bottom: 16px;
color: var(--navy);
font-size: 1.15rem;
font-weight: 800;
line-height: 1.55;
}
.p-pro-worry__lead::after {
content: "";
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: 2px;
background: var(--blue);
}
.p-pro-worry__text { margin: 0 20px; color: #333; line-height: 1.9; text-align: left; }
/* --- 5) なら解決できます！ --- */
/* 0831 SPカンプ実測（p.3 Pro / p.4 Right）：
上端15pxだけブランド色のベタ、そこから232pxで白へ抜ける縦グラデ。
Pro=#00368f / Right=#0098d9（どちらも --brand）。下端は水色ではなく「白」。
製品画像は白い部分に載る。SPは紺ベタだったのでカンプに合わせた。 */
.p-pro-solve {
background:
linear-gradient(180deg, var(--brand, var(--navy)) 0 15px, #fff 232px) no-repeat top / 100% 232px,
#fff;
color: #fff;
}
.p-pro-solve__band { position: relative; text-align: center; padding: 48px 24px 20px; }
.p-pro-solve__band::before {
content: "";
position: absolute;
top: 0;
left: 50%;
transform: translateX(-50%);
/* カンプ実測：幅30・深さ29の下向き三角 */
border-style: solid;
border-width: 29px 15px 0;
border-color: #fff transparent transparent;
}
.p-pro-solve__title { margin: 0; font-size: 1.5rem; font-weight: 800; }
.p-pro-solve__brand { display: block; margin-bottom: 4px; font-size: 1.75rem; }
/* Right はブランド名と文言が同じ行（0910_3カンプ p.4）。 */
.p-pro-solve--inline .p-pro-solve__brand {
display: inline;
margin-bottom: 0;
margin-right: .3em;
font-size: inherit;
}
/* 製品画像：コンプ実測で幅490px。--product が width:100% のため、
ここで上限を掛けて中央寄せしないとコンテナ幅（848px）まで伸びて大きくなりすぎる。 */
.p-pro-solve__media { padding: 8px 24px 48px; }
.p-pro-solve__media .p-pro-img,
.p-pro-solve__media .p-pro-ph {
width: 100%;
max-width: 490px;
margin-inline: auto;
}
/* ------------------------------------------------------------
5) なら解決できます！ PC実測合わせ（カンプ pc0817_2 4ページ目）
カンプ実測（セクション上端を0とした相対位置・site座標では 2254 起点）
背景 全幅・上から325pxぶんだけ。紺#00368f → 水色#0098d9 のグラデ。
上の約23%は紺のベタで、そこから水色へ変化する。
**製品画像の途中（画像の上から114px）で背景が切れて白になる**のが特徴。
ノッチ 上端中央の下向き三角。幅54px・深さ45px
ブランド ink 87..110（約32px）
タイトル ink 137..166（約36px）／行送り50px
製品画像 上端211・幅475
※SPはカンプ未確認のため、従来どおり紺ベタのまま（この@media内でのみ上書き）。
------------------------------------------------------------ */
@media (min-width: 768px) {
.p-pro-solve {
/* 背景を「上から325px」に限定する。下地は白。
セクション全体を塗ってしまうと製品画像の下まで紺になってしまう。 */
/* 上端はブランド色（Pro=紺 / Right=水色）、下端は従色へ抜ける。 */
background:
/* 0910_3カンプ実測：Pro＝#00368f を 25% までベタ、以降 白へ（帯335px）。
Right＝#0098d9 はすぐ白へ抜ける（帯305px）。
従来は下端を水色で止めていたため、Rightだと白との境目が線に見えていた。 */
linear-gradient(180deg, var(--brand, #00368f) 0%, var(--brand, #00368f) var(--solve-solid, 25%), #fff 100%) no-repeat top / 100% var(--solve-h, 335px),
#fff;
}
/* ノッチ：border で作る下向き三角。上下0/左右27 → 幅54px・深さ45px */
.p-pro-solve__band::before { border-width: 45px 27px 0; }
.p-pro-solve__band { padding: 79px 24px 0; }
.p-pro-solve__brand { font-size: 2rem; line-height: 1.2; margin-bottom: 12px; }
.p-pro-solve__title { font-size: 2.25rem; line-height: 1.3; }
.p-pro-solve__media { padding: 35px 24px 0; }
}
/* --- 6) 特徴（①②③・番号は切り欠きタブ） --- */
.p-pro-features { background: #fff; padding-block: var(--sp-section-plain); }
.p-pro-feature { text-align: center; margin-top: 48px; }
.p-pro-feature:first-of-type { margin-top: 24px; }
.p-pro-feature__badge { position: relative; height: 44px; margin-bottom: 24px; }
.p-pro-feature__badge::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--navy); }
.p-pro-feature__num {
position: absolute;
/* 0831 SPカンプ実測：タブ 71x48。横罫線の左端と同じ位置に置く。
12px 内側にすると罫線の左端がタブの外にはみ出して見えてしまう。 */
left: 0;
bottom: 0;
z-index: 1;
display: inline-flex;
align-items: center;
justify-content: center;
width: 71px;
height: 48px;
border-radius: 10px 10px 0 0;
/* 0831カンプ：白地＋枠＋赤数字 → ブランド色の塗り＋白数字。
Pro=紺 / Right=水色。下の横線は両ページとも紺なので据え置き。 */
background: var(--brand, var(--navy));
color: #fff;
font-size: 1.6rem;
font-weight: 800;
line-height: 1;
}
/* 番号タブ：PC実測合わせ（カンプ pc0817_2 4ページ目）
タブ 98×50 ／ 線の左端から20px内側 ／ 枠2px #00368f ／ 上だけ角丸10px
数字 約26px・#de0039。タブ内で中央ではなく **下寄り**（上19 / 下12）
タブの線 下のコンテンツまで88px空ける（実装は24pxしかなく詰まって見えていた）
※SPはカンプ未確認のため、従来の 62×44 / 下24px のまま。 */
@media (min-width: 768px) {
.p-pro-feature__badge { height: 58px; margin-bottom: 88px; }
.p-pro-feature__num {
/* 0831カンプ実測：タブ 86x58／線の左端から32px内側／数字は上下中央 */
left: 32px;
width: 86px;
height: 58px;
}
}
.p-pro-feature .p-pro-ph { margin-bottom: 20px; }
.p-pro-feature__lead {
position: relative;
margin: 0 0 16px;
padding-bottom: 16px;
color: var(--navy);
font-size: 1.15rem;
font-weight: 800;
line-height: 1.5;
}
.p-pro-feature__lead::after { content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 2px; background: var(--blue); }
.p-pro-feature__text { margin: 0; color: #333; line-height: 1.9; text-align: left; }
/* サブ機能カード（青カード＋丸アイコンバッジ） */
.p-pro-subcards { display: grid; gap: 46px; margin-top: 48px; }
/* サブカード。背景色だけは全幅で修正（#3f97d6 はカンプに存在しない色だった）。
寸法・文字はPCカンプの実測値なので @media (min-width:768px) 側で上書きする。 */
.p-pro-subcard { position: relative; background: var(--navy); color: #fff; border-radius: 16px; padding: 46px 24px 28px; } /* 0831カンプ実測：#0098d9 → #00368f */
.p-pro-subcard__icon {
position: absolute;
top: 0;
left: 50%;
transform: translate(-50%, -50%);
display: inline-flex;
align-items: center;
justify-content: center;
/* 0831カンプ実測：白地45px＋グラデリング5px（#00368f→#0098d9）＋白フチ2px。
カード上端に中心を合わせて重ねる。 */
width: 55px;
height: 55px;
border-radius: 50%;
border: 5px solid transparent;
background:
linear-gradient(#fff, #fff) padding-box,
linear-gradient(90deg, var(--navy), var(--blue-bright, #0098d9)) border-box;
box-shadow: 0 0 0 2px #fff;
color: var(--navy);
font-size: .62rem;
font-weight: 700;
}
.p-pro-subcard__title { text-align: center; font-size: 1.15rem; font-weight: 800; margin: 6px 0 14px; }
.p-pro-subcard__text { margin: 0; line-height: 1.9; text-align: left; } /* カンプ：見出しは中央・本文は左揃え */
/* ============================================================
利用イメージ（How to use）※Right のみ
------------------------------------------------------------
0831カンプ p.4 実測：
座布団 幅980・淡い水色（#99d6f0 系のグラデ）・内側65
ブロック上端に白いタブ（Driver / Administrator）
カード 259幅 x 3列 / gap36 / #0098d9 / 上端に丸アイコン
============================================================ */
/* 上はグラデの座布団が始まる位置、下は白地なので一段下げる。 */
.p-usecase { padding-block: var(--sp-section) var(--sp-section-plain); }
/* 背景は「座布団の塗り」ではなく、上420pxだけのグラデ（実測 #99d6f0 → 白）。
管理者ブロックの背景が白なのはこのため。導入フローと同じ作り。 */
.p-usecase__panel {
width: min(980px, 100% - var(--gutter) * 2);
margin-inline: auto;
padding: 40px 24px 56px;
/* 0831 SPカンプ p.5「How to use」実測：座布団上端から
0〜26px #99d6f0 のベタ
251px 白
420px だと淡い色が下まで残り、画面いっぱいが青みがかって見える。 */
background: linear-gradient(180deg, #99d6f0 0 26px, #fff 251px), #fff;
/* カンプ実測：上だけ角丸22（下端は白に溶けるので角丸なし） */
border-radius: 22px 22px 0 0;
}
/* カンプ実測：この2セクションの見出しは他セクション（28px）より小さい18px。
字幅から逆算（利用イメージ 107.7px÷6字＝17.95 ／ 選ばれる理由 112.7÷6＝18.78）。 */
.p-usecase__head { margin-bottom: 46px; text-align: center; }
.p-usecase__head .section-head__ja { font-size: 1.125rem; }
.p-usecase__block + .p-usecase__block { margin-top: 72px; }
/* ブロック見出しタブ：座布団の上に白い凸 */
/* カンプ実測：幅294・高さ約58の凸。塗りは無く1pxの紺の輪郭のみ。
横線は凸の左右に伸びるので、線を2本に分けて描いている。 */
.p-usecase__tabrow { display: flex; align-items: flex-end; margin-bottom: 40px; }
.p-usecase__rule { flex: 1; border-bottom: 1px solid var(--navy); }
.p-usecase__tab {
flex: 0 0 auto;
width: 294px;
max-width: 70%;
margin: 0;
padding: 9px 20px 9px;
border: 1px solid var(--navy);
border-bottom: 0;
border-radius: 10px 10px 0 0;
text-align: center;
line-height: 1.3;
}
.p-usecase__tab-en {
display: block;
color: var(--blue-bright, #0098d9);
font-size: .68rem;
font-weight: 700;
letter-spacing: .12em;
}
.p-usecase__tab-ja { display: block; color: var(--navy); font-size: 1.105rem; font-weight: 800; }
/* 写真＋テキスト */
.p-usecase__intro { display: grid; gap: 22px; margin-bottom: 40px; }
.p-usecase__photo { margin: 0; }
/* 実測：外径224・リング18px。
リングは単色ではなく横グラデ。カンプ実測で
9時 = #00368f ／ 3時 = #0098d9 ／ 12時・6時 = 中間の #0067b4
＝ 左から右への 90deg グラデ（番号バッジと同じ作り）。 */
/* 画像が未登録のときのプレースホルダーだけ、CSSでリングを描く。 */
.p-usecase__photo .p-pro-ph {
display: block;
width: 224px;
max-width: 100%;
aspect-ratio: 1;
margin-inline: auto;
border: 18px solid transparent;
background:
linear-gradient(#fff, #fff) padding-box,
linear-gradient(90deg, var(--navy), var(--blue-bright, #0098d9)) border-box;
border-radius: 50%;
object-fit: cover;
}
/* 支給画像はリング・スマホ・PCまで含んだ1枚絵（カンプどおり）。
CSS側でもう一度リングを描くと二重丸になるので、ここでは枠を付けない。 */
.p-usecase__photo img {
display: block;
width: 224px;
max-width: 100%;
height: auto;
margin-inline: auto;
}
/* カンプ p.4：リード見出しの下に細い青の罫線が入り、本文と区切られる。 */
.p-usecase__lead {
margin: 0 0 18px;
padding-bottom: 16px;
border-bottom: 1px solid var(--blue-bright, #0098d9);
color: var(--navy);
font-size: 1.0625rem;
font-weight: 800;
line-height: 1.55;
}
.p-usecase__text { margin: 0; color: #14324f; font-size: .892rem; line-height: 1.95; }
/* カード */
.p-usecase__cards { display: grid; gap: 46px 36px; }
.p-usecase-card {
position: relative;
margin-top: 28px;
padding: 44px 20px 26px;
background: var(--blue-bright, #0098d9);
border-radius: 12px;
color: #fff;
}
.p-usecase-card__icon {
position: absolute;
top: 0;
left: 50%;
transform: translate(-50%, -50%);
display: inline-flex;
align-items: center;
justify-content: center;
width: 55px;
height: 55px;
border-radius: 50%;
border: 5px solid transparent;
background:
linear-gradient(#fff, #fff) padding-box,
linear-gradient(90deg, var(--navy), var(--blue-bright, #0098d9)) border-box;
box-shadow: 0 0 0 2px #fff;
color: var(--navy);
font-size: .62rem;
font-weight: 700;
}
.p-usecase-card__title { margin: 0 0 12px; font-size: 1.01rem; font-weight: 800; line-height: 1.5; text-align: center; }
.p-usecase-card__text { margin: 0; font-size: .85rem; line-height: 1.85; }
@media (min-width: 768px) {
.p-usecase__panel { padding: 48px 65px 64px; }
.p-usecase__intro { grid-template-columns: 224px 1fr; gap: 44px; align-items: center; }
.p-usecase__photo img,
.p-usecase__photo .p-pro-ph { margin-inline: 0; }
.p-usecase__cards { grid-template-columns: repeat(3, 1fr); gap: 36px; }
}
/* ============================================================
選ばれる理由（Reason）※Right のみ
0831カンプ p.4 実測：上部だけ水色グラデ／白カード2枚（角丸・影）
============================================================ */
.p-reason { padding-bottom: var(--sp-section-plain); }
.p-reason__panel {
width: min(980px, 100% - var(--gutter) * 2);
margin-inline: auto;
padding: 40px 24px 56px;
background:
linear-gradient(180deg, #99d6f0 0%, #ffffff 100%) no-repeat top / 100% 300px,
#fff;
/* カンプ実測：上だけ角丸22（下端は白に溶けるので角丸なし）。利用イメージと同じ。 */
border-radius: 22px 22px 0 0;
}
.p-reason__head { margin-bottom: 40px; text-align: center; }
.p-reason__head .section-head__ja { font-size: 1.175rem; }
.p-reason__grid { display: grid; gap: 32px; }
.p-reason-card {
padding: 26px 26px 34px;
background: #fff;
border-radius: 14px;
box-shadow: 0 6px 24px rgba(0, 40, 90, .12);
}
.p-reason-card__media { margin: 0 0 20px; padding-bottom: 20px; border-bottom: 1px solid var(--blue-bright, #0098d9); }
.p-reason-card__media img,
.p-reason-card__media .p-pro-ph { display: block; width: 100%; height: auto; border-radius: 6px; }
.p-reason-card__title { margin: 0 0 12px; color: var(--navy); font-size: 1.098rem; font-weight: 800; line-height: 1.5; }
.p-reason-card__text { margin: 0; color: #14324f; font-size: .915rem; line-height: 1.9; }
@media (min-width: 768px) {
.p-reason__panel { padding: 48px 65px 64px; }
.p-reason__grid { grid-template-columns: 1fr 1fr; gap: 36px; }
}
/* --- 7) 導入フロー --- */
/* 上端の濃色はブランド色（Pro=紺 / Right=水色）。中間色はブランド色に馴染ませる。 */
/* カンプ実測：Pro＝紺のイーズ（435px）／Right＝水色の直線（460px）。 */
.p-pro-flow { background: var(--flow-grad, var(--grad-navy)); padding-bottom: var(--sp-section); border-radius: 32px 32px 0 0; }
/* Right は背景が水色なので見出しは紺（カンプ実測 #00368f）。Pro は白のまま。 */
.p-pro-flow__head { text-align: center; padding: var(--sp-lg) 24px; color: var(--flow-head, #fff); }
.p-pro-flow__head .section-head__en { display: block; letter-spacing: .12em; font-weight: 700; opacity: .9; }
/* 見出しの色は --flow-head（Pro=白／Right=紺）に従わせる。
ここで #fff を直書きすると、水色背景の Right で白のまま読めなくなる。 */
.p-pro-flow__head .section-head__ja { position: relative; display: inline-block; margin-top: 4px; padding-bottom: 14px; font-size: 1.5rem; font-weight: 800; color: inherit; }
/* 下線も同じ。左半分は見出しと同色、右半分は赤。 */
.p-pro-flow__head .section-head__ja::after { content: ""; position: absolute; left: 50%; transform: translateX(-50%); bottom: 0; width: 64px; height: 3px; background: linear-gradient(90deg, currentColor 50%, var(--cta) 50%); }
.p-pro-step { position: relative; background: #fff; border-radius: 16px; padding: 40px 20px 28px; box-shadow: 0 10px 26px rgb(10,58,115,.1); }
.p-pro-step__num {
position: absolute;
top: 0;
left: 24px;
transform: translateY(-45%);
display: inline-flex;
align-items: center;
justify-content: center;
width: 56px;
height: 56px;
border-radius: 50%;
/* 0831カンプ実測：白地／リングは横グラデ #00368f→#0098d9 約4px／数字は赤 */
border: 4px solid transparent;
background:
linear-gradient(#fff, #fff) padding-box,
linear-gradient(90deg, var(--navy), var(--blue-bright, #0098d9)) border-box;
color: var(--cta-deep);
font-size: 1.5rem;
font-weight: 800;
line-height: 1;
}
.p-pro-step .p-pro-ph { margin-bottom: 18px; }
/* 導入フローの写真の比率は PC と SP で違う。
PC カンプ実測 464x407（約1.14）… 原寸比のまま（variant='natural'）
SP カンプ実測 299x151（約2:1） … 横長に切り取る
natural は実寸比を inline style で持つので、SPでは !important で上書きする。 */
@media (max-width: 767px) {
.p-pro-step .p-pro-img,
.p-pro-step .p-pro-ph {
aspect-ratio: 2 / 1 !important;
height: auto;
object-fit: cover;
}
}
/* カンプ実測：ステップの見出しは紺 #00368f（水色ではない）。本文は黒。 */
.p-pro-step__title { text-align: center; color: var(--navy, #00368f); font-size: 1.2rem; font-weight: 800; margin: 0 0 12px; }
.p-pro-step__text { margin: 0; line-height: 1.9; color: #000; text-align: left; }
/* ステップ間：二重シェブロン（≫を下向き） */
.p-pro-flow__arrow { display: flex; flex-direction: column; align-items: center; padding: 14px 0; }
.p-pro-flow__arrow::before,
.p-pro-flow__arrow::after { content: ""; width: 18px; height: 18px; border-right: 5px solid var(--blue-mid); border-bottom: 5px solid var(--blue-mid); transform: rotate(45deg); }
.p-pro-flow__arrow::after { margin-top: -6px; }
/* --- 8) 資料ダウンロードバナー --- */
/* 帯の色はコンプ実測 #0098d9（--blue-bright）。全幅で敷く。 */
/* カンプ実測：帯の高さ318px（上72／下84の余白）。以前は48/44で窮屈だった。 */
.p-pro-dlbanner { background: var(--blue-bright); color: #fff; text-align: center; padding: var(--sp-section) 24px; }
/* 見出しとボタンが近すぎたので一行ぶん空ける。 */
.p-pro-dlbanner__title { margin: 0 0 34px; font-size: 1.5rem; font-weight: 800; line-height: 1.5; }
.p-pro-dlbanner__cta { margin: 8px 0 0; }
.p-pro-dlbanner__cta .btn { width: 100%; max-width: 360px; }
/* CTAボタンはメインビジュアルと同一（共通ブロックの光沢＋白丸SVGアイコンを継承）。光沢をピル形にクリップ */
.p-pro-dlbanner__cta .btn--cta { overflow: hidden; }
/* --- 10) こんな方におすすめ！ --- */
/* --- こんな方におすすめ！（チェックリスト／フォーム直前） ------------------
0831カンプでは Recommend パネルとは別に、この帯もフォームの直前に入る。
紛らわしいので、パネル側は .p-reco* 、こちらは .p-pro-reco* で分けている。 */
.p-pro-reco { background: #fff; padding: 44px 24px 56px; }
/* 見出し：0831カンプ実測 580x69・上だけ角丸24・幅980のネイビー線に接地。
（0817版はピル型だったが 0831 で帯型に変わっている） */
.p-pro-reco__head {
position: relative;
display: block;
width: max-content;
min-width: min(580px, 100%);
max-width: 100%;
margin: 0 auto 44px;
padding: 15px 32px;
background: var(--navy);
color: #fff;
font-size: clamp(1.05rem, 4.6vw, 1.35rem);
font-weight: 800;
letter-spacing: .04em;
border-radius: 24px 24px 0 0;
text-align: center;
white-space: nowrap;
}
.p-pro-reco__head::after {
content: "";
position: absolute;
left: 50%;
bottom: 0;
transform: translateX(-50%);
/* 特徴ブロックの横線も座布団と同じ幅に追従させる。 */
width: var(--shiki);
max-width: 100vw;
height: 2px;
background: var(--navy);
}
/* カンプでは項目の塊が内容幅ぴったりで中央寄せ。固定幅にすると左に流れる。 */
.p-pro-reco__list { list-style: none; width: max-content; max-width: 100%; margin: 0 auto; padding: 0; display: grid; gap: 23px; }
.p-pro-reco__list li { position: relative; padding-left: 46px; font-size: 1.1rem; font-weight: 700; line-height: 1.5; }
.p-pro-reco__list li::before {
content: "";
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
width: 35px;
height: 35px;
border-radius: 50%;
/* 0831カンプ：塗りつぶしの青丸ではなく、白地＋グラデのリング＋同色のチェック */
border: 3px solid transparent;
background:
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%230073ba' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round' d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 19px 19px no-repeat padding-box,
linear-gradient(#fff, #fff) padding-box,
linear-gradient(90deg, var(--navy), var(--blue-bright, #0098d9)) border-box;
}
/* --- こんな方におすすめ（0831カンプ実測） ---------------------------------
パネル 980x447 / 角丸20 / 背景 #00368f、内側パディング左右65・下50。
白カードは 259x247 / 角丸12 / gap 36 の3列。
旧デザイン（白背景＋ピル見出し＋箇条書き）から全面差し替え。 */
/* 白地のセクション。中の座布団が色を持つので、外側の余白は一段下げる。
下だけは次が全面の色帯（解決帯）なので、カンプ実測 187px までしっかり空ける。 */
.p-reco {
background: #fff;
padding-top: var(--sp-section-plain);
padding-bottom: clamp(88px, 14.6vw, 187px);
}
.p-reco__panel {
width: min(980px, 100% - var(--gutter) * 2);
margin-inline: auto;
padding: 40px 24px 44px;
background: var(--brand, var(--navy));
border-radius: 20px;
}
.p-reco__head { margin-bottom: 34px; text-align: center; }
.p-reco__grid { display: grid; gap: 44px 36px; }
.p-reco-card {
position: relative;
/* 3枚で本文の行数が違うので、アイコン＋本文のかたまりを上下中央に置く
（上詰めだと2行のカードだけ文字が上に寄って見える）。 */
display: flex;
flex-direction: column;
justify-content: center;
min-height: 247px;
padding: 28px 20px;
background: #fff;
border-radius: 12px;
text-align: center;
}
/* 0831カンプ実測（Pro p.3 / Right p.4 共通）：
カードの「中」に直径100の薄い水色の円（#e1e9f6）。カード上端から38px・左右中央。
縁に食い込む白丸＋グラデ枠ではない（利用イメージのカードとは別デザイン）。 */
.p-reco-card__icon {
display: flex;
align-items: center;
justify-content: center;
width: 100px;
height: 100px;
margin: 0 auto 20px;
border-radius: 50%;
background: #e1e9f6;
color: var(--navy);
overflow: hidden;
}
.p-reco-card__icon img { width: 100%; height: 100%; object-fit: contain; border-radius: 50%; }
.p-reco-card__icon-ph { font-size: .8rem; font-weight: 700; }
.p-reco-card__text { margin: 0; color: var(--navy); font-size: .95rem; font-weight: 700; line-height: 1.75; }
@media (min-width: 768px) {
.p-reco__panel { padding: 40px 65px 50px; }
.p-reco__grid { grid-template-columns: repeat(3, 1fr); gap: 36px; }
.p-reco-card { padding: 38px 22px 28px; }
}
/* --- 11) お問い合わせフォーム（CRM埋め込み） --- */
.p-pro-form { background: #eaf1f8; padding: var(--sp-section) 24px; }
/* CRMコード未入力時のプレースホルダー（コンプの「ここにフォームが入ります」枠） */
.p-pro-form__ph {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 12px;
min-height: 320px;
padding: 40px 24px;
background: #e6e6e6;
border-radius: 16px;
text-align: center;
}
.p-pro-form__ph-main { margin: 0; color: var(--cta); font-weight: 800; font-size: 1.15rem; line-height: 1.6; }
.p-pro-form__ph-note { margin: 0; color: var(--muted); font-size: .85rem; }
.lp-form { background: #fff; border-radius: 16px; padding: 28px 20px; box-shadow: 0 10px 26px rgb(10,58,115,.08); }
.lp-form__note { margin: 0 0 20px; color: var(--cta); font-size: .85rem; font-weight: 700; text-align: center; }
.lp-form__row { margin-bottom: 18px; }
.lp-form__row label { display: block; margin-bottom: 8px; font-weight: 700; font-size: .95rem; }
.lp-form__req { display: inline-block; margin-left: 6px; padding: 2px 8px; background: var(--cta); color: #fff; font-size: .7rem; border-radius: 4px; vertical-align: middle; }
.lp-form input, .lp-form textarea { width: 100%; padding: 12px 14px; border: 1.5px solid var(--line); border-radius: 8px; font-size: 1rem; font-family: inherit; background: #fff; }
.lp-form input:focus, .lp-form textarea:focus { outline: none; border-color: var(--blue); }
.lp-form__submit { margin-top: 24px; text-align: center; }
.lp-form__submit .btn { width: 100%; max-width: 320px; }
/* ============================================================
Proページ PCレイアウト（0817_2コンプ実測）
SPは従来の縦積みを維持し、768px以上でのみ多カラム化する。
============================================================ */
@media (min-width: 768px) {
/* TOPはカバーブロック。WP標準が
「.wp-block-cover.has-custom-content-position.has-custom-content-position.is-position-bottom-left
.wp-block-cover__inner-container { width:auto; margin:0 }」という
クラス5個ぶんの強さで指定しているため、!important で明示的に上書きする。 */
.p-hero.wp-block-cover .wp-block-cover__inner-container {
width: min(var(--shiki), 100% - var(--gutter) * 2) !important;
margin-inline: auto !important;
padding-inline: 0;
}
/* ヒーローは右端に20pxの余白があるぶん中央軸が左に10pxずれる。
同じ幅を左に足して軸を画面中央に戻すと、座布団の左端(150px)と一直線になる。
（TOPはヒーロー自体のpadding=0、Proは24pxなので足し込み後の値が異なる） */
/* 足す量＝そのヒーローの右余白ぶん（TOP:56px / Pro:20px＋自身のpadding24px） */
.p-hero.wp-block-cover { padding-left: 56px; }
/* ヒーローのCTAはコンプ実測で幅240px・高さ50pxのピル。
SPは全幅のままなので、PCでのみ固定幅にして左寄せにする。 */
.p-hero .hero__cta { display: flex; justify-content: flex-start; }
.p-hero .hero__cta .wp-block-button { width: auto; }
/* コンプは「文字は左寄り・▼の丸アイコンは右端」。
中央寄せのままだと文字がアイコンに重なるので左寄せにし、文字も実測に合わせる。 */
.p-hero .hero__cta .wp-block-button__link,
.p-pro-hero__cta .btn {
max-width: none;
justify-content: flex-start;
padding-left: 24px;
padding-right: 60px;
font-size: .95rem;
}
/* TOPのヒーローは 240x50（0817カンプ）。ここは据え置き。 */
.p-hero .hero__cta .wp-block-button__link { width: 240px; min-height: 50px; }
/* Pro / Right のヒーローは 0831カンプ実測で 246x56。 */
.p-pro-hero__cta .btn { width: 246px; min-height: 56px; }
/* --- こんなお悩みありませんか？ ---
980pxの座布団（紺→白グラデ）の中に、見出し＋3カラム。
カラムはTOPのカードと同じ格子（site 216 / 511 / 806・幅259・間37）。 */
.p-pro-worry {
width: min(var(--shiki), 100% - var(--gutter) * 2);
margin-inline: auto;
padding-bottom: 64px;
/* 上端はブランド寄り。Right は水色系（カンプ実測 #bde4f5→#b4e1f4→#d5eef9→白）。 */
background: linear-gradient(180deg, var(--worry-1, #21509d) 0%, var(--worry-2, #6384bb) 15%, var(--worry-3, #a9bbd9) 31%, var(--worry-4, #dbe3ef) 46%, #fff 70%);
border-radius: 28px;
overflow: hidden;
}
.p-pro-worry__head {
padding: 48px 24px 40px;
background: none;
border-radius: 0;
}
.p-pro-worry .l-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
column-gap: 40px;
align-items: start;
}
.p-pro-worry__item { margin-bottom: 0; padding-bottom: 0; }
.p-pro-worry__lead { margin-inline: 0; }
.p-pro-worry__text { text-align: left; }
/* --- SUZUKI FLEET Proの特徴 ---
番号タブ＋横線（__badge）が、このブロックの最大幅。
その下の中身（__body）だけを --block-inset ぶん内側に寄せる。
グリッドも __body に持たせている。以前は .p-pro-feature に直接掛けていたため
「線より下だけ」をまとめて動かす受け皿が無かった。
中身は「画像左424px ＋ テキスト右（間90px）」（カンプ実測）。 */
.p-pro-feature { text-align: left; }
.p-pro-feature__body {
padding-inline: var(--block-inset);
display: grid;
grid-template-columns: 424px 1fr;
column-gap: 90px;
grid-template-areas:
"media lead"
"media text"
"media ."
"cards cards";
align-content: start;
}
.p-pro-feature .p-pro-img,
.p-pro-feature .p-pro-ph { grid-area: media; align-self: start; margin-bottom: 0; }
.p-pro-feature__lead { grid-area: lead; align-self: end; }
.p-pro-feature__text { grid-area: text; align-self: start; }
.p-pro-subcards { grid-area: cards; }
/* 特徴①のサブカード：TOPのカードと同じ3列格子 */
.p-pro-subcards {
display: grid;
grid-template-columns: repeat(3, 1fr);
column-gap: 35px; /* カンプ実測 */
margin-top: 82px; /* カンプ実測：画像の下端からカード上端まで82px */
}
/* サブカードの寸法・文字（カンプ実測）
padding 上49 / 左右28 / 下39
本文 15px・行送り22px（1.9 では行間が空きすぎてカードが縦に伸びていた）
アイコン円 直径57px。カード上端から26px上にはみ出す（半分の28.5pxではない） */
.p-pro-subcard { padding: 49px 28px 39px; }
.p-pro-subcard__text { font-size: .94rem; line-height: 1.47; }
.p-pro-subcard__icon { width: 57px; height: 57px; transform: translate(-50%, -26px); }
.p-pro-subcard { margin-bottom: 0; }
/* --- 導入フロー ---
980pxの座布団（上420pxだけ紺→白のグラデ）の中に、582px幅のカードを縦に4枚。
カードの中は「画像左256px ＋ テキスト右」。番号丸は既存の絶対配置のまま。 */
.p-pro-flow {
width: min(var(--shiki), 100% - var(--gutter) * 2);
margin-inline: auto;
padding-bottom: var(--sp-section);
border-radius: 28px;
/* 上端はブランド色寄り。Right は水色系に置き換わる。 */
background:
var(--flow-grad, var(--grad-navy)) no-repeat top / 100% 435px,
#fff;
overflow: hidden;
}
.p-pro-flow .l-container { width: min(582px, 100% - var(--gutter) * 2); }
.p-pro-step {
display: grid;
grid-template-columns: 256px 1fr;
column-gap: 34px;
grid-template-areas:
"media title"
"media text";
align-items: center;
padding: 28px 24px 24px;
}
.p-pro-step .p-pro-img,
.p-pro-step .p-pro-ph { grid-area: media; align-self: center; margin-bottom: 0; }
.p-pro-step__title { grid-area: title; align-self: end; margin: 0 0 8px; text-align: left; }
.p-pro-step__text { grid-area: text; align-self: start; }
/* --- こんな方におすすめ／お問い合わせフォーム ---
コンプ実測：どちらも幅580pxの中央ブロック。見出しは幅いっぱいの紺バー。 */
.p-pro-form { background: #fff; }
.p-pro-form .l-container { width: min(580px, 100% - var(--gutter) * 2); }
}
/* ============================================================
イベント情報 詳細ページ（single-event.php）
本番サイトの構成に準拠。サイト共通のトークン（幅・色・ボタン）を使う。
============================================================ */
.p-event-single { padding-block: 40px 72px; }
.event-single__label {
margin: 0 0 16px;
color: var(--blue);
font-size: 1.1rem;
font-weight: 800;
letter-spacing: .1em;
}
.event-single__meta {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 10px 16px;
margin-bottom: 16px;
font-size: .85rem;
}
/* 受付中＝青／開催終了＝グレー */
.event-single__status,
.event-single__type {
display: inline-block;
padding: 4px 14px;
border-radius: 4px;
font-weight: 700;
line-height: 1.6;
}
.event-single__status { background: var(--blue); color: #fff; }
.event-single__status.is-closed { background: #b6bcc4; color: #fff; }
.event-single__type { background: var(--blue-pale); color: var(--blue); }
.event-single__metaitem { color: var(--muted); }
.event-single__metakey { margin-right: 8px; font-weight: 700; color: var(--navy); }
.event-single__metakey::after { content: "："; }
.event-single__title {
margin: 0 0 28px;
font-size: clamp(1.35rem, 4vw, 1.9rem);
font-weight: 800;
line-height: 1.5;
color: var(--navy);
}
.event-single__visual { margin: 0 0 32px; border-radius: 16px; overflow: hidden; }
.event-single__visual img { display: block; width: 100%; height: auto; }
.event-single__lead {
list-style: none;
margin: 0 0 24px;
padding: 0;
font-weight: 700;
line-height: 1.9;
color: var(--navy);
}
.event-single__body { line-height: 1.95; }
.event-single__body > * + * { margin-top: 1.2em; }
.event-single__body h2,
.event-single__body h3 {
margin-top: 2em;
font-size: 1.15rem;
font-weight: 800;
color: var(--blue);
}
/* 開催概要：定義リストを2カラムの表組み風に */
.event-single__outline { margin-top: 48px; }
.event-single__outline-head {
margin: 0 0 16px;
padding-bottom: 10px;
border-bottom: 2px solid var(--blue);
font-size: 1.15rem;
font-weight: 800;
color: var(--navy);
}
.event-single__outline-list {
display: grid;
grid-template-columns: max-content 1fr;
gap: 0;
margin: 0;
}
.event-single__outline-list dt,
.event-single__outline-list dd {
margin: 0;
padding: 14px 0;
border-bottom: 1px solid var(--line);
line-height: 1.7;
}
.event-single__outline-list dt { padding-right: 32px; font-weight: 700; color: var(--navy); white-space: nowrap; }
.event-single__apply { margin: 40px 0 0; text-align: center; }
.event-single__apply .btn { min-width: 280px; }
.event-single__closed {
margin: 40px 0 0;
padding: 16px;
background: var(--gray-bg);
border-radius: 10px;
text-align: center;
font-weight: 700;
color: var(--muted);
}
.event-single__back { margin: 40px 0 0; text-align: center; }
.breadcrumb--foot {
margin-top: 56px;
padding-top: 20px;
border-top: 1px solid var(--line);
font-size: .8rem;
color: var(--muted);
}
.breadcrumb--foot a { color: var(--muted); }
/* ============================================================
横スクロールのヒント（ScrollHint相当・自前実装）
JSが .slider を .slider-wrap で包み、はみ出している時だけ
.is-scrollable が付く。一度スクロールすると .is-scrolled でヒントが消える。
============================================================ */
.slider-wrap { position: relative; }
/* 右端の白いフェードは 0910_3 の指摘（AUN #29「表示ずれ」）で削除。
導入事例・お役立ち記事のスライダーは水色の座布団の上に乗るため、
白のグラデーションが座布団の色と合わず、白い帯が浮いて見えていた。
座布団自体が上下でグラデーションしているので単色では合わせられず、
カンプにもフェードは無いことから、表示しない方針にした。 */
.slider-hint {
display: none;
align-items: center;
justify-content: center;
gap: 8px;
margin-top: 14px;
color: var(--blue);
font-size: .8rem;
font-weight: 700;
transition: opacity .3s ease;
}
.slider-wrap.is-scrollable .slider-hint { display: flex; }
.slider-wrap.is-scrolled .slider-hint { opacity: 0; }
/* 左右に揺れる矢印アイコン（画像素材を使わずCSSだけで描く） */
.slider-hint__icon {
position: relative;
width: 34px;
height: 14px;
flex: 0 0 auto;
}
.slider-hint__icon::before,
.slider-hint__icon::after {
content: "";
position: absolute;
top: 50%;
width: 8px;
height: 8px;
border-top: 2px solid currentColor;
border-right: 2px solid currentColor;
}
.slider-hint__icon::before { left: 0; transform: translateY(-50%) rotate(-135deg); }
.slider-hint__icon::after { right: 0; transform: translateY(-50%) rotate(45deg); }
@media (prefers-reduced-motion: no-preference) {
.slider-hint__icon::before { animation: slider-hint-l 1.4s ease-in-out infinite; }
.slider-hint__icon::after { animation: slider-hint-r 1.4s ease-in-out infinite; }
}
@keyframes slider-hint-l {
0%, 100% { transform: translateY(-50%) rotate(-135deg) translate(0, 0); }
50% { transform: translateY(-50%) rotate(-135deg) translate(-3px, -3px); }
}
@keyframes slider-hint-r {
0%, 100% { transform: translateY(-50%) rotate(45deg) translate(0, 0); }
50% { transform: translateY(-50%) rotate(45deg) translate(3px, 3px); }
}
/* ============================================================
最新情報 詳細ページ（single.php）
イベント詳細と同じ作法。共通部分は .event-single__* の定義を流用し、
ここでは最新情報だけの差分（カテゴリバッジの色・日付の見せ方）を定義する。
============================================================ */
.p-news-single { padding-block: 40px 72px; }
.news-single__label {
margin: 0 0 16px;
color: var(--blue);
font-size: 1.1rem;
font-weight: 800;
letter-spacing: .1em;
}
.news-single__meta {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 10px 16px;
margin-bottom: 16px;
font-size: .85rem;
}
/* カテゴリは赤系バッジ（イベントの青バッジと見分けられるように） */
.news-single__cat {
display: inline-block;
padding: 4px 14px;
border-radius: 4px;
background: var(--cta);
color: #fff;
font-weight: 700;
line-height: 1.6;
}
.news-single__date { color: var(--muted); font-weight: 700; }
.news-single__title {
margin: 0 0 28px;
font-size: clamp(1.35rem, 4vw, 1.9rem);
font-weight: 800;
line-height: 1.5;
color: var(--navy);
}
.news-single__visual { margin: 0 0 32px; border-radius: 16px; overflow: hidden; }
.news-single__visual img { display: block; width: 100%; height: auto; }
.news-single__body { line-height: 1.95; }
.news-single__body > * + * { margin-top: 1.2em; }
.news-single__body h2,
.news-single__body h3 {
margin-top: 2em;
font-size: 1.15rem;
font-weight: 800;
color: var(--blue);
}
/* 本文中のリンクは下線付きで分かるように（お知らせは外部リンクが多い） */
.news-single__body a {
color: var(--blue);
text-decoration: underline;
word-break: break-all;
}
.news-single__body img { max-width: 100%; height: auto; border-radius: 10px; }
.news-single__back { margin: 48px 0 0; text-align: center; }
/* ============================================================
TOP：ヘッダー＋ヒーロー PC実測合わせ（pc0817_2 カンプ）
------------------------------------------------------------
カンプを 72dpi でラスタライズし、サイト枠(1280px)基準でピクセル実測した値。
横位置は「コンテンツ幅を本番サイト基準の1200pxに広げる」判断を先に入れているため
カンプ(980px)とは一致しない。ここで合わせるのは **サイズと縦位置** のみ。
============================================================ */
@media (min-width: 768px) {
/* --- ヘッダー（カンプ実測：帯の高さ64px） ---
中で一番背の高い要素がハンバーガー(44px)だったため 68px になっていた。
カンプはハンバーガー31px・ボタン37px・ロゴ35pxで、帯は64px。 */
/* メニューボタン（76×72）が入るぶん、帯はカンプ64pxより高い96pxになる。 */
.site-header__inner { --hdr-pad: 12px; }
/* ロゴは logo.svg のアートボード(252.2×34.47)と実寸が一致する。＝等倍で置く */
.site-header__logo img { height: 35px; }
/* ヘッダーCTA：カンプ実測 126×37・角丸7・ボタン間14px */
.site-header__cta { gap: 14px; }
.site-header__cta .btn { width: 126px; min-height: 37px; }
/* ベタ塗りブロックなので、PCで丸に縮める指定は外した。
CTAとの間隔はカンプより広めに取り、独立したブロックに見せる。 */
.menu-toggle { margin-left: 22px; }
.site-header__right { gap: 10px; }
/* --- ヒーロー（カンプ実測：高さ660px・右上/右下の角丸48px） --- */
.p-hero.wp-block-cover {
/* カバーブロックが吐くインライン style="min-height:84vh" を上書きするため !important。 */
min-height: 660px !important;
/* 角丸はメニューパネルと同じ 48px。SPは26px幅ぶん小さいので別値のまま。 */
border-radius: 0 48px 48px 0;
}
/* 中身は上下パディングが 20px / 44px と非対称だったため、
justify-content:center でも全体が上に寄っていた（カンプ比 -14px）。
上下を揃えるとヒーローの中で正しく中央に来る。 */
.p-hero .wp-block-cover__inner-container { padding-block: 24px; }
/* ヒーロー内ロゴ：カンプ実測 261×84（mv_logo01.svg の viewBox 161×52 と同比） */
.p-hero .hero__logo::before { height: 84px; }
/* キャッチコピー：0910カンプ実測 33px／行送り45.4（＝1.37）。
「アルコールチェック漏れ防止を」14字＝464.7px なので、
48pxのままだと下の max-width:520px に収まらず4行に折り返す。
（0831カンプの1行コピー時代は48pxだった） */
.p-hero .hero__title { font-size: 2.0625rem; line-height: 1.37; margin-bottom: 18px; }
.p-hero .hero__lead { font-size: 1.25rem; line-height: 1.8; }
/* カンプではヒーローのテキストが左半分に収まり、右半分はイラスト。
コンテナ幅(1120px)いっぱいに流すと文字がイラストに重なるため、
テキスト側だけ折り返し幅を制限する。※カンプに無い、実装側の判断。 */
.p-hero .hero__title,
.p-hero .hero__lead { max-width: 520px; }
/* --- サービス詳細（Service Lineup） PC実測合わせ ---
カンプ：座布団980 / コンテンツ848 / カード389 / カード間73 / 画像高154。
コンテンツ幅を1120pxに広げているぶん、カード幅は自動で伸びる。
カード間だけは「20px」と詰まりすぎていたので、カンプの73pxに合わせる。 */
.p-top__lineup .wp-block-columns { gap: 72px; }
/* 画像の高さは「カード幅 389 : 画像高 154」の比率に合わせる。
カード幅524pxに対して 524 × 154/389 ≒ 207px。 */
/* 高さ固定は0910の支給素材（391x171）と比率が合わず左右が切れるため、
aspect-ratio に任せる（上の .lineup__card .wp-block-image を参照）。 */
}
/* ============================================================
機能紹介（[suzuki_functions]）
------------------------------------------------------------
カンプ 0831 PC実測（site座標）
セクション見出し y1575..1597（斜線装飾は .p-pro-cap を流用）
座布団 980×1010・角丸20・#e2eaf6。2枚を96px間隔で縦に並べる
カテゴリアイコン 50×54・中央・座布団上端から34px
カテゴリ見出し 22px、直下に見出しと同じ幅の2色下線（青→赤）
カード 389×352・2列・間72 / 行間63
番号バッジ 直径54・白丸＋紺リング・赤数字。**中心がカードの上端に乗る**
カード内 見出し22px中央 / 本文15px・行送り22 / 画像280×168・中央
コンテンツ幅を1120pxに広げているため、カード幅は (1120-72)/2 = 524px になる。
※SPはカンプ未実測。1カラムに落とすだけの素直な指定にしてある。
============================================================ */
.p-func { padding-block: var(--sp-lg) var(--sp-section); }
/* ＼ 業務で車両を…を解決します ／
斜線の装飾は .p-pro-cap を流用しているが、あちらは紺のヒーロー用で
線が白のため、白背景のこのセクションでは見えない。ここで紺に上書きする。
カンプ実測：線は幅14・高23・色 #00368f、テキストとの間隔は左右とも約37px。 */
.p-func__lead {
margin: 0 auto clamp(24px, 4vw, 40px);
padding-inline: 51px; /* 線の幅14 ＋ 間隔37 */
font-size: clamp(1.05rem, 3.4vw, 1.35rem);
font-weight: 800;
color: var(--blue);
}
.p-func__lead::before,
.p-func__lead::after {
height: 23px;
background: var(--blue);
}
.p-func__panel {
width: min(var(--shiki), 100% - var(--gutter) * 2);
margin-inline: auto;
padding: 34px var(--gutter) 64px;
background: #e2eaf6;
border-radius: 20px;
}
.p-func__panel + .p-func__panel { margin-top: 96px; }
.p-func__head { text-align: center; margin-bottom: 46px; }
.p-func__icon {
display: block;
/* カンプ実測：高さ54px・中央。アイコンごとに縦横比が違う
（安全運転管理=クリップボード＋車 1014×1162 / 法令対応=検知器 346×1103）ので、
54×54 の枠に contain で収める。枠を揃えれば見出しとの間隔も揃う。
alt を持たせるため span の背景画像ではなく ![]()
にしたので、
contain / 下寄せは object-fit 側で指定する。 */
width: 54px;
height: 54px;
margin: 0 auto 15px;
object-fit: contain;
object-position: center bottom;
}
.p-func__title {
position: relative;
display: inline-block;
margin: 0;
padding-bottom: 13px;
font-size: 1.375rem;
font-weight: 800;
color: var(--blue);
}
/* 下線は見出しと同じ幅（カンプ実測：見出し584..697 / 下線582..699） */
.p-func__title::after {
content: "";
position: absolute;
left: 0;
right: 0;
bottom: 0;
height: 2px;
background: linear-gradient(90deg, var(--blue) 0 50%, var(--cta) 50%);
}
.p-func__grid { display: grid; gap: 63px 72px; }
.p-func-card {
position: relative;
background: #fff;
border-radius: 16px;
padding: 31px 45px 28px;
text-align: center;
}
/* 番号バッジ：中心がカードの上端にちょうど乗る（＝半分はみ出す） */
.p-func-card__num {
position: absolute;
top: 0;
left: 53px;
transform: translate(-50%, -50%);
display: inline-flex;
align-items: center;
justify-content: center;
width: 54px;
height: 54px;
border-radius: 50%;
/* 0831カンプ実測：外径54／リングは横グラデ #00368f→#0098d9 の4px／
その外に白フチ3px／中は白・数字は赤。導入フローの番号（.p-pro-step__num）と同じ作り。 */
border: 4px solid transparent;
background:
linear-gradient(#fff, #fff) padding-box,
linear-gradient(90deg, var(--navy), var(--blue-bright, #0098d9)) border-box;
box-shadow: 0 0 0 3px #fff;
color: var(--cta-deep);
font-size: 1.375rem;
font-weight: 800;
line-height: 1;
}
.p-func-card__title {
margin: 0 0 20px;
font-size: 1.375rem;
font-weight: 800;
/* 0831カンプ実測：TOP(p.1)・Pro(p.3)・Right(p.4) いずれも #00368f。水色ではない。 */
color: var(--navy);
}
.p-func-card__text {
margin: 0 0 43px;
font-size: .94rem;
line-height: 1.47;
text-align: left;
}
/* 実画像とプレースホルダーで共通の枠。
実画像は縦横比がまちまち（760×431〜480）なので、高さは成り行きにする。
プレースホルダー（.p-pro-ph）の時だけ 5:3 の箱を作る。 */
.p-func-card__img {
display: block;
width: 100%;
max-width: 280px;
margin-inline: auto;
height: auto;
/* 影は画像側（PNG）に焼き込まれているため、CSSでは付けない。
box-shadow を足すと矩形の影が二重にかかる。 */
}
.p-func-card__img.p-pro-ph { aspect-ratio: 5 / 3; }
/* SPはカードが狭いので左右インセットを詰める。
SPカンプ p.1 実測：カード312px・本文240px＝左右36px。
45pxのままだと本文が204pxまで痩せ、1行あたり4文字少なくなっていた。 */
@media (max-width: 767px) {
.p-func-card { padding: 31px 28px 28px; }
}
@media (min-width: 768px) {
.p-func__grid {
/* 100% は座布団の内側（左右パディングを引いた幅）なので、
ここでさらに --gutter を引くとコンテンツ幅1120pxに届かない。 */
width: min(var(--container), 100%);
margin-inline: auto;
grid-template-columns: repeat(2, 1fr);
}
}
/* ============================================================
最新情報（リスト型）
------------------------------------------------------------
0910_2カンプ（PC p.1）実測・site座標：
座布団 幅980（x147..1126）／上だけ角丸20／#99d6f0→白 の縦グラデ494px
リスト 幅813（x231..1043）＝座布団の内側84px
バッジ 左239／高さ24／ピル／お知らせ=#de0039・メディア掲載=#00368f
タイトル 左410 … バッジの文字数に関わらず揃うので、バッジ列は固定幅
行ピッチ 約67／項目の「間」にだけ紺1pxの罫線（最後の下には無い）
0831までのカード型スライダーから全面差し替え。
============================================================ */
.news-list {
list-style: none;
width: min(813px, 100%);
margin: 0 auto;
padding: 0;
}
.news-list__item + .news-list__item {
border-top: 1px solid var(--navy, #00368f);
}
.news-list__link {
display: flex;
align-items: center;
gap: 16px;
padding: 21px 8px;
color: var(--navy, #00368f);
text-decoration: none;
}
.news-list__badge {
flex: 0 0 auto;
/* バッジ列を固定幅にして、タイトルの左端を揃える（カンプ実測171px）。 */
width: 155px;
padding: 3px 0;
border-radius: 999px;
color: #fff;
font-size: .8125rem;
font-weight: 700;
line-height: 1.4;
text-align: center;
}
.news-list__badge--news { background: var(--cta-deep, #de0039); }
.news-list__badge--media { background: var(--navy, #00368f); }
.news-list__title {
font-size: 1rem;
font-weight: 700;
line-height: 1.5;
}
/* 一覧ページ版（0910_3カンプ p.7）：全行に下罫線、バッジは小さめ。
TOPの3件リストは行間の罫線だけなので、こちらだけ上書きする。 */
.news-list--archive { width: 100%; }
.news-list--archive .news-list__item { border-top: 0; border-bottom: 1px solid var(--navy, #00368f); }
.news-list--archive .news-list__link { padding: 14px 0; gap: 14px; }
.news-list--archive .news-list__badge { width: 97px; font-size: .75rem; }
.news-list--archive .news-list__title { font-size: .9375rem; }
@media (hover: hover) {
.news-list__link:hover .news-list__title { text-decoration: underline; }
}
/* SPはバッジを上、タイトルを下に積む（横に並べると幅が足りない） */
@media (max-width: 767px) {
.news-list__link { flex-direction: column; align-items: flex-start; gap: 8px; padding: 16px 0; }
.news-list__badge { width: auto; min-width: 120px; padding: 3px 16px; }
.news-list__title { font-size: .9375rem; }
}
/* ============================================================
お役立ち資料バナー（[suzuki_doc_banner]）
------------------------------------------------------------
0910_2カンプ（PC p.1）実測・site座標：
バナー x350..1330 ＝ 幅981（980座布団と同じ）／高さ351
赤ボタン バナー左端から79・上端から204／405 x 60
背景は支給画像1枚。ボタンだけコーディングで載せる。
画像が伸縮してもズレないよう、ボタンの位置・大きさは％で持つ。
左 79/981 = 8.05% 上 204/351 = 58.1%
幅 405/981 = 41.3% 高 60/351 = 17.1%
============================================================ */
.p-doc-banner { position: relative; }
.p-doc-banner__bg {
display: block;
width: 100%;
height: auto;
/* 支給画像に角丸（原寸20px＝表示約10px）が焼き込まれているので、
CSS側では丸めない。16px を掛けると焼き込みの角より内側を切ってしまい、
四隅が欠けて見える。 */
}
.p-doc-banner__bg--ph {
display: grid;
place-items: center;
aspect-ratio: 981 / 351;
border-radius: 10px;
background: #dfe6ee;
color: var(--muted, #7a7a7a);
font-size: .9rem;
}
.p-doc-banner__btn {
position: absolute;
left: 8.05%;
top: 58.1%;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
width: 41.3%;
height: 17.1%;
padding-right: 3%; /* 右の丸アイコンぶん */
/* ヒーローCTAと同じ2色。上半分が明るい赤。 */
background: #de0039;
border: 2px solid #fff;
border-radius: 999px;
color: #fff;
font-size: clamp(.8rem, 1.35vw, 1.05rem);
font-weight: 800;
line-height: 1.2;
text-decoration: none;
box-shadow: 0 8px 18px rgb(0, 0, 0, .22);
}
/* 上半分だけ明るくする（ヒーローCTAと同じ作り） */
.p-doc-banner__btn::before {
content: "";
position: absolute;
inset: 0;
border-radius: 999px;
background: linear-gradient(
to bottom,
rgb(255, 255, 255, .28) 0%,
rgb(255, 255, 255, .28) 50%,
rgb(255, 255, 255, 0) 50%
);
pointer-events: none;
}
/* 右端の丸＋▶アイコン（カンプ：白い輪＋白い右向き三角）。
ヒーローCTAの mv_btn_icon.svg は▼なので、ここでは使わない。 */
.p-doc-banner__btn::after {
content: "";
position: absolute;
right: 5%;
top: 50%;
transform: translateY(-50%);
width: 1.8em;
height: 1.8em;
background: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2032%2032'%3E%3Ccircle%20cx='16'%20cy='16'%20r='14'%20fill='none'%20stroke='white'%20stroke-width='2'/%3E%3Cpath%20d='M13%2010.5%20L22%2016%20L13%2021.5%20Z'%20fill='white'/%3E%3C/svg%3E") no-repeat center / contain;
}
@media (hover: hover) {
.p-doc-banner__btn:hover { opacity: .9; }
}
/* 光沢の ::before は絶対配置なので、何もしないと静的な文字の上に重なって
白文字がかすんで見える。ヒーローCTAと同じく文字を前面に上げる。 */
.p-doc-banner__label {
position: relative;
z-index: 1;
}
/* 文言はPCとSPで違う。両方を出しておいて、画面幅で片方だけ見せる。 */
.p-doc-banner__label--sp { display: none; }
/* --- SP（0910_2カンプ p.1 実測） ---
バナーは横長ではなく縦長の別素材（doc-banner-sp.png）。
艦板390に対して 幅336（左右27）・高さ417。
赤ボタン：バナー左端から9.8%／上端から79.4%／幅79.5%・高12.2%。
PCの▶アイコンはSPカンプには無い。 */
@media (max-width: 767px) {
.p-doc-banner--has-sp .p-doc-banner__btn {
left: 9.8%;
top: 79.4%;
width: 79.5%;
height: 12.2%;
padding-right: 0;
font-size: clamp(.8rem, 3.6vw, .95rem);
}
.p-doc-banner--has-sp .p-doc-banner__btn::after { content: none; }
.p-doc-banner__label { display: none; }
.p-doc-banner__label--sp { display: inline; }
/* SP素材が無い場合の従来の逃げ道（画像の下にボタンを置く）。 */
.p-doc-banner:not(.p-doc-banner--has-sp) .p-doc-banner__btn {
/* static にすると ::after のアイコンがバナー基準になって飛ぶ。 */
position: relative;
left: auto;
top: auto;
width: 100%;
height: auto;
min-height: 52px;
margin-top: 14px;
padding: 10px 44px 10px 20px;
font-size: .95rem;
}
.p-doc-banner:not(.p-doc-banner--has-sp) .p-doc-banner__label { display: inline; }
.p-doc-banner:not(.p-doc-banner--has-sp) .p-doc-banner__label--sp { display: none; }
}
/* ============================================================
便利な機能をご紹介（Pro / Right）
------------------------------------------------------------
0910_3カンプ p.3 / p.4 実測。
座布団の上端 Pro #21509d ／ Right #99d6f0 → 白へグラデーション
カード 白・枠線 #00368f・角丸
ヘッダー帯 #0098d9（Pro / Right 共通）
タグ #0098d9・白文字。カード下辺に掛ける
旧「安全運転管理 / 法令対応」の8機能ブロックの置き換え。
============================================================ */
/*
* 便利な機能。0910_3カンプ p.3 / p.4 実測：
* 全幅の帯ではなく、980px 幅の角丸パネル（座布団）。
* 上端がブランド色（Pro #21509d / Right #99d6f0）で、455px かけて白へ抜ける。
* パネル左右インセット68px・カード383px・間78px。
*/
.p-feat {
/* 座布団の色はブランドで変える。既存の --worry-head-top と同じ考え方。 */
--feat-top: #21509d;
padding-block: 0;
background: #fff;
}
.p-feat__panel {
/* 上はパネルの色が始まる位置なので広め、下は白地に抜けるので一段下げる。 */
padding: var(--sp-section) clamp(20px, 5.5vw, 68px) var(--sp-section-plain);
border-radius: 24px;
background: linear-gradient(180deg, var(--feat-top) 0, #fff 455px);
}
.p-pro.p-right .p-feat { --feat-top: #99d6f0; }
/* .p-pro-cap は width:max-content なので、左右 auto を消すと左寄せになってしまう。
（上マージンだけ詰めたかったのに margin:0 0 14px で auto ごと上書きしていた） */
.p-feat__cap { margin: 0 auto var(--sp-sm); }
/* 見出し色はパネル上端の色に合わせる（カンプ実測）。
Pro＝紺グラデなので白、Right＝水色グラデなので紺。斜線も currentColor で追従。 */
.p-feat .p-feat__cap,
.p-feat .p-feat__title { color: #fff; }
.p-pro.p-right .p-feat .p-feat__cap,
.p-pro.p-right .p-feat .p-feat__title { color: var(--navy, #00368f); }
.p-feat__title {
margin: 0 0 var(--sp-lg);
color: var(--navy, #00368f);
font-size: clamp(1.25rem, 2.4vw, 1.75rem);
font-weight: 800;
line-height: 1.4;
text-align: center;
text-wrap: balance;
}
.p-feat__grid {
display: grid;
grid-template-columns: 1fr;
gap: 54px 78px; /* カンプ実測：カード間78px */
}
@media (min-width: 768px) {
.p-feat__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.p-feat-card {
position: relative;
display: flex;
flex-direction: column;
/* タグ（高さ48px）はカード内に収まるので、本文が重ならない余白を下に確保する。 */
padding-bottom: 74px;
background: #fff;
border: 1px solid var(--navy, #00368f);
border-radius: 10px;
overflow: visible;
}
.p-feat-card__name {
margin: 0;
padding: 13px 16px;
/* 上の角だけカードの角丸に合わせる（1pxの枠の内側に収める）。 */
border-radius: 9px 9px 0 0;
background: var(--blue-bright, #0098d9);
color: #fff;
font-size: 1.0625rem;
font-weight: 800;
line-height: 1.4;
text-align: center;
}
.p-feat-card__media {
display: grid;
place-items: center;
min-height: 190px;
padding: 26px 0 8px;
}
/* イラストはカード幅に対する比率で置く（カンプの大小関係をそのまま再現）。 */
.p-feat-card__media img { width: var(--feat-img-w, 60%); max-width: calc(100% - 48px); height: auto; }
/* Proならではの機能（カンプ p.3 下段2枚）は見出し帯・タグがネイビー。 */
.p-feat-card--pro .p-feat-card__name,
.p-feat-card--pro .p-feat-card__tag { background: var(--navy, #00368f); }
.p-feat-card__text {
margin: 0;
padding: 0 26px 8px;
color: var(--ink, #1a1a1a);
font-size: .9375rem;
line-height: 1.8;
}
/*
* タグ。0910_3カンプ p.3 / p.4 実測：
* カードの外へはみ出さず、下辺にぴったり乗る。上だけ角丸・下は角のまま。
* 幅はカードの約64%、高さ48px。
* 以前は角丸8pxのピルを translate(-50%,50%) で半分外に出していた。
*/
.p-feat-card__tag {
position: absolute;
left: 50%;
bottom: 0;
transform: translateX(-50%);
width: 64%;
margin: 0;
padding: 13px 16px;
background: var(--blue-bright, #0098d9);
border-radius: 9px 9px 0 0;
color: #fff;
font-size: .9375rem;
font-weight: 700;
line-height: 1.4;
text-align: center;
white-space: nowrap;
}
@media (max-width: 767px) {
.p-feat { padding-block: 40px 56px; }
.p-feat-card__media { min-height: 150px; }
.p-feat-card__tag { font-size: .85rem; padding: 8px 20px; }
}
/* ============================================================
Right ヒーローのフォームパネル（0910_3カンプ p.4 ／ AUN #11）
------------------------------------------------------------
左＝見出し・リード・製品画像 ／ 右＝白い角丸のフォーム。
フォーム本体はCRMの埋め込みコードなので、ここでは器と
中の入力欄の見た目だけを整える（埋め込み側の素のHTMLに当たる）。
============================================================ */
@media (min-width: 992px) {
/*
* 0910_3カンプ p.4 実測（site座標）：
* コピー列 左端171 ／ フォーム 819..1259（幅440）／ 全体 171..1259（幅1088）
* タイトル 33px（「車両管理の…」17字が550px）／ リード 16px
* フォームが入るぶんコピー列が狭くなるので、
* 見出しの大きさもこのレイアウトの時だけ下げる（Proは従来どおり48px）。
*/
.p-pro-hero__inner--form {
display: grid;
/* フォーム列が440pxだと HubSpot のラベル・入力が窮屈で、
縦に伸びてファーストビューに収まらなかった（AUN 0916 #3）。
コピー列を少し譲って、フォーム列を広げる。 */
grid-template-columns: minmax(0, 1fr) 520px;
gap: 0 40px;
align-items: start;
width: min(var(--shiki), 100%);
}
.p-pro-hero__inner--form .p-pro-hero__copy { min-width: 0; }
.p-pro-hero__inner--form .p-pro-hero__brand { font-size: 2.25rem; margin-bottom: 26px; }
.p-pro-hero__inner--form .p-pro-hero__title { font-size: 2.0625rem; line-height: 1.45; }
.p-pro-hero__inner--form .p-pro-hero__lead { font-size: 1rem; margin-top: 18px; }
.p-pro-hero__inner--form .p-pro-hero__cta { margin: 30px 0 0; }
/* Pro（フォーム無し）は 左=コピー／右=製品画像 の2カラム。 */
.p-pro-hero__inner:not(.p-pro-hero__inner--form) {
display: grid;
/* カンプ p.3 実測：製品画像は site424..1100（幅676）＝コンテナ1200の約56%。
テキストは最長行が350px（35px×10字）なので、画像側をさらに広げられる。 */
grid-template-columns: minmax(0, 1fr) minmax(0, 64%);
gap: 0 16px;
align-items: center;
}
}
/* Right はコピー＋製品画像＋フォームで中身が高くなるため、
ヒーロー上部が追従ヘッダーに詰まって見える。上下に余白を足す。 */
@media (min-width: 992px) {
.p-pro.p-right .p-pro-hero { align-items: center; padding-block: var(--sp-section); }
/* 上だけ詰める（60px → 32px。本多さん指示「上のマージンもうちょっと狭く」） */
.p-pro.p-right .p-pro-hero { padding-top: 32px; }
}
/* 製品画像。切り抜き済みなので背景は付けない。 */
.p-pro-hero__product { margin: 26px 0 0; }
.p-pro-hero__product img { display: block; width: 100%; height: auto; }
/* Right はコピーの下。カンプでは本文と同じくらいの幅まで大きく使うので、
左カラムいっぱいに広げる（560pxで抑えていたぶん小さく見えていた）。 */
.p-pro-hero__inner--form .p-pro-hero__product { max-width: none; }
/* Pro は右カラムいっぱい。下端をヒーローの縁に寄せたいので少し下げる。 */
.p-pro-hero__product--side { margin: 0; align-self: end; }
@media (max-width: 991px) {
.p-pro-hero__product { max-width: 480px; margin-inline: auto; }
.p-pro-hero__product--side { margin-top: 24px; }
}
.p-pro-hero__form {
margin-top: 32px;
padding: 26px 24px 30px;
/* カンプ実測：真っ白ではなく、ごく薄いブルーグレー。 */
background: #f0f3f9;
border-radius: 14px;
box-shadow: 0 10px 30px rgb(0, 40, 90, .18);
color: var(--ink, #1a1a1a);
text-align: left;
}
@media (min-width: 992px) {
.p-pro-hero__form { margin-top: 0; }
}
.p-pro-hero__form-head {
margin: 0 0 4px;
/* カンプ実測 #29abe2（紺ではなく明るい水色）。 */
color: #29abe2;
font-size: 1.15rem;
font-weight: 800;
line-height: 1.45;
}
.p-pro-hero__form-note {
margin: 0 0 18px;
color: #000;
font-size: .75rem;
line-height: 1.6;
}
/* CRMの埋め込みフォームは素のHTMLで来ることが多いので、最低限の体裁を当てる。 */
.p-pro-hero__form label {
display: block;
margin-bottom: 5px;
color: var(--ink, #1a1a1a);
font-size: .8125rem;
font-weight: 700;
}
.p-pro-hero__form input[type="text"],
.p-pro-hero__form input[type="email"],
.p-pro-hero__form input[type="tel"],
.p-pro-hero__form select,
.p-pro-hero__form textarea {
width: 100%;
margin-bottom: 14px;
padding: 9px 12px;
border: 1px solid #c9d4e2;
border-radius: 4px;
background: #fff;
font-size: .9375rem;
}
.p-pro-hero__form input[type="submit"],
.p-pro-hero__form button[type="submit"] {
display: block;
width: 100%;
max-width: 250px;
margin: 18px auto 0;
padding: 13px 20px;
border: 0;
border-radius: 999px;
background: linear-gradient(88deg, #de0039 0%, #ab002c 100%);
color: #fff;
font-size: 1rem;
font-weight: 800;
cursor: pointer;
}
/* 埋め込み前のプレースホルダーはヒーロー内に収まる高さにする。 */
.p-pro-form__ph--hero { min-height: 220px; padding: 28px 16px; }
/* ============================================================
イベント情報一覧の横長カード（0910_3カンプ p.9）
------------------------------------------------------------
カード全体が紺→水色のグラデーション。
左＝アイキャッチ（白フチ）／右＝タイトル・開催日時・形式バッジ。
右上に赤い受付ステータスがカード上端へ食い込む。
============================================================ */
.event-list { display: grid; gap: 28px; }
.event-row {
position: relative;
border-radius: 12px;
background: linear-gradient(115deg, var(--navy, #00368f) 0%, var(--navy, #00368f) 42%, var(--blue-bright, #0098d9) 100%);
box-shadow: 0 8px 22px rgb(10, 58, 115, .18);
}
.event-row__link {
display: grid;
grid-template-columns: 1fr;
gap: 20px;
padding: 22px;
color: #fff;
text-decoration: none;
}
@media (min-width: 768px) {
/* カンプ実測：写真カラムはカード幅の約50%（内側比53%）、間 42px。 */
.event-row__link { --ev-pad: 26px; --ev-gap: 42px; grid-template-columns: minmax(0, 53%) minmax(0, 1fr); gap: var(--ev-gap); padding: var(--ev-pad); }
}
/* 受付ステータス。カードの上端に半分かかる。 */
/*
* 受付ステータスのバッジ。0910_3カンプ p.9 実測：
* 上辺はカード上端とツライチ、下だけ角丸＝カードから下げたタブの形。
* 左位置は情報カラムの左端（カード幅の約58%）に合わせる。
* 以前は角丸4pxのピルを translateY(-50%) で浮かせていたため、
* カンプの「タブ」に見えていなかった。
*/
.event-row__status {
position: absolute;
top: 0;
left: calc(var(--ev-pad, 20px) + (100% - var(--ev-pad, 20px) * 2) * 0.53 + var(--ev-gap, 20px));
z-index: 2;
padding: 11px 22px;
border-radius: 0 0 8px 8px;
background: var(--cta-deep, #de0039);
color: #fff;
font-size: 1.0625rem;
font-weight: 700;
line-height: 1.4;
white-space: nowrap;
}
.event-row__status--closed { background: #7a8899; }
/* SPカンプ p.10：1カラムになるのでバッジはカード左上に戻す。 */
@media (max-width: 767px) {
.event-row__status { left: 20px; padding: 9px 18px; font-size: .9375rem; }
}
.event-row__thumb {
margin: 0;
border: 2px solid #fff;
border-radius: 6px;
overflow: hidden;
aspect-ratio: 16 / 9;
background: rgb(255 255 255 / .12);
}
.event-row__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.event-row__body { min-width: 0; align-self: center; }
.event-row__title {
margin: 0 0 14px;
color: #fff;
font-size: 1.0625rem;
font-weight: 800;
line-height: 1.55;
text-wrap: balance;
}
.event-row__when {
margin: 0 0 14px;
color: #fff;
font-size: .9375rem;
line-height: 1.6;
}
/* 行頭の白い■。装飾なので読み上げには出さない。 */
.event-row__when::before {
content: "";
display: inline-block;
width: .72em;
height: .72em;
margin-right: .5em;
background: currentColor;
vertical-align: baseline;
}
.event-row__format {
display: inline-block;
margin: 0;
padding: 3px 18px;
border: 1px solid #fff;
border-radius: 999px;
color: #fff;
font-size: .8125rem;
font-weight: 700;
line-height: 1.6;
}
@media (hover: hover) {
.event-row { transition: transform .2s ease, box-shadow .2s ease; }
.event-row:hover { transform: translateY(-3px); box-shadow: 0 14px 30px rgb(10, 58, 115, .26); }
}
/* ============================================================
ホバーの色変化はゆっくり（0.45秒）で統一
------------------------------------------------------------
.btn 以外にも、色や濃さが変わる部品が点在していて
そこだけ一瞬で切り替わると挙動がちぐはぐに見える。
動き（transform）は素早いまま、色だけを合わせる。
============================================================ */
.footer-nav__list a,
.case-filter__link,
.case-pager a.page-numbers,
.case-single__dl-btn,
.p-doc-banner__btn,
.sticky-bar__btn {
transition: background-color .45s ease, color .45s ease,
border-color .45s ease, opacity .45s ease;
}
/* ============================================================
イベント一覧・下段「過去のセミナー」（0910_3カンプ p.9）
------------------------------------------------------------
上の座布団とは別の白い座布団。中は3列×2段のカード。
カードはサムネイルの左上にグレーの「開催終了」バッジが乗る。
実測色：プレースホルダー #e6e6e6 ／ バッジ #808080
============================================================ */
.event-past { margin-top: 40px; }
.event-past__title {
margin: 0 0 30px;
color: var(--navy, #00368f);
font-size: 1.125rem;
font-weight: 800;
text-align: center;
}
.event-past__grid {
display: grid;
grid-template-columns: 1fr;
gap: 26px 24px;
}
@media (min-width: 768px) {
.event-past__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.event-past-card {
background: #fff;
border-radius: 10px;
box-shadow: 0 4px 14px rgb(10, 43, 82, .12);
overflow: hidden;
}
.event-past-card__link {
display: block;
padding: 14px 14px 20px;
color: inherit;
text-decoration: none;
}
.event-past-card__thumb {
position: relative;
margin: 0 0 14px;
aspect-ratio: 16 / 10;
border-radius: 6px;
overflow: hidden;
background: #e6e6e6;
}
.event-past-card__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* バッジはサムネイルの左上。カードの角丸に沿わせず、四角いまま置く。 */
.event-past-card__status {
position: absolute;
top: 0;
left: 0;
z-index: 1;
padding: 4px 12px;
background: #808080;
color: #fff;
font-size: .75rem;
font-weight: 700;
line-height: 1.4;
white-space: nowrap;
}
.event-past-card__title {
margin: 0 0 8px;
color: var(--ink, #1a1a1a);
font-size: .9375rem;
font-weight: 800;
line-height: 1.6;
}
.event-past-card__text {
margin: 0;
color: var(--ink, #1a1a1a);
font-size: .8125rem;
line-height: 1.7;
}
/* 開催日時・開催場所は「ラベル：値」の2行。値が長ければ折り返す。 */
.event-past-card__meta { margin: 0; font-size: .8125rem; line-height: 1.7; color: var(--ink, #1a1a1a); }
.event-past-card__row { display: flex; gap: 4px; }
.event-past-card__row + .event-past-card__row { margin-top: 4px; }
.event-past-card__row dt { flex: 0 0 auto; font-weight: 700; color: var(--navy, #00368f); }
.event-past-card__row dt::after { content: "："; }
.event-past-card__row dd { margin: 0; min-width: 0; }
@media (hover: hover) {
.event-past-card { transition: transform .2s ease, box-shadow .2s ease; }
.event-past-card:hover { transform: translateY(-3px); box-shadow: 0 10px 24px rgb(10, 43, 82, .18); }
}
/* ============================================================
リンク・ボタンのホバーを全体で揃える
------------------------------------------------------------
「ホバーしても何も起きない」「変化が薄くて気付かない」箇所が
残っていたので、サイト全体のルールとしてここに集約する。
ファイル末尾に置いているのは、前方の個別指定（同じ詳細度）に
後勝ちさせるため。
テキストリンク … 水色に変わる＋下線
ボタン … 少し浮く＋影が濃くなる＋色が一段明るくなる
============================================================ */
@media (hover: hover) {
/* ---- テキストリンク（ボタン以外のリンク全般） ---- */
.site-footer a:not(.btn):not(.wp-block-button__link):hover,
.footer-nav__list a:hover,
.site-footer__utility a:hover,
.p-archive-hero__crumb a:hover,
.breadcrumb a:hover,
.menu-panel a:not(.btn):hover,
.global-nav a:not(.btn):hover,
.news-list__link:hover .news-list__title,
.case-single__cats a:hover {
color: var(--blue-bright, #0098d9);
opacity: 1;
text-decoration: underline;
text-underline-offset: .25em;
}
/* 枠線ピルのカテゴリは下線ではなく塗りで反応させる。 */
.case-single__cats a:hover {
background: var(--blue-bright, #0098d9);
border-color: var(--blue-bright, #0098d9);
color: #fff;
text-decoration: none;
}
/* ---- ボタン：浮き上がりと色の変化をはっきりさせる ---- */
.btn:hover { transform: translateY(-2px); }
.btn--shadow:hover { box-shadow: 0 12px 24px rgb(10, 58, 115, .26); }
.btn--primary:hover,
.btn--cta:hover { filter: brightness(1.09); }
/* 下部CTAバナーの2色ボタン。前方のグラデーション指定に勝たせる。 */
.cta-banner .btn:hover {
transform: translateY(-2px);
box-shadow: 0 12px 24px rgb(0, 0, 0, .3);
}
.cta-banner__box--dl .btn:hover {
background: linear-gradient(180deg, #ef5c82 0 50%, #e5124a 50% 100%);
}
.cta-banner__box--contact .btn:hover {
background: linear-gradient(180deg, #5b81c2 0 50%, #0a4aa8 50% 100%);
}
/* ---- カード全体がリンクになっているもの ---- */
.case-card__link:hover,
.news-list__link:hover,
.event-past-card__link:hover { opacity: 1; }
}
/* SPだけで効かせる改行。PCでは無効（カンプの改行位置に合わせるため）。 */
.u-br-sp { display: none; }
@media (max-width: 767px) {
.u-br-sp { display: inline; }
}
/* ============================================================
SP（0910_2 SPカンプ p.3 実測）
------------------------------------------------------------
・便利な機能の座布団は、SPではアートボード幅いっぱい（0..390）。
PCのように980の島にはしない。
・カードの見出し帯と「Pro・Right 共通機能」タグは、上下の余白が
詰まって窮屈だったので広げる。
============================================================ */
@media (max-width: 767px) {
/* .p-pro .p-feat__panel（詳細度0,2,0）で980に固定しているので、
こちらも同じ詳細度にしないと勝てない。 */
.p-pro .p-feat__panel,
.p-feat__panel {
width: 100%;
max-width: none;
border-radius: 0;
padding-inline: var(--gutter);
}
.p-feat-card__name { padding: 17px 16px; }
.p-feat-card__tag { padding: 12px 22px; }
}
/* 資料DLバナーのひとこと。SPカンプ p.3 では見出しとボタンの間に
「＼料金お見積もりのご案内はこちら／」が入る。PCのカンプには無いのでSPだけ。
（base を先に、メディアクエリを後に置くこと。逆だと打ち消される） */
.p-pro-dlbanner__cap { display: none; }
@media (max-width: 767px) {
.p-pro-dlbanner__cap {
display: block;
margin: 0 auto 18px;
font-size: .8125rem;
}
}
/* ============================================================
Pro / Right ヒーローの円オブジェクト
------------------------------------------------------------
カンプ（PC p.3 / p.4）の円は、製品画像の背後にうっすら1本だけ入る輪。
以前は repeating-radial-gradient でヒーロー右下に同心円を敷いていたが、
Rightはヒーローの右半分がフォームで、その下に広い空きの青地ができるため
同心円がそこに露出して目立ってしまっていた（本多さん指摘）。
カンプどおり「製品画像の後ろの1本の輪」に作り直す。
・解像度に依存しない（Retinaでも輪郭が鈍らない）
・リクエストが増えない（素材0KB）
・製品画像を基準に置くので、ヒーローの高さが変わってもズレない
============================================================ */
/* 中身は円より前面に。 */
.p-pro-hero__inner { position: relative; z-index: 1; }
.p-pro-hero__product--side { position: relative; }
.p-pro-hero__product--side::before {
content: "";
position: absolute;
z-index: -1;
left: 50%;
top: 50%;
width: 132%;
aspect-ratio: 1;
transform: translate(-50%, -50%);
border: 2px solid rgb(255, 255, 255, .13);
border-radius: 50%;
pointer-events: none;
}
/* PC（カンプ p.3）は太い水色の輪だけで、細い白線の輪は無い。PCでは出さない。 */
@media (min-width: 768px) {
.p-pro-hero__product--side::before { content: none; }
}
@media (max-width: 767px) {
/* SPは支給素材のリング（紺→水色のグラデーションが乗った1本の輪）に差し替え。
CSSの輪より色の情報量が多く、カンプに忠実。
位置は製品画像に重なるよう、図版側を基準にして置く（PCと同じ置き方）。 */
.p-pro-hero__product--side::before {
border: 0;
/* SPカンプ p.3 実測：外径350px・中心は製品画像の中心から左へ105px・上へ18px */
left: calc(50% - 105px);
top: calc(50% - 18px);
width: 350px;
opacity: .6; /* カンプの輪は地の紺にやや溶けた水色 */
background: url("../images/pro/hero-deco-sp.png") no-repeat center / contain;
}
/*
* SPカンプ p.3 の並び：ブランド名 → 見出し → リード → 製品画像 →
* ＼料金お見積もりのご案内はこちら／ → 資料ダウンロード。
* HTMLの順番（ボタンが画像より前）は変えず、SPだけ order で入れ替える。
* __copy を display:contents にして、その子を直接フレックスアイテムにする。
*/
.p-pro-hero__inner { display: flex; flex-direction: column; }
.p-pro-hero__copy { display: contents; }
.p-pro-hero__title { order: 1; }
.p-pro-hero__lead { order: 2; }
.p-pro-hero__product--side { order: 3; margin: 26px 0 0; }
.p-pro-hero__cap { order: 4; }
.p-pro-hero__cta { order: 5; }
.p-pro-hero__cap {
display: block;
margin: 22px auto 14px;
font-size: .8125rem;
}
}
/* PCではSP専用の行を出さない。 */
@media (min-width: 768px) {
.p-pro-hero__cap { display: none; }
}
/* 最上部のSUZUKIロゴ（公式サイトへのリンク）。
画像リンクなので下線などは付けず、ホバーだけ軽く落とす。 */
.site-header__corp-link { display: inline-flex; line-height: 0; }
@media (hover: hover) {
.site-header__corp-link:hover { opacity: .75; }
}
/* ============================================================
Right ヒーローの埋め込みフォーム（HubSpot）
------------------------------------------------------------
AUN 0916 #3「フォームはファーストビューで収める。」
項目数は変えられないので、縦の余白と入力欄の高さを詰めて全体を縮める。
HubSpot の標準クラス（.hs-form-field / .hs-input / .hs-button）に当てる。
※ここはヒーロー内のフォームだけ。ページ下部や他ページのフォームは対象外。
============================================================ */
/*
* HubSpot は姓・名などの2カラム項目（.form-columns-2）を、
* フォームの幅が 450px を下回ると縦積みに切り替える。
* 枠の内寸が必ず450px以上になるよう、左右パディングぶんを足した幅を最低値にする。
* 内寸450 ＋ 左右パディング20×2 ＝ 490px
*/
@media (min-width: 992px) {
.p-pro-hero__form {
min-width: 490px;
padding-inline: 20px;
}
}
/*
* フォームを90%に縮小して、ファーストビューに収める（本多さん指示）。
* HubSpotのフォームは iframe で埋め込まれるため、外側のCSSでは
* 中の入力欄の高さを詰められない。枠ごと zoom で縮めて高さを稼ぐ。
* 実測（1337×881）：692px → 623px
* zoom はレイアウト上も小さくなる（transform: scale と違い余白が残らない）。
* iframe の中の幅は変わらないので、姓・名の横並びは崩れない。
* SPは1カラムで高さの制約が無いので原寸のまま。
*/
@media (min-width: 768px) {
.p-pro-hero__form { zoom: .9; }
}
.p-pro-hero__form .hs-form-field { margin-bottom: 10px; }
.p-pro-hero__form .hs-form-field > label {
margin-bottom: 3px;
font-size: .75rem;
}
.p-pro-hero__form .hs-input:not([type="checkbox"]):not([type="radio"]) {
width: 100%;
min-height: 38px;
padding: 6px 12px;
font-size: .875rem;
}
.p-pro-hero__form .legal-consent-container { margin: 6px 0 10px; font-size: .75rem; }
.p-pro-hero__form .hs_submit .actions { margin: 0; padding: 0; }
.p-pro-hero__form .hs-button {
width: 100%;
min-height: 48px;
font-size: 1rem;
font-weight: 800;
}
/* HubSpot はフォーム全体を fieldset で包む。既定の余白を消す。 */
.p-pro-hero__form fieldset {
max-width: none !important;
margin: 0;
padding: 0;
border: 0;
}
/* ============================================================
資料ダウンロード一覧（page-download.php）
------------------------------------------------------------
0910_3カンプ PC p.11 実測（site座標・PC1280）:
座布団 x150..1130（980）・y483..1100
説明文 紺 #00368f・20px・太字・中央・行送り34px（文字上端は座布団+70）
カード 3列 260px・間35px（計850を中央寄せ）・y677..1002（高さ325）
見出し帯 #00368f・高さ69・白17px太字・2行
本体 #e1e9f6・表紙の枠 高さ143（上21）
ボタン 186×37・上 #e74770／下 #de0039 の2色・白縁・右に丸▶
SP p.12：カードは1列（幅いっぱい）、説明文は左揃えで大きめ。
============================================================ */
.p-doclist__panel { padding: 36px 20px 48px; }
.p-doclist__lead {
margin: 0 0 32px;
color: var(--navy, #00368f);
font-size: 1.25rem;
font-weight: 700;
line-height: 1.7; /* カンプ実測：行送り34px */
}
.p-doclist__lead > :last-child { margin-bottom: 0; }
.p-doclist__lead p { margin: 0; }
/* SPカンプ p.12 は説明文を改行せずに流している。PC用に入れた改行はSPでは効かせない */
@media (max-width: 767px) {
.p-doclist__lead br { display: none; }
}
.p-doclist__grid {
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: 32px;
margin: 0;
padding: 0;
list-style: none;
}
.p-doclist__card {
overflow: hidden;
display: flex;
flex-direction: column;
background: #e1e9f6;
border-radius: 10px;
box-shadow: 0 6px 16px rgb(0, 40, 90, .12);
}
.p-doclist__title {
display: flex;
align-items: center;
justify-content: center;
min-height: 69px;
margin: 0;
padding: 10px 12px;
background: var(--navy, #00368f);
color: #fff;
font-size: 1.0625rem;
font-weight: 700;
line-height: 1.35;
text-align: center;
}
.p-doclist__body {
display: flex;
flex: 1;
flex-direction: column;
align-items: center;
padding: 21px 20px 30px;
}
/* 表紙は縦長・横長が混ざるので、枠の高さだけ揃えて中に収める */
.p-doclist__cover {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 143px;
margin: 0;
}
.p-doclist__cover img {
width: auto;
max-width: 100%;
height: auto;
max-height: 100%;
object-fit: contain;
}
.p-doclist__cover-ph {
display: flex;
align-items: center;
justify-content: center;
width: 80%;
height: 100%;
background: #fff;
color: #9fb2c4;
font-size: .8rem;
font-weight: 700;
}
.p-doclist__btn {
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
width: 186px;
max-width: 100%;
min-height: 37px;
padding: 0 30px 0 14px;
background: #de0039;
border: 2px solid #fff;
border-radius: 999px;
box-shadow: 0 6px 14px rgb(0, 0, 0, .2);
color: #fff;
font-size: .75rem;
font-weight: 800;
letter-spacing: .04em;
text-decoration: none;
}
/* ボタン上の余白（表紙の下23px）。margin-top:auto で最下部に揃えつつ最低限は確保する */
.p-doclist__body > .p-doclist__btn { margin-top: 23px; }
/* 文字は光沢（::before・absolute）より手前に出す。出さないと光沢の下に隠れる */
.p-doclist__btn-label { position: relative; z-index: 1; }
/* 上半分だけ明るい赤（TOPの資料バナーのボタンと同じ作り） */
.p-doclist__btn::before {
content: "";
position: absolute;
inset: 0;
border-radius: inherit;
background: linear-gradient(to bottom, #e74770 0 50%, transparent 50%);
pointer-events: none;
}
/* 右の丸▶（白い輪＋白い三角） */
.p-doclist__btn::after {
content: "";
position: absolute;
right: 10px;
top: 50%;
width: 18px;
height: 18px;
transform: translateY(-50%);
background: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2032%2032'%3E%3Ccircle%20cx='16'%20cy='16'%20r='14'%20fill='none'%20stroke='white'%20stroke-width='2.4'/%3E%3Cpath%20d='M13%2010.5%20L22%2016%20L13%2021.5%20Z'%20fill='white'/%3E%3C/svg%3E") no-repeat center / contain;
}
@media (hover: hover) {
.p-doclist__btn { transition: transform .2s ease, filter .2s ease; }
.p-doclist__btn:hover { filter: brightness(1.08); transform: translateY(-2px); }
}
.p-doclist__empty { margin: 0; color: var(--muted, #7a7a7a); text-align: center; }
@media (min-width: 768px) {
/* カンプ実測：文字の上端が座布団から約70px、カードの上端が約195px、カード下から座布団の下端まで98px */
.p-doclist__panel { padding: 61px 65px 98px; }
.p-doclist__lead { margin-bottom: 65px; text-align: center; }
.p-doclist__grid {
grid-template-columns: repeat(3, 260px);
justify-content: center;
gap: 35px;
}
}
/* 3列が入らないタブレット幅は2列 */
@media (min-width: 768px) and (max-width: 991px) {
.p-doclist__grid { grid-template-columns: repeat(2, 260px); }
}
/* ============================================================
AUN SP_20260917 の修正（SPのみ。PCには影響させない）
============================================================ */
@media (max-width: 767px) {
/* #3 特徴の画像と見出しの間を空ける。
Right の特徴1の写真は、ソケットの絵が写真の下にはみ出す素材なので、
間を取らないと見出しに重なって見えていた。 */
.p-pro-feature .p-pro-img { margin-bottom: 28px; }
/* #4「SUZUKI FLEET Right で解決！」を1行に収める。
24pxだと390px幅で「解/決！」が折り返すので、Rightの1行版だけ小さくして折り返しを禁止する。 */
.p-pro-solve--inline .p-pro-solve__title {
font-size: clamp(1.05rem, 5.2vw, 1.5rem);
white-space: nowrap;
}
/* #5 Right の「Pro・Right 共通機能」カード〜「こんな方におすすめ」の空きを詰める。
169px → 約96px（SPカンプ p.4 実測）。Pro は間に別セクションが入るので対象外。 */
.p-right .p-feat { padding-bottom: 0; }
.p-right .p-reco { padding-top: 40px; }
/* #6 Right のヒーロー：SPはフォームを隠し、Proと同じ「ひとこと＋ボタン」にする。 */
.p-pro-hero__inner--form .p-pro-hero__form { display: none; }
.p-pro-hero__inner--form .p-pro-hero__product { order: 3; }
.p-pro-hero__sp-cta { order: 4; }
.p-pro-hero__sp-cta .p-pro-hero__cta { margin: 0; }
/* #7 TOP サービス詳細：Proのカードは画像が上にはみ出す作りなので、
Rightの「詳細をみる」との実際の隙間が12pxしかなかった。32px → 56px。 */
.p-top__lineup .wp-block-columns { row-gap: 96px; } /* 2026-09-17 さらに広げる */
/* #10 TOP ヒーロー：ロゴ・キャッチ・リードを中央揃えに。 */
.p-hero .hero__logo,
.p-hero .hero__title,
.p-hero .hero__lead { text-align: center; }
.p-hero .hero__logo img { margin-inline: auto; }
/* #8 メニューを1画面に収める（スクロールさせない）
#9 閉じる操作はヘッダーのボタン（☰→✕）に一本化し、パネル内の✕はSPでは出さない。 */
.global-menu__close { display: none; }
.global-menu__inner { padding-top: 24px; padding-bottom: 24px; }
.global-menu__plans { gap: 16px; margin-bottom: 14px; }
.global-menu__plan { min-height: 84px; gap: 6px; padding: 10px 10px; }
.global-menu__list a { padding: 10px 2px; }
.global-menu__cta { gap: 10px 14px; margin-top: 18px; }
.global-menu__cta .btn { min-height: 42px; }
/* 2列にして高さを半分に。列幅は中身なり（等分だと「WEBサイトに関する特記事項」が折り返す） */
.global-menu__legal-list {
grid-template-columns: repeat(2, max-content);
justify-content: start;
gap: 8px 24px;
margin-top: 18px;
}
/* 線の位置（top）にもアニメーションを付ける。付けないと✕⇔☰の途中で「>」の形に崩れる */
.menu-toggle__lines span { transition: background-color .45s ease, top .3s ease, transform .3s ease, opacity .2s ease; }
body.is-menu-open .menu-toggle__lines span:nth-child(1) { top: 8px; transform: rotate(45deg); }
body.is-menu-open .menu-toggle__lines span:nth-child(2) { opacity: 0; }
body.is-menu-open .menu-toggle__lines span:nth-child(3) { top: 8px; transform: rotate(-45deg); }
body.is-menu-open .menu-toggle__label { font-size: 0; }
body.is-menu-open .menu-toggle__label::before {
content: "CLOSE";
font-size: .8125rem;
}
}
/* PCでは #6 のSP用ボタンを出さない */
@media (min-width: 768px) {
.p-pro-hero__sp-cta { display: none; }
}
/* ============================================================
Right（と共通パーツ）SP をカンプに合わせる（SPカンプ p.4 / p.5 実測・2026-09-17）
PCには影響させない（すべて max-width:767px の中）。
============================================================ */
@media (max-width: 767px) {
/* ---- 文字組み：カンプは約物を詰め（palt）、行送りは22px前後 ---- */
.p-pro .p-pro-feature__text,
.p-pro .p-feat-card__text,
.p-pro .p-usecase__text,
.p-pro .p-usecase-card__text,
.p-pro .p-reason-card__text,
.p-pro .p-pro-step__text {
font-feature-settings: "palt";
font-size: .90625rem; /* 14.5px */
line-height: 1.52; /* 22px */
letter-spacing: 0;
}
.p-pro .p-pro-feature__lead,
.p-pro .p-usecase__lead,
.p-pro .p-usecase-card__title,
.p-pro .p-reason-card__title,
.p-pro .p-pro-step__title,
.p-pro .p-reco-card__text {
font-feature-settings: "palt";
letter-spacing: 0;
}
.p-pro .p-pro-feature__lead { font-size: 1rem; line-height: 1.375; } /* 16px / 22px */
.p-pro .p-usecase__lead { font-size: 1.0625rem; line-height: 1.3; text-align: center; } /* 17px / 22px・中央 */
.p-pro .p-usecase-card__title { font-size: 1rem; } /* 16px */
.p-pro .p-reco-card__text { font-size: 1rem; line-height: 1.6; } /* 16px / 25.5px */
/* ---- 背景パネル：横幅いっぱい＋上だけ角丸20（カンプ実測） ---- */
.p-pro .p-feat__panel,
.p-pro .p-usecase__panel,
.p-pro .p-reason__panel {
width: 100%;
max-width: none;
margin-inline: 0;
border-radius: 20px 20px 0 0;
}
.p-pro .p-usecase__panel,
.p-pro .p-reason__panel { padding-inline: 27px; }
.p-pro .p-pro-flow { border-radius: 20px 20px 0 0; }
/* ---- 選ばれる理由のカード ---- */
.p-pro .p-reason-card { padding: 30px 26px 34px; }
/* 1枚目のSUZUKIロゴは大きすぎた。カンプはカード幅の約68% */
.p-pro .p-reason-card:first-child .p-reason-card__media img {
width: 68%;
margin-inline: auto;
border-radius: 0;
}
.p-pro .p-reason-card__title {
color: #000;
font-size: 1.03125rem; /* 16.5px */
line-height: 1.6;
text-align: center;
}
/* ---- ヒーロー（Right） ---- */
.p-right .p-pro-hero {
margin-right: 28px;
padding: 0;
border-radius: 0 45px 45px 0;
}
/* 文字の左端は30px。見出し1行目（306px）が折り返さないよう右は24px */
.p-right .p-pro-hero__inner { padding: 40px 24px 49px 30px; }
.p-right .p-pro-hero__brand { margin-bottom: 18px; font-size: 1.4375rem; line-height: 1.1; } /* 23px（文字幅231px） */
.p-right .p-pro-hero__title { font-size: 1.125rem; line-height: 1.72; } /* 18px / 31px */
.p-right .p-pro-hero__lead { margin-top: 14px; font-size: .71875rem; line-height: 1.96; } /* 11.5px / 22.5px */
/* 製品画像：円を抜いたSP素材を、カンプの大きさ（見えている部分で幅315）に */
.p-right .p-pro-hero__inner--form .p-pro-hero__product {
position: relative;
width: 355.7px;
max-width: none;
margin: -9px 0 0 -16px;
align-self: flex-start;
}
.p-right .p-pro-hero__inner--form .p-pro-hero__product img { position: relative; z-index: 1; display: block; width: 100%; height: auto; }
/* 円：支給素材を外径364px、製品画像の中心から左に20px・下に3pxの位置に敷く */
.p-right .p-pro-hero__inner--form .p-pro-hero__product::before {
content: "";
position: absolute;
z-index: 0;
left: calc(50% - 20px);
top: calc(50% + 3px);
width: 364px;
aspect-ratio: 1;
transform: translate(-50%, -50%);
background: url("../images/pro/hero-deco-sp.png") no-repeat center / contain;
/* 支給素材はPro用の紺→水色のグラデの輪。SPカンプ p.4 実測では、輪の一番濃い所が #0075bf 前後
（地 #0098d9）、薄い側はほぼ地色。紺(#003d94)をこの濃さにするには不透明度 .38 前後。
（以前の .12 では一番濃い所でも #008dd1 にしかならず、カンプより薄かった） */
opacity: .38;
pointer-events: none;
}
/* 見出し・リードは円より手前に（円は画像の枠からはみ出して文字の後ろに回り込む） */
.p-right .p-pro-hero__title,
.p-right .p-pro-hero__lead,
.p-right .p-pro-hero__sp-cta { position: relative; z-index: 2; }
/* ひとこと＋ボタン：画面中央に置く（パネルの右の空きぶん右へ寄る） */
.p-right .p-pro-hero__sp-cta { margin-right: -22px; }
.p-right .p-pro-hero__sp-cta .p-pro-hero__cap { margin: -8px auto 16px; font-size: .875rem; }
/* ボタン：カンプ実測 242×52・17px。上半分が明るい赤の2色＋白フチ＋右に白丸▼。
共通のヒーローCTA（左右56pxの余白・ピンクの太枠）のままだと、この幅では文字が折り返す */
.p-right .p-pro-hero__sp-cta .btn {
width: 242px;
min-height: 52px;
margin-inline: auto;
padding: 0 44px 0 20px;
/* 上半分を明るくする2色は背景で描く（::before で重ねると文字が隠れる） */
background: linear-gradient(to bottom, #e74770 0 50%, #de0039 50% 100%);
border: 2px solid #fff;
box-shadow: 0 6px 14px rgb(0, 0, 0, .2);
font-size: 1.0625rem;
white-space: nowrap;
}
.p-right .p-pro-hero__sp-cta .btn--cta::before { content: none; }
.p-right .p-pro-hero__sp-cta .btn--cta::after { right: 10px; }
}
/* ============================================================
下部の「資料ダウンロード／お問い合わせ」帯：SPカンプ p.6 実測
帯 横幅いっぱい（0..390）・角丸なし・高さ184・2枚の間1px
見出し 20px（8字160px）・帯の上端から中心まで46px
ボタン 270×52・文字17px（10字170px）・帯の上端から88px
PCは従来どおり（2列・上だけ角丸24）。
============================================================ */
@media (max-width: 767px) {
.cta-banner .l-container { width: 100%; }
.cta-banner__grid { gap: 1px; }
.cta-banner__box {
justify-content: flex-start;
gap: 24px;
padding: 28px 20px 0;
border-radius: 0;
}
.cta-banner__title { font-size: 1.25rem; line-height: 1.8; }
.cta-banner .btn { min-width: 270px; font-size: 1.0625rem; }
}
/* ============================================================
紺のヒーロー（イベント一覧・資料ダウンロード一覧）：SPカンプ p.10 実測
パンくず帯 高さ39（下に白1px）
Events 文字 80〜100（ヒーロー上端から）
一覧名 文字 117〜134（約18px）
白パネル 上端186・左右28空け
グラデ 0〜55 #00368f ベタ → 452 で白（パネルの後ろまで続く）
ヒーローの高さ（約186px）の中で白にすると早く薄くなり、文字が弱く見えていた。
背景は疑似要素で452pxぶん描き、後ろのパネルの下まで伸ばす。
============================================================ */
@media (max-width: 767px) {
.p-archive-hero--navy {
position: relative;
z-index: 0;
padding-bottom: 47px; /* 白パネルの上端がヒーロー上端から186px */
background: none;
}
.p-archive-hero--navy::before {
content: "";
position: absolute;
z-index: -1;
top: 0;
left: 0;
right: 0;
height: 452px;
background: linear-gradient(180deg, #00368f 0, #00368f 55px, #fff 452px);
pointer-events: none;
}
.p-archive-hero--navy .p-archive-hero__crumb { padding-block: 7.5px; }
.p-archive-hero--navy .p-archive-hero__title { margin-top: 34px; }
.p-archive-hero--navy .p-archive-hero__en { line-height: 1.3; }
.p-archive-hero--navy .p-archive-hero__ja { margin-top: 4.5px; font-size: 1.125rem; line-height: 1.4; }
.p-archive-hero--navy + .l-container,
.p-archive-hero--navy + .p-case-archive > .l-container { width: calc(100% - 56px); }
/* ヒーローの背景（z-index:0 の重なり）より、後ろに続くパネルを手前に出す */
.p-archive-hero--navy + .l-container,
.p-archive-hero--navy + .p-case-archive { position: relative; z-index: 1; }
}
/* ============================================================
過去のセミナーのカード：SPカンプ p.10 実測
タブ カード上端に接地・左はサムネイルと揃う・96×24・14px
サムネ カード上端から12.5・左右19
以前はタブがサムネイルの左上に重なっていて、カードからの「かかり方」が違っていた。
タブの基準をサムネイルではなくカード（リンク）にする。
============================================================ */
@media (max-width: 767px) {
.event-past-card__link {
position: relative;
padding: 12.5px 19px 20px;
}
.event-past-card__thumb { position: static; }
.event-past-card__status {
top: 0;
left: 19px;
min-width: 96px;
height: 24px;
padding: 0 12px;
font-size: .875rem;
line-height: 24px;
text-align: center;
}
}
/* ============================================================
支給アイコン（suzuki_freet_web_icon.pdf・2026-09-17）
------------------------------------------------------------
■ 丸バッジ（Pro 特徴1のサブカード / Right 利用イメージのカード）
カンプ実測（PC）：グラデの輪 外径66・太さ6、外側に白フチ3、柔らかい影。
輪の中心はカード上端より4px上。中の線画アイコンは直径52（支給PNG）。
■ こんな方におすすめ
水色の円は廃止し、支給イラストを原寸で置く。
カード上端から約20pxの帯（高さ122）に下揃えで置き、その下に本文。
============================================================ */
.p-pro-subcard__icon,
.p-usecase-card__icon {
width: 60px;
height: 60px;
border-width: 5px;
box-shadow: 0 0 0 3px #fff, 0 6px 14px rgba(0, 32, 96, .18);
overflow: hidden;
}
.p-pro-subcard__icon img,
.p-usecase-card__icon img { display: block; width: 46px; height: 46px; max-width: none; }
.p-reco-card__icon {
width: auto;
height: auto;
min-height: 0;
margin: 0 auto 14px;
border-radius: 0;
background: none;
overflow: visible;
align-items: flex-end;
}
.p-reco-card__icon img {
width: auto;
height: auto;
max-width: 100%;
max-height: 110px;
object-fit: contain;
border-radius: 0;
}
/* 念のため、枠から画像がはみ出さないようにする（枠の高さは下のメディアクエリで指定） */
.p-reco-card__icon { overflow: hidden; }
@media (min-width: 768px) {
.p-pro-subcard__icon,
.p-usecase-card__icon {
width: 66px;
height: 66px;
border-width: 6px;
transform: translate(-50%, calc(-50% - 4px));
}
.p-pro-subcard__icon img,
.p-usecase-card__icon img { width: 52px; height: 52px; }
.p-pro-subcard,
.p-usecase-card { padding-top: 54px; }
.p-reco-card { justify-content: flex-start; padding-top: 20px; }
.p-reco-card__icon { height: 122px; margin-bottom: 10px; }
/* 枠（122px）より大きい画像を入れるとカードの外にはみ出していたので、必ず枠に収める
（管理画面から入れた原寸の大きい画像で発生。SUZUKI様FB 2026-09-24） */
.p-reco-card__icon img { max-height: 100%; max-width: 100%; width: auto; height: auto; }
}
/* ============================================================
404（suzuki_freet_web_404.pdf 実測・2026-09-17）
背景 ヘッダー直下 #99d6f0 → 455px で白（カードの途中まで水色が掛かる）
見出し 「404」＋「Not Found」横並び・紺
カード 幅980・高さ約350・角丸20・影／見出し20px太字紺・本文15px 行送り25.5
ボタン 120×42・白地・#0098d9 の線と文字・ピル型・影
============================================================ */
.p-404-page {
padding-bottom: 110px;
background: linear-gradient(180deg, #99d6f0 0, #fff 455px);
}
.p-404-page .p-archive-hero { background: none; padding-bottom: 0; }
.p-404-page .p-archive-hero__title { margin-top: 56px; }
.p-404-page .p-archive-hero__ja { font-size: clamp(1.1rem, 3vw, 1.5rem); }
.p-404-page > .l-container { margin-top: 56px; }
.p-404 {
padding: 48px 24px 56px;
background: #fff;
border-radius: 20px;
box-shadow: 0 8px 28px rgba(0, 40, 90, .14);
text-align: center;
}
.p-404__lead { margin: 0 0 22px; color: var(--navy); font-size: 1.125rem; font-weight: 700; line-height: 1.5; }
.p-404__text { margin: 0; color: #231815; font-size: .875rem; line-height: 1.7; }
.p-404__back { margin: 32px 0 0; }
.p-404__btn {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 120px;
height: 42px;
padding: 0 22px;
border: 1.5px solid #0098d9;
border-radius: 999px;
background: #fff;
box-shadow: 0 3px 8px rgba(0, 40, 90, .18);
color: #0098d9;
font-size: .9375rem;
text-decoration: none;
transition: background-color .2s, color .2s;
}
.p-404__btn:hover { background: #0098d9; color: #fff; }
@media (min-width: 768px) {
.p-404-page .p-archive-hero__title { margin-top: 49px; }
.p-404-page > .l-container { margin-top: 40px; }
/* カンプはパンくず・見出しともカードの左端（980幅）にそろう */
.p-404-page .p-archive-hero .l-container { width: min(980px, 100% - var(--gutter) * 2); }
.p-404 { min-height: 350px; padding: 56px 40px 72px; }
.p-404__lead { font-size: 1.25rem; }
.p-404__text { font-size: .9375rem; }
}
@media (max-width: 767px) {
/* SPは横並びのまま（404 と Not Found が短いので縦積みにしない） */
.p-404-page .p-archive-hero__title { display: flex; align-items: baseline; gap: 0 16px; }
.p-404-page .p-archive-hero__en { display: inline; }
.p-404-page .p-archive-hero__ja { margin-top: 0; }
.p-404__text br { display: none; }
/* 1行に収める（18pxだと「した。」だけ次の行に落ちる） */
.p-404 { padding-inline: 16px; }
.p-404__lead { font-size: .9375rem; }
}
/* Pro 特徴1の写真（支給PDFの角丸前の元画像 760×570）。
カンプの表示枠は 348×212（横長）で、顔の口元が上端に来る位置＝上寄せで切り抜く。角丸はCSS。 */
.p-pro-feature__photo { position: relative; margin: 0 0 24px; }
.p-pro-img--feat-photo {
aspect-ratio: 348 / 212;
height: auto;
margin: 0;
object-fit: cover;
object-position: center top;
border-radius: 12px;
box-shadow: 0 6px 16px rgba(0, 0, 0, .18);
}
/* 特徴2：ソケットの差し込み口が中央に来る位置（カンプ実測で縦56%） */
.p-pro-feature__photo--2 .p-pro-img--feat-photo { object-position: 50% 56%; }
.p-pro-feature__photo--3 .p-pro-img--feat-photo { object-position: 50% 50%; }
/* 端末の切り抜き：写真の左端から2.7%・上から56%、幅は写真の22%。下に写真からはみ出す */
.p-pro-feature__device {
position: absolute;
left: 2.7%;
top: 56%;
width: 22%;
height: auto;
}
.p-pro-feature__photo--2 { margin-bottom: 70px; }
@media (min-width: 768px) {
.p-pro-feature .p-pro-feature__photo { grid-area: media; align-self: start; margin-bottom: 0; }
}
/* 紺ヒーロー（資料ダウンロード一覧・イベント情報）PC。
PCカンプ p.11 実測：ヒーロー上端 #0a3e94 → 直線で 415px 下で白。白パネルの途中までグラデが掛かる。
ヒーローの高さ基準（100%）だと約260pxで白になり、白文字の見出しが薄く見えていた。
ヒーローより長い帯を ::before で敷き、後ろに続くパネルは手前に出す（SPと同じ作り）。 */
@media (min-width: 768px) {
.p-archive-hero--navy { position: relative; background: none; }
.p-archive-hero--navy::before {
content: "";
position: absolute;
z-index: -1;
top: 0;
left: 0;
right: 0;
height: 415px;
background: linear-gradient(180deg, #0a3e94 0, #fff 415px);
pointer-events: none;
}
.p-archive-hero--navy + .l-container,
.p-archive-hero--navy + .p-case-archive { position: relative; z-index: 1; }
}
/* Pro ヒーロー PC：製品画像の縦位置（本多さん指示「画像がちょっと上」）。
0910_3カンプ p.3 実測（ヒーロー高さ659）：ノートPCの上端 149／端末の下端 589（下から70）。
現状は上端101／下端520（下から118）で約48px上にずれていた。
画像の高さ（1280幅で531px）の9%ぶん下げる。画面幅で画像が縮んでも比率で追従する。 */
@media (min-width: 768px) {
.p-pro-hero__product--side { transform: translateY(9%); }
}
/* Pro 特徴2：写真の下にはみ出す端末が、次の「3」の番号タブに近すぎた（本多さん指摘）。
PCでも写真の下に、端末のはみ出しぶん＋余白を確保する。 */
@media (min-width: 768px) {
.p-pro-feature .p-pro-feature__photo--2 { margin-bottom: 96px; }
}
/* ============================================================
資料ダウンロード（weroll様FB 2026-09-18）
① 一覧の下：製品ごとの資料（Right / Pro のフォームへ）
② 資料ごとのページ（0910_3カンプ PC p.12）とサンクスページ
============================================================ */
.p-doclist__plans { margin-top: 48px; padding-top: 36px; border-top: 1px solid #dfe6f0; text-align: center; }
.p-doclist__plans-head { margin: 0 0 18px; color: var(--navy); font-size: 1rem; font-weight: 700; }
.p-doclist__plans-list { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px 24px; margin: 0; padding: 0; list-style: none; }
.p-doclist__plan-btn {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 320px;
min-height: 52px;
padding: 8px 44px 8px 24px;
position: relative;
border-radius: 999px;
background: var(--navy);
box-shadow: 0 6px 14px rgb(0, 0, 0, .18);
color: #fff;
font-size: .9rem;
font-weight: 700;
text-decoration: none;
transition: opacity .2s;
}
.p-doclist__plan-btn--right { background: #0098d9; }
.p-doclist__plan-btn strong { margin: 0 .2em; font-weight: 800; }
.p-doclist__plan-btn::after {
content: "";
position: absolute;
right: 16px;
top: 50%;
width: 18px;
height: 18px;
transform: translateY(-50%);
background: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2032%2032'%3E%3Ccircle%20cx='16'%20cy='16'%20r='14'%20fill='none'%20stroke='white'%20stroke-width='2.4'/%3E%3Cpath%20d='M13%2010.5%20L22%2016%20L13%2021.5%20Z'%20fill='white'/%3E%3C/svg%3E") no-repeat center / contain;
}
@media (hover: hover) { .p-doclist__plan-btn:hover { opacity: .85; } }
@media (max-width: 767px) {
.p-doclist__plan-btn { min-width: 0; width: 100%; font-size: .85rem; }
.p-doclist__plans-list li { width: 100%; }
}
.p-docpage__panel { text-align: center; }
.p-docpage__title { margin: 0 0 28px; color: var(--navy); font-size: clamp(1.125rem, 2.6vw, 1.375rem); font-weight: 700; line-height: 1.6; }
.p-docpage__cover { margin: 0 auto 28px; max-width: 420px; }
.p-docpage__cover img { display: block; width: 100%; height: auto; border: 1px solid #dfe6f0; }
.p-docpage__lead { margin: 0 auto 32px; max-width: 640px; color: #231815; font-size: .9375rem; line-height: 1.8; }
.p-docpage__form { max-width: 640px; margin: 0 auto; text-align: left; }
.p-docpage__back { margin: 40px 0 0; }
.p-docpage__thanks { padding: 24px 0 8px; }
.p-docpage__thanks-title { margin: 0 0 24px; color: var(--navy); font-size: clamp(1.125rem, 2.6vw, 1.375rem); font-weight: 700; line-height: 1.7; }
.p-docpage__thanks-text { margin: 0; color: #231815; font-size: .9375rem; line-height: 1.9; }
@media (min-width: 768px) {
.p-docpage__panel { padding: 56px 65px 64px; }
.p-docpage .u-br-sp { display: none; }
}
/* ============================================================
絞り込みタグ（導入事例・イベント一覧）2026-09-18 本多さん指示
「タグがわかりづらい（特にSP）」→
A. 全部を枠付きのボタンに：非選択＝白地＋枠線＋紺文字 ／ 選択中＝紺の塗り＋白文字
C. SPは1行の横スクロール（右端をぼかして続きがあることを示す）
SPは文字も小さく（13.6px → 12px）。
============================================================ */
.case-filter__link {
opacity: 1;
/* 非選択は薄く（本多さん指示）：枠・文字とも紺を淡くした色 */
border-color: #d3dbe8;
background: #fff;
color: #8a9bbb;
}
.case-filter__link.is-current {
border-color: var(--navy);
background: var(--navy);
color: #fff;
}
@media (hover: hover) {
.case-filter__link:hover { border-color: var(--navy); color: var(--navy); }
.case-filter__link.is-current:hover { color: #fff; }
}
@media (max-width: 767px) {
.case-filter {
position: relative;
/* 横スクロールの右端をぼかす（続きがあることを示す） */
-webkit-mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent);
mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent);
}
.case-filter__list {
flex-wrap: nowrap;
gap: 8px;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
padding: 2px 28px 4px 0; /* 最後のボタンがぼかしに隠れないよう右に余白 */
}
.case-filter__list::-webkit-scrollbar { display: none; }
.case-filter__item { flex: 0 0 auto; }
.case-filter__link { padding: 5px 16px; font-size: .75rem; white-space: nowrap; }
}
/* 記事の下に差し込む「よくある質問」：上のコンテンツとの間に余白（本多さん指示「上マージン足りない」） */
.p-faq-slot { margin-top: 80px; }
@media (max-width: 767px) {
.p-faq-slot { margin-top: 56px; }
}
/* 資料ダウンロード一覧・下段「製品ごとの資料はこちら」：上段と同じカードを2枚、中央にそろえる */
.p-doclist__plans-head { margin: 0 0 24px; }
@media (min-width: 768px) {
.p-doclist__grid--product { grid-template-columns: repeat(2, 260px); justify-content: center; }
}
/* 製品画像は切り抜きPNGなので、表紙のような枠線は付けない */
.p-doclist__grid--product .p-doclist__cover img { border: 0; box-shadow: none; }
/* SPメニュー：詰めすぎていたので上下の余白を広げる（本多さん指示 2026-09-18）。
以前は「1画面に収める」（AUN #8）ためにぎりぎりまで詰めていた。 */
@media (max-width: 767px) {
.global-menu__inner { padding-top: 36px; padding-bottom: 40px; }
.global-menu__plans { gap: 16px; margin-bottom: 24px; }
.global-menu__plan { min-height: 96px; gap: 8px; padding: 14px 10px; }
.global-menu__list a { padding: 16px 2px; }
.global-menu__cta { gap: 14px; margin-top: 28px; }
.global-menu__cta .btn { min-height: 48px; }
/* 2列だと画面幅によって右の列が枠からはみ出す／折り返すと「項」だけ次の行に落ちるので1列に */
.global-menu__legal-list { grid-template-columns: 1fr; gap: 12px; margin-top: 28px; }
}
/* ページ内リンク（#form など）はスムーススクロールで移動（本多さん指示 2026-09-18）。
追従ヘッダー（PC 100px / SP 91px）の下に隠れないよう、止まる位置を少し下げる。
動きを減らす設定の人には従来どおり瞬時に移動する。 */
html { scroll-padding-top: 116px; }
@media (max-width: 767px) { html { scroll-padding-top: 104px; } }
@media (prefers-reduced-motion: no-preference) {
html { scroll-behavior: smooth; }
}
/* ヘッダーの「料金」ボタン（資料DLとお問い合わせの間）。他の2つと同じ上下2色、色は水色 */
.site-header__cta .btn--price {
background: linear-gradient(180deg, #4cb6e4 0 50%, #0098d9 50% 100%);
color: #fff;
}
/* 選ばれる理由（Right）：左右の画像の高さをそろえる（SUZUKI様FB 2026-09-18）。
一般的なサムネイルの比率 16:9 の枠に統一し、画像は切らずに全体を収める。
2枚目（番組画像）は余った部分に同じ画像をぼかして敷く（本多さん案）。1枚目のロゴは白地。 */
.p-reason-card__frame {
position: relative;
display: flex;
align-items: center;
justify-content: center;
aspect-ratio: 16 / 9;
overflow: hidden;
border-radius: 6px;
}
.p-reason-card__frame img,
.p-reason-card__frame .p-pro-ph {
position: relative;
z-index: 1;
width: 100% !important;
height: 100% !important;
aspect-ratio: auto !important;
margin: 0 !important;
object-fit: contain;
border-radius: 0 !important;
}
.p-reason-card__frame--blur::before {
content: "";
position: absolute;
inset: -24px;
background: var(--bg) center / cover no-repeat;
filter: blur(14px) brightness(.9);
}
/* 1枚目のロゴは枠の中で少し小さく（枠いっぱいだと大きすぎる） */
.p-reason-card:first-child .p-reason-card__frame img { padding: 0 8%; box-sizing: border-box; }
@media (max-width: 767px) {
.p-pro .p-reason-card:first-child .p-reason-card__frame img { width: 100% !important; padding: 0 14%; }
}
/* 資料ダウンロード一覧：Right / Pro / サービスカタログ の見出しごとの区分（SUZUKI様FB 2026-09-18）。
※ デザイン支給後に見出しの体裁は調整する */
.p-doclist__group + .p-doclist__group { margin-top: 56px; }
.p-doclist__group-head {
margin: 0 0 24px;
padding-bottom: 10px;
border-bottom: 1px solid #dfe6f0;
color: var(--navy);
font-size: 1.125rem;
font-weight: 800;
text-align: left;
}
@media (max-width: 767px) {
.p-doclist__group + .p-doclist__group { margin-top: 40px; }
.p-doclist__group-head { font-size: 1rem; }
}
/* 資料のカードは、枚数が3枚に満たない区分でも左右中央にそろえる（本多さん指示 2026-09-24）。
grid の3列固定だと、1〜2枚のときに左に寄ってしまうため flex にする。 */
@media (min-width: 768px) {
.p-doclist__group .p-doclist__grid {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 35px;
}
.p-doclist__group .p-doclist__card { flex: 0 0 260px; max-width: 260px; }
}
/* 企業ロゴ：ロゴ画像の余白を削ってもらったので（2026-09-24）、ロゴとロゴの間隔を固定して等間隔にする。
※ 画像に余白が入っていた頃は、間隔を固定しても一定に見えなかったため「1枠240pxの中央」方式にしていた。
画像に余白が戻った場合は、その方式（width:240px・中央）に戻すこと。 */
:root { --logo-gap: 56px; }
.p-top__logos .wp-block-gallery.js-logo-marquee { gap: var(--logo-gap); }
.p-top__logos .wp-block-gallery.js-logo-marquee figure.wp-block-image {
display: flex !important;
align-items: center;
justify-content: center;
width: auto !important;
padding: 0;
}
.logo-marquee__track { gap: var(--logo-gap); }
.logo-marquee__item { display: flex; align-items: center; justify-content: center; }
@media (max-width: 767px) {
:root { --logo-gap: 40px; }
}
/* カード全体をクリックできるようにしたとき、カーソルで分かるようにする（assets/js/main.js） */
.is-card-link { cursor: pointer; }