@charset "utf-8";
/* 2027_privy SP (max-width:640px) */

/* ===== メインビジュアル ===== */
/* 画像を横に広げて中央（コイン部分）を大きく見せる */
.p27-mv__inner { width: 140%; margin-left: -23%; }
.p27-mv__ttl { top: 6.5%; font-size: max(5.2cqw, 17px); letter-spacing: .04em; }
.p27-mv__catch {
  position: relative; margin-top: -4px !important;
  font-size: 18px; text-align: center; line-height: 1.75;
}
.p27-mv__badges { position: relative; display: flex; justify-content: center; gap: 10px; margin-top: 22px; }
.p27-badge { width: 74px; height: 74px; font-size: 9px; }

/* ===== 導入 ===== */
.p27-intro { padding: 30px 16px 0; }
.p27-intro p { font-size: 14px; line-height: 2.1; letter-spacing: .02em; }
.p27-mark { padding: .1em .2em; }

/* ===== ラインナップ ===== */
.p27-lineup { padding: 56px 16px 72px; }
.p27-lineup__ttl { font-size: 20px; margin-bottom: 20px !important; }
.p27-lineup__list { display: grid; grid-template-columns: 1fr; gap: 56px; }
.p27-lineup__item picture { width: 62%; aspect-ratio: 1; }
.p27-lineup__item picture img { width: 92%; }
.p27-lineup__item--l picture img { width: 100%; }
.p27-lineup__item--s picture img { width: 88%; }
.p27-lineup__item p { margin-top: 12px; font-size: 15px; letter-spacing: .05em; }
.p27-prod { --p27-prod-thumb: 96px; max-width: 420px; margin-top: 22px; }
.p27-prod li + li { margin-top: 16px; }
.p27-prod a { gap: 14px; }
.p27-prod__qty { font-size: 14px; }
.p27-prod__name { font-size: 13px; }

/* ===== 桜ブリタニアとは ===== */
.p27-about { padding: 72px 16px 104px; }
.p27-ttl { font-size: 24px; }
.p27-ttl__en { font-size: 13px; margin-top: 12px; }
.p27-about__lead { margin-top: 28px !important; font-size: 14px; line-height: 2; letter-spacing: .03em; }
.p27-about__img { display: block; margin-top: 24px; } /* スマホ用図版 about_coin_sp */
.p27-point { margin-top: 32px; }
.p27-point__ttl { font-size: 18px; padding: .15em .4em; }
.p27-point p { margin-top: 12px !important; font-size: 14px; line-height: 1.9; letter-spacing: .03em; }
.p27-point p br { display: none; }

/* ===== 40年の軌跡：縦積み＋スワイプ ===== */
.p27-hs { padding: 64px 0 88px; }
.p27-hs__head { padding: 0 16px; }
.p27-hs__lead { margin-top: 24px !important; font-size: 13px; line-height: 2; letter-spacing: .03em; }
.p27-hs__lead br { display: none; }
.p27-hs__viewport { margin-top: 32px; transition: height .5s; }
.p27-hs__bgtrack, .p27-hs__canvas .p27-hs__arrow { display: none; }
/* コインの左右に前へ・次へ（スライドと一緒には動かない） */
.p27-hs__viewport { position: relative; }
.p27-hs__sparrow { position: absolute; top: 154px; z-index: 3; width: 40px; height: 40px; transform: translateY(-50%); }
.p27-hs__sparrow[hidden] { display: none; }
.p27-hs__sparrow--prev { left: 10px; }
.p27-hs__sparrow--next { right: 10px; }
.p27-hs__canvas { display: flex; flex-wrap: wrap; justify-content: center; gap: 0 12px; padding: 0 16px; }
.p27-hs__canvas > * { position: static !important; }
.p27-hs__range { flex-basis: 100%; text-align: center; font-size: 18px; order: 1; }
.p27-hs__main { flex-basis: 100%; display: flex; justify-content: center; margin-top: 16px; order: 2; width: auto !important; }
.p27-hs__main img { width: auto; max-width: 100%; max-height: 240px; }
.p27-hs__ttl { flex-basis: 100%; margin-top: 22px !important; text-align: center; font-size: 20px; order: 3; }
.p27-hs__body { flex-basis: 100%; margin-top: 14px !important; font-size: 13px; line-height: 2; letter-spacing: .03em; order: 4; }
.p27-hs__body br { display: none; }
.p27-hs__sub { flex-basis: calc(50% - 6px); width: auto !important; margin-top: 20px; order: 5; }
/* 2021：偽造防止技術の拡大3点は半分の大きさでコインのまわりに配置 */
.p27-hs__slide[data-year="2021"] .p27-hs__canvas { position: relative; }
.p27-hs__slide[data-year="2021"] .p27-hs__main img { max-height: 200px; }
.p27-hs__slide[data-year="2021"] .p27-hs__sub { position: absolute !important; z-index: 2; width: 80px !important; margin: 0; }
.p27-hs__slide[data-year="2021"] .p27-hs__sub:nth-of-type(2) { left: auto !important; right: 8px; top: 22px !important; }
.p27-hs__slide[data-year="2021"] .p27-hs__sub:nth-of-type(3) { left: 8px !important; top: 166px !important; }
.p27-hs__slide[data-year="2021"] .p27-hs__sub:nth-of-type(4) { left: auto !important; right: 8px; top: 166px !important; }
/* 2026：左側の鑑定ケース写真はスマホでは出さない（2023のコイン右の写真はスマホ用画像 h2023_main_sp で除外） */
.p27-hs__slide[data-year="2026"] .p27-hs__sub:nth-of-type(2) { display: none; }
/* 2027：コインと写真を分けた画像を使い、写真は本文の下に */
.p27-hs__sponly { flex-basis: 100%; }
.p27-hs__nav { margin: 28px 8px 0 !important; justify-content: space-between; }
.p27-hs__nav li { flex: 1; }
.p27-hs__dot { width: 100%; gap: 6px; font-size: 10px; letter-spacing: 0; }
.p27-hs__dot img { width: 30px; }

/* ===== 桜プロジェクト ===== */
.p27-proj { padding: 72px 16px 88px; }
.p27-proj__lead { margin-top: 28px !important; font-size: 14px; line-height: 2; letter-spacing: .03em; }
.p27-proj__inner { margin-top: 32px; }
.p27-proj__ttl { margin-top: 24px; font-size: 17px; }
.p27-proj__txt p { margin-top: 14px !important; font-size: 14px; line-height: 2; letter-spacing: .05em; }

/* ===== 最下部：画像に重ねたLINEUP ===== */
.p27-cl__panel { position: relative; margin: 24px 12px 0; padding: 0 10px; background: none; } /* スマホでは画像の下に置く */
.p27-closing { padding-bottom: 48px; }
.p27-cl__ttl { font-size: 20px; margin-bottom: 24px !important; }
.p27-cl__list { display: grid; grid-template-columns: 1fr 1fr; gap: 28px 8px; }
.p27-cl__item picture { height: 130px; }
.p27-cl__item picture img { width: 118px; }
.p27-cl__item--card picture img { width: 82px; }
.p27-cl__name { margin: 10px 0 10px !important; font-size: 14px; }
.p27-cl__qty { gap: 4px; max-width: 152px; }
.p27-cl__qty a { width: 48px; height: 48px; font-size: 13px; }

/* ===== 右固定ナビ：スマホでは表示しない ===== */
.p27-idx { display: none !important; }