@charset "utf-8";
/* CSS Document */
body,ul,li,p{
		margin:0;
		padding:0;
}


body{
	font-family:"Noto Sans Japanese","Noto Sans","ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","メイリオ","Meiryo",Osaka,verdana,"ＭＳ Ｐゴシック","MS PGothic",sans-serif;
	font-size:20px;
	letter-spacing: 0.3px;
	line-height: 1.7;
}

#content{
	width:960px;
	margin:0 auto;
}
.job{
	text-align: center;
	margin: 10px auto 20px;
}
.cont_left{
	width: 49%;
	float: left;
}
.cont_right{
	width: 49%;
	float: right;
}
.cont_right img,.cont_left img{
	width: 100%;
}
#btn{
	background: #E0E0E0;
	margin: 30px auto 70px;
}
#btn div{
	width: 902px;
	margin: 10px auto 10px;
	overflow: hidden;
}
#btn img:hover{
	opacity: 0.6;
}
#btn_txt{
	font-size: 27px;
	font-weight: bold;
	margin: 10px 0 15px;
}
.btn_left{
	float: left;
	width: 50%;
}
.btn_right{
	float: right;
	width: 50%;
}
#step{
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	gap:10px;
}
.step_txt{
	font-size: 90%;
}
#mh{
	overflow: hidden;
	margin: 10px 0 60px;
	border: 1px solid #006ead;
	border-top: 10px solid #006ead;
	padding: 20px;
}
.mh_title{
	font-size: 30px;
	color: #006ead;
	font-weight: bold;
	margin-bottom: 10px;
}
.box{
	overflow: hidden;
	margin: 30px 0 10px 0;
}

#box_in{
	background:url(img/mh_04.png) no-repeat;
	height: 377px;
}
#box_in p{
	width: 50%;
}

#id{
	overflow: hidden;
	margin: 10px 0 60px;
	border: 1px solid #774723;
	border-top: 10px solid #774723;
	padding: 20px;
}
.id_title{
	font-size: 30px;
	color: #774723;
	font-weight: bold;
	margin-bottom: 10px;
}
#rd{
	overflow: hidden;
	margin: 10px 0 60px;
	border: 1px solid #cf7118;
	border-top: 10px solid #cf7118;
	padding: 20px;
}
.rd_title{
	font-size: 30px;
	color: #cf7118;
	font-weight: bold;
	margin-bottom: 10px;
}
#med{
	overflow: hidden;
	margin: 10px 0 60px;
	border: 1px solid #009fb0;
	border-top: 10px solid #009fb0;
	padding: 20px;
}
.med_title{
	font-size: 29px;
	color: #00818f;
	font-weight: bold;
	margin-bottom: 10px;
}

#mh span,#id span,#rd span,#med span{
	background: -webkit-linear-gradient(transparent 0%, #ffffab 0%);
	background: -o-linear-gradient(transparent 0%, #ffffab 0%);
	background: linear-gradient(transparent 0%, #ffffab 0%);
}

#qa{
	width: 800px;
	margin: 50px auto 0;
}
#qa_title{
	text-align: center;
	font-size: 25px;
	margin: 10px 0 30px;
}
#qa_title span{
	font-weight: bold;
	font-size: 31px;
}
#qa .architect span,#qa .owner span{
	background: -webkit-linear-gradient(transparent 0%, #ffffab 0%);
	background: -o-linear-gradient(transparent 0%, #ffffab 0%);
	background: linear-gradient(transparent 0%, #ffffab 0%);
}

#set{
	overflow: hidden;
}
#set img{
	text-align: center;
}
.set_in{
	margin: 30px 0;
	font-size: 20px;
}
.set_in ul{
	padding-left: 21px;
	
}
.set_title{
	font-size: 25px;
	color: #0a1464;
	font-weight: bold;
	margin-bottom: 10px;
}

#bunner{
	background: #fff;
	overflow: hidden;
}
#bunner img:hover{
	opacity: 0.7;
}
#bunner_in{
	width: 960px;
	margin: 0 auto;
	padding: 30px 0 30px;
	overflow: hidden;
}
.balloon1 {
  position: relative;
  display: inline-block;
  margin: 1.5em auto 1em;
  padding: 25px 90px;
  min-width: 120px;
  max-width: 100%;
  color: #0a1464;
  font-size: 25px;
  background: #e5e5e5;
	text-align: center;
}
.balloon1 span {
	font-size: 27px;
	font-weight: bold;
}
.balloon1:before {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -15px;
  border: 15px solid transparent;
  border-top: 15px solid #e5e5e5;
}

.balloon1 p {
  margin: 0;
  padding: 0;
}
.architect{
	background: url(img/icon_01.png) no-repeat;
	background-position: left top;
	margin-bottom: 15px;
}
.owner{
	background: url(img/icon_02.png) no-repeat;
	background-position: right top;
	margin-bottom: 10px;
}
.balloon1-right {
  position: relative;
  display: inline-block;
  padding: 7px 10px;
  min-width: 120px;
  max-width: 100%;
	background: #EDEDED;
}

.balloon1-right:before {
  content: "";
  position: absolute;
  left: 100%;
  border: 15px solid transparent;
  border-left: 15px solid #EDEDED;
}

.balloon1-right p {
  margin: 0;
  padding: 0;
}

.balloon1-left {
  position: relative;
  display: inline-block;
  margin: 1.5em 0 1.5em 15px;
  padding: 7px 10px;
  min-width: 120px;
  max-width: 100%;
  color: #1D1D1D;
  background: #fff;
	text-align: left;
	background: #EDEDED;
}

.balloon1-left:before {
  content: "";
  position: absolute;
  left: -28px;
  border: 15px solid transparent;
  border-right: 15px solid #EDEDED;
}

.balloon1-left p {
  margin: 0;
  padding: 0;
}

#experience{
	background: url(img/experience_back.jpg) center center / cover no-repeat;
	position: relative;
	text-align: center;
	margin: 30px 0 10px;
}
.contact_in{
	padding: 50px 0 ;
}

#experience_btn{
    border-radius: 50px;
	margin: 20px auto 20px;
	color: #fff;
	background: url(img/arrow.png) no-repeat 48px center;
	background-color: #ff881e;
	font-size: 120%;
	text-align: center;
	width: 430px;
	border: 3px solid #fff;
	font-weight: bold;
}
#experience_btn a{
	color: #fff;
	text-decoration: none;
}
#experience_btn:hover{
	color: #ff881e;
	background: url(img/arrow_on.png) no-repeat 48px center;
	background-color: #fff;
	border: 3px solid #ff881e;
}
a #experience_btn:hover{
	text-decoration: none;
}
#contact_title{
	font-size: 32px;
}
#contact_tel strong{
	color: #0a1464;
	font-weight: bold;
	font-size: 34px;
}
#contact_tel .att{
	font-size: 80%;
}


.more_btn{
    border-radius: 30px;
	margin: 20px auto 20px;
	color: #fff;
	background-color: #ff881e;
	font-size: 120%;
	text-align: center;
	width: 300px;
	border: 1px solid #ff881e;
	font-weight: bold;
	padding: 10px 0;
	font-size: 20px;
	  box-shadow: 0 5px 5px 0 rgba(0, 0, 0, .2);
}
.more_btn a{
	color: #fff;
	text-decoration: none;
}
.more_btn:hover{
	color: #ff881e;
	background-color: #fff;
	border: 1px solid #ff881e;
	box-shadow: 0 5px 5px 0 rgba(0, 0, 0, .2);
}
a .more_btn:hover{
	text-decoration: none;
}

.fixed_btn
{
  position: fixed;
  bottom: 50%; 
  right: 0;
}




@media only screen and (min-width: 641px){
#wrapper{
	width: 1100px;
	margin:0 auto;
}
.balloon1-left {
  position: relative;
  display: inline-block;
  margin: 0 0 30px 167px;
  padding: 20px;
  min-width: 120px;
  max-width: 100%;
  border-radius: 5px;
}
.balloon1-left p {
  margin: 0;
  padding: 0;
}
.balloon1-right {
  position: relative;
  display: inline-block;
  margin: 0 167px 20px 0;
  padding: 20px;
  min-width: 120px;
  max-width: 100%;
	border-radius: 5px;
}
#experience_btn{
	padding: 20px 20px 20px 40px;
}
}




#footer{
	background:#0150a1;
	width:100%;
}
#footer_in{
	color:#fff;
	width:960px;
	margin:0 auto;
	padding:20px 0;
}
#btn{
	padding:30px 0 20px;
	text-align:center;
}
#logo{
	text-align:center;
	padding:25px 0;
}

@media only screen and (min-width: 641px) and (max-width: 960px) {
html,body{
	width:960px;
}
}




@media only screen and (max-width: 640px){
body{
	font-size:18px;
	line-height:180%;
}

#content{
	top:0;
}
#main_txt{
	padding:180px 0 0 0;
}
#main_txt span{
	font-size:25px;
	font-style: italic;
}
#wrapper img,#content,.content_in,#main_in ul,.item,.title,.point,#footer_in,.title_left,#title_right2,#title_right1,#mh img,#id img,#bunner_in{
	width:98%;
	padding-left:1% !important;
}
#wrapper,#blue,.se-content,.vr_point_left,.vr_point_left p,.vr_point_left p img,#btn,#footer,#logo img,#point_list,.title_left img,#main_txt,#rd img,#med img,.cont_left,.cont_right,#qa,#experience_btn{
	width:100%;
}
	.btn_left,.btn_right{
		width: 49% !important;
	}
	.btn_left img,.btn_right img{
		width: 100% !important;
	}
	.step_txt{
		line-height: 1.6;
	}

#logo{
	width:30%;
	margin:0 auto;
}
.content_in{
	padding:10px 0 30px 0;
}
	.mh_title,.med_title,.id_title,.rd_title{
		line-height: 1.6;
		font-size: 26px;
	}
#box_in{
	background:url(img/mh_04.png) no-repeat center 160px;
background-size:contain;
	height: 320px;

}
#box_in p{
	width: 100%;
}
.architect{
	background: url(img/icon_01.png) no-repeat;
	background-position: left top;
	background-size: 20%;

}
.owner{
	background: url(img/icon_02.png) no-repeat;
	background-position: right top;
	background-size: 20%;
	padding-top: 70px;
}
.balloon1-left {
    margin: 110px 0 0 15px;
}
.balloon1-right {
    margin: 40px 0 0 15px;
}
#qa_title{
	line-height: 190%;
}
.balloon1 {
  padding: 20px 20px;
}
	.contact_in{
		width: 90%;
		margin: 0 auto;
	}
#experience_btn{
	padding: 20px 0 20px 0;
	background-image: none;
}
	.fixed_btn{
		display: none;
	}
}