/*
Theme Name:  my-theme
Theme URI:   https://blog-free-hit.com
Template:    cocoon-master
Author:      Hittou
Author URI:  https://blog-free-hit.com
Description: Cocoon 子テーマ。シンプルでモダンな個人サイト向け。自己紹介・ブログ・ゲームコーナー（Web ゲームへのリンク集）を備えたサイトを想定しています。
Version:     1.20.0
License:     GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: my-theme
*/

/* ===========================================================================
   my-theme リデザイン（HITコネクト 対戦ゲームUI / cycle-01）
   - 配色は名刺ブランド由来（青 × クローム × 黒 × 白）
   - 既定 = ダーク。`html.mt-light` で明色へ上書き
     （prefers-color-scheme は初回フォールバックのみ。クラス付与は JS が担当）
   - スキン軸（明暗とは独立）：6値（corp / game / toraya / note / aman / balmuda）。
     ベース（クラス無し）= ゲーム調、`html.mt-corp` でコーポレート調（青×白・発光なし）へ。
     バリアント4種（toraya/note/aman/balmuda）は `mt-corp` ＋ `mt-v-<variant>` の併用で、
     コーポレート構造を流用しつつ末尾「デザインバリアント」セクションのトークン上書きで着せ替える。
     初回既定の表示はコーポレート（functions.php の wp_head インラインがクラスを付与。'game' 明示選択時のみ mt-corp を外す）。
     文言・導線の出し分けは「コーポレート調スキン」セクション参照
   - 子テーマ独自クラスは `mt-` 接頭辞で Cocoon との衝突を回避
   =========================================================================== */

/* ---- デザイントークン：ダーク（既定）---- */
:root {
	--mt-bg:              #07090d;
	--mt-surface:         #121620;
	--mt-surface-2:       #0e1622;
	--mt-accent:          #2e9be0;
	--mt-accent-bright:   #5ec2ff;
	--mt-accent-deep:     #14609e;
	--mt-accent-contrast: #04121e;
	--mt-text:            #e8eef4;
	--mt-muted:           #8c97a6;
	--mt-border:          #232a36;
	--mt-chrome:          linear-gradient(180deg, #ffffff 0%, #dcefff 14%, #93bcd9 34%, #356a90 49%, #0f2c42 50%, #3e739a 57%, #c8e6fb 80%, #74a0bf 100%);
	--mt-radius:          12px;
	--mt-gap:             24px;
	--mt-shadow:          0 1px 2px rgba(0, 0, 0, .4), 0 8px 24px rgba(0, 0, 0, .5);
	--mt-shadow-hover:    0 0 0 1px rgba(94, 194, 255, .3), 0 8px 28px rgba(46, 155, 224, .28);
	--mt-glow:            0 0 16px rgba(70, 170, 255, .5);
}

/* ===========================================================================
   筆頭プロフィール / X・ブログ
   =========================================================================== */
.mt-x-profile {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 24px;
	margin-top: 32px;
	padding: clamp(24px, 4vw, 40px);
	border: 1px solid var(--mt-border);
	border-radius: var(--mt-radius);
	background: var(--mt-surface);
}
.mt-x-profile__intro { min-width: 0; }
.mt-x-profile > .mt-x-profile__intro .mt-label { color: var(--mt-text); }
.mt-x-profile__title {
	margin: 4px 0 12px;
	font-family: AdjustedYuGothic, "Yu Gothic", YuGothic, "Hiragino Sans", Meiryo, system-ui, sans-serif;
	font-size: clamp(1.5rem, 3vw, 2rem);
	font-weight: 700;
	line-height: 1.4;
	letter-spacing: 0;
	color: var(--mt-text);
	overflow-wrap: break-word;
	-webkit-text-stroke: 0;
	text-shadow: none;
}
.mt-x-profile__description {
	max-width: 42rem;
	margin: 0;
	font-family: AdjustedYuGothic, "Yu Gothic", YuGothic, "Hiragino Sans", Meiryo, system-ui, sans-serif;
	font-size: 1rem;
	line-height: 1.8;
	color: var(--mt-muted);
}
html.mt-corp .mt-x-profile__description,
html.mt-light .mt-x-profile__description {
	color: var(--mt-text);
}
.mt-x-profile__embed {
	width: 100%;
	max-width: 560px;
	min-width: 0;
	margin-inline: auto;
}
.mt-x-profile__account {
	display: grid;
	grid-template-columns: 44px minmax(0, 1fr) auto;
	gap: 12px;
	align-items: center;
	min-height: 68px;
	padding: 12px 16px;
	border: 1px solid var(--mt-border);
	border-radius: 12px;
	background: var(--mt-surface-2);
	color: var(--mt-text);
	text-decoration: none;
	transition: border-color .18s ease, box-shadow .18s ease;
}
.mt-x-profile__account:hover {
	border-color: var(--mt-accent-bright);
	box-shadow: var(--mt-shadow-hover);
	color: var(--mt-text);
}
.mt-x-profile__account-mark {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: #111;
	color: #fff;
	font: 700 22px/1 system-ui, sans-serif;
}
.mt-x-profile__account strong,
.mt-x-profile__account small {
	display: block;
	overflow-wrap: anywhere;
}
.mt-x-profile__account strong {
	font-family: AdjustedYuGothic, "Yu Gothic", YuGothic, "Hiragino Sans", Meiryo, system-ui, sans-serif;
	font-size: 1rem;
	line-height: 1.5;
	color: var(--mt-text);
}
.mt-x-profile__account small {
	color: var(--mt-text);
	font-size: .875rem;
	line-height: 1.5;
}
.mt-x-profile__account-action {
	color: var(--mt-text);
	font-size: .875rem;
	font-weight: 700;
	line-height: 1.5;
	white-space: nowrap;
}
.mt-x-profile__account:focus-visible {
	outline: 3px solid var(--mt-accent-bright);
	outline-offset: 3px;
}
.mt-x-profile__button,
.mt-blog-sidebar .mt-blog-author > a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 44px;
	padding: 10px 16px;
	border-radius: 999px;
	background: #111;
	color: #fff;
	font-weight: 700;
	text-decoration: none;
}
.mt-x-profile__timeline { min-width: 0; min-height: 320px; }

/* 筆頭の実験ノート */
.mt-blog-layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	align-items: start;
	width: min(860px, calc(100% - 32px));
	max-width: none;
	margin: 40px auto 64px;
}
.mt-blog-main { width: auto; min-width: 0; margin: 0; padding: 0; }
.mt-blog-hero {
	padding: clamp(24px, 5vw, 48px);
	border-radius: 20px;
	background: linear-gradient(135deg, var(--mt-accent-deep), #16324f);
	color: #fff;
}
.mt-blog-hero__eyebrow { margin: 0 0 8px; font: 700 12px/1.4 "Courier New", monospace; letter-spacing: .12em; opacity: .8; }
.mt-blog-hero h1 { margin: 0; color: #fff; font-size: clamp(28px, 5vw, 44px); line-height: 1.2; }
.mt-blog-hero > p:last-child { max-width: 680px; margin: 14px 0 0; line-height: 1.8; }
.mt-blog-categories { margin: 20px 0 28px; }
.mt-blog-categories ul { display: flex; flex-wrap: wrap; gap: 10px; margin: 0; padding: 0; list-style: none; }
.mt-blog-categories a {
	display: inline-flex;
	gap: 8px;
	align-items: center;
	min-height: 44px;
	padding: 8px 14px;
	border: 1px solid color-mix(in srgb, var(--mt-blog-category) 70%, var(--mt-border));
	border-radius: 999px;
	background: var(--mt-surface);
	background: color-mix(in srgb, var(--mt-blog-category) 12%, var(--mt-surface));
	color: var(--mt-text);
	font-weight: 700;
	text-decoration: none;
}
.mt-blog-categories__all { --mt-blog-category: var(--mt-accent-deep); }
.mt-blog-categories a.is-active {
	background: var(--mt-blog-category);
	color: #fff;
}
.mt-blog-categories a.is-active small { color: #fff; }
.mt-blog-categories small { color: var(--mt-muted); font-size: 12px; }
.mt-blog-list { display: grid; gap: 18px; }
.mt-blog-card {
	display: block;
	overflow: hidden;
	border: 1px solid var(--mt-border);
	border-left: 5px solid var(--mt-blog-category);
	border-radius: 16px;
	background: var(--mt-surface);
	color: var(--mt-text);
	box-shadow: 0 10px 28px rgba(0, 0, 0, .08);
	text-decoration: none;
	transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.mt-blog-card:hover { transform: translateY(-2px); box-shadow: 0 14px 34px rgba(0, 0, 0, .12); }
.mt-x-profile__button:focus-visible,
.mt-blog-card:focus-visible,
.mt-blog-categories a:focus-visible,
.mt-blog-sidebar a:focus-visible,
.mt-blog-search input:focus-visible,
.mt-blog-search button:focus-visible { outline: 3px solid var(--mt-accent-bright); outline-offset: 3px; }
.mt-blog-card__article { display: grid; grid-template-columns: minmax(180px, 31%) minmax(0, 1fr); min-height: 190px; }
.mt-blog-card--no-image .mt-blog-card__article { grid-template-columns: 1fr; min-height: 0; }
.mt-blog-card__media {
	position: relative;
	min-height: 190px;
	margin: 0;
	background: var(--mt-surface-2);
	background: color-mix(in srgb, var(--mt-blog-category) 12%, var(--mt-surface-2));
}
.mt-blog-card__media img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; }
.mt-blog-card__content { display: flex; flex-direction: column; min-width: 0; padding: 20px 22px; }
.mt-blog-card__category { align-self: flex-start; padding: 4px 9px; border-radius: 999px; background: var(--mt-blog-category); color: #fff; font-size: 12px; font-weight: 700; }
.mt-blog-card h2 { margin: 10px 0 8px; color: var(--mt-text); font-size: clamp(19px, 2.3vw, 25px); line-height: 1.45; }
.mt-blog-card p { margin: 0; color: var(--mt-muted); font-size: 15px; line-height: 1.75; }
.mt-blog-card time { margin-top: auto; padding-top: 14px; color: var(--mt-muted); font: 12px/1.4 "Courier New", monospace; letter-spacing: .06em; }
.mt-blog-empty { padding: 32px; border: 1px dashed var(--mt-border); border-radius: 14px; text-align: center; color: var(--mt-muted); }

.mt-blog-sidebar { display: grid; gap: 16px; width: auto; margin: 0; padding: 0; background: transparent; }
#sidebar.mt-blog-sidebar { background: transparent; }
.mt-blog-widget { margin: 0; padding: 20px; border: 1px solid var(--mt-border); border-radius: 14px; background: var(--mt-surface); color: var(--mt-text); }
.mt-blog-widget h2 { margin: 0 0 14px; color: var(--mt-text); font-size: 17px; line-height: 1.4; }
.mt-blog-search form { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; }
.mt-blog-search input { min-width: 0; min-height: 44px; padding: 8px 12px; border: 1px solid var(--mt-border); border-radius: 8px; background: var(--mt-surface-2); color: var(--mt-text); }
.mt-blog-search button { min-height: 44px; padding: 8px 14px; border: 0; border-radius: 8px; background: var(--mt-accent-deep); color: #fff; font-weight: 700; }
.mt-blog-author { display: grid; grid-template-columns: 64px 1fr; gap: 12px; }
.mt-blog-author img { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; }
.mt-blog-author h2 { margin-bottom: 4px; }
.mt-blog-author p { margin: 0; color: var(--mt-muted); font-size: 13px; line-height: 1.65; }
.mt-blog-author > a { grid-column: 1 / -1; }
.mt-blog-widget ul { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; }
.mt-blog-widget li + li { border-top: 1px solid var(--mt-border); }
.mt-blog-widget li a { display: flex; gap: 10px; align-items: baseline; justify-content: space-between; padding: 10px 0; color: var(--mt-text); line-height: 1.5; text-decoration: none; }
.mt-blog-widget--categories li a { border-left: 4px solid var(--mt-blog-category); padding-left: 10px; }
.mt-blog-widget--recent li a { display: block; font-size: 14px; }
.mt-blog-widget--recent time { display: block; margin-top: 4px; color: var(--mt-muted); font-size: 11px; }

/* ---- デザイントークン：ライト（html.mt-light で上書き）---- */
html.mt-light {
	--mt-bg:              #eef2f6;
	--mt-surface:         #ffffff;
	--mt-surface-2:       #f2f7fb;
	--mt-accent:          #1f7fc4;
	--mt-accent-bright:   #2e9be0;
	--mt-accent-deep:     #14609e;
	--mt-accent-contrast: #ffffff;
	--mt-text:            #10202e;
	--mt-muted:           #5b6b7c;
	--mt-border:          #d7e0e8;
	--mt-shadow:          0 1px 2px rgba(17, 24, 39, .08), 0 8px 24px rgba(17, 24, 39, .08);
	--mt-shadow-hover:    0 0 0 1px rgba(46, 155, 224, .3), 0 8px 24px rgba(17, 24, 39, .12);
}

/* ---- 共通レイアウト ---- */
.mt-section {
	max-width: 880px;
	margin-left: auto;
	margin-right: auto;
	padding: 8px 16px 40px;
}

/* ---- カード共通 ---- */
.mt-card {
	background: var(--mt-surface);
	color: var(--mt-text);
	border: 1px solid var(--mt-border);
	border-radius: var(--mt-radius);
	box-shadow: var(--mt-shadow);
	transition: transform .18s ease, box-shadow .18s ease;
}
.mt-card-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
	gap: var(--mt-gap);
	margin: 24px 0;
}

/* ---- ボタン ---- */
.mt-button {
	display: inline-block;
	padding: 10px 20px;
	border-radius: 999px;
	background: var(--mt-accent);
	color: var(--mt-accent-contrast);
	text-decoration: none;
	font-weight: 600;
	transition: background .18s ease;
}
.mt-button:hover { background: var(--mt-accent-deep); color: var(--mt-accent-contrast); }

/* ---- バッジ ---- */
.mt-badge {
	display: inline-block;
	padding: 2px 10px;
	border-radius: 999px;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .04em;
	background: var(--mt-border);
	color: var(--mt-muted);
}
/* プラットフォーム対応バッジ（背景＋白文字で自己完結。ライト/ダーク両対応） */
.mt-badge--mobile { background: #1f8b3b; color: #fff; } /* 📱 スマホOK */
.mt-badge--pc     { background: #475569; color: #fff; } /* ⌨ PC推奨 */
.mt-badge--app    { background: #d4af37; color: #1a1305; } /* 📥 Android アプリ */

/* ---- 自己紹介ページ ---- */
.mt-profile__hero {
	display: flex;
	align-items: center;
	gap: 20px;
	margin: 16px 0 28px;
}
.mt-profile__avatar img {
	width: 96px;
	height: 96px;
	border-radius: 50%;
	object-fit: cover;
	border: 3px solid var(--mt-surface);
	box-shadow: var(--mt-shadow);
}
.mt-profile__name {
	margin: 0;
	font-size: 28px;
	line-height: 1.3;
	color: var(--mt-text);
}
.mt-profile__body {
	font-size: 16px;
	line-height: 1.9;
	color: var(--mt-text);
}

/* ---- ゲームコーナー ---- */
.mt-games__intro {
	font-size: 16px;
	line-height: 1.9;
	color: var(--mt-text);
	margin-bottom: 8px;
}
.mt-game-card {
	display: flex;
	flex-direction: column;
	overflow: hidden;
	text-decoration: none;
	color: inherit;
}
a.mt-game-card:hover {
	transform: translateY(-4px);
	box-shadow: var(--mt-shadow-hover);
}
.mt-game-card__thumb {
	font-size: 56px;
	line-height: 1;
	text-align: center;
	padding: 28px 0;
	background: var(--mt-surface-2);
}
.mt-game-card__body { padding: 16px 18px 20px; }
.mt-game-card__title {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0 0 4px;
	font-size: 18px;
	font-weight: 700;
	color: var(--mt-text);
}
/* 対応バッジはタイトルの下に独立した行で表示 */
.mt-game-card__platform { margin: 0 0 10px; }
.mt-game-card__desc {
	margin: 0;
	font-size: 14px;
	line-height: 1.7;
	color: var(--mt-muted);
}
.mt-game-card.is-coming-soon { cursor: default; opacity: .85; }

/* ---- 投稿一覧（ブログ）の装飾: Cocoon のエントリーカードを整える ---- */
.entry-card,
.related-entry-card {
	border-radius: var(--mt-radius);
	overflow: hidden;
	box-shadow: var(--mt-shadow);
	transition: transform .18s ease, box-shadow .18s ease;
}
.entry-card:hover {
	transform: translateY(-3px);
	box-shadow: var(--mt-shadow-hover);
}

/* ===========================================================================
   Cocoon 標準面の配色（トークン適用）
   - すべて CSS 変数で着色するため、`html.mt-light` でトークンが入れ替われば
     ダーク/ライト両方に自動追従する（prefers-color-scheme には依存しない）
   - エディタ iframe の body（.editor-styles-wrapper）は対象外
   =========================================================================== */
body:not(.editor-styles-wrapper),
#container,
#content,
.main {
	background-color: var(--mt-bg);
	color: var(--mt-text);
}
#header,
#footer,
.footer {
	background-color: var(--mt-surface);
	color: var(--mt-text);
}

/* サイドバー・ウィジェット（フロント専用クラス。エディタには存在しない） */
#sidebar,
.sidebar,
.sidebar .widget {
	background-color: var(--mt-surface);
	color: var(--mt-text);
}
.sidebar .widget-title,
.sidebar .widget h3,
.sidebar .widget h4 {
	color: var(--mt-text);
}
.sidebar a {
	color: var(--mt-accent);
}

/* 投稿カード */
.entry-card,
.related-entry-card {
	background-color: var(--mt-surface);
	color: var(--mt-text);
}
.entry-card-title,
.entry-card-snippet,
.cat-label,
.entry-card .post-date {
	color: var(--mt-text);
}

/* 本文リンク・見出し */
.entry-content a,
.mt-profile__body a,
.mt-games__intro a {
	color: var(--mt-accent);
}
.mt-profile__name,
.mt-game-card__title {
	color: var(--mt-text);
}

/* ブロックエディタの保険: 編集画面（.editor-styles-wrapper）は常に明色背景前提のため
   本文を可読な濃色に固定する。フロント（サイト表示）には存在しないため影響しない。 */
.editor-styles-wrapper {
	color: #1f2733;
}

/* ---- 明暗トグルボタン（右上固定・Cocoon ヘッダーとは独立）---- */
.mt-theme-toggle {
	position: fixed;
	top: 14px;
	right: 14px;
	z-index: 9999;
	width: 44px;
	height: 44px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	border: 1px solid var(--mt-border);
	border-radius: 999px;
	background: var(--mt-surface);
	color: var(--mt-text);
	box-shadow: var(--mt-shadow);
	cursor: pointer;
	font-size: 20px;
	line-height: 1;
	transition: box-shadow .18s ease, transform .18s ease, border-color .18s ease;
}
.mt-theme-toggle:hover {
	box-shadow: var(--mt-glow);
	border-color: var(--mt-accent-bright);
	transform: translateY(-1px);
}
.mt-theme-toggle:focus-visible {
	outline: 2px solid var(--mt-accent-bright);
	outline-offset: 2px;
}
.mt-theme-toggle__icon { pointer-events: none; }

/* ===========================================================================
   HUD / 対戦ゲームUI 共通ユーティリティ（cycle-01 Task 3）
   各ページテンプレート（TOP / CHARACTER / GAME SELECT / CONTACT）が利用する。
   =========================================================================== */

/* 見出し用ディスプレイフォント（重ゴシック＝名刺のゲーム書体に寄せる） */
:root {
	--mt-font-display: "Yu Gothic", "YuGothic", "Hiragino Kaku Gothic ProN", "Noto Sans JP", "Hiragino Sans", sans-serif;
}

/* ---- HUD ラベル（ROUND 01 / CHARACTER 等の等幅ラベル）---- */
.mt-label {
	font-family: "Courier New", ui-monospace, monospace;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .22em;
	color: var(--mt-accent-bright);
	text-transform: uppercase;
}

/* ---- ゲーム書体見出し（青塗り＋フチ＋影）---- */
.mt-heading {
	font-family: var(--mt-font-display);
	font-weight: 900;
	letter-spacing: .04em;
	color: var(--mt-accent);
	-webkit-text-stroke: 4px #ffffff; /* 白フチ（ダーク既定）。塗りの下に描く */
	paint-order: stroke fill;
	text-shadow: 3px 3px 0 rgba(0, 0, 0, .45);
	line-height: 1.15;
}
/* ライトモードはフチを濃色にして可読性を確保 */
html.mt-light .mt-heading {
	-webkit-text-stroke-color: #0b2236;
	text-shadow: 3px 3px 0 rgba(11, 34, 54, .25);
}

/* ---- クローム文字（ロゴ/ヒーローのワードマーク）---- */
.mt-chrome {
	font-family: var(--mt-font-display);
	font-weight: 900;
	font-style: italic;
	letter-spacing: .02em;
	background: var(--mt-chrome);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	-webkit-text-stroke: 1px rgba(8, 20, 30, .5);
	filter: drop-shadow(0 0 14px rgba(70, 170, 255, .5));
}

/* 北斗七星モチーフ .mt-stars は cycle-02 でロゴ内に内包されたため廃止（spanも削除済み） */

/* ---- 体力ゲージ風ステータスバー ---- */
.mt-gauge {
	display: block; /* span のままだと height が効かず潰れるためブロック化 */
	height: 8px;
	border-radius: 4px;
	background: var(--mt-surface-2);
	border: 1px solid var(--mt-border);
	overflow: hidden;
}
.mt-gauge__fill {
	display: block;
	height: 100%;
	background: linear-gradient(90deg, var(--mt-accent-deep), var(--mt-accent-bright));
	box-shadow: 0 0 8px rgba(46, 155, 224, .6);
}

/* ---- メタリックな区切り線 ---- */
.mt-divider {
	height: 2px;
	width: 200px;
	max-width: 80%;
	margin: 20px auto;
	border: 0;
	background: linear-gradient(90deg, transparent, #9fc4e0, #ffffff, #9fc4e0, transparent);
}

/* ---- ヒットスパーク（カード/リンクのホバー）---- */
.mt-hit {
	transition: transform .16s ease, box-shadow .16s ease;
}
.mt-hit:hover {
	transform: translateY(-3px);
	box-shadow: var(--mt-shadow-hover);
}

/* ---- スキャンライン オーバーレイ（親に position:relative）---- */
.mt-scanlines::before {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	background: repeating-linear-gradient(0deg, rgba(0, 0, 0, .16) 0 1px, transparent 1px 3px);
	opacity: .5;
}

/* ---- Cocoon グローバルナビを HUD 調に（白背景→ダーク）---- */
#navi,
#navi .navi-in {
	background-color: var(--mt-surface);
}
#navi .navi-in > ul > li > a {
	color: var(--mt-text);
	letter-spacing: .08em;
	transition: color .16s ease, background-color .16s ease;
}
#navi .navi-in > ul > li > a:hover,
#navi .navi-in > ul > li.current-menu-item > a {
	color: var(--mt-accent-bright);
	background-color: var(--mt-surface-2);
}
#navi ul ul {
	background-color: var(--mt-surface-2);
}

/* ---- アニメーション抑制設定の尊重 ---- */
@media (prefers-reduced-motion: reduce) {
	.mt-hit,
	.mt-theme-toggle,
	a.mt-game-card,
	.entry-card {
		transition: none;
	}
	.mt-hit:hover,
	a.mt-game-card:hover,
	.entry-card:hover,
	.mt-theme-toggle:hover {
		transform: none;
	}
}

/* ===========================================================================
   TOP ＝ タイトル画面（template-front.php / cycle-01 Task 5）
   =========================================================================== */
.mt-title {
	position: relative;
	overflow: hidden;
	text-align: center;
	padding: 56px 20px 48px;
	background: radial-gradient(110% 125% at 50% 0%, #4a86b5 0%, #1a3c58 40%, var(--mt-bg) 74%);
}
html.mt-light .mt-title {
	background: radial-gradient(110% 125% at 50% 0%, #bfe2f7 0%, #e3f0fa 45%, var(--mt-bg) 78%);
}
.mt-title__inner { position: relative; max-width: 820px; margin-left: auto; margin-right: auto; }
.mt-title__logo {
	height: 100px;
	width: auto;
	/* 暗い文字を浮き立たせるための発光（やや強め） */
	filter: drop-shadow(0 0 16px rgba(120, 200, 255, .55)) drop-shadow(0 1px 1px rgba(0, 0, 0, .5));
}
.mt-title__wordmark {
	font-size: clamp(34px, 8vw, 72px);
	line-height: 1;
	margin: 12px 0 6px;
}
.mt-title__copy {
	font-family: var(--mt-font-display);
	font-weight: 700;
	color: var(--mt-text);
	font-size: clamp(15px, 3.5vw, 19px);
	letter-spacing: .04em;
	margin: 6px 0;
}
.mt-title__sub {
	color: var(--mt-muted);
	font-size: 13px;
	margin: 0;
}
.mt-title__start {
	display: inline-block;
	margin-top: 22px;
	font-family: "Courier New", ui-monospace, monospace;
	letter-spacing: .3em;
	color: var(--mt-accent-bright);
	text-decoration: none;
	animation: mtBlink 1.4s steps(1, end) infinite;
}
.mt-title__start:hover {
	color: var(--mt-accent-bright);
	text-shadow: var(--mt-glow);
}
@keyframes mtBlink { 50% { opacity: .35; } }
@media (prefers-reduced-motion: reduce) {
	.mt-title__start { animation: none; }
}

/* ===========================================================================
   ゲーム星空背景（TOP・ダークのゲーム表示のみ）— 描画は js/mt-starfield.js
   =========================================================================== */
.mt-starfield {
	display: block;
	position: fixed;
	inset: 0;
	width: 100%;
	height: 100%;
	z-index: -1;            /* ルート背景の上・全コンテンツの下に敷く */
	pointer-events: none;
	background: radial-gradient(125% 100% at 50% 0%, #0d1830 0%, #070d1a 46%, #04070e 100%);
}
/* 星空は夜空のため、ダークのゲーム表示でのみ出す（コーポレート・ライトでは隠す）。 */
html.mt-corp .mt-starfield,
html.mt-light .mt-starfield { display: none; }
/* 背面の星空が透けるよう、ダークのゲーム表示中は全ページで中間コンテナの背景を抜く。
   カード（.mt-card / .entry-card / .mt-corp-card）・#sidebar・ヘッダー/フッターの不透明背景は
   維持＝可読性を確保（星は余白・隙間に見える）。 */
html:not(.mt-corp):not(.mt-light) #container,
html:not(.mt-corp):not(.mt-light) #content,
html:not(.mt-corp):not(.mt-light) #main,
html:not(.mt-corp):not(.mt-light) .main,
html:not(.mt-corp):not(.mt-light) .entry-content {
	background-color: transparent;
}
/* スキャンラインの青グラデを外し、ロゴ直下に淡い発光だけ残す（星空を活かす） */
html:not(.mt-corp):not(.mt-light) body.mt-front .mt-title {
	background: radial-gradient(120% 80% at 50% -8%, rgba(74, 134, 181, .28), transparent 58%);
}

/* ===========================================================================
   自己紹介 ＝ CHARACTER ステータス画面（template-profile.php / cycle-01 Task 6）
   =========================================================================== */
.mt-character { position: relative; }
.mt-character__grid {
	display: grid;
	grid-template-columns: 170px 1fr;
	gap: 24px;
	align-items: start;
	margin: 14px 0 24px;
}
.mt-character__avatar {
	width: 150px;
	aspect-ratio: 274 / 244;
	margin: 4px auto 0;
	background: url(assets/img/avatar.png?v=3) center / cover no-repeat;
	/* 透過PNGなので二重マスク不要。drop-shadow が盾シルエットに沿う */
	filter: drop-shadow(0 4px 10px rgba(0, 0, 0, .5));
}
.mt-character__name {
	font-size: clamp(30px, 7vw, 44px);
	margin: 6px 0 4px;
}
.mt-character__roman { margin: 0 0 16px; }
.mt-abilities-head { margin: 0 0 10px; }
.mt-abilities {
	list-style: none;
	margin: 0 0 18px;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 11px;
}
.mt-abilities__row {
	display: flex;
	justify-content: space-between;
	gap: 10px;
	font-size: 14px;
	color: var(--mt-text);
	margin-bottom: 5px;
}
.mt-abilities__meta {
	font-family: "Courier New", ui-monospace, monospace;
	color: var(--mt-accent-bright);
}
.mt-pmp {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	padding: 10px 14px;
	border: 1px solid var(--mt-border);
	border-radius: 10px;
	background: var(--mt-surface-2);
	text-decoration: none;
	color: var(--mt-text);
	transition: box-shadow .16s ease, border-color .16s ease;
}
.mt-pmp:hover {
	box-shadow: var(--mt-glow);
	border-color: var(--mt-accent-bright);
}
.mt-pmp img { display: block; width: 64px; height: 64px; }
.mt-pmp__text { font-weight: 700; font-size: 14px; line-height: 1.4; }
.mt-pmp__text small {
	display: block;
	font-weight: 400;
	font-size: 12px;
	color: var(--mt-muted);
	font-family: "Courier New", ui-monospace, monospace;
}
.mt-character__body {
	font-size: 16px;
	line-height: 1.9;
	color: var(--mt-text);
}
.mt-attribution {
	margin-top: 24px;
	font-size: 11px;
	color: var(--mt-muted);
}
@media (max-width: 560px) {
	.mt-character__grid { grid-template-columns: 1fr; justify-items: center; text-align: center; }
	.mt-abilities__row { text-align: left; }
}

/* ===========================================================================
   ゲームコーナー ＝ GAME SELECT（template-games.php / cycle-01 Task 7）
   $mt_games のロジックは PHP 側で維持。ここは見た目だけアーケード筐体調に。
   =========================================================================== */
.mt-gameselect__label { margin: 8px 0 4px; }
.mt-gameselect .mt-game-card { position: relative; }
.mt-gameselect .mt-game-card__thumb {
	border-bottom: 1px solid var(--mt-border);
	background: radial-gradient(120% 120% at 50% 0%, #102338 0%, var(--mt-surface-2) 70%);
}
html.mt-light .mt-gameselect .mt-game-card__thumb {
	background: radial-gradient(120% 120% at 50% 0%, #d7ecfb 0%, var(--mt-surface-2) 70%);
}
.mt-gameselect .mt-game-card__body { padding-bottom: 26px; }
.mt-gameselect a.mt-game-card:hover {
	border-color: var(--mt-accent-bright);
	box-shadow: var(--mt-shadow-hover);
}
.mt-gameselect a.mt-game-card::after {
	content: "\25B6 SELECT";
	position: absolute;
	bottom: 10px;
	right: 12px;
	font-family: "Courier New", ui-monospace, monospace;
	font-size: 11px;
	letter-spacing: .2em;
	color: var(--mt-accent-bright);
	opacity: 0;
	transition: opacity .16s ease;
}
.mt-gameselect a.mt-game-card:hover::after { opacity: 1; }

/* ===========================================================================
   ブログ ＝ BATTLE LOG（cycle-01 Task 8 / CSS のみ）
   一覧（Cocoon 投稿カード）は戦績ログ調に。記事本文は可読性を最優先で担保。
   =========================================================================== */
/* 投稿カード一覧 = 戦績ログ */
.entry-card,
.related-entry-card {
	border: 1px solid var(--mt-border);
	border-left: 3px solid var(--mt-accent);
}
.entry-card:hover {
	border-color: var(--mt-accent-bright);
}
.entry-card .post-date,
.entry-card .date {
	font-family: "Courier New", ui-monospace, monospace;
	letter-spacing: .06em;
	color: var(--mt-accent-bright);
}

/* 記事本文の可読性（ダーク/ライト両対応。HUD 装飾は本文に被せない） */
.entry-content {
	color: var(--mt-text);
	line-height: 1.9;
}
.entry-content h1,
.entry-content h2,
.entry-content h3,
.entry-content h4 {
	color: var(--mt-text);
}
.entry-content blockquote {
	border-left: 3px solid var(--mt-accent);
	background: var(--mt-surface-2);
	color: var(--mt-text);
	padding: 12px 16px;
	border-radius: 0 8px 8px 0;
}
.entry-content code {
	background: var(--mt-surface-2);
	color: var(--mt-text);
	border: 1px solid var(--mt-border);
	border-radius: 4px;
	padding: 1px 6px;
}
.entry-content pre {
	background: var(--mt-surface-2);
	color: var(--mt-text);
	border: 1px solid var(--mt-border);
	border-radius: 8px;
	padding: 14px;
	overflow: auto;
}
.entry-content pre code {
	background: none;
	border: 0;
	padding: 0;
}

/* ===========================================================================
   CONTACT ＝ 挑戦者求む（template-contact.php / cycle-01 Task 9）
   =========================================================================== */
.mt-challenger {
	position: relative;
	text-align: center;
	overflow: hidden;
}
.mt-challenger__head {
	font-size: clamp(28px, 7vw, 46px);
	margin: 8px 0;
}
.mt-challenger__copy {
	color: var(--mt-text);
	font-family: var(--mt-font-display);
	font-weight: 700;
	line-height: 1.7;
	margin: 0 0 8px;
}
.mt-challenger__body {
	color: var(--mt-muted);
	max-width: 640px;
	margin: 0 auto 20px;
}
.mt-form {
	max-width: 520px;
	margin: 8px auto 0;
	text-align: left;
	display: flex;
	flex-direction: column;
	gap: 14px;
}
.mt-form__label {
	display: flex;
	flex-direction: column;
	gap: 6px;
	font-size: 14px;
	font-weight: 700;
	color: var(--mt-text);
}
.mt-form__input,
.mt-form--cf7 input[type="text"],
.mt-form--cf7 input[type="email"],
.mt-form--cf7 input[type="tel"],
.mt-form--cf7 textarea {
	/* width:100% に padding/border を含めて算出し、親(Cocoon)の box-sizing リセットに依存しない。
	   リセットが無い環境でも入力欄が viewport をはみ出さない（横スクロール防止）。 */
	box-sizing: border-box;
	font: inherit;
	font-weight: 400;
	width: 100%;
	padding: 10px 12px;
	border-radius: 8px;
	border: 1px solid var(--mt-border);
	background: var(--mt-surface);
	color: var(--mt-text);
}
.mt-form__input:focus,
.mt-form--cf7 input:focus,
.mt-form--cf7 textarea:focus {
	outline: none;
	border-color: var(--mt-accent-bright);
	box-shadow: var(--mt-glow);
}
.mt-form__submit,
.mt-form--cf7 input[type="submit"] {
	align-self: flex-start;
	border: 0;
	cursor: pointer;
	font-size: 15px;
}
.mt-form--cf7 input[type="submit"] {
	display: inline-block;
	padding: 10px 20px;
	border-radius: 999px;
	background: var(--mt-accent);
	color: var(--mt-accent-contrast);
	font-weight: 600;
}
.mt-form--cf7 input[type="submit"]:hover { background: var(--mt-accent-deep); }
.mt-form__notice {
	max-width: 520px;
	margin: 0 auto 14px;
	padding: 10px 12px;
	border: 1px dashed #b58900;
	border-radius: 8px;
	background: rgba(181, 137, 0, .12);
	color: #d8c3a0;
	font-size: 13px;
	text-align: left;
}
/* honeypot（画面外へ追い出す。スクリーンリーダーからも実質隠す） */
.mt-form__hp {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}
.mt-form__placeholder {
	max-width: 520px;
	margin: 8px auto 0;
	color: var(--mt-muted);
}

/* ===========================================================================
   cycle-02: サイドバー非表示（ゲームUIのカスタムテンプレ）＋ TOP の SELECT メニュー
   =========================================================================== */
/* カスタムテンプレ4種は1カラム全幅（ブログはサイドバー維持）。
   Cocoon の指定が強いため、ここに限り限定的に !important を使う。 */
body.mt-no-sidebar #sidebar { display: none !important; }
/* サイドバーが入っていた Cocoon のレイアウト（flex/grid 等）を打ち消し、本文を確実に中央全幅にする */
body.mt-no-sidebar #content { display: block !important; }
body.mt-no-sidebar #main,
body.mt-no-sidebar .main,
body.mt-no-sidebar #content {
	width: 100% !important;
	max-width: 100% !important;
	float: none !important;
	margin-left: auto;
	margin-right: auto;
}
/* TOP（タイトル画面）はヒーローのSELECTメニュー＋フッターに導線があるため、グローバルナビ重複を隠す */
body.mt-front #navi { display: none !important; }

/* TOP の SELECT メニュー */
.mt-select-head { text-align: center; margin: 8px 0 4px; }
.mt-select {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
	gap: 16px;
	margin: 12px 0 28px;
}
.mt-select__item {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
	padding: 22px 16px;
	text-decoration: none;
	text-align: center;
}
.mt-select__label {
	font-size: 22px;
	line-height: 1.1;
	/* 2行分の高さを確保し、1行のラベルでも下のサブ見出しの高さを揃える */
	min-height: 2.4em;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
}
.mt-select__sub { color: var(--mt-muted); font-size: 13px; }

/* PRESS START のアクション：スムーススクロール＋到着時に SELECT をパルス */
html { scroll-behavior: smooth; }
#mt-start { scroll-margin-top: 80px; }
.mt-select__item.mt-pulse { animation: mtPulse .7s ease 2; }
@keyframes mtPulse {
	0%   { box-shadow: 0 0 0 0 rgba(94, 194, 255, .55); }
	100% { box-shadow: 0 0 0 16px rgba(94, 194, 255, 0); }
}
@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	.mt-select__item.mt-pulse { animation: none; }
}

/* ===========================================================================
   コーポレート調スキン（html.mt-corp / cycle: corporate-skin-toggle）
   - 明暗（mt-light）とは独立した第2軸。`html.mt-corp` 付与で青×白の硬めの見た目へ。
   - クラス付与は描画前（functions.php の wp_head インライン）に行うため FOUC なし。
   - このセクションは「追記のみ」。ベース（クラス無し＝ゲーム調）のルールは変更しない＝回帰防止
     （初回に表示する既定スキンは functions.php 側で決定し、ここでは CSS の上書き層のみ定義する）。
   - mt-light と mt-corp が同時に付いても、後勝ち（このセクションが後ろ）で corp が優先される。
   =========================================================================== */

/* ---- 文言・要素の出し分けユーティリティ ----
   「隠すだけ」で要素本来の display を強制しない（flex/grid/inline を壊さない）。 */
html.mt-corp .mt-game-only { display: none; }
html:not(.mt-corp) .mt-corp-only { display: none; }

/* ---- デザイントークン：コーポレート（青×白・堅め。赤は使わない）---- */
html.mt-corp {
	--mt-bg:              #ffffff;
	--mt-surface:         #ffffff;
	--mt-surface-2:       #f4f7fa;
	--mt-accent:          #1763a6;
	--mt-accent-bright:   #2e9be0;
	--mt-accent-deep:     #0f4c84;
	--mt-accent-contrast: #ffffff;
	--mt-text:            #1f2733;
	--mt-muted:           #5b6b7c;
	--mt-border:          #dfe5ec;
	--mt-radius:          10px;
	--mt-shadow:          0 1px 2px rgba(17, 24, 39, .06), 0 8px 24px rgba(17, 24, 39, .08);
	--mt-shadow-hover:    0 1px 2px rgba(17, 24, 39, .08), 0 12px 28px rgba(17, 24, 39, .12);
	/* ネオン発光は廃止し、淡いフォーカスリング相当へ（hover/focus の box-shadow に流用） */
	--mt-glow:            0 0 0 3px rgba(23, 99, 166, .16);

	/* ---- コーポレート層トークン（--mt-c-*）----
	   コーポレート構造（mt-corp-* セレクタ）にハードコードされていた色・角丸・書体の等価トークン。
	   値はトークン化前と同一＝コーポレートの見た目は不変。バリアントスキン（html.mt-v-* / 末尾の
	   「デザインバリアント」セクション）がこれらを上書きして着せ替える。 */
	--mt-c-heading:         #10243a;                                  /* 見出し・カードタイトル */
	--mt-c-nav-bg:          #ffffff;                                  /* グローバルナビ背景 */
	--mt-c-nav-link:        #33414f;                                  /* ナビリンク文字 */
	--mt-c-hero-bg:         linear-gradient(160deg, #eaf3fb 0%, #f7fafd 55%, #ffffff 100%); /* ヒーロー背景 */
	--mt-c-card-bg:         #ffffff;                                  /* カード／実績／投稿カード背景 */
	--mt-c-chip-bg:         #eaf3fb;                                  /* チップ・カードアイコン背景 */
	--mt-c-chip-border:     #cfe2f2;                                  /* チップ・バッジ枠線 */
	--mt-c-pill:            999px;                                    /* バッジ／チップのピル角丸 */
	--mt-c-radius:          12px;                                     /* カード角丸 */
	--mt-c-radius-sm:       8px;                                      /* 実績行など小さめ角丸 */
	--mt-c-btn-radius:      8px;                                      /* CTA ボタン角丸 */
	--mt-c-cta-bg:          linear-gradient(135deg, var(--mt-accent-deep), var(--mt-accent)); /* CTA 帯背景 */
	--mt-c-cta-text:        #ffffff;                                  /* CTA 帯見出し */
	--mt-c-cta-lead:        rgba(255, 255, 255, .9);                  /* CTA 帯リード文 */
	--mt-c-btn-invert-bg:   #ffffff;                                  /* CTA 帯内の反転ボタン背景 */
	--mt-c-btn-invert-text: var(--mt-accent-deep);                    /* 同・文字 */
	--mt-c-footer-bg:       #0f2233;                                  /* フッター背景 */
	--mt-c-footer-text:     #cdd9e5;                                  /* フッター本文 */
	--mt-c-footer-title:    #ffffff;                                  /* フッターブランド名・リンク hover */
	--mt-c-footer-muted:    #7f95a8;                                  /* フッター dt・コピーライト */
	--mt-c-footer-soft:     #9fb2c4;                                  /* フッタータグライン */
	--mt-c-font-heading:    var(--mt-font-display);                   /* 見出し書体 */
}

/* ---- アーケード装飾の無効化（コーポレート時のみ）---- */

/* ワードマーク：クローム発光・斜体・グラデクリップを解除しプレーンなネイビー太字に */
html.mt-corp .mt-chrome {
	background: none;
	-webkit-background-clip: border-box;
	background-clip: border-box;
	color: var(--mt-accent-deep);
	-webkit-text-stroke: 0;
	filter: none;
	font-style: normal;
}

/* ゲーム書体見出し：白フチ・影を解除し、落ち着いたソリッド見出しに */
html.mt-corp .mt-heading {
	color: var(--mt-text);
	font-weight: 700;
	-webkit-text-stroke: 0;
	text-shadow: none;
}

/* HUD ラベル：等幅ネオン → 字間広めの控えめミュートラベル（アーケードの大文字強制も解除） */
html.mt-corp .mt-label {
	font-family: var(--mt-font-display);
	color: var(--mt-muted);
	letter-spacing: .12em;
	font-weight: 700;
	text-transform: none;
}

/* 走査線オーバーレイは消す */
html.mt-corp .mt-scanlines::before { display: none; }

/* TOP ヒーロー：暗色ラジアル → 白基調の淡いグラデ。ロゴの発光も解除 */
html.mt-corp .mt-title {
	background: linear-gradient(180deg, var(--mt-surface-2) 0%, var(--mt-bg) 100%);
}
html.mt-corp .mt-title__logo { filter: none; }

/* PRESS START 行 → 点滅解除し、落ち着いた CTA ボタンに */
html.mt-corp .mt-title__start {
	font-family: var(--mt-font-display);
	letter-spacing: normal;
	color: var(--mt-accent-contrast);
	background: var(--mt-accent);
	padding: 11px 22px;
	border-radius: 999px;
	font-weight: 700;
	animation: none;
}
html.mt-corp .mt-title__start:hover {
	color: var(--mt-accent-contrast);
	background: var(--mt-accent-deep);
	text-shadow: none;
}

/* TOP SELECT のコーポレート用ラベル（日本語）も見出し書体で揃える */
html.mt-corp .mt-select__label {
	font-family: var(--mt-font-display);
	font-weight: 700;
	color: var(--mt-text);
}

/* 資格バー：グロー解除・単色の控えめなバーに */
html.mt-corp .mt-gauge__fill {
	background: var(--mt-accent);
	box-shadow: none;
}

/* メタリックな区切り線 → 淡い実線 */
html.mt-corp .mt-divider { background: var(--mt-border); }

/* GAME SELECT ページを直 URL で開いた場合の配色追従（暗色サムネ → ライト変種）。
   ホバー時のアーケード疑似ラベル「▶ SELECT」も消す。 */
html.mt-corp .mt-gameselect .mt-game-card__thumb {
	background: radial-gradient(120% 120% at 50% 0%, #d7ecfb 0%, var(--mt-surface-2) 70%);
}
html.mt-corp .mt-gameselect a.mt-game-card::after { content: none; }

/* ---- ゲーム導線の非表示（コーポレート時）----
   ・TOP の GAME SELECT 項目はテンプレ側で .mt-game-only を付与（上のユーティリティで非表示）。
   ・Cocoon グローバルナビ等のゲーム項目は、メニュー項目に CSS クラス mt-nav-game を付ければ隠せる
     （付与は WP 管理画面 > メニュー > 各項目の「CSS クラス」欄。報告書に手順を記載）。 */
html.mt-corp .mt-nav-game { display: none; }

/* ===========================================================================
   HUD：スキン切替タブバー（.mt-skintabs / cycle-02）
   6スキンの絵文字タブ＋スライドするアクティブインジケータ（バウンド系イージング）。
   現在スキン名はタブ右に小さく表示し、切替時にふわっと差し替える。
   インジケータの位置決め（transform/width）は js/mt-theme-toggle.js が計測して書き込む。
   =========================================================================== */
.mt-skintabs {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 2px;
	padding: 4px;
	border: 1px solid var(--mt-border);
	border-radius: 999px;
	background: var(--mt-surface);
	box-shadow: var(--mt-shadow);
}
.mt-skintabs__btn {
	position: relative;
	z-index: 1;
	width: 34px;
	height: 34px;
	padding: 0;
	border: 0;
	border-radius: 999px;
	background: transparent;
	cursor: pointer;
	font-size: 16px;
	line-height: 1;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	transition: transform .25s cubic-bezier(.34, 1.56, .64, 1);
}
.mt-skintabs__btn:hover { transform: translateY(-2px) scale(1.1); }
.mt-skintabs__btn.is-active { transform: none; }
.mt-skintabs__btn:focus-visible {
	outline: 2px solid var(--mt-accent-bright);
	outline-offset: 2px;
}
/* アクティブ位置のインジケータ：translateX/width を JS が計測配置。overshoot で気持ちよく滑る */
.mt-skintabs__ind {
	position: absolute;
	top: 4px;
	bottom: 4px;
	left: 0;
	width: 0;
	border-radius: 999px;
	background: var(--mt-surface-2);
	box-shadow: inset 0 0 0 1px var(--mt-accent);
	transition: transform .45s cubic-bezier(.34, 1.56, .64, 1), width .45s cubic-bezier(.34, 1.56, .64, 1);
}
.mt-skintabs__current {
	margin: 0 8px 0 6px;
	font-size: 12px;
	font-weight: 700;
	color: var(--mt-muted);
	white-space: nowrap;
}
.mt-skintabs__current.is-swap { animation: mtSkinName .35s ease; }
@keyframes mtSkinName {
	from { opacity: 0; transform: translateY(6px); }
	to   { opacity: 1; transform: none; }
}
/* フローティング配置（ゲーム表示用。明暗トグルの左隣） */
.mt-skintabs--float {
	position: fixed;
	top: 14px;
	right: 66px; /* 明暗トグルの左隣：右基準14 + 幅44 + 余白8 = 66 */
	z-index: 9999;
}
@media (prefers-reduced-motion: reduce) {
	.mt-skintabs__btn,
	.mt-skintabs__ind { transition: none; }
	.mt-skintabs__btn:hover { transform: none; }
	.mt-skintabs__current.is-swap { animation: none; }
}

/* コーポレートおよびバリアント4種は、トークン上書き（html.mt-corp／さらに後ろの html.mt-v-*）で
   各スキン固定のパレットに確定する（mt-light の有無に依らず後勝ち）。
   コーポレート系ではフローティングの操作群を隠し、スキン切替はグローバルナビ内のタブバーに集約する
   （明暗トグルはコーポレート系では効果が無いため不要）。 */
html.mt-corp .mt-theme-toggle,
html.mt-corp .mt-skintabs--float { display: none; }

/* ===========================================================================
   コーポレート構造（cycle-02 / corporate-skin-toggle）
   コーポレート表示でのみ出す「会社サイト型」の chrome（横ナビ／フッター）と
   TOP ランディング。色は html.mt-corp トークン（青×白）を利用。追記のみ・既存不変。
   =========================================================================== */

/* ---- コーポレート時は Cocoon の chrome を隠し、自前の chrome で置換 ---- */
html.mt-corp #header,
html.mt-corp #navi,
html.mt-corp #footer { display: none !important; }
/* TOP はランディングの帯を全幅にするため、Cocoon ラッパの余白を打ち消す */
html.mt-corp body.mt-front #content,
html.mt-corp body.mt-front #main,
html.mt-corp body.mt-front .main {
	padding: 0 !important;
	margin: 0 auto !important;
	max-width: 100% !important;
	width: 100% !important;
}

/* ---- 共通ボタン ---- */
.mt-corp-btn {
	display: inline-block;
	padding: 13px 26px;
	border-radius: var(--mt-c-btn-radius);
	font-weight: 700;
	font-size: 15px;
	text-decoration: none;
	transition: background .18s ease, color .18s ease, border-color .18s ease;
}
.mt-corp-btn--primary { background: var(--mt-accent); color: var(--mt-accent-contrast); }
.mt-corp-btn--primary:hover { background: var(--mt-accent-deep); color: var(--mt-accent-contrast); }
.mt-corp-btn--ghost { background: transparent; color: var(--mt-accent-deep); border: 1.5px solid var(--mt-border); }
.mt-corp-btn--ghost:hover { border-color: var(--mt-accent); color: var(--mt-accent); }
.mt-corp-btn--invert { background: var(--mt-c-btn-invert-bg); color: var(--mt-c-btn-invert-text); }
.mt-corp-btn--invert:hover { background: var(--mt-c-chip-bg); color: var(--mt-c-btn-invert-text); }

/* ---- グローバルナビ（上部固定） ---- */
.mt-corp-nav {
	position: sticky;
	top: 0;
	z-index: 9990;
	background: var(--mt-c-nav-bg);
	border-bottom: 1px solid var(--mt-border);
	box-shadow: 0 1px 0 rgba(17, 24, 39, .04);
}
.mt-corp-nav__inner {
	max-width: 1100px;
	margin: 0 auto;
	padding: 0 20px;
	min-height: 62px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
}
.mt-corp-nav__brand {
	font-family: var(--mt-c-font-heading);
	font-weight: 900;
	font-size: 20px;
	color: var(--mt-accent-deep);
	text-decoration: none;
	white-space: nowrap;
}
.mt-corp-nav__menu { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; justify-content: flex-end; }
.mt-corp-nav__menu > a {
	color: var(--mt-c-nav-link);
	text-decoration: none;
	font-size: 14px;
	font-weight: 600;
	padding: 8px 12px;
	border-radius: 6px;
	transition: color .16s ease, background-color .16s ease;
}
.mt-corp-nav__menu > a:hover { color: var(--mt-accent); background: var(--mt-surface-2); }
.mt-corp-nav__cta { background: var(--mt-accent); color: #fff !important; }
.mt-corp-nav__cta:hover { background: var(--mt-accent-deep) !important; }
/* ナビ内のタブバー：基本スタイルは .mt-skintabs を継承し、ナビ内では一回り小さく */
.mt-skintabs--nav { margin-left: 6px; padding: 3px; box-shadow: none; background: var(--mt-surface-2); }
.mt-skintabs--nav .mt-skintabs__btn { width: 30px; height: 30px; font-size: 14px; }
.mt-skintabs--nav .mt-skintabs__ind { top: 3px; bottom: 3px; background: var(--mt-c-card-bg); }

/* ---- スクロール位置をナビ高さ分オフセット ---- */
html.mt-corp .mt-corp-sec[id],
html.mt-corp .mt-corp-hero { scroll-margin-top: 74px; }

/* ---- ヒーロー ---- */
.mt-corp-hero { background: var(--mt-c-hero-bg); padding: 72px 20px 60px; text-align: center; }
.mt-corp-hero__inner { max-width: 880px; margin: 0 auto; }
.mt-corp-hero__eyebrow { color: var(--mt-accent-deep); font-weight: 700; letter-spacing: .14em; font-size: 13px; margin: 0 0 14px; }
.mt-corp-hero__title {
	font-family: var(--mt-c-font-heading);
	font-weight: 900;
	color: var(--mt-c-heading);
	font-size: clamp(28px, 5.4vw, 46px);
	line-height: 1.3;
	margin: 0 0 18px;
}
.mt-corp-hero__lead { color: var(--mt-muted); font-size: clamp(15px, 2.4vw, 17px); line-height: 1.9; max-width: 720px; margin: 0 auto 28px; }
.mt-corp-hero__cta { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
.mt-corp-hero__orbit { display: flex; justify-content: center; align-items: center; }

/* デスクトップ：テキスト左／太陽系オービット右の2カラム。狭い幅では縦積み（基底のまま）。
   開始幅はバッジ帯 max-width:880px と揃える。 */
@media (min-width: 881px) {
	.mt-corp-hero__inner {
		display: grid;
		grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
		align-items: center;
		gap: 44px;
		max-width: 1080px;
		text-align: left;
	}
	.mt-corp-hero__lead { margin-left: 0; margin-right: 0; }
	.mt-corp-hero__cta { justify-content: flex-start; }
}

/* ---- 太陽系オービット（中央の白☆＋鮮やかなグラデ球＋薄い同心円＋逆回りの紫2円＋星屑。保有資格は“惑星”として四隅に静止配置。装飾＝aria-hidden） ----
   層構成（中心→外。半径比は --orbit に対する値）：
   ＝見本（Claude スキル図）に寄せた構成：
     白い★core(半径≈0.075) → 鮮やかな青→紫→ピンクのグラデ球 disc(半径≈0.165・白coreが抜けてドーナツ)
     → 薄い同心円 dring×2(半径≈0.26/0.40) → 逆回りの紫2円 moon×2(cw=0.20／ccw=0.32・広く離す)
     → items(資格チップ 全て rf=0.40・四隅 NW/NE/SW/SE)
   ※ disc/dring は直接 calc、moon は --mr で半径指定。--rf/--p は資格チップ(.mt-orbit__item)専用のインライン変数：
     --rf = 軌道半径（--orbit に対する比） / --p = 配置位相(0..1)
   資格チップは静止配置（--p の角度・--rf の半径に置き、--p の逆回転で横書き正立）＝公転しない。
   動くのは紫2円(moon)と星屑(dust)のみ。 */
.mt-orbit {
	--orbit: min(380px, 84vw);
	position: relative;
	width: var(--orbit);
	height: var(--orbit);
	margin: 8px auto;
	flex: 0 0 auto;
}
/* 中央：白い円＋紫の星（見本の中心）。グラデ球の中心に白く抜けてドーナツを作る。 */
.mt-orbit__core {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: clamp(46px, calc(var(--orbit) * .15), 62px);
	height: clamp(46px, calc(var(--orbit) * .15), 62px);
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: clamp(20px, calc(var(--orbit) * .07), 30px);
	line-height: 1;
	color: #7c5cfa; /* 紫の星 */
	background: radial-gradient(circle at 50% 38%, #ffffff 0%, #ffffff 68%, #f4f1ff 100%);
	box-shadow: 0 6px 20px rgba(124, 92, 250, .28), inset 0 0 0 1px rgba(255, 255, 255, .9);
	z-index: 2;
}
/* 鮮やかなグラデ球（見本の光る球）：青→紫→ピンク。白い core が中心に抜けてドーナツに見える。 */
.mt-orbit__disc {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: calc(var(--orbit) * .33);
	height: calc(var(--orbit) * .33);
	border-radius: 50%;
	background: linear-gradient(140deg, #3aa0e6 0%, #7c5cfa 50%, #ec5fa6 100%);
	box-shadow: 0 0 46px rgba(124, 92, 250, .45), 0 0 20px rgba(58, 160, 230, .35);
	z-index: 1;
}
/* 薄い同心円2本（見本の外側リング）：内＝半径≈0.26 / 外＝半径≈0.40（資格チップと同半径）。淡い紫の細線。 */
.mt-orbit__dring {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: calc(var(--orbit) * .52);
	height: calc(var(--orbit) * .52);
	border-radius: 50%;
	border: 1px solid rgba(124, 92, 250, .18);
	z-index: 0;
}
.mt-orbit__dring::after {
	content: "";
	position: absolute;
	inset: calc(var(--orbit) * -.14); /* 外薄リング＝半径≈0.40（チップと同半径） */
	border-radius: 50%;
	border: 1px solid rgba(124, 92, 250, .14);
}
/* 回転する紫の2円：中心アンカー(0サイズ)を公転させ、::before の紫円を描く。--cw=時計／--ccw=反時計。 */
.mt-orbit__moon {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 0;
	height: 0;
	z-index: 1;
}
.mt-orbit__moon::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 7px;
	height: 7px;
	border-radius: 50%;
	transform: translate(-50%, -50%);
	background: radial-gradient(circle at 38% 34%, #c9bbff 0%, #7c5cfa 70%, #5b3fd6 100%);
	box-shadow: 0 0 9px rgba(124, 92, 250, .75);
}
/* cw＝グラデ球外〜内薄リング間／ccw＝内薄リング〜外薄リング間 を逆回り。広い余白で半径を大きく離す（重ならない）。
   開始位相を反対側にして（ccw に負ディレイ）同時に固まらないようにする。 */
.mt-orbit__moon--cw {
	--mr: calc(var(--orbit) * .20); /* 球(0.165)外〜内薄リング(0.26)間 */
	transform: rotate(-90deg) translateX(var(--mr)); /* 静止基準＝上（reduced-motion） */
	animation: mtMoonCW 20s linear infinite;
}
.mt-orbit__moon--ccw {
	--mr: calc(var(--orbit) * .32); /* 内薄リング(0.26)〜外薄リング(0.40)間。cw と半径差≈0.12*orbit で大きく離れる */
	transform: rotate(90deg) translateX(var(--mr)); /* 静止基準＝下（reduced-motion） */
	animation: mtMoonCCW 26s linear infinite;
	animation-delay: -13s; /* 周期の半分＝開始位相を cw の反対側へ */
}
@keyframes mtMoonCW {
	from { transform: rotate(0)      translateX(var(--mr)); }
	to   { transform: rotate(360deg) translateX(var(--mr)); }
}
@keyframes mtMoonCCW {
	from { transform: rotate(0)       translateX(var(--mr)); }
	to   { transform: rotate(-360deg) translateX(var(--mr)); }
}
/* 星屑：::before/::after の box-shadow 群で多数の小点を散らし、中心まわりのゆっくり連続回転＋またたきで“動いて見える”。
   白基調の背景でも見えるよう 3px・濃いめの青/紫で描く。座標は --orbit=380px 基準の固定 px（±~150px 内）。 */
.mt-orbit__dust {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 3px;
	height: 3px;
	z-index: 0;
	pointer-events: none;
}
.mt-orbit__dust::before,
.mt-orbit__dust::after {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 3px;
	height: 3px;
	border-radius: 50%;
}
/* 層1：青系の点（ブランド青＋紫の混在・白背景で視認できる濃さ） */
.mt-orbit__dust::before {
	background: rgba(46, 155, 224, .62);
	box-shadow:
		-142px -58px 0 0 rgba(46, 155, 224, .62),
		118px -132px 0 0 rgba(124, 92, 250, .52),
		-44px -150px 0 0 rgba(46, 155, 224, .58),
		150px -22px 0 0 rgba(124, 92, 250, .5),
		-126px 44px 0 0 rgba(46, 155, 224, .6),
		96px 120px 0 0 rgba(124, 92, 250, .52),
		-72px 138px 0 0 rgba(46, 155, 224, .56),
		28px -96px 0 0 rgba(46, 155, 224, .5),
		-150px -8px 0 0 rgba(124, 92, 250, .5),
		134px 70px 0 0 rgba(46, 155, 224, .6),
		-30px 148px 0 0 rgba(124, 92, 250, .48),
		60px -150px 0 0 rgba(46, 155, 224, .54),
		-108px -110px 0 0 rgba(46, 155, 224, .5),
		146px -88px 0 0 rgba(124, 92, 250, .52),
		8px 150px 0 0 rgba(46, 155, 224, .54),
		-148px 112px 0 0 rgba(46, 155, 224, .5),
		112px 148px 0 0 rgba(124, 92, 250, .48),
		-92px -150px 0 0 rgba(46, 155, 224, .5),
		150px 18px 0 0 rgba(46, 155, 224, .54),
		-12px -148px 0 0 rgba(124, 92, 250, .5);
	animation: mtDustSpinCW 150s linear infinite, mtDustTwA 5s ease-in-out infinite alternate;
}
/* 層2：紫系の点（紫＋濃青の混在・別位置/別周期で非同期にまたたく） */
.mt-orbit__dust::after {
	background: rgba(124, 92, 250, .6);
	box-shadow:
		-96px -120px 0 0 rgba(124, 92, 250, .6),
		140px -50px 0 0 rgba(20, 96, 158, .5),
		-150px 80px 0 0 rgba(124, 92, 250, .56),
		70px 140px 0 0 rgba(20, 96, 158, .5),
		16px -134px 0 0 rgba(124, 92, 250, .58),
		-66px 96px 0 0 rgba(20, 96, 158, .48),
		122px 96px 0 0 rgba(124, 92, 250, .54),
		-126px -78px 0 0 rgba(20, 96, 158, .5),
		48px 62px 0 0 rgba(124, 92, 250, .5),
		-40px -64px 0 0 rgba(20, 96, 158, .48),
		90px -100px 0 0 rgba(124, 92, 250, .54),
		-150px -36px 0 0 rgba(20, 96, 158, .5),
		36px 132px 0 0 rgba(124, 92, 250, .5),
		148px 130px 0 0 rgba(20, 96, 158, .48),
		-110px 140px 0 0 rgba(124, 92, 250, .5),
		132px -120px 0 0 rgba(20, 96, 158, .48),
		-20px 110px 0 0 rgba(124, 92, 250, .48),
		78px -60px 0 0 rgba(20, 96, 158, .5);
	animation: mtDustSpinCCW 190s linear infinite, mtDustTwB 7s ease-in-out infinite alternate;
}
/* 動きを知覚できるよう、星屑レイヤを中心まわりに“ゆっくり連続回転”させる（外側の点が弧を描いて動く＝はっきり動いて見える）。
   回転(transform)とまたたき(opacity)は別アニメで合成。層A/Bは逆回り（counter-swirl）・別周期。 */
@keyframes mtDustSpinCW  { from { transform: rotate(0); }    to { transform: rotate(360deg); } }
@keyframes mtDustSpinCCW { from { transform: rotate(0); }    to { transform: rotate(-360deg); } }
@keyframes mtDustTwA { 0% { opacity: .5; }  50% { opacity: 1; }  100% { opacity: .55; } }
@keyframes mtDustTwB { 0% { opacity: .7; }  50% { opacity: .4; } 100% { opacity: .75; } }
.mt-orbit__items {
	position: absolute;
	inset: 0;
	margin: 0;
	padding: 0;
	list-style: none;
	z-index: 3;
}
.mt-orbit__item {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 0;
	height: 0;
	/* 静止配置：位相角 --p・半径 --rf に置く（公転はしない＝資格は動かさない） */
	transform: rotate(calc(var(--p) * 360deg)) translate(calc(var(--orbit) * var(--rf)));
}
.mt-orbit__chip {
	position: absolute;
	top: 0;
	left: 0;
	/* 中心合わせ＋位相角を打ち消して横書き正立（静止） */
	transform: translate(-50%, -50%) rotate(calc(var(--p) * -360deg));
	white-space: nowrap;
	background: #fff;
	color: var(--mt-accent-deep);
	border: 1px solid #cfe2f2;
	border-radius: 999px;
	padding: 5px 11px;
	font-size: 12px;
	font-weight: 700;
	box-shadow: 0 4px 12px rgba(16, 36, 58, .12);
}
@media (prefers-reduced-motion: reduce) {
	/* 紫2円・星屑の動きを停止＝静的な太陽系図（資格チップは元から静止） */
	.mt-orbit__moon,
	.mt-orbit__dust::before, .mt-orbit__dust::after { animation: none; }
}

/* ---- カーソル発光（コーポレート全ページ・js/mt-corp-fx.js が生成） ----
   乗算ブレンド＋低不透明で白地に淡い色味だけ乗せる（暗い文字は暗いまま＝可読性維持）。 */
.mt-corp-glow {
	position: fixed;
	left: 0;
	top: 0;
	width: 115px;
	height: 115px;
	border-radius: 50%;
	pointer-events: none;
	z-index: 60;
	opacity: 0;
	background: radial-gradient(closest-side, rgba(120, 90, 245, .42), rgba(56, 150, 230, .22) 48%, transparent 72%);
	mix-blend-mode: multiply;
	transform: translate3d(-9999px, -9999px, 0) translate(-50%, -50%);
	transition: transform .18s ease-out, opacity .3s ease;
	will-change: transform;
}
/* クリック水しぶき（コーポレート全ページ）。toggles(9999)/nav(9990) より下＝操作 UI を覆わない。 */
.mt-corp-splash {
	position: fixed;
	inset: 0;
	width: 100%;
	height: 100%;
	pointer-events: none;
	z-index: 61;
}
/* バリアントのクリック演出レイヤ（js/mt-variant-fx.js が生成。桜/インク/波紋/風）。配置は水しぶきと同じ */
.mt-variant-splash {
	position: fixed;
	inset: 0;
	width: 100%;
	height: 100%;
	pointer-events: none;
	z-index: 61;
}

/* ---- 信頼バッジ帯（数字を出さない定性シグナル） ---- */
.mt-corp-badges {
	list-style: none;
	margin: 36px auto 0;
	padding: 0 20px;
	/* 4 バッジ（合計 ≈765px）をデスクトップで横 1 行に収める幅。ヒーロー本文と同幅で揃える。
	   この幅未満では flex-wrap で折返し、タブレットで段組み・スマホで 1 列へ縮退する。 */
	max-width: 880px;
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	justify-content: center;
}
.mt-corp-badges li {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	background: var(--mt-c-card-bg);
	color: var(--mt-accent-deep);
	border: 1px solid var(--mt-c-chip-border);
	border-radius: var(--mt-c-pill);
	padding: 9px 18px;
	font-size: 13.5px;
	font-weight: 700;
	white-space: nowrap; /* ピル内でのテキスト折返しを防ぎ、1 ピル＝1 行を保つ */
	box-shadow: var(--mt-shadow);
}
.mt-corp-badges li::before {
	content: "";
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--mt-accent);
}

/* ---- セクション共通 ---- */
.mt-corp-sec { padding: 64px 20px; }
.mt-corp-sec--alt { background: var(--mt-surface-2); }
.mt-corp-sec__inner { max-width: 1040px; margin: 0 auto; }
.mt-corp-sec__eyebrow { text-align: center; color: var(--mt-accent); font-weight: 700; letter-spacing: .18em; font-size: 12px; margin: 0 0 6px; }
.mt-corp-sec__title { text-align: center; font-family: var(--mt-c-font-heading); font-weight: 800; color: var(--mt-c-heading); font-size: clamp(22px, 4vw, 30px); margin: 0 0 36px; }

/* ---- カード（サービス／ブログ共通の枠） ---- */
.mt-corp-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 20px; }
.mt-corp-card { background: var(--mt-c-card-bg); border: 1px solid var(--mt-border); border-radius: var(--mt-c-radius); padding: 26px 22px; box-shadow: var(--mt-shadow); }
.mt-corp-card__icon { width: 52px; height: 52px; border-radius: var(--mt-c-radius); background: var(--mt-c-chip-bg); color: var(--mt-accent); display: flex; align-items: center; justify-content: center; margin-bottom: 16px; }
.mt-corp-card__icon svg { width: 26px; height: 26px; }
.mt-corp-card__title { font-size: 17px; font-weight: 700; color: var(--mt-c-heading); margin: 0 0 10px; }
.mt-corp-card__desc { font-size: 14px; line-height: 1.85; color: var(--mt-muted); margin: 0; }

/* ---- 選ばれる理由 ---- */
.mt-corp-reasons { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 24px; }
.mt-corp-reason__num { display: inline-block; font-family: var(--mt-c-font-heading); font-weight: 900; font-size: 30px; color: var(--mt-accent); line-height: 1; }
.mt-corp-reason__title { font-size: 17px; font-weight: 700; color: var(--mt-c-heading); margin: 10px 0 8px; }
.mt-corp-reason__desc { font-size: 14px; line-height: 1.85; color: var(--mt-muted); margin: 0; }

/* ---- 実績 ---- */
.mt-corp-works { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; }
.mt-corp-work { display: flex; gap: 16px; align-items: flex-start; background: var(--mt-c-card-bg); border: 1px solid var(--mt-border); border-left: 3px solid var(--mt-accent); border-radius: var(--mt-c-radius-sm); padding: 18px 20px; }
.mt-corp-work__tag { flex: 0 0 auto; background: var(--mt-accent); color: var(--mt-accent-contrast); font-size: 12px; font-weight: 700; border-radius: var(--mt-c-pill); padding: 4px 12px; margin-top: 2px; }
.mt-corp-work__title { font-size: 16px; font-weight: 700; color: var(--mt-c-heading); margin: 0 0 6px; }
.mt-corp-work__desc { font-size: 13.5px; line-height: 1.8; color: var(--mt-muted); margin: 0; }
.mt-corp-note { text-align: center; color: var(--mt-muted); font-size: 12px; margin: 20px 0 0; }

/* ---- スキル・資格 ---- */
.mt-corp-skills__h { font-size: 14px; color: var(--mt-accent-deep); font-weight: 700; margin: 24px 0 12px; text-align: center; }
.mt-corp-chips { list-style: none; margin: 0 auto; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; max-width: 820px; }
.mt-corp-chips li { background: var(--mt-c-chip-bg); color: var(--mt-accent-deep); border: 1px solid var(--mt-c-chip-border); border-radius: var(--mt-c-pill); padding: 7px 16px; font-size: 13.5px; font-weight: 600; }
.mt-corp-chips--tech li { background: var(--mt-c-card-bg); color: var(--mt-c-heading); border-color: var(--mt-border); }

/* ---- ブログ最新 ---- */
.mt-corp-cards--posts .mt-corp-post { display: flex; flex-direction: column; gap: 8px; background: var(--mt-c-card-bg); border: 1px solid var(--mt-border); border-radius: var(--mt-c-radius); padding: 22px; text-decoration: none; box-shadow: var(--mt-shadow); transition: transform .16s ease, box-shadow .16s ease; }
.mt-corp-post:hover { transform: translateY(-3px); box-shadow: var(--mt-shadow-hover); }
.mt-corp-post__date { font-family: "Courier New", ui-monospace, monospace; font-size: 12px; color: var(--mt-accent); }
.mt-corp-post__title { font-size: 15px; font-weight: 700; color: var(--mt-c-heading); line-height: 1.6; }
.mt-corp-more { text-align: center; margin: 28px 0 0; }
.mt-corp-more a { color: var(--mt-accent-deep); font-weight: 700; text-decoration: none; }
.mt-corp-more a:hover { text-decoration: underline; }

/* ---- お問い合わせ CTA 帯 ---- */
.mt-corp-ctaband { background: var(--mt-c-cta-bg); padding: 60px 20px; text-align: center; }
.mt-corp-ctaband__inner { max-width: 720px; margin: 0 auto; }
.mt-corp-ctaband__title { color: var(--mt-c-cta-text); font-family: var(--mt-c-font-heading); font-weight: 800; font-size: clamp(20px, 3.6vw, 28px); margin: 0 0 12px; }
.mt-corp-ctaband__lead { color: var(--mt-c-cta-lead); font-size: 15px; line-height: 1.8; margin: 0 0 24px; }

/* ---- コーポレートフッター ---- */
.mt-corp-footer { background: var(--mt-c-footer-bg); color: var(--mt-c-footer-text); padding: 48px 20px 28px; }
.mt-corp-footer__inner { max-width: 1040px; margin: 0 auto; display: grid; grid-template-columns: 1.2fr 1fr 1.4fr; gap: 32px; }
.mt-corp-footer__name { font-family: var(--mt-c-font-heading); font-weight: 900; font-size: 20px; color: var(--mt-c-footer-title); margin: 0 0 8px; }
.mt-corp-footer__tag { font-size: 13px; line-height: 1.7; color: var(--mt-c-footer-soft); margin: 0; }
.mt-corp-footer__links { display: flex; flex-direction: column; gap: 10px; }
.mt-corp-footer__links a { color: var(--mt-c-footer-text); text-decoration: none; font-size: 14px; }
.mt-corp-footer__links a:hover { color: var(--mt-c-footer-title); text-decoration: underline; }
.mt-corp-footer__meta { margin: 0; font-size: 13px; }
.mt-corp-footer__meta > div { display: flex; gap: 10px; margin-bottom: 8px; }
.mt-corp-footer__meta dt { flex: 0 0 64px; color: var(--mt-c-footer-muted); margin: 0; }
.mt-corp-footer__meta dd { margin: 0; color: var(--mt-c-footer-text); }
.mt-corp-footer__copy { text-align: center; color: var(--mt-c-footer-muted); font-size: 12px; margin: 32px 0 0; }

/* ---- レスポンシブ ---- */
@media (max-width: 782px) {
	.mt-corp-footer__inner { grid-template-columns: 1fr; gap: 24px; }
	.mt-corp-nav__inner { min-height: 0; flex-direction: column; align-items: stretch; padding: 10px 16px; gap: 8px; }
	.mt-corp-nav__menu { justify-content: center; }
}
@media (prefers-reduced-motion: reduce) {
	.mt-corp-post { transition: none; }
	.mt-corp-post:hover { transform: none; }
}

/* ---- スクロール連動フェードイン（cycle-03 / コーポレート表示のみ） ----
   `.mt-reveal` を opacity:0 にするのは JS が `html.mt-reveal-ready` を付けた時だけ
   （JS 無効/IO 非対応では隠さない＝プログレッシブエンハンス）。画面内で `.mt-revealed` が付くとふわっと表示。 */
html.mt-corp.mt-reveal-ready .mt-reveal {
	opacity: 0;
	transform: translateY(22px);
	transition: opacity .6s ease, transform .6s ease;
	will-change: opacity, transform;
}
html.mt-corp.mt-reveal-ready .mt-reveal.mt-revealed {
	opacity: 1;
	transform: none;
}
@media (prefers-reduced-motion: reduce) {
	html.mt-corp.mt-reveal-ready .mt-reveal { opacity: 1; transform: none; transition: none; }
}

/* ===========================================================================
   デザインバリアント（html.mt-v-* / cycle: skin-variations）
   - コーポレート構造（DOM・.mt-corp-only 出し分け・リビール）を共有し、
     トークン上書きで見た目だけを着せ替える4スキン。出典は ai-rules/design-md の各 DESIGN.md。
   - <html> には mt-corp と mt-v-<variant> が同時に付く。このセクションは
     html.mt-corp ブロックより後ろ＝同特異度の後勝ちでバリアント値が有効になる。
   - ゲーム調・コーポレート調のルールは変更しない（追記のみ＝回帰防止）。
   =========================================================================== */

/* ---- バリアント共通 ----
   太陽系オービット（青紫のコーポレート固有装飾）は4ブランドの世界観と合わないため非表示にし、
   代わりに各スキンの世界観の「バリアント図」（.mt-corp-hero__vfig / cycle-02）をヒーロー右に出す。
   レイアウトは corp と同じ2カラム（881px 以上。狭幅は縦積み）。ナビの影は落とさない（フラット基調）。 */
html.mt-v-toraya .mt-corp-hero__orbit,
html.mt-v-note .mt-corp-hero__orbit,
html.mt-v-aman .mt-corp-hero__orbit,
html.mt-v-balmuda .mt-corp-hero__orbit { display: none; }
.mt-corp-hero__vfig { display: none; justify-content: center; align-items: center; }
html.mt-v-toraya .mt-corp-hero__vfig,
html.mt-v-note .mt-corp-hero__vfig,
html.mt-v-aman .mt-corp-hero__vfig,
html.mt-v-balmuda .mt-corp-hero__vfig { display: flex; }
html.mt-v-toraya .mt-corp-nav,
html.mt-v-aman .mt-corp-nav,
html.mt-v-balmuda .mt-corp-nav { box-shadow: none; }

/* ---- toraya（和モダン）----
   白×墨色×深紺。明朝見出し（weight 500・700 で組まない）、フラット（影なし・カード角丸0）、
   CTA のみ 23px ピル。純黒 #000 は使わない。出典: design-md/toraya/DESIGN.md */
html.mt-v-toraya {
	--mt-bg:              #ffffff;
	--mt-surface:         #ffffff;
	--mt-surface-2:       #f2f1f1;
	--mt-accent:          #27455c;
	--mt-accent-bright:   #3a617f;
	--mt-accent-deep:     #1c3344;
	--mt-accent-contrast: #ffffff;
	--mt-text:            #111111;
	--mt-muted:           #777777;
	--mt-border:          #cccccc;
	--mt-radius:          0px;
	--mt-shadow:          none;
	--mt-shadow-hover:    none;
	--mt-glow:            0 0 0 3px rgba(39, 69, 92, .14);

	--mt-c-heading:         #111111;
	--mt-c-nav-bg:          #ffffff;
	--mt-c-nav-link:        #111111;
	--mt-c-hero-bg:         linear-gradient(180deg, #f2f1f1 0%, #ffffff 100%);
	--mt-c-card-bg:         #ffffff;
	--mt-c-chip-bg:         #f2f1f1;
	--mt-c-chip-border:     #cccccc;
	--mt-c-pill:            23px;
	--mt-c-radius:          0px;
	--mt-c-radius-sm:       0px;
	--mt-c-btn-radius:      23px;
	--mt-c-cta-bg:          #27455c;
	--mt-c-cta-text:        #ffffff;
	--mt-c-cta-lead:        rgba(255, 255, 255, .85);
	--mt-c-btn-invert-bg:   #ffffff;
	--mt-c-btn-invert-text: #27455c;
	--mt-c-footer-bg:       #27455c;
	--mt-c-footer-text:     #dbe3ea;
	--mt-c-footer-title:    #ffffff;
	--mt-c-footer-muted:    #9fb3c2;
	--mt-c-footer-soft:     #b7c5d1;
	--mt-c-font-heading:    "Hiragino Mincho ProN", "Hiragino Mincho Pro", "Yu Mincho", "YuMincho", "Noto Serif JP", serif;
}
/* 見出しは明朝 weight 500（太字で組まない）＋ややゆったりした字間 */
html.mt-v-toraya .mt-corp-nav__brand,
html.mt-v-toraya .mt-corp-hero__title,
html.mt-v-toraya .mt-corp-sec__title,
html.mt-v-toraya .mt-corp-ctaband__title,
html.mt-v-toraya .mt-corp-footer__name,
html.mt-v-toraya .mt-corp-reason__num { font-weight: 500; letter-spacing: .06em; }

/* ---- note（読み物特化）----
   白基調×ほぼ黒文字、ゆったり行間で読みやすさ最優先。控えめな影（elevation-1 相当）。
   ブランド色 #5ac8b8 はテキスト禁止のためドット装飾のみ。リンク等は導出した暗めの #0f7a6a。
   出典: design-md/note/DESIGN.md */
html.mt-v-note {
	--mt-bg:              #ffffff;
	--mt-surface:         #ffffff;
	--mt-surface-2:       #f5f8fa;
	--mt-accent:          #0f7a6a;
	--mt-accent-bright:   #13937f;
	--mt-accent-deep:     #08131a;
	--mt-accent-contrast: #ffffff;
	--mt-text:            #08131a;
	--mt-muted:           rgba(8, 19, 26, .66);
	--mt-border:          rgba(8, 19, 26, .14);
	--mt-radius:          12px;
	--mt-shadow:          0 1px 3px rgba(8, 19, 26, .08);
	--mt-shadow-hover:    0 2px 8px rgba(8, 19, 26, .14);
	--mt-glow:            0 0 0 3px rgba(90, 200, 184, .3);

	--mt-c-heading:         #08131a;
	--mt-c-nav-bg:          #ffffff;
	--mt-c-nav-link:        rgba(8, 19, 26, .8);
	--mt-c-hero-bg:         #ffffff;
	--mt-c-card-bg:         #ffffff;
	--mt-c-chip-bg:         #f5f8fa;
	--mt-c-chip-border:     rgba(8, 19, 26, .14);
	--mt-c-pill:            999px;
	--mt-c-radius:          12px;
	--mt-c-radius-sm:       8px;
	--mt-c-btn-radius:      999px;
	--mt-c-cta-bg:          #08131a;
	--mt-c-cta-text:        #ffffff;
	--mt-c-cta-lead:        rgba(255, 255, 255, .8);
	--mt-c-btn-invert-bg:   #ffffff;
	--mt-c-btn-invert-text: #08131a;
	--mt-c-footer-bg:       #08131a;
	--mt-c-footer-text:     #cfd8dd;
	--mt-c-footer-title:    #ffffff;
	--mt-c-footer-muted:    #8a979e;
	--mt-c-footer-soft:     #aab5bb;
}
/* primary CTA は note 流の黒ボタン */
html.mt-v-note .mt-corp-btn--primary { background: #08131a; }
html.mt-v-note .mt-corp-btn--primary:hover { background: #22333d; }
html.mt-v-note .mt-corp-nav__cta { background: #08131a !important; }
html.mt-v-note .mt-corp-nav__cta:hover { background: #22333d !important; }
/* ブランド色はバッジドット等の非テキスト装飾のみに使う */
html.mt-v-note .mt-corp-badges li::before { background: #5ac8b8; }
/* 記事本文は note 流のゆったり行間 */
html.mt-v-note .entry-content { font-size: 17px; line-height: 2; }

/* ---- aman（静謐ラグジュアリー）----
   クリーム×チャコール。純白・純黒・bold（weight 500 以上）・角丸・影はすべて使わない。
   見出しは欧文セリフ系＋和明朝、本文も明朝。字間は広め。出典: design-md/aman-tokyo/DESIGN.md */
html.mt-v-aman {
	--mt-bg:              #f3eee7;
	--mt-surface:         #fdf9f5;
	--mt-surface-2:       #ece5da;
	--mt-accent:          #313131;
	--mt-accent-bright:   #4a4a4a;
	--mt-accent-deep:     #1f1f1f;
	--mt-accent-contrast: #f3eee7;
	--mt-text:            #313131;
	--mt-muted:           #6f6a62;
	--mt-border:          #ddd3c4;
	--mt-radius:          0px;
	--mt-shadow:          none;
	--mt-shadow-hover:    none;
	--mt-glow:            0 0 0 2px rgba(49, 49, 49, .2);

	--mt-c-heading:         #313131;
	--mt-c-nav-bg:          #f3eee7;
	--mt-c-nav-link:        #313131;
	--mt-c-hero-bg:         #f3eee7;
	--mt-c-card-bg:         #fdf9f5;
	--mt-c-chip-bg:         #ece5da;
	--mt-c-chip-border:     #ddd3c4;
	--mt-c-pill:            0px;
	--mt-c-radius:          0px;
	--mt-c-radius-sm:       0px;
	--mt-c-btn-radius:      0px;
	--mt-c-cta-bg:          #313131;
	--mt-c-cta-text:        #f3eee7;
	--mt-c-cta-lead:        rgba(243, 238, 231, .85);
	--mt-c-btn-invert-bg:   #f3eee7;
	--mt-c-btn-invert-text: #313131;
	--mt-c-footer-bg:       #313131;
	--mt-c-footer-text:     #d8d2c8;
	--mt-c-footer-title:    #f3eee7;
	--mt-c-footer-muted:    #97917f;
	--mt-c-footer-soft:     #b5af9f;
	--mt-c-font-heading:    Georgia, "Times New Roman", "Hiragino Mincho ProN", "Yu Mincho", "YuMincho", serif;
}
/* 本文も明朝（エディタ iframe は除外） */
html.mt-v-aman body:not(.editor-styles-wrapper) {
	font-family: "Hiragino Mincho ProN", "Hiragino Mincho Pro", "Yu Mincho", "YuMincho", serif;
}
/* bold 禁止：見出し・ボタン・チップ等の太字をすべて weight 400 へ。字間は広めにして格を出す */
html.mt-v-aman .mt-corp-nav__brand,
html.mt-v-aman .mt-corp-hero__title,
html.mt-v-aman .mt-corp-sec__title,
html.mt-v-aman .mt-corp-ctaband__title,
html.mt-v-aman .mt-corp-footer__name,
html.mt-v-aman .mt-corp-reason__num,
html.mt-v-aman .mt-corp-card__title,
html.mt-v-aman .mt-corp-reason__title,
html.mt-v-aman .mt-corp-work__title,
html.mt-v-aman .mt-corp-post__title { font-weight: 400; letter-spacing: .08em; }
html.mt-v-aman .mt-corp-btn,
html.mt-v-aman .mt-corp-nav__menu > a,
html.mt-v-aman .mt-corp-nav__cta,
html.mt-v-aman .mt-skintabs__current,
html.mt-v-aman .mt-vfig__chip,
html.mt-v-aman .mt-corp-badges li,
html.mt-v-aman .mt-corp-chips li,
html.mt-v-aman .mt-corp-work__tag,
html.mt-v-aman .mt-corp-skills__h,
html.mt-v-aman .mt-corp-more a,
html.mt-v-aman .mt-label { font-weight: 400; }
html.mt-v-aman .mt-corp-hero__eyebrow,
html.mt-v-aman .mt-corp-sec__eyebrow { font-weight: 400; letter-spacing: .3em; }

/* ---- balmuda（ミニマル上質）----
   白×グレー階調、余白重視。塗りのカラー CTA を作らない＝アウトラインピル（60px）。
   緑はロゴ専用のため UI には使わない。影は使わず背景階調で層を作る。
   出典: design-md/balmuda/DESIGN.md */
html.mt-v-balmuda {
	--mt-bg:              #ffffff;
	--mt-surface:         #ffffff;
	--mt-surface-2:       #f8f8f8;
	--mt-accent:          #333333;
	--mt-accent-bright:   #555555;
	--mt-accent-deep:     #1a1a1a;
	--mt-accent-contrast: #ffffff;
	--mt-text:            #333333;
	--mt-muted:           #999999;
	--mt-border:          #e5e5e5;
	--mt-radius:          0px;
	--mt-shadow:          none;
	--mt-shadow-hover:    none;
	--mt-glow:            0 0 0 2px rgba(51, 51, 51, .15);

	--mt-c-heading:         #333333;
	--mt-c-nav-bg:          #ffffff;
	--mt-c-nav-link:        #333333;
	--mt-c-hero-bg:         linear-gradient(180deg, #fbfbfb 0%, #ffffff 100%);
	--mt-c-card-bg:         #ffffff;
	--mt-c-chip-bg:         #f3f3f3;
	--mt-c-chip-border:     #e5e5e5;
	--mt-c-pill:            60px;
	--mt-c-radius:          0px;
	--mt-c-radius-sm:       0px;
	--mt-c-btn-radius:      60px;
	--mt-c-cta-bg:          #f3f3f3;
	--mt-c-cta-text:        #333333;
	--mt-c-cta-lead:        #777777;
	--mt-c-btn-invert-bg:   transparent;
	--mt-c-btn-invert-text: #333333;
	--mt-c-footer-bg:       #f3f3f3;
	--mt-c-footer-text:     #777777;
	--mt-c-footer-title:    #333333;
	--mt-c-footer-muted:    #aaaaaa;
	--mt-c-footer-soft:     #999999;
}
/* 塗り CTA 禁止 → アウトラインピル。hover は淡灰の面で反応 */
html.mt-v-balmuda .mt-corp-btn--primary {
	background: transparent;
	color: #333333;
	border: 1px solid #333333;
	padding: 12px 25px; /* border 1px 分を差し引き、塗りボタンと同寸を保つ */
}
html.mt-v-balmuda .mt-corp-btn--primary:hover { background: #f3f3f3; color: #333333; }
html.mt-v-balmuda .mt-corp-nav__cta {
	background: transparent !important;
	color: #333333 !important;
	border: 1px solid #333333;
}
html.mt-v-balmuda .mt-corp-nav__cta:hover { background: #f3f3f3 !important; }
/* CTA 帯内の反転ボタンも淡背景に沈まないようアウトライン化 */
html.mt-v-balmuda .mt-corp-btn--invert { border: 1px solid #333333; padding: 12px 25px; }
/* 見出しはやや軽め（600）でミニマルに */
html.mt-v-balmuda .mt-corp-nav__brand,
html.mt-v-balmuda .mt-corp-hero__title,
html.mt-v-balmuda .mt-corp-sec__title,
html.mt-v-balmuda .mt-corp-ctaband__title,
html.mt-v-balmuda .mt-corp-footer__name { font-weight: 600; letter-spacing: .02em; }

/* ===========================================================================
   作ったものハブ／共通導線
   =========================================================================== */
.mt-creations-page {
	width: 100%;
	max-width: 960px;
	margin: 0 auto;
	padding: 48px 20px 64px;
	box-sizing: border-box;
	overflow-wrap: break-word;
}
.mt-creations-page__header {
	max-width: 720px;
	margin: 0 auto 32px;
	text-align: center;
}
.mt-creations-page__header h1 {
	margin: 8px 0 12px;
	color: var(--mt-text);
	font-family: var(--mt-font-display);
	font-size: clamp(28px, 6vw, 42px);
}
.mt-creations-page__header > p:last-child {
	margin: 0;
	color: var(--mt-muted);
	line-height: 1.75;
}
.mt-creations-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--mt-gap);
}
.mt-creation-card {
	min-width: 0;
	min-height: 220px;
	display: flex;
	flex-direction: column;
	padding: 24px;
	box-sizing: border-box;
	color: var(--mt-text);
	text-decoration: none;
}
.mt-creation-card__type {
	align-self: flex-start;
	padding: 4px 10px;
	border-radius: 999px;
	background: var(--mt-accent);
	color: var(--mt-accent-contrast);
	font-size: 12px;
	font-weight: 700;
}
.mt-creation-card h2 {
	margin: 18px 0 10px;
	color: var(--mt-c-heading, var(--mt-text));
	font-size: 20px;
}
.mt-creation-card p { margin: 0 0 20px; color: var(--mt-muted); line-height: 1.75; }
.mt-creation-card__more { margin-top: auto; color: var(--mt-accent-deep); font-weight: 700; }
.mt-creations-promo__lead {
	max-width: 640px;
	margin: -20px auto 0;
	color: var(--mt-muted);
	line-height: 1.75;
	text-align: center;
}
.mt-global-creations-link {
	position: fixed;
	left: 16px;
	bottom: 16px;
	z-index: 9998;
	min-height: 44px;
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 8px 16px;
	box-sizing: border-box;
	border: 1px solid var(--mt-border);
	border-radius: var(--mt-radius);
	background: var(--mt-surface);
	color: var(--mt-text);
	box-shadow: var(--mt-shadow);
	text-decoration: none;
	transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.mt-global-creations-link:hover {
	transform: translateY(-2px);
	border-color: var(--mt-accent-bright);
	box-shadow: var(--mt-shadow-hover);
	color: var(--mt-text);
}
.mt-global-creations-link__label {
	font-family: "Courier New", ui-monospace, monospace;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .14em;
	color: var(--mt-accent-bright);
}
.mt-global-creations-link__sub { font-size: 13px; }

@media (max-width: 599px) {
	.mt-creations-page { padding: 32px 16px 52px; }
	.mt-creations-grid { grid-template-columns: minmax(0, 1fr); gap: 16px; }
	.mt-creation-card { min-height: 0; padding: 20px; }
	.mt-creations-promo { padding-left: 16px; padding-right: 16px; }
	.mt-global-creations-link {
		left: 12px;
		right: 12px;
		bottom: 12px;
		justify-content: center;
	}
}

@media (prefers-reduced-motion: reduce) {
	.mt-global-creations-link { transition: none; }
	.mt-global-creations-link:hover { transform: none; }
}

/* ===========================================================================
   バリアント図（.mt-vfig / cycle-02）
   コーポレートの太陽系オービットに相当する、各スキンの世界観の遊び心ヒーロー図。
   マークアップは template-front.php が1回だけ出力する共通構造（r1/r2/r3/core/items）で、
   見た目は html.mt-v-* ごとの CSS が全責任を持つ。資格チップの配置は
   .mt-vfig__items 直下の li（.mt-vfig__item）の nth-child(1..4) に left/top% で指定し、
   各スキンのモチーフ（庭石/しおり/飛び石/流線）と重ならない位置に置く。
   装飾のみ（aria-hidden）。常時アニメは reduced-motion で停止。
   =========================================================================== */
.mt-vfig {
	--vfig: min(380px, 84vw);
	position: relative;
	width: var(--vfig);
	height: var(--vfig);
	margin: 8px auto;
	flex: 0 0 auto;
}
.mt-vfig__r1,
.mt-vfig__r2,
.mt-vfig__r3,
.mt-vfig__core {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	border-radius: 50%;
}
.mt-vfig__items {
	position: absolute;
	inset: 0;
	margin: 0;
	padding: 0;
	list-style: none;
	z-index: 3;
}
.mt-vfig__item {
	position: absolute;
	transform: translate(-50%, -50%);
}
.mt-vfig__chip {
	white-space: nowrap;
	display: inline-block;
	background: var(--mt-c-card-bg);
	color: var(--mt-accent-deep);
	border: 1px solid var(--mt-c-chip-border);
	border-radius: var(--mt-c-pill);
	padding: 5px 11px;
	font-size: 12px;
	font-weight: 700;
	box-shadow: var(--mt-shadow);
}

/* ---- toraya: 枯山水（一筆書きの円相＋舞い桜＋砂紋の呼吸） ----
   砂紋リング3本が静かに呼吸（微 scale）。墨の円相は conic mask で一筆書きに描かれ→かすれて消え再描画。
   桜は r1::before=静的な散り（ambient）／各リングの ::after=舞い落ちる花びら。資格チップは庭石＝静止。
   舞い桜・綿毛が figure 外へ出ないよう overflow:hidden（チップは内側なのでクリップ無し）。 */
html.mt-v-toraya .mt-vfig,
html.mt-v-balmuda .mt-vfig { overflow: hidden; }

@property --mt-ensoSweep { syntax: "<percentage>"; inherits: false; initial-value: 90%; }

html.mt-v-toraya .mt-vfig__r1 { width: 92%; height: 92%; border: 1px solid #ded8cb; animation: mtSandBreath 8s ease-in-out infinite; }
html.mt-v-toraya .mt-vfig__r2 { width: 68%; height: 68%; border: 1px solid #e6e1d6; animation: mtSandBreath 8s ease-in-out infinite .9s; }
html.mt-v-toraya .mt-vfig__r3 { width: 46%; height: 46%; border: 1px solid #ded8cb; animation: mtSandBreath 8s ease-in-out infinite 1.8s; }
@keyframes mtSandBreath {
	0%, 100% { transform: translate(-50%, -50%) scale(1); }
	50%      { transform: translate(-50%, -50%) scale(1.012); }
}
/* 墨の円相：conic mask で一筆書き（draw-on）。var に 90% を直書き＝@property 非対応でも静的に円相を表示 */
html.mt-v-toraya .mt-vfig__core {
	width: 30%;
	height: 30%;
	border: 7px solid #2f2f2f;
	--mt-ensoSweep: 90%;
	-webkit-mask: conic-gradient(from 128deg, #000 var(--mt-ensoSweep), transparent 0);
	        mask: conic-gradient(from 128deg, #000 var(--mt-ensoSweep), transparent 0);
	opacity: .9;
	animation: mtEnsoDraw 9s ease-in-out infinite;
}
@keyframes mtEnsoDraw {
	0%   { --mt-ensoSweep: 4%;  opacity: .12; }
	55%  { --mt-ensoSweep: 90%; opacity: .9; }
	80%  { --mt-ensoSweep: 90%; opacity: .9; }
	100% { --mt-ensoSweep: 90%; opacity: 0; }
}
/* 桜：ambient な静的散り（r1::before）＋舞い落ちる花びら3枚（各リングの ::after・動いて初めて見える） */
html.mt-v-toraya .mt-vfig__r1::before {
	content: "";
	position: absolute;
	width: 6px;
	height: 6px;
	border-radius: 62% 38% 55% 45%;
	background: #f0cdd9;
	opacity: .45;
	top: 12%;
	left: 70%;
	box-shadow: -150px 122px 0 -1px #f3d7e0, 58px 152px 0 -1px #eec0cf, -44px 28px 0 -2px #f3d7e0;
}
html.mt-v-toraya .mt-vfig__r1::after,
html.mt-v-toraya .mt-vfig__r2::after,
html.mt-v-toraya .mt-vfig__r3::after {
	content: "";
	position: absolute;
	top: 0;
	width: 9px;
	height: 8px;
	border-radius: 62% 38% 55% 45%;
	background: #eab9ca;
	opacity: 0;
}
html.mt-v-toraya .mt-vfig__r1::after { left: 22%; animation: mtPetalFall 7s linear infinite; }
html.mt-v-toraya .mt-vfig__r2::after { left: 52%; background: #f0cdd9; animation: mtPetalFall 9s linear infinite 2.5s; }
html.mt-v-toraya .mt-vfig__r3::after { left: 80%; animation: mtPetalFall 8s linear infinite 4.5s; }
@keyframes mtPetalFall {
	0%   { transform: translateY(-26px) translateX(0) rotate(0deg); opacity: 0; }
	12%  { opacity: .85; }
	85%  { opacity: .85; }
	100% { transform: translateY(360px) translateX(34px) rotate(260deg); opacity: 0; }
}
html.mt-v-toraya .mt-vfig__item:nth-child(1) { left: 17%; top: 25%; }
html.mt-v-toraya .mt-vfig__item:nth-child(2) { left: 79%; top: 17%; }
html.mt-v-toraya .mt-vfig__item:nth-child(3) { left: 19%; top: 75%; }
html.mt-v-toraya .mt-vfig__item:nth-child(4) { left: 77%; top: 71%; }

/* ---- note: 開いた本（ページめくり＋文字を綴る＋インク滴＋しおりの揺れ） ----
   中央の開いた本（core::before 左頁／::after 右頁）の上で r3 が背表紙を軸に右→左へめくれる。
   r1/r2 は「文字行」を幅伸長で綴る。インク滴は items::after。しおり（チップ）は軽く上下に揺れる。 */
html.mt-v-note .mt-vfig__core {
	width: 52%;
	height: 30%;
	border-radius: 0;
	transform: translate(-50%, -42%);
}
html.mt-v-note .mt-vfig__core::before,
html.mt-v-note .mt-vfig__core::after {
	content: "";
	position: absolute;
	top: 0;
	width: 50%;
	height: 100%;
	background: #fff;
	border: 1px solid rgba(8, 19, 26, .18);
	box-shadow: 0 10px 22px rgba(8, 19, 26, .08);
}
html.mt-v-note .mt-vfig__core::before {
	left: 0;
	border-radius: 10px 4px 4px 18px;
	transform: perspective(420px) rotateY(16deg);
	transform-origin: right center;
}
html.mt-v-note .mt-vfig__core::after {
	right: 0;
	border-radius: 4px 10px 18px 4px;
	transform: perspective(420px) rotateY(-16deg);
	transform-origin: left center;
}
/* めくれるページ（r3）：右頁の上に重ね、背表紙(中央=left:50%)を軸に右→左へ flip（両面とも紙＝backface 表示） */
html.mt-v-note .mt-vfig__r3 {
	width: 26%;
	height: 30%;
	top: 50%;
	left: 50%;
	background: #fff;
	border: 1px solid rgba(8, 19, 26, .16);
	border-radius: 4px 10px 18px 4px;
	box-shadow: -6px 8px 16px rgba(8, 19, 26, .10);
	transform-origin: left center;
	transform: translate(0, -42%) perspective(520px) rotateY(0deg);
	z-index: 2;
	animation: mtPageTurn 6s ease-in-out infinite;
}
@keyframes mtPageTurn {
	0%, 14%   { transform: translate(0, -42%) perspective(520px) rotateY(0deg); }
	46%       { transform: translate(0, -42%) perspective(520px) rotateY(-118deg); }
	60%, 100% { transform: translate(0, -42%) perspective(520px) rotateY(-164deg); }
}
/* ページ周りの「文字行」：ドット線が左から綴られる（幅 0→--w） */
html.mt-v-note .mt-vfig__r1,
html.mt-v-note .mt-vfig__r2 {
	border-radius: 2px;
	height: 2px;
	transform: none;
	background: repeating-linear-gradient(90deg, rgba(8, 19, 26, .26) 0 9px, transparent 9px 15px);
	width: 0;
	animation: mtWrite 6s ease-in-out infinite;
}
html.mt-v-note .mt-vfig__r1 { top: 22%; left: 14%; --w: 24%; }
html.mt-v-note .mt-vfig__r2 { top: 78%; left: 60%; --w: 22%; animation-delay: .8s; }
@keyframes mtWrite {
	0%   { width: 0; }
	18%  { width: var(--w); }
	86%  { width: var(--w); }
	100% { width: 0; }
}
/* インクの滴（行末から teal がぽとり・動いて初めて見える）。
   ::before は li（チップ）より先に描画＝チップ名の背面を通る＝資格名の可読性を確保（balmuda 綿毛と同方針）。
   位置は items（inset:0）基準で安定。 */
html.mt-v-note .mt-vfig__items::before {
	content: "";
	position: absolute;
	top: 23%;
	left: 36%;
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background: #5ac8b8;
	opacity: 0;
	animation: mtInkDrip 6s ease-in-out infinite 1.6s;
}
@keyframes mtInkDrip {
	0%, 40%   { transform: translateY(0); opacity: 0; }
	48%       { opacity: .9; }
	72%       { transform: translateY(22px); opacity: .85; }
	82%, 100% { transform: translateY(26px); opacity: 0; }
}
/* しおり（チップ）が軽く上下に揺れる */
html.mt-v-note .mt-vfig__chip { animation: mtChipBob 4.5s ease-in-out infinite; }
html.mt-v-note .mt-vfig__item:nth-child(2) .mt-vfig__chip { animation-delay: .6s; }
html.mt-v-note .mt-vfig__item:nth-child(3) .mt-vfig__chip { animation-delay: 1.2s; }
html.mt-v-note .mt-vfig__item:nth-child(4) .mt-vfig__chip { animation-delay: 1.8s; }
@keyframes mtChipBob {
	0%, 100% { transform: translateY(0); }
	50%      { transform: translateY(-3px); }
}
html.mt-v-note .mt-vfig__item:nth-child(1) { left: 30%; top: 18%; }
html.mt-v-note .mt-vfig__item:nth-child(2) { left: 70%; top: 14%; }
html.mt-v-note .mt-vfig__item:nth-child(3) { left: 13%; top: 54%; } /* 本の左外（重なり回避） */
html.mt-v-note .mt-vfig__item:nth-child(4) { left: 87%; top: 58%; } /* 本の右外（重なり回避） */

/* ---- aman: 静かな水面（雫が落ちて波紋が広がる） ----
   雫(core::before)が中心へ落ち、約36%で着水。波紋3本は着水まで待機し、以後それぞれ別の最終 scale で
   外へ広がりながら消える＝一滴から同心円が拡がる。資格チップは飛び石＝静止。 */
html.mt-v-aman .mt-vfig__r1,
html.mt-v-aman .mt-vfig__r2,
html.mt-v-aman .mt-vfig__r3 {
	border: 1px solid rgba(49, 49, 49, .30);
	width: 86%;
	height: 86%;
}
html.mt-v-aman .mt-vfig__r1 { animation: mtRippleA 3.2s ease-out infinite; }
html.mt-v-aman .mt-vfig__r2 { animation: mtRippleB 3.2s ease-out infinite; }
html.mt-v-aman .mt-vfig__r3 { animation: mtRippleC 3.2s ease-out infinite; }
@keyframes mtRippleA {
	0%, 36% { transform: translate(-50%, -50%) scale(.05); opacity: 0; }
	42%     { opacity: .55; }
	100%    { transform: translate(-50%, -50%) scale(.5); opacity: 0; }
}
@keyframes mtRippleB {
	0%, 40% { transform: translate(-50%, -50%) scale(.05); opacity: 0; }
	46%     { opacity: .45; }
	100%    { transform: translate(-50%, -50%) scale(.74); opacity: 0; }
}
@keyframes mtRippleC {
	0%, 44% { transform: translate(-50%, -50%) scale(.05); opacity: 0; }
	50%     { opacity: .35; }
	100%    { transform: translate(-50%, -50%) scale(1); opacity: 0; }
}
html.mt-v-aman .mt-vfig__core {
	width: 8px;
	height: 8px;
	background: rgba(49, 49, 49, .5);
}
/* 落ちる雫（着水 ~36% で波紋始動と同期・動いて初めて見える） */
html.mt-v-aman .mt-vfig__core::before {
	content: "";
	position: absolute;
	left: 50%;
	top: 50%;
	width: 7px;
	height: 10px;
	border-radius: 50% 50% 50% 50% / 65% 65% 35% 35%;
	background: rgba(49, 49, 49, .55);
	opacity: 0;
	animation: mtDropFall 3.2s ease-in infinite;
}
@keyframes mtDropFall {
	0%        { transform: translate(-50%, -150px) scaleY(1.3); opacity: 0; }
	10%       { opacity: .85; }
	30%       { transform: translate(-50%, -6px) scaleY(1); opacity: .95; }
	36%       { transform: translate(-50%, -2px) scale(1.7, .3); opacity: .5; }
	44%, 100% { transform: translate(-50%, -2px) scale(1.7, .3); opacity: 0; }
}
html.mt-v-aman .mt-vfig__item:nth-child(1) { left: 24%; top: 28%; }
html.mt-v-aman .mt-vfig__item:nth-child(2) { left: 74%; top: 22%; }
html.mt-v-aman .mt-vfig__item:nth-child(3) { left: 26%; top: 74%; }
html.mt-v-aman .mt-vfig__item:nth-child(4) { left: 76%; top: 68%; }

/* ---- balmuda: そよ風（流線の揺らぎ＋浮遊粒子＋たんぽぽの綿毛） ----
   弧3本がリボンのように rotate 揺らぎ。粒子(core)は有機的にドリフト。
   items::before の綿毛が左→右へすーっと横断（動いて初めて見える）。チップは風にふわっと上下。 */
html.mt-v-balmuda .mt-vfig__r1,
html.mt-v-balmuda .mt-vfig__r2,
html.mt-v-balmuda .mt-vfig__r3 {
	border: 0;
	border-top: 1.5px solid #d9d9d9;
	background: transparent;
	border-radius: 50%;
}
html.mt-v-balmuda .mt-vfig__r1 { width: 100%; height: 56%; top: 36%; transform: translate(-50%, -50%) rotate(-8deg); animation: mtWindA 6s ease-in-out infinite; }
html.mt-v-balmuda .mt-vfig__r2 { width: 84%; height: 46%; top: 56%; transform: translate(-50%, -50%) rotate(-6deg); border-top-color: #e3e3e3; animation: mtWindB 7s ease-in-out infinite; }
html.mt-v-balmuda .mt-vfig__r3 { width: 68%; height: 38%; top: 74%; transform: translate(-50%, -50%) rotate(-4deg); border-top-color: #ececec; animation: mtWindC 8s ease-in-out infinite; }
@keyframes mtWindA { 0%, 100% { transform: translate(-50%, -50%) rotate(-8deg); } 50% { transform: translate(-50%, -50%) rotate(-11deg) translateY(-4px); } }
@keyframes mtWindB { 0%, 100% { transform: translate(-50%, -50%) rotate(-6deg); } 50% { transform: translate(-50%, -50%) rotate(-3deg) translateY(-3px); } }
@keyframes mtWindC { 0%, 100% { transform: translate(-50%, -50%) rotate(-4deg); } 50% { transform: translate(-50%, -50%) rotate(-7deg) translateY(-2px); } }
html.mt-v-balmuda .mt-vfig__core {
	width: 3px;
	height: 3px;
	background: #c9c9c9;
	box-shadow:
		-128px -64px 0 0 #d5d5d5,
		92px -112px 0 -1px #cfcfcf,
		152px -30px 0 0 #dcdcdc,
		-72px 42px 0 -1px #d5d5d5,
		62px 92px 0 0 #d0d0d0,
		-152px 112px 0 -1px #dadada,
		22px -152px 0 0 #d5d5d5;
	animation: mtVfigDrift 9s ease-in-out infinite;
}
@keyframes mtVfigDrift {
	0%, 100% { transform: translate(-50%, -50%) translate(-7px, 0); }
	33%      { transform: translate(-50%, -50%) translate(4px, -6px); }
	66%      { transform: translate(-50%, -50%) translate(7px, 4px); }
}
/* たんぽぽの綿毛：左→右へ横断（::before は li より先に描画＝チップの背面を通る） */
html.mt-v-balmuda .mt-vfig__items::before {
	content: "";
	position: absolute;
	top: 42%;
	left: 0;
	width: 16px;
	height: 16px;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(255, 255, 255, .95) 0%, rgba(206, 206, 206, .55) 42%, rgba(206, 206, 206, 0) 72%);
	opacity: 0;
	animation: mtSeedCross 11s linear infinite;
}
@keyframes mtSeedCross {
	0%   { transform: translate(-30px, 0) rotate(0deg); opacity: 0; }
	10%  { opacity: .9; }
	50%  { transform: translate(190px, -26px) rotate(120deg); opacity: .9; }
	88%  { opacity: .9; }
	100% { transform: translate(420px, 14px) rotate(300deg); opacity: 0; }
}
/* チップが風にふわっと上下（mtChipBob は note 節で定義） */
html.mt-v-balmuda .mt-vfig__chip { animation: mtChipBob 5s ease-in-out infinite; }
html.mt-v-balmuda .mt-vfig__item:nth-child(2) .mt-vfig__chip { animation-delay: .7s; }
html.mt-v-balmuda .mt-vfig__item:nth-child(3) .mt-vfig__chip { animation-delay: 1.4s; }
html.mt-v-balmuda .mt-vfig__item:nth-child(4) .mt-vfig__chip { animation-delay: 2.1s; }
html.mt-v-balmuda .mt-vfig__item:nth-child(1) { left: 20%; top: 30%; }
html.mt-v-balmuda .mt-vfig__item:nth-child(2) { left: 58%; top: 20%; }
html.mt-v-balmuda .mt-vfig__item:nth-child(3) { left: 80%; top: 46%; }
html.mt-v-balmuda .mt-vfig__item:nth-child(4) { left: 42%; top: 64%; }

/* バリアント図の常時アニメは reduced-motion で全停止し、静的な見た目へフォールバック */
@media (prefers-reduced-motion: reduce) {
	html.mt-v-toraya .mt-vfig__r1,
	html.mt-v-toraya .mt-vfig__r2,
	html.mt-v-toraya .mt-vfig__r3,
	html.mt-v-toraya .mt-vfig__core,
	html.mt-v-toraya .mt-vfig__r1::after,
	html.mt-v-toraya .mt-vfig__r2::after,
	html.mt-v-toraya .mt-vfig__r3::after,
	html.mt-v-note .mt-vfig__r1,
	html.mt-v-note .mt-vfig__r2,
	html.mt-v-note .mt-vfig__r3,
	html.mt-v-note .mt-vfig__items::before,
	html.mt-v-note .mt-vfig__chip,
	html.mt-v-aman .mt-vfig__r1,
	html.mt-v-aman .mt-vfig__r2,
	html.mt-v-aman .mt-vfig__r3,
	html.mt-v-aman .mt-vfig__core::before,
	html.mt-v-balmuda .mt-vfig__r1,
	html.mt-v-balmuda .mt-vfig__r2,
	html.mt-v-balmuda .mt-vfig__r3,
	html.mt-v-balmuda .mt-vfig__core,
	html.mt-v-balmuda .mt-vfig__items::before,
	html.mt-v-balmuda .mt-vfig__chip { animation: none; }
	/* 円相は mask を解除して完成形を表示。文字行は綴り途中で消えないよう全幅で固定 */
	html.mt-v-toraya .mt-vfig__core { -webkit-mask: none; mask: none; }
	html.mt-v-note .mt-vfig__r1 { width: 24%; }
	html.mt-v-note .mt-vfig__r2 { width: 22%; }
	/* 波紋は静止の同心円として3サイズに */
	html.mt-v-aman .mt-vfig__r1 { transform: translate(-50%, -50%) scale(.45); opacity: .4; }
	html.mt-v-aman .mt-vfig__r2 { transform: translate(-50%, -50%) scale(.72); opacity: .3; }
	html.mt-v-aman .mt-vfig__r3 { transform: translate(-50%, -50%) scale(1); opacity: .22; }
}

@media screen and (max-width: 900px) {
	.mt-blog-layout { grid-template-columns: 1fr; }
	.mt-blog-sidebar { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media screen and (max-width: 599px) {
	.mt-x-profile { padding: 20px 16px; }
	.mt-x-profile__title { font-size: 1.5rem; }
	.mt-x-profile__account {
		grid-template-columns: 44px minmax(0, 1fr);
		padding: 12px;
	}
	.mt-x-profile__account-action { grid-column: 2; }
	.mt-blog-layout { width: min(100% - 20px, 720px); margin-top: 20px; }
	.mt-blog-hero { border-radius: 14px; }
	.mt-blog-card__article { grid-template-columns: 1fr; }
	.mt-blog-card__media { min-height: 0; aspect-ratio: 16 / 9; }
	.mt-blog-card__content { padding: 17px; }
	.mt-blog-card p { display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 3; }
	.mt-blog-sidebar { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
	.mt-blog-card { transition: none; }
	.mt-blog-card:hover { transform: none; }
}