@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: 1400px) {


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

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

}


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


#main_img h2{font-size:140%;padding:0px 0 0px 0px;top:30%;}

}

@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:45px 0 45px;
background:#396910;
margin:0px 0;
font-size:180%;
min-height:250px;
}

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

.news_info{
float:right;
width:76%;
margin:0px 0px 0px;
padding:1% 2% 1% 2% ;
overflow-y: scroll;
height: 250px;
}


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

.news_info li a{
display:block;
color:#333;
}

.news_info li span{
color:#f37800;
display:block;
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%;
min-height:30px;
}

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

.news_info{
float:none;
width:96%;
margin:0px auto 0px;
}

}

/* ----------   私たちについて  --------------------- */

.abt_box{
border: solid 1px #cfbd8f;
background: #f2ead6;
padding: 15px 20px;
margin: 0px 0px 20px;
border-radius: 10px;
}

.abt_box h4{
border-bottom: dotted 2px #cfbd8f;
font-size:120%;
font-weight:bold;
color:#83551e;
margin:0 0 20px;
}


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

#top_lead{
background:#fff;
padding:40px 0;
}

#top_lead .bg_top01{
background:url(../images/bg_01.png) no-repeat 0 0;
padding:0 0px 30px;
}

#top_lead h3{
padding:20px 0 20px;
text-align:center;
font-size:200%;
font-weight:bold;
color:#000;
}

#top_lead h3 span{
font-size:140%;
color:#0095b5;
}

.btn_top{
background:#396910;
padding:10px;
margin:5px 0;
border-radius: 10px;
}

.btn_top .inner{
background:#f5fff2;
padding:10px;
border:solid 1px #fff;
}

.btn_top .inner h4{
text-align:center;
font-size:140%;
font-weight:bold;
color:#396910;
}

.btn_top .inner ul{
padding:15px 10px 15px;
}

.btn_top .inner ul li{
padding:3px 0;
font-weight:bold;
}

.btn_top .inner ul li:before {
content: '\f14a';
margin: 0px 5px 0px 0px;
font-family: 'Font Awesome 5 Free';
color: #ff4200;
font-size:120%;
}

.btn_top .inner figure{
text-align:center;
}


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


#top_lead h3{
font-size:120%;
}
#top_lead h3 br{
display:none;
}

#top_lead h3 span{
font-size:120%;
}

#top_lead .bg_top01{
background:none;
padding:0 15px 50px;
}


.btn_top .inner h4{
font-size:120%;
}

}


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

#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;
}

}


.bnr_wrapper{
margin:20px auto 0;
}

.bnr_wrapper div{
text-align:center;
}



@media only screen and (max-width: 768px) {
.bnr_wrapper div img{
width:80%;
margin:10px auto;
}
}