@charset "UTF-8";
/* 棚照結神 キャラクター詳細 (XD 0629 キャラ21アートボード準拠・gen_character.py 機械生成)
   canvas=1920x1100 %座標系。ヘッダー/ハンバーガー/メニューはトップ(style.css)と同一部品 */
*,*::before,*::after{ box-sizing:border-box; }
body,h1,h2,h3,p,ul,li,figure{ margin:0; padding:0; }
ul{ list-style:none; }
img{ display:block; }
a{ color:inherit; text-decoration:none; }
button{ appearance:none; border:0; background:none; padding:0; cursor:pointer; font:inherit; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
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);
}

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

/* ---- 背景(和柄250pxタイル・トップと同素材) ---- */
.bg-tile{
  background-image:url("../img/bg/haikei_pattern.png");
  background-size:12.9688cqw 12.9688cqw;   /* 249px @1920 */
  background-position:0 0;
  background-repeat:repeat;
}

/* ---- テキスト(色・行間はXD実測。サイズ/座標はインライン%) ---- */
.canvas p{ white-space:nowrap; }
.t-fac{ color:#fff; line-height:2.7273; }                    /* 22px/60px */
.t-tanatera{ color:#222; line-height:1.9231; letter-spacing:.2em; }  /* 26px/50px */
.t-mlabel{ color:#222; line-height:1.1429; letter-spacing:.1em; }    /* 14px/16px */
.t-mname{ color:#222; line-height:1.5625; letter-spacing:.2em; }     /* 32px/50px */
.t-yomi{ color:#222; line-height:2.1429; letter-spacing:.5em; }      /* 14px/30px */
.t-profile{ color:#222; line-height:2.25; }                          /* 16px/36px */
.t-voice{ color:#222; line-height:3.6; font-family:"Noto Sans JP",sans-serif; font-weight:500;
  text-align:center; transform:translateX(-50%); }                   /* 10px/36px center */
.t-raw{ color:#222; }
.tag-box{ background:#696969; }

/* ---- Voiceボタン ---- */
.cd-voice{ border-radius:50%; }
.cd-voice img{ width:100%; height:100%; }
.cd-voice:hover{ opacity:.8; }
.cd-voice.is-playing{ opacity:.65; }

/* ---- ページャー(前後キャラ移動・XD外の追加実装 2026-07-08 佐藤さん指示) ---- */
.pager-sec{
  position:relative;
  width:100%;
  aspect-ratio:1920/150;
  container-type:inline-size;
  background-image:url("../img/bg/haikei_pattern.png");
  background-size:12.9688cqw 12.9688cqw;
  background-position:0 -5.4167cqw;   /* canvas(1100px=タイル4枚+104px)から目地を連続 */
  background-repeat:repeat;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding-inline:6.25cqw;             /* 120px @1920 */
}
.pager-sec a{
  display:inline-flex;
  align-items:center;
  gap:0.7292cqw;
  font-size:0.9375cqw;                /* 18px */
  color:#222;
  transition:opacity .3s ease;
}
.pager-sec a:hover{ opacity:.7; }
.pg-arrow{ color:var(--gold); font-size:1.1458cqw; line-height:1; transition:transform .3s ease; }
.pg-prev:hover .pg-arrow{ transform:translateX(-.25em); }
.pg-next:hover .pg-arrow{ transform:translateX(.25em); }
.pg-list{
  font-size:0.8333cqw;                /* 16px */
  border:1px solid rgba(227,200,19,.85);
  border-radius:2.0833cqw;
  padding:0.7292cqw 1.8229cqw;
  background:#fff;
}

/* ---- フッター(トップ index.html y9330-9940 の610pxを移植) ---- */
.foot-sec{
  position:relative;
  width:100%;
  aspect-ratio:1920/610;
  overflow:hidden;
  container-type:inline-size;
  background-image:url("../img/bg/haikei_pattern.png");
  background-size:12.9688cqw 12.9688cqw;
  background-position:0 -0.2604cqw;   /* pager下端(1250px=タイル5枚+5px)から目地を連続 */
  background-repeat:repeat;
}
.foot-sec > *{ position:absolute; }
.foot-white{ background:#fff; }
.foot-links{
  color:#96790D; line-height:2.25;                     /* 16px/36px */
  font-family:"Noto Sans JP",sans-serif; font-weight:500;
  transform:translateX(-50%); text-align:center; white-space:nowrap;
}
.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;                         /* 10px/36px */
  font-family:"Noto Sans JP",sans-serif; font-weight:500;
  transform:translateX(-50%); text-align:center; white-space:nowrap;
}

/* ---- ヘッダー(トップと同一部品) ---- */
.site-header{ background:#fff; }
.f-logo{ object-fit:contain; }
.btn-x img{ width:100%; height:100%; }

/* ---- ハンバーガー(トップと同一部品) ---- */
.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;
  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); }

/* ---- メニュー(トップと同一部品) ---- */
.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;
}
.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; }

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
}