/* 朝露の化粧水（動きの見本）。このページだけの CSS。上品で静かな空気: 白・淡い水色・淡い緑・銀。
   html.mo ＝ 動き用の並び。付いていなければ、全部が上から順に並ぶ静かな形（水面は写真のまま）。 */

:root {
  --sky: #eef4f2;
  --mist: #f7faf9;
  --aqua: #cfe9ec;
  --aqua-d: #6aa9b0;
  --leaf: #9cc3a1;
  --ink: #2c3a3a;
  --sub: #667574;
  --mincho: "Hiragino Mincho ProN", "Yu Mincho", "YuMincho", "Noto Serif JP", serif;
  --gothic: "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic", "YuGothic", "Meiryo", sans-serif;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; overflow-x: hidden; background: var(--sky); color: var(--ink); font: 16px/2 var(--gothic); letter-spacing: .06em; }
h1, h2, h3 { margin: 0; font-family: var(--mincho); font-weight: 300; line-height: 1.6; letter-spacing: .16em; word-break: keep-all; overflow-wrap: anywhere; }
p { margin: 0; }
:focus-visible { outline: 2px solid var(--aqua-d); outline-offset: 4px; }
.eyebrow { font-family: var(--mincho); font-size: 11px; letter-spacing: .4em; color: var(--aqua-d); margin-bottom: 16px; }

/* ── 1. 最初の画面（水面） ──────────────────── */
.fv { position: relative; height: 100vh; height: 100svh; min-height: 520px; overflow: hidden; background: #dfeceb; }
.fv__img, .fv__gl { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.fv__img { object-fit: cover; }
.fv__gl { opacity: 0; transition: opacity .8s; touch-action: pan-y; cursor: crosshair; }
.fv__gl.is-on { opacity: 1; }
.fv__shade { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(90deg, rgba(40, 84, 86, .34), rgba(40, 84, 86, .08) 45%, transparent 70%); }
@media (max-width: 760px) { .fv__shade { background: radial-gradient(80% 50% at 50% 46%, rgba(40, 84, 86, .32), transparent 75%); } }
.fv__text {
  position: absolute; left: 7vw; top: 50%; translate: 0 -50%; pointer-events: none;
  color: #fff; text-shadow: 0 2px 30px rgba(30, 70, 70, .35);
}
.fv__en { font-family: var(--mincho); font-size: 11px; letter-spacing: .36em; margin-bottom: 22px; }
.fv__title { font-size: clamp(40px, 5.6vw, 84px); line-height: 1.45; letter-spacing: .22em; font-weight: 300; }
.fv__lead { margin-top: 22px; font-family: var(--mincho); font-size: clamp(14px, 1.3vw, 17px); letter-spacing: .2em; }
.fv__hint { position: absolute; left: 0; right: 0; text-align: center; bottom: 28px; font-family: var(--mincho); font-size: 12px; letter-spacing: .34em; color: #fff; text-shadow: 0 1px 12px rgba(30, 70, 70, .5); pointer-events: none; }
html:not(.mo) .fv__hint { display: none; }
.fv__drop { display: none; }
.mo .fv__drop {
  display: block; position: absolute; left: 50%; top: 0; width: 16px; height: 22px; margin-left: -8px; pointer-events: none;
  border-radius: 50% 50% 50% 50% / 62% 62% 40% 40%;
  background: radial-gradient(circle at 35% 35%, #fff, rgba(220, 240, 242, .9) 40%, rgba(150, 200, 206, .8));
  box-shadow: 0 4px 10px rgba(40, 90, 90, .25); opacity: 0;
}

/* ── 2. ひとしずく ─────────────────────────── */
.drop { position: relative; background: var(--mist); overflow: hidden; }
.drop__stage { position: relative; display: flex; flex-direction: column; align-items: center; gap: 40px; padding: 110px 16px; }
.drop__svg { width: 120px; height: 312px; overflow: visible; }
.drop__pipette { fill: rgba(214, 234, 236, .7); stroke: #a9bcbc; }
.drop__bulb { fill: #d8c4b8; }
.drop__ring { display: none; }
.drop__panel { text-align: center; max-width: 560px; }
.drop__panel h2 { font-size: clamp(28px, 3.8vw, 48px); margin-bottom: 20px; }
.drop__panel p { color: var(--sub); word-break: keep-all; overflow-wrap: anywhere; }
.drop__word { display: none; }
.mo .drop__word {
  display: block; position: absolute; left: 12vw; top: 0; bottom: 0; height: fit-content; margin: auto 0; z-index: 2; opacity: 0;
  writing-mode: vertical-rl; white-space: nowrap; font-family: var(--mincho); font-weight: 300; font-size: clamp(30px, min(4.4vw, 7vh), 64px); letter-spacing: .3em; color: var(--aqua-d);
}
@media (max-width: 760px) { .mo .drop__word { left: 6vw; font-size: 28px; } }
.mo .drop { height: 100vh; height: 100svh; }
.mo .drop__stage { position: absolute; inset: 0; display: block; padding: 0; }
.mo .drop__svg { position: absolute; left: 0; right: 0; margin: 0 auto; top: 9%; z-index: 3; width: min(24vh, 190px); height: auto; aspect-ratio: 50 / 130; }
.mo .drop__ring {
  display: block; position: absolute; left: 50%; top: 72%; width: 40px; height: 14px; margin: -7px 0 0 -20px;
  border: 1.5px solid rgba(106, 169, 176, .7); border-radius: 50%; opacity: 0; z-index: 2;
}
.mo .drop__panel {
  position: absolute; inset: 0; max-width: none; z-index: 1;
  display: grid; place-content: center; padding: 0 16px;
  background: linear-gradient(rgba(247, 250, 249, .62), rgba(247, 250, 249, .5)), url("../img/water.webp") center / cover;
  clip-path: circle(0% at 50% 72%);
}
.mo .drop__panel > * { max-width: 560px; margin-left: auto; margin-right: auto; }

/* ── 3. 三つの成分（くっつく・離れる しずく） ─── */
.parts { position: relative; background: var(--sky); overflow: hidden; }
.parts__stage { position: relative; padding: 110px 16px; }
.parts__head { text-align: center; margin-bottom: 40px; }
.parts__head h2 { font-size: clamp(26px, 3.4vw, 44px); }
.parts__goo { display: none; }
.parts__list { list-style: none; margin: 0 auto; padding: 0; max-width: 900px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.part { display: grid; gap: 6px; justify-items: center; text-align: center; padding: 26px 12px; }
.part__en { font-family: var(--mincho); font-size: 10px; letter-spacing: .34em; color: var(--aqua-d); }
.part b { font-family: var(--mincho); font-weight: 400; font-size: clamp(17px, 1.8vw, 22px); letter-spacing: .1em; word-break: keep-all; }
.part__t { font-size: 13px; color: var(--sub); line-height: 1.8; }
.mo .parts { height: 100vh; height: 100svh; }
.mo .parts__stage { position: absolute; inset: 0; padding: 0; }
.mo .parts__head { position: absolute; left: 0; right: 0; top: 12%; margin: 0; z-index: 2; }
.mo .parts__goo { display: block; position: absolute; inset: 0; filter: url(#goo); }
.parts__goo i {
  position: absolute; left: 50%; top: 58%; width: var(--d); height: var(--d); margin: calc(var(--d) / -2) 0 0 calc(var(--d) / -2); border-radius: 50%;
  --d: clamp(150px, 22vw, 250px);
  background: radial-gradient(circle at 36% 32%, #ffffff 0 10%, #e4f3f4 30%, #b7dde1 70%, #8fc6cc);
}
.mo .parts__list { position: absolute; inset: 0; max-width: none; display: block; z-index: 3; pointer-events: none; }
.mo .part { position: absolute; left: 50%; top: 58%; width: clamp(150px, 22vw, 250px); opacity: 0; padding: 0 18px; }

/* ── 4. 瓶と光 ─────────────────────────────── */
.bottle { padding: 110px 16px; background: #fff; }
.bottle__in { width: min(1000px, 100%); margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: 6vw; align-items: center; }
.bottle__fig { position: relative; width: min(360px, 70vw); justify-self: center; aspect-ratio: 2 / 3; overflow: hidden; }
.bottle__fig img { display: block; width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; }
.bottle__light {
  position: absolute; top: -20%; bottom: -20%; left: 0; width: 34%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .0) 20%, rgba(255, 255, 255, .85) 50%, rgba(255, 255, 255, 0) 80%, transparent);
  transform: translateX(-120%) skewX(-12deg); mix-blend-mode: screen; pointer-events: none;
}
.dew { position: absolute; width: 6px; height: 6px; border-radius: 50%; background: radial-gradient(circle, #fff 0 30%, rgba(255, 255, 255, 0) 70%); opacity: 0; }
.dew:nth-of-type(2) { left: 42%; top: 44%; } .dew:nth-of-type(3) { left: 56%; top: 58%; } .dew:nth-of-type(4) { left: 47%; top: 70%; }
.dew:nth-of-type(5) { left: 60%; top: 38%; } .dew:nth-of-type(6) { left: 39%; top: 62%; }
.bottle h2 { font-size: clamp(26px, 3.4vw, 42px); margin-bottom: 20px; }
.bottle__body > p:last-child { color: var(--sub); }

/* ── 5. 売っている時期と場所 ───────────────── */
.info { padding: 110px 16px; background: var(--mist); }
.info__in { width: min(700px, 100%); margin: 0 auto; }
.info h2 { font-size: clamp(26px, 3.2vw, 40px); text-align: center; margin-bottom: 34px; }
.info__dl { margin: 0 0 22px; }
.info__dl div { display: grid; grid-template-columns: 8em 1fr; gap: 16px; padding: 16px 4px; border-bottom: 1px solid #d9e4e2; }
.info__dl dt { color: var(--sub); font-family: var(--mincho); }
.info__dl dd { margin: 0; word-break: keep-all; overflow-wrap: anywhere; }
.info__fic { font-size: 13px; color: var(--sub); }

@media (max-width: 860px) {
  .fv__text { left: 0; right: 0; top: 7%; translate: none; text-align: center; padding: 0 16px; }   /* 白い瓶に題字を重ねない */
  .fv__shade { background: linear-gradient(rgba(40, 84, 86, .38), rgba(40, 84, 86, .08) 45%, transparent 65%) !important; }
  .fv__en { font-size: 10px; letter-spacing: .2em; }
}
@media (max-width: 760px) {
  .mo .parts__head { top: 8%; }
  .mo .parts__head h2 { font-size: 22px; }
  .parts__list { grid-template-columns: 1fr; }
  .bottle__in { grid-template-columns: 1fr; text-align: center; }
  .info__dl div { grid-template-columns: 1fr; gap: 2px; }
  .parts__goo i { --d: clamp(118px, 33vw, 160px); top: 60%; }
  .mo .part { width: 70vw; top: 60%; padding: 0; }   /* 文字の入れ物は、しずくより広く（折り返せない言葉がはみ出さないように） */
  .part b { font-size: 15px; }
  .part__en { font-size: 9px; letter-spacing: .26em; }
  .part__t { display: none; }
}