.contact-page {
	padding-bottom: 160px;
}

.contact-page__body {
	width: min(890px, calc(100% - 40px));
	margin: 114px auto 0;
}

.contact-page__intro {
	font-size: 14px;
	line-height: 1.8;
	letter-spacing: 0.04em;
}

.contact-page__intro > p {
	margin: 0;
}

.contact-page__intro > p + p {
	margin-top: 24px;
}

.contact-form {
	display: grid;
	gap: 32px;
	margin-top: 67px;
}

.contact-form__field {
	display: grid;
	gap: 16px;
}

.contact-form__field label {
	font-size: 16px;
	font-weight: 700;
	line-height: 1.8;
	letter-spacing: 0.04em;
}

.contact-form__field label em {
	margin-left: 2px;
	color: red;
	font-size: 10px;
	font-style: normal;
}

.contact-form input,
.contact-form select,
.contact-form textarea {
	width: 100%;
	min-height: 61px;
	padding: 16px 24px;
	border: 0;
	border-radius: 4px;
	background: #fff;
	color: var(--color-ink);
	font-size: 16px;
	line-height: 1.8;
	letter-spacing: 0.04em;
}

.contact-form select {
	padding-right: 60px;
	appearance: none;
	background-image: url("../../images/contact-select-chevron.svg");
	background-repeat: no-repeat;
	background-position: right 24px center;
	background-size: 13px 7px;
}

.contact-form input::placeholder,
.contact-form textarea::placeholder,
.contact-form select:required:invalid {
	color: #bababa;
	opacity: 1;
}

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

.contact-form input:focus-visible,
.contact-form select:focus-visible,
.contact-form textarea:focus-visible {
	outline: 2px solid var(--color-accent);
	outline-offset: 2px;
}

.contact-form__privacy {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	margin-top: 48px;
	font-size: 14px;
	line-height: 1.8;
	letter-spacing: 0.04em;
}

.contact-form__privacy input {
	width: 16px;
	min-height: 16px;
	padding: 0;
	border: 1px solid #bababa;
	border-radius: 0;
}

.contact-form__privacy a {
	color: var(--color-accent);
	text-decoration: underline;
}

.contact-form__submit {
	--fill-swap-from-bg: #fff;
	--fill-swap-from-color: var(--color-accent);
	--fill-swap-to-bg: var(--color-accent);
	--fill-swap-to-color: #fff;
	--fill-swap-border: var(--color-accent);
	--fill-swap-arrow-size: 18px;

	display: flex;
	width: 343px;
	min-height: 76px;
	margin-top: -12px;
	margin-inline: auto;
	padding: 16px 40px;
	align-items: center;
	justify-content: space-between;
	border: 1px solid var(--color-accent);
	border-radius: 4px;
	background: #fff;
	color: var(--color-accent);
	font-size: 20px;
	font-weight: 700;
	letter-spacing: 0.04em;
	cursor: pointer;
}

/*
 * 記事内フォーム（白パネル版）。白地に白の入力欄が乗るため罫線を足し、
 * SPはFigmaの寸法（入力57px／テキストエリア319px／角丸ボタン）へ合わせる。
 */
.contact-form--panel input,
.contact-form--panel select,
.contact-form--panel textarea {
	border: 1px solid var(--color-ink);
}

.contact-form--panel input:not([type="checkbox"]),
.contact-form--panel select {
	height: 61px;
}

.contact-form--panel .contact-form__privacy input {
	border-color: #bababa;
}

.contact-form--panel .contact-form__privacy {
	margin-top: 28px;
}

.contact-form__recaptcha,
.whitepaper-form .whitepaper-form__recaptcha {
	margin: 8px 0 0;
	color: #bababa;
	font-size: 12px;
	font-weight: 400;
	line-height: 1.8;
	letter-spacing: 0.04em;
	text-align: center;
	white-space: normal;
}

.contact-form__recaptcha a,
.whitepaper-form .whitepaper-form__recaptcha a {
	color: inherit;
	text-decoration: underline;
	text-underline-position: from-font;
}

.contact-form__recaptcha .sp-only {
	display: none;
}

.contact-form__honeypot {
	position: absolute;
	left: -10000px;
}

.contact-form__error {
	margin: 0 0 32px;
	color: #ff8a8a;
	font-size: 14px;
	line-height: 1.8;
	letter-spacing: 0.04em;
}

/* ---------- 送信完了（Figma PC 15:3743 / SP 15:8950） ---------- */

/* 完了画面は導入文とフォームを出さず、見出し帯の直下から120px（SP60px）。 */
.contact-complete .contact-page__body {
	margin-top: 120px;
}

.contact-thanks {
	text-align: center;
}

.contact-thanks__title {
	margin: 0;
	font-size: 64px;
	font-weight: 700;
	line-height: 1.4;
	letter-spacing: 0.04em;
}

.contact-thanks__icon {
	width: 320px;
	height: 320px;
	margin: 40px auto 0;
}

.contact-thanks__text {
	margin: 40px 0 0;
	font-size: 16px;
	line-height: 1.8;
	letter-spacing: 0.04em;
}

.contact-thanks__back {
	display: inline-flex;
	width: 343px;
	min-height: 76px;
	margin-top: 80px;
	padding: 0 40px;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	border: 1px solid var(--color-accent);
	border-radius: 4px;
	background: #fff;
	color: var(--color-accent);
	font-size: 20px;
	font-weight: 700;
	line-height: 1.4;
	letter-spacing: 0.04em;
	text-decoration: none;
}

.contact-thanks__back img {
	width: 16px;
	height: 16px;
	flex: none;
}

.fixed-page {
	padding-block: 180px 160px;
}

.fixed-page__header {
	padding-bottom: 80px;
	border-bottom: 1px solid rgb(255 255 255 / 30%);
}

.fixed-page__title {
	margin: 0;
	font-size: 60px;
	line-height: 1.4;
}

.fixed-page__body {
	max-width: 960px;
	margin: 96px auto 0;
}

.fixed-page__body > * + * {
	margin-top: 1.8em;
}

.not-found-page {
	min-height: 720px;
	padding-block: 180px 120px;
	text-align: center;
}

.not-found-page__code {
	margin: 0;
	color: transparent;
	font-family: var(--font-en);
	font-size: 260px;
	line-height: 1;
	-webkit-text-stroke: 1px rgb(255 255 255 / 45%);
}

.not-found-page h2 {
	margin: 32px 0 0;
	font-family: var(--font-en);
	font-size: 36px;
}

.not-found-page > p {
	margin-top: 24px;
}

.not-found-page .view-more-link {
	margin-top: 40px;
}

/*
 * 資料ダウンロード詳細（Figma PC 15:4241 / SP 15:8122）。
 * パンくずと見出し帯を持たず、左640pxの資料紹介＋右760pxのフォームで構成する。
 */
.whitepaper-single {
	padding-block: 202px 160px;
}

.whitepaper-single__title {
	margin: 0;
	font-size: 42px;
	font-weight: 700;
	line-height: 1.4;
	letter-spacing: 0.04em;
}

.whitepaper-single__layout {
	display: grid;
	margin-top: 80px;
	grid-template-columns: minmax(0, 640fr) minmax(0, 760fr);
	gap: 40px;
	align-items: start;
}

.whitepaper-single__thumb {
	margin: 0;
}

.whitepaper-single__thumb img {
	border-radius: 12px;
}

.whitepaper-points {
	margin-top: 24px;
	padding: 32px 40px;
	border-radius: 12px;
	background: var(--color-surface);
}

.whitepaper-points h2 {
	margin: 0;
	font-size: 20px;
	font-weight: 700;
	line-height: 1.8;
	letter-spacing: 0.04em;
}

.whitepaper-points ul {
	margin: 24px 0 0;
	padding: 24px 0 0 24px;
	border-top: 1px solid rgb(255 255 255 / 45%);
	list-style: disc;
	font-size: 16px;
	line-height: 1.8;
	letter-spacing: 0.04em;
}

.whitepaper-single__lead {
	margin-top: 40px;
	font-size: 16px;
	line-height: 1.8;
	letter-spacing: 0.04em;
}

.whitepaper-single__lead > * {
	margin-block: 0;
}

.whitepaper-form-wrap,
.whitepaper-form__complete {
	align-self: start;
	padding: 60px 40px;
	border-radius: 12px;
	background: #fff;
	color: var(--color-ink);
}

.whitepaper-form-wrap > h2,
.whitepaper-form__complete h2 {
	margin: 0 0 40px;
	padding-bottom: 40px;
	border-bottom: 1px solid rgb(18 17 12 / 20%);
	color: var(--color-accent);
	font-size: 28px;
	font-weight: 700;
	line-height: 1.4;
	letter-spacing: 0.04em;
	text-align: center;
}

.whitepaper-form {
	display: grid;
	gap: 40px;
}

/* Figma 317:4327: labels and required marks share one line. */
.whitepaper-form > label:not(.whitepaper-form__privacy) {
	display: block;
	font-size: 16px;
	font-weight: 700;
	line-height: 1.8;
	letter-spacing: .04em;
}

.whitepaper-form label > span[aria-hidden] {
	margin-left: 6px;
	color: #c33;
	font-size: 10.32px;
}

.whitepaper-form input:not([type="submit"]):not([type="checkbox"]) {
	width: 100%;
	min-height: 61px;
	padding: 15px 24px;
	border: 1px solid #12110c;
	border-radius: 4px;
	background: #fff;
	color: #12110c;
	font-size: 16px;
	line-height: 1.8;
	letter-spacing: .04em;
}
.whitepaper-form > label:not(.whitepaper-form__privacy):has(+ label) { margin-bottom: -16px; }
.whitepaper-form input::placeholder { color: #bababa; opacity: 1; }
.whitepaper-form__notice { margin: 0; font-size: 16px; line-height: 1.8; letter-spacing: .04em; }
.whitepaper-form > p { margin: 0; }

.whitepaper-form__privacy {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	font-size: 14px;
	line-height: 1.8;
	letter-spacing: .04em;
}

.whitepaper-form__privacy input {
	width: 16px;
	min-height: 16px;
}

.whitepaper-form__privacy a {
	color: var(--color-accent);
	text-decoration: underline;
}

.whitepaper-form button {
	position: relative;
	display: flex;
	width: min(100%, 343px);
	min-height: 76px;
	margin-inline: auto;
	padding: 16px 40px;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	border: 1px solid var(--color-accent);
	border-radius: 4px;
	background: #fff;
	color: var(--color-accent);
	font-size: 20px;
	line-height: 1.4;
	letter-spacing: 0.04em;
	font-weight: 700;
	cursor: pointer;
}

.whitepaper-form__arrow {
	width: 16px;
	height: 16px;
	flex: none;
	background: currentColor;
	mask: url("../../images/contact-arrow.svg") center / contain no-repeat;
	-webkit-mask: url("../../images/contact-arrow.svg") center / contain no-repeat;
}

@media (max-width: 899px) {
	.whitepaper-form button {
		width: min(100%, 310px);
		min-height: 60px;
		padding: 16px 40px;
		justify-content: center;
		border-radius: 70px;
		font-size: 14px;
	}

	.whitepaper-form__arrow {
		position: absolute;
		right: 39px;
		top: calc(50% - 6px);
		width: 12px;
		height: 12px;
	}
}

.whitepaper-form__honeypot {
	position: absolute;
	left: -10000px;
}

.whitepaper-form__error {
	padding: 12px;
	background: #fff0f0;
	color: #a11;
	font-size: 12px;
}

.whitepaper-form__pending {
	margin: 0 0 24px;
	padding: 12px;
	background: #f3f3f3;
	font-size: 12px;
}

.whitepaper-form button:disabled {
	cursor: not-allowed;
	opacity: 0.45;
}

.service-detail {
	padding-block: 160px;
	overflow-x: hidden;
	overflow-x: clip;
}

.service-detail-hero {
	display: grid;
	min-height: 720px;
	grid-template-columns: minmax(0, 640px) minmax(0, 760px);
	align-items: center;
	gap: 40px;
}

.service-detail-hero__copy > p {
	margin: 0;
	color: var(--color-accent);
	font-family: var(--font-en);
	font-size: 18px;
	font-weight: 700;
}

.service-detail-hero__copy h1 {
	margin: 20px 0 0;
	font-size: 60px;
	line-height: 1.45;
}

.service-detail-hero__copy > div {
	margin-top: 40px;
}

.service-detail-hero__visual > img,
.service-detail-hero__visual > span {
	display: block;
	width: 100%;
	aspect-ratio: 1;
	object-fit: cover;
	background: #d9d9d9;
}

/*
 * FV右の縦動画スライダー。1枚ぶんずつ送って止まる動き。
 * 同じ4枚を2セット並べ、4ステップ進んだ時点で見た目が開始位置と一致するため、
 * そこだけtransitionを切って0へ戻す。継ぎ目でDOMを動かさない。
 * 送り幅とステップ数はJS側（service-video-slider.js）が実寸から求める。
 */
.service-video-slider {
	--slider-slide: 360px;
	--slider-gap: 40px;
	--slider-speed: 800ms;
	--slider-delay: 3000ms;

	width: calc(100% + max(var(--page-gutter), calc((var(--viewport-width) - var(--content-max)) / 2)) - max(0px, calc((100vw - var(--figma-stage-max)) / 2)));
	min-width: 0;
	overflow: hidden;
}

.service-video-slider__track {
	display: flex;
	width: max-content;
	gap: var(--slider-gap);
	transition: transform var(--slider-speed) ease-out;
	will-change: transform;
}

.service-video-slider__slide {
	width: var(--slider-slide);
	flex: 0 0 var(--slider-slide);
	aspect-ratio: 9 / 16;
	overflow: hidden;
	border-radius: 12px;
	background: #303030;
}

.service-video-slider__slide img,
.service-video-slider__slide video {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.service-video-slider__slide--1 img,
.service-video-slider__slide--3 img {
	object-position: 32% center;
}

.service-video-slider__slide--2 img,
.service-video-slider__slide--4 img {
	object-position: 68% center;
}

.service-detail__body {
	max-width: 1120px;
	margin: 120px auto 0;
}

.service-detail__body > * + * {
	margin-top: 1.8em;
}

.related-services {
	margin-top: 160px;
	padding-top: 120px;
	border-top: 1px solid rgb(255 255 255 / 30%);
}

.related-services__grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 24px;
	margin-top: 60px;
}

.related-services img,
.related-services__placeholder {
	display: block;
	width: 100%;
	aspect-ratio: 1;
	object-fit: cover;
	background: #d9d9d9;
}

.related-services h3 {
	margin: 24px 0 0;
	font-family: var(--font-en);
	font-size: 18px;
}

.related-services article p {
	margin: 8px 0 0;
	font-size: 14px;
}

@media (max-width: 899px) {
	.contact-page {
		padding-bottom: 96px;
	}

	.contact-page__body {
		margin-top: 64px;
	}

	.contact-page__intro {
		font-size: 14px;
	}

	.contact-form {
		gap: 32px;
		margin-top: 48px;
	}

	.contact-form__field {
		gap: 12px;
	}

	.contact-form__field label {
		font-size: 14px;
	}

	.contact-form input,
	.contact-form select,
	.contact-form textarea {
		min-height: 57px;
		padding: 14px 20px;
		font-size: 14px;
	}

	.contact-form select {
		padding-right: 44px;
		background-position: right 20px center;
	}

	.contact-form textarea {
		min-height: 240px;
	}

	.contact-form__privacy {
		margin-top: 32px;
		font-size: 12px;
	}

	.contact-form__submit {
		width: 100%;
		min-height: 64px;
		padding: 12px 24px;
		font-size: 16px;
	}

	.contact-form--panel {
		gap: 24px;
	}

	.contact-form--panel input:not([type="checkbox"]),
	.contact-form--panel select {
		height: 57px;
	}

	.contact-form--panel .contact-form__privacy input {
		width: 12px;
		height: 12px;
		min-height: 12px;
	}

	.contact-form--panel .contact-form__privacy {
		margin-top: 8px;
	}

	.contact-form--panel textarea {
		min-height: 319px;
	}

	.contact-form--panel .contact-form__submit {
		--fill-swap-arrow-size: 12px;

		width: min(100%, 310px);
		min-height: 60px;
		justify-content: center;
		margin-top: 8px;
		border-radius: 70px;
		font-size: 14px;
	}

	.contact-form--panel .contact-form__submit .fill-swap-btn__arrow {
		position: absolute;
		right: 39px;
		top: calc(50% - 6px);
	}

	.contact-form__recaptcha {
		white-space: normal;
	}

	.contact-form__recaptcha .sp-only {
		display: initial;
	}

	.contact-complete .contact-page__body {
		margin-top: 60px;
	}

	.contact-thanks__title {
		font-size: 32px;
	}

	.contact-thanks__icon {
		width: 160px;
		height: 160px;
	}

	.contact-thanks__text {
		font-size: 12px;
	}

	/* SPフレームに戻るボタンがないため非表示（フッターの導線を使う）。 */
	.contact-thanks__back {
		display: none;
	}

	.fixed-page {
		padding-block: 112px 120px;
	}

	.fixed-page__header {
		padding-bottom: 48px;
	}

	.fixed-page__title {
		font-size: 36px;
	}

	.fixed-page__body {
		margin-top: 56px;
		font-size: 14px;
	}

	.not-found-page {
		min-height: 600px;
		padding-block: 120px 80px;
	}

	.not-found-page__code {
		font-size: 120px;
	}

	.not-found-page h2 {
		font-size: 24px;
	}

	.whitepaper-single {
		padding-block: 100px 96px;
	}

	.whitepaper-single__title {
		font-size: 24px;
	}

	.whitepaper-single__layout {
		margin-top: 60px;
	}

	.whitepaper-single__thumb img {
		border-radius: 8px;
	}

	.whitepaper-points {
		margin-top: 12px;
		padding: 24px 20px;
		border-radius: 8px;
	}

	.whitepaper-points h2 {
		font-size: 16px;
	}

	.whitepaper-points ul {
		margin-top: 20px;
		padding: 24px 0 0 21px;
		font-size: 14px;
	}

	.whitepaper-single__lead {
		margin-top: 40px;
		font-size: 12px;
	}

	.whitepaper-form-wrap,
	.whitepaper-form__complete {
		padding: 40px 20px;
	}

	.whitepaper-form-wrap > h2,
	.whitepaper-form__complete h2 {
		margin-bottom: 24px;
		padding-bottom: 24px;
		font-size: 20px;
		line-height: 1.6;
	}

	.whitepaper-single__title {
		margin-bottom: 40px;
		font-size: 28px;
	}

	.whitepaper-single__layout {
		grid-template-columns: 1fr;
		gap: 48px;
	}

	.whitepaper-form-wrap,
	.whitepaper-form__complete {
		padding: 32px 20px;
	}

	.service-detail {
		padding-block: 96px 120px;
	}

	.service-detail-hero {
		min-height: 0;
		grid-template-columns: 1fr;
		gap: 48px;
	}

	/*
	 * SP基準390pxで213.75px。ブレークポイントが899pxまで広がったため、
	 * そのまま比例させると900px手前で1枚492pxまで肥大する。300pxで頭打ちにし、
	 * 左の見切れ量もスライド幅から算出して比率を保つ（390pxでは従来どおり-21px）。
	 */
	.service-video-slider {
		--slider-slide: min(213.75px, 300px);
		--slider-gap: 20px;

		width: 100vw;
		margin-left: calc(50% - 50vw);
	}

	.service-video-slider > .service-video-slider__track {
		position: relative;
		left: calc(-21 / 213.75 * var(--slider-slide));
	}

	.service-video-slider__slide {
		border-radius: 10px;
	}

	.service-detail-hero__copy h1 {
		font-size: 36px;
	}

	.service-detail__body {
		margin-top: 80px;
		font-size: 14px;
	}

	.related-services {
		margin-top: 120px;
		padding-top: 80px;
	}

	.related-services__grid {
		grid-template-columns: 1fr;
		gap: 48px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.service-video-slider__track {
		transition: none;
		will-change: auto;
	}
}

/* Contact Form 7: retain the existing form layout through generated wrappers. */
.ripples-cf7 .contact-form__field > p { display: contents; }
.ripples-cf7 .contact-form__field br,
.ripples-cf7 .whitepaper-form > label > br { display: none; }
.ripples-cf7 .whitepaper-form label > .wpcf7-form-control-wrap {
	display: block;
	margin: 16px 0 0;
	color: inherit;
	font-size: inherit;
	font-weight: 400;
}
.ripples-cf7 .wpcf7-list-item { margin: 0; }
.ripples-cf7 .wpcf7-acceptance label { display: flex; align-items: center; gap: 8px; }
.ripples-cf7 .wpcf7-acceptance input { flex: 0 0 16px; padding: 0; }
.ripples-cf7 .whitepaper-form .wpcf7-list-item-label { color: inherit; font-size: 14px; }
.ripples-cf7 .wpcf7-not-valid-tip { margin-top: 6px; font-size: 13px; }
.ripples-cf7 .wpcf7-response-output { margin-inline: 0; }

/* CF7 also renders submit controls as input elements. */
.ripples-cf7 .contact-form__field fieldset { border: 0; padding: 0; min-width: 0; }
.ripples-cf7 .contact-form__field .wpcf7-checkbox { display: flex; flex-wrap: wrap; gap: 12px 20px; }
.ripples-cf7 .contact-form__field input[type="checkbox"] { width: auto; margin-right: 8px; }
.ripples-cf7 input[type="submit"] { cursor: pointer; border: 0; background: var(--color-blue, #399bd1); color: #fff; padding: 16px 28px; font: inherit; font-weight: 700; }
/* CF7 auto-paragraphs retain the same spacing as the designed controls. */
.ripples-cf7 .whitepaper-form > p:has(> label) { display: contents; }
.ripples-cf7 .whitepaper-form p > label { display: block; font-size: 16px; font-weight: 700; line-height: 1.8; letter-spacing: .04em; }
.ripples-cf7 .whitepaper-form label > br { display: none; }
.ripples-cf7 .whitepaper-form > p:has(input[type="submit"]) { position: relative; margin-top: -20px; text-align: center; }
.ripples-cf7 .whitepaper-form input[type="submit"] {
	display: block;
	width: min(100%, 343px);
	min-height: 76px;
	margin: 0 auto;
	padding: 16px 56px 16px 32px;
	border: 1px solid #3498db;
	border-radius: 4px;
	background: #fff url("../../images/contact-arrow-up-right.svg") right 43px center / 16px 16px no-repeat;
	color: #3498db;
	font-size: 20px;
	line-height: 1.4;
	letter-spacing: .04em;
}
.ripples-cf7 .whitepaper-form .wpcf7-spinner { position: absolute; bottom: -28px; left: calc(50% - 12px); margin: 0; }
.ripples-cf7 .whitepaper-form > input[type="submit"] { margin-top: -20px; }
.whitepaper-form-wrap > h2, .whitepaper-form__privacy a { color: #3498db; }
.whitepaper-form .whitepaper-form__recaptcha { margin: 0; }
@media (max-width: 899px) {
	.whitepaper-form { gap: 28px; }
	.whitepaper-form__notice { font-size: 14px; }
	.ripples-cf7 .whitepaper-form input[type="submit"] { font-size: 18px; padding-inline: 24px 48px; background-position: right 24px center; }
	.ripples-cf7 .whitepaper-form > p:has(input[type="submit"]) { margin-top: -8px; }
}
.ripples-cf7 .contact-form__field .wpcf7-checkbox label { display: inline-flex; align-items: center; gap: 8px; }
.ripples-cf7 .contact-form__submit:not(button):not(input) { padding: 0; border: 0; background: transparent; justify-content: center; }
.ripples-cf7 .contact-form__submit > p { width: 100%; margin: 0; text-align: center; }
.ripples-cf7 .contact-form__submit input[type="submit"] { width: 100%; min-height: 76px; border-radius: 4px; }


.fixed-page__body a {
	overflow-wrap: anywhere;
}