/* Mobile and narrow-width safety fixes. */

html,
body {
	max-width: 100%;
	overflow-x: clip;
}

.site,
.site-main,
.tiptop-page-content,
.entry__content,
.wp-site-blocks {
	min-width: 0;
}

.entry__content iframe,
.entry__content embed,
.entry__content object,
.entry__content video,
.tiptop-page-content iframe,
.tiptop-page-content embed,
.tiptop-page-content object,
.tiptop-page-content video {
	max-width: 100%;
}

.entry__content table,
.tiptop-page-content table {
	display: block;
	max-width: 100%;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

.entry__content pre,
.tiptop-page-content pre {
	max-width: 100%;
	overflow-x: auto;
}

.tiptop-front-toolbar-toggle {
	width: 26px;
	height: 42px;
	min-width: 26px;
	min-height: 42px;
	padding: 0;
	border: 0;
	border-radius: 8px;
	line-height: 1;
}

.tiptop-front-toolbar-toggle__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

@media (max-width: 820px) {
	body {
		/* main.css の body と同値の再掲。あちらをトークン参照へ戻したので
		 * ここも合わせる（Issue #947）。 */
		font-size: var(--tt-text-body);
		line-height: calc(1.95 * var(--tt-leading-scale));
	}

	.content-area,
	.site-header__inner,
	.site-footer__inner,
	.tiptop-front-content .top-in,
	.tiptop-front-content .intro2-in,
	.tiptop-front-content .intro3,
	.tiptop-front-content .intro4 > .wp-block-group,
	.tiptop-front-content .intro-news .content-area {
		width: min(calc(100% - 32px), var(--tiptop-site-width));
	}

	.site-header {
		position: sticky;
		top: 0;
	}

	/* gap をモックに合わせる。モックは
	 * shared.css:1846 で --tt-space-4（16px）。実サイトは14pxで、ヘッダーの
	 * 「相談する」とハンバーガーの間隔が2px狭く、ボタンの右端位置がモックの
	 * 内側右から49pxに対して47pxになっていた（実測）。 */
	.site-header__inner {
		gap: var(--tt-space-4);
		min-height: 62px;
	}

	.site-branding,
	.site-branding__title {
		min-width: 0;
	}

	.site-branding__title {
		display: block;
		overflow: hidden;
		max-width: 62vw;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.custom-logo {
		max-width: min(180px, 56vw);
	}

	.archive-hero,
	.section,
	.content-layout .entry,
	.tiptop-front-content .top,
	.tiptop-front-content .intro2,
	.tiptop-front-content .intro3,
	.tiptop-front-content .intro4,
	.tiptop-front-content .intro-services,
	.tiptop-front-content .intro-news {
		padding-top: 64px;
		padding-bottom: 64px;
	}
	.entry__title{
		/* 承認済みモックは段の clamp() で可変にするため、ここでは文字サイズを上書きしない。 */
		line-height: calc(1.45 * var(--tt-leading-scale));
		letter-spacing: calc(0.04em + var(--tt-letter-add));
		word-break: keep-all;
		overflow-wrap: anywhere;
	}


	.archive-hero__title,
	.section h2,
	.section-heading-row h2 {
		word-break: keep-all;
		overflow-wrap: anywhere;
	}

	.archive-hero__lead,
	.entry__content,
	.entry__content p:not(:where(.tiptop-own-typography, .tiptop-own-typography *)),
	.card p:not(:where(.tiptop-own-typography, .tiptop-own-typography *)),
	.post-card__excerpt,
	.news-item__excerpt,
	.contact-page-intro p:not(:where(.tiptop-own-typography, .tiptop-own-typography *)),
	.tiptop-front-content p:not(:where(.tiptop-own-typography, .tiptop-own-typography *)),
	.tiptop-front-content li:not(:where(.tiptop-own-typography, .tiptop-own-typography *)) {
		/* 役割ごとの段を継承させるため、複数役割を束ねたモバイル専用サイズは置かない。 */
		line-height: calc(1.95 * var(--tt-leading-scale));
	}

	.card-grid,
	.post-list,
	.content-layout .post-list {
		grid-template-columns: 1fr;
		gap: 32px;
	}

	.post-card__body {
		padding-top: 16px;
	}

	.news-item,
	.tiptop-contact-form__row {
		grid-template-columns: 1fr;
		gap: 10px;
	}

	.term-list,
	.entry__meta,
	.post-card__meta,
	.news-item__meta {
		max-width: 100%;
		overflow-wrap: anywhere;
	}

	.term-list a,
	.entry__meta a,
	.post-card__meta a,
	.news-item__meta a,
	.tag-links a,
	.wp-block-post-terms a {
		max-width: 100%;
		white-space: normal;
	}

	.tiptop-front-content .profile-contents,
	.tiptop-front-content .website > .wp-block-group,
	.tiptop-front-content .siryou > .wp-block-group,
	.tiptop-front-content .intro4 > .wp-block-group > .wp-block-group {
		grid-template-columns: 1fr;
		gap: 32px;
	}

	.tiptop-front-content .siryou .wp-block-image {
		order: 0;
	}

	.tiptop-front-content .profile-contents .wp-block-image,
	.tiptop-front-content .website .wp-block-image,
	.tiptop-front-content .siryou .wp-block-image,
	.tiptop-front-content .intro4 .wp-block-image {
		margin-right: auto;
		margin-left: auto;
	}

	.front-content-card-list-wrap,
	.front-content-card-list--scroll {
		max-width: 100%;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
	}

	.front-content-card-list--scroll {
		scroll-snap-type: x proximity;
	}

	.front-content-card-list--scroll .post-card,
	.front-content-card-list--scroll .front-content-card {
		scroll-snap-align: start;
	}

	.wpcf7,
	.tiptop-contact-form {
		width: 100%;
		max-width: 100%;
	}

	.wpcf7 input:not([type="submit"]):not([type="checkbox"]):not([type="radio"]),
	.wpcf7 select,
	.wpcf7 textarea,
	.tiptop-contact-form input[type="text"],
	.tiptop-contact-form input[type="email"],
	.tiptop-contact-form select,
	.tiptop-contact-form textarea,
	.wpcf7-form-control:not(.wpcf7-submit):not(.wpcf7-acceptance):not(.wpcf7-checkbox):not(.wpcf7-radio) {
		max-width: 100%;
		font-size: var(--tt-text-subheading);
	}

	.wpcf7 input[type="submit"],
	.tiptop-contact-form__submit input {
		width: 100%;
	}

	.site-footer__inner {
		gap: 18px;
	}

	.site-footer__menu {
		width: 100%;
	}

	/* サイト自身のハンバーガーボタン(右上)と重なるため、スマホは画面下中央のフローティングボタンに切り替える。 */
	.tiptop-front-toolbar-shell {
		top: auto;
		right: auto;
		bottom: 18px;
		left: 50%;
		height: auto;
		transform: translateX(-50%);
	}

	.tiptop-front-toolbar {
		top: auto;
		left: 50%;
		right: auto;
		bottom: calc(100% + 8px);
		transform: translateX(-50%);
		width: min(360px, calc(100vw - 24px));
		max-height: min(80svh, 560px);
		overflow-y: auto;
		padding: 12px;
	}

	.tiptop-front-toolbar__label {
		width: 100%;
		padding: 0 0 8px;
		text-align: left;
	}

	.tiptop-front-toolbar__links {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		width: 100%;
		gap: 8px;
	}

	.tiptop-front-toolbar__links a {
		justify-content: center;
		min-width: 0;
		min-height: 34px;
		padding: 0.5rem 0.65rem;
		font-size: var(--tt-text-label);
	}

	/* front-utility-control-states.css の共通コントラクト(transparent surface / 26x42 / border:0)は
	 * このファイルより後に読まれ、素のクラス1個(0,1,0)では同詳細度で後勝ちされる。
	 * 丸いフローティングボタンの形も色も、シェル込み(0,2,0)で当てて勝たせる。
	 * ⚠ 形だけ勝たせて色を落とすと、背景 #171717 にアイコン色 currentColor
	 * (= シェルの var(--tiptop-contrast)。12パレット中9つが #111111〜#2e3038 の暗色)が
	 * 重なって真っ黒な塊になる(実測)。background と color は必ず一組で指定する。 */
	.tiptop-front-toolbar-shell .tiptop-front-toolbar-toggle {
		width: 44px;
		height: 44px;
		min-width: 44px;
		min-height: 44px;
		border: 1px solid rgba(255, 255, 255, 0.3);
		border-radius: 999px;
		background: #171717;
		color: #f2f2f0;
	}

	/* 共通コントラクトの hover / 展開中 / focus-visible は 0,2,0 かつ後読みなので、
	 * シェル込み(0,3,0)で暗い面と明るいアイコンを維持する。 */
	.tiptop-front-toolbar-shell .tiptop-front-toolbar-toggle:hover,
	.tiptop-front-toolbar-shell .tiptop-front-toolbar-toggle[aria-expanded="true"],
	.tiptop-front-toolbar-shell .tiptop-front-toolbar-toggle:focus-visible {
		border-color: rgba(255, 255, 255, 0.55);
		background: #2b2b2b;
		color: #ffffff;
	}

	/* outline は暗い面の外側(ページ背景の上)に出るため、currentColor(明色)では消える。 */
	.tiptop-front-toolbar-shell .tiptop-front-toolbar-toggle:focus-visible {
		outline: 2px solid #171717;
		outline-offset: 3px;
	}

}

@media (max-width: 430px) {
	.content-area,
	.site-header__inner,
	.site-footer__inner,
	.tiptop-front-content .top-in,
	.tiptop-front-content .intro2-in,
	.tiptop-front-content .intro3,
	.tiptop-front-content .intro4 > .wp-block-group,
	.tiptop-front-content .intro-news .content-area {
		width: min(calc(100% - var(--tt-gutter-mobile)), var(--tiptop-site-width));
	}

	.archive-hero,
	.section,
	.content-layout .entry,
	.tiptop-front-content .top,
	.tiptop-front-content .intro2,
	.tiptop-front-content .intro3,
	.tiptop-front-content .intro4,
	.tiptop-front-content .intro-services,
	.tiptop-front-content .intro-news {
		padding-top: 56px;
		padding-bottom: 56px;
	}

	.card,
	.service-detail {
		padding: 22px 18px;
	}

	.tiptop-front-toolbar__links a {
		white-space: normal;
		text-align: center;
		line-height: 1.2;
	}
}

/* Shared hero alignment using existing design tokens. */

.archive-hero,
.page-hero,
.tiptop-service-hero,
.tiptop-news-page .archive-hero,
.tiptop-works-page .archive-hero {
	padding-top: var(--tt-space-section);
	padding-bottom: var(--tt-space-7);
}

.archive-hero__inner,
.page-hero__inner,
.tiptop-news-page .archive-hero__inner,
.tiptop-works-page .archive-hero__inner {
	gap: var(--tt-space-8);
}

.archive-hero__inner.has-no-hero-image,
.page-hero__inner.has-no-hero-image,
.tiptop-news-page .archive-hero__inner.has-no-hero-image,
.tiptop-works-page .archive-hero__inner.has-no-hero-image {
	max-width: var(--tt-width-default);
}

.archive-hero__eyebrow,
.page-hero__eyebrow,
.tiptop-service-eyebrow,
.tiptop-news-detail__eyebrow,
.tiptop-work-detail__eyebrow,
.tiptop-news-page .archive-hero__eyebrow,
.tiptop-works-page .archive-hero__eyebrow {
	margin: 0 0 var(--tt-space-3);
}
.page-hero__title{
	margin-top: 0;
	font-size: var(--tt-text-hero);
	font-weight: 400;
	letter-spacing: 0;
	line-height: var(--tt-leading-tight);
	word-break: keep-all;
	overflow-wrap: anywhere;
}


.archive-hero__title,
.tiptop-service-hero h1,
.tiptop-news-detail__title,
.tiptop-work-detail__title,
.tiptop-news-page .archive-hero__title,
.tiptop-works-page .archive-hero__title {
	margin-top: 0;
	word-break: keep-all;
	overflow-wrap: anywhere;
}

/* 一覧ヒーローのリードの行間をモックへ（Issue #1022）。
 * `--tt-leading-base`（1.95）だったが、承認済みモックの `.page-hero__lead` は
 * **2.0倍**で、news / blog / works / service の4ファイルすべて同じ値だった
 * （13.44px に対し 26.88px）。**このルールが勝者**——`main.css` と `news-page.css` は
 * どちらも 2.05倍 を指定しているが、同じ詳細度でこのファイルが後に積まれるため
 * 効いていない（3ファイルが3つの値を主張している状態。整理は別途）。
 * モバイル（≤820px）の 1.95倍 は既存の意図として残す。 */
.archive-hero__lead,
.tiptop-news-page .archive-hero__lead,
.tiptop-works-page .archive-hero__lead {
	max-width: var(--tt-width-narrow);
	margin: var(--tt-space-5) 0 0;
	font-size: var(--tt-text-note);
	font-weight: 500;
	line-height: calc(2 * var(--tt-leading-scale));
}

.tiptop-news-detail__meta,
.tiptop-work-detail__meta {
	margin-top: var(--tt-space-5);
}

@media (max-width: 640px) {
	.archive-hero,
	.page-hero,
	.tiptop-service-hero,
	.tiptop-news-page .archive-hero,
	.tiptop-works-page .archive-hero {
		padding-top: var(--tt-space-7);
		padding-bottom: var(--tt-space-6);
	}

	.archive-hero__inner,
	.page-hero__inner,
	.tiptop-news-page .archive-hero__inner,
	.tiptop-works-page .archive-hero__inner {
		gap: var(--tt-space-6);
	}
}