/*
 * florim サイトスタイル＝カンプ D案「KACHO FUGETSU（花鳥風月の4章）」（2026-11-03 社長決定）。
 * 見た目の正＝var/work/florim_site/comp_D/（index.html・INTENT.md）。トークン＝var/work/florim_site/DESIGN.md。
 * comp_D の <style> をそのまま土台にし、末尾に下層ページ（ブランド・商品・ブログ・お問い合わせ・プライバシー）の部品を足した。
 * 暗い地（--night）はトップの取扱いストアの1か所だけ。
 */

:root{
  --paper:#FBF8F4; --ink:#313131; --mute:#8A8580; --line:#E6E0D8;
  --sakura:#F2B8BC; --honeysuckle:#F4A452; --jinchoge:#C8B4D8; --kinmokusei:#F0B43C; --gardenia:#5FB3AE; --grapefruit:#F08C6A;
  /* 章の色（文字に使う濃い側） */
  --hana:#C7737B; --tori:#3F8D88; --kaze:#C47A2E; --tsuki:#B08419;
  --night:#24283A; --night-ink:#EDE8DF;
  --mincho:"Shippori Mincho","Noto Serif JP",serif;
  --sans:"Noto Sans JP",system-ui,sans-serif;
  --latin:"Cormorant Garamond",serif;
  --gutter:clamp(20px,5vw,72px);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--paper);color:var(--ink);font-family:var(--sans);font-weight:300;font-size:15px;line-height:2;letter-spacing:.04em;-webkit-font-smoothing:antialiased;overflow-wrap:anywhere}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
mark.tbd{background:#FFF1A8;color:#5a4a00;padding:0 .3em;border-radius:2px;font-weight:400}
.wrap{max-width:1296px;margin:0 auto;padding:0 var(--gutter)}

/* ---------- header ---------- */
.hd{position:sticky;top:0;z-index:20;background:rgba(251,248,244,.92);backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
.hd .wrap{display:flex;align-items:center;gap:40px;height:76px}
.hd .logo img{height:34px;width:auto}
.hd nav{margin-left:auto;order:1}
.hd .btn-store{order:2}
.hd .burger{order:3}
.hd nav ul{display:flex;gap:36px;list-style:none;font-size:13px;letter-spacing:.12em}
.hd nav a:hover{color:var(--hana)}
.btn-store{display:inline-flex;align-items:center;gap:.6em;border:1px solid var(--ink);padding:.55em 1.4em;font-size:13px;letter-spacing:.12em;line-height:1.6;white-space:nowrap;transition:background .2s,color .2s}
.btn-store:hover{background:var(--ink);color:var(--paper)}
.burger{display:none;background:none;border:0;padding:0;color:inherit;font:inherit}
.burger:focus-visible,.btn-store:focus-visible,.hd nav a:focus-visible{outline:2px solid var(--hana);outline-offset:3px}

/* ---------- 章の印（縦組み） ---------- */
.chap{display:flex;flex-direction:column;align-items:center;gap:14px;color:var(--c)}
.chap .k{font-family:var(--mincho);font-size:56px;line-height:1;font-weight:500}
.chap .e{font-family:var(--latin);font-size:13px;letter-spacing:.32em;writing-mode:vertical-rl;color:var(--mute)}
.chap .bar{width:1px;height:72px;background:var(--c)}
.vt{writing-mode:vertical-rl;font-family:var(--mincho);font-weight:500;letter-spacing:.14em;line-height:1.9}

/* ---------- 1 FV（花） ---------- */
.fv{position:relative;padding:56px 0 96px}
.fv .wrap{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:56px;align-items:stretch}
.fv-photo{position:relative;border-radius:2px;overflow:hidden;min-height:620px}
.fv-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:52% 50%}
.fv-text{display:flex;flex-direction:row-reverse;gap:40px;align-items:flex-start;padding-top:8px}
.fv .eyebrow{writing-mode:vertical-rl;font-family:var(--latin);font-size:14px;letter-spacing:.42em;color:var(--hana)}
.fv h1{font-size:44px;color:var(--ink);height:12.5em}
.fv h1 .s{display:block}
.fv .sub{writing-mode:vertical-rl;font-family:var(--mincho);font-size:16px;letter-spacing:.2em;color:var(--mute);padding-top:7.5em}
.fv-foot{display:flex;align-items:center;justify-content:space-between;gap:24px;margin-top:40px}
.btn-main{display:inline-flex;align-items:center;gap:1.2em;background:var(--ink);color:var(--paper);padding:1em 2.4em;font-size:14px;letter-spacing:.16em}
.btn-main::after{content:"";width:28px;height:1px;background:currentColor}
.btn-main:hover{background:var(--hana)}
.toc{display:flex;gap:28px;list-style:none}
.toc a{display:flex;align-items:center;gap:10px;font-family:var(--mincho);font-size:20px}
.toc a::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--c)}
.toc small{font-family:var(--latin);font-size:12px;letter-spacing:.2em;color:var(--mute)}

/* ---------- 章の共通 ---------- */
.chapter{padding:128px 0}
.chapter .head{display:grid;grid-template-columns:auto auto minmax(0,1fr);gap:56px;align-items:start}
.chapter h2.vt{font-size:32px;max-height:15em}
.lead p{max-width:30em}
.more{display:inline-flex;align-items:center;gap:1em;margin-top:32px;font-size:14px;letter-spacing:.14em;border-bottom:1px solid currentColor;padding-bottom:4px}
.more::after{content:"→";font-family:var(--latin)}

/* 2 ブランドの考え（鳥） */
.c-tori{background:linear-gradient(180deg,var(--paper),#F2F7F6 30%,#F2F7F6 70%,var(--paper))}
.tori-grid{display:grid;grid-template-columns:minmax(0,1fr) auto auto;grid-template-areas:"photo h chap" "lead h chap";column-gap:56px;row-gap:48px;align-items:start}
.tori-grid .photo{grid-area:photo;border-radius:2px;overflow:hidden;aspect-ratio:1273/750}
.tori-grid .photo img{width:100%;height:100%;object-fit:cover}
.tori-grid h2{grid-area:h;font-size:32px;max-height:15em}
.tori-grid .chap{grid-area:chap}
.tori-grid .lead{grid-area:lead;max-width:36em}
.c-tori .more{color:var(--tori)}

/* 3 四季と花の香り（風） */
.c-kaze{background:#FDF6EE}
.c-kaze .lead{align-self:end}
.scents{list-style:none;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:28px;margin-top:88px}
.scents li{text-align:center}
.scents .ring{position:relative;aspect-ratio:1;border-radius:50%;padding:7px;background:conic-gradient(var(--c) 0 100%);margin:0 auto 22px;max-width:180px}
.scents .ring img{width:100%;height:100%;border-radius:50%;object-fit:cover;background:var(--paper);border:4px solid #FDF6EE}
.scents .fl{font-family:var(--mincho);font-size:18px;font-weight:500;line-height:1.5;display:block;word-break:keep-all;letter-spacing:.02em}
.scents .it{display:block;font-size:12px;color:var(--mute);line-height:1.7;margin-top:8px;word-break:keep-all;letter-spacing:0}

/* 4 商品（月） */
.c-tsuki .head{grid-template-columns:auto auto minmax(0,1fr)}
.sec-t{font-family:var(--mincho);font-weight:500;font-size:28px;letter-spacing:.14em;line-height:1.5}
.sec-t small{display:block;font-family:var(--latin);font-size:13px;letter-spacing:.36em;color:var(--mute);font-weight:400}
.items{list-style:none;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:40px 28px;margin-top:72px}
/* 商品がちょうど7点の時は 4＋3。2段目の3点を中央に寄せて、右端の空きを左右に分ける（8列に分けて各2列） */
@media (min-width:901px){
  .items:has(> .item:nth-child(7):last-child){grid-template-columns:repeat(8,minmax(0,1fr))}
  .items:has(> .item:nth-child(7):last-child) > .item{grid-column:span 2}
  .items:has(> .item:nth-child(7):last-child) > .item:nth-child(5){grid-column:2 / span 2}
}
.item{display:flex;flex-direction:column;background:#fff;border-top:3px solid var(--c)}
.item .ph{position:relative;aspect-ratio:4/5;overflow:hidden;background:var(--bg)}
.item .ph img{width:100%;height:100%;object-fit:cover;object-position:var(--op,50% 50%)}
.item .ph.cut img{object-fit:contain;padding:10% 12%}
.item .ph.cut-b img{padding:12% 8% 0;object-position:50% 100%}
.item .tx{padding:22px 22px 24px;display:flex;flex-direction:column;flex:1}
.item h3{font-family:var(--mincho);font-weight:500;font-size:17px;line-height:1.6;letter-spacing:.04em;word-break:keep-all}
.item .meta{display:flex;flex-wrap:wrap;gap:4px 14px;margin-top:10px;font-size:12px;color:var(--mute);line-height:1.8}
.item .meta .sc::before{content:"";display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--c);margin-right:6px;vertical-align:1px}
.item .desc{font-size:13px;line-height:1.9;margin-top:12px;flex:1}
.item .ft{display:flex;align-items:center;justify-content:space-between;margin-top:18px;padding-top:14px;border-top:1px solid var(--line)}
.tag{font-size:11px;letter-spacing:.12em;border:1px solid var(--line);padding:0 .8em;line-height:2}
.item .go{font-size:13px;letter-spacing:.1em}
.item .go::after{content:" →";font-family:var(--latin)}

/* 5 ブログ */
.blog{padding:112px 0 128px;border-top:1px solid var(--line)}
.blog .top{display:flex;justify-content:space-between;align-items:end;gap:24px}
.posts{list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:32px;margin-top:48px}
.post .ph{aspect-ratio:3/2;overflow:hidden;border-radius:2px}
.post .ph img{width:100%;height:100%;object-fit:cover}
.post a{display:block}
.post .ph{display:block}
.post .pb{display:block}
.post .pt{display:block;font-family:var(--mincho);font-weight:500;font-size:16px;line-height:1.8;margin-top:6px}
.post .pe{display:block;font-size:13px;color:var(--mute);line-height:1.9;margin-top:8px}
.post .ph-empty{display:flex;align-items:center;justify-content:center;width:100%;height:100%;background:#F4EEE6;font-family:var(--latin);font-size:28px;letter-spacing:.1em;color:var(--mute)}
.post a:hover .pt{color:var(--tsuki)}
.post .cat{display:block;font-family:var(--latin);font-size:12px;letter-spacing:.3em;color:var(--mute);margin-top:16px}

/* 6 取扱いストア（月夜・暗い地はここだけ） */
.stores{background:var(--night);color:var(--night-ink);padding:120px 0;position:relative;overflow:hidden}
.stores .moon{position:absolute;right:max(var(--gutter),calc(50% - 600px));top:72px;width:150px;height:150px;border-radius:50%;background:radial-gradient(circle at 38% 36%,#FBE6B0,var(--kinmokusei) 70%);opacity:.9}
.stores .wrap{position:relative;display:grid;grid-template-columns:auto minmax(0,1fr);gap:72px;align-items:start}
.stores .vt{font-size:32px;color:#fff}
.stores .store-list{list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;margin-top:180px}
.stores .store-list li{border:1px solid rgba(237,232,223,.25);padding:28px;display:flex;flex-direction:column;gap:20px;min-height:170px}
.stores .nm{font-family:var(--mincho);font-size:20px;letter-spacing:.1em}
.stores .btn{align-self:flex-start;margin-top:auto;background:var(--kinmokusei);color:var(--night);padding:.7em 1.8em;font-size:14px;letter-spacing:.12em;font-weight:500}
.stores .note{font-size:13px;margin-top:auto}

/* 7 フッター */
.ft-site{padding:72px 0 40px}
.ft-site .wrap{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:56px;align-items:start}
.ft-site .logo img{height:40px;width:auto}
.ft-site ul{list-style:none;display:flex;flex-wrap:wrap;gap:12px 32px;font-size:13px;letter-spacing:.1em}
.ft-site .co{font-size:12px;color:var(--mute);line-height:2}
.ft-site .copy{grid-column:1/-1;border-top:1px solid var(--line);padding-top:24px;font-family:var(--latin);font-size:13px;letter-spacing:.14em;color:var(--mute)}


/* ---------- 追加：共通 ---------- */
.skip{position:absolute;left:-9999px;top:0;background:var(--ink);color:var(--paper);padding:.6em 1em;z-index:50}
.skip:focus{left:8px;top:8px}
main:focus{outline:none}
.hd nav a[aria-current="page"]{color:var(--hana)}
.item h3 a:hover,.item .go:hover{color:var(--tsuki)}
.item a.ph{display:block}
.section-pad{padding:72px 0 128px}
.text-block{max-width:46em}
.text-block p+p{margin-top:1.2em}
.sub{font-size:13px;color:var(--mute)}
.empty{color:var(--mute)}
.links-row{display:flex;gap:32px;flex-wrap:wrap}
.links-row .more{margin-top:8px}
.to-stores{margin-top:56px}

/* 下層ページの見出し */
.page-head{padding:56px 0 8px}
.crumbs{display:flex;flex-wrap:wrap;gap:8px;font-size:12px;color:var(--mute);letter-spacing:.08em}
.crumbs a:hover{color:var(--ink)}
.page-head .sec-t{margin-top:36px;padding-left:20px;border-left:1px solid var(--c)}
.page-head h1.sec-t{font-size:30px}
.page-lead{margin-top:20px;max-width:36em}

/* ブランドについて */
.brand-page{padding-top:72px}

/* 商品詳細 */
.pd{padding:56px 0 96px}
.pd-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:72px;align-items:start}
.pd-media{display:grid;gap:20px;position:sticky;top:100px}
.pd-ph{position:relative;aspect-ratio:4/5;overflow:hidden;background:var(--bg);border-top:3px solid var(--c)}
.pd-ph img{width:100%;height:100%;object-fit:cover;object-position:var(--op,50% 50%)}
.pd-ph.cut img{object-fit:contain;padding:8% 14%}
.pd-ph.cut-b img{object-fit:contain;padding:10% 8% 0;object-position:50% 100%}
.pd-media .pd-ph + .pd-ph{border-top:0}
.pd-body .meta{display:flex;flex-wrap:wrap;align-items:center;gap:6px 18px;font-size:13px;color:var(--mute)}
.pd-body .meta .sc::before{content:"";display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--c);margin-right:8px;vertical-align:1px}
.pd-h{font-family:var(--mincho);font-weight:500;font-size:26px;line-height:1.7;letter-spacing:.08em;margin-top:20px}
.pd-desc{margin-top:28px}
.notes{list-style:none;margin-top:16px;font-size:12px;color:var(--mute);line-height:1.9}
.notes li+li{margin-top:4px}
.pd-block{margin-top:44px}
.pd-block h3{font-family:var(--mincho);font-weight:500;font-size:17px;letter-spacing:.12em;padding-bottom:10px;border-bottom:1px solid var(--line);margin-bottom:16px}
.spec{margin-top:44px;border-top:1px solid var(--line)}
.spec div{display:grid;grid-template-columns:8em minmax(0,1fr);gap:16px;padding:12px 0;border-bottom:1px solid var(--line);font-size:14px}
.spec dt{color:var(--mute)}
.ingredients{font-size:12.5px;line-height:2;color:#55504B}
.pd-stores{padding:80px 0;background:#F6F1EA;border-top:1px solid var(--line)}
.pd-stores .store-list{list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin-top:36px}
.pd-stores .store-list li{background:#fff;border:1px solid var(--line);padding:24px;display:flex;flex-direction:column;gap:16px;min-height:140px}
.pd-stores .nm{font-family:var(--mincho);font-size:18px;letter-spacing:.1em}
.pd-stores .btn{align-self:flex-start;margin-top:auto;background:var(--ink);color:var(--paper);padding:.7em 1.8em;font-size:14px;letter-spacing:.12em}
.pd-stores .btn:hover{background:var(--tsuki)}
.pd-stores .note{font-size:13px;margin-top:auto}
.pd-others{padding:80px 0 112px}
.others{list-style:none;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 40px;margin:32px 0 8px}
.others a{display:flex;align-items:center;gap:12px;padding:14px 0;border-bottom:1px solid var(--line);font-size:14px}
.others a:hover{color:var(--tsuki)}
.others .sc{width:8px;height:8px;border-radius:50%;background:var(--c);flex:none}

/* ブログ一覧・記事 */
.blog-list .posts{margin-top:0}
.article{max-width:42em}
.article time{display:block;font-family:var(--latin);font-size:13px;letter-spacing:.2em;color:var(--mute)}
.article img{margin:24px 0;border-radius:2px}
.article p{margin-top:1.2em}
.article h2{font-family:var(--mincho);font-weight:500;font-size:22px;margin-top:2em}
.article h3{font-family:var(--mincho);font-weight:500;font-size:18px;margin-top:1.6em}
.article .more{margin-top:48px}

/* お問い合わせ */
.contact-lead{max-width:36em}
.contact-card{margin-top:40px;max-width:560px;background:#fff;border-top:3px solid var(--gardenia);padding:36px 40px 32px;display:flex;flex-direction:column;align-items:flex-start;gap:24px}
.contact-card .nm{font-family:var(--mincho);font-weight:500;font-size:20px;letter-spacing:.1em}
.contact-card .btn-main:hover{background:var(--tori)}
.contact-meta{align-self:stretch;border-top:1px solid var(--line)}
.contact-meta div{display:grid;grid-template-columns:6em minmax(0,1fr);gap:16px;padding:12px 0;border-bottom:1px solid var(--line);font-size:14px}
.contact-meta dt{color:var(--mute)}
.contact-meta a{text-decoration:underline;text-underline-offset:3px}
.contact-meta a:hover{color:var(--tori)}

/* プライバシーポリシー */
.legal h2{font-family:var(--mincho);font-weight:500;font-size:19px;letter-spacing:.08em;margin-top:2.2em;padding-bottom:8px;border-bottom:1px solid var(--line)}
.legal h2+p{margin-top:1em}
.legal a{text-decoration:underline}
/* ---------- SP ---------- */
@media (max-width:900px){
  body{font-size:14px}
  .hd .wrap{height:60px;gap:12px}
  .hd .logo img{height:26px}
  /* JS 無効：メニューはヘッダーの下に開いたまま出す。JS 有効：ボタンで開閉 */
  .hd .wrap{flex-wrap:wrap;height:auto;min-height:60px}
  .hd .btn-store{order:1}
  .hd .burger{order:2}
  .hd nav{order:3;flex-basis:100%;padding:0 0 12px}
  .hd nav ul{flex-direction:row;flex-wrap:wrap;gap:4px 20px;font-size:14px}
  .js .hd .wrap{flex-wrap:nowrap;height:60px}
  .js .hd nav{position:fixed;inset:60px 0 auto 0;background:var(--paper);border-bottom:1px solid var(--line);padding:16px var(--gutter) 24px;display:none}
  .js .hd nav ul{flex-direction:column;gap:6px;font-size:15px}
  .js .hd.open nav{display:block}
  .btn-store{margin-left:auto;padding:.4em 1em;font-size:12px}
  .burger{display:none}
  .js .burger{display:flex;flex-direction:column;justify-content:center;gap:6px;width:40px;height:40px;cursor:pointer}
  .burger span{display:block;height:1px;background:var(--ink);width:24px;margin:0 auto}

  .fv{padding:20px 0 64px}
  .fv .wrap{grid-template-columns:minmax(0,1fr);gap:0}
  .fv-photo{min-height:0;aspect-ratio:4/5}
  .fv-photo img{object-position:56% 50%}
  .fv-text{position:relative;margin:-150px 0 0 auto;background:var(--paper);padding:28px 20px 24px;gap:18px;width:max-content;max-width:100%}
  .fv h1{font-size:28px;height:12.5em}
  .fv .eyebrow{font-size:11px;letter-spacing:.3em}
  .fv .sub{font-size:13px;padding-top:4em}
  .fv-foot{flex-direction:column;align-items:stretch;gap:28px;margin-top:28px}
  .btn-main{justify-content:center}
  .toc{justify-content:space-between;gap:8px;padding:0 4px}
  .toc a{font-size:17px;gap:6px}
  .toc small{display:none}

  .chapter{padding:80px 0}
  .chap .k{font-size:40px}
  .chap .bar{height:44px}
  .chapter .head,.c-tsuki .head{grid-template-columns:auto minmax(0,1fr);gap:24px}
  .chapter h2.vt{font-size:22px;max-height:none}
  .tori-grid{grid-template-columns:auto minmax(0,1fr);grid-template-areas:"chap h" "photo photo" "lead lead";column-gap:24px;row-gap:36px}
  .tori-grid h2{font-size:22px;max-height:none;justify-self:end}
  .head .lead{grid-column:1/-1}
  .scents{grid-template-columns:repeat(3,minmax(0,1fr));gap:28px 14px;margin-top:48px}
  .scents .fl{font-size:14px;letter-spacing:0}
  .scents .it{font-size:11px}
  .scents .ring{padding:5px}
  .scents .ring img{border-width:3px}

  .items{grid-template-columns:minmax(0,1fr);gap:16px;margin-top:40px}
  .item{flex-direction:row;border-top:0;border-left:3px solid var(--c)}
  .item .ph{width:118px;flex:none;aspect-ratio:auto;min-height:150px}
  .item .ph img{position:absolute;inset:0}
  .item .tx{padding:14px 16px 16px}
  .item h3{font-size:15px}
  .item .desc{font-size:12.5px;margin-top:6px}
  .item .ft{margin-top:10px;padding-top:10px}
  .sec-t{font-size:22px}

  .blog{padding:72px 0 80px}
  .blog .top{flex-direction:column;align-items:flex-start}
  .posts{grid-template-columns:minmax(0,1fr);gap:28px;margin-top:28px}
  .post a{display:grid;grid-template-columns:120px minmax(0,1fr);gap:16px;align-items:start}
  .post .ph{aspect-ratio:1}
  .post .cat{margin-top:0}
  .post .pt{margin-top:4px;font-size:14px}

  .stores{padding:80px 0}
  .stores .moon{width:72px;height:72px;top:56px;left:var(--gutter);right:auto}
  .stores .vt{justify-self:end}
  .stores .wrap{grid-template-columns:minmax(0,1fr);gap:32px}
  .stores .vt{font-size:24px}
  .stores .store-list{grid-template-columns:minmax(0,1fr);margin-top:0;gap:14px}
  .stores .store-list li{min-height:0;padding:22px}

  .ft-site .wrap{grid-template-columns:minmax(0,1fr);gap:28px}

  /* 追加：下層ページ */
  .section-pad{padding:48px 0 80px}
  .page-head{padding:32px 0 0}
  .page-head .sec-t{margin-top:24px;padding-left:14px}
  .page-head h1.sec-t{font-size:22px}
  .brand-page{padding-top:48px}
  .pd{padding:32px 0 64px}
  .pd-grid{grid-template-columns:minmax(0,1fr);gap:32px}
  .pd-media{position:static;grid-template-columns:minmax(0,1fr)}
  .pd-ph{aspect-ratio:1}
  .pd-h{font-size:20px}
  .spec div{grid-template-columns:6em minmax(0,1fr);font-size:13px}
  .pd-stores{padding:56px 0}
  .pd-stores .store-list{grid-template-columns:minmax(0,1fr);gap:12px;margin-top:24px}
  .pd-stores .store-list li{min-height:0;padding:20px}
  .pd-others{padding:56px 0 72px}
  .others{grid-template-columns:minmax(0,1fr)}
  .contact-card{padding:28px 20px 24px;margin-top:28px}
  .contact-card .btn-main{align-self:stretch;justify-content:center}
}