@charset "UTF-8";
/* ==========================================================================
   ご案内系の下層ページ
   - 料金の目安（page-price.php）
   - 制作の流れ（page-flow.php）
   - 対応エリア（page-area.php）
   - BlueStudioについて（page-about.php）

   共通の部品（見出し・カード・表など）は common.css にあります。
   ブレイクポイントは common.css と同じ（768px / 1024px）
   ========================================================================== */


/* ==========================================================================
   料金：プランの比較表
   ========================================================================== */
.p-price-plan {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	border: 1px solid #D5DCE1;
	border-radius: 8px;
	background: #FFFFFF;
	box-shadow: var(--shadow-card);
}

.p-price-plan__table {
	width: 100%;
	min-width: 560px;
	border-collapse: collapse;
	color: var(--c-ink);
	font-size: 14px;
	line-height: 1.8;
}

.p-price-plan__table th,
.p-price-plan__table td {
	padding: 14px 12px;
	border-bottom: 1px solid #DDE3E7;
	text-align: center;
	vertical-align: middle;
}

.p-price-plan__table td {
	border-left: 1px solid #DDE3E7;
}

.p-price-plan__table tbody tr:last-child > * {
	border-bottom: none;
}

.p-price-plan__corner {
	width: 1%;
	background: #FFFFFF;
}

.p-price-plan__head {
	min-width: 150px;
	border-left: 1px solid rgba(255, 255, 255, 0.25);
	background: linear-gradient(120deg, var(--c-blue-700) 0%, var(--c-blue-600) 100%);
	color: #FFFFFF;
	white-space: nowrap;
}

.p-price-plan__en {
	display: block;
	color: var(--c-sky-200);
	font-family: var(--ff-en);
	font-size: 12px;
	font-weight: 500;
	line-height: 1.4;
	letter-spacing: 0.14em;
}

.p-price-plan__name {
	display: block;
	font-family: var(--ff-display);
	font-size: clamp(16px, calc(16px + 4 * (100vw - 390px) / 1050), 20px);
	font-weight: 700;
	line-height: 1.5;
}

.p-price-plan__table tbody th {
	border-right: 1px solid #DDE3E7;
	background: #F5F7F9;
	color: var(--c-navy-900);
	font-family: var(--ff-display);
	font-weight: 700;
	white-space: nowrap;
}

.p-price-plan__table strong {
	color: var(--c-navy-900);
	font-weight: 700;
}

.p-price-plan__price {
	background: #FAFCFD;
	white-space: nowrap;
}

.p-price-plan__num {
	margin-right: 4px;
	color: var(--c-band-from);
	font-family: var(--ff-en);
	font-size: clamp(40px, calc(40px + 16 * (100vw - 390px) / 1050), 56px);
	font-weight: 500;
	line-height: 1;
	letter-spacing: -0.01em;
}

.p-price-plan__unit {
	color: var(--c-navy-900);
	font-family: var(--ff-display);
	font-size: clamp(14px, calc(14px + 4 * (100vw - 390px) / 1050), 18px);
	font-weight: 700;
}

@media (min-width: 1024px) {
	.p-price-plan__table {
		font-size: 16px;
	}

	.p-price-plan__table th,
	.p-price-plan__table td {
		padding: 20px 24px;
	}

	.p-price-plan__corner {
		width: 220px;
	}

	.p-price-plan__head {
		width: 250px;
		padding-block: 22px;
	}
}


/* ==========================================================================
   料金：オプション・追加費用・ロゴ印刷物・期間
   ========================================================================== */

/* 「i」マークつきの補足 */
.p-price__info {
	display: flex;
	align-items: flex-start;
	gap: 14px;
	padding: 20px;
	border-radius: 8px;
	background: #FFFFFF;
	box-shadow: var(--shadow-card);
}

.p-price__info-mark {
	display: flex;
	flex-shrink: 0;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	margin-top: 2px;
	border-radius: 50%;
	background: var(--c-surface-soft);
	color: var(--c-blue-600);
	font-family: var(--ff-en);
	font-weight: 600;
}

/* 左に青い線がある強調 */
.p-price__highlight {
	position: relative;
	padding: 20px 20px 20px 42px;
	border-radius: 8px;
	background: var(--c-surface-gray);
	font-size: clamp(16px, calc(16px + 1 * (100vw - 390px) / 1050), 17px);
}

.p-price__highlight::before {
	content: "";
	position: absolute;
	top: 20px;
	bottom: 20px;
	left: 20px;
	width: 6px;
	border-radius: 3px;
	background: linear-gradient(180deg, var(--c-blue-600) 0%, var(--c-sky-400) 100%);
}

.p-price__schedule {
	align-items: start;
}

.p-price__schedule-col {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

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

	.p-price__highlight {
		padding: 24px 28px 24px 50px;
	}

	.p-price__highlight::before {
		top: 24px;
		bottom: 24px;
		left: 28px;
	}

	.p-price__graphic-col {
		width: 280px;
	}

	.p-price__schedule {
		gap: 40px;
	}
}

/* よくある質問（角丸パネル）の飾り */
.p-price__faq-glass--1 {
	--s: 76px;

	top: -24px;
	left: -24px;
}

.p-price__faq-glass--2 {
	display: none;
}

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

		top: -40px;
		left: -40px;
	}

	.p-price__faq-glass--2 {
		--s: 80px;
		--a: 0.42;

		top: 90px;
		left: 100px;
		display: block;
	}
}


/* ==========================================================================
   料金：公開後の保守（青い帯）
   ========================================================================== */
.p-price-maintenance__grid {
	bottom: 0;
	left: 0;
	width: 40%;
	height: 45%;
	opacity: 0.8;
	background-image: radial-gradient(rgba(255, 255, 255, 0.18) 1.3px, transparent 1.5px);
}

.p-price-maintenance__glass--1 {
	--s: 90px;

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

.p-price-maintenance__glass--2 {
	display: none;
}

.p-price-maintenance__summary {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.p-price-maintenance__price {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 8px;
	color: #FFFFFF;
}

.p-price-maintenance__label {
	font-family: var(--ff-display);
	font-size: clamp(24px, calc(24px + 6 * (100vw - 390px) / 1050), 30px);
	font-weight: 700;
}

.p-price-maintenance__num {
	font-family: var(--ff-en);
	font-size: clamp(80px, calc(80px + 40 * (100vw - 390px) / 1050), 120px);
	font-weight: 500;
	line-height: 0.9;
	letter-spacing: -0.02em;
}

.p-price-maintenance__tax {
	font-size: 14px;
}

.p-price-maintenance__lead {
	color: #FFFFFF;
	font-size: clamp(17px, calc(17px + 2 * (100vw - 390px) / 1050), 19px);
	font-weight: 500;
}

.p-price-maintenance__cards {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 16px;
}

.p-price-maintenance__note {
	padding: 20px 24px;
	border: 1px solid rgba(255, 255, 255, 0.28);
	border-radius: 8px;
	color: var(--c-on-band-lead);
}

@media (min-width: 1024px) {
	.p-price-maintenance__glass--1 {
		--s: 180px;

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

	.p-price-maintenance__glass--2 {
		--s: 96px;

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

	.p-price-maintenance__summary {
		display: grid;
		grid-template-columns: repeat(12, minmax(0, 1fr));
		column-gap: 24px;
		align-items: center;
	}

	.p-price-maintenance__price {
		grid-column: span 5;
	}

	.p-price-maintenance__lead {
		grid-column: 6 / span 7;
		padding-left: 40px;
		border-left: 1px solid rgba(255, 255, 255, 0.28);
	}

	.p-price-maintenance__cards {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 24px;
	}
}


/* ==========================================================================
   制作の流れ
   ========================================================================== */
.p-flow__steps {
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.p-flow-step {
	position: relative;
	display: flex;
	align-items: flex-start;
	gap: 16px;
}

/* 次のステップへつなぐ縦線（最後のステップにはなし） */
.p-flow-step:not(:last-child)::before {
	content: "";
	position: absolute;
	top: 20px;
	left: 19px;
	width: 2px;
	height: calc(100% + 20px);
	background: linear-gradient(180deg, var(--c-blue-600) 0%, var(--c-sky-400) 100%);
}

.p-flow-step__num {
	position: relative;
	z-index: 1;
	display: flex;
	flex-shrink: 0;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border: 2px solid var(--c-blue-600);
	border-radius: 50%;
	background: #FFFFFF;
	color: var(--c-blue-600);
	font-family: var(--ff-en);
	font-size: 16px;
	font-weight: 500;
}

.p-flow-step__card {
	display: flex;
	flex-direction: column;
	flex-grow: 1;
	gap: 12px;
	min-width: 0;
	padding: 20px;
	border: 1px solid var(--c-line);
	border-radius: 8px;
	background: #FFFFFF;
	box-shadow: var(--shadow-card);
}

.p-flow-step__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;
}

.p-flow-step__request {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px 10px;
	padding-top: 12px;
	border-top: 1px solid var(--c-line);
	font-size: 14px;
}

.p-flow-step__request-label {
	padding: 2px 10px;
	border-radius: 999px;
	background: #FCEDB5;
	color: #5E4300;
	font-family: var(--ff-display);
	font-weight: 700;
}

.p-flow__role {
	font-size: clamp(16px, calc(16px + 1 * (100vw - 390px) / 1050), 17px);
}

.p-flow__role strong {
	font-family: var(--ff-display);
	font-weight: 700;
}

.p-flow__schedule {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 24px;
	align-items: start;
}

.p-flow__block {
	display: flex;
	flex-direction: column;
	gap: 16px;
	padding-top: 28px;
	border-top: 1px solid var(--c-line);
}

.p-flow__block-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-table__table tbody th.p-flow__area-name {
	white-space: normal;
}

@media (min-width: 1024px) {
	.p-flow__steps {
		gap: 28px;
	}

	.p-flow-step {
		gap: 28px;
	}

	.p-flow-step:not(:last-child)::before {
		top: 24px;
		left: 23px;
		height: calc(100% + 28px);
	}

	.p-flow-step__num {
		width: 48px;
		height: 48px;
		font-size: 18px;
	}

	.p-flow-step__card {
		padding: 24px 28px;
	}

	.p-flow__schedule {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 40px;
	}
}


/* ==========================================================================
   対応エリア
   ========================================================================== */
.p-area__body {
	display: flex;
	flex-direction: column;
	gap: 28px;
}

.p-area__map {
	width: 100%;
	max-width: 520px;
	aspect-ratio: 520 / 640;
	overflow: hidden;
	border: 1px solid #FFFFFF;
	border-radius: 16px;
	background: var(--c-surface-gray);
	box-shadow: var(--shadow-card);
}

.p-area__map-svg {
	width: 100%;
	height: 100%;
}

.p-area__detail {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.p-area__note {
	font-size: 14px;
}

.p-area__online {
	max-width: 900px;
}

@media (min-width: 1024px) {
	.p-area__body {
		display: grid;
		grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
		gap: 40px;
		align-items: start;
	}

	.p-area__map {
		max-width: none;
	}
}


/* ==========================================================================
   BlueStudioについて
   ========================================================================== */
.p-about__message {
	display: flex;
	flex-direction: column;
	gap: 40px;
}

.p-about__photo {
	display: block;
	width: 100%;
	height: 360px;
	border-radius: 8px;
	object-fit: cover;
	object-position: center top; /* 顔が上の縁に近いので、上を基準に切り取る */
}

.p-about__message-text {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.p-about__greeting {
	font-weight: 500;
}

@media (min-width: 1024px) {
	.p-about__message {
		display: grid;
		grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
		gap: 48px;
		align-items: start;
	}
}


/* ==========================================================================
   プライバシーポリシー（本文はブロックエディタで編集）
   ========================================================================== */
.p-policy {
	display: flex;
	flex-direction: column;
	gap: 12px;
	width: 100%;
	max-width: 880px;
	margin-inline: auto;
}

/* 見出しごとに上に線を引いて、項目のまとまりを分ける */
.p-policy h2 {
	margin-top: 20px;
	padding-top: 24px;
	border-top: 1px solid var(--c-line);
	color: var(--c-navy-900);
	font-family: var(--ff-display);
	font-size: clamp(19px, calc(19px + 2 * (100vw - 390px) / 1050), 21px);
	font-weight: 700;
	line-height: 1.5;
}

.p-policy ul {
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding-left: 1.4em;
	list-style: disc;
}


/* ==========================================================================
   ページが見つからないとき（404）
   ========================================================================== */
.p-not-found__body {
	text-align: center;
}