@charset "UTF-8";

/* =========================================================
   ハクの森 — 犬猫酵素風呂
   Design tokens
   ========================================================= */
:root{
  /* 森 */
  --forest-900:#1F2C17;
  --forest-700:#334524;
  --moss-600:#4E6B2E;
  --moss-500:#5E7A3A;   /* ロゴのグリーン */
  --moss-300:#8FA867;

  /* おが屑・ヒノキ */
  --bran-900:#38271A;
  --bran-700:#5A4028;
  --bran-500:#A2703F;
  --bran-300:#D0A874;
  --hinoki-100:#EFE3CB;

  /* 紙・空 */
  --paper:#F4F3EA;
  --paper-2:#E9EDDD;
  --sky-100:#E4EDF2;
  --sky-400:#8FB4CC;

  --ink:#26281F;
  --ink-soft:#5A5F4E;
  --line:rgba(38,40,31,.14);

  --font-display:"Hiragino Mincho ProN","HiraMinProN-W3","Yu Mincho",YuMincho,"Noto Serif JP","Songti SC",serif;
  --font-body:"Hiragino Sans","Hiragino Kaku Gothic ProN","Yu Gothic",YuGothic,"Noto Sans JP",Meiryo,system-ui,sans-serif;
  --font-num:"Avenir Next","Futura","Century Gothic","Helvetica Neue",system-ui,sans-serif;

  --wrap:1160px;
  --gap:clamp(2rem,5vw,4.5rem);
  --pad-x:clamp(1.25rem,5vw,3rem);
  --sec-y:clamp(4.5rem,9vw,8.5rem);
  --radius:14px;
  --ease:cubic-bezier(.22,.68,.32,1);
}

/* =========================================================
   Reset / base
   ========================================================= */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--font-body);
  font-size:16px;
  line-height:2;
  letter-spacing:.04em;
  font-feature-settings:"palt" 1;
  overflow-x:hidden;
  overflow-x:clip; /* clip は横だけ切る。hidden と違いスクロール枠を作らない */
}
img,svg,iframe{display:block;max-width:100%}
img{height:auto}
a{color:inherit;text-decoration:none}
ul,ol,dl,dd{margin:0;padding:0}
li{list-style:none}
h1,h2,h3,p,figure{margin:0}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}

:focus-visible{outline:3px solid var(--moss-500);outline-offset:3px;border-radius:4px}
.section--bran :focus-visible,.section--moss :focus-visible,.section--cta :focus-visible{outline-color:var(--bran-300)}

.skip-link{
  position:absolute;left:1rem;top:-100px;z-index:200;
  background:var(--moss-500);color:#fff;padding:.7em 1.4em;border-radius:0 0 8px 8px;
  transition:top .2s var(--ease);
}
.skip-link:focus{top:0}

.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:var(--pad-x)}
.center{text-align:center}

/* =========================================================
   Typography primitives
   ========================================================= */
.h2{
  font-family:var(--font-display);
  font-weight:600;
  /* スマホでは画面幅に連動して縮め、短い見出しが2行に割れないようにする。
     一番長い「今日のハクの森は、こちらで。」が375px幅で1行に収まる値が基準。 */
  font-size:clamp(1.25rem,6.5vw,2.9rem);
  line-height:1.55;
  letter-spacing:.09em;
  color:var(--forest-900);
  margin-bottom:1.4rem;
  word-break:auto-phrase; /* 日本語の自然な折り返し（対応ブラウザのみ） */
}
.h2--light{color:var(--hinoki-100)}
/* 店名は必ず1行に収める（画面幅に合わせて字を小さくする） */
.h2--shopname{
  font-size:clamp(1.15rem,2.7vw,1.85rem);
  letter-spacing:.04em;
  white-space:nowrap;
}

.eyebrow{
  font-family:var(--font-num);
  font-size:.72rem;
  font-weight:600;
  letter-spacing:.34em;
  text-transform:uppercase;
  color:var(--moss-600);
  margin-bottom:1.1rem;
  display:flex;align-items:center;gap:.9em;
  line-height:1.4;
}
.eyebrow::before{
  content:"";width:2.2em;height:1px;background:currentColor;flex:none;opacity:.55;
}
.eyebrow.center{justify-content:center}
.eyebrow--light{color:var(--bran-300)}

/* 日本語の折り返しの方針
   ・左ぞろえの長い本文 … 指定なし。どこでも折れるので行末がそろって読みやすい
   ・短い説明文       … auto-phrase で文節ごとに折る（カード内なので行数が少ない）
   ・中央ぞろえの文章  … auto-phrase + balance。単語が割れず、行の長さもそろう
   auto-phrase を長い本文に使うと行末が大きく余ってガタつくため、使い分ける。 */
.way__desc,.benefit__desc,.flow__desc,.guide-card__desc{
  word-break:auto-phrase;
  text-wrap:pretty;
}
.body{
  font-size:1rem;
  line-height:2.15;
  color:var(--ink-soft);
  margin-bottom:1.2em;
  max-width:36em;
}
.body strong{color:var(--forest-700);font-weight:600}
.body--light{color:rgba(239,227,203,.82)}

/* =========================================================
   Buttons
   ========================================================= */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.6em;
  padding:.95em 2em;
  border-radius:999px;
  font-size:.92rem;font-weight:600;letter-spacing:.12em;
  line-height:1.4;
  border:1px solid transparent;
  transition:transform .25s var(--ease),background-color .25s var(--ease),color .25s var(--ease),box-shadow .25s var(--ease);
  white-space:nowrap;
}
.btn:hover{transform:translateY(-2px)}
.btn .icon{width:1.15em;height:1.15em;fill:currentColor;flex:none}

.btn--reserve{background:var(--moss-500);color:#fff;box-shadow:0 6px 18px rgba(94,122,58,.28)}
.btn--reserve:hover{background:var(--moss-600);box-shadow:0 10px 24px rgba(94,122,58,.34)}

.btn--line{background:#06C755;color:#fff;box-shadow:0 6px 18px rgba(6,199,85,.24)}
.btn--line:hover{background:#05b34c}

.btn--insta{background:var(--forest-900);color:var(--hinoki-100)}
.btn--insta:hover{background:var(--forest-700)}
/* 深い緑の面ではアウトライン表現に */
.section--cta .btn--insta{
  background:rgba(239,227,203,.12);
  border-color:rgba(239,227,203,.42);
}
.section--cta .btn--insta:hover{background:var(--hinoki-100);color:var(--forest-900);border-color:var(--hinoki-100)}

.btn--ghost{border-color:currentColor;color:var(--forest-700)}
.btn--ghost:hover{background:var(--forest-900);color:var(--paper);border-color:var(--forest-900)}
.btn--ghost-light{color:var(--hinoki-100)}
.btn--ghost-light:hover{background:var(--hinoki-100);color:var(--forest-900);border-color:var(--hinoki-100)}

.btn--lg{padding:1.15em 2.4em;font-size:1rem}

/* =========================================================
   Header
   ========================================================= */
.site-header{
  position:fixed;inset:0 0 auto 0;z-index:100;
  display:flex;align-items:center;gap:1.5rem;
  padding:1rem var(--pad-x);
  background:rgba(244,243,234,0);
  transition:background-color .35s var(--ease),box-shadow .35s var(--ease),padding .35s var(--ease);
}
.site-header.is-stuck{
  background:rgba(244,243,234,.94);
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
  box-shadow:0 1px 0 var(--line);
  padding-block:.6rem;
}

.brand{display:flex;align-items:center;gap:.7rem;margin-right:auto}
.brand__mark{
  width:44px;height:44px;object-fit:contain;
  background:var(--paper);border-radius:50%;padding:4px;
  transition:width .35s var(--ease),height .35s var(--ease);
}
.is-stuck .brand__mark{width:38px;height:38px}
.brand__text{display:flex;flex-direction:column;line-height:1.25}
.brand__name{
  font-family:var(--font-display);font-size:1.18rem;font-weight:600;
  letter-spacing:.16em;color:var(--forest-900);
}
.brand__sub{
  font-size:.6rem;letter-spacing:.26em;color:var(--moss-600);font-weight:600;
}
/* ヒーロー上（未スクロール時）は白抜き */
.site-header:not(.is-stuck) .brand__name{color:#fff;text-shadow:0 1px 12px rgba(20,30,12,.5)}
.site-header:not(.is-stuck) .brand__sub{color:rgba(255,255,255,.85);text-shadow:0 1px 10px rgba(20,30,12,.5)}
.site-header:not(.is-stuck) .brand__mark{background:rgba(255,255,255,.9)}

.nav{display:flex;gap:1.6rem}
.nav a{
  font-size:.84rem;letter-spacing:.1em;font-weight:600;color:var(--forest-700);
  position:relative;padding-block:.3em;
}
.site-header:not(.is-stuck) .nav a{color:#fff;text-shadow:0 1px 12px rgba(20,30,12,.6)}
.nav a::after{
  content:"";position:absolute;left:0;bottom:0;width:100%;height:1px;
  background:currentColor;transform:scaleX(0);transform-origin:right;
  transition:transform .3s var(--ease);
}
.nav a:hover::after{transform:scaleX(1);transform-origin:left}

.header__cta{padding:.7em 1.5em;font-size:.82rem}

.nav-toggle{display:none;width:44px;height:44px;flex-direction:column;justify-content:center;gap:6px;padding:0 10px}
.nav-toggle span{display:block;height:2px;background:var(--forest-900);border-radius:2px;transition:transform .3s var(--ease),opacity .2s var(--ease)}
.site-header:not(.is-stuck) .nav-toggle span{background:#fff}

/* =========================================================
   Hero
   ========================================================= */
.hero{
  position:relative;
  min-height:100svh;
  display:flex;align-items:flex-end;
  padding:8rem var(--pad-x) clamp(4rem,9vh,7rem);
  overflow:hidden;
  overflow:clip;
  isolation:isolate;
}
.hero__media{position:absolute;inset:0;z-index:-2}
.hero__media picture{display:block;width:100%;height:100%}
.hero__media img{width:100%;height:100%;object-fit:cover;object-position:50% 60%;
  animation:heroDrift 14s var(--ease) forwards;}
@keyframes heroDrift{from{transform:scale(1.12)}to{transform:scale(1)}}
.hero::after{
  content:"";position:absolute;inset:0;z-index:-1;
  background:
    linear-gradient(to top,rgba(24,36,14,.82) 0%,rgba(24,36,14,.34) 42%,rgba(24,36,14,.12) 70%,rgba(24,36,14,.42) 100%);
}

.hero__inner{width:100%;max-width:var(--wrap);margin-inline:auto;color:#fff}

.hero__eyebrow{
  font-size:.72rem;letter-spacing:.24em;font-weight:600;
  color:rgba(255,255,255,.9);margin-bottom:1.6rem;
  text-shadow:0 1px 14px rgba(20,30,12,.6);
}
.hero__eyebrow span{white-space:nowrap}

.hero__title{
  font-family:var(--font-display);
  font-weight:600;
  font-size:clamp(3rem,10.5vw,7rem);
  line-height:1.12;
  letter-spacing:.06em;
  text-shadow:0 2px 30px rgba(20,30,12,.5);
  margin-bottom:1.8rem;
}
.hero__title-line{display:block;overflow:hidden}
.hero__title-line > span,
.hero__title-line{will-change:transform}

.hero__lead{
  font-size:clamp(.95rem,2vw,1.1rem);
  line-height:2.1;
  color:rgba(255,255,255,.94);
  text-shadow:0 1px 16px rgba(20,30,12,.65);
  margin-bottom:2.4rem;
  max-width:32em;
}

.hero__actions{display:flex;flex-wrap:wrap;gap:.9rem}
.hero__actions .btn--ghost{color:#fff;border-color:rgba(255,255,255,.7)}
.hero__actions .btn--ghost:hover{background:#fff;color:var(--forest-900);border-color:#fff}

.hero__scroll{
  position:absolute;left:calc(var(--pad-x) / 2);bottom:0;
  display:flex;flex-direction:column;align-items:center;gap:.8rem;
  color:rgba(255,255,255,.7);
}
.hero__scroll span{
  writing-mode:vertical-rl;
  font-family:var(--font-num);font-size:.62rem;letter-spacing:.4em;
}
.hero__scroll::after{
  content:"";width:1px;height:64px;background:rgba(255,255,255,.5);
  animation:scrollLine 2.6s var(--ease) 3;transform-origin:top;
}
@keyframes scrollLine{0%{transform:scaleY(0)}45%{transform:scaleY(1)}100%{transform:scaleY(1);opacity:0}}

/* 縦組みの見出し（デスクトップのみ） */
@media (min-width:900px){
  .hero{align-items:center}
  .hero__inner{
    display:grid;
    grid-template-columns:minmax(0,1fr) auto;
    grid-template-areas:
      "eyebrow title"
      "lead    title"
      "actions title";
    column-gap:clamp(2rem,6vw,5rem);
    align-content:center;
  }
  .hero__eyebrow{grid-area:eyebrow;align-self:end;margin-bottom:2.4rem}
  .hero__lead{grid-area:lead;max-width:25em;margin-bottom:2.2rem}
  .hero__actions{grid-area:actions;align-self:start}

  .hero__title{
    grid-area:title;align-self:center;
    display:flex;flex-direction:row-reverse;align-items:flex-start;
    gap:.1em;
    font-size:clamp(3rem,5.4vw,4.8rem);
    letter-spacing:.16em;
    margin:0;
  }
  .hero__title-line{
    writing-mode:vertical-rl;
    display:block;overflow:visible;
    line-height:1;
  }
}

/* =========================================================
   Sections
   ========================================================= */
.section{padding-block:var(--sec-y);position:relative}
.section--paper{background:var(--paper)}
.section--paper2{background:var(--paper-2)}
.section--sky{background:linear-gradient(180deg,var(--sky-100) 0%,var(--paper) 100%)}
.section--moss{background:var(--moss-600);color:var(--hinoki-100)}
.section--bran{background:var(--bran-900);color:var(--hinoki-100);padding-block:clamp(3rem,6vw,5rem)}
/* 緑地の面では、砂色の小さな文字だとコントラストが足りないので明るくする */
.section--moss .eyebrow--light,
.section--moss .info dt{color:var(--hinoki-100);opacity:.92}
.section--moss .btn--reserve{background:var(--hinoki-100);color:var(--forest-900);box-shadow:none}
.section--moss .btn--reserve:hover{background:#fff;color:var(--forest-900)}
.section--cta{background:var(--forest-900);color:var(--hinoki-100);text-align:center}

.body.center{margin-inline:auto}
/* 中央ぞろえの文章は、最後の行だけ2〜3文字残ると特に目立つ。
   balance は全行の長さをそろえるので、半端な行ができない。 */
.body.center,.cta__lead,.ways__lead,.insta__lead,.price-disclaimer,.sec-head__lead{
  word-break:auto-phrase;
  text-wrap:balance;
}
.ways__lead{max-width:32em}
.sec-head{max-width:44em;margin-bottom:clamp(2.5rem,5vw,4rem)}
.sec-head__lead{max-width:40em}

/* --- おが屑の稜線（セクションの境目） --- */
.mound{line-height:0;background:var(--moss-600)}
.mound svg{width:100%;height:clamp(48px,7vw,110px)}
.mound svg path{fill:var(--bran-900)}
.mound--flip{background:var(--sky-100)}
.mound--flip svg{transform:scaleY(-1)}

/* =========================================================
   About
   ========================================================= */
/* 右側の写真は画面の端まで抜く（左のテキストは他のセクションと行頭を揃える） */
.about{
  display:grid;grid-template-columns:1fr;gap:var(--gap);
  padding-inline:var(--pad-x);
}
@media (min-width:900px){
  .about{
    grid-template-columns:minmax(0,1fr) minmax(0,1.08fr);
    align-items:center;
    padding-left:max(var(--pad-x),calc((100vw - var(--wrap)) / 2 + var(--pad-x)));
    padding-right:0;
  }
}
.facts{
  margin-top:2.4rem;border-top:1px solid var(--line);
}
.facts li{
  display:grid;grid-template-columns:6.5em 1fr;gap:1rem;
  padding:.85rem 0;border-bottom:1px solid var(--line);
  font-size:.9rem;line-height:1.8;
}
.facts__k{color:var(--moss-600);font-weight:600;letter-spacing:.1em}
.facts__v{color:var(--ink-soft)}

.photo{overflow:hidden;overflow:clip;border-radius:var(--radius);background:var(--paper-2)}
.photo img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease)}
.photo:hover img{transform:scale(1.04)}

/* モバイルでも写真は画面いっぱいに */
.about__media{margin-inline:calc(-1 * var(--pad-x))}
@media (min-width:900px){.about__media{margin-inline:0}}

/* =========================================================
   スライドショー
   ========================================================= */
.slideshow{position:relative;background:var(--forest-900)}
.slideshow__stage{position:relative;aspect-ratio:4/3;overflow:hidden;overflow:clip}
@media (min-width:900px){
  .slideshow{border-radius:var(--radius) 0 0 var(--radius);overflow:hidden;overflow:clip}
  .slideshow__stage{aspect-ratio:5/4}
}

.slide{
  position:absolute;inset:0;margin:0;
  opacity:0;visibility:hidden;
  transition:opacity 1.1s var(--ease),visibility 0s linear 1.1s;
}
.slide.is-active{opacity:1;visibility:visible;transition:opacity 1.1s var(--ease),visibility 0s}
.slide img{width:100%;height:100%;object-fit:cover;transform:scale(1)}
/* 表示中だけ、ゆっくり寄っていく */
.slide.is-active img{transform:scale(1.05);transition:transform 8s linear}

.slide__cap{
  position:absolute;left:0;right:0;bottom:0;
  padding:4.5rem 1.6rem 1.4rem;
  font-family:var(--font-display);
  font-size:clamp(.95rem,1.9vw,1.2rem);
  letter-spacing:.1em;line-height:1.7;
  color:#fff;
  text-shadow:0 1px 14px rgba(20,30,12,.7);
  background:linear-gradient(to top,rgba(20,30,12,.72),rgba(20,30,12,0));
  pointer-events:none;
}
@media (min-width:900px){.slide__cap{padding:5rem 2.2rem 1.9rem}}

/* 操作ボタンは上に。写真の主役（犬）は下のほうに写っていることが多いため */
.slideshow__ui{
  position:absolute;right:1rem;top:1rem;
  display:flex;align-items:center;gap:.5rem;
  padding:.35rem;
  border-radius:999px;
  background:rgba(20,30,12,.42);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
}
@media (min-width:900px){.slideshow__ui{right:1.6rem;top:1.6rem}}

.slideshow__arrow{
  width:34px;height:34px;border-radius:50%;
  display:grid;place-items:center;color:#fff;
  transition:background-color .25s var(--ease);
}
.slideshow__arrow:hover{background:rgba(255,255,255,.22)}
.slideshow__arrow svg{width:18px;height:18px}

.slideshow__dots{display:flex;align-items:center;gap:.45rem;padding-inline:.3rem}
.slideshow__dot{
  width:8px;height:8px;border-radius:50%;padding:0;
  background:rgba(255,255,255,.42);
  transition:background-color .3s var(--ease),width .3s var(--ease);
}
.slideshow__dot:hover{background:rgba(255,255,255,.7)}
.slideshow__dot[aria-current="true"]{background:#fff;width:22px;border-radius:999px}

@media (prefers-reduced-motion:reduce){
  .slide.is-active img{transform:none;transition:none}
}

/* =========================================================
   店主より（開業の経緯）
   このページで一番静かに読ませたいところ。
   ヒノキ色の面にして、前後のセクションから浮かせている。
   ========================================================= */
.section--story{background:var(--hinoki-100)}

.story{display:grid;grid-template-columns:1fr;gap:clamp(2rem,5vw,4rem);align-items:center}

.story__photo{
  border-radius:var(--radius);overflow:hidden;overflow:clip;
  background:var(--bran-300);
  aspect-ratio:3/4;
  max-width:420px;margin-inline:auto;width:100%;
  box-shadow:0 14px 40px rgba(56,39,26,.18);
}
.story__photo img{width:100%;height:100%;object-fit:cover;object-position:50% 42%}

/* 横並びのとき、文章のほうがずっと長いので写真の左側が空いてしまう。
   写真を大きくしたうえで、スクロールに追従させて空きを作らない。 */
@media (min-width:900px){
  .story{
    grid-template-columns:.95fr 1fr;
    gap:clamp(2.5rem,5vw,4.5rem);
    align-items:start;
  }
  .story__photo{
    position:sticky;
    top:6.5rem;
    max-width:none;margin-inline:0;
    aspect-ratio:2/3;   /* 元の写真の比率。切らずに全部見せる */
  }
  .story__photo img{object-position:50% 50%}
  .story__text{padding-block:.5rem}
}

.story__text .h2{color:var(--bran-900)}
.story__text .eyebrow{color:var(--bran-500)}

.story__p{
  font-family:var(--font-display);
  font-size:clamp(.95rem,2.1vw,1.08rem);
  line-height:2.35;
  letter-spacing:.06em;
  color:var(--bran-900);
  margin-bottom:1.9em;
  word-break:auto-phrase;
  text-wrap:pretty;
}
/* 幅の狭いスマホでは、行が短く刻まれて間延びする。
   <br class="pc"> の改行だけ止めて文をつなげ、行を埋める。
   意味の切れ目（「でも、数じゃない。」など）の改行はそのまま残す。 */
@media (max-width:760px){
  .story__p br.pc{display:none}
}
/* 店名の由来は、少しだけ強く */
.story__name{color:var(--moss-600);font-weight:600}

/* 結びの4行。ここだけ大きく、左に細い線を添える */
.story__close{
  font-family:var(--font-display);
  font-size:clamp(1.1rem,2.6vw,1.4rem);
  line-height:2.1;letter-spacing:.08em;
  color:var(--forest-900);
  padding-left:1.2em;
  border-left:2px solid var(--moss-500);
}

/* =========================================================
   3つの過ごし方
   ========================================================= */
.ways{
  display:grid;gap:1.6rem;margin-top:clamp(2.5rem,5vw,3.5rem);
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
}
.way{
  background:var(--paper);color:var(--ink);
  border-radius:var(--radius);overflow:hidden;overflow:clip;
  display:flex;flex-direction:column;
  transition:transform .4s var(--ease),box-shadow .4s var(--ease);
  box-shadow:0 4px 20px rgba(20,30,12,.14);
}
.way:hover{transform:translateY(-6px);box-shadow:0 16px 36px rgba(20,30,12,.22)}
.way__img{aspect-ratio:4/3;overflow:hidden;overflow:clip}
.way__img img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease)}
.way:hover .way__img img{transform:scale(1.06)}
.way__body{padding:1.6rem 1.5rem 1.8rem;display:flex;flex-direction:column;flex:1}
.way__title{
  font-family:var(--font-display);font-size:1.3rem;font-weight:600;
  letter-spacing:.12em;color:var(--forest-900);margin-bottom:.7rem;
}
.way__desc{font-size:.88rem;line-height:1.95;color:var(--ink-soft);flex:1}
.way__more{
  margin-top:1.2rem;font-size:.76rem;font-weight:600;letter-spacing:.16em;
  color:var(--moss-600);display:inline-flex;align-items:center;gap:.5em;
}
.way__more::after{content:"→";transition:transform .3s var(--ease)}
.way:hover .way__more::after{transform:translateX(5px)}

/* =========================================================
   酵素風呂
   ========================================================= */
.kouso-hero{margin-bottom:clamp(2.5rem,5vw,4rem)}
.kouso-hero .photo{aspect-ratio:16/9;border-radius:var(--radius)}
@media (max-width:600px){.kouso-hero .photo{aspect-ratio:4/3}}

.benefits{
  display:grid;gap:1px;background:rgba(239,227,203,.18);
  border:1px solid rgba(239,227,203,.18);border-radius:var(--radius);overflow:hidden;overflow:clip;
  grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
  margin-bottom:clamp(3rem,6vw,5rem);
}
.benefit{background:var(--bran-900);padding:2rem 1.6rem}
.benefit__title{
  font-family:var(--font-display);font-size:1.08rem;font-weight:600;
  letter-spacing:.1em;color:var(--hinoki-100);margin-bottom:.8rem;
}
.benefit__desc{font-size:.85rem;line-height:1.95;color:rgba(239,227,203,.7)}

/* 猫の酵素風呂 */
.cats{
  display:grid;grid-template-columns:1fr;gap:var(--gap);
  align-items:center;
  padding:clamp(2rem,4vw,3.2rem) 0 0;
  margin-bottom:clamp(3rem,6vw,5rem);
  border-top:1px solid rgba(239,227,203,.22);
}
@media (min-width:900px){.cats{grid-template-columns:1fr 1.05fr}}
.cats__title{
  font-family:var(--font-display);font-weight:600;
  font-size:clamp(1.5rem,3.4vw,2.2rem);line-height:1.6;letter-spacing:.09em;
  color:var(--hinoki-100);margin-bottom:1.3rem;
  word-break:auto-phrase;
}
.cats__media{display:grid;grid-template-columns:1fr 1fr;gap:1rem;align-items:start}
.cats__media .photo{aspect-ratio:3/4;background:var(--bran-700)}
.cats__media .photo:last-child{margin-top:2.6rem}
@media (max-width:600px){
  .cats__media .photo{aspect-ratio:1/1}
  .cats__media .photo:last-child{margin-top:0}
}

/* スタッフが付き添っているところ（元画像が760pxなので、伸ばしすぎない） */
.staff{
  display:grid;grid-template-columns:1fr;gap:clamp(1.4rem,3vw,2.4rem);
  align-items:center;
  max-width:960px;margin:0 auto clamp(3rem,6vw,4.5rem);
}
@media (min-width:820px){.staff{grid-template-columns:1.05fr .95fr}}
.staff__img{
  border-radius:var(--radius);overflow:hidden;overflow:clip;
  background:var(--bran-700);aspect-ratio:4/3;
}
.staff__img img{width:100%;height:100%;object-fit:cover}
.staff__cap{
  font-size:.9rem;line-height:2.1;color:rgba(239,227,203,.78);
  word-break:auto-phrase;
}
.staff__lead{
  display:block;
  font-family:var(--font-display);
  font-size:clamp(1.15rem,2.4vw,1.5rem);font-weight:600;
  letter-spacing:.08em;line-height:1.7;
  color:var(--hinoki-100);margin-bottom:.9rem;
}

.flow{margin-bottom:clamp(3rem,6vw,4.5rem)}
.flow__list{
  display:grid;gap:1.4rem;margin-top:1.8rem;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  counter-reset:step;
}
.flow__step{position:relative;padding-top:1.4rem;border-top:1px solid rgba(239,227,203,.28)}
.flow__num{
  font-family:var(--font-num);font-size:.8rem;font-weight:700;letter-spacing:.1em;
  color:var(--bran-300);display:block;margin-bottom:.9rem;
}
.flow__num::before{content:"STEP "}
.flow__title{
  font-family:var(--font-display);font-size:1.05rem;font-weight:600;
  letter-spacing:.08em;color:var(--hinoki-100);margin-bottom:.6rem;line-height:1.6;
}
.flow__desc{font-size:.84rem;line-height:1.95;color:rgba(239,227,203,.7)}

.kouso-grid{
  display:grid;gap:1rem;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  margin-bottom:clamp(3rem,6vw,4.5rem);
}
.kouso-grid .photo{aspect-ratio:1/1}
.kouso-grid .photo:hover img{transform:scale(1.05)}

.callout{
  padding:clamp(1.8rem,5vw,3.2rem) clamp(1.4rem,4vw,2.6rem);
  border:1px solid rgba(239,227,203,.25);border-radius:var(--radius);
  background:rgba(239,227,203,.05);
}
.callout__text{
  font-family:var(--font-display);font-size:clamp(1rem,2.2vw,1.35rem);
  line-height:1.95;letter-spacing:.06em;color:var(--hinoki-100);
  margin-bottom:1.8rem;
  max-width:34em;      /* 長い行は読みにくいので幅を切る */
}
.callout .btn{margin-inline:0}

/* =========================================================
   Split（ドッグラン / カフェ）
   ========================================================= */
.split{display:grid;gap:var(--gap);grid-template-columns:1fr;align-items:center}
@media (min-width:900px){
  .split{grid-template-columns:1fr 1.05fr}
  .split--rev .split__text{order:2}
}
.split__media{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.split__media .photo{aspect-ratio:3/4}
.split__media .photo:first-child{margin-top:2.5rem}
@media (max-width:600px){
  .split__media .photo{aspect-ratio:1/1}
  .split__media .photo:first-child{margin-top:0}
}

/* 横長の一枚を上に敷いて、その下に2枚並べる */
.photo--span{grid-column:1 / -1}
.split__media .photo--span{aspect-ratio:4/3;margin-top:0}
.split__media:has(.photo--span) .photo:first-child{margin-top:0}
.split__media:has(.photo--span) .photo:nth-child(3){margin-top:2rem}
@media (max-width:600px){
  .split__media:has(.photo--span) .photo:nth-child(3){margin-top:0}
}

.notes{margin:1.8rem 0 2.2rem}
.notes li{
  position:relative;padding-left:1.5em;margin-bottom:.6rem;
  font-size:.9rem;line-height:1.9;color:var(--ink-soft);
}
.notes li strong{color:var(--moss-600);font-weight:700}
.notes li::before{
  content:"";position:absolute;left:0;top:.85em;
  width:7px;height:7px;border-radius:50%;background:var(--moss-300);
}

/* =========================================================
   Gallery
   ========================================================= */
.gallery{
  display:grid;gap:.7rem;margin-top:clamp(2.2rem,4vw,3rem);
  grid-template-columns:repeat(4,1fr);
}
.gallery__item{
  overflow:hidden;overflow:clip;border-radius:10px;aspect-ratio:1/1;background:var(--paper);
}
.gallery__item img{width:100%;height:100%;object-fit:cover;transition:transform .7s var(--ease)}
.gallery__item:hover img{transform:scale(1.08)}
.gallery__item:nth-child(1),.gallery__item:nth-child(6){grid-column:span 2;grid-row:span 2;aspect-ratio:1/1}
@media (max-width:820px){
  .gallery{grid-template-columns:repeat(2,1fr)}
  .gallery__item:nth-child(1),.gallery__item:nth-child(6){grid-column:span 2;grid-row:auto;aspect-ratio:16/10}
}
.gallery__cta{margin:2.5rem auto 0;display:flex;width:fit-content}

/* =========================================================
   料金
   ========================================================= */
.price-grid{
  display:grid;gap:1.4rem;margin-top:clamp(2.2rem,4vw,3rem);
  grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  align-items:stretch;            /* 3枚の高さをそろえる */
}
.price-card{
  background:#fff;border-radius:var(--radius);padding:2rem 1.8rem 1.8rem;
  border:1px solid var(--line);
  display:flex;flex-direction:column;   /* 注意書きを下端に寄せるため */
}
.price-card--lead{border-color:var(--moss-300);box-shadow:0 8px 28px rgba(94,122,58,.12)}
.price-card__title{
  font-family:var(--font-display);font-size:1.25rem;font-weight:600;letter-spacing:.12em;
  color:var(--forest-900);padding-bottom:1rem;margin-bottom:.4rem;
  border-bottom:1px solid var(--line);
}

.price-list li{
  display:flex;justify-content:space-between;align-items:baseline;gap:1rem;
  padding:.9rem 0;border-bottom:1px dashed var(--line);
}
.price-list__k{font-size:.9rem;color:var(--forest-900);line-height:1.7;font-weight:600}
.price-list__k small{
  display:block;font-size:.74rem;font-weight:400;color:var(--ink-soft);
  letter-spacing:.02em;line-height:1.75;margin-top:.15rem;
}
/* 品名と値段が途中で切れないように、区切りの「／」でだけ折り返す */
.price-list__k small span{white-space:nowrap}
.price-list__v{font-size:.82rem;color:var(--forest-900);white-space:nowrap;font-weight:600;flex:none}
.price-list__v em{
  font-family:var(--font-num);font-style:normal;font-weight:700;
  font-size:1.55rem;letter-spacing:.02em;margin-right:.12em;
  font-variant-numeric:tabular-nums;
}

/* 「ドッグラン利用無料」の小さなしるし */
.price-list__tag{
  display:inline-block;margin-top:.45rem;
  padding:.25em .8em;border-radius:999px;
  background:var(--moss-500);color:#fff;
  font-size:.68rem;font-weight:700;letter-spacing:.06em;line-height:1.6;
}

/* ベーシックコースにぶら下がる「追加1頭ごと」。
   区切り線を消して上の行とくっつけ、少し字下げして所属を示す。 */
.price-list li.price-list__head{border-bottom:0;padding-bottom:.35rem}
.price-list li.price-list__add{padding-top:.35rem}
.price-list li.price-list__add .price-list__k{
  font-weight:400;font-size:.85rem;color:var(--ink-soft);
  padding-left:1.1em;position:relative;
}
.price-list li.price-list__add .price-list__k::before{
  content:"";position:absolute;left:0;top:.85em;
  width:.6em;height:1px;background:var(--moss-300);
}
.price-list li.price-list__add .price-list__v em{font-size:1.15rem}

/* 追加料金など、コースより一段小さく見せる行 */
.price-list--sub{margin-top:.4rem}
.price-list--sub li{padding:.6rem 0;border-bottom:0}
.price-list--sub .price-list__k{font-weight:400;color:var(--ink-soft);font-size:.85rem}
.price-list--sub .price-list__v em{font-size:1.15rem}

/* ドリンクは品目が多いので行間を詰める */
.price-list--drink li{padding:.75rem 0}
.price-list--drink .price-list__v em{font-size:1.3rem}

.price-free{
  margin-top:1.2rem;padding:1rem 1.1rem;border-radius:10px;
  background:var(--paper-2);
  font-size:.82rem;line-height:1.9;color:var(--forest-700);
}
.price-free strong{font-weight:700;color:var(--moss-600)}

.price-notes{
  margin-top:auto;padding-top:1.4rem;   /* 高さをそろえたとき下端に並ぶ */
}
.price-notes li{
  position:relative;padding-left:1.1em;margin-top:.5rem;
  font-size:.76rem;line-height:1.85;color:var(--ink-soft);
}
.price-notes li::before{
  content:"";position:absolute;left:0;top:.72em;
  width:5px;height:5px;border-radius:50%;background:var(--moss-300);
}

.price-disclaimer{
  margin-top:2rem;font-size:.78rem;line-height:1.9;color:var(--ink-soft);text-align:center;
}
.price-disclaimer a{
  color:var(--moss-600);text-decoration:underline;text-underline-offset:3px;
  white-space:nowrap; /* 電話番号が行をまたいで割れないように */
}

/* =========================================================
   ご来店の前に
   ========================================================= */
.guide-grid{
  display:grid;gap:1.4rem;margin-top:clamp(2.2rem,4vw,3rem);
  grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
}
.guide-card{
  background:var(--paper);border-radius:var(--radius);padding:2rem 1.7rem;
  border-left:3px solid var(--moss-500);
}
.guide-card__title{
  font-family:var(--font-display);font-size:1.1rem;font-weight:600;letter-spacing:.1em;
  color:var(--forest-900);margin-bottom:.8rem;
}
.guide-card__desc{font-size:.86rem;line-height:2;color:var(--ink-soft)}

/* =========================================================
   Instagram
   ========================================================= */
.insta__lead{margin-inline:auto;text-align:center;max-width:34em}

.insta-card{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1.2rem;
  max-width:640px;margin:clamp(2rem,4vw,2.8rem) auto 0;
  padding:1.1rem 1.3rem;
  background:#fff;border:1px solid var(--line);border-radius:999px;
}
.insta-card__id{display:flex;align-items:center;gap:.9rem;min-width:0}
.insta-card__avatar{
  width:56px;height:56px;flex:none;object-fit:contain;
  background:var(--paper-2);border-radius:50%;padding:5px;
}
.insta-card__names{display:flex;flex-direction:column;line-height:1.5;min-width:0}
.insta-card__names strong{
  font-family:var(--font-display);font-size:1rem;font-weight:600;letter-spacing:.08em;
  color:var(--forest-900);
}
.insta-card__names span{
  font-family:var(--font-num);font-size:.8rem;letter-spacing:.06em;color:var(--ink-soft);
}
@media (max-width:560px){
  .insta-card{flex-direction:column;border-radius:var(--radius);padding:1.5rem}
  .insta-card__id{flex-direction:column;text-align:center}
}

/* 貼り付けたウィジェットが枠からはみ出さないように。
   埋め込みコードは width/height が固定値で書かれていることが多く、
   そのままだとスマホで横にはみ出すため !important で上書きする。
   縦横比（765:510＝3:2）を保ったまま幅に合わせて縮む。 */
.insta-feed{
  margin-top:clamp(1.8rem,4vw,2.6rem);
  max-width:765px;margin-inline:auto;
}
.insta-feed:empty{display:none}
.insta-feed img{max-width:100%}
.insta-feed iframe{
  width:100% !important;
  max-width:100%;
  aspect-ratio:765 / 510;
  height:auto !important;
  border:0;display:block;
  border-radius:var(--radius);
  overflow:hidden;
}
/* 写真の上に重ねる、Instagramへの自前リンク */
.insta-feed__frame{position:relative}
.insta-feed__frame iframe{pointer-events:none}
.insta-feed__cover{
  position:absolute;inset:0;z-index:2;
  display:grid;place-items:center;
  border-radius:var(--radius);
  background:rgba(31,44,23,0);
  transition:background-color .35s var(--ease);
}
.insta-feed__cover-label{
  padding:.85em 1.8em;border-radius:999px;
  background:rgba(255,255,255,.96);color:var(--forest-900);
  font-size:.88rem;font-weight:700;letter-spacing:.1em;
  opacity:0;transform:translateY(8px);
  transition:opacity .35s var(--ease),transform .35s var(--ease);
  box-shadow:0 6px 20px rgba(20,30,12,.28);
}
.insta-feed__cover:hover,
.insta-feed__cover:focus-visible{background:rgba(31,44,23,.42)}
.insta-feed__cover:hover .insta-feed__cover-label,
.insta-feed__cover:focus-visible .insta-feed__cover-label{opacity:1;transform:none}
/* タッチ端末はホバーがないので、常に控えめに出しておく */
@media (hover:none){
  .insta-feed__cover{align-items:end;padding-bottom:.8rem}
  .insta-feed__cover-label{
    opacity:1;transform:none;
    font-size:.78rem;padding:.6em 1.3em;
    background:rgba(255,255,255,.92);
  }
}

/* Instagram公式の埋め込み（blockquote）を貼った場合 */
.insta-feed blockquote{margin-inline:auto !important;max-width:100% !important}

.insta-empty{
  margin-top:clamp(1.8rem,4vw,2.6rem);
  display:flex;flex-direction:column;align-items:center;gap:1.2rem;
  padding:clamp(2rem,5vw,3rem) 1.5rem;
  border:1px dashed var(--line);border-radius:var(--radius);
  background:rgba(255,255,255,.5);
}
.insta-empty__text{font-size:.9rem;color:var(--ink-soft);text-align:center;line-height:1.9}
.insta-empty[hidden]{display:none}

/* =========================================================
   Access
   ========================================================= */
.access{display:grid;gap:var(--gap);grid-template-columns:1fr}
@media (min-width:900px){.access{grid-template-columns:1fr 1.15fr;align-items:center}}

.info{margin-top:2rem;border-top:1px solid rgba(239,227,203,.25)}
.info dt{
  font-size:.74rem;font-weight:600;letter-spacing:.2em;
  color:var(--bran-300);padding-top:1.1rem;
}
.info dd{
  font-size:.94rem;line-height:1.9;color:var(--hinoki-100);
  padding-bottom:1.1rem;margin-bottom:0;border-bottom:1px solid rgba(239,227,203,.18);
}
.info dd small{display:inline-block;font-size:.76rem;opacity:.7;line-height:1.8}
.info dd a{text-decoration:underline;text-underline-offset:3px}

.access__actions{display:flex;flex-wrap:wrap;gap:.8rem;margin-top:2rem}
.access__map{border-radius:var(--radius);overflow:hidden;overflow:clip;box-shadow:0 10px 30px rgba(20,30,12,.24)}
.access__map iframe{width:100%;height:clamp(300px,46vw,480px);border:0;filter:saturate(.9)}

/* =========================================================
   CTA
   ========================================================= */
.cta{display:flex;flex-direction:column;align-items:center}
.cta__mark{width:86px;height:86px;object-fit:contain;margin-bottom:1.6rem;opacity:.9;
  filter:brightness(0) saturate(100%) invert(85%) sepia(18%) saturate(360%) hue-rotate(2deg) brightness(97%)}
.cta__title{color:var(--hinoki-100)}
.cta__lead{color:rgba(239,227,203,.75);margin-bottom:2.4rem}
.cta__buttons{display:flex;flex-wrap:wrap;gap:.9rem;justify-content:center}
.cta__tel{margin-top:2rem;font-size:.86rem;letter-spacing:.1em;color:rgba(239,227,203,.7)}
.cta__tel a{
  font-family:var(--font-num);font-size:1.1rem;font-weight:700;letter-spacing:.06em;
  color:var(--hinoki-100);text-decoration:underline;text-underline-offset:4px;
}

/* =========================================================
   Footer
   ========================================================= */
.site-footer{background:var(--forest-900);color:rgba(239,227,203,.7);padding-block:3rem 6.5rem;
  border-top:1px solid rgba(239,227,203,.14)}
.footer{display:flex;flex-direction:column;gap:1.8rem;align-items:center;text-align:center}
.footer__brand{display:flex;align-items:center;gap:1rem;text-align:left}
.footer__brand img{width:52px;height:52px;object-fit:contain;background:var(--hinoki-100);border-radius:50%;padding:5px}
.footer__name{font-family:var(--font-display);font-size:1.05rem;letter-spacing:.14em;color:var(--hinoki-100)}
.footer__addr{font-size:.76rem;line-height:1.8}
.footer__nav{display:flex;flex-wrap:wrap;gap:.6rem 1.6rem;justify-content:center}
.footer__nav a{font-size:.8rem;letter-spacing:.08em}
.footer__nav a:hover{color:var(--bran-300)}
.footer__copy{font-family:var(--font-num);font-size:.7rem;letter-spacing:.2em;opacity:.6}
@media (max-width:520px){
  .footer__brand{flex-direction:column;text-align:center}
}

/* =========================================================
   モバイル固定バー
   ========================================================= */
.sticky-bar{
  position:fixed;left:0;right:0;bottom:0;z-index:90;
  display:none;
  background:rgba(31,44,23,.96);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  padding:.5rem .5rem calc(.5rem + env(safe-area-inset-bottom));
  gap:.4rem;
}
.sticky-bar__btn{
  flex:1;text-align:center;padding:.85em .4em;border-radius:10px;
  font-size:.82rem;font-weight:700;letter-spacing:.08em;
}
.sticky-bar__btn--reserve{background:var(--moss-500);color:#fff;flex:1.4}
.sticky-bar__btn--line{background:#06C755;color:#fff}
.sticky-bar__btn--tel{background:rgba(239,227,203,.16);color:var(--hinoki-100)}

/* =========================================================
   Reveal animation
   ========================================================= */
.reveal{opacity:0;transform:translateY(22px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
.reveal.is-in{opacity:1;transform:none}
.reveal-d1{transition-delay:.09s}
.reveal-d2{transition-delay:.18s}
.reveal-d3{transition-delay:.27s}

.hero__eyebrow,.hero__lead,.hero__actions{
  opacity:0;transform:translateY(18px);
  animation:heroIn 1.1s var(--ease) forwards;
}
.hero__eyebrow{animation-delay:.2s}
.hero__lead{animation-delay:.72s}
.hero__actions{animation-delay:.9s}
@keyframes heroIn{to{opacity:1;transform:none}}

/* 見出しは行ごとに、書いていくように現れる */
.hero__title-line{
  clip-path:inset(0 0 100% 0);
  opacity:0;
  animation:brushIn 1.25s var(--ease) forwards;
}
.hero__title-line:nth-child(1){animation-delay:.4s}
.hero__title-line:nth-child(2){animation-delay:.58s}
@keyframes brushIn{
  from{clip-path:inset(0 0 100% 0);opacity:0}
  20%{opacity:1}
  to{clip-path:inset(0 0 0 0);opacity:1}
}
/* 縦組みのときは、右の行から書き出す */
@media (min-width:900px){
  .hero__title-line:nth-child(1){animation-delay:.58s}
  .hero__title-line:nth-child(2){animation-delay:.4s}
}

/* =========================================================
   Responsive
   ========================================================= */
@media (max-width:980px){
  /* backdrop-filter はヘッダーを position:fixed の基準にしてしまい、
     中のメニューパネルがヘッダーの高さに潰れる。小さい画面では使わない。 */
  .site-header.is-stuck{
    -webkit-backdrop-filter:none;backdrop-filter:none;
    background:rgba(244,243,234,.98);
  }
  .nav{
    position:fixed;inset:0 0 0 auto;width:min(78vw,320px);
    flex-direction:column;justify-content:center;gap:1.6rem;
    background:var(--forest-900);
    padding:2rem var(--pad-x);
    transform:translateX(100%);
    transition:transform .45s var(--ease);
    box-shadow:-8px 0 40px rgba(0,0,0,.3);
  }
  .nav.is-open{transform:none}
  .nav a,.site-header:not(.is-stuck) .nav a{
    color:var(--hinoki-100);font-size:1rem;letter-spacing:.14em;text-shadow:none;
  }
  .nav-toggle{display:flex;z-index:2}
  .nav-toggle[aria-expanded="true"] span{background:var(--hinoki-100)}
  .nav-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(8px) rotate(45deg)}
  .nav-toggle[aria-expanded="true"] span:nth-child(2){opacity:0}
  .nav-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-8px) rotate(-45deg)}
  .header__cta{display:none}
  body.nav-open{overflow:hidden}
}

@media (max-width:760px){
  body{font-size:15px}
  .sticky-bar{display:flex}
  .hero__scroll{display:none}
  /* 注意書きは中央ぞろえだと行末が不ぞろいで読みにくいので、スマホでは左ぞろえ */
  .price-disclaimer{
    text-align:left;
    text-wrap:pretty;
    max-width:34em;margin-inline:auto;
  }
  .btn{width:100%;max-width:340px}
  .hero__actions,.cta__buttons,.access__actions{width:100%;flex-direction:column;align-items:center}
  .split__text .btn{margin-inline:auto}
  .gallery__cta{width:100%;max-width:340px}
}

/* =========================================================
   スクロールに合わせた動き（視差）
   実際の移動量は js/main.js が --py / --px に入れる。
   CSS 側は「どう動かすか」だけを持つ。
   ========================================================= */
@property --py{syntax:"<length>";inherits:false;initial-value:0px}
@property --px{syntax:"<length>";inherits:false;initial-value:0px}
@property --pz{syntax:"<number>";inherits:false;initial-value:1}

.photo img,
.way__img img,
.gallery__item img,
.kouso-hero .photo img{
  transform:translate3d(0,var(--py,0px),0) scale(var(--pz,1));
  transition:--pz .8s var(--ease);
}
.is-parallax img{--pz:1.08}
.photo:hover img,
.way:hover .way__img img,
.gallery__item:hover img{--pz:1.13}

.hero__media{transform:translate3d(0,var(--py,0px),0)}
.mound svg{transform:translate3d(var(--px,0px),0,0)}
.mound--flip svg{transform:scaleY(-1) translate3d(var(--px,0px),0,0)}
.mound.is-parallax svg{width:116%}

/* 見出しの前の罫線が、入ってくるときに伸びる */
.eyebrow::before{transition:transform 1s var(--ease) .1s;transform-origin:left center}
.eyebrow.reveal::before{transform:scaleX(0)}
.eyebrow.reveal.is-in::before{transform:scaleX(1)}

/* 料金の数字が、順にそっと立ち上がる */
.price-list__v em{display:inline-block;transition:transform .8s var(--ease),opacity .8s var(--ease)}
.price-card.reveal .price-list__v em{transform:translateY(.35em);opacity:0}
.price-card.reveal.is-in .price-list__v em{transform:none;opacity:1}
.price-card.reveal.is-in li:nth-child(2) .price-list__v em{transition-delay:.12s}
.price-card.reveal.is-in li:nth-child(3) .price-list__v em{transition-delay:.24s}

/* =========================================================
   その場の動き（ホバー・フォーカス）
   ========================================================= */
/* ボタンに光が通る */
.btn{position:relative;overflow:hidden;overflow:clip;isolation:isolate}
.btn::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(105deg,transparent 30%,rgba(255,255,255,.28) 50%,transparent 70%);
  transform:translateX(-120%);
}
.btn:hover::before,.btn:focus-visible::before{
  transform:translateX(120%);
  transition:transform .85s var(--ease);
}

/* スライドの説明文が、切り替わるたびに下から出る */
.slide__cap{
  transform:translateY(1.1em);opacity:0;
  transition:transform .9s var(--ease) .25s,opacity .9s var(--ease) .25s;
}
.slide.is-active .slide__cap{transform:none;opacity:1}

/* 当日の流れ：区切りの線が、順番に伸びていく */
.flow__step::before{
  content:"";position:absolute;left:0;top:0;height:1px;width:100%;
  background:var(--bran-300);
  transform:scaleX(1);transform-origin:left;
  transition:transform 1.1s var(--ease);
}
.flow__step.reveal::before{transform:scaleX(0)}
.flow__step.reveal.is-in::before{transform:scaleX(1)}

/* 施設ロゴが、ゆっくり呼吸する */
.cta__mark{animation:breathe 9s ease-in-out infinite}
@keyframes breathe{
  0%,100%{transform:translateY(0) scale(1)}
  50%{transform:translateY(-6px) scale(1.03)}
}

/* モバイルの固定バーは、下からせり上がる */
.sticky-bar{animation:barUp .7s var(--ease) .5s both}
@keyframes barUp{from{transform:translateY(110%)}to{transform:none}}


/* =========================================================
   ヒーロー：文字が写真の上に積まれる幅（〜899px）
   写真が縦いっぱいに入るため、そのままだと犬がちょうど文字に重なる。
   文章を上に寄せ、写真を下へずらして犬をボタンの下に置く。
   （はみ出した分は .hero の overflow:clip で切られる）
   ========================================================= */
@media (max-width:899px){
  .hero{align-items:flex-start;min-height:100svh;padding:6.5rem var(--pad-x) 5rem}
  .hero::after{
    background:linear-gradient(to bottom,
      rgba(24,36,14,.88) 0%,
      rgba(24,36,14,.62) 34%,
      rgba(24,36,14,.14) 60%,
      rgba(24,36,14,.30) 100%);
  }
  .hero__media img{height:138%;object-position:50% 0}
  .hero__lead{margin-bottom:1.8rem}
}

/* =========================================================
   Reduced motion
   ========================================================= */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.01ms !important;animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
  .reveal{opacity:1;transform:none}
  .hero__eyebrow,.hero__lead,.hero__actions{opacity:1;transform:none}
  .hero__title-line{opacity:1;clip-path:none;animation:none}
  .cta__mark{animation:none}
  .sticky-bar{animation:none}
  .hero__media img{animation:none;transform:none}
  .slide__cap{opacity:1;transform:none}
  .flow__step::before{transform:scaleX(1)}
  .btn::before{display:none}
}

/* =========================================================
   Print
   ========================================================= */
@media print{
  .site-header,.sticky-bar,.hero__scroll,.access__map{display:none}
  body{background:#fff;color:#000}
}