/* ==========================================================
   Kaho Moriki Renewal — 工程1：土台（mk-base.css）
   適用範囲：.mk-site の中だけ（SWELLでは #body_wrap にクラスが付く）（公開中のページ・管理画面には効かない）
   置き場所：kaho-moriki-site/assets/css/mk-base.css
   ========================================================== */

/* ----------------------------------------------------------
   1. デザイントークン（色・文字・余白はここだけで管理する）
   ---------------------------------------------------------- */
.mk-site {
	/* Gallery White */
	--mk-bg: #ffffff;
	--mk-bg-sub: #f5f5f3;
	--mk-text: #202020;
	--mk-text-sub: #767676;
	--mk-accent: #666b70;
	--mk-line: #e7e7e5;

	/* フォント：欧文 → 和文 → 代替（読み込めない場合も崩れない順） */
	--mk-font: "avenir-next-lt-pro", "Avenir Next", "Noto Sans JP",
		"Hiragino Sans", "Yu Gothic", sans-serif;
	--mk-font-ja: "Noto Sans JP", "Hiragino Sans", "Yu Gothic", sans-serif;
	--mk-weight-regular: 400;
	--mk-weight-demi: 600; /* Adobe Fontsで Demi の数値を確認して合わせる */

	/* 文字サイズ（画面幅に応じてなめらかに変わる） */
	--mk-fs-xs: 0.75rem;                                  /* 日付・キャプション */
	--mk-fs-sm: 0.875rem;                                 /* ナビ・補足 */
	--mk-fs-base: clamp(0.9375rem, 0.9rem + 0.15vw, 1rem); /* 本文 */
	--mk-fs-lg: clamp(1.125rem, 1rem + 0.5vw, 1.375rem);  /* 小見出し */
	--mk-fs-xl: clamp(1.5rem, 1.2rem + 1.2vw, 2.25rem);   /* 見出し・名前 */

	/* 字間・行間 */
	--mk-tracking-en: 0.08em;   /* 欧文は少しだけ広げる */
	--mk-tracking-ja: 0.04em;
	--mk-leading-body: 1.9;
	--mk-leading-tight: 1.4;

	/* 余白 */
	--mk-gutter: clamp(20px, 5vw, 64px);       /* 画面の左右 */
	--mk-section: clamp(96px, 14vw, 200px);    /* セクション間 */
	--mk-measure: 36em;                        /* 長文の1行の長さ */
	--mk-wide: 1200px;                         /* 写真レイアウトの最大幅 */

	/* 動き（工程2以降で使用） */
	--mk-ease: cubic-bezier(0.4, 0.4, 0, 1);
	--mk-dur: 1.6s;

	/* SWELL側の色変数を上書き（このページの中だけ）
	   ※変数名は実機で要確認。合っていなくても害はない */
	--color_text: var(--mk-text);
	--color_bg: var(--mk-bg);
	--color_link: var(--mk-text);
	--color_main: var(--mk-accent);
	--swl-font_family: var(--mk-font);
	--swl-font_weight: var(--mk-weight-regular);
}

/* ----------------------------------------------------------
   2. 基本の文字組み
   ---------------------------------------------------------- */
.mk-site {
	background-color: var(--mk-bg);
	color: var(--mk-text);
	font-family: var(--mk-font);
	font-weight: var(--mk-weight-regular);
	font-size: var(--mk-fs-base);
	line-height: var(--mk-leading-body);
	letter-spacing: var(--mk-tracking-ja);
	font-feature-settings: "palt" 0; /* 本文は詰めない */
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
}

.mk-site h1,
.mk-site h2,
.mk-site h3,
.mk-site h4 {
	font-family: var(--mk-font);
	font-weight: var(--mk-weight-regular);
	line-height: var(--mk-leading-tight);
	letter-spacing: var(--mk-tracking-ja);
	color: var(--mk-text);
}

/* SWELLの見出し装飾（線・背景）を新ページでは外す */
.mk-site .post_content h2,
.mk-site .post_content h3,
.mk-site .post_content h4 {
	background: none;
	border: 0;
	padding: 0;
}
.mk-site .post_content h2::before,
.mk-site .post_content h2::after,
.mk-site .post_content h3::before,
.mk-site .post_content h3::after {
	content: none;
}

.mk-site a {
	color: inherit;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.3em;
	transition: opacity 0.3s var(--mk-ease);
}
.mk-site a:hover {
	opacity: 0.6;
}
.mk-site a:focus-visible {
	outline: 1px solid var(--mk-accent);
	outline-offset: 4px;
}

.mk-site ::selection {
	background: var(--mk-line);
	color: var(--mk-text);
}

/* ----------------------------------------------------------
   3. 部品（どのページでも使う最小限のクラス）
   ---------------------------------------------------------- */

/* 欧文ラベル：Services / Works など */
.mk-site .mk-label {
	font-size: var(--mk-fs-sm);
	letter-spacing: var(--mk-tracking-en);
	color: var(--mk-text-sub);
	line-height: 1;
}

/* 日付・キャプション */
.mk-site .mk-meta {
	font-size: var(--mk-fs-xs);
	letter-spacing: var(--mk-tracking-en);
	color: var(--mk-text-sub);
}

/* 長文の段落（JOURNAL など） */
.mk-site .mk-prose {
	max-width: var(--mk-measure);
	margin-inline: auto;
}

/* 細い下線のテキストリンク（View details — など） */
.mk-site .mk-link {
	display: inline-block;
	font-size: var(--mk-fs-sm);
	letter-spacing: var(--mk-tracking-en);
	text-decoration: none;
	border-bottom: 1px solid currentColor;
	padding-bottom: 0.2em;
}

/* セクションの間隔 */
.mk-site .mk-section {
	padding-block: var(--mk-section);
	padding-inline: var(--mk-gutter);
}
.mk-site .mk-container {
	max-width: var(--mk-wide);
	margin-inline: auto;
}

/* 区切り線 */
.mk-site .mk-rule {
	border: 0;
	border-top: 1px solid var(--mk-line);
	margin: 0;
}

/* 写真：比率を保ち、読み込み中も場所を確保する（CLS対策） */
.mk-site .mk-photo img {
	display: block;
	width: 100%;
	height: auto;
}

/* ----------------------------------------------------------
   5. ヒーロー（工程2）
   写真：元の縦横比のまま、画面の高さと幅に収まる最大サイズ
   ---------------------------------------------------------- */
.mk-site {
	overflow-x: clip; /* 全幅レイアウトで横スクロールを出さない */
	--mk-hero-header: 100px;                      /* SWELLのヘッダーの高さ（目安） */
	--mk-hero-space: clamp(24px, 6vh, 80px);      /* 写真の上下の余白 */
	--mk-hero-side: clamp(20px, 7vw, 120px);      /* 写真の左右の余白 */
	--mk-hero-max: 1600px;                        /* 写真の最大幅 */
	--mk-hero-caption: 128px;                     /* 写真の下の名前の欄（最初の画面に収める） */
	--mk-hero-scale: 1.02;                        /* 開始時の拡大率（1 で拡大なし） */
}

/* ヒーローのあるページでは、SWELLのページタイトルとパンくずを出さない */
.mk-site:has(.mk-hero) .c-pageTitle,
.mk-site:has(.mk-hero) .p-breadcrumb {
	display: none;
}

/* 本文の幅（860px）から抜け出して、画面幅いっぱいの白い場をつくる */
.mk-site .mk-hero {
	width: 100vw;
	margin-inline: calc(50% - 50vw);
	padding: var(--mk-hero-space) var(--mk-hero-side) 0;
	background: var(--mk-bg);
	text-align: center;
}

.mk-site .mk-hero__frame {
	margin: 0 auto;
	width: min(
		100%,
		var(--mk-hero-max),
		calc((100svh - var(--mk-hero-header) - var(--mk-hero-space) - var(--mk-hero-caption)) * var(--mk-ratio-num))
	);
	aspect-ratio: var(--mk-ratio);  /* 読み込み前から場所を確保（CLS対策） */
	overflow: hidden;               /* 拡大の動きを額の内側だけに収める */
	background: var(--mk-bg-sub);
}

.mk-site .mk-hero__img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;  /* トリミングしない */
}

.mk-site .mk-hero__title {
	padding-block: clamp(28px, 4vh, 48px) var(--mk-section);
}
.mk-site .mk-hero__title p {
	margin: 0;
}
.mk-site .mk-hero__name {
	font-size: var(--mk-fs-lg);
	letter-spacing: var(--mk-tracking-en);
	line-height: 1.4;
}
.mk-site .mk-hero__role {
	margin-top: 0.6em !important;
	font-size: var(--mk-fs-xs);
	letter-spacing: var(--mk-tracking-en);
	color: var(--mk-text-sub);
}

/* スマートフォン：写真は横幅いっぱいに近く、余白は少しだけ */
@media (max-width: 599px) {
	.mk-site {
		--mk-hero-header: 64px;
		--mk-hero-side: 16px;
		--mk-hero-space: 20px;
	}
}

/* 動き：JavaScriptが動く環境だけで初期状態を隠す（動かなくても写真は見える） */
.mk-js .mk-site .mk-hero__img {
	opacity: 0;
	transform: scale(var(--mk-hero-scale));
	transition:
		opacity 1.6s ease,
		transform 2.6s var(--mk-ease);
}
.mk-js .mk-site .mk-hero__title {
	opacity: 0;
	transform: translateY(4px);
	transition:
		opacity 1.4s ease 0.9s,
		transform 1.4s var(--mk-ease) 0.9s;
}
.mk-js .mk-site .mk-hero.is-ready .mk-hero__img,
.mk-js .mk-site .mk-hero.is-ready .mk-hero__title {
	opacity: 1;
	transform: none;
}

/* 動きを減らす設定：拡大・移動なし、短いフェードのみ */
@media (prefers-reduced-motion: reduce) {
	.mk-js .mk-site .mk-hero__img,
	.mk-js .mk-site .mk-hero__title {
		transform: none;
	}
}

/* ----------------------------------------------------------
   4. 動きを減らす設定への対応（工程2以降の動きもここで止める）
   ---------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
	.mk-site *,
	.mk-site *::before,
	.mk-site *::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}