/* ==========================================================
   Kaho Moriki Renewal — トップページのセクション（mk-home.css）
   適用範囲：.mk-site の中だけ
   ========================================================== */

/* ----------------------------------------------------------
   共通：全幅の帯・見出し・写真
   ---------------------------------------------------------- */
.mk-site .post_content > .mk-band,
.mk-site .post_content > .mk-hero {
	margin-top: 0;
	margin-bottom: 0;
}

.mk-site .mk-band {
	width: 100vw;
	margin-inline: calc(50% - 50vw);
	padding: 0 var(--mk-gutter) var(--mk-section);
}

.mk-site .mk-head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 24px;
	margin-bottom: clamp(40px, 6vw, 88px);
}
.mk-site .mk-head__label,
.mk-site .post_content .mk-head__label {
	margin: 0;
	font-size: var(--mk-fs-sm);
	font-weight: var(--mk-weight-regular);
	letter-spacing: var(--mk-tracking-en);
	line-height: 1;
	color: var(--mk-text);
}

/* 写真：比率どおりの枠（aspect-ratio は部品側で指定） */
.mk-site .mk-photo {
	position: relative;
	width: 100%;
	overflow: hidden;
	background: var(--mk-bg-sub);
}
.mk-site .mk-photo__img,
.mk-site .mk-photo img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
}
.mk-site .mk-photo--placeholder {
	display: grid;
	place-items: center;
	background: #ececea;
	color: var(--mk-text-sub);
	font-size: var(--mk-fs-xs);
	letter-spacing: var(--mk-tracking-en);
}
.mk-site .mk-photo--empty {
	aspect-ratio: 3 / 2;
}

/* キャプション：シリーズ名と年 */
.mk-site .mk-caption {
	display: flex;
	justify-content: space-between;
	gap: 16px;
	margin-top: 14px;
	font-size: var(--mk-fs-xs);
	letter-spacing: var(--mk-tracking-en);
	line-height: 1.6;
	text-align: left;
}
.mk-site .mk-caption__title {
	color: var(--mk-text);
}
.mk-site .mk-caption__meta {
	color: var(--mk-text-sub);
	white-space: nowrap;
}

/* 編集者にだけ見えるメモ */
.mk-site .mk-editor-note {
	max-width: var(--mk-wide);
	margin: 0 auto var(--mk-section);
	padding: 12px 16px;
	border: 1px dashed #c9c9c6;
	font-size: var(--mk-fs-xs);
	color: var(--mk-text-sub);
}

/* リンクの写真は、ホバーでわずかに薄く */
.mk-site .mk-works__link,
.mk-site .mk-journal__item > a {
	display: block;
	text-decoration: none;
}

/* ----------------------------------------------------------
   Introduction
   左揃え。PCでは左から少し内側に置き、詩のように1行ずつ読ませる
   ---------------------------------------------------------- */
.mk-site .mk-intro__text {
	max-width: 34em;
	margin-left: clamp(0px, 14%, 200px);
	font-size: clamp(0.9375rem, 0.88rem + 0.25vw, 1.0625rem);
	line-height: 2.4;
	letter-spacing: 0.1em;
	text-align: left;
	color: var(--mk-text);
}
.mk-site .mk-intro__stanza,
.mk-site .post_content .mk-intro__stanza {
	margin: 0 0 2.2em;
}
.mk-site .mk-intro__line {
	display: block;
}
.mk-site .mk-intro__more,
.mk-site .post_content .mk-intro__more {
	margin: 3.2em 0 0;
	line-height: 1;
}

/* ----------------------------------------------------------
   Selected Works
   ［大・小］［中央に1枚］［小・大］のリズム。写真はトリミングしない
   ---------------------------------------------------------- */
.mk-site .mk-works__row {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: clamp(24px, 6vw, 96px);
	margin-bottom: clamp(72px, 11vw, 160px);
}
.mk-site .mk-works__row:last-child {
	margin-bottom: 0;
}
.mk-site .mk-works__item {
	margin: 0;
}

/* 大きい写真 */
.mk-site .mk-works__item--big.mk-works__item--land { width: 60%; }
.mk-site .mk-works__item--big.mk-works__item--port { width: 42%; }
/* 小さい写真 */
.mk-site .mk-works__item--small.mk-works__item--land { width: 34%; }
.mk-site .mk-works__item--small.mk-works__item--port { width: 26%; }
/* 中央に1枚 */
.mk-site .mk-works__row--single { justify-content: center; }
.mk-site .mk-works__item--single.mk-works__item--land { width: 72%; }
.mk-site .mk-works__item--single.mk-works__item--port { width: 40%; }

/* 小さい写真は少し下げて、上端をずらす */
.mk-site .mk-works__row--pair-a .mk-works__item--small {
	margin-top: clamp(80px, 14vw, 240px);
	margin-right: 4%;
}
.mk-site .mk-works__row--pair-b .mk-works__item--small {
	margin-top: clamp(40px, 6vw, 96px);
	margin-left: 4%;
}

/* ----------------------------------------------------------
   Journal
   1件目を大きく、残りを右に縦並び
   ---------------------------------------------------------- */
.mk-site .mk-journal__grid {
	display: grid;
	grid-template-columns: 7fr 4fr;
	column-gap: clamp(32px, 7vw, 112px);
	row-gap: clamp(48px, 6vw, 80px);
	align-items: start;
}
.mk-site .mk-journal__item--lead {
	grid-row: span 2;
}
.mk-site .mk-journal__item--sub:nth-child(2) {
	margin-top: clamp(40px, 8vw, 120px);
}
.mk-site .mk-journal__text {
	margin-top: 18px;
}
.mk-site .mk-journal__title,
.mk-site .post_content .mk-journal__title {
	margin: 8px 0 0;
	font-size: var(--mk-fs-base);
	font-weight: var(--mk-weight-regular);
	line-height: 1.7;
	letter-spacing: var(--mk-tracking-ja);
}
.mk-site .mk-journal__item--lead .mk-journal__title {
	font-size: var(--mk-fs-lg);
}

/* ----------------------------------------------------------
   Services（非表示中。SERVICES公開時に使う）
   ---------------------------------------------------------- */
.mk-site .mk-services__lead {
	max-width: 30em;
	margin: 0 0 clamp(40px, 6vw, 72px);
}
.mk-site .mk-services__grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: clamp(32px, 7vw, 112px);
}
.mk-site .mk-services__item .mk-photo {
	margin-bottom: 20px;
}
.mk-site .mk-services__title,
.mk-site .post_content .mk-services__title {
	margin: 0 0 8px;
	font-size: var(--mk-fs-base);
	font-weight: var(--mk-weight-regular);
	letter-spacing: var(--mk-tracking-en);
}
.mk-site .mk-services__text {
	margin: 0 0 16px;
	color: var(--mk-text-sub);
	font-size: var(--mk-fs-sm);
}

/* ----------------------------------------------------------
   House Studio 8dori
   写真を右に大きく、文章を左に
   ---------------------------------------------------------- */
.mk-site .mk-studio__grid {
	display: grid;
	grid-template-columns: 4fr 7fr;
	gap: clamp(32px, 7vw, 112px);
	align-items: end;
}
.mk-site .mk-studio__photo {
	grid-column: 2;
	grid-row: 1;
}
.mk-site .mk-studio__text {
	grid-column: 1;
	grid-row: 1;
	font-size: var(--mk-fs-sm);
	line-height: 2.1;
}
.mk-site .mk-studio__text .mk-head__label {
	margin-bottom: 24px;
}
.mk-site .mk-studio__text p {
	margin: 0 0 24px;
}

/* 写真が未設定のとき：文章だけを左に */
.mk-site .mk-studio--text .mk-studio__grid {
	grid-template-columns: minmax(0, 30em);
}

/* ----------------------------------------------------------
   スマートフォン
   ---------------------------------------------------------- */
@media (max-width: 767px) {
	.mk-site .mk-works__row {
		flex-direction: column;
		gap: 56px;
		margin-bottom: 72px;
	}
	.mk-site .mk-works__item--big.mk-works__item--land,
	.mk-site .mk-works__item--single.mk-works__item--land { width: 100%; }
	.mk-site .mk-works__item--big.mk-works__item--port,
	.mk-site .mk-works__item--single.mk-works__item--port { width: 82%; }
	.mk-site .mk-works__item--small.mk-works__item--land { width: 78%; }
	.mk-site .mk-works__item--small.mk-works__item--port { width: 62%; }
	/* 小さい写真は左右に寄せて、縦のリズムをつくる */
	.mk-site .mk-works__row--pair-a .mk-works__item--small {
		margin: 0 0 0 auto;
	}
	.mk-site .mk-works__row--pair-b .mk-works__item--small {
		margin: 0;
	}
	.mk-site .mk-works__row--pair-b .mk-works__item--big.mk-works__item--port {
		margin-left: auto;
	}
	.mk-site .mk-works__row--single {
		align-items: center;
	}

	.mk-site .mk-journal__grid {
		grid-template-columns: 1fr;
	}
	.mk-site .mk-journal__item--lead {
		grid-row: auto;
	}
	.mk-site .mk-journal__item--sub {
		width: 82%;
	}
	.mk-site .mk-journal__item--sub:nth-child(2) {
		margin-top: 0;
		margin-left: auto;
	}

	.mk-site .mk-services__grid {
		grid-template-columns: 1fr;
	}

	.mk-site .mk-studio__grid {
		grid-template-columns: 1fr;
	}
	.mk-site .mk-studio__photo,
	.mk-site .mk-studio__text {
		grid-column: 1;
		grid-row: auto;
	}

	.mk-site .mk-intro__text {
		margin-left: 0;
		line-height: 2.2;
		letter-spacing: 0.06em;
	}
}

/* ----------------------------------------------------------
   スクロールで表示（JSが動く環境だけ。動かなくても全部見える）
   ---------------------------------------------------------- */
.mk-js .mk-site .mk-reveal {
	opacity: 0;
	transform: translateY(8px);
	transition:
		opacity 1.1s ease var(--mk-delay, 0ms),
		transform 1.3s var(--mk-ease) var(--mk-delay, 0ms);
}
.mk-js .mk-site .mk-reveal.is-in {
	opacity: 1;
	transform: none;
}
@media (prefers-reduced-motion: reduce) {
	.mk-js .mk-site .mk-reveal {
		transform: none;
	}
}

/* ----------------------------------------------------------
   ヘッダーのメニュー：Avenir Next で幅が広がり重なる問題の修正
   ---------------------------------------------------------- */
.mk-site .c-gnav > .menu-item > a {
	padding-inline: 0.9em;
	letter-spacing: 0.02em;
}
.mk-site .c-gnav > .menu-item > a .ttl {
	font-size: 0.875rem;
}

/* ----------------------------------------------------------
   SWELLの部品のうち、新デザインのページでは使わないもの
   ---------------------------------------------------------- */
/* トップページのメインビジュアル（スライダー） */
.mk-site #main_visual {
	display: none;
}
/* ヘッダーのキャッチフレーズ（ロゴと重なるため） */
.mk-site .l-header .c-catchphrase {
	display: none;
}