@charset "UTF-8";

/* =========================
  Reset / Base
========================= */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

img {
  width: 100%;
  height: auto;
  display: block;
  border: 0;
}

ul,
ol {
  list-style: none;
}

body {
  font-family: Meiryo, 'Hiragino Kaku Gothic ProN', 'Hiragino Sans', sans-serif;
  line-height: 1;
  text-align: center;
  -webkit-text-size-adjust: 100%;
}

/* =========================
  Layout
========================= */

.contents-bg {
  background-color: #efefef;
}

#contents {
  max-width: 1056px;
  margin: 0 auto;
  font-size: 0;
}

.content_body.main_v {
  position: relative;
  max-width: 1056px;
  width: 100%;
  margin: 0 auto;
}

.content_body img {
  vertical-align: bottom;
}

/* =========================
  Main Visual 共通
========================= */
.main_v {
  position: relative;
  overflow: visible;
}

/* =========================
  固定バナー
========================= */
.coupon-fix-banner {
  position: fixed;
  /* safe-area-inset-top でノッチ・アドレスバー高さを吸収 */
  top: calc(-1 * (env(safe-area-inset-top, 0px) + 200px));
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: 1056px;
  z-index: 1000;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.4s ease, top 0.4s ease;
}

.coupon-fix-banner.is-visible {
  top: env(safe-area-inset-top, 0px);
  opacity: 1;
  pointer-events: auto;
}

.coupon-fix-banner img {
  width: 100%;
  height: auto;
  display: block;
}

.coupon-fix-banner .banner-pc { display: block; }
.coupon-fix-banner .banner-sp { display: none; }

@media (max-width: 767px) {
  .coupon-fix-banner .banner-pc { display: none; }
  .coupon-fix-banner .banner-sp { display: block; }
}

/* =========================
  メニューセクション
  pc_01.webp を背景として縦に repeat
========================= */
.coupon-menu-section {
  position: relative;
  background-image: url('../images/202605_26coupon_pc_01.webp');
  background-size: 100% auto;
  background-position: left top;
  background-repeat: repeat-y;
}

/* pc_01 の <picture> は非表示（背景として使うため） */
.coupon-menu-section > picture {
  display: none;
}

/*
  メニューグリッド：通常フローで高さを自動決定。
  左右パディング: 80px / 1056px ≈ 7.57%
*/
.coupon-menu-grid {
  width: 100%;
  padding: 5% 7.57%;

  display: grid;
  grid-template-columns: 1fr 1fr;
  /* 横の隙間: 40px / 896px ≈ 4.46% */
  column-gap: calc(40 / 896 * 100%);
  /* 縦の隙間: 実寸50px基準、最小12px・最大50px */
  row-gap: clamp(12px, calc(50 / 1056 * 100vw), 50px);
}

/* =========================
  メニューアイテム（スクロールリビール）
========================= */
.coupon-menu-item {
  opacity: 0;
  transform: translateY(20px);
  transition:
    opacity 0.55s ease var(--reveal-delay, 0ms),
    transform 0.55s ease var(--reveal-delay, 0ms);
  will-change: opacity, transform;
}

.coupon-menu-item.is-revealed {
  opacity: 1;
  transform: translateY(0);
}

/* =========================
  kids / lucky 帯画像（横2列分・full-span）
========================= */
.coupon-menu-fullspan {
  grid-column: 1 / -1;   /* 2列全幅 */
  opacity: 0;
  transform: translateY(20px);
  transition:
    opacity 0.55s ease var(--reveal-delay, 0ms),
    transform 0.55s ease var(--reveal-delay, 0ms);
  will-change: opacity, transform;
}

.coupon-menu-fullspan.is-revealed {
  opacity: 1;
  transform: translateY(0);
}

/* kids / lucky：上は row-gap に加えて余白を広く、下は row-gap を打ち消して狭く */
.coupon-menu-fullspan-top-gap {
  margin-top: clamp(8px, calc(24 / 1056 * 100vw), 24px);
  margin-bottom: calc(-1 * clamp(6px, calc(30 / 1056 * 100vw), 30px));
}

/* =========================
  SP レイアウト
========================= */
@media (max-width: 767px) {
  .coupon-menu-grid {
    grid-template-columns: 1fr;
    column-gap: 0;
    row-gap: clamp(10px, calc(50 / 390 * 100vw), 50px);
    padding: 5% 10.26%;
  }

  /* SP でも full-span は1列全幅 */
  .coupon-menu-fullspan {
    grid-column: 1 / -1;
  }
}

/* =========================
  h1 センタリング解除
========================= */
.mod-wrap .mod-heading {
  text-align: left;
}

/* =========================
  SP のみ非表示（menu_18 など空白画像）
========================= */
@media (max-width: 767px) {
  .coupon-menu-sp-hidden {
    display: none;
  }
}

/* =========================
  sec00 画像内リンクエリア（透明オーバーレイ）
  座標は画像の % 位置で指定
  PC画像: 2112x1750 / SP画像: 1056x1440
========================= */
.sec00-wrap {
  position: relative;
}

.sec00-link {
  position: absolute;
  display: block;
  /* デバッグ時は background: rgba(255,0,0,0.3); を有効に */
}

/* --- PC用（768px以上で表示） --- */
/* 「すかいらーくアプリ」赤文字エリア */
.sec00-link-app.sec00-link-pc {
  left:   25%;
  width:  19%;
  top:    87.5%;
  height: 5.5%;
}
/* 「こちら」赤文字エリア */
.sec00-link-here.sec00-link-pc {
  left:   83%;
  width:  8%;
  top:    87.5%;
  height: 5.5%;
}

/* SP用は非表示（PCのみ） */
.sec00-link-sp { display: none; }

@media (max-width: 767px) {
  /* PCリンクを非表示 */
  .sec00-link-pc { display: none; }

  /* SP用を表示 */
  .sec00-link-sp { display: block; }

  /* 「すかいらーくアプリ」SP */
  .sec00-link-app.sec00-link-sp {
    left:   35%;
    width:  23%;
    top:    87%;
    height: 4.5%;
  }
  /* 「こちら」SP */
  .sec00-link-here.sec00-link-sp {
    left:   50%;
    width:  11%;
    top:    92%;
    height: 4.5%;
  }
}