/* ============================================================
   体験談ランキング型LP パーツ（mt-*）
   色：青=見出し・ボタン／赤=強調・注意／黄=マーカー
   ============================================================ */
:root {
  --mt-blue: #0066bf; --mt-blue-2: #007bff; --mt-blue-bg: #eef5fc;
  --mt-red: #e2231a; --mt-red-bg: #fdeeee;
  --mt-mark: #fff100; --mt-yellow-bg: #fffbe0; --mt-orange: #f5a623;
  --mt-ink: #222; --mt-sub: #777; --mt-rule: #dcdcdc;
  --mt-font: "Hiragino Sans", "ヒラギノ角ゴ ProN W3", "Noto Sans JP", Meiryo, sans-serif;
}
.mt-body { font-family: var(--mt-font); color: var(--mt-ink); font-size: 16px; line-height: 1.9; }
.mt-body p { margin: 0 0 1.2em; }

/* 見出し */
.mt-h2 { margin: 2em -8px 1em; padding: 13px 13px 12px; border-radius: 2px; background: var(--mt-blue); color: #fff; font-size: 21px; font-weight: 700; line-height: 1.45; }
.mt-h3 { margin: 1.8em 0 .9em; padding: 0 8px 5px; border-bottom: 3px solid var(--mt-blue); font-size: 18.5px; font-weight: 700; line-height: 1.5; }
.mt-h3__rank { margin-right: .2em; }
.mt-h4 { margin: 1.6em 0 .8em; padding: 2px 8px; border-left: 4px solid var(--mt-blue); font-size: 17px; font-weight: 700; line-height: 1.5; }
.mt-h4 em { font-style: normal; color: var(--mt-red); background: linear-gradient(transparent 60%, var(--mt-mark) 60%); }

/* 強調 */
.mt-mark { font-weight: 700; background: linear-gradient(transparent 55%, var(--mt-mark) 55%); }
.mt-red { color: var(--mt-red); font-weight: 700; }
.mt-worry { margin: 1em 0 .8em !important; color: var(--mt-red); font-size: 18px; font-weight: 700; line-height: 1.6; }
.mt-oneline { margin: 1.2em 0 !important; font-size: 18px; font-weight: 700; line-height: 1.6; }
.mt-oneline span { background: linear-gradient(transparent 55%, var(--mt-mark) 55%); }
.mt-small { font-size: 12px !important; color: var(--mt-sub); line-height: 1.6 !important; }

/* 横スクロール比較表 */
.mt-hint { margin: .6em 0 .3em !important; text-align: center; font-size: 13px !important; font-weight: 700; color: #555; }
.mt-hint::before, .mt-hint::after { content: "👈"; margin: 0 .3em; }
.mt-hint::after { content: "👉"; }
.mt-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; border: 1px solid var(--mt-rule); }
.mt-table { border-collapse: collapse; min-width: 640px; font-size: 13px; line-height: 1.5; background: #fff; }
.mt-table th, .mt-table td { padding: .6em .5em; border: 1px solid var(--mt-rule); text-align: center; vertical-align: middle; }
.mt-table thead th { background: #fbeaea; font-weight: 700; white-space: nowrap; }
.mt-table th:first-child, .mt-table td:first-child { position: sticky; left: 0; z-index: 1; background: #fff; min-width: 5.5em; }
.mt-table thead th:first-child { background: #fbeaea; }
.mt-table tr.is-pick td { background: #fffdf0; }
.mt-table tr.is-pick td:first-child { background: #fffdf0; }
.mt-ico { display: grid; place-items: center; width: 44px; height: 44px; margin: 0 auto .3em; border-radius: 10px; color: #fff; font-weight: 900; font-size: 20px; }
.mt-mini-btn { display: inline-block; padding: 4px 10px; border-radius: 4px; background: var(--mt-blue-2); color: #fff !important; font-size: 12px; font-weight: 700; text-decoration: none; white-space: nowrap; }
.mt-stars { display: block; color: var(--mt-orange); letter-spacing: .05em; }
.mt-score { display: block; color: var(--mt-red); font-size: 16px; font-weight: 900; }
.mt-badge { display: inline-block; margin-top: .2em; padding: .1em .5em; border-radius: 4px; background: var(--mt-red); color: #fff; font-size: 11px; font-weight: 700; }
.mt-name { color: var(--mt-blue); font-weight: 700; text-decoration: underline; }

/* 結論ボックス */
.mt-conclusion { margin: 1.4em 0; padding: 1em 1.1em; border: 2px dashed var(--mt-orange); border-radius: 6px; background: var(--mt-yellow-bg); }
.mt-conclusion__ttl { margin: 0 0 .4em !important; color: var(--mt-red); font-weight: 900; }
.mt-conclusion p { margin: 0 0 .6em; font-size: 15px; line-height: 1.8; }
.mt-conclusion p:last-child { margin: 0; }
.mt-conclusion a { color: var(--mt-blue); font-weight: 700; }

/* 良い／悪い口コミ */
.mt-voice { position: relative; margin: 2em 0 1.2em; padding: 1.4em 1em .8em; border: 2px solid #9cc3e8; border-radius: 12px; background: #fff; }
.mt-voice--bad { border-color: #f0a9a5; }
.mt-voice__lbl { position: absolute; top: -.95em; left: 1em; display: inline-flex; align-items: center; gap: .35em; padding: .1em .8em .1em .3em; border-radius: 999px; background: #fff; color: var(--mt-blue); font-weight: 900; font-size: 15px; }
.mt-voice--bad .mt-voice__lbl { color: var(--mt-red); }
.mt-voice__lbl i { display: grid; place-items: center; width: 1.6em; height: 1.6em; border-radius: 50%; background: var(--mt-blue); color: #fff; font-style: normal; font-size: 13px; }
.mt-voice--bad .mt-voice__lbl i { background: var(--mt-red); }
.mt-voice ul { margin: 0; padding-left: 1.2em; }
.mt-voice li { margin: 0 0 .5em; font-size: 15px; line-height: 1.7; }
.mt-voice li::marker { color: var(--mt-orange); }
.mt-voice li small { color: var(--mt-sub); }
.mt-more summary { cursor: pointer; text-align: right; font-size: 14px; font-weight: 700; color: var(--mt-blue); list-style: none; }
.mt-more summary::-webkit-details-marker { display: none; }

/* ランキング：バナー＋PR */
.mt-banner { position: relative; display: block; margin: .8em 0 1.2em; line-height: 0; }
.mt-banner__img { display: grid; place-items: center; aspect-ratio: 16 / 9; border-radius: 4px; background: linear-gradient(135deg, #cfe3f7, #f8d7e3); color: #555; font-size: 14px; line-height: 1.5; }
.mt-banner__pr { position: absolute; top: 6px; right: 6px; padding: 0 .4em; background: rgba(0,0,0,.55); color: #fff; font-size: 11px; line-height: 1.6; }

/* 写真3枚（お店・実物） */
.mt-photos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; margin: 1em 0 .3em; }
.mt-photos img { display: block; width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: 4px; }

/* 特徴リスト（黄色い箱） */
.mt-points { margin: 1.2em 0; padding: 1em 1.1em .6em; border-radius: 6px; background: var(--mt-yellow-bg); }
.mt-points ul { margin: 0; padding: 0; list-style: none; }
.mt-points li { position: relative; margin: 0 0 .5em; padding-left: 1.3em; font-size: 15px; line-height: 1.7; }
.mt-points li::before { content: ""; position: absolute; left: .2em; top: .6em; width: .55em; height: .55em; border-radius: 50%; background: var(--mt-orange); }

/* CTA */
.mt-cta { margin: 1.6em 0; text-align: center; }
.mt-cta__micro { margin: 0 0 .4em !important; font-size: 14px; font-weight: 700; color: #333; }
.mt-cta__btn { display: block; max-width: 22em; margin: 0 auto; padding: 1em .8em; border-radius: 8px; background: var(--mt-blue-2); box-shadow: 0 4px 0 #0056b3; color: #fff !important; font-size: 17px; font-weight: 900; line-height: 1.4; text-decoration: none; }
.mt-cta__btn:active { transform: translateY(2px); box-shadow: 0 2px 0 #0056b3; }
/* 光が走るアニメーション（動きを減らす設定の人には出さない） */
.mt-cta__btn { position: relative; overflow: hidden; isolation: isolate; }
.mt-cta__btn::after { content: ""; position: absolute; top: 0; left: -80%; z-index: -1; width: 50%; height: 100%; background: linear-gradient(100deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.6) 50%, rgba(255,255,255,0) 100%); transform: skewX(-20deg); animation: mt-shine 2.8s ease-in-out infinite; }
@keyframes mt-shine { 0% { left: -80%; } 55%, 100% { left: 130%; } }
@media (prefers-reduced-motion: reduce) { .mt-cta__btn::after { animation: none; display: none; } }
.mt-cta__note { margin: .5em 0 0 !important; font-size: 12px; font-weight: 700; color: var(--mt-red); }
.mt-textlink { margin: 1.2em 0 !important; font-weight: 700; line-height: 1.6 !important; }
.mt-textlink a { color: var(--mt-blue); text-decoration: underline; }
.mt-textlink small { display: block; font-size: 12px; font-weight: 400; color: var(--mt-sub); }
.mt-cta-stack .mt-cta { margin: 0 0 1.4em; }

/* 会話（メッセージ例） */
.mt-chat { margin: 1.2em 0; padding: .9em .8em; border-radius: 12px; background: #eef1f6; }
.mt-chat__ttl { margin: 0 0 .6em !important; font-size: 14px; font-weight: 900; }
.mt-chat__m { display: flex; margin: 0 0 .6em; }
.mt-chat__m--r { justify-content: flex-end; }
.mt-chat__b { max-width: 78%; padding: .5em .8em; border-radius: 14px; background: #fff; font-size: 14.5px; line-height: 1.6; }
.mt-chat__m--r .mt-chat__b { background: #8de055; }
.mt-chat__tip { margin: -.2em 0 .7em !important; font-size: 12px !important; color: var(--mt-red); line-height: 1.5 !important; }

/* 体験談ボックス */
.mt-story { margin: 1.2em 0; padding: 1em 1.1em; border-left: 5px solid var(--mt-blue); background: var(--mt-blue-bg); }
.mt-story__who { margin: 0 0 .5em !important; font-size: 13px; font-weight: 700; color: var(--mt-blue); }
.mt-story p { font-size: 15px; line-height: 1.8; }
.mt-story p:last-child { margin: 0; }

/* 登録手順 */
.mt-steps { margin: 1.2em 0; padding: 0; list-style: none; counter-reset: mtstep; }
.mt-steps li { position: relative; margin: 0 0 .5em; padding: .55em .8em .55em 2.8em; border: 1px solid var(--mt-rule); border-radius: 8px; background: #fff; font-size: 15px; line-height: 1.6; }
.mt-steps li::before { counter-increment: mtstep; content: counter(mtstep); position: absolute; left: .7em; top: 50%; transform: translateY(-50%); display: grid; place-items: center; width: 1.6em; height: 1.6em; border-radius: 50%; background: var(--mt-blue); color: #fff; font-size: 13px; font-weight: 900; }
.mt-steps li small { color: var(--mt-sub); }

/* 画像＋手書き風の注釈 */
.mt-shot { position: relative; margin: 1.2em auto; max-width: 18em; }
.mt-shot__img { display: grid; place-items: center; aspect-ratio: 9 / 14; border-radius: 16px; border: 6px solid #222; background: repeating-linear-gradient(0deg, #fff 0 44px, #f1f1f1 44px 46px); color: #999; font-size: 13px; }
.mt-shot__note { position: absolute; right: -6px; bottom: 18%; padding: .2em .5em; transform: rotate(-8deg); color: #fff; background: var(--mt-red); border-radius: 6px; font-size: 18px; font-weight: 900; line-height: 1.3; box-shadow: 0 3px 8px rgba(0,0,0,.2); }

/* アイキャッチ（悩みの吹き出し） */
.mt-eyecatch { display: grid; place-items: center; aspect-ratio: 16 / 10; margin: .6em 0 1.2em; border-radius: 4px; background: linear-gradient(135deg, #fde2e4, #e2ecfb); }
.mt-eyecatch__bubble { padding: .6em 1.2em; border: 3px solid #222; border-radius: 999px; background: #fff; font-size: 24px; font-weight: 900; }

/* ヘッダー／フッター帯・関連記事 */
.mt-sitebar { padding: .7em; background: var(--mt-blue); color: #fff; text-align: center; font-weight: 700; }
.mt-related { margin: 1.2em 0; padding: 0; list-style: none; border-top: 1px solid var(--mt-rule); }
.mt-related li { border-bottom: 1px solid var(--mt-rule); }
.mt-related a { display: block; padding: .7em .3em; color: var(--mt-ink); font-size: 14.5px; text-decoration: none; }
.mt-related a::before { content: "›"; margin-right: .5em; color: var(--mt-blue); font-weight: 900; }