@charset "utf-8";

.mainvisual {
	height: 90vh;
	background-image: url(../images/mainvisual.jpg);
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	position: relative;
}

.mainvisual::after {
	position: absolute;
	top: 0;
	content: '';
	width: 100%;
	height: 100%;
	background-color: #85858580;
}
.mainvisual-inner {
	position: absolute;
	z-index: 50;
	top: 30%;
	left: 15%;
	color: var(--white);
}

.mainvisual-inner h1 {
	font-size: clamp(3rem, 2.273rem + 3.64vw, 5rem);
}

.mainvisual-inner p {
	font-size: clamp(1.25rem, 1.068rem + 0.91vw, 1.75rem);
}

.top-intro__p {
	margin-bottom: 2rem;
	text-align: center;
	line-height: 2;
	font-size: 20px;
	word-break: auto-phrase;
}

.top-intro__box {
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.top-intro__text {
	max-width: 60%;
}
.top-intro__text p {
	line-height: 40px;
}
#ripples {
	width: clamp(20rem, 19.091rem + 4.55vw, 22.5rem);
	height: clamp(20rem, 19.091rem + 4.55vw, 22.5rem);
	aspect-ratio: 1/1;
	border-radius: 50%;
	box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.35);
	background: url('../images/water.png') center center/cover no-repeat;
}

#ripples canvas {
	border-radius: 50%;
}

/* top-problem */

/* .top-problem__box {
	position: sticky;
	top: 80px;
} */

.top-problem__box:nth-child(2n + 1) {
	background-color: #7e9f4033;
}

.top-problem__box:nth-child(2n) {
	background-color: #fff;
}

.top-problem__boxinner {
	display: flex;
	align-items: flex-start;
	justify-content: center;
	gap: 2rem;
	padding-block: 2rem;
}

.top-problem__boxinner.reverse {
	flex-direction: row-reverse;
}

.top-problem__boxinner > * {
	flex: 1;
}

.top-problem__boxinner h3 {
	position: relative;
	margin-bottom: 2rem;
}

.top-problem__boxinner h3::after {
	position: absolute;
	content: '';
	bottom: -3px;
	width: 100%;
	height: 2px;
	content: '';
	display: block;
	background-image: linear-gradient(90deg, #008e30, transparent);
}

.top-chatchcopy {
	height: 150px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.top-chatchcopy p {
	text-align: center;
	font-size: clamp(1.25rem, 0.977rem + 1.36vw, 2rem);
}

/* top-solution */
.top-solution__title {
	height: 360px;
	background-image: url(../images/image01.jpg);
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	display: flex;
	align-items: center;
}

.top-solution__title h2 {
	text-shadow: 0 0 6px #fff;
	word-break: auto-phrase;
}

.top-solution__box {
	padding-block: 2rem;
}

.top-solution__text {
	text-align: center;
	margin-bottom: 2rem;
}

.top-solution__text h3 {
	font-size: 24px;
	margin-bottom: 1rem;
}

.top-solution__text p {
	font-size: 20px;
	word-break: auto-phrase;
}

@media (max-width: 768px) {
	.top-intro__box {
		flex-direction: column;
	}
	.top-intro__text {
		width: 100%;
		max-width: inherit;
	}
	.top-problem__boxinner,
	.top-problem__boxinner.reverse {
		flex-direction: column;
	}
	.more-btn {
		left: 40%;
	}
}

/* --------------------------- 事業概要 --------------------------- */
.page-title.service::before {
	content: 'Service';
}

.service-intro > p {
	font-size: 20px;
	line-height: 2;
	text-align: center;
}

.service-intro__box {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 2rem;
	padding-block: 2rem;
}

.service-intro__box.box-1 > * {
	flex: 1;
}

.service-intro__text {
	line-height: 2;
}
.service-intro__container {
	display: flex;
	flex-direction: column;
	align-items: center;
}

.service-intro__container h3 {
	margin-bottom: 1rem;
}
.service-intro__circle {
	height: 300px;
	width: 300px;
	border-radius: 50%;
	position: relative;
}

.service-intro__circle.circle-1 {
	background-color: #bbddff3a;
}

.service-intro__circle.circle-2 {
	background-color: #ffbebe3a;
}

.service-intro__circle ul {
	height: 100%;
	width: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	position: absolute;
}

.service-intro__circle ul li {
	line-height: 2;
	font-size: 20px;
}

.service-separator {
	height: 440px;
	background-image: url(../images/service-img4.jpg);
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
}

/* 使用比較 */

.service-cf__container p {
	text-align: center;
	word-break: auto-phrase;
}
.service-cf__container {
	margin-bottom: 2rem;
}
.service-table__wrapper {
	width: 94%;
	max-width: 1200px;
	margin-inline: auto;
	margin-bottom: 2rem;
	overflow: auto;
}

.service-table__wrapper table {
	border-collapse: collapse;
	width: 100%;
	min-width: 600px;
	margin-bottom: 2rem;
}

.service-table__wrapper th,
.service-table__wrapper td {
	border: 1px solid #ccc;
	padding: 8px 12px;
	text-align: center;
	vertical-align: middle;
	white-space: nowrap;
}

.service-table__wrapper thead th {
	background: #f5f5f5;
	position: sticky; /* スクロールしても固定 */
	top: 0;
	z-index: 2; /* 下のセルより上に表示 */
}

.service-table__wrapper tbody th {
	background: #f5f5f5;
	position: sticky;
	left: 0;
	z-index: 1;
	width: 10em;
}
.service-table__wrapper tbody td {
	width: 12em;
}
/* DENBA式の列だけ黄色背景 */
.service-table__wrapper tbody td:nth-of-type(3) {
	background-color: #fbff0141;
}
.s-point {
	color: #d00;
	font-weight: bold;
}

/* 左上セルは両方の固定対象なのでz-indexを高く */
.service-table__wrapper thead th:first-child {
	z-index: 3;
}

.service-btn__container {
	display: flex;
	justify-content: space-around;
	align-items: center;
	margin-bottom: 3rem;
}
.service-btn {
	width: 320px;
	height: 80px;
	border: 1px solid var(--white);
	text-align: center;
	font-size: 20px;
}

.service-btn a {
	position: relative;
	height: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
	margin: 0 auto;
	padding: 10px 25px;
	color: #fff;
	transition: 0.3s ease-in-out;
	font-weight: 600;
	background: #008332;
	border-radius: 5px;
}

.service-btn img {
	margin-left: 0.5rem;
	width: 24px;
}

.service-btn a:hover {
	color: var(--black);
	background: var(--white);
	border: 1px solid var(--black);
}

.service-img__container {
	display: flex;
	justify-content: space-around;
	align-items: center;
}

.service-voice__container {
	background-color: rgb(from var(--lightgreen) r g b / 0.4);
	padding-block: 2rem;
	margin-bottom: 2rem;
}

.service-voice__container h3 {
	text-align: center;
}
.service-voice__box {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 2rem;
	padding: 1rem;
}

.service-voice__img {
	object-fit: contain;
	flex: 1;
	display: flex;
	align-items: center;
	justify-content: center;
}
.service-voice__img img {
	width: 200px;
}

.service-voice__list {
	flex: 2;
}
.service-voice__list li {
	font-size: 18px;
	line-height: 2;
	list-style-type: disc;
	list-style-position: inside;
}
@media (max-width: 1000px) {
	.service-table__wrapper {
		width: 94%;
		margin: 0 auto 2rem;
		overflow: auto; /* スクロールを有効に */
		-webkit-overflow-scrolling: touch; /* iOS滑らかスクロール */
		position: relative;
		max-height: 80vh; /* 縦方向スクロール範囲 */
	}

	.service-table__wrapper table {
		width: auto; /* スマホで横スクロール可能に */
		min-width: 700px; /* 列数が多い場合の見切れ防止 */
	}

	/* ヘッダー固定（縦スクロール時） */
	.service-table__wrapper thead th {
		position: sticky;
		top: 0;
		z-index: 3;
		background: #f5f5f5;
	}

	/* 左側の見出し固定（横スクロール時） */
	.service-table__wrapper tbody th {
		position: sticky;
		left: 0;
		z-index: 2;
		background: #f5f5f5;
	}

	/* 左上の空セル（両方固定の交点） */
	.service-table__wrapper thead th:first-child {
		left: 0;
		z-index: 4;
		background: #f5f5f5;
	}
}
@media (max-width: 768px) {
	.service-intro__box.box-1,
	.service-intro__box.box-2 {
		flex-direction: column;
	}

	.service-btn__container,
	.service-img__container {
		flex-direction: column;
		gap: 2rem;
	}
	.service-voice__box {
		flex-direction: column;
	}
}

/* --------------------------- 会社概要 --------------------------- */
.page-title.company::before {
	content: 'Company';
}

.company-about {
	margin-inline: auto;
}

.company-about th,
.company-about td {
	padding: 1em 0;
	position: relative;
}

.company-about th::before,
.company-about td::before {
	content: '';
	position: absolute;
	bottom: 0;
	width: calc(100% - 0.1875rem);
}

.company-about th {
	width: 10rem;
	vertical-align: middle;
}

.company-about th::before {
	left: 0;
	border-bottom: 1px solid var(--green);
}
.company-about td {
	padding: 1em 1.5em;
}

.company-about td::before {
	right: 0;
	border-bottom: 1px solid #d3d3d3;
}

.board-member th,
.board-member td {
	padding: 0;
}

.board-member th {
	text-align: left;
	width: 6rem;
}

.board-member th::before,
.board-member td::before {
	border: none;
}
.main-office h2 {
	margin-bottom: 0;
}

.main-office > p {
	text-align: center;
}
.main-office__address {
	margin-top: 2rem;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 2rem;
}

.main-office__address > * {
	flex: 1;
}

.main-office__address iframe {
	min-height: 300px;
	width: 100%;
}

.main-office__address table th {
	width: 6em;
	vertical-align: middle;
}

.main-office__address table th,
.main-office__address table td {
	padding: 0.5em;
}

@media (max-width: 1000px) {
	.main-office__address {
		flex-direction: column;
	}
}

/* --------------------------- 問い合わせ --------------------------- */
.page-title.contact::before {
	content: 'Contact';
}
.contact-text {
	text-align: center;
}

/* 全体のレイアウト */
.contact-form {
	max-width: 700px;
	margin-block: 40px;
}

.contact-form form {
	width: 100%;
}

.contact-form dl {
	display: flex;
	align-items: center;
	margin-bottom: 32px;
}

.contact-form dt {
	width: 30%;
	min-width: 14rem;
	font-size: 16px;
	line-height: 1.6;
}

.contact-form dd {
	width: 70%;
}

.contact-form input[type='text'],
.contact-form input[type='tel'],
.contact-form input[type='email'],
.contact-form textarea {
	width: 100%;
	padding: 8px 10px;
	border: 1px solid #ccc;
	border-radius: 4px;
	font-size: 14px;
	box-sizing: border-box;
	transition: border-color 0.3s;
}

.contact-form input[type='text']:focus,
.contact-form input[type='tel']:focus,
.contact-form input[type='email']:focus,
.contact-form textarea:focus {
	border-color: #0e501a;
	outline: none;
}

.contact-form textarea {
	height: 180px;
	resize: vertical;
}

/* チェックボックスの整列 */
.contact-form input[type='checkbox'] {
	margin-right: 5px;
	transform: scale(1.2);
}

.contact-form dd label {
	margin-right: 20px;
	cursor: pointer;
	font-size: 14px;
}

/* 必須マーク */
.contact-form dt label span {
	color: #d00;
	font-size: 12px;
	margin-left: 4px;
}

/* 送信ボタン（確認ボタン） */
.contact-form .contact-submit {
	display: inline-block;
	background-color: #0e501a;
	color: #fff;
	text-decoration: none;
	font-size: 16px;
	padding: 12px 40px;
	border-radius: 6px;
	transition: background-color 0.3s ease;
	border: none;
	cursor: pointer;
}

.contact-form .contact-submit:hover {
	background-color: #0b3f14;
}

.contact-form div:last-of-type {
	text-align: center;
	margin-top: 30px;
}
/* スマホ対応 */
@media (max-width: 600px) {
	.contact-form dl {
		display: block;
	}
	.contact-form dt,
	.contact-form dd {
		width: 100%;
	}
	.contact-form dt {
		margin-bottom: 5px;
	}
}

.page-title.notfound::before {
	content: 'Not Found';
}

.notfound-container {
	text-align: center;
}