/* ==========================================================
   UKIYO HOTARU（ukiyo-hotaru.com）の見た目
   2026-11-08 ルイ・ヴィトンの公式サイトの構成を参考に作りかえ（ジン）
   参考にしたのは「並べ方」だけ。色・言葉・マークは UKIYO HOTARU のもの。
   テーマ：和紙の白い地に、夏の夜の藍と蛍の光。
   色を変えたいときは「① 色とフォント」だけを書きかえます。
   ========================================================== */

/* ① 色とフォント ------------------------------------------ */
:root {
  --paper: #F6F2EA;      /* 和紙の白（ページの地） */
  --paper-2: #ECE6DA;    /* 商品写真の地 */
  --night: #141A28;      /* 夜の藍 */
  --night-2: #1B2232;
  --washi: #EFE7D6;
  --ink: #141A28;        /* 文字 */
  --sub: #6B6A66;        /* うすい文字 */
  --glow: #E9F27A;       /* 蛍の光 */
  --gold: #B39A4B;       /* 細い飾り線 */
  --line: rgba(20, 26, 40, .12);
  --serif: "Cormorant Garamond", "Shippori Mincho", Georgia, serif;
  --sans: "Jost", "Helvetica Neue", Arial, sans-serif;
  --jp: "Shippori Mincho", "Yu Mincho", serif;
}

/* ② 全体 ------------------------------------------------ */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--sans); font-size: 16px; line-height: 1.7; }
img, svg { display: block; max-width: 100%; }
a { color: inherit; }
h1, h2, h3 { font-family: var(--serif); font-weight: 500; letter-spacing: .02em; line-height: 1.2; margin: 0; }
.muted { color: var(--sub); }
.center { text-align: center; }
[hidden] { display: none !important; }
[lang="ja"] { font-family: var(--jp); }
.wrap { max-width: 1280px; margin: 0 auto; padding: 0 40px; }
.eyebrow { font-size: 12px; letter-spacing: .24em; text-transform: uppercase; color: var(--sub); margin: 0 0 10px; }
.sec { padding: 84px 0; }
.sec-head { text-align: center; margin-bottom: 44px; }
.sec-head h2 { font-size: 36px; }
.sec-head p.lead { max-width: 620px; margin: 14px auto 0; color: var(--sub); }

/* ③ ヘッダー（左：Menu／中央：ロゴ／右：お問い合わせ・お気に入り・バッグ） */
.site-header { position: sticky; top: 0; z-index: 30; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; height: 68px; padding: 0 32px; background: rgba(246, 242, 234, .94); backdrop-filter: blur(8px); border-bottom: 1px solid var(--line); }
.h-left, .h-right { display: flex; align-items: center; gap: 22px; font-size: 13px; letter-spacing: .06em; }
.h-right { justify-content: flex-end; }
.h-btn { display: inline-flex; align-items: center; gap: 8px; background: none; border: 0; padding: 6px 0; font: inherit; color: var(--ink); cursor: pointer; text-decoration: none; }
.h-btn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.5; }
.logo { font-family: var(--serif); font-size: 24px; letter-spacing: .34em; font-weight: 600; text-decoration: none; padding-left: .34em; white-space: nowrap; }
.wish-count, .bag-count { min-width: 18px; height: 18px; border-radius: 999px; background: var(--night); color: var(--glow); font-size: 11px; display: inline-grid; place-items: center; padding: 0 5px; }
.bag-btn { display: none; }
[data-mode="cart"] .bag-btn { display: inline-flex; }

/* ④ メニュー（左から出る） */
.drawer { position: fixed; z-index: 50; top: 0; bottom: 0; left: 0; width: min(420px, 92vw); background: var(--paper); transform: translateX(-102%); transition: transform .35s ease; overflow-y: auto; padding: 22px 36px 40px; }
.menu-open .drawer { transform: none; }
.shade { position: fixed; inset: 0; z-index: 40; background: rgba(20, 26, 40, .4); opacity: 0; pointer-events: none; transition: opacity .3s; }
.menu-open .shade.m, .bag-open .shade.b { opacity: 1; pointer-events: auto; }
.drawer-close, .bag .close { background: none; border: 0; font: inherit; font-size: 13px; letter-spacing: .06em; cursor: pointer; display: inline-flex; gap: 8px; align-items: center; padding: 6px 0; color: var(--ink); }
.drawer h3 { font-family: var(--sans); font-size: 11px; letter-spacing: .24em; text-transform: uppercase; color: var(--sub); margin: 34px 0 12px; font-weight: 500; }
.drawer a { display: block; text-decoration: none; font-family: var(--serif); font-size: 24px; padding: 4px 0; }
.drawer a.small { font-family: var(--sans); font-size: 14px; }
.drawer a:hover { color: #6E7A2A; }

/* ⑤ ボタン */
.btn { display: inline-flex; justify-content: center; align-items: center; gap: 8px; border-radius: 999px; padding: 13px 30px; font: inherit; font-size: 14px; letter-spacing: .04em; text-decoration: none; cursor: pointer; border: 1px solid var(--ink); background: transparent; color: var(--ink); }
.btn.line:hover { background: var(--ink); color: var(--paper); }
.btn.dark { background: var(--night); color: var(--washi); border-color: var(--night); }
.btn.dark:hover { background: #26304A; }
.btn.wide { width: 100%; }
.btn.is-off { opacity: .55; cursor: default; }
.link-under { color: inherit; text-decoration: underline; text-underline-offset: 5px; font-size: 14px; letter-spacing: .04em; }

/* ⑥ 大きな写真（ヒーロー）と夜の帯 ——— 写真ができたら background-image に差しかえ */
.hero { position: relative; height: min(86vh, 820px); min-height: 520px; overflow: hidden; color: var(--washi); display: flex; align-items: flex-end; justify-content: center; text-align: center; padding-bottom: 72px;
  background: radial-gradient(ellipse at 50% 115%, #2A3A5A 0%, #1A2338 38%, var(--night) 70%); }
.hero::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 34%; background: linear-gradient(180deg, transparent, rgba(10, 14, 24, .55)); }
.hero .kanji { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -62%); font-family: var(--jp); font-size: min(34vw, 380px); line-height: 1; color: rgba(239, 231, 214, .05); letter-spacing: .05em; white-space: nowrap; }
.hero .river { position: absolute; left: -10%; right: -10%; bottom: 18%; height: 2px; background: linear-gradient(90deg, transparent, rgba(239, 231, 214, .25), transparent); }
.hero-text { position: relative; z-index: 2; }
.hero-text .eyebrow { color: rgba(239, 231, 214, .75); }
.hero h1 { font-size: 46px; margin-bottom: 18px; }
.hero .link-under { color: var(--washi); }
.fireflies i { position: absolute; width: 5px; height: 5px; border-radius: 50%; background: var(--glow); box-shadow: 0 0 14px 5px rgba(233, 242, 122, .5); opacity: 0; animation: glow 6s ease-in-out infinite; }
.fireflies i:nth-child(1) { left: 12%; top: 30%; }
.fireflies i:nth-child(2) { left: 22%; top: 64%; animation-delay: 1.4s; }
.fireflies i:nth-child(3) { left: 35%; top: 18%; animation-delay: 2.6s; }
.fireflies i:nth-child(4) { left: 62%; top: 26%; animation-delay: .8s; }
.fireflies i:nth-child(5) { left: 74%; top: 56%; animation-delay: 3.2s; }
.fireflies i:nth-child(6) { left: 86%; top: 34%; animation-delay: 2s; }
.fireflies i:nth-child(7) { left: 46%; top: 44%; animation-delay: 4s; }
.fireflies i:nth-child(8) { left: 92%; top: 70%; animation-delay: 1s; }
@keyframes glow { 0%, 100% { opacity: 0; transform: translateY(0); } 40%, 60% { opacity: 1; transform: translateY(-14px); } }
@media (prefers-reduced-motion: reduce) { .fireflies i { animation: none; opacity: .6; } }
.band { height: min(64vh, 620px); min-height: 380px; }
.band h2 { font-size: 40px; margin-bottom: 16px; }

/* ⑦ 飾りの線（LVの金の枠のかわりに、蛍のマークと細い線） */
.ornament { display: flex; align-items: center; justify-content: center; gap: 18px; margin: 0 auto 18px; }
.ornament::before, .ornament::after { content: ""; width: 60px; height: 1px; background: var(--gold); opacity: .6; }
.ornament img { width: 56px; height: auto; }

/* ⑧ カテゴリー（4つ並び） */
.cats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.cat { text-decoration: none; text-align: center; }
.cat-pic { display: grid; place-items: center; aspect-ratio: 4 / 5; background: var(--night-2); padding: 18%; transition: background .3s; }
.cat-pic svg path { stroke: rgba(239, 231, 214, .3); }
.cat:hover .cat-pic { background: #26304A; }
.cat-name { display: block; margin-top: 12px; font-size: 14px; letter-spacing: .06em; }

/* ⑨ 商品カード */
.grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px 20px; }
.card { position: relative; }
.card-pic { position: relative; display: grid; place-items: center; aspect-ratio: 1 / 1.05; background: var(--paper-2); padding: 14%; text-decoration: none; }
.card-pic img { width: 100%; height: 100%; object-fit: cover; }
.tag { position: absolute; left: 12px; top: 12px; font-size: 10px; letter-spacing: .2em; text-transform: uppercase; background: var(--paper); padding: 2px 8px; color: var(--sub); }
.heart { position: absolute; right: 8px; top: 8px; width: 36px; height: 36px; border: 0; background: none; cursor: pointer; display: grid; place-items: center; }
.heart svg { width: 18px; height: 18px; fill: none; stroke: var(--ink); stroke-width: 1.4; }
.heart.on svg { fill: var(--ink); }
.card-name { display: block; margin-top: 12px; font-size: 14px; text-decoration: none; }
.card-name:hover { text-decoration: underline; text-underline-offset: 3px; }
.card-price { margin: 2px 0 0; font-size: 13px; color: var(--sub); }
.more-btn { text-align: center; margin-top: 48px; }

/* ⑩ ブランドの世界（3枚） */
.world { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.w-card { text-decoration: none; }
.w-pic { aspect-ratio: 4 / 5; display: grid; place-items: center; background: radial-gradient(ellipse at 50% 110%, #2A3A5A, var(--night) 70%); color: rgba(239, 231, 214, .85); font-family: var(--jp); font-size: 64px; letter-spacing: .1em; position: relative; overflow: hidden; }
.w-pic::after { content: ""; position: absolute; width: 6px; height: 6px; border-radius: 50%; background: var(--glow); box-shadow: 0 0 16px 6px rgba(233, 242, 122, .45); right: 28%; top: 30%; }
.w-card h3 { font-size: 24px; margin-top: 16px; }
.w-card p { margin: 6px 0 0; color: var(--sub); font-size: 14px; }
.w-card .link-under { display: inline-block; margin-top: 10px; }

/* ⑪ ニュースレター・SNS の帯 */
.follow { background: var(--paper-2); text-align: center; padding: 64px 24px; }
.follow h2 { font-size: 30px; margin-bottom: 10px; }
.soon { color: var(--sub); text-decoration: none; pointer-events: none; }

/* ⑫ 一覧ページ */
.plp-head { padding: 56px 0 28px; text-align: center; }
.plp-head h1 { font-size: 40px; }
.tabs { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin: 24px 0 0; }
.tabs a { text-decoration: none; font-size: 13px; letter-spacing: .04em; border: 1px solid var(--line); border-radius: 999px; padding: 8px 18px; }
.tabs a.on { background: var(--night); border-color: var(--night); color: var(--washi); }
.plp-bar { display: flex; justify-content: space-between; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 12px 0; margin-bottom: 32px; font-size: 13px; color: var(--sub); }

/* ⑬ 商品ページ */
.crumb { font-size: 12px; color: var(--sub); padding: 22px 0; letter-spacing: .03em; }
.crumb a { color: var(--sub); }
.crumb span { margin: 0 6px; }
.pdp { display: grid; grid-template-columns: 1.35fr 1fr; gap: 56px; align-items: start; padding-bottom: 80px; }
.pd-pic { position: relative; display: grid; place-items: center; aspect-ratio: 1 / 1.05; background: var(--paper-2); padding: 12%; }
.pd-thumbs { display: flex; gap: 10px; margin-top: 10px; }
.pd-thumb { width: 84px; aspect-ratio: 1; background: var(--paper-2); border: 1px solid transparent; padding: 10px; cursor: pointer; }
.pd-thumb.on { border-color: var(--ink); }
.pd-info { position: sticky; top: 96px; }
.pd-type { font-size: 12px; letter-spacing: .2em; text-transform: uppercase; color: var(--sub); margin: 0 0 8px; }
.pd-title { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.pd-title h1 { font-size: 34px; }
.pd-title .heart { position: static; flex: none; }
.pd-price { margin: 10px 0 24px; font-size: 15px; }
.pd-label { margin: 18px 0 8px; font-size: 13px; }
.swatches { display: flex; gap: 10px; }
.sw { width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--line); cursor: pointer; padding: 0; outline-offset: 3px; }
.sw.on { outline: 1px solid var(--ink); }
.sizes { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; margin-bottom: 24px; }
.size { border: 1px solid var(--line); background: none; padding: 10px 0; font: inherit; font-size: 13px; cursor: pointer; }
.size.on { border-color: var(--ink); background: var(--ink); color: var(--paper); }
.pd-note { font-size: 13px; color: var(--sub); margin: 12px 0 0; }
.acc-list { margin-top: 28px; border-top: 1px solid var(--line); }
.acc-list details { border-bottom: 1px solid var(--line); }
.acc-list summary { cursor: pointer; padding: 16px 0; font-size: 14px; letter-spacing: .03em; list-style: none; display: flex; justify-content: space-between; }
.acc-list summary::-webkit-details-marker { display: none; }
.acc-list summary::after { content: "+"; }
.acc-list details[open] summary::after { content: "−"; }
.acc-list p, .acc-list ul { margin: 0 0 16px; font-size: 14px; color: var(--sub); }

/* ⑭ 物語のページ */
.story-hero { text-align: center; padding: 80px 24px 40px; }
.story-hero h1 { font-size: 44px; }
.words { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; max-width: 900px; margin: 0 auto; }
.word { background: var(--night); color: var(--washi); padding: 40px 30px; text-align: center; }
.word span { display: block; font-size: 52px; }
.word b { display: block; font-family: var(--serif); font-size: 24px; font-weight: 500; letter-spacing: .1em; margin-top: 6px; }
.word em { display: block; color: #B9B2A3; margin-top: 8px; font-family: var(--serif); font-size: 18px; }
.prose { max-width: 680px; margin: 0 auto; font-family: var(--serif); font-size: 21px; line-height: 1.8; }
.prose h2 { font-size: 34px; text-align: center; margin-bottom: 20px; }
.pillars { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.pillar { border-top: 1px solid var(--gold); padding-top: 22px; text-align: center; }
.pillar span { font-size: 34px; }
.pillar h3 { font-size: 24px; margin: 8px 0 8px; }
.pillar p { margin: 0; color: var(--sub); font-size: 15px; }

/* ⑮ お問い合わせ */
.cs { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; max-width: 1000px; margin: 0 auto; }
.cs h2 { font-size: 28px; margin-bottom: 14px; }
.empty { text-align: center; color: var(--sub); padding: 40px 0; line-height: 2.4; grid-column: 1 / -1; }

/* ⑯ フッター（4つの列＋ロゴ） */
.site-footer { background: var(--night); color: var(--washi); padding: 64px 0 36px; margin-top: 0; }
.f-cols { display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px; }
.f-cols h3 { font-family: var(--sans); font-size: 11px; letter-spacing: .24em; text-transform: uppercase; color: #B9B2A3; font-weight: 500; margin-bottom: 14px; }
.f-cols a, .f-cols span { display: block; font-size: 14px; text-decoration: none; padding: 3px 0; color: var(--washi); }
.f-cols .soon { color: #8F8A80; }
.f-logo { text-align: center; margin-top: 56px; padding-top: 36px; border-top: 1px solid rgba(239, 231, 214, .14); }
.f-logo b { display: block; font-family: var(--serif); font-size: 28px; letter-spacing: .34em; font-weight: 500; padding-left: .34em; }
.f-logo p { margin: 8px 0 0; font-size: 12px; color: #B9B2A3; letter-spacing: .06em; }

/* ⑰ カート（"cart" モードのときだけ使う） */
.bag { position: fixed; z-index: 50; top: 0; right: 0; bottom: 0; width: min(420px, 92vw); background: var(--paper); transform: translateX(102%); transition: transform .35s; display: flex; flex-direction: column; }
.bag-open .bag { transform: none; }
.bag-head { display: flex; justify-content: space-between; align-items: center; padding: 20px 28px; border-bottom: 1px solid var(--line); }
.bag-head h2 { font-size: 24px; }
.bag-list { flex: 1; overflow-y: auto; padding: 8px 28px; }
.bag-line { display: grid; grid-template-columns: 1fr auto auto; gap: 14px; align-items: center; padding: 14px 0; border-bottom: 1px solid var(--line); font-size: 14px; }
.qty { display: flex; gap: 8px; align-items: center; }
.qty button { width: 26px; height: 26px; border: 1px solid var(--line); background: none; cursor: pointer; }
.bag-foot { padding: 20px 28px; border-top: 1px solid var(--line); }
.bag-sum { display: flex; justify-content: space-between; margin: 0 0 6px; }
.small { font-size: 13px; }

/* ⑱ スマホ */
@media (max-width: 900px) {
  .wrap { padding: 0 20px; }
  .site-header { padding: 0 16px; height: 58px; }
  .h-label { display: none; }
  .logo { font-size: 17px; letter-spacing: .24em; padding-left: .24em; }
  .h-left, .h-right { gap: 14px; }
  .cats, .grid { grid-template-columns: 1fr 1fr; gap: 24px 12px; }
  .world, .pillars, .cs, .words { grid-template-columns: 1fr; }
  .w-pic { aspect-ratio: 16 / 9; font-size: 48px; }
  .f-cols { grid-template-columns: 1fr 1fr; }
  .pdp { grid-template-columns: 1fr; gap: 28px; }
  .pd-info { position: static; }
  .hero h1 { font-size: 32px; }
  .band h2, .sec-head h2, .plp-head h1, .story-hero h1 { font-size: 30px; }
  .sec { padding: 60px 0; }
  .prose { font-size: 19px; }
}

/* ⑲ ロゴの「O」＝光の輪（2026-11-09 オーナー指示。文字は O のまま残し、見た目だけ光の輪にする） */
.lo { position: relative; display: inline-block; color: transparent; }
.lo::before { content: ""; position: absolute; left: 50%; top: 50%; width: .72em; height: .72em; transform: translate(-50%, -54%); box-sizing: border-box; border: .07em solid var(--lo-ring, #A9BC22); border-radius: 50%; box-shadow: 0 0 .22em rgba(214, 236, 90, .7), inset 0 0 .16em rgba(214, 236, 90, .45); }
.lo::after { content: ""; position: absolute; left: 50%; top: 50%; width: .15em; height: .15em; transform: translate(-50%, calc(-54% - .36em)); border-radius: 50%; background: #FBFCD8; box-shadow: 0 0 .25em .06em rgba(243, 248, 176, .95); }
.f-logo .lo { --lo-ring: #D6EC3A; }
.logo .lo::before { border-color: #8FA41C; border-width: .08em; box-shadow: 0 0 .22em rgba(190, 214, 40, .55); }
.logo .lo::after { background: #B5CB24; box-shadow: 0 0 .22em .05em rgba(190, 214, 40, .8); }
/* ⑳ ロゴの下の「Designed in Japan」（2026-11-09 オーナー指示） */
.logo { display: inline-flex; flex-direction: column; align-items: center; line-height: 1.05; }
.logo-tag { font-family: var(--sans); font-size: 9px; font-weight: 500; letter-spacing: .36em; text-transform: uppercase; color: var(--sub); margin-top: 5px; padding-left: .36em; }
.f-tag { display: block; font-family: var(--sans); font-size: 11px; font-weight: 500; letter-spacing: .36em; text-transform: uppercase; color: #B9B2A3; margin-top: 10px; padding-left: .36em; }
@media (max-width: 900px) { .logo-tag { font-size: 8px; letter-spacing: .28em; margin-top: 3px; } }