/* --------------------------------------------- */
/* ▼トップページデザイン */
/* --------------------------------------------- */
#facebook {
	position: relative;
	width: 100%;
	padding: 100% 0 0 0;
	overflow:scroll;
}
#facebook iframe {
	position: absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
	margin:0 auto;
}

.blog {
	/*overflow: hidden;*/
	width: 100%;
	padding-top: 30px;
}
.blog ul {
	width: 90%;
	margin:20px auto;
	display: -webkit-block;
	display: block;
}
.blog li:first-child {
	width: 100%;
}
.blog li:last-child {
	width: 100%;
}
.blog .inner {
	overflow: hidden;
	width: 90%;
	margin-left: 5%;
	margin-right: 5%;
	margin-bottom: 30px;
}
.blog img {
	width: 100%;
	display: block;
	margin-right: auto;
	margin-left: auto;
	margin-bottom: 20px;
}

.blog .inner dl{
	overflow: hidden;
	width: 90%;
	margin-left: 5%;
	margin-right: 5%;
	clear: both;
}
.blog .inner dl dt{
	font-weight: bold;
	color: #360;
	}
		
.blog .inner dl dt,dd{
	margin-bottom: 20px;
}		
.blog .inner .time{
	font-size: small;
	float: right;
}


	
.blog .inner .more {
	text-align: center;
	width: 250px;
	margin-top: 20px;
	overflow: hidden;
	margin-right: auto;
	margin-left: auto;
	color: #FFFFFF;
	background-color: #80C41A;
}
.blog .inner .more a {
	display: block;
	color: #FFF;
	font-size: 16px;
	padding-top: 15px;
	padding-bottom: 15px;
	font-weight: bold;	
}
.blog .inner .more a:hover {
	background-color: #FF9900;
}
		
.blog p{
	line-height: 2;
}



.service {
	padding-bottom: 30px;
	overflow: hidden;
}

.service .inner {
	overflow: hidden;
	width: 90%;
	margin-left: 5%;
	margin-right: 5%;
	margin-bottom: 50px;
}
.service img {
	width: 80%;
	margin-left: auto;
	display: block;
	margin-right: auto;
	margin-bottom: 10px;
}



.service .long a{
	font-weight: bold;
	color: #66F;
	font-size: large;
		}
	
.service .short a{
	font-weight: bold;
	color: #F69;
	font-size: large;
		}
	
.service .day a{
	font-weight: bold;
	color: #F90;
	font-size: large;
		}

.service .inner.clearfix ul .heightLine .stext{
	display: block;
	height: 140px;
}
		
.service .inner .more {
	text-align: center;
	width: 250px;
	margin-top: 20px;
	overflow: hidden;
	margin-right: auto;
	margin-left: auto;
	color: #FFFFFF;
	background-color: #80C41A;
}
.service li .botton {
	overflow: hidden;
}
.service li .botton a {
	color: #FFF;
	padding-top: 10px;
	padding-bottom: 10px;
	background-color: #80C41A;
	display: block;
	margin-top: 10px;
	margin-bottom: 20px;
	text-align: center;
	font-size: 14px;
	padding-right: 5px;
	padding-left: 5px;
}
.service li .botton a:hover {
	background-color: #FF9900;
}
.service li a:hover  img {
    opacity: 0.8;
    filter: Alpha(opacity=80);
}



.service .inner .more a {
	display: block;
	color: #FFF;
	font-size: 16px;
	padding-top: 15px;
	padding-bottom: 15px;
	font-weight: bold;	
}
.service .inner .more a:hover {
	background-color: #FF9900;
}
	
	
			
.recruit .inner {
	overflow: hidden;
	width: 90%;
	margin-left: 5%;
	margin-right: 5%;
	margin-bottom: 50px;
}

	
.recruit .inner .more {
	text-align: center;
	width: 250px;
	margin-top: 20px;
	overflow: hidden;
	margin-right: auto;
	margin-left: auto;
	color: #FFFFFF;
	background-color: #80C41A;
}
.recruit .inner .more a {
	display: block;
	color: #FFF;
	font-size: 16px;
	padding-top: 15px;
	padding-bottom: 15px;
	font-weight: bold;	
}
.recruit .inner .more a:hover {
	background-color: #FF9900;
}

#recruitimag{
	display: block;
	width: 70%;
	margin-right: auto;
	margin-bottom: 20px;
	margin-left: auto;
}

#recruittitel{
	display: block;
	width: 70%;
	margin-right: auto;
	margin-bottom: 20px;
	margin-left: auto;
}
.recruit li a:hover  img {
    opacity: 0.8;
    filter: Alpha(opacity=80);
}

.kihon {
	padding-bottom: 30px;
	overflow: hidden;
}


.kihon .inner {
	overflow: hidden;
	width: 90%;
	margin-left: 5%;
	margin-right: 5%;
}
#kihontitel{
	display: block;
	margin-right: auto;
	margin-left: auto;
	margin-bottom: 30px;
}
 
section th, section td  { padding: 10px; border: 1px solid #ddd; }
section th  { background: #f4f4f4; }

 
.kihon_t {
	width: 100%;
	margin-top: 0;
	margin-right: auto;
	margin-bottom: 20px;
	margin-left: 0px;
	color: #42210b;
}
.kihon_t th{
	width: 98%;
	text-align: left;
	border-top: none;
	
    }
.kihon_t td{
	width: 98%; 
	text-align: left; 
    border-top: none;
	    }
.kihon_t tr:first-child th { border-top: 1px solid #ddd; }

.kihon .shisetsu{
	display: block;
	}

.gaiyou{
	padding: 5px;
}



.map .inner {
	overflow: hidden;
	width: 90%;
	margin-left: 5%;
	margin-right: 5%;
	margin-bottom: 50px;
}

#accesstitel{
	display: block;
	margin-right: auto;
	margin-left: auto;
	margin-bottom: 30px;
}
.ggmap {
	position: relative;
	padding-bottom: 56.25%;
	height: 0;
	
}
 
.ggmap iframe,
.ggmap object,
.ggmap embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}

.map .inner .more {
	text-align: center;
	width: 250px;
	margin-top: 20px;
	overflow: hidden;
	margin-right: auto;
	margin-left: auto;
	color: #FFFFFF;
	background-color: #80C41A;
	margin-bottom: 20px;
}

.map .inner .more a{
	color: #FFF;	
}
/*googlemaタッチデバイス長押し*/
.target{
	margin:0;
	padding-top:50%;
	border:1px solid #ddd;
	overflow:hidden;
	height:0;
	position:relative;
	display:block;
}
.target::before{
	content:"\9577\62BC\3067\64CD\4F5C\304C\3067\304D\307E\3059";
	/*「長押しすると地図が操作できます」と生成*/
	display:block;
	z-index:100;
	color:#000;
	width:100%;
	position:absolute;
	top:50%;
	left:0;
	margin:-0.5em 0 0 0;
	line-height:1;
	text-align:center;
	font-weight:bold;
	text-shadow:1px 1px 0 #fff;
}
.target::after{
	content:"";
	display:block;
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
	background:rgba(255,255,255,0.5);
}
.target.release::before,
.target.release::after{
	display:none !important;
}
.target > iframe,
.target > div{
	/* レスポンシブデザイン想定 */
	position:absolute;
	50	top:0;
	left:0;
	width:100%;
height:100%;
}

.contact .inner {
	overflow: hidden;
	width: 90%;
	margin-left: 5%;
	margin-right: 5%;
}

.contact .formr .w-80{
	display: block;
	width: 80%;
	margin-right: auto;
	margin-left: auto;
}

#contacttitle{
	display: block;
	margin-right: auto;
	margin-left: auto;
	margin-bottom: 30px;
}
	
	
@media screen and (min-width:480px) { 
	/*　for iPhone Landscape　(iPhone 横)　*/
.company p,.service p ,.recruit p{
	margin-bottom: 16px;
	line-height: 2;
}
.company img {
	width: 50%;
	margin-bottom: 0px;
	float: left;
	margin-right: 20px;
}
.company .more {
	float: right;
	overflow: hidden;
	clear: both;
}
.company .more li {
	margin-left: 10px;
	float: left;
	width: 200px;
}


.service li {
	width: 28%;
	margin-right: 2%;
	float: left;
	margin-left: 3%;
	text-align: center;
}
.service p {
	text-align: left;
}

}

/* -------------------------------------------- */
/* ▼タブレット用デザインとして付け足すデザイン */
/* -------------------------------------------- */
@media screen and (min-width:768px) 
{

.blog p,.recruit p{
	font-size: 16px;
}
.blog .more li {
	width: 250px;
}

.service li {
	width: 23%;
	margin-right: 5%;
	margin-left: 5%;
}
}
/* ------------------------------------ */
/* ▼PC用デザインとして付け足すデザイン */
/* ------------------------------------ */
@media screen and (min-width:1024px) {
/*　for PC　*/
#facebook iframe {
	position: absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
	margin:0 auto;
}

.blog ul {
	width: 90%;
	margin:20px auto;
	display: -webkit-flex;
	display: flex;
}
.blog li:first-child {
	width: 25%;
}
.blog li:last-child {
	width: 75%;
}
.blog .inner {
	width: 100%;
	margin-left: 0;
	margin-right: 0;
	margin-bottom: 50px;
}

#facebook {
	width: 100%;
	margin:0 auto;
}

#blogitile{
	width: 65%;
}
.blog .blogtext{
	float: left;
	width: 60%;
}
#blogimag{
	width: 35%;
	float: left;
	margin:30px 3% 10% 2%;
}	
	
.blog dl {
    width: 60%;	
	float: left;
}
.blog dl img{
    width: 60%;	
	margin-bottom: 20px;
}
.blog dl dt{
	
    font-weight: bold;
	clear: both
}	
.blog dl dt,dd{
	margin-bottom: 20px;
}		
.blog dl .time{
	font-size: small;
	float: right;
	}

.blog .more img{
   float: right;
	overflow: hidden;
	clear: both;
	width: 50%;
}	

.recruit .inner .more {
	float: right;	
}

.blog .inner .more {
	float: right;	
}
 .recruitright{
	float: left;
	width: 50%;
	}

.kihon .gaiyou{
	float: left;
	width: 50%;
	}
	
.mapri	{
	float: left;
	width: 40%;
	text-align: center;
		}
.maple	{
	float: left;
	width: 50%;
	margin-top: 30px;
		}

#recruitimag{
	width: 300px;
	float: left;
	margin-right: 10%;
	margin-bottom: 10%;
	margin-left: 10%;
}	

#recruittitel{
	width: 50%;
	
}

#kihontitel{
	width: 200px;
	margin-right: 10%;
	margin-bottom: 10%;
	margin-left: 10%;
	float: left;
	margin-top: 10%;
}	

#accesstitel{
	width: 200px;
	margin-right: 10%;
	margin-bottom: 10%;
	margin-left: 20%;
	margin-top: 10%;
}	

#contacttitle{
	width: 200px;
	float: left;
	margin-top: 10%;
	margin-right: 10%;
	margin-bottom: 10%;
	margin-left: 10%;
}	

.mapri ul{
	margin-bottom: 10%;
	margin-left: 20%;
}

.formr{
	float: left;
	width: 50%;
	padding: 7px;
		}


}


@media screen and (min-width:1440px) {
.blog .inner,.service .inner,.map .inner,.recruit .inner,.kihon .inner ,.contact .inner {
	width: 80%;
	margin-right: auto;
	margin-left: auto;
}	
	
	}