/* #198: align the dynamic front page with the approved front page design.
 * Keep this file CSS-only: the existing front-page.php settings, ordering,
 * post queries, and saved options must remain the source of content truth.
 *
 * ⚠ 参照元は `lp-templates/tiptop-home.html` から**承認済みモック
 * `_mockup/standard/front.html` へ移った**（2026-08-11。旧ファイルは削除済み）。
 * 正本は [docs/component-rules.md](../../docs/component-rules.md) と
 * [docs/typography-scale.md](../../docs/typography-scale.md)。
 */

.site-main--front .tiptop-front-content {
	--tiptop-front-wrap: min(calc(100% - var(--tt-gutter-desktop)), var(--tiptop-site-width, 1040px));
	--tiptop-front-wrap-wide: min(calc(100% - var(--tt-gutter-desktop)), 1120px);
	--tiptop-front-section-space: clamp(88px, 11vw, 152px);
	--tiptop-front-section-space-compact: clamp(72px, 9vw, 120px);
	--tiptop-front-card-gap: clamp(44px, 5vw, 68px);
	--tiptop-front-lead-width: 40rem;
	display: flex;
	flex-direction: column;
	background: var(--tt-color-base);
}

.site-main--front .tiptop-front-section {
	width: 100%;
}

.site-main--front .top-in,
.site-main--front .intro2-in,
.site-main--front .intro-services .content-area,
.site-main--front .intro-news .content-area,
.site-main--front .intro4 > .wp-block-group,
.site-main--front .front-content-card-list-wrap {
	width: var(--tiptop-front-wrap);
	margin-inline: auto;
}

.site-main--front .intro3 > .page-guide__inner {
	width: var(--tiptop-front-wrap-wide);
	margin-inline: auto;
}

/* Hero: mirror the centered LP hero while preserving editable fields. */
.site-main--front .intro1 {
	min-height: calc(100svh - var(--tiptop-header-height, 0px));
	display: grid;
	place-items: center;
	padding: clamp(80px, 11vw, 156px) 0 clamp(72px, 9vw, 120px);
	text-align: center;
}

.site-main--front .intro1 .title {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 0;
	width: min(100%, var(--tiptop-front-lead-width));
	margin-inline: auto;
}

.site-main--front .intro1 .main-img {
	width: min(280px, 66vw);
	max-width: 100%;
	margin: 0 auto 28px;
}

.site-main--front .intro1 .main-img img {
	display: block;
	width: 100%;
	height: auto;
	max-height: 220px;
	object-fit: contain;
}

.site-main--front .intro1 .main-txt {
	width: min(100%, var(--tiptop-front-lead-width));
	margin-inline: auto;
}

.site-main--front .intro1 .hero__eyebrow {
	margin: 0 0 22px;
	color: var(--tt-color-heading);
	font-size: var(--tt-text-label);
	font-weight: 700;
	letter-spacing: calc(0.24em + var(--tt-letter-add));
	text-transform: uppercase;
}

.site-main--front .intro1 h1 {
	max-width: var(--tiptop-front-lead-width);
	margin: 0 auto;
	color: var(--tt-color-heading);
	font-size: var(--tt-text-section);
	font-weight: 700;
	letter-spacing: calc(0.08em + var(--tt-letter-add));
	line-height: calc(1.55 * var(--tt-leading-scale));
}

.site-main--front .intro1 .main-txt > p:not(.hero__eyebrow) {
	max-width: var(--tiptop-front-lead-width);
	margin: 18px auto 0;
	color: var(--tt-color-muted);
	font-size: var(--tt-text-note);
	line-height: calc(2 * var(--tt-leading-scale));
}

/* Profile and career: match the LP profile grid and horizontal year cards. */
.site-main--front .intro2 {
	padding: clamp(80px, 9vw, 120px) 0 clamp(56px, 6vw, 80px);
}

.site-main--front .profile-contents {
	display: grid;
	grid-template-columns: 220px minmax(0, 1fr);
	gap: clamp(28px, 5vw, 72px);
	align-items: center;
	width: 100%;
}

.site-main--front .profile-contents .wp-block-image {
	width: 220px;
	margin: 0;
}

.site-main--front .profile-contents .wp-block-image img {
	display: block;
	width: 220px;
	height: 220px;
	border-radius: 0;
	object-fit: cover;
}

.site-main--front .prof-txt .eachTextAnime {
	margin: 0 0 14px;
	color: var(--tt-color-heading);
	font-weight: 700;
	letter-spacing: calc(0.08em + var(--tt-letter-add));
}

.site-main--front .prof-txt p:not(.eachTextAnime) {
	margin: 0;
	color: var(--tt-color-text);
	font-size: var(--tt-text-body);
	line-height: calc(2.15 * var(--tt-leading-scale));
}

/* Section headers and service cards. */
.site-main--front .intro-services,
.site-main--front .intro-news,
.site-main--front .intro4,
.site-main--front .intro3,
.site-main--front .free-space {
	padding-block: var(--tiptop-front-section-space);
}

/* フリースペース（Issue #934・管理画面の「フリースペース1・2」）
   見出し＋自由記述の本文だけ。画像もリンクも持たない、いちばん軽い節。
   モック(_mockup/standard/css/front.css)の --tt-measure/--tt-leading-title/--tt-leading-body は
   ライブ側に同名トークンが存在しないため、実測値(42em/1.7/2)を維持したままライブの命名規約
   （--tt-measure-reading、calc(<倍率> * var(--tt-leading-scale))）に置き換えて移植した。 */
/* 2026-08-16：コンテナ幅を足す。モックは section > .wrap--text > .free-space__inner の
 * 3層で、左右の余白は親の .wrap--text が持っていた。実サイトにはその層が無く
 * .free-space__inner だけを移植したため、読み幅(max-width)しか効かず、スマホでは
 * 文字が画面の端まで届いていた（実測：他セクションの中身が左12.5pxのところ左0px）。
 * 幅は同じトップ専用トークン --tiptop-front-measure を使う。他のトップの節
 * （.tiptop-about-summary__inner / .intro-news > .content-area）と同じ担い手に揃えるため。
 * --tt-width-base-wide は 781px以下で --tt-gutter-tablet(32px) 版へ切り替わる別系統で、
 * これを使うと他の節が12.5pxのところ16pxになり揃わない（実測で確認）。 */
.free-space__inner {
	width: var(--tiptop-front-measure);
	max-width: var(--tt-measure-reading);
	margin-inline: auto;
	text-align: center;
}

.site-main--front .free-space .free-space__title {
	margin: var(--tt-space-3) 0 var(--tt-space-4);
	font-size: var(--tt-text-heading);
	font-weight: var(--tt-weight-bold);
	letter-spacing: normal;
	line-height: calc(1.7 * var(--tt-leading-scale));
	color: var(--tiptop-contrast);
}

.site-main--front .free-space .free-space__body {
	color: var(--tiptop-muted);
	font-size: var(--tt-text-body);
	line-height: calc(2 * var(--tt-leading-scale));
}

.free-space__body > * + * {
	margin-top: var(--tt-space-4);
}

.site-main--front .intro-services .content-area,
.site-main--front .intro-news .content-area,
.site-main--front .intro4 .blog-in {
	text-align: center;
}

.site-main--front .intro-services .hero__eyebrow {
	margin: 0 0 12px;
}

.site-main--front .intro-services .tiptop-services-aside__title,
.site-main--front .intro-news .intro-news__title,
.site-main--front .intro4 .front-blog-heading__title {
	margin: 0;
	color: var(--tt-color-heading);
	font-size: var(--tt-text-section);
	font-weight: 400;
	letter-spacing: calc(0.1em + var(--tt-letter-add));
	line-height: calc(1.55 * var(--tt-leading-scale));
}

.site-main--front .intro-services .card-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--tiptop-front-card-gap);
	margin-top: clamp(52px, 6vw, 76px);
	text-align: left;
}

/* Content/works sections: keep dynamic content, but align with the approved
 * gallery mock (_mockup/standard/front.html #guide-web / #guide-doc). */

/* モック(front.css)の `.page-guide + .page-guide { border-top: ... }` に合わせ、
 * 隣接する2ブロックの境目だけ薄い罫線を引く。 */
.site-main--front .intro3.website + .intro3.siryou {
	border-top: 1px solid var(--tt-color-border);
}

.site-main--front .intro3 .page-guide__inner {
	display: grid;
	grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
	gap: clamp(32px, 6vw, 72px);
	align-items: center;
}

.site-main--front .intro3.siryou .page-guide__inner {
	grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
}

.site-main--front .intro3.siryou .page-guide__text {
	order: 2;
}

.site-main--front .intro3.siryou .page-guide__gallery {
	order: 1;
}

.site-main--front .intro3 .page-guide__inner--no-gallery {
	display: block;
	width: var(--tiptop-front-wrap);
	text-align: center;
}

.site-main--front .intro3 .page-guide__inner--no-gallery .page-guide__text {
	margin-inline: auto;
}

.site-main--front .intro3 .hero__eyebrow {
	margin-bottom: var(--tt-space-4);
}

.site-main--front .intro3 .page-guide__title {
	margin: 0 0 var(--tt-space-4);
	color: var(--tt-color-heading);
	font-size: var(--tt-text-heading);
	font-weight: var(--tt-weight-bold);
	letter-spacing: normal;
	line-height: calc(1.7 * var(--tt-leading-scale));
}

.site-main--front .intro3 p.page-guide__body {
	margin: 18px 0 var(--tt-space-6);
	color: var(--tt-color-muted);
	font-size: var(--tt-text-md);
	line-height: calc(2 * var(--tt-leading-scale));
}

/* ギャラリー表示（制作実績と共通の.tiptop-works-showcase__*）は、この見出し/リード文の
 * 直後に来るカード一覧側（front-content-card-list-wrap）のmargin-topが
 * front-page-adjustments-rules.cssのIssue #868対応で0に固定されているため、
 * intro3配下でも.hero__eyebrow/.page-guide__titleと同じく「後続要素側に余白を持たせる」
 * 契約をtitle/leadにも適用する（2026-08-15）。 */
.site-main--front .intro3 .tiptop-works-showcase__title {
	margin-bottom: var(--tt-space-4);
}

.site-main--front .intro3 .tiptop-works-showcase__lead {
	margin-bottom: var(--tt-space-4);
}

.site-main--front .intro3 .page-guide__gallery {
	display: grid;
	grid-template-columns: 1.2fr 1fr;
	grid-template-rows: repeat(2, minmax(0, 1fr));
	gap: var(--tt-space-4);
	aspect-ratio: 4 / 3;
}

.site-main--front .intro3 .page-guide__gallery--count-1 {
	grid-template-columns: 1fr;
	grid-template-rows: 1fr;
}

.site-main--front .intro3 .page-guide__gallery--count-2 {
	grid-template-rows: 1fr;
}

.site-main--front .intro3 .page-guide__tile {
	display: block;
	overflow: hidden;
	border-radius: var(--tt-radius-md);
	background: var(--tt-color-surface-alt);
}

.site-main--front .intro3 .page-guide__tile--lg {
	grid-row: 1 / 3;
}

.site-main--front .intro3 .page-guide__gallery--count-1 .page-guide__tile--lg,
.site-main--front .intro3 .page-guide__gallery--count-2 .page-guide__tile--lg {
	grid-row: auto;
}

.site-main--front .intro3 .page-guide__tile a {
	display: block;
	width: 100%;
	height: 100%;
}

.site-main--front .intro3 .page-guide__tile img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform var(--tt-motion-duration-fast) var(--tt-motion-easing-standard);
}

.site-main--front .intro3 .page-guide__tile:hover img {
	transform: scale(1.03);
}

.site-main--front .intro-news .more,
.site-main--front .intro4 .more {
	display: flex;
	justify-content: flex-end;
	margin-top: 28px;
}

/* モック（_mockup/standard/front.html #guide-web / #guide-doc）はページ導線の
 * セクション背景を持たない。パレット機構(color-palettes-button-states.css、
 * 本ファイルより後に読み込まれる)が .website/.siryou へ交互背景を当てるため、
 * このセクションだけ明示的に打ち消す(詳細度をintro3の追加で上回らせて解決)。 */
html[data-tiptop-palette] .site-main--front .tiptop-front-content .intro3.website,
html[data-tiptop-palette] .site-main--front .tiptop-front-content .intro3.siryou {
	background: transparent;
}

.site-main--front .front-content-card-list-wrap {
	margin-top: clamp(40px, 5vw, 64px);
}

.site-main--front .front-content-card-list--scroll {
	display: flex !important;
	grid-template-columns: none;
	gap: 22px;
	overflow-x: auto;
	padding-bottom: 14px;
	scroll-snap-type: x mandatory;
	-webkit-overflow-scrolling: touch;
}

.site-main--front .front-content-card-list--scroll .front-content-card {
	flex: 0 0 clamp(280px, 30vw, 336px);
	scroll-snap-align: start;
}

.site-main--front .front-content-card-list--scroll::-webkit-scrollbar {
	height: 8px;
}

.site-main--front .front-content-card-list--scroll::-webkit-scrollbar-track {
	background: var(--tt-color-surface);
}

.site-main--front .front-content-card-list--scroll::-webkit-scrollbar-thumb {
	border-radius: 0;
	background: var(--tt-color-muted);
}

/* News and CTA blocks. */
.site-main--front .intro-news {
	background: var(--tt-color-surface);
}

.site-main--front .intro-news .news-list {
	width: min(100%, 860px);
	margin: clamp(36px, 4vw, 52px) auto 0;
	text-align: left;
}

/* #519: .news-item の実DOMは .tiptop-news-item__link 1個だけを直下に持つため
 * （date/terms/badge/title/arrowは全てその内側）、この2カラムgrid前提は現行マークアップと
 * 噛み合わずリンク全体が第1カラム(8.5rem)へ押し込まれる崩れの原因だった。実レイアウトは
 * base-system.css の .tiptop-news-item__link グリッド契約（standard/immersive共通）に譲る。 */

.site-main--front .intro-news .more {
	width: min(100%, 860px);
	margin-inline: auto;
}

@media (max-width: 899px) {
	.site-main--front .intro3 .page-guide__inner,
	.site-main--front .intro3.siryou .page-guide__inner {
		grid-template-columns: 1fr;
		width: var(--tiptop-front-wrap);
	}

	.site-main--front .intro3.siryou .page-guide__text,
	.site-main--front .intro3.siryou .page-guide__gallery {
		order: initial;
	}

	.site-main--front .intro3 .page-guide__gallery {
		aspect-ratio: 16 / 10;
	}

	.site-main--front .intro-services .card-grid {
		grid-template-columns: 1fr;
		gap: 32px;
	}
}

@media (max-width: 760px) {
	.site-main--front .tiptop-front-content {
		--tiptop-front-wrap: min(calc(100% - var(--tt-gutter-tablet)), var(--tiptop-site-width, 1040px));
		--tiptop-front-wrap-wide: min(calc(100% - var(--tt-gutter-tablet)), 1120px);
		--tiptop-front-section-space: clamp(72px, 14vw, 104px);
	}

	.site-main--front .profile-contents {
		grid-template-columns: 1fr;
		justify-items: center;
		text-align: center;
	}

	.site-main--front .profile-contents .wp-block-image,
	.site-main--front .profile-contents .wp-block-image img {
		width: min(220px, 62vw);
		height: min(220px, 62vw);
	}

	.site-main--front .intro3 .page-guide__text {
		text-align: center;
	}

	.site-main--front .intro3 .more,
	.site-main--front .intro-news .more,
	.site-main--front .intro4 .more {
		justify-content: center;
	}
}

/* =====================================================================
 * 以下は front-home-lp-source-fixes.css (#198 follow-up: tighten first
 * Local feedback for the LP source alignment.) から 2026-07-18 に統合。
 * 旧ロード順は lp-source → fixes が隣接（間に挟まる CSS なし）のため、
 * 末尾追記＝全ルールの相対順を完全保存（カスケード等価）。
 * ===================================================================== */

/* Preserve lowercase Latin text across the front-page content instead of
 * forcing the old uppercase editorial treatment. Keep this as a top-page
 * override so saved option values stay untouched. Font family must come from
 * the selected font kit and global design tokens.
 */
.site-main--front .tiptop-front-content,
.site-main--front .tiptop-front-content * {
	text-transform: none;
}

/* Hero text must stay centered even when older front-page rules target .main-txt. */
.site-main--front .tiptop-front-content .intro1 .main-txt,
.site-main--front .tiptop-front-content .intro1 .main-txt > *,
.site-main--front .tiptop-front-content .intro1 .hero__eyebrow,
.site-main--front .tiptop-front-content .intro1 h1,
.site-main--front .tiptop-front-content .intro1 .main-txt > p {
	text-align: center;
}

.site-main--front .tiptop-front-content .intro1 .main-txt {
	display: block;
	margin-inline: auto;
}

.site-main--front .tiptop-front-content .intro1 h1,
.site-main--front .tiptop-front-content .intro1 .main-txt > p {
	margin-left: auto;
	margin-right: auto;
}

/* Keep non-background hero layouts aligned with the monochrome DS v2 palette
 * without hiding the registered background hero image.
 */
body:not(.tiptop-front-hero-type-background) .site-main--front .tiptop-front-content .intro1 {
	background: var(--tiptop-base);
	background-color: var(--tiptop-base);
}

body:not(.tiptop-front-hero-type-background) .site-main--front .tiptop-front-content .intro1 .title,
body:not(.tiptop-front-hero-type-background) .site-main--front .tiptop-front-content .intro1 .main-txt {
	border: 0;
	background: var(--tiptop-base);
	background-color: var(--tiptop-base);
	box-shadow: none;
}

body:not(.tiptop-front-hero-type-background) .site-main--front .tiptop-front-content .intro1 .main-txt > * {
	background: transparent;
	background-color: transparent;
}

.site-main--front .tiptop-front-content .intro1 .main-img,
.site-main--front .tiptop-front-content .intro1 .main-img img,
.site-main--front .tiptop-front-content .intro1 .main-img svg {
	filter: grayscale(1) saturate(0);
}

.site-main--front .tiptop-front-content .intro1 .main-img--site-logo a,
.site-main--front .tiptop-front-content .intro1 .main-img--site-title {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	text-decoration: none;
}

.site-main--front .tiptop-front-content .intro1 .main-img--site-title span {
	color: var(--tiptop-contrast);
	font-size: var(--tt-text-logo);
	font-weight: 700;
	letter-spacing: calc(0.08em + var(--tt-letter-add));
	line-height: 1;
	text-transform: lowercase;
}

.site-main--front .tiptop-front-content .profile-contents .wp-block-image,
.site-main--front .tiptop-front-content .profile-contents .wp-block-image img {
	border-radius: var(--tt-radius-pill);
}

.site-main--front .tiptop-front-content .profile-contents .wp-block-image {
	overflow: hidden;
}

.site-main--front .tiptop-front-content .profile-contents--no-image {
	grid-template-columns: minmax(0, 1fr);
	justify-items: center;
	text-align: center;
}

.site-main--front .tiptop-front-content .profile-contents--no-image .prof-txt {
	width: min(100%, var(--tiptop-front-lead-width, 40rem));
	margin-inline: auto;
}

/* Issue #837: the standard Services call emits this wrapper around the eyebrow
 * and heading. Keep those two labels together while the service rows set the
 * section height and therefore the sticky stop boundary. */
.site-main--front .tiptop-front-content .intro-services .tiptop-services-aside {
	display: grid;
	grid-column: 1;
	grid-row: 1 / -1;
	gap: var(--tt-space-4);
	align-self: start;
	position: sticky;
	top: 120px;
}

.site-main--front .tiptop-front-content .intro-services .tiptop-services-aside .hero__eyebrow {
	grid-column: 1;
	grid-row: auto;
	text-align: left;
}

.site-main--front .tiptop-front-content .intro-services .tiptop-services-aside > .tiptop-services-aside__title {
	grid-column: 1;
	grid-row: auto;
	margin: 0;
	font-size: var(--tt-text-section);
	line-height: calc(1.7 * var(--tt-leading-scale));
	text-align: left;
}

.site-main--front .tiptop-front-content .intro-services .tiptop-services-aside > .tiptop-services-aside__lead {
	grid-column: 1;
	grid-row: auto;
	margin: 0;
	max-width: 480px;
	color: var(--tt-base-paper-soft);
	line-height: calc(1.8 * var(--tt-leading-scale));
	text-align: left;
}

@media (max-width: 960px) {
	.site-main--front .tiptop-front-content .intro-services .tiptop-services-aside {
		grid-column: 1;
		grid-row: auto;
		position: static;
		top: auto;
	}
}