@charset "UTF-8";
/* ==========================================================================
   棚照結神（たなてらすむすびのかみ）本番サイト TOP
   - XD: production_design/tanatera_renewal_pc_0629.xd (1920x9940) 完全準拠
   - DOM順 = XD描画順(z-index不使用で重なり一致)
   - 配置は index.html 側インラインstyle(%/cqw) ※ gen_site.py により機械生成
   - ヘッダー構造はティザー(teaser/)より流用
   ========================================================================== */

/* ---- リセット(ティザー流用) ---- */
*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
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; }

html,body{ max-width:1920px; margin-inline:auto; }
body{ background:#fff; font-family:"Noto Serif JP", "Hiragino Mincho ProN", serif; font-weight:600; }

/* ---- トークン(ティザー流用) ---- */
:root{
  --panel:    #2e2e2e;   /* メニューパネル */
  --gold:     #e3c813;   /* 金（明） */
  --white:    #ffffff;
  --header-h: clamp(52px, 5.4vw, 70px);
  --pad-x:    clamp(16px, 4vw, 56px);
}

/* ---- キャンバス(1920x9940の%座標系) ---- */
.canvas{
  position:relative;
  width:100%;
  aspect-ratio:1920/9940;
  overflow:hidden;
  background:#fff;
  container-type:inline-size;
}
.canvas > *{ position:absolute; }
.deco{ pointer-events:none; user-select:none; }
.anchor{ width:0; height:0; visibility:hidden; }

/* ---- 背景(XD実測グラデ) ---- */
.intro-bg{ background:linear-gradient(to bottom, #823891 0%, #B45FC6 25.62%, #B45FC6 100%); }
.char-bg{ background:linear-gradient(to bottom, #C7A720 0%, #F5EED1 19.21%, #F5EED1 100%); }
.pattern-tile{
  background-image:url("../img/bg/haikei_pattern.png");
  background-size:12.9688cqw 12.9688cqw;   /* 249px @1920 */
  background-position:0.2083cqw 0;
  background-repeat:repeat;
}

/* ---- テキスト共通 ---- */
.intro-body,.g-catch,.hero-copy,.foot-links,.foot-copy{
  transform:translateX(-50%);
  text-align:center;
  white-space:nowrap;
}
.intro-body{ color:#F4DF92; line-height:2.5; }                 /* 24px/60px */
.g-catch{ color:#222; line-height:3.3333; letter-spacing:.1em; } /* 18px/60px */
.hero-copy{ color:#222; line-height:3; font-family:"Noto Sans JP",sans-serif; font-weight:500; } /* 12px/36px */

/* ---- ヘッダー(ティザー流用・XD座標) ---- */
.site-header{ background:#fff; }
.f-logo{ object-fit:contain; }
.btn-x img{ width:100%; height:100%; }
/* ハンバーガー(ティザー流用: 金の円・2本線→開くと×にトグル)
   ※ティザーはabsoluteだが本番は縦長1ページのためfixed化(スクロール後もメニュー可) */
.hamburger{
  position:fixed;
  top:calc(var(--header-h) + clamp(10px, 1.6vw, 22px));
  right:calc(max((100vw - 1920px)/2, 0px) + var(--pad-x));
  z-index:110;               /* メニューパネルより前面（×として機能） */
  width:clamp(44px, 4.4vw, 58px);
  height:clamp(44px, 4.4vw, 58px);
  background:#fff;           /* 閉時は白背景(紫背景で埋もれないように・佐藤さん指示 2026-07-08) */
  border:1px solid rgba(227,200,19,.85);
  border-radius:50%;
  transition:transform .3s ease, border-color .3s ease, background-color .3s ease;
}
body.menu-open .hamburger{ background:transparent; } /* ×時はダークパネル上なので透明 */
.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); }

/* ---- NEWS ---- */
.news{ background:#8B28A0; }
.news-head{ position:absolute; color:#fff; line-height:2; font-weight:600; } /* 30px/60px */
.news-list{ position:absolute; }
.news-row{ position:relative; }
.news-date{ position:absolute; left:0; top:-42%; color:#fff; line-height:2; } /* baseline合わせ(18px/36px) */
.news-tag{
  position:absolute; top:0; height:100%;
  display:flex; align-items:center; justify-content:center;
  color:#F4DF92; border:1px solid #F4DF92; line-height:1;
}
.news-text{ position:absolute; top:-23.4%; color:#fff; line-height:1.5556; white-space:nowrap; } /* 18px/28px */

/* ---- CHARACTER カルーセル ---- */
.g-rule{ display:block; }
.carousel{ left:0; width:100%; }
.car-item{ position:absolute; top:0; bottom:0; display:block; transition:left .45s ease; }
.car-item.no-trans{ transition:none; }
.ci-img{ width:100%; object-fit:contain; }
.ci-name,.ci-kana,.ci-fac{
  position:absolute; left:50%; transform:translateX(-50%);
  color:#222; white-space:nowrap; text-align:center;
}
.ci-name{ line-height:1.7647; letter-spacing:.1em; }  /* 34px/60px */
.ci-kana{ line-height:3.75;   letter-spacing:.1em; }  /* 16px/60px */
.ci-fac{ line-height:2.7273; }                        /* 22px/60px */
.ci-rule{ position:absolute; left:50%; transform:translateX(-50%); width:66.71%; height:1px; }
.car-btn{
  position:absolute; z-index:3;
  background:#fff;
  border:1px solid var(--gcolor);
  border-radius:50%;
  color:var(--gcolor);
  display:flex; align-items:center; justify-content:center;
}
.car-btn svg{ width:31%; height:37%; }
.car-next svg{ transform:scaleX(-1); }
.car-dots{ position:absolute; display:flex; column-gap:1.8922cqw; z-index:3; }
.car-dot{ width:0.8333cqw; height:0.8333cqw; border-radius:50%; background:#fff; border:1px solid var(--gcolor); }
.car-dot.is-active{ background:var(--gcolor); }

/* ---- 相関図・年齢表 ---- */
.chart-link{ display:block; }
.chart-link img{ width:100%; height:100%; }

/* ---- フッター ---- */
.foot-white{ background:#fff; }
.foot-links{
  color:#96790D; line-height:2.25;                    /* 16px/36px */
  font-family:"Noto Sans JP",sans-serif; font-weight:500;
}
.foot-links a{ text-decoration:underline; text-underline-offset:0.18em; }
.foot-links a:hover{ opacity:.75; }
.foot-copy{ color:#222; line-height:3.6; font-family:"Noto Sans JP",sans-serif; font-weight:500; } /* 10px/36px */

/* ---- メニュー(ティザー流用: ハンバーガー展開・右からスライド) ---- */
.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(26px, 4.6vh, 52px);
}
.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)の幅で制御(ティザー方式)。
   幅はXDメニュー項目の実寸(矢印除外後 163.35/537.87/450.85/173.47/171.5 @1920)の等比0.81 */
.menu__label{ display:block; flex:0 0 auto; }
.menu__label img{ width:100%; height:auto; display:block; }
.menu__label--top{    width:clamp(66px,  6.89vw, 132px); }
.menu__label--intro{  width:clamp(218px, 22.69vw, 436px); }
.menu__label--char{   width:clamp(183px, 19.02vw, 365px); }
.menu__label--sokan{  width:clamp(70px,  7.32vw, 141px); }
.menu__label--nenrei{ width:clamp(70px,  7.23vw, 139px); }
.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); }
.menu__x{
  display:block;
  width:clamp(40px, 2.8vw, 54px);
  margin-top:clamp(26px, 4.6vh, 52px);
  transition:opacity .3s ease;
}
.menu__x img{ width:100%; height:auto; display:block; }
.menu__x:hover{ opacity:.75; }
body.menu-open{ overflow:hidden; }

/* ---- 拡大モーダル(相関図・年齢表) ---- */
.zoom-modal{
  position:fixed; inset:0; z-index:1200;
  background:rgba(20,10,25,.86);
  display:none; align-items:center; justify-content:center;
}
body.zoom-open .zoom-modal{ display:flex; }
.zoom-img{ max-width:92vw; max-height:92vh; width:auto; height:auto; box-shadow:0 12px 60px rgba(0,0,0,.5); }
.zoom-close{
  position:absolute; top:24px; right:32px;
  color:#fff; font-size:40px; line-height:1;
}

/* ---- アクセシビリティ ---- */
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  .car-item{ transition:none; }
}