@charset "UTF-8";
/* ============================================================
   全能ポラリス グランデ
   ・さとみさま専用。受講生のポラリスとは別のサイトです
   ・ポラリスより一段深い夜に、金の線。見出しは明朝で
   ============================================================ */

:root{
  --ink      : #05080F;   /* いちばん深い夜 */
  --ink-2    : #0A0F1E;   /* 夜（すこし明るい） */
  --ink-3    : #121A32;   /* 面を起こすとき */
  --paper    : #F2F0EA;   /* 文字の白（すこし温かい） */
  --paper-d  : #A9AFC0;   /* 控えめな文字 */
  --gold     : #C9A96A;   /* 金 */
  --gold-lt  : #E7D3A6;   /* 明るい金 */
  --gold-sf  : rgba(201,169,106,.42);
  --line-1   : rgba(242,240,234,.18);
  --line-2   : rgba(242,240,234,.08);

  --sans:"Yu Gothic Medium","游ゴシック Medium",YuGothic,"Yu Gothic","游ゴシック",
         "Hiragino Kaku Gothic ProN",Meiryo,sans-serif;
  --mincho:"Hiragino Mincho ProN","Yu Mincho",YuMincho,"Noto Serif JP",serif;
  --pad: clamp(1.4rem,5vw,5rem);
}

*,*::before,*::after{ box-sizing:border-box }
/* <svg> は hidden 属性だけでは消えません（HTMLとは別の決まりのため）。
   ここで全部まとめて効くようにしておきます。 */
[hidden]{ display:none !important }
html{ -webkit-text-size-adjust:100% }
body{
  margin:0; background:var(--ink); color:var(--paper);
  font-family:var(--sans); line-height:1.95; letter-spacing:.05em;
  -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; height:auto; display:block }
a{ color:inherit }

/* ── 星をまばらに ── */
.sky{ position:fixed; inset:0; pointer-events:none; z-index:0; overflow:hidden }
.sky span{
  position:absolute; width:2px; height:2px; border-radius:50%;
  background:var(--paper); opacity:.5; animation:tw 5s ease-in-out infinite;
}
.sky span:nth-child(1){ top:12%; left:8%  }
.sky span:nth-child(2){ top:28%; left:76%; animation-delay:1.1s }
.sky span:nth-child(3){ top:58%; left:18%; animation-delay:2.3s }
.sky span:nth-child(4){ top:72%; left:88%; animation-delay:.6s }
.sky span:nth-child(5){ top:40%; left:46%; animation-delay:3.1s }
.sky span:nth-child(6){ top:86%; left:34%; animation-delay:1.8s }
@keyframes tw{ 0%,100%{opacity:.18} 50%{opacity:.75} }

/* ============================================================
   恒星ポラリス（ヒーローの中心でかがやきます）
   ============================================================ */
.polaris{ width:clamp(9rem,26vw,15rem); margin:0 auto .4rem; line-height:0 }
.polaris--gate{ width:clamp(8rem,22vw,12rem); margin-bottom:.8rem }
.polaris__svg{ width:100%; height:auto; display:block; overflow:visible }

/* かたまりごとに、中心を軸にして動かします */
.polaris__glow,
.polaris__spikes,
.polaris__core,
.polaris__rays{ transform-box:fill-box; transform-origin:center }

.polaris__glow  { animation:pg-breathe 6s   ease-in-out infinite }
.polaris__core  { animation:pg-core    6s   ease-in-out infinite }
.polaris__spikes{ animation:pg-spike   4.2s ease-in-out infinite }
.polaris__rays  { animation:pg-turn    72s  linear       infinite }

@keyframes pg-breathe{ 0%,100%{ opacity:.78; transform:scale(1)    }
                       50%    { opacity:1;   transform:scale(1.07) } }
@keyframes pg-core   { 0%,100%{ opacity:.9;  transform:scale(1)    }
                       50%    { opacity:1;   transform:scale(1.12) } }
@keyframes pg-spike  { 0%,100%{ opacity:.82; transform:scale(.97)  }
                       50%    { opacity:1;   transform:scale(1.03) } }
@keyframes pg-turn   { to{ transform:rotate(360deg) } }

@media (prefers-reduced-motion:reduce){
  .polaris__glow,.polaris__core,.polaris__spikes,.polaris__rays{ animation:none }
}

/* ============================================================
   入口
   ============================================================ */
#gate{
  position:fixed; inset:0; z-index:50; display:grid; place-items:center;
  padding:var(--pad) 1.2rem;
  background:
    radial-gradient(90% 60% at 50% 0%, rgba(201,169,106,.10), rgba(0,0,0,0) 62%),
    linear-gradient(180deg, var(--ink-2), var(--ink));
  overflow:auto;
}
.gate__box{ width:min(27rem,100%); text-align:center }
.gate__k{
  margin:0 0 .9rem; font-size:.6rem; letter-spacing:.42em; color:var(--gold);
}
.gate__name{
  margin:0; font-family:var(--mincho); font-weight:400;
  font-size:clamp(1.5rem,5vw,2rem); letter-spacing:.18em; color:var(--paper);
}
.gate__en{
  margin:.7rem 0 0; font-size:.56rem; letter-spacing:.34em; color:var(--paper-d);
}
.gate__rule{
  width:3.4rem; height:1px; margin:1.5rem auto;
  background:linear-gradient(90deg, transparent, var(--gold), transparent);
}
.gate__lead{
  margin:0 0 2rem; font-size:.84rem; line-height:2.2; color:var(--paper-d);
}
.gate__label{
  display:block; font-size:.56rem; letter-spacing:.3em; color:var(--gold);
  margin-bottom:.7rem;
}
.pw-wrap{ position:relative }
.pw-wrap input{
  width:100%; font-family:inherit; font-size:.92rem; letter-spacing:.1em;
  color:var(--paper); background:rgba(242,240,234,.05);
  border:1px solid var(--line-1); border-radius:2px;
  padding:.85rem 3rem .85rem 1rem; text-align:center;
}
.pw-wrap input:focus{ outline:none; border-color:var(--gold-sf) }
.pw-wrap input::placeholder{ color:rgba(169,175,192,.5); letter-spacing:.14em }
.pw-eye{
  position:absolute; right:.5rem; top:50%; transform:translateY(-50%);
  display:grid; place-items:center; width:2.2rem; height:2.2rem;
  background:none; border:0; color:var(--paper-d); cursor:pointer;
}
.pw-eye:hover{ color:var(--gold) }
.btn{
  display:inline-flex; align-items:center; gap:.7rem; margin-top:1.3rem;
  font-family:inherit; font-size:.82rem; letter-spacing:.14em; cursor:pointer;
  color:var(--ink); background:linear-gradient(180deg,var(--gold-lt),var(--gold));
  border:0; border-radius:2px; padding:.9rem 2.2rem;
  transition:filter .4s ease, gap .4s ease;
}
.btn:hover{ filter:brightness(1.08); gap:1rem }
.gate__error{ margin:1rem 0 0; min-height:1.4em; font-size:.76rem; color:#F0A9A9 }
.gate__note{
  margin:2.2rem 0 0; font-size:.7rem; line-height:2.1; color:rgba(169,175,192,.7);
}

/* ============================================================
   本編
   ============================================================ */
.page{ position:relative; z-index:1 }
.wrap{ width:min(58rem,100%); margin-inline:auto; padding-inline:var(--pad) }
.sec{ padding-block:clamp(3rem,9vh,6rem) }

.head{ text-align:center }
.head__k{ margin:0 0 1rem; font-size:.6rem; letter-spacing:.42em; color:var(--gold) }
.head__h{
  margin:0; font-family:var(--mincho); font-weight:400;
  font-size:clamp(1.6rem,5.2vw,2.3rem); letter-spacing:.18em;
}
.head__en{ margin:.9rem 0 0; font-size:.56rem; letter-spacing:.34em; color:var(--paper-d) }
.head__rule{
  width:3.4rem; height:1px; margin:1.6rem auto 0;
  background:linear-gradient(90deg, transparent, var(--gold), transparent);
}
.head__lead{
  margin:1.8rem 0 0; font-size:.86rem; line-height:2.3; color:var(--paper-d);
}

/* ── お部屋のカード ── */
.rooms{
  display:grid; gap:clamp(1rem,2.4vw,1.5rem);
  grid-template-columns:repeat(auto-fit,minmax(20rem,1fr));   /* 4枚を 2×2 に並べます */
  margin-top:clamp(2.4rem,6vh,3.6rem);
}
.room{
  position:relative; display:flex; flex-direction:column; overflow:hidden;
  padding:clamp(1.7rem,3.6vw,2.2rem) clamp(1.3rem,2.8vw,1.8rem) clamp(1.4rem,3vw,1.8rem);
  border:1px solid var(--gold-sf); border-radius:3px; text-decoration:none;
  background:
    radial-gradient(120% 80% at 50% 0%, rgba(201,169,106,.14), rgba(0,0,0,0) 62%),
    linear-gradient(165deg, rgba(201,169,106,.08), rgba(242,240,234,.03));
  transition:border-color .5s ease, transform .5s ease, box-shadow .5s ease;
}
.room::before{
  content:""; position:absolute; top:0; left:12%; right:12%; height:1px;
  background:linear-gradient(90deg, transparent, var(--gold), transparent);
}
.room:hover{
  border-color:var(--gold); transform:translateY(-3px);
  box-shadow:0 18px 44px -28px rgba(0,0,0,.95);
}
.room__no{
  font-family:var(--mincho); font-size:.72rem; letter-spacing:.3em; color:var(--gold);
}
.room__h{
  margin:.9rem 0 0; font-family:var(--mincho); font-weight:400;
  font-size:1.18rem; letter-spacing:.1em; color:var(--paper);
}
.room__en{ margin:.5rem 0 0; font-size:.54rem; letter-spacing:.26em; color:var(--paper-d) }
.room__b{
  margin:1rem 0 0; font-size:.8rem; line-height:2.1; color:var(--paper-d);
}
.room__go{
  margin-top:auto; padding-top:1.4rem;
  font-size:.74rem; letter-spacing:.12em; color:var(--gold);
}
.room__arw{ display:inline-block; margin-left:.5rem; transition:transform .4s ease }
.room:hover .room__arw{ transform:translateX(4px) }

/* 準備中のカード */
.room--soon{
  border-color:var(--line-1); cursor:default;
  background:linear-gradient(165deg, rgba(242,240,234,.04), rgba(242,240,234,.015));
}
.room--soon::before{ background:linear-gradient(90deg, transparent, var(--line-1), transparent) }
.room--soon:hover{ border-color:var(--line-1); transform:none; box-shadow:none }
.room--soon .room__no,
.room--soon .room__h{ color:var(--paper-d) }
.room--soon .room__go{ color:rgba(169,175,192,.65) }

/* ── ふわり ── */
.reveal{ opacity:0; transform:translateY(16px); transition:opacity .9s ease, transform .9s ease }
.reveal.is-in{ opacity:1; transform:none }
@media (prefers-reduced-motion:reduce){
  .reveal{ opacity:1; transform:none; transition:none }
  .sky span{ animation:none }
}

/* ── フッター ── */
.foot{
  text-align:center; padding:clamp(2.4rem,6vh,4rem) var(--pad) clamp(2rem,5vh,3rem);
  border-top:1px solid var(--line-2);
}
.foot__name{
  margin:0; font-family:var(--mincho); font-size:.94rem; letter-spacing:.2em; color:var(--gold);
}
.foot__en{ margin:.6rem 0 0; font-size:.52rem; letter-spacing:.3em; color:var(--paper-d) }
.foot__note{ margin:1.6rem 0 0; font-size:.7rem; line-height:2; color:rgba(169,175,192,.65) }

/* ── お部屋のページの、もどるリンク ── */
.backbar{ text-align:center; padding:clamp(1.6rem,4vh,2.4rem) 1rem 0 }
.backbar a{
  font-size:.74rem; letter-spacing:.1em; color:var(--paper-d); text-decoration:none;
  border-bottom:1px solid var(--line-1); padding-bottom:.2rem;
}
.backbar a:hover{ color:var(--gold); border-color:var(--gold-sf) }