@charset "utf-8";
/*--基本--*/
:root{
	--font-size:18px;
	--max-width:1200px;
	--color: #00125E;/*文字色*/
	--color-hover: #FF3F8A;/*マウスオーバー時の文字色・色を変えない場合は「color」と同値にする*/
  --lang-active: #FF3F8A;
	--background: #fff;/*背景*/
  --spec-border: #ff899f;
  --btn:rgba(255,255,255,.7);/*ボタンの色*/
  --btn-hover:rgba(255,255,255,.9);/*ボタンの色:hover*/
  --btn-color:#323232;/*ボタンの文字色*/
  --btn-color-hover:#323232;/*ボタンの文字色:hover*/
  --btn-max-w:600px;/*ボタンの最大幅*/
  --border-radiue:0;/*ボタンの角R。角Rにしない時は0・可愛くしたい時は100*/
  --slider-btn: #000;/*スライダー矢印*/
  --slider-page: #000;/*スライダーページネーション*/
  --tokyo:#FF3F8A;
  --tokyo-base:#FF91BC;
  --osaka:#009CB2;
  --osaka-base:#5DC2D0;
}

@media screen and (max-width: 1200px){
	:root{
        --font-size:16px;
    }
}

@media screen and (max-width: 768px){
	:root{
      --font-size:12px;
        --btn-max-w:100%;/*ボタンの最大幅*/
    }
}



.swiper-slide{border-radius: 10px; line-height: 0;overflow: hidden;}
.swiper-slide a{line-height: 0;}
/*---------
　Font
---------*/
/*Noto Sans Japanese・Noto Serif Japanese以外はここに記載。**/
.poppins-bold {
  font-family: "Poppins", sans-serif;
  font-weight: 700;
  font-style: normal;
}

.poppins-black {
  font-family: "Poppins", sans-serif;
  font-weight: 900;
  font-style: normal;
}

/*-----------

-----------*/
a{color: var(--color-hover); text-decoration: underline;}
a:hover{text-decoration: none;}
section,aside{max-width: 1200px; width: 100%; margin: 250px auto 0;}
section:first-of-type{margin-top: 50px;}
section#about,
section#event{width: 100%;max-width: 2560px; margin: 250px auto 0;}

/*h要素*/
h3{ font-family: "Poppins", sans-serif;font-weight: 700;font-style: normal; font-size: 5em; text-align: center;line-height: 1;}
h5{font-size: 1.2em; text-align: center;}
h6{padding-left: .5em; border: 1px solid var(--color); border-width: 0 0 0 .7em;font-size: 1em; line-height: 1.5; margin-top: 1.2em;font-weight: 400; margin-bottom: .5em;}

/*-----------
body
-----------*/
body{background:#fff;}


/*-----------
header
-----------*/
header{background: #fff;color: #B6B6B6; height: 60px; padding: 0; position: fixed; z-index: 1000;margin: 0 auto; top: 0; left: 0;}
header .inner{align-items:flex-start;margin: 0 auto; align-items: center; max-width: 2560px;}
header h1{color: var(--color); font-weight: bold;padding-left: 10px; font-size: 1.2em;}
header a.btn_event{display: block; color: #fff;background: var(--color); height: 60px; line-height: 1; padding: 10px  50px;align-content: center;position: relative;text-decoration: none;}
header a.btn_event span{padding-right: 5px;}
header a.btn_event::after{content: ""; display: block; width: .5em; height: .5em; border: 1px solid #fff; border-width: 0 1px 1px 0; transform: rotate(45deg); position: absolute; right: 1em; top: calc(50% - .25em);}
header a.btn_event:hover{text-decoration: none; background: var(--color-hover);}
header .btn_h{display: block; width: 60px; height: 60px;line-height: 0;padding: 15px;}
header .btn_h.language_btn{border: 1px solid #B6B6B6; border-width: 0 1px 0 0;}
header .btn_h:hover{cursor: pointer;}
header .menu_btn{display: none;}
header .language_area,
header .share_area{position: absolute;left: 0; top: 60px; background: #fff; width: 100%; display: none; padding: 10px 0;border: 1px solid #f4f4f4; border-width: 1px 0 0 0; }
header .share_area{padding: 15px 0;}
header .language_area ul,
header .share_area ul{justify-content: center; font-weight: 900;align-items: center;}
header .share_area ul{gap: 20px;}
header .language_area li a{height: 50px; padding: 0 25px; text-decoration: none; color:var(--color); display: flex; justify-content: center; align-items: center;}
header .share_area li a{width: 40px; display: block;}
header .share_area .text{color: var(--color);}
header .language:hover .language_area,
header .share:hover .share_area{display: block;}

.overlay {display: none;position: fixed;top: 0;left: 0;width: 100vw;height: 100vh;background: rgba(0, 0, 0, 0.6);z-index: 900; pointer-events: none;}
.overlay.is-visible {
    display: block !important;
}
/*-----------
mv
-----------*/
#mv{overflow: hidden;  line-height: 0; padding: 60px 0 0 0; max-width: 2560px; margin: 0 auto;}
#mv .top_img{line-height: 0; position: absolute; left: 0; top: 0; width: 100%;}
#mv .top_img div {overflow: hidden;}
#mv .mv{position: relative; padding: 2% 0;}
#mv .text_area{position: relative; z-index: 100; line-height: 1;}
#mv .text_area h2{width: 32%; margin: 0 auto; max-width: 628px;}
#mv .text_area .lead{width: 30%; margin: 0 auto; max-width: 628px; line-height: 1;}
.top_img_anime {animation: bg-img 10s linear 0s normal both;}

#mv .gradation{position: absolute; left: 0; top: 0; width: 100%;height: 100vh; opacity: .8; animation: bg-gradient 5s linear infinite alternate; background:linear-gradient(82deg, rgba(164, 0, 64, 0.60) -1.22%, rgba(149, 101, 56, 0.60) 26.23%, rgba(148, 151, 7, 0.60) 52.66%, rgba(103, 150, 58, 0.60) 78.58%, rgba(0, 139, 157, 0.60) 104.5%)0 / 200% 100%;}

/* #mv .gradation{position: absolute; left: 0; top: 0; width: 100%;height: 100vh; opacity: .8; animation: bg-gradient 5s linear infinite alternate; background:linear-gradient(82deg, rgba(231, 50, 120, 0.60) -1.22%, rgba(255, 193, 136, 0.60) 26.23%, rgba(218, 223, 0, 0.60) 52.66%, rgba(209, 255, 164, 0.60) 78.58%, rgba(92, 194, 207, 0.60) 104.5%) 0 / 200% 100%;} */

@keyframes bg-img{
  0% {
    transform: scale(1);
  }
  100% {
    transform: scale(1.3);
  }
}

@keyframes bg-gradient {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: 100% 0;
  }
}

/*event*/
.event{position: relative;z-index: 100;}
.event .event_box{padding: 2% 2%; width: 50%; line-height: 1;}
.event .tokyo{background: var(--tokyo-base);}
.event .osaka{background: var(--osaka-base);}

/*-----------
news
-----------*/
#news li{display: block; border: 1px solid var(--color); padding: 1em 2em; margin-top: 1.5em;}
#news li.lnk{padding: 0;}
#news li a{display: block; padding:1em 2em;position: relative; color: var(--color);text-decoration: none;}
#news li a::after{content: "";display: block; width: .5em; height: .5em; border: 1px solid var(--color); border-width: 0 1px 1px 0; transform: rotate(45deg); position: absolute; right: 1em; top: calc(50% - .25em);}
#news li.lnk:hover{transform: translate(-5px, -5px);box-shadow: 5px 5px 0 var(--color);}

/*-----------
about
-----------*/
#about h4{font-size: 1.8em; font-weight: 400; text-align: center;}
#about h4 .small{font-size: .8em;}
#about h4 .big{font-weight: 700;}
#about h4 .pink{background: linear-gradient(transparent 50%, #FFD3E4 0%);display: inline;padding: 0 2px 4px;}
#about h4 .yellow{background: linear-gradient(transparent 50%, #FDFFAF 0%);display: inline;padding: 0 2px 4px;}
#about p{text-align: center; margin-top: 1.5em; width: calc(100% - 200px); margin-left: auto; margin-right: auto;}
#about p:first-of-type{margin-top: 1em;}
#about .inner{position: relative; width: 1200px; margin: 0 auto;}
#about .img{position: absolute; width: 200px; border-radius: 10px; line-height: 0;}
#about .img_a_01{left: -120px; top: -10px;}
#about .img_a_02{left: -120px; top: 230px;}
#about .img_a_03{right: -120px; top: -10px;}
#about .img_a_04{right: -120px;top: 230px;} 


/*-----------
event
-----------*/
#event p.free{font-size: 3em;font-weight: 600;}
#event p{text-align: center;}
/* #event p br{display: none;} */
#event .event{margin-top: 1.2em;}
#event .ttl{width: 80%; color: #fff; font-size: 3em; text-align: center; margin: 0 auto .5em; border-radius: 100px; padding: .2em 0;}
#event .ttl.tokyo{background: var(--tokyo);}
#event .ttl.osaka{background: var(--osaka);}
#event .location{font-size: 2.5vw; font-weight: 700; color: #fff;justify-content: center;align-items: center; margin-top: .5em; line-height: 1;}
#event .location span{width: 4%; display: inline-block; margin-right: 1%; padding-top: 5px;}
#early_cp {border: 1px solid var(--color); padding: 50px;padding: 2em 2em; max-width: 1200px; width: 90%; margin: 1.5em auto 0;}
#early_cp p{text-align: left;}


@media screen and (min-width: 2560px){
  #event .location{font-size: 4em;}
}
/*-----------
campaign
-----------*/
#campaign h3 + p{flex-wrap: 600; text-align: center;}
#campaign figure{margin-top: 1em;}
#campaign p{margin-top: 1.2em;}
#campaign p span{font-weight: 500;font-size: 1.2em;}
#campaign .coution{font-size: .8em;}
/*-----------
special
-----------*/
#special p{text-align: center; margin-top: 1em;}
#special .cs{color: #A1A8C6; font-size: 3em; margin-top: .5em;}

/*-----------
movie
-----------*/
#movie .inner{max-width: 1200px; width: 100%; margin: 1.2em auto 0;}
#movie .inner p{margin-top: 1em; text-align: center;}
.youtube{position: relative;width: 100%;padding-top: 56.25%;}
.youtube iframe{ position: absolute;top: 0;right: 0;width: 100% !important;height: 100% !important;}

/*-----------
aside
-----------*/
aside ul{justify-content:center;gap: 20px; width: calc((95px * 4) - 20px); margin: 20px auto 0;}
aside li{width: 75px; line-height: 1;}
aside li.border{border: 1px solid #ededed;border-radius: 1000px;}
aside li a{display: block}
aside .social .text{width: 100%;text-align: center;}
aside p{text-align: center; margin-top: 1em;}

/*-----------
footer
-----------*/
footer{border: none; margin-top: 100px;}
footer .logo_wrap a{margin-right: 0; max-width: 265px; width: 30%; line-height: 1;}
footer .logo_wrap{margin: 0 auto; justify-content: center;}
footer .copyright{text-align: center; margin-top: 1em;}


@media screen and (max-width: 1500px){
  /*-----------
  about
  -----------*/
  #about .img_a_01{left: -28px;}
  #about .img_a_02{left: -28px; top: 195px;}
  #about .img_a_03{right: -28px;}
  #about .img_a_04{right: -28px; top: 195px;} 
}

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

  section,aside{width:95%; margin: 150px auto 0;}
  section:first-of-type{margin-top: 50px;}
  section#about,
  section#event{width: 100%;max-width: 2560px; margin: 150px auto 0;}



  /*-----------
  about
  -----------*/
  #about .inner{width: 100%;}
  #about .text_area{width: 66%; margin: 0 auto;}
  #about h4{font-size: 2.5vw;}
  #about p{width: 98%;}
  #about .img{width: 15%;}
  #about .img_a_01{left: 1.5%;}
  #about .img_a_02{left: 1.5%;}
  #about .img_a_03{right: 1.5%;}
  #about .img_a_04{right: 1.5%;} 
}



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

  h3{font-size: 4em;}
  h5{font-size: 1.5em;}

  /*-----------
  header
  -----------*/
  header{height: 40px;}
  header.flex{padding-right: 1%;}
  header .menu_btn{display: block; width: 40px; height: 40px; padding: 5px;}
  header .menu_btn span{background: var(--color); width: calc(100% - 10px); left: 5px; height: 2px;}
  header .menu_btn span::after,
  header .menu_btn span::before{height: 2px;background: var(--color);}

  header .menu_right {display: none; position: fixed;right: 0;top: 40px;background: #fff;width: 100%;z-index: 11;}
  header .menu_right.is-visible {display: block !important;}
  header .menu_right.is-open {display: block;}
  header a.btn_event{height: 40px; padding: 10px 15px;}
  header a.btn_event::after{width: .3em; height: .3em; right: .8em;}
  header .language_btn,
  header .share_btn{display: none;}
  
  header .language_area, header .share_area{display: block; padding: 5px;position: relative; left: auto; top: auto; width: 100%;}
  header .share_area{padding: 10px 5px;}
  header .language:hover .language_area,
  header .share:hover .share_area{justify-items: center;}
  header .language_area li a{padding: 0 10px;}

  /*-----------
  mv
  -----------*/
  #mv{padding-top: 40px;}
  #mv .text_area{padding: 2% 0;}
  #mv .text_area h2{width: 70%; }
  #mv .text_area .lead{width: 60%; }
  
  /*event*/
  .event{position: relative;z-index: 100;}
  .event .event_box{width: 100%; padding: 3%;}
  .event .tokyo{background: var(--tokyo-base);}
  .event .osaka{background: var(--osaka-base);}


  /*-----------
  about
  -----------*/
  #about h4{font-size: 3vw;}
  #about .text_area{width: 100%;} 
  #about .img_wrap{display: flex; justify-content: center; gap: 20px; width: 95%; margin: 2em auto 0;align-items: flex-start;}
  #about .img{position: relative; width: calc((100% - 60px) / 4);}
  #about .img_a_01,
  #about .img_a_02,
  #about .img_a_03,
  #about .img_a_04{left: auto; top: auto; right: auto; bottom: auto;} 
  #about .img_a_02,
  #about .img_a_04{margin-top: 1em;}

  /*-----------
  event
  -----------*/
  #event p br{display: block;}
  #event .location{font-size: 5vw;}

  /*-----------
  aside
  -----------*/
  aside ul{width: calc((65px * 4) - 20px);}
  aside li{width: 45px;}

}

@media screen and (max-width: 600px){
  /*-----------
  about
  -----------*/
  #about h4{font-size: 1.5em;}

    
}