@import url('/assets/lp-base.css');
.title,.lead{line-break:strict;word-break:normal;overflow-wrap:normal}
.lead{max-width:900px}
.use .title span,.use .lead span{white-space:normal!important}
.hero{background-image:url('/assets/bg-notebook.webp')}
.origin-visual{background:linear-gradient(180deg,rgba(71,43,27,.02) 28%,rgba(42,25,16,.56) 100%),url('/assets/bg-notebook.webp') 52% 58%/cover no-repeat}
.cta{background-image:url('/assets/bg-hallway.webp')}
.companions,.quiz{background-image:url('/assets/bg-quiz.webp')}
.records{background-image:url('/assets/bg-library.webp')}

/* LP QA feedback: 学習情報カードは濃色1枚をやめ、やわらかな3色で統一 */
.learning{background:linear-gradient(180deg,#fff9ef,#f5e6cf)}
.learning-grid .stat{border:1px solid rgba(98,66,47,.10);border-top:4px solid #df8b3b;box-shadow:0 16px 42px rgba(71,43,27,.10)}
.learning-grid .stat:first-child{background:#fffaf1}
.learning-grid .subjects{background:#eef4e9;color:var(--ink);border-top-color:#6f9b70}
.learning-grid .subjects h3{color:#365d45}
.learning-grid .subjects p{color:var(--muted)}
.learning-grid .all{background:#fff2d7;border-top-color:#d6a044}
.learning-grid .all strong{color:#b57424}

/* 始めやすさ→CTAでマナフィーが連続しないよう、前段は情報カードに集中 */
.start-box{grid-template-columns:1fr;background:linear-gradient(135deg,rgba(255,253,247,.98),rgba(255,243,218,.96))}
.start-box > img{display:none}
.start-copy{width:min(860px,100%);margin:auto}
.start-copy h3{font-size:clamp(1.35rem,3vw,1.85rem)}
/* セクションラベルは曖昧なピルをやめ、短いライン＋小見出しへ */
.eyebrow{display:inline-flex;align-items:center;gap:10px;padding:0;border:0;border-radius:0;background:transparent;color:#a35d23;font-size:.8rem;font-weight:900;letter-spacing:.08em}
.eyebrow::before{content:"";width:30px;height:3px;border-radius:999px;background:currentColor;opacity:.72;flex:0 0 auto}
.companions .eyebrow,.quiz .eyebrow,.records .eyebrow,.cta .eyebrow{color:#f2d39a;background:transparent;border:0}

/* HERO: absolute配置をやめ、ロゴ→本文/マナフィーを通常フローのグリッドで安定させる */
.hero{background-position:center 55%}
.hero:before{
  background:
    radial-gradient(ellipse 62% 24% at 50% 3%,rgba(62,36,22,.24) 0%,rgba(62,36,22,.11) 48%,rgba(62,36,22,.03) 68%,transparent 82%),
    linear-gradient(180deg,rgba(255,248,233,.42) 0%,rgba(255,248,233,.34) 38%,rgba(255,244,224,.25) 66%,rgba(255,238,211,.14) 100%),
    linear-gradient(90deg,rgba(255,248,233,.54) 0%,rgba(255,248,233,.43) 34%,rgba(255,248,233,.30) 58%,rgba(255,248,233,.20) 78%,rgba(255,248,233,.15) 100%);
}
.hero:after{background:linear-gradient(180deg,rgba(255,247,226,.02),rgba(58,31,16,.17))}
.hero-inner{
  position:relative;
  display:grid;
  grid-template-columns:minmax(0,1.12fr) minmax(280px,.88fr);
  grid-template-rows:auto 1fr;
  column-gap:clamp(24px,4vw,56px);
  row-gap:clamp(18px,2.7vh,30px);
  align-items:center;
  min-height:100svh;
  padding:clamp(24px,3.5vh,38px) 0 clamp(30px,4vh,46px);
}
.hero-copy{display:contents}
.logo-panel{
  grid-column:1/-1;
  grid-row:1;
  position:relative;
  z-index:3;
  justify-self:center;
  display:flex;
  align-items:center;
  justify-content:center;
  width:min(680px,72vw);
  max-width:none;
  margin:0;
  padding:6px 10px 10px;
  border:0;
  border-radius:0;
  background:none;
  box-shadow:none;
  backdrop-filter:none;
}
.logo-panel::before{
  content:"";
  position:absolute;
  z-index:-1;
  inset:-12% -7% -18%;
  background:radial-gradient(ellipse at center,rgba(58,32,19,.24) 0%,rgba(58,32,19,.12) 46%,rgba(58,32,19,.035) 67%,transparent 80%);
  filter:blur(9px);
  pointer-events:none;
}
.logo-panel img{width:100%;margin:0;filter:drop-shadow(0 6px 14px rgba(38,20,10,.22))}
.hero-card{
  grid-column:1;
  grid-row:2;
  align-self:center;
  position:relative;
  z-index:2;
  width:min(650px,100%);
  margin:0;
  padding:0;
  border:0;
  border-radius:0;
  background:transparent;
  box-shadow:none;
  backdrop-filter:none;
}
.hero-kicker{font-size:.86rem;text-shadow:0 1px 0 rgba(255,255,255,.55)}
.hero h1{margin:8px 0 10px;font-size:clamp(2.25rem,4.25vw,3.2rem);line-height:1.08;letter-spacing:-.045em;text-shadow:0 1px 0 rgba(255,255,255,.52)}
.hero h1 br{display:block}
.hero-catch,.hero-desc{max-width:620px;text-shadow:0 1px 0 rgba(255,255,255,.50)}
.proofs span{background:rgba(255,248,233,.90);border-color:rgba(186,112,48,.22);box-shadow:0 4px 14px rgba(71,40,21,.06)}
.coming{margin-top:20px}
.hero-visual{
  grid-column:2;
  grid-row:2;
  position:static;
  z-index:1;
  align-self:end;
  justify-self:center;
  display:block;
  width:min(430px,100%);
  min-height:0;
  margin:0;
}
.hero-visual img{width:100%;filter:drop-shadow(0 24px 30px rgba(56,31,17,.22));transform:none}

/* WORLD: 「放課後の、自分の机。」は写真を主役にし、カード in カードをやめる */
.origin{padding-top:78px;padding-bottom:88px}
.origin-grid{grid-template-columns:minmax(0,1.15fr) minmax(320px,.85fr);gap:42px;align-items:center;margin-top:38px}
.origin-visual{min-height:520px;overflow:hidden;border:0;border-radius:32px;box-shadow:0 24px 60px rgba(68,40,23,.18)}
.origin-visual.paper{border:0}
.origin-visual:after{background:linear-gradient(180deg,rgba(35,22,15,.00) 46%,rgba(35,22,15,.70) 100%)}
.origin-quote{left:0;right:0;bottom:0;padding:104px 32px 30px;border-radius:0;background:linear-gradient(180deg,transparent,rgba(34,21,14,.58));color:#fffaf0;font-size:clamp(1.05rem,1.7vw,1.3rem);line-height:1.75;text-shadow:0 2px 12px rgba(0,0,0,.45)}
.origin-copy.paper{padding:6px 0 6px 2px;border:0;border-radius:0;background:transparent;box-shadow:none}
.origin-copy p{font-size:1.02rem}
.formula{margin-bottom:4px;box-shadow:0 8px 22px rgba(151,89,33,.08)}

/* 100体以上: 仮の?ではなく代表7体をひとつの群像として見せる */
.mystery-grid.companion-showcase{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:14px;
  padding:24px 24px 18px;
  min-height:430px;
  border-radius:34px;
  background:
    radial-gradient(circle at 50% 46%,rgba(255,244,211,.17) 0%,rgba(255,255,255,.08) 46%,transparent 72%),
    rgba(255,250,240,.055);
  border:1px solid rgba(255,255,255,.16);
  box-shadow:inset 0 0 44px rgba(255,255,255,.04),0 24px 58px rgba(6,19,13,.20);
}
.companion-showcase .companion-collage{
  width:min(650px,100%);
  height:auto;
  filter:drop-shadow(0 18px 20px rgba(0,0,0,.24));
}
.companion-showcase-note{
  margin:0;
  max-width:560px;
  text-align:center;
  color:rgba(255,255,255,.82);
  font-size:.88rem;
  line-height:1.7;
}
.companion-showcase-note b{color:#ffe0a6;font-size:.96rem}

/* 中間幅も同じ2カラム構図のまま縮める */
@media (min-width:821px) and (max-width:1179px){
  .hero-inner{grid-template-columns:minmax(0,1.16fr) minmax(230px,.84fr);column-gap:clamp(18px,3vw,34px);padding-top:24px}
  .logo-panel{width:min(600px,72vw)}
  .hero h1{font-size:clamp(2.1rem,4.35vw,2.75rem)}
  .hero-desc{font-size:.95rem}
  .proofs{gap:6px}
  .proofs span{font-size:.72rem;padding:6px 8px}
  .store-coming{min-width:145px;padding:10px 12px}
  .hero-visual{width:min(350px,100%)}
  .mystery-grid.companion-showcase{min-height:370px;padding:20px 18px 16px}
}

/* 820px以下は明確に1カラム。色調はPCと共通のベールを維持 */
@media (max-width:820px){
  .hero{background-position:53% 48%}
  .hero-inner{
    display:grid;
    grid-template-columns:1fr;
    grid-template-rows:auto auto auto;
    row-gap:18px;
    min-height:auto;
    padding:18px 0 26px;
  }
  .hero-copy{display:contents}
  .logo-panel{grid-column:1;grid-row:1;width:min(500px,94vw);padding:4px 6px 8px}
  .hero-card{grid-column:1;grid-row:2;width:100%;max-width:650px;margin:0 auto}
  .hero h1{font-size:clamp(2.05rem,9.5vw,2.8rem);line-height:1.08}
  .hero-desc{font-size:.94rem}
  .proofs{gap:6px}
  .proofs span{font-size:.72rem;padding:6px 8px}
  .coming{gap:8px}
  .store-coming{min-width:0;flex:1 1 145px}
  .hero-visual{grid-column:1;grid-row:3;width:min(300px,68vw);margin:0 auto}
  .mystery-grid.companion-showcase{min-height:auto;border-radius:28px;padding:18px 14px 15px}
  .companion-showcase .companion-collage{width:min(540px,100%)}
}

@media (max-width:480px){
  .logo-panel{width:96vw}
  .hero-inner{padding-top:12px}
  .companion-showcase-note{font-size:.8rem}
}

@media (max-width:980px){
  .origin-grid{grid-template-columns:1fr;gap:26px}
  .origin-visual{min-height:500px}
  .origin-copy.paper{max-width:760px;padding:0 4px}
}

@media (max-width:640px){
  .origin{padding-top:64px;padding-bottom:72px}
  .origin-grid{margin-top:28px}
  .origin-visual{min-height:430px;border-radius:26px;background-position:50% 54%}
  .origin-quote{padding:96px 22px 23px;font-size:1rem}
  .origin-copy p{font-size:.96rem}
}