/* ============================================================
FeTéE — Landing Page
============================================================ */
:root {
--cream: #fcf9ed; /* main background */
--gray: #eae8e2; /* hair-oil-to-go band */
--beige: #fbf3dc; /* official instagram band */
--white: #ffffff;
--ink: #63605c; /* headings & names */
--text: #666461; /* body copy */
--muted: #a3a19c; /* captions / fine print */
--faint: #b7b5b0; /* numbers / lightest */
--line: #dedbd3; /* hairlines */
/* Pretendard JP = the leaflet's typeface (loaded from jsDelivr, variable
weight); Jost / Noto Sans JP are the pre-2026-07-13 faces, kept as
fallbacks in case the CDN is unreachable */
--sans:
"Pretendard JP Variable", "Pretendard JP", "Jost", "Noto Sans JP",
-apple-system, sans-serif;
--jp:
"Pretendard JP Variable", "Pretendard JP", "Noto Sans JP", "Jost",
sans-serif;
--inter:
"Inter", -apple-system, sans-serif; /* product spec text, band caption */
--mono:
"Roboto Mono", monospace; /* fragrance notes — the leaflet's typeface
(design-time face, restored 2026-07-14) */
--maxw: 1180px;
}
* {
box-sizing: border-box;
}
html {
scroll-behavior: smooth;
}
html,
body {
overflow-x: clip;
}
body {
margin: 0;
background: var(--cream);
color: var(--text);
font-family: var(--jp);
font-weight: 300;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
line-height: 1.8;
}
img {
display: block;
max-width: 100%;
}
picture {
display: block;
}
picture img {
width: 100%;
}
/* responsive display helpers: .pc = desktop only, .sp = mobile only.
.sp is hidden by default; the mobile media query restores it (and hides .pc). */
.sp {
display: none;
}
a {
color: inherit;
text-decoration: none;
}
h2,
h3,
h4 {
margin: 0;
font-weight: 400;
}
/* ---------- logo (inline svg, uses currentColor) ---------- */
.logo-mark,
.foot-logo {
display: block;
}
/* ============================================================
Header
============================================================ */
.site-header {
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 70;
display: flex;
align-items: center;
justify-content: space-between;
padding: 28px clamp(24px, 4.6vw, 55px);
transition:
background-color 0.35s ease,
padding 0.35s ease,
box-shadow 0.35s ease;
}
/* scrolled state — a subtle cream bar so content stays legible */
.site-header.scrolled {
background-color: transparent;
padding-top: 18px;
padding-bottom: 18px;
}
.logo {
color: var(--white);
line-height: 0;
}
.site-header.scrolled .logo {
color: var(--ink);
}
.logo-mark {
width: 102px;
height: auto;
}
.nav {
display: flex;
gap: clamp(26px, 3vw, 52px);
}
.nav a {
font-family: var(--sans);
font-size: 14px;
font-weight: 400;
letter-spacing: 0.04em;
color: #9d9d9e;
transition: color 0.25s;
}
.nav a:hover {
color: #6f6f70;
}
.site-header.scrolled .nav a {
color: #6f6f70;
}
/* hamburger + mobile drawer — hidden on desktop, shown ≤768px */
.hamburger,
.mobile-menu {
display: none;
}
/* ============================================================
Hero
============================================================ */
.hero {
width: 100%;
}
.hero img {
width: 100%;
height: auto;
object-fit: cover;
}
/* ============================================================
Concept
============================================================ */
.concept {
max-width: 100%;
display: flex;
align-items: center;
}
.concept-wrapper {
max-width: 1132px;
margin: 0 auto;
padding: clamp(90px, 12vw, 225px) 40px clamp(80px, 15vw, 220px);
display: flex;
align-items: center;
gap: clamp(40px, 6vw, 100px);
}
/* leaflet-matched: left-aligned, tighter tracking (client feedback 2026-07-09) */
.concept-text {
flex: 0 1 27%;
text-align: left;
}
.concept-title {
font-family: var(--jp);
font-size: 20px;
font-weight: 500;
letter-spacing: 0.05em;
color: var(--ink);
margin-bottom: 28px;
}
.concept-body {
margin: 0;
font-size: 12px;
font-weight: normal;
line-height: 2.1;
letter-spacing: 0.02em;
color: var(--text);
/* line breaks only at
— never auto-wrap mid-phrase */
white-space: nowrap;
}
/* paragraph gap inside the concept copy — a
can only skip a full line
(≈30px), so a block spacer makes the gap tunable; ~half a line for now */
.concept-body .p-gap {
display: block;
height: 1.25em;
}
.concept-img {
flex: 0 1 72%;
}
.concept-img img {
width: 100%;
height: auto;
max-width: 650px;
}
/* PC: keep the concept image within the viewport so the panel stays ~one
screen tall — this leaves cream breathing room below the image as the band
scrolls up over it during the recede animation (mobile is full-width). */
@media (min-width: 769px) {
/* solid ~220px whitespace above & below the concept content on PC */
.concept-wrapper {
padding-top: 220px;
padding-bottom: 220px;
padding-left: 0;
padding-right: 0;
}
.concept-img {
display: flex;
justify-content: center;
}
.concept-img img {
width: 100%;
height: auto;
max-width: 650px;
}
}
/* ============================================================
Feature band
============================================================ */
.band {
position: relative;
width: 100%;
}
.band picture img {
width: 100%;
height: auto;
}
.band-caption {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
margin: 0;
/* SVG wordmark ("BUILT SOFT. LASTS LONG.") — scales at its own aspect ratio */
width: clamp(170px, 17.5vw, 244px);
height: auto;
}
/* ============================================================
Product
============================================================ */
.product {
max-width: 100%;
margin: 0 auto;
padding: clamp(70px, 12vw, 140px) 40px clamp(60px, 8vw, 110px);
}
.section-label {
text-align: center;
font-family: var(--sans);
font-size: 30px;
font-weight: 400;
letter-spacing: 0.16em;
color: var(--ink);
margin: 0 0 clamp(60px, 10vw, 150px);
text-indent: 0.16em;
}
.product-wrapper {
max-width: 950px;
margin: 0 auto;
}
.prod-row {
display: flex;
align-items: center;
gap: clamp(40px, 6vw, 80px);
max-width: 100%;
margin: 0 auto clamp(70px, 9vw, 120px);
}
.prod-row:last-child {
margin-bottom: 0;
}
.prod-img {
flex: 0 0 47%;
}
.prod-img img {
width: 100%;
}
.prod-info {
flex: 1;
padding-top: 12px;
}
.prod-num {
display: block;
font-family: var(--inter);
font-size: 14px;
color: var(--text);
font-weight: lighter;
margin-bottom: 4px;
}
.prod-name {
font-family: var(--sans);
font-size: clamp(22px, 2vw, 26px);
font-weight: 300;
letter-spacing: 0.06em;
color: var(--ink);
margin-bottom: 24px;
}
.prod-desc {
font-weight: normal;
margin: 0 0 27px;
font-size: 13.5px;
line-height: 2.15;
letter-spacing: 0.04em;
color: var(--text);
}
.notes {
margin-bottom: 10px;
}
.notes-title {
font-family: var(--mono);
font-size: 12px;
font-weight: normal;
letter-spacing: 0.1em;
color: var(--text);
margin: 0 0 8px;
}
.notes-list {
margin: 0;
border-bottom: 1px solid var(--text);
}
.note-row {
display: flex;
gap: 8px;
padding: 7px 2px;
border-top: 1px solid var(--text);
font-weight: normal;
}
.note-row dt {
flex: 0 0 92px;
margin: 0;
font-family: var(--mono);
font-size: 12px;
letter-spacing: 0.06em;
color: var(--text);
}
.note-row dd {
margin: 0;
font-family: var(--mono);
font-size: 12px;
letter-spacing: 0.04em;
color: var(--text);
}
/* two-column grid so the ¥ prices start (and end) on the same vertical
line whatever the size label's width (client feedback 2026-07-14) */
.prod-price {
margin: 0;
display: grid;
grid-template-columns: max-content max-content;
column-gap: 12px;
justify-content: start;
font-family: var(--inter);
font-size: 12px;
line-height: 1.9;
color: var(--text);
}
/* ============================================================
Oils
============================================================ */
.oils {
max-width: 100%;
margin: 0 auto;
padding: clamp(50px, 7vw, 90px) 40px clamp(70px, 9vw, 120px);
}
.oils-head {
font-family: var(--jp);
font-size: clamp(20px, 2.1vw, 20px);
font-weight: normal;
line-height: 1.6;
letter-spacing: 0.08em;
color: var(--text);
}
.olis-wrapper {
max-width: 1368px;
margin: 0 auto;
}
.oils-row {
display: flex;
gap: clamp(30px, 4vw, 60px);
align-items: flex-start;
}
.oils-list {
flex: 1;
}
.oils-img {
flex: 0 0 44%;
align-self: stretch;
}
.oils-img img {
width: 100%;
height: 100%;
object-fit: cover;
}
/* PC: match Figma — the right-hand image starts ABOVE the left column. A top
spacer row (grid-row 1) offsets the heading/list downward while the image
spans from the top, so the image's top edge sits ~236px above the heading. */
@media (min-width: 769px) {
.olis-wrapper {
display: grid;
grid-template-columns: 1fr 43%;
grid-template-rows: clamp(150px, 16vw, 236px) auto auto;
column-gap: clamp(40px, 5vw, 48px);
align-items: start;
}
.oils-row {
display: contents;
}
.oils-head {
grid-column: 1;
grid-row: 2;
margin-bottom: 50px;
}
.oils-list {
grid-column: 1;
grid-row: 3;
}
.oils-img {
grid-column: 2;
grid-row: 1 / 4;
align-self: start;
min-height: 0;
}
.oils-img img {
margin-top: 120px;
width: 100%;
height: auto;
aspect-ratio: 590 / 844; /* Figma image crop */
object-fit: cover;
}
}
.oil {
display: flex;
gap: clamp(24px, 2vw, 30px);
margin-bottom: 20px;
}
.oil:last-child {
margin-bottom: 0;
}
.oil-label {
flex: 0 0 25%;
}
.oil-label h4 {
font-family: var(--sans);
font-size: 14px;
font-weight: 400;
letter-spacing: 0.03em;
color: var(--text);
}
.oil-label span {
display: block;
margin-top: 6px;
font-size: 12px;
letter-spacing: 0em;
color: var(--text);
}
.oil-desc {
flex: 1;
}
.oil-desc p {
margin: 0;
font-size: 12px;
line-height: 1.95;
letter-spacing: 0.01em;
color: var(--text);
font-weight: normal;
}
.oil-ing {
margin-top: 10px !important;
font-size: 10px !important;
line-height: 1.7 !important;
color: var(--text) !important;
letter-spacing: 0.01em !important;
/* was `lighter` — too thin to read at 10px (client feedback 2026-07-14) */
font-weight: 400 !important;
}
/* ============================================================
How To Use
============================================================ */
.howto {
max-width: 100%;
margin: 0 auto;
padding: clamp(40px, 5vw, 70px) 40px clamp(70px, 9vw, 120px);
}
.howto-wrapper {
max-width: 1240px;
margin: 0 auto;
display: flex;
gap: clamp(40px, 6vw, 95px);
align-items: flex-end;
}
.howto-img {
flex: 0 0 46%;
}
.howto-img img {
width: 100%;
}
.howto-text {
flex: 1;
padding-bottom: 80px;
}
.howto-head {
font-family: var(--sans);
font-size: clamp(26px, 2.6vw, 30px);
/* weight matched to the Products section label (client feedback 2026-07-09) */
font-weight: 400;
letter-spacing: 0.04em;
color: var(--ink);
margin-bottom: clamp(30px, 5vw, 56px);
}
.ht-block {
margin-bottom: 44px;
}
.ht-block:last-child {
margin-bottom: 0;
}
.ht-title {
font-family: var(--sans);
font-size: 20px;
font-weight: 400;
letter-spacing: 0.14em;
color: var(--ink);
margin-bottom: 8px;
}
.ht-body {
margin: 0;
font-size: 14px;
font-weight: normal;
line-height: 1.85;
letter-spacing: 0.03em;
color: var(--text);
}
.ht-box {
margin-top: 12px;
padding: 4px 10px;
border: 1px solid #cfccc3;
font-size: 14px;
letter-spacing: 0.02em;
color: var(--text);
font-weight: normal;
display: inline-block;
}
.ht-box-sp {
display: none;
}
.ht-fine {
margin: 0;
font-size: 12px;
letter-spacing: 0.02em;
color: var(--text);
font-weight: normal;
margin-top: 8px;
}
/* ============================================================
Hair Oil To Go
============================================================ */
.togo {
background: var(--gray);
}
.togo-inner {
max-width: 100%;
margin: 0 auto;
padding: clamp(60px, 8vw, 110px) 40px;
}
.togo-wrapper {
max-width: 1015px;
margin: 0 auto;
display: flex;
gap: clamp(40px, 6vw, 100px);
align-items: center;
}
.togo-img {
flex: 0 0 49%;
}
.togo-img img {
width: 100%;
}
.togo-text {
flex: 1;
}
.togo-head {
font-family: var(--sans);
font-size: clamp(24px, 2.4vw, 30px);
font-weight: normal;
letter-spacing: 0.04em;
color: var(--text);
margin-bottom: clamp(32px, 4vw, 40px);
}
.togo-lead {
margin: 0 0 clamp(32px, 5vw, 32px);
font-size: clamp(16px, 1.4vw, 20px);
font-weight: normal;
line-height: 1.9;
letter-spacing: 0.1em;
color: var(--text);
}
.togo-feat {
margin-bottom: 16px;
}
.togo-feat:last-child {
margin-bottom: 0;
}
.togo-feat h4 {
font-family: var(--jp);
font-size: 14px;
font-weight: 400;
letter-spacing: 0.04em;
color: var(--text);
margin-bottom: 7px;
}
.togo-feat p {
margin: 0;
font-size: 12px;
line-height: 1.75;
letter-spacing: 0.03em;
color: var(--text);
/* was `lighter` — too thin to read (client feedback 2026-07-14) */
font-weight: 400;
}
/* small annotation beside a feature heading (e.g. "*28mLサイズ") */
.togo-feat h4 .togo-note {
font-size: 10px;
font-weight: 400;
letter-spacing: 0.02em;
margin-left: 10px;
}
/* ============================================================
Gallery
============================================================ */
.gallery {
padding: clamp(80px, 11vw, 150px) clamp(32px, 6vw, 90px);
/* the grid is fluid (capped at 930px) and centered, leaving generous side
margins and gutters between the images */
display: flex;
justify-content: center;
}
.grid {
display: grid;
width: 100%;
max-width: 930px;
grid-template-columns: repeat(6, 1fr);
row-gap: clamp(24px, 2.6vw, 38px);
column-gap: clamp(24px, 3.4vw, 50px);
}
.grid img {
width: 100%;
aspect-ratio: 207 / 265;
object-fit: cover;
cursor: pointer;
}
/* scroll reveal — rows fade in one by one. The .g-fade hook is added by JS,
so the grid stays visible when JS / IntersectionObserver is unavailable.
Slow, soft float-in (2s ease-out, gentle lift) per client feedback
2026-07-22 — もっとゆっくりふわっと. */
.g-fade img {
opacity: 0;
transform: translateY(20px);
transition:
opacity 2s cubic-bezier(0.22, 0.61, 0.36, 1),
transform 2s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.g-fade img.g-in {
opacity: 1;
transform: none;
}
/* ============================================================
Official Instagram band
============================================================ */
.insta {
background: var(--beige);
text-align: center;
padding-top: 116px;
padding-bottom: 86px;
}
.insta-title {
font-family: var(--sans);
font-size: 20px;
font-weight: 400;
letter-spacing: 0.06em;
color: var(--ink);
margin: 0 0 26px;
}
.ig-link {
display: inline-block;
color: var(--muted);
transition: color 0.25s;
}
.ig-link svg {
width: 40px;
height: 40px;
}
.ig-link:hover {
color: var(--ink);
}
/* ============================================================
Footer
============================================================ */
.site-footer {
background: var(--white);
text-align: center;
padding: clamp(38px, 5vw, 40px) 20px clamp(120px, 10vw, 136px);
}
.foot-logo {
width: 70px;
height: auto;
color: var(--ink);
margin: 0 auto 30px;
}
.foot-links {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
gap: 15px;
font-size: 14px;
letter-spacing: 0.04em;
color: #8a8884;
}
.foot-links a {
transition: color 0.25s;
}
.foot-links a:hover {
color: var(--ink);
}
.foot-links .sep {
color: #cfccc4;
}
.copy {
margin: 22px 0 0;
font-family: var(--sans);
font-size: 14px;
letter-spacing: 0.05em;
color: var(--muted);
}
/* ============================================================
Sticky stacking — the panels below pin and are covered by the
next section. One-screen panels (hero) pin at the top;
taller panels are bottom-pinned by JS (top = 100vh − height) so
they read in full, then hold while the next section covers
them. Covered panels recede (GSAP parallax).
product & oils are excluded: they scroll normally with no
pinning / parallax (client feedback 2026-07-08). concept & band
likewise, so the braid-image seam scrolls with no parallax on
either side (client feedback 2026-07-22).
============================================================ */
.hero,
.howto,
.togo {
min-height: 100vh;
position: sticky;
top: 0;
}
/* normal-flow sections — positioned so their z-index still paints
them over the pinned panel beneath. concept keeps its ~full-screen
height even though it no longer pins. */
.concept,
.band,
.product,
.oils {
position: relative;
}
.concept {
min-height: 100vh;
}
.togo {
min-height: initial;
}
/* gallery / Instagram / footer scroll normally, layered above
(higher z-index) so they cover the pinned panels */
.gallery,
.insta,
.site-footer {
position: relative;
}
/* rising z-index so each section is painted over the previous one */
.hero {
z-index: 1;
}
.concept {
z-index: 2;
}
.band {
z-index: 3;
}
.product {
z-index: 4;
}
.oils {
z-index: 5;
}
.howto {
z-index: 6;
}
.togo {
z-index: 7;
}
.gallery {
z-index: 8;
}
.insta {
z-index: 9;
}
.site-footer {
z-index: 10;
}
/* opaque backgrounds so a section fully covers the one behind it.
These also back-fill each panel while its inner content recedes, so the
panels stacked behind never show through the fade. */
.hero,
.concept,
.band,
.product,
.oils,
.howto,
.gallery {
background-color: var(--cream);
}
/* .togo (gray), .insta (beige), .site-footer (white) supply their own */
/* full-bleed image panels fill the viewport height */
.hero img,
.band picture img {
height: 100vh;
object-fit: cover;
}
.band {
overflow: hidden;
}
/* Each panel recedes its INNER content (not the ), so the section's
opaque background stays solid and keeps hiding the panels stacked behind it
— otherwise they'd show through the fade. */
.hero img,
.howto-wrapper,
.togo-inner {
transform-origin: center center;
will-change: transform, opacity;
}
.sp {
display: none;
}
.pc {
display: block;
}
@media (prefers-reduced-motion: reduce) {
.hero img,
.howto-wrapper,
.togo-inner {
transform: none !important;
opacity: 1 !important;
will-change: auto;
}
/* the bottom-pin JS is skipped, so the tall content panel would freeze at
the top and hide its lower content — let it scroll normally
(position: relative keeps its z-index cover order) */
.howto {
position: relative;
min-height: 0;
}
}
/* mobile + reduced motion: the bottom-pin JS is skipped, so the tall panels
would freeze at the top — disable pinning entirely and just scroll */
@media (max-width: 768px) and (prefers-reduced-motion: reduce) {
.hero,
.togo {
position: static;
}
.hero img,
.band picture img {
height: auto;
}
}
/* ============================================================
Responsive — Mobile (TOP-SP), breakpoint 768px
Design frame is 750px (= 375pt @2x); sizes are ~measured ÷2.
============================================================ */
@media (max-width: 768px) {
/* mobile: same stacked-cover effect as desktop.
hero is a one-screen panel that pins at the top; the taller panels
(howto, togo) are bottom-pinned by JS (top = 100vh − their height) —
they read in full, then hold while the next section scrolls up to
cover them. concept, band, product & oils scroll normally. (position:
sticky / top / min-height and the 100vh panel images all come from the
global sticky-stacking rules.) */
/* ---------- Header ---------- */
.pc {
display: none;
}
.sp {
display: block;
}
.site-header {
padding: 18px 16px;
align-items: flex-start;
}
.site-header.scrolled {
padding-top: 18px;
padding-bottom: 18px;
align-items: center;
}
.logo {
color: var(--ink);
} /* dark wordmark on mobile */
.logo-mark {
width: 74px;
height: 23px;
}
.nav {
display: none;
}
.hamburger {
display: flex;
flex-direction: column;
justify-content: space-between;
width: 25px;
height: 12px;
margin-top: 3px;
cursor: pointer;
}
.hamburger span {
display: block;
width: 100%;
height: 1px;
background: var(--ink);
}
/* menu overlay — matches TOP-MENU (translucent panel over the hero) */
.mobile-menu {
display: block;
position: fixed;
inset: 0;
z-index: 60;
opacity: 0;
visibility: hidden;
transition:
opacity 0.4s ease,
visibility 0.4s ease;
}
.menu-toggle:checked ~ .mobile-menu {
opacity: 1;
visibility: visible;
}
.menu-backdrop {
position: absolute;
inset: 0;
background: transparent; /* hero stays visible around the panel */
}
.menu-panel {
position: absolute;
left: 50%;
top: 21.9%;
width: 235px;
height: 425px;
transform: translateX(-50%) translateY(14px);
background: rgba(250, 247, 238, 0.86);
display: flex;
align-items: center;
justify-content: center;
transition: transform 0.45s cubic-bezier(0.4, 0, 0.2, 1);
}
.menu-toggle:checked ~ .mobile-menu .menu-panel {
transform: translateX(-50%) translateY(0);
}
.mobile-nav {
display: flex;
flex-direction: column;
align-items: center;
gap: 50px;
}
.mobile-nav a {
font-family: var(--inter);
font-size: 15px;
font-weight: 400;
letter-spacing: 0.04em;
color: var(--text);
transition: opacity 0.25s;
}
.mobile-nav a:hover {
opacity: 0.6;
}
.menu-close {
position: absolute;
top: 10px;
right: 10px;
width: 24px;
height: 24px;
cursor: pointer;
background-color: #fdf9ed;
}
.menu-close::before,
.menu-close::after {
content: "";
position: absolute;
top: 12px;
left: 4px;
width: 16px;
height: 1px;
background: var(--text);
}
.menu-close::before {
transform: rotate(45deg);
}
.menu-close::after {
transform: rotate(-45deg);
}
/* ---------- Hero ---------- */
.hero img {
width: 100%;
}
/* ---------- Concept ---------- */
.concept {
display: block;
max-width: none;
/* bottom padding leaves cream space under concept-img, so as the panel
bottom-pins there's breathing room below the image before band covers */
padding: 96px 0 176px;
}
.concept-wrapper {
display: block;
max-width: none;
padding: 0;
}
.concept-text {
width: 100%;
max-width: 66%;
margin: 0 auto;
padding: 0;
text-align: left;
}
.concept-title {
font-size: 19px;
letter-spacing: 0.05em;
margin-bottom: 44px;
}
.concept-body {
font-size: 13px;
line-height: 2.28;
}
.concept-img {
flex: none;
width: 100%;
padding: 0 16px;
margin-top: 78px;
}
/* ---------- Feature band ---------- */
.band-caption {
width: min(54vw, 230px);
}
/* responsive display helpers: hide PC-only elements, restore SP-only ones */
.pc {
display: none;
}
.sp {
display: revert;
}
/* ---------- Product ---------- */
.product {
max-width: none;
padding: 154px 0 40px;
}
.section-label {
font-size: 22px;
letter-spacing: 0.12em;
margin-bottom: 0;
/* left-aligned like the rest of the SP page (client feedback 2026-07-17);
28px matches .prod-info's side padding, text-indent was a centering fix */
text-align: left;
text-indent: 0;
padding: 0 28px;
}
.prod-row {
display: block;
max-width: none;
margin: 0 0 96px;
}
.prod-img {
width: 100%;
}
.prod-info {
width: 100%;
padding: 54px 28px 0;
}
.prod-num {
font-size: 16px;
margin-bottom: 0px;
}
.prod-name {
font-size: 25px;
margin-bottom: 32px;
}
.prod-desc {
font-size: 15px;
line-height: 1.63;
margin-bottom: 40px;
}
.notes-title {
font-size: 13px;
margin-bottom: 6px;
}
.note-row {
gap: 14px;
padding: 4px 2px;
}
.note-row dt {
flex: 0 0 74px;
font-size: 12px;
}
.note-row dd {
font-size: 12px;
}
.prod-price {
font-size: 13px;
line-height: 2;
margin-top: 0px;
}
/* first product row keeps the "Product" label spacing above it */
.product .prod-row:first-of-type {
margin-top: 95px;
}
/* ---------- Oils (mobile order: image → heading → list) ---------- */
.oils {
display: flex;
flex-direction: column;
align-items: stretch;
max-width: none;
padding: 0 0 120px;
}
/* dissolve both wrappers so .oils-head / -list / -img become flex items of
.oils and the order values below take effect (image → heading → list) */
.olis-wrapper,
.oils-row {
display: contents;
}
.oils-img {
order: 1;
flex: none;
width: 100%;
padding: 0 16px;
align-self: auto;
}
.oils-img img {
height: auto;
object-fit: contain;
}
.oils-head {
order: 2;
/* scaled so the 2nd line「やわらかい質感とツヤのある仕上がりへ」
(18 chars × 1.06em tracking ≈ 19.1em) stays on one line inside the
30px side paddings on narrow phones (client feedback 2026-07-17) */
font-size: min(19px, calc((100vw - 64px) / 19.1));
line-height: 2;
letter-spacing: 0.06em;
margin: 82px 0 60px;
padding: 0 30px;
}
.oils-list {
order: 3;
flex: none;
width: 100%;
padding: 0 30px;
}
.oil {
flex-direction: column;
gap: 0;
margin-bottom: 64px;
}
.oil-label {
flex: none;
margin-bottom: 20px;
}
.oil-label h4 {
font-size: 23px;
}
.oil-label span {
font-size: 13px;
margin-top: -4px;
}
.oil-desc p {
font-weight: normal;
font-size: 13px;
line-height: 2;
}
.oil-ing {
font-size: 12px !important;
margin-top: 12px !important;
}
/* ---------- How To Use ---------- */
.howto {
max-width: none;
padding: 0 0 90px;
/* left-aligned like PC — was centered (client feedback 2026-07-17) */
}
.howto-wrapper {
display: block;
max-width: none;
}
.howto-img {
width: 100%;
}
.howto-text {
width: 100%;
padding: 90px 30px 0;
}
.howto-head {
font-size: 22px;
margin-bottom: 72px;
}
.ht-block {
margin-bottom: 70px;
}
.ht-title {
font-size: 18px;
letter-spacing: 0.12em;
margin-bottom: 26px;
}
.ht-body {
font-size: 13px;
line-height: 2.1;
}
.ht-box-pc {
display: none;
}
.ht-box-sp {
display: flex;
align-items: stretch;
text-align: center;
margin: 32px 0 16px;
padding: 0;
border: 1px solid #cfccc3;
}
.ht-box-sp .ht-box-label,
.ht-box-sp .ht-box-val {
display: flex;
align-items: center;
justify-content: center;
padding: 8px 18px;
font-size: 13px;
line-height: 1.5;
color: var(--ink);
}
.ht-box-sp .ht-box-label {
flex: 0 0 46%;
border-right: 1px solid #cfccc3;
}
.ht-box-sp .ht-box-val {
flex: 1;
justify-content: flex-start;
text-align: left;
}
.ht-fine {
font-size: 12px;
margin-top: 12px;
}
/* ---------- Hair Oil To Go (mobile order: intro → image → features) ---------- */
.togo {
background: #eceef3;
}
.togo-inner {
display: flex;
flex-direction: column;
align-items: stretch;
max-width: none;
gap: 0;
padding: 96px 0;
/* left-aligned like PC — was centered (client feedback 2026-07-17) */
}
.togo-wrapper {
display: contents;
}
.togo-text {
display: contents;
}
.togo-intro {
order: 1;
width: 100%;
padding: 0 30px;
}
.togo-img {
order: 2;
flex: none;
width: 100%;
padding: 0 16px;
margin-top: 74px;
}
.togo-feats {
order: 3;
width: 100%;
padding: 0 30px;
margin-top: 60px;
}
.togo-head {
font-size: 22px;
margin-bottom: 56px;
}
.togo-lead {
font-size: 19px;
line-height: 1.9;
margin-bottom: 0;
}
.togo-feat {
margin-bottom: 64px;
}
.togo-feat:last-child {
margin-bottom: 0;
}
.togo-feat h4 {
font-size: 17px;
line-height: 1.55;
margin-bottom: 14px;
}
.togo-feat p {
font-size: 13px;
line-height: 1.85;
}
/* ---------- Gallery ---------- */
.gallery {
/* mobile grid is fluid (3 equal columns), not the fixed PC grid */
display: block;
padding: 96px 16px;
}
.grid {
grid-template-columns: repeat(3, 1fr);
gap: 28px;
}
.grid img {
aspect-ratio: 185 / 238;
}
/* ---------- Official Instagram ---------- */
.insta {
padding: 56px 20px;
}
.insta-title {
font-size: 17px;
margin-bottom: 30px;
}
/* ---------- Footer ---------- */
.site-footer {
display: flex;
flex-direction: column;
align-items: center;
padding: 35px 20px 65px;
}
.foot-links {
flex-direction: column;
gap: 12px;
font-size: 14px;
order: 1;
margin-bottom: 50px;
}
.foot-links .sep {
display: none;
}
.foot-logo {
width: 89px;
height: auto;
order: 2;
margin: 0 auto;
}
.copy {
font-size: 13px;
order: 3;
margin-top: 40px;
}
}
@media (max-width: 380px) {
.prod-name {
font-size: 24px;
}
.oil-label h4 {
font-size: 23px;
}
.togo-lead {
font-size: 18px;
}
.note-row dt {
flex: 0 0 66px;
}
}
/* ============================================================
Gallery lightbox (modal)
============================================================ */
.lightbox {
position: fixed;
inset: 0;
z-index: 100; /* above the fixed header (70) */
background: rgba(22, 22, 20, 0.92);
opacity: 0;
visibility: hidden;
transition:
opacity 0.3s ease,
visibility 0.3s ease;
}
.lightbox.open {
opacity: 1;
visibility: visible;
}
.lb-stage {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
padding: 56px 76px;
}
.lb-img {
/* sized by JS: the assets are 2x Figma exports, shown at 1.5x the grid's
1x size and shrunk to fit the stage on small screens */
/* the exports carry a ~1px pale fringe on their edges (visible as a white
line against the dark backdrop) — crop it off. clip-path would also clip
a box-shadow, hence none is used here. */
clip-path: inset(2px);
opacity: 0;
transform: scale(0.88) translateY(16px);
transition:
opacity 0.55s ease,
transform 0.55s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.lightbox.lb-shown .lb-img {
opacity: 1;
transform: none;
}
@media (prefers-reduced-motion: reduce) {
.lb-img {
transition: none;
transform: none;
}
}
.lightbox button {
appearance: none;
-webkit-appearance: none;
border: 0;
background: transparent;
padding: 0;
cursor: pointer;
opacity: 0.8;
transition: opacity 0.25s;
}
.lightbox button:hover {
opacity: 1;
}
.lb-close {
position: absolute;
top: 16px;
right: 18px;
width: 44px;
height: 44px;
z-index: 2;
}
.lb-close::before,
.lb-close::after {
content: "";
position: absolute;
top: 50%;
left: 50%;
width: 26px;
height: 1px;
background: #fff;
}
.lb-close::before {
transform: translate(-50%, -50%) rotate(45deg);
}
.lb-close::after {
transform: translate(-50%, -50%) rotate(-45deg);
}
.lb-prev,
.lb-next {
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 56px;
height: 72px;
z-index: 2;
}
.lb-prev {
left: 6px;
}
.lb-next {
right: 6px;
}
.lb-prev::before,
.lb-next::before {
content: "";
position: absolute;
top: 50%;
left: 50%;
width: 15px;
height: 15px;
border-top: 1px solid #fff;
border-left: 1px solid #fff;
}
.lb-prev::before {
transform: translate(-30%, -50%) rotate(-45deg);
}
.lb-next::before {
transform: translate(-70%, -50%) rotate(135deg);
}
.lb-counter {
position: absolute;
top: 26px;
left: 26px;
z-index: 2;
font-family: var(--inter);
font-size: 13px;
letter-spacing: 0.08em;
color: rgba(255, 255, 255, 0.85);
}
@media (max-width: 768px) {
.lb-stage {
padding: 70px 14px;
}
.lb-prev,
.lb-next {
width: 44px;
height: 64px;
}
.lb-prev {
left: 0;
}
.lb-next {
right: 0;
}
}