/* ===== 木曜日のエプロン トップ（2026-09-19 作り直し） =====
   色と書体は mokuep-article.css（ランキング記事）と同じ。生成り・墨・焦げ茶の3系統だけ。
   本文側は .mkt の中だけに効く。ヘッダーのトピック帯とフッターは全ページ共通。 */
:root{
  --mk-ink:#1A1A1A; --mk-text:#2D2D2D; --mk-muted:#6B6B6B;
  --mk-cream:#F5EFE7; --mk-cream-light:#FAF7F2; --mk-white:#FFFFFF;
  --mk-beige:#C9A985; --mk-beige-dark:#A88863; --mk-accent:#75582F; --mk-cta:#8B6B47;
  --mk-line:rgba(201,169,133,.32);
  --mk-serif:"Noto Serif JP","Hiragino Mincho ProN","Yu Mincho","YuMincho",serif;
  --mk-en:"Cormorant Garamond","Times New Roman","Noto Serif JP",serif;
  --mk-sans:-apple-system,BlinkMacSystemFont,"Hiragino Sans","Hiragino Kaku Gothic ProN","Yu Gothic Medium","游ゴシック Medium",YuGothic,Meiryo,sans-serif;
}

/* ---------- ヘッダーのトピック帯（全ページ共通・ESSE型の横スクロール1段） ---------- */
.l-header__spNav{background:var(--mk-cream);border-top:1px solid var(--mk-line);border-bottom:1px solid var(--mk-line);overflow:hidden;position:relative}
/* 右端を生成りでぼかし、横に続きがあると分かるようにする（2026-09-19 代表決定） */
.l-header__spNav::after{content:"";position:absolute;right:0;top:0;bottom:0;width:36px;background:linear-gradient(90deg,rgba(245,239,231,0),var(--mk-cream));pointer-events:none}
.l-header__spNav .p-spHeadMenu{display:flex!important;flex-wrap:nowrap;gap:6px;overflow-x:auto;margin:0;padding:8px 12px;list-style:none;transform:none!important;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.l-header__spNav .p-spHeadMenu::-webkit-scrollbar{display:none}
.l-header__spNav .p-spHeadMenu li{display:block;flex:0 0 auto;width:auto!important;margin:0;padding:0;list-style:none;border:none!important} /* テーマが付ける選択中の下線を消す */
.l-header__spNav .p-spHeadMenu li::before,.l-header__spNav .p-spHeadMenu li::after{content:none}
/* 2026-09-19 代表指示: 各項目を押せるボタンの形にし、文字は本文のタブ・ボタンと同じ太さ・字間にそろえる */
.l-header__spNav .p-spHeadMenu a{position:relative;display:block;padding:6px 13px;border:1px solid var(--mk-line);border-radius:999px;background:#fff;font-family:var(--mk-sans);font-size:13px;font-weight:700;line-height:1.5;letter-spacing:.04em;color:var(--mk-accent);white-space:nowrap;text-decoration:none;transition:background .15s,border-color .15s}
.l-header__spNav .p-spHeadMenu a:hover{border-color:var(--mk-beige)}
.l-header__spNav .p-spHeadMenu .current-menu-item > a{background:var(--mk-ink);border-color:var(--mk-ink);color:#fff}
.l-header__spNav .p-spHeadMenu .current-menu-item > a::after{content:none}
/* パソコン幅（SWELLの切り替え幅960px）ではヘッダー内のメニューがあるので帯は出さない */
@media (min-width:960px){ .l-header__spNav{display:none} }
/* テーマ標準の記事スライダーはトップ本文の「家計とお金」と重複するので出さない（旧トップでも非表示だった） */
.home #post_slider{display:none!important}
/* パソコン幅のグローバルナビ */
.l-header__gnav .c-gnav > li > a,.l-fixHeader__gnav .c-gnav > li > a{font-weight:600;letter-spacing:.04em}
/* フッターのメニュー */
.l-footer__nav{display:flex;flex-wrap:wrap;justify-content:center;gap:4px 0}
.l-footer__nav a{font-size:12.5px}

/* ---------- 本文（.mkt） ---------- */
.mkt{--gut:16px;max-width:720px;margin:0 auto;font-family:var(--mk-sans);font-size:15px;line-height:1.8;color:var(--mk-text);-webkit-font-smoothing:antialiased}
.mkt *{box-sizing:border-box}
.post_content .mkt a{color:inherit;text-decoration:none}
.post_content .mkt h2,.post_content .mkt h3,.post_content .mkt p{margin:0;padding:0;background:none;border:none;color:inherit;font-size:inherit;font-weight:inherit;line-height:inherit;letter-spacing:inherit}
.post_content .mkt h2::before,.post_content .mkt h2::after,.post_content .mkt h3::before,.post_content .mkt h3::after{content:none}
.post_content .mkt .th img,.post_content .mkt .lead-img img{display:block;width:100%;height:100%;max-width:none;object-fit:cover;margin:0;border-radius:0;box-shadow:none}

/* 区画の見出し */
.mkt .sec{padding:40px 0 0}
.mkt .sec-hd{display:flex;align-items:flex-end;justify-content:space-between;margin-bottom:16px;padding-bottom:10px;border-bottom:1px solid var(--mk-line)}
.mkt .sec-hd small{display:block;font-family:var(--mk-en);font-size:11px;letter-spacing:.36em;color:var(--mk-accent);line-height:1.4}
.post_content .mkt .sec-hd h2{font-family:var(--mk-serif);font-weight:600;font-size:19px;letter-spacing:.08em;color:var(--mk-ink);line-height:1.5}
.post_content .mkt .sec-hd a{font-size:12.5px;color:var(--mk-accent);letter-spacing:.04em;white-space:nowrap;padding-bottom:3px}
.mkt .lb{display:inline-block;padding:1px 8px;border:1px solid var(--mk-line);border-radius:3px;font-size:11px;color:var(--mk-accent);letter-spacing:.04em;line-height:1.7;background:var(--mk-white)}
.mkt .dt{font-family:var(--mk-en);font-size:13px;letter-spacing:.06em;color:var(--mk-muted)}
.mkt .new{position:absolute;left:0;top:0;z-index:1;padding:3px 10px;background:var(--mk-ink);color:#fff;font-family:var(--mk-en);font-size:12px;letter-spacing:.24em;line-height:1.6}
.mkt .meta{display:flex;align-items:center;gap:10px}
.mkt .pr{display:inline-block;margin-left:6px;padding:0 5px;border:1px solid var(--mk-muted);border-radius:2px;font-family:var(--mk-sans);font-size:10px;font-weight:400;letter-spacing:.1em;color:var(--mk-muted);line-height:1.6;vertical-align:2px}
.mkt .meta .pr{margin-left:0}

/* 今日の1本 */
.mkt .lead{display:block}
.mkt .lead-img{position:relative;aspect-ratio:4/3;border-radius:6px;overflow:hidden;background:var(--mk-cream)}
.post_content .mkt .lead-ttl{margin:14px 0 8px;font-family:var(--mk-serif);font-weight:600;font-size:20px;line-height:1.6;letter-spacing:.05em;color:var(--mk-ink)}

/* 新着の一覧 */
.mkt .list a{display:flex;gap:14px;padding:14px 0;border-bottom:1px solid var(--mk-line)}
.mkt .list a:first-child{padding-top:0}
.mkt .list .th{position:relative;flex:0 0 104px;height:104px;border-radius:5px;overflow:hidden;background:var(--mk-cream)}
.post_content .mkt .list h3{font-size:15px;font-weight:600;line-height:1.6;color:var(--mk-ink);margin-bottom:6px}
.post_content .mkt .more{display:block;margin:20px auto 0;padding:12px 0;width:100%;text-align:center;border:1px solid var(--mk-beige-dark);border-radius:4px;font-size:13.5px;font-weight:600;letter-spacing:.08em;color:var(--mk-accent)}

/* シーンからさがす */
.mkt .chips{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.post_content .mkt .chips a{display:flex;align-items:baseline;justify-content:space-between;gap:4px;padding:12px 10px;background:var(--mk-cream-light);border:1px solid var(--mk-line);border-radius:5px;font-size:13px;font-weight:600;color:var(--mk-ink);white-space:nowrap}
.mkt .chips a span{font-family:var(--mk-en);font-size:13px;font-weight:400;color:var(--mk-muted);letter-spacing:.04em}

/* 今日はどれにする？（2026-09-19 作り直し） */
.mkt .themes{display:flex;gap:10px;overflow-x:auto;margin:0 calc(var(--gut) * -1);padding:0 0 4px var(--gut);scrollbar-width:none;-webkit-overflow-scrolling:touch}
.mkt .themes::-webkit-scrollbar{display:none}
.post_content .mkt .theme{display:block;flex:0 0 calc((100% - 20px) / 2.3)}
.mkt .theme:last-child{margin-right:16px}
.mkt .theme .ph{position:relative;aspect-ratio:1/1;border-radius:6px;overflow:hidden;background:var(--mk-cream)}
.post_content .mkt .theme .ph img{display:block;width:100%;height:100%;max-width:none;object-fit:cover;margin:0}
.mkt .theme .n{position:absolute;right:0;bottom:0;padding:3px 9px;background:rgba(26,26,26,.82);color:#fff;font-family:var(--mk-en);font-size:14px;letter-spacing:.04em;line-height:1.5}
.mkt .theme .n small{font-family:var(--mk-sans);font-size:10px;margin-left:1px}
.mkt .theme b{display:block;margin-top:8px;font-size:14px;font-weight:700;line-height:1.45;color:var(--mk-ink)}
.mkt .theme .sub{display:block;font-size:11px;color:var(--mk-muted);margin-top:2px;line-height:1.5}
.mkt .sub-hd{margin:22px 0 10px}
.mkt .sub-hd b{font-size:14px;font-weight:700;color:var(--mk-ink);letter-spacing:.04em}
.mkt .btns{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.post_content .mkt .btns a{display:flex;align-items:center;justify-content:space-between;padding:12px;border:1px solid var(--mk-line);border-radius:5px;background:var(--mk-cream-light);font-size:13.5px;font-weight:600;color:var(--mk-ink)}
.mkt .btns a::after{content:"";width:6px;height:6px;border-top:1.5px solid var(--mk-accent);border-right:1.5px solid var(--mk-accent);transform:rotate(45deg)}
/* 食材のイラスト（2026-09-19 代表指示）: 白い丸の中に手描きの線画。イラストのある時だけ左の余白を詰める */
.post_content .mkt .btns a:has(.ic){justify-content:flex-start;gap:10px;padding:9px 12px 9px 9px}
.mkt .btns .ic{flex:0 0 44px;width:44px;height:44px;border-radius:50%;background:#fff}
.mkt .btns .ic svg{display:block;width:44px;height:44px}
.mkt .btns a:has(.ic)::after{margin-left:auto;flex:0 0 auto}
.mkt .btns .nm{line-height:1.45;word-break:keep-all;overflow-wrap:anywhere}
/* スマホ幅は1マスが狭いので、イラストを一回り小さくして「平日の晩ごはん」等の折り返しを減らす */
@media (max-width:759px){ .post_content .mkt .btns a:has(.ic){gap:8px;padding:8px 10px 8px 8px} .mkt .btns .ic,.mkt .btns .ic svg{width:40px;height:40px;flex-basis:40px} }
.mkt .pills{display:flex;flex-wrap:wrap;gap:8px}
.post_content .mkt .pills a{padding:8px 14px;border:1px solid var(--mk-beige);border-radius:999px;font-size:13px;font-weight:600;color:var(--mk-accent);background:#fff}
.mkt .tips-pills{margin-top:14px}
.post_content .mkt .find-note{margin-top:10px;font-size:11px;color:var(--mk-muted);line-height:1.7}
@media (min-width:760px){ .post_content .mkt .theme{flex:0 0 200px} .mkt .btns{grid-template-columns:repeat(3,1fr)} }

/* リールの列：画面の横幅に2.5枚（左の余白＋カード2.5枚＋すき間2つ＝画面幅） */
.mkt .row{display:flex;gap:12px;overflow-x:auto;margin:0 calc(var(--gut) * -1);padding:0 0 4px var(--gut);scrollbar-width:none;-webkit-overflow-scrolling:touch}
.mkt .row::-webkit-scrollbar{display:none}
.mkt .row a{flex:0 0 calc((100% - 24px) / 2.5)}
.mkt .row a:last-child{margin-right:16px}
.mkt .row .th{position:relative;aspect-ratio:9/16;border-radius:5px;overflow:hidden;background:var(--mk-cream)}
.post_content .mkt .row h3{margin-top:8px;font-size:13.5px;font-weight:600;line-height:1.55;color:var(--mk-ink);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}

/* ランキング */
.mkt .rk > a,.mkt .rk2 a{display:block;margin-bottom:20px}
.mkt .rk .th{position:relative;aspect-ratio:16/9;border-radius:6px;overflow:hidden;background:var(--mk-cream)}
.post_content .mkt .rk h3{margin:10px 0 4px;font-family:var(--mk-serif);font-weight:600;font-size:16.5px;line-height:1.6;letter-spacing:.04em;color:var(--mk-ink)}
.post_content .mkt .rk p{font-size:12.5px;color:var(--mk-muted);line-height:1.7}
.mkt .rk2{display:grid;grid-template-columns:1fr 1fr;gap:0 12px}
.post_content .mkt .rk2 h3{font-size:14.5px}

/* 推し買い */
.mkt .band{margin:40px calc(var(--gut) * -1) 0;padding:36px var(--gut);background:var(--mk-cream-light)}
.mkt .band .sec-hd{margin-bottom:0}
.post_content .mkt .pick{display:flex;gap:14px;margin-top:16px;padding:12px;background:var(--mk-white);border:1px solid var(--mk-line);border-radius:6px}
.mkt .pick .th{flex:0 0 88px;height:88px;border-radius:4px;overflow:hidden;background:var(--mk-cream)}
.post_content .mkt .pick h3{font-size:14.5px;font-weight:600;line-height:1.6;color:var(--mk-ink);margin-bottom:4px}
.mkt .brand{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:16px}
.post_content .mkt .brand a{display:block;padding:14px 12px;border:1px solid var(--mk-line);border-radius:5px;text-align:center;background:var(--mk-white)}
.mkt .brand b{display:block;font-family:var(--mk-serif);font-weight:600;font-size:15px;letter-spacing:.08em;color:var(--mk-ink)}
.mkt .brand span{font-family:var(--mk-en);font-size:13px;color:var(--mk-muted);letter-spacing:.06em}

/* 家計とお金：1枚ずつのスライド */
.mkt .sl{position:relative;margin:0 calc(var(--gut) * -1)}
.mkt .sl-track{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.mkt .sl-track::-webkit-scrollbar{display:none}
.post_content .mkt .sl-track a{display:block;flex:0 0 100%;scroll-snap-align:center;padding:0 52px}
.mkt .sl-track .th{aspect-ratio:16/9;border-radius:6px;overflow:hidden;background:var(--mk-cream)}
.post_content .mkt .sl-track h3{margin:12px 0 6px;font-size:15px;font-weight:600;line-height:1.65;color:var(--mk-ink);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:3.3em}
.mkt .sl-btn{position:absolute;top:60px;width:40px;height:40px;padding:0;border:none;border-radius:50%;background:var(--mk-cta);display:flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:0 0 0 3px rgba(255,255,255,.9)}
.mkt .sl-btn svg{width:18px;height:18px;stroke:#fff;stroke-width:2.2;fill:none}
.mkt .sl-prev{left:6px}.mkt .sl-next{right:6px}
.mkt .sl-dots{display:flex;justify-content:center;gap:8px;margin-top:14px}
.mkt .sl-dots i{display:block;width:7px;height:7px;border-radius:50%;background:#D9D2C7;transition:background .2s}
.mkt .sl-dots i.on{background:var(--mk-cta)}
.post_content .mkt .sl-hint{margin-top:10px;text-align:center;font-size:11.5px;color:var(--mk-muted);letter-spacing:.08em}

/* LINE */
.mkt .line{margin-top:44px;padding:28px 20px;border:1px solid var(--mk-beige);border-radius:6px;text-align:center;background:var(--mk-cream-light)}
.mkt .line small{font-family:var(--mk-en);font-size:11px;letter-spacing:.4em;color:var(--mk-accent)}
.post_content .mkt .line h2{margin:8px 0 10px;font-family:var(--mk-serif);font-weight:600;font-size:18px;letter-spacing:.08em;line-height:1.7;color:var(--mk-ink)}
.post_content .mkt .line p{font-size:13.5px;line-height:1.9}
.post_content .mkt .line a{display:block;margin-top:18px;padding:13px 0;background:#06C755;border-radius:4px;color:#fff;font-weight:600;font-size:14.5px;letter-spacing:.08em}

/* メディアの紹介 */
.mkt .about{margin-top:48px;padding:28px 20px;border:1px solid var(--mk-line);border-radius:6px;text-align:center;background:var(--mk-cream-light)}
.mkt .about small{font-family:var(--mk-en);font-size:11px;letter-spacing:.4em;color:var(--mk-accent)}
.post_content .mkt .about h2{margin:8px 0 10px;font-family:var(--mk-serif);font-weight:600;font-size:17px;letter-spacing:.08em;line-height:1.7;color:var(--mk-ink)}
.post_content .mkt .about p{font-size:13.5px;line-height:1.9;text-align:left}

/* パソコン幅：はみ出しをやめ、カードは固定幅 */
@media (min-width:760px){
  .mkt{--gut:0px}
  .mkt .row a{flex:0 0 200px}
  .mkt .row a:last-child{margin-right:0}
  .mkt .chips{grid-template-columns:repeat(4,1fr)}
  .mkt .brand{grid-template-columns:repeat(4,1fr)}
  .mkt .band{padding:36px 28px;border-radius:8px}
  .mkt .sl{max-width:560px;margin:0 auto}
  .mkt .lead{display:grid;grid-template-columns:300px 1fr;grid-template-rows:1fr 1fr;column-gap:28px}
  .mkt .lead-img{grid-row:1 / 3;aspect-ratio:3/4}
  .post_content .mkt .lead-ttl{align-self:end;font-size:24px;margin:0 0 12px}
  .mkt .lead .meta{align-self:start}
}

/* ---------- ファーストビューの動画ヒーロー（2026-09-19 代表指示） ----------
   スマホは画面の横幅いっぱい・下の新着が少しのぞく高さ。動画の上に進行バー、下に白文字のタイトル */
#content:has(.mk-hero){padding-top:0}
.mkt .mk-hero{position:relative;margin:0 calc(50% - 50vw);height:min(calc(100svh - 108px - 64px),760px);min-height:440px;overflow:hidden;background:var(--mk-ink);color:#fff}
.mkt .mk-hero .hs{position:absolute;inset:0;display:block;opacity:0;visibility:hidden;transition:opacity .7s ease,visibility 0s .7s}
.mkt .mk-hero .hs.on{opacity:1;visibility:visible;transition:opacity .7s ease}
.mkt .mk-hero .hm{position:absolute;inset:0}
.post_content .mkt .mk-hero .hm img,.mkt .mk-hero .hm video{position:absolute;inset:0;display:block;width:100%;height:100%;max-width:none;margin:0;object-fit:cover;border-radius:0}
.mkt .mk-hero .hm video{opacity:0;transition:opacity .4s}
.mkt .mk-hero .hs.pl video{opacity:1}
.mkt .mk-hero .hs.on .hm{animation:mkZoom 7s ease-out both}
.mkt .mk-hero.still .hs.on .hm{animation:none}
@keyframes mkZoom{from{transform:scale(1.08)}to{transform:scale(1)}}
/* 文字を読ませるための上下の暗がり */
.mkt .mk-hero .hm::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.42) 0,rgba(0,0,0,0) 22%,rgba(0,0,0,0) 45%,rgba(0,0,0,.78) 100%)}
/* 進行バー */
.mkt .mk-hero .hb{position:absolute;z-index:3;left:12px;right:12px;top:10px;display:flex;gap:4px}
.mkt .mk-hero .hb button{flex:1;height:22px;padding:9px 0;margin:0;border:0;background:none;cursor:pointer}
.mkt .mk-hero .hb button::before{content:"";display:block;height:3px;border-radius:2px;background:rgba(255,255,255,.35)}
.mkt .mk-hero .hb i{display:block;height:3px;margin-top:-3px;border-radius:2px;background:#fff;transform:scaleX(0);transform-origin:left}
/* 文字 */
.mkt .mk-hero .hc{position:absolute;z-index:2;left:0;right:0;bottom:0;padding:0 20px 26px}
.mkt .mk-hero .hc > *{opacity:0;transform:translateY(14px);transition:opacity .6s,transform .6s}
.mkt .mk-hero .hs.on .hc > *{opacity:1;transform:none}
.mkt .mk-hero .hs.on .hc > :nth-child(2){transition-delay:.12s}
.mkt .mk-hero .hs.on .hc > :nth-child(3){transition-delay:.22s}
.mkt .mk-hero .hs.on .hc > :nth-child(4){transition-delay:.34s}
.mkt .mk-hero .hn{display:block;font-variant-numeric:lining-nums;font-family:var(--mk-en);font-size:34px;line-height:1;letter-spacing:.04em}
.mkt .mk-hero .hn em{font-style:normal;font-size:14px;margin-left:6px;opacity:.75;letter-spacing:.16em}
.mkt .mk-hero .hk{display:flex;align-items:center;gap:8px;margin-top:12px;font-size:12px;font-weight:700;letter-spacing:.12em}
.mkt .mk-hero .hk b{padding:1px 8px;background:#fff;color:var(--mk-ink);font-family:var(--mk-en);font-size:11px;letter-spacing:.24em}
.post_content .mkt .mk-hero h2{margin:8px 0 18px;font-family:var(--mk-serif);font-weight:700;font-size:26px;line-height:1.45;letter-spacing:.04em;color:#fff;text-shadow:0 2px 14px rgba(0,0,0,.35);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.mkt .mk-hero .hg{display:inline-flex;align-items:center;gap:10px;padding:11px 20px;border-radius:999px;background:#fff;color:var(--mk-ink);font-size:13.5px;font-weight:700;letter-spacing:.08em}
.mkt .mk-hero .hg::after{content:"";width:7px;height:7px;border-top:2px solid currentColor;border-right:2px solid currentColor;transform:rotate(45deg)}
.mkt .mk-hero + .sec{padding-top:28px}
/* パソコン幅：本文の幅に収め、縦長の動画を左、文字を右に置く */
@media (min-width:760px){
  #content:has(.mk-hero){padding-top:32px}
  .mkt .mk-hero{margin:0;height:560px;min-height:0;border-radius:8px}
  .mkt .mk-hero .hm{right:auto;width:315px}
  .mkt .mk-hero .hm::after{background:none}
  .mkt .mk-hero .hb{left:343px;right:28px;top:28px}
  .mkt .mk-hero .hc{left:315px;top:0;display:flex;flex-direction:column;justify-content:flex-end;padding:0 36px 44px}
  .post_content .mkt .mk-hero h2{font-size:30px;text-shadow:none}
  .mkt .mk-hero .hg{align-self:flex-start}
  .mkt .mk-hero .hs.on .hm{animation:none}
}