@charset "utf-8";

/*========= レイアウトのためのCSS ===============*/

html {
  /* デフォルト（モバイルビュー）ではベースのfont-sizeは12px相当 */
  font-size: 62.5％;
}

body{
    background:#000;
    font-family:'Baskerville','Times New Roman','Yu Mincho Medium','YuMincho','Hiragino Mincho ProN',Meiryo, "Noto Sans JP", serif; }
	color: #333;	
	font-size: 2rem
	line-height:150%;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	-webkit-text-size-adjust: 100%; 
	word-wrap: break-word;
}

@media screen and (max-width:767px) {
body{font-size:0.8rem;}
}

/*PCの場合*/
.pc	{ display:inline!important; }
.sp	{ display:none!important; }
@media screen and (max-width: 767px) {
/*スマホの場合*/
.pc	{ display:none!important; }
.sp { display:inline!important; }
}

/*ロード画面*/
#loading-wrapper { color: #ffffff; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: #000; display: flex; flex-direction: column; justify-content: center; align-items: center; transition: all 0.3s; z-index: 9999; }

.loader {
  color: #ffffff;
  font-size: 60px;
  text-indent: -9999em;
  overflow: hidden;
  width: 1em;
  height: 1em;
  border-radius: 50%;
  margin: 72px auto;
  position: relative;
  -webkit-transform: translateZ(0);
  -ms-transform: translateZ(0);
  transform: translateZ(0);
  -webkit-animation: load6 1.7s infinite ease, round 1.7s infinite ease;
  animation: load6 1.7s infinite ease, round 1.7s infinite ease;
}
@-webkit-keyframes load6 {
  0% {
    box-shadow: 0 -0.83em 0 -0.4em, 0 -0.83em 0 -0.42em, 0 -0.83em 0 -0.44em, 0 -0.83em 0 -0.46em, 0 -0.83em 0 -0.477em;
  }
  5%,
  95% {
    box-shadow: 0 -0.83em 0 -0.4em, 0 -0.83em 0 -0.42em, 0 -0.83em 0 -0.44em, 0 -0.83em 0 -0.46em, 0 -0.83em 0 -0.477em;
  }
  10%,
  59% {
    box-shadow: 0 -0.83em 0 -0.4em, -0.087em -0.825em 0 -0.42em, -0.173em -0.812em 0 -0.44em, -0.256em -0.789em 0 -0.46em, -0.297em -0.775em 0 -0.477em;
  }
  20% {
    box-shadow: 0 -0.83em 0 -0.4em, -0.338em -0.758em 0 -0.42em, -0.555em -0.617em 0 -0.44em, -0.671em -0.488em 0 -0.46em, -0.749em -0.34em 0 -0.477em;
  }
  38% {
    box-shadow: 0 -0.83em 0 -0.4em, -0.377em -0.74em 0 -0.42em, -0.645em -0.522em 0 -0.44em, -0.775em -0.297em 0 -0.46em, -0.82em -0.09em 0 -0.477em;
  }
  100% {
    box-shadow: 0 -0.83em 0 -0.4em, 0 -0.83em 0 -0.42em, 0 -0.83em 0 -0.44em, 0 -0.83em 0 -0.46em, 0 -0.83em 0 -0.477em;
  }
}
@keyframes load6 {
  0% {
    box-shadow: 0 -0.83em 0 -0.4em, 0 -0.83em 0 -0.42em, 0 -0.83em 0 -0.44em, 0 -0.83em 0 -0.46em, 0 -0.83em 0 -0.477em;
  }
  5%,
  95% {
    box-shadow: 0 -0.83em 0 -0.4em, 0 -0.83em 0 -0.42em, 0 -0.83em 0 -0.44em, 0 -0.83em 0 -0.46em, 0 -0.83em 0 -0.477em;
  }
  10%,
  59% {
    box-shadow: 0 -0.83em 0 -0.4em, -0.087em -0.825em 0 -0.42em, -0.173em -0.812em 0 -0.44em, -0.256em -0.789em 0 -0.46em, -0.297em -0.775em 0 -0.477em;
  }
  20% {
    box-shadow: 0 -0.83em 0 -0.4em, -0.338em -0.758em 0 -0.42em, -0.555em -0.617em 0 -0.44em, -0.671em -0.488em 0 -0.46em, -0.749em -0.34em 0 -0.477em;
  }
  38% {
    box-shadow: 0 -0.83em 0 -0.4em, -0.377em -0.74em 0 -0.42em, -0.645em -0.522em 0 -0.44em, -0.775em -0.297em 0 -0.46em, -0.82em -0.09em 0 -0.477em;
  }
  100% {
    box-shadow: 0 -0.83em 0 -0.4em, 0 -0.83em 0 -0.42em, 0 -0.83em 0 -0.44em, 0 -0.83em 0 -0.46em, 0 -0.83em 0 -0.477em;
  }
}
@-webkit-keyframes round {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@keyframes round {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

.completed { opacity: 0; visibility: hidden; }

/*ロード画面ここまで*/





ul{
	margin:0;
	padding: 0;
	list-style: none;
}

a{
	color: #fff;
    outline: none;
}

a:hover,
a:active{
	text-decoration: none;
}

/* heading */

h1{display: none;}
.heading-block h2{
    font-family: 'La Belle Aurore', cursive;
    font-weight: normal;
    font-size:6vw;
    line-height: 1;
    letter-spacing: 0.05em;
    color: #fff;
}

h2{position: absolute;
	text-align: center;
	width: 90%;
}

/* page */


.logobox {
    position: fixed;
	top: 80px;
	left:47%;
	margin-left:-90px;
	z-index: 1;
}

.logoboxsp {
    position: fixed;
	top: 50px;
	left:47%;
	margin-left:-45px;
	z-index: 1;
}

.logo1 {
    position: absolute;
	opacity: 0;
	animation: logo1 3s ease-in-out 1 forwards;
}
.logo2 {
    position: absolute;
	opacity: 0;
	animation: logo2 2s ease-in-out 1s 1 forwards;
}
.logo3 {
    position: absolute;
	opacity: 0;
	animation: logo3 3s ease-in-out 1s 1 forwards;
}

@keyframes logo1 {
	0%   {-webkit-transform: rotate(20deg)}
	99.9%,to {-webkit-transform: rotate(0deg);opacity: 1}
}
@keyframes logo2 {
	0%   {-webkit-transform: rotate(-10deg);;opacity: 0;}
	99.9%,to {-webkit-transform: rotate(0deg);opacity: 1}
}
@keyframes logo3 {
	0%   {opacity: 0;}
	99.9%,to {opacity: 1;}
}

.box{
    color: #fff;
    padding: 20px;
	text-align: center;
	position: relative;
}

.box::before{
  /* 透過した黒を上から重ねるイメージ */
  background-color: rgba(0,0,0,0.5);
  /* 自由に位置指定 */
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  content: ' ';
}

#boxtop{
    /*background:#000;*/
	background:url("../img/bg_01.jpg") no-repeat center;
    background-size: cover;

}	
#box1{
    background: #333;	
    /*background:#666;*/
	background:url("../img/bg_02.jpg") no-repeat center;
    background-size: cover;
}
#box2{
    /*background:#000;*/
	background:url("../img/bg_03.jpg") no-repeat center;
    background-size: cover;
}
#box3{
    background: #333;	
    /*background:#666;*/
	background:url("../img/bg_04.jpg") no-repeat center;
    background-size: cover;
}
#box4{
    background: #000;
	background:url("../img/bg_05.jpg") no-repeat center;
    background-size: cover;
}

#box5{
    background: #333;
	background:url("../img/bg_06.jpg") no-repeat center;
    background-size: cover;
}

#box6{
    background: #000;
	/*background:url("../img/bg_06.jpg") no-repeat center;
    background-size: cover;*/
}

#footer{
  background:#333;
  color:#fff;
  padding:10px;
  text-align:center;
}

#footer a{
  color: #fff;
}

.contbox{
	text-align: center;
	width: 90%;
	margin: 400px auto 10px;
	max-width: 90%;
	position: absolute;
}

@media screen and (max-width:767px){
.contbox {margin: 200px auto 10px;position: absolute;}
}

.mem {
    display: inline-block;      /* インラインブロック要素にする */
    padding:  0 50px 18px;             /* 余白指定 */
    /*height: 120px;               高さ指定 */
}

.title{
	padding: 80px 0 40px;
	font-size: 130%;
}

.strong1{
	padding: 80px 0 40px;
	font-size: 200%;
	font-weight: bold;
}

/*======= News =======*/

.newslist {
  max-width: 500px;
  margin: 0 auto;
	text-align: left;
}

@media screen and (max-width: 800px) {
  .newslist {
    padding: 0 15px;
  }
}

.newslist li {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  padding: 10px 10px;
  border-top: 1px solid #fff;
  line-height: 1.5;
}

.newslist li:last-child {
  border-bottom: 1px solid #fff;
}

.newslist li time {
  padding-right: 20px;
}

.newslist li a {
  text-decoration: none;
}

/*======= music =======*/

.card{
	    display: inline-block;      /* インラインブロック要素にする */
	background-color: rgba(0,0,0,0.6);
	padding: 20px;
	width: 90%; /*bodyの幅に対する割合 */
  max-width: 300px;	
}

.musictitle{
	padding: 10px;
	font-size: 130%;
}

.btn {
    background-color:#3F87C0;
    border: 2px solid #3F87C0;
    color: #fff;
    display: inline-block;
    font-weight: 700;
    padding: 0.5rem 1rem;
    position: relative;
    text-align: center;
    text-decoration: none;
    transition: .3s;
}

.btn a {
  text-decoration: none;
}

.btn:hover {
    background-color: #fff;
    color: #3F87C0;
}

/*======= sns =======*/

.sns ul {
　text-align: center;
}

.sns li {
　display: -moz-inline-box;
　display: inline-block;
　/display: inline;
　/zoom: 1;
　padding-right: 10px;
}

.sns li a {
　background-color: #fff2cc;
}

.responsive {
width: 100%;
aspect-ratio: 16/9;
}

/*========= ページネーションCSS ===============*/

.pagination {
  position:fixed;
  right:20px;
  top: 50%;
    transform: translateY(-50%);
  font-size:1em;
  z-index: 10;
  list-style: none;
}

.pagination a {
  display:block;
  height:20px;
  margin-bottom:5px;
  color:#fff;
  position:relative;
  padding:4px;
}

.pagination a.active:after {
  box-shadow:inset 0 0 0 5px;
}

/*現在地表示のテキストの設定*/
.pagination a .hover-text {
  position:absolute;
  right:10px;
  top:0;
  opacity:0;
  -webkit-transition: opacity 0.5s ease;
  transition: opacity 0.5s ease;
  padding-right: 15px;
}

.pagination a:hover .hover-text {
  opacity: 1;
}

.pagination a:after {
  -webkit-transition:box-shadow 0.5s ease;
  transition:box-shadow 0.5s ease;
  width:10px;
  height:10px;
  display: block;
  border:1px solid;
  border-radius:50%;
  content:"";
  position: absolute;
  margin:auto;
  top:0;
  right:3px;
  bottom:0;
}

@media screen and (max-width:767px){
.box {padding: 10px 10px 0;}
}

/*768px以下は現在地表示のテキストを非表示*/
@media screen and (max-width:768px) { 
  .pagination a .hover-text{
    display: none;
  } 
}