/* ==========================================================================
   KMAX Hotline  style.css
   --------------------------------------------------------------------------
   目次
   01 BASE ............ 変数・リセット・共通
   02 TYPOGRAPHY ...... 見出し・本文・英字ラベル
   03 BUTTON .......... ボタン
   04 LAYOUT .......... グリッド・カード・画像・2カラム
   05 HEADER .......... ロゴ・メインメニュー・ハンバーガー
   06 HERO ............ メインビジュアル（背景スライド）・CTAボタン
   07 TRUST ........... 実績の数字
   08 SYSTEM / FLOW ... システム構成図・フロー表示
   09 CASE STUDY ...... 導入事例カード
   10 COMPARISON ...... 製品機能比較の表
   11 COLUMN .......... コラムカード
   12 FAQ ............. よくあるご質問
   13 CONTACT ......... お問い合わせフォーム
   14 FOOTER .......... フッター
   15 FLOATING CTA .... スマホ用の固定ボタン
   16 ANIMATION ....... フェードイン・矢印の動き
   17 RESPONSIVE ...... 画面幅ごとの調整
   18 ACCESSIBILITY ... 動きを減らす設定への対応
   19 PRODUCT PAGE .... 製品詳細ページ（boxhotline.html など）※ 17 の手前に配置
   ========================================================================== */


/* ==========================================================================
   01 BASE（変数・リセット・共通）
   --k:黒 / --n:紺 / --w:白 / --l:薄いグレー背景 / --g:グレー文字 / --blue:ロゴのブルー
   ========================================================================== */
:root{--k:#111;--n:#101820;--w:#fff;--l:#F5F5F3;--g:#777;--blue:#00A1CC;--max:1200px;box-sizing:border-box;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px);color-scheme:light}
html{scroll-behavior:smooth;scroll-padding-top:calc(80px + env(safe-area-inset-top,0px))}
*,*::before,*::after{box-sizing:inherit}
body{margin:0;font:17px/1.8 "Hiragino Sans","Noto Sans JP","Yu Gothic",Meiryo,sans-serif;color:var(--k);background:var(--w)}
a{color:inherit;text-decoration:none}
.wrap{max-width:var(--max);margin:0 auto;padding:0 40px}
section{padding:96px 0}
.alt{background:var(--l)}.dark{background:var(--n);color:var(--w)}


/* ==========================================================================
   02 TYPOGRAPHY（見出し・本文・英字ラベル）
   ========================================================================== */
.en{display:block;color:var(--blue);font-weight:700;letter-spacing:.14em;font-size:13px;margin-bottom:12px}
h1{font-size:clamp(36px,5vw,64px);line-height:1.35;margin:0 0 24px}
h2{font-size:clamp(28px,3.6vw,48px);line-height:1.4;margin:0 0 24px}
h3{font-size:20px;margin:0 0 8px}
p{margin:0 0 16px}.lead{max-width:760px}.muted{color:var(--g)}.dark .muted{color:#aab}
/* 日本語を文節で改行（対応ブラウザのみ。「検知す／る」のような途中改行を防ぐ） */
h1,h2,h3,.lead,.hero-lead,.case-tag,.trust p{word-break:auto-phrase;overflow-wrap:anywhere}


/* ==========================================================================
   03 BUTTON（.btn：塗り / .btn.o：線だけ）
   ========================================================================== */
.btn{display:inline-block;padding:16px 28px;border-radius:4px;font-weight:700;border:2px solid var(--blue);background:var(--blue);color:#fff;cursor:pointer;font-size:16px;font-family:inherit}
.btn:hover{background:#0086AB}.btn.o{background:transparent;color:inherit;border-color:currentColor}
.btn.o:hover{background:rgba(127,127,127,.15)}


/* ==========================================================================
   04 LAYOUT（グリッド・カード・アイコン・画像・2カラム）
   .grid：4列 / .g3：3列 / .g2：2列（画面幅で自動的に減る → 17 RESPONSIVE）
   ========================================================================== */
.grid{display:grid;gap:24px;grid-template-columns:repeat(4,1fr)}.g3{grid-template-columns:repeat(3,1fr)}.g2{grid-template-columns:repeat(2,1fr)}
.card{background:var(--w);border:1px solid #e3e3df;border-radius:8px;padding:28px;transition:transform .25s,box-shadow .25s}
.card:hover{transform:translateY(-4px);box-shadow:0 10px 24px rgba(0,0,0,.08)}
.dark .card{background:#17222d;border-color:#273543}
.card p{font-size:15px;margin:0}.tag{color:var(--blue);font-weight:700;font-size:13px;letter-spacing:.1em}
.ico{display:block;width:48px;height:48px;margin-bottom:16px}
.ih{display:flex;align-items:center;gap:10px}.ih img{width:32px;height:32px;flex:none}
.thumb{display:block;width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;border-radius:6px;margin-bottom:16px;background:var(--l)}
.thumb.prod{aspect-ratio:431/251}
/* 製品カード：「製品ページを見る」をカード下端にそろえる */
.prod-card{display:flex;flex-direction:column}.prod-card h3 small{display:block;font-size:12px;font-weight:600;letter-spacing:.06em;color:var(--g);margin-top:2px}.prod-card .muted{flex:1}.prod-card .more{margin-top:8px}
.media{display:block;width:100%;height:auto;border-radius:8px;background:var(--l)}
.split{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center}


/* ==========================================================================
   05 HEADER（ロゴ・メインメニュー・ハンバーガー）
   ========================================================================== */
header{position:sticky;top:env(safe-area-inset-top,0px);z-index:50;height:80px;background:rgba(255,255,255,.96);border-bottom:1px solid #e3e3df}
header .wrap{display:flex;align-items:center;justify-content:space-between;gap:32px;height:100%}
.logo{display:inline-flex;align-items:center;gap:10px;font-weight:800;font-size:26px;line-height:1;letter-spacing:.06em}.logo img{display:block;width:40px;height:auto;flex:none}.logo b{color:var(--blue)}
nav ul{display:flex;gap:16px;list-style:none;margin:0;padding:0;font-size:14px;font-weight:600;letter-spacing:.06em}
nav a{display:flex;flex-direction:column;align-items:center;line-height:1.3;white-space:nowrap}
nav a small{font-size:10px;font-weight:600;letter-spacing:.12em;color:var(--g);margin-top:3px}
nav a:hover,nav a:hover small{color:var(--blue)}
.burger{display:none;background:none;border:0;width:44px;height:44px;cursor:pointer}
.burger span{display:block;width:24px;height:2px;background:var(--k);margin:6px auto}


/* ==========================================================================
   06 HERO（メインビジュアル）
   背景スライドは 3:1（1920×641）。1680px以上は画像の上に文字を重ね、
   それより狭い画面では画像の下に文字を表示（切り抜き・変形をしない）
   ========================================================================== */
#hero{background:var(--n);color:#fff;padding:0;position:relative;overflow:hidden}
#hero .wrap{display:grid;grid-template-columns:minmax(0,760px);align-items:center;padding-top:60px;padding-bottom:60px;position:relative;z-index:2}
.hero-bg{display:block;width:100%;height:auto;aspect-ratio:3/1;object-fit:cover}
.hero-lead{color:#fff;font-size:clamp(16px,1.4vw,19px);font-weight:600;line-height:1.9;text-shadow:0 1px 8px rgba(0,0,0,.6)}
#hero h1{text-shadow:0 2px 12px rgba(0,0,0,.5)}
.hero-slides{position:relative;overflow:hidden;background:var(--n)}
.hero-slides img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity 1.2s ease}
.hero-slides img.on{opacity:1}
.hero-overlay{display:none}
@media(min-width:1680px){
#hero{display:flex;align-items:center;aspect-ratio:3/1}
#hero .wrap{width:100%;padding-top:40px;padding-bottom:40px}
.hero-bg{position:absolute;inset:0;height:100%;z-index:0}
.hero-overlay{display:block;position:absolute;inset:0;z-index:1;background:linear-gradient(90deg,rgba(16,24,32,.88) 0%,rgba(16,24,32,.6) 60%,rgba(16,24,32,.45) 100%)}}
/* CTAボタンの並び（HERO と 19 CTA で共通） */
.hero-cta{display:flex;gap:16px;flex-wrap:wrap;margin-top:32px}


/* ==========================================================================
   07 TRUST（実績の数字）
   ========================================================================== */
.num{font-size:clamp(24px,5vw,64px);font-weight:800;color:var(--blue);line-height:1.1;white-space:nowrap}.trust{text-align:center}
.num small{font-size:.55em;margin-left:2px}
.trust p{margin:8px 0 0}
#trust{padding:56px 0}
/* 数字は3つなので、どの画面幅でも3列（2列にすると1つ余るため） */
#trust .grid{grid-template-columns:repeat(3,1fr)}


/* ==========================================================================
   08 SYSTEM / FLOW（システム構成図・フロー表示）
   .flow は I/O HUB・CALL POINT・OPTION でも使用
   ========================================================================== */
.flow{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:24px 0}
.flow span{background:var(--w);border:1px solid #d8d8d2;border-radius:999px;padding:8px 18px;font-size:14px;font-weight:600}
.dark .flow span{background:#17222d;border-color:#273543}
.flow i{font-style:normal;color:var(--blue);font-weight:700}
.sys{display:grid;gap:12px;max-width:640px;margin:32px auto}
.sys div{background:#17222d;border:1px solid #273543;border-radius:8px;padding:20px;text-align:center}
.sys .arrow{background:none;border:0;color:var(--blue);font-weight:700;padding:0;position:relative}
.sys .arrow::after{content:"";position:absolute;left:50%;top:-6px;width:8px;height:8px;border-radius:50%;background:var(--blue);animation:flow 2s infinite}
.sys b{display:block;color:var(--blue);margin-bottom:4px}


/* ==========================================================================
   09 CASE STUDY（導入事例カード）
   ========================================================================== */
.case-card{display:flex;flex-direction:column;background:var(--w);border:1px solid #e3e3df;border-radius:8px;overflow:hidden;transition:transform .25s,box-shadow .25s}
.case-card:hover{transform:translateY(-4px);box-shadow:0 10px 24px rgba(0,0,0,.08)}
.case-img-wrap{position:relative;aspect-ratio:4/3;background:var(--l)}
.case-img{display:block;width:100%;height:100%;object-fit:cover}
.case-tag{position:absolute;left:12px;bottom:12px;max-width:calc(100% - 24px);padding:4px 12px;border-radius:4px;background:rgba(16,24,32,.82);color:#fff;font-size:13px;font-weight:700;line-height:1.6}
.case-body{flex:1;padding:22px 24px 26px}
.case-title{font-size:19px;line-height:1.5;margin:0 0 14px}
.case-item{display:flex;align-items:flex-start;gap:10px;font-size:15px;line-height:1.7;margin:0 0 8px}.case-item:last-child{margin-bottom:0}
.case-label{flex:none;padding:1px 10px;border-radius:999px;background:var(--blue);color:#fff;font-size:12px;font-weight:700;line-height:1.9}
.case-item+.case-item .case-label{background:var(--n)}


/* ==========================================================================
   10 COMPARISON（製品機能比較の表）
   ========================================================================== */
.tw{overflow-x:auto;max-width:100%}table{border-collapse:collapse;width:100%;min-width:640px;font-size:15px}
th,td{border:1px solid #e3e3df;padding:12px 14px;text-align:left;vertical-align:top}th{background:var(--n);color:#fff}


/* ==========================================================================
   11 COLUMN（コラムカード）※ 04 の .card / .tag を上書きするため、この位置に置く
   ========================================================================== */
.col{display:flex;flex-direction:column;padding:24px}
.col .tag{display:inline-block;align-self:flex-start;margin-bottom:12px;padding:2px 10px;border:1px solid currentColor;border-radius:999px;font-size:12px;letter-spacing:.06em}
.col h3{font-size:17px;line-height:1.6;margin:0 0 12px}
.col p{flex:1;font-size:14px;line-height:1.8;color:#555;margin:0 0 20px}
.more{align-self:flex-start;display:inline-flex;align-items:center;gap:6px;padding:6px 0;font-size:14px;font-weight:700;color:var(--blue)}
.more span{transition:transform .2s}.more:hover span{transform:translateX(4px)}.more:hover{text-decoration:underline}


/* ==========================================================================
   12 FAQ（よくあるご質問）
   ========================================================================== */
.faq{max-width:860px;margin:0 auto}
.faq h3{margin:0}.faq button{width:100%;text-align:left;background:none;border:0;border-bottom:1px solid #d8d8d2;padding:20px 40px 20px 0;font:700 17px/1.6 inherit;font-family:inherit;color:inherit;cursor:pointer;position:relative}
.faq button::after{content:"+";position:absolute;right:8px;color:var(--blue);font-size:24px}
.faq button[aria-expanded=true]::after{content:"−"}
.ans{display:none;padding:16px 0 8px;font-size:15px}.ans.open{display:block}


/* ==========================================================================
   13 CONTACT（お問い合わせフォーム）
   ========================================================================== */
form{display:grid;gap:16px;grid-template-columns:1fr 1fr;max-width:860px;margin:0 auto}
form .full{grid-column:1/-1}label{display:block;font-size:14px;font-weight:700;margin-bottom:6px}
input,select,textarea{width:100%;padding:12px;border:1px solid #c9c9c4;border-radius:4px;font:inherit;font-size:16px;background:#fff;color:var(--k)}
.req{display:inline-block;margin-left:8px;padding:0 6px;border-radius:3px;background:#c0392b;color:#fff;font-size:11px;font-weight:700;line-height:1.7;vertical-align:1px}
fieldset{border:0;margin:0;padding:0;min-width:0}legend{padding:0;font-size:14px;font-weight:700;margin-bottom:8px}
.radios{display:flex;flex-wrap:wrap;gap:8px 12px}
.radios label,.agree label{display:inline-flex;align-items:center;gap:8px;margin:0;font-weight:500;font-size:15px;cursor:pointer}
.radios label{padding:10px 16px;border:1px solid #c9c9c4;border-radius:4px;background:#fff}
.radios label:has(input:checked){border-color:var(--blue);background:#e6f6fa}
.radios input,.agree input{width:18px;height:18px;margin:0;accent-color:var(--blue)}
.agree{text-align:center}.agree a{color:var(--blue);text-decoration:underline}
/* スパム対策の隠し項目（画面外に配置） */
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}


/* ==========================================================================
   14 FOOTER（会社情報・公式製品サイト・コピーライト）
   ========================================================================== */
footer{background:var(--k);color:#bbb;padding:64px 0 0;font-size:14px}
footer a{transition:color .2s}footer a:hover{color:#fff}
.footer-top{display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:40px;padding-bottom:48px}
.footer-top>div>b{display:block;color:#fff;font-size:13px;letter-spacing:.12em;margin-bottom:14px}
.footer-brand .logo{color:#fff;margin-bottom:18px}.footer-brand .logo b{color:inherit}
.footer-brand p{margin:0;line-height:1.9}
footer ul{list-style:none;padding:0;margin:0;display:grid;gap:0}
/* 押しやすさ：リンクの上下に余白を取り、タップ領域を広げる（スマホ・タブレット向け） */
footer ul a,.footer-bottom a{display:inline-block;padding:6px 0}
.footer-bottom{display:flex;flex-wrap:wrap;align-items:center;gap:12px 28px;padding:20px 0 28px;border-top:1px solid #2b2b2b;font-size:12px;letter-spacing:.06em;color:#888}
.footer-bottom p{margin:0 auto 0 0}


/* ==========================================================================
   15 FLOATING CTA（スマホのみ表示 → 17 RESPONSIVE の 767px 以下）
   ========================================================================== */
.fcta{display:none}


/* ==========================================================================
   16 ANIMATION（スクロールでフェードイン・システム図の矢印）
   ========================================================================== */
.fade{opacity:0;transform:translateY(24px);transition:opacity .7s,transform .7s}.fade.in{opacity:1;transform:none}
@keyframes flow{0%{top:-6px;opacity:1}100%{top:20px;opacity:0}}


/* ==========================================================================
   19 PRODUCT PAGE（製品詳細ページ：boxhotline.html など）
   ========================================================================== */
/* パンくずリスト */
.crumb{background:var(--l);border-bottom:1px solid #e3e3df;font-size:13px}
.crumb ol{display:flex;flex-wrap:wrap;gap:4px 8px;list-style:none;margin:0;padding:10px 0;color:var(--g)}
.crumb li+li::before{content:"/";margin-right:8px;color:#bbb}
.crumb a:hover{color:var(--blue)}
/* ヒーロー（左：製品名 / 右：画像） */
#p-hero{padding:72px 0}
#p-hero .split{grid-template-columns:1.15fr .85fr}
#p-hero h1{font-size:clamp(30px,3.8vw,48px)}
.p-hero-img{border-radius:20px;box-shadow:0 20px 40px rgba(0,0,0,.35)}
.models{display:flex;flex-wrap:wrap;gap:8px;list-style:none;margin:8px 0 0;padding:0}
.models li{padding:4px 14px;border:1px solid rgba(255,255,255,.35);border-radius:999px;font-size:14px;font-weight:700;letter-spacing:.06em}
/* 製品タイプのカード */
.type-card{display:flex;flex-direction:column;padding:0;overflow:hidden}
.type-head{background:var(--n);color:#fff;padding:18px 24px;text-align:center}
.type-card+.type-card .type-head{background:#0086AB}
.type-head h3{margin:0;font-size:22px}.type-head p{margin:2px 0 0;font-size:13px;opacity:.85}
.type-img{display:flex;align-items:center;justify-content:center;height:280px;padding:20px;background:var(--l)}
.type-img img{display:block;max-width:100%;max-height:100%;width:auto;height:auto}
.type-body{flex:1;display:flex;flex-direction:column;gap:16px;padding:24px 28px 28px}
.type-body p{margin:0}
.type-body .checks{margin-top:auto;padding:12px 16px;border-radius:6px;background:#e6f6fa}
.type-fig{margin:0;text-align:center}.type-fig img{display:block;width:100%;height:auto}
.type-fig figcaption{margin-top:8px;font-size:12px;color:var(--g)}
/* チェックマーク付きリスト */
.checks{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.checks li{position:relative;padding-left:28px}
.checks li::before{content:"";position:absolute;left:4px;top:.6em;width:12px;height:7px;border-left:2.5px solid var(--blue);border-bottom:2.5px solid var(--blue);transform:rotate(-45deg)}
/* 主要機能（番号付きブロック） */
.func{background:var(--w);border:1px solid #e3e3df;border-radius:8px;padding:32px;margin-bottom:24px}
.func:last-child{margin-bottom:0}
.func h3{display:flex;align-items:center;gap:12px;font-size:22px;margin:0 0 16px}
.func p{margin:0}
.func-no{flex:none;display:flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:50%;background:var(--blue);color:#fff;font-size:18px;font-weight:800}
.func figure{margin:24px 0 0;text-align:center}
.func figure img{display:inline-block;width:100%;max-width:790px;height:auto}
/* 製品仕様の表 */
.spec{min-width:0;background:#fff}
.spec tbody th{width:30%;background:var(--l);color:var(--k);font-weight:700}
.spec td small{color:var(--g)}
.spec .indent{display:inline-block;padding-left:1.2em}
.spec-note{margin:12px 0 0;font-size:13px;color:var(--g)}
/* 複数機種の仕様表を並べるときの機種名見出し（intercom.html） */
.spec-h{margin:48px 0 12px;font-size:20px}.spec-h:first-of-type{margin-top:0}
/* 図（寸法・各部の名称） */
.fig{margin:0 0 32px;text-align:center}.fig:last-child{margin-bottom:0}
.fig img{display:inline-block;width:100%;max-width:790px;height:auto;padding:16px;background:#fff;border:1px solid #e3e3df;border-radius:8px}
.fig figcaption{margin-top:10px;font-size:13px;color:var(--g)}
/* お問い合わせ */
#p-cta{background:#2c3238;text-align:center}/* フッター（#111）と区別するためダークグレー */
#p-cta .hero-cta{justify-content:center}
.p-cta-note{margin:20px 0 0;font-size:13px;color:#aab}
/* 製品詳細ページのタブレット縦以下：ヒーローを1列に */
@media(max-width:900px){#p-hero .split{grid-template-columns:1fr}}
/* 製品詳細ページのスマホ表示 */
@media(max-width:767px){
#p-hero{padding:48px 0}
.type-img{height:220px}
.func{padding:22px 18px}.func h3{font-size:19px}
.spec thead{display:none}.spec th,.spec td{display:block;width:auto}.spec tbody th{width:auto;border-bottom:0;padding-bottom:6px}
.fig img{padding:8px}}
/* プライバシーポリシー（privacy.html） */
.policy{max-width:860px}
.policy h2{font-size:20px;margin:48px 0 12px;padding-left:14px;border-left:4px solid var(--blue)}
.policy ul{margin:0 0 16px;padding-left:1.4em}.policy li{margin-bottom:6px}
.policy a{color:var(--blue);text-decoration:underline}
.policy-date{text-align:right;font-size:14px;color:var(--g)}
.policy-contact{padding:20px 24px;background:var(--l);border-radius:8px;line-height:1.9}
.policy-sign{margin-top:48px;text-align:right}


/* ==========================================================================
   17 RESPONSIVE（画面幅ごとの調整）
   1199px以下：4列→2列・ハンバーガーメニュー /
   900px以下：2カラム→1カラム / 767px以下：スマホ / 600px以下：フッター1列
   ========================================================================== */
/* ---- 1199px以下（小さめのPC・タブレット横） ---- */
@media(max-width:1199px){.grid{grid-template-columns:repeat(2,1fr)}.g3{grid-template-columns:repeat(2,1fr)}}

/* ---- 1199px以下（メニュー10項目が1行に収まらないため、ハンバーガーに切り替え） ---- */
@media(max-width:1199px){nav{display:none;position:absolute;top:100%;left:0;right:0;background:#fff;border-bottom:1px solid #e3e3df;max-height:calc(100vh - 64px);overflow:auto}
nav.open{display:block}nav ul{flex-direction:column;gap:0;padding:8px 20px}nav li a{align-items:flex-start;padding:12px 0;border-bottom:1px solid #eee}.burger{display:block}header{height:64px}}

/* ---- 768〜1199px（タブレット）：3項目のソリューションは3列のまま（2列だと1つ余る） ---- */
@media(min-width:768px) and (max-width:1199px){#solution .g3{grid-template-columns:repeat(3,1fr)}#solution .card{padding:22px}}

/* ---- 900px以下（タブレット縦） ---- */
@media(max-width:900px){.split{grid-template-columns:1fr;gap:32px}.footer-top{grid-template-columns:1fr 1fr;gap:32px}.footer-brand{grid-column:1/-1}}

/* ---- 600px以下（フッターを1列に） ---- */
@media(max-width:600px){footer{padding-top:48px}.footer-top{grid-template-columns:1fr;padding-bottom:32px}.footer-bottom{flex-direction:column;align-items:flex-start;gap:10px}.footer-bottom p{margin:0}}

/* ---- 767px以下（スマホ：1列表示・固定CTAを表示） ---- */
@media(max-width:767px){body{font-size:15px;padding-bottom:64px}.wrap{padding:0 20px}section{padding:64px 0}h1{font-size:36px}h2{font-size:30px}
.grid,.g3,.g2,form{grid-template-columns:1fr}#hero{min-height:0}
h1{font-size:clamp(28px,9vw,36px)}
/* ヒーロー画像：3:1だと細い帯になるため 16:9 で表示（左右を少し切り抜き）／ボタンは全幅 */
.hero-bg{aspect-ratio:16/9}
.hero-cta .btn{flex:1 1 100%;text-align:center}
/* 実績の数字：3列のまま、間隔と文字を小さく */
#trust{padding:40px 0}#trust .grid{gap:12px}.trust p{font-size:12px;line-height:1.5}
/* 機能一覧（短い項目が8つ）は2列 */
#featlist{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}#featlist .card{padding:18px}#featlist h3{font-size:15px}#featlist .ico{width:40px;height:40px;margin-bottom:10px}.fcta{display:grid;grid-template-columns:1fr 1fr;position:fixed;left:0;right:0;bottom:0;z-index:60;height:calc(64px + env(safe-area-inset-bottom,0px));padding-bottom:env(safe-area-inset-bottom,0px);background:var(--k)}
.fcta a{display:flex;align-items:center;justify-content:center;font-weight:700;font-size:14px;color:#fff}.fcta a+a{background:var(--blue)}}


/* ==========================================================================
   18 ACCESSIBILITY（OSの「視差効果を減らす」設定では動きを止める）
   ========================================================================== */
@media(prefers-reduced-motion:reduce){.fade{opacity:1;transform:none;transition:none}.sys .arrow::after{animation:none}html{scroll-behavior:auto}}