@charset "utf-8";
/* =========================================================
JINS × Barbie LP
- Breakpoint: 1024px
- PC layout: viewport >= 1024px (design width 1536px, fluid下限 1024px)
- SP layout: viewport <= 1023px (design width 375px)
- All selectors scoped under .lp-barbie to avoid global impact
========================================================= */
/* =========================================================
Global keyframes & a11y — メディアクエリ外で定義し、
PC/SP どちらからでも参照できるようにする。
========================================================= */
@keyframes lp-barbie-badge-spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
@keyframes lp-barbie-star-wobble-1 {
0%,
50% {
transform: rotate(-22deg);
}
50.0001%,
100% {
transform: rotate(8deg);
}
}
@keyframes lp-barbie-star-wobble-2 {
0%,
50% {
transform: rotate(28deg);
}
50.0001%,
100% {
transform: rotate(-6deg);
}
}
@keyframes lp-barbie-star-wobble-3 {
0%,
50% {
transform: rotate(-12deg);
}
50.0001%,
100% {
transform: rotate(32deg);
}
}
/* KVロゴ: PC は translateX(-50%) を維持しつつ下からフェードイン */
@keyframes lp-barbie-kv-logo-up-pc {
from {
opacity: 0;
transform: translateX(-50%) translateY(20px);
}
to {
opacity: 1;
transform: translateX(-50%) translateY(0);
}
}
/* KVロゴ: SP は translate(-50%, -50%) を維持しつつ下からフェードイン */
@keyframes lp-barbie-kv-logo-up-sp {
from {
opacity: 0;
transform: translate(-50%, calc(-50% + 20px));
}
to {
opacity: 1;
transform: translate(-50%, -50%);
}
}
/* Lead テキスト: シンプルな下からフェードイン(stagger 用) */
@keyframes lp-barbie-fade-up {
from {
opacity: 0;
transform: translateY(20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
/* Lead テキスト: デフォルトは表示 (JS 失敗時のフォールバック)。
に js クラスが付く環境のみ初期非表示にし、is-animate でフェードイン。 */
.lp-barbie__lead-title,
.lp-barbie__lead-catch,
.lp-barbie__lead-text {
opacity: 1;
transform: none;
}
.js .lp-barbie__lead-title,
.js .lp-barbie__lead-catch,
.js .lp-barbie__lead-text {
opacity: 0;
transform: translateY(20px);
will-change: opacity, transform;
}
.js .lp-barbie__lead-inner.is-animate .lp-barbie__lead-title,
.js .lp-barbie__lead-inner.is-animate .lp-barbie__lead-catch,
.js .lp-barbie__lead-inner.is-animate .lp-barbie__lead-text {
animation: lp-barbie-fade-up 0.8s ease-out forwards;
}
.lp-barbie__lead-inner.is-animate .lp-barbie__lead-title {
animation-delay: 0s;
}
.lp-barbie__lead-inner.is-animate .lp-barbie__lead-catch {
animation-delay: 0.15s;
}
.lp-barbie__lead-inner.is-animate .lp-barbie__lead-text {
animation-delay: 0.3s;
}
@media (prefers-reduced-motion: reduce) {
.lp-barbie__card-badge-bg,
.lp-barbie__accessories-star--1,
.lp-barbie__accessories-star--2,
.lp-barbie__accessories-star--3 {
animation: none;
}
.lp-barbie__lead-car,
.lp-barbie__lead-car.is-animate {
transition: none !important;
transform: translateX(-50%) rotate(1.48deg) !important;
}
.lp-barbie__kv-logo {
animation: none !important;
opacity: 1;
}
.lp-barbie__lead-title,
.lp-barbie__lead-catch,
.lp-barbie__lead-text,
.js .lp-barbie__lead-title,
.js .lp-barbie__lead-catch,
.js .lp-barbie__lead-text {
opacity: 1 !important;
transform: none !important;
animation: none !important;
}
a.lp-barbie__saleinfo-cta,
a.lp-barbie__saleinfo-cta:hover,
.lp-barbie__link .lp-barbie__link-button,
.lp-barbie__link .lp-barbie__link-button:hover,
.lp-barbie__link .lp-barbie__link-pagetop,
.lp-barbie__link .lp-barbie__link-pagetop:hover {
transition: none !important;
transform: none !important;
}
}
/* =========================================================
Base — design tokens / reset / font helpers
PC・SP 両方に適用される共通スタイル。
========================================================= */
/* Web fonts (Alkaline / League Gothic) are loaded via Adobe Fonts kit in index.html.
M PLUS 2 is loaded via Google Fonts in index.html. */
.lp-barbie {
--barbie-pink: #ff3eb5;
--barbie-pink-light: #f395c7;
--barbie-pink-50: #ffd9ed;
--barbie-pink-25: #ffeef8;
--barbie-pink-dot: #FDE1D5;
--barbie-rosepink-dot: #F4577B;
--barbie-yellow: #fff200;
--barbie-cyan: #05c3de;
--barbie-black: #000000;
--barbie-gray: #626264;
--barbie-border: #e8e8eb;
--barbie-bg: #fafafa;
--barbie-white: #ffffff;
--design-w: 1536px;
/* Responsive unit: 1px @1536, viewport に対して常に比例スケール (liquid)。
使い方: width: calc(800 * var(--rw)); font-size: calc(24 * var(--rw));
SP では @media (max-width: 1023px) ブロック内で 375px 基準に上書きする。 */
--rw: calc(100vw / 1536);
font-family: "M PLUS 2", "Noto Sans Japanese", sans-serif;
color: var(--barbie-black);
background: var(--barbie-white);
width: 100%;
margin: 0 auto;
position: relative;
overflow-x: clip;
}
.lp-barbie img {
vertical-align: top;
max-width: 100%;
}
.lp-barbie p,
.lp-barbie h1,
.lp-barbie h2,
.lp-barbie h3,
.lp-barbie ul,
.lp-barbie li {
margin: 0;
padding: 0;
list-style: none;
}
.lp-barbie a {
text-decoration: none;
color: inherit;
}
/* font helpers — Alkaline / League Gothic は Adobe Fonts kit (index.html) でロード */
.lp-barbie__alkaline {
font-family: "alkaline", "Caveat", "Brush Script MT", cursive;
font-weight: 700;
}
.lp-barbie__leaguegothic {
font-family: "league-gothic", "Oswald", "Impact", sans-serif;
font-weight: 400;
}
/* =========================================================
===== PC layout — viewport >= 1024px =====
既存PC用スタイル。SP用と分離するため @media でラップ。
========================================================= */
@media (min-width: 1024px) {
/* SP専用改行ヘルパー — PCでは非表示 */
.lp-barbie__br-sp {
display: none;
}
/* =========================================================
KV — 1536 × 800
========================================================= */
.lp-barbie__kv {
position: relative;
width: 100%;
height: calc(800 * var(--rw));
overflow: hidden;
background: var(--barbie-pink);
}
.lp-barbie__kv-bg {
position: absolute;
inset: 0;
}
.lp-barbie__kv-bg img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
.lp-barbie__kv-deco {
position: absolute;
border-radius: 50%;
overflow: hidden;
}
.lp-barbie__kv-deco--tl {
top: calc(-187 * var(--rw));
left: calc(90 * var(--rw));
width: calc(466 * var(--rw));
height: calc(466 * var(--rw));
}
.lp-barbie__kv-deco--tr {
top: calc(78 * var(--rw));
right: calc(-160 * var(--rw));
width: calc(613 * var(--rw));
height: calc(613 * var(--rw));
}
.lp-barbie__kv-deco--bl {
top: calc(386 * var(--rw));
left: calc(-110 * var(--rw));
width: calc(518 * var(--rw));
height: calc(518 * var(--rw));
}
.lp-barbie__kv-deco img {
width: 100%;
height: 100%;
object-fit: cover;
}
.lp-barbie__kv-logo {
position: absolute;
top: calc(174 * var(--rw));
left: 50%;
transform: translateX(-50%);
width: calc(400 * var(--rw));
animation: lp-barbie-kv-logo-up-pc 0.8s ease-out 0.1s both;
will-change: opacity, transform;
}
/* =========================================================
Lead — 1536 × 563
========================================================= */
.lp-barbie__lead {
position: relative;
width: 100%;
height: 550px;
z-index: 2;
}
.lp-barbie__lead-bg {
position: absolute;
inset: 0;
overflow: hidden;
}
.lp-barbie__lead-bg img {
width: 100%;
height: 100%;
object-fit: cover;
}
.lp-barbie__lead-inner {
position: absolute;
top: 50px;
left: 50%;
transform: translateX(-50%);
width: 815px;
text-align: center;
}
.lp-barbie__lead-title img {
width: 469px;
height: auto;
margin-top: 30px;
}
.lp-barbie__lead-catch,
.lp-barbie__lead-text {
color: var(--barbie-white);
font-family: "M PLUS 2", "Noto Sans Japanese", sans-serif;
font-weight: 500;
font-size: 20px;
line-height: 1.5;
text-shadow: 2px 2px 0 rgba(0, 0, 0, 0.25);
}
.lp-barbie p.lp-barbie__lead-catch {
margin: 30px 0 15px 0;
}
.lp-barbie__lead-text {
line-height: 1.65;
}
.lp-barbie__lead-car {
position: absolute;
top: 390px;
left: 50%;
transform: translateX(1000px) rotate(1.48deg);
width: 326px;
z-index: 5;
transition: transform 2s cubic-bezier(0.22, 0.61, 0.36, 1);
will-change: transform;
}
.lp-barbie__lead-car.is-animate {
transform: translateX(-50%) rotate(1.48deg);
}
/* =========================================================
Sale Info — 1536 × 593
========================================================= */
.lp-barbie__saleinfo {
position: relative;
width: 100%;
height: 593px;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
padding: 80px 0;
}
.lp-barbie__saleinfo-bg {
position: absolute;
inset: 0;
z-index: 0;
background-image: url(../img/saleinfo-bg.webp);
background-repeat: repeat-x;
background-position: center;
background-size: auto 100%;
}
.lp-barbie__saleinfo-card {
position: relative;
z-index: 1;
display: flex;
width: 800px;
margin-top: 80px;
background: var(--barbie-white);
border-radius: 16px;
overflow: hidden;
box-shadow: 0 4px 24px rgba(0, 0, 0, 0.08);
}
.lp-barbie__saleinfo-img {
width: 340px;
background: var(--barbie-pink-50);
flex-shrink: 0;
}
.lp-barbie__saleinfo-img img {
width: 100%;
height: 100%;
object-fit: cover;
}
.lp-barbie__saleinfo-text {
flex: 1;
padding: 60px 40px 32px;
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
gap: 8px;
}
.lp-barbie__saleinfo-heading {
font-family: "league-gothic", "Oswald", "Impact", sans-serif;
font-size: 29px;
color: var(--barbie-pink);
margin-top: -8px;
transform: scaleY(1.15);
transform-origin: center;
}
.lp-barbie p.lp-barbie__saleinfo-price {
font-family: "M PLUS 2", "Noto Sans Japanese", sans-serif;
font-weight: 700;
font-size: 36px;
line-height: 1;
display: flex;
align-items: flex-end;
justify-content: center;
gap: 2px;
margin-top: 11px;
}
.lp-barbie__saleinfo-badge {
display: inline-block;
align-self: center;
background: var(--barbie-pink);
color: var(--barbie-white);
padding: 4px 10px;
font-size: 14px;
font-weight: 700;
width: fit-content;
font-family: "Noto Sans Japanese", sans-serif;
position: relative;
left: -8px;
}
.lp-barbie__saleinfo-price-yen {
margin-right: -5px;
}
.lp-barbie__saleinfo-tax {
font-size: 12px;
font-weight: 400;
margin-left: -4px;
margin-bottom: 5px;
}
.lp-barbie p.lp-barbie__saleinfo-release {
margin-top: 8px;
margin-bottom: 12px;
font-family: "M PLUS 2", "Noto Sans Japanese", sans-serif;
font-weight: 700;
background-image: linear-gradient(transparent 88%, var(--barbie-yellow) 88%, var(--barbie-yellow) 98%, transparent 98%);
background-repeat: no-repeat;
background-size: 100% 100%;
padding: 0 4px;
display: inline-block;
letter-spacing: -1px;
}
.lp-barbie__saleinfo-release .date {
font-size: 30px;
}
.lp-barbie__saleinfo-release .date .unit {
font-size: 24px;
}
.lp-barbie__saleinfo-release .release {
font-size: 30px;
margin-left: 8px;
}
.lp-barbie__saleinfo-time {
font-size: 14px;
color: var(--barbie-gray);
line-height: 1.3;
}
.lp-barbie p.lp-barbie__saleinfo-shoplimit {
font-size: 14px;
color: var(--barbie-gray);
margin-top: -2px;
}
a.lp-barbie__saleinfo-cta {
display: inline-block;
margin-top: 8px;
padding: 12px 50px;
background: var(--barbie-pink);
color: var(--barbie-white);
font-size: 18px;
font-weight: 700;
border-radius: 3px;
text-align: center;
box-shadow: -3.925px 3.925px 0 var(--barbie-pink-light);
width: fit-content;
transition: transform 0.2s ease;
}
@media (hover: hover) {
a.lp-barbie__saleinfo-cta:hover {
transform: scale(1.05);
}
}
/* =========================================================
Lineup — 1536 × 431
========================================================= */
.lp-barbie__lineup {
position: relative;
width: 100%;
height: 431px;
background: var(--barbie-white);
display: flex;
flex-direction: column;
align-items: center;
padding-top: 53px;
}
.lp-barbie__lineup-title {
font-family: "league-gothic", "Oswald", "Impact", sans-serif;
font-size: 48px;
color: var(--barbie-pink);
margin-bottom: 40px;
}
.lp-barbie__lineup-list {
display: flex;
gap: 20px;
width: 910px;
justify-content: space-between;
}
.lp-barbie__lineup-item {
position: relative;
width: 290px;
}
.lp-barbie__lineup-item-link {
display: flow-root;
position: relative;
width: 100%;
height: 100%;
}
.lp-barbie__lineup-item-title {
top: 0;
position: absolute;
left: 15px;
z-index: 2;
}
.lp-barbie__lineup-item-title img {
display: block;
width: 180px;
height: auto;
}
.lp-barbie__lineup-item-title--narrow {
top: 10px;
left: 3px;
}
.lp-barbie__lineup-item-title--narrow img {
width: 200px;
}
.lp-barbie__lineup-item-title--bold {
top: 16px;
left: 10px;
}
.lp-barbie__lineup-item-title--bold img {
width: 160px;
}
.lp-barbie__lineup-item-title--butterfly {
top: 18px;
left: 23px;
}
.lp-barbie__lineup-item-title--butterfly img {
width: 120px;
}
.lp-barbie__lineup-item-thumb {
width: 260px;
height: 163px;
border: 4px solid var(--barbie-border);
border-radius: 9999px;
background: var(--barbie-bg);
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
margin: 36px auto 0;
transition: border-color 0.2s ease;
}
.lp-barbie__lineup-item-link:hover .lp-barbie__lineup-item-thumb {
border-color: var(--barbie-pink);
}
.lp-barbie__lineup-item-thumb img {
max-width: 100%;
max-height: 100%;
object-fit: contain;
}
.lp-barbie__lineup-item-badge {
position: absolute;
bottom: -21px;
left: 50%;
transform: translateX(-50%);
width: 42px;
height: 42px;
z-index: 3;
}
.lp-barbie__lineup-item-badge img {
width: 100%;
height: 100%;
display: block;
}
/* =========================================================
Article (product cards) — each card ~751px tall, BG section ~2386px
========================================================= */
.lp-barbie__article {
position: relative;
padding: 138px 0;
display: flex;
flex-direction: column;
gap: 150px;
align-items: center;
background: linear-gradient(180deg, var(--barbie-pink-25), var(--barbie-pink-light));
}
.lp-barbie__article-bg {
position: absolute;
inset: 0;
z-index: 0;
pointer-events: none;
}
.lp-barbie__article-bg img {
position: sticky;
top: 0;
display: block;
width: 100%;
height: 100vh;
object-fit: cover;
}
.lp-barbie__card {
position: relative;
z-index: 1;
width: 900px;
min-height: 585px;
background: var(--barbie-pink);
border-radius: 4px;
box-shadow: 6px 6px 0 rgba(0, 0, 0, 0.2);
padding: 40px 0 0 0;
scroll-margin-top: 90px;
}
.lp-barbie__card-title {
position: absolute;
z-index: 3;
margin: 0;
}
.lp-barbie__card-title-img {
display: block;
position: relative;
height: auto;
}
/* Narrow Cateye (PC) */
.lp-barbie__card--narrow .lp-barbie__card-title {
top: 40px;
left: -13px;
}
.lp-barbie__card--narrow .lp-barbie__card-title-img {
top: -70px; /* ← 位置微調整(PC)：下方向は + 、上方向は - */
left: -10px; /* ← 位置微調整(PC)：右方向は + 、左方向は - */
width: 460px;
}
/* Bold Cateye (PC) */
.lp-barbie__card--bold .lp-barbie__card-title {
top: 38px;
left: -11px;
}
.lp-barbie__card--bold .lp-barbie__card-title-img {
top: -60px; /*← 位置微調整(PC)：下方向は + 、上方向は - */
left: 15px; /* ← 位置微調整(PC)：右方向は + 、左方向は - */
width: 380px;
}
/* Butterfly (PC) */
.lp-barbie__card--butterfly .lp-barbie__card-title {
top: 52px;
left: -10px;
}
.lp-barbie__card--butterfly .lp-barbie__card-title-img {
top: -50px; /* ← 位置微調整(PC)：下方向は + 、上方向は - */
left: 15px; /* ← 位置微調整(PC)：右方向は + 、左方向は - */
width: 280px;
}
.lp-barbie__card-badge {
position: absolute;
top: 30px;
right: 60px;
width: 124px;
height: 124px;
transform: rotate(14.97deg) scale(1.2);
z-index: 3;
display: flex;
align-items: center;
justify-content: center;
}
.lp-barbie__card-badge-bg {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
animation: lp-barbie-badge-spin 25s linear infinite;
}
.lp-barbie__card-badge-text {
position: relative;
font-family: "league-gothic", "Oswald", sans-serif;
font-size: 24px;
color: var(--barbie-pink);
text-align: center;
line-height: 1.05;
letter-spacing: 0.5px;
}
.lp-barbie__card-inner {
position: relative;
box-sizing: border-box;
width: 870px;
min-height: 558px;
margin: 0 auto;
background: transparent;
/* 上: 半透明枠線付きの白ポリゴン(見た目)
下: 同形・不透明ピンクのポリゴン。半透明枠線の背後を不透明ピンクで埋めることで、
z-index:-1 のステッカーが枠線部分から透けて見えるのを防ぐ。
(白枠線×ピンク = 薄ピンクで見た目は従来と同一) */
background-image:
url('data:image/svg+xml;utf8,'),
url('data:image/svg+xml;utf8,');
background-repeat: no-repeat, no-repeat;
background-size: 100% 100%, 100% 100%;
padding: 32px;
display: grid;
grid-template-columns: 170px 1fr;
gap: 32px;
}
/* ロゴ(z-index:1)の上に「枠線だけ」を z-index:2 で再描画して、
枠線と重なった範囲のロゴをマスクする。内側の白い部分や下のピンク帯では
::after は透明なので、ロゴはそのまま見える。
下層: 不透明ピンク(stroke-width:10)でロゴを確実に隠す
上層: 半透明白(stroke-width:10)で薄ピンクの見た目を作る
※ 上下の幅を揃えて、外周にピンクがはみ出さないようにしている */
.lp-barbie__card-inner::after {
content: "";
position: absolute;
inset: 0;
background-image:
url('data:image/svg+xml;utf8,'),
url('data:image/svg+xml;utf8,');
background-repeat: no-repeat, no-repeat;
background-size: 100% 100%, 100% 100%;
pointer-events: none;
z-index: 2;
}
/* color options column */
ul.lp-barbie__card-options {
position: relative;
display: flex;
flex-direction: column;
gap: 10px;
width: 165.87px;
margin-top: 60px;
z-index: 4;
}
.lp-barbie__card-option {
position: relative;
box-sizing: border-box;
width: 150.26px;
height: 96.59px;
border: 2px solid var(--barbie-border);
border-radius: 4px;
background: var(--barbie-white);
padding: 0;
cursor: pointer;
}
.lp-barbie__card-option.is-selected {
border-color: var(--barbie-pink);
box-shadow: 0 0 0 2px var(--barbie-pink);
}
.lp-barbie__card-option.is-selected::after {
content: "";
position: absolute;
right: -14px;
top: 50%;
width: 0;
height: 0;
transform: translateY(-50%);
border-left: 12px solid var(--barbie-pink);
border-top: 9px solid transparent;
border-bottom: 9px solid transparent;
}
.lp-barbie__card-option-img {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
.lp-barbie__card-option-img img {
width: 100%;
height: 100%;
object-fit: contain;
}
.lp-barbie__card-option-label {
position: absolute;
left: 50%;
bottom: 4px;
transform: translateX(-50%);
font-family: "M PLUS 2", "Noto Sans Japanese", sans-serif;
font-weight: 700;
font-size: 14px;
text-align: center;
white-space: nowrap;
}
/* main column */
.lp-barbie__card-main {
display: flex;
flex-direction: column;
align-items: center;
gap: 12px;
}
.lp-barbie__card-name {
position: relative;
z-index: 2;
transform: translate(-30px, 5px);
display: flex;
align-items: center;
gap: 8px;
font-family: "M PLUS 2", "Noto Sans Japanese", sans-serif;
font-weight: 700;
font-size: 22px;
}
.lp-barbie__card-name .dot {
display: inline-block;
width: 24px;
height: 24px;
border-radius: 9999px;
background: #000;
border: 1px solid var(--barbie-border);
}
.lp-barbie__card-name .dot--demi {
background: url(../img/browndemi.webp) center/cover no-repeat;
}
.lp-barbie__card-name .dot--pink {
background: var(--barbie-pink-dot);
}
.lp-barbie__card-name .dot--rosepink {
background: var(--barbie-rosepink-dot);
}
.lp-barbie__card-name .dot--white {
background: #fff;
border-color: #ccc;
}
.lp-barbie__card-sku {
position: relative;
z-index: 2;
transform: translate(-30px, -2px);
font-family: "jins_next_ttregular", "Noto Sans Japanese", sans-serif;
font-size: 15px;
color: var(--barbie-black);
}
.lp-barbie__card-image {
position: relative;
width: 550px;
height: 210px;
align-self: flex-start;
margin-top: -20px;
margin-left: -18.5px;
background: var(--barbie-white);
touch-action: pan-x;
overscroll-behavior: contain;
user-select: none;
}
.lp-barbie__card-image img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: contain;
opacity: 0;
-webkit-user-drag: none;
pointer-events: none;
}
.lp-barbie__card-image img.is-active {
opacity: 1;
z-index: 1;
}
p.lp-barbie__card-desc {
font-family: "M PLUS 2", "Noto Sans Japanese", sans-serif;
font-size: 15px;
width: 520px;
margin-top: -10px;
margin-left: -53px;
text-align: center;
line-height: 1.6;
}
.lp-barbie__card-thumbs {
display: flex;
gap: 16px;
margin-top: 8px;
margin-left: -53px;
}
.lp-barbie__card-thumb {
position: relative;
width: 190px;
height: 86px;
border-radius: 9999px;
background: var(--barbie-pink-25);
display: flex;
align-items: center;
justify-content: center;
}
.lp-barbie__card-thumb img {
max-width: 100%;
max-height: 100%;
object-fit: contain;
border-radius: 9999px;
}
.lp-barbie__card-thumb-clip {
position: absolute;
inset: 0;
border-radius: 9999px;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
}
.lp-barbie__card-thumb-label {
position: absolute;
top: -8px;
left: 8px;
font-family: "alkaline", "Caveat", cursive;
font-weight: 700;
font-size: 15px;
color: var(--barbie-pink);
transform: rotate(-6.93deg);
z-index: 2;
}
/* BUY NOW button */
.lp-barbie__card-buy {
position: absolute;
right: 20px;
bottom: 20px;
width: 172px;
height: 88px;
transform: rotate(-8.68deg);
display: flex;
align-items: center;
justify-content: center;
background: var(--barbie-cyan);
border-radius: 50%;
box-shadow: 0 6px 0 rgba(0, 0, 0, 0.25);
overflow: hidden;
text-decoration: none;
z-index: 3;
transition: transform 0.3s ease;
}
.lp-barbie__card-buy::before {
content: "";
position: absolute;
top: 6px;
left: 3px;
right: 3px;
bottom: 1px;
border-radius: 50%;
background: rgba(0, 0, 0, 0.03);
pointer-events: none;
}
.lp-barbie__card-buy:hover {
transform: rotate(-8.68deg) scale(1.08);
}
.lp-barbie__card-buy-text {
position: relative;
bottom: 3px;
right: 5px;
font-family: "league-gothic", "Oswald", sans-serif;
font-size: 35px;
color: var(--barbie-white);
letter-spacing: 1px;
line-height: 1;
white-space: nowrap;
transform: translateY(5px);
}
.lp-barbie__card-buy::after {
content: "";
position: absolute;
right: 22px;
top: 50%;
width: 0;
height: 0;
border-left: 10px solid var(--barbie-white);
border-top: 7px solid transparent;
border-bottom: 7px solid transparent;
transform: translateY(-50%);
}
/* Navi hearts (1 / 2 indicator) */
.lp-barbie__card-navi {
position: absolute;
right: 35px;
top: 155px;
display: flex;
flex-direction: column;
gap: 6px;
margin: 0;
padding: 0;
list-style: none;
z-index: 3;
-webkit-tap-highlight-color: transparent;
}
.lp-barbie__card-navi-item {
position: relative;
width: 34px;
height: 34px;
cursor: pointer;
}
.lp-barbie__card-navi-item img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: contain;
}
.lp-barbie__card-navi-on {
display: none;
}
.lp-barbie__card-navi-item.is-active .lp-barbie__card-navi-on {
display: block;
}
.lp-barbie__card-navi-item.is-active .lp-barbie__card-navi-off {
display: none;
}
.lp-barbie__card-logo {
position: absolute;
bottom: 1px;
left: 16px;
width: 200px;
/* inner の内側(白い面)にも乗せたいので inner より上に出す。
枠線と重なった範囲だけは inner::after(z-index:2)が上から
被せてマスクする。 */
z-index: 1;
transform: rotate(-0.4deg);
}
.lp-barbie__card-logo img {
margin-left: 50px;
margin-bottom: 28px;
width: 100%;
opacity: 0.2;
}
/* sticker decorations on the pink bottom strip of each product card */
.lp-barbie__card-sticker {
position: absolute;
height: auto;
z-index: -1;
pointer-events: none;
}
.lp-barbie__card-sticker--1 {
bottom: 0;
left: 350px;
width: 60px;
transform: rotate(-10deg);
}
.lp-barbie__card-sticker--2 {
bottom: 10px;
left: 440px;
width: 110px;
transform: rotate(4deg);
}
.lp-barbie__card-sticker--3 {
bottom: 10px;
left: 580px;
width: 75px;
transform: rotate(12deg);
}
/* =========================================================
Accessories — 1536 × 743
========================================================= */
.lp-barbie__accessories {
position: relative;
width: 100%;
height: 743px;
overflow: hidden;
}
.lp-barbie__accessories-bg {
position: absolute;
inset: 0;
}
.lp-barbie__accessories-bg img {
width: 100%;
height: 100%;
object-fit: cover;
}
.lp-barbie__accessories-title {
position: absolute;
top: 85px;
left: 50%;
transform: translateX(-50%);
width: 370px;
margin: 0;
z-index: 2;
}
.lp-barbie__accessories-title img {
display: block;
width: 100%;
height: auto;
}
.lp-barbie__accessories-card {
position: absolute;
top: 125px;
left: 50%;
transform: translateX(-50%);
width: 900px;
height: 525px;
background: var(--barbie-white);
border-radius: 16px;
box-shadow: 6px 6px 0 rgba(0, 0, 0, 0.2);
padding: 80px 32px 32px;
display: flex;
flex-direction: column;
align-items: center;
gap: 4px;
overflow: hidden;
}
.lp-barbie__accessories-heading {
position: relative;
z-index: 10;
font-family: "M PLUS 2", "Noto Sans Japanese", sans-serif;
font-weight: 700;
font-size: 22px;
}
.lp-barbie__accessories-note {
position: relative;
z-index: 10;
font-family: "M PLUS 2", "Noto Sans Japanese", sans-serif;
font-size: 16px;
color: var(--barbie-gray);
}
.lp-barbie__accessories-images {
display: flex;
margin-top: 16px;
align-items: center;
justify-content: center;
}
.lp-barbie__accessories-image {
width: 420px;
height: 340px;
display: flex;
align-items: center;
justify-content: center;
position: relative;
}
.lp-barbie__accessories-image:first-child {
left: -92px;
top: 10px;
width: 200px;
}
.lp-barbie__accessories-image:last-child {
right: -70px;
width: 150px;
}
.lp-barbie__accessories-image img {
width: 100%;
height: 100%;
object-fit: contain;
transform: scale(1.8);
}
/* star decorations around the accessories card */
.lp-barbie__accessories-star {
position: absolute;
z-index: 2;
pointer-events: none;
}
.lp-barbie__accessories-star--1 {
top: 110px;
left: 130px;
width: 70px;
animation: lp-barbie-star-wobble-1 1.3s steps(1, end) infinite;
}
.lp-barbie__accessories-star--2 {
top: 160px;
left: 50px;
width: 55px;
animation: lp-barbie-star-wobble-2 0.8s steps(1, end) infinite;
animation-delay: -0.4s;
}
.lp-barbie__accessories-star--3 {
bottom: 10px;
right: 20px;
width: 110px;
animation: lp-barbie-star-wobble-3 1.7s steps(1, end) infinite;
animation-delay: -0.9s;
}
/* =========================================================
Link section — 1536 × 397
========================================================= */
.lp-barbie__link {
position: relative;
width: 100%;
min-height: 397px;
display: flex;
flex-direction: column;
align-items: center;
gap: 24px;
padding: 64px 0 32px;
/* 共通フッター .footer-navigation の margin-top: 120px と相殺し、PC時の空白を解消 */
margin-bottom: -120px;
overflow: hidden;
}
.lp-barbie__link-bg {
position: absolute;
inset: 0;
z-index: 0;
background-image: url(../img/saleinfo-bg.webp);
background-repeat: repeat-x;
background-position: center;
background-size: auto 100%;
}
.lp-barbie__link-buttons {
position: relative;
z-index: 1;
display: flex;
gap: 20px;
margin-top: 40px;
}
.lp-barbie__link .lp-barbie__link-button {
display: flex;
align-items: center;
justify-content: center;
width: 400px;
height: 78px;
background: var(--barbie-white);
color: var(--barbie-pink);
font-family: "M PLUS 2", "Noto Sans Japanese", sans-serif;
font-weight: 700;
font-size: 22px;
border-radius: 4px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
transition: transform 0.2s ease;
}
@media (hover: hover) {
.lp-barbie__link .lp-barbie__link-button:hover {
transform: scale(1.05);
}
}
.lp-barbie__link .lp-barbie__link-pagetop {
position: relative;
z-index: 1;
display: flex;
flex-direction: row;
align-items: center;
gap: 12px;
color: var(--barbie-white);
font-family: "M PLUS 2", "Noto Sans Japanese", sans-serif;
font-weight: 700;
font-size: 22px;
margin-top: 30px;
transition: transform 0.2s ease;
transform-origin: center;
}
@media (hover: hover) {
.lp-barbie__link .lp-barbie__link-pagetop:hover {
transform: scale(1.05);
}
}
.lp-barbie__link-pagetop-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
border-radius: 50%;
background: var(--barbie-white);
}
.lp-barbie__link-pagetop-icon img {
width: 12px;
height: auto;
}
.lp-barbie__link .lp-barbie__copyright {
position: relative;
z-index: 1;
margin-top: auto;
margin-bottom: 15px;
width: fit-content;
}
.lp-barbie__link .lp-barbie__copyright img {
display: block;
width: 102px;
height: auto;
}
} /* ===== end PC layout ===== */
/* =========================================================
===== SP layout — viewport <= 1023px =====
design width: 390px / liquid scale via --rw
========================================================= */
@media (max-width: 1023px) {
.lp-barbie {
--rw: calc(100vw / 390);
overflow-x: clip;
}
/* ----- KV ----- */
.lp-barbie__kv {
position: relative;
width: 100%;
height: calc(462 * var(--rw));
overflow: hidden;
background: var(--barbie-pink);
}
.lp-barbie__kv-bg {
position: absolute;
inset: 0;
}
.lp-barbie__kv-bg img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
.lp-barbie__kv-deco {
position: absolute;
border-radius: 50%;
overflow: hidden;
}
.lp-barbie__kv-deco--tl {
top: calc(-44 * var(--rw));
left: calc(-28 * var(--rw));
width: calc(164 * var(--rw));
height: calc(164 * var(--rw));
}
.lp-barbie__kv-deco--tr {
top: calc(-54 * var(--rw));
right: calc(-85 * var(--rw));
width: calc(209 * var(--rw));
height: calc(209 * var(--rw));
}
.lp-barbie__kv-deco--bl {
top: calc(367 * var(--rw));
left: 35%;
transform: translateX(-50%);
width: calc(210 * var(--rw));
height: calc(210 * var(--rw));
}
.lp-barbie__kv-deco img {
width: 100%;
height: 100%;
object-fit: cover;
}
.lp-barbie__kv-logo {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: calc(220 * var(--rw));
animation: lp-barbie-kv-logo-up-sp 0.8s ease-out 0.1s both;
}
/* ----- Lead ----- */
.lp-barbie__lead {
position: relative;
width: 100%;
height: calc(517 * var(--rw));
background: var(--barbie-pink-light);
}
.lp-barbie__lead-bg {
position: absolute;
inset: 0;
}
.lp-barbie__lead-bg img {
width: 100%;
height: 100%;
object-fit: cover;
}
.lp-barbie__lead-inner {
position: absolute;
top: calc(66 * var(--rw));
left: 50%;
transform: translateX(-50%);
width: calc(352 * var(--rw));
text-align: center;
}
.lp-barbie__lead-title img {
width: calc(340 * var(--rw));
height: auto;
margin: 0 auto;
filter: drop-shadow(2.197px 2.197px 0 rgba(0, 0, 0, 0.2));
}
.lp-barbie__lead-catch,
.lp-barbie__lead-text {
color: var(--barbie-white);
font-family: "M PLUS 2", "Noto Sans Japanese", sans-serif;
font-weight: 700;
font-size: calc(15 * var(--rw));
line-height: 1.5;
text-shadow: 2px 2px 0 rgba(0, 0, 0, 0.2);
}
.lp-barbie p.lp-barbie__lead-catch {
margin: calc(35 * var(--rw)) 0 calc(32 * var(--rw)) 0;
}
.lp-barbie p.lp-barbie__lead-text {
margin-top: -10px;
}
.lp-barbie__lead-car {
position: absolute;
top: calc(370 * var(--rw));
left: 50%;
transform: translateX(1000px) rotate(1.48deg);
width: calc(300 * var(--rw));
z-index: 10;
transition: transform 2s cubic-bezier(0.22, 0.61, 0.36, 1);
will-change: transform;
}
.lp-barbie__lead-car.is-animate {
transform: translateX(-50%) rotate(1.48deg);
}
/* ----- Sale Info ----- */
.lp-barbie__saleinfo {
position: relative;
width: 100%;
height: calc(945 * var(--rw));
display: block;
overflow: hidden;
padding: 0;
}
.lp-barbie__saleinfo-bg {
position: absolute;
inset: 0;
z-index: 0;
background-image: url(../img/saleinfo-bg.webp);
background-repeat: repeat-y;
background-position: center top;
background-size: 100% auto;
}
.lp-barbie__saleinfo-card {
position: absolute;
left: 50%;
top: 50%;
z-index: 1;
transform: translate(-50%, calc(-50% + 23.32 * var(--rw)));
width: calc(350 * var(--rw));
margin: 0;
background: var(--barbie-white);
border-radius: calc(16 * var(--rw));
overflow: hidden;
box-shadow: 0 4px 24px rgba(0, 0, 0, 0.08);
display: flex;
flex-direction: column;
align-items: stretch;
}
.lp-barbie__saleinfo-img {
width: 100%;
height: calc(442 * var(--rw));
background: var(--barbie-pink-50);
flex-shrink: 0;
}
.lp-barbie__saleinfo-img img {
width: 100%;
height: 100%;
object-fit: cover;
}
.lp-barbie__saleinfo-text {
width: 100%;
padding: calc(20 * var(--rw)) 0 calc(50 * var(--rw));
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
}
.lp-barbie__saleinfo-heading {
font-family: "league-gothic", "Oswald", "Impact", sans-serif;
font-size: calc(28 * var(--rw));
color: var(--barbie-pink);
margin: 0;
transform: none;
}
.lp-barbie p.lp-barbie__saleinfo-price {
font-family: "M PLUS 2", "Noto Sans Japanese", sans-serif;
font-weight: 700;
font-size: calc(36 * var(--rw));
line-height: 1;
display: flex;
align-items: flex-end;
justify-content: center;
gap: calc(5 * var(--rw));
margin: calc(15 * var(--rw)) 0 0;
}
.lp-barbie__saleinfo-badge {
display: inline-flex;
align-items: center;
justify-content: center;
align-self: center;
background: var(--barbie-pink);
color: var(--barbie-white);
padding: calc(8 * var(--rw)) calc(8 * var(--rw)) calc(8 * var(--rw));
font-size: calc(14 * var(--rw));
font-weight: 700;
font-family: "M PLUS 2", "Noto Sans Japanese", sans-serif;
position: static;
left: auto;
}
.lp-barbie__saleinfo-price-yen {
margin-right: calc(-5 * var(--rw));
}
.lp-barbie__saleinfo-tax {
font-size: calc(12 * var(--rw));
font-weight: 400;
margin-left: calc(-8 * var(--rw));
margin-bottom: calc(5 * var(--rw));
}
.lp-barbie p.lp-barbie__saleinfo-release {
margin: calc(16 * var(--rw)) 0 0;
font-family: "M PLUS 2", "Noto Sans Japanese", sans-serif;
font-weight: 700;
background-image: linear-gradient(transparent 88%, var(--barbie-yellow) 88%, var(--barbie-yellow) 98%, transparent 98%);
background-repeat: no-repeat;
background-size: 100% 100%;
background-position: 0 calc(-1 * var(--rw));
/* padding: 0 calc(4 * var(--rw)); */
display: inline-block;
/* letter-spacing: -1px; */
}
.lp-barbie__saleinfo-release .date {
font-size: calc(30 * var(--rw));
}
.lp-barbie__saleinfo-release .date .unit {
font-size: calc(20 * var(--rw));
}
.lp-barbie__saleinfo-release .release {
font-size: calc(30 * var(--rw));
margin-left: calc(3 * var(--rw));
}
.lp-barbie p.lp-barbie__saleinfo-time {
font-size: calc(14 * var(--rw));
color: var(--barbie-gray);
line-height: 1.5;
margin: calc(16 * var(--rw)) 0 0;
}
.lp-barbie p.lp-barbie__saleinfo-shoplimit {
font-size: calc(14 * var(--rw));
color: var(--barbie-gray);
margin: 0 0 calc(3 * var(--rw));
}
a.lp-barbie__saleinfo-cta {
display: inline-flex;
align-items: center;
justify-content: center;
margin: calc(12 * var(--rw)) 0 0;
padding: calc(12 * var(--rw)) calc(50 * var(--rw));
background: var(--barbie-pink);
color: var(--barbie-white);
font-size: calc(18 * var(--rw));
font-weight: 700;
font-family: "M PLUS 2", "Noto Sans Japanese", sans-serif;
border-radius: calc(4 * var(--rw));
text-align: center;
box-shadow: calc(-3.925 * var(--rw)) calc(3.925 * var(--rw)) 0 var(--barbie-pink-light);
width: fit-content;
}
/* ----- Lineup ----- */
.lp-barbie__lineup {
position: relative;
width: 100%;
height: calc(775 * var(--rw));
background: var(--barbie-white);
display: block;
padding: 0;
}
.lp-barbie__lineup-title {
position: absolute;
top: calc(40 * var(--rw));
left: 50%;
transform: translateX(-50%);
font-family: "league-gothic", "Oswald", "Impact", sans-serif;
font-size: calc(48 * var(--rw));
color: var(--barbie-pink);
letter-spacing: 1px;
margin: 0;
line-height: 1;
}
.lp-barbie__lineup-list {
position: absolute;
top: calc(105 * var(--rw));
left: 50%;
transform: translateX(-50%);
display: flex;
flex-direction: column;
gap: calc(20 * var(--rw));
width: calc(290 * var(--rw));
justify-content: flex-start;
}
.lp-barbie__lineup-item {
position: relative;
width: calc(290 * var(--rw));
height: calc(197 * var(--rw));
}
.lp-barbie__lineup-item-link {
display: block;
position: relative;
width: 100%;
height: 100%;
}
.lp-barbie__lineup-item-title {
top: 0;
position: absolute;
left: calc(15 * var(--rw));
z-index: 2;
}
.lp-barbie__lineup-item-title img {
display: block;
width: calc(160 * var(--rw));
height: auto;
}
.lp-barbie__lineup-item-title--narrow {
top: calc(8 * var(--rw));
left: calc(-3 * var(--rw));
}
.lp-barbie__lineup-item-title--narrow img {
width: calc(200 * var(--rw));
}
.lp-barbie__lineup-item-title--bold {
top: calc(13 * var(--rw));
left: calc(10 * var(--rw));
}
.lp-barbie__lineup-item-title--bold img {
width: calc(160 * var(--rw));
}
.lp-barbie__lineup-item-title--butterfly {
top: calc(13 * var(--rw));
left: calc(25 * var(--rw));
}
.lp-barbie__lineup-item-title--butterfly img {
width: calc(120 * var(--rw));
}
.lp-barbie__lineup-item-thumb {
position: absolute;
left: calc(29 * var(--rw));
top: calc(34 * var(--rw));
width: calc(232 * var(--rw));
height: calc(145.6 * var(--rw));
border: calc(3 * var(--rw)) solid var(--barbie-border);
border-radius: 9999px;
background: var(--barbie-bg);
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
margin: 0;
}
.lp-barbie__lineup-item-thumb img {
max-width: 100%;
max-height: 100%;
object-fit: contain;
}
.lp-barbie__lineup-item-badge {
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
width: calc(42 * var(--rw));
height: calc(42 * var(--rw));
z-index: 3;
}
.lp-barbie__lineup-item-badge img {
width: 100%;
height: 100%;
display: block;
}
/* ----- Article (product cards) ----- */
.lp-barbie__article {
position: relative;
padding: calc(40 * var(--rw)) 0;
display: flex;
flex-direction: column;
/* gap: calc(32 * var(--rw)); */
align-items: center;
background: linear-gradient(180deg, var(--barbie-pink-25), var(--barbie-pink-light));
}
.lp-barbie__article-bg {
position: absolute;
inset: 0;
z-index: 0;
pointer-events: none;
}
.lp-barbie__article-bg img {
position: sticky;
top: 0;
display: block;
width: 100%;
height: 100vh;
object-fit: cover;
}
.lp-barbie__card {
position: relative;
z-index: 1;
width: calc(360 * var(--rw));
/* --rw=1 時の値(668)を維持しつつ固定px補正を排除。
こうしないと画面幅変動時に他の純粋--rw要素との相対位置がズレ、
内部のロゴ・ステッカーが上下にドリフトしてしまう。 */
min-height: calc(668 * var(--rw));
background: transparent;
border-radius: 0;
box-shadow: none;
padding: 0;
scroll-margin-top: calc(80 * var(--rw));
flex-shrink: 0;
}
/* the pink rounded card body — drawn via pseudo so we don't touch HTML */
.lp-barbie__card::before {
content: "";
position: absolute;
left: 0;
top: calc(3 * var(--rw));
width: 100%;
/* --rw=1 時の値(625)を維持しつつ純粋 --rw スケールに統一。 */
height: calc(625 * var(--rw));
background: var(--barbie-pink);
border-radius: calc(3 * var(--rw));
box-shadow: calc(6 * var(--rw)) calc(6 * var(--rw)) 0 rgba(0, 0, 0, 0.2);
z-index: 0;
}
.lp-barbie__card-title {
position: absolute;
z-index: 5;
margin: 0;
}
.lp-barbie__card-title-img {
display: block;
position: relative;
height: auto;
}
/* Narrow Cateye (SP) */
.lp-barbie__card--narrow .lp-barbie__card-title {
top: calc(25 * var(--rw));
left: calc(-5 * var(--rw));
}
.lp-barbie__card--narrow .lp-barbie__card-title-img {
top: calc(-45 * var(--rw)); /* ← 位置微調整(SP)：下方向は + 、上方向は - */
left: calc(-4 * var(--rw)); /* ← 位置微調整(SP)：右方向は + 、左方向は - */
width: calc(324 * var(--rw));
}
/* Bold Cateye (SP) */
.lp-barbie__card--bold .lp-barbie__card-title {
top: calc(28 * var(--rw));
left: calc(-5 * var(--rw));
}
.lp-barbie__card--bold .lp-barbie__card-title-img {
top: calc(-40 * var(--rw)); /* ← 位置微調整(SP)：下方向は + 、上方向は - */
left: calc(15 * var(--rw)); /* ← 位置微調整(SP)：右方向は + 、左方向は - */
width: calc(270 * var(--rw));
}
/* Butterfly (SP) */
.lp-barbie__card--butterfly .lp-barbie__card-title {
top: calc(43 * var(--rw));
left: calc(-5 * var(--rw));
}
.lp-barbie__card--butterfly .lp-barbie__card-title-img {
top: calc(-48 * var(--rw)); /* ← 位置微調整(SP)：下方向は + 、上方向は - */
left: calc(15 * var(--rw)); /* ← 位置微調整(SP)：右方向は + 、左方向は - */
width: calc(200 * var(--rw));
}
.lp-barbie__card-badge {
position: absolute;
top: calc(17 * var(--rw));
right: calc(5 * var(--rw));
left: auto;
width: calc(80 * var(--rw));
height: calc(80 * var(--rw));
transform: rotate(14.97deg);
z-index: 4;
display: flex;
align-items: center;
justify-content: center;
}
.lp-barbie__card-badge-bg {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
animation: lp-barbie-badge-spin 25s linear infinite;
}
.lp-barbie__card-badge-text {
position: relative;
font-family: "league-gothic", "Oswald", sans-serif;
font-size: calc(14.77 * var(--rw));
color: var(--barbie-pink);
text-align: center;
line-height: 1;
letter-spacing: -0.1px;
}
.lp-barbie__card-inner {
position: relative;
box-sizing: border-box;
width: 100%;
min-height: calc(632 * var(--rw));
margin: 0;
background: transparent;
background-image: none;
padding: 0;
display: block;
grid-template-columns: none;
gap: 0;
}
.lp-barbie__card-inner::before {
content: "";
position: absolute;
left: calc(4 * var(--rw));
right: calc(4 * var(--rw));
top: calc(12 * var(--rw));
height: calc(680 * var(--rw));
background-image: url('data:image/svg+xml;utf8,');
background-repeat: no-repeat;
background-size: 100% 100%;
z-index: 0;
pointer-events: none;
}
/* ロゴ(z-index:1)の上に「枠線だけ」を z-index:2 で再描画して、
枠線と重なった範囲のロゴをマスクする。(PC inner::after と同じ仕組み)
下層: 不透明ピンクでロゴを確実に隠す
上層: 半透明白で薄ピンクの見た目を作る */
.lp-barbie__card-inner::after {
content: "";
position: absolute;
left: calc(4 * var(--rw));
right: calc(4 * var(--rw));
top: calc(12 * var(--rw));
height: calc(680 * var(--rw));
background-image:
url('data:image/svg+xml;utf8,'),
url('data:image/svg+xml;utf8,');
background-repeat: no-repeat, no-repeat;
background-size: 100% 100%, 100% 100%;
pointer-events: none;
z-index: 2;
}
/* color options — horizontal row at top */
ul.lp-barbie__card-options {
position: absolute;
left: 50%;
top: calc(105 * var(--rw));
transform: translateX(-50%);
display: flex;
flex-direction: row;
gap: calc(4 * var(--rw));
width: auto;
margin: 0;
z-index: 6;
}
.lp-barbie__card-option {
position: relative;
box-sizing: border-box;
width: calc(100 * var(--rw));
height: calc(63 * var(--rw));
border: calc(1.4 * var(--rw)) solid var(--barbie-border);
border-radius: calc(2.8 * var(--rw));
background: var(--barbie-white);
padding: 0;
cursor: pointer;
}
.lp-barbie__card-option.is-selected {
border-color: var(--barbie-pink);
box-shadow: 0 0 0 calc(1.4 * var(--rw)) var(--barbie-pink);
}
.lp-barbie__card-option.is-selected::after {
content: "";
position: absolute;
left: 50%;
bottom: calc(-9 * var(--rw));
top: auto;
right: auto;
width: 0;
height: 0;
transform: translateX(-50%);
background: none;
border-top: calc(9 * var(--rw)) solid var(--barbie-pink);
border-left: calc(7 * var(--rw)) solid transparent;
border-right: calc(7 * var(--rw)) solid transparent;
border-bottom: none;
}
.lp-barbie__card-option-img {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
.lp-barbie__card-option-img img {
width: 100%;
height: 100%;
object-fit: contain;
}
.lp-barbie__card-option-label {
position: absolute;
left: 50%;
bottom: calc(2 * var(--rw));
transform: translateX(-50%);
font-family: "M PLUS 2", "Noto Sans Japanese", sans-serif;
font-weight: 700;
font-size: calc(10 * var(--rw));
text-align: center;
white-space: nowrap;
}
/* main column */
.lp-barbie__card-main {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
/* gap: calc(7 * var(--rw)); */
padding-top: calc(180 * var(--rw));
z-index: 2;
}
.lp-barbie__card-name {
display: flex;
align-items: center;
gap: calc(4.8 * var(--rw));
font-family: "M PLUS 2", "Noto Sans Japanese", sans-serif;
font-weight: 700;
font-size: calc(18 * var(--rw));
}
.lp-barbie__card-name .dot {
display: inline-block;
width: calc(18.8 * var(--rw));
height: calc(18.8 * var(--rw));
border-radius: 9999px;
background: #000;
border: 1px solid var(--barbie-border);
}
.lp-barbie__card-name .dot--demi {
background: url(../img/browndemi.webp) center/cover no-repeat;
}
.lp-barbie__card-name .dot--pink {
background: var(--barbie-pink-dot);
}
.lp-barbie__card-name .dot--rosepink {
background: var(--barbie-rosepink-dot);
}
.lp-barbie__card-name .dot--white {
background: #fff;
border-color: #ccc;
}
.lp-barbie__card-sku {
font-family: "jins_next_ttregular", "Noto Sans Japanese", sans-serif;
font-size: calc(11 * var(--rw));
color: var(--barbie-black);
}
.lp-barbie__card-image {
position: relative;
width: calc(336 * var(--rw));
height: calc(118 * var(--rw));
background: var(--barbie-white);
margin-top: calc(8 * var(--rw));
overflow: hidden;
}
.lp-barbie__card-image img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: contain;
opacity: 0;
}
.lp-barbie__card-image img.is-active {
opacity: 1;
z-index: 1;
}
p.lp-barbie__card-desc {
font-family: "M PLUS 2", "Noto Sans Japanese", sans-serif;
font-size: calc(13 * var(--rw));
width: calc(320 * var(--rw));
text-align: center;
line-height: 1.3;
margin-top: calc(12 * var(--rw));
}
.lp-barbie__card-thumbs {
display: flex;
gap: calc(4 * var(--rw));
margin-top: calc(16 * var(--rw));
}
.lp-barbie__card-thumb {
position: relative;
width: calc(155 * var(--rw));
height: calc(70 * var(--rw));
border-radius: 9999px;
background: var(--barbie-pink-25);
display: flex;
align-items: center;
justify-content: center;
}
.lp-barbie__card-thumb img {
max-width: 100%;
max-height: 100%;
object-fit: contain;
border-radius: 9999px;
}
.lp-barbie__card-thumb-clip {
position: absolute;
inset: 0;
border-radius: 9999px;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
}
.lp-barbie__card-thumb-label {
position: absolute;
top: calc(-8 * var(--rw));
left: calc(10 * var(--rw));
font-family: "alkaline", "Caveat", cursive;
font-weight: 700;
font-size: calc(12 * var(--rw));
color: var(--barbie-pink);
transform: rotate(-6.93deg);
z-index: 2;
}
/* BUY NOW button */
.lp-barbie__card-buy {
position: absolute;
right: calc(18 * var(--rw));
top: calc(530 * var(--rw));
bottom: auto;
left: auto;
width: calc(135 * var(--rw));
height: calc(71 * var(--rw));
transform: rotate(-8.68deg);
display: flex;
align-items: center;
justify-content: center;
background: var(--barbie-cyan);
border-radius: 50%;
box-shadow: 0 calc(5 * var(--rw)) 0 rgba(0, 0, 0, 0.25);
overflow: hidden;
text-decoration: none;
z-index: 4;
}
.lp-barbie__card-buy::before {
content: "";
position: absolute;
top: calc(5 * var(--rw));
left: calc(2 * var(--rw));
right: calc(2 * var(--rw));
bottom: calc(1 * var(--rw));
border-radius: 50%;
background: rgba(0, 0, 0, 0.03);
pointer-events: none;
}
.lp-barbie__card-buy-text {
position: relative;
bottom: calc(-1 * var(--rw));
right: calc(5 * var(--rw));
font-family: "league-gothic", "Oswald", sans-serif;
font-size: calc(26 * var(--rw));
color: var(--barbie-white);
letter-spacing: 1px;
line-height: 1;
white-space: nowrap;
transform: translateY(calc(-1 * var(--rw)));
}
.lp-barbie__card-buy::after {
content: "";
position: absolute;
right: calc(18 * var(--rw));
top: 50%;
width: 0;
height: 0;
border-left: calc(8 * var(--rw)) solid var(--barbie-white);
border-top: calc(5 * var(--rw)) solid transparent;
border-bottom: calc(5 * var(--rw)) solid transparent;
transform: translateY(-50%);
}
/* Navi hearts — right side stack */
.lp-barbie__card-navi {
position: absolute;
right: calc(25 * var(--rw));
top: calc(187 * var(--rw));
left: auto;
display: flex;
flex-direction: column;
gap: calc(8 * var(--rw));
margin: 0;
padding: 0;
list-style: none;
z-index: 3;
}
.lp-barbie__card-navi-item {
position: relative;
width: calc(31 * var(--rw));
height: calc(28 * var(--rw));
cursor: pointer;
}
.lp-barbie__card-navi-item img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: contain;
}
.lp-barbie__card-navi-on {
display: none;
}
.lp-barbie__card-navi-item.is-active .lp-barbie__card-navi-on {
display: block;
}
.lp-barbie__card-navi-item.is-active .lp-barbie__card-navi-off {
display: none;
}
.lp-barbie__card-logo {
position: absolute;
/* SP レイアウトの全要素を純粋 --rw スケールに統一したので、
ロゴも純粋 --rw で配置(--rw=1 時の値=75 を維持)。
これにより画面幅が変わっても他要素との相対位置が一定に保たれる。 */
bottom: calc(75 * var(--rw));
left: calc(30 * var(--rw));
width: calc(180 * var(--rw));
transform: rotate(-1deg);
/* inner の内側(白い面)にも乗せたいので inner より上に出す。
枠線と重なった範囲だけは inner::after(z-index:2)が上から
被せてマスクする。 */
z-index: 1;
}
.lp-barbie__card-logo img {
margin: 0;
width: 90%;
opacity: 0.2;
}
/* sticker decorations — repositioned for SP */
.lp-barbie__card-sticker {
position: absolute;
height: auto;
z-index: 1;
pointer-events: none;
}
/* 純粋 --rw でスケール。--rw=1 時の値はピンクカード下端付近に配置される。 */
.lp-barbie__card-sticker--1 {
bottom: calc(40 * var(--rw));
left: calc(58 * var(--rw));
width: calc(37 * var(--rw));
}
.lp-barbie__card-sticker--2 {
bottom: calc(47 * var(--rw));
left: calc(102 * var(--rw));
width: calc(57 * var(--rw));
}
.lp-barbie__card-sticker--3 {
bottom: calc(50 * var(--rw));
left: calc(165 * var(--rw));
width: calc(40 * var(--rw));
}
/* ----- Accessories ----- */
.lp-barbie__accessories {
position: relative;
width: 100%;
height: calc(581 * var(--rw));
overflow: hidden;
background: var(--barbie-pink-light);
}
.lp-barbie__accessories-bg {
position: absolute;
inset: 0;
}
.lp-barbie__accessories-bg img {
width: 100%;
height: 100%;
object-fit: cover;
}
.lp-barbie__accessories-title {
position: absolute;
top: calc(56 * var(--rw));
left: 50%;
transform: translateX(-50%);
width: calc(300 * var(--rw));
margin: 0;
z-index: 2;
}
.lp-barbie__accessories-title img {
display: block;
width: 100%;
height: auto;
}
.lp-barbie__accessories-card {
position: absolute;
top: calc(102 * var(--rw));
left: 50%;
transform: translateX(-50%);
width: calc(360 * var(--rw));
height: calc(385 * var(--rw));
background: var(--barbie-white);
border-radius: calc(20 * var(--rw));
box-shadow: calc(6 * var(--rw)) calc(6 * var(--rw)) 0 rgba(0, 0, 0, 0.2);
padding: 0;
display: block;
overflow: hidden;
}
p.lp-barbie__accessories-heading {
position: relative;
z-index: 10;
font-family: "M PLUS 2", "Noto Sans Japanese", sans-serif;
font-weight: 700;
font-size: calc(18 * var(--rw));
text-align: center;
line-height: 1.4;
margin-top: calc(40 * var(--rw));
}
p.lp-barbie__accessories-note {
position: relative;
z-index: 10;
font-family: "M PLUS 2", "Noto Sans Japanese", sans-serif;
font-size: calc(13 * var(--rw));
color: var(--barbie-gray);
text-align: center;
margin-top: calc(3 * var(--rw));
line-height: 1.4;
}
.lp-barbie__accessories-images {
position: absolute;
left: 0;
top: calc(127 * var(--rw));
width: 100%;
height: calc(290 * var(--rw));
display: block;
margin: 0;
}
.lp-barbie__accessories-image {
position: absolute;
top: calc(-20 * var(--rw));
width: calc(350 * var(--rw));
height: calc(289 * var(--rw));
display: flex;
align-items: center;
justify-content: center;
}
.lp-barbie__accessories-image:first-child {
top: calc(1 * var(--rw));
left: calc(10 * var(--rw));
width: calc(180 * var(--rw));
transform: none;
}
.lp-barbie__accessories-image:last-child {
top: calc(-5 * var(--rw));
left: calc(210 * var(--rw));
width: calc(130 * var(--rw));
transform: none;
}
.lp-barbie__accessories-image img {
width: 100%;
height: 100%;
object-fit: contain;
transform: scale(1.05);
}
/* star decorations — repositioned for SP */
.lp-barbie__accessories-star {
position: absolute;
z-index: 2;
pointer-events: none;
}
.lp-barbie__accessories-star--1 {
top: calc(160 * var(--rw));
left: calc(43 * var(--rw));
width: calc(40 * var(--rw));
animation: lp-barbie-star-wobble-1 1.3s steps(1, end) infinite;
}
.lp-barbie__accessories-star--2 {
top: calc(185 * var(--rw));
left: calc(8 * var(--rw));
width: calc(33 * var(--rw));
animation: lp-barbie-star-wobble-2 0.8s steps(1, end) infinite;
animation-delay: -0.4s;
}
.lp-barbie__accessories-star--3 {
top: calc(110 * var(--rw));
left: calc(290 * var(--rw));
width: calc(69 * var(--rw));
animation: lp-barbie-star-wobble-3 1.7s steps(1, end) infinite;
animation-delay: -0.9s;
}
/* ----- Link section ----- */
.lp-barbie__link {
position: relative;
width: 100%;
height: calc(428 * var(--rw));
display: block;
padding: 0;
/* 共通フッター .footer-navigation の margin-top: 120px と相殺し、SP時の空白を解消 */
margin-bottom: -120px;
overflow: hidden;
background: var(--barbie-pink-light);
}
.lp-barbie__link-bg {
position: absolute;
inset: 0;
z-index: 0;
background-image: url(../img/saleinfo-bg.webp);
background-repeat: repeat-y;
background-position: center top;
background-size: 100% auto;
}
.lp-barbie__link-buttons {
position: absolute;
top: calc(46 * var(--rw));
left: 50%;
transform: translateX(-50%);
z-index: 1;
display: flex;
flex-direction: column;
gap: calc(24 * var(--rw));
margin: 0;
}
.lp-barbie__link .lp-barbie__link-button {
display: flex;
align-items: center;
justify-content: center;
width: calc(320 * var(--rw));
height: calc(66 * var(--rw));
background: var(--barbie-white);
color: var(--barbie-pink);
font-family: "M PLUS 2", "Noto Sans Japanese", sans-serif;
font-weight: 700;
font-size: calc(18 * var(--rw));
border-radius: calc(4 * var(--rw));
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
white-space: nowrap;
}
.lp-barbie__link .lp-barbie__link-pagetop {
position: absolute;
top: calc(262 * var(--rw));
left: 50%;
transform: translateX(-50%);
z-index: 1;
display: flex;
flex-direction: row;
align-items: center;
gap: calc(12 * var(--rw));
color: var(--barbie-white);
font-family: "M PLUS 2", "Noto Sans Japanese", sans-serif;
font-weight: 700;
font-size: calc(22 * var(--rw));
margin: 0;
white-space: nowrap;
}
.lp-barbie__link-pagetop-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: calc(40 * var(--rw));
height: calc(40 * var(--rw));
border-radius: 50%;
background: var(--barbie-white);
}
.lp-barbie__link-pagetop-icon img {
width: calc(12 * var(--rw));
height: auto;
}
.lp-barbie__link .lp-barbie__copyright {
position: absolute;
left: 50%;
bottom: calc(34 * var(--rw));
transform: translateX(-50%);
margin: 0;
z-index: 1;
width: fit-content;
}
.lp-barbie__link .lp-barbie__copyright img {
display: block;
width: calc(102 * var(--rw));
height: auto;
}
}