/*
* Section CSS: 初回来店の流れ（カウンセリング〜施術〜アフターケア）
* Page : Menu
* Order : 4
* Prefix : menu-s04
*
* Enqueue in functions.php:
* wp_enqueue_style(
* 'menu-s04-flow',
* get_template_directory_uri() . '/assets/css/sections/menu-s04-flow.css',
* [],
* '1.0.0'
* );
*
* Dependencies:
* - reset.css (loaded globally — do not redeclare reset rules here)
* - common.css (loaded globally — use var(--common-*) references only)
*
* Font loading (add to document or functions.php):
*
*
*
*/
/* ============================================================
:root — Section-scoped design tokens (menu-s04)
These are values specific to this section only.
Common variables from common.css are referenced via var()
without re-declaration.
============================================================ */
:root {
/* --- Colors --- */
--menu-s04-color-bg: #FDF2F8;
--menu-s04-color-timeline-line: #F9A8D4;
--menu-s04-color-marker-fill: #EC4899;
--menu-s04-color-marker-border: #FDF2F8;
--menu-s04-color-step-number-deco: rgba(249, 168, 212, 0.60);
--menu-s04-color-text-primary: #831843;
--menu-s04-color-text-secondary: #64748B;
--menu-s04-color-focus: #8B5CF6;
--menu-s04-color-mobile-overlay-bg: rgba(253, 242, 248, 0.85);
/* --- Typography: font families --- */
--menu-s04-font-display:
'Playfair Display', Georgia, serif;
--menu-s04-font-body:
'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
/* --- Typography: sizes --- */
--menu-s04-fs-headline: clamp(2.5rem, 5vw, 4rem);
--menu-s04-fs-subheadline: 1rem;
--menu-s04-fs-step-number: clamp(1.5rem, 3vw, 2.25rem);
--menu-s04-fs-step-title: clamp(1.5rem, 3vw, 2.25rem);
--menu-s04-fs-body: 1rem;
--menu-s04-fs-duration: 1rem; /* raised from 0.875rem for A4 compliance */
--menu-s04-fs-overlay-number: 1.25rem;
/* --- Typography: weights --- */
--menu-s04-fw-headline: 600;
--menu-s04-fw-step-number: 400;
--menu-s04-fw-step-title: 500;
--menu-s04-fw-body: 300;
--menu-s04-fw-duration: 300;
/* --- Typography: line-heights --- */
--menu-s04-lh-headline: 1.2;
--menu-s04-lh-body: 1.75;
--menu-s04-lh-step-title: 1.3;
--menu-s04-lh-step-num: 1;
/* --- Spacing --- */
--menu-s04-section-pt-desktop: 64px;
--menu-s04-section-pb-desktop: 32px;
--menu-s04-section-pt-mobile: 32px;
--menu-s04-section-pb-mobile: 32px;
--menu-s04-gap-steps-desktop: 64px;
--menu-s04-gap-steps-mobile: 64px;
--menu-s04-margin-desktop: 64px;
--menu-s04-margin-mobile: 24px;
--menu-s04-photo-overhang: 16px;
--menu-s04-step-num-overlap: -8px;
--menu-s04-timeline-diameter: 16px;
--menu-s04-timeline-line-width: 1px;
--menu-s04-timeline-axis-left: 16px; /* mobile left offset */
/* --- Grid --- */
--menu-s04-max-width: 1200px;
/* --- Descriptions max-width --- */
--menu-s04-desc-max-width: 480px;
/* --- MI-1: Step card fade-in + line draw-on --- */
--menu-s04-animate-duration: 700ms;
--menu-s04-animate-easing:
cubic-bezier(0.25, 0.46, 0.45, 0.94);
--menu-s04-animate-translate-y: 24px;
/* --- MI-3: Marker pop-in --- */
--menu-s04-marker-scale-duration: 300ms;
--menu-s04-marker-border-duration: 150ms;
--menu-s04-marker-easing:
cubic-bezier(0.34, 1.56, 0.64, 1);
--menu-s04-marker-delay: 200ms;
/* --- Mobile overlay --- */
--menu-s04-overlay-padding: 8px 12px;
}
/* ============================================================
Section layout — mobile-first base
============================================================ */
.menu-s04__section {
background-color: var(--menu-s04-color-bg);
padding-top: var(--menu-s04-section-pt-mobile);
padding-bottom: var(--menu-s04-section-pb-mobile);
overflow: hidden; /* contain parallax overflow */
}
.menu-s04__inner {
max-width: var(--menu-s04-max-width);
margin-inline: auto;
padding-inline: var(--menu-s04-margin-mobile);
}
/* ============================================================
Section header
============================================================ */
.menu-s04__header {
margin-bottom: var(--menu-s04-gap-steps-mobile);
/* Left-aligned — intentional asymmetry per design spec */
}
.menu-s04__headline {
font-family: var(--menu-s04-font-display);
font-weight: var(--menu-s04-fw-headline);
font-size: var(--menu-s04-fs-headline);
line-height: var(--menu-s04-lh-headline);
letter-spacing: 0;
color: var(--menu-s04-color-text-primary);
/* No margin reset — inherited from reset.css */
}
.menu-s04__subheadline {
font-family: var(--menu-s04-font-body);
font-weight: var(--menu-s04-fw-body);
font-size: var(--menu-s04-fs-subheadline);
line-height: var(--menu-s04-lh-body);
color: var(--menu-s04-color-text-secondary);
margin-top: 16px;
}
/* ============================================================
Timeline wrapper — positions axis and steps together
============================================================ */
.menu-s04__timeline-wrapper {
position: relative;
}
/* ============================================================
Timeline axis (vertical line + markers)
— Absolutely positioned over the left edge
============================================================ */
.menu-s04__timeline-axis {
position: absolute;
top: 0;
left: var(--menu-s04-timeline-axis-left);
bottom: 0;
width: var(--menu-s04-timeline-diameter);
pointer-events: none;
}
/* Individual line segments between markers */
.menu-s04__timeline-line {
position: absolute;
left: calc(
var(--menu-s04-timeline-diameter) / 2
- var(--menu-s04-timeline-line-width) / 2
);
width: var(--menu-s04-timeline-line-width);
background-color: var(--menu-s04-color-timeline-line);
transform-origin: top center;
}
/* Position each line segment between its markers */
/* These top/height values are managed via JS data attributes
but CSS provides base dimensions */
.menu-s04__timeline-line[data-line-index="0"] {
top: 8px; /* starts at marker 0 center */
height: calc(var(--menu-s04-step-line-0-height, 33%));
}
.menu-s04__timeline-line[data-line-index="1"] {
top: calc(var(--menu-s04-step-line-1-top, 33%));
height: calc(var(--menu-s04-step-line-1-height, 34%));
}
.menu-s04__timeline-line[data-line-index="2"] {
top: calc(var(--menu-s04-step-line-2-top, 67%));
height: calc(var(--menu-s04-step-line-2-height, 33%));
}
/* Marker circles */
.menu-s04__timeline-marker {
position: absolute;
left: 0;
width: var(--menu-s04-timeline-diameter);
height: var(--menu-s04-timeline-diameter);
border-radius: 50%;
background-color: var(--menu-s04-color-marker-fill);
border: 3px solid var(--menu-s04-color-marker-border);
transform-origin: center center;
}
.menu-s04__timeline-marker[data-marker-index="0"] {
top: 0;
}
.menu-s04__timeline-marker[data-marker-index="1"] {
top: 50%;
transform: translateY(-50%) scale(0); /* initial state for MI-3 */
}
.menu-s04__timeline-marker[data-marker-index="2"] {
bottom: 0;
}
/* ============================================================
Steps list
============================================================ */
.menu-s04__steps-list {
list-style: none;
padding-left: calc(
var(--menu-s04-timeline-axis-left)
+ var(--menu-s04-timeline-diameter)
+ 24px
);
/* Mobile: single-column stack */
display: flex;
flex-direction: column;
gap: var(--menu-s04-gap-steps-mobile);
}
/* ============================================================
Individual step item — mobile base
============================================================ */
.menu-s04__step {
display: flex;
flex-direction: column; /* photo above text on mobile */
gap: 24px;
}
/* ============================================================
Step figure (photo container)
============================================================ */
.menu-s04__step-figure {
position: relative;
/* Mobile: fixed height per spec */
height: 300px;
overflow: hidden;
border-radius: 4px;
}
.menu-s04__step-photo {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
/* JS will apply translateY for parallax (MI-2) */
will-change: transform;
}
/* ============================================================
Mobile step-number overlay on photo
============================================================ */
.menu-s04__step-number-overlay {
position: absolute;
top: 12px;
left: 12px;
font-family: var(--menu-s04-font-display);
font-weight: var(--menu-s04-fw-step-number);
font-size: var(--menu-s04-fs-overlay-number);
line-height: var(--menu-s04-lh-step-num);
color: var(--menu-s04-color-text-primary);
background-color: var(--menu-s04-color-mobile-overlay-bg);
padding: var(--menu-s04-overlay-padding);
border-radius: 2px;
}
/* ============================================================
Step text block
============================================================ */
.menu-s04__step-text {
display: flex;
flex-direction: column;
align-items: flex-start;
}
/* Decorative step number (01 / 02 / 03) */
.menu-s04__step-number-deco {
display: block;
font-family: var(--menu-s04-font-display);
font-weight: var(--menu-s04-fw-step-number);
font-size: var(--menu-s04-fs-step-number);
line-height: var(--menu-s04-lh-step-num);
color: var(--menu-s04-color-step-number-deco);
/* Negative overlap: number bottom touches title top */
margin-bottom: var(--menu-s04-step-num-overlap);
}
.menu-s04__step-title {
font-family: var(--menu-s04-font-display);
font-weight: var(--menu-s04-fw-step-title);
font-size: var(--menu-s04-fs-step-title);
line-height: var(--menu-s04-lh-step-title);
letter-spacing: 0;
color: var(--menu-s04-color-text-primary);
margin-top: 0;
margin-bottom: 16px;
}
.menu-s04__step-description {
font-family: var(--menu-s04-font-body);
font-weight: var(--menu-s04-fw-body);
font-size: var(--menu-s04-fs-body);
line-height: var(--menu-s04-lh-body);
color: var(--menu-s04-color-text-secondary);
max-width: var(--menu-s04-desc-max-width);
margin-bottom: 12px;
}
.menu-s04__step-duration {
display: block;
font-family: var(--menu-s04-font-body);
font-weight: var(--menu-s04-fw-duration);
font-size: var(--menu-s04-fs-duration);
line-height: var(--menu-s04-lh-body);
color: var(--menu-s04-color-text-secondary);
}
/* ============================================================
Desktop layout — 12-column asymmetric grid
============================================================ */
@media (width >= 768px) {
.menu-s04__section {
padding-top: var(--menu-s04-section-pt-desktop);
padding-bottom: var(--menu-s04-section-pb-desktop);
}
.menu-s04__inner {
padding-inline: var(--menu-s04-margin-desktop);
}
.menu-s04__header {
margin-bottom: var(--menu-s04-gap-steps-desktop);
max-width: 700px;
}
.menu-s04__timeline-axis {
left: 0;
}
.menu-s04__steps-list {
padding-left: calc(var(--menu-s04-timeline-diameter) + 48px);
gap: var(--menu-s04-gap-steps-desktop);
}
/* Desktop step: side-by-side via 12-col grid */
.menu-s04__step {
display: grid;
grid-template-columns: repeat(12, 1fr);
column-gap: 24px;
align-items: center;
flex-direction: unset; /* override mobile flex */
}
/*
* Odd steps: text col 1-6, photo col 7-12
* (within the content area after timeline offset)
*/
.menu-s04__step--odd .menu-s04__step-text {
grid-column: 1 / 7;
grid-row: 1;
}
.menu-s04__step--odd .menu-s04__step-figure {
grid-column: 7 / 13;
grid-row: 1;
/* Overhang: exceed grid boundary by 16px on top edge */
margin-top: calc(-1 * var(--menu-s04-photo-overhang));
height: auto;
aspect-ratio: 3 / 4;
}
/*
* Even steps: photo col 1-5 (left-heavy), text col 6-11
*/
.menu-s04__step--even .menu-s04__step-figure {
grid-column: 1 / 6;
grid-row: 1;
/* Overhang: exceed grid boundary by 16px on bottom edge */
margin-bottom: calc(-1 * var(--menu-s04-photo-overhang));
height: auto;
aspect-ratio: 3 / 4;
}
.menu-s04__step--even .menu-s04__step-text {
grid-column: 6 / 12;
grid-row: 1;
}
/* Hide mobile overlay on desktop — number deco handles it */
.menu-s04__step-number-overlay {
display: none;
}
/* Full photo height on desktop */
.menu-s04__step-figure {
height: auto;
overflow: hidden;
}
.menu-s04__step-photo {
width: 100%;
height: 100%;
display: block;
}
}
@media (425px <= width <= 768px) {
.menu-s04__step-photo.figure-01 {
object-position: center 40%;
}
.menu-s04__step-photo.figure-03 {
object-position: center 25%;
}
}
/* ============================================================
MI-1 — Step card fade-in animation (scroll-triggered via JS)
Initial state: js-animate-hidden class
Visible state: js-animate-visible class (JS adds this)
============================================================ */
/* Initial hidden state — CSS defines this, not JS */
.menu-s04-js-animate-hidden {
opacity: 0;
transform: translateY(var(--menu-s04-animate-translate-y));
}
/* Visible state — JS adds this class via Intersection Observer */
.menu-s04-js-animate-visible {
opacity: 1;
transform: translateY(0);
transition:
opacity var(--menu-s04-animate-duration)
var(--menu-s04-animate-easing),
transform var(--menu-s04-animate-duration)
var(--menu-s04-animate-easing);
}
/* ============================================================
MI-1 — Timeline line draw-on animation (scroll-triggered)
scaleY(0) → scaleY(1) from top center
============================================================ */
/* Initial hidden state for timeline lines */
.menu-s04-js-line-hidden {
transform: scaleY(0);
transform-origin: top center;
}
/* Visible state — JS adds this class */
.menu-s04-js-line-visible {
transform: scaleY(1);
transition:
transform var(--menu-s04-animate-duration)
var(--menu-s04-animate-easing);
}
/* ============================================================
MI-3 — Timeline marker pop-in animation
scale(0) → scale(1) with bounce easing
============================================================ */
/* Initial hidden state for markers */
.menu-s04-js-marker-hidden {
transform: scale(0);
transform-origin: center center;
border-color: var(--menu-s04-color-marker-border);
}
/* Visible state — JS adds this class (200ms after line draw-on) */
.menu-s04-js-marker-visible {
transform: scale(1);
border-color: var(--menu-s04-color-marker-fill);
transition:
transform var(--menu-s04-marker-scale-duration)
var(--menu-s04-marker-easing),
border-color var(--menu-s04-marker-border-duration)
var(--menu-s04-marker-easing);
}
/* ============================================================
Focus indicators — A6 compliance
============================================================ */
.menu-s04__section a:focus-visible,
.menu-s04__section button:focus-visible {
outline: 2px solid var(--menu-s04-color-focus);
outline-offset: 3px;
/* Touch target minimum A8 */
min-height: 44px;
min-width: 44px;
}
/* ============================================================
prefers-reduced-motion — scoped to this section only
============================================================ */
@media (prefers-reduced-motion: reduce) {
.menu-s04__section *,
.menu-s04__section *::before,
.menu-s04__section *::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
}
}