/*--------------------
共通
----------------------*/
br.sp{
	display: none;
}
.page-template-page-service .content {
    margin-top: 0px;
}
.page-template-page-service main.main {
    padding-block: 0 !important;
    z-index: 1;
}
/* Cocoonのstyle無効 */
.page-template-page-service #content-in.wrap {
	max-width: none;
	padding: 0;
	margin: 0;
}
.page-template-page-service .entry-content {
	all: unset;
	display: block;
}
.page-template-page-service .entry-content > * {
	margin-bottom: 0;
}
.page-template-page-service .footer{
	margin-top: 0;
}

#main section,
#main .section{
	padding-block: clamp(30px, 10vw, 80px);
}

#main ul li{
	list-style: none;
}
#main ul{
	padding-left: 0;
}

ul.solid li{
	padding-left: 1em;
	position: relative;
}
ul.solid  li::before{
	display: block;
	content: "";
	width: 0.5em;
	height: 2px;
	background: var(--i_main_color);
	position:absolute;
	top: calc((1em * 1.8) / 2);
	transform: translateY(-50%);
	left: 0px;
	z-index:0;
	pointer-events: none;
}
ul.solid  li+li{
	margin-top: 0.5rem;
}


.full-wrap.bg_beige::before{
	background: url(/wp-content/themes/cocoon-child-master/assets/images/bg_beige.webp);
	background-size: cover;
}
.full-wrap.bg_record::before{
	background: url(/wp-content/themes/cocoon-child-master/assets/images/bg_record.webp), #222528;
	background-size: 100% auto;
	background-position: center bottom;
}
@media screen and (max-width: 767px) {
	.closing br.sp{
		display: inline;
	}
}

/* lv */
#lv .lv_txt{
	max-width: 55%;
	position: relative;
	z-index: 7;
}
#lv .lv_txt .heading5 {
  font-size: clamp(0.7rem, 1vw, 20px);
}
#lv .lv_txt .heading5 .skew::after{
	background: var(--i_main_light-color);
}
#lv .ttl{
	font-size: clamp(1.8rem, 5.5vw, 46px);
	color: #fff;
	margin-block: clamp(0.7rem, 1.2vw, 25px);
	line-height: 1.5;
	white-space: nowrap;
}

#lv .heading4{
	color: #fff;
	margin-block: clamp(1rem, 1.4vw, 35px);
	font-size: clamp(0.95rem, 2.5vw, 24px);
}
#lv .text{
	border-left: 2px solid #fff;
	padding-left: 1em;
	font-size: clamp(14px, 1vw, 16px);
}
#lv .ctabtn{
	display: flex;
	justify-content: space-between;
	gap: 20px 30px;
	flex: 1;
	margin-block: clamp(3rem, 5vw, 60px);
}
#lv .ctabtn .button{
	flex: 1;
}
#lv .ctabtn .button a{
	max-width: none;
}
#lv .lv_img{
	position: absolute;
	top: 0;
	right: 0;
	z-index: 5;
	margin-right: calc(50% - 50vw);
	max-width: 1080px;
	height: 100%;
	width: 55%;
}

#lv .lv_img figure {
    clip-path: polygon(25% 0, 100% 0, 100% 100%, 0% 100%);
    overflow: hidden;
    height: 100%;
    width: 100%;
}
#lv .lv_img figure::after{
	display: block;
	content: "";
	width: 100%;
	height: 100%;
	background: linear-gradient(to top, rgba(13,21,28,0.7) 0%, rgba(13,21,28,0) 100%);
	position: absolute;
	top: 0;
	left: 0;
	z-index: 6;
}

#lv .lv_img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 70% 50%;
}
#lv .lv_feature{
	position: absolute;
	z-index: 8;
	bottom: clamp(3rem, 5vw, 60px);
	top: auto;
	right: 0;
	width: 40%;
	max-width: 460px;
}
@media screen and (max-width: 1023px) {
	#lv{
		padding-bottom: 0!important;
	}
    #lv .lv_img {
        position: relative;
        margin-left: -1.5rem;
        margin-top: -25vw;
		width: calc(100% + 3rem);
    }
    #lv .lv_img figure {
        clip-path: polygon(0 30%, 100% 0, 100% 100%, 0 100%);
    }
	#lv .lv_txt{
		max-width: 100%;
	}
	#lv .lv_feature{
		width: 100%;
		text-align: center;
		bottom: 20px;
	}
	#lv .lv_feature img{
		width: 90%;
	}
}
@media screen and (max-width: 480px) {
	#lv .lv_txt .heading5 br.sp,
	#lv .ttl br.sp{
		display: inline;
	}
	#lv .ctabtn{
		flex-direction: column;
	}
}
@media screen and (max-width: 768px) {
	.record img{
		width: 100%;
		max-width: 400px;
	}
}

/* CTA */
#cta::before{
	background: url(/wp-content/themes/cocoon-child-master/assets/images/contact_bg.webp);
}
#cta{
	padding-block: clamp(30px, 10vw, 80px);
	padding-inline: 1.5rem;
}
#cta .heading3{
	margin-bottom: 30px;
}
#cta .link{
	margin-block: 40px 20px;
	display: flex;
	justify-content: center;
	flex-wrap: nowrap;
	gap: 2rem;
}
#cta .link > *{
	width: 100%;
}
#cta .link .button a{
	width: 100%;
	max-width: 500px;
	padding-block: 1.5rem;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
}
@media screen and (max-width: 834px) {
	#cta .link{
		flex-direction: column;
	}
}
@media screen and (max-width: 600px) {
	#cta .heading2 .sp{
		display: inline;
	}
}

/* cta_2 */


.cta_2{
	padding-inline: clamp(15px, 4vw, 30px);
	padding-block: clamp(30px, 8vw, 60px);
	color: #fff;
	background: url(/wp-content/themes/cocoon-child-master/assets/images/bg_cta2.webp);
	background-position: 83% top;
	box-shadow: 10px 10px 15px rgba(0,0,0,0.3);
}
.cta_2 .link{
	margin-top: 30px;
	display: flex;
	justify-content: center;
	gap: 1rem 2rem;
}
.cta_2 .link .button{
	flex: 1;
	max-width: 300px;
	width: 100%;
	/*! text-align: center; */
}
.cta_2 .link .button a{width: 100%;}
.button.button-line a{
	background: #06C755;
}
.button.button-line a::before{
	background: #fff;
}
@media screen and (max-width: 480px) {
	.cta_2 .link{
		flex-direction: column;
		align-items: center;
	}
}

/*--------------------
大規模修繕
----------------------*/
/* こんなお悩みありませんか？ */
#repair_problem .problem_list{
	margin-block: 30px;
	display: flex;
	justify-content: space-between;
	gap: 1rem;
	flex-wrap: wrap;
}
#repair_problem .problem_list li{
	width: calc((100% - 1rem) / 2);
	background: #fff;
	padding: 15px;
	box-shadow: 3px 3px 5px rgba(0,0,0,0.1);
}
#repair_problem .problem_list+p{
	margin-block: 30px;
}
#repair_problem .cta_2{
	margin-top: 60px;
}
#repair_problem::after {
	content: "";
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	bottom: 0;
	width: 100vw;
	height: 300px;
	background: #fff;
	z-index: -1;
}
@media screen and (max-width: 768px) {
	#repair_problem .problem_list li{
		width: 100%;
	}

}

/* 放置すると起こるリスク/・よくある失敗 */
#rick_and_error{
	display: flex;
	gap: 50px;
	flex-wrap: wrap;
}
#risk,
#error{
	flex: 1;
	background: #fff;
	padding: 0px 30px 40px;
	box-shadow: 3px 3px 5px rgba(0,0,0,0.1);
}
#rick_and_error h3{
	transform: translate(calc(-1 * clamp(0rem, 2vw, 35px)), calc(-1 * clamp(0rem, 2vw, 15px)));
}
#risk ul{
	counter-reset: number 0;
}
#risk ul li,
#error ul li{
	position: relative;
	padding-left: clamp(30px, 5vw, 60px);
	margin-block: 15px;
	padding-bottom: 15px;
	border-bottom: 1px solid #ddd;
}
#risk ul li::before{
	content: counter(number,decimal-leading-zero);
	counter-increment: number 1;
	position: absolute;
	left: 0;
	top: 0.25em;
	border-radius: 50%;
	color: var(--i_main_light-color);
	font-size: clamp(18px, 3.5vw, 40px);
	line-height: 1;
	font-weight: bold;
}
#error ul li::before{
	content: "×";
	position: absolute;
	left: 0;
	top: 0.4em;
	border-radius: 50%;
	color: #821d18;
	font-size: clamp(18px, 3.5vw, 40px);
	line-height: 1;
	font-weight: bold;
}
@media screen and (max-width: 1023px) {
	#rick_and_error{
		flex-direction: column;
	}
	#risk,
	#error{
		padding: 0 20px 40px;
	}
}
@media screen and (max-width: 768px) {
	#error h3 .sp{
		display: inline;
	}
}

/* 私たちが選ばれる3つの理由 */
#repair_reason .content{
	display: flex;
	gap: 30px 50px;
	justify-content: space-between;
	align-items: flex-start;
	margin-block: 30px;

}
#repair_reason figure,
#repair_reason ul{
	flex: 1;
}
#repair_reason ul{
	counter-reset: number 0;
}
#repair_reason ul li{
	position: relative;
	padding-left: clamp(30px, 5vw, 60px);
	margin-block: 15px;
	padding-bottom: 15px;
	border-bottom: 1px solid #ddd;
}
#repair_reason ul li::before{
	content: counter(number,decimal-leading-zero);
	counter-increment: number 1;
	position: absolute;
	left: 0;
	top: 0.25em;
	border-radius: 50%;
	color: var(--i_main_light-color);
	font-size: clamp(18px, 3.5vw, 40px);
	line-height: 1;
	font-weight: bold;
}
#repair_reason .cta_2{
	margin-top: 60px;
}
@media screen and (max-width: 900px) {
	#repair_reason .content{
		flex-direction: column;
	}
}

/* 修繕の流れ */
#repair_flow picture{
	margin-block: 30px;
	display: block;
	text-align: center;
}
@media screen and (max-width: 1023px) {
	#repair_flow img{
		max-width: 500px;
		width: 100%;
	}
}

/* 対応サービス */
#repair_service::before{
	background-position: right top;
}

#repair_service .service_list{
	display: flex;
	gap: 30px;
	justify-content: space-between;
	flex-wrap: wrap;
	margin-block: 30px;
}
#repair_service .service_list > li{
	background: #fff;
	padding: 40px 30px;
	box-shadow: 3px 3px 5px rgba(0,0,0,0.1);
}
#repair_service .service_list > li p{
	margin-block: 30px;
}

#repair_service .service_list .skew {
	font-size: clamp(1.1rem, 2vw, 20px);
	display: inline-block;
	padding: 0px 15px;
	margin-bottom: 10px;
	font-weight: 700;
}
#repair_service .service_list .main{
	width: 100%;
	display: grid;
	grid-template-columns: 47.5% 47.5%;
	gap: 0 5%;
}
#repair_service .service_list .main figure{
	grid-row: 1/5;
	grid-column: 2;
}
#repair_service .service_list .detail li{
	padding-left: 1em;
	position: relative;
}
#repair_service .service_list .detail li::before{
	display: block;
	content: "";
	width: 0.5em;
	height: 2px;
	background: var(--i_main_color);
	position:absolute;
	top: calc((1em * 1.8) / 2);
	transform: translateY(-50%);
	left: 0px;
	z-index:0;
	pointer-events: none;
}
#repair_service .service_list .detail li+li{
	margin-top: 0.5rem;
}
#repair_service .service_list > li:nth-of-type(2),
#repair_service .service_list > li:nth-of-type(3){
	width: calc((100% - 30px) / 2);
}
#repair_service .service_list > li:nth-of-type(n + 4){
	width: calc((100% - 60px) / 3);
}
@media screen and (max-width: 768px) {
	#repair_service .service_list .main{
		display: block;
	}
	#repair_service .service_list .main figure{
		margin-block: 30px;
	}
	#repair_service .service_list > li:nth-of-type(n + 4){
		width: calc((100% - 30px) / 2);
	}
	#repair_service .service_list > li{
		padding: 40px 20px;
	}
}
@media screen and (max-width: 600px) {
	#repair_service .service_list > li{
		width: 100%!important;
	}
}

/* 施工事例 */
#repair_works::before{
	background: url(/wp-content/themes/cocoon-child-master/assets/images/repair/works_bg.webp);
	background-size: cover;
	background-position: 60% top;
}
#repair_works .heading2 {
  text-align: center;
  color: var(--cocoon-white-color);
  position: relative;
  display: inline-block;
  padding: clamp(5px, 3vw, 20px);
  line-height: 1.5;
}
#repair_works .heading2:before {
    position: absolute;
    content: "";
    left: 0px;
    top: 0px;
    height: 16px;
    width: 16px;
    background: var(--i_sub_color);
    clip-path: polygon(0 0, 0% 100%, 100% 0);

}
#repair_works .heading2:after {
    position: absolute;
    content: "";
    right: 0px;
    bottom: 0px;
    height: 16px;
    width: 16px;
    background: var(--i_sub_color);
    clip-path: polygon(100% 1%, 0% 100%, 100% 100%);

}
#repair_works .button{
	margin-top: 30px;
}
@media screen and (max-width: 600px) {
	#repair_works br.sp{
		display: inline;
	}
}

/* 対応エリア・よくある質問 */
#repair_area_and_faq .wrap{
	display: flex;
	gap: 50px;
	flex-wrap: wrap;
}
#repair_area,
#repair_faq{
	flex: 1;
}
#repair_area_and_faq h2{
	margin-bottom: 30px;
}
/* 対応エリア */
#repair_area figure img{
	width: 60%;
	margin-bottom: 30px;
}
#repair_area ul{
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
	margin-bottom: 30px;
}
#repair_area ul li{
	border: 1px solid var(--i_main_color);
	padding: 0.5em 1em;
	border-radius: 99px;
	color: var(--i_main_color);
}
@media screen and (max-width: 600px) {
	#repair_area ul{
		gap: 0.5rem;
	}
}
/* よくある質問 */
#repair_faq .faq+.faq{
	margin-top: 20px;
}
.is-style-accordion > .faq > .faq-question{
	background: #eee;
}
.faq-wrap .faq-question-label{
	--cocoon-custom-question-color: var(--i_main_color);
}
.faq-wrap .faq-question-label,
.faq-wrap .faq-answer-label{
	font-weight: 600;
}
@media screen and (max-width: 1023px) {
	#repair_area_and_faq .wrap{
		flex-direction: column;
	}
}

/*--------------------
遮熱・断熱塗装
----------------------*/
/* こんなお悩みありませんか？ */
#paint_problem .problem_list{
	margin-block: 30px;
	display: flex;
	justify-content: space-between;
	gap: 1rem;
	flex-wrap: wrap;
}
#paint_problem .problem_list li{
	width: calc((100% - 1rem) / 2);
	background: #fff;
	padding: 15px;
	box-shadow: 3px 3px 5px rgba(0,0,0,0.1);
}
#paint_problem .problem_list+p{
	margin-block: 30px;
}
#paint_problem .cta_2{
	margin-top: 60px;
}
#paint_problem::after {
	content: "";
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	bottom: 0;
	width: 100vw;
	height: 300px;
	background: #fff;
	z-index: -1;
}
@media screen and (max-width: 768px) {
	#paint_problem .problem_list li{
		width: 100%;
	}
}

/* 遮断熱塗装の仕組み */
#paint_mechanism .content{
	margin-block: 30px;
	display: flex;
	gap: 30px 5%;
	justify-content: space-between;
	flex-wrap: none;
}
#paint_mechanism .inner{
	flex: 1;
	background: #fff;
	padding: 40px 30px;
	border: 1px solid #ddd;
	box-shadow: 3px 3px 5px rgba(0,0,0,0.1);
}
#paint_mechanism .inner figure img{
	width: 70%;
	margin-bottom: 30px;
}
#paint_mechanism h3 .skew{
	padding-inline: 15px;
}
#paint_mechanism .summer h3 .skew::after{
	background: #9c2a2a;
}
#paint_mechanism .summer h3{
	color: #9c2a2a;
}
#paint_mechanism .winter h3 .skew::after{
	background: var(--i_main_light-color);
}
#paint_mechanism .winter h3{
	color: var(--i_main_light-color);
}
#paint_mechanism .inner ul{
	margin-top: 30px;
}
#paint_mechanism .inner li{
	background: var(--i_light_color);
	padding: 0.5rem 1rem;
}
#paint_mechanism .inner li+li{
	margin-top: 2rem;
	position: relative;
}
#paint_mechanism .inner li+li::before{
	display: block;
	content: "↓";
	width: 100%;
	text-align: center;
	position:absolute;
	top: 0px;
	left: 0px;
	z-index:0;
	transform: translateY(-100%);
	pointer-events: none;
	color: var(--cocoon-text-color);
}
#paint_mechanism .summer li:last-child{
	color: #9c2a2a;
}
#paint_mechanism .winter li:last-child{
	color: var(--i_main_light-color);
}
@media screen and (max-width: 900px) {
	#paint_mechanism .content{
		flex-direction: column;
	}
	#paint_mechanism .inner{
		padding: 40px 20px;
	}
}

/* 一般塗装との違い */
#paint_comparison.full-wrap::before{
	background-position: 70% 0;
}

#paint_comparison .content{
	margin-block: 30px;
	display: flex;
	justify-content: space-between;
	gap: 30px 5%;
	flex-wrap: nowrap;
}
#paint_comparison .inner{
	flex: 1;
	padding: 40px 30px;
	background: #fff;
	box-shadow: 3px 3px 5px rgba(0,0,0,0.1);
}
#paint_comparison .inner figure img{
	width: 70%;
	margin-bottom: 30px;
}
#paint_comparison h3 .skew{
	padding-inline: 15px;
}
#paint_comparison .standard .skew::after{
	background: #ddd;
}
#paint_comparison .standard .skew{
	color: #333;
}
#paint_comparison .inner table{
	margin-top: 20px;
}
#paint_comparison .inner table td,
#paint_comparison .inner table th{
	border: none;
	background: none;
	color: #333;
	text-align: left;
	font-weight: 500;
}
#paint_comparison .inner table tr{
	background: none;
	border-bottom: 1px solid #ddd;
}
#paint_comparison .inner table td{
	font-weight: 700;
}
#paint_comparison .recommend{
	border: 3px solid var(--i_main_color);
}
#paint_comparison .recommend h3{
	color: var(--i_main_color);
}
#paint_comparison .cta_2{
	margin-top: 60px;
}
@media screen and (max-width: 900px) {
	#paint_comparison .content{
		flex-direction: column;
	}
	#paint_comparison .inner{
		padding: 40px 20px;
	}
}

/* 遮断熱塗装の中核技術
ヒートカットパウダー */
#paint_heatcut{
	clip-path: inset(0);
	width: calc(100% + 3rem);
	margin-left: -1.5rem;
	padding-inline: 1.5rem;
}
#paint_heatcut.full-wrap::before{
	background: url(/wp-content/themes/cocoon-child-master/assets/images/paint/heatcut_bg.webp);
	background-size: cover;
	background-position: center top;
	position: fixed;
}
#paint_heatcut .wrap{
	display: flex;
	gap: 30px 5%;
	position: relative;
	align-items: flex-start;
	flex-direction: column;
}
#paint_heatcut .heading2 span{
	color: #fff;
}
#paint_heatcut .head p{
	color: #fff;
}
#paint_heatcut .content{
	flex-grow: 1;
	margin-top: 30px;
}
#paint_heatcut .inner{
	padding: 0 40px 30px;
	background: #fff;
}
#paint_heatcut .inner h3{
	transform: translate(calc(-1 * clamp(0rem, 2vw, 10px)), calc(-1 * clamp(0.8rem, 2vw, 20px)));
}
#paint_heatcut .inner h3 .skew{
	padding: 3px 15px;
}
#paint_heatcut .inner h3 .skew::after{
	background: var(--i_main_light-color);
}
#paint_heatcut .inner+.inner{
	margin-top: 50px;
}
#paint_heatcut .threepoint ul{
	display: flex;
	flex-wrap: nowrap;
	justify-content: space-between;
	gap: 2rem;
	margin-bottom: 20px;
}
#paint_heatcut .threepoint ul li{
	flex: 1;
}
#paint_heatcut .data ul li{
	padding-left: 1em;
	position: relative;
}
#paint_heatcut .data ul li::before{
	display: block;
	content: "";
	width: 0.5em;
	height: 2px;
	background: var(--i_main_color);
	position:absolute;
	top: calc((1em * 1.8) / 2);
	transform: translateY(-50%);
	left: 0px;
	z-index:0;
	pointer-events: none;
}
#paint_heatcut .data ul li+li{
	margin-top: 0.5rem;
}
@media screen and (min-width: 1024px) {
	#paint_heatcut .wrap{
		flex-direction: row;
	}
	#paint_heatcut .content{
		margin-top: 300px;
	}
	#paint_heatcut .head{
		position: sticky;
		top: 20vh;
		left: 0;
		width: 500px;
		flex-shrink: 0;
	}
}
@media screen and (max-width: 768px) {
	#paint_heatcut .threepoint ul{
		gap: 1rem;
	}
	#paint_heatcut .inner{
		padding: 0 20px 40px;
	}
}
@media screen and (max-width: 480px) {
	#paint_heatcut .threepoint h3 .sp{
		display: inline;
	}
	#paint_heatcut .threepoint ul li{
		font-size: 13px;
	}
}
/* 施工仕様 */
#paint_process picture{
	margin-block: 30px;
	display: block;
	text-align: center;
}
@media screen and (max-width: 1023px) {
	#paint_process img{
		max-width: 500px;
		width: 100%;
	}
}
/* 遮断熱塗装のメリット */
#paint_merit .content{
	margin-block: 30px;
	display: flex;
	flex-wrap: nowrap;
	gap: 1rem;
	justify-content: space-between;
	counter-reset: number 0;
}
#paint_merit .content li{
	background: #fff;
	padding: clamp(25px, 6.5vw, 65px) 15px 20px;
	position: relative;
	flex: 1;
	box-shadow: 3px 3px 5px rgba(0,0,0,0.1);
}
#paint_merit .content li::before {
	content: counter(number,decimal-leading-zero);
	counter-increment: number 1;
	display: block;
	width: 100%;
	position: absolute;
	left: 0;
	top: 20px;
	text-align: center;
	color: var(--i_main_light-color);
	font-size: clamp(18px, 3.5vw, 40px);
	line-height: 1;
	font-weight: bold;
}
#paint_merit .content h3{
	margin-bottom: 15px;
}
@media screen and (max-width: 1023px) {
	#paint_merit .content{
		flex-wrap: wrap;
	}
	#paint_merit .content li{
		min-width: 25%;
	}
}
@media screen and (max-width: 768px) {
	#paint_merit .content li{
		min-width: 33.3%;
	}
}
@media screen and (max-width: 480px) {
	#paint_merit .content {
		flex-direction: column;
	}
	#paint_merit .content li::before {
		top: 10px;
	}
	#paint_merit .content h3{
		margin-bottom: 10px;
	}
}

/* 施工のポイント
　品質を左右する3つの要素 */
#paint_keypoint .content{
	display: flex;
	gap: 30px 50px;
	justify-content: space-between;
	align-items: flex-start;
	margin-block: 30px;

}
#paint_keypoint figure,
#paint_keypoint ul{
	flex: 1;
}
#paint_keypoint ul{
	counter-reset: number 0;
}
#paint_keypoint ul li{
	position: relative;
	padding-left: clamp(30px, 5vw, 60px);
	margin-block: 15px;
	padding-bottom: 15px;
	border-bottom: 1px solid #ddd;
}
#paint_keypoint ul li::before{
	content: counter(number,decimal-leading-zero);
	counter-increment: number 1;
	position: absolute;
	left: 0;
	top: 0.25em;
	border-radius: 50%;
	color: var(--i_main_light-color);
	font-size: clamp(18px, 3.5vw, 40px);
	line-height: 1;
	font-weight: bold;
}

@media screen and (max-width: 900px) {
	#paint_keypoint .content{
		flex-direction: column;
	}
}
/* 注意点 */
#paint_caution .content{
	margin-block: 30px;
	display: flex;
	gap: 30px 5%;
}
#paint_caution .inner{
	background: #fff;
	padding: 40px 30px;
	box-shadow: 3px 3px 5px rgba(0,0,0,0.1);
}
#paint_caution h3{
	margin-bottom: 20px;
}
#paint_caution .icon-link .fa {
	color: var(--i_main_color);
}
@media screen and (max-width: 768px) {
	#paint_caution .content{
		flex-direction: column;
	}
	#paint_caution .inner{
		padding: 40px 20px;
	}
	#paint_caution h3{
		margin-bottom: 15px;
	}
}

/*--------------------
遮熱・断熱防水
----------------------*/
/* こんなお悩みありませんか？ */
#proof_problem .problem_list{
	margin-block: 30px;
	display: flex;
	justify-content: space-between;
	gap: 1rem;
	flex-wrap: wrap;
}
#proof_problem .problem_list li{
	width: calc((100% - 1rem) / 2);
	background: #fff;
	padding: 15px;
	box-shadow: 3px 3px 5px rgba(0,0,0,0.1);
}
#proof_problem .problem_list+p{
	margin-block: 30px;
}
#proof_problem .cta_2{
	margin-top: 60px;
}
#proof_problem::after {
	content: "";
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	bottom: 0;
	width: 100vw;
	height: 300px;
	background: #fff;
	z-index: -1;
}
@media screen and (max-width: 768px) {
	#proof_problem .problem_list li{
		width: 100%;
	}

}
/* 遮断熱防水とは */
#proof_about .content{
	margin-block: 30px;
	display: flex;
	gap: 30px 5%;
}
#proof_about figure{
	width: 60%;
	flex-shrink: 0;
}
#proof_about .text{
	flex-grow: 1;
}
#proof_about .text p + p{
	margin-top: 20px;
}
@media screen and (max-width: 1100px) {
	#proof_about .content{
		flex-direction: column;
	}
	#proof_about figure{
		width: 100%;
	}
	#proof_about figure img{
		max-width: 800px;
		width: 100%;
	}
}
/* 遮断熱防水の4つの特徴 */
#proof_feature .content{
	margin-block: 30px;
	display: flex;
	flex-wrap: nowrap;
	gap: 2rem;
	justify-content: space-between;
	counter-reset: number 0;
}
#proof_feature .inner{
	padding: clamp(25px, 6.5vw, 65px) 15px 20px;
	position: relative;
	flex: 1;
	background: #fff;
	box-shadow: 3px 3px 5px rgba(0,0,0,0.1);
}
#proof_feature .inner::before {
	content: counter(number,decimal-leading-zero);
	counter-increment: number 1;
	display: block;
	width: 100%;
	position: absolute;
	left: 0;
	top: 20px;
	text-align: center;
	color: var(--i_main_light-color);
	font-size: clamp(18px, 3.5vw, 40px);
	line-height: 1;
	font-weight: bold;
}
#proof_feature .content h3 {
  margin-bottom: 15px;
}
@media screen and (max-width: 1200px) {
	#proof_feature .content{
		flex-wrap: wrap;
	}
	#proof_feature .content .inner{
		min-width: 33.3%;
	}
}
@media screen and (max-width: 768px) {
	#proof_feature .content {
		flex-direction: column;
	}
	#proof_feature .content .inner::before {
		top: 10px;
	}
	#proof_feature .content h3{
		margin-bottom: 10px;
	}
}

/* 遮熱防水と断熱防水の違い */
#proof_type .content{
	margin-block: 50px 30px;
	display: flex;
	gap: 50px 5%;
}
#proof_type .inner{
	flex: 1;
	padding: 0 30px 40px;
}
#proof_type h3{
	margin-bottom: 20px;
}
#proof_type h3 .skew{
	transform: translate(calc(-1 * clamp(0rem, 2vw, 10px)), calc(-1 * clamp(0.8rem, 2vw, 20px)));
}
#proof_type .shanetsu{
	background: #e3eef6;
}
#proof_type .shanetsu .skew::after{
	background: var(--i_main_light-color);
}
#proof_type .shanetsu h3{
	color: var(--i_main_light-color);
}
#proof_type .dannetsu{
	background: var(--i_light_color);
}
#proof_type .dannetsu .skew::after{
	background: #9c2a2a;
}
#proof_type .dannetsu{
	background: var(--i_light_color);
}
#proof_type .dannetsu h3{
	color: #9c2a2a;
}
@media screen and (max-width: 768px) {
	#proof_type .content{
		flex-direction: column;
	}
	#proof_type .inner{
		padding: 0 20px 40px;
	}
}

#proof_type .cta_2{
	margin-top: 60px;
}
/* 施工のポイント */
#proof_keypoint .content{
	display: flex;
	gap: 30px 50px;
	justify-content: space-between;
	align-items: flex-start;
	margin-block: 30px;
}
#proof_keypoint figure,
#proof_keypoint ul{
	flex: 1;
}
#proof_keypoint ul{
	counter-reset: number 0;
}
#proof_keypoint ul li{
	position: relative;
	padding: 15px;
	padding-left: clamp(40px, 6.5vw, 80px);
	background: #fff;
	box-shadow: 3px 3px 5px rgba(0,0,0,0.1);
}
#proof_keypoint ul li+li{
	margin-top: 15px;
}
#proof_keypoint ul li::before{
	content: counter(number,decimal-leading-zero);
	counter-increment: number 1;
	position: absolute;
	left: 15px;
	top: 20px;
	border-radius: 50%;
	color: var(--i_main_light-color);
	font-size: clamp(18px, 3.5vw, 40px);
	line-height: 1;
	font-weight: bold;
}

@media screen and (max-width: 900px) {
	#proof_keypoint .content{
		flex-direction: column;
	}
}
/* 大規模修繕との相性 */
#proof_synergy .merit{
	margin-block: 30px;
	border: 1px solid var(--i_main_color);
	padding: 40px 30px;
}
#proof_synergy .merit h3{
	color: var(--i_main_color);
}
#proof_synergy .merit ul{
	display: flex;
	margin-block: 30px;
}
#proof_synergy .merit ul li{
	flex: 1;
	padding: 0 20px;
}
#proof_synergy .merit ul li+li{
	border-left: 1px solid #ddd;
}
#proof_synergy .merit figure{
	margin-bottom: 20px;
	padding-inline: 20%;
}

@media screen and (max-width: 768px) {
	#proof_synergy .merit ul{
		flex-direction: column;
	}
	#proof_synergy .merit ul li{
		padding: 30px 0;
	}
	#proof_synergy .merit ul li+li{
		border-top: 1px solid #ddd;
		border-left: none;
	}
}
@media screen and (max-width: 480px) {
	#proof_synergy .merit h3 .sp{
		display: inline;
	}
}

/* 建物の状態に合わせた最適プランをご提案 */
#proof_price::before{
	background: var(--i_main_light-color);
}
#proof_price{
	position: relative;
	margin-top: 50px;
	min-height: 500px;
}
#proof_price figure{
	position: absolute;
	right: -1.5rem;
	top: -50px;
	width: 50vw;
	height: 500px;
}
#proof_price figure img{
	object-fit: cover;
	width: 100%;
	height: 100%;
}
#proof_price .wrap > *{
	width: 45%;
	margin-right: auto;
	margin-left: 0;
	display: block;
}
#proof_price small{
	margin-top: 30px;
}
@media screen and (max-width: 950px) {
	#proof_price figure{
		height: auto;
		width: 90vw;
		position: static;
		margin-top: -20vw;
		margin-left: -1.5rem;
		margin-bottom: 30px;
	}
	#proof_price .wrap > *{
		width: 100%;
	}

}

/* 守るだけでなく、
快適性まで高める防水工事。 */
#proof_summery .heading2{
	position: relative;
	display: inline-block;
	color: var(--i_main_color);
	text-align: center;
}
#proof_summery .heading2:before {
    position: absolute;
    content: "";
    left: 0px;
    top: 0px;
    height: 16px;
    width: 16px;
    background: var(--i_sub_color);
    clip-path: polygon(0 0, 0% 100%, 100% 0);

}

#proof_summery .heading2:after {
    position: absolute;
    content: "";
    right: 0px;
    bottom: 0px;
    height: 16px;
    width: 16px;
    background: var(--i_sub_color);
    clip-path: polygon(100% 1%, 0% 100%, 100% 100%);

}
#proof_summery p{
	line-height: 2.2;
}

/*--------------------
戸建て外壁塗装
----------------------*/
/* こんな症状が出ていたら要注意 */
#house_warning .content{
	margin-block: 30px;
	display: flex;
	flex-wrap: nowrap;
	justify-content: flex-start;
	gap: 1rem;
}
#house_warning .content li{
	padding: 20px;
	background: #fff;
	box-shadow: 3px 3px 5px rgba(0,0,0,0.15);
}
#house_warning .content li figure{
	margin-bottom: 1rem;
}
#house_warning .cta_2{
	margin-top: 60px;
}
#house_warning::after {
	content: "";
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	bottom: 0;
	width: 100vw;
	height: 300px;
	background: #fff;
	z-index: -1;
}
@media screen and (max-width: 1100px) {
	#house_warning .content{
		flex-wrap: wrap;
	}
	#house_warning .content li{
		width: calc((100% - 2rem) / 3);
	}
}
@media screen and (max-width: 768px) {
	#house_warning .content li{
		width: calc((100% - 1rem) / 2);
	}
}
@media screen and (max-width: 480px) {
	#house_warning .content li{
		width: 100%;
	}
}
/* 外壁塗装で実現できること */
#house_feature .content{
	display: flex;
	gap: 30px 50px;
	justify-content: space-between;
	align-items: flex-start;
	margin-block: 30px;

}
#house_feature figure,
#house_feature ul{
	flex: 1;
}
#house_feature ul{
	counter-reset: number 0;
}
#house_feature ul li{
	position: relative;
	padding-left: clamp(30px, 5vw, 60px);
	margin-block: 15px;
	padding-bottom: 15px;
	border-bottom: 1px solid #ddd;
}
#house_feature ul li::before{
	content: counter(number,decimal-leading-zero);
	counter-increment: number 1;
	position: absolute;
	left: 0;
	top: 0.25em;
	border-radius: 50%;
	color: var(--i_main_light-color);
	font-size: clamp(18px, 3.5vw, 40px);
	line-height: 1;
	font-weight: bold;
}
#house_feature .cta_2{
	margin-top: 60px;
}
@media screen and (max-width: 900px) {
	#house_feature .content{
		flex-direction: column;
	}
}

/* 塗り替えのタイミングと
　塗料の選び方 */
#house_timing_and_paint .content{
	margin-block: 30px;
	display: flex;
	gap: 30px 5%;
}
#house_timing_and_paint .content figure{
	width: 55%;
	flex-shrink: 0;
}
#house_timing_and_paint .content p+p{
	margin-top: 30px;
}
#house_timing_and_paint .toryou{
	margin-top: 50px;
	margin-bottom: 30px;
	display: flex;
	gap: 30px 2rem;
}
#house_timing_and_paint .toryou .inner{
	flex: 1;
	padding: 40px 30px;
	background: #fff;
	box-shadow: 3px 3px 5px rgba(0,0,0,0.1);
}
#house_timing_and_paint .toryou .inner figure img{
	width: 70%;
	margin-bottom: 30px;
}
#house_timing_and_paint .toryou h3 .skew{
	padding-inline: 15px;
}
#house_timing_and_paint .toryou .standard .skew::after{
	background: #ddd;
}
#house_timing_and_paint .toryou .standard .skew{
	color: #333;
}
#house_timing_and_paint .toryou .inner table{
	margin-top: 20px;
}
#house_timing_and_paint .toryou .inner table td,
#house_timing_and_paint .toryou .inner table th{
	border: none;
	background: none;
	color: #333;
	text-align: left;
	font-weight: 500;
}
#house_timing_and_paint .toryou .inner table tr{
	background: none;
	border-bottom: 1px solid #ddd;
}
#house_timing_and_paint .toryou .inner table td{
	font-weight: 700;
}
#house_timing_and_paint .mukitoryo{
	border: 3px solid var(--i_main_color);
}
#house_timing_and_paint .mukitoryo h3{
	color: var(--i_main_color);
}
#house_timing_and_paint .cta_2{
	margin-top: 60px;
}
#house_timing_and_paint::after {
  content: "";
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 0;
  width: 100vw;
  height: 250px;
  background: #fff;
  z-index: -1;
}

@media screen and (max-width: 1023px) {
	#house_timing_and_paint .content,
	#house_timing_and_paint .toryou{
		flex-direction: column;
	}
	#house_timing_and_paint .content figure{
		width: 100%;
	}
}
/* 施工の流れ */
#house_flow picture{
	margin-block: 30px;
	display: block;
	text-align: center;
}
@media screen and (max-width: 1023px) {
	#house_flow img{
		max-width: 500px;
		width: 100%;
	}
}
/* 施工事例 */
#house_works::before{
	background: url(/wp-content/themes/cocoon-child-master/assets/images/house/bg_works.webp);
	background-size: cover;
}
#house_works .content{
	margin-block: 30px;
	display: flex;
	gap: 30px 5%;
	align-items: flex-start;
}
#house_works figure img{
	box-shadow: 3px 3px 5px rgba(0,0,0,0.2);
}
#house_works figure:first-child{
	width: 42%;
}
#house_works figcaption{
	font-size: 1.7rem;
	color: var(--i_main_color);
}
@media screen and (max-width: 600px) {
	#house_works .content{
		flex-direction: column;
	}
	#house_works figure:first-child{
		width: 55%;
	}
	#house_works figcaption{
		font-size: 1.4rem;
	}
}
/* 建物の状態に合わせた最適プランをご提案 */
#house_price::before{
	background: var(--i_main_light-color);
}
#house_price{
	position: relative;
	margin-top: 50px;
	min-height: 500px;
}
#house_price figure{
	position: absolute;
	right: -1.5rem;
	top: -50px;
	width: 50vw;
	height: 500px;
}
#house_price figure img{
	object-fit: cover;
	width: 100%;
	height: 100%;
}
#house_price .wrap > *{
	width: 45%;
	margin-right: auto;
	margin-left: 0;
	display: block;
}
#house_price small{
	margin-top: 30px;
}
@media screen and (max-width: 950px) {
	#house_price figure{
		height: auto;
		width: 90vw;
		position: static;
		margin-top: -20vw;
		margin-left: -1.5rem;
		margin-bottom: 30px;
	}
	#house_price .wrap > *{
		width: 100%;
	}

}

/* 見た目だけでなく、
住まいを守るための大切な工事です */
#house_summery .heading2{
	position: relative;
	display: inline-block;
	color: var(--i_main_color);
	text-align: center;
}
#house_summery .heading2:before {
    position: absolute;
    content: "";
    left: 0px;
    top: 0px;
    height: 16px;
    width: 16px;
    background: var(--i_sub_color);
    clip-path: polygon(0 0, 0% 100%, 100% 0);

}

#house_summery .heading2:after {
    position: absolute;
    content: "";
    right: 0px;
    bottom: 0px;
    height: 16px;
    width: 16px;
    background: var(--i_sub_color);
    clip-path: polygon(100% 1%, 0% 100%, 100% 100%);

}
#house_summery p{
	line-height: 2.2;
}
@media screen and (max-width: 480px) {
	#house_summery p .sp{
		display: inline;
	}
}

/*--------------------
ガラスコーティング
----------------------*/
/* こんなお悩みありませんか？ */
#glass_problem .problem_list{
	margin-block: 30px;
	display: flex;
	justify-content: space-between;
	gap: 1rem;
	flex-wrap: wrap;
}
#glass_problem .problem_list li{
	width: calc((100% - 1rem) / 2);
	background: #fff;
	padding: 15px;
	box-shadow: 3px 3px 5px rgba(0,0,0,0.1);
}
#glass_problem .problem_list+p{
	margin-block: 30px;
}
#glass_problem .cta_2{
	margin-top: 60px;
}
#glass_problem::after {
	content: "";
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	bottom: 0;
	width: 100vw;
	height: 300px;
	background: #fff;
	z-index: -1;
}
@media screen and (max-width: 768px) {
	#glass_problem .problem_list li{
		width: 100%;
	}
}
/* ガラスコーティングとは */
#glass_about .content{
	margin-block: 30px;
	display: flex;
	gap: 30px 5%;
}
#glass_about figure{
	width: 50%;
	flex-shrink: 0;
}
#glass_about .text{
	flex-grow: 1;
}
#glass_about .text p + p{
	margin-top: 20px;
}
@media screen and (max-width: 900px) {
	#glass_about .content{
		flex-direction: column;
	}
}

/* ガラスコーティングの4つの特徴 */
#glass_feature .content{
	margin-block: 30px;
	display: flex;
	flex-wrap: wrap;
	gap: 2rem;
	justify-content: space-between;
	counter-reset: number 0;
}
#glass_feature .inner{
	padding: clamp(25px, 6.5vw, 65px) 15px 20px;
	position: relative;
	flex: 1;
	background: #fff;
	box-shadow: 3px 3px 5px rgba(0,0,0,0.1);
	min-width: 48%;
}
#glass_feature .inner::before {
	content: counter(number,decimal-leading-zero);
	counter-increment: number 1;
	display: block;
	width: 100%;
	position: absolute;
	left: 0;
	top: 20px;
	text-align: center;
	color: var(--i_main_light-color);
	font-size: clamp(18px, 3.5vw, 40px);
	line-height: 1;
	font-weight: bold;
}
#glass_feature .content h3 {
  margin-bottom: 15px;
}
@media screen and (max-width: 768px) {
	#glass_feature .content {
		flex-direction: column;
	}
	#glass_feature .content .inner::before {
		top: 10px;
	}
	#glass_feature .content h3{
		margin-bottom: 10px;
	}
}

/* 幅広い素材に対応 */
#glass_material .content{
	margin-block: 30px;
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-start;
}
#glass_material .content li{
	display: flex;
	align-items: center;
	gap: 2rem;
	min-width: 45%;
	flex: 1;
	padding: 1rem;
}
#glass_material .content li figure{
	width: 40%;
	flex-shrink: 0;
}
#glass_material .content li:nth-of-type(n+3){
	border-top: 1px solid #ddd;
}
#glass_material .content li:nth-of-type(2n){
	border-left: 1px solid #ddd;
}

#glass_material .cta_2{
	margin-top: 60px;
}
#glass_material::after {
	content: "";
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	bottom: 0;
	width: 100vw;
	height: 300px;
	background: #fff;
	z-index: -1;
}
@media screen and (max-width: 1000px) {
	#glass_material .content{
		flex-direction: column;
	}
	#glass_material .content li{
		gap: 1rem;
		align-items: flex-start;
	}
	#glass_material .content li:nth-of-type(2n){
		border-left: none;
	}
	#glass_material .content li:nth-of-type(n+2){
		border-top: 1px solid #ddd;
	}
}
@media screen and (max-width: 480px) {
	#glass_material .content li .text p{
		font-size: 14px;
	}
}

/* 一般的な塗装との違い */
#glass_comparison{
	padding-top: 0!important;
}
#glass_comparison::after {
	content: "";
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	top: 0;
	width: 100vw;
	height: 150px;
	background: #fff;
	z-index: -1;
}
#glass_comparison .cta_2{
	margin-bottom: 80px;
}
#glass_comparison .content{
	margin-top: 50px;
	margin-bottom: 30px;
	display: flex;
	gap: 30px 2rem;
}
#glass_comparison .inner{
	flex: 1;
	padding: 40px 30px;
	background: #fff;
	box-shadow: 3px 3px 5px rgba(0,0,0,0.1);
}
#glass_comparison .inner figure img{
	width: 70%;
	margin-bottom: 30px;
}
#glass_comparison h3 .skew{
	padding-inline: 15px;
}
#glass_comparison .standard .skew::after{
	background: #ddd;
}
#glass_comparison .standard .skew{
	color: #333;
}
#glass_comparison .inner table{
	margin-top: 20px;
}
#glass_comparison .inner table td,
#glass_comparison .inner table th{
	border: none;
	background: none;
	color: #333;
	text-align: left;
	font-weight: 500;
}
#glass_comparison .inner table tr{
	background: none;
	border-bottom: 1px solid #ddd;
}
#glass_comparison .inner table td{
	font-weight: 700;
}
#glass_comparison .recommend{
	border: 3px solid var(--i_main_color);
}
#glass_comparison .recommend h3{
	color: var(--i_main_color);
}
@media screen and (max-width: 650px) {
	#glass_comparison .content{
		flex-direction: column;
	}
}
/* 施工のポイント */

#glass_point .content{
	display: flex;
	gap: 30px 50px;
	justify-content: space-between;
	align-items: flex-start;
	margin-block: 30px;
	flex-direction: row-reverse;
}
#glass_point figure,
#glass_point ul{
	flex: 1;
}
#glass_point ul{
	counter-reset: number 0;
}
#glass_point ul li{
	position: relative;
	padding-left: clamp(30px, 5vw, 60px);
	margin-block: 15px;
	padding-bottom: 15px;
	border-bottom: 1px solid #ddd;
}
#glass_point ul li::before{
	content: counter(number,decimal-leading-zero);
	counter-increment: number 1;
	position: absolute;
	left: 0;
	top: 0.25em;
	border-radius: 50%;
	color: var(--i_main_light-color);
	font-size: clamp(18px, 3.5vw, 40px);
	line-height: 1;
	font-weight: bold;
}
#glass_point .cta_2{
	margin-top: 60px;
}
@media screen and (max-width: 900px) {
	#glass_point .content{
		flex-direction: column;
	}
}


/* 施工後に期待できる効果 */
#glass_effect .content{
	margin-block: 30px;
	display: flex;
	flex-wrap: nowrap;
	gap: 2rem;
	justify-content: space-between;
	counter-reset: number 0;
}
#glass_effect .inner{
	padding: clamp(25px, 6.5vw, 65px) 15px 20px;
	position: relative;
	flex: 1;
	background: #fff;
	box-shadow: 3px 3px 5px rgba(0,0,0,0.1);
}
#glass_effect .inner::before {
	content: counter(number,decimal-leading-zero);
	counter-increment: number 1;
	display: block;
	width: 100%;
	position: absolute;
	left: 0;
	top: 20px;
	text-align: center;
	color: var(--i_main_light-color);
	font-size: clamp(18px, 3.5vw, 40px);
	line-height: 1;
	font-weight: bold;
}
#glass_effect .content h3 {
  margin-bottom: 15px;
}

@media screen and (max-width: 1200px) {
	#glass_effect .content {
		flex-wrap: wrap;
	}
	#glass_effect .content .inner{
		min-width: 33.3%;
	}
}
@media screen and (max-width: 768px) {
	#glass_effect .content {
		flex-direction: column;
	}
	#glass_effect .content .inner::before {
		top: 10px;
	}
	#glass_effect .content h3{
		margin-bottom: 10px;
	}
}
/* 大規模修繕との相性 */
#glass_synergy .merit{
	margin-block: 30px;
	border: 1px solid var(--i_main_color);
	padding: 40px 30px;
}
#glass_synergy .merit h3{
	color: var(--i_main_color);
}
#glass_synergy .merit ul{
	display: flex;
	margin-block: 30px;
}
#glass_synergy .merit ul li{
	flex: 1;
	padding: 0 20px;
}
#glass_synergy .merit ul li+li{
	border-left: 1px solid #ddd;
}
#glass_synergy .merit figure{
	margin-bottom: 20px;
	padding-inline: 20%;
}
#glass_synergy .closing+.closing{
	margin-top: 20px;
}

@media screen and (max-width: 768px) {
	#glass_synergy .merit ul{
		flex-direction: column;
	}
	#glass_synergy .merit ul li{
		padding: 30px 0;
	}
	#glass_synergy .merit ul li+li{
		border-top: 1px solid #ddd;
		border-left: none;
	}
}

/* 建物の状態に合わせた最適プランをご提案 */
#glass_price::before{
	background: var(--i_main_light-color);
}
#glass_price{
	position: relative;
	margin-top: 50px;
	min-height: 500px;
}
#glass_price figure{
	position: absolute;
	left: -1.5rem;
	top: -50px;
	width: 50vw;
	height: 500px;
}
#glass_price figure img{
	object-fit: cover;
	width: 100%;
	height: 100%;
	object-position: 50% 0%;
}
#glass_price .wrap > *{
	width: 45%;
	margin-right: 0;
	margin-left: auto;
	display: block;
}
#glass_price small{
	margin-top: 30px;
}
@media screen and (max-width: 950px) {
	#glass_price figure{
		height: auto;
		width: 90vw;
		position: static;
		margin-top: -20vw;
		margin-left: -1.5rem;
		margin-bottom: 30px;
	}
	#glass_price .wrap > *{
		width: 100%;
	}

}
/* 見た目だけでなく、
長期間守るコーティング。 */
#glass_summery .heading2{
	position: relative;
	display: inline-block;
	color: var(--i_main_color);
	text-align: center;
}
#glass_summery .heading2:before {
    position: absolute;
    content: "";
    left: 0px;
    top: 0px;
    height: 16px;
    width: 16px;
    background: var(--i_sub_color);
    clip-path: polygon(0 0, 0% 100%, 100% 0);

}

#glass_summery .heading2:after {
    position: absolute;
    content: "";
    right: 0px;
    bottom: 0px;
    height: 16px;
    width: 16px;
    background: var(--i_sub_color);
    clip-path: polygon(100% 1%, 0% 100%, 100% 100%);

}
#house_summery p{
	line-height: 2.2;
}
@media screen and (max-width: 480px) {
	#house_summery p .sp{
		display: inline;
	}
}

/*--------------------
売却前・価値最大化診断
----------------------*/
/* こんなお悩みありませんか？ */
#sell_problem .problem_list{
	margin-block: 30px;
	display: flex;
	justify-content: space-between;
	gap: 1rem;
	flex-wrap: wrap;
}
#sell_problem .problem_list li{
	width: calc((100% - 1rem) / 2);
	background: #fff;
	padding: 15px;
	box-shadow: 3px 3px 5px rgba(0,0,0,0.1);
}
#sell_problem .problem_list+p{
	margin-block: 30px;
}
#sell_problem .cta_2{
	margin-top: 60px;
}
#sell_problem::after {
	content: "";
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	bottom: 0;
	width: 100vw;
	height: 300px;
	background: #fff;
	z-index: -1;
}
@media screen and (max-width: 768px) {
	#sell_problem .problem_list li{
		width: 100%;
	}
}
/* 進め方の違いが、結果を大きく分けます */
#sell_comparison .content{
	margin-block: 30px;
	display: flex;
	gap: 30px 5%;
	justify-content: space-between;
	flex-wrap: none;
}
#sell_comparison .inner{
	flex: 1;
	background: #fff;
	padding: 40px 30px;
	border: 1px solid #ddd;
	box-shadow: 3px 3px 5px rgba(0,0,0,0.1);
}
#sell_comparison .inner h3{
	margin-bottom: 30px;
}
#sell_comparison h3 .skew{
	padding-inline: 15px;
}
#sell_comparison .standard h3 .skew::after{
	background: #ddd;
}
#sell_comparison .standard h3 .skew,
#sell_comparison .standard h3{
	color: #333;
}
#sell_comparison .recommend{
	border: 3px solid var(--i_main_color);
}

#sell_comparison .recommend h3{
	color: var(--i_main_color);
}
#sell_comparison .inner ul{
	margin-bottom: 30px;
}
#sell_comparison .inner .flow li{
	background: var(--i_light_color);
	padding: 0.5rem 1rem;
}
#sell_comparison .inner .flow li+li{
	margin-top: 2rem;
	position: relative;
}
#sell_comparison .inner .flow li+li::before{
	display: block;
	content: "↓";
	width: 100%;
	text-align: center;
	position:absolute;
	top: 0px;
	left: 0px;
	z-index:0;
	transform: translateY(-100%);
	pointer-events: none;
	color: var(--cocoon-text-color);
}
#sell_comparison .standard .flow li:last-child{
	color: #333;
}
#sell_comparison .standard .closing{
	color: #9c2a2a;
}
#sell_comparison .recommend .flow .bold{
	color: #fff;
	background: var(--i_main_light-color);
}
#sell_comparison .inner .flow li:nth-of-type(3):before{
	content: "↓ 情報共有";
}
#sell_comparison .inner h4{
	margin-bottom: 20px;
}
#sell_comparison .recommend .closing2{
	background: var(--i_sub_color);
	color: #fff;
	padding: 0.5rem 1rem;
	margin-top: 20px;
}

@media screen and (max-width: 900px) {
	#sell_comparison .content{
		flex-direction: column;
	}
	#sell_comparison .inner{
		padding: 40px 20px;
	}
}

/* 一般媒介 vs 専任契約 */
#sell_conparison_table .content{
	margin-block: 30px;
}
#sell_conparison_table table tr{
	background-color: #fff;
}
#sell_conparison_table table tr th:first-child{
	width: 25%;
}
#sell_conparison_table table td{
	text-align: center;
}
#sell_conparison_table table thead tr th:last-child,
#sell_conparison_table table tr td:last-child{
	border-left: 4px solid var(--i_main_light-color);
	border-right: 4px solid var(--i_main_light-color);
}
#sell_conparison_table table thead tr th:last-child{
	background: var(--i_main_light-color);
	border-top: 8px solid var(--i_main_light-color);
}
#sell_conparison_table table tr td:last-child{
	color: var(--i_main_light-color);
	font-weight: bold;
}
#sell_conparison_table table tbody tr:last-child td:last-child{
	border-bottom: 4px solid var(--i_main_light-color);
}
#sell_conparison_table .cta_2{
	margin-top: 60px;
}
#sell_conparison_table::after{
	content: "";
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	bottom: 0;
	width: 100vw;
	height: 200px;
	background: #fff;
	z-index: -1;
}

/* 実例 */
#sell_case .content{
	margin-block: 30px;
	display: flex;
	flex-direction: column;
	gap: 50px 5%;
}
#sell_case .inner{
	border: 1px solid #ddd;
	padding: 0 30px 40px;
	box-shadow: 3px 3px 5px rgba(0,0,0,0.1);
}
#sell_case .recommend{
	border: 3px solid var(--i_main_color);
}
#sell_case h3 {
	transform: translate(calc(-1 * clamp(0rem, 2vw, 35px)), calc(-1 * clamp(0rem, 2vw, 15px)));
}
#sell_case .standard h3 span{
	color: #333;
}
#sell_case .standard .skew::after{
	background: #ddd;
}

#sell_case .inner_item{
	display: flex;
	gap: 30px 5%;
	align-items: center;
	max-width: 1200px;
	margin: 0 auto;
}
#sell_case .inner_item figure{
	width: 15%;
	max-width: 130px;
	flex-shrink: 0;
}
#sell_case .inner_item .inner_item_txt{
	flex: 1;
}
#sell_case .inner_item_txt .heading4 span{
	display: block;
	color: var(--i_main_color);
	font-size: 85%;
}
#sell_case .inner_item_txt .heading4{
	border-bottom: 1px solid #333;
	padding-bottom: 5px;
	margin-bottom: 10px;
}
#sell_case .result{
	display: flex;
	justify-content: space-between;
	width: 100%;
	gap: 0px 50px;
	align-items: baseline;
	margin-bottom: 20px;
}
#sell_case .result >div{
	display: flex;
	gap: 1rem;
	align-items: baseline;
}
#sell_case .result dt{
	border: 1px solid #333;
	padding: 0 0.5em;;
	font-size: 90%;
	margin-bottom: 0.5em;
}
#sell_case .result dd,
#sell_case .result p{
	font-weight: bold;
}
#sell_case .result .price{
	font-size: 200%;
	margin-right: 0.2em;
}
#sell_case .result p{
	padding: 0 0.5em;
	background: #c94b4b;
	color: #fff;
	line-height: 1.4;
}
#sell_case .inner:nth-of-type(n+2) .result p{
	background: var(--i_main_light-color);
	color: #fff;
}
@media screen and (max-width: 1050px) {
	#sell_case .inner_item{
		flex-direction: column;
	}
	#sell_case .inner_item figure{
		width: 35%;
		margin-top: 20px;
	}
	#sell_case .inner{
		padding: 0 20px 40px;
	}
	#sell_case .inner_item .inner_item_txt{
		width: 100%;
	}
	#sell_case .result .price{
		font-size: 150%;
	}
}
@media screen and (max-width: 767px) {
	#sell_case .result{
		flex-direction: column;
	}
	#sell_case .result p{
		margin: 20px auto 0;
		width: 100%;
		text-align: center;
	}
}

/* オーナーにとってのメリット */
#sell_merit .content{
	margin-block: 30px;
	display: flex;
	gap: 1rem;
	justify-content: space-between;
	flex-wrap: wrap;
	counter-reset: number 0;
}

#sell_merit .content .inner{
	background: #fff;
	padding: clamp(25px, 6.5vw, 65px) 15px 20px;
	position: relative;
	flex: 1;
	min-width: 20%;
	box-shadow: 3px 3px 5px rgba(0,0,0,0.1);
}
#sell_merit .content .inner::before {
	content: counter(number,decimal-leading-zero);
	counter-increment: number 1;
	display: block;
	width: 100%;
	position: absolute;
	left: 0;
	top: 20px;
	text-align: center;
	color: var(--i_main_light-color);
	font-size: clamp(18px, 3.5vw, 40px);
	line-height: 1;
	font-weight: bold;
}
#sell_merit .content h3{
	margin-bottom: 15px;
}
@media screen and (max-width: 900px) {
	#sell_merit .content .inner{
		min-width: 25%;
	}
}
@media screen and (max-width: 600px) {
	#sell_merit .content .inner{
		min-width: 33.3%;
	}
}
@media screen and (max-width: 480px) {
	#sell_merit .content{
		flex-direction: column;
	}
	#sell_merit .content h3{
		padding-top: 20px;
	}
}
/* 選ばれる理由 */
#sell_reason .content{
	margin-block: 30px;
	display: flex;
	gap: 30px 5%;
	justify-content: space-between;
	flex-direction: column;
}
#sell_reason .inner{
	display: flex;
	gap: 30px 5%;
	align-items: center;
}
#sell_reason .inner figure{
	width: 40%;
	flex-shrink: 0;
}
#sell_reason .inner .text{
	flex: 1;
}
#sell_reason .inner h3{
	color: var(--i_main_color);
	margin-bottom: 30px;
}
#sell_reason .inner:nth-of-type(2n){
	flex-direction: row-reverse;
}