@charset "UTF-8";

/* ----------   最初のロゴ  --------------------- */
#timeout{
    position:absolute;
}



.layer_board_bg {
	position: fixed;
	width: 100%;
	min-height: 100vh;
	z-index: 10000;
	top: 0;
	left: 0;
	display: none;
}

.layer_board {
	display: none;
	position: fixed;
	left: 0;
	right:0;
	top:35%;
	margin: 0px auto 10px;
	width:100%;
	min-height: 100vh;
	text-align: center;
	z-index: 20000;
}





@keyframes logo_up {
0% {
    opacity: 0;
    transform: translateY(60px);
}
100% {
    opacity: 1;
    transform: translateY(0);
}
}


@keyframes translate { 
  0%   { transform:  translate(0px, 0px);    } 
  100%  { transform:  translate(100%, 0px);   } 
} 
@-webkit-keyframes translate { 
  0%   { -webkit-transform:  translate(0px, 0px) ;   } 
  100%   { -webkit-transform:  translate(100%, 0px);   }
} 

@keyframes translate2 { 
  0%   { transform:  translate(0px, 0px);    } 
  100%  { transform:  translate(-100%, 0px);   } 
} 
@-webkit-keyframes translate2 { 
  0%   { -webkit-transform:  translate(0px, 0px) ;   } 
  100%   { -webkit-transform:  translate(-100%, 0px);   }
} 

.layer_board .lo{
animation-name: logo_up;
animation-duration: 3s;
}


.box-wrap{
  position: relative;
  width: 100%;
  height: 100vh;
  min-height: 100vh;
}

.box{
  position: absolute;
  background-color:#fff;
}

.al{
  /* 分割数によって調整が必要 */
  top: 0;
  left: 0;
  width: 100%;
  height: 33%;
  background-position: top left;
  animation: translate 0.8s; 
  animation-iteration-count: 1; 
  -webkit-animation: translate 0.8s; /* Safari & Chrome */
  -webkit-animation-iteration-count: 1;
  animation-delay: 3.5s;

}

.cl{
  /* 分割数によって調整が必要 */
  top:33%;
  left: 0;
  width: 100%;
  height: 34%;
  background-position: top left;
  animation: translate2 0.8s; 
  animation-iteration-count: 1; 
  -webkit-animation: translate2 0.8s; /* Safari & Chrome */
  -webkit-animation-iteration-count: 1; 
  animation-delay: 3.5s;

}



.bl{
  /* 分割数によって調整が必要 */
  bottom: 0;
  left: 0;
  background-position: bottom left;
  width: 100%;
  height: 33%;
  animation: translate 0.8s; 
  animation-iteration-count: 1; 
  -webkit-animation: translate 0.8s; /* Safari & Chrome */
  -webkit-animation-iteration-count: 1;
  animation-delay: 3.5s;
}

#particles-js {
    width: 100%;
    height:auto;
    position: absolute;
    top: 0;
    z-index: 5000;
}

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

.layer_board {
	top:36%;
}

.layer_board img{
	width:30%;
}
}

/* ==================================================
  メインイメージ
================================================== */

#main_img {
	margin:0px 0 20px;
	padding:0px 0 0px 0;
	font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
	animation-name: SlideDown;
	animation-duration: 1.5s;
}

#main_img h2{
        position:absolute;
	top:220px;
	width:100%;
	z-index:99;
	text-align:center;
	padding:120px 0 20px 0px;
	font-size:300%;
	line-height:1.6;
	font-weight:normal;
	color:#fff;
	text-shadow:2px 2px 8px #333,2px 2px 8px #333,2px 2px 8px #333;
	animation-name: SlideDown;
        animation-duration: 4.5s;
}



#main_img h2 span{
	color:#fff;
	font-size:80%;
	font-weight:200;
	display:block;
	text-align:center;
	line-height:1.9;
}
@media only screen and (max-width: 1600px) {

#main_img h2{
	padding:0px 0 20px 0px;top:40%;
}

}

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


#main_img {
        margin:55px 0 20px;
}

#main_img h2{font-size:220%;padding:0px 0 0px 0px;}

}


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


#main_img h2{font-size:120%;padding:0px 0 0px 0px;top:28%;}

}

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

#main_img h2{font-size:100%;padding:0px 0 0px 0px;top:40%;}

}



/* ----------   新着情報  --------------------- */


#news{
padding:0px 0 0px;
background:#f4f4f4;
margin:0px 0 40px;
}

#news h3.nw{
width:20%;
float:left;
color:#fff;
font-weight:normal;
text-align:center;
padding:40px 0 40px;
background:#00218b;
margin:0px 0;
font-size:180%;
}

#news h3.nw span{
font-size:80%;
}

.news_info{
float:right;
width:76%;
margin:0px 0px 0px;
padding:2% 2% 2% 2% ;
}


.news_info li{
padding:10px 0px 5px 0px ;
border-bottom:dotted 1px #ccc;
margin:0px 0px 10px 0px ;
}

.news_info li span{
color:#f37800;
margin:0px 20px 0px 0px ;}


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

#news{
margin:20px 15px 20px;
}

#news h3.nw{
width:100%;
float:none;
color:#fff;
font-weight:normal;
text-align:center;
padding:10px 0 10px;
margin:0px 0;
font-size:130%;
}

#news h3.nw br{
display:none;
}

.news_info{
float:none;
width:94%;
margin:0px 0px 0px;
padding:3% ;
}

}

/* ----------   ボタン  --------------------- */


#btn_area{
padding:40px 0px 40px;
margin-bottom:40px;
background:#f2f2f2;
background-size:cover;
}

.btn_top{
margin:0px 0 0px;
padding:0 0 30px;
position:relative;
background:#fff;
}


.btn_top h3{
text-align:center;
padding:12px 0 35px;
font-weight:bold;
font-size:160%;
color:#fff;
font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
background:url(../images/bg_btn_01.png) no-repeat right 0;
}

.btn_top h3 span{
font-size:80%;
font-weight:normal;
}

.btn_top figure{
width:100%;
margin:0px auto 0px;
text-align:center;
border-bottom:solid 4px #7a7e22;
}

.btn_top p{
text-align:center;
font-size:120%;
}

.btn_top dl{
padding:15px 15px 10px;
}
.btn_top dt{
font-weight:bold;
font-size:140%;
}
.btn_top dd{
padding:15px 5px 0px;
}

.btn_top dl span{
color:#ff6c00;
font-size:110%;
}

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


#btn_area{
padding:20px 0px 20px;
background:none;
}

.btn_top{
width:80%;
margin:10px auto 10px;
}

.btn_top figure{
width:100%;
}

.btn_top dl{
padding:15px 15px 10px;
}

.btn_top dt{
font-size:115%;
text-align:center;
}


}
@media only screen and (max-width: 480px) {

.btn_top{
width:95%;
margin:10px auto 30px;
}

}


/* ----------   アバウト  --------------------- */

#about h3{
font-family: "FOT-ロダン Pro M";
font-size:220%;
font-weight:bold;
margin-bottom:20px;
color:#f6ab00;
}

#about h3 span{
font-size:60%;
margin-right:15px;
color:#000;
}


#about p{
line-height:2.0;
}

.colum_ul li{
margin-bottom:10px;
}

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

#about h3{
font-size:180%;
text-align:center;
}

#about h3 span{
display:block;
text-align:center;
}

}