/*
Theme Name: INFLO kintoneプラグイン
Theme URI: https://kintone-plugins.inflo.co.jp/
Author: 合同会社INFLO
Description: 合同会社INFLOのkintoneプラグイン紹介・販売サイト用オリジナルテーマ。本店テーマ inflo を複製して作成
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 8.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: inflo-plugins
*/

/*
 * 1〜13・15・18・19 は本店テーマ inflo の style.css の写し(2026-09-19 時点)。
 * デザイントークンの値は本店と一致させる。本店が変わったら手で合わせる(docs/deploy.md §4)。
 * 販売サイト固有のスタイルは 20 以降に書く。
 */

/* =========================================================
   1. デザイントークン
   値は ../corporatesite/docs/brand-guide.md と theme.json に一致させる(本店と同値)
   ========================================================= */

:root {
	/* 配色 */
	--color-primary: #0b4f8a;
	--color-primary-dark: #073762;
	--color-primary-light: #e8f1f8;
	--color-accent: #00b8a9;
	--color-accent-dark: #009488;
	--color-text: #1a1a1a;
	--color-text-muted: #5a6570;
	--color-bg: #ffffff;
	--color-bg-alt: #f5f7fa;
	--color-border: #d9dee4;

	/* "流れ" を象徴するグラデーション */
	--gradient-flow: linear-gradient(135deg, var(--color-primary) 0%, var(--color-accent) 100%);

	/* タイポグラフィ */
	--font-base:
		-apple-system, BlinkMacSystemFont, "Segoe UI", "Hiragino Kaku Gothic ProN",
		"Hiragino Sans", "Noto Sans JP", Meiryo, sans-serif;

	--fs-hero: clamp(1.75rem, 5vw, 3rem);
	--fs-h1: clamp(1.5rem, 4vw, 2.25rem);
	--fs-h2: clamp(1.25rem, 3vw, 1.75rem);
	--fs-h3: clamp(1.125rem, 2.5vw, 1.375rem);
	--fs-body: 1rem;
	--fs-small: 0.875rem;

	--lh-body: 1.8;
	--lh-heading: 1.4;

	/* レイアウト */
	--width-container: 1120px;
	--width-prose: 720px;
	--space-gutter: 20px;
	--space-section: clamp(3rem, 8vw, 6rem);

	--radius: 6px;
	--shadow-card: 0 1px 3px rgba(16, 34, 51, 0.08);
	--shadow-card-hover: 0 6px 20px rgba(16, 34, 51, 0.12);
	--header-height: 64px;
}

/* =========================================================
   2. ベース
   ========================================================= */

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

html {
	scroll-behavior: smooth;
	-webkit-text-size-adjust: 100%;
}

body {
	margin: 0;
	font-family: var(--font-base);
	font-size: var(--fs-body);
	line-height: var(--lh-body);
	color: var(--color-text);
	background-color: var(--color-bg);
	-webkit-font-smoothing: antialiased;
}

h1,
h2,
h3,
h4 {
	margin: 0 0 0.6em;
	line-height: var(--lh-heading);
	letter-spacing: 0.02em;
	font-weight: 700;
	word-break: auto-phrase;
	overflow-wrap: anywhere;
}

h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }

p,
ul,
ol,
dl,
table,
figure {
	margin: 0 0 1.5em;
}

ul,
ol {
	padding-left: 1.4em;
}

li {
	margin-bottom: 0.4em;
}

a {
	color: var(--color-primary);
	text-underline-offset: 0.2em;
}

a:hover {
	color: var(--color-primary-dark);
}

/* 色だけで情報を伝えないため、本文中のリンクは下線を保つ */
:where(.c-prose) a {
	text-decoration: underline;
}

img,
video,
svg {
	max-width: 100%;
	height: auto;
}

strong {
	font-weight: 700;
}

hr {
	border: 0;
	border-top: 1px solid var(--color-border);
	margin: 2.5em 0;
}

blockquote {
	margin: 0 0 1.5em;
	padding: 1em 1.25em;
	border-left: 4px solid var(--color-accent);
	background: var(--color-bg-alt);
}

blockquote > :last-child {
	margin-bottom: 0;
}

code {
	font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
	font-size: 0.9em;
	background: var(--color-bg-alt);
	padding: 0.15em 0.4em;
	border-radius: 3px;
}

table {
	width: 100%;
	border-collapse: collapse;
	font-size: var(--fs-small);
}

th,
td {
	padding: 0.85em 1em;
	border: 1px solid var(--color-border);
	text-align: left;
	vertical-align: top;
}

th {
	background: var(--color-bg-alt);
	font-weight: 700;
	white-space: nowrap;
}

/* 表は狭い画面でも押し出さず、内側で横スクロールさせる */
.c-table-scroll {
	overflow-x: auto;
	margin-bottom: 1.5em;
}

.c-table-scroll > table {
	margin-bottom: 0;
}

:focus-visible {
	outline: 3px solid var(--color-accent);
	outline-offset: 2px;
}

/* =========================================================
   3. レイアウト
   ========================================================= */

.l-container {
	width: 100%;
	max-width: var(--width-container);
	margin-inline: auto;
	padding-inline: var(--space-gutter);
}

.l-prose {
	max-width: var(--width-prose);
}

.l-section {
	padding-block: var(--space-section);
}

.l-section--alt {
	background: var(--color-bg-alt);
}

.l-section--light {
	background: var(--color-primary-light);
}

.l-main {
	display: block;
}

/* スクリーンリーダー向け */
.u-visually-hidden {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.c-skip-link {
	position: absolute;
	top: -100px;
	left: var(--space-gutter);
	z-index: 200;
	padding: 0.75em 1.25em;
	background: var(--color-primary);
	color: #fff;
	text-decoration: none;
	border-radius: 0 0 var(--radius) var(--radius);
}

.c-skip-link:focus {
	top: 0;
	color: #fff;
}

/* =========================================================
   4. ヘッダー / グローバルナビ
   ========================================================= */

.l-header {
	position: sticky;
	top: 0;
	z-index: 100;
	background: rgba(255, 255, 255, 0.96);
	backdrop-filter: blur(6px);
	border-bottom: 1px solid var(--color-border);
}

.l-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	min-height: var(--header-height);
}

.c-logo {
	margin: 0;
	font-size: 1.25rem;
	line-height: 1.2;
	letter-spacing: 0.06em;
}

.c-logo a {
	display: inline-flex;
	align-items: baseline;
	gap: 0.5em;
	color: var(--color-primary);
	text-decoration: none;
	font-weight: 700;
}

.c-logo__sub {
	font-size: 0.6rem;
	font-weight: 400;
	letter-spacing: 0.08em;
	color: var(--color-text-muted);
}

/* --- ハンバーガー(モバイルのみ) --- */

.c-nav-toggle {
	display: inline-flex;
	flex-direction: column;
	justify-content: center;
	gap: 5px;
	width: 44px;
	height: 44px;
	padding: 0 10px;
	background: none;
	border: 0;
	cursor: pointer;
}

.c-nav-toggle__bar {
	display: block;
	height: 2px;
	background: var(--color-primary);
	transition: transform 0.25s ease, opacity 0.2s ease;
}

.c-nav-toggle[aria-expanded="true"] .c-nav-toggle__bar:nth-child(1) {
	transform: translateY(7px) rotate(45deg);
}

.c-nav-toggle[aria-expanded="true"] .c-nav-toggle__bar:nth-child(2) {
	opacity: 0;
}

.c-nav-toggle[aria-expanded="true"] .c-nav-toggle__bar:nth-child(3) {
	transform: translateY(-7px) rotate(-45deg);
}

/* --- ナビ本体 --- */

.c-gnav {
	position: absolute;
	inset-inline: 0;
	top: 100%;
	display: none;
	background: var(--color-bg);
	border-bottom: 1px solid var(--color-border);
	padding: 0.5rem var(--space-gutter) 1.5rem;
}

.c-gnav.is-open {
	display: block;
}

.c-gnav__list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.c-gnav__list li {
	margin: 0;
	border-bottom: 1px solid var(--color-border);
}

.c-gnav__list a {
	display: block;
	padding: 0.9em 0.25em;
	color: var(--color-text);
	text-decoration: none;
	font-weight: 500;
}

.c-gnav__list a:hover,
.c-gnav__list .current-menu-item > a {
	color: var(--color-primary);
}

.c-gnav__cta {
	margin-top: 1.25rem;
}

.c-gnav__cta .c-button {
	width: 100%;
}

/* --- PC --- */

@media (min-width: 1024px) {
	.c-nav-toggle {
		display: none;
	}

	.c-gnav {
		position: static;
		display: flex;
		align-items: center;
		gap: 1.75rem;
		padding: 0;
		border-bottom: 0;
		background: none;
	}

	.c-gnav__list {
		display: flex;
		align-items: center;
		gap: 1.5rem;
	}

	.c-gnav__list li {
		border-bottom: 0;
	}

	.c-gnav__list a {
		padding: 0.25em 0;
		font-size: var(--fs-small);
	}

	.c-gnav__cta {
		margin-top: 0;
	}

	.c-gnav__cta .c-button {
		width: auto;
	}
}

/* =========================================================
   5. ボタン
   ========================================================= */

.c-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5em;
	padding: 0.9em 1.75em;
	font-size: var(--fs-body);
	font-weight: 700;
	line-height: 1.4;
	text-align: center;
	text-decoration: none;
	border: 2px solid transparent;
	border-radius: var(--radius);
	cursor: pointer;
	transition: background-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}

.c-button--primary {
	background: var(--color-accent);
	color: #fff;
}

.c-button--primary:hover {
	background: var(--color-accent-dark);
	color: #fff;
	box-shadow: var(--shadow-card-hover);
}

.c-button--ghost {
	background: transparent;
	color: var(--color-primary);
	border-color: var(--color-primary);
}

.c-button--ghost:hover {
	background: var(--color-primary);
	color: #fff;
}

.c-button--on-dark {
	background: #fff;
	color: var(--color-primary);
}

.c-button--on-dark:hover {
	background: var(--color-primary-light);
	color: var(--color-primary-dark);
}

.c-button--small {
	padding: 0.6em 1.2em;
	font-size: var(--fs-small);
}

/* =========================================================
   6. セクション見出し
   ========================================================= */

.c-section-heading {
	margin-bottom: clamp(1.75rem, 4vw, 2.5rem);
}

.c-section-heading__label {
	display: block;
	margin-bottom: 0.5em;
	font-size: var(--fs-small);
	font-weight: 700;
	letter-spacing: 0.12em;
	color: var(--color-accent);
	text-transform: uppercase;
}

.c-section-heading__title {
	margin-bottom: 0.4em;
}

.c-section-heading__lead {
	margin-bottom: 0;
	color: var(--color-text-muted);
	max-width: var(--width-prose);
}

/* =========================================================
   7. カード
   ========================================================= */

.c-card-grid {
	display: grid;
	gap: 1.25rem;
	grid-template-columns: 1fr;
}

@media (min-width: 768px) {
	.c-card-grid--3 {
		grid-template-columns: repeat(3, 1fr);
	}

	.c-card-grid--2 {
		grid-template-columns: repeat(2, 1fr);
	}
}

.c-card {
	display: flex;
	flex-direction: column;
	padding: 1.75rem;
	background: var(--color-bg);
	border: 1px solid var(--color-border);
	border-radius: var(--radius);
	box-shadow: var(--shadow-card);
	transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.c-card__title {
	margin-bottom: 0.5em;
	color: var(--color-primary);
}

.c-card__text {
	flex: 1;
	margin-bottom: 1.25em;
	font-size: var(--fs-small);
	color: var(--color-text-muted);
}

.c-card__link {
	font-weight: 700;
	font-size: var(--fs-small);
	text-decoration: none;
}

.c-card__link::after {
	content: " →";
}

.c-card:has(a:hover) {
	box-shadow: var(--shadow-card-hover);
	transform: translateY(-2px);
}

/* =========================================================
   8. CTAブロック
   ========================================================= */

.c-cta {
	background: var(--gradient-flow);
	color: #fff;
	text-align: center;
}

.c-cta__title {
	color: #fff;
	margin-bottom: 0.5em;
}

.c-cta__text {
	max-width: 40em;
	margin-inline: auto;
	margin-bottom: 2em;
}

.c-cta__note {
	margin-top: 1.5em;
	margin-bottom: 0;
	font-size: var(--fs-small);
	opacity: 0.9;
}

/* =========================================================
   9. パンくず
   ========================================================= */

.c-breadcrumb {
	padding-block: 0.9rem;
	font-size: var(--fs-small);
	color: var(--color-text-muted);
	border-bottom: 1px solid var(--color-border);
}

.c-breadcrumb__list {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5em;
	list-style: none;
	margin: 0;
	padding: 0;
}

.c-breadcrumb__list li {
	margin: 0;
}

.c-breadcrumb__list li + li::before {
	content: "/";
	margin-right: 0.5em;
	color: var(--color-border);
}

/* =========================================================
   10. ページヘッダー(下層共通)
   ========================================================= */

.c-page-header {
	padding-block: clamp(2.5rem, 6vw, 4rem);
	background: var(--color-primary-light);
}

.c-page-header__title {
	margin-bottom: 0.3em;
}

.c-page-header__lead {
	margin-bottom: 0;
	color: var(--color-text-muted);
	max-width: var(--width-prose);
}

/* =========================================================
   11. 本文(投稿・固定ページの流し込み領域)
   ========================================================= */

.c-prose {
	max-width: var(--width-prose);
}

.c-prose > h2 {
	margin-top: 2.5em;
	padding-bottom: 0.4em;
	border-bottom: 2px solid var(--color-primary-light);
	color: var(--color-primary);
}

.c-prose > h3 {
	margin-top: 2em;
	color: var(--color-primary);
}

.c-prose > :first-child {
	margin-top: 0;
}

.c-prose img {
	border-radius: var(--radius);
}

/* =========================================================
   12. フッター
   ========================================================= */

.l-footer {
	padding-block: clamp(2.5rem, 6vw, 4rem) 1.5rem;
	background: var(--color-primary-dark);
	color: rgba(255, 255, 255, 0.85);
	font-size: var(--fs-small);
}

.l-footer a {
	color: rgba(255, 255, 255, 0.85);
	text-decoration: none;
}

.l-footer a:hover {
	color: #fff;
	text-decoration: underline;
}

.l-footer__top {
	display: grid;
	gap: 2rem;
	margin-bottom: 2.5rem;
}

@media (min-width: 768px) {
	.l-footer__top {
		grid-template-columns: 1fr 2fr;
		gap: 3rem;
	}
}

.l-footer__brand-name {
	margin: 0 0 0.5em;
	font-size: 1.125rem;
	color: #fff;
	letter-spacing: 0.06em;
}

.l-footer__brand-text {
	margin: 0;
	color: rgba(255, 255, 255, 0.7);
}

.c-fnav {
	display: grid;
	gap: 1.5rem;
	grid-template-columns: repeat(2, 1fr);
}

.c-fnav__list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.c-fnav__list li {
	margin-bottom: 0.6em;
}

.l-footer__bottom {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding-top: 1.5rem;
	border-top: 1px solid rgba(255, 255, 255, 0.2);
}

.l-footer__copyright {
	margin: 0;
	font-size: 0.8125rem;
	color: rgba(255, 255, 255, 0.6);
}

/* =========================================================
   13. 404 / 検索結果なし
   ========================================================= */

.c-notfound {
	text-align: center;
	padding-block: var(--space-section);
}

.c-notfound__code {
	display: block;
	font-size: clamp(3rem, 12vw, 6rem);
	font-weight: 700;
	line-height: 1;
	background: var(--gradient-flow);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

.c-notfound__links {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 1rem;
	margin-top: 2rem;
}

/* =========================================================
   15. ヒーロー / 導入の流れ / カード補助(本店のトップページから必要な分だけ)
   ========================================================= */

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

.c-hero {
	padding-block: clamp(2.5rem, 8vw, 5rem);
	background:
		radial-gradient(120% 100% at 100% 0%, var(--color-primary-light) 0%, rgba(232, 241, 248, 0) 60%),
		var(--color-bg);
	border-bottom: 1px solid var(--color-border);
}

.c-hero__inner {
	display: grid;
	gap: clamp(2rem, 5vw, 3rem);
	align-items: center;
}

@media (min-width: 1024px) {
	.c-hero__inner {
		grid-template-columns: 1.15fr 1fr;
	}
}

.c-hero__title {
	font-size: var(--fs-hero);
	margin-bottom: 0.6em;
	color: var(--color-primary);
}

.c-hero__title-accent {
	background: var(--gradient-flow);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

.c-hero__lead {
	max-width: 34em;
	margin-bottom: 2em;
	color: var(--color-text);
}

.c-hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
}

.c-hero__actions .c-button {
	flex: 1 1 auto;
}

@media (min-width: 480px) {
	.c-hero__actions .c-button {
		flex: 0 0 auto;
	}
}

.c-hero__figure {
	justify-self: center;
	width: 100%;
	max-width: 520px;
}

.c-hero__figure svg {
	display: block;
	width: 100%;
	height: auto;
}

/*
 * ロゴ画像は背景が白ではなく淡いオフホワイトのため、
 * 角丸と細い枠で「意図して置いたパネル」に見せる。
 */
.c-hero__logo {
	display: block;
	width: 100%;
	height: auto;
	border-radius: var(--radius);
	border: 1px solid var(--color-border);
	box-shadow: var(--shadow-card);
}

/* --- 導入の流れ --- */

.c-step-list {
	display: grid;
	gap: 1rem;
	list-style: none;
	margin: 0;
	padding: 0;
}

@media (min-width: 768px) {
	.c-step-list {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (min-width: 1024px) {
	.c-step-list {
		grid-template-columns: repeat(4, 1fr);
	}
}

.c-step {
	position: relative;
	margin: 0;
	padding: 1.5rem;
	background: var(--color-bg);
	border: 1px solid var(--color-border);
	border-radius: var(--radius);
}

.c-step__number {
	display: inline-block;
	margin-bottom: 0.75em;
	padding: 0.2em 0.7em;
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	color: #fff;
	background: var(--color-primary);
	border-radius: 100px;
}

.c-step__title {
	margin-bottom: 0.4em;
	font-size: var(--fs-body);
	color: var(--color-primary);
}

.c-step__text {
	margin: 0;
	font-size: var(--fs-small);
	color: var(--color-text-muted);
}

/* --- カードの補助テキスト --- */

.c-card__eyebrow {
	margin-bottom: 0.75em;
	font-size: 0.75rem;
	font-weight: 700;
	color: var(--color-accent);
}

/* --- セクション末尾のリンク --- */

.c-section-more {
	margin: 2.5rem 0 0;
	text-align: center;
}

.c-message .c-section-more {
	margin-top: 0;
	text-align: left;
}

/* =========================================================
   18. フォーム(本店のお問い合わせページ用。トライアル・購入申込フォームでも使う)
   ========================================================= */

.c-contact-block {
	max-width: var(--width-prose);
	margin-bottom: clamp(2.5rem, 6vw, 4rem);
}

.c-contact-block:last-child {
	margin-bottom: 0;
}

.c-contact-block__title {
	margin-bottom: 1em;
	padding-left: 0.75em;
	border-left: 4px solid var(--color-accent);
	color: var(--color-primary);
}

.c-contact-block__note {
	margin: 1.5rem 0 0;
	font-size: var(--fs-small);
	color: var(--color-text-muted);
}

.c-contact-block .c-step-list {
	max-width: none;
}

/* --- チェックリスト --- */

.c-checklist {
	list-style: none;
	margin: 0 0 1.5em;
	padding: 0;
}

.c-checklist li {
	position: relative;
	padding-left: 1.75em;
	margin-bottom: 0.6em;
}

.c-checklist li::before {
	content: "";
	position: absolute;
	left: 0.15em;
	top: 0.55em;
	width: 0.5em;
	height: 0.9em;
	border-right: 3px solid var(--color-accent);
	border-bottom: 3px solid var(--color-accent);
	transform: rotate(40deg);
}

/* --- フォーム --- */

.c-form-wrap {
	max-width: 760px;
	padding: clamp(1.5rem, 5vw, 2.5rem);
	background: var(--color-bg);
	border: 1px solid var(--color-border);
	border-radius: var(--radius);
}

.c-form__row {
	margin-bottom: 1.75rem;
}

.c-form__label {
	display: flex;
	align-items: center;
	gap: 0.75em;
	margin-bottom: 0.5em;
	font-weight: 700;
}

.c-form__badge {
	display: inline-block;
	padding: 0.15em 0.6em;
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	color: var(--color-text-muted);
	background: var(--color-bg-alt);
	border: 1px solid var(--color-border);
	border-radius: 3px;
}

.c-form__badge--required {
	color: #fff;
	background: #c0392b;
	border-color: #c0392b;
}

.c-form__note {
	display: block;
	margin-top: 0.4em;
	font-size: var(--fs-small);
	color: var(--color-text-muted);
}

/* 入力欄。Contact Form 7 が出力する要素にまとめて当てる。 */
.c-form input[type="text"],
.c-form input[type="email"],
.c-form input[type="tel"],
.c-form select,
.c-form textarea {
	width: 100%;
	padding: 0.75em 0.9em;
	font-family: inherit;
	font-size: 1rem; /* 16px未満にするとiOSで拡大されるため下げない */
	line-height: 1.6;
	color: var(--color-text);
	background: var(--color-bg);
	border: 1px solid var(--color-border);
	border-radius: var(--radius);
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.c-form input:focus,
.c-form select:focus,
.c-form textarea:focus {
	border-color: var(--color-accent);
	box-shadow: 0 0 0 3px rgba(0, 184, 169, 0.18);
	outline: none;
}

.c-form textarea {
	resize: vertical;
	min-height: 10em;
}

.c-form ::placeholder {
	color: #9aa4ae;
}

/* --- 同意チェック --- */

.c-form__row--consent {
	padding: 1.25rem;
	background: var(--color-bg-alt);
	border-radius: var(--radius);
}

.c-form__row--consent .wpcf7-list-item {
	margin: 0;
}

.c-form__row--consent label {
	display: flex;
	align-items: flex-start;
	gap: 0.6em;
	cursor: pointer;
}

.c-form__row--consent input[type="checkbox"] {
	flex: 0 0 auto;
	width: 1.15em;
	height: 1.15em;
	margin-top: 0.3em;
	accent-color: var(--color-accent);
}

/* --- Cloudflare Turnstile --- */

/*
 * ウィジェットは Cloudflare の iframe。中身のスタイルは触れないため、
 * こちら側では配置と余白だけを整える。
 * size:flexible を指定しているので幅は親に追従するが、
 * iframe 側に min-width: 300px があり、狭い画面ではそれ以上縮まない。
 */
.c-form__row--turnstile {
	display: flex;
	justify-content: center;
}

.c-form__row--turnstile .wpcf7-turnstile {
	max-width: 100%;
}

/* 検証エラー時の文言は中央寄せの下に出す */
.c-form__row--turnstile .wpcf7-not-valid-tip {
	text-align: center;
}

/* --- 送信ボタン --- */

.c-form__actions {
	margin-top: 2rem;
	text-align: center;
}

.c-form__actions .c-button {
	min-width: 16em;
}

/* --- Contact Form 7 のメッセージ表示 --- */

.wpcf7 form .wpcf7-response-output {
	margin: 1.5rem 0 0;
	padding: 1em 1.25em;
	font-size: var(--fs-small);
	border-width: 2px;
	border-radius: var(--radius);
}

.wpcf7 form.sent .wpcf7-response-output {
	border-color: var(--color-accent);
	background: rgba(0, 184, 169, 0.08);
}

.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.unaccepted .wpcf7-response-output,
.wpcf7 form.failed .wpcf7-response-output {
	border-color: #c0392b;
	background: rgba(192, 57, 43, 0.06);
}

.wpcf7-not-valid-tip {
	display: block;
	margin-top: 0.4em;
	font-size: var(--fs-small);
	font-weight: 700;
	color: #c0392b;
}

.c-form input.wpcf7-not-valid,
.c-form textarea.wpcf7-not-valid,
.c-form select.wpcf7-not-valid {
	border-color: #c0392b;
}

.wpcf7-spinner {
	margin-left: 0.75em;
}

.c-form__fallback {
	padding: 1.25rem;
	background: var(--color-bg-alt);
	border-radius: var(--radius);
}

/* --- フォーム下の注意書き --- */

.c-contact-notes {
	max-width: 760px;
	margin: 1.75rem 0 0;
	padding-left: 1.2em;
	font-size: var(--fs-small);
	color: var(--color-text-muted);
}

/* =========================================================
   19. モーションを減らす設定への配慮
   ========================================================= */

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

	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		transition-duration: 0.01ms !important;
	}
}

/* =========================================================
   20. 製品LP(販売サイト固有)
   ========================================================= */

/* --- キーボードのキー --- */

kbd {
	display: inline-block;
	min-width: 1.8em;
	padding: 0.05em 0.45em;
	font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
	font-size: 0.85em;
	line-height: 1.5;
	text-align: center;
	color: var(--color-text);
	background: var(--color-bg);
	border: 1px solid var(--color-border);
	border-bottom-width: 2px;
	border-radius: 4px;
	white-space: nowrap;
}

/* --- ヒーロー(製品) --- */

.c-hero--product .c-hero__title {
	font-size: clamp(1.625rem, 4.2vw, 2.625rem);
}

.c-hero__eyebrow {
	margin-bottom: 0.75em;
	font-size: var(--fs-small);
	font-weight: 700;
	letter-spacing: 0.06em;
	color: var(--color-primary); /* アクセント色は白地で4.5:1に届かないため、文字には使わない */
}

.c-hero__note {
	margin: 1rem 0 0;
	font-size: var(--fs-small);
	color: var(--color-text-muted);
}

.c-hero__media {
	margin: 0;
	width: 100%;
}

@media (min-width: 1024px) {
	/* 動画を大きく見せるため、本店のヒーローより右列を広げる */
	.c-hero--product .c-hero__inner {
		grid-template-columns: 1fr 1.25fr;
	}
}

.c-hero__video {
	display: block;
	width: 100%;
	height: auto;
	/*
	 * 動画(1440×810)は下の2割ほどが空白。上端に合わせて下を切り、表の部分を大きく見せる。
	 * 690px の位置は件数表示(「1 - 16(16件中)」)のすぐ下。
	 */
	aspect-ratio: 1440 / 690;
	object-fit: cover;
	object-position: top;
	background: var(--color-bg);
	border: 1px solid var(--color-border);
	border-radius: var(--radius);
	box-shadow: var(--shadow-card-hover);
}

/* --- 課題・解決の本文 --- */

.c-lp-text {
	max-width: var(--width-prose);
}

.c-lp-text > :last-child {
	margin-bottom: 0;
}

/* --- 機能(画像と文章を左右交互) --- */

.c-feature-list {
	display: grid;
	gap: clamp(2.5rem, 6vw, 4rem);
}

.c-feature {
	display: grid;
	gap: 1.25rem;
	align-items: center;
}

@media (min-width: 1024px) {
	.c-feature {
		grid-template-columns: 5fr 7fr;
		gap: 3rem;
	}

	/* 偶数番目は画像を左に置く。列の幅も入れ替え、画像側を常に広くする */
	.c-feature:nth-child(even) {
		grid-template-columns: 7fr 5fr;
	}

	.c-feature:nth-child(even) .c-feature__body {
		order: 2;
	}

	.c-feature.c-feature--text {
		grid-template-columns: 1fr;
	}
}

.c-feature__title {
	margin-bottom: 0.6em;
	padding-left: 0.75em;
	border-left: 4px solid var(--color-accent);
	color: var(--color-primary);
}

.c-feature__text {
	margin: 0;
}

.c-feature--text .c-feature__body {
	max-width: var(--width-prose);
}

.c-feature__figure {
	margin: 0;
}

/* スクリーンショット。クリックで等倍の画像を開く */
.c-shot {
	display: block;
	border-radius: var(--radius);
	border: 1px solid var(--color-border);
	box-shadow: var(--shadow-card);
	overflow: hidden;
	background: var(--color-bg);
	transition: box-shadow 0.2s ease;
}

.c-shot:hover {
	box-shadow: var(--shadow-card-hover);
}

.c-shot img {
	display: block;
	width: 100%;
	height: auto;
}

/* --- 表(ショートカット・動作環境) --- */

.c-lp-table {
	max-width: 860px;
}

.c-lp-table table {
	font-size: var(--fs-body);
	background: var(--color-bg);
}

.c-lp-table th[scope="row"] {
	width: 7.5em;
	white-space: normal;
}

/* スマホではキーの組み合わせを折り返してよい(説明の列が潰れないように) */
.c-lp-table__key {
	width: 45%;
}

@media (min-width: 768px) {
	.c-lp-table th[scope="row"] {
		width: 11em;
	}

	.c-lp-table__key {
		width: 16em;
		white-space: nowrap;
	}
}

.c-lp-table__note {
	max-width: 860px;
	margin: 1rem 0 0;
	font-size: var(--fs-small);
	color: var(--color-text-muted);
}

/* --- 料金 --- */

.c-plan-grid {
	display: grid;
	gap: 1.25rem;
	max-width: 860px;
}

@media (min-width: 768px) {
	.c-plan-grid {
		grid-template-columns: repeat(2, 1fr);
		align-items: stretch;
	}
}

.c-plan {
	display: flex;
	flex-direction: column;
	padding: 1.75rem;
	background: var(--color-bg);
	/* 両プランとも推奨のため、どちらも同じ強調枠にする（2026-09-19 ユーザー判断） */
	border: 2px solid var(--color-accent);
	border-radius: var(--radius);
	box-shadow: var(--shadow-card);
}

.c-plan__name {
	margin-bottom: 0.75em;
	color: var(--color-primary);
}

.c-plan__price {
	margin: 0;
	line-height: 1.2;
}

.c-plan__amount {
	font-size: clamp(2rem, 5vw, 2.5rem);
	font-weight: 700;
	letter-spacing: 0.01em;
	color: var(--color-text);
}

.c-plan__unit {
	font-size: var(--fs-small);
	color: var(--color-text-muted);
}

.c-plan__tax {
	margin: 0.4em 0 1.25em;
	font-size: var(--fs-small);
	color: var(--color-text-muted);
}

.c-plan__badge {
	align-self: flex-start;
	margin: 0 0 0.5em;
	padding: 0.3em 0.9em;
	font-size: var(--fs-small);
	font-weight: 700;
	color: #fff;
	background: var(--color-primary);
	border-radius: 100px;
}

.c-plan__desc {
	margin-bottom: 1.25em;
	font-size: var(--fs-small);
	color: var(--color-text-muted);
}

.c-plan__list {
	margin: auto 0 0;
	padding-top: 1.25em;
	border-top: 1px solid var(--color-border);
	font-size: var(--fs-small);
}

.c-plan__list li:last-child {
	margin-bottom: 0;
}

.c-plan-common {
	max-width: 860px;
	margin-top: 1.25rem;
	padding: 1.5rem 1.75rem;
	background: var(--color-bg-alt);
	border-radius: var(--radius);
}

.c-plan-common__title {
	margin-bottom: 0.75em;
	font-size: var(--fs-body);
	color: var(--color-primary);
}

.c-plan-common .c-checklist {
	margin: 0;
	font-size: var(--fs-small);
}

.c-plan-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	margin-top: 2rem;
}

.c-plan-actions .c-button {
	flex: 1 1 auto;
}

@media (min-width: 480px) {
	.c-plan-actions .c-button {
		flex: 0 0 auto;
	}
}

.c-plan-quote {
	margin: 1.25rem 0 0;
	font-size: var(--fs-small);
	color: var(--color-text-muted);
}

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

.c-faq {
	max-width: var(--width-prose);
	border-top: 1px solid var(--color-border);
}

.c-faq__item {
	padding-block: 1.5rem;
	border-bottom: 1px solid var(--color-border);
}

.c-faq__q {
	position: relative;
	margin-bottom: 0.5em;
	padding-left: 2em;
	font-size: var(--fs-body);
	color: var(--color-primary);
}

.c-faq__a {
	position: relative;
	margin: 0;
	padding-left: 2em;
}

.c-faq__q::before,
.c-faq__a::before {
	position: absolute;
	left: 0;
	top: 0;
	font-weight: 700;
}

.c-faq__q::before {
	content: "Q.";
	color: var(--color-primary);
}

.c-faq__a::before {
	content: "A.";
	color: var(--color-accent-dark);
}

/* --- 追従CTA(モバイル) --- */

.c-sticky-cta {
	display: none;
}

@media (max-width: 767px) {
	.c-sticky-cta {
		position: fixed;
		inset-inline: 0;
		bottom: 0;
		z-index: 90;
		display: block;
		padding: 0.6rem var(--space-gutter) calc(0.6rem + env(safe-area-inset-bottom));
		background: rgba(255, 255, 255, 0.96);
		border-top: 1px solid var(--color-border);
		box-shadow: 0 -4px 16px rgba(16, 34, 51, 0.08);
	}

	.c-sticky-cta .c-button {
		width: 100%;
	}

	/* 追従バーでフッターの末尾が隠れないようにする */
	.has-sticky-cta .l-footer {
		padding-bottom: calc(1.5rem + 72px);
	}
}

/* FAQ抜粋の下のリンクは、左寄せの一覧に合わせて左に置く */
.c-faq + .c-section-more {
	text-align: left;
}

/* =========================================================
   21. フォームのページ(トライアル申込・ダウンロード案内)
   ========================================================= */

/* --- 申込ページ上部: 試用のしくみ + 動作環境 --- */

.c-trial-info {
	display: grid;
	gap: clamp(2rem, 5vw, 3rem);
}

@media (min-width: 1024px) {
	.c-trial-info {
		grid-template-columns: 1fr 1fr;
		align-items: start;
	}
}

.c-trial-info .c-contact-block {
	max-width: none;
	margin-bottom: 0;
}

/* --- 任意項目を畳む --- */

.c-form__optional {
	margin: 0 0 1.75rem;
	border: 1px solid var(--color-border);
	border-radius: var(--radius);
}

.c-form__optional > summary {
	display: flex;
	align-items: center;
	gap: 0.75em;
	padding: 1rem 1.25rem;
	font-weight: 700;
	color: var(--color-primary);
	cursor: pointer;
	list-style: none;
}

.c-form__optional > summary::-webkit-details-marker {
	display: none;
}

/* 開閉の目印(下向き→上向きの山形) */
.c-form__optional > summary::after {
	content: "";
	width: 0.5em;
	height: 0.5em;
	margin-left: auto;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: translateY(-25%) rotate(45deg);
	transition: transform 0.15s ease;
}

.c-form__optional[open] > summary::after {
	transform: translateY(25%) rotate(-135deg);
}

/* 狭い画面で「任意」のバッジが縦に折れないようにする */
.c-form__optional > summary .c-form__badge {
	flex: 0 0 auto;
	white-space: nowrap;
}

.c-form__optional-body {
	padding: 0.25rem 1.25rem 0;
}

.c-form__row[hidden] {
	display: none;
}

/* --- ダウンロードボタン --- */

.c-download {
	max-width: 760px;
}

.c-download__button {
	min-width: 18em;
}

.c-download__note {
	margin: 1rem 0 0;
	font-size: var(--fs-small);
	color: var(--color-text-muted);
}

/* --- 導入の手順(縦に番号付き) --- */

.c-howto {
	max-width: 860px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.c-howto__item {
	display: flex;
	gap: 1rem;
	padding: 1.25rem 1.5rem;
	background: var(--color-bg);
	border: 1px solid var(--color-border);
	border-radius: var(--radius);
}

.c-howto__item + .c-howto__item {
	margin-top: 0.75rem;
}

.c-howto__number {
	flex: 0 0 auto;
	display: grid;
	place-items: center;
	width: 2rem;
	height: 2rem;
	font-weight: 700;
	color: #fff;
	background: var(--color-primary);
	border-radius: 50%;
}

.c-howto__title {
	margin: 0.2em 0 0.4em;
	font-size: var(--fs-body);
	color: var(--color-primary);
}

.c-howto__text {
	margin: 0;
	font-size: var(--fs-small);
}

/* --- フォームの枠(販売サイト) ---
 * 白い背景の上でもフォームの範囲がひと目で分かるよう、枠を濃くし、中を薄い青にする。
 * 入力欄は白のまま残し、「ここに書く」場所を目立たせる(2026-09-19 ユーザー指示)。
 */
.c-form-wrap {
	background: var(--color-primary-light);
	border: 2px solid rgba(11, 79, 138, 0.45);
}

.c-form input[type="text"],
.c-form input[type="email"],
.c-form input[type="tel"],
.c-form select,
.c-form textarea {
	border-color: #b3c2d1;
}

.c-form-wrap .c-form__optional,
.c-form-wrap .c-form__row--consent {
	background: var(--color-bg);
}

.c-form-wrap .c-form__optional {
	border-color: #b3c2d1;
}

/* --- 余白を詰めたセクション(ダウンロード案内など、縦に長くなりやすいページ用) --- */

.l-section--compact {
	padding-block: clamp(2rem, 5vw, 3rem);
}

.l-section--compact .c-section-heading {
	margin-bottom: 1.25rem;
}

.c-page-header--compact {
	padding-block: clamp(1.75rem, 4vw, 2.5rem);
}

/* ダウンロードボタンはページ見出しの中に置く(最初に目に入る位置。縦の長さも詰まる) */
.c-page-header .c-download {
	margin-top: 1.5rem;
}

.c-page-header .c-form__fallback {
	background: var(--color-bg);
}

/* =========================================================
   22. 販売サイトのコントラストと余白(本店の値から意図して変えている)

   2026-09-19 ユーザー指示:「淡い背景に淡い枠で、全体にぼんやりして分かりにくい」
   「メッセージの間の空白が広すぎる」。
   1〜19節は本店の写しのまま残し、販売サイトで変える値だけをここで上書きする
   (本店のトークンを更新して写し直すときに、この節だけ残せばよいように)。
   ========================================================= */

:root {
	--color-text-muted: #3f4a55;  /* 本店 #5a6570。補足の文字も読める濃さにする */
	--color-bg-alt: #edf1f6;      /* 本店 #f5f7fa。白との境目が分かる濃さにする */
	--color-border: #aeb9c5;      /* 本店 #d9dee4。枠・罫線をはっきりさせる */
	--space-section: clamp(2.5rem, 5vw, 4rem); /* 本店 clamp(3rem, 8vw, 6rem) */
}

/* 見出しと本文、段落の間を少し詰める */
.c-section-heading {
	margin-bottom: clamp(1.25rem, 3vw, 1.75rem);
}

p,
ul,
ol,
dl,
table,
figure {
	margin-bottom: 1.1em;
}

/* 表の見出しセルは背景を一段濃くし、値のセルと区別する */
th {
	background: #dde5ee;
	color: var(--color-text);
}

/* ページ見出しの帯(淡い青)と、下のセクションの境目 */
.c-page-header {
	border-bottom: 1px solid var(--color-border);
}

/* 交互の灰色の帯の上下にも罫線を引き、白い帯との境目をはっきりさせる */
.l-section--alt {
	border-block: 1px solid #d3dbe4;
}

/* 灰色の帯の上に置く白いカード類は、影を少し強める */
.l-section--alt .c-step,
.l-section--alt .c-plan,
.l-section--alt .c-howto__item {
	box-shadow: 0 1px 4px rgba(16, 34, 51, 0.12);
}

/* フォームの枠はさらに濃く */
.c-form-wrap {
	border-color: var(--color-primary);
}

.c-form input[type="text"],
.c-form input[type="email"],
.c-form input[type="tel"],
.c-form select,
.c-form textarea,
.c-form-wrap .c-form__optional {
	border-color: #8c9bab;
}

/* 同意欄は白地に枠を付け、薄い青の中で埋もれないようにする */
.c-form-wrap .c-form__row--consent {
	border: 1px solid #8c9bab;
}

/* --- 導入の手順の画面(画像があるときだけ出る) --- */

.c-howto__body {
	flex: 1 1 auto;
	min-width: 0;
}

.c-howto__figure {
	margin: 0.9rem 0 0;
}

.c-howto__figure img {
	border: 1px solid var(--color-border);
	border-radius: var(--radius);
}

/* --- 文字の大きさ(2026-09-19 ユーザー指示「全体に小さい。1〜2ポイント大きく」) ---
 * 本文 16px → 18px、補足 14px → 16px。見出しも一段上げる。
 */
:root {
	--fs-body: 1.125rem;
	--fs-small: 1rem;
	--fs-h2: clamp(1.375rem, 3vw, 1.875rem);
	--fs-h3: clamp(1.25rem, 2.5vw, 1.5rem);
}

.c-form__badge {
	font-size: 0.75rem;
}

.c-step__number {
	font-size: 0.8125rem;
}

/* --- 機能の行を2色で交互に塗り分ける(2026-09-19 ユーザー指示) ---
 * 画像と説明が左右に入れ替わる行の区切りを、背景の色でも分かるようにする。
 */
.c-feature-list {
	gap: 1rem;
}

.c-feature {
	padding: clamp(1.25rem, 3vw, 2rem);
	background: var(--color-bg);
	border: 1px solid var(--color-border);
	border-radius: var(--radius);
}

.c-feature:nth-child(even) {
	background: var(--color-primary-light);
}

/* --- 見積書のダウンロード(2026-09-19 ユーザー指示「もっと大きく」) --- */
.c-plan-quote {
	font-size: var(--fs-body);
	color: var(--color-text);
}

.c-plan-quote a {
	display: inline-block;
	margin-top: 0.6rem;
	padding: 0.7em 1.4em;
	font-size: 1.125rem;
	font-weight: 700;
	color: var(--color-primary);
	text-decoration: none;
	background: var(--color-bg);
	border: 2px solid var(--color-primary);
	border-radius: var(--radius);
}

.c-plan-quote a:hover {
	color: #fff;
	background: var(--color-primary);
}