/* =========================================================
   AMA.chai_lab. — 案A「スケッチブック」
   色・文字・余白はここ（:root）でまとめて変えられます
   ========================================================= */

:root {
  --paper: #F5F0E6;        /* 背景：生成り */
  --paper-deep: #ECE4D4;   /* 少し濃い生成り（区切り用） */
  --ink: #4D4E3D;          /* ロゴの色：文字・見出し */
  --ink-soft: #5E5F4D;     /* 本文の補足 */
  --sepia: #735F49;        /* 外観スケッチの鉛筆の色：アクセント */
  --rule: #CFC5B1;         /* 細い罫線 */

  --font-ja: "Shippori Mincho", "Hiragino Mincho ProN", "Yu Mincho", "YuMincho", serif;
  --font-latin: "Cormorant Garamond", "Shippori Mincho", Georgia, serif;

  --gutter: 20px;
  --max: 1120px;
  --section-space: clamp(88px, 14vw, 168px);
}

@media (min-width: 768px) {
  :root { --gutter: 48px; }
}

/* ---------- 基本 ---------- */

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-ja);
  font-weight: 500;
  font-size: 1rem;
  line-height: 2;
  letter-spacing: 0.04em;
  font-feature-settings: "palt" 0;
  -webkit-font-smoothing: antialiased;
}

@media (min-width: 768px) {
  body { font-size: 1.0625rem; }
}

img, iframe { display: block; max-width: 100%; }
p { text-wrap: pretty; }
img { height: auto; }
figure { margin: 0; }
h1, h2, h3, p, ul, ol, dl, dd { margin: 0; }
ul, ol { padding: 0; list-style: none; }

[lang="en"] { font-family: var(--font-latin); letter-spacing: 0.02em; }

a {
  color: inherit;
  touch-action: manipulation;
  -webkit-tap-highlight-color: rgb(77 78 61 / 0.15);
}

section[id] { scroll-margin-top: 24px; }

/* 画面には出さず、読み上げソフトにだけ伝える文字 */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

:focus-visible {
  outline: 2px solid var(--sepia);
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; }
}

.skip-link {
  position: absolute;
  left: var(--gutter);
  top: -100px;
  z-index: 10;
  padding: 8px 16px;
  background: var(--ink);
  color: var(--paper);
}
.skip-link:focus { top: 8px; }

/* ---------- 共通パーツ ---------- */

.button {
  display: inline-flex;
  align-items: center;
  gap: 0.75em;
  min-height: 52px;
  padding: 12px 24px;
  border: 1px solid var(--ink);
  color: var(--ink);
  text-decoration: none;
  letter-spacing: 0.08em;
  transition: background-color 0.25s, color 0.25s;
  touch-action: manipulation;
}
.button:hover { background: var(--ink); color: var(--paper); }
.button__arrow { font-family: var(--font-latin); }

.button--light { border-color: var(--paper); color: var(--paper); }
.button--light:hover { background: var(--paper); color: var(--ink); }

.link {
  display: inline-block;
  padding: 6px 0;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.4em;
  text-decoration-color: var(--rule);
  transition: text-decoration-color 0.25s;
}
.link:hover { text-decoration-color: currentColor; }

.heading {
  font-weight: 600;
  font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.25rem);
  line-height: 1.6;
  letter-spacing: 0.08em;
  text-wrap: balance;
}

/* 図面の表題欄のようなセクション番号 */
.section-label {
  display: flex;
  align-items: baseline;
  gap: 16px;
  margin-bottom: clamp(32px, 5vw, 56px);
  color: var(--sepia);
  font-family: var(--font-latin);
  font-size: 1rem;
  letter-spacing: 0.12em;
}
.section-label::after {
  content: "";
  order: 1;
  flex: 1;
  height: 1px;
  background: var(--rule);
  transform: translateY(-0.3em);
}
.section-label__name { order: 2; font-style: italic; font-size: 1.125rem; }

.section {
  width: min(100% - var(--gutter) * 2, var(--max));
  margin-inline: auto;
  padding-top: var(--section-space);
}

/* 外観スケッチ：白い紙を生成りになじませ、鉛筆の線をセピア寄りに */
.hero__sketch img,
.building__sketch img {
  mix-blend-mode: multiply;
  filter: grayscale(1) brightness(1.06) contrast(1.12);
}

/* ---------- ヘッダー ---------- */

.site-header {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 24px;
  width: min(100% - var(--gutter) * 2, var(--max));
  margin-inline: auto;
  padding-top: 12px;
}
.site-header__logo { display: none; }
.site-header__nav { display: flex; align-items: center; gap: 24px; }
.site-header__ig {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-family: var(--font-latin);
  font-size: 1.0625rem;
  letter-spacing: 0.08em;
  text-decoration: none;
}
.site-header__ig:hover { text-decoration: underline; text-underline-offset: 0.3em; }

.lang-switch { display: flex; gap: 12px; font-size: 0.875rem; }
.lang-switch a { text-decoration: none; }
.lang-switch a[aria-current="page"] { text-decoration: underline; text-underline-offset: 0.3em; }

/* ---------- トップ ---------- */

.hero {
  position: relative;
  display: grid;
  width: min(100% - var(--gutter) * 2, var(--max));
  margin-inline: auto;
  padding-top: 16px;
}

.hero__body { position: relative; z-index: 1; }

.hero__logo { width: min(56vw, 210px); margin: 8px 0 32px; }
.hero__logo img { width: 100%; }

.hero__catch {
  font-size: clamp(1.625rem, 1.1rem + 2.6vw, 2.75rem);
  font-weight: 500;
  line-height: 1.7;
  letter-spacing: 0.1em;
}

.hero__lead {
  margin-top: 20px;
  color: var(--ink-soft);
  font-size: 0.9375rem;
}

.hero__open {
  display: flex;
  align-items: baseline;
  gap: 16px;
  margin: 32px 0 28px;
  padding: 14px 0;
  border-block: 1px solid var(--rule);
  font-family: var(--font-latin);
  font-weight: 600;
  letter-spacing: 0.1em;
}
.hero__open time { font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2rem); }
.hero__open span { color: var(--sepia); font-size: 1rem; letter-spacing: 0.3em; }

.hero__sketch {
  margin: -8px calc(var(--gutter) * -1) 0;
}
.hero__sketch img { width: 100%; }

.hero__vertical { display: none; }

@media (min-width: 900px) {
  .hero {
    grid-template-columns: minmax(360px, 5fr) 7fr;
    align-items: center;
    min-height: min(88vh, 820px);
    padding-top: 0;
  }
  .hero__body { grid-column: 1; grid-row: 1; }
  .hero__logo { width: 260px; margin: 0 0 48px; }
  .hero__catch { font-size: clamp(2rem, 1rem + 1.6vw, 2.5rem); white-space: nowrap; }
  .hero__open { display: inline-flex; padding-right: 8px; }
  .hero__sketch {
    grid-column: 2; grid-row: 1;
    margin: 0 -4vw 0 -6vw;
  }
  .hero__vertical {
    display: block;
    position: absolute;
    top: 8px;
    right: 0;
    writing-mode: vertical-rl;
    color: var(--sepia);
    font-size: 0.9375rem;
    letter-spacing: 0.35em;
  }
}

/* ---------- コンセプト ---------- */

.concept__grid { display: grid; gap: 40px; }
.concept__photo img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: 50% 60%;
}
.concept__text { display: grid; gap: 28px; align-content: end; }
.concept__text p { max-width: 30em; }

@media (min-width: 768px) {
  .concept__grid { grid-template-columns: 5fr 6fr; gap: clamp(40px, 7vw, 96px); align-items: end; }
}

/* ---------- メニュー ---------- */

/* ---------- お店でできること ---------- */

.offer > .heading { margin-bottom: clamp(32px, 5vw, 56px); }
.offer__list { display: grid; gap: clamp(56px, 9vw, 112px); }
.offer__item { display: grid; gap: 24px; }
.offer__photo img,
.offer__photo.is-pending {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}
.offer__photo.is-pending {
  display: grid;
  place-items: center;
  aspect-ratio: 3 / 1;
  border: 1px dashed var(--rule);
  color: var(--sepia);
  font-size: 0.875rem;
}
.offer__text { display: grid; gap: 12px; align-content: center; }
.offer__en { color: var(--sepia); font-style: italic; font-size: 1.25rem; line-height: 1.4; }
.offer__heading {
  font-size: clamp(1.25rem, 1rem + 1vw, 1.625rem);
  font-weight: 600;
  line-height: 1.6;
  letter-spacing: 0.06em;
  text-wrap: balance;
}
.offer__text p:last-child { max-width: 32em; }

@media (min-width: 768px) {
  .offer__item { grid-template-columns: 5fr 6fr; gap: clamp(40px, 6vw, 80px); align-items: center; }
  .offer__item:nth-child(even) .offer__photo { order: 2; }
  .offer__photo img { aspect-ratio: 4 / 5; }
  .offer__photo.is-pending { aspect-ratio: 4 / 3; }
}

/* ---------- メニュー ---------- */

/* スパイス標本 */
.specimen {
  display: grid;
  gap: 24px;
  margin-top: clamp(32px, 5vw, 56px);
}
.specimen__photo { position: relative; }
.specimen__photo img { width: 100%; clip-path: inset(0 0 0 2%); }
.specimen__pin {
  position: absolute;
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-latin);
  font-weight: 600;
  font-size: 0.9375rem;
  line-height: 1;
  box-shadow: 0 0 0 1px var(--ink);
  transform: translate(-50%, -50%);
}
/* 写真の中のスパイスの位置（%） */
.specimen__pin--1 { left: 66%; top: 24%; }
.specimen__pin--2 { left: 66%; top: 38%; }
.specimen__pin--3 { left: 26%; top: 53%; }
.specimen__pin--4 { left: 68%; top: 58%; }
.specimen__pin--5 { left: 26%; top: 72%; }
.specimen__pin--6 { left: 72%; top: 82%; }

.specimen__caption {
  margin-bottom: 12px;
  color: var(--sepia);
  font-size: 0.875rem;
}
.specimen__list { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 16px; }
.specimen__list li { display: flex; align-items: baseline; gap: 8px; font-size: 0.9375rem; }
.specimen__num {
  flex: none;
  font-family: var(--font-latin);
  font-weight: 600;
  color: var(--sepia);
}
.specimen__latin { display: none; }

@media (min-width: 768px) {
  .specimen { grid-template-columns: 2fr 3fr; gap: 64px; align-items: end; }
  .specimen__photo { max-width: 400px; }
  .specimen__list { grid-template-columns: 1fr; gap: 10px; }
  .specimen__list li { font-size: 1rem; }
  .specimen__latin {
    display: inline;
    color: var(--sepia);
    font-style: italic;
    font-size: 1.0625rem;
  }
}

.menu__note {
  display: grid;
  gap: 8px;
  justify-items: start;
  margin-top: 48px;
  padding: 24px;
  background: var(--paper-deep);
}

/* ---------- スペシャル ---------- */

.special > .heading { margin-bottom: clamp(32px, 5vw, 56px); }
.special__list { border-top: 1px solid var(--rule); }
.special__item {
  display: grid;
  gap: 12px;
  padding: 28px 0 32px;
  border-bottom: 1px solid var(--rule);
}
.special__en {
  color: var(--sepia);
  font-style: italic;
  font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.25rem);
  line-height: 1.2;
}
.special__text { display: grid; gap: 10px; align-content: start; }
.special__heading { font-size: 1.1875rem; font-weight: 600; letter-spacing: 0.06em; line-height: 1.6; }
.special__points li { position: relative; padding-left: 1.25em; }
.special__points li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 1em;
  width: 0.6em;
  height: 1px;
  background: var(--sepia);
}
.special__note { color: var(--sepia); font-size: 0.875rem; }
.special__photo { margin-top: 8px; }
.special__photo img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }

@media (min-width: 768px) {
  .special__item { grid-template-columns: 200px 1fr; gap: 40px; padding: 40px 0; }
  .special__item.has-photo { grid-template-columns: 200px 1fr 240px; }
  .special__photo { margin-top: 0; }
  .special__photo img { aspect-ratio: 3 / 4; }
}

/* ---------- 建物 ---------- */

.building__grid { display: grid; gap: 32px; }
.building__text { display: grid; gap: 24px; }
.building__sketch { margin-inline: calc(var(--gutter) * -1); }
.building__sketch figcaption {
  padding: 8px var(--gutter) 0;
  color: var(--sepia);
  font-size: 0.8125rem;
}

@media (min-width: 900px) {
  .building__grid { grid-template-columns: 4fr 7fr; align-items: center; gap: 48px; }
  .building__sketch { margin-inline: 0 -4vw; }
  .building__sketch figcaption { padding-inline: 0; }
}

/* ---------- お知らせ ---------- */

.news > .heading { margin-bottom: 24px; }
.news__list { border-top: 1px solid var(--rule); }
.news__list li {
  display: grid;
  grid-template-columns: 7em 1fr;
  gap: 16px;
  padding: 18px 0;
  border-bottom: 1px solid var(--rule);
}
.news__list time {
  font-family: var(--font-latin);
  font-weight: 600;
  font-size: 1.0625rem;
  color: var(--sepia);
  font-variant-numeric: tabular-nums;
}

/* ---------- アクセス ---------- */

.access__grid { display: grid; gap: 40px; }
.access__text { display: grid; gap: 24px; justify-items: start; }
.access__list { width: 100%; border-top: 1px solid var(--rule); }
.access__list div {
  display: grid;
  grid-template-columns: 6em 1fr;
  gap: 16px;
  padding: 14px 0;
  border-bottom: 1px solid var(--rule);
}
.access__list dt { color: var(--sepia); font-size: 0.9375rem; }
.access__map iframe {
  width: 100%;
  aspect-ratio: 4 / 3;
  border: 1px solid var(--rule);
  filter: grayscale(0.5) sepia(0.15);
}

@media (min-width: 900px) {
  .access__grid { grid-template-columns: 5fr 6fr; gap: 64px; align-items: start; }
  .access__map iframe { aspect-ratio: 1 / 1; }
}

/* ---------- Instagram とフッター ---------- */

.instagram {
  width: 100%;
  max-width: none;
  margin-top: var(--section-space);
  padding: clamp(72px, 10vw, 128px) var(--gutter);
  background: var(--ink);
  color: var(--paper);
}
.instagram > * { max-width: var(--max); margin-inline: auto; }
.instagram .section-label { color: #D8CDB8; }
.instagram .section-label::after { background: rgb(245 240 230 / 0.25); }
.instagram .heading { margin-bottom: 20px; }
.instagram__handle {
  display: block;
  width: fit-content;
  margin: 40px 0 32px;
  font-style: italic;
  font-size: clamp(2rem, 1rem + 6vw, 4.5rem);
  line-height: 1.2;
  text-decoration: none;
  overflow-wrap: anywhere;
}
.instagram__handle:hover { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.15em; }

@media (min-width: 900px) {
  .instagram > .button, .instagram__handle { margin-left: max(0px, (100% - var(--max)) / 2); }
}

.site-footer {
  display: grid;
  gap: 20px;
  justify-items: start;
  padding: 48px var(--gutter) 40px;
  background: var(--ink);
  color: var(--paper);
  border-top: 1px solid rgb(245 240 230 / 0.2);
}
.site-footer__logo { width: 220px; }
.site-footer__ig { display: inline-flex; align-items: center; gap: 0.5em; min-height: 44px; text-decoration: none; }
.site-footer__ig:hover { text-decoration: underline; text-underline-offset: 0.3em; }
.site-footer__copy { font-family: var(--font-latin); color: #D8CDB8; }

@media (min-width: 900px) {
  .site-footer {
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 40px;
    padding-inline: max(var(--gutter), (100% - var(--max)) / 2);
  }
  .site-footer__ig { justify-self: end; }
}

/* =========================================================
   動き：オープニング（雨晴海岸の波打ち際）とスクロール表示
   ========================================================= */

:root {
  --intro-length: 4.4s;   /* オープニング全体の長さ */
  --intro-delay: 3.3s;    /* トップの文字が出はじめるまで */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
}
.intro-skip { --intro-delay: 0.1s; }

/* ---------- オープニング ---------- */

.intro {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: var(--paper);
  color: var(--sepia);
  pointer-events: none;
  animation: intro-out 0.9s var(--ease-out) calc(var(--intro-length) - 0.9s) forwards;
}
.intro-skip .intro { display: none; }
.intro-done .intro { animation: intro-out 0.6s var(--ease-out) forwards; }

/* 引き潮のように、下から上へ画面がひらく */
@keyframes intro-out {
  from { clip-path: inset(0 0 0 0); }
  to   { clip-path: inset(0 0 100% 0); visibility: hidden; }
}

.intro__scene { width: 100%; height: 100%; display: block; }

/* 縦長の画面では、朝日から女岩までの範囲を横いっぱいに見せる */
@media (max-aspect-ratio: 1/1) {
  .intro__scene {
    position: absolute;
    bottom: 0;
    left: -74vw;
    width: 205vw;
    height: auto;
  }
  .intro .intro__caption { top: 38vh; }
}

/* 鉛筆の色：外観スケッチに合わせた、少し茶色がかった黒鉛色 */
.intro__scene { --graphite: #4A403A; --graphite-soft: #8A7E74; }
.intro__paper path, .intro__water path { stroke: var(--graphite); }

.intro__sky     { stroke-width: 0.8; opacity: 0.28; }
.intro__swipe   { stroke-width: 0.7; opacity: 0.1; }
.intro__cloud   { stroke-width: 0.9; opacity: 0.45; }
.intro__horizon { stroke-width: 1.2; opacity: 0.8; }
.intro__sun     { stroke-width: 1.4; }
.intro__rays    { stroke-width: 0.8; opacity: 0.5; }
.intro__rock    { stroke-width: 1.3; }
.intro__shade path { stroke-width: 0.7; opacity: 0.45; }
.intro__shade--dark path { stroke-width: 0.9; opacity: 0.85; }
.intro__trunk   { stroke-width: 1.6; }
.intro__foliage { stroke-width: 1; opacity: 0.9; }
.intro__shore-edge { stroke-width: 1.4; }
.intro__stones  { stroke-width: 1; opacity: 0.7; }
.intro__glitter { stroke-width: 1.5; opacity: 0; }
.intro__reflect { stroke-width: 1.1; opacity: 0.7; }
.intro__ripple  { stroke-width: 0.9; }
.intro__ripples--far  .intro__ripple { opacity: 0.4; stroke-width: 0.7; }
.intro__ripples--mid  .intro__ripple { opacity: 0.6; }
.intro__ripples--near .intro__ripple { opacity: 0.8; stroke-width: 1.2; }
.intro__surf-line { stroke-width: 1.8; }
.intro__surf-line--back { stroke-width: 1.1; opacity: 0.6; }
.intro__foam { stroke-width: 1; opacity: 0.7; }

/* 鉛筆で描き進めるように、左から右へ現れる */
.intro__layer, .intro__water > * {
  clip-path: inset(0 100% 0 0);
  animation: sketch-wipe 1.2s cubic-bezier(0.45, 0, 0.2, 1) forwards;
}
.intro__layer--horizon { animation-delay: 0s; animation-duration: 0.9s; }
.intro__layer--rocks   { animation-delay: 0.35s; }
.intro__layer--sky     { animation-delay: 0.55s; animation-duration: 1.4s; }
.intro__layer--shore   { animation-delay: 0.5s; }
.intro__water > .intro__ripples--far  { animation-delay: 0.2s; }
.intro__water > .intro__ripples--mid  { animation-delay: 0.35s; }
.intro__water > .intro__ripples--near { animation-delay: 0.5s; }
.intro__water > .intro__reflect { animation-delay: 0.6s; }
.intro__water > .intro__surf    { animation-delay: 0.6s; }

@keyframes sketch-wipe { to { clip-path: inset(0 0 0 0); } }

.intro__sun { stroke-dasharray: 1; stroke-dashoffset: 1; animation: draw 0.9s ease-out 0.3s forwards; }
@keyframes draw { to { stroke-dashoffset: 0; } }

/* さざ波は画面と平行に、層ごとに違う速さでゆれる */
.intro__ripples--far  .intro__ripple { animation: drift 3s ease-in-out infinite alternate; }
.intro__ripples--mid  .intro__ripple { animation: drift 2.4s ease-in-out -0.8s infinite alternate; }
.intro__ripples--near .intro__ripple { animation: drift 2s ease-in-out -0.4s infinite alternate; }
@keyframes drift {
  from { transform: translateX(-10px); }
  to   { transform: translateX(10px); }
}

/* 朝日のきらめき */
.intro__water > .intro__glitter {
  animation: sketch-wipe 1.2s cubic-bezier(0.45, 0, 0.2, 1) 0.3s forwards, glitter 0.9s steps(2) 0.8s infinite alternate;
}
@keyframes glitter {
  from { opacity: 0.55; }
  to   { opacity: 1; }
}

/* 波打ち際は、画面と平行のまま寄せては返す */
.intro__surf-line, .intro__foam {
  animation: surf 2.6s ease-in-out 0.6s infinite;
}
.intro__surf-line--back { animation-delay: 0.9s; }
@keyframes surf {
  0%, 100% { transform: translateY(6px); }
  45%      { transform: translateY(-22px); }
}

.intro__caption {
  position: absolute;
  left: 50%;
  top: 14vh;
  margin: 0;
  color: var(--ink);
  font-style: italic;
  font-size: clamp(1.125rem, 0.9rem + 1vw, 1.625rem);
  letter-spacing: 0.12em;
  white-space: nowrap;
  opacity: 0;
  --tx: -50%;
  transform: translateX(-50%);
  animation: fade-up 1s var(--ease-out) 1.3s forwards;
}

@keyframes fade-up {
  from { opacity: 0; transform: translate(var(--tx, 0), 16px); }
  to   { opacity: 1; transform: translate(var(--tx, 0), 0); }
}

/* ---------- トップ：オープニングのあとに順に現れる ---------- */

.hero__sketch img {
  animation: sketch-in 1.6s var(--ease-out) var(--intro-delay) both;
}
@keyframes sketch-in {
  from { opacity: 0; transform: scale(1.04); }
  to   { opacity: 1; transform: none; }
}
.hero__logo,
.hero__catch,
.hero__lead,
.hero__open,
.hero__body > .button,
.hero__vertical {
  animation: fade-up 1.1s var(--ease-out) both;
  animation-delay: var(--intro-delay);
}
.hero__catch { animation-delay: calc(var(--intro-delay) + 0.15s); }
.hero__lead  { animation-delay: calc(var(--intro-delay) + 0.3s); }
.hero__open  { animation-delay: calc(var(--intro-delay) + 0.45s); }
.hero__body > .button { animation-delay: calc(var(--intro-delay) + 0.6s); }
.hero__vertical { animation-delay: calc(var(--intro-delay) + 0.8s); }

/* ---------- トップの下の波打ち際の線 ---------- */

.shoreline {
  overflow: hidden;
  height: 36px;
  margin-top: clamp(24px, 5vw, 48px);
}
.shoreline svg {
  width: 200%;
  height: 100%;
  animation: shore-drift 26s linear infinite;
}
.shoreline__line { fill: none; stroke: var(--sepia); stroke-width: 1.2; vector-effect: non-scaling-stroke; opacity: 0.55; }
.shoreline__line--2 { stroke: var(--rule); }
@keyframes shore-drift { to { transform: translateX(-50%); } }

/* ---------- スクロールで現れる ---------- */

.js [data-reveal] {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 1s var(--ease-out), transform 1s var(--ease-out);
}
.js [data-reveal].is-visible { opacity: 1; transform: none; }

/* 図面の罫線が左から引かれる */
.js .section-label[data-reveal] { transform: none; }
.js .section-label::after {
  transform-origin: left;
  transform: translateY(-0.3em) scaleX(0);
  transition: transform 1.4s var(--ease-out) 0.2s;
}
.js .section-label.is-visible::after { transform: translateY(-0.3em) scaleX(1); }

/* 写真はふわりと寄る */
.js .concept__photo[data-reveal] img,
.js .offer__item[data-reveal] img,
.js .special__item[data-reveal] img {
  transform: scale(1.06);
  transition: transform 1.6s var(--ease-out);
}
.js [data-reveal].is-visible img { transform: none; }

/* 交互に並ぶ「お店でできること」は、写真の側から */
@media (min-width: 768px) {
  .js .offer__item[data-reveal] .offer__text {
    opacity: 0;
    transform: translateX(-24px);
    transition: opacity 1s var(--ease-out) 0.25s, transform 1s var(--ease-out) 0.25s;
  }
  .js .offer__item[data-reveal]:nth-child(even) .offer__text { transform: translateX(24px); }
  .js .offer__item.is-visible .offer__text { opacity: 1; transform: none; }
}

/* スパイス標本の番号が順に置かれる */
.js .specimen[data-reveal] .specimen__pin {
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.4);
  transition: opacity 0.5s, transform 0.6s var(--ease-out);
}
.js .specimen.is-visible .specimen__pin { opacity: 1; transform: translate(-50%, -50%) scale(1); }
.js .specimen.is-visible .specimen__pin--1 { transition-delay: 0.4s; }
.js .specimen.is-visible .specimen__pin--2 { transition-delay: 0.55s; }
.js .specimen.is-visible .specimen__pin--3 { transition-delay: 0.7s; }
.js .specimen.is-visible .specimen__pin--4 { transition-delay: 0.85s; }
.js .specimen.is-visible .specimen__pin--5 { transition-delay: 1s; }
.js .specimen.is-visible .specimen__pin--6 { transition-delay: 1.15s; }

/* 写真にカーソルを重ねると、少しだけ寄る */
@media (hover: hover) {
  .offer__photo, .concept__photo, .special__photo { overflow: hidden; }
  .offer__photo img, .concept__photo img, .special__photo img { transition: transform 1.2s var(--ease-out); }
  .offer__item.is-visible:hover img,
  .concept__photo.is-visible:hover img,
  .special__item.is-visible:hover img { transform: scale(1.03); }
}

/* ---------- 動きを減らす設定の人には、動きを止めてすぐ見せる ---------- */

@media (prefers-reduced-motion: reduce) {
  .intro { display: none; }
  .shoreline svg { animation: none; }
  .hero__sketch img, .hero__logo, .hero__catch, .hero__lead, .hero__open,
  .hero__body > .button, .hero__vertical { animation: none; }
  .js [data-reveal], .js [data-reveal] img, .js .offer__item[data-reveal] .offer__text,
  .js .specimen[data-reveal] .specimen__pin { opacity: 1; transform: none; }
  .js .specimen[data-reveal] .specimen__pin { transform: translate(-50%, -50%); }
  .js .section-label::after { transform: translateY(-0.3em); }
}