/*! destyle.css v3.0.2 | MIT License | https://github.com/nicolas-cusan/destyle.css */
/* ここからリセットCSS */
*,
::before,
::after {
  box-sizing: border-box;
  border-style: solid;
  border-width: 0;
}
html {
  line-height: 1.15;
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
}
body {
  margin: 0;
}
main {
  display: block;
}
p,
table,
blockquote,
address,
pre,
iframe,
form,
figure,
dl {
  margin: 0;
}
h1,
h2,
h3,
h4,
h5,
h6 {
  font-size: inherit;
  font-weight: inherit;
  margin: 0;
  color: #222;
}
ul,
ol {
  margin: 0;
  padding: 0;
  list-style: none;
  color: #222;
}
dt {
  font-weight: bold;
}
dd {
  margin-left: 0;
}
hr {
  box-sizing: content-box;
  height: 0;
  overflow: visible;
  border-top-width: 1px;
  margin: 0;
  clear: both;
  color: inherit;
}
pre {
  font-family: monospace, monospace;
  font-size: inherit;
}
address {
  font-style: inherit;
}
a {
  background-color: transparent;
  text-decoration: none;
  color: inherit;
}
abbr[title] {
  -webkit-text-decoration: underline dotted;
  text-decoration: underline dotted;
}
b,
strong {
  font-weight: bolder;
}
code,
kbd,
samp {
  font-family: monospace, monospace;
  font-size: inherit;
}
small {
  font-size: 80%;
}
sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}
sub {
  bottom: -0.25em;
}
sup {
  top: -0.5em;
}
svg,
img,
embed,
object,
iframe {
  vertical-align: bottom;
}
img {
  width: 100%;
  height: auto;
  object-fit: cover;
}
button,
input,
optgroup,
select,
textarea {
  appearance: none;
  vertical-align: middle;
  color: inherit;
  font: inherit;
  background: transparent;
  padding: 0;
  margin: 0;
  border-radius: 0;
  text-align: inherit;
  text-transform: inherit;
}
button,
[type=button],
[type=reset],
[type=submit] {
  cursor: pointer;
}
button:disabled,
[type=button]:disabled,
[type=reset]:disabled,
[type=submit]:disabled {
  cursor: default;
}
select:disabled {
  opacity: inherit;
}
option {
  padding: 0;
}
fieldset {
  margin: 0;
  padding: 0;
  min-width: 0;
}
legend {
  padding: 0;
}
progress {
  vertical-align: baseline;
}
textarea {
  overflow: auto;
}
[type=number]::-webkit-inner-spin-button,
[type=number]::-webkit-outer-spin-button {
  height: auto;
}
[type=search] {
  outline-offset: -2px;
}
[type=search]::-webkit-search-decoration {
  -webkit-appearance: none;
}
::-webkit-file-upload-button {
  -webkit-appearance: button;
  font: inherit;
}
label[for] {
  cursor: pointer;
}
details {
  display: block;
}
summary {
  display: list-item;
}
[contenteditable]:focus {
  outline: auto;
}
table {
  border-color: inherit;
  border-collapse: collapse;
}
caption {
  text-align: left;
}
td,
th {
  vertical-align: top;
  padding: 0;
}
th {
  text-align: left;
  font-weight: bold;
}
a,
span {
  display: inline-block;
}
/* リセットCSSここまで */

/* ------------------------------------------------------------ */
/* wrap の中央寄せ / LP 全体共通設定 */
/* ------------------------------------------------------------ */
.wrap {
  max-width: 800px;
  margin: 0 auto;
  position: relative;
}
body {
  font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, sans-serif;
  background-color: #fff;
  color: #333;
  line-height: 1.5;
}

/* ------------------------------------------------------------ */
/* 共通ボタンアニメーション */
/* ------------------------------------------------------------ */
.btn {
  position: absolute;
  left: 0;
  right: 0;
  width: 100%;
  animation: bound 2.8s infinite;
}
@keyframes bound {
  0%, 5%, 10% { transform: translateY(0); }
  20%, 30%    { transform: translateY(-10px); }
  25%, 50%, 100% { transform: translateY(0); }
}
.btn a { display: block; transition: 0.3s; }
.btn a img { display: block; width: 100%; height: auto; }
@media (any-hover: hover) {
  .btn a:hover { opacity: 0.7; }
  .links a:hover img { opacity: 0.7; }
}

/* ------------------------------------------------------------ */
/* FV（ファーストビュー） */
/* ------------------------------------------------------------ */
.fv {
  position: relative;
  aspect-ratio: 1338 / 1980; /* fv.webp のアスペクト比を予約してCLS対策 */
}
.fv img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: relative;
  z-index: 1;
}

/* スケルトン: 画像ロード前にKey情報を表示
   背景 #f8e666 はLPの地色（総監督指定・2026-07-30 確定）。
   CTA背景画像 area1〜3_bg.webp の地色を実測すると #f8e766 が各9割を占めており、
   指定値とほぼ一致する（緑成分が1違うだけ）。指定値の #f8e666 を正とする。
   ※ fv.webp のロード前に一瞬だけ出るプレースホルダ。地色に馴染むことが目的だが、
     中に4行のテキスト（tagline / title / date / venue）が入るので文字色とセットで管理する。
   文字色 #474341（総監督指定・2026-07-30）。#f8e666 に対して実測 7.69:1 ＝ WCAG AAA（7.0）を満たす
   （opacity:0.95 が乗る tagline / venue は 6.79:1。AAAは僅かに割るが AA 4.5 は大きく上回る）。
   ⚠️ 旧配色（ティール地＋白文字）の名残で白のままにすると 1.27:1 で判読不能になる。
      destyle.css の既定 #222 に戻すのも不可（下の p/h1 の上書きを消さないこと）。 */
.fv-fallback {
  position: absolute;
  inset: 0;
  z-index: 2;
  background: #f8e666;
  color: #474341;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: 6vw 5vw;
  gap: 3vw;
  opacity: 1;
  transition: opacity 0.4s ease-out;
}
/* destyle.css が h1/p に #222 を当てているので、ここで明示的に上書きする（消さないこと） */
.fv-fallback p,
.fv-fallback h1 {
  color: #474341;
  margin: 0;
}
.fv-fallback.is-hidden {
  opacity: 0;
  pointer-events: none;
}
.fv-fallback__tagline {
  font-size: 4.2vw;
  font-weight: 700;
  letter-spacing: 0.05em;
  opacity: 0.95;
}
.fv-fallback__title {
  font-size: 11vw;
  font-weight: 900;
  letter-spacing: 0.04em;
  line-height: 1.15;
  margin: 0;
  /* text-shadow: 0 2px 8px rgba(0,0,0,0.18) は削除（2026-07-30）。
     白文字を中間色の地から浮かせるための影だったが、濃グレー文字＋淡黄色地では
     文字まわりの黄色が灰緑にくすむだけで可読性の利得がない
     （実測：影ありだと見出し周辺の地色ピクセルの16.5%が変色。影なしは1.3%＝アンチエイリアスのみ）。 */
}
.fv-fallback__date {
  font-size: 5.4vw;
  font-weight: 800;
  margin-top: 2vw;
}
.fv-fallback__venue {
  font-size: 4.2vw;
  font-weight: 600;
  opacity: 0.95;
}

@media (min-width: 800px) {
  .fv-fallback { padding: 48px 40px; gap: 24px; }
  .fv-fallback__tagline { font-size: 22px; }
  .fv-fallback__title { font-size: 88px; }
  .fv-fallback__date { font-size: 32px; }
  .fv-fallback__venue { font-size: 22px; }
}

/* ------------------------------------------------------------ */
/* CTAエリア（背景画像＋ボタン画像を重ねる） */
/* ------------------------------------------------------------ */
/* 背景画像 area*_bg.webp (1338x620) の中央にボタン画像 button*.webp (1338x240) を
   背景と同じ横幅で重ねる。ボタン画像自体が余白込みでセンター配置されているので
   上下中央に置くだけでデザイン通りに表示される */
.cta-area {
  position: relative;
  width: 100%;
}
.cta-area > img {
  display: block;
  width: 100%;
  height: auto;
}
/* 中央寄せ（top:53% + translateY(-50%)）は「静的」に固定する。
   ※アニメーションで translateY(%) を動かすと、Safari がボタン画像(遅延読込)の高さ未確定時に
     % を 0 と解釈したまま固定し、ボタンが半分ほど下にズレる。バウンドは中央寄せと切り離し、
     内側の <a> に px だけで掛ける（％を含めない）ことで全ブラウザでズレない。 */
.cta-area .btn {
  top: 53%;
  transform: translateY(-50%);
  animation: none;            /* 基底 .btn の bound（translateY 0/-10px）が中央寄せを打ち消すのを防ぐ */
  aspect-ratio: 1338 / 240;   /* ボタン画像の比率で高さを先に確保（読込前でも中央が正しく出る） */
}
.cta-area .btn a {
  animation: bound 2.8s infinite;  /* px のみのバウンド（％を含まないので Safari でもズレない） */
}

/* ------------------------------------------------------------ */
/* problem / solution / benefit / achievements / uservoice / faq / present / step / place */
/* ------------------------------------------------------------ */
.problem,
.solution,
.benefit,
.achievements,
.uservoice,
.faq,
.present,
.step,
.place {
  position: relative;
  width: 100%;
}
.problem img,
.solution img,
.benefit img,
.achievements img,
.uservoice img,
.faq img,
.present img,
.step img,
.place img {
  display: block;
  width: 100%;
  height: auto;
}

/* place セクション：Googleマップ iframe を画像の上に重ねる */
/* 背景 place.webp のマップ枠位置（画像内実測）:
   top 31.6% / left 10% / width 79.8% / height 42% */
.place iframe {
  position: absolute;
  top: 31.6%;
  left: 50%;
  transform: translateX(-50%);
  width: 79.8%;
  height: 42%;
  border: 0;
}

/* ------------------------------------------------------------ */
/* area セクション（モーダル用背景+6ボタン） */
/* ------------------------------------------------------------ */
.area-section {
  position: relative;
  width: 100%;
}
.area-bg {
  display: block;
  width: 100%;
  height: auto;
}

/* ------------------------------------------------------------ */
/* footer（会社情報・コピーライト） */
/* ------------------------------------------------------------ */
.site-footer {
  position: relative;
  background: #fff;
}
.company {
  position: relative;
}
.company img {
  display: block;
  width: 100%;
  height: auto;
}
.company .links {
  position: absolute;
  bottom: 10vw;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 7.5vw;
}
.links a { position: relative; display: inline-block; }
.links a:not(:last-child)::after {
  content: "";
  position: absolute;
  right: -3.5vw;
  top: 50%;
  transform: translateY(-50%);
  width: 2px;
  height: 100%;
  background-color: #fff;
}
.links a img { width: 100%; scale: 1.05; transition: 0.3s; }
@media (min-width: 800px) {
  .company .links { bottom: 80px; gap: 60px; }
  .links a:not(:last-child)::after { right: -28px; }
}

.copyright {
  position: relative;
  margin-bottom: 0;
}
.copyright img {
  display: block;
  width: 100%;
  height: auto;
}

/* ------------------------------------------------------------ */
/* ポップアップ用（モーダル）CSS */
/* ------------------------------------------------------------ */
.popup-overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.85);
  z-index: 1002;
  justify-content: center;
  align-items: center;
  overflow-y: auto;
}
.popup-overlay.active { display: flex; }

/* ⚠️ モーダルの幅は「高さ」から逆算する（2026-07-30 修正）。
   【直した不具合】PC幅（1280/1440/1920）とタブレット(768×1024)で、
   地図画像が原寸 1080px 幅のまま描画され、モーダル全体の高さが 1470px 前後になっていた。
   .popup-content は max-height:90vh ＋ overflow:hidden なので、
   はみ出した下側＝**予約CTA(.popup-footer)が丸ごと切り取られて表示されず**、
   しかも .popup-overlay がスクロール不能（flexアイテムの箱は90vhに収まっているため
   scrollHeight が伸びない）のでスクロールしても到達できなかった。
   ＝エリアモーダルからの予約導線がPCで完全に死んでいた（全8エリアで発生）。
   【対策】地図は 1080×1350（縦横比0.8）なので 画像高さ＝幅÷0.8。
   ヘッダー(約48px)＋フッターCTA(76px)＝約124px を差し引いた高さに収まる幅を上限にする。
   モバイルは 90vw の方が小さいので**従来どおり（見た目不変）**。
   ⚠️ 地図画像の縦横比を変えるなら下の 0.8 も直すこと。 */
.popup-content {
  position: relative;
  display: flex;              /* 万一ヘッダー等が伸びても画像側が縮んでCTAを守る */
  flex-direction: column;
  width: min(90vw, max(260px, calc((90vh - 136px) * 0.8)));
  max-width: 90%;
  max-height: 90vh;
  border-radius: 0;
  overflow: hidden;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
}

/* モーダルヘッダー */
.popup-header {
  padding: 10px 20px;
  background: #fff;
  text-align: center;
  border-radius: 4px 4px 0 0;
}

.popup-area-name {
  font-size: 16px;
  font-weight: 900;
  margin: 0 0 4px 0;
  color: #666;
}

.popup-info {
  font-size: 11px;
  font-weight: 700;
  color: #888;
}

/* マップ画像 */
.popup-content img {
  display: block;
  width: 100%;
  height: auto;
  min-height: 0;          /* flexアイテムの縮小を許可（CTAを押し出させない） */
  object-fit: contain;    /* 縮小が起きても縦横比は崩さない＝地図がつぶれない */
  border-radius: 0 0 4px 4px;
}

/* 地図画像が無いエリア（data.json の mapImage: null。2026-07-30時点は該当なし）は <img> ごと隠す
   ＝壊れた画像アイコンを出さない。モーダル自体は開き、エリア名とCTAは出る。
   ⚠️ このルールは消さないこと：上の .popup-content img { display: block } は
   UAスタイルの [hidden] { display: none } に（作者スタイル優先で）勝ってしまうため、
   JS側で hidden を立てるだけでは画像が消えない。 */
.popup-content img[hidden] {
  display: none;
}

/* モーダルフッター */
.popup-footer {
  padding: 16px 0 0 0;
  background: transparent;
}

.popup-cta {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  width: 100%;
  height: 60px;
  padding: 0 18px;
  background: linear-gradient(to bottom, #FFB088 0%, #FF8870 60%, #F56060 100%);
  color: #fff;
  text-decoration: none;
  border: 0;
  border-radius: 4px;
  box-shadow: 0 4px 12px rgba(255, 136, 112, 0.4);
  text-align: center;
}

.popup-cta__main {
  font-size: 16px;
  font-weight: 900;
  line-height: 1.2;
  text-shadow: 2px 2px 0 #FF9933, -2px 2px 0 #FF9933, 2px -2px 0 #FF9933, -2px -2px 0 #FF9933,
               1px 1px 0 #FF9933, -1px 1px 0 #FF9933, 1px -1px 0 #FF9933, -1px -1px 0 #FF9933;
}

.popup-cta__sub {
  font-size: 11px;
  font-weight: 700;
  line-height: 1.2;
  opacity: 0.95;
  text-shadow: 1px 1px 0 #FF9933, -1px 1px 0 #FF9933, 1px -1px 0 #FF9933, -1px -1px 0 #FF9933;
}

/* ------------------------------------------------------------ */
/* 固定フッターCTA（モバイル専用） */
/* ------------------------------------------------------------ */
.sticky-cta {
  display: none;
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1001;
  align-items: center;
  gap: 8px;
  justify-content: center;
  height: 72px;
  width: 100%;
  padding: 0 18px;
  border: 0;
  border-top: 1px solid #ffffff;
  border-radius: 0;
  background: linear-gradient(to bottom, #FFB088 0%, #FF8870 60%, #F56060 100%);
  color: #fff;
  font-weight: 900;
  font-size: 16px;
  box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.2);
  text-decoration: none;
}

/* モバイルのみ表示 */
@media (max-width: 959px) {
  .sticky-cta {
    display: flex;
  }
}

.sticky-cta:focus-visible {
  outline: 3px solid rgba(255, 255, 255, 0.66);
  outline-offset: 3px;
}

.sticky-cta.is-hidden {
  opacity: 0;
  pointer-events: none;
}

.sticky-cta.is-dim {
  opacity: 0.6;
}

.sticky-cta__label {
  display: flex;
  flex-direction: column;
  gap: 2px;
  text-align: center;
}

.sticky-cta__main {
  font-size: 16px;
  font-weight: 900;
  line-height: 1.2;
  text-shadow: 2px 2px 0 #FF9933, -2px 2px 0 #FF9933, 2px -2px 0 #FF9933, -2px -2px 0 #FF9933,
               1px 1px 0 #FF9933, -1px 1px 0 #FF9933, 1px -1px 0 #FF9933, -1px -1px 0 #FF9933;
}

.sticky-cta__sub {
  font-size: 11px;
  font-weight: 700;
  line-height: 1.2;
  opacity: 0.95;
  text-shadow: 1px 1px 0 #FF9933, -1px 1px 0 #FF9933, 1px -1px 0 #FF9933, -1px -1px 0 #FF9933;
}

.sticky-cta__icon {
  font-size: 20px;
}

/* iOS Safe Area対応 */
@supports (padding-bottom: env(safe-area-inset-bottom)) {
  .sticky-cta {
    padding-bottom: env(safe-area-inset-bottom);
  }
}

/* ------------------------------------------------------------ */
/* 全CTAボタンのスクロール表示制御（モバイルのみ） */
/* ------------------------------------------------------------ */
@media (max-width: 959px) {
  .scroll-cta {
    opacity: 1;
    pointer-events: auto;
    transition: opacity 0.3s ease;
  }

  .scroll-cta.hidden {
    opacity: 0;
    pointer-events: none;
  }
}