/* ==========================================================
   1. Design Tokens
========================================================== */
:root{
  /* color */
  --bg:            #ffffff;
  --ink:           #000000;   
  --ink-strong:    #55504b;
  --pink:          #F9B2D7;   
  --pink-soft:     #FFF5FA;
  --pink-deep:     #FF93CC;   
  --blue:          #E4F9FE;
  --blue-soft:     #E4F9FE; 
  --green:         #64B7A2;   
  --white:         #ffffff;

  /* type */
  --font-body:    "nitalago-rera", sans-serif;
  --font-script: "gelato-luxe", sans-serif;

  /* layout */
  --content-w:     1100px;
  --radius-bubble: 999px;
  --section-gap:   96px;
}

/* ==========================================================
   2. Base
========================================================== */
*,*::before,*::after{
  box-sizing:border-box;
  margin:0;
  padding:0;
}
html{
  scroll-behavior:smooth;
}
body{
  font-family:var(--font-body);
  font-weight:500;
  font-size:16px;
  color:var(--ink);
  background:var(--bg);
  line-height:1.6;
  letter-spacing:.04em;
  background-image:url("/static/fcopen/fanplakit/artist/fromis_9_g1myenf6/lot/images/ph_bg_s8ow3whoh3.png");
  background-repeat:repeat;
  background-size: 2000px auto;
  background-attachment: fixed;
  overflow-x: hidden;
}
img{
  max-width:100%;
  display:block;
pointer-events: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;

}
a{
  color:inherit;
}
main{
  overflow-x: hidden;
}
.container{
  width:min(var(--content-w), 92%);
  margin-inline:auto;

}
.mt-lg{
  margin-top:56px;
}
.mb-0{
  margin-bottom:0 !important;
}
section{
  margin-block:var(--section-gap);
}

/* スクロール出現 */
.reveal{
  opacity:0;
  transform:translateY(24px);
  transition:opacity .7s ease, transform .7s ease;
}
.reveal.is-visible{
  opacity:1;
  transform:none;
}
@media (prefers-reduced-motion: reduce){
  html{
    scroll-behavior:auto;
  }
  .reveal{
    opacity:1;
    transform:none;
    transition:none;
  }
}
.tab{
  display: none;
}
/* ==========================================================
   3. Components
========================================================== */

/* --- リボン見出し（ピンク装飾は画像） ---------------------- */
.ribbon{
  display:table;
  margin:0 auto -55px;
  width: 500px;
  padding:1.5em 2.5em 1.5em;
  background-size:100%;
  background-repeat: no-repeat;
  color:transparent;
  font-weight:800;
  font-size:30px;
  text-align:center;
  white-space:nowrap;
}
#about .ribbon{
  background-image:url("/static/fcopen/fanplakit/artist/fromis_9_g1myenf6/lot/images/ph_title_1_sehi52oae.png");
}
#present .ribbon{
  background-image:url("/static/fcopen/fanplakit/artist/fromis_9_g1myenf6/lot/images/ph_title_2_sehi52oae.png");
}
#entry .ribbon{
  background-image:url("/static/fcopen/fanplakit/artist/fromis_9_g1myenf6/lot/images/ph_title_3_sehi52oae.png");
}
#entry .ribbon{
  margin-bottom:50px;
}
/* --- 小見出しピル（枠線） -------------------------------- */
.pill-heading{
  display:table;
  margin:0 auto 28px;
  padding:.3em 3em;
  border:2px solid var(--pink);
  border-radius:999px;
  color:var(--pink-deep);
  font-weight:700;
  font-size:22px;
  background:var(--white);
  width: 600px;
  text-align: center;
}

/* --- バブル（雲形）カード -------------------------------- */
.bubble{
  position:relative;
  display:flex;
  align-items:center;
  background:var(--blue-soft);
  border-radius:var(--radius-bubble);
  padding:90px 110px;
  text-align:center;
  justify-content: space-between;
  z-index: -1;
}

/* --- ボタン ---------------------------------------------- */
.btn{
  display:block;
  width:min(420px, 100%);
  margin-inline:auto;
  padding:1em;
  border-radius:999px;
  text-align:center;
  text-decoration:none;
  font-weight:700;
  letter-spacing:.12em;
  color:var(--white);
  box-shadow:0 4px 0 rgb(0 0 0 / .08);
  transition:transform .15s ease, box-shadow .15s ease;
}
.btn:hover{
  transform:translateY(2px);
  box-shadow:0 2px 0 rgb(0 0 0 / .08);
}
.btn--pink{
  background:var(--pink-deep);
}
.btn--green{
  background:var(--green);
}

/* --- ステップ円 ------------------------------------------ */
.steps{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:28px;
  margin-top:36px;
  margin-bottom: 80px;
}
.step{
  background:var(--blue-soft);
  border-radius: 135px / 150px;
  display:block; 
  align-items:center; 
  padding: 7% 15%;
  text-align:center;
}
.step__label{
  font-family:var(--font-script);
  color:var(--pink-deep);
  font-size:24px;
  margin-bottom:.4em;
}

.step__text{ 
  font-size:14px; 
  line-height:1.7; 
  text-align: left;
}
.step__ph{
margin: 0 auto 10px;
width: fit-content;
}
.step__img{
width: auto;
    height: 65px;
}
/* --- 注意事項リスト --------------------------------------- */
#notice{
  background: var(--bg);
}
.notice-list{
  list-style:none;
  font-size:13px;
  text-align:left;
}
.notice-list li{
  position:relative;
  padding-left:1.6em;
  margin-bottom:.6em;
}
.notice-list li::before{
  content:"";
  background-image:url("/static/fcopen/fanplakit/artist/fromis_9_g1myenf6/lot/images/ph_att_aguefai84owhfao.png");
  position:absolute; left:0; top:0;
  width: 10px;
  top:6px;
  background-size: contain;
  aspect-ratio: 1/1;
  color:var(--pink);
}

/* ==========================================================
   4. Sections
========================================================== */

/* --- 追従バッジ（シリアルナンバー発行） -------------------- */
.float-badge{
  position:fixed; bottom:25px; right:30px; z-index:50;
  width:200px;
  filter:drop-shadow(0 3px 6px rgb(0 0 0 / .18));
  transition:transform .15s ease;
}
.float-badge:hover{
  transform:scale(1.06);
}

/* --- Hero -------------------------------------------------- */
.hero{
  text-align:center;
  height: 100vh;
}
.hero h1{
  width: 50%;
  padding-top: 20vh;
  margin: 0 auto;
}
.hero__logo{
  width:100%;
  margin-inline:auto;
}

.hero__start{
  margin-top:56px;
  font-family:var(--font-script);
  color:var(--pink-deep);
  font-size:24px;
}
.hero__start::after{
  content:"↓";
  display:block;
  animation:bounce 1.6s infinite;
}
@keyframes bounce{ 50%{ transform:translateY(6px); } }

/* --- About（チケット） ------------------------------------- */
.lead{
  font-size:28px;
  font-weight:900;
  color:var(--pink-deep);
  margin-bottom:24px;
  text-align:left;
}
.ticket-img{
  width:100%;
}
.about__txt{
  text-align:left;
}
.about__ph{
  width:35%;
  flex-shrink:0;
  margin-left:30px;
}
/* --- Present ----------------------------------------------- */
.prize{
  font-size:26px;
  font-weight:900;
  line-height:1.7;
}
@media (min-width: 1050px) {
#present .about__ph{
  width: 45%;
}
}
.prize em{
  font-style:normal;
  color:var(--pink-deep);
}
.photocard-img{
  width:min(560px, 100%);
  margin:24px auto 0;
}
.note-small{
  font-size:11px;
  margin-top:16px;
}
.prize span{
  font-size: 28px;
}
/* --- Entry（期間・当選発表） ------------------------------- */
.period{
  text-align:center;
  font-size:35px;
  font-weight:900;
  margin-bottom:56px;
    background: var(--pink-soft);
  border-radius: 999px;
  color: var(--pink-deep);
  padding: .3em 3em;
}
.period__block{
  text-align:center;
  font-size:35px;
  font-weight:500;
  margin-bottom:56px;
  background: var(--pink-soft);
  border-radius: 999px;
  color: var(--pink-deep);
  padding: .3em 3em;
}
.period__block .period{
  background: transparent;
}
.announce-note{
  font-size:11px;
  text-align:center;
  margin-top:8px;
  color: var(--ink);
}

/* --- CTA ---------------------------------------------------- */
.cta .btn + .btn{
  margin-top:20px;
}

/* --- Footer -------------------------------------------------- */
footer{
  padding:48px 0 24px;
  text-align:center;
  font-size:11px;
  color:#a9a29c;
}

/* --- Wovn ------------------------------- */
    header:has(.wovn-languages) .wovn-languages {
    position: absolute;
    top: 100%;
    left: 2em;
    z-index: 5;
    font-weight: 400;
}
header:has(.wovn-languages) .wovn-languages .wovn-lang-list {
    display: flex;
    flex-direction: column;
    height: 2.5em;
    overflow: hidden;
    transition: 0.3s;
    padding: 0 1em 0 2em;
    border-radius: 1.5em;
    border: solid 1px;
}
header:has(.wovn-languages, .lang-selector) .wovn-languages .wovn-lang-list, header:has(.wovn-languages, .lang-selector) .lang-selector .wovn-lang-list {
    background-color: #ffffff;
    color: #2c8b73;
}
header:has(.wovn-languages) .wovn-languages .wovn-lang-list li {
    order: 1;
    padding: 0.3em 0;
}
header:has(.wovn-languages) .wovn-languages .wovn-lang-list li.selected {
    order: 0;
}
header:has(.wovn-languages) .wovn-languages .wovn-lang-list:after {
    content: "\f0ac";
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    position: absolute;
    left: 0.7em;
    top: 0.35em;
}
header:has(.wovn-languages) .wovn-languages.visible .wovn-lang-list {
    height: auto;
}
header li{
    list-style: none;
}
@media screen and (min-width: 961px) {
    header:has(.wovn-languages, .lang-selector) .wovn-languages, header:has(.wovn-languages, .lang-selector) .lang-selector {
        top: calc(2vw + 13px);
        right: calc(2vw + 85px);
        left: auto;
    }
    header:has(.wovn-languages) .wovn-languages, header:has(.lang-selector) .lang-selector {
        top: calc(2vw + 13px);
        right: calc(2vw + 85px);
        left: auto;
    }

}
@media screen and (min-width: 1px) and (max-width: 960px) {
    .page--home header:has(.wovn-languages) .wovn-languages, .page--home header:has(.lang-selector) .lang-selector {
        top: 7vw;
        left: 5vw;
        right: auto;
    }
        header:has(.wovn-languages, .lang-selector) .wovn-languages, header:has(.wovn-languages, .lang-selector) .lang-selector {
        display: block !important;
        position: fixed;
        top: 1.5em;
        left: 1.5em;
        opacity: 1 !important;
    }
        header:has(.wovn-languages) .wovn-languages, header:has(.lang-selector) .lang-selector {
        top: 25px;
        left: auto;
        right: 20px;
    }
        header:has(.wovn-languages) .wovn-languages {
        top: 1em;
        font-size: 0.9em;
    }

}


/* ==========================================================
  Responsive
========================================================== */
@media (min-width: 750px) and (max-width: 1049px) {
  .tab{
    display: block;
  }
  .lead{
    font-size: 26px;
  }
  .prize span{
    font-size: 26px;
  }
.prize{
  font-size: 22px;
}
  /* --- Entry --- */
  .period{
    font-size:19px;
    margin-bottom:44px;
  }
  .steps{
    grid-template-columns:1fr;       
    justify-items:center;
    gap:22px;
    margin-top:28px;
    margin-bottom: 50px;
  }
     .step {
        padding: 7% 11%;
        width: 56%;
    }
  .step__label{
    font-size:20px;
  }
  .step__text{
    font-size:14px;
  }
  .announce-note{
    font-size:10px;
    text-align:left;
  }
.period__block{
  padding: 1em .9em;
  margin-bottom: 0;
}
.pill-heading{
  width: 100%;
}
}
@media (max-width:749px){

  /* --- Tokens 上書き --- */
  :root{
    --radius-bubble: 999px;
    --section-gap:   64px;
  }
.tab{
  display: none;
}
  /* --- Base --- */
  body{
    font-size:14px;
    line-height:1.6;
    background-size: 250% auto;
  }
  .container{
    width:88%;
  }
  .mt-lg{
    margin-top:44px;
  }

  /* --- 追従バッジ --- */
  .float-badge{
    width:120px;
    bottom: 15px;
    right: 15px;
  }

  /* --- Hero --- */
 .hero h1 {
    width:100%;
    padding-top: 22vh;
    margin: 0 auto;
}
  .hero__logo{
    width:min(340px, 84%);
  }
  .hero__start{
    margin-top:40px;
    font-size:20px;
  }

  /* --- リボン見出し --- */
  .ribbon{
    font-size:20px;
    margin: 0 auto;
    padding: 1em 1.4em 1em;
    margin-bottom: -15px;
    width: 300px;
  }
  #entry .ribbon{
    margin-bottom: 30px;
  }

  /* --- 小見出しピル --- */
  .pill-heading{
    font-size:13px;
    padding:.35em 2em;
    margin-bottom:20px;
    white-space:nowrap;
    text-align: center;
    width: 100%;
  }

  /* --- バブルカード --- */
  .bubble{
    display: block;
    padding:36px 22px 40px;
    border-radius:var(--radius-bubble);
  }

  /* --- About --- */
  .lead{
    font-size:18px;
    margin-bottom:15px;
    text-align:left;
  }
  .about__txt{
    text-align:left;
  }
  .about__ph{
    width:100%;
    margin-left:0;
    margin-top:24px;
    text-align: left;
    max-width: 400px;
  }
  .ticket-img{
    width:min(240px, 74%);
    margin-inline:auto;
  }
  .bubble{
    background: transparent;
  }
.bubble::before {
content: "";
        position: absolute;
        inset: 0;
        background: var(--blue-soft);
        border-radius: inherit;
        transform: translate(-2vw, -125px);
        z-index: -1;
        width: 160vw;
        height: 570px;
        overflow-x: hidden;
}
#present .bubble::before {
  content: "";
  transform: translate(-70vw, -97px);
}
  /* --- Present --- */
  .prize{
    font-size:14px;
  }

.prize span{
  font-size: 18px;
}
  .photocard-img{
    margin-top:20px;
  }
  .note-small{
    font-size:10px;
    margin-top:14px;
    text-align:left;
  }

  /* --- Entry --- */
  .period{
    font-size:17px;
    margin-bottom:44px;
  }
  .steps{
    grid-template-columns:1fr; 
    justify-items:center;
    gap:22px;
    margin-top:28px;
    margin-bottom: 50px;
  }
  .step{
        padding: 9% 14%;
        width: 100%;
  }
  .step__label{
    font-size:20px;
  }
  .step__text{
    font-size:12px;
  }
  .announce-note{
    font-size:10px;
    text-align:left;
  }
.period__block{
  padding: 1em .9em;
  margin-bottom: 0;
}
.pill-heading{
  width: 100%;
}
  /* --- Notice --- */
  #notice.container{
    margin-top: 44px;
  }
  .notice-list{
    font-size:12px;
  }

  /* --- CTA / ボタン --- */
  .btn{
    width:min(320px, 100%);
    font-size:14px;
    padding:1.05em;
  }
  .cta .btn + .btn{
    margin-top:16px;
  }

  /* --- Footer --- */
  footer{
    padding: 80px 0 20px;
  }
}