@charset "UTF-8";

/* =========================================================
   基本
========================================================= */
html { scroll-behavior: smooth; font-family: "Zen Kaku Gothic New", "Noto Sans JP",sans-serif;}

/* アンカー到達時に上の固定UIと重ならないよう余白を確保 */
#shop-list,
#shpp { scroll-margin-top: calc(var(--tabs-h, 60px) + 16px); }

/* Variables */
:root{
  --phone-w: 430px;
  --tabs-h: 60px;
  --gap: 16px;

  /* color tokens */
  --ink: #282828;
  --muted: #282828;
  --cream: #FFFBF4;
  --card: #FFFFFF;
  --line: #07C160;
  --cta-red: #CC0E1E;
  --cta-red-dk: #CC0E1E;
  --border: #E9E4DB;

  /* ui */
  --btn-radius: 14px;
  --card-radius: 16px;
  --shadow-1: 0 6px 16px rgba(0,0,0,.15);
  --shadow-2: 0 12px 32px rgba(0,0,0,.18);

  --bg-tile: url("../img/area_lp/common/pc_bg.png");
  --bg-course: url("../img/area_lp/common/souki_bg.png");
  --bg-courses: url("../img/area_lp/common/course_bg.png");

  /* 左上ロゴとサイドのオフセット */
  --logo-top: 20px;
  --logo-h: 32px;
  --gap-from-logo: 30px;
  --rail-offset: calc(var(--logo-top) + var(--logo-h) + var(--gap-from-logo));

  /* TOPへ戻る（画像サイズ） */
  --top-btn-size-pc: 92px;
  --top-btn-size-sp: 56px;

  /* buttons (icons & hover ring) */
  --ico-reserve-img:       url("../img/area_lp/common/check_icon.png");
  --ico-reserve-img-hover: url("../img/area_lp/common/check_icon-hover.png");
  --ico-line-img:          url("../img/area_lp/common/line_icon.png");
  --ico-line-img-hover:    url("../img/area_lp/common/line_icon-hover.png");
  --ico-detail-img:        url("../img/area_lp/common/shop_icon.png");

  --ring-w: 3px;
  --detail-ink: #333;
}

/* 背景タイル */
body.area-lp{
  font-family: "Zen Kaku Gothic New", "Noto Sans JP",sans-serif;
  color: var(--ink);
  background-image: var(--bg-tile);
  background-repeat: repeat;
  background-position: top center;
}

/* 左上固定ロゴ（レイアウトに影響しない） */
.area-lp__logo{
  position: fixed;
  top: 20px; left: 30px;
  z-index: 300;
  display: inline-flex;
  align-items: center;
}
.area-lp__logo img{ height: 63px; }

/* 左右レール（PCのみ表示） */
.area-lp__rail{
  position: fixed;
  top: 0;
  height: 100%;
  width: calc((100% - var(--phone-w)) / 2);
  background-image: var(--bg-tile);
  background-repeat: repeat;
  z-index: 1;
}
.area-lp__rail--left{ left: 0; }
.area-lp__rail--right{ right: 0; }

.area-lp__side-body{
  position: relative;
  width: 65%;
  margin: 0 auto;
  top: var(--rail-offset);
  display: flex;
  flex-direction: column;
  gap: 24px;
  align-items: center;
}

/* === 調整：右レーン下部に配置（デスクトップのみ） ================== */
@media (min-width: 1024px){
  .area-lp__rail--right{
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
    padding-bottom: 32px;
  }
  .area-lp__rail--right .area-lp__side-body{
    position: static;
    top: auto;
    margin-top: 0;
    width: 65%;
  }
}
/* ===================================================================== */

/* 右サイドのQR/予約 */
.area-lp__qr-title{ font-weight: 700; text-align: center; margin-bottom: 16px; }
.area-lp__qr-wrap{ display: flex; justify-content: space-around; align-items: center; gap: 12px; }
.area-lp__qr-item{ width: 60%; text-align: center; }
.area-lp__qr-block{ display: flex; flex-direction: column; align-items: center; gap: 16px; }

/* 中央レーン */
.area-lp__center{ position: relative; z-index: 2; width: var(--phone-w); margin: 0 auto; }

/* 追従ボタン */
.area-lp__follow{
  position: sticky;
  bottom: 0;
  z-index: 400;
  pointer-events: none;
  transition: opacity .2s ease, transform .2s ease;
}
.area-lp__follow-inner{ max-width: var(--phone-w, 430px); margin: 0 auto; }
.area-lp__follow-btn{
  pointer-events: auto;
  display: block;
  width: 100%;
  text-align: center;
  font-weight: 800;
  font-size: 18px;
  line-height: 1;
  color: #fff;
  text-decoration: none;
  padding: 14px 20px;
  background: linear-gradient(180deg, #000 0%, #000 100%);
  box-shadow: 0 8px 20px rgba(0,0,0,.18);
}
.area-lp__follow.is-hidden{ opacity: 0; transform: translateY(8px); pointer-events: none; }

/* サイド下部 */
.area-lp__side-footer{ position: relative; display: grid; gap: 16px; margin-top: 24px; }
.area-lp__reserve-text{ text-align: center; font-weight: 700; }

/* 画像ボタン（ホバーはJS制御） */
.area-lp__image-button{ position: relative; display: block; margin: 0 auto; }
.area-lp__image-button span{
  position: absolute;
  left: 10%; top: 48%;
  transform: translateY(-48%);
  font-weight: 700; font-size: 20px; color: #9C2614;
}

/* =========================================================
   タブ（上部固定）
========================================================= */
.area-lp__tabs{
  position: fixed; top: 0; left: 0; right: 0;
  z-index: 100; margin: 0 auto; max-width: var(--phone-w);
  display: flex; justify-content: center; align-items: center;
  background: #fff;
}
.area-lp__tabs-inner{
  max-width: var(--phone-w, 430px);
  margin: 0 auto;
  padding: 8px 12px;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 35px;
  height: 75px;
}
.area-lp__tabs-title{
  display: flex; justify-content: center; align-items: center; min-width: 0;
}
.area-lp__tabs-title img{
  display: block; width: 100%; height: auto;
  max-height: calc(var(--tabs-h) - 14px); object-fit: contain;
}

/* 既存指定（ロゴ 70x19 を厳守） */
.area-lp__tabs-logo,
.area-lp__tab-logo{ display: block; margin: 0 auto; }
.area-lp__tab{ width: 215px; height: 75px; text-align: center; }
.area-lp__tab--enkai{ padding: 4px 0; background: #880000; border-right: 2px solid #bababa; }
.area-lp__tab--toranomaki{ padding: 10px 0; background: #efefef; border-left: 2px solid #bababa; }

.area-lp__tabs-ham{
  -webkit-tap-highlight-color: transparent;
  appearance: none; border: 0; background: transparent;
  padding: 6px; width: 44px; height: 44px; border-radius: 8px;
  display: grid; place-items: center;
}
.area-lp__tabs-ham:hover{ background: rgba(0, 0, 0, .04); }
.area-lp__tabs-ham img,
.area-lp__ham-btn img{ width: 15px; height: 15px; display: block; }

/* 縦スクロールエリア本体 */
.area-lp__phone{ margin-top: 0; background: #FCF2E7; overflow: visible; }

/* ヒーロー/メニュー */
.area-lp__mv{ position: relative; }
.area-lp__fixed-ui{ position: relative; }
.area-lp__ham-btn{
  position: absolute; width: 42px; height: 42px; top: -10px; right: 2px;
  z-index: 101; cursor: pointer; border: 0; background: none; padding: 0;
}
.area-lp__ham-panel{
  display: none; position: fixed; top: var(--tabs-h); right: 0; left: 0;
  margin: 0 auto; max-width: var(--phone-w); width: 100%; height: 100vh;
  background: #FFF0F0; padding: 20px; z-index: 100; overflow: auto; -webkit-overflow-scrolling: touch;
}
.area-lp__ham-panel.is-active{ display: block; }
.area-lp__ham-reserve{ text-align: center; font-weight: 700; font-size: 20px; }
.area-lp__ham-link{ display: block; width: 70%; margin: 30px auto 0; }
.area-lp__mv-top{ position: relative; margin: 0; }
.area-lp__mv-top img{ vertical-align: bottom; }
.reservation_down{
  position: absolute;
  right: auto;
  left: 50%;
  bottom: 20px;
  transform: translateX(-50%);
  width: clamp(280px, 92vw, 390px);
}
.reservation_down img{
  width: min(390px, 50vw)!important;
  height: auto;
}
/* =========================================================
   Party セクション
========================================================= */
.area-lp__party{
  background-image: url("../img/area_lp/common/party_bg.png");
  background-repeat: repeat;
  background-position: center top;
  padding: 30px 0;
  color: #fff;
}
.area-lp__party-inner{ width: min(92%, 420px); margin-inline: auto; }
.area-lp__party-catch{ margin: 0 0 20px; line-height: 1.6; text-align: center; font-weight: 700; font-size: 26px; }
.area-lp__party-hero{ margin: 8px 0 0; border-radius: 10px; overflow: hidden; }
.area-lp__party-hero img{ display: block; width: 100%; height: auto; }
.area-lp__party-box{ position: relative; margin: 0 0 80px; }
.area-lp__party-sub{
  position: absolute; bottom: -65px; left: -18px;
  padding: 20px 16px; width: 100%; max-width: 331px;
  font-size: 20px; font-weight: 700; background: #000; border-radius: 0 2px 2px 0;
}
.area-lp__party-lead{ margin: 0; font-size: 16px; line-height: 1.5; }
.area-lp__party-gallery{ margin-top: 32px; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.area-lp__party-thumb{ margin: 0; overflow: hidden; aspect-ratio: 1 / 1; } /* ← 正方形可変 */
.area-lp__party-thumb img{
  display: block;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover;
}

/* =========================================================
   店舗カード（デザイン反映）
========================================================= */
.area-lp__section{ background: var(--cream); }
.area-lp__area-tag{ color: #D53100; }
.area-lp__section-head{
  border-bottom: 2px solid #800;
  max-width: 300px; margin: 0 auto;
  font-size: 1.8rem; color: #880000;
  font-family: "Noto Serif JP", serif;
  text-align: center;
}

/* wrapper */
.area-lp__shop{ padding: 12px 12px 26px; }

/* card */
.area-lp__shop-card{
  padding: 16px 16px 18px;
}

/* head: 120 image + title */
.area-lp__shop-head{
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: 16px;
  min-height: 120px;
  align-items: start;
}
.area-lp__shop-photo{ margin: 0; width: 120px; height: 120px; overflow: hidden; }
.area-lp__shop-photo img{ display: block; width: 120px; height: 120px; object-fit: cover; }
.area-lp__shop-title{ display: grid; align-content: center; gap: 4px; }
.area-lp__shop-brand{ margin: 0; font-weight: 700; font-size: 18px; color: var(--ink); }
.area-lp__shop-name{ margin: 0; line-height: 1.35; font-weight: 800; font-size: 20px; }
.area-lp__shop-name a{ color: var(--ink); text-decoration: none; }
.area-lp__shop-name a:hover{ text-decoration: underline; }

/* specs */
.area-lp__shop-specs{ margin-top: 10px; }
.area-lp__shop-specs--half{ max-width: 100%; }
@media (max-width: 430px){
  .area-lp__shop-specs--half{ max-width: 100%; }
}
.area-lp__shop-rows{ display: grid; gap: 12px; }
.area-lp__shop-row{
  display: grid;
  grid-template-columns: 96px 1fr;
  column-gap: 16px;
  align-items: start;
}
.area-lp__shop-row dt{
  color: var(--muted);
  font-weight: 700;
  white-space: nowrap;
}
.area-lp__shop-row dd{ margin: 0 auto; width: 81%; color: var(--ink); }
.area-lp__shop-zip{ font-variant-numeric: tabular-nums; opacity: .9; }
.area-lp__shop-address,
.area-lp__shop-address2{ line-height: 1.6; }

/* CTA area */
.area-lp__shop-actions{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: 18px;
}

/* base button */
.area-lp__btn{
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  padding: 15px 18px;
  border-radius: var(--btn-radius);
  font-weight: 900;
  font-size: 18px;
  text-decoration: none;
  box-shadow: var(--shadow-1);
  transition: transform .04s ease, filter .14s ease, box-shadow .14s ease, background .14s ease, color .14s ease;
  will-change: transform;
}
.area-lp__btn:active{ transform: translateY(1px); box-shadow: 0 4px 12px rgba(0,0,0,.18); }

/* icons（画像で表示） */
.area-lp__btn::before{
  content: "";
  width: 22px; height: 22px;
  margin-right: 6px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

/* reserve */
.area-lp__btn--reserve{
  grid-column: 1 / -1;
  background: linear-gradient(180deg, var(--cta-red) 0%, var(--cta-red-dk) 100%);
  color: #fff;
}
.area-lp__btn--reserve::before{ background-image: var(--ico-reserve-img); }

/* LINE */
.area-lp__btn--line{
  background: var(--line);
  color: #fff;
}
.area-lp__btn--line::before{ background-image: var(--ico-line-img); }

/* 店舗詳細（白ボタン） */
.area-lp__btn--detail{
  background: #fff;
  border: 1px solid var(--border);
  color: var(--ink);
}
.area-lp__btn--detail::before{ background-image: var(--ico-detail-img); }

/* === Hover 見た目調整（画像準拠） ============================== */
/* 予約する：ホバーで白地＋赤アウトライン＋赤文字＋カラーアイコン */
.area-lp__btn--reserve:hover,
.area-lp__btn--reserve:focus-visible{
  background: #fff !important;
  color: var(--cta-red) !important;
  filter: none !important;
  box-shadow: var(--shadow-1), inset 0 0 0 var(--ring-w) var(--cta-red) !important;
}
.area-lp__btn--reserve:hover::before,
.area-lp__btn--reserve:focus-visible::before{
  background-image: var(--ico-reserve-img-hover);
}

/* LINE：ホバーで白地＋LINEグリーン枠＋グリーン文字＋カラーアイコン */
.area-lp__btn--line:hover,
.area-lp__btn--line:focus-visible{
  background: #fff !important;
  color: var(--line) !important;
  filter: none !important;
  box-shadow: var(--shadow-1), inset 0 0 0 var(--ring-w) var(--line) !important;
}
.area-lp__btn--line:hover::before,
.area-lp__btn--line:focus-visible::before{
  background-image: var(--ico-line-img-hover);
}

/* 店舗詳細：ホバー時は白地＋濃い枠＋濃い文字（アイコンは同一） */
.area-lp__btn--detail:hover,
.area-lp__btn--detail:focus-visible{
  background: #fff !important;
  color: var(--detail-ink) !important;
  box-shadow: var(--shadow-1), inset 0 0 0 var(--ring-w) var(--detail-ink) !important;
}

/* =========================================================
   フッター（旧ルール：残すが後段で上書き）
========================================================= */
.area-lp__footer{
  position: relative; margin: 0 auto; width: var(--phone-w);
  background: #F7F5DE; z-index: 2;
}
.area-lp__footer-brand{ width: 100%; text-align: center; position: relative; padding: 20px 0; }
/* 旧：右上配置（後段で上書きする） */
#area-lp-top{ width: 40px; height: 40px;}
.area-lp__footer-brand-inner{ width: 42%; margin: 0 auto; font-size: 12px; color: #000; }
.area-lp__footer-brand-inner span{ display: inline-block; margin-top: 11px; }
.area-lp__tabs-under{ display: flex; justify-content: center; align-items: center; gap: 0; max-width: var(--phone-w); margin: 0 auto; }

/* =========================================================
   Courses（早割 & プレミアム）
========================================================= */
.area-lp__courses{
  padding: 0 0 200px;
  background-image: var(--bg-course);
  background-repeat: repeat-y;
  background-position: center top;
  background-size: 100% auto;
}
.area-lp__courses-bg{
  position: relative;
  padding: 60px 0 40px;
  background-image: var(--bg-courses);
  background-repeat: repeat-y;
  background-position: center top;
  background-size: 100% auto;
}
.area-lp__courses .area-lp__section-inner{
  width: min(390px, 100%);
  margin: 0 auto;
  padding: 20px 0 0;
}
.course-early{
  margin: 0 20px;
}
.course-early__head{ margin: 0 0px 30px; text-align: center; }
.course-early__head img{ display: block; margin: 0 auto; width: 100%; max-width: 390px; height: auto; }
.course-early__kv{ margin: 0; }
.course-early__kv img{ display: block; width: 100%; max-width: 390px; height: 390px; margin: 0 auto; object-fit: cover; }
.course-early__detail{
  background: #fff; color: #2d2521;
  padding: 22px 18px; border-radius: 0 0 14px 14px;
  box-shadow: 0 8px 18px rgba(0,0,0,.18);
  margin: 0 0 24px; line-height: 1.8; font-size: 14px;
}
.course-early__subhead{ margin: 0 0 25px; text-align: center; }
.course-early__subhead img{ display: block; margin: 0 auto; width: 100%; max-width: 390px; height: auto; }
.course-early__media{
  display: grid; grid-template-columns: 1fr 1fr; gap: 14px;
  justify-content: center; margin: 0 0 25px;
}
.course-early__thumb{ margin: 0; overflow: hidden; aspect-ratio: 1 / 1; } /* ← 正方形可変 */
.course-early__thumb img{
  display: block;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover;
}
.course-early__text{ margin: 0 0 25px; font-size: 14px; line-height: 1.8; color: #fff; }
.course-early__cta{ margin: 0 0 10px; text-align: center; }
.course-early__cta img{ display: block; width: 100%; max-width: 390px; height: auto; }

/* プレミアム */
.course-premium{ margin: 0 20px; color: #fff; }
.course-premium__ribbon{ display:none; }
.course-premium__head{ position: absolute; top: -190px; margin: 0; text-align: center; }
.course-premium__head img{ display: block; width: 100%; height: auto; margin: 0 auto; }
.course-premium__hero{ position: relative; margin: 0 auto 0; width: min(390px,100%); }
.course-premium__image{ margin: 0; border-radius: 0; overflow: hidden;}
.course-premium__image img{ display: block; width: 100%; max-width: 390px; height: auto; }
.course-premium__badge{
  position: absolute; right: 10px; top: -12px;
  background:#d9422b; color:#fff; font-weight: 900;
  font-size: 14px; line-height: 1.15; text-align: center;
  padding: 10px 10px 8px; border-radius: 999px; width: 74px;
  box-shadow: 0 6px 16px rgba(0,0,0,.25);
}
.course-premium__badge small{ opacity: .85; }
.course-premium--nobadge .course-premium__badge{ display: none; }
.course-premium__card{
  margin: 0 0 40px;
  background:#F8F8EA; color:#333;
  border-radius:0 0 12px 12px;
  padding: 16px 14px 14px;
  box-shadow: 0 8px 20px rgba(0,0,0,.2);
}
/* 2枚目のカード背景色 */
.area-lp__courses .course-premium[aria-labelledby="course-premium-title-02"] .course-premium__card {
  background-color: #FFF2F2;
}
.area-lp__courses .area-lp__section-inner > .course-premium:last-of-type .course-premium__card{ margin: 0; }
.course-premium__lead{ margin: 0 0 6px; font-weight: 700; color:#7a3b25; }
.course-premium__price{ margin: 0 0 10px; text-align: right; color:#8b2a1c; font-weight: 800; }
.course-premium__price-em{ font-size: 34px; font-family: "Noto Serif JP", serif; margin-right: 2px; }
.course-premium__price-note{ font-size: 12px; color:#8b2a1c; }
.course-premium__list{
  margin: 0 0px 0; padding: 15px;
  font-size: 13px; line-height: 1.9;
  list-style: disc; background: #fff; border-radius: 10px;
}
.course-premium__notice{ margin: 0; font-size: 11px; color:#6b5a53; }

/* =========================================================
   フッター（画像どおり）— 最後に上書き
========================================================= */
.area-lp__footer{
  position: relative;
  z-index: 2;
  width: var(--phone-w) !important;   /* 430px中央レーン */
  max-width: var(--phone-w) !important;
  margin-left: auto !important;
  margin-right: auto !important;
  background: #151515;
  color: #fff;
}
.area-lp__footer-inner{
  width: min(100%, 720px);
  margin: 0 auto;
  padding: 48px 24px 28px;
}

/* ▼TOPへ戻る（imgタグで表示：ロゴ上の中央に半分かぶせ） */
.area-lp__footer #area-lp-top{
  width: 60px;
  height: 60px;
  display: block;
  margin: 0 auto;
}
.area-lp__footer #area-lp-top img{
  width: 100%;
  height: 100%;
  display: block;
}
.area-lp__footer #area-lp-top:hover{ filter: brightness(1.08); }
/* 旧スタイルの疑似要素や背景は使わない */
.area-lp__footer #area-lp-top::before{ content: none; }

/* ロゴ/住所/リンク群 */
.area-lp__footer-logo{ margin: 0 0 16px; text-align: center; }
.area-lp__footer-logo img{ display: block; width: 171px; height: auto; margin: 0 auto; }

.area-lp__footer-address{
  font-style: normal;
  line-height: 1.9;
  margin: 8px 0 22px;
  color: rgba(255,255,255,.92);
}

/* 2列リンク + 赤ポチ */
.area-lp__footer-list{
  list-style: none;
  padding: 0;
  margin: 0 0 22px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px 24px;
}
.area-lp__footer-list li{ position: relative; padding-left: 12px; font-size: 12px;}
.area-lp__footer-list li::before{
  content: "";
  position: absolute;
  left: 0; top: 0.75em;
  width: 6px; height: 6px;
  border-radius: 999px;
  background: var(--cta-red);
  transform: translateY(-50%);
}
.area-lp__footer-list a{ color: #fff; text-decoration: none; }
.area-lp__footer-list a:hover{ text-decoration: underline; }

/* SNS 行（PNGアイコンをそのまま表示） */
.area-lp__footer-sns{
  display: flex;
  align-items: center;
  gap: 24px;
  margin: 6px 0 22px;
  padding: 0;
  list-style: none;
}
.area-lp__footer-sns li{ margin: 0; }
.area-lp__footer-sns a{
  display: inline-flex;
  padding: 0;
  border: 0;
  background: transparent;
}
.area-lp__footer-sns img{ width: 25px; height: 25px; display: block; }

/* コピーライト */
.area-lp__copyright{
  display: block;
  text-align: right;
  color: rgba(255,255,255,.82);
  font-size: 12px;
}

/* =========================================================
   Responsive
========================================================= */
@media (max-width: 1023px){
  .area-lp__rail, .area-lp__logo{ display: none; }
  .area-lp__center{ width: 100%; max-width: var(--phone-w); }
}

@media (max-width: 430px){
  :root{ --phone-w: 100vw; --tabs-h: clamp(44px, 14vw, 60px); }

  .area-lp__center,
  .area-lp__footer,
  .area-lp__tabs-under,
  .area-lp__tabs,
  .area-lp__ham-panel{ width: 100%; max-width: 100%; }

  .area-lp__tabs-inner{ width: 100%; max-width: 100%; }

  .area-lp__tab-logo,
  .area-lp__tabs-logo{ flex: 1 1 50%; margin: 0; }
  .area-lp__tab{ width: 100%; height: var(--tabs-h); }

  .area-lp__phone,
  .area-lp__section{ width: 100%; }

  .area-lp__mv-top img{ display: block; width: 100%; height: auto; }

  .area-lp__shop-head{ grid-template-columns: 120px 1fr; }

  /* 念のため：エリアLP内の画像は親幅を超えない */
  .area-lp__phone img{ max-width: 100%; height: auto; }
}
@media (max-width: 380px){
  .course-premium__head{
    top: -180px;
  }
}
@media (max-width: 370px){
  /* タブロゴは70x19指定のため個別縮小ルールは無効化 */
}

@media (min-width: 768px){
  .course-premium__price-em{ font-size: 36px; }
}