/* ==========================================================================
   qr.html 専用スタイル（モバイルオーダー）
   pos.html / handy.html / kds.html とは別デザイン。青基調は pos.html と共通（#0145f2 系）。
   特徴：淡いブルーのヒーローに2台のスマホ／白地の大見出し＋3つの要点／
   横4ステップの注文動線／左に見出しを置いた2×2の理由／中央スマホ＋左右3つのタグ／
   会計画面のスマホと決済サービスの2枚カード／ネイビーの横長CTA。
   グラデーションは不使用。見出しは .inner-page-title と同じ左寄せ（英字ラベルは使わない）。
   すべてのテキスト要素に専用クラスを付け、要素型セレクタは使わない
   （グローバルリセット *{font-size:16px} と詳細度で衝突させないため）。
   ========================================================================== */

:root{
	--qr-o:#0145f2;
	--qr-o-d:#0134c0;
	--qr-o-l:#8fb0ff;
	--qr-navy:#0b2472;
	--qr-tint:#f4f8ff;
	--qr-tint-2:#e8f0ff;
	--qr-ink:#22262e;
	--qr-gray:#666;
	--qr-gray-l:#99a3b3;
	--qr-line:#e4e8f0;
	--qr-shadow:0 16px 38px rgba(20,50,120,.10);
}

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

/* グローバルリセット（*{font-size:16px;font-weight:500}）対策：
   見出し内の <span class="qr-hl"> と、丸アイコン内の <i> は親のサイズ・太さを継承させる */
.qr-hero-title .qr-hl,.qr-link-title .qr-hl{font-size: inherit;font-weight: inherit;font-family: inherit;}
.qr-step-ico i{font-size: inherit;}

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

.qr-phone-sm{--pw: 194px;--sh: 384px;border-radius: 26px;padding: 8px;}
.qr-phone-sm::after{width: 54px;height: 4px;top: 3px;}
.qr-phone-sm .qr-screen{border-radius: 20px;}

/* 画面上部 */
/* ステータスバー */
.qr-status{display: flex;align-items: center;gap: 5px;padding: 9px 14px 5px;background: #fff;}
.qr-status-t{font-size: 9px;color: #4a5468;}
.qr-status-r{margin-left: auto;display: flex;align-items: center;gap: 3px;}
.qr-status-r u{display: block;width: 9px;height: 7px;border-radius: 1px;background: #c4cddd;text-decoration: none;}
.qr-status-r u:first-child{height: 4px;align-self: flex-end;}
.qr-status-r u:nth-child(2){height: 5px;align-self: flex-end;}
.qr-status-r u:nth-child(3){height: 6px;align-self: flex-end;background: #4a5468;}
.qr-scr-top{display: flex;align-items: center;gap: 8px;padding: 11px 14px 10px;background: var(--qr-o);}
.qr-scr-shop{font-size: 12px;color: #fff;flex: 1;min-width: 0;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;}
.qr-scr-ico{width: 20px;height: 20px;border: 1px solid rgba(255,255,255,.55);border-radius: 4px;flex: none;position: relative;}
.qr-scr-ico::before,.qr-scr-ico::after{content: '';position: absolute;background: rgba(255,255,255,.75);}
.qr-scr-ico::before{left: 4px;top: 8px;width: 10px;height: 2px;}
.qr-scr-ico::after{left: 4px;top: 5px;width: 10px;height: 2px;}

/* カテゴリのタブ */
.qr-scr-tabs{display: flex;gap: 4px;padding: 9px 10px 7px;border-bottom: 1px solid #eef2f9;}
.qr-tab{flex: 1;text-align: center;font-size: 9.5px;color: #7d8798;background: #f3f6fb;border-radius: 30px;padding: 5px 0;}
.qr-tab-on{background: var(--qr-tint-2);color: var(--qr-o);}

/* 料理リスト */
.qr-scr-body{flex: 1;min-height: 0;padding: 8px 10px;display: flex;flex-direction: column;gap: 7px;overflow: hidden;}
.qr-dish{display: flex;align-items: center;gap: 9px;padding: 7px;border: 1px solid #eaeff8;border-radius: 10px;background: #fff;}
.qr-dish-pic{position: relative;width: 38px;height: 38px;border-radius: 8px;flex: none;overflow: hidden;background: #eef3fb;}
.qr-dish-pic::before{content: '';position: absolute;left: 50%;top: 50%;width: 26px;height: 26px;border-radius: 50%;background: #fff;transform: translate(-50%,-50%);box-shadow: 0 1px 3px rgba(20,40,90,.10);}
.qr-dish-pic::after{content: '';position: absolute;left: 50%;top: 50%;width: 14px;height: 14px;border-radius: 50%;transform: translate(-50%,-50%);}
.qr-dish-pic-a{background: #fdf0e2;}.qr-dish-pic-a::after{background: #f3a35c;}
.qr-dish-pic-b{background: #eaf6e6;}.qr-dish-pic-b::after{background: #7cc46a;}
.qr-dish-pic-c{background: #fdeaea;}.qr-dish-pic-c::after{background: #e8796f;}
.qr-dish-pic-d{background: #fdf6dd;}.qr-dish-pic-d::after{background: #e5be45;}
.qr-dish-pic-e{background: #e9f0fd;}.qr-dish-pic-e::after{background: #5b90f5;}
.qr-dish-pic-f{background: #f1ebfd;}.qr-dish-pic-f::after{background: #9a7ae8;}
.qr-dish-box{flex: 1;min-width: 0;}
.qr-dish-name{display: block;font-size: 10.5px;color: var(--qr-ink);overflow: hidden;white-space: nowrap;text-overflow: ellipsis;}
.qr-dish-price{display: block;font-size: 9.5px;color: var(--qr-gray-l);padding-top: 3px;}
.qr-dish-add{position: relative;width: 20px;height: 20px;border-radius: 50%;background: var(--qr-o);flex: none;}
.qr-dish-add::before,.qr-dish-add::after{content: '';position: absolute;left: 50%;top: 50%;background: #fff;transform: translate(-50%,-50%);}
.qr-dish-add::before{width: 9px;height: 2px;}
.qr-dish-add::after{width: 2px;height: 9px;}

/* 下部のカート */
.qr-scr-cart{display: flex;align-items: center;gap: 8px;padding: 11px 12px;border-top: 1px solid #eef2f9;background: #fbfcfe;}
.qr-cart-num{width: 20px;height: 20px;border-radius: 50%;background: var(--qr-o);color: #fff;font-size: 10px;display: flex;align-items: center;justify-content: center;flex: none;}
.qr-cart-txt{flex: 1;min-width: 0;font-size: 10.5px;color: var(--qr-ink);}
.qr-cart-sum{font-size: 12px;color: var(--qr-ink);}

/* 会計画面 */
.qr-pay-total{padding: 18px 14px 12px;text-align: center;background: var(--qr-tint);}
.qr-pay-total-cap{display: block;font-size: 9.5px;color: var(--qr-gray-l);}
.qr-pay-total-val{display: block;font-size: 26px;color: var(--qr-ink);padding-top: 6px;letter-spacing: .01em;}
.qr-pay-total-yen{font-size: 15px;font-style: normal;color: var(--qr-o);padding-right: 2px;}
.qr-pay-lines{padding: 6px 13px;flex: 1;min-height: 0;}
.qr-pay-line{display: flex;align-items: center;padding: 8px 0;border-bottom: 1px dashed #eef2f9;}
.qr-pay-line-name{flex: 1;min-width: 0;font-size: 10.5px;color: var(--qr-gray);}
.qr-pay-line-val{font-size: 10.5px;color: var(--qr-ink);}
.qr-pay-line-sum .qr-pay-line-name{color: var(--qr-ink);}
.qr-pay-chip{margin: 0 13px 9px;border: 1px solid #c9dafd;background: #fff;border-radius: 8px;padding: 8px 11px;}
.qr-pay-chip-name{font-size: 10px;color: var(--qr-o);}
.qr-pay-btn{margin: 0 13px 14px;height: 34px;border-radius: 8px;background: var(--qr-o);color: #fff;font-size: 11.5px;display: flex;align-items: center;justify-content: center;}

/* ==========================================================================
   1. ヒーロー（淡いブルー）
   ========================================================================== */
.qr-hero{position: relative;overflow: hidden;background: #eff6ff}
.qr-hero-deco1{position: absolute;width: 520px;height: 520px;border: 66px solid rgba(1,69,242,.06);border-radius: 50%;top: -210px;right: -160px;}
.qr-hero-deco2{position: absolute;width: 160px;height: 160px;border-radius: 50%;background: rgba(143,176,255,.20);bottom: -60px;left: -50px;}
.qr-hero .page-content{position: relative;z-index: 1;}
.qr-hero .pos-crumb{color: #8a94a6;}
.qr-hero .pos-crumb a{color: #333a47;}
.qr-hero .pos-crumb i{color: #c8d0de;}

.qr-hero-grid{display: flex;align-items: center;gap: 44px;padding: 10px 0 40px;}
.qr-hero-txt{flex: 1;min-width: 0;}
.qr-hero-title{font-size: 42px;line-height: 1.46;color: var(--qr-ink);padding: 22px 0 8px;}
.qr-hero-title .qr-hl{color: var(--qr-o);}
.qr-hero-visual{width: 460px;flex: none;display: flex;justify-content: flex-end;}
.qr-phones{position: relative;display: flex;align-items: flex-end;padding-bottom: 24px;}
.qr-phones .qr-phone-sm{margin-left: -14px;margin-bottom: 36px;z-index: 0;}
.qr-phone-up{z-index: 2;}

/* ==========================================================================
   2. 導入文（大見出し）※見出しは共通 .inner-page-title（page.css）を使用
   ========================================================================== */

/* ==========================================================================
   3. お客様の注文動線（横4ステップ）
   ========================================================================== */
.qr-flow{background: #fff;padding: 0 0 50px;}
.qr-step-row{display: flex;align-items: flex-start;gap: 8px;padding-top: 8px;}
.qr-step{flex: 1;min-width: 0;text-align: center;padding: 0 6px;}
.qr-step-ico{width: 78px;height: 78px;margin: 0 auto 22px;border-radius: 50%;background: var(--qr-tint);border: 1px solid #dbe6f8;color: var(--qr-o);font-size: 30px;display: flex;align-items: center;justify-content: center;transition: .3s;}

.qr-step-ico i{color: #4a6fcc}
.qr-step:hover .qr-step-ico{background: var(--qr-tint-2);border-color: #c9dafd;box-shadow: 0 8px 10px rgba(1,69,242,.1);}
.qr-step-title{display: block;font-size: 19px;color: var(--qr-ink);padding-bottom: 10px;}
.qr-step-txt{display: block;font-size: 13.5px;color: var(--qr-gray);line-height: 1.9;text-align: left;}
.qr-step-link{flex: none;width: 34px;padding-top: 38px;}
.qr-step-link i{display: block;width: 100%;border-top: 2px dotted #cfe0ff;}

/* ==========================================================================
   4. 選ばれる4つの理由（2×2）
   ========================================================================== */
.qr-reasons{background: var(--qr-tint);padding: 0 0 88px;}
.qr-reason-wrap{display: flex;gap: 56px;align-items: flex-start;}
.qr-reason-grid{flex: 1;min-width: 0;display: grid;grid-template-columns: 1fr 1fr;gap: 18px;}
.qr-reason{background: #fff;border: 1px solid var(--qr-line);border-radius: 10px;padding: 26px 24px;transition: .3s;}
.qr-reason:hover{transform: translate(0,-4px);box-shadow: var(--qr-shadow);border-color: #c9dafd;}
.qr-reason-ico{width: 6px;height: 100%;border-radius: 10px 0 0 10px;display: block;position: absolute;top: 0;left: 0;}

.qr-reason-title{display: block;font-size: 18px;color: var(--qr-ink);padding-bottom: 9px;}
.qr-reason-txt{display: block;font-size: 13.5px;color: var(--qr-gray);line-height: 1.9;}

/* ==========================================================================
   5. 主な機能（中央のスマホ＋左右3つのタグ）
   ========================================================================== */
.qr-func{background: #fff;}
.qr-func-grid{display: flex;align-items: center;gap: 18px;}
.qr-func-side{flex: 1;min-width: 0;display: flex;flex-direction: column;gap: 28px;}
.qr-func-side-l{align-items: flex-end;}
.qr-func-side-r{align-items: flex-start;}
.qr-func-centre{flex: none;width: auto;display: flex;justify-content: center;}
.qr-func-tag{position: relative;display: flex;align-items: center;gap: 13px;width: 100%;max-width: 320px;background: #fff;border: 1px solid #dbe6f8;border-radius: 10px;padding: 15px 20px;transition: .3s;}
.qr-func-tag:hover{border-color: #c9dafd;box-shadow: var(--qr-shadow);transform: translate(0,-3px);}
.qr-func-tag-ico{display: block;width: 9px;height: 9px;border-radius: 50%;background: var(--qr-o);flex: none;}
.qr-func-tag-txt{flex: 1;min-width: 0;font-size: 14.5px;color: var(--qr-ink);line-height: 1.55;}
.qr-func-tag::after{content: '';position: absolute;top: 50%;width: 19px;border-top: 2px dashed #bcd2fb;transform: translate(0,-50%);}
.qr-func-side-l .qr-func-tag::after{right: -20px;}
.qr-func-side-r .qr-func-tag::after{left: -20px;}

/* ==========================================================================
   6. 連携サービス（会計画面＋決済の2枚カード）
   ========================================================================== */
.qr-link{padding: 0 0 88px;}
.qr-link-wrap{display: flex;gap: 50px;align-items: center;padding-top: 50px;}
.qr-link-visual{flex: none;}
.qr-link-txt{flex: 1;min-width: 0;}
.qr-link-title{font-size: 28px;color: var(--qr-ink);line-height: 1.62;}
.qr-link-title .qr-hl{color: var(--qr-o);}
.qr-link-desc{display: block;color: var(--qr-gray);line-height: 1.95;padding: 16px 0 0;}
.qr-pay-row{display: grid;grid-template-columns: 1fr 1fr;gap: 18px;padding: 28px 0 0;}
.qr-pay-card{background: #fff;border: 1px solid var(--qr-line);border-radius: 10px;padding: 22px 22px 20px;}
.qr-pay-card-head{display: flex;align-items: center;gap: 10px;padding-bottom: 12px;}
.qr-pay-card-ico{width: 34px;height: 34px;border-radius: 8px;background: var(--qr-tint-2);color: var(--qr-o);font-size: 16px;display: flex;align-items: center;justify-content: center;flex: none;}

.qr-pay-card-ico .iconfont{color: #0145f2;}

.qr-pay-card-title{font-size: 16px;color: var(--qr-ink);}
.qr-pay-card-txt{display: block;font-size: 13px;color: var(--qr-gray);line-height: 1.85;}
.qr-pay-card-foot{display: flex;align-items: baseline;gap: 8px;border-top: 1px dashed var(--qr-line);margin-top: 16px;padding-top: 12px;}
.qr-pay-card-cap{color: var(--qr-gray-l);}
.qr-pay-card-rate{margin-left: auto;color: var(--qr-o);}
.qr-link-note{display: flex;align-items: flex-start;gap: 10px;padding: 22px 0 0;}
.qr-link-note-ico{color: var(--qr-o);font-size: 14px;flex: none;padding-top: 3px;}
.qr-link-note-txt{font-size: 13px;color: #5a6474;line-height: 1.9;}

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

/* ---------- 1280px以下：小さめのノートPC ---------- */
@media screen and (max-width: 1280px){
	.qr-hero-title{font-size: 36px}
	.qr-hero-grid{gap: 32px;padding: 24px 0 64px}
	.qr-hero-visual{width: 410px}
	.qr-phone{--pw: 216px;--sh: 424px}
	.qr-phone-sm{--pw: 178px;--sh: 352px}
	.qr-intro{padding: 70px 0 12px}
	.qr-flow,.qr-reasons,.qr-func,.qr-link{padding-bottom: 70px}
	.qr-step-ico{width: 74px;height: 74px;font-size: 27px;margin-bottom: 18px}
	.qr-step-title{font-size: 17px}
	.qr-reason-wrap{gap: 40px}
	.qr-reason{padding: 22px 20px}
	.qr-reason-title{font-size: 16.5px}
	.qr-func-tag{padding: 12px 17px}
	.qr-func-side{gap: 22px}
	.qr-func-tag-txt{font-size: 13px}
	.qr-link-wrap{gap: 40px}
	.qr-link-title{font-size: 25px}
	.qr-link .qr-phone{--pw: 208px;--sh: 408px}
}

/* ---------- 1024px以下：タブレット横 ---------- */
@media screen and (max-width: 1024px){
	.qr-hero-title{font-size: 32px}
	.qr-hero-visual{width: 350px}
	.qr-phone{--pw: 196px;--sh: 424px}
	.qr-phone-sm{--pw: 162px;--sh: 352px}
	/* 注文動線：2×2に折り返す */
	.qr-step-row{flex-wrap: wrap;gap: 30px 8px}
	.qr-step{flex: 0 0 calc(50% - 4px);}
	.qr-step-link{display: none}
	/* 主な機能：タグをスマホの下へ */
	.qr-func-grid{flex-direction: column;align-items: stretch;gap: 26px}
	.qr-func-centre{width: 100%;order: -1}
	.qr-func-side{flex-direction: row;gap: 14px;align-items: stretch}
	.qr-func-side .qr-func-tag{flex: 1;min-width: 0;max-width: none}
	.qr-func-tag::after{display: none}
	/* 理由：1カラムに */
	.qr-reason-wrap{flex-direction: column;gap: 26px}
	/* 連携サービス：縦積み */
	.qr-link-wrap{flex-direction: column;align-items: stretch;gap: 32px}
	.qr-link-visual{display: flex;justify-content: center}
}

/* ---------- 900px以下：タブレット縦 ---------- */
@media screen and (max-width: 900px){
	.qr-hero-grid{flex-direction: column;align-items: flex-start;gap: 38px;padding: 22px 0 60px}
	.qr-hero-visual{width: 100%;justify-content: center}
	.qr-phones{padding-bottom: 0}
	.qr-phone{--pw: 226px;--sh: 442px}
	.qr-phone-sm{--pw: 184px;--sh: 366px}
	.qr-phones .qr-phone-sm{margin-left: -40px;margin-bottom: 30px}
	.qr-reason-grid{gap: 16px}
}

/* ---------- 768px以下：スマホ横・小タブレット ---------- */
@media screen and (max-width: 768px){
	.qr-hero-title{font-size: 26px}
	.qr-intro{padding: 12px 0 10px}
	.qr-flow,.qr-reasons,.qr-func,.qr-link{padding-bottom: 10px}
	.qr-step-ico{width: 64px;height: 64px;font-size: 23px;margin-bottom: 15px}
	.qr-step-title{font-size: 16px}
	.qr-step-txt{font-size: 13px}
	.qr-reason-grid{grid-template-columns: 1fr;gap: 14px}
	.qr-reason{display: flex;gap: 16px;align-items: flex-start;padding: 20px;overflow: hidden;}
	.qr-reason-ico{margin-bottom: 0;flex: none}
	.qr-reason-body{flex: 1;min-width: 0}
	.qr-pay-row{grid-template-columns: 1fr;gap: 14px}
	.qr-link-title{font-size: 21px}
}

/* ---------- 480px以下：スマホ縦 ---------- */
@media screen and (max-width: 480px){
	.qr-hero-title{font-size: 22px;line-height: 1.5}
	.qr-phones{flex-direction: column;align-items: center}
	.qr-phone{--pw: 220px;--sh: 432px}
	.qr-phone-sm{display: none}
	.qr-scr-body{gap: 6px}
	.qr-step-row{gap: 24px 4px}
	.qr-step-ico{width: 56px;height: 56px;font-size: 20px}
	.qr-step-title{font-size: 15px}
	.qr-step-txt{font-size: 12.5px}
	.qr-reason{flex-direction: column;gap: 8px;padding: 18px}
	.qr-reason-title{font-size: 16px}
	.qr-reason-txt{font-size: 12.5px}
	.qr-func-side{flex-direction: column;gap: 12px}
	.qr-func-tag{padding: 12px 16px}
	.qr-func-tag-txt{font-size: 13px}
	.qr-link .qr-phone{--pw: 200px;--sh: 396px}
	.qr-link-title{font-size: 19px}
	.qr-link-desc{font-size: 13.5px}
	.qr-pay-card{padding: 18px 16px}
	.qr-pay-card-rate{font-size: 17px}
}