/* お問い合わせページ固有のスタイル。design-source/contact-demo.dc.html 35〜94行のインライン style から抽出。 */

/* ===== CONTACT HERO ===== */
/* トップの .sb-hero、製品の .sb-phero、導入事例の .sb-chero、環境の .sb-shero、
   会社情報の .sb-cohero とは別物。クラス名は衝突しないよう .sb-cthero（contact hero）
   で統一する。他ページ用のスタイルには一切触れない。 */
.sb-cthero {
	position: relative;
	background: var(--sb-ink);
	color: var(--sb-paper);
	overflow: hidden;
}

.sb-cthero__bg-wrap {
	position: absolute;
	inset: 0;
}

.sb-cthero__bg {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: .9;
	animation: hZoom 26s ease-out both;
}

.sb-cthero__scrim {
	position: absolute;
	inset: 0;
	background: linear-gradient(100deg, rgba(8, 12, 7, .94) 0%, rgba(8, 12, 7, .74) 46%, rgba(8, 12, 7, .32) 84%);
}

.sb-cthero__body {
	position: relative;
	padding: 96px 48px 84px;
}

.sb-cthero__label {
	font: 9.5px/1 var(--sb-font-mono);
	letter-spacing: .3em;
	color: var(--sb-sage);
	animation: hFade 1.2s .2s both;
}

.sb-cthero__title {
	margin: 30px 0 0;
	font-family: var(--sb-font-serif);
	font-weight: 400;
	font-size: clamp(36px, 4.2vw, 58px);
	line-height: 1.46;
	word-break: keep-all;
	overflow-wrap: break-word;
}

.sb-cthero__title-mask {
	display: block;
	overflow: hidden;
}

.sb-cthero__title-line {
	display: block;
	animation: hRise 1.3s .3s cubic-bezier(.19, 1, .22, 1) both;
}

.sb-cthero__lead {
	margin: 26px 0 0;
	font: 300 14.5px/2.3 var(--sb-font-sans);
	color: rgba(244, 242, 236, .84);
	max-width: 48ch;
	animation: hFadeUp 1.2s .8s both;
	text-wrap: pretty;
}

/* ===== FORM（相談フォーム） ===== */
.sb-cform {
	background: var(--sb-paper);
	/* 2026-08-24: ここだけ 96px で、サイト内の他の全セクション（104px）と
	   縦のリズムが合っていなかった。 */
	padding: 104px var(--sb-pad-inline);
}

.sb-cform__layout {
	display: flex;
	gap: 64px;
	flex-wrap: wrap;
	align-items: flex-start;
}

.sb-cform__main {
	flex: 1 1 520px;
	min-width: 320px;
}

.sb-cform__fields {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: 26px;
}

.sb-cform__field {
	display: flex;
	flex-direction: column;
	gap: 9px;
}

.sb-cform__field--textarea {
	margin-top: 26px;
}

.sb-cform__field-label {
	font: 9px/1 var(--sb-font-mono);
	letter-spacing: .2em;
	color: #6b6659;
}

.sb-cform__input,
.sb-cform__textarea {
	font-family: var(--sb-font-sans);
	font-size: 14px;
	color: var(--sb-charcoal);
	background: transparent;
	transition: border-color .25s;
}

.sb-cform__input {
	border: 0;
	border-bottom: 1px solid rgba(20, 21, 15, .3);
	padding: 11px 2px;
}

.sb-cform__textarea {
	border: 1px solid rgba(20, 21, 15, .3);
	padding: 14px;
	line-height: 1.9;
	resize: vertical;
}

.sb-cform__input:focus,
.sb-cform__textarea:focus {
	outline: none;
	border-color: var(--sb-green);
}

.sb-cform__actions {
	display: flex;
	gap: 22px;
	align-items: center;
	margin-top: 34px;
	flex-wrap: wrap;
}

.sb-cform__submit {
	border: 0;
	background: var(--sb-green);
	color: #fff;
	padding: 17px 40px;
	border-radius: 999px;
	font-size: 12.5px;
	letter-spacing: .08em;
	cursor: pointer;
	font-family: var(--sb-font-sans);
	transition: background .25s, transform .25s;
}

.sb-cform__submit:hover {
	background: var(--sb-green-dark);
	transform: translateY(-2px);
}

.sb-cform__note {
	font: 300 11px/1.9 var(--sb-font-sans);
	color: #6b6659;
}

.sb-cform__privacy {
	margin: 20px 0 0;
	font: 300 11px/1.9 var(--sb-font-sans);
	color: #6b6659;
}

.sb-cform__privacy a {
	color: var(--sb-green-dark);
}

/* 送信完了メッセージ。初期状態は非表示で、`.is-visible` が付与されたときに
   flex（縦積み・gap 18px）で表示する。 */
.sb-cform__success {
	display: none;
	border: 1px solid rgba(46, 128, 71, .4);
	background: rgba(46, 128, 71, .06);
	padding: 52px 40px;
	flex-direction: column;
	gap: 18px;
}

.sb-cform__success-icon {
	width: 44px;
	height: 44px;
	border-radius: 999px;
	background: var(--sb-green);
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 18px;
}

.sb-cform__success-title {
	margin: 0;
	font-family: var(--sb-font-serif);
	font-weight: 400;
	font-size: 28px;
	line-height: 1.5;
}

.sb-cform__success-text {
	margin: 0;
	font: 300 13px/2.1 var(--sb-font-sans);
	color: #5b564a;
	max-width: 40ch;
}

.sb-cform__success-link {
	color: var(--sb-green-dark);
	font-size: 12.5px;
	letter-spacing: .06em;
	margin-top: 6px;
}

.sb-cform__aside {
	flex: 1 1 300px;
	min-width: 260px;
	max-width: 360px;
	border-left: 1px solid rgba(20, 21, 15, .16);
	padding-left: 34px;
}

.sb-cform__aside-label {
	letter-spacing: .24em;
	color: #6b6659;
}

.sb-cform__aside-address {
	margin-top: 22px;
	font: 300 12.5px/2.1 var(--sb-font-sans);
	color: #5b564a;
}

.sb-cform__aside-divider {
	height: 1px;
	background: rgba(20, 21, 15, .16);
	margin: 30px 0;
}

.sb-cform__aside-links {
	display: flex;
	flex-direction: column;
	gap: 14px;
	margin-top: 20px;
	font-size: 12.5px;
}

.sb-cform__aside-links a {
	color: var(--sb-charcoal);
}

/* ===== STEPS（ご相談から導入までの流れ） ===== */
.sb-csteps {
	background: var(--sb-charcoal);
	color: var(--sb-paper);
	padding: 104px var(--sb-pad-inline);
}

.sb-csteps__head {
	display: flex;
	align-items: baseline;
	gap: 24px;
	flex-wrap: wrap;
}

.sb-csteps__eyebrow {
	font-size: 9.5px;
	letter-spacing: .3em;
	color: var(--sb-sage);
}

.sb-csteps__list {
	display: flex;
	gap: 0;
	margin-top: 48px;
	flex-wrap: wrap;
}

.sb-csteps__item {
	flex: 1 1 260px;
	padding: 30px;
	border-top: 1px solid rgba(244, 242, 236, .28);
}

.sb-csteps__item:first-child {
	padding-left: 0;
}

.sb-csteps__item--last {
	border-top-color: var(--sb-sage);
}

.sb-csteps__step {
	letter-spacing: .24em;
	color: var(--sb-sage);
}

.sb-csteps__title {
	margin: 14px 0 0;
	font-family: var(--sb-font-serif);
	font-size: 22px;
	font-weight: 400;
}

.sb-csteps__text {
	margin: 12px 0 0;
	font: 300 12.5px/2.1 var(--sb-font-sans);
	color: rgba(244, 242, 236, .75);
	max-width: 30ch;
}

/* ===== レスポンシブ（layout.css / page-top.css / page-product.css / page-cases.css /
   page-sustainability.css / page-company.css と同じブレークポイント） ===== */
@media (max-width: 900px) {
	.sb-cthero__body,
	.sb-cform,
	.sb-csteps {
		padding-left: 24px;
		padding-right: 24px;
	}

	.sb-cform__aside {
		border-left: 0;
		padding-left: 0;
		border-top: 1px solid rgba(20, 21, 15, .16);
		padding-top: 34px;
		max-width: none;
	}
}

@media (max-width: 560px) {
	.sb-cform__fields {
		grid-template-columns: 1fr;
	}

	.sb-csteps__item,
	.sb-csteps__item:first-child {
		padding-left: 0;
		padding-right: 0;
	}
}

.sb-cform__honeypot {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	opacity: 0;
}

.sb-cform__error {
	margin: 12px 0 0;
	font: 300 12.5px/1.8 var(--sb-font-sans);
	color: #c0392b;
}

.sb-cform__recaptcha-note {
	margin: 10px 0 0;
	font: 300 10.5px/1.8 var(--sb-font-sans);
	color: #6b6659;
}

.sb-cform__recaptcha-note a {
	color: inherit;
}

.sb-cform__success.is-visible {
	display: flex;
}