:root {
  --ink: #171613;
  --gold: #ad7d28;
  --paper: #fbf8f3;
}

* { box-sizing: border-box; }

html, body { margin: 0; min-width: 320px; background: var(--paper); }

body {
  color: var(--ink);
  font-family: "Yu Mincho", "Hiragino Mincho ProN", "Noto Serif JP", serif;
  font-feature-settings: "palt";
}

/* Common site header / footer */
#header { position:relative; z-index:999; width:100%; background:#000; border-bottom:1px solid rgba(181,142,59,.14); }
.header-inner { width:min(1500px,94%); min-height:112px; margin:0 auto; padding:16px 0; display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:36px; }
.logo { display:flex; align-items:center; min-width:0; }
.logo img { width:250px; max-width:100%; height:auto; object-fit:contain; }
#header nav { justify-self:center; }
#header nav ul { display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:clamp(18px,2.2vw,42px); margin:0; padding:0; list-style:none; }
#header a, #drawer a, #flore-footer a { color:#fff; text-decoration:none; }
#header nav a { font-size:15px; white-space:nowrap; transition:.25s; }
#header nav a:hover, #drawer a:hover { color:var(--gold); }
.hamburger { display:none; }
#flore-footer { padding:50px 0; background:#000; border-top:1px solid rgba(181,142,59,.18); }
.site-container { width:min(1400px,92%); margin:0 auto; }
.footer-links { display:flex; justify-content:center; gap:45px; margin-bottom:20px; }
.footer-links a { color:var(--gold); }
.copyright { margin:0; text-align:center; color:#888; font-size:14px; }
#drawer { position:fixed; top:0; right:-100%; z-index:9999; width:320px; max-width:85%; height:100%; padding:90px 40px; background:#000; transition:right .35s; }
#drawer.open { right:0; }
#drawer a { display:block; padding:18px 0; border-bottom:1px solid rgba(181,142,59,.2); }

@media screen and (max-width:1350px) {
  .header-inner { gap:22px; }
  .logo img { width:215px; }
  #header nav ul { gap:18px; }
}

@media screen and (max-width:768px) {
  .header-inner { min-height:92px; padding:10px 0; display:flex; justify-content:space-between; gap:20px; }
  .logo img { width:205px; }
  #header nav { display:none; }
  .hamburger { display:flex; flex:0 0 50px; width:50px; height:50px; align-items:center; justify-content:center; color:#fff; font-size:28px; background:none; border:1px solid var(--gold); cursor:pointer; }
  .footer-links { flex-direction:column; align-items:center; gap:16px; }
}

img { display: block; width: 100%; height: 100%; object-fit: cover; }

.water-treatment { width: 100%; overflow: hidden; background: #fff; }
.panel { position: relative; overflow: hidden; }
.copy { position: absolute; z-index: 1; }

.hero { height: clamp(360px, 31.3124vw, 500px); }
.hero::after,
.care-card::after,
.finish::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.hero::after { background: linear-gradient(90deg, rgba(253,250,246,.98) 0%, rgba(253,250,246,.88) 20%, rgba(253,250,246,.14) 47%, transparent 65%); }
.hero__copy { top: 8.5%; left: 4.1%; }
.eyebrow { margin: 0 0 20px; color: var(--gold); font-size: clamp(14px, 1.15vw, 19px); letter-spacing: .12em; }
.hero h1 { margin: 0; font-weight: 400; font-size: clamp(36px, 3.15vw, 53px); line-height: 1.48; letter-spacing: .09em; }
.lead { margin: 17px 0 0; font-size: clamp(13px, 1.08vw, 17px); line-height: 1.75; letter-spacing: .08em; }
.rule { display: block; width: 46px; height: 1px; margin: 21px 0 18px; background: var(--gold); }
.service-name { margin: 0; color: var(--gold); font-size: clamp(14px, 1.18vw, 18px); font-weight: 600; letter-spacing: .1em; }

.care-grid { display: grid; grid-template-columns: 1fr 1.05fr; gap: 6px; padding-top: 6px; background: #fff; }
.care-card { height: clamp(310px, 25.3923vw, 410px); }
.care-card--material::after { background: linear-gradient(90deg, rgba(253,251,247,.99) 0%, rgba(253,251,247,.92) 28%, rgba(253,251,247,.15) 58%, transparent 75%); }
.care-card--wash::after { background: linear-gradient(90deg, rgba(249,252,251,.96) 0%, rgba(249,252,251,.82) 33%, rgba(249,252,251,.08) 61%, transparent 78%); }
.care-card__copy { top: 12%; left: 7.3%; }
.care-card h2,
.finish h2 { margin: 0; font-weight: 400; font-size: clamp(25px, 2vw, 34px); line-height: 1.5; letter-spacing: .08em; }
.care-card p { margin: 0; font-size: clamp(12px, .92vw, 15px); line-height: 1.8; letter-spacing: .04em; }

.finish { height: clamp(200px, 16.7618vw, 270px); margin-top: 6px; }
.finish::after { background: linear-gradient(90deg, rgba(252,250,247,.22) 0%, rgba(252,250,247,.82) 11%, rgba(252,250,247,.94) 31%, rgba(252,250,247,.42) 48%, transparent 68%); }
.finish__copy { top: 10%; left: 12.6%; }
.finish .rule { margin: 12px 0 13px; }
.finish p { margin: 0; font-size: clamp(12px, .92vw, 15px); line-height: 1.65; letter-spacing: .06em; }
.finish .accent { margin-top: 7px; color: var(--gold); font-size: clamp(13px, 1vw, 16px); }
.finish--complete::after {
  inset: 0 auto 0 9%;
  width: 31%;
  background: linear-gradient(90deg, rgba(252,250,247,.98) 0%, #fcfaf7 12%, #fcfaf7 82%, rgba(252,250,247,0) 100%);
}
.finish--complete .finish__copy { display: block; }

.page-footer { height: 80px; display: flex; align-items: center; justify-content: space-between; padding: 7px 5.8% 6px; background: #fbf8f3; border-top: 1px solid rgba(255,255,255,.9); }
.page-footer > p { margin: 0; font-size: clamp(14px, 1.2vw, 19px); letter-spacing: .12em; }
.mark { min-width: 170px; text-align: center; color: var(--gold); }
.mark span { display: block; font-family: Georgia, serif; font-size: 48px; line-height: .9; }
.mark small { display: block; margin-top: 8px; color: var(--ink); font-family: Georgia, serif; font-size: 12px; letter-spacing: .06em; }

@media (max-width: 760px) {
  .hero { height: 760px; }
  .hero img { object-position: 61% center; }
  .hero::after { background: linear-gradient(180deg, rgba(253,250,246,.98) 0%, rgba(253,250,246,.9) 46%, rgba(253,250,246,.12) 72%); }
  .hero__copy { top: 6%; left: 7%; right: 6%; }
  .hero h1 { font-size: 36px; }
  .care-grid { grid-template-columns: 1fr; }
  .care-card { min-height: 560px; }
  .care-card__copy { top: 7%; left: 7%; right: 6%; }
  .care-card--material::after,
  .care-card--wash::after { background: linear-gradient(180deg, rgba(253,251,247,.98) 0%, rgba(253,251,247,.88) 44%, rgba(253,251,247,.03) 72%); }
  .finish { height: 570px; }
  .finish img { object-position: 56% center; }
  .finish::after { background: linear-gradient(180deg, rgba(252,250,247,.96) 0%, rgba(252,250,247,.76) 39%, transparent 69%); }
  .finish__copy { top: 6%; left: 7%; }
  .finish--complete::after { inset: 0; width: auto; }
  .page-footer { min-height: 160px; flex-direction: column; justify-content: center; gap: 22px; text-align: center; padding: 25px 7%; }
}