@charset "utf-8";


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

#contents {
	background: #FFF;
	width: 100%;
	padding-bottom: 0;
	overflow: hidden;
}

.org-main * {
	font-family: "Noto Sans JP";
}

[class*="__section"].bg-color {
	background: #E7F8F7;
}
.section__inner {
	width: 1140px;
	margin: 0 auto;
}
	.section__headline {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		gap: 2px;
		font-size: 20px;
		font-weight: 800;
		line-height: 1.4;
		color: #08938B;
		text-align: center;
	}
	.section__headline span {
		font-size: 62px;
		font-weight: 800;
		color: #333;
		font-family: "Montserrat", sans-serif;
		text-align: center;
		line-height: 1.2;
	}
	.section__headline span::first-letter {
		color: #08938B;
	}

/*------------------- 無料でお見積もり依頼をする -------------------*/

#form-link {
	padding-top: 200px;
	margin-top: -200px;
}
.form__section {
	padding-block: 111px 60px;
	background: url(/pg-contact/images/bg_form.webp) no-repeat center / cover;
}
	.form__head {
		margin-bottom: 9px;
		position: relative;
	}
		.form__left-text {
			font-size: 16px;
			font-weight: 800;
			line-height: 1;
			color: #FFF;
			position: absolute;
			top: -20px;
			left: 246px;
		}
			.form__left-text span {
				font-size: 28px;
				font-weight: 800;
				line-height: 1;
			}
		.form__pop-text {
			padding: 3px 21px 8px 26px;
			background: #08938B;
			border-radius: 9999px;
			font-size: 20px;
			font-weight: 800;
			line-height: 1.4;
			color: #FFF;
			position: absolute;
			top: -62px;
			left: 390px;
		}
		.form__pop-text::before {
			content: '';
			display: block;
			width: 0;
			height: 0;
			border-style: solid;
			border-right: 13px solid transparent;
			border-left: 13px solid transparent;
			border-top: 13px solid #08938B;
			border-bottom: 0;
			position: absolute;
			left: 50%;
			bottom: -9px;
			transform: translateX(-50%);
		}
			.form__pop-text span {
				font-size: 34px;
				font-weight: 700;
				color: #FBF30B;
			}
		.form__title {
			font-size: 50px;
			font-weight: 700;
			color: #FFF;
			text-align: center;
		}
			.form__title span {
				color: #FBF30B;
			}
	.form__contents {
		padding: 40px 63px 30px;
		background: #FFF;
		border-radius: 20px;
		width: 970px;
		margin: 0 auto;

		.form__second-step,
		.form__third-step {
			display: none;
		}
	}
		.form__step-list {
			display: flex;
			justify-content: center;
			align-items: center;
			gap: 32px;
			margin-bottom: 44px;
			position: relative;
			z-index: 1;
		}
		.form__step-list::before {
			content: '';
			background: #08938B;
			width: 280px;
			height: 1px;
			position: absolute;
			top: 18px;
			left: 50%;
			transform: translateX(-50%);
			z-index: -1;
		}
			.form__step-item {
				display: flex;
				flex-direction: column;
				align-items: center;
				gap: 2px;
				position: relative;
			}
			.form__step-item.is-active {
				.form__step-num {
					background: #08938B;
					border: 1px solid #08938B;
					color: #FFF;
				}
				.form__step-text {
					color: #08938B;
				}
			}
			.form__step-item.is-end {
				.form__step-num {
					background: #D0D0D0;
					border: 1px solid #D0D0D0;
					color: #A4A4A4;
				}
				.form__step-text {
					color: #A4A4A4;
				}
			}
				.form__step-num {
					display: flex;
					justify-content: center;
					align-items: center;
					width: 36px;
					height: 36px;
					border: 1px solid #D0D0D0;
					background: #FFF;
					border-radius: 50%;
					font-size: 16px;
					font-weight: 500;
					color: #BCBCBC;
				}
				.form__step-text {
					font-size: 10px;
					font-weight: 500;
					color: #BCBCBC;
					position: absolute;
					left: 50%;
					bottom: -15px;
					transform: translateX(-50%);
					white-space: nowrap;
				}

	.form__input-wrap {
		display: flex;
		flex-direction: column;
		gap: 13px;
	}
	.form__input-group {
		display: flex;
		align-items: center;
		gap: 30px;
		width: 100%;
		padding-bottom: 12px;
		border-bottom: 1px solid #F0F0F0;
	}
	.phone-title {
		width: 150px;
	}
	.form__second-step .form__input-group {
		justify-content: center;
		width: fit-content;
		margin: 0 auto;

		.form__input-title {
			width: 148px;
		}
	}
	.form__second-step:has(.js-step-error) {
		.form__input-title {
			width: 155px;
		}
	}
	.form__third-step .form__input-group {
		justify-content: center;
		width: fit-content;
		margin: 0 auto;

		.form__input-title {
			width: 148px;
		}
	}
	.form__third-step:has(.js-step-error) {
		.form__input-title {
			width: 155px;
		}
	}
	.js-step-error {
		font-size: 12px;
	}
		.form__input-title {
			display: flex;
			justify-content: space-between;
			align-items: center;
			gap: 8px;
			width: 208px;
			font-size: 20px;
			font-weight: 600;
			line-height: 1.4;
			color: #333;
			position: relative;
			padding-left: 18px;
		}
			.sub-title {
				display: contents;
				font-size: 16px;
				font-weight: 500;
				line-height: 1.4;
				color: #333;
			}
			.form__input-title::before {
				content: '';
				background: #08938B;
				display: block;
				width: 10px;
				height: 10px;
				position: absolute;
				left: 0;
				top: 10px;
			}
			[class*="form__label--"] {
				display: flex;
				justify-content: center;
				align-items: center;
				width: 42px;
				height: 22px;
				border-radius: 3px;
				font-size: 14px;
				font-weight: 600;
				color: #FFF;
			}
			.form__label--required {
				background: #CA1717;
			}
			.form__label--any {
				background: #1774CA;
			}

			.form__check-group {
				display: flex;
				gap: 10px;
				justify-content: center;
				flex-wrap: wrap;
				font-family: sans-serif;
			}
			
			.form__check-item {
				position: relative;
				display: flex;
				flex-direction: column;
				align-items: center;
				width: 144px;
				padding: 12px 11px 6px;
				border: 1px solid #ccc;
				cursor: pointer;
				background-color: #fff;
				transition: background-color 0.2s, border-color 0.2s; 
				
				&:hover {
					background-color: #E7F8F7;
				}

				&:has(input:checked) {
					background-color: #E7F8F7;

					&:hover {
						background-color: #E7F8F7;
					}
				}
			}
			.form__check-item.checkbox {
				padding: 12px 11px 11px;
			}
			
			input[type="radio"] {
				display: none;
				position: absolute;
				top: 12px;
				left: 12px;
				margin: 0;
				cursor: pointer;
			}
			input[type="checkbox"] {
				position: absolute;
				left: 11px;
				bottom: 12px;
				width: 18px;
				height: 18px;
				margin: 0;
				border-radius: 2px;
				border: 1px solid #D9D9D9;
			}
			
			.form__check-image {
				margin: 0 0 3px 0;
				width: 100%;
				
				img {
					width: 100%;
					height: auto;
					display: block;
					object-fit: cover;
				}
			}
			.checkbox .form__check-image {
				margin-bottom: 5px;
			}
			
			.form__check-text {
				margin: 0;
				font-size: 16px;
				font-weight: 700;
				color: #333;
				text-align: center;
			}
			.checkbox .form__check-text {
				width: 96px;
				margin: 0 0 0 auto;
			}
		.form__select-group select {
			width: 290px;
			height: 50px;
			background: #FFF url(/pg-contact/images/icon_select.svg) no-repeat 265px 22px / 10px 6px;
			border-radius: 5px;
			border: 1px solid #CCC;
			padding: 0 35px 0 15px;
			font-size: 16px;
			font-weight: 500;
			line-height: 1;
		}
		.form__text-group {
			display: flex;
			align-items: center;
			gap: 10px;
		}
			.form__text-group input[type="text"],
			.form__text-group input[type="tel"],
			.form__text-group input[type="email"] {
				width: 472px;
				height: 50px;
				border-radius: 5px;
				border: 1px solid #CCC;
				padding: 0 10px;
				font-size: 16px;
				font-weight: 500;
			}
			.form__text-group input[type="text"].address-input1 {
				width: 105px;
			}
			.form__text-group input[type="text"].address-input2 {
				width: 357px;
			}
				.form__text-group input[type="text"]::placeholder,
				.form__text-group input[type="tel"]::placeholder,
				.form__text-group input[type="email"]::placeholder {
					color: #CCC;
				}
		.form__button-wrap {
			display: flex;
			justify-content: center;
			align-items: center;
			gap: 20px;
			margin-top: 30px;
		}
			[class*="form__button--"] {
				display: flex;
				justify-content: center;
				align-items: center;
				width: 260px;
				height: 50px;
				font-size: 16px;
				font-weight: 600;
				line-height: 1.8;
				position: relative;
				cursor: pointer;
			}
			.form__button--prev {
				background: #E6E6E6;
				border: 2px solid #E6E6E6;
				color: #9C9C9C;
			}
			.form__button--prev:hover {
				background: #FFF;
				transition: .4s;
			}
			.form__button--next {
				background: #08938B;
				border: 2px solid #08938B;
				color: #FFF;
			}
			.form__button--next:hover {
				background: #FFF;
				color: #08938B;
				transition: .4s;
			}
				[class*="form__button--"] svg {
					width: 6px;
					height: 10px;
					fill: none;
					position: absolute;
					top: 50%;
					transform: translateY(-50%);
				}
				.form__button--prev svg {
					stroke: #9C9C9C;
					left: 20px;
					transform: translateY(-50%) rotate(180deg);
				}
				.form__button--next svg {
					stroke: #FFF;
					right: 20px;
				}
				.form__button--next:hover svg {
					stroke: #08938B;
				}

/*------------------- 確認画面 -------------------*/

.confirm__wrap {
	display: grid;
	grid-template-columns: 1fr 1fr;
	align-items: flex-end;
	gap: 40px;
}
	.confirm__item {
		display: flex;
		gap: 30px;
		padding-bottom: 17px;
		border-bottom: 1px solid #F0F0F0;
	}
	.confirm__item:not(:last-of-type) {
		margin-bottom: 17px;
	}
		.confirm__title {
			width: 64px;
			font-size: 16px;
			font-weight: 600;
			line-height: 1.4;
			color: #333;
			margin-top: 3px;
		}
		.confirm__text,
		.confirm__text li {
			font-size: 16px;
			font-weight: 400;
			line-height: 1.8;
			color: #333;
		}
		.confirm__text ul {
			display: flex;
			align-items: center;
			gap: 5px;
		}

/*------------------- 完了画面 -------------------*/

.thankyou__title {
	font-size: 25px;
	font-weight: 600;
	line-height: 1.4;
	color: #333;
	text-align: center;
	margin-bottom: 20px;
}
.thankyou__text {
	font-size: 16px;
	font-weight: 400;
	line-height: 1.6;
	color: #333;
	text-align: center;
}

/*------------------- こんなお困りごとありませんか？ -------------------*/

.trouble__section {
	padding: 82px 0 100px;
}
	.trouble__list {
		display: flex;
		flex-wrap: wrap;
		gap: 30px;
		margin-top: 50px;
	}
		.trouble__item {
			width: 360px;
		}
			.trouble__text {
				display: flex;
				align-items: center;
				gap: 8px;
				font-size: 20px;
				font-weight: 800;
				line-height: 1.4;
				color: #333;
				margin-bottom: 10px;
			}
				.trouble__text::before {
					content: '';
					background: url(/pg-contact/images/icon_trouble-deco.svg) no-repeat center / cover;
					display: block;
					width: 29px;
					height: 29px;
				}

/*------------------- カヨシホームの外壁・屋根工事はここが違う！ -------------------*/

.advantage__section {
	padding: 79px 0 100px;
}	
	.advantage__list {
		margin-top: 48px;
		display: flex;
		flex-direction: column;
		gap: 50px;
	}
		.advantage__item {
			display: flex;
			justify-content: space-between;
			align-items: center;
			gap: 30px;
		}
		.advantage__item:nth-child(even) {
			flex-direction: row-reverse;
		}
			.advantage__image {
				min-width: 420px;
			}
			.advantage__detail {
				width: 100%;
			}
				.advantage__title {
					font-size: 34px;
					font-weight: 700;
					color: #08938B;
					padding-bottom: 16px;
					margin-bottom: 20px;
					border-bottom: 1px solid #08938B;
				}
				.advantage__text {
					font-size: 16px;
					font-weight: 500;
					line-height: 2;
					color: #333;
				}

/*------------------- カヨシホームの施工実績 -------------------*/

.works__section {
	padding: 80px 0 99px;

	.section__headline {
		position: relative;
	}
		.section__headline::before {
			content: '';
			background: url(/pg-contact/images/img_works-title-deco.webp) no-repeat center / cover;
			display: block;
			width: 212px;
			height: 84px;
			position: absolute;
			right: 222px;
			bottom: 5px;
		}
	.slider__wrap {
		transform: translateX(-70px);
	}
}
	.slider__contents {
		margin-top: 50px;
		margin-bottom: 30px;
	}
		.org-main .slider__list {
			z-index: 0;
		}
		[class*="slider__item--"] {
			width: 320px;
			height: auto;
			border: 1px solid #CCC;
			border-right: none;
		}
			[class*="slider__item--"] a {
				display: block;
				padding: 30px 30px 29px;
			}
			[class*="slider__item--"] a:hover {
				opacity: 1;
			}
			.slider__item--works a {
				padding: 30px 22px 29px;
			}
				.slider__image {
					width: 260px;
					height: 174px;
					margin: 0 auto 8px;
					background: #CCC;
					overflow: hidden;
				}
					.slider__image img {
						width: 100%;
						height: 100%;
						object-fit: contain;
						transform: scale(1.0);
    					transition: transform 0.4s ease-in-out;
					}
					[class*="slider__item--"] a:hover .slider__image img {
						transform: scale(1.08);
						transition: transform 0.4s ease-in-out;
					}
				.works__head {
					display: flex;
					justify-content: space-between;
					flex-wrap: wrap;
					gap: 2px 25px;
					margin-bottom: 8px;
				}
					.works__category {
						display: flex;
						justify-content: center;
						align-content: center;
						background: #08938B;
						padding: 0 6px;
						font-size: 14px;
						font-weight: 400;
						color: #FFF;
					}
					.works__date {
						font-size: 14px;
						font-weight: 400;
						color: #08938B;
					}
				.works__title {
					font-size: 16px;
					font-weight: 800;
					line-height: 1.4;
					color: #333;
					display: -webkit-box;
					-webkit-box-orient: vertical;
					-webkit-line-clamp: 2;
					overflow: hidden;
					margin-bottom: 6px;
				}
				.works__text {
					font-size: 16px;
					font-weight: 500;
					line-height: 1.4;
					color: #868686;
					display: -webkit-box;
					-webkit-box-orient: vertical;
					-webkit-line-clamp: 2;
					overflow: hidden;
				}
		.swiper-pagination.org-pagination {
			display: flex;
			justify-content: center;
			align-items: center;
			gap: 12px;
			position: unset;
			margin-top: 30px;

			.swiper-pagination-bullet {
				width: 12px;
				height: 12px;
				margin: 0 !important;
				opacity: 1;
				background: #CCC;
			}
			.swiper-pagination-bullet-active {
				background: #08938B;
			}
		}
		.more__button a {
			display: flex;
			justify-content: center;
			align-items: center;
			width: 260px;
			height: 50px;
			margin: 0 auto;
			background: #08938B;
			border: 2px solid #08938B;
			font-size: 16px;
			font-weight: 600;
			line-height: 1.8;
			color: #FFF;
			position: relative;
		}
		.more__button a:hover {
			background: #FFF;
			color: #08938B;
			opacity: 1;
		}
			.more__button a svg {
				width: 6px;
				height: 10px;
				fill: none;
				stroke: #FFF;
				position: absolute;
				top: 50%;
				right: 20px;
				transform: translateY(-50%);
			}
			.more__button a:hover svg {
				stroke: #08938B;
			}

/*------------------- タブリスト -------------------*/

.tab__section {
	padding-bottom: 60px;

	.section__inner {
		width: 1180px;
	}
}
	.tab__list {
		display: flex;
		justify-content: center;
		align-items: center;
		border: 1px solid #CCC;
	}
		.tab__item {
			flex: 1;
			width: 100%;			
		}
		.tab__item:not(:last-child) {
			border-right: 1px solid #CCC;
		}
			.tab__item a {
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				gap: 9px;
				height: 100px;
				font-size: 20px;
				font-weight: 800;
				line-height: 1.4;
				color: #0A7872;
				text-align: center;
				padding-top: 5px;
				position: relative;
			}
				.tab__item a svg {
					width: 6px;
					height: 10px;
					fill: none;
					stroke: #0A7872;
					transform: rotate(90deg);
				}

#plan-link,
#comparison-link,
#flow-link,
#customer-link,
#staff-link,
#faq-link {
	padding-top: 160px;
	margin-top: -160px;
}

/*------------------- 選べる4つのサービスプラン -------------------*/

.plan__section {
	padding-block: 80px 100px;
}
	.plan__table {
		margin-top: 49px;
	}

/*------------------- プランごとの製品比較 -------------------*/

.comparison__section {
	padding-block: 80px 100px;
}
	.comparison__contents {
		margin-top: 44px;
		display: flex;
		flex-direction: column;
		gap: 43px;
	}
		.comparison__title {
			font-size: 34px;
			font-weight: 700;
			color: #333;
			text-align: center;
			margin-bottom: 11px;
		}

/*------------------- ご相談から完了までの流れ -------------------*/

.flow__section {
	padding-block: 81px 100px;
}
	.flow__contents {
		border-top: 1px solid #CCC;
		border-bottom: 1px solid #CCC;
		background: #E5F4F3;
		margin-top: 28px;
	}
		.flow__list {
			display: flex;
			justify-content: center;
			border-left: 1px solid #CCC;
			border-right: 1px solid #CCC;
		}
			.flow__item {
				flex: 1;
				display: flex;
				flex-direction: column;
				align-items: center;
				gap: 2px;
				width: 100%;
				height: 380px;
				padding-top: 28px;
			}
			.flow__item:not(:last-child) {
				border-right: 1px solid #CCC;
			}
				.flow__number {
					display: flex;
					flex-direction: column;
					justify-content: center;
					align-items: center;
					gap: 5px;
					font-size: 20px;
					font-weight: 700;
					line-height: 1;
					color: #08938B;
					font-family: "Fustat", sans-serif;
					margin-bottom: 5px;
				}
					.flow__number span {
						font-size: 30px;
						font-weight: 700;
						line-height: 1;
						color: #08938B;
						font-family: "Fustat", sans-serif;
					}
				.flow__text {
					font-size: 16px;
					font-weight: 400;
					line-height: 1.4;
					color: #333;
					text-align: center;
					writing-mode: vertical-rl;
					letter-spacing: 0.37em;
				}

/*------------------- ご相談いただいたお客様の声 -------------------*/

.customer__section {
	padding-block: 0 101px;
}
	.customer__title {
		font-size: 16px;
		font-weight: 800;
		line-height: 1.4;
		text-align: center;
		color: #333;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		overflow: hidden;
		margin-bottom: 10px;
	}
	.customer__text {
		font-size: 16px;
		font-weight: 500;
		line-height: 1.8;
		color: #868686;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		overflow: hidden;
	}

/*------------------- スタッフ紹介 -------------------*/

.staff__section {
	padding-block: 81px 100px;
}
	.staff__title {
		font-size: 16px;
		font-weight: 800;
		line-height: 1.4;
		text-align: center;
		color: #333;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		overflow: hidden;
		margin-bottom: 10px;
	}
	.staff__text {
		font-size: 16px;
		font-weight: 500;
		line-height: 1.4;
		color: #868686;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		overflow: hidden;
	}

/*------------------- よくある質問 -------------------*/

.faq__section {
	padding-block: 80px 100px;
}
	.faq__contents {
		margin-top: 50px;
		border-top: 1px solid #CCC;
		border-bottom: 1px solid #CCC;
	}
		.faq__list {
			border-left: 1px solid #CCC;
			border-right: 1px solid #CCC;
		}
			.faq__box {
				padding: 34px 40px 40px;
			}
			.faq__box:not(:last-of-type) {
				border-bottom: 1px solid #CCC;
			}
				.faq__question {
					display: flex;
					align-items: center;
					gap: 12px;
					padding-bottom: 19px;
					border-bottom: 1px solid #08938B;
					margin-bottom: 21px;
					font-size: 20px;
					font-weight: 800;
					line-height: 1.4;
					color: #333;
				}
					.faq__question::before {
						content: 'Q';
						font-size: 24px;
						font-weight: 700;
						line-height: 1.6;
						font-family: "Montserrat", sans-serif;
						color: #08938B;
					}
				.faq__answer {
					display: flex;
					gap: 14px;
					font-size: 16px;
					font-weight: 500;
					line-height: 1.4;
				}
					.faq__answer::before {
						content: 'A';
						font-size: 24px;
						font-weight: 700;
						line-height: 1;
						font-family: "Montserrat", sans-serif;
						color: #CA1717;
					}