/* ============================================================
   ミガクリエイト LP（/lp/migacreate/）固有スタイル
   設計値は1920px幅のデザイン（--u = 1px）
   ============================================================ */
.lp{--yl:#ffff00;--cream:#f3e7d0}
.lp .in{width:min(1060px,calc(100% - 48px))}
.lp .y{color:var(--yl)}
.lp .w{display:inline-block}
.lp .red-sec{background:linear-gradient(180deg,#b20f22 0%,#8a0a20 100%)}

/* ---------- hero ---------- */
.lp-hero{position:relative;height:clamp(300px,25.3vw,486px);margin-top:max(60px,calc(94 * var(--u)));overflow:hidden;background:#2a1408 url(../img/lp-hero.jpg) center 40%/cover}
.lp-hero::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(120,60,0,.35),rgba(70,20,0,.45)),radial-gradient(60% 80% at 50% 50%,rgba(0,0,0,0),rgba(40,10,0,.35));mix-blend-mode:multiply}
.lp-hero::after{content:"";position:absolute;inset:0;background:rgba(190,120,40,.22);mix-blend-mode:overlay}
.lp-hero .logo{position:absolute;left:50%;top:50%;width:clamp(170px,16.6vw,320px);transform:translate(-50%,-50%);z-index:1;filter:drop-shadow(0 0 1.5px #fff) drop-shadow(0 0 1.5px #fff) drop-shadow(0 0 1px #fff) drop-shadow(0 10px 18px rgba(0,0,0,.45));animation:lpLogo 1.2s var(--ease) .2s both}
@keyframes lpLogo{from{opacity:0;transform:translate(-50%,-44%) scale(.92)}to{opacity:1;transform:translate(-50%,-50%) scale(1)}}

/* ---------- 導入（赤） ---------- */
.lp-intro{padding:calc(90 * var(--u)) 0 calc(110 * var(--u));text-align:center;overflow:hidden}
.lp-intro .ttl{font-weight:900;letter-spacing:.1em;line-height:1.3;color:#fff;text-shadow:0 3px 10px rgba(60,0,8,.4)}
.lp-intro .ttl .l{font-size:clamp(24px,2.97vw,57px)}
.lp-intro .ttl .s{font-size:clamp(18px,2.2vw,42px);margin-left:.15em}
.lp-intro .box{display:block;width:min(100%,calc(1055 * var(--u)));margin:calc(60 * var(--u)) auto 0;border-radius:clamp(12px,1.1vw,22px);box-shadow:0 18px 40px rgba(60,0,8,.45)}
.needs{list-style:none;margin:calc(120 * var(--u)) auto 0;width:min(100%,calc(1000 * var(--u)));text-align:left}
.needs li{display:grid;grid-template-columns:clamp(72px,7vw,135px) 1fr;gap:clamp(16px,2.1vw,40px);align-items:center;margin-bottom:clamp(26px,5vw,97px)}
.needs li:last-child{margin-bottom:0}
.needs .ic{width:clamp(72px,7vw,135px);aspect-ratio:1;display:flex;align-items:center;justify-content:center}
.needs .ic svg{width:74%;height:74%;fill:none;stroke:#fff;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;filter:drop-shadow(0 3px 8px rgba(60,0,8,.35))}
.needs p{font-weight:900;font-size:clamp(16px,2.14vw,41px);letter-spacing:.08em;white-space:nowrap;line-height:1.45;color:#fff;text-shadow:0 2px 8px rgba(60,0,8,.45)}
.needs li.big p{font-size:clamp(19px,2.7vw,52px)}
.needs .y{text-shadow:0 2px 8px rgba(60,0,8,.5)}

/* ---------- 帯（写真） ---------- */
.lp-band{position:relative;overflow:hidden;background:#2a1408 url(../img/lp-band.jpg) center 60%/cover;padding:calc(120 * var(--u)) 24px;text-align:center}
.lp-band::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(110,55,0,.45),rgba(60,20,0,.55));mix-blend-mode:multiply}
.lp-band .in{position:relative}
.lp-band p{font-weight:900;color:#fff;letter-spacing:.14em;line-height:1.7;font-size:clamp(17px,2.55vw,49px);text-shadow:0 3px 10px rgba(0,0,0,.55)}
.lp-band p .m{font-size:1.08em}

/* ---------- CTA ---------- */
.lp-cta{padding:calc(110 * var(--u)) 24px;text-align:center}
.btn-lp{display:inline-flex;align-items:center;justify-content:center;height:max(58px,calc(126 * var(--u)));padding:0 clamp(36px,6vw,116px);border-radius:999px;font-weight:900;letter-spacing:.18em;font-size:clamp(18px,2.65vw,51px);position:relative;transition:transform .3s var(--ease),box-shadow .3s;will-change:transform;white-space:nowrap}
.btn-lp::before{content:"";position:absolute;inset:max(5px,calc(11 * var(--u)));border-radius:999px;border:1px solid;pointer-events:none}
.btn-lp.light{background:#e6e6e6;color:var(--red-dark);box-shadow:0 14px 30px rgba(60,0,8,.4)}
.btn-lp.light::before{border-color:#c0303a}
.btn-lp.dark{background:linear-gradient(90deg,#b1101f 0%,#8d0a19 100%);color:#fff;box-shadow:0 14px 30px rgba(60,0,8,.4)}
.btn-lp.dark::before{border-color:#e8c84a}
.btn-lp:hover{transform:translateY(-3px);box-shadow:0 22px 44px rgba(60,0,8,.5)}

/* ---------- 共通：灰セクション見出し ---------- */
.lp-gray{padding:calc(130 * var(--u)) 0 calc(150 * var(--u));position:relative;overflow:hidden;text-align:center}
.lp .q{display:inline-block;position:relative;z-index:0;font-weight:900;font-size:clamp(24px,3.6vw,70px);white-space:nowrap;letter-spacing:.1em;line-height:1.2;color:var(--ink-2);text-shadow:0 3px 0 #fff,0 10px 22px rgba(0,0,0,.25)}
.lp .q::after{content:"";position:absolute;left:-6%;right:-6%;bottom:-14%;height:34%;background:radial-gradient(ellipse at center,rgba(0,0,0,.14),transparent 70%);z-index:-1}
.lp .wm{position:absolute;left:50%;top:50%;width:clamp(320px,36vw,700px);aspect-ratio:207/196;transform:translate(-50%,-50%);background:rgba(0,0,0,.07);-webkit-mask:url(../logo/symbol-white.svg) center/contain no-repeat;mask:url(../logo/symbol-white.svg) center/contain no-repeat;pointer-events:none}
.lp .punch{position:relative;margin-top:calc(120 * var(--u));font-weight:900;letter-spacing:.12em;line-height:1.35;color:var(--red-dark);paint-order:stroke fill;-webkit-text-stroke:clamp(3px,.35vw,7px) #fff;text-shadow:0 6px 14px rgba(0,0,0,.28)}
.lp .punch .a{font-size:clamp(26px,4.95vw,95px)}
.lp .punch .b{font-size:clamp(30px,5.7vw,109px)}
.lp .lead{margin:calc(80 * var(--u)) auto 0;max-width:900px;font-weight:500;font-size:clamp(14px,1.1vw,21px);letter-spacing:.06em;line-height:2.1;color:var(--ink)}
.lp .lead b{font-weight:900;color:var(--red-dark)}
.lp .note{margin-top:clamp(14px,1.5vw,28px);font-size:clamp(12px,.85vw,16px);letter-spacing:.08em;color:var(--ink-2)}
.lp .note a{white-space:nowrap}
.lp .note a{text-decoration:underline;text-underline-offset:.25em;color:var(--red-dark)}

/* ---------- パッケージ ---------- */
.pkg{list-style:none;margin:calc(90 * var(--u)) auto 0;display:grid;grid-template-columns:1fr 1fr;gap:clamp(14px,1.5vw,28px);text-align:left}
.pkg li{background:#fff;border-radius:clamp(14px,1.1vw,22px);padding:clamp(20px,1.8vw,34px) clamp(20px,2vw,38px);box-shadow:0 12px 30px rgba(60,0,8,.1);border:1px solid rgba(230,40,50,.35);position:relative;transition:transform .35s var(--ease),box-shadow .35s}
.pkg li:hover{transform:translateY(-4px);box-shadow:0 22px 44px rgba(60,0,8,.16)}
.pkg .no{font-family:var(--futura);font-weight:500;font-size:clamp(28px,2.4vw,46px);line-height:1;color:var(--red-dark);letter-spacing:.05em}
.pkg h3{margin-top:clamp(8px,.7vw,14px);font-weight:900;font-size:clamp(16px,1.2vw,23px);letter-spacing:.08em;line-height:1.4;color:var(--ink)}
.pkg ul{margin-top:clamp(10px,.9vw,18px);font-size:clamp(13px,.85vw,16px);letter-spacing:.05em;line-height:1.9;color:var(--ink-2)}
.pkg ul li{background:none;border:0;padding:0 0 0 1.2em;box-shadow:none;border-radius:0;position:relative;transform:none!important}
.pkg ul li::before{content:"";position:absolute;left:0;top:.85em;width:.7em;height:1px;background:var(--red-dark)}
.pkg-note{margin:clamp(22px,2.6vw,50px) auto 0;font-weight:700;font-size:clamp(14px,1.15vw,22px);letter-spacing:.1em;color:var(--ink)}

/* ---------- 価格（赤） ---------- */
.lp-price{padding:calc(130 * var(--u)) 0 calc(150 * var(--u));text-align:center;overflow:hidden}
.lp-price .q{color:#fff;text-shadow:0 3px 0 rgba(0,0,0,.25),0 10px 22px rgba(0,0,0,.3)}
.lp-price .q::after{background:radial-gradient(ellipse at center,rgba(0,0,0,.3),transparent 70%)}
.price{margin-top:calc(80 * var(--u))}
.price .lb{font-weight:700;font-size:clamp(14px,1.3vw,25px);letter-spacing:.3em;color:rgba(255,255,255,.85)}
.price .num{margin-top:clamp(6px,.6vw,12px);font-weight:900;color:var(--yl);font-size:clamp(40px,6.3vw,120px);letter-spacing:.04em;line-height:1.1;text-shadow:0 6px 16px rgba(60,0,8,.5)}
.price .num small{font-size:.42em;letter-spacing:.1em;margin-left:.1em}
.price .tax{font-size:clamp(13px,.95vw,18px);letter-spacing:.2em;color:rgba(255,255,255,.8);margin-top:.4em}
.cmp{margin:calc(120 * var(--u)) auto 0}
.cmp .q2{font-weight:900;font-size:clamp(20px,2.3vw,44px);letter-spacing:.12em;color:#fff;text-shadow:0 3px 10px rgba(60,0,8,.4)}
.cmp .ans{margin-top:clamp(18px,2vw,38px);font-weight:900;font-size:clamp(16px,1.75vw,33px);letter-spacing:.08em;line-height:1.7;color:#fff}
.cmp .ans .y{font-size:1.15em}
.ex{margin:calc(110 * var(--u)) auto 0;max-width:900px;text-align:left}
.ex .h{font-weight:900;font-size:clamp(17px,1.5vw,28px);letter-spacing:.2em;color:#fff;text-align:center}
.ex .pre{margin-top:clamp(10px,.9vw,16px);text-align:center;font-size:clamp(12px,.85vw,16px);letter-spacing:.06em;color:rgba(255,255,255,.75)}
.ex dl{margin-top:clamp(22px,2.4vw,46px);border-top:1px solid rgba(255,255,255,.35)}
.ex .row{display:grid;grid-template-columns:1fr auto;gap:clamp(10px,1.5vw,28px);padding:clamp(16px,1.6vw,30px) 0;border-bottom:1px solid rgba(255,255,255,.35);align-items:start}
.ex dt{font-weight:900;font-size:clamp(15px,1.25vw,24px);letter-spacing:.08em;color:#fff}
.ex dt ul{margin-top:clamp(6px,.6vw,12px);font-weight:400;font-size:clamp(12px,.85vw,16px);letter-spacing:.04em;line-height:1.9;color:rgba(255,255,255,.85)}
.ex dt ul li{padding-left:1.1em;position:relative}
.ex dt ul li::before{content:"";position:absolute;left:0;top:.85em;width:.6em;height:1px;background:rgba(255,255,255,.7)}
.ex dd{font-family:var(--futura);font-weight:500;font-size:clamp(15px,1.4vw,27px);letter-spacing:.04em;color:var(--yl);white-space:nowrap;padding-top:.1em}

/* ---------- 流れ（灰） ---------- */
.flow{list-style:none;margin:calc(90 * var(--u)) auto 0;display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(12px,1.4vw,26px);text-align:left;position:relative}
.flow li{background:#fff;border-radius:clamp(14px,1.1vw,22px);padding:clamp(18px,1.7vw,32px) clamp(16px,1.6vw,30px);box-shadow:0 12px 30px rgba(60,0,8,.1);border:1px solid rgba(230,40,50,.35);position:relative}
.flow li::after{content:"";position:absolute;right:calc(-1 * clamp(10px,1.1vw,20px));top:50%;width:0;height:0;border-top:clamp(7px,.6vw,11px) solid transparent;border-bottom:clamp(7px,.6vw,11px) solid transparent;border-left:clamp(8px,.75vw,14px) solid var(--red-dark);transform:translateY(-50%)}
.flow li:last-child::after{display:none}
.flow .no{font-family:var(--futura);font-weight:500;font-size:clamp(22px,1.8vw,34px);color:var(--red-dark);letter-spacing:.05em;line-height:1}
.flow h3{margin-top:clamp(6px,.6vw,12px);font-weight:900;font-size:clamp(15px,1.15vw,22px);letter-spacing:.08em;color:var(--ink);line-height:1.4}
.flow p{margin-top:clamp(6px,.6vw,12px);font-size:clamp(12px,.85vw,16px);letter-spacing:.04em;line-height:1.85;color:var(--ink-2)}
.flow-note{margin:clamp(26px,3vw,56px) auto 0;font-weight:900;font-size:clamp(16px,1.4vw,27px);letter-spacing:.12em;color:var(--red-dark)}

/* ---------- キャンペーン（赤） ---------- */
.lp-camp{padding:calc(120 * var(--u)) 0 calc(130 * var(--u));text-align:center;overflow:hidden}
.camp{display:inline-block;position:relative;padding:clamp(22px,2.6vw,50px) clamp(26px,4vw,76px);border:2px solid var(--yl);border-radius:clamp(14px,1.2vw,24px);background:rgba(0,0,0,.12)}
.camp .lb{font-weight:900;font-size:clamp(15px,1.4vw,27px);letter-spacing:.24em;color:#fff}
.camp .big{margin-top:clamp(8px,.8vw,16px);font-weight:900;font-size:clamp(26px,3.6vw,70px);letter-spacing:.08em;line-height:1.2;color:var(--yl);text-shadow:0 6px 14px rgba(60,0,8,.5);padding-left:0}
.camp .big small{font-size:.5em;letter-spacing:.14em;color:#fff;margin-left:.2em}
.camp .sub{margin-top:clamp(8px,.8vw,16px);font-size:clamp(12px,.95vw,18px);letter-spacing:.14em;color:rgba(255,255,255,.85)}
.lp-camp .btn-lp{margin-top:calc(80 * var(--u))}

/* ---------- お問合せ ---------- */
.lp-contact{padding:calc(130 * var(--u)) 0 calc(150 * var(--u));text-align:center}
.lp-contact .h2{color:var(--ink-2)}
.lp-contact .form{margin-top:calc(80 * var(--u));max-width:726px}
.lp-contact .fld{margin-bottom:clamp(10px,1.1vw,21px);border-left-width:max(7px,calc(10 * var(--u)));border-right-width:max(7px,calc(10 * var(--u)))}
.lp-contact .fld input{height:max(46px,calc(48 * var(--u)));font-size:clamp(14px,.8vw,15px);padding:0 clamp(12px,1.2vw,22px)}
.lp-contact .fld textarea{height:max(200px,calc(300 * var(--u)));font-size:clamp(14px,.8vw,15px);padding:clamp(10px,.9vw,16px) clamp(12px,1.2vw,22px)}
.lp-contact .submit{margin-top:clamp(22px,3.2vw,62px)}
.lp-contact .btn-red{height:max(50px,calc(62 * var(--u)));font-size:clamp(15px,1.4vw,27px);padding:0 clamp(26px,3.5vw,66px)}
.lp-contact .lead2{margin-top:clamp(14px,1.4vw,26px);font-size:clamp(13px,1vw,19px);letter-spacing:.1em;color:var(--ink-2)}

/* ---------- パララックス（対応ブラウザ） ---------- */
@supports (animation-timeline: view()){
  .lp-hero{background-attachment:scroll}
  .lp .wm{animation:wmPar linear both;animation-timeline:view();animation-range:entry 0% exit 100%}
  @keyframes wmPar{from{transform:translate(-50%,-40%) rotate(-6deg)}to{transform:translate(-50%,-60%) rotate(6deg)}}
}

/* ---------- レスポンシブ ---------- */
@media (max-width:860px){
  .lp-hero{height:260px}
  .lp-intro{padding:50px 0 60px}
  .lp-intro .ttl .l{display:block}
  .lp-intro .ttl .s{display:block;margin:4px 0 0}
  .needs{margin-top:50px;width:100%}
  .lp-intro .box{width:100%;margin-top:28px}
  .needs li{grid-template-columns:64px 1fr;gap:16px;margin-bottom:26px}
  .needs .ic{width:64px}
  .needs p{font-size:16px;white-space:normal}
  .needs li.big p{font-size:19px}
  .lp-band{padding:60px 24px}
  .lp-band p{font-size:16px;letter-spacing:.06em}
  .lp-band p br{display:none}
  .lp-band p .w{margin:0 .15em}
  .lp-cta{padding:56px 24px}
  .lp-gray,.lp-price,.lp-camp,.lp-contact{padding:70px 0 80px}
  .lp .q{font-size:24px;white-space:normal}
  .lp .punch{margin-top:50px}
  .lp .lead{margin-top:40px;font-size:14px;letter-spacing:.06em;line-height:2}
  .lp .lead br,.cmp .ans br{display:none}
  .lp .lead .w,.cmp .ans .w{margin:0 .15em}
  .pkg{grid-template-columns:1fr;margin-top:40px}
  .price{margin-top:40px}
  .cmp{margin-top:60px}
  .ex{margin-top:60px}
  .ex .row{grid-template-columns:1fr}
  .flow{grid-template-columns:1fr;margin-top:40px;gap:22px}
  .flow li::after{right:auto;left:50%;top:auto;bottom:-20px;transform:translateX(-50%) rotate(90deg)}
  .camp{padding:22px 24px}
  .lp-camp .btn-lp{margin-top:40px}
  .lp-contact .form{margin-top:36px}
}

/* 実績 */
.lp-works{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(12px,1.4vw,24px);margin-top:clamp(28px,3vw,56px)}
.lp-works a{display:block;background:#fff;border-radius:clamp(12px,1vw,18px);overflow:hidden;box-shadow:0 12px 30px rgba(60,0,8,.12);border:1px solid rgba(230,40,50,.3);transition:transform .35s var(--ease),box-shadow .35s}
.lp-works a:hover{transform:translateY(-4px);box-shadow:0 22px 44px rgba(60,0,8,.18)}
.lp-works .im{display:flex;align-items:center;justify-content:center;aspect-ratio:1;padding:clamp(14px,1.6vw,28px)}
.lp-works .im img{max-width:100%;max-height:100%;object-fit:contain}
.lp-works .t{display:block;padding:clamp(10px,1vw,16px) clamp(12px,1.2vw,20px) clamp(14px,1.3vw,22px);font-weight:900;font-size:clamp(13px,1vw,18px);letter-spacing:.08em;color:var(--ink);text-align:left;line-height:1.4}
.lp-works .t small{display:block;font-family:var(--futura);font-weight:500;font-size:.7em;letter-spacing:.28em;color:var(--red-dark);margin-top:.3em}
@media (max-width:860px){.lp-works{grid-template-columns:1fr 1fr;gap:12px}}