@charset "UTF-8";
header{display: inline-block;	width:15%;vertical-align: middle;}
.title {}
.title h1 {}
.title h1 img{width:auto;height:60px;margin-left:auto;margin-right:auto;}
.title h1 span{display: block;}
#navi-area { background-color: #FFFFFF;width:98%;vertical-align: middle;padding:0%;}
nav{display: inline-block;width:83%;text-align: right;vertical-align: middle;}
nav a{color: #222222;}
nav a:link{color: #222222;}
nav a:visited{color: #222222;}
nav a:hover{color: #222222;}
.navigation{display: none;position: fixed;top:1%;right:0;text-align: center;font-size: 250%;z-index: 9999;}
nav ul{display:block;width:100%;}
nav li{display: inline-block;padding: 0em;}
nav li a{display: block;padding:1em;font-size:90%;}
#naviswitch{font-size: medium;padding:0.2em;margin-right:0.5em;text-align: right;}
.menu-trigger, .menu-trigger span {	display: inline-block;	transition: .4s;}
.menu-trigger {	position: relative;	width: 25px;	height: 22px;	cursor:pointer;}
.menu-trigger span {position: absolute;	left: 0;	width: 100%;	height: 2px;	background-color: #111111;}
.menu-trigger span:nth-of-type(1) {	top: 0;}
.menu-trigger span:nth-of-type(2) {	top: 10px;}
.menu-trigger span:nth-of-type(3) {	bottom: 0;}
.menu-trigger.active span:nth-of-type(1) {	transform: translateY(10px) rotate(-45deg);}
.menu-trigger.active span:nth-of-type(2) {	opacity: 0;}
.menu-trigger.active span:nth-of-type(3) {	transform: translateY(-10px) rotate(45deg);}
#navi-area.fixed{position: fixed;top:0;left:0;z-index: 999;padding:0;width:100%;}
.wrapper {}
.contents-layout {margin-right: auto;margin-left: auto; padding:2%; width:60%;}
.contents-layout p{padding-top:1em;padding-bottom:1em;}
.features-area{}
.features-area h2{text-align: center;}
.features-area figure{width:28%;margin-left:2%;margin-right:2%;margin-bottom:1em;}
.features-area figure img{width:100%;height:auto; overflow:hidden;}
.features-area figcaption{display:block;padding-top:1em;padding-bottom:1em;}
.f-left{width:50%;height:100vh;float:left;text-align: center;position: relative;overflow: hidden;}
.f-right{width:50%;height:100vh;float:right;text-align: center;position: relative;overflow: hidden;}
.features-areab{}
.features-areab img{width:auto;height:100vh;}
.layout{position: absolute;top: 40%;left: 40%;transform: translate(-40%, -40%);width:96%;padding:2%;}
   .garelly img{width:100%;height:auto;}
.information{width:100%;background-color: #212121; color: #FFFFFF;text-align: center;padding-top:2em;padding-bottom:2em;}
.concept{width:100%;text-align: center;padding-top:3em;padding-bottom:3em;}
.concept-left{display: block;width:100%;vertical-align:top;}
.concept-right{width:50%;margin-left:auto;margin-right:auto;margin-top:3em;margin-bottom:3em;}
.contents-layout h2{font-size:230%;margin-bottom:1em;font-family: "Times New Roman", Times, "serif";}
.contents-layout h3{ font-weight: bold; font-size: 150%; margin-top: 1em; margin-bottom: 1em;   }
.border{ border-bottom: 1px solid #715C00;padding-top:2em;margin-bottom:2em;width:20%;margin-left:auto;margin-right:auto;}
.tel:before{content:'tel.';font-size: 70%;}
.tel{ font-size: 200%; color: #E9E9E9; font-family: "Times New Roman", Times, "serif"; letter-spacing: 0.2em;}
.tel a,.tel a:hover{color: #E9E9E9;}
.concept img{width:100%;height:auto;}
.menu-area{width:100%;}
.menu-left{display: none;}
.menu-right{display: block;width: 100%;vertical-align: top;}
.menu-right table{border: none;border-collapse: collapse;width:100%;font-size:80%;}
.menu-right tr{border-bottom: #cccccc 1px solid;}
.menu-right th{padding:0.5em;text-align: left;}
.menu-right td{padding:0.5em;text-align: right;}
.menu-left img{width:100%;height:auto;}
.map-area{}
.map-left{display: inline-block;vertical-align: top; width:29%;}
.map-right{display:inline-block;width:68%;}
.photo-area {text-align: center;}
.photo-area span{display: inline-block;width:25%;}
.photo-area img{width:100%;height:auto;} 
section iframe{width:100%;height:60vh;}
 .tw-news section{width:100%;height:50vh;overflow: scroll;}

.fade {
    opacity : 0;
    transform : translate(0, 50px);
    transition : all 500ms;
    }

 
.scrollin {
    opacity : 1;
    transform : translate(0, 0);
    }
.main-area {width: 100%;}

/*--------------------------
ページフッター部
--------------------------*/
.footer-area {width:100%;background-color: #121212;	text-align: center;	font-size: 70%;	 padding-top:5px; padding-bottom:5px; color: #FFFFFF;}

/*--------------------------
レスポンシブ　ウィンドウサイズ横800以下に適応
--------------------------*/

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

}

/*--------------------------
レスポンシブ　ウィンドウサイズ横640以下に適応
--------------------------*/


@media only screen and (max-width: 640px) {
 
 .loading p{
 width: 30px;
 height: 30px;

}
	
.navigation{display: block;}

 .navi-list{position: fixed;z-index: 9998; background-color: #EEEEEE;width:100%;top:0;left:0;height: 100vh;display:none;text-align: center;}
 .navi-list ul{margin-top:20%;}
 .navi-list li{display: block;}
 
 .wrapper {
	float: none;
 clear:both;
	width: 100%;
  padding:0;
	margin:0;
}

 .title {position: fixed;top:0;left:0;bottom:auto;z-index: 9999;width:100%;height:auto;padding-top:0.2em;background-color: #FFFFFF;text-align: center;}
 .title h1{width:135px;overflow: hidden;margin-left:auto;margin-right:auto;position: static; top:auto;transform: translateX(0);background-color: transparent;padding:0;}
 .title h1 img{width:auto;height:25px;margin-top:0.2em;}
 .title h1 span{paddign-top:0em;padding-bottom:0em;display: inline;}
 
header{position: static;}
nav{position: static;background-color: transparent;}

 .main-area {float:none;clear:both;	width: 100%;}
#navi-area.fixed{position: relative;}

.contents-layout {margin-right: auto;margin-left: auto;height:auto;width:94%;}

.photo-area span{width:50%;height: 25vh; text-align: center;overflow: hidden;}
 .photo-area img{width:auto;height:100%;margin-top:0;}
 .photo-area-margin{margin-top:-0.7em;}

.features-area figure{display:block;width:100%;margin:0;}
.features-area figcaption{padding-left:1em;}

  .concept-left{display: block;width:100%;}
  .concept-right{display: block;width:100%;margin-bottom:1em;}
  .menu-left{display: block;width:100%;padding:0;}
  .menu-right{display:block;width: 100%;padding:0;}
  .menu-right h2{text-align: center;}
  .menu-right table{border: none;border-collapse: collapse;width:100%;}
  .menu-right tr{border-bottom: #cccccc 1px solid;}
  .map-left{display: block; width:100%;}
  .map-right{display:block;width:100%;}

  .features-area{position: relative;height: auto;}
  .features-areab{position: relative;height: auto;}
  .tw-news{position: relative;text-align: left;}
  .concept{text-align: center;position: relative;width:96%;padding:2%;}
  .information{text-align: center;position: relative;}
  .menu-area{position: relative;top:0;z-index: 9997;width:100%;}
  .map-area{position: relative;top:0;z-index: 9997;width:100%;}
  .information-area{text-align: center;}

   .tw-news section{width:100%;height:50vh;}

  #tw-news {display: block;}
  #features-area{display:block;}
  #features-areab{display:block;}
  #concept{display:block;}
  #menu-area{display:block;}
  #map-area{display:block;}
  #info{display:block;}
 

   .f-left{width:100%;float:none;}
   .f-right{width:100%;float:none;}
   .footer-area {display:block;}
   .fixed-banner img{width:60px;}



 /*--------------------------
parallax
--------------------------*/
  
.fade {
    opacity : 0;
    transform : translate(0, 50px);
    transition : all 500ms;
 margin-bottom:1em;
    }

 
.scrollin {
    opacity : 1;
    transform : translate(0, 0);
    }  

 
}