@charset "UTF-8";
/* CSS Document */

@media screen and (max-width:768px){
.sp{display:block;} 
.pc{display:none; } 

img{width:100%;}
	
body{font-size:calc(20/768*100vw);overflow-x: hidden;}
main{overflow-x: hidden;}
	

#sns::before{
  background:url("../images/bg-sp.jpg") center no-repeat;background-size: 100vw;width: 100vw;overflow-x: hidden;}

section{min-width:100vw;}

#kv{ z-index: 1;}
#kv h1{ top:calc(110/768*100vw); left: 50%; margin-left: calc(-300/768*100vw); z-index: 10; opacity: 0; width: calc(600/768*100vw);}
#kv h2{position: absolute; top:calc(270/768*100vw); left: 50%; margin-left: calc(-300/768*100vw); z-index: 10; opacity: 0; width: calc(600/768*100vw);}
#kv .logo-30th{top:calc(20/768*100vw); left: calc(20/768*100vw); z-index: 10; width: calc(110/768*100vw);}
#kv .logo-30th img{width:100%;}

#kv .update{height: calc(440/768*100vw); width:calc(440/768*100vw); z-index: 10; bottom: calc(170/768*100vw); right: calc(-20/768*100vw); opacity: 0;}
#kv .update p{font-size: calc(22/768*100vw); line-height:calc(32/768*100vw); padding-top: calc(15/768*100vw);}
#kv .update p:nth-child(1){padding-top: calc(160/768*100vw);  font-size: calc(26/768*100vw);}
#kv .update::before{position: absolute; top:0; left: 0; z-index: -1; content: ""; background:url("../images/bg.png") no-repeat center ; animation: rotate-anime 70s linear infinite; height:calc(440/768*100vw); width: calc(440/768*100vw); background-size:calc(440/768*100vw);}
#kv .update::after{top:calc(70/768*100vw); left: calc(60/768*100vw); height: calc(120/768*100vw); width: calc(180/768*100vw); background-size:calc(180/768*100vw) calc(120/768*100vw);}

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

#kv{min-width:100vw; position: relative;}

#kv .color{width:100vw; height:100vh; position: absolute; top:0; left: 0; opacity: 0;
background: linear-gradient(47deg, rgba(70,131,220,0.8) 15%, rgba(84,205,255,0.8) 50%, rgba(255,255,255,0.8) 72%) no-repeat 50% 50% / 100% 100%;
background: -moz-linear-gradient(47deg, rgba(70,131,220,0.8) 15%, rgba(84,205,255,0.8) 50%, rgba(255,255,255,0.8) 72%) no-repeat 50% 50% / 100% 100%;
background: -webkit-linear-gradient(47deg, rgba(70,131,220,0.8) 15%, rgba(84,205,255,0.8) 50%, rgba(255,255,255,0.8) 72%) no-repeat 50% 50% / 100% 100%;}

#kv::after{position: absolute; top:calc(540/768*100vw); left: 0;  z-index: 1; content: ""; background:url("../images/ship-sp.png") no-repeat center ;  height:calc(753/768*100vw); width: calc(768/768*100vw); background-size:calc(768/768*100vw) calc(753/768*100vw); margin-left: 0;
}
 
@keyframes float-anime {
  0% { transform: translateY(0) }
  33.33333% { transform: translateY(-10px) }
  66.66667% { transform: translateY(0) }
  100% { transform: translateY(0) }
}



section#kv .bg-image-loop { opacity: 0;
	width: 100%;
	height:calc(1450/768*100vw);
	position: relative;
	background: url("../images/kv-sp.jpg") repeat-x 0 0;
	background-size: auto 100vh;
	animation: bg-slider 120s linear infinite;
	margin-top: 0;
	padding: 0;
	z-index: -1;
	background-attachment: fixed;
}

@keyframes bg-slider {
	from { background-position: 0 0; }
    to { background-position: calc(-2085/768*100vw) 0; } 
}


ul.nav {display: flex; width: 100vw; flex-wrap: wrap; justify-content:center; z-index: 10; position: absolute; left: 50%; margin-left:calc(-385/768*100vw); top:calc(-95/768*100vw);  }
ul.nav li{margin: calc(-10/768*100vw); width: calc(370/768*100vw);}
ul.nav li a img{opacity: 0!important;}
ul.nav li a img.sp{opacity: 1!important;}

#main::before{position: absolute; top:calc(-442/768*100vw); background:url("../images/bg-top-sp.png") no-repeat center ; height:calc(442/768*100vw); width:100vw; background-size:100vw calc(442/768*100vw); min-width: 100vw;}
#main{position:relative; background:url("../images/bg-repeat.jpg") repeat top ; margin-top:0; border-bottom: 4px solid rgba(255,232,208,0.7); padding-bottom: calc(70/768*100vw); min-width: 100vw; background-size: 160vw;}
#main::after{position: absolute; bottom:calc(-190/768*100vw); left: calc(-480/768*100vw); margin-left:0; z-index: 3; content: ""; background:url("../images/kaji.png") no-repeat center ; animation: rotate-anime 70s linear infinite; height: calc(900/768*100vw); width: calc(900/768*100vw); background-size:calc(900/768*100vw) calc(900/768*100vw); }
#main ul.topics-list {display: flex; width: 100vw; flex-wrap: wrap; justify-content:center; z-index: 10; position: relative; margin: 0 auto; list-style: none; padding-top:calc(60/768*100vw);}
#main ul.topics-list li {width:calc(710/768*100vw); height: calc(329/768*100vw); margin: calc(5/768*100vw);}
#main ul.topics-list li.list-br{ margin: calc(5/768*100vw);}
#main ul.topics-list li img{top:calc(30/768*100vw); left: calc(40/768*100vw); width:calc(272/768*100vw); }
#main ul.topics-list li p.txt{top:calc(27/768*100vw); left:calc(330/768*100vw); width: calc(340/768*100vw); font-size: calc(20/768*100vw); line-height: calc(31/768*100vw); letter-spacing: inherit;}
#main ul.topics-list li p.data{ bottom:calc(52/768*100vw); right:calc(48/768*100vw);  font-size: calc(20/768*100vw);}
#main ul.topics-list li.new::after{top:calc(-20/768*100vw); left:calc(-10/768*100vw);  z-index: 1; content: ""; background:url("../images/new.png") no-repeat center ;  height: calc(110/768*100vw); width: calc(140/768*100vw); background-size:calc(140/768*100vw) calc(110/768*100vw);}

#main ul.topics-list li.btn2 {background: none;}
#main ul.topics-list li .title{margin-right: calc(10/768*100vw); padding: 0 calc(7/768*100vw);  letter-spacing: calc(1/768*100vw); font-size: calc(18/768*100vw); }
#main ul.topics-list li a {
    display: inline-block;
	background:url("../images/topics-bg.png") no-repeat center ; width: calc(710/768*100vw); height:calc(329/768*100vw); background-size: calc(710/768*100vw) calc(329/768*100vw); }


#main .water01{position: absolute; top: calc(100/768*100vw); left:calc(-1200/768*100vw); margin-left:0;  z-index: 2; }
#main .water02{position: absolute;  bottom: calc(300/768*100vw); right:calc(0/768*100vw); }
#main #close-btn{width:calc(600/768*100vw); margin: 0 auto; z-index: 10; position: relative; }
#main .topic-txt{text-align:center; margin: 0 calc(40/768*100vw) calc(5/768*100vw); padding-top:calc(25/768*100vw); z-index: 10; position: relative;}
#main .topic-txt:first-of-type{padding-top:calc(50/768*100vw); }

#sns ul.twitter{ width: 100vw; margin:calc(100/768*100vw) auto calc(50/768*100vw);}
#sns ul.twitter li{width:  calc(630/768*100vw); height: inherit;}
#sns ul.twitter li .inner{ background: #fff;}
#sns ul.twitter li:nth-of-type(n+2){margin-left: 0; margin-top: calc(40/768*100vw);}
#sns ul.twitter li img{width: 100%;}
#sns ul.twitter li ul{padding:calc(10/768*100vw) 0 calc(30/768*100vw);}
#sns ul.twitter li ul li{width:calc(125/768*100vw); height: auto; border: none; }
#sns ul.twitter li ul li:nth-of-type(n+2){margin-left:calc(15/768*100vw); margin-top: 0;}
#sns dl {display: flex; flex-wrap: wrap; justify-content:center; padding-bottom: calc(50/768*100vw); }
#sns ul.twitter li ul.download { padding:0 0 calc(30/768*100vw) 0; }
#sns ul.twitter li ul.download li{width:calc(279/768*100vw); border: none;}
#sns ul.twitter li ul.download li:nth-of-type(n+2){margin-left:calc(20/768*100vw);}
#sns ul.twitter li ul.download li.ps4{width:calc(220/768*100vw); }
#sns ul.twitter li .timeline{height:calc(650/768*100vw);}
#sns ul.twitter li .timeline iframe{height:calc(650/768*100vw)!important;}
#sns dl img{width: 100%;}
#sns dl dd {margin-left: calc(20/768*100vw); width: calc(118/768*100vw);margin-top: calc(-17/768*100vw);}
#sns dl dd + dd{margin-left: calc(-10/768*100vw);}
#sns dl dt {width: calc(330/768*100vw);}

	

#history {min-width:100vw;}
#history #main .chronology{width: calc(650/768*100vw); margin: calc(60/768*100vw) auto; box-shadow: 0 0 calc(40/768*100vw) calc(40/768*100vw) rgba(0,0,0,0.4); }
#history #main .chronology::before{height: 100%; left: 0; width:calc(210/768*100vw);}
#history #main .chronology ul li{padding: calc(30/768*100vw) 0 calc(40/768*100vw);}
#history #main .chronology ul li p{font-size:calc(40/768*100vw); }
#history #main .chronology ul li p.year{font-size:calc(80/768*100vw); width: calc(205/768*100vw);}
#history #main .chronology ul li p.no-year{height:  calc(80/768*100vw); width: calc(205/768*100vw);}
#history #main .chronology ul li p.day{display: flex;align-items: center; padding-right:  calc(303/768*100vw);}
#history #main .chronology ul li p.day::before{border-top: 1px solid;content: "";flex-grow: 1; width:calc(40/768*100vw); margin-right:calc(10/768*100vw);}
#history #main .chronology ul li img{ margin-bottom: 20px;}
#history #main .chronology ul li a{position: relative; height: calc(125/768*100vw); width:calc(340/768*100vw); margin-left:calc(220/768*100vw); }
#history #main .chronology ul li a::after{ height: calc(39/768*100vw); width:calc(39/768*100vw); background-size:calc(39/768*100vw);}

#history .chara-bg {background: none;}
	
	
#banner  {padding: calc(80/768*100vw) 0;}
#banner ul {display: flex;  flex-wrap: wrap; justify-content:center; margin: 0 auto;}
#banner ul li:nth-of-type(n+2){margin-left:calc(70/768*100vw);}
#banner ul li{margin:calc(20/768*100vw) calc(70/768*100vw) ;}

footer { padding: calc(50/768*100vw) 0; min-width:100vw;}
footer ul {display: flex; flex-wrap: wrap; justify-content:center; margin: 0 auto calc(10/768*100vw);}
footer ul li{width:calc(171/768*100vw);}
footer ul li:nth-of-type(n+2){margin-left: calc(30/768*100vw);}
footer p{font-size: calc(15/768*100vw); text-align: center; margin-top: calc(30/768*100vw); line-height:calc(27/768*100vw); }
footer .rights_mark {height: calc(15/768*100vw) ; width: auto;}
	
.fadein{opacity:0;}

@media screen and (min-width:1921px){
	#main::before{background-size: 100% 714px; width: 100%; left: 0; margin-left: 0;}

}


/*ローディング*/
.loader-wrap {
	position: fixed;
	display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
background: #256ab0;
	z-index: 1000;
}
.loader {
  color: #ffffff;
  font-size: 20px;
  margin: 100px auto;
  width: 1em;
  height: 1em;
  border-radius: 50%;
  position: relative;
  text-indent: -9999em;
  -webkit-animation: load4 1.3s infinite linear;
  animation: load4 1.3s infinite linear;
  -webkit-transform: translateZ(0);
  -ms-transform: translateZ(0);
  transform: translateZ(0);
}
@-webkit-keyframes load4 {
  0%,
  100% {
    box-shadow: 0 -3em 0 0.2em, 2em -2em 0 0em, 3em 0 0 -1em, 2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 -1em, -3em 0 0 -1em, -2em -2em 0 0;
  }
  12.5% {
    box-shadow: 0 -3em 0 0, 2em -2em 0 0.2em, 3em 0 0 0, 2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 -1em, -3em 0 0 -1em, -2em -2em 0 -1em;
  }
  25% {
    box-shadow: 0 -3em 0 -0.5em, 2em -2em 0 0, 3em 0 0 0.2em, 2em 2em 0 0, 0 3em 0 -1em, -2em 2em 0 -1em, -3em 0 0 -1em, -2em -2em 0 -1em;
  }
  37.5% {
    box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em, 3em 0em 0 0, 2em 2em 0 0.2em, 0 3em 0 0em, -2em 2em 0 -1em, -3em 0em 0 -1em, -2em -2em 0 -1em;
  }
  50% {
    box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em, 3em 0 0 -1em, 2em 2em 0 0em, 0 3em 0 0.2em, -2em 2em 0 0, -3em 0em 0 -1em, -2em -2em 0 -1em;
  }
  62.5% {
    box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em, 3em 0 0 -1em, 2em 2em 0 -1em, 0 3em 0 0, -2em 2em 0 0.2em, -3em 0 0 0, -2em -2em 0 -1em;
  }
  75% {
    box-shadow: 0em -3em 0 -1em, 2em -2em 0 -1em, 3em 0em 0 -1em, 2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 0, -3em 0em 0 0.2em, -2em -2em 0 0;
  }
  87.5% {
    box-shadow: 0em -3em 0 0, 2em -2em 0 -1em, 3em 0 0 -1em, 2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 0, -3em 0em 0 0, -2em -2em 0 0.2em;
  }
}
@keyframes load4 {
  0%,
  100% {
    box-shadow: 0 -3em 0 0.2em, 2em -2em 0 0em, 3em 0 0 -1em, 2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 -1em, -3em 0 0 -1em, -2em -2em 0 0;
  }
  12.5% {
    box-shadow: 0 -3em 0 0, 2em -2em 0 0.2em, 3em 0 0 0, 2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 -1em, -3em 0 0 -1em, -2em -2em 0 -1em;
  }
  25% {
    box-shadow: 0 -3em 0 -0.5em, 2em -2em 0 0, 3em 0 0 0.2em, 2em 2em 0 0, 0 3em 0 -1em, -2em 2em 0 -1em, -3em 0 0 -1em, -2em -2em 0 -1em;
  }
  37.5% {
    box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em, 3em 0em 0 0, 2em 2em 0 0.2em, 0 3em 0 0em, -2em 2em 0 -1em, -3em 0em 0 -1em, -2em -2em 0 -1em;
  }
  50% {
    box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em, 3em 0 0 -1em, 2em 2em 0 0em, 0 3em 0 0.2em, -2em 2em 0 0, -3em 0em 0 -1em, -2em -2em 0 -1em;
  }
  62.5% {
    box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em, 3em 0 0 -1em, 2em 2em 0 -1em, 0 3em 0 0, -2em 2em 0 0.2em, -3em 0 0 0, -2em -2em 0 -1em;
  }
  75% {
    box-shadow: 0em -3em 0 -1em, 2em -2em 0 -1em, 3em 0em 0 -1em, 2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 0, -3em 0em 0 0.2em, -2em -2em 0 0;
  }
  87.5% {
    box-shadow: 0em -3em 0 0, 2em -2em 0 -1em, 3em 0 0 -1em, 2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 0, -3em 0em 0 0, -2em -2em 0 0.2em;
  }
}

	
	
	
	
	
	
	
}