@charset "UTF-8";
/* CSS Document */
ul{list-style:none;}
main #kv{overflow:hidden;}
main p,li,dt,dd{font-family: 'Noto Sans JP', sans-serif;}
main a{color: #000;}
.sp{display:none;} 

.btn a {transition: opacity 0.3s ease-out;}
.btn a:hover { opacity: 0.7;}

#sns::before{
  content:"";
  display:block;
  position:fixed;
  top:0;
  left:0;
  z-index:-2;
  width:100%;
  height:100vh;
  background:url("../images/bg.jpg") center bottom no-repeat;
  background-size:cover;
}



section{min-width:1280px;}

#kv h1{position: absolute; top:100px; left: 50%; margin-left: -585px; z-index: 10; opacity: 0;}
#kv h2{position: absolute; top:275px; left: 50%; margin-left: -580px; z-index: 10; opacity: 0;}
#kv .logo-30th{position: absolute; top:20px; left: 20px; z-index: 10;}

#kv .update{position:absolute; height: 335px; width: 335px; z-index: 10; bottom: 250px; right: 50px; opacity: 0;}
#kv .update p{text-align: center; color: #fff; font-size: 16px; line-height: 23px; padding-top: 10px;}
#kv .update p:nth-child(1){padding-top: 125px; color: #f7cb3b;font-family:'EB Garamond', serif; letter-spacing: 1px; font-size: 18px;}
#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: 335px; width: 335px; background-size:335px;}
#kv .update::after{position: absolute; top:60px; left: 40px;  z-index: 1; content: ""; background:url("../images/update.png") no-repeat center ;  height: 95px; width: 153px; background-size:153px 95px;}
#kv .update a{color: #fff;}

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

#kv{min-width:1280px; position: relative;}

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

#kv::after{position: absolute; top:-30px; left: 50%;  z-index: 1; content: ""; background:url("../images/ship.png") no-repeat center ;  height: 996px; width: 1433px; background-size:1433px 996px;
  animation: float-anime 3s linear infinite;
  transform-origin: 50% 50%;
 margin-left: -90px;
}
 
@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: 1060px;
	position: relative;
	background: url("../images/kv.jpg") repeat-x 0 0;
	background-size: 2522px 858px;
	animation: bg-slider 120s linear infinite;
	margin-top: -40px;
	padding: 0;
	z-index: 0;
	background-attachment: fixed;
}

@keyframes bg-slider {
	from { background-position: 0 0; }
    to { background-position: -2522px 0; } 
}


ul.nav {display: flex; width: 1280px; flex-wrap: wrap; justify-content:center; z-index: 10; position: absolute; left: 50%; margin-left:-640px; top:-140px;  }
ul.nav li{margin: -10px;}

#main::before{position: absolute; top:-714px;  right: 0; z-index: 1; content: ""; background:url("../images/bg-top.png") no-repeat center ; height: 714px; width: 1920px; background-size:1920px 714px; min-width: 1280px;}
#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: 70px; min-width: 1280px; }
#main::after{position: absolute; bottom:-280px; left: 50%; margin-left: -1340px; z-index: 3; content: ""; background:url("../images/kaji.png") no-repeat center ; animation: rotate-anime 70s linear infinite; height: 1121px; width: 1114px; background-size:1114px 1121px; }
#main ul.topics-list {display: flex; width: 1280px; flex-wrap: wrap; justify-content:center; z-index: 10; position: relative; margin: 0 auto; list-style: none; padding-top: 30px;}
#main ul.topics-list li {position:relative; width: 604px; height: 296px; margin: 5px;}
#main ul.topics-list li.list-br{ margin: 5px 40px;}
#main ul.topics-list li img{position:absolute; top:28px; left: 34px; width:253px;}
#main ul.topics-list li p.txt{position:absolute; top:25px; left: 310px; width: 260px; font-size: 16px; line-height: 27px;}
#main ul.topics-list li p.txt strong{color: #c7391b;}
#main ul.topics-list li p.data{position:absolute; bottom:47px; right: 45px; color: #fff;font-family: 'EB Garamond', serif; letter-spacing: 1px; font-size: 18px; }
#main ul.topics-list li .title{margin-right: 10px; padding: 0 7px; color: #fff; background: #0d4a8d; letter-spacing: 1px; font-size: 14px; }
#main ul.topics-list li.new::after{position: absolute; top:-22px; left: -15px;  z-index: 1; content: ""; background:url("../images/new.png") no-repeat center ;  height: 100px; width: 130px; background-size:130px 100px;}

#main ul.topics-list li.btn2 {background: none;}
#main ul.topics-list li a {
    display: inline-block;
	background:url("../images/topics-bg.png") no-repeat center ; width: 604px; height: 296px; background-size: 604px 296px; 
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-transition: all .3s;
    transition: all .3s;}

#main ul.topics-list li a:hover {
    opacity: 1.0;
    -webkit-transform: translateY(-10px);
    -ms-transform: translateY(-10px);
    transform: translateY(-10px);}

#main .water01{position: absolute; top: -370px; left:50%; margin-left: -1340px;  z-index: 2; }
#main .water02{position: absolute;  bottom: -190px; right:0; }
#main #close-btn{text-align: center; }
#main #close-btn{text-align: center; }
#main .topic-txt{text-align:center; margin: 30px; z-index: 10; position: relative;}


#sns ul.twitter{display: flex; flex-wrap: wrap; justify-content:center; width: 1280px; margin: 100px auto 50px;}
#sns ul.twitter li{width: 370px; flex-wrap: wrap; justify-content:center; border:5px rgba(255,255,255,0.5) solid; height: 965px; overflow-y: hidden;}
#sns ul.twitter li .inner{ background: #fff;}
#sns ul.twitter li:nth-of-type(n+2){margin-left: 29px;}
#sns ul.twitter li img{width: 100%;}
#sns ul.twitter li ul{display: flex; flex-wrap: wrap; justify-content:center; padding:0 0 13px;}
#sns ul.twitter li ul li{width:80px; height: auto; border: none; }
#sns ul.twitter li ul li:nth-of-type(n+2){margin-left:15px;}
#sns ul.twitter li ul.download { padding:8px 0 30px; }
#sns ul.twitter li ul.download li{width:155px; border: none;}
#sns ul.twitter li ul.download li:nth-of-type(n+2){margin-left:10px;}
#sns ul.twitter li ul.download li.ps4{width:125px; }
#sns dl {display: flex; flex-wrap: wrap; justify-content:center; padding-bottom: 50px; }
#sns dl img{width: 100%;}
#sns dl dd {margin-left: 20px; width: 100px; margin-top: -16px;}
#sns dl dd + dd{margin-left: -10px; }
#sns dl dt {width: 250px;}

#banner  {background:url("../images/banner-bg.jpg") repeat top ;  padding: 80px 0;}
#banner ul {display: flex;  flex-wrap: wrap; justify-content:center; margin: 0 auto;}
#banner ul li:nth-of-type(n+2){margin-left: 30px;}

footer {background: #fff; padding: 50px 0; min-width:1280px;}
footer ul {display: flex; flex-wrap: wrap; justify-content:center; margin: 0 auto 20px;}
footer ul li:nth-of-type(n+2){margin-left: 30px;}
footer p{font-size: 12px; text-align: center; margin-top: 10px; line-height: 20px;}
footer .rights_mark {height: 10px;}

.fadein{opacity:0;}

#history {min-width:1280px;}
#history #main .chronology{width: 936px; margin: 60px auto; background: #e3dac7;border: solid 3px #958479; outline: solid 7px #59504a; outline-offset:0; position:relative; z-index: 10; box-shadow: 0 0 40px 40px rgba(0,0,0,0.4); text-align: center;}
#history #main .chronology::before{position: absolute; top:0; left: 40px;  content: ""; background: #59504a; height: 100%; width: 250px; z-index: -1;}
#history #main .chronology ul li{display: flex; flex-wrap: wrap; justify-content:center; align-items: center; border-bottom: 1px solid #756960; padding: 40px;}
#history #main .chronology ul li p{font-family: 'EB Garamond', serif; font-size: 43px; color:#362d2b;}
#history #main .chronology ul li p.year{font-size: 81px; color:#fff; width: 250px;}
#history #main .chronology ul li p.no-year{height: 160px; width: 250px;}
#history #main .chronology ul li p.day{display: flex;align-items: center; padding-right: 63px;}
#history #main .chronology ul li p.day::before{border-top: 1px solid;content: "";flex-grow: 1; width:56px; margin-right: 20px;}
#history #main .chronology ul li img{ margin-bottom: 20px; position: relative;}
#history #main .chronology ul li a{position: relative; height: 135px; width: 374px; transition: opacity 0.3s ease-out; }
#history #main .chronology ul li a::after{position: absolute; top:0; right: 0;  z-index: 1; content: ""; background:url("../images/plus.gif") no-repeat center ;  height: 39px; width: 39px; background-size:39px 39px;}

#history #main .chronology ul li a:hover { opacity: 0.7;}

#history .background1 {background:url("../images/bg-chara01.png") no-repeat top ; background-position-y: 40px;}
#history .background2 {background:url("../images/bg-chara02.png") no-repeat top ; background-position-y: 40px;}
#history .background3 {background:url("../images/bg-chara03.png") no-repeat top ; background-position-y: 40px;}
#history .background4 {background:url("../images/bg-chara04.png") no-repeat top ; background-position-y: 40px;}
#history .background5 {background:url("../images/bg-chara05.png") no-repeat top ; background-position-y: 40px;}
#history .background6 {background:url("../images/bg-chara06.png") no-repeat top ; background-position-y: 40px;}
#history .background7 {background:url("../images/bg-chara07.png") no-repeat top ; background-position-y: 40px;}
#history .background8 {background:url("../images/bg-chara08.png") no-repeat top ; background-position-y: 40px;}
#history .background9 {background:url("../images/bg-chara09.png") no-repeat top ; background-position-y: 40px;}


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

}

@media screen and (min-width:1280px) and (max-width:1470px){
#kv .logo-30th {top:10px; left:10px;}
#kv .logo-30th img{width:calc(130/1450*100vw);}
}

@media screen and (max-width:1280px){
#kv .logo-30th {top:10px; left:10px;}
#kv .logo-30th img{width:115px;}
}



/*ローディング*/
.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;
  }
}