/* ============================================================
   IRONOHA 彩乃瑞 — リング詳細 / 静かな和モダン
   一覧ページと同じデザイントークン・同じ扇の輪郭を使用
   ============================================================ */
:root{
  --kinari:#FAF8F3; --kinari-2:#F2EDE4; --sumi:#17140F; --sumi-70:#4A443B; --sumi-40:#8C857A;
  --kin:#A98B4F; --kin-soft:#C7AE7C; --shu:#CA3A1C;
  --line:rgba(23,20,15,.14);
  --serif:"Shippori Mincho","Yu Mincho","游明朝","Hiragino Mincho ProN","Noto Serif JP","Noto Serif CJK JP",serif;
  --sans:"Noto Sans JP","Hiragino Sans","Yu Gothic","Noto Sans CJK JP",sans-serif;
  --latin:"Cormorant Garamond","Shippori Mincho","Noto Serif CJK JP",serif;
  --ease:cubic-bezier(.16,1,.3,1);
  --gutter:clamp(20px,5vw,80px); --maxw:1180px;
}
*,*::before,*::after{box-sizing:border-box}
body{margin:0;background:var(--kinari);color:var(--sumi);font-family:var(--sans);font-weight:300;
     font-size:15px;line-height:2.1;letter-spacing:.06em;font-feature-settings:"palt" 1;
     -webkit-font-smoothing:antialiased;overflow-x:hidden}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
h1,h2,h3,p,figure,figcaption,ul,li,dl,dt,dd,table{margin:0;padding:0}
ul{list-style:none}
.wrap{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gutter)}
.en{font-family:var(--latin);letter-spacing:.34em;font-weight:300}
.hr{height:1px;background:var(--line);transform:scaleY(.5);transform-origin:top}

.tate{writing-mode:vertical-rl;text-orientation:mixed;font-family:var(--serif);white-space:nowrap}
.tate-set{display:flex;flex-direction:row-reverse;align-items:flex-start}

.more{display:inline-flex;align-items:center;gap:14px;font-family:var(--latin);font-size:13px;letter-spacing:.3em;
      padding-bottom:6px;border-bottom:1px solid var(--line);transition:border-color .5s,gap .5s,color .5s}
.more::after{content:"";width:26px;height:1px;background:var(--kin);transition:width .5s}
.more:hover{color:var(--kin);border-color:var(--kin-soft);gap:20px}

/* ヘッダー（一覧と共通） */
.hd{position:sticky;top:0;z-index:60;display:flex;align-items:center;justify-content:space-between;
    padding:14px var(--gutter);background:rgba(250,248,243,.94);backdrop-filter:blur(8px);box-shadow:0 1px 0 var(--line)}
.hd__logo{display:flex;align-items:center;gap:12px}
.hd__logo img{width:clamp(150px,15vw,190px)}
.hd__logo .sub{font-family:var(--serif);font-size:11px;letter-spacing:.36em;opacity:.8;padding-top:4px}
.hd__nav{display:flex;gap:clamp(16px,2.4vw,34px)}
.hd__nav a{font-family:var(--serif);font-size:12.5px;letter-spacing:.28em;color:var(--sumi-70);transition:color .4s}
.hd__nav a:hover{color:var(--kin)}
.hd__nav a[aria-current]{color:var(--sumi);border-bottom:1px solid var(--kin);padding-bottom:3px}
.hd__burger{display:none;width:26px;height:14px;position:relative;background:none;border:0;cursor:pointer}
.hd__burger span{position:absolute;left:0;width:100%;height:1px;background:var(--sumi)}
.hd__burger span:nth-child(1){top:0}.hd__burger span:nth-child(2){bottom:0}

.crumb{padding:18px 0 0;font-size:11.5px;color:var(--sumi-40);letter-spacing:.1em}
.crumb a:hover{color:var(--kin)}
.crumb span{margin:0 8px;color:var(--line)}

/* ══════════════════════════════════════════════════
   扇（一覧と同じ輪郭）
   ══════════════════════════════════════════════════ */
.ogi{position:relative;width:100%;aspect-ratio:1000/501}
.ogi>img{width:100%;height:100%;object-fit:cover;clip-path:url(#ogi)}
.ogi__enso{position:absolute;left:5.8%;top:59.6%;width:84.2%;z-index:-1;opacity:.85;pointer-events:none}

/* ══════════════════════════════════════════════════
   主役 ── 扇＋円相＋縦組みの品名（2016年の組み方に戻す）
   ══════════════════════════════════════════════════ */
.omote{padding:clamp(30px,5vw,56px) 0 clamp(40px,6vw,72px)}
.omote__inner{max-width:840px;margin-inline:auto;position:relative}
.omote .ogi{z-index:1}
.omote__mon{position:absolute;top:-2%;left:0;width:44px;z-index:2}
.omote__na{position:relative;z-index:2;margin-top:-3%;display:flex;justify-content:center}
.omote__set{display:flex;flex-direction:row-reverse;align-items:flex-start;gap:8px}
.omote__ja{font-size:clamp(24px,3.2vw,34px);letter-spacing:.28em;line-height:1.5;font-weight:500}
.omote__yomi{font-size:10.5px;letter-spacing:.52em;color:var(--sumi-40);margin-top:.5em}
.omote__en{font-size:11px;letter-spacing:.28em;color:var(--kin);font-family:var(--latin);text-transform:uppercase}
.omote__no{margin-top:clamp(26px,4vw,40px);text-align:center;font-family:var(--latin);font-size:12px;
           letter-spacing:.3em;color:var(--sumi-40)}

/* ══════════════════════════════════════════════════
   詞 ── 詩を縦組みで、単独の画面に
   ══════════════════════════════════════════════════ */
.kotoba{padding:clamp(56px,9vw,120px) 0;background:var(--kinari-2)}
.kotoba__inner{display:flex;justify-content:center}
.kotoba .tate{font-size:clamp(16px,1.8vw,20px);line-height:2.05;letter-spacing:.32em;color:var(--sumi-70)}
.kotoba .tate+.tate{margin-right:clamp(16px,2.4vw,34px)}
.kotoba .tate.o{color:var(--sumi)}

/* ══════════════════════════════════════════════════
   想・彩 ── カタログと同じ二本立て。白背景カットを添える
   ══════════════════════════════════════════════════ */
.katachi{padding:clamp(56px,9vw,110px) 0}
.katachi__grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
               gap:clamp(28px,5vw,72px);align-items:center}
.katachi__fig{background:#fff;padding:clamp(14px,2vw,24px)}
.sec-h{font-family:var(--serif);font-size:15px;font-weight:500;letter-spacing:.4em}
.sec-h small{display:block;margin-top:8px;font-family:var(--latin);font-size:11px;letter-spacing:.3em;
             color:var(--kin);font-weight:400;text-transform:uppercase}
/* 想／彩 の大字（カタログの版面をそのまま持ち込む） */
.moji{font-family:var(--serif);font-size:clamp(30px,3.6vw,40px);font-weight:400;line-height:1;
      color:#8E8B84;letter-spacing:0}
.moji small{display:block;margin-top:10px;font-family:var(--latin);font-size:10.5px;letter-spacing:.34em;
            color:var(--kin);text-transform:uppercase}
.katachi__blk+.katachi__blk{margin-top:clamp(34px,5vw,52px);padding-top:clamp(30px,4.5vw,46px);
                            border-top:1px solid var(--line)}
.katachi p{margin-top:clamp(16px,2.4vw,22px);font-size:14px;line-height:2.5;color:var(--sumi-70)}

/* ══════════════════════════════════════════════════
   仕様 ── 表
   ══════════════════════════════════════════════════ */
.shiyo{padding:0 0 clamp(56px,9vw,110px)}
.shiyo__grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,4vw,64px);align-items:start;
             margin-top:clamp(24px,4vw,36px)}
table{width:100%;border-collapse:collapse;font-size:13.5px}
th,td{text-align:left;padding:14px 4px;border-bottom:1px solid var(--line);vertical-align:top}
th{font-family:var(--serif);font-weight:400;letter-spacing:.2em;color:var(--sumi-40);width:34%;font-size:12.5px}
td .yen{font-family:var(--latin);font-size:17px;letter-spacing:.04em}
td .note{display:block;margin-top:6px;font-size:11px;line-height:1.9;color:var(--sumi-40);letter-spacing:.04em}
.ask{margin-top:clamp(24px,4vw,32px);display:flex;flex-wrap:wrap;gap:clamp(16px,3vw,32px);align-items:center}

/* ══════════════════════════════════════════════════
   添 ── アレンジメント
   ══════════════════════════════════════════════════ */
.soe{padding:clamp(56px,9vw,110px) 0;border-top:1px solid var(--line)}
.soe__lead{max-width:56ch;margin-top:clamp(16px,2.4vw,22px);font-size:14px;line-height:2.5;color:var(--sumi-70)}
.soe__grid{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(26px,4vw,56px);
           margin-top:clamp(30px,5vw,48px)}
.soe__it h3{font-family:var(--serif);font-size:14px;font-weight:500;letter-spacing:.28em;
            padding-bottom:12px;border-bottom:1px solid var(--line)}
.soe__it dl{display:grid;grid-template-columns:1fr auto;gap:0 18px;margin-top:14px;
            font-size:13px;line-height:2.4}
.soe__it dt{color:var(--sumi-70)}
.soe__it dd{font-family:var(--latin);font-size:13.5px;color:var(--sumi);white-space:nowrap}
.soe__it p{margin-top:12px;font-size:11.5px;line-height:2;color:var(--sumi-40)}

/* ══════════════════════════════════════════════════
   重ねる ── 対になるマリッジ／セット
   ══════════════════════════════════════════════════ */
.kasane{padding:clamp(56px,9vw,110px) 0;background:var(--kinari-2)}
.kasane__lead{max-width:60ch;margin-top:clamp(16px,2.4vw,22px);font-size:14px;line-height:2.5;color:var(--sumi-70)}
.kasane__grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,4vw,56px);margin-top:clamp(30px,5vw,48px)}
.kasane__item .cap{margin-top:clamp(16px,2.4vw,22px);text-align:center}
.kasane__item .mon{width:26px;margin:0 auto 12px}
.kasane__item .k{font-family:var(--serif);font-size:24px;letter-spacing:.2em;text-indent:.2em}
.kasane__item .t{display:block;margin-top:6px;font-family:var(--serif);font-size:12.5px;letter-spacing:.3em;color:var(--sumi-40)}
.kasane__item .pr{display:block;margin-top:10px;font-family:var(--latin);font-size:14px;color:var(--sumi-70)}
.kasane__item .pr small{font-family:var(--sans);font-size:10.5px;color:var(--sumi-40);margin-left:6px}
.kasane__item a.more{margin-top:14px;font-size:11.5px}

/* ══════════════════════════════════════════════════
   他の八つ ── 横に流す
   ══════════════════════════════════════════════════ */
.hoka{padding:clamp(56px,9vw,110px) 0}
.hoka__scroll{margin-top:clamp(26px,4vw,40px);display:grid;grid-auto-flow:column;
              grid-auto-columns:minmax(230px,1fr);gap:clamp(18px,3vw,40px);
              overflow-x:auto;padding-bottom:14px;scroll-snap-type:x proximity}
.hoka__scroll::-webkit-scrollbar{height:1px;background:var(--line)}
.hoka__scroll::-webkit-scrollbar-thumb{background:var(--kin)}
.hoka__item{scroll-snap-align:start}
.hoka__item .ogi>img{transition:transform 2.4s var(--ease)}
.hoka__item:hover .ogi>img{transform:scale(1.05)}
.hoka__item .cap{margin-top:14px;text-align:center}
.hoka__item .na{font-family:var(--serif);font-size:14.5px;letter-spacing:.2em;text-indent:.2em}
.hoka__item .pr{display:block;margin-top:6px;font-family:var(--latin);font-size:12px;color:var(--sumi-40)}
.hoka__foot{margin-top:clamp(26px,4vw,40px);text-align:center}

/* ══════════════════════════════════════════════════
   店 ── 試着への導線
   ══════════════════════════════════════════════════ */
.mise{position:relative;overflow:hidden}
.mise img{width:100%;height:clamp(280px,40vw,420px);object-fit:cover}
.mise__cap{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;
           text-align:center;color:#fff;text-shadow:0 2px 20px rgba(23,20,15,.55)}
.mise__cap p{font-family:var(--serif);font-size:clamp(15px,2vw,20px);letter-spacing:.3em;line-height:2.4}
.mise__cap .more{margin-top:22px;border-color:rgba(255,255,255,.4);color:#fff}
.mise__cap .more:hover{color:#fff;border-color:#fff}

/* フッター */
.ft{background:var(--kinari-2);padding:clamp(56px,8vw,88px) 0 34px;text-align:center}
.ft__logo img{width:clamp(190px,22vw,240px);margin-inline:auto}
.ft__logo .ja{display:block;margin-top:12px;font-family:var(--serif);font-size:12px;letter-spacing:.5em;color:var(--kin)}
.ft__nav{display:flex;flex-wrap:wrap;justify-content:center;gap:clamp(14px,2.2vw,32px);margin:clamp(32px,5vw,50px) 0}
.ft__nav a{font-family:var(--serif);font-size:12.5px;letter-spacing:.28em;color:var(--sumi-70);transition:color .4s}
.ft__nav a:hover{color:var(--kin)}
.ft__copy{font-size:10.5px;letter-spacing:.22em;color:var(--sumi-40)}

/* あらわれ */
.fade{opacity:0;transform:translateY(16px);transition:opacity 1.3s var(--ease),transform 1.3s var(--ease)}
.fade.is-in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.fade{opacity:1;transform:none;transition:none}}


@media (max-width:860px){
  .hd__nav{display:none}.hd__burger{display:block}
  .katachi__grid,.shiyo__grid,.kasane__grid,.soe__grid{grid-template-columns:1fr}
}
@media (max-width:560px){
  body{font-size:14px}
  .omote__mon{width:34px}
  .hoka__scroll{grid-auto-columns:minmax(200px,1fr)}
}

/* ── 一覧（index）───────────────────────────────── */
.ix{padding:clamp(30px,5vw,60px) var(--gutter) clamp(50px,8vw,90px)}
.ix__h{font-family:var(--serif);font-size:clamp(18px,2.4vw,24px);font-weight:500;letter-spacing:.3em;line-height:1.9}
.ix__h span{display:block;margin-top:12px;font-family:var(--sans);font-size:12px;letter-spacing:.08em;color:var(--sumi-40)}
.ix__sec{margin-top:clamp(46px,7vw,84px)}
.ix__mon{display:inline-block;width:22px;vertical-align:-4px;margin-right:14px}
.ix__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(26px,4vw,52px) clamp(18px,3vw,40px);
          margin-top:clamp(22px,3.4vw,34px)}
.ix__card .ogi>img{transition:transform 2.2s var(--ease)}
.ix__card:hover .ogi>img{transform:scale(1.05)}
.ix__card .cap{margin-top:14px;text-align:center}
.ix__card .na{font-family:var(--serif);font-size:14.5px;letter-spacing:.2em;text-indent:.2em}
.ix__card .pr{display:block;margin-top:6px;font-family:var(--latin);font-size:12px;color:var(--sumi-40)}
.ix__memo{margin-top:clamp(50px,8vw,90px);background:#fff;border:1px solid var(--line);
          padding:clamp(22px,3.4vw,34px);font-size:13px;line-height:2.2;color:var(--sumi-70)}
.ix__memo h3{font-family:var(--serif);font-size:14px;font-weight:500;letter-spacing:.3em;margin-bottom:10px;color:var(--sumi)}
.ix__memo ul{padding-left:1.1em;list-style:disc}
.ix__memo b{font-weight:500;color:var(--sumi)}
.ix__memo code{font-family:ui-monospace,monospace;font-size:12px;background:var(--kinari-2);padding:1px 5px}
@media (max-width:860px){.ix__grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.ix__grid{grid-template-columns:1fr}}

/* ── 視覚的に隠すが読み上げ・検索には残す ───────────── */
.vh{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;
    clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
.moji__c{display:block}

/* ── FAQ ─────────────────────────────────────────────── */
.faq{padding:clamp(56px,9vw,110px) 0;border-top:1px solid var(--line)}
.faq__list{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(24px,3.6vw,48px) clamp(28px,4.5vw,64px);
           margin-top:clamp(26px,4vw,40px)}
.faq__q{font-family:var(--serif);font-size:14.5px;font-weight:500;letter-spacing:.16em;line-height:1.9;
        padding-left:1.5em;text-indent:-1.5em}
.faq__q::before{content:"Q";font-family:var(--latin);font-size:12px;letter-spacing:.3em;color:var(--kin);
                margin-right:.7em}
.faq__a{margin-top:12px;padding-left:1.5em;font-size:13px;line-height:2.3;color:var(--sumi-70)}
@media (max-width:860px){.faq__list{grid-template-columns:1fr}}

/* ── 確認用インデックス ───────────────────────────── */
.ix{padding:clamp(30px,5vw,60px) var(--gutter) clamp(50px,8vw,90px)}
.ix__h{font-family:var(--serif);font-size:clamp(18px,2.4vw,24px);font-weight:500;letter-spacing:.3em;line-height:1.9}
.ix__h span{display:block;margin-top:12px;font-family:var(--sans);font-size:12px;letter-spacing:.08em;color:var(--sumi-40)}
.ix__sec{margin-top:clamp(46px,7vw,84px)}
.ix__mon{display:inline-block;width:22px;height:auto;vertical-align:-4px;margin-right:14px}
.ix__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(26px,4vw,52px) clamp(18px,3vw,40px);
          margin-top:clamp(22px,3.4vw,34px)}
.ix__card .ogi>img{transition:transform 2.2s var(--ease)}
.ix__card:hover .ogi>img{transform:scale(1.05)}
.ix__card .cap{margin-top:14px;text-align:center}
.ix__card .na{font-family:var(--serif);font-size:14.5px;letter-spacing:.2em;text-indent:.2em}
.ix__card .pr{display:block;margin-top:6px;font-family:var(--latin);font-size:12px;color:var(--sumi-40)}
.ix__memo{margin-top:clamp(50px,8vw,90px);background:#fff;border:1px solid var(--line);
          padding:clamp(22px,3.4vw,34px);font-size:13px;line-height:2.2;color:var(--sumi-70)}
.ix__memo h2{font-family:var(--serif);font-size:14px;font-weight:500;letter-spacing:.3em;margin-bottom:10px;color:var(--sumi)}
.ix__memo ul{padding-left:1.1em;list-style:disc}
.ix__memo b{font-weight:500;color:var(--sumi)}
.ix__memo code{font-family:ui-monospace,monospace;font-size:12px;background:var(--kinari-2);padding:1px 5px}
@media (max-width:860px){.ix__grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.ix__grid{grid-template-columns:1fr}}


/* ============================================================
   トップページ
   ============================================================ */

/* ── トップのヘッダー（最初は地に溶かし、スクロールでソリッドに） ── */
.hd--top{background:none;box-shadow:none;padding:clamp(18px,2.4vw,26px) var(--gutter);
  transition:background .6s,padding .6s,box-shadow .6s}
.hd--top.is-solid{background:rgba(250,248,243,.94);backdrop-filter:blur(8px);
  padding:14px var(--gutter);box-shadow:0 1px 0 var(--line)}

/* ============================================================
   ヒーロー ── 写真の横に縦組み（PC）
   ============================================================ */
.hero{padding:clamp(96px,11vw,150px) 0 clamp(50px,7vw,86px)}
.hero__inner{position:relative;width:100%;max-width:var(--maxw);margin-inline:auto;
  padding-inline:var(--gutter);
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);
  gap:clamp(24px,4vw,64px);align-items:start}

/* 左：縦組みのコピー。右の行から読ませるので row-reverse */
.hero__copy{display:flex;flex-direction:row-reverse;justify-content:center;align-items:flex-start;
  gap:clamp(18px,2.6vw,38px)}
.hero__main{display:flex;flex-direction:row-reverse;align-items:flex-start;
  gap:clamp(10px,1.4vw,20px);margin:0;font-weight:400}
.hero__main .tate{font-size:clamp(21px,2.35vw,32px);line-height:1.44;letter-spacing:.16em;
  color:var(--sumi);white-space:nowrap}
.hero__sub{margin-top:clamp(36px,4.4vw,62px);font-size:clamp(10.5px,.95vw,13px);
  line-height:1.55;letter-spacing:.3em;color:var(--kin);white-space:nowrap}

/* 右：写真 */
.hero__fig{margin:0}
.hero__fig img{width:100%;height:auto;aspect-ratio:1000/1282;object-fit:cover}

/* 写真の左脇にスクロール表示 */
.hero__scroll{position:absolute;left:calc(50% - clamp(12px,2vw,32px));bottom:0;
  writing-mode:vertical-rl;font-size:10.5px;letter-spacing:.4em;color:var(--sumi-40);
  padding-top:56px}
.hero__scroll::before{content:"";position:absolute;top:0;left:50%;width:1px;height:44px;
  background:linear-gradient(var(--line),var(--kin));overflow:hidden}

/* 下に添える英字 */
.hero__script{width:100%;max-width:var(--maxw);margin:clamp(26px,3.4vw,44px) auto 0;
  padding-inline:var(--gutter);
  font-family:var(--latin);font-style:italic;font-size:clamp(16px,1.6vw,21px);
  letter-spacing:.18em;color:var(--kin)}

@media (max-width:900px){
  .hero{padding-top:clamp(84px,17vw,110px)}
  .hero__inner{grid-template-columns:1fr;gap:clamp(26px,5vw,40px)}
  .hero__copy{justify-content:center}
  .hero__main .tate{font-size:clamp(22px,6.4vw,30px)}
  .hero__sub{font-size:11.5px;letter-spacing:.24em;margin-top:clamp(26px,6vw,42px)}
  .hero__fig{width:min(100%,520px);margin-inline:auto}
  .hero__scroll{display:none}
  .hero__script{font-size:19px;text-align:center;padding-inline:var(--gutter)}
}

/* ============================================================
   コンセプト
   ============================================================ */
.concept{ position:relative; padding:clamp(90px,13vw,170px) 0; }
.concept__inner{ display:flex; justify-content:center; align-items:center; }
.concept__fig{ position:relative; width:100%; max-width:min(640px, 100%); }
.concept__fig img{ width:100%; aspect-ratio:4/3; object-fit:cover; }
.concept__fig figcaption{
  position:absolute; right:-14px; bottom:-22px;
  background:var(--kinari); padding:12px 14px;
  font-family:var(--serif); font-size:11px; letter-spacing:.4em; color:var(--kin);
}
.concept__enso{ position:absolute; left:-46px; top:-46px; width:150px; height:150px; z-index:-1; }
.concept__text{ display:flex; flex-direction:row-reverse; justify-content:flex-start; align-items:flex-start; gap:clamp(16px,2.4vw,34px); }
.concept__text .tate{ flex:0 0 auto; font-size:clamp(15px,1.55vw,17.5px); color:var(--sumi-70); }
.concept__text .tate.lead{ font-size:clamp(18px,2.1vw,23px); color:var(--sumi); letter-spacing:.28em; }
.concept__text .stanza{ margin-right:clamp(14px,2vw,28px); } /* 連（スタンザ）の切れ目 */
.concept__foot{ margin-top:clamp(48px,7vw,86px); text-align:center; }


/* ============================================================
   帯（写真フルブリード）
   ============================================================ */
.band{ position:relative; height:clamp(300px,52vw,560px); overflow:hidden; }
.band img{ width:100%; height:100%; object-fit:cover; }
.band__cap{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  color:#fff; text-align:center; text-shadow:0 2px 20px rgba(23,20,15,.55);
}
.band__cap p{ font-family:var(--serif); font-size:clamp(15px,2vw,21px); letter-spacing:.4em; line-height:2.4; }


/* ============================================================
   コレクション
   ============================================================ */
.collection{ padding:clamp(90px,13vw,170px) 0; background:var(--kinari-2); }
.cards{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(20px,3.2vw,52px); }
/* 扇そのものが商品を囲うので、カードの箱（背景・枠線・影）は持たせない */
.card{ position:relative; }

/* 扇の輪郭は共通CSSを使う */
.card:hover .card .ogi img{ transform:scale(1.04); }
/* 「朱の意匠」＋漢字1文字は扇の上に。写真には重ねない */
.card__mon{ display:flex; align-items:center; justify-content:center; gap:12px; margin-bottom:clamp(14px,2vw,20px); }
.card__mon img{ height:26px; width:auto; }
.card__mon .kanji{ font-family:var(--serif); font-size:clamp(24px,2.6vw,30px); line-height:1; }
.card__body{ text-align:center; margin-top:clamp(18px,2.4vw,26px); }
.card__body .en{ display:block; font-size:11.5px; letter-spacing:.28em; color:var(--kin); }
.card__body .wa{ display:block; margin-top:8px; font-family:var(--serif); font-weight:500;
      font-size:clamp(20px,2.2vw,24px); letter-spacing:.22em; text-indent:.22em; color:var(--sumi); }
.card__body .ja{ display:block; margin-top:9px; font-family:var(--serif); font-size:12px; letter-spacing:.18em; color:var(--sumi-40); }
.card__body .lead{ margin-top:14px; font-size:12.5px; line-height:2.1; color:var(--sumi-70); max-width:19em; margin-inline:auto; }
.card__body .more{ margin-top:18px; font-size:11.5px; }


/* ============================================================
   言の葉（ブランドマーク＋コンセプト原文）
   ============================================================ */
.kotonoha{ padding:clamp(90px,13vw,170px) 0; text-align:center; }
.kotonoha__mark{ position:relative; width:132px; height:132px; margin:0 auto clamp(30px,4vw,48px); display:grid; place-items:center; }
.kotonoha__mark .enso{ position:absolute; inset:0; }   /* 円相を一筆で描き、その内側に既存シンボルを置く */
.kotonoha__mark img{ width:58px; }
.kotonoha__copy p{
  font-family:var(--serif); font-size:clamp(15px,1.7vw,18px);
  line-height:2.6; letter-spacing:.14em; color:var(--sumi-70);
}
.kotonoha__copy p+p{ margin-top:clamp(22px,3vw,34px); }


/* ============================================================
   ショップ
   ============================================================ */
.shop{ position:relative; overflow:hidden;
  padding:clamp(80px,11vw,150px) 0; }

/* 背景（墨地・水面）は抜き、六角形を無地の上にすっきり置く */
.shop > .wrap{ position:relative; z-index:1; }
.shop .sec-label .en{ color:var(--kin); }
.shop .sec-label .ja{ color:var(--sumi-40); }
/* ============================================================
   日本地図（現行サイトの六角形画像を、エリアの位置関係に並べたヘクスマップ）
   ============================================================ */
.shop__inner{ display:grid; grid-template-columns:minmax(0,.74fr) minmax(0,1.26fr);
  gap:clamp(12px,2vw,30px); align-items:center; }
.shop__lead{ padding-bottom:clamp(10px,2vw,30px); }
.shop__txt{ margin:clamp(20px,2.6vw,32px) 0 clamp(26px,3.4vw,40px);
  font-size:14px; line-height:2.15; color:var(--sumi-70); }
.jmap{ width:100%; max-width:660px; margin-inline:auto; }
.jmap__svg{ display:block; width:100%; height:auto; }

.ar{ cursor:pointer; }
.ar__img{ transition:filter .45s var(--ease); }
.ar__edge{ fill:none; stroke:transparent; stroke-width:2;
  transition:stroke .45s var(--ease); }
.ar:hover .ar__img{ filter:brightness(1.14) saturate(1.08)
  drop-shadow(0 4px 14px rgba(0,0,0,.45)); }
.ar:hover .ar__edge{ stroke:var(--kin-soft); }
.ar:focus-visible{ outline:none; }
.ar:focus-visible .ar__edge{ stroke:var(--kin); stroke-width:3; }




/* ============================================================
   カタログ
   ============================================================ */
.catalog{ position:relative; padding:clamp(90px,13vw,160px) 0; overflow:hidden; }
.catalog__bg{ position:absolute; inset:0; }
.catalog__bg img{ width:100%; height:100%; object-fit:cover; }
.catalog__bg::after{ content:""; position:absolute; inset:0; background:rgba(250,248,243,.86); }
.catalog__inner{ position:relative; text-align:center; }
.catalog__inner p{ margin-top:20px; font-size:14px; color:var(--sumi-70); }
.catalog__inner .more{ margin-top:34px; }


.ig{ padding:clamp(64px,9vw,116px) 0; background:var(--kinari-2); text-align:center; }
.ig__mark{ width:26px; margin:0 auto clamp(20px,3vw,28px); opacity:.9; }
.ig__label{ font-family:var(--latin); font-size:11.5px; letter-spacing:.42em;
  color:var(--kin); text-transform:uppercase; }
.ig__ttl{ margin-top:clamp(16px,2.4vw,22px); font-family:var(--serif); font-weight:500;
  font-size:clamp(17px,2.2vw,23px); letter-spacing:.3em; line-height:2; }
.ig__txt{ margin-top:clamp(16px,2.4vw,22px); font-size:13.5px; line-height:2.4;
  color:var(--sumi-70); }
.ig__btn{ display:inline-flex; align-items:center; gap:12px; margin-top:clamp(26px,3.6vw,36px);
  font-family:var(--latin); font-size:13px; letter-spacing:.24em; color:var(--kin);
  border:1px solid var(--line); padding:14px 34px; transition:background .5s, color .5s, border-color .5s; }
.ig__btn::before{ content:""; width:14px; height:14px; background:currentColor;
  -webkit-mask:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M12%202.16c3.2%200%203.58.01%204.85.07%201.17.05%201.8.25%202.23.41.56.22.96.48%201.38.9.42.42.68.82.9%201.38.16.42.36%201.06.41%202.23.06%201.27.07%201.65.07%204.85s-.01%203.58-.07%204.85c-.05%201.17-.25%201.8-.41%202.23-.22.56-.48.96-.9%201.38-.42.42-.82.68-1.38.9-.42.16-1.06.36-2.23.41-1.27.06-1.65.07-4.85.07s-3.58-.01-4.85-.07c-1.17-.05-1.8-.25-2.23-.41-.56-.22-.96-.48-1.38-.9-.42-.42-.68-.82-.9-1.38-.16-.42-.36-1.06-.41-2.23C2.17%2015.58%202.16%2015.2%202.16%2012s.01-3.58.07-4.85c.05-1.17.25-1.8.41-2.23.22-.56.48-.96.9-1.38.42-.42.82-.68%201.38-.9.42-.16%201.06-.36%202.23-.41C8.42%202.17%208.8%202.16%2012%202.16zM12%200C8.74%200%208.33.01%207.05.07%205.78.13%204.9.33%204.14.63a5.9%205.9%200%200%200-2.13%201.38A5.9%205.9%200%200%200%20.63%204.14c-.3.76-.5%201.64-.56%202.91C.01%208.33%200%208.74%200%2012s.01%203.67.07%204.95c.06%201.27.26%202.15.56%202.91a5.9%205.9%200%200%200%201.38%202.13a5.9%205.9%200%200%200%202.13%201.38c.76.3%201.64.5%202.91.56C8.33%2023.99%208.74%2024%2012%2024s3.67-.01%204.95-.07c1.27-.06%202.15-.26%202.91-.56a5.9%205.9%200%200%200%202.13-1.38%205.9%205.9%200%200%200%201.38-2.13c.3-.76.5-1.64.56-2.91C23.99%2015.67%2024%2015.26%2024%2012s-.01-3.67-.07-4.95c-.06-1.27-.26-2.15-.56-2.91a5.9%205.9%200%200%200-1.38-2.13A5.9%205.9%200%200%200%2019.86.63c-.76-.3-1.64-.5-2.91-.56C15.67.01%2015.26%200%2012%200z%22%2F%3E%3Cpath%20d%3D%22M12%205.84A6.16%206.16%200%201%200%2018.16%2012%206.16%206.16%200%200%200%2012%205.84zm0%2010.16A4%204%200%201%201%2016%2012a4%204%200%200%201-4%204z%22%2F%3E%3Ccircle%20cx%3D%2218.41%22%20cy%3D%225.59%22%20r%3D%221.44%22%2F%3E%3C%2Fsvg%3E") no-repeat center/contain;
  mask:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M12%202.16c3.2%200%203.58.01%204.85.07%201.17.05%201.8.25%202.23.41.56.22.96.48%201.38.9.42.42.68.82.9%201.38.16.42.36%201.06.41%202.23.06%201.27.07%201.65.07%204.85s-.01%203.58-.07%204.85c-.05%201.17-.25%201.8-.41%202.23-.22.56-.48.96-.9%201.38-.42.42-.82.68-1.38.9-.42.16-1.06.36-2.23.41-1.27.06-1.65.07-4.85.07s-3.58-.01-4.85-.07c-1.17-.05-1.8-.25-2.23-.41-.56-.22-.96-.48-1.38-.9-.42-.42-.68-.82-.9-1.38-.16-.42-.36-1.06-.41-2.23C2.17%2015.58%202.16%2015.2%202.16%2012s.01-3.58.07-4.85c.05-1.17.25-1.8.41-2.23.22-.56.48-.96.9-1.38.42-.42.82-.68%201.38-.9.42-.16%201.06-.36%202.23-.41C8.42%202.17%208.8%202.16%2012%202.16zM12%200C8.74%200%208.33.01%207.05.07%205.78.13%204.9.33%204.14.63a5.9%205.9%200%200%200-2.13%201.38A5.9%205.9%200%200%200%20.63%204.14c-.3.76-.5%201.64-.56%202.91C.01%208.33%200%208.74%200%2012s.01%203.67.07%204.95c.06%201.27.26%202.15.56%202.91a5.9%205.9%200%200%200%201.38%202.13a5.9%205.9%200%200%200%202.13%201.38c.76.3%201.64.5%202.91.56C8.33%2023.99%208.74%2024%2012%2024s3.67-.01%204.95-.07c1.27-.06%202.15-.26%202.91-.56a5.9%205.9%200%200%200%202.13-1.38%205.9%205.9%200%200%200%201.38-2.13c.3-.76.5-1.64.56-2.91C23.99%2015.67%2024%2015.26%2024%2012s-.01-3.67-.07-4.95c-.06-1.27-.26-2.15-.56-2.91a5.9%205.9%200%200%200-1.38-2.13A5.9%205.9%200%200%200%2019.86.63c-.76-.3-1.64-.5-2.91-.56C15.67.01%2015.26%200%2012%200z%22%2F%3E%3Cpath%20d%3D%22M12%205.84A6.16%206.16%200%201%200%2018.16%2012%206.16%206.16%200%200%200%2012%205.84zm0%2010.16A4%204%200%201%201%2016%2012a4%204%200%200%201-4%204z%22%2F%3E%3Ccircle%20cx%3D%2218.41%22%20cy%3D%225.59%22%20r%3D%221.44%22%2F%3E%3C%2Fsvg%3E") no-repeat center/contain; }

.ig__btn:hover{ background:var(--kin); color:var(--kinari); border-color:var(--kin); }

/* トップのレスポンシブ */
@media (max-width:900px){
  .concept__inner{grid-template-columns:1fr}
  .concept__text{justify-content:center;margin-top:48px}
  .cards{grid-template-columns:1fr}
  .shop__inner{grid-template-columns:1fr;gap:clamp(22px,4vw,36px)}
  .shop__lead{text-align:center;padding-bottom:0}
}
@media (max-width:560px){
  .jmap{margin-inline:calc(var(--gutter) * -0.5);max-width:none;width:auto}
  /* 縦組みは画面幅を超えやすいので、はみ出す分だけ横に流す */
  .concept__text{max-width:100%;overflow-x:auto;padding-bottom:8px}
  .concept__text .tate{font-size:13.5px}
  .concept__text .tate.lead{font-size:16px}
}


/* ============================================================
   一覧ページ
   ============================================================ */
/* ページ見出し（写真とリード文は置かず、紋と見出しだけ） */
.ph{padding:clamp(46px,7vw,86px) 0 clamp(34px,4.5vw,54px);border-bottom:1px solid var(--line)}
.ph__side{display:flex;align-items:flex-start;justify-content:center;gap:clamp(16px,2.4vw,30px)}
.ph__mon{width:52px;margin-top:6px}
.ph h1{font-family:var(--serif);font-size:clamp(26px,3.4vw,38px);font-weight:500;letter-spacing:.2em;line-height:1.7}
.ph h1 .kanji{display:block;font-size:clamp(40px,5vw,58px);color:var(--shu);line-height:1;margin-bottom:16px}
.ph h1 .sub{display:block;margin-top:14px;font-family:var(--latin);font-size:13px;letter-spacing:.34em;color:var(--kin)}

/* ツールバー */
.bar{display:flex;flex-wrap:wrap;gap:16px;align-items:center;justify-content:space-between;padding:clamp(28px,4vw,44px) 0 clamp(20px,3vw,28px)}
.bar__count{font-family:var(--serif);font-size:13px;letter-spacing:.16em;color:var(--sumi-40)}
.bar__count b{font-weight:400;color:var(--sumi);font-size:20px;font-family:var(--latin);margin-inline:4px}
.sort{display:flex;gap:0;border:1px solid var(--line);background:#fff}
.sort button{appearance:none;border:0;background:none;cursor:pointer;font-family:var(--serif);font-size:12px;letter-spacing:.16em;color:var(--sumi-40);padding:10px 16px;transition:background .4s,color .4s}
.sort button+button{border-left:1px solid var(--line)}
.sort button[aria-pressed="true"]{background:var(--sumi);color:var(--kinari)}
.sort button:hover:not([aria-pressed="true"]){color:var(--sumi)}

/* 一覧グリッド ── 扇そのものが商品を囲うので、カードの箱は持たせない */
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(30px,4vw,64px) clamp(20px,3vw,44px);padding-bottom:clamp(56px,8vw,96px)}
.item{display:flex;flex-direction:column}

.item:hover .ogi img{transform:scale(1.05)}

.item__body{padding-top:clamp(16px,2vw,22px);display:flex;flex-direction:column;flex:1;text-align:center}
.item__no{font-family:var(--latin);font-size:10.5px;letter-spacing:.24em;color:var(--sumi-40)}
.item__name{margin-top:8px;font-family:var(--serif);font-size:clamp(17px,1.8vw,20px);font-weight:500;letter-spacing:.16em;text-indent:.16em}
.item__en{display:block;margin-top:8px;font-family:var(--latin);font-size:11.5px;letter-spacing:.24em;color:var(--kin)}
.item__poem{margin-top:16px;font-family:var(--serif);font-size:12.5px;line-height:2.2;color:var(--sumi-70);flex:1}
.item__price{margin-top:14px;font-size:12px;color:var(--sumi-40)}
.item__price b{font-family:var(--latin);font-size:19px;font-weight:400;color:var(--sumi);letter-spacing:.04em}
.item__price small{font-size:10.5px;margin-left:6px}
.item__more{margin-top:16px;font-size:11.5px;align-self:center}

/* 他カテゴリ導線 */
.cross{background:var(--kinari-2);padding:clamp(56px,8vw,96px) 0}
.cross__grid{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(18px,2.6vw,34px)}
.cross__card{background:#fff;border:1px solid var(--line);padding:clamp(24px,3vw,38px);display:flex;align-items:center;gap:clamp(16px,2.4vw,28px);transition:transform .6s,box-shadow .6s}
.cross__card:hover{transform:translateY(-4px);box-shadow:0 22px 44px -30px rgba(23,20,15,.45)}
.cross__card img{width:44px;flex:none}
.cross__card .k{font-family:var(--serif);font-size:26px;line-height:1}
.cross__card .t{font-family:var(--serif);font-size:14px;letter-spacing:.2em}
.cross__card .e{display:block;margin-top:6px;font-family:var(--latin);font-size:11px;letter-spacing:.26em;color:var(--kin)}


/* 一覧のレスポンシブ */
@media (max-width:900px){
  .cross__grid{grid-template-columns:1fr}
}
@media (max-width:640px){
  /* スマホは1列（カードを大きく見せる） */
  .grid{grid-template-columns:1fr;gap:clamp(30px,7vw,46px)}
  .sort button{padding:9px 11px;font-size:11px}
  .cross__card{padding:20px;gap:14px}
  .cross__card img{width:34px}
}

/* ── ほかの八つ：名前の体裁を他カードと統一（和名＋金の英名） ── */
.hoka__item .cap{ margin-top:clamp(16px,2vw,20px); }
.hoka__item .cap .na{ display:block; font-family:var(--serif); font-weight:500;
      font-size:16px; letter-spacing:.16em; text-indent:.16em; line-height:1.5; }
.hoka__item .cap .en{ display:block; margin-top:6px; font-family:var(--latin);
      font-size:10.5px; letter-spacing:.24em; color:var(--kin); }
.hoka__item .cap .pr{ margin-top:9px; font-family:var(--latin); font-size:12px;
      letter-spacing:.06em; color:var(--sumi-40); }


/* ============================================================
   ショップリスト ／ 店舗詳細
   ============================================================ */

/* ── 一覧の第一印象（縦組みの見出しと日本地図を横並び） ────── */
.slh{ padding:clamp(52px,8vw,116px) 0 clamp(40px,6vw,84px); }
.slh__wrap{ display:flex; align-items:center; justify-content:center;
      gap:clamp(28px,5vw,72px); }
.slh__head{ flex:0 0 auto; text-align:center; }
.slh__wrap .jmap{ flex:0 1 560px; width:100%; max-width:560px; margin:0; }
.slh__tate{ display:flex; flex-direction:row-reverse; justify-content:center;
      align-items:flex-start; gap:clamp(20px,3vw,44px); }
.slh__ttl{ font-weight:400; font-size:clamp(20px,1.9vw,25px); letter-spacing:.34em; line-height:1.9; }
.slh__txt{ font-size:clamp(11.5px,1vw,13px); letter-spacing:.24em; line-height:2;
      color:var(--sumi-40); margin-top:.6em; }
.slh__en{ margin-top:clamp(24px,3vw,42px); font-size:11px; letter-spacing:.42em; color:var(--kin); }

/* ── エリア絞り込み（和名＋ローマ字。細い縦罫で区切る） ───── */
.area-filter{ display:flex; flex-wrap:wrap; justify-content:center;
      padding:clamp(20px,2.6vw,32px) 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.area-btn{ position:relative; background:none; border:0; cursor:pointer; color:var(--sumi);
      padding:4px clamp(12px,1.6vw,22px); font-family:var(--serif); font-size:13px; letter-spacing:.2em;
      line-height:1.6; transition:color .4s var(--ease); }
.area-btn + .area-btn::before{ content:""; position:absolute; left:0; top:6px; bottom:6px;
      width:1px; background:var(--line); }
.area-btn small{ display:block; margin-top:5px; font-family:var(--latin); font-size:9.5px;
      letter-spacing:.24em; color:var(--sumi-40); transition:color .4s var(--ease); }
.area-btn::after{ content:""; position:absolute; left:50%; right:50%; bottom:-9px; height:1px;
      background:var(--kin); transition:left .45s var(--ease), right .45s var(--ease); }
.area-btn:hover{ color:var(--kin); }
.area-btn.is-active::after{ left:clamp(12px,1.6vw,22px); right:clamp(12px,1.6vw,22px); }
.area-btn.is-active small{ color:var(--kin); }

/* ── エリア別の一覧（枠を使わず、髪の毛のような罫線だけで組む） ── */
.shoplist{ padding-bottom:clamp(56px,7vw,100px); }
.area-section{ padding-top:clamp(48px,6.5vw,92px); scroll-margin-top:88px; }
.area-section.is-hidden{ display:none; }
.area-label{ position:relative; text-align:center; font-family:var(--serif); font-weight:400;
      font-size:15px; letter-spacing:.28em; scroll-margin-top:96px; }
.area-label .en{ display:block; margin-top:8px; font-size:10px; letter-spacing:.3em; color:var(--sumi-40); }
.area-label__n{ display:block; margin-top:14px; font-family:var(--latin); font-size:11px;
      letter-spacing:.2em; color:var(--kin); }
.area-label__n::before{ content:""; display:block; width:1px; height:22px; margin:0 auto 12px;
      background:linear-gradient(var(--line), var(--kin)); }

.shop-grid{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr));
      column-gap:clamp(20px,2.6vw,40px); row-gap:clamp(34px,4.4vw,64px);
      margin-top:clamp(30px,3.8vw,52px); }

.shop-card{ display:flex; flex-direction:column; }
.shop-card__media{ display:block; overflow:hidden; background:var(--kinari-2); }
.shop-card__media img{ width:100%; aspect-ratio:800/594; object-fit:cover;
      transition:transform 1.1s var(--ease), opacity .5s var(--ease); }
.shop-card:hover .shop-card__media img{ transform:scale(1.045); }
.shop-card__name{ margin-top:clamp(13px,1.6vw,18px); text-align:center;
      font-family:var(--serif); font-weight:400; font-size:15px;
      letter-spacing:.1em; line-height:1.7; transition:color .4s var(--ease); }
.shop-card:hover .shop-card__name{ color:var(--kin); }
.shop-card__addr{ margin-top:8px; text-align:center; font-size:11px; line-height:1.9;
      letter-spacing:.04em; color:var(--sumi-40); flex:1; }
.card-btns{ display:flex; flex-wrap:wrap; justify-content:center; gap:clamp(14px,2vw,24px);
      margin-top:clamp(12px,1.5vw,16px); }
.card-btn{ position:relative; font-size:11.5px; letter-spacing:.2em; color:var(--kin);
      padding-bottom:5px; transition:color .4s var(--ease); }
.card-btn i{ font-style:normal; margin-left:8px; font-family:var(--latin); }
.card-btn::after{ content:""; position:absolute; left:0; right:0; bottom:0; height:1px;
      background:var(--line); transition:background .4s var(--ease); }
.card-btn:hover::after{ background:var(--kin); }
.card-btn--tel{ font-family:var(--latin); font-size:13px; letter-spacing:.1em; color:var(--sumi-70); }
.card-btn--tel:hover{ color:var(--kin); }

/* 店舗詳細のヒーロー写真（ブランドイメージ） */
.shophero{ padding-top:clamp(18px,2.4vw,30px); }
.shophero__fig img{ width:100%; aspect-ratio:16/7; object-fit:cover; }

/* ── 店舗詳細 ───────────────────────────── */
.sec-h{ display:flex; align-items:baseline; gap:14px; margin-bottom:clamp(18px,2.4vw,28px);
      padding-bottom:12px; border-bottom:1px solid var(--line);
      font-family:var(--serif); font-weight:400; font-size:clamp(16px,1.9vw,20px); letter-spacing:.16em; }
.sec-h .en{ font-size:11.5px; letter-spacing:.26em; color:var(--sumi-40); }

.shophead{ padding:clamp(30px,4vw,52px) 0 clamp(40px,5vw,66px); }
.shophead__area{ font-family:var(--serif); font-size:12.5px; letter-spacing:.26em; color:var(--kin); }
.shophead__ttl{ margin:clamp(12px,1.6vw,20px) 0 0; font-family:var(--serif); font-weight:400;
      font-size:clamp(24px,3.4vw,40px); letter-spacing:.1em; line-height:1.5; }
.shophead__sub{ margin-top:10px; font-size:12.5px; letter-spacing:.16em; color:var(--sumi-40); }

/* データ（左）＋ 実店舗写真を小さく（右） */
.shophead__wrap{ display:flex; align-items:flex-start; gap:clamp(26px,3.4vw,52px); }
.shophead__main{ flex:1 1 auto; min-width:0; }
.shophead__photo{ flex:0 0 clamp(210px,25vw,300px); margin-top:clamp(24px,3vw,38px); }
.shophead__photo img{ width:100%; aspect-ratio:800/594; object-fit:cover;
      background:var(--kinari-2); border:1px solid var(--line); }
.shophead__photo figcaption{ margin-top:9px; text-align:center; font-family:var(--serif);
      font-size:10.5px; letter-spacing:.24em; color:var(--sumi-40); }

.shopinfo{ display:grid; grid-template-columns:auto 1fr; gap:0 clamp(20px,2.4vw,34px);
      margin-top:clamp(24px,3vw,38px); max-width:760px; font-size:14px; }
.shopinfo dt{ font-family:var(--serif); letter-spacing:.2em; color:var(--sumi-40);
      padding:12px 0; border-top:1px solid var(--line); white-space:nowrap; }
.shopinfo dd{ padding:12px 0; border-top:1px solid var(--line); line-height:1.9; word-break:break-all; }
.shopinfo dd a{ border-bottom:1px solid var(--line); transition:color .4s,border-color .4s; }
.shopinfo dd a:hover{ color:var(--kin); border-color:var(--kin-soft); }

.shopmap{ margin-top:clamp(26px,3.4vw,42px); width:100%; max-width:960px; aspect-ratio:2/1;
      background:var(--kinari-2); border:1px solid var(--line); }
.shopmap iframe{ display:block; width:100%; height:100%; border:0; }

/* コンセプト帯（店名・地域名を織り込んだブランドストーリー） */
.shopconcept{ padding:clamp(46px,6vw,84px) 0; text-align:center; border-bottom:1px solid var(--line); }
.shopconcept__en{ font-family:var(--latin); font-size:11px; letter-spacing:.4em; color:var(--kin); }
.shopconcept__ttl{ margin-top:14px; font-family:var(--serif); font-weight:400;
      font-size:clamp(20px,2.6vw,30px); letter-spacing:.18em; }
.shopconcept__lead{ max-width:720px; margin:clamp(20px,2.6vw,30px) auto 0;
      font-size:14px; line-height:2.25; color:var(--sumi-70); text-align:left; }

.shopvisit{ padding:clamp(40px,5vw,70px) 0; background:var(--kinari-2); }
.shopvisit p{ max-width:820px; font-size:14px; line-height:2.15; color:var(--sumi-70); }
.shopvisit p + p{ margin-top:1.2em; }

/* 特徴3カード（Order System / Material / After Service） */
.shopfeat{ padding:clamp(44px,5.5vw,78px) 0; }
.shopfeat__grid{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1px;
      background:var(--line); border:1px solid var(--line); }
.shopfeat__card{ background:var(--kinari); padding:clamp(26px,3vw,40px) clamp(20px,2.4vw,32px); }
.shopfeat__en{ font-family:var(--latin); font-size:10.5px; letter-spacing:.28em; color:var(--kin); }
.shopfeat__ttl{ margin-top:8px; padding-bottom:12px; border-bottom:1px solid var(--line);
      font-family:var(--serif); font-weight:400; font-size:16px; letter-spacing:.14em; }
.shopfeat__txt{ margin-top:15px; font-size:13px; line-height:2.05; color:var(--sumi-70); }

/* 店頭で試着できるリング（商品画像グリッド／扇トリミング） */
.shopring{ padding:clamp(44px,5.5vw,76px) 0 clamp(20px,3vw,34px); }
.shopring__lead{ max-width:760px; margin-top:-4px; margin-bottom:clamp(30px,4vw,52px);
      font-size:13.5px; line-height:2.1; color:var(--sumi-70); }
.shopring__cat + .shopring__cat{ margin-top:clamp(40px,5vw,68px); }
.shopring__cat-h{ text-align:center; font-family:var(--serif); font-weight:400;
      font-size:clamp(15px,1.7vw,18px); letter-spacing:.22em;
      margin-bottom:clamp(22px,2.8vw,34px); }
.shopring__cat-h::after{ content:""; display:block; width:34px; height:1px;
      margin:13px auto 0; background:var(--kin); }
.shopring__grid{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr));
      gap:clamp(20px,2.6vw,40px) clamp(14px,2vw,28px); }
.shopring__item{ display:flex; flex-direction:column; }
.shopring__item .ogi>img{ transition:transform 2.2s var(--ease); }
.shopring__item:hover .ogi>img{ transform:scale(1.05); }
.shopring__item:hover .shopring__name{ color:var(--kin); }
.shopring__body{ padding-top:clamp(12px,1.6vw,18px); text-align:center;
      display:flex; flex-direction:column; }
.shopring__no{ font-family:var(--latin); font-size:10px; letter-spacing:.22em; color:var(--sumi-40); }
.shopring__name{ margin-top:7px; font-family:var(--serif); font-size:clamp(14px,1.5vw,16px);
      letter-spacing:.12em; transition:color .4s var(--ease); }
.shopring__en{ display:block; margin-top:5px; font-family:var(--latin); font-size:10.5px;
      letter-spacing:.22em; color:var(--kin); }
.shopring__kind{ margin-top:8px; font-size:11px; letter-spacing:.16em; color:var(--sumi-40); }
.shopring__price{ margin-top:7px; font-size:11px; color:var(--sumi-40); }
.shopring__price b{ font-family:var(--latin); font-size:15px; font-weight:400; color:var(--sumi);
      letter-spacing:.03em; }
.shopring__price small{ font-size:9.5px; margin-left:4px; }

.shopcol{ padding:clamp(44px,5.5vw,76px) 0; }
.shopcol__grid{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1px;
      background:var(--line); border:1px solid var(--line); }
.shopcol__item{ background:var(--kinari); padding:clamp(26px,3.4vw,42px) 12px; text-align:center;
      transition:background .45s var(--ease); }
.shopcol__item:hover{ background:var(--kinari-2); }
.shopcol__item img{ width:66px; margin:0 auto 14px; opacity:.75; }
.shopcol__item .ja{ display:block; font-family:var(--serif); font-size:14.5px; letter-spacing:.2em; }
.shopcol__item .en{ display:block; margin-top:8px; font-size:10.5px; letter-spacing:.28em; color:var(--kin); }

.shopnear{ padding:0 0 clamp(48px,6vw,84px); }
.shopnear__list{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1px;
      background:var(--line); border:1px solid var(--line); }
.shopnear__list a{ display:block; background:var(--kinari); padding:16px clamp(16px,2vw,22px);
      transition:background .4s; }
.shopnear__list a:hover{ background:var(--kinari-2); }
.shopnear__list .nm{ display:block; font-family:var(--serif); font-size:14.5px; letter-spacing:.06em; }
.shopnear__list small{ display:block; margin-top:5px; font-size:11.5px; color:var(--sumi-40); }
.shopnear__more{ margin-top:clamp(26px,3.4vw,40px); text-align:center; }

@media (max-width:900px){
  .shopnear__list{ grid-template-columns:1fr; }
  .shop-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:760px){
  .shophead__wrap{ flex-direction:column; }
  .shophead__photo{ flex:none; width:100%; max-width:340px; margin:clamp(20px,5vw,28px) auto 0; }
  .slh__wrap{ flex-direction:column; gap:clamp(26px,6vw,40px); }
  .slh__wrap .jmap{ flex:none; width:100%; max-width:460px; }
}
@media (max-width:640px){
  .shop-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .shophero__fig img{ aspect-ratio:4/3; }
  .shopring__grid{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px 12px; }
  .shopfeat__grid{ grid-template-columns:1fr; }
  .shopcol__grid{ grid-template-columns:1fr; }
  .area-btn{ font-size:12px; padding:4px 12px; }
  .area-btn small{ font-size:8.5px; letter-spacing:.16em; }
  .slh__tate{ gap:22px; }
  .shopabout{ grid-template-columns:1fr; }
  .shopinfo{ grid-template-columns:1fr; gap:0; }
  .shopinfo dt{ padding-bottom:0; border-bottom:0; }
  .shopinfo dd{ border-top:0; padding-top:4px; padding-bottom:14px; }
  .shopmap{ aspect-ratio:4/3; }

}


/* ============================================================
   コンセプト
   ============================================================ */

/* ── 扉：墨地に縦組みのステートメント ────────────────── */
.cvh{ position:relative; min-height:min(88vh, 760px); display:flex; align-items:center;
      justify-content:center; overflow:hidden; background:var(--sumi); color:#EFE9DE; }
.cvh__bg{ position:absolute; inset:0; }
.cvh__bg img{ width:100%; height:100%; object-fit:cover; }
.cvh__in{ position:relative; z-index:1; text-align:center; padding:clamp(70px,10vw,120px) var(--gutter);
      text-shadow:0 1px 18px rgba(23,20,15,.55), 0 1px 3px rgba(23,20,15,.4); }
.cvh__en{ font-family:var(--latin); font-size:11px; letter-spacing:.48em; color:var(--kin-soft); }
.cvh__ttl{ margin-top:clamp(26px,3.6vw,46px); display:flex; flex-direction:row-reverse;
      justify-content:center; gap:clamp(14px,2vw,26px); font-weight:400; }
.cvh__ttl .tate{ font-size:clamp(22px,2.6vw,34px); letter-spacing:.3em; line-height:1.8; }
.cvh__sub{ margin-top:clamp(28px,3.6vw,46px); font-size:12px; letter-spacing:.32em; color:var(--kin-soft); }

/* ── 共通の節見出し ─────────────────────────── */
.csec{ padding:clamp(64px,9vw,132px) 0; }
.csec--tint{ background:var(--kinari-2); }
.csec--sumi{ background:var(--sumi); color:#EFE9DE; }
.chead{ text-align:center; }
.chead__kanji{ display:inline-block; font-family:var(--serif); font-size:clamp(30px,3.6vw,46px);
      letter-spacing:.1em; line-height:1; color:var(--kin); }
.chead__en{ display:block; margin-top:clamp(14px,1.8vw,20px);
      font-family:var(--latin); font-size:10.5px; letter-spacing:.42em; color:var(--sumi-40); }
.csec--sumi .chead__en{ color:var(--kin-soft); }
.chead__ja{ display:block; margin-top:clamp(12px,1.6vw,18px); font-family:var(--serif);
      font-size:clamp(16px,1.9vw,21px); letter-spacing:.22em; }
.clead{ max-width:40em; margin:clamp(24px,3vw,36px) auto 0; text-align:center;
      font-size:14px; line-height:2.2; color:var(--sumi-70); text-wrap:pretty; }
.chead::after{ content:""; display:block; width:1px; height:clamp(30px,4vw,50px);
      margin:clamp(22px,3vw,36px) auto 0; background:linear-gradient(var(--kin), transparent); }

/* ── いろは歌 四十七文字 ────────────────────────── */
.iroha{ margin-top:clamp(14px,2vw,26px); display:flex; flex-direction:row-reverse;
      justify-content:center; flex-wrap:wrap; gap:clamp(12px,2.2vw,34px); }
.iroha__col{ writing-mode:vertical-rl; font-family:var(--serif); font-size:clamp(15px,1.7vw,21px);
      letter-spacing:.42em; line-height:1; color:var(--sumi-70); }
.iroha__col span{ display:block; }
.iroha__note{ margin-top:clamp(30px,4vw,52px); text-align:center; font-size:12.5px;
      letter-spacing:.14em; line-height:2.1; color:var(--sumi-40); }

/* ── ブランドの詩（縦組み） ───────────────────── */
.uta{ position:relative; padding:clamp(60px,8vw,110px) 0; background:var(--sumi); color:#EFE9DE; overflow:hidden; }
.uta__bg{ position:absolute; inset:0; }
.uta__bg img{ width:100%; height:100%; object-fit:cover; opacity:.5; }
.uta__bg::after{ content:""; position:absolute; inset:0;
      background:linear-gradient(rgba(23,20,15,.18), rgba(23,20,15,.5)); }
.uta__in{ position:relative; z-index:1; display:flex; flex-direction:row-reverse;
      justify-content:center; gap:clamp(16px,2.6vw,40px); padding-inline:var(--gutter);
      text-shadow:0 1px 16px rgba(23,20,15,.7), 0 1px 3px rgba(23,20,15,.6); }
.uta__col{ writing-mode:vertical-rl; font-family:var(--serif); font-weight:400;
      font-size:clamp(14px,1.35vw,17px); letter-spacing:.2em; line-height:1.9; white-space:nowrap; }
.uta__col--lead{ color:#fff; }
.uta__col--gap{ width:clamp(4px,1.4vw,22px); }
.uta__sig{ position:relative; z-index:1; margin-top:clamp(40px,5vw,66px); text-align:center;
      font-family:var(--latin); font-style:italic; font-size:clamp(15px,1.5vw,19px);
      letter-spacing:.2em; color:var(--kin-soft); }

/* ── 彩と添 ─────────────────────────────── */
.futatsu{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr));
      gap:clamp(24px,3.4vw,54px); margin-top:clamp(36px,4.6vw,62px); }
.futatsu__item{ text-align:center; }
.futatsu__mon{ font-family:var(--serif); font-size:clamp(40px,5vw,64px); line-height:1; color:var(--kin);
      padding-bottom:clamp(18px,2.4vw,28px); border-bottom:1px solid var(--line); }
.futatsu__ttl{ margin-top:clamp(18px,2.4vw,28px); font-family:var(--serif); font-weight:400;
      font-size:clamp(15px,1.8vw,19px); letter-spacing:.2em; }
.futatsu__txt{ margin-top:clamp(12px,1.6vw,18px); font-size:13.5px; line-height:2.15; color:var(--sumi-70); }

/* ── 三つの形（誓・結・組） ───────────────────── */
.mitsu{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr));
      gap:clamp(18px,2.6vw,40px); margin-top:clamp(36px,4.6vw,62px); }
.mitsu__item{ display:block; text-align:center; }
.mitsu__fig{ position:relative; }
.mitsu__fig img{ width:100%; transition:transform 1.1s var(--ease); }
.mitsu__item:hover .mitsu__fig img{ transform:scale(1.04); }
.mitsu__mon{ display:flex; align-items:center; justify-content:center; gap:12px;
      margin-top:clamp(18px,2.2vw,26px); }
.mitsu__mon img{ width:auto; height:32px; opacity:.8; }
.mitsu__mon .kanji{ font-family:var(--serif); font-size:22px; letter-spacing:.1em; }
.mitsu__wa{ writing-mode:vertical-rl; text-orientation:mixed;
      display:inline-block; margin-top:16px; font-family:var(--serif); font-weight:500;
      font-size:clamp(19px,2.1vw,23px); letter-spacing:.18em; line-height:1; }
.mitsu__ja{ display:block; margin-top:9px; font-family:var(--serif); font-size:12.5px;
      letter-spacing:.18em; color:var(--sumi-40); }
.mitsu__ja small{ font-size:11px; letter-spacing:.1em; }
.mitsu__en{ display:block; margin-top:7px; font-family:var(--latin); font-size:10px;
      letter-spacing:.3em; color:var(--kin); }
.mitsu__txt{ margin-top:clamp(12px,1.5vw,16px); font-size:12.5px; line-height:2; color:var(--sumi-70); }

/* ── こだわり（4項目・番号つき） ────────────────── */
.kodawari{ counter-reset:k; margin-top:clamp(36px,4.6vw,62px); }
.kodawari__item{ counter-increment:k; display:grid;
      grid-template-columns:clamp(64px,8vw,110px) minmax(0,1fr);
      gap:clamp(16px,2.4vw,36px); align-items:start;
      padding:clamp(26px,3.4vw,44px) 0; border-top:1px solid var(--line); }
.kodawari__item:last-child{ border-bottom:1px solid var(--line); }
.kodawari__no{ font-family:var(--latin); font-size:clamp(13px,1.4vw,16px); letter-spacing:.24em;
      color:var(--kin); padding-top:.4em; }
.kodawari__no::before{ content:"0" counter(k); }
.kodawari__ttl{ font-family:var(--serif); font-weight:400; font-size:clamp(15px,1.85vw,20px);
      letter-spacing:.2em; }
.kodawari__txt{ margin-top:clamp(10px,1.4vw,16px); max-width:64em;
      font-size:13.5px; line-height:2.15; color:var(--sumi-70); }

/* ── ふたつの永遠 ──────────────────────────── */
.eien{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1px;
      margin-top:clamp(36px,4.6vw,62px);
      background:rgba(239,233,222,.16); border:1px solid rgba(239,233,222,.16); }
.eien__item{ background:var(--sumi); padding:clamp(28px,3.6vw,48px) clamp(20px,2.6vw,36px); }
.eien__no{ font-family:var(--latin); font-size:11px; letter-spacing:.3em; color:var(--kin-soft); }
.eien__ttl{ margin-top:14px; font-family:var(--serif); font-weight:400;
      font-size:clamp(15px,1.8vw,19px); letter-spacing:.2em; }
.eien__txt{ margin-top:clamp(12px,1.6vw,18px); font-size:13.5px; line-height:2.15; color:#C9C1B4; }
.eien__list{ margin-top:clamp(14px,1.8vw,20px); }
.eien__list li{ position:relative; padding-left:1.2em; font-size:12.5px; line-height:2.05; color:#C9C1B4; }
.eien__list li::before{ content:""; position:absolute; left:0; top:1em; width:6px; height:1px; background:var(--kin); }

/* ── 締め ─────────────────────────────── */
.cend{ text-align:center; }
.cend__txt{ margin-top:clamp(20px,2.6vw,30px); font-size:14px; line-height:2.2; color:var(--sumi-70); }
.cend__btns{ display:flex; flex-wrap:wrap; justify-content:center;
      gap:clamp(20px,3vw,44px); margin-top:clamp(30px,4vw,52px); }

@media (max-width:900px){
  .mitsu{ grid-template-columns:1fr; max-width:420px; margin-inline:auto; }
  .eien{ grid-template-columns:1fr; }
  .kodawari__item{ grid-template-columns:1fr; gap:6px; }
  .uta__in{ overflow-x:auto; justify-content:flex-start; flex-direction:row-reverse;
            padding-bottom:10px; }
}
@media (max-width:560px){
  .cvh__ttl .tate{ font-size:20px; }
  .iroha{ gap:10px; }
  .iroha__col{ font-size:15px; letter-spacing:.34em; }
  .uta__col{ font-size:13px; letter-spacing:.14em; }
}


/* ============================================================
   フッター（墨地・和モダン）  ※ base の .ft/.mise を上書きする
   ============================================================ */
.ft{ position:relative; text-align:center; color:var(--kinari);
     background:linear-gradient(180deg,#1b1712 0%,#141009 100%);
     padding:clamp(52px,7vw,86px) 0 clamp(26px,3vw,36px); }

/* 上辺の金の細い罫（中央が最も明るい） */
.ft__hairline{ display:block; width:100%; height:1px; border:0;
     background:linear-gradient(90deg,
       transparent, rgba(169,139,79,.5) 20%, rgba(169,139,79,.92) 50%,
       rgba(169,139,79,.5) 80%, transparent); }

/* ブランド（朱ロゴを生成りへ反転。暗地でワードマークまで読めるように） */
.ft__logo{ width:clamp(178px,21vw,224px); margin-inline:auto; opacity:.92;
     filter:brightness(0) invert(1) sepia(.18) saturate(1.15) brightness(1.02); }
.ft__ja{ display:block; margin-top:15px; font-family:var(--serif); font-size:12px;
     letter-spacing:.62em; text-indent:.62em; color:var(--kin); }
.ft__tag{ margin-top:17px; font-family:var(--serif); font-size:12.5px; letter-spacing:.3em;
     line-height:2; color:rgba(250,248,243,.6); }

/* ナビ */
.ft__nav{ display:flex; flex-wrap:wrap; justify-content:center; align-items:center;
     gap:13px clamp(16px,2.2vw,30px); max-width:720px;
     margin:clamp(34px,4.6vw,52px) auto clamp(24px,3.2vw,36px); }
.ft__nav a{ font-family:var(--serif); font-size:12.5px; letter-spacing:.24em;
     color:rgba(250,248,243,.8); transition:color .45s var(--ease); }
.ft__nav a:hover{ color:var(--kin); }

/* Instagram（ピル型） */
.ft__ig{ display:inline-flex; align-items:center; gap:9px;
     padding:9px 21px; border:1px solid rgba(169,139,79,.42); border-radius:999px;
     font-family:var(--latin); font-size:12px; letter-spacing:.16em; color:rgba(250,248,243,.82);
     transition:color .45s var(--ease), border-color .45s var(--ease), background .45s var(--ease); }
.ft__ig:hover{ color:var(--kinari); border-color:var(--kin); background:rgba(169,139,79,.12); }
.ft__ig-icon{ display:block; }

/* 会社情報・コピーライト */
.ft__foot{ margin-top:clamp(30px,4vw,46px); padding-top:clamp(18px,2.4vw,26px);
     border-top:1px solid rgba(250,248,243,.08); }
.ft__copy{ font-family:var(--latin); font-size:10px; letter-spacing:.22em;
     color:rgba(250,248,243,.4); }

@media (max-width:640px){
  .ft__nav{ gap:11px 16px; max-width:330px; }
  .ft__nav a{ font-size:12px; letter-spacing:.16em; }
}


/* ============================================================
   ブログ / コラム（一覧・記事）
   ============================================================ */

/* ── 一覧マストヘッド（風景写真＋見出しを重ねる） ────── */
.blogx__hero{ position:relative; overflow:hidden; min-height:clamp(360px,56vh,560px);
      display:flex; align-items:center; justify-content:center; background:#141109; }
.blogx__hero-img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0; }
.blogx__hero::after{ content:""; position:absolute; inset:0; z-index:1;
      background:linear-gradient(180deg, rgba(20,17,9,.34), rgba(20,17,9,.18) 42%, rgba(20,17,9,.52)); }
.blogx__hero-inner{ position:relative; z-index:2; text-align:center; color:var(--kinari);
      padding:clamp(30px,5vw,60px); }
.blogx__hero-mon{ width:38px; margin:0 auto clamp(16px,2.2vw,24px);
      filter:brightness(0) invert(1); opacity:.9; }
.blogx__hero-ttl{ font-family:var(--serif); font-weight:500; font-size:clamp(30px,5vw,54px);
      letter-spacing:.36em; text-indent:.36em; line-height:1.3; color:var(--kinari);
      text-shadow:0 2px 24px rgba(0,0,0,.5); }
.blogx__hero-yomi{ margin-top:16px; font-family:var(--serif); font-size:12px;
      letter-spacing:.5em; text-indent:.5em; color:rgba(250,248,243,.82); }
.blogx__hero-en{ margin-top:14px; font-family:var(--latin); font-size:11.5px;
      letter-spacing:.44em; color:var(--kin-soft); }
.blogx__hero-lead{ max-width:30em; margin:clamp(16px,2.2vw,22px) auto 0; font-size:12.5px;
      line-height:2; letter-spacing:.16em; color:rgba(250,248,243,.78); }

/* ── 一覧本体 ─────────────────────────────────── */
.blogx{ padding:clamp(40px,5.5vw,76px) 0 clamp(56px,8vw,104px); }
/* ツールバー：カテゴリ絞り込み ＋ 並び替え */
.blogx__bar{ display:flex; flex-wrap:wrap; gap:16px clamp(16px,3vw,32px);
      align-items:center; justify-content:space-between;
      margin-bottom:clamp(26px,3.6vw,42px); padding-bottom:clamp(16px,2vw,22px);
      border-bottom:1px solid var(--line); }
.blogx__filter{ display:flex; flex-wrap:wrap; }
.blogx__fbtn{ position:relative; background:none; border:0; cursor:pointer; color:var(--sumi);
      font-family:var(--serif); font-size:13px; letter-spacing:.18em;
      padding:5px clamp(12px,1.6vw,20px); line-height:1.6; transition:color .4s var(--ease); }
.blogx__fbtn + .blogx__fbtn::before{ content:""; position:absolute; left:0; top:6px; bottom:6px;
      width:1px; background:var(--line); }
.blogx__fbtn::after{ content:""; position:absolute; left:50%; right:50%; bottom:-5px; height:1px;
      background:var(--kin); transition:left .4s var(--ease), right .4s var(--ease); }
.blogx__fbtn:hover{ color:var(--kin); }
.blogx__fbtn.is-active::after{ left:clamp(12px,1.6vw,20px); right:clamp(12px,1.6vw,20px); }
.blogx__sort{ display:flex; border:1px solid var(--line); background:#fff; }
.blogx__sort button{ appearance:none; border:0; background:none; cursor:pointer;
      font-family:var(--serif); font-size:12px; letter-spacing:.14em; color:var(--sumi-40);
      padding:9px clamp(12px,1.6vw,16px); transition:background .4s, color .4s; }
.blogx__sort button + button{ border-left:1px solid var(--line); }
.blogx__sort button[aria-pressed="true"]{ background:var(--sumi); color:var(--kinari); }
.blogx__sort button:hover:not([aria-pressed="true"]){ color:var(--sumi); }

.blogx__grid{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr));
      gap:clamp(30px,4vw,56px) clamp(20px,3vw,40px); }
.blogx__card.is-hidden{ display:none; }

/* トップページのコラム導線 */
.homecol{ padding:clamp(70px,10vw,130px) 0; }
.homecol__grid{ margin-top:clamp(30px,4vw,52px); }
.homecol__more{ margin-top:clamp(34px,4.5vw,56px); text-align:center; }

/* スマホ：コラム導線は横スワイプのカルーセル（次カードが覗く） */
@media (max-width:640px){
  .homecol__grid{
    display:flex; grid-template-columns:none; gap:14px;
    overflow-x:auto; scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch;
    margin-inline:calc(var(--gutter) * -1); padding:2px var(--gutter) 12px;
    scrollbar-width:none;
  }
  .homecol__grid::-webkit-scrollbar{ display:none; }
  .homecol__grid .blogx__card{ flex:0 0 76%; scroll-snap-align:center; }
  .homecol__grid .blogx__media img{ aspect-ratio:3/2; }
}
.blogx__card{ display:flex; flex-direction:column; }
.blogx__media{ overflow:hidden; background:var(--kinari-2); }
.blogx__media img{ width:100%; aspect-ratio:16/9; object-fit:cover;
      transition:transform 1.1s var(--ease); }
.blogx__card:hover .blogx__media img{ transform:scale(1.05); }
.blogx__cat{ margin-top:clamp(14px,1.8vw,20px); font-family:var(--latin); font-size:10.5px;
      letter-spacing:.24em; color:var(--kin); }
.blogx__ttl{ margin-top:9px; font-family:var(--serif); font-weight:500; font-size:clamp(16px,1.8vw,19px);
      letter-spacing:.1em; line-height:1.7; transition:color .4s var(--ease); }
.blogx__card:hover .blogx__ttl{ color:var(--kin); }
.blogx__meta{ margin-top:10px; font-family:var(--latin); font-size:10.5px; letter-spacing:.2em; color:var(--sumi-40); }
.blogx__meta span+span::before{ content:"・"; margin:0 .5em; color:var(--line); }

/* ── 記事 ─────────────────────────────────────── */
.colp__hero{ position:relative; overflow:hidden; min-height:clamp(440px,78vh,780px);
      display:flex; align-items:center; justify-content:flex-end; background:#141109; }
.colp__hero-img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0; }
.colp__hero::after{ content:""; position:absolute; inset:0; z-index:1;
      background:linear-gradient(90deg, rgba(20,17,9,.10) 28%, rgba(20,17,9,.34) 62%, rgba(20,17,9,.62) 100%); }
.colp__hero-inner{ position:relative; z-index:2; text-align:center; padding:0 clamp(28px,6vw,104px); }
.colp__mon{ width:40px; margin:0 auto clamp(22px,3vw,32px); filter:brightness(0) invert(1); opacity:.92; }
.colp__poem{ display:flex; flex-direction:row-reverse; justify-content:center;
      align-items:flex-start; gap:clamp(16px,2.4vw,34px); }
.colp__poem .tate{ font-size:clamp(20px,2.6vw,30px); line-height:1.9; letter-spacing:.32em;
      color:var(--kinari); text-shadow:0 2px 22px rgba(0,0,0,.55); }
.colp__poem .tate.dim{ color:rgba(250,248,243,.78); font-size:clamp(16px,2vw,23px); }
.colp__hero-en{ margin-top:clamp(28px,4vw,46px); font-size:11.5px; letter-spacing:.42em; color:var(--kin-soft); }

.colp__title{ text-align:center; padding:clamp(30px,4vw,48px) clamp(20px,5vw,40px) 0; }
.colp__title h1{ font-family:var(--serif); font-weight:500; font-size:clamp(23px,3vw,36px);
      letter-spacing:.16em; line-height:1.6; }
.colp__title .en{ display:block; margin-top:12px; font-size:11.5px; letter-spacing:.34em; color:var(--kin); }
.colp__meta{ margin-top:16px; font-family:var(--latin); font-size:11px; letter-spacing:.24em; color:var(--sumi-40); }
.colp__meta span+span::before{ content:"・"; margin:0 .5em; color:var(--line); }

.colp__body{ max-width:620px; margin:clamp(34px,5vw,58px) auto 0; padding-inline:clamp(20px,5vw,32px);
      font-family:var(--serif); font-size:16px; line-height:2.55; letter-spacing:.03em; color:var(--sumi); }
.colp__body p{ margin:0 0 1.7em; text-indent:1em; }
.colp__body p.lead-first{ text-indent:0; }
.colp__body em{ font-style:normal; color:var(--kin); }

.colp__figure{ max-width:900px; margin:clamp(44px,6vw,76px) auto; padding-inline:clamp(20px,5vw,32px); }
.colp__figure img{ width:100%; display:block; }
.colp__figure figcaption{ margin-top:11px; text-align:center; font-size:11px;
      letter-spacing:.12em; color:var(--sumi-40); }

.colp__cta{ margin:clamp(46px,7vw,84px) auto clamp(10px,2vw,20px);
      padding-inline:clamp(20px,5vw,32px); display:flex; gap:clamp(20px,4vw,44px);
      justify-content:center; flex-wrap:wrap; }

/* 関連コラム */
.colp__rel{ padding:clamp(46px,6vw,84px) 0; margin-top:clamp(30px,4vw,52px); background:var(--kinari-2); }
.colp__rel-grid{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr));
      gap:clamp(18px,2.6vw,34px); }
.colp__rel .blogx__card{ background:transparent; }

@media (max-width:900px){
  .blogx__grid{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:560px){
  .blogx__grid{ grid-template-columns:1fr; }
  .colp__rel-grid{ grid-template-columns:1fr; }
  .colp__poem .tate{ letter-spacing:.24em; }
  .colp__body{ font-size:15px; line-height:2.4; }
}


/* ============================================================
   目録（デジタルカタログ）
   ============================================================ */
.cat-intro{ padding:clamp(48px,7vw,92px) 0 clamp(26px,3.4vw,44px); text-align:center; }
.cat-intro__lead{ max-width:44em; margin:0 auto; font-size:14px; line-height:2.4;
      letter-spacing:.04em; color:var(--sumi-70); }

.cat-spec{ background:var(--kinari-2); padding:clamp(44px,6vw,80px) 0; }
.cat-spec__grid{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1px;
      background:var(--line); border:1px solid var(--line); max-width:960px; margin-inline:auto; }
.cat-spec__item{ background:var(--kinari); padding:clamp(20px,2.6vw,30px) clamp(20px,2.4vw,32px); }
.cat-spec__item dt{ font-family:var(--serif); font-size:14px; letter-spacing:.14em; color:var(--sumi); }
.cat-spec__item dd{ margin-top:9px; font-size:12.5px; line-height:2; color:var(--sumi-70); }

/* カテゴリ章（誓ノ輪／結ノ輪／組ノ輪） */
.cat-sec{ padding:clamp(40px,5.5vw,76px) 0 0; }
.cat-sec + .cat-sec{ border-top:1px solid var(--line); }
.cat-cat{ display:flex; flex-direction:column; align-items:center; text-align:center;
      gap:clamp(12px,1.6vw,18px); }
.cat-cat__mon{ height:44px; width:auto; opacity:.9; }
.cat-cat__ttl{ font-family:var(--serif); font-weight:500; font-size:clamp(22px,2.6vw,30px);
      letter-spacing:.28em; text-indent:.28em; }
.cat-cat__sub{ display:block; margin-top:10px; font-family:var(--serif); font-weight:400;
      font-size:12px; letter-spacing:.16em; color:var(--sumi-40); text-indent:0; }
.cat-cat__sub .en{ font-family:var(--latin); letter-spacing:.24em; color:var(--kin); }

.cat-grid{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr));
      gap:clamp(34px,4.4vw,64px) clamp(20px,3vw,44px); padding:clamp(32px,4vw,56px) 0 clamp(44px,6vw,80px); }
.cat__p1{ margin-top:14px; padding-top:12px; border-top:1px solid var(--line); }
.cat__p1 a{ font-family:var(--latin); font-size:15px; color:var(--sumi);
      border-bottom:1px solid transparent; transition:color .4s, border-color .4s; }
.cat__p1 a:hover{ color:var(--kin); border-color:var(--kin-soft); }
.cat__p1 small{ font-family:var(--serif); font-size:10px; color:var(--sumi-40); margin-left:4px; letter-spacing:.02em; }
.cat__item{ display:flex; flex-direction:column; }
.cat__item .ogi>img{ transition:transform 2.2s var(--ease); }
.cat__item:hover .ogi>img{ transform:scale(1.05); }
.cat__body{ padding-top:clamp(14px,1.8vw,20px); text-align:center; display:flex; flex-direction:column; flex:1; }
.cat__no{ font-family:var(--latin); font-size:10.5px; letter-spacing:.22em; color:var(--sumi-40); }
.cat__name{ margin-top:8px; font-family:var(--serif); font-weight:500; font-size:clamp(17px,1.8vw,20px);
      letter-spacing:.16em; text-indent:.16em; }
.cat__en{ display:block; margin-top:6px; font-family:var(--latin); font-size:11px;
      letter-spacing:.24em; color:var(--kin); }
.cat__poem{ margin-top:14px; font-family:var(--serif); font-size:12.5px; line-height:2.2;
      color:var(--sumi-70); flex:1; }
.cat__price{ margin-top:16px; }
.cat__price > div{ display:flex; justify-content:space-between; align-items:baseline;
      padding:9px 2px; border-top:1px solid var(--line); }
.cat__price > div:last-child{ border-bottom:1px solid var(--line); }
.cat__price dt{ font-family:var(--serif); font-size:12px; letter-spacing:.1em; color:var(--sumi-70); }
.cat__price dd a{ font-family:var(--latin); font-size:14px; color:var(--sumi);
      border-bottom:1px solid transparent; transition:color .4s, border-color .4s; }
.cat__price dd a:hover{ color:var(--kin); border-color:var(--kin-soft); }
.cat__price small{ font-family:var(--serif); font-size:10px; color:var(--sumi-40); margin-left:3px; letter-spacing:.02em; }

@media (max-width:900px){ .cat-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:560px){
  .cat-grid{ grid-template-columns:1fr; }
  .cat-spec__grid{ grid-template-columns:1fr; }
}


/* ============================================================
   規約系（プライバシーポリシー等）
   ============================================================ */
.legal{ padding:clamp(48px,7vw,96px) 0 clamp(64px,9vw,120px); }
.legal__head{ text-align:center; margin-bottom:clamp(34px,5vw,58px); }
.legal__head .en{ display:block; font-family:var(--latin); font-size:12px;
      letter-spacing:.42em; color:var(--kin); }
.legal__head h1{ margin-top:14px; font-family:var(--serif); font-weight:500;
      font-size:clamp(22px,2.8vw,32px); letter-spacing:.28em; }
.legal__body{ max-width:760px; margin-inline:auto; }
.legal__body h2{ font-family:var(--serif); font-weight:500; font-size:clamp(16px,1.9vw,20px);
      letter-spacing:.14em; padding-bottom:14px; border-bottom:1px solid var(--line);
      margin-bottom:clamp(22px,3vw,32px); }
.legal__body p{ font-size:14px; line-height:2.4; letter-spacing:.03em; color:var(--sumi-70); }
.legal__body p + p{ margin-top:1.5em; }


/* ============================================================
   九つの物語（名前と詩で選ぶ）
   ============================================================ */
.stories__intro{ padding:clamp(48px,7vw,92px) 0 clamp(16px,2.4vw,30px); text-align:center; }
.stories__intro p{ max-width:40em; margin:0 auto; font-size:14px; line-height:2.4;
      letter-spacing:.04em; color:var(--sumi-70); }

.stories{ padding:clamp(30px,4vw,52px) 0 clamp(56px,8vw,104px); }
.stories__grid{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr));
      gap:clamp(40px,5vw,74px) clamp(22px,3vw,44px); }

.story{ display:flex; flex-direction:column; text-align:center; }
.story__fig{ margin-bottom:clamp(16px,2vw,22px); }
.story__fig>img{ transition:transform 2.2s var(--ease); }
.story:hover .story__fig>img{ transform:scale(1.05); }
.story__no{ font-family:var(--serif); font-size:12px; letter-spacing:.36em;
      text-indent:.36em; color:var(--kin); }
.story__name{ margin-top:11px; font-family:var(--serif); font-weight:500;
      font-size:clamp(19px,2.1vw,23px); letter-spacing:.16em; text-indent:.16em; line-height:1.5; }
.story__yomi{ display:block; margin-top:8px; font-family:var(--serif); font-weight:400;
      font-size:11.5px; letter-spacing:.26em; text-indent:.26em; color:var(--sumi-40); }
.story__en{ margin-top:8px; font-family:var(--latin); font-size:11.5px;
      letter-spacing:.26em; color:var(--kin); }
.story__poem{ margin-top:clamp(16px,2vw,22px); font-family:var(--serif); font-size:13.5px;
      line-height:2.5; letter-spacing:.06em; color:var(--sumi-70); flex:1; }
.story__forms{ margin-top:clamp(18px,2.2vw,24px); display:flex; justify-content:center;
      align-items:center; }
.story__forms a{ position:relative; font-family:var(--serif); font-size:12px;
      letter-spacing:.1em; color:var(--sumi); padding:4px clamp(9px,1.2vw,15px);
      transition:color .4s var(--ease); }
.story__forms a:hover{ color:var(--kin); }
.story__forms a + a::before{ content:""; position:absolute; left:0; top:6px; bottom:6px;
      width:1px; background:var(--line); }

@media (max-width:900px){ .stories__grid{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:640px){
  .stories__grid{ grid-template-columns:1fr; gap:clamp(38px,9vw,54px); }
  .story__poem{ font-size:14px; }
}


/* ============================================================
   ヘッダー（PC ナビの朱ドット ＋ スマホのドロップダウンメニュー）
   ============================================================ */

/* ── PC：ナビ項目に朱（--shu）の小さなドットを灯す ─────────
   ※ 下線ではなく、hover / aria-current で中央下にドットが咲く */
@media (min-width:861px){
  .hd__crest{ display:none; }
  .hd__nav a{ position:relative; padding-bottom:10px;
        font-family:var(--latin); font-size:14.5px; letter-spacing:.14em; }
  .hd__nav a::after{ content:""; position:absolute; left:50%; bottom:0;
        width:5px; height:5px; border-radius:50%; background:var(--shu);
        transform:translateX(-50%) scale(0);
        transition:transform .38s var(--ease); }
  .hd__nav a:hover::after{ transform:translateX(-50%) scale(1); }
  .hd__nav a[aria-current]{ border-bottom:0; }
  .hd__nav a[aria-current]::after{ transform:translateX(-50%) scale(1); }
}

/* ── スマホ：ヘッダー直下ドロップダウン ─────────────────
   ※ .hd に backdrop-filter があるため position:fixed は .hd 基準になる。
     そこで position:absolute（.hd が包含ブロック）でヘッダー直下に開く。 */
@media (max-width:860px){
  .hd__nav{
    display:flex; flex-direction:column; align-items:center;
    gap:clamp(20px,5.5vw,30px);
    position:absolute; top:100%; left:0; right:0;
    padding:clamp(28px,7vw,42px) 24px clamp(38px,9vw,54px);
    background:rgba(250,248,243,.99); backdrop-filter:blur(10px);
    border-top:1px solid var(--kin-soft);
    box-shadow:0 28px 40px -26px rgba(23,20,15,.5);
    max-height:84vh; overflow-y:auto;
    transform:translateY(-16px); opacity:0; visibility:hidden; pointer-events:none;
    transition:transform .5s var(--ease), opacity .4s var(--ease), visibility .4s;
  }
  /* パネル上部の欧文見出し */
  .hd__nav::before{ content:"Menu"; display:block; font-family:var(--latin);
        font-size:10.5px; letter-spacing:.5em; text-indent:.5em; color:var(--kin);
        text-align:center;
        opacity:0; transform:translateY(6px);
        transition:opacity .5s var(--ease) .04s, transform .5s var(--ease) .04s; }
  /* 紋のワンポイント（誓／結／組を三つ並べる。高さを揃える＝罠#7） */
  .hd__crest{ display:flex; align-items:flex-end; justify-content:center;
        gap:clamp(16px,4.5vw,24px); margin-top:clamp(12px,3vw,16px);
        padding-bottom:clamp(4px,1.5vw,8px);
        opacity:0; transform:translateY(6px);
        transition:opacity .55s var(--ease) .08s, transform .55s var(--ease) .08s; }
  .hd__crest img{ height:22px; width:auto; opacity:.88; }
  .hd.is-open .hd__nav{ transform:none; opacity:1; visibility:visible; pointer-events:auto; }
  .hd.is-open .hd__nav::before,
  .hd.is-open .hd__crest{ opacity:1; transform:none; }

  /* 各項目：欧文（Cormorant）＋ 和文サブラベル（明朝） */
  .hd__nav a{
    display:block; text-align:center; padding:0;
    font-family:var(--latin); font-size:21px; font-weight:500;
    letter-spacing:.14em; color:var(--sumi);
    border-bottom:0!important;
    opacity:0; transform:translateY(9px);
    transition:opacity .55s var(--ease), transform .55s var(--ease), color .3s;
  }
  .hd__nav a::after{ content:attr(data-ja); display:block; margin-top:7px;
        font-family:var(--serif); font-size:11px; letter-spacing:.26em; text-indent:.26em;
        color:var(--sumi-40); }
  .hd.is-open .hd__nav a{ opacity:1; transform:none; }
  .hd.is-open .hd__nav a:nth-of-type(1){ transition-delay:.16s; }
  .hd.is-open .hd__nav a:nth-of-type(2){ transition-delay:.22s; }
  .hd.is-open .hd__nav a:nth-of-type(3){ transition-delay:.28s; }
  .hd.is-open .hd__nav a:nth-of-type(4){ transition-delay:.34s; }
  .hd.is-open .hd__nav a:nth-of-type(5){ transition-delay:.40s; }
  .hd.is-open .hd__nav a:nth-of-type(6){ transition-delay:.46s; }
  .hd.is-open .hd__nav a:nth-of-type(7){ transition-delay:.52s; }
  .hd.is-open .hd__nav a:nth-of-type(8){ transition-delay:.58s; }
  .hd__nav a[aria-current]{ color:var(--kin); }
  .hd__nav a[aria-current]::after{ opacity:1; }

  /* バーガー（開いたら×に） */
  .hd__burger{ z-index:1; }
  .hd__burger span{ transition:transform .4s var(--ease); }
  .hd.is-open .hd__burger span:nth-child(1){ transform:translateY(6.5px) rotate(45deg); }
  .hd.is-open .hd__burger span:nth-child(2){ transform:translateY(-6.5px) rotate(-45deg); }

  body.nav-lock{ overflow:hidden; }
}
@media (prefers-reduced-motion:reduce){
  .hd__nav, .hd__nav::before, .hd__crest, .hd__nav a{ transition:none; }
}