@charset "UTF-8";
/* =========================================================
   TAP 2026 — 料金
   見本：_design/pages/05-price.html
   ========================================================= */

.pr-h2-20 { margin-bottom: 20px; }
.pr-lead-56 { margin-bottom: 56px; }

/* 料金の1行（初期費用・個別の運用メニュー・単品メニュー） */
.pr-row {
	margin: 0;
	padding: 16px 0;
	border-bottom: 1px solid rgba(14, 63, 92, .2);
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 16px;
	font-size: 15px;
}

.pr-row-price {
	white-space: nowrap;
}

.pr-row-num {
	font-size: 22px;
	font-weight: 500;
}

.pr-row-unit {
	font-size: 13px;
	margin-left: 2px;
}

/* =========================================================
   ファーストビュー
   ========================================================= */
.pr-fv-text {
	flex: 1 1 560px;
	min-width: 0;
}

.pr-fv-nav {
	margin-top: 32px;
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	font-size: 14px;
	font-weight: 700;
}

.pr-fv-chip {
	text-decoration: none;
	color: var(--navy);
	background: rgba(255, 255, 255, .45);
	border-radius: 999px;
	padding: 10px 20px;
}

.pr-fv-vis {
	flex: 1 1 400px;
	min-width: 0;
	display: flex;
	justify-content: center;
}

.pr-grow {
	position: relative;
	width: 440px;
	max-width: 100%;
	aspect-ratio: 440 / 320;
}

.pr-grow-svg {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	overflow: visible;
}

.pr-grow-word {
	position: absolute;
	transform: translate(-50%, -50%);
	font-family: var(--font-serif);
	font-style: italic;
}

.pr-grow-word--start { left: 15.5%; top: 83%; font-size: 14px; }
.pr-grow-word--try { left: 40%; top: 73%; font-size: 16px; }
.pr-grow-word--grow { left: 75%; top: 59%; font-size: 22px; }

/* =========================================================
   初期費用
   ========================================================= */
.pr-initial {
	background: var(--bg);
	position: relative;
	overflow: hidden;
}

.pr-initial-wm {
	right: -20px;
	bottom: 30px;
	font-size: 300px;
}

.pr-initial-ring {
	left: -200px;
	top: -180px;
	width: 560px;
	height: 560px;
}

.pr-initial-list {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(480px, 100%), 1fr));
	gap: 24px;
}

/* 初期費用の2枚のカード：トップの事業カードと同じ形（担当者の指示・見本と違う）。
   左右は subgrid で行をそろえる（事業名・見出し・サービス5行・リンクの8行。4行の側は下が空く） */
.pr-svc {
	min-width: 0;
	border-radius: 32px;
	padding: 40px 44px;
	color: var(--navy);
	display: grid;
	grid-row: span 8;
	grid-template-rows: subgrid;
	row-gap: 10px;
	align-content: start;
}

.pr-svc--in {
	background: var(--mint);
	box-shadow: 0 16px 36px rgba(14, 63, 92, .10);
}

.pr-svc--out {
	background: #FFFFFF;
	border: 1.5px solid var(--navy);
	box-shadow: 0 16px 36px rgba(14, 63, 92, .06);
}

.pr-svc .svc-list {
	display: contents;
}

.pr-svc-head {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.pr-svc-biz {
	margin: 0;
	font-size: 34px;
	font-weight: 900;
	line-height: 1.3;
	letter-spacing: .04em;
}

.pr-svc-biz-w {
	display: inline-block;
}

.pr-svc-label {
	margin: 0;
	display: flex;
	align-items: baseline;
	gap: 12px;
}

.pr-svc-en {
	font-family: var(--font-serif);
	font-style: italic;
	font-size: 17px;
}

.pr-svc-kind {
	font-size: 13px;
	font-weight: 700;
}

.pr-svc-name {
	margin: 14px 0;
	font-size: 24px;
	font-weight: 700;
	line-height: 1.4;
	letter-spacing: .06em;
}

.pr-svc-more,
.pr-svc-more:hover {
	grid-row: -2 / -1;
	align-self: end;
	justify-self: start;
	margin-top: 14px;
	font-size: 15px;
	font-weight: 700;
	color: var(--navy);
}

@container (max-width: 760px) {
	.pr-svc {
		padding: 32px 20px;
	}

	.pr-svc-biz {
		font-size: 26px;
	}

	.pr-svc-name {
		font-size: 21px;
	}
}

/* =========================================================
   月額プラン
   ========================================================= */
.pr-monthly {
	background: var(--sage-pale);
	position: relative;
	overflow: hidden;
}

.pr-monthly-wm {
	left: -30px;
	top: 24px;
	font-size: 300px;
}

.pr-monthly-head {
	margin-bottom: 64px;
}

.pr-monthly-lead {
	flex: 0 1 460px;
}

.pr-plans {
	display: flex;
	flex-wrap: wrap;
	gap: 24px;
	align-items: stretch;
}

.pr-plan {
	position: relative;
	flex: 1 1 300px;
	min-width: 0;
	background: #FFFFFF;
	color: var(--navy);
	border-radius: 32px;
	padding: 40px 36px;
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.pr-plan--pick {
	border: 2px solid var(--navy);
}

.pr-plan--dark {
	background: var(--sage-dark);
	color: #FFFFFF;
}

.pr-plan-badge {
	position: absolute;
	left: 50%;
	top: -14px;
	transform: translateX(-50%);
	background: var(--navy);
	color: #FFFFFF;
	border-radius: 999px;
	padding: 4px 16px;
	font-size: 12px;
	font-weight: 700;
	white-space: nowrap;
}

.pr-plan-name {
	margin: 0;
	font-size: 26px;
	font-weight: 500;
	letter-spacing: .06em;
}

.pr-plan-catch {
	margin: 0;
	font-size: 14px;
	color: var(--text);
}

.pr-plan--dark .pr-plan-catch {
	color: #E3EDE8;
}

.pr-plan-price {
	margin: 8px 0;
}

.pr-plan-num {
	font-family: 'Space Grotesk', 'Zen Kaku Gothic New', sans-serif;
	font-size: 40px;
	font-weight: 500;
}

.pr-plan-unit {
	font-size: 14px;
	margin-left: 4px;
}

.pr-plan-items {
	border-top: 1px solid rgba(14, 63, 92, .2);
}

/* プランに含まれるサービス（担当者の指示で 14px → 17px の太字に） */
.pr-plan-item {
	margin: 0;
	padding: 14px 0;
	border-bottom: 1px solid rgba(14, 63, 92, .2);
	font-size: 17px;
	font-weight: 700;
	line-height: 1.6;
	display: flex;
	gap: 10px;
}

.pr-plan-item-w {
	display: inline-block;
}

.pr-plan--dark .pr-plan-items,
.pr-plan--dark .pr-plan-item {
	border-color: rgba(255, 255, 255, .3);
}

.pr-ops {
	margin-top: 56px;
	background: rgba(255, 255, 255, .6);
	border-radius: 28px;
	padding: 32px 40px;
	color: var(--navy);
}

.pr-ops-title {
	margin: 0 0 8px;
	font-size: 16px;
	font-weight: 700;
}

.pr-ops-cols {
	display: flex;
	flex-wrap: wrap;
	gap: 0 48px;
}

.pr-ops-col {
	flex: 1 1 380px;
	min-width: 0;
}

/* 個別の運用メニューの文字（担当者の指示で大きく太く。単品メニューの .pr-row は変えない） */
.pr-ops-title {
	font-size: 18px;
}

.pr-ops .pr-row {
	padding: 18px 0;
	font-size: 17px;
	font-weight: 700;
}

.pr-ops .pr-row-num {
	font-size: 24px;
	font-weight: 700;
}

.pr-ops .pr-row-unit {
	font-size: 14px;
}

.pr-row-w {
	display: inline-block;
}

/* スマホ：名前の下に金額。箱の左右の余白を少しせまく */
@container (max-width: 760px) {
	.pr-ops {
		padding: 28px 24px;
	}

	/* とても狭い画面では、単位（円／月）を次の行へ */
	.pr-ops .pr-row-price {
		white-space: normal;
	}

	.pr-ops .pr-row {
		flex-direction: column;
		align-items: flex-start;
		gap: 2px;
		font-size: 16px;
	}
}

/* =========================================================
   モデルケース
   ========================================================= */
.pr-model {
	background: var(--bg);
	position: relative;
	overflow: hidden;
}

.pr-model-wm {
	right: -20px;
	top: 30px;
	font-size: 300px;
}

.pr-cases {
	display: flex;
	flex-wrap: wrap;
	gap: 24px;
}

.pr-case {
	flex: 1 1 340px;
	min-width: 0;
	background: #FFFFFF;
	border-radius: 32px;
	padding: 36px 34px;
	display: flex;
	flex-direction: column;
	gap: 16px;
	color: var(--navy);
}

.pr-case-head {
	margin: 0;
	display: flex;
	align-items: center;
	gap: 10px;
}

.pr-case-no {
	font-family: var(--font-serif);
	font-style: italic;
	font-size: 18px;
	color: var(--blue);
}

.pr-case-tag {
	border-radius: 999px;
	padding: 2px 12px;
	font-size: 12px;
	font-weight: 700;
}

.pr-case-tag--in { background: var(--mint); }
.pr-case-tag--try { background: var(--sage-pale2); }

.pr-case-tag--out {
	border: 1px solid var(--navy);
	padding: 1px 12px;
}

.pr-case-who {
	margin: 0 0 6px;
	font-size: 13px;
	font-weight: 700;
	color: var(--sage-dark);
}

.pr-case-want {
	margin: 0;
	font-size: 19px;
	font-weight: 700;
	line-height: 1.6;
}

.pr-case-menu {
	border-top: 1px solid rgba(14, 63, 92, .18);
}

.pr-case-row {
	margin: 0;
	padding: 12px 0;
	border-bottom: 1px solid rgba(14, 63, 92, .18);
	display: flex;
	justify-content: space-between;
	gap: 12px;
	font-size: 14px;
}

.pr-case-row-price {
	white-space: nowrap;
	font-weight: 700;
}

.pr-case-sum {
	margin-top: auto;
	background: var(--sage-pale);
	border-radius: 20px;
	padding: 20px 22px;
	display: flex;
	flex-wrap: wrap;
	gap: 12px 28px;
}

.pr-case-sum-label {
	margin: 0;
	font-size: 12px;
	font-weight: 700;
	color: #2E4652;
}

.pr-case-sum-num {
	margin: 2px 0 0;
	font-family: 'Space Grotesk', 'Zen Kaku Gothic New', sans-serif;
	font-size: 26px;
	font-weight: 500;
}

.pr-case-sum-unit {
	font-size: 13px;
	margin-left: 2px;
}

.pr-case-sum-term {
	margin: 2px 0 0;
	font-size: 20px;
	font-weight: 500;
}

.pr-subsidy {
	margin-top: 32px;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 16px 32px;
	background: #FFFFFF;
	border: 1.5px dashed rgba(14, 63, 92, .35);
	border-radius: 24px;
	padding: 24px 32px;
	color: var(--navy);
}

.pr-subsidy-title {
	margin: 0 0 4px;
	font-size: 16px;
	font-weight: 700;
}

.pr-subsidy-text {
	margin: 0;
	font-size: 14px;
	color: var(--text);
}

.pr-subsidy-link,
.pr-subsidy-link:hover {
	font-size: 14px;
	font-weight: 700;
	color: var(--navy);
}

.pr-model-note {
	margin: 20px 0 0;
	font-size: 12px;
	color: var(--text-light);
}

/* =========================================================
   単品メニュー
   ========================================================= */
.pr-single {
	background: #FFFFFF;
	position: relative;
	overflow: hidden;
}

.pr-single-ring {
	right: -240px;
	top: -240px;
	width: 600px;
	height: 600px;
}

.pr-single-list {
	color: var(--navy);
}

/* =========================================================
   ご注意事項
   ========================================================= */
.pr-notes {
	background: var(--bg);
}

.pr-notes-in {
	max-width: 1280px;
	margin: 0 auto;
	padding: 96px 40px 0;
}

.pr-notes-box {
	background: #FFFFFF;
	border-radius: 28px;
	padding: 40px 48px;
	color: var(--navy);
}

.pr-notes-title {
	margin: 0 0 16px;
	font-size: 18px;
	font-weight: 700;
}

.pr-notes-list {
	margin: 0;
	padding-left: 20px;
	font-size: 14px;
	color: var(--text);
	line-height: 2.1;
}