@charset "UTF-8";

/*
 * v7.4.6 PC / mobile display audit.
 * Keep Japanese phrases together without forcing narrow-screen overflow.
 */

.tn-site :where(
	h1,
	h2,
	h3,
	.tn-v72-service-row h3,
	.tn-product-faq summary,
	.tn-cyber-faq summary,
	.tn-price-faq-list summary
) {
	word-break: auto-phrase;
	overflow-wrap: normal;
	line-break: strict;
	text-wrap: balance;
}

.tn-site main :where(p, li, dd) {
	word-break: auto-phrase;
	overflow-wrap: break-word;
	line-break: strict;
	text-wrap: pretty;
}

/*
 * These headings already sit in a narrow text column. The hard-coded line
 * break made both phrases wrap again on desktop, creating four short lines.
 */
.tn-product-intro__copy h2 br,
.tn-cyber-intro__copy h2 br {
	display: none;
}

.tn-product-intro__copy h2 {
	font-size: clamp(2rem, 2.6vw, 2.25rem);
	line-height: 1.34;
	text-wrap: pretty;
}

.tn-cyber-intro__copy h2 {
	font-size: clamp(1.9rem, 2.55vw, 2.4rem);
	line-height: 1.42;
	text-wrap: pretty;
}

/*
 * Accepted generated asset: security-camera system diagram.
 * The original icon-only diagram remains as accessible labelled markup,
 * while its visual nodes are replaced by the approved explanatory image.
 */
.tn-product-page--camera .tn-product-diagram {
	display: block;
	width: 100%;
	aspect-ratio: 16 / 9;
	min-height: 0;
	overflow: hidden;
	border: 1px solid var(--tn-product-line);
	background:
		#fff
		url("../images/security-camera-system.png")
		center / contain
		no-repeat;
}

.tn-product-page--camera .tn-product-diagram > * {
	display: none;
}

.tn-v72-intro h2,
.tn-v72-support h2,
.tn-v72-faq h2 {
	font-size: clamp(1.85rem, 2.65vw, 2.4rem);
}

@media (max-width: 640px) {
	/*
	 * Page-title line breaks were authored for desktop. Let the mobile width
	 * determine the cleanest break instead.
	 */
	.tn-page-hero h1 br {
		display: none;
	}

	.tn-page-hero h1 {
		font-size: clamp(1.75rem, 7.4vw, 2rem);
		line-height: 1.42;
	}

	.tn-product-heading h2,
	.tn-product-split h2 {
		font-size: clamp(1.65rem, 7.2vw, 1.85rem);
		line-height: 1.42;
	}

	.tn-product-intro__copy h2 {
		font-size: clamp(1.55rem, 6.6vw, 1.7rem);
		line-height: 1.46;
	}

	.tn-product-page-businessphone .tn-product-intro__copy h2 {
		font-size: 1.55rem;
	}

	.tn-cyber-section-heading h2,
	.tn-cyber-split-heading h2,
	.tn-cyber-vpn h2,
	.tn-cyber-limit h2 {
		font-size: clamp(1.55rem, 6.8vw, 1.8rem);
		line-height: 1.45;
	}

	.tn-cyber-intro__copy h2 {
		font-size: clamp(1.5rem, 6.35vw, 1.65rem);
		line-height: 1.5;
	}

	.tn-price-summary__copy h2 {
		font-size: clamp(1.75rem, 7.7vw, 1.95rem);
		line-height: 1.42;
	}

	/*
	 * Five-step blocks were needlessly tall on phones. Keep the step number in
	 * a fixed left column and give the explanatory text the full remaining width.
	 */
	.tn-product-steps li,
	.tn-cyber-flow li {
		display: grid;
		grid-template-columns: 2.7rem minmax(0, 1fr);
		align-items: start;
		column-gap: .55rem;
		min-height: 0;
		padding: 1.45rem 1.25rem;
	}

	.tn-product-steps li > span,
	.tn-cyber-flow li > span {
		grid-column: 1;
		grid-row: 1 / span 2;
		margin: .18rem 0 0;
	}

	.tn-product-steps li > h3,
	.tn-product-steps li > p,
	.tn-cyber-flow li > h3,
	.tn-cyber-flow li > p {
		grid-column: 2;
	}

	.tn-product-steps li > p {
		margin-top: .45rem;
	}

	.tn-cyber-flow li > h3 {
		margin-bottom: .4rem;
	}

	.tn-contact-guide__phone strong {
		font-size: clamp(1.85rem, 9vw, 2.35rem);
		letter-spacing: .01em;
	}

	.tn-contact-shell,
	.tn-contact-guide {
		min-width: 0;
	}

	.tn-product-page--camera .tn-product-diagram {
		margin-inline: 0;
	}
}