/* ==========================================================================
   TiarDrop LP  style.css
   構成: 1) modern-normalize  2) 変数・ベース  3) 共通コンポーネント
         4) 各セクション（ページ上から順）  5) SPレスポンシブ（max-width: 767px）
   ========================================================================== */

/*! modern-normalize v3.0.1 | MIT License | https://github.com/sindresorhus/modern-normalize */

/*
Document
========
*/

/**
Use a better box model (opinionated).
*/

*,
::before,
::after {
	box-sizing: border-box;
}

html {
	/* Improve consistency of default fonts in all browsers. (https://github.com/sindresorhus/modern-normalize/issues/3) */
	font-family:
		system-ui,
		'Segoe UI',
		Roboto,
		Helvetica,
		Arial,
		sans-serif,
		'Apple Color Emoji',
		'Segoe UI Emoji';
	line-height: 1.15; /* 1. Correct the line height in all browsers. */
	-webkit-text-size-adjust: 100%; /* 2. Prevent adjustments of font size after orientation changes in iOS. */
	tab-size: 4; /* 3. Use a more readable tab size (opinionated). */
}

/*
Sections
========
*/

body {
	margin: 0; /* Remove the margin in all browsers. */
}

/*
Text-level semantics
====================
*/

/**
Add the correct font weight in Chrome and Safari.
*/

b,
strong {
	font-weight: bolder;
}

/**
1. Improve consistency of default fonts in all browsers. (https://github.com/sindresorhus/modern-normalize/issues/3)
2. Correct the odd 'em' font sizing in all browsers.
*/

code,
kbd,
samp,
pre {
	font-family:
		ui-monospace,
		SFMono-Regular,
		Consolas,
		'Liberation Mono',
		Menlo,
		monospace; /* 1 */
	font-size: 1em; /* 2 */
}

/**
Add the correct font size in all browsers.
*/

small {
	font-size: 80%;
}

/**
Prevent 'sub' and 'sup' elements from affecting the line height in all browsers.
*/

sub,
sup {
	font-size: 75%;
	line-height: 0;
	position: relative;
	vertical-align: baseline;
}

sub {
	bottom: -0.25em;
}

sup {
	top: -0.5em;
}

/*
Tabular data
============
*/

/**
Correct table border color inheritance in Chrome and Safari. (https://issues.chromium.org/issues/40615503, https://bugs.webkit.org/show_bug.cgi?id=195016)
*/

table {
	border-color: currentcolor;
}

/*
Forms
=====
*/

/**
1. Change the font styles in all browsers.
2. Remove the margin in Firefox and Safari.
*/

button,
input,
optgroup,
select,
textarea {
	font-family: inherit; /* 1 */
	font-size: 100%; /* 1 */
	line-height: 1.15; /* 1 */
	margin: 0; /* 2 */
}

/**
Correct the inability to style clickable types in iOS and Safari.
*/

button,
[type='button'],
[type='reset'],
[type='submit'] {
	-webkit-appearance: button;
}

/**
Remove the inner border and padding in Firefox.
*/

::-moz-focus-inner {
	border-style: none;
	padding: 0;
}

/**
Restore the focus styles unset by the previous rule.
*/

:-moz-focusring {
	outline: 1px dotted ButtonText;
}

/**
Remove the additional ':invalid' styles in Firefox.
See: https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737
*/

:-moz-ui-invalid {
	box-shadow: none;
}

/**
Remove the padding so developers are not caught out when they zero out 'fieldset' elements in all browsers.
*/

legend {
	padding: 0;
}

/**
Add the correct vertical alignment in Chrome and Firefox.
*/

progress {
	vertical-align: baseline;
}

/**
Correct the cursor style of increment and decrement buttons in Safari.
*/

::-webkit-inner-spin-button,
::-webkit-outer-spin-button {
	height: auto;
}

/**
1. Correct the odd appearance in Chrome and Safari.
2. Correct the outline style in Safari.
*/

[type='search'] {
	-webkit-appearance: textfield; /* 1 */
	outline-offset: -2px; /* 2 */
}

/**
Remove the inner padding in Chrome and Safari on macOS.
*/

::-webkit-search-decoration {
	-webkit-appearance: none;
}

/**
1. Correct the inability to style clickable types in iOS and Safari.
2. Change font properties to 'inherit' in Safari.
*/

::-webkit-file-upload-button {
	-webkit-appearance: button; /* 1 */
	font: inherit; /* 2 */
}

/*
Interactive
===========
*/

/*
Add the correct display in Chrome and Safari.
*/

summary {
	display: list-item;
}

/* ==========================================================================
   2) 変数・ベース
   ========================================================================== */

:root {
	/* カラー（design-context 実測値） */
	--color-primary: #e65513;
	--color-bg-light: #faddd0;
	--color-bg-problem: rgba(230, 85, 19, 0.2);
	--color-bg-gray: #f5f5f5;
	--color-bg-footer: #757575;
	--color-text: #333333;
	--color-text-dark: #1e1e1e;
	--color-text-strong: #2c2c2c;
	--color-text-oncard: #f3f3f3;
	--color-border: #d9d9d9;
	--color-divider: #b3b3b3;

	/* フォント（fonts.json 準拠） */
	--font-jp: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
	--font-roboto: Roboto, "Noto Sans JP", sans-serif;
	--font-inter: Inter, "Noto Sans JP", sans-serif;

	/* レイアウト */
	--width-content: 1020px;
	--width-card: 1042px;

	/* フォーム（contact.html） */
	--color-input-border: #878787;
	--color-placeholder: #afafaf;
	--color-checkbox-border: #b7b7b7;
	--color-submit: #f13c68;
	--color-error: #d9302c;
}

html {
	scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}
}

body {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
	font-family: var(--font-jp);
	color: var(--color-text);
	background-color: #ffffff;
	line-height: 1.5;
}

main {
	flex: 1;
}

h1,
h2,
h3,
h4,
p,
ul {
	margin: 0;
	padding: 0;
}

ul {
	list-style: none;
}

a {
	color: inherit;
	text-decoration: none;
}

img {
	display: block;
	max-width: 100%;
	height: auto;
}

/* ==========================================================================
   3) 共通コンポーネント
   ========================================================================== */

/* セクション見出し（テキスト + オレンジ下線） */
.section-heading {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 16px;
}

.section-heading__title {
	font-size: 36px;
	font-weight: 700;
	line-height: normal;
	color: var(--color-text);
	text-align: center;
}

.section-heading__bar {
	display: block;
	width: 60px;
	height: 4px;
	background-color: var(--color-primary);
}

.section-heading--on-orange .section-heading__title {
	color: #ffffff;
}

/* オレンジ文字アクセント */
.accent {
	color: var(--color-primary);
}

/* Figma上で背面レイヤーに隠れている要素 */
.u-hidden {
	display: none;
}

/* ==========================================================================
   4) 各セクション
   ========================================================================== */

/* --- 01: ヘッダー --- */

.site-header {
	position: relative;
	z-index: 10;
	height: 82px;
	background-color: #ffffff;
	box-shadow: 0 4px 2px rgba(156, 156, 156, 0.25);
}

.site-header__inner {
	display: flex;
	align-items: center;
	max-width: 1440px;
	height: 100%;
	margin: 0 auto;
	padding: 0 25px 0 48px;
}

.site-header__logo img {
	width: 176px;
	height: 36px;
}

.site-header__nav {
	display: flex;
	gap: 64px;
	margin-left: auto;
}

.site-header__link {
	font-size: 14px;
	font-weight: 500;
	line-height: normal;
	color: var(--color-text);
	white-space: nowrap;
}

.site-header__cta {
	display: flex;
	align-items: center;
	justify-content: center;
	margin-left: 35px;
	padding: 16px 20px;
	background-color: var(--color-primary);
	font-size: 16px;
	font-weight: 700;
	line-height: 1;
	color: #ffffff;
	white-space: nowrap;
}

/* --- 02: ヒーロー --- */

.hero {
	position: relative;
	height: 678px; /* デザイン760px からヘッダー82px を引いた表示領域 */
	overflow: hidden;
}

.hero__bg {
	position: absolute;
	top: -82px; /* ヘッダー背面に潜り込む分のオフセット */
	left: 50%;
	transform: translateX(-50%);
	width: 1440px;
	min-width: 1440px;
	max-width: none;
	height: 760px;
	object-fit: cover;
}

.hero__overlay {
	position: absolute;
	inset: 0;
	background-image: linear-gradient(119.14deg, rgba(52, 212, 184, 0.1) 8.24%, rgba(46, 215, 215, 0.1) 89.93%);
	pointer-events: none;
}

.hero__inner {
	position: relative;
	width: 1440px;
	height: 100%;
	margin: 0 auto;
}

.hero__catch {
	position: absolute;
	top: 135px; /* デザイン y=217 - 82 */
	left: 200px;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 14px;
}

.hero__catch-line {
	display: inline-block;
	padding: 0 20px;
	background-color: var(--color-primary);
	font-size: 64px;
	font-weight: 500;
	line-height: 74px;
	color: #ffffff;
	white-space: nowrap;
	font-feature-settings: "palt";
	letter-spacing: 0.02em;
}

.hero__band {
	position: absolute;
	top: 326px; /* デザイン y=408 - 82 */
	left: 200px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	width: 918px;
	height: 106px;
	padding-left: 22px;
	background-color: #ffffff;
}

.hero__band-line {
	font-size: 36px;
	font-weight: 700;
	line-height: 47px;
	color: var(--color-primary);
	white-space: nowrap;
}

.hero__band-dark {
	color: var(--color-text-dark);
}

.hero__band-black {
	color: #000000;
}

.hero__logo {
	position: absolute;
	top: 510px; /* デザイン y=592 - 82 */
	left: 200px;
	width: 351px;
	height: 131px;
}

.toplink {
	position: fixed;
	right: 37px; /* デザインのヒーロー内配置（1440-1347-56）を踏襲 */
	bottom: 40px;
	z-index: 100;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.3s ease, visibility 0.3s ease;
}

.toplink.is-visible {
	opacity: 1;
	visibility: visible;
}

.toplink img {
	width: 56px;
	height: 56px;
}

/* --- 03: サービス紹介 + 特長3カード --- */

.intro {
	padding: 87px 0 0;
	background-color: #ffffff;
}

.intro__title-sub {
	display: block;
	font-size: 24px;
	line-height: normal;
}

.intro__title-main {
	display: block;
	font-size: 36px;
	line-height: normal;
}

.intro__cards {
	display: flex;
	justify-content: space-between;
	width: var(--width-content);
	margin: 84px auto 0;
}

.intro-card {
	display: flex;
	flex-direction: column;
	gap: 8px;
	width: 332px;
	padding: 16px;
	border-radius: 10px;
	background-color: var(--color-primary);
}

.intro-card__title {
	font-family: var(--font-roboto);
	font-size: 22px;
	font-weight: 700;
	line-height: 28px;
	color: #ffffff;
	text-align: center;
}

.intro-card__body {
	font-family: var(--font-inter);
	font-size: 16px;
	font-weight: 600;
	line-height: 1.4;
	color: #ffffff;
	text-align: center;
}

.intro-card__body--soft {
	color: var(--color-text-oncard);
}

.intro__shots {
	display: flex;
	justify-content: center;
	gap: 90px;
	margin-top: 40px;
}

.intro__shots img {
	width: 408px;
	height: 301px;
}

/* --- 04: 課題提起テキスト --- */

.problem-text {
	padding: 50px 0;
	background-color: #ffffff;
}

.problem-text__copy {
	font-size: 24px;
	font-weight: 700;
	line-height: 1.8;
	text-align: center;
	color: var(--color-text);
}

/* --- 05: 課題セクション --- */

.problem {
	height: 472px;
	background-color: var(--color-bg-problem);
}

.problem__inner {
	display: flex;
	width: 1037px;
	margin: 0 auto;
	padding-top: 56px;
}

.problem__photo {
	width: 370px;
	height: 360px;
	object-fit: cover;
}

.problem__panel {
	width: 667px;
	height: 359px;
	padding: 19px 0 0 56px;
	background-color: #ffffff;
}

.problem__item {
	display: flex;
	align-items: center;
	gap: 16px;
	min-height: 42px;
}

.problem__item + .problem__item {
	margin-top: 28px;
}

.problem__check {
	flex-shrink: 0;
	width: 22px;
	height: 24px;
}

.problem__item-text {
	width: 500px;
	font-size: 16px;
	font-weight: 400;
	line-height: 1.3;
	color: var(--color-text);
}

/* --- 06: 解決帯 --- */

.solution {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	height: 128px;
	background-color: var(--color-primary);
}

.solution::before {
	content: "";
	position: absolute;
	top: 0;
	left: 50%;
	transform: translateX(-50%);
	border-left: 43px solid transparent;
	border-right: 43px solid transparent;
	border-top: 48px solid var(--color-bg-light);
}

.solution__text {
	font-size: 24px;
	font-weight: 700;
	line-height: normal;
	color: #ffffff;
	text-align: center;
}

/* --- 07: 解決フロー --- */

.flow {
	padding: 88px 0 110px;
	background-color: #ffffff;
}

.flow__inner {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 15px;
	width: 759px;
	margin: 38px auto 0;
}

.flow__subtitle {
	font-size: 24px;
	font-weight: 700;
	line-height: normal;
	color: var(--color-text);
	text-align: center;
}

.flow__lead {
	width: 100%;
	font-family: var(--font-inter);
	font-size: 16px;
	font-weight: 400;
	line-height: 1.4;
	color: var(--color-text-dark);
}

.flow__points {
	display: flex;
	gap: 15px;
}

.flow-point {
	display: flex;
	flex-direction: column;
	gap: 8px;
	width: 372px;
	min-height: 154px;
	padding: 16px;
	border: 1px solid var(--color-border);
	border-radius: 8px;
	background-color: #ffffff;
}

.flow-point__title {
	font-family: var(--font-inter);
	font-size: 20px;
	font-weight: 600;
	line-height: 1.2;
	color: var(--color-primary);
}

.flow-point__body {
	font-family: var(--font-inter);
	font-size: 16px;
	font-weight: 400;
	line-height: 1.4;
	color: var(--color-text-dark);
}

.flow__steps {
	display: flex;
	flex-direction: column;
	width: 100%;
}

.flow-step {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 54px;
	padding: 16px;
	border: 1px solid var(--color-border);
	border-radius: 8px;
	background-color: var(--color-bg-light);
	font-family: var(--font-inter);
	font-size: 16px;
	font-weight: 600;
	line-height: 1.4;
	color: var(--color-text);
	text-align: center;
}

.flow__chevron {
	width: 28px;
	height: 28px;
	margin: 0 auto;
}

/* --- 08: ROI 3つ --- */

.roi {
	padding: 88px 0 103px;
	background-color: var(--color-primary);
}

.roi__cards {
	display: flex;
	justify-content: space-between;
	width: var(--width-content);
	margin: 14px auto 0;
}

.roi-card {
	display: flex;
	flex-direction: column;
	gap: 8px;
	width: 332px;
	padding: 16px;
	border: 1px solid var(--color-border);
	border-radius: 8px;
	background-color: #ffffff;
}

.roi-card__title {
	font-family: var(--font-roboto);
	font-size: 28px;
	font-weight: 700;
	line-height: 36px;
	color: var(--color-text-dark);
	text-align: center;
}

.roi-card__body {
	font-family: var(--font-inter);
	font-size: 16px;
	font-weight: 600;
	line-height: 1.4;
	color: var(--color-text-dark);
	text-align: center;
}

/* --- 09: 機能一覧 --- */

.features {
	padding: 88px 0 142px;
	background-color: var(--color-bg-light);
}

.features__list {
	display: flex;
	flex-direction: column;
	gap: 38px;
	width: var(--width-card);
	margin: 62px auto 0;
}

.feature-card {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 48px;
	height: 381px;
	padding: 40px;
	border-radius: 10px;
	background-color: #ffffff;
}

.feature-card__image {
	flex-shrink: 0;
	width: 408px;
	height: 301px;
}

.feature-card__text {
	display: flex;
	flex-direction: column;
	gap: 22px;
}

.feature-card__title {
	width: 360px;
	font-size: 24px;
	font-weight: 700;
	line-height: 1.6;
	color: var(--color-text-strong);
}

.feature-card__body {
	width: 442px;
	font-size: 16px;
	font-weight: 700;
	line-height: 1.8;
	color: #000000;
}

/* --- 10: 活用事例 --- */

.cases {
	padding: 88px 0 90px;
	background-color: #ffffff;
}

.cases__grid {
	display: grid;
	grid-template-columns: repeat(3, 300px);
	column-gap: 60px;
	row-gap: 8px;
	width: var(--width-content);
	margin: 56px auto 0;
}

.case-card__image {
	width: 300px;
	height: 180px;
	border-radius: 8px;
	object-fit: cover;
}

.case-card__title {
	margin-top: 16px;
	font-size: 16px;
	font-weight: 700;
	line-height: normal;
	color: var(--color-text);
}

.case-card__body {
	margin-top: 16px;
	font-size: 14px;
	font-weight: 400;
	line-height: 1.7;
	color: var(--color-text);
}

/* --- 11: 導入シミュレーション・お見積り --- */

.simulation {
	padding: 99px 0 139px;
	background-color: var(--color-bg-light);
}

.simulation__card {
	display: flex;
	align-items: center;
	justify-content: center;
	width: var(--width-card);
	height: 381px;
	margin: 62px auto 0;
	padding: 40px;
	border-radius: 10px;
	background-color: #ffffff;
}

.simulation__text {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 22px;
}

.simulation__title {
	font-size: 24px;
	font-weight: 700;
	line-height: 1.6;
	color: var(--color-primary);
	text-align: center;
}

.simulation__body {
	font-size: 16px;
	font-weight: 700;
	line-height: 1.8;
	color: #000000;
	text-align: center;
}

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

.faq {
	padding: 88px 0 133px;
	background-color: var(--color-bg-gray);
}

.faq__list {
	width: 970px;
	margin: 30px auto 0;
	border-bottom: 1px solid var(--color-divider);
}

.faq-item {
	padding: 24px 0;
	border-top: 1px solid var(--color-divider);
}

.faq-item__q,
.faq-item__a {
	display: flex;
	align-items: center;
	gap: 30px;
}

.faq-item__q {
	margin-top: 5px;
	margin-bottom: 15px;
}

.faq-item__badge {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 60px;
	height: 60px;
	border-radius: 50%;
	font-size: 36px;
	font-weight: 400;
	line-height: 1;
}

.faq-item__badge--q {
	background-color: var(--color-primary);
	color: #ffffff;
}

.faq-item__badge--a {
	background-color: #ffffff;
	border: 2px solid var(--color-primary);
	color: var(--color-primary);
}

.faq-item__q-text,
.faq-item__a-text {
	font-size: 16px;
	font-weight: 400;
	line-height: 1.7;
	color: var(--color-text);
}

/* --- 13: フッターCTA --- */

.footer-cta {
	position: relative;
	height: 285px;
	overflow: hidden;
}

.footer-cta__bg {
	/* 書き出し画像に薄さ（opacity 0.2相当）焼き込み済み。CSSでopacityを重ねない */
	position: absolute;
	top: 0;
	left: 50%;
	transform: translateX(-50%);
	width: 100%;
	min-width: 1440px;
	max-width: none;
	height: 285px;
	object-fit: cover;
}

.footer-cta__inner {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 24px;
	height: 100%;
}

.footer-cta__copy {
	width: 408px;
	font-size: 24px;
	font-weight: 700;
	line-height: 42px;
	color: var(--color-text);
	text-align: center;
}

.footer-cta__button {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 16px 20px;
	background-color: var(--color-primary);
	font-size: 16px;
	font-weight: 700;
	line-height: 1;
	color: #ffffff;
	white-space: nowrap;
}

.footer-cta__button img {
	width: 20px;
	height: 16px;
}

/* --- 14: フッター --- */

.site-footer {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 88px;
	background-color: var(--color-bg-footer);
}

.site-footer__copyright {
	font-size: 12px;
	font-weight: 400;
	line-height: normal;
	color: #ffffff;
	text-align: center;
}

/* ==========================================================================
   4b) 下層ページ: お問い合わせ（contact.html）/ 送信完了（thanks.html）
   ========================================================================== */

/* --- お問い合わせフォーム --- */

.contact {
	padding: 88px 0 160px; /* デザインのタイトルy=170はヘッダー82px込み */
	background-color: #ffffff;
}

.contact__title {
	margin: 0 auto;
	font-size: 24px;
	font-weight: 700;
	line-height: normal;
	color: var(--color-text-dark);
	text-align: center;
	font-feature-settings: "palt";
}

.contact-form {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 72px;
	width: 480px;
	margin: 31px auto 0;
}

.contact-form__fields {
	display: flex;
	flex-direction: column;
	gap: 40px;
	width: 100%;
}

.contact-form__field {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.contact-form__label {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 0;
	font-size: 16px;
	font-weight: 700;
	line-height: 1.7;
	color: var(--color-text);
}

.contact-form__required {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 24px;
	font-size: 12px;
	font-weight: 700;
	line-height: 1;
	color: #ffffff;
	background-color: var(--color-primary);
}

.contact-form__input {
	width: 100%;
	height: 50px;
	padding: 0 15px;
	font-family: var(--font-jp);
	font-size: 15px;
	color: var(--color-text);
	background-color: #ffffff;
	border: 1px solid var(--color-input-border);
	border-radius: 4px;
}

.contact-form__input::placeholder {
	color: var(--color-placeholder);
}

.contact-form__input--textarea {
	padding-top: 16px;
	resize: vertical;
}

.contact-form__radios {
	display: flex;
	flex-direction: column;
	gap: 45px;
	padding: 7px 0 0 19px;
}

.contact-form__radio {
	display: flex;
	align-items: center;
	gap: 14px;
	cursor: pointer;
}

.contact-form__radio-input {
	appearance: none;
	width: 18px;
	height: 18px;
	margin: 0;
	background-color: #ffffff;
	border: 1px solid var(--color-text);
	border-radius: 50%;
	flex-shrink: 0;
}

.contact-form__radio-input:checked {
	border-color: var(--color-primary);
	background: radial-gradient(circle, var(--color-primary) 0 5px, #ffffff 6px);
}

.contact-form__radio-text {
	font-size: 16px;
	line-height: 1.5;
	color: var(--color-text);
}

.contact-form__footer {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 32px;
}

.contact-form__agree {
	display: flex;
	align-items: center;
	gap: 12px;
	cursor: pointer;
}

.contact-form__agree-input {
	appearance: none;
	width: 12px;
	height: 12px;
	margin: 0;
	background-color: #ffffff;
	border: 1px solid var(--color-checkbox-border);
	flex-shrink: 0;
}

.contact-form__agree-input:checked {
	background-color: var(--color-primary);
	border-color: var(--color-primary);
}

.contact-form__agree-text {
	font-family: var(--font-inter);
	font-size: 14px;
	line-height: normal;
	color: var(--color-text);
}

.contact-form__submit {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 184px;
	height: 48px;
	padding: 0;
	font-family: var(--font-jp);
	font-size: 16px;
	font-weight: 700;
	line-height: 1.7;
	color: #ffffff;
	background-color: var(--color-submit);
	border: none;
	border-radius: 4px;
	cursor: pointer;
}

/* --- バリデーション（validate.js / contact.php） --- */

.contact-form__hp {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

.contact-form__error {
	margin: 0;
	font-size: 13px;
	line-height: 1.5;
	color: var(--color-error);
}

.contact-form__input--invalid {
	border-color: var(--color-error);
}

.contact-form__footer .contact-form__error {
	margin: -8px 0;
	text-align: center;
}

.contact-form__error-list {
	margin: 40px 0 0;
	padding: 0;
	list-style: none;
	font-size: 15px;
	line-height: 2;
	color: var(--color-error);
	text-align: center;
}

/* --- 送信完了 --- */

.thanks {
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 231px 0 273px;
	background-color: #ffffff;
}

.thanks__message {
	margin: 0;
	font-size: 24px;
	font-weight: 700;
	line-height: 1.7;
	color: var(--color-primary);
}

.thanks__button {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 184px;
	height: 48px;
	margin-top: 80px;
	font-size: 16px;
	font-weight: 700;
	line-height: 1.7;
	color: var(--color-primary);
	text-decoration: none;
	background-color: #ffffff;
	border: 1px solid var(--color-primary);
	border-radius: 4px;
}

/* ==========================================================================
   5) SPレスポンシブ（max-width: 767px）
   幅は vw 比例・フォントは rem。PC の固定幅レイアウトを1カラムに落とす。
   ========================================================================== */

@media (max-width: 767px) {

	/* --- ヘッダー --- */

	.site-header {
		height: auto;
	}

	.site-header__inner {
		padding: 3vw 4vw;
	}

	.site-header__logo img {
		width: 36vw;
		height: auto;
	}

	.site-header__nav {
		display: none;
	}

	.site-header__cta {
		margin-left: auto;
		padding: 3vw 4vw;
		font-size: 0.8125rem;
	}

	/* --- ヒーロー --- */

	.hero {
		height: auto;
	}

	.hero__bg {
		top: 0;
		width: 100%;
		min-width: 0;
		height: 100%;
	}

	.hero__inner {
		width: 100%;
		padding: 14vw 5vw 10vw;
	}

	.hero__catch {
		position: static;
		gap: 2vw;
	}

	.hero__catch-line {
		padding: 1vw 3vw;
		font-size: 1.875rem;
		line-height: 1.4;
		white-space: normal;
	}

	.hero__band {
		position: static;
		width: 100%;
		height: auto;
		margin-top: 6vw;
		padding: 3vw 4vw;
	}

	.hero__band-line {
		font-size: 1.25rem;
		line-height: 1.5;
		white-space: normal;
	}

	.hero__logo {
		position: static;
		width: 44vw;
		height: auto;
		margin-top: 10vw;
	}

	.toplink {
		right: 4.3vw;
		bottom: 4.3vw;
	}

	.toplink img {
		width: 48px;
		height: 48px;
	}

	/* --- 共通見出し --- */

	.section-heading__title {
		font-size: 1.5rem;
		padding: 0 5vw;
	}

	/* --- サービス紹介 --- */

	.intro {
		padding: 12vw 0 0;
	}

	.intro__title-sub {
		font-size: 1rem;
	}

	.intro__title-main {
		font-size: 1.375rem;
	}

	.intro__cards {
		flex-direction: column;
		gap: 4vw;
		width: auto;
		margin: 8vw 5vw 0;
	}

	.intro-card {
		width: 100%;
		padding: 4vw;
	}

	.intro-card__title {
		font-size: 1.25rem;
		line-height: 1.4;
	}

	.intro-card__body {
		font-size: 0.9375rem;
	}

	.intro__shots {
		flex-direction: column;
		align-items: center;
		gap: 6vw;
		margin: 8vw 5vw 0;
	}

	.intro__shots img {
		width: 100%;
		height: auto;
	}

	/* --- 課題提起テキスト --- */

	.problem-text {
		padding: 10vw 5vw;
	}

	.problem-text__copy {
		font-size: 1.0625rem;
	}

	/* --- 課題セクション --- */

	.problem {
		height: auto;
		padding: 8vw 5vw;
	}

	.problem__inner {
		flex-direction: column;
		width: 100%;
		padding-top: 0;
	}

	.problem__photo {
		width: 100%;
		height: auto;
	}

	.problem__panel {
		width: 100%;
		height: auto;
		padding: 5vw;
	}

	.problem__item + .problem__item {
		margin-top: 5vw;
	}

	.problem__item-text {
		width: auto;
		font-size: 0.9375rem;
		line-height: 1.5;
	}

	/* --- 解決帯 --- */

	.solution {
		height: auto;
		padding: 12vw 5vw 8vw;
	}

	.solution::before {
		border-left-width: 6vw;
		border-right-width: 6vw;
		border-top-width: 7vw;
	}

	.solution__text {
		font-size: 1.125rem;
	}

	/* --- 解決フロー --- */

	.flow {
		padding: 12vw 0;
	}

	.flow__inner {
		gap: 4vw;
		width: auto;
		margin: 6vw 5vw 0;
	}

	.flow__subtitle {
		font-size: 1.125rem;
	}

	.flow__lead {
		font-size: 0.9375rem;
	}

	.flow__points {
		flex-direction: column;
		gap: 4vw;
		width: 100%;
	}

	.flow-point {
		width: 100%;
		min-height: 0;
		padding: 4vw;
	}

	.flow-point__title {
		font-size: 1.0625rem;
	}

	.flow-point__body {
		font-size: 0.9375rem;
	}

	.flow-step {
		height: auto;
		padding: 3.5vw 4vw;
		font-size: 0.9375rem;
	}

	.flow__chevron {
		width: 6vw;
		height: 6vw;
	}

	/* --- ROI --- */

	.roi {
		padding: 12vw 0;
	}

	.roi__cards {
		flex-direction: column;
		gap: 4vw;
		width: auto;
		margin: 6vw 5vw 0;
	}

	.roi-card {
		width: 100%;
		padding: 4vw;
	}

	.roi-card__title {
		font-size: 1.375rem;
		line-height: 1.4;
	}

	.roi-card__body {
		font-size: 0.9375rem;
	}

	/* --- 機能一覧 --- */

	.features {
		padding: 12vw 0;
	}

	.features__list {
		gap: 6vw;
		width: auto;
		margin: 8vw 5vw 0;
	}

	.feature-card {
		flex-direction: column;
		gap: 5vw;
		height: auto;
		padding: 6vw 5vw;
	}

	.feature-card__image {
		width: 100%;
		height: auto;
	}

	.feature-card__text {
		gap: 4vw;
	}

	.feature-card__title {
		width: auto;
		font-size: 1.25rem;
	}

	.feature-card__body {
		width: auto;
		font-size: 0.9375rem;
	}

	/* --- 活用事例 --- */

	.cases {
		padding: 12vw 0;
	}

	.cases__grid {
		grid-template-columns: 1fr;
		row-gap: 8vw;
		width: auto;
		margin: 8vw 5vw 0;
	}

	.case-card__image {
		width: 100%;
		height: auto;
	}

	.case-card__title {
		margin-top: 3vw;
		font-size: 1.0625rem;
	}

	.case-card__body {
		margin-top: 2vw;
		font-size: 0.875rem;
	}

	/* --- 導入シミュレーション --- */

	.simulation {
		padding: 12vw 0;
	}

	.simulation__card {
		width: auto;
		height: auto;
		margin: 8vw 5vw 0;
		padding: 8vw 5vw;
	}

	.simulation__title {
		font-size: 1.25rem;
	}

	.simulation__body {
		font-size: 0.9375rem;
	}

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

	.faq {
		padding: 12vw 0;
	}

	.faq__list {
		width: auto;
		margin: 6vw 5vw 0;
	}

	.faq-item {
		padding: 5vw 0;
	}

	.faq-item__q,
	.faq-item__a {
		gap: 4vw;
		align-items: flex-start;
	}

	.faq-item__q {
		margin: 0 0 4vw;
	}

	.faq-item__badge {
		width: 10.5vw;
		height: 10.5vw;
		font-size: 1.5rem;
	}

	.faq-item__q-text,
	.faq-item__a-text {
		font-size: 0.9375rem;
		align-self: center;
	}

	.faq-item__a-text br,
	.faq-item__q-text br {
		display: none;
	}

	/* --- フッターCTA --- */

	.footer-cta {
		height: auto;
	}

	.footer-cta__bg {
		width: 100%;
		min-width: 0;
		height: 100%;
	}

	.footer-cta__inner {
		gap: 6vw;
		padding: 14vw 5vw;
	}

	.footer-cta__copy {
		width: auto;
		font-size: 1.125rem;
		line-height: 1.75;
	}

	/* --- フッター --- */

	.site-footer {
		height: auto;
		padding: 6vw 5vw;
	}

	.site-footer__copyright {
		font-size: 0.75rem;
	}

	/* --- 下層: お問い合わせ / 送信完了 --- */

	.contact {
		padding: 21.3vw 6.4vw 21.3vw;
	}

	.contact__title {
		font-size: 1.375rem;
	}

	.contact-form {
		width: 100%;
		gap: 12.8vw;
	}

	.contact-form__radios {
		gap: 6.4vw;
		padding: 4.3vw 0 2.1vw 2.1vw;
	}

	.contact-form__radio-text {
		font-size: 0.9375rem;
	}

	.thanks {
		padding: 32vw 6.4vw 42.7vw;
	}

	.thanks__message {
		font-size: 1.25rem;
	}

	.thanks__button {
		margin-top: 12.8vw;
	}
}