@charset "UTF-8";
/* ==========================================================================
   BlueStudio 共通スタイル

   目次
   1. 変数（デザイントークン）
   2. リセット・ベース
   3. ユーティリティ
   4. レイアウト（l-）… コンテナ・セクション・角丸パネル
   5. ヘッダー・ドロップダウン・SPメニュー
   6. フッター
   7. 部品（c-）
   7-2. 部品（TOPと下層ページで共通）… お悩みカード・実績カードの並び
   7-3. 下層ページの部品 … ページタイトル・見出し・カード・表・箇条書き
   8. CTA（p-cta）… 複数ページで使う
   9. 予備テンプレート（index.php）
   10. 動きを減らす設定への対応

   ブレイクポイント（モバイルファースト）
   - 〜767px    … SP（デザイン 390px）
   - 768px〜    … タブレット
   - 1024px〜   … PCレイアウト（グローバルナビ表示）
   - 1440px     … PCデザインの幅（これ以上は中央寄せ）

   流体サイズ（clamp）は「390px で SP の値 → 1440px で PC の値」になるように
   calc(最小 + 差 * (100vw - 390px) / 1050) で書いています。
   ========================================================================== */


/* ==========================================================================
   1. 変数（デザイントークン）
   ========================================================================== */
:root {
	/* 色 */
	--c-navy-900: #032C45;
	--c-ink: #23343D;
	--c-ink-muted: #4F646B;
	--c-ink-subtle: #607D85;
	--c-blue-700: #0B528A;
	--c-blue-650: #0E5B96;
	--c-blue-600: #116AA9;
	--c-blue-500: #1A7DBE;
	--c-sky-400: #51BAE5;
	--c-sky-200: #BFE3F6;
	--c-sky-100: #DCEFFA;
	--c-surface: #FFFFFF;
	--c-surface-soft: #EEF5F9;
	--c-surface-gray: #F3F5F7;
	--c-line: #D7E6EE;
	--c-line-strong: #BFD9E7;
	--c-dot: #C6DEEB;
	--c-placeholder: #D9E2E6;
	--c-band-from: #0A4F8A;
	--c-band-mid: #0B5591;
	--c-band-to: #08477D;
	--c-on-band-lead: #E6F0F7;
	--c-on-band-label: #BFD9EA;
	--c-on-band-line: #7CC3EA;
	--c-on-blue-muted: #EAF4FA;
	--c-footer-from: #021F31;
	--c-footer-to: #06385A;
	--c-footer-link: #DCE7EC;
	--c-danger: #B42318; /* フォームのエラー */

	/* 書体 */
	--ff-body: "Noto Sans JP", "Hiragino Sans", "Yu Gothic", sans-serif;
	--ff-display: "Zen Kaku Gothic New", "Hiragino Sans", "Yu Gothic", sans-serif;
	--ff-en: "Jost", "Futura", "Century Gothic", sans-serif;

	/* 影 */
	--shadow-card: 0 10px 30px rgba(3, 44, 69, 0.06);
	--shadow-card-hover: 0 16px 40px rgba(3, 44, 69, 0.12);
	--shadow-icon: 0 8px 18px rgba(17, 106, 169, 0.14);

	/* 動き */
	--ease-out: cubic-bezier(0.22, 0.61, 0.36, 1);

	/* 余白・サイズ（SP → PC で流体） */
	--sec-py: clamp(72px, calc(72px + 56 * (100vw - 390px) / 1050), 128px);
	--sec-px: clamp(20px, calc(20px + 100 * (100vw - 390px) / 1050), 120px);
	--stack-gap: clamp(36px, calc(36px + 20 * (100vw - 390px) / 1050), 56px);
	--panel-inset: clamp(12px, calc(12px + 28 * (100vw - 390px) / 1050), 40px);
	--panel-py: clamp(64px, calc(64px + 48 * (100vw - 390px) / 1050), 112px);
	--panel-px: clamp(20px, calc(20px + 60 * (100vw - 390px) / 1050), 80px);
	--panel-radius: clamp(16px, calc(16px + 8 * (100vw - 390px) / 1050), 24px);

	/* ヘッダー */
	--header-h: 64px;
	--admin-bar-h: 0px;
}

@media (min-width: 1024px) {
	:root {
		--header-h: 96px;
	}
}

/* 管理バー表示中（ログイン時）はヘッダーとSPメニューを下げる */
.admin-bar {
	--admin-bar-h: 46px;
}

@media (min-width: 783px) {
	.admin-bar {
		--admin-bar-h: 32px;
	}
}


/* ==========================================================================
   2. リセット・ベース
   ========================================================================== */
*,
*::before,
*::after {
	box-sizing: border-box;
}

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

body {
	margin: 0;
	background: var(--c-surface);
	color: var(--c-ink);
	font-family: var(--ff-body);
	font-size: 16px;
	line-height: 1.9;
	letter-spacing: 0.03em;
	-webkit-font-smoothing: antialiased;
	overflow-x: clip;
}

h1,
h2,
h3,
h4,
p,
ul,
ol,
dl,
dd,
figure {
	margin: 0;
}

ul,
ol {
	padding: 0;
	list-style: none;
}

img,
svg {
	display: block;
	max-width: 100%;
}

img {
	height: auto;
}

button {
	font: inherit;
	color: inherit;
}

a {
	color: var(--c-navy-900);
	transition: color 0.2s, background-color 0.2s, box-shadow 0.2s, transform 0.2s;
}

a:hover {
	color: var(--c-blue-600);
}

a:focus-visible,
button:focus-visible,
[tabindex]:focus-visible {
	outline: 2px solid var(--c-sky-400);
	outline-offset: 2px;
}

/* アンカーリンクで飛んだとき、固定ヘッダーに隠れないように */
section[id] {
	scroll-margin-top: calc(var(--header-h) + var(--admin-bar-h) + 8px);
}

@media (min-width: 1024px) {
	section[id] {
		scroll-margin-top: calc(112px + var(--admin-bar-h));
	}
}

/* SPメニューを開いている間は、後ろのページをスクロールさせない */
html.is-menu-open {
	overflow: hidden;
}


/* ==========================================================================
   3. ユーティリティ
   ========================================================================== */
.u-skip-link {
	position: absolute;
	top: -100px;
	left: 8px;
	z-index: 100;
	padding: 8px 16px;
	border-radius: 8px;
	background: var(--c-navy-900);
	color: #FFFFFF;
	text-decoration: none;
}

.u-skip-link:focus {
	top: 8px;
	color: #FFFFFF;
}

/* アイコン用グラデーション定義（見た目には出さない） */
.u-svg-defs {
	position: absolute;
	width: 0;
	height: 0;
	overflow: hidden;
}

/* 中央寄せ */
.u-center {
	display: flex;
	justify-content: center;
}

/* PCだけ改行 */
.u-pc-only {
	display: none;
}

@media (min-width: 1024px) {
	.u-pc-only {
		display: inline;
	}
}

.u-visually-hidden {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}


/* ==========================================================================
   4. レイアウト
   ========================================================================== */
.l-main {
	display: block;
}

/* 中身の最大幅 1200px。縦に並ぶ要素の間は --stack-gap */
.l-container {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: var(--stack-gap);
	max-width: 1200px;
	margin-inline: auto;
}

.l-container--narrow {
	max-width: 960px;
}

/* 下層ページのセクション（要素の間を少しせまく） */
.l-container--sub {
	gap: clamp(28px, calc(28px + 12 * (100vw - 390px) / 1050), 40px);
}

/* 標準のセクション */
.l-section {
	position: relative;
	overflow: hidden;
	padding: var(--sec-py) var(--sec-px);
	background: var(--c-surface);
}

/* グレーの面 */
.l-section--gray {
	background: var(--c-surface-gray);
}

/* 濃い青の帯（Approach・Works） */
.l-section--band {
	background:
		radial-gradient(900px 520px at 90% 0%, rgba(81, 186, 229, 0.2), rgba(81, 186, 229, 0) 65%),
		linear-gradient(160deg, var(--c-band-from) 0%, var(--c-band-mid) 55%, var(--c-band-to) 100%);
	color: var(--c-on-band-lead);
}

/* 左右に余白を取った角丸パネル（Area・FAQ） */
.l-panel-section {
	padding: clamp(56px, calc(56px + 64 * (100vw - 390px) / 1050), 120px) var(--panel-inset) 0;
	background: var(--c-surface);
}

.l-panel-section--flush-top {
	padding-top: 0;
}

.l-panel {
	position: relative;
	overflow: hidden;
	padding: var(--panel-py) var(--panel-px);
	border-radius: var(--panel-radius);
	background: var(--c-surface-gray);
}

/* 白い角丸パネル */
.l-panel--white {
	background: #FFFFFF;
}


/* ==========================================================================
   5. ヘッダー
   ========================================================================== */
.l-header {
	position: sticky;
	top: var(--admin-bar-h);
	z-index: 70;
	display: flex;
	align-items: center;
	justify-content: space-between;
	height: var(--header-h);
	padding: 0 8px 0 20px;
	border-bottom: 1px solid var(--c-surface-soft);
	background: rgba(255, 255, 255, 0.96);
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
}

.l-header__logo {
	display: flex;
	align-items: center;
	flex-shrink: 0;
}

.l-header__logo img {
	width: auto;
	height: 30px;
}

/* PCのナビはSPでは隠す */
.l-header__nav {
	display: none;
}

.l-header__sp {
	display: flex;
	align-items: center;
	gap: 4px;
}

.l-header__sp-cta {
	display: inline-flex;
	align-items: center;
	height: 44px;
	padding: 0 16px;
	border: 1px solid var(--c-blue-600);
	border-radius: 8px;
	background: var(--c-blue-600);
	color: #FFFFFF;
	font-size: 14px;
	font-weight: 700;
	text-decoration: none;
}

.l-header__sp-cta:hover {
	background: #FFFFFF;
	color: var(--c-blue-600);
}

@media (min-width: 1024px) {
	.l-header {
		padding: 0 clamp(24px, calc(24px + 32 * (100vw - 1024px) / 416), 56px);
		background: rgba(255, 255, 255, 0.94);
	}

	.l-header__logo img {
		height: 42px;
	}

	.l-header__nav {
		display: flex;
		align-items: center;
		gap: clamp(18px, calc(18px + 18 * (100vw - 1024px) / 416), 36px);
		font-size: 15px;
	}

	.l-header__sp {
		display: none;
	}
}

.l-header__link {
	display: inline-flex;
	align-items: center;
	color: var(--c-navy-900);
	font-weight: 500;
	text-decoration: none;
	white-space: nowrap;
}

.l-header__link:hover {
	color: var(--c-blue-600);
}

/* 選択中（いま開いているページ） */
.l-header__link[aria-current="page"] {
	color: var(--c-blue-600);
	font-weight: 700;
}

/* --- サービスのドロップダウン（ホバー・キーボード操作で開く） --- */
.c-nav-dd {
	position: relative;
	display: inline-flex;
	align-items: center;
}

.c-nav-dd__caret {
	flex-shrink: 0;
	width: 12px;
	height: 12px;
	margin-left: 6px;
	stroke-width: 2.6;
	transition: transform 0.3s ease;
}

.c-nav-dd__panel {
	position: absolute;
	top: 100%;
	left: 50%;
	z-index: 60;
	padding-top: 16px;
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transform: translate(-50%, 6px);
	transition: opacity 0.25s ease, transform 0.3s var(--ease-out), visibility 0s linear 0.3s;
}

.c-nav-dd:hover .c-nav-dd__panel,
.c-nav-dd:focus-within .c-nav-dd__panel {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	transform: translate(-50%, 0);
	transition: opacity 0.25s ease, transform 0.3s var(--ease-out), visibility 0s;
}

.c-nav-dd:hover .c-nav-dd__caret,
.c-nav-dd:focus-within .c-nav-dd__caret {
	transform: rotate(180deg);
}

.c-nav-dd__box {
	display: flex;
	flex-direction: column;
	gap: 2px;
	width: 300px;
	padding: 8px;
	border: 1px solid var(--c-line);
	border-radius: 8px;
	background: #FFFFFF;
	box-shadow: 0 16px 40px rgba(3, 44, 69, 0.14);
	text-align: left;
}

.c-nav-dd__item {
	display: flex;
	flex-direction: column;
	gap: 2px;
	padding: 12px 16px;
	border-radius: 6px;
	color: var(--c-navy-900);
	text-decoration: none;
}

a.c-nav-dd__item:hover {
	background: var(--c-surface-gray);
	color: var(--c-blue-600);
}

.c-nav-dd__item--soon {
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	color: var(--c-ink-subtle);
	cursor: default;
}

.c-nav-dd__text {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.c-nav-dd__label {
	font-size: 15px;
	font-weight: 700;
	line-height: 1.5;
}

.c-nav-dd__desc {
	color: var(--c-ink-muted);
	font-size: 12px;
	font-weight: 400;
	line-height: 1.5;
}

.c-nav-dd__item--soon .c-nav-dd__desc,
.c-sp-menu__sub-link--soon .c-nav-dd__desc {
	color: inherit;
}

.c-badge-soon {
	flex-shrink: 0;
	padding: 3px 10px;
	border-radius: 999px;
	background: var(--c-ink-subtle);
	color: #FFFFFF;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.06em;
	line-height: 1.5;
}

/* --- ハンバーガーボタン（2本線 → ×） --- */
.c-hamburger {
	position: relative;
	display: block;
	width: 44px;
	height: 44px;
	padding: 0;
	border: none;
	background: transparent;
	color: var(--c-navy-900);
	cursor: pointer;
}

.c-hamburger__bar {
	position: absolute;
	height: 2px;
	border-radius: 1px;
	background: currentColor;
	transition:
		transform 0.4s var(--ease-out),
		top 0.4s var(--ease-out),
		left 0.4s var(--ease-out),
		width 0.4s var(--ease-out);
}

.c-hamburger__bar:nth-child(1) {
	top: 17px;
	left: 14px;
	width: 16px;
}

.c-hamburger__bar:nth-child(2) {
	top: 25px;
	left: 18px;
	width: 12px;
}

.c-hamburger[aria-expanded="true"] .c-hamburger__bar {
	top: 21px;
	left: 12px;
	width: 20px;
}

.c-hamburger[aria-expanded="true"] .c-hamburger__bar:nth-child(1) {
	transform: rotate(45deg);
}

.c-hamburger[aria-expanded="true"] .c-hamburger__bar:nth-child(2) {
	transform: rotate(-45deg);
}

/* --- SPメニュー（ふわっと表示＋項目が時間差で出る） --- */
.c-sp-menu {
	position: fixed;
	top: calc(var(--header-h) + var(--admin-bar-h));
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 60;
	display: flex;
	flex-direction: column;
	gap: 28px;
	padding: 8px 20px 40px;
	overflow-y: auto;
	overscroll-behavior: contain;
	background: #FFFFFF;
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transform: translateY(-10px);
	transition:
		opacity 0.3s ease,
		transform 0.45s var(--ease-out),
		visibility 0s linear 0.45s;
}

.c-sp-menu.is-open {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	transform: translateY(0);
	transition:
		opacity 0.3s ease,
		transform 0.45s var(--ease-out),
		visibility 0s;
}

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

.c-sp-menu__nav {
	display: flex;
	flex-direction: column;
}

.c-sp-menu__item {
	border-bottom: 1px solid var(--c-line);
	opacity: 0;
	transform: translateY(-8px);
	transition: opacity 0.35s ease, transform 0.45s var(--ease-out);
	transition-delay: 0ms;
}

.c-sp-menu.is-open .c-sp-menu__item {
	opacity: 1;
	transform: translateY(0);
	transition-delay: calc(var(--i, 0) * 45ms);
}

.c-sp-menu__row {
	display: flex;
	align-items: stretch;
}

.c-sp-menu__link {
	display: flex;
	flex-grow: 1;
	align-items: center;
	justify-content: space-between;
	min-height: 60px;
	color: var(--c-navy-900);
	font-size: 16px;
	font-weight: 700;
	text-decoration: none;
}

.c-sp-menu__row .c-sp-menu__link {
	padding-right: 12px;
}

.c-sp-menu__en {
	color: var(--c-ink-subtle);
	font-family: var(--ff-en);
	font-size: 12px;
	font-weight: 500;
	letter-spacing: 0.16em;
}

.c-sp-menu__toggle {
	display: flex;
	flex-shrink: 0;
	align-items: center;
	justify-content: center;
	width: 56px;
	padding: 0;
	border: none;
	border-left: 1px solid #E2E7EA;
	background: transparent;
	color: var(--c-navy-900);
	cursor: pointer;
}

.c-sp-menu__toggle svg {
	width: 18px;
	height: 18px;
	stroke-width: 2.4;
	transition: transform 0.3s ease;
}

.c-sp-menu__toggle[aria-expanded="true"] svg {
	transform: rotate(180deg);
}

/* サービスの子メニュー（高さが伸びるアコーディオン） */
.c-sp-menu__sub {
	display: grid;
	grid-template-rows: 0fr;
	opacity: 0;
	transform: translateY(-6px);
	transition:
		grid-template-rows 0.3s var(--ease-out),
		opacity 0.25s ease,
		transform 0.3s var(--ease-out);
}

.c-sp-menu__sub.is-open {
	grid-template-rows: 1fr;
	opacity: 1;
	transform: translateY(0);
}

.c-sp-menu__sub-inner {
	min-height: 0;
	overflow: hidden;
}

.c-sp-menu__sub-box {
	display: flex;
	flex-direction: column;
	margin: 4px 0 12px;
	border-radius: 8px;
	background: var(--c-surface-gray);
}

.c-sp-menu__sub-link {
	display: flex;
	flex-direction: column;
	gap: 2px;
	padding: 12px 16px;
	border-bottom: 1px solid #E2E7EA;
	color: var(--c-navy-900);
	text-decoration: none;
}

.c-sp-menu__sub-link--soon {
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	border-bottom: none;
	color: var(--c-ink-subtle);
}

.c-sp-menu__hours {
	color: var(--c-ink-muted);
	font-size: 14px;
	line-height: 1.9;
}


/* ==========================================================================
   6. フッター
   ========================================================================== */
.l-footer {
	position: relative;
	overflow: hidden;
	padding: clamp(56px, calc(56px + 32 * (100vw - 390px) / 1050), 88px) var(--sec-px) clamp(40px, calc(40px + 8 * (100vw - 390px) / 1050), 48px);
	background: linear-gradient(120deg, var(--c-footer-from) 0%, var(--c-footer-to) 100%);
	color: #FFFFFF;
	font-size: 14px;
	line-height: 1.9;
}

.l-footer__inner {
	display: flex;
	flex-direction: column;
	max-width: 1200px;
	margin-inline: auto;
}

.l-footer__info {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.l-footer__logo {
	align-self: flex-start;
	width: auto;
	height: 30px;
	margin-bottom: 12px;
}

.l-footer__area {
	color: #E3EFF7;
}

.l-footer__nav {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 4px 16px;
	align-content: start;
	margin-top: 32px;
}

.l-footer__link {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: 32px;
	color: var(--c-footer-link);
	text-decoration: none;
}

.l-footer__link:hover {
	color: #FFFFFF;
}

.l-footer__bullet {
	flex-shrink: 0;
	width: 4px;
	height: 4px;
	border-radius: 50%;
	background: var(--c-sky-400);
}

.l-footer__copy {
	margin-top: 32px;
	padding-top: 20px;
	border-top: 1px solid rgba(255, 255, 255, 0.25);
	color: #D6E8F4;
	font-family: var(--ff-en);
	font-size: 12px;
	letter-spacing: 0.08em;
}

@media (min-width: 768px) {
	.l-footer__nav {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 6px 24px;
	}
}

@media (min-width: 1024px) {
	.l-footer__inner {
		display: grid;
		grid-template-columns: repeat(12, minmax(0, 1fr));
		column-gap: 24px;
	}

	.l-footer__info {
		grid-column: span 5;
	}

	.l-footer__logo {
		height: 36px;
	}

	.l-footer__nav {
		grid-column: 7 / span 6;
		margin-top: 0;
	}

	.l-footer__copy {
		grid-column: span 12;
		margin-top: 64px;
		padding-top: 24px;
	}
}


/* ==========================================================================
   7. 部品
   ========================================================================== */

/* --- ボタン ---
   色は変数で切り替え。ホバーで地と文字が反転し、矢印の丸も入れ替わる */
.c-btn {
	--btn-bg: var(--c-blue-600);
	--btn-fg: #FFFFFF;
	--btn-border: var(--c-blue-600);
	--btn-arrow-bg: #FFFFFF;
	--btn-arrow-fg: var(--c-blue-600);
	--btn-bg-h: #FFFFFF;
	--btn-fg-h: var(--c-blue-600);
	--btn-border-h: var(--c-blue-600);
	--btn-arrow-bg-h: var(--c-blue-600);
	--btn-arrow-fg-h: #FFFFFF;

	display: inline-flex;
	flex-shrink: 0;
	align-items: center;
	gap: 14px;
	min-height: 56px;
	padding: 17px 32px;
	border: 1px solid var(--btn-border);
	border-radius: 8px;
	background: var(--btn-bg);
	color: var(--btn-fg);
	font-size: 16px;
	font-weight: 700;
	line-height: 1.5;
	letter-spacing: 0.03em;
	text-decoration: none;
	transition: color 0.2s, background-color 0.2s, border-color 0.2s, box-shadow 0.2s;
}

.c-btn:hover {
	border-color: var(--btn-border-h);
	background: var(--btn-bg-h);
	color: var(--btn-fg-h);
}

.c-btn__arrow {
	display: inline-flex;
	flex-shrink: 0;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	background: var(--btn-arrow-bg);
	color: var(--btn-arrow-fg);
	transition: background-color 0.2s, color 0.2s;
}

.c-btn__arrow svg {
	width: 14px;
	height: 14px;
	transition: stroke 0.2s;
}

.c-btn:hover .c-btn__arrow {
	background: var(--btn-arrow-bg-h);
	color: var(--btn-arrow-fg-h);
}

/* 白地に青枠 */
.c-btn--outline {
	--btn-bg: #FFFFFF;
	--btn-fg: var(--c-blue-600);
	--btn-arrow-bg: var(--c-blue-600);
	--btn-arrow-fg: #FFFFFF;
	--btn-bg-h: var(--c-blue-600);
	--btn-fg-h: #FFFFFF;
	--btn-arrow-bg-h: #FFFFFF;
	--btn-arrow-fg-h: var(--c-blue-600);
}

/* 青い帯の中の白い箱に置くボタン */
.c-btn--band {
	--btn-bg: var(--c-band-from);
	--btn-border: var(--c-band-from);
	--btn-arrow-fg: var(--c-band-from);
}

/* 青い帯の上の白いボタン */
.c-btn--white,
.c-btn--white-cta {
	--btn-bg: #FFFFFF;
	--btn-fg: var(--c-band-from);
	--btn-border: #FFFFFF;
	--btn-arrow-bg: var(--c-band-from);
	--btn-arrow-fg: #FFFFFF;
	--btn-bg-h: var(--c-blue-600);
	--btn-fg-h: #FFFFFF;
	--btn-border-h: #FFFFFF;
	--btn-arrow-bg-h: #FFFFFF;
	--btn-arrow-fg-h: var(--c-blue-600);
}

.c-btn--white-cta {
	--btn-fg: var(--c-navy-900);
	--btn-arrow-bg: var(--c-blue-600);
}

/* ヘッダーの小さいボタン */
.c-btn--header {
	gap: 10px;
	height: 48px;
	min-height: 48px;
	padding: 0 26px;
	font-size: 15px;
}

.c-btn--header .c-btn__arrow {
	width: 26px;
	height: 26px;
}

.c-btn--header .c-btn__arrow svg {
	width: 12px;
	height: 12px;
}

/* 横幅いっぱい（文字は左、矢印は右） */
.c-btn--block {
	justify-content: space-between;
	width: 100%;
	padding: 17px 24px;
}

/* SPのときだけ横幅いっぱい */
@media (max-width: 767px) {
	.c-btn--sp-block {
		justify-content: space-between;
		width: 100%;
		padding: 17px 24px;
	}
}

.c-btn--center {
	justify-content: center;
}

.c-btn--large {
	padding: 20px 40px;
}

/* --- セクション見出し（英字＋和文h2＋リード文） --- */
.c-section-head {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: clamp(12px, calc(12px + 2 * (100vw - 390px) / 1050), 14px);
	text-align: left;
}

.c-section-head__en {
	display: flex;
	align-items: flex-end;
	gap: 6px;
	color: var(--c-blue-600);
	font-family: var(--ff-en);
	font-size: clamp(64px, calc(64px + 48 * (100vw - 390px) / 1050), 112px);
	font-weight: 500;
	line-height: 1;
	letter-spacing: 0.01em;
}

.c-section-head__dot {
	flex-shrink: 0;
	width: clamp(9px, calc(9px + 3 * (100vw - 390px) / 1050), 12px);
	height: clamp(9px, calc(9px + 3 * (100vw - 390px) / 1050), 12px);
	margin-bottom: clamp(9px, calc(9px + 7 * (100vw - 390px) / 1050), 16px);
	border-radius: 50%;
	background: var(--c-sky-400);
}

.c-section-head__title {
	color: var(--c-navy-900);
	font-family: var(--ff-display);
	font-size: clamp(19px, calc(19px + 5 * (100vw - 390px) / 1050), 24px);
	font-weight: 700;
	line-height: 1.5;
	letter-spacing: 0.03em;
}

.c-section-head__lead {
	margin-top: 4px;
	color: var(--c-ink);
	font-size: clamp(16px, calc(16px + 2 * (100vw - 390px) / 1050), 18px);
	font-weight: 500;
}

.c-section-head--on-dark .c-section-head__en,
.c-section-head--on-dark .c-section-head__title {
	color: #FFFFFF;
}

.c-section-head--on-dark .c-section-head__dot {
	background: #FFFFFF;
}

.c-section-head--on-dark .c-section-head__lead {
	color: var(--c-on-band-lead);
}

@media (min-width: 1024px) {
	.c-section-head--center-pc {
		align-items: center;
		text-align: center;
	}
}

/* --- 点と線のモチーフ（lg は SP で小さくなる） --- */
.c-dots {
	display: flex;
	align-items: center;
	gap: 8px;
	pointer-events: none;
}

.c-dots span {
	flex-shrink: 0;
	border-radius: 50%;
}

.c-dots span:nth-child(2),
.c-dots span:nth-child(4) {
	width: 24px;
	height: 2px;
	border-radius: 0;
}

.c-dots span:nth-child(1),
.c-dots span:nth-child(3) {
	width: 6px;
	height: 6px;
}

.c-dots span:nth-child(5) {
	width: 8px;
	height: 8px;
}

.c-dots span:nth-child(1) {
	background: var(--c-navy-900);
}

.c-dots span:nth-child(2),
.c-dots span:nth-child(3) {
	background: var(--c-blue-600);
}

.c-dots span:nth-child(4),
.c-dots span:nth-child(5) {
	background: var(--c-sky-400);
}

.c-dots--md {
	gap: 10px;
}

.c-dots--md span:nth-child(2),
.c-dots--md span:nth-child(4) {
	width: 36px;
}

.c-dots--md span:nth-child(1),
.c-dots--md span:nth-child(3) {
	width: 8px;
	height: 8px;
}

.c-dots--md span:nth-child(5) {
	width: 10px;
	height: 10px;
}

@media (min-width: 1024px) {
	.c-dots--lg {
		gap: 12px;
	}

	.c-dots--lg span:nth-child(2),
	.c-dots--lg span:nth-child(4) {
		width: 56px;
	}

	.c-dots--lg span:nth-child(1),
	.c-dots--lg span:nth-child(3) {
		width: 10px;
		height: 10px;
	}

	.c-dots--lg span:nth-child(5) {
		width: 12px;
		height: 12px;
	}
}

/* 青い帯の上 */
.c-dots--on-dark span:nth-child(1) {
	background: #FFFFFF;
}

.c-dots--on-dark span:nth-child(2),
.c-dots--on-dark span:nth-child(3) {
	background: var(--c-on-band-line);
}

/* --- ガラス風の装飾タイル（大きさは --s、位置はページのCSSで） --- */
.c-glass {
	--s: 80px;
	--a: 0.28;

	position: absolute;
	width: var(--s);
	height: var(--s);
	border-radius: max(8px, calc(var(--s) / 10));
	pointer-events: none;
}

.c-glass--light {
	border: 1px solid rgba(255, 255, 255, 0.9);
	background: linear-gradient(135deg, rgba(255, 255, 255, 0.85) 0%, rgba(81, 186, 229, var(--a)) 100%);
	box-shadow: 0 calc(var(--s) / 6) calc(var(--s) / 3) rgba(17, 106, 169, 0.14);
}

.c-glass--dark {
	border: 1px solid rgba(255, 255, 255, 0.3);
	background: linear-gradient(135deg, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0.03) 100%);
	box-shadow: 0 calc(var(--s) / 6) calc(var(--s) / 3) rgba(2, 20, 34, 0.18);
}

.c-glass--cta {
	border: 1px solid rgba(255, 255, 255, 0.35);
	background: linear-gradient(135deg, rgba(255, 255, 255, 0.28) 0%, rgba(255, 255, 255, 0.04) 100%);
}

/* --- ドットグリッド模様 --- */
.c-dot-grid {
	position: absolute;
	background-image: radial-gradient(var(--c-dot) 1.3px, transparent 1.5px);
	background-size: 24px 24px;
	pointer-events: none;
}

.c-dot-grid--on-dark {
	background-image: radial-gradient(rgba(255, 255, 255, 0.22) 1.3px, transparent 1.5px);
}

/* --- 画像の仮表示 --- */
.c-placeholder {
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 8px;
	background: var(--c-placeholder);
	color: var(--c-ink-muted);
	font-size: 14px;
	text-align: center;
}

/* --- ホバーで浮き上がるカード --- */
.c-lift {
	transition: transform 0.25s, box-shadow 0.25s;
}

.c-lift:hover {
	transform: translateY(-4px);
	box-shadow: var(--shadow-card-hover) !important;
}

/* --- 角丸のアイコンタイル --- */
.c-icon-tile {
	display: flex;
	flex-shrink: 0;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	border: 1px solid #FFFFFF;
	border-radius: 14px;
	background: linear-gradient(135deg, #FFFFFF 0%, var(--c-sky-100) 100%);
	box-shadow: var(--shadow-icon);
}

.c-icon-tile svg {
	width: 32px;
	height: 32px;
}

@media (min-width: 1024px) {
	.c-icon-tile {
		width: 52px;
		height: 52px;
	}
}

/* --- 点付きの小見出し --- */
.c-dot-heading {
	display: flex;
	align-items: center;
	gap: 14px;
	color: var(--c-navy-900);
	font-family: var(--ff-display);
	font-size: clamp(20px, calc(20px + 4 * (100vw - 390px) / 1050), 24px);
	font-weight: 700;
	line-height: 1.5;
}

.c-dot-heading::before {
	content: "";
	flex-shrink: 0;
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: var(--c-sky-400);
}

/* --- 右に線が伸びる小見出し --- */
.c-line-heading {
	display: flex;
	align-items: center;
	gap: 16px;
}

.c-line-heading__title {
	color: var(--c-navy-900);
	font-family: var(--ff-display);
	font-size: clamp(19px, calc(19px + 3 * (100vw - 390px) / 1050), 22px);
	font-weight: 700;
	line-height: 1.5;
}

.c-line-heading__en {
	color: var(--c-ink-subtle);
	font-family: var(--ff-en);
	font-size: 13px;
	letter-spacing: 0.14em;
}

.c-line-heading__line {
	flex-grow: 1;
	height: 1px;
	background: var(--c-line);
}

.c-line-heading--on-dark .c-line-heading__title {
	color: #FFFFFF;
}

.c-line-heading--on-dark .c-line-heading__en {
	color: var(--c-on-band-label);
}

.c-line-heading--on-dark .c-line-heading__line {
	background: rgba(255, 255, 255, 0.28);
}

/* --- 注記 --- */
.c-note {
	color: var(--c-ink-muted);
	font-size: 14px;
	line-height: 2;
}

/* --- 短いアクセント線 --- */
.c-accent-line {
	display: block;
	width: 48px;
	height: 2px;
	background: var(--c-sky-400);
}

/* --- 料金カード --- */
.c-price-plans {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 16px;
}

@media (min-width: 1024px) {
	.c-price-plans {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 28px;
	}
}

.c-price-card {
	display: flex;
	flex-direction: column;
	overflow: hidden;
	border-radius: 8px;
	background: #FFFFFF;
	box-shadow: var(--shadow-card);
}

.c-price-card__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 18px 24px;
	background: linear-gradient(120deg, var(--c-blue-700) 0%, var(--c-blue-600) 100%);
}

.c-price-card__name {
	color: #FFFFFF;
	font-family: var(--ff-display);
	font-size: 19px;
	font-weight: 700;
}

.c-price-card__en {
	color: var(--c-sky-200);
	font-family: var(--ff-en);
	font-size: 14px;
	letter-spacing: 0.12em;
}

.c-price-card__body {
	display: flex;
	flex-direction: column;
	gap: 18px;
	padding: 24px 24px 12px;
}

.c-price-card__price {
	display: flex;
	align-items: baseline;
	gap: 6px;
}

.c-price-card__num {
	color: var(--c-blue-600);
	font-family: var(--ff-en);
	font-size: clamp(56px, calc(56px + 16 * (100vw - 390px) / 1050), 72px);
	font-weight: 500;
	line-height: 1;
	letter-spacing: -0.01em;
}

.c-price-card__unit {
	color: var(--c-navy-900);
	font-family: var(--ff-display);
	font-size: 22px;
	font-weight: 700;
}

.c-price-card__tax {
	margin-left: 4px;
	color: var(--c-ink-muted);
	font-size: 13px;
}

.c-price-card__spec {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 14px 0;
	border-top: 1px solid var(--c-line);
}

.c-price-card__spec dt {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	color: var(--c-ink-muted);
	font-size: 14px;
}

.c-price-card__spec dt svg {
	flex-shrink: 0;
	width: 20px;
	height: 20px;
}

.c-price-card__spec dd {
	color: var(--c-navy-900);
	font-weight: 700;
}

@media (min-width: 1024px) {
	.c-price-card__head {
		padding: 22px 32px;
	}

	.c-price-card__body {
		padding: 30px 32px 18px;
	}
}

/* --- 公開後の保守 --- */
.c-maintenance {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 16px;
	padding: 28px 22px;
	overflow: hidden;
	border-radius: 8px;
	background: #FFFFFF;
	box-shadow: var(--shadow-card);
}

.c-maintenance__head {
	display: flex;
	align-items: center;
	gap: 14px;
}

.c-maintenance__icon {
	display: flex;
	flex-shrink: 0;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	border-radius: 50%;
	background: var(--c-surface-soft);
}

.c-maintenance__icon svg {
	width: 30px;
	height: 30px;
}

.c-maintenance__title {
	color: var(--c-navy-900);
	font-family: var(--ff-display);
	font-size: clamp(20px, calc(20px + 4 * (100vw - 390px) / 1050), 24px);
	font-weight: 700;
	line-height: 1.5;
}

.c-maintenance__body {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.c-maintenance__text {
	font-size: 16px;
}

.c-maintenance__num {
	margin: 0 3px;
	color: var(--c-blue-600);
	font-family: var(--ff-en);
	font-size: clamp(30px, calc(30px + 6 * (100vw - 390px) / 1050), 36px);
	font-weight: 500;
	line-height: 1;
}

@media (min-width: 1024px) {
	.c-maintenance {
		gap: 20px;
		padding: 40px 48px;
	}

	.c-maintenance__head {
		gap: 20px;
	}

	.c-maintenance__icon {
		width: 72px;
		height: 72px;
	}

	.c-maintenance__icon svg {
		width: 38px;
		height: 38px;
	}

	.c-maintenance__body {
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		gap: 32px;
	}

	.c-maintenance__text {
		font-size: 17px;
	}
}

/* --- 実績カード（c-card を土台に、リンク全体をカードにする） --- */
.c-works-card,
.c-column-card {
	height: 100%;
	text-decoration: none;
}

.c-works-card:hover,
.c-column-card:hover {
	color: var(--c-ink);
}

.c-works-card .c-card__image,
.c-column-card .c-card__image {
	display: flex;
	width: 100%;
	border-radius: 8px;
	object-fit: cover;
}

.c-works-card__meta {
	color: var(--c-ink-muted);
	font-size: 13px;
}

/* --- 一覧ページの絞り込み（実績・コラムで共通。いま開いているボタンは aria-current） --- */
.c-filter {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
	padding: 20px;
	border: 1px solid var(--c-line);
	border-radius: 8px;
	background: #FFFFFF;
	box-shadow: var(--shadow-card);
}

.c-filter__label {
	width: 90px;
	font-family: var(--ff-display);
	font-size: 14px;
	font-weight: 700;
}

.c-filter__list {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

@media (min-width: 1024px) {
	.c-filter {
		padding: 28px 32px;
	}
}

/* --- 一覧ページのカードの並び（SP 1列 → タブレット 2列 → PC 3列） --- */
.c-card-grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 24px;
}

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

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

/* --- ページ送り（WordPress が出すリンクに c-chip を付けて使う） --- */
.c-pager__list {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 8px;
}

/* --- エリアのチップ --- */
.c-area-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.c-area-chip {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 8px 16px 8px 12px;
	border: 1px solid var(--c-line-strong);
	border-radius: 999px;
	background: #FFFFFF;
	color: var(--c-navy-900);
	font-size: 15px;
	font-weight: 500;
}

.c-area-chip svg {
	flex-shrink: 0;
	width: 17px;
	height: 17px;
}

.c-area-chip--partial {
	border: 1px dashed var(--c-ink-subtle);
	background: transparent;
	color: var(--c-ink-muted);
}

/* --- よくある質問（アコーディオン） --- */
.c-faq-list {
	display: flex;
	flex-direction: column;
	gap: 20px;
	width: 100%;
	max-width: 960px;
	margin-inline: auto;
}

.c-faq {
	display: flex;
	flex-direction: column;
	padding: 22px 18px;
	border-radius: 8px;
	background: #FFFFFF;
	box-shadow: var(--shadow-card);
}

.c-faq__heading {
	font: inherit;
}

.c-faq__q {
	display: flex;
	align-items: center;
	gap: 18px;
	width: 100%;
	min-height: 44px;
	padding: 0;
	border: none;
	background: transparent;
	color: var(--c-navy-900);
	text-align: left;
	cursor: pointer;
	transition: color 0.2s;
}

.c-faq__q:hover {
	color: var(--c-blue-600);
}

.c-faq__mark {
	display: flex;
	flex-shrink: 0;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: var(--c-blue-600);
	color: #FFFFFF;
	font-family: var(--ff-en);
	font-size: 18px;
	font-weight: 500;
	line-height: 1;
}

.c-faq__mark--a {
	background: var(--c-surface-soft);
	color: var(--c-blue-600);
}

.c-faq__question {
	display: block;
	flex-grow: 1;
	font-family: var(--ff-display);
	font-size: clamp(17px, calc(17px + 2 * (100vw - 390px) / 1050), 19px);
	font-weight: 700;
	line-height: 1.6;
}

.c-faq__chevron {
	flex-shrink: 0;
	width: 22px;
	height: 22px;
	color: var(--c-blue-600);
	stroke-width: 2;
	transition: transform 0.2s;
}

.c-faq.is-open .c-faq__chevron {
	transform: rotate(180deg);
}

/* 高さを 0fr ⇔ 1fr で動かして、なめらかに開閉する */
.c-faq__panel {
	display: grid;
	grid-template-rows: 0fr;
	opacity: 0;
	transition: grid-template-rows 0.35s ease, opacity 0.3s ease;
}

.c-faq.is-open .c-faq__panel {
	grid-template-rows: 1fr;
	opacity: 1;
}

.c-faq__panel-inner {
	min-height: 0;
	overflow: hidden;
}

.c-faq__answer {
	display: flex;
	align-items: flex-start;
	gap: 18px;
	margin-top: 18px;
	padding-top: 18px;
	border-top: 1px solid var(--c-line);
}

.c-faq__text {
	padding-top: 4px;
	color: var(--c-ink);
}

.c-faq__text > * + * {
	margin-top: 0.8em;
}

@media (min-width: 1024px) {
	.c-faq {
		padding: 32px 40px;
	}
}


/* ==========================================================================
   7-2. 部品（TOPと下層ページで共通）
   ========================================================================== */

/* --- お悩みカード --- */
.c-problem-list {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 12px;
}

.c-problem-card {
	display: flex;
	flex-direction: column;
	gap: 16px;
	padding: 20px;
	border: 1px solid var(--c-line);
	border-radius: 8px;
	background: #FFFFFF;
	box-shadow: var(--shadow-card);
}

.c-problem-card__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.c-problem-card__num {
	color: var(--c-ink-subtle);
	font-family: var(--ff-en);
	font-size: 14px;
	font-weight: 500;
	letter-spacing: 0.1em;
}

.c-problem-card__text {
	color: var(--c-ink);
	font-weight: 500;
	line-height: 1.8;
}

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

@media (min-width: 1024px) {
	.c-problem-list {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.c-problem-card {
		padding: 30px 28px;
	}
}

/* --- お悩みへの答え（縦線と点でつなぐ） --- */
.c-answer {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 16px;
	text-align: left;
}

.c-answer__connector {
	display: flex;
	flex-direction: column;
	align-self: center;
	align-items: center;
}

.c-answer__connector span:first-child {
	width: 1.5px;
	height: clamp(36px, calc(36px + 20 * (100vw - 390px) / 1050), 56px);
	background: var(--c-blue-600);
}

.c-answer__connector span:last-child {
	width: 12px;
	height: 12px;
	border-radius: 50%;
	background: var(--c-sky-400);
}

.c-answer__title {
	color: var(--c-navy-900);
	font-family: var(--ff-display);
	font-size: clamp(19px, calc(19px + 5 * (100vw - 390px) / 1050), 24px);
	font-weight: 700;
	line-height: 1.7;
}

.c-answer__text {
	color: var(--c-ink-muted);
}

@media (min-width: 1024px) {
	.c-answer {
		align-items: center;
		text-align: center;
	}
}

/* --- 実績カードの並び（SP・タブレットは横スクロール、PCは3列） --- */
.c-works-scroll {
	display: flex;
	gap: 14px;
	margin: 0 calc(var(--sec-px) * -1);
	padding: 0 var(--sec-px) 8px;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-padding-left: var(--sec-px);
}

.c-works-scroll__item {
	flex-shrink: 0;
	width: 280px;
	scroll-snap-align: start;
}

@media (min-width: 768px) {
	.c-works-scroll__item {
		width: 320px;
	}
}

@media (min-width: 1024px) {
	.c-works-scroll {
		display: grid;
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 28px;
		margin: 0;
		padding: 0;
		overflow: visible;
	}

	.c-works-scroll__item {
		width: auto;
	}
}


/* ==========================================================================
   7-3. 下層ページの部品
   ========================================================================== */

/* --- ページタイトル（パンくず・英字・h1・ページ内リンク） --- */
.p-page-title {
	padding: 0 var(--panel-inset);
	background: #FFFFFF;
}

.p-page-title__box {
	position: relative;
	overflow: hidden;
	padding:
		clamp(24px, calc(24px + 48 * (100vw - 390px) / 1050), 72px)
		var(--panel-px)
		clamp(48px, calc(48px + 32 * (100vw - 390px) / 1050), 80px);
	border-radius: var(--panel-radius);
	background:
		radial-gradient(900px 520px at 90% 0%, rgba(81, 186, 229, 0.2), rgba(81, 186, 229, 0) 65%),
		linear-gradient(160deg, var(--c-band-from) 0%, var(--c-band-mid) 55%, var(--c-band-to) 100%);
}

.p-page-title__grid {
	right: 0;
	bottom: 0;
	width: 40%;
	height: 60%;
	opacity: 0.8;
	background-image: radial-gradient(rgba(255, 255, 255, 0.18) 1.3px, transparent 1.5px);
}

.p-page-title__glass--1 {
	--s: 76px;

	top: -24px;
	right: -24px;
}

.p-page-title__glass--2 {
	display: none;
}

.p-page-title__inner {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 14px;
	max-width: 1200px;
	margin-inline: auto;
}

.p-page-title__breadcrumb {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	margin-bottom: clamp(20px, calc(20px + 12 * (100vw - 390px) / 1050), 32px);
	color: var(--c-on-band-lead);
	font-size: 13px;
}

.p-page-title__breadcrumb li {
	display: inline-flex;
	align-items: center;
	gap: 8px;
}

.p-page-title__breadcrumb a {
	color: var(--c-on-band-lead);
	text-decoration: none;
}

.p-page-title__breadcrumb a:hover {
	color: #FFFFFF;
	text-decoration: underline;
}

.p-page-title__breadcrumb [aria-current="page"] {
	color: #FFFFFF;
	font-weight: 500;
}

.p-page-title__sep {
	width: 4px;
	height: 4px;
	border-radius: 50%;
	background: var(--c-sky-400);
}

.p-page-title__en {
	display: flex;
	align-items: flex-end;
	gap: 6px;
	color: #FFFFFF;
	font-family: var(--ff-en);
	font-size: clamp(44px, calc(44px + 28 * (100vw - 390px) / 1050), 72px);
	font-weight: 500;
	line-height: 1;
	letter-spacing: 0.01em;
}

.p-page-title__dot {
	flex-shrink: 0;
	width: clamp(8px, calc(8px + 2 * (100vw - 390px) / 1050), 10px);
	height: clamp(8px, calc(8px + 2 * (100vw - 390px) / 1050), 10px);
	margin-bottom: clamp(6px, calc(6px + 4 * (100vw - 390px) / 1050), 10px);
	border-radius: 50%;
	background: #FFFFFF;
}

.p-page-title__title {
	color: #FFFFFF;
	font-family: var(--ff-display);
	font-size: clamp(22px, calc(22px + 6 * (100vw - 390px) / 1050), 28px);
	font-weight: 700;
	line-height: 1.5;
	letter-spacing: 0.03em;
}

.p-page-title__lead {
	/* max-width: 960px; */
	margin-top: 10px;
	color: var(--c-on-band-lead);
}

.p-page-title__anchors {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-top: clamp(20px, calc(20px + 8 * (100vw - 390px) / 1050), 28px);
}

.p-page-title__anchor {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: 44px;
	padding: 0 18px 0 14px;
	border: 1px solid var(--c-line-strong);
	border-radius: 999px;
	background: #FFFFFF;
	color: var(--c-navy-900);
	font-size: 15px;
	font-weight: 500;
	text-decoration: none;
}

.p-page-title__anchor:hover {
	color: var(--c-blue-600);
}

.p-page-title__anchor-icon {
	display: inline-flex;
	flex-shrink: 0;
	align-items: center;
	justify-content: center;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	background: var(--c-surface-soft);
	color: var(--c-blue-600);
}

.p-page-title__anchor-icon svg {
	width: 12px;
	height: 12px;
}

@media (min-width: 1024px) {
	.p-page-title__glass--1 {
		--s: 150px;

		top: -40px;
		right: -40px;
	}

	.p-page-title__glass--2 {
		--s: 80px;

		top: 60px;
		right: 120px;
		display: block;
	}
}

/* タイトルの下のタグ（実績詳細の業種・制作の種類） */
.p-page-title__tags {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 2px;
}

.p-page-title__tag {
	display: inline-flex;
	align-items: center;
	min-height: 32px;
	padding: 0 14px;
	border: 1px solid rgba(255, 255, 255, 0.45);
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.14);
	color: #FFFFFF;
	font-size: 13px;
	font-weight: 500;
}

/* --- 下層ページの見出し（英字ラベル＋h2＋下線） --- */
.c-heading {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: clamp(12px, calc(12px + 4 * (100vw - 390px) / 1050), 16px);
}

.c-heading__label {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-bottom: -6px;
	padding: 8px 14px 8px 12px;
	border-radius: 999px;
	background: var(--c-surface-soft);
	color: var(--c-blue-600);
	font-family: var(--ff-en);
	font-size: clamp(12px, calc(12px + 1 * (100vw - 390px) / 1050), 13px);
	font-weight: 500;
	line-height: 1;
	letter-spacing: 0.14em;
}

.c-heading__label::before {
	content: "";
	flex-shrink: 0;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--c-sky-400);
}

.c-heading__title {
	color: var(--c-navy-900);
	font-family: var(--ff-display);
	font-size: clamp(21px, calc(21px + 5 * (100vw - 390px) / 1050), 26px);
	font-weight: 700;
	line-height: 1.5;
	letter-spacing: 0.03em;
}

.c-heading__line {
	display: flex;
	align-items: center;
	align-self: stretch;
	height: 3px;
	background: linear-gradient(var(--c-line), var(--c-line)) left center / 100% 1px no-repeat;
}

.c-heading__line::before {
	content: "";
	width: clamp(40px, calc(40px + 16 * (100vw - 390px) / 1050), 56px);
	height: 3px;
	border-radius: 2px;
	background: linear-gradient(90deg, var(--c-blue-600) 0%, var(--c-sky-400) 100%);
}

.c-heading--on-dark .c-heading__label {
	background: rgba(255, 255, 255, 0.14);
	color: #FFFFFF;
}

.c-heading--on-dark .c-heading__title {
	color: #FFFFFF;
}

.c-heading--on-dark .c-heading__line {
	background-image: linear-gradient(rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.3));
}

.c-heading--on-dark .c-heading__line::before {
	background: #FFFFFF;
}

/* --- カード（画像つき・文字だけ） --- */
.c-card {
	position: relative;
	display: flex;
	flex-direction: column;
	border: 1px solid var(--c-line);
	border-radius: 8px;
	background: #FFFFFF;
	color: var(--c-ink);
	box-shadow: var(--shadow-card);
}

.c-card__media {
	position: relative;
}

.c-card__image {
	aspect-ratio: 16 / 9;
	background: #DDE3E7;
}

img.c-card__image {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 7px 7px 0 0;
	object-fit: cover;
}

.c-card__badge {
	position: absolute;
	top: 12px;
	left: 12px;
	padding: 2px 10px;
	border-radius: 999px;
	background: var(--c-blue-600);
	color: #FFFFFF;
	font-family: var(--ff-display);
	font-size: 12px;
	font-weight: 700;
}

.c-card__body {
	display: flex;
	flex-direction: column;
	flex-grow: 1;
	gap: 10px;
	padding: 22px 24px;
}

.c-card__title {
	color: var(--c-blue-600);
	font-family: var(--ff-display);
	font-size: clamp(17px, calc(17px + 2 * (100vw - 390px) / 1050), 19px);
	font-weight: 700;
	line-height: 1.5;
}

.c-card__foot {
	margin-top: auto;
	padding-top: 6px;
}

.c-card__soon {
	color: var(--c-ink-muted);
	font-weight: 500;
}

/* 文字だけのカード */
.c-card--text {
	gap: 14px;
	padding: 24px;
}

.c-card--muted {
	background: #E4EBF0;
}

@media (min-width: 1024px) {
	.c-card--text {
		padding: 28px 32px;
	}
}

/* --- 白い箱（小見出しつき） --- */
.c-box {
	display: flex;
	flex-direction: column;
	gap: 14px;
	padding: 24px 20px;
	border: 1px solid var(--c-line);
	border-radius: 8px;
	background: #FFFFFF;
	color: var(--c-ink); /* 青い帯の中に置いても文字色が変わらないように */
	box-shadow: var(--shadow-card);
}

.c-box--plain {
	gap: 16px;
	border: none;
}

.c-box__title {
	padding-bottom: 12px;
	border-bottom: 1px solid var(--c-line);
	color: var(--c-blue-600);
	font-family: var(--ff-display);
	font-size: 18px;
	font-weight: 700;
	line-height: 1.5;
}

@media (min-width: 1024px) {
	.c-box {
		padding: 32px;
	}

	.c-box--plain {
		padding: 28px 32px;
	}
}

/* --- チェックつきの箇条書き --- */
.c-check-list {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.c-check-list li {
	position: relative;
	padding-left: 26px;
	color: var(--c-ink);
	line-height: 1.9;
}

.c-check-list li::before {
	content: "";
	position: absolute;
	top: 7px;
	left: 0;
	width: 16px;
	height: 16px;
	border-radius: 50%;
	background:
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FFFFFF' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E") center / 10px 10px no-repeat,
		var(--c-blue-600);
}

@media (min-width: 768px) {
	.c-check-list--2col {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 8px 32px;
	}
}

/* --- 点の箇条書き --- */
.c-dot-list {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.c-dot-list li {
	position: relative;
	padding-left: 22px;
	color: var(--c-ink);
	line-height: 1.9;
}

.c-dot-list li::before {
	content: "";
	position: absolute;
	top: 0.8em;
	left: 4px;
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--c-sky-400);
}

/* --- 表（はみ出すときは横スクロール） --- */
.c-table {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	border: 1px solid #D5DCE1;
	border-radius: 8px;
	background: #FFFFFF;
	box-shadow: var(--shadow-card);
}

.c-table__table {
	width: 100%;
	border-collapse: collapse;
	color: var(--c-ink);
	font-size: 15px;
	line-height: 1.8;
}

.c-table__table--wide {
	min-width: 560px;
}

.c-table__table th,
.c-table__table td {
	padding: 16px 14px;
	border-bottom: 1px solid #DDE3E7;
	text-align: left;
	vertical-align: top;
}

.c-table__table thead th {
	border-bottom: 2px solid var(--c-band-from);
	background: var(--c-band-from);
	color: #FFFFFF;
	font-family: var(--ff-display);
	font-weight: 700;
}

.c-table__table thead th + th {
	border-left: 1px solid rgba(255, 255, 255, 0.35);
}

.c-table__table tbody th {
	min-width: 120px;
	border-right: 1px solid #DDE3E7;
	background: #E4EBF0;
	color: var(--c-navy-900);
	font-family: var(--ff-display);
	font-weight: 700;
}

.c-table__table td + td {
	border-left: 1px solid #DDE3E7;
}

.c-table__table tbody tr:last-child > * {
	border-bottom: none;
}

@media (min-width: 768px) {
	.c-table__table tbody th {
		white-space: nowrap;
	}
}

@media (min-width: 1024px) {
	.c-table__table {
		font-size: 16px;
	}

	.c-table__table th,
	.c-table__table td {
		padding: 18px 24px;
	}

	.c-table__table thead th {
		padding-block: 16px;
	}

	.c-table__item-col {
		width: 200px;
	}
}

/* 見出しセルを薄いグレーにする表（事業概要・地域・期間など） */
.c-table__table--light-th tbody th,
.c-table__table--info tbody th {
	background: #F5F7F9;
}

/* 縦に項目が並ぶ表（事業概要・経歴） */
.c-table__table--info tbody th {
	min-width: 0;
	border-right: none;
	white-space: nowrap;
}

@media (min-width: 1024px) {
	.c-table__table--info tbody th {
		width: 200px;
	}
}

/* 料金のセル（数字を大きく） */
.c-table__price {
	color: var(--c-navy-900);
	font-size: 14px;
	font-weight: 700;
	white-space: nowrap;
}

.c-table__price strong {
	margin-right: 2px;
	color: var(--c-band-from);
	font-family: var(--ff-en);
	font-size: 18px;
	font-weight: 500;
}

/* --- 白地の補足 --- */
.c-white-note {
	padding: 20px 24px;
	border-radius: 8px;
	background: #FFFFFF;
	color: var(--c-ink);
}

/* --- 薄い青地の補足 --- */
.c-soft-note {
	display: flex;
	flex-direction: column;
	gap: 16px;
	padding: 20px 24px;
	border-radius: 8px;
	background: var(--c-surface-soft);
	color: var(--c-ink);
}

/* --- 2列（SPは1列） --- */
.c-two-col {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 16px;
}

@media (min-width: 768px) {
	.c-two-col {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 24px;
	}
}

/* --- ボタンを並べる --- */
.c-buttons {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

@media (min-width: 768px) {
	.c-buttons {
		flex-direction: row;
		flex-wrap: wrap;
		gap: 16px 32px;
	}
}

/* --- 丸いボタン型のリンク（実績の絞り込み・ページ送り） --- */
.c-chip {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 36px;
	min-height: 32px;
	padding: 4px 14px;
	border: 1px solid #B7C7D0;
	border-radius: 999px;
	background: #FFFFFF;
	color: var(--c-navy-900);
	font-size: 13px;
	font-weight: 500;
	line-height: 1.5;
	text-decoration: none;
}

a.c-chip:hover {
	border-color: var(--c-blue-600);
	color: var(--c-blue-600);
}

/* 選択中（いま開いているページ） */
.c-chip[aria-current="page"],
.c-chip.current {
	border-color: var(--c-blue-600);
	background: var(--c-blue-600);
	color: #FFFFFF;
	font-family: var(--ff-display);
	font-weight: 700;
}

a.c-chip[aria-current="page"]:hover {
	color: #FFFFFF;
}

/* --- 小さいタグ --- */
.c-tag {
	flex-shrink: 0;
	align-self: center;
	padding: 3px 12px;
	border-radius: 999px;
	background: var(--c-surface-soft);
	color: var(--c-blue-600);
	font-size: 12px;
	font-weight: 500;
	line-height: 1.7;
}

/* --- 番号の四角いバッジ --- */
.c-num-badge {
	align-self: flex-start;
	min-width: 45px;
	padding: 2px 10px;
	border-radius: 5px;
	background: var(--c-blue-600);
	color: #FFFFFF;
	font-family: var(--ff-display);
	font-size: 12px;
	font-weight: 700;
	text-align: center;
}

/* --- FAQ：横幅いっぱい --- */
.c-faq-list--wide {
	gap: 12px;
	max-width: none;
}


/* ==========================================================================
   8. CTA（無料相談への誘導）
   ========================================================================== */
.p-cta {
	padding:
		clamp(56px, calc(56px + 64 * (100vw - 390px) / 1050), 120px)
		clamp(12px, calc(12px + 108 * (100vw - 390px) / 1050), 120px)
		clamp(64px, calc(64px + 56 * (100vw - 390px) / 1050), 120px);
	background: #FFFFFF;
}

.p-cta__box {
	position: relative;
	max-width: 1200px;
	margin-inline: auto;
	padding:
		clamp(56px, calc(56px + 40 * (100vw - 390px) / 1050), 96px)
		clamp(22px, calc(22px + 58 * (100vw - 390px) / 1050), 80px);
	overflow: hidden;
	border-radius: 16px;
	background:
		radial-gradient(640px 360px at 85% 0%, rgba(81, 186, 229, 0.3), rgba(81, 186, 229, 0) 70%),
		linear-gradient(120deg, #083F6B 0%, var(--c-band-from) 55%, var(--c-blue-600) 100%);
	color: #FFFFFF;
}

.p-cta__glass--1 {
	--s: 110px;

	top: -30px;
	right: -30px;
}

.p-cta__glass--2 {
	display: none;
}

.p-cta__glass--3 {
	--s: 70px;

	bottom: -20px;
	left: -20px;
}

.p-cta__inner {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 26px;
	text-align: center;
}

.p-cta__en {
	display: flex;
	align-items: center;
	gap: 12px;
	color: #D4E8F4;
	font-family: var(--ff-en);
	font-size: clamp(13px, calc(13px + 2 * (100vw - 390px) / 1050), 15px);
	letter-spacing: 0.24em;
}

.p-cta__en span {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--c-sky-400);
}

.p-cta__title {
	font-family: var(--ff-display);
	font-size: clamp(26px, calc(26px + 14 * (100vw - 390px) / 1050), 40px);
	font-weight: 700;
	line-height: 1.5;
}

.p-cta__text {
	color: var(--c-on-blue-muted);
	text-align: left;
}

.p-cta__inner .c-btn {
	margin-top: 6px;
}

@media (max-width: 767px) {
	.p-cta__inner .c-btn {
		align-self: stretch;
	}
}

@media (min-width: 768px) {
	.p-cta__text {
		text-align: center;
	}
}

@media (min-width: 1024px) {
	.p-cta__glass--1 {
		--s: 220px;

		top: -60px;
		right: -50px;
	}

	.p-cta__glass--2 {
		--s: 120px;

		top: 90px;
		right: 150px;
		display: block;
	}

	.p-cta__glass--3 {
		--s: 160px;

		bottom: -50px;
		left: -40px;
	}
}


/* ==========================================================================
   9. 予備テンプレート（index.php）
   ========================================================================== */
.p-fallback {
	padding: var(--sec-py) var(--sec-px);
}

.p-fallback__title {
	margin-bottom: 32px;
	color: var(--c-navy-900);
	font-family: var(--ff-display);
	font-size: clamp(22px, calc(22px + 6 * (100vw - 390px) / 1050), 28px);
	line-height: 1.5;
}

.p-fallback__body > * + * {
	margin-top: 1em;
}


/* ==========================================================================
   10. 動きを減らす設定（OSの「視差効果を減らす」など）への対応
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}

	*,
	*::before,
	*::after {
		transition-duration: 0.01s !important;
		transition-delay: 0s !important;
		animation-duration: 0.01s !important;
		animation-iteration-count: 1 !important;
	}
}