/* ==========================================================================
   POC薬剤部 トップページ第1試作
   すべて body.poc-top 配下にスコープ（他ページには影響しない）
   ブレークポイント: 960px 以上 = PC / それ未満 = タブレット・スマホ（AFFINGER 準拠）
   ========================================================================== */

body.poc-top {
	--poc-ink: #17324d;
	--poc-muted: #5a6f86;
	--poc-line: #dbe7f6;
	--poc-bg: #f4f8fe;
	--poc-blue: #2f7cf6;
	--poc-blue-d: #1d5fd0;
	--poc-blue-btn: #2468e0; /* 白文字ボタンの背景（白とのコントラスト 5.08:1。--poc-blue は 3.94:1 で不足） */
	--poc-radius: 18px;
	--poc-shadow: 0 2px 6px rgba(23, 50, 77, .05), 0 8px 24px rgba(47, 124, 246, .08);

	--c-calc: #2f7cf6;     --c-calc-bg: #e8f1ff;
	--c-drug: #0f9d8a;     --c-drug-bg: #e0f6f1;
	--c-career: #ea8a1c;   --c-career-bg: #fff1dc;
	--c-practice: #34a04f; --c-practice-bg: #e6f5ea;
	--c-learn: #7359dd;    --c-learn-bg: #eeeaff;
	--c-ai: #0b93c4;       --c-ai-bg: #e0f4fc;

	background: var(--poc-bg);
	color: var(--poc-ink);
}

/* 視覚的に隠す（読み上げ用） */
.poc-vh {
	position: absolute !important;
	width: 1px; height: 1px;
	margin: -1px; padding: 0; border: 0;
	overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}

.poc-i { width: 1em; height: 1em; flex: none; vertical-align: -.125em; }

/* AFFINGER の .post h2/h3 装飾（背景・余白・疑似要素）を試作パーツでは無効化 */
body.poc-top .poc-card__title,
body.poc-top .poc-heading,
body.poc-top .poc-calc__title,
body.poc-top .poc-official__title,
body.poc-top .poc-soon__title,
body.poc-top .poc-hero__title {
	background: none !important;
	border: 0 !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	padding: 0 !important;
	margin: 0 !important;
	text-indent: 0 !important;
}
body.poc-top .poc-card__title::before, body.poc-top .poc-card__title::after,
body.poc-top .poc-heading::before, body.poc-top .poc-heading::after,
body.poc-top .poc-calc__title::before, body.poc-top .poc-calc__title::after,
body.poc-top .poc-official__title::before, body.poc-top .poc-official__title::after,
body.poc-top .poc-soon__title::before, body.poc-top .poc-soon__title::after,
body.poc-top .poc-hero__title::before, body.poc-top .poc-hero__title::after { content: none !important; display: none !important; }

/* メインカラム: AFFINGER の白パネルと左右余白を外し、カード自体を主役にする */
body.poc-top #content main { background: transparent; padding: 0; box-shadow: none; }
body.poc-top #content main article { padding: 0; }

/* ==========================================================================
   ヘッダー（この試作ページのみ）
   ========================================================================== */
body.poc-top #wrapper,
body.poc-top #wrapper-in,
body.poc-top #content-w { background: transparent; }

body.poc-top header,
body.poc-top #header-full,
body.poc-top #headbox-bg { background: #fff; }

body.poc-top #st-header-cardlink-wrapper { display: none; } /* 既存の4バナーは下部リンクへ移設 */

body.poc-top #st-text-logo .sitename { margin: 0; }
/* ヘッダーロゴ: カプセル型ロゴ（アイコン＋「POC薬剤部」の文字ロゴ。透過PNG・比率 480:91）。
 * リンク先（トップ）・リンクの文字「POC薬剤部」（読み上げ・検索エンジン向けの名前）はそのまま。文字は見えない位置へ送り、画像を背景に表示する。
 * 画像: assets/img/poc-logo.png（元データ: 採用ロゴ。余白を切り詰めて480px幅に最適化。デザインは変更していない） */
body.poc-top #st-text-logo .sitename a {
	display: block;
	width: 211px; height: 40px;
	background: url("../img/poc-logo.png") no-repeat left center / contain;
	overflow: hidden;
	white-space: nowrap;
	font-size: 0; line-height: 0; text-indent: -9999px; color: transparent;
	text-decoration: none;
}
body.poc-top #st-text-logo .sitename a::before { content: none; display: none; }

/* PCグローバルメニュー */
body.poc-top #st-menubox,
body.poc-top #st-menuwide { background: #fff; }
body.poc-top #st-menuwide { border-top: 1px solid var(--poc-line); border-bottom: 1px solid var(--poc-line); }
body.poc-top #st-menuwide nav ul.menu { display: flex; flex-wrap: wrap; align-items: center; gap: 2px; margin: 0 auto; }
body.poc-top #st-menuwide nav ul.menu > li { float: none; width: auto; height: auto; border: 0; background: none; }
body.poc-top #st-menuwide nav ul.menu > li > a {
	box-sizing: border-box; /* 親テーマがwidth指定+content-boxのため、960〜1050px幅で最後の項目が右へはみ出していた */
	display: block;
	padding: 14px 16px;
	color: var(--poc-ink);
	background: none;
	font-size: 14px;
	font-weight: 700;
	/* 親テーマの height:100%（liのheight:40px由来）+ line-height:40px + overflow:hidden が
	   このpaddingと組み合わさると文字の上下が切れるため、ここで明示的に無効化する */
	height: auto;
	line-height: 1.4;
	overflow: visible;
	border-bottom: 3px solid transparent;
	transition: color .15s, border-color .15s, background-color .15s;
}
body.poc-top #st-menuwide nav ul.menu > li > a:hover,
body.poc-top #st-menuwide nav ul.menu > li.current-menu-item > a { color: var(--poc-blue-d); border-bottom-color: var(--poc-blue); background: #f2f7ff; }
body.poc-top #st-menuwide nav ul.menu > li.poc-menu-career > a { color: #b9660a; }
body.poc-top #st-menuwide nav ul.menu > li.poc-menu-career > a:hover { color: #b9660a; border-bottom-color: var(--c-career); background: var(--c-career-bg); }
body.poc-top #st-menuwide nav ul.menu > li.poc-menu-sub > a { color: var(--poc-muted); font-size: 12px; font-weight: 500; }
body.poc-top #st-menuwide nav ul.menu > li.poc-menu-sub:first-of-type,
body.poc-top #st-menuwide nav ul.menu > li.poc-menu-sub-first { margin-left: auto; }

/* ==========================================================================
   ヒーロー
   ========================================================================== */
.poc-hero {
	margin: 20px 0 22px;
	border-radius: 26px;
	background:
		radial-gradient(120% 140% at 100% 0%, #dcebff 0%, rgba(220, 235, 255, 0) 55%),
		linear-gradient(135deg, #f7fbff 0%, #eaf3ff 60%, #e6f6f2 100%);
	border: 1px solid var(--poc-line);
	box-shadow: var(--poc-shadow);
	overflow: hidden;
}
.poc-hero__inner {
	display: grid;
	grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr);
	align-items: center;
	gap: 8px 24px;
	padding: 32px 34px 30px;
}
.poc-hero__badge {
	display: inline-block;
	margin: 0 0 12px;
	padding: 5px 14px;
	border-radius: 999px;
	background: #fff;
	border: 1px solid var(--poc-line);
	color: var(--poc-blue-d);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .04em;
}
.poc-hero__title {
	color: var(--poc-ink);
	font-size: clamp(26px, 3.1vw, 38px);
	line-height: 1.32;
	font-weight: 800;
	letter-spacing: .01em;
}
.poc-hero__q, .poc-hero__a { white-space: nowrap; }
.poc-hero__q { color: var(--poc-muted); }
.poc-hero__a { color: var(--poc-blue); background: linear-gradient(transparent 68%, #ffe7a8 68%); }
.poc-hero__lead {
	margin: 0 0 20px;
	color: var(--poc-muted);
	font-size: 15px;
	line-height: 1.8;
}

/* 検索 */
.poc-search {
	display: flex;
	align-items: center;
	position: relative;
	max-width: 560px;
	height: 60px;
	margin: 0;
	padding: 0 6px 0 20px;
	background: #fff;
	border: 2px solid #bcd6fb;
	border-radius: 999px;
	box-shadow: 0 6px 20px rgba(47, 124, 246, .14);
	transition: border-color .15s, box-shadow .15s;
}
.poc-search:focus-within { border-color: var(--poc-blue); box-shadow: 0 6px 22px rgba(47, 124, 246, .26); }
.poc-search__ico { font-size: 22px; color: var(--poc-blue); margin-right: 10px; }
.poc-search .poc-search__input {
	flex: 1;
	min-width: 0;
	height: 100%;
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	background: transparent;
	box-shadow: none;
	color: var(--poc-ink);
	font-size: 16px;
}
.poc-search .poc-search__input::placeholder { color: #8ea2b8; }
.poc-search .poc-search__btn {
	flex: none;
	height: 46px;
	min-width: 88px;
	margin: 0;
	padding: 0 22px;
	border: 0;
	border-radius: 999px;
	background: var(--poc-blue-btn);
	color: #fff;
	font-size: 15px;
	font-weight: 700;
	cursor: pointer;
	transition: background-color .15s;
}
.poc-search .poc-search__btn:hover { background: var(--poc-blue-d); }
.poc-search .poc-search__btn:focus-visible,
.poc-search .poc-search__input:focus-visible { outline: 3px solid #ffd27a; outline-offset: 2px; }

.poc-hero__hints { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 14px 0 0; font-size: 13px; }
.poc-hero__hints-label { color: var(--poc-muted); font-weight: 700; }
.poc-chip {
	display: inline-block;
	padding: 4px 12px;
	border-radius: 999px;
	background: rgba(255, 255, 255, .85);
	border: 1px solid var(--poc-line);
	color: var(--poc-blue-d);
	text-decoration: none;
}
.poc-chip:hover { background: #fff; border-color: var(--poc-blue); }

.poc-hero__art { align-self: center; }
.poc-ph--hero { width: 100%; max-width: 420px; margin: 0 0 0 auto; aspect-ratio: 13 / 10; border-radius: 22px; background: #cfe3ff; font-size: 20px; }
img.poc-ph--hero { display: block; object-fit: cover; object-position: center; }

/* ==========================================================================
   カード共通
   ========================================================================== */
.poc-home ul { list-style: none; margin: 0; padding: 0; }
.poc-home li:not(.poc-card) { margin: 0; padding: 0; list-style: none; }
.poc-home li.poc-card { margin: 0; }

.poc-card {
	position: relative;
	background: #fff;
	border: 1px solid var(--poc-line);
	border-radius: var(--poc-radius);
	box-shadow: var(--poc-shadow);
	transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.poc-card:hover { transform: translateY(-3px); box-shadow: 0 4px 10px rgba(23, 50, 77, .06), 0 14px 32px rgba(47, 124, 246, .16); }
.poc-card__img { display: block; max-width: 100%; height: auto; object-fit: cover; object-position: center; }
.poc-card__img--contain { object-fit: contain; }
.poc-card .poc-card__title { font-size: 18px; line-height: 1.35; font-weight: 800; }
.poc-card__link { color: inherit; text-decoration: none; }
.poc-card__link::after { content: ""; position: absolute; inset: 0; border-radius: inherit; z-index: 1; }
.poc-card__link:focus-visible { outline: none; }
.poc-card__link:focus-visible::after { outline: 3px solid #ffb830; outline-offset: 2px; }
.poc-card__desc { margin: 0; color: var(--poc-muted); font-size: 13px; line-height: 1.65; }
.poc-card__go {
	position: absolute;
	right: 14px; bottom: 14px;
	display: grid; place-items: center;
	width: 32px; height: 32px;
	border-radius: 50%;
	background: var(--cc, var(--poc-blue));
	color: #fff;
	font-size: 16px;
	transition: transform .18s ease;
}
.poc-card:hover .poc-card__go { transform: translateX(3px); }

.poc-card--calc     { --cc: var(--c-calc);     --cb: var(--c-calc-bg);     --cp: #bcd6fb; }
.poc-card--drug     { --cc: var(--c-drug);     --cb: var(--c-drug-bg);     --cp: #b2e5dc; }
.poc-card--career   { --cc: var(--c-career);   --cb: var(--c-career-bg);   --cp: #ffdf8f; }
.poc-card--practice { --cc: var(--c-practice); --cb: var(--c-practice-bg); --cp: #bde5c7; }
.poc-card--learn    { --cc: var(--c-learn);    --cb: var(--c-learn-bg);    --cp: #d0c6f8; }
.poc-card--ai       { --cc: var(--c-ai);       --cb: var(--c-ai-bg);       --cp: #b5e0f2; }

/* 準備中ページ用の色 */
.poc-soon--calc { --cp: #bcd6fb; } .poc-soon--drug { --cp: #b2e5dc; } .poc-soon--career { --cp: #ffdf8f; }
.poc-soon--practice { --cp: #bde5c7; } .poc-soon--learn { --cp: #d0c6f8; } .poc-soon--ai { --cp: #b5e0f2; }

/* 画像プレースホルダー（第1試作: 位置・比率・余白の確認用の単色領域） */
.poc-ph {
	display: grid;
	place-items: center;
	background: var(--cp, #cfe0fb);
	color: #2e4a5f; /* 淡い単色の背景に対し 4.5:1 以上（元は半透明で 2.98:1） */
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .14em;
	text-align: center;
	overflow: hidden;
}
.poc-ph span { display: block; }
.poc-ph small { display: block; margin-top: 4px; font-size: 11px; font-weight: 500; letter-spacing: .04em; }

.poc-card:hover { border-color: var(--cc); }

/* 見出し */
.poc-heading {
	display: flex; align-items: center; gap: 10px;
	color: var(--poc-ink); font-size: 18px; font-weight: 800; line-height: 1.4;
}
.poc-heading__bar { width: 5px; height: 1.2em; border-radius: 3px; background: linear-gradient(var(--poc-blue), #58b0ff); }

/* ==========================================================================
   メイン3カード
   ========================================================================== */
.poc-main3 { margin: 0 0 30px; }
.poc-main3__list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.poc-card--main {
	padding: 0 16px 60px;
	overflow: hidden;
	border-top: 5px solid var(--cc);
}
.poc-card--main .poc-card__img {
	width: calc(100% + 32px);
	max-width: none;
	margin: 0 -16px 12px;
	aspect-ratio: 3 / 2;
}
.poc-card--main .poc-card__title { font-size: 20px; margin-bottom: 6px; }
.poc-card--main .poc-card__desc { font-size: 13px; }

/* 背景透過イラスト（.poc-card__img--contain）は切り抜かず全体を収める。
   フルブリード（カード端まで塗る）演出は写真向けのため、透過イラストでは解除する。 */
.poc-card--main .poc-card__img--contain {
	width: 100%;
	margin: 0 0 12px;
	background: transparent;
}

/* ==========================================================================
   おすすめカテゴリー（コンパクト3枚）
   ========================================================================== */
.poc-sub3 { margin: 0 0 32px; }
.poc-sub3__list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.poc-card--sub {
	display: flex;
	flex-direction: column;
	padding: 14px 14px 54px;
	border-left: 5px solid var(--cc);
}
.poc-card--sub .poc-card__img {
	width: 72px; height: 54px;
	margin-bottom: 8px;
	border-radius: 12px;
	font-size: 9px;
	letter-spacing: .08em;
}
.poc-card--sub .poc-card__title { font-size: 16px; margin-bottom: 4px; }
.poc-card--sub .poc-card__desc { font-size: 12.5px; line-height: 1.6; }
.poc-card--sub .poc-card__go { width: 28px; height: 28px; font-size: 14px; right: 12px; bottom: 12px; }

/* ==========================================================================
   おすすめカテゴリー（6カード統一：計算する〜AI・便利系を同一サイズで並べる）
   .poc-card / .poc-card__img / .poc-card__title / .poc-card__desc / .poc-card__go の
   共通パーツを再利用し、カテゴリー別の差分は既存の .poc-card--<key> の配色トークンのみに留める。
   ========================================================================== */
.poc-cats { margin: 0 0 32px; }
.poc-cats__list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.poc-card--cat {
	padding: 0 16px 60px;
	overflow: hidden;
	border-top: 5px solid var(--cc);
}
.poc-card--cat .poc-card__img {
	width: 100%;
	margin: 0 0 12px;
	aspect-ratio: 3 / 2;
	background: transparent;
}
.poc-card--cat .poc-card__title { font-size: 18px; margin-bottom: 6px; }
.poc-card--cat .poc-card__desc { font-size: 13px; }

@media only screen and (max-width: 599px) {
	.poc-cats__list { grid-template-columns: 1fr; gap: 12px; }
	.poc-card--cat { padding: 16px 16px 46px; }
	.poc-card--cat .poc-card__img { border-radius: 14px; }
}

.poc-tags { display: flex; flex-wrap: wrap; gap: 5px; margin: 8px 0 0 !important; }
body.poc-top .poc-tags li { padding: 2px 9px; border-radius: 999px; background: var(--cb); color: var(--cc); font-size: 11.5px; font-weight: 700; }
.poc-ext {
	position: relative; z-index: 2; /* カード全体リンクの上に出す */
	display: inline-flex; align-items: center; gap: 6px;
	margin-top: 9px; padding: 4px 11px 4px 9px;
	border-radius: 999px;
	background: #fff; border: 1px solid var(--poc-line);
	color: var(--poc-ink); font-size: 12px; font-weight: 700; text-decoration: none;
	align-self: flex-start;
}
.poc-ext:hover { border-color: var(--poc-blue); }
.poc-ext__i { font-size: 14px; }
.poc-ext__x { font-size: 12px; color: #93a5ba; }
.poc-ext--youtube { border-color: #f2b7b7; color: #d02e2e; }
.poc-ext--youtube:hover { background: #fff3f3; border-color: #e58a8a; }
.poc-ext--goods { border-color: #f6d3a4; color: #a35c05; }
.poc-ext--goods:hover { background: #fff7ea; border-color: #eab26a; }

/* ==========================================================================
   よく使う計算ツール
   ========================================================================== */
.poc-calc {
	margin: 0 0 22px;
	padding: 16px 16px 14px;
	background: #fff;
	border: 1px solid var(--poc-line);
	border-top: 5px solid var(--c-calc);
	border-radius: var(--poc-radius);
	box-shadow: var(--poc-shadow);
}
.poc-calc .poc-calc__title {
	display: flex; align-items: center; gap: 8px;
	font-size: 16px; font-weight: 800; color: var(--poc-ink); line-height: 1.4;
}
.poc-calc__title-i { color: var(--c-calc); font-size: 20px; }
.poc-calc__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 0; padding: 0; list-style: none; }
.poc-calc__grid li { margin: 0; padding: 0; list-style: none; }
.poc-calc__grid li:last-child:nth-child(odd) { grid-column: 1 / -1; }
.poc-calc__item {
	display: grid;
	grid-template-columns: 34px 1fr;
	grid-template-rows: auto auto;
	column-gap: 9px;
	align-items: center;
	min-height: 56px;
	padding: 8px 10px;
	border-radius: 12px;
	background: var(--c-calc-bg);
	color: var(--poc-ink);
	text-decoration: none;
	transition: background-color .15s, transform .15s, box-shadow .15s;
}
.poc-calc__item:hover { background: #d6e6ff; transform: translateY(-2px); box-shadow: 0 6px 14px rgba(47, 124, 246, .18); }
.poc-calc__item:focus-visible { outline: 3px solid #ffb830; outline-offset: 2px; }
.poc-calc__icon { grid-row: 1 / 3; width: 34px; height: 34px; padding: 6px; border-radius: 10px; background: #fff; color: var(--c-calc); box-sizing: border-box; }
.poc-calc__label { font-size: 14.5px; font-weight: 800; line-height: 1.2; align-self: end; }
.poc-calc__sub { font-size: 11px; color: var(--poc-muted); line-height: 1.3; align-self: start; }
.poc-calc__all {
	display: flex; align-items: center; justify-content: center; gap: 4px;
	margin-top: 12px; padding: 11px 12px;
	border-radius: 999px;
	background: var(--poc-blue-btn); color: #fff;
	font-size: 14px; font-weight: 700; text-decoration: none;
	transition: background-color .15s;
}
.poc-calc__all:hover { background: var(--poc-blue-d); color: #fff; }
.poc-calc__all-i { font-size: 16px; }

/* ==========================================================================
   POC薬剤部 公式コンテンツ（LINE / YouTube）
   ========================================================================== */
.poc-official {
	position: relative;
	margin: 0 0 22px;
	padding: 18px 16px 16px;
	background: #fff;
	border: 1px solid var(--poc-line);
	border-radius: var(--poc-radius);
	box-shadow: var(--poc-shadow);
	overflow: hidden;
}
.poc-official::before { /* 上端アクセント: LINEグリーン | YouTubeレッド */
	content: ""; position: absolute; top: 0; left: 0; right: 0; height: 5px;
	background: linear-gradient(90deg, #06c755 0 50%, #ff3d3d 50% 100%);
}
.poc-official .poc-official__title {
	margin: 0 0 12px; font-size: 16px; font-weight: 800; line-height: 1.4; color: var(--poc-ink);
}
body.poc-top .poc-official__title { margin-bottom: 12px !important; }
.poc-official__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 0; padding: 0; list-style: none; }
.poc-official__grid li { margin: 0; padding: 0; list-style: none; min-width: 0; }
.poc-official__item {
	display: flex; align-items: center; gap: 8px;
	min-height: 56px; padding: 8px 10px; box-sizing: border-box;
	border: 1px solid var(--poc-line); border-radius: 12px;
	background: #f8fbff; color: var(--poc-ink); text-decoration: none;
	transition: background-color .15s, border-color .15s, transform .15s, box-shadow .15s;
}
.poc-official__icon {
	flex: none; display: grid; place-items: center; width: 34px; height: 34px;
	border-radius: 50%; color: #fff; font-size: 18px;
}
.poc-official__item--line .poc-official__icon { background: #06c755; }
.poc-official__item--youtube .poc-official__icon { background: #ff3d3d; }
.poc-official__name { flex: 1; min-width: 0; font-size: 14px; font-weight: 800; line-height: 1.2; white-space: nowrap; }
.poc-official__ext { flex: none; font-size: 12px; color: #93a5ba; }
.poc-official__item:hover,
.poc-official__item:focus-visible { transform: translateY(-2px); box-shadow: 0 6px 14px rgba(23, 50, 77, .14); }
.poc-official__item--line:hover, .poc-official__item--line:focus-visible { background: #e9faf0; border-color: #06c755; }
.poc-official__item--youtube:hover, .poc-official__item--youtube:focus-visible { background: #fff0f0; border-color: #ff3d3d; }
.poc-official__item:hover .poc-official__ext { color: var(--poc-ink); }
.poc-official__item:focus-visible { outline: 3px solid #ffb830; outline-offset: 2px; }

/* PC=サイドバー用 / スマホ=本文用 の出し分け */
.poc-calc--main { display: none; }
.poc-official--main { display: none; }

/* ==========================================================================
   公式リンク帯
   ========================================================================== */

/* ==========================================================================
   新着記事（既存の一覧テンプレートをそのまま利用）
   ========================================================================== */
.poc-latest { margin: 0 0 8px; }
.poc-posts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.poc-post {
	--cc: var(--c-calc); --cb: var(--c-calc-bg); --cp: #bcd6fb;
	position: relative;
	display: grid;
	grid-template-columns: 104px minmax(0, 1fr);
	gap: 12px;
	align-items: start;
	padding: 10px;
	background: #fff;
	border: 1px solid var(--poc-line);
	border-radius: 14px;
	box-shadow: var(--poc-shadow);
	transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.poc-post--practice { --cc: var(--c-practice); --cb: var(--c-practice-bg); --cp: #bde5c7; }
.poc-post--career   { --cc: var(--c-career);   --cb: var(--c-career-bg);   --cp: #ffdf8f; }
.poc-post--learn     { --cc: var(--c-learn);    --cb: var(--c-learn-bg);    --cp: #d0c6f8; }
.poc-post:hover { transform: translateY(-2px); border-color: var(--cc); box-shadow: 0 4px 10px rgba(23, 50, 77, .06), 0 12px 28px rgba(47, 124, 246, .14); }
.poc-post__thumb { width: 104px; height: 78px; border-radius: 10px; overflow: hidden; background: var(--cp); }
.poc-post__img, .poc-post__ph { display: block; width: 100%; height: 100%; }
.poc-post__img { object-fit: cover; max-width: none; }
.poc-post__ph { font-size: 10px; }
.poc-post__body { min-width: 0; }
.poc-post__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin: 0 0 4px; line-height: 1.3; }
.poc-post__cat { display: inline-block; padding: 2px 9px; border-radius: 999px; background: var(--cb); color: var(--cc); font-size: 11px; font-weight: 800; }
.poc-post__date { color: var(--poc-muted); font-size: 11.5px; }
body.poc-top .poc-post__title { margin: 0 !important; padding: 0 !important; border: 0 !important; background: none !important; font-size: 14px; font-weight: 700; line-height: 1.5; }
.poc-post__link { color: var(--poc-ink); text-decoration: none; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.poc-post__link::after { content: ""; position: absolute; inset: 0; border-radius: inherit; z-index: 1; }
.poc-post__link:focus-visible { outline: none; }
.poc-post__link:focus-visible::after { outline: 3px solid #ffb830; outline-offset: 2px; }
/* 抜粋・詳細リンク（poc_post_card( true ) 使用時のみ。キャリアTOP等） */
.poc-post__desc { margin: 6px 0 0; font-size: 12.5px; line-height: 1.6; color: var(--poc-muted); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.poc-post__more { position: relative; z-index: 2; display: inline-flex; align-items: center; gap: 4px; margin-top: 8px; color: var(--poc-blue-d); font-size: 12.5px; font-weight: 700; text-decoration: none; }
.poc-post__more:hover { text-decoration: underline; }
.poc-post__more-i { width: .85em; height: .85em; }

.poc-more { margin: 18px 0 0; text-align: center; }
.poc-more .poc-btn { display: inline-flex; align-items: center; gap: 6px; padding: 12px 28px; }
.poc-more__i { font-size: 16px; }
.poc-pager { margin: 20px 0 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; }
.poc-pager .page-numbers {
	display: inline-flex; align-items: center; justify-content: center;
	min-width: 40px; height: 40px; padding: 0 12px; box-sizing: border-box;
	border-radius: 999px; background: #fff; border: 1px solid var(--poc-line);
	color: var(--poc-blue-d); font-weight: 700; text-decoration: none;
}
.poc-pager .page-numbers, .poc-pager a.next, .poc-pager a.prev { position: static !important; float: none !important; width: auto !important; top: auto !important; left: auto !important; right: auto !important; margin: 0 !important; }
.poc-pager a.page-numbers:hover { border-color: var(--poc-blue); }
.poc-pager .page-numbers.current { background: var(--poc-blue-btn); border-color: var(--poc-blue); color: #fff; }
.poc-pager .page-numbers.dots { border: 0; background: none; min-width: 0; }
.poc-empty { color: var(--poc-muted); }

/* ==========================================================================
   サイドバー（PC）: 計算ツールの下に「よく読まれている記事」
   ========================================================================== */
body.poc-top #side > aside { display: flex; flex-direction: column; }
body.poc-top #mybox { display: flex; flex-direction: column; }
body.poc-top #mybox > #text-2 { order: -1; }   /* よく読まれている記事を先頭へ（ウィジェット設定は変更しない） */

/* 旧ブログ的なウィジェット（Search／プロフィール／カテゴリー／アーカイブ等）はこの試作ページでは非表示。
   ウィジェット設定は削除しない（他ページの表示には影響しない） */
body.poc-top #mybox > :not(#text-2) { display: none; }

/* よく読まれている記事 → カード＆コンパクトリスト */
body.poc-top #mybox > #text-2 {
	margin: 0 0 22px; padding: 16px 16px 8px;
	background: #fff; border: 1px solid var(--poc-line); border-radius: var(--poc-radius); box-shadow: var(--poc-shadow);
}
body.poc-top #text-2 .textwidget { padding: 0; }
body.poc-top #text-2 .pop-box { margin: 0; padding: 0; background: none; border: 0; }
body.poc-top #text-2 .p-entry-t { margin: 0 0 6px; padding: 0; border: 0; background: none; box-shadow: none; line-height: 1.4; }
body.poc-top #text-2 .p-entry-t::before, body.poc-top #text-2 .p-entry-t::after,
body.poc-top #text-2 .p-entry::after { content: none; display: none; }
body.poc-top #text-2 .p-entry {
	display: flex; align-items: center; gap: 8px;
	margin: 0; padding: 0; border: 0; background: none; color: var(--poc-ink);
	font-size: 16px; font-weight: 800; box-shadow: none; position: static; height: auto;
	width: auto; max-width: none; white-space: nowrap; opacity: 1; transform: none;
}
body.poc-top #text-2 .p-entry::before {
	content: ""; display: block; position: static; flex: none; width: 5px; height: 1.2em; border-radius: 3px;
	background: var(--c-career) !important; opacity: 1 !important; margin: 0 !important; left: auto; top: auto; right: auto;
	border: 0 !important; box-shadow: none !important;
}
body.poc-top #text-2 dl {
	display: grid; grid-template-columns: 68px minmax(0, 1fr); gap: 0 12px; align-items: center;
	margin: 0; padding: 10px 0; border: 0; border-top: 1px solid #edf2f9; background: none;
}
body.poc-top #text-2 dl:first-of-type { border-top: 0; }
body.poc-top #text-2 dt.poprank { position: relative; float: none; width: 68px; height: 51px; margin: 0; padding: 0; }
body.poc-top #text-2 dt.poprank a { display: block; width: 100%; height: 100%; }
body.poc-top #text-2 dt.poprank img { display: block; width: 68px; height: 51px; max-width: none; margin: 0; object-fit: cover; border-radius: 10px; background: #dfe9f7; }
body.poc-top #text-2 .poprank-no {
	position: absolute; top: -5px; left: -5px; z-index: 1;
	display: grid; place-items: center; width: 22px; height: 22px; padding: 0; margin: 0;
	border-radius: 50%; border: 2px solid #fff; background: var(--poc-blue-btn); color: #fff;
	font-size: 11px; font-weight: 800; line-height: 1;
}
body.poc-top #text-2 dl:nth-of-type(n+4) .poprank-no { background: #8ea2b8; }
body.poc-top #text-2 dd { float: none; width: auto; margin: 0; padding: 0; min-width: 0; }
body.poc-top #text-2 .popular-t { margin: 0; padding: 0; border: 0; background: none; font-size: 13px; line-height: 1.55; font-weight: 700; }
body.poc-top #text-2 .popular-t a { color: var(--poc-ink); text-decoration: none; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
body.poc-top #text-2 .popular-t a:hover { color: var(--poc-blue-d); }
body.poc-top #text-2 .st-excerpt { display: none; }  /* 抜粋は出さず、サムネイル＋タイトルに絞る */

/* ==========================================================================
   準備中ページ
   ========================================================================== */
.poc-soon {
	margin: 20px 0;
	padding: 34px 24px 40px;
	text-align: center;
	background: #fff;
	border: 1px solid var(--poc-line);
	border-radius: 22px;
	box-shadow: var(--poc-shadow);
}
.poc-soon__img { width: 200px; max-width: 70%; aspect-ratio: 4 / 3; margin: 0 auto 14px; border-radius: 16px; }
.poc-soon__badge {
	display: inline-block; margin: 0 0 8px; padding: 4px 16px;
	border-radius: 999px; background: #fff3d6; color: #a86300;
	font-size: 13px; font-weight: 800; letter-spacing: .08em;
}
.poc-soon .poc-soon__title { font-size: 26px; font-weight: 800; color: var(--poc-ink); }
.poc-soon__lead { margin: 0 0 6px; color: var(--poc-ink); font-size: 15px; line-height: 1.8; }
.poc-soon__note { margin: 0 0 22px; color: var(--poc-muted); font-size: 13px; }
.poc-btn {
	display: inline-block; padding: 12px 24px; border-radius: 999px;
	background: #fff; border: 2px solid var(--poc-blue); color: var(--poc-blue-d);
	font-weight: 700; text-decoration: none;
}
.poc-btn--primary { background: var(--poc-blue-btn); color: #fff; }
.poc-btn--primary:hover { background: var(--poc-blue-d); color: #fff; }

/* ==========================================================================
   タブレット・スマホ（959px以下）
   ========================================================================== */
@media only screen and (max-width: 959px) {
	.poc-calc--main { display: block; margin-bottom: 26px; }
	.poc-calc--side { display: none; }
	.poc-official--main { display: block; margin-bottom: 26px; }
	.poc-official--side { display: none; }

	.poc-hero { margin: 12px 0 18px; border-radius: 22px; }
	.poc-hero__inner { grid-template-columns: 1fr; padding: 22px 20px 22px; gap: 4px; }
	.poc-hero__art { order: -1; margin: 0 0 6px; }
	.poc-ph--hero { max-width: none; aspect-ratio: 16 / 8; border-radius: 16px; font-size: 16px; }
	.poc-hero__text { text-align: left; }
	.poc-hero__lead { font-size: 14px; margin-bottom: 16px; }
	.poc-br { display: none; }

	.poc-search { height: 54px; padding-left: 16px; }
	.poc-search .poc-search__btn { height: 42px; min-width: 76px; padding: 0 16px; }
}

/* スマホ（599px以下）: 縦積みで再構成 */
@media only screen and (max-width: 599px) {
	.poc-hero__inner { padding: 18px 16px 20px; }
	.poc-hero__title { font-size: 25px; }
	.poc-hero__hints { font-size: 12.5px; }

	.poc-main3__list { grid-template-columns: 1fr; gap: 12px; }
	.poc-card--main {
		display: grid;
		grid-template-columns: 104px minmax(0, 1fr);
		grid-template-areas: "img title" "img desc";
		column-gap: 14px;
		align-content: center;
		min-height: 108px;
		padding: 14px 52px 14px 14px;
		border-top: 1px solid var(--poc-line);
		border-left: 6px solid var(--cc);
	}
	.poc-card--main .poc-card__img {
		grid-area: img;
		width: 104px; height: 78px;
		margin: 0;
		border-radius: 14px;
		font-size: 10px;
		aspect-ratio: auto;
		align-self: center;
	}
	.poc-card--main .poc-card__title { grid-area: title; align-self: end; font-size: 18px; margin-bottom: 3px; }
	.poc-card--main .poc-card__desc { grid-area: desc; align-self: start; }
	.poc-card--main .poc-card__go { top: 50%; bottom: auto; right: 12px; margin-top: -16px; }

	.poc-sub3__list { grid-template-columns: 1fr; gap: 10px; }
	.poc-card--sub {
		display: grid;
		grid-template-columns: 76px minmax(0, 1fr);
		column-gap: 12px;
		padding: 12px 46px 12px 12px;
		min-height: 80px;
	}
	.poc-card--sub .poc-card__img { width: 76px; height: 60px; margin: 0; align-self: start; }
	.poc-card--sub .poc-card__go { top: 14px; bottom: auto; right: 12px; }

	.poc-calc { padding: 14px 12px 12px; }
	.poc-calc__grid { gap: 8px; }
	.poc-calc__item { min-height: 62px; }

	.poc-posts { grid-template-columns: 1fr; gap: 10px; }
	.poc-post { grid-template-columns: 96px minmax(0, 1fr); padding: 10px; }
	.poc-post__thumb { width: 96px; height: 72px; }

	.poc-soon { padding: 26px 16px 30px; }
	.poc-soon .poc-soon__title { font-size: 22px; }
}

/* スマホ: 小さめのチップ類もタップしやすい高さに */
@media only screen and (max-width: 599px) {
	.poc-chip { display: inline-flex; align-items: center; min-height: 36px; padding: 0 14px; }
	.poc-ext { min-height: 38px; padding-top: 6px; padding-bottom: 6px; }
	.poc-pager .page-numbers { min-width: 44px; height: 44px; }
}

/* 動きを減らす設定 */
@media (prefers-reduced-motion: reduce) {
	.poc-card, .poc-card__go, .poc-calc__item { transition: none; }
	.poc-card:hover, .poc-calc__item:hover, .poc-card:hover .poc-card__go, .poc-official__item:hover { transform: none; }
}

/* 見出し下の余白（見出し自体は !important でリセット済みのため、次要素側で確保） */
body.poc-top .poc-heading { margin-bottom: 14px !important; }
body.poc-top .poc-hero__title { margin-bottom: 12px !important; }
body.poc-top .poc-calc__title { margin-bottom: 12px !important; }
body.poc-top .poc-soon__title { margin-bottom: 10px !important; }
body.poc-top .poc-card--main .poc-card__title { margin-bottom: 6px !important; }
body.poc-top .poc-card--sub .poc-card__title { margin-bottom: 4px !important; }
@media only screen and (max-width: 599px) {
	body.poc-top .poc-card--main .poc-card__title { margin-bottom: 3px !important; }
}

/* ヒーローは本文幅(1060px)にそろえる */
.poc-hero { max-width: 1060px; margin-left: auto; margin-right: auto; }
@media only screen and (max-width: 1100px) {
	.poc-hero { margin-left: 12px; margin-right: 12px; }
}

/* ヘッダー: サイト名を折り返さない */
body.poc-top #header-l { width: auto; max-width: 100%; }
body.poc-top #st-text-logo .sitename a { white-space: nowrap; }

/* タブレット・スマホ: 本文の左右ゲッター（PCは列幅で余白が確保されるため不要） */
@media only screen and (max-width: 959px) {
	body.poc-top #content main { padding-left: 12px; padding-right: 12px; }
}
/* タブレット・スマホ: ヘッダーロゴを小さく（比率 480:91 を保つ） */
@media only screen and (max-width: 959px) {
	body.poc-top #st-text-logo .sitename a { width: 190px; height: 36px; margin-left: auto; margin-right: auto; }
}
@media only screen and (max-width: 599px) {
	body.poc-top #st-text-logo .sitename a { width: 169px; height: 32px; }
}

/* 2ページ目以降（ヒーローなし）: メニュー直下に詰まらないよう上余白を確保 */
body.poc-top.paged #content { padding-top: 22px; }

/* 公式コンテンツ: 見出しサイズを固定し、外部リンク印(↗)は角に置いて幅を圧迫しない */
body.poc-top .poc-official__title { font-size: 18px !important; line-height: 1.4 !important; white-space: nowrap; }
.poc-official__item { position: relative; gap: 8px; padding: 8px 10px; }
.poc-official__icon { width: 32px; height: 32px; font-size: 17px; }
.poc-official__ext { position: absolute; top: 6px; right: 7px; font-size: 11px; }

/* ------------------------------------------------------------------
 * コントラスト是正（WCAG AA 4.5:1）
 * - 白文字ボタンの背景は --poc-blue-btn（上の :root）。
 * - 記事カードのカテゴリーチップ: 文字色だけを濃い色にする（背景色・カードのアクセント色 --cc は変えない）。
 * ------------------------------------------------------------------ */
.poc-post { --cct: #1d5fd0; }
.poc-post--practice { --cct: #23753a; }
.poc-post--career { --cct: #9a5200; }
.poc-post--learn { --cct: #5b43c4; }
.poc-post__cat { color: var(--cct, var(--cc)); }
/* 新着記事・一覧の投稿日: 親テーマの #777 は淡い背景で 4.2:1 のため #666（約5.1:1）にする */
body.poc-top .kanren .blog_info p { color: #666 !important; } /* 親テーマの動的CSS（st-themecss-loader）が後から読み込まれるため !important */