/*
Theme Name: AFFINGER Child
Template: affinger
Description: AFFINGER6 対応
Version: 20210719
*/

/*media Queries スマートフォンとタブレットサイズ（959px以下）で適応したいCSS - スマホ・タブレット
---------------------------------------------------------------------------------------------------*/
@media only screen and (max-width: 959px) {


	/*-- ここまで --*/
}
	
/*media Queries タブレットサイズ（600px～959px）のみで適応したいCSS -タブレットのみ
---------------------------------------------------------------------------------------------------*/
@media only screen and (min-width: 600px) and (max-width: 959px) {


	/*-- ここまで --*/
}	
	
/*media Queries タブレット（600px）以上で適応したいCSS -タブレット・PC
---------------------------------------------------------------------------------------------------*/
@media only screen and (min-width: 600px) {


	/*-- ここまで --*/
}

/*media Queries PCサイズ（960px）以上で適応したいCSS - PCのみ
---------------------------------------------------------------------------------------------------*/
@media print, screen and (min-width: 960px) {


	/*-- ここまで --*/
}

/*media Queries スマホサイズ（599px）以下で適応したいCSS - スマホのみ
---------------------------------------------------------------------------------------------------*/
@media print, screen and (max-width: 599px) {

	
	/*-- ここまで --*/
}
/*
Theme Name: AFFINGER Child
Template: affinger
Description: AFFINGER6 対応
Version: 20210719
*/

/* =========================================================
   現代の死角出版 カスタムCSS
   Brand Concept:
   「あなたの死角に、光を届ける。」
   ========================================================= */

/* ------------------------------
   0. ブランドカラー定義
------------------------------ */
:root {
	--gsp-black: #111111;
	--gsp-navy: #0f1b2d;
	--gsp-gray: #f5f6f8;
	--gsp-border: #e5e7eb;
	--gsp-text: #222222;
	--gsp-muted: #6b7280;
	--gsp-yellow: #ffe100;
	--gsp-yellow-soft: #fff4a8;
	--gsp-gold: #d4a928;
}

/* ------------------------------
   1. サイト全体
------------------------------ */
body {
	background: #ffffff;
	color: var(--gsp-text);
	font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Yu Gothic", "YuGothic", "Hiragino Kaku Gothic ProN", "Noto Sans JP", sans-serif;
	line-height: 1.9;
	letter-spacing: 0.02em;
}

/* 記事本文の読みやすさ */
.post,
.entry-content,
.st-post,
#main {
	color: var(--gsp-text);
}

/* リンク */
a {
	color: var(--gsp-navy);
	text-decoration: none;
	transition: 0.2s ease;
}

a:hover {
	color: var(--gsp-gold);
}

/* ------------------------------
   2. ヘッダーまわり
------------------------------ */

/* ヘッダー全体 */
header,
#headbox,
#header,
#st-header {
	background: #ffffff;
	border-bottom: 1px solid var(--gsp-border);
}

/* ロゴ画像が入る場合の余白調整 */
.sitename,
#st-logo,
#st-header-logo {
	letter-spacing: 0.04em;
}

/* グローバルナビ */
#st-menuwide,
#st-menuwide div.menu,
#st-menuwide nav {
	background: #ffffff;
	border-bottom: 1px solid var(--gsp-border);
}

#st-menuwide a,
#st-menuwide li a {
	color: var(--gsp-navy);
	font-weight: 700;
	letter-spacing: 0.04em;
}

#st-menuwide a:hover,
#st-menuwide li a:hover {
	color: var(--gsp-gold);
}

/* ------------------------------
   3. トップページ・メインビジュアル想定
------------------------------ */

/* トップに独自HTMLブロックを置く場合のラッパー */
.gsp-hero {
	position: relative;
	background: linear-gradient(135deg, #ffffff 0%, #ffffff 58%, #fff8c8 100%);
	border: 1px solid var(--gsp-border);
	border-radius: 18px;
	padding: 56px 40px;
	margin: 24px 0 40px;
	overflow: hidden;
}

/* スポットライト風の光 */
.gsp-hero::after {
	content: "";
	position: absolute;
	top: -80px;
	right: -80px;
	width: 360px;
	height: 360px;
	background: radial-gradient(circle, rgba(255,225,0,0.38) 0%, rgba(255,225,0,0.14) 42%, rgba(255,225,0,0) 72%);
	pointer-events: none;
}

.gsp-hero-title {
	position: relative;
	z-index: 1;
	font-size: clamp(2rem, 4vw, 4rem);
	line-height: 1.25;
	font-weight: 900;
	color: var(--gsp-black);
	letter-spacing: 0.04em;
	margin: 0 0 20px;
}

.gsp-hero-title .highlight {
	background: linear-gradient(transparent 52%, var(--gsp-yellow) 52%);
	padding: 0 0.08em;
}

.gsp-hero-copy {
	position: relative;
	z-index: 1;
	font-size: 1.05rem;
	color: var(--gsp-navy);
	font-weight: 600;
	line-height: 1.9;
	margin: 0 0 28px;
}

.gsp-hero-buttons {
	position: relative;
	z-index: 1;
	display: flex;
	gap: 14px;
	flex-wrap: wrap;
}

/* ------------------------------
   4. ボタン
------------------------------ */

.gsp-btn,
.entry-content .gsp-btn,
.wp-block-button__link {
	display: inline-block;
	background: var(--gsp-black);
	color: #ffffff !important;
	border-radius: 999px;
	padding: 0.9em 1.6em;
	font-weight: 800;
	letter-spacing: 0.04em;
	box-shadow: 0 8px 20px rgba(17, 17, 17, 0.12);
	transition: 0.2s ease;
}

.gsp-btn:hover,
.entry-content .gsp-btn:hover,
.wp-block-button__link:hover {
	background: var(--gsp-navy);
	color: #ffffff !important;
	transform: translateY(-2px);
}

.gsp-btn-yellow {
	background: var(--gsp-yellow);
	color: var(--gsp-black) !important;
}

.gsp-btn-yellow:hover {
	background: #ffd400;
	color: var(--gsp-black) !important;
}

/* ------------------------------
   5. 記事タイトル・見出し
------------------------------ */

/* 記事タイトル */
h1.entry-title,
.entry-title,
.post h1 {
	color: var(--gsp-black);
	font-weight: 900;
	letter-spacing: 0.03em;
	line-height: 1.45;
}

/* H2：章見出し */
.entry-content h2,
.post h2 {
	position: relative;
	background: #ffffff;
	color: var(--gsp-black);
	border-left: 8px solid var(--gsp-yellow);
	border-bottom: 1px solid var(--gsp-border);
	padding: 0.8em 0.9em;
	margin-top: 2.4em;
	margin-bottom: 1.2em;
	font-weight: 900;
	letter-spacing: 0.04em;
}

/* H2に淡い光 */
.entry-content h2::after,
.post h2::after {
	content: "";
	position: absolute;
	left: 0.9em;
	bottom: 0.45em;
	width: 6em;
	height: 0.5em;
	background: rgba(255, 225, 0, 0.35);
	z-index: -1;
}

/* H3：節見出し */
.entry-content h3,
.post h3 {
	color: var(--gsp-navy);
	border-bottom: 2px solid var(--gsp-border);
	padding-bottom: 0.4em;
	margin-top: 2em;
	font-weight: 800;
}

/* H4 */
.entry-content h4,
.post h4 {
	color: var(--gsp-black);
	font-weight: 800;
	border-left: 4px solid var(--gsp-gold);
	padding-left: 0.7em;
}

/* ------------------------------
   6. 本文装飾
------------------------------ */

/* 黄色マーカー */
.gsp-marker,
.entry-content strong {
	background: linear-gradient(transparent 62%, rgba(255, 225, 0, 0.42) 62%);
	font-weight: 800;
}

/* 引用 */
blockquote {
	background: var(--gsp-gray);
	border-left: 5px solid var(--gsp-yellow);
	color: var(--gsp-text);
	padding: 1.2em 1.4em;
	border-radius: 8px;
}

/* 注意・補足ボックス */
.gsp-box {
	background: #ffffff;
	border: 1px solid var(--gsp-border);
	border-radius: 14px;
	padding: 1.4em;
	margin: 1.8em 0;
	box-shadow: 0 8px 24px rgba(15, 27, 45, 0.06);
}

.gsp-box-title {
	display: inline-block;
	background: var(--gsp-yellow);
	color: var(--gsp-black);
	font-weight: 900;
	padding: 0.25em 0.75em;
	border-radius: 999px;
	margin-bottom: 0.9em;
}

/* ------------------------------
   7. 記事一覧・カード
------------------------------ */

/* 一般的なカード系に効くように広めに指定 */
.kanren,
.post-card,
.st-cardbox,
.pop-box,
.cat-post {
	border-radius: 14px;
	overflow: hidden;
	border: 1px solid var(--gsp-border);
	box-shadow: 0 8px 20px rgba(15, 27, 45, 0.05);
	transition: 0.2s ease;
}

.kanren:hover,
.post-card:hover,
.st-cardbox:hover,
.pop-box:hover,
.cat-post:hover {
	transform: translateY(-2px);
	box-shadow: 0 12px 28px rgba(15, 27, 45, 0.08);
}

/* カテゴリラベル */
.catname,
.st-catgroup a,
.category a {
	background: var(--gsp-navy) !important;
	color: #ffffff !important;
	border-radius: 999px;
	padding: 0.25em 0.7em;
	font-size: 0.78rem;
	font-weight: 700;
}

/* ------------------------------
   8. サイドバー
------------------------------ */

#side aside,
.side aside,
#side .st-aside {
	background: #ffffff;
	border: 1px solid var(--gsp-border);
	border-radius: 14px;
	padding: 18px;
	margin-bottom: 20px;
	box-shadow: 0 8px 20px rgba(15, 27, 45, 0.04);
}

#side h4,
.side h4,
#side .menu_underh2 {
	color: var(--gsp-black);
	border-left: 6px solid var(--gsp-yellow);
	padding-left: 0.6em;
	font-weight: 900;
}

/* ------------------------------
   9. Kindle・書籍誘導CTA
------------------------------ */

.gsp-book-cta {
	position: relative;
	display: grid;
	grid-template-columns: 120px 1fr;
	gap: 20px;
	align-items: center;
	background: linear-gradient(135deg, #ffffff 0%, #ffffff 60%, #fff8c8 100%);
	border: 1px solid var(--gsp-border);
	border-radius: 18px;
	padding: 22px;
	margin: 36px 0;
	box-shadow: 0 12px 30px rgba(15, 27, 45, 0.08);
	overflow: hidden;
}

.gsp-book-cta::after {
	content: "";
	position: absolute;
	right: -60px;
	top: -60px;
	width: 180px;
	height: 180px;
	background: radial-gradient(circle, rgba(255,225,0,0.35) 0%, rgba(255,225,0,0) 70%);
}

.gsp-book-cta img {
	position: relative;
	z-index: 1;
	width: 100%;
	border-radius: 6px;
	box-shadow: 0 8px 18px rgba(0,0,0,0.16);
}

.gsp-book-cta-content {
	position: relative;
	z-index: 1;
}

.gsp-book-cta-label {
	display: inline-block;
	background: var(--gsp-yellow);
	color: var(--gsp-black);
	font-weight: 900;
	font-size: 0.82rem;
	padding: 0.25em 0.7em;
	border-radius: 999px;
	margin-bottom: 0.7em;
}

.gsp-book-cta-title {
	font-size: 1.25rem;
	font-weight: 900;
	color: var(--gsp-black);
	margin-bottom: 0.4em;
	line-height: 1.5;
}

.gsp-book-cta-text {
	color: var(--gsp-text);
	font-size: 0.95rem;
	margin-bottom: 1em;
}

/* ------------------------------
   10. フッター
------------------------------ */

footer,
#footer,
#st-footer {
	background: var(--gsp-navy);
	color: #ffffff;
}

footer a,
#footer a,
#st-footer a {
	color: #ffffff;
}

footer a:hover,
#footer a:hover,
#st-footer a:hover {
	color: var(--gsp-yellow);
}

/* ------------------------------
   11. スマホ・タブレット調整
------------------------------ */
@media only screen and (max-width: 959px) {

	body {
		font-size: 16px;
		line-height: 1.85;
	}

	.gsp-hero {
		padding: 38px 24px;
		margin: 18px 0 30px;
		border-radius: 14px;
	}

	.gsp-hero-title {
		font-size: 2rem;
	}

	.gsp-hero-copy {
		font-size: 0.98rem;
	}

	.gsp-hero-buttons {
		flex-direction: column;
	}

	.gsp-btn {
		text-align: center;
		width: 100%;
	}

	.entry-content h2,
	.post h2 {
		font-size: 1.25rem;
		padding: 0.75em 0.8em;
	}

	.gsp-book-cta {
		grid-template-columns: 90px 1fr;
		gap: 14px;
		padding: 18px;
	}
}

/* タブレットのみ */
@media only screen and (min-width: 600px) and (max-width: 959px) {

	.gsp-hero-title {
		font-size: 2.5rem;
	}
}

/* タブレット・PC */
@media only screen and (min-width: 600px) {

	.entry-content p,
	.post p {
		font-size: 1.02rem;
	}
}

/* PCのみ */
@media print, screen and (min-width: 960px) {

	#content,
	#main {
		max-width: 1120px;
	}

	.entry-content {
		font-size: 1.02rem;
	}

	.gsp-hero {
		min-height: 320px;
		display: flex;
		flex-direction: column;
		justify-content: center;
	}
}

/* スマホのみ */
@media print, screen and (max-width: 599px) {

	body {
		letter-spacing: 0.01em;
	}

	.gsp-hero-title {
		font-size: 1.75rem;
	}

	.gsp-hero-copy {
		font-size: 0.95rem;
	}

	.gsp-book-cta {
		display: block;
	}

	.gsp-book-cta img {
		width: 110px;
		margin: 0 auto 16px;
		display: block;
	}

	.gsp-book-cta-title,
	.gsp-book-cta-text {
		text-align: left;
	}
}
/* スマホ表示：ヘッダーロゴを大きくする */
@media print, screen and (max-width: 599px) {
  #st-logo img,
  #st-header-logo img,
  .sitename img,
  header .sitename img,
  header img {
    max-height: 64px !important;
    width: auto !important;
  }

  #st-logo,
  #st-header-logo,
  .sitename {
    max-width: 260px !important;
  }
}