@charset "UTF-8";

/*
 * ハタラボ 追加スタイル
 *
 * Cocoonのクラス名と衝突させないため、すべて hataralab- プレフィックスを付ける。
 * 読者の大半はスマートフォンのため、モバイルの見え方を基準に組む。
 */

/* 文字色はすべて背景とのコントラスト比4.5以上（WCAG AA）。PageSpeed Insightsの指摘で調整（2026年9月） */
:root {
	--hataralab-summary-bg: #f4f8fb;
	--hataralab-summary-border: #38729e;
	--hataralab-survey-bg: #f7f5f0;
	--hataralab-survey-border: #b08a3f;
	--hataralab-text: #333;
	--hataralab-text-weak: #666;
}

/* ---------------------------------------------
 * 要約ボックス [summary_box]
 * --------------------------------------------- */

.hataralab-summary {
	margin: 1.8em 0;
	padding: 1.1em 1.2em;
	background: var(--hataralab-summary-bg);
	border: 1px solid #d7e3ec;
	border-left: 4px solid var(--hataralab-summary-border);
	border-radius: 4px;
}

.hataralab-summary__title {
	margin: 0 0 0.7em;
	font-size: 1.02em;
	font-weight: 700;
	color: var(--hataralab-summary-border);
	line-height: 1.5;
}

.hataralab-summary__body ul,
.hataralab-summary__body ol {
	margin: 0;
	padding-left: 1.3em;
}

/* 要点は1項目ずつ読ませたいので行間を詰めない。 */
.hataralab-summary__body li {
	margin-bottom: 0.55em;
	line-height: 1.75;
}

.hataralab-summary__body li:last-child {
	margin-bottom: 0;
}

.hataralab-summary__body p:last-child {
	margin-bottom: 0;
}

/* ---------------------------------------------
 * 独自調査データ [survey_data]
 * --------------------------------------------- */

.hataralab-survey {
	margin: 1.8em 0;
	padding: 1.1em 1.2em;
	background: var(--hataralab-survey-bg);
	border: 1px solid #e3dbc9;
	border-left: 4px solid var(--hataralab-survey-border);
	border-radius: 4px;
}

.hataralab-survey__title {
	margin: 0 0 0.6em;
	font-size: 1.02em;
	font-weight: 700;
	line-height: 1.5;
}

.hataralab-survey__meta {
	margin: 0;
	font-size: 0.92em;
	color: var(--hataralab-text-weak);
}

.hataralab-survey__row {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4em;
	margin-bottom: 0.3em;
}

.hataralab-survey__row:last-child {
	margin-bottom: 0;
}

.hataralab-survey__row dt {
	flex: 0 0 5.5em;
	font-weight: 700;
}

.hataralab-survey__row dd {
	flex: 1 1 auto;
	margin: 0;
}

/* ---------------------------------------------
 * 表（比較表・調査結果表）
 *
 * 入稿スクリプトが全テーブルの figure に hataralab-table を付ける。
 * スマホでは列を潰さず横スクロールさせ、1列目（項目名・サービス名）を固定する。
 * --------------------------------------------- */

.hataralab-table {
	margin: 1.6em 0;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

.hataralab-table table {
	width: 100%;
	min-width: 540px;
	border-collapse: collapse;
	font-size: 0.93em;
	line-height: 1.6;
}

.hataralab-table th,
.hataralab-table td {
	padding: 0.6em 0.7em;
	border: 1px solid #dde3e8;
	vertical-align: top;
	text-align: left;
}

.hataralab-table thead th {
	background: var(--hataralab-summary-bg);
	font-weight: 700;
	white-space: nowrap;
}

/* 横スクロールしても何の行か分かるよう、1列目を固定する。 */
.hataralab-table th:first-child,
.hataralab-table td:first-child {
	position: sticky;
	left: 0;
	z-index: 1;
	background: #fff;
	font-weight: 700;
}

.hataralab-table thead th:first-child {
	background: var(--hataralab-summary-bg);
}

/* 表の出典・時点（figcaption） */
.hataralab-table figcaption {
	margin-top: 0.5em;
	font-size: 0.82em;
	color: #555;
	/* Cocoonは figcaption を opacity: .8 にしており、色が薄まってコントラスト不足になる */
	opacity: 1;
	text-align: left;
}

/* ---------------------------------------------
 * CTAボックス [cta_box]
 * --------------------------------------------- */

.hataralab-cta {
	margin: 2em 0;
	padding: 1.2em;
	border: 2px solid #ddd;
	border-radius: 6px;
	background: #fff;
}

.hataralab-cta__label {
	margin: 0 0 0.4em;
	font-size: 0.85em;
	font-weight: 700;
	letter-spacing: 0.02em;
}

.hataralab-cta__icon {
	margin-right: 0.3em;
}

.hataralab-cta__service {
	margin: 0 0 0.4em;
	font-size: 1.15em;
	font-weight: 700;
	line-height: 1.5;
	color: var(--hataralab-text);
}

.hataralab-cta__point {
	margin: 0 0 1em;
	font-size: 0.95em;
	line-height: 1.7;
	color: var(--hataralab-text-weak);
}

/*
 * ボタンは画面幅いっぱい・タップ領域48px以上を確保する。
 * スマホでの誤タップと押しにくさを避けるため。
 */
.hataralab-cta__button {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 48px;
	padding: 0.7em 1em;
	border-radius: 6px;
	font-weight: 700;
	font-size: 1.02em;
	line-height: 1.4;
	text-align: center;
	text-decoration: none;
	color: #fff !important;
}

.hataralab-cta__button:hover,
.hataralab-cta__button:focus {
	opacity: 0.88;
	text-decoration: none;
}

/* type別の配色 */

.hataralab-cta--shushoku {
	border-color: #38729e;
}

.hataralab-cta--shushoku .hataralab-cta__label {
	color: #38729e;
}

.hataralab-cta--shushoku .hataralab-cta__button {
	background: #38729e;
}

.hataralab-cta--resort {
	border-color: #257f73;
}

.hataralab-cta--resort .hataralab-cta__label {
	color: #257f73;
}

.hataralab-cta--resort .hataralab-cta__button {
	background: #257f73;
}

.hataralab-cta--chiken {
	border-color: #7d67a4;
}

.hataralab-cta--chiken .hataralab-cta__label {
	color: #7d67a4;
}

.hataralab-cta--chiken .hataralab-cta__button {
	background: #7d67a4;
}