/*
 * 花あかり — ページ全体のスタイル
 *
 * 配色はすべて :root のカスタムプロパティにまとめてあり、
 * ライト／ダークの両テーマをここで切り替えている。
 */

:root{
  --ground:#FCF8F7;
  --surface:#F7EFEC;
  --panel:#F3E4E3;
  --ink:#3A2B30;
  --ink-soft:#6E5B60;
  --ink-faint:#9B888C;
  --rose:#B5687A;
  --sage:#7F8F6C;
  --lilac:#9C88A6;
  --line:#E8D9D6;
  --line-soft:#F0E5E2;
  --wrap:#EFE3D9;
  --wrap-2:#E3D3C6;
  --center:#E7C983;
  --stem:#94A47E;
  --leaf:#A3B289;
  --p1:#D98CA0; --p1i:#EFC6D0;
  --p2:#C1A4CA; --p2i:#E3D5E8;
  --p3:#E9CFA4; --p3i:#F6E9D5;
  --p4:#E8B5BD; --p4i:#F6DFE2;
  --p5:#F7EDE7; --p5i:#EADCD2;

  --fs-display:clamp(2.1rem,4.4vw,3.15rem);
  --fs-h2:clamp(1.45rem,2.5vw,2rem);
  --gutter:clamp(20px,5vw,56px);

  --serif:"Shippori Mincho",'Hiragino Mincho ProN','Yu Mincho',serif;
  --sans:"Zen Kaku Gothic New",'Hiragino Sans','Yu Gothic',sans-serif;
  --latin:"Cormorant Garamond",Georgia,serif;
  color-scheme:light;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --ground:#241B1F; --surface:#2E2429; --panel:#352930;
    --ink:#F3E8E8; --ink-soft:#C9B4B8; --ink-faint:#9A868B;
    --rose:#E3A0AD; --sage:#A9B892; --lilac:#C3B0CC;
    --line:#443339; --line-soft:#372A2F;
    --wrap:#3B2F2E; --wrap-2:#4A3B37;
    --p1:#CE7F93; --p1i:#E0AEBB;
    --p2:#B195BB; --p2i:#CFBED6;
    --p3:#D9BE92; --p3i:#E7D6BA;
    --p4:#D8A5AE; --p4i:#E7C8CD;
    --p5:#E6DAD3; --p5i:#CFBFB6;
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --ground:#241B1F; --surface:#2E2429; --panel:#352930;
  --ink:#F3E8E8; --ink-soft:#C9B4B8; --ink-faint:#9A868B;
  --rose:#E3A0AD; --sage:#A9B892; --lilac:#C3B0CC;
  --line:#443339; --line-soft:#372A2F;
  --wrap:#3B2F2E; --wrap-2:#4A3B37;
  --p1:#CE7F93; --p1i:#E0AEBB;
  --p2:#B195BB; --p2i:#CFBED6;
  --p3:#D9BE92; --p3i:#E7D6BA;
  --p4:#D8A5AE; --p4i:#E7C8CD;
  --p5:#E6DAD3; --p5i:#CFBFB6;
  color-scheme:dark;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:var(--ground);
  color:var(--ink);
  font-family:var(--sans);
  font-weight:400;
  font-size:16px;
  line-height:2;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%}
h1,h2,h3{font-family:var(--serif);font-weight:500;text-wrap:balance;margin:0;line-height:1.5}
p{margin:0}
a{color:inherit}

.wrap{max-width:1120px;margin-inline:auto;padding-inline:var(--gutter)}

/* ── header ─────────────────────────────── */
.site-head{border-bottom:1px solid var(--line-soft)}
.head-in{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px 28px;padding-block:20px 18px}
.brand{font-family:var(--serif);font-size:1.3rem;letter-spacing:.22em;margin-right:auto}
.brand em{
  display:block;font-family:var(--latin);font-style:italic;font-weight:300;
  font-size:.72rem;letter-spacing:.18em;color:var(--ink-faint);margin-top:2px;
}
.nav{display:flex;flex-wrap:wrap;gap:6px 24px;font-size:.85rem;letter-spacing:.12em}
.nav a{text-decoration:none;color:var(--ink-soft);padding-bottom:3px;border-bottom:1px solid transparent;transition:color .25s,border-color .25s}
.nav a:hover{color:var(--rose);border-bottom-color:var(--rose)}
.nav a:focus-visible,.tel:focus-visible,.cta:focus-visible{outline:2px solid var(--rose);outline-offset:3px;border-radius:2px}

/* ── hero ───────────────────────────────── */
.hero{display:grid;grid-template-columns:1.02fr .98fr;gap:clamp(24px,4vw,64px);align-items:center;padding-block:clamp(40px,6vw,76px) clamp(48px,7vw,92px)}
.hero-copy>*{animation:rise .8s cubic-bezier(.2,.7,.3,1) backwards}
.hero-copy>*:nth-child(2){animation-delay:.09s}
.hero-copy>*:nth-child(3){animation-delay:.18s}
.hero-copy>*:nth-child(4){animation-delay:.26s}
@keyframes rise{from{transform:translateY(12px);opacity:.35}}
.eyebrow{
  display:flex;align-items:center;gap:12px;
  font-size:.74rem;letter-spacing:.26em;color:var(--rose);margin-bottom:22px;
}
.eyebrow::before{content:"";width:34px;height:1px;background:var(--rose);opacity:.55;flex:none}
h1{font-size:var(--fs-display);font-weight:400;letter-spacing:.05em;line-height:1.5}
h1 .en{
  display:block;font-family:var(--latin);font-style:italic;font-weight:300;
  font-size:.4em;letter-spacing:.14em;color:var(--ink-faint);margin-bottom:14px;
}
h1 .soft{color:var(--rose)}
.lede{margin-top:26px;max-width:31em;color:var(--ink-soft);font-weight:300}
.hero-meta{
  margin-top:34px;display:flex;flex-wrap:wrap;align-items:center;gap:14px 26px;
  font-size:.85rem;letter-spacing:.06em;
}
.cta{
  display:inline-block;text-decoration:none;font-family:var(--serif);
  padding:13px 30px;border:1px solid var(--rose);color:var(--rose);
  letter-spacing:.16em;font-size:.92rem;transition:background .3s,color .3s;
}
.cta:hover{background:var(--rose);color:var(--ground)}
.hero-meta .note{color:var(--ink-faint);font-weight:300}

.hero-art{display:flex;justify-content:center;align-items:center;gap:clamp(10px,2vw,26px)}
.tate{
  writing-mode:vertical-rl;font-family:var(--serif);font-size:.95rem;
  letter-spacing:.42em;color:var(--ink-soft);
  border-right:1px solid var(--line);padding-right:clamp(10px,1.6vw,20px);
  align-self:center;max-height:300px;
}
.bouquet{width:min(100%,400px);height:auto;overflow:visible}
.sway{transform-box:fill-box;transform-origin:50% 135%;animation:sway 8s ease-in-out infinite alternate}
@keyframes sway{from{transform:rotate(-1.6deg)}to{transform:rotate(1.6deg)}}

/* ── sections ───────────────────────────── */
section{scroll-margin-top:24px}
.sec-head{margin-bottom:clamp(26px,3.4vw,44px)}
.sec-label{
  font-family:var(--latin);font-style:italic;font-weight:400;font-size:.95rem;
  letter-spacing:.1em;color:var(--ink-faint);display:block;margin-bottom:6px;
}
h2{font-size:var(--fs-h2);letter-spacing:.1em}
.sec-note{margin-top:14px;color:var(--ink-soft);font-weight:300;font-size:.94rem;max-width:38em}

.band{padding-block:clamp(52px,7vw,86px);border-top:1px solid var(--line-soft)}

/* ── 今週の花 ───────────────────────────── */
.stems{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(22px,3vw,38px) clamp(18px,2.6vw,34px)}
.stem{display:flex;flex-direction:column;gap:2px;height:100%}
.stem-art{width:76px;height:76px;border-radius:50%;background:var(--surface);display:grid;place-items:center;margin-bottom:16px}
.stem-art svg{width:62px;height:62px;overflow:visible}
.stem h3{font-size:1.02rem;letter-spacing:.08em}
.stem .latin{font-family:var(--latin);font-style:italic;font-size:.92rem;color:var(--ink-faint);line-height:1.6;margin-top:4px}
.hana{margin-top:12px;margin-bottom:10px;font-size:.84rem;letter-spacing:.08em;color:var(--rose)}
.hana span{color:var(--ink-faint);letter-spacing:.14em;margin-right:8px}
.price{
  margin-top:auto;padding-top:10px;border-top:1px solid var(--line-soft);
  font-size:.85rem;color:var(--ink-soft);font-variant-numeric:tabular-nums;
}

/* ── 束ねる ─────────────────────────────── */
.tiers{border-top:1px solid var(--line)}
.tier{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.5fr) auto;
  gap:6px 28px;align-items:baseline;
  padding-block:22px;border-bottom:1px solid var(--line);
}
.tier h3{font-size:1.05rem;letter-spacing:.1em}
.tier .spec{color:var(--ink-soft);font-size:.9rem;font-weight:300;line-height:1.9}
.tier .yen{font-family:var(--serif);font-size:1.1rem;color:var(--rose);white-space:nowrap;font-variant-numeric:tabular-nums}
.tier .yen small{font-size:.72rem;color:var(--ink-faint);margin-left:3px}
.after{margin-top:22px;font-size:.88rem;color:var(--ink-soft);font-weight:300}

/* ── 定期便 ─────────────────────────────── */
.teiki{
  background:var(--panel);border-radius:3px;
  padding:clamp(28px,4vw,52px);
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(24px,3.4vw,52px);align-items:center;
}
.teiki .sec-head{margin-bottom:18px}
.plans{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:14px}
.plans li{display:flex;justify-content:space-between;align-items:baseline;gap:18px;border-bottom:1px dotted var(--line);padding-bottom:12px}
.plans b{font-family:var(--serif);font-weight:500;letter-spacing:.08em;font-size:1rem}
.plans em{display:block;font-style:normal;font-size:.83rem;color:var(--ink-soft);font-weight:300;line-height:1.8}
.plans .yen{font-family:var(--serif);color:var(--rose);white-space:nowrap;font-variant-numeric:tabular-nums}

/* ── お店のこと ─────────────────────────── */
.shop{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:clamp(26px,4vw,64px)}
.info{margin:0;display:grid;grid-template-columns:5.5em 1fr;gap:0}
.info dt{
  font-size:.78rem;letter-spacing:.16em;color:var(--ink-faint);
  padding-block:13px;border-top:1px solid var(--line-soft);
}
.info dd{margin:0;padding-block:13px;border-top:1px solid var(--line-soft);font-size:.93rem;font-weight:300}
.info dd .tel{color:var(--ink);text-decoration:none;border-bottom:1px solid var(--line);font-variant-numeric:tabular-nums}
.asaichi{border-left:2px solid var(--sage);padding:4px 0 4px 22px;align-self:start}
.asaichi h3{font-size:1rem;letter-spacing:.1em;color:var(--sage)}
.asaichi p{margin-top:10px;font-size:.9rem;color:var(--ink-soft);font-weight:300}
.asaichi .day{margin-top:14px;font-family:var(--latin);font-style:italic;color:var(--ink-faint);font-size:.95rem}

/* ── footer ─────────────────────────────── */
.site-foot{border-top:1px solid var(--line-soft);padding-block:34px 44px;margin-top:clamp(50px,7vw,84px)}
.foot-in{display:flex;flex-wrap:wrap;gap:10px 30px;align-items:baseline;justify-content:space-between}
.foot-in .brand{margin-right:0}
.foot-note{font-size:.76rem;color:var(--ink-faint);font-weight:300;letter-spacing:.04em}

/* ── responsive ─────────────────────────── */
@media (max-width:900px){
  .hero{grid-template-columns:1fr;gap:40px}
  .hero-art{order:2}
  .bouquet{width:min(86%,330px)}
  .teiki,.shop{grid-template-columns:1fr}
  .tier{grid-template-columns:minmax(0,1fr) auto;gap:4px 20px}
  .tier .spec{grid-column:1/-1}
}
@media (max-width:640px){
  .stems{grid-template-columns:repeat(2,minmax(0,1fr))}
  .tate{letter-spacing:.3em;font-size:.86rem;max-height:230px}
}
@media (max-width:400px){
  .info{grid-template-columns:1fr;gap:0}
  .info dd{border-top:none;padding-top:0}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition-duration:.01ms!important}
}