が閉じているので CSS の mask-image は不要。
============================================ */
.bfr {
position: relative;
width: 375px;
height: 756px;
background: #fff;
overflow: hidden;
isolation: isolate;
font-family: "Noto Sans","Noto Sans JP","Hiragino Kaku Gothic ProN",sans-serif;
color: #262626;
}
/* Top X-pattern texture (1:174). 元のFigma座標：
wrapper 375×751 at (0,0) + 内部rotate(90)+scaleY(-1)+mask 374×507。
ユーザー提供SVGはマスク適用済み 374×507 の最終形。 */
.bfr__bg-top {
position: absolute;
left: 0;
top: 0;
width: 374px;
height: 507px;
z-index: 0;
pointer-events: none;
}
.bfr__bg-top img {
width: 100%;
height: 100%;
display: block;
}
/* Bottom stretch photo (1:177). 元のFigma座標：
wrapper 404.445×581.935 at (-28.81, 341.61) + mask 376×264 at (28.808, 151.387)。
セクション座標換算：(-28.81+28.808, 341.61+151.387) = (~0, 493) サイズ 376×264。
ユーザー提供SVGはマスク適用済み 376×263 の最終形。 */
.bfr__bg-bottom {
position: absolute;
left: 0;
top: 493px;
width: 376px;
height: 263px;
z-index: 1;
pointer-events: none;
}
.bfr__bg-bottom img {
width: 100%;
height: 100%;
display: block;
}
/* Heading: コンプレッション / ストレッチとは？ (1:181)
Figma: left=50% top=55, translateX(-50%), Noto Serif JP Bold,
base color #c32f24, base tracking -0.64px (-0.016em on 40px),
text-align center, white-space nowrap, line-height 1.25 per span. */
.bfr__h {
position: absolute;
left: 50%;
top: 55px;
margin: 0;
z-index: 2;
transform: translateX(-50%);
font-family: "Noto Serif JP","Yu Mincho",serif;
font-weight: 700;
text-align: center;
letter-spacing: -0.64px;
white-space: nowrap;
line-height: 0; /* outer leading-[0] in Figma */
}
.bfr__h-line {
display: block;
margin: 0;
font-size: 40px;
line-height: 1.25;
}
.bfr__h-line + .bfr__h-line {
margin-top: 0; /* tight stacking */
}
.bfr__h-red { color: #c32f24; }
.bfr__h-black {
color: #262626;
font-size: 32px;
}
/* Body text (1:180): centered at (50%, 348), w=323 h=344
Figma: 15px Noto Sans Medium (wdth 100), tracking 0.6px (=0.04em on 15px),
line-height 1.5, text-shadow white halo for legibility on bg images.
Inline variants:
.bfr__body-em = 15px BOLD red (#c32f24, wdth 100) -- 強調
.bfr__body-cond = 15px ExtraCondensed Medium (wdth 62.5)
JP fonts have no width axis, so simulate with transform: scaleX. */
.bfr__body {
position: absolute;
left: 50%;
top: 348px;
width: 323px;
height: 344px;
margin: 0;
transform: translate(-50%, -50%);
z-index: 3;
display: flex;
flex-direction: column;
justify-content: center;
text-align: center;
font-family: "Noto Sans","Noto Sans JP","Hiragino Kaku Gothic ProN",sans-serif;
font-size: 15px;
font-weight: 500;
line-height: 1.5;
letter-spacing: 0.04em;
color: #262626;
text-shadow:
0 0 4px #fff,
0 0 4px #fff,
0 0 8px #fff;
}
.bfr__body p { margin: 0; }
.bfr__body-em {
font-weight: 700;
color: #c32f24;
}
.bfr__body-cond {
/* Figmaは Noto Sans の wdth:62.5 軸を指定するが、Noto Sans JP に
wdth軸はないため、日本語文字は通常幅で描画される（Figma側も同じ）。
scaleX(0.85) で無理に圧縮すると縦線が異常に細くなり字形が歪むため
撤去。font-stretch だけ宣言しておく（対応フォントがあれば効く）。 */
font-stretch: 62.5%;
white-space: nowrap;
}
/* ============================================
Solution section (3つの革新)
Frame: 375 × 2065 per Figma node 1:182
============================================ */
.solution {
position: relative;
width: 375px;
height: 2065px;
background: #fff;
overflow: hidden;
isolation: isolate;
font-family: "Noto Sans","Noto Sans JP","Hiragino Kaku Gothic ProN",sans-serif;
color: #fff;
}
/* Section background — single composite PNG taken from Figma render,
upscaled to 375×2065. This eliminates the complexity of layering photos
+ gradient overlay + texture + masks. */
.solution__bg {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
z-index: 0;
pointer-events: none;
display: block;
max-width: none;
}
/* Black skewed pill: 空気圧×20秒 (parallelogram per Figma SVG path) */
.solution__pill {
position: absolute;
left: 50%;
top: 55px;
width: 288.438px;
height: 58.104px;
transform: translateX(-50%);
z-index: 3;
}
.solution__pill-bg {
position: absolute;
inset: 0;
background: #000;
/* SVG path M8.987 0 H288.438 L278.389 57.22 H0 Z (parallelogram cut) */
clip-path: polygon(
3.12% 0, /* 8.987/288.438 */
100% 0,
96.51% 100%, /* 278.389/288.438 */
0 100%
);
}
.solution__pill-text {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%) skewX(-10deg) scaleY(0.98);
font-family: "Noto Sans","Noto Sans JP",sans-serif;
font-weight: 500;
font-size: 40.872px;
line-height: 1;
color: #e9cc85;
letter-spacing: 0.04em;
white-space: nowrap;
}
/* Heading "身体が変わる新常識" */
.solution__h {
position: absolute;
left: 50%;
top: 114px;
transform: translateX(-50%);
z-index: 3;
margin: 0;
text-align: center;
font-family: "Noto Serif JP","Yu Mincho",serif;
font-weight: 700;
letter-spacing: 0.04em;
color: #fff;
white-space: nowrap;
line-height: 1.45;
}
.solution__h-base { font-size: 35px; }
.solution__h-emp { font-size: 40px; }
/* Sub heading */
.solution__sub {
position: absolute;
left: 50%;
top: 193px;
width: 346px;
transform: translateX(-50%);
z-index: 3;
margin: 0;
text-align: center;
font-family: "Noto Sans","Noto Sans JP",sans-serif;
font-weight: 500;
font-size: 14px;
line-height: 1.5;
letter-spacing: 0.04em;
color: #fff;
}
/* ---------- 3 Cards (sol-card--1/2/3) ---------- */
.sol-card {
position: absolute;
left: 15px;
width: 345px;
z-index: 4;
color: #262626;
}
.sol-card--1 { top: 255px; height: 557px; }
.sol-card--2 { top: 838px; height: 597px; }
.sol-card--3 { top: 1461px; height: 559px; }
/* Big number 01/02/03 — using Figma-exported PNG directly. The Figma actual
visible glyph is ~55×44 (the 75.545×76.815 box was the post-skew bbox).
Display at the natural Figma size for pixel-accurate matching. */
.sol-card__num {
position: absolute;
left: 10px; /* shifted left to match Figma */
top: 22px; /* shifted down to match Figma */
width: 55px; /* Figma actual rendered "01" width */
height: auto;
z-index: 2;
display: block;
}
/* White tab on top-left — 79×43, top-rounded only */
.sol-card__tab {
position: absolute;
left: 0; /* card-relative: 15-15 = 0 */
top: 35px; /* card-relative: 290-255 = 35 (card1), but cards 2/3 differ */
width: 79px;
height: 43px;
background: #fff;
border-radius: 10px 10px 0 0;
}
.sol-card--2 .sol-card__tab { top: 38px; } /* 876-838 */
.sol-card--3 .sol-card__tab { top: 35px; } /* 1496-1461 */
/* Main white card body — top-left CORNER NOT rounded (per Figma)
Add subtle box-shadow for the "floating" / elevated effect */
.sol-card::before {
content: "";
position: absolute;
left: 0;
width: 345px;
background: #fff;
border-radius: 0 10px 10px 10px;
box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18);
}
.sol-card--1::before { top: 71px; height: 486px; } /* 326-255, 486 */
.sol-card--2::before { top: 75px; height: 522px; } /* 913-838 */
.sol-card--3::before { top: 72px; height: 487px; } /* 1533-1461 */
/* Tab also gets matching shadow on top */
.sol-card__tab {
box-shadow: 0 -3px 8px rgba(0, 0, 0, 0.12);
}
/* Red pill label on the tab area */
.sol-card__pill {
position: absolute;
top: 96px; /* card1: 351-255=96, card2: 938-838=100, card3: 1557-1461=96 */
left: 16px; /* card-rel: 31-15 = 16 */
width: 65px;
height: 19px;
background: #c32f24;
color: #fff;
border-radius: 17.798px;
display: flex;
align-items: center;
justify-content: center;
font-family: "Noto Sans","Noto Sans JP",sans-serif;
font-weight: 500;
font-size: 11.607px;
letter-spacing: 0.04em;
white-space: nowrap;
z-index: 1;
}
.sol-card__pill--w94 { width: 94px; }
.sol-card--2 .sol-card__pill { top: 100px; width: 94px; } /* 938 - 838 */
.sol-card--3 .sol-card__pill { top: 96px; width: 80px; } /* 1557 - 1461 */
/* Heading 30px Serif Bold black, 2 lines */
.sol-card__h {
position: absolute;
left: 16px;
top: 116px; /* card1: 371-255=116 */
margin: 0;
font-family: "Noto Serif JP","Yu Mincho",serif;
font-weight: 700;
font-size: 30px;
line-height: 1.45;
letter-spacing: 0.04em;
color: #262626;
z-index: 1;
}
.sol-card__h span { display: block; white-space: nowrap; }
.sol-card--2 .sol-card__h { top: 120px; } /* 958-838 */
.sol-card--3 .sol-card__h { top: 116px; } /* 1577-1461 */
/* Body 18px black, with red emphasis */
.sol-card__body {
position: absolute;
left: 18px; /* card-rel: 33-15 */
width: 306px;
margin: 0;
font-family: "Noto Sans","Noto Sans JP",sans-serif;
font-weight: 500;
font-size: 18px;
line-height: 1.5;
letter-spacing: 0.04em;
color: #262626;
z-index: 1;
}
.sol-card__body b {
font-weight: 700;
color: #c32f24;
}
.sol-card--1 .sol-card__body { top: 220px; } /* 475-255 */
.sol-card--2 .sol-card__body { top: 224px; left: 18px; width: 306px; } /* 1062-838 */
.sol-card--3 .sol-card__body { top: 220px; left: 15px; width: 309px; } /* 1681-1461, +30 left = 15 + 15? actually card-rel: 30-15=15, w=309 */
/* Photo — plain 315×200 rectangle, no border/shadow per Figma. */
.sol-card__photo {
position: absolute;
width: 315px;
height: 200px;
overflow: hidden;
z-index: 1;
}
.sol-card__photo img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.sol-card--1 .sol-card__photo { left: 15px; top: 337px; } /* 592-255, card-rel 30-15=15 */
.sol-card--2 .sol-card__photo { left: 26px; top: 367px; width: 314px; height: 190px; } /* 1205-838=367, 41-15=26, w=314 h=190 */
.sol-card--3 .sol-card__photo { left: 15px; top: 339px; } /* 1800-1461=339 */
/* ============================================
CTA2 section (Solution直下)
Frame: 375 × 250 per Figma node 1:232
============================================ */
.cta2 {
position: relative;
width: 375px;
height: 250px;
overflow: hidden;
isolation: isolate;
font-family: "Noto Sans","Noto Sans JP","Hiragino Kaku Gothic ProN",sans-serif;
color: #fff;
}
/* Background photo (cta_bg_1) extends slightly above section per Figma:
left=0, top=-74, w=374, h=493 */
.cta2__photo {
position: absolute;
left: 0;
top: -74px;
width: 374px;
height: 493px;
z-index: 0;
pointer-events: none;
}
.cta2__photo img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
display: block;
}
/* Red translucent overlay rgba(149,16,6,0.8) — covers full width × 280 */
.cta2__overlay {
position: absolute;
left: -1px;
top: 0;
width: 375px;
height: 280px;
z-index: 1;
background: rgba(149, 16, 6, 0.8);
pointer-events: none;
}
/* Black skewed pill banner (Group 67)
x=15, y=37, w=345, h=59
SVG path: M10.7492 0 H345 L332.98 59 L0 59 Z (parallelogram cut) */
.cta2__pill {
position: absolute;
left: 15px;
top: 37px;
width: 345px;
height: 59px;
z-index: 2;
}
.cta2__pill-bg {
position: absolute;
inset: 0;
background: #000;
clip-path: polygon(
3.115% 0, /* 10.7492 / 345 */
100% 0,
96.516% 100%, /* 332.98 / 345 */
0 100%
);
}
.cta2__pill-text {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%) skewX(-10deg) scaleY(0.98);
text-align: center;
white-space: nowrap;
font-family: "Noto Sans","Noto Sans JP",sans-serif;
font-weight: 500;
letter-spacing: 0.04em;
}
.cta2__pill-text p { margin: 0; line-height: 1.4; }
.cta2__pill-text-line1 {
font-size: 15.328px;
color: #fff;
}
.cta2__pill-text-line2 {
font-size: 19.161px;
color: #e9cc85;
}
/* "まずは一度、体感してください" sub line + diagonal decorations
Figma: text at top=119, sides at top=116 with h=26 */
.cta2__sub {
position: absolute;
left: 0;
top: 116px;
width: 100%;
height: 26px;
z-index: 2;
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
}
.cta2__sub-text {
margin: 0;
font-family: "Noto Sans","Noto Sans JP",sans-serif;
font-weight: 600;
font-size: 18px;
line-height: 1.25;
letter-spacing: 0.04em;
color: #fff;
white-space: nowrap;
}
/* Diagonal lines on either side — 10×26 white stroke / shape */
.cta2__sub-deco {
width: 10px;
height: 26px;
display: block;
flex: 0 0 auto;
}
/* Left side mirrored so the line slopes the other way ( / instead of \ ) */
.cta2__sub-deco--left { transform: scaleX(-1); }
/* Phase 4c: CTA2 buttons */
.cta2__buttons {
position: absolute;
left: 15px;
top: 159px;
width: 345px;
height: 55px;
z-index: 2;
}
.cta2__btn {
position: absolute;
top: 0;
width: 168px;
height: 55px;
display: block;
text-decoration: none;
font-family: "Noto Sans","Noto Sans JP","Hiragino Kaku Gothic ProN",sans-serif;
font-weight: 500;
box-sizing: border-box;
}
.cta2__btn--web {
left: 0;
background: #19a330;
border: 1.469px solid #138f28;
border-radius: 4.898px;
box-shadow:
inset 0 1.959px 1.959px #109426,
1.469px 1.959px 1.959px rgba(0,0,0,0.25);
color: #fff;
}
.cta2__btn--tel {
left: 177px;
background: #f7d650;
border: 1.504px solid #f4c400;
border-radius: 5.013px;
box-shadow: inset 0 2.005px 2.005px #f1cc36;
color: #350b0b;
}
.cta2__btn-text {
position: absolute;
font-size: 20px;
letter-spacing: 0.04em; /* tracking 0.8px @ 20px */
line-height: 1.25;
text-align: center;
white-space: nowrap;
margin: 0;
}
.cta2__btn--web .cta2__btn-text {
/* Figma section: x=63, y=174, w=90, h=24 → button-local left=48, top=15 */
left: 48px;
top: 15px;
width: 90px;
height: 24px;
}
.cta2__btn--tel .cta2__btn-text {
/* Figma section: x=229.87, y=173.73, w=100.02, h=25.54 → button-local left=37.87, top=14.73 */
left: 37.87px;
top: 14.73px;
width: 100.02px;
height: 25.54px;
}
/* WEB icon (tablet + finger) — single composite PNG (3x retina) provided by user */
.cta2__btn-icon--web {
position: absolute;
/* Figma section: x=36, y=177, w=22, h=19.895 → button-local left=21, top=18 */
left: 21px;
top: 18px;
width: 22px;
height: 19.895px;
display: block;
max-width: none;
}
/* Phone icon */
.cta2__btn-icon--phone {
position: absolute;
/* Figma section: x=217.25, y=176.68, w=12.624, h=19.643 → button-local left=25.25, top=17.68 */
left: 25.25px;
top: 17.68px;
width: 12.624px;
height: 19.643px;
display: block;
max-width: none;
}
/* Right-side › (chevron) */
.cta2__btn-arrow {
position: absolute;
/* Figma vector at section x=167.46/344.46, y=182.57, w=3.408, h=8.37 → button-local left=152.46, top=23.57 */
left: 152.46px;
top: 23.57px;
width: 3.408px;
height: 8.37px;
display: block;
max-width: none;
}
/* ==================== Evidence (1:264) ==================== */
.evidence {
position: relative;
width: 375px;
height: 814px;
background: #fff;
overflow: hidden;
isolation: isolate;
font-family: "Noto Sans","Noto Sans JP","Hiragino Kaku Gothic ProN",sans-serif;
color: #262626;
}
/* Phase 3: 背景 */
/* Photo: AdobeStock 509278275 — landscape image, displayed as 375x750 portrait via -90 rotation */
.evidence__photo {
position: absolute;
left: 0;
top: 0;
width: 375px;
height: 750px;
overflow: hidden;
z-index: 0;
}
.evidence__photo img {
position: absolute;
/* natural is landscape (~2:1). After rotate(-90deg)+scaleY(-1) → portrait fitting 375x750 */
width: 750px;
height: 375px;
left: 50%;
top: 50%;
transform: translate(-50%, -50%) rotate(-90deg) scaleY(-1);
max-width: none;
display: block;
}
/* Red gradient overlay over the photo
Figma: bg-gradient-to-b from 40.846% red(0.8) to 62.742% transparent, with -scale-y-100 flip.
Flipped result: transparent at top (0-37%), transition (37-59%), solid red at bottom (59-100%) */
.evidence__overlay {
position: absolute;
left: 0;
top: 29px;
width: 375px;
height: 785px;
z-index: 1;
pointer-events: none;
background: linear-gradient(
to bottom,
rgba(47, 5, 2, 0) 0%,
rgba(47, 5, 2, 0) 37.26%,
rgba(149, 16, 6, 0.8) 59.15%,
rgba(149, 16, 6, 0.8) 100%
);
}
/* Phase 4a: 黒い斜めバナー (Group 67) */
.evidence__pill {
position: absolute;
left: 15px;
top: 54px;
width: 345px;
height: 34.468px;
z-index: 3;
}
.evidence__pill-bg {
position: absolute;
inset: 0;
background: #000;
/* Path: M10.7492 0H345L332.98 34H0L10.7492 0Z */
clip-path: polygon(3.115% 0, 100% 0, 96.516% 100%, 0 100%);
}
.evidence__pill-text {
position: absolute;
left: calc(50% + 6.54px);
top: 50%;
transform: translate(-50%, -50%) skewX(-10deg) scaleY(0.98);
margin: 0;
font-family: "Noto Serif JP", serif;
font-weight: 700;
font-size: 25px;
letter-spacing: 0.04em; /* 1px @ 25px */
line-height: 1.4;
color: #fff;
white-space: nowrap;
text-align: center;
}
.evidence__pill-squeeze { letter-spacing: -0.0256em; /* -0.64px @ 25px */ }
.evidence__pill-gold { color: #e9cc85; }
/* Phase 4a: 見出し "データが証明する効果。" */
.evidence__heading {
position: absolute;
left: 27px;
top: 102px;
width: 342px;
height: 42px;
margin: 0;
z-index: 3;
font-family: "Noto Serif JP", serif;
font-weight: 700;
font-size: 30px;
letter-spacing: 0.04em; /* 1.2px @ 30px */
line-height: 1.4;
text-align: center;
color: #262626;
white-space: nowrap;
}
.evidence__heading-red { color: #d62b2a; }
/* Phase 4b: 白カード領域 (Group 26 / Group 72) */
.evidence__card {
position: absolute;
left: 15px;
top: 189px;
width: 345px;
height: 600px;
z-index: 3;
}
/* Black rounded-top header overlay (Rectangle 17) — y=189..291.5 in section, w=345 */
.evidence__card-head {
position: absolute;
left: 0;
top: 0;
width: 345px;
height: 102.506px;
background: #000;
border-radius: 10px 10px 0 0;
}
/* White card body (Rectangle 19) — y=275.1..789 in section, w=345 */
.evidence__card-body {
position: absolute;
left: 0;
top: 86.105px; /* 275.105 - 189 */
width: 345px;
height: 513.895px;
background: #fff;
}
/* Title "柔軟性向上の可動域比較" centered in header */
.evidence__card-title {
position: absolute;
/* Figma: -translate-x-1/2 left=calc(50%+0.5px) top=212.23 w=290 h=49.2 */
left: 50%;
top: 23.235px; /* 212.235 - 189 */
width: 290px;
height: 49.203px;
margin: 0;
transform: translateX(calc(-50% + 0.5px));
font-family: "Noto Serif JP", serif;
font-weight: 700;
font-size: 25px;
line-height: 1.45;
letter-spacing: 0.06em; /* 1.5px @ 25px */
color: #fff;
text-align: center;
white-space: nowrap;
}
.evidence__card-title-gold { color: #e9cc85; }
/* "(自社調査)" subtitle */
.evidence__card-sub {
position: absolute;
/* Figma: -translate-x-1/2 left=calc(50%+114px) top=261.44 w=69 h=21.87 */
left: 50%;
top: 72.437px; /* 261.437 - 189 */
width: 69px;
height: 21.868px;
margin: 0;
transform: translateX(calc(-50% + 114px));
font-family: "Noto Sans","Noto Sans JP",sans-serif;
font-weight: 500;
font-size: 11px;
line-height: 1.45;
letter-spacing: 0.04em; /* 0.44px */
color: #fff;
text-align: center;
white-space: nowrap;
}
/* Body text */
.evidence__card-text {
position: absolute;
/* Figma: left=calc(50%-159.5px) top=313 w=321 */
/* In card-local: section x=28.5, top=313 → card-local left=13.5, top=124 */
left: 13.5px;
top: 124px; /* 313 - 189 */
width: 321px;
margin: 0;
font-family: "Noto Sans","Noto Sans JP",sans-serif;
font-weight: 500;
font-size: 15px;
line-height: 2;
letter-spacing: 0.09em; /* 1.35px @ 15px */
color: #262626;
}
.evidence__card-text-red {
color: #c32f24;
font-weight: 600;
}
/* Note at bottom */
.evidence__card-note {
position: absolute;
/* Figma: left=31 top=743 w=297 h=34 */
/* In card-local: left=16, top=554 */
left: 16px;
top: 554px; /* 743 - 189 */
width: 297px;
height: 34px;
margin: 0;
font-family: "Noto Sans","Noto Sans JP",sans-serif;
font-weight: 500;
font-size: 12px;
line-height: 1.45;
letter-spacing: 0.04em; /* 0.48px */
color: #262626;
}
/* Phase 4c: チャート画像 (Rectangle 18 + chart + badge + title 全部) */
.evidence__chart {
position: absolute;
/* Figma: left=30, top=451, w=315, h=278 */
left: 30px;
top: 451px;
width: 315px;
height: 278px;
z-index: 4;
display: block;
max-width: none;
}
/* ==================== Supervision (1:301) ==================== */
.supervision {
position: relative;
width: 375px;
height: 1024px;
background: #fbeded;
font-family: "Noto Sans","Noto Sans JP","Hiragino Kaku Gothic ProN",sans-serif;
color: #262626;
overflow: hidden;
isolation: isolate;
}
/* Phase 3: タイトル "監修者の声" */
.supervision__title {
position: absolute;
/* Figma: -translate-x-1/2 left=calc(50%+0.5px) top=55 */
left: 50%;
top: 55px;
transform: translateX(calc(-50% + 0.5px));
margin: 0;
font-family: "Noto Serif JP", serif;
font-weight: 700;
font-size: 32px;
line-height: 1.45;
letter-spacing: 0.04em; /* 1.28px @ 32px */
color: #262626;
white-space: nowrap;
text-align: center;
}
/* Phase 4a: Card 1 - 萩原 三郎 (1:303) */
.supervision__card {
position: absolute;
z-index: 2;
}
.supervision__card--1 {
/* Figma: x=15, y=136, w=345, h=507 */
left: 15px;
top: 136px;
width: 345px;
height: 507px;
}
.supervision__card-bg {
position: absolute;
inset: 0;
background: #fff;
border-radius: 10px;
box-shadow: 2px 4px 4px 0 #c3ab93;
}
.supervision__avatar {
position: absolute;
border-radius: 50%;
overflow: hidden;
background: #f0f0f0;
z-index: 1;
}
.supervision__avatar img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
max-width: none;
}
.supervision__avatar--1 {
/* Mask area effective ~88x87 at section x=30, y=155 → card-local left=15, top=19 */
left: 15px;
top: 19px;
width: 88px;
height: 88px;
}
.supervision__card-name {
position: absolute;
/* Figma: x=135, y=168.78, w=62, h=19.84 → card-local left=120, top=32.78 */
left: 120px;
top: 32.78px;
margin: 0;
width: 62px;
height: 19.843px;
font-family: "Noto Sans","Noto Sans JP",sans-serif;
font-weight: 700;
font-size: 14px;
line-height: 1.45;
letter-spacing: 0.04em; /* 0.56px @ 14px */
color: #262626;
white-space: nowrap;
z-index: 2;
}
/* Red ribbon banner with title */
.supervision__ribbon {
position: absolute;
background: #c32f24;
}
.supervision__ribbon--1 {
/* Figma: x=15, y=191.6, w=345, h=49.6 → card-local left=0, top=55.6 */
left: 0;
top: 55.6px;
width: 345px;
height: 49.608px;
}
.supervision__ribbon-text {
position: absolute;
/* Figma: x=135, y=194.58, w=191, h=44.65 → ribbon-local left=120, top=2.98 */
left: 120px;
top: 2.98px;
margin: 0;
width: 210px; /* widened from 191 — Chromium renders Japanese slightly wider than Figma */
height: 44.647px;
font-family: "Noto Sans","Noto Sans JP",sans-serif;
font-weight: 600;
font-size: 10px;
line-height: 1.45;
letter-spacing: 0.04em; /* tightened from 0.08 to fit 3 lines */
color: #fff;
white-space: normal;
}
/* Body text */
.supervision__card-body {
position: absolute;
margin: 0;
font-family: "Noto Sans","Noto Sans JP",sans-serif;
font-weight: 500;
font-size: 14px;
line-height: 2;
letter-spacing: 0.09em; /* 1.26px @ 14px */
color: #262626;
}
.supervision__card-body--1 {
/* Figma: -translate-y-1/2 left=31 top=437.65 w=313 h=361.145 (vertically center)
center y=437.65, h=361.145 → box top=257.07 → card-local top=121.08 */
left: 16px;
top: 121.08px;
width: 313px;
height: 361.145px;
display: flex;
flex-direction: column;
justify-content: center;
}
/* Phase 4b: Card 2 - 羽藤 泰三 (1:312) */
.supervision__card--2 {
/* Figma: x=15, y=662, w=345, h=337 */
left: 15px;
top: 662px;
width: 345px;
height: 337px;
}
.supervision__avatar--2 {
/* Figma: mask 88x88 at section (30, 676) → card-local left=15, top=14
But image fills a larger 131x153 container, masked at offset (24, 7).
So image renders at 131x153, shifted by -24/-7 within the 88x88 circle. */
left: 15px;
top: 14px;
width: 88px;
height: 88px;
}
.supervision__avatar--2 img {
width: 131px;
height: 153px;
left: -24px;
top: -7px;
position: absolute;
object-fit: cover;
max-width: none;
}
.supervision__card-name--2 {
/* Figma: x=135, y=700 → card-local left=120, top=38 */
left: 120px;
top: 38px;
width: auto;
height: auto;
}
.supervision__ribbon--2 {
/* Figma: x=15, y=723, w=345, h=30 → card-local left=0, top=61 */
left: 0;
top: 61px;
width: 345px;
height: 30px;
}
.supervision__ribbon-text--2 {
/* Figma: x=135, y=731 → ribbon-local left=120, top=8. whitespace-nowrap */
left: 120px;
top: 8px;
width: auto;
height: auto;
white-space: nowrap;
}
.supervision__card-body--2 {
/* Figma: left=31, top=779, w=313 → card-local left=16, top=117 */
left: 16px;
top: 117px;
width: 313px;
}
/* ==================== Testimonials (1:321) ==================== */
.testimonials {
position: relative;
width: 375px;
height: 1557px;
font-family: "Noto Sans","Noto Sans JP","Hiragino Kaku Gothic ProN",sans-serif;
color: #262626;
overflow: hidden;
isolation: isolate;
}
/* Phase 3: 背景写真 */
.testimonials__photo {
position: absolute;
inset: 0;
z-index: 0;
}
.testimonials__photo img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
/* Phase 4a: ヘッダー */
.testimonials__eyebrow {
position: absolute;
left: 50%;
top: 55px;
width: 222px;
height: 39px;
transform: translateX(calc(-50% + 0.5px));
z-index: 2;
}
.testimonials__eyebrow-pill {
position: absolute;
inset: 0;
background: #000;
border-radius: 23px;
}
.testimonials__eyebrow-text {
position: absolute;
left: 50%;
top: 50%;
transform: translate(calc(-50% + 5.06px), -50%);
margin: 0;
font-family: "Noto Sans","Noto Sans JP",sans-serif;
font-weight: 500;
font-size: 20px;
line-height: 1.45;
letter-spacing: 0.04em; /* 0.8px @ 20px */
color: #e2c25f;
text-align: center;
white-space: nowrap;
}
.testimonials__eyebrow-arrow {
position: absolute;
left: 50%;
top: 32px; /* 87 - 55 (eyebrow top) */
width: 8.784px;
height: 14px;
transform: translateX(calc(-50% + 0.61px)) rotate(180deg);
display: block;
max-width: none;
}
.testimonials__heading {
position: absolute;
/* Figma: x=39, y=113, w=297, h=46 */
left: 39px;
top: 113px;
width: 297px;
height: 46px;
margin: 0;
z-index: 2;
font-family: "Noto Serif JP", serif;
font-weight: 700;
font-size: 32px;
line-height: 1.45;
letter-spacing: 0.04em; /* 1.28px @ 32px */
color: #262626;
text-align: center;
white-space: nowrap;
}
/* Phase 4b-d: Cards */
.testimonials__card {
position: absolute;
z-index: 2;
}
.testimonials__card-bg {
position: absolute;
background: #fff;
border-radius: 10px;
box-shadow: 2px 4px 4px 0 rgba(195, 171, 147, 0.5);
}
.testimonials__avatar {
position: absolute;
width: 88px;
height: 88px;
border-radius: 50%;
overflow: hidden;
background: #f0f0f0;
z-index: 1;
}
.testimonials__avatar img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
max-width: none;
}
.testimonials__card-name {
position: absolute;
margin: 0;
font-family: "Noto Sans","Noto Sans JP",sans-serif;
font-weight: 500;
font-size: 18px;
line-height: 1.45;
letter-spacing: 0.04em; /* 0.72px @ 18px */
color: #c32f24;
z-index: 2;
}
.testimonials__card-name p {
margin: 0;
line-height: 1.45;
}
.testimonials__card-body {
position: absolute;
margin: 0;
font-family: "Noto Sans","Noto Sans JP",sans-serif;
font-weight: 500;
font-size: 14px;
line-height: 2;
letter-spacing: 0.09em; /* 1.26px @ 14px */
color: #262626;
z-index: 2;
}
.testimonials__card-body p {
margin: 0;
line-height: 2;
}
.testimonials__highlight {
color: #b6933c;
letter-spacing: 0.103em; /* 1.44px @ 14px */
}
/* Card 1 - T.Mさん (1:331) */
.testimonials__card--1 {
/* Card outer: x=15, y=196, w=345, h=326 */
left: 15px;
top: 196px;
width: 345px;
height: 326px;
}
.testimonials__card-bg--1 {
/* Card bg starts at y=225 (29px below avatar top) and is shorter */
left: 0;
top: 29px; /* 225 - 196 */
width: 345px;
height: 297px;
}
.testimonials__avatar--1 {
/* Avatar 88x88 at section (31, 196) → card-local (16, 0) */
left: 16px;
top: 0;
}
.testimonials__card-name--1 {
/* Title at section (131, 255) → card-local (116, 59) */
left: 116px;
top: 59px;
}
.testimonials__card-body--1 {
/* Body at section (30, 294) → card-local (15, 98) */
left: 15px;
top: 98px;
width: 313px;
}
/* Card 2 - T.Tさん (1:339) */
.testimonials__card--2 {
/* x=15, y=554, w=345, h=190 */
left: 15px;
top: 554px;
width: 345px;
height: 190px;
}
.testimonials__card-bg--2 {
/* x=15, y=579, w=345, h=165 */
left: 0;
top: 25px; /* 579 - 554 */
width: 345px;
height: 165px;
}
.testimonials__avatar--2 {
/* Avatar 88x88 at section (30, 554) → card-local (15, 0).
PNG provided by user is already pre-masked (264x264 with transparent corners),
so just display at 88x88. No offset needed. */
left: 15px;
top: 0;
}
.testimonials__card-name--2 {
/* x=128, y=609, w=216 → card-local (113, 55), text-right */
left: 113px;
top: 55px;
width: 216px;
text-align: right;
}
.testimonials__card-body--2 {
/* x=31, y=653 → card-local (16, 99) */
left: 16px;
top: 99px;
width: 313px;
}
/* Card 3 - T.Aさん (1:346) */
.testimonials__card--3 {
/* x=15, y=776, w=345, h=536 */
left: 15px;
top: 776px;
width: 345px;
height: 536px;
}
.testimonials__card-bg--3 {
/* x=15, y=788, w=345, h=524 */
left: 0;
top: 12px; /* 788 - 776 */
width: 345px;
height: 524px;
}
.testimonials__avatar--3 {
/* Avatar 88x88 at section (30, 776) → card-local (15, 0) */
left: 15px;
top: 0;
}
.testimonials__card-name--3 {
/* Figma: x=141, y=818, w=151, h=52 → card-local (126, 42), whitespace-nowrap, 2 lines */
left: 126px;
top: 42px;
width: 151px;
white-space: nowrap;
}
.testimonials__card-body--3 {
/* x=30, y=885 → card-local (15, 109) */
left: 15px;
top: 109px;
width: 313px;
}
/* Phase 4e: 評価バッジ */
.testimonials__badge {
position: absolute;
width: 136.35px;
height: 136.35px;
display: block;
max-width: none;
z-index: 2;
}
.testimonials__badge--hp {
/* Figma: x=39, y=1345, w=136.35, h=136.35 */
left: 39px;
top: 1345px;
}
.testimonials__badge--google {
/* Figma: x=199.35, y=1345, w=136.35, h=136.35 */
left: 199.35px;
top: 1345px;
}
.testimonials__note {
position: absolute;
/* Figma: x=18, y=1497, w=343, h=32 */
left: 18px;
top: 1497px;
width: 343px;
margin: 0;
z-index: 2;
font-family: "Noto Sans","Noto Sans JP",sans-serif;
font-weight: 500;
font-size: 11px;
letter-spacing: 0.04em; /* 0.44px @ 11px */
color: #262626;
}
.testimonials__note p {
margin: 0;
line-height: 1.45;
}
/* ---------- Ratings ---------- */
.ratings {
background: var(--cream-light);
padding: 0 18px 24px;
}
.rating-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
}
.rating {
background: var(--red);
color: #fff;
border-radius: 999px;
padding: 10px 14px;
display: flex;
flex-direction: column;
align-items: center;
gap: 0;
}
.rating-stars {
font-size: 13px;
letter-spacing: 0.04em;
color: #FFD25A;
}
.rating-num {
font-family: var(--serif);
font-weight: 700;
font-size: 22px;
line-height: 1;
}
.rating-source {
font-size: 9px;
opacity: 0.95;
}
/* ==================== Flow (1:595) ==================== */
.flow {
position: relative;
width: 375px;
height: 1792px;
font-family: "Noto Sans","Noto Sans JP","Hiragino Kaku Gothic ProN",sans-serif;
color: #262626;
overflow: hidden;
isolation: isolate;
}
/* Phase 3: 背景写真 — Figma レンダリング済み 3枚（クロップ異なる）*/
.flow__photo {
position: absolute;
left: 0;
width: 375px;
display: block;
z-index: 0;
}
.flow__photo--1 { top: 0; height: 757px; } /* Figma 1:596: 375x757 */
.flow__photo--2 { top: 757px; height: 757px; } /* Figma 1:597: 374x757 */
.flow__photo--3 { top: 1514px; height: 279px; } /* Figma 1:598: 374x279 (合計1793 ≈ section 1792) */
/* Phase 4b1: Card - frame + dot bg (完全レンダリング済み PNG) */
.flow__card {
position: absolute;
z-index: 2;
display: block;
max-width: none;
}
.flow__card--1 {
/* Figma Group 31: x=15, y=141, w=345, h=349 */
left: 15px;
top: 141px;
width: 345px;
height: 349px;
}
/* Phase 4b2: ステップ写真 (Figma レンダリング済み 2枚オーバーラップ PNG) */
.flow__photo-step {
position: absolute;
z-index: 3;
display: block;
max-width: none;
}
.flow__photo-step--1 {
/* Figma Mask group 1:607: x=32, y=185, w=312, h=148 */
left: 32px;
top: 185px;
width: 312px;
height: 148px;
}
/* Phase 4b3: 数字バッジ + タイトル + 本文 */
.flow__num {
position: absolute;
z-index: 4;
display: block;
max-width: none;
}
.flow__num--1 {
/* Figma 1:611 node bounds: x=44.55, y=147, w=75.55, h=76.82
PNG natural 188×124 (wider than tall due to skew). User-adjusted: smaller + shifted left+down. */
left: 35px;
top: 162px;
width: 62px;
height: auto;
}
.flow__card-title {
position: absolute;
z-index: 4;
margin: 0;
font-family: "Noto Sans","Noto Sans JP",sans-serif;
font-weight: 500;
line-height: 1.45;
color: #262626;
text-align: center;
white-space: nowrap;
}
.flow__card-title--1 {
/* Figma 1:605: -translate-x-1/2 left=188.5 top=353, font-size 25, tracking 1px */
left: 50%;
top: 353px;
width: auto;
transform: translateX(calc(-50% - 187.5px + 188.5px)); /* shift center to x=188.5 in section, but section is parent so 188.5 = center of section width 375 + 1 */
font-size: 25px;
letter-spacing: 0.04em; /* 1px @ 25px */
}
.flow__card-body {
position: absolute;
z-index: 4;
margin: 0;
font-family: "Noto Sans","Noto Sans JP",sans-serif;
font-weight: 500;
line-height: 1.45;
color: #262626;
text-align: center;
white-space: nowrap;
}
.flow__card-body--1 {
/* Figma 1:606: -translate-x-1/2 left=192.5 top=401, font-size 15, tracking 0.6px */
left: 50%;
top: 401px;
width: auto;
transform: translateX(calc(-50% - 187.5px + 192.5px));
font-size: 15px;
letter-spacing: 0.04em; /* 0.6px @ 15px */
}
/* Phase 4c: Card 2 (Group 51) */
.flow__card--2 {
/* Figma Group 51: x=15, y=531, w=345, h=349 */
left: 15px;
top: 531px;
width: 345px;
height: 349px;
}
.flow__photo-step--2 {
/* Figma Mask group 1:630: x=32, y=575, w=312, h=148 */
left: 32px;
top: 575px;
width: 312px;
height: 148px;
}
.flow__num--2 {
/* Figma 1:633: section x=44.55, y=537. Apply same delta as Card 1 (-9.55, +15) */
left: 35px;
top: 552px;
width: 62px;
height: auto;
}
.flow__card-title--2 {
/* Figma 1:628: x=46, y=743, w=285, h=36; center=188.5, font-size 25, tracking 1px */
left: 50%;
top: 743px;
width: auto;
transform: translateX(calc(-50% - 187.5px + 188.5px));
font-size: 25px;
letter-spacing: 0.04em; /* 1px @ 25px */
}
.flow__card-body--2 {
/* Figma 1:629: x=27, y=791, w=327, h=44 (2 lines), text-center, font-size 15, tracking 0.6px
center = 27+327/2 = 190.5 */
left: 50%;
top: 791px;
width: auto;
transform: translateX(calc(-50% - 187.5px + 190.5px));
font-size: 15px;
letter-spacing: 0.04em;
}
.flow__card-body--2 p {
margin: 0;
line-height: 1.45;
white-space: nowrap;
}
/* Phase 4d: Card 3 (Group 52) */
.flow__card--3 {
/* Figma Group 52: x=15, y=923, w=346, h=349 */
left: 15px;
top: 923px;
width: 345px;
height: 349px;
}
.flow__photo-step--3 {
/* Figma Mask group 1:619: x=32, y=967, w=312, h=148 */
left: 32px;
top: 967px;
width: 312px;
height: 148px;
}
.flow__num--3 {
/* Figma 1:622: section x=44.55, y=929. Same delta (-9.55, +15) */
left: 35px;
top: 944px;
width: 62px;
height: auto;
}
.flow__card-title--3 {
/* Figma 1:617: x=150, y=1135, w=77, h=36; center=188.5, font-size 25 */
left: 50%;
top: 1135px;
width: auto;
transform: translateX(calc(-50% - 187.5px + 188.5px));
font-size: 25px;
letter-spacing: 0.04em;
}
.flow__card-body--3 {
/* Figma 1:618: x=24, y=1183, w=337, h=44 (2 lines), text-center, font-size 15
center = 24+337/2 = 192.5 */
left: 50%;
top: 1183px;
width: auto;
transform: translateX(calc(-50% - 187.5px + 192.5px));
font-size: 15px;
letter-spacing: 0.04em;
}
.flow__card-body--3 p {
margin: 0;
line-height: 1.45;
white-space: nowrap;
}
/* Phase 4e: Card 4 (Group 53) - taller h=403, body wraps multi-line */
.flow__card--4 {
/* Figma Group 53: x=15, y=1307, w=345, h=403 */
left: 15px;
top: 1307px;
width: 345px;
height: 403px;
}
.flow__photo-step--4 {
/* Figma Mask group 1:641: x=32, y=1351, w=312, h=148 */
left: 32px;
top: 1351px;
width: 312px;
height: 148px;
}
.flow__num--4 {
/* Figma 1:644: section x=44.55, y=1313. Same delta (-9.55, +15) */
left: 35px;
top: 1328px;
width: 62px;
height: auto;
}
.flow__card-title--4 {
/* Figma 1:639: x=72, y=1519, w=233, h=36; center=188.5, font-size 25 */
left: 50%;
top: 1519px;
width: auto;
transform: translateX(calc(-50% - 187.5px + 188.5px));
font-size: 25px;
letter-spacing: 0.04em;
}
.flow__card-body--4 {
/* Figma 1:640: x=32, y=1567, w=313, h=88 (multi-line wrap, single ) — left/top NOT center transform */
left: 32px;
top: 1567px;
width: 313px;
font-size: 15px;
letter-spacing: 0.04em;
line-height: 1.45;
white-space: normal; /* allow wrapping */
text-align: left;
}
/* Phase 4f: 注釈 */
.flow__note {
position: absolute;
/* Figma 1:645: x=15, y=1758, w=230, h=16, font 11 Medium, tracking 0.77px */
left: 15px;
top: 1758px;
width: 230px;
margin: 0;
z-index: 4;
font-family: "Noto Sans","Noto Sans JP",sans-serif;
font-weight: 500;
font-size: 11px;
line-height: 1.45;
letter-spacing: 0.07em; /* 0.77px @ 11px */
color: #000;
white-space: nowrap;
}
/* Phase 4a: 見出し「ご来店の流れ」 */
.flow__heading {
position: absolute;
/* Figma: x=89, y=55, w=199, h=46 */
left: 89px;
top: 55px;
width: 199px;
height: 46px;
margin: 0;
z-index: 2;
font-family: "Noto Serif JP", serif;
font-weight: 700;
font-size: 32px;
line-height: 1.45;
letter-spacing: 0.04em; /* 1.28px @ 32px */
color: #262626;
text-align: center;
white-space: nowrap;
}
/* ==================== FAQ (1:646) ==================== */
.faq {
position: relative;
width: 375px;
background: #fceedb;
font-family: "Noto Sans","Noto Sans JP","Hiragino Kaku Gothic ProN",sans-serif;
color: #262626;
padding-bottom: 40px;
isolation: isolate;
}
/* Phase 3: 見出し「よくある質問」 */
.faq__heading {
position: relative;
margin: 0 0 33px; /* heading bottom to banner top: y=134 - (55+46) = 33 */
padding: 55px 0 0;
font-family: "Noto Serif JP", serif;
font-weight: 700;
font-size: 32px;
line-height: 1.45;
letter-spacing: 0.04em; /* 1.28px @ 32px */
color: #000;
text-align: center;
}
/* Phase 4a: 黒バナー */
.faq__banner {
/* Frame 20: 375×40, bg black, text 16px Medium #fff3de tracking 0.04em */
width: 375px;
height: 40px;
margin: 0 0 23px; /* banner bottom y=174, first item y=197 → gap 23 */
background: #000;
color: #fff3de;
font-family: "Noto Sans","Noto Sans JP",sans-serif;
font-weight: 500;
font-size: 16px;
line-height: 40px;
letter-spacing: 0.04em;
text-align: center;
}
/* second section banner has top margin to separate from previous list */
.faq__banner--2 {
margin-top: 23px;
}
/* FAQ list */
.faq__list {
list-style: none;
margin: 0;
padding: 0 15px;
display: flex;
flex-direction: column;
gap: 12px;
}
/* Each item */
.faq__item {
background: #fff;
overflow: hidden;
}
/* Question button (closed state header) */
.faq__q {
display: grid;
grid-template-columns: 26px 1fr 16px;
align-items: center;
gap: 8px; /* match Figma: icon end x=41, text starts x=49 → 8px gap */
width: 100%;
padding: 19px 17px 19px 15px;
background: transparent;
border: 0;
cursor: pointer;
text-align: left;
font-family: inherit;
font-size: inherit;
color: inherit;
}
/* Q circle (dark, "Q" cream) */
.faq__q-circle {
width: 26px;
height: 26px;
border-radius: 50%;
background: #262626;
color: #fff3de;
display: flex;
align-items: center;
justify-content: center;
font-family: "Noto Serif JP", serif;
font-weight: 700;
font-size: 15.85px;
line-height: 1;
letter-spacing: 0;
flex-shrink: 0;
padding-bottom: 2px; /* visual centering: Q descender makes baseline-center off; lift letter ~1-2px */
box-sizing: border-box;
}
/* Q text (red) */
.faq__q-text {
font-family: "Noto Sans","Noto Sans JP",sans-serif;
font-weight: 500;
font-size: 16px;
line-height: 1.45;
letter-spacing: 0.04em; /* 0.64px */
color: #c32f24;
}
/* Toggle: + when closed, − when open */
.faq__toggle {
width: 16px;
height: 16px;
position: relative;
flex-shrink: 0;
}
.faq__toggle::before,
.faq__toggle::after {
content: "";
position: absolute;
background: #262626;
transition: transform 0.2s;
}
/* Horizontal bar (always visible) */
.faq__toggle::before {
left: 0;
top: 50%;
width: 16px;
height: 1.5px;
transform: translateY(-50%);
}
/* Vertical bar (hidden when open) */
.faq__toggle::after {
left: 50%;
top: 0;
width: 1.5px;
height: 16px;
transform: translateX(-50%);
}
/* When expanded, hide vertical bar (so only "−" remains) */
.faq__q[aria-expanded="true"] .faq__toggle::after {
transform: translateX(-50%) scaleY(0);
}
/* Answer (hidden when closed) */
.faq__a {
display: grid;
grid-template-columns: 26px 1fr;
gap: 8px; /* same as Q: icon-end x=41, text x=49 */
padding: 0 14px 19px 15px; /* right padding 14 → text width 281 to match Figma wrap */
align-items: flex-start;
}
.faq__a[hidden] {
display: none;
}
.faq__a-circle {
width: 26px;
height: 26px;
border-radius: 50%;
background: #c32f24;
color: #fff3de;
display: flex;
align-items: center;
justify-content: center;
font-family: "Noto Serif JP", serif;
font-weight: 700;
font-size: 15.85px;
line-height: 1;
flex-shrink: 0;
padding-bottom: 2px;
box-sizing: border-box;
}
.faq__a-text {
margin: 0;
font-family: "Noto Sans","Noto Sans JP",sans-serif;
font-weight: 500;
font-size: 15px;
line-height: 1.5;
letter-spacing: 0.04em;
color: #262626;
}
/* ==================== Access (1:755) ==================== */
.access {
position: relative;
width: 375px;
background: #fff;
font-family: "Noto Sans","Noto Sans JP","Hiragino Kaku Gothic ProN",sans-serif;
color: #262626;
padding: 0 0 40px;
isolation: isolate;
}
/* Phase 3: 見出し + 店舗名 */
.access__heading {
margin: 0;
padding: 55px 0 0;
font-family: "Noto Serif JP", serif;
font-weight: 700;
font-size: 32px;
line-height: 1.45;
letter-spacing: 0.04em;
color: #000;
text-align: center;
}
.access__name {
margin: 4px 0 0;
font-family: "Noto Serif JP", serif;
font-weight: 700;
font-size: 18px;
line-height: 1.6;
letter-spacing: 0.04em;
color: #262626;
text-align: center;
}
/* Phase 4a: 画像カルーセル */
.access__carousel {
margin: 20px 0 0;
}
.access__carousel-track {
display: flex;
overflow-x: auto;
scroll-snap-type: x mandatory;
scrollbar-width: none;
-webkit-overflow-scrolling: touch;
cursor: grab;
user-select: none;
}
.access__carousel-track.is-dragging { cursor: grabbing; scroll-snap-type: none; }
.access__carousel-track::-webkit-scrollbar { display: none; }
/* prevent images from being draggable (so mouse drag scrolls instead) */
.access__carousel-page img { user-drag: none; -webkit-user-drag: none; pointer-events: none; }
.access__carousel-page {
flex: 0 0 100%;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 6px;
padding: 0 15px;
box-sizing: border-box;
scroll-snap-align: start;
}
.access__carousel-page img {
width: 100%;
aspect-ratio: 483 / 513;
object-fit: cover;
border-radius: 4px;
display: block;
}
.access__carousel-dots {
display: flex;
justify-content: center;
gap: 8px;
margin: 12px 0 0;
}
.access__carousel-dot {
width: 8px;
height: 8px;
border-radius: 50%;
background: #d4c8b8;
transition: background 0.2s;
}
.access__carousel-dot.is-active {
background: #262626;
}
/* Phase 4b: 店舗情報テーブル */
.access__info {
margin: 24px 24px 0;
padding: 0;
font-family: "Noto Sans","Noto Sans JP",sans-serif;
}
.access__info-row {
display: grid;
grid-template-columns: 70px 1fr;
gap: 24px;
padding: 14px 0;
border-bottom: 1px solid #e5d8c5;
align-items: start;
}
.access__info-row:first-child {
border-top: 1px solid #e5d8c5;
}
.access__info-label {
margin: 0;
font-weight: 500;
font-size: 14px;
line-height: 1.6;
letter-spacing: 0.04em;
color: #262626;
}
.access__info-value {
margin: 0;
font-weight: 500;
font-size: 14px;
line-height: 1.6;
letter-spacing: 0.04em;
color: #262626;
}
.access__info-value a {
color: inherit;
text-decoration: none;
}
/* Phase 4c: Google Maps embed */
.access__map {
margin: 24px 24px 0;
}
.access__map iframe {
width: 100%;
height: 230px;
border: 0;
display: block;
border-radius: 4px;
}
/* ---------- Footer ---------- */
/* ==================== 追従フッターCTA (1:954) - 白背景バー＋ボタン ==================== */
.sticky-cta-bar {
position: fixed;
bottom: 0;
left: 50%;
transform: translateX(-50%);
z-index: 1000;
width: 100%;
max-width: 375px; /* LP コンテンツ幅に揃える */
background: #fff;
padding: 0;
box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.08);
display: flex;
justify-content: center;
}
.sticky-cta {
position: relative;
z-index: 1;
width: 332px;
max-width: calc(100vw - 24px);
display: block;
text-decoration: none;
font-family: "Noto Sans","Noto Sans JP",sans-serif;
}
/* Black pill (完全レンダリング済み画像, 677×129 = 226×43 @ 3x) */
.sticky-cta__pill {
position: relative;
display: block;
width: 226px;
margin: 0 auto;
z-index: 2;
line-height: 0;
}
.sticky-cta__pill-bg {
display: block;
width: 100%;
height: auto;
}
.sticky-cta__pill-text {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
white-space: nowrap;
line-height: 1;
}
/* "初回限定" - Figma: 20.056px Noto Sans SemiBold / JP Bold, white, tracking 0.4011px (≈ 0.02em) */
.sticky-cta__pill-label {
color: #fff;
font-family: "Noto Sans","Noto Sans JP",sans-serif;
font-weight: 600;
font-size: 20.056px;
line-height: 1.34;
letter-spacing: 0.02em;
}
/* "4" "400" - Figma: 31.854px Noto Sans SemiBold, gold #efdc6c, tracking -1.2742px (-0.04em). Shifted up to overflow pill top more. */
.sticky-cta__pill-num {
color: #efdc6c;
font-family: "Noto Sans","Noto Sans JP",sans-serif;
font-weight: 600;
font-size: 31.854px;
line-height: 1.34;
letter-spacing: -0.04em;
position: relative;
top: -4px;
}
/* "," - Figma: 31.854px Noto Sans Medium / JP Bold, gold #efdc6c, tracking -1.2742px */
.sticky-cta__pill-comma {
color: #efdc6c;
font-family: "Noto Sans","Noto Sans JP",sans-serif;
font-weight: 500;
font-size: 31.854px;
line-height: 1.34;
letter-spacing: -0.04em;
position: relative;
top: -4px;
}
/* "円" - Figma: 20.056px gold #efdc6c, with margin from preceding digit */
.sticky-cta__pill-yen {
color: #efdc6c;
font-family: "Noto Sans","Noto Sans JP",sans-serif;
font-weight: 600;
font-size: 20.056px;
line-height: 1.34;
letter-spacing: 0.02em;
margin-left: 4px; /* gap between "400" and "円" */
}
/* Red button (画像背景, 332×78) */
.sticky-cta__btn {
position: relative;
display: block;
width: 100%;
height: 78px;
margin-top: -18px; /* pill overlaps button more so pill sits deeper */
}
.sticky-cta__btn-bg {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
display: block;
}
/* Figma: 29.494px Noto Sans SemiBold / Noto Sans JP Bold, white, tracking 0.5899px, centered in button (78×332). Slightly lower than center to balance with pill above. */
.sticky-cta__btn-text {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%) translateY(4px);
color: #fff;
font-family: "Noto Sans","Noto Sans JP",sans-serif;
font-weight: 600;
font-size: 29.494px;
line-height: 1.34;
letter-spacing: 0.02em; /* 0.5899px @ 29.494 = 0.02em */
white-space: nowrap;
text-align: center;
}
/* ==================== Footer / Copyright (1:817) ==================== */
.site-footer {
/* Figma: bg black, padding 2px 69px, text 11px Noto Sans SemiBold/JP Bold, white, tracking 0.04em, lh 1.45 */
width: 375px;
background: #000;
color: #fff;
padding: 2px 69px;
text-align: center;
font-family: "Noto Sans","Noto Sans JP",sans-serif;
font-weight: 600;
font-size: 11px;
line-height: 1.45;
letter-spacing: 0.04em; /* 0.44px @ 11px */
box-sizing: border-box;
}
.site-footer p { margin: 0; white-space: nowrap; }
/* ---------- Larger screens (max 480px wrapper) ---------- */
/* (Removed old dark bg rule — desktop uses cream bg now via @media 768px) */