.lp { width: 100%; max-width: none; padding-bottom: 0; }
.in { display: block; width: min(100%, 1080px); margin: 0 auto; }
.sec { padding: 56px 32px; gap: 22px; }
.btn { min-height: 60px; }
.h2 { font-size: 30px; }
.h2-deco { text-align: center; }
.lead { font-size: 20px; }

.fv {
  background-image: url('../assets/generated/fv-hero-wide.jpg');
  background-position: right top;
  background-size: cover;
  padding: 0 32px 64px;
  min-height: 820px;
}
.fv::before {
  background:
    linear-gradient(90deg, rgba(9,37,69,.6) 0%, rgba(9,37,69,.3) 42%, rgba(9,37,69,0) 66%),
    linear-gradient(180deg, rgba(9,37,69,0) 62%, rgba(9,37,69,.62) 100%);
}
.fv .in {
  display: grid;
  grid-template-columns: 600px minmax(0, 1fr);
  row-gap: 16px;
  width: min(100%, 1080px);
  margin: 0 auto;
  align-content: start;
}
.fv .in > * { grid-column: 1; }
.fv .fv-en { position: static; justify-self: start; margin: 56px 0 0; font-size: 13px; }
.fv .fv-vert { display: none; }
.fv-body { margin-top: 0; padding: 0; align-items: flex-start; text-align: left; gap: 8px; }
.fv-h1 { font-size: 66px; padding-bottom: 14px; }
.fv-h1::after { height: 10px; }
.fv-tagline { font-size: 30px; }
.fv-mention-main { font-size: 16px; }
.fv-mention-sub { font-size: 13px; }
.fv-ribbon, .fv-lead, .fv-limited, .fv-stock, .fv-trust, .fv .btn, .fv .chip, .fv .countdown { margin-left: 0; margin-right: 0; }
.fv-ribbon-label { font-size: 15px; height: 34px; padding: 0 16px; }
.fv-ribbon-body { font-size: 15px; }
.fv-lead { font-size: 16px; }
.fv-limited { font-size: 16px; }
.fv-stock { font-size: 13px; }
.fv-stock-note { font-size: 12px; }
.fv .fv-cta { min-height: 72px; font-size: 26px; }
.fv-code-box { font-size: 26px; }
.fv-copy { min-width: 132px; font-size: 14px; }
.fv-trust { font-size: 14px; }

#concern, #concept, #restock, #caution, #faq, #operator { padding-top: 56px; padding-bottom: 56px; }
/* 文字が主体のセクションは 1080px 全幅だと 1 行が長すぎるので読み幅を絞る */
#concern .in { width: min(100%, 760px); }
#restock .in { width: min(100%, 800px); }
#operator .in { width: min(100%, 860px); }
#faq .in { width: min(100%, 880px); }
.check-list { align-items: flex-start; width: max-content; max-width: 100%; margin: 0 auto; }
/* 全幅に伸びると間延びするボタンは幅を決めて中央に */
#restock .btn, #member .btn, #basics .btn, #caution .caution-cta { width: min(100%, 460px); margin-left: auto; margin-right: auto; }
.check-list { gap: 14px; font-size: 15px; }
.tile-grid { grid-template-columns: 1fr; gap: 12px; }
.tile-card {
  display: grid;
  grid-template-columns: 44px 72px 1fr;
  grid-template-areas:
    "num tile title"
    "num tile text";
  align-items: center;
  gap: 6px 14px;
}
.tile-card .num { grid-area: num; font-size: 28px; }
.tile-card .tile { grid-area: tile; width: 72px; }
.tile-card strong { grid-area: title; font-size: 16px; }
.tile-card .small { grid-area: text; font-size: 12px; }
.concept-def { font-size: 16px; }
/* .mix は 3 カラムのグリッド。上段に図解、下段に動画と実写を並べる */
.mix {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px 20px;
  padding: 28px;
}
.mix > .mix-label,
.mix > .mix-row,
.mix > .mix-plus { grid-column: 1 / -1; }
.mix-label { text-align: center; }
.mix-row {
  display: flex;
  gap: 18px;
  align-items: center;
  justify-content: center;
}
.mix-item img { height: 170px; }
.mix-op {
  font-size: 24px;
  flex: none;
}
.mix-eq {
  grid-column: auto;
  justify-self: auto;
}
.mix-ratio {
  grid-column: auto;
  flex: none;
  font-size: 15px;
}
.mix-ratio-num { font-size: 42px; }
.mix-plus {
  justify-content: center;
  padding-top: 4px;
  border-top: 1px solid rgba(9,37,69,.1);
}
.mix-item-balm img { height: 150px; }
/* 動画（縦長）と実写（横長）を同じ高さに揃える */
.mix-video-el { max-height: none; height: 300px; object-fit: cover; }
.mix-photo img { height: 300px; object-fit: cover; }
.mix-photo-wide { width: auto; }
.mix-photo-sm { width: auto; }
.concept-one {
  font-size: 20px;
}
.start-guide { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.start-guide article { border-right: 1px solid var(--gold); border-bottom: 0; }
.start-guide article:last-child { border-right: 0; border-bottom: 0; }

#products .cards, #basics .cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
#products .cards { gap: 16px; }
#basics .cards { gap: 24px; }
#products .card-h { flex-direction: column; }
#products .card-media { width: 100%; aspect-ratio: 1 / 1; }
#products .card-body { padding: 18px; }
#products .card-body .card-title { font-size: 17px; }
#products .small.center, #basics .small.center { text-align: center; }
#basics .card { padding: 14px; }
#basics .card strong { font-size: 14px; }
#basics .card .small { font-size: 12px; }
#basics .btn { width: 320px; margin: 0 auto; }

#proof .in {
  display: grid;
  grid-template-columns: 300px 1fr;
  gap: 16px 32px;
  align-items: start;
}
#proof .h2 { grid-column: 1 / -1; font-size: 34px; }
.proof-media { display: contents; }
.proof-reel-wrap { grid-column: 1; grid-row: 2 / span 4; width: 300px; }
.proof-reel { width: 300px; height: 533px; min-height: 533px; }
.proof-stills { grid-column: 2; grid-row: 2; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.proof-stills figure { aspect-ratio: 4 / 3; height: auto; }
.steps { grid-column: 2; grid-row: 3; }
.steps ul { gap: 8px; }
.steps li { font-size: 12px; }
.profile { grid-column: 2; grid-row: 4; }
.avatar { width: 64px; height: 64px; }
#proof > .in > .small { grid-column: 2; grid-row: 5; }

#howto .in {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: repeat(8, auto) minmax(0, 1fr);
  gap: 22px 48px;
  align-items: start;
}
#howto .h2 { grid-column: 1; }
.howto-steps { grid-column: 1; grid-template-columns: 1fr; gap: 14px; }
.howto-steps::before { content: none; }
.howto-steps article { flex-direction: row; text-align: left; align-items: center; }
.step-label { font-size: 15px; }
.howto-steps p { font-size: 15px; }
.register-mock { grid-column: 2; grid-row: 1 / span 9; }
#howto .route, #howto .chip, #howto .note, #howto .small, #howto .howto-remind, #howto .btn.cta-buy { grid-column: 1; }
.route .howto-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.route .howto-steps::before { content: ""; }
.route .howto-steps article { flex-direction: column; text-align: center; }
.route .howto-steps p { font-size: 13px; }

.timeline { gap: 16px; }
.timeline .en { font-size: 13px; }
#caution { background: var(--navy); }
.caution > .in { display: flex; flex-direction: column; gap: 16px; }
.caution-title { font-size: 28px; }
.caution-warning { font-size: 22px; }
.caution-box { padding: 28px; }
.caution-cta { width: 420px; margin-left: auto; margin-right: auto; }

#faq { grid-column: auto; }
#operator { grid-column: auto; }
.faq { font-size: 15px; }
.operator-links a { min-width: 120px; }
.operator-logo { width: 132px; }

#final {
  background-image: url('../assets/generated/d-6-bg-wide.jpg');
  padding: 72px 32px 84px;
}
#final .in { width: 560px; text-align: center; }
#final .h2 { text-align: center; font-size: 36px; }
#final .btn, #final .chip { max-width: 520px; margin-left: auto; margin-right: auto; }

.sticky {
  left: auto;
  right: 32px;
  bottom: 24px;
  transform: none;
  width: 360px;
  flex-direction: column;
  border: 1px solid var(--gold);
  border-radius: var(--radius);
  box-shadow: 0 12px 32px rgba(0,0,0,.35);
  padding: 12px;
}
.sticky .btn { width: 100%; min-height: 48px; }
.sticky .btn-line { flex: auto; }

/* voices */
#voices .in { display: flex; flex-direction: column; gap: 22px; }
#voices .h2 { text-align: center; }
#voices .small { text-align: center; }
.dm-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; align-items: stretch; }
.dm { padding: 20px; }
.dm-bubble { font-size: 14.5px; }

/* member */
#member .in { display: flex; flex-direction: column; gap: 22px; }
#member .h2 { text-align: center; }
#member .member-lead { text-align: center; font-size: 16px; }
#member .member-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
#member .chip { width: 520px; margin: 0 auto; }
#member .btn { width: 460px; margin: 0 auto; }
#member .small.center { text-align: center; }

/* Task A: FV / final CTA */
#final.final-plain { background-image: none; }
.final-products img { height: 150px; }
.fv-items { font-size: 14px; }
.fv-cta-note { font-size: 12px; }

.fv-brand { font-size: 13px; }