@charset "UTF-8";
/* ==========================================================================
   MPAC
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. 下層ページヒーロー
   -------------------------------------------------------------------------- */

.page-mpac .page-inr-hero {
  position: relative;
  height: auto;
  min-width: 1240px;
}
.page-inr-bg.m-service-inr-bg-mpac {
  background-image: none;   /* 写真は ::after に持たせてフェードインさせる */
  background-color: #f0f3f8;  /* 初期値のフィルター色 */
  background-attachment: scroll;
  background: #f0f3f8;
  position: relative;
  width: 100%;          /* .js-hero(width:0) より詳細度が高いので上書きされない */
  height: auto;
  aspect-ratio: 1920 / 500;
}

@media screen and (max-width:500px){
  .page-inr-bg.m-service-inr-bg-mpac {
      aspect-ratio: 1920 / 800;
  }
}

/* 背景写真。background-image は transition できないため擬似要素に分離し、
   ベタ塗りの #f0f3f8 の上に opacity でフェードインさせる。 */
.page-inr-bg.m-service-inr-bg-mpac::after {
  content: "";
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  background-image: url(../img/img-mpac-bg.jpg);
  background-repeat: no-repeat;
  background-size: 100% auto;
  background-position: center top;
}

@media screen and (max-width:500px){
  .page-inr-bg.m-service-inr-bg-mpac::after {
    background-image: url(../img/img-mpac-bg-sp.png);
  }
}

/* .is-bg-ready / .is-bg-in は index.php のスクリプトで .page-inr-hero に付与する。
   JSが動かない環境では .is-bg-ready が付かないため、写真は最初から表示される。 */
@media (prefers-reduced-motion:no-preference){
  .page-inr-hero.is-bg-ready .page-inr-bg.m-service-inr-bg-mpac::after{
    opacity: 0;
  }
  .page-inr-hero.is-bg-ready.is-bg-in .page-inr-bg.m-service-inr-bg-mpac::after{
    opacity: 1;
    transition: opacity 1.1s cubic-bezier(.2,.7,.3,1);
  }
}

/* ロゴ2点をヒーロー中央に2段表示（JMMSの .page-title-jmms と同じ役割）
   幅・間隔はすべて % 指定。背景が background-size:100% auto で伸縮するため、
   どの画面幅でも配置イメージ（1920×500）の比率のまま追従する。
     MPAC   ：313 / 1920 = 16.30%
     S-Pitt ：300 / 1920 = 15.63%
     段間   ： 58 / 1920 =  3.02%（margin の % は幅基準なので高さに影響されない） */
.page-title-mpac {
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: auto;
  margin: 0;
  padding: 0;
}
.page-title-mpac img { display: block; height: auto; }
.page-title-mpac_logo  { width: 16.30%; }
.page-title-mpac_spitt { width: 15.63%; margin-top: 3.02%; }
@media screen and (max-width:767px){
.page-title-mpac_logo  { width: 20.3%; }
.page-title-mpac_spitt { width: 19.63%; margin-top: 3.02%; }
}
/* ロゴ2点を 0.2s ずらしてフェードイン。
   .is-logo-ready / .is-logo-in は index.php のスクリプトで付与する。
   JSが動かない環境では .is-logo-ready が付かないため、常に表示されたままになる。 */
@media (prefers-reduced-motion:no-preference){
  .page-title-mpac.is-logo-ready img{
    opacity:0;
    transform:translateY(18px);
  }
  .page-title-mpac.is-logo-ready.is-logo-in img{
    opacity:1;
    transform:none;
    transition:opacity .7s cubic-bezier(.2,.7,.3,1), transform .7s cubic-bezier(.2,.7,.3,1);
  }
  .page-title-mpac.is-logo-ready.is-logo-in .page-title-mpac_spitt{
    transition-delay:.2s;
  }
}

@media screen and (max-width:767px){
  .page-mpac .page-inr-hero { min-width: 0; height: auto; }
}



/* --------------------------------------------------------------------------
   2. 本文
   -------------------------------------------------------------------------- */

:root{
  --ink:#1B2230;
  --ink-2:#4A5364;
  --ink-3:#767E8B;
  --paper:#FCFBF8;
  --mist:#EDEFF2;
  --navy:#1F3A66;
  --navy-deep:#111F38;
  --gold:#A8843A;
  --line:#DAD7CF;
  --line-dark:#33415C;
  --serif:"Shippori Mincho", "Noto Serif JP", "Noto Serif CJK JP", "Yu Mincho", "YuMincho", "Hiragino Mincho ProN", serif;
  --sans:"Noto Sans JP", "Hiragino Kaku Gothic ProN", sans-serif;
  --wrap:1120px;
}

.mpac-lp, .mpac-lp *{box-sizing:border-box;}

html{scroll-behavior:smooth;}

html{ background:#395877; }

.mpac-lp{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--sans);font-size:16px;line-height:1.9;
  font-feature-settings:"palt";-webkit-font-smoothing:antialiased;
}

.mpac-lp img{max-width:100%;display:block;}

.mpac-lp a{color:inherit;}

.mpac-lp .lp-wrap{max-width:var(--wrap);margin:0 auto;padding:0 0;}

@media screen and (min-width:768px) and (max-width:1200px){
    .mpac-lp .lp-wrap{max-width:var(--wrap);margin:0 auto;padding:40px 50px;}
}
@media screen and (max-width:767px){
    .mpac-lp .lp-wrap{max-width:var(--wrap);margin:0 auto;padding:0 20px;}
}
.mpac-lp .measure{max-width:unset;}


/* ヘッダー */


.mpac-lp .btn{
  display:inline-block;padding:13px 26px;border-radius:2px;text-decoration:none;
  font-size:clamp(16px,1.5vw,18px);font-weight:500;letter-spacing:0.05em;transition:background .2s,color .2s;
}

.mpac-lp .btn-primary{background:#1f3f6b;color:#fff;border: solid 1px #1f3f6b;}

.mpac-lp .btn-primary:hover{background: #fff; color: #1f3f6b; border: solid 1px #1f3f6b;}

.mpac-lp .btn-ghost{border:1px solid var(--line);color:var(--ink);margin: 0 auto;background: #fff;}

.mpac-lp .btn-ghost:hover{margin: 0 auto;background: #fff;}

.mpac-lp .btn-light{background:#fff;color:var(--navy-deep);}

.mpac-lp .btn-sm{padding:9px 18px;font-size:13px;}

.mpac-lp .btn-pdf { background: #fff; color: #000; border: solid 1px #666; font-size: 15px; } 

.mpac-lp .btn-pdf:hover { background: #fff; color: #000; border: solid 1px #666; font-size: 15px; text-decoration: underline;}

/* 製品仕様（PDF）ボタンのダウンロードアイコン。
   stroke は currentColor なので、hover で文字色が白になると線も白に追従する。 */
.mpac-lp .btn-icn-dl{
  width:1.05em;
  height:1.05em;
  margin-right:8px;
  vertical-align:-0.18em;
}

/* ページ下部「店舗運営（飲食・物販など）の事業者さまへ」へのアンカーボタン */
.mpac-lp .btn-gold{ border: solid 1px var(--gold); color: var(--gold);}

.mpac-lp .btn-gold:hover{ color: #fff; background: var(--gold); }

/* ヒーローのボタンは2つ並列。本文カラム幅（1120pxレイアウトで約554px）に
   収まるよう、ヒーロー内のボタンだけ文字サイズと左右paddingを詰める。 */
.mpac-lp .lp-hero-cta .btn{ font-size:clamp(14px,1.5vw,15px); padding-left:16px; padding-right:16px;margin: 0 auto;}

/* セクション共通 */
.mpac-lp section{padding:50px 0;}


@media(max-width:480px){
  .mpac-lp section {
      padding: 50px 0 30px 0;
  }
}

.mpac-lp .sec-mist{background:#f0ece5;}

.mpac-lp .sec-ink{background:#031b3f;color:#E8EBF0;}

.mpac-lp section.sec-ink { padding: 50px 0 60px 0; }

.mpac-lp .sec-ink h2, .mpac-lp .sec-ink h3{color:#fff;}

.mpac-lp h2{
  font-family:var(--serif);font-weight:500;font-size:clamp(24px,3.4vw,38px);
  line-height:1.55;letter-spacing:.02em;margin:0 0 28px;
}
@media(max-width:768px){
    .mpac-lp h2{
      margin:0 0 20px;
    }
}

.mpac-lp h3{font-family:var(--serif);font-weight:500;font-size:clamp(22px,3.4vw,38px);line-height:1.6;margin:0 0 12px;letter-spacing:.04em;}

.mpac-lp p{margin:0 0 20px;font-weight:400;font-size: 17px;letter-spacing: 0.04em;}

.mpac-lp .lead{font-size:clamp(16px,1.5vw,18px);color:var(--ink-2);letter-spacing: 0.04em;}

.mpac-lp .sec-ink .lead{color:#fff;}

p.lead.series {margin-bottom: 36px;}

@media screen and (max-width:767px){
    p.lead.series {margin-bottom: 20px;}
}

.mpac-lp .note{font-size:13.5px;line-height:1.85;color:var(--ink-2);}

.mpac-lp .sec-ink .note{color:#8A97AC;}

/* キャッチコピー */
section.lp-title {
    background: #1e354e;
    padding: 0 15px;
    margin: 0px 0 0 0;
    vertical-align: baseline;
    font: inherit;
    z-index: 9999999;
}

@media (max-width: 860px) {
    section.lp-title {
        margin: 0px 0 0px 0;
    }
    section.lp-title h1 {
        font-size: 17px !important;
        padding: 14px 0 0 0 !important;
    }
    section.lp-title h2 {
        font-size: 15px !important;
        padding: 5px 0 18px 0 !important;
    }
}

section.lp-title h1 {
    text-align: center;
    display: block;
    color: #ffffff;
    font-size: 20px;
    font-weight: 600;
    padding: 18px 0 0 0;
    font-family: var(--serif);
    letter-spacing: 0.13em;
}

section.lp-title h2 {
    text-align: center;
    display: block;
    color: #ffffff;
    font-size: 16px;
    font-weight: 500;
    padding: 5px 0 22px 0;
    margin: 0;
    font-family: var(--serif);
}


/* ヒーロー */
.mpac-lp .lp-hero{padding:96px 0 104px;position:relative;overflow:hidden;}

.mpac-lp .lp-hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:50px;align-items:center;}

.mpac-lp .lp-hero h1{
  font-family:var(--serif);font-weight:500;font-size:clamp(32px,4.6vw,52px);
  line-height:1.5;letter-spacing:.03em;margin:0 0 32px;
}

.mpac-lp .lp-hero .kicker{
  font-family:var(--serif);font-size:15px;color:var(--gold);letter-spacing:.14em;margin:0 0 10px 0;
}
@media screen and (max-width:480px){
.mpac-lp .lp-hero .kicker{
    padding: 0 20px;}
}
.mpac-lp .lp-hero .desc{font-size:16.5px;color:var(--ink-2);margin-bottom:36px;}

.mpac-lp .lp-hero-cta {width: 470px;}

@media(max-width:1113px){
.mpac-lp .lp-hero .desc{margin-bottom:20px;}
}

.mpac-lp .lp-hero-cta{display:flex;gap:14px;flex-wrap:wrap;}

.mpac-lp .lp-hero-fig{position:relative;}

.mpac-lp .ph{
  background:#E4E1DA;border:1px solid var(--line);display:flex;align-items:center;justify-content:center;
  color:#8C877C;font-size:12.5px;letter-spacing:.05em;text-align:center;line-height:1.8;
}

.mpac-lp .lp-hero-fig .ph{aspect-ratio:4/5;}
@media(max-width:860px){
  .mpac-lp .lp-hero-grid{grid-template-columns:1fr;gap:44px;}
  .mpac-lp .lp-hero{padding:64px 0 72px;}
}

@media screen and (max-width:480px){
        .mpac-lp .lp-hero-grid{gap:0 !important;}
}

/* 課題セクション */
.mpac-lp .issue-grid{display:grid;grid-template-columns:1fr 1fr;gap:72px;align-items:start;}

@media(max-width:860px){
  .mpac-lp .stat{border-top:1px solid var(--line);padding-top:50px;}
}

@media(max-width:480px){
  .mpac-lp .stat{border-top:1px solid var(--line);padding-top:35px;}
}

.mpac-lp .stat-num{font-family:var(--serif);font-size:clamp(26px,3.4vw,38px);line-height:1.5em;font-weight:500;var(--ink);margin-bottom:30px;}
.mpac-lp .stat-num span{color: var(--navy);font-family:var(--serif);font-size:clamp(26px, 3.4vw, 38px) !important;line-height:1.5em;font-weight:500;margin-bottom:30px;}

@media(max-width:768px){
  .mpac-lp .stat-num{font-family:var(--serif);margin-bottom:20px;}
}

.mpac-lp .stat-num span{font-size:26px;margin-left:2px;}

.mpac-lp .stat-label{margin-top:14px;font-size:15px;color:var(--ink-2);line-height:1.8;}

.mpac-lp .bar{height:6px;background:#DCD9D2;margin-top:24px;position:relative;}

.mpac-lp .bar i{position:absolute;left:0;top:0;bottom:0;width:57.8%;background:var(--navy);}

.mpac-lp .bar-cap{display:flex;justify-content:space-between;font-size:12px;color:var(--ink-3);margin-top:10px;}

@media(max-width:860px){
.mpac-lp .issue-grid{grid-template-columns:1fr;gap:44px;}
}

@media(max-width:480px){
.mpac-lp .issue-grid{grid-template-columns:1fr;gap:16px;}
}

/* 価値：横並びリスト */
.mpac-lp .values{border-top:1px solid var(--line);margin-top:8px;}

.mpac-lp .value{
  display:grid;grid-template-columns:300px 1fr;gap:10px;
  padding:36px 0;border-bottom:1px solid var(--line);
}

.mpac-lp .value-key{font-family:var(--serif);font-size:20px;color:var(--navy);line-height:1.6;letter-spacing:.05em;
    font-weight: bold;}

.mpac-lp .value-body p{margin:0;color:var(--ink-2);font-size:16px;letter-spacing:0.04em;}

.mpac-lp .value-body strong{font-weight:500;color:var(--ink);}

@media(max-width:767px){
.mpac-lp .value-key{font-size:20px;}
}

@media(max-width:720px){
.mpac-lp .value{grid-template-columns:1fr;gap:10px;padding:28px 0;}

}


/* 仕組み図 */
.mpac-lp .arch{display:grid;grid-template-columns:1fr 1fr;gap:28px;margin-top:48px;}

.mpac-lp .arch-card{border:1px solid var(--line-dark);padding:32px 28px 34px;}

.mpac-lp .arch-card h3{font-size:17px;margin-bottom:6px;}

.mpac-lp .arch-tag{font-size:12px;letter-spacing:.1em;color:#7D8CA6;margin-bottom:24px;}

.mpac-lp .node{
  border:1px solid var(--line-dark);padding:12px 14px;font-size:13.5px;margin-bottom:10px;
  display:flex;justify-content:space-between;gap:10px;align-items:center;
}

.mpac-lp .node em{font-style:normal;color:#7D8CA6;font-size:12px;}

.mpac-lp .node-cloud{background:#1B3055;border-color:#2C4874;}

.mpac-lp .node-term{background:#16283F;}

.mpac-lp .node-thin{border-style:dashed;color:#9AA8BE;}

.mpac-lp .conn{height:22px;border-left:1px dashed #40506E;margin-left:22px;}

.mpac-lp section#device { padding: 50px 0 30px 0; }

@media(max-width:720px){
  .mpac-lp section#device { padding: 50px 0 10px 0; }
}

@media(max-width:720px){
.mpac-lp .arch{grid-template-columns:1fr;}}

.mpac-lp .devices{display:grid;grid-template-columns:1fr 1fr;gap:36px;margin-top:16px;}

.mpac-lp .device{border:1px solid var(--line);background:#fff;}

.mpac-lp .device .ph{aspect-ratio:5/4;border:0;border-bottom:1px solid var(--line);}

.mpac-lp .device-body{padding:30px 28px 10px 28px;}

.mpac-lp .device-body h3{margin-bottom:8px;}

.mpac-lp .device-body .tagline{font-size:16px;color:var(--ink-1);margin-bottom:22px;line-height: 1.5em;}

@media(max-width:480px){
  .mpac-lp .device-body .tagline{letter-spacing: 0.02em;}
}

.mpac-lp dl.spec{margin:0;font-size:14px;}

.mpac-lp dl.spec>div{display:grid;grid-template-columns:96px 1fr;gap:14px;padding:9px 0;border-top:1px solid var(--line);}

.mpac-lp dl.spec dt{color:var(--ink-3);}

.mpac-lp dl.spec dd{margin:0;color:var(--ink-2);}

.mpac-lp .availability{margin-top:22px;font-size:13px;color:var(--gold);letter-spacing:.02em;border: solid 1px; width: fit-content; padding: 0 10px 1px 10px;border: solid 1px var(--gold);border-radius: 30px;}

@media(max-width:860px){
.mpac-lp .devices{grid-template-columns:1fr;}

}


/* 導入の流れ */
.mpac-lp .steps{display:grid;grid-template-columns:repeat(3,1fr);gap:32px;margin-top:34px;counter-reset:s;}

.mpac-lp .step{border-top:1px solid #dad7cf;padding-top:22px;}

.mpac-lp .step .n{font-family:var(--serif);font-size:14px;color:var(--gold);letter-spacing:.1em;margin-bottom:10px;}

.mpac-lp .step h3{font-size:20px;font-weight: 500;}

.mpac-lp .step p{font-size:17px;color:var(--ink-2);margin:0;letter-spacing: 0.04em;}

@media(max-width:720px){
.mpac-lp .steps{grid-template-columns:1fr;gap:24px;}

}


/* FAQ */
.mpac-lp .faq{border-top:1px solid var(--line);margin-top:8px;}

@media (max-width: 480px) {
  .mpac-lp section#faq {
      padding: 40px 0 50px 0;
  }
}

.mpac-lp details{border-bottom:1px solid var(--line);}
.mpac-lp details:open summary {padding-bottom:10px;}
.mpac-lp summary{
  cursor:pointer;padding:24px 44px 24px 0;font-size:17px;position:relative;list-style:none;
  font-family:var(--serif);letter-spacing:.04em;font-weight:600;
}

.mpac-lp summary::-webkit-details-marker{display:none;}

.mpac-lp summary::after{
  content:"";position:absolute;right:8px;top:50%;width:11px;height:11px;
  border-right:1px solid var(--ink-2);border-bottom:1px solid var(--ink-2);
  transform:translateY(-70%) rotate(45deg);transition:transform .2s;
}

.mpac-lp details[open] summary::after{transform:translateY(-30%) rotate(-135deg);}

.mpac-lp details .ans{padding:0 0 26px 0;color:var(--ink-2);font-size:16px;font-weight: 400;letter-spacing: 0.04em;}

.mpac-lp summary:focus-visible{outline:2px solid var(--navy);outline-offset:3px;}


/* パートナー帯 */
.mpac-lp .partner{background:#f0e8d9;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:52px 0;}

.mpac-lp .partner-in{display:flex;justify-content:space-between;align-items:center;gap:32px;flex-wrap:wrap;}

.mpac-lp .partner h3{margin-bottom:10px;}

.mpac-lp .partner p{margin:0;font-size:17px;color:var(--ink-2);max-width:44em;line-height: 1.5em;}

@media screen and (max-width:1080px){
.mpac-lp .partner p{max-width:100%;}
}

/* CTA */
.mpac-lp .cta{background:var(--navy-deep);color:#fff;text-align:center;padding:50px 0 50px 0;}

.mpac-lp .cta h2{color:#fff;margin-bottom:20px;}

.mpac-lp .cta p{color:#B9C2D0;margin:0 auto 36px;}

.mpac-lp .cta-btns{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;}

a.btn.btn-primary.btn-partner {
    background: #b79335;
    color: #fff;
    border: solid 1px #b79335;
}
a.btn.btn-primary.btn-partner:hover {
    background: #fff;
    color: #0e203a;
    border: solid 1px #b79335;
}

/* フッター */
@media (prefers-reduced-motion:no-preference){

  .mpac-lp .lp-hero .kicker, .mpac-lp .lp-hero h1, .mpac-lp .lp-hero .lp-hero-title, .mpac-lp .lp-hero .desc, .mpac-lp .lp-hero-cta, .mpac-lp .lp-hero-fig{
    opacity:0;transform:translateY(14px);animation:rise .9s cubic-bezier(.2,.7,.3,1) forwards;
  }

  .mpac-lp .lp-hero h1, .mpac-lp .lp-hero .lp-hero-title{animation-delay:.08s;}

  .mpac-lp .lp-hero .desc{animation-delay:.16s;}

  .mpac-lp .lp-hero-cta{animation-delay:.24s;}

  .mpac-lp .lp-hero-fig{animation-delay:.12s;}


}

@keyframes rise{to{opacity:1;transform:none;}}

/* スクロール連動フェードアップ（ヒーロー以外の見出し・テキスト）
   .js-fade / .is-inview は index.php のスクリプトで付与。
   JSが動かない環境では .is-fade-ready が付かないため、常に表示される。 */
@media (prefers-reduced-motion:no-preference){
  /* transition は表示側にだけ付ける（読み込み直後に「表示→非表示」へ動いて見えるのを防ぐ） */
  .mpac-lp.is-fade-ready .js-fade{opacity:0;transform:translateY(14px);}
  .mpac-lp.is-fade-ready .js-fade.is-inview{
    opacity:1;transform:none;
    transition:opacity .9s cubic-bezier(.2,.7,.3,1),transform .9s cubic-bezier(.2,.7,.3,1);
  }

  /* 57.8%バー：画面に入ったら左から右へ伸びる（.is-inview は index.php で付与） */
  .mpac-lp.is-fade-ready .bar i{transform:scaleX(0);transform-origin:left center;}
  .mpac-lp.is-fade-ready .bar.is-inview i{
    transform:scaleX(1);
    transition:transform 1.4s cubic-bezier(.2,.7,.3,1) .4s;
  }
}

h2.measure.js-fade.is-inview span {
    font-size: 22px;
    padding: 0 0 0 10px;
    line-height: 20px;
}

@media screen and (max-width: 480px) {
  h2.measure.js-fade.is-inview {
      font-size: 24px;
  }
  p.note.js-fade.is-inview {
      letter-spacing: 0.02em;
  }
}

.js-fade.is-inview li {
    font-size: 17px;
    font-weight: 400;
    list-style: disc;
    margin: 10px 0 10px 1em;
    color: #4a5364;
    letter-spacing: 0.04em;
    line-height: 1.25em;
}

@media screen and (max-width:767px){
  h2.measure.js-fade.is-inview span {
      font-size: 15px;
  }
}


.mpac-lp{ font-feature-settings:"palt"; }
.mpac-lp .lp-photo{ width:100%; height:auto; display:block; }

.mpac-lp .device .lp-photo{ object-fit:cover; border-bottom:1px solid var(--line); background:#F2F1EC; }
.mpac-lp .lp-hero-title{
  font-family:var(--serif); font-weight:500; font-size:clamp(30px,4.2vw,46px);
  line-height:1.5; letter-spacing:.03em; margin:0 0 32px;
}

@media screen and (max-width:767px){
  .mpac-lp .lp-hero-title{
    margin:0 0 20px;
  }
}

@media screen and (max-width:480px){
  .mpac-lp .lp-hero-title{
    padding: 0 20px;
  }
}

.mpac-lp .lp-hero{
  position:relative; overflow:hidden;
  padding:0; min-height:460px;
  display:flex; align-items:center;
}

.mpac-lp .lp-hero-fig{
  position:absolute; top:0; right:0; bottom:0; left:52%;
  z-index:1;
}

.mpac-lp .lp-hero-fig .lp-photo{
  width:100%; height:100%; aspect-ratio:auto;
  object-fit:cover; object-position:center;
  -webkit-mask-image:linear-gradient(to right,
    rgba(0,0,0,0) 0%, rgba(0,0,0,0.12) 5%, rgba(0,0,0,0.6) 16%, rgba(0,0,0,1) 28%);
  mask-image:linear-gradient(to right,
    rgba(0,0,0,0) 0%, rgba(0,0,0,0.12) 5%, rgba(0,0,0,0.6) 16%, rgba(0,0,0,1) 28%);
}

/* .lp-hero-grid を position:static のままにして、.lp-hero-fig を .lp-hero
   （position:relative）基準で画面右端まで伸ばす。重ね順を作れないぶん、
   テキスト側をここで前面に上げる。 */
.mpac-lp .hero-mpac{ position:relative; z-index:2; }
.mpac-lp .lp-hero-title{ font-size:clamp(21px,4.2vw,34px); }

@media screen and (min-width:861px) and (max-width:1200px){
.mpac-lp .lp-hero-title{ font-size:clamp(21px,4.2vw,26px); }
}

@media screen and (max-width:860px){
.mpac-lp .lp-hero-title{ font-size:clamp(23px,4.2vw,28px); }
}

.mpac-lp .lp-hero .desc{ max-width:40em;font-size: 17px;letter-spacing: 0.04em;}

/* --------------------------------------------------------------------------
   3. 可変幅化（このページのみ）
   -------------------------------------------------------------------------- */
@media screen and (min-width:768px) and (max-width:1240px){

  /* テーマの固定幅指定を解除 */
  .page-mpac .header,
  .page-mpac .header-set,
  .page-mpac .footer,
  .page-mpac .contact-link,
  .page-mpac .main.service,
  .page-mpac .page-inr-hero{
    min-width:0;
  }

  .page-mpac .header-inr,
  .page-mpac .footer-inr,
  .page-mpac .contact-link-inr{
    box-sizing:border-box;
    width:100%;
    max-width:1200px;
    padding-left:24px;
    padding-right:24px;
  }


  .page-mpac .footer-inr-logo{ left:24px; }

  .page-mpac .footer-inr-area{ padding:45px 0 60px 150px; }

  .page-mpac .footer-inr-area-list{
    display:flex;
    flex-wrap:wrap;
    gap:0 30px;
    overflow:visible;
  }
  .page-mpac .footer-inr-area-list-item{
    float:none;
    margin-right:0;
  }

  .page-mpac .footer-inr-area-list-item.m-contact{
    position:static;
    width:100%;
    max-width:none;
    height:auto;
    margin:28px 0 0;
  }
  .page-mpac .footer-inr-area-list-item.m-contact a{
    position:relative;
    width: 450px;
    margin: 0 auto;
  }
  .footer-inr-logo_img {
    display: block;
    margin: 0 auto;
  }

  .page-mpac .footer-bottom{ padding:15px 24px 10px 200px; }
  .page-mpac .pagetop{ right:24px; }
}


@media screen and (min-width:768px) and (max-width:1067px){
  .page-mpac .footer-inr-area{ padding:45px 0 40px; }
  .page-mpac .footer-inr-logo{
    position:static;
    margin:0 0 20px;
  }
  .page-mpac .footer-bottom{ padding:15px 0 10px; }
}


@media screen and (min-width:768px) and (max-width:1100px){
  .page-mpac .header-inr-menu_list{
    font-size:14px;
    font-size:1.4rem;
  }
  .page-mpac .header-inr-menu_list:after{
    padding:0 16px;
  }
}

@media screen and (min-width:768px) and (max-width:900px){
  .page-mpac .header-inr-menu_list{
    font-size:13px;
    font-size:1.3rem;
  }
  .page-mpac .header-inr-menu_list:after{
    padding:0 7px;
  }
  .page-mpac .header-inr-menu_list.m-contact{
    margin:0 -10px 0 -6px;
    padding-right:10px;
  }
  .page-mpac .header-inr-menu_list.m-contact a{
    font-size:13px;
    font-size:1.3rem;
    width:auto;
    padding:0 26px 0 10px;
  }
}

@media(max-width:860px){
  .mpac-lp .lp-hero{ display:block; min-height:0; }
  .mpac-lp .lp-hero-fig{ position:static; }
  .mpac-lp .lp-hero-fig .lp-photo{ aspect-ratio:4/3; height:auto; }
  .mpac-lp .lp-hero-fig .lp-photo{ -webkit-mask-image:none; mask-image:none; }
  .mpac-lp .lp-hero-grid{ grid-template-columns:1fr; gap:36px; padding: 0 0; }
  .mpac-lp .lp-hero-grid > div:first-child{ max-width:none; }

  /* テキスト側：グリッドの左右paddingが0になるぶんをここで確保 */
  .mpac-lp .hero-mpac{ width:100%; padding:40px 40px;padding-bottom:10px;}
  .mpac-lp .hero-mpac p.desc{ max-width:100%; }

  @media(max-width:480px){
      .mpac-lp .hero-mpac p.desc{
        padding: 0 20px;
      }
  }

  /* ボタン：2つ並列のまま中央寄せ。入りきらない幅では折り返す（旧 nowrap だと
     ヒーローの overflow:hidden で2つ目が見切れるため wrap にしている） */
  .mpac-lp .hero-mpac .lp-hero-cta{
    margin:0 auto;
    justify-content:center;
    flex-wrap:wrap;
    max-width: 500px;
  }
  @media(max-width:767px){
    .mpac-lp .hero-mpac {
        padding: 32px 20px 10px 20px;
    }
  }
  .mpac-lp .hero-mpac .lp-hero-cta .btn{
    flex:0 1 auto;
    min-width:0;
    padding-left:18px;
    padding-right:18px;
    text-align:center;
    white-space:nowrap;
  }
}

@media(max-width:480px){
  .mpac-lp .hero-mpac{ padding:32px 0;padding-bottom:20px;}
  .mpac-lp .hero-mpac .lp-hero-cta{ gap: 0px; max-width: 386px; }
  .mpac-lp .hero-mpac .lp-hero-cta .btn{
    font-size: 13.5px;
    padding: 16px 12px;
    text-align: center;
    margin: 0 auto 20px auto;
    display: block;
    width: fit-content;
    letter-spacing: 0.03em;
    max-width: 100%;
    white-space: normal;
  }
}

.mpac-lp .arch-fig{ margin:0; }
.mpac-lp .arch-fig img{ width:100%; height:auto; display:block; border-radius:2px; }

/* --------------------------------------------------------------------------
   4. スクロール・ヘッダー
   -------------------------------------------------------------------------- */
.page-mpac .header{
  transition: transform .3s ease;
  will-change: transform;
}
.page-mpac.is-header-hidden .header{
  transform: translateY(-100%);
}
@media (prefers-reduced-motion: reduce){
  .page-mpac .header{ transition: none; }
}

/* --------------------------------------------------------------------------
   5. 見出し横のお問合せボタン（.service-head / .service-cta）
   ※ 旧 index.php 内 <style> から移設。読み込み順を保つため末尾に配置
   -------------------------------------------------------------------------- */
.mpac-lp .service-head{display:grid;grid-template-columns:1fr auto;grid-template-areas:"title cta" "lead lead";align-items:start;}
.mpac-lp .service-head h2{grid-area:title;}
.mpac-lp .service-head .lead{grid-area:lead;}
.mpac-lp .service-head .service-cta{grid-area:cta;margin:30px clamp(0px,8vw,160px) 0 40px;}
@media screen and (max-width:900px){
  .mpac-lp .service-head .service-cta{grid-area:cta;margin: 0 auto;}
}
.service-cta.process-cta { margin: 0 auto !important; }
.flow-cta {margin-top: 5px !important;}
.service-cta.btob-cta { margin: 0 auto !important; }
.service-cta.btob-cta.js-fade.is-inview { margin: 0 auto !important; text-align: center; display: block; }
.mpac-lp section#service { padding: 50px 0 10px 0; }
@media screen and (max-width:767px){
  .mpac-lp .service-head{grid-template-columns:1fr;grid-template-areas:"title" "lead" "cta";}
  .mpac-lp .service-head .service-cta{margin:4px 0 40px;}
  .mpac-lp .service-head .service-cta .btn{padding:16px 36px;text-align: center; margin: 0 auto; display: block; width: fit-content;}
  .mpac-lp .service-head + .steps{margin-top:0;}
  .service-cta.process-cta {margin: 0 auto 40px auto !important; display: block; text-align: center;}
  .flow-cta {margin-top: -2px !important;}
  .service-cta.btob-cta {margin: 0 auto !important; display: block; text-align: center;}
}

.mpac-lp .br-400{ display:none; }

@media screen and (max-width:480px){
  .mpac-lp .br-400{ display:inline; }
}


/* ==========================================================================
   MPX 統合パーツ（v7 から部分移植 / 2026-09-30）
   --------------------------------------------------------------------------
   対象：ヒーロー（.mpx-hero）／特長リスト（.mpx-feat__list）／製品名（.mpx-prod__name）
         導入の流れ（.mpx-flow）／よくあるご質問（.mpx-faq）
   ・既存の .mpac-lp p / h2 / h3 / section / details などの指定に負けないよう、
     すべて .mpac-lp を前置して詳細度を上げています。
   ・トークンは .mpx を付けた要素の中だけで有効（既存の --ink / --gold 等は変更しない）。
   ========================================================================== */

/* --- トークン（.mpx を付けた要素の中だけで有効） --- */
.mpac-lp .mpx{
  --night:#0B1321;
  --ivory:#fff;
  --paper:#F8F5EF;
  --paper-2:#F0EBE2;
  --ink:#161E2C;
  --ink-2:#4B5465;
  --brand:#1F3F6B;
  --gold:#C8A86C;
  --gold-lt:#DCC49A;
  --gold-dk:#7E6130;
  --line:rgba(22,30,44,.12);
  --line-2:rgba(22,30,44,.22);
  --line-dk:rgba(244,239,230,.14);
  --line-dk-2:rgba(244,239,230,.28);
  --mute-dk:#fff;
  --f-min:"Shippori Mincho","Noto Serif JP","Noto Serif CJK JP","Yu Mincho","YuMincho","Hiragino Mincho ProN",serif;
  --f-lat:"Cormorant Garamond","Cormorant","Times New Roman",serif;
  --f-sans:"Noto Sans JP","Hiragino Kaku Gothic ProN","Hiragino Sans","Yu Gothic",Meiryo,sans-serif;
  --ease:cubic-bezier(.16,1,.3,1);
  --ease-io:cubic-bezier(.65,0,.35,1);
  --wrap:1120px;             /* 既存 .lp-wrap と左右をそろえる */
  --gut:40px;
  --sec:clamp(30px,10vw,50px);
  --hdr:80px;
  font-family:var(--f-sans);
  line-height:1.95;
  letter-spacing:.04em;
  font-feature-settings:"palt";
  font-variant-numeric:lining-nums;
}
@media screen and (min-width:768px) and (max-width:1200px){ .mpac-lp .mpx{ --gut:50px; } }
@media screen and (max-width:767px){ .mpac-lp .mpx{ --hdr:43px; --gut:20px; } }

/* --- リセット（.mpac-lp p などと同じ詳細度。後勝ちで上書き） --- */
.mpac-lp :where(.mpx) p{ margin:0; }
.mpac-lp :where(.mpx) h2,.mpac-lp :where(.mpx) h3{ margin:0; font-weight:500; }
.mpac-lp :where(.mpx) ol,.mpac-lp :where(.mpx) ul{ list-style:none; margin:0; padding:0; }
.mpac-lp :where(.mpx) li{ list-style:none; }
.mpac-lp :where(.mpx) a:is(:link,:visited){ color:inherit; }
.mpac-lp :where(.mpx) p,.mpac-lp :where(.mpx) li{ text-wrap:wrap; line-break:strict; }
/* 本文テキストは横幅いっぱいに流す（iOS Safari の text-wrap:pretty は行末を短く揃えるため使用しない） */
.mpac-lp .mpx-hero__desc,
.mpac-lp .mpx-feat__txt p,
.mpac-lp .mpx-faq__more,
.mpac-lp .mpx-step p:not(.mpx-step__n),
.mpac-lp .mpx-qa__in p,
.mpac-lp .mpx-note,
.mpac-lp .mpx-cta__p{ text-wrap:wrap; }
.mpac-lp .mpx .nw{ display:inline-block; }
.mpac-lp .mpx-vh{ position:absolute!important; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; }
.mpac-lp .mpx-wrap{ width:100%; max-width:calc(var(--wrap) + var(--gut) * 2); margin:0 auto; padding:0 var(--gut); }
.mpac-lp section.mpx-sec{ position:relative; padding:var(--sec) 0; }

/* --- 見出し・ノート --- */
.mpac-lp .mpx-h2{ font-family:var(--f-min); font-weight:500; font-size:clamp(24px,3.4vw,38px); line-height:1.5; letter-spacing:.05em; color:var(--ink); }
.mpac-lp .mpx-h2 > span{ display:inline-block; }
.mpac-lp .mpx-h2__sub{ display:inline-block; margin-left:.4em; padding:0; font-family:var(--f-min); font-size:.46em; font-weight:500; line-height:1.5; letter-spacing:.06em; color:var(--ink-2); vertical-align:.18em; }
.mpac-lp .mpx-note{ margin-top:32px; font-size:13px; line-height:1.9; color:var(--ink-2); letter-spacing:.03em; }

/* --- ボタン（マウスオン時は色の変化のみ） --- */
.mpac-lp .mpx-btn{
  position:relative; display:inline-flex; align-items:center; justify-content:center; gap:16px;
  min-height:56px; padding:0 30px; border-radius:2px; overflow:hidden;
  font-family:var(--f-sans); font-size:clamp(16px,1.5vw,18px); font-weight:500; line-height:1.4; letter-spacing:.1em;
  text-decoration:none; white-space:nowrap; cursor:pointer;
  transition:color .4s ease, background-color .4s ease, border-color .4s ease;
}
.mpac-lp .mpx .mpx-btn--gold,.mpac-lp .mpx .mpx-btn--ink{ border: solid 1px var(--brand); color: #fff; background: var(--brand); text-align:}
.mpac-lp .mpx .mpx-btn--gold:hover,.mpac-lp .mpx .mpx-btn--gold:focus-visible,
.mpac-lp .mpx .mpx-btn--ink:hover,.mpac-lp .mpx .mpx-btn--ink:focus-visible{ border: solid 1px var(--brand); color: var(--brand); background: #fff; }
.mpac-lp .mpx .mpx-btn--line{ border: 1px solid #b79335; color: var(--ivory); background: #b79335; }
.mpac-lp .mpx .mpx-btn--line:hover,.mpac-lp .mpx .mpx-btn--line:focus-visible{ background: #ffffff; border-color: #b79335; color: #0e203a; }
.mpac-lp .mpx-btn__arrow{ position:relative; display:inline-block; width:22px; height:1px; background:currentColor; flex:none; }
.mpac-lp .mpx-btn__arrow::after{ content:""; position:absolute; right:0; top:-3px; width:7px; height:7px; border-top:1px solid currentColor; border-right:1px solid currentColor; transform:rotate(45deg); }
.mpac-lp .mpx-btn__down{ position:relative; display:inline-block; width:1px; height:16px; background:currentColor; flex:none; }
.mpac-lp .mpx-btn__down::after{ content:""; position:absolute; bottom:0; left:-3px; width:7px; height:7px; border-right:1px solid currentColor; border-bottom:1px solid currentColor; transform:rotate(45deg); }

/* ==========================================================================
   ヒーロー（旧 .lp-hero を置き換え）
   ========================================================================== */
.mpac-lp section.mpx-hero{
  position:relative; padding:0;
  min-height:520px;
  display:flex; flex-direction:column; justify-content:center;
  background:var(--night); color:var(--ivory); overflow:hidden; isolation:isolate;
}
.mpac-lp .mpx-hero::after{
  content:""; position:absolute; inset:0; z-index:1; pointer-events:none; opacity:.09; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.mpac-lp .mpx-hero__media{ position:absolute; top:0; right:0; bottom:0; width:60%; z-index:0; overflow:hidden; }
.mpac-lp .mpx-hero__media-inner{ position:absolute; inset:-15% 0; will-change:transform; }   /* 視差の移動量ぶんの余白 */
.mpac-lp .mpx-hero__media picture{ display:block; width:100%; height:100%; }
.mpac-lp img.mpx-hero__img{ width:100%; height:100%; max-width:none; object-fit:cover; object-position:26% 50%; transform-origin:60% 50%; animation:mpxHeroImg 2.8s var(--ease) both; }
@keyframes mpxHeroImg{ from{ transform:scale(1.14); filter:brightness(.4) saturate(.7);} to{ transform:scale(1); filter:none; } }
.mpac-lp .mpx-hero__shade{
  position:absolute; inset:0; pointer-events:none;
  background:
    linear-gradient(90deg, var(--night) 0%, rgba(11,19,33,.92) 12%, rgba(11,19,33,.35) 28%, rgba(11,19,33,0) 50%),
    linear-gradient(0deg, rgba(11,19,33,.75) 0%, rgba(11,19,33,0) 32%),
    radial-gradient(120% 90% at 70% 45%, rgba(0,0,0,0) 55%, rgba(11,19,33,.45) 100%);
}
.mpac-lp .mpx-hero__body{ position:relative; z-index:2; width:100%; max-width:calc(var(--wrap) + var(--gut) * 2); margin:0 auto; padding:clamp(88px,6vw,140px) var(--gut); }
.mpac-lp .mpx-hero__body > *{ max-width:600px; }
.mpac-lp .mpx-hero__body > .mpx-hero__title{ max-width:860px; }
p.mpx-hero__desc.mpx-intro { max-width: 550px; }
@media screen and (max-width: 1140px) {
  p.mpx-hero__desc.mpx-intro { max-width: 530px; }
}
@media screen and (max-width: 1100px) {
  p.mpx-hero__desc.mpx-intro { max-width: 510px; }
}
@media screen and (max-width: 1080px) {
  p.mpx-hero__desc.mpx-intro { max-width: 500px; }
}
@media screen and (max-width: 1050px) {
  p.mpx-hero__desc.mpx-intro { max-width: 450px; }
}
@media screen and (max-width: 990px) {
  p.mpx-hero__desc.mpx-intro { max-width: 440px; }
}
@media screen and (max-width: 960px) {
  p.mpx-hero__desc.mpx-intro { max-width: 430px; }
}
@media screen and (max-width: 940px) {
  p.mpx-hero__desc.mpx-intro { max-width: 410px; }
}
@media screen and (max-width: 900px) {
  p.mpx-hero__desc.mpx-intro { max-width: 380px; }
}
@media screen and (max-width: 860px) {
  p.mpx-hero__desc.mpx-intro { max-width: 100%; }
}
.mpac-lp .mpx-hero__title{ display:block; margin:0; }
.mpac-lp .mpx-hero__catch{
  display:block; font-family:var(--f-min); font-weight:500;
  font-size:clamp(24px,3.4vw,38px); line-height:1.6; letter-spacing:.06em; color:var(--ivory);
  text-shadow:0 2px 40px rgba(0,0,0,.35);
}
.mpac-lp .mpx-hero__desc{ margin-top:clamp(24px,3.2vh,36px); font-size:clamp(16px,1.5vw,18px); line-height:1.8; letter-spacing:.04em; color:var(--mute-dk); max-width:34em; }
.mpac-lp .mpx-hero__cta{ display:flex; flex-wrap:wrap; gap:14px; margin-top:clamp(32px,4.4vh,48px); }
@media screen and (max-width:860px){
  .mpac-lp section.mpx-hero{ min-height:0; display:block; }
  .mpac-lp .mpx-hero__media{ position:relative; width:100%; height:min(62svh,560px); min-height:340px; }
  .mpac-lp .mpx-hero__media-inner{ inset:-12% 0; }
  .mpac-lp img.mpx-hero__img{ object-position:48% 50%; }
  .mpac-lp .mpx-hero__shade{
    background:
      linear-gradient(0deg, var(--night) 0%, rgba(11,19,33,.7) 18%, rgba(11,19,33,0) 48%),
      linear-gradient(180deg, rgba(11,19,33,.55) 0%, rgba(11,19,33,0) 22%);
  }
  .mpac-lp .mpx-hero__body{ margin-top:-96px; padding-top:0; padding-bottom:56px; }
  .mpac-lp .mpx-hero__body > *{ max-width:none; }
  .mpac-lp .mpx-hero__cta{ justify-content:center; }
}
/* 500px 以下：説明文を横幅いっぱいに */
@media screen and (max-width:500px){
  .mpac-lp .mpx-hero__desc{ width:100%; max-width:100%; }
}
@media screen and (max-width:480px){
  .mpac-lp .mpx-hero__catch{ letter-spacing:.02em; }
  .mpac-lp .mpx-hero__cta{ flex-direction:column; }
  .mpac-lp .mpx-hero__cta .mpx-btn{ width:100%; justify-content:space-between; }
}

/* ==========================================================================
   特長リスト（旧 .values を置き換え）
   ========================================================================== */
.mpac-lp .mpx-feat__list{ margin-top:8px; border-top:1px solid var(--line-2); }
.mpac-lp .mpx-feat__item{
  position:relative; display:grid; grid-template-columns:60px 1fr; gap:0 clamp(16px,2vw,28px); align-items:start;
  margin:0; padding:clamp(28px,3vw,40px) 0; border-bottom:1px solid var(--line-2);
}
.mpac-lp .mpx-feat__ico{ width:48px; height:48px; fill:none; stroke:var(--brand); stroke-width:1.3; stroke-linecap:round; stroke-linejoin:round; margin-top:-8px; transition:transform .8s var(--ease); }
.mpac-lp .mpx-feat__item:hover .mpx-feat__ico{ transform:translateY(-3px); }
.mpac-lp .mpx-feat__t{ font-family:var(--f-min); font-size:clamp(19px,1.7vw,24px); line-height:1.5; letter-spacing:.06em; color:var(--ink); }
.mpac-lp .mpx-feat__txt p{ margin-top:12px; font-size:clamp(16px,1.5vw,18px); line-height:2.05; letter-spacing:.04em; color:var(--ink-2); }
/* 500px 以下：アイコンを見出しの左に並べ、説明文は下に全幅で表示 */
@media screen and (max-width:500px){
  .mpac-lp .mpx-feat__item{ grid-template-columns:36px 1fr; gap:0 14px; align-items:center; }
  .mpac-lp .mpx-feat__txt{ display:contents; }
  .mpac-lp .mpx-feat__ico{ grid-column:1; grid-row:1; width:36px; height:36px; margin:0; }
  .mpac-lp .mpx-feat__t{ grid-column:2; grid-row:1; }
  .mpac-lp .mpx-feat__txt p{ grid-column:1 / -1; grid-row:2; }
}

/* ==========================================================================
   製品名（S-Pitt ロゴ ＋ 機種名）
   ========================================================================== */
.mpac-lp .device-body h3.mpx-prod__name{
  display:flex; align-items:flex-end; flex-wrap:wrap; gap:0 .22em; margin:0 0 14px;
  font-family:var(--f-lat); font-weight:400; font-size:clamp(40px,4.4vw,60px); line-height:1; letter-spacing:.005em; color:var(--brand);
}
.mpac-lp .mpx-prod__name .mpx-prod__logo{ display:block; width:auto; max-width:none; height: .74em; margin-bottom: .08em; }
.mpac-lp .mpx-prod__name span{font-size: 104%; line-height: .88; font-family: "Noto Serif CJK JP", "Yu Mincho", "YuMincho", "Hiragino Mincho ProN", serif; font-weight: 800; color: #255277;}

/* 製品の特長（箇条書き）。旧 .js-fade.is-inview li の指定より優先 */
.mpac-lp .device-body ul.mpx-tagline{ margin:0 0 22px; padding:0; list-style:none; }
.mpac-lp .device-body ul.mpx-tagline li{
  position:relative; margin:0; padding-left:1.1em; list-style:none;
  font-size:16px; font-weight:400; line-height:1.7; letter-spacing:.04em; color:var(--ink-2);
}
.mpac-lp .device-body ul.mpx-tagline li + li{ margin-top:6px; }
.mpac-lp .device-body ul.mpx-tagline li::before{ content:""; position:absolute; left:.2em; top:.72em; width:5px; height:5px; border-radius:50%; background:var(--gold); }
.mpac-lp .device-body ul.mpx-tagline li:first-child{ color:var(--ink); }

/* ==========================================================================
   導入までの流れ（旧 .sec-mist の流れ部分を置き換え）
   ========================================================================== */
.mpac-lp section.mpx-flow{ background:var(--paper-2); }
.mpac-lp .mpx-flow__head{ display:flex; justify-content:space-between; align-items:flex-end; gap:32px; flex-wrap:wrap; }
.mpac-lp .mpx-steps{ position:relative; display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(24px,4vw,64px); margin-top:clamp(30px,5vw,40px); }
.mpac-lp .mpx-steps::before,.mpac-lp .mpx-steps::after{ content:""; position:absolute; left:0; right:0; top:7px; height:1px; background:var(--line-2); }
.mpac-lp .mpx-steps::after{ background:var(--gold-dk); transform:scaleX(0); transform-origin:left; transition:transform 1.8s var(--ease) .2s; }
.mpac-lp .mpx-steps.is-in::after{ transform:none; }
.mpac-lp .mpx-step{ position:relative; padding-top:44px; }
.mpac-lp .mpx-step__dot{ position:absolute; left:0; top:0; width:15px; height:15px; border-radius:50%; border:1px solid var(--gold-dk); background:var(--paper-2); z-index:1; }
.mpac-lp .mpx-step__dot::after{ content:""; position:absolute; inset:3px; border-radius:50%; background:var(--gold-dk); transform:scale(0); transition:transform .6s var(--ease) var(--dd,.6s); }
.mpac-lp .mpx-steps.is-in .mpx-step__dot::after{ transform:none; }
.mpac-lp .mpx-step:nth-child(2){ --dd:1.1s; } .mpac-lp .mpx-step:nth-child(3){ --dd:1.6s; }
.mpac-lp .mpx-step__n{ display:flex; align-items:baseline; gap:10px; font-family:var(--f-lat); font-weight:400; font-size:28px; line-height:1; color:#b79335; }
.mpac-lp .mpx-step__n span{ font-style:italic; font-size:17px; letter-spacing:.06em; color:var(--gold-dk); }
.mpac-lp .mpx-step__t{ margin:22px 0 12px; font-family:var(--f-min); font-size:clamp(19px,1.6vw,22px); font-weight:500; letter-spacing:.06em; line-height:1.5; color:var(--ink); }
.mpac-lp .mpx-step p:not(.mpx-step__n){ font-size:clamp(16px,1.5vw,17px); line-height:1.6; letter-spacing:.04em; color:var(--ink-2); }
.mpac-lp .mpx-flow .mpx-note{ margin-top:clamp(40px,5vw,64px); padding-top:24px; border-top:1px solid var(--line); }
section#mpx-flow a.mpx-btn.mpx-btn--ink.rv.is-in { margin: 20px auto 0 auto; }
@media screen and (max-width:767px){
  .mpac-lp .mpx-steps{ grid-template-columns:1fr; gap:44px; padding-left:36px; }
  .mpac-lp .mpx-steps::before,.mpac-lp .mpx-steps::after{ left:7px; right:auto; top:8px; bottom:8px; width:1px; height:auto; }
  .mpac-lp .mpx-steps::after{ transform:scaleY(0); transform-origin:top; }
  .mpac-lp .mpx-step{ padding-top:0; }
  .mpac-lp .mpx-step__dot{ left:-36px; top:4px; }
  .mpac-lp .mpx-step__t{ margin-top:14px; }
}

/* ==========================================================================
   よくあるご質問（旧 #faq を置き換え）
   ========================================================================== */
.mpac-lp section.mpx-faq{ background:var(--paper); }
.mpac-lp .mpx-faq__grid{ display:grid; grid-template-columns:1fr; gap:0; align-items:start; }
.mpac-lp .mpx-faq__side{ position:static; width:100%; margin-bottom:clamp(24px,3vw,40px); }
.mpac-lp .mpx-faq__list{ width:100%; }
.mpac-lp .mpx-faq__more{ margin-top:28px; font-size:clamp(16px,1.5vw,18px); line-height:1.5; color:var(--ink-2); }
.mpac-lp .mpx-faq__more a{ color:var(--ink); text-decoration:none; background:linear-gradient(currentColor,currentColor) 0 100%/100% 1px no-repeat; transition:background-size .6s var(--ease); }
.mpac-lp .mpx-faq__more a:hover{ background-size:0 1px; background-position:100% 100%; }
.mpac-lp .mpx-faq__list{ border-top:1px solid var(--line-2); }
.mpac-lp details.mpx-qa{ border-bottom:1px solid var(--line-2); }
.mpac-lp .mpx-qa summary,
.mpac-lp .mpx-qa[open] summary{
  display:grid; grid-template-columns:36px 1fr 28px; align-items:center; gap:16px; padding:28px 0; cursor:pointer; list-style:none;
  font-family:var(--f-min); font-size:clamp(16px,1.4vw,19px); font-weight:500; line-height:1.65; letter-spacing:.05em; color:var(--ink);
  transition:color .4s var(--ease);
}
.mpac-lp .mpx-qa summary::after{ content:none; display:none; }   /* 旧デザインの矢印を無効化 */
.mpac-lp .mpx-qa summary::-webkit-details-marker{ display:none; }
.mpac-lp .mpx-qa summary:hover{ color:var(--brand); }
.mpac-lp .mpx-qa__q{ font-family:var(--f-lat); font-style:italic; font-size:26px; line-height:1; color:var(--gold-dk); }
.mpac-lp .mpx-qa__i{ position:relative; width:28px; height:28px; border:1px solid var(--line-2); border-radius:50%; transition:transform .6s var(--ease), background-color .4s, border-color .4s; }
.mpac-lp .mpx-qa__i::before,.mpac-lp .mpx-qa__i::after{ content:""; position:absolute; left:50%; top:50%; width:10px; height:1px; margin:-.5px 0 0 -5px; background:var(--ink); transition:transform .6s var(--ease), background-color .4s; }
.mpac-lp .mpx-qa__i::after{ transform:rotate(90deg); }
.mpac-lp .mpx-qa[open] .mpx-qa__i{ transform:rotate(180deg); }   /* 開いた時も「＋」と同じ配色（枠線のみ・線はインク色） */
.mpac-lp .mpx-qa[open] .mpx-qa__i::after{ transform:rotate(0); }
.mpac-lp .mpx-qa__a{ overflow:hidden; }
.mpac-lp .mpx-qa__in{ padding:0 44px 32px 52px; }
.mpac-lp .mpx-qa__in p{ font-size:clamp(16px,1.5vw,18px); line-height:2.05; letter-spacing:.04em; color:var(--ink-2); }
@media screen and (max-width:480px){
  .mpac-lp .mpx-qa summary,.mpac-lp .mpx-qa[open] summary{ grid-template-columns:24px 1fr 26px; gap:12px; padding:22px 0; }
  .mpac-lp .mpx-qa__q{ font-size:22px; }
  .mpac-lp .mpx-qa__i{ width:26px; height:26px; }
  .mpac-lp .mpx-qa__in{ padding:0 0 26px 36px; }
}

/* ==========================================================================
   お問い合わせ CTA（旧 #contact .cta を置き換え）
   ========================================================================== */
.mpac-lp section.mpx-cta{ position:relative; padding:70px 0; background:#1e354e; color:var(--ivory); text-align:center; overflow:hidden; isolation:isolate; }
.mpac-lp .mpx-cta::after{
  content:""; position:absolute; inset:0; z-index:1; pointer-events:none; opacity:.09; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.mpac-lp .mpx-cta__glow{
  position:absolute; inset:0; z-index:-1; pointer-events:none;
}
section#contact .mpx-btn--gold, section#contact .mpx-btn--ink { border: solid 1px #ffffff; color: #fff; background: var(--brand); text-align: center; margin: 0 auto; }
section#contact .mpx-btn--gold:hover, section#contact .mpx-btn--ink:hover { border: solid 1px #ffffff; color: #1f3f6b; background: #fff; }
.mpac-lp .mpx-cta__in{ position:relative; z-index:2; }
.mpac-lp .mpx-cta__t{ margin:0; font-family:var(--f-min); font-weight:500; font-size:clamp(24px,3.4vw,38px); line-height:1.5; letter-spacing:.06em; color:var(--ivory); }
.mpac-lp .mpx-cta__p{ margin:clamp(20px,2.4vw,28px) auto 0; max-width:none; font-size:clamp(17px,1.2vw,16px); line-height:2.05; letter-spacing:.04em; color:var(--mute-dk); }
.mpac-lp .mpx-cta__btns{ display:flex; justify-content:center; flex-wrap:wrap; gap:16px; margin-top:clamp(32px,4vw,48px); }
.mpac-lp .mpx-btn--lg{ min-height:64px; padding:0 38px; font-size:clamp(16px,1.5vw,18px); }
.mpac-lp .mpx-btn__ico{ width:17px; height:17px; fill:none; stroke:currentColor; stroke-width:1.4; stroke-linecap:round; stroke-linejoin:round; flex:none; }
@media screen and (min-width:861px){ .mpac-lp .mpx-cta__p{ white-space:nowrap; } }
/* アンカー移動先（JS で tabindex="-1" を付与）はフォーカス枠を出さない */
.mpac-lp [tabindex="-1"]:focus{ outline:none; }
@media screen and (max-width:480px){
  .mpac-lp .mpx-cta__btns .mpx-btn{ width:100%; justify-content:space-between; max-width:fit-content; }
}
/* 500px 以下：ボタンを縦並び・中央寄せにし、幅を広い方にそろえる
   （1列グリッドの列幅＝最も幅の広いボタン。各ボタンは列幅いっぱいに広げる） */
@media screen and (max-width:500px){
  .mpac-lp .mpx-cta__btns{ display:grid; grid-template-columns:max-content; justify-content:center; gap:12px; }
  .mpac-lp .mpx-cta__btns .mpx-btn{ width:100%; max-width:none; justify-content:space-between; }
}

/* ==========================================================================
   「従来の端末と、MPACの違い。」（.sec-ink）背景パーティクル
   ========================================================================== */
.mpac-lp section.sec-ink{ position:relative; isolation:isolate; }
.mpac-lp .sec-ink > .lp-wrap{ position:relative; z-index:1; }
.mpac-lp .mpx-ink-particle{ position:absolute; inset:0; z-index:0; pointer-events:none; }
.mpac-lp .mpx-ink-particle canvas{ display:block; width:100%; height:100%; }

/* ==========================================================================
   動き（JS 有効時のみ .mpac-lp に .mpx-js が付く。reduce 設定時は無効）
   ========================================================================== */
@media (prefers-reduced-motion:no-preference){
  .mpac-lp .mpx-intro{ animation:mpxRise 1.3s var(--ease) both; animation-delay:var(--d,0s); }
  @keyframes mpxRise{ from{ opacity:0; transform:translateY(24px); } to{ opacity:1; transform:none; } }

  .mpac-lp.mpx-js .mpx-char{ display:inline-block; opacity:0; transform:translateY(.55em) rotate(4deg); filter:blur(6px); }
  .mpac-lp.mpx-js .is-split-in .mpx-char{ animation:mpxChar 1.25s var(--ease) both; animation-delay:calc(var(--base,0s) + var(--i) * 42ms); }
  @keyframes mpxChar{ to{ opacity:1; transform:none; filter:blur(0); } }

  .mpac-lp.mpx-js .rv{ opacity:0; transform:translateY(28px); }
  .mpac-lp.mpx-js .rv.is-in{ animation:mpxRv 1.2s var(--ease) both; animation-delay:var(--d,0s); }
  @keyframes mpxRv{ from{ opacity:0; transform:translateY(28px); } to{ opacity:1; transform:none; } }

  .mpac-lp.mpx-js .mpx-feat__ico *{ stroke-dasharray:1; stroke-dashoffset:1; }
  .mpac-lp.mpx-js .mpx-feat__item.is-in .mpx-feat__ico *{ stroke-dashoffset:0; transition:stroke-dashoffset 1.6s var(--ease-io) .25s; }
}
@media (prefers-reduced-motion:reduce){
  .mpac-lp .mpx *,.mpac-lp .mpx *::before,.mpac-lp .mpx *::after{ animation-duration:.001s!important; animation-iteration-count:1!important; transition-duration:.001s!important; }
}

/* ページ内アンカーの移動先（JS で tabindex="-1" を付与）はフォーカス枠を出さない */
.mpac-lp [tabindex="-1"]:focus{ outline:none; }

/* 500px 以下：本文を横幅100%、見出し横のボタンを中央寄せ */
@media screen and (max-width:500px){
  .mpac-lp .mpx-hero__desc,
  .mpac-lp .mpx-feat__txt p,
  .mpac-lp .mpx-faq__more{ width:100%; max-width:none; }
  .mpac-lp .mpx-flow__head{ display:block; }
  .mpac-lp .mpx-flow__head > .mpx-btn{ display:flex; width:fit-content; margin:24px auto 0; }
}

/* ==========================================================================
   店舗運営の事業者さまへ（.partner）：内容・文字・ボタンはそのまま、
   見た目をヒーロー（.mpx-hero__body）と統一（夜の紺地・白文字・明朝見出し・フィルムグレイン）
   ========================================================================== */
.mpac-lp .partner{
  position:relative; isolation:isolate; overflow:hidden;
  background:#f0e8d9; border-top:0; border-bottom:0; padding:clamp(18px,2vw,88px) 0; color:#000;
}
.mpac-lp .partner::before{   /* ヒーロー写真の影と同じ方向の、ほのかな光 */
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:
    radial-gradient(60% 90% at 100% 50%, rgba(200,168,108,.14), rgba(200,168,108,0) 70%),
    linear-gradient(0deg, rgba(31,63,107,.35), rgba(31,63,107,0) 60%);
}
.mpac-lp .partner::after{
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none; opacity:.09; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.mpac-lp .partner .partner-in{ position:relative; z-index:1; }
.mpac-lp .partner h3{
  margin:0 0 20px; font-family:"Shippori Mincho","Noto Serif JP","Noto Serif CJK JP","Yu Mincho","YuMincho","Hiragino Mincho ProN",serif;
  font-weight:500; font-size:clamp(24px,3.4vw,38px); line-height:1.6; letter-spacing:.05em; color:#000;
  text-shadow:0 2px 40px rgba(0,0,0,.35);
}
.mpac-lp .partner p,
.mpac-lp .partner li{ font-size:clamp(17px,1.1vw,16px); line-height:1.5; letter-spacing:.04em; color:#000; }
.mpac-lp .partner ul{ margin:8px 0 12px; }
.mpac-lp .partner li{ margin:4px 0 4px 1.2em; list-style:disc; }
.mpac-lp .partner li::marker{ color:#C8A86C; }
.mpac-lp .partner strong{ color:#000; font-weight:500; }
@media screen and (max-width:480px){
  .mpac-lp .partner h3{ font-size:clamp(19px,5.4vw,24px); letter-spacing:.02em; }   /* 「〜の」で1行に収める */
}

/* --- .partner：左に見出し・文字・ボタン、右にアイキャッチ画像（ヒーローと同じ構成） --- */
.mpac-lp .partner{ min-height:520px; display:flex; align-items:center; }
.mpac-lp .partner-media{ position:absolute; top:0; right:0; bottom:0; width:51%; z-index:0; overflow:hidden; }
@media screen and (min-width:1171px) and (max-width:1200px){
.mpac-lp .partner h3 { font-size: clamp(24px, 3.4vw, 36px); }
.mpac-lp .partner-media{ width:50%;}
}
@media screen and (min-width:1121px) and (max-width:1170px){
.mpac-lp .partner h3 { font-size: clamp(24px, 3.4vw, 34px); }
.mpac-lp .partner-media{ width:52%;}
}
@media screen and (min-width:1091px) and (max-width:1120px){
.mpac-lp .partner h3 { font-size: clamp(24px, 3.4vw, 31px); }
}
@media screen and (min-width:951px) and (max-width:1120px){
.mpac-lp .partner-media{ width:53%;}
}
@media screen and (min-width:1001px) and (max-width:1090px){
.mpac-lp .partner h3 { font-size: clamp(24px, 3.4vw, 30.5px); }
}
@media screen and (min-width:961px) and (max-width:1000px){
.mpac-lp .partner h3 { font-size: clamp(24px, 3.4vw, 29px); }
}
@media screen and (min-width:921px) and (max-width:960px){
.mpac-lp .partner h3 { font-size: clamp(24px, 3.4vw, 27.4px); }
}
@media screen and (min-width:861px) and (max-width:920px){
.mpac-lp .partner h3 { font-size: clamp(24px, 3.4vw, 25.5px); }
}
@media screen and (min-width:861px) and (max-width:950px){
.mpac-lp .partner-media{ width:54%;}
}
.mpac-lp .partner-media picture{ display:block; width:100%; height:100%; }
.mpac-lp img.partner-media__img{ display:block; width:100%; height:100%; max-width:none; object-fit:cover; object-position:18% 40%;margin-left: 1px; }  
.mpac-lp .partner-media__shade{
  position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(90deg, #f0e8d9 0%, rgb(240 232 217 / 95%) 12%, rgb(11 19 33 / 0%) 28%, rgba(11, 19, 33, 0) 50%), linear-gradient(0deg, rgb(11 19 33 / 0%) 0%, rgba(11, 19, 33, 0) 32%), radial-gradient(120% 90% at 70% 45%, rgba(0, 0, 0, 0) 55%, rgb(11 19 33 / 0%) 100%);
}
.mpac-lp .partner .partner-in{ z-index:2; width:100%; display:flex; flex-direction:column; align-items:flex-start; justify-content:center; gap:32px; }
.mpac-lp .partner .partner-in > div:first-child{ max-width:560px; }
@media screen and (max-width:1200px){
  .mpac-lp .partner .partner-in > div:first-child{ max-width:530px; }
}
@media screen and (max-width:1120px){
  .mpac-lp .partner .partner-in > div:first-child{ max-width:470px; }
}
@media screen and (max-width:1090px){
  .mpac-lp .partner .partner-in > div:first-child{ max-width:460px; }
}
@media screen and (max-width:1050px){
  .mpac-lp .partner .partner-in > div:first-child{ max-width:450px; }
}
@media screen and (max-width:990px){
  .mpac-lp .partner .partner-in > div:first-child{ max-width:430px; }
}
@media screen and (max-width:950px){
  .mpac-lp .partner .partner-in > div:first-child{ max-width:405px; }
}
@media screen and (max-width:930px){
  .mpac-lp .partner .partner-in > div:first-child{ max-width:403px; }
}
@media screen and (max-width:920px){
  .mpac-lp .partner .partner-in > div:first-child{ max-width:401px; }
}
@media screen and (max-width:910px){
  .mpac-lp .partner .partner-in > div:first-child{ max-width:375px; }
}
.mpac-lp .partner p{ max-width:34em; }
.mpac-lp .partner .service-cta.btob-cta{ margin:0 !important; text-align:left; }
@media screen and (max-width:860px){
  .mpac-lp .partner .service-cta.btob-cta{ margin:0 auto !important; text-align:cantert; }
  .mpac-lp .partner{ display:block; min-height:0; padding-top:0; }
  .mpac-lp .partner-media{ position:relative; width:100%; height:min(50svh,500px); min-height:280px; }
  .mpac-lp .partner-media__shade{
    background: linear-gradient(0deg, #f0e8d9 0%, rgb(240 232 217 / 89%) 12%, rgb(11 19 33 / 0%) 28%, rgba(11, 19, 33, 0) 50%), linear-gradient(0deg, rgb(11 19 33 / 0%) 0%, rgba(11, 19, 33, 0) 32%), radial-gradient(120% 90% at 70% 45%, rgba(0, 0, 0, 0) 55%, rgb(11 19 33 / 0%) 100%);
  }
  .mpac-lp img.partner-media__img{ object-position:70% 85%; }
  .mpac-lp .partner .partner-in{ margin-top:-22px;margin-bottom:60px;}
  .mpac-lp .partner .partner-in > div:first-child,
  .mpac-lp .partner p{ max-width:none; width:100%; }
}
@media screen and (max-width:500px){
  .mpac-lp .partner .partner-in{ align-items:stretch; }
  .mpac-lp .partner .service-cta.btob-cta{ text-align:center; }
  .mpac-lp .partner-media {height: min(50svh, 350px);}
}
/* 写真の左端に継ぎ目が出ないよう、背景の光は外す（写真側の影で紺地になじませる） */
.mpac-lp .partner::before{ content:none; }

/* 製品名（S-Pitt Air / S-Pitt Mobile）のフォント */
.mpac-lp .device-body h3.mpx-prod__name,
.mpac-lp .mpx-prod__name span{ font-family:"Source Serif 4", serif; }

/* ==========================================================================
   矢印付きの .btn（お問合せはこちら）：.mpx-btn と同じ並べ方にして、矢印を文字の天地中央にそろえる
   （inline-block のままだと矢印が文字のベースライン＝下寄りに乗るため）
   ========================================================================== */
.mpac-lp .service-cta a.btn.btn-primary:not(.btn-pdf){
  display:inline-flex; align-items:center; justify-content:center; gap:16px; line-height:1.4;
}
@media screen and (max-width:767px){
  .mpac-lp .service-head .service-cta a.btn.btn-primary:not(.btn-pdf){ display:flex; width:fit-content; margin:0 auto; }
}

/* ==========================================================================
   店舗運営の事業者さまへ（.partner）本文の書体をページ全体の本文とそろえる
   ・文字色：黒（#000）→ ほかの本文と同じグレー（#4B5465）
   ・行間：1.5 → ほかの本文と同じ 2.0
   ・太字ラベル（テーブル決済対応／柔軟なUI）：iPhone では font-weight:500 が別の太いウエイトに
     切り替わり書体が混ざって見えるため、太さは本文と同じ 400 にし、色の濃さで見出し感を出す
   ========================================================================== */
.mpac-lp .partner p,
.mpac-lp .partner li{ font-family:"Noto Sans JP","Hiragino Kaku Gothic ProN","Hiragino Sans","Yu Gothic",Meiryo,sans-serif; font-size:16px; font-weight:400; line-height:2; letter-spacing:.04em; color:#4B5465; }
.mpac-lp .partner li{ margin:2px 0 2px 1.2em; }
.mpac-lp .partner strong{ font-weight:400; color:#161E2C; }