/*
Theme Name: 豆と湯（SWELL 子テーマ）
Template: swell
Description: 豆と湯（mametoyu.com）用の SWELL 子テーマ。見た目の正本は G:\マイドライブ\01_Yoshitaka\01_Blog\Coffee\DESIGN_SYSTEM.md
Version: 0.1.0
*/

/* ===== 1. 色と文字の変数（DESIGN_SYSTEM §2・§3） ===== */
:root {
  --mt-bg: #FBF8F3;          /* 生成り白 */
  --mt-surface: #FFFFFF;     /* 面 */
  --mt-ink: #2A2623;         /* 墨 */
  --mt-ink-sub: #6B625A;     /* 灰茶 */
  --mt-line: #E7E1D8;        /* 薄灰 */
  --mt-brown: #6F4A32;       /* コーヒーブラウン */
  --mt-green: #2F5D4A;       /* 深緑 */
  --mt-wood: #B08860;        /* 木の茶 */
  --mt-brown-thin: #F3ECE4;
  --mt-green-thin: #EAF1ED;
  --mt-radius: 8px;
  --mt-font: "Noto Sans JP", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic", Meiryo, sans-serif;

  /* SWELL の変数に当てる（カスタマイザーの値より先に効かせたい所だけ） */
  --color_main: var(--mt-brown);
  --color_text: var(--mt-ink);
  --color_htag: var(--mt-ink);
  --color_bg: var(--mt-bg);
  --color_main_thin: var(--mt-brown-thin);
}

body {
  background: var(--mt-bg);
  color: var(--mt-ink);
  font-family: var(--mt-font);
  font-feature-settings: "palt" 0;
  letter-spacing: 0.02em;
}

/* 本文: 16〜17px・行間 1.85 */
.post_content,
.mt-article {
  font-size: 16.5px;
  line-height: 1.85;
}
.post_content p,
.mt-article p { margin: 0 0 1.4em; }

a { color: var(--mt-brown); text-underline-offset: 3px; }
a:hover { color: var(--mt-green); }

/* ===== 2. 見出し（飾りを減らし、線と余白で区切る） ===== */
.post_content h2,
.mt-article h2 {
  font-size: 1.32em;
  font-weight: 700;
  line-height: 1.5;
  margin: 2.4em 0 1em;
  padding: 0 0 0.45em;
  background: none;
  border: none;
  border-bottom: 2px solid var(--mt-line);
  color: var(--mt-ink);
  position: relative;
}
.post_content h2::before,
.mt-article h2::before {
  content: "";
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 3em;
  height: 2px;
  background: var(--mt-cat, var(--mt-brown));
}
.post_content h3,
.mt-article h3 {
  font-size: 1.12em;
  font-weight: 700;
  margin: 2em 0 0.8em;
  padding-left: 0.7em;
  border-left: 4px solid var(--mt-cat, var(--mt-brown));
  border-bottom: none;
}

/* ===== 3. カテゴリの帯の色（DESIGN_SYSTEM §2） ===== */
.mt-cat--start { --mt-cat: var(--mt-green); }
.mt-cat--beans { --mt-cat: var(--mt-brown); }
.mt-cat--brew  { --mt-cat: var(--mt-ink); }
.mt-cat--gear  { --mt-cat: var(--mt-wood); }
/* SWELL のカテゴリ一覧・記事に付く body クラスにも当てる */
body.category-start, body.single.in-cat-start { --mt-cat: var(--mt-green); }
body.category-beans { --mt-cat: var(--mt-brown); }
body.category-brew  { --mt-cat: var(--mt-ink); }
body.category-gear  { --mt-cat: var(--mt-wood); }

.mt-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  font-size: 0.78rem;
  font-weight: 700;
  color: #fff;
  background: var(--mt-cat, var(--mt-brown));
  padding: 0.25em 0.7em;
  border-radius: 4px;
}

/* ===== 4. 記事の部品 ===== */
/* 広告の表記（1 行・控えめ） */
.mt-pr {
  font-size: 0.8rem;
  color: var(--mt-ink-sub);
  border: 1px solid var(--mt-line);
  border-radius: 4px;
  padding: 0.35em 0.7em;
  display: inline-block;
  margin-bottom: 1.2em;
}

/* この記事で分かること */
.mt-learn {
  background: var(--mt-surface);
  border: 1px solid var(--mt-line);
  border-radius: var(--mt-radius);
  padding: 1em 1.2em;
  margin: 0 0 1.4em;
}
.mt-learn__title {
  font-weight: 700;
  font-size: 0.95em;
  margin: 0 0 0.4em;
  color: var(--mt-green);
}
.mt-learn ul { margin: 0; padding-left: 1.2em; }
.mt-learn li { margin: 0.2em 0; }

/* 結論の箱 */
.mt-answer {
  background: var(--mt-green-thin);
  border-left: 4px solid var(--mt-green);
  border-radius: 0 var(--mt-radius) var(--mt-radius) 0;
  padding: 1em 1.2em;
  margin: 0 0 1.6em;
}
.mt-answer strong { color: var(--mt-green); }

/* 表（スマホでは横にスクロール） */
.post_content table,
.mt-article table {
  width: 100%;
  border-collapse: collapse;
  background: var(--mt-surface);
  font-size: 0.93em;
  line-height: 1.6;
}
.mt-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 0 0 1.6em; border-radius: var(--mt-radius); border: 1px solid var(--mt-line); }
.post_content th, .post_content td,
.mt-article th, .mt-article td {
  border: none;
  border-bottom: 1px solid var(--mt-line);
  padding: 0.7em 0.8em;
  text-align: left;
  vertical-align: top;
}
.post_content thead th,
.mt-article thead th {
  background: var(--mt-brown-thin);
  color: var(--mt-ink);
  font-weight: 700;
  white-space: nowrap;
}

/* 数字のチップ（15g・92℃・3分） */
.mt-chip {
  display: inline-block;
  font-size: 0.9em;
  border: 1px solid var(--mt-line);
  background: var(--mt-surface);
  border-radius: 6px;
  padding: 0.05em 0.5em;
  margin: 0 0.15em;
  white-space: nowrap;
}

/* 本人の体験の囲み */
.mt-note {
  background: var(--mt-surface);
  border: 1px dashed var(--mt-wood);
  border-radius: var(--mt-radius);
  padding: 0.9em 1.1em;
  margin: 0 0 1.6em;
  font-size: 0.95em;
}
.mt-note__who { font-weight: 700; color: var(--mt-brown); margin-right: 0.4em; }

/* 写真 */
.mt-photo { margin: 1.6em 0; }
.mt-photo img { width: 100%; height: auto; border-radius: var(--mt-radius); display: block; }
.mt-photo figcaption { font-size: 0.82rem; color: var(--mt-ink-sub); margin-top: 0.5em; }
.mt-photo--pair { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

/* FAQ（SWELL の FAQ ブロックにも当てる） */
.post_content .swell-block-faq__item,
.mt-faq__item {
  background: var(--mt-surface);
  border: 1px solid var(--mt-line);
  border-radius: var(--mt-radius);
  padding: 0.9em 1.1em;
  margin-bottom: 0.8em;
}

/* 次に読む */
.mt-next {
  display: grid;
  gap: 10px;
  margin: 2em 0;
}
.mt-next__label { font-size: 0.85rem; font-weight: 700; color: var(--mt-green); margin: 0 0 0.2em; }
.mt-next a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1em;
  background: var(--mt-surface);
  border: 1px solid var(--mt-line);
  border-radius: var(--mt-radius);
  padding: 0.9em 1.1em;
  color: var(--mt-ink);
  text-decoration: none;
  font-weight: 700;
}
.mt-next a::after { content: "→"; color: var(--mt-green); font-weight: 700; }
.mt-next a:hover { border-color: var(--mt-green); }

/* 商品リンク（Rinker の見た目を落ち着かせる。ボタンは最大 3 つ） */
.yyi-rinker-contents {
  background: var(--mt-surface) !important;
  border: 1px solid var(--mt-line) !important;
  border-radius: var(--mt-radius) !important;
  box-shadow: none !important;
}
.yyi-rinker-contents .yyi-rinker-title a { color: var(--mt-ink) !important; font-weight: 700; }
.yyi-rinker-contents ul.yyi-rinker-links li a {
  border-radius: 6px !important;
  box-shadow: none !important;
  font-weight: 700;
}
.yyi-rinker-contents ul.yyi-rinker-links li.amazonlink a { background: #3A3430 !important; }
.yyi-rinker-contents ul.yyi-rinker-links li.rakutenlink a { background: #8C3B2E !important; }
.yyi-rinker-contents ul.yyi-rinker-links li.freelink1 a { background: var(--mt-green) !important; }
.mt-where { font-size: 0.85rem; color: var(--mt-ink-sub); margin: -0.6em 0 1.6em; }

/* ===== 5. トップの「はじめて豆から淹れる人へ」7 段 ===== */
.mt-hero {
  display: grid;
  gap: 18px;
  align-items: center;
  padding: 28px 0 8px;
}
.mt-hero__copy { font-size: 0.9rem; font-weight: 700; color: var(--mt-green); letter-spacing: 0.08em; }
.mt-hero__title { font-size: clamp(1.5rem, 5vw, 2.1rem); line-height: 1.45; font-weight: 700; margin: 0.2em 0 0.4em; }
.mt-hero__lead { color: var(--mt-ink-sub); margin: 0; }
.mt-hero__img img { width: 100%; height: auto; border-radius: var(--mt-radius); display: block; } /* height:auto は必須（WordPress の img は width/height 属性を持つ） */

.mt-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; counter-reset: step; }
.mt-steps li :is(a, .mt-soon) {
  display: grid;
  grid-template-columns: 2.4em 1fr auto;
  align-items: center;
  gap: 0.8em;
  background: var(--mt-surface);
  border: 1px solid var(--mt-line);
  border-radius: var(--mt-radius);
  padding: 0.8em 1em;
  color: var(--mt-ink);
  text-decoration: none;
}
.mt-steps li :is(a, .mt-soon)::before {
  counter-increment: step;
  content: counter(step);
  width: 2.2em; height: 2.2em;
  border-radius: 50%;
  display: grid; place-items: center;
  background: var(--mt-green-thin);
  color: var(--mt-green);
  font-weight: 700;
}
.mt-steps li :is(a, .mt-soon)::after { content: "→"; color: var(--mt-green); font-weight: 700; }
.mt-steps__q { font-weight: 700; display: block; }
.mt-steps__a { font-size: 0.85rem; color: var(--mt-ink-sub); display: block; }
.mt-steps li :is(a, .mt-soon):hover { border-color: var(--mt-green); }

.mt-section-title { font-size: 1.15rem; font-weight: 700; margin: 2.2em 0 0.9em; }

/* カテゴリのカード */
.mt-cats { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.mt-cats :is(a, .mt-soon) {
  display: block;
  background: var(--mt-surface);
  border: 1px solid var(--mt-line);
  border-top: 4px solid var(--mt-cat);
  border-radius: var(--mt-radius);
  padding: 0.9em 1em;
  color: var(--mt-ink);
  text-decoration: none;
}
.mt-cats strong { display: block; margin-bottom: 0.2em; }
.mt-cats span { font-size: 0.82rem; color: var(--mt-ink-sub); }

/* ===== 6. ヘッダー・フッター（SWELL のクラス） ===== */
.l-header { background: var(--mt-surface); border-bottom: 1px solid var(--mt-line); box-shadow: none; }
.c-gnav > .menu-item > a { color: var(--mt-ink); font-weight: 700; }
.l-footer { background: #F1ECE4; color: var(--mt-ink-sub); }

/* スマホ下部の固定ナビ（SWELL の固定フッターメニュー） */
.l-fixHeader, .p-fixBtnWrap { box-shadow: none; }
#fix_bottom_menu { background: var(--mt-surface); border-top: 1px solid var(--mt-line); box-shadow: none; }
#fix_bottom_menu .menu_list li a { color: var(--mt-ink); }

/* 記事一覧のカード */
.p-postList__item .p-postList__link { border-radius: var(--mt-radius); }
.p-postList__thumb { border-radius: var(--mt-radius); overflow: hidden; }
.c-postThumb__cat { background: var(--mt-cat, var(--mt-brown)) !important; border-radius: 4px; }

/* ===== 7. PC 幅 ===== */
@media (min-width: 960px) {
  .post_content, .mt-article { font-size: 17px; }
  .mt-hero { grid-template-columns: 1.1fr 1fr; gap: 36px; padding-top: 48px; }
  .mt-cats { grid-template-columns: repeat(4, 1fr); }
  .mt-steps { grid-template-columns: 1fr 1fr; }
}

/* 動きを減らしたい人には動きを止める */
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}

/* ===== 8. 日本語を文節で折り返す（スマホで変な所で切れないように） ===== */
h1, h2, h3, .mt-hero__title, .mt-section-title, .mt-steps__q, .mt-steps__a, .mt-cats strong, .mt-cats span, .mt-next a, .p-postList__title,
.mt-for, .mt-cta__title, .mt-worries strong, .mt-worries span, .mt-author p, .mt-posts strong, .mt-photo figcaption, .mty-figure, .mty-compare, .mty-byline {
  word-break: auto-phrase;
  line-break: strict;
}

/* ===== 9. トップの入口（はじめての人・悩みから探す・書き手）と記事の一覧・フッター（2026-11-03 追加。MASTER_PLAN §2-0） ===== */
/* 最初の画面の「はじめての人はこちら」: 1 つだけ大きく。ピル型にしない */
.mt-cta { display: flex; flex-direction: column; gap: 4px; margin: 20px 0 8px; padding: 16px 18px; border-radius: 6px;
  background: var(--mt-green); color: #fff; text-decoration: none; max-width: 420px; }
.mt-cta:hover { color: #fff; background: #26503F; }
.mt-cta__label { font-size: 0.82rem; opacity: 0.9; }
.mt-cta__title { font-size: 1.08rem; font-weight: 700; line-height: 1.5; }
.mt-cta__title::after { content: " →"; }
.mt-cta-sub { font-size: 0.88rem; margin: 6px 0 0; }
.mt-for { margin: 0 0 0.6em; font-size: 0.95rem; color: var(--mt-ink); line-height: 1.7; }

/* 悩みから探す（4 つ。スマホ 2 列・PC 4 列） */
.mt-worries { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 0 0 8px; padding: 0; list-style: none; }
.mt-worries :is(a, .mt-soon) { display: flex; flex-direction: column; gap: 4px; height: 100%; box-sizing: border-box; padding: 14px; border: 1px solid var(--mt-line);
  border-radius: var(--mt-radius); background: var(--mt-surface); color: var(--mt-ink); text-decoration: none; }
.mt-worries :is(a, .mt-soon):hover { border-color: var(--mt-green); }
.mt-worries svg { width: 26px; height: 26px; color: var(--mt-brown); }
.mt-worries strong { font-size: 1rem; line-height: 1.5; }
.mt-worries span { font-size: 0.82rem; color: var(--mt-ink-sub); line-height: 1.6; }
.mt-worries__step { font-size: 0.8rem !important; color: var(--mt-green) !important; font-weight: 700; }

/* 書き手 */
.mt-author { display: grid; grid-template-columns: 56px 1fr; gap: 14px; align-items: start; padding: 16px; border: 1px solid var(--mt-line);
  border-radius: var(--mt-radius); background: var(--mt-surface); }
.mt-author__icon { width: 56px; height: 56px; border-radius: 50%; background: var(--mt-bg); border: 1px solid var(--mt-line); display: flex;
  align-items: center; justify-content: center; color: var(--mt-brown); }
.mt-author__icon svg { width: 30px; height: 30px; }
.mt-author p { margin: 0 0 0.5em; font-size: 0.92rem; line-height: 1.8; }
.mt-author__name { font-weight: 700; font-size: 1rem !important; }

/* 写真 3 枚（家で使っている道具）と出どころ */
.mt-photo--trio { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.mt-photo--trio .mt-photo { margin: 0; }
.mt-photo--trio img { aspect-ratio: 3 / 4; object-fit: cover; }

/* 記事の一覧（新着。トップのいちばん下） */
.mt-posts { display: grid; grid-template-columns: 1fr; gap: 20px; margin: 0; padding: 0; list-style: none; }
@media (min-width: 600px) { .mt-posts { grid-template-columns: 1fr 1fr; } }
@media (min-width: 960px) { .mt-posts { grid-template-columns: repeat(3, 1fr); } }
.mt-posts a { color: var(--mt-ink); text-decoration: none; display: block; }
.mt-posts img { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--mt-radius); display: block; }
.mt-posts strong { display: block; margin-top: 8px; font-size: 0.98rem; line-height: 1.6; }
.mt-posts span { display: block; margin-top: 4px; font-size: 0.78rem; color: var(--mt-ink-sub); }

/* フッター */
.mt-footer { margin-top: 56px; padding: 28px 20px 96px; border-top: 1px solid var(--mt-line); background: var(--mt-surface); font-size: 0.85rem; color: var(--mt-ink-sub); }
.mt-footer__in { max-width: 1080px; margin: 0 auto; }
.mt-footer nav { display: flex; flex-wrap: wrap; gap: 8px 18px; margin: 0 0 12px; }
.mt-footer a { color: var(--mt-ink-sub); }
@media (min-width: 960px) {
  .mt-worries { grid-template-columns: repeat(4, 1fr); }
  .mt-photo--trio { max-width: 720px; } /* PC で写真が画面を占めないように */
  .mt-footer { padding-bottom: 28px; }
}

/* ===== 10. デザイントークンと 2026 年の CSS（2026-11-03 追加） =====
   方針: 新しい機能は「対応していないブラウザでは前の見た目のまま」になる書き方だけを使う。
   見た目の演出より、読みやすさ（文字・行・折り返し）と迷わない導線（次の一歩が分かる）を優先する。 */
:root {
  /* 余白（4px 基準） */
  --mt-space-1: 4px; --mt-space-2: 8px; --mt-space-3: 12px; --mt-space-4: 16px;
  --mt-space-5: 24px; --mt-space-6: 32px; --mt-space-7: 48px; --mt-space-8: 64px;
  /* 幅 */
  --mt-content-max: 760px;  /* 本文の最大幅（1 行 40 字前後） */
  --mt-wide-max: 1080px;    /* トップ・一覧の最大幅 */
  /* 役割の色（色の値は §1 の変数から作る。新しい色は増やさない） */
  --mt-cta: var(--mt-green);
  --mt-cta-hover: color-mix(in oklab, var(--mt-green) 82%, black);
  --mt-notice-bg: color-mix(in oklab, #C9772B 10%, white);  /* 注意（見本の帯・記録待ち） */
  --mt-notice-ink: #8A4B12;
  --mt-ok: var(--mt-green);                                  /* 成功・推奨（◎） */
  --mt-focus: color-mix(in oklab, var(--mt-green) 70%, white);
  /* 文字の大きさ（画面幅に応じて滑らかに。最小はスマホで読める大きさ） */
  --mt-fs-h1: clamp(1.45rem, 1.1rem + 1.4vw, 2rem);
  --mt-fs-h2: clamp(1.2rem, 1.05rem + 0.6vw, 1.45rem);
  --mt-fs-body: clamp(16px, 15.4px + 0.15vw, 17px);
  accent-color: var(--mt-green);
}

/* 本文と見出しの読みやすさ */
.post_content, .mt-article { font-size: var(--mt-fs-body); }
.c-postTitle__ttl, .mt-hero__title { font-size: var(--mt-fs-h1); }
.post_content h2, .mt-article h2 { font-size: var(--mt-fs-h2); }
h1, h2, h3, .mt-hero__title, .mt-section-title, .mt-cta__title { text-wrap: balance; }  /* 見出しの行の長さをそろえる */
.post_content p, .mt-article p, .mt-for, .mt-author p, .mty-figure__note { text-wrap: pretty; } /* 最後の行に 1 文字だけ残るのを防ぐ */

/* ボタンの色を変数に（§9 の .mt-cta の固定色を置き換える） */
.mt-cta { background: var(--mt-cta); }
.mt-cta:hover { background: var(--mt-cta-hover); }
.mty-sample { background: var(--mt-notice-bg); color: var(--mt-notice-ink); }

/* キーボードで操作する人に、今どこにいるかを見せる（マウスでは出さない） */
:where(a, button, summary, [tabindex]):focus-visible {
  outline: 3px solid var(--mt-focus); outline-offset: 3px; border-radius: 4px;
}
/* ページ内リンクで見出しが固定ヘッダーに隠れないように */
:where(h2, h3, [id]) { scroll-margin-top: 80px; }

/* カードは置かれた幅に合わせて組み替える（画面幅ではなく、入れ物の幅で決める） */
.mt-posts > li, .mt-worries > li { container-type: inline-size; }
@container (max-width: 150px) {
  .mt-posts strong { font-size: 0.92rem; }
  .mt-worries span { display: none; }  /* 狭いカードでは補足を省き、入口の名前だけにする */
}
/* リンク全体を押せるカード: 中のどこを押しても行ける（:has で、押せることを枠の色で示す） */
.mt-posts a:has(img):hover img, .mt-posts a:focus-visible img { outline: 2px solid var(--mt-line); outline-offset: 2px; }
.mt-worries :is(a, .mt-soon):has(strong):hover { border-color: var(--mt-green); background: color-mix(in oklab, var(--mt-green) 4%, white); }

/* ページを移るときの穏やかな切り替え（対応ブラウザだけ。動きを減らす設定の人には出さない） */
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
  ::view-transition-old(root), ::view-transition-new(root) { animation-duration: 180ms; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

/* ===== 11. SWELL の上で動かすための調整（2026-11-03、公開画面を見て追加） ===== */
/* トップ: 本文の上の余白を詰める（最初の画面に「はじめての人はこちら」を入れるため） */
.home #content.l-content { padding-top: var(--mt-space-5); }
/* SWELL が本文の箇条書きに付ける左の余白と印を、カード状の部品では外す */
.post_content :is(.mt-worries, .mt-steps, .mt-posts, .mty-yesno, .mty-trouble, .mty-recipe, .mty-steps) { padding-left: 0; }
.post_content :is(.mt-worries, .mt-steps, .mt-posts, .mty-trouble, .mty-recipe) > li::before { content: none; }
.post_content :is(.mt-worries, .mt-steps, .mt-posts) > li { margin: 0; }
/* トップの見出しは h2（h1 は SWELL のロゴ）。本文の h2 の帯の飾りを、トップの部品の見出しには付けない */
.post_content .mt-hero__title { margin: 0 0 0.4em; padding: 0; background: none; border: 0; color: var(--mt-ink); font-size: var(--mt-fs-h1); line-height: 1.45; }
.post_content .mt-hero__title::before, .post_content .mt-hero__title::after { content: none; }
/* トップでは SWELL のページタイトル（「ホーム」）を出さない */
.home .c-pageTitle, .home .l-topTitleArea { display: none; }
/* 公開前の記事への入口（functions.php がリンクを外した物）。押せないことが分かる見た目にする */
.mt-soon { opacity: 0.55; cursor: default; }
.mt-steps li .mt-soon::after { content: "準備中"; font-size: 0.72rem; color: var(--mt-ink-sub); font-weight: 400; }
.mt-steps .mt-soon, .mt-worries .mt-soon { pointer-events: none; }
.mt-cta.mt-soon, .mt-cats .mt-soon { pointer-events: none; }
#fix_bottom_menu .mt-soon a, .c-gnav .mt-soon a { opacity: 0.45; pointer-events: none; }

/* ===== 12. 記事ページ（2026-11-03、公開 1 回目。下書きのプレビューを PC とスマホで見て追加） ===== */
/* SWELL の見出しの飾り（h2 の帯など）は消し、§2 の線だけにする */
.post_content h2 { background: none !important; color: var(--mt-ink) !important; }
.post_content h2::after { content: none !important; }
.post_content h3::before, .post_content h3::after { content: none !important; }
.post_content h2:first-child { margin-top: 1.2em; }
/* 目次: 白い面と細い線で、本文より目立たせない */
.post_content .p-toc { background: var(--mt-surface); border: 1px solid var(--mt-line); border-radius: var(--mt-radius); padding: 1em 1.2em; margin: 0 0 2em; }
.post_content .p-toc::before, .post_content .p-toc::after { display: none; }
.p-toc__ttl { font-size: 0.95rem; font-weight: 700; color: var(--mt-ink); }
.p-toc__list { font-size: 0.92rem; }
/* 画面の左に固定された共有ボタンは読むのを邪魔するので出さない（記事の下の共有ボタンは残す） */
.c-shareBtns.-fix { display: none !important; }
/* 記事の上の日付・カテゴリ */
.p-articleMetas { font-size: 0.82rem; }
.c-postTitle__ttl { line-height: 1.5; }

/* 書き手の欄（記事の冒頭。アイコンは note と同じヨシタカ） */
.mty-byline { display: flex; align-items: center; gap: 12px; margin: 0 0 1.4em; padding: 10px 12px; background: var(--mt-surface); border: 1px solid var(--mt-line); border-radius: var(--mt-radius); }
.mty-byline__img { width: 40px; height: 40px; border-radius: 50%; flex: none; object-fit: cover; }
.post_content .mty-byline p { margin: 0; font-size: 0.85rem; line-height: 1.7; color: var(--mt-ink-sub); }
/* 結論の箱の「結論」の見出し */
.mt-answer strong:first-child { display: block; font-size: 0.85rem; letter-spacing: 0.08em; margin-bottom: 0.2em; }
.post_content .mt-answer p { margin: 0; }
/* 記事の中の注記（> で書いた行）。本人の体験の囲み（破線）と分ける */
.post_content p.mt-note { border-style: solid; border-color: var(--mt-line); color: var(--mt-ink-sub); font-size: 0.9em; }

/* 写真の並び（スマホでも 2 列。続けて置いた写真が縦に長く続いて答えが遠くならないように） */
.mt-gallery { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 1.2em 0 2em; }
.mt-gallery:has(> :only-child) { grid-template-columns: minmax(0, 1fr); max-width: 520px; }
.mt-gallery .mt-photo { margin: 0; }
.mt-gallery:not(:has(> :only-child)) .mt-photo img { aspect-ratio: 4 / 3; object-fit: cover; object-position: 50% 35%; } /* 2026-11-04 4:3 に切り抜くのは 2 枚以上のギャラリーだけ。単独の写真には比率を当てず、width/height 属性の本来の比率に任せる（縦長・16:9 を壊さず、読み込み前も正しい枠で CLS が出ない） */
/* 単独の写真の比率: 上の :not(:has(> :only-child)) で 4:3 を外した。`aspect-ratio: auto` を当てると属性の比率が消え、遅延読み込みの写真が高さ 1500px のまま残った（2026-11-04）。当て直さないこと。mobile_qa.js の GIANT で検出する */
.post_content .mt-photo figcaption { font-size: 0.8rem; line-height: 1.6; color: var(--mt-ink-sub); }

/* 比較の表: PC は表、スマホ（600px 以下）は行ごとのカード（figures.css）。外側に余白だけ付ける */
.mt-table { margin: 0 0 1.8em; }
.post_content .mt-table .mty-compare { background: var(--mt-surface); border: 1px solid var(--mt-line); border-radius: var(--mt-radius); border-collapse: separate; border-spacing: 0; overflow: hidden; }
.post_content .mt-table .mty-compare thead th { background: var(--mt-brown-thin); color: var(--mt-ink); white-space: normal; }
.post_content .mt-table .mty-compare tbody th { background: none; }
@media (max-width: 600px) {
  .post_content .mt-table .mty-compare { background: none; border: 0; overflow: visible; }
  .post_content .mt-table .mty-compare tr { background: var(--mt-surface); }
  .post_content .mt-table .mty-compare td { border: 0; }
}

/* 出典（記事の最後。小さめでも読める濃さ） */
.post_content .mty-sources { margin: 3em 0 1em; padding: 1em 1.2em; background: var(--mt-surface); border: 1px solid var(--mt-line); border-radius: var(--mt-radius); color: var(--mt-ink-sub); }
.post_content .mty-sources h2 { font-size: 1rem; margin: 0 0 0.6em; padding: 0; border: 0; }
.post_content .mty-sources h2::before { content: none; }
.post_content .mty-sources ul { margin: 0; padding-left: 1.2em; font-size: 0.82rem; line-height: 1.8; }
.post_content .mty-sources a { word-break: break-all; color: var(--mt-ink-sub); }

/* スマホの画面下の固定メニューが、本文の最後・フォーム・フッターを隠さないように */
@media (max-width: 959px) {
  body:has(#fix_bottom_menu) #footer, body:has(#fix_bottom_menu) .l-footer { padding-bottom: calc(72px + env(safe-area-inset-bottom)); }
  body:has(#fix_bottom_menu) .wpcf7 { margin-bottom: 24px; }
}

/* 入口が公開前なら、押せない入口は出さない（functions.php が .mt-soon にした物）。記事が公開されると自動で出る */
:is(.mt-worries, .mt-steps, .mt-cats, .mt-reads) > li:has(.mt-soon) { display: none; }
.mt-cats > .mt-soon { display: none; }

/* トップ「最初に読む 5 本」: 番号付きの横長の行（スマホでも答えまでの距離が短い） */
.mt-section-lead { color: var(--mt-ink-sub); font-size: 0.92rem; margin: -0.4em 0 1em; }
.mt-reads { list-style: none; margin: 0 0 8px; padding: 0; display: grid; gap: 10px; counter-reset: read; }
.post_content .mt-reads > li { margin: 0; padding: 0; counter-increment: read; }
.post_content .mt-reads > li::before { content: none; }
.mt-reads a { display: grid; grid-template-columns: 112px 1fr; gap: 12px; align-items: center; padding: 10px; background: var(--mt-surface); border: 1px solid var(--mt-line); border-radius: var(--mt-radius); color: var(--mt-ink); text-decoration: none; position: relative; }
.mt-reads a:hover { border-color: var(--mt-green); }
.mt-reads img { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 6px; display: block; }
.mt-reads__body strong { display: block; font-size: 1rem; line-height: 1.5; }
.mt-reads__body strong::before { content: counter(read) ". "; color: var(--mt-green); }
.mt-reads__body span { display: block; font-size: 0.82rem; color: var(--mt-ink-sub); line-height: 1.6; margin-top: 2px; }
@media (min-width: 760px) { .mt-reads a { grid-template-columns: 168px 1fr; padding: 12px 16px; } .mt-reads__body strong { font-size: 1.05rem; } }
.mt-author__img { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; }
.mt-reads__body strong, .mt-reads__body span, .mt-section-lead { word-break: auto-phrase; }

/* お問い合わせ（Contact Form 7）: 入力欄を画面の幅に収め、送信ボタンをサイトのボタンにそろえる（2026-11-03、375px で右にはみ出していた） */
.wpcf7 :is(input[type="text"], input[type="email"], input[type="url"], input[type="tel"], textarea) {
  width: 100%; max-width: 100%; box-sizing: border-box; padding: 10px 12px; font-size: 16px; /* 16px 未満だと iPhone で入力時に拡大される */
  background: var(--mt-surface); border: 1px solid var(--mt-line); border-radius: 6px; color: var(--mt-ink);
}
.wpcf7 textarea { min-height: 10em; }
.wpcf7 :is(input, textarea):focus { border-color: var(--mt-green); outline: 2px solid var(--mt-focus); outline-offset: 1px; }
.wpcf7 label { display: block; font-weight: 700; font-size: 0.95rem; }
.wpcf7 input[type="submit"] {
  appearance: none; display: inline-block; min-width: 12em; padding: 12px 24px; border: 0; border-radius: var(--mt-radius);
  background: var(--mt-cta); color: #fff; font-size: 1rem; font-weight: 700; cursor: pointer;
}
.wpcf7 input[type="submit"]:hover { background: var(--mt-cta-hover); }

/* ===== 13. 白の誌面（2026-11-03。本人「白くて清潔感・おしゃれ感」「&Premium はおしゃれ」「暗いのは厳禁」）=====
   参考にした作り方（引き写しはしない）: 生活誌の Web 版に共通する、白い地・大きな写真・小さく整えた文字・箱を使わず余白で区切る組み。
   見出しは明朝（しっぽり明朝 B1）、本文はゴシック。色は §1 の茶と深緑を、文字と細い線にだけ使う。 */
:root {
  --mt-bg: #FFFFFF;
  --mt-surface: #FFFFFF;
  --mt-line: #ECE8E2;
  --mt-ink: #231A14;
  --mt-ink-sub: #74685E;
  --mt-mincho: "Shippori Mincho B1", "Yu Mincho", "Hiragino Mincho ProN", serif;
  --color_bg: #FFFFFF;
}
body, #body_wrap, .l-content, .l-mainContent, #content { background: #FFFFFF; }
/* ヘッダー: 白・細い線・ロゴは明朝 */
.l-header { background: #FFFFFF; border-bottom: 1px solid var(--mt-line); box-shadow: none; }
.l-header__logo .c-headLogo__link { font-family: var(--mt-mincho); font-weight: 700; letter-spacing: 0.12em; }
.c-gnav > .menu-item > a .ttl { font-size: 0.86rem; letter-spacing: 0.08em; font-weight: 500; }
.l-header__bar { display: none; } /* 上の茶色の帯（キャッチフレーズ）は外して白く抜く */
/* 見出しを明朝に */
.c-postTitle__ttl, .post_content h2, .mt-hero__title, .mt-cover__title, .mt-section-title, .c-pageTitle__inner { font-family: var(--mt-mincho); font-weight: 700; letter-spacing: 0.04em; }
.post_content h2 { border-bottom: 1px solid var(--mt-line); padding-bottom: 0.6em; }
.post_content h2::before { height: 1px; width: 2.4em; bottom: -1px; background: var(--mt-ink); }
.post_content h3 { border-left: 0; padding-left: 0; font-size: 1.08em; }
.post_content h3::before { content: "" !important; display: inline-block; width: 0.9em; height: 1px; background: var(--mt-ink-sub); vertical-align: middle; margin-right: 0.5em; }
/* 箱を軽く: 結論・分かること・書き手欄・目次は、白地に細い線だけ */
.mt-answer { background: #F6F9F7; border-left: 2px solid var(--mt-green); border-radius: 0; }
.mt-learn, .mty-byline, .post_content .p-toc, .post_content .mty-sources { background: #FFFFFF; border: 0; border-top: 1px solid var(--mt-line); border-bottom: 1px solid var(--mt-line); border-radius: 0; padding-left: 0; padding-right: 0; }
.post_content .mt-table .mty-compare { border-radius: 0; border-left: 0; border-right: 0; }
.post_content .mt-table .mty-compare thead th { background: #FAF8F5; }
/* 記事の扉の写真は角を丸めない（誌面の写真のように） */
.p-articleThumb__img, .mt-gallery .mt-photo img, .mt-photo img, .mt-reads img { border-radius: 0 !important; }
/* 記事の題 */
.c-postTitle__ttl { font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.3rem); line-height: 1.45; }
.c-postTitle__date { font-family: var(--mt-mincho); }

/* --- トップ: 最初の画面（全景の写真の左の余白に、大きな見出しを重ねる） --- */
.home #content.l-content { padding-top: 0; }
.mt-cover { position: relative; margin: 0 calc(50% - 50vw) var(--mt-space-7); }
.mt-cover__img img { display: block; width: 100%; height: clamp(420px, 62vw, 760px); object-fit: cover; object-position: 70% 60%; }
.mt-cover__text { position: absolute; left: max(24px, calc(50vw - 540px)); top: 50%; transform: translateY(-50%); max-width: 520px; }
.mt-cover__kicker { margin: 0 0 1em; font-size: 0.82rem; letter-spacing: 0.24em; color: var(--mt-green); font-weight: 700; }
.post_content .mt-cover__title { margin: 0; padding: 0; border: 0; background: none; font-size: clamp(1.9rem, 1.2rem + 2.6vw, 3.3rem); line-height: 1.45; color: var(--mt-ink); }
.post_content .mt-cover__title::before { content: none; }
.post_content .mt-cover__lead { margin: 1.4em 0 1.8em; font-size: 0.98rem; line-height: 2; color: var(--mt-ink-sub); }
.mt-cover .mt-cta { border-radius: 0; padding: 16px 28px; display: inline-flex; flex-direction: column; gap: 2px; }
.mt-cover .mt-cta__label { font-size: 0.8rem; letter-spacing: 0.12em; opacity: 0.85; }
.mt-cover .mt-cta__title { font-size: 1.02rem; }
.post_content .mt-cover .mt-cta-sub { margin: 1em 0 0; font-size: 0.85rem; color: var(--mt-ink-sub); }
@media (max-width: 760px) {
  .mt-cover__img img { height: 62vw; object-position: 82% 60%; }
  .mt-cover__text { position: static; transform: none; max-width: none; padding: 28px 20px 0; }
}

/* --- トップ: 見出しは小さな英字ではなく、明朝の日本語＋細い線 --- */
.post_content .mt-section-title { font-size: clamp(1.3rem, 1.1rem + 0.8vw, 1.7rem); border: 0; padding: 0; margin: var(--mt-space-8) 0 var(--mt-space-4); text-align: left; }
.post_content .mt-section-title::before { content: none; }
.post_content .mt-section-title::after { content: ""; display: block; width: 2.4em; height: 1px; background: var(--mt-ink); margin-top: 0.6em; }

/* --- 悩みから探す: 箱をやめ、上の線と余白だけで区切る --- */
.mt-worries :is(a, .mt-soon) { border: 0; border-top: 1px solid var(--mt-ink); border-radius: 0; background: none; padding: 16px 4px 8px; }
.mt-worries :is(a, .mt-soon):hover, .mt-worries :is(a, .mt-soon):has(strong):hover { background: #FAF8F5; border-color: var(--mt-green); }
.mt-worries strong { font-family: var(--mt-mincho); font-size: 1.08rem; }
.mt-worries svg { color: var(--mt-green); }

/* --- 最初に読む 5 本: 1 本目を大きく、残りは写真の下に題（誌面の組み） --- */
.mt-reads { gap: 32px 24px; }
.mt-reads a { display: block; padding: 0; border: 0; background: none; }
.mt-reads a:hover { background: none; }
.mt-reads a:hover img { opacity: 0.88; }
.mt-reads img { aspect-ratio: 16 / 9; }
.mt-reads__body { display: block; padding-top: 12px; }
.mt-reads__body strong { font-family: var(--mt-mincho); font-size: 1.12rem; line-height: 1.6; }
.mt-reads__body strong::before { content: counter(read) ".  "; font-family: var(--mt-font); font-size: 0.78rem; letter-spacing: 0.1em; color: var(--mt-green); vertical-align: 0.15em; }
@media (min-width: 760px) {
  .mt-reads { grid-template-columns: repeat(2, 1fr); }
  .mt-reads > li:first-child { grid-column: 1 / -1; }
  .mt-reads > li:first-child a { display: grid; grid-template-columns: 1.4fr 1fr; gap: 32px; align-items: center; }
  .mt-reads > li:first-child .mt-reads__body strong { font-size: 1.5rem; }
  .mt-reads a { grid-template-columns: none; }
}
@media (max-width: 759px) {
  .mt-reads > li:not(:first-child) a { display: grid; grid-template-columns: 120px 1fr; gap: 14px; align-items: start; }
  .mt-reads > li:not(:first-child) .mt-reads__body { padding-top: 0; }
}

/* --- 書いている人・道具: 箱をやめる --- */
.mt-author { border: 0; border-top: 1px solid var(--mt-line); border-bottom: 1px solid var(--mt-line); border-radius: 0; background: none; padding: 20px 0; }
.mt-photo--trio .mt-photo img { border-radius: 0; aspect-ratio: 1 / 1; object-fit: cover; }

/* --- スマホの画面下の固定メニューも白く、細い線で --- */
#fix_bottom_menu { background: rgba(255,255,255,0.96); backdrop-filter: blur(6px); border-top: 1px solid var(--mt-line); }
/* フッター */
.l-footer, .l-footer__inner, #footer { background: #FAF8F5; }
/* 記事ページの上の部分も白く軽く（カテゴリの札は線だけ、扉の写真に影を付けない、パンくずは白地） */
.p-articleThumb__img, .p-articleThumb { box-shadow: none !important; }
.c-categoryList__link, .p-articleMetas .c-categoryList__link { background: none !important; color: var(--mt-green) !important; border: 1px solid currentColor; border-radius: 0 !important; padding: 2px 10px; font-size: 0.75rem; letter-spacing: 0.06em; }
.p-breadcrumb, #breadcrumb { background: #FFFFFF !important; border-bottom: 1px solid var(--mt-line); }
.c-postTitle__date { color: var(--mt-ink-sub); }
.p-postList__thumb, .p-postList__thumb img, .c-postThumb__figure { border-radius: 0 !important; box-shadow: none !important; }

/* ===== 14. 記事の下とフッター（2026-11-03。本人「なんかダサい」「フッター」）===== */
/* 共有ボタン: 原色の帯をやめ、白地に細い線と墨のアイコン */
.c-shareBtns__message { font-family: var(--mt-mincho); font-size: 0.9rem; color: var(--mt-ink-sub); }
.c-shareBtns__message::before, .c-shareBtns__message::after { opacity: 0.4; }
.c-shareBtns__btn { background: #FFFFFF !important; color: var(--mt-ink) !important; border: 1px solid var(--mt-line); border-radius: 0 !important; box-shadow: none !important; height: 40px; }
.c-shareBtns__btn:hover { border-color: var(--mt-ink); }
.c-shareBtns__icon { color: var(--mt-ink) !important; }
/* カテゴリ・タグの札 */
.p-articleFoot .c-categoryList__link, .l-articleBottom .c-categoryList__link { font-size: 0.75rem; }
/* 前後の記事: 茶色のつまみをやめ、細い線と明朝の題 */
.p-pnLinks { border-top: 1px solid var(--mt-line); border-bottom: 1px solid var(--mt-line); padding: 16px 0; }
.p-pnLinks__link { background: none !important; color: var(--mt-ink) !important; font-family: var(--mt-mincho); font-size: 0.92rem; line-height: 1.6; padding: 8px 4px !important; }
.p-pnLinks__link::before { background: none !important; border-color: var(--mt-ink-sub) !important; color: var(--mt-ink-sub) !important; width: auto !important; }
.p-pnLinks__item.-prev .p-pnLinks__link::before, .p-pnLinks__item.-next .p-pnLinks__link::before { content: "" !important; width: 8px !important; height: 8px !important; border-left: 1px solid; border-bottom: 1px solid; background: none !important; }
/* 記事の下の見出し（この記事を書いた人・関連記事） */
.l-articleBottom__title.c-secTitle, .c-secTitle { font-family: var(--mt-mincho); font-weight: 700; font-size: 1.2rem; border: 0 !important; padding: 0 !important; background: none !important; color: var(--mt-ink) !important; }
.l-articleBottom__title.c-secTitle::before, .c-secTitle::before { content: none !important; }
.l-articleBottom__title.c-secTitle::after { content: ""; display: block; width: 2.4em; height: 1px; background: var(--mt-ink); margin-top: 0.6em; }
/* この記事を書いた人: 箱をやめ、上下の線だけ */
.p-authorBox { border: 0 !important; border-top: 1px solid var(--mt-line) !important; border-bottom: 1px solid var(--mt-line) !important; border-radius: 0; padding: 24px 0 !important; background: none !important; }
.p-authorBox__l { border-right: 0 !important; }
.p-authorBox .avatar { width: 72px !important; height: 72px !important; border: 0 !important; object-fit: cover; }
.p-authorBox__name { font-family: var(--mt-mincho); font-weight: 700; }
.p-authorBox__desc { font-size: 0.9rem; line-height: 1.9; color: var(--mt-ink-sub); }
/* 関連記事: 写真を大きく、題は明朝 */
.p-relatedPosts .p-postList__title, .p-postList__title { font-family: var(--mt-mincho); font-weight: 700; font-size: 0.98rem; line-height: 1.6; }
.p-postList__meta { font-size: 0.72rem; color: var(--mt-ink-sub); }

/* フッター: 白地・細い線・明朝のロゴと一行の説明 */
#footer, .l-footer, .l-footer__inner, .l-footer__foot { background: #FFFFFF !important; color: var(--mt-ink); }
.l-footer { border-top: 1px solid var(--mt-line); }
.l-footer__foot { padding: 40px 0 24px !important; text-align: center; }
@media (min-width: 960px) { .l-footer__foot { padding: 56px 0 40px !important; } }
.mt-foot-brand { margin: 0 auto 28px; }
.mt-foot-brand__logo { display: inline-block; font-family: var(--mt-mincho); font-weight: 700; font-size: 1.6rem; letter-spacing: 0.2em; color: var(--mt-ink) !important; text-decoration: none; }
.mt-foot-brand__lead { margin: 10px 0 0; font-size: 0.85rem; color: var(--mt-ink-sub); letter-spacing: 0.04em; }
.l-footer__nav { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 24px; padding: 20px 0 !important; margin: 0 auto 20px !important; border-top: 1px solid var(--mt-line); border-bottom: 1px solid var(--mt-line); max-width: 760px; }
.l-footer__nav a { color: var(--mt-ink) !important; font-size: 0.82rem; letter-spacing: 0.06em; padding: 4px 0 !important; border: 0 !important; }
.l-footer__nav a:hover { color: var(--mt-green) !important; }
.l-footer .copyright { font-size: 0.72rem; color: var(--mt-ink-sub); letter-spacing: 0.1em; }
/* 焙煎度の帯（M-01。雑誌の小図版のように、色の帯と両端の言葉だけ） */
.mt-roastbar { display: grid; grid-template-columns: repeat(3, 1fr); margin: 8px 0 6px; }
.mt-roastbar span { display: block; padding: 14px 8px; color: #FFFFFF; font-size: 0.88rem; font-weight: 700; text-align: center; letter-spacing: 0.1em; }
.post_content .mt-roastbar__note { display: flex; justify-content: space-between; margin: 0 0 4px; font-size: 0.8rem; color: var(--mt-ink-sub); }
.post_content .mt-roastbar__note span:first-child::before { content: "← "; }
.post_content .mt-roastbar__note span:last-child::after { content: " →"; }

/* トップの棚（淹れ方・豆のこと・道具とことば）: 写真の下に明朝の題。PC 3 列、スマホは横に流す */
.mt-shelf { list-style: none; margin: 0 0 8px; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.post_content .mt-shelf > li { margin: 0; padding: 0; }
.post_content .mt-shelf > li::before { content: none; }
.mt-shelf a { display: block; color: var(--mt-ink); text-decoration: none; }
.mt-shelf img { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; display: block; }
.mt-shelf a:hover img { opacity: 0.88; }
.mt-shelf strong { display: block; margin-top: 10px; font-family: var(--mt-mincho); font-size: 1rem; line-height: 1.6; word-break: auto-phrase; }
@media (max-width: 759px) {
  .mt-shelf { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 68%; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 8px; gap: 14px; }
  .mt-shelf > li { scroll-snap-align: start; }
}
:is(.mt-shelf) > li:has(.mt-soon) { display: none; }
/* 悩みから探すは 8 つ: PC 4 列 × 2 段、スマホ 2 列 */
/* 前後の記事（上書き）: SWELL の左右の太い枠線（茶色のつまみ）を外し、「前の記事」「次の記事」の小さな見出しを付ける */
.p-pnLinks__link { border-left: 0 !important; border-right: 0 !important; display: block; }
.p-pnLinks__link::before { content: none !important; border: 0 !important; width: auto !important; height: auto !important; }
.p-pnLinks__item.-prev .p-pnLinks__link::after, .p-pnLinks__item.-next .p-pnLinks__link::after { display: none !important; }
.p-pnLinks__title::before { display: block; font-family: var(--mt-font); font-size: 0.7rem; letter-spacing: 0.12em; color: var(--mt-ink-sub); margin-bottom: 4px; }
.p-pnLinks__item.-prev .p-pnLinks__title::before { content: "前の記事"; }
.p-pnLinks__item.-next .p-pnLinks__title::before { content: "次の記事"; }
.p-pnLinks__item.-next { text-align: right; }
/* カテゴリの一覧（白の誌面）: 斜体の英字の副題は出さない、説明は枠なし、写真の上の札は白地に墨 */
.c-pageTitle__subTitle { display: none !important; }
.c-pageTitle { border: 0 !important; }
.c-pageTitle__inner { font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem); background: none !important; padding: 0 !important; border: 0 !important; }
.c-pageTitle__inner::before, .c-pageTitle__inner::after { content: none !important; }
.p-termContent, .c-taxonomyDescription, .p-termHead__desc, .term-description { border: 0 !important; background: none !important; padding: 0 !important; color: var(--mt-ink-sub); font-size: 0.95rem; line-height: 2; }
.c-postThumb__cat { background: rgba(255,255,255,0.94) !important; color: var(--mt-ink) !important; border-radius: 0 !important; font-size: 0.8rem !important; letter-spacing: 0.06em; padding: 2px 8px !important; }
.c-postThumb__cat::before { display: none !important; }
.p-postList__excerpt { font-size: 0.82rem; color: var(--mt-ink-sub); line-height: 1.8; }

/* ===== 15. 商品の箱（Rinker）を白の誌面に（2026-11-03。本人「全面的に Rinker も」）=====
   箱をやめて上下の細い線だけ。ボタンは店ごとの色をやめ、白地に細い枠の同じ形にそろえる（どの店も同じ扱い）。
   写真がない商品（書き手が持っていない物）は、空いた写真の枠を詰める。 */
.post_content .mt-item { margin: var(--mt-space-5, 2rem) 0; }
.post_content .yyi-rinker-contents {
  background: #FFFFFF !important; border: 0 !important; border-top: 1px solid var(--mt-line) !important;
  border-bottom: 1px solid var(--mt-line) !important; border-radius: 0 !important; box-shadow: none !important;
  margin: 0 !important; padding: 1.2em 0 !important;
}
.post_content .mt-item + .mt-item .yyi-rinker-contents { border-top: 0 !important; }
.post_content .yyi-rinker-contents .yyi-rinker-box { align-items: center; gap: 1.2em; border: 0 !important; padding: 0 !important; background: none !important; box-shadow: none !important; }
.post_content .yyi-rinker-contents .yyi-rinker-image { flex: 0 0 96px; width: 96px; margin: 0 !important; }
.post_content .yyi-rinker-contents .yyi-rinker-image img { width: 96px !important; height: 96px !important; object-fit: cover; border-radius: 0 !important; }
.post_content .yyi-rinker-contents .yyi-rinker-image:has(img[src=""]),
.post_content .yyi-rinker-contents .yyi-rinker-image:not(:has(img[src])) { display: none; }
.post_content .yyi-rinker-contents .yyi-rinker-info { padding: 0 !important; width: auto !important; flex: 1 1 auto; }
.post_content .yyi-rinker-contents .yyi-rinker-title a,
.post_content .yyi-rinker-contents .yyi-rinker-title { font-family: var(--mt-mincho); font-weight: 700 !important; font-size: 1rem; line-height: 1.6; color: var(--mt-ink) !important; text-decoration: none; }
.post_content .yyi-rinker-contents .brand { font-size: 0.78rem; letter-spacing: 0.06em; color: var(--mt-ink-sub); }
.post_content .yyi-rinker-contents ul.yyi-rinker-links { display: flex; flex-wrap: wrap; gap: 0.5em; margin: 0.8em 0 0 !important; padding: 0 !important; }
.post_content .yyi-rinker-contents ul.yyi-rinker-links li { margin: 0 !important; padding: 0 !important; width: auto !important; flex: 0 0 auto; }
.post_content .yyi-rinker-contents ul.yyi-rinker-links li::before { content: none !important; }
.post_content .yyi-rinker-contents ul.yyi-rinker-links li a {
  background: #FFFFFF !important; color: var(--mt-ink) !important; border: 1px solid var(--mt-ink) !important;
  border-radius: 0 !important; box-shadow: none !important; font-weight: 500 !important; font-size: 0.8rem !important;
  letter-spacing: 0.04em; padding: 0.55em 1.1em !important; line-height: 1.4 !important; text-decoration: none;
}
.post_content .yyi-rinker-contents ul.yyi-rinker-links li a::after { content: none !important; }
.post_content .yyi-rinker-contents ul.yyi-rinker-links li a:hover { background: var(--mt-ink) !important; color: #FFFFFF !important; }
.post_content .yyi-rinker-contents ul.yyi-rinker-links li img { position: absolute; width: 1px; height: 1px; }
@media (max-width: 599px) {
  .post_content .yyi-rinker-contents .yyi-rinker-box { align-items: flex-start; }
  .post_content .yyi-rinker-contents .yyi-rinker-image { flex-basis: 72px; width: 72px; }
  .post_content .yyi-rinker-contents .yyi-rinker-image img { width: 72px !important; height: 72px !important; }
}

/* ===== 16. 商品の箱（ポチップ）を白の誌面に（2026-11-03。本人「Rinker からポチップに乗り換える」）=====
   §15（Rinker）と同じ考え方: 箱をやめて上下の細い線、題は明朝、ボタンは白地に細い枠でどの店も同じ形。 */
.post_content .pochipp-box {
  background: #FFFFFF !important; border: 0 !important; border-top: 1px solid var(--mt-line) !important;
  border-bottom: 1px solid var(--mt-line) !important; border-radius: 0 !important; box-shadow: none !important;
  padding: 1.2em 0 !important; margin: 0 !important;
}
.post_content .mt-item + .mt-item .pochipp-box { border-top: 0 !important; }
.post_content .pochipp-box__image img { border-radius: 0 !important; object-fit: contain !important; background: #FFFFFF; } /* 商品画像は切り抜かず全体を見せる */
.post_content .pochipp-box__title,
.post_content .pochipp-box__title a { font-family: var(--mt-mincho); font-weight: 700 !important; font-size: 1rem !important; line-height: 1.6; color: var(--mt-ink) !important; text-decoration: none !important; }
.post_content .pochipp-box__info { font-size: 0.8rem; color: var(--mt-ink-sub); }
.post_content .pochipp-box[data-btn-style] .pochipp-box__btn {
  background: #FFFFFF !important; color: var(--mt-ink) !important; border: 1px solid var(--mt-ink) !important;
  border-radius: 0 !important; box-shadow: none !important; font-weight: 500 !important; font-size: 0.8rem !important;
  letter-spacing: 0.04em; text-decoration: none !important;
}
.post_content .pochipp-box[data-btn-style] .pochipp-box__btn * { color: inherit !important; }
.post_content .pochipp-box__btn::before, .post_content .pochipp-box__btn::after { display: none !important; }
.post_content .pochipp-box[data-btn-style] .pochipp-box__btn:hover { background: var(--mt-ink) !important; color: #FFFFFF !important; }
.post_content .pochipp-box__logo { display: none !important; } /* 右下のポチップの印は出さない（本人 2026-11-03） */
/* 価格は出さない: Amazon の API が使えず価格が自動で更新されないため（方針ページ「固定の価格は書かない」）。買う前の値段はリンク先で見てもらう */
.post_content .pochipp-box__price { display: none !important; }
/* 実物の写真が 1 枚だけの並び: 縦長の写真が画面いっぱいにならないよう幅を抑える */
.post_content .mt-gallery:has(> .mt-photo:only-child) { max-width: 360px; }
/* スマホ: 箱を「左に画像・右に名前とボタン」の横並びにして、3 つ続いても圧迫しないようにする（1 箱 約 300px → 約 150px） */
@media (max-width: 599px) {
  .post_content .pochipp-box { display: grid !important; grid-template-columns: 84px 1fr; column-gap: 14px; align-items: start; text-align: left !important; }
  .post_content .pochipp-box__image { grid-column: 1; grid-row: 1 / span 2; width: 84px !important; max-width: 84px !important; margin: 0 !important; padding: 0 !important; }
  .post_content .pochipp-box__image img { width: 84px !important; height: 84px !important; max-width: 84px !important; }
  .post_content .pochipp-box__body { grid-column: 2; grid-row: 1; padding: 0 !important; margin: 0 !important; text-align: left !important; }
  .post_content .pochipp-box__title, .post_content .pochipp-box__title a { font-size: 0.95rem !important; text-align: left !important; }
  .post_content .pochipp-box__btns { grid-column: 2; grid-row: 2; margin: 0.6em 0 0 !important; padding: 0 !important; width: 100% !important; }
  .post_content .pochipp-box__btnwrap { width: 100% !important; max-width: none !important; margin: 0 !important; }
}

/* ===== 17. 記事の頭の日付は 1 つだけ（2026-11-03 本人「更新した日付は不要」）=====
   題の横の大きい日付（公開日）だけ残し、カテゴリの横の小さい日付（公開日・更新日）は出さない。一覧のカードの日付はそのまま */
.single .p-articleMetas__times { display: none !important; }


/* ===== 18. モバイルファースト（2026-11-03 本人「PC よりモバイル」「フッターが見切れていた」）=====
   方針: スマホの読みやすさ > PC の飾り。原因のある所で直す（!important を足さない）。
   見つけた問題と原因: backup/2026-11-03_1804_mobile-first-before と HANDOVER に記録
   1) 固定メニュー: 項目名に <i> を埋め込んでいたため SWELL の出す空の <i class="">（20px）と二重の <span> になり、項目が 58px・バーは 50px → 文字が画面の下にはみ出し。メニュー側（項目名＝文字だけ、概要欄＝icon-xxx）で直した。ここはその上の見た目の調整
   2) 文字: SWELL のスマホの基準が画面幅 vw 連動（320px で本文 12.8px・補足 9px 台）。下限をつける
   3) タップ領域: フッターのリンク・商品の箱のボタンが 44px 未満 */
@media (max-width: 959px) {
  /* 1) 固定メニュー: 項目は「アイコン <i> ＋ 文字 <span>」の公式の形（メニューの概要欄にアイコンのクラス名）。文字は 11px、押せる高さは 48px 以上 */
  #fix_bottom_menu .menu_list { height: auto; padding: 0; align-items: stretch; }
  #fix_bottom_menu .menu-item a { padding: 8px 2px; min-height: 48px; }
  #fix_bottom_menu .menu-item a > span { margin-top: 4px; font-size: 11px; line-height: 1.2; letter-spacing: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* ラベルは全角 5 字まで（4 項目・320px で収まる） */
  /* バーの高さ（約 52px）＋ safe-area ぶん、フッターの下を空ける */
  body:has(#fix_bottom_menu) #footer, body:has(#fix_bottom_menu) .l-footer { padding-bottom: calc(56px + env(safe-area-inset-bottom) * .5); } /* バー約 54px ＋ SWELL が足す safe-area の半分 */
}
@media (max-width: 599px) {
  /* 2) 文字: 画面幅に比例させる SWELL の既定（3.6vw・4vw）に下限と上限をつける */
  :root { --swl-fz--root: clamp(15px, 4vw, 16px); }
  /* 本文（--swl-fz--content）はここで持たない。カスタマイザー「記事本文のフォントサイズ（スマホ）」＝固定サイズ: 大（16px）が正本（D-049）。root は SWELL に設定項目がないのでここ */
  /* 補足の文字は 12px 未満にしない（パンくず・日付・カテゴリ・キャプション・商品の説明・広告の注記・コピーライト） */
  .p-breadcrumb__text, .p-breadcrumb .__home, .c-categoryList__link, .p-articleMetas .c-categoryList__link, .p-articleFoot .c-categoryList__link,
  .l-articleBottom .c-categoryList__link, .p-articleMetas, .c-postTimes,
  .p-postList__meta, .l-footer .copyright, .c-postThumb__cat { font-size: 12px; }
  .post_content .mt-photo figcaption, .post_content figcaption, .post_content .pochipp-box__info,
  .post_content .mty-byline p, .post_content .mt-pr, .post_content .mty-sources ul { font-size: 13px; }
  .p-toc__link { font-size: 14px; }
  .p-toc__list .p-toc__link { padding-top: 9px; padding-bottom: 9px; } /* 目次の 1 行は約 38px（長い一覧なので 44px にはしない） */
  .p-articleMetas .c-categoryList__link, .p-articleFoot .c-categoryList__link, .l-articleBottom .c-categoryList__link { padding: 6px 12px; } /* カテゴリ・タグは押しやすく */
  /* 3) タップ領域: フッターのリンクと商品の箱のボタンは高さ 44px 以上 */
  .l-footer__nav { gap: 0 20px; }
  .l-footer__nav a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 2px !important; font-size: 14px; }
  .post_content .pochipp-box[data-btn-style] .pochipp-box__btn { min-height: 44px; font-size: 14px !important; }
  .post_content .pochipp-box { width: 100%; } /* ポチップの既定はスマホで width: 88%（左寄せで右が約 40px 空き、罫線が本文幅に届かない） */
  /* パンくず・ページ送り・書き手の SNS アイコン・フッターのロゴも 44px 角に（見た目の大きさは変えず、押せる範囲だけ広げる） */
  .p-breadcrumb { padding: 0; }
  .p-breadcrumb__item a.p-breadcrumb__text { padding: 13px 0; }
  .c-pagination .page-numbers { width: 44px; height: 44px; line-height: 44px; }
  .c-iconList__link { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; }
  .mt-foot-brand__logo { padding: 3px 0; }
  /* 一覧のカードの題・抜粋、ブログカードの題: SWELL は 3.2〜3.8vw（320px で 10〜12px 台）。下限をつける */
  .p-postList.-type-card.-sp-col1 .p-postList__title { font-size: clamp(15px, 4vw, 17px); }
  .p-postList.-type-card.-sp-col1 .p-postList__excerpt { font-size: 13px; }
  .p-blogCard__title { font-size: clamp(14px, 3.8vw, 16px); }
  /* 記事の題: 日付を題の上に積み、題に幅を使う（横並びだと 262px 幅で 4〜7 行になっていた） */
  .c-postTitle { flex-direction: column-reverse; align-items: flex-start; }
  .c-postTitle__date { display: flex; gap: .4em; align-items: baseline; padding: 0; margin: 0 0 .5em; border: 0; }
  .c-postTitle__date .__y, .c-postTitle__date .__md { font-size: 13px; }
  .c-postTitle__ttl { font-size: clamp(20px, 5.6vw, 23px); line-height: 1.5; padding: 0; margin: 0; }
  /* カテゴリの札・書き手の名前: 見た目は変えず、押せる範囲だけ 44px 近くに広げる */
  .p-articleMetas .c-categoryList__link, .p-articleFoot .c-categoryList__link, .l-articleBottom .c-categoryList__link, .p-authorBox__name { position: relative; }
  .p-articleMetas .c-categoryList__link::after, .p-articleFoot .c-categoryList__link::after, .l-articleBottom .c-categoryList__link::after, .p-authorBox__name::after { content: ""; position: absolute; inset: -10px -4px; }
  .p-authorBox__name::after { inset: -13px -4px; } /* 名前の行は 20px なので広めに（当たり判定を実測して 44px） */
  /* ページトップボタンは 44px に小さくし、フッターのコピーライトにかかりにくく */
  .p-fixBtnWrap { right: 12px; }
  .p-fixBtnWrap .c-fixBtn { width: 44px; height: 44px; }
}

/* ===== 19. リンクだと一目で分かる（2026-11-03 本人「リンクかどうか直感的に分からない」「読者にストレスのないように」）=====
   原因: 本文リンクが下線なし・色が本文の濃い茶とほぼ同じで、リンクと見分けがつかなかった（トップのカードも矢印なし）。
   直し方: ①SWELL 標準設定の「記事内テキストリンクに下線」を ON ②リンク色はカスタマイザー color_link を #9A4B1F に（ここでは持たない。本文の茶と色相・明るさを離した）
   ③下に足す: 下線の太さ・「次に読む」の行間と太字・トップのカードの矢印 */
.post_content a { text-decoration-thickness: 1.5px; text-underline-offset: 0.2em; }
.post_content ul:has(+ .mty-sources) li { margin: 0.6em 0; }   /* 「次に読む」の行間（押しやすく） */
.post_content ul:has(+ .mty-sources) a { font-weight: 700; }
.mt-worries a { position: relative; }   /* 全体がリンクのカードには矢印 */
.mt-worries a::after { content: "→"; position: absolute; top: 14px; right: 4px; color: var(--mt-green); font-size: 1.1rem; line-height: 1; }
.mt-reads__body strong::after, .mt-shelf a strong::after { content: " →"; color: var(--mt-green); font-weight: 400; }

/* ===== 20. トップの折り返し（2026-11-03 本人「より」の途中で改行・「淹/れる」。D-052）=====
   原因: iPhone の Safari は word-break: auto-phrase 未対応。日本語は字の間のどこでも切れるため、狭い幅で単語の途中で切れた。
   直し方: HTML 側に文節の切れ目（<wbr>）を入れ（site/jp_phrase.py）、ここで keep-all にして <wbr> の所でだけ折り返す。
   長すぎて入らない文節だけ overflow-wrap で切る（横にはみ出さない）。見出しは意味のまとまり（.mt-nb）を崩さない。 */
.mt-front, .mt-front :is(h2, p, li, a, strong, span) { word-break: keep-all; overflow-wrap: anywhere; line-break: strict; }
.mt-nb { display: inline-block; }
.post_content .mt-cover__title { text-wrap: balance; }
@media (max-width: 760px) {
  .post_content .mt-cover__title { font-size: clamp(1.7rem, 7.4vw, 2.1rem); letter-spacing: 0.02em; line-height: 1.5; }
}