@charset "UTF-8";
/* ==========================================================================
   棚照結神（たなてらすむすびのかみ）ティザーサイト
   - XD(0526)デザイン忠実再現 / 2ページ（TOP・INTRODUCTION）+ ハンバーガーメニュー
   - 相対パスのみ（/website/ サブディレクトリ → ルート直下移動でも不変）
   - 装飾テキスト（アウトライン欧文 / 第2章開幕 / メニューTOP・INTRODUCTION）は画像
   - コピーライト2行=Noto Sans / 紹介本文=Zen Old Mincho（XD通りのライブテキスト）
   ========================================================================== */

/* ---- リセット ---- */
*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }
html{ -webkit-text-size-adjust:100%; }
img{ display:block; max-width:100%; height:auto; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; background:none; border:none; cursor:pointer; }
ul{ list-style:none; }

/* ---- 1920px 上限・センタリング（MOVON共通仕様）---- */
html,body{
  max-width:1920px;
  margin-inline:auto;
  overflow-x:hidden;
}

/* ---- トークン ---- */
:root{
  --bg:        #0b0b0c;   /* 近黒ベース */
  --panel:     #2e2e2e;   /* メニューパネル */
  --gold:      #e3c813;   /* 金（明） */
  --white:     #ffffff;
  --header-h:  clamp(52px, 5.4vw, 70px);
  --footer-h:  clamp(30px, 3.2vw, 42px);
  --pad-x:     clamp(16px, 4vw, 56px);
  --ff-mincho: "Zen Old Mincho", "Hiragino Mincho ProN", "Yu Mincho", serif;
  --ff-sans:   "Noto Sans JP", "Hiragino Sans", sans-serif;
}

body{
  position:relative;
  min-height:100vh;
  min-height:100svh;
  display:flex;
  flex-direction:column;
  background:var(--bg);
  color:var(--white);
  font-family:var(--ff-mincho);
  line-height:1.6;
  overflow-x:hidden;
}

/* ==========================================================================
   背景（煙の静止画・全面cover）
   ========================================================================== */
.bg{
  position:fixed;
  inset:0;
  z-index:0;
  background:var(--bg);
  overflow:hidden;
}
/* 実写煙を3層、異なる速度でゆっくりドリフト＋スケール → 煙が生きて漂う */
.bg__layer{
  position:absolute;
  inset:-14%;
  background:url("../img/bg-smoke.jpg") center bottom / cover no-repeat;
  will-change:transform, opacity;
  backface-visibility:hidden;
}
.bg__layer{ transform-origin:center bottom; }
.bg__layer--1{ animation:smoke1 34s ease-in-out infinite alternate; }
.bg__layer--2{ opacity:.22; mix-blend-mode:screen; animation:smoke2 27s ease-in-out infinite alternate; }
.bg__layer--3{ opacity:.12; mix-blend-mode:screen; animation:smoke3 43s ease-in-out infinite alternate; }
@keyframes smoke1{
  from{ transform:scale(1.05) translate(0,0); }
  to{   transform:scale(1.18) translate(-4%,-3.4%); }
}
@keyframes smoke2{
  from{ transform:scale(1.14) translate(3.4%,2%); }
  to{   transform:scale(1.30) translate(-3.6%,-4.4%); }
}
@keyframes smoke3{
  from{ transform:scale(1.22) translate(-3.4%,2.2%) rotate(2deg); }
  to{   transform:scale(1.38) translate(3.4%,-3.2%) rotate(-1.8deg); }
}
.bg::after{
  content:"";
  position:absolute; inset:0; z-index:1;
  background:
    linear-gradient(rgba(9,9,11,.34), rgba(9,9,11,.34)),
    radial-gradient(120% 90% at 50% 42%, transparent 52%, rgba(0,0,0,.6) 100%);
  pointer-events:none;
}

/* ==========================================================================
   ヘッダー（白バー・施設ロゴ4点）
   ========================================================================== */
.site-header{
  position:relative;
  z-index:20;
  height:var(--header-h);
  background:var(--white);
  display:flex;
  align-items:center;
  justify-content:center;
}
.facilities{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:clamp(16px, 3.2vw, 46px);
}
.facilities img{
  width:auto;
  height:clamp(22px, 3.0vw, 40px);
  object-fit:contain;
}
.facilities .f-sevenpark{ height:clamp(15px, 2.0vw, 27px); }
.facilities .f-ario{ height:clamp(24px, 3.3vw, 44px); }

/* ==========================================================================
   ハンバーガー（金の円・2本線 → 開くと × にトグル）
   ========================================================================== */
.hamburger{
  position:absolute;
  top:calc(var(--header-h) + clamp(10px, 1.6vw, 22px));
  right:var(--pad-x);
  z-index:110;               /* メニューパネルより前面（×として機能） */
  width:clamp(44px, 4.4vw, 58px);
  height:clamp(44px, 4.4vw, 58px);
  border:1px solid rgba(227,200,19,.85);
  border-radius:50%;
  transition:transform .3s ease, border-color .3s ease;
}
.hamburger:hover{ border-color:var(--gold); }
.hamburger span{
  position:absolute;
  left:50%; top:50%;
  width:clamp(18px, 1.9vw, 24px);
  height:1.5px;
  background:var(--gold);
  transition:transform .4s cubic-bezier(.22,.61,.36,1);
}
.hamburger span:nth-child(1){ transform:translate(-50%,-50%) translateY(-5px); }
.hamburger span:nth-child(2){ transform:translate(-50%,-50%) translateY(5px); }
/* 開いた状態＝× */
body.menu-open .hamburger span:nth-child(1){ transform:translate(-50%,-50%) rotate(45deg); }
body.menu-open .hamburger span:nth-child(2){ transform:translate(-50%,-50%) rotate(-45deg); }

/* ==========================================================================
   ヒーロー（共通）
   ========================================================================== */
.hero{
  position:relative;
  z-index:10;
  flex:1 1 auto;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:clamp(24px, 5vh, 64px) var(--pad-x) clamp(96px, 15vh, 150px);
}

/* 背景の極薄アウトライン欧文（画像） */
.hero__outline{
  position:absolute;
  display:block;
  z-index:-1;
  top:50%; left:50%;
  transform:translate(-50%,-56%);
  width:clamp(680px, 90vw, 1280px);
  max-width:none;
  opacity:.26;
  pointer-events:none;
  user-select:none;
}
.hero__outline img{ display:block; width:100%; height:auto; }

/* 金ロゴ「棚照結神」 */
.hero__logo{
  width:clamp(200px, 27vw, 400px);
  margin-inline:auto;
  filter:drop-shadow(0 6px 22px rgba(0,0,0,.5));
}

/* TOP：catch + body text のラッパー */
.hero__text-block{
  width:min(660px, 82vw);
  margin:clamp(9px, 1.5vh, 18px) auto 0;
  padding:0;
  text-align:center;
}

/* TOP：第2章、開幕。（画像） */
.hero__catch{
  display:block;
  width:clamp(170px, 21vw, 310px);
  margin:0 auto;
}
.hero__catch img{
  width:100%;
  filter:drop-shadow(0 4px 24px rgba(0,0,0,.6));
}

/* TOP：本文テキスト（2行） */
.hero__body{
  font-family:"Zen Old Mincho", "Hiragino Mincho ProN", "Yu Mincho", serif;
  font-weight:400;
  color:var(--white);
  font-size:clamp(12px, 1.1vw, 15px);
  line-height:2.0;
  letter-spacing:.05em;
  text-shadow:0 1px 8px rgba(0,0,0,.65);
  margin-top:clamp(12px, 1.8vh, 22px);
}

/* ==========================================================================
   INTRODUCTION固有：金枠 + 紹介文（Zen Old Mincho ライブテキスト）
   ========================================================================== */
.hero--intro .hero__logo{ width:clamp(220px, 32vw, 440px); }

.framed{
  position:relative;
  margin-top:clamp(26px, 5vh, 54px);
  max-width:min(760px, 86vw);
  padding:clamp(34px, 5vw, 64px) clamp(26px, 5vw, 70px);
}
.framed__corner{
  position:absolute;
  width:clamp(34px, 5vw, 72px);
  height:auto;
  pointer-events:none;
}
.framed__corner.tl{ top:0; left:0; }
.framed__corner.tr{ top:0; right:0; }
.framed__corner.bl{ bottom:0; left:0; }
.framed__corner.br{ bottom:0; right:0; }
.framed__text{
  font-family:var(--ff-mincho);
  font-weight:600;
  color:var(--white);
  letter-spacing:.04em;
  line-height:2.15;
  text-shadow:0 2px 16px rgba(0,0,0,.6);
  font-size:clamp(14px, 2.3vw, 21px);
}
/* 紹介文の改行：PCは4行（.br-sp非表示）、SPは7行（.br-sp表示）= XD忠実 */
.br-sp{ display:none; }

/* ==========================================================================
   フッター（白バー：Copyright Create Link / バー上：© 実行委員会）
   ========================================================================== */
.site-footer{
  position:absolute;
  left:0; right:0; bottom:0;
  z-index:15;
}
.cc-project{
  text-align:right;
  padding:0 var(--pad-x) clamp(8px, 1.1vw, 13px);
  font-family:var(--ff-sans);
  font-weight:400;
  font-size:clamp(10px, 1vw, 13px);
  letter-spacing:.02em;
  color:rgba(255,255,255,.95);
  text-shadow:0 1px 10px rgba(0,0,0,.7);
}
.footer-bar{
  min-height:var(--footer-h);
  background:var(--white);
  display:grid;
  place-items:center;
  padding:6px var(--pad-x);
}
.cc-company{
  font-family:var(--ff-sans);
  font-weight:400;
  font-size:clamp(9px, .85vw, 11px);
  letter-spacing:.03em;
  color:#1a1a1a;
  text-align:center;
}

/* ==========================================================================
   メニュー（ハンバーガー展開・右からスライド）
   ========================================================================== */
.menu{
  position:fixed;
  inset:0;
  z-index:100;
  visibility:hidden;
  pointer-events:none;
}
.menu__backdrop{
  position:absolute; inset:0;
  background:rgba(0,0,0,.45);
  opacity:0;
  transition:opacity .45s ease;
}
.menu__panel{
  position:absolute;
  top:0; right:0;
  height:100%;
  width:min(78%, 760px);
  background:var(--panel);
  border-radius:34px 0 0 34px;
  box-shadow:-30px 0 80px rgba(0,0,0,.5);
  padding:clamp(40px, 9vh, 120px) clamp(40px, 7vw, 110px);
  display:flex;
  flex-direction:column;
  justify-content:center;
  transform:translateX(100%);
  transition:transform .5s cubic-bezier(.22,.61,.36,1);
}
.menu.is-open{ visibility:visible; pointer-events:auto; }
.menu.is-open .menu__backdrop{ opacity:1; }
.menu.is-open .menu__panel{ transform:translateX(0); }

.menu__list{
  display:flex;
  flex-direction:column;
  gap:clamp(30px, 5.5vh, 60px);
}
.menu__link{
  display:inline-flex;
  align-items:center;
  gap:clamp(14px, 1.6vw, 24px);
  max-width:100%;
  transition:transform .3s ease;
}
/* ラベル画像は width:100%、サイズは親(.menu__label)の幅で制御＝はみ出し防止 */
.menu__label{ display:block; flex:0 0 auto; }
.menu__label img{ width:100%; height:auto; display:block; }
/* TOP と INTRODUCTION の表示高さを揃える比率（native 443:1483 ≒ 0.30）で幅設定 */
.menu__label--top{   width:clamp(64px, 15vw, 117px); }
.menu__label--intro{ width:clamp(212px, 50vw, 392px); }
.menu__link .arrow{
  color:var(--gold);
  font-size:clamp(22px, 2.4vw, 32px);
  line-height:1;
  transition:transform .3s ease;
}
.menu__link:hover{ transform:translateX(6px); }
.menu__link:hover .arrow{ transform:translateX(.3em); }

/* スクロール抑止（メニュー展開時） */
body.menu-open{ overflow:hidden; }

/* ==========================================================================
   ロード時アニメーション（タナテラLP指示書0610 準拠）
   - TOP: 金ロゴ「小→大」 / 「第2章、開幕。」左から順に表示
   - INTRODUCTION: 金カッコ枠が内から広がって止まる
   ========================================================================== */
@keyframes fvLogoIn{
  from{ transform:scale(.62); opacity:0; }
  to{   transform:scale(1);    opacity:1; }
}
@keyframes catchWipe{           /* 左→右に表示（文字が左から順に出る） */
  from{ clip-path:inset(0 100% 0 0); }
  to{   clip-path:inset(0 0 0 0); }
}
@keyframes cornerTL{ from{ transform:translate(var(--cx),  var(--cy));  opacity:0 } to{ transform:translate(0,0); opacity:1 } }
@keyframes cornerTR{ from{ transform:translate(calc(var(--cx)*-1),  var(--cy));  opacity:0 } to{ transform:translate(0,0); opacity:1 } }
@keyframes cornerBL{ from{ transform:translate(var(--cx),  calc(var(--cy)*-1));  opacity:0 } to{ transform:translate(0,0); opacity:1 } }
@keyframes cornerBR{ from{ transform:translate(calc(var(--cx)*-1),  calc(var(--cy)*-1));  opacity:0 } to{ transform:translate(0,0); opacity:1 } }

.hero__logo{ animation:fvLogoIn 1.25s cubic-bezier(.18,.7,.22,1) both; }
.hero--top .hero__catch{ animation:catchWipe 1s cubic-bezier(.5,0,.18,1) .7s both; }
@keyframes fadeInUp{
  from{ opacity:0; transform:translateY(10px); }
  to{   opacity:1; transform:translateY(0); }
}
.hero--top .hero__body{ animation:fadeInUp .8s ease 1.3s both; }

.framed{ --cx:clamp(40px, 10vw, 92px); --cy:clamp(30px, 7vw, 72px); }
.framed__corner.tl{ animation:cornerTL .85s cubic-bezier(.16,.7,.22,1) .35s both; }
.framed__corner.tr{ animation:cornerTR .85s cubic-bezier(.16,.7,.22,1) .35s both; }
.framed__corner.bl{ animation:cornerBL .85s cubic-bezier(.16,.7,.22,1) .35s both; }
.framed__corner.br{ animation:cornerBR .85s cubic-bezier(.16,.7,.22,1) .35s both; }

/* ==========================================================================
   レスポンシブ（SP：XD sp_0526 準拠）
   ========================================================================== */
@media (max-width:768px){
  .facilities{ gap:clamp(10px, 2.6vw, 18px); }

  .br-sp{ display:inline; }

  /* SPサイズ調整（2026-06-18 修正依頼0618.pdf 対応） */
  .hero{ padding-top:clamp(24px, 5vh, 54px); padding-bottom:clamp(84px, 12vh, 116px); }
  .hero__logo{ width:clamp(250px, 80vw, 360px); }
  .hero--intro .hero__logo{ width:clamp(232px, 74vw, 330px); }

  /* テキストブロック（SP） */
  .hero__text-block{ width:min(88vw, 380px); padding:0; }

  /* 第2章、開幕。は2行画像（XD直抽出・中央配置） */
  .hero__catch{ width:clamp(100px, 34vw, 155px); }

  /* 本文テキスト（SP） */
  .hero__body{ font-size:clamp(10px, 3.0vw, 13px); line-height:2.1; letter-spacing:.12em; }

  /* SP版は縦5段組みの別画像（outline-text-sp.png・XD sp_0526準拠）。縦長比率のため幅を縮小し中央配置 */
  .hero__outline{ width:clamp(250px, 72vw, 360px); transform:translate(-50%,-50%); opacity:.22; }

  /* © 実行委員会 は中央寄せ */
  .cc-project{ text-align:center; }
}

/* 低い横長ビューポート対策 */
@media (max-height:560px){
  .hero{ padding-bottom:84px; }
}

/* モーション抑制設定への配慮：入場アニメは静止、背景の煙は維持（ゆっくり漂う） */
@media (prefers-reduced-motion:reduce){
  .hero__logo{ animation:none !important; opacity:1 !important; transform:none !important; }
  .hero--top .hero__catch{ animation:none !important; clip-path:none !important; }
  .hero--top .hero__body{ animation:none !important; opacity:1 !important; transform:none !important; }
  .framed__corner{ animation:none !important; opacity:1 !important; transform:none !important; }
  .menu__link, .hamburger span, .menu__panel, .menu__backdrop{ transition-duration:.001s !important; }
  /* 背景の煙(.bg__layer)はアニメ継続 */
}