/* ==========================================================================
   tablet.html 専用スタイル（タブレットオーダー / TTO）
   pos.html / handy.html / kds.html / qr.html とは別デザイン。青基調は pos.html と共通（#0145f2 系）。
   特徴：淡ブルーのヒーローに横長タブレット／白地の左寄せ見出し＋罫線区切りの3要点／
   番号リスト形式の4つの理由／中央タブレットに①②③のピン＋下段に凡例／
   端末画面つきの3ステップ注文動線／左テキスト＋右ブルー面の分割CTA。
   グラデーションは不使用。見出しは .inner-page-title と同じ左寄せ（英字ラベルは使わない）。
   すべてのテキスト要素に専用クラスを付け、要素型セレクタは使わない
   （グローバルリセット *{font-size:16px;font-weight:500} と詳細度で衝突させないため）。
   ========================================================================== */

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

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

/* グローバルリセット対策：見出し内の強調と丸番号の中身は親のサイズ・太さを継承させる */
.tt-hero-title .tt-hl,.tt-sec-title .tt-hl{font-size: inherit;font-weight: inherit;font-family: inherit;}
.tt-pin,.tt-reason-no,.tt-legend-no{font-family: inherit;}

/* ---------- セクション見出し（pos.html の .inner-page-title と同型・左寄せ） ---------- */
.tt-sec-head{padding: 40px 0 26px;line-height: 1.6;text-align: left;}
.tt-sec-title{font-size: 38px;color: #333;line-height: 1.6;}
.tt-sec-title .tt-hl{color: var(--tt-o);}
.tt-sec-lead{display: block;color: #777;font-size: 16px;line-height: 1.8;}

/* ==========================================================================
   横長タブレットのモックアップ（CSSのみで描画）
   ========================================================================== */
.tt-tab{position: relative;width: 100%;background: #1c2130;border-radius: 20px;padding: 13px;box-shadow: 0 30px 62px rgba(20,40,90,.1),0 8px 18px rgba(20,40,90,.05);}
.tt-tab::after{content: '';position: absolute;left: 50%;bottom: 4px;width: 46px;height: 4px;border-radius: 4px;background: rgba(255,255,255,.16);transform: translate(-50%,0);}
.tt-tab-scr{display: flex;flex-direction: column;background: #fff;border-radius: 10px;overflow: hidden;}

/* 画面上部：店名＋検索＋言語 */
.tt-tab-top{display: flex;align-items: center;gap: 10px;background: var(--tt-o);padding: 9px 12px;}
.tt-tab-shop{font-size: 11.5px;color: #fff;flex: none;}
.tt-tab-search{flex: 1;min-width: 0;height: 22px;border-radius: 30px;background: rgba(255,255,255,.18);color: #dce7ff;font-size: 9.5px;line-height: 22px;padding: 0 12px;overflow: hidden;white-space: nowrap;}
.tt-tab-lang{flex: none;font-size: 9.5px;color: #fff;border: 1px solid rgba(255,255,255,.5);border-radius: 4px;padding: 3px 8px;}

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

/* 本体：左メニュー一覧／右ご注文内容 */
.tt-tab-main{display: flex;align-items: stretch;}
.tt-menu{flex: 1;min-width: 0;display: grid;grid-template-columns: repeat(3,1fr);gap: 7px;padding: 10px 11px;}
.tt-dish{position: relative;border: 1px solid #eaeff8;border-radius: 8px;padding: 6px 6px 20px;background: #fff;overflow: hidden;}
.tt-photo{position: relative;width: 100%;height: 44px;border-radius: 6px;background: var(--tt-tint-2);overflow: hidden;}
.tt-photo::before{content: '';position: absolute;left: 50%;top: 54%;width: 32px;height: 32px;border-radius: 50%;background: #fff;box-shadow: inset 0 0 0 4px #dfeaff;transform: translate(-50%,-50%);}
.tt-photo::after{content: '';position: absolute;left: 50%;top: 54%;width: 17px;height: 17px;border-radius: 50%;background: var(--tt-o-l);opacity: .5;transform: translate(-50%,-50%);}
.tt-dish:nth-child(2n) .tt-photo::before{width: 27px;height: 27px;}
.tt-dish:nth-child(3n) .tt-photo::before{width: 35px;height: 35px;}
.tt-dish:nth-child(3n) .tt-photo::after{width: 21px;height: 12px;border-radius: 3px;}
.tt-dish-name{display: block;font-size: 9.5px;color: var(--tt-ink);padding: 6px 1px 2px;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;}
.tt-dish-price{display: block;font-size: 9.5px;color: var(--tt-o);padding-left: 1px;}
.tt-dish-add{position: absolute;right: 5px;bottom: 5px;width: 16px;height: 16px;border-radius: 50%;background: var(--tt-o);color: #fff;font-size: 11px;line-height: 16px;text-align: center;}

.tt-cart{width: 36%;flex: none;border-left: 1px solid #e9eef7;background: #fbfcfe;padding: 10px 11px;display: flex;flex-direction: column;}
.tt-cart-title{display: block;font-size: 10.5px;color: var(--tt-ink);padding-bottom: 8px;border-bottom: 1px solid #eef2f9;}
.tt-cart-row{display: flex;align-items: center;gap: 6px;padding: 6px 0;border-bottom: 1px dashed #eef2f9;}
.tt-cart-row span{flex: 1;min-width: 0;font-size: 9.5px;color: #5a6474;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;}
.tt-cart-row b{font-size: 9.5px;color: var(--tt-ink);}
.tt-cart-row b::before{content: '×';font-size: 8px;color: var(--tt-gray-l);padding-right: 1px;}
.tt-cart-total{display: flex;align-items: baseline;gap: 6px;padding: 9px 0 8px;margin-top: auto;}
.tt-cart-total span{font-size: 10px;color: var(--tt-gray);}
.tt-cart-total b{margin-left: auto;font-size: 15px;color: var(--tt-ink);}
.tt-cart-btn{display: block;height: 28px;border-radius: 6px;background: var(--tt-o);color: #fff;font-size: 10.5px;line-height: 28px;text-align: center;}

/* ---------- 大きいタブレット：料理詳細の画面（主な機能で使用） ---------- */
.tt-tab-lg{padding: 15px;border-radius: 22px;}
.tt-tab-lg .tt-tab-scr{border-radius: 12px;}
.tt-lg-top{display: flex;align-items: center;gap: 10px;background: #cdd3e3;padding: 11px 16px;}
.tt-lg-top-name{flex: 1;min-width: 0;font-size: 14px;}
.tt-lg-top-back{flex: none;width: 20px;height: 20px;border: 1px solid #888;border-radius: 50%;position: relative;}
.tt-lg-top-back::before{content: '';position: absolute;left: 7px;top: 6px;width: 6px;height: 6px;border-left: 1.5px solid #333;border-bottom: 1.5px solid #333;transform: rotate(45deg);}
.tt-lg-body{display: flex;align-items: stretch;}
.tt-lg-left{flex: 1;min-width: 0;padding: 14px 16px;}
.tt-lg-photo{position: relative;width: 100%;height: 104px;border-radius: 9px;background: var(--tt-tint-2);overflow: hidden;}
.tt-lg-photo::before{content: '';position: absolute;left: 50%;top: 54%;width: 74px;height: 74px;border-radius: 50%;background: #fff;box-shadow: inset 0 0 0 7px #dfeaff;transform: translate(-50%,-50%);}
.tt-lg-photo::after{content: '';position: absolute;left: 50%;top: 54%;width: 42px;height: 42px;border-radius: 50%;background: var(--tt-o-l);opacity: .5;transform: translate(-50%,-50%);}
.tt-lg-name{display: block;font-size: 16px;color: var(--tt-ink);padding: 12px 0 6px;}
.tt-lg-desc{display: block;font-size: 10.5px;color: var(--tt-gray);line-height: 1.85;}
.tt-lg-marks{display: flex;gap: 6px;padding: 10px 0 0;flex-wrap: wrap;}
.tt-lg-mark{display: block;font-size: 9px;color: var(--tt-o);background: var(--tt-tint-2);border-radius: 3px;padding: 4px 9px;}

.tt-lg-right{width: 44%;flex: none;border-left: 1px solid #eef2f9;background: #fbfcfe;padding: 14px 16px;display: flex;flex-direction: column;}
.tt-opt-label{display: block;font-size: 10.5px;color: var(--tt-ink);padding-bottom: 7px;}
.tt-opt-chips{display: flex;gap: 6px;padding-bottom: 13px;flex-wrap: wrap;}
.tt-chip{display: flex;align-items: center;gap: 3px;font-size: 9.5px;color: #5a6474;background: #fff;border: 1px solid #e2e9f6;border-radius: 30px;padding: 5px 11px;}
.tt-chip b{font-size: 9.5px;color: var(--tt-o);}
.tt-chip.is-on{background: var(--tt-o);border-color: var(--tt-o);color: #fff;}
.tt-chip.is-on b{color: #fff;}

.tt-lg-foot{display: flex;align-items: center;gap: 12px;border-top: 1px solid #e9eef7;padding: 12px 16px;}
.tt-lg-total{flex: 1;min-width: 0;}
.tt-lg-total span{display: block;font-size: 9.5px;color: var(--tt-gray);}
.tt-lg-total b{display: block;font-size: 20px;color: var(--tt-ink);line-height: 1.35;}
.tt-lg-btns{flex: none;display: flex;gap: 8px;}
.tt-lg-btn{display: block;font-size: 11px;border-radius: 6px;padding: 9px 18px;}
.tt-lg-btn-sub{background: #fff;color: var(--tt-o);border: 1px solid #c9dafd;}
.tt-lg-btn-main{background: var(--tt-o);color: #fff;}

/* ---------- 小さいタブレット（注文動線の3ステップで使用） ---------- */
.tt-mini{position: relative;display: flex;width: 100%;aspect-ratio: 4 / 3;background: #1c2130;border-radius: 13px;padding: 7px;box-shadow: 0 16px 32px rgba(20,40,90,.15);overflow: hidden;}
.tt-mini-scr{flex: 1;display: flex;flex-direction: column;min-height: 0;background: #fff;border-radius: 7px;overflow: hidden;}
.tt-mini-top{flex: none;display: flex;align-items: center;gap: 6px;background: var(--tt-o);padding: 6px 8px;}
.tt-mini-top span{font-size: 8px;color: #fff;}
.tt-mini-top u{display: block;width: 26px;height: 8px;border-radius: 30px;background: rgba(255,255,255,.22);margin-left: auto;text-decoration: none;}
/* ---------- ご注文ミニ：左カテゴリ＋中央メニュー＋右カート（参考レイアウト） ---------- */
.tt-mini-menu-body{display: flex;flex: 1;min-height: 0;}
.tt-mini-menu-nav{flex: none;width: 19%;display: flex;flex-direction: column;gap: 4px;padding: 6px 5px;background: #f6f9ff;border-right: 1px solid #eef2f9;}
.tt-mini-menu-cat{flex: none;height: 8px;border-radius: 2px;background: #e0e9fb;}
.tt-mini-menu-cat.is-on{background: var(--tt-o);}
.tt-mini-menu-list{flex: 1;min-width: 0;display: grid;grid-template-columns: repeat(3,1fr);grid-auto-rows: 1fr;gap: 4px;padding: 6px;align-content: stretch;}
.tt-mini-menu-card{display: flex;flex-direction: column;gap: 2px;min-height: 0;min-width: 0;}
.tt-mini-menu-pic{flex: 1;min-height: 12px;border-radius: 3px;background: var(--tt-tint-2);position: relative;}
.tt-mini-menu-pic::after{content: '';position: absolute;left: 50%;top: 50%;width: 8px;height: 8px;border-radius: 50%;background: #fff;transform: translate(-50%,-50%);}
.tt-mini-menu-nm{flex: none;height: 3px;border-radius: 2px;background: #dde7f9;}
.tt-mini-menu-pr{flex: none;height: 3px;width: 58%;border-radius: 2px;background: #a9c4f9;}
.tt-mini-menu-cart{flex: none;width: 27%;display: flex;flex-direction: column;gap: 4px;padding: 6px 5px;background: #fbfdff;border-left: 1px solid #eef2f9;}
.tt-mini-menu-cart-h{flex: none;height: 6px;width: 74%;border-radius: 2px;background: #c6d8f8;}
.tt-mini-menu-cart-r{flex: none;height: 4px;border-radius: 2px;background: #e6eefc;}
.tt-mini-menu-cart-t{flex: none;height: 6px;border-radius: 2px;background: #c6d8f8;margin-top: auto;}
.tt-mini-menu-cart-btn{flex: none;height: 10px;border-radius: 3px;background: var(--tt-o);}
.tt-mini-row{display: flex;align-items: center;gap: 6px;padding: 6px 8px;border-bottom: 1px solid #eef2f9;flex: none;}
.tt-mini-row:last-child{border-bottom: 0;}
.tt-mini-row b{flex: 1;min-width: 0;font-size: 8.5px;color: var(--tt-ink);}
.tt-mini-row i{font-size: 8.5px;color: var(--tt-gray-l);}
.tt-mini-detail-img{flex: 1;min-height: 16px;background: var(--tt-tint-2);position: relative;}
.tt-mini-detail-img::after{content: '';position: absolute;left: 50%;top: 52%;width: 22px;height: 22px;border-radius: 50%;background: #fff;transform: translate(-50%,-50%);}
.tt-mini-bill .tt-mini-row{flex: 1;min-height: 0;}
.tt-mini-btn{display: block;margin: auto 8px 8px;height: 20px;border-radius: 4px;background: var(--tt-o);color: #fff;font-size: 8.5px;line-height: 20px;text-align: center;}
.tt-mini-qr{flex: none;width: 30px;height: 30px;margin: 2px auto 6px;background: #fff;border: 1px solid #dbe3f0;border-radius: 3px;position: relative;}
.tt-mini-qr::before{content: '';position: absolute;left: 50%;top: 50%;width: 14px;height: 14px;border: 3px solid var(--tt-o);border-radius: 2px;transform: translate(-50%,-50%);}

/* ==========================================================================
   1. ヒーロー
   ========================================================================== */
.tt-hero{position: relative;overflow: hidden;background: var(--tt-tint);}
.tt-hero-deco1{position: absolute;width: 560px;height: 560px;border: 70px solid rgba(1,69,242,.06);border-radius: 50%;top: -230px;right: -170px;}
.tt-hero-deco2{position: absolute;width: 170px;height: 170px;border-radius: 50%;background: rgba(143,176,255,.20);bottom: -70px;left: -55px;}
.tt-hero .page-content{position: relative;z-index: 1;}
.tt-hero .pos-crumb{padding-top: 22px;color: #8a94a6;}
.tt-hero .pos-crumb a{color: #333a47;}
.tt-hero .pos-crumb i{color: #c8d0de;}

.tt-hero-grid{display: flex;align-items: center;gap: 40px;padding: 22px 0 74px;}
.tt-hero-txt{flex: 1;min-width: 0;}
.tt-hero-title{font-size: 42px;line-height: 1.46;color: var(--tt-ink);padding: 20px 0 0;}
.tt-hero-title .tt-hl{color: var(--tt-o);}
.tt-hero-sub{font-size: 20px;color: #333a47;line-height: 1.7;padding: 14px 0 0;}
.tt-hero-desc{color: var(--tt-gray);line-height: 1.95;padding: 14px 0 0;max-width: 660px;}

.tt-hero-visual{width: 512px;flex: none;padding: 30px;}
.tt-hero-visual .tt-tab{padding: 10px;border-radius: 14px;}
.tt-hero-visual .tt-tab-scr{border-radius: 7px;}

/* ==========================================================================
   2. 導入（誰でも簡単に操作でき、すぐに始められる）
   ========================================================================== */
.tt-intro{background: #fff;}
.tt-intro-strip{display: flex;flex-wrap: wrap;margin: 20px 0 0;border-top: 1px solid var(--tt-line);border-bottom: 1px solid var(--tt-line);}
.tt-intro-item{flex: 1;min-width: 0;border-left: 1px solid var(--tt-line);padding: 30px 30px 28px;}
.tt-intro-item:first-child{border-left: 0;padding-left: 0;}
.tt-intro-item-title{display: block;font-size: 19px;color: var(--tt-ink);padding-bottom: 10px;line-height: 1.6;}
.tt-intro-item-txt{display: block;color: var(--tt-gray);line-height: 1.9;}

/* ==========================================================================
   3. タブレットオーダーが選ばれる4つの理由
   ========================================================================== */
.tt-reason-list{border-top: 1px dotted #dbe6f8;margin-bottom: 50px;}
.tt-reason-row{display: flex;align-items: flex-start;gap: 26px;padding: 30px 26px;border-bottom: 1px dotted #dbe6f8;transition: .3s;}
.tt-reason-row:hover{background: #fff;box-shadow: var(--tt-shadow);}
.tt-reason-no{flex: none;width: 46px;height: 46px;border-radius: 50%;background: #cdd3e3;color: #fff;font-size: 20px;display: flex;align-items: center;justify-content: center;}
.tt-reason-title{flex: none;width: 300px;font-size: 19px;color: var(--tt-ink);line-height: 1.65;padding-top: 8px;}
.tt-reason-txt{flex: 1;min-width: 0;font-size: 15px;color: var(--tt-gray);line-height: 1.95;padding-top: 10px;}

/* ==========================================================================
   4. 主な機能（中央のタブレット＋①②③のピン＋下段の凡例）
   ========================================================================== */
.tt-func{background: var(--tt-tint);padding: 0 0 50px;}
.tt-func-stage{display: flex;justify-content: center;padding: 16px 0 0;}
.tt-tab-wrap{position: relative;width: 100%;max-width: 740px;}
.tt-pin{position: absolute;z-index: 2;width: 28px;height: 28px;border-radius: 50%;background: var(--tt-o);color: #fff;font-size: 13px;line-height: 28px;text-align: center;box-shadow: 0 0 0 4px rgba(1,69,242,.16),0 6px 14px rgba(1,69,242,.28);}
.tt-pin::after{content: '';position: absolute;top: 50%;width: 40px;height: 2px;background: var(--tt-o);opacity: .42;}
.tt-pin-1{left: -44px;top: 24%;}
.tt-pin-2{left: -34px;bottom: 20%;}
.tt-pin-3{right: -34px;top: 50%;}
.tt-pin-1::after,.tt-pin-2::after{left: 100%;}
.tt-pin-3::after{right: 100%;}

.tt-legend{display: grid;grid-template-columns: repeat(3,1fr);gap: 22px;padding: 40px 0 0;}
.tt-legend-item{display: flex;gap: 16px;align-items: flex-start;padding: 24px 24px 22px;background: rgba(255, 255, 255, .7);border: 1px solid #dbe6f8;border-radius: 10px;transition: .3s;}
.tt-legend-item:hover{border-color: #c9dafd;box-shadow: var(--tt-shadow);transform: translate(0,-4px);}
.tt-legend-no{flex: none;width: 32px;height: 32px;border-radius: 50%;color: #fff;font-size: 18px;line-height: 32px;text-align: center;border: 1px solid #0145f2;color: #0145f2;}
.tt-legend-body{flex: 1;min-width: 0;}
.tt-legend-title{display: block;font-size: 16.5px;color: var(--tt-ink);line-height: 1.6;padding-bottom: 9px;}
.tt-legend-txt{display: block;color: var(--tt-gray);line-height: 1.9;}

/* ==========================================================================
   5. お客様の注文動線（端末画面つきの3ステップ）
   ========================================================================== */
.tt-flow{padding-bottom: 50px;}
.tt-flow-row{display: flex;align-items: stretch;gap: 18px;padding: 8px 0 0;}
.tt-step{flex: 1;min-width: 0;display: flex;flex-direction: column;background: #fff;border: 1px solid var(--tt-line);border-radius: 12px;padding: 26px 24px 24px;transition: .3s;}
.tt-step:hover{transform: translate(0,-4px);box-shadow: var(--tt-shadow);border-color: #c9dafd;}
.tt-step-label{display:block;font-size: 20px;color: var(--tt-ink);text-align: center;padding-bottom: 18px;}
.tt-step-screen{width: 78%;max-width: 300px;margin: 0 auto;}
.tt-step-txt{display: block;color: var(--tt-gray);line-height: 1.6;padding: 20px 0 0;text-align: center;}
.tt-arrow{flex: none;align-self: center;width: 0;height: 0;border-top: 10px solid transparent;border-bottom: 10px solid transparent;border-left: 13px solid var(--tt-o-l);}

/* ==========================================================================
   1280px以下
   ========================================================================== */
@media screen and (max-width: 1280px){
	.tt-hero-title{font-size: 38px}
	.tt-hero-visual{width: 440px;padding: 24px}
	.tt-hero-desc{max-width: 520px}
	.tt-reason-title{width: 260px}
}

/* ==========================================================================
   1024px以下
   ========================================================================== */
@media screen and (max-width: 1024px){
	.tt-sec-head{padding: 34px 0 22px}
	.tt-sec-title{font-size: 30px}
	.tt-hero-grid{flex-wrap: wrap;gap: 34px;padding-bottom: 62px}
	.tt-hero-txt{flex: none;width: 100%}
	.tt-hero-desc{max-width: 100%}
	.tt-hero-visual{width: 100%;max-width: 640px;margin: 0 auto;padding: 22px}
	.tt-intro{padding-top: 70px}
	.tt-intro-item-title{font-size: 17.5px}
	.tt-func,.tt-flow{padding-bottom: 70px}
	.tt-reason-row{gap: 20px;padding: 26px 20px}
	.tt-reason-title{width: 220px;font-size: 17.5px}
	.tt-reason-txt{font-size: 13.5px}
	.tt-legend{grid-template-columns: repeat(2,1fr);gap: 18px}
	.tt-legend-item{padding: 22px 20px}
	.tt-flow-row{flex-wrap: wrap;gap: 16px}
	.tt-step{flex: none;width: calc(50% - 8px)}
	.tt-arrow{display: none}
	.tt-step-screen{width: 62%}
}

/* ==========================================================================
   900px以下
   ========================================================================== */
@media screen and (max-width: 900px){
	.tt-hero-title{font-size: 32px}
	.tt-hero-sub{font-size: 16.5px}
	.tt-legend-title{font-size: 15.5px}
	.tt-step{padding: 22px 20px 20px}
	.tt-step-label{font-size: 18px;padding-bottom: 15px}
	.tt-step-screen{width: 70%}
	/* ①②③のピン：タブレットが画面幅いっぱいになると外に置く余地がなく、
	   右へのはみ出し＆左ピンが画面外に落ちて見えなくなるため内側へ移して接続線を隠す */
	.tt-pin-1{left: 28px;top: 22%}
	.tt-pin-2{left: 208px;bottom: 18%}
	.tt-pin-3{right: 28px;top: 46%}
	.tt-pin::after{display: none}
}

/* ==========================================================================
   768px以下
   ========================================================================== */
@media screen and (max-width: 768px){
	.tt-sec-head{padding: 28px 0 18px}
	.tt-sec-title{font-size: 26px}
	.tt-sec-lead{font-size: 14.5px}
	.tt-hero .pos-crumb{padding-top: 18px}
	.tt-hero-grid{gap: 26px;padding: 18px 0 50px}
	.tt-hero-title{font-size: 27px;padding-top: 16px}
	.tt-hero-sub{font-size: 15.5px}
	.tt-hero-desc{font-size: 14px}
	.tt-hero-visual{padding: 16px;border-radius: 18px}
	.tt-tab{padding: 9px;border-radius: 15px}
	.tt-tab-tabs{gap: 4px;padding: 7px 9px}
	.tt-tab-item{font-size: 9px}
	.tt-menu{grid-template-columns: repeat(2,1fr)}
	.tt-cart{padding: 9px}
	.tt-intro{padding-top: 12px}
	.tt-intro-strip{margin-top: 0}
	.tt-intro-item-txt{padding-bottom: 16px;}
	.tt-intro-item{flex: none;width: 100%;padding: 22px 0 0;border-left: 0;border-top: 1px solid var(--tt-line);}
	.tt-intro-item:first-child{border-top: 0}
	.tt-intro-item-title{font-size: 16.5px}
	.tt-func,.tt-flow{padding-bottom: 58px}
	.tt-reason-row{flex-direction: column;gap: 4px;padding: 24px 18px}
	.tt-reason-no{width: 44px;height: 44px;font-size: 15px}
	.tt-reason-title{width: 100%;padding-top: 0;font-size: 17px}
	.tt-reason-txt{padding-top: 0;font-size: 13px}
	.tt-legend{grid-template-columns: 1fr;gap: 14px}
	.tt-legend-title{font-size: 15.5px}
	.tt-step{width: 100%}
	.tt-step-screen{width: 46%}
	.tt-mini{padding: 5px;border-radius: 10px}
	.tt-mini-scr{border-radius: 5px}
	.tt-mini-top{gap: 4px;padding: 5px 7px}
	.tt-mini-top span{font-size: 7.5px}
	.tt-mini-top u{width: 22px;height: 7px}
	.tt-mini-menu-nav{gap: 3px;padding: 5px 4px}
	.tt-mini-menu-cat{height: 6px}
	.tt-mini-menu-list{gap: 3px;padding: 5px}
	.tt-mini-menu-pic::after{width: 6px;height: 6px}
	.tt-mini-menu-cart{gap: 3px;padding: 5px 4px}
	.tt-mini-menu-cart-h{height: 5px}
	.tt-mini-menu-cart-t{height: 5px}
	.tt-mini-menu-cart-btn{height: 8px}
	.tt-mini-row{gap: 5px;padding: 4px 7px}
	.tt-mini-row b,.tt-mini-row i{font-size: 7.5px}
	.tt-mini-detail-img{min-height: 20px}
	.tt-mini-detail-img::after{width: 18px;height: 18px}
	.tt-mini-btn{height: 17px;line-height: 17px;font-size: 7.5px;margin: auto 7px 7px}
	.tt-mini-qr{width: 26px;height: 26px}
	.tt-mini-qr::before{width: 12px;height: 12px;border-width: 2px}
	.tt-lg-body{flex-direction: column}
	.tt-lg-right{width: 100%;border-left: 0;border-top: 1px solid #eef2f9}
}

/* ==========================================================================
   480px以下
   ========================================================================== */
@media screen and (max-width: 480px){
	.tt-sec-title{font-size: 22px}
	.tt-hero-title{font-size: 23px}
	.tt-hero-sub{font-size: 14.5px}
	.tt-hero-visual{padding: 12px;border-radius: 14px}
	.tt-tab{padding: 7px;border-radius: 12px}
	.tt-tab-scr{border-radius: 6px}
	.tt-tab-shop{font-size: 10px}
	.tt-tab-search{font-size: 8.5px;height: 18px;line-height: 18px;padding: 0 8px}
	.tt-tab-lang{font-size: 8.5px;padding: 2px 6px}
	.tt-dish{padding: 5px 5px 17px}
	.tt-photo{height: 34px}
	.tt-photo::before{width: 24px;height: 24px;box-shadow: inset 0 0 0 3px #dfeaff}
	.tt-photo::after{width: 13px;height: 13px}
	.tt-dish-name,.tt-dish-price{font-size: 8.5px}
	.tt-cart-title{font-size: 9.5px}
	.tt-cart-row span,.tt-cart-row b{font-size: 8.5px}
	.tt-cart-total b{font-size: 13px}
	.tt-cart-btn{height: 24px;font-size: 9.5px;line-height: 24px}
	.tt-intro-item-title{font-size: 15.5px}
	.tt-reason-title{font-size: 16px}
	.tt-legend-item{flex-direction: column;gap: 12px;padding: 20px 18px}
	.tt-legend-title{font-size: 15px;padding-bottom: 7px}
	.tt-step-screen{width: 62%}
	.tt-step-label{font-size: 17px}
	.tt-step-txt{font-size: 13px;padding-top: 16px}
	.tt-pin{width: 24px;height: 24px;font-size: 12px;line-height: 24px}
	.tt-lg-top-name{font-size: 12px}
	.tt-lg-name{font-size: 14px}
	.tt-lg-photo{height: 78px}
	.tt-lg-photo::before{width: 54px;height: 54px;box-shadow: inset 0 0 0 5px #dfeaff}
	.tt-lg-photo::after{width: 30px;height: 30px}
	.tt-lg-total b{font-size: 17px}
	.tt-lg-btn{padding: 8px 13px;font-size: 10px}
}