/* ローダー（旧スタイルから復元）。position を失うと白帯になる */
#loader{position:fixed;inset:0;background:#090c0d;z-index:9999;display:flex;align-items:center;
  justify-content:center;transition:opacity .6s ease-out,visibility .6s}
html,body{background:#090c0d;color:#efe9dd}
/* ============================================================
   瀬川食品 トップページ ― art direction「帯」
   昆布は海の中で一本の帯として育つ。その帯をページの背骨にする。
   縦組みと一筋の金線で、商品カタログではなく産地の記録として見せる。
   ページ内スコープ。他ページの style.css には影響しない。
   ============================================================ */
.sg{
  --ink:#090c0d;          /* 深海の黒 */
  --ink-2:#11181a;        /* 一段明るい面 */
  --ink-3:#1a2426;        /* 罫・境界 */
  --washi:#efe9dd;        /* 本文（白すぎない和紙色） */
  --washi-2:#b9b3a7;      /* 副次テキスト */
  --gold:#c9a45d;         /* 強調。これ以外の用途で使わない */
  --sea:#2b4a52;          /* 冷たい海の差し色 */
  --s1:8px; --s2:16px; --s3:24px; --s4:32px; --s5:48px; --s6:64px; --s7:96px; --s8:128px;
  --rule:1px solid var(--ink-3);
  --ease:cubic-bezier(.16,1,.3,1);
  --dur:900ms;
  background:var(--ink);
  color:var(--washi);
  font-family:'Noto Sans JP',system-ui,sans-serif;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
}
.sg *,.sg *::before,.sg *::after{box-sizing:border-box}
.sg ::selection{background:var(--gold);color:var(--ink)}

/* 和紙の粒子。平らな黒で終わらせないための層 */
.sg-grain{position:fixed;inset:0;z-index:1;pointer-events:none;opacity:.055;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='4'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}

.sg-wrap{max-width:1360px;margin-inline:auto;padding-inline:clamp(20px,4vw,72px)}

/* ---------- 縦組み ---------- */
/* 縦組みの日本語は字間をわずかに開けるのが組版の作法。
   欧文見出しは逆に詰める（.sg-num / .sg-eyebrow）。意図的な使い分け。 */
.sg-v{writing-mode:vertical-rl;text-orientation:mixed;letter-spacing:.09em;line-height:1.5;font-feature-settings:"palt" 0}

/* ---------- 背骨（帯）: セクション索引 ---------- */
.sg-rail{position:fixed;top:0;left:0;height:100vh;width:72px;z-index:40;display:none;
  align-items:center;justify-content:center;pointer-events:none}
.sg-rail__line{position:absolute;top:0;bottom:0;left:50%;width:1px;background:var(--ink-3)}
.sg-rail__line::after{content:"";position:absolute;top:0;left:0;width:1px;height:var(--p,0%);
  background:linear-gradient(var(--gold),var(--sea));transition:height 240ms linear}
.sg-rail__list{position:relative;display:flex;flex-direction:column;gap:var(--s5);pointer-events:auto;margin:0;padding:0;list-style:none}
.sg-rail a{display:flex;align-items:center;gap:10px;color:var(--washi-2);text-decoration:none;
  font-size:11px;letter-spacing:.14em;writing-mode:vertical-rl;padding:10px 6px;
  transition:color 400ms var(--ease)}
.sg-rail a::before{content:"";width:1px;height:14px;background:currentColor;opacity:.5;transition:height 400ms var(--ease)}
.sg-rail a:hover,.sg-rail a:focus-visible,.sg-rail a[aria-current="true"]{color:var(--gold)}
.sg-rail a[aria-current="true"]::before{height:34px;opacity:1}
@media (min-width:1180px){.sg-rail{display:flex}}

/* ---------- ヒーロー：活字が主役、写真は切り抜きで従属させる ---------- */
.sg-hero{position:relative;min-height:100svh;display:grid;align-content:center;overflow:hidden;
  padding-block:clamp(104px,14vh,160px) clamp(96px,12vh,140px)}
/* 海の底のような光。平らな黒にしない */
.sg-hero::before{content:"";position:absolute;z-index:0;right:-10%;top:50%;translate:0 -50%;
  width:min(78vw,900px);aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle,rgba(43,74,82,.55) 0%,rgba(43,74,82,.14) 45%,transparent 70%);
  filter:blur(10px)}
.sg-hero__grid{position:relative;z-index:2;width:100%;display:grid;gap:clamp(24px,5vw,56px);
  grid-template-columns:1fr;align-items:center}
@media (min-width:900px){.sg-hero__grid{grid-template-columns:minmax(0,1fr) minmax(0,1.05fr)}}

.sg-hero__type{display:flex;align-items:flex-start;gap:clamp(14px,2.4vw,34px);
  border-left:1px solid var(--ink-3);padding-left:clamp(16px,2.4vw,34px)}
.sg-hero__title{margin:0;font-family:'Shippori Mincho',serif;font-weight:400;color:var(--washi);
  writing-mode:vertical-rl;text-orientation:mixed;letter-spacing:.07em;line-height:1.3;
  font-size:clamp(2.6rem,7.4vw,4.9rem)}
/* 「昆布の、」「真髄。」を明示的に2列に割る。自動折返しで字が割れるのを防ぐ */
.sg-hero__title>span.l{display:block;white-space:nowrap}
.sg-hero__title em{font-style:normal;color:var(--gold);display:block;white-space:nowrap}
.sg-hero__side{display:flex;flex-direction:column;gap:var(--s3);padding-top:4px}
.sg-eyebrow{margin:0;font-size:11px;letter-spacing:.26em;color:var(--gold)}
.sg-hero__lead{margin:0;font-size:clamp(.82rem,1.5vw,.94rem);line-height:2.15;color:var(--washi-2);
  writing-mode:vertical-rl;letter-spacing:.09em;max-height:min(44svh,440px)}
.sg-hero__side .sg-eyebrow{writing-mode:vertical-rl;letter-spacing:.3em}
@media (max-width:899px){
  .sg-hero__type{flex-direction:column;border-left:0;border-top:1px solid var(--ink-3);
    padding-left:0;padding-top:var(--s3);gap:var(--s3)}
  .sg-hero__title{writing-mode:horizontal-tb;max-height:none;line-height:1.14}
  .sg-hero__side{flex-direction:row;align-items:flex-start;gap:var(--s3)}
  .sg-hero__lead,.sg-hero__side .sg-eyebrow{writing-mode:horizontal-tb;max-height:none;letter-spacing:.06em}
  .sg-hero__lead{max-width:30em}
}
.sg-hero__cta{align-self:flex-start;margin-top:auto}
@media (min-width:900px){.sg-hero__side{justify-content:flex-start;max-height:min(64svh,620px)}}

.sg picture{display:block}
.sg-hero__shot{position:relative;justify-self:center}
.sg-hero__shot img{display:block;width:100%;max-width:min(58vw,640px);height:auto;
  filter:drop-shadow(0 40px 60px rgba(0,0,0,.65));
  animation:sg-shuck 1400ms var(--ease) both,
            sg-float 9s var(--ease) 1500ms infinite alternate}
@keyframes sg-float{to{transform:translateY(-14px)}}
/* 殻を開ける。中央の一本の線から上下に開く */
@keyframes sg-shuck{from{clip-path:inset(49.8% 0 49.8% 0)}to{clip-path:inset(0 0 0 0)}}
.sg-hero__slit{position:absolute;z-index:3;left:4%;right:4%;top:50%;height:1px;
  background:linear-gradient(90deg,transparent,var(--gold),transparent);
  transform-origin:50% 50%;pointer-events:none;
  animation:sg-slit 1400ms var(--ease) both}
@keyframes sg-slit{
  0%{transform:scaleX(.04);opacity:0}
  18%{transform:scaleX(1);opacity:1}
  100%{transform:scaleX(1);opacity:0}}
@media (min-width:900px){
  /* 右の余白を殺し、見出し列に少し重ねる */
  .sg-hero__shot{justify-self:end;
    margin-right:calc(-1 * clamp(0px,2vw,36px));
    margin-left:calc(-1 * clamp(0px,4vw,72px))}
  .sg-hero__shot img{max-width:min(62vw,720px)}
}
@media (max-width:899px){.sg-hero__shot img{max-width:min(86vw,460px)}}

.sg-scroll{position:absolute;left:clamp(20px,4vw,64px);bottom:var(--s4);z-index:3;
  display:flex;align-items:center;gap:12px;font-size:10px;letter-spacing:.3em;color:var(--washi-2)}
.sg-scroll i{display:block;width:56px;height:1px;background:var(--ink-3);overflow:hidden;position:relative}
.sg-scroll i::after{content:"";position:absolute;inset:0;background:var(--gold);
  transform:translateX(-100%);animation:sg-trace 2.6s var(--ease) infinite}
@keyframes sg-trace{50%{transform:translateX(0)}100%{transform:translateX(100%)}}

/* ---------- ボタン・リンク ---------- */
.sg-btn{writing-mode:horizontal-tb;display:inline-flex;align-items:center;gap:12px;min-height:48px;
  padding:0 var(--s4);background:var(--gold);color:#17120a;text-decoration:none;font-size:.84rem;
  font-weight:700;letter-spacing:.14em;border:1px solid var(--gold);
  transition:background 300ms var(--ease),color 300ms var(--ease)}
.sg-btn:hover,.sg-btn:focus-visible{background:transparent;color:var(--gold)}
.sg-btn__arrow{display:block;width:18px;height:1px;background:currentColor;position:relative;
  transition:width 300ms var(--ease)}
.sg-btn:hover .sg-btn__arrow,.sg-link:hover .sg-btn__arrow{width:28px}
.sg-btn__arrow::after{content:"";position:absolute;right:0;top:-3px;width:7px;height:7px;
  border-top:1px solid currentColor;border-right:1px solid currentColor;transform:rotate(45deg)}
.sg-link{writing-mode:horizontal-tb;display:inline-flex;align-items:center;gap:12px;min-height:48px;
  color:var(--washi);text-decoration:none;font-size:.84rem;letter-spacing:.12em;
  border-bottom:1px solid var(--ink-3);transition:color 300ms var(--ease),border-color 300ms var(--ease)}
.sg-link:hover,.sg-link:focus-visible{color:var(--gold);border-color:var(--gold)}

/* ---------- セクション共通 ---------- */
.sg-sec{position:relative;padding-block:clamp(72px,11vw,168px)}
.sg-sec--paper{background:var(--ink-2)}
.sg-head{display:flex;align-items:baseline;gap:var(--s3);margin-bottom:var(--s6);flex-wrap:wrap}
.sg-num{font-family:'Shippori Mincho',serif;font-size:clamp(2.4rem,6vw,4.2rem);line-height:1;
  color:transparent;-webkit-text-stroke:1px var(--ink-3);letter-spacing:-.04em}
.sg-h2{margin:0;font-family:'Shippori Mincho',serif;font-weight:400;
  font-size:clamp(1.6rem,3.6vw,2.6rem);line-height:1.4;letter-spacing:.04em;color:var(--washi)}
.sg-kicker{margin:0;font-size:11px;letter-spacing:.24em;color:var(--gold)}

/* 枠で囲わず、罫と余白だけで群化する */
.sg-pillars{display:grid;gap:0;border-top:var(--rule)}
@media (min-width:860px){.sg-pillars{grid-template-columns:repeat(3,1fr)}}
.sg-pillar{padding:var(--s5) 0;border-bottom:var(--rule)}
@media (min-width:860px){
  .sg-pillar{padding:var(--s5) var(--s4);border-left:var(--rule)}
  .sg-pillar:first-child{padding-left:0;border-left:0}
  .sg-pillar:last-child{padding-right:0}
}
.sg-pillar h3{margin:0 0 var(--s2);font-family:'Shippori Mincho',serif;font-weight:400;
  font-size:1.18rem;letter-spacing:.05em;color:var(--washi)}
.sg-pillar p{margin:0;font-size:.88rem;line-height:2.1;color:var(--washi-2)}
.sg-pillar__i{display:block;width:28px;height:1px;background:var(--gold);margin-bottom:var(--s3)}

/* ---------- 逸品（商品）: 編集的な行組み ---------- */
.sg-work{display:grid;gap:clamp(28px,5vw,64px);align-items:center;
  padding-block:clamp(40px,6vw,88px);border-top:var(--rule)}
@media (min-width:900px){
  .sg-work{grid-template-columns:1fr 1fr}
  .sg-work--flip .sg-work__media{order:2}
}
.sg-work__media{position:relative;overflow:hidden;
  background:linear-gradient(165deg,#151e20 0%,#0d1214 100%);
  box-shadow:inset 0 0 0 1px rgba(185,179,167,.09)}
.sg-work__media img{display:block;width:100%;height:auto;aspect-ratio:16/10;object-fit:cover;
  transition:transform 1200ms var(--ease);transform-origin:center}
.sg-work:hover .sg-work__media img{transform:scale(1.045)}
.sg-work__tag{position:absolute;top:var(--s2);left:var(--s2);z-index:2;display:inline-block;
  padding:6px 12px;background:rgba(9,12,13,.72);backdrop-filter:blur(6px);
  border:1px solid rgba(201,164,93,.5);color:var(--gold);font-size:10px;letter-spacing:.2em}
.sg-work__body{display:flex;flex-direction:column;gap:var(--s3);align-items:flex-start}
.sg-work__idx{font-size:11px;letter-spacing:.24em;color:var(--washi-2)}
.sg-work h3{margin:0;font-family:'Shippori Mincho',serif;font-weight:400;
  font-size:clamp(1.5rem,3.4vw,2.3rem);line-height:1.35;letter-spacing:.03em;color:var(--washi)}
.sg-work h3 small{display:block;margin-top:8px;font-size:.62em;letter-spacing:.18em;color:var(--gold);font-family:'Noto Sans JP',sans-serif}
.sg-work p{margin:0;max-width:34em;font-size:.9rem;line-height:2.1;color:var(--washi-2)}
.sg-tags{display:flex;flex-wrap:wrap;gap:var(--s1);margin:0;padding:0;list-style:none}
.sg-tags li{font-size:11px;letter-spacing:.1em;color:var(--washi-2);padding:6px 10px;border:1px solid var(--ink-3)}

/* ---------- 七十年 ---------- */
.sg-era{display:grid;gap:clamp(32px,6vw,72px);align-items:center}
@media (min-width:980px){.sg-era{grid-template-columns:.8fr 1.2fr}}
.sg-era__fig{margin:0;display:flex;align-items:baseline;gap:14px}
.sg-era__n{font-family:'Shippori Mincho',serif;font-size:clamp(5rem,15vw,11rem);line-height:.84;
  letter-spacing:-.06em;color:var(--washi)}
.sg-era__u{font-size:clamp(.9rem,2vw,1.2rem);letter-spacing:.14em;color:var(--gold)}
.sg-video{position:relative;width:100%;aspect-ratio:16/9;background:var(--ink-2);border:var(--rule)}
.sg-video iframe{position:absolute;inset:0;width:100%;height:100%;border:0}

/* ---------- 声 ---------- */
.sg-voices{display:grid;gap:0;border-top:var(--rule)}
@media (min-width:900px){.sg-voices{grid-template-columns:repeat(3,1fr)}}
.sg-voice{padding:var(--s5) 0;border-bottom:var(--rule)}
@media (min-width:900px){
  .sg-voice{padding:var(--s5) var(--s4);border-left:var(--rule)}
  .sg-voice:first-child{padding-left:0;border-left:0}
  .sg-voice:last-child{padding-right:0}
}
.sg-voice blockquote{margin:0 0 var(--s3);font-family:'Shippori Mincho',serif;
  font-size:1rem;line-height:2.05;color:var(--washi)}
.sg-voice figcaption{font-size:.76rem;letter-spacing:.1em;color:var(--washi-2)}
.sg-quote{display:block;font-family:'Shippori Mincho',serif;font-size:2rem;line-height:1;color:var(--gold);margin-bottom:var(--s2)}

/* ---------- 結び ---------- */
.sg-cta{display:flex;flex-direction:column;gap:var(--s4);align-items:flex-start}
.sg-cta__t{margin:0;font-family:'Shippori Mincho',serif;font-weight:400;
  font-size:clamp(1.7rem,4.6vw,3.2rem);line-height:1.4;letter-spacing:.02em}
.sg-actions{display:flex;flex-wrap:wrap;gap:var(--s2)}

/* ---------- 出現 ---------- */
.sg-in{opacity:0;transform:translateY(26px);transition:opacity var(--dur) var(--ease),transform var(--dur) var(--ease)}
.sg-in.is-on{opacity:1;transform:none}
.sg-d1{transition-delay:90ms}.sg-d2{transition-delay:180ms}.sg-d3{transition-delay:270ms}.sg-d4{transition-delay:360ms}

.sg a:focus-visible,.sg button:focus-visible{outline:2px solid var(--gold);outline-offset:3px}

@media (prefers-reduced-motion:reduce){
  .sg *,.sg *::before,.sg *::after{animation:none!important;transition:none!important}
  .sg-in{opacity:1;transform:none}
  .sg-hero__media img{transform:none}
}

/* ============================================================
   下層ページ（products / about / company / faq ほか）
   トップと同じ「帯」の文法を下層にも通す。
   旧テンプレートは白地＋カード＋影の積み重ねだったので、
   面を暗い一枚に統一し、区切りは罫線と余白だけで取る。
   ============================================================ */

/* ---------- 面と文字の読み替え ----------
   旧 Tailwind の明色ユーティリティを、.sg の暗色トークンに写す。
   セクションの地はすべて透過にして、ページ全体を一枚の面として扱う。
   カード・囲みだけが --ink-2 の面を持つ。 */
.sg section[class*="bg-"],
.sg header[class*="bg-"]{background:transparent !important}

.sg .bg-white:not(section):not(header),
.sg .bg-stone-50:not(section):not(header),
.sg .bg-stone-100:not(section):not(header),
.sg .bg-stone-900:not(section):not(header),
.sg .bg-segawa-black:not(section):not(header){background-color:var(--ink-2) !important}
.sg .bg-white\/5{background-color:rgba(239,233,221,.045) !important}
.sg .bg-segawa-gold\/10{background-color:rgba(201,164,93,.09) !important}
.sg .bg-segawa-gold{background-color:var(--gold) !important;color:#17120a !important}
.sg .bg-segawa-gold *{color:#17120a !important}

.sg .text-gray-800,.sg .text-gray-700,.sg .text-segawa-black,
.sg .text-white,.sg .text-white\/90,.sg .text-gray-300{color:var(--washi) !important}
.sg .text-gray-600,.sg .text-gray-500,.sg .text-gray-400,
.sg .text-stone-400,.sg .text-white\/80,.sg .text-white\/70,
.sg .text-white\/50{color:var(--washi-2) !important}
.sg .text-segawa-gold{color:var(--gold) !important}

.sg .border-stone-200,.sg .border-stone-100,.sg .border-stone-800,
.sg .border-gray-800,.sg .border-white\/10,.sg .divide-stone-200 > *{border-color:var(--ink-3) !important}
.sg .border-segawa-black{border-color:var(--ink-3) !important}

/* ---------- 容器を減らす（14則-10）・角と影を揃える（14則-12） ---------- */
.sg .rounded,.sg .rounded-sm,.sg .rounded-lg,
.sg .rounded-xl,.sg .rounded-2xl{border-radius:0 !important}
.sg .shadow-sm,.sg .shadow,.sg .shadow-lg,.sg .shadow-xl,
.sg .shadow-2xl{box-shadow:none !important}
/* 影の代わりに髪の毛一本の罫で面を立てる */
.sg .bg-white:not(section):not(header),
.sg .bg-stone-50:not(section):not(header),
.sg .bg-stone-100:not(section):not(header){box-shadow:inset 0 0 0 1px rgba(185,179,167,.09) !important}

/* ---------- ウェイトは regular と bold の2種だけ（14則-11） ---------- */
.sg .font-light,.sg .font-normal,.sg .font-medium,
.sg .font-semibold,.sg [style*="font-weight:600"],
.sg [style*="font-weight: 600"]{font-weight:400 !important}

/* ---------- セクションの律動 ---------- */
.sg section{position:relative;z-index:2}
.sg-sec{padding-block:clamp(56px,9vw,120px) !important}
.sg-sec + .sg-sec::before{content:"";position:absolute;top:0;left:clamp(20px,4vw,72px);
  right:clamp(20px,4vw,72px);height:1px;background:var(--ink-3)}

/* ---------- 下層ページの扉 ---------- */
.sg-phero{position:relative;z-index:2;overflow:hidden;
  padding-block:clamp(132px,16vh,196px) clamp(48px,7vh,88px) !important;
  text-align:left !important}
.sg-phero::before{content:"";position:absolute;z-index:0;right:-14%;top:42%;translate:0 -50%;
  width:min(70vw,780px);aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle,rgba(43,74,82,.42) 0%,rgba(43,74,82,.10) 48%,transparent 72%);
  filter:blur(10px);pointer-events:none}
.sg-phero__inner{position:relative;z-index:2;max-width:1360px;margin-inline:auto;
  padding-inline:clamp(20px,4vw,72px);
  display:grid;grid-template-columns:auto minmax(0,1fr);gap:clamp(18px,3vw,40px);align-items:start}
.sg-phero__num{font-family:'Shippori Mincho',serif;font-size:clamp(2.6rem,7vw,5rem);line-height:.85;
  color:transparent;-webkit-text-stroke:1px var(--ink-3);letter-spacing:-.04em;user-select:none}
.sg-phero__body{border-left:1px solid var(--ink-3);padding-left:clamp(16px,2.6vw,36px);
  display:flex;flex-direction:column;gap:var(--s2)}
.sg-phero__kicker{margin:0;font-size:11px;letter-spacing:.26em;color:var(--gold);text-transform:uppercase}
.sg-phero h1{margin:0;font-family:'Shippori Mincho',serif;font-weight:400;color:var(--washi);
  font-size:clamp(1.85rem,5.2vw,3.4rem);line-height:1.3;letter-spacing:.02em}
.sg-phero__lead{margin:0;max-width:40em;font-size:clamp(.84rem,1.5vw,.95rem);
  line-height:2.1;color:var(--washi-2)}

/* ---------- パンくず ---------- */
.sg-crumb{position:relative;z-index:2;background:transparent !important;
  border-top:1px solid var(--ink-3) !important;border-bottom:1px solid var(--ink-3) !important}
.sg-crumb ol{font-size:11px;letter-spacing:.08em;color:var(--washi-2) !important}
.sg-crumb a{color:var(--washi-2) !important;text-decoration:none}
.sg-crumb a:hover,.sg-crumb a:focus-visible{color:var(--gold) !important}
.sg-crumb [aria-current="page"]{color:var(--washi) !important}

/* ---------- 見出し ---------- */
.sg h2{font-family:'Shippori Mincho',serif;font-weight:400;color:var(--washi);letter-spacing:.03em}
.sg h3,.sg h4{font-weight:400;color:var(--washi)}

/* ---------- 写真 ---------- */
.sg picture{display:block}
.sg figure{margin:0}
.sg-shot{position:relative;overflow:hidden;
  background:linear-gradient(165deg,#151e20 0%,#0d1214 100%);
  box-shadow:inset 0 0 0 1px rgba(185,179,167,.09)}
/* height は指定しない。Tailwind preflight の img{height:auto} に任せ、
   h-full / object-cover などのユーティリティを殺さないようにする */
.sg-shot img{display:block;width:100%}
.sg-shot__cap{margin:var(--s2) 0 0;font-size:11px;letter-spacing:.08em;line-height:1.9;color:var(--washi-2)}

/* 梱包の見せ方。商品より一段控えめに置く */
.sg-pack{display:grid;gap:clamp(16px,3vw,32px);grid-template-columns:1fr}
@media (min-width:760px){.sg-pack{grid-template-columns:1.25fr 1fr}}
.sg-pack .sg-shot img{aspect-ratio:4/3;object-fit:cover}

/* ---------- 表（規格・送料など） ---------- */
.sg table{width:100%;border-collapse:collapse}
.sg table th,.sg table td{border-color:var(--ink-3) !important;color:var(--washi)}
.sg table th{color:var(--washi-2) !important;font-weight:400 !important}

/* ---------- FAQ ---------- */
.sg details{border-top:1px solid var(--ink-3)}
.sg summary{cursor:pointer;padding-block:var(--s3);color:var(--washi)}
.sg summary::marker{color:var(--gold)}

/* ---------- Font Awesome を廃止した分の後始末 ----------
   アイコンはすべてラベルに添えた装飾だったので、面を汚さないよう畳む。
   情報を持つものは本文側に文字で残してある（14則-13） */
.sg i[class^="fa-"],.sg i[class*=" fa-"],
.sg i.fas,.sg i.far,.sg i.fab{display:none !important}

/* ---------- リンクと焦点 ---------- */
.sg a{transition:color 300ms var(--ease)}
.sg a:focus-visible,.sg button:focus-visible,
.sg summary:focus-visible{outline:2px solid var(--gold);outline-offset:3px}

/* ---------- ナビ（下層は常時地が必要） ---------- */
body.sg > nav.fixed{background:rgba(9,12,13,.86) !important;backdrop-filter:blur(10px);
  border-bottom:1px solid var(--ink-3)}

/* ---------- フッター ---------- */
body.sg > footer{position:relative;z-index:2;background:var(--ink-2) !important;
  border-top:1px solid var(--ink-3)}
body.sg > footer a:hover{color:var(--gold) !important}

/* ---------- 金地のボタンは文字色を黒で固定 ----------
   .text-white と詳細度が並ぶので、必ずこの位置（text-* の後ろ）に置く。
   白文字＋金地は 1.9:1 しかなく 14則-9 を満たさない */
.sg .bg-segawa-gold,
.sg .bg-segawa-gold *,
.sg .bg-segawa-gold.text-white{color:#17120a !important}
.sg .bg-segawa-gold:hover{background-color:var(--washi) !important;color:#17120a !important}

/* ---------- タップ領域 44px 以上（14則-4） ----------
   指で押す環境でだけ効かせる。本文中のリンクは行の流れを壊すので対象外にし、
   ナビ・フッタ・一覧・モバイルメニューなど「押すための並び」にだけ当てる */
@media (pointer:coarse){
  nav a,nav button,
  footer a,
  #mobileMenu a,#mobileMenu button,
  li > a{min-height:44px;display:inline-flex;align-items:center}
  nav a img{flex:none}
}

/* ---------- 金の不透明度違いは暗い地で読めなくなる ----------
   text-segawa-gold/30 などは白地前提の指定だった。
   暗い地では 1.8:1 まで落ちるので、読める濃さまで戻す（14則-9） */
.sg .text-segawa-gold\/30,
.sg .text-segawa-gold\/40,
.sg .text-segawa-gold\/50{color:rgba(201,164,93,.82) !important}

/* ---------- アサリ昆布ページ専用色の読み替え ----------
   パッケージの「海の青」は白地前提で選ばれていた。
   暗い地では水色の面が白く浮き、青文字が 4.1:1 まで落ちるので濃さを入れ替える */
.sg .ak-aqua-bg{background-color:var(--ink-2) !important;
  box-shadow:inset 0 0 0 1px rgba(90,169,216,.16)}
.sg .ak-sea{color:#5aa9d8 !important}
.sg .ak-sea-bg{background-color:#1c4f72 !important}
.sg .ak-sea-bg,.sg .ak-sea-bg *{color:var(--washi) !important}
.sg .ak-sea-border{border-color:rgba(90,169,216,.45) !important}