@charset "UTF-8";

/*****************************
  cmn
*****************************/
.topsecsp{
  background: #fff;
  position: relative;
}
.fixcmpsp{
  position: fixed;
  right: 3.4%;
  bottom: 3%;
  width: 41%;
  z-index: 10;
}
.campaignBef .fixcmpsp,
.campaignEnd .fixcmpsp{
  display: none;
}

/*****************************
topsecsp-fv
*****************************/
.topsecsp-fv{
  padding-top: 8rem;
  background: #ffff8c;
}
.topsecsp-fv::before{
  content: "";
  aspect-ratio: 767/415;
  background: #fff;
  clip-path: polygon(100% 0, 0% 100%, 100% 100%);
  position: absolute;
  right: 0;
  bottom: 0;
  width: 100%;
}
.topsecsp-fv header{
  padding: 1rem 0 2rem;
}
.topsecsp-fv header .logo1{
  margin-top: 1rem;
  width: 19.38%;
}
.topsecsp-fv header .logogr{
  width: 55.36%;
}
.topsecsp-fv header .logogr .logo2{
  width: 63.47%;
}
.topsecsp-fv header .logogr .logo3{
  width: 30.22%;
}

.topsecsp-fv .ttl h1{
  width: 58.43%;
}
.topsecsp-fv .ttl .pokegr{
  gap: 1vw;
  width: 34.86%;
}
.topsecsp-fv .ttl .pokegr li{
  width: calc(50% - 0.7vw);
}
.topsecsp-fv .ttl .pokegr li:first-of-type{
  width: 100%;
}

.topsecsp-fv .item{
  padding-top: 5vw;
}
.topsecsp-fv .item .poke{
  position: absolute;
  top: 0;
  left: 0;
  width: 34.86%;
}

.topsecsp-fv .datearea{
  margin-top: -5vw;
  padding-bottom: 5vw;
}
.topsecsp-fv .datearea .fbox{
  width: 55.09%;
}
.topsecsp-fv .datearea .fimgbox{
  width: 34.86%;
}
.topsecsp-fv .datearea .fbox .attention{
  width: 94.43%;
}


/*****************************
topsecsp-catch
*****************************/
.topsecsp-catch{
  padding-bottom: 12%;
}
.topsecsp-catch::before{
  content: "";
  aspect-ratio: 767/415;
  background: #ffff8c;
  clip-path: polygon(100% 0, 0% 100%, 100% 100%);
  position: absolute;
  right: 0;
  bottom: 0;
  width: 100%;
}
.topsecsp-catch .campaignbtn{
  margin: 2rem auto 0;
}
.campaignEnd .topsecsp-catch .campaignbtn a{
  display: none;
}
.topsecsp-catch .catch1{
  margin-top: 20vw;
  padding-bottom: 5.9rem;
}
.topsecsp-catch .catch1 .ttl{
  margin-bottom: 5vw;
}
.topsecsp-catch .pokegr{
  width: 43.65%;
}
.topsecsp-catch .catch1 .pokegr{
  margin: -5vw 0 0 auto;
}
.topsecsp-catch .pokegr li{
  width: 47.92%;
}
.topsecsp-catch .catch1 .imgbox{
  margin-top: 5vw;
}
.topsecsp-catch .catch1 .imgbox img:first-of-type,
.topsecsp-catch .catch2 .imgbox img:first-of-type{
  margin-bottom: 1rem;
  width: 41.84%;
}
.topsecsp-catch .catch1 .imgbox img:last-of-type,
.topsecsp-catch .catch2 .imgbox img:last-of-type{
  border: 2px solid #ef8337;
}

.topsecsp-catch .catch2 .ttl{
  margin-left: auto;
  width: 72.8%;
}
.topsecsp-catch .catch2 .pokegr{
  margin: 8.5vw 0 7vw;
}


/*****************************
topsecsp-lineup1
*****************************/
.topsecsp-lineup1{
  background-color: #ffff8c ;
  padding-bottom: 70%;
}
.topsecsp-lineup1::before,
.topsecsp-lineup1::after{
   content: "";
   position: absolute;
   width: 100%;
}
.topsecsp-lineup1::before{
  aspect-ratio: 17/75;
  background: url(../images/top_sp/sp_lineup1_bg.svg) no-repeat center / contain;
  top: -30vw;
  left: 0;
}
.topsecsp-lineup1::after{
  content: "";
  aspect-ratio: 767/415;
  background: #d8edff;
  clip-path: polygon(0 0, 0 100%, 100% 100%);
  right: 0;
  bottom: 0;
}
.topsecsp-lineup1 .inner1{
  z-index: 1;
}
.topsecsp-lineup1 .mainttl{
  margin-bottom: 9vw;
  padding-top: 5vw;
}
.topsecsp-lineup1 .item h3{
  margin-bottom: 2vw;
  width: 57.04%;
}
.topsecsp-lineup1 .item p{
  margin: 3vw 0 5vw;
  width: 35.14%;
}
.topsecsp-lineup1 .item .fimgbox{
  width: 62.58%;
}

.topsecsp-lineup1 .txtarea{
  background: #fff;
  border-radius: 10px;
  margin: 4vw 0;
  padding: 3% 3.9%;
}
.topsecsp-lineup1 .txtarea h4{
  margin-bottom: 2vw;
  width: 74.75%;
}

.topsecsp-lineup1 .use .txt{
  margin: 4vw 0;
  width: 81.03%;
}

.topsecsp-lineup1 .point .txt{
  margin: 4vw 0;
  width: 70.15%;
}

.topsecsp-lineup1 .use .imgbox img,
.topsecsp-lineup1 .point li img{
  border: 2px solid #ffd400;
}

.topsecsp-lineup1 .point li{
  width: 30.68%;
}

.topsecsp-lineup1 .poke{
  position: absolute;
  right: 0;
  bottom: -11%;
  width: 35.86%;
}


/*****************************
topsecsp-lineup2
*****************************/
.topsecsp-lineup2{
  background: #d8edff;
}
.topsecsp-lineup2::before{
  content: "";
  aspect-ratio: 4/25;
  background: url(../images/top_sp/sp_lineup2_bg.svg) no-repeat center / cover;
  opacity: .4;
  position: absolute;
  top: -48vw;
  left: 0;
  width: 100%;
}
.topsecsp-lineup2 .inner1{
  top: -12vw;
  top: -8vw;
}

.topsecsp-lineup2 .item .txt h2{
  width: 85.35%;
}
.topsecsp-lineup2 .item .txt p{
  margin: 4vw 0;
  width: 44.9%;
}

.topsecsp-lineup2 .use{
  margin-top: 6vw;
}
.topsecsp-lineup2 .use h3{
  width: 95.25%;
}
.topsecsp-lineup2 .use p{
  margin: 4vw 0;
}
.topsecsp-lineup2 .use .imgbox img,
.topsecsp-lineup2 .point2 img:last-of-type{
  border: 2px solid #74caeb;
}

.topsecsp-lineup2 .point{
  margin: 4vw 0 6.5vw;
}
.topsecsp-lineup2 .point2{
  width: 55.78%;
}
.topsecsp-lineup2 .pokegr{
  display: flex;
  flex-direction: column;
  gap: 2vw;
  width: 27.89%;
}
.topsecsp-lineup2 .point2 img:first-of-type{
  width: 92.5%;
}
.topsecsp-lineup2 .point1 .txt{
  position: absolute;
  top: 7%;
  left: 48%;
  width: 42.67%;
}

/*****************************
topsecsp-link
*****************************/
.topsecsp-link{
  background: #d8edff;
  padding-bottom: 10vw;
}
.topsecsp-link .inner1{
  z-index: 2;
}
.topsecsp-link h2{
  margin: 0 auto;
  width: 61.78%;
}
.topsecsp-link ul {
  padding-top: 1.2vw;
  margin: 0 auto;
  width: 69.73%;
}
.topsecsp-link ul li{
  margin-top: 2vw;
}
.topsecsp-link ul li a {
  pointer-events: none;
  opacity: 0.3;
}
.campaignBef .topsecsp-link ul li a,
.topsecsp-link ul li a.empty{
  filter: brightness(0.7);
  pointer-events: none;
}