/* 224（2026-10-14）：モニター募集（FVの案内・専用セクション・右下バナー）と、お支払いの推移の切替。影はつけない */

/* FV：モニター募集中の案内 */
.mon224-pill{display:inline-flex;align-items:center;gap:12px;flex-wrap:wrap;margin:22px 0 0;padding:10px 18px 10px 10px;border-radius:999px;background:#fff;border:2px solid #dfe6f2;color:#102650!important;text-decoration:none!important;font-size:16px;line-height:1.4;transition:transform .25s cubic-bezier(.22,1,.36,1)}
.mon224-pill b{padding:4px 12px;border-radius:999px;background:#102650;color:#fff;font-size:16px;font-weight:700;white-space:nowrap}
.mon224-pill span{font-weight:700}
.mon224-pill i{font-style:normal;color:#102650;font-weight:700}
.mon224-pill:hover{transform:translateY(-2px)}
.hero .mon224-pill+.hero-action{margin-top:20px!important}

/* 専用セクション */
.mon224 .mon224-card{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:40px;align-items:center;padding:48px;border-radius:28px;background:linear-gradient(135deg,#fff3f9 0%,#f4f7fc 100%);border:2px solid #dfe6f2}
.mon224 .mon224-copy h2{margin:6px 0 16px;font-size:clamp(28px,3vw,40px);line-height:1.4;color:#102650}
.mon224 .mon224-copy>p{margin:0 0 20px;font-size:16px;line-height:1.9;color:#102650}
.mon224 .eyebrow{color:#102650}
.mon224-terms{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.mon224-terms li{display:grid;gap:2px;padding:14px 18px 14px 48px;border-radius:20px;background:#fff;position:relative}
.mon224-terms li::before{content:'';position:absolute;left:16px;top:17px;width:20px;height:20px;border-radius:50%;background:#102650 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5 10l3 3 7-7' stroke='white' stroke-width='2.6' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/14px no-repeat}
.mon224-terms b{font-size:17px;color:#102650}
.mon224-terms span{font-size:16px;color:#4b5375;line-height:1.7}
.mon224-calc{display:grid;gap:12px;padding:28px;border-radius:20px;background:#102650;color:#fff}
.mon224-calc-t{margin:0;font-size:17px;font-weight:700}
.mon224-calc-t small{display:block;margin-top:2px;font-size:16px;font-weight:400;opacity:.8}
.mon224-row{display:flex;align-items:baseline;justify-content:space-between;gap:12px;padding:12px 0;border-bottom:1px solid rgba(255,255,255,.18);font-size:16px}
.mon224-row s{font-size:20px;opacity:.75}
.mon224-row.is-mon{border-bottom:0}
.mon224-row.is-mon span{padding:3px 12px;border-radius:999px;background:#102650;font-weight:700}
.mon224-row.is-mon b{font-size:clamp(34px,4vw,44px);line-height:1;font-weight:800;letter-spacing:.01em}
.mon224-row.is-mon b small{font-size:18px;margin-left:2px}
.mon224-calc-n{margin:0;font-size:16px;opacity:.85}
.mon224-calc .button{justify-content:center;margin-top:6px}
@media(max-width:900px){.mon224 .mon224-card{grid-template-columns:1fr;padding:32px 24px;gap:24px}}
@media(max-width:600px){
  .mon224 .mon224-card{padding:24px 16px;border-radius:20px}
  .mon224-terms li{padding:12px 14px 12px 44px}
  .mon224-terms li::before{left:14px;top:15px}
  .mon224-terms b{font-size:16px}
  .mon224-terms span,.mon224 .mon224-copy>p,.mon224-calc-n,.mon224-calc-t small{font-size:14px}
  .mon224-pill{font-size:14px;gap:8px;padding:8px 14px 8px 8px}
  .mon224-pill b{font-size:14px}
}

/* お支払いの推移：記事数（3つ）＋通常／モニター */
.mo165[data-mo224]{flex-wrap:wrap}
.mo165[data-mo224] .mo165-plan{flex-wrap:wrap}
.mo165[data-mo224] .mo224-init button[aria-pressed="true"]{background:#102650;border-color:#102650}
.mo165[data-mo224] .mo224-init button[aria-pressed="true"] small{color:#dfe6f2}

/* 右下バナー：モニター募集 */
.fb173.is-mon224 .fb173-tag{background:#102650!important;color:#fff!important}
.fb173.is-mon224 .fb173-title b{display:block;font-size:24px}

/* FV：金額の途中で改行しない */
.hero .lead .hl155{white-space:nowrap}

/* スマホ：料金ボタンは縦に並べ、ボタン内で折り返さない */
@media(max-width:600px){
  .mo165[data-mo224] .mo165-plan{display:grid;grid-template-columns:1fr;width:100%}
  .mo165[data-mo224] .mo165-plan button{display:flex;justify-content:space-between;align-items:baseline;gap:10px;white-space:nowrap}
}