/* 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 {
		font-size: 16px;
		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 をモックに合わせる（2026-08-16・オーナー指示「揃える」）。モックは
	 * 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 .intro1,
	.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,
	.card p,
	.post-card__excerpt,
	.news-item__excerpt,
	.contact-page-intro p,
	.tiptop-front-content p,
	.tiptop-front-content li {
		/* 役割ごとの段を継承させるため、複数役割を束ねたモバイル専用サイズは置かない。 */
		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);
	}

	.tiptop-front-toolbar-toggle {
		width: 44px;
		height: 44px;
		min-width: 44px;
		min-height: 44px;
		border-radius: 999px;
	}

	/* front-utility-control-states.css の共通コントラクト(transparent surface)より詳細度で勝たせ、
	 * 画面下中央に単独で浮くボタンとして視認できる背景を持たせる。 */
	.tiptop-front-toolbar-shell .tiptop-front-toolbar-toggle {
		background: #171717;
		border-color: rgba(255, 255, 255, 0.3);
	}

}

@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 .intro1,
	.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;
}

.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: var(--tt-leading-base);
}

.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);
	}
}