/* モグカツ クリエイター向けLP — トンマナ（現行サイト踏襲） */
:root {
  --text: #623F2A;
  --sub: #8C7A70;
  --muted: #B5AAA4;
  --muted-text: #8C7A70;   /* 小さい文字用（コントラスト確保） */
  --line: #ECE6DC;
  --bg: #F7F4EE;
  --bg-white: #fff;
  --accent: #C2795A;
  --accent-text: #A8583A;  /* 小さい文字用アクセント */
  --yellow1: #F5DA66;
  --yellow2: #E6BE3E;
  --yellow: #EFC94A;
  --pastel-pink: #F6D5C4;
  --pastel-purple: #DDD0EA;
  --pastel-green: #D8E4C8;
  --pastel-beige: #ECE6DC;
  --pastel-blue: #D5E3EA;
  --radius: 22px;
  --header-h: 72px;
  --wrap: 1180px;
  --font: "Zen Maru Gothic", "Hiragino Maru Gothic ProN", "Hiragino Sans", "Yu Gothic", sans-serif;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 12px); -webkit-text-size-adjust: 100%; }
body { margin: 0; font-family: var(--font); color: var(--text); background: var(--bg); line-height: 1.8; -webkit-font-smoothing: antialiased; font-size: 15px; overflow-x: hidden; }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--text); text-decoration: none; }
a:hover { color: var(--accent); }
h1, h2, h3, h4, p, ul, ol, dl, dd, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
button { font-family: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
:focus-visible { outline: 3px solid var(--yellow2); outline-offset: 3px; border-radius: 6px; }

.wrap { width: min(var(--wrap), 100% - 40px); margin-inline: auto; }
.sec { padding: 80px 0; }
.sec--white { background: var(--bg-white); }
.sec-head { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 10px; margin-bottom: 40px; }
.sec-head--left { align-items: flex-start; text-align: left; }
.en { letter-spacing: .18em; font-size: 12px; font-weight: 700; color: var(--muted-text); text-transform: uppercase; }
.en::before, .en::after { content: "●"; font-size: 7px; margin: 0 7px; vertical-align: 2px; }
.h2 { font-size: clamp(24px, 3vw, 38px); font-weight: 900; line-height: 1.4; letter-spacing: .02em; }
.h2 .nw { white-space: nowrap; }
.h-sub { font-size: clamp(15px, 1.6vw, 18px); font-weight: 700; line-height: 1.8; margin-top: 6px; }
.lead { font-size: 15px; line-height: 1.9; }
.sub { font-size: 13px; line-height: 1.7; color: var(--muted-text); }
.hl { background: var(--text); color: #fff; border-radius: 6px; padding: 1px 9px; white-space: nowrap; }
.card { background: var(--bg-white); border-radius: var(--radius); }
.pill { display: inline-flex; align-items: center; gap: 6px; background: var(--pastel-beige); border-radius: 100px; padding: 5px 12px; font-size: 12px; font-weight: 700; color: var(--text); white-space: nowrap; line-height: 1.5; }
.pill--dark { background: var(--text); color: #fff; }
.pill--accent { background: var(--accent); color: #fff; }
.pill--gray { background: var(--sub); color: #fff; }
.pill--yellow { background: var(--yellow); }
.bignum { font-size: 44px; font-weight: 900; color: #fff; -webkit-text-stroke: 1.4px var(--text); line-height: 1; }

/* ボタン */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 12px; min-height: 56px; padding: 0 26px; border-radius: 100px; font-weight: 700; font-size: 15px; line-height: 1.3; text-align: center; transition: transform .15s ease, box-shadow .15s ease; }
.btn:hover { transform: translateY(-1px); color: var(--text); }
.btn--yellow { background: linear-gradient(180deg, var(--yellow1) 0%, var(--yellow2) 100%); color: var(--text); box-shadow: 0 6px 18px rgba(230,190,62,.35); justify-content: space-between; }
.btn--yellow:hover { box-shadow: 0 8px 22px rgba(230,190,62,.5); }
.btn--yellow::after { content: ""; width: 0; height: 0; border-top: 5px solid transparent; border-bottom: 5px solid transparent; border-left: 8px solid var(--text); flex-shrink: 0; }
.btn--line { background: #fff; color: var(--text); border: 1.5px solid #E2D9CE; }
.btn--line:hover { border-color: var(--accent); }
.btn--sm { min-height: 46px; padding: 0 20px; font-size: 13px; }
.btn--lg { min-height: 62px; font-size: 16px; padding: 0 30px; }
.btn-row { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }
.btn-row--center { justify-content: center; }
.cta-note { font-size: 13px; color: var(--muted-text); }
.cta-note a { text-decoration: underline; color: var(--muted-text); }

/* アコーディオン */
.acc { background: var(--bg-white); border-radius: 16px; }
.acc--beige { background: var(--bg); }
.acc__btn { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 18px 22px; font-weight: 700; font-size: 15px; text-align: left; line-height: 1.6; }
.acc__btn .plus { width: 28px; height: 28px; border-radius: 50%; background: var(--bg); display: inline-flex; align-items: center; justify-content: center; font-weight: 900; flex-shrink: 0; font-size: 16px; position: relative; }
.acc--beige .acc__btn .plus { background: #fff; }
.acc__btn .plus::before, .acc__btn .plus::after { content: ""; position: absolute; background: var(--text); border-radius: 1px; }
.acc__btn .plus::before { width: 12px; height: 2px; }
.acc__btn .plus::after { width: 2px; height: 12px; transition: transform .2s; }
.acc__btn[aria-expanded="true"] .plus::after { transform: scaleY(0); }
.acc__body { padding: 0 22px 20px; font-size: 14px; line-height: 1.9; }
.acc__body[hidden] { display: none; }
.acc__body p + p { margin-top: 8px; }
.acc__body a { text-decoration: underline; color: var(--accent-text); }
.acc-list { display: flex; flex-direction: column; gap: 8px; }

/* ℹ︎ ツールチップ */
.info { display: inline-block; position: relative; vertical-align: middle; margin-left: 6px; }
.info__btn { width: 20px; height: 20px; border-radius: 50%; background: var(--pastel-beige); color: var(--muted-text); font-size: 11px; font-weight: 900; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
.info__tip { position: absolute; z-index: 5; top: 28px; left: 50%; transform: translateX(-50%); width: min(320px, 80vw); background: var(--text); color: #fff; font-size: 12px; font-weight: 500; line-height: 1.7; padding: 12px 14px; border-radius: 12px; box-shadow: 0 10px 30px rgba(98,63,42,.2); display: none; text-align: left; }
.info:hover .info__tip, .info:focus-within .info__tip, .info.is-open .info__tip { display: block; }
.info.is-open .info__btn, .info:hover .info__btn { background: var(--text); color: #fff; }
.js-off .info__tip { position: static; transform: none; display: block; background: var(--bg); color: var(--text); box-shadow: none; margin-top: 6px; }

/* ───── ヘッダー ───── */
.header { position: sticky; top: 0; z-index: 900; height: var(--header-h); background: rgba(252,251,248,.96); transition: box-shadow .2s, backdrop-filter .2s; }
.header.is-scrolled { box-shadow: 0 2px 20px rgba(98,63,42,.08); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.header__in { height: 100%; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.header__brand { display: flex; align-items: center; gap: 14px; }
.header__logo { display: flex; align-items: center; padding: 6px 0; } .header__logo img { width: auto; height: 48px; }
.header__nav { display: flex; align-items: center; gap: 40px; }
.header__nav a { font-size: 14px; font-weight: 700; color: var(--muted-text); white-space: nowrap; }
.header__nav a:hover { color: var(--accent); }
.header__right { display: flex; align-items: center; gap: 18px; white-space: nowrap; }
.header__login { font-size: 13px; color: var(--muted-text); }
.menu { position: relative; }
.menu > summary { list-style: none; cursor: pointer; font-size: 13px; font-weight: 700; border-bottom: 1.5px solid var(--text); padding-bottom: 2px; }
.menu > summary::-webkit-details-marker { display: none; }
.menu > summary::after { content: " ▾"; }
.menu__list { position: absolute; right: 0; top: 34px; width: 320px; background: #fff; border-radius: 16px; box-shadow: 0 14px 40px rgba(98,63,42,.15); padding: 10px; z-index: 950; }
.menu__list a { display: block; padding: 12px 14px; border-radius: 10px; }
.menu__list a:hover { background: var(--bg); }
.menu__list b { display: block; font-size: 14px; }
.menu__list span { display: block; font-size: 12px; color: var(--muted-text); line-height: 1.6; }
.hamb { display: none; width: 44px; height: 44px; flex-direction: column; justify-content: center; align-items: center; gap: 5px; }
.hamb span { width: 22px; height: 2px; background: var(--text); border-radius: 2px; }

/* ドロワー（<header>の外に置く） */
.drawer { position: fixed; top: var(--header-h); right: 0; width: min(360px, 88vw); height: calc(100dvh - var(--header-h)); background: #fff; z-index: 1000; transform: translateX(100%); transition: transform .25s ease, visibility .25s; visibility: hidden; pointer-events: none; overflow-y: auto; padding: 24px 22px 120px; box-shadow: -10px 0 40px rgba(98,63,42,.12); }
.drawer.is-open { transform: none; visibility: visible; pointer-events: auto; }
.drawer__nav a { display: block; padding: 14px 6px; font-weight: 700; font-size: 16px; border-bottom: 1px solid var(--line); }
.drawer__h { font-size: 12px; font-weight: 700; color: var(--muted-text); margin: 22px 6px 6px; letter-spacing: .1em; }
.drawer__sub a { display: block; padding: 10px 6px; font-size: 14px; }
.drawer__cta { margin-top: 22px; display: flex; flex-direction: column; gap: 10px; }
.drawer-bg { position: fixed; inset: 0; background: rgba(98,63,42,.3); z-index: 990; opacity: 0; visibility: hidden; transition: opacity .25s, visibility .25s; }
.drawer-bg.is-open { opacity: 1; visibility: visible; }

/* ───── FV ───── */
.hero { padding: 0 0 60px; background: #FCFBF8; }
.hero__banner { background: #FCFBF8; }
.hero__banner img { width: 100%; height: auto; }
.hero__grid { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 26px; padding: 40px 24px 0; }
.hero__copy { display: flex; flex-direction: column; gap: 16px; }
.hero h1 { font-size: clamp(22px, 2.6vw, 34px); line-height: 1.6; font-weight: 900; }
.hero__badges { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }
.hero__badges .pill { background: var(--bg); }
.hero__cta { display: flex; flex-direction: column; gap: 12px; align-items: center; }

/* ───── こんな方に ───── */
.foryou { display: flex; flex-direction: column; align-items: center; gap: 36px; }
.foryou__cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; width: 100%; max-width: 1040px; }
.foryou__card { padding: 22px 24px; display: flex; gap: 16px; align-items: center; font-weight: 700; font-size: 15px; line-height: 1.6; }
.foryou__card img { width: 64px; height: 64px; border-radius: 50%; flex-shrink: 0; } .foryou .sec-head { align-items: center; text-align: center; margin-bottom: 0; }

/* ───── モグカツとは ───── */
.about { display: flex; flex-direction: column; align-items: center; gap: 36px; }
.about__fig { width: 100%; max-width: 960px; } .about__fig img { width: 100%; } .about__body { max-width: 820px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 40px; }
.about__steps { display: flex; flex-direction: column; gap: 8px; margin: 18px 0 20px; }
.about__steps li { display: flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 700; }
.about__steps .bignum { font-size: 22px; }

/* ───── メリット ───── */
.merits { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; }
.merit { display: flex; flex-direction: column; gap: 16px; }
.merit__band { border-radius: 100px; padding: 12px 24px; display: flex; align-items: center; gap: 16px; }
.merit__band h3 { font-size: 18px; font-weight: 900; line-height: 1.35; }
.merit__img img { width: 100%; border-radius: 18px; }
.merit:nth-child(3) .merit__img img { transform: none; }
.merit .lead { font-size: 14px; }

/* ───── ポイントの仕組み ───── */
.psteps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; position: relative; margin-bottom: 30px; }
.psteps::before { content: ""; position: absolute; left: 12%; right: 12%; top: 57px; height: 6px; background: var(--line); border-radius: 3px; }
.pstep { display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; position: relative; }
.pstep__icon { width: 120px; height: 120px; border-radius: 50%; padding: 6px; border: 4px solid #fff; position: relative; z-index: 1; }
.pstep__icon img { width: 100%; height: 100%; border-radius: 50%; object-fit: contain; }
.pstep .bignum { font-size: 26px; }
.pstep h3 { font-size: 16px; font-weight: 900; line-height: 1.4; }
.point__note { max-width: 900px; margin: 0 auto 30px; }

/* ───── ポイントの種類 ───── */
.kinds { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.kind { padding: 28px; display: flex; flex-direction: column; gap: 12px; align-items: center; text-align: center; }
.kind__icon { width: 80px; height: 80px; border-radius: 50%; padding: 4px; border: 4px solid #fff; }
.kind__icon img { width: 100%; height: 100%; border-radius: 50%; object-fit: contain; }
.kind h3 { font-size: 18px; font-weight: 900; }

/* ───── 利用の流れ ───── */
.flow2 { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; max-width: 1040px; margin: 0 auto 34px; }
.fblk { background: var(--bg); border-radius: 24px; padding: 28px 28px 22px; }
.fblk--after { background: #FBF0C9; }
.fblk__h { display: flex; align-items: center; gap: 10px; margin-bottom: 18px; }
.fblk__h h3 { font-size: 18px; font-weight: 900; }
.fblk__h .pill { background: #fff; }
.tl { position: relative; }
.tl::before { content: ""; position: absolute; left: 19px; top: 20px; bottom: 20px; width: 2px; background: rgba(98,63,42,.15); }
.tl li { position: relative; display: flex; gap: 16px; align-items: flex-start; padding: 8px 0; }
.tl .n { width: 40px; height: 40px; border-radius: 50%; background: #fff; border: 2px solid var(--text); display: flex; align-items: center; justify-content: center; font-weight: 900; font-size: 16px; flex-shrink: 0; position: relative; z-index: 1; }
.tl b { display: block; font-size: 15px; font-weight: 900; line-height: 1.5; }
.tl span.s { display: block; font-size: 13px; color: var(--muted-text); line-height: 1.6; }
.tl .info__tip { left: 0; transform: none; }

/* ───── ルール／日程 ───── */
.two { display: grid; grid-template-columns: 1fr; gap: 48px; align-items: start; }
.rules-wrap { max-width: 860px; margin: 0 auto; width: 100%; }
.two .h2 { font-size: clamp(22px, 2.4vw, 30px); }
.tbl { display: grid; grid-template-columns: 1.2fr 1fr; font-size: 13px; }
.tbl div { padding: 8px 0; border-bottom: 1px solid var(--line); }
.tbl .th { color: var(--muted-text); }
.tbl .td--b { font-weight: 700; }
.sched { padding: 22px 26px; display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.sched h3 { font-weight: 900; font-size: 14px; margin-bottom: 8px; }

/* ───── 連動 ───── */
.media { display: grid; grid-template-columns: minmax(0, 420px) 160px minmax(0, 420px); justify-content: center; align-items: stretch; }
.media__card { background: var(--bg); border-radius: var(--radius); padding: 0 24px 26px; display: flex; flex-direction: column; gap: 10px; align-items: center; text-align: center; }
.media__logo { width: 100%; height: 180px; display: flex; align-items: center; justify-content: center; padding: 34px 20px; }
.media__logo img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; }
.media__card p { font-size: 14px; line-height: 1.8; }
.media__card p b { color: var(--accent-text); }
.media__mid { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; color: var(--muted); font-size: 20px; }
.media__note { text-align: center; margin-top: 24px; }

/* ───── 安心 ───── */
.trust { display: grid; grid-template-columns: minmax(300px, 420px) minmax(0, 1fr); gap: 64px; align-items: start; }
.trust .h2 { font-size: clamp(22px, 2.3vw, 32px); }
.trust__item .acc__btn span.t { display: flex; align-items: center; gap: 12px; }
.trust__item img { width: 34px; height: 34px; border-radius: 50%; flex-shrink: 0; }
.area { padding: 20px 22px; margin-top: 18px; display: flex; flex-direction: column; gap: 6px; }
.area h3 { font-weight: 900; font-size: 15px; }

/* ───── FAQ ───── */
.faq__tabs { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; margin-bottom: 24px; }
.faq__tab { padding: 9px 18px; border-radius: 100px; background: var(--pastel-beige); font-size: 13px; font-weight: 700; }
.faq__tab[aria-selected="true"] { background: var(--text); color: #fff; }
.faq__panel { max-width: 960px; margin: 0 auto; }
.faq__panel[hidden] { display: none; }
.faq__panel h3 { font-size: 15px; font-weight: 900; color: var(--muted-text); margin: 0 0 12px 8px; }
.faq .acc__btn .q { color: var(--accent-text); margin-right: 8px; font-weight: 900; }
.faq .acc__body { padding-left: 46px; }
.faq__cta { text-align: center; margin-top: 28px; }
.faq__all { display: none; }
.js-off .faq__panel[hidden] { display: block; }
.js-off .acc__body[hidden] { display: block; }

/* ───── 最終CTA ───── */
.final { padding: 80px 0; }
.final__box { background: linear-gradient(135deg, #F7EFC9 0%, #F8E4DA 60%, #E9DCEC 100%); border-radius: 48px; padding: 60px 72px; display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 40px; align-items: center; }
.final__copy { display: flex; flex-direction: column; gap: 20px; }
.final__kicker { font-size: 17px; font-weight: 700; color: var(--muted-text); }
.final .h2 { font-size: clamp(26px, 3vw, 40px); }
.final__qr { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.final__qr .ill { width: 120px; height: 120px; margin-bottom: -16px; }
.final__qr .qr { width: 200px; height: 200px; background: #fff; border-radius: 12px; padding: 8px; }

/* ───── 飲食店向け／フッター ───── */
.rest { padding: 0 0 40px; }
.rest h2 { font-size: 16px; font-weight: 900; text-align: center; margin-bottom: 22px; }
.rest__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.rest__card { padding: 22px 28px; display: flex; flex-direction: column; gap: 6px; }
.rest__card .pill { align-self: flex-start; }
.rest__card b { font-size: 18px; font-weight: 900; }
.rest__card b::after { content: " ▶"; font-size: 12px; }
.footer { padding: 22px 0 110px; }
.footer__in { display: flex; justify-content: space-between; align-items: center; gap: 24px; flex-wrap: wrap; font-size: 13px; color: var(--muted-text); border-top: 1px solid var(--line); padding-top: 22px; }
.footer__logo img { width: auto; height: 56px; }
.footer__links { display: flex; gap: 22px; flex-wrap: wrap; }
.footer__links a { color: var(--muted-text); }
.footer__copy { font-size: 12px; }

/* スマホ固定CTAバー */
.fixbar { display: none; position: fixed; left: 0; right: 0; bottom: 0; z-index: 800; padding: 10px 14px calc(10px + env(safe-area-inset-bottom)); background: rgba(255,255,255,.95); box-shadow: 0 -6px 24px rgba(98,63,42,.12); gap: 10px; }
.fixbar .btn { flex: 1; min-height: 50px; font-size: 14px; padding: 0 18px; }
.fixbar.is-hidden { transform: translateY(110%); }
.fixbar { transition: transform .25s; }

/* リビール */
.rv { opacity: 0; transform: translateY(14px); transition: opacity .6s ease, transform .6s ease; }
.rv.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .rv { opacity: 1; transform: none; transition: none; } html { scroll-behavior: auto; } }

/* ───── 利用規約ページ ───── */
.doc { max-width: 820px; margin: 0 auto; padding: 60px 0 100px; }
.doc h1 { font-size: 28px; font-weight: 900; margin-bottom: 24px; }
.doc h2 { font-size: 17px; font-weight: 900; margin: 32px 0 10px; padding-left: 12px; border-left: 4px solid var(--yellow2); }
.doc p { font-size: 14px; line-height: 1.95; margin-bottom: 8px; }
.doc p.num { padding-left: 1.6em; text-indent: -1.6em; }
.doc .doc__meta { font-size: 12px; color: var(--muted-text); margin-bottom: 24px; }
.doc .back { display: inline-block; margin-top: 40px; text-decoration: underline; }

/* ───── レスポンシブ ───── */
@media (max-width: 1080px) {
  .header__nav { display: none; }
  .foryou, .trust { grid-template-columns: 1fr; gap: 32px; }
  .about { grid-template-columns: 1fr; }
    .media { grid-template-columns: 1fr; gap: 12px; }
  .media__mid { flex-direction: row; }
  .final__box { grid-template-columns: 1fr; padding: 44px 32px; }
  .final__qr { display: none; }
}
@media (max-width: 900px) {
  :root { --header-h: 60px; }
  .wrap { width: min(var(--wrap), 100% - 32px); }
  .sec { padding: 56px 0; }
  .sec-head { margin-bottom: 26px; }
  .header__right .btn, .header__right .menu, .header__login { display: none; }
  .hamb { display: flex; }
  .header__logo img { height: 40px; }
  .header__badge { font-size: 10px; padding: 3px 9px; }
  .hero { padding: 0 0 36px; }
  .hero__banner { border-radius: 0; }
  .hero__grid { grid-template-columns: 1fr; gap: 20px; padding: 22px 0 0; text-align: center; }
  .hero__badges { justify-content: center; }
  .hero__cta { align-items: stretch; }
  .hero__cta .btn-row { flex-direction: column; align-items: stretch; }
  .hero__cta .btn { width: 100%; }
  .foryou__cards { grid-template-columns: 1fr; }
  .h2 { font-size: 26px; }
  .merits, .kinds { grid-template-columns: 1fr; gap: 20px; }
  .psteps { grid-template-columns: 1fr 1fr; gap: 26px 14px; }
  .psteps::before { display: none; }
  .pstep__icon { width: 100px; height: 100px; }
    .flow2 { grid-template-columns: 1fr; gap: 14px; }
  .fblk { padding: 20px 18px 16px; }
  .two { grid-template-columns: 1fr; gap: 40px; }
  .sched { grid-template-columns: 1fr; }
  .final { padding: 56px 0; }
  .final__box { border-radius: 30px; padding: 36px 22px; }
  .final .btn-row { flex-direction: column; align-items: stretch; }
  .rest__grid { grid-template-columns: 1fr; }
  .footer__in { flex-direction: column; align-items: flex-start; }
  .fixbar { display: flex; }
  .btn-row--center .btn { width: 100%; }
  .btn-row--center { flex-direction: column; align-items: stretch; }
  .faq .acc__body { padding-left: 22px; }
}
@media (min-width: 901px) { .drawer, .drawer-bg { display: none; } }

/* 連動見出し：スマホで1行に収める */
@media (max-width: 700px) {
  #media-h { white-space: nowrap; font-size: min(26px, 5.2vw); letter-spacing: 0; }
}