@charset "UTF-8";

/* ==================================================
  最初にアニメーション
================================================== */



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


#main_img {
	text-align:center;
	margin:0px 0 0px 15%;
	width:85%;
	padding:0px 0 0px 0px;
        }



#main_img h2{
	text-align:left;
	padding:0px 0 0px 0;
	position:absolute;
	z-index:100;
        }


#main_img p{
	text-align:center;
	padding:0px 0px 0px 0px;
        }

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

#main_img {
	text-align:center;
	margin:0px auto 0%;
	width:98%;
	padding:80px 0 10px 0px;
        }


#main_img h2{
	width:38%;
        }

#main_img p{
	padding:0% 0px 15% 0px;
        }

}




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


#news{
padding:0px 0 0px;
background:rgba(255,255,255,0.7);
margin:0px 0 40px;
}

#news h3.nw{
width:20%;
float:left;
color:#fff;
font-weight:normal;
text-align:center;
padding:40px 0 40px;
background:rgba(0,26,68,0.7);
margin:0px 0;
font-size:180%;
}

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

.news_info{
margin:0px 0px 0px;
padding:2% 2% 2% 1.5% ;
}


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

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


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

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

#news h3.nw{
width:100%;
float:none;
color:#fff;
font-weight:normal;
text-align:center;
padding:10px 0 10px;
background:#009fda;
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:url(../common_img/bg.png) repeat center 0;
}


#btn_area h2{
padding:0px 0px 0px;
text-align:center;
font-size:200%;
color:#655046;
font-weight:bold;
}

#btn_area h2 span{
color:#655046;
font-size:130%;
}

#btn_area .lead_p{
text-align:center;
font-size:130%;
color:#000;
padding:0px 0px 30px;
font-weight:bold;
}

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


.btn_top h3{
text-align:center;
padding:10px 0 10px;
font-weight:bold;
font-size:180%;
color:#fff;
background:url(../images/bg_btn_01.png) repeat center 5%;
}

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

.btn_top figure{
width:100%;
margin:0px auto 15px;
text-align:center;
}

.btn_top .sets{
font-weight:normal;
text-align:left;
font-size:110%;
padding:2% 10%;
}

.btn_top ul{
padding:15px 15px 20px;
margin-bottom:30px;
}

.btn_top ul li{
font-weight:bold;
padding:0px 15px 0px 0px;
margin-bottom:5px;
font-size:110%;
}

.btn_top ul li a{
color:#000;
text-decoration:none;
background:#f2f2f2 url(../common_img/ic_arrow06.png) no-repeat 95% center;
display:block;
padding:5px 10px;
}

.btn_top ul li a:hover{
color:#fff;
background:#db5724 url(../common_img/ic_arrow06.png) no-repeat 95% center;
}

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

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

#btn_area h2{
font-size:130%;
}

#btn_area p{
font-size:110%;
}

.btn_top h3{
font-size:120%;
}

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

.btn_top ul{
margin:15px auto 20px;
width:270px;
}



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

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

}


/* ----------   ポイント  --------------------- */

.point{
margin:0 0 15px;
padding:0 0 15px 0;
border-bottom:dashed 2px #000;
}

.point figure{
width:107px;
float:left;
margin:0 20px 0 0;
}

.point dt{
font-weight:bold;
font-size:140%;
color:#499c57;
margin-bottom:10px;
}

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

.point dt{
font-size:120%;
}


}

.office_box{
border:solid 6px #f2f2f2;
padding:10px;
}

.office_box h3{
border-bottom:double 3px #000;
margin-bottom:20px;
}

.office_box figure{
text-align:center;
margin-bottom:10px;
}

.office_box figcaption{
font-weight:bold;
font-size:130%;
color:#006c95;
padding-bottom:10px;
}
.office_box p{
margin-bottom:10px;
}

.office_box p span{
font-weight:bold;
font-size:130%;
color:#006c95;
display:block;
text-align:center;
padding-bottom:10px;
}

.office_box dl{
margin-bottom:10px;
padding:0 2% 0 2%;
}
.office_box dl dt,.office_box dl dd{
font-weight:bold;
font-size:110%;
}

.office_box dl dd span{
font-weight:normal;
font-size:90%;
display:block;
text-align:center;
}

.office_box dl dt span{
width:37%;
display:inline-block;
font-size:80%;
}

.office_box dl dt a{
color:#000;
}

.office_box dl dt:before{
content: "\f098　TEL";
margin-right: 12px;
font-family: FontAwesome;
display:block;
text-align:left;
font-size:120%;
font-weight:bold;
}

.office_box dl dd:before{
content: "\f1ac　FAX";
margin-right: 34px;
font-family: FontAwesome;
font-size:120%;
font-weight:bold;
}


#timeout{
    position:absolute;
}



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

.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: 4.8s;

}

.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: 4.8s;

}



.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: 4.8s;
}

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

.layer_board {
	top:37%;
}

.layer_board img{
	width:30%;
}
}