/* 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:140px 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;}
.contents{ width: 960px; max-width:90%; margin:0 auto; }
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; text-align:left;}
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;}
/*トップページ*/

.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,#news h1.title{ font-size:1.4rem; line-height:1.2em; font-family: 'Roboto', sans-serif; text-align:left; margin:30px 0; }
#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 .sec2{ display:flex; flex-wrap: wrap; align-items:center; justify-content:space-around;}
#top .sec2 .image1{ width: calc(100% - 100px); border-radius: 12px; -webkit-border-radius: 12px;   -moz-border-radius: 12px;}
#top .sec2 h1.title{ width:100px; font-size:1.4rem; line-height:1.2em; font-family: 'Roboto', sans-serif; text-align:left; margin:30px 0; text-align:center; }
#top .sec2 h1.title:after{
display: block;
width: 1px;
height: 45px;
margin: 20px auto 0;
border-bottom: none;
border-right: 1px dashed #333333;
}

#top .sec2 .left_box{ width:440px; max-width:50%; text-align:left;}
#top .sec2 .left_box p{ font-size:1.4rem; line-height:2em; font-weight:300; color:#6a5d56; text-align:left; padding:30px 0 30px 0}
#top .sec2 h2{ font-size:2.4rem; line-height:2em; color:#578996; margin:60px 0;}


#top .sec2 .right_box{ width:450px; max-width:50%; margin-top:30px;}
#top .sec2 .right_box ul{ width:320px; margin:30px 0 30px auto;}
#top .sec2 .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 .sec2 .right_box ul li span{ font-size:1.2rem; position:absolute; right:0; padding:0 20px; top:8px;}
#top .sec2 .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 .sec2 .right_box ul a{ color:#fff;}

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


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

#top #news ul {
	padding: 0;
	list-style: none;
	margin-top: .7rem;
	margin:30px auto;
	text-align:center;
	display:flex;
	width:900px;
	max-width:100%;
	justify-content: center;
	 flex-wrap: wrap;
}

#top #news ul li{ width:270px; margin:0 10px 20px;}
#top #news ul li img{ width:260px; height:180px; object-fit: cover;}
#top #news a {
	padding-bottom: .5rem;
}
#top #news p.time{ text-align:center; font-size:1.1em;}
#top #news p.text{
	max-width:95%;
	margin:10px auto;
	text-align:left;
	font-size:1.1em; line-height:1.4em;
}

#top #news .text-overflow {
  overflow: hidden;
  width:260px;
	height:3.6em;
}
 
 

#top #news .news_btn{ text-align:right; padding:5px 0 10px 0;}
#news .news_list{	display:flex;
	width:900px;
	padding-bottom:100px;
	max-width:100%;
	justify-content: start;
	 flex-wrap: wrap;
}
#news .news_list_box{ width:270px; margin:0 10px 20px; text-align:left;}
#news .news_list_box h1{ font-weight:bold; font-size:1.4rem; line-height:1.2em; padding:20px 0 15px;}
#news .news_list_box p.time{ font-size:1.1em; text-align:right;}


ul.page-numbers{ width:200px; margin:40px auto;}
ul.page-numbers li{ display:inline-block; font-size:1.6rem; padding:3px 5px;}
ul.page-numbers .current{ font-weight:bold; text-decoration:underline;}


.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;}
#service_shop .mainimage{ background:url(../images/service_shop_image.jpg) no-repeat center center; background-size:cover;}


#service_shop .sec1 h2.title{width:940px; max-width:90%; margin:100px auto 20px;}
#service_shop .sec1 p.text{width:940px; max-width:90%; margin:0 auto;}

#service_shop .box_wrap{ display:flex; justify-content:center;}
#service_shop .box { width:200px; max-width:22%; margin:0 1% 1% 0; padding:2% 1%; border:1px solid #999;}
#service_shop .box h2{ font-size:2.0rem; line-height:1.2em; color:#578996; border-bottom:1px solid #666; padding:5px; margin-bottom:10px;}
#service_shop .box p{font-size:1.4rem; line-height:1.8em; text-align:left;}

#service_shop .sec2 h1,#service_shop .sec3 h1,#service_shop .sec4 h1{ margin:100px auto 30px auto;}
#service_shop .sec3 { width:840px; margin:0 auto; max-width:100%; overflow:hidden;}
#service_shop .sec3 img.image1{ max-width:45%; margin:0px 20px 30px; float:left;}
#service_shop .sec3 img.image2{ max-width:45%; margin:30px 20px; float:right;}
#service_shop .sec3 .text_box1{ width:420px; max-width:45%; margin-left:50%;}
#service_shop .sec3 .text_box2{ width:420px; max-width:45%; margin-right:50%;}
#service_shop .sec3 h2{ margin:20px 0;}
#service_shop .sec3 p{ text-align:left;}
#service_shop .sec4 ul{ width:560px; max-width:85%; margin:30px auto; font-size:1.6rem; line-height:1.4em; padding:30px 20px; border:1px solid #373737; border-radius: 12px; -webkit-border-radius: 12px;   -moz-border-radius: 12px;}
#service_shop .sec4 li{ margin:20px 0; text-align:left;}

#service_event .sec2 h1,#service_event .sec3 h1,#service_event .sec4 h1{ margin:100px auto 30px auto;}

#service_event .sec1 h2.title{width:940px; max-width:90%; margin:100px auto 20px;}
#service_event .sec1 p.text{width:940px; max-width:90%; margin:0 auto;}
#service_event .mainimage{ background:url(../images/service_event_image.jpg) no-repeat left top; background-size:cover;}
#service_event .mainimage .text_box{ position:absolute; top:40%;}

#service_event .box_wrap{ display:flex; justify-content:center; margin:30px auto;}
#service_event .box { width:260px; max-width:30%; margin:0 1% 1% 0; padding:2% 1%; border:1px solid #578996;}
#service_event .box h2{ font-size:1.8rem; line-height:1.2em; color:#578996; padding:5px; margin-bottom:15px; font-weight:500; position:relative; padding-left:45px; text-align:left;}
#service_event .box:nth-of-type(1) h2:before{ content:"1."; font-size:5rem; font-weight:400; position:absolute; left:0; top:10px;}
#service_event .box:nth-of-type(2) h2:before{ content:"2."; font-size:5rem; font-weight:400; position:absolute; left:0; top:10px;}
#service_event .box:nth-of-type(3) h2:before{ content:"3."; font-size:5rem; font-weight:400; position:absolute; left:0; top:10px;}
#service_event .box p{font-size:1.4rem; line-height:1.8em; text-align:left;}


#service_event .sec3 .service_list{ width:810px; max-width:90%; border:5px solid #578996; border-radius: 20px; -webkit-border-radius: 20px; -moz-border-radius: 20px; padding:2.4%; margin:50px auto;}
#service_event .sec3 ul{ display:flex; justify-content:center; margin:0 auto;}
#service_event .sec3 ul li { width:200px; max-width:24%; margin:0 1% 1% 0; padding:0; font-size:1.6rem; line-height:1.2em; color:#585859; font-weight:500;}
#service_event .sec3 ul li img{ margin-bottom:5px;}
#service_event .sec3 p{ font-size:2.4rem; line-height:1.4em; color:#BD3931; font-weight:bold; margin:30px auto;}

#service_event .sec4 .reason_list{ display:flex; justify-content:right; flex-wrap: wrap; align-items:center;}
#service_event .sec4 .reason_list img {margin-bottom:30px;}
#service_event .sec4 .reason_list .text_box{ text-align:left; padding:20px; width:calc(100% - 385px);}
#service_event .sec4 .reason_list .text_box h2{ font-size:2.6rem; line-height:1.4em; font-weight:bold; margin-bottom:30px;}
#service_event .sec4 .reason_list .text_box h2 span{color:#BD3931;}



#service_matching .mainimage{ background:url(../images/service_matching_image.jpg) no-repeat center center; background-size:cover;}
#service_matching .sec2 h1,#service_matching .sec3 h1{ margin:100px auto 30px auto;}
#service_matching .sec1 h2.title{width:940px; max-width:90%; margin:100px auto 20px;}
#service_matching .sec1 p.text{width:940px; max-width:90%; margin:0 auto;}

#service_matching .box_wrap{ display:flex; flex-wrap: wrap; justify-content:left; margin:30px auto;}
#service_matching .box { display:block; width:250px; max-width:27%; margin:0 4% 60px 0; padding:2% 1% 144px 1%; border:1px solid #578996; position:relative;}
#service_matching .box img{ position:absolute; bottom:0; right:0; left:0; margin:0 auto;}
#service_matching  .box_wrap .box:nth-of-type(3),#service_matching  .box_wrap .box:nth-of-type(7),#service_matching  .box_wrap .box:nth-of-type(10){ margin:0 0 60px 0;}
#service_matching .box_wrap .box::before{
	content:"";
	 display: block;
	 position:absolute;
	 right:-25px;
	  border-left: 14px solid #5bc0de;
	  border-top: 14px solid transparent;
	  border-bottom: 14px solid transparent;
	  }
#service_matching  .box_wrap .box:nth-of-type(3):before,#service_matching  .box_wrap .box:nth-of-type(7):before,#service_matching  .box_wrap .box:nth-of-type(10):before{
	content:"";
	 display: block;
	 position:absolute;
	 right:0;
	  border-left:none;
	  border-top:none;
	  border-bottom:none;
	  }
	  
#service_matching  .box_wrap .arrow { width:660px; max-width:70%; margin:-30px auto 20px; height: 50px; position:relative; border-top: 6px solid #5bc0de;
  border-left: 6px solid #5bc0de;
  box-sizing: border-box;}
  
#service_matching  .box_wrap .arrow:before{
	content:"";
	 display: block;
	 position:absolute;
	 top:-30px;
	 right: 0;
	 height:30px;
  border-right: 6px solid #5bc0de;
  
  }
#service_matching .box p{font-size:1.4rem; line-height:1.8em; text-align:left;}


#service_matching .box_wrap .arrow:after{
  content: "";
  position: absolute;
  bottom: -14px;
  left: -17px;
  border-top: 14px solid #5bc0de;
  border-left: 14px solid transparent;
  border-right: 14px solid transparent;
}
#service_matching .sec3 p{ width:700px; max-width:90%; padding:5%; margin:30px auto; font-size:2.0rem; line-height:1.6em; font-weight:500; text-align:left;}

#privacy .mainimage{ background:url(../images/privacy_image.jpg) no-repeat left top; background-size:cover;}
#privacy .sec1 p{ width:780px; max-width:90%; margin:60px auto; text-align:left;}
#privacy .sec2{ text-align:left;}
#privacy .sec2 h2{ font-size:1.8rem; line-height:1.2em; color:#2D9CC9; margin:30px 0 15px;}
#privacy .sec2 p{ padding:1em;}
#privacy .sec2 p.date{ text-align:right; margin-bottom:60px;}
#privacy .sec2 h3{ font-size:1.4rem; line-height:1.4em; margin:20px 0 0 0;}
 
 
 
#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;}
 



#contact .contents{ width:800px; max-width:100%; margin:0 auto 60px; display:flex; flex-wrap: wrap; justify-content:space-around;  align-items:start;}
#contact h1{ width:100px; margin:60px 0 20px 0 ;}
#contact .right_box{ width: calc(100% - 140px); padding-left:40px; text-align:left;}
#contact .tel{ background:#578996; display:inline-block; margin:20px 20px 40px 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;
}
#contact .tel a{ color:#fff;}
#contact .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;}


#contact .form dt{ font-size:1.4rem; line-height:1.4em; padding:5px; margin-top:20px;}
#contact .form dt span{ color:#CA171C;}
#contact .form dd{ padding:5px; font-size: 1.4rem; margin-bottom:20px;}
#contact .form dd input{ width: 90%;
    padding: 15px 5%;
    font-size: 1.4rem;
    font-weight: normal;
    background: #F5F5F5;
    border: none;
}
 
#contact .form dd .inquiry input,#contact .form dd.privacy input{ width:20px; background:none; font-size: 1.4rem;}
 
#contact .form dd.privacy { margin-top:60px;}

#contact .form .wpcf7-submit{ background:#578996; display:inline-block; margin:20px auto; font-size:1.4rem; line-height:1.2em; color:#fff;
 padding:10px 20px 10px 20px; position:relative; 
   border-radius: 7px;
    -webkit-border-radius: 7px;  
    -moz-border-radius: 7px;
	border:none;
	}
 
#top h1.anchor{
   content:"";
   display:block;
   padding-top:200px;
   margin:-200px 0 0;
}


#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 .sec2{ display:block; text-align:center;}
#top .sec2 h1.title{ margin:80px auto 40px;}
#top .sec2 .left_box,#top .sec2 .right_box{ width:800px; max-width:100%; margin:30px auto;}
#top .sec2 h2{margin:30px 0;}

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

#service_event .sec4 .reason_list{ justify-content:left; flex-wrap: wrap; align-items:flex-start;}

#service_event .sec4 .reason_list img { max-width:35%;}
#service_event .sec4 .reason_list .text_box{ padding:20px; width:calc(65% - 40px);}
#service_event .sec4 .reason_list .text_box h2{ font-size:2rem; line-height:1.4em; font-weight:bold; margin-bottom:20px;}

#contact .contents{ max-width:90%; margin:0 auto 60px; display:block; }
#contact .right_box{ width:90%; padding-left:5%;}




/*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;}

#service_event .box_wrap{ flex-wrap: wrap; justify-content:left;}
#service_event .box { width:260px; max-width:45%;}
#service_event .sec3 ul{  flex-wrap: wrap; justify-content:center;}
#service_event .sec3 ul li{  max-width:45%; font-size:1.4rem;}

#service_matching  .box_wrap .box:nth-of-type(3),#service_matching  .box_wrap .box:nth-of-type(7),#service_matching  .box_wrap .box:nth-of-type(10){  margin:0 7% 30px 0;}
#service_matching .box { width:250px; max-width:40%; margin:0 7% 30px 0; padding:2% 1% 144px 1%; border:1px solid #578996; position:relative;}
#service_matching .box_wrap .box::before{
	content:"";
	 display: block;
	 position:absolute;
	 right:-25px;
	  border-left: 14px solid #5bc0de;
	  border-top: 14px solid transparent;
	  border-bottom: 14px solid transparent;
	  }
#service_matching .box_wrap .box:nth-of-type(3):before,#service_matching  .box_wrap .box:nth-of-type(7):before{
	content:"";
	 display: block;
	 position:absolute;
	 right:-25px;
	  border-left: 14px solid #5bc0de;
	  border-top: 14px solid transparent;
	  border-bottom: 14px solid transparent;
	  }
	  
#service_matching  .box_wrap .arrow { display:none;}
#service_matching  .box_wrap .arrow:before{
	content:"";
	 display:none;
	 top:0;
	 right: 0;
	 height:0;
	 border:none;
  }
#service_matching .box_wrap .arrow:after{
  content: "";
  position: absolute;
  bottom: 0;
  left: 0x;
  border-top:none;
  border-left: none;
  border-right:none;
}
#service_matching .box_wrap .box:nth-of-type(10):before{ border:none;}


}





/*643以下 */
@media screen and (max-width: 643px){
#service_shop .box_wrap{ flex-wrap: wrap;}
#service_shop .box{ max-width:44%;}
#service_shop .box p{ width:90%; margin:0 auto;}

#service_shop .sec3 img.image1{ max-width:90%; margin:0px auto 30px; float:none;}
#service_shop .sec3 img.image2{ max-width:90%; margin:30px auto 0; float:none;}
#service_shop .sec3 .text_box1{ width:420px; max-width:90%; margin:0 auto;}
#service_shop .sec3 .text_box2{ width:420px; max-width:90%; margin:0 auto;}
.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%;
}
	
#service_event .box_wrap{ display:block; margin:30px auto;}
#service_event .box { width:260px; max-width:90%; margin:20px auto;}
#service_event .sec3 p{ font-size:2rem;}
	
h2.title{ font-size:1.6rem; line-height:1.4em;}
#service_shop .sec1 h2.title,#service_event .sec1 h2.title,#service_matching .sec1 h2.title,#recruit .sec1 h2.title{ margin-top:50px;}
#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;}

#service_shop .box{ width:360px; max-width:90%; margin-bottom:20px;}

#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;}


#service_event .sec4 .reason_list{ display:block;}
#service_event .sec4 .reason_list img { max-width:90%; margin:30px 0 0px 0;}
#service_event .sec4 .reason_list .text_box{ padding:20px; width:90%;}

#service_matching  .box_wrap .box:nth-of-type(3),#service_matching  .box_wrap .box:nth-of-type(7),#service_matching  .box_wrap .box:nth-of-type(10){  margin:0 auto 30px auto;}
#service_matching .box { width:260px; max-width:85%; margin:0 auto 30px auto;  padding:4% 4% 144px 4%; position:relative;}
#service_matching .box_wrap .box::before{
	content:"";
	 display: block;
	 position:absolute;
	 bottom:-35px;
	 right:calc(50% - 7px);
	  border-top: 14px solid #5bc0de;
	  border-left: 14px solid transparent;
	  border-right: 14px solid transparent;
	  border-bottom: 14px solid transparent;
	  }
#service_matching .box_wrap .box:nth-of-type(3):before,#service_matching  .box_wrap .box:nth-of-type(7):before{
	content:"";
	 display: block;
	 position:absolute;
	 bottom:-35px;
	 right:calc(50% - 7px);
	  border-top: 14px solid #5bc0de;
	  border-left: 14px solid transparent;
	  border-right: 14px solid transparent;
	  border-bottom: 14px solid transparent;
	  }


}