@charset "utf-8";
/* CSS Document */


/* common&reset */
body, div, ul, ol, li, dl, dt, dd, h1, h2, h3, h4, h5, h6, a, pre, form, fieldset, input, textarea, p, blockquote, th, td, address {
	font-style: normal;
	font-weight: normal;
	font-size:100%;
	margin: 0;
	padding: 0;
	}

/* iOSでのデフォルトスタイルをリセット */
input[type="submit"],
input[type="button"] {
  border-radius: 0;
  -webkit-box-sizing: content-box;
  -webkit-appearance: button;
  appearance: button;
  border: none;
  box-sizing: border-box;
  cursor: pointer;
}
input[type="submit"]::-webkit-search-decoration,
input[type="button"]::-webkit-search-decoration {
  display: none;
}
input[type="submit"]::focus,
input[type="button"]::focus {
  outline-offset: -2px;
}

SCSS

/* iOSでのデフォルトスタイルをリセット */
input[type="submit"],
input[type="button"] {
  border-radius: 0;
  -webkit-box-sizing: content-box;
  -webkit-appearance: button;
  appearance: button;
  border: none;
  box-sizing: border-box;
    &::-webkit-search-decoration {
      display: none;
    }
    &::focus {
      outline-offset: -2px;
    }
}


ul, li {
	list-style-type: none;
}

table {
	border-collapse: collapse;
	border-spacing: 0;
}
img {
	border: 0 none;
	width:100%;
}
a {
	text-decoration:none;
	color: #2EA7E0;
}

a:hover {
	color:#F60;
}

body {
	width: 100%;
	height:100%;
	background-position: 50% 50%;
	background-attachment:fixed;
	font-size: 18px;
	color: #333;
	line-height: 2em;
    font-family:"游ゴシック Medium",YuGothic,YuGothicM,"Hiragino Kaku Gothic ProN","Hiragino Kaku Gothic Pro",メイリオ,Meiryo,sans-serif;
	}


a:hover img {
	opacity:0.75;
	filter: alpha(opacity=75);
	-ms-filter: "alpha( opacity=75 )";
}
section {}

footer{}

article, aside, figure, figcaption, footer, header, nav, section {
	display: block;
}

/*共有*/
.cf:after {
  display: block;
  clear: both;
  content: "";
}

.pc{display:block;}
.sp{display:none;}


.pan{}

.sps{letter-spacing:-0.2em;}

span.indent{display:block;text-indent:-1em;padding-left:1em;}

/*ヘッダー*/
header{height:86px;}

header h1{float:left;padding:21px 0 0 17px;}
header h1 img{max-width:300px;width:100%;}

.header_contact{
	background:#FF0;
	margin:0;
	line-height:1em;
	max-width:140px;
	float:right;
	width:30%;
	padding: 35px 20px 30px;
	height: 21px;
	}
.header_contact img{max-width:222px;width:100%;}


/*ヘッダーメニュー*/
.header_menu{float:right;width:70%;}
.menu{float:right;width:78%;}
.menu li{float:right;padding:0 3% 0 0;}
.menu li a{display:block;padding:23px 2% 23px 0;width:100%;}


/*インナー*/
.inner{width:96%;padding:0;max-width:1200px;margin:0 auto;}



/*main*/
.main{background:url(../img/main_bg.jpg) no-repeat;background-size:cover;padding:50px 0 0;}
.main img{max-width:1200px;margin:0 auto;}
.main_btm{margin:5px 0;}

/*フッター*/
footer{}
footer .ftr_logo{max-width:240px;margin:5% auto 2%;display:block;width:30%;}
footer .ftr_wrap{background:#009EEE;font-size:0.9em;padding:20px 0 10px;}
footer .ftr_inner{width:660px;margin: 0 auto;}
footer .ftr_wrap .ftr_logo2{display:block;max-width:210px;float:left;margin:10px 0 0;}
footer .ftr_wrap ul{float:right;}
footer .ftr_wrap ul li{float:left;padding:0 5px;}
footer .ftr_wrap ul li a{color:#FFF;padding-bottom:2px;border-bottom:1px #FFF dashed;}
footer .ftr_wrap ul li a:hover{color:#FF0;border-bottom:1px #ff0 dashed;}
footer .copyright{text-align:center;color:#FFF;}

.pgtop{width:60px;height:60px;position:fixed;bottom:0;right:0;}


/*メニュー*/
body{
  margin: 0;
}
a{
  color: #333;
  text-decoration: none;
}


.navi{display:none;}


/*メイン*/
main{font-size:22px;line-height:2.2em;}

/*コンセプト*/
.concept{text-align:center;padding:2% 0 0;}
.line_wrap{background:#009EEE;margin:3% 0;}
.line_wrap span{background:url(../img/mark.png) left center no-repeat;padding:3px 0 3px 35px;color:#FF0;font-size:20px;}

/*7つの約束*/
.seven_wrap{padding:5% 0 0;}
.seven_wrap h2 img{max-width:790px;margin:3% auto;width:70%;}
.seven_wrap .btn_wrap{margin:5% 0;}
.seven_wrap .btn_wrap li{padding:0.5% 0;}

/*seven_all1*/
.seven_wrap .seven_all{background: linear-gradient(#009EEE, #4DBCEE);padding:5% 0;margin-bottom:2%;}

.seven_all h3{
	font-size:35px;
	color:#FFFF00;
	font-weight:bold;
	line-height:1.2em;
	margin-bottom:0.5em;
	}

.seven_all h3 span{
	display:block;
	background:#FFF;
	width:4em;
	text-align:center;
	border-radius: 2em;
    -webkit-border-radius: 2em;
    -moz-border-radius: 2em;
	line-height:1em;
	padding:0.5em;
	font-size:16px;	
	color:#009EEE;
	margin-bottom:0.5em;
	}
	
.seven_all p{font-size:20px;color:#FFF;line-height:1.6em;}
.seven_all .left{width:55%;float:left;padding-right:5%;}
.seven_all .right{width:40%;float:right;}
.seven_all .right img{width:100%;}


/*個別*/
.seven3 .left{diplay:none;}

.seven4 .left{width:50%;}
.seven4 .right{width:45%;}

.seven5 .left{width:40%;}
.seven5 .right{width:55%;}

.seven7 .left{width:50%;}
.seven7 .right{width:45%;}



/*画像サイズ*/
.seven1 .right img{max-width:423px;}
.seven2 .right img{max-width:380px;}
.seven3 .right img{max-width:446px;}
.seven4 .right img{max-width:514px;}
.seven5 .right img{max-width:663px;margin-top:3%;}
.seven6 .right img{max-width:480px;}
.seven7 .right img{max-width:514px;}




/*違い*/
.comparison_wrap{padding:6% 0;}
.comparison_wrap h2{
	width:80%;
	max-width:25em;
	text-align:center;
	line-height:1.4em;
	margin:0 auto;
	color:#009EEE;
	padding:10px 0;
	border-bottom:2px #009EEE solid;
	border-top:2px #009EEE solid;
	}


.comparison_wrap .wrap{padding:5% 0;}
.comparison_wrap .wrap .left{float:left;width:50%;}
.comparison_wrap .wrap .right{float:right;width:48%;font-size:20px;line-height:1.8em;}


/*データ*/
.date_wrap{background:#ffff66;padding:6% 0 7%;}
.date_wrap h2{
	width:80%;
	max-width:11em;
	text-align:center;
	line-height:1.4em;
	margin:0 auto;
	color:#009EEE;
	padding:10px 0;
	border-bottom:2px #009EEE solid;
	border-top:2px #009EEE solid;
	}

.date_wrap .wrap{padding:5% 0 0;}
.date_wrap .left{float:left;width:59.3%;}
.date_wrap .right{float:right;width:39%;}

/*ごあいさつ*/
.about_wrap{padding:8% 0;}
.about_wrap h2{
	width:80%;
	max-width:13em;
	text-align:center;
	line-height:1.4em;
	margin:0 auto;
	color:#009EEE;
	padding:10px 0;
	border-bottom:2px #009EEE solid;
	border-top:2px #009EEE solid;
	}
.about_wrap h3{
		font-family: "游明朝", YuMincho, "Hiragino Mincho ProN W3", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
		text-align:center;
		padding:3% 0 0;
		font-size:25px;
		}



.about_wrap .wrap{padding:5% 0 0;}
.about_wrap .left{float:left;width:59.3%;font-size:20px;line-height:1.6em;}
.about_wrap .right{float:right;width:39%;}

.about_wrap .left .sign{display:block;text-align:right;padding-top:3%;}

/*会社概要*/
.outline_wrap{background:#e5f5fd;padding:8% 0;}
.outline_wrap h2{
	width:80%;
	max-width:11em;
	text-align:center;
	line-height:1.4em;
	margin:0 auto;
	color:#009EEE;
	padding:10px 0;
	border-bottom:2px #009EEE solid;
	border-top:2px #009EEE solid;
	}

.outline_wrap .wrap{padding:5% 0 0;}
.outline_wrap .left{float:left;width:35%;}
.outline_wrap .right{float:right;width:63%;}

.outline_wrap .left table{font-size:16px;width:100%;line-height:1.4em;}
.outline_wrap .left table th{background:#F2F2F2;border:1px #3C3C3C solid;text-align:center;padding:1%;width:28%;}
.outline_wrap .left table td{background:#fff;border:1px #3C3C3C solid;padding:1%;width:68%;}
.outline_wrap .left li img{
	max-width:20px;
	position: relative;
	left: 5px;
	top: 5px;
	}

.map_btm{max-width:517px;margin:3% 0;}

.ggmap {
position: relative;
padding-bottom: 56.25%;
padding-top: 30px;
height: 0;
overflow: hidden;
}
 
.ggmap iframe,
.ggmap object,
.ggmap embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}

/*お問い合わせ*/
.contact_wrap{padding:8% 0;}
.contact_wrap h2{
	width:80%;
	max-width:13em;
	text-align:center;
	line-height:1.4em;
	margin:0 auto;
	color:#009EEE;
	padding:10px 0;
	border-bottom:2px #009EEE solid;
	border-top:2px #009EEE solid;
	}


.contact_wrap ul{width:90%;max-width:800px;margin:5% auto 0;}
.contact_wrap ul li{padding:1% 0;line-height:1.2em;}
.contact_wrap ul li span.hissu{
	padding-right:3em;
	background:url(../img/icon_hissu.gif) right no-repeat;
	min-height:26px;
	}
.contact_wrap input{width:100%;margin:0.5em 0;}
.contact_wrap textarea{width:100%;height:300px;margin:0.5em 0;}

.contact_btn_wrap{text-align:center;padding:3% 0 0;}
.contact_wrap input.submit{
	max-width:10em;
	border-radius:1.5em;
    -webkit-border-radius:1.5em;
    -moz-border-radius:1.5em;
	border:none;
	cursor:pointer;
	padding:0.5em;
	background:#009EEE;
	color:#FFF;
	font-weight:bold;
	}


/*お問い合わせ 確認・サンクス*/
.contact_wrap2{padding:5% 0;}
.contact_wrap2 h2{
	width:80%;
	max-width:13em;
	text-align:center;
	line-height:1.4em;
	margin:0 auto;
	color:#009EEE;
	padding:10px 0;
	border-bottom:2px #009EEE solid;
	border-top:2px #009EEE solid;
	}


.contact_wrap2 input.back{
	max-width:10em;
	border-radius:1.5em;
    -webkit-border-radius:1.5em;
    -moz-border-radius:1.5em;
	border:none;
	cursor:pointer;
	padding:0.5em 2em;
	background:#ccc;
	color:#333;
	font-weight:bold;
	}

.contact_wrap2 input.submit{
	max-width:10em;
	border-radius:1.5em;
    -webkit-border-radius:1.5em;
    -moz-border-radius:1.5em;
	border:none;
	cursor:pointer;
	padding:0.5em 2em;
	background:#009EEE;
	color:#FFF;
	font-weight:bold;
	}

.contact_wrap2 .error_messe{color:#F00;}

.contact_wrap2 .kakunin{padding:5% 0;display:block;text-align:center;}
.formTable{width:90%;max-width:1200px;margin:0 auto;}
.formTable th{width:26%;border:1px #ccc solid;padding:2%;background:#009EEE;color:#FFF;}
.formTable td{width:66%;border:1px #ccc solid;padding:2%;}

.thanks_text{padding:10% 0;text-align:center;}

.contact_wrap2 .top_back{
	max-width:10em;
	border-radius:1.5em;
    -webkit-border-radius:1.5em;
    -moz-border-radius:1.5em;
	border:none;
	cursor:pointer;
	padding:0.5em 2em;
	background:#ccc;
	color:#333;
	font-weight:bold;
	}

@media only screen and (max-width: 760px) {
/*構築用　コピーしてあとで消す*/




}


@media screen and (max-width: 840px) {
    .navi_item {
      margin-left: 0;
      font-size: 18px;
	  line-height:1.4em;
	  border-bottom:1px #888 dashed;
	  }
}


@media only screen and (max-width: 1240px) {
.header_menu{display:none;}	
	
/*ハンバーガーボタン*/
#menu{
	display:block;
	background:#FFFF00;
	width:86px;
	height:86px;
	float:right;
	position:absolute;
	right:0;
	z-index:999;
	top:0;
	}
#menu:after {
  display: block;
  clear: both;
  content: "";
}

.el_humburger {
  /*position: fixed;*/
  top: 30%;
  padding-top: 1px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  padding-top: 0px;
  z-index: 20;
  cursor: pointer;
  pointer-events: auto;
  color: #000;
  text-align: center;
  position: relative;
  z-index:999;
  }
 

 
.el_humburger_wrapper {
  margin-bottom: 5px;
  width: 50px;
  max-width:60px;
  display: inline-block; }
 

.el_humburger_text {
  font-size: 12px;
  letter-spacing: 0.1em;
  font-family: "游ゴシック Medium", YuGothic, "Yu Gothic", "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, sans-serif; }
 
.js_humburgerOpen .el_humburger_text.el_humburger_text__menu {
  display: none; }
 
.el_humburger_text.el_humburger_text__close {
  display: none; }
 
.js_humburgerOpen .el_humburger_text.el_humburger_text__close {
  display: block; }
  
.el_humburger span.el_humburger_bar {
  display: block;
  width: 100%;
  margin: 0 auto 25%;
  height: 4px;
  background: #009EEE;
  -webkit-transition: all .2s ease-in-out;
  -o-transition: all .2s ease-in-out;
  transition: all .2s ease-in-out;
  }
 
.el_humburger span.el_humburger_bar:last-child {
  margin-bottom: 0; }
 
.js_humburgerOpen .el_humburger span.el_humburger_bar {
  background: #009EEE;
  }
 
.js_humburgerOpen .el_humburger span.el_humburger_bar.top {
  -webkit-transform: translateY(15px) rotate(-45deg);
  -ms-transform: translateY(15px) rotate(-45deg);
  transform: translateY(15px) rotate(-45deg); }
 
.js_humburgerOpen .el_humburger span.el_humburger_bar.middle {
  opacity: 0; }
 
.js_humburgerOpen .el_humburger span.el_humburger_bar.bottom {
  -webkit-transform: translateY(-17px) rotate(45deg);
  -ms-transform: translateY(-17px) rotate(45deg);
  transform: translateY(-17px) rotate(45deg); }
 
.el_humburgerButton.el_humburgerButton__close {
  top: 2%;
  right: 2%; }
 
.el_humburgerButton__close span.el_humburger_bar {
  display: block;
  width: 35px;
  margin: 0 auto;
  height: 4px;
  background: #000; }
 
.el_humburgerButton__close span.el_humburger_bar.top {
  -webkit-transform: translateY(5px) rotate(-45deg);
  -ms-transform: translateY(5px) rotate(-45deg);
  transform: translateY(5px) rotate(-45deg); }
 
.navi {
  position: fixed;
  display:block;
  right: 0;
  height: 100%;
  background-color: rgba(255, 255, 255, 0.9);
  width: 0;
  z-index: 3;
  padding-top: 80px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-transition: all 600ms ease-out;
  -o-transition: all 600ms ease-out;
  transition: all 600ms ease-out;
  overflow: hidden;
	z-index:900;
	top:0;
}

.js_humburgerOpen .navi {
	width: 100%;
	opacity: 0.90;
	background-color: rgba( 0, 0, 0, 0.80 );
	overflow-y: auto;
	z-index:900;
	top:0;
}
	

 
.navi_item {
  font-size: 20px;
  white-space: nowrap;
  margin:0 12% 0 4%;
  border-bottom:1px #888 dashed;
  }
  
.navi_item a{
	color:#FFF;
	display:block;
	padding:2px 0  2px 0.5em ;
}
.navi_item a:hover{
	color:#f7b52c;
	background-color: rgba( 0, 0, 0, 0.80 );
	}
.navi_item.op_innerLink {
  cursor: pointer;
}
}



/*スマホ基本*/
@media only screen and (max-width: 760px) {

/*共有*/
.pc{display:none;}
.sp{display:block;}
	
/*header*/
header h1{width:65%;}

.main{padding:0;}

/*メイン*/
main{line-height:1.8em;}


.inner{width:90%;}

/*7つの約束*/
.seven_wrap h2 img{max-width:450px;}

.seven_all{padding:8% 0 !important;}
.seven_all .left{width:100%;float:none;padding-right:0;}
.seven_all .right{width:100%;padding:5% 0 0;}
.seven_all .right img{width:100%;margin:0 auto;display:block;}
.seven_all p{display:block;float:left;width:100%;font-size:18px;}

.seven2{padding:8% 0 2% !important;}


/*違い*/
.comparison_wrap .wrap .left{float:none;width:100%;margin-bottom:3%;}
.comparison_wrap .wrap .right{float:none;width:100%;}

/*データ*/
.date_wrap{background:#FFFF00;padding:8% 0 5%;}
.date_wrap .left{float:none;width:100%;}
.date_wrap .right{float:none;width:100%;}

/*ご挨拶*/
.about_wrap .left{float:none;width:100%;line-height:1.8em;margin-top:5%;}
.about_wrap .right{float:none;width:100%;}

/*会社概要*/
.outline_wrap .left{float:none;width:100%;padding:0 0 5%;}
.outline_wrap .left table th{padding:2%;}
.outline_wrap .left table td{padding:2%;}
.outline_wrap .right{float:none;width:100%;}



/*フッター*/
footer{}
footer .ftr_inner{width:90%;margin: 0 auto;line-height:1.4em;}
footer .ftr_wrap{font-size:2.1vw;padding-bottom:60px;}
footer .ftr_wrap .ftr_logo2{width:95%;float:none;margin:3% auto 0;}
footer .ftr_wrap ul{float:none;margin:3% auto 0;width:340px;font-size:12px;}
footer .copyright{padding-top:5%;}


/*お問い合わせ*/
.formTable{width:100%;}
.formTable th{width:96%;border:none;padding:2%;background:#009EEE;color:#FFF;float:left;}
.formTable td{width:96%;border:none;padding:2%;float:left;}
.contact_wrap2 input.submit{margin:5% 0 2%;}


}

@media screen and (max-width: 400px) {
.contact_wrap a div {
    font-size: 8vw;
}
}