@charset "UTF-8";
/* ============================================================
   全星全能ポラリス
   HEART LINK WEB STUDIO と同じ作法（游ゴシック・clamp・金の細線）に、
   星空の色をのせています。
   ============================================================ */

:root{
  /* ── 星空の色 ── */
  --night      : #070B1C;   /* いちばん深い夜 */
  --night-2    : #0D1430;   /* 夜（やや明るい） */
  --night-3    : #16204A;   /* 窓の外の宇宙 */
  --star       : #EAF0FF;   /* 星の白 */
  --star-dim   : #A7B4D6;   /* 控えめな文字 */
  --glow       : #8EC9FF;   /* 星のまたたき・水色 */
  --crystal    : #B9A3E3;   /* クリスタルの紫 */
  --gold       : #C5A772;   /* ハートリンクと同じ金 */
  --gold-soft  : rgba(197,167,114,.45);
  --line-1     : rgba(234,240,255,.20);
  --line-2     : rgba(234,240,255,.10);

  /* ── 文字 ── */
  --font:"Yu Gothic Medium","游ゴシック Medium",YuGothic,"游ゴシック体",
         "Yu Gothic","游ゴシック","Hiragino Kaku Gothic ProN","ヒラギノ角ゴ ProN W3",
         Meiryo,"メイリオ",sans-serif;
  --pad: clamp(1.5rem,5.4vw,6rem);
}

*,*::before,*::after{box-sizing:border-box}
html{ -webkit-text-size-adjust:100% }
body{
  margin:0;
  font-family:var(--font);
  color:var(--star);
  background:var(--night);
  line-height:2;
  letter-spacing:.07em;
  overflow-x:hidden;
}
img{max-width:100%;height:auto;display:block}
[hidden]{display:none !important}
a{color:inherit;text-decoration:none}
button,input{font-family:inherit}

/* ============================================================
   星空の背景（画像がなくても美しく見えるようにCSSで描いています）
   ============================================================ */
.sky{
  position:fixed; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(1200px 620px at 72% 18%, rgba(78,112,200,.30), transparent 62%),
    radial-gradient(900px 520px at 18% 72%, rgba(150,120,200,.18), transparent 64%),
    radial-gradient(700px 420px at 50% 0%,  rgba(142,201,255,.14), transparent 70%),
    linear-gradient(180deg, var(--night) 0%, var(--night-2) 46%, #060A18 100%);
}
/* 細かな星（2層の点描を重ねています） */
.sky::before,.sky::after{
  content:""; position:absolute; inset:-20%;
  background-image:
    radial-gradient(1.4px 1.4px at 12% 22%, rgba(255,255,255,.95), transparent),
    radial-gradient(1.2px 1.2px at 34% 9%,  rgba(255,255,255,.75), transparent),
    radial-gradient(1.6px 1.6px at 58% 31%, rgba(255,255,255,.85), transparent),
    radial-gradient(1.1px 1.1px at 77% 14%, rgba(200,225,255,.80), transparent),
    radial-gradient(1.5px 1.5px at 88% 44%, rgba(255,255,255,.70), transparent),
    radial-gradient(1.2px 1.2px at 23% 58%, rgba(255,255,255,.65), transparent),
    radial-gradient(1.4px 1.4px at 47% 72%, rgba(210,230,255,.75), transparent),
    radial-gradient(1.1px 1.1px at 68% 87%, rgba(255,255,255,.60), transparent),
    radial-gradient(1.3px 1.3px at 8%  88%, rgba(255,255,255,.55), transparent),
    radial-gradient(1.2px 1.2px at 92% 68%, rgba(255,255,255,.60), transparent);
  background-size:52vmax 52vmax;
  opacity:.9;
  animation:drift 180s linear infinite;
}
.sky::after{
  background-size:33vmax 33vmax;
  opacity:.5;
  animation-duration:260s; animation-direction:reverse;
}
@keyframes drift{ to{ transform:translate3d(-52vmax,-26vmax,0) } }

/* またたく星 */
.glint{
  position:absolute; width:3px; height:3px; border-radius:50%;
  background:#fff; box-shadow:0 0 10px 3px rgba(142,201,255,.85);
  opacity:0; animation:twinkle 5.5s ease-in-out infinite;
}
.glint--1{ left:16%; top:24%; animation-delay:.4s }
.glint--2{ left:63%; top:14%; animation-delay:2.1s }
.glint--3{ left:81%; top:52%; animation-delay:3.4s }
.glint--4{ left:34%; top:66%; animation-delay:1.3s }
.glint--5{ left:72%; top:78%; animation-delay:4.2s }
@keyframes twinkle{ 0%,100%{opacity:0;transform:scale(.6)} 50%{opacity:1;transform:scale(1)} }

/* ============================================================
   パスワードの入口
   ============================================================ */
#gate{
  position:fixed; inset:0; z-index:60;
  display:flex; align-items:center; justify-content:center;
  padding:var(--pad);
  background:
    radial-gradient(800px 500px at 50% 30%, rgba(60,90,170,.30), transparent 65%),
    linear-gradient(180deg,#060A18,#0C1330);
}
.gate__box{ width:min(30rem,100%); text-align:center }
.gate__star{
  width:46px;height:46px;margin:0 auto clamp(1.4rem,3vh,2rem);
  position:relative;
}
.gate__star::before,.gate__star::after{
  content:"";position:absolute;inset:0;margin:auto;background:var(--star);
  box-shadow:0 0 18px 4px rgba(142,201,255,.7);
}
.gate__star::before{ width:1.5px;height:100%;}
.gate__star::after { width:100%;height:1.5px;}
.gate__name{
  font-size:clamp(1.15rem,2.4vw,1.6rem); letter-spacing:.3em;
  margin:0 0 .5rem; font-weight:400;
}
.gate__en{
  font-size:.64rem; letter-spacing:.42em; text-transform:uppercase;
  color:var(--star-dim); margin:0 0 clamp(2rem,4vh,3rem);
}
.gate__lead{ font-size:.86rem; color:var(--star-dim); line-height:2.2; margin:0 0 1.8rem }
.gate__field{ display:flex; flex-direction:column; gap:.9rem; align-items:center }
.gate__label{ font-size:.66rem; letter-spacing:.3em; color:var(--star-dim) }
.pw-wrap{ position:relative; width:min(16rem,100%) }
#pw{
  width:100%; text-align:center;
  padding:.95rem 2.9rem .95rem 1rem; font-size:1rem; letter-spacing:.3em;
  color:var(--star); background:rgba(234,240,255,.06);
  border:1px solid var(--line-1); border-radius:2px; outline:none;
  transition:border-color .4s ease, background .4s ease;
}
/* 合言葉を見えるようにするボタン */
.pw-eye{
  position:absolute; right:.45rem; top:50%; transform:translateY(-50%);
  display:inline-flex; align-items:center; justify-content:center;
  width:2rem; height:2rem; padding:0; cursor:pointer;
  background:none; border:0; border-radius:2px;
  color:var(--star-dim); transition:color .35s ease;
}
.pw-eye:hover{ color:var(--gold) }
.pw-eye:focus-visible{ outline:1px solid var(--gold-soft); outline-offset:2px }
#pw:focus{ border-color:var(--gold); background:rgba(234,240,255,.10) }
.gate__error{ min-height:1.6em; font-size:.78rem; color:#F0A9A9; letter-spacing:.06em }
.gate__note{ margin-top:clamp(2rem,4vh,3rem); font-size:.72rem; color:rgba(167,180,214,.75); line-height:2.1 }

/* ============================================================
   共通パーツ（HEART LINK と同じ考え方）
   ============================================================ */
.page{ position:relative; z-index:1 }
.sec{ padding:clamp(4.2rem,11vh,8rem) var(--pad) }
.wrap{ max-width:72rem; margin:0 auto }
.wrap--narrow{ max-width:42rem; margin:0 auto }

.kicker{
  display:flex; align-items:center; gap:1rem;
  font-size:.64rem; letter-spacing:.42em; text-transform:uppercase;
  color:var(--star-dim);
}
.kicker::before{ content:""; width:2.2rem; height:1px; background:var(--gold) }
.kicker--c{ justify-content:center }
.kicker--c::after{ content:""; width:2.2rem; height:1px; background:var(--gold) }

.ttl{
  font-weight:400; font-size:clamp(1.4rem,2.8vw,2.3rem);
  line-height:1.95; letter-spacing:.11em;
  margin:clamp(1rem,2.4vh,1.6rem) 0 0;
}
.ttl-en{
  font-style:italic; font-size:clamp(.88rem,1.1vw,1.05rem);
  letter-spacing:.18em; color:var(--gold); margin-top:.8rem;
}
.body{
  font-size:clamp(.9rem,1.02vw,1rem); line-height:2.35;
  letter-spacing:.07em; color:var(--star-dim);
}
.line{ width:clamp(2.6rem,5vw,4rem); height:1px; background:var(--gold);
       margin:clamp(1.6rem,3.2vh,2.2rem) 0 }
.line--c{ margin-inline:auto }
.c{ text-align:center }
.mt{ margin-top:clamp(1.2rem,2.6vh,1.8rem) }

/* ボタン */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.8rem;
  min-height:3.4rem; padding:0 clamp(1.5rem,2.4vw,2.3rem);
  font-size:.78rem; letter-spacing:.2em;
  border:1px solid var(--gold); color:var(--star);
  background:rgba(197,167,114,.10); border-radius:2px;
  transition:background .5s ease, color .5s ease, border-color .5s ease;
}
.btn:hover{ background:var(--gold); color:#0B1026 }
.btn__arrow{ transition:transform .4s ease }
.btn:hover .btn__arrow{ transform:translateX(.3rem) }

/* ============================================================
   ヒーロー
   ============================================================ */
.hero{
  position:relative; min-height:min(90vh,54rem);
  display:flex; align-items:flex-end;
  padding:clamp(6rem,14vh,9rem) var(--pad) clamp(3.4rem,8vh,5.5rem);
  overflow:hidden;
}
/* 画像（assets/hero.jpg）。ファイルが無いときは星空の背景だけが見えます */
.hero__media{ position:absolute; inset:0; z-index:0 }
.hero__media img{
  width:100%; height:100%; object-fit:cover; object-position:center;
  animation:reveal 2.6s cubic-bezier(.22,.61,.36,1) both;
}
@keyframes reveal{ from{opacity:0;transform:scale(1.05)} to{opacity:1;transform:none} }

/* 文字を読みやすくする膜。絵のじゃまをしないよう、下と左からそっとかけます */
.hero__media::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:
    linear-gradient(180deg, rgba(7,11,28,.50) 0%, rgba(7,11,28,.08) 30%, rgba(7,11,28,.58) 70%, rgba(7,11,28,.96) 100%),
    linear-gradient(90deg, rgba(7,11,28,.74) 0%, rgba(7,11,28,.34) 40%, rgba(7,11,28,0) 66%);
}
/* 明るい絵の上でも文字が沈まないように、ごく淡い陰を添えます */
.hero__eyebrow,.hero__en,.hero__title,.hero__sub,.hero__scroll{
  text-shadow:0 1px 14px rgba(7,11,28,.85), 0 0 3px rgba(7,11,28,.55);
}

.hero__inner{ position:relative; z-index:1; max-width:72rem; margin:0 auto; width:100% }
.hero__eyebrow{ font-size:.64rem; letter-spacing:.42em; text-transform:uppercase; color:var(--star-dim); margin:0 }
.hero__en{ font-style:italic; font-size:clamp(.9rem,1.2vw,1.1rem); letter-spacing:.18em; color:var(--gold); margin:.9rem 0 0 }
.hero__title{
  font-weight:400; margin:clamp(1rem,2.6vh,1.8rem) 0 0;
  font-size:clamp(1.9rem,5.2vw,3.5rem); line-height:1.65; letter-spacing:.14em;
  text-shadow:0 0 40px rgba(142,201,255,.35);
}
.hero__title span{ display:block }
.hero__rule{ width:clamp(3rem,6vw,5rem); height:1px; background:var(--gold); margin:clamp(1.8rem,3.6vh,2.6rem) 0 }
.hero__sub{ font-size:clamp(.92rem,1.1vw,1.04rem); line-height:2.4; color:var(--star-dim); margin:0; max-width:30rem }
.hero__scroll{ margin-top:clamp(2.4rem,5vh,3.6rem); font-size:.66rem; letter-spacing:.3em; color:var(--star-dim) }

/* ============================================================
   メニュー（鑑定のカード）
   ============================================================ */
.menu{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr));
       gap:clamp(1.2rem,2.6vw,2.2rem); margin-top:clamp(2.6rem,5vh,4rem) }
.card{
  position:relative; display:flex; flex-direction:column;
  padding:clamp(1.9rem,3.4vw,2.8rem);
  background:linear-gradient(160deg, rgba(234,240,255,.075), rgba(234,240,255,.025));
  border:1px solid var(--line-1); border-radius:3px;
  transition:border-color .5s ease, transform .5s ease, background .5s ease;
}
.card--ready:hover{
  border-color:var(--gold-soft); transform:translateY(-4px);
  background:linear-gradient(160deg, rgba(234,240,255,.11), rgba(234,240,255,.04));
}
.card__no{ font-size:1.35rem; letter-spacing:.1em; color:var(--gold); line-height:1 }
.card__h{ font-size:clamp(1.05rem,1.5vw,1.28rem); letter-spacing:.11em; line-height:1.9; margin:1.1rem 0 0; font-weight:400 }
.card__en{ font-style:italic; font-size:.78rem; letter-spacing:.16em; color:var(--star-dim); margin:.4rem 0 0 }
.card__body{ font-size:.86rem; line-height:2.2; color:var(--star-dim); margin:1.2rem 0 0; flex:1 }
.card__foot{ margin-top:clamp(1.4rem,2.6vh,2rem) }
.card__link{
  display:inline-flex; align-items:center; gap:.7rem;
  font-size:.75rem; letter-spacing:.2em; color:var(--star);
  padding-bottom:.5rem; border-bottom:1px solid var(--gold-soft);
  transition:border-color .4s ease, color .4s ease;
}
.card--ready:hover .card__link{ border-color:var(--gold); color:var(--gold) }
.card__link span{ transition:transform .4s ease }
.card--ready:hover .card__link span{ transform:translateX(.3rem) }
.card__soon{ display:inline-block; font-size:.7rem; letter-spacing:.24em; color:rgba(167,180,214,.7);
             border:1px solid var(--line-2); border-radius:2px; padding:.5rem 1rem }
.card--soon{ opacity:.72 }

/* ============================================================
   使い方
   ============================================================ */
.steps{ counter-reset:step; margin:clamp(2.2rem,4.5vh,3.2rem) 0 0; padding:0; list-style:none }
.step{ position:relative; padding:1.6rem 0 1.6rem 3.4rem; border-top:1px solid var(--line-2) }
.step:last-child{ border-bottom:1px solid var(--line-2) }
.step::before{
  counter-increment:step; content:counter(step,decimal-leading-zero);
  position:absolute; left:0; top:1.55rem;
  font-size:.86rem; letter-spacing:.1em; color:var(--gold);
}
.step__h{ font-size:clamp(.96rem,1.2vw,1.08rem); letter-spacing:.1em; margin:0 }
.step__b{ font-size:.84rem; line-height:2.2; color:var(--star-dim); margin:.5rem 0 0 }

/* ============================================================
   フッター
   ============================================================ */
.footer{
  padding:clamp(3.4rem,8vh,5.5rem) var(--pad);
  border-top:1px solid var(--line-2); text-align:center;
}
.footer__name{ font-size:.9rem; letter-spacing:.3em; margin:0 }
.footer__en{ font-size:.62rem; letter-spacing:.4em; text-transform:uppercase; color:var(--star-dim); margin:.7rem 0 0 }
.footer__note{ font-size:.74rem; line-height:2.2; color:rgba(167,180,214,.75); margin:clamp(1.6rem,3vh,2.4rem) 0 0 }

/* ============================================================
   あらわれる動き
   ============================================================ */
.fade{ opacity:0; transform:translateY(14px); animation:rise 1.5s cubic-bezier(.22,.61,.36,1) forwards }
@keyframes rise{ to{ opacity:1; transform:none } }
.d1{animation-delay:.25s}.d2{animation-delay:.45s}.d3{animation-delay:.65s}
.d4{animation-delay:.85s}.d5{animation-delay:1.05s}.d6{animation-delay:1.25s}

/* スクロールで浮かび上がる */
.reveal{ opacity:0; transform:translateY(22px); transition:opacity 1.1s ease, transform 1.1s cubic-bezier(.22,.61,.36,1) }
.reveal.is-in{ opacity:1; transform:none }

/* ============================================================
   スマートフォン
   ============================================================ */
@media (max-width:760px){
  .menu{ grid-template-columns:1fr }
  /* スマホでは、絵を切らずに全部見せてから文字を下に置きます */
  .hero{
    display:block; min-height:auto;
    padding:0 0 clamp(3rem,7vh,4.5rem);
  }
  .hero__media{ position:relative; inset:auto; aspect-ratio:1.9/1 }
  .hero__media::after{
    background:linear-gradient(180deg, rgba(7,11,28,.30) 0%, rgba(7,11,28,0) 42%, rgba(7,11,28,.55) 82%, var(--night) 100%);
  }
  .hero__inner{ padding:clamp(1.8rem,5vh,2.6rem) var(--pad) 0; margin-top:-2.6rem }
  /* 「星が、あなたのそばで」が途中で折り返さない大きさにします */
  .hero__title{ font-size:clamp(1.25rem,6.4vw,2.2rem); letter-spacing:.04em; line-height:1.8 }
  .gate__name{ letter-spacing:.22em }
}

/* とても細い画面（小さなスマホ・分割表示など） */
@media (max-width:400px){
  .hero__title{ font-size:6.2vw; letter-spacing:.02em }
  .kicker{ font-size:.58rem; letter-spacing:.3em }
  .hero__eyebrow{ font-size:.58rem; letter-spacing:.3em }
  .gate__name{ font-size:1.12rem; letter-spacing:.16em }
  .gate__lead{ font-size:.78rem; letter-spacing:.02em }
  .gate__note{ font-size:.68rem; letter-spacing:.02em }
  .gate__en{ font-size:.58rem; letter-spacing:.3em }
}

/* 動きを減らす設定の方へ */
@media (prefers-reduced-motion:reduce){
  .fade,.hero__media{ animation:none; opacity:1; transform:none }
  .hero__media{ opacity:.42 }
  .sky::before,.sky::after,.glint{ animation:none }
  .glint{ opacity:.9 }
  .reveal{ opacity:1; transform:none; transition:none }
}