/* CSS Document */
html{ height:100%;}
body{ background:#fff; height:100%; color:#373737; 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:1190px; max-width:100%; margin:120px auto 0; position:relative;}
p{ font-size:1.4rem; line-height:1.8em; margin:0 auto; font-weight:300;}
p.text{text-align:left;}
.tel,.fax{font-family:Century Gothic,Verdana, Geneva, sans-serif; font-size:1.2em; line-height:1em;}
.tel i,.fax i{ display:inline-block; margin-right:5px;}
h2.title{ font-size:2.0rem; line-height:1.6em; font-weight:500; text-align:left;}




/*トグルボタン*/
#navi_toggle{ width:100%; display:none; background:rgba(255,255,255,0.9); margin-top:70px; padding-bottom:30px; position:relative; z-index:1;}
#navi_toggle ul{ margin:0px 15px 0 0; }
#menubtn{
	width:40px;
	height:41px;
	display:none;
    position: absolute;
    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_area{
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 140px;
background: #FFFFFF;
z-index: 1000;
}
header { width:1190px; max-width:100%; margin:0 auto; overflow:hidden; position:relative;}
header .nav_wrap{width:860px; max-width:100%; margin:40px auto 5px auto;}
header ul.nav { width:820px; max-width:90%; margin:0 auto; display:flex; flex-wrap: wrap; padding:0 30px; align-items:right; justify-content: center; position: relative;}
header ul.nav li{ margin:0 25px 10px 25px; padding:14px 0 0 0; font-size:1.4rem; line-height:1.2em; font-family: 'Roboto', sans-serif; text-align:center;}
header ul.nav li:first-child{ margin-left:-20px;}
header ul.nav li.header_logo{ width:163px; padding:0;}
header ul.nav_icon{
  width:800px; max-width:90%; margin:0 auto; display:flex; padding:0 30px;
  align-items:right;
  justify-content: flex-end;
  flex-direction: row;
  flex-wrap: wrap;
  margin:0 60px 0 auto;
}
header ul.nav_icon li{margin:0 15px 0px 0px;}

#navi_toggle ul{ width:220px; margin-left:auto;}
#navi_toggle ul li{ font-size:1.2rem; border-bottom:1px solid #a5d9ec; font-family: 'Roboto', sans-serif; margin:0px 0 8px; padding:3px 5px 2px 3px; text-align:left;}
#navi_toggle ul.nav_icon{padding:0 10px;  margin:0 10px 0 auto;}
#navi_toggle ul.nav_icon li{ border:none;}



header ul.menu__second-level li:first-child{ margin-left:0px;}

header ul.menu__second-level li{margin:0 ; padding:13px 25px 13px 15px; font-size:1.2rem; position:relative;}
header ul.menu__second-level li:after{
	content:"";
	display:block;
    width: 5px;
    height: 5px;
    border-top: 1px solid #333;
    border-right: 1px solid #333;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
	position:absolute;
	right:10px;
	top:15px;
}
header ul.menu__second-level a:hover{ text-decoration:none; color:#578996;}
ul.menu__second-level {
    visibility: hidden;
    opacity: 0;
    z-index: 1;
}
.nav > li a:hover {
    -webkit-transition: all .5s;
    transition: all .5s;
	color:#999999;
	text-decoration:underline;
}

.menu__second-level li {
    border-bottom: 1px solid #fff;
}

.nav > li.menu__single {
    position: relative;
}

li.menu__single ul.menu__second-level {
    position: absolute;
    top: 40px;
    background: #f4f4f4;
    -webkit-transition: all .2s ease;
    transition: all .2s ease;
	width: max-content;
}

li.menu__single:hover ul.menu__second-level {
    top: 50px;
    visibility: visible;
    opacity: 1;
}



/*フッター*/
#footer_wrap{ width:100%; background:#F7F7F7; padding:30px 0 60px;}
footer{ width:965px; max-width:95%; margin:0 auto; overflow:hidden;}
footer p{ width:80%; font-size:1.8rem; line-height:1.4em; padding:0; margin:30px auto; font-weight:500;}
footer ul.footer_btn{ }
footer ul.footer_btn li{ background:#578996; display:inline-block; margin:0px 20px 10px 0; font-size:1.8em; line-height:1.2em; color:#fff;
 padding:20px 30px 20px 60px; position:relative; 
   border-radius: 12px;
    -webkit-border-radius: 12px;  
    -moz-border-radius: 12px;
}
footer ul.footer_btn li a{ color:#fff;}
footer ul.footer_btn li.tel:before{ display:block; content:""; background:url(../images/icon3.png) no-repeat; background-size:cover; width:36px; height:35px; position:absolute; left:15px; top:12px;}
footer ul.footer_btn li.mail:before{ display:block; content:""; background:url(../images/icon4.png) no-repeat; background-size:cover; width:36px; height:35px; position:absolute; left:15px; top:12px;}

footer p.copy { font-size:1.2rem; line-height:1.2em; text-align:center; clear:both; padding-top:30px; font-weight:300;}
/*トップページ*/
#top #service,#top #recruit,#top #company{ width: 960px; max-width:90%; margin:0 auto; }

.mainimage{ width:1090px; padding-top:50.09174311926606%; position:relative; max-width:100%; margin:0 auto;}

#top .mainimage{ background:url(../images/mainimage.jpg) no-repeat left center; background-size:cover;}
.mainimage img{ max-width:40%; position:absolute; top:100px; left:50px;}

#top h1.main_title{ margin:60px auto; max-width:70%;}

#top h1.title{ font-size:1.4rem; line-height:1.2em; font-family: 'Roboto', sans-serif; text-align:left; margin:70px 0 30px; }
#top h1.title:after,#news h1.title:after{
content: "";
display: inline-block;
vertical-align: middle;
width: 70px;
height: 1px;
margin-left: 20px;
margin-top: -2px;
border-bottom: 1px dashed #333333;
}




#top #service{ display:flex; flex-wrap: wrap; align-items:center; justify-content:space-around;}
#top #service h1{ width:100%;}
#top #service .image1{ width: calc(100% - 100px); border-radius: 12px; -webkit-border-radius: 12px;   -moz-border-radius: 12px;}
#top #service .left_box{ width:440px; max-width:50%; text-align:left;}
#top #service .left_box p{ font-size:1.4rem; line-height:2em; font-weight:300; color:#6a5d56; text-align:left; padding:30px 0 30px 0}
#top #service h2{ font-size:2.4rem; line-height:2em; color:#578996; margin:60px 0;}


#top #service .right_box{ width:450px; max-width:50%; margin-top:30px;}
#top #service .right_box ul{ width:320px; margin:30px 0 30px auto;}
#top #service .right_box ul li{  padding:8px 70px 8px 20px; margin:0 0 8px 0; background:#578996; font-size:1.6rem; line-height:1.2em; position:relative;}
#top #service .right_box ul li span{ font-size:1.2rem; position:absolute; right:0; padding:0 20px; top:8px;}
#top #service .right_box ul li:after{
	content:"";
	display:block;
    width: 5px;
    height: 5px;
    border-top: 1px solid #fff;
    border-right: 1px solid #fff;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
	position:absolute;
	right:10px;
	top:15px;
}
#top #service .right_box ul a{ color:#fff;}

#top .sec3_wrap{ background:#f7f7f7; width:100%; padding:30px 0; margin-bottom:100px;}


#top #company .company{ width:800px; max-width:100%; margin:0 auto;  display:flex; flex-wrap: wrap; flex-direction: row-reverse; justify-content:flex-start; }
#top #company .company .right_box{ width:265px; padding:20px; }
#top #company .company .left_box{ width:480px; max-width:100%; text-align:left;}
#top #company .company .left_box p{ font-size:1.4rem; line-height:2em; color:#6a5d56; padding:20px 0 20px 15px;}
#top #company .company .left_box ul.nav_icon{ margin:0px 0 20px 15px;}
#top #company .company .left_box ul.nav_icon li{ display:inline-block; margin-right:20px;}


.gmap {
position: relative;
width:960px;
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%;
}
	


.mainimage h1{ font-size:2.6rem; line-height:1.2em; margin-bottom:20px; font-weight:500;}
.mainimage h1 span{ font-size:1.8rem;}
.mainimage p{ font-size:1.4rem; line-height:1.4em; font-weight:500;}
.mainimage .text_box{ width:80%; position:absolute; top:50%; left:0; right:0; margin:20px auto;}
 
 
#recruit .mainimage{ background:url(../images/recruit_image.jpg) no-repeat center top; background-size:cover;}
#recruit .sec1 h2.title{width:940px; max-width:90%; margin:100px auto 20px;}
#recruit .sec1 p.text{width:940px; max-width:90%; margin:0 auto;}
#recruit .sec2 p{ line-height:2.4em; margin:100px auto;}
#recruit .sec3 p{ line-height:2em; margin:100px auto;}
#recruit .sec2 h1,#recruit .sec3 h1{ margin:100px auto 30px auto;}
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
a.anchor{
    display: block;
    padding-top: 70px;
    margin-top: -70px;
}


#thanks{ width:600px; max-width:90%; text-align:left; font-size:1.2em; padding-bottom:40px;}
#thanks h2{ font-size:1.5em; line-height:1.4em; color:#627a86; margin:40px 0 20px; letter-spacing:0.2em;}
#thanks p{ font-size:1.2em; line-height:1.8em; margin:0 auto; padding:15px 0;}




/*1192以下 */
@media screen and (max-width: 1000px){

}


/*960以下
 */
@media screen and (max-width: 960px){





}
/*870以下
 */
@media screen and (max-width: 870px){
#menubtn{ display:block;}
header ul.nav li{ display:none;}
header ul.nav{ position:absolute; top:10px; margin:auto; left:0; right:0;}
header ul.nav li.header_logo{ display:block;}
.header_area{ height: 80px;}
.wrap{margin:80px auto 0; }
header .nav_wrap ul.nav_icon { display:none;}

header .nav_wrap{margin:10px auto 5px auto;}
header ul.nav { max-width:90%; padding:0 5%;}
header ul.nav_icon{ max-width:90%; padding:0 5%;}
header ul.nav li:first-child{ margin-left:0;}


.mainimage{padding-top:80%; position:relative; max-width:100%;}
.mainimage img{ max-width:60%; position:absolute; top:40px; left:20px;}
#service_event .mainimage{ background:url(../images/service_event_image_sp.jpg) no-repeat left center; background-size:cover;}

#top #service{ display:block; text-align:center;}
#top #service h1.title{ margin:80px auto 40px;}
#top #service .left_box,#top #service .right_box{ width:800px; max-width:100%; margin:30px auto;}
#top #service h2{margin:30px 0;}

#top #company .company{ flex-direction: row; }




/*767以下 ipadを含まない*/
@media screen and (max-width: 767px){
.spno{ display:none;}
	
header .tel{ font-size:1.4em; margin-top:28px;}
header .left_box{ width:230px; padding:10px 0 0 10px; float:left;}


}





/*643以下 */
@media screen and (max-width: 643px){
.mainimage h1{ font-size:2.2rem;}
.mainimage h1 span{ font-size:1.6rem;}
.mainimage p{ font-size:1.2rem;}






}

/*560以下 */
@media screen and (max-width: 560px){
/*グーぐるマップ*/
.gmap {
position: relative;
width:480px;
padding-bottom: 70%;
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%;
}
	
h2.title{ font-size:1.6rem; line-height:1.4em;}
#recruit .sec2 p{ line-height:2.4em; margin:50px auto;}
#recruit .sec3 p{ line-height:2em; margin:50px auto;}
#recruit .sec2 h1,#recruit .sec3 h1{ margin:50px auto 20px auto;}

}
/*414以下 iphone縦*/
@media screen and (max-width: 414px){
.spno2{ display:none;}
footer ul.footer_btn li{ font-size:1.6em; line-height:1.2em; color:#fff;
 padding:15px 15px 15px 50px;
}
footer ul.footer_btn li.tel:before{left:10px; top:7px;}
footer ul.footer_btn li.mail:before{ left:10px; top:7px;}


#top .mainimage{ padding-top:80%; }
.mainimage{ padding-top:110%; }
.mainimage h1{ font-size:2rem;}
.mainimage h1 span{ font-size:1.4rem;}
.mainimage p{ font-size:1rem;}




}