/* ============================================================
グロビシア コーポレートサイト スタイルシート
------------------------------------------------------------
構成（この順番で入っています）
1. CSS変数（:root）
2. 基本リセット・全体設定
3. ヘッダー
4. フッター
5. 見出し・本文・ボタンの基本スタイル
6. セクションの余白と明暗を交互にする背景クラス
7. カード型レイアウト（2列・3列・4列）
8. 比較表（スマホ対応）
9. ステップ表示（1→2→3の流れ）
10. FAQアコーディオン
11. フォーム各要素
12. モーダル（プライバシーポリシー確認用）
13. ページトップへ戻るボタン
14. スクロール時のふわっと表示アニメーション
15. レスポンシブ対応（画面幅の目安：1280px / 768px / 390px）
16. ページ専用の追加コンポーネント（打ち消し線リスト・画像枠・比較表の列強調・
数値グラフ・チェックリスト・強調パネル 等）
17. 印刷時の調整
※フォントはGoogleFontsを使用します。HTML側のに下記を
記載してください（デザイン確認.htmlに実装済み）。
============================================================ */
/* ============================================================
1. CSS変数（:root）
============================================================ */
:root {
/* ---- 色：先進的な青×シアンを基調 ---- */
--color-navy-950: #071120;
--color-navy-900: #0a1a30;
--color-navy-800: #0f2542;
--color-blue-600: #2f6fed;
--color-blue-500: #3b82f6;
--color-cyan-500: #17b8c9;
--color-cyan-400: #22d3ee;
--color-cyan-300: #7fe6f2;
/* ---- 明るい背景の上で使う文字色 ---- */
--color-ink: #14233c;
--color-ink-soft: #33445e;
--color-muted: #5c6c85;
--color-muted-soft: #8493ac;
/* ---- 明るい背景色 ---- */
--color-bg: #ffffff;
--color-bg-soft: #f6f9fc;
--color-bg-soft-2: #eef3f9;
--color-line: #e2e8f1;
--color-line-soft: #edf2f8;
/* ---- 暗い背景（濃紺）の上で使う文字色 ---- */
--color-on-dark: #eaf3fb;
--color-on-dark-muted: #9db2cc;
--color-on-dark-line: rgba(255, 255, 255, 0.14);
/* ---- グラデーション（ファーストビュー・CTA帯用／濃紺→青→シアンの斜めグラデーション） ---- */
--gradient-dark: linear-gradient(135deg, #050d1a 0%, #0a1f3d 28%, #123a63 52%, #0d5570 76%, #0e6a80 100%);
--gradient-accent: linear-gradient(90deg, var(--color-blue-500), var(--color-cyan-400));
/* ---- 状態色 ---- */
--color-danger: #e11d48;
/* ---- フォント ---- */
--font-jp: "Noto Sans JP", "Hiragino Sans", "Yu Gothic", "Meiryo", sans-serif;
--font-en: "Jost", var(--font-jp);
/* ---- 文字サイズ（画面幅に応じて自動で少し変化します） ---- */
--fs-hero: clamp(1.8rem, 1.05rem + 3.2vw, 3.1rem);
--fs-h2: clamp(1.4rem, 1rem + 1.8vw, 2.2rem);
--fs-h3: clamp(1.1rem, 0.95rem + 0.7vw, 1.4rem);
--fs-lede: clamp(0.95rem, 0.85rem + 0.4vw, 1.15rem);
--fs-body: clamp(0.92rem, 0.87rem + 0.2vw, 1rem);
--fs-small: 0.85rem;
/* ---- 余白 ---- */
--space-1: 4px;
--space-2: 8px;
--space-3: 12px;
--space-4: 16px;
--space-5: 24px;
--space-6: 32px;
--space-7: 48px;
--space-8: 64px;
--section-py: clamp(48px, 32px + 6vw, 100px);
--container-w: 1200px;
--container-pad: clamp(20px, 4vw, 40px);
--header-h: 80px;
/* ---- 角丸・影 ---- */
--radius-sm: 8px;
--radius-md: 14px;
--radius-lg: 22px;
--radius-pill: 999px;
--shadow-sm: 0 2px 10px rgba(20, 34, 56, 0.07);
--shadow-md: 0 10px 30px rgba(20, 34, 56, 0.12);
--shadow-dark: 0 16px 50px rgba(3, 10, 20, 0.4);
--transition-base: 0.2s ease;
/* ---- 背景装飾の濃さ（数値だけで調整可能） ---- */
--decor-glow-1-opacity: 0.22;
--decor-glow-2-opacity: 0.16;
--decor-map-opacity: 0.18;
--decor-route-opacity: 0.55;
--decor-city-opacity: 0.8;
--decor-signal-opacity: 0.4;
/* ============================================================
■ セクション背景色（ここを変えるだけで各セクションの背景が変わります）
ipesim.html（IPeSIMとはページ）の各セクション専用の背景色です。
============================================================ */
/* ページヘッダー（ファーストビュー）の背景（画像読み込み前・失敗時の保険用グラデーション） */
--sec-bg-hero: var(--gradient-dark);
/* IPeSIMとはページ：ファーストビューの背景画像
※IPeSIMとはページの背景画像を差し替える場合は assets/img/ip_top.png を差し替えるか、この変数を変更してください */
--ipesim-hero-bg-image: url("../img/ip_top.png");
/* IPeSIMとはページ：ファーストビュー背景画像の位置（PC用）。飛行機やビル群の見え方を調整したい場合はここを変更してください */
--ipesim-hero-bg-position: center;
/* IPeSIMとはページ：ファーストビュー背景画像の位置（スマホ用／640px以下）。飛行機やビル群が見切れる場合はここを変更してください */
--ipesim-hero-bg-position-mobile: center;
/* IPeSIMとはページ：ファーストビュー画像の上に重ねる濃紺の半透明オーバーレイ（文字が乗る左〜中央は濃く、写真を見せる右側は薄く）
※濃さを調整したい場合は rgba() の最後の数値（0〜1、大きいほど濃い）を変更してください */
--ipesim-hero-overlay: linear-gradient(
to right,
rgba(7, 17, 32, 0.92) 0%,
rgba(7, 17, 32, 0.82) 32%,
rgba(9, 22, 40, 0.55) 58%,
rgba(9, 22, 40, 0.28) 80%,
rgba(9, 22, 40, 0.14) 100%
);
/* 「荷物ゼロ」ブロックの背景 */
--sec-bg-baggage: var(--color-bg);
/* IPeSIMが選ばれる理由の背景（画像読み込み前・失敗時の保険用グラデーション） */
--sec-bg-why: var(--gradient-dark);
/* IPeSIMが選ばれる理由：背景画像
※IPeSIMが選ばれる理由セクションの背景画像を差し替える場合は assets/img/why.jpg を差し替えるか、この変数を変更してください */
--why-bg-image: url("../img/why.jpg");
/* IPeSIMが選ばれる理由：背景画像の位置（PC用） */
--why-bg-position: center;
/* IPeSIMが選ばれる理由：背景画像の位置（スマホ用／640px以下） */
--why-bg-position-mobile: center;
/* IPeSIMが選ばれる理由：画像の上に重ねる濃紺の半透明オーバーレイ
白いカード4枚・白文字見出しの可読性を保ちつつ、写真が背景としてはっきり見える濃さにしています
※濃さを調整したい場合は rgba() の最後の数値（0〜1、大きいほど濃い）を変更してください */
--why-overlay: linear-gradient(
180deg,
rgba(7, 17, 32, 0.74) 0%,
rgba(9, 22, 40, 0.7) 50%,
rgba(7, 17, 32, 0.74) 100%
);
/* eSIMのメリットの背景 */
--sec-bg-merit: var(--color-bg-soft);
/* 海外での通信手段の比較の背景 */
--sec-bg-compare: var(--color-bg);
/* 費用面のメリットの背景 */
--sec-bg-cost: var(--gradient-dark);
/* 4ステップで簡単利用開始の背景 */
--sec-bg-steps: var(--color-bg);
/* 企業・従業員双方のメリットの背景 */
--sec-bg-benefit: var(--color-bg-soft);
/* なぜグロビシアからご購入いただくのかの背景 */
--sec-bg-trust: var(--color-bg);
/* よくあるご質問の背景 */
--sec-bg-faq: var(--color-bg-soft);
/* お問い合わせCTAの背景 */
--sec-bg-cta: var(--gradient-dark);
/* ---- 比較表の記号（◎○△）の色。ここを変えるだけで色分けを調整できます ---- */
/* ◎＝シアン系の濃い色（最も優れている） */
--cmp-mark-best: #0e8fa3;
/* ○＝グレー寄りの落ち着いた色（普通） */
--cmp-mark-good: #6b7a90;
/* △＝薄いグレー（やや劣る） */
--cmp-mark-fair: #aab2c0;
/* ---- 「費用面のメリット」タイルの色。ここを変えるだけでタイルの見た目を調整できます ---- */
/* タイルの背景（不透明な白いカード） */
--cost-tile-bg: var(--color-bg);
/* タイルの枠線（ごく薄いグレー） */
--cost-tile-border: var(--color-line);
/* タイル内「0円」等の大きい数値の文字色（濃いシアン〜青系） */
--cost-value-color: #0a5f78;
/* タイル内「初期費用」等のラベル文字色（本文用の濃いグレー） */
--cost-label-color: var(--color-ink);
/* ---- 「費用面のメリット」セクションの背景画像・オーバーレイ ----
※費用面のメリットの背景画像を差し替える場合は assets/img/cost.jpg を差し替えるか、この変数を変更してください */
--cost-bg-image: url("../img/cost.jpg");
/* 背景画像の位置（PC用） */
--cost-bg-position: center;
/* 背景画像の位置（スマホ用／640px以下）。飛行機やビル群が見切れる場合はここを変更してください */
--cost-bg-position-mobile: center;
/* 背景画像の上に重ねる青系の半透明オーバーレイ（左：濃紺／右：やや明るい青）。
白いカードが文字を守るため、濃さは薄めにして写真がしっかり見えるようにしています
※濃さを調整したい場合は rgba() の最後の数値（0〜1、大きいほど濃い）を変更してください */
--cost-overlay: linear-gradient(
90deg,
rgba(7, 17, 32, 0.6) 0%,
rgba(13, 56, 92, 0.58) 55%,
rgba(20, 92, 150, 0.55) 100%
);
}
/* ============================================================
2. 基本リセット・全体設定
============================================================ */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
}
body {
margin: 0;
font-family: var(--font-jp);
font-size: var(--fs-body);
line-height: 1.8;
color: var(--color-ink);
background: var(--color-bg);
-webkit-font-smoothing: antialiased;
}
img, picture, svg { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul, ol { margin: 0; padding: 0; list-style: none; }
h1, h2, h3, h4, p, figure { margin: 0; }
button, input, textarea, select {
font-family: inherit;
font-size: inherit;
color: inherit;
}
button { cursor: pointer; background: none; border: none; }
.container {
max-width: var(--container-w);
margin-inline: auto;
padding-inline: var(--container-pad);
}
.sr-only {
position: absolute;
width: 1px; height: 1px;
padding: 0; margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
/* 数値・英字だけ少し違う書体にしたい時に使う */
.font-en { font-family: var(--font-en); }
/* 「初期費用0円」等、途中で改行させたくない短いフレーズ用 */
.nowrap-phrase {
display: inline-block;
white-space: nowrap;
font-size: clamp(0.78rem, 0.7rem + 0.5vw, 0.95rem);
}
/* ============================================================
3. ヘッダー
============================================================ */
.site-header {
position: sticky;
top: 0;
z-index: 100;
height: var(--header-h);
background: rgba(255, 255, 255, 0.92);
backdrop-filter: blur(8px);
border-bottom: 1px solid var(--color-line);
}
.header-inner {
height: var(--header-h);
display: flex;
align-items: center;
gap: var(--space-6);
}
.logo {
display: flex;
align-items: center;
gap: var(--space-3);
font-weight: 800;
font-size: 1.05rem;
color: var(--color-ink);
flex: none;
margin-right: auto;
}
.logo .logo-mark {
width: 30px;
height: 30px;
border-radius: 9px;
background: var(--gradient-dark);
position: relative;
flex: none;
}
.logo .logo-mark::after {
content: "";
position: absolute;
inset: 8px;
border-radius: 4px;
background: var(--gradient-accent);
}
/* ナビゲーション（デスクトップでは横並び／820px以下は右からのスライドパネル） */
.main-nav {
display: flex;
align-items: center;
gap: var(--space-6);
}
.main-nav .nav-list {
display: flex;
align-items: center;
gap: var(--space-5);
}
.main-nav .nav-list a {
font-size: 0.92rem;
font-weight: 700;
color: var(--color-ink-soft);
padding: var(--space-2) 0;
border-bottom: 2px solid transparent;
transition: color var(--transition-base), border-color var(--transition-base);
white-space: nowrap;
}
.main-nav .nav-list a:hover,
.main-nav .nav-list a[aria-current="page"] {
color: var(--color-blue-600);
border-bottom-color: var(--color-cyan-400);
}
/* ---- 電話ブロック（ヘッダー・フッター共通／将来的に画像へ差し替え可能な独立構造） ---- */
.phone-block {
display: flex;
flex-direction: column;
gap: 2px;
line-height: 1.4;
}
.phone-block .phone-number {
font-family: var(--font-en);
font-size: clamp(1.05rem, 0.9rem + 0.6vw, 1.35rem);
font-weight: 700;
color: var(--color-ink);
letter-spacing: 0.01em;
white-space: nowrap;
}
.phone-block .phone-hours { font-size: 0.75rem; color: var(--color-muted); white-space: nowrap; }
.phone-block .phone-note { font-size: 0.7rem; color: var(--color-blue-600); font-weight: 700; }
.phone-block .phone-note-sub { font-size: 0.64rem; color: var(--color-muted-soft); }
.site-footer .phone-block .phone-number { color: var(--color-on-dark); }
.site-footer .phone-block .phone-hours { color: var(--color-on-dark-muted); }
.site-footer .phone-block .phone-note { color: var(--color-cyan-300); }
.site-footer .phone-block .phone-note-sub { color: var(--color-on-dark-muted); opacity: 0.75; }
/* ヘッダー内（デスクトップ／モバイルメニュー共通）は電話番号・受付時間の2行までに収める。
「IPeSIM専用」「営業目的お断り」の注記はフッターとお問い合わせページのみに表示する。 */
.phone-block--header .phone-note,
.phone-block--header .phone-note-sub,
.phone-block--nav .phone-note,
.phone-block--nav .phone-note-sub {
display: none;
}
/* お問い合わせページ等で使う、注記まで含めた大きめ・中央寄せの電話ブロック */
.phone-block--contact {
align-items: center;
text-align: center;
gap: 6px;
}
.phone-block--contact .phone-number {
font-size: clamp(1.4rem, 1.05rem + 1.6vw, 2.05rem);
}
.phone-block--contact .phone-hours { font-size: 0.9rem; }
.phone-block--contact .phone-note { font-size: 0.8rem; }
.phone-block--contact .phone-note-sub { font-size: 0.72rem; }
/* ヘッダー内の電話ブロックはデスクトップ幅のみ表示 */
.phone-block--header { display: flex; }
/* ハンバーガーボタン（820px以下でのみ表示） */
.hamburger {
display: none;
flex: none;
width: 40px;
height: 40px;
border-radius: var(--radius-sm);
align-items: center;
justify-content: center;
gap: 5px;
flex-direction: column;
}
.hamburger span {
display: block;
width: 22px;
height: 2px;
background: var(--color-ink);
border-radius: 2px;
transition: transform var(--transition-base), opacity var(--transition-base);
}
.hamburger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.hamburger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.hamburger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
/* ナビ内モバイル専用の電話ブロック（デスクトップでは非表示） */
.phone-block--nav { display: none; }
.nav-cta--header { flex: none; }
.nav-cta--mobile { display: none; }
/* ============================================================
4. フッター
============================================================ */
.site-footer {
background: var(--color-navy-950);
color: var(--color-on-dark-muted);
padding: var(--space-8) 0 var(--space-6);
}
.footer-grid {
display: grid;
grid-template-columns: 1.4fr 1fr 1fr;
gap: var(--space-7);
padding-bottom: var(--space-7);
border-bottom: 1px solid var(--color-on-dark-line);
}
.footer-brand .logo { color: var(--color-on-dark); margin-right: 0; }
.footer-brand p {
margin-top: var(--space-4);
font-size: var(--fs-small);
line-height: 1.9;
max-width: 34ch;
}
.footer-heading {
font-size: 0.82rem;
font-weight: 700;
letter-spacing: 0.06em;
color: var(--color-on-dark);
margin-bottom: var(--space-4);
}
.footer-links li { margin-bottom: var(--space-3); }
.footer-links a {
font-size: var(--fs-small);
transition: color var(--transition-base);
}
.footer-links a:hover { color: var(--color-cyan-400); }
.footer-bottom {
display: flex;
justify-content: space-between;
align-items: center;
gap: var(--space-4);
padding-top: var(--space-6);
font-size: 0.78rem;
flex-wrap: wrap;
}
/* ============================================================
5. 見出し・本文・ボタンの基本スタイル
============================================================ */
/* 大文字表記にしたい場合は、text-transformではなくHTML側に直接大文字で
記載してください（「IPeSIM」等の商品名表記が誤って変換されるのを防ぐため）。 */
.eyebrow {
display: inline-flex;
align-items: center;
gap: var(--space-2);
font-family: var(--font-en);
font-size: 0.82rem;
font-weight: 600;
letter-spacing: 0.12em;
color: var(--color-cyan-500);
margin-bottom: var(--space-4);
}
.eyebrow::before {
content: "";
width: 22px;
height: 2px;
background: var(--gradient-accent);
border-radius: 2px;
}
.section-dark .eyebrow { color: var(--color-cyan-300); }
h1, .h1 {
font-size: var(--fs-hero);
font-weight: 800;
line-height: 1.35;
letter-spacing: -0.01em;
text-wrap: balance;
}
h2, .h2 {
font-size: var(--fs-h2);
font-weight: 800;
line-height: 1.4;
text-wrap: balance;
}
h3, .h3 {
font-size: var(--fs-h3);
font-weight: 700;
line-height: 1.5;
}
.lede {
font-size: var(--fs-lede);
color: var(--color-muted);
line-height: 1.9;
max-width: 56ch;
}
.section-dark .lede { color: var(--color-on-dark-muted); }
.section-dark p { color: var(--color-on-dark-muted); }
.section-dark h1, .section-dark h2, .section-dark h3 { color: var(--color-on-dark); }
/* 見出し下のアクセント帯（白背景セクションで先進感を出す） */
.heading-accent {
display: block;
width: 56px;
height: 4px;
border-radius: 4px;
background: var(--gradient-accent);
margin: var(--space-4) 0 var(--space-5);
}
.section-head { margin-bottom: var(--space-7); }
.section-head.center { text-align: center; margin-inline: auto; }
.section-head.center .lede { margin-inline: auto; }
/* ---- ボタン ---- */
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--space-2);
padding: 0.9em 1.6em;
border-radius: var(--radius-pill);
font-weight: 700;
font-size: 0.95rem;
white-space: nowrap;
transition: transform var(--transition-base), box-shadow var(--transition-base), background var(--transition-base), color var(--transition-base), border-color var(--transition-base);
}
.btn:hover { transform: translateY(-1px); }
.btn:focus-visible { outline: 2px solid var(--color-blue-500); outline-offset: 2px; }
.btn-primary {
background: var(--gradient-accent);
color: #06141f;
box-shadow: var(--shadow-md);
}
.btn-outline {
background: transparent;
color: var(--color-blue-600);
border: 1.5px solid var(--color-line);
}
.btn-outline:hover { border-color: var(--color-blue-500); }
.btn-outline-light {
background: transparent;
color: var(--color-on-dark);
border: 1.5px solid var(--color-on-dark-line);
}
.btn-outline-light:hover { border-color: var(--color-cyan-400); }
.btn-sm { padding: 0.6em 1.2em; font-size: 0.85rem; }
.btn-lg { padding: 1.05em 2em; font-size: 1.02rem; }
.btn-block { width: 100%; }
/* ============================================================
6. セクションの余白と明暗を交互にする背景クラス
------------------------------------------------------------
・.section-dark … ファーストビューやCTA帯などの主役セクション
・.section-light … 白背景の本文セクション
・.section-soft … ごく淡いグレーの本文セクション
（暗い背景は全体の3〜4割程度に留め、明暗を交互に使ってください）
============================================================ */
.section { padding-block: var(--section-py); }
/* ---- 明るいセクション（白／淡いグレー）。単調にならないよう上下に薄いグラデーションの帯を入れる ---- */
.section-light,
.section-soft {
position: relative;
overflow: hidden;
color: var(--color-ink);
}
.section-light { background: var(--color-bg); }
.section-soft { background: var(--color-bg-soft); }
.section-light::before,
.section-soft::before,
.section-light::after,
.section-soft::after {
content: "";
position: absolute;
left: 0;
right: 0;
height: 3px;
background: var(--gradient-accent);
pointer-events: none;
}
.section-light::before,
.section-soft::before { top: 0; opacity: 0.5; }
.section-light::after,
.section-soft::after { bottom: 0; opacity: 0.28; }
/* ---- 暗いセクション（ファーストビュー・CTA帯）。斜めグラデーション＋光＋通信網モチーフで奥行きを出す ---- */
.section-dark {
background: var(--gradient-dark);
color: var(--color-on-dark);
position: relative;
overflow: hidden;
}
/* 光が差し込むような放射状グラデーション（2箇所）。濃さは --decor-glow-*-opacity で調整可能 */
.section-dark::before {
content: "";
position: absolute;
inset: 0;
background: radial-gradient(760px 420px at 85% -12%, rgba(34, 211, 238, var(--decor-glow-1-opacity)), transparent 62%);
pointer-events: none;
}
.section-dark::after {
content: "";
position: absolute;
inset: 0;
background: radial-gradient(620px 460px at 4% 112%, rgba(59, 130, 246, var(--decor-glow-2-opacity)), transparent 60%);
pointer-events: none;
}
.section-dark .container { position: relative; z-index: 1; }
/* 海外渡航・グローバル通信を表す装飾（世界地図の点描／航路と都市の点／通信の同心円／インラインSVG）
濃さは --decor-map-opacity / --decor-route-opacity / --decor-city-opacity / --decor-signal-opacity で調整可能 */
.bg-decor {
position: absolute;
inset: 0;
overflow: hidden;
pointer-events: none;
z-index: 0;
}
.bg-decor-svg { width: 100%; height: 100%; }
.bg-decor-worldmap { opacity: var(--decor-map-opacity); }
.bg-decor-routes { opacity: var(--decor-route-opacity); }
.bg-decor-cities { opacity: var(--decor-city-opacity); }
.bg-decor-signal { opacity: var(--decor-signal-opacity); }
/* ============================================================
7. カード型レイアウト（2列・3列・4列 / レスポンシブ）
============================================================ */
.grid {
display: grid;
gap: var(--space-6);
}
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
.card {
background: var(--color-bg);
border: 1px solid var(--color-line);
border-radius: var(--radius-md);
padding: var(--space-6);
box-shadow: var(--shadow-sm);
}
.section-dark .card {
background: rgba(255, 255, 255, 0.04);
border-color: var(--color-on-dark-line);
box-shadow: none;
}
.card-icon {
width: 48px;
height: 48px;
border-radius: var(--radius-sm);
display: flex;
align-items: center;
justify-content: center;
background: var(--color-bg-soft-2);
color: var(--color-blue-600);
margin-bottom: var(--space-4);
font-family: var(--font-en);
font-weight: 700;
}
.section-dark .card-icon {
background: rgba(34, 211, 238, 0.12);
color: var(--color-cyan-300);
}
.card h3 { margin-bottom: var(--space-3); }
.card p { color: var(--color-muted); font-size: var(--fs-small); line-height: 1.8; }
.section-dark .card p { color: var(--color-on-dark-muted); }
/* 短いキーワードを崩さず並べるチップ（例：初期費用0円 / 縛りなし） */
.chip-row {
display: flex;
flex-wrap: wrap;
gap: var(--space-3);
}
.chip {
display: inline-block;
white-space: nowrap;
font-size: clamp(0.78rem, 0.72rem + 0.4vw, 0.92rem);
font-weight: 700;
padding: 0.6em 1.1em;
border-radius: var(--radius-pill);
background: var(--color-bg-soft-2);
color: var(--color-blue-600);
}
.chip.accent { background: rgba(23, 184, 201, 0.12); color: var(--color-cyan-500); }
.section-dark .chip { background: rgba(255, 255, 255, 0.08); color: var(--color-on-dark); }
.section-dark .chip.accent { background: rgba(34, 211, 238, 0.16); color: var(--color-cyan-300); }
/* ============================================================
8. 比較表（スマホでは1件ずつのカード表示に変換）
============================================================ */
.table-compare-wrap {
background: var(--color-bg);
border-radius: var(--radius-md);
box-shadow: var(--shadow-sm);
overflow: hidden;
}
.table-compare {
width: 100%;
border-collapse: collapse;
}
.table-compare th,
.table-compare td {
padding: var(--space-4) var(--space-5);
border-bottom: 1px solid var(--color-line);
text-align: left;
font-size: var(--fs-small);
}
/* 大文字表記は自動変換せず、HTML側の見出し文言をそのまま表示する
（商品名「IPeSIM」等が誤って大文字化されるのを防ぐため） */
.table-compare thead th {
background: var(--color-bg-soft);
font-family: var(--font-en);
font-size: 0.78rem;
letter-spacing: 0.04em;
color: var(--color-muted);
font-weight: 700;
}
.table-compare tbody tr:last-child td { border-bottom: none; }
.table-compare td[data-highlight="true"] {
color: var(--color-blue-600);
font-weight: 700;
}
/* ---- 比較表のセル：記号＋テキストをひとまとまりにするラッパー ---- */
.cmp-cell {
display: inline-flex;
align-items: center;
gap: 0.5em;
}
/* ---- 比較表の記号（◎○△）。色は :root の --cmp-mark-* で調整します ---- */
.cmp-mark {
font-size: 1.15em;
line-height: 1;
flex: none;
}
.cmp-mark--best { color: var(--cmp-mark-best); }
.cmp-mark--good { color: var(--cmp-mark-good); }
.cmp-mark--fair { color: var(--cmp-mark-fair); }
/* ============================================================
9. ステップ表示（1→2→3の流れ）
============================================================ */
.steps {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--space-6);
}
.step-item { position: relative; padding-top: var(--space-2); }
.step-item:not(:last-child)::after {
content: "";
position: absolute;
top: 26px;
left: calc(50% + 40px);
right: calc(-50% + 40px);
height: 2px;
background: repeating-linear-gradient(90deg, var(--color-line) 0 8px, transparent 8px 16px);
}
.section-dark .step-item:not(:last-child)::after {
background: repeating-linear-gradient(90deg, var(--color-on-dark-line) 0 8px, transparent 8px 16px);
}
.step-number {
font-family: var(--font-en);
font-size: 1.9rem;
font-weight: 700;
color: var(--color-blue-600);
margin-bottom: var(--space-4);
}
.section-dark .step-number { color: var(--color-cyan-300); }
.step-item h3 { margin-bottom: var(--space-2); }
.step-item p { color: var(--color-muted); font-size: var(--fs-small); }
.section-dark .step-item p { color: var(--color-on-dark-muted); }
/* ============================================================
10. FAQアコーディオン（/を使用。JS不要）
============================================================ */
.faq-list { border-top: 1px solid var(--color-line); }
.faq-item { border-bottom: 1px solid var(--color-line); }
.faq-item summary {
cursor: pointer;
list-style: none;
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-4);
padding: var(--space-5) var(--space-1);
font-weight: 700;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary .faq-icon {
flex: none;
width: 28px;
height: 28px;
border-radius: 50%;
background: var(--color-bg-soft-2);
color: var(--color-blue-600);
display: flex;
align-items: center;
justify-content: center;
font-family: var(--font-en);
font-size: 1.1rem;
transition: transform var(--transition-base), background var(--transition-base), color var(--transition-base);
}
.faq-item[open] summary .faq-icon {
background: var(--gradient-accent);
color: #06141f;
transform: rotate(45deg);
}
.faq-item .faq-answer {
padding: 0 var(--space-1) var(--space-5);
color: var(--color-muted);
font-size: var(--fs-small);
line-height: 1.9;
}
/* ============================================================
11. フォーム各要素
============================================================ */
.form-group { margin-bottom: var(--space-5); }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-5); }
.form-label {
display: block;
font-weight: 700;
font-size: var(--fs-small);
margin-bottom: var(--space-2);
}
.form-required {
color: var(--color-danger);
font-size: 0.72em;
margin-left: 0.4em;
font-weight: 700;
}
.form-optional {
color: var(--color-muted);
font-size: 0.72em;
margin-left: 0.4em;
font-weight: 400;
}
.form-input,
.form-textarea,
.form-select {
width: 100%;
padding: 0.85em 1em;
border: 1px solid var(--color-line);
border-radius: var(--radius-sm);
background: var(--color-bg);
transition: border-color var(--transition-base), box-shadow var(--transition-base);
}
.form-textarea { min-height: 140px; resize: vertical; }
.form-input:focus,
.form-textarea:focus,
.form-select:focus {
outline: none;
border-color: var(--color-blue-500);
box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
}
.form-check {
display: flex;
align-items: flex-start;
gap: var(--space-3);
font-size: var(--fs-small);
color: var(--color-muted);
}
.form-check input { margin-top: 0.3em; flex: none; }
.form-check a { color: var(--color-blue-600); font-weight: 700; text-decoration: underline; }
.form-note { font-size: 0.78rem; color: var(--color-muted-soft); margin-top: var(--space-2); }
/* ============================================================
12. モーダル（プライバシーポリシー確認用／