/* greensite-spot.css — グリーンサイト/Buildee 登録代行【単発】ページ専用
   全セレクタを .lp-spot 配下にスコープしてテーマへの影響を遮断している。
   CSS変数も :root ではなく .lp-spot に載せてあるので、テーマ側の変数と衝突しない。
   マッセのフッターは margin-top:-72px で前要素に食い込む設計のため、
   コンテナ下端に 72px の余白を確保している。 */
.lp-spot { margin-bottom: 72px; }
.lp-spot {--green: #14b39b; --green-dark: #0e8f7c; --green-pale: #e6f7f4; --hl: #a7ecdd; --ink: #21403b; --muted: #5a6a67; --line: #dde5e3; --gold-pale: #fdf6e3; --gold-line: #e8d9a0;}
.lp-spot * {box-sizing: border-box; margin: 0; padding: 0;}
.lp-spot {font-family: "Hiragino Kaku Gothic ProN", "Yu Gothic", Meiryo, sans-serif; background: #f4f8f7; color: var(--ink); line-height: 1.8; -webkit-font-smoothing: antialiased;}
.lp-spot img {max-width: 100%; height: auto; display: block;}
.lp-spot .wrap {max-width: 980px; margin: 0 auto; padding: 0 20px;}
.lp-spot .rounded {font-family: "M PLUS Rounded 1c", sans-serif;}
.lp-spot .hero {background: linear-gradient(155deg, #17bda3 0%, var(--green-dark) 100%); color: #fff; overflow: hidden;}
.lp-spot .hero .inner {max-width: 980px; margin: 0 auto; padding: 48px 20px 44px; display: grid; grid-template-columns: 1.1fr .9fr; gap: 20px; align-items: center;}
.lp-spot .hero .eyebrow {display: inline-block; background: rgba(255,255,255,.15); border: 1px solid rgba(255,255,255,.55); font-size: 13px; font-weight: 700; border-radius: 999px; padding: 5px 16px; margin-bottom: 18px;}
.lp-spot .hero h1 {font-size: 36px; font-weight: 800; line-height: 1.5; letter-spacing: .5px;}
.lp-spot .hero h1 .mark {background: #fff; color: var(--green-dark); border-radius: 10px; padding: 2px 14px; margin: 0 3px; box-shadow: 0 6px 16px rgba(0,0,0,.14); box-decoration-break: clone; -webkit-box-decoration-break: clone;}
.lp-spot .hero .lead {font-size: 14.5px; margin-top: 16px; opacity: .96;}
.lp-spot .hero .art {text-align: center;}
.lp-spot .hero .art img {margin: 0 auto; filter: drop-shadow(0 12px 20px rgba(0,0,0,.15));}
.lp-spot .price-badge {background: #fff; color: var(--green-dark); border-radius: 16px; padding: 16px 22px; margin-top: 24px; display: inline-block; box-shadow: 0 10px 26px rgba(0,0,0,.16);}
.lp-spot .price-badge .cap {font-size: 13px; font-weight: 700; color: var(--muted);}
.lp-spot .price-badge .amt {font-size: 42px; font-weight: 800; line-height: 1.05;}
.lp-spot .price-badge .amt small {font-size: 16px; font-weight: 500;}
.lp-spot .price-badge .note {font-size: 12px; color: var(--muted); margin-top: 2px;}
.lp-spot .cta-row {margin-top: 22px; display: flex; gap: 12px; flex-wrap: wrap;}
.lp-spot .btn {display: inline-block; text-decoration: none; font-weight: 700; font-size: 15px; border-radius: 999px; padding: 13px 28px; transition: transform .08s;}
.lp-spot .btn:active {transform: translateY(1px);}
.lp-spot .btn-line {background: #06c755; color: #fff; box-shadow: 0 6px 16px rgba(6,199,85,.3);}
.lp-spot .btn-ghost {background: transparent; color: #fff; border: 1.5px solid #fff;}
.lp-spot .btn-green {background: var(--green); color:#fff; box-shadow:0 6px 16px rgba(20,179,155,.3);}
.lp-spot section {padding: 52px 0;}
.lp-spot section.alt {background: #fff;}
.lp-spot .eyebrow-c {text-align:center; color: var(--green); font-weight:800; letter-spacing:3px; font-size:13px; margin-bottom:6px;}
.lp-spot h2.sec {font-size: 28px; text-align: center; margin-bottom: 8px; font-weight: 800; color: var(--ink); line-height:1.55; letter-spacing:.5px;}
.lp-spot h2.sec .mark {background: linear-gradient(transparent 58%, var(--hl) 58%); color: var(--ink); padding: 0 4px; white-space: nowrap; box-decoration-break: clone; -webkit-box-decoration-break: clone;}
.lp-spot h1 .nb, .lp-spot h2.sec .nb {display: inline-block;}
.lp-spot .sec-lead {text-align: center; color: var(--muted); font-size: 14.5px; margin-bottom: 34px;}
.lp-spot .cards {display: grid; grid-template-columns: repeat(3,1fr); gap: 16px;}
.lp-spot .cards.two {grid-template-columns: repeat(2,1fr);}
.lp-spot .mini {background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 24px 20px; text-align: center; box-shadow: 0 4px 14px rgba(20,60,55,.05);}
.lp-spot section.alt .mini {background: #f7fbfa;}
.lp-spot .mini .ic {font-size: 32px;}
.lp-spot .mini h3 {font-size: 15px; color: var(--green-dark); margin: 12px 0 6px; font-weight: 700;}
.lp-spot .mini p {font-size: 13px; color: var(--muted); line-height:1.75;}
.lp-spot .price-main {background: #fff; border: 2px solid var(--green); border-radius: 20px; padding: 32px 26px; text-align: center; box-shadow: 0 8px 24px rgba(20,179,155,.14);}
.lp-spot .price-main .tag {display: inline-block; background: var(--green); color: #fff; font-size: 14px; font-weight: 700; border-radius: 999px; padding: 5px 20px; margin-bottom: 14px;}
.lp-spot .price-main .amt {font-size: 50px; font-weight: 800; color: var(--green-dark); line-height: 1.05;}
.lp-spot .price-main .amt small {font-size: 18px; font-weight: 500;}
.lp-spot .price-main .incl {font-size: 13px; color: var(--muted); margin-top: 4px;}
.lp-spot .price-main ul {list-style: none; margin: 22px auto 0; max-width: 480px; text-align: left;}
.lp-spot .price-main ul li {position: relative; padding: 9px 0 9px 30px; font-size: 14.5px; border-bottom: 1px dashed var(--line);}
.lp-spot .price-main ul li:last-child {border-bottom: none;}
.lp-spot .price-main ul li::before {content: "✓"; position: absolute; left: 4px; color: var(--green); font-weight: 800;}
.lp-spot .addon {background: #f7fbfa; border: 1px solid var(--line); border-radius: 16px; padding: 24px; margin-top: 18px; text-align: center;}
.lp-spot .addon h3 {font-size: 16px; color: var(--green-dark); margin-bottom: 10px; font-weight: 700;}
.lp-spot .addon p.t {font-size: 14px; color: var(--ink); margin-bottom: 16px;}
.lp-spot .steps {display: grid; gap: 14px;}
.lp-spot .step {background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 18px 22px; display: flex; align-items: center; gap: 18px; box-shadow: 0 4px 14px rgba(20,60,55,.05);}
.lp-spot section.alt .step {background: #f7fbfa;}
.lp-spot .step .num {flex: 0 0 auto; width: 40px; height: 40px; border-radius: 50%; background: var(--green); color: #fff; font-weight: 800; font-size: 17px; display: flex; align-items: center; justify-content: center;}
.lp-spot .step .art {flex: 0 0 96px; width: 96px;}
.lp-spot .step .art img {width: 96px;}
.lp-spot .step .tx h3 {font-size: 16px; color: var(--green-dark); margin-bottom: 3px; font-weight: 700;}
.lp-spot .step .tx p {font-size: 13.5px; color: var(--muted);}
.lp-spot .note-box {background: var(--gold-pale); border: 1px solid var(--gold-line); border-radius: 16px; padding: 24px 26px; color: #6b5310; font-size: 14px;}
.lp-spot .note-box h3 {font-size: 16px; margin-bottom: 10px; color: #6b5310; font-weight: 700;}
.lp-spot .note-box ul {margin-left: 1.2em;}
.lp-spot .note-box li {margin: 5px 0;}
.lp-spot .note-box .em {background:#fff6da; padding:1px 5px; border-radius:4px; font-weight:700;}
.lp-spot .yari {display: grid; grid-template-columns: .8fr 1.2fr; gap: 28px; align-items: center;}
.lp-spot .yari .art img {max-width: 300px; margin: 0 auto;}
.lp-spot .cat {margin-bottom: 18px;}
.lp-spot .cat h3 {font-size: 15px; color: var(--green-dark); font-weight: 700; margin-bottom: 10px; display:flex; align-items:center; gap:8px;}
.lp-spot .cat h3 .no {background: var(--green); color:#fff; font-size:11px; border-radius:6px; padding:2px 8px; font-weight:700;}
.lp-spot .pills {display: flex; flex-wrap: wrap; gap: 8px;}
.lp-spot .pills span {background: #fff; border: 1px solid var(--line); border-radius: 999px; padding: 6px 14px; font-size: 13px; color: var(--ink);}
.lp-spot section.alt .pills span {background:#f4f8f7;}
.lp-spot .yari-cta {background: var(--green-pale); border: 1px dashed var(--green); border-radius: 16px; padding: 22px; text-align: center; margin-top: 24px;}
.lp-spot .yari-cta .big {font-size: 20px; font-weight: 800; color: var(--green-dark); margin-bottom: 6px;}
.lp-spot .yari-cta p {font-size: 14px; color: var(--muted); margin-bottom: 16px;}
.lp-spot details.faq {background:#fff; border:1px solid var(--line); border-radius:14px; margin-bottom:10px;}
.lp-spot section.alt details.faq {background:#f7fbfa;}
.lp-spot details.faq summary {list-style:none; cursor:pointer; padding:16px 46px 16px 18px; font-size:15px; font-weight:700; color:var(--ink); position:relative;}
.lp-spot details.faq summary::-webkit-details-marker {display:none;}
.lp-spot details.faq summary::before {content:"Q"; color:var(--green); font-weight:800; margin-right:10px;}
.lp-spot details.faq summary::after {content:"＋"; position:absolute; right:18px; top:50%; transform:translateY(-50%); color:var(--green); font-size:18px;}
.lp-spot details.faq[open] summary::after {content:"−";}
.lp-spot details.faq .a {padding:0 18px 16px 46px; font-size:13.5px; color:var(--muted);}
.lp-spot .cta-final {background: linear-gradient(155deg, #17bda3 0%, var(--green-dark) 100%); color:#fff; text-align:center;}
.lp-spot .cta-final h2 {color:#fff;}
.lp-spot .cta-final p {font-size:14.5px; opacity:.95; margin-bottom: 24px;}
@media (max-width:760px) {
  .lp-spot .hero .inner {grid-template-columns: 1fr; text-align:center;}
  .lp-spot .hero .eyebrow, .lp-spot .price-badge {}
  .lp-spot .hero .art {order:-1;}
  .lp-spot .hero .art img {max-width: 320px;}
  .lp-spot .cta-row {justify-content:center;}
  .lp-spot .yari {grid-template-columns: 1fr;}
  .lp-spot .yari .art {order:-1;}
}
@media (max-width:640px) {
  .lp-spot .hero h1 {font-size: 23px; line-height: 1.55;}
  .lp-spot .hero h1 .mark {padding: 1px 10px;}
  .lp-spot h2.sec {font-size: 21px; line-height: 1.5;}
  .lp-spot .cards, .lp-spot .cards.two {grid-template-columns: 1fr;}
  .lp-spot .price-main .amt {font-size: 40px;}
  .lp-spot .step {flex-wrap: wrap;}
  .lp-spot .step .art {display:none;}
}
@media (prefers-reduced-motion: no-preference) {
  .lp-spot body.motion .anim {opacity:0; transform:translateY(26px); transition:opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1); will-change:opacity,transform;}
  .lp-spot body.motion .anim.in {opacity:1; transform:none;}
  .lp-spot body.motion .hero .tx > * {opacity:0; transform:translateY(18px); animation:heroUp .8s cubic-bezier(.2,.7,.2,1) forwards;}
  .lp-spot body.motion .hero .tx > *:nth-child(1) {animation-delay:.05s;}
  .lp-spot body.motion .hero .tx > *:nth-child(2) {animation-delay:.15s;}
  .lp-spot body.motion .hero .tx > *:nth-child(3) {animation-delay:.25s;}
  .lp-spot body.motion .hero .tx > *:nth-child(4) {animation-delay:.35s;}
  .lp-spot body.motion .hero .tx > *:nth-child(5) {animation-delay:.45s;}
  .lp-spot body.motion .hero .art img {opacity:0; transform:translateY(20px) scale(.98); animation:heroUp 1s .3s cubic-bezier(.2,.7,.2,1) forwards;}
  @keyframes heroUp { to{ opacity:1; transform:none; } }
  .lp-spot .mini, .lp-spot .step, .lp-spot .price-main, .lp-spot .tier {transition:transform .28s cubic-bezier(.2,.7,.2,1), box-shadow .28s ease;}
  .lp-spot .mini:hover, .lp-spot .step:hover {transform:translateY(-5px); box-shadow:0 14px 30px rgba(20,60,55,.13);}
  .lp-spot .btn {transition:transform .12s, box-shadow .2s, filter .2s;}
  .lp-spot .btn:hover {filter:brightness(1.03); box-shadow:0 10px 22px rgba(0,0,0,.16);}
  .lp-spot .cta-final .btn-line {animation:softpulse 2.6s ease-in-out infinite;}
  @keyframes softpulse { 0%,100%{ box-shadow:0 6px 16px rgba(6,199,85,.3);} 50%{ box-shadow:0 10px 26px rgba(6,199,85,.5);} }
}