@charset "utf-8";


body {
	/*スマホで勝手に文字が大きくなる対策*/
	-webkit-text-size-adjust: 100%;
}

#contents {
    width: 100%;
    margin: auto;
	padding: 0;
}

.breadcrumbs {
	display: none;
}

.l-page {
	overflow: hidden;
}

.l-wrapper .header__logo img {
    max-width: 400px;
}

[class*="section__wrapper--"] {
		padding-block: 80px;
	}

	/*共通*/

	[class*="section__wrapper--"].ui-full-screen{
		margin-bottom: 0;
	}

	.section__inner{
		width: 1140px;
		margin: 0 auto;
		position: relative;
	}

	[class*="section__wrapper--"] .ui-sub-title {
		font-size: 12px;
		font-weight: 400;
		text-align: center;
	}

	[class*="section__wrapper--"] .ui-hgroup{
		margin-bottom: 0;
		position: relative;
	}

	[class*="section__wrapper--"] .section__sub-ttl{
		letter-spacing: 0.2em;
		color: #41CDA5;
	}

	.l-page {
		background: #fff;
	}

	/*メイン画像*/

	.main_view {
		position: relative;
	}

	.mainview_btnbox {
		position: absolute;
		bottom: 107px;
	}

		.mainview_btn {
			box-shadow: 6px 6px 12px rgba(118,134,137,0.57);
			display: block;
			border-radius: 50px;
		}

	.mainview_text {
		height: 600px;
	}

		.mainview_text img {
			    width: 100%;
				height: 100%;
				object-fit: cover;
					}

	/*こんなお悩みありませんか？*/

	.section__wrapper--worries{
		padding-block: 80px 80px;
		background: #FAFAFA;
	}

	.worries__list{
		position: relative;
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		align-items: center;
		gap: 23px 20px;
		margin-top: 31px;
	}

	.worries__list::after{
		position: absolute;
		content: "";
		background: url(../images/worries_before02.webp) no-repeat center / cover;
		width: 125px;
		height: 187px;
		bottom: -35px;
		left: -9px;
	}

	.worries__list::before{
		position: absolute;
		content: "";
		background: url(../images/worries_before01.webp) no-repeat center / cover;
		width: 125px;
		height: 185px;
		bottom: -35px;
		right: -15px;
	}

	.worries__item{
		background-color: #72AA9D;
		width: 354px;
		padding: 26px 0 25px;
		border-radius: 10px;
	}

	.dif__item{
		width: 284px;
	}

	.worries__item p{
		font-size: 18px;
		font-weight: 700;
		color: #fff;
		text-align: center;
		line-height: 1.6;
	}

	.worries__box{
		position: relative;
		margin-top: 104px;
	}

	.worries__box::before{
		position: absolute;
		content: "";
		background: url(../images/worries_arrow-down.webp) no-repeat center / cover;
		width: 40px;
		height: 55px;
		left: 0;
		right: 0;
		margin: auto;
		top: -65px;
	}

	.worries__txt{
		font-size: 40px;
		font-weight: 700;
		color: #263238;
		text-align: center;
	}

	.worries__txt span{
		font-size: 40px;
		font-weight: 700;
		color: #F05072;
	}


	/*強み*/

	.section__wrapper--strengths{
		position: relative;
		padding-block: 80px 160px;
		background: #FAFAFA;
	}

	.section__wrapper--strengths .section__inner{
		position: relative;
	}

	.section__wrapper--strengths .section__inner::before{
		position: absolute;
		content: "";
		background: url(../images/strengths_bg.webp) no-repeat center / cover;
		width: 1360px;
		height: 927px;
		top: -81px;
		right: -389px;
		z-index: 0;
	}

	.section__wrapper--strengths .section__ttl{
		color: #fff;
	}

	.section__wrapper--strengths .section__sub-ttl{
		color: #fafafa!important;/*テンプレで使われているため*/
	}

	.strengths__box{
		position: relative;
		margin-left: auto;
		margin-top: 70px;
		width: 683px;
	}

	.strengths__box::before{
		position: absolute;
		content: "";
		background: url(../images/strengths01.webp) no-repeat center / cover;
		width: 960px;
		height: 480px;
		top: -40px;
		left: -848px;
	}

	.strengths__box::after{
		position: absolute;
		content: "";
		background: url(../images/strengths_before.webp) no-repeat center / cover;
		width: 144px;
		height: 619px;
		top: 22px;
		right: -149px;
	}

	.strengths__inner{
		position: relative;
		background-color: #fff;
		padding: 40px;
	}

	.strengths__sub-ttl{
		font-size: 20px;
		font-weight: 700;
		color: #329D7F;
		line-height: 1.7;
	}

	.strengths__txt{
		font-size: 16px;
		font-weight: 400;
		color: #333;
		line-height: 1.75;
		margin-top: 20px;
	}

	
	/*お問い合わせ*/
	.section__wrapper--contact{
		background: url(../images/contact_bg.webp) no-repeat center / cover;
		height: 446px;
		padding-block: 81px;
	}

	.section__wrapper--contact .section__sub-ttl{
		color: #32987B!important;/*テンプレで使われているため*/
	}

	.contact__list{
		display: flex;
		justify-content: center;
		gap: 21px;
		margin-top: 30px;
	}

	[class*="contact__item--"]{
		width: 366px;
		background-color: #fff;
		padding: 30px 0 28px;
	}

	.contact__sub-ttl{
		font-size: 18px;
		font-weight: 400;
		color: #41CDA5;
		text-align: center;
		line-height: 1.4;
	}

	[class*="contact__txt--"]{
		position: relative;
		font-size: 36px;
		font-weight: 700;
		color: #1A9C77;
		text-align: center;
		margin-top: 11px;
	}

	.contact__txt--tel{
		margin-top: 18px;
		padding-left: 29px;
	}

	[class*="contact__txt--"] a{
		position: relative;
		width: 320px;
		height: 60px;
		display: flex;
		justify-content: center;
		align-items: center;
		background-color: #1A9C77;
		font-size: 20px;
		font-weight: 700;
		color: #fff;
		padding-top: 4px;
		padding-left: 30px;
		margin: 0px auto 0;
		border-radius: 100px;
	}

	.contact__txt--sell a{
		background-color: #F05072;
	}

	.contact__txt--tel::before{
		position: absolute;
		content: "";
		background: url(../images/icon_tel.webp) no-repeat center / cover;
		width: 25px;
		height: 32px;
		top: -7px;
		bottom: 0;
		margin: auto;
		left: 30px;
	}

	[class*="contact__txt--"] a::before{
		position: absolute;
		content: "";
		top: 0;
		bottom: 0;
		margin: auto;
	}

	.contact__txt--mail a::before{
		background: url(../images/icon_mail.webp) no-repeat center / cover;
		width: 23px;
		height: 20px;
		left: 55px;
	}

	.contact__txt--sell a::before{
		background: url(../images/icon_satei.webp) no-repeat center / cover;
		width: 20px;
		height: 24px;
		left: 87px;
	}

	[class*="contact__txt--"] a::after{
		position: absolute;
		content: "";
		background: url(../images/icon_arrow.webp) no-repeat center / cover;
		width: 9px;
		height: 16px;
		top: 0;
		bottom: 0;
		margin: auto;
		right: 15px;
	}

	.detail__box{
		display: flex;
		justify-content: center;
		align-items: center;
		gap: 11px;
		margin-top: 15px;
	}

	[class*="detail__txt--"] {
		font-size: 14px;
		font-weight: 400;
		color: #010101;
	}

	/*メリット・デメリット*/

	.section__wrapper--pros-and-cons{
		background-color: #ECF6F6;
		padding-block: 80px 76px;
	}

	.pros-and-cons__list{
		display: flex;
		gap: 0;
		margin-top: 40px;
	}

	[class*="pros-and-cons__item--"]{
		width: 570px;
		background-color: #FFFAF3;
		padding: 33px 40px 40px;
	}

	.pros-and-cons__item--purchase{
		background-color: #F5FFF7;
	}

	[class*="pros-and-cons__ttl--"]{
		font-size: 20px;
		font-weight: 700;
		color: #EE9C19;
		text-align: center;
	}

	.pros-and-cons__ttl--purchase{
		color: #32AE4D;
	}

	[class*="merit__box--"]{
		width: 490px;
		height: 364px;
		border: 1px solid #EE9C19;
		background-color: #fff;
		margin-top: 23px;
	}

	.merit__box--purchase{
		border-color: #32AE4D;
	}

	[class*="merit__sub-ttl--"]{
		width: 489px;
		height: 40px;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 20px;
		font-weight: 700;
		color: #fff;
		background-color: #EE9C19;
	}

	.merit__sub-ttl--purchase{
		background-color: #32AE4D;
	}

	.merit__inner,
	.demerit__inner{
		padding: 20px 30px 30px 42px;
	}

	.merit__inner-box + .merit__inner-box,
	.demerit__inner-box + .demerit__inner-box{
		margin-top: 13px;
	}

	[class*="merit__detail-ttl--"]{
		position: relative;
		font-size: 16px;
		font-weight: 700;
		color: #EE9C19;
	}

	.merit__detail-ttl--purchase{
		color: #32AE4D;
	}
	[class*="merit__detail-ttl--"]::before{
		position: absolute;
		content: "";
		background-color: #EE9C19;
		width: 6px;
		height: 6px;
		border-radius: 50%;
		top: -1px;
		bottom: 0;
		margin: auto;
		left: -11px;
	}

	.merit__detail-ttl--purchase::before{
		background-color: #32AE4D;
	}

	.merit__detail-txt{
		font-size: 16px;
		font-weight: 400;
		color: #333;
		line-height: 1.6;
		margin-top: 2px;
	}

	.demerit__box{
		width: 490px;
		height: 368px;
		border: 1px solid #D0D0D0;
		margin-top: 20px;
		background-color: #fff;
	}

	.demerit__sub-ttl{
		width: 489px;
		height: 40px;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 20px;
		font-weight: 700;
		color: #fff;
		background-color: #D0D0D0;
	}

	.demerit__detail-ttl{
		position: relative;
		font-size: 16px;
		font-weight: 700;
		color: #333;
	}

	.demerit__detail-ttl::before{
		position: absolute;
		content: "";
		background-color: #666;
		width: 6px;
		height: 6px;
		border-radius: 50%;
		top: -1px;
		bottom: 0;
		margin: auto;
		left: -11px;
	}

	.demerit__detail-txt{
		font-size: 16px;
		font-weight: 400;
		color: #333;
		line-height: 1.65;
	}


	/*流れ*/

	.section__wrapper--flow {
		padding-block: 80px 74px;
		background: #FAFAFA;
	}

	.type_txt {
		width: 68px;
		height: 210px;
		font-size: 20px;
		font-weight: 700;
		color: #fff;
		writing-mode: vertical-lr;
		display: flex;
		align-items: center;
		justify-content: center;
		background: #EE9C19;
		padding-top: 2px;
		letter-spacing: 0.3em;
		margin: 1px auto 35px;
	}

	.type_txt:last-of-type {
		background: #32AE4D;
		margin-top: 10px;
	}

	.flow_flexbox {
		display: flex;
		gap: 34px;
		width: 1140px;
		margin: 38px auto 0;
	}

	.flow_list {
		display: flex;
		gap: 22px;
		position: relative;
		z-index: 1;
		justify-content: space-between;
	}

	.flow_list::before {
		content: "";
		width: 983px;
		height: 26px;
		background: url(/images/freehtml/flow_before01.webp) no-repeat center / cover;
		position: absolute;
		top: 94px;
		left: -31px;
		z-index: -1;
	}

	.flow_list::after {
		content: "";
		width: 983px;
		height: 26px;
		background: url(/images/freehtml/flow_before02.webp) no-repeat center / cover;
		position: absolute;
		top: 337px;
		left: -32px;
		z-index: -1;
	}

	.flow_item {
		width: 96px;
		height: 483px;
		background: #fff;
		padding: 24px 15px 0;
	}

	.flow_item:last-of-type {
		position: relative;
		z-index: -2;
	}

	.flow_height {
		height: 310px;
	}

	.flow_num {
		display: flex;
		align-items: center;
		flex-direction: column;
		font-size: 30px;
		font-weight: 700;
		color: #32987B;
		line-height: 1.4em;
		padding-bottom: 7px;
		letter-spacing: 0.02em;
	}

	.flow_txt {
		margin: 0 auto;
		font-size: 20px;
		font-weight: 700;
		color: #263238;
		writing-mode: vertical-lr;
		letter-spacing: 0.25em;
		line-height: 1.6;
	}

	/*加古川市エリア情報*/
	.section__wrapper--area {
		background: #ECF6F2;
		padding-bottom: 30px;
	}

	.area__box {
		display: flex;
		justify-content: space-between;
		}

	.area__textbox {
		width: 600px;
		margin-top: 30px;
		}

	.area__text {
		font-size: 16px;
		line-height: 1.75;
		margin-bottom: 19px;
		}

	.area__imgbox {
		width: 505px;
		position: relative;
		z-index: 0;
		}

		.area__imgbox::before {
			position: absolute;
			content: "";
			background: url(../images/area__img_bg.webp) center / cover no-repeat;
			height: 321px;
			width: 664px;
			right: -390px;
			bottom: -30px;
			z-index: -1;
		}