@charset "UTF-8";
/* ============================================================
   超実践ブループリント西洋占星術講座
   HEART LINK WEB STUDIO と同じ作法で組んでいます
   （游ゴシック・clamp・金の細線・ゆったりした余白）
   ============================================================ */

:root{
  --ivory    : #FFFFFF;
  --paper    : #F3F8FD;   /* ほんのり青い紙の色 */
  --paper-2  : #E8F0F9;
  --gold     : #C5A772;
  --gold-deep: #9A7B3A;
  --charcoal : #241F1E;
  --muted    : #413A35;
  --faint    : #6B6158;
  --night    : #1A2340;   /* 夜空（差し色） */
  --night-2  : #0E1528;
  --line-1   : rgba(36,31,30,.22);
  --line-2   : rgba(36,31,30,.12);

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

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

/* ---------- 共通 ---------- */
.sec{ padding:clamp(4.4rem,12vh,9rem) var(--pad); scroll-margin-top:4rem }
.sec--paper{ background:var(--paper) }
.sec--paper2{ background:var(--paper-2) }
.sec--night{ background:linear-gradient(170deg,var(--night) 0%,var(--night-2) 100%); color:#EDF1F8 }
/* 水色の章（星が読めれば、未来を予測できる！） */
.sec--sky{ background:linear-gradient(170deg,#EDF4FA 0%,#E3EEF8 100%) }
.sec--sky .kicker{ color:#4A6B86 }
.sec--sky .kicker::before,.sec--sky .kicker--c::after{ background:#7FA8C4 }
.sec--sky .line{ background:#7FA8C4 }
.wrap{ max-width:74rem; margin:0 auto }
.wrap--narrow{ max-width:44rem; margin:0 auto }
.wrap--mid{ max-width:58rem; margin:0 auto }

.kicker{
  display:flex; align-items:center; gap:1rem;
  font-size:.66rem; letter-spacing:.42em; text-transform:uppercase; color:var(--faint);
}
.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) }
.sec--night .kicker{ color:#A9B6D4 }

.ttl{
  font-weight:400; font-size:clamp(1.45rem,3vw,2.4rem);
  line-height:1.95; letter-spacing:.1em; margin:clamp(1rem,2.4vh,1.6rem) 0 0;
}
/* 長い見出し用に、少し小さく */
.ttl--sm{ font-size:clamp(1.25rem,2.3vw,1.85rem); line-height:2 }
.ttl-en{ font-style:italic; font-size:clamp(.9rem,1.15vw,1.1rem);
  letter-spacing:.18em; color:var(--gold-deep); margin-top:.8rem }
.sec--night .ttl-en{ color:var(--gold) }
.body{ font-size:clamp(.93rem,1.03vw,1.02rem); line-height:2.4; letter-spacing:.07em; color:var(--muted) }
.sec--night .body{ color:#C9D2E6 }
.line{ width:clamp(2.6rem,5vw,4rem); height:1px; background:var(--gold); margin:clamp(1.6rem,3.2vh,2.3rem) 0 }
.line--c{ margin-inline:auto }
/* 星を添えた区切り */
.line--star{ position:relative; width:clamp(5rem,9vw,7.5rem); overflow:visible }
.line--star::after{
  content:"✦"; position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  background:inherit; color:var(--gold); font-size:.78rem; line-height:1;
  padding:0 .7rem;
}
.sec--paper .line--star::after{ background:var(--paper) }
.sec--paper2 .line--star::after{ background:var(--paper-2) }
.sec--sky .line--star::after{ background:#E8F1F9 }
.sec--night .line--star::after{ background:#141C36 }
.sec .line--star::after{ background:var(--ivory) }
.sec--paper .line--star::after{ background:var(--paper) }
.sec--paper2 .line--star::after{ background:var(--paper-2) }
.sec--sky .line--star::after{ background:#E8F1F9 }
.sec--night .line--star::after{ background:#141C36 }
.c{ text-align:center }
.mt{ margin-top:clamp(1.2rem,2.6vh,1.8rem) }
.lead-strong{ font-size:clamp(1.05rem,1.6vw,1.3rem); line-height:2.2; letter-spacing:.09em; color:var(--charcoal) }
.sec--night .lead-strong{ color:#EDF1F8 }
em.mark{ font-style:normal; background:linear-gradient(transparent 62%, rgba(197,167,114,.32) 62%) }

/* ---------- ボタン ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.9rem;
  min-height:3.8rem; padding:0 clamp(1.8rem,3vw,3rem);
  font-size:.82rem; letter-spacing:.2em; border-radius:2px;
  border:1px solid var(--gold); background:var(--gold); color:#fff;
  transition:background .5s ease,color .5s ease,border-color .5s ease;
}
.btn:hover{ background:#fff; color:var(--charcoal) }
.btn__arrow{ transition:transform .4s ease }
.btn:hover .btn__arrow{ transform:translateX(.35rem) }
.btn--line{ background:transparent; color:var(--charcoal); border-color:var(--line-1) }
.btn--line:hover{ background:var(--charcoal); color:#fff; border-color:var(--charcoal) }
.sec--night .btn--line,
.hero .btn--line{ color:#EDF1F8; border-color:rgba(237,241,248,.45); background:rgba(237,241,248,.06) }
.sec--night .btn--line:hover,
.hero .btn--line:hover{ background:#EDF1F8; color:var(--night); border-color:#EDF1F8 }

/* ---------- ヘッダー ---------- */
.header{
  position:fixed; inset:0 0 auto 0; z-index:40;
  display:flex; align-items:center; justify-content:center;
  padding:1.1rem var(--pad) 1.9rem; pointer-events:none;
  background:linear-gradient(to bottom, rgba(26,35,64,.72) 0%, rgba(26,35,64,.34) 50%, rgba(26,35,64,0) 100%);
}
.header a{ pointer-events:auto; display:flex; flex-direction:column; align-items:center; gap:.3rem; line-height:1 }
.header__sub{ font-size:.58rem; letter-spacing:.3em; color:rgba(237,241,248,.8) }
.header__name{ font-size:.82rem; letter-spacing:.34em; color:#fff;
  padding-bottom:.3rem; border-bottom:1px solid rgba(197,167,114,.55);
  transition:color .4s ease,border-color .4s ease }
.header a:hover .header__name{ color:var(--gold); border-color:var(--gold) }

/* ---------- ヒーロー ---------- */
.hero{
  position:relative; min-height:min(94vh,56rem);
  display:flex; align-items:center; justify-content:center;
  padding:clamp(8.5rem,19vh,12rem) var(--pad) clamp(4rem,10vh,7rem);
  text-align:center; overflow:hidden;
  background:
    radial-gradient(1100px 600px at 70% 14%, rgba(72,104,186,.34), transparent 62%),
    radial-gradient(820px 480px at 18% 80%, rgba(140,116,196,.22), transparent 64%),
    linear-gradient(175deg,#1A2340 0%,#121A33 52%,#0C1224 100%);
  color:#EDF1F8;
}
.hero__photo{ position:absolute; inset:0; z-index:0 }
.hero__photo img{ width:100%; height:100%; object-fit:cover; object-position:58% 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__photo::after{ content:""; position:absolute; inset:0; pointer-events:none;
  background:
    linear-gradient(180deg, rgba(14,21,40,.74) 0%, rgba(14,21,40,.42) 36%, rgba(14,21,40,.72) 76%, rgba(14,21,40,.96) 100%),
    radial-gradient(70% 60% at 50% 50%, rgba(14,21,40,.20), rgba(14,21,40,.68)) }
.hero__stars{ position:absolute; inset:-15%; z-index:1; pointer-events:none; opacity:.55;
  background-image:
    radial-gradient(1.5px 1.5px at 14% 20%, rgba(255,255,255,.95), transparent),
    radial-gradient(1.2px 1.2px at 36% 10%, rgba(255,255,255,.7), transparent),
    radial-gradient(1.6px 1.6px at 60% 28%, rgba(255,255,255,.85), transparent),
    radial-gradient(1.2px 1.2px at 80% 16%, rgba(210,230,255,.8), transparent),
    radial-gradient(1.4px 1.4px at 90% 46%, rgba(255,255,255,.7), transparent),
    radial-gradient(1.2px 1.2px at 24% 60%, rgba(255,255,255,.65), transparent),
    radial-gradient(1.5px 1.5px at 48% 76%, rgba(215,232,255,.75), transparent),
    radial-gradient(1.2px 1.2px at 70% 88%, rgba(255,255,255,.6), transparent),
    radial-gradient(1.3px 1.3px at 8% 86%, rgba(255,255,255,.55), transparent);
  background-size:46vmax 46vmax; animation:drift 200s linear infinite;
}
@keyframes drift{ to{ transform:translate3d(-46vmax,-23vmax,0) } }
.hero__inner{ position:relative; z-index:2; max-width:46rem }
.hero__eyebrow{ font-size:.62rem; letter-spacing:.42em; text-transform:uppercase; color:#A9B6D4; margin:0 }
.hero__course{ font-size:clamp(1.02rem,2.3vw,1.6rem); letter-spacing:.2em; color:var(--gold);
  margin:1.1rem 0 0; line-height:1.8 }
.hero__title{
  font-weight:400; margin:clamp(1.4rem,3vh,2.2rem) 0 0;
  font-size:clamp(1.65rem,5vw,3.1rem); line-height:1.7; letter-spacing:.1em;
  text-shadow:0 0 40px rgba(140,180,255,.3);
}
.hero__sub{ font-size:clamp(.92rem,1.2vw,1.08rem); line-height:2.4; color:#DCE3F2;
  margin:clamp(1.6rem,3.4vh,2.4rem) 0 0 }
.hero__eyebrow,.hero__course,.hero__title,.hero__sub{
  text-shadow:0 1px 16px rgba(10,15,32,.85), 0 0 3px rgba(10,15,32,.6) }
.hero__rule{ width:4rem; height:1px; background:var(--gold); margin:clamp(1.8rem,3.6vh,2.6rem) auto }
.hero__actions{ display:flex; flex-wrap:wrap; gap:.9rem; justify-content:center; margin-top:clamp(1.8rem,4vh,2.8rem) }


/* ---------- 写真の帯 ---------- */
.band{ position:relative; overflow:hidden; min-height:clamp(14rem,34vh,22rem);
  display:flex; align-items:center; justify-content:center; text-align:center; padding:var(--pad) }
.band img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0 }
.band::after{ content:""; position:absolute; inset:0; z-index:1;
  background:linear-gradient(180deg, rgba(14,21,40,.62), rgba(14,21,40,.74)) }
.band--tall{ min-height:clamp(17rem,44vh,27rem) }
.band__glyph{ display:block; font-size:clamp(1.6rem,3.2vw,2.3rem); color:var(--gold);
  line-height:1; margin-bottom:clamp(1rem,2.2vh,1.6rem);
  text-shadow:0 0 26px rgba(197,167,114,.5) }
.band__sub{ display:block; margin-top:clamp(.9rem,2vh,1.4rem);
  font-size:clamp(.88rem,1.5vw,1.08rem); letter-spacing:.1em; color:#CBD5EA }
.band__text{ position:relative; z-index:2; color:#EDF1F8;
  font-size:clamp(1.05rem,2.2vw,1.55rem); letter-spacing:.12em; line-height:2.1;
  text-shadow:0 1px 16px rgba(10,15,32,.8) }

/* ---------- 文章と写真を並べる ---------- */
.split{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(1.8rem,4vw,3.6rem); align-items:center; margin-top:clamp(2rem,4vh,3rem) }
.split--rev .split__fig{ order:-1 }
.split__fig{ margin:0 }
.split__fig img{ width:100%; border-radius:3px }

/* ---------- ポラリスの鑑定メニュー ---------- */
.pmenu{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(1rem,2.4vw,1.8rem); margin-top:clamp(2rem,4vh,3rem) }
.pcard{
  position:relative; overflow:hidden;
  padding:clamp(1.6rem,2.8vw,2.2rem); border:1px solid rgba(237,241,248,.18); border-radius:3px;
  background:linear-gradient(160deg, rgba(237,241,248,.08), rgba(237,241,248,.03));
  transition:border-color .55s ease, transform .55s ease, box-shadow .55s ease, background .55s ease;
}
/* 内側に散る小さな星 */
.pcard::before{
  content:""; position:absolute; inset:0; pointer-events:none; opacity:.55;
  background-image:
    radial-gradient(1.4px 1.4px at 18% 22%, rgba(255,255,255,.75), transparent),
    radial-gradient(1.1px 1.1px at 72% 14%, rgba(210,230,255,.6), transparent),
    radial-gradient(1.3px 1.3px at 86% 62%, rgba(255,255,255,.5), transparent),
    radial-gradient(1px 1px at 34% 78%, rgba(255,255,255,.45), transparent),
    radial-gradient(1.2px 1.2px at 58% 44%, rgba(215,232,255,.4), transparent);
}
/* 左上の金の角飾り */
.pcard::after{
  content:""; position:absolute; left:0; top:0; width:2.6rem; height:2.6rem; pointer-events:none;
  border-top:1px solid rgba(197,167,114,.6); border-left:1px solid rgba(197,167,114,.6);
  transition:width .55s ease, height .55s ease, border-color .55s ease;
}
.pcard:hover{
  transform:translateY(-5px); border-color:rgba(197,167,114,.55);
  background:linear-gradient(160deg, rgba(237,241,248,.12), rgba(237,241,248,.05));
  box-shadow:0 14px 40px rgba(6,10,26,.45);
}
.pcard:hover::after{ width:4rem; height:4rem; border-color:var(--gold) }

/* 大きな数字の透かし */
.pcard__deco{
  position:absolute; right:.7rem; top:.1rem; z-index:0; pointer-events:none;
  font-size:clamp(4rem,8vw,5.4rem); line-height:1; letter-spacing:0;
  color:rgba(197,167,114,.16);
}
.pcard > *:not(.pcard__deco){ position:relative; z-index:1 }

/* 星のしるし */
.pcard__icon{ display:block; width:2.8rem; height:2.8rem; color:var(--gold); margin-bottom:.9rem }
.pcard__icon svg{ width:100%; height:100%; display:block }

.pcard__no{ font-size:.66rem; letter-spacing:.26em; color:var(--gold); line-height:1 }
.pcard__h{ font-size:clamp(1rem,1.3vw,1.14rem); letter-spacing:.09em; margin:.7rem 0 0; font-weight:400 }
.pcard__en{ font-style:italic; font-size:.76rem; letter-spacing:.16em; color:#A9B6D4; margin:.35rem 0 0 }
.pcard__b{ font-size:.85rem; line-height:2.15; color:#C3CDE2; margin:1rem 0 0;
  padding-top:1rem; border-top:1px solid rgba(237,241,248,.12) }
.exclusive{ display:inline-block; padding:.9rem 1.8rem; border-radius:2px;
  border:1px solid rgba(197,167,114,.45); background:rgba(197,167,114,.08);
  color:var(--gold); font-size:clamp(.78rem,1.05vw,.9rem); letter-spacing:.16em; line-height:1.9 }
.polaris-figure{ max-width:17rem; margin:clamp(1.8rem,3.6vh,2.6rem) auto 0;
  border-radius:3px; overflow:hidden; position:relative; box-shadow:0 0 50px rgba(142,201,255,.16) }
.polaris-figure img{ width:100% }

/* ---------- ポラリスの実際の画面 ---------- */
.pshots{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(1.2rem,2.6vw,2rem); margin-top:clamp(1.8rem,3.6vh,2.6rem); align-items:start }
.pshot{ margin:0 }
.pshot img{ width:100%; display:block; border-radius:3px;
  border:1px solid rgba(237,241,248,.16); box-shadow:0 14px 44px rgba(4,8,20,.5) }
.pshot figcaption{ margin-top:.9rem; font-size:.78rem; line-height:2;
  color:rgba(237,241,248,.74); text-align:center }
.pshot--wide{ grid-column:1 / -1; max-width:28rem; margin-inline:auto }
@media (max-width:760px){
  .pshots{ grid-template-columns:1fr }
  .pshot--wide{ max-width:none }
  .pshot figcaption{ font-size:.74rem }
}
.polaris-figure::after{ content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(14,21,40,0) 55%, rgba(14,21,40,.9) 100%) }

/* ---------- お悩みリスト ---------- */
.worry{ list-style:none; margin:clamp(2rem,4.5vh,3rem) 0 0; padding:0 }
.worry li{
  position:relative; padding:1.15rem 0 1.15rem 2.6rem;
  border-bottom:1px solid var(--line-2); font-size:clamp(.92rem,1.05vw,1.01rem);
  line-height:2.1; color:var(--muted);
}
.worry li:first-child{ border-top:1px solid var(--line-2) }
.worry li::before{
  content:"✦"; position:absolute; left:.3rem; top:1.05rem;
  color:var(--gold); font-size:.8rem;
}

/* ---------- なぜ壁になるのか ---------- */
.wall{ list-style:none; margin:clamp(1.6rem,3.6vh,2.4rem) 0 0; padding:0 }
.wall li{
  position:relative; padding:1.35rem 0 1.35rem 2.6rem;
  border-bottom:1px solid var(--line-2);
}
.wall li:first-child{ border-top:1px solid var(--line-2) }
.wall li::before{
  content:"\2726"; position:absolute; left:.3rem; top:1.6rem;
  color:var(--gold); font-size:.8rem;
}
.wall__h{ display:block; font-size:clamp(.98rem,1.2vw,1.1rem); letter-spacing:.08em;
  line-height:1.95; color:var(--charcoal); margin:0 0 .45rem }
.wall__b{ display:block; font-size:.88rem; line-height:2.2; color:var(--muted); margin:0 }

/* ---------- 「最短で」が跳ねる ---------- */
.hop{ display:inline-block }
.hop > span{
  display:inline-block;
  animation:hop 3s cubic-bezier(.32,.72,.38,1) infinite;
}
.hop > span:nth-child(2){ animation-delay:.11s }
.hop > span:nth-child(3){ animation-delay:.22s }
@keyframes hop{
  0%, 46%, 100% { transform:translateY(0)      }
  52%           { transform:translateY(-.34em) }
  58%           { transform:translateY(0)      }
  63%           { transform:translateY(-.13em) }
  68%           { transform:translateY(0)      }
}

/* ---------- 夜空の章（星をちらす） ---------- */
.sec--stars{ position:relative; overflow:hidden }
.sec--stars > *{ position:relative; z-index:1 }
.stars{
  position:absolute; inset:-10%; z-index:0; pointer-events:none; opacity:.6;
  background-image:
    radial-gradient(1.5px 1.5px at 12% 18%, rgba(255,255,255,.95), transparent),
    radial-gradient(1.2px 1.2px at 34% 8%,  rgba(255,255,255,.7),  transparent),
    radial-gradient(1.6px 1.6px at 58% 26%, rgba(255,255,255,.85), transparent),
    radial-gradient(1.2px 1.2px at 82% 14%, rgba(210,230,255,.8),  transparent),
    radial-gradient(1.4px 1.4px at 92% 44%, rgba(255,255,255,.7),  transparent),
    radial-gradient(1.2px 1.2px at 22% 58%, rgba(255,255,255,.65), transparent),
    radial-gradient(1.5px 1.5px at 46% 74%, rgba(215,232,255,.75), transparent),
    radial-gradient(1.2px 1.2px at 72% 86%, rgba(255,255,255,.6),  transparent),
    radial-gradient(1.3px 1.3px at 6%  84%, rgba(255,255,255,.55), transparent);
  background-size:42vmax 42vmax;
  animation:drift 220s linear infinite;
}
/* ふんわりした星雲の光 */
.sec--stars::before{
  content:""; position:absolute; z-index:0; pointer-events:none;
  left:50%; top:-30%; transform:translateX(-50%);
  width:min(120%,70rem); aspect-ratio:2/1; border-radius:50%;
  background:radial-gradient(ellipse at center,
    rgba(120,150,230,.22), rgba(150,120,200,.10) 45%, transparent 72%);
}
.mark--night{ background:linear-gradient(transparent 62%, rgba(197,167,114,.45) 62%); color:#F3F6FC }

/* ---------- 未来（白いカード＋チェック） ---------- */
.future{
  list-style:none; padding:0; margin:clamp(2.2rem,5vh,3.2rem) 0 0;
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(.9rem,2vw,1.2rem);
}
.future li{
  display:flex; align-items:flex-start; gap:.9rem;
  background:#fff; border:1px solid var(--line-2); border-radius:3px;
  padding:clamp(1.1rem,2.4vw,1.5rem);
  font-size:.92rem; line-height:2.05; color:var(--muted);
  box-shadow:0 2px 12px rgba(40,60,90,.045);
}
.future__c{
  flex:none; width:1.55rem; height:1.55rem; border-radius:50%;
  background:var(--gold); color:#fff;
  display:flex; align-items:center; justify-content:center;
  font-size:.76rem; line-height:1; margin-top:.35rem;
}

/* ---------- こんな方におすすめ（2列・あっさり） ---------- */
.foryou{
  list-style:none; padding:0; margin:clamp(2rem,4.5vh,3rem) 0 0;
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr));
  gap:0 clamp(1.6rem,4vw,3.2rem);
}
.foryou li{
  position:relative; padding:.9rem 0 .9rem 1.75rem;
  font-size:.92rem; line-height:2.05; color:var(--muted);
}
.foryou li::before{
  content:""; position:absolute; left:.3rem; top:1.6rem;
  width:.44rem; height:.44rem; border-radius:50%;
  border:1px solid var(--gold); background:rgba(197,167,114,.4);
}
/* 夜空の中では、小さな星の粒にする */
.sec--night .foryou li{
  color:#D6DEEE; border-bottom:1px solid rgba(237,241,248,.12);
}
.sec--night .foryou li::before{
  border:none; background:#FFF6E0;
  box-shadow:0 0 7px 2px rgba(197,167,114,.75);
}

@media (max-width:760px){
  .future{ grid-template-columns:1fr }
  .foryou{ grid-template-columns:1fr }
}

/* ---------- 先行価格のバッジ ---------- */
.early{
  display:inline-block; margin:0 0 .9rem;
  padding:.4rem 1.1rem; border-radius:99px;
  background:var(--gold-deep); color:#fff;
  font-size:.7rem; letter-spacing:.16em; line-height:1.9;
}

/* ---------- 受講生さまだけの3つのご優待 ---------- */
.perk__t{
  margin:0 0 .3rem; font-size:.8rem; letter-spacing:.14em;
  color:var(--gold-deep); font-weight:600;
}
.perk{ list-style:none; margin:0; padding:0; text-align:left }
.perk li{
  position:relative; padding:.85rem 0 .85rem 1.75rem;
  border-bottom:1px solid var(--line-2);
}
.perk li:last-child{ border-bottom:none; padding-bottom:.2rem }
.perk li::before{
  content:"\2726"; position:absolute; left:.15rem; top:1.15rem;
  color:var(--gold); font-size:.76rem;
}
.perk__h{
  display:block; font-size:.92rem; letter-spacing:.05em; line-height:1.9;
  color:var(--charcoal); font-weight:600;
}
.perk__b{
  display:block; margin-top:.15rem;
  font-size:.82rem; letter-spacing:.02em; line-height:1.95; color:var(--faint);
}
.perk__link{
  display:inline-block; margin-left:.5rem;
  font-size:.78rem; letter-spacing:.08em; color:var(--gold-deep);
  text-decoration:none; border-bottom:1px solid rgba(154,123,58,.5); padding-bottom:.1rem;
  transition:color .4s ease, border-color .4s ease;
}
.perk__link:hover{ color:var(--gold); border-color:var(--gold) }

/* ---------- 惑星カードのあとの一行 ---------- */
.aftercards{
  margin:clamp(2.6rem,5.5vh,3.8rem) 0 0; text-align:center;
  font-size:.88rem; letter-spacing:.05em; line-height:2.1; color:var(--faint);
}
.aftercards a{
  color:var(--gold-deep); text-decoration:none; letter-spacing:.08em;
  border-bottom:1px solid rgba(154,123,58,.5); padding-bottom:.12rem;
  transition:color .4s ease, border-color .4s ease; white-space:nowrap;
}
.aftercards a:hover{ color:var(--gold); border-color:var(--gold) }

/* ---------- 募集終了のお知らせ ---------- */
.closed{
  margin:0; padding:.9rem 1rem;
  background:rgba(36,31,30,.045); border-radius:3px;
  font-size:.8rem; letter-spacing:.03em; line-height:1.95; color:var(--faint);
}

/* ---------- すでに開発済みのお知らせ ---------- */
.ready{
  margin:clamp(1.2rem,2.6vh,1.7rem) 0 0;
  padding:clamp(1.1rem,2.6vw,1.5rem) clamp(.9rem,2.4vw,1.3rem);
  border:1px solid var(--gold); border-radius:3px;
  background:linear-gradient(180deg, rgba(197,167,114,.16), rgba(197,167,114,.07));
  text-align:center;
}
.ready__badge{
  display:inline-block; margin:0 0 .7rem;
  padding:.3rem .9rem; border-radius:99px;
  background:var(--gold-deep); color:#fff;
  font-size:.66rem; letter-spacing:.18em; line-height:1.9;
}
.ready__h{
  margin:0; font-size:clamp(.94rem,1.25vw,1.08rem); letter-spacing:.06em;
  line-height:1.85; color:var(--charcoal); font-weight:600; text-wrap:balance;
}
.ready__b{
  margin:.55rem 0 0; font-size:.78rem; letter-spacing:.04em;
  line-height:1.9; color:var(--faint);
}

/* ---------- 強み（惑星のカード） ---------- */
.plcards{
  list-style:none; padding:0;
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(2.6rem,5.5vw,3.8rem) clamp(2rem,5vw,4.5rem);
  margin:clamp(2.6rem,6vh,4rem) 0 0;
}
.plcard{ display:flex; flex-direction:column; align-items:center; text-align:center }

/* 惑星本体 */
.plorb{
  position:relative; width:clamp(5rem,11vw,7rem); aspect-ratio:1; border-radius:50%;
  display:flex; align-items:center; justify-content:center; margin:0 auto;
}
/* まわりの軌道 */
.plorb::before{
  content:""; position:absolute; inset:-15%; border-radius:50%;
  border:1px solid rgba(197,167,114,.42);
}
/* 光の粒 */
.plorb::after{
  content:""; position:absolute; width:5px; height:5px; border-radius:50%;
  top:-3px; left:50%; margin-left:-2.5px;
  background:#fff; box-shadow:0 0 8px 2px rgba(197,167,114,.8);
}
.plorb__no{
  font-size:.8rem; letter-spacing:.22em; font-weight:600;
  color:rgba(58,46,24,.7); text-shadow:0 1px 6px rgba(255,255,255,.6);
}
.plcard__t{
  font-size:clamp(.94rem,1.15vw,1.08rem); letter-spacing:.06em; line-height:2.05;
  color:var(--charcoal); margin:clamp(1.2rem,2.8vh,1.8rem) 0 0; max-width:23rem;
  text-wrap:balance;            /* 折り返しを均等にして、1文字だけ残らないように */
  word-break:keep-all; overflow-wrap:anywhere;
}

/* 惑星ごとの色 */
.plorb--sun   { background:radial-gradient(circle at 32% 26%, #FFF4D4, #F0C978 54%, #C68F32);
                box-shadow:0 12px 28px rgba(198,143,50,.26) }
.plorb--sky   { background:radial-gradient(circle at 32% 26%, #E2F2FD, #8CBFE6 54%, #4878AC);
                box-shadow:0 12px 28px rgba(72,120,172,.24) }
.plorb--rose  { background:radial-gradient(circle at 32% 26%, #FDE8EF, #EFAEC6 54%, #B96E8C);
                box-shadow:0 12px 28px rgba(185,110,140,.24) }
.plorb--violet{ background:radial-gradient(circle at 32% 26%, #EFE6FC, #BCA6E8 54%, #7C62AE);
                box-shadow:0 12px 28px rgba(124,98,174,.24) }
.plorb--moon  { background:radial-gradient(circle at 32% 26%, #FFFFFF, #E4E9F2 54%, #A8B2C4);
                box-shadow:0 12px 28px rgba(150,162,184,.3) }
.plorb--amber { background:radial-gradient(circle at 32% 26%, #FFEEDA, #EDB984 54%, #BD7F43);
                box-shadow:0 12px 28px rgba(189,127,67,.24) }

/* ---------- 6つの魅力 ---------- */
.feats{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(1.8rem,3.6vw,3.4rem); margin-top:clamp(2.6rem,5.5vh,4rem) }
.feat{ padding-top:1.9rem; border-top:1px solid var(--line-1) }
.feat__no{ font-size:1.5rem; letter-spacing:.1em; color:var(--gold); line-height:1 }
.feat__h{ font-size:clamp(1rem,1.3vw,1.18rem); letter-spacing:.09em; line-height:1.95;
  margin:1rem 0 0; font-weight:400 }
.feat__b{ font-size:.9rem; line-height:2.25; color:var(--muted); margin:.9rem 0 0 }

/* ---------- 学び方 STEP ---------- */
.steps{ counter-reset:st; list-style:none; margin:clamp(2.4rem,5vh,3.4rem) 0 0; padding:0 }
.step{ position:relative; padding:1.8rem 0 1.8rem 4.2rem; border-top:1px solid var(--line-2) }
.step:last-child{ border-bottom:1px solid var(--line-2) }
.step::before{
  counter-increment:st; content:"STEP " counter(st);
  position:absolute; left:0; top:1.95rem;
  font-size:.62rem; letter-spacing:.2em; color:var(--gold);
}
.step__h{ font-size:clamp(1rem,1.25vw,1.12rem); letter-spacing:.09em; margin:0; font-weight:400 }
.step__b{ font-size:.9rem; line-height:2.25; color:var(--muted); margin:.6rem 0 0 }
.steps-note{ text-align:center; margin-top:clamp(1.8rem,3.5vh,2.6rem);
  font-size:clamp(.95rem,1.2vw,1.1rem); letter-spacing:.1em; color:var(--gold-deep) }

/* ---------- ポラリスの箱 ---------- */
.polaris{
  margin-top:clamp(2.4rem,5vh,3.4rem); padding:clamp(1.8rem,4vw,3rem);
  border:1px solid rgba(197,167,114,.4); border-radius:3px;
  background:linear-gradient(165deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
}
.polaris__name{ text-align:center; letter-spacing:.3em; color:var(--gold); font-size:.95rem; margin:0 }
.polaris__menu{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(1rem,2.4vw,2rem); margin:clamp(1.6rem,3.2vh,2.2rem) 0 0 }
.polaris__item{ padding:1.2rem 1.3rem; border:1px solid rgba(237,241,248,.16); border-radius:3px;
  background:rgba(237,241,248,.04) }
.polaris__item h4{ margin:0; font-weight:400; font-size:1rem; letter-spacing:.08em }
.polaris__item p{ margin:.5rem 0 0; font-size:.84rem; line-height:2; color:#AEBAD3 }
.polaris__more{ text-align:center; font-size:.84rem; color:#A9B6D4; margin:1.3rem 0 0 }

/* ---------- 獅子座の例 ---------- */
.leo{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:clamp(1rem,2.4vw,2rem);
  margin-top:clamp(2.2rem,4.5vh,3.2rem); align-items:start }
.leo figure{ margin:0 }
.leo img{ width:100%; border-radius:3px }
.leo figcaption{ font-size:.78rem; letter-spacing:.14em; color:var(--faint); margin-top:.7rem; text-align:center }
.leo-video{ margin-top:clamp(1.8rem,3.6vh,2.6rem); text-align:center }
.leo-video video{ width:100%; max-width:40rem; margin-inline:auto; border-radius:3px }
.leo-video__label{ display:inline-block; font-size:.62rem; letter-spacing:.3em;
  color:var(--gold-deep); margin-bottom:.9rem }

/* ---------- レッスン ---------- */
.lesson{ border-top:1px solid var(--line-1); padding:clamp(1.8rem,3.6vh,2.6rem) 0 }
.lesson:last-of-type{ border-bottom:1px solid var(--line-1) }
.lesson__head{ display:flex; flex-wrap:wrap; align-items:baseline; gap:.4rem 1.4rem }
.lesson__no{ font-size:.92rem; letter-spacing:.2em; color:var(--gold); font-weight:600 }
.lesson__time{ font-size:.86rem; letter-spacing:.1em; color:#6B6158 }
.lesson__h{ width:100%; font-size:clamp(1.02rem,1.35vw,1.22rem); letter-spacing:.09em;
  margin:.6rem 0 0; font-weight:400 }
.lesson__list{ margin:1.1rem 0 0; padding:0 0 0 1.1rem; font-size:.88rem; line-height:2.2; color:var(--muted) }
.lesson__list li{ margin:.1rem 0 }
.lesson__work{ margin:1.2rem 0 0; padding:1rem 1.2rem; border-left:2px solid var(--gold);
  background:var(--paper); font-size:.88rem; line-height:2.1 }
.lesson__work strong{ font-weight:400; color:var(--gold-deep) }

/* ---------- ステップ（恒星パラン予告） ---------- */
.course-steps{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(1.2rem,2.6vw,2.2rem); margin-top:clamp(2.4rem,5vh,3.4rem) }
.cstep{ padding:clamp(1.6rem,3vw,2.3rem); border:1px solid var(--line-1); border-radius:3px; background:#fff }
.cstep--next{ background:var(--paper); border-style:dashed }
.cstep__label{ font-size:.62rem; letter-spacing:.26em; color:var(--gold) }
.cstep__h{ font-size:clamp(1.02rem,1.3vw,1.18rem); letter-spacing:.09em; margin:.9rem 0 0; font-weight:400 }
.cstep__b{ font-size:.88rem; line-height:2.2; color:var(--muted); margin:.9rem 0 0 }

/* ---------- 料金 ---------- */
.price{ position:relative; max-width:30rem; margin:clamp(2.4rem,5vh,3.4rem) auto 0;
  border:1px solid var(--gold); border-radius:3px; background:#fff;
  padding:clamp(2.4rem,4.4vw,3.2rem); text-align:center }
.price::before,.price::after{
  content:""; position:absolute; width:1.6rem; height:1.6rem; pointer-events:none;
}
.price::before{ left:.55rem; top:.55rem; border-top:1px solid var(--gold); border-left:1px solid var(--gold) }
.price::after{ right:.55rem; bottom:.55rem; border-bottom:1px solid var(--gold); border-right:1px solid var(--gold) }
.price__label{ font-size:.62rem; letter-spacing:.3em; color:var(--gold) }
.price__h{ font-size:clamp(1.1rem,1.5vw,1.3rem); letter-spacing:.12em; margin:.9rem 0 0; font-weight:400 }
.price__amount{ font-size:clamp(2.2rem,5vw,3rem); letter-spacing:.04em; margin:1.4rem 0 0; line-height:1.2 }
.price__amount span{ font-size:.42em; letter-spacing:.1em; margin-left:.3rem }
.price__note{ font-size:.85rem; line-height:2.1; color:var(--muted); margin:1.3rem 0 0 }
.price__hr{ height:1px; background:var(--line-2); margin:1.5rem 0 }
.price__alum{ font-size:.85rem; line-height:2.1; color:var(--muted) }
.price__alum b{ font-weight:400; color:var(--gold-deep); font-size:1.25em }

/* ---------- プロフィール ---------- */
.profile{ display:grid; grid-template-columns:minmax(0,15rem) minmax(0,1fr);
  gap:clamp(1.8rem,4vw,3.6rem); align-items:start; margin-top:clamp(2.2rem,4.5vh,3.2rem) }
.profile img{ width:100%; border-radius:3px }
.profile__sign{ font-size:.88rem; letter-spacing:.1em; color:var(--faint); line-height:2.1; margin-top:1.6rem }

/* ---------- FAQ ---------- */
.faq{ margin-top:clamp(2.2rem,4.5vh,3.2rem) }
.faq__item{ border-top:1px solid var(--line-2); padding:1.5rem 0 }
.faq__item:last-child{ border-bottom:1px solid var(--line-2) }
.faq__q{ display:flex; gap:.9rem; font-size:clamp(.96rem,1.2vw,1.06rem); letter-spacing:.08em; line-height:1.9 }
.faq__q::before{ content:"Q."; color:var(--gold); flex:none }
.faq__a{ display:flex; gap:.9rem; font-size:.9rem; line-height:2.25; color:var(--muted); margin-top:.9rem }
.faq__a::before{ content:"A."; color:var(--faint); flex:none }

/* ---------- フッター ---------- */
.footer{ padding:clamp(3.4rem,8vh,5.5rem) var(--pad); text-align:center;
  background:linear-gradient(170deg,var(--night) 0%,var(--night-2) 100%); color:#C9D2E6 }
.footer__name{ font-size:.9rem; letter-spacing:.26em; color:#EDF1F8; margin:0 }
.footer__links{ margin:1.6rem 0 0; font-size:.76rem; line-height:2.3 }
.footer__links a{ color:#C9D2E6; border-bottom:1px solid rgba(197,167,114,.4); padding-bottom:.15rem;
  transition:color .4s ease,border-color .4s ease }
.footer__links a:hover{ color:var(--gold); border-color:var(--gold) }
.footer__copy{ margin:1.8rem 0 0; font-size:.68rem; letter-spacing:.14em; color:rgba(201,210,230,.6) }

/* ---------- あらわれる動き ---------- */
.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}
.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 }

/* ---------- スマートフォン ---------- */
/* 狭い画面だけで改行させたいところ */
.sp-br{ display:none }
/* 途中で改行させたくない言葉 */
.nw{ white-space:nowrap }
@media (max-width:620px){ .sp-br{ display:inline } }

@media (max-width:760px){
  .feats,.polaris__menu,.course-steps,.leo,.split,.pmenu{ grid-template-columns:1fr }
  .split--rev .split__fig{ order:0 }
  .profile{ grid-template-columns:1fr; max-width:22rem; margin-inline:auto }
  .hero{ min-height:auto }
  .hero__title{ font-size:clamp(1.4rem,6.6vw,2.2rem); letter-spacing:.05em }
}
/* スマホは、字間と行間を少しつめて読みやすく */
@media (max-width:520px){
  .ttl{ letter-spacing:.055em; line-height:1.85 }
  .body,.faq__a,.step__b,.pcard__b,.lesson__b,.feat__b,.voice__b,.story p{
    letter-spacing:.025em; line-height:2.05;
  }
  .feat__h,.faq__q{ letter-spacing:.04em }
  .kicker{ font-size:.64rem; letter-spacing:.26em }
  /* 透かしの数字は、小さい画面では控えめに */
  .pcard__deco{ font-size:3rem; color:rgba(197,167,114,.11); right:.6rem }
  .wall li{ padding-left:2rem }
  .wall li::before{ left:.1rem }
  .wall__h{ letter-spacing:.03em }
  .wall__b{ letter-spacing:.02em; line-height:2.05 }
}

/* スマホは1列。惑星を左に、言葉を右に置きます */
@media (max-width:640px){
  .plcards{ grid-template-columns:1fr; gap:0 }
  .plcard{
    flex-direction:row; align-items:center; text-align:left;
    gap:clamp(1rem,4vw,1.4rem);
    padding:clamp(1.2rem,3vh,1.6rem) 0;
    border-bottom:1px solid var(--line-2);
  }
  .plcard:first-child{ border-top:1px solid var(--line-2) }
  .plorb{ width:clamp(3.6rem,17vw,4.6rem); flex:none; margin:0 }
  .plorb::before{ inset:-13% }
  .plorb::after{ top:-2px; width:4px; height:4px; margin-left:-2px }
  .plorb__no{ font-size:.72rem; letter-spacing:.16em }
  .plcard__t{
    margin:0; max-width:none;
    font-size:.92rem; letter-spacing:.02em; line-height:1.95;
  }
}

@media (max-width:420px){
  .hero__title{ font-size:5.9vw; letter-spacing:.01em; line-height:1.75 }
  .hero__course{ font-size:4.6vw; letter-spacing:.06em }
  .hero__sub{ font-size:.86rem; letter-spacing:.03em }
  .kicker{ font-size:.6rem; letter-spacing:.24em }
}
@media (prefers-reduced-motion:reduce){
  .fade{ animation:none; opacity:1; transform:none }
  .hero__stars{ animation:none }
  .hop > span{ animation:none }
  .reveal{ opacity:1; transform:none; transition:none }
}