@charset "utf-8";
/* 2027_privy 共通（PC・SP） */

.p27 {
  --p27-bg: #e6dce5;
  --p27-wine: #590026;
  --p27-gold: #dd8800;
  --p27-silver: #8a808e;
  --p27-sakura: #fd82ab;
  --p27-pink: #ff2e5f;
  --p27-link: #0666dc;
  --p27-en: "Century Gothic", "Jost", "Lexend", sans-serif;
  --p27-mincho: "Yu Mincho", "YuMincho", "Hiragino Mincho ProN", "Noto Serif JP", serif;
  background: var(--p27-bg);
  color: #000;
  clear: both; /* パンくず(#pankz_sp2)のfloatを解除 */
  overflow: hidden;
}
.p27 *, .p27 *::before, .p27 *::after { box-sizing: border-box; }
.p27 img { display: block; max-width: 100%; height: auto; }
.p27 ul { list-style: none; margin: 0; padding: 0; }
.p27 h1, .p27 h2, .p27 p { margin: 0; }

/* ===== メインビジュアル ===== */
.p27-mv { position: relative; container-type: inline-size; }
.p27-mv__stage { position: relative; overflow: hidden; }
.p27-mv__inner { position: relative; aspect-ratio: 3050 / 1833; }
.p27-mv__bg, .p27-mv__bg img { display: block; width: 100%; height: 100%; }
.p27-mv__bg img { object-fit: cover; }
/* 舞う桜（js/sakura.js）：.p27-mv 全体に重ねる */
.p27-mv__sakura { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 1; }
.p27-mv__ttl, .p27-mv__catch, .p27-mv__badges { z-index: 2; }

.p27-mv__ttl {
  position: absolute; left: 0; right: 0; top: 8.4%;
  font-family: var(--p27-en); font-weight: 600;
  font-size: 2.97cqw; letter-spacing: .05em; line-height: 1.2;
  color: #fff; text-align: center; white-space: nowrap;
  text-shadow: 0 0 .6em rgba(160, 20, 80, .18);
}

.p27-mv__catch {
  font-family: var(--p27-mincho); font-weight: 400;
  color: var(--p27-wine); line-height: 1.67; letter-spacing: 0;
}

.p27-badge {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  border-radius: 50%; background: #fff;
  box-shadow: 0 .4em 1.2em rgba(190, 60, 120, .22);
  font-family: var(--p27-en); font-weight: 600; line-height: 1.15; text-align: center;
}
.p27-badge span { letter-spacing: .075em; }
.p27-badge b { font-weight: 600; font-size: 1.85em; line-height: 1; margin: .12em 0 .1em; }
.p27-badge small { font-size: .37em; letter-spacing: .075em; margin-left: .05em; }
.p27-badge--gold { color: var(--p27-gold); }
.p27-badge--silver { color: var(--p27-silver); }
.p27-badge--sakura { color: var(--p27-sakura); }

/* ===== 導入 ===== */
.p27-intro { position: relative; text-align: center; }
.p27-intro p { letter-spacing: .075em; }
.p27-mark { background: #fff; padding: .1em .4em; box-decoration-break: clone; -webkit-box-decoration-break: clone; }

/* ===== ラインナップ ===== */
.p27-lineup__ttl {
  font-family: var(--p27-en); font-weight: 600; letter-spacing: .1em;
  text-align: center; color: #000;
}
.p27-lineup__item { display: flex; flex-direction: column; align-items: center; }
.p27-lineup__item picture { display: flex; align-items: flex-end; justify-content: center; }
.p27-lineup__item.p27-lineup__item--card picture img { width: 63% !important; } /* 縦長のブリスターパック：正方形の枠の高さに合わせる（378/600≒63%） */
.p27-lineup__item p {
  font-weight: bold; text-align: center; letter-spacing: .075em; line-height: 1.6;
}

/* ===== 右固定ナビ ===== */
.p27-idx { position: fixed; right: 0; top: 50%; z-index: 90; transform: translateY(-50%); }
.p27-idx__panel {
  position: relative;
  background: rgba(255, 255, 255, .85);
  padding: 18px 26px 32px 24px;
  box-shadow: 0 4px 18px rgba(170, 40, 100, .12);
}
.p27-idx__ttl {
  display: flex; align-items: center; gap: 10px; margin: 0 -26px 14px 0 !important;
  font-family: Meiryo, sans-serif; font-weight: bold; font-size: 11px; letter-spacing: .075em;
  color: var(--p27-pink);
}
.p27-idx__ttl::after { content: ""; flex: 1; height: 1px; background: var(--p27-pink); }
.p27-idx__list li + li { margin-top: 13px; }
.p27-idx__list a {
  position: relative; display: inline-block; padding-left: 18px;
  font-size: 13px; letter-spacing: .075em; line-height: 1.4;
  color: var(--p27-link); text-decoration: underline; text-underline-offset: 2px;
  transition: color .25s, transform .25s;
}
.p27-idx__list a::before {
  content: ""; position: absolute; left: 2px; top: 50%; margin-top: -4px;
  border-style: solid; border-width: 4px 0 4px 7px; border-color: transparent transparent transparent #13358a;
}
.p27-idx__list a:hover { color: var(--p27-pink); transform: translateX(3px); }
.p27-idx__list a.is-cur { color: var(--p27-pink); }
.p27-idx__btn { display: none; }

/* ===== アニメーション初期状態（JS有効時のみ・GSAPが外す） ===== */
html.p27-js .p27-mv__ttl,
html.p27-js .p27-mv__catch,
html.p27-js .p27-badge,
html.p27-js .p27-idx { visibility: hidden; }

/* ===== ラインナップ：商品リンク ===== */
.p27-lineup__list { align-items: start; }
.p27-prod { width: 100%; text-align: left; }
.p27-prod a {
  display: grid; grid-template-columns: var(--p27-prod-thumb, 72px) 1fr; gap: 12px; align-items: center;
  color: #222; text-decoration: none; transition: opacity .25s;
}
.p27-prod a:hover { opacity: .7; }
.p27-prod img { width: 100%; aspect-ratio: 1; object-fit: cover; }
.p27-prod__txt { display: block; }
.p27-prod__qty {
  display: inline-block; min-width: 4.6em; margin-bottom: 6px; padding: .25em .8em;
  border-radius: 4px; background: #c9467f; color: #fff;
  font-weight: bold; font-size: 13px; line-height: 1.4; text-align: center; letter-spacing: .05em;
}
.p27-prod__name { display: block; font-size: 12px; line-height: 1.6; letter-spacing: .03em; }
/* 銀貨・プラチナ貨の枚数ラベルは白地・黒文字 */
.p27-prod--white .p27-prod__qty { background: #fff; color: #000; }

/* ===== セクション見出し（共通） ===== */
.p27-ttl {
  font-family: var(--p27-mincho); font-weight: 400; letter-spacing: .05em;
  text-align: center; color: #000; line-height: 1.4;
}
.p27-ttl__en {
  display: block;
  font-family: var(--p27-en); font-style: italic; font-weight: 400; letter-spacing: .1em;
  color: #ff6a91;
}

/* ===== 桜ブリタニアとは ===== */
.p27-about { background: #fff; }
.p27-about__lead { text-align: center; letter-spacing: .075em; }
.p27-about__lead strong { font-weight: bold; }
.p27-about__img img { width: 100%; }
.p27-point__ttl {
  display: inline-block; margin: 0; background: #ff6a90; color: #fff;
  font-family: var(--p27-mincho); font-weight: 600; letter-spacing: .05em; line-height: 1.2;
}
.p27-point p { letter-spacing: .075em; color: #000; }

/* ===== 40年の軌跡（横スライド） ===== */
.p27-hs { position: relative; overflow: hidden; background: #000; color: #fff; container-type: inline-size; }
.p27-ttl--w { color: #fff; }
.p27-hs__bgcoin { position: absolute; left: 50%; width: 40.03%; transform: translateX(-50%); pointer-events: none; }
.p27-hs__bgcoin img { width: 100%; }
.p27-hs__bgcoin--top { top: -1.8cqw; }
.p27-hs__bgcoin--bottom { bottom: -12.95cqw; }
.p27-hs__head, .p27-hs__viewport, .p27-hs__nav { position: relative; z-index: 1; }
.p27-hs__lead { text-align: center; letter-spacing: .075em; color: #fff; }

.p27-hs__viewport { overflow: hidden; touch-action: pan-y; }
.p27-hs__track { display: flex; align-items: flex-start; margin: 0; padding: 0; list-style: none; will-change: transform; }
.p27-hs__slide { flex: 0 0 100%; min-width: 0; }
.p27-hs__bgtrack { position: absolute; inset: 0; display: flex; pointer-events: none; will-change: transform; }
.p27-hs__bgcol { position: relative; flex: 0 0 100%; }

/* 金色の見出し・本文 */
.p27-hs__ttl { margin: 0; color: #e0ba71; font-family: var(--p27-mincho); font-weight: 400; letter-spacing: .05em; line-height: 1.3; }
.p27-hs__range { margin: 0; font-family: var(--p27-mincho); letter-spacing: .2em; line-height: 1; white-space: nowrap; color: #fff; }
.p27-hs__body { margin: 0; color: #fff; letter-spacing: .075em; }
.p27-hs__gold { color: #f3d99f; }
.p27-hs__hl { background: #875d00; padding: .15em .3em; box-decoration-break: clone; -webkit-box-decoration-break: clone; }
.p27-hs__main img, .p27-hs__sub img { width: 100%; }

/* 次へ・前へ（円＋矢印） */
.p27-hs__arrow {
  padding: 0; border: 1px solid rgba(255, 255, 255, .45); border-radius: 50%; background: #000; cursor: pointer;
  transition: border-color .3s, background-color .3s;
}
.p27-hs__arrow::before {
  content: ""; display: block; width: 100%; height: 100%;
  background: no-repeat center / 34% url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12h15M13 6l6 6-6 6'/%3E%3C/svg%3E");
}
.p27-hs__arrow--prev::before { transform: scaleX(-1); }
.p27-hs__arrow:hover { border-color: #e0ba71; background-color: rgba(224, 186, 113, .18); }

/* 年代ナビ */
.p27-hs__nav { display: flex; justify-content: center; margin: 0; padding: 0; list-style: none; }
.p27-hs__nav li { position: relative; }
.p27-hs__dot {
  display: flex; flex-direction: column; align-items: center; padding: 0; border: 0; background: none; cursor: pointer;
  color: #ddb466; font-family: var(--p27-mincho); font-style: italic; line-height: 1; letter-spacing: .05em;
}
.p27-hs__dot img { border-radius: 50%; opacity: .4; transition: opacity .4s, transform .4s; }
.p27-hs__dot-y { padding-bottom: 3px; border-bottom: 1px solid transparent; transition: border-color .4s; }
.p27-hs__dot:hover img { opacity: .75; }
.p27-hs__dot.is-cur img { opacity: 1; transform: scale(1.06); }
.p27-hs__dot.is-cur .p27-hs__dot-y { border-color: currentColor; }

/* ===== 桜プロジェクト ===== */
.p27-proj { background: #fff; }
.p27-proj__lead { text-align: center; letter-spacing: .075em; }
.p27-proj__img img { width: 100%; border-radius: 7px; }
.p27-proj__ttl { margin: 0; font-weight: bold; letter-spacing: .075em; line-height: 1.6; color: #000; }
.p27-proj__txt p {
  font-family: "Kozuka Gothic Pr6N", "小塚ゴシック Pr6N", "Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
  letter-spacing: .1em; color: #000;
}

/* ===== 締めのビジュアル（全幅） ===== */
.p27-closing { background: #fff; }
.p27-closing img { width: 100%; }

/* ===== 最下部：画像に重ねたLINEUP ===== */
.p27-closing { position: relative; }
.p27-cl__bg img { width: 100%; }
.p27-cl__panel { background: rgba(255, 255, 255, .8); border-radius: 10px; text-align: center; }
.p27-cl__ttl { margin: 0; font-family: "Lexend", var(--p27-en); font-weight: 400; letter-spacing: .1em; color: #000; }
.p27-cl__list { display: flex; justify-content: center; align-items: flex-start; margin: 0; padding: 0; list-style: none; }
.p27-cl__item { display: flex; flex-direction: column; align-items: center; }
.p27-cl__item picture { display: flex; align-items: flex-end; justify-content: center; }
.p27-cl__name { color: #000; line-height: 1.6; letter-spacing: .05em; }
.p27-cl__qty { display: flex; flex-wrap: wrap; justify-content: center; margin: 0; padding: 0; list-style: none; }
.p27-cl__qty a {
  display: flex; align-items: center; justify-content: center; border-radius: 50%;
  background: #000; color: #fff; text-decoration: none; letter-spacing: 0;
  transition: opacity .3s, transform .3s;
}
.p27-cl__qty--gold a { background: #c9467f; }
.p27-cl__qty--silver a { background: #a2a2a2; }
.p27-cl__qty a:hover { opacity: .8; transform: translateY(-2px); }