/* ============================================================
 * 「HSPを知る」カテゴリTOP  (swell_child/assets/css/shiru.css)
 * 読み込みは functions.php で is_category('shiru') のときだけ
 * ============================================================ */

:root {
	--shiru-ink: #2c5670;
	--shiru-ink-sub: #3e5563;
	--shiru-blue: #3d6f8c;
	--shiru-blue-pale: #eef4f8;
	--shiru-blue-line: #cfe3ec;
	--shiru-dot: #9cc3d3;
	--shiru-teal: #2f7f88;
	--shiru-yellow: #dcd52a;
	--shiru-gold: #86661a;
	--shiru-gold-ink: #5e4a14;
	--shiru-gold-pale: #faf5e6;
	--shiru-beige: #fbf7ef;
	--shiru-pink: #9a4859;
	--shiru-round: "Zen Maru Gothic", "Noto Sans JP", sans-serif;
}

/* ---------- SWELL 既存要素の調整 ----------
 * このCSSは「HSPを知る」カテゴリでしか読み込まれないため、body のクラスでは絞り込まない
 * （このサイトの body には category-shiru クラスが出力されていないため） */
/* SWELL標準のページタイトル（「HSPを知る」記事・ブログ一覧）を隠し、h1 をヒーロー側に一本化 */
.c-pageTitle { display: none !important; }
/* タイトル下のカテゴリーリンク（記事 > HSPを知る）はパンくずと重複するので隠す */
.p-termNavigation { display: none !important; }
/* パンくずとヒーローの間の余白（SWELLの上余白を置き換え）
 * ※ SWELLは本文の先頭要素の margin-top を !important で0にするため、余白は親の padding で取る */
.l-content { padding-top: 24px !important; }
.p-termContent { margin-top: 0 !important; }
/* サイドバーを消して1カラムに */
#sidebar { display: none !important; }
.l-mainContent { width: 100% !important; max-width: none !important; }
/* 全幅セクションのはみ出し防止 */
body { overflow-x: clip; }

/* SWELLの本文見出しスタイル（白文字・色帯・影・文字サイズ）を打ち消す */
.post_content .shiru-hero__title,
.post_content .shiru-board__title,
.post_content .shiru-slider__title,
.post_content .shiru-list-head__title {
	color: var(--shiru-ink) !important;
	box-shadow: none !important;
	border-radius: 0 !important;
}
.post_content .shiru-slider--aruaru .shiru-slider__title { color: var(--shiru-gold-ink) !important; }
.post_content .shiru-hero__title { font-size: 52px !important; line-height: 1.3 !important; }
.post_content .shiru-board__title { font-size: 30px !important; }
.post_content .shiru-slider__title,
.post_content .shiru-list-head__title { font-size: 28px !important; }

/* 全幅化 */
.shiru-hero {
	width: 100vw;
	margin-left: calc(50% - 50vw);
}

.shiru-board__head .sp-only,
.sp-inline { display: none; }

/* ============================================================
 * ① ヒーロー（リード＋ハンボー）
 * ============================================================ */
.shiru-hero {
	position: relative;
	overflow: hidden;
	background: var(--shiru-blue-pale);
	padding: 72px 24px 140px;
	box-sizing: border-box;
	text-align: center;
}
.shiru-hero__inner {
	position: relative;
	z-index: 1;
	max-width: 880px;
	margin: 0 auto;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 18px;
}
.shiru-hero__badge {
	font-family: var(--shiru-round);
	font-weight: 700;
	font-size: 14px;
	color: var(--shiru-blue);
	background: #fff;
	padding: 6px 16px;
	border-radius: 999px;
	letter-spacing: .1em;
}
.shiru-hero__title {
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	background: none !important;
	font-family: var(--shiru-round);
	font-weight: 900;
	font-size: 52px;
	line-height: 1.3;
	color: var(--shiru-ink);
	letter-spacing: .04em;
}
.shiru-hero__title::before,
.shiru-hero__title::after { content: none !important; }
.shiru-hero__lead {
	margin: 4px 0 0;
	font-family: var(--shiru-round);
	font-weight: 700;
	font-size: 20px;
	line-height: 2;
	color: #2f4a5a;
}
.shiru-hero__text {
	margin: 0;
	max-width: 680px;
	font-family: var(--shiru-round);
	font-weight: 500;
	font-size: 16px;
	line-height: 2.1;
	color: var(--shiru-ink-sub);
}
.shiru-hero__hanbo {
	position: absolute;
	z-index: 0;
	height: auto;
	pointer-events: none;
}
.shiru-hero__hanbo--r {
	width: 230px;
	right: max(40px, calc(50% - 600px));
	bottom: -44px;
}
.shiru-hero__hanbo--l {
	width: 140px;
	left: max(40px, calc(50% - 540px));
	bottom: -24px;
	transform: rotate(-8deg) scaleX(-1);
}
.shiru-hero__dot {
	position: absolute;
	border-radius: 50%;
}
.shiru-hero__dot--1 { width: 14px; height: 14px; background: #51b9c3; opacity: .45; left: max(48px, calc(50% - 560px)); top: 150px; }
.shiru-hero__dot--2 { width: 22px; height: 22px; background: var(--shiru-yellow); opacity: .55; right: max(80px, calc(50% - 520px)); top: 110px; }

/* ============================================================
 * ② すごろく導線
 * ============================================================ */
.shiru-board {
	position: relative;
	z-index: 2;
	max-width: 1200px;
	margin: -48px auto 0;
	background: #fff;
	border-radius: 32px;
	box-shadow: 0 6px 28px rgba(61, 111, 140, .10);
	padding: 48px 32px 56px;
	box-sizing: border-box;
}
.shiru-board__head { text-align: center; margin-bottom: 36px; }
.shiru-board__title {
	margin: 0 0 8px !important;
	padding: 0 !important;
	border: 0 !important;
	background: none !important;
	font-family: var(--shiru-round);
	font-weight: 900;
	font-size: 30px;
	line-height: 1.5;
	color: var(--shiru-ink);
}
.shiru-board__title::before,
.shiru-board__title::after { content: none !important; }
.shiru-board__sub { margin: 0; font-size: 15px; color: #56707e; }

.shiru-board__row {
	display: flex;
	align-items: flex-start;
	justify-content: center;
}
.shiru-board__start {
	align-self: center;
	flex-shrink: 0;
	width: 92px;
	height: 92px;
	border-radius: 50%;
	background: var(--shiru-teal);
	color: #fff;
	font-family: var(--shiru-round);
	font-weight: 900;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}
.shiru-board__start span { font-size: 18px; letter-spacing: .06em; }
.shiru-board__start small { font-size: 11px; font-weight: 500; }
.shiru-board__link {
	align-self: center;
	flex-shrink: 0;
	width: 36px;
	border-top: 3px dashed var(--shiru-dot);
}

.shiru-tile {
	flex-shrink: 0;
	width: 232px;
	min-height: 330px;
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	gap: 12px;
	padding: 18px;
	border-radius: 24px;
	background: #fff;
	border: 2px solid var(--shiru-blue-line);
	color: #333 !important;
	text-decoration: none !important;
	transition: transform .2s, box-shadow .2s;
}
.shiru-tile--2 { margin-top: 56px; }  /* ジグザグ。不要なら削除 */
.shiru-tile:hover {
	transform: translateY(-4px);
	box-shadow: 0 10px 24px rgba(61, 111, 140, .16);
}
.shiru-tile__head { display: flex; align-items: center; gap: 12px; }
.shiru-tile__no {
	flex-shrink: 0;
	width: 52px;
	height: 52px;
	border-radius: 16px;
	background: var(--shiru-blue);
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: var(--shiru-round);
	font-weight: 900;
	font-size: 28px;
}
.shiru-tile__headtxt { display: flex; flex-direction: column; gap: 2px; }
.shiru-tile__step { font-size: 12px; font-weight: 700; color: var(--shiru-blue); letter-spacing: .1em; }
.shiru-tile__catch {
	font-family: var(--shiru-round);
	font-weight: 700;
	font-size: 19px;
	line-height: 1.4;
	color: var(--shiru-ink);
}
.shiru-tile__body { display: flex; flex-direction: column; gap: 12px; }
.shiru-tile__thumb {
	display: block;
	width: 100%;
	aspect-ratio: 1200 / 630;
	object-fit: contain;
	background: #e3eff4;
	border-radius: 14px;
}
.shiru-tile__title { font-size: 14px; line-height: 1.7; font-weight: 500; }
.shiru-tile:hover .shiru-tile__title { text-decoration: underline; }
.shiru-tile__more { margin-top: auto; font-size: 13px; font-weight: 700; color: var(--shiru-teal); }

.shiru-board__goal {
	align-self: center;
	flex-shrink: 0;
	width: 140px;
	box-sizing: border-box;
	border-radius: 24px;
	background: var(--shiru-gold-pale);
	padding: 18px 14px;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	text-align: center;
}
.shiru-board__goal-label {
	display: flex;
	flex-direction: column;
	gap: 6px;
	font-family: var(--shiru-round);
	font-weight: 900;
	font-size: 18px;
	color: var(--shiru-gold);
	letter-spacing: .06em;
}
.shiru-board__goal-label small { font-size: 12px; font-weight: 500; color: var(--shiru-gold-ink); letter-spacing: 0; }
.shiru-board__goal-links { display: flex; flex-direction: column; gap: 6px; }
.shiru-board__goal-links a { font-size: 13px; font-weight: 700; text-decoration: none; }
.shiru-board__goal-links .is-ikasu { color: var(--shiru-gold); }
.shiru-board__goal-links .is-itawaru { color: var(--shiru-pink); }

/* ============================================================
 * ③④ スライダー
 * ============================================================ */
.shiru-slider { margin-top: 88px; }
.shiru-slider--aruaru .shiru-slider__inner {
	background: var(--shiru-beige);
	border-radius: 32px;
	padding: 40px 32px 32px;
}
.shiru-slider__head {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 16px;
	flex-wrap: wrap;
	margin-bottom: 24px;
}
.shiru-slider__en { font-size: 12px; font-weight: 700; letter-spacing: .14em; color: var(--shiru-blue); }
.shiru-slider--aruaru .shiru-slider__en { color: var(--shiru-gold); }
.shiru-slider__title {
	margin: 4px 0 6px !important;
	padding: 0 !important;
	border: 0 !important;
	background: none !important;
	font-family: var(--shiru-round);
	font-weight: 900;
	font-size: 28px;
	line-height: 1.4;
	color: var(--shiru-ink);
}
.shiru-slider__title::before,
.shiru-slider__title::after { content: none !important; }
.shiru-slider--aruaru .shiru-slider__title { color: var(--shiru-gold-ink); }
.shiru-slider__sub { margin: 0; font-size: 14px; color: #56707e; }
.shiru-slider--aruaru .shiru-slider__sub { color: #6d5a2a; }
.shiru-slider__nav { display: flex; gap: 8px; }
.shiru-slider__btn {
	width: 48px;
	height: 48px;
	border-radius: 50%;
	border: 1.5px solid var(--shiru-blue);
	background: #fff;
	color: var(--shiru-blue);
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0;
}
.shiru-slider__btn:hover { background: var(--shiru-blue-pale); }
.shiru-slider__btn:disabled { opacity: .35; cursor: default; }
.shiru-slider--aruaru .shiru-slider__btn { border-color: var(--shiru-gold); color: var(--shiru-gold); }
.shiru-slider__hint { display: none; font-size: 11px; color: #56707e; }

.shiru-slider__track {
	display: flex;
	gap: 20px;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	padding: 4px 2px 12px;
	scrollbar-width: none;
}
.shiru-slider__track::-webkit-scrollbar { display: none; }

.shiru-card {
	flex-shrink: 0;
	width: 280px;
	scroll-snap-align: start;
	background: #fff;
	border-radius: 20px;
	border: 1px solid #e1ebf0;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	color: #333 !important;
	text-decoration: none !important;
}
.shiru-slider--aruaru .shiru-card { width: 260px; border: 0; }
.shiru-card__thumb {
	display: block;
	width: 100%;
	aspect-ratio: 1200 / 630;
	object-fit: contain;
	background: #e3eff4;
}
.shiru-slider--aruaru .shiru-card__thumb {
	aspect-ratio: 1 / 1;
	background: #f3ead2;
	padding: 12px;
	box-sizing: border-box;
}
.shiru-card__body { padding: 16px 18px 20px; display: flex; flex-direction: column; gap: 8px; }
.shiru-card__label {
	align-self: flex-start;
	font-size: 11px;
	font-weight: 700;
	color: var(--shiru-blue);
	background: var(--shiru-blue-pale);
	padding: 3px 10px;
	border-radius: 999px;
}
.shiru-slider--aruaru .shiru-card__label { color: var(--shiru-gold); background: var(--shiru-gold-pale); }
.shiru-card__title { font-size: 14px; line-height: 1.7; font-weight: 500; }
.shiru-card:hover .shiru-card__title { text-decoration: underline; }

/* ============================================================
 * ⑤ 記事一覧の見出し（SWELL標準の一覧の直前に置く）
 * ============================================================ */
.shiru-list-head { margin: 88px 0 24px; }
.shiru-list-head__en { font-size: 12px; font-weight: 700; letter-spacing: .14em; color: var(--shiru-blue); }
.shiru-list-head__title {
	margin: 4px 0 0 !important;
	padding: 0 !important;
	border: 0 !important;
	background: none !important;
	font-family: var(--shiru-round);
	font-weight: 900;
	font-size: 28px;
	color: var(--shiru-ink);
}
.shiru-list-head__title::before,
.shiru-list-head__title::after { content: none !important; }

/* ============================================================
 * タブレット・スマホ（〜820px）
 * ============================================================ */
@media (max-width: 820px) {
	.shiru-board__head .sp-only { display: inline; }
	.sp-inline { display: inline; }

	/* ヒーロー */
	.l-content { padding-top: 16px !important; }
	.shiru-hero { padding: 40px 20px 150px; }
	.shiru-hero__inner { gap: 14px; }
	.shiru-hero__badge { font-size: 12px; }
	.shiru-hero__title { font-size: 36px; }
	.shiru-hero__lead { font-size: 17px; line-height: 1.9; }
	.shiru-hero__lead br { display: none; }
	.shiru-hero__text { font-size: 14px; line-height: 2; text-align: left; }
	.shiru-hero__text br { display: none; }
	.shiru-hero__hanbo--r { width: 150px; right: 18px; bottom: -30px; }
	.shiru-hero__hanbo--l { width: 88px; left: 22px; bottom: -14px; }
	.shiru-hero__dot--1 { display: none; }
	.shiru-hero__dot--2 { width: 14px; height: 14px; right: 150px; top: auto; bottom: 110px; }

	/* すごろく：縦に蛇行 */
	.shiru-board { margin-top: -44px; padding: 28px 16px; border-radius: 24px; }
	.shiru-board__head { margin-bottom: 22px; }
	.shiru-board__title { font-size: 21px; }
	.shiru-board__sub { font-size: 12.5px; }
	.shiru-board__row { flex-direction: column; align-items: center; }
	.shiru-board__start {
		align-self: flex-start;
		margin-left: 12px;
		width: auto;
		height: auto;
		padding: 8px 18px;
		border-radius: 999px;
	}
	.shiru-board__start small { display: none; }
	.shiru-board__link {
		width: 0;
		height: 28px;
		border-top: 0;
		border-left: 3px dashed var(--shiru-dot);
	}
	.shiru-tile {
		position: relative;
		width: 88%;
		min-height: 0;
		margin-top: 14px !important;
		padding: 14px 14px 12px;
		border-radius: 18px;
		gap: 10px;
	}
	.shiru-tile:nth-of-type(odd) { align-self: flex-start; }
	.shiru-tile:nth-of-type(even) { align-self: flex-end; }
	.shiru-tile__no {
		position: absolute;
		top: -14px;
		left: 14px;
		width: 40px;
		height: 40px;
		border-radius: 12px;
		font-size: 22px;
		box-shadow: 0 3px 8px rgba(61, 111, 140, .25);
	}
	.shiru-tile__headtxt { padding-top: 14px; }
	.shiru-tile__step { font-size: 11px; }
	.shiru-tile__catch { font-size: 17px; }
	.shiru-tile__body { flex-direction: row; align-items: center; gap: 10px; }
	.shiru-tile__thumb { width: 96px; flex-shrink: 0; border-radius: 10px; }
	.shiru-tile__title { font-size: 12.5px; line-height: 1.6; }
	.shiru-tile__more { align-self: flex-end; font-size: 12.5px; }
	.shiru-board__goal { width: 100%; padding: 16px; border-radius: 20px; gap: 10px; }
	.shiru-board__goal-label { flex-direction: row; align-items: baseline; font-size: 16px; gap: 0; }
	.shiru-board__goal-label small { font-family: var(--shiru-round); font-size: 16px; font-weight: 900; color: var(--shiru-gold); }
	.shiru-board__goal-links { flex-direction: row; width: 100%; gap: 8px; }
	.shiru-board__goal-links a {
		flex: 1;
		min-height: 44px;
		border-radius: 12px;
		background: #fff;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	/* スライダー：スワイプ */
	.shiru-slider { margin-top: 56px; }
	.shiru-slider--aruaru .shiru-slider__inner {
		margin: 0 calc(50% - 50vw);
		border-radius: 0;
		padding: 36px 0 28px;
	}
	.shiru-slider--aruaru .shiru-slider__head { padding: 0 20px; }
	.shiru-slider__head { flex-wrap: nowrap; margin-bottom: 16px; }
	.shiru-slider__nav { display: none; }
	.shiru-slider__hint { display: block; flex-shrink: 0; padding-bottom: 2px; }
	.shiru-slider__en { font-size: 11px; }
	.shiru-slider__title { font-size: 22px; }
	.shiru-slider__sub { font-size: 12.5px; }
	.shiru-slider__track {
		gap: 14px;
		margin: 0 calc(50% - 50vw);
		padding: 4px 20px 14px;
		scroll-padding-left: 20px;
	}
	.shiru-slider--aruaru .shiru-slider__track { margin: 0; gap: 12px; }
	.shiru-card { width: 236px; border-radius: 18px; }
	.shiru-slider--aruaru .shiru-card { width: 176px; }
	.shiru-card__body { padding: 12px 14px 16px; gap: 6px; }
	.shiru-card__title { font-size: 13px; line-height: 1.65; }

	.shiru-list-head { margin: 48px 0 18px; }
	.shiru-list-head__title { font-size: 22px; }

	/* SWELL見出しの打ち消し（スマホ用の文字サイズ） */
	.post_content .shiru-hero__title { font-size: 36px !important; }
	.post_content .shiru-board__title { font-size: 21px !important; }
	.post_content .shiru-slider__title,
	.post_content .shiru-list-head__title { font-size: 22px !important; }
}

/* ============================================================
 * カテゴリ別の色（HSPを活かす）
 * ヒーロー・すごろく・一覧見出しに .shiru-cat-ikasu を付けると山吹色になる
 * ============================================================ */
.shiru-cat-ikasu {
	--shiru-ink: #5e4a14;
	--shiru-ink-sub: #5a4c2a;
	--shiru-blue: #86661a;      /* 強調色（番号・STEP・バッジなど） */
	--shiru-blue-pale: #faf5e6; /* ヒーロー背景 */
	--shiru-blue-line: #ecdcae; /* マスの枠線 */
	--shiru-dot: #d9c27f;       /* 点線 */
	--shiru-teal: #86661a;      /* START・「読む」リンク */
}
.shiru-cat-ikasu .shiru-hero__lead { color: #4d3f17; }
.shiru-hero.shiru-cat-ikasu .shiru-hero__dot--1 { background: var(--shiru-yellow); opacity: .7; }
.shiru-hero.shiru-cat-ikasu .shiru-hero__dot--2 { background: #51b9c3; opacity: .45; }
.shiru-board.shiru-cat-ikasu { box-shadow: 0 6px 28px rgba(134, 102, 26, .12); }
.shiru-cat-ikasu .shiru-board__sub { color: #6d5a2a; }
.shiru-cat-ikasu .shiru-tile__thumb { background: #f3ead2; }
.shiru-cat-ikasu .shiru-tile:hover { box-shadow: 0 10px 24px rgba(134, 102, 26, .16); }
/* 活かすのGOALは「労わる」色 */
.shiru-cat-ikasu .shiru-board__goal { background: #fbeff1; }
.shiru-cat-ikasu .shiru-board__goal-label,
.shiru-cat-ikasu .shiru-board__goal-label small { color: #9a4859; }
.shiru-board__goal-links .is-tips { color: #357553; }

/* ---------- スライダー：sense（五感・山吹系・正方形画像） ---------- */
.shiru-slider--sense .shiru-slider__en { color: var(--shiru-gold); }
.post_content .shiru-slider--sense .shiru-slider__title { color: var(--shiru-gold-ink) !important; }
.shiru-slider--sense .shiru-slider__sub { color: #6d5a2a; }
.shiru-slider--sense .shiru-slider__btn { border-color: var(--shiru-gold); color: var(--shiru-gold); }
.shiru-slider--sense .shiru-slider__btn:hover { background: var(--shiru-gold-pale); }
.shiru-slider--sense .shiru-card { width: 260px; border-color: #efe4c8; }
.shiru-slider--sense .shiru-card__thumb {
	aspect-ratio: 1 / 1;
	background: #f3ead2;
	padding: 12px;
	box-sizing: border-box;
}
.shiru-slider--sense .shiru-card__label { color: #fff; background: var(--shiru-gold); font-size: 12px; padding: 3px 12px; }

/* ---------- スライダー：work（仕事・青緑パネル・横長画像） ---------- */
.shiru-slider--work .shiru-slider__inner {
	background: #eef7f7;
	border-radius: 32px;
	padding: 40px 32px 32px;
}
.shiru-slider--work .shiru-slider__en { color: var(--shiru-teal); }
.post_content .shiru-slider--work .shiru-slider__title { color: #1f5f66 !important; }
.shiru-slider--work .shiru-slider__sub { color: #3c6266; }
.shiru-slider--work .shiru-slider__btn { border-color: var(--shiru-teal); color: var(--shiru-teal); }
.shiru-slider--work .shiru-slider__btn:hover { background: #e0f0f1; }
.shiru-slider--work .shiru-card { border: 0; }
.shiru-slider--work .shiru-card__thumb { background: #d9ecee; }
.shiru-slider--work .shiru-card__label { color: #1f5f66; background: #e0f0f1; }

@media (max-width: 820px) {
	.shiru-slider--sense .shiru-card { width: 176px; }
	.shiru-slider--work .shiru-slider__inner {
		margin: 0 calc(50% - 50vw);
		border-radius: 0;
		padding: 36px 0 28px;
	}
	.shiru-slider--work .shiru-slider__head { padding: 0 20px; }
	.shiru-slider--work .shiru-slider__track { margin: 0; }
}

/* ============================================================
 * カテゴリ別の色（HSPを労わる）
 * ヒーロー・すごろく・一覧見出しに .shiru-cat-itawaru を付けるとピンク系になる
 * ============================================================ */
.shiru-cat-itawaru {
	--shiru-ink: #6b2f3c;
	--shiru-ink-sub: #5e4048;
	--shiru-blue: #9a4859;      /* 強調色（番号・STEP・バッジなど） */
	--shiru-blue-pale: #fbeff1; /* ヒーロー背景 */
	--shiru-blue-line: #f0d3d9; /* マスの枠線 */
	--shiru-dot: #e3b3bd;       /* 点線 */
	--shiru-teal: #9a4859;      /* START・「読む」リンク */
}
.shiru-cat-itawaru .shiru-hero__lead { color: #5a2a35; }
.shiru-hero.shiru-cat-itawaru .shiru-hero__dot--1 { background: #e3b3bd; opacity: .9; }
.shiru-hero.shiru-cat-itawaru .shiru-hero__dot--2 { background: #51b9c3; opacity: .4; }
.shiru-board.shiru-cat-itawaru { box-shadow: 0 6px 28px rgba(154, 72, 89, .12); }
.shiru-cat-itawaru .shiru-board__sub { color: #7a4a55; }
.shiru-cat-itawaru .shiru-tile__thumb { background: #f8e3e7; }
.shiru-cat-itawaru .shiru-tile:hover { box-shadow: 0 10px 24px rgba(154, 72, 89, .16); }
/* 労わるのGOALは「ヒント」色 */
.shiru-cat-itawaru .shiru-board__goal { background: #ebf6ef; }
.shiru-cat-itawaru .shiru-board__goal-label,
.shiru-cat-itawaru .shiru-board__goal-label small { color: #357553; }
.shiru-board__goal-links .is-series { color: #2f7f88; }

/* ---------- スライダー：season（季節・ピンク系・正方形画像） ---------- */
.shiru-slider--season .shiru-slider__en,
.shiru-slider--habit .shiru-slider__en { color: #9a4859; }
.post_content .shiru-slider--season .shiru-slider__title,
.post_content .shiru-slider--habit .shiru-slider__title { color: #6b2f3c !important; }
.shiru-slider--season .shiru-slider__sub,
.shiru-slider--habit .shiru-slider__sub { color: #7a4a55; }
.shiru-slider--season .shiru-slider__btn,
.shiru-slider--habit .shiru-slider__btn { border-color: #9a4859; color: #9a4859; }
.shiru-slider--season .shiru-slider__btn:hover,
.shiru-slider--habit .shiru-slider__btn:hover { background: #fbeff1; }
.shiru-slider--season .shiru-card { width: 260px; border-color: #f1dde2; }
.shiru-slider--season .shiru-card__thumb {
	aspect-ratio: 1 / 1;
	background: #f8e3e7;
	padding: 12px;
	box-sizing: border-box;
}
.shiru-slider--season .shiru-card__label { color: #fff; background: #9a4859; font-size: 12px; padding: 3px 12px; }

/* ---------- スライダー：mind（考え方・ラベンダーパネル・横長画像） ---------- */
.shiru-slider--mind .shiru-slider__inner {
	background: #f3f0f8;
	border-radius: 32px;
	padding: 40px 32px 32px;
}
.shiru-slider--mind .shiru-slider__en { color: #5b4a7a; }
.post_content .shiru-slider--mind .shiru-slider__title { color: #44365e !important; }
.shiru-slider--mind .shiru-slider__sub { color: #5a5070; }
.shiru-slider--mind .shiru-slider__btn { border-color: #5b4a7a; color: #5b4a7a; }
.shiru-slider--mind .shiru-slider__btn:hover { background: #ebe5f4; }
.shiru-slider--mind .shiru-card { border: 0; }
.shiru-slider--mind .shiru-card__thumb { background: #e6e0f0; }
.shiru-slider--mind .shiru-card__label { color: #44365e; background: #ebe5f4; }

/* ---------- スライダー：habit（習慣・ピンク系・横長画像・枠線ラベル） ---------- */
.shiru-slider--habit .shiru-card { border-color: #f1dde2; }
.shiru-slider--habit .shiru-card__thumb { background: #f8e3e7; }
.shiru-slider--habit .shiru-card__label {
	color: #9a4859;
	background: #fff;
	border: 1.5px solid #e3b3bd;
	padding: 2px 10px;
}

@media (max-width: 820px) {
	.shiru-slider--season .shiru-card { width: 176px; }
	.shiru-slider--mind .shiru-slider__inner {
		margin: 0 calc(50% - 50vw);
		border-radius: 0;
		padding: 36px 0 28px;
	}
	.shiru-slider--mind .shiru-slider__head { padding: 0 20px; }
	.shiru-slider--mind .shiru-slider__track { margin: 0; }
}

/* ============================================================
 * カテゴリ別の色（HSPのヒント）
 * ヒーロー・4記事の並び・一覧見出しに .shiru-cat-tips を付けると緑系になる
 * ============================================================ */
.shiru-cat-tips {
	--shiru-ink: #24523a;
	--shiru-ink-sub: #3f5a4b;
	--shiru-blue: #357553;      /* 強調色（バッジ・「読む」リンクなど） */
	--shiru-blue-pale: #ebf6ef; /* ヒーロー背景・場面ラベル背景 */
	--shiru-blue-line: #cfe7d8; /* カードの枠線 */
	--shiru-dot: #9fd0b3;
	--shiru-teal: #357553;
}
.shiru-cat-tips .shiru-hero__lead { color: #1f4a33; }
.shiru-hero.shiru-cat-tips .shiru-hero__dot--1 { background: #9fd0b3; opacity: .9; }
.shiru-hero.shiru-cat-tips .shiru-hero__dot--2 { background: var(--shiru-yellow); opacity: .55; }
.shiru-board.shiru-cat-tips { box-shadow: 0 6px 28px rgba(53, 117, 83, .12); }
.shiru-cat-tips .shiru-board__sub { color: #3f5a4b; }

/* ---------- ステップにしない4記事の並び（[shiru_sugoroku cat="tips"]） ---------- */
.shiru-board--picks { padding: 48px 40px 56px; }
.shiru-board--picks .shiru-board__head { margin-bottom: 32px; }
.shiru-picks {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 24px;
	align-items: start;
}
.shiru-pick {
	display: flex;
	flex-direction: column;
	gap: 12px;
	min-height: 320px;
	box-sizing: border-box;
	padding: 18px;
	border-radius: 24px;
	background: #fff;
	border: 2px solid var(--shiru-blue-line);
	color: #333 !important;
	text-decoration: none !important;
	transition: transform .2s, box-shadow .2s;
}
.shiru-pick:nth-child(even) { margin-top: 40px; } /* 段差。不要なら削除 */
.shiru-pick:hover {
	transform: translateY(-4px);
	box-shadow: 0 10px 24px rgba(53, 117, 83, .16);
}
.shiru-pick__catch {
	align-self: flex-start;
	font-family: var(--shiru-round);
	font-weight: 700;
	font-size: 16px;
	line-height: 1.4;
	color: var(--shiru-ink);
	background: var(--shiru-blue-pale);
	padding: 6px 14px;
	border-radius: 14px;
}
.shiru-pick__thumb {
	display: block;
	width: 100%;
	aspect-ratio: 1200 / 630;
	object-fit: contain;
	background: #dcefe3;
	border-radius: 14px;
}
.shiru-pick__title { font-size: 14px; line-height: 1.7; font-weight: 500; }
.shiru-pick:hover .shiru-pick__title { text-decoration: underline; }
.shiru-pick__more { margin-top: auto; font-size: 13px; font-weight: 700; color: var(--shiru-teal); }

/* ---------- スライダー：anxious（不安なとき・緑系・横長画像） / weather（天気・季節・緑系・正方形画像） ---------- */
.shiru-slider--anxious .shiru-slider__en,
.shiru-slider--weather .shiru-slider__en { color: #357553; }
.post_content .shiru-slider--anxious .shiru-slider__title,
.post_content .shiru-slider--weather .shiru-slider__title { color: #24523a !important; }
.shiru-slider--anxious .shiru-slider__sub,
.shiru-slider--weather .shiru-slider__sub { color: #3f5a4b; }
.shiru-slider--anxious .shiru-slider__btn,
.shiru-slider--weather .shiru-slider__btn { border-color: #357553; color: #357553; }
.shiru-slider--anxious .shiru-slider__btn:hover,
.shiru-slider--weather .shiru-slider__btn:hover { background: #ebf6ef; }
.shiru-slider--anxious .shiru-card,
.shiru-slider--weather .shiru-card { border-color: #dbeee2; }
.shiru-slider--anxious .shiru-card__thumb { background: #dcefe3; }
.shiru-slider--anxious .shiru-card__label { color: #24523a; background: #ebf6ef; }
.shiru-slider--weather .shiru-card { width: 260px; }
.shiru-slider--weather .shiru-card__thumb {
	aspect-ratio: 1 / 1;
	background: #dcefe3;
	padding: 12px;
	box-sizing: border-box;
}
.shiru-slider--weather .shiru-card__label { color: #fff; background: #357553; font-size: 12px; padding: 3px 12px; }

/* ---------- スライダー：situation（日常のシチュエーション・ピーチパネル・正方形画像） ---------- */
.shiru-slider--situation .shiru-slider__inner {
	background: #fdf3ec;
	border-radius: 32px;
	padding: 40px 32px 32px;
}
.shiru-slider--situation .shiru-slider__en { color: #9a4b22; }
.post_content .shiru-slider--situation .shiru-slider__title { color: #6e3417 !important; }
.shiru-slider--situation .shiru-slider__sub { color: #6b4a38; }
.shiru-slider--situation .shiru-slider__btn { border-color: #9a4b22; color: #9a4b22; }
.shiru-slider--situation .shiru-slider__btn:hover { background: #fae6da; }
.shiru-slider--situation .shiru-card { width: 260px; border: 0; }
.shiru-slider--situation .shiru-card__thumb {
	aspect-ratio: 1 / 1;
	background: #f8e2d4;
	padding: 12px;
	box-sizing: border-box;
}
.shiru-slider--situation .shiru-card__label { color: #fff; background: #9a4b22; font-size: 12px; padding: 3px 12px; }

@media (max-width: 820px) {
	/* 4記事：2×2 */
	.shiru-board--picks { padding: 28px 14px; }
	.shiru-board--picks .shiru-board__head { margin-bottom: 20px; }
	.shiru-picks { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
	.shiru-pick { min-height: 230px; padding: 10px; gap: 8px; border-radius: 16px; }
	.shiru-pick:nth-child(even) { margin-top: 24px; }
	.shiru-pick__catch { font-size: 14px; line-height: 1.45; padding: 6px 10px; border-radius: 12px; align-self: stretch; }
	.shiru-pick__thumb { border-radius: 10px; }
	.shiru-pick__title { font-size: 12px; line-height: 1.6; }
	.shiru-pick__more { align-self: flex-end; font-size: 12px; }

	.shiru-slider--weather .shiru-card,
	.shiru-slider--situation .shiru-card { width: 176px; }
	.shiru-slider--situation .shiru-slider__inner {
		margin: 0 calc(50% - 50vw);
		border-radius: 0;
		padding: 36px 0 28px;
	}
	.shiru-slider--situation .shiru-slider__head { padding: 0 20px; }
	.shiru-slider--situation .shiru-slider__track { margin: 0; }
}