/* ==========================================================================
   handy.html 専用スタイル
   pos.html（青基調・罫線カード中心）とは別デザイン。
   青基調（#0145f2 系＝pos.html と同じ）+ スマホモックアップ +
   セクションごとに配置を変えた構成。見出しは .inner-page-title と同じ左寄せ。
   ========================================================================== */

:root{
	--hd-o:#0145f2;          /* メインブルー（pos.html と共通） */
	--hd-o-d:#0134c0;
	--hd-o-l:#8fb0ff;
	--hd-cream:#f6faff;      /* pos の .pos-point-here と同じ淡い青 */
	--hd-cream-2:#e8f0ff;
	--hd-ink:#22262e;
	--hd-gray:#666;
	--hd-gray-l:#99a3b3;
	--hd-line:#e4e8f0;       /* pos の罫線色 */
	--hd-shadow:0 16px 38px rgba(20,50,120,.10);
}

/* ---------- スクロール出現（JSが .hd-reveal を付与。JS無効時はそのまま表示） ---------- */
.hd-reveal{opacity: 0;transform: translate(0,28px);transition: opacity .75s ease,transform .75s cubic-bezier(.22,.61,.36,1);}
.hd-reveal.hd-in{opacity: 1;transform: translate(0,0);}
@media (prefers-reduced-motion: reduce){
	.hd-reveal{opacity: 1;transform: none;transition: none;}
}

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

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

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

/* ==========================================================================
   スマホモックアップ（CSSのみで描画）
   ========================================================================== */
.hd-phone{--pw: 242px;--sh: 432px;position: relative;width: var(--pw);flex: none;background: #1f2430;border-radius: 34px;padding: 10px;box-shadow: 0 26px 54px rgba(20,40,90,.24),0 6px 14px rgba(20,40,90,.12);}
.hd-phone::after{content: '';position: absolute;left: 50%;top: 4px;width: 68px;height: 5px;border-radius: 4px;background: rgba(255,255,255,.20);transform: translate(-50%,0);}
.hd-screen{width: 100%;height: var(--sh);background: #fff;border-radius: 26px;overflow: hidden;display: flex;flex-direction: column;}

.hd-scr-bar{display: flex;align-items: center;justify-content: space-between;padding: 13px 15px 5px;font-size: 9px;color: var(--hd-gray-l);}
.hd-scr-bar span{font-size: 9px;color: var(--hd-gray-l);}
.hd-sig{display: flex;align-items: flex-end;gap: 2px;}
.hd-sig u{display: block;width: 3px;background: #d8dde8;border-radius: 1px;}
.hd-sig u:nth-child(1){height: 4px;}
.hd-sig u:nth-child(2){height: 7px;}
.hd-sig u:nth-child(3){height: 10px;}

.hd-scr-head{display: flex;align-items: center;gap: 8px;padding: 0 14px 10px;border-bottom: 1px solid #eef1f6;}
.hd-scr-head i{width: 20px;height: 20px;border-radius: 6px;background: #eaf1ff;color: var(--hd-o);font-size: 11px;display: flex;align-items: center;justify-content: center;flex: none;}
.hd-scr-head b{font-size: 12.5px;color: var(--hd-ink);}
.hd-scr-head em{margin-left: auto;font-size: 9px;color: var(--hd-gray-l);}

.hd-body{flex: 1;display: flex;flex-direction: column;min-height: 0;}

.hd-tabbar{display: flex;align-items: center;justify-content: space-around;padding: 10px 0;border-top: 1px solid #eef1f6;background: #fbfcfe;}
.hd-tabbar i{width: 24px;height: 3px;border-radius: 2px;background: #dfe4ec;}
.hd-tabbar i.on{background: var(--hd-o);}

/* テーブル一覧（カラフルなグリッド） */
.hd-grid{counter-reset: hdcell;display: grid;grid-template-columns: repeat(4,1fr);gap: 7px;padding: 12px 13px;align-content: start;}
.hd-cell{height: 64px;border-radius: 11px;display: flex;flex-direction: column;align-items: center;justify-content: center;gap: 7px;color: #fff;font-size: 11px;}
.hd-cell::before{counter-increment: hdcell;content: counter(hdcell);}
.hd-cell::after{content: '';width: 18px;height: 4px;border-radius: 2px;background: rgba(255,255,255,.65);}
.hd-cell:nth-child(8n+1){background: #4d8dff;}
.hd-cell:nth-child(8n+2){background: #46c4a0;}
.hd-cell:nth-child(8n+3){background: #6ea8f5;}
.hd-cell:nth-child(8n+4){background: #9b8cf5;}
.hd-cell:nth-child(8n+5){background: #ff8f6e;}
.hd-cell:nth-child(8n+6){background: #ffc94d;}
.hd-cell:nth-child(8n+7){background: #4cc8d4;}
.hd-cell:nth-child(8n+8){background: #f38fbc;}

/* テーブル状況の凡例 */
.hd-legend{display: flex;align-items: center;justify-content: space-around;padding: 11px 12px;margin-top: auto;border-top: 1px solid #eef1f6;background: #f7fafd;font-size: 9.5px;color: var(--hd-gray);}
.hd-legend p{display: flex;align-items: center;gap: 5px;font-size: 9.5px;color: var(--hd-gray);}
.hd-lg{display: block;width: 8px;height: 8px;border-radius: 3px;background: #4d8dff;flex: none;}
.hd-lg2{background: #46c4a0;}
.hd-lg3{background: #9b8cf5;}

/* 注文一覧 */
.hd-ticket{display: flex;align-items: center;gap: 9px;padding: 10px 13px;border-bottom: 1px solid #f2f5f9;}
.hd-ticket>i{width: 4px;height: 24px;border-radius: 2px;background: #4d8dff;flex: none;}
.hd-ticket:nth-child(3n+2)>i{background: #46c4a0;}
.hd-ticket:nth-child(3n+3)>i{background: #6ea8f5;}
.hd-ticket p{flex: 1;min-width: 0;}
.hd-ticket p b{display: block;font-size: 10.5px;color: var(--hd-ink);}
.hd-ticket p span{display: block;font-size: 9px;color: var(--hd-gray-l);padding-top: 3px;}
.hd-ticket u{font-size: 9.5px;color: var(--hd-o);text-decoration: none;}
.hd-send{margin: auto 13px 13px;height: 34px;border-radius: 8px;background: var(--hd-o);color: #fff;font-size: 11px;display: flex;align-items: center;justify-content: center;}

/* 端末設定 */
.hd-setrow{display: flex;align-items: center;gap: 9px;padding: 11px 13px;border-bottom: 1px solid #f2f5f9;}
.hd-setrow i{width: 22px;height: 22px;border-radius: 7px;background: #eaf1ff;color: var(--hd-o);font-size: 11px;display: flex;align-items: center;justify-content: center;flex: none;}
.hd-setrow b{flex: 1;font-size: 10.5px;color: var(--hd-ink);}
.hd-sw{width: 27px;height: 15px;border-radius: 9px;background: #dfe4ec;position: relative;flex: none;}
.hd-sw::after{content: '';position: absolute;top: 2px;left: 2px;width: 11px;height: 11px;border-radius: 50%;background: #fff;box-shadow: 0 1px 2px rgba(0,0,0,.18);}
.hd-sw.on{background: var(--hd-o);}
.hd-sw.on::after{left: 14px;}

/* 人数入力（キーパッド） */
.hd-keypad{counter-reset: hdkey;display: grid;grid-template-columns: repeat(3,1fr);gap: 7px;padding: 12px;}
.hd-key{height: 38px;border-radius: 10px;background: #f1f4f9;display: flex;align-items: center;justify-content: center;font-size: 12px;color: var(--hd-ink);}
.hd-key::before{counter-increment: hdkey;content: counter(hdkey);}

/* 会計画面 */
.hd-amount{padding: 22px 13px 10px;text-align: center;}
.hd-amount span{display: block;font-size: 9.5px;color: var(--hd-gray-l);padding-bottom: 6px;}
.hd-amount b{font-size: 23px;color: var(--hd-ink);letter-spacing: .01em;}
.hd-amount b i{font-size: 14px;color: var(--hd-o);padding-right: 2px;}
.hd-amount em{display: block;font-size: 9.5px;color: var(--hd-gray-l);padding-top: 6px;}
.hd-lines{padding: 0 13px;}
.hd-lines p{display: flex;align-items: center;justify-content: space-between;font-size: 10px;color: var(--hd-gray);padding: 8px 0;border-bottom: 1px dashed #e9edf4;}
.hd-lines p u{font-size: 10px;color: var(--hd-ink);text-decoration: none;}

/* 小型のスマホ（店舗業務の流れで使用） */
.hd-phone-sm{--pw: 178px;--sh: 316px;border-radius: 28px;padding: 7px;}
.hd-phone-sm::after{width: 50px;height: 4px;top: 3px;}
.hd-phone-sm .hd-screen{border-radius: 22px;}
.hd-phone-sm .hd-scr-bar{padding: 8px 10px 4px;font-size: 7.5px;}
.hd-phone-sm .hd-scr-bar span{font-size: 7.5px;}
.hd-phone-sm .hd-scr-head{padding: 0 10px 7px;gap: 6px;}
.hd-phone-sm .hd-scr-head i{width: 16px;height: 16px;font-size: 9px;border-radius: 5px;}
.hd-phone-sm .hd-scr-head b{font-size: 10px;}
.hd-phone-sm .hd-scr-head em{font-size: 7.5px;}
.hd-phone-sm .hd-tabbar{padding: 7px 0;}
.hd-phone-sm .hd-tabbar i{width: 17px;height: 2px;}
.hd-phone-sm .hd-grid{gap: 4px;padding: 8px 10px;}
.hd-phone-sm .hd-cell{height: 30px;border-radius: 6px;font-size: 8px;gap: 2px;}
.hd-phone-sm .hd-cell::after{width: 10px;height: 2px;}
.hd-phone-sm .hd-ticket{padding: 7px 10px;gap: 7px;}
.hd-phone-sm .hd-ticket>i{width: 3px;height: 17px;}
.hd-phone-sm .hd-ticket p b{font-size: 9px;}
.hd-phone-sm .hd-ticket p span{font-size: 7.5px;padding-top: 2px;}
.hd-phone-sm .hd-ticket u{font-size: 8px;}
.hd-phone-sm .hd-send{margin: auto 10px 10px;height: 26px;font-size: 9px;border-radius: 6px;}
.hd-phone-sm .hd-keypad{gap: 5px;padding: 9px;}
.hd-phone-sm .hd-key{height: 28px;border-radius: 7px;font-size: 10px;}
.hd-phone-sm .hd-amount{padding: 16px 10px 8px;}
.hd-phone-sm .hd-amount span,.hd-phone-sm .hd-amount em{font-size: 7.5px;}
.hd-phone-sm .hd-amount b{font-size: 18px;}
.hd-phone-sm .hd-amount b i{font-size: 11px;}
.hd-phone-sm .hd-lines{padding: 0 10px;}
.hd-phone-sm .hd-lines p{font-size: 8px;padding: 5px 0;}
.hd-phone-sm .hd-lines p u{font-size: 8px;}

/* ==========================================================================
   1. ヒーロー
   ========================================================================== */
.hd-hero{position: relative;overflow: hidden;background: #eaf2ff;}
.hd-hero-deco1{position: absolute;width: 560px;height: 560px;border: 70px solid rgba(1,69,242,.13);border-radius: 50%;top: -230px;right: -170px;}
.hd-hero-deco2{position: absolute;width: 130px;height: 130px;border-radius: 50%;background: rgba(1,69,242,.08);bottom: -46px;left: -34px;}
.hd-hero-deco3{position: absolute;width: 14px;height: 14px;border-radius: 50%;background: var(--hd-o-l);top: 190px;right: 46%;}
.hd-hero .page-content{position: relative;z-index: 1;}
.hd-hero .pos-crumb{color: #8a94a6;}
.hd-hero .pos-crumb a{color: #333a47;}
.hd-hero .pos-crumb i{color: #c8d0de;}

.hd-hero-grid{display: flex;align-items: center;gap: 40px;padding: 26px 0 74px;}
.hd-hero-txt{flex: 1;min-width: 0;}
.hd-pill{display: inline-block;background: #fff;border: 1px solid #c9dafd;color: var(--hd-o);font-size: 13px;padding: 8px 18px;border-radius: 30px;letter-spacing: .06em;}
.hd-hero-title{font-size: 44px;line-height: 1.44;color: var(--hd-ink);padding: 22px 0 0;}
.hd-hero-title i{color: var(--hd-o);}
.hd-hero-sub{font-size: 20px;color: #333a47;padding: 14px 0 0;line-height: 1.7;}
.hd-hero-desc{color: var(--hd-gray);line-height: 1.95;font-size: 16px;padding: 18px 0 0;max-width: 620px;}
.hd-hero-btns{display: flex;gap: 14px;padding: 30px 0 0;flex-wrap: wrap;}
.hd-hero-chips{display: flex;gap: 10px;padding: 26px 0 0;flex-wrap: wrap;}
.hd-chip{display: flex;align-items: center;gap: 7px;background: rgba(255,255,255,.78);border: 1px solid #dbe6f8;border-radius: 30px;padding: 9px 18px;font-size: 14px;color: #5a6474;}
.hd-chip i{color: var(--hd-o);font-size: 12px;}

.hd-hero-visual{position: relative;width: 300px;flex: none;display: flex;justify-content: flex-end;}
.hd-float{position: absolute;display: flex;align-items: center;gap: 9px;background: #fff;border-radius: 14px;box-shadow: 0 16px 34px rgba(20,50,110,.16);padding: 11px 15px;z-index: 2;}
.hd-float>i{width: 30px;height: 30px;border-radius: 9px;background: #eaf1ff;color: var(--hd-o);font-size: 14px;display: flex;align-items: center;justify-content: center;flex: none;}
.hd-float p{line-height: 1.4;}
.hd-float p b{display: block;font-size: 12.5px;color: var(--hd-ink);}
.hd-float p span{display: block;font-size: 10px;color: var(--hd-gray-l);}
.hd-float-1{left: -34px;bottom: 104px;}
.hd-float-2{right: -26px;top: 78px;}

/* ==========================================================================
   2. 導入文（中央寄せ）
   ========================================================================== */
.hd-intro{background: #fff;padding: 60px 0 0;text-align: left;}
.hd-intro-mark{width: 56px;height: 4px;border-radius: 3px;background: var(--hd-o);margin: 0 0 30px;}
.hd-intro-txt{font-size: 30px;line-height: 1.72;color: var(--hd-ink);max-width: 940px;}
.hd-intro-txt i{color: var(--hd-o);}
.hd-intro-sub{display: block;color: var(--hd-gray);line-height: 1.95;padding: 20px 0 0;}
.hd-intro-chips{display: flex;justify-content: flex-start;gap: 12px;padding: 32px 0 0;flex-wrap: wrap;}

/* ==========================================================================
   3. 選ばれる理由（2×2・クリームカード）
   ========================================================================== */
.hd-reasons{padding: 0 0 60px;}
.hd-reasons-grid{display: grid;grid-template-columns: 1fr 1fr;gap: 20px;}
.hd-reason{position: relative;display: flex;align-items: center;gap: 18px;background: var(--hd-cream);border: 1px solid var(--hd-line);border-radius: 16px;padding: 26px 28px;overflow: hidden;transition: .3s;}
.hd-reason::after{content: '';position: absolute;right: -34px;bottom: -34px;width: 104px;height: 104px;border-radius: 50%;background: rgba(1,69,242,.07);}
.hd-reason:hover{transform: translate(0,-4px);box-shadow: var(--hd-shadow);}
.hd-reason-no{font-size: 24px;color: var(--hd-o);opacity: .45;line-height: 1.1;flex: none;}
.hd-reason-body{flex: 1;min-width: 0;position: relative;z-index: 1;}
.hd-reason-body p{font-size: 19px;color: var(--hd-o);line-height: 1.55;padding-bottom: 9px;}
.hd-reason-body span{display: block;color: var(--hd-gray);font-size: 14.5px;line-height: 1.85;}
.hd-reason-ico{position: relative;z-index: 1;width: 52px;height: 52px;border-radius: 50%;background: #fff;color: var(--hd-o);font-size: 22px;display: flex;align-items: center;justify-content: center;flex: none;box-shadow: 0 10px 20px rgba(1,69,242,.16);}

/* ==========================================================================
   4. 主な機能（スマホ3台）
   ========================================================================== */
.hd-features{background: #f6f8fc;padding: 0 0 60px;}
.hd-feature-row{display: grid;grid-template-columns: repeat(3,1fr);gap: 26px;}
.hd-feature{display: flex;flex-direction: column;align-items: center;background: #fff;border-radius: 20px;padding: 34px 24px 30px;text-align: center;box-shadow: 0 10px 26px rgba(20,50,110,.07);transition: .3s;}
.hd-feature:hover{transform: translate(0,-6px);box-shadow: var(--hd-shadow);}
.hd-feature>.hd-phone{margin-bottom: 26px;}
.hd-feature-cap{width: 100%;}
.hd-feature-title{display: flex;align-items: center;justify-content: center;gap: 9px;font-size: 18px;color: var(--hd-ink);padding-bottom: 11px;}
.hd-feature-title::before{content: '';width: 7px;height: 7px;border-radius: 50%;background: var(--hd-o);flex: none;}
.hd-feature-cap span{display: block;color: var(--hd-gray);line-height: 1.85;}

/* ==========================================================================
   5. 店舗業務の流れ（矢印つき3ステップ）
   ========================================================================== */
.hd-flow{background: #fff}
.hd-flow-row{display: flex;align-items: stretch;gap: 12px;}
.hd-flow-card{flex: 1;min-width: 0;display: flex;flex-direction: column;align-items: center;background: var(--hd-cream);border: 1px solid var(--hd-line);border-radius: 18px;padding: 24px 18px 26px;text-align: center;transition: .3s;}
.hd-flow-card:hover{box-shadow: var(--hd-shadow);}
.hd-flow-head{display: flex;align-items: center;justify-content: center;gap: 9px;padding-bottom: 18px;}
.hd-flow-head i{width: 24px;height: 24px;border-radius: 50%;background: var(--hd-o);color: #fff;font-size: 12px;display: flex;align-items: center;justify-content: center;flex: none;line-height: 2;}
.hd-flow-head b{font-size: 17px;color: var(--hd-ink);}
.hd-flow-cap{padding-top: 20px;font-size: 13.5px;color: var(--hd-gray);line-height: 1.85;}
.hd-flow-arrow{flex: none;width: 34px;display: flex;align-items: center;justify-content: center;}
.hd-flow-arrow i{width: 0;height: 0;border-left: 16px solid #8fb0ff;border-top: 11px solid transparent;border-bottom: 11px solid transparent;}

/* ==========================================================================
   6. 従来端末との比較
   ========================================================================== */
.hd-compare{padding: 0 0 10px;}
.hd-cmp{position: relative;display: flex;background: #fff;border-radius: 20px;overflow: hidden;box-shadow: 0 16px 40px rgba(20,50,110,.10);}
.hd-cmp::after{content: '';position: absolute;left: 50%;top: 72px;bottom: 26px;border-left: 1px dashed #e4e8f0;}
.hd-cmp-col{width: 50%;padding-bottom: 24px;}
.hd-cmp-col-head{padding: 22px 30px;font-size: 19px;}
.hd-cmp-old .hd-cmp-col-head{background: #f1f4f8;color: #8b93a3;}
.hd-cmp-new .hd-cmp-col-head{background: var(--hd-o);color: #fff;}
.hd-cmp-list{padding: 4px 30px 0;}
.hd-cmp-list p{display: flex;gap: 11px;padding: 14px 0;font-size: 15px;line-height: 1.7;border-bottom: 1px dashed #e4e8f0;}
.hd-cmp-list p:last-child{border-bottom: 0;}
.hd-cmp-list p i{font-size: 15px;flex: none;padding-top: 3px;}
.hd-cmp-old .hd-cmp-list p{color: #98a0ae;}
.hd-cmp-old .hd-cmp-list p i{color: #ccd3de;}
.hd-cmp-new .hd-cmp-list p{color: var(--hd-ink);}
.hd-cmp-new .hd-cmp-list p i{color: var(--hd-o);}
.hd-cmp-vs{position: absolute;left: 50%;top: 50%;width: 58px;height: 58px;border-radius: 50%;background: #fff;border: 1px solid #d7e3fb;color: var(--hd-o);font-size: 16px;display: flex;align-items: center;justify-content: center;box-shadow: 0 10px 22px rgba(20,50,110,.14);transform: translate(-50%,-50%);z-index: 9;}

/* ==========================================================================
   7. ご利用環境（破線カード）
   ========================================================================== */
.hd-env{background: #fff;padding: 0 0 40px;}
.hd-env-row{display: grid;grid-template-columns: repeat(3,1fr);gap: 22px;}
.hd-env-card{background: #fff;border: 1px dashed #c8d9f7;border-radius: 18px;padding: 34px 26px 30px;text-align: center;transition: .3s;}
.hd-env-card:hover{border-color: var(--hd-o);transform: translate(0,-4px);box-shadow: var(--hd-shadow);}
.hd-env-ico{width: 62px;height: 62px;border-radius: 50%;background: var(--hd-cream-2);color: var(--hd-o);font-size: 26px;display: flex;align-items: center;justify-content: center;margin: 0 auto 18px;}

.hd-env-ico img{width: 50%}
.hd-env-card p{font-size: 19px;color: var(--hd-ink);padding-bottom: 10px;}
.hd-env-card span{display: block;color: var(--hd-gray);font-size: 14.5px;line-height: 1.85;}
.hd-env-note{display: flex;align-items: flex-start;gap: 12px;background: var(--hd-cream);border: 1px solid var(--hd-line);border-radius: 14px;padding: 22px 28px;margin-top: 24px;}
.hd-env-note i{color: var(--hd-o);font-size: 17px;flex: none;padding-top: 2px;}
.hd-env-note p{color: #5a6474;line-height: 1.9;font-size: 14.5px;}
.hd-env-note p b{color: var(--hd-o);padding-right: 10px;font-size: 14.5px;}

/* ==========================================================================
   8. 活きる場面（左右非対称レイアウト）
   ========================================================================== */
.hd-scene{background: #fff;padding: 0 0 92px;}
.hd-scene-wrap{display: flex;gap: 60px;align-items: flex-start;}
.hd-scene-left{width: 630px;flex: none;}
.hd-scene-left .hd-sec-head{padding: 0 0 22px}
.hd-scene-left .hd-sec-title{font-size: 30px;line-height: 1.55;color: #333}
.hd-scene-left .hd-sec-title i,.hd-scene-left .hd-sec-title .bold{font-size: 30px;color: var(--hd-o)}
.hd-scene-left .hd-sec-lead{color: var(--hd-gray);line-height: 1.9;font-size: 15px;}
.hd-scene-right{flex: 1;min-width: 0;}
.hd-scene-li{display: flex;gap: 22px;padding: 26px 0;border-top: 1px solid var(--hd-line);}
.hd-scene-li:last-child{border-bottom: 1px solid var(--hd-line);}
.hd-scene-num{width: 36px;height: 36px;border-radius: 50%;background: var(--hd-o);color: #fff;font-size: 15px;display: flex;align-items: center;justify-content: center;flex: none;}
.hd-scene-li b{display: block;font-size: 19px;color: var(--hd-ink);padding-bottom: 8px;}
.hd-scene-li span{color: var(--hd-gray);font-size: 14.5px;line-height: 1.85;display: block;}

/* ==========================================================================
   9. CTA
   ========================================================================== */
.hd-cta{background: #fff;padding: 0 0 92px;}
.hd-cta-box{position: relative;display: flex;align-items: center;gap: 34px;background: var(--hd-o);border-radius: 24px;padding: 52px 56px;overflow: hidden;}
.hd-cta-box::before{content: '';position: absolute;width: 440px;height: 440px;border: 58px solid rgba(255,255,255,.12);border-radius: 50%;right: -130px;top: -200px;}
.hd-cta-txt{position: relative;z-index: 1;flex: 1;min-width: 0;}
.hd-cta-txt h2{font-size: 32px;line-height: 1.55;color: #fff;}
.hd-cta-desc{color: rgba(255,255,255,.92);font-size: 15px;line-height: 1.95;padding: 16px 0 0;max-width: 640px;}
.hd-cta-btns{display: flex;gap: 14px;padding: 28px 0 0;flex-wrap: wrap;}
.hd-cta-btns .hd-btn-main{background: #fff;color: var(--hd-o);box-shadow: 0 12px 24px rgba(0,30,100,.18);}
.hd-cta-btns .hd-btn-main:hover{background: #f2f6ff;color: var(--hd-o-d);}
.hd-cta-btns .hd-btn-ghost{background: rgba(255,255,255,.06);color: #fff;border: 1px solid rgba(255,255,255,.65);}
.hd-cta-btns .hd-btn-ghost:hover{background: rgba(255,255,255,.16);border-color: #fff;color: #fff;}
.hd-cta-visual{position: relative;z-index: 1;flex: none;}

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

/* ---------- 1280px以下：小さめのノートPC ---------- */
@media screen and (max-width: 1280px){
	.hd-hero-title{font-size: 38px}
	.hd-hero-sub{font-size: 18px}
	.hd-hero-grid{gap: 30px;padding: 22px 0 64px}
	.hd-hero-visual{width: 262px}
	.hd-float-1{left: -26px;bottom: 96px}
	.hd-float-2{right: -18px;top: 70px}
	.hd-sec-head{padding: 34px 0 20px}
	.hd-sec-title{font-size: 34px}
	.hd-sec-title i,.hd-sec-title .bold{font-size: 34px}
	.hd-intro{padding: 72px 0 62px}
	.hd-intro-txt{font-size: 27px}
	.hd-reasons,.hd-flow,.hd-compare,.hd-env,.hd-scene,.hd-cta{padding-bottom: 72px}
	.hd-features{padding: 72px 0}
	.hd-reason{padding: 22px}
	.hd-reason-body p{font-size: 18px}
	.hd-feature{padding: 28px 18px 26px}
	.hd-feature-row{gap: 18px}
	.hd-env-row{gap: 18px}
	.hd-scene-wrap{gap: 44px}
	.hd-scene-left{width: 300px}
	.hd-scene-left .hd-sec-title,.hd-scene-left .hd-sec-title i,.hd-scene-left .hd-sec-title .bold{font-size: 27px}
	.hd-cta-box{padding: 44px 40px}
	.hd-cta-txt h2{font-size: 28px}
}

/* ---------- 1024px以下：タブレット横 ---------- */
@media screen and (max-width: 1024px){
	.hd-hero-title{font-size: 33px}
	.hd-hero-sub{font-size: 16px}
	.hd-hero-desc{font-size: 15px}
	.hd-hero-visual{width: 240px}
	.hd-phone{--pw: 218px;--sh: 390px}
	.hd-float{padding: 9px 12px}
	.hd-float>i{width: 26px;height: 26px;font-size: 12px}
	.hd-float p b{font-size: 11.5px}
	.hd-float p span{font-size: 9.5px}
	.hd-sec-title{font-size: 30px}
	.hd-sec-title i,.hd-sec-title .bold{font-size: 30px}
	.hd-sec-lead{font-size: 15px}
	.hd-intro-txt{font-size: 24px}
	.hd-reason{gap: 14px;padding: 20px}
	.hd-reason-no{font-size: 21px}
	.hd-reason-body p{font-size: 17px}
	.hd-reason-body span{font-size: 13.5px}
	.hd-reason-ico{width: 46px;height: 46px;font-size: 19px}
	.hd-feature{padding: 24px 14px 22px}
	.hd-feature>.hd-phone{margin-bottom: 20px}
	.hd-feature-title{font-size: 16px}
	.hd-feature-cap span{font-size: 13.5px}
	.hd-flow-card{padding: 20px 12px 22px}
	.hd-flow-head b{font-size: 15px}
	.hd-flow-cap{font-size: 12.5px;padding-top: 16px}
	.hd-flow-arrow{width: 22px}
	.hd-flow-arrow i{border-left-width: 11px;border-top-width: 8px;border-bottom-width: 8px}
	.hd-cmp-col-head{font-size: 17px;padding: 18px 22px}
	.hd-cmp-list{padding: 2px 22px 0}
	.hd-cmp-list p{font-size: 14px;padding: 12px 0}
	.hd-env-card{padding: 28px 20px 26px}
	.hd-env-card p{font-size: 17px}
	.hd-env-card span{font-size: 13.5px}
	.hd-scene-wrap{gap: 34px}
	.hd-scene-left{width: 260px}
	.hd-scene-left .hd-sec-title,.hd-scene-left .hd-sec-title i,.hd-scene-left .hd-sec-title .bold{font-size: 24px}
	.hd-scene-li b{font-size: 17px}
	.hd-scene-li span{font-size: 13.5px}
	.hd-cta-box{padding: 38px 32px;gap: 24px}
	.hd-cta-txt h2{font-size: 25px}
	.hd-cta-desc{font-size: 14px}
	.hd-btn{padding: 14px 30px;font-size: 14px}
}

/* ---------- 900px以下：タブレット縦（iPad 820/834） ---------- */
@media screen and (max-width: 900px){
	/* 主な機能：スマホを左に置いた横並びカードへ */
	.hd-feature-row{grid-template-columns: 1fr;gap: 18px}
	.hd-feature{flex-direction: row;align-items: center;gap: 26px;text-align: left;padding: 26px}
	.hd-feature>.hd-phone{margin-bottom: 0}
	.hd-feature-cap{width: auto;flex: 1;min-width: 0}
	.hd-feature-title{justify-content: flex-start}
	/* 店舗業務の流れ：小型スマホをさらに縮小 */
	.hd-phone-sm{--pw: 152px;--sh: 272px;border-radius: 24px;padding: 6px}
	.hd-phone-sm .hd-grid{gap: 3px;padding: 7px 8px}
	.hd-phone-sm .hd-cell{height: 25px;font-size: 7px}
	.hd-phone-sm .hd-ticket{padding: 6px 8px;gap: 6px}
	.hd-phone-sm .hd-key{height: 24px;font-size: 9px}
	.hd-phone-sm .hd-amount{padding: 13px 8px 6px}
	.hd-phone-sm .hd-amount b{font-size: 15px}
	.hd-phone-sm .hd-send{height: 22px;font-size: 8px;margin: auto 8px 8px}
	.hd-sitenote{display: none}
}

/* ---------- 768px以下：スマホ横〜タブレット縦 ---------- */
@media screen and (max-width: 768px){
	.hd-hero-grid{flex-direction: column;align-items: flex-start;gap: 40px;padding: 16px 0 56px}
	.hd-hero-visual{width: 100%;justify-content: center;margin-top: 8px}
	.hd-phone{--pw: 214px;--sh: 382px}
	.hd-float-1{left: 4px;bottom: 86px}
	.hd-float-2{right: 4px;top: 60px}
	.hd-hero-title{font-size: 31px;padding-top: 18px}
	.hd-hero-sub{font-size: 16px}
	.hd-hero-btns{padding-top: 24px;gap: 10px}
	.hd-hero-chips{padding-top: 20px}
	.hd-btn{padding: 13px 26px;font-size: 14px}
	.hd-intro{padding: 56px 0 48px}
	.hd-intro-txt{font-size: 22px}
	.hd-intro-sub{font-size: 14px;padding-top: 16px}
	.hd-reasons,.hd-flow,.hd-env,.hd-scene,.hd-cta{padding-bottom: 50px}
	.hd-compare{padding-bottom: 20px;}
	.hd-features{padding: 0}
	.hd-sec-head{padding: 28px 0 16px}
	.hd-sec-title{font-size: 26px}
	.hd-sec-title i,.hd-sec-title .bold{font-size: 26px}
	.hd-sec-lead{font-size: 14px}
	/* 選ばれる理由：1列 */
	.hd-reasons-grid{grid-template-columns: 1fr;gap: 14px}
	.hd-reason{padding: 20px 18px;gap: 12px}
	.hd-reason-no{font-size: 19px}
	.hd-reason-body p{font-size: 16.5px}
	.hd-reason-ico{width: 42px;height: 42px;font-size: 17px}
	/* 主な機能：スマホを上に */
	.hd-feature{flex-direction: column;text-align: center;padding: 26px 20px}
	.hd-feature>.hd-phone{margin-bottom: 22px}
	.hd-feature-title{justify-content: center}
	.hd-feature-cap{width: 100%}
	/* 流れ：縦積み＋下向き矢印 */
	.hd-flow-row{flex-direction: column;align-items: stretch;gap: 0}
	.hd-flow-card{padding: 22px 18px 24px}
	.hd-flow-arrow{width: 100%;height: 40px}
	.hd-flow-arrow i{border-left: 12px solid transparent;border-right: 12px solid transparent;border-top: 16px solid #8fb0ff;border-bottom: 0}
	.hd-phone-sm{--pw: 178px;--sh: 316px;border-radius: 28px;padding: 7px}
	.hd-phone-sm .hd-grid{gap: 4px;padding: 8px 10px}
	.hd-phone-sm .hd-cell{height: 30px;font-size: 8px}
	.hd-phone-sm .hd-ticket{padding: 7px 10px;gap: 7px}
	.hd-phone-sm .hd-key{height: 28px;font-size: 10px}
	.hd-phone-sm .hd-amount{padding: 16px 10px 8px}
	.hd-phone-sm .hd-amount b{font-size: 18px}
	.hd-phone-sm .hd-send{height: 26px;font-size: 9px;margin: auto 10px 10px}
	/* 比較：縦積み */
	.hd-cmp{flex-direction: column}
	.hd-cmp::after{display: none}
	.hd-cmp-col{width: 100%;padding-bottom: 18px}
	.hd-cmp-col-head{padding: 16px 20px;font-size: 16px}
	.hd-cmp-list{padding: 2px 20px 0}
	.hd-cmp-list p{font-size: 14px;padding: 12px 0}
	.hd-cmp-vs{top: auto;bottom: -29px;left: 50%;display: none;}
	.hd-cmp-old{padding-bottom: 0}
	/* 環境：1列 */
	.hd-env-row{grid-template-columns: 1fr;gap: 14px}
	.hd-env-card{padding: 24px 20px 22px}
	.hd-env-note{padding: 18px 20px;flex-direction: column;gap: 8px}
	/* 場面：1列 */
	.hd-scene-wrap{flex-direction: column;gap: 10px}
	.hd-scene-left,.hd-scene-right{width: 100%}
	.hd-scene-left .hd-sec-title,.hd-scene-left .hd-sec-title i,.hd-scene-left .hd-sec-title .bold{font-size: 22px}
	.hd-scene-left .hd-sec-lead{font-size: 14px}
	.hd-scene-li{gap: 16px;padding: 20px 0}
	.hd-scene-num{width: 30px;height: 30px;font-size: 13px}
	.hd-scene-li b{font-size: 17px}
	.hd-scene-li span{font-size: 13.5px}
	/* CTA：縦積み・中央寄せ */
	.hd-cta-box{flex-direction: column;align-items: center;text-align: center;padding: 36px 24px 0;gap: 28px}
	.hd-cta-txt h2{font-size: 23px}
	.hd-cta-desc{max-width: none}
	.hd-cta-btns{justify-content: center}
	.hd-cta-visual{width: 100%;display: flex;justify-content: center}
	.hd-cta-box::before{width: 300px;height: 300px;border-width: 40px;right: -110px;top: -150px}
}

/* ---------- 480px以下：スマホ縦 ---------- */
@media screen and (max-width: 480px){
	.hd-hero{background: #eaf2ff}
	.hd-hero-deco1{width: 340px;height: 340px;border-width: 42px;top: -170px;right: -130px}
	.hd-hero-title{font-size: 26px}
	.hd-hero-sub{font-size: 15px}
	.hd-hero-desc{font-size: 14px;line-height: 1.9}
	.hd-hero-chips{gap: 8px}
	.hd-chip{padding: 8px 14px;font-size: 12px}
	.hd-hero-visual{width: 100%}
	.hd-phone{--pw: 196px;--sh: 350px;border-radius: 30px;padding: 8px}
	.hd-phone .hd-screen{border-radius: 23px}
	.hd-float{padding: 8px 11px;border-radius: 12px}
	.hd-float>i{width: 24px;height: 24px;font-size: 11px}
	.hd-float p b{font-size: 11px}
	.hd-float p span{font-size: 9px}
	.hd-float-1{left: -6px;bottom: 70px}
	.hd-float-2{right: -6px;top: 48px}
	.hd-sec-title{font-size: 22px}
	.hd-sec-title i,.hd-sec-title .bold{font-size: 22px}
	.hd-intro{padding: 48px 0 20px}
	.hd-intro-mark{margin-bottom: 22px}
	.hd-intro-txt{font-size: 18px;line-height: 1.75}
	.hd-intro-chips{gap: 8px;padding-top: 24px}
	.hd-reason-body p{font-size: 15.5px}
	.hd-reason-body span{font-size: 13px}
	.hd-reason-no{font-size: 17px}
	.hd-reason-ico{display: none}
	.hd-feature{padding: 22px 16px}
	.hd-feature-title{font-size: 15.5px}
	.hd-feature-cap span{font-size: 13px}
	.hd-flow-head b{font-size: 15.5px}
	.hd-flow-cap{font-size: 12.5px}
	.hd-cmp-col-head{font-size: 15px;padding: 14px 16px}
	.hd-cmp-list{padding: 0 16px}
	.hd-cmp-list p{font-size: 13px;gap: 8px}
	.hd-env-card p{font-size: 16px}
	.hd-env-card span{font-size: 13px}
	.hd-env-note p{font-size: 13px}
	.hd-scene-left .hd-sec-title,.hd-scene-left .hd-sec-title i,.hd-scene-left .hd-sec-title .bold{font-size: 20px}
	.hd-scene-li b{font-size: 16px}
	.hd-scene-li span{font-size: 13px}
	.hd-cta-box{padding: 30px 18px 0}
	.hd-cta-txt h2{font-size: 20px}
	.hd-cta-desc{font-size: 13px}
	.hd-btn{padding: 12px 22px;font-size: 13px}
	.hd-cta-btns{gap: 10px}
}