/* ===========================================
   MTKW Business テーマ カスタムスタイル
   配色コンセプト: 若竹色(わかたけいろ)を基調とした
   目に優しいペールグリーン系。文字は視認性重視で
   濃いめのグレーグリーンを使用。
   =========================================== */

:root {
	/* ベースカラー */
	--mtkw-bg: #f2f8f0;              /* ページ全体の背景(ペールグリーン) */
	--mtkw-bg-alt: #e8f3e4;          /* セクションの背景を1段変える時用 */
	--mtkw-surface: #ffffff;          /* カード等の背景(白寄りで文字の視認性を確保) */

	/* 若竹色系アクセント */
	--mtkw-wakatake: #4f9d6e;        /* 若竹色メイン(ボタン・アイコン・リンク) */
	--mtkw-wakatake-dark: #3a7d54;   /* ホバー・強調用の濃い若竹色 */
	--mtkw-wakatake-pale: #d9ecd7;   /* 枠線・薄いアクセント */

	/* テキスト */
	--mtkw-text: #263229;            /* 本文(濃いグレーグリーンで視認性を確保) */
	--mtkw-text-soft: #4b5c4f;       /* 補足テキスト */

	--mtkw-font-family: 'M PLUS Rounded 1c', 'Noto Sans JP', -apple-system, BlinkMacSystemFont, sans-serif;
}

body {
	font-family: var(--mtkw-font-family);
	color: var(--mtkw-text);
	background-color: var(--mtkw-bg);
}

/* 見出しサイズを標準より1段階小さく調整 */
h1, .h1 { font-size: 2rem; }
h2, .h2 { font-size: 1.75rem; }
h3, .h3 { font-size: 1.5rem; }
h4, .h4 { font-size: 1.25rem; }
h5, .h5 { font-size: 1.1rem; }
h6, .h6 { font-size: 1rem; }

a {
	color: var(--mtkw-wakatake);
}
a:hover {
	color: var(--mtkw-wakatake-dark);
}

/* ボタン(Bootstrapのprimaryを若竹色で上書き) */
.btn-primary {
	--bs-btn-bg: var(--mtkw-wakatake);
	--bs-btn-border-color: var(--mtkw-wakatake);
	--bs-btn-hover-bg: var(--mtkw-wakatake-dark);
	--bs-btn-hover-border-color: var(--mtkw-wakatake-dark);
	--bs-btn-active-bg: var(--mtkw-wakatake-dark);
	--bs-btn-active-border-color: var(--mtkw-wakatake-dark);
}
.btn-outline-primary {
	--bs-btn-color: var(--mtkw-wakatake-dark);
	--bs-btn-border-color: var(--mtkw-wakatake);
	--bs-btn-hover-bg: var(--mtkw-wakatake);
	--bs-btn-hover-border-color: var(--mtkw-wakatake);
}

/* ===========================================
   ヘッダー(ロゴ + ハンバーガー)
   =========================================== */
.site-header {
	background-color: var(--mtkw-surface);
	border-bottom: 1px solid var(--mtkw-wakatake-pale);
}

.site-logo img {
	max-height: 56px;
	width: auto;
}
.site-logo span {
	color: var(--mtkw-wakatake-dark);
}

.mtkw-hamburger {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	gap: 5px;
	width: 44px;
	height: 44px;
	border: none;
	background: transparent;
	cursor: pointer;
	padding: 0;
}
.mtkw-hamburger span {
	display: block;
	width: 26px;
	height: 3px;
	border-radius: 2px;
	background-color: var(--mtkw-wakatake-dark);
	transition: transform .2s ease, opacity .2s ease;
}

.offcanvas {
	background-color: var(--mtkw-surface);
}
.mtkw-offcanvas-nav li {
	border-bottom: 1px solid var(--mtkw-wakatake-pale);
}
.mtkw-offcanvas-nav a {
	display: block;
	padding: .9rem .25rem;
	color: var(--mtkw-text);
	font-weight: 500;
	text-decoration: none;
}
.mtkw-offcanvas-nav a:hover {
	color: var(--mtkw-wakatake-dark);
}

/* ===========================================
   1. トップ2カラム(紹介文 + 画像)
   =========================================== */
.intro-section {
	background-color: var(--mtkw-bg);
}
.intro-text {
	color: var(--mtkw-text-soft);
	white-space: pre-line;
}
.intro-image,
.intro-image-placeholder {
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
}
.intro-image-placeholder {
	background-color: var(--mtkw-wakatake-pale);
	color: var(--mtkw-wakatake-dark);
}

/* ===========================================
   2. 便利ツール(2行×4列)
   =========================================== */
.tools-section {
	background-color: var(--mtkw-bg-alt);
}
.tool-card {
	background-color: var(--mtkw-surface);
	border: 1px solid var(--mtkw-wakatake-pale);
	color: var(--mtkw-text);
	transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.tool-card:hover {
	transform: translateY(-4px);
	box-shadow: 0 .5rem 1.25rem rgba(79, 157, 110, .18);
	border-color: var(--mtkw-wakatake);
}
.tool-icon {
	font-size: 2rem;
	color: var(--mtkw-wakatake);
}
.tool-card h3 {
	color: var(--mtkw-text);
}
.tool-description {
	color: var(--mtkw-text-soft);
}

/* ===========================================
   3. 自由テキスト枠
   =========================================== */
.free-content-section {
	background-color: var(--mtkw-bg);
}
.free-content-section .content img {
	max-width: 100%;
	height: auto;
	border-radius: .5rem;
}

/* ===========================================
   4. 今後の拡張用リンク(4分割)
   =========================================== */
.future-section {
	background-color: var(--mtkw-bg-alt);
}
.future-card {
	background-color: var(--mtkw-surface);
	border: 1px dashed var(--mtkw-wakatake-pale);
	color: var(--mtkw-text);
	position: relative;
}
.future-card:not(.future-card-disabled):hover {
	border-color: var(--mtkw-wakatake);
	background-color: var(--mtkw-wakatake-pale);
}
.future-card-disabled {
	opacity: .55;
	cursor: default;
}
.future-icon {
	font-size: 1.75rem;
	color: var(--mtkw-wakatake-dark);
}
.future-badge {
	font-size: .7rem;
	color: var(--mtkw-text-soft);
	margin-top: .25rem;
}

/* ===========================================
   フッター(コピーライトのみ)
   =========================================== */
.site-footer {
	background-color: var(--mtkw-wakatake-dark);
	color: #ffffff;
}

/* ===========================================
   ブログ・通常ページ共通(カード等)
   =========================================== */
.card {
	transition: transform .15s ease, box-shadow .15s ease;
}
.card:hover {
	transform: translateY(-3px);
}

.content h2 {
	margin-top: 2rem;
	font-weight: 700;
	color: var(--mtkw-text);
}
.content h3 {
	margin-top: 1.5rem;
	font-weight: 600;
	color: var(--mtkw-text);
}