/* AURA STONE 共通スタイル(Aesop風・白ベース) — 内容ページ用 */
:root{
  --paper:#F5F2EA; --paper-2:#EFEBDF; --panel:#FBFAF5; --card:#FFFFFF;
  --ink:#2A2823; --ink-soft:#6C6558; --muted:#9C9484; --line:#E4DECF; --line-soft:#EFEADD;
  --clay:#9E5F41; --sage:#6E7355; --shadow:0 20px 44px -30px rgba(60,45,25,.35);
}
@media (prefers-color-scheme: dark){
  :root{ --paper:#201E19; --paper-2:#191712; --panel:#262320; --card:#2C2925; --ink:#ECE6D8; --ink-soft:#ADA492; --muted:#867E6E; --line:#39352C; --line-soft:#322E26; --clay:#C6835F; --sage:#9AA07C; --shadow:0 20px 44px -28px rgba(0,0,0,.6); }
}
:root[data-theme="light"]{ --paper:#F5F2EA; --paper-2:#EFEBDF; --panel:#FBFAF5; --card:#FFFFFF; --ink:#2A2823; --ink-soft:#6C6558; --muted:#9C9484; --line:#E4DECF; --line-soft:#EFEADD; --clay:#9E5F41; --sage:#6E7355; }
:root[data-theme="dark"]{ --paper:#201E19; --paper-2:#191712; --panel:#262320; --card:#2C2925; --ink:#ECE6D8; --ink-soft:#ADA492; --muted:#867E6E; --line:#39352C; --line-soft:#322E26; --clay:#C6835F; --sage:#9AA07C; }
*{box-sizing:border-box}
html,body{margin:0}
body{ background:var(--paper); color:var(--ink); -webkit-font-smoothing:antialiased;
  font-family:"Hiragino Kaku Gothic ProN","Hiragino Sans","Yu Gothic","Noto Sans JP","Segoe UI",system-ui,sans-serif; }
.serif{ font-family:"Hiragino Mincho ProN","Yu Mincho","Noto Serif JP",serif; }
.tnum{ font-variant-numeric:tabular-nums; } .up{ text-transform:uppercase; letter-spacing:.2em; }
a{ color:inherit; }
.wrap{ max-width:1000px; margin:0 auto; padding:0 18px 60px; }

/* header/footer */
.site-h{ max-width:1000px; margin:0 auto; padding:18px; display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid var(--line-soft); }
.site-h .logo{ font-size:18px; letter-spacing:.28em; text-decoration:none; font-weight:500; }
.site-h nav{ display:flex; gap:18px; flex-wrap:wrap; }
.site-h nav a{ font-size:12px; color:var(--ink-soft); text-decoration:none; letter-spacing:.05em; }
.site-h nav a:hover, .site-h nav a.on{ color:var(--clay); }
.site-f{ border-top:1px solid var(--line-soft); margin-top:40px; padding:24px 18px; text-align:center; }
.site-f .fl{ display:flex; gap:16px; justify-content:center; flex-wrap:wrap; margin-bottom:10px; }
.site-f .fl a{ font-size:11px; color:var(--ink-soft); text-decoration:none; }
.site-f .fl a:hover{ color:var(--clay); }
.site-f .fc{ font-size:10px; color:var(--muted); letter-spacing:.1em; }

/* headings */
.page-h{ padding:34px 0 8px; }
.page-h h1{ font-size:26px; margin:0 0 6px; letter-spacing:.04em; font-weight:500; }
.page-h .lead{ font-size:13px; color:var(--ink-soft); line-height:1.7; max-width:56ch; }
.eyebrow{ font-size:10px; letter-spacing:.28em; color:var(--muted); text-transform:uppercase; }

/* buttons */
.btn{ display:inline-block; border-radius:11px; padding:11px 18px; font-size:13.5px; cursor:pointer; border:1px solid transparent; font-weight:600; letter-spacing:.04em; text-decoration:none; text-align:center; }
.btn.primary{ background:var(--ink); color:var(--panel); } .btn.primary:hover{ background:#000; }
:root[data-theme="dark"] .btn.primary:hover{ background:var(--clay); }
.btn.ghost{ background:transparent; border-color:var(--line); color:var(--ink-soft); } .btn.ghost:hover{ border-color:var(--clay); color:var(--clay); }

/* filter chips */
.chips{ display:flex; gap:8px; flex-wrap:wrap; margin:14px 0 8px; }
.chip{ border:1px solid transparent; background:transparent; color:var(--ink-soft); font-size:12.5px; padding:6px 12px; border-radius:999px; cursor:pointer; }
.chip.on{ color:var(--clay); border-color:var(--clay); }

/* gallery / stones grid */
.grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:16px; margin-top:16px; }
.gcard{ background:var(--card); border:1px solid var(--line-soft); border-radius:16px; padding:16px; display:flex; flex-direction:column; gap:11px; box-shadow:var(--shadow); }
.gcard h3{ margin:0; font-size:16px; letter-spacing:.03em; }
.gcard p{ margin:0; font-size:12px; color:var(--ink-soft); line-height:1.6; }
.ring{ display:flex; flex-wrap:wrap; gap:4px; }
.ring .b{ width:22px; height:22px; border-radius:50%; background-size:cover; box-shadow:inset 0 0 2px rgba(255,255,255,.3),0 1px 2px rgba(30,20,8,.2); }
.gmeta{ display:flex; justify-content:space-between; align-items:center; margin-top:auto; }
.gmeta .tags{ display:flex; gap:5px; flex-wrap:wrap; } .gmeta .tag{ font-size:10px; color:var(--sage); border:1px solid var(--line); border-radius:999px; padding:2px 8px; }
.gmeta .price{ font-size:13px; color:var(--clay); font-weight:600; }

/* stones index */
.sgrid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(120px,1fr)); gap:12px; margin-top:16px; }
.scell{ background:var(--card); border:1px solid var(--line-soft); border-radius:14px; padding:12px 8px; text-align:center; text-decoration:none; color:inherit; display:flex; flex-direction:column; align-items:center; gap:7px; transition:transform .12s, border-color .12s; }
.scell:hover{ transform:translateY(-2px); border-color:var(--clay); }
.scell .sw{ width:52px; height:52px; border-radius:50%; background-size:cover; box-shadow:0 2px 4px rgba(30,20,8,.2); }
.scell .n{ font-size:11.5px; line-height:1.3; }
.scell .e{ font-size:9.5px; color:var(--muted); }

/* stone detail */
.stone-hero{ display:flex; gap:26px; align-items:center; flex-wrap:wrap; padding:28px 0; }
.stone-hero .big{ width:150px; height:150px; border-radius:50%; background-size:cover; box-shadow:0 10px 24px -8px rgba(30,20,8,.4); flex:0 0 auto; }
.stone-hero .info{ flex:1; min-width:240px; }
.stone-hero h1{ font-size:28px; margin:0 0 2px; letter-spacing:.03em; font-weight:500; }
.stone-hero .en{ font-size:11px; color:var(--muted); letter-spacing:.2em; text-transform:uppercase; }
.stone-hero .tags{ display:flex; gap:6px; flex-wrap:wrap; margin:12px 0; }
.stone-hero .tag{ font-size:11px; color:var(--sage); border:1px solid var(--line); border-radius:999px; padding:3px 10px; }
.stone-hero p{ font-size:13.5px; color:var(--ink-soft); line-height:1.9; }
.stone-hero .meta{ font-size:11.5px; color:var(--muted); margin-top:8px; }
.section-t{ font-size:13px; letter-spacing:.16em; color:var(--muted); margin:26px 0 10px; text-transform:uppercase; }

/* forms / mypage */
.panel{ background:var(--card); border:1px solid var(--line-soft); border-radius:16px; padding:22px; box-shadow:var(--shadow); max-width:420px; }
.field{ display:grid; gap:6px; margin-bottom:12px; }
.field label{ font-size:11px; color:var(--muted); letter-spacing:.08em; }
.field input{ border:1px solid var(--line); background:var(--panel); color:var(--ink); border-radius:9px; padding:10px 12px; font-size:14px; font-family:inherit; }
.field input:focus{ outline:none; border-color:var(--clay); }
.line-btn{ display:block; width:100%; text-align:center; background:#06C755; color:#fff; border:0; border-radius:10px; padding:12px; font-size:14px; font-weight:600; cursor:pointer; text-decoration:none; }
.tabs{ display:flex; gap:8px; margin-bottom:16px; }
.tabs button{ flex:1; border:1px solid var(--line); background:transparent; color:var(--ink-soft); border-radius:10px; padding:9px; font-size:13px; cursor:pointer; }
.tabs button.on{ background:var(--ink); color:var(--panel); border-color:var(--ink); }
.msg{ font-size:12px; color:var(--clay); margin-top:8px; min-height:16px; }

/* order history */
.ohist{ display:grid; gap:12px; margin-top:16px; }
.ocard{ background:var(--card); border:1px solid var(--line-soft); border-radius:14px; padding:16px; }
.ocard .top{ display:flex; justify-content:space-between; font-size:12px; color:var(--muted); }
.ocard .mid{ display:flex; align-items:center; gap:12px; margin:10px 0; }
.ocard .ring{ }
.ocard .status{ font-size:11px; padding:2px 9px; border-radius:999px; border:1px solid var(--line); color:var(--sage); }
.ocard .b{ width:18px; height:18px; }
.center{ text-align:center; padding:40px 0; color:var(--muted); font-size:13px; }
.theme-toggle{ position:fixed; top:14px; right:14px; width:34px;height:34px;border-radius:50%; border:1px solid var(--line); background:var(--panel); color:var(--ink-soft); cursor:pointer; z-index:10; }