@charset "utf-8";

:root{
    --abyss:#1E4F60;
    --sea:#4FB3D1;
    --sea-deep:#2E8FB0;
    --lagoon:#A6E3EC;
    --foam:#E9F8FA;
    --sand:#FDF6EA;
    --coral:#FF8DA1;
    --coral-deep:#F26B86;
    --sun:#FFC56B;
    --shell:#FFE3C2;
    --white:#FFFFFF;
    --ink-soft:#3C6877;
    --goods:url(../img/strap.png);

    --display:"Zen Maru Gothic", system-ui, sans-serif;
    --body:"M PLUS Rounded 1c", system-ui, sans-serif;
    --num:"Baloo 2", "M PLUS Rounded 1c", sans-serif;

    --maxw:1080px;
    --radius:26px;
  }

  *{box-sizing:border-box;}
  html{
    font-family: sans-serif;
    -ms-text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%;
    width:100%;
    height:100%;
    min-height: 100%;
    scroll-behavior:smooth;
  }
  body{
    width:100%;
    height: 100%;
    min-height: 100%;
    margin: 0;
    padding: 0;
    font-family:var(--body);
    color:var(--abyss);
    background:var(--foam);
    line-height:1.75;
    -webkit-font-smoothing:antialiased;
    overflow-x:hidden;
    font-size: 16px;
    font-feature-settings: 'palt';
    transform: rotate(0.03deg);  
  }
  img{max-width:100%;display:block;}
  a{color:inherit;}

  .sp {
    display: none;
    margin: 0;
    padding: 0;
}

.pc {
    display: inline;
    margin: 0;
    padding: 0;
}

  .wrap{max-width:var(--maxw);margin:0 auto;padding:0 22px;}

  /* ---------- top bar ---------- */
  .topbar{
    display:block;
    align-items:center;
    justify-content:center;
    gap:10px;
    padding:1rem;
    font-family:var(--display);
    font-weight:700;
    font-size:13px;
    letter-spacing:.04em;
    color:var(--sea-deep);
    background:var(--white);
    background:rgb(255, 255, 255,0.8);
    border-bottom:2px solid var(--lagoon);
    position:sticky;
    top:0;
    z-index:50;
    text-align:center;
  }
  .topbar .dot{
    width:8px;
    height:8px;
    border-radius:50%;
    background:var(--coral);
    flex:none;
    margin: 0 5px;
  }

  .topbar .toplogo{
    display: block;
    margin: 0 auto;
    padding: 0;
    width: 100%;
    max-width: 300px;
  }

  
  .topchara{
    margin: 0 auto;
    padding: 0;
    width: 100%;
    max-width: 200px;
    bottom: 0;
  }

  /* ---------- shared section ---------- */
  .section{position:relative;padding:88px 0;}
  .eyebrow{
    display:inline-flex;
    align-items:center;gap:8px;
    font-family:var(--display);
    font-weight:700;
    font-size:1.5rem;
    letter-spacing:.14em;
    color:var(--sea-deep);
    background:var(--white);
    border:2px solid var(--lagoon);
    margin: 0 auto;
    padding:1rem 2rem;
    border-radius:999px;
    margin-bottom:22px;
    text-align: center;
  }
  .eyebrow::before{
    content:"";
    width:10px;
    height:10px;
    border-radius:50%;
    background:var(--coral);
  }

  h3.sec-title{
    font-family:var(--display);
    font-weight:900;
    line-height:1.3;
    font-size:clamp(26px,4.4vw,40px);
    margin:0 0 1rem;
    letter-spacing:.01em;
  }
  .lead{
    font-size:clamp(15px,2vw,17px);
    color:var(--ink-soft);
    max-width:700px;
  }

  /* ---------- hero ---------- */
  .hero{
    position:relative;overflow:hidden;
    background:
      radial-gradient(120% 90% at 80% -10%, rgba(255,255,255,.9), transparent 55%),
      linear-gradient(180deg,#BFEAF1 0%, #7FCFE0 46%, #4FB3D1 100%);
    padding:54px 0 150px;
  }
  .hero .wrap{
    display:grid;grid-template-columns:1.05fr .95fr;gap:46px;align-items:center;
    position:relative;z-index:3;
  }
  .hero-copy .eyebrow{
    background:rgba(255,255,255,.85);
    border-color:#fff;
    position: relative;
  }

  .hero-copy .eyebrow.release{
    /* letter-spacing:.02em; */
    width: 100%;
    margin: 0 auto 22px;
    font-size:clamp(11px,2vw,13px);
    text-align: center;
    display: block;
  }

  .hero-copy .eyebrow .small{
    display: inline-block;
    margin: 0 0 0 -5px;
    font-size: 80%;
  }

  .hero-copy .eyebrow::before {
    position: absolute;
    content: "";
    width: 10px;
    height: 10px;
    border-radius: 50%;
    margin: 0 5px 0 0;
    top: 45%;
    left: 7%;
  }

  .trailer .small{
    display: inline-block;
    margin: 0 0 0 -10px;
    font-size: 80%;
  }

  .dnum{
    font-family:var(--num);
    font-weight:800;
    color:var(--coral-deep);
    font-size: 130%;
  }

  .hero-copy{
    margin: 0;
    padding: 1rem;
    text-align: left;
  }

  .hero-copy .main_text{
    margin: 0;
    padding: 1rem;
    text-align: center;
  }

  .hero h1{
    font-family:var(--display);
    font-weight:900;
    color:#fff;
    font-size:clamp(30px,5vw,50px);
    line-height:1.28;
    margin:6px 0 18px;
    text-shadow:0 3px 0 rgba(46,143,176,.28);
    letter-spacing:.01em;
    text-align: center;
  }
  .hero h1 .pink{color:var(--shell);}

  .hero .kicker{
    display:inline-block;
    font-family:var(--display);
    font-weight:700;
    color:var(--abyss);
    background:#fff;
    border-radius:999px;
    padding:6px 18px;
    font-size:14px;
    margin-bottom:18px;
    box-shadow:0 6px 0 rgba(46,143,176,.22);
  }

  h1 img.mainlogo{
    display: block;
    margin: 1rem auto;
    padding: 0;
    width: 100%;
    max-width: 400px;
  }

  .hero .sub{color:#fff;
    font-size:clamp(15px,2vw,17.5px);
    max-width:30em;
    margin:0 0 1rem;
    font-weight:500;
    text-align: left;
  }

  .hero .sub span.bold{
    font-weight: 800;
    color: var(--shell);
  }

  .limit{
    margin: 0 auto 1rem;
    padding: 0;
    color: var(--shell);
    font-size: 1.3rem;
    font-weight: 800;
    width: 100%;
    max-width: 450px;
  }

  ul.check{
    display: block;
    margin: 1rem auto;
    padding: 0 0 0 1em;
     color: #fff;
    list-style-type: none;
    text-align: left;
font-weight: 500;
    font-size: 80%;
  }

  ul.check li{
    margin: 0 0 0.5em;
    padding: 0;

}

  ul.check li:before{
    content: '※';
    margin: 0 0 0 -1em;
}

  ul.check.b{
    font-size: 14px;
    color: var(--ink-soft);
    font-weight: 400;
    text-align: center;
  }

   ul.check li span.color{
    color: var(--coral-deep);
    font-weight: 700;
   }

   .about  ul.check{
    text-align: center;
   }

  .hero-cta{
    width: 100%;
    display:flex;
    flex-wrap:wrap;
    gap:14px;
    align-items:center;
  }
  

  .btn{
    display:inline-block;
    align-items:center;gap:10px;
    cursor:pointer;
    font-family:var(--display);
    font-weight:900;
    font-size:14px;
    text-decoration:none;
    border:none;border-radius:999px;
    margin: 0 0 1rem;
    padding:16px 30px;
    transition:transform .15s ease, box-shadow .15s ease;
    text-align: center;
  }
  .btn-primary{
    background:var(--coral);
    color:#fff;
    box-shadow:0 7px 0 var(--coral-deep);
  }

  .btn-primary:hover{transform:translateY(2px);box-shadow:0 6px 0 var(--coral-deep);}
  .btn-primary:active{transform:translateY(3px);box-shadow:0 5px 0 var(--coral-deep);}
  .btn .arr{
    font-family:var(--num);
    font-weight:800;
    margin: 0 0 0 5px;
  
  }

  .btn-ghost{
    font-family:var(--display);
    font-weight:700;
    color:#fff;
    text-decoration:none;
    font-size:14.5px;
    border-bottom:2px solid rgba(255,255,255,.7);
    padding-bottom:2px;
  }
  .cta-group{display:flex;flex-direction:column;align-items:center;gap:14px;}
  .cta-secondary{display:inline-flex;align-items:center;gap:10px;flex-wrap:wrap;justify-content:center;}
  .cta-note{font-family:var(--display);font-weight:700;font-size:13px;color:var(--ink-soft);}
  .btn-plan{
    display:inline-flex;align-items:center;font-family:var(--display);font-weight:900;font-size:14px;
    color:var(--sea-deep);background:var(--white);border:2px solid var(--sea);border-radius:999px;
    padding:10px 22px;text-decoration:none;transition:background .15s ease;
  }
  .btn-plan:hover{background:var(--foam);}


    .step_grid{
    margin: 0 auto;
    padding: 0.5rem;
    display: grid;
    grid-template-columns: 2fr 1fr;

  }
.griditem{
  font-size: 12px;
margin: 0 1rem 0 0;
padding: 0.5rem 0;
font-weight: 600;
  border-bottom: 2px solid var(--ink-soft);
  position: relative;
  transform: rotate(0.03deg);

}

 .step_grid .griditem:last-of-type{
  margin: 0;
}
.griditem:after{
    content: '';           /* 疑似要素に必須 */
  position: absolute;    /* 相対位置に指定 */
  bottom: 0;             /* 下から0pxの位置に指定。 */
  left: 50%;             /* 左から50%の位置に指定 */
  width: 15px;           /* 四角形の横幅を指定 */
  height: 15px;          /* 四角形の高さを指定 */
  background: #E9F8FA;      /* 背景色を指定 */
  border-right: 2px solid var(--ink-soft);; /* 右側にborder */
  border-bottom:2px solid var(--ink-soft);;/* 下側にborder */
  transform: translate(-50%,59%) rotate(45deg); /* 表示位置を左方向に半分戻し、下方向に移動。かつ45度時計回りに回転 */
  transform-origin:center center; /* 回転の基準位置を中心に指定 */
  }

  .griditem.spgrid{
display: none;
  border: 2px solid var(--ink-soft);
  border-radius: 10px;
  }

      .step_grid_main{
    margin: 2rem auto ;
    padding: 0;
    display: grid;
    grid-template-columns: 2fr 1fr;
    justify-content: space-between;

  }

  .gridmain{
display: block;
margin: 0 1rem 0 0;
      padding: 16px 0;
font-weight: 600;
  position: relative;
  transform: rotate(0.03deg);
      background: var(--coral);
    color: #fff;
    box-shadow: 0 6px 0 var(--coral-deep);
    gap: 5px;
    border-radius: 18px;
    text-decoration: none;
    text-align: center;
    transition: transform .15s ease;

}

  .gridmain .flex{
    width: 100%;
    margin: 0;
    padding: 0;
      display: flex;
    align-items: center;
    justify-content: center;
  }

.grid_contents{
  width: 50%;
  margin: 0;
  padding: 0;
  display: block;
  border-right: 3px dotted #fff;
}

.gridmain .grid_contents:last-of-type{
  border-right: none;
}

.grid_contents .cta-primary{
  box-shadow: none;
}

.grid_contents .cta-card {
max-width: 100%;
}

.grid_contents .cta-card .cnum{
top: -30px;
}

.grid_contents .cta-card .cpre{
  min-height: ;
}


.buttonarea{
  margin: 0;
  padding: 16px 16px 0;
}

.buttonarea p.button{
      font-family:var(--display);
    font-weight:900;
    font-size:18px;
    line-height:1.3;
    margin: 0 auto ;
    padding: 0.5rem 1rem;
        border-radius:999px;
        color: var(--coral-deep);
    background: rgba(255, 255, 255, 1);
      border:2px solid rgba(255,255,255,.5);
    width: 100%;
}

.buttonarea p.button_b{
      font-family:var(--display);
    font-weight:900;
    font-size:18px;
    line-height:1.3;
    margin: 0 auto ;
    padding: 0.5rem 1rem;
        border-radius:999px;
        color: #fff;
    background: var(--sea-deep);
    width: 100%;
}

.gridsub{
display: block;margin: 0;
      padding: 16px;
      background: #fff;
    color: var(--sea-deep);
    border: 2px solid var(--sea-deep);
    box-shadow: 0 6px 0 rgba(46, 143, 176, .2);
    align-items: center;
    justify-content: center;
    gap: 5px;
    border-radius: 18px;
    text-decoration: none;
    text-align: center;
    transition: transform .15s ease;
}

.gridsub .grid_contents{
    width: 100%;
}

.gridsub .grid_contents .cta-lottery{
  background: none;
  border: none;
  box-shadow: none;
}

.gridsub .grid_contents .cta-lottery .cact{
  background: none;
color: var(--sea-deep);
    border: 2px solid var(--sea-deep);
}

.step_ship{
  display: block;
  margin: 0 auto 1.5rem;
  padding: 0.5rem ;
color: var(--abyss);
font-size: 1.1rem;
font-weight: 900;
  background: var(--sand);
  border: 3px solid var(--shell);
    border-radius: 999px;
}

.step_grid_main .step_ship{
  margin: 0 1rem 0 0;
}

.step_grid_main .step_ship:last-of-type{
  margin: 0 ;
}

  .cta3{
    display:flex;
    gap:14px;
    justify-content:center;
    flex-wrap:wrap;
    /* max-width:780px; */
    margin:0 auto;
    padding: 2rem 1rem 1rem;
    display: none;
  }



  
  .cta-card{
    position:relative;
    flex:1 1 210px;
    max-width:320px;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:5px;
    border-radius:18px;
    padding:28px 16px 16px;
    text-decoration:none;
    text-align:center;
    transition:transform .15s ease;
  }

  .cta-card:hover{transform:translateY(-2px);}

  .cta-card .cnum{
    position:absolute;
    top:-13px;
    left:50%;
    transform:translateX(-50%);
    width:30px;
    height:30px;
    border-radius:50%;
    background:var(--sun);
    color:var(--abyss);
    font-family:var(--num);
    font-weight:800;
    font-size:15px;
    display:flex;align-items:center;
    justify-content:center;
    box-shadow:0 3px 0 rgba(0,0,0,.08);
  }

  .cta-card .cpre{
    font-family:var(--display);
    font-weight:800;
    font-size:16px;
    opacity:.92;
    min-height: 80px;
    vertical-align: middle;
    line-height: 1.4;
    margin: 0 auto;
    padding: 0;
  }

  .cta-card .cact{
    font-family:var(--display);
    font-weight:900;
    font-size:18px;
    line-height:1.3;
    margin: 0 auto ;
    padding: 0.5rem 1rem;
        border-radius:999px;
    background: rgba(255, 255, 255, .2);
      border:2px solid rgba(255,255,255,.5);
    width: 100%;
  }

  

  .cta-card .cnote{
    font-family:var(--display);
    font-weight:700;
    font-size:13px;
    border-radius:999px;
    padding:2px 12px;
    margin-top:5px;
  }

  .cta-primary{
    background:var(--coral);
    color:#fff;
    box-shadow:0 6px 0 var(--coral-deep);
  }

  .cta-primary .cnote{
    /* background:rgba(255,255,255,.28); */
    color:#fff;
  }
  .cta-sub{
    background:#fff;
    color:var(--sea-deep);
    border:2px solid var(--sea);
    box-shadow:0 6px 0 rgba(79,179,209,.28);
  }

  .cta-sub .cnote{
    background:var(--foam);
    color:var(--sea-deep);
  }

  .cta-lottery{
    background:#fff;
    color:var(--sea-deep);
    border:2px solid var(--sea-deep);
    box-shadow:0 6px 0 rgba(46,143,176,.2);
  }

    .cta-lottery.cta-card .cact{
    background: var(--sea-deep);
    color: #fff;
    padding: 0.5rem 2rem;
  }


  .cta-lottery .cnote{
    /* background:var(--sea-deep); */
    color:var(--sea-deep);
  }

  .cta-lottery .cnum{
    background:var(--sea-deep);
    color:#fff;
  }


  .cta-routes-note{
    max-width:740px;
    margin:0.5rem auto 0;
    text-align:center;
    font-size:14px;
    color:var(--ink-soft);
    line-height:1.7;
  }

  .cta-routes-note .hl{color:var(--coral-deep);font-weight:700;}

  /* poster placeholder (dummy) */
  .poster-stage{position:relative;display:flex;justify-content:center;}
  .poster{
    position:relative;width:min(330px,82%);aspect-ratio:1/1.414;
    background:#fff;border:6px solid #fff;border-radius:16px;
    box-shadow:0 22px 44px rgba(30,79,96,.32);overflow:hidden;
    transform:rotate(-2.2deg);display:flex;flex-direction:column;
  }
  .poster .art{
    flex:1;position:relative;
    background:
      radial-gradient(60% 40% at 70% 22%, rgba(255,255,255,.55), transparent 60%),
      linear-gradient(165deg,#9BD9E6 0%, #5BBBD6 55%, #2E8FB0 100%);
    display:flex;align-items:center;justify-content:center;
  }
  .poster .art::after{
    content:"仮画像 / DUMMY";font-family:var(--display);font-weight:900;
    color:rgba(255,255,255,.85);font-size:13px;letter-spacing:.08em;
    border:2px dashed rgba(255,255,255,.8);border-radius:10px;padding:8px 14px;
  }
  .poster .title-lockup{
    background:#fff;padding:14px 10px 16px;text-align:center;
  }
  .poster .title-lockup .pre{font-family:var(--display);font-weight:700;font-size:11px;color:var(--ink-soft);letter-spacing:.1em;}
  .poster .title-lockup .main{font-family:var(--display);font-weight:900;font-size:21px;color:var(--abyss);line-height:1.25;}
  .poster .title-lockup .sub2{font-family:var(--display);font-weight:700;font-size:13px;color:var(--sea-deep);margin-top:2px;}
  .poster .title-lockup .date{font-family:var(--num);font-weight:800;font-size:15px;color:var(--coral-deep);margin-top:4px;}
  .poster-tag{
    position:absolute;top:-12px;right:2px;z-index:4;
    background:var(--sun);color:var(--abyss);font-family:var(--display);font-weight:900;
    font-size:12px;padding:6px 13px;border-radius:999px;transform:rotate(5deg);
    box-shadow:0 5px 0 rgba(0,0,0,.08);
  }
  .poster-note{position:absolute;bottom:-26px;left:0;right:0;text-align:center;font-size:11px;color:rgba(255,255,255,.92);}

  /* bubbles */
  .bubbles{position:absolute;inset:0;z-index:1;pointer-events:none;}
  .bubble{position:absolute;bottom:-40px;border-radius:50%;background:rgba(255,255,255,.4);}

  /* wave divider */
  .wave-top{position:absolute;left:0;right:0;line-height:0;}
  .wave-top svg{width:100%;height:70px;display:block;}

  /* ---------- prize section ---------- */
  .prize{background:var(--sand);text-align:center;}
  .prize-head{font-size:clamp(26px,4.8vw,46px);}
  .prize-head .ghi{color:var(--coral-deep);}
  .prize-count{
    display:inline-block;
    font-family:var(--display);
    font-weight:900;
    color:var(--abyss);
    font-size:clamp(15px,2.2vw,21px);
    background:var(--white);
    border:2px solid var(--lagoon);
    border-radius:999px;
    padding:0.5rem 2rem;
    margin:1rem auto;
    line-height: 1;
  }

  .prize-count .pnum2{font-family:var(--num);font-weight:800;color:var(--coral);margin:0 2px;}
  .prize .lead{
    margin:0 auto;
  }

  /* single goods showcase */
  .goods-single{
    margin:48px auto 0;
    max-width:380px;
    position:relative;
    background:var(--white);
    border:3px solid var(--lagoon);
    border-radius:30px;
    padding:26px;
    box-shadow:0 16px 32px rgba(30,79,96,.12);
  }
  .goods-single .ribbon{
    position:absolute;
    top:-25px;
    left:50%;
    transform:translateX(-50%);
    background:var(--coral);
    color:#fff;
    font-family:var(--display);
    font-weight:900;
    font-size:16px;
    padding:8px 25px;
    border-radius:999px;
    box-shadow:0 5px 0 var(--coral-deep);
    white-space:nowrap;
  }
  .goods-single .gimg{
    aspect-ratio:3/4;border-radius:20px;margin-bottom:16px;
    background:var(--goods) center/contain no-repeat, linear-gradient(160deg,#F3FAFB,#DFF1F4);
  }
  .goods-single .gimg span{
    font-family:var(--display);font-weight:900;color:var(--sea-deep);font-size:14px;
    border:2px dashed var(--sea-deep);border-radius:12px;padding:10px 16px;
  }
  .goods-single .gtitle{
    font-family:var(--display);
    font-weight:900;
    font-size:18px;
  }
 .goods-single .gtitle .bold{
  color: var(--coral-deep);
 }

  .goods-single .gsub{font-size:13px;color:var(--ink-soft);margin-top:4px;}

  /* ---------- steps ---------- */
  .steps{
    background:var(--foam);
    text-align:center;
  }

  .step-row{
    display:grid;grid-template-columns:repeat(3,1fr);
    gap:16px;
    margin:42px 0 40px;
  }

  .step{
    background:var(--white);
    border-radius:var(--radius);
    padding:30px 20px;
    border-bottom:5px solid var(--lagoon);
    text-align:center;position:relative;
  }
  .step .n{
    font-family:var(--num);font-weight:800;color:#fff;background:var(--sea);
    width:46px;height:46px;border-radius:50%;display:flex;align-items:center;justify-content:center;
    font-size:22px;margin:0 auto 14px;box-shadow:0 5px 0 var(--sea-deep);
  }

  .step h3{
    font-family:var(--display);
    font-weight:900;
    font-size:16.5px;
    margin:0 0 8px;
  }

  .step p{
    font-size:13.5px;
    color:var(--ink-soft);
    margin:0;
  }

  .steps .lead{
    margin: 0 auto 1.5rem;
    padding: 0;
  }

  .step.is-prize .n{
    background:var(--coral);
    box-shadow:0 5px 0 var(--coral-deep);
  }

  /* two paths (new vs existing) */
  .btn-sea{background:var(--sea);color:#fff;box-shadow:0 7px 0 var(--sea-deep);}
  .btn-sea:hover{transform:translateY(-2px);box-shadow:0 9px 0 var(--sea-deep);}
  .btn-sea:active{transform:translateY(3px);box-shadow:0 3px 0 var(--sea-deep);}
  .paths{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin:40px 0 0;text-align:left;}
  .path{
    background:var(--white);border-radius:var(--radius);padding:32px 28px;
    border-top:6px solid var(--sea);box-shadow:0 14px 28px rgba(30,79,96,.12);
    display:flex;flex-direction:column;
  }
  .path.lottery{border-top-color:var(--coral);}
  .path .ptag{
    align-self:flex-start;font-family:var(--display);font-weight:900;font-size:12.5px;
    background:var(--foam);color:var(--sea-deep);padding:6px 14px;border-radius:999px;margin-bottom:16px;
  }
  .path.lottery .ptag{background:#FFE7EC;color:var(--coral-deep);}
  .path .pamount{font-family:var(--num);font-weight:800;color:var(--sea-deep);line-height:1;margin-bottom:6px;}
  .path.lottery .pamount{color:var(--coral-deep);}
  .path .pamount .pnum{font-size:clamp(40px,8vw,58px);}
  .path .pamount .punit{font-family:var(--display);font-size:18px;color:var(--abyss);margin-left:4px;}
  .path .pwho{font-family:var(--display);font-weight:900;font-size:17px;margin:0 0 10px;}
  .path .pdesc{font-size:14px;color:var(--ink-soft);margin:0 0 16px;}
  .path .papply{
    font-family:var(--display);font-weight:700;font-size:13px;border-radius:14px;
    padding:11px 14px;margin-bottom:20px;display:flex;align-items:center;gap:8px;
  }
  .path .papply::before{content:"";width:9px;height:9px;border-radius:50%;flex:none;}
  .path .papply.ok{background:var(--foam);color:var(--sea-deep);}
  .path .papply.ok::before{background:var(--sea);}
  .path .papply.need{background:#FFE7EC;color:var(--coral-deep);}
  .path .papply.need::before{background:var(--coral);}
  .path .btn{margin-top:auto;align-self:flex-start;}

  /* ---------- trailer ---------- */
  .trailer{background:var(--white);text-align:center;}
  .video-frame{
    position:relative;max-width:760px;margin:34px auto 0;aspect-ratio:16/9;
    border-radius:22px;overflow:hidden;border:4px solid #fff;background:#0c2730;
    box-shadow:0 18px 38px rgba(30,79,96,.22);
  }
  .video-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0;}

  /* ---------- schedule ---------- */
  .schedule{
  background:var(--white);
  text-align: center;
  }


  
  .sched-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:46px;
    align-items:center;
    margin:0;
    padding: 1rem;
  text-align: left;
  }

  .timeline{list-style:none;margin:0;padding:0;position:relative;}
  .timeline::before{content:"";position:absolute;left:21px;top:8px;bottom:8px;width:3px;background:var(--lagoon);border-radius:2px;}
  .tl{position:relative;padding:0 0 26px 60px;}
  .tl:last-child{padding-bottom:0;}
  
  .tl .when{
    position:absolute;
    left:0;
    top:-2px;
    width:50px;
    height:50px;
    border-radius:50%;
    background:var(--sea);
    color:#fff;
    font-family:var(--num);
    font-weight:800;
    font-size:13px;
    display:flex;align-items:center;
    justify-content:center;text-align:center;
    line-height:1.05;
    box-shadow:0 4px 0 var(--sea-deep);
    z-index:2;
    padding: 5px 0 0;
  }

  .tl.hl .when{
    background:var(--coral);
    box-shadow:0 4px 0 var(--coral-deep);
  }

  .tl .lab{
    font-family:var(--display);
    font-weight:900;
    font-size:16px;
  }

  .tl .desc{
    display: block;
    font-size:14px;
    color:var(--ink-soft);
  }

  .sched-note{
    background:var(--sand);border-radius:var(--radius);padding:30px 28px;
    border:3px solid var(--shell);
  }
  .sched-note .tag{

    font-family:var(--display);
    font-weight:900;
    color:var(--coral-deep);
    font-size:20px;
    display:inline-flex;
    align-items:center;
    gap:8px;
    margin:0 0 1rem;
    padding: 0.5rem 2rem;
    background:var(--coral);
    box-shadow: 0 4px 0 var(--coral-deep);
    color: #fff;
    border-radius: 999px;

  
  }
  .sched-note .tag::before{
    content:"";
    width:9px;
    height:9px;
    border-radius:50%;
    background:var(--coral);
    background: #fff;
  }

  .sched-note p{
    margin:0;
    font-size:16px;
  }

  .sched-note .big{
    font-family:var(--display);
    font-weight:900;
    font-size:18px;
    display:block;
    margin-bottom:6px;
    color:var(--abyss);
  }

  /* ---------- about toho-one ---------- */
  .about{
    background:linear-gradient(180deg,#4FB3D1,#2E8FB0);color:#fff;text-align:center;
  }
  .about .eyebrow{background:rgba(255,255,255,.9);border-color:#fff;}
  .about h3.sec-title{color:#fff;}



  .about .lead{color:rgba(255,255,255,.92);margin:0 auto;}
  .value-strip{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin:34px 0 18px;}
  .vstat{
    background:#fff;border-radius:24px;padding:24px 16px;color:var(--abyss);
    box-shadow:0 14px 28px rgba(30,79,96,.2);position:relative;
  }
  .vstat .vfreq{
    display:inline-flex;
    align-items:
    center;
    font-family:var(--display);
    font-weight:900;
    font-size:16px;
    letter-spacing:.06em;background:var(--sea);
    color:#fff;
    border-radius:999px;
    padding:5px 15px;
    margin-bottom:12px;
  }
.about_text{
  margin: 0 auto;
  padding: 0;
  min-height: 110px;
}

  .vstat .vlab{
    font-family:var(--display);
    font-weight:900;
    font-size:20px;
    margin:0 auto 0.5rem;
    line-height: 1.3;
  }

  .vstat .vsub{
    font-size:14px;
    color:var(--ink-soft);
    margin:10px auto 0;
    line-height:1.5;
  }

  .vstat .vnum{
    font-family:var(--num);
    font-weight:800;
    color:var(--coral);
    font-size:clamp(34px,7vw,52px);
    line-height:1;
    margin:1rem auto 0;
    padding: 1rem 0 0;
    border-top:5px dotted var(--sea);
  }
  
  .vstat .vnum .u{font-size:.4em;color:var(--abyss);font-family:var(--display);margin-left:3px;}

  .recoup{
    font-family:var(--display);
    font-weight:900;
    color:#fff;
    font-size:clamp(16px,2.6vw,21px);
    margin:0 auto;
    padding: 0;
    line-height:1.5;
  }

  .recoup .hl{color:var(--shell);}
  .benefits{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:16px;margin:34px 0 0;}

  .benefit{
    background:rgba(255,255,255,.14);
    border:2px solid rgba(255,255,255,.4);
    border-radius:var(--radius);
    padding:26px 18px;
    backdrop-filter:blur(2px);
    text-align:center;
  }

  .benefit .bi{
    width:52px;height:52px;margin:0 auto 12px;border-radius:16px;background:#fff;
    display:flex;align-items:center;justify-content:center;font-family:var(--num);
    font-weight:800;font-size:22px;color:var(--sea-deep);
  }

  .benefit p.title{
    font-family:var(--display);
    font-weight:900;
    font-size:18px;
    margin:0 auto 0.5rem;
    line-height:1.4;
    text-align: center;
    height: 50px;
  }

  .benefit p{
    font-size:13px;
    color:rgba(255,255,255,.9);
    margin:0;
    text-align: left;
  }
  .about .fee{
    margin-top:26px;
    display:inline-block;font-family:var(--display);font-weight:700;
    background:rgba(255,255,255,.16);
    border:2px solid rgba(255,255,255,.4);
    border-radius:999px;
    padding:8px 20px;
    font-size:16px;
  }

  .about .placeholder-note{
    margin-top:16px;
    font-size:12px;
    color:rgba(255,255,255,.78);
  }

.about .btn{
  margin: 1.5rem auto;
    padding: 16px 50px;
}

  /* ---------- footer ---------- */
  footer{
    background:var(--abyss);
    color:rgba(255,255,255,.8);
    padding:42px 0 0;
    font-size:12.5px;
  }
  
  footer .foot-actions{
    margin-bottom:30px;
  }

  footer .btn-faq{
    display:inline-block;font-family:var(--display);
    font-weight:900;
    font-size:1.5rem;
    color:#fff;
    border:2px solid rgba(255,255,255,.5);
    border-radius:999px;
    margin: 0 auto;
    padding:11px 26px;
    text-decoration:none;
    transition:background .15s ease;
     background: rgba(255,255,255,.28);
  }

  footer .btn-faq:hover{background:rgba(255,255,255,.12);}

  footer .foot-h{
    font-family:var(--display);
    font-weight:900;
    color:#fff;
    font-size:20px;
    margin:0 0 10px;
    padding: 5px;
    border-bottom: 3px dotted #fff;
  }

  

  footer ul.notes{
    list-style:none;
    margin:0;
    padding:0;
    line-height:1.9;
    font-size: 14px;
  }

  footer ul.notes li{
    padding-left:1.3em;
    text-indent:-1.3em;
    margin-bottom:5px;
  }

  footer .copy{
        background: linear-gradient(180deg, #4FB3D1, #2E8FB0);
    margin-top:30px;

    text-align: center;
  }

   footer .copy small{
    display: block;
    margin: 0 auto;
    padding: 0.5rem 0;
    opacity:.9;
   }

   #page_top {
    position: fixed;
    bottom:10px;
    right: 10px;
    opacity: 1;
    z-index: 600;
    margin: 0;
    padding: 0;
    text-align: center;
    color: #fff;
    background: var(--coral);
    width: 34px;
    height: 34px;
    line-height: 1;
border-radius: 5px;
}

#page_top .fas {
    font-size: 2rem;
    color: #fff;
    margin: 0;
    padding: 0;
    width: 100%;
    }

  /* reveal */
  .reveal{opacity:0;transform:translateY(18px);transition:opacity .6s ease, transform .6s ease;}
  .reveal.in{opacity:1;transform:none;}

  /* ---------- responsive ---------- */
  @media (max-width:820px){
    .hero{
      padding:50px 0 120px;
    }

    .hero .wrap{
      grid-template-columns:1fr;
      gap:30px;
      text-align:center;
    }

    .hero-cta{justify-content:center;}
    .hero-copy .eyebrow{margin-inline:auto;}
    .poster-stage{order:-1;margin-bottom:14px;}
    .step-row{grid-template-columns:1fr;gap:14px;}
    .paths{grid-template-columns:1fr;gap:16px;}
    .value-strip{grid-template-columns:1fr;gap:12px;}
    .sched-grid{grid-template-columns:1fr;gap:28px;}
    .section{padding:64px 0;}

    .hero-copy{
      text-align: center;
    }
        h1 img.mainlogo{
      margin: 1rem auto;
    }

    .hero-copy .main_text{
     text-align: center;
    }


    .hero .sub{
      margin: 0 auto 2rem;
      text-align: left;
    }
.hero-copy .main_text ul.check{
        max-width: 30em;
}
      .hero-copy .eyebrow::before{
        display: none;
      }


    .step_grid{
      display: none;
    }

    .step_grid_main{
      display: none;
    }

    .cta3{
      display: block;
      margin: 0 auto 1rem;
    }

    .cta-card .buttonarea{
      display: block;
      width: 80%;
    }

    .cta-primary{
      width: 100%;

    }
.cta-card{
  max-width: 70vw;
  margin: 0 auto 2rem;
}
      .cta-card .cpre{
        min-height: auto;
         margin: 0 auto 1rem;
      }
.cta-card .cact{
  width: 100%;
}




  .griditem.spgrid{
      width: 70vw;
    display: block;
    margin: 0 auto 2.5rem;
  }

  .cta-lottery.cta-card .cact{
    color: var(--sea-deep);
    background: #fff;
     border: 2px solid var(--sea-deep);
  }

  .step_ship{
    width: 70vw;
  }

      .about_text{
        min-height: auto;
      }

      .recoup{
        font-size: 18px;
      }
.benefits{
grid-template-columns: 1fr 1fr;
}

  }

  @media screen and (max-width:758px) {

      .sp {
        display: inline;
    }

    .pc {
        display: none;
        
    }
      
.wrap{
  padding: 0 1.25rem;
}


    .topbar .toplogo{
      max-width: 200px;
    }

    h1 img.mainlogo{
      margin: 1rem auto;
      max-width: 90vw;
    }

    .hero-copy{
      padding: 1rem 0;
    }

    .hero-copy .main_text{
      padding: 0.5rem;
      text-align: center;
    }

    .hero-copy .main_text ul.check{
      max-width: 100%;
    }

    .hero h1{
font-size: 2.3rem;
    }

    .hero-copy .eyebrow.release{
      display: block;
      font-size: 15px;
      line-height: 1.5;
      padding: 1rem;
    }

    .hero-copy .eyebrow .small{
      margin: 0;
    }

    .hero-copy .eyebrow.release:before{
      content: none;
    }

    .hero .sub{
      text-align: left;
    }

      ul.check.b{
    text-align: left;
  }


    .btn{
      width: 80vw;
    }

.eyebrow{
  font-size: 1rem;
}

h3.sec-title{
  font-size: 24px;
  line-height: 1.5;
}

.prize .lead{
  text-align: left;
}

.cta-card{
  width: 100%;
  max-width: 100%;
  margin: 0 auto 1.5rem;
}

.griditem.spgrid{
  width: 100%;
}

.steps .lead{
  text-align: left;
}


.cta3{
  padding: 1rem 0;
}

.cta-card .cpre{
  height: auto;
  margin: 0 auto 1rem;
}

.cta-card .cact{
  width: 100%;
}

    .cta-card .buttonarea{
      width: 100%;
      padding: 1rem 0 0;
    }

    .buttonarea p.button,.buttonarea p.button_b{
      font-size: 14px;
    }

    .step_ship{
      width: 100%;
      padding: 0.5rem 1rem;
      font-size: 1rem;
    }

.cta-routes-note{
  text-align: left;
}
.sched-note{
  padding: 1rem;
  text-align: center;
}
.sched-note .tag{
  font-size: 16px;
  margin: 0 auto 1rem;
}

.sched-note .big{
  text-align: center;
}
.sched-note p{
  text-align: left;
}
.sched-grid{
  padding: 1rem 0;
}

.about ul.check{
  text-align: left;
}

.about .eyebrow{
  display: block;
      padding: 1rem ;
}
.about .eyebrow:before{
  display: none;
}

.about .eyebrow .about_sp{
  display: block;
}
.about .eyebrow .about_sp:before{
  display: inline-block;
content: "";
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--coral);
    z-index: 999;
    margin: 0 10px 0 0;
}

.about .lead{
  margin: 0 auto;

}

.about_text{
  padding: 0.5rem 0;
  min-height: auto;
}



.recoup{
  text-align: left;
  font-size: 17px;
padding: 0 0.5rem;
}

.benefits{
  display: block;
}

.benefit{
  margin: 0 auto 1rem;
}

.benefit:last-of-type{
  margin: 0 auto;
}

.benefit p.title{
  height: auto;
  margin: 0 auto 1rem;
}

.benefit p{
  text-align: center;
}

.about .fee{
  font-size: 14px;
}

.about .placeholder-note{
  text-align: left;
}

footer .btn-faq{
  font-size: 1.2rem;
}

  }

  :focus-visible{outline:3px solid var(--coral);outline-offset:3px;border-radius:6px;}

  @media (prefers-reduced-motion:reduce){
    *{animation:none!important;transition:none!important;scroll-behavior:auto!important;}
    .reveal{opacity:1;transform:none;}
  }

  /* hero KV = goods photo */
  .poster-stage .kv-frame{
    position:relative;z-index:1;
    width:min(300px,85%);
    background:#fff;
    border-radius:30px;
    padding:30px 18px 18px;
    box-shadow:0 18px 34px rgba(15,60,75,.2);
    transform:rotate(2deg);
    display:flex;
    flex-direction:column;
    align-items:center;gap:8px;
  }



  .kv-frame::before{
    content:"";
    position:absolute;
    inset:9px;
    border:2px dashed var(--lagoon);
    border-radius:22px;
    pointer-events:none;
  }

  .kvf-badge{
    position:absolute;
    top:-20px;
    left:50%;
    transform:translateX(-50%);
    z-index:3;
    font-family:var(--display);
    font-weight:900;
    font-size:12px;
    color:var(--sea-deep);
    background:#FBEBB0;
    border-radius:999px;
    padding:10px 20px;
    box-shadow:0 4px 0 rgba(46,143,176,.16);
    white-space:nowrap;
    text-align: center;
  }

    .kvf-badge .bold{
font-weight: 800;
color: var(--coral-deep);
  }


  .kvf-dot{position:absolute;border-radius:50%;z-index:2;}

  .kvf-dot.d1{
    width:10px;
    height:10px;
    background:var(--coral);
    top:25px;
    right:20px;}

  .kvf-dot.d2{
    width:7px;
    height:7px;
    background:var(--sea);
    top:54px;
    left:20px;
  }

  .kvf-dot.d3{
    width:6px;
    height:6px;
    background:var(--sun);
    bottom:55px;
    right:20px;}

  .kv-goods-img{
    position:relative;z-index:1
    ;width:100%;
    aspect-ratio:681/1100;background:var(--goods) center/contain no-repeat;}
  .kvf-cap{position:relative;z-index:1;font-family:var(--display);font-weight:700;font-size:12px;color:var(--sea-deep);text-align:center;line-height:1.4;}
  @media (prefers-reduced-motion:no-preference){
    .kv-frame{animation:kvfloat 5.5s ease-in-out infinite;}
    @keyframes kvfloat{0%,100%{transform:rotate(2deg) translateY(0);}50%{transform:rotate(2deg) translateY(-9px);}}
  }