/* ==========================================================================
   kds.html 専用スタイル（店外注文管理端末）
   pos.html（青・罫線カード）/ handy.html（青・スマホモック・2×2カード）とは
   別デザイン。青基調は pos.html と共通の #0145f2 系。
   特徴：深いネイビーのヒーロー＋横長の管理画面モック＋縦型タイムラインの流れ＋
   横4列の理由カード＋中央の大画面と左右の注釈という構成。グラデーションは不使用。
   見出しは .inner-page-title と同じ左寄せ（英字ラベルは使わない）。
   ========================================================================== */

:root{
	--kd-o:#0145f2;          /* メインブルー（pos.html と共通） */
	--kd-o-d:#0134c0;
	--kd-o-l:#8fb0ff;
	--kd-navy:#0b2472;       /* ヒーローの深いネイビー */
	--kd-navy-d:#081c5c;
	--kd-tint:#f4f8ff;       /* 淡いブルーの帯 */
	--kd-tint-2:#e8f0ff;
	--kd-ink:#22262e;
	--kd-gray:#666;
	--kd-gray-l:#99a3b3;
	--kd-line:#e4e8f0;
	--kd-shadow:0 16px 38px rgba(20,50,120,.10);
}

/* ---------- スクロール出現（JSが .kd-in を付与。JS無効時はそのまま表示） ----------
   初期の非表示状態は <head> のスクリプトが html に .kd-js を付与した場合だけ適用する。
   これにより、本文途中のスクリプトが動く前に paint されても要素がチラつくことはない。
   出現は @keyframes アニメーションで実行する。transition でやると .kd-reason / .kd-note の
   hover 用 transition:.3s に詳細度で負けて、出現だけ .3s に短くなってしまうため。
   data-kd-reveal の値は遅延の段数（0→0ms, 1→110ms, 2→220ms…）。 */
.kd-js [data-kd-reveal]{opacity: 0;}
.kd-js [data-kd-reveal].kd-in{opacity: 1;animation: kdFade .75s ease backwards, kdRise .75s cubic-bezier(.22,.61,.36,1) backwards;}
@keyframes kdFade{from{opacity: 0;}to{opacity: 1;}}
@keyframes kdRise{from{transform: translate(0,28px);}to{transform: translate(0,0);}}
@media (prefers-reduced-motion: reduce){
	.kd-js [data-kd-reveal],
	.kd-js [data-kd-reveal].kd-in{opacity: 1;animation: none;}
}

/* グローバルリセット（*{font-size:16px;font-weight:500}）対策：
   見出しの中の <i> は親のサイズ・太さ・フォントをそのまま継承させる */
.kd-hero-title i,.kd-sec-title i,.kd-intro-txt i{font-size: inherit;font-weight: inherit;font-family: inherit;}

/* ---------- セクション見出し ----------
   pos.html の .inner-page-title と同じ構成（左寄せ・38px・強調部分だけ青・下にグレーの補足文） */
.kd-sec-head{padding: 40px 0 26px;line-height: 1.6;text-align: left;}
/* 詳細度は最小限に（レスポンシブ側の上書きを効かせるため） */
.kd-sec-title{font-size: 38px;color: #333;line-height: 1.6;}
.kd-sec-title i,.kd-sec-title .bold{font-size: 38px;color: var(--kd-o);}
.kd-sec-lead{display: block;color: #777;font-size: 16px;line-height: 1.8;}

/* ---------- ボタン ---------- */
.kd-btn{display: inline-block;padding: 15px 36px;border-radius: 6px;font-size: 15px;cursor: pointer;transition: .25s;text-align: center;}
.kd-btn-main{background: var(--kd-o);color: #fff;box-shadow: 0 12px 24px rgba(1,69,242,.28);}
.kd-btn-main:hover{background: var(--kd-o-d);transform: translate(0,-2px);}
.kd-btn-ghost{background: transparent;color: #fff;border: 1px solid rgba(255,255,255,.55);}
.kd-btn-ghost:hover{background: rgba(255,255,255,.14);border-color: #fff;}
.kd-btn-line{background: #fff;color: var(--kd-o);border: 1px solid #c9dafd;}
.kd-btn-line:hover{background: var(--kd-tint-2);}

/* ==========================================================================
   管理画面モックアップ（CSSのみで描画）
   ========================================================================== */
.kd-board{--bw: 420px;position: relative;width: var(--bw);flex: none;background: #fff;border-radius: 14px;overflow: hidden;box-shadow: 0 30px 60px rgba(3,18,60,.34),0 8px 18px rgba(3,18,60,.18);}
.kd-board-bar{display: flex;align-items: center;gap: 10px;background: #f2f5fb;border-bottom: 1px solid #e3e9f4;padding: 10px 13px;}
.kd-board-dots{display: flex;gap: 5px;flex: none;}
.kd-board-dots u{display: block;width: 8px;height: 8px;border-radius: 50%;background: #cfd8e8;}
.kd-board-bar em{font-size: 11.5px;color: #56607a;font-style: normal;}
.kd-board-tag{margin-left: auto;display: flex;align-items: center;gap: 5px;font-size: 10px;color: var(--kd-o);background: var(--kd-tint-2);border-radius: 30px;padding: 3px 10px;}
.kd-board-tag::before{content: '';width: 5px;height: 5px;border-radius: 50%;background: var(--kd-o);}

.kd-board-main{display: flex;align-items: stretch;}

/* 左：注文一覧 */
.kd-board-list{width: 47%;flex: none;border-right: 1px solid #e9eef7;padding: 8px;counter-reset: kdrow;background: #fbfcfe;}
.kd-board-li{display: flex;align-items: center;gap: 8px;padding: 7px 9px;border-radius: 7px;margin-bottom: 4px;background: #fff;border: 1px solid #eaeff8;}
.kd-board-li b{font-size: 11.5px;color: var(--kd-ink);letter-spacing: .02em;}
.kd-board-li b::before{counter-increment: kdrow;content: "0004" counter(kdrow);}
.kd-board-li span{margin-left: auto;font-size: 9px;color: var(--kd-gray-l);}
.kd-board-li.is-hot{background: var(--kd-o);border-color: var(--kd-o);box-shadow: 0 8px 16px rgba(1,69,242,.24);}
.kd-board-li.is-hot b,.kd-board-li.is-hot span{color: #fff;}

/* 右：注文の明細 */
.kd-board-detail{flex: 1;min-width: 0;display: flex;flex-direction: column;background: #fff;}
.kd-det-head{display: flex;align-items: baseline;gap: 8px;padding: 11px 13px 9px;border-bottom: 1px solid #eef2f9;}
.kd-det-head b{font-size: 14px;color: var(--kd-ink);}
.kd-det-head span{font-size: 9.5px;color: var(--kd-gray-l);}
.kd-det-rows{padding: 5px 13px;flex: 1;}
.kd-det-rows p{display: flex;align-items: center;gap: 6px;font-size: 10px;color: #5a6474;padding: 5px 0;border-bottom: 1px dashed #eef2f9;}
.kd-det-rows p b{flex: 1;font-size: 10px;color: var(--kd-ink);overflow: hidden;white-space: nowrap;text-overflow: ellipsis;}
.kd-det-rows p u{font-size: 10px;color: var(--kd-gray-l);text-decoration: none;}
.kd-det-rows p i{font-size: 10px;color: var(--kd-ink);font-style: normal;}
.kd-det-total{display: flex;align-items: center;gap: 6px;padding: 9px 13px;border-top: 1px solid #e9eef7;background: #fbfcfe;}
.kd-det-total span{font-size: 10px;color: var(--kd-gray);}
.kd-det-total b{margin-left: auto;font-size: 15px;color: var(--kd-ink);}
.kd-det-btn{margin: 0 13px 13px;height: 32px;border-radius: 6px;background: var(--kd-o);color: #fff;font-size: 11.5px;display: flex;align-items: center;justify-content: center;}

/* 大型版（主な機能で使用） */
.kd-board-lg{--bw: 100%;width: 100%;max-width: 560px;border-radius: 16px;box-shadow: 0 30px 64px rgba(20,50,120,.1),0 8px 20px rgba(20,50,120,.10);}
.kd-board-lg .kd-board-list{width: 44%;}
.kd-board-lg .kd-board-li{padding: 9px 10px;margin-bottom: 5px;}
.kd-board-lg .kd-board-li b{font-size: 12.5px;}
.kd-board-lg .kd-board-li span{font-size: 9.5px;}
.kd-board-lg .kd-det-head{padding: 14px 16px 11px;}
.kd-board-lg .kd-det-head b{font-size: 16px;}
.kd-board-lg .kd-det-rows{padding: 7px 16px;}
.kd-board-lg .kd-det-rows p{font-size: 11px;padding: 7px 0;}
.kd-board-lg .kd-det-rows p b,.kd-board-lg .kd-det-rows p u,.kd-board-lg .kd-det-rows p i{font-size: 11px;}
.kd-board-lg .kd-det-total{padding: 11px 16px;}
.kd-board-lg .kd-det-total b{font-size: 18px;}
.kd-board-lg .kd-det-btn{margin: 0 16px 16px;height: 36px;font-size: 12.5px;}

/* 左に寄せて影を落とす小さなスマホ（お知らせ内で使用） */
.kd-mini{--pw: 132px;position: relative;width: var(--pw);flex: none;background: #1f2430;border-radius: 20px;padding: 6px;box-shadow: 0 20px 40px rgba(20,40,90,.22);}
.kd-mini::after{content: '';position: absolute;left: 50%;top: 2px;width: 40px;height: 3px;border-radius: 3px;background: rgba(255,255,255,.20);transform: translate(-50%,0);}
.kd-mini-scr{background: #fff;border-radius: 15px;overflow: hidden;padding: 10px 8px 8px;counter-reset: kdmini;}
.kd-mini-scr p{display: flex;align-items: center;gap: 5px;padding: 5px 4px;border-bottom: 1px solid #eef2f9;}
.kd-mini-scr p:last-child{border-bottom: 0;}
.kd-mini-scr p b{font-size: 9.5px;color: var(--kd-ink);}
.kd-mini-scr p b::before{counter-increment: kdmini;content: "004" counter(kdmini);}
.kd-mini-scr p u{display: block;width: 6px;height: 6px;border-radius: 50%;background: var(--kd-o-l);margin-left: auto;text-decoration: none;}
.kd-mini-scr p.on u{background: var(--kd-o);}
.kd-mini-cap{padding-top: 9px;text-align: center;font-size: 10px;color: var(--kd-gray-l);}

/* ==========================================================================
   1. ヒーロー（深いネイビー）
   ========================================================================== */
.kd-hero{position: relative;overflow: hidden;background: var(--kd-navy);}
.kd-hero-deco1{position: absolute;width: 620px;height: 620px;border: 78px solid rgba(255,255,255,.05);border-radius: 50%;top: -250px;right: -180px;}
.kd-hero-deco2{position: absolute;width: 190px;height: 190px;border-radius: 50%;background: rgba(143,176,255,.14);bottom: -70px;left: -60px;}
.kd-hero-deco3{position: absolute;left: 0;top: 0;width: 4px;height: 100%;background: var(--kd-o);}
.kd-hero .page-content{position: relative;z-index: 1;}
.kd-hero .pos-crumb{color: #93a5cd;}
.kd-hero .pos-crumb a{color: #d7e2ff;}
.kd-hero .pos-crumb i{color: #5b6f9e;}

.kd-hero-grid{display: flex;align-items: center;gap: 48px;padding: 30px 0 78px;}
.kd-hero-txt{flex: 1;min-width: 0;}
.kd-pill{display: inline-block;background: rgba(255,255,255,.10);border: 1px solid rgba(143,176,255,.42);color: #cfe0ff;font-size: 13px;padding: 8px 18px;border-radius: 4px;letter-spacing: .04em;}
.kd-hero-title{font-size: 42px;line-height: 1.46;color: #fff;padding: 22px 0 0;}
.kd-hero-title i{color: var(--kd-o-l);}
.kd-hero-sub{font-size: 19px;color: #c8d6f5;padding: 16px 0 0;line-height: 1.7;}
.kd-hero-desc{color: #9cb0d8;line-height: 1.95;font-size: 15.5px;padding: 16px 0 0;max-width: 600px;}
.kd-hero-btns{display: flex;gap: 14px;padding: 30px 0 0;flex-wrap: wrap;}
/* 深いネイビーの上では主ボタンを白地に反転 */
.kd-hero-btns .kd-btn-main{background: #fff;color: var(--kd-o);box-shadow: 0 12px 24px rgba(0,16,60,.30);}
.kd-hero-btns .kd-btn-main:hover{background: var(--kd-tint-2);color: var(--kd-o-d);}
.kd-hero-chips{display: flex;gap: 10px;padding: 26px 0 0;flex-wrap: wrap;}
.kd-chip{display: flex;align-items: center;gap: 7px;border: 1px solid rgba(143,176,255,.32);border-radius: 4px;padding: 8px 15px;font-size: 12.5px;color: #b9c9ea;}
.kd-chip i{color: var(--kd-o-l);font-size: 12px;}

.kd-hero-visual{position: relative;width: 440px;flex: none;display: flex;justify-content: flex-end;}
.kd-float{position: absolute;display: flex;align-items: center;gap: 9px;background: #fff;border-radius: 8px;box-shadow: 0 16px 34px rgba(3,18,60,.30);padding: 11px 15px;z-index: 2;}
.kd-float>i{width: 28px;height: 28px;border-radius: 6px;background: var(--kd-tint-2);color: var(--kd-o);font-size: 13px;display: flex;align-items: center;justify-content: center;flex: none;}
.kd-float p{line-height: 1.4;}
.kd-float p b{display: block;font-size: 12px;color: var(--kd-ink);}
.kd-float p span{display: block;font-size: 10px;color: var(--kd-gray-l);}
/* 画面モックを隠さないよう、上下の外側に配置する */
.kd-float-1{left: 0;bottom: -28px;border: 1px solid #ddd;}
.kd-float-2{right: -20px;top: -46px;border: 1px solid #ddd;}

/* ==========================================================================
   2. 導入文
   ========================================================================== */
.kd-intro{background: #fff;padding: 84px 0 70px;}
.kd-intro-inner{display: flex;gap: 30px;align-items: flex-start;}
.kd-intro-bar{width: 5px;flex: none;align-self: stretch;background: var(--kd-o);border-radius: 3px;}
.kd-intro-txt{font-size: 29px;line-height: 1.72;color: var(--kd-ink);max-width: 940px;}
.kd-intro-txt i{color: var(--kd-o);}
.kd-intro-sub{display: block;color: var(--kd-gray);line-height: 1.95;padding: 20px 0 0;}
.kd-intro-chips{display: flex;gap: 12px;padding: 30px 0 0;flex-wrap: wrap;}
.kd-tag{display: flex;align-items: center;gap: 8px;background: var(--kd-tint);border: 1px solid #dbe6f8;border-radius: 4px;padding: 10px 16px;font-size: 13px;color: #46526a;}
.kd-tag i{color: var(--kd-o);font-size: 13px;}

/* ==========================================================================
   3. ご利用の流れ（縦型タイムライン）
   ========================================================================== */
.kd-flow{background: var(--kd-tint);padding: 0 0 84px;}
.kd-flow-row{position: relative;padding-left: 4px;}
.kd-flow-row::before{content: '';position: absolute;left: 31px;top: 12px;bottom: 12px;border-left: 1px dotted #cfe0ff;}
.kd-step{position: relative;display: flex;gap: 26px;align-items: flex-start;padding: 22px 0;}
.kd-step-no{position: relative;z-index: 1;width: 54px;height: 54px;flex: none;border-radius: 50%;background: #d2e0fe;color: #fff;font-size: 19px;display: flex;align-items: center;justify-content: center;margin-top: 20px;}
.kd-step-body{flex: 1;min-width: 0;background: #fff;border: 1px solid var(--kd-line);border-radius: 10px;padding: 22px 26px;transition: .3s;}
.kd-step:hover .kd-step-body{border-color: #c9dafd;box-shadow: var(--kd-shadow);}
.kd-step-body b{display: block;font-size: 20px;color: var(--kd-ink);padding-bottom: 10px;}
.kd-step-body span{display: block;color: var(--kd-gray);line-height: 1.9;}
/* <em> を使う（<span> だと .kd-step-body span の display:block / 14.5px に負けるため） */
.kd-step-tag{display: inline-block;margin-top: 14px;font-size: 13px;font-style: normal;color: var(--kd-o);background: var(--kd-tint-2);border-radius: 3px;padding: 5px 12px;}

/* ==========================================================================
   4. 選ばれる4つの理由（横4列）
   ========================================================================== */
.kd-reasons{background: #fff;}
.kd-reasons-row{display: grid;grid-template-columns: repeat(4,1fr);gap: 20px;}
.kd-reason{position: relative;border: 1px solid var(--kd-line);border-top: 3px solid var(--kd-o);border-radius: 8px;padding: 28px 22px 26px;background: #fff;transition: .3s;}
.kd-reason:hover{transform: translate(0,-5px);box-shadow: var(--kd-shadow);border-color: #c9dafd;}
.kd-reason-no{display: block;font-size: 30px;color: var(--kd-tint-2);line-height: 1;padding-bottom: 14px;}
.kd-reason b{display: block;font-size: 20px;color: var(--kd-ink);line-height: 1.6;padding-bottom: 12px;}
/* 説明文だけを対象にする（.kd-reason-no を巻き込まないため .kd-reason-body 配下に限定） */
.kd-reason-body span{display: block;font-size: 13.5px;color: var(--kd-gray);line-height: 1.9;}

/* ==========================================================================
   5. 主な機能（中央の大画面＋左右の注釈）
   ========================================================================== */
.kd-features{padding: 0 0 60px;}
.kd-feat-grid{display: flex;align-items: center;gap: 22px;}
.kd-feat-side{flex: 1;min-width: 0;display: flex;flex-direction: column;gap: 22px;}
.kd-feat-stage{flex: none;width: 44%;display: flex;justify-content: center;}
.kd-note{position: relative;background: #fff;border: 1px solid var(--kd-line);border-radius: 8px;padding: 20px 22px;transition: .3s;}
.kd-note:hover{border-color: #c9dafd;box-shadow: var(--kd-shadow);}
.kd-note b{display: block;font-size: 16px;color: var(--kd-ink);padding-bottom: 9px;}
.kd-note span{display: block;font-size: 13.5px;color: var(--kd-gray);line-height: 1.85;}
.kd-note::after{content: '';position: absolute;top: 50%;width: 22px;border-top: 1px dashed #b9cdf3;}
.kd-feat-side-l .kd-note::after{right: -22px;}
.kd-feat-side-r .kd-note::after{left: -22px;}
.kd-feat-side-l .kd-note::before,.kd-feat-side-r .kd-note::before{content: '';position: absolute;top: calc(50% - 3px);width: 7px;height: 7px;border-radius: 50%;background: var(--kd-o);}
.kd-feat-side-l .kd-note::before{right: -25px;}
.kd-feat-side-r .kd-note::before{left: -25px;}

/* ==========================================================================
   6. ご利用にあたってのご注意
   ========================================================================== */
.kd-care{background: #fff;padding: 0 0 92px;}
.kd-care-box{display: flex;align-items: center;gap: 34px;background: var(--kd-tint);border: 1px solid #dbe6f8;border-left: 5px solid var(--kd-o);border-radius: 10px;padding: 40px 46px;}
.kd-care-txt{flex: 1;min-width: 0;}
.kd-care-txt h2{font-size: 26px;color: var(--kd-ink);line-height: 1.6;}
.kd-care-desc{color: #5a6474;font-size: 14.5px;line-height: 1.95;padding: 14px 0 0;max-width: 720px;}
.kd-care-list{padding: 16px 0 0;}
.kd-care-list p{display: flex;gap: 10px;font-size: 13.5px;color: #5a6474;line-height: 1.9;padding: 4px 0;}
.kd-care-list p i{color: var(--kd-o);font-size: 12px;flex: none;padding-top: 5px;}
.kd-care-btns{display: flex;gap: 12px;padding: 26px 0 0;flex-wrap: wrap;}
.kd-care-visual{flex: none;display: flex;flex-direction: column;align-items: center;}

/* ==========================================================================
   レスポンシブ対応（PC / タブレット / スマホ）
   ========================================================================== */

/* ---------- 1280px以下：小さめのノートPC ---------- */
@media screen and (max-width: 1280px){
	.kd-hero-title{font-size: 36px}
	.kd-hero-sub{font-size: 17px}
	.kd-hero-grid{gap: 34px;padding: 26px 0 66px}
	.kd-hero-visual{width: 390px}
	.kd-board{--bw: 372px}
	.kd-float-1{bottom: -50px}
	.kd-float-2{top: -46px}
	.kd-sec-head{padding: 34px 0 20px}
	.kd-intro{padding: 70px 0 58px}
	.kd-intro-txt{font-size: 26px}
	.kd-flow,.kd-reasons,.kd-features,.kd-care{padding-bottom: 70px}
	.kd-step-body{padding: 20px 22px}
	.kd-step-body b{font-size: 18px}
	.kd-reason{padding: 24px 18px 22px}
	.kd-reason b{font-size: 16px}
	.kd-feat-stage{width: 42%}
	.kd-feat-grid{gap: 18px}
	.kd-feat-side{gap: 18px}
	.kd-note{padding: 18px 18px}
	.kd-note b{font-size: 15px}
	.kd-note span{font-size: 13px}
	.kd-note::after{width: 18px}
	.kd-feat-side-l .kd-note::after{right: -18px}
	.kd-feat-side-r .kd-note::after{left: -18px}
	.kd-feat-side-l .kd-note::before{right: -21px}
	.kd-feat-side-r .kd-note::before{left: -21px}
	.kd-care-box{padding: 34px 34px}
	.kd-care-txt h2{font-size: 23px}
}

/* ---------- 1024px以下：タブレット横 ---------- */
@media screen and (max-width: 1024px){
	.kd-hero-title{font-size: 32px}
	.kd-hero-desc{font-size: 15px}
	.kd-hero-visual{width: 340px}
	.kd-board{--bw: 330px}
	.kd-float-1{bottom: -46px}
	.kd-float-2{top: -42px}
	.kd-sec-title{font-size: 30px}
	.kd-sec-title i,.kd-sec-title .bold{font-size: 30px}
	.kd-intro-txt{font-size: 23px}
	.kd-reasons-row{grid-template-columns: repeat(2,1fr);gap: 18px}
	.kd-reason-no{font-size: 26px;padding-bottom: 10px}
	/* 主な機能：左右の注釈を画面の下へ回す */
	.kd-feat-grid{flex-direction: column;align-items: stretch;gap: 26px}
	.kd-feat-stage{width: 100%;order: -1}
	.kd-feat-side{flex-direction: row;gap: 18px}
	.kd-feat-side .kd-note{flex: 1;min-width: 0}
	.kd-note::after,.kd-note::before{display: none}
	.kd-care-box{flex-direction: column;align-items: flex-start;gap: 26px}
	.kd-care-txt h2{font-size: 22px}
}

/* ---------- 900px以下：タブレット縦 ---------- */
@media screen and (max-width: 900px){
	.kd-hero-grid{flex-direction: column;align-items: flex-start;gap: 40px;padding: 22px 0 60px}
	.kd-hero-visual{width: 100%;justify-content: center}
	.kd-board{--bw: 420px;width: 100%;max-width: 420px}
	/* 1カラムになる幅では画面モックの外側に余白が取れないため注釈カードは隠す */
	.kd-float{display: none}
	.kd-flow-row::before{left: 27px}
	.kd-step{gap: 20px}
	.kd-step-no{width: 46px;height: 46px;font-size: 17px}
}

/* ---------- 768px以下：スマホ横・小タブレット ---------- */
@media screen and (max-width: 768px){
	.kd-hero-title{font-size: 27px}
	.kd-hero-sub{font-size: 16px}
	.kd-sec-head{padding: 28px 0 16px}
	.kd-sec-title{font-size: 25px}
	.kd-sec-title i,.kd-sec-title .bold{font-size: 25px}
	.kd-sec-lead{font-size: 14.5px}
	.kd-intro{padding: 56px 0 48px}
	.kd-intro-inner{gap: 20px}
	.kd-intro-txt{font-size: 20px}
	.kd-intro-sub{font-size: 14px;padding-top: 16px}
	.kd-flow,.kd-reasons,.kd-features,.kd-care{padding-bottom: 40px}
	.kd-reasons-row{grid-template-columns: 1fr;gap: 14px}
	.kd-reason{display: flex;gap: 16px;align-items: flex-start;padding: 20px}
	.kd-reason-no{font-size: 24px;padding-bottom: 0;flex: none;width: 40px}
	.kd-reason-body{flex: 1;min-width: 0}
	.kd-step-body b{font-size: 17px}
	.kd-feat-side{flex-direction: column;gap: 14px}
	.kd-care-box{padding: 28px 24px}
	.kd-care-txt h2{font-size: 20px}
	.kd-care-btns{padding-top: 20px}
	.kd-btn{padding: 13px 26px;font-size: 14px}
}

/* ---------- 480px以下：スマホ縦 ---------- */
@media screen and (max-width: 480px){
	.kd-hero-title{font-size: 22px;line-height: 1.5}
	.kd-hero-sub{font-size: 14.5px;padding-top: 12px}
	.kd-hero-desc{font-size: 13.5px;padding-top: 12px}
	.kd-hero-btns{gap: 10px;padding-top: 24px}
	.kd-hero-chips{gap: 8px;padding-top: 20px}
	.kd-chip{font-size: 11.5px;padding: 7px 12px}
	.kd-pill{font-size: 11.5px;padding: 7px 14px}
	.kd-board-list{padding: 6px}
	.kd-board-li{padding: 6px 7px}
	.kd-det-rows p{font-size: 9px}
	.kd-det-rows p b,.kd-det-rows p u,.kd-det-rows p i{font-size: 9px}
	.kd-det-btn{height: 29px;font-size: 11px}
	.kd-intro-txt{font-size: 17px;line-height: 1.7}
	.kd-intro-chips{gap: 8px;padding-top: 22px}
	.kd-tag{font-size: 12px;padding: 8px 12px}
	.kd-sec-title{font-size: 21px}
	.kd-sec-title i,.kd-sec-title .bold{font-size: 21px}
	.kd-flow-row{padding-left: 0}
	.kd-flow-row::before{display: none}
	.kd-step{flex-direction: column;gap: 12px;padding: 10px 0}
	.kd-step-no{width: 38px;height: 38px;font-size: 15px;display: none;}
	.kd-step-body{padding: 18px 18px}
	.kd-step-body b{font-size: 16px}
	.kd-step-body span{font-size: 13px}
	.kd-reason{flex-direction: column;gap: 8px;padding: 18px}
	.kd-reason-no{width: auto}
	.kd-reason b{font-size: 15.5px}
	.kd-reason-body span{font-size: 13px}
	.kd-note{padding: 16px}
	.kd-note b{font-size: 14.5px}
	.kd-note span{font-size: 12.5px}
	.kd-care-box{padding: 24px 18px;gap: 20px}
	.kd-care-txt h2{font-size: 18px}
	.kd-care-desc{font-size: 13.5px}
	.kd-care-list p{font-size: 12.5px}
	.kd-btn{width: 100%;padding: 13px 18px}
	.kd-care-btns{flex-direction: column;gap: 10px}
	.kd-board{--bw: 100%}
}