@charset "utf-8";


/**************************************************50
 * slider
 **************************************************/
#slider_wrap{
	position: relative;
}
#slider_wrap #slider{
	position: relative;
	width: 100%;
}
#slider_wrap #slider:before{
	content: "";
	display: block;
}
#slider_wrap #slider li{
	background-position: center center;
	background-repeat: no-repeat;
	background-size: cover;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	z-index: 1;
}
#slider_wrap #slider_img{
	position: absolute;
	left: 50%;
	-ms-transform: translate(-50%, -50%);
	-webkit-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	width: 93.75%;
	max-width: 444px;
	z-index: 2;
}
@media screen and (max-width:767px){
	#slider_wrap{
		margin-bottom: 3.125%;
		text-align: center;
	}
	#slider_wrap #slider:before{
		padding-top: 70vh;
	}
	#slider_wrap #slider li{
		height: 70vh;
	}
	#slider_wrap #slider_img{
		top: 50vh;
	}
	#slider_wrap #slider_bnr{
		margin-top: 3.125%;
		width: 93.75%;
	}
}
@media screen and (min-width:768px){
	#slider_wrap{
	}
	#slider_wrap #slider:before{
		padding-top: 100vh;
	}
	#slider_wrap #slider li{
		background-attachment: fixed;
		height: 100vh;
	}
	#slider_wrap #slider{
	}
	#slider_wrap #slider_img{
		top: 60%;
	}
	#slider_wrap #slider_bnr{
		margin-bottom: 20px;
		position: absolute;
		bottom: 0;
		width: 236px;
		z-index: 2;
	}
}
@media screen and (min-width:768px) and (max-width:1759px){
	#slider_wrap #slider_bnr{
		margin-right: 20px;
	}
}
@media screen and (max-width:939px){
	#slider_wrap{
	}
	#slider_wrap #slider{
		overflow: visible;
	}
	#slider:before{
		content: "";
		display: block;
		padding-top: 66.8125%;
	}
	#slider_wrap #slider li:before{
		content: "";
		display: block;
		padding-top: 66.8125%;
	}
}
@media screen and (min-width:940px){
	#slider_wrap{
	}
	#slider_wrap #slider{
		width: 100%;
	}
}
@media screen and (max-width:1023px){
	#slider_wrap{
		margin-top: -56px;
	}
}
@media screen and (min-width:1024px) and (max-width:1199px){
	#slider_wrap{
		margin-top: -80px;
	}
}
@media screen and (min-width:1200px){
	#slider_wrap{
		margin-top: -100px;
	}
}
@media screen and (max-width:1759px){
	#slider_wrap #slider_bnr{
		right: 0;
	}
}
@media screen and (min-width:1760px){
	#slider_wrap #slider_bnr{
		left: -webkit-calc(50% + 620px);
		left: calc(50% + 620px);
	}
}


/**************************************************50
 * business
 **************************************************/
#business{
	background-position: right top, left bottom;
	background-repeat: no-repeat, no-repeat;
	background-size: 45.25% auto, 47.1875% auto;
	color: #29AAE1;
	text-align: center;
}
#business.lazyloaded.is_webp{
	background-image: url("https://yoshimorikensetsu.co.jp/images/user/business/back_010.webp"), url("https://yoshimorikensetsu.co.jp/images/user/business/back_020.webp");
}
#business.lazyloaded.not_webp{
	background-image: url("https://yoshimorikensetsu.co.jp/images/user/business/back_010.jpg"), url("https://yoshimorikensetsu.co.jp/images/user/business/back_020.jpg");
}
#business h2{
}
#business p{
}
#business picture{
}
#business picture img{
		width: 93.75%;
		max-width: 1068px;
}
@media screen and (max-width:767px){
	#business{
		padding-top: 6.25%;
		padding-bottom: 6.25%;
	}
	#business h2{
		font-size: 162.5%;
		margin-bottom: 3.125%;
		padding: 0 3.125%;
	}
	#business p{
		padding: 0 3.125%;
		text-align: left;
	}
	#business picture{
		margin-top: 3.125%;
		margin-bottom: 3.125%;
	}
	#business picture img{
	}
}
@media screen and (min-width:768px){
	#business{
		padding-top: 100px;
		padding-bottom: 100px;
	}
	#business h2{
		font-size: 225%;
		margin-bottom: 50px;
	}
	#business p{
	}
	#business picture{
		margin-top: 50px;
		margin-bottom: 50px;
	}
	#business picture img{
	}
}


/**************************************************50
 * plan
 **************************************************/
#plan{
	background-color: #29AAE1;
	color: #FFFFFF;
	text-align: center;
}
#plan h2{
}
#plan h2 img{
	width: 136px;
}
#plan figure{
	overflow: hidden;
}
#plan figure picture{
}
#plan figure picture img{
	vertical-align: top;
}
#plan figure figcaption{
	background-color: #60C0E9;
	position: relative;
	text-align: left;
}
#plan figure figcaption:after{
	border-color: transparent transparent #29AAE1 transparent;
	border-style: solid;
	content: "";
	display: block;
	height: 0;
	position: absolute;
	right: 0;
	bottom: 0;
}
#plan figure figcaption h3{
	font-weight: normal;
	line-height: 1.2;
}
#plan figure figcaption p{
	font-size: 87.5%;
}
@media screen and (max-width:639px){
	#plan figure picture img[src*="plan/img_010"]{
		width: 87.5%;
		max-width: 360px;
	}
	#plan figure picture img[src*="plan/img_020"]{
		margin-left: 4.241689750692521%;
		width: 91.74168975069252%;
		max-width: 378px;
	}
}
@media screen and (min-width:640px) and (max-width:767px){
	#plan figure picture img[src*="plan/img_010"]{
		width: 42.96875%;
	}
	#plan figure picture img[src*="plan/img_020"]{
		margin-left: 3.125%;
		width: 45.05172264542936%;
	}
}
@media screen and (max-width:767px){
	#plan{
		padding-top: 6.25%;
		padding-bottom: 6.25%;
	}
	#plan h2{
		margin-bottom: 3.125%;
	}
	#plan h2 img{
	}
	#plan figure{
		margin-bottom: 3.125%;
	}
	#plan figure picture{
		margin-bottom: 3.125%;
	}
	#plan figure picture img{
	}
	#plan figure figcaption{
		margin-left: auto;
		margin-right: auto;
		padding: 3.125%;
		width: 93.75%;
	}
	#plan figure figcaption:after{
		border-width: 0 0 28px 28px;
	}
	#plan figure figcaption h3{
		font-size: 137.5%;
		margin-bottom: 1.785714285714286%;
	}
	#plan figure figcaption p{
	}
}
@media screen and (min-width:768px){
	#plan{
		padding-top: 100px;
		padding-bottom: 100px;
	}
	#plan h2{
		margin-bottom: 50px;
	}
	#plan h2 img{
	}
	#plan figure{
		margin-bottom: 50px;
	}
	#plan figure picture{
	}
	#plan figure picture img{
	}
	#plan figure figcaption{
	}
	#plan figure figcaption:after{
		border-width: 0 0 42px 42px;
	}
	#plan figure figcaption h3{
		font-size: 175%;
		margin-bottom: 10px;
	}
	#plan figure figcaption p{
	}
}
@media screen and (min-width:768px) and (max-width:939px){
	#plan figure picture{
		margin-bottom: 50px;
	}
	#plan figure picture img[src*="plan/img_010"]{
		width: 336px;
	}
	#plan figure picture img[src*="plan/img_020"]{
		margin-left: 38px;
		width: 353px;
	}
	#plan figure figcaption{
		padding: 15px 20px;
	}
}
@media screen and (min-width:940px) and (max-width:1023px){
	#plan figure{
	}
	#plan figure picture{
		margin-bottom: 50px;
	}
	#plan figure picture img[src*="plan/img_010"]{
		width: 360px;
	}
	#plan figure picture img[src*="plan/img_020"]{
		margin-left: 40px;
		width: 378px;
	}
	#plan figure figcaption{
		padding: 20px 30px;
	}
}
@media screen and (min-width:1024px){
	#plan figure{
		display: table;
		margin-left: auto;
		margin-right: auto;
		border-collapse: collapse;
	}
	#plan figure picture{
		display: table-cell;
		vertical-align: top;
	}
	#plan figure figcaption{
		display: table-cell;
		vertical-align: top;
	}
}
@media screen and (min-width:1024px) and (max-width:1199px){
	#plan figure{
		width: 960px;
	}
	#plan figure picture{
		padding-right: 9px;
	}
	#plan figure picture img[src*="plan/img_010"]{
		width: 287px;
	}
	#plan figure picture img[src*="plan/img_020"]{
		width: 302px;
	}
	#plan figure picture img:nth-child(even){
		margin-left: 30px;
	}
	#plan figure figcaption{
		padding: 15px 25px;
		width: 332px;
	}
}
@media screen and (min-width:1200px) and (max-width:1279px){
	#plan figure{
		margin-left: auto;
		margin-right: auto;
		width: 1120px;
	}
	#plan figure picture{
		padding-right: 11px;
	}
	#plan figure picture img[src*="plan/img_010"]{
		width: 336px;
	}
	#plan figure picture img[src*="plan/img_020"]{
		width: 353px;
	}
	#plan figure picture img:nth-child(even){
		margin-left: 30px;
	}
	#plan figure figcaption{
		padding: 20px 30px;
		width: 388px;
	}
}
@media screen and (min-width:1280px){
	#plan figure{
		width: 100%;
	}
	#plan figure picture{
		padding-right: 12px;
	}
	#plan figure picture img[src*="plan/img_010"]{
		width: 360px;
	}
	#plan figure picture img[src*="plan/img_020"]{
		width: 378px;
	}
	#plan figure picture img:nth-child(even){
		margin-left: 32px;
	}
	#plan figure figcaption{
		padding: 26px 36px;
		width: 416px;
	}
}


/**************************************************50
 * vision
 **************************************************/
#vision{
	background-repeat: no-repeat;
	text-align: center;
}
#vision.lazyloaded.is_webp{
	background-image: url("https://yoshimorikensetsu.co.jp/images/user/vision/back.webp");
}
#vision.lazyloaded.not_webp{
	background-image: url("https://yoshimorikensetsu.co.jp/images/user/vision/back.jpg");
}
#vision figure{
}
#vision figure figcaption{
	text-align: left;
}
#vision figure figcaption h2{
}
#vision figure figcaption h3{
	color: #3E3A39;
}
#vision figure figcaption p{
	color: #FFFFFF;
}
#vision figure picture{
}
#vision figure picture img{
}
@media screen and (max-width:767px){
	#vision{
		padding-top: 6.25%;
	}
	#vision figure{
	}
	#vision figure figcaption{
		margin-bottom: 3.125%;
	}
	#vision figure figcaption h2{
		text-align: center;
		margin-bottom: 1.5625%;
	}
	#vision figure figcaption h2 img{
		width: 93.75%;
	}
	#vision figure figcaption h3{
		padding: 0 3.125%;
	}
	#vision figure figcaption p{
		padding: 0 3.125%;
	}
	#vision figure picture{
		text-align: center;
	}
	#vision figure picture img{
		width: 93.75%;
	}
}
@media screen and (min-width:768px){
	#vision{
		padding-top: 100px;
	}
	#vision figure{
	}
	#vision figure figcaption{
		margin-bottom: 20px;
	}
	#vision figure figcaption h2{
		margin-bottom: 10px;
	}
	#vision figure figcaption h3{
		font-size: 125%;
	}
	#vision figure figcaption p{
	}
	#vision figure picture{
	}
	#vision figure picture img{
		width: 100%;
	}
}
@media screen and (min-width:768px) and (max-width:939px){
	#vision figure figcaption h2 img{
		width: 100%;
	}
}
@media screen and (max-width:939px){
	#vision{
		background-position: 0 bottom;
		background-size: 195% auto;
		padding-bottom: 62.5%;
	}
}
@media screen and (min-width:940px){
	#vision{
	}
	#vision figure{
		display: table;
		border-collapse: collapse;
	}
	#vision figure figcaption{
		display: table-cell;
		vertical-align: top;
		width: 50%;
	}
	#vision figure figcaption h2{
		position: relative;
	}
	#vision figure figcaption h2:before{
		content: "";
		display: block;
		padding-top: 10%;
	}
	#vision figure figcaption h2 img{
		position: absolute;
		top: 0;
		left: 0;
		width: 119%;
		max-width: unset;
	}
	#vision figure picture{
		display: table-cell;
		vertical-align: top;
	}
}
@media screen and (min-width:940px) and (max-width:1199px){
	#vision{
		background-size: 100% auto;
		padding-bottom: 200px;
	}
	#vision figure figcaption{
		padding-right: 20px;
	}
}
@media screen and (min-width:940px) and (max-width:1799px){
	#vision{
		background-position: 25% bottom;
	}
}
@media screen and (min-width:1024px) and (max-width:1199px){
}
@media screen and (min-width:1200px){
	#vision{
		background-size: auto 100%;
	}
}
@media screen and (min-width:1200px) and (max-width:1279px){
	#vision{
		padding-bottom: 200px;
	}
}
@media screen and (min-width:1280px){
	#vision{
		padding-bottom: 100px;
	}
}
@media screen and (max-width:1599px){
	#vision{
		background-color: #60B4FD;
	}
}
@media screen and (min-width:1800px){
	#vision{
		background-position: center bottom;
	}
}


/**************************************************50
 * windows
 **************************************************/
#windows{
	background-attachment: fixed;
	background-position: center center;
	background-repeat: no-repeat;
	background-size: cover;
	text-align: center;
}
#windows.lazyloaded.is_webp{
	background-image: url("https://yoshimorikensetsu.co.jp/images/user/windows/back.webp");
}
#windows.lazyloaded.not_webp{
	background-image: url("https://yoshimorikensetsu.co.jp/images/user/windows/back.jpg");
}
#windows a{
	display: inline-block;
	vertical-align: top;
}
#windows a img{
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
	transition: opacity 0.2s ease-out 0s;
	vertical-align: top;
	width: 100%;
}
#windows a:hover img{
	opacity: 0.7;
}
@media screen and (max-width:359px){
	#windows a{
		width: 93.75%;
	}
}
@media screen and (min-width:360px) and (max-width:767px){
	#windows a{
		margin-left: 1.5625%;
		margin-right: 1.5625%;
		width: -webkit-calc((100% - (3.125% * 3)) / 2);
		width: calc((100% - (3.125% * 3)) / 2);
	}
}
@media screen and (max-width:767px){
	#windows{
		margin-bottom: 6.25%;
		padding-top: 6.25%;
		padding-bottom: 3.125%;
	}
	#windows a{
		margin-bottom: 3.125%;
	}
}
@media screen and (min-width:768px){
	#windows{
		margin-bottom: 100px;
		padding-top: 50px;
		padding-bottom: 30px;
	}
	#windows a{
		margin-bottom: 20px;
	}
}
@media screen and (min-width:768px) and (max-width:939px){
	#windows a{
		margin-left: 10px;
		margin-right: 10px;
		width: 340px;
	}
}
@media screen and (min-width:940px) and (max-width:1023px){
	#windows a{
		width: 32%;
	}
}
@media screen and (min-width:1024px){
	#windows a{
		width: 25%;
	}
}