.gw-article {
	--ink: #221f1c;
	--ink-soft: #58524a;
	--ink-faint: #9b9388;
	--rule: #e7e1d5;
	--beige: #faf8f4;
	--heading-blue: #285cc9;
	--heading-yellow: #FFE23F;
	--font: 'Noto Sans JP', 'Hiragino Sans', sans-serif;
	font-family: var(--font);
	color: var(--ink);
	background: #fff;
	padding: 40px 0 0;
}
.gw-article * { box-sizing: border-box; }
/*
   Astra側の記事内タイポグラフィ設定（h1〜h6・段落のフォント/文字色/余白）は
   #primary配下の要素にも及ぶため、サイドバーを追加した後は素のh1〜h6・pタグが
   Astraの既定デザインに引っ張られてしまう。ここから先の見出し・本文・バッジ等の
   font-family / color / font-size は、Astra側の指定より確実に優先されるよう
   !importantを付けている。
*/
.gw-article, .gw-article p { font-family: var(--font) !important; }
.gw-article h1, .gw-article h2, .gw-article h3, .gw-article h4, .gw-article h5, .gw-article h6 { font-family: var(--font) !important; }
.gw-container { max-width: 720px; margin: 0 auto; padding: 0 24px; }

.gw-breadcrumb {
	font-size: 12px;
	color: var(--ink-faint);
	display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
	margin-bottom: 22px;
}
.gw-breadcrumb a { text-decoration: none; color: inherit; }
.gw-breadcrumb .gw-sep { opacity: .5; }
.gw-breadcrumb .gw-cur { color: var(--cat); font-weight: 700; line-height: 1.3; }

.gw-badge {
	display: inline-flex;
	justify-content: center !important;
	align-items: center !important;
	width: auto !important;
	min-width: 110px !important;
	font-size: 12px !important;
	padding: 4px 10px !important;
	border-radius: 5px !important;
	white-space: nowrap !important;
	font-weight: 500 !important;
	border: none !important;
	background: var(--cat-soft); color: var(--cat);
	margin-bottom: 20px;
}

.gw-title { font-size: clamp(22px, 4vw, 32px) !important; font-weight: 500 !important; line-height: 1.45 !important; margin: 0 0 34px !important; color: var(--ink) !important; text-wrap: auto; }

.gw-body { max-width: 640px; font-size: 16px; line-height: 1.95; color: var(--ink-soft); margin-bottom: 48px; }
.gw-body p { margin: 0 0 20px !important; font-size: 16px !important; line-height: 1.95 !important; color: var(--ink-soft) !important; }
.gw-body p:last-child { margin-bottom: 0 !important; }

/* 「開発」カテゴリのみ：概要テキスト直後の余白と、各コンテンツブロック同士の余白を個別指定 */
.gw-body.gw-body-summary { margin-bottom: 20px; }
.gw-devblock.gw-body,
.gw-notebox.gw-devblock { margin-bottom: 55px; }

/* --- 見出し（h2〜h6）の基本サイズ --- */
.gw-heading { font-size: 19px !important; font-weight: 800 !important; color: var(--ink) !important; margin: 56px 0 22px !important; }
.gw-heading:first-child { margin-top: 0 !important; }
.gw-h3 { font-size: 17px !important; font-weight: 700 !important; color: var(--heading-blue) !important; margin: 42px 0 16px !important; }
.gw-h3:first-child { margin-top: 0 !important; }
.gw-h4 { font-size: 15.5px !important; font-weight: 700 !important; color: var(--ink) !important; margin: 34px 0 14px !important; }
.gw-h4:first-child { margin-top: 0 !important; }
.gw-h4:before { content: '・'; color: var(--heading-blue); margin-right: 4px; }
.gw-h5 { font-size: 13.5px !important; font-weight: 700 !important; letter-spacing: .04em; color: var(--ink-soft) !important; margin: 28px 0 12px !important; }
.gw-h5:first-child { margin-top: 0 !important; }
.gw-h6 { font-size: 12px !important; font-weight: 700 !important; letter-spacing: .06em; color: var(--ink-faint) !important; margin: 24px 0 10px !important; }
.gw-h6:first-child { margin-top: 0 !important; }

/* --- 見出しデザイン：青(#285cc9)と黄(#FFE23F)をベースに、h2にのみ装飾を付ける（フォームから選択） --- */
.gw-heading-style-underline .gw-heading { display: inline-block; border-bottom: 3px solid var(--heading-blue); padding-bottom: 8px; }
.gw-heading-style-leftbar .gw-heading { border-left: 4px solid var(--heading-blue); padding-left: 14px; }
.gw-heading-style-marker .gw-heading { display: inline; background: linear-gradient(transparent 62%, var(--heading-yellow) 62%); }
.gw-heading-style-simple .gw-heading { /* 装飾なし */ }

/* 「開発」カテゴリのみ：見出しデザインの色を固定の青/黄ではなく、カテゴリカラーに変更 */
.gw-cat-kaihatsu.gw-heading-style-underline .gw-heading { border-bottom-color: var(--cat); }
.gw-cat-kaihatsu.gw-heading-style-leftbar .gw-heading { border-left-color: var(--cat); }
.gw-cat-kaihatsu.gw-heading-style-marker .gw-heading { background: linear-gradient(transparent 62%, var(--cat-soft) 62%); }

.gw-gallery { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; margin-bottom: 48px; }
.gw-figure { margin: 0; }
.gw-figure img { width: 100%; border-radius: 12px; border: 1px solid var(--rule); display: block; }

.gw-browserframe { border-radius: 12px; overflow: hidden; border: 1px solid var(--rule); margin-bottom: 30px; }
.gw-browserframe .gw-chrome { background: #f1efe9; padding: 9px 12px; display: flex; gap: 6px; border-bottom: 1px solid var(--rule); }
.gw-browserframe .gw-chrome i { width: 9px; height: 9px; border-radius: 50%; background: #d8d2c4; display: block; }
.gw-browserframe img { width: 100%; display: block; }

.gw-cta-try {
	display: inline-flex; align-items: center; gap: 8px;
	background: var(--cat); color: #fff; font-weight: 700; font-size: 14.5px;
	padding: 13px 22px; border-radius: 11px; text-decoration: none; margin: 0 0 60px;
}
.gw-cta-try:after { content: '↗'; font-size: 14px; }

.gw-checklist { list-style: none !important; margin: 0 !important; padding: 0 !important; display: flex; flex-direction: column; gap: 10px; }
.gw-checklist li { display: flex; gap: 10px; align-items: flex-start; margin: 0; padding: 0; }
.gw-checklist li:before {
	content: '✓'; flex-shrink: 0; width: 20px; height: 20px; border-radius: 50%;
	background: var(--cat-soft); color: var(--cat); font-size: 12px; font-weight: 700;
	display: flex; align-items: center; justify-content: center; margin-top: 7px;
}

.gw-notebox {
	border: 1px solid var(--rule); border-left: 3px solid var(--cat);
	background: #fff; border-radius: 0 10px 10px 0; padding: 14px 16px;
	font-size: 14px; color: var(--ink-soft); line-height: 1.85; margin: 0 0 30px; max-width: 640px;
}

.gw-steps { display: flex; flex-direction: column; gap: 16px; }
.gw-step { display: flex; gap: 14px; }
.gw-step .gw-n {
	flex-shrink: 0; width: 26px; height: 26px; border-radius: 50%; background: var(--cat); color: #fff;
	font-weight: 700; font-size: 12.5px; margin-top: 3px;
	display: flex; align-items: center; justify-content: center;
}

/* --- よくある質問：Q・Aをそれぞれ独立したボックスにして常時表示 --- */
.gw-faq { display: flex; flex-direction: column; gap: 14px; }
.gw-faq-item { display: flex; flex-direction: column; gap: 8px; }
.gw-faq-q, .gw-faq-a { border-radius: 10px; padding: 14px 16px; font-size: 14px; line-height: 1.8; }
.gw-faq-q { background: var(--cat-soft); color: var(--ink); font-weight: 700; display: flex; gap: 10px; }
.gw-faq-q .gw-qmark { color: var(--cat); flex-shrink: 0; }
.gw-faq-a { background: none; border: none; color: var(--ink-soft); display: flex; gap: 10px; }
.gw-faq-a .gw-amark { color: var(--ink-faint); font-weight: 700; flex-shrink: 0; }

/* --- 他のWebツール誘導：背景はベージュ、ボタンは黄色/黒 --- */
.gw-toolspromo {
	margin: 10px 0 40px; background: var(--beige); border-radius: 14px; padding: 22px;
	display: flex; flex-direction: column; align-items: center; text-align: center; gap: 10px; max-width: 640px;
}
.gw-toolspromo p { font-size: 14px; font-weight: 600; margin: 0; color: var(--ink); }
.gw-toolspromo a {
	display: inline-flex; align-items: center; gap: 6px;
	font-weight: 700; font-size: 13.5px; color: #000; background: #FFE23F;
	text-decoration: none; white-space: nowrap;
	padding: 10px 20px; border-radius: 100px; border: 1.5px solid #FFE23F;
	transition: background .15s ease;
}
.gw-toolspromo a:hover { background: #fff; }

/* --- 区切り線（タイトル下・本文末尾に挿入） --- */
.gw-hr { border: none; border-top: 1px solid var(--rule); margin: 32px 0; }

/* --- 下書きプレビュー用の確認バー（公開前のみ表示） --- */
.gw-preview-bar {
	display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px;
	background: #fff8e1; border: 1px solid #f3d98a; border-radius: 10px;
	padding: 14px 16px; margin-bottom: 26px; font-size: 13px; color: #6b5620;
}
.gw-preview-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.gw-preview-publish-form { margin: 0; display: inline-block; }
.gw-preview-btn {
	display: inline-flex; align-items: center; justify-content: center;
	font-size: 13px; font-weight: 700; text-decoration: none; cursor: pointer;
	border-radius: 5px; padding: 9px 16px; border: 1px solid transparent;
}
.gw-preview-btn-edit { background: #fff; border-color: #d8c48a; color: #6b5620; }
.gw-preview-btn-publish { background: var(--cat); color: #fff; }

/* --- 一覧に戻る／カテゴリに戻る --- */
.gw-backbar { padding: 28px 0 60px; display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; }
.gw-backbtn {
	font-size: 12.5px; font-weight: 700; text-decoration: none; text-align: center;
	color: var(--ink-soft); border: 1px solid var(--rule); border-radius: 5px; padding: 11px 22px; background: #fff;
	flex: 1 1 0; min-width: 140px; max-width: 220px;
	transition: background .15s ease, color .15s ease;
}
.gw-backbtn:hover { background: var(--ink); color: #fff; border-color: var(--ink); }
.gw-backbtn-cat { color: var(--cat); border-color: var(--cat); }
.gw-backbtn-cat:hover { background: var(--cat); color: #fff; border-color: var(--cat); }