/* Web版の土台。ページの枠、タブ、入力の部品など、Streamlitが用意していた部分をここで作る。
   見た目の細部(カード、注意書き、カレンダーなど)は、Streamlit版から引き継いだ規則(carried.css)を使う。
   site.css は build_css.py で base.css + carried.css + after.css をつないで作る。 */

/* タブごとの色。開いているページはタブと同じ色になる */
:root, .theme-search, .theme-home, .theme-contents { --page: #c4541f; --page-cta: #d9622b; --page-deep: #b4521f; --page-soft: #fff1e4; --page-select: #fbd4b4; --heading: #5a3a26; --line: #d9622b; }
.theme-stock { --page: #8a6a2a; --page-cta: #8a6a2a; --page-deep: #6f5420; --page-soft: #f6efe0; --page-select: #e9dcc0; --heading: #6f5420; --line: #8a6a2a; }
.theme-learn { --page: #3a7196; --page-cta: #3a7196; --page-deep: #2c5f82; --page-soft: #e6f0f7; --page-select: #cde0ee; --heading: #2c5f82; --line: #3a7196; }
.theme-terms, .theme-privacy { --page: #6b5a4c; --page-cta: #6b5a4c; --page-deep: #5a3a26; --page-soft: #f4f1ea; --page-select: #e3dccf; --heading: #5a3a26; --line: #6b5a4c; }
.theme-home { --line: #6b5a4c; }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: #ffffff; color: #3f2c20; font-family: 'M PLUS Rounded 1c', 'Hiragino Maru Gothic ProN', 'Meiryo', sans-serif;
  font-size: 16px; line-height: 1.6; overflow-x: hidden; }
a { color: #b4521f; }
img { max-width: 100%; }
p { margin: 0 0 1rem; line-height: 1.8; }
h1, h2, h3, h4 { line-height: 1.3; margin: 0 0 .6rem; font-weight: 700; }
button, input, select, textarea { font: inherit; color: inherit; }
.icon { font-family: 'Material Symbols Rounded'; font-weight: normal; font-style: normal; font-size: 1.25em; line-height: 1; display: inline-block;
  vertical-align: -.22em; white-space: nowrap; direction: ltr; -webkit-font-feature-settings: 'liga'; font-feature-settings: 'liga'; }
.caption { margin: .3rem 0 .8rem; color: #8a7464; font-size: .82rem; line-height: 1.7; }
.caption a { color: #a86a4a; }
ul.bullets { margin: .2rem 0 1rem; padding-left: 1.3rem; }
ul.bullets li { margin: .2em 0; line-height: 1.8; }
strong { font-weight: 700; color: #3d2a1e; }

/* ページの枠 */
.site-header, .site-main, .site-footer { width: 100%; max-width: 1120px; margin: 0 auto; padding: 0 16px; }
.site-main { padding-top: 1rem; padding-bottom: 2rem; }
.with-side { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 3fr); gap: 24px; align-items: start; }
.main-column > :first-child { margin-top: 0; }

/* ロゴ */
/* ヘッダー(ロゴ・タブ・パンくず)は画面の上に固定する。
   JavaScriptが動くときは fixed にして、本文の上に同じ高さの余白を空ける(site.js が高さを測る)。
   下へスクロールしたら(body.is-scrolled)ロゴを小さくして、帯が画面を占めすぎないようにする */
.header-bar { position: sticky; top: 0; z-index: 900; background: #ffffff; transition: box-shadow .2s; }
.js .header-bar { position: fixed; left: 0; right: 0; }
.js body { padding-top: var(--header-full, 150px); }
html { scroll-padding-top: calc(var(--header-h, 150px) + 8px); }
.is-scrolled .header-bar { box-shadow: 0 2px 8px rgba(60, 40, 20, .12); }
.is-scrolled .site-brand { padding: 4px 0; }
.is-scrolled .site-logo img { height: 32px; }
.is-scrolled .site-tag { display: none; }

/* ご意見箱(ヘッダーの右上)。検索窓のような丸い1行の入力欄 */
.inquiry { position: relative; display: flex; align-items: center; width: min(320px, 100%); margin-left: auto; padding: 0 4px 0 12px;
  border: 1.5px solid #e3dccf; border-radius: 999px; background: #faf7f2; }
.inquiry:focus-within { border-color: var(--page); background: #ffffff; }
.inquiry-icon { color: #8a7464; font-size: 20px; }
.inquiry-input { flex: 1 1 auto; min-width: 0; height: 38px; padding: 0 6px; border: 0; background: transparent; font-size: 16px; outline: none; }
.inquiry-input::placeholder { color: #a8968a; font-size: .86rem; }
.inquiry-send { display: flex; align-items: center; justify-content: center; flex: none; width: 32px; height: 32px; border: 0; border-radius: 50%;
  background: var(--page-cta); color: #ffffff; cursor: pointer; }
.inquiry-send:hover { filter: brightness(.92); }
.inquiry-send .icon { font-size: 18px; }
.inquiry-trap { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
/* 入力中だけ、すぐ下に注意書きを出す。送信の結果も同じ場所に出す */
.inquiry-note, .inquiry-status { position: absolute; top: calc(100% + 6px); right: 0; z-index: 2; width: max(100%, 260px); padding: 6px 10px;
  border-radius: 8px; background: #3f2c20; color: #ffffff; font-size: .74rem; line-height: 1.5; }
.inquiry-note { display: none; }
.inquiry:focus-within .inquiry-note { display: block; }
.inquiry-status:empty { display: none; }
.inquiry-status.is-ok { background: #2e6a45; }
.inquiry-status.is-error { background: #a82a26; }
.inquiry-toggle { display: none; }
.is-scrolled .inquiry-input { height: 32px; }
.is-scrolled .inquiry-send { width: 28px; height: 28px; }

/* ロゴ: カレンダーの絵の右に「ひもちメモ」の文字を並べた画像(images/logo_horizontal.png) */
.site-brand { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; padding: 12px 0 10px; }
.site-logo { display: block; line-height: 0; }
.site-logo img { display: block; width: auto; height: 52px; }
.site-tag { font-size: .74rem; color: #6d5443; white-space: nowrap; }

/* タブ。カーソルを乗せると開き、押すと開いたまま固定する(押す操作は site.js) */
/* タブは、下のラインの後ろに少し潜らせる。メニュー(.tab-menu)だけはラインより手前に出す */
.site-nav { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 3px; max-width: 540px; margin-bottom: -3px; }
.tab-search { --tab: #d9622b; --tab-soft: #fbe0cd; --tab-deep: #a8481a; }
.tab-stock { --tab: #8a6a2a; --tab-soft: #efe5cf; --tab-deep: #6f5420; }
.tab-learn { --tab: #3a7196; --tab-soft: #d8e8f2; --tab-deep: #2c5f82; }
.tab { position: relative; min-width: 0; }
.tab-button { display: block; width: 100%; min-height: 36px; padding: 4px 2px; border: none; border-radius: 4px 4px 0 0; background: var(--tab-soft);
  color: var(--tab-deep); font-size: .88rem; font-weight: 700; line-height: 1.2; white-space: nowrap; cursor: pointer; }
.tab-button:hover { filter: brightness(.95); }
.tab-current .tab-button { background: var(--tab); color: #ffffff; }
.tab-menu { position: absolute; top: 100%; left: 0; z-index: 1001; display: none; flex-direction: column; width: 270px; padding: 6px;
  border: 1px solid #e3dccf; border-radius: 0 0 8px 8px; background: #ffffff; box-shadow: 0 6px 16px rgba(60, 40, 20, .16); }
.tab-learn .tab-menu { left: auto; right: 0; }
.tab-menu a { padding: 7px 8px; border-radius: 6px; color: #3f2c20; font-size: .9rem; line-height: 1.4; text-decoration: none; }
.tab-menu a:hover { background: var(--tab-soft); }
@media (hover: hover) { .tab:hover .tab-menu { display: flex; } .tab.closed .tab-menu { display: none; } }
.tab.open .tab-menu { display: flex; }

/* ラインとパンくず。画面の左右の端まで伸ばす */
.site-crumb { position: relative; z-index: 1; margin: 0 calc(50% - 50vw); padding: 0 calc(50vw - 50%); border-top: 5px solid var(--line); background: #f4f1ea; }
.crumb-inner { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 9px 0 7px; font-size: .82rem; line-height: 1.4; }
.crumb-inner a { color: #b4521f; text-decoration: none; }
.crumb-inner a:hover { text-decoration: underline; }
.crumb-home .icon { margin-right: 3px; color: #6d5443; font-size: 18px; }

/* フッター */
.site-footer { padding-bottom: 2rem; }
/* フッター: 左に正方形のロゴ(images/logo_emblem.png)、右にページの一覧 */
.footer-brand { display: block; line-height: 0; align-self: start; }
.footer-brand img { display: block; width: auto; height: 88px; }
.footer-groups { display: grid; grid-template-columns: auto repeat(3, minmax(0, 1fr)); gap: 16px 20px; margin-top: 2rem; padding-top: 18px; border-top: 1px solid #e3dccf; }
.footer-group { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.footer-group a, .footer-legal a { color: #6b5a4c; font-size: .8rem; line-height: 1.6; text-decoration: none; }
.footer-group a:hover, .footer-legal a:hover { text-decoration: underline; }
.footer-legal { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 20px; margin-top: 18px; }

/* ボタン */
.button { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 44px; padding: 6px 16px; border: 1px solid #cfc4b3;
  border-radius: 8px; background: #ffffff; color: #3f2c20; font-weight: 500; text-decoration: none; cursor: pointer; }
.button:hover { border-color: var(--page); color: var(--page-deep); }
.button.primary { border-color: var(--page-cta); background: var(--page-cta); color: #ffffff; }
.button.primary:hover { filter: brightness(.92); color: #ffffff; }
.button.wide { display: flex; width: 100%; margin: .5rem 0; }
.cta { display: flex; align-items: center; justify-content: center; gap: 6px; min-height: 46px; margin: .4rem 0; padding: 8px 16px; border-radius: 8px;
  background: var(--page-cta); color: #ffffff; font-weight: 500; text-decoration: none; }
.cta:hover { filter: brightness(.92); }
.chip { display: inline-flex; align-items: center; min-height: 36px; padding: 0 12px; border: 1px solid #e6cf8f; border-radius: 999px; background: #ffffff;
  color: #6d4a10; font-size: .86rem; text-decoration: none; }
.chip:hover { border-color: #c79a3a; background: #fff3d1; }

/* 入力欄 */
.text-input, .select { width: 100%; min-height: 44px; padding: 8px 12px; border: 1px solid #e3dccf; border-radius: 8px; background: #f7f4ee; font-size: 16px; }
.text-input:focus, .select:focus { outline: 2px solid var(--page); outline-offset: -1px; background: #ffffff; }
.field-label { display: block; margin: .6rem 0; font-size: .9rem; }
.field-label .text-input, .field-label .select { margin-top: 4px; }
.alert { margin: .6rem 0; padding: 12px 16px; border: 1px solid #e3dccf; border-radius: 8px; background: #ffffff; }
.alert-warning { border-color: #e8b52e; background: #fff8e3; color: #7a5a12; }
.alert-error { border-color: #c8342f; background: #fdecea; color: #a82a26; }
.alert-success { border-color: #7fb08f; background: #eef7f1; color: #2e6a45; }

/* 選択タイル(Streamlitの pills の代わり)。3列に並べ、選んだものを色で示す */
.tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; margin-bottom: .4rem; }
.tile { position: relative; display: block; cursor: pointer; }
.tile input { position: absolute; opacity: 0; pointer-events: none; }
.tile-face { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; min-height: 68px; height: 100%; padding: 6px 2px;
  border: 1px solid #e8dfd2; border-radius: 6px; background: #faf7f2; text-align: center; }
.tile:hover .tile-face { background: #f3ece2; border-color: #cfc4b3; }
.tile-text { font-size: .75rem; line-height: 1.25; letter-spacing: -.04em; }
.tile-icon { display: block; flex: none; width: 28px; height: 28px; background: #6b5a4c;
  -webkit-mask: var(--tile-icon) center / contain no-repeat; mask: var(--tile-icon) center / contain no-repeat; }
.tile-icon-wide { width: 58px; }
.tile input:checked + .tile-face { border: 2px solid var(--page); background: var(--page-select); }
.tile input:checked + .tile-face .tile-text { color: var(--page-deep); font-weight: 500; }
.tile input:checked + .tile-face .tile-icon { background: var(--page); }
.tile input:focus-visible + .tile-face { outline: 2px solid var(--page); outline-offset: 2px; }

/* 押すと開く欄(Streamlitの expander の代わり) */
details.fold { margin: .6rem 0; border: 1px solid #e3dccf; border-radius: 8px; background: #ffffff; }
details.fold > summary { padding: 10px 14px; cursor: pointer; font-size: .92rem; list-style: none; }
details.fold > summary::-webkit-details-marker { display: none; }
details.fold > summary::before { content: "expand_more"; margin-right: 6px; font-family: 'Material Symbols Rounded'; font-size: 1.2em; vertical-align: -.22em; display: inline-block; transition: transform .15s; transform: rotate(-90deg); }
details.fold[open] > summary::before { transform: none; }
.fold-body { padding: 4px 14px 12px; }

/* 保存期間チェックの入力欄 */
.menu-card { margin: .6rem 0; padding: 1rem; border: 1px solid #e3dccf; border-radius: 10px; background: #ffffff; }
.menu-form .button.primary { min-height: 48px; font-size: 1.05rem; }
.left-banner { display: flex; align-items: center; justify-content: center; gap: 6px; margin: .6rem 0; padding: 8px 10px; border: 1px solid #e3dccf; border-radius: 8px;
  background: #ffffff; color: #8a3524; font-size: .9rem; font-weight: 500; text-decoration: none; }
.left-banner:hover { background: #faf7f2; }

/* 判定結果: 左に結果、右に再判定の欄 */
.result-layout { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 3fr); grid-template-rows: auto 1fr;
  grid-template-areas: "main side" "more side"; gap: 0 24px; align-items: start; }
.result-main { grid-area: main; }
.result-side { grid-area: side; position: sticky; top: calc(var(--header-h, 0px) + 1rem); }
.result-more { grid-area: more; }
.result-card { --result: var(--page-cta); overflow: hidden; margin-bottom: .6rem; padding: 1rem; border: 3px solid var(--result); border-radius: 12px;
  background: var(--page-soft); box-shadow: 0 6px 18px rgba(120, 60, 20, .22); }
.result-card.result-stop { --result: #c8342f; background: #fdecea; }
.result-card .caption { color: #5f4a3a; }
.result-low .summary-risk { background: #fbf0cf; color: #7a5a12; }
.result-mid .summary-risk { background: #fde5c8; color: #8a4b1c; }
.result-high .summary-risk { background: #fbd9c6; color: #9a3c12; }
.result-stop .summary-risk { background: #fbdcd9; color: #b02a25; }
.metrics { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-bottom: .4rem; }
.metric { padding: 8px 12px; border: 2.5px solid #4a8fc0; border-radius: 10px; background: #ffffff no-repeat right 8px top 8px / 40px 40px;
  box-shadow: 0 3px 8px rgba(47, 111, 159, .25); }
.metric-label { color: #2f6f9f; font-size: .88rem; font-weight: 700; }
.metric-value { color: #b4521f; font-size: 1.9rem; font-weight: 500; line-height: 1.3; overflow-wrap: anywhere; }
.result-stop .metric-value { color: #c8342f; }
details.recheck { margin-bottom: .8rem; }
details.recheck > summary { padding-bottom: 4px; border-bottom: 2px solid var(--page); color: var(--page-deep); font-size: .98rem; font-weight: 700; cursor: pointer; list-style: none; }
details.recheck > summary::-webkit-details-marker { display: none; }
.menu-form.compact .menu-card { padding: .5rem; }
.menu-form.compact .field-title { margin: 0 0 4px; padding: 2px 6px; font-size: .72rem; }
.menu-form.compact .field-note { font-size: .6rem; }
.menu-form.compact .tiles { gap: 3px; }
.menu-form.compact .tile-face { min-height: 44px; padding: 3px 1px; }
.menu-form.compact .tile-text { font-size: .6rem; letter-spacing: -.06em; line-height: 1.15; }
.menu-form.compact .tile-icon { width: 15px; height: 15px; }
.menu-form.compact .tile-icon-wide { width: 37px; }
.menu-form.compact .text-input { min-height: 2.2rem; padding: 4px 8px; font-size: 16px; }

/* 細菌のタイル: 1つ選ぶと下に説明が出る */
.microbe-radio { position: absolute; opacity: 0; pointer-events: none; }
.microbe-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; margin: .6rem 0 4px; }
.microbe-tile { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 2px; min-height: 88px; padding: 6px 3px;
  border: 1px solid #e8dfd2; border-radius: 6px; background: #faf7f2; font-size: .75rem; text-align: center; cursor: pointer; }
.microbe-tile img { width: 46px; height: 46px; }
.microbe-panel { display: none; }

/* 右の列 */
.side-rail { display: flex; flex-direction: column; gap: 2px; padding: 12px 14px; border: 1px solid #e3dccf; border-radius: 12px; background: #ffffff; }
.side-rail a { padding: 7px 4px; border-radius: 6px; color: #3f2c20; font-size: .9rem; line-height: 1.4; text-decoration: none; }
.side-rail a:hover { background: var(--page-soft); }
.side-rail a .icon { margin-right: 6px; color: #6b5a4c; }
.rail-title { margin: 8px 0 .6rem; }

/* トップの簡単チェック。検索する枠は薄い黄色 */
.quick-card { margin-bottom: 1rem; padding: 1rem; border: 2px solid #f4c64f; border-radius: 10px; background-color: #fff8e1;
  background-image: radial-gradient(circle, #ffeaa8 5px, transparent 5.5px), radial-gradient(circle, #ffeaa8 5px, transparent 5.5px);
  background-size: 44px 44px; background-position: 0 0, 22px 22px; }
.quick-top { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: 16px; align-items: center; }
.quick-form .text-input { background: #ffffff; }
.quick-form .button { min-height: 44px; font-size: 1.05rem; }
.quick-help { padding: 10px 14px 12px; border: 1.5px solid #dccdb4; border-radius: 12px; background: #f5f2ec; box-shadow: 0 3px 8px rgba(90, 65, 30, .16); }
.quick-examples { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 1rem; }
.quick-examples .quick-label { flex-basis: 100%; margin-bottom: .3rem; }
.quick-result { margin-top: .6rem; }
.quick-result .portion-tile { background: #ffffff; }
.quick-result .caption { color: #5f4a3a; }
.quick-category { margin: .6rem 0; }
.quick-more { display: block; margin-top: .6rem; color: var(--page-deep); font-size: .9rem; text-align: center; }
details.quick-save > summary { list-style: none; }
details.quick-save > summary::-webkit-details-marker { display: none; }
.quick-image { max-width: 420px; margin: .4rem auto 0; }
.quick-image img { display: block; width: 100%; border: 1px solid #e8dfd2; border-radius: 8px; }

/* 小さな部品 */
.alert-info { border-color: #b9d0e2; background: #eef5fb; color: #2c5f82; }
.js .no-js-only { display: none; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.button.small { min-height: 34px; padding: 2px 10px; font-size: .88rem; }
.field-hint { margin-left: 8px; color: #8a7464; font-size: .76rem; }
.check-line { display: flex; align-items: flex-start; gap: 8px; margin: .6rem 0; font-size: .92rem; line-height: 1.6; cursor: pointer; }
.check-line input { flex: none; width: 18px; height: 18px; margin-top: 3px; accent-color: var(--page); }
.form-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 10px; align-items: end; }
.form-pair .button { width: 100%; }
.small-form { margin: .6rem 0; padding: 4px 16px 12px; border: 1px solid #e3dccf; border-radius: 10px; background: #ffffff; }
.legal-heading { margin: .4rem 0 1rem; color: var(--heading); font-size: 1.6rem; }
.tile-symbol { color: #6b5a4c; font-size: 26px; }
.tile input:checked + .tile-face .tile-symbol { color: var(--page); }

/* 複数選べる札(原材料など) */
.picks { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 .6rem; }
.pick { position: relative; cursor: pointer; }
.pick input { position: absolute; opacity: 0; pointer-events: none; }
.pick span { display: inline-flex; align-items: center; min-height: 34px; padding: 3px 12px; border: 1px solid #e3dccf; border-radius: 999px;
  background: #f7f4ee; font-size: .84rem; line-height: 1.3; }
.pick:hover span { border-color: #cfc4b3; }
/* 選んだ札は、カレンダーの色の見本と紛らわしくないよう、どの色とも違う落ち着いた色にする */
.pick input:checked + span { border-color: #6b5a4c; background: #ece6dc; color: #3f2c20; font-weight: 500; }
.pick input:checked + span::before { content: "✓"; margin-right: 4px; font-weight: 700; }
.pick input:focus-visible + span, .seg input:focus-visible + span, .swatch input:focus-visible + span { outline: 2px solid var(--page); outline-offset: 2px; }

/* 横に並べた押しボタン型の選択 */
.segs { display: flex; margin: 4px 0 .6rem; }
.seg { position: relative; flex: 1 1 0; min-width: 0; cursor: pointer; }
.seg input { position: absolute; opacity: 0; pointer-events: none; }
.seg span { display: flex; align-items: center; justify-content: center; min-height: 40px; padding: 4px 8px; border: 1px solid #e3dccf;
  background: #ffffff; font-size: .88rem; text-align: center; line-height: 1.3; }
.seg + .seg span { border-left: none; }
.seg:first-child span { border-radius: 8px 0 0 8px; }
.seg:last-child span { border-radius: 0 8px 8px 0; }
.seg input:checked + span { border-color: var(--page); background: var(--page-soft); color: var(--page-deep); font-weight: 700;
  box-shadow: inset 0 0 0 1px var(--page); }

/* 料理別の保存ガイドの一覧。カード全体を押せる */
.guide-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: .4rem; }
.guide-card { display: flex; flex-direction: column; overflow: hidden; padding: 15px; border: 1px solid #e3dccf; border-radius: 8px;
  background: #ffffff; color: #3f2c20; text-decoration: none; }
.guide-card:hover { border-color: var(--page); }
.guide-card:hover .guide-photo { filter: brightness(1.05); }
.guide-card .cta { margin: auto 0 0; }

/* 保存カード */
.card-layout { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-items: start; }
.card-layout .small-form { margin-top: 0; }
.card-preview { display: block; width: 100%; border: 1px solid #e8dfd2; border-radius: 8px; }
textarea.text-input { min-height: 0; resize: vertical; line-height: 1.6; }

/* 作り置きカレンダー: 左にカレンダー、右に入力欄 */
.plan-layout { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 16px; align-items: start; }
.plan-side { padding: 14px; border: 1px solid #e3dccf; border-radius: 12px; background: #fffaf4; }
.plan-box { margin: .4rem 0; padding: 4px 12px 8px; border: 1px solid #e3dccf; border-radius: 8px; background: #ffffff; }
/* 編集中はあおにして、追加(オレンジ)と見分けられるようにする */
.plan-editing { border: 2px solid #3a7196;
  --page: #3a7196; --page-cta: #3a7196; --page-deep: #2c5f82; --page-soft: #e6f0f7; --page-select: #cde0ee; }
.button.plan-update { border-color: #3a7196; background: #3a7196; }
.button.plan-edit { border-color: #b9d0e2; color: #2c5f82; }
.button.plan-edit:hover { border-color: #3a7196; background: #e6f0f7; color: #2c5f82; }
.cal-nav { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 6px; margin-bottom: 8px; }
.cal-nav-right { display: flex; justify-content: flex-end; gap: 6px; }
.plan-rows { display: flex; flex-direction: column; }
.plan-row { display: flex; align-items: center; gap: 6px; padding: 6px 0; border-bottom: 1px dashed #e8dfd2; }
.plan-row .plan-item { flex: 1 1 auto; }
.plan-row form { margin: 0; }
.plan-clear { margin-top: .8rem; }
.plan-clear > summary .icon { margin-right: 4px; }
/* 帯の色を選ぶ四角。選んだ色は外側に枠を付ける */
.swatches { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 .6rem; }
.swatch { position: relative; cursor: pointer; }
.swatch input { position: absolute; opacity: 0; pointer-events: none; }
.swatch > span { display: block; width: 30px; height: 30px; border: 2px solid #ffffff; border-radius: 6px; box-shadow: 0 0 0 1px #d8cfc2; }
.swatch:hover > span { filter: brightness(1.08); }
.swatch input:checked + span { box-shadow: 0 0 0 2px #3f2c20; }
/* ブログ形式の記事(予防のポイント、保存のしくみ) */
.article { font-size: 1rem; }
.article p { margin: 0 0 1.1rem; line-height: 2; }
/* 見出しは、<wbr> と句読点の位置でだけ改行する(言葉の途中で折り返さない) */
.art-title { margin: .4rem 0 .5rem; color: #3f2c20; font-size: clamp(1.4rem, 4.2vw, 1.85rem); line-height: 1.45;
  word-break: keep-all; overflow-wrap: anywhere; }
.art-h2 { word-break: keep-all; overflow-wrap: anywhere; }
.art-meta { display: flex; flex-wrap: wrap; gap: 4px 16px; margin-bottom: 1rem; color: #8a7464; font-size: .82rem; }
.art-meta .icon { margin-right: 3px; font-size: 1.1em; }
.art-eyecatch { display: flex; align-items: center; justify-content: center; margin: 0 0 1.2rem; padding: 18px; border-radius: 12px;
  background: var(--page); aspect-ratio: 16 / 8; overflow: hidden; }
.art-eyecatch img { width: auto; max-width: 92%; height: 100%; }
.art-lead { padding: 4px 0 4px 14px; border-left: 4px solid var(--page-select); font-size: 1.04rem; }
.art-toc { margin: 1.4rem 0 2rem; padding: 14px 20px 10px; border: 1px solid #e3dccf; border-radius: 10px; background: #fbfaf7; }
.art-toc-title { margin-bottom: 6px; color: var(--page-deep); font-weight: 700; }
.art-toc-title .icon { margin-right: 4px; }
.art-toc ol { margin: 0; padding-left: 1.5rem; }
.art-toc li { margin: 0 0 6px; line-height: 1.6; }
.art-toc li::marker { color: var(--page); font-weight: 700; }
.art-toc a { color: #3f2c20; text-decoration: none; }
.art-toc a:hover { color: var(--page-deep); text-decoration: underline; }
.art-section { margin-bottom: 2.2rem; scroll-margin-top: 12px; }
.art-section::after { content: ""; display: table; clear: both; }
.art-h2 { display: flex; align-items: center; gap: 10px; margin: 0 0 1rem; padding: 10px 0; border-bottom: 2px solid var(--page-select);
  color: var(--heading); font-size: 1.3rem; }
.art-num { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%;
  background: var(--page); color: #ffffff; font-size: .95rem; letter-spacing: .02em; }
.art-spot { float: right; margin: 0 0 10px 18px; }
.art-spot .lp-spot { width: 120px; height: 120px; }
.art-spot .lp-spot img { width: 92px; height: 92px; }
.art-point, .art-caution, .art-notes { clear: both; margin: 0 0 1.2rem; padding: 12px 18px 2px; border-radius: 10px; }
.art-point { border: 2px solid #f4c64f; background: #fffaeb; }
.art-caution { border: 2px solid #e8a39b; background: #fdf1ef; }
.art-notes { border: 1px solid #e3dccf; background: #fbfaf7; padding-bottom: 6px; }
.art-notes ul.bullets { margin-bottom: 4px; }
.art-box-title { display: flex; align-items: center; gap: 4px; margin-bottom: 4px; font-weight: 700; }
.art-point .art-box-title { color: #8a5b12; }
.art-caution .art-box-title { color: #b02a25; }
.art-notes .art-box-title { color: var(--page-deep); }
.art-cards { clear: both; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 0 0 1.2rem; }
.art-card { padding: 14px 12px 4px; border: 1px solid #e3dccf; border-radius: 10px; background: #ffffff; text-align: center; }
.art-card .lp-spot { margin: 0 auto 4px; }
.art-card-title { margin-bottom: 4px; color: var(--page-deep); font-weight: 700; }
.article .art-card p { font-size: .88rem; line-height: 1.75; text-align: left; }
.art-steps { clear: both; margin: 0 0 1.2rem; padding: 0; list-style: none; }
.art-steps li { display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: 12px; padding: 12px 0; border-bottom: 1px dashed #e3dccf; }
.art-steps li:last-child { border-bottom: 0; }
.art-steps p { margin: 2px 0 0; }
.art-step-number { display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 50%;
  background: var(--page-soft); color: var(--page-deep); font-weight: 700; }
.art-figure { clear: both; margin: 0 0 1.2rem; }
.art-figure figcaption { margin-top: 6px; color: #8a7464; font-size: .8rem; text-align: center; }
.art-link { clear: both; margin: 0 0 1.2rem; padding: 12px 16px; border-radius: 10px; background: var(--page-soft); }
.article .art-link p { margin: 0 0 4px; font-size: .92rem; }
.art-link a { display: inline-flex; align-items: center; gap: 4px; color: var(--page-deep); font-weight: 700; }
.art-summary { margin: 0 0 1.2rem; padding: 16px 20px 8px; border: 2px solid var(--page); border-radius: 12px; background: #ffffff; }
.art-summary-title { display: flex; align-items: center; gap: 6px; margin: 0 0 8px; color: var(--page-deep); font-size: 1.2rem; }
.art-summary ul { margin: 0; padding: 0; list-style: none; }
.art-summary li { position: relative; padding: 8px 0 8px 30px; word-break: keep-all; overflow-wrap: anywhere; border-bottom: 1px dashed #e3dccf; line-height: 1.7; }
.art-summary li:last-child { border-bottom: 0; }
.art-summary li::before { content: "check"; position: absolute; left: 0; top: 8px; font-family: 'Material Symbols Rounded'; font-size: 22px;
  line-height: 1; color: var(--page); }
.art-related { margin-top: 2rem; }
.art-related-head { margin-bottom: 10px; padding-bottom: 4px; border-bottom: 2px solid var(--page); color: var(--page-deep); font-weight: 700; }
.art-related-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.art-related-card { display: flex; flex-direction: column; overflow: hidden; border: 1px solid #e3dccf; border-radius: 10px; background: #ffffff;
  color: #3f2c20; text-decoration: none; }
.art-related-card:hover { border-color: var(--page); }
.art-related-card img { display: block; width: 100%; aspect-ratio: 16 / 10; padding: 8px; background: var(--page); object-fit: contain; }
.art-related-title { padding: 8px 12px 2px; color: var(--page-deep); font-weight: 700; font-size: .95rem; }
.art-related-text { padding: 0 12px 12px; color: #6d5443; font-size: .8rem; line-height: 1.6; }

/* カレンダーの下の、表示している月に気をつけたい食中毒 */
.season-head { margin: 1.4rem 0 4px; padding-bottom: 4px; border-bottom: 2px solid var(--page); color: var(--page-deep); font-weight: 700; }
.season-note .lp-card-title { margin-top: 2px; }
/* ログインと登録は、上の選択で切り替える */
.plan-account { margin-top: .8rem; }
.account-box > summary .icon { margin-right: 4px; }
.account-register { display: none; }
.account-forms:has(input[value="register"]:checked) .account-register { display: block; }
.account-forms:has(input[value="register"]:checked) .account-login { display: none; }

/* 管理者画面 */
.admin-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.admin-title { color: var(--heading); font-size: 1.6rem; }
.admin-subtitle { margin-top: 1.2rem; font-size: 1.2rem; }
.admin-login { max-width: 420px; }
.admin-search { display: flex; gap: 8px; margin: .8rem 0; }
.admin-search .text-input { flex: 1 1 auto; }
.admin-table { overflow-x: auto; margin-bottom: .6rem; border: 1px solid #e3dccf; border-radius: 8px; }
.admin-table table { width: 100%; border-collapse: collapse; font-size: .82rem; }
.admin-table th, .admin-table td { padding: 6px 8px; border-bottom: 1px solid #eee8dd; text-align: left; vertical-align: top; white-space: nowrap; }
.admin-table th { position: sticky; top: 0; background: #f4f1ea; }
.admin-table td.admin-message { min-width: 280px; white-space: normal; overflow-wrap: anywhere; }

/* みんなの作り置き(Instagram) */
.featured-rail { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 2px 2px 10px; -webkit-overflow-scrolling: touch; }
.featured-rail iframe { flex: 0 0 300px; width: 300px; height: 540px; border: 1px solid #e3dccf; border-radius: 10px; background: #ffffff; scroll-snap-align: start; }

h1, h2, h3, h4, h5 {font-synthesis: none; text-rendering: geometricPrecision; -webkit-font-smoothing: antialiased;}
h1 {font-size: clamp(1.4rem, 6vw, 1.85rem) !important; color: #b4521f;}
input, textarea {font-size: 16px !important;}
.field-title {background: #fdebd9;
  color: #7a3a16;
  text-align: center;
  font-weight: 700;
  font-size: 1rem;
  line-height: 1.4;
  padding: 6px 10px;
  border-radius: 4px;
  margin: 6px 0 6px;}
.field-note {display: block; font-size: .72rem; font-weight: 500; letter-spacing: 0; color: #8a5a3a;}
.guide-warn {margin: 4px 0 10px; padding: 10px 14px; border: 2px solid #c8342f; border-radius: 8px; background: #fdecea; color: #b02a25; font-size: 1.05rem; font-weight: 700; line-height: 1.5; text-align: center;}
.guide-warn span {display: block; font-size: .8rem; font-weight: 500;}
.guide-item {padding: 8px 2px; border-bottom: 1px solid #eee8dd;}
.guide-item:last-child {border-bottom: none;}
.guide-name {font-size: .95rem; font-weight: 500; color: var(--page-deep); margin-bottom: 2px;}
.guide-text {font-size: .85rem; line-height: 1.65; color: #5c4636;}
.guide-text strong {color: #4a3426; font-weight: 500;}
.notice {background: #ffffff;
  border: 2px solid #c8342f;
  border-radius: 6px;
  padding: 10px 12px;
  margin: 2px 0 6px;
  color: #c8342f;
  font-size: .82rem;
  line-height: 1.55;
  text-align: center;
  text-wrap: pretty;}
.notice-lead {font-size: .98rem; font-weight: 700; line-height: 1.45; margin-bottom: 2px;}
.notice-icon {display: inline-block; width: 1.25em; height: 1.25em; margin-right: 3px; background: currentColor; vertical-align: -.26em;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M1 21h22L12 2 1 21zm12-3h-2v-2h2v2zm0-4h-2v-4h2v4z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M1 21h22L12 2 1 21zm12-3h-2v-2h2v2zm0-4h-2v-4h2v4z'/%3E%3C/svg%3E") center / contain no-repeat;}
.notice-line {background: linear-gradient(transparent 62%, #ffe36e 62%); -webkit-box-decoration-break: clone; box-decoration-break: clone;}
.notice-result {background: #ffffff; border-width: 2px; font-weight: 500; font-size: .86rem;}
.notice-result .notice-lead {font-size: .98rem;}
.result-band {margin: -1rem -1rem .4rem !important; padding: 10px 16px !important; background: var(--result); color: #ffffff; font-size: 1.35rem !important; font-weight: 700 !important; letter-spacing: .08em; text-align: center;}
.summary-head {display: flex; justify-content: space-between; align-items: baseline; gap: 8px; flex-wrap: wrap; margin-bottom: 6px;}
.summary-name {font-size: 1.3rem; font-weight: 700;}
.summary-risk {font-size: .74rem; padding: 1px 10px; border-radius: 999px; background: #fdf0e3; color: #6d5443;}
h3 {font-size: 1.15rem !important; font-weight: 700 !important; color: var(--heading);}
h4 {position: relative;
  color: var(--heading);
  font-weight: 700 !important;
  font-size: 1.08rem !important;
  padding: 0 0 7px !important;
  margin-top: 1.8rem !important;
  border-bottom: 1px solid #e3dccf;}
h4::after {content: "";
  position: absolute;
  left: 0;
  bottom: -1px;
  width: 2.6rem;
  height: 2px;
  border-radius: 2px;
  background: var(--page);}
.link-lead {text-align: center; font-size: .9rem; color: #6d5443; margin: 1rem 0 .7rem;}
.microbe-detail {border: 1px solid #e3dccf; border-radius: 8px; padding: 12px 14px; margin-top: 2px; font-size: .9rem; line-height: 1.75; background: #ffffff;}
.microbe-detail p {margin: 6px 0;}
.microbe-head {display: flex; align-items: center; gap: 12px;}
.microbe-head img {width: 64px; height: 64px; flex: none;}
.microbe-title {font-size: 1.05rem; font-weight: 500; color: var(--page-deep);}
.microbe-kind {font-size: .78rem; color: #8a7464;}
.microbe-detail ul {margin: 6px 0; padding-left: 1.1rem;}
.microbe-detail li {font-size: .86rem; line-height: 1.65;}
.microbe-kill {border: 1px solid #e3dccf; border-left: none; border-right: none; padding: 6px 0; margin: 8px 0;}
.microbe-source {font-size: .74rem; color: #8a7464;}
.site-tag {font-size: .74rem; color: #6d5443; white-space: nowrap;}
.crumb-sep {font-size: .82rem; color: #8a7464;}
.crumb-now {font-size: .82rem; color: #3d2a1e; line-height: 1.4;}
.crumb-now::before {content: ">"; margin-right: 6px; color: #8a7464;}
.footer-title {margin-bottom: 4px; padding-bottom: 4px; border-bottom: 2px solid #e3dccf; color: #3f2c20; font-size: .85rem; font-weight: 700;}
.site-credit {padding-top: 8px; color: #6b5a4c; font-size: .8rem; text-align: center;}
.site-credit mark {padding: 0 3px; background: #fdebd9; color: #8a3524;}
.lp-hero {position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 20px 28px;
  margin-bottom: .6rem;
  border-radius: 14px;
  background: var(--page);
  color: #ffffff;}
.lp-hero::before, .lp-hero::after {content: ""; position: absolute; border-radius: 50%; background: rgba(255, 255, 255, .09);}
.lp-hero::before {width: 220px; height: 220px; left: -70px; bottom: -110px;}
.lp-hero::after {width: 120px; height: 120px; left: 42%; top: -60px;}
.lp-hero-text {position: relative; z-index: 1; min-width: 0;}
.lp-kicker {font-size: .84rem; opacity: .95;}
h1.lp-title {font-size: clamp(1.5rem, 5vw, 2.1rem) !important; font-weight: 700 !important; color: #ffffff; padding: 4px 0 8px !important; word-break: keep-all; overflow-wrap: anywhere;}
.lp-hero p {font-size: .95rem; line-height: 1.7; margin: 0; color: #ffffff;}
.lp-hero-image {position: relative; z-index: 1; width: 300px; max-width: 46%; height: auto; flex: none;}
.lp-hero-photo {min-height: 228px; border-radius: 0; background: #c4541f;}
.lp-hero-photo::before {display: none;}
.lp-hero-photo::after {inset: 0; left: 38%; width: auto; height: auto; top: 0; z-index: 0; border-radius: 0;
  background: linear-gradient(90deg, #c4541f 0%, rgba(196, 84, 31, .78) 24%, rgba(196, 84, 31, .22) 52%, rgba(196, 84, 31, 0) 72%);}
.lp-hero-bg {position: absolute; top: 0; bottom: 0; right: 0; left: 38%; width: 62%; height: 100%; object-fit: cover; object-position: 60% 50%;}
.lp-hero-photo .lp-hero-text {max-width: 52%;}
.lp-hero-photo .lp-kicker, .lp-hero-photo h1.lp-title, .lp-hero-photo p {text-shadow: 0 1px 6px rgba(90, 34, 8, .6);}
.lp-cards {display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 12px; margin-top: .5rem;}
.lp-cards-two {grid-template-columns: repeat(2, minmax(0, 1fr));}
.lp-cards-two > :last-child:nth-child(odd) {grid-column: 1 / -1;}
.lp-card {position: relative;
  border: 1px solid #e3dccf;
  border-top: 4px solid var(--page);
  border-radius: 12px;
  padding: 16px 18px;
  background: #ffffff;}
.lp-card-center {text-align: center;}
.lp-card p {font-size: .95rem; line-height: 1.85; margin: 0 0 .4rem;}
.lp-card-title {color: var(--page-deep); font-size: 1.1rem; font-weight: 700; margin: 6px 0 6px;}
.lp-spot {display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 76px;
  height: 76px;
  border-radius: 50%;
  background: var(--page-soft);}
.lp-spot img {width: 54px; height: 54px;}
.lp-list {list-style: none; margin: 0 !important; padding: 0 !important;}
.lp-list li {position: relative;
  padding: 7px 0 7px 26px;
  margin: 0 !important;
  border-bottom: 1px dashed #e8dfd2;
  font-size: .95rem;
  line-height: 1.8;}
.lp-list li:last-child {border-bottom: none;}
.lp-list li::before {content: "✓"; position: absolute; left: 4px; top: 7px; color: var(--page); font-weight: 700;}
.lp-limit {margin-top: 10px; border-radius: 8px; padding: 10px 14px; font-size: .92rem; line-height: 1.8; background: var(--page-soft);}
.dish-signs {margin-top: 14px;}
.lp-limit > strong:first-child {display: block; color: var(--page-deep); font-weight: 700;}
.lp-steps {display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 12px; margin: .5rem 0 .8rem;}
.lp-step {border: 1px solid #e3dccf; border-radius: 12px; padding: 14px 16px; background: #ffffff;}
.lp-step p {font-size: .92rem; line-height: 1.8; margin: 0;}
.lp-step-number {display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--page);
  color: #ffffff;
  font-weight: 700;}
.zones {margin-top: .5rem; border-radius: 12px; overflow: hidden; border: 1px solid #e3dccf;}
.zone {display: grid; grid-template-columns: 11rem 1fr; gap: 12px; align-items: center; padding: 11px 14px; background: #ffffff; border-left: 10px solid;}
.zone + .zone {border-top: 1px solid #eee8dd;}
.zone-name {font-weight: 700; font-size: .95rem;}
.zone-text {font-size: .92rem; line-height: 1.7;}
.zone-hot {border-left-color: #d9402e;}
.zone-warm {border-left-color: #ef8f3c;}
.zone-danger {border-left-color: #e8b52e; background: #fff8e3;}
.zone-chill {border-left-color: #5aa7d6;}
.zone-frozen {border-left-color: #2f6f9f;}
.content-image {margin: -1rem -1rem .7rem; padding: 12px; background: var(--page); text-align: center;}
.content-image img {height: 130px; max-width: 100%;}
.content-title {font-size: 1.1rem; font-weight: 700; color: var(--page-deep);}
.content-text {font-size: .9rem; line-height: 1.7; margin-bottom: .7rem;}
.guide-card-image {margin-bottom: .4rem;}
.guide-photo {display: block; width: calc(100% + 30px); max-width: none; height: auto; aspect-ratio: 16 / 10; object-fit: cover;
  margin: -15px -15px 0; border-radius: 7px 7px 0 0;}
.tip-flow {display: flex; flex-direction: column; gap: 14px; margin: .5rem 0 1rem;}
.tip-step {position: relative; display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 14px; align-items: start;}
.tip-step:not(:last-child)::before {content: ""; position: absolute; left: 21px; top: 50px; bottom: -10px; width: 2px;
  background: var(--page-select); border-radius: 2px;}
.tip-number {display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 50%;
  background: var(--page); color: #ffffff; font-size: 1.2rem; font-weight: 700; box-shadow: 0 2px 6px rgba(120, 60, 20, .25);}
.tip-body {overflow: hidden; border: 1px solid #e3dccf; border-radius: 12px; background: #ffffff;}
.tip-title {padding: 9px 16px; background: var(--page-soft); color: var(--page-deep); font-size: 1.1rem; font-weight: 700;}
.tip-items {list-style: none; margin: 0 !important; padding: 4px 16px !important;}
.tip-items li {position: relative; margin: 0 !important; padding: 9px 0 9px 30px; border-bottom: 1px dashed #e8dfd2;
  font-size: .95rem; line-height: 1.8;}
.tip-items li:last-child {border-bottom: none;}
.tip-items li::before {content: "✓"; position: absolute; left: 0; top: 12px; display: flex; align-items: center; justify-content: center;
  width: 20px; height: 20px; border-radius: 50%; background: var(--page); color: #ffffff; font-size: .72rem; font-weight: 700; line-height: 1;}
.tip-items strong {background: linear-gradient(transparent 60%, var(--page-select) 60%); font-weight: 700;}
.guide-days {display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px;}
.guide-day {display: flex; align-items: center; gap: 12px; padding: 12px 16px; border: 2.5px solid #4a8fc0; border-radius: 12px; background: #ffffff; box-shadow: 0 3px 8px rgba(47, 111, 159, .25);}
.guide-day .lp-spot {flex: none;}
.guide-day-label {font-size: .85rem; font-weight: 700; color: #2f6f9f;}
.guide-day-value {font-size: 1.7rem; font-weight: 700; color: var(--page-deep); line-height: 1.3;}
.pop-title {display: flex; flex-wrap: wrap; justify-content: center; align-items: baseline; color: #6b4a1e; font-family: 'Mochiy Pop One', 'M PLUS Rounded 1c', sans-serif; line-height: 1.3;}
.pop-big {padding: 0 3px; background: linear-gradient(transparent 68%, #ffd966 68%); color: #d9531e;}
.pop-mark {color: #c8342f; transform: rotate(10deg);}
h1.quick-title {margin: .3rem 0 1.5rem; padding: 0 !important; font-size: 3rem !important; font-weight: 400 !important;}
.quick-title .pop-small {font-size: 1.6rem;}
.quick-title .pop-middle {font-size: 2.3rem;}
.quick-guide-title {margin-bottom: 24px; font-size: 1.05rem;}
.quick-label {margin-bottom: 1.1rem; color: #8a5b12; font-size: .82rem; font-weight: 700; white-space: nowrap;}
.news-box {margin: .9rem 0 1.6rem; padding: 12px 18px 14px; border: 1px solid #e3dccf; border-radius: 8px; background: #ffffff;}
.news-title {padding-bottom: 6px; border-bottom: 2px solid var(--page); color: var(--page-deep); font-size: .98rem; font-weight: 700;}
.news-list {margin: 0 !important; padding: 0 !important; list-style: none;}
.news-list li {display: flex; gap: 14px; margin: 0 !important; padding: 8px 0; border-bottom: 1px dashed #e3dccf; font-size: .9rem; line-height: 1.6;}
.news-list li:last-child {padding-bottom: 0; border-bottom: 0;}
.news-list time {flex: none; color: #6d5443;}
.news-empty {margin: 8px 0 0; color: #6d5443; font-size: .9rem;}
.quick-guide {margin-bottom: 1rem; pointer-events: none; user-select: none;}
.quick-steps {display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 8px; padding-bottom: 20px;}
.quick-shot {position: relative;}
.quick-shot img {display: block; width: 100%; border-radius: 6px; box-shadow: 0 1px 4px rgba(60, 40, 20, .18);}
.quick-arrow {width: 0; height: 0; border-top: 11px solid transparent; border-bottom: 11px solid transparent; border-left: 12px solid #cdbfae;}
.quick-bubble {position: absolute; top: -20px; padding: 0 9px; border: 1.5px solid #3a7196; border-radius: 999px; background: #ffffff; color: #3a7196; font-size: .76rem; font-weight: 700; line-height: 1.6; white-space: nowrap;}
.quick-bubble::before, .quick-bubble::after {content: ""; position: absolute; left: 50%; top: 100%; border-style: solid; border-color: transparent; border-bottom: none;}
.quick-bubble::before {margin-left: -6px; border-width: 7px 6px 0; border-top-color: #3a7196;}
.quick-bubble::after {margin-left: -4px; margin-top: -1px; border-width: 5px 4px 0; border-top-color: #ffffff;}
.quick-bubble-input {left: 12%;}
.quick-bubble-click {top: auto; right: 6%; bottom: -21px;}
.quick-bubble-click::before, .quick-bubble-click::after {top: auto; bottom: 100%; border-top: none;}
.quick-bubble-click::before {border-width: 0 6px 7px; border-bottom-color: #3a7196; border-bottom-style: solid;}
.quick-bubble-click::after {margin-top: 0; margin-bottom: -1px; border-width: 0 4px 5px; border-bottom-color: #ffffff; border-bottom-style: solid;}
.quick-check {position: absolute; top: -21px; right: 0; color: #c8342f; font-size: .86rem; font-weight: 700; white-space: nowrap; transform: rotate(5deg);}
.purpose-lead {margin: 4px 2px 1.1rem; font-size: .86rem; color: #6d5443;}
.rail-title {margin: 8px 0 1.1rem; padding-bottom: 4px; border-bottom: 2px solid var(--page, #d9622b); color: var(--page-deep, #a8481a); font-weight: 700; font-size: .98rem;}
.ad-slot {display: flex; align-items: center; justify-content: center; min-height: 250px; margin: 10px 0; border: 1px dashed #cfc4b3; border-radius: 10px; background: #fbf8f3; color: #8a7464; font-size: .85rem;}
.quiz-card {border: 1px solid #e3dccf; border-top: 4px solid var(--page); border-radius: 12px; padding: 16px 20px 20px; background: #ffffff;}
.quiz-progress {height: 8px; border-radius: 999px; background: var(--page-soft); overflow: hidden; margin-bottom: 10px;}
.quiz-progress span {display: block; height: 100%; border-radius: 999px; background: var(--page);}
.quiz-number {font-size: .85rem; color: var(--page-deep); font-weight: 700;}
.quiz-text {font-size: 1.2rem; font-weight: 700; line-height: 1.7; margin-top: 4px;}
.quiz-answer {border-radius: 12px; padding: 14px 18px; background: #ffffff; border: 2px solid;}
.quiz-answer p {margin: 4px 0 0; font-size: .96rem; line-height: 1.85;}
.quiz-answer-head {font-size: 1.15rem; font-weight: 700;}
.quiz-answer.quiz-right {border-color: #3a8a5f;}
.quiz-answer.quiz-wrong {border-color: #c8342f;}
.quiz-right .quiz-answer-head, .quiz-review-head.quiz-right {color: #2e7a51;}
.quiz-wrong .quiz-answer-head, .quiz-review-head.quiz-wrong {color: #c8342f;}
.quiz-score {border-radius: 14px; padding: 22px; text-align: center; background: var(--page); color: #ffffff;}
.quiz-score p {margin: 4px 0 0; color: #ffffff; font-size: .95rem;}
.quiz-score-label {font-size: .9rem;}
.quiz-score-value {font-size: 3rem; font-weight: 700; line-height: 1.2;}
.quiz-score-value span {font-size: 1.1rem;}
.quiz-review-head {font-weight: 700; font-size: .9rem;}
.quiz-review-question {font-weight: 700;}
.chart {border: 1px solid #e3dccf; border-radius: 12px; overflow: hidden; margin-top: .5rem; background: #ffffff;}
.chart-row {display: grid; grid-template-columns: 11rem 7rem 7rem 1fr; gap: 4px 12px; align-items: center; padding: 10px 14px;}
.chart-row + .chart-row {border-top: 1px solid #eee8dd;}
.chart-row:nth-child(even) {background: var(--page-soft);}
.chart-name {font-weight: 700; color: var(--page-deep);}
.chart-value {font-weight: 700; font-size: 1.02rem;}
.chart-value span {margin-right: 6px; font-size: .74rem; font-weight: 500; color: #6d5443;}
.chart-note {font-size: .84rem; line-height: 1.6; color: #5c4636;}
.legal {max-width: 46rem;}
.legal p, .legal li {font-size: .95rem; line-height: 1.9;}
.legal ul {margin: .3rem 0 .6rem !important; padding-left: 1.3rem !important;}
.legal li {margin: 0 !important;}
.legal mark {padding: 0 3px; background: #fdebd9; color: #8a3524;}
.legal-date {margin-top: 1.5rem !important; color: #6d5443;}
.left-verdict {margin: .6rem 0; padding: 16px 20px; border-radius: 12px; border: 3px solid; background: #ffffff;}
.left-stop {border-color: #c8342f; color: #a82a26;}
.left-caution {border-color: #d98a1f; color: #8a5510;}
.left-title {font-size: 1.3rem; font-weight: 700; line-height: 1.5;}
.left-verdict ul {margin: 6px 0 0 !important; padding-left: 1.2rem !important;}
.left-verdict li {margin: 0 !important; color: #3f2c20; font-size: .95rem; line-height: 1.8;}
.left-warning {margin-top: 8px !important; font-weight: 700; color: var(--page-deep);}
.plan-lead {margin: .2rem 0 .8rem; font-size: .95rem;}
.cal-month {min-width: 7.5em; color: var(--page-deep); font-size: 1.35rem; font-weight: 700; text-align: center;}
.plan-calendar {background: #ffffff;}
.plan-calendar > .cal-heads, .plan-calendar > .cal-week {display: grid; grid-template-columns: repeat(7, minmax(0, 1fr));}
.cal-heads {overflow: hidden; border: 1px solid #e3dccf; background: var(--page-soft);}
.cal-head {padding: 6px 0; color: #5a3a26; font-size: .8rem; font-weight: 700; text-align: center;}
.cal-head.cal-sun {color: #c0392b;}
.cal-head.cal-sat {color: #2c6fa8;}
.cal-week {min-height: 92px; row-gap: 3px; border: 1px solid #e3dccf; border-top: none; background: #ffffff;}
.cal-cell {grid-row: 1 / -1; min-width: 0; border-left: 1px solid #efe8dc;}
.cal-cell[style*="grid-column: 1"] {border-left: none;}
.cal-day {padding: 3px 6px 0; color: #3f2c20; font-size: .85rem; font-weight: 700; line-height: 1.4;}
.cal-other {background: #faf8f4;}
.cal-day.cal-sun {color: #c0392b;}
.cal-day.cal-sat {color: #2c6fa8;}
.cal-other .cal-day {opacity: .4;}
.cal-today {box-shadow: inset 0 0 0 2px var(--page);}
.cal-bar {z-index: 1; overflow: hidden; margin: 0 3px; padding: 2px 7px; border-radius: 6px; color: #ffffff; font-size: .74rem; font-weight: 700;
  line-height: 1.4; white-space: nowrap; text-overflow: ellipsis;}
.cal-bar-from {margin-left: 0; border-top-left-radius: 0; border-bottom-left-radius: 0;}
.cal-bar-on {margin-right: 0; border-top-right-radius: 0; border-bottom-right-radius: 0;}
.cal-bar-end {margin-left: 6px; font-weight: 400; opacity: .9;}
.cal-bar-tag {margin-right: 4px; padding: 0 4px; border-radius: 4px; font-size: .66rem;}
.cal-tag-fridge {background: #e6f5ea; color: #2f7a4a;}
.cal-tag-freezer {background: #e3f0fb; color: #1f5f8b;}
.plan-auto {margin: -2px 0 8px; color: #6d5443; font-size: .85rem; text-align: center;}
.plan-edit-title {background: #e6f0f7 !important; color: #2c5f82 !important;}
.plan-notice {margin: 10px 0 4px; padding: 8px 12px; font-size: .78rem;}
.plan-notice .notice-lead {font-size: .9rem;}
.plan-list-title {margin: 14px 0 4px; padding-bottom: 4px; border-bottom: 2px solid var(--page); color: var(--page-deep); font-weight: 700;}
.plan-item {min-width: 0;}
.plan-item .plan-dish {display: inline;}
.plan-item-editing .plan-dish {text-decoration: underline; text-decoration-color: #3a7196; text-decoration-thickness: 2px;}
.plan-over {margin-left: 6px; color: #c8342f; font-weight: 700;}
.featured-head {margin: 1.2rem 0 .3rem;}
.featured-title {padding-bottom: 4px; border-bottom: 2px solid var(--page); color: var(--page-deep); font-size: 1.05rem; font-weight: 700;}
.featured-lead {margin-top: 4px; color: #6d5443; font-size: .82rem;}
.account-agree {margin: 2px 0 8px; color: #6d5443; font-size: .8rem; line-height: 1.6;}
.account-agree a {color: #b4521f; text-decoration: underline;}
.account-now {margin-bottom: 6px; font-size: .92rem;}
.account-now span {display: block; color: #6d5443; font-size: .8rem;}
.cal-color-0 {background: #d9622b;}
.cal-color-1 {background: #3f7a6e;}
.cal-color-2 {background: #3a7196;}
.cal-color-3 {background: #b9485f;}
.cal-color-4 {background: #8a6a2a;}
.cal-color-5 {background: #6a5aa0;}
.cal-dot {display: inline-block; width: 10px; height: 10px; margin-right: 6px; border-radius: 50%; vertical-align: 1px;}
.plan-list {margin-top: 1rem; padding: 12px 16px; border: 1px solid #e3dccf; border-radius: 12px; background: #ffffff;}
.plan-title {font-weight: 700; color: var(--page-deep); margin-bottom: 6px;}
.plan-list > ul {display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 0 18px; list-style: none; margin: 0 !important; padding: 0 !important;}
.plan-list > ul li {margin: 0 !important; padding: 6px 0; border-top: 1px dashed #e8dfd2;}
.plan-dish {display: block; font-weight: 500; overflow-wrap: anywhere;}
.plan-limit {display: block; font-size: .76rem; color: #6d5443;}
.plan-late {margin-top: 10px; padding: 10px 14px; border: 2px solid #c8342f; border-radius: 10px; color: #a82a26; font-size: .92rem;}
.plan-late > strong {display: block;}
.plan-late ul {margin: 4px 0 0 !important; padding-left: 1.1rem !important;}
.plan-late li {margin: 0 !important;}
.plan-note {margin-top: 8px; font-size: .78rem; color: #6d5443;}
.save-label {max-width: 320px; margin: 0 auto .4rem; padding: 12px 16px; border: 2px dashed #8a7464; border-radius: 8px; background: #ffffff; color: #3f2c20;}
.save-label-name {font-size: 1.1rem; font-weight: 700; border-bottom: 1px solid #e3dccf; padding-bottom: 4px; margin-bottom: 6px; overflow-wrap: anywhere;}
.save-label-row {display: flex; justify-content: space-between; gap: 12px; font-size: .95rem; line-height: 1.7;}
.save-label-row strong {font-weight: 700;}
.save-label-note {margin-top: 6px; font-size: .74rem; color: #6d5443;}
@media print {
body * {visibility: hidden !important;}
.save-label, .save-label *, .plan-calendar, .plan-calendar *, .care-note, .care-note * {visibility: visible !important;}
.save-label, .plan-calendar, .care-note {position: fixed; left: 0; top: 0; margin: 0; width: 100%; box-sizing: border-box;}
.save-label {width: auto;}
}
.care-note {margin: .6rem 0; padding: 16px 20px; border: 2px solid var(--page); border-radius: 10px; background: #ffffff; color: #3f2c20;}
.care-note-title {font-size: 1.05rem; font-weight: 700; color: var(--page-deep);}
.care-note ul {list-style: none; margin: .4rem 0 .6rem !important; padding: 0 !important;}
.care-note li {display: flex; flex-wrap: wrap; justify-content: space-between; gap: 2px 14px; margin: 0 !important; padding: 7px 0; border-bottom: 1px dashed #e3dccf; font-size: 1.25rem; line-height: 1.5; overflow-wrap: anywhere;}
.care-note li strong {color: #a8432e; font-weight: 700;}
.care-note p {margin: .2rem 0 0; font-size: 1.05rem; line-height: 1.7;}
.portion-grid {display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin: .6rem 0;}
.portion-tile {padding: 12px; border: 1px solid #e3dccf; border-radius: 12px; background: var(--page-soft); text-align: center;}
.portion-label {font-size: .88rem; font-weight: 700; color: var(--page-deep);}
.portion-tile-cold {border: 2.5px solid #4a8fc0; background: #ffffff; box-shadow: 0 3px 8px rgba(47, 111, 159, .25);}
.portion-label-cold {display: flex; justify-content: center; align-items: center; gap: 4px; color: #2f6f9f;}
.portion-label-cold img {width: 24px; height: 24px;}
.portion-value {font-size: 1.7rem; font-weight: 700; color: var(--page-deep); line-height: 1.4;}
.portion-date {font-size: .88rem;}
.season-now {margin-bottom: .5rem; padding: 10px 16px; border-radius: 10px; background: var(--page-soft); font-size: .95rem;}
.season-now strong {color: var(--page-deep); font-size: 1.1rem;}
.season-current {border-color: var(--page); box-shadow: 0 0 0 1px var(--page);}
.season-badge {position: absolute; top: 14px; right: 14px; padding: 2px 10px; border-radius: 999px; background: var(--page); color: #ffffff; font-size: .78rem; font-weight: 700;}
.faq-item {border: 1px solid #e3dccf; border-radius: 12px; padding: 12px 16px; margin-bottom: 10px; background: #ffffff;}
.faq-question {font-weight: 700; color: var(--page-deep);}
.faq-question::before {content: "Q. ";}
.faq-answer {font-size: .95rem; line-height: 1.85; margin-top: 4px;}
.faq-answer::before {content: "A. "; font-weight: 700; color: var(--page);}
@media (min-width: 641px) and (max-width: 1000px) {
.lp-hero-image {width: 190px; max-width: 36%;}
h1.lp-title {font-size: 1.5rem !important;}
.quick-steps {gap: 4px;}
.quick-bubble {padding: 0 7px; font-size: .68rem;}
.quick-check {font-size: .68rem;}
}
@media (max-width: 640px) {
h1.quick-title {row-gap: 2px; font-size: clamp(2rem, 10.2vw, 2.5rem) !important;}
.quick-title .pop-small {font-size: 1.3rem;}
.quick-title .pop-middle {font-size: 1.9rem;}
.news-list li {flex-direction: column; gap: 0;}
.quick-title .pop-small {flex-basis: 100%; text-align: center;}
.quick-steps {grid-template-columns: minmax(0, 1fr); gap: 26px; padding: 0 6% 2px;}
.quick-arrow {margin: -12px auto; border-top: 12px solid #cdbfae; border-bottom: none; border-left: 13px solid transparent; border-right: 13px solid transparent;}
.lp-hero {padding: 14px 16px;}
.lp-hero-image {width: 128px;}
.lp-hero-photo {min-height: 180px;}
.lp-hero-photo .lp-hero-text {max-width: 58%;}
.lp-hero-chart .lp-hero-bg {object-position: 100% 50%;}
.lp-hero-dish .lp-hero-bg {object-position: 100% 50%;}
.lp-hero-photo::after {background: linear-gradient(90deg, #c4541f 0%, rgba(196, 84, 31, .86) 36%, rgba(196, 84, 31, .2) 66%, rgba(196, 84, 31, 0) 84%);}
.lp-hero p {font-size: .84rem;}
.lp-cards-two {grid-template-columns: minmax(0, 1fr);}
.tip-step {grid-template-columns: 34px minmax(0, 1fr); gap: 10px;}
.tip-number {width: 34px; height: 34px; font-size: 1.05rem;}
.tip-step:not(:last-child)::before {left: 16px; top: 40px;}
.tip-title {padding: 8px 12px; font-size: 1.02rem;}
.tip-items {padding: 2px 12px !important;}
.quiz-text {font-size: 1.05rem;}
.cal-week {min-height: 64px;}
.cal-day {padding: 2px 3px 0; font-size: .75rem;}
.cal-bar {margin: 0 1px; padding: 1px 3px; font-size: .62rem;}
.cal-bar-end {display: none;}
.cal-bar-tag {padding: 0 2px; font-size: .55rem;}
.cal-month {min-width: 6em; font-size: 1.15rem;}
h1.lp-title {font-size: 1.14rem !important;}
.chart-row {grid-template-columns: 1fr 1fr;}
.chart-name, .chart-note {grid-column: 1 / -1;}
.guide-days {grid-template-columns: minmax(0, 1fr);}
.zone {grid-template-columns: 1fr; gap: 0;}
}

/* 引き継いだ規則(carried.css)のあとに置く、Web版の調整 */
h1 { margin: 0; }
/* 改行: 文章の最後の行に「す。」などの1〜2文字だけが残らないよう、ブラウザに行の長さを整えてもらう。
   見出しは行の長さをそろえる。対応していないブラウザでは、ふつうの改行になるだけ */
p, li, .caption, .chart-note, .content-text, .guide-text, .faq-answer, .plan-auto, .plan-lead, .notice, .zone-text { text-wrap: pretty; }
h1, h2, h4, .lp-card-title, .art-h2, .art-card-title, .left-title, .content-title { text-wrap: balance; }
.lp-hero { margin-bottom: .8rem; }
.notice { margin: .6rem 0; }

/* 印刷: 保存ラベルを印刷するときは、ラベルだけを出す(site.js が body に印を付ける) */
@media print {
  body.print-label * { visibility: hidden !important; }
  body.print-label .save-label, body.print-label .save-label * { visibility: visible !important; }
  body.print-label .save-label { position: fixed; left: 0; top: 0; margin: 0; }
}
/* 引き継いだ印刷の規則は、ページ全体の印刷(ブラウザのメニュー)では効かないようにする */
@media print {
  body:not(.print-label) * { visibility: visible !important; }
  body:not(.print-label) .save-label, body:not(.print-label) .plan-calendar { position: static; }
}

/* 保存カードの見出しの写真。作り置きのタブの色(ちゃいろ)で、文字の側へつなげる */
.lp-hero-cards { background: #8a6a2a; }
/* カードが見えるよう、グラデーションはほかの写真より早く薄くする */
.lp-hero-cards::after { background: linear-gradient(90deg, #8a6a2a 0%, rgba(138, 106, 42, .7) 18%, rgba(138, 106, 42, .15) 34%, rgba(138, 106, 42, 0) 46%); }
.lp-hero-cards h1.lp-title, .lp-hero-cards p { text-shadow: 0 1px 6px rgba(60, 40, 10, .6); }
@media (max-width: 640px) {
  .lp-hero-cards .lp-hero-bg { object-position: 100% 50%; }
  .lp-hero-cards::after { background: linear-gradient(90deg, #8a6a2a 0%, rgba(138, 106, 42, .8) 22%, rgba(138, 106, 42, .3) 45%, rgba(138, 106, 42, 0) 62%); }
}

/* 細菌図鑑はタイルが多いので、広い画面では横に増やす */
@media (min-width: 641px) {
  .microbes-all .microbe-tiles { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}

/* 右の列があると本文が狭くなるタブレットの幅 */
@media (min-width: 641px) and (max-width: 1000px) {
  .quick-top { gap: 10px; }
  .quick-help { padding: 8px 8px 10px; }
}

@media (max-width: 640px) {
  .with-side, .result-layout { grid-template-columns: minmax(0, 1fr); }
  .result-layout { grid-template-areas: "main" "side" "more"; }
  .result-side { position: static; }
  .side-column, .result-side .side-rail { margin-top: 1.5rem; }
  .site-logo img { height: 42px; }
  /* ご意見箱: スマホは封筒のボタンを右に置き、押すとロゴの下に入力欄を開く */
  .inquiry-toggle { display: flex; align-items: center; justify-content: center; width: 38px; height: 38px; margin-left: auto; border: 1.5px solid #e3dccf;
    border-radius: 50%; background: #faf7f2; color: #6b5a4c; cursor: pointer; }
  .inquiry-toggle[aria-expanded="true"] { border-color: var(--page); color: var(--page-deep); }
  .site-brand { column-gap: 10px; }
  /* ロゴが横長なので、説明文は小さめにして2行まで折り返す */
  .site-tag { flex: 1 1 0; min-width: 0; font-size: .68rem; line-height: 1.35; white-space: normal; text-wrap: balance; word-break: keep-all; }
  .inquiry { width: 100%; margin: 2px 0 4px; }
  .js .inquiry { display: none; }
  .js .inquiry-open .inquiry { display: flex; }
  .is-scrolled .inquiry-toggle { width: 30px; height: 30px; }
  .js body { padding-top: var(--header-full, 132px); }
  .is-scrolled .site-logo img { height: 26px; }
  .is-scrolled .crumb-inner { padding: 5px 0 4px; }
  .tab-button { min-height: 34px; padding: 3px 1px; font-size: .8rem; letter-spacing: -.02em; }
  .tab-menu { width: min(270px, 80vw); }
  .tab:nth-child(n+2) .tab-menu { left: auto; right: 0; }  /* 2つ目からのタブは、メニューを右端にそろえて画面からはみ出さないようにする */
  .tab:nth-child(2) .tab-menu { right: -60px; }
  .footer-groups { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 16px; }
  .footer-brand { grid-column: 1 / -1; justify-self: center; }
  .footer-brand img { height: 72px; }
  .quick-top { grid-template-columns: minmax(0, 1fr); }
  .quick-help { order: 1; }
  /* 調べ方の枠: スマホでも2枚の画像を横に並べ、余白と吹き出しを小さくして、枠を低くする */
  .quick-help { padding: 8px 8px 6px; }
  .quick-guide { margin-bottom: 0; }
  .quick-guide-title { margin-bottom: 14px; font-size: .92rem; }
  .quick-steps { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 4px; padding: 0 0 16px; }
  .quick-arrow { margin: 0; border-top: 8px solid transparent; border-bottom: 8px solid transparent; border-left: 9px solid #cdbfae; border-right: 0; }
  .quick-bubble { top: -15px; padding: 0 5px; font-size: .6rem; line-height: 1.5; }
  .quick-bubble-click { top: auto; bottom: -16px; }
  .quick-check { top: -16px; font-size: .62rem; }
  .metric-value { font-size: 1.4rem; }
  .metric { padding: 8px 10px; }
  .guide-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .guide-grid .content-title { font-size: .92rem; letter-spacing: -.02em; white-space: nowrap; }
  .guide-grid .content-text { font-size: .84rem; }
  .guide-card { padding: 10px; }
  .guide-card .guide-photo { width: calc(100% + 20px); margin: -10px -10px 0; }
  .card-layout, .plan-layout { grid-template-columns: minmax(0, 1fr); }
  .plan-row .button-text { display: none; }  /* 狭いので、編集と削除はアイコンだけにする */
  .plan-row .button.small { padding: 2px 8px; }
  /* 記事: スマホでは文字を少し小さく、横のイラストも小さくする */
  .article p { line-height: 1.9; }
  .art-h2 { font-size: 1.12rem; }
  .art-num { width: 34px; height: 34px; font-size: .85rem; }
  .art-spot { margin-left: 10px; }
  .art-spot .lp-spot { width: 80px; height: 80px; }
  .art-spot .lp-spot img { width: 62px; height: 62px; }
  .art-cards, .art-related-grid { grid-template-columns: minmax(0, 1fr); }
  .art-card { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 0 12px; align-items: center; text-align: left; }
  .art-card .lp-spot { grid-row: span 2; width: 64px; height: 64px; margin: 0; }
  .art-card .lp-spot img { width: 48px; height: 48px; }
  .art-related-card { flex-direction: row; align-items: center; }
  .art-related-card img { width: 110px; flex: none; aspect-ratio: 16 / 11; }
  .art-related-title { padding-top: 0; }
  .art-related-text { display: none; }
}