@charset "UTF-8";
.main-area .main-inner{
width: 100%;
}
.footer .page-top{
opacity: 0;
pointer-events: none;
}
/* =====================================================
LILY BROWN × MARY QUANT feature (2026/0805) style.css
計測ID スコープ: #LB260805maryquant （全セレクタの親）
単位・命名は coding-guidelines.md 準拠（SP特化型 calc(N * var(--formula)) 方式）
===================================================== */
/* ▼ -----------可変設定---------- ▼
.lp_variable は .lp-page と同じ要素に付与（クラスのまま） */
.lp_variable {
--pc-width: 1400; /* PCデザイン幅 */
--sp-width: 750; /* SPデザイン幅 */
--pc-artboard-width: 490; /* PC時の中央コンテンツ列 幅 */
--sp-artboard-width: 750; /* SP時の中央コンテンツ列 幅 */
--formula: calc(var(--variable) * var(--ratio)); /* SP,PC共通箇所の可変式 */
--formula_pc: calc(var(--variable) * 1); /* PCデザイン基準の可変式 */
}
/* PC画面幅 1401px以上 固定 */
@media (min-width: 1401px) {
.lp_variable {
--ratio: calc(var(--pc-artboard-width) / var(--sp-artboard-width));
--variable: 1px;
}
}
/* PC画面幅 768〜1400px 可変 */
@media (min-width: 768px) and (max-width: 1400px) {
.lp_variable {
--ratio: calc(var(--pc-artboard-width) / var(--sp-artboard-width));
--variable: calc(100vw / var(--pc-width));
}
}
/* SP画面幅 767px以下 可変 */
@media (max-width: 767px) {
.lp_variable {
--ratio: 1;
--variable: calc(100vw / var(--sp-width));
}
}
/* ▲ -----------可変設定---------- ▲ */
/* ▼ -----------カスタムプロパティ（LPルート）---------- ▼ */
#LB260805maryquant {
--color-text: #000;
--color-heading: #565656;
--color-bg: #fff;
--color-lavender: #eef4fa;
--color-pink: #f4e4e4;
--color-offwhite: #f8f7f6;
--font-serif: ivypresto-headline, serif;
--font-jp: hiragino-kaku-gothic-pron, sans-serif;
--font-roboto: "Roboto", "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", sans-serif;
--lp-header-offset: 0px;
/* ▼ 重ね順スケール（LP内で完結。値は下記以外を使わない）▼
通常フローでは基本的に「後に書いた要素が上」に重なる。
負の margin で意図的に重ねている箇所だけ、下記で前後を明示する。 */
--z-deco-back: -1; /* 写真の下に敷く装飾（.lp-block 内） */
--z-photo: 1; /* 写真ブロック・スライダー */
--z-lift: 2; /* 重なった写真のうち手前に出すもの */
--z-deco-front: 3; /* 写真の上に重ねる装飾 */
--z-text: 4; /* 写真に重なる見出し */
--z-rail: 5; /* PC左右レール（追従） */
--z-float: 10; /* CHECK ALL ITEMS 追従ボタン（LP内の最前面） */
}
/* ▲ -----------カスタムプロパティ---------- ▲ */
/* ▼ -----------LPスコープ リセット---------- ▼ */
#LB260805maryquant * {
box-sizing: border-box;
margin: 0;
padding: 0;
font: inherit;
letter-spacing: inherit;
font-feature-settings: "palt";
}
#LB260805maryquant img {
display: block;
width: 100%;
height: auto;
object-fit: cover;
-webkit-touch-callout: none;
-webkit-user-select: none;
user-select: none;
transition: unset;
}
#LB260805maryquant picture { display: block; }
#LB260805maryquant a { color: inherit; text-decoration: none;transition: .6s; }
#LB260805maryquant a:hover{
opacity: .7;
}
@media (max-width: 767px) {
#LB260805maryquant a:hover{
opacity: 1;
}
}
#LB260805maryquant button {
padding: 0;
cursor: pointer;
appearance: none;
color: inherit;
background-color: unset;
border: unset;
font: inherit;
}
@media (min-width: 768px) { #LB260805maryquant .is-hidden--desktop { display: none !important; } }
@media (max-width: 767px) { #LB260805maryquant .is-hidden--mobile { display: none !important; } }
/* ▲ -----------LPスコープ リセット---------- ▲ */
/* ▼ -----------ベース---------- ▼ */
#LB260805maryquant {
color: var(--color-text);
background-color: var(--color-bg);
font-family: var(--font-jp);
line-height: 1.6;
letter-spacing: 0.04em;
/* 横はみ出しは各 .lp-ab (overflow:hidden) で閉じる。
ルートに overflow を掛けると overflow-y が暗黙 auto 化し
左右レール(position:sticky)の追従が壊れるため掛けない。 */
/* LP内の重ね順をこの要素の中に閉じ込める（スタッキングコンテキストを作る）。
ルートは position:static のままなので、サイト側の position 指定された
ヘッダー・ポップアップ・モーダルは常にLPより前面に描画される。
※ isolation を明示しないと、下の fadein アニメーション（opacity）が
暗黙のスタッキングコンテキストを作っている状態に依存してしまい、
prefers-reduced-motion 時（animation:none）にLP内の z-index が
ページ全体へ漏れてヘッダーを覆ってしまう。 */
isolation: isolate;
}
@media (prefers-reduced-motion: reduce) {
#LB260805maryquant { animation: none; }
}
.js-display-anime{
opacity: 0;
transition-delay: 0s;
transition: opacity 1s ease-in, transform 1s ease-in;
will-change: opacity, transform, filter;
}
.js-display-anime.is-active{
opacity: 1;
}
#LB260805maryquant .bg-w{
background-color: white;
}
/* ▲ -----------ベース---------- ▲ */
/* ▼ -----------レイアウト土台（3カラム）---------- ▼ */
#LB260805maryquant .lp-inner {
/* width: calc(var(--sp-artboard-width) * var(--formula)); */
margin-inline: auto;
width: 100%;
}
@media (min-width: 768px) {
#LB260805maryquant .lp-inner {
width: calc(var(--pc-artboard-width) * var(--formula_pc));
}
#LB260805maryquant .lp-layout {
display: grid;
align-items: start;
grid-template-columns: 1fr calc(var(--pc-artboard-width) * var(--formula_pc)) 1fr;
background: var(--color-lavender);
}
}
@media (min-width: 1401px) {
#LB260805maryquant .lp-layout {
/* max-width: calc(1400 * var(--formula_pc)); */
margin-inline: auto; }
}
#LB260805maryquant .lp-layout__primary { overflow-x: clip; }
/* 左右レール（PC追従／SP非表示） */
#LB260805maryquant .lp-layout__sub { display: none; }
@media (min-width: 768px) {
#LB260805maryquant .lp-layout__sub {
display: grid;
place-items: center;
position: sticky;
top: var(--lp-header-offset, 0px);
height: calc(100dvh - var(--lp-header-offset, 0px));
overflow: hidden;
z-index: var(--z-rail); /* 追従要素なのでキャンバス（0〜4）より前面に置く */
}
}
/* ▲ -----------レイアウト土台---------- ▲ */
/* ▼ -----------PCレール（ロゴ / リンク・出現制御）---------- ▼ */
#LB260805maryquant .js-rail { opacity: 0; transition: opacity 0.6s ease; }
#LB260805maryquant .js-rail.is-visible { opacity: 1; }
#LB260805maryquant .lp-rail-logo { width: calc(242 * var(--formula_pc)); }
#LB260805maryquant .lp-rail-logo img { width: 100%; height: auto; }
#LB260805maryquant .lp-rail-links {
display: flex;
flex-direction: column;
gap: 0;
font-family: var(--font-serif);
color: var(--color-heading);
font-size: calc(26 * var(--formula_pc));
letter-spacing: 0.02em;
font-weight: 300;
font-style: normal;
margin-top: calc(-5 * var(--formula_pc));
}
#LB260805maryquant .lp-rail-links__item {
display: inline-flex;
align-items: center;
gap: calc(28 * var(--formula_pc));
white-space: nowrap;
transition: opacity 0.3s;
}
#LB260805maryquant .lp-rail-links__item.all-item-btn{
text-align: center;
margin: calc(20 * var(--formula_pc)) auto 0;
}
#LB260805maryquant .lp-rail-links__item:hover { opacity: 0.6; }
@media (max-width: 767px) {
#LB260805maryquant .lp-rail-links__item:hover { opacity: 1; }
}
#LB260805maryquant .lp-rail-links__item img { width: calc(11 * var(--formula_pc)); height: auto; }
/* ▲ -----------PCレール---------- ▲ */
/* ▼ =========== レイアウト（通常フロー） =========== ▼
セクションは高さ auto。中身は上から下へ通常フローで積み上がる。
・縦位置 = 直前の要素の下端からの margin-top
・横位置 = margin-left + width
・背景帯 = .lp-band ラッパーの背景色／背景画像（背景専用要素は持たない）
・写真とテキストが重なる箇所は「負の margin」で重ねる
（重なりの前後は下の z-index スケールで明示する）
・並列に並ぶものは Flexbox（.lp-row）／Grid（.lp-grid）
position:absolute は「どうしても重ねる必要がある装飾（.lp-deco--pin）」
だけに限定し、基準は必ず直近の親（.lp-block / .lp-band）にする。
数値もその親からの小さなオフセットになる。
========================================================= */
#LB260805maryquant .lp-canvas { position: relative; width: 100%; }
#LB260805maryquant .lp-ab {
width: 100%;
overflow: hidden; /* 帯の左右はみ出しを閉じる */
}
/* 帯・ブロックは中の margin を内側で閉じる（親へ抜けさせない）。
position:relative は内側の .lp-deco--pin の基準を兼ねる。 */
#LB260805maryquant .lp-band,
#LB260805maryquant .lp-block {
position: relative;
z-index: var(--z-photo);
display: flow-root;
}
#LB260805maryquant .remove_content { display: contents; }
/* --- 並列レイアウト --- */
#LB260805maryquant .lp-grid { display: grid; }
#LB260805maryquant .lp-row { display: flex; }
/* --- キャンバス要素の見た目 --- */
#LB260805maryquant .lp-shot { display: block; overflow: hidden; }
#LB260805maryquant .lp-shot img { width: 100%; height: 100%; object-fit: cover; }
#LB260805maryquant .lp-slider { z-index: var(--z-photo); }
/* 装飾パーツ。既定はフロー（通常配置）。 */
#LB260805maryquant .lp-deco {
display: block;
position: relative;
z-index: var(--z-deco-front);
pointer-events: none;
}
#LB260805maryquant .lp-deco img { width: 100%; height: 100%; object-fit: contain; }
/* 写真に重ねる装飾だけ、直近の .lp-block / .lp-band を基準に絶対配置する */
#LB260805maryquant .lp-deco--pin { position: absolute; }
/* 写真の下に敷く装飾 */
#LB260805maryquant .lp-deco--back { z-index: var(--z-deco-back); }
/* ▲ =========== レイアウト =========== ▲ */
/* ▼ -----------テキスト（役割別）---------- ▼ */
#LB260805maryquant .lp-h {
font-family: var(--font-serif);
font-weight: 300;
font-style: normal;
color: var(--color-heading);
font-size: calc(82 * var(--formula));
line-height: .9;
letter-spacing: 0.02em;
text-align: center;
white-space: nowrap; /* 折返しで直下の写真に被らないよう1行維持(
指定は保持) */
}
/* 縦組み見出し（Treat Yourself Today.） */
#LB260805maryquant .lp-h--vertical {
writing-mode: vertical-rl;
text-align: left;
line-height: 1.1;
white-space: nowrap;
}
#LB260805maryquant .lp-lead {
font-family: var(--font-jp);
color: var(--color-text);
font-size: calc(26 * var(--formula));
line-height: 1.9;
letter-spacing: 0.04em;
text-align: center;
font-feature-settings: normal;
}
#LB260805maryquant .lp-lead.lead-txt-margin{
margin-top: calc(46 * var(--formula));
display: block;
}
/* リード開閉ブロック（clamp + View All / Close トグル） */
#LB260805maryquant .lp-lead-block {
font-size: calc(26 * var(--formula));
text-align: center;
}
#LB260805maryquant .lp-lead-block .lp-lead {
overflow: hidden;
max-height: calc(21 * 1.9 * 6 * var(--formula)); /* 約6行 */
-webkit-mask-image: linear-gradient(180deg, #000 22%, transparent 100%);
mask-image: linear-gradient(180deg, #000 22%, transparent 100%);
transition: max-height 0.5s ease;
line-height: 1.75;
}
#LB260805maryquant .lp-lead-block.is-open .lp-lead {
max-height: calc(26 * 1.9 * 20 * var(--formula));
-webkit-mask-image: none;
mask-image: none;
}
#LB260805maryquant .lp-lead-toggle {
display: inline-block;
margin-top: calc(27 * var(--formula));
font-family: var(--font-serif);
font-weight: 300;
color: var(--color-heading);
font-size: calc(40 * var(--formula));
letter-spacing: 0.04em;
}
#LB260805maryquant .lp-lead-block.is-open .lp-lead-toggle{
margin-top: calc(36 * var(--formula));
}
#LB260805maryquant .lp-lead-toggle__label{
display: flex;
align-items: center;
}
#LB260805maryquant .lp-lead-toggle__label::after {
content: "";
background-image: url("../img/arrow-under-icon.svg");
width: calc(38 * var(--formula));
height: calc(20 * var(--formula));
background-repeat: no-repeat;
display: block;
vertical-align: middle;
margin-left: calc(27 * var(--formula));
background-size: cover;
margin-top: calc(4 * var(--formula));
}
#LB260805maryquant .lp-lead-block.is-open .lp-lead-toggle__label::after
{
content: "";
background-image: url("../img/arrow-top-icon.svg");
margin-top: calc(1 * var(--formula));
}
/* 通常フローではテキストの行数がそのまま下の要素の位置になる。
改行位置はデザインの
で決まっているので、フォント差による
意図しない折返しで縦の間隔がずれないよう1行維持する。 */
#LB260805maryquant .lp-credit {
font-family: var(--font-serif);
color: var(--color-heading);
font-size: calc(24 * var(--formula));
line-height: 1.25;
letter-spacing: 0.02em;
text-align: center;
white-space: nowrap;
margin-top: calc(30 * var(--formula)) !important;
margin-left: auto !important;
margin-right: auto;
font-weight: 300;
}
/* 幅の狭い縦積みクレジット（Hair pin）だけは折返して組む */
#LB260805maryquant .lp-credit--column { white-space: normal; }
#LB260805maryquant .lp-credit a {
margin-right: calc(20 * var(--formula));
transition: opacity 0.3s; }
#LB260805maryquant .lp-credit a.m-r-none{
margin-right: 0;
}
#LB260805maryquant .lp-credit a:hover { opacity: 0.6; }
@media (max-width: 767px) {
#LB260805maryquant .lp-credit a:hover { opacity: 1; }
}
#LB260805maryquant .lp-link {
font-family: var(--font-serif);
color: var(--color-heading);
font-size: calc(40 * var(--formula));
letter-spacing: 0.04em;
text-align: center;
white-space: nowrap;
font-weight: 300;
font-style: normal;
}
#LB260805maryquant .lp-link a { transition: opacity 0.3s; }
#LB260805maryquant .lp-link a:hover { opacity: 0.6; }
@media (max-width: 767px) {
#LB260805maryquant .lp-link a:hover { opacity: 1; }
}
#LB260805maryquant .lp-release {
font-family: var(--font-jp);
color: var(--color-heading);
font-size: calc(34 * var(--formula));
letter-spacing: 0.06em; /* 0.14emはピンク帯からはみ出す(2行折返し)ため縮小 */
text-align: center;
font-weight: 600;
white-space: nowrap;
}
#LB260805maryquant .lp-staff {
font-family: var(--font-serif);
color: var(--color-heading);
font-size: calc(24 * var(--formula));
line-height: 1.9;
letter-spacing: 0.04em;
text-align: center;
white-space: nowrap;
font-weight: 300;
font-style: normal;
}
#LB260805maryquant .lp-news {
font-family: var(--font-roboto);
color: #6b6b6a;
font-size: calc(20 * var(--formula));
line-height: 1.7;
letter-spacing: 0.02em;
white-space: nowrap;
}
#LB260805maryquant .lp-topics {
font-family: var(--font-roboto);
color: var(--color-text);
font-size: calc(24 * var(--formula));
letter-spacing: 0.12em;
text-align: center;
white-space: nowrap;
}
/* ▲ -----------テキスト---------- ▲ */
/* ▼ -----------特殊シェイプ---------- ▼ */
#LB260805maryquant .is-oval { border-radius: 50%; overflow: hidden; }
#LB260805maryquant .is-arch {
border-radius: 50% 50% 0 0 / 40% 40% 0 0;
overflow: hidden;
border: 1px solid rgba(86, 86, 86, 0.55); /* デザインのアーチ縁取り */
}
#LB260805maryquant .is-organic { border-radius: calc(40 * var(--formula)); overflow: hidden; }
/* ▲ -----------特殊シェイプ---------- ▲ */
/* ▼ -----------スライダー（Swiper）---------- ▼ */
#LB260805maryquant .lp-slider { overflow: hidden; }
#LB260805maryquant .lp-slider .swiper-wrapper,
#LB260805maryquant .lp-slider .swiper-slide { height: 100%; }
/* 隣ちら見せ(peek)のスライド幅。--sw は各スライダーの配置定義で指定する。
Swiper 初期化後は Swiper が幅を書き込むため、これは初期表示のちらつき防止。 */
#LB260805maryquant .lp-slider.is-peek .swiper-slide { width: calc(var(--sw) * var(--formula)); }
/* スライダー内の写真はスライドいっぱいに敷くだけ */
#LB260805maryquant .swiper-slide .lp-shot { width: 100%; height: 100%; }
#LB260805maryquant .lp-slider.js-topslide.slide-01 img{
width: calc(450 * var(--formula));
}
#LB260805maryquant .lp-slider.js-topslide02.slide-02 img{
width: calc(530 * var(--formula));
}
#LB260805maryquant .lp-slider.js-topslide01.slide-03 img{
width: calc(670 * var(--formula));
}
#LB260805maryquant .lp-slider .swiper-pagination{
text-align: right;
padding-right: calc(14 * var(--formula));
bottom: calc(21 * var(--formula));
}
#LB260805maryquant .lp-slider .swiper-pagination span{
padding: 0 calc(7 * var(--formula));
}
#LB260805maryquant .swiper-pagination-bullet {
width: auto;
height: auto;
background: transparent;
opacity: 0.6;
transition: opacity 0.3s ease;
}
#LB260805maryquant .swiper-pagination-bullet-active {
opacity: 1;
}
#LB260805maryquant .swiper-pagination-bullet img {
display: block;
width: calc(26 * var(--formula));
height: auto;
}
/* 青枠(横スライド)は中央+隣ちら見せ。fade(★)はクロスフェード（Swiper側で制御） */
#LB260805maryquant .lp-slider.is-peek .swiper-slide { transition-timing-function: ease; }
/* ▲ -----------スライダー---------- ▲ */
/* ▼ -----------CHECK ALL ITEMS 追従ボタン（SPのみ）---------- ▼
指示書: MVが見切れた辺りでふわっと表示→追従→ページ下部で非表示。
※デザインは花型。白フラワー素材が無いため白丸で近似（実素材提供時に差替え）。 */
#LB260805maryquant .lp-checkall { display: none; }
@media (max-width: 767px) {
#LB260805maryquant .lp-checkall {
display: grid;
place-items: center;
position: fixed;
right: calc(-3 * var(--formula));
bottom: calc(-8 * var(--formula));
width: calc(308 * var(--formula));
/* background: #fff;
box-shadow: 0 calc(4 * var(--formula)) calc(20 * var(--formula)) rgba(0, 0, 0, 0.14); */
color: var(--color-heading);
font-family: var(--font-serif);
font-size: calc(26 * var(--formula));
line-height: 1.28;
letter-spacing: 0.04em;
text-align: center;
opacity: 0;
pointer-events: none;
transition: opacity 0.5s ease;
z-index: var(--z-float); /* LP内の最前面。LP外のヘッダー等は超えない */
}
#LB260805maryquant .lp-checkall.is-visible { opacity: 1; pointer-events: auto; }
}
/* ▲ -----------CHECK ALL ITEMS---------- ▲ */
/* ▼ =========== 配置定義（余白・幅） =========== ▼
デザイン数値だけを置く場所。単位はアートボード実寸で、
var(--formula) との掛け算で SP/PC に追従する。
margin-top : 直前の要素の下端からの間隔（負値＝意図的に重ねる）
margin-left : セクション左端からの位置
width/height: 要素の大きさ
top/left : .lp-deco--pin のみ。直近の親からのオフセット
クラス名は s<セクション番号>-<役割>-<通し番号>（上からの並び順）。
デザイン修正はこのブロックの数値だけを触れば済む。
============================================== */
/* ========== SECTION 1 ========== */
#LB260805maryquant .s1-band-01 { padding-bottom: calc(123 * var(--formula)); background-color: var(--color-lavender); }
/* #LB260805maryquant .s1-shot-01 { width: calc(750 * var(--formula)); height: calc(1000 * var(--formula)); } */
#LB260805maryquant .s1-deco-01 { top: calc(34 * var(--formula)); left: calc(248 * var(--formula)); width: calc(254 * var(--formula)); height: calc(164 * var(--formula)); } /* va-14.png（親ブロック基準） */
#LB260805maryquant .s1-deco-02 { margin-top: calc(-8 * var(--formula)); margin-left: calc(-15 * var(--formula)); width: calc(910 * var(--formula)); height: calc(103 * var(--formula)); } /* va-10.png */
#LB260805maryquant .s1-h-01 {
margin: calc(80 * var(--formula)) auto 0; width: calc(348 * var(--formula)); } /* Afternoon Tea Moment */
#LB260805maryquant .s1-lead-01 { margin: calc(68 * var(--formula)) auto 0; width: calc(670 * var(--formula)); } /* 午後の優雅なひとときを、 より特別に、より華やかに。 60年代ロンド… */
#LB260805maryquant .s1-release-band {
margin-top: calc(82 * var(--formula));
height: calc(90 * var(--formula));
background: url(../img/va-13.png) center / 100% 100% no-repeat; }
#LB260805maryquant .s1-release-01 {
margin: calc(23 * var(--formula)) auto 0; } /* 8.7 fri 全国発売 */
#LB260805maryquant .s1-deco-04 { margin-top: calc(100 * var(--formula)); margin-left: calc(345 * var(--formula)); width: calc(60 * var(--formula)); height: calc(58 * var(--formula)); } /* va-19.png */
#LB260805maryquant .s1-frame-01 { margin-top: calc(108 * var(--formula)); }
#LB260805maryquant .s1-shot-02 { margin-left: calc(150 * var(--formula)); width: calc(450 * var(--formula)); height: calc(600 * var(--formula)); } /* ph-31.png */
#LB260805maryquant .s1-deco-05 { top: calc(-8 * var(--formula)); left: calc(142 * var(--formula)); width: calc(466 * var(--formula)); height: calc(616 * var(--formula)); } /* va-04.png（親ブロック基準） */
#LB260805maryquant .s1-slider-blk-01 { margin-top: calc(128 * var(--formula)); }
#LB260805maryquant .s1-slider-01 { width: calc(750 * var(--formula)); height: calc(1000 * var(--formula)); } /* ph-50.png */
#LB260805maryquant .s1-deco-06 { top: calc(955 * var(--formula)); left: calc(664 * var(--formula)); width: calc(66 * var(--formula)); height: calc(25 * var(--formula)); } /* va-22.png（親ブロック基準） */
#LB260805maryquant .s1-h-02 {
margin: calc(123 * var(--formula)) auto 0;
width: calc(594 * var(--formula));
position: relative; z-index: var(--z-text); } /* A Gentle Afternoon */
#LB260805maryquant .s1-shot-03 {
margin: calc(-136 * var(--formula)) auto 0;
width: calc(505 * var(--formula));
} /* ph-34.png */
#LB260805maryquant .s1-credit-01 { margin-top: calc(25 * var(--formula)); margin-left: calc(95 * var(--formula)); width: calc(560 * var(--formula)); } /* Jacket 19,800yen Knit tops 11,880y… */
#LB260805maryquant .s1-band-02 { padding-top: calc(220 * var(--formula)); padding-bottom: calc(209 * var(--formula)); background: url(../img/va-01.png) center / 100% 100% no-repeat; }
#LB260805maryquant .s1-slider-02 {
margin-left: calc(145 * var(--formula)); width: calc(460 * var(--formula)); height: calc(613 * var(--formula));
z-index: 4;
position: relative;
} /* ph-35.png */
#LB260805maryquant .s1-slider-blk-02 { margin-top: calc(-80 * var(--formula)); }
#LB260805maryquant .s1-shot-04 { width: calc(750 * var(--formula)); height: calc(1000 * var(--formula)); } /* ph-49.png */
#LB260805maryquant .s1-deco-08 { top: calc(35 * var(--formula)); left: calc(519 * var(--formula)); width: calc(66 * var(--formula)); height: calc(25 * var(--formula)); } /* va-23.png（親ブロック基準） */
#LB260805maryquant .s1-credit-02 { margin-top: calc(22 * var(--formula)); margin-left: calc(96 * var(--formula)); width: calc(558 * var(--formula)); } /* Cardigan 14,960yen Tops 14,960yen … */
#LB260805maryquant .s1-band-03 { padding-bottom: calc(126 * var(--formula)); background-color: var(--color-pink); }
#LB260805maryquant .s1-deco-09 { margin-left: calc(-15 * var(--formula)); width: calc(910 * var(--formula)); height: calc(103 * var(--formula)); } /* va-08.png */
#LB260805maryquant .s1-shot-05 { margin-top: calc(80 * var(--formula)); width: calc(750 * var(--formula)); height: calc(562 * var(--formula)); } /* ph-37.png */
#LB260805maryquant .s1-slider-03 {
margin-left: calc(40 * var(--formula));
margin-top: calc(61 * var(--formula)); width: calc(750 * var(--formula)); height: calc(600 * var(--formula));; --sw: 450 } /* ph-22.png */
#LB260805maryquant .s1-credit-03 { margin-top: calc(22 * var(--formula)); margin-left: calc(102 * var(--formula)); width: calc(545 * var(--formula)); } /* Dress 18,920yen Glasses 7,920yen B… */
#LB260805maryquant .s1-shot-06 {
margin: calc(120 * var(--formula)) auto 0;
width: calc(686 * var(--formula));
} /* ph-33.png */
#LB260805maryquant .s1-h-03 { margin-top: calc(-276 * var(--formula)); margin-left: calc(185 * var(--formula)); width: calc(379 * var(--formula)); position: relative; z-index: var(--z-text); } /* Every Cake Looks Lovely. */
#LB260805maryquant .s1-slider-blk-03 { margin-top: calc(120 * var(--formula)); }
#LB260805maryquant .s1-slider-04 { width: calc(750 * var(--formula)); height: calc(1000 * var(--formula)); } /* ph-64.png */
#LB260805maryquant .s1-deco-10 { top: calc(955 * var(--formula)); left: calc(664 * var(--formula)); width: calc(66 * var(--formula)); height: calc(25 * var(--formula)); } /* va-24.png（親ブロック基準） */
#LB260805maryquant .s1-credit-04 { margin-top: calc(22 * var(--formula)); margin-left: calc(153 * var(--formula)); width: calc(443 * var(--formula)); } /* Cardigan 14,960yen Dress 18,920yen… */
#LB260805maryquant .s1-shot-07 { margin-top: calc(125 * var(--formula)); width: calc(590 * var(--formula)); height: calc(787 * var(--formula)); } /* ph-30.png */
#LB260805maryquant .s1-shot-08 { margin-top: calc(60 * var(--formula)); margin-left: calc(240 * var(--formula)); width: calc(510 * var(--formula)); height: calc(680 * var(--formula)); position: relative; z-index: var(--z-lift); } /* ph-29.png */
#LB260805maryquant .s1-shot-09 {
position: relative;
z-index: 2;
margin-top: calc(-340 * var(--formula)); width: calc(350 * var(--formula)); height: calc(438 * var(--formula)); } /* ph-28.png */
#LB260805maryquant .s1-credit-05 { margin-top: calc(28 * var(--formula)); margin-left: calc(113 * var(--formula)); width: calc(523 * var(--formula)); } /* Hoodie 15,950yen Tops 7,920yen Top… */
#LB260805maryquant .s1-deco-11 { margin-left: calc(-15 * var(--formula)); width: calc(910 * var(--formula)); height: calc(103 * var(--formula)); } /* va-11.png */
#LB260805maryquant .s1-h-04 {
padding-top: calc(83 * var(--formula));
margin-left: calc(14 * var(--formula));
width: calc(713 * var(--formula));
position: relative;
z-index: var(--z-text);
} /* The Sweetest Escape. */
#LB260805maryquant .s1-grid-01 { margin-top: calc(-33.56 * var(--formula)); display: grid; grid-template-columns: repeat(2, calc(365 * var(--formula))); gap: calc(20 * var(--formula)) calc(20 * var(--formula)); justify-content: start; margin-left: calc(0 * var(--formula)); }
#LB260805maryquant .s1-shot-10 { height: calc(487 * var(--formula)); } /* ph-41.png */
#LB260805maryquant .s1-shot-11 { height: calc(487 * var(--formula)); } /* ph-40.png */
#LB260805maryquant .s1-shot-12 { height: calc(487 * var(--formula)); } /* ph-38.png */
#LB260805maryquant .s1-shot-13 { height: calc(487 * var(--formula)); } /* ph-39.png */
/* ========== SECTION 2 ========== */
#LB260805maryquant .s2-shot-01 {
margin: calc(120 * var(--formula)) auto 0; width: calc(630 * var(--formula)); height: calc(840 * var(--formula)); } /* ph-48.png */
#LB260805maryquant .s2-slider-01 { margin-top: calc(120 * var(--formula)); width: calc(758 * var(--formula)); height: calc(707 * var(--formula));; --sw: 530 } /* ph-17.png */
#LB260805maryquant .s2-credit-01 { margin-top: calc(28 * var(--formula)); margin-left: calc(62 * var(--formula)); width: calc(626 * var(--formula)); } /* Jacket 19,800yen Attached collar 7… */
#LB260805maryquant .s2-band-01 { margin-top: calc(123 * var(--formula)); padding-bottom: calc(123 * var(--formula)); background-color: var(--color-lavender); }
#LB260805maryquant .s2-deco-01 { margin-left: calc(-15 * var(--formula)); width: calc(910 * var(--formula)); height: calc(103 * var(--formula)); } /* va-07.png */
#LB260805maryquant .s2-slider-blk-01 { margin-top: calc(80 * var(--formula)); }
#LB260805maryquant .s2-slider-02 { margin-left: calc(140 * var(--formula)); width: calc(610 * var(--formula)); height: calc(813 * var(--formula)); } /* ph-47.png */
#LB260805maryquant .s2-deco-02 { top: calc(768 * var(--formula)); left: calc(664 * var(--formula)); width: calc(66 * var(--formula)); height: calc(25 * var(--formula)); } /* va-20.png（親ブロック基準） */
#LB260805maryquant .s2-shot-02 { margin-top: calc(60 * var(--formula)); width: calc(750 * var(--formula)); height: calc(562 * var(--formula)); } /* ph-36.png */
#LB260805maryquant .s2-credit-02 { margin-top: calc(29 * var(--formula)); margin-left: calc(108 * var(--formula)); width: calc(534 * var(--formula)); } /* Hoodie 15,950yen Shirt 12,980yen S… */
#LB260805maryquant .s2-frame-01 { margin-top: calc(117 * var(--formula));position: relative; }
#LB260805maryquant .s2-shot-03 { margin: 0 auto; width: calc(486 * var(--formula)); } /* ph-42.png */
#LB260805maryquant .s2-deco-03 { top: calc(-8 * var(--formula)); left: calc(132 * var(--formula)); width: calc(486 * var(--formula)); height: calc(643 * var(--formula)); } /* va-03.png（親ブロック基準） */
#LB260805maryquant .s2-h-01 {
text-align: left;
margin-top: calc(-203 * var(--formula)); margin-left: calc(40 * var(--formula)); width: calc(366 * var(--formula)); position: absolute; z-index: var(--z-text);
bottom: calc(-92 * var(--formula));
pointer-events: none;
} /* Time for Something Sweet. */
#LB260805maryquant .s2-credit-03 {
writing-mode: vertical-rl;
text-align: left;
line-height: 1.1;
white-space: nowrap;
z-index: 3;width: calc(27 * var(--formula));
position: absolute;
bottom: 0;
right: calc(78 * var(--formula));
} /* Hair pin 7,480yen */
#LB260805maryquant .s2-shot-04 { margin-top: calc(212 * var(--formula)); width: calc(750 * var(--formula)); height: calc(1000 * var(--formula)); } /* ph-46.png */
#LB260805maryquant .s2-slider-blk-02 { margin-top: calc(80 * var(--formula)); }
#LB260805maryquant .s2-slider-03 { margin-left: calc(60 * var(--formula)); width: calc(630 * var(--formula)); height: calc(840 * var(--formula)); } /* ph-45.png */
#LB260805maryquant .s2-deco-04 { top: calc(795 * var(--formula)); left: calc(604 * var(--formula)); width: calc(66 * var(--formula)); height: calc(25 * var(--formula)); } /* va-21.png（親ブロック基準） */
#LB260805maryquant .s2-credit-04 { margin-top: calc(27 * var(--formula)); margin-left: calc(113 * var(--formula)); width: calc(524 * var(--formula)); } /* Tops 8,910yen Dress 23,980yen Boot… */
#LB260805maryquant .s2-row-01 { margin-top: calc(118 * var(--formula)); display: flex; align-items: flex-start; margin-left: calc(0 * var(--formula)); gap: calc(25 * var(--formula)); }
#LB260805maryquant .s2-shot-05 { width: calc(550 * var(--formula)); height: calc(733 * var(--formula)); } /* ph-44.png */
#LB260805maryquant .s2-h-02 { width: calc(100 * var(--formula));letter-spacing: 0.042em; } /* Treat Yourself Today. */
#LB260805maryquant .s2-shot-06 { margin-top: calc(62 * var(--formula)); width: calc(750 * var(--formula)); height: calc(1000 * var(--formula)); } /* ph-43.png */
#LB260805maryquant .s2-credit-05 { margin-top: calc(28 * var(--formula)); margin-left: calc(73 * var(--formula)); width: calc(605 * var(--formula));} /* Jacket 19,800yen Cardigan 14,960ye… */
#LB260805maryquant .s2-slider-04 {
margin-top: calc(122 * var(--formula));
width: auto;
margin-left: 0;
height: auto;
} /* ph-11.png */
#LB260805maryquant .s2-slider-04 li{
width: calc(546 * var(--formula)) !important;
}
#LB260805maryquant .s2-credit-06 { margin-top: calc(27 * var(--formula)); margin-left: calc(303 * var(--formula)); width: calc(144 * var(--formula)); } /* Bag 16,940yen */
#LB260805maryquant .s2-band-02 { background-color: var(--color-pink); }
#LB260805maryquant .s2-deco-05 { margin-left: calc(-15 * var(--formula)); width: calc(910 * var(--formula)); height: calc(103 * var(--formula)); } /* va-09.png */
#LB260805maryquant .s2-h-03 {
margin: calc(80 * var(--formula)) auto 0; width: calc(364 * var(--formula)); position: relative; z-index: var(--z-text); } /* A Touch of Happiness. */
#LB260805maryquant .s2-shot-07 {
margin: calc(-19.68 * var(--formula)) auto 0;
width: calc(685 * var(--formula));
} /* ph-25.png */
#LB260805maryquant .s2-credit-07 { margin-top: calc(23 * var(--formula)) !important; margin-left: calc(55 * var(--formula)); width: calc(640 * var(--formula)); } /* Knit tops 9,350yen Skirt 14,960yen… */
#LB260805maryquant .s2-slider-05 { margin-top: calc(122 * var(--formula)); width: calc(750 * var(--formula)); height: calc(893 * var(--formula));; --sw: 670 } /* ph-03.png */
#LB260805maryquant .s2-credit-08 { margin-top: calc(27 * var(--formula)); margin-left: calc(111 * var(--formula)); width: calc(527 * var(--formula));line-height: 1.3; } /* Tops 8,910yen Coat 25,960yen Pants… */
#LB260805maryquant .s2-shot-08 { margin-top: calc(119 * var(--formula)); margin-left: calc(240 * var(--formula)); width: calc(510 * var(--formula)); height: calc(680 * var(--formula)); position: relative; z-index: var(--z-lift); } /* ph-62.png */
#LB260805maryquant .s2-shot-09 { margin-top: calc(-300 * var(--formula)); width: calc(350 * var(--formula)); height: calc(467 * var(--formula));
position: relative;
z-index: 2;
} /* ph-26.png */
#LB260805maryquant .s2-shot-10 { margin-top: calc(80 * var(--formula)); width: calc(750 * var(--formula)); height: calc(1000 * var(--formula)); } /* ph-63.png */
#LB260805maryquant .s2-credit-09 { margin-top: calc(26 * var(--formula)) !important; margin-left: calc(47 * var(--formula)); width: calc(656 * var(--formula)); } /* Jacket 31,900yen Knit tops 9,350ye… */
#LB260805maryquant .s2-h-04 {
margin: calc(124 * var(--formula)) auto 0;
width: calc(544 * var(--formula));
position: relative; z-index: var(--z-text); } /* Joy in Every Sip. */
#LB260805maryquant .s2-shot-11 {
margin: calc(-76.56 * var(--formula)) auto 0;
width: calc(564 * var(--formula));
} /* ph-32.png */
#LB260805maryquant .s2-deco-06 { margin-top: calc(120 * var(--formula)); margin-left: calc(-145 * var(--formula)); width: calc(910 * var(--formula)); height: calc(103 * var(--formula)); } /* va-12.png */
/* ========== SECTION 3 ========== */
#LB260805maryquant .s3-deco-01 {
margin: calc(120 * var(--formula)) auto 0; width: calc(394 * var(--formula)); height: calc(255 * var(--formula)); } /* va-05.png */
#LB260805maryquant .s3-linkrow-01 { margin: calc(105 * var(--formula)) auto 0; display: flex; align-items: flex-start; gap: calc(50 * var(--formula));
justify-content: center;
}
#LB260805maryquant .s3-linkrow-01 span{
letter-spacing: 0.01em;
}
#LB260805maryquant .s3-link-01 { width: calc(327 * var(--formula)); } /* Collaboration Items */
#LB260805maryquant .s3-deco-02 { width: calc(18 * var(--formula)); height: calc(34 * var(--formula)); margin-top: calc(14 * var(--formula)); } /* va-28.png */
#LB260805maryquant .s3-link-02 span{
letter-spacing: 0.01em;
}
#LB260805maryquant .s3-linkrow-02 { margin-top: calc(12 * var(--formula)); display: flex; align-items: flex-start; gap: calc(50 * var(--formula));justify-content: center; }
#LB260805maryquant .s3-link-02 { width: calc(145 * var(--formula)); } /* All Items */
#LB260805maryquant .s3-deco-03 { width: calc(18 * var(--formula)); height: calc(34 * var(--formula)); margin-top: calc(15 * var(--formula)); } /* va-27.png */
#LB260805maryquant .s3-staff-01 {
margin: calc(101 * var(--formula)) 0 auto;
letter-spacing: 0.02em;
line-height: 1.25;
} /* Model : Kotona Minami (BOX CORPORA… */
#LB260805maryquant .s3-band-01 { margin-top: calc(119 * var(--formula)); padding-top: calc(56 * var(--formula)); padding-bottom: calc(80.6 * var(--formula)); background-color: var(--color-offwhite); }
#LB260805maryquant .s3-shot-01 { margin-left: calc(46 * var(--formula)); width: calc(658 * var(--formula)); height: calc(380 * var(--formula)); } /* ph-51.png */
#LB260805maryquant .s3-news-01 { margin-top: calc(35 * var(--formula)); margin-left: calc(46 * var(--formula)); width: calc(658 * var(--formula)); } /* 2026.08.01 LittleTwinStars × LILY … */
#LB260805maryquant .s3-topics-01 { margin-top: calc(96 * var(--formula)); margin-left: calc(265 * var(--formula)); width: calc(219 * var(--formula)); } /* VIEW ALL TOPICS */
#LB260805maryquant .s3-deco-06 { margin-top: calc(-3.4 * var(--formula)); margin-left: calc(264 * var(--formula)); width: calc(222 * var(--formula)); height: calc(2 * var(--formula)); } /* va-29.png */
#LB260805maryquant .s3-deco-04 { top: calc(222 * var(--formula)); left: calc(725 * var(--formula)); width: calc(16 * var(--formula)); height: calc(49 * var(--formula)); } /* va-26.png（帯基準） */
#LB260805maryquant .s3-deco-05 { top: calc(255 * var(--formula)); left: calc(9 * var(--formula)); width: calc(16 * var(--formula)); height: calc(49 * var(--formula)); } /* va-25.png（帯基準） */
#LB260805maryquant .lp-ab--3 { padding-bottom: calc(200* var(--formula)); }
/* ▲ =========== 配置定義 =========== ▲ */