@charset "UTF-8";

/*****************************
  cmn
*****************************/
.campaign_status a:hover {
  opacity: .7;
  transition: opacity .2s ease;
}
.topsec{
  background: #fff;
  position: relative;
}
.fixcmp{
  opacity: 0;
  pointer-events: none;
  position: fixed;
  right: 3.4%;
  bottom: 0;
  width: 27%;
  z-index: 10;
  transition: .5s;
}
.fixcmp.transition5{
  opacity: 1;
  pointer-events: all;
}
.fixcmp.noactive{
  opacity: 0;
  pointer-events: none;
}

.fixcmpsp{
  display: none;
}

@media only screen and (max-width: 1180px) {
}
@media only screen and (max-width: 1024px) {
}
@media only screen and (max-width: 820px) {
}
@media only screen and (max-width: 768px) {
}
@media only screen and (max-width: 767px) {
  .fixcmp{
    right: 3.4%;
    bottom: 3%;
    width: 37.02%;
  }
  .fixcmppc{
    display: none;
  }
  .fixcmpsp{
    display: block;
  }
}


/*****************************
topsec-fv
*****************************/
.topsec-fv{
  padding-top: 14rem;
  background: #ffff8c;
}
.topsec-fv::before{
  content: "";
  aspect-ratio: 128/41;
  background: #fff;
  clip-path: polygon(100% 0, 0% 100%, 100% 100%);
  position: absolute;
  right: 0;
  bottom: 0;
  width: 100%;
}
.topsec-fv header{
  padding: 5rem 0;
  width: 79.41%;
}
.topsec-fv header .logo1{
  width: 15%;
}
.topsec-fv header .logogr{
  width: 37.40%;
}
.topsec-fv header .logogr .logo2{
  width: 64.35%;
}
.topsec-fv header .logogr .logo3{
  width: 30.89%;
}
.topsec-fv h1{
  margin-bottom: 3.5rem;
  width: 78.88%;
}
.topsec-fv .content{
  width: 96.11%;
}
.topsec-fv .fbox{
  width: 35.53%;
}
.topsec-fv .fimgbox{
  width: 61.94%;
}
.topsec-fv .fbox .date{
  width: 87.41%;
}
.topsec-fv .fbox .attention,
.topsec-fv .fbox .poke{
  width: 100%;
}
.topsec-fv .fbox .poke{
  margin-top: 2rem;
}
.topsec-fv .fbox .poke li{
  width: 48.27%;
}
.topsec-fv .pokegr{
  display: flex;
  align-items: flex-end;
  flex-direction: column;
  gap: 1.4rem;
  position: absolute;
  top: 5rem;
  right: 0;
  width: 16.47%;
}
.topsec-fv .pokegr li{
  width: 53.57%;
}
.topsec-fv .pokegr li:first-of-type{
  width: 100%;
}
@media only screen and (max-width: 1180px) {
  .topsec-fv h1{
    margin-bottom: 2rem;
  }
}
@media only screen and (max-width: 1024px) {
  
}
@media only screen and (max-width: 820px) {
  .topsec-fv header{
    padding: 2rem 0;
  }
}
@media only screen and (max-width: 768px) {
  
}
@media only screen and (max-width: 767px) {
  
}

/*****************************
topsec-catch
*****************************/
.topsec-catch{
  padding-bottom: 20%;
}
.topsec-catch::before{
  content: "";
  aspect-ratio: 128/41;
  background: #ffff8c;
  clip-path: polygon(100% 0, 0% 100%, 100% 100%);
  position: absolute;
  right: 0;
  bottom: 0;
  width: 100%;
}
.topsec-catch .campaignbtn{
  margin: 2rem auto 0;
  width: 63.41%;
}
/* .campaignBef .topsec-catch .campaignbtn{
  filter: brightness(0.7);
} */
.campaignEnd .topsec-catch .campaignbtn a{
  display: none;
}
.topsec-catch .catch1{
  margin-top: 10rem;
  padding-bottom: 5rem;
}
.topsec-catch .catch2{
  justify-content: end;
  margin-top: 5rem;
  padding-bottom: 5rem;
}
.topsec-catch .catch1 .fimgbox,
.topsec-catch .catch2 .fimgbox{
  width: 41.17%;
}
.topsec-catch .catch1 .fimgbox img:first-of-type,
.topsec-catch .catch2 .fimgbox img:first-of-type{
  margin-bottom: 1rem;
  width: 64%;
}
.topsec-catch .catch1 .fimgbox img:last-of-type,
.topsec-catch .catch2 .fimgbox img:last-of-type{
  border: 2px solid #ef8337;
}
.topsec-catch .catch1 .ftxtbox{
  margin-top: 3rem;
  margin-left: 3%;
  width: 52.47%;
}
.topsec-catch .catch2 .ftxtbox{
  margin-right: 3%;
  width: 27.64%;
}

.topsec-catch .pokegr{
  position: absolute;
  bottom: 0;
  width: 27.05%;
}
.topsec-catch .pokegr li{
  width: 47.82%;
}
.topsec-catch .catch1 .pokegr{
  right: 0;
}
.topsec-catch .catch2 .pokegr{
  left: 0;
}
@media only screen and (max-width: 1180px) {

  .topsec-catch .catch1{
    margin-top: 5rem;
    padding: 0;
  }
  .topsec-catch .catch2 {
    padding-bottom: 2rem;
  }
}
@media only screen and (max-width: 1024px) {
  
}
@media only screen and (max-width: 820px) {
  .topsec-catch{
    padding-bottom: 15%;
  }
}
@media only screen and (max-width: 768px) {
  
}
@media only screen and (max-width: 767px) {
  
}

/*****************************
topsec-lineup1
*****************************/
.topsec-lineup1{
  background-color: #ffff8c ;
  padding-bottom: 30%;
}
.topsec-lineup1::before,
.topsec-lineup1::after{
   content: "";
   position: absolute;
   width: 100%;
}
.topsec-lineup1::before{
  aspect-ratio: 47/75;
  background: url(../images/top/lineup1_bg.svg) no-repeat center / contain;
  top: -30vw;
  left: 0;
}
.topsec-lineup1::after{
  content: "";
  aspect-ratio: 128/41;
  background: #d8edff;
  clip-path: polygon(0 0, 0 100%, 100% 100%);
  right: 0;
  bottom: 0;
}
.topsec-lineup1 .inner1{
  z-index: 1;
}
.topsec-lineup1 .mainttl{
  margin: 0 auto 10rem;
  width: 70.58%;
}
.topsec-lineup1 .item .ftxtbox{
  width: 31.88%;
}
.topsec-lineup1 .item .ftxtbox h3{
  margin-bottom: 2rem;
}
.topsec-lineup1 .item .ftxtbox p{
  width: 61.80%;
}
.topsec-lineup1 .item .fimgbox{
  width: 62.58%;
}

.topsec-lineup1 .txtarea{
  background: #fff;
  border-radius: 0 30px 30px 0;
  margin: 5rem 0;
  padding: 4rem 5%;
  width: 95.57%;
}
.topsec-lineup1 .txtarea h4{
  margin-bottom: 2rem;
  width: 33.18%;
}
.topsec-lineup1 .txtarea p{
  width: 95.85%;
}

.topsec-lineup1 .use{
  margin-bottom: 5rem;
}
.topsec-lineup1 .use .fimgbox{
  width: 44.11%;
}
.topsec-lineup1 .use .fgr{
  margin-left: 3%;
  width: 34.17%;
}
.topsec-lineup1 .use .fgr .img{
  margin-top: 3rem;
  width: 74.01%;
}
.topsec-lineup1 .use .fimgbox img,
.topsec-lineup1 .use .fgr .img img,
.topsec-lineup1 .point li:not(:first-of-type) img{
  border: 2px solid #ffd400;
}
.topsec-lineup1 .point li{
  margin-left: 2.8%;
  width: 20.29%;
}
.topsec-lineup1 .point li:first-of-type{
  margin: 0;
  width: 30.17%;
}

.topsec-lineup1 .poke{
  position: absolute;
  right: 0;
  bottom: -35%;
  width: 16.47%;
}
@media only screen and (max-width: 1180px) {
  .topsec-lineup1 .mainttl{
    margin: 0 auto 5rem;
  }
  .topsec-lineup1 .txtarea{
    border-radius: 0 20px 20px 0;
    padding: 2rem 5%;
  }
}
@media only screen and (max-width: 1024px) {
  
}
@media only screen and (max-width: 820px) {
  
}
@media only screen and (max-width: 768px) {
  
}
@media only screen and (max-width: 767px) {
  
}

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

.topsec-lineup2 .item .fimgbox{
  width: 47.05%;
}
.topsec-lineup2 .item .ftxtbox{
  width: 47.64%;
}
.topsec-lineup2 .item .ftxtbox p{
  margin-top: 4.5rem;
  width: 52.96%;
}

.topsec-lineup2 .use{
  margin-top: 10rem;
}
.topsec-lineup2 .use h3{
  margin-bottom: 5rem;
  width: 40.82%;
}
.topsec-lineup2 .use .fbox{
  width: 53.29%;
}
.topsec-lineup2 .use .fimgbox{
  width: 44.11%;
}
.topsec-lineup2 .use .fbox {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.topsec-lineup2 .use .fbox p{
  width: 98.67%;
}
.topsec-lineup2 .use .fbox li{
  width: 47.46%;
}
.topsec-lineup2 .use .fbox li img,
.topsec-lineup2 .use .fimgbox img,
.topsec-lineup2 .point2 img:first-of-type{
  border: 2px solid #74caeb;
}

.topsec-lineup2 .point{
  margin-top: 8rem;
}
.topsec-lineup2 .point1{
  width: 60.17%;
}
.topsec-lineup2 .point2{
  text-align: center;
  width: 21.76%;
}
.topsec-lineup2 .pokegr{
  display: flex;
  flex-direction: column;
  gap: 2rem;
  width: 12.94%;
}
.topsec-lineup2 .point2 img:first-of-type{
  width: 93.24%;
}
.topsec-lineup2 .point1 .txt{
  position: absolute;
  top: 13%;
  left: 43%;
  width: 30%;
}
@media only screen and (max-width: 1180px) {
  .topsec-lineup2 {
    margin-bottom: -3vw;
  }
  .topsec-lineup2 .item .ftxtbox p{
    margin-top: 2.5rem;
  }
  .topsec-lineup2 .use {
    margin-top: 5rem;
  }
  .topsec-lineup2 .use h3{
    margin-bottom: 2rem;
  }
  .topsec-lineup2 .point {
    margin-top: 5rem;
  }
}
@media only screen and (max-width: 1024px) {
  
}
@media only screen and (max-width: 820px) {
  .topsec-lineup2{
    margin-bottom: -5vw;
  }
}
@media only screen and (max-width: 768px) {
  
}
@media only screen and (max-width: 767px) {
  
}

/*****************************
topsec-link
*****************************/
.topsec-link{
  background: #d8edff;
  /* padding: 8% 0 5%; */
  padding-bottom: 5%;
}
.topsec-link h2{
  margin: 0 auto;
  width: 42.82%;
}
.topsec-link ul {
  margin: 3rem auto 0;
  width: 91.14%;
}
.topsec-link ul li{
  margin: 3rem auto 0;
  width: 31.74%;
}
.campaignBef .topsec-link ul li a,
.topsec-link ul li a.empty{
  filter: brightness(0.7);
  pointer-events: none;
}
.topsec-link ul li a {
  pointer-events: none;
  opacity: 0.3;
}
@media only screen and (max-width: 1180px) {
  .topsec-link ul {
    margin-top: 1rem;
  }
}
@media only screen and (max-width: 1024px) {
  
}
@media only screen and (max-width: 820px) {
  
}
@media only screen and (max-width: 768px) {
  
}
@media only screen and (max-width: 767px) {
  
}