.shoyu-guide {
  --shoyu-ink: #302b25;
  --shoyu-brown: #704332;
  --shoyu-line: #d2c9ba;
  --shoyu-paper: #f2ebdf;
  color: var(--shoyu-ink);
}
.shoyu-guide *, .shoyu-guide *::before, .shoyu-guide *::after { box-sizing: border-box; }
.shoyu-guide > section, .shoyu-guide > nav { margin-top: clamp(3rem, 7vw, 6rem); }
.shoyu-guide [id] { scroll-margin-top: 2rem; }
.shoyu-guide h2 { font-size: clamp(1.8rem, 3.5vw, 3.4rem); line-height: 1.13; letter-spacing: -.035em; max-width: 26ch; text-wrap: balance; }
.shoyu-guide h3 { font-size: clamp(1.15rem, 1.7vw, 1.5rem); line-height: 1.35; letter-spacing: -.015em; }
.shoyu-guide p, .shoyu-guide dd { line-height: 1.85; text-wrap: pretty; }
.shoyu-guide:lang(ja) h2, .shoyu-guide:lang(ja) h3 { line-height: 1.5; }
.shoyu-guide:lang(ja) p, .shoyu-guide:lang(ja) dd { line-height: 1.95; }
.shoyu-guide a { color: var(--shoyu-brown); text-underline-offset: .2em; }
.shoyu-guide a:hover { text-decoration-thickness: 2px; }
.shoyu-guide a:focus-visible, .shoyu-guide button:focus-visible, .shoyu-guide summary:focus-visible { outline: 3px solid #0b6970; outline-offset: 4px; }
.shoyu-guide .eyebrow { color: var(--shoyu-brown); font-size: .72rem; letter-spacing: .13em; }
.shoyu-guide .shoyu-paths { margin-top: 2rem; display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); border-block: 1px solid var(--shoyu-ink); }
.shoyu-paths a { display: grid; grid-template-columns: 1.5rem 1fr 1rem; align-items: center; gap: .5rem; min-height: 64px; padding: .8rem; color: inherit; text-decoration: none; font-size: .85rem; }
.shoyu-paths a + a { border-left: 1px solid var(--shoyu-line); }
.shoyu-paths small { color: var(--shoyu-brown); }
.shoyu-paths a:hover { background: var(--shoyu-paper); }
.shoyu-lead { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,.95fr); gap: clamp(1.5rem,4vw,4rem); align-items: center; }
.shoyu-lead h2 { margin: .5rem 0 1.4rem; font-size: clamp(2rem,4vw,3.8rem); }
.shoyu-lead figure { margin: 0; }
.shoyu-lead img { display: block; width: 100%; height: auto; aspect-ratio: 3/2; object-fit: contain; border-radius: 0; }
.shoyu-lead figcaption { font-size: .75rem; line-height: 1.6; color: #655b50; margin-top: .7rem; }
.shoyu-section-heading { border-top: 1px solid var(--shoyu-ink); padding-top: 1.2rem; margin-bottom: 2rem; }
.shoyu-section-heading h2 { margin: .5rem 0 1rem; }
.shoyu-section-heading > p:not(.eyebrow) { max-width: 66ch; }
.shoyu-prose { max-width: 70ch; }
.shoyu-now { background: var(--shoyu-paper); padding: clamp(1.3rem,3vw,2.8rem); display: grid; grid-template-columns: minmax(0,.7fr) minmax(0,1.3fr); gap: 2rem; }
.shoyu-now .shoyu-section-heading { border: 0; padding: 0; }
.shoyu-now ol { margin: 0; padding-left: 1.4rem; }
.shoyu-now li + li { margin-top: 1.5rem; }
.shoyu-now h3 { margin: 0; }
.shoyu-now p { margin: .5rem 0; }
.shoyu-decision { margin: 0 0 2.5rem; border-block: 1px solid var(--shoyu-ink); }
.shoyu-decision > h3 { margin: 0; padding: 1rem 0; font-size: clamp(1.25rem,2vw,1.75rem); }
.shoyu-decision > div { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); border-top: 1px solid var(--shoyu-line); }
.shoyu-decision article { padding: 1.15rem 1.3rem 1.3rem 0; min-width: 0; }
.shoyu-decision article:nth-child(even) { padding-left: 1.3rem; border-left: 1px solid var(--shoyu-line); }
.shoyu-decision article:nth-child(n+3) { border-top: 1px solid var(--shoyu-line); }
.shoyu-decision h4 { margin: .35rem 0 .6rem; font-size: 1.08rem; }
.shoyu-decision-want { margin: 0; font-size: .76rem; color: var(--shoyu-brown); font-weight: 700; letter-spacing: .035em; }
.shoyu-decision article > p:not(.shoyu-decision-want) { margin: .35rem 0; font-size: .9rem; }
.shoyu-decision small { display: block; margin-top: .6rem; line-height: 1.65; color: #655b50; }
.shoyu-type-index { display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); border-block: 1px solid var(--shoyu-line); }
.shoyu-type-index a { padding: 1rem .7rem; display: flex; flex-direction: column; gap: .45rem; text-decoration: none; color: inherit; }
.shoyu-type-index a + a { border-left: 1px solid var(--shoyu-line); }
.shoyu-type-index small { color: var(--shoyu-brown); }
.shoyu-type-index span[lang] { font-weight: 700; }
.shoyu-type-index span:last-child { font-size: .78rem; line-height: 1.6; }
.shoyu-type { display: grid; grid-template-columns: minmax(0,.7fr) minmax(0,1.3fr); gap: clamp(1.5rem,4vw,4rem); padding-block: 2.5rem; border-bottom: 1px solid var(--shoyu-line); }
.shoyu-type header { align-self: start; }
.shoyu-number { font: italic 2.7rem Georgia,serif; color: var(--shoyu-brown); }
.shoyu-type h3 { margin: .8rem 0; font-size: clamp(1.4rem,2.3vw,2rem); }
.shoyu-type header > small { display: block; margin-top: .8rem; font-size: .8rem; }
.shoyu-type > div { max-width: 66ch; }
.shoyu-type > div > p:first-child { margin-top: 0; }
.shoyu-type h4 { margin: 1.5rem 0 .3rem; font-size: .85rem; }
.shoyu-type h4 + p { margin-top: .4rem; }
.shoyu-caution { border-left: 3px solid #9b7150; padding-left: 1rem; font-size: .9rem; }
.shoyu-source-links { margin: 1rem 0 0; padding: 0; list-style: none; font-size: .75rem; line-height: 1.7; }
.shoyu-source-links li + li { margin-top: .35rem; }
.shoyu-source-links a { display: inline-block; padding-block: .15rem; overflow-wrap: anywhere; }
.shoyu-new-tab { font-size: .9em; }
.shoyu-process { list-style: none; display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); padding: 0; margin: 2rem 0; border-block: 1px solid var(--shoyu-line); }
.shoyu-process li { padding: 1.2rem .9rem; }
.shoyu-process li + li { border-left: 1px solid var(--shoyu-line); }
.shoyu-process h3 { font-size: 1.1rem; margin: .4rem 0; }
.shoyu-process p { font-size: .85rem; margin: .4rem 0 0; }
.shoyu-process small { color: var(--shoyu-brown); }
.shoyu-effects { border-block: 1px solid var(--shoyu-line); }
.shoyu-effects article { display: grid; grid-template-columns: clamp(4rem,9vw,7rem) minmax(0,1fr); gap: clamp(1rem,3vw,2.5rem); padding-block: clamp(1.4rem,3vw,2.2rem); }
.shoyu-effects article + article { border-top: 1px solid var(--shoyu-line); }
.shoyu-effects article > span { display: grid; place-items: center; align-self: start; aspect-ratio: 1; border: 1px solid var(--shoyu-brown); border-radius: 50%; color: var(--shoyu-brown); font: 400 clamp(1.8rem,4vw,3.2rem)/1 Georgia,"Yu Mincho",serif; }
.shoyu-effects article > div { max-width: 72ch; }
.shoyu-effects h3 { margin: .2rem 0 .6rem; font-size: clamp(1.3rem,2vw,1.8rem); }
.shoyu-effect-scene { margin: 0; color: var(--shoyu-brown); font-size: .75rem; font-weight: 700; letter-spacing: .04em; }
.shoyu-effects h3 + p { margin-top: 0; }
.shoyu-dishes, .shoyu-places { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 0 3rem; }
.shoyu-dishes article, .shoyu-places article { padding: 1.4rem 0; border-bottom: 1px solid var(--shoyu-line); min-width: 0; }
.shoyu-dishes h3, .shoyu-places h3 { margin: .2rem 0 .8rem; }
.shoyu-inline-next { padding-top: 1rem; }
.shoyu-note { margin-top: 2.5rem; border-left: 3px solid var(--shoyu-brown); padding: .2rem 0 .2rem 1.5rem; max-width: 76ch; }
.shoyu-note h3 { margin-top: 0; }
.shoyu-edo { margin: 2.5rem 0 3rem; padding: clamp(1.4rem,3.5vw,3rem); background: var(--shoyu-paper); }
.shoyu-edo > header { max-width: 74ch; }
.shoyu-edo > header h3 { margin: .5rem 0 1rem; font-size: clamp(1.5rem,2.8vw,2.5rem); line-height: 1.25; }
.shoyu-edo > div { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); margin: 2rem 0; border-block: 1px solid var(--shoyu-line); }
.shoyu-edo > div article { padding: 1.2rem 1rem; min-width: 0; }
.shoyu-edo > div article + article { border-left: 1px solid var(--shoyu-line); }
.shoyu-edo article > span { color: var(--shoyu-brown); font: italic 1.8rem Georgia,"Yu Mincho",serif; }
.shoyu-edo h4 { margin: .5rem 0; font-size: 1rem; }
.shoyu-edo article p { margin: 0; font-size: .8rem; }
.shoyu-edo > p { max-width: 74ch; }
.shoyu-words { margin: 0; }
.shoyu-words > div { display: grid; grid-template-columns: minmax(9rem,.6fr) minmax(0,1.4fr); gap: 1.5rem; border-bottom: 1px solid var(--shoyu-line); padding: 1.2rem 0; }
.shoyu-words dt { font-weight: 700; }
.shoyu-words dt small { display: block; font-size: .8rem; font-weight: 400; margin-top: .3rem; }
.shoyu-words dd { margin: 0; max-width: 67ch; }
.shoyu-shopping { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 2rem; }
.shoyu-shopping h3 { margin-top: 0; }
.shoyu-label-check { margin-top: 2rem; background: var(--shoyu-paper); padding: clamp(1.2rem,3vw,2rem); }
.shoyu-label-check ol { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 1.5rem 3rem; padding-left: 1.5rem; }
.shoyu-label-check p { margin: .5rem 0 0; }
.shoyu-safety { display: grid; grid-template-columns: minmax(0,.7fr) minmax(0,1.3fr); gap: 2rem; border-block: 2px solid var(--shoyu-brown); padding-block: 2rem; }
.shoyu-safety .shoyu-section-heading { border: 0; padding: 0; margin: 0; }
.shoyu-safety > div > p:first-child { margin-top: 0; }
.shoyu-guide .shoyu-phrases { display: block; background: transparent; color: inherit; padding: 0; border-radius: 0; }
.shoyu-phrase-list { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 1.5rem 3rem; }
.shoyu-phrase-list article { border-bottom: 1px solid var(--shoyu-line); padding-bottom: 1.5rem; }
.shoyu-phrase-list p[lang=ja] { font-size: 1.05rem; font-weight: 700; margin-top: 0; }
.shoyu-phrase-list p[lang=en] { font-size: .9rem; }
.shoyu-phrase-list button { min-height: 44px; padding: .6rem 1rem; background: transparent; border: 1px solid var(--shoyu-brown); border-radius: 0; color: var(--shoyu-brown); font: inherit; font-size: .85rem; cursor: pointer; }
.shoyu-phrase-list button:hover { background: var(--shoyu-paper); }
.shoyu-faq details { padding: 1rem 0; border-bottom: 1px solid var(--shoyu-line); }
.shoyu-faq summary { padding-block: .5rem; min-height: 44px; cursor: pointer; font-weight: 700; }
.shoyu-faq details p { max-width: 72ch; }
.shoyu-next { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 0 2rem; }
.shoyu-next h2 { grid-column: 1/-1; margin-bottom: 1.5rem; }
.shoyu-next a { display: grid; grid-template-columns: minmax(0,1fr) 1rem; gap: .7rem; padding-block: 1.3rem; border-block: 1px solid var(--shoyu-line); text-decoration: none; }
.shoyu-next a span { grid-column: 1; font-size: .85rem; line-height: 1.7; color: var(--shoyu-ink); }
.shoyu-next a b { grid-column: 2; grid-row: 1/3; }
.shoyu-review { border-top: 1px solid var(--shoyu-line); padding-top: 2rem; }
.shoyu-review h2 { font-size: 1.35rem; }
.shoyu-review > p { max-width: 90ch; font-size: .85rem; }
.shoyu-review .shoyu-source-links { columns: 2; column-gap: 2rem; }
.shoyu-review .shoyu-source-links li { break-inside: avoid; }
@media (max-width: 900px) {
  .shoyu-shopping { grid-template-columns: 1fr; gap: 1rem; }
  .shoyu-edo > div { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .shoyu-edo > div article:nth-child(3) { border-left: 0; }
  .shoyu-edo > div article:nth-child(n+3) { border-top: 1px solid var(--shoyu-line); }
  .shoyu-process { grid-template-columns: 1fr; }
  .shoyu-process li { display: grid; grid-template-columns: 2rem 7rem minmax(0,1fr); gap: .5rem; align-items: baseline; }
  .shoyu-process li + li { border-left: 0; border-top: 1px solid var(--shoyu-line); }
}
@media (max-width: 760px) {
  .shoyu-guide h2 { max-width: none; }
  .shoyu-guide .shoyu-paths { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .shoyu-paths a:nth-child(3) { border-left: 0; }
  .shoyu-paths a:nth-child(n+3) { border-top: 1px solid var(--shoyu-line); }
  .shoyu-lead, .shoyu-now, .shoyu-type, .shoyu-safety { grid-template-columns: 1fr; gap: 1.2rem; }
  .shoyu-lead figure { max-width: 32rem; }
  .shoyu-now h2 { margin-bottom: 0; }
  .shoyu-now .shoyu-section-heading { margin-bottom: .5rem; }
  .shoyu-decision > div { grid-template-columns: 1fr; }
  .shoyu-decision article { padding-inline: 0; }
  .shoyu-decision article:nth-child(even) { padding-left: 0; border-left: 0; }
  .shoyu-decision article + article { border-top: 1px solid var(--shoyu-line); }
  .shoyu-type-index { grid-template-columns: 1fr; }
  .shoyu-type-index a { display: grid; grid-template-columns: 1.5rem minmax(7rem,.7fr) minmax(0,1fr); gap: .5rem; align-items: baseline; }
  .shoyu-type-index a + a { border-left: 0; border-top: 1px solid var(--shoyu-line); }
  .shoyu-type { padding-block: 2rem; }
  .shoyu-type header { display: grid; grid-template-columns: 3rem minmax(0,1fr); gap: .25rem 1rem; }
  .shoyu-number { grid-row: 1/4; }
  .shoyu-type h3 { margin: 0; }
  .shoyu-type header > span:not(.shoyu-number), .shoyu-type header > small { grid-column: 2; margin: 0; }
  .shoyu-effects article { grid-template-columns: 3.5rem minmax(0,1fr); }
  .shoyu-dishes, .shoyu-places, .shoyu-phrase-list, .shoyu-next, .shoyu-label-check ol { grid-template-columns: 1fr; }
  .shoyu-dishes article, .shoyu-places article { padding-block: 1.4rem; }
  .shoyu-words > div { grid-template-columns: 1fr; gap: .6rem; }
  .shoyu-words dt { display: flex; flex-wrap: wrap; gap: .4rem 1rem; align-items: baseline; }
  .shoyu-process li { grid-template-columns: 1.5rem minmax(0,1fr); }
  .shoyu-process p { grid-column: 2; }
  .shoyu-edo > div { grid-template-columns: 1fr; }
  .shoyu-edo > div article + article, .shoyu-edo > div article:nth-child(3) { border-left: 0; border-top: 1px solid var(--shoyu-line); }
  .shoyu-review .shoyu-source-links { columns: 1; }
  .shoyu-next a + a { border-top: 0; }
}
@media print {
  .shoyu-guide > section, .shoyu-guide > nav { margin-top: 1.5rem; }
  .shoyu-guide button, .shoyu-paths { display: none !important; }
  .shoyu-guide .shoyu-now, .shoyu-guide .shoyu-label-check { background: transparent; }
  .shoyu-guide details > * { display: block !important; }
  .shoyu-type, .shoyu-phrase-list article { break-inside: avoid; }
}
@media (forced-colors: active) {
  .shoyu-guide { color: CanvasText; }
  .shoyu-guide a { color: LinkText; }
  .shoyu-guide button { color: ButtonText; border-color: ButtonText; }
  .shoyu-guide summary { color: CanvasText; }
}
@media (prefers-reduced-motion: reduce) {
  .shoyu-guide *, .shoyu-guide *::before, .shoyu-guide *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}