@charset "UTF-8";

/* Basic Construction
"base.css"
------------------------------ */
/*
l-：layout（配置：ヘッダー枠、2カラムなど）

c-：component（再利用する部品：ボタン、カード、通知、フォーム）

p-：page（ページ固有：トップ、記事、ログイン等）

u-：utility（1目的の微調整：余白、表示切替など）

is- / has-：状態（JSで付け外し：開いてる、エラー等）
------------------------------ */
/* root */

:root {
	--header-height:			6.75rem;
	--main-content-width:		80rem;
	--sidebar-width-min:		33.3%;
	--sidebar-width-max:		20rem;
	--color-primary-100:		#F2F4F8;
	--color-primary-200:		#E6E8EF;
	--color-primary-300:		#BFC6D6;
	--color-primary-400:		#99A4BE;
	--color-primary-500:		#596B95;
	--color-primary-600:		#042b88;
	--color-primary-700:		#00184E;
	--color-primary-800:		#001440;
	--color-primary-900:		#000F33;
	--color-gray-100:			#F3F4F6;
	--color-gray-200:			#E5E7EB;
	--color-gray-300:			#D1D5DB;
	--color-gray-400:			#9CA3AF;
	--color-gray-500:			#6B7280;
	--color-gray-600:			#4B5563;
	--color-gray-700:			#374151;
	--color-gray-800:			#1F2937;
	--color-gray-900:			#111827;
	--color-success-muted:		#10B981;
	--color-success-bold:		#15803D;
	--color-warning-muted:		#F59E0B;
	--color-warning-bold:		#9A3412;
	--color-error-muted:		#EF4444;
	--color-error-bold:			#DC2626;
	--color-info-muted:			#3B82F6;
	--color-info-bold:			#1D4ED8;
	--color-rgb-primary-100:	242, 244, 248;
	--color-rgb-primary-200:	230, 232, 239;
	--color-rgb-primary-300:	191, 198, 214;
	--color-rgb-primary-400:	153, 164, 190;
	--color-rgb-primary-500:	89, 107, 149;
	--color-rgb-primary-600:	4, 43, 136;
	--color-rgb-primary-700:	0, 24, 78;
	--color-rgb-primary-800:	0, 20, 64;
	--color-rgb-primary-900:	0, 15, 51;
	--color-rgb-success-muted:	16, 185, 129;
	--color-rgb-success-bold:	21, 128, 61;
	--color-rgb-warning-muted:	245, 158, 11;
	--color-rgb-warning-bold:	154, 52, 18;
	--color-rgb-error-muted:	239, 68, 68;
	--color-rgb-error-bold:		220, 38, 38;
	--color-rgb-info-muted:		59, 130, 246;
	--color-rgb-info-bold:		29, 78, 216;
	--color-text-primary:		#1F1F1F;
	--color-text-secondary:		#333333;
	--color-text-inverse:		#FFFFFF;
	--color-background:			#f9f9f9;
	--color-link-visited:		#6B4FA3;
	--skeleton-background:		#f2f3f5;
	--skeleton-shimmer: linear-gradient(
				90deg,
				#f2f3f5 0%,
				#f8f9fa 50%,
				#f2f3f5 100%
			);
}
@media screen and (min-width:800px) and (max-width:1150px) {
	:root {
		--header-height:			4.5rem;
	}
}
@media screen and (min-width:1px) and (max-width:800px) {
	:root {
		/* 4px は #header_search_input の outline の誤差 */
		--header-height:			calc(5.75rem + 4px);
	}
}


/* root */
/* ------------------------------ */
/* HTML Tag */

*, *::before, *::after {
	box-sizing:						border-box;
}

html {
	/* 最初からスクロールバーの幅を確保しておく */
	overflow-y:						auto;
	scrollbar-gutter:				stable;

	/* 横向き時の文字サイズ自動拡大を防止 */
	text-size-adjust:				100%;
	-moz-text-size-adjust:			100%;

	/* iOS */
	-webkit-text-size-adjust:		100%;
}


body {
	background-color:				var(--color-background);
	color:							var(--color-text-secondary);
	font-family:					sans-serif;
	margin:							0;
	padding:						0;

	/* macOS | iOS */
	-webkit-font-smoothing:			antialiased;
}
@media print {
	body {
		display: none;
	}
}


/*
	showMask() で、
	フローティングウィンドウの下のコンテンツを固定する
*/
html.is_fixed {
	overflow:						hidden;
}
body.is_fixed {
	overflow:						hidden;
}
body.is_fixed aside {
	align-self:						flex-start;
	position:						static;
	-ms-flex-item-align:			start;
	-webkit-align-self:				flex-start;
}

/*
	全画面時に下のコンテンツを固定する
*/
body.is_fullscreen {
	overflow:						hidden;
	touch-action:					none;
}


img {
	max-width:						100%;
	height:							auto;
	vertical-align:					middle;
}

svg {
	max-width: 100%;
}

select {
	padding:						0.125rem 0.25rem;
}

input[type='submit'], input[type='button'], input[type='checkbox'], input[type='radio'], input[type='file'], label, select, button {
	cursor:							pointer;
	vertical-align:					middle;
}

input[type='text'] {
	vertical-align:					middle;
}

aside {
	width:							100%;
}

main {
	width:							100%;
}

ul, ol, li {
	margin:							0;
	padding:						0;
}

li {
	list-style-type:				none;
}

h1, h2, h3, h4, h5, h6 {
	color:							var(--color-text-secondary);

	/* 見目を良くするために、感覚を詰める */
	font-feature-settings:			"palt";
	letter-spacing:					0.03em;

	/* iOS | Safari | Chrome*/
	-webkit-font-feature-settings:	"palt";
}
h1 {
	align-items:			center;
	display:				flex;
}
h1 a {
	color:					var(--color-gray-600);
	font-size:				1.5rem;
	padding:				0;
	vertical-align:			middle;
}
h2, h2 a {
	font-size:				1.125rem;
	margin:					0;
}
h3, h3 a {
	font-size:				1rem;
	display:				inline-block;
	margin:					0;
	width:					100%;
}
@media screen and (min-width:1px) and (max-width:800px) {
	h1, h1 a {
		font-size:			1.5rem;
	}
	h2, h2 a{
		font-size:			1rem;
	}
	h3, h3 a {
		font-size:			1rem;
	}
}


p {
	margin:						0;
	line-break:					strict;
	line-height:				1.8;
	overflow-wrap:				break-word;
	text-wrap:					pretty;
	word-break:					normal;
	width:						fit-content;
}
/* @media screen and (min-width:1px) and (max-width:800px) {
	p {
		line-height:				1.5;
	}
} */

a {
	color:						var(--color-text-secondary);
	text-decoration:			none;
}

a:link.news_link_text, a:link .news_link_text {
	color:						var(--color-text-secondary);
	font-weight:				bold;
	text-decoration:			none;
}
a:visited.news_link_text, a:visited .news_link_text {
	color:						var(--color-link-visited);
}
a:hover.news_link_text, a:hover .news_link_text {
	color:						var(--color-info-muted);
}
/* ------------------------------ */
/* id */


/* id */
/* ------------------------------ */
/* class */

/* スクリーンリーダーオンリー */
.sr_only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border-width: 0;
}

.flex {
	align-items:				center;
	display:					flex;
	flex-wrap:					wrap;
	gap:						0.5rem;
	justify-content:			center;
}

.page_header {
	width:						100%;
}

h1.page_title {
	height:						2.875rem;
	margin:						1.34rem 0 0.5rem 0;
	max-width:					var(--main-content-width);
	width:						100%;
}
@media screen and (min-width:1px) and (max-width:800px) {
	h1.page_title {
		font-size:				1.5rem;
		font-weight:			bold;
		margin:					0.5rem 0;
	}
}


.page_desc {
	font-size:					0.875rem;
}

/* コピーボタン */
.copy {
	background:					url(../img/icon/copy.png) no-repeat left bottom;
	background-size:			20px 20px;
	border:						none;
	display:					inline-block;
	padding:					0.25rem 0.5rem 0.25rem 1.5rem;
}
.copy:hover {
	background-color:			var(--color-background);
}

/* ダウンロードボタン */
.dl_pdf {
	background-color:	#8DEFFF;
	border:				solid 1px gray;
	border-radius:		5px;
	color:				black;
	font-size:			0.875rem;
	line-height:		1.25rem;
	margin-left:		10px;
	padding:			0 5px;
	text-decoration:	none;
	vertical-align:		top;
}



/* ドットの下線 */
.hide {
	display:					none;
}

/* ドットの下線 */
.dot {
	border-bottom:				dotted 2px gray;
	color:						inherit;
	text-decoration:			none;
}

/* スケルトン UI */
.skeleton {
	animation:					shimmer 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
	background-color:			var(--skeleton-background);
	background-image:			var(--skeleton-shimmer);
	background-size:			200% 100%;
	border-radius:				0.25rem;
}

/* アニメーションの定義 */
@keyframes shimmer {
	0% {
		background-position:	200% 0;
	}
	100% {
		background-position:	-200% 0;
	}
}

/* パンくずリスト */
.breadcrumb ol {
	display:			flex;
	flex-wrap:			wrap;
	list-style:			none;
	margin:				0;
	padding:			0;
	width:				fit-content;
}
.breadcrumb li {
	align-items:		center;
	display:			flex;
	font-size:			0.875rem;
}
.breadcrumb li + li::before {
	color:				var(--color-gray-400);
	content:			">";
	margin:				0 0.5em;
}
.breadcrumb li[aria-current="page"] span {
	color:				var(--color-gray-600);
	overflow:			hidden;
	text-overflow:		ellipsis;
	white-space:		nowrap;
	width:				10rem;
}
.breadcrumb a:hover {
	text-decoration:	underline;
}

/* 枠線 */
.border {
	border-collapse:	collapse;
}
.border td {
	border:				solid 1px gray;
	padding-left:		2px;
	padding-right:		2px;
}
.border tbody tr:hover {
	background-color:	#FDF9F3!important;
}

/* 左矢印マーク、右矢印マーク */
.backward_mark::before, .forward_mark::after {
	content:				"";
	background-color:		var(--color-gray-400);
	display:				inline-block;
	height:					1rem;
	width:					1rem;
}
.backward_mark::before {
	mask:					url("../img/icon/chevron_backward.svg") no-repeat center / contain;
	-webkit-mask:			url("../img/icon/chevron_backward.svg") no-repeat center / contain;
}
.forward_mark::after {
	mask:					url("../img/icon/chevron_forward.svg") no-repeat center / contain;
	-webkit-mask:			url("../img/icon/chevron_forward.svg") no-repeat center / contain;
}
.sec_ttl .forward_mark::after {
	background-color:		var(--color-text-secondary);
	height:					1.125rem;
	margin-left:			0.125rem;
	vertical-align:			-2px;
	width:					1.125rem;
}


.add_mark::before,
.check_mark::before {
	content:				"";
	background-color:		var(--color-gray-400);
	display:				inline-block;
	height:					1rem;
	width:					1rem;
}
.add_mark::before {
	mask:					url("../img/icon/add.svg") no-repeat center / contain;
	-webkit-mask:			url("../img/icon/add.svg") no-repeat center / contain;
}
.check_mark::before {
	mask:					url("../img/icon/check.svg") no-repeat center / contain;
	-webkit-mask:			url("../img/icon/check.svg") no-repeat center / contain;
}

/* 記事一覧 */
.news_list_ul {
	display:					flex;
	flex-direction:				column;

	/* フォーカス時のアウトライン用の余白 */
	gap:						2px;

	width:						100%;
}
.news_list_ul li:not(:first-child) {
	border-top:			1px solid var(--color-gray-100);
}
.news_list_ul li {
	display:					flex;
}
span.cat {
	display:					inline-block;
	font-size:					0.875rem;
	margin-left:				0.75em;
}
@media screen and (min-width:1px) and (max-width:800px) {
	span.cat {
		font-size:				0.75rem;
	}
}

/* パイプのような縦に区切る線 */
.vertical_bar::before {
	content:					"";
	background-color:			var(--color-gray-300);
	display:					inline-block;
	height:						1.5rem;
	margin:						0 10px;
	width:						1px;
}

/* ドロップダウンの ▼ アイコン */
.icon_arw_dropdown.active::after {
	transform:					rotate(180deg); /* 180度回転 */
}



/* ------------------------------ */
/* component（再利用する部品：ボタン、カード、通知、フォーム） */


/* カード | 共通 */
.card {
	align-items:				flex-start;
	backdrop-filter:			blur(16px);
	background-color:			rgba(255, 255, 255, 0.60);
	border:						1px solid rgba(255,255,255,0.75);
	/* border:						1px solid var(--color-gray-100); */
	border-radius:				0.5rem;
	box-shadow:					0 10px 30px rgba(0,0,0,0.06);
	flex-direction:				column;
	display:					flex;
	padding:					1rem;
	transition:					transform .3s cubic-bezier(0, 0, .5, 1);
	-webkit-backdrop-filter:	blur(16px);
}

/* ボタン | ユーザーにアクションを促すボタン。ログインなど。*/
.act_btn {
	background-color:		var(--color-text-inverse);
	border:					none;
	border-radius:			0.3125rem;
	box-shadow:				0 2px 4px rgba(0, 0, 0, 0.2);
	color:					var(--color-text-secondary);
	cursor:					pointer;
	font-size:				1rem;
	font-weight:			normal;
	padding:				0.5rem 1.125rem;
	transition:				all 0.2s ease;
}
.act_btn:hover {
	box-shadow:				0 3px 6px rgba(0, 0, 0, 0.3);
}
.act_btn:active {
	background-color:		#e0e2e5; /* クリック中にさらに背景をグレーにする */
	box-shadow:				0 1px 2px rgba(0, 0, 0, 0.1); /* 影を控えめに */
}

/* タブ | タブデザイン */
/* 以下のような HTML 構成にして、data- 属性の値を変更・指定すること。
	<div class="tab_section">
		<ul class="tab_btn_ul" role="tablist" data-group="SHIMEN-NAV">
			<li class="tab_btn active" role="tab" data-tab="NEWS">
				<h2>タブ１</h2>
			</li>
			<li class="tab_btn" role="tab" data-tab="SCRAP">
				<h2>タブ２</h2>
			</li>
		</ul>
		<div id="NEWS" class="tab_cont active" role="tabpanel">
			タブ１のコンテンツ内容
		</div>
		<div id="SCRAP" class="tab_cont" role="tabpanel">
			タブ２のコンテンツ内容
		</div>
	</div>
*/
.tab_section {
	width:					100%;
}
.tab_btn_ul {
	border-bottom:			1px solid var(--color-gray-200);
	display:				flex;

	/* 文字１行 1.5em + padding 1rem + border 2px */
	min-height:				calc(1.5em + 1rem);
}
.tab_btn {
	align-items:			center;
	background-color:		transparent;
	border:					none;
	border-bottom:			2px solid transparent;
	cursor:					pointer;
	display:				flex;
	font-size:				1rem;
	font-weight:			bold;
	justify-content:		center;
	padding:				0.5rem 1rem;
	transition:				background 0.3s;
}
.tab_btn.active {
	border-bottom:			2px solid var(--color-primary-700);
}
.tab_cont {
	border-top:				none;
	display:				none;
	flex-direction:			column;
	justify-content:		flex-start;
	margin-top:				0.75rem;
	width:					100%;
}
@media screen and (min-width:1px) and (max-width:960px) {
	.tab_cont {
		margin:				1.25rem 0;
	}
}
.tab_cont.active {
	display:				flex;
}

.tab_cont_ul {
	display:				flex;
	flex-direction:			column;
	gap:					0.5rem;
	max-width:				100%;
	width:					100%;
}
.tab_cont_ul li:not(:first-child) {
	border-top:				1px solid var(--color-gray-100);
	display:				flex;
	padding-top:			0.5rem;
}
.tab_cont_ul h3 {
	font-size:				1rem;
}


/* component */
/* ------------------------------ */
/* layout（レイアウト）*/

.cont_wrap {
	background-color:			white;
	height:						100%;
	margin:						0 auto;
	min-height:					calc(100% - var(--header-height));
	max-width:					var(--main-content-width);
	padding:					1.5rem;
	width:						100%;
}
@media screen and (min-width:1px) and (max-width:960px) {
	.cont_wrap {
		display:				flex;
		flex-direction:			column;
		margin:					0;
		padding:				2.5rem 1rem;
		width:					100%;
	}
}

/* layout */
/* ------------------------------ */
/* icon */

/* アイコン | 共通 */
/* アイコンをボタンとして使用する時 */
.icon {
	height:					1.75rem;
	width:					1.75rem;
}
@media screen and (min-width:1px) and (max-width:800px) {
	.icon {
		/* height:				1.5rem;
		width:				1.5rem; */
	}
}
.icon_wrap {
	align-items:			center;
	background-color:		white;
	border-radius:			0.25rem;
	cursor:					pointer;
	display:				flex;
	height:					3rem;
	justify-content:		center;
	width:					3rem;
}
@media screen and (min-width:1px) and (max-width:800px) {
	.icon_wrap {
		border:				1px solid var(--color-gray-200);
	}
}
.icon_wrap:hover {
	background-color:	var(--color-primary-100);
}
.icon_wrap:hover icon {
	filter:				var(--color-primary-600);
}


/* アイコン | 外部リンク（external-link）であることを表す矢印 */
/* アイコンを付けたい外側の div などに指定する */
.icon_ext_link::after {
	content:					"";
	background-color:			var(--color-gray-400);
	display:					inline-block;
	height:						0.875rem;
	width:						0.875rem;

	mask:						url("../img/icon/arrow_outward.svg") no-repeat center / contain;
	-webkit-mask:				url("../img/icon/arrow_outward.svg") no-repeat center / contain;
}
.sec_ttl .icon_ext_link::after {
	margin-left:				0.25rem;
	vertical-align:				-2px;
}

/* icon */
/* ------------------------------ */
/* login */

.login_wnd {
	background-color:	white;
	border-radius:		0.5rem;
	display:			none;
	height:				auto;
	max-width:			90%;
	left:				50%;
	padding:			1rem;
	position:			fixed;
	transform:			translate(-50%, -50%);
	top:				50%;
	width:				28rem;
	z-index:			10;
}
.login_wnd a {
	width:				fit-content;
}

.login_header {
	display:			flex;
	flex-direction:		column;
	margin:				0 0 1.5rem 0;
}
.login_title {
	font-size:			1.2rem;
	font-weight:		600;
}
.login_note {
	color:				var(--color-gray-700);
	font-size:			0.875rem;
	text-decoration:	none;
}
@media screen and (min-width:1px) and (max-width:800px) {
	.login_note {
		font-size:			0.6875rem;
	}
}
.login_cont {
	display:			flex;
	flex-direction:		column;
	gap:				1.25rem;
}
.login_pw_label {
	display:			block;
	font-size:			0.875rem;
	font-weight:		600;
	margin:				0 0 0.5rem 0;
}
@media screen and (min-width:1px) and (max-width:800px) {
	.login_pw_label {
		display:			block;
		font-size:			0.75rem;
		font-weight:		600;
		margin:				0 0 0.1rem 0;
	}
}
#password {
	border:				solid 1px var(--color-gray-600);
	border-radius:		0.5rem;
	padding:			0.75rem;
	width:				100%;
}

.login_agree_label {
	align-items:		flex-start;
	cursor:				pointer;
	display:			flex;
	gap:				10px;
}
#login_agree {
	height:				1.125rem;
	margin-top:			0.25rem;
	width:				1.125rem;
}
.login_agree_span {
	line-height:		1.5;
	font-size:			0.875rem;
	font-weight:		600;
}
@media screen and (min-width:1px) and (max-width:800px) {
	.login_agree_span {
		font-size:			0.75rem;
	}
}
.login_agree_pdf a {
	color:				var(--color-info-muted);
	display:			block;
	font-size:			0.875rem;
}
@media screen and (min-width:1px) and (max-width:800px) {
	.login_agree_pdf a {
		font-size:			0.75rem;
	}
}

#login_submit_btn:disabled {
	background-color:	var(--color-primary-300);
	cursor:				not-allowed;
}
#login_submit_btn {
	background-color:	var(--color-info-bold);
	border-radius:		0.5rem;
	color:				var(--color-text-inverse);
	font-size:			1.125rem;
	font-weight:		600;
	padding:			0.5rem;
	transition:			background 0.2s ease;
	width:				100%;
}
@media screen and (min-width:1px) and (max-width:800px) {
	#login_submit_btn {
		border-radius:		0.5rem;
		font-size:			1rem;
		font-weight:		600;
		padding:			0.5rem;
	}
}
.login_footer {
	align-items:		center;
	border-top:			1px solid var(--color-gray-200);
	display:			flex;
	flex-direction:		column;
	gap:				1rem;
	padding:			1rem 0 0 0;
}
.login_msg {
	height:				1.2rem;
	line-height:		1.2rem;
	margin:				1rem 0;
}
#login_err {
	color:				red;
}
.login_wait {
	color:				gray;
	display:			none;
}

/* --- パスワード入力ラッパー --- */
.password_wrap {
	position:				relative;
	display:				flex;
	align-items:			center;
}

.password_wrap input {
	width:					100%;
	padding:				10px 44px 10px 14px; /* 右端にアイコン分の余白 */
	border:					1.5px solid var(--color-primary-300);
	border-radius:			8px;
	font-size:				0.9375rem;
	color:					var(--color-text-primary);
	background:				var(--color-primary-100);
	outline:				none;
	transition:				border-color 0.18s, box-shadow 0.18s, background 0.18s;
	line-height:			1.5;
}

.password_wrap input:focus {
	border-color:			var(--color-primary-600);
	background:				#fff;
	box-shadow:				0 0 0 3px rgba(4, 43, 136, 0.12);
}

/* --- パスワードを表示するボタン --- */
.show_pw_btn {
	position:				absolute;
	right:					0;
	top:					50%;
	transform:				translateY(-50%);
	width:					42px;
	height:					100%;
	display:				flex;
	align-items:			center;
	justify-content:		center;
	background:				none;
	border:					none;
	cursor:					pointer;
	color:					var(--color-primary-400);
	padding:				0;
	border-radius:			0 8px 8px 0;
	transition:				color 0.18s;
	/* クリック領域を広く */
	min-height:				40px;
}

.show_pw_btn:hover {
	color:					var(--color-primary-600);
}

.show_pw_btn:focus_visible {
	outline:				2px solid var(--color-primary-600);
	outline-offset:			-2px;
	border-radius:			0 8px 8px 0;
}

.show_pw_btn svg {
	width:					20px;
	height:					20px;
	display:				block;
	pointer-events:			none;
	flex-shrink:			0;
}

/* 表示中アイコンは非表示、非表示中アイコンを表示 */
.show_pw_btn .icon_eye_off {
	display: none;
}
.show_pw_btn .icon_eye {
	display: block;
}

/* パスワード表示状態のとき */
.show_pw_btn.is_visible .icon_eye_off {
	display: block;
}
.show_pw_btn.is_visible .icon_eye {
	display: none;
}

/* login */
/* ------------------------------ */
/* paywall */

/* ===== ペイウォールラッパー ===== */
.pw-wall {
	position: relative;
}

/* ブロックされたコンテンツ（ぼかし＋完全ロック） */
.pw-wall__content {
	filter: blur(6px);
	user-select: none;
	pointer-events: none;
	opacity: 0.45;
	transition: filter 0.3s;
}

/* オーバーレイ全体 */
.pw-wall__overlay {
	align-items:				center;

	/* 上部は薄く、中央以降は完全に塗る */
	background:					linear-gradient(
									to bottom,
									rgba(249, 249, 249, 0.0) 0%,
									rgba(249, 249, 249, 0.92) 18%,
									rgba(249, 249, 249, 1.0) 30%
								);

	display:					flex;
	height:						fit-content;
	inset:						0;
	justify-content:			center;
	padding:					5rem 0 2rem 0;
}

/* ===== ペイウォールカード ===== */
.pw-card {
	background-color:			white;
	border:						1px solid var(--color-primary-200);
	border-top:					3px solid var(--color-primary-600);
	border-radius:				6px;
	box-shadow:					0 4px 24px rgba(4, 43, 136, 0.08), 0 1px 4px rgba(0, 0, 0, 0.04);
	margin:						0 auto;
	max-width:					480px;
	padding:					2.2rem 2.4rem 2rem;
	text-align:					center;
	width:						100%;
}

.pw-card__icon {
	align-items:				center;
	background:					var(--color-primary-100);
	border-radius:				50%;
	display:					flex;
	height:						48px;
	justify-content:			center;
	margin:						0 auto 1.2rem;
	width:						48px;
}

.pw-card__icon svg {
	color:						var(--color-primary-600);
}

.pw-card__heading {
	color: var(--color-text-primary);
	font-size:					1.15rem;
	font-weight:				700;
	letter-spacing:				0.03em;
	line-height:				1.6;
	margin-bottom:				0.75rem;
}

.pw-card__body {
	color:						var(--color-gray-500);
	font-size:					0.83rem;
	margin-bottom:				1.6rem;
	letter-spacing:				0.03em;
	width:						100%;
}

/* ボタングループ */
.pw-card__actions {
	display:					flex;
	flex-direction:				column;
	gap:						0.65rem;
}

.pw-btn {
	align-items:				center;
	border:						none;
	border-radius:				4px;
	cursor:						pointer;
	display:					inline-flex;
	font-size:					0.855rem;
	font-weight:				500;
	gap:						0.45rem;
	justify-content:			center;
	letter-spacing:				0.08em;
	padding:					0.8rem 1.5rem;
	text-decoration:			none;
	transition:					background 0.16s, box-shadow 0.16s, transform 0.13s, border-color 0.16s;
}

.pw-btn:hover {
	transform:					translateY(-1px);
}

.pw-btn--primary {
	background:					var(--color-warning-muted);
	color:						var(--color-text-inverse);
	box-shadow:					0 2px 8px rgba(4, 43, 136, 0.22);
}

.pw-btn--primary:hover {
	background:					var(--color-warning-bold);
	box-shadow:					0 4px 14px rgba(4, 43, 136, 0.32);
}

.pw-btn--ghost {
	background:					transparent;
	border:						1.5px solid var(--color-primary-300);
	color:						var(--color-primary-600);
}

.pw-btn--ghost:hover {
	background:					var(--color-primary-100);
	border-color:				var(--color-primary-600);
}

/* 区切り */
.pw-card__divider {
	align-items:				center;
	display:					flex;
	gap:						0.75rem;
	margin:						0.2rem 0;
}

.pw-card__divider::before,
.pw-card__divider::after {
	background:					var(--color-gray-200);
	content:					'';
	flex:						1;
	height:						1px;
}

.pw-card__divider-text {
	color:						var(--color-gray-400);
	font-size:					0.7rem;
	white-space:				nowrap;
}

/* プラン案内 */
.pw-card__plan {
	align-items:				center;
	color:						var(--color-gray-400);
	display:					flex;
	font-size:					0.75rem;
	gap:						0.5rem;
	justify-content:			center;
	margin-top:					1.2rem;
}

.pw-card__plan a {
	color:						var(--color-primary-500);
	text-decoration:			underline;
	text-underline-offset:		2px;
}

/* ===== ダミーコンテンツ（表・グラフのスケルトン） ===== */
.pw-dummy {
	margin-bottom:				2rem;
}

.pw-dummy__subtitle {
	color:						var(--color-gray-700);
	font-size:					0.9rem;
	font-weight:				700;
	letter-spacing:				0.03em;
	margin-bottom:				0.8rem;
}

/* 表スケルトン */
.pw-dummy-table {
	border-collapse:			collapse;
	font-size:					0.82rem;
	margin-bottom:				2rem;
	width:						100%;
}

.pw-dummy-table th {
	background:					var(--color-primary-700);
	color:						var(--color-text-inverse);
	font-weight:				500;
	letter-spacing:				0.05em;
	padding:					0.65rem 1rem;
	text-align:					left;
}

.pw-dummy-table td {
	border-bottom:				1px solid var(--color-gray-200);
	color:						var(--color-gray-700);
	padding:					0.6rem 1rem;
}

.pw-dummy-table tr:nth-child(even) td {
	background:					var(--color-gray-100);
}

/* グラフバースケルトン */
.pw-dummy-chart {
	align-items:				flex-end;
	display:					flex;
	gap:						0.6rem;
	height:						120px;
	margin-bottom:				2rem;
	padding:					0.5rem 0;
}

.pw-dummy-bar {
	background:					var(--color-primary-400);
	border-radius:				3px 3px 0 0;
	flex:						1;
	opacity:					0.6;
}

.pw-dummy-bar:nth-child(2) {
	background:					var(--color-primary-500);
	opacity:					0.7;
}
.pw-dummy-bar:nth-child(4) {
	background:					var(--color-primary-600);
	opacity:					0.8;
}
.pw-dummy-bar:nth-child(6) {
	background:					var(--color-primary-700);
	opacity:					0.75;
}

/* ===== レスポンシブ ===== */
@media (max-width: 540px) {
.pw-card {
	padding: 1.6rem 1.3rem 1.5rem;
}
.pw-article__meta {
	gap: 0.8rem;
}
}

/* paywall */
/* ------------------------------ */

[hidden="until-found"] {
	padding:					0;
	margin:						0;
	border:						0;
}