@charset "utf-8";
/* 2027_privy PC (min-width:641px) */

/* ===== メインビジュアル ===== */
.p27-mv__catch {
  position: absolute; left: 20.79%; top: 24.9%;
  font-size: max(1.967cqw, 15px);
}
.p27-mv__badges {
  position: absolute; left: 50.15%; top: 80.47%; transform: translateX(-50%);
  display: flex; gap: .72cqw;
}
.p27-badge { width: 5.87cqw; height: 5.87cqw; min-width: 72px; min-height: 72px; font-size: max(.852cqw, 8.5px); }

/* ===== 導入 ===== */
.p27-sp { display: none; }
.p27-intro { margin-top: -2.62vw; padding: 0 20px; }
.p27-intro p { font-size: 16px; line-height: 2.3; }

/* ===== ラインナップ ===== */
.p27-lineup { padding: 96px 20px 120px; }
.p27-lineup__ttl { font-size: 22px; margin-bottom: 26px !important; }
.p27-lineup__list {
  display: grid; grid-template-columns: repeat(4, 300px); justify-content: center;
  column-gap: 64px; /* 列の間隔 */
}
.p27-lineup__item picture { height: 251px; }
.p27-lineup__item picture img { width: 228px; }
.p27-lineup__item--l picture img { width: 251px; }
.p27-lineup__item--s picture img { width: 216px; }
.p27-lineup__item.p27-lineup__item--card picture img { width: 158px !important; } /* 高さ251px */
.p27-lineup__item p { margin-top: 20px; font-size: 15px; min-height: 3.2em; } /* 1行・2行の見出しで下のリストの位置をそろえる */
.p27-prod { margin-top: 24px; }
.p27-prod li + li { margin-top: 16px; }

/* 画面幅が足りないときは列幅・間隔を縮める */
@media screen and (max-width: 1440px) {
  .p27-lineup__list { grid-template-columns: repeat(4, minmax(0, 300px)); column-gap: clamp(24px, 3.4vw, 64px); }
  .p27-lineup__item picture { height: auto; aspect-ratio: 1; width: 84%; } /* 300px列で251px相当 */
  .p27-lineup__item picture img { width: 91% !important; }
  .p27-lineup__item--l picture img { width: 100% !important; }
  .p27-lineup__item--s picture img { width: 86% !important; }
  .p27-lineup__item.p27-lineup__item--card picture img { width: 63% !important; }
}
@media screen and (max-width: 1000px) {
  .p27-lineup__item p { font-size: 13px; }
}

/* ===== 桜ブリタニアとは ===== */
/* 図版と3つの説明はデザイン(幅2500px相当)の位置に%で配置。文字も幅に合わせて伸縮 */
.p27-about { padding: 190px 20px 260px; }
.p27-ttl { font-size: 31px; }
.p27-ttl__en { font-size: 15px; margin-top: 28px; }
.p27-about__lead { margin-top: 56px !important; font-size: 16px; line-height: 2.3; }
.p27-about__stage {
  position: relative; container-type: inline-size;
  max-width: 1543px; margin: 8px auto 0; aspect-ratio: 2500 / 1350;
}
.p27-about__img { position: absolute; left: 15.2%; top: 4.44%; width: 76.6%; }
.p27-point { position: absolute; }
.p27-point--privy { left: 8.32%; top: 1.04%; }
.p27-point--history { left: 74.04%; top: 51.1%; }
.p27-point--mark { left: 13.76%; top: 81.1%; }
.p27-point__ttl { font-size: max(1.6cqw, 17px); padding: .1em .22em; }
.p27-point p { margin-top: 1.08cqw !important; font-size: max(.96cqw, 12px); line-height: 1.875; white-space: nowrap; }

/* ===== 40年の軌跡 ===== */
/* スライド内はデザイン(幅3050×高さ1500、y=800起点)の座標を%で配置。文字は画面幅に合わせて伸縮（上下限あり） */
.p27-hs { padding: 200px 0 200px; }
.p27-hs__head { padding: 0 20px; }
.p27-hs__lead { margin-top: 56px !important; font-size: 16px; line-height: 2.3; }
.p27-hs__viewport { margin-top: 44px; }
.p27-hs__canvas { position: relative; aspect-ratio: 3050 / 1500; }
.p27-hs__canvas > * { position: absolute; }
.p27-hs__range { font-size: clamp(16px, 1.574cqw, 32px); }
.p27-hs__range--r { margin-right: -.2em !important; }
.p27-hs__main, .p27-hs__sub { z-index: 1; }
.p27-hs__ttl {
  left: 50%; top: 56.17%; transform: translate(-50%, -50%); z-index: 2;
  padding: 0 .6em; background: #000; white-space: nowrap;
  font-size: clamp(22px, 1.967cqw, 40px);
}
.p27-hs__arrow { top: 56.17%; width: clamp(44px, 3.7cqw, 72px); aspect-ratio: 1; transform: translateY(-50%); z-index: 2; }
.p27-hs__arrow--next { left: 65.25%; }
.p27-hs__arrow--prev { left: 26.36%; }
.p27-hs__arrow--back { left: 31.05%; } /* 1990〜2026の戻る：→と左右対称 */
.p27-hs__sparrow, .p27-hs__sponly { display: none; }
.p27-hs__body {
  left: 50%; top: 64.27%; transform: translateX(-50%); z-index: 2;
  text-align: center; white-space: nowrap; font-size: clamp(13px, .8525cqw, 18px); line-height: 2.3;
}
.p27-hs__mask { background: #000; padding: .1em .2em; }
/* 背景：線と次の年 */
.p27-hs__line { position: absolute; left: 0; right: 0; top: 56.17%; height: 1px; background: rgba(255, 255, 255, .2); }
.p27-hs__bgcol--first .p27-hs__line { left: 59.9%; }
.p27-hs__bgcol--last .p27-hs__line { right: 71.74%; }
.p27-hs__big {
  position: absolute; left: 69.5%; bottom: 43.67%;
  font-family: var(--p27-mincho); font-size: 6.557cqw; line-height: .8; letter-spacing: .1em; color: #353535;
}
/* 年代ナビ */
.p27-hs__nav { margin-top: 14px !important; }
.p27-hs__nav li { width: 81px; }
.p27-hs__nav li + li::before { content: "―"; position: absolute; left: -.6em; top: 0; color: #ddb466; font-size: 18px; line-height: 1; }
.p27-hs__dot { width: 100%; gap: 12px; font-size: 18px; }
.p27-hs__dot img { width: 60px; }

/* ===== 桜プロジェクト ===== */
.p27-proj { padding: 190px 20px 160px; }
.p27-proj__lead { margin-top: 60px !important; font-size: 16px; line-height: 2.3; }
.p27-proj__inner {
  display: grid; grid-template-columns: 728fr 732fr; column-gap: 56px; align-items: start;
  max-width: 953px; margin: 72px auto 0;
}
.p27-proj__ttl { margin-top: 2px; font-size: 18.5px; }
.p27-proj__txt p { margin-top: 44px !important; font-size: 16px; line-height: 2.1; }

/* ===== 最下部：画像に重ねたLINEUP（デザインの0.7倍） ===== */
.p27-cl__panel { position: absolute; left: max(5.5%, calc(50% - 392px)); right: max(5.5%, calc(50% - 392px)); bottom: 4%; padding: 28px 28px 50px; } /* 中身(4列×175px)に合わせて幅784pxまで */
.p27-cl__ttl { font-size: 17px; margin-bottom: 45px !important; }
.p27-cl__item { width: 175px; }
.p27-cl__item picture { height: 150px; }
.p27-cl__item picture img { width: 116px; }
.p27-cl__item:nth-child(3) picture img { width: 127px; }
.p27-cl__item:nth-child(4) picture img { width: 110px; }
.p27-cl__item--card picture img { width: 95px; }
.p27-cl__name { margin: 10px 0 8px !important; font-size: 13.5px; }
.p27-cl__qty { gap: 4px; max-width: 160px; }
.p27-cl__qty a { width: 50px; height: 50px; font-size: 13px; }

/* ===== 右固定ナビ ===== */
.p27-idx__panel { width: 212px; }