/* =========================================================
   花とくらし — 制作サンプル
   型: 京都の小さな花屋・フローリスト
       （季節の花・ギフト/ブーケ・オンライン注文・やさしく洗練）
   配色: 白 #ffffff / くすみピンク #d9a6a0 / セージ #8aa07f / 墨 #3b3a36
   ========================================================= */

:root{
  --bg:#ffffff;
  --cream:#faf6f3;
  --cream-2:#f3ece7;
  --pink:#d9a6a0;
  --pink-dk:#c08c86;
  --pink-soft:#ede0dc;
  --sage:#8aa07f;
  --sage-dk:#6f855f;
  --sage-soft:#e6ece0;
  --sumi:#3b3a36;
  --ink:#4a4843;
  --muted:#8d877f;
  --line:#ece3dd;
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:"Zen Kaku Gothic New","Hiragino Kaku Gothic ProN",sans-serif;
  color:var(--ink);background:var(--bg);
  line-height:1.95;font-weight:400;-webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4,.mincho{font-family:"Zen Old Mincho","Hiragino Mincho ProN",serif;font-weight:600}
.wrap{width:min(1120px,88vw);margin-inline:auto}

/* nav (top offset clears the sample frame bar) */
.nav{position:fixed;top:42px;left:0;right:0;z-index:50;display:flex;align-items:center;justify-content:space-between;
  padding:20px 5vw;transition:.4s;color:#fff}
@media(max-width:600px){.nav{top:34px}}
.nav.solid{background:rgba(59,58,54,.92);backdrop-filter:blur(10px)}
.nav .logo{font-family:"Zen Old Mincho",serif;font-size:1.18rem;letter-spacing:.2em;font-weight:600}
.nav-links{display:flex;gap:2em;font-size:.88rem;letter-spacing:.14em}
.nav-links a{opacity:.92}.nav-links a:hover{opacity:1;color:var(--pink)}
.nav .resv{border:1px solid rgba(255,255,255,.6);padding:.55em 1.4em;border-radius:999px;font-size:.82rem;letter-spacing:.16em}
.nav .resv:hover{background:var(--pink);border-color:var(--pink)}
@media(max-width:820px){.nav-links{display:none}}

/* hero */
.hero{height:100vh;min-height:600px;position:relative;display:flex;align-items:center;justify-content:center;
  background:#3b3a36 center/cover no-repeat;color:#fff;text-align:center}
.hero::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(45,40,38,.34),rgba(45,40,38,.14) 45%,rgba(45,40,38,.5))}
.hero-inner{position:relative;z-index:2;animation:fade 1.6s ease both;padding:0 6vw}
@keyframes fade{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
.hero .ey{font-size:.82rem;letter-spacing:.42em;color:#f2dcd8;margin-bottom:1.4em}
.hero h1{font-family:"Zen Old Mincho",serif;font-size:clamp(2.2rem,6vw,4rem);letter-spacing:.14em;line-height:1.6;font-weight:600;text-shadow:0 2px 26px rgba(0,0,0,.3)}
.hero .sub{margin-top:1.4em;font-size:clamp(.92rem,1.6vw,1.08rem);letter-spacing:.14em;color:#f6ece9;line-height:2}
.scroll-cue{position:absolute;bottom:32px;left:50%;transform:translateX(-50%);z-index:2;color:#fff;font-size:.68rem;letter-spacing:.3em;writing-mode:vertical-rl;opacity:.85}
.scroll-cue::after{content:"";display:block;width:1px;height:44px;background:rgba(255,255,255,.6);margin:12px auto 0}

/* intro */
.intro{padding:130px 0;text-align:center;background:var(--bg)}
.intro .ey{font-size:.78rem;letter-spacing:.4em;color:var(--pink-dk);margin-bottom:1.8em}
.intro h2{font-size:clamp(1.5rem,3.2vw,2.3rem);letter-spacing:.12em;line-height:1.8;font-weight:600;color:var(--sumi)}
.intro p{max-width:36em;margin:2em auto 0;color:var(--ink);letter-spacing:.03em;text-align:left}
@media(min-width:760px){.intro p{text-align:center}}

/* use / 用途で選ぶ */
.use{padding:0 0 130px;background:var(--bg)}
.use .ey{font-size:.78rem;letter-spacing:.4em;color:var(--pink-dk);text-align:center;margin-bottom:1.6em}
.use h2{font-size:clamp(1.5rem,3.2vw,2.2rem);letter-spacing:.1em;text-align:center;color:var(--sumi)}
.use-lead{max-width:38em;margin:1.4em auto 0;text-align:center;color:var(--ink);letter-spacing:.02em;font-size:.96rem}
.use-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;margin-top:60px}
.use-card{background:var(--cream);border:1px solid var(--line);border-radius:8px;padding:40px 28px;text-align:center;transition:.35s}
.use-card:hover{transform:translateY(-5px);box-shadow:0 16px 34px rgba(180,140,130,.16);border-color:var(--pink-soft)}
.use-card .ic{width:48px;height:48px;margin:0 auto 1.1em;border-radius:50%;background:var(--pink-soft);display:flex;align-items:center;justify-content:center;color:var(--pink-dk);font-family:"Zen Old Mincho",serif;font-size:1.2rem}
.use-card h3{font-size:1.12rem;letter-spacing:.06em;color:var(--sumi);margin-bottom:.6em}
.use-card p{color:var(--muted);font-size:.9rem;letter-spacing:.01em;line-height:1.85}
@media(max-width:900px){.use-grid{grid-template-columns:1fr 1fr;gap:18px}}
@media(max-width:520px){.use-grid{grid-template-columns:1fr}.use{padding-bottom:90px}}

/* feature (split image + text) */
.feat{display:grid;grid-template-columns:1fr 1fr;align-items:stretch;background:var(--cream)}
.feat.rev .feat-ph{order:2}
.feat-ph{min-height:460px;background:#3b3a36 center/cover no-repeat}
.feat-tx{padding:96px 7vw;display:flex;flex-direction:column;justify-content:center}
.feat-tx .ey{font-family:"Zen Old Mincho",serif;color:var(--sage-dk);letter-spacing:.24em;font-size:.84rem;margin-bottom:1.1em}
.feat-tx h3{font-size:clamp(1.5rem,3vw,2.2rem);letter-spacing:.08em;font-weight:600;line-height:1.6;color:var(--sumi)}
.feat-tx p{margin-top:1.2em;color:var(--ink);letter-spacing:.04em;font-size:1rem;max-width:30em}
.feat-tx .note{margin-top:1.6em;font-size:.84rem;color:var(--muted);letter-spacing:.02em}
@media(max-width:860px){.feat{grid-template-columns:1fr}.feat.rev .feat-ph{order:0}.feat-ph{min-height:300px}.feat-tx{padding:64px 8vw}}

/* gallery / 季節のおすすめ */
.gal{padding:130px 0;background:var(--bg)}
.gal .ey{font-size:.78rem;letter-spacing:.4em;color:var(--pink-dk);text-align:center;margin-bottom:1.6em}
.gal h2{font-size:clamp(1.5rem,3.2vw,2.2rem);letter-spacing:.1em;text-align:center;color:var(--sumi)}
.gal-lead{max-width:40em;margin:1.4em auto 0;text-align:center;color:var(--ink);letter-spacing:.02em;font-size:.96rem}
.gal-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;margin-top:60px}
.gitem{background:var(--bg);border-radius:10px;overflow:hidden;box-shadow:0 10px 30px rgba(180,140,130,.1)}
.gitem-ph{height:260px;background:#3b3a36 center/cover no-repeat}
.gitem figcaption{padding:24px 26px 30px}
.gitem .tag{display:inline-block;font-size:.72rem;letter-spacing:.12em;color:#fff;background:var(--sage);padding:.3em 1em;border-radius:999px;margin-bottom:.9em}
.gitem .tag.pk{background:var(--pink)}
.gitem h4{font-size:1.1rem;letter-spacing:.04em;color:var(--sumi);line-height:1.6;margin-bottom:.5em}
.gitem figcaption p{color:var(--muted);font-size:.88rem;letter-spacing:.01em}
.gitem .price{margin-top:.9em;font-family:"Zen Old Mincho",serif;color:var(--pink-dk);font-size:1rem;letter-spacing:.06em}
@media(max-width:900px){.gal-grid{grid-template-columns:1fr;gap:24px}.gal{padding:90px 0}}

/* order / オンライン注文 */
.order{padding:120px 0;background:var(--sage-soft)}
.order .ey{font-size:.78rem;letter-spacing:.4em;color:var(--sage-dk);text-align:center;margin-bottom:1.6em}
.order h2{font-size:clamp(1.5rem,3.2vw,2.2rem);letter-spacing:.1em;text-align:center;color:var(--sumi)}
.order-lead{max-width:38em;margin:1.4em auto 0;text-align:center;color:var(--ink);letter-spacing:.02em;font-size:.96rem}
.order-steps{list-style:none;display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:58px}
.order-steps li{background:var(--bg);border:1px solid var(--line);border-radius:8px;padding:34px 28px;text-align:center}
.order-steps .no{font-family:"Zen Old Mincho",serif;color:var(--pink-dk);letter-spacing:.16em;font-size:.84rem;margin-bottom:.9em}
.order-steps h4{font-size:1.08rem;letter-spacing:.05em;color:var(--sumi);margin-bottom:.6em}
.order-steps p{color:var(--muted);font-size:.9rem;letter-spacing:.01em;line-height:1.85}
@media(max-width:780px){.order-steps{grid-template-columns:1fr}.order{padding:90px 0}}

/* CTA */
.cta{background:var(--sumi);color:#fff;text-align:center;padding:130px 0}
.cta .ey{font-size:.76rem;letter-spacing:.4em;color:var(--pink);margin-bottom:1.5em}
.cta h2{font-size:clamp(1.6rem,3.4vw,2.3rem);letter-spacing:.12em;font-weight:600;line-height:1.7}
.cta .info{margin:2.4em auto 0;max-width:32em;color:#ded6d2;letter-spacing:.04em;font-size:.95rem;line-height:2.2}
.btn-resv{display:inline-block;margin-top:2.2em;border:1px solid var(--pink);color:#fff;background:var(--pink-dk);
  padding:1em 3em;letter-spacing:.24em;font-size:.9rem;border-radius:999px;transition:.3s}
.btn-resv:hover{background:var(--pink);border-color:var(--pink)}

/* access */
.access{padding:120px 0;background:var(--bg)}
.access-grid{display:grid;grid-template-columns:1fr 1fr;gap:54px;align-items:center}
.access-tx .ey{font-size:.78rem;letter-spacing:.4em;color:var(--pink-dk);margin-bottom:1.4em}
.access-tx h3{font-family:"Zen Old Mincho",serif;font-size:1.5rem;letter-spacing:.1em;color:var(--sumi);margin-bottom:1.4em}
.access-tx dl{display:grid;grid-template-columns:auto 1fr;gap:.7em 1.6em;font-size:.95rem;letter-spacing:.02em}
.access-tx dt{color:var(--sage-dk);font-weight:500;white-space:nowrap}
.access-tx dd{color:var(--ink)}
.access-ph{height:360px;border-radius:10px;background:#3b3a36 center/cover no-repeat;box-shadow:0 14px 34px rgba(180,140,130,.16)}
@media(max-width:820px){.access-grid{grid-template-columns:1fr;gap:34px}.access{padding:80px 0}.access-ph{height:260px}}

/* footer */
.foot{background:var(--sumi);color:#a39d95;padding:46px 0 60px;font-size:.78rem;letter-spacing:.04em;line-height:1.9}
.foot .logo{font-family:"Zen Old Mincho",serif;color:#f0e2de;font-size:1.12rem;letter-spacing:.2em;margin-bottom:.9em}
.foot a{color:var(--pink)}
.foot .disc{border-top:1px solid #4a4843;margin-top:18px;padding-top:18px;color:#8d877f}

/* reveal */
.rv{opacity:0;transform:translateY(26px);transition:1s cubic-bezier(.2,.7,.2,1)}
.rv.in{opacity:1;transform:none}