/* =========================================================
 * masaki-kaneko.com — Front page / global chrome
 * モダン・ミニマル（白基調 + 墨黒 + 1色アクセント）
 * 没入型ヒーロー: sato-umi.com 参考 / 左右に長い積み重ね: pughug-design 参考
 * ======================================================= */

:root {
	--mk-bg:        #ffffff;
	--mk-bg-soft:   #f6f6f3;
	--mk-ink:       #16181d;
	--mk-ink-soft:  #4a4d55;
	--mk-muted:     #8b8e97;
	--mk-rule:      #e6e6e1;
	--mk-accent:    #2748b0;
	--mk-serif:     "Noto Serif JP", serif;
	--mk-sans:      "Noto Sans JP", -apple-system, "Hiragino Kaku Gothic ProN", "Meiryo", sans-serif;
	--mk-latin:     "Cormorant Garamond", Georgia, serif;
	--mk-maxw:      1140px;
	--mk-header-h:  72px;
}

/* ---- ベース ------------------------------------------- */
.mk-front {
	font-family: var(--mk-sans);
	color: var(--mk-ink);
	background: var(--mk-bg);
	font-weight: 400;
	line-height: 1.85;
	-webkit-font-smoothing: antialiased;
	overflow-x: clip;
}
.mk-front .container {
	max-width: var(--mk-maxw);
	margin: 0 auto;
	padding-inline: 24px;
}
.mk-front *,
.mk-site-header * { box-sizing: border-box; }

/* =========================================================
 * ヘッダー（サイトロゴ + ナビゲーションバー）
 * ======================================================= */
.mk-site-header {
	position: fixed;
	inset: 0 0 auto 0;
	z-index: 1000;
	height: var(--mk-header-h);
	background: rgba(255,255,255,.9);
	backdrop-filter: saturate(140%) blur(10px);
	border-bottom: 1px solid var(--mk-rule);
	transition: background .35s ease, border-color .35s ease, color .35s ease;
}
.mk-site-header__container {
	height: 100%;
	max-width: var(--mk-maxw);
	margin: 0 auto;
	padding-inline: 24px;
	display: flex;
	align-items: center;
	justify-content: space-between;
}

/* フロントページ: ヒーロー上では透明・白文字 */
.home .mk-site-header:not(.scrolled) {
	background: transparent;
	backdrop-filter: none;
	border-bottom-color: transparent;
	color: #fff;
}

/* ロゴ */
.mk-logo { margin: 0; font-size: inherit; line-height: 1; }
.mk-logo__link {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	text-decoration: none;
	color: inherit;
}
.mk-logo__mark {
	display: grid;
	place-items: center;
	width: 38px; height: 38px;
	border: 1.5px solid currentColor;
	font-family: var(--mk-latin);
	font-style: italic;
	font-size: 18px;
	letter-spacing: .04em;
	color: var(--mk-ink);
}
.home .mk-site-header:not(.scrolled) .mk-logo__mark { color: #fff; }
.mk-site-header.scrolled .mk-logo__mark { color: var(--mk-ink); border-color: var(--mk-ink); }
.mk-logo__text { display: flex; flex-direction: column; line-height: 1.15; }
.mk-logo__ja {
	font-family: var(--mk-serif);
	font-weight: 600;
	font-size: 16px;
	letter-spacing: .08em;
	color: inherit;
}
.mk-logo__en {
	font-family: var(--mk-latin);
	font-style: italic;
	font-size: 11px;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--mk-muted);
}
.home .mk-site-header:not(.scrolled) .mk-logo__en { color: rgba(255,255,255,.75); }

/* ナビ */
.mk-global-nav__list {
	display: flex;
	align-items: center;
	gap: 34px;
	margin: 0; padding: 0;
	list-style: none;
}
.mk-global-nav__item a {
	position: relative;
	text-decoration: none;
	color: inherit;
	font-size: 14px;
	font-weight: 500;
	letter-spacing: .06em;
	padding: 6px 0;
}
.mk-global-nav__item a::after {
	content: "";
	position: absolute;
	left: 0; bottom: 0;
	width: 0; height: 1.5px;
	background: var(--mk-accent);
	transition: width .3s ease;
}
.mk-global-nav__item a:hover::after { width: 100%; }
.home .mk-site-header:not(.scrolled) .mk-global-nav__item a::after { background: #fff; }

/* ハンバーガー（モバイル） */
.mk-nav-toggle {
	display: none;
	flex-direction: column;
	justify-content: center;
	gap: 5px;
	width: 40px; height: 40px;
	padding: 0;
	background: none;
	border: 0;
	cursor: pointer;
	color: inherit;
}
.mk-nav-toggle span {
	display: block;
	width: 24px; height: 1.5px;
	margin: 0 auto;
	background: currentColor;
	transition: transform .3s ease, opacity .3s ease;
}
.mk-nav-toggle.is-open span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.mk-nav-toggle.is-open span:nth-child(2) { opacity: 0; }
.mk-nav-toggle.is-open span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

/* =========================================================
 * 1. 没入型ヒーロー
 * ======================================================= */
.mk-hero {
	position: relative;
	min-height: 100vh;
	min-height: 100svh;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	color: #fff;
	overflow: hidden;
	padding: var(--mk-header-h) 24px 0;
}
.mk-hero__bg {
	position: absolute; inset: 0;
	background:
		radial-gradient(120% 120% at 78% 18%, #3a4f8f 0%, transparent 55%),
		radial-gradient(120% 120% at 12% 88%, #1b2433 0%, transparent 60%),
		linear-gradient(160deg, #11151f 0%, #1d2536 50%, #11151f 100%);
	z-index: 0;
}
.mk-hero__bg::after { /* 微細グレイン */
	content: "";
	position: absolute; inset: 0;
	background-image: radial-gradient(rgba(255,255,255,.04) 1px, transparent 1px);
	background-size: 4px 4px;
	mix-blend-mode: overlay;
}
.mk-hero__code { /* 文字の後ろを流れる装飾コード */
	position: absolute;
	inset: 0;
	z-index: 1;
	display: flex;
	justify-content: center;
	gap: clamp(28px, 8vw, 120px);
	padding: 0 clamp(16px, 6vw, 96px);
	overflow: hidden;
	pointer-events: none;
	-webkit-mask-image: linear-gradient(180deg, transparent, #000 16%, #000 84%, transparent);
	        mask-image: linear-gradient(180deg, transparent, #000 16%, #000 84%, transparent);
}
.mk-hero__code-col {
	flex: 0 0 auto;
	margin: 0;
	font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, "Liberation Mono", monospace;
	font-size: 12.5px;
	line-height: 1.95;
	white-space: pre;
	color: rgba(255,255,255,.13);
	will-change: transform;
	animation-name: mk-code-drift;
	animation-timing-function: linear;
	animation-iteration-count: infinite;
}
.mk-hero__code-col:nth-child(even) { animation-direction: reverse; }
@keyframes mk-code-drift {
	from { transform: translateY(0); }
	to   { transform: translateY(-50%); }
}

.mk-hero__grid { /* 細い縦グリッドのアクセント */
	position: absolute; inset: 0;
	z-index: 1;
	background-image: linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);
	background-size: calc(100% / 6) 100%;
	-webkit-mask-image: linear-gradient(180deg, transparent, #000 30%, #000 70%, transparent);
	        mask-image: linear-gradient(180deg, transparent, #000 30%, #000 70%, transparent);
}
.mk-hero__inner {
	position: relative;
	z-index: 2;
	max-width: 820px;
	animation: mk-rise .9s cubic-bezier(.2,.7,.2,1) both;
}
.mk-hero__inner::before { /* 背後のコードから文字を浮かせる暗いスクリム */
	content: "";
	position: absolute;
	inset: -60px -120px;
	z-index: -1;
	background: radial-gradient(58% 62% at 50% 50%, rgba(17,21,31,.82) 0%, rgba(17,21,31,.45) 52%, transparent 100%);
	pointer-events: none;
}
.mk-hero__eyebrow {
	display: inline-block;
	font-family: var(--mk-latin);
	font-style: italic;
	font-size: clamp(15px, 2.4vw, 20px);
	letter-spacing: .42em;
	text-transform: uppercase;
	color: rgba(255,255,255,.7);
	margin-bottom: 26px;
	padding-left: .42em;
}
.mk-hero__title { margin: 0; line-height: 1.04; }
.mk-hero__name-ja {
	display: block;
	font-family: var(--mk-serif);
	font-weight: 700;
	font-size: clamp(44px, 11vw, 110px);
	letter-spacing: .06em;
}
.mk-hero__name-en {
	display: block;
	font-family: var(--mk-latin);
	font-style: italic;
	font-weight: 500;
	font-size: clamp(16px, 3.2vw, 26px);
	letter-spacing: .26em;
	text-transform: uppercase;
	color: rgba(255,255,255,.62);
	margin-top: 14px;
}
.mk-hero__rule {
	width: 56px; height: 2px;
	background: #fff;
	margin: 30px auto 24px;
	opacity: .85;
}
.mk-hero__role {
	margin: 0 0 18px;
	font-size: clamp(14px, 2vw, 17px);
	font-weight: 500;
	letter-spacing: .14em;
}
.mk-hero__tagline {
	margin: 0;
	font-size: clamp(13px, 1.8vw, 16px);
	line-height: 2;
	color: rgba(255,255,255,.78);
	font-weight: 300;
}
.mk-hero__scroll {
	position: absolute;
	bottom: 30px; left: 50%;
	transform: translateX(-50%);
	z-index: 2;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
	text-decoration: none;
	color: rgba(255,255,255,.7);
	font-family: var(--mk-latin);
	font-style: italic;
	font-size: 12px;
	letter-spacing: .3em;
}
.mk-hero__scroll-line {
	width: 1px; height: 46px;
	background: linear-gradient(180deg, rgba(255,255,255,.7), transparent);
	animation: mk-scroll 2s ease-in-out infinite;
	transform-origin: top;
}
@keyframes mk-scroll {
	0%   { transform: scaleY(0);   opacity: 0; }
	40%  { transform: scaleY(1);   opacity: 1; }
	100% { transform: scaleY(1);   opacity: 0; }
}
@keyframes mk-rise {
	from { opacity: 0; transform: translateY(28px); }
	to   { opacity: 1; transform: translateY(0); }
}

/* =========================================================
 * セクション共通
 * ======================================================= */
.mk-section { padding: clamp(72px, 11vw, 132px) 0; }
.mk-rows-section--alt { background: var(--mk-bg-soft); }
.mk-section__head { margin-bottom: clamp(40px, 6vw, 64px); }
.mk-section__eyebrow {
	display: block;
	font-family: var(--mk-latin);
	font-style: italic;
	font-size: 17px;
	letter-spacing: .22em;
	text-transform: uppercase;
	color: var(--mk-accent);
	margin-bottom: 12px;
}
.mk-section__title {
	margin: 0;
	font-family: var(--mk-serif);
	font-weight: 700;
	font-size: clamp(28px, 5vw, 46px);
	letter-spacing: .04em;
	line-height: 1.2;
}
.mk-section__count {
	margin: 10px 0 0;
	font-family: var(--mk-latin);
	font-style: italic;
	font-size: 16px;
	letter-spacing: .1em;
	color: var(--mk-muted);
}

/* =========================================================
 * About（プロフィール / スキル / 資格）
 * ======================================================= */
.mk-about__lead {
	max-width: 70ch;
	margin: 0 0 clamp(40px, 6vw, 60px);
	font-size: clamp(15px, 2vw, 18px);
	line-height: 2.1;
	color: var(--mk-ink-soft);
}
/* 直後の段落へ続く場合は1行分だけ空ける */
.mk-about__lead--tight { margin-bottom: 1.4em; }
.mk-about__cols {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: clamp(32px, 6vw, 72px);
}
.mk-about__label {
	margin: 0 0 20px;
	padding-bottom: 12px;
	border-bottom: 1px solid var(--mk-rule);
	font-family: var(--mk-serif);
	font-weight: 600;
	font-size: 18px;
	letter-spacing: .06em;
}
.mk-about__skills,
.mk-about__certs { margin: 0; padding: 0; list-style: none; }
.mk-about__skills {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}
.mk-about__skills li {
	font-size: 13px;
	letter-spacing: .04em;
	color: var(--mk-ink-soft);
	background: var(--mk-bg-soft);
	border: 1px solid var(--mk-rule);
	border-radius: 999px;
	padding: 7px 15px;
}
.mk-about__certs li {
	position: relative;
	padding: 9px 0 9px 22px;
	font-size: 14.5px;
	color: var(--mk-ink-soft);
	border-bottom: 1px solid var(--mk-rule);
}
.mk-about__certs li::before {
	content: "";
	position: absolute;
	left: 0; top: 18px;
	width: 7px; height: 7px;
	border: 1.5px solid var(--mk-accent);
	border-radius: 50%;
}

/* =========================================================
 * キャリア タイムライン
 * ======================================================= */
.mk-timeline { list-style: none; margin: 0; padding: 0; }
.mk-timeline__item {
	display: grid;
	grid-template-columns: 200px 1fr;
	gap: 32px;
	padding: 36px 0;
	border-top: 1px solid var(--mk-rule);
}
.mk-timeline__item:last-child { border-bottom: 1px solid var(--mk-rule); }
.mk-timeline__year {
	font-family: var(--mk-latin);
	font-style: italic;
	font-size: clamp(20px, 3vw, 28px);
	letter-spacing: .06em;
	color: var(--mk-accent);
	padding-top: 2px;
}
.mk-timeline__title {
	margin: 0 0 6px;
	font-family: var(--mk-serif);
	font-weight: 600;
	font-size: clamp(19px, 2.6vw, 24px);
	letter-spacing: .03em;
}
.mk-timeline__org {
	margin: 0 0 14px;
	font-size: 14px;
	font-weight: 500;
	letter-spacing: .08em;
	color: var(--mk-muted);
}
.mk-timeline__desc {
	margin: 0;
	font-size: 15px;
	color: var(--mk-ink-soft);
	max-width: 62ch;
}

/* =========================================================
 * 3 & 4. 左右に長い積み重ねコンポーネント
 * ======================================================= */
.mk-rows { list-style: none; margin: 0; padding: 0; }
.mk-row {
	border-top: 1px solid var(--mk-rule);
}
.mk-row:last-child { border-bottom: 1px solid var(--mk-rule); }
.mk-row__link {
	display: grid;
	grid-template-columns: 0.9fr 1.1fr;
	gap: clamp(28px, 5vw, 64px);
	align-items: center;
	padding: clamp(32px, 5vw, 56px) 0;
	text-decoration: none;
	color: inherit;
}
.mk-row--flip .mk-row__link { grid-template-columns: 1.1fr 0.9fr; }
.mk-row--flip .mk-row__art-wrap { order: 2; }

.mk-row__art-wrap { position: relative; }
.mk-row__art {
	aspect-ratio: 16 / 10;
	border-radius: 4px;
	overflow: hidden;
	transition: transform .5s cubic-bezier(.2,.7,.2,1), box-shadow .5s ease;
	box-shadow: 0 10px 30px -18px rgba(20,24,35,.35);
}
a.mk-row__link:hover .mk-row__art { transform: scale(1.02); box-shadow: 0 22px 48px -22px rgba(20,24,35,.5); }
.mk-row__art-no {
	position: absolute;
	left: 14px; bottom: 12px;
	font-family: var(--mk-latin);
	font-style: italic;
	font-size: 13px;
	letter-spacing: .1em;
	color: #fff;
	mix-blend-mode: difference;
}
.mk-row__body { min-width: 0; }
.mk-row__roman {
	display: block;
	font-family: var(--mk-latin);
	font-size: clamp(28px, 4vw, 40px);
	letter-spacing: .04em;
	color: var(--mk-rule);
	line-height: 1;
	margin-bottom: 8px;
}
.mk-row__eyebrow {
	display: block;
	font-family: var(--mk-latin);
	font-style: italic;
	font-size: 15px;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--mk-accent);
	margin-bottom: 10px;
}
.mk-row__title {
	margin: 0 0 10px;
	font-family: var(--mk-serif);
	font-weight: 700;
	font-size: clamp(22px, 3.4vw, 32px);
	letter-spacing: .03em;
	line-height: 1.3;
}
.mk-row__meta {
	margin: 0 0 14px;
	font-size: 13px;
	font-weight: 500;
	letter-spacing: .08em;
	color: var(--mk-muted);
}
.mk-row__desc {
	margin: 0 0 18px;
	font-size: 15px;
	color: var(--mk-ink-soft);
	max-width: 56ch;
}
.mk-row__tags {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0 0 16px;
	padding: 0;
	list-style: none;
}
.mk-row__tags li {
	font-size: 12px;
	letter-spacing: .06em;
	color: var(--mk-ink-soft);
	border: 1px solid var(--mk-rule);
	border-radius: 999px;
	padding: 4px 12px;
}
/* 詳細ページの実績: 課題・実装・工夫・成果の詳細リスト */
.mk-row__detail {
	margin: 0 0 18px;
	padding: 0;
	list-style: none;
	display: grid;
	gap: 12px;
	max-width: 60ch;
}
.mk-row__detail li {
	position: relative;
	padding-left: 20px;
	font-size: 14.5px;
	line-height: 1.9;
	color: var(--mk-ink-soft);
}
.mk-row__detail li::before {
	content: "";
	position: absolute;
	left: 0;
	top: .85em;
	width: 10px;
	height: 1px;
	background: var(--mk-accent);
}
.mk-row__arrow {
	display: inline-block;
	font-size: 14px;
	font-weight: 500;
	letter-spacing: .08em;
	color: var(--mk-accent);
	transition: transform .3s ease;
}
a.mk-row__link:hover .mk-row__arrow { transform: translateX(6px); }

/* =========================================================
 * 5. CTA
 * ======================================================= */
.mk-cta { background: var(--mk-ink); color: #fff; text-align: center; }
.mk-cta .mk-section__eyebrow { color: #9fb0e6; }
.mk-cta__inner { max-width: 640px; margin: 0 auto; }
.mk-cta__title {
	margin: 0 0 18px;
	font-family: var(--mk-serif);
	font-weight: 700;
	font-size: clamp(26px, 4.6vw, 42px);
	letter-spacing: .04em;
}
.mk-cta__body {
	margin: 0 0 32px;
	font-size: 15px;
	line-height: 2;
	color: rgba(255,255,255,.78);
	font-weight: 300;
}
.mk-cta__links {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 14px 28px;
	margin: 0; padding: 0;
	list-style: none;
}
.mk-cta__links a {
	color: #fff;
	text-decoration: none;
	font-size: 15px;
	font-weight: 500;
	letter-spacing: .08em;
	border-bottom: 1px solid rgba(255,255,255,.35);
	padding-bottom: 3px;
	transition: border-color .3s ease;
}
.mk-cta__links a:hover { border-color: #fff; }
.mk-cta__note { font-size: 13px; color: rgba(255,255,255,.6); }
.mk-cta__note code { background: rgba(255,255,255,.12); padding: 2px 6px; border-radius: 3px; }

/* =========================================================
 * お問い合わせフォーム（Contact Form 7）
 * ======================================================= */
.mk-contact-form { max-width: 640px; }
.mk-contact-form .wpcf7-form p { margin: 0 0 22px; }
.mk-contact-form label {
	display: block;
	font-family: var(--mk-serif);
	font-weight: 600;
	font-size: 15px;
	letter-spacing: .04em;
	color: var(--mk-ink);
}
.mk-contact-form .wpcf7-form-control-wrap { display: block; margin-top: 10px; }
.mk-contact-form input[type="text"],
.mk-contact-form input[type="email"],
.mk-contact-form textarea {
	width: 100%;
	box-sizing: border-box;
	padding: 13px 16px;
	font-family: var(--mk-sans);
	font-size: 15px;
	line-height: 1.7;
	color: var(--mk-ink);
	background: var(--mk-bg);
	border: 1px solid var(--mk-rule);
	border-radius: 4px;
	transition: border-color .2s ease;
}
.mk-contact-form textarea { min-height: 160px; resize: vertical; }
.mk-contact-form input:focus,
.mk-contact-form textarea:focus {
	outline: none;
	border-color: var(--mk-accent);
}
.mk-contact-form .wpcf7-submit {
	display: inline-flex;
	align-items: center;
	margin-top: 8px;
	padding: 14px 38px;
	font-family: var(--mk-sans);
	font-size: 15px;
	font-weight: 500;
	letter-spacing: .08em;
	color: var(--mk-ink);
	background: transparent;
	border: 1px solid var(--mk-ink);
	border-radius: 999px;
	cursor: pointer;
	transition: background .3s ease, color .3s ease;
}
.mk-contact-form .wpcf7-submit:hover { background: var(--mk-ink); color: #fff; }
.mk-contact-form .wpcf7-not-valid-tip {
	margin-top: 6px;
	font-size: 13px;
	color: #b00020;
}
.mk-contact-form .wpcf7-response-output {
	margin: 8px 0 0 !important;
	padding: 14px 16px !important;
	font-size: 14px;
	border-radius: 4px;
}

/* =========================================================
 * 「詳しく見る」CTA ボタン（要約 → 詳細ページ）
 * ======================================================= */
.mk-more { margin-top: clamp(32px, 5vw, 52px); }
.mk-more + .mk-more { margin-top: 14px; }
.mk-more__link {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	text-decoration: none;
	color: var(--mk-ink);
	font-size: 15px;
	font-weight: 500;
	letter-spacing: .06em;
	padding: 14px 26px;
	border: 1px solid var(--mk-ink);
	border-radius: 999px;
	transition: background .3s ease, color .3s ease;
}
.mk-more__link:hover { background: var(--mk-ink); color: #fff; }
.mk-more__arrow { transition: transform .3s ease; }
.mk-more__link:hover .mk-more__arrow { transform: translateX(5px); }
/* ダーク背景の CTA 内ではボタンを白抜きにして視認性を確保 */
.mk-cta .mk-more__link { color: #fff; border-color: rgba(255,255,255,.7); }
.mk-cta .mk-more__link:hover { background: #fff; color: var(--mk-ink); border-color: #fff; }

/* =========================================================
 * できること（要約）— コンパクト一覧
 * ======================================================= */
.mk-mini {
	list-style: none;
	margin: 0; padding: 0;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1px;
	background: var(--mk-rule);
	border: 1px solid var(--mk-rule);
}
.mk-mini__item {
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding: clamp(22px, 3vw, 30px);
	background: var(--mk-bg);
}
.mk-mini__en {
	font-family: var(--mk-latin);
	font-style: italic;
	font-size: 14px;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--mk-accent);
}
.mk-mini__title {
	font-family: var(--mk-serif);
	font-weight: 600;
	font-size: clamp(17px, 2.4vw, 21px);
	letter-spacing: .03em;
	line-height: 1.4;
}
.mk-mini__meta {
	font-size: 13px;
	letter-spacing: .04em;
	color: var(--mk-muted);
}
.mk-about__skills-more {
	background: transparent !important;
	border-color: transparent !important;
	color: var(--mk-muted) !important;
}

/* =========================================================
 * 趣味
 * ======================================================= */
.mk-hobbies {
	list-style: none;
	margin: 0; padding: 0;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1px;
	background: var(--mk-rule);
	border: 1px solid var(--mk-rule);
}
.mk-hobbies__item {
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: clamp(24px, 3vw, 34px);
	background: var(--mk-bg);
}
.mk-hobbies__en {
	font-family: var(--mk-latin);
	font-style: italic;
	font-size: 14px;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--mk-accent);
}
.mk-hobbies__title {
	font-family: var(--mk-serif);
	font-weight: 600;
	font-size: clamp(18px, 2.4vw, 22px);
	letter-spacing: .03em;
}
.mk-hobbies__note {
	margin: 6px 0 0;
	font-size: 14.5px;
	line-height: 1.95;
	color: var(--mk-ink-soft);
}
/* 概要グリッドのカードを詳細セクションへのリンクにする（趣味ページ） */
.mk-hobbies__link {
	display: flex;
	flex-direction: column;
	gap: 8px;
	height: 100%;
	color: inherit;
	text-decoration: none;
	transition: color .2s ease;
}
.mk-hobbies__link:hover { color: var(--mk-accent); }
.mk-hobbies__jump {
	margin-top: auto;
	padding-top: 10px;
	font-family: var(--mk-latin);
	font-style: italic;
	font-size: 13px;
	letter-spacing: .08em;
	color: var(--mk-accent);
}

/* 詳細セクション（趣味ページ: 概要の下に各趣味を1つずつ） */
.mk-hobby {
	scroll-margin-top: 96px;
	padding: clamp(32px, 4vw, 52px) 0;
	border-top: 1px solid var(--mk-rule);
}
.mk-hobby:first-child { border-top: 0; }
.mk-hobby__head {
	display: flex;
	flex-direction: column;
	gap: 6px;
	margin-bottom: 16px;
}
.mk-hobby__title {
	margin: 0;
	font-family: var(--mk-serif);
	font-weight: 600;
	font-size: clamp(22px, 3vw, 30px);
	letter-spacing: .03em;
}

/* 詳細ページの趣味カード下部: 画像 + 本文 + 目標 */
.mk-hobbies__detail {
	display: grid;
	grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
	gap: clamp(20px, 3vw, 36px);
	align-items: start;
	margin-top: 22px;
	padding-top: 22px;
	border-top: 1px solid var(--mk-rule);
}
.mk-hobbies__media {
	margin: 0;
	overflow: hidden;
	border: 1px solid var(--mk-rule);
}
.mk-hobbies__media img {
	display: block;
	width: 100%;
	height: auto;
}
.mk-hobbies__detail-body {
	display: flex;
	flex-direction: column;
	gap: 16px;
}
.mk-hobbies__detail-text {
	margin: 0;
	font-size: 14.5px;
	line-height: 1.95;
	color: var(--mk-ink-soft);
	max-width: 48ch;
}
.mk-hobbies__goal {
	display: flex;
	align-items: baseline;
	gap: 12px;
	margin: 0;
	padding: 12px 16px;
	background: var(--mk-bg-alt, #f6f4ef);
	border-left: 2px solid var(--mk-accent);
}
.mk-hobbies__goal-label {
	flex: none;
	font-family: var(--mk-latin);
	font-style: italic;
	font-size: 12px;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--mk-accent);
}
.mk-hobbies__goal-text {
	font-size: 14.5px;
	line-height: 1.7;
	font-weight: 500;
}

/* 画像が無いカードは本文を1カラムで */
.mk-hobbies__detail:not(:has(.mk-hobbies__media)) {
	grid-template-columns: 1fr;
}

/* =========================================================
 * 愛読書
 * ======================================================= */
.mk-books { list-style: none; margin: 0; padding: 0; }
.mk-books__item {
	display: flex;
	align-items: baseline;
	gap: 18px;
	padding: 22px 0;
	border-top: 1px solid var(--mk-rule);
}
.mk-books__item:last-child { border-bottom: 1px solid var(--mk-rule); }
.mk-books__title {
	font-family: var(--mk-serif);
	font-weight: 600;
	font-size: clamp(18px, 2.6vw, 24px);
	letter-spacing: .04em;
}
.mk-books__title::before {
	content: "『";
	color: var(--mk-muted);
}
.mk-books__title::after {
	content: "』";
	color: var(--mk-muted);
}
.mk-books__author {
	font-size: 14px;
	letter-spacing: .08em;
	color: var(--mk-muted);
}

/* 愛読書（詳細 — 書影 + ノート） */
.mk-booklist { list-style: none; margin: 0; padding: 0; }
.mk-booklist__item {
	display: grid;
	grid-template-columns: 180px 1fr;
	gap: clamp(24px, 4vw, 48px);
	align-items: start;
	padding: clamp(28px, 4vw, 44px) 0;
	border-top: 1px solid var(--mk-rule);
}
.mk-booklist__item:last-child { border-bottom: 1px solid var(--mk-rule); }
.mk-booklist__cover {
	aspect-ratio: 3 / 4;
	border-radius: 4px;
	box-shadow: 0 12px 32px -18px rgba(20,24,35,.45);
}
.mk-booklist__cover--fallback {
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 14px;
	padding: 22px 18px;
	text-align: center;
}
.mk-booklist__cover-title {
	font-family: var(--mk-serif);
	font-weight: 700;
	font-size: 19px;
	letter-spacing: .12em;
	line-height: 1.5;
	color: var(--mk-ink);
	writing-mode: vertical-rl;
	align-self: center;
	max-height: 70%;
}
.mk-booklist__cover-author {
	font-size: 12px;
	letter-spacing: .1em;
	color: var(--mk-ink-soft);
}
.mk-booklist__body { min-width: 0; padding-top: 4px; }
.mk-booklist__title {
	margin: 0 0 6px;
	font-family: var(--mk-serif);
	font-weight: 700;
	font-size: clamp(20px, 3vw, 28px);
	letter-spacing: .04em;
}
.mk-booklist__title::before { content: "『"; color: var(--mk-muted); }
.mk-booklist__title::after  { content: "』"; color: var(--mk-muted); }
.mk-booklist__author {
	margin: 0 0 16px;
	font-size: 14px;
	letter-spacing: .08em;
	color: var(--mk-muted);
}
.mk-booklist__note {
	margin: 0;
	font-size: 15px;
	line-height: 2;
	color: var(--mk-ink-soft);
	max-width: 60ch;
}

/* =========================================================
 * 価値観 / これから
 * ======================================================= */
.mk-values__lead,
.mk-values__statement {
	margin: 0 0 clamp(24px, 4vw, 36px);
	font-family: var(--mk-serif);
	font-weight: 600;
	font-size: clamp(22px, 3.6vw, 34px);
	line-height: 1.6;
	letter-spacing: .04em;
	color: var(--mk-ink);
}
.mk-values__body { max-width: 70ch; }
.mk-values__body p {
	margin: 0 0 1.4em;
	font-size: clamp(15px, 2vw, 18px);
	line-height: 2.1;
	color: var(--mk-ink-soft);
}
.mk-values__body p:last-child { margin-bottom: 0; }
/* 詳細ページ: リード文と各項目（points）の間隔を確保 */
.mk-values__body + .mk-about__cols { margin-top: clamp(36px, 6vw, 64px); }

/* トップ要約: AI時代の柱（タイトルのみ簡易表示） */
.mk-values__subhead {
	margin: clamp(36px, 5vw, 52px) 0 20px;
	font-family: var(--mk-serif);
	font-weight: 600;
	font-size: clamp(22px, 3.6vw, 34px);
	line-height: 1.6;
	letter-spacing: .04em;
	color: var(--mk-ink);
}

/* =========================================================
 * 詳細ページ（サブページ）
 * ======================================================= */
.mk-page-hero {
	padding: calc(var(--mk-header-h) + clamp(48px, 8vw, 88px)) 0 clamp(24px, 4vw, 40px);
	border-bottom: 1px solid var(--mk-rule);
}
.mk-page-hero__back {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	margin-bottom: 26px;
	text-decoration: none;
	font-size: 13px;
	font-weight: 500;
	letter-spacing: .08em;
	color: var(--mk-muted);
	transition: color .3s ease;
}
.mk-page-hero__back:hover { color: var(--mk-accent); }
.mk-page-hero__title {
	margin: 6px 0 0;
	font-family: var(--mk-serif);
	font-weight: 700;
	font-size: clamp(30px, 6vw, 52px);
	letter-spacing: .04em;
	line-height: 1.18;
}
.mk-page-hero__lead {
	max-width: 70ch;
	margin: 22px 0 0;
	font-size: clamp(15px, 2vw, 18px);
	line-height: 2.1;
	color: var(--mk-ink-soft);
}
/* サブページは固定ヘッダーが常に不透明（ヒーロー無し） */
.mk-subpage .mk-section:first-of-type { padding-top: clamp(48px, 7vw, 80px); }

/* サブページ下部の導線 */
.mk-subfoot { background: var(--mk-bg-soft); }
.mk-subfoot__inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
}
.mk-subfoot__home {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	text-decoration: none;
	font-size: 15px;
	font-weight: 500;
	letter-spacing: .06em;
	color: var(--mk-ink-soft);
	transition: color .3s ease;
}
.mk-subfoot__home:hover { color: var(--mk-accent); }

/* =========================================================
 * reveal アニメーション
 * ======================================================= */
.mk-reveal {
	opacity: 0;
	transform: translateY(24px);
	transition: opacity .8s ease, transform .8s cubic-bezier(.2,.7,.2,1);
}
.mk-reveal.is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
	.mk-reveal, .mk-hero__inner { animation: none !important; transition: none !important; opacity: 1 !important; transform: none !important; }
	.mk-hero__scroll-line { animation: none; }
	.mk-hero__code-col { animation: none !important; }
}

/* =========================================================
 * レスポンシブ
 * ======================================================= */
@media (max-width: 860px) {
	.mk-nav-toggle { display: flex; }
	.mk-global-nav {
		position: fixed;
		inset: var(--mk-header-h) 0 auto 0;
		background: rgba(255,255,255,.98);
		backdrop-filter: blur(10px);
		border-bottom: 1px solid var(--mk-rule);
		transform: translateY(-12px);
		opacity: 0;
		pointer-events: none;
		transition: opacity .3s ease, transform .3s ease;
	}
	.mk-global-nav.is-open { opacity: 1; transform: none; pointer-events: auto; }
	.mk-global-nav__list { flex-direction: column; align-items: stretch; gap: 0; }
	.mk-global-nav__item { border-bottom: 1px solid var(--mk-rule); }
	.mk-global-nav__item:last-child { border-bottom: 0; }
	.mk-global-nav__item a {
		display: block;
		padding: 18px 24px;
		color: var(--mk-ink);
	}
	.mk-global-nav__item a::after { display: none; }
	/* メニュー内文字はヒーロー上でも常に黒（白背景パネルのため） */
	.home .mk-site-header:not(.scrolled) .mk-global-nav__item a { color: var(--mk-ink); }
}

@media (max-width: 860px) {
	.mk-hero__code-col:nth-child(n+3) { display: none; }
}
@media (max-width: 600px) {
	.mk-hero__code-col:nth-child(n+2) { display: none; }
}

@media (max-width: 720px) {
	.mk-about__cols { grid-template-columns: 1fr; gap: 40px; }
	.mk-mini { grid-template-columns: 1fr; }
	.mk-hobbies { grid-template-columns: 1fr; }
	.mk-hobbies__detail { grid-template-columns: 1fr; }
	.mk-booklist__item { grid-template-columns: 120px 1fr; gap: 20px; }
	.mk-timeline__item { grid-template-columns: 1fr; gap: 8px; padding: 28px 0; }
	.mk-row__link,
	.mk-row--flip .mk-row__link { grid-template-columns: 1fr; gap: 22px; }
	.mk-row--flip .mk-row__art-wrap { order: 0; }
	.mk-logo__en { display: none; }
}