@charset "utf-8";

ul, li {
	list-style-type: none;
}
#content{
  font-family: "Noto Sans JP";
}
/*base*/
@media screen and (min-width: 768px) {
* {
	-webkit-text-size-adjust: 100%;
}
}
@media screen and (max-width: 667px) {
html,body {
	overflow-x: hidden;
}
}

/* sp or pc
------------------------------------------ */
br.pc {
	display: inline-block;
}
br.sp {
	display: none;
}
.spOnly, .sp_only_inline {
	display: none;
}
.none {
	display: none!important;
}
 @media screen and (max-width: 667px) {
br.pc {
	display: none;
}
br.sp {
	display: inline-block;
}
.pcOnly {
	display: none;
}
.spOnly {
	display: inline;
}
.sp_only_inline {
	display: inline;
}
}

/* breadcrumbsArea
------------------------------------------ */
.breadcrumbsArea{
  background: #555659;
  width: 100%;
  z-index: 9;
  position: relative;
}
.breadcrumbsArea *{
  box-sizing: border-box;
}
.breadcrumbsArea .breadcrumbs{
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
}
.breadcrumbsArea .breadcrumbs ul{
  width: 100%;
  display: flex;
  overflow-x: auto;
  white-space: nowrap;
  padding: 18px 300px 18px 0;
}
.breadcrumbsArea .breadcrumbs ul li{
  font-size: 12px;
  color: #fff;
  padding-right: 10px;
}
.breadcrumbsArea .breadcrumbs ul li::after{
  content: '>';
  padding-left: 5px;
}
.breadcrumbsArea .breadcrumbs ul li:last-child{
  padding-right: 0;
}
.breadcrumbsArea .breadcrumbs ul li:last-child::after{
  content: '';
}
.breadcrumbsArea .breadcrumbs ul li a{
  color: #fff;
}
@media only screen and (max-width: 667px) {
  .breadcrumbsArea{
    position: absolute;
    top: 105px;    
  }
  .mmbrSts-org ~ .breadcrumbsArea,
  .mmbrSts-org_pre ~ .breadcrumbsArea,
  .mmbrSts-hataraki ~ .breadcrumbsArea {
    top: 182px;
  }
  .breadcrumbsArea .breadcrumbs ul{
    width:calc(100% - 40px);
    padding: 12px 15px;
  }
}


.wrap {
	width: 956px;
	padding: 0;
	margin: 0 auto;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	position: relative;
}
p {
	font-size: 14px;
}

.aircon__estimate p {
	margin: 0 0 15px;
}

#content, .aircon__estimate {width: 100%;-webkit-text-size-adjust: 100%;}
#container #wrapper {
	width: 100%;
}
nav.header_tab_index,
.headerA,
.mdl-body,
#footerBottom,
.footerNavArea,
.breadcrumbs,
.nav_global-search .input_search{
  font-family: "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic","Hiragino Kaku Gothic ProN",
	"Hiragino Sans","メイリオ", Meiryo, Osaka, sans-serif;
}
@media screen and (max-width: 667px) {
	img {
	max-width: 100%;
	}
	.wrap {
		width: 100%!important;
		padding: 0 15px;
		text-align: center;
	}
	#container #wrapper{
		padding-top: 103px;
	}
}
#kv{
	position:relative;
	text-align:center;
}
#kv::before,
#kv::after{
	content:"";
	position:absolute;
	display:block;
	height:350px;
    top:0;
}
#kv::before{
	width:30%;
	left:0;
	z-index:2;
  background: #f3f3f3;
}
#kv::after{
  width:70%;
  right:0;
  z-index:3;
background: #f7ede1;
}
#kv img{
	position:relative;
	z-index:5;
}
@media screen and (min-width: 668px) and (max-width:1320px){
	#kv img{
		width:100%;
		vertical-align:bottom;
	}
	#kv::before,
	#kv::after{
		height:100%;
	}
}
@media screen and (max-width: 667px) {
	#kv{
		background:#d7effa;
	}
	#kv::before,
    #kv::after{
	content:none;
	}
}
.introdusction__h2_tit01{
	font-size:32px;
	text-align:center;
	margin:75px auto 35px;
}
.introdusction__step_wrap{
	position: relative;
	margin: 75px auto 100px;
	padding-bottom: 43px;
}
.introdusction__step_wrap:after{
	content: '';
	display: block;
	position: absolute;
	bottom: 0;
	left: 0;
	width: calc((142px * 4) + (((100% - (142px * 6)) / 5) * 3));
	height: 30px;
	background: url(/servicemaster/estimate/guide/images/img_step_web.png) no-repeat center;
	background-size: 100% auto;
}
.introdusction__step{
	display:flex;
	justify-content: space-between;
}
.introdusction__step > li{
	position:relative;
	display:flex;
	flex-wrap:wrap;
	justify-content:center;
	align-items:center;
	width: 142px;
	border:#0077cc solid 1px;
	box-sizing: border-box;
	text-align: center;
}
.introdusction__step > li:nth-child(-n+4){
	background-color: #ebf7ff;
}
.introdusction__step .introdusction__stepNum{
	content:"";
	position:absolute;
	top:-30px;
	left: 39px;
	display:inline-block;
	padding:10px 0 0 0;
	background:#0077cc;
	border-radius:50%;
	width:62px;
	height:62px;
	font-size:12px;
	text-align:center;
	box-sizing:border-box;
	color:#fff;
	margin:auto;
}
.introdusction__no{
	display:block;
	font-size:18px;
}
.introdusction__img{
	padding-top:50px;
	text-align: center;
}
.introdusction__img img{
	max-width: 98px;
	margin: 0 auto;
}
.introdusction__step > li::after{
	content:"";
	position:absolute;
	right: -29px;
	top:90px;
	display:inline-block;
	border: transparent solid 13px;
	border-left: #0077cc solid 9px;
	margin:auto;
}
.introdusction__step > li:nth-of-type(6)::after{
	content:none;
}
.introdusction__step p{
	font-size:16px;
	text-align:center;
	font-weight:bold;
	margin-top: 7px;
}

@media screen and (max-width: 667px) {
	.introdusction__h2_tit01{
		font-size:21px;
		margin: 35px auto 0;
	}
	.introdusction__step_wrap{
		width: 91%;
		margin: 45px auto 10px;
		padding: 0 25px;
		box-sizing: border-box;
	}
	.introdusction__step_wrap:after{
		top: 0;
		bottom: auto;
		left: auto;
		right: 0;
		width: 17px;
		height: 343px;
		background: url(/servicemaster/estimate/guide/images/img_step_web_sp.png) no-repeat center;
		background-size: contain;
	}
	.introdusction__step{
		flex-wrap:wrap;
	}
	.introdusction__step > li{
		width: 46.6%;
		min-height: 152px;
		margin: 0 0 40px;
	}
	.introdusction__step > li::after {
		right: -22px;
		top: 68px;
		border: transparent solid 8px;
		border-left: #0077cc solid 7px;
		height: 0px;
		width: 0px;
 }
 .introdusction__step > li:nth-of-type(2)::after,
 .introdusction__step > li:nth-of-type(4)::after{
		left:0;
		right:0;
		bottom: -110px;
		transform:rotate(90deg);
		border: transparent solid 8px;
		border-left: #0077cc solid 7px;
		height: 0px;
		width: 0px;
 } 
 .introdusction__step > li:nth-of-type(3)::after{
  	left: -21px;
  	right:auto;
  	transform:rotate(180deg);
  }
	.introdusction__step > li:nth-of-type(3){	order:4;;
	}
	.introdusction__step > li:nth-of-type(4){	order:3;}
	.introdusction__step > li:nth-of-type(5){order:5;}
	.introdusction__step > li:nth-of-type(6){order:6;}
	.introdusction__step .introdusction__stepNum {
		top:-22px;
		left:0;
		right:0;
		width:44px;
		height:44px;
		font-size:11px;
		line-height:1;
	}
	.introdusction__step .introdusction__stepNum .introdusction__no{
		font-size:13px;
	}
	.introdusction__img{
		padding-top:32px;
		width: 100%;
		max-width: 100%;
	}
	.introdusction__step img{
		max-width: 73px;
	}
	.introdusction__step p{
		font-size:12px;
		margin: 7px 0 10px;
	}
}	

.step {
	margin: 0 0 60px;
}
.step .step__container {
	background: #f3f3f3;
	padding:100px 0 84px;
	box-sizing: border-box;
}
.step .step__container.bgWhite {
	background: #fff;
}
.step .step__container .wrap{
	position:relative;
	display:flex;
	flex-wrap:wrap;
	overflow: hidden;
}
.step__ttl{
	position:relative;
	padding:0 0 0 1.5em;
	width:calc(100% - 500px);
	box-sizing:border-box;
}
.step__ttl::before{
	content:"";
	position:absolute;
	left:0;
	top:0;
	display:inline-block;
	width: 10px;
	height: 74px;
	border-radius:10px;
	background:#0077cc;
}
.step__stepNum{
	font-size:12px;
	font-weight:bold;
	color:#0077cc;
}
.step__stepNum .step__no{
	font-size:28px;
	font-weight:bold;
	padding-left:2px;
	line-height:1;
}
.step__h3_tit01{
	font-size:28px;
}
.step .step__container .img{
	width:500px;
}
.step .step__container .kome01{
	display:block;
	margin:0.5em auto 0;
	font-size:14px;
	padding-left:1em;
	text-indent:-1em;
}
@media screen and (min-width: 668px) {
	.step .step__container p{
      position:absolute;
      top: 100px;
      left: 0;
      width: 410px;
      font-size:16px;
      line-height:1.7;
 }
   .step__container-2 .step__ttl,
	.step__container-4 .step__ttl,
	.step__container-6 .step__ttl{
		width: calc(100% - 540px);
		margin-left:40px;
		order:2;
	}
	.step .step__container-2 p,
	.step .step__container-4 p,
	.step .step__container-6 p{
		left:540px;
	}
	.step__container-5 .step__ttl::before{
      height:108px;
	}
	.step .step__container-5 p{
		top:134px;
	}
 }
@media screen and (max-width: 667px) {
	.step {
		margin: 0 0 0px;
	}
	.step .step__container .wrap {
		align-items: flex-start;
	}
   .step .step__container {
		padding:35px 0;
	}
	.step__stepNum{
		display:block;
	}
	.step__stepNum .step__no {
      font-size: 20px;
	}
	.step__h3_tit01{
		font-size:19px;
	}
	.step__ttl {
		width:100%;
		padding: 0 0 0 1em;
		text-align:left;
	}
	.step__ttl::before {
		width:7px;
		height:100%;
	}
	.step .step__container .img{
		margin:15px auto;
		box-shadow: 0px 2px 10px 0px rgba(0,0,0,0.2);
	}
	.step .step__container p{
		font-size:16px;
		text-align:left;
		line-height:1.5;
	}
	.step .step__container .kome01{
		display:block;
		margin:0.5em auto 0;
		font-size:14px;
	}
}
.estimate{
	text-align:center;
}
.btn_estimate{
	display:inline-block;
	margin:0 auto;
    
    text-align:center;
    font-size:24px;
}
.btn_estimate a{
	position:relative;
	display:block;
	padding:20px 60px;
	border-radius:50px;
	color:#fff;
	background:#eb1751;
	box-shadow: 0px 3px 5px 2px rgba(0,0,0,0.2);
}
.btn_estimate a:hover{
	text-decoration:none;
	opacity:0.7;
	transition:.3s;
}
.btn_estimate a::after{
	position:absolute;
	content:"";
	display:inline-block;
	top:0;
	right:25px;
	bottom:0;
	width:9px;
	height:12px;
 	margin:auto;
	background:url(/servicemaster/estimate/guide/images/ico_arrow_r_white.png) transparent left top no-repeat;
	background-size:contain;
}

@media screen and (max-width: 667px) {
.estimate{
	margin:0 auto 60px;
}
.btn_estimate {
	width:100%;
}
.btn_estimate a {
	font-size:15px;
	padding: 15px 25px;
	width:100%;
	box-sizing:border-box;
	line-height:1;
}
.btn_estimate a::after {
  position: absolute;
  content: "";
  display: inline-block;
  top: 0;
  right: 10px;
  bottom: 0;
}
#footerSp {
  width: 100%;
}
}

@media print{
  body{
    min-width: 100% !important;
  }
	.headerA-inner{
		width: 100% !important;
	}
	.nav_global-search{
		display: none !important;
	}
  #breadcrumbs ul{
    padding-right: 0;
  }
}