/* ===== Base ===== */
.tfContainer{max-width:1280px;margin:0 auto;padding:0 16px;}
.tfSection{padding:48px 0;}
.tfTitleImg img{max-width:100%;height:auto;display:block;margin:0 auto 18px;}
.tfSectionImg{max-width:100%;height:auto;display:block;margin:0 auto;}
.tfBtnRow{display:flex;gap:12px;flex-wrap:wrap;margin-top:16px;}
.tfBtn{display:inline-flex;align-items:center;justify-content:center;padding:12px 16px;border-radius:999px;border:1px solid rgba(0,0,0,.1);background:#fff;text-decoration:none;font-weight:700}
.tfBtnSub{opacity:.9}

/* ===== Dock menu ===== */
.tfDock{
	position:sticky;top:0;z-index:50;
	display:flex;gap:14px;flex-wrap:wrap;
	padding:10px 12px;background:rgba(255,255,255,.92);
	backdrop-filter: blur(10px);
	border-bottom:1px solid rgba(0,0,0,.06);
}
.tfDock a{text-decoration:none;font-weight:700;color:#222;padding:6px 10px;border-radius:999px}
.tfDock a:hover{background:rgba(0,0,0,.05)}

/* ===== Hero ===== */
.tfHero{padding:85px 0 0;}
.tfHeroInner{max-width:1200px;margin:0 auto;padding:0 16px;}
.tfHeroImg{width:100%;height:auto;border-radius:18px;display:block;}

/* ===== Tabs ===== */
.tfTabs{margin-top:10px;}
.tfTabBtns{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:12px;}
.tfTabBtn{
	border:1px solid rgba(0,0,0,.12);
	background:#fff;border-radius:999px;
	padding:10px 14px;font-weight:800;
	cursor:pointer;
}
.tfTabBtn.is-active{background:#111;color:#fff;border-color:#111;}
.tfTabPanel{display:none;}
.tfTabPanel.is-active{display:block;}

/* slider（スマホ） */
.tfSlide img{max-width:100%;height:auto;display:block;margin:0 auto 10px;border-radius:14px;}
.tfSlide.is-slider{
	display:flex;gap:12px;overflow:auto;scroll-snap-type:x mandatory;padding-bottom:10px;
}
.tfSlide.is-slider img{min-width:82%;scroll-snap-align:center;margin:0;border-radius:14px;}

/* ===== FAQ ===== */
.tfFaq{display:grid;gap:10px;}
.tfFaqItem{
	border:1px solid rgba(0,0,0,.10);
	border-radius:14px;background:#fff;
	overflow:hidden;
}
.tfFaqItem summary{
	padding:14px 16px;
	font-weight:900;cursor:pointer;
	list-style:none;
}
.tfFaqItem summary::-webkit-details-marker{display:none;}
.tfFaqBody{padding:0 16px 14px;color:#333;line-height:1.7;}

/* ===== Store filters ===== */
.tfStoreFilters{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin:10px 0 16px;}
.tfFbtn{
	border:1px solid rgba(0,0,0,.12);
	background:#fff;border-radius:999px;
	padding:10px 14px;font-weight:800;
	cursor:pointer;
}
.tfFbtn.is-active{background:#111;color:#fff;border-color:#111;}
.tfFsep{width:1px;height:26px;background:rgba(0,0,0,.12);display:inline-block;margin:0 4px;}

/* ===== Store grid ===== */
.tfStoreGrid{
	display:grid;
	grid-template-columns:repeat(3,1fr);
	gap:18px;
}
@media (max-width: 980px){
	.tfStoreGrid{grid-template-columns:repeat(2,1fr);}
}
@media (max-width: 640px){
	.tfStoreGrid{grid-template-columns:1fr;}
}

/* ===== Store card ===== */
.tfStoreCard{
	border:1px solid rgba(0,0,0,.08);
	border-radius:18px;
	overflow:hidden;
	background:#fff;
	box-shadow:0 10px 25px rgba(0,0,0,.06);
	position:relative;
}
.tfStoreMedia{position:relative;}
.tfStoreThumb img{width:100%;height:220px;object-fit:cover;display:block;}
@media (max-width:640px){
	.tfStoreThumb img{height:210px;}
}
.tfNoImg{height:220px;display:flex;align-items:center;justify-content:center;background:#f3f3f3;color:#777;font-weight:800;}

.tfStoreMajor{
	position:absolute;left:12px;top:12px;
	background:#14b8a6;color:#fff;
	padding:8px 10px;border-radius:10px;
	font-weight:900;font-size:14px;
	box-shadow:0 6px 16px rgba(0,0,0,.14);
}

.tfStoreBody{padding:14px 14px 16px;}
.tfStoreName{margin:0 0 8px;font-size:20px;line-height:1.2;font-weight:950;letter-spacing:.01em;}

.tfChips{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:10px;}
.tfChip{display:inline-flex;align-items:center;gap:6px;padding:0 10px;font-weight:800;font-size:13px;border:3px solid #ff914d;}
.tfChipGenre{background:#fff;}

.tfJoinTableWrap{margin:10px 0 12px;}
.tfJoinTable{
	width:100%;
	border-collapse:separate;
	border-spacing:0;
	overflow:hidden;
	border-radius:12px;
}
.tfJoinTable th, .tfJoinTable td{
	padding:10px 8px;
	font-weight:900;
	text-align:center;
	border:1px solid rgba(0,0,0,.10);
}
.tfJoinTable thead th{background:#f7f7f7;}
.tfJoinTable tbody th{text-align:left;background:#f7f7f7;font-size:13px;}
.tfJoinTable td.is-on{background:#4f46e5;color:#fff;}
.tfJoinTable td.is-off{background:#cfcfcf;color:#fff;}

.tfInfo{margin:0;display:grid;gap:8px;}
.tfInfoRow{display:grid;grid-template-columns:105px 1fr;gap:10px;align-items:start;}
.tfInfoRow dt{
	font-weight:bold;
	background:#656161;
	padding:0 10px;
	text-align:center;
	color: #fff;
	font-size: 90%;
}
.tfInfoRow dd{margin:0;line-height:1.55;color:#222;}
.tfBtnMiniRow{margin-top:8px;}
.tfMiniBtn{
	display:inline-flex;align-items:center;justify-content:center;
	border:none;background:#0ea5e9;color:#fff;
	padding:10px 12px;border-radius:12px;font-weight:900;
	cursor:pointer;
}
.tfMiniBtn:hover{filter:brightness(.95);}

/* ===== Ticket modal (FIX) ===== */
.tfTicketModal{
  position: fixed;
  inset: 0;
  display: none;
  z-index: 2000; /* ヘッダー(100)より上に */
}
.tfTicketModal.is-open{display:block;}

/* 背景 */
.tfTicketModalBg{
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.55);
}

/* 本体 */
.tfTicketModalBox{
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);

  width: min(920px, calc(100vw - 28px));
  max-height: calc(100dvh - 28px); /* ★vhじゃなくdvh */
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;

  background: rgba(20,20,20,.92);
  color: #fff;
  border-radius: 18px;
  box-shadow: 0 30px 80px rgba(0,0,0,.45);

  /* iPhoneノッチ/下バー対策 */
  padding-bottom: env(safe-area-inset-bottom);
}

/* 閉じるボタン（タップしやすく） */
.tfTicketClose{
  position: sticky; /* スクロールしても常に上に居る */
  top: 10px;
  margin-left: auto;
  margin-right: 10px;

  width: 44px;
  height: 44px;
  border-radius: 12px;
  border: none;
  background: rgba(255,255,255,.15);
  color: #fff;
  font-size: 22px;
  font-weight: 900;
  cursor: pointer;
  z-index: 1;
}

/* 中身 */
.tfTicketModalInner{padding: 14px 18px 20px;}
.tfTicketTitle{font-size: 18px;font-weight: 950;margin: 0 0 12px; line-height:1.35;}
.tfTicketImg img{width:100%;max-width: 560px;margin:auto;height:auto;border-radius:14px;display:block;}
.tfTicketCols{display:grid;gap:12px;margin-top:12px;}
@media (min-width: 800px){
  .tfTicketCols{grid-template-columns:1fr 1fr;}
}
.tfTicketCol{background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.15);border-radius:14px;padding:12px;}
.tfTicketHead{font-weight:950;margin-bottom:6px;}
.tfTicketText{line-height:1.7;white-space:normal; word-break: break-word;}

/* 背景側のスクロールロック（JSで付け外し） */
html.tfModalLock, body.tfModalLock{
  overflow: hidden;
  touch-action: none;
}


/* ========== About/WhenWhere 2col layout ========== */
.tfAboutWrap { padding: 56px 0; }
.tfAboutGrid{
	display: grid;
	grid-template-columns: minmax(0, 1fr) 520px;
	gap: 32px;
	align-items: start;
}

.tfAboutLeft{ min-width: 0; }
.tfAboutRight{ position: relative; }
.tfAboutRightImg{
	width: 100%;
	height: auto;
	display: block;
}

/* 左ブロック */
.tfInfoBlock{
	background: transparent;
	margin-bottom: 34px;
}
.tfInfoTitleImg{
	width: auto;
	max-width: 320px;
	height: auto;
	display: block;
	margin: 0 0 14px 0;
}
.tfInfoText p{
	margin: 0 0 12px 0;
	line-height: 1.95;
	font-size: 16px;
}

/* 強調 */
.tfEm{
	display: inline-block;
	position: relative;
	padding: 0 .15em;
}
.tfEm--marker{
	background: linear-gradient(transparent 62%, #ffd95a 62%);
}
.tfEm--underline{
	background: linear-gradient(transparent 70%, #ffd95a 70%);
	padding-bottom: .05em;
}

/* ボタン */
.tfBtnRow{
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-top: 14px;
}
.tfBtn{
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 12px 14px;
	border-radius: 10px;
	text-decoration: none;
	font-weight: 700;
}
.tfBtnSub{ opacity: .92; }

/* SP：縦積み */
@media (max-width: 900px){
	.tfAboutGrid{
		grid-template-columns: 1fr;
		gap: 22px;
	}
	.tfAboutRight{ order: 2; }
	.tfAboutLeft{ order: 1; }
	.tfInfoTitleImg{ max-width: 280px; }
	.tfInfoText p{ font-size: 15px; }
}

/* ===== Stamp Rally section ===== */
.tfStamp { padding: 56px 0; }
.tfStampGrid{
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 26px;
	align-items: start;
}

.tfStampBox{
	background: #fff;
	border-radius: 18px;
	padding: 18px 18px 16px;
	box-shadow: 0 10px 24px rgba(0,0,0,.06);
}

/* 見出し（画像のピルを再現） */
.tfStampPill{
	margin: 0 0 14px;
	padding: 12px 16px;
	border-radius: 10px;
	color: #fff;
	font-weight: 900;
	text-align: center;
	font-size: 22px;
	letter-spacing: .02em;
}
.tfStampPill--green{ background: #3db34a; }
.tfStampPill--blue{ background: #1d8bd6; }
.tfStampPill--red{ background: #e4574d; }
.tfStampPill--yellow{ background: #f3b21b; }

.tfStampBody p{
	margin: 0 0 12px;
	line-height: 1.95;
	font-size: 16px;
}

/* STEP */
.tfStampSteps{
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 14px;
}
.tfStep{
	background: #f7f8fb;
	border-radius: 14px;
	padding: 14px 12px;
	text-align: center;
}
.tfStepNo{
	font-weight: 900;
	font-size: 26px;
	margin-bottom: 6px;
}
.tfStepIcon{
	font-size: 40px;
	line-height: 1;
	margin: 8px 0 8px;
}
.tfStepTxt{
	font-size: 14px;
	line-height: 1.6;
	font-weight: 700;
}

/* 景品 */
.tfPrizeList{
	list-style: none;
	padding: 0;
	margin: 0 0 12px;
	display: grid;
	gap: 8px;
}
.tfPrizeList li{
	display: grid;
	grid-template-columns: 64px 64px 1fr;
	gap: 10px;
	align-items: center;
	padding: 10px 12px;
	border-radius: 12px;
	background: #f7f8fb;
}
.tfPrizeRank{ font-weight: 900; }
.tfPrizeCount{ font-weight: 800; opacity: .85; }
.tfPrizePoint{ font-weight: 900; font-size: 18px; }

.tfNote{
	margin: 0;
	font-size: 13px;
	line-height: 1.7;
	opacity: .9;
}

/* FAQ（details） */
.tfFaq{ display: grid; gap: 10px; }
.tfFaqItem{
	background: #fff7e6;
	border-radius: 14px;
	padding: 10px 12px;
}
.tfFaqItem summary{
	cursor: pointer;
	font-weight: 900;
	line-height: 1.6;
}
.tfFaqA{
	padding-top: 10px;
	line-height: 1.8;
}

/* SP：縦積み */
@media (max-width: 900px){
	.tfStampGrid{ grid-template-columns: 1fr; }
	.tfStampPill{ font-size: 20px; }
	.tfStampSteps{ grid-template-columns: 1fr; }
}

/* ===== Bar intro ===== */
.tfBarTop{
	display:grid;
	grid-template-columns: 1fr 1fr;
	gap:26px;
	margin-bottom: 26px;
}
.tfBarBox{
	background:#fff;
	border-radius:18px;
	padding:18px 18px 16px;
	box-shadow:0 10px 24px rgba(0,0,0,.06);
}

/* ===== Coupon block ===== */
.tfCouponTitle{ margin-bottom: 18px; }
.tfCoupon{
	padding:18px;
}

.tfCouponGrid{
	display:grid;
	grid-template-columns: 1.1fr .9fr;
	gap:26px;
	align-items:start;
}

.tfCouponText p{ margin:0 0 10px; line-height:1.9; }
.tfCouponList{ margin:0; padding-left: 1.2em; line-height:1.9; }
.tfCouponList li{ margin: 0 0 6px; }

.tfCouponCards{
	display:grid;
	grid-template-columns: 1fr 1fr;
	gap:18px;
}

.tfCouponCard{
	border-radius:18px;
	overflow:hidden;
	color:#fff;
	text-align:center;
	box-shadow:0 10px 24px rgba(0,0,0,.10);
}
.tfCouponCard--orange{ background: linear-gradient(180deg,#f2a53a,#f27d1f); }
.tfCouponCard--green{ background: linear-gradient(180deg,#3bbf72,#2da85f); }

.tfCouponHead{
	font-weight:900;
	font-size:20px;
	padding:14px 10px;
	background: rgba(0,0,0,.12);
}

.tfCouponPrice{ padding: 18px 10px 12px; }
.tfCouponOld{
	font-weight:900;
	opacity:.8;
	text-decoration: line-through;
	font-size: 22px;
}
.tfCouponNow{
	font-weight:900;
	font-size: 54px;
	line-height:1.05;
	text-shadow:0 6px 0 rgba(0,0,0,.12);
}
.tfCouponPeriod{
	font-weight:800;
	padding: 14px 10px;
	background: rgba(0,0,0,.12);
}

/* SP */
@media (max-width: 900px){
	.tfBarTop{ grid-template-columns:1fr; }
	.tfCouponGrid{ grid-template-columns:1fr; }
	.tfCouponCards{ grid-template-columns:1fr; }
	.tfCouponNow{ font-size: 48px; }
}
/* =========================
	 Ticket Tabs：見た目を「タブっぽく」＆画像を横並び化
	 追記推奨：thanksfest.css の一番下
========================= */

/* タブボタン：ピル型・押せる感じを強める（テーマのbutton装飾を潰す） */
.tfTabs .tfTabBtns{
	justify-content:flex-start;
	gap:12px;
	/*margin:0 0 18px;*/
}
.tfTabs .tfTabBtn{
	-webkit-appearance:none;
	appearance:none;
	border:2px solid #111;
	background:#fff;
	color:#111;
	padding:10px 18px;
	/*border-radius:999px;*/
	font-weight:900;
	letter-spacing:.02em;
	box-shadow:0 8px 18px rgba(0,0,0,.08);
	cursor:pointer;
}
.tfTabs .tfTabBtn:hover{ transform:translateY(-1px); }
.tfTabs .tfTabBtn.is-active{
	background:#111;
	color:#fff;
	box-shadow:0 10px 22px rgba(0,0,0,.16);
}

/* パネル：白い面を作って“タブが乗ってる感”を出す */
.tfTabs .tfTabPanels{
	background:rgba(255,255,255,.85);
	border:1px solid rgba(0,0,0,.08);
	padding:18px;
	box-shadow:0 12px 30px rgba(0,0,0,.10);
}

/* 画像：PCでは横並び（グリッド）＝「1枚ずつ縦に続く」問題をここで潰す */
.tfSlide{
	display:grid;
	grid-template-columns:repeat(auto-fit, minmax(180px, 1fr));
	gap:14px;
	align-items:start;
}
.tfSlide img{
	display:block;
	width:100%;
	height:auto;
	margin:0;              /* 既存のmargin-bottomを打ち消す */
	border-radius:12px;
	box-shadow:0 10px 24px rgba(0,0,0,.10);
}

/* スマホ：JSが付ける is-slider の時だけ、スワイプ表示に切り替え */
@media (max-width:768px){
	.tfSlide.is-slider{
		display:flex;
		gap:12px;
		overflow-x:auto;
		-webkit-overflow-scrolling:touch;
		scroll-snap-type:x mandatory;
		padding-bottom:6px;
	}
	.tfSlide.is-slider img{
		flex:0 0 88%;
		scroll-snap-align:start;
	}
}

/* ===== Ticket Tabs: ボタン→タブ化（追記） ===== */
.tfTabs{margin-top:14px;}
.tfTabBtns{
	display:flex;
	gap:14px;
	flex-wrap:nowrap;            /* 折り返さない */
	overflow:auto;               /* 画面が狭い時は横スクロール */
	-webkit-overflow-scrolling:touch;
	align-items:flex-end;
	margin:0;                    /* 下の余白消す */
	padding:0 2px;
}
.tfTabBtns::-webkit-scrollbar{height:6px;}
.tfTabBtns::-webkit-scrollbar-thumb{background:rgba(0,0,0,.12);border-radius:999px;}

.tfTabBtn{
	border-radius:18px 18px 0 0; /* 上だけ丸く */
	padding:14px 22px;
	font-weight:900;
	letter-spacing:.02em;
	border:4px solid rgba(0,0,0,.12);
	background:#fff;
	color:#222;
	cursor:pointer;
	box-shadow:none;
	position:relative;
	line-height:1;
	white-space:nowrap;
	flex:0 0 auto;
}

/* タブ色（理想に寄せて：購入=赤 / 使い方=緑 / FAQ=青） */
.tfTabBtn[data-tab="buy"]{border-color:#e1484a;color:#e1484a;}
.tfTabBtn[data-tab="use"]{border-color:#3db34a;color:#3db34a;}
.tfTabBtn[data-tab="faq"]{border-color:#1d8bd6;color:#1d8bd6;}

/* アクティブは塗りつぶし＋下線を消してコンテンツとつなげる */
.tfTabBtn.is-active{
	color:#fff;
	transform:translateY(2px);      /* ちょい下げて“刺さってる感” */
	z-index:2;
	border-bottom-color:transparent; /* 下を抜いて一体化 */
}
.tfTabBtn.is-active[data-tab="buy"]{background:#e1484a;}
.tfTabBtn.is-active[data-tab="use"]{background:#3db34a;}
.tfTabBtn.is-active[data-tab="faq"]{background:#1d8bd6;}

/* タブの下（コンテンツ枠） */
.tfTabPanels{
	border:4px solid rgba(0,0,0,.10);
	border-top-color:#e1484a;      /* デフォルト（:has未対応の保険） */
	border-radius:10px;
	padding:18px;
	background:#fff;
	margin-top:-2px;               /* タブと密着させる */
	box-shadow:0 10px 24px rgba(0,0,0,.06);
}

/* SP微調整 */
@media (max-width:640px){
	.tfTabBtn{padding:12px 16px;border-width:3px;}
	.tfTabPanels{padding:14px;border-width:3px;}
}

/* ===== Ticket tabs : 見た目を「タブ」化 + はみ出し/謎の楕円対策 ===== */
#ticket .tfTabs{
	/* 既存の白箱を一旦リセット（必要なら） */
	background: transparent;
	box-shadow: none;
	padding: 0;
	overflow: visible;
}

/* ①：タブは全面に広がらない（中身幅に合わせる）＆横スクロールは出ても痕跡を消す */
#ticket .tfTabBtns{
	display: inline-flex;      /* ← これで“全面”にならない */
	align-items: flex-end;
	gap: 18px;
	margin: 0 0 0;             /* 下のパネルとつなげるので余白は後で */
	padding: 0 6px;
	max-width: 100%;
	overflow-x: auto;
	overflow-y: hidden;
	-webkit-overflow-scrolling: touch;

	/* ②：右端の謎グレー楕円（スクロールバー系）を消す */
	scrollbar-width: none;     /* Firefox */
	-ms-overflow-style: none;  /* IE/Edge(旧) */
}
#ticket .tfTabBtns::-webkit-scrollbar{ display:none; } /* Chrome/Safari */

/* ボタン→タブ */
#ticket .tfTabBtn{
	appearance: none;
	border: 4px solid var(--tabColor, #111);
	border-bottom: none;
	border-radius: 22px 22px 0 0;
	padding: 14px 28px;
	font-weight: 900;
	background: #fff;
	color: var(--tabColor, #111);
	box-shadow: 0 10px 18px rgba(0,0,0,.06);
	line-height: 1;
	white-space: nowrap;
}

/* タブ色（data-tabで決め打ち） */
#ticket .tfTabBtn[data-tab="buy"]{ --tabColor:#e13a3a; }
#ticket .tfTabBtn[data-tab="use"]{ --tabColor:#2fb54a; }
#ticket .tfTabBtn[data-tab="faq"]{ --tabColor:#1f8df3; }

/* アクティブ時 */
#ticket .tfTabBtn.is-active{
	background: var(--tabColor);
	color: #fff;
	box-shadow: none;
}

/* ①：中身（画像が入ってるエリア）を“全面”に見せる＝白いパネルを主役にする */
#ticket .tfTabPanels{
	margin-top: -4px;                 /* タブの枠線とつなげる */
	background: #fff;
	border: 4px solid #e6e6e6;
	border-radius: 10px;
	padding: 18px 18px 22px;
	box-shadow: 0 16px 32px rgba(0,0,0,.08);
}

/* タブ内のスライド枠の余白を整える（既存崩れ防止） */
#ticket .tfSlideWrap{
	margin-top: 12px;
}

/* SP時：タブが詰まるので少し小さく */
@media (max-width: 600px){
	#ticket .tfTabBtn{
		padding: 12px 18px;
		border-width: 3px;
		border-radius: 18px 18px 0 0;
		font-size: 14px;
	}
	#ticket .tfTabPanels{
		border-width: 3px;
		padding: 14px 14px 18px;
	}
}

/* ===== 画像＋下テキスト（ステップカード） ===== */
#ticket .tfSlide{
	/* 既存が flex/scroll なら壊さない。横並び維持 */
	gap: 18px;
}

#ticket .tfStep{
	flex: 0 0 auto;
	width: min(240px, 70vw);          /* PCはカード幅、SPは70vwで見やすい */
	background: #fff;
	border: 2px solid #e7e7e7;
	border-radius: 16px;
	box-shadow: 0 12px 24px rgba(0,0,0,.08);
	overflow: hidden;                 /* 角丸に合わせて中身も切る */
}

#ticket .tfStep img{
	display: block;
	width: 100%;
	height: auto;
}

#ticket .tfStepCap{
	padding: 12px 12px 14px;
	font-weight: 700;
	line-height: 1.5;
	font-size: 14px;
	color: #222;
	background: #fff;
}

/* キャプション内で強調したい時用 */
#ticket .tfStepCap strong{
	font-weight: 900;
}

/* PCで横並びが多すぎる時は少し広げる */
@media (min-width: 900px){
	#ticket .tfStep{ width: 260px; }
	#ticket .tfStepCap{ font-size: 15px; }
}

/* ----------------------------------------
	 ticket タブ内：画像+キャプションをカード化
---------------------------------------- */
#ticket .tfSlide{
	display:flex;
	gap:18px;
	align-items:stretch;
	overflow-x:auto;
	padding:16px 18px 10px;
	scroll-snap-type:x mandatory;
	-webkit-overflow-scrolling:touch;

	/* なぞのスクロールバー/楕円（OS依存）を消す */
	scrollbar-width:none;
}
#ticket .tfSlide::-webkit-scrollbar{ display:none; }

/* 旧CSSが img を絶対配置してる可能性があるので強制リセット */
#ticket .tfSlide img{
	position:static !important;
	transform:none !important;
	left:auto !important;
	top:auto !important;
	max-width:100% !important;
	height:auto !important;
}

/* 1枚分のカード */
#ticket .tfStep{
	flex:0 0 260px;          /* 1枚の横幅（好みで調整） */
	background:#fff;
	border-radius:18px;
	overflow:hidden;
	box-shadow:0 12px 28px rgba(0,0,0,.10);
	border:1px solid rgba(0,0,0,.08);
	scroll-snap-align:start;
}

/* 画像部分 */
#ticket .tfStep > img{
	display:block;
	width:100%;
	height:auto;
}

/* キャプション（画像の下のテキスト枠） */
#ticket .tfStepCap{
	padding:12px 14px 14px;
	font-size:14px;
	line-height:1.6;
	color:#222;
	background:#fff;
	border-top:1px solid rgba(0,0,0,.08);
	word-break:break-word;
}

/* PCは横スクロールじゃなく、5枚をきれいに並べたい場合 */
@media (min-width: 980px){
	#ticket .tfSlide{
		overflow:visible;
		flex-wrap:wrap;         /* 5枚入らなければ折り返し */
		scroll-snap-type:none;
	}
	#ticket .tfStep{
		flex:1 1 calc((100% - 18px*4)/5);  /* 5列 */
		min-width:200px;
	}
}

.tfeventinner img{
	width: 100%;
	margin: 0 auto;
}
/* 大まかなジャンル：画像の上にタグで表示 */
.tfStoreMedia { position: relative; }

.tfStoreMajors{
	position: absolute;
	top: 14px;
	left: 14px;
	z-index: 3;
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	max-width: calc(100% - 28px);
}

.tfStoreMajorTag{
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 10px 16px;
	color: #fff;
	font-weight:bold;
	font-size: 80%;
	letter-spacing: .02em;
	line-height: 1;
	box-shadow: 0 10px 24px rgba(0,0,0,.18);
	backdrop-filter: blur(2px);
	-webkit-backdrop-filter: blur(2px);
}

/* ジャンル別カラー（理想2枚目っぽく） */
.tfStoreMajorTag.is-food{ background: #12bcd6; }     /* 飲食店 */
.tfStoreMajorTag.is-souvenir{ background: #f7b84b; } /* 物販・お土産 */
.tfStoreMajorTag.is-stay{ background: #1fb85f; }     /* 宿泊施設 */
.tfStoreMajorTag.is-daily{ background: #ff66c4; }    /* 日用品 */
.tfStoreMajorTag.is-car{ background: #7ad34b; }      /* 車関係 */
.tfStoreMajorTag.is-salon{ background: #3b7bff; }    /* 美容・サロン */
.tfStoreMajorTag.is-misc{ background: #8a6cff; }     /* 雑貨 */
.tfStoreMajorTag.is-other{ background: #666; }       /* 想定外 */

/* スマホ：タグがデカすぎると邪魔なので少しだけ小さく */
@media (max-width: 640px){
	.tfStoreMajors{ top: 10px; left: 10px; gap: 8px; max-width: calc(100% - 20px); }
	.tfStoreMajorTag{ padding: 8px 12px; border-radius: 10px; font-size: 14px; }
}

/* 参加表（○×）の行ごとに色を分ける -------------------- */

/* 共通：文字の見え方 */
.tfJoinTable td.is-on{
	color: #fff;
	font-weight: 800;
}

/* 1行目 = スタンプラリー（3/14・3/15 の○×セル） */
.tfJoinTable tbody tr:nth-child(1) td.is-on{
	background: #29c4f1; /* スタンプ */
}
.tfJoinTable tbody tr:nth-child(1) td.is-off{
	background: #eee;
	color: rgba(0,0,0,.55);
}

/* 2行目 = バルさんぽ（3/14・3/15 の○×セル） */
.tfJoinTable tbody tr:nth-child(2) td.is-on{
	background: #9974b0; /* バル */
}
.tfJoinTable tbody tr:nth-child(2) td.is-off{
	background: #eee;
	color: rgba(0,0,0,.55);
}

/* ===== モーダル表示中：背面スクロール禁止 ===== */
html.tfScrollLock,
body.tfScrollLock{
	overflow: hidden;
	overscroll-behavior: none;
}

.google-map-button {
	margin-top: 15px;
	border-radius: 5px;
	background-color: #fff; /* 背景白 */
	color: #ae69d7; /* 文字色 */
	border: 2px solid #ae69d7; /* 枠線 */
	text-align: center;
	text-decoration: none;
	display: inline-block;
	width: 100%;
	max-width: 200px;
	box-sizing: border-box;
	transition: all 0.3s;
}

.google-map-button:hover {
	background-color: #ae69d7;
	color: #fff;
}

.gmap_botan{
	text-align: right;
}

/* AppStore / GooglePlay を横並びに（親divをピンポイント指定） */
.app > div:has(#btn_apple) {
  display: flex;
  gap: 12px;
  align-items: center;
  flex-wrap: wrap;          /* 狭い時は折り返し */
}

/* バッジ自体のサイズを揃える */
.app #btn_apple,
.app #btn_google {
  display: inline-flex;
  width: 180px;             /* 同サイズ */
  max-width: 45vw;
}

.app #btn_apple img{
	width: 100%;
	padding: 16px 0;
	object-fit: contain;
	display: block;
}
.app #btn_google img {
  width: 100%;
  height: 88px;             /* 高さ固定で揃う */
  object-fit: contain;
  display: block;
}

/* :has が効かない古い環境向け保険（あっても邪魔しない） */
@supports not selector(:has(*)) {
  .app #btn_apple,
  .app #btn_google {
    float: left;
    margin-right: 12px;
  }
  .app #btn_google { margin-right: 0; }
}

.app #btn_apple, .app #btn_google { width: 180px !important; display:inline-flex !important; }

/* =========================
   StampRally v2（景品を横長＋条件3カード＋FAQ全幅）
========================= */

/* 既存の2カラムは維持、全幅ブロックを許可 */
.tfStampGrid--v2{
  grid-template-columns: 1fr 1fr;
}

/* 横幅いっぱい用 */
.tfStampWide{
  grid-column: 1 / -1;
  padding: 18px 18px 16px;
}

/* 景品：横長バー（画像1枚目の圧縮感） */
.tfPrizeBars{
  display: grid;
  gap: 10px;
  margin: 6px 0 12px;
}
.tfPrizeRow{
  --row: #1d8bd6;          /* default */
  display: grid;
  grid-template-columns: 96px 1fr 110px;
  align-items: stretch;
  border-radius: 14px;
  overflow: hidden;
  background: #fff;
  border: 1px solid rgba(0,0,0,08);
}
.tfPrizeRowRank{
  background: var(--row);
  color: #fff;
  font-weight: 950;
  display: grid;
  place-items: center;
  font-size: 20px;
}
.tfPrizeRowMain{
  padding: 12px 14px;
  display: grid;
  gap: 2px;
  align-content: center;
}
.tfPrizeRowSub{
  font-weight: 800;
  opacity: .85;
  font-size: 13px;
}
.tfPrizeRowAmount{
  font-weight: 950;
  font-size: 23px;
  line-height: 1.15;
}
.tfPrizeRowCount{
  background: rgba(0,0,0,0.06);
  font-weight: 950;
  display: grid;
  place-items: center;
  font-size: 20px;
}
.tfPrizeRowYen{
  font-weight: 800;
  font-size: 14px;
  opacity: .85;
}

/* ランク別カラー（ここを“サイト色”に寄せて微調整してOK） */
.tfPrizeRow.is-1{ --row:#caa14a; }  /* gold */
.tfPrizeRow.is-2{ --row:#6d6464; }  /* gray */
.tfPrizeRow.is-3{ --row:#1e4f6d; }  /* navy */
.tfPrizeRow.is-4{ --row:#e4574d; }  /* red */
.tfPrizeRow.is-5{ --row:#3db34a; }  /* green */

/* 条件：3カード */
.tfCondGrid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin-top: 6px;
}
.tfCondCard{
  background: rgba(255,255,255,0.85);
  border: 1px solid rgba(0,0,0,08);
  border-radius: 16px;
  padding: 14px 14px 12px;
  text-align: center;
}
.tfCondTitle{
  font-weight: 950;
  margin-bottom: 8px;
}
.tfCondIcon{
  font-size: 34px;
  line-height: 1;
  margin: 6px 0 10px;
}
.tfCondText{
  margin: 0;
  line-height: 1.7;
  font-weight: 700;
}

/* FAQ：横幅いっぱいでも読みやすい間隔に */
.tfFaq--wide{
  gap: 12px;
}

/* SP */
@media (max-width: 900px){
  .tfCondGrid{ grid-template-columns: 1fr; }
}
@media (max-width: 600px){

  /* 2段構成にする：1段目 rankを全幅、2段目 main+count */
  .tfPrizeRow{
    grid-template-columns: 1fr 110px;
    grid-template-areas:
      "rank rank"
      "main count";
  }

  .tfPrizeRowRank{
    grid-area: rank;
    font-size: 22px;
    padding: 12px 0;
  }

  .tfPrizeRowMain{
    grid-area: main;
    padding: 14px 14px;
  }

  .tfPrizeRowCount{
    grid-area: count;
    background: rgba(0,0,0,0.06);
    font-size: 22px;
    padding: 0;
    display: grid;
    place-items: center;
  }
}

/* 右側：チケット2枚＋ボタンのエリア */
.tfCouponCards{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px; /* 好みで */
}

/*  ボタン行を2列ぶんに広げる */
.tfBtnRow--wide{
  grid-column: 1 / -1;     /* 2枚分の幅 */
  width: 100%;
  justify-self: stretch;   /* 念のため */
}

/* ボタン本体 */
.tfBtnRow--wide .tfBtn{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 18px 18px;
  border-radius: 16px;

  /* “ボタン感”の基本 */
  text-decoration: none;
  font-weight: 800;
  line-height: 1.2;

  /* 視認性 */
  color: #fff;

  /* 背景（グラデでちょい立体） */
  background: linear-gradient(180deg, #ff7a3d 0%, #ff5a1f 100%);

  /* 影で浮かせる */
  box-shadow:
    0 12px 24px rgba(0,0,0,.18),
    0 2px 0 rgba(255,255,255,.18) inset;
}

/* 2行目（説明）を少し控えめに */
.tfBtnRow--wide .tfBtn br + span{ display:none; } /* spanがない環境用の保険（不要なら消してOK） */

/* 2行目テキストを狙って小さくしたいなら、HTMLを少しだけ変えるのが確実 */
.tfBtnRow--wide .tfBtn .tfBtnSub{
  font-size: 12px;
  font-weight: 600;
  opacity: .9;
  margin-top: 6px;
}

@media (min-width: 700px) and (max-width: 979px){
  #ticket .tfStep{
    flex: 0 0 calc((100% - 18px)/2);
    max-width: calc((100% - 18px)/2);
  }
}


/* ===== ticket：PCは5列→3列に変更 ===== */
@media (min-width: 980px){
  #ticket .tfSlide{
    overflow: visible;        /* 横スクロール解除のままでOK */
    flex-wrap: wrap;          /* 折り返し */
    scroll-snap-type: none;   /* 念のため */
  }

  #ticket .tfStep{
    flex: 0 0 calc((100% - 18px*2)/3); /* 3列（gapが18pxなら2つ分） */
    max-width: calc((100% - 18px*2)/3);
    min-width: 0;
  }
}

.sanpo{
	background-color: #000;
	color: #fff;
}

/* ===== Store sort button ===== */
.tfFbtn--sortArea{
  position: relative;
  padding-right: 38px;
}
.tfFbtn--sortArea::after{
  content: "⇅";
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  opacity: .75;
  font-weight: 900;
}
.tfFbtn--sortArea.is-active::after{
  content: "✓";
  opacity: 1;
}

/* ▼チケット2枚の親（←あなたのクラス名に置換） */
.tfCouponCards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

/* ▼スマホでは1カラムにする */
@media (max-width: 560px) {
  .tfCouponCards {
    grid-template-columns: 1fr;
  }

/* ▼値段の文字が見切れないように可変サイズに（←値段の要素に当たるクラスへ） */
.tfCouponPrice {
  font-size: clamp(44px, 12vw, 76px);
  line-height: 1;
  white-space: nowrap;
}

/* ▼タブ全体の外側セクション（←該当の親に） */
.tfSection {
  padding-left: 12px;
  padding-right: 12px;
}

/* ▼白いカード（タブ中身の枠）（←該当の枠に） */
.tfTabPanels {
  width: 100%;
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
}

/* さらに攻めて余白を削りたい場合 */
@media (max-width: 560px) {
  .tfSection { padding-left: 8px; padding-right: 8px; }
  .tfTabPanels { border-radius: 18px; }
}

/* ▼タブ3つの親 */
#ticket .tfTabBtns{
  display:flex;
  gap:10px;
  justify-content:space-between;
  align-items:flex-end;
  flex-wrap:nowrap;     /* 折り返さない */
}

/* ▼タブボタン */
#ticket .tfTabBtn{
  flex:1 1 0;
  min-width:0;          /* これが効くと縮められる */
  text-align:center;
}

/* ▼タブ内テキスト（spanでもaでも両対応） */
#ticket .tfTabBtn a,
#ticket .tfTabBtn span{
  display:block;
  white-space:nowrap;
  font-size:clamp(12px, 3.4vw, 16px);
  padding:10px 6px;     /* 横paddingちょい削る */
}

/* ▼親側で“はみ出し”が起きる場合の保険 */
#ticket{
  overflow-x:hidden;
}

/* タブ列は絶対に横スクロールさせない（左右に動くのを止める） */
#ticket .tfTabBtns{
  overflow-x: hidden;
}

/* 各タブを縮められる状態にする（重要） */
#ticket .tfTabBtn{
  flex: 1 1 0;
  min-width: 0;
}

/* タブの文字は折り返しOKにして、幅オーバーを防ぐ */
#ticket .tfTabBtn a,
#ticket .tfTabBtn span{
  white-space: normal;      /* nowrap をやめる */
  overflow-wrap: anywhere;  /* 長い文字でも折る */
  word-break: break-word;
  line-height: 1.1;
  padding: 10px 6px;
  text-align: center;
}

/* もしタブがbutton要素で固定幅が効いてたら強制解除 */
#ticket .tfTabBtn{
  width: auto !important;
  max-width: 100%;
}

/* チケットのセクションだけ、内側コンテナの最大幅制限を解除 */
#ticket .tfContainer{
  max-width: none !important;
  width: 100%;
  padding-left: 12px;
  padding-right: 12px;
}

/* タブの中身（パネル）を横いっぱいに */
#ticket .tfTabPanels{
  width: 100%;
  max-width: none !important;
}

/* #ticket を画面幅いっぱいに“はみ出させる”（全幅セクション化） */
#ticket{
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}

/* 中の余白は適度に */
#ticket .tfContainer{
  max-width: none !important;
  width: 100%;
  padding-left: 12px;
  padding-right: 12px;
}

#ticket .tfTabBtns{
  display: flex;
  gap: 10px;
  flex-wrap: nowrap;
}

#ticket .tfTabBtn{
  flex: 1 1 0;
  min-width: 0;
}

#ticket .tfTabBtn{
  width: auto !important;
}

/* タブの中身を完全中央揃えにする */
#ticket .tfTabBtn{
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
}

/* 文字の余白を左右均等に */
#ticket .tfTabBtn span,
#ticket .tfTabBtn a{
  padding: 10px 8px;
  width:100%;
}
}

/* CTA */
.ticketCta{
  border:0;
  border-radius:999px;
  padding:10px 14px;
  font-weight:800;
  cursor:pointer;
  white-space:nowrap;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: rgb(31, 63, 191);
	box-shadow: rgba(0, 0, 0, 0.08) 0px 10px 24px;
	gap: 10px;
	background: rgb(255, 255, 255);
	border-width: 2px;
	border-style: solid;
	border-color: rgba(31, 63, 191, 0.25);
	border-image: initial;
	text-decoration: none;
	transition: transform 0.15s, box-shadow 0.15s, border-color 0.15s;
}
.ticketCta--mobile{
  width:100%;
  margin-top:10px;
}

/* PCドロップダウン */
.pcNav__drop summary{ cursor:pointer; list-style:none; }
.pcNav__drop summary::-webkit-details-marker{ display:none; }
.pcNavDrop{ position:relative; }
.pcNavDrop__panel{
  position:absolute;
  top:calc(100% + 8px);
  left:0;
  min-width:220px;
  background:#fff;
  border-radius:14px;
  padding:10px;
  box-shadow:0 12px 30px rgba(0,0,0,.12);
  display:flex;
  flex-direction:column;
  gap:6px;
  z-index:50;
}
.pcNavDrop__panel a{ padding:8px 10px; border-radius:10px; }
.pcNavDrop__panel a:hover{ background:rgba(0,0,0,.05); }

/* モーダル */
.tfModal{ position:fixed; inset:0; display:none; z-index:9999; }
.tfModal[aria-hidden="false"]{ display:block; }
.tfModal__backdrop{ position:absolute; inset:0; background:rgba(0,0,0,.55); }
.tfModal__dialog{
  position:relative;
  width:min(560px, calc(100% - 28px));
  margin:8vh auto 0;
  background:#fff;
  border-radius:18px;
  padding:18px;
}
.tfModal__close{
  position:absolute; right:12px; top:10px;
  border:0; background:transparent;
  font-size:24px; cursor:pointer;
}
.tfModal__actions{ display:flex; gap:10px; margin-top:14px; flex-wrap:wrap; }
.tfModal__btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding:12px 14px; border-radius:14px;
  text-decoration:none;
  font-weight:800;
  border:1px solid rgba(0,0,0,.15);
}
.is-modal-open{ overflow:hidden; }

/* ドロワー内アコーディオン */
.drawer__accordion{
  width:100%;
  text-align:left;
  border:0;
  background:transparent;
  padding:0;
  cursor:pointer;
}
.drawer__sub{ padding-left:10px; display:flex; flex-direction:column; gap:8px; margin-top:8px; }

/* --- PC: 「イベント内容」(details/summary)を他メニューと同じ見た目に --- */
.pcNav__drop { position: relative; }

.pcNav__drop summary{
  list-style: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: .35em;

  /* ▼ここが「他のメニューのボタン見た目」に合わせる部分 */
  padding: 8px 10px;
  padding:8px 10px;
  border-radius:999px;
  border:1px solid rgba(0,0,0,.08);
  background: rgba(255,255,255,.70);
  text-decoration:none;
  font-weight:800;
  font-size:14px;
}

/* Safariのマーカー消し */
.pcNav__drop summary::-webkit-details-marker{ display:none; }

/* 開いてる時の見た目（軽く強調） */
.pcNav__drop details[open] summary{
  background: #fff;
  box-shadow: 0 14px 30px rgba(0,0,0,.14);
}

/* ▼ドロップダウンパネル（今のを活かしつつ念のため） */
.pcNavDrop__panel{
  position: absolute;
  top: calc(100% + 10px);
  left: 0;
  min-width: 220px;
  background: rgba(255,255,255,.95);
  border-radius: 16px;
  padding: 10px;
  box-shadow: 0 16px 34px rgba(0,0,0,.14);
  display: flex;
  flex-direction: column;
  gap: 8px;
  z-index: 50;
}
.pcNavDrop__panel a{
  padding: 10px 12px;
  border-radius: 12px;
  text-decoration: none;
}
.pcNavDrop__panel a:hover{
  background: rgba(0,0,0,.05);
}

#lottery{
	padding-top: 2%;
}

@media (max-width: 640px){
  /* ヘッダーの横幅が足りないので、CTAはドロワー側に寄せる */
  .ticketCta:not(.ticketCta--mobile){ display:none; }

  /* ヘッダー全体を崩れにくい2列に */
  .site-header .nav{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
  }

  /* brandが暴れないように：幅を制限して省略 */
  .site-header .brand{
    min-width:0;
    flex:1;
  }
  .site-header .brand > div{
    min-width:0;
  }
  .site-header .brand > div > div{
    font-size:14px;
    line-height:1.2;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap; /* ←1行にして暴れを止める（2行にしたいなら下で案内） */
  }
  .site-header .brand small{
    display:block;
    font-size:12px;
    opacity:.85;
    white-space:nowrap;
  }

  /* メニューボタンが縦書きにならないように強制リセット */
  .menuBtn{
    writing-mode: horizontal-tb !important;
    transform:none !important;
    white-space:nowrap;
    padding:10px 12px;
    border-radius:999px;
  }

  .tfHero{padding:7px 0 0;}

  #lottery{
		padding-top: 10%;
	}
}

.tfPageTop{
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 999;
  width: 60px;
  height: 60px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  transform: translateY(10px);
  opacity: 0;
  pointer-events: none;
  transition: .25s ease;
}

.tfPageTop img{
  width: 60px;
  height: 60px;
  display: block;
}

.tfPageTop.is-show{
  transform: translateY(0);
  opacity: 1;
  pointer-events: auto;
}

.tfPageTop:hover{
  transform: translateY(-2px);
}

.tfCondIcon img{
	max-width: 200px;
	margin: auto;
}

.ofpConcurrentTitle{
  font-size: clamp(18px, 2.2vw, 28px);
  font-weight: 800;
  line-height: 1.25;
  letter-spacing: 0.02em;
  margin: 18px 0 8px;
  padding-left: 0.6em;
  border-left: 6px solid currentColor;
}