/* =============================================================================
   Page: TOP — トップページ全セクション
   DESIGN.md tokens 準拠、editorial monochrome
   ========================================================================== */

.tt-top-page {
	padding-bottom: clamp(var(--space-8), 8vw, var(--space-9));
}

/* --- ユーティリティ: SP 改行 ------------------------------------- */

/* PC では改行/コロンを通常表示、SP (≤768px) でのみ改行/非表示に切り替える。
   テキスト中の <br class="tt-br-sp"> と <span class="tt-hide-sp"> を制御。 */
.tt-br-sp {
	display: none;
}

.tt-hide-sp {
	display: inline;
}

@media (max-width: 768px) {
	.tt-br-sp {
		display: inline;
	}

	.tt-hide-sp {
		display: none;
	}
}

/* --- 共通: セクション間隔 ----------------------------------------- */

.tt-top-section {
	padding: clamp(var(--space-8), 9vw, var(--space-9)) 0;
}

/* FV 直後のセクションは雫 (shape-drip) が下に張り出すぶん、
   余分に padding-top を確保。SPでは雫が小さい (60px) のでmin値も小さく。 */
.tt-top-fv + .tt-top-section {
	padding-top: clamp(100px, 20vw, 260px);
}

/* --- セクションタイトルは components/section-title.css に分離済み --- */

/* =============================================================================
   FV (First View)
   ========================================================================== */

.tt-top-fv {
	position: relative;
	padding: clamp(var(--space-8), 10vw, var(--space-9)) 0 clamp(var(--space-6), 6vw, var(--space-8));
	background: var(--tt-bg); /* #EEEEEE */
}

.tt-top-fv__title {
	position: relative;
	margin: 0 0 clamp(var(--space-7), 5vw, var(--space-8));
	font-size: 0;
	line-height: 0;
	text-align: center;
}

.tt-top-fv__title-img {
	display: block;
	width: 100%;
	max-width: 1150px;
	height: auto;
	margin: 0 auto;
}

.tt-top-fv__title-img--sp {
	display: none;
}

@media (max-width: 640px) {
	.tt-top-fv__title-img--pc {
		display: none;
	}

	.tt-top-fv__title-img--sp {
		display: block;
		max-width: 370px;
	}
}

/* FV 動画 (本番準拠: タイトルより狭く、中央寄せ) */
.tt-top-fv__movie {
	position: relative;
	width: 100%;
	max-width: 880px;
	aspect-ratio: 16 / 9;
	margin: 0 auto;
	background: #000;
	overflow: hidden;
	border-radius: var(--radius-card);
}

.tt-top-fv__movie-video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* =============================================================================
   News セクション (EmbedSocial フィード)
   ========================================================================== */

.tt-top-news {
	max-width: 1200px;
	margin: 0 auto;
}

.tt-top-news .embedsocial-hashtag {
	min-height: 200px;
}

.tt-top-news .es-widget-branding {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin-top: var(--space-4);
	font-size: 12px;
	color: var(--tt-muted);
}

.tt-top-news .es-widget-branding img {
	width: 16px;
	height: 16px;
}

/* =============================================================================
   About セクション
   ========================================================================== */

/* About セクション内の装飾的な鳥イラスト (右上) */
#top-about {
	position: relative;
}

.tt-top-about__hawks {
	position: absolute;
	top: clamp(40px, 6vw, 80px);
	right: clamp(280px, 30vw, 600px);
	width: clamp(200px, 28vw, 420px);
	height: auto;
	pointer-events: none;
	z-index: 0;
}

@media (max-width: 1024px) {
	.tt-top-about__hawks {
		display: none;
	}
}

.tt-top-about__lead {
	margin: 0 0 clamp(var(--space-4), 2vw, var(--space-5));
	font-family: var(--font-heading);
	font-size: clamp(20px, 2.4vw, 28px);
	font-weight: var(--fw-bold);
	letter-spacing: var(--tracking-heading);
	line-height: 1.6;
	color: var(--tt-ink);
}

.tt-top-about__intro {
	margin: 0 0 clamp(var(--space-7), 5vw, var(--space-8));
	font-size: clamp(15px, 1.6vw, 17px);
	line-height: 2;
	color: var(--tt-ink);
}

/* メイン: PC は 2 カラム (スライダー左 + 詳細右 + CTA右下)
   SP は 詳細左 + 小スライダー右 + CTA中央下 */
.tt-top-about__main {
	display: grid;
	grid-template-columns: minmax(220px, 320px) 1fr;
	grid-template-areas:
		"slider details"
		"slider cta";
	gap: clamp(var(--space-6), 5vw, var(--space-8));
	align-items: start;
}

.tt-top-about__slider-wrap {
	grid-area: slider;
}

.tt-top-about__details {
	grid-area: details;
}

.tt-top-about__cta {
	grid-area: cta;
}

@media (max-width: 768px) {
	.tt-top-about__main {
		grid-template-columns: 1fr 110px;
		grid-template-areas:
			"details slider"
			"cta cta";
		gap: var(--space-5) var(--space-4);
	}

	.tt-top-about__cta {
		text-align: center;
	}
}

/* スライダーラップ (slider + dots) */
.tt-top-about__slider-wrap {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--space-3);
}

/* スライダー本体 (CSS scroll-snap) */
.tt-top-about__slider {
	position: relative;
	display: flex;
	width: 100%;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	scrollbar-width: none;
}

.tt-top-about__slider::-webkit-scrollbar {
	display: none;
}

.tt-top-about__slide {
	flex: 0 0 100%;
	scroll-snap-align: center;
	scroll-snap-stop: always;
	display: flex;
	align-items: center;
	justify-content: center;
	height: clamp(180px, 28vw, 320px);
}

@media (max-width: 768px) {
	.tt-top-about__slide {
		height: 160px;
	}

	.tt-top-about__dots {
		display: none;
	}
}

.tt-top-about__slide img {
	display: block;
	max-width: 100%;
	max-height: 100%;
	width: auto;
	height: auto;
	object-fit: contain;
}

/* ナビゲーション ドット */
.tt-top-about__dots {
	display: flex;
	gap: var(--space-2);
	justify-content: center;
}

.tt-top-about__dot {
	appearance: none;
	width: 10px;
	height: 10px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgba(0, 0, 0, 0.25);
	cursor: pointer;
	transition: background var(--dur-base) var(--ease), transform var(--dur-fast) var(--ease);
}

.tt-top-about__dot:hover {
	background: rgba(0, 0, 0, 0.5);
}

.tt-top-about__dot.is-active {
	background: var(--tt-ink);
	transform: scale(1.15);
}

.tt-top-about__dot:focus-visible {
	outline: 2px solid var(--tt-ink);
	outline-offset: 3px;
}

/* 詳細テキスト + CTA (右カラム) */
.tt-top-about__details {
	font-size: clamp(15px, 1.6vw, 17px);
	line-height: 2;
	color: var(--tt-ink);
}

.tt-top-about__details p {
	margin: 0 0 var(--space-4);
}

.tt-top-about__details p:last-of-type {
	margin-bottom: clamp(var(--space-6), 4vw, var(--space-7));
}

.tt-top-about__cta {
	text-align: right;
}

@media (max-width: 480px) {
	.tt-top-about__cta {
		text-align: center;
	}

	.tt-top-about__cta .tt-btn {
		width: 100%;
	}
}

/* =============================================================================
   Studio Gallery (image grid + lightbox)
   ========================================================================== */

.tt-top-gallery {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: clamp(var(--space-4), 2.5vw, var(--space-6));
}

@media (max-width: 768px) {
	.tt-top-gallery {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 480px) {
	.tt-top-gallery {
		grid-template-columns: 1fr;
	}
}

.tt-top-gallery__item {
	margin: 0;
}

.tt-top-gallery__btn {
	display: block;
	width: 100%;
	padding: 0;
	border: 0;
	background: transparent;
	cursor: pointer;
	border-radius: var(--radius-card);
	overflow: hidden;
	aspect-ratio: 16 / 10;
}

.tt-top-gallery__btn img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform var(--dur-slow) var(--ease);
}

.tt-top-gallery__btn:hover img,
.tt-top-gallery__btn:focus-visible img {
	transform: scale(1.05);
}

.tt-top-gallery__btn:focus-visible {
	outline: 2px solid var(--tt-ink);
	outline-offset: 2px;
}

/* --- Lightbox --- */

.tt-lightbox {
	margin: auto;
	max-width: 90vw;
	max-height: 90vh;
	padding: 0;
	border: 0;
	background: transparent;
	overflow: visible;
}

.tt-lightbox::backdrop {
	background: rgba(0, 0, 0, 0.85);
}

.tt-lightbox__img {
	display: block;
	max-width: 90vw;
	max-height: 90vh;
	width: auto;
	height: auto;
}

.tt-lightbox__close {
	position: absolute;
	top: -40px;
	right: 0;
	width: 32px;
	height: 32px;
	padding: 0;
	background: transparent;
	border: 0;
	color: #fff;
	font-size: 32px;
	line-height: 1;
	cursor: pointer;
	font-family: system-ui, sans-serif;
}

.tt-lightbox__close:hover {
	opacity: 0.7;
}

/* =============================================================================
   Artists & Gallery (TOP内プレビュー)
   ========================================================================== */

.tt-top-artists__intro {
	max-width: var(--container-sm);
	margin: 0 auto clamp(var(--space-7), 5vw, var(--space-8));
	text-align: center;
	font-size: clamp(15px, 1.6vw, 17px);
	line-height: 2;
	color: var(--tt-ink);
}

.tt-top-artists {
	list-style: none;
	margin: 0 0 clamp(var(--space-7), 5vw, var(--space-8));
	padding: 0;
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: clamp(var(--space-6), 4vw, var(--space-8)) clamp(var(--space-6), 4vw, var(--space-7));
	max-width: 1100px;
	margin-inline: auto;
	margin-bottom: clamp(var(--space-7), 5vw, var(--space-8));
}

@media (max-width: 640px) {
	.tt-top-artists {
		grid-template-columns: 1fr;
		row-gap: var(--space-8);
	}
}

.tt-top-artist {
	display: block;
}

/* 写真 + ロゴ の横並び (画像エリア)
   写真は横長 (landscape)、ロゴは縦長 (portrait) で同じ高さに揃える */
.tt-top-artist__media {
	display: grid;
	grid-template-columns: 1.7fr 1fr;
	gap: clamp(var(--space-3), 1.5vw, var(--space-4));
	align-items: stretch;
	margin: 0 0 clamp(var(--space-4), 2vw, var(--space-5));
}

.tt-top-artist__photo {
	overflow: hidden;
	border-radius: 2px;
	background: var(--tt-bg);
	height: clamp(200px, 22vw, 280px);
}

.tt-top-artist__photo img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}

.tt-top-artist__logo {
	overflow: hidden;
	background: transparent;
	height: clamp(200px, 22vw, 280px);
}

.tt-top-artist__logo img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
}

/* 名前 + 役職 (横並び) */
.tt-top-artist__head {
	display: flex;
	align-items: baseline;
	gap: clamp(var(--space-3), 2vw, var(--space-5));
	margin: 0 0 var(--space-3);
}

.tt-top-artist__name {
	font-family: var(--font-display);
	font-size: clamp(22px, 2.6vw, 30px);
	font-weight: var(--fw-display);
	letter-spacing: var(--tracking-display);
	color: var(--tt-ink);
	line-height: 1;
}

.tt-top-artist__role {
	font-family: var(--font-body);
	font-size: clamp(12px, 1.3vw, 14px);
	font-weight: var(--fw-body);
	letter-spacing: 0.04em;
	color: var(--tt-ink);
}

/* 得意分野説明 */
.tt-top-artist__desc {
	margin: 0;
	font-family: var(--font-body);
	font-size: clamp(13px, 1.5vw, 15px);
	line-height: 1.8;
	color: var(--tt-ink);
}

/* =============================================================================
   共通テキスト + CTA
   ========================================================================== */

.tt-top-text {
	max-width: var(--container-sm);
	margin: 0 auto clamp(var(--space-6), 4vw, var(--space-7));
	text-align: center;
	font-size: clamp(15px, 1.6vw, 17px);
	line-height: 2;
	color: var(--tt-ink);
}

.tt-top-cta {
	text-align: center;
}

@media (max-width: 480px) {
	.tt-top-cta .tt-btn {
		width: 100%;
	}
}

/* =============================================================================
   Price セクション
   ========================================================================== */

.tt-top-price__intro {
	margin: 0 0 clamp(var(--space-7), 5vw, var(--space-8));
	font-size: clamp(15px, 1.6vw, 17px);
	line-height: 2;
	color: var(--tt-ink);
}

.tt-top-price__main {
	display: grid;
	grid-template-columns: 1.4fr 1fr;
	gap: clamp(var(--space-6), 5vw, var(--space-8));
	align-items: stretch;
}

.tt-top-price__left {
	min-width: 0;
}

.tt-top-price__img {
	display: block;
	width: 100%;
	height: auto;
	margin: 0 0 clamp(var(--space-4), 2vw, var(--space-5));
	border-radius: var(--radius-card);
}

.tt-top-price__desc {
	margin: 0;
	font-size: clamp(14px, 1.5vw, 16px);
	line-height: 1.8;
	color: var(--tt-ink);
	text-align: center;
}

.tt-top-price__right {
	min-width: 0;
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: clamp(var(--space-5), 3vw, var(--space-7));
}

.tt-top-price__contact {
	margin: 0;
	font-size: clamp(14px, 1.5vw, 16px);
	line-height: 2;
	color: var(--tt-ink);
}

.tt-top-price__cta {
	display: flex;
	justify-content: flex-end;
}

@media (max-width: 768px) {
	.tt-top-price__main {
		grid-template-columns: 1fr;
		gap: var(--space-6);
	}

	.tt-top-price__right {
		padding-top: 0;
	}

	.tt-top-price__contact {
		text-align: center;
	}

	.tt-top-price__cta {
		justify-content: center;
	}
}

@media (max-width: 480px) {
	.tt-top-price__cta .tt-btn {
		width: 100%;
	}
}

/* =============================================================================
   Work flow セクション (ジグザグレイアウト)
   ========================================================================== */

.tt-top-flow {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 0;
}

/* --- 各ステップ: icon | arrow | box (or box | arrow | icon) を 1 行で配置 --- */
.tt-top-flow__step {
	display: grid;
	grid-template-columns: 1fr 0.6fr 1.7fr;
	gap: clamp(var(--space-3), 2vw, var(--space-5));
	align-items: center;
}

/* Step 4 (final): box | CTA のみ
   他ステップと同じく 3.3fr 相当のロー分割で box 幅を揃える */
.tt-top-flow__step--final {
	grid-template-columns: 1.7fr 1.6fr;
}

.tt-top-flow__step--final .tt-top-flow__box { order: 1; }
.tt-top-flow__step--final .tt-top-flow__cta { order: 2; }

/* Reverse (Step 2): box | arrow | icon */
.tt-top-flow__step--reverse {
	grid-template-columns: 1.7fr 0.6fr 1fr;
}

/* --- 矢印 (各ステップ内) --- */
.tt-top-flow__arrow {
	display: flex;
	align-items: center;
	justify-content: center;
	pointer-events: none;
}

.tt-top-flow__arrow img {
	display: block;
	width: 100%;
	max-width: 120px;
	height: auto;
}

/* デフォルト: PC 用矢印を表示、SP用は非表示
   (`.tt-top-flow__arrow img` の specificity に勝つため親もセレクタに含める) */
.tt-top-flow__arrow img.tt-top-flow__arrow-pc { display: block; }
.tt-top-flow__arrow img.tt-top-flow__arrow-sp { display: none; }

/* --- ボックス (背景透過 + ドロップシャドウ) --- */
.tt-top-flow__box {
	display: flex;
	align-items: center;
	gap: clamp(var(--space-4), 3vw, var(--space-6));
	padding: clamp(var(--space-4), 2.5vw, var(--space-6)) clamp(var(--space-5), 3.5vw, var(--space-7));
	background: transparent;
	border: 0;
	border-radius: var(--radius-card);
	box-shadow: 0 6px 24px rgba(0, 0, 0, 0.08), 0 2px 8px rgba(0, 0, 0, 0.04);
	min-height: clamp(110px, 12vw, 160px);
}

.tt-top-flow__num {
	flex: 0 0 auto;
	font-family: var(--font-display);
	font-size: clamp(48px, 5.5vw, 72px);
	font-weight: var(--fw-display);
	letter-spacing: var(--tracking-display);
	color: var(--tt-ink);
	line-height: 1;
}

.tt-top-flow__title {
	margin: 0;
	font-family: var(--font-heading);
	font-size: clamp(16px, 1.9vw, 22px);
	font-weight: var(--fw-bold);
	letter-spacing: 0.03em;
	line-height: 1.4;
	color: var(--tt-ink);
}

/* --- アイコン (高さを固定して全行を均等に) --- */
.tt-top-flow__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	height: clamp(140px, 16vw, 200px);
}

.tt-top-flow__icon img {
	display: block;
	width: auto;
	max-width: 100%;
	height: 100%;
	max-height: 100%;
	object-fit: contain;
}

/* --- CTA (最後のステップの右側) --- */
.tt-top-flow__cta {
	display: flex;
	align-items: center;
	justify-content: center;
}

/* --- レスポンシブ --- */
@media (max-width: 768px) {
	.tt-top-flow {
		gap: var(--space-3);
	}

	/* SP layout:
	   行1: box (全幅)
	   行2: icon | arrow (横並び) — reverse step は順番を逆に */
	.tt-top-flow__step {
		grid-template-columns: 1fr 1fr;
		grid-template-areas:
			"box  box"
			"icon arrow";
		gap: var(--space-2) 0;
	}

	/* Step 2 (reverse): arrow を左、icon を右 */
	.tt-top-flow__step--reverse {
		grid-template-areas:
			"box    box"
			"arrow  icon";
	}

	.tt-top-flow__step .tt-top-flow__box   { grid-area: box; }
	.tt-top-flow__step .tt-top-flow__icon  { grid-area: icon; }
	.tt-top-flow__step .tt-top-flow__arrow { grid-area: arrow; }

	/* icon と arrow を中央に寄せる: 通常 step は icon を右寄せ、arrow を左寄せ */
	.tt-top-flow__step:not(.tt-top-flow__step--reverse) .tt-top-flow__icon {
		justify-content: flex-end;
	}

	.tt-top-flow__step:not(.tt-top-flow__step--reverse) .tt-top-flow__arrow {
		justify-content: flex-start;
	}

	/* reverse は逆: arrow を右、icon を左 */
	.tt-top-flow__step--reverse .tt-top-flow__arrow {
		justify-content: flex-end;
	}

	.tt-top-flow__step--reverse .tt-top-flow__icon {
		justify-content: flex-start;
	}

	/* reverse step の SP 矢印は左右反転 (本番準拠) */
	.tt-top-flow__step--reverse .tt-top-flow__arrow img.tt-top-flow__arrow-sp {
		transform: scaleX(-1);
	}

	/* Step 4: box (上) → cta (下) */
	.tt-top-flow__step--final {
		grid-template-columns: 1fr;
		grid-template-areas:
			"box"
			"cta";
		gap: var(--space-4);
	}

	.tt-top-flow__step--final .tt-top-flow__box { grid-area: box; }
	.tt-top-flow__step--final .tt-top-flow__cta { grid-area: cta; }

	/* SP用矢印に切替 (specificity 揃え) */
	.tt-top-flow__arrow img.tt-top-flow__arrow-pc { display: none; }
	.tt-top-flow__arrow img.tt-top-flow__arrow-sp { display: block; }

	.tt-top-flow__arrow img {
		max-width: 80px;
	}

	.tt-top-flow__icon {
		height: 110px;
	}

	.tt-top-flow__icon img {
		max-width: 140px;
	}

	.tt-top-flow__box {
		padding: var(--space-4) var(--space-5);
		gap: var(--space-4);
		min-height: 80px;
	}

	.tt-top-flow__num {
		font-size: 36px;
	}

	.tt-top-flow__title {
		font-size: 14px;
	}
}

/* =============================================================================
   Faq セクション (アコーディオン)
   ========================================================================== */

.tt-top-faq {
	margin: 0 0 clamp(var(--space-7), 5vw, var(--space-8));
}

.tt-top-faq__item {
	border-bottom: 1px solid var(--tt-line);
}

/* デフォルト marker 非表示 */
.tt-top-faq__item summary {
	list-style: none;
	cursor: pointer;
}

.tt-top-faq__item summary::-webkit-details-marker {
	display: none;
}

.tt-top-faq__question {
	display: flex;
	align-items: center;
	gap: clamp(var(--space-3), 2vw, var(--space-5));
	padding: clamp(var(--space-4), 2.5vw, var(--space-5)) 0;
	color: var(--tt-ink);
	transition: opacity var(--dur-base) var(--ease);
}

.tt-top-faq__question:hover {
	opacity: 0.7;
}

.tt-top-faq__q {
	flex: 0 0 auto;
	font-family: var(--font-heading);
	font-size: clamp(15px, 1.7vw, 18px);
	font-weight: var(--fw-bold);
	letter-spacing: 0.05em;
	color: var(--tt-ink);
}

.tt-top-faq__text {
	flex: 1 1 auto;
	font-size: clamp(14px, 1.6vw, 16px);
	line-height: 1.6;
	font-weight: var(--fw-body);
	color: var(--tt-ink);
}

/* 右端の ⊙↓ インジケーター (SVG) */
.tt-top-faq__indicator {
	flex: 0 0 auto;
	display: block;
	width: 32px;
	height: 32px;
	transition: transform var(--dur-base) var(--ease);
}

/* 開いた状態: インジケーターを 180° 回転 (↑ になる) */
.tt-top-faq__item[open] .tt-top-faq__indicator {
	transform: rotate(180deg);
}

/* 回答エリア */
.tt-top-faq__answer {
	padding: 0 0 clamp(var(--space-4), 2.5vw, var(--space-5)) calc(clamp(15px, 1.7vw, 18px) + clamp(var(--space-3), 2vw, var(--space-5)));
	color: var(--tt-ink);
}

.tt-top-faq__answer p {
	margin: 0;
	font-size: clamp(14px, 1.5vw, 15px);
	line-height: 1.9;
	color: var(--tt-ink);
}

/* --- Access セクションは components/access.css に分離済み --- */