/* 2026-09-07 LP review adjustments: genre clarity + editable companion gallery */
/* セクション見出しは、コンテンツ幅が頭打ちになる前に文字サイズも頭打ちにする。
   画面を広げた結果、一度1行になった見出しが再び折り返す逆転を防ぐ。 */
.title{font-size:clamp(2rem,4.4vw,2.75rem)}

.hero-kicker{
  display:inline-flex;
  align-items:center;
  max-width:100%;
  padding:7px 11px;
  border-radius:999px;
  background:rgba(255,248,233,.92);
  border:1px solid rgba(186,112,48,.22);
  box-shadow:0 4px 14px rgba(71,40,21,.06);
  font-size:.86rem;
  font-weight:900;
  letter-spacing:.02em;
  line-height:1.45;
}

.mystery-grid.companion-showcase{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:14px;
  min-height:430px;
  padding:24px 24px 18px;
  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-gallery{
  display:grid;
  grid-template-columns:repeat(8,minmax(0,1fr));
  grid-template-rows:repeat(2,minmax(116px,auto));
  align-items:end;
  gap:4px 2px;
  width:min(650px,100%);
}
.companion{
  display:block;
  width:100%;
  max-width:156px;
  height:auto;
  justify-self:center;
  filter:drop-shadow(0 12px 14px rgba(0,0,0,.24));
  transition:transform .2s ease;
}
.companion-1010101{grid-column:1/span 2;grid-row:1;transform:translateY(12px) rotate(-2deg)}
.companion-2010101{grid-column:3/span 2;grid-row:1;transform:translateY(-2px) rotate(1deg)}
.companion-3010101{grid-column:5/span 2;grid-row:1;transform:translateY(8px) rotate(-1deg)}
.companion-4010101{grid-column:7/span 2;grid-row:1;transform:translateY(2px) rotate(2deg)}
.companion-5010101{grid-column:2/span 2;grid-row:2;transform:translateY(-5px) rotate(1deg)}
.companion-6010101{grid-column:4/span 2;grid-row:2;transform:translateY(4px) rotate(-2deg)}
.companion-7010101{grid-column:6/span 2;grid-row:2;transform:translateY(-7px) rotate(1deg)}
.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}

@media (min-width:821px) and (max-width:1179px){
  .mystery-grid.companion-showcase{min-height:370px;padding:20px 18px 16px}
  .companion-gallery{grid-template-rows:repeat(2,minmax(98px,auto))}
}
@media (max-width:820px){
  .logo-panel{width:min(430px,88vw)}
  .hero-inner{row-gap:14px;padding-top:10px}
  .hero-kicker{font-size:.8rem;padding:6px 9px}
  .hero h1{margin-top:7px}
  .mystery-grid.companion-showcase{min-height:auto;border-radius:28px;padding:18px 14px 15px}
  .companion-gallery{width:min(540px,100%);grid-template-rows:repeat(2,minmax(94px,auto))}
}
@media (max-width:620px){
  .hero-kicker{display:flex;width:fit-content;max-width:100%;border-radius:16px}
  .companion-gallery{grid-template-columns:repeat(4,minmax(0,1fr));grid-template-rows:auto;gap:2px}
  .companion{grid-column:span 2!important;grid-row:auto!important;max-width:150px}
  .companion-7010101{grid-column:2/span 2!important}
  .companion-showcase-note{font-size:.8rem}
}