/* ---------- reset（starterset LPと共通の作法を踏襲） ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body, h1, h2, h3, p, figure, ul, ol, dl, dd { margin: 0; }
ul, ol { padding: 0; }
li { list-style: none; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }

html { font-size: 62.5%; overflow-x: hidden; }
body { color: #111214; font-size: 1.6rem; font-family: "Noto Sans JP", sans-serif; line-height: 1.8; position: relative; overflow-x: hidden; overflow-x: clip; background: #fff; }

/* ---------- レイアウト共通 ----------
   デザインは440px幅（Figma）を1.3636363636倍した数値で600px幅（60rem）用に作成済み。
   ここではそのままrem値として使用し、440px以下のビューポートでは vw で追従させる
   （starterset / 旧Black Label LPと同じ手法） */
.header { background: #fff; width: 100%; }
@media (min-width: 441px) { .header { max-width: 60rem; margin-inline: auto; } }
.header-inner { display: flex; align-items: center; height: 9rem; padding: 0 2.4545rem; }
.header-logo { height: 3.2092rem; width: auto; }

.main { width: 100%; }
@media (min-width: 441px) { .main { max-width: 60rem; margin-inline: auto; } }

/* ---------- PC版：背景写真＋左右の固定要素（starterset LPと同じ手法） ---------- */
@media (min-width: 441px) {
  body::before {
    content: ""; position: fixed; inset: 0;
    background: url("../images/common/bg-pc.png") no-repeat center/cover;
    z-index: -1;
  }
}
.pc-brand-left, .pc-side-menu { display: none; }
/* 1440px想定だが、starterset LPの実績（1440pxだとギリギリ数px足りず消えることがある）に
   合わせて1200pxから表示開始する */
@media (min-width: 1200px) {
  .pc-brand-left {
    display: block; position: fixed; top: 4.5rem; left: 50%; margin-left: -58rem; width: 26rem;
  }
  .pc-brand-left p { font-weight: 700; font-size: 2.8rem; line-height: 1.45; color: #111214; }
  .pc-side-menu {
    display: flex; flex-direction: column; gap: 1.2rem;
    position: fixed; top: 9rem; left: 50%; margin-left: 32rem; width: 26rem;
  }
  .pc-side-menu-label { font-weight: 700; font-size: 1.2rem; color: #111214; }
  .pc-side-menu-link {
    display: flex; align-items: center; justify-content: center; height: 6.4rem;
    background: #111214; color: #fff; font-weight: 700; font-size: 1.6rem; white-space: nowrap;
    transition: opacity .3s ease;
  }
  .pc-side-menu-link:hover { opacity: .8; }
}

.footer { background: #fff; border-top: 0.1364rem solid #dcdedb; padding: 1.0909rem 4.3636rem 1.3636rem; }
@media (min-width: 441px) { .footer { max-width: 60rem; margin-inline: auto; } }
.footer p { font-size: 1.3636rem; line-height: 2.4545rem; font-weight: 700; color: #63666b; }

.section-eyebrow { font-weight: 700; font-size: 1.6364rem; line-height: 2.4545rem; letter-spacing: 0.27273rem; color: #111214; }

/* ---------- 01_Hero ---------- */
.hero { width: 100%; }
.hero-dark {
  background: #111214; height: 48rem; padding: 3.2727rem 3.8182rem 4.0909rem;
  display: flex; flex-direction: column; justify-content: space-between; position: relative; overflow: hidden;
}
.hero-tagline { font-family: "Inter", sans-serif; font-weight: 900; font-size: 1.6364rem; line-height: 2.0455rem; letter-spacing: 0.19636rem; color: #fff; }
.hero-headline { font-weight: 700; font-size: 4.0909rem; line-height: 1.47; letter-spacing: 0.04091rem; color: #fff; }
.hero-title { font-family: "Inter", sans-serif; font-weight: 900; font-size: 13.0909rem; line-height: 0.92; color: #fff; }
.hero-badge { position: absolute; top: 2.045rem; right: 2.864rem; width: 15.2727rem; height: 15.2727rem; }
.hero-light { background: #fff; height: 48rem; position: relative; overflow: hidden; }
.hero-photo { position: absolute; left: -5.591rem; top: -20.727rem; width: 72.8182rem; max-width: none; }
.hero-cta {
  position: absolute; left: 3.818rem; top: 37.091rem; width: 52.3636rem; height: 7.6364rem;
  background: #111214; color: #fff; display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 2.0455rem; line-height: 3rem;
}
@media (max-width: 440px) {
  .hero-dark { height: calc(48rem / 60rem * 100vw); padding: calc(3.2727rem / 60rem * 100vw) calc(3.8182rem / 60rem * 100vw) calc(4.0909rem / 60rem * 100vw); }
  .hero-tagline { font-size: calc(1.6364rem / 60rem * 100vw); line-height: calc(2.0455rem / 60rem * 100vw); }
  .hero-headline { font-size: calc(4.0909rem / 60rem * 100vw); }
  .hero-title { font-size: calc(13.0909rem / 60rem * 100vw); }
  .hero-badge { top: calc(2.045rem / 60rem * 100vw); right: calc(2.864rem / 60rem * 100vw); width: calc(15.2727rem / 60rem * 100vw); height: calc(15.2727rem / 60rem * 100vw); }
  .hero-light { height: calc(48rem / 60rem * 100vw); }
  .hero-photo { left: calc(-5.591rem / 60rem * 100vw); top: calc(-20.727rem / 60rem * 100vw); width: calc(72.8182rem / 60rem * 100vw); }
  .hero-cta { left: calc(3.818rem / 60rem * 100vw); top: calc(37.091rem / 60rem * 100vw); width: calc(52.3636rem / 60rem * 100vw); height: calc(7.6364rem / 60rem * 100vw); font-size: calc(2.0455rem / 60rem * 100vw); line-height: calc(3rem / 60rem * 100vw); }
}

/* ---------- 02_Concept ---------- */
.concept { background: #f2f2ef; border-top: 0.1364rem solid #d1d1cf; padding: 4.3636rem 4.3636rem 3.4091rem; }
.concept .section-head { padding-top: 3.8182rem; display: flex; flex-direction: column; gap: 3.2727rem; }
.concept-heading { font-weight: 700; font-size: 4.3636rem; line-height: 1.45; letter-spacing: 0.08727rem; color: #111214; }
.concept-body { font-size: 2.0455rem; line-height: 1.85; color: #626367; margin-top: 3.8182rem; }
.concept-body + .concept-body { margin-top: 2rem; }
@media (max-width: 440px) {
  .concept-heading { font-size: calc(4.3636rem / 60rem * 100vw); }
  .concept-body { font-size: calc(2.0455rem / 60rem * 100vw); }
}

/* ---------- 04_Concerns ---------- */
.concern { background: #f2f2ef; border-top: 0.1364rem solid #dcdedb; padding: 4.3636rem 4.3636rem 4.2273rem; }
.concern .section-head { padding-top: 3.8182rem; display: flex; flex-direction: column; gap: 3.2727rem; margin-bottom: 3.8182rem; }
.concern-heading { font-weight: 700; font-size: 4.3636rem; line-height: 1.45; color: #111214; }
.concern-cards { display: flex; flex-direction: column; gap: 1.6364rem; }
.concern-card {
  background: #fcfcfc; border: 0.1364rem solid #dcdedb; display: flex; align-items: center; gap: 1.0909rem;
  min-height: 11.7273rem; padding: 2.1818rem 2.1818rem 2.1818rem 1.3636rem;
}
.concern-card p { font-size: 2.0455rem; line-height: 1.85; color: #484a4d; }
.concern-icon {
  flex-shrink: 0; width: 7.9091rem; height: 7.9091rem; border-radius: 50%; background: #2b2c2e;
  display: flex; align-items: center; justify-content: center; overflow: hidden;
}
.concern-icon-mask { width: 6.2727rem; height: 6.2727rem; background: #fff; mix-blend-mode: screen; position: relative; overflow: hidden; }
.concern-icon-mask img { position: absolute; top: 0; height: 100%; width: 300%; max-width: none; mix-blend-mode: difference; }
.concern-closing { margin-top: 3.8182rem; font-size: 2.0455rem; line-height: 1.85; letter-spacing: 0.04091rem; color: #484a4d; text-align: center; }
@media (max-width: 440px) {
  .concern-heading { font-size: calc(4.3636rem / 60rem * 100vw); }
  .concern-card p, .concern-closing { font-size: calc(2.0455rem / 60rem * 100vw); }
  .concern-icon { width: calc(7.9091rem / 60rem * 100vw); height: calc(7.9091rem / 60rem * 100vw); }
  .concern-icon-mask { width: calc(6.2727rem / 60rem * 100vw); height: calc(6.2727rem / 60rem * 100vw); }
}

/* ---------- 05_Reviews ---------- */
.review { background: #fff; border-top: 0.1364rem solid #dcdedb; padding: 4.2273rem 4.3636rem 7.6364rem; }
.review .section-head { display: flex; flex-direction: column; gap: 3.2727rem; margin-bottom: 3.8182rem; }
.review-intro { font-size: 2.0455rem; line-height: 1.85; color: #484a4d; }
.review-cards { display: flex; flex-direction: column; gap: 1.3636rem; }
.review-card { background: #fcfcfc; border: 0.1364rem solid #d1d1d1; padding: 2.4545rem 2.1818rem; display: flex; flex-direction: column; gap: 2.7273rem; }
.review-header { display: flex; align-items: center; gap: 1.3636rem; min-height: 16.7727rem; }
.review-avatar { flex-shrink: 0; width: 10.2273rem; height: 10.2273rem; overflow: hidden; position: relative; }
.review-avatar img { position: absolute; left: -40.32%; width: 495.48%; max-width: none; height: 330.32%; }
.review-avatar .avatar-male { top: -20.97%; }
.review-avatar .avatar-female { top: -117.74%; }
.review-avatar .avatar-glasses { top: -216.13%; }
.review-title { flex: 1; font-weight: 700; font-size: 3rem; line-height: 1.5; letter-spacing: 0.06rem; color: #111214; }
.review-body { font-size: 2.0455rem; line-height: 1.85; color: #484a4d; }
.review-user { font-size: 2.1818rem; line-height: 1.85; color: #484a4d; text-align: right; }
@media (max-width: 440px) {
  .review-intro, .review-body { font-size: calc(2.0455rem / 60rem * 100vw); }
  .review-title { font-size: calc(3rem / 60rem * 100vw); }
  .review-user { font-size: calc(2.1818rem / 60rem * 100vw); }
  .review-avatar { width: calc(10.2273rem / 60rem * 100vw); height: calc(10.2273rem / 60rem * 100vw); }
}

/* ---------- 06_Features ---------- */
.feature { background: #f2f2ef; border-top: 0.1364rem solid #dcdedb; }
.feature-item { padding: 4.3636rem 4.3636rem 6.5455rem; display: flex; flex-direction: column; gap: 3.2727rem; }
.feature-item + .feature-item { border-top: 0.1364rem solid #dcdedb; }
.feature-heading { font-weight: 700; font-size: 4.0909rem; line-height: 1.45; color: #111214; }
.feature-photo { width: 100%; height: 35.4545rem; }
.feature-photo img { width: 100%; height: 100%; object-fit: cover; }
.feature-body { font-size: 2.0455rem; line-height: 1.85; color: #484a4d; }
@media (max-width: 440px) {
  .feature-heading { font-size: calc(4.0909rem / 60rem * 100vw); }
  .feature-photo { height: calc(35.4545rem / 60rem * 100vw); }
  .feature-body { font-size: calc(2.0455rem / 60rem * 100vw); }
}

/* ---------- 07_Lineup ---------- */
.brand { background: #fff; border-top: 0.1364rem solid #d1d1cf; padding: 7.6364rem 4.3636rem 8.7273rem; }
.brand-header { display: flex; flex-direction: column; align-items: center; gap: 3.2727rem; text-align: center; margin-bottom: 4.3636rem; }
.brand-heading { font-weight: 700; font-size: 4.9091rem; line-height: 1.45; color: #131417; }
.brand-cards { display: flex; flex-direction: column; gap: 6.8182rem; }
.brand-card { background: #f8f8f6; border: 0.1364rem solid #d1d1cf; }
.brand-card-photo { width: 100%; aspect-ratio: 1 / 1; background: #fff; }
.brand-card-photo img { width: 100%; height: 100%; object-fit: contain; }
.brand-card-heading { padding: 3.5455rem 2.7273rem 3rem; display: flex; flex-direction: column; gap: 1.0909rem; text-align: center; }
.brand-card-title { font-weight: 700; font-size: 3.2727rem; line-height: 1.45; color: #131417; }
.brand-card-series { line-height: 1.25; }
.brand-card-series-en { font-weight: 700; font-size: 4.9091rem; color: #111214; }
.brand-card-series-ja { font-size: 3.2727rem; color: #111214; }
.brand-card-tagline { font-size: 1.9091rem; line-height: 1.45; color: #4a4d52; }
.brand-card-body { padding: 2.4545rem; display: flex; flex-direction: column; gap: 1.9091rem; }
.brand-card-price { display: flex; align-items: center; justify-content: center; gap: 0.8182rem; font-weight: 700; font-size: 4.3636rem; color: #131417; }
.brand-card-price .tax { font-weight: 400; font-size: 1.5rem; color: #4a4d52; }
.brand-card-desc { font-size: 2.1818rem; line-height: 3.2727rem; text-align: center; color: #4a4d52; }
.brand-card-specs { display: flex; flex-direction: column; }
.brand-spec-row { display: flex; gap: 1.9091rem; justify-content: center; padding: 1.6364rem 0; font-size: 1.6364rem; color: #4a4d52; border-bottom: 0.1364rem solid #d1d1cf; }
.brand-spec-row:last-child { border-bottom: none; }
.brand-spec-row dt { flex-shrink: 0; width: 11.1818rem; text-align: right; }
.brand-spec-row dd { flex-shrink: 0; width: 24.2727rem; font-weight: 700; }
.brand-card-cta { margin-top: 0.5rem; background: #131417; height: 7.6364rem; padding: 1.6364rem 3.2727rem; display: flex; align-items: center; justify-content: space-between; gap: 1rem; color: #fff; font-weight: 700; font-size: 2.7273rem; white-space: nowrap; }
.arrow-box { flex-shrink: 0; width: 3.6rem; height: 3.6rem; border: 0.15rem solid #fff; display: flex; align-items: center; justify-content: center; font-size: 2.4rem; }
@media (max-width: 440px) {
  .brand-heading { font-size: calc(4.9091rem / 60rem * 100vw); }
  .brand-card-title { font-size: calc(3.2727rem / 60rem * 100vw); }
  .brand-card-series-en { font-size: calc(4.9091rem / 60rem * 100vw); }
  .brand-card-series-ja { font-size: calc(3.2727rem / 60rem * 100vw); }
  .brand-card-tagline { font-size: calc(1.9091rem / 60rem * 100vw); }
  .brand-card-price { font-size: calc(4.3636rem / 60rem * 100vw); }
  .brand-card-desc { font-size: calc(2.1818rem / 60rem * 100vw); line-height: calc(3.2727rem / 60rem * 100vw); }
  .brand-card-cta { font-size: calc(2.7273rem / 60rem * 100vw); height: calc(7.6364rem / 60rem * 100vw); padding-left: calc(3.2727rem / 60rem * 100vw); padding-right: calc(3.2727rem / 60rem * 100vw); }
  .arrow-box { width: calc(3.6rem / 60rem * 100vw); height: calc(3.6rem / 60rem * 100vw); font-size: calc(2.4rem / 60rem * 100vw); }
}

/* ---------- 08_Proof ---------- */
.proof { background: #fff; border-top: 0.1364rem solid #dcdedb; padding: 3.4091rem 4.3636rem 7.6364rem; }
.proof-badge-row { display: flex; justify-content: center; margin: 3.2727rem 0; }
.proof-badge { width: 18.5217rem; height: 18.5217rem; }
.proof-heading { margin-top: 5.5909rem; font-weight: 700; font-size: 3.8182rem; line-height: 5.4545rem; text-align: center; color: #1a1a1a; }
.proof-note { font-size: 2.1818rem; line-height: 5.4545rem; text-align: center; color: #1a1a1a; }
.proof-points { margin-top: 4.3636rem; display: flex; flex-direction: column; gap: 2.7273rem; }
.proof-point { display: flex; align-items: center; gap: 1.9091rem; min-height: 7.6364rem; }
.proof-point img { flex-shrink: 0; width: 4.6364rem; height: 4.6364rem; }
.proof-point p { font-size: 2.0455rem; line-height: 1.85; color: #484a4d; }
.proof-players { margin-top: 2.7273rem; display: flex; flex-direction: column; gap: 1.6364rem; }
.proof-players { display: grid; grid-template-columns: 1fr 1fr; gap: 1.6364rem; }
.proof-player img { width: 100%; height: 15.2727rem; object-fit: cover; border: 0.2045rem solid #d1d1d1; }
.proof-player p { margin-top: 0.8182rem; font-weight: 700; font-size: 1.3636rem; line-height: 1.6364rem; text-align: center; color: #484a4d; }
.proof-conclusion { margin-top: 4.3636rem; background: #fcfcfc; border: 0.2045rem solid #d1d1d1; padding: 2.1818rem; }
.proof-conclusion p { font-size: 2.0455rem; line-height: 1.85; text-align: center; color: #484a4d; }
@media (max-width: 440px) {
  .proof-badge { width: calc(18.5217rem / 60rem * 100vw); height: calc(18.5217rem / 60rem * 100vw); }
  .proof-heading { font-size: calc(3.8182rem / 60rem * 100vw); line-height: calc(5.4545rem / 60rem * 100vw); }
  .proof-note { font-size: calc(2.1818rem / 60rem * 100vw); line-height: calc(5.4545rem / 60rem * 100vw); }
  .proof-point p { font-size: calc(2.0455rem / 60rem * 100vw); }
  .proof-player img { height: calc(15.2727rem / 60rem * 100vw); }
  .proof-conclusion p { font-size: calc(2.0455rem / 60rem * 100vw); }
}

/* ---------- 09_Benefits ---------- */
.benefit { background: #f2f2ef; border-top: 0.1364rem solid #dcdedb; padding: 5.0455rem 4.3636rem 7.6364rem; }
.benefit-heading { margin-top: 3.2727rem; font-weight: 700; font-size: 4.3636rem; line-height: 1.45; color: #111214; }
.benefit-photo { margin-top: 3.2727rem; width: 100%; height: 36.8182rem; }
.benefit-photo img { width: 100%; height: 100%; object-fit: cover; }
.benefit-body { margin-top: 3.8182rem; font-size: 2.0455rem; line-height: 1.85; color: #484a4d; }
@media (max-width: 440px) {
  .benefit-heading { font-size: calc(4.3636rem / 60rem * 100vw); }
  .benefit-photo { height: calc(36.8182rem / 60rem * 100vw); }
  .benefit-body { font-size: calc(2.0455rem / 60rem * 100vw); }
}

/* ---------- 10_Story ---------- */
.story { background: #fff; border-top: 0.1364rem solid #dcdedb; padding: 1.7727rem 4.3636rem 7.6364rem; }
.story-heading { margin-top: 3.2727rem; font-weight: 700; font-size: 4.3636rem; line-height: 1.45; color: #111214; }
.story-photo { margin-top: 3.2727rem; width: 100%; height: 34.0909rem; }
.story-photo img { width: 100%; height: 100%; object-fit: cover; }
.story-body { margin-top: 2.4545rem; font-size: 2.0455rem; line-height: 1.85; color: #484a4d; }
.story-closing-message { margin-top: 2.7273rem; font-size: 2.0455rem; line-height: 1.85; color: #484a4d; }
.story-closing-after { margin-top: 2.7273rem; font-size: 2.0455rem; line-height: 1.85; color: #484a4d; }
@media (max-width: 440px) {
  .story-heading { font-size: calc(4.3636rem / 60rem * 100vw); }
  .story-photo { height: calc(34.0909rem / 60rem * 100vw); }
  .story-body, .story-closing-message, .story-closing-after { font-size: calc(2.0455rem / 60rem * 100vw); }
}

/* ---------- 11_Offer ---------- */
.offer { background: #f5f5f2; border-top: 0.1364rem solid #d1d1cf; padding: 7.9091rem 4.3636rem; }
.offer-heading { margin-top: 3.2727rem; font-weight: 700; font-size: 4.3636rem; line-height: 1.45; letter-spacing: 0.08727rem; color: #131417; }
.offer-banner { margin-top: 3.2727rem; width: 100%; height: 19.2273rem; }
.offer-banner img { width: 100%; height: 100%; object-fit: contain; }
.offer-delivery { margin-top: 0.8182rem; }
.offer-condition { display: flex; align-items: center; justify-content: center; gap: 1.0909rem; font-size: 2.0455rem; line-height: 1.85; text-align: center; color: #4a4d52; }
.offer-condition-line { flex-shrink: 0; width: 5.7273rem; height: 0.1364rem; background: #d1d1cf; }
.offer-delivery-row { margin-top: 1.6364rem; display: flex; gap: 1.6364rem; }
.offer-delivery-item { flex: 1; background: #fff; border: 0.1364rem solid #d1d1cf; display: flex; align-items: center; gap: 1.6364rem; min-height: 11rem; padding: 1.9091rem 0.5455rem 1.9091rem 2.1818rem; }
.offer-delivery-icon { flex-shrink: 0; width: 4.6364rem; height: 4.6364rem; position: relative; }
.offer-delivery-icon img { width: 100%; height: 100%; }
.offer-delivery-check { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 2.7273rem; color: #4a4d52; }
.offer-delivery-item p { font-size: 2.0455rem; line-height: 1.85; color: #4a4d52; }
.offer-gift { margin-top: 2.1818rem; background: #fff; border: 0.1364rem solid #d1d1cf; padding: 1.6364rem; }
.offer-gift p { font-size: 2.0455rem; line-height: 1.4; text-align: center; color: #4a4d52; }
.offer-support { margin-top: 4.3636rem; display: flex; flex-direction: column; gap: 1.6364rem; }
.offer-support-item { display: flex; align-items: center; gap: 1.7727rem; min-height: 6.8182rem; }
.offer-support-line { flex-shrink: 0; width: 0.4091rem; height: 5.4545rem; background: #d1d1cf; }
.offer-support-item p { font-size: 1.7727rem; line-height: 3.2727rem; color: #4a4d52; }
.offer-cta { margin-top: 4.3636rem; display: flex; align-items: center; justify-content: center; background: #111214; height: 7.6364rem; padding: 2.5909rem 3.2727rem; color: #fff; font-weight: 700; font-size: 2.0455rem; line-height: 3rem; }
@media (max-width: 440px) {
  .offer-heading { font-size: calc(4.3636rem / 60rem * 100vw); }
  .offer-banner { height: calc(19.2273rem / 60rem * 100vw); }
  .offer-condition { font-size: calc(2.0455rem / 60rem * 100vw); }
  .offer-delivery-item p { font-size: calc(2.0455rem / 60rem * 100vw); }
  .offer-gift p { font-size: calc(2.0455rem / 60rem * 100vw); }
  .offer-support-item p { font-size: calc(1.7727rem / 60rem * 100vw); line-height: calc(3.2727rem / 60rem * 100vw); }
  .offer-cta { font-size: calc(2.0455rem / 60rem * 100vw); line-height: calc(3rem / 60rem * 100vw); height: calc(7.6364rem / 60rem * 100vw); }
}