/* MotoJP 個別車種ページ専用CSS (リニューアル基調) — service-page.css と併用
 * 描画は #model-root.mp 配下。お客様の声カード/モーダルは service-page.css の .voice-* を流用。 */
.mp{
  --red:#d4081d; --red-dark:#c00; --ink:#1a1f36; --ink-soft:#3a4055;
  --muted:#6b7280; --line:#e8e8e8; --card:#fff; --pink:#fdf2f4; --pink-line:#f2c9d1;
  --blue:#185fa5; --orange:#d9871f; --green:#2e9e5b; --gold:#9c7b3f;
  --shadow:0 10px 30px -12px rgba(26,31,54,.22); --shadow-sm:0 2px 10px -4px rgba(26,31,54,.18);
  --r:16px;
  color:var(--ink); line-height:1.85; max-width:1000px; margin:0 auto;
  font-family:"Hiragino Kaku Gothic ProN","Hiragino Sans","Noto Sans JP","Yu Gothic Medium",sans-serif;
}
.mp *{box-sizing:border-box}
.mp img{max-width:100%}

/* HERO */
.mp .hero{position:relative;margin-top:26px;background:radial-gradient(120% 140% at 100% 0%, rgba(212,8,29,.07), transparent 55%),#fff;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;box-shadow:var(--shadow)}
.mp .hero-body{padding:30px 34px 26px}
.mp .hero-eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:.74rem;font-weight:800;letter-spacing:.18em;color:var(--red);text-transform:uppercase}
.mp .hero-eyebrow::before{content:"";width:26px;height:2px;background:var(--red)}
.mp .hero h1{margin:.5rem 0 .1rem;font-size:2.15rem;font-weight:900;line-height:1.2}
.mp .hero h1 .yr{display:block;font-size:1rem;font-weight:700;color:var(--muted);letter-spacing:.08em;margin-top:6px}
.mp .badge-light{display:inline-block;margin-left:8px;background:var(--green);color:#fff;font-size:.66rem;font-weight:800;padding:3px 10px;border-radius:999px;vertical-align:middle;letter-spacing:.08em}
.mp .hero-photo{margin-top:18px;border-radius:12px;overflow:hidden;background:#eef0f4;aspect-ratio:3/2;display:flex;align-items:center;justify-content:center}
.mp .hero-photo img{width:100%;height:100%;object-fit:cover;display:block}
.mp .ph-fallback{width:100%;height:100%;display:flex;align-items:center;justify-content:center;color:#aab;background:repeating-linear-gradient(45deg,#eef0f4,#eef0f4 12px,#e7e9ee 12px,#e7e9ee 24px);font-weight:700;letter-spacing:.1em}

/* chips */
.mp .chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px}
.mp .chip{display:inline-flex;align-items:center;gap:6px;font-size:.78rem;font-weight:800;padding:5px 12px;border-radius:999px;color:#fff;white-space:nowrap}
.mp .chip::before{content:"";width:7px;height:7px;border-radius:50%;background:rgba(255,255,255,.95)}
.mp .chip.blue{background:var(--blue)} .mp .chip.orange{background:var(--orange)} .mp .chip.red{background:var(--red)} .mp .chip.green{background:var(--green)}
.mp .chips.on-head .chip{background:rgba(255,255,255,.18)} .mp .chips.on-head .chip::before{background:#fff}

/* section title */
.mp .sec{margin-top:46px}
.mp .sec-eyebrow{font-size:.72rem;font-weight:800;letter-spacing:.16em;color:var(--red);text-transform:uppercase}
.mp .sec-title{font-size:1.5rem;font-weight:900;margin:.2rem 0 0;display:flex;align-items:center;gap:12px}
.mp .sec-title::before{content:"";width:6px;height:26px;border-radius:3px;background:linear-gradient(var(--red),var(--red-dark))}

/* consult */
.mp .consult{margin-top:18px;display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media(max-width:720px){.mp .consult{grid-template-columns:1fr}}
.mp .consult-card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:22px 24px;box-shadow:var(--shadow-sm)}
.mp .consult-card.you{border-top:4px solid #c9ccd6}
.mp .consult-card.us{border-top:4px solid var(--red);background:var(--pink)}
.mp .consult-card h3{margin:0 0 12px;font-size:.95rem;font-weight:800;color:var(--ink-soft);display:flex;align-items:center;gap:8px}
.mp .consult-card.us h3{color:var(--red-dark)}
.mp .consult-list{margin:0;padding:0;list-style:none;font-size:.92rem}
.mp .consult-list li{padding:5px 0 5px 22px;position:relative}
.mp .consult-list li::before{content:"";position:absolute;left:2px;top:.95em;width:8px;height:8px;border-radius:50%;background:var(--red);opacity:.55}
.mp .consult-card p{margin:0;font-size:.9rem}
.mp .hl{background:linear-gradient(transparent 62%, #fff0a0 62%);font-weight:700}

/* anchor menu */
.mp .anchor-menu{margin-top:18px;display:flex;flex-wrap:wrap;gap:10px}
.mp .anchor-btn{display:flex;flex-direction:column;gap:2px;text-decoration:none;color:inherit;border:1px solid var(--line);background:#fff;border-radius:12px;padding:12px 16px;flex:1 1 220px;box-shadow:var(--shadow-sm);transition:.15s}
.mp .anchor-btn:hover{border-color:var(--red);transform:translateY(-2px)}
.mp .anchor-btn b{font-size:.96rem;font-weight:800}
.mp .anchor-btn span{font-size:.76rem;color:var(--muted)}
.mp .anchor-btn .mini-chips{display:flex;flex-wrap:wrap;gap:5px;margin-top:6px}
.mp .anchor-btn .mc{font-size:.64rem;padding:2px 7px}

/* service card */
.mp .svc{margin-top:22px;background:var(--card);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;box-shadow:var(--shadow)}
.mp .svc-head{padding:22px 26px;color:#fff;background:linear-gradient(120deg,var(--red),var(--red-dark))}
.mp .svc-head.gold{background:linear-gradient(120deg,#b9974f,var(--gold))}
.mp .svc-head.green{background:linear-gradient(120deg,#37b06b,var(--green))}
.mp .svc-kicker{font-size:.74rem;font-weight:800;letter-spacing:.12em;opacity:.92}
.mp .svc-name{font-size:1.32rem;font-weight:900;margin:4px 0 2px}
.mp .svc-sub{font-size:.84rem;opacity:.95;font-weight:600}
.mp .svc-price{margin-top:14px;display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.mp .svc-price .label{font-size:.78rem;font-weight:700;opacity:.9}
.mp .svc-price .amt{font-size:2rem;font-weight:900}
.mp .svc-price .amt small{font-size:.9rem;font-weight:800;margin-left:2px}
.mp .svc-price .tax{font-size:.72rem;opacity:.85}
.mp .svc-body{padding:22px 26px}
.mp .svc-itemnote{font-size:.82rem;color:var(--muted);font-weight:700;margin:0 0 10px}

/* item rows */
.mp .items{list-style:none;margin:0;padding:0;border:1px solid var(--line);border-radius:12px;overflow:hidden}
.mp .item-row{display:flex;align-items:center;gap:12px;width:100%;text-align:left;border:0;background:#fffdf3;border-bottom:1px solid #f0ecd6;padding:15px 18px;cursor:pointer;font:inherit;color:inherit;transition:.12s}
.mp .item-row:last-child{border-bottom:0}
.mp .item-row:hover{background:#fff7d6}
.mp .item-row .ix{flex:0 0 26px;height:26px;border-radius:7px;background:var(--red);color:#fff;font-size:.78rem;font-weight:800;display:flex;align-items:center;justify-content:center}
.mp .item-row .it-label{flex:1;font-weight:800;font-size:.96rem}
.mp .item-row .it-sfx{color:var(--red);font-weight:800}
.mp .item-row .chev{flex:0 0 auto;color:#c3a93a;font-weight:900;transition:.15s}
.mp .item-row:hover .chev{transform:translateX(3px)}
.mp .dyno-items .item-row{background:#fff5f8;border-bottom-color:#f6d9e3}
.mp .dyno-items .item-row:hover{background:#ffe9f0}
.mp .dyno-items .item-row .ix{background:var(--gold)}

.mp .svc-total{margin-top:16px;display:flex;flex-wrap:wrap;gap:10px}
.mp .tot-pill{font-size:.84rem;font-weight:800;padding:8px 14px;border-radius:10px;background:#fff;border:1px dashed var(--red);color:var(--red-dark)}
.mp .tot-pill.gold{border-color:var(--gold);color:var(--gold)}
.mp .svc-foot{margin-top:14px;font-size:.78rem;color:var(--muted)}

/* balloon */
.mp .balloon{margin-top:16px;display:flex;gap:12px;align-items:flex-start;background:var(--pink);border:1px solid var(--pink-line);border-radius:12px;padding:16px 18px}
.mp .balloon .ava{flex:0 0 44px;height:44px;border-radius:50%;background:var(--red);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:900;font-size:.8rem}
.mp .balloon p{margin:0;font-size:.9rem}

.mp .option-box{margin-top:16px;border:1px solid var(--line);border-radius:12px;padding:14px 18px;background:#fbfbfc}
.mp .option-box h4{margin:0 0 6px;font-size:.92rem;font-weight:800;color:var(--red-dark)}
.mp .option-box p{margin:0;font-size:.86rem;color:var(--ink-soft)}
.mp .option-box .add{font-weight:900;color:var(--red)}

/* blog */
.mp .blog-grid{margin-top:18px;display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
@media(max-width:760px){.mp .blog-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:480px){.mp .blog-grid{grid-template-columns:1fr}}
.mp .blog-card{display:block;text-decoration:none;color:inherit;background:#fff;border:1px solid var(--line);border-radius:12px;overflow:hidden;box-shadow:var(--shadow-sm);transition:.15s}
.mp .blog-card:hover{transform:translateY(-3px);border-color:var(--red)}
.mp .blog-thumb{aspect-ratio:16/10;background:#eef0f4;display:flex;align-items:center;justify-content:center;overflow:hidden}
.mp .blog-thumb img{width:100%;height:100%;object-fit:cover}
.mp .blog-card h4{margin:0;padding:12px 14px;font-size:.86rem;font-weight:800;line-height:1.5}

/* voice head + grid spacing (カード自体は service-page.css の .voice-card) */
.mp .voice-head-row{display:flex;align-items:baseline;justify-content:space-between;flex-wrap:wrap;gap:8px;margin-top:4px}
.mp .voice-note{font-size:.82rem;color:var(--muted);font-weight:700}
.mp .voice-loadmore{text-align:center;margin-top:18px}
.mp .voice-loadmore button{background:var(--red-dark);color:#fff;border:0;border-radius:999px;padding:12px 34px;font-weight:800;font-size:.95rem;cursor:pointer}
.mp .voice-loadmore button:hover{background:var(--red)}
.mp .voice-empty{padding:30px;text-align:center;color:var(--muted);border:1px dashed var(--line);border-radius:12px}

/* guide */
.mp .guide-grid{margin-top:18px;display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
@media(max-width:760px){.mp .guide-grid{grid-template-columns:1fr}}
.mp .guide-card{display:flex;gap:14px;align-items:center;text-decoration:none;color:inherit;background:#fff;border:1px solid var(--line);border-radius:12px;padding:16px;box-shadow:var(--shadow-sm);transition:.15s}
.mp .guide-card:hover{border-color:var(--red);transform:translateY(-2px)}
.mp .guide-ic{flex:0 0 46px;height:46px;border-radius:12px;display:flex;align-items:center;justify-content:center;color:#fff;font-weight:900;font-size:1.1rem}
.mp .guide-ic.blue{background:var(--blue)} .mp .guide-ic.orange{background:var(--orange)} .mp .guide-ic.red{background:var(--red)}
.mp .guide-card b{font-size:.95rem;font-weight:800}
.mp .guide-card span{display:block;font-size:.76rem;color:var(--muted);margin-top:2px}
.mp .mp-notfound{padding:80px 20px;text-align:center}

/* 項目モーダル(#mp-ov) — 声モーダルは service-page.css の .voice-modal-* を使用 */
#mp-ov{position:fixed;inset:0;background:rgba(20,24,40,.55);display:none;align-items:center;justify-content:center;padding:22px;z-index:1000;backdrop-filter:blur(3px)}
#mp-ov.open{display:flex}
#mp-ov .modal{background:#fff;border-radius:18px;max-width:600px;width:100%;max-height:86vh;overflow:auto;box-shadow:0 30px 80px -20px rgba(0,0,0,.5);animation:mp-pop .22s ease}
@keyframes mp-pop{from{transform:translateY(14px) scale(.98);opacity:0}to{transform:none;opacity:1}}
#mp-ov .modal-head{position:sticky;top:0;background:linear-gradient(120deg,#d4081d,#c00);color:#fff;padding:18px 22px;display:flex;align-items:center;justify-content:space-between;gap:12px}
#mp-ov .modal-head.green{background:linear-gradient(120deg,#37b06b,#2e9e5b)}
#mp-ov .modal-head h2{margin:0;font-size:1.1rem;font-weight:900}
#mp-ov .modal-x{border:0;background:rgba(255,255,255,.2);color:#fff;width:34px;height:34px;border-radius:50%;font-size:1.1rem;cursor:pointer;flex:0 0 auto}
#mp-ov .modal-x:hover{background:rgba(255,255,255,.35)}
#mp-ov .modal-body{padding:22px 24px;font-size:.92rem}
#mp-ov .modal-body p{margin:0 0 12px}
#mp-ov .modal-body img{border-radius:10px;margin-top:8px}
.underLineYellow{background:linear-gradient(transparent 60%, #fff0a0 60%)}
.underLineRed{background:linear-gradient(transparent 60%, #ffd3da 60%)}

/* ===== SALE / NEW / price-strike / gray chip / chip text-color fix (v1.1.0) ===== */
.mp .anchor-btn .chip{color:#fff} /* fix: .anchor-btn span color leak made chip text gray */
.mp .chip.gray{background:#9aa0ad}
.mp .badge-sale{display:inline-block;margin-left:8px;background:#fff;color:#d4081d;border:1.5px solid #d4081d;font-size:.66rem;font-weight:900;padding:2px 9px;border-radius:999px;vertical-align:middle;letter-spacing:.08em}
.mp .badge-sale.mini{font-size:.6rem;padding:2px 8px;margin-left:6px}
.mp .badge-new{display:inline-block;margin-left:8px;background:#fff;color:#d4081d;border:1.5px solid #d4081d;font-size:.66rem;font-weight:900;padding:2px 9px;border-radius:999px;vertical-align:middle;letter-spacing:.08em}
.mp .svc-price .amt-was{font-size:1.1rem;font-weight:700;opacity:.78;text-decoration:line-through;text-decoration-thickness:2px}
.mp .svc-price .amt.is-sale{color:#ffe55c;text-shadow:0 1px 2px rgba(0,0,0,.2)}
.mp .svc-price .off-badge{background:#fff;color:#d4081d;font-size:.78rem;font-weight:900;padding:3px 10px;border-radius:8px;align-self:center}
.mp .tot-pill s{opacity:.6;font-weight:700;margin-right:2px}
.mp .tot-pill .pill-off{background:#d4081d;color:#fff;font-size:.7rem;font-weight:900;padding:1px 7px;border-radius:6px;margin-left:2px}
.mp .tot-pill.gold .pill-off{background:#9c7b3f}

/* v1.1.1: balloon without avatar / sale badge restyle */
.mp .balloon{display:block}

/* v1.1.2: SNS follow row / CTA buttons / option link */
.mp .sns-row{margin-top:14px;display:flex;flex-wrap:wrap;gap:10px}
.mp .sns-btn{display:inline-flex;align-items:center;gap:8px;text-decoration:none;color:#fff;font-weight:800;font-size:.86rem;padding:10px 18px;border-radius:999px;box-shadow:0 2px 10px -4px rgba(26,31,54,.3);transition:.15s}
.mp .sns-btn:hover{transform:translateY(-2px)}
.mp .sns-btn.insta{background:linear-gradient(45deg,#f09433,#e6683c,#dc2743,#cc2366,#bc1888)}
.mp .sns-btn.x{background:#15202b}
.mp .cta-row{margin-top:14px;text-align:center}
.mp .cta-btn{display:inline-block;text-decoration:none;background:#c00;color:#fff;font-weight:800;font-size:.95rem;padding:12px 30px;border-radius:999px;box-shadow:0 4px 14px -6px rgba(204,0,0,.55);transition:.15s}
.mp .cta-btn:hover{background:#d4081d;transform:translateY(-2px)}
.mp .cta-btn.green{background:#2e9e5b;box-shadow:0 4px 14px -6px rgba(46,158,91,.55)}
.mp .cta-btn.green:hover{background:#37b06b}
.mp .opt-link{margin-top:8px !important;font-size:.84rem}
.mp .opt-link a{color:#c00;font-weight:800;text-decoration:none}
.mp .opt-link a:hover{text-decoration:underline}

/* v1.1.3: order modal */
.mp .cta-btn.order-open{border:0;cursor:pointer;font:inherit;font-weight:800}
#mp-ov .order-list{display:flex;flex-direction:column;gap:12px}
#mp-ov .order-btn{display:flex;flex-direction:column;gap:2px;text-decoration:none;color:#fff;border-radius:14px;padding:16px 20px;transition:.15s;box-shadow:0 4px 14px -8px rgba(26,31,54,.4)}
#mp-ov .order-btn:hover{transform:translateY(-2px);filter:brightness(1.06)}
#mp-ov .order-btn b{font-size:1.05rem;font-weight:900}
#mp-ov .order-btn span{font-size:.78rem;opacity:.92}
#mp-ov .order-btn.blue{background:#185fa5}
#mp-ov .order-btn.orange{background:#d9871f}
#mp-ov .order-btn.red{background:#d4081d}
#mp-ov .order-note{margin:12px 0 0;font-size:.8rem;color:#6b7280}

/* v1.1.4: item label parentheses in red (match legacy site) */
.mp .item-row .it-paren{color:var(--red);font-weight:800}

/* v1.1.5: positive voice-empty + post link */
.mp .voice-empty{font-weight:700;color:#3a4055}
.mp .voice-post-link{display:inline-block;margin-top:10px;color:#c00;font-weight:900;text-decoration:none}
.mp .voice-post-link:hover{text-decoration:underline}

/* v1.1.6: consult emphasis = bold (no yellow underline), readable list text */
.mp .consult .underLineYellow,
.mp .consult .hl{font-weight:800;color:var(--ink)} /* v1.1.7: 黄下線は維持し太字を追加 */
.mp .consult-list{font-size:.95rem}
.mp .consult-card p{font-size:.93rem}

/* v1.1.7: voice post CTA (always visible) */
.mp .voice-cta{margin-top:18px;text-align:center}
.mp .voice-cta a{display:inline-block;text-decoration:none;background:#fff;color:#c00;border:2px solid #c00;font-weight:900;font-size:.95rem;padding:11px 30px;border-radius:999px;transition:.15s}
.mp .voice-cta a:hover{background:#c00;color:#fff;transform:translateY(-2px)}

/* ===== v1.1.8: spacing/mobile optimization ===== */
/* 帯(サービスヘッダ)の余白圧縮 (PC含む全幅) */
.mp .svc-head{padding:18px 22px 16px}
.mp .svc-price{margin-top:9px;gap:8px}
.mp .svc-head .chips{margin-top:12px}
.mp .svc-name{margin:3px 0 1px}
.mp .svc-body{padding:18px 22px 20px}
/* スマートフォン最適化 */
@media(max-width:600px){
  .mp{line-height:1.7}
  .mp .hero{margin-top:14px}
  .mp .hero-body{padding:18px 16px 16px}
  .mp .hero h1{font-size:1.5rem}
  .mp .hero h1 .yr{font-size:.86rem;margin-top:4px}
  .mp .sec{margin-top:30px}
  .mp .sec-title{font-size:1.22rem}
  .mp .svc{margin-top:16px}
  .mp .svc-head{padding:14px 16px 13px}
  .mp .svc-kicker{font-size:.68rem}
  .mp .svc-name{font-size:1.08rem}
  .mp .svc-sub{font-size:.78rem}
  .mp .svc-price{margin-top:7px;gap:6px}
  .mp .svc-price .amt{font-size:1.55rem}
  .mp .svc-price .amt-was{font-size:.92rem}
  .mp .svc-price .label{font-size:.72rem}
  .mp .svc-head .chips{margin-top:9px;gap:6px}
  .mp .chip{font-size:.7rem;padding:4px 10px}
  .mp .svc-body{padding:14px 14px 16px}
  .mp .item-row{padding:12px 12px;gap:9px}
  .mp .item-row .it-label{font-size:.88rem}
  .mp .consult-card{padding:16px 16px}
  .mp .consult-list{font-size:.9rem}
  .mp .anchor-btn{padding:10px 13px;flex-basis:46%}
  .mp .balloon{padding:12px 14px}
  .mp .balloon p{font-size:.86rem}
  .mp .cta-btn{display:block;text-align:center;padding:12px 16px;font-size:.9rem}
  .mp .sns-row{gap:8px}
  .mp .sns-btn{flex:1 1 auto;justify-content:center;font-size:.8rem;padding:9px 12px}
  .mp .option-box{padding:12px 14px}
  .mp .svc-total{gap:7px}
  .mp .tot-pill{font-size:.78rem;padding:7px 11px}
  .mp .guide-card{padding:12px}
  .mp .voice-cta a{display:block;padding:11px 16px;font-size:.88rem}
}