@charset "utf-8";
/*@import url('https://fonts.googleapis.com/css2?family=M+PLUS+Rounded+1c:wght@800&display=swap');*/

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: sans-serif;
  overflow-x: hidden;
}


/* ==========================================
  ヘッダー　フッター
========================================== */
._header_nav {
  transform: translateY(-100%);
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

._header_nav.is-show {
  transform: translateY(0);
}

._btn_modal_search {
  transform: translateY(-150%);
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

._btn_modal_search.is-show {
  transform: translateY(0);
}

.l_footer {
  margin: 0;
  padding: 116px 0 70px;
  background: #fff;
}

@media (max-width: 767px) {
  ._header_nav {
    transform: translateY(0);
  }
  
  ._btn_modal_search {
    transform: translateY(0);
  }
}


/* ==========================================
  メインコンテンツエリア
========================================== */
.main-content {
  /*background-color: #ffd8b6;*/
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  width: 100%;
  min-height: 100vh;
  /* max-width: 1400px; */
  margin: 0 auto;
  padding: 0 5px;
  
  position: relative;
  background-image: radial-gradient(#ff8d0030 5px, transparent 2px), radial-gradient(#eec086c2 5px, #ffd8b6 2px);
  background-size: 40px 40px;
  background-position: 0 0, 20px 20px;
  background-attachment: fixed;
}

/* 左右スライダー共通設定 */
.side-slider {
  width: 230px;
  height: 100vh;
  flex-shrink: 0;
  pointer-events: none;
  
  -webkit-mask-image: linear-gradient(
    to bottom,
    transparent 0%,
    black 15%,
    black 85%,
    transparent 100%
  );
  mask-image: linear-gradient(
    to bottom,
    transparent 0%,
    black 15%,
    black 85%,
    transparent 100%
  );
}

/* 中央エリア */
.center-content {
  flex: 1;
  padding: 40px 20px;
  text-align: center;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  color: #fff;
}

/* 動きを一定速度（滑らか）にするためのCSS指定 */
.swiper-wrapper {
  transition-timing-function: linear !important;
}

/* 縦スライダー用スライド1枚あたりの設定 */
.side-slider .swiper-slide {
  width: 230px !important;
  height: 260px !important;
  overflow: hidden;
  border-radius: 15px;
  background: #fff;
}

.swiper-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* デフォルトでは下部横スライダーを非表示 */
.bottom-slider {
  display: none;
}

/* イベントロゴ */
.event_logo {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
}

.event_logo img {
  width: 100%;
  max-width: 825px;
  display: inline-block;
}

/* ==========================================
  レスポンシブ対応 (画面幅 1000px 以下)
========================================== */
@media (max-width: 1000px) {
  .main-content {
    flex-direction: column;	/* 縦並びに変更 */
    justify-content: center;
    align-items: center;
    padding: 0;
    min-height: 70vh;
  }

  /* 左右の縦スライダーを非表示 */
  .side-slider {
    display: none;
  }

  /* 中央コンテンツの設定調整 */
  .center-content {
    width: 100%;
    min-height: auto;
    padding: 60px 10px;
    display: block;
    flex: none;
  }

  /* 下部横スライダーを表示 */
  .bottom-slider {
    display: block;
    width: 100%;
    padding: 20px 0;
    pointer-events: none;
    
    /* 左右の始めと終わりを透過させてぼかすグラデーションマスク */
    -webkit-mask-image: linear-gradient(
      to right,
      transparent 0%,
      black 15%,
      black 85%,
      transparent 100%
    );
    mask-image: linear-gradient(
      to right,
      transparent 0%,
      black 15%,
      black 85%,
      transparent 100%
    );
  }

  /* 横スライダー用のスライドサイズ (幅160px × 高さ200px などお好みで変更可能) */
  .bottom-slider .swiper-slide {
    width: 220px !important;
    height: 150px !important;
    overflow: hidden;
    border-radius: 20px;
    background: #fff;
  }
}


/* ==========================================
  ページ読み込み時の登場アニメーション
========================================== */

/* 1. 左スライダー（左外からふわっと出る） */
@keyframes slideInLeft {
  0% {
    opacity: 0;
    transform: translateX(-50px);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}

/* 2. 右スライダー（右外からふわっと出る） */
@keyframes slideInRight {
  0% {
    opacity: 0;
    transform: translateX(50px);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}

/* 3. 下部スライダー（下からふわっと出る） */
@keyframes slideInUp {
  0% {
    opacity: 0;
    transform: translateY(40px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

/* アニメーション開始前は非表示にする初期状態 */
.center-content,
.side-slider-left,
.side-slider-right,
.bottom-slider {
  opacity: 0;
}


/* ==========================================
  JSで追加するアニメーション実行用クラス
========================================== */
/* 中央テキスト：真っ先に出てくる（時間：1.0秒） */
.is-loaded .center-content {
  animation: slideInUp 1s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

/* 左スライダー：0.2秒遅れて左から登場 */
.is-loaded .side-slider-left {
  animation: slideInLeft 1.2s cubic-bezier(0.22, 1, 0.36, 1) 0.5s forwards;
}

/* 右スライダー：0.2秒遅れて右から登場 */
.is-loaded .side-slider-right {
  animation: slideInRight 1.2s cubic-bezier(0.22, 1, 0.36, 1) 0.5s forwards;
}

/* 下部横スライダー（1000px以下）：0.2秒遅れて下から登場 */
.is-loaded .bottom-slider {
  animation: slideInUp 1.2s cubic-bezier(0.22, 1, 0.36, 1) 0.5s forwards;
}


/* ==========================================
  メインテキスト
========================================== */
.main_text {
  width: 100%;
  text-align: center;
  padding: 60px 10px 50px;
  /*background: #f39800;
  font-family: 'M PLUS Rounded 1c', sans-serif;*/
  font-family: 'Hiragino Maru Gothic ProN', 'M PLUS Rounded 1c', sans-serif;
}

.main_text_inner {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  border-bottom: 5px dotted #833a05;
  padding-bottom: 50px;
}

.main_text_inner h2 {
  position: relative;
  display: inline-block;
  margin-bottom: 1.4em;
  border: none;
  font-size: 35px;
  color: #fff;
  font-weight: bold;
}

.week {
  display: none;
}

.week img {
  width: 100%;
}

.main_text_inner p {
  font-size: 22px;
  color: #fff;
  line-height: 1.8em;
}

@media (max-width: 768px) {
  .week {
    display: block;
    width: 100%;
    margin-bottom: 30px;
  }
  
  .main_text_inner h2 {
    font-size: 22px;
    line-height: 1.5em;
  }
  
  .main_text_inner p {
    font-size: 14px;
  }
}

.contents_bg {
  /*position: fixed;
  top: 0;
  left: 0;*/
  width: 100%;
  /*height: 100vh;
  z-index: -1;*/
  background: linear-gradient(180deg, #ff5e36ad 0%, #ffa630bf 50%, #ffd166bf 100%);
}


/* ==========================================
  店舗一覧
========================================== */
.item_list {
  width: 100%;
  padding: 100px 10px;
  font-family: 'Hiragino Maru Gothic ProN', 'M PLUS Rounded 1c', sans-serif;
}

.item_list_inner {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
}

.store_list {
  position: relative;
  display: inline-block;
  margin-bottom: 1em;
  border: none;
  font-size: 3em;
  font-weight: bold;
  color: #fff;
  border-left: 5px solid #833a05;
  padding-left: 12px;
  line-height: 1.4;
}

#product-container {
  display: flex;
  flex-wrap: wrap;
	justify-content: flex-start;
	gap: 16px;
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 5px;
}

.product-card {
	border: 1px solid #ccc;
	/*padding: 15px;*/
	margin: 10px 0;
	border-radius: 15px;
	background-color: #fffcda;
	/*background-color: #fafafa;*/
	display: block;
	box-sizing: border-box;
	width: calc((100% - 16px * 3) / 4);  /* 4列（隙間3つ分を引いて4で割る） */
	overflow: hidden;
	cursor: pointer;
	position: relative;
	transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;

	/* 最初は透明にして、30px下に下げておく */
	opacity: 0;
	transform: translateY(30px);

	/* アニメーションのスムーズさの調整 */
	transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1), box-shadow 0.3s ease, border-color 0.3s ease, opacity 0.6s ease;
}

/* 非表示用のアニメーション付きクラス */
.product-card.is-hidden {
	display: none;  /* 簡易的に消す場合 */
}


/* ========================================
  カード上のカスタムバッジ（最新）
======================================== */
.card-badge-container {
	position: absolute;
	top: 10px;
	right: 10px;
	z-index: 10;
	display: flex;
	gap: 6px;  /* badgeとbadge_2の間隔 */
	pointer-events: none;
}

.card-badge {
	background-color: #bd3e40;
	color: #ffffff;
	font-size: 12px;
	font-weight: bold;
	padding: 4px 10px;
	border-radius: 4px;
	line-height: 1;
	white-space: nowrap;
	box-shadow: 0 4px 8px rgba(255, 59, 48, 0.3);
}

/* badge_2 で少し色を変えたい場合は下記を変更（任意） */
.card-badge.badge-2 {
	background-color: #2ea7e0;
	box-shadow: 0 4px 8px #2ea7e057;
}

/* 既存の疑似要素バッジは無効化 */
.product-card::after {
	display: none !important;
}


/* ========================================
  モーダル内バッジスタイル（最新）
======================================== */
.modal-period-wrapper {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 10px;
	flex-wrap: wrap;
}
/*
#modal-badge, #modal-badge-2 {
	display: none;
	background-color: #ff3b30;
	color: #ffffff;
	font-size: 11px;
	font-weight: 800;
	padding: 4px 10px;
	border-radius: 4px;
	line-height: 1;
	white-space: nowrap;
	box-shadow: 0 4px 8px rgba(255, 59, 48, 0.3);
}
*/


/* カード上のカスタムバッジ（右上配置） */
.product-card::after {
	/* HTMLの data-badge="〇〇" からテキストを自動取得 */
	content: attr(data-badge);

	/* 初期状態は非表示 */
	display: none;

	/* 配置：カードの右上 */
	position: absolute;
	top: 10px;
	right: 10px;
	z-index: 10;

	/* デザイン：プロ機材のインジケーター風の鮮やかな赤バッジ */
	background-color: #ff3b30;
	color: #ffffff;
	font-size: 11px;
	font-weight: 800;
	padding: 4px 10px;
	border-radius: 4px;
	line-height: 1;
	white-space: nowrap;
	box-shadow: 0 4px 8px rgba(255, 59, 48, 0.3);
	pointer-events: none;  /* マウスイベントを透過させてカードホバーを邪魔しない */
}

/* data-badgeに文字が入力されている時だけ、バッジを出現させる */
.product-card[data-badge]:not([data-badge=""])::after {
	display: block;
}

/* 画面に入ったら付与する表示用クラス */
.product-card.is-show {
	opacity: 1;
	transform: translateY(0);
}

/* ホバー時の動き（表示が完了した状態のみに適用） */
.product-card.is-show:hover {
	transform: translateY(-3px) !important;
	box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
}

.product-card:hover {
	transform: translateY(-3px);
	box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
}

.store-card-text {
	padding: 20px 10px 30px;
}

@media screen and (max-width: 767px) {
	.product-card {
		width: calc((100% - 16px * 1) / 2);
	}
}

/* 希望のクラス名ごとにスタイルを当てることも可能 */
.ID {
	font-size: 12px;
	color: #888;
}

.NAME {
	font-size: 1.3em;
	font-weight: bold;
	color: #833a05;
	margin-bottom: 15px;
	line-height: 1.2em;
}

.PRICE {
	font-size: 16px;
	color: #e44d26;
}

.STORE {
  color: #833a05;
  margin-bottom: 5px;
  font-weight: bold;
  font-size: 0.9em;
}

.store-card-img {
	width: 100%;
	height: auto;
	position: relative;
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
}

.store-card-img-bg {
	width: 100%;
	aspect-ratio: 3 / 2;  /* 画像の比率（横 / 縦）を指定 */
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 36px;
	position: relative;
}

/* カテゴリごとの色分け設定 */
.product-card.First {
	background-color: #eafaf1;
	border-color: #2ecc71;
}

.product-card.Second {
	background-color: #fef9e7;
	border-color: #f1c40f;
}

.product-card.Full {
	background-color: #faeaea;
	border-color: #e54f4f;
}

/* 共通の基本スタイル（文字を太く、少し小さくなど） */
.period-label {
	font-size: 14px;
	font-weight: bold;
	margin-top: 8px;
}


/* ==========================================
  モーダル内共通スタイル
========================================== */
/* モーダル内のカスタムバッジ */
.modal-period-wrapper {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 15px;
}

/* もともとあった margin-bottom を打ち消して、ラッパー側で一括管理します */
.modal-period-label {
	margin-bottom: 0 !important;
}

#modal-badge, #modal-badge-2 {
	/* 初期状態は非表示 */
	display: none;

	/* デザイン：カード上の四角バッジと同じ仕様 */
	background-color: #bd3e40;
	color: #ffffff;
	font-size: 13px;
	font-weight: bold;
	padding: 5px 10px;
	border-radius: 4px;
	line-height: 1;
	white-space: nowrap;
	box-shadow: 0 4px 8px rgba(255, 59, 48, 0.3);
	letter-spacing: 0.1em;
}

#modal-badge-2 {
	background-color: #2ea7e0;
	box-shadow: 0 4px 8px #2ea7e057;
}

/* 文字が入っている時だけ表示 */
#modal-badge:not(:empty) {
	display: inline-block;
}

.period-label, .modal-period-label {
	display: inline-block;
	font-size: 12px;
	font-weight: bold;
	color: #fff;
	padding: 4px 10px;
	border-radius: 4px;
	margin-bottom: 10px;  /* 商品名との隙間 */
}

/* First（緑） */
.period-label.First, .modal-period-label.First { background-color: #2ecc71; }

/* Second（オレンジ） */
.period-label.Second, .modal-period-label.Second { background-color: #f39c12; }

/* Full（赤） */
.period-label.Full, .modal-period-label.Full { background-color: #e74c3c; }

/* other（その他） */
.other { color: #000; border: 1px solid #ccc; }

/* First（緑）のホバー時：さらに濃い緑に */
.product-card.First:hover { border-color: #00ff2b; }

/* Second（黄）のホバー時：オレンジ寄りの濃い色に */
.product-card.Second:hover { border-color: #fbff00; }

/* Full（赤）のホバー時：さらに濃い赤に */
.product-card.Full:hover { border-color: #ff0000; }

/* other（その他）のホバー時：黒に */
.product-card.other:hover { border-color: #833a05; }

/* モーダルの背景（画面全体を覆う黒いマスク） */
.modal-overlay {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, 0.6);

	/* 背後をぼかす */
	-webkit-backdrop-filter: blur(10px);  /* Safari用のベンダープレフィックス */
	backdrop-filter: blur(10px);

	display: flex;
	justify-content: center;
	align-items: center;
	opacity: 0; pointer-events: none;  /* 最初は非表示＆クリック不可 */
	transition: opacity 0.3s ease;
	z-index: 1000;
	font-family: 'Hiragino Maru Gothic ProN', 'M PLUS Rounded 1c', sans-serif;
}

/* モーダルが「開いている状態」のクラス */
.modal-overlay.is-open {
	opacity: 1;
	pointer-events: auto;  /* 表示されたらクリック可能にする */
}

/* モーダルの白いコンテンツボックス */
.modal-content {
  background-color: #fffcda;
	/*background-color: #fff;*/
	border-radius: 20px;
	width: 90%;
	max-width: 550px;
	position: relative;
	box-shadow: 0 4px 20px rgba(0,0,0,0.2);
	max-height: 85vh;
	overflow-y: auto;
	box-sizing: border-box;
}

.modal-header {
	position: sticky;
	top: 0;
	background-color: #fffcda;
	/*background: white;*/
	padding: 20px 24px 16px;
	border-bottom: 1px solid #00000026;
	z-index: 15;
	text-align: end;
	display: flex;
	justify-content: flex-end;
}

/* 閉じるボタン（右上） */
.modal-close-btn {
	position: relative;
	font-size: 24px;
	cursor: pointer;
	background: none;
	border: none;
	padding: 0;
	width: 40px;
	height: 40px;
	background-color: #ededed;
	color: #000;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: all 0.2s;  /* マウスホバー時の演出 */
}

.modal-close-btn:hover {
	background-color: #84c6ff;
	color: #fff;
}

.modal-body {
	padding: 24px;
}

/* モーダル内の画像 */
#modal-image, #modal-image-2 {
	width: 100%;
	aspect-ratio: 3 / 2;
	background-size: cover;
	background-position: center;
	margin-bottom: 15px;
	border-radius: 4px;
}

#modal-image-2 {
  margin-top: 30px;
}

#modal-text {
  margin-bottom: 5px;
  font-weight: bold;
  font-size: 1.35em;
  color: #833a05;
}

#modal-name, #modal-name-2, #modal-name-3, #modal-name-4 {
  margin-bottom: 10px;
  font-weight: bold;
  font-size: 2em;
  color: #833a05;
}

#modal-name-2, #modal-name-3, #modal-name-4 {
  margin-top: 20px;
}

#modal-price, #modal-price-2, #modal-price-3, #modal-price-4 {
	color: #e44d26;
	font-weight: bold;
	font-size: 17px;
	margin-bottom: 10px;
}

#modal-preview {
  font-size: 1.4em;
  font-weight: bold;
  color: #f00;
  margin-top: 15px;
}

@media (min-width: 768px) {
	/* 1. スクロールバー全体の横幅（これがないとバー自体が表示されません） */
	.modal-content::-webkit-scrollbar {
		width: 6px;  /* ハンドルの太さになります */
	}

	/* 2. 【重要】レーン（背景）を完全に透明にする */
	.modal-content::-webkit-scrollbar-track {
		background: transparent;  /* 背景を透明に */
		margin: 16px 0;
	}

	/* 3. ハンドル（動く部分）のデザイン */
	.modal-content::-webkit-scrollbar-thumb {
		background: #cccccc;  /* ハンドルの色 */
		border-radius: 10px;  /* 角丸にして滑らかに */
	}

	/* 4. マウスを乗せたときにハンドルを少し濃くする（親切設計） */
	.modal-content::-webkit-scrollbar-thumb:hover {
		background: #aaaaaa;
	}
}

/* --- ここからスマホ用のスタイルを追加 --- */
@media screen and (max-width: 767px) {
	/* 1. 背景マスクを画面全体にぴったり合わせる */
	.modal-overlay {
		align-items: stretch;  /* 中身を縦いっぱいに引き伸ばす */
		justify-content: flex-end;  /* 中身を右端に寄せる */
		-webkit-backdrop-filter: none;  /* スマホでは重い場合があるため任意で外す（好みで残してもOK） */
		backdrop-filter: none;
	}

	/* 2. モーダル本体を画面いっぱいにし、初期位置を「右側（画面外）」に隠す */
	.modal-content {
		width: 100%;
		max-width: 100%;  /* 横幅いっぱい */
		max-height: 100vh;  /* 縦幅いっぱい */
		border-radius: 0;  /* 角丸をなくす */
		margin: 0;
		box-sizing: border-box;
		overflow-y: auto;  /* 中身が溢れたらモーダル内だけをスクロールできるようにする */
		transform: translateX(100%);  /* 初期状態：画面の右側に完全に隠しておく（横幅の100%分、右にずらす） */
		transition: transform 0.3s ease-out;  /* 変化にかかる時間（0.3秒かけて動く） */
	}

	/* 3. モーダルが開いたとき（is-openがついたとき）の動き */
	.modal-overlay.is-open .modal-content {
		transform: translateX(0);  /* 元の位置（画面内）に戻ってくる */
	}
}


/* ==========================================
  記事リンク
========================================== */
.article_link {
  width: 100%;
  padding: 100px 10px;
  background-color: #d2a47e;
  border-top: 5px solid #ff6f00;
  font-family: 'Hiragino Maru Gothic ProN', 'M PLUS Rounded 1c', sans-serif;
}

.article_link_inner {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
}

.article_link_inner h2 {
  position: relative;
  display: inline-block;
  margin-bottom: 1em;
  border: none;
  font-size: 3em;
  font-weight: bold;
  color: #fff;
  border-left: 5px solid #833a05;
  padding-left: 12px;
  line-height: 1.4;
}

.article_link_list {
  display: flex;
  gap: 40px;
}

article {
  width: calc(35% - 38px);
  text-align: center;
}

.image {
  display: block;
  height: auto;
  border-radius: 10px;
  position: relative;
  overflow: hidden;
  margin-bottom: 1.5em;
  border: 3px solid #ff6f00;
}

.image img {
  width: auto;
  transition-property: opacity;
  transition-duration: 0.3s;
}
.image img:hover {
  opacity: 0.7;
}

.title {
  font-weight: bold;
  font-size: 1.3em;
  line-height: 1.2em;
  padding-bottom: 10px;
  color: #fff;
}

@media (max-width: 768px) {
  
  .article_link_list {
    display: block;
    width: 100%;
  }
  
  article {
    margin-bottom: 40px;
    padding: 1em 0.7em 0.1em 0.7em;
    width: 100%;
  }
  
  .image {
    border-radius: 16px;
    width: 100%;
  }
  
  .title {
    padding-bottom: 20px;
    border-bottom: 5px dotted #ffeb00;
  }
}


/* ==========================================
  朝活クイズバナー
========================================== */
.quiz_banner {
  background: #fff;
  width: 100%;
  padding: 100px 10px 0;
  text-align: center;
  position: relative;
  font-family: 'Hiragino Maru Gothic ProN', 'M PLUS Rounded 1c', sans-serif;
}

.quiz_banner_inner {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
}

.asakatu_link {
  display: inline-block;
  margin-bottom: 30px;
  transition: opacity .3s ease-out 0s;
}
.asakatu_link:hover {
  opacity: .7;
}

.asakatu_link img {
  width: 100%;
}

.end_comment {
  font-size: min(3.9vw, 24px);
  margin-bottom: 30px;
  display: block;
  line-height: normal;
  color: #f00;
  font-weight: bold;
}

.asakatu_text {
  text-align: center;
  line-height: normal;
  font-size: min(2.5vw, 24px);
  font-weight: bold;
}

.asakatu_text span {
  color: #f00;
  font-weight: bold;
}

.sp {
  display: none;
}

@media (max-width: 425px) {
  .asakatu_text {
    font-size: min(3.4vw, 25px);
  }
  
  .sp {
    display: block;
  }
}


/* ==========================================
  SNSリンク
========================================== */
.sns-section {
  width: 100%;
  background: #fff;
  padding: 100px 10px;
  border-bottom: 5px solid #ff6f00;
  font-family: 'Hiragino Maru Gothic ProN', 'M PLUS Rounded 1c', sans-serif;
}

.sns-container {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px 12px;
  text-align: left;
}
@media (max-width: 480px) {
  .sns-container {
    grid-template-columns: 1fr;
  }
}

.sns-section_inner {
  width: 100%;
  max-width: 700px;
  margin: 0 auto;
  text-align: center;
}

.catch {
  display: inline-block;
  margin: 0 0 20px;
  padding: 1.5rem 2rem 0.8rem;
  border: 3px solid #ff106a;
  border-radius: 10px;
  background: #ff106a;
  font-size: min(4vw, 22px);
  color: #fff;
  font-weight: bold;
}
.catch:after {
  display: block;
  position: relative;
  bottom: -20px;
  left: 1em;
  width: 0;
  height: 0;
  content: '';
  border-width: 10px 10px 0 10px;
  border-style: solid;
  border-color: #ff106a transparent transparent transparent;
}

.sns-heading {
  position: relative;
  display: inline-block;
  margin-bottom: 1.4em;
  border: none;
  font-size: 32px;
  color: #333;
  font-weight: bold;
}

.sns-btn {
  display: flex;
  align-items: center;
  padding: 12px 16px;
  border-radius: 16px;
  text-decoration: none;
  font-weight: bold;
  font-size: 1.5rem;
  transition: all 0.1s ease;
  box-sizing: border-box;
}
.sns-btn:hover {
  transform: translateY(2px);
}

.line-btn {
  background-color: #e8f5e9;
  color: #1b5e20;
  border: 3px solid #00c853;
  box-shadow: 0 4px 0 #00c853;
}
.line-btn:hover {
  box-shadow: 0 2px 0 #00c853;
}

.teny_app-btn {
  background-color: #fff2ca;
  color: #007DDC;
  border: 3px solid #007DDC;
  box-shadow: 0 4px 0 #007DDC;
}
.teny_app-btn:hover {
  box-shadow: 0 2px 0 #007DDC;
}

.x-btn {
  background-color: #f0f0f0;
  color: #0f1419;
  border: 3px solid #0f1419;
  box-shadow: 0 4px 0 #0f1419;
}
.x-btn:hover {
  box-shadow: 0 2px 0 #0f1419;
}

.insta-btn {
  background-color: #fce4ec;
  color: #d81b60;
  border: 3px solid #e91e63;
  box-shadow: 0 4px 0 #e91e63;
}
.insta-btn:hover {
  box-shadow: 0 2px 0 #e91e63;
}

.official-sns-icon {
  width: 40px;
  height: 40px;
  object-fit: contain;
}

.sns-label {
  flex-grow: 1;
  margin-left: 16px;
  font-weight: bold;
}

.sns-arrow {
  display: inline-block;
  font-size: 1.7rem;
  font-weight: bold;
  margin-left: 8px;
  transition: transform 0.2s ease-out;
  opacity: 0.8;
}

.sns-btn:hover .sns-arrow {
  transform: translateX(6px);
}

@media (max-width: 768px) {
  .sns-heading {
    font-size: min(5vw, 24px);
  }
}


/* ==========================================
  伊勢丹通信
========================================== */
.flyer-card {
  position: relative;
  max-width: 700px;
  width: 95%;
  margin: 100px auto;
  padding: 30px 20px;
  background-color: rgb(255, 253, 231);
  border: 3px solid #3f51b5;
  border-radius: 16px;
  box-shadow: 6px 6px 0px #7986cb;
  font-family: 'Hiragino Maru Gothic ProN', 'M PLUS Rounded 1c', sans-serif;
  box-sizing: border-box;
}

.flyer-header {
  text-align: center;
  margin-bottom: 24px;
}

.flyer-title {
  font-size: 2.5rem;
  color: #3f51b5;
  margin: 6px 0 0 0;
  font-weight: 800;
  line-height: 1.3;
}

.flyer-text {
  font-size: 1.6rem;
  color: #3f51b5;
  margin: 15px 0 0 0;
  font-weight: 800;
  line-height: 1.3;
}

.flyer-actions {
  display: flex;
  gap: 12px;
}

.flyer-actions a {
  flex: 1;
  text-align: center;
  padding: 15px 12px;
  border-radius: 24px;
  font-weight: bold;
  font-size: 1.6rem;
  text-decoration: none;
  transition: all 0.1s ease;
  display: inline-block;
  box-sizing: border-box;
  background-color: #ff6f00;
  color: #ffffff;
  border: 2px solid #e65100;
  box-shadow: 0 4px 0 #e65100;
}
.flyer-actions a:hover {
  transform: translateY(2px);
  box-shadow: 0 2px 0 #e65100;
}

/* スマホ対応 */
@media (max-width: 480px) {
  .flyer-actions {
    flex-direction: column;
  }
}


/* ==========================================
  イベント情報
========================================== */
.pop-event-card {
  max-width: 700px;
  width: 95%;
  margin: 100px auto;
  padding: 30px 24px;
  background-color: #fffde7; /* レモンイエロー */
  border: 4px solid #ff6f00; /* オレンジ枠 */
  border-radius: 24px;
  box-shadow: 6px 6px 0px #ffb300; /* クッキリした影 */
  font-family: 'Helvetica Neue', Arial, 'Hiragino Kaku Gothic ProN', sans-serif;
  box-sizing: border-box;
}

.pop-header {
  text-align: center;
  margin-bottom: 24px;
}

.pop-title {
  font-size: 2.5rem;
  color: #833a05;
  margin: 6px 0 0 0;
  font-weight: 800;
  line-height: 1.3;
}

.pop-details {
  background: #ffffff;
  padding: 16px 20px;
  border-radius: 16px;
  border: 2px dashed #ffd54f; /* チケット風ステッチ */
  margin: 0;
}

.pop-row {
  display: flex;
  align-items: center;
  padding: 12px 0;
  border-bottom: 2px dotted #f0f0f0;
}

.pop-row:last-child {
  border-bottom: none;
}

.pop-row dt {
  width: 130px;
  font-weight: bold;
  color: #ff6f00;
  display: flex;
  align-items: center;
  flex-shrink: 0;
  font-size: 1.6rem;
}

.pop-dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  margin-right: 10px;
  flex-shrink: 0;
}

.dot-orange { background-color: #ff6f00; }
.dot-pink   { background-color: #ff4081; }
.dot-green  { background-color: #00e676; }
.dot-blue   { background-color: #00b0ff; }
.dot-purple { background-color: #aa00ff; }
.dot-brown { background-color: #833a05; }

.pop-row dd {
  margin: 0;
  color: #37474f;
  font-weight: 600;
  font-size: 1.5rem;
  line-height: 1.5;
}

@media (max-width: 480px) {
  .pop-row {
    flex-direction: column;
    align-items: flex-start;
  }
  .pop-row dt {
    width: 100%;
    margin-bottom: 4px;
  }
}


/* ==========================================
  Google Map
========================================== */
.Google-Map {
  max-width: 1000px;
  margin: 100px auto;
  width: 95%;
  font-family: 'Zen Maru Gothic', 'M PLUS Rounded 1c', sans-serif;
}

.Google-Map iframe {
  aspect-ratio: 16 / 9;
  width: 100%;
  height: 450px;
  margin: 1em auto;
  border: 4px solid #ff6f00;
  box-shadow: 6px 6px 0px #ffb300;
  border-radius: 16px;
  overflow: hidden;
  line-height: 0;
  display: block;
}

.access_area_name {
  text-align: center;
  letter-spacing: .05em;
  line-height: 1.5;
  font-size: 2em;
}

.access_area_small {
  text-align: center;
  letter-spacing: .05em;
  line-height: 2.3;
  font-size: 1.5em;
}


/* ==========================================
  注意事項
========================================== */
.precautions {
  width: 100%;
  text-align: center;
  padding: 60px 10px 50px;
  font-family: 'Hiragino Maru Gothic ProN', 'M PLUS Rounded 1c', sans-serif;
}

.precautions_inner {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
}

.att {
  display: inline-block;
  background: #fff;
  padding: 35px 40px 30px;
  font-size: 14px;
  text-align: left;
  box-shadow: inset 0px 0px 5px rgba(0, 0, 0, 0.5);
}
@media (max-width: 768px) {
  .att {
    padding: 20px 15px;
  }
}

.att_list {
  padding-left: 1em;
}

.att_list li {
  list-style-type: "・";
  margin: 5px 0;
  line-height: 1.5em;
}