/* CSS Document */
html{ height:100%;}
body{ background:#fff; height:100%; color:#221814; position:relative;}
a{ color:#221814;}
h1,h2,h3,p{ line-height:1.2em;}
img{ max-width:100%; vertical-align:bottom;}
.sp{ display:none;}
.wrap{ width:1192px; max-width:100%; margin:0 auto; position:relative;}
p{ font-size:1em; line-height:1.6em; margin:0 auto;}
a:hover img{ opacity:0.8;}
h1.title{ margin:50px auto 30px;}



/*トグルボタン*/
#navi_toggle{ width:100%; display:none; background:rgba(255,255,255,0.6); margin-top:60px; position:relative; z-index:1;}
#navi_toggle ul{ margin:0px 15px 0 0; }

#menubtn{
	width:40px;
	height:41px;
	display:none;
    position: absolute;
	cursor:pointer;
    top: 10px;
    right: 10px;
    z-index: 3;
	border:1px solid #7d8488;
    border-radius: 4px;        /* CSS3草案 */  
    -webkit-border-radius: 4px;    /* Safari,Google Chrome用 */  
    -moz-border-radius: 4px;   /* Firefox用 */
	font-family:Arial, Helvetica, sans-serif;
	}
#menubtn #menubtn_line{
    width: 40px;
    height:40px;
    position: absolute;
    top: 0px;
    right: 0px;
	
}
#menubtn #menubtn_line span {
    display: block;
    background: #7d8488;
    width:   23px;
    height: 2px;
    position: absolute;
    left: 9px;
    transition: all 0.4s;
    -webkit-transition: all 0.4s;
    -moz-transition: all 0.4s;
}
#menubtn p{color:#fff; position:absolute; bottom:3px; left:8px;}
#menubtn #menubtn_line span:first-child {
    top: 12px;
}
#menubtn #menubtn_line span:nth-child(2) {
    margin-top: -1px;
    top: 50%;
}
#menubtn #menubtn_line span:last-child {
    bottom: 12px;
}
#menubtn.active #menubtn_line span:first-child {
    -webkit-transform: translateY(7px) rotate(45deg);
    -moz-transform: translateY(7px) rotate(45deg);
    -ms-transform: translateY(7px) rotate(45deg);
    transform: translateY(7px) rotate(45deg);
}
#menubtn.active #menubtn_line span:nth-child(2) {
    opacity: 0;
}
#menubtn.active #menubtn_line span:last-child {
    -webkit-transform: translateY(-7px) rotate(-45deg);
    -moz-transform: translateY(-7px) rotate(-45deg);
    -ms-transform: translateY(-7px) rotate(-45deg);
    transform: translateY(-7px) rotate(-45deg);
}


/*ヘッダー*/
header { width:1092px; max-width:91%; margin:0 auto; overflow:hidden; position:relative; padding:20px 0 30px 9%;}
header h1.logo{ max-width:50%; float:left;}
header ul.nav { width:700px; margin:33px 0 0 auto;}
header ul.nav li{ font-size:0.9em; display:inline-block; margin-right:5px; text-align:center; letter-spacing:0.1em;}
header ul.nav li span{ display:block; font-size:1.3em; font-family:'Franklin Gothic Medium'; letter-spacing:0.2em;}
header ul.nav li a{ display:block; width:100%; height:100%; padding:10px;}
header ul.nav li a:hover{ color:#003F98;}


#navi_toggle ul{ width:100%; margin-left:auto;}
#navi_toggle ul li{ border-bottom:1px solid #ddd; margin:0px 0 4px; text-align:left;}
#navi_toggle ul li img{ margin-right:5px;}
#navi_toggle ul li span{ display:inline-block; font-size:1.2em; font-family:'Franklin Gothic Medium'; letter-spacing:0.2em; margin-right:10px;}
#navi_toggle ul li a{ display:block; width:100%; height:100%; padding:12px 15px 4px 15px;}


/*フッター*/
#footer_wrap{ width:100%; background:#e5ebee; padding:30px 0;}
footer{ width:965px; max-width:95%; margin:0 auto; overflow:hidden;}
footer .left_box{ width:290px; max-width:100%; text-align:left; float:left; line-height:1.2em;}
footer h1{ padding:5px 0;}
footer p{ font-size:1em; padding:0; margin:0;}

footer ul.nav{ padding:40px 0 0 330px; text-align:left;}
footer ul.nav li{ display:inline-block; margin:0 15px 15px 0; font-size:0.8em; line-height:1.4em; letter-spacing:0.1em; }
footer ul.nav li span{ display:block; font-size:1.2em; font-family:'Franklin Gothic Medium'; letter-spacing:0.2em;}

/*トップページ*/

h1.top_mainimage{ width:1092px; max-width:91%; margin:0 auto 140px; padding:0 0 0 9%;}



#top .sec1 ul li{ width:100%; overflow:hidden; margin-bottom:95px;}
#top .sec1 ul li a{ width:100%; height:100%; display:block;}
#top .banner_img{ max-width:67%; float:right;}
#top .banner_txt{ max-width:28%; margin:80px 0 0 5%;}

#top .blog_txt{ max-width:28%; margin:0 0 0 5%; float:left;}
#top .blog_list { border:1px solid #ccc; max-width:67%; margin-left:33%; text-align:left;}
#top .blog_list ul { margin:20px;}
#top .blog_list ul li{ margin-bottom:10px; padding:5px; font-size:1.6em; line-height:1.4em;}



#top .contact_banner{ background:url(../images/top_contact_banner_bg.jpg) no-repeat ; background-size:cover; object-fit:cover;}
#top .contact_banner .txt{ float:left; max-width:38%; margin:40px 0 0 5%;}
#top .contact_banner .tel{ padding:70px 0 40px 43%; text-align:left; max-width:55%;}

#top #contact dl { width:500px; max-width:95%; margin:20px auto; font-size:1.2em; line-height:1.4em; text-align:left;}
#top #contact dl dt{ width:100px; float:left; margin-bottom:10px; padding:5px; clear:left;}
#top #contact dl dd{ margin-left:120px; margin-bottom:10px; padding:5px;}
#top #contact dl dd span{ font-size:1.6em; color:#c30d22; display:inline-block; margin:0 3px;}
#top #contact dl dd a{ text-decoration:underline;}


#about .contents{ width:740px; max-width:90%; margin:0 auto 80px;}
#about .s_title1{ width:740px; max-width:90%; margin:0 auto;}
#about h2{ text-align:left;}
#about p{ font-size:1.2em; line-height:3.5em; text-align:left; margin:20px auto;}
#about p.name{ width:500px; max-width:100%; font-size:1.5em; line-height:1.2em; text-align:right; font-weight:bold; letter-spacing:0.1em; margin:20px auto 20px 0;}
#about p.name span{ font-size:0.7em;}
#about ul.images{ width:630px; max-width:100%; margin:30px auto 60px;}
#about ul.images li{ max-width:45%; padding:2%; display:inline-block;}
#about dl{ font-size:1.2em; line-height:1.6em; flex-wrap: wrap;
  display: -webkit-box; /*Android4.3*/
  display: -moz-box;    /*Firefox21*/
  display: -ms-flexbox; /*IE10*/
  display: -webkit-flex; /*PC-Safari,iOS8.4*/
  display: flex
}
#about dl dt{ padding:20px 0; width:125px; max-width:30%; border-bottom:1px solid #000; text-align:left;}
#about dl dd{ padding:20px 0; width:600px; margin-left:5%; max-width:65%; border-bottom:1px solid #888889; text-align:left;}
#about dl dd:last-child,#about dl dt:last-of-type{ border:none;}
#about h3{ text-align:left; font-size:1.8em; line-height:1.6em; margin:15px 0 5px; font-weight:bold;}

#privacy{ width:700px; max-width:90%; margin:0 auto 80px; text-align:left;}
#privacy h2{ font-size:1.5em; color:#003f98; margin:20px 0 10px; font-weight:bold; letter-spacing:0.1em;}
#privacy h3{ font-size:1.2em; line-height:1.4em; font-weight:bold; margin:5px 0;}
#privacy p{ font-size:1em; line-height:1.5em;}
#privacy p.text1{ line-height:2em;}

#business .contents{ width:880px; max-width:90%; margin:0 auto 30px;}
#business h2{ font-size:2em; font-weight:bold; line-height:1.6em; margin:0 auto 20px;}

#business h3{ margin:20px 0 10px; clear:left; text-align:left; font-size:1.8em; font-weight:bold;}
#business .left_image{ float:left; margin-right:5%; max-width:45%;}
#business p{ max-width:50%; font-size:1.2em; line-height:2em; text-align:left; margin-left:50%;}
#business p img{ margin-top:20px;}
#business .box{ overflow:hidden; margin-bottom:30px;}


#recruit .contents{ width:700px; max-width:90%; margin:0 auto 80px; text-align:left;}
#recruit h2{ font-size:2em; line-height:1.6em; font-weight:bold; margin:50px 0 10px; text-align:left;}
#recruit p{ font-size:1.3em; line-height:1.6em; font-weight:bold; text-align:center; margin:50px 0 0 0;}
#recruit p.text{ text-align:left; font-weight:normal;}
#recruit dl dt{
	width:110px;
	font-size:1.3em;
	float:left;
	padding:10px;
	text-align:center;
  position: relative;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
#recruit dl dt::before {
  position: absolute;
  top: 10%;
  content: '';
  width: 10px;
  height: 80%;
  border-top: 1px solid #000;
  border-bottom: 1px solid #000;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  left: 0;
  border-left: 4px double #000;
}
#recruit dl dt::after {
  position: absolute;
  top: 10%;
  content: '';
  width: 10px;
  height: 80%;
  border-top: 1px solid #000;
  border-bottom: 1px solid #000;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  right: 0;
  border-right: 4px double #000;
}

#recruit dl dd{ font-size:1.1em; margin-left:130px; text-align:left; line-height:3em; padding:10px;}





#thanks .contents{ width:600px; max-width:90%; text-align:left; font-size:1.2em; padding-bottom:40px; margin:0 auto;}
#thanks h2{ font-size:1.5em; line-height:1.4em;  margin:100px 0 30px; font-weight:bold; letter-spacing:0.2em;}
#thanks p{ font-size:1.2em; line-height:1.8em; margin:0 auto; padding:15px 0;}
#thanks p img{ margin:60px 0;}


/*グーぐるマップ*/
.gmap {
position: relative;
width:680px;
padding-bottom: 30%;
height: 0;
overflow: hidden;
max-width:100%;
margin:0 auto 0 0;
border:1px solid #CCCCCC;
}
 
.gmap iframe,
.gmap object,
.gmap embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}




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


}


/*960以下
 */
@media screen and (max-width: 960px){
header h1.logo{ width:200px; max-width:25%;}
header ul.nav { margin:15px 0 0 auto; max-width:75%;}
h1.top_mainimage{  margin:0 auto 70px;}

#top .banner_txt{ margin:60px 0 0 0;}


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

header{max-width:97%; padding:10px 0 20px 0;}
header ul.nav li a{padding:10px 5px;}

#top .banner_img{ max-width:60%; float:right;}
#top .banner_txt{ max-width:40%; margin:40px 0 0 0;}


#top .blog_txt{ max-width:40%; margin:20px 0 0 0; }
#top .blog_list {max-width:55%; margin-left:40%;}

#top .contact_banner .txt{max-width:40%; margin:20px 0 0 0;}
#top .contact_banner .tel{ padding:50px 0 20px 41%; max-width:57%;}
#business .left_image{ float:left; margin-right:5%; max-width:55%;}
#business p{ max-width:40%; font-size:1.2em; line-height:2em; text-align:left; margin-left:60%;}

}





/*767以下 ipadを含まない*/
@media screen and (max-width: 767px){
#menubtn{ display:block;}
header ul.nav{ display:none;}
#top .sec1 ul li{margin-bottom:50px;}
#top .blog_list ul li{ font-size:1.4em; margin-bottom:10px;}
header h1.logo{ width:200px; max-width:50%;}

footer .left_box{ float:none;}
footer ul.nav{ padding:20px 0 20px 10px; text-align:left;}


h1.top_mainimage {max-width:95%; padding:0 0 0 5%; margin:0 auto 30px;}
.spno{ display:none;}

#about p{ line-height:2em;}
#partner dl dt{ padding:10px 0 5px; width:auto; float:none; border-bottom:1px dotted #000; text-align:left;}
#partner dl dd{ padding:15px 0; margin-left:0; text-align:left;}


#thanks h2{ font-size:1.3em; margin:60px 0 20px;}
#thanks p img{ margin:30px 0;}


#business .box{ width:400px; max-width:100%; margin:20px auto 0;}
#business .left_image{ float:none; margin-right:0%; max-width:100%;}
#business p{ max-width:100%;  margin-left:0%; margin-top:10px;}

}






/*560以下 */
@media screen and (max-width: 560px){
#top .sec1 ul li{margin-bottom:30px; text-align:left;}

#top .banner_img{ max-width:100%; float:none;}
#top .banner_txt{ max-width:100%; margin:5px auto 0 0;}
#top .blog_txt{ max-width:100%; margin:5px auto 0 0;  float:none;}
#top .blog_list {max-width:90%; margin:0 auto;}
#top .blog_list ul li{ font-size:1.2em; margin-bottom:10px;}

#top .contact_banner{ }
#top .contact_banner .txt{ float:none; max-width:100%; margin:20px 0 0px 0;}
#top .contact_banner .tel{ width:300px; padding:0px 0 20px 0; text-align:center; max-width:90%; margin:0 auto;}

#top #contact dl dt{ float:none; margin-bottom:0; padding:0 5px;}
#top #contact dl dd{  margin:0px; margin-bottom:5px; padding:5px;}

#about ul.images li{ max-width:90%; padding:2%; display:inline-block;}
#about dl{ font-size:1.1em; line-height:1.6em; flex-wrap: wrap;
}
#about dl dt{ padding:10px 0 0; width:100%; max-width:100%; margin-top:10px; border-bottom:1px dotted #000;}
#about dl dd{ padding:10px 0; margin-left:0%; max-width:100%;}

#about dl dt:last-of-type{}

.mainimage1{ width:100%; height:180px; object-fit: cover;}
.mainimage2{ width:100%; height:100px; object-fit: cover;}
.mainimage3{ width:100%; height:140px; object-fit: cover;}

#recruit dl{flex-flow: column nowrap;}

#recruit dl dt{
	width:110px;
	float:none;
}

#recruit dl dd{ margin-left:0;}






/*グーぐるマップ*/
.gmap {
position: relative;
width:480px;
padding-bottom: 50%;
height: 0;
overflow: hidden;
max-width:100%;
margin:0 auto;
border:1px solid #CCCCCC;
}
 
.gmap iframe,
.gmap object,
.gmap embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}

}
/*414以下 iphone縦*/
@media screen and (max-width: 414px){



}