:root{--ink:#26282d;--red:#e82e24;--rose:#bb3c36;--line:#06c755}*{box-sizing:border-box}html{background:#f4f5f7}body{margin:0;font-family:-apple-system,BlinkMacSystemFont,"Hiragino Kaku Gothic ProN","Yu Gothic","Meiryo",sans-serif;color:var(--ink);line-height:1.45}.landing-shell{background:#fff;max-width:540px;margin:0 auto;min-height:100vh;box-shadow:0 2px 28px #2221}.main-creative{width:100%;height:auto;display:block}.hero{position:relative;min-height:205px;isolation:isolate;overflow:hidden;padding:9px 22px 12px;background:linear-gradient(115deg,#f8fcff 0%,#d8ebf8 51%,#c3e2f1 100%)}.hero-sun{position:absolute;right:0;top:-45px;width:230px;height:230px;border-radius:50%;background:radial-gradient(circle,#fff8 5%,#fce6d4aa 34%,transparent 68%);z-index:-1}.skyline{position:absolute;inset:auto 0 0;height:74px;opacity:.3;z-index:-1;background:repeating-linear-gradient(90deg,transparent 0 20px,#5e889d 20px 35px,transparent 35px 45px,#7397b2 45px 52px,transparent 52px 60px);clip-path:polygon(0% 70%,5% 70%,5% 45%,11% 45%,11% 72%,18% 72%,18% 30%,25% 30%,25% 66%,32% 66%,32% 0%,37% 0%,37% 68%,50% 68%,50% 28%,56% 28%,56% 75%,61% 75%,61% 44%,70% 44%,70% 68%,77% 68%,77% 19%,83% 19%,83% 60%,90% 60%,90% 34%,98% 34%,98% 78%,100% 78%,100% 100%,0% 100%)}.hero-sash{display:inline-block;background:#1b4a84;color:white;padding:3px 13px;transform:skew(-12deg);font-weight:800;letter-spacing:.02em;font-size:13px;box-shadow:2px 3px 0 #fff8}.hero h1{font-size:clamp(27px,6.5vw,39px);letter-spacing:-.055em;line-height:1.1;font-weight:900;margin:8px 0 11px;color:#14151e;text-shadow:1px 2px 2px #fff}.hero h1::first-letter{color:#be2722}.hero-panels{display:flex;gap:7px;max-width:440px}.hero-panels span{color:#fff;text-shadow:0 1px 2px #0006;font-weight:700;line-height:1.13;font-size:15px;background:linear-gradient(120deg,#ae2821,#ff7534);padding:8px 15px 9px;transform:skew(-8deg);min-width:0;box-shadow:2px 3px 0 #fff8}.hero-panels span:nth-child(2){background:linear-gradient(110deg,#0e4b44,#1c7770)}.hero-panels strong{font-size:18px}.hero-subtitle{display:inline-block;color:#6c332f;background:#fffdeecf;border:1px solid #bca5a0;box-shadow:0 2px 3px #a7978e52;border-radius:20px;font-weight:800;padding:4px 14px;margin-top:12px;font-size:13px}.intro-box{margin:0 3px;border:6px solid #78504d;border-radius:26px;position:relative;padding:8px 19px 43px;text-align:center;min-height:440px}.intro-box h2{font-size:clamp(17px,4.3vw,22px);margin:0 0 8px;font-weight:900;color:#ec403b;line-height:1.4}.rule{height:5px;border-radius:20px;background:#111;margin:9px 12px 14px}.check-item{font-size:clamp(17px,4.6vw,23px);line-height:1.5;text-align:left;margin:13px 3px}.check-item::before{content:"✓";color:#ff3e37;font-weight:900;font-size:29px;margin-right:5px}.intro-text{font-size:clamp(16px,4.2vw,21px);line-height:1.6;margin:16px 2px;color:#734441;font-weight:650}.arrows{position:absolute;left:16%;right:16%;bottom:-24px;display:flex;justify-content:space-around}.arrows i{position:relative;width:15px;height:31px;background:#ff3434}.arrows i:after{position:absolute;content:"";left:-12px;top:25px;border-left:19px solid transparent;border-right:19px solid transparent;border-top:22px solid #ff3434}.line-area{padding:43px 19px 56px;text-align:center;background:linear-gradient(#fff,#f8faf9)}.line-pretitle{font-size:16px;color:#b03530;font-weight:850;margin:6px 0}.line-prompt{font-size:clamp(19px,4.4vw,23px);font-weight:850;margin:5px auto 19px}.line-prompt b{color:#e63329}.line-button{min-height:68px;background:linear-gradient(#0ed56b,#05ac51);color:#fff;text-decoration:none;border:1px solid #04a950;display:grid;grid-template-columns:43px minmax(0,1fr) 20px;align-items:center;column-gap:12px;padding:9px 15px;font-weight:900;font-size:clamp(17px,4.7vw,23px);border-radius:15px;box-shadow:0 5px 0 #008d41,0 8px 15px #00583234;transition:transform .12s}.line-button:active{transform:translateY(3px);box-shadow:0 2px 0 #008d41}.line-logo{width:43px;height:43px;justify-self:start;flex-shrink:0}.line-button-label{display:block;min-width:0;text-align:center;line-height:1.15;letter-spacing:.01em}.line-chevron{font-size:31px;line-height:1;justify-self:end}.line-button.line-disabled{display:flex;justify-content:center;align-items:center;background:#82938e;box-shadow:none;font-size:17px;border:0;text-align:center}.line-hint{color:#777;font-size:12px;margin:19px auto 8px}.legal-note{color:#888;font-size:11px;text-align:left;margin:24px auto 0;max-width:455px}.overlay{position:fixed;inset:0;z-index:100;background:rgba(0,0,0,.59);display:flex;align-items:center;justify-content:center;padding:14px}.overlay[hidden]{display:none}.modal{max-width:430px;width:100%;background:white;padding:22px 22px 19px;border-radius:19px;box-shadow:0 15px 55px #0003;text-align:center}.modal-head{display:flex;align-items:center;justify-content:center;gap:10px;margin-bottom:14px;color:#777;font-size:13px}.line-dot{background:#06c755;color:#fff;font-weight:950;font-size:13px;padding:8px;border-radius:10px}.modal h2{font-size:clamp(18px,4.8vw,23px);line-height:1.45;margin:0 0 11px;font-weight:800}.modal-desc{color:#555;font-size:15px;line-height:1.7;margin:0 0 19px}.choice-list{display:flex;gap:14px;justify-content:center;margin:14px 0}.choice{display:flex;align-items:center;justify-content:center;gap:6px;padding:10px 21px;min-width:116px;border:1px solid #ddd;border-radius:9px;font-size:16px;cursor:pointer}.choice:has(input:checked){border-color:#06c755;background:#f0fff7;color:#068b46}.choice input{accent-color:#06c755}.modal-submit{width:100%;border:0;background:#05c85b;color:white;font-weight:900;border-radius:9px;font-size:18px;padding:13px;cursor:pointer}.modal-foot{font-size:12px;color:#888;margin:12px 0 0}@media(min-width:600px){.landing-shell{margin:20px auto;border-radius:6px;overflow:hidden}.overlay{padding:25px}}@media(max-width:360px){.hero{padding-left:12px}.intro-box{padding-left:10px;padding-right:10px}.modal{padding:17px 14px}.choice{min-width:104px}.line-button{grid-template-columns:37px minmax(0,1fr) 18px;column-gap:10px;padding-left:12px;padding-right:12px}.line-logo{width:37px;height:37px}.line-chevron{font-size:27px}}


/* Image mode: one always-visible, animated LINE CTA. The image remains intact. */
.landing-shell.has-image {
  padding-bottom: calc(118px + env(safe-area-inset-bottom, 0px));
}
.landing-shell.has-image .line-area {
  position: fixed;
  z-index: 70;
  left: 50%;
  right: auto;
  bottom: 0;
  width: min(100%, 540px);
  transform: translateX(-50%);
  margin: 0;
  padding: 20px 17px calc(18px + env(safe-area-inset-bottom, 0px));
  background: linear-gradient(to bottom, rgba(255,255,255,0), rgba(255,255,255,.96) 22%, #fff 100%);
  pointer-events: none;
}
.landing-shell.has-image .line-button {
  pointer-events: auto;
  width: 100%;
  min-height: 64px;
  position: relative;
  overflow: hidden;
  isolation: isolate;
  grid-template-columns: 48px minmax(0,1fr) 22px;
  column-gap: 12px;
  padding: 10px 14px;
  border-radius: 16px;
  border: 1px solid #00a94c;
  background: linear-gradient(180deg,#19dc79 0%,#05bd58 100%);
  box-shadow: 0 5px 0 #049141, 0 8px 24px rgba(0,153,77,.3);
  font-size: clamp(16px,4.7vw,22px);
  letter-spacing: .01em;
  line-height: 1.23;
}
.landing-shell.has-image .line-button-label {
  padding: 0 4px;
}
.landing-shell.has-image .line-button.js-line-link {
  animation: lineCtaBreathe 2.6s ease-in-out infinite;
  will-change: transform;
}
.landing-shell.has-image .line-button.js-line-link::after {
  content: '';
  position: absolute;
  top: -45%;
  bottom: -45%;
  left: -33%;
  width: 24%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.37), transparent);
  transform: translateX(-170%) skewX(-18deg);
  animation: lineCtaGlint 3.4s ease-in-out infinite;
  pointer-events: none;
  z-index: 1;
}
.landing-shell.has-image .line-button > * {
  position: relative;
  z-index: 2;
}
.landing-shell.has-image .line-button.js-line-link:active {
  animation: none;
  transform: translateY(3px);
  box-shadow: 0 2px 0 #049141,0 4px 12px rgba(0,153,77,.25);
}
.landing-shell.has-image .line-button:focus-visible {
  outline: 3px solid #063f29;
  outline-offset: 4px;
}
.landing-shell.has-image .image-legal {
  padding: 8px 20px 0;
  margin: 0 auto;
}
@keyframes lineCtaBreathe {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.035); }
}
@keyframes lineCtaGlint {
  0%, 26% { transform: translateX(-170%) skewX(-18deg); }
  65%, 100% { transform: translateX(720%) skewX(-18deg); }
}
@media (prefers-reduced-motion: reduce) {
  .landing-shell.has-image .line-button.js-line-link,
  .landing-shell.has-image .line-button.js-line-link::after { animation: none; }
}
@media (max-width: 360px) {
  .landing-shell.has-image .line-area { padding-left: 11px; padding-right: 11px; }
  .landing-shell.has-image .line-button { grid-template-columns: 36px minmax(0,1fr) 12px; column-gap: 8px; padding-left: 11px; padding-right: 11px; font-size: 13px; }
  .landing-shell.has-image .line-logo { width: 31px; height: 31px; }
  .landing-shell.has-image .line-chevron { font-size: 22px; }
}

/* Version 2: position CTA immediately below the arrows in the uploaded
   1080x2000 creative. The bottom ~24% of its width is empty artwork. */
.landing-shell.has-image { padding-bottom: 0; }
.landing-shell.has-image { min-height: auto; }
.landing-shell.has-image .line-area {
  position: relative;
  z-index: 2;
  inset: auto;
  left: auto;
  right: auto;
  bottom: auto;
  width: auto;
  transform: none;
  margin: calc(-1 * min(24vw, 130px)) 0 0;
  padding: 14px 13px 8px;
  background: transparent;
  pointer-events: auto;
}
.landing-shell.has-image .line-button {
  min-height: 62px;
  grid-template-columns: 40px minmax(0,1fr) 14px;
  column-gap: 10px;
  padding: 8px 12px;
  font-size: clamp(13px,3.9vw,18px);
}
.landing-shell.has-image .line-button-label {
  padding: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1;
}
.landing-shell.has-image .line-logo {
  width: 34px;
  height: 34px;
}
.landing-shell.has-image .line-chevron {
  font-size: 24px;
}
.landing-shell.has-image .line-button.js-line-link { animation: lineCtaBreathe 2.6s ease-in-out infinite; }
/* The legal text stays visible below the image, without separating the CTA. */
.landing-shell.has-image .image-legal { padding: 4px 20px 12px; margin: 0 auto; }

/* Modal v2 */
.overlay {
  background:
    radial-gradient(circle at 50% 18%, rgba(255,255,255,.1), transparent 34%),
    linear-gradient(180deg, rgba(8,17,20,.52), rgba(4,12,17,.76));
  -webkit-backdrop-filter: blur(10px) saturate(125%);
  backdrop-filter: blur(10px) saturate(125%);
  padding: max(14px, env(safe-area-inset-top, 0px)) 16px max(14px, env(safe-area-inset-bottom, 0px));
  overflow-y: auto;
}
.overlay:not([hidden]) { animation: overlayEnter .22s ease-out both; }
.modal {
  max-width: 420px;
  width: 100%;
  padding: 0;
  overflow: hidden;
  position: relative;
  border-radius: 28px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.97), rgba(246,250,248,.985));
  border: 1px solid rgba(255,255,255,.82);
  box-shadow:
    0 34px 100px rgba(0,14,21,.34),
    0 16px 36px rgba(6,34,25,.14),
    inset 0 1px 0 rgba(255,255,255,.85);
  text-align: left;
  animation: modalEnter .32s cubic-bezier(.2,.8,.2,1) both;
}
.modal::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(135deg, rgba(255,255,255,.55), transparent 27%),
    radial-gradient(circle at top right, rgba(255,215,110,.18), transparent 36%);
  pointer-events: none;
}
.modal::after {
  content: '';
  position: absolute;
  left: 16px;
  right: 16px;
  top: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.95), transparent);
  pointer-events: none;
}
.modal-top {
  position: relative;
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 21px 23px 17px;
  background:
    radial-gradient(circle at top right, rgba(255,220,133,.32), transparent 34%),
    linear-gradient(135deg, #16392f 0%, #0f2a25 42%, #14382c 100%);
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.modal-top::before {
  content:'';
  position:absolute;
  inset:auto -30px -44px auto;
  width:170px;
  height:170px;
  border-radius:50%;
  background: radial-gradient(circle, rgba(255,255,255,.14), transparent 63%);
  pointer-events:none;
}
.modal-top::after { content:'';position:absolute;right:-35px;top:-52px;width:150px;height:150px;border:1px solid rgba(255,222,135,.18);border-radius:50%;pointer-events:none; }
.modal-symbol {
  width:47px;
  height:47px;
  border-radius:16px;
  display:grid;
  place-items:center;
  flex:0 0 47px;
  color:#f3cf77;
  background: linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,.05));
  border: 1px solid rgba(255,223,144,.22);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.14), 0 10px 22px rgba(0,0,0,.16);
}
.modal-symbol svg { width:27px;height:27px; }
.modal-kicker { font-size:13px;font-weight:850;color:#f4f6f1;letter-spacing:.08em;text-transform:uppercase; }
.modal-gratis {
  margin-left:auto;
  flex-shrink:0;
  color:#f4de96;
  font-weight:800;
  font-size:11px;
  border:1px solid rgba(246,216,123,.3);
  background:linear-gradient(180deg, rgba(255,240,187,.12), rgba(255,226,127,.04));
  padding:6px 10px;
  border-radius:20px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08);
}
.modal-body { position: relative; padding:24px 24px 22px; }
.modal h2 { margin:0 0 10px;color:#132924;font-size:clamp(22px,5vw,26px);font-weight:900;line-height:1.42;letter-spacing:-.035em; }
.modal-desc { margin:0 0 15px;color:#677871;font-size:14px;line-height:1.72; }
.modal-trust {
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin:0 0 18px;
}
.modal-trust span {
  min-height: 28px;
  display:inline-flex;
  align-items:center;
  padding:0 11px;
  border-radius:999px;
  font-size:11px;
  font-weight:800;
  letter-spacing:.05em;
  text-transform:uppercase;
  color:#325548;
  background:linear-gradient(180deg, #f8fcf8, #eef5ef);
  border:1px solid #dde9e2;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9);
}
.choice-list { display:grid;gap:12px;margin:0 0 18px; }
.choice {
  position:relative;
  display:flex;
  align-items:center;
  justify-content:flex-start;
  gap:13px;
  width:100%;
  min-width:0;
  padding:15px 15px;
  border:1px solid #dde8e2;
  border-radius:18px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.98), rgba(247,251,248,.98));
  text-align:left;
  cursor:pointer;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.85), 0 8px 20px rgba(14,38,27,.05);
  transition:transform .16s,background .16s,border-color .16s,box-shadow .16s;
}
.choice::after {
  content:'';
  position:absolute;
  inset:1px;
  border-radius:17px;
  background:linear-gradient(135deg, rgba(255,255,255,.55), transparent 28%);
  pointer-events:none;
}
.choice:hover {
  transform: translateY(-1px);
  border-color:#8dcfad;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.92), 0 12px 28px rgba(10,45,29,.1);
}
.choice:has(.choice-input:checked) {
  border-color:#149258;
  background:linear-gradient(180deg, #f8fff9, #ecfaf1);
  box-shadow: 0 0 0 3px rgba(5,189,88,.08), 0 16px 30px rgba(5,137,78,.12);
  color:#123e2b;
}
.choice:has(.choice-input:focus-visible) { outline:3px solid #095d35;outline-offset:3px; }
.choice-input { position:absolute;width:1px;height:1px;opacity:0;pointer-events:none; }
.choice-indicator {
  height:22px;
  width:22px;
  border:2px solid #c5d2c9;
  border-radius:50%;
  flex:0 0 22px;
  position:relative;
  background:#fff;
  box-shadow: inset 0 1px 1px rgba(0,0,0,.04);
}
.choice:has(.choice-input:checked) .choice-indicator {
  border-color:#06c755;
  background:linear-gradient(180deg, #0ed86d, #06c755);
  box-shadow: 0 0 0 4px rgba(6,199,85,.12);
}
.choice:has(.choice-input:checked) .choice-indicator::after { content:'';position:absolute;width:7px;height:11px;left:5px;top:1px;border:solid white;border-width:0 2px 2px 0;transform:rotate(45deg); }
.choice-copy { display:flex;flex-direction:column;flex:1;gap:2px; }
.choice-copy strong { font-size:16px;color:#1a332b;font-weight:900; }
.choice-copy small { font-size:12px;color:#7a8983; }
.choice-arrow { color:#b7c6be;font-size:27px;line-height:1;transition:transform .16s,color .16s; }
.choice:hover .choice-arrow { transform: translateX(2px); }
.choice:has(.choice-input:checked) .choice-arrow { color:#06a753; }
.modal-submit {
  width:100%;
  min-height:56px;
  position:relative;
  overflow:hidden;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:17px;
  border:0;
  border-radius:16px;
  background:linear-gradient(180deg,#18da72 0%,#05be59 60%,#04a84e 100%);
  box-shadow: 0 6px 0 #049848, 0 16px 28px rgba(3,155,69,.28);
  color:#fff;
  font-size:17px;
  font-weight:900;
  letter-spacing:.02em;
  cursor:pointer;
  transition:opacity .15s,transform .15s,box-shadow .15s;
}
.modal-submit::before {
  content:'';
  position:absolute;
  inset:1px;
  border-radius:15px;
  background:linear-gradient(180deg, rgba(255,255,255,.28), rgba(255,255,255,0) 40%);
  pointer-events:none;
}
.modal-submit::after {
  content:'';
  position:absolute;
  top:-35%;
  bottom:-35%;
  left:-24%;
  width:20%;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.4), transparent);
  transform:translateX(-160%) skewX(-18deg);
  animation: modalButtonGlint 3.2s ease-in-out infinite;
  pointer-events:none;
}
.modal-submit span { font-size:26px;line-height:1; }
.modal-submit:disabled { background:#d4ddd6;box-shadow:none;color:#fff;cursor:not-allowed; }
.modal-submit:disabled::after { display:none; }
.modal-submit:not(:disabled):active { transform:translateY(2px);box-shadow:0 2px 0 #059744; }
.modal-submit:focus-visible { outline:3px solid #073f2a;outline-offset:3px; }
.modal-foot { margin:14px 0 0;text-align:center;color:#8c9891;font-size:11px;line-height:1.6;letter-spacing:.02em; }
@keyframes overlayEnter { from {opacity:0} to {opacity:1} }
@keyframes modalEnter { from {opacity:0;transform:translateY(14px) scale(.97)} to {opacity:1;transform:translateY(0) scale(1)} }
@keyframes modalButtonGlint {
  0%, 24% { transform:translateX(-160%) skewX(-18deg); }
  62%, 100% { transform:translateX(780%) skewX(-18deg); }
}
@media(max-width:360px){
  .modal-body{padding:19px 17px 17px}
  .modal-top{padding:16px 17px 14px;gap:8px}
  .modal-kicker{font-size:12px}
  .modal-gratis{font-size:10px;padding:4px 6px}
  .modal-trust{gap:6px}
  .modal-trust span{padding:0 9px;font-size:10px}
  .choice{padding:12px 12px}
  .choice-copy strong{font-size:15px}
}
@media(prefers-reduced-motion:reduce){ .overlay:not([hidden]),.modal{animation:none!important} }
@media(prefers-reduced-motion:reduce){ .modal-submit::after{animation:none!important} }

body.modal-open {overflow:hidden;}
/* Programmatically focused dialog heading should not show a browser outline. */
.modal h2:focus { outline: none; }