/* =====================================================================
   R3 基盤（改良ラウンド3）：書体・文字組み・余白・罫線・角丸・動き
   - 全8ページで、fonts-r3.css の直後に読み込む。既存のCSSは書き換えず、ここで上書きする
   - 色は決定済みの案2のトークン（--sea / --paper / --ink など）だけを使う。色の新規定義はしない
     （影だけは、指示書で許された 0 1px 2px rgba(27,29,28,.06) を使う）
   - ロゴ（.r77-brand / .foot-logo）と、受付時間の表示部（.r98-phone-hours ほか）には手を入れない
   目次
     01 トークン　02 文字の土台　03 見出し　04 注記と補助の文字　05 余白と幅
     06 罫線・角丸・影・グラデーション　07 飾りのアイコン　08 ボタンと操作
     09 ヘッダー・フッター　10 トップ：第一画面　11 トップ：各セクション
     12 相談・40の目・だし・選別・卸・会社・ロゴ　13 動き
   ===================================================================== */

/* ---------------------------------------------------------------------
   01 トークン（色以外）。既存の --font-min / --font-sans を同梱書体へ向け直す
   --------------------------------------------------------------------- */
:root,
:root[data-theme="light"][data-palette="2"] {
  --font-min: var(--font-head);
  --font-sans: var(--font-body);
  --radius: 4px;
  --radius-s: 3px;
  --shadow: none;
  --r3-w: 1120px;      /* コンテンツの最大幅 */
  --r3-sec: 88px;      /* セクションの上下 */
  --r3-h1: 40px;       /* 第一画面の大見出し */
  --r3-h2: 27px;       /* セクション見出し */
  --r3-h3: 18px;       /* 小見出し */
  --r3-body: 16px;     /* 本文 */
  --r3-sub: 14px;      /* 操作の文字・補助の文字（ナビ、ボタン、条件の一文） */
  --r3-note: 12.5px;   /* 注記 */
  --r3-measure: 38em;  /* 本文の行長 */
  --r3-shadow: 0 1px 2px rgba(27, 29, 28, .06);
}
@media (max-width: 760px) {
  :root,
  :root[data-theme="light"][data-palette="2"] {
    --r3-sec: 52px;
    --r3-h1: 29px;
    --r3-h2: 22px;
  }
}

/* ---------------------------------------------------------------------
   02 文字の土台：本文は角ゴシック 16px・行間1.9・字間0.02em。本文は詰めずに組む
   --------------------------------------------------------------------- */
body {
  font-family: var(--font-body);
  font-size: var(--r3-body);
  line-height: 1.9;
  letter-spacing: .02em;
  font-feature-settings: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
button, input, select, textarea { font-family: inherit; letter-spacing: inherit; }

/* 段落の間は 0.9em。クラスの付いた段落は、既存の指定がそのまま勝つ */
:where(p) { margin: 0 0 .9em; }
:where(p:last-child) { margin-bottom: 0; }

/* 行長は 38em まで */
main p:not([class]),
.intro,
.block .intro,
.r98-lead,
.r98-official-lead,
.limits,
.draft-game-note,
.hint { max-width: var(--r3-measure); }
.block .intro, .intro { margin-bottom: 32px; color: var(--ink-2); }
/* 箱の中の文章は、箱ごと行長に合わせる */
.r98-quote-part, .faq, .hygiene { max-width: calc(var(--r3-measure) + 48px); }
/* 段落の上の余白をなくしたぶん、囲みや一覧の直後に来る段落には間をとる */
.eyes + p, .r98-next + p, .r98-mail + p { margin-top: 24px; }
.reasons + p, .r77-logo-cards + p { margin-top: 32px; }
details > summary + p { margin-top: 8px; }

/* 価格・数量・年・電話番号などの数字は、幅をそろえる */
.timeline .y, .r98-timeline strong, .reason .n, .r98-table, .r98-price-fields, .r75-amount,
.count, .round-no, .r98-step-count, .r98-profile dd, .r98-company-summary dd,
.sheetout dd, .sheet-to, .r98-address, .r98-time-flow strong, .r98-role-date,
.tile .g, .lot-scale, input[type="number"] { font-variant-numeric: tabular-nums; }
/* 受付時間の表記を含む区画（フッターの住所、相談ページの連絡先と要点、会社ページの受付表示）には、個別の指定を足さない */

/* ---------------------------------------------------------------------
   03 見出し：明朝・字間0.05em。大見出し40/29、セクション27/22、小見出し18
   --------------------------------------------------------------------- */
h1, h2, h3,
.r98-title h1,
.r98-company h1, .r98-company h2, .r98-company h3,
.r77-logo-card h2 {
  font-family: var(--font-head);
  font-weight: 600;
  letter-spacing: .05em;
  font-feature-settings: "palt" 1;
  text-wrap: balance;
  color: var(--ink);
}
section.night h2, section.night h3 { color: var(--night-ink); }

:root h1 { font-size: var(--r3-h1) !important; line-height: 1.5 !important; }
:root h2 { font-size: var(--r3-h2); line-height: 1.55; }
:root h3 { font-size: var(--r3-h3); line-height: 1.6; }
:root .block > .wrap > h2 { margin: 0 0 24px; }

/* 箱の中の見出しは小見出しの大きさにする */
:root .r75-guide-result h2,
:root .photo-inspector-head h2,
:root .r77-logo-card h2,
:root .r80-label h2 { font-size: var(--r3-h3); line-height: 1.6; }
:root .r75-guide-result h2 { margin: 0 0 4px; }
:root .photo-inspector-head h2 { margin: 0; }
:root .r80-label h2 { margin: 0 0 16px; }

/* ---------------------------------------------------------------------
   04 注記（12.5px・行間1.7）と、補助の文字（14px）
   但し書き・条件の一文は、これまでより小さくしない（14px に置く）
   --------------------------------------------------------------------- */
:root small { font-size: var(--r3-note) !important; line-height: 1.7; }
.photo-credit, .r98-source, .r98-photo-state, .r98-top-state, .r82-boundary, .r80-limit,
.r85-status, .noscript-note,
.r98-work figcaption, .r80-work-photo figcaption, .r82-stage figcaption, .r80-label-preview figcaption,
.r98-company-summary figcaption, .r75-dashi-intro figcaption, .draft-real-reference figcaption,
.r82-dialog > p, .r84-inspect-foot span, .photo-inspector-head p, .photo-inspector-foot span {
  font-size: var(--r3-note);
  line-height: 1.7;
}
:root .r98-services small,
:root .r98-guide-item small,
:root .pair .lbl small { font-size: var(--r3-sub) !important; }
.r98-services-note, .r98-state, .r98-note, .r75-source-note, .r98-condition, p.r98-pending,
.r98-group-photo figcaption, .r98-direct-grid details, .r98-route-view > strong,
.products figcaption, .matstrip figcaption, .oem-photo-story figcaption, .oem-product-proof figcaption,
.r98-source-note, .tile .see, .why1, .tile details, .reveal, .r75-guide-result p, .r75-guide-question,
.r98-care-cards a, .r98-business-cards a, .r98-role-date, .termlist, .col ul, .flowmap span,
.r98-table, .r80-controls > label, .r80-controls legend, .r80-label-status, .lot-scale, .pbar-h, .plegend { font-size: var(--r3-sub); }
.r98-services-note, .r98-note, .r98-condition { line-height: 1.8; color: var(--ink-2); }
p.r98-pending { line-height: 1.8; color: var(--ink); }
.photo-credit { letter-spacing: .02em; font-weight: 400; color: var(--muted); }
/* スマホ幅の但し書きは、前のラウンドで決めた 13px を保つ */
@media (max-width: 600px) {
  .r82-boundary, .r80-limit, .r98-work figcaption, .r80-work-photo figcaption { font-size: 13px; line-height: 1.7; }
}

/* ---------------------------------------------------------------------
   05 余白と幅：セクション上下 88px（スマホ 52px）、本文の最大幅 1120px、8px の倍数
   --------------------------------------------------------------------- */
main .wrap, main.wrap { width: min(100% - 2 * var(--gap), var(--r3-w)); }
.wrap .wrap { width: 100%; }

:root .block { padding-block: var(--r3-sec); }
:root .block .block { padding-block: 0; }
.r80-hero { padding-block: var(--r3-sec); }
.r98-company section { padding: var(--r3-sec) 0; }
.r98-company { padding-top: 32px; padding-bottom: var(--r3-sec); }
.r98-price-page { padding: 56px 0 var(--r3-sec); }
/* 選別ページ：説明と選別台は続けて見せる（既存の詰めた並びを保つ） */
:root .game-top { padding-bottom: 16px; }
:root .block.game { padding-top: 24px; }

.eyes, .cards, .gates, .quiz { gap: 24px; }
.tiles { gap: 16px; }
.r75-result-links, .r75-return { gap: 8px 32px; }
.r75-result-links { margin-top: 32px; }

/* ---------------------------------------------------------------------
   06 罫線・角丸・影・グラデーション
   影はなくし、1px の罫線と地色の差で分ける。角丸は 6px 以下。飾りのグラデーションは使わない
   --------------------------------------------------------------------- */
.eye, .card, .gate, .q, .pricebox, .sheetout, .hygiene, .feedback,
.r82-dialog, .photo-inspector, dialog.lightbox, .r98-message { box-shadow: none; }
.eye, .card, .gate, .q, .pricebox { border: 1px solid var(--line); }
.tile, .products figure, .col, .life li, .purpose a, .flowmap li, .faq details, .sheetform fieldset,
.r98-product, .r98-scene-choice, .r98-direct-grid > article, .r98-route-view, .r80-label,
.r80-terms-grid > section, .r98-path, .r98-preview, .r98-care-cards article, .r98-business-cards article,
.r98-timeline a, .r98-history-details, .r98-company-intro nav a, .r98-message-layout nav a,
.r75-guide, .r77-logo-card, .r98-steps button, .r98-catalog-category li { border-color: var(--line); }
:root[data-theme="light"][data-palette="2"] .tile,
:root[data-theme="light"][data-palette="2"] .purpose a,
:root[data-theme="light"][data-palette="2"] .faq details { border-color: var(--line); }

/* 太い色帯は、細い罫線にする（アレルギーの注意と、答え合わせの帯は目印として残す） */
.eyes .eye:first-child, .eyes .eye:nth-child(2) { border-top: 1px solid var(--line); }
#uses .cards .card:nth-child(-n+3) { border-left: 1px solid var(--line); }
.life li { border-width: 1px; }
.life li.ours { border-color: var(--sea); }
.reason, section.night .reason,
:root[data-theme="light"][data-palette="2"] section.night .reason { border-top-width: 1px; }
.r98-role-flow li { border-top-width: 1px; border-color: var(--line); border-top-color: var(--sea); }

/* 角丸：6px 以下 */
.pair button, .tile, .life li, .products figure, .col, .purpose a, .flowmap li, .sheetform fieldset,
.errsum, .faq details, .ph, .menu-list, .r80-label, .r77-logo-card, .r80-terms-grid > section,
.r82-dialog, .photo-inspector, .r98-message, .r77-logo-menu, .r77-mobile-menu nav, .r77-first-actions a,
dialog.lightbox, .item, .filters button, .steps li, .flowmap .pin, .evtoggle, .menu summary { border-radius: 4px; }
.tray { border-radius: 6px; }
.photos-strip img, .matstrip img, .lifeimg, dialog.lightbox img, .r98-work img, .r80-work-photo img,
.oem-hero img, .draft-sorting-photo img { border-radius: 2px; }
blockquote.creed, .feedback, .allergy { border-radius: 0; }
@media (min-width: 900px) {
  .flowmap li, .flowmap li:first-child, .flowmap li:last-child { border-radius: 0; }
}
.bag-form input[type="text"], .bag-form select,
.sheetform input[type="text"], .sheetform input[type="number"], .sheetform select, .sheetform textarea { border-radius: 4px; }
.r98-map rect { rx: 4px; }

/* 影：使うのは、重なって開くメニューだけ */
.r98-nav-panel, .r77-logo-menu, .r77-mobile-menu nav, .menu-list { box-shadow: var(--r3-shadow); }

/* グラデーション：飾りのものは単色へ。費用の帯の斜線は、色に頼らず区別するための模様なので残す */
body:has(.matstrip) #main > .block:first-child { background: var(--paper-2); }
.tray { background: var(--paper-2); border: 1px solid var(--line); box-shadow: none; }
.ph { background: var(--paper-2); }
.photo-pending::before { background: none; }

/* ---------------------------------------------------------------------
   07 飾りのアイコン：見出し・ナビ・ボタン・札に付いていた線画のアイコンは表示しない
   （マークアップは残してある。この区画を外せば元に戻る）
   クイズと選別の魚の絵、袋の見本、位置の図は、中身そのものなので残す
   --------------------------------------------------------------------- */
.r77-icon, .r98-company-icon, .r98-icon, .r98-store, .r83-cue { display: none; }
.r98-phone-hours .r98-company-icon { display: inline; }   /* 受付時間の表示部は現状のまま */

/* アイコン用の列を持っていた格子を、文字だけの並びに直す */
.r98-company-summary dl > div { grid-template-columns: 6em 1fr; gap: 16px; padding: 16px 0; border-bottom-color: var(--line); }
.r98-history-details li { grid-template-columns: 7em 1fr; gap: 16px; }
.r98-history-details li p { grid-column: auto; }
.r98-history-process { grid-column: 2; }
.r98-quote-part { grid-template-columns: 1fr; }
.r98-guide-item { grid-template-columns: minmax(0, 1fr); }
.r98-catalog-category li { grid-template-columns: 1fr; }
.r80-pending-rows li, .r85-rows li { grid-template-columns: minmax(0, 1fr); }
.r98-timeline::before { display: none; }
@media (max-width: 800px) {
  .r98-company-summary dl > div { grid-template-columns: 5em 1fr; gap: 12px; }
  .r98-history-details li { grid-template-columns: 1fr; gap: 4px; }
  .r98-history-process { grid-column: 1; }
}
@media (max-width: 900px) {
  .r98-scene-choice { display: flex; align-items: center; gap: 8px; }
  .r98-scene-choice > span { grid-column: auto; }
}

/* ---------------------------------------------------------------------
   08 ボタンと操作：形と太さをそろえる。ホバーは色と罫線の変化だけ
   --------------------------------------------------------------------- */
.btn {
  border-radius: 4px;
  border-width: 1px;
  min-height: 48px;
  padding: 12px 24px;
  font-size: var(--r3-body);
  font-weight: 700;
  letter-spacing: .06em;
}
.btn.small { min-height: 40px; padding: 8px 16px; font-size: var(--r3-sub); }
.btn.ghost { border-color: var(--sea); }
.btn.light { border-color: var(--line-strong); }
.r98-next .btn { border-radius: 4px; }

.r98-main-cta, .r80-consult, .r98-controls button, .r98-route-switch button, .r82-choices button,
.r82-zoom, .r80-reset, .r98-exit button, .r75-guide-options button, .r75-guide-close, .r75-guide-next,
.r75-gift-choices button, .r75-gift-path a, .r84-inspect-foot button, .r82-dialog-head button,
.photo-inspect-open, .photo-inspect-close, .photo-inspect-size, .r77-logo-card button,
.r80-controls input:not([type="radio"]), .r80-controls select, .r98-guide select, .r98-preview select,
.r98-password { border-radius: 4px; }

.r98-main-cta {
  min-height: 56px;
  padding: 12px 32px;
  margin-top: 0;
  border-width: 1px;
  font-size: var(--r3-body);
  letter-spacing: .08em;
}
.r80-consult { min-height: 48px; font-size: var(--r3-body); letter-spacing: .06em; }
.r98-wholesale-entry, .r98-direct-products, .r80-label-next, .r98-link,
.r98-company-more, .r82-story > a, .r82-more a, .r75-result-links a, .r75-return a {
  font-size: var(--r3-sub);
  font-weight: 700;
  text-underline-offset: .3em;
  text-decoration-thickness: 1px;
}
a { text-decoration-thickness: 1px; }

/* 切り替えのボタン（仕事を選ぶ・経路を比べる）は、下線の付く見出し札の形にする */
.r82-choices { gap: 0 32px; margin-bottom: 24px; border-bottom: 1px solid var(--line); }
.r82-choices button,
.r82-choices button[aria-pressed="true"] {
  min-height: 48px;
  padding: 8px 0;
  margin-bottom: -1px;
  border: 0;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  background: transparent;
  color: var(--ink-2);
  font-size: var(--r3-sub);
  font-weight: 500;
  letter-spacing: .04em;
}
.r82-choices button:hover { color: var(--sea); }
.r82-choices button[aria-pressed="true"] { border-bottom-color: var(--sea); color: var(--sea); font-weight: 700; }
@media (max-width: 420px) {
  .r82-choices { gap: 0 24px; }
  .r82-choices button { width: auto; }
}

.r98-route-switch button,
.r75-guide-options button, .r75-gift-choices button, .filters button, .r80-reset, .r98-exit button {
  border-color: var(--line-strong);
  font-size: var(--r3-sub);
  font-weight: 500;
}
.r98-route-switch button[aria-pressed="true"],
.r75-guide-options button[aria-pressed="true"],
.r75-gift-choices button[aria-pressed="true"],
.filters button[aria-pressed="true"] { font-weight: 700; }
.filters button { min-height: 40px; padding: 8px 16px; }
.filters { gap: 8px; margin-bottom: 24px; }

@media (prefers-reduced-motion: no-preference) {
  a, .btn, .r98-main-cta, .r80-consult, .r82-choices button, .r98-services a, .r98-path,
  .r98-person, .r80-quick a, .r77-nav a, .r98-nav-group > summary, .tile, .r98-product {
    transition: color .15s ease, background-color .15s ease, border-color .15s ease;
  }
}

/* ---------------------------------------------------------------------
   09 ヘッダー・フッター・試作の帯（ロゴは画像・大きさ・置き場所とも現状のまま）
   --------------------------------------------------------------------- */
/* 試作の帯（.proto）と、ヘッダーの枠・高さ・下線には手を入れない（ロゴの位置を1pxも動かさないため）。
   変えるのは、ロゴの右に並ぶナビの文字だけ */
.r77-nav { display: flex; align-items: center; gap: 4px 16px !important; }
.r77-nav a,
.r98-nav-group > summary {
  flex-direction: row;
  min-height: 44px;
  padding: 8px 4px;
  border-radius: 2px;
  font-size: var(--r3-sub);
  font-weight: 500;
  letter-spacing: .06em;
  color: var(--ink);
}
.r77-nav a:hover, .r77-nav a:focus-visible, .r98-nav-group > summary:hover { background: transparent; color: var(--sea); }
.r77-nav > a:last-child {
  padding: 8px 20px;
  border-radius: 4px;
  background: var(--sea);
  color: var(--on-sea);
  font-weight: 700;
}
.r77-nav > a:last-child:hover, .r77-nav > a:last-child:focus-visible { background: var(--sea-2); color: var(--on-sea); }
.r77-nav > a[aria-current="page"]:not(:last-child), .r77-nav .r98-nav-panel a[aria-current="page"] { color: var(--sea); }
.r98-nav-group > summary::after { margin-left: 2px; color: var(--muted); }
.r98-nav-panel { top: calc(100% + 4px); min-width: 216px; padding: 8px; border-color: var(--line); background: var(--card); }
.r98-nav-panel a { padding: 8px 12px !important; font-size: var(--r3-sub); }
/* 開いた一覧の最後の項目まで「相談する」と同じ塗りになっていたのを、ほかの項目とそろえる */
.r77-nav .r98-nav-panel a:last-child { background: transparent; color: var(--ink); }
.r77-nav .r98-nav-panel a:hover, .r77-nav .r98-nav-panel a:focus-visible { background: var(--paper); color: var(--sea); }

.r77-mobile-menu summary { min-height: 44px; padding: 8px 12px; border-color: var(--line-strong); border-radius: 4px; color: var(--ink); font-size: var(--r3-sub); font-weight: 500; letter-spacing: .06em; }
.r77-mobile-menu nav { border-color: var(--line); }
.r77-mobile-menu a, .r77-mobile-menu .r98-nav-group > summary { font-size: var(--r3-sub); font-weight: 500; }

@media (max-width: 900px) {
  .r77-bottom { border-top-color: var(--line); }
  .r77-bottom a { min-height: 52px; font-size: var(--r3-note); font-weight: 500; letter-spacing: .06em; }
  .r77-bottom a + a { border-left: 1px solid var(--line); }
  .r77-bottom a:last-child { font-weight: 700; }
}

/* フッター：ロゴの位置を動かさないよう、上下の余白・段落の間・文字の大きさ・幅は元のまま */
footer.site-foot p { margin: 1em 0; }
.r80-footer-links { gap: 0; }
.r80-footer-links a { min-height: 44px; text-decoration: none; }
.r80-footer-links a:hover { text-decoration: underline; }

/* ---------------------------------------------------------------------
   10 トップ：第一画面（#r98-retailers）
   実写真はそのまま。屋号の添え書き（海産物問屋｜乾物の加工・卸し・販売｜福岡県久留米市）を
   罫線つきの一行に、見出しを明朝に、入口の箱を罫線の一覧にする
   --------------------------------------------------------------------- */
.r98-retailer { padding: 56px 0 40px; }
.r98-retail-grid { grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr); gap: 56px; align-items: start; }

/* 屋号の添え書き（会社のページでも同じ形で使う） */
.r98-what {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 0;
  margin: 0 0 32px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--line-strong);
  font-family: var(--font-head);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.6;
  letter-spacing: .14em;
  color: var(--ink);
}
.r98-what span + span::before {
  content: "";
  display: inline-block;
  width: 1px;
  height: 1em;
  margin: 0 1.1em 0 1em;
  background: var(--line-strong);
  vertical-align: -.12em;
}
.r98-company > .r98-what { margin: 24px 0 0; }

.r98-title { display: block; color: var(--ink); }
.r98-title h1 { margin: 0; font-weight: 600; }
.r98-lead { margin: 24px 0 0; font-size: var(--r3-body); line-height: 1.9; color: var(--ink-2); }

/* 頼めること：箱を並べず、罫線の一覧にする */
.r98-services { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 32px; margin: 32px 0 0; border-top: 1px solid var(--line-strong); }
.r98-services a {
  position: relative;
  display: block;
  min-height: 0;
  padding: 16px 32px 16px 0;
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  background: transparent;
}
.r98-services a::after {
  content: "→";
  position: absolute;
  right: 4px;
  top: 16px;
  color: var(--sea);
  font-size: var(--r3-sub);
}
.r98-services li { display: flex; }
.r98-services li > a { flex: 1; }
.r98-services a:hover { background: transparent; border-bottom-color: var(--sea); }
.r98-services strong {
  font-family: var(--font-head);
  font-size: var(--r3-h3);
  font-weight: 600;
  line-height: 1.6;
  letter-spacing: .05em;
  font-feature-settings: "palt" 1;
  color: var(--ink);
}
.r98-services a:hover strong { color: var(--sea); }
.r98-services small { margin-top: 2px; color: var(--muted); letter-spacing: .02em; }
.r98-services-note { margin: 12px 0 0; }
.r98-hero-actions { gap: 16px 32px; margin-top: 32px; }

.r98-aside { gap: 24px; }
.r98-work img, .r98-retailer .r98-work img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; background: var(--paper-2); }
.r98-work figcaption { padding-top: 8px; color: var(--muted); }

/* 社長のごあいさつ：箱をやめ、上下の罫線だけにする */
.r98-person {
  gap: 16px;
  min-height: 0;
  padding: 16px 4px 16px 0;
  border: 0;
  border-top: 1px solid var(--line-strong);
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  background: transparent;
}
.r98-person:hover { border-bottom-color: var(--sea); }
.r98-person img { width: 56px; border-radius: 2px; }
.r98-person strong {
  margin-bottom: 0;
  font-family: var(--font-head);
  font-size: var(--r3-body);
  font-weight: 600;
  letter-spacing: .05em;
  color: var(--ink);
}
.r98-person:hover strong { color: var(--sea); }
.r98-person p { margin: 0; font-size: var(--r3-note); line-height: 1.7; color: var(--muted); }
.r98-person span:last-child { font-size: var(--r3-sub); }

/* 主な入口：角丸の札を並べず、罫線の下の文字の並びにする */
.r80-quick, .r98-retailer .r80-quick { display: flex; flex-wrap: wrap; gap: 0 32px; margin: 48px 0 0; padding-top: 8px; border-top: 1px solid var(--line); }
.r80-quick a, .r98-retailer .r80-quick a {
  min-height: 44px;
  padding: 8px 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--ink-2);
  font-size: var(--r3-sub);
  font-weight: 500;
  letter-spacing: .04em;
}
.r80-quick a:hover { color: var(--sea); text-decoration: underline; text-underline-offset: .3em; }

@media (max-width: 900px) {
  .r98-retailer { padding: 24px 0 24px; }
  .r98-retail-grid { grid-template-columns: 1fr; gap: 16px; }
  .r98-what { order: 1; margin: 0; padding-bottom: 12px; font-size: 12.5px; letter-spacing: .06em; }
  .r98-what span + span::before { margin: 0 .7em 0 .6em; }
  .r98-retailer .r98-work img { height: auto; aspect-ratio: 16 / 9; }
  .r98-title { margin-top: 8px; }
  .r98-lead { margin: 0; font-size: var(--r3-body); }
  .r98-services { margin: 8px 0 0; gap: 0 16px; }
  .r98-services a { min-height: 0; padding: 12px 20px 12px 0; }
  .r98-services a::after { top: 12px; right: 0; }
  .r98-services strong { font-size: var(--r3-body); }
  .r98-services-note { margin: 0; font-size: 13px; }
  .r98-hero-actions { gap: 8px; margin-top: 8px; }
  .r98-main-cta { min-height: 52px; font-size: var(--r3-body); margin-top: 0; }
  .r98-person { margin-top: 8px; padding: 12px 4px 12px 0; }
  .r98-person strong { font-size: var(--r3-body); }
  .r98-retailer .r80-quick { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; margin-top: 24px; padding-top: 0; }
  .r98-retailer .r80-quick a { flex-direction: row; justify-content: flex-start; min-height: 44px; padding: 8px 0; border-bottom: 1px solid var(--line); font-size: var(--r3-sub); line-height: 1.5; text-align: left; }
}
@media (max-width: 420px) {
  .r80-quick a, .r80-quick a:nth-child(1), .r80-quick a:nth-child(2) { grid-column: auto; }
}
@media (max-width: 380px) {
  .r98-what { letter-spacing: .02em; }
  .r98-what span + span::before { margin: 0 .5em; }
}
@media (max-width: 350px) {
  .r98-services { grid-template-columns: 1fr; }
}

/* ---------------------------------------------------------------------
   11 トップ：各セクション（順番と機能はそのまま、見た目だけ整える）
   --------------------------------------------------------------------- */
/* 直送のこと */
.r98-direct h2, .r98-direct h3 { display: block; }
.r98-direct h3 { margin: 0 0 24px; }
p.r98-pending { padding: 8px 0 16px; border-bottom-color: var(--line); }
.r98-direct-grid { gap: 24px; margin: 32px 0; }
.r98-direct-grid > article { padding: 32px; border-radius: 4px; }
.r98-direct-grid p { font-size: var(--r3-body); line-height: 1.9; }
.r98-node { gap: 8px; }
.r98-node strong { font-size: var(--r3-body); font-weight: 500; }
.r98-arrow { font-size: var(--r3-h3); color: var(--muted); }
.r98-time-flow .r98-node:nth-of-type(2) strong {
  font-family: var(--font-head);
  font-size: var(--r3-h2);
  font-weight: 600;
  letter-spacing: .05em;
}
.r98-time-flow, .r98-route-flow { gap: 16px; margin-bottom: 16px; padding: 16px 0; border-block: 1px solid var(--line); }
.r98-route-view .r98-route-flow { margin-bottom: 0; border: 0; padding: 0; }
.r98-route-answer { margin: 16px 0 8px; }
.r98-route-view { padding: 16px; border-radius: 4px; }
.r98-route-view.is-selected { outline: 0; border-color: var(--sea); }
.r98-route-switch { gap: 8px; }
.r98-route-switch button { min-height: 44px; padding: 8px 16px; border-radius: 4px; cursor: pointer; }
.r98-price-confirm { padding: 16px; border-radius: 4px; }
.r98-direct-grid summary, .r98-source summary { font-size: var(--r3-sub); }
.r98-direct-products { margin-left: 32px; }
@media (max-width: 900px) {
  .r98-direct-grid > article { padding: 24px 16px; }
  .r98-direct-products { margin-left: 0; }
  .r98-time-flow, .r98-route-flow { gap: 8px; }
}
@media (max-width: 350px) {
  .r98-node strong { font-size: var(--r3-sub); }
}

/* 使い道から商品へ進む一行 */
.r98-top { gap: 8px 16px; padding: 16px 0; border: 0; border-block: 1px solid var(--line); border-radius: 0; background: transparent; font-size: var(--r3-sub); }

/* 乾物の袋詰め、お店の商品づくり（案内係・ラベルの見本） */
.r80-hero-grid { gap: 48px; }
.r80-intro > h2 { margin: 0 0 24px; }
.r80-work-photo { margin: 0 0 24px; }
.r80-work-photo img { height: auto; aspect-ratio: 16 / 9; }
.r80-work-photo figcaption { margin-top: 8px; }
.r80-intro #r75-assistant { margin: 0 0 16px; }
.r80-intro .r75-guide-content { padding: 16px; }
.r80-label { padding: 32px; }
.r80-label-preview { gap: 16px; padding: 16px 0; }
.r80-label-paper { border-color: var(--line-strong); }
.r80-label-paper span, .r80-label-paper strong { font-family: var(--font-head); letter-spacing: .05em; }
.r80-controls { gap: 8px 16px; margin-top: 16px; }
.r75-guide summary { min-height: 48px; padding: 8px 16px; font-size: var(--r3-body); }
.r75-guide-result { padding: 16px; }
@media (max-width: 900px) { .r80-hero-grid { gap: 32px; } }
@media (max-width: 420px) { .r80-label { padding: 16px; } }

/* 写真で、工場の仕事を見る */
.r82-stage { gap: 40px; align-items: start; }
.r82-photo-button { background: var(--paper-2); }
.r82-photo-button img { height: auto; aspect-ratio: 16 / 9; object-fit: cover; }
.r82-stage figcaption { margin-top: 8px; }
.r82-zoom { min-height: 40px; padding: 4px 12px; border-color: var(--line-strong); font-size: var(--r3-note); font-weight: 500; }
.r82-story h3 { margin: 0 0 16px; }
.r82-question { margin: 24px 0 16px; padding-left: 16px; border-left-width: 1px; font-weight: 500; }
.r82-boundary { margin-top: 24px; }
.r82-more { margin-top: 32px; padding-top: 16px; }
@media (max-width: 900px) {
  .r82-stage { gap: 24px; }
  .r82-photo-button img { max-height: none; min-height: 0; }
}

/* 使い道から、商品を選ぶ */
.r75-photo-story:has(.r98-scenes) { padding-top: var(--r3-sec); }
:root .block .r98-scenes { padding: 0 0 48px; }
.r98-heading { display: block; }
.r98-heading h2 { margin: 0 0 24px; }
.r98-scene-layout { gap: 32px; }
.r98-scene-options { gap: 8px; }
.r98-scene-options legend { margin-bottom: 16px; font-size: var(--r3-sub); }
.r98-scene-choice { min-height: 56px; padding: 12px 16px; border-radius: 4px; font-size: var(--r3-body); font-weight: 500; }
.r98-scene-choice:has(input:checked) { padding: 11px 15px; }
.r98-result-title { gap: 16px; margin: 0 0 16px; }
.r98-result-title .r98-arrow { display: none; }
.r98-product-list { gap: 16px; }
.r98-product { padding: 24px; border-radius: 4px; }
.r98-product h3 { margin: 0 0 8px; }
.r98-photo-slot { padding: 16px 8px; margin: 8px 0; border-color: var(--line); }
.r98-group-photo { margin: 24px 0 8px; padding: 16px; border-radius: 4px; }
.r75-story-grid { gap: 16px; }
.r75-story-grid figcaption { padding: 12px 16px; font-size: var(--r3-sub); }
.r75-story-actions { gap: 0 32px; margin-top: 16px; }
.r75-story-actions a, .r75-explore a, .r75-method-nav a {
  min-height: 48px;
  padding: 8px 0;
  border: 0;
  border-bottom: 1px solid var(--line-strong);
  background: transparent;
  font-size: var(--r3-sub);
}
.r75-story-actions a:hover, .r75-method-nav a:hover { border-bottom-color: var(--sea); }

/* 仕入れから、商品へ（二つの目・年表） */
.eye .body { padding: 24px; }
.eye .tag { margin-bottom: 8px; font-size: var(--r3-note); letter-spacing: .14em; }
.eye ul { margin: 8px 0 0; }
.eye li { margin: 4px 0; font-size: var(--r3-sub); line-height: 1.8; }
.eye li b { font-weight: 700; }
.photos2 { gap: 1px; background: var(--line); }
.photos2 .photo-unit { background: var(--card); }
.timeline { margin-top: 32px; border-left-width: 1px; }
.timeline li { font-size: var(--r3-sub); line-height: 1.7; }
.timeline li::before { left: -6px; top: .7em; width: 9px; height: 9px; border-width: 1px; background: var(--sea); }
.timeline .y { font-family: var(--font-head); font-size: var(--r3-h2); font-weight: 600; letter-spacing: .04em; line-height: 1.3; }
@media (min-width: 900px) {
  .timeline { border-left: 0; border-top-width: 1px; }
  .timeline li { padding: 24px 16px 0 0; }
  .timeline li::before { left: 0; top: -6px; }
}

/* 煮干しの見分け方（3問） */
.q { padding: 24px; gap: 16px; }
.q .ask { font-family: var(--font-head); font-size: var(--r3-h3); font-weight: 600; letter-spacing: .05em; line-height: 1.6; }
.pair { gap: 8px; }
.pair button { border-width: 1px; padding: 8px; }
.pair button[aria-pressed="true"] { border-color: var(--sea); }
.pair .lbl { font-size: var(--r3-sub); font-weight: 500; }
.reveal { padding-top: 16px; line-height: 1.8; }

/* 40の目の札：絵をやめ、番号・題・一文の3段にする */
.tile { padding: 16px; gap: 4px; }
.tile .g { margin-bottom: 4px; font-size: var(--r3-note); font-weight: 500; letter-spacing: .12em; }
.tile h3 { margin: 0; }
.tile .see { color: var(--ink-2); line-height: 1.7; }
.tile summary { min-height: 40px; font-size: var(--r3-sub); }
.tile dt { font-size: var(--r3-note); }
.r87-next { margin-top: 8px; padding-top: 8px; font-size: var(--r3-sub); }
@media (max-width: 600px) { .tile { padding: 12px; } }

/* 乾物にも、時間がある（流れの一覧は、絵をやめて番号と言葉にする） */
.life { gap: 8px; counter-reset: r3life; }
.life li { counter-increment: r3life; padding: 16px; border-radius: 4px; font-size: var(--r3-sub); line-height: 1.7; }
.life li::before {
  content: counter(r3life, decimal-leading-zero);
  display: block;
  margin-bottom: 4px;
  font-size: var(--r3-note);
  font-weight: 500;
  letter-spacing: .12em;
  font-variant-numeric: tabular-nums;
  color: var(--muted);
}
.life li.ours::before { color: var(--sea); }
.life b { font-family: var(--font-head); font-size: var(--r3-h2); font-weight: 600; letter-spacing: .05em; line-height: 1.4; margin: 0 0 4px; }
.life .st { font-size: var(--r3-note); letter-spacing: .08em; }
.card .body { padding: 24px; }
.card .body h3 { margin: 0 0 8px; }

/* 使い道から選ぶ・商品の袋 */
.products { gap: 16px; margin-top: 32px; }
.products figure { padding: 8px; }
.products figcaption { margin-top: 8px; }
.allergy { margin-top: 16px; padding: 12px 16px; font-size: var(--r3-sub); line-height: 1.8; }
.card .allergy { font-size: var(--r3-sub); padding: 8px 12px; }

/* これまでの取組み（暗い地） */
.reasons { gap: 32px; }
.reason { padding-top: 16px; }
.reason .n { font-family: var(--font-head); font-size: var(--r3-h1); font-weight: 400; margin-bottom: 8px; }

/* お店で売る・自分のブランドでつくる */
.r98-paths { gap: 24px; }
.r98-path { gap: 16px; padding: 24px 32px; border-radius: 4px; font-family: var(--font-head); font-size: var(--r3-h3); font-weight: 600; letter-spacing: .05em; color: var(--ink); }
.r98-path:hover { border-color: var(--sea); color: var(--sea); }
.r98-path small { margin-bottom: 4px; font-family: var(--font-body); letter-spacing: .08em; color: var(--muted); }
@media (max-width: 900px) { .r98-paths { gap: 16px; } .r98-path { padding: 16px 24px; font-size: var(--r3-body); } }

/* 会社の要約・掲載されている商品 */
.r98-company-summary { gap: 48px; }
.r98-company-summary dt { font-size: var(--r3-sub); font-weight: 500; color: var(--muted); }
.r98-company-summary figure { padding: 0; border: 0; background: transparent; }
.r98-company-summary img { max-height: none; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 2px; }
.r98-company-more { padding: 16px 0 8px; }
.r98-catalog-category { padding: 16px 0; border-bottom-color: var(--line); }
.r98-catalog-category summary { gap: 8px; font-size: var(--r3-body); }
.r98-catalog-category ul { gap: 8px 16px; }
.r98-catalog-category li { padding: 12px 16px; }
@media (max-width: 800px) { .r98-company-summary { gap: 24px; } }

/* ---------------------------------------------------------------------
   12 ほかのページ：相談（oem）・40の目・だし・選別・卸・会社・ロゴ
   --------------------------------------------------------------------- */
/* 相談 */
.oem-hero-grid { gap: 48px; }
.pick-h { font-size: var(--r3-sub); margin: 0 0 8px; }
.purpose { gap: 8px; }
.purpose a { padding: 16px 48px 16px 16px; border-width: 1px; }
.purpose a:hover { border-color: var(--sea); }
.purpose b { font-family: var(--font-head); font-size: var(--r3-h3); font-weight: 600; letter-spacing: .05em; }
.purpose span { font-size: var(--r3-sub); }
.oem-product-proof { gap: 8px; margin-top: 24px; }
.r80-terms-grid { gap: 24px; margin-top: 24px; }
.r80-terms-grid > section { padding: 24px; }
.r80-terms-grid h3 { margin: 0 0 16px; }
.r80-term-rows > div { grid-template-columns: 6em 1fr; gap: 16px; padding: 12px 0; }
.r80-term-rows dt { font-size: var(--r3-sub); }
.r80-pending-rows li { padding: 16px 0; }
.r85-rows b { margin-bottom: 8px; }
.flowmap li { padding: 16px 16px 16px 56px; }
.flowmap li::before { left: 16px; top: 16px; border-width: 1px; border-radius: 2px; font-size: var(--r3-sub); font-variant-numeric: tabular-nums; }
.flowmap li.here { border-width: 1px; border-color: var(--sea); }
.flowmap b { font-family: var(--font-head); font-weight: 600; letter-spacing: .05em; }
.flowmap .pin { font-size: var(--r3-note); padding: 0 8px; }
@media (min-width: 900px) {
  .flowmap li { padding: 56px 16px 16px; }
  .flowmap li::before { left: 16px; top: 16px; }
  .flowmap .pin { left: 52px; top: 18px; }
}
.gate .body { padding: 16px 24px 24px; }
.gate h3 { margin: 0 0 4px; }
.gate p { margin: 0 0 8px; font-size: var(--r3-sub); line-height: 1.8; }
.hygiene { padding: 24px; }
.hygiene h3 { margin: 0 0 8px; }
.photos-strip { gap: 16px; }
.pricebox { padding: 24px; }
.sheetform { gap: 16px; }
.sheetform fieldset { padding: 16px 24px; }
.sheetform legend { font-family: var(--font-head); font-size: var(--r3-h3); font-weight: 600; letter-spacing: .05em; }
.sheetform .req { font-family: var(--font-body); font-size: var(--r3-note); letter-spacing: .04em; }
.sheetform .sub { font-size: var(--r3-sub); }
.pairrow .und { font-size: var(--r3-sub); }
.sheetout { padding: 24px 32px; }
.sheetout dt { font-size: var(--r3-sub); }
.faq { gap: 8px; }
.faq details { padding: 0 24px; }
.faq summary { min-height: 56px; font-weight: 500; }
.faq summary::before { font-size: var(--r3-h3); }
@media (max-width: 600px) {
  .sheetform fieldset { padding: 16px; }
  .sheetout { padding: 16px; }
  .faq details { padding: 0 16px; }
}

/* 40の目 */
.eye-shortcuts { gap: 16px; margin: 24px 0; }
.eye-shortcuts a { min-height: 88px; padding: 16px 24px; border-color: var(--line); border-left: 1px solid var(--line); font-family: var(--font-head); font-size: var(--r3-h3); font-weight: 600; letter-spacing: .05em; color: var(--ink); }
.eye-shortcuts a span { font-family: var(--font-body); font-size: var(--r3-note); font-weight: 400; letter-spacing: .04em; color: var(--muted); }
.eye-shortcuts a:hover, .eye-shortcuts a:focus-visible { border-color: var(--sea); background: var(--card); color: var(--sea); }
.matstrip { gap: 16px; }
.matstrip figcaption { padding: 4px 16px 16px; }
.r98-after { gap: 16px; margin-top: 48px; padding-top: 24px; }
.r98-after p { font-size: var(--r3-sub); }
@media (max-width: 600px) { .eye-shortcuts { gap: 8px; } .eye-shortcuts a { min-height: 64px; } }

/* だし */
.r75-dashi-intro { gap: 48px; }
.r75-recipes { gap: 16px; margin-top: 48px; }
.r75-recipe { padding: 32px; border-radius: 4px; }
.r75-recipe h2 { margin: 0 0 16px; }
.r75-amount { font-size: var(--r3-body); }
.r75-safety { margin: 24px 0; padding: 16px; border-left-width: 2px; }
.r75-method-nav { gap: 0 32px; margin-top: 24px; }
.r75-dashi-next { padding-top: 16px; }
@media (max-width: 620px) { .r75-dashi-intro { gap: 24px; } .r75-recipe { padding: 24px 16px; } }

/* 選別 */
.steps { gap: 0 24px; margin-top: 16px; }
.steps li { gap: 8px; padding: 8px 0; border: 0; border-bottom: 2px solid transparent; border-radius: 0; background: transparent; font-size: var(--r3-sub); }
.steps li[aria-current="step"] { border-bottom-color: var(--sea); }
.steps .n { width: 24px; height: 24px; border-radius: 2px; font-size: var(--r3-note); font-variant-numeric: tabular-nums; }
.round-no { font-size: var(--r3-sub); }
.task { font-size: var(--r3-h3); }
.tray-tools { margin: 16px 0; }
.tray-tools .howto, .count { font-size: var(--r3-sub); }
.item { border-width: 1px; }
.game-actions { gap: 8px 16px; margin-top: 16px; }
.feedback { margin-top: 16px; padding: 16px 24px; border-left-width: 2px; }
.feedback .fb-main { font-size: var(--r3-body); }
.draft-real-reference { column-gap: 16px; margin: 16px 0 24px; }

/* 卸価格のご案内 */
.r98-price-page h1 { display: block; margin: 0 0 16px; }
.r98-mock-note { padding: 12px 16px; margin: 24px 0; border-radius: 4px; font-size: var(--r3-sub); }
.r98-steps { gap: 8px; margin: 32px 0 24px; }
.r98-steps button { min-height: 56px; border-radius: 4px; font-size: var(--r3-sub); font-weight: 500; }
.r98-steps button[aria-current="step"] { border-width: 1px; border-color: var(--sea); }
.r98-preview { padding: 32px; border-radius: 4px; }
.r98-preview h2 { display: block; margin: 0 0 16px; }
.r98-preview dl { gap: 12px 24px; margin: 24px 0; }
.r98-preview dt { font-size: var(--r3-sub); font-weight: 500; color: var(--muted); }
.r98-mail { padding: 24px; border-left-width: 2px; }
.r98-table th, .r98-table td { padding: 16px 12px; border-bottom-color: var(--line); }
.r98-table th { font-weight: 500; color: var(--muted); }
.r98-controls { margin-top: 24px; padding: 8px 0; border-top-color: var(--line); }
.r98-controls button { min-height: 48px; padding: 8px 24px; border-color: var(--line-strong); font-size: var(--r3-sub); font-weight: 700; }
.r98-exit { gap: 16px 32px; margin-top: 24px; font-size: var(--r3-sub); }
@media (max-width: 600px) { .r98-preview { padding: 24px 16px; } .r98-price-page { padding-top: 24px; } }

/* 会社 */
.r98-company h1, .r98-company h2 { display: block; }
.r98-company h2 { margin: 0 0 32px; }
.r98-company-intro { gap: 56px; padding: 40px 0 56px; }
.r98-company-intro img { border-radius: 2px; }
.r98-official-lead { font-family: var(--font-head); font-size: var(--r3-h3); font-weight: 600; letter-spacing: .05em; line-height: 1.8; }
.r98-company-intro nav, .r98-message-layout nav { gap: 8px; margin: 24px 0; }
.r98-company-intro nav a, .r98-message-layout nav a { padding: 8px 16px; border-radius: 4px; background: transparent; font-size: var(--r3-sub); font-weight: 500; }
.r98-company-intro nav a:hover, .r98-message-layout nav a:hover { border-color: var(--sea); }
.r98-message-layout { gap: 48px; }
.r98-quote-part { padding: 24px; margin: 0 0 16px; border-left-width: 1px; border-left-color: var(--line-strong); }
.r98-care-cards { gap: 16px; }
.r98-care-cards article, .r98-business-cards article { padding: 24px; border-radius: 4px; background: var(--card); }
.r98-care-cards h3, .r98-business-cards h3 { margin: 0 0 8px; }
.r98-timeline { gap: 16px; margin: 32px 0 24px; }
.r98-timeline a { gap: 4px; padding: 16px 24px; border-radius: 4px; background: var(--card); }
.r98-timeline a:hover { border-color: var(--sea); }
.r98-timeline strong { font-family: var(--font-head); font-size: var(--r3-h2); font-weight: 600; letter-spacing: .04em; line-height: 1.4; }
.r98-timeline span { font-size: var(--r3-sub); font-weight: 500; }
.r98-history-details { padding: 24px; margin-top: 24px; border-radius: 4px; background: var(--card); }
.r98-history-details li { padding: 16px 0; }
.r98-role-flow { gap: 32px; margin: 32px 0; }
.r98-role-flow li { padding: 24px; background: var(--card); }
.r98-role-flow h3 { margin: 8px 0; }
.r98-business-cards { gap: 24px; }
.r98-profile-row { grid-template-columns: 12em 1fr; gap: 24px; padding: 16px 0; border-bottom-color: var(--line); }
.r98-profile dt { font-size: var(--r3-sub); font-weight: 500; color: var(--muted); }
.r98-principle { padding: 24px; border-left-width: 1px; font-family: var(--font-head); letter-spacing: .05em; }
.r98-access-grid { gap: 40px; }
.r98-address { font-family: var(--font-head); font-size: var(--r3-h3); font-weight: 600; letter-spacing: .05em; }
.r98-next { gap: 16px 32px; font-size: var(--r3-sub); }
@media (max-width: 800px) {
  .r98-company-intro { gap: 24px; padding: 32px 0 40px; }
  .r98-message-layout { gap: 16px; }
  .r98-profile-row { grid-template-columns: 8em 1fr; gap: 16px; }
  .r98-quote-part { padding: 16px; }
  .r98-care-cards article, .r98-business-cards article { padding: 16px; }
}
@media (max-width: 420px) {
  .r98-profile-row { grid-template-columns: 1fr; gap: 4px; }
  .r98-profile dd { padding-left: 0; }
  /* 狭い幅では、写真の横に目次を置く既存の並びを保つ（余白は既存の値に戻す） */
  .r98-company-intro nav { margin: 0; }
  .r98-message-layout nav { margin: 4px 0 12px; }
  .r98-company-intro nav a { padding: 8px; }
}

/* ロゴのページ：ロゴの見本の枠・大きさ・間隔には手を入れない（書体と見出しの大きさだけ、全ページ共通の指定がかかる） */

/* ---------------------------------------------------------------------
   13 動き：セクションの出現だけ（フェード＋12px、500ms、ease-out、1回）。r3-foundation.js が付ける
   スクリプトが動かないとき・動きを減らす設定のときは、何も隠さない
   --------------------------------------------------------------------- */
.r3-reveal { opacity: 0; transform: translateY(12px); transition: opacity .5s ease-out, transform .5s ease-out; }
.r3-reveal.r3-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .r3-reveal { opacity: 1; transform: none; transition: none; }
}
@media print {
  .r3-reveal { opacity: 1 !important; transform: none !important; }
}