@charset "utf-8";
@import url("https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Zen+Antique&family=Zen+Kaku+Gothic+New:wght@400;700;900&display=swap");

/* ===========================================================
   グルメ特価市 — 特設ページ用CSS（MakeShop設置用）
   すべての指定を #tokkaichi 配下に限定しているため、
   ショップテンプレート側のデザインには影響しません。
   色を変えたいときは、下の :root の値だけを書き換えてください。
   =========================================================== */

#tokkaichi{
  --tk-ink:        #2B1614;   /* 本文の墨色 */
  --tk-ink-soft:   #7A5A4C;   /* 補足文 */
  --tk-paper:      #FFF7EC;   /* 背景の生成り */
  --tk-card:       #FFFFFF;
  --tk-orange:     #FF6A13;   /* テーマカラー */
  --tk-orange-deep:#D94A0A;
  --tk-orange-pale:#FFE6CE;
  --tk-gold:       #FFC02E;   /* 1位・強調 */
  --tk-red:        #E02B20;   /* 赤札（セール価格） */
  --tk-line:       #F1DBC1;
  --tk-r:14px;
  --tk-shadow: 0 2px 0 rgba(217,74,10,.10), 0 10px 24px rgba(217,74,10,.10);
}

/* ---------- スコープ内リセット ---------- */
#tokkaichi{
  background:var(--tk-paper);
  color:var(--tk-ink);
  font-family:"Zen Kaku Gothic New","Hiragino Kaku Gothic ProN","Yu Gothic",sans-serif;
  font-size:15px;
  font-weight:400;
  line-height:1.75;
  text-align:left;
  overflow:hidden;                 /* 角丸を効かせる */
  border-radius:16px;
  -webkit-font-smoothing:antialiased;
}
#tokkaichi *,
#tokkaichi *::before,
#tokkaichi *::after{box-sizing:border-box;}
#tokkaichi h1,
#tokkaichi h2,
#tokkaichi h3,
#tokkaichi h4,
#tokkaichi p,
#tokkaichi ul,
#tokkaichi li,
#tokkaichi figure{margin:0;padding:0;}
#tokkaichi ul{list-style:none;}
#tokkaichi img{max-width:100%;height:auto;display:block;border:0;}
#tokkaichi a{color:inherit;text-decoration:none;}
#tokkaichi svg{display:block;}

/* 数字は値札のように */
#tokkaichi .tk-num{
  font-family:"Bebas Neue",sans-serif;
  font-weight:400;letter-spacing:.02em;line-height:1;
}

#tokkaichi .tk-inner{width:min(1160px,90%);margin-left:auto;margin-right:auto;}

/* ---------- 上部バー（ロゴ） ---------- */
/* ロゴは黒文字のため、バーは白背景にしています */
#tokkaichi .tk-topbar{
  background:#fff;
  color:var(--tk-ink-soft);
  font-size:22px;
  letter-spacing:.06em;
  border-bottom:1px solid var(--tk-line);
}
#tokkaichi .tk-topbar .tk-inner{
  display:flex;justify-content:space-between;align-items:center;gap:16px;padding:14px 0;
}
#tokkaichi .tk-logo{
  height:34px;width:auto;flex:0 0 auto;
}
#tokkaichi .tk-topbar strong{font-weight:900;color:var(--tk-orange-deep);}

/* ---------- ヒーロー（のぼり旗） ---------- */
#tokkaichi .tk-hero{
  position:relative;
  background:radial-gradient(120% 90% at 50% 0%, #FF8A38 0%, var(--tk-orange) 45%, var(--tk-orange-deep) 100%);
  color:#fff;
  text-align:center;
  padding:44px 0 40px;
  overflow:hidden;
}
#tokkaichi .tk-hero::before{      /* 斜めストライプ */
  content:"";position:absolute;top:0;right:0;bottom:0;left:0;
  background:repeating-linear-gradient(115deg, rgba(255,255,255,.075) 0 22px, transparent 22px 62px);
  pointer-events:none;
}
#tokkaichi .tk-hero .tk-inner{position:relative;}

#tokkaichi .tk-hero-eyebrow{
  display:inline-flex;align-items:center;gap:10px;
  font-size:13px;font-weight:700;letter-spacing:.22em;
  padding:6px 16px;border:1px solid rgba(255,255,255,.6);border-radius:99px;
  margin-bottom:22px;
}
#tokkaichi .tk-hero-title{
  font-family:"Zen Antique",serif;
  font-size:clamp(44px,9vw,104px);
  line-height:1;
  letter-spacing:.06em;
  color:#fff;
  text-shadow:0 4px 0 rgba(0,0,0,.14);
}
#tokkaichi .tk-ruby{
  display:block;
  font-family:"Zen Kaku Gothic New",sans-serif;
  font-size:13px;font-weight:700;letter-spacing:.5em;
  opacity:.85;margin-bottom:14px;text-indent:.5em;
}
#tokkaichi .tk-hero-lead{
  margin:20px auto 0;max-width:34em;
  font-size:clamp(14px,1.6vw,17px);color:#FFF0DE;
}

/* 対象期間パネル */
#tokkaichi .tk-term{
  margin:30px auto 0;
  display:inline-flex;flex-wrap:wrap;align-items:center;justify-content:center;
  background:#fff;color:var(--tk-ink);
  border-radius:12px;
  box-shadow:0 8px 0 rgba(0,0,0,.12);
  overflow:hidden;text-align:left;
}
#tokkaichi .tk-term-label{
  background:var(--tk-ink);color:#fff;
  align-self:stretch;display:flex;align-items:center;
  padding:14px 20px;
  font-weight:900;font-size:26px;letter-spacing:.1em;white-space:nowrap;
}
#tokkaichi .tk-term-date{padding:12px 22px;}
#tokkaichi .tk-term-date b{
  display:block;font-size:clamp(18px,3.2vw,28px);font-weight:900;line-height:1.35;
}
#tokkaichi .tk-term-date small{display:block;font-size:12px;color:var(--tk-ink-soft);}

/* のぼりの裾 */
#tokkaichi .tk-hem{width:100%;height:15px;color:var(--tk-orange-deep);margin-top:-1px;}

/* ---------- セクション共通 ---------- */
#tokkaichi .tk-section{padding-top:64px;}
#tokkaichi .tk-sec-head{display:flex;align-items:flex-end;gap:16px;margin-bottom:26px;flex-wrap:wrap;}
#tokkaichi .tk-sec-head h2{
  font-family:"Zen Antique",serif;
  font-size:clamp(24px,4vw,38px);letter-spacing:.05em;line-height:1.3;color:var(--tk-ink);
}
#tokkaichi .tk-sec-head h2::before{
  content:"";display:inline-block;width:12px;height:12px;margin-right:12px;
  background:var(--tk-orange);transform:rotate(45deg) translateY(-3px);
}
#tokkaichi .tk-sec-head p{margin-bottom:6px;font-size:13px;color:var(--tk-ink-soft);}

/* ---------- ランキング ---------- */
#tokkaichi .tk-rank-strip{
  display:grid;grid-template-columns:repeat(5,minmax(190px,1fr));gap:16px;
  overflow-x:auto;padding-bottom:12px;
  scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch;
}
#tokkaichi .tk-rank{
  display:block;
  position:relative;background:var(--tk-card);border-radius:var(--tk-r);
  border:2px solid var(--tk-line);padding:44px 16px 18px;text-align:center;
  box-shadow:var(--tk-shadow);scroll-snap-align:start;
  color:inherit;text-decoration:none;cursor:pointer;
  transition:transform .18s ease, box-shadow .18s ease;
}
#tokkaichi .tk-rank:hover{
  transform:translateY(-4px);
  box-shadow:0 4px 0 rgba(217,74,10,.14), 0 16px 30px rgba(217,74,10,.16);
}
#tokkaichi .tk-rank:hover h3{color:var(--tk-orange-deep);}
#tokkaichi .tk-rank-badge{
  position:absolute;top:-14px;left:50%;transform:translateX(-50%);
  width:56px;height:56px;border-radius:50%;
  background:var(--tk-ink);color:#fff;
  display:grid;place-items:center;
  border:3px solid var(--tk-paper);
}
#tokkaichi .tk-rank-badge .tk-num{font-size:30px;}
#tokkaichi .tk-rank-badge em{
  position:absolute;bottom:6px;font-style:normal;font-size:9px;letter-spacing:.1em;opacity:.75;
}
#tokkaichi .tk-rank-1{border-color:var(--tk-gold);box-shadow:0 0 0 4px #FFF2CE, var(--tk-shadow);}
#tokkaichi .tk-rank-1 .tk-rank-badge{background:linear-gradient(160deg,#FFD666,#F5A300);color:#3A2400;}
#tokkaichi .tk-rank-2 .tk-rank-badge{background:#9BA6AE;}
#tokkaichi .tk-rank-3 .tk-rank-badge{background:#C4834A;}
#tokkaichi .tk-rank-thumb{aspect-ratio:1 / 1;min-height:88px;border-radius:10px;margin-bottom:12px;overflow:hidden;}
#tokkaichi .tk-rank-thumb img{width:100%;height:100%;object-fit:cover;}
#tokkaichi .tk-rank h3{margin-bottom:4px;font-size:15px;font-weight:900;line-height:1.5;color:var(--tk-ink);}
#tokkaichi .tk-rank-note{margin-bottom:10px;font-size:12px;color:var(--tk-ink-soft);}
#tokkaichi .tk-rank-price{font-weight:900;color:var(--tk-red);font-size:15px;}
#tokkaichi .tk-rank-price .tk-num{font-size:26px;margin-right:2px;}
#tokkaichi .tk-rank-hint{margin-top:10px;font-size:12px;color:var(--tk-ink-soft);}

/* ---------- 商品グリッド ---------- */
#tokkaichi .tk-group{margin-top:46px;}
#tokkaichi .tk-group-head{
  display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  background:var(--tk-orange-pale);
  border-left:8px solid var(--tk-orange);
  border-radius:0 10px 10px 0;
  padding:12px 18px;margin-bottom:22px;
}
#tokkaichi .tk-group-head h3{
  font-size:clamp(18px,2.4vw,22px);font-weight:900;letter-spacing:.04em;color:var(--tk-ink);
}
#tokkaichi .tk-gauge{
  display:inline-flex;align-items:center;gap:7px;
  background:#fff;border:2px solid var(--tk-orange);border-radius:99px;
  padding:3px 12px;font-size:12px;font-weight:900;color:var(--tk-orange-deep);white-space:nowrap;
}
#tokkaichi .tk-group-note{font-size:13px;color:var(--tk-ink-soft);flex:1 1 260px;}

#tokkaichi .tk-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;}

#tokkaichi .tk-item{
  background:var(--tk-card);border-radius:var(--tk-r);border:1px solid var(--tk-line);
  box-shadow:var(--tk-shadow);
  display:flex;flex-direction:column;overflow:hidden;
  color:inherit;text-decoration:none;cursor:pointer;
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
#tokkaichi .tk-item:hover,
#tokkaichi .tk-item:focus-visible{
  transform:translateY(-4px);
  border-color:var(--tk-orange);
  box-shadow:0 4px 0 rgba(217,74,10,.14), 0 16px 30px rgba(217,74,10,.16);
  }  
#tokkaichi .tk-item:hover h4{color:var(--tk-orange-deep);}
/* 画像をゆっくり寄る（リンクであることの合図） */
#tokkaichi .tk-item .tk-thumb img{transition:transform .35s ease;}
#tokkaichi .tk-item:hover .tk-thumb img{transform:scale(1.05);}
/* キーボード操作時のフォーカス表示 */
#tokkaichi .tk-item:focus-visible,
#tokkaichi .tk-rank:focus-visible,
#tokkaichi .tk-logo-link:focus-visible{
  outline:3px solid var(--tk-orange);outline-offset:3px;
}  
#tokkaichi .tk-thumb{aspect-ratio:1 / 1;min-height:110px;flex:0 0 auto;position:relative;overflow:hidden;}
#tokkaichi .tk-thumb img{width:100%;height:100%;object-fit:cover;}
#tokkaichi .tk-off{
  position:absolute;top:10px;left:10px;
  background:var(--tk-red);color:#fff;border-radius:8px;
  padding:5px 9px 4px;font-weight:900;font-size:11px;line-height:1;
  display:flex;align-items:baseline;gap:2px;
  box-shadow:0 3px 0 rgba(0,0,0,.18);
}
#tokkaichi .tk-off .tk-num{font-size:19px;}
#tokkaichi .tk-body{padding:16px 16px 18px;display:flex;flex-direction:column;flex:1;}
#tokkaichi .tk-body h4{margin-bottom:8px;font-size:16px;font-weight:900;line-height:1.5;color:var(--tk-ink);}
#tokkaichi .tk-body .tk-desc{margin-bottom:16px;font-size:13px;color:var(--tk-ink-soft);line-height:1.7;flex:1;}
#tokkaichi .tk-prices{border-top:2px dotted var(--tk-line);padding-top:12px;}
#tokkaichi .tk-list-price{
  display:flex;justify-content:space-between;align-items:baseline;
  font-size:12px;color:var(--tk-ink-soft);margin-bottom:8px;
}
#tokkaichi .tk-list-price b{
  font-weight:700;text-decoration:line-through;text-decoration-thickness:1.5px;
}
/* 赤札 */
#tokkaichi .tk-sale{
  position:relative;background:var(--tk-red);color:#fff;
  border-radius:8px;padding:9px 12px 8px 26px;
  display:flex;align-items:baseline;justify-content:space-between;gap:6px;
}
#tokkaichi .tk-sale::before{
  content:"";position:absolute;left:9px;top:50%;transform:translateY(-50%);
  width:9px;height:9px;border-radius:50%;background:var(--tk-paper);
  box-shadow:inset 0 1px 2px rgba(0,0,0,.35);
}
#tokkaichi .tk-sale-label{font-size:11px;font-weight:900;letter-spacing:.1em;opacity:.9;}
#tokkaichi .tk-sale-value{font-weight:900;font-size:13px;white-space:nowrap;}
#tokkaichi .tk-sale-value .tk-num{font-size:30px;margin-right:2px;}

/* 写真プレースホルダ（焼き網）※<img>に差し替えたら不要になります */
#tokkaichi .tk-grill{
  background-color:#FFE9D2;
  background-image:
    repeating-linear-gradient(90deg, rgba(43,22,20,.09) 0 2px, transparent 2px 16px),
    repeating-linear-gradient(0deg, rgba(43,22,20,.09) 0 2px, transparent 2px 16px),
    linear-gradient(140deg,#FFDDB8,#FFC58E);
  display:grid;place-items:center;
  color:#B07B4E;font-size:11px;font-weight:700;letter-spacing:.14em;
}

/* ---------- 注意事項 ---------- */
#tokkaichi .tk-notes{
  margin-top:64px;background:#fff;border:2px dashed var(--tk-line);
  border-radius:var(--tk-r);padding:26px 28px;
}
#tokkaichi .tk-notes h2{margin-bottom:12px;font-size:16px;font-weight:900;letter-spacing:.08em;color:var(--tk-ink);}
#tokkaichi .tk-notes ul{padding-left:1.2em;list-style:disc;font-size:13px;color:var(--tk-ink-soft);}
#tokkaichi .tk-notes li{margin-bottom:6px;}

/* ---------- フッター ---------- */
#tokkaichi .tk-footer{
  margin-top:56px;background:var(--tk-ink);color:#FFE3C7;text-align:center;padding:34px 0;
}
#tokkaichi .tk-footer .tk-f-title{
  font-family:"Zen Antique",serif;font-size:22px;letter-spacing:.1em;margin-bottom:6px;
}
#tokkaichi .tk-footer p{font-size:12px;opacity:.7;}

/* ---------- 改行の出し分け ---------- */
/* <br class="tk-br-pc"> …PCだけで改行 ／ <br class="tk-br-sp"> …スマホだけで改行 */
#tokkaichi .tk-br-sp{display:none;}

/* ---------- レスポンシブ ---------- */
@media screen and (max-width:1000px){
  #tokkaichi .tk-grid{grid-template-columns:repeat(3,1fr);}
}
@media screen and (max-width:760px){
  #tokkaichi{border-radius:0;}
  #tokkaichi .tk-br-pc{display:none;}
  #tokkaichi .tk-br-sp{display:inline;}
  #tokkaichi .tk-inner{width:92%;}
  #tokkaichi .tk-topbar .tk-inner{flex-direction:column;gap:6px;text-align:center;font-size:13px;padding:12px 0;}
  #tokkaichi .tk-logo{height:26px;}
  #tokkaichi .tk-grid{grid-template-columns:repeat(2,1fr);}
  #tokkaichi .tk-term{width:100%;}
  #tokkaichi .tk-term-label{width:100%;justify-content:center;font-size:22px;}
}
@media screen and (max-width:420px){
  #tokkaichi .tk-grid{gap:12px;}
  #tokkaichi .tk-body{padding:13px;}
  #tokkaichi .tk-sale-value .tk-num{font-size:24px;}
  #tokkaichi .tk-sale{padding-left:22px;}
}
@media (prefers-reduced-motion:reduce){
  #tokkaichi *{transition:none !important;animation:none !important;}
}