body{
  background: url('../img/index/first/first_bg.png') center / cover;
  background-attachment: fixed;
}

#index .btn_area{
  width:100%; display: flex;justify-content: center;
}

#index #first_view {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

#index #first_view .glitch{
  width: 100%;
  height: 100px;
  position: absolute;
  bottom: 0;
  left: 0;
  background: url("../img/index/first/glitch_bg.png") repeat-x 30px 101%/ 1920px auto;
}

.bubble {
  position: fixed;
  opacity: 0.5;
}


.particle {
  position: fixed;
  border-radius: 50%;
  opacity: 0;
  background-color: #fff;
  box-shadow: 0 0 10px 5px;
  z-index:5;
}

.dot-outside {
  border-radius: 2px;
/*  background-color: #fff!important;*/
/*  transform:scale(0.5)!important;*/
  box-shadow: none!important;
}

#video-area{
    position: fixed;
    z-index: -1;/*最背面に設定*/
    top: 0;
    right:0;
    left:0;
    bottom:0;
    overflow: hidden;
}

#video {
    /*天地中央配置*/
    position: absolute;
    z-index: -1;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    /*縦横幅指定*/
    width: 177.77777778vh; /* 16:9 の幅→16 ÷ 9＝ 177.77% */
    height: 56.25vw; /* 16:9の幅 → 9 ÷ 16 = 56.25% */
    min-height: 100%;
    min-width: 100%;
}



/* ------------------------ button -------------------------- */
 .news_button{
  background-image: url(../img/partials/nav/news.png)!important;
  background-size: 36px;
  background-position: 95% 50%;
}
.member_button{
  background-image: url(../img/partials/nav/member.png)!important;
  background-size: 36px;
  background-position: 95% 50%;
}
.world_button{
  background-image: url(../img/partials/nav/world.png)!important;
  background-size: 36px;
  background-position: 95% 50%;
}


/* ------------------------ first_view -------------------------- */

#index h2 {
  font-size: 50px;
  color:#333;
  padding: 16px 0px 8px;
  font-weight: bold;
  font-family: dot;
  background:url('../img/index/flag.png') no-repeat center/ auto 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  filter: drop-shadow(2px 4px 0px #666);
  letter-spacing: 0.06em;
}

#index h2 span{
  font-size: 14px;
  display: block;
  margin: 6px auto -8px;
  letter-spacing: 0.3em;
  color: #222222;
}

#index .head_area{
  text-align: center;
  color: #fff;
}

#index .head_area h3{
  font-family: dot;
  font-size: 4.2em;
  margin-bottom:0;
  display: flex;
  align-items: center;
  justify-content: center;
}

#index .head_area h3:before{
  content:"";
  background: url(../img/partials/dot_star.png) no-repeat left top / 20px;
  display: block;
  width: 20px;
  height: 50px;
  margin-right:10px;
}

#index .head_area h3:after{
  content:"";
  background: url(../img/partials/dot_star.png) no-repeat left bottom / 20px;
  display: block;
  width: 20px;
  height: 50px;
  margin-left:0px;
}

#index .head_area h3 + span{
  font-size: 14px;
  margin-top: -10px;
  font-family: 'M PLUS 1p', sans-serif;
  font-family: 'Poppins', sans-serif;
  display: block;
  font-weight: bold;
  letter-spacing: 3px;
}

#index #first_view *{
/*  font-family: "Noto Sans JP"; */
  font-weight: 200;
}

#index #first_view{
  width:100%;
  height:150vh;
  position: relative;
/*  background-image: url("../img/index/first/first_bg_line.png"),url("../img/index/first/first_bg.png");*/
  background-size:cover;
  overflow: hidden;
  background-attachment: fixed;
}

#index #first_view ul.nav{
  position: absolute;
  right: 3vw;
  top:3vh;
  z-index: 100;
}

#index #first_view ul.nav li{
  margin-right:20px;
}

#index #first_view ul.nav li a{
  text-decoration: none;
  color:#fff;
  font-size: 18px;
  letter-spacing: 2px;
}

#index #first_view .bg_mask{
  background-image: url("../img/index/pattern.png");
  position: absolute;
  top:0;
  left:0;
  width:100%;
  height:100vh;
  background-size: 10px;
  opacity: 0.4;
}

#index #first_view .first_particles{
  position: absolute;
  top:0;
  left:0;
  width:100%;
  height:100vh;
  z-index: 2;
}

#index #first_view .image{
  position: absolute;
  justify-content: center;
  align-content: center;
  width: 100%;
  top:80px;
  right:10px;
  z-index: 10;
}

#index #first_view .logo{
  width: 480px;
  position: absolute;
  left: 2vw;
  top: 4vh;
}

#index #first_view .member{
  position: absolute;
  right: 4vw;
  height:120vh;
  top: 2vh;
  animation: float 4s ease-in-out infinite;
}

@keyframes float {
  0% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-10px);
  }
  100% {
    transform: translateY(0);
  }
}

#index #first_view .text{
  position: absolute;
  right:2vw;
  top:15vh;
}

#index #first_view .left_box{
  position: absolute;
  display: flex;
  flex-direction: column;
  left: 0vh;
  bottom: 55vh;
  z-index: 50;
}

#index #first_view .left_box .banner{
  margin-bottom:16px;
  margin-left:3vw;
  width: 200px;
}

#index #first_view .left_box .banner img{
  width: 100%;
}

#index #first_view .left_box .news_box{
  padding: 12px 20px;
  background:rgba(0,0,0,0.5);
}

#index #first_view .left_box ul.news_box{

}

#index #first_view .left_box ul.news_box li{
  border-bottom:#fff dotted 1px;
}

#index #first_view .left_box ul.news_box li:last-child{
  border-bottom:0;
}

#index #first_view .left_box ul.news_box li p{
  margin-bottom:0;
  width: 450px; /* 省略せずに表示するサイズを指定 */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

#index #first_view .left_box ul.news_box li a{
  text-decoration: none;
  color:#fff;
  font-size:14px;
  display: flex;
  padding:6px 0;
  letter-spacing: 1px;
}

#index #first_view .left_box ul.news_box li a span{
  margin-right:12px;
}

/* ------------------------ news_view -------------------------- */

#index #news{
  margin-top:-80px;
  padding:80px 0 160px;
  overflow: hidden;
  background:
    url(../img/index/bg/sky_border.png) repeat-x bottom / 900px,
    url(../img/index/news/shark.png) no-repeat calc(50% + -850px) calc(50% + -210px) / 530px,
    url(../img/index/news/float_island.png) no-repeat calc(50% + -680px) calc(50% + 180px) / 320px,
    url(../img/index/news/observatory.png) no-repeat calc(50% + 670px) calc(100% - 130px) / 380px,
    url(../img/index/news/heaven.png) no-repeat calc(50% + 850px) calc(50% + -250px)/ 610px,
    #41C2E5;
}

#index #news .news_slider{
  width:100%;
  margin-bottom:40px;
  padding:0;
}

/* #index #news .news_slider .slider_item{padding:0 10px;} */
#index #news .news_slider .slider_item .card{
/*  border:2px solid #222;*/
  border-radius:0;
  box-shadow:
    2px 0 #3c3c3c,
    -2px 0 #3c3c3c,
    0 2px #3c3c3c,
    0 -2px #3c3c3c;
}
#index #news .news_slider .slider_item a{text-decoration:none;}
#index #news .news_slider .slider_item img {width:100%;}
#index #news .news_slider .slider_item p{color:#222; font-size:15px; margin-bottom:0; font-weight: bold;}
#index #news .news_slider .slider_item span{color:#838383; font-size:14px; margin-bottom:0; font-weight: bold;text-align: right; display: block;}
#index #news .news_slider .slick-slide {transform: scale(0.9);transition:0.3s;}
#index #news .news_slider .slick-slide.slick-active {transform: scale(0.9);}
#index #news .news_slider .slick-current+.slick-active {transform: scale(0.98);}
#index #news .news_slider .slick-center {transform: scale(0.98);}
#index #news .news_slider .slick-next{z-index:3;right:0%;font-size: 34px!important;width: 34px;height: 34px;}
#index #news .news_slider .slick-next:before{font-size: 34px!important;color:#060606;}
#index #news .news_slider .slick-prev{z-index:3;left:0%;font-size: 34px!important;width: 34px;height: 34px;}
#index #news .news_slider .slick-prev:before{font-size: 34px!important;color:#060606;}
#index #news .slick-dots{bottom:-30px;}

.slick-dots li
,.slick-dots li button{
  width: auto!important;
}

.slick-dots li button::before{
  content:""!important;
  background: #222;
  width: 4px!important;
  height: 4px!important;
  box-shadow:
    2px 0 #222,
    -2px 0 #222,
    0 2px #222,
    0 -2px #222;
}

#index #news .news_slider .slick-next:before,
#index #news .news_slider .slick-prev:before{
  content:""!important;
  background:url("../img/partials/arrow.png") no-repeat calc(50% + 1px) / 36% auto,#333;
  width: 26px;
  height: 26px;
  border-radius:4px;
  display: block;
}
#index #news .news_slider .slick-prev:before{
  transform:rotate(180deg);
}

#index #news .news_box{
  max-width: 740px;
  width: 100%;
/*  padding: 18px 40px 30px;*/
  margin: 0 auto;
/*  background: rgb(255 255 255 / 60%);*/
  border-radius: 6px;
}
#index #news .news_box ul.news_list{
  width: 99%;
  margin: 0 auto;
}
#index #news .news_box ul.news_list li{
  background:#fff;
  overflow: hidden;
  display: flex;
  box-shadow:
    2px 0 #333,
    -2px 0 #333,
    0 2px #333,
    0 -2px #333;
/*  box-shadow:
    2px 0 #478c9f,
    -2px 0 #478c9f,
    0 2px #478c9f,
    0 -2px #478c9f;
*/
}
#index #news .news_box ul.news_list li a{
  text-decoration:none;
}

#index #news .news_box ul.news_list li .news_tag{
  font-size:12px;
  color:#ffffff;
  background-color:#333;
  align-self: stretch;
  align-items: center;
  padding:12px;
  display: flex;
}

#index #news .news_box ul.news_list li .news_title {
  position: relative;
  display: inline-block;
  padding-left: 20px;
  color: #333;
  text-decoration: none;
}
#index #news .news_box ul.news_list li .news_title:before {
  content: '';
  width: 6px;
  height: 6px;
  border: 0;
  border-top: solid 2px #333;
  border-right: solid 2px #333;
  position: absolute;
  top: 50%;
  right: 10px;
  margin-top: -4px;
  transform: rotate(45deg);
}

#index #news .news_box ul.news_list li .news_tag .date{
  font-weight: bold;
}
#index #news .news_box ul.news_list li .news_tag .category{
  margin-left: 10px;
  padding: 1px 6px;
  background: #fc9d52;
  border-radius: 4px;
  font-size:11px;
  color: #3d354e;
  font-weight: bold;
}
#index #news .news_box ul.news_list li .news_title{
  color:#4f4f4f;
  display: flex;
  align-items: center;
  margin-left: -100px;
  width: 100%;
  padding-left: 100px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
#index #news .news_box ul.news_list li .news_title a{
  color:#4f4f4f;
  align-items: center;
  font-size: 14px;
  margin-left:10px;

/*  width: 450px;  省略せずに表示するサイズを指定 */
  width: 95%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}



/* ------------------------ first_view -------------------------- */

/* ------------------------ sky_section_view -------------------------- */
#index #sky_section{
  background: url("../img/index/bg/tower_all.png") no-repeat calc(50% + 880px) calc(100% + -100px)/ 770px;
  background-color: #93e2ee;
}

/* ------------------------ about_view -------------------------- */
#index #about p{
  text-align: center;
  font-size: 26px;
  font-weight: bold;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  font-family: 'M PLUS 1p', sans-serif;
  font-family: 'Poppins', sans-serif;
}

#index #about .wrapper{
/*  max-width:1000px;*/
}

#index #about .row{
  background: url(../img/index/about/text_bg.png) no-repeat;
  background-size: 100% 100%;
  padding: 30px 60px 30px 0px;
  max-width:1100px;
  margin:0px auto;
  filter: drop-shadow(0px 6px 0px #0000002e);
}

#index #about .youtube{
  width: 100%;
  aspect-ratio: 16 / 9;
  border: 9px solid #fff;
  transform: rotate(4deg);
  filter: drop-shadow(2px 6px 0px #0000002e);
}

#index #about .youtube iframe{
  width: 100%;
  height: 100%;
}


/* ------------------------ member_view -------------------------- */

#index #member{
  /* background: url("../img/index/bg/ground_border01.png") repeat-x #93e2ee; */
}
#index .member_bg .wrapper{
  overflow: initial;
}
#index #member .member_bg{
  height: 370px;
  display: flex;
  align-items: flex-end;
  background: url("../img/index/member/index_member_bg02.png") repeat-x bottom;
  background-position: 0 100%;
  background-size: 4808px auto;
  animation: scroll 300s linear infinite;
}
@keyframes scroll {
  0% {
    background-position: 0px bottom;
  }
  100% {
    background-position: 9616px bottom;
  }
}
#index #member ul{
  width: 100%;
  max-width: 900px;
  margin:0 auto;
  display: flex;
  justify-content: space-evenly;
  align-items: flex-end;
}

#index #member ul li{
  width: 100%;
}

#index #member ul li a img{
  width: 100%;
  max-width: 120px;
  display: inline-block;
  vertical-align: middle;
  transition: transform 0.2s;
}

#index #member ul li a img:hover{
  animation: jump-animation 0.5s linear infinite;
}

@keyframes jump-animation {
    0%, 100% {
        transform: translateY(0);
    }
    20% {
        transform: translateY(-5px);
    }
    40% {
        transform: translateY(0px);
    }
}

#index #member .btn_area{
  background-repeat: repeat-x;
  background-image:url('../img/index/bg/ground_border02.png');
  background-color:#c0f25c;
  padding-top:20px;
}

#index #member .btn_area a{
  margin:0 10px;
}

/* ------------------------ goods_view -------------------------- */

#index #goods{
  padding:50px 0 80px;
  background: url("../img/index/bg/ground_border03.png") repeat-x top / 50%,
              url("../img/index/bg/ground/01.png") repeat-x 0 100.1% / 100%,
              #a0e249;
}

#index #goods .menu{
  width: 100%;
  max-width: 900px;
  margin: 0 auto;
}

#index #goods .menu .category{
  display: block; 
  font-size:12px;
  color:#898989;
}

#index #goods .menu .name{
  font-size: 14px;
  display: block;
  color:#363636;
  font-weight: bold;
}

#index .goods_slider{
  width:100%;
  max-width: 1600px;
  margin: 0 auto;
  overflow: hidden;
}

#index .goods_slider .slider_item{padding:0 10px;} 
/*#index .goods_slider .slider_item .card{border:2px solid #222;}*/
#index .goods_slider .slider_item .goods_item{
  box-shadow:
    3px 0 #21301a,
    -3px 0 #21301a,
    0 3px #21301a,
    0 -3px #21301a;
  transform:scale(0.98);
  background: #fff;
}

#index .goods_slider .slider_item .goods_item .category{
  display: block;
  font-size: 14px;
  margin-bottom:0.4em;
}

#index .goods_slider .slider_item .goods_item .name{
  font-size: 16px;
  font-weight: bold;
  display: block;
  line-height: 1em;
}

#index .goods_slider .slider_item a{
  color:#222;
  text-decoration:none;
}
#index .goods_slider .slider_item img {width:100%;}
#index .goods_slider .slick-next{z-index:3;right:0%;font-size: 34px!important;width: 34px;height: 34px;}
#index .goods_slider .slick-next:before{font-size: 34px!important;color:#060606;}
#index .goods_slider .slick-prev{z-index:3;left:0%;font-size: 34px!important;width: 34px;height: 34px;}
#index .goods_slider .slick-prev:before{font-size: 34px!important;color:#060606;}
#index #goods .slick-dots{bottom:-30px;}

#index .goods_slider .slick-disabled{
  display: none!important;
}

#index .goods_slider .slick-next:before,
#index .goods_slider .slick-prev:before{
  content:""!important;
  background: url(../img/partials/arrow.png) no-repeat calc(50% - -1px) / 36% auto,#333;
  width: 26px;
  height: 26px;
  border-radius:4px;
  display: block;
}
#index .goods_slider .slick-prev:before{
  transform:rotate(180deg);
}


/* ------------------------ special_view -------------------------- */

#index #special{
/*  padding:50px 0;*/
  background:
  url('../img/index/bg/ground/bottom.png') no-repeat bottom / 100%,
  url('../img/index/bg/ground/pattern.png') repeat top,
  #3e1806;
}

#index #special .menu{
  width: 100%;
  max-width:1080px;
  margin:0 auto;
}



/* ------------------------ content_view -------------------------- */

#index #content{
  padding:50px 0;
  background: #a0e249;
  background-image:url('../img/index/bg/ground/03.png');
  background-repeat:repeat-x;
  background-position: 0 0%;
}

/* ------------------------ twitter_view -------------------------- */

#index #twitter{
  padding:120px 0 50px;
  background:url("../img/index/bg/ocean_border.png") repeat-x top;
  background-color: #345ed8; 
}

#index #twitter .twitter_wrap{
  display: flex;
  justify-content: space-around;
  max-width:1000px;
  width:100%;
  margin:0 auto;
}

#index #twitter .wrapper .twitbox{
  width:45%;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

#index #twitter .wrapper .twitbox .twitter_link{
  display: flex;
  margin-top:10px;
}

#index #twitter .wrapper .twitbox .twitter_link img{
  width:100%;
  height:auto;
}

/* ------------------------ find_view -------------------------- */

/* ------------------------ underground_view -------------------------- */
.underground{
  background: 
  url('../img/index/bg/underground/01.png') no-repeat bottom / 100%,
  url('../img/index/bg/ground/03.png') no-repeat top / 100%,
  #030100;
/*  padding: 500px 0;*/
  height: 150vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

.object_box{
}

#message_box {
/*  position: absolute;*/
  bottom: 20px;
  left: 20px;
  padding: 10px 20px;
  font-family: 'dot', sans-serif;
  font-family: 'DotGothic16', sans-serif;
  font-size: 18px;
  color: #ffffff;
  text-align: center;
}

#message {
  display: inline-block;
  min-width: 300px;
  min-height: 20px;
  line-height: 20px;
  letter-spacing: 0.1em;
}

@keyframes grow {
  0%, 100% {
    font-size: 1em;
  }
  50% {
    font-size: 1.5em;
  }
}

.underground img{
  width: 200px;
  display: block;
  margin: 0 auto;

  animation-name: tick;
  animation-duration: 120s;
  animation-timing-function: steps(60);
  animation-iteration-count: infinite;
}

@keyframes tick {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

.area404{
  background:
    url("../img/index/area404/left.png")  no-repeat calc(50% + -1136px) -2px / auto 100%,
    url("../img/index/area404/right.png") no-repeat calc(50% + 1130px) -2px / auto 100%,
    #141414;
}

.area404 video{
  width: 100%;
  max-width: 1980px;
  margin:  auto ;
  display: block;
}

/* PC用のCSSはメディアクエリの外に記述する */

@media screen and (max-width: 959px) {
  /* 959px以下に適用されるCSS（タブレット用） */
  #index #news{
    padding-bottom: 100px;
    background: url(../img/index/bg/sky_border.png) repeat-x 0 100.1% / 450px, url(../img/index/news/shark.png) no-repeat calc(50% + -370px) 90px / 280px, url(../img/index/news/float_island.png) no-repeat calc(50% + -290px) 620px / 135px, url(../img/index/news/observatory.png) no-repeat calc(50% + 310px) calc(100% - 60px) / 150px, url(../img/index/news/heaven.png) no-repeat calc(50% + 359px) 90px/ 190px, #41c2e5;
  }
  #index #news .news_box{
    max-width: 590px;
  }
  #index #first_view ul.nav{
    right: 1vw;
    top:4vh;
  }
  #index #first_view ul.nav li a{
    font-size: 16px;
  }
  #index #first_view .member{
    height: 90vh;
    top: 14vh;
    right:1vw;
  }
  #index #first_view .logo{
    width: 300px;
    z-index: 1;
  }
  #index #first_view .text{
    top: 10vh;
  }
}
@media screen and (max-width: 480px) {
  /* 480px以下に適用されるCSS（スマホ用） */
  #index #first_view .logo{
    width: 90%;
    margin: auto;
    left: 0;
    right: 0;
  }
  #index #first_view ul.nav{
    display: none;
  }
  #index #first_view .member{
    height: auto;
    width: 130%;
    right: -25%;
/*    left: 10%;*/
    top: 33vh;
    z-index: 1;
    margin: auto;
  }
  #index #first_view .left_box{
    display: none;
  }
  #index h2{
    font-size:30px;
  }
  #index #sky_section{
    background: url(../img/index/bg/tower_all.png) no-repeat calc(50% + 170px) calc(100% + -77px)/ 320px,#93e2ee;
  }
  #index #news{
    padding-bottom:80px;
    background:
      url(../img/index/bg/sky_border.png) repeat-x 0 100.1% / 450px,
      url(../img/index/news/shark.png) no-repeat calc(50% + -170px) 110px / 200px,
      url(../img/index/news/float_island.png) no-repeat calc(50% + -170px) 620px / 130px,
      url(../img/index/news/observatory.png) no-repeat calc(50% + 160px) calc(100% - 50px) / 130px,
      url(../img/index/news/heaven.png) no-repeat calc(50% + 169px) 110px/ 160px,
      #41c2e5;
  }

  #news .slider_item .card-body{
    padding: 10px;
  }

  #index #news .news_box ul.news_list li .news_tag{
    padding: 8px 12px 9px 6px;
  }
  #index #news .news_box ul.news_list li .news_title{
    margin-left:-50px;
    padding-left:50px;
  }
  #index #news .news_box ul.news_list li .news_title a{
    font-size:12px;
    width: 90%;
  }
  #index #about .row{
    padding: 10px;
  }
  #index #about p{
    font-size: 14px;
  }
  .youtube{
    display: none;
  }

  #index #member .member_bg{
    height: 185px;
    display: flex;
    align-items: flex-end;
    background: url("../img/index/member/index_member_bg02.png") repeat-x bottom;
    background-position: 0 100%;
    background-size: 2404px auto;
    animation: scroll 180s linear infinite;
  }
  @keyframes scroll {
    0% {
      background-position: 0 bottom;
    }
    100% {
      background-position: 4808px bottom;
    }
  }

  #index #goods{
    background:
      url(../img/index/bg/ground_border03.png) repeat-x top / 200%,
      url(../img/index/bg/ground/01.png) repeat-x bottom / 400%, #a0e249;
  }
  #index #special {
    background:
      url(../img/index/bg/ground/bottom.png) no-repeat bottom / 400%,
      url(../img/index/bg/ground/pattern.png) repeat top / 400%,
      #3e1806;
  }
  .underground {
    height:120vh;
    background:
      url(../img/index/bg/underground/01.png) no-repeat bottom / 400%,
      url(../img/index/bg/ground/03.png) no-repeat top / 400%,
      #030100;
  }
  .underground img{
    width: 130px;
  }


  #index .head_area h3{
    font-size: 36px;
  }
  #index .head_area h3:before,#index .head_area h3:after{
    background-size: 12px;
    margin-right:5px;
    width: 12px;
  }
  #index .head_area h3 + span{
    font-size: 12px;
    margin-top: -12px;
  }

  #index .goods_item .card-body{
    padding: 6px 8px;
  }
  #index .goods_slider .slider_item .goods_item .category{
    font-size: 12px;
    margin-bottom: 0.3em;
  }
  #index .goods_slider .slider_item .goods_item .name{
    font-size:14px;
  }

  /* common */
  .button p{
    font-size:22px;
  }
}