@charset "UTF-8";
/* =========================================================
 * ぴったり除草剤ナビ
 *
 * - スマホファースト：ベース＝スマホ（320〜430px、393px基準）
 *   → 768px〜 タブレット → 1024px〜 PC
 * - クラスはすべて hn- で始まる専用クラス（SWELLの既存CSSを壊さない）
 * - !important は使用しない
 * - 余白は 4px 基準
 * ======================================================= */

:root {
	--hn-blue: #0877e8;
	--hn-blue-dark: #0662c2;
	--hn-blue-deep: #0a57b8;
	--hn-navy: #0a2a55;
	--hn-light: #edf7ff;
	--hn-light-2: #f5faff;
	--hn-white: #fff;
	--hn-green: #4dbe68;
	--hn-green-dark: #2e8a47;
	--hn-red: #f05a3c;
	--hn-red-text: #d63d1f;
	--hn-text: #1b2b41;
	--hn-muted: #56667b;
	--hn-border: #dce8f5;
	--hn-border-strong: #b9d3ee;
	--hn-radius: calc(16 * var(--hn-u));
	--hn-radius-sm: calc(12 * var(--hn-u));
	--hn-radius-lg: calc(20 * var(--hn-u));
	--hn-shadow: 0 2px calc(10 * var(--hn-u)) rgba(10, 42, 85, 0.06);
	--hn-shadow-lg: 0 calc(8 * var(--hn-u)) calc(24 * var(--hn-u)) rgba(8, 119, 232, 0.25);
	--hn-tap: max(44px, calc(48 * var(--hn-u)));
	--hn-max: calc(1180 * var(--hn-u));
	--hn-font: -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans JP", Meiryo, sans-serif;
}

/* =========================================================
 * 画面幅に合わせて全体を同じ比率で拡大・縮小するための単位
 *   --hn-u = デザイン上の「1px」の大きさ
 *   スマホ：393px幅で1px（320px→約0.81px、430px→約1.09px）
 *   タブレット：900px幅で1px
 *   PC    ：1800px幅で1px（＝1440px幅で0.8px。以前の80%の大きさ）
 * タップ領域は最低44px、入力欄の文字は最低16px、文字は最低11pxを保ちます。
 * ======================================================= */
:root {
	--hn-u: clamp(0.8px, calc(100vw / 393), 1.12px);
}

@media (min-width: 768px) {
	:root {
		--hn-u: clamp(0.9px, calc(100vw / 900), 1.1px);
	}
}

@media (min-width: 1024px) {
	:root {
		/* PCは「1440px幅で0.8px」＝以前の80%の大きさ（1280px→約0.71px、1920px→約1.07px） */
		--hn-u: clamp(0.6px, calc(100vw / 1800), 1px);
	}
}

/* ---------- ページ全体（hn- テンプレートのみ） ---------- */

/* このテーマのページでは、SWELLのコンテンツ最大幅（固定px）を外し、
   中身の最大幅は --hn-max（画面幅に比例）で決める */
#body_wrap.hn-page #content.l-container {
	max-width: none;
}

/* SWELLはトップに「.top #content { padding-top: 4em }」を付けるため、IDを重ねて確実に0にする
   （SWELLは body_class を #body_wrap に付けます） */
.hn-page .l-content,
#body_wrap.hn-page #content {
	padding-top: 0;
}

.hn-hide-swell-breadcrumb #breadcrumb {
	display: none;
}

/* =========================================================
 * 専用ヘッダー（SWELLのヘッダーを隠すテンプレート）
 * ======================================================= */

.hn-hide-swell-header #header,
.hn-hide-swell-header #fix_header {
	display: none;
}

.hn-topbar-space {
	height: max(44px, calc(56 * var(--hn-u)));
	/* SWELLのコンテンツ余白の外側まで */
	margin: 0 calc(50% - 50vw);
}

.hn-topbar {
	position: fixed;
	top: var(--swl-adminbarH, 0px);
	left: 0;
	right: 0;
	z-index: 100; /* SWELLのスマホメニュー・検索モーダルより下 */
	border-bottom: 1px solid var(--hn-border);
	background: rgba(255, 255, 255, 0.96);
	-webkit-backdrop-filter: saturate(1.4) blur(calc(8 * var(--hn-u)));
	backdrop-filter: saturate(1.4) blur(calc(8 * var(--hn-u)));
	font-family: var(--hn-font);
}

.hn-topbar__inner {
	display: flex;
	align-items: center;
	gap: calc(16 * var(--hn-u));
	max-width: var(--hn-max);
	height: max(44px, calc(56 * var(--hn-u)));
	margin: 0 auto;
	padding: 0 calc(8 * var(--hn-u)) 0 calc(16 * var(--hn-u));
}

.hn-topbar__logo {
	display: flex;
	align-items: center;
	min-width: 0;
	height: 100%;
	margin-right: auto;
	color: var(--hn-navy);
	text-decoration: none;
}

.hn-topbar__logo img,
.hn-topbar__logo-img {
	display: block;
	width: auto;
	max-width: calc(220 * var(--hn-u));
	height: calc(34 * var(--hn-u));
	object-fit: contain;
	object-position: left center;
}

.hn-topbar__logo-text {
	color: var(--hn-blue);
	font-size: max(11px, calc(19 * var(--hn-u)));
	font-weight: 900;
	letter-spacing: 0.02em;
	white-space: nowrap;
}

.hn-topbar__actions {
	display: flex;
	align-items: center;
	flex-shrink: 0;
}

.hn-topbar .hn-topbar__btn {
	display: grid;
	place-items: center;
	width: max(44px, calc(44 * var(--hn-u)));
	height: max(44px, calc(44 * var(--hn-u)));
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: transparent;
	color: var(--hn-navy);
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
}

.hn-topbar .hn-topbar__btn:hover {
	background: var(--hn-light);
}

.hn-topbar__btn .hn-icon {
	width: calc(26 * var(--hn-u));
	height: calc(26 * var(--hn-u));
}

.hn-topbar__btn:focus-visible {
	outline: calc(3 * var(--hn-u)) solid rgba(8, 119, 232, 0.45);
	outline-offset: 2px;
}

/* PCだけで使う部品（スマホでは非表示） */
.hn-topbar--pc-only,
.hn-topbar__search,
.hn-searchbox__pcicon,
.hn-searchbox__note,
.hn-search__submit-pc,
.hn-loc__arrow {
	display: none;
}

/* SWELLのスマホメニューを開いている間は後ろに下げる */
[data-spmenu="opened"] .hn-topbar {
	z-index: 1;
}

/* PCのグローバルナビ（スマホでは非表示） */
.hn-topbar__nav {
	display: none;
}

/* トップテンプレートでは SWELL のメインビジュアル・記事スライダーを出さない
 *（読み込み自体を止めるには カスタマイザー ＞ トップページ で「表示しない」を推奨） */
.hn-page--front #main_visual,
.hn-page--front .p-mainVisual,
.hn-page--front #post_slider,
.hn-page--front .p-postSlider {
	display: none;
}

.hn-price-compare {
	scroll-margin-top: calc(80 * var(--hn-u));
}

.hn-main {
	color: var(--hn-text);
	font-family: var(--hn-font);
	font-size: max(11px, calc(16 * var(--hn-u)));
	line-height: 1.7;
	max-width: var(--hn-max);
	margin: 0 auto;
	padding-bottom: calc(48 * var(--hn-u));
}

.hn-main *,
.hn-relprod * {
	box-sizing: border-box;
}

.hn-main a {
	color: inherit;
	text-decoration: none;
}

.hn-main img {
	max-width: 100%;
	height: auto;
}

/* 要素の初期化。
   詳細度を「要素1つ分」に抑え、各パーツのクラスで指定した余白が必ず優先されるようにする
  （:where で .hn-main の詳細度を0に） */
:where(.hn-main) :is(ul, ol) {
	list-style: none;
	margin: 0;
	padding: 0;
}

:where(.hn-main) :is(h1, h2, h3, p, dl, dd, fieldset) {
	margin: 0;
}

:where(.hn-main) fieldset {
	border: 0;
	padding: 0;
	min-width: 0;
}

.hn-icon {
	width: 1.25em;
	height: 1.25em;
	flex-shrink: 0;
	vertical-align: middle;
}

.hn-sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.hn-main :focus-visible,
.hn-relprod :focus-visible {
	outline: calc(3 * var(--hn-u)) solid rgba(8, 119, 232, 0.45);
	outline-offset: 2px;
}

.hn-main .hn-nojs-only {
	display: none;
}

html:not(.hn-js) .hn-main .hn-nojs-only {
	display: inline-flex;
}

/* ---------- セクション ---------- */

.hn-section {
	margin-top: calc(40 * var(--hn-u));
}

.hn-sec-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: calc(12 * var(--hn-u));
	margin-bottom: calc(16 * var(--hn-u));
}

.hn-main .hn-sec-title {
	display: flex;
	align-items: center;
	gap: calc(8 * var(--hn-u));
	color: var(--hn-navy);
	font-size: max(11px, calc(20 * var(--hn-u)));
	font-weight: 800;
	line-height: 1.4;
	letter-spacing: 0.02em;
	margin-bottom: calc(16 * var(--hn-u));
	padding: 0;
	background: none;
	border: 0;
}

.hn-sec-head .hn-sec-title {
	margin-bottom: 0;
}

.hn-sec-title .hn-icon {
	color: var(--hn-blue);
}

.hn-main .hn-sec-more {
	display: inline-flex;
	align-items: center;
	gap: 2px;
	min-height: max(44px, calc(44 * var(--hn-u)));
	padding: 0 calc(4 * var(--hn-u));
	color: var(--hn-blue);
	font-size: max(11px, calc(15 * var(--hn-u)));
	font-weight: 700;
	white-space: nowrap;
}

.hn-sec-more .hn-icon {
	width: calc(18 * var(--hn-u));
	height: calc(18 * var(--hn-u));
}

.hn-note {
	margin-top: calc(12 * var(--hn-u));
	color: var(--hn-muted);
	font-size: max(11px, calc(13 * var(--hn-u)));
	line-height: 1.7;
}

.hn-empty {
	padding: calc(20 * var(--hn-u));
	border: 1px dashed var(--hn-border-strong);
	border-radius: var(--hn-radius-sm);
	color: var(--hn-muted);
	font-size: max(11px, calc(15 * var(--hn-u)));
	text-align: center;
}

/* ---------- ボタン ---------- */

.hn-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: calc(6 * var(--hn-u));
	min-height: var(--hn-tap);
	padding: calc(10 * var(--hn-u)) calc(20 * var(--hn-u));
	border: 2px solid transparent;
	border-radius: calc(999 * var(--hn-u));
	font-family: inherit;
	font-size: max(11px, calc(16 * var(--hn-u)));
	font-weight: 700;
	line-height: 1.3;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	transition: background-color 0.15s, box-shadow 0.15s, transform 0.1s;
	-webkit-tap-highlight-color: transparent;
}

.hn-btn:active {
	transform: translateY(1px);
}

.hn-btn .hn-icon {
	width: calc(18 * var(--hn-u));
	height: calc(18 * var(--hn-u));
}

.hn-main .hn-btn--primary,
.hn-relprod .hn-btn--primary {
	background: var(--hn-blue);
	color: var(--hn-white);
	box-shadow: 0 calc(4 * var(--hn-u)) calc(12 * var(--hn-u)) rgba(8, 119, 232, 0.25);
}

.hn-main .hn-btn--primary:hover,
.hn-relprod .hn-btn--primary:hover {
	background: var(--hn-blue-dark);
}

.hn-main .hn-btn--outline {
	background: var(--hn-white);
	border-color: var(--hn-border-strong);
	color: var(--hn-blue);
}

.hn-main .hn-btn--outline:hover {
	border-color: var(--hn-blue);
	background: var(--hn-light-2);
}

.hn-main .hn-btn--ghost {
	background: transparent;
	color: var(--hn-muted);
}

.hn-btn--block {
	display: flex;
	width: 100%;
}

.hn-btn--xl {
	min-height: max(44px, calc(56 * var(--hn-u)));
	font-size: max(11px, calc(17 * var(--hn-u)));
}

/* ---------- 価格・タグ・チップ ---------- */

.hn-price {
	color: var(--hn-red-text);
	font-size: max(11px, calc(22 * var(--hn-u)));
	font-weight: 800;
	line-height: 1.2;
	font-feature-settings: "palt";
	letter-spacing: 0.01em;
	white-space: nowrap;
}

.hn-price small {
	margin-left: 1px;
	font-size: max(11px, calc(13 * var(--hn-u)));
	font-weight: 700;
}

.hn-price--lg {
	font-size: max(11px, calc(30 * var(--hn-u)));
}

.hn-price--lg small {
	font-size: max(11px, calc(15 * var(--hn-u)));
}

.hn-price--none {
	color: var(--hn-muted);
	font-size: max(11px, calc(15 * var(--hn-u)));
	font-weight: 700;
}

.hn-tags {
	display: flex;
	flex-wrap: wrap;
	gap: calc(6 * var(--hn-u));
}

.hn-tag {
	display: inline-flex;
	align-items: center;
	padding: calc(3 * var(--hn-u)) calc(10 * var(--hn-u));
	border-radius: calc(999 * var(--hn-u));
	background: var(--hn-light);
	color: var(--hn-blue-deep);
	font-size: max(11px, calc(13 * var(--hn-u)));
	font-weight: 700;
	line-height: 1.5;
}

.hn-chips {
	display: flex;
	flex-wrap: wrap;
	gap: calc(8 * var(--hn-u));
	margin-bottom: calc(16 * var(--hn-u));
}

.hn-chip {
	display: inline-flex;
	align-items: center;
	gap: calc(4 * var(--hn-u));
	min-height: calc(36 * var(--hn-u));
	padding: calc(4 * var(--hn-u)) calc(14 * var(--hn-u));
	border-radius: calc(999 * var(--hn-u));
	background: var(--hn-light);
	color: var(--hn-blue-deep);
	font-size: max(11px, calc(14 * var(--hn-u)));
	font-weight: 700;
}

.hn-main .hn-chip--removable {
	min-height: max(44px, calc(44 * var(--hn-u)));
	padding-right: calc(10 * var(--hn-u));
	border: 1px solid var(--hn-border-strong);
	background: var(--hn-white);
}

.hn-chip--removable .hn-icon {
	width: calc(16 * var(--hn-u));
	height: calc(16 * var(--hn-u));
	color: var(--hn-muted);
}

.hn-badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: calc(22 * var(--hn-u));
	height: calc(22 * var(--hn-u));
	padding: 0 calc(6 * var(--hn-u));
	border-radius: calc(999 * var(--hn-u));
	background: var(--hn-blue);
	color: var(--hn-white);
	font-size: max(11px, calc(13 * var(--hn-u)));
	line-height: 1;
}

/* =========================================================
 * トップ：ファーストビュー
 * ======================================================= */

.hn-hero {
	position: relative;
	/* スマホは画面幅いっぱい */
	margin: 0 calc(50% - 50vw);
	padding: calc(24 * var(--hn-u)) calc(16 * var(--hn-u)) calc(18 * var(--hn-u));
	overflow: hidden;
	background: var(--hn-light);
}

.hn-hero__bg {
	position: absolute;
	inset: 0;
}

/* 文字を読みやすくするための白いグラデーション（左と下） */
.hn-hero__bg::after {
	content: "";
	position: absolute;
	inset: 0;
	background:
		linear-gradient(100deg, rgba(255, 255, 255, 0.88) 0%, rgba(255, 255, 255, 0.62) 42%, rgba(255, 255, 255, 0) 72%),
		linear-gradient(0deg, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0.85) 18%, rgba(255, 255, 255, 0) 42%);
}

.hn-main .hn-hero__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 65% 30%;
}

.hn-hero__inner {
	position: relative;
	z-index: 1;
	max-width: calc(600 * var(--hn-u));
	padding-bottom: calc(8 * var(--hn-u));
}

/* 手書き風のキャッチ */
.hn-hero__catch {
	display: inline-flex;
	flex-direction: column;
	margin: 0 0 calc(10 * var(--hn-u)) -2px;
	color: var(--hn-navy);
	font-family: "Yomogi", "Klee One", "Hiragino Maru Gothic ProN", var(--hn-font);
	font-size: max(11px, calc(17 * var(--hn-u)));
	font-weight: 700;
	line-height: 1.35;
	transform: rotate(-7deg);
	transform-origin: left bottom;
}

.hn-hero__catch span + span {
	padding-left: 0.9em;
}

.hn-main .hn-hero__title {
	display: flex;
	flex-direction: column;
	color: var(--hn-navy);
	font-size: clamp(calc(28 * var(--hn-u)), 8.4vw, calc(36 * var(--hn-u)));
	font-weight: 900;
	line-height: 1.38;
	letter-spacing: 0.03em;
	padding: 0;
	background: none;
	border: 0;
	text-shadow: 0 0 calc(12 * var(--hn-u)) rgba(255, 255, 255, 0.9), 0 0 2px #fff;
}

.hn-hero__title-em {
	margin-top: 2px;
	color: var(--hn-blue);
	font-size: 1.1em;
}

.hn-hero__lead {
	margin-top: calc(12 * var(--hn-u));
	color: var(--hn-navy);
	font-size: max(11px, calc(15 * var(--hn-u)));
	font-weight: 700;
	line-height: 1.8;
	letter-spacing: 0.02em;
	text-shadow: 0 0 calc(8 * var(--hn-u)) #fff, 0 0 2px #fff;
}

/* 特徴3点：アイコン上＋2行（中央揃え） */
.hn-hero__points {
	position: relative;
	z-index: 1;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	margin: calc(20 * var(--hn-u)) 0 0;
	padding: calc(18 * var(--hn-u)) calc(6 * var(--hn-u));
	border: 1px solid var(--hn-border);
	border-radius: var(--hn-radius-lg);
	background: var(--hn-white);
	box-shadow: 0 calc(4 * var(--hn-u)) calc(16 * var(--hn-u)) rgba(10, 42, 85, 0.08);
}

.hn-hero__points li {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: calc(8 * var(--hn-u));
	padding: 2px calc(8 * var(--hn-u));
	color: var(--hn-muted);
	font-size: max(11px, calc(12.5 * var(--hn-u)));
	line-height: 1.55;
	text-align: center;
}

.hn-hero__points li + li {
	border-left: 1px solid var(--hn-border);
}

.hn-hero__points li > span {
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.hn-hero__points b {
	color: var(--hn-navy);
	font-size: max(11px, calc(14 * var(--hn-u)));
	font-weight: 800;
	letter-spacing: 0.02em;
}

.hn-hero__points .hn-icon {
	width: calc(28 * var(--hn-u));
	height: calc(28 * var(--hn-u));
	color: var(--hn-blue);
}

.hn-hero__points li:nth-child(3) .hn-icon {
	color: var(--hn-green);
}


/* =========================================================
 * トップ：メインCTA（A 診断 / B 商品名検索）
 * ======================================================= */

.hn-entry {
	margin-top: 0;
	display: grid;
	gap: calc(16 * var(--hn-u));
}

.hn-main .hn-diagcta,
.hn-diagcta {
	position: relative;
	display: flex;
	align-items: center;
	min-height: max(44px, calc(108 * var(--hn-u)));
	margin-top: calc(12 * var(--hn-u)); /* キャラクターの頭がはみ出す分だけ */
	padding: calc(14 * var(--hn-u)) calc(40 * var(--hn-u)) calc(14 * var(--hn-u)) calc(112 * var(--hn-u));
	border-radius: var(--hn-radius-lg);
	background: linear-gradient(135deg, #2a95ff 0%, var(--hn-blue) 50%, var(--hn-blue-deep) 100%);
	box-shadow: var(--hn-shadow-lg);
	color: var(--hn-white);
	text-decoration: none;
	transition: transform 0.1s, box-shadow 0.15s;
}

.hn-diagcta:hover {
	box-shadow: 0 calc(10 * var(--hn-u)) calc(28 * var(--hn-u)) rgba(8, 119, 232, 0.35);
}

.hn-diagcta:active {
	transform: translateY(1px);
}

/* キャラクター（ボタンの上にはみ出す） */
.hn-diagcta__mascot {
	position: absolute;
	left: calc(6 * var(--hn-u));
	bottom: 0;
	width: calc(104 * var(--hn-u));
	height: max(44px, calc(120 * var(--hn-u)));
	pointer-events: none;
}

.hn-main .hn-diagcta__mascot img,
.hn-diagcta__mascot img {
	position: absolute;
	left: 0;
	bottom: 0;
	width: calc(104 * var(--hn-u));
	height: max(44px, calc(120 * var(--hn-u)));
	object-fit: contain;
	object-position: center bottom;
}

.hn-diagcta__body {
	display: flex;
	flex-direction: column;
	align-items: center;
	flex: 1;
	gap: calc(4 * var(--hn-u));
	min-width: 0;
	text-align: center;
}

.hn-diagcta__lead {
	position: relative;
	display: inline-block;
	padding: calc(3 * var(--hn-u)) calc(12 * var(--hn-u));
	border-radius: calc(999 * var(--hn-u));
	background: var(--hn-white);
	color: var(--hn-navy);
	font-size: max(11px, calc(12.5 * var(--hn-u)));
	font-weight: 800;
	line-height: 1.5;
	white-space: nowrap;
}

/* 吹き出しのしっぽ */
.hn-diagcta__lead::before {
	content: "";
	position: absolute;
	left: -5px;
	bottom: calc(4 * var(--hn-u));
	border: calc(5 * var(--hn-u)) solid transparent;
	border-right-color: var(--hn-white);
	border-left: 0;
}

.hn-diagcta__label {
	font-size: max(11px, calc(23 * var(--hn-u)));
	font-weight: 900;
	line-height: 1.25;
	letter-spacing: 0.02em;
	white-space: nowrap;
}

.hn-diagcta__label small {
	font-size: 0.8em;
}

.hn-diagcta__note {
	font-size: max(11px, calc(15 * var(--hn-u)));
	font-weight: 800;
	line-height: 1.2;
}

.hn-diagcta__arrow {
	position: absolute;
	right: calc(12 * var(--hn-u));
	top: 50%;
	width: calc(26 * var(--hn-u));
	height: calc(26 * var(--hn-u));
	transform: translateY(-50%);
}

@media (max-width: 359px) {
	.hn-main .hn-diagcta,
	.hn-diagcta {
		padding-left: calc(92 * var(--hn-u));
	}

	.hn-diagcta__mascot,
	.hn-main .hn-diagcta__mascot img {
		width: calc(86 * var(--hn-u));
	}

	.hn-diagcta__label {
		font-size: max(11px, calc(20 * var(--hn-u)));
	}
}

.hn-searchbox {
	padding: calc(20 * var(--hn-u)) calc(16 * var(--hn-u));
	border: 1px solid var(--hn-border);
	border-radius: var(--hn-radius-lg);
	background: var(--hn-white);
	box-shadow: var(--hn-shadow);
}

.hn-searchbox__title {
	display: flex;
	flex-direction: column;
	gap: calc(4 * var(--hn-u));
	margin-bottom: calc(16 * var(--hn-u));
	padding: 0 calc(4 * var(--hn-u));
	color: var(--hn-navy);
	font-size: max(11px, calc(19 * var(--hn-u)));
	font-weight: 900;
	line-height: 1.4;
	letter-spacing: 0.02em;
}

.hn-searchbox__label {
	display: flex;
	flex-direction: column;
	gap: calc(4 * var(--hn-u));
}

.hn-searchbox__title small {
	margin-left: -0.5em; /* 全角かっこの余白を打ち消して左端をそろえる */
	color: var(--hn-muted);
	font-size: max(11px, calc(14 * var(--hn-u)));
	font-weight: 500;
	line-height: 1.5;
	letter-spacing: 0;
}

/* ---------- 商品名検索 ---------- */

.hn-search {
	position: relative;
}

.hn-search__field {
	position: relative;
	display: flex;
	align-items: center;
}

.hn-search__icon {
	position: absolute;
	left: calc(16 * var(--hn-u));
	color: var(--hn-muted);
	pointer-events: none;
}

.hn-main .hn-search__input {
	width: 100%;
	height: max(44px, calc(54 * var(--hn-u)));
	margin: 0;
	padding: 0 calc(56 * var(--hn-u)) 0 calc(48 * var(--hn-u));
	border: 1.5px solid var(--hn-border-strong);
	border-radius: calc(999 * var(--hn-u));
	background: var(--hn-white);
	color: var(--hn-text);
	font-family: inherit;
	/* 16px未満だとiOSで入力時に拡大されるため16px以上 */
	font-size: max(16px, calc(16 * var(--hn-u)));
	box-shadow: none;
	-webkit-appearance: none;
	appearance: none;
}

.hn-search__input::placeholder {
	color: #8494a8;
}

.hn-search__input::-webkit-search-cancel-button {
	-webkit-appearance: none;
}

.hn-main .hn-search__input:focus {
	border-color: var(--hn-blue);
	outline: none;
	box-shadow: 0 0 0 calc(4 * var(--hn-u)) rgba(8, 119, 232, 0.15);
}

.hn-main .hn-search__submit {
	position: absolute;
	right: calc(6 * var(--hn-u));
	display: grid;
	place-items: center;
	width: max(44px, calc(44 * var(--hn-u)));
	height: max(44px, calc(44 * var(--hn-u)));
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: transparent;
	color: var(--hn-blue);
	cursor: pointer;
}

.hn-main .hn-search__submit:hover {
	background: var(--hn-light);
}

.hn-search__submit .hn-icon {
	width: calc(24 * var(--hn-u));
	height: calc(24 * var(--hn-u));
	stroke-width: 2.6;
}

.hn-search__suggest {
	position: absolute;
	top: calc(100% + calc(6 * var(--hn-u)));
	left: 0;
	right: 0;
	z-index: 20;
	max-height: calc(360 * var(--hn-u));
	overflow-y: auto;
	padding: calc(6 * var(--hn-u));
	border: 1px solid var(--hn-border);
	border-radius: var(--hn-radius);
	background: var(--hn-white);
	box-shadow: 0 calc(12 * var(--hn-u)) calc(32 * var(--hn-u)) rgba(10, 42, 85, 0.16);
}

.hn-search__suggest[hidden] {
	display: none;
}

.hn-main .hn-suggest__item {
	display: flex;
	flex-direction: column;
	justify-content: center;
	min-height: max(44px, calc(56 * var(--hn-u)));
	padding: calc(8 * var(--hn-u)) calc(12 * var(--hn-u));
	border-radius: var(--hn-radius-sm);
	color: var(--hn-text);
}

.hn-suggest__item:hover,
.hn-suggest__item.is-active {
	background: var(--hn-light);
}

.hn-suggest__name {
	font-size: max(11px, calc(16 * var(--hn-u)));
	font-weight: 700;
	line-height: 1.4;
}

.hn-suggest__meta {
	color: var(--hn-muted);
	font-size: max(11px, calc(13 * var(--hn-u)));
}

.hn-suggest__meta b {
	color: var(--hn-red-text);
}

.hn-main .hn-suggest__more {
	justify-content: center;
	color: var(--hn-blue);
	font-size: max(11px, calc(15 * var(--hn-u)));
	font-weight: 700;
}

.hn-suggest__empty {
	padding: calc(12 * var(--hn-u));
	color: var(--hn-muted);
	font-size: max(11px, calc(15 * var(--hn-u)));
}

/* =========================================================
 * トップ：場所から探す（スマホ2列）
 * ======================================================= */

.hn-locs {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: calc(8 * var(--hn-u));
}

.hn-main .hn-loc {
	display: flex;
	flex-direction: column;
	height: 100%;
	min-height: max(44px, calc(44 * var(--hn-u)));
	overflow: hidden;
	padding: calc(5 * var(--hn-u)) calc(5 * var(--hn-u)) calc(8 * var(--hn-u));
	border: 1px solid var(--hn-border);
	border-radius: var(--hn-radius-sm);
	background: var(--hn-white);
	box-shadow: var(--hn-shadow);
	text-align: center;
	transition: border-color 0.15s, box-shadow 0.15s;
}

.hn-main .hn-loc:hover {
	border-color: var(--hn-blue);
}

.hn-loc__media {
	display: block;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	border-radius: calc(8 * var(--hn-u));
	background: var(--hn-light);
}

.hn-main .hn-loc__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.hn-loc__media.is-icon {
	display: grid;
	place-items: center;
	color: var(--hn-blue);
}

.hn-loc__media.is-icon .hn-icon {
	width: calc(36 * var(--hn-u));
	height: calc(36 * var(--hn-u));
	stroke-width: 1.6;
}

.hn-loc__label {
	padding-top: calc(6 * var(--hn-u));
	color: var(--hn-navy);
	font-size: max(11px, calc(15 * var(--hn-u)));
	font-weight: 800;
	line-height: 1.35;
}

.hn-loc__sub {
	color: var(--hn-muted);
	font-size: max(11px, calc(11.5 * var(--hn-u)));
	line-height: 1.4;
	letter-spacing: -0.02em;
	word-break: keep-all; /* 単語の途中で折り返さない（<wbr> の位置で改行） */
	overflow-wrap: anywhere;
	font-feature-settings: "palt"; /* 全角の括弧・中黒の余白を詰める */
}

/* =========================================================
 * トップ：お悩みから探す（スマホ1列）
 * ======================================================= */

.hn-worries {
	display: grid;
	gap: calc(10 * var(--hn-u));
}

.hn-main .hn-worry {
	display: flex;
	align-items: center;
	gap: calc(12 * var(--hn-u));
	min-height: max(44px, calc(68 * var(--hn-u)));
	padding: calc(12 * var(--hn-u)) calc(14 * var(--hn-u));
	border: 1px solid var(--hn-border);
	border-radius: var(--hn-radius);
	background: var(--hn-white);
	box-shadow: var(--hn-shadow);
}

.hn-main .hn-worry:hover {
	border-color: var(--hn-blue);
}

.hn-worry__icon {
	display: grid;
	place-items: center;
	flex-shrink: 0;
	width: max(44px, calc(44 * var(--hn-u)));
	height: max(44px, calc(44 * var(--hn-u)));
	border-radius: 50%;
	background: var(--hn-light);
	color: var(--hn-blue);
}

.hn-worry__text {
	display: flex;
	flex-direction: column;
	flex: 1;
	min-width: 0;
}

.hn-worry__label {
	color: var(--hn-navy);
	font-size: max(11px, calc(16 * var(--hn-u)));
	font-weight: 800;
	line-height: 1.45;
}

.hn-worry__sub {
	color: var(--hn-muted);
	font-size: max(11px, calc(14 * var(--hn-u)));
	line-height: 1.5;
}

.hn-worry__arrow {
	color: var(--hn-blue);
}

/* =========================================================
 * 商品カード（縦積み）
 * ======================================================= */

.hn-plist {
	display: grid;
	gap: calc(16 * var(--hn-u));
}

.hn-pcard {
	display: flex;
	flex-direction: column;
	gap: calc(12 * var(--hn-u));
	padding: calc(16 * var(--hn-u));
	border: 1px solid var(--hn-border);
	border-radius: var(--hn-radius-lg);
	background: var(--hn-white);
	box-shadow: var(--hn-shadow);
}

.hn-pcard__head {
	display: flex;
	gap: calc(14 * var(--hn-u));
	align-items: flex-start;
}

.hn-main .hn-pcard__thumb {
	position: relative;
	flex-shrink: 0;
	width: calc(96 * var(--hn-u));
	height: max(44px, calc(96 * var(--hn-u)));
	border: 1px solid var(--hn-border);
	border-radius: var(--hn-radius-sm);
	background: var(--hn-white);
}

.hn-main .hn-pcard__thumb img {
	width: 100%;
	height: 100%;
	padding: calc(6 * var(--hn-u));
	border-radius: var(--hn-radius-sm);
	object-fit: contain;
}

.hn-pcard__meta {
	display: flex;
	flex-direction: column;
	gap: calc(6 * var(--hn-u));
	min-width: 0;
	flex: 1;
}

.hn-pcard__maker {
	color: var(--hn-muted);
	font-size: max(11px, calc(13 * var(--hn-u)));
	line-height: 1.4;
}

.hn-main .hn-pcard__name {
	color: var(--hn-navy);
	font-size: max(11px, calc(17 * var(--hn-u)));
	font-weight: 800;
	line-height: 1.45;
	padding: 0;
	background: none;
	border: 0;
	margin: 0;
}

.hn-main .hn-pcard__name a {
	display: block;
	padding: 2px 0;
}

.hn-main .hn-pcard__name a:hover {
	color: var(--hn-blue);
}

.hn-pcard__desc {
	color: var(--hn-text);
	font-size: max(11px, calc(15 * var(--hn-u)));
	line-height: 1.7;
}

.hn-pcard__reasons {
	display: grid;
	gap: calc(4 * var(--hn-u));
	padding: calc(10 * var(--hn-u)) calc(12 * var(--hn-u));
	border-radius: var(--hn-radius-sm);
	background: #effaf2;
}

.hn-pcard__reasons li {
	display: flex;
	align-items: center;
	gap: calc(6 * var(--hn-u));
	color: var(--hn-green-dark);
	font-size: max(11px, calc(15 * var(--hn-u)));
	font-weight: 700;
	line-height: 1.5;
}

.hn-pcard__reasons .hn-icon {
	width: calc(18 * var(--hn-u));
	height: calc(18 * var(--hn-u));
}

.hn-pcard__foot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: calc(12 * var(--hn-u));
	padding-top: calc(12 * var(--hn-u));
	border-top: 1px solid var(--hn-border);
}

.hn-pcard__price {
	display: flex;
	flex-direction: column;
	line-height: 1.2;
}

.hn-pcard__price-label {
	color: var(--hn-muted);
	font-size: max(11px, calc(13 * var(--hn-u)));
	font-weight: 700;
}

.hn-pcard__cta {
	flex-shrink: 0;
	min-width: calc(136 * var(--hn-u));
}

/* ランキング */
.hn-rank-badge {
	position: absolute;
	top: -8px;
	left: -8px;
	display: grid;
	place-items: center;
	width: calc(34 * var(--hn-u));
	height: calc(34 * var(--hn-u));
	border: 2px solid var(--hn-white);
	border-radius: 50%;
	background: #8a9bb0;
	color: var(--hn-white);
	font-size: max(11px, calc(15 * var(--hn-u)));
	font-weight: 900;
	line-height: 1;
	box-shadow: 0 2px calc(6 * var(--hn-u)) rgba(10, 42, 85, 0.2);
}

.hn-rank-badge .hn-icon {
	position: absolute;
	top: -13px;
	width: calc(16 * var(--hn-u));
	height: calc(16 * var(--hn-u));
	color: inherit;
	display: none;
}

.hn-pcard--rank1 .hn-rank-badge { background: #e3a90e; }
.hn-pcard--rank2 .hn-rank-badge { background: #8fa0b3; }
.hn-pcard--rank3 .hn-rank-badge { background: #c07a43; }

.hn-pcard__rank {
	color: var(--hn-blue);
	font-size: max(11px, calc(14 * var(--hn-u)));
	font-weight: 800;
	line-height: 1.2;
}

.hn-pcard--rank1 {
	border-color: #f1d27a;
}

/* =========================================================
 * トップ：用途別おすすめ（2列の大きめボタン）
 * ======================================================= */

.hn-shortcuts {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: calc(10 * var(--hn-u));
}

.hn-main .hn-shortcut {
	display: flex;
	align-items: center;
	gap: calc(10 * var(--hn-u));
	height: 100%;
	min-height: max(44px, calc(60 * var(--hn-u)));
	padding: calc(8 * var(--hn-u)) calc(10 * var(--hn-u));
	border: 1px solid var(--hn-border);
	border-radius: var(--hn-radius-sm);
	background: var(--hn-light-2);
	color: var(--hn-navy);
}

.hn-main .hn-shortcut:hover {
	border-color: var(--hn-blue);
	background: var(--hn-light);
}

.hn-shortcut__icon {
	display: grid;
	place-items: center;
	flex-shrink: 0;
	width: calc(36 * var(--hn-u));
	height: calc(36 * var(--hn-u));
	border-radius: 50%;
	background: var(--hn-white);
	color: var(--hn-blue);
}

.hn-shortcut__text {
	display: flex;
	flex-direction: column;
	min-width: 0;
	color: var(--hn-muted);
	font-size: max(11px, calc(12.5 * var(--hn-u)));
	font-weight: 700;
	line-height: 1.35;
}

.hn-shortcut__text b {
	color: var(--hn-navy);
	font-size: max(11px, calc(15.5 * var(--hn-u)));
	font-weight: 800;
}

/* =========================================================
 * 記事カード
 * ======================================================= */

.hn-posts {
	display: grid;
	gap: calc(12 * var(--hn-u));
}

.hn-main .hn-postcard__link {
	display: flex;
	gap: calc(12 * var(--hn-u));
	padding: calc(12 * var(--hn-u));
	border: 1px solid var(--hn-border);
	border-radius: var(--hn-radius);
	background: var(--hn-white);
	box-shadow: var(--hn-shadow);
}

.hn-main .hn-postcard__link:hover {
	border-color: var(--hn-blue);
}

.hn-postcard__thumb {
	flex-shrink: 0;
	width: calc(112 * var(--hn-u));
	aspect-ratio: 16 / 10;
	overflow: hidden;
	border-radius: calc(10 * var(--hn-u));
	background: var(--hn-light);
}

.hn-main .hn-postcard__thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.hn-postcard__body {
	display: flex;
	flex-direction: column;
	gap: calc(4 * var(--hn-u));
	min-width: 0;
}

.hn-postcard__cat {
	align-self: flex-start;
	padding: 1px calc(8 * var(--hn-u));
	border-radius: calc(6 * var(--hn-u));
	background: var(--hn-light);
	color: var(--hn-blue-deep);
	font-size: max(11px, calc(12 * var(--hn-u)));
	font-weight: 700;
	line-height: 1.6;
}

.hn-postcard__title {
	display: -webkit-box;
	overflow: hidden;
	color: var(--hn-navy);
	font-size: max(11px, calc(15 * var(--hn-u)));
	font-weight: 700;
	line-height: 1.55;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
}

.hn-postcard__date {
	color: var(--hn-muted);
	font-size: max(11px, calc(13 * var(--hn-u)));
}

.hn-catnav {
	margin-top: calc(20 * var(--hn-u));
}

.hn-catnav__title {
	margin-bottom: calc(8 * var(--hn-u));
	color: var(--hn-navy);
	font-size: max(11px, calc(16 * var(--hn-u)));
	font-weight: 800;
}

.hn-catnav ul {
	display: grid;
	gap: calc(8 * var(--hn-u));
}

.hn-main .hn-catnav a {
	display: flex;
	align-items: center;
	justify-content: space-between;
	min-height: max(44px, calc(52 * var(--hn-u)));
	padding: calc(8 * var(--hn-u)) calc(16 * var(--hn-u));
	border: 1px solid var(--hn-border);
	border-radius: var(--hn-radius-sm);
	background: var(--hn-white);
	color: var(--hn-navy);
	font-size: max(11px, calc(15 * var(--hn-u)));
	font-weight: 700;
}

.hn-catnav .hn-icon {
	color: var(--hn-blue);
}

.hn-bottomcta {
	padding: calc(24 * var(--hn-u)) calc(16 * var(--hn-u));
	border-radius: var(--hn-radius-lg);
	background: var(--hn-light);
}

.hn-bottomcta__text {
	margin-bottom: calc(12 * var(--hn-u));
	color: var(--hn-navy);
	font-size: max(11px, calc(17 * var(--hn-u)));
	font-weight: 800;
	text-align: center;
}

.hn-free .post_content {
	margin: 0;
}

/* =========================================================
 * かんたん診断
 * ======================================================= */

.hn-diag {
	max-width: calc(640 * var(--hn-u));
	padding-top: calc(16 * var(--hn-u));
}

.hn-diag__top {
	display: flex;
	align-items: center;
	gap: calc(8 * var(--hn-u));
	min-height: max(44px, calc(44 * var(--hn-u)));
}

.hn-main .hn-diag__back {
	display: grid;
	place-items: center;
	flex-shrink: 0;
	width: max(44px, calc(44 * var(--hn-u)));
	height: max(44px, calc(44 * var(--hn-u)));
	margin-left: -8px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: transparent;
	color: var(--hn-navy);
	cursor: pointer;
}

.hn-diag__back[hidden] {
	display: none;
}

.hn-progress {
	display: flex;
	align-items: center;
	gap: calc(12 * var(--hn-u));
	flex: 1;
}

.hn-progress__num {
	color: var(--hn-blue);
	font-size: max(11px, calc(16 * var(--hn-u)));
	font-weight: 800;
	white-space: nowrap;
}

.hn-progress__bar {
	flex: 1;
	height: calc(10 * var(--hn-u));
	overflow: hidden;
	border-radius: calc(999 * var(--hn-u));
	background: #e3ecf6;
}

.hn-progress__fill {
	display: block;
	height: 100%;
	border-radius: inherit;
	background: var(--hn-blue);
	transition: width 0.3s ease;
}

.hn-diag__intro {
	display: flex;
	align-items: flex-end;
	gap: calc(8 * var(--hn-u));
	margin: calc(12 * var(--hn-u)) 0 calc(16 * var(--hn-u));
}

.hn-diag__mascot {
	flex-shrink: 0;
	width: calc(80 * var(--hn-u));
	height: max(44px, calc(92 * var(--hn-u)));
}

.hn-main .hn-diag__mascot img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	object-position: center bottom;
}

/* 吹き出し */
.hn-diag__bubble {
	position: relative;
	flex: 1;
	margin-bottom: calc(18 * var(--hn-u));
	padding: calc(14 * var(--hn-u)) calc(16 * var(--hn-u));
	border: 1px solid var(--hn-border);
	border-radius: var(--hn-radius-lg);
	background: var(--hn-white);
	box-shadow: var(--hn-shadow);
}

.hn-diag__bubble::before {
	content: "";
	position: absolute;
	left: -9px;
	bottom: calc(18 * var(--hn-u));
	width: calc(16 * var(--hn-u));
	height: calc(16 * var(--hn-u));
	border-left: 1px solid var(--hn-border);
	border-bottom: 1px solid var(--hn-border);
	background: var(--hn-white);
	transform: rotate(45deg);
}

.hn-diag__lead {
	position: relative;
	color: var(--hn-navy);
	font-size: max(11px, calc(14.5 * var(--hn-u)));
	font-weight: 800;
	line-height: 1.6;
	word-break: keep-all;
	overflow-wrap: anywhere;
}

.hn-main .hn-diag-step {
	padding: calc(20 * var(--hn-u)) calc(16 * var(--hn-u));
	border: 1px solid var(--hn-border);
	border-radius: var(--hn-radius-lg);
	background: var(--hn-white);
	box-shadow: var(--hn-shadow);
}

.hn-diag-step + .hn-diag-step {
	margin-top: calc(16 * var(--hn-u));
}

.hn-diag-step__legend {
	display: flex;
	align-items: flex-start;
	gap: calc(12 * var(--hn-u));
	float: left; /* legend をfieldset内のフレックスに乗せるため */
	width: 100%;
	margin-bottom: calc(16 * var(--hn-u));
	padding: 0;
}

.hn-diag-step__legend + * {
	clear: both;
}

.hn-diag-step__num {
	display: grid;
	place-items: center;
	flex-shrink: 0;
	width: max(44px, calc(48 * var(--hn-u)));
	height: max(44px, calc(48 * var(--hn-u)));
	border-radius: 50%;
	background: var(--hn-blue);
	color: var(--hn-white);
	font-size: max(11px, calc(18 * var(--hn-u)));
	font-weight: 900;
}

.hn-diag-step__q {
	display: flex;
	flex-direction: column;
	color: var(--hn-navy);
	font-size: max(11px, calc(21 * var(--hn-u)));
	font-weight: 900;
	line-height: 1.4;
}

.hn-diag-step__q small {
	margin-top: 2px;
	color: var(--hn-muted);
	font-size: max(11px, calc(14 * var(--hn-u)));
	font-weight: 500;
}

.hn-diag-options {
	display: grid;
	gap: calc(10 * var(--hn-u));
}

.hn-diag-step--grid .hn-diag-options {
	grid-template-columns: repeat(2, 1fr);
	gap: calc(12 * var(--hn-u));
}

.hn-diag-opt {
	position: relative;
	display: block;
	cursor: pointer;
}

.hn-diag-opt input,
.hn-choice input {
	position: absolute;
	opacity: 0;
	width: 1px;
	height: 1px;
}

.hn-diag-opt__box {
	position: relative;
	display: flex;
	align-items: center;
	gap: calc(12 * var(--hn-u));
	min-height: max(44px, calc(60 * var(--hn-u)));
	height: 100%;
	padding: calc(10 * var(--hn-u)) calc(48 * var(--hn-u)) calc(10 * var(--hn-u)) calc(14 * var(--hn-u));
	border: 2px solid var(--hn-border);
	border-radius: var(--hn-radius);
	background: var(--hn-white);
	transition: border-color 0.15s, background-color 0.15s;
}

.hn-diag-step--grid .hn-diag-opt__box {
	flex-direction: column;
	align-items: stretch;
	gap: calc(8 * var(--hn-u));
	padding: calc(8 * var(--hn-u)) calc(8 * var(--hn-u)) calc(12 * var(--hn-u));
}

.hn-diag-opt__media {
	display: block;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	border-radius: calc(10 * var(--hn-u));
	background: var(--hn-light);
}

.hn-main .hn-diag-opt__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.hn-diag-opt__media.is-icon {
	display: grid;
	place-items: center;
	color: var(--hn-blue);
}

.hn-diag-opt__media.is-icon .hn-icon {
	width: calc(40 * var(--hn-u));
	height: calc(40 * var(--hn-u));
	stroke-width: 1.6;
}

.hn-diag-opt__icon {
	display: grid;
	place-items: center;
	flex-shrink: 0;
	width: calc(40 * var(--hn-u));
	height: calc(40 * var(--hn-u));
	border-radius: 50%;
	background: var(--hn-light);
	color: var(--hn-blue);
}

.hn-diag-opt__text {
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.hn-diag-step--grid .hn-diag-opt__text {
	padding: 0 calc(4 * var(--hn-u));
}

.hn-diag-opt__label {
	color: var(--hn-navy);
	font-size: max(11px, calc(17 * var(--hn-u)));
	font-weight: 800;
	line-height: 1.4;
}

.hn-diag-opt__sub {
	color: var(--hn-muted);
	font-size: max(11px, calc(13 * var(--hn-u)));
	line-height: 1.5;
	word-break: keep-all;
	overflow-wrap: anywhere;
	font-feature-settings: "palt";
	margin-left: -0.3em;
}

.hn-diag-opt__check {
	position: absolute;
	top: 50%;
	right: calc(14 * var(--hn-u));
	display: grid;
	place-items: center;
	width: calc(26 * var(--hn-u));
	height: calc(26 * var(--hn-u));
	border: 2px solid var(--hn-border-strong);
	border-radius: 50%;
	background: var(--hn-white);
	color: transparent;
	transform: translateY(-50%);
}

.hn-diag-step--grid .hn-diag-opt__check {
	top: calc(14 * var(--hn-u));
	right: calc(14 * var(--hn-u));
	transform: none;
}

.hn-diag-opt__check .hn-icon {
	width: calc(16 * var(--hn-u));
	height: calc(16 * var(--hn-u));
	stroke-width: 3;
}

.hn-diag-opt:hover .hn-diag-opt__box {
	border-color: var(--hn-border-strong);
}

.hn-diag-opt input:checked + .hn-diag-opt__box {
	border-color: var(--hn-blue);
	background: var(--hn-light-2);
}

.hn-diag-opt input:checked + .hn-diag-opt__box .hn-diag-opt__check {
	border-color: var(--hn-blue);
	background: var(--hn-blue);
	color: var(--hn-white);
}

.hn-diag-opt input:focus-visible + .hn-diag-opt__box {
	outline: calc(3 * var(--hn-u)) solid rgba(8, 119, 232, 0.45);
	outline-offset: 2px;
}

.hn-diag__nav {
	margin-top: calc(20 * var(--hn-u));
}

/* JSあり：「次へ進む」を画面下に固定 */
.hn-js .hn-diag__nav {
	position: sticky;
	bottom: 0;
	z-index: 5;
	margin: calc(20 * var(--hn-u)) -4px 0;
	padding: calc(12 * var(--hn-u)) calc(4 * var(--hn-u)) calc(calc(12 * var(--hn-u)) + env(safe-area-inset-bottom));
	background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, #fff 28%);
}

.hn-diag__nav[hidden] {
	display: none;
}

.hn-diag__hint {
	margin-top: calc(8 * var(--hn-u));
	color: var(--hn-red-text);
	font-size: max(11px, calc(14 * var(--hn-u)));
	font-weight: 700;
	text-align: center;
}

.hn-diag__hint[hidden] {
	display: none;
}

/* JSあり：1問ずつ表示 */
.hn-js .hn-diag__form .hn-diag-step {
	display: none;
}

.hn-js .hn-diag__form .hn-diag-step.is-current {
	display: block;
	animation: hn-fade-in 0.25s ease;
}

.hn-js .hn-diag__form.is-done {
	display: none;
}

html:not(.hn-js) .hn-progress {
	visibility: hidden;
}

@keyframes hn-fade-in {
	from { opacity: 0; transform: translateX(12px); }
	to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
	.hn-js .hn-diag__form .hn-diag-step.is-current { animation: none; }
	.hn-progress__fill { transition: none; }
}

.hn-diag__result:empty {
	display: none;
}

.hn-diag__result.is-loading {
	opacity: 0.5;
}

.hn-diag-result {
	margin-top: calc(8 * var(--hn-u));
}

.hn-diag-result__head {
	margin-bottom: calc(16 * var(--hn-u));
}

.hn-diag-result__eyebrow {
	color: var(--hn-green-dark);
	font-size: max(11px, calc(15 * var(--hn-u)));
	font-weight: 800;
}

.hn-main .hn-diag-result__title {
	margin: calc(4 * var(--hn-u)) 0 calc(12 * var(--hn-u));
	color: var(--hn-navy);
	font-size: max(11px, calc(23 * var(--hn-u)));
	font-weight: 900;
	line-height: 1.4;
	padding: 0;
	background: none;
	border: 0;
}

.hn-diag-result__title:focus {
	outline: none;
}

.hn-diag-result__empty {
	padding: calc(20 * var(--hn-u));
	border-radius: var(--hn-radius);
	background: var(--hn-light);
	font-size: max(11px, calc(15 * var(--hn-u)));
}

.hn-diag-result__cats {
	margin-top: calc(24 * var(--hn-u));
	padding: calc(16 * var(--hn-u));
	border-radius: var(--hn-radius);
	background: var(--hn-light-2);
}

.hn-main .hn-diag-result__cats-title {
	margin-bottom: calc(10 * var(--hn-u));
	color: var(--hn-navy);
	font-size: max(11px, calc(15 * var(--hn-u)));
	font-weight: 800;
}

.hn-diag-result__actions {
	display: grid;
	gap: calc(8 * var(--hn-u));
	margin-top: calc(20 * var(--hn-u));
}

.hn-diag__alt {
	margin-top: calc(28 * var(--hn-u));
	color: var(--hn-muted);
	font-size: max(11px, calc(15 * var(--hn-u)));
	text-align: center;
}

.hn-main .hn-diag__alt a {
	color: var(--hn-blue);
	font-weight: 700;
	text-decoration: underline;
}

/* =========================================================
 * 商品一覧
 * ======================================================= */

.hn-archive {
	padding-top: calc(16 * var(--hn-u));
}

.hn-archive__head {
	margin-bottom: calc(20 * var(--hn-u));
}

.hn-main .hn-archive__title {
	color: var(--hn-navy);
	font-size: max(11px, calc(24 * var(--hn-u)));
	font-weight: 900;
	line-height: 1.4;
	padding: 0;
	background: none;
	border: 0;
}

.hn-archive__lead {
	margin: calc(4 * var(--hn-u)) 0 calc(16 * var(--hn-u));
	color: var(--hn-muted);
	font-size: max(11px, calc(15 * var(--hn-u)));
}

.hn-main .hn-archive__lead a {
	color: var(--hn-blue);
	font-weight: 700;
	text-decoration: underline;
}

.hn-toolbar {
	position: relative;
	z-index: 5;
	display: flex;
	align-items: center;
	gap: calc(8 * var(--hn-u));
	margin-bottom: calc(12 * var(--hn-u));
}

.hn-toolbar__count {
	margin-right: auto;
	color: var(--hn-muted);
	font-size: max(11px, calc(15 * var(--hn-u)));
	white-space: nowrap;
}

.hn-toolbar__count strong {
	color: var(--hn-navy);
	font-size: max(11px, calc(20 * var(--hn-u)));
}

.hn-select {
	position: relative;
	display: inline-flex;
	align-items: center;
}

.hn-main .hn-select select {
	height: var(--hn-tap);
	margin: 0;
	padding: 0 calc(36 * var(--hn-u)) 0 calc(14 * var(--hn-u));
	border: 2px solid var(--hn-border-strong);
	border-radius: calc(999 * var(--hn-u));
	background: var(--hn-white);
	color: var(--hn-navy);
	font-family: inherit;
	font-size: max(16px, calc(16 * var(--hn-u)));
	font-weight: 700;
	-webkit-appearance: none;
	appearance: none;
	cursor: pointer;
}

.hn-select .hn-icon {
	position: absolute;
	right: calc(12 * var(--hn-u));
	width: calc(18 * var(--hn-u));
	height: calc(18 * var(--hn-u));
	color: var(--hn-blue);
	pointer-events: none;
}

.hn-main .hn-toolbar__filter {
	padding: calc(8 * var(--hn-u)) calc(14 * var(--hn-u));
	white-space: nowrap;
}

/* ---------- 絞り込みボトムシート ---------- */

.hn-sheet__backdrop,
.hn-sheet__close {
	display: none;
}

.hn-sheet__panel {
	margin-bottom: calc(16 * var(--hn-u));
	border: 1px solid var(--hn-border);
	border-radius: var(--hn-radius-lg);
	background: var(--hn-white);
}

.hn-sheet__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	min-height: max(44px, calc(56 * var(--hn-u)));
	padding: calc(4 * var(--hn-u)) calc(8 * var(--hn-u)) calc(4 * var(--hn-u)) calc(16 * var(--hn-u));
	border-bottom: 1px solid var(--hn-border);
}

.hn-sheet__title {
	display: flex;
	align-items: center;
	gap: calc(8 * var(--hn-u));
	color: var(--hn-navy);
	font-size: max(11px, calc(17 * var(--hn-u)));
	font-weight: 800;
}

.hn-sheet__title .hn-icon {
	color: var(--hn-blue);
}

.hn-main .hn-sheet__close {
	place-items: center;
	width: max(44px, calc(44 * var(--hn-u)));
	height: max(44px, calc(44 * var(--hn-u)));
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: transparent;
	color: var(--hn-navy);
	cursor: pointer;
}

.hn-sheet__body {
	padding: calc(4 * var(--hn-u)) calc(16 * var(--hn-u));
}

.hn-sheet__foot {
	display: grid;
	grid-template-columns: 1fr 2fr;
	gap: calc(8 * var(--hn-u));
	padding: calc(12 * var(--hn-u)) calc(16 * var(--hn-u)) calc(calc(12 * var(--hn-u)) + env(safe-area-inset-bottom));
	border-top: 1px solid var(--hn-border);
	background: var(--hn-white);
	border-radius: 0 0 var(--hn-radius-lg) var(--hn-radius-lg);
}

/* JSあり（スマホ・タブレット）：画面下からのシート */
.hn-js .hn-sheet {
	position: fixed;
	inset: 0;
	z-index: 1000; /* SWELLの固定ヘッダーより前面 */
	display: none;
}

.hn-js .hn-sheet.is-open {
	display: block;
}

.hn-js .hn-sheet__backdrop {
	display: block;
	position: absolute;
	inset: 0;
	background: rgba(10, 42, 85, 0.45);
	animation: hn-fade 0.2s ease;
}

.hn-js .hn-sheet__panel {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	display: flex;
	flex-direction: column;
	max-height: 88vh;
	max-height: 88dvh;
	margin: 0;
	border: 0;
	border-radius: var(--hn-radius-lg) var(--hn-radius-lg) 0 0;
	box-shadow: 0 -8px calc(32 * var(--hn-u)) rgba(10, 42, 85, 0.2);
	animation: hn-slide-up 0.25s ease;
}

.hn-js .hn-sheet__panel:focus {
	outline: none;
}

.hn-js .hn-main .hn-sheet__close {
	display: grid;
}

.hn-js .hn-sheet__body {
	flex: 1;
	overflow-y: auto;
	overscroll-behavior: contain;
	-webkit-overflow-scrolling: touch;
}

.hn-js .hn-sheet__foot {
	border-radius: 0;
}

html.hn-sheet-lock,
html.hn-sheet-lock body {
	overflow: hidden;
}

@keyframes hn-fade {
	from { opacity: 0; }
}

@keyframes hn-slide-up {
	from { transform: translateY(100%); }
}

@media (prefers-reduced-motion: reduce) {
	.hn-js .hn-sheet__panel,
	.hn-js .hn-sheet__backdrop { animation: none; }
}

html:not(.hn-js) .hn-toolbar__filter {
	display: none;
}

/* アコーディオン */
.hn-fgroup {
	border-bottom: 1px solid var(--hn-border);
}

.hn-fgroup:last-child {
	border-bottom: 0;
}

.hn-fgroup__summary {
	display: flex;
	align-items: center;
	gap: calc(8 * var(--hn-u));
	min-height: max(44px, calc(56 * var(--hn-u)));
	cursor: pointer;
	list-style: none;
}

.hn-fgroup__summary::-webkit-details-marker {
	display: none;
}

.hn-fgroup__title {
	color: var(--hn-navy);
	font-size: max(11px, calc(16 * var(--hn-u)));
	font-weight: 800;
}

.hn-fgroup__current {
	margin-left: auto;
	color: var(--hn-muted);
	font-size: max(11px, calc(14 * var(--hn-u)));
	text-align: right;
}

.hn-fgroup__current.is-active {
	color: var(--hn-blue);
	font-weight: 700;
}

.hn-fgroup__arrow {
	color: var(--hn-muted);
	transition: transform 0.2s;
}

.hn-fgroup[open] .hn-fgroup__arrow {
	transform: rotate(180deg);
}

.hn-fgroup__body {
	padding-bottom: calc(16 * var(--hn-u));
}

.hn-choices {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: calc(8 * var(--hn-u));
}

.hn-choices--wide {
	grid-template-columns: 1fr;
}

.hn-choice {
	position: relative;
	display: block;
	cursor: pointer;
}

.hn-choice__box {
	display: flex;
	flex-direction: column;
	justify-content: center;
	min-height: max(44px, calc(52 * var(--hn-u)));
	height: 100%;
	padding: calc(6 * var(--hn-u)) calc(12 * var(--hn-u));
	border: 2px solid var(--hn-border);
	border-radius: var(--hn-radius-sm);
	background: var(--hn-white);
	transition: border-color 0.15s, background-color 0.15s;
}

.hn-choice__label {
	color: var(--hn-navy);
	font-size: max(11px, calc(15 * var(--hn-u)));
	font-weight: 700;
	line-height: 1.4;
}

.hn-choice__sub {
	color: var(--hn-muted);
	font-size: max(11px, calc(12 * var(--hn-u)));
	line-height: 1.4;
}

.hn-choice input:checked + .hn-choice__box {
	border-color: var(--hn-blue);
	background: var(--hn-light);
}

.hn-choice input:checked + .hn-choice__box .hn-choice__label {
	color: var(--hn-blue-deep);
}

.hn-choice input:focus-visible + .hn-choice__box {
	outline: calc(3 * var(--hn-u)) solid rgba(8, 119, 232, 0.45);
	outline-offset: 2px;
}

/* スイッチ */
.hn-fgroup--switch {
	padding: calc(12 * var(--hn-u)) 0;
}

.hn-switch {
	position: relative;
	display: flex;
	align-items: center;
	gap: calc(12 * var(--hn-u));
	min-height: max(44px, calc(52 * var(--hn-u)));
	cursor: pointer;
}

.hn-switch input {
	position: absolute;
	opacity: 0;
	width: 1px;
	height: 1px;
}

.hn-switch__track {
	position: relative;
	flex-shrink: 0;
	width: max(44px, calc(52 * var(--hn-u)));
	height: calc(30 * var(--hn-u));
	border-radius: calc(999 * var(--hn-u));
	background: #c7d3e1;
	transition: background-color 0.2s;
}

.hn-switch__track::after {
	content: "";
	position: absolute;
	top: calc(3 * var(--hn-u));
	left: calc(3 * var(--hn-u));
	width: calc(24 * var(--hn-u));
	height: calc(24 * var(--hn-u));
	border-radius: 50%;
	background: var(--hn-white);
	box-shadow: 0 1px calc(3 * var(--hn-u)) rgba(0, 0, 0, 0.2);
	transition: transform 0.2s;
}

.hn-switch input:checked + .hn-switch__track {
	background: var(--hn-blue);
}

.hn-switch input:checked + .hn-switch__track::after {
	transform: translateX(calc(22 * var(--hn-u)));
}

.hn-switch input:focus-visible + .hn-switch__track {
	outline: calc(3 * var(--hn-u)) solid rgba(8, 119, 232, 0.45);
	outline-offset: 2px;
}

.hn-switch__label {
	display: flex;
	flex-direction: column;
	color: var(--hn-navy);
	font-size: max(11px, calc(15 * var(--hn-u)));
	font-weight: 700;
	line-height: 1.4;
}

.hn-switch__label small {
	color: var(--hn-muted);
	font-size: max(11px, calc(13 * var(--hn-u)));
	font-weight: 500;
}

/* ページ送り */
.hn-pager {
	margin-top: calc(24 * var(--hn-u));
}

.hn-pager ul {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: calc(6 * var(--hn-u));
}

.hn-main .hn-pager a,
.hn-pager span.page-numbers {
	display: grid;
	place-items: center;
	min-width: max(44px, calc(44 * var(--hn-u)));
	height: max(44px, calc(44 * var(--hn-u)));
	padding: 0 calc(8 * var(--hn-u));
	border: 1px solid var(--hn-border);
	border-radius: var(--hn-radius-sm);
	background: var(--hn-white);
	color: var(--hn-navy);
	font-size: max(11px, calc(16 * var(--hn-u)));
	font-weight: 700;
}

.hn-pager span.page-numbers.current {
	border-color: var(--hn-blue);
	background: var(--hn-blue);
	color: var(--hn-white);
}

.hn-pager span.page-numbers.dots {
	border: 0;
	background: none;
}

.hn-noresult {
	display: grid;
	gap: calc(12 * var(--hn-u));
	padding: calc(24 * var(--hn-u)) calc(16 * var(--hn-u));
	border-radius: var(--hn-radius-lg);
	background: var(--hn-light);
	font-size: max(11px, calc(15 * var(--hn-u)));
	text-align: center;
}

.hn-noresult__title {
	color: var(--hn-navy);
	font-size: max(11px, calc(18 * var(--hn-u)));
	font-weight: 800;
}

.hn-archive__cta {
	margin-top: calc(32 * var(--hn-u));
}

/* =========================================================
 * 商品詳細
 * ======================================================= */

.hn-single {
	padding-top: calc(12 * var(--hn-u));
}

.hn-product__hero {
	display: grid;
	gap: calc(16 * var(--hn-u));
}

.hn-product__image {
	display: grid;
	place-items: center;
	justify-self: center;
	width: 100%;
	max-width: calc(340 * var(--hn-u));
	aspect-ratio: 1 / 1;
	overflow: hidden;
	border: 1px solid var(--hn-border);
	border-radius: var(--hn-radius-lg);
	background: var(--hn-white);
}

.hn-main .hn-product__image img {
	width: 100%;
	height: 100%;
	max-height: calc(340 * var(--hn-u));
	padding: calc(16 * var(--hn-u));
	object-fit: contain;
}

.hn-product__summary {
	display: flex;
	flex-direction: column;
	gap: calc(10 * var(--hn-u));
}

.hn-product__maker {
	color: var(--hn-muted);
	font-size: max(11px, calc(14 * var(--hn-u)));
	font-weight: 700;
}

.hn-main .hn-product__name {
	color: var(--hn-navy);
	font-size: max(11px, calc(24 * var(--hn-u)));
	font-weight: 900;
	line-height: 1.4;
	padding: 0;
	background: none;
	border: 0;
}

.hn-product__desc {
	font-size: max(11px, calc(16 * var(--hn-u)));
	line-height: 1.75;
}

.hn-pricebox {
	display: grid;
	gap: calc(12 * var(--hn-u));
	margin-top: calc(4 * var(--hn-u));
	padding: calc(16 * var(--hn-u));
	border: 1px solid var(--hn-border);
	border-radius: var(--hn-radius-lg);
	background: var(--hn-light-2);
}

.hn-pricebox__price {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: calc(4 * var(--hn-u)) calc(12 * var(--hn-u));
}

.hn-pricebox__label {
	color: var(--hn-muted);
	font-size: max(11px, calc(14 * var(--hn-u)));
	font-weight: 700;
}

/* 価格比較 */
.hn-offers {
	display: grid;
	gap: calc(10 * var(--hn-u));
}

.hn-offer {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: calc(12 * var(--hn-u));
	padding: calc(14 * var(--hn-u)) calc(14 * var(--hn-u)) calc(14 * var(--hn-u)) calc(16 * var(--hn-u));
	border: 1px solid var(--hn-border);
	border-radius: var(--hn-radius);
	background: var(--hn-white);
}

.hn-offer.is-lowest {
	border: 2px solid var(--hn-red);
	background: #fff8f6;
}

.hn-offer__info {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 2px calc(8 * var(--hn-u));
	min-width: 0;
}

.hn-offer__shop {
	color: var(--hn-navy);
	font-size: max(11px, calc(15 * var(--hn-u)));
	font-weight: 800;
}

.hn-offer__badge {
	padding: 1px calc(8 * var(--hn-u));
	border-radius: calc(6 * var(--hn-u));
	background: var(--hn-red);
	color: var(--hn-white);
	font-size: max(11px, calc(12 * var(--hn-u)));
	font-weight: 800;
	line-height: 1.6;
}

.hn-offer__price {
	flex-basis: 100%;
}

.hn-main .hn-offer__btn {
	flex-shrink: 0;
	min-width: calc(132 * var(--hn-u));
	padding: calc(10 * var(--hn-u)) calc(14 * var(--hn-u));
	border-radius: var(--hn-radius-sm);
	color: var(--hn-white);
	font-size: max(11px, calc(15 * var(--hn-u)));
}

.hn-main .hn-offer__btn .hn-icon {
	width: calc(16 * var(--hn-u));
	height: calc(16 * var(--hn-u));
}

.hn-main .hn-offer__btn--rakuten { background: #bf0000; }
.hn-main .hn-offer__btn--amazon { background: #ffa41c; color: #0f1111; }
.hn-main .hn-offer__btn--yahoo { background: #e60033; }
.hn-main .hn-offer__btn:hover { filter: brightness(0.94); }

/* 性能メーター */
.hn-meters {
	display: grid;
	gap: calc(12 * var(--hn-u));
	padding: calc(16 * var(--hn-u));
	border: 1px solid var(--hn-border);
	border-radius: var(--hn-radius-lg);
	background: var(--hn-white);
}

.hn-meter {
	display: grid;
	grid-template-columns: calc(112 * var(--hn-u)) 1fr auto;
	align-items: center;
	gap: calc(12 * var(--hn-u));
}

.hn-meter__label {
	display: flex;
	align-items: center;
	gap: calc(6 * var(--hn-u));
	color: var(--hn-navy);
	font-size: max(11px, calc(15 * var(--hn-u)));
	font-weight: 700;
}

.hn-meter__label .hn-icon {
	color: var(--hn-blue);
}

.hn-meter__bar {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: calc(4 * var(--hn-u));
}

.hn-meter__bar span {
	height: calc(10 * var(--hn-u));
	border-radius: calc(999 * var(--hn-u));
	background: #e3ecf6;
}

.hn-meter__bar span.is-on {
	background: var(--hn-blue);
}

.hn-meter__num {
	color: var(--hn-muted);
	font-size: max(11px, calc(14 * var(--hn-u)));
	font-weight: 700;
}

/* ◎○× */
.hn-ratings {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: calc(8 * var(--hn-u));
}

.hn-rating {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: calc(6 * var(--hn-u));
	min-height: max(44px, calc(76 * var(--hn-u)));
	padding: calc(12 * var(--hn-u));
	border: 1px solid var(--hn-border);
	border-radius: var(--hn-radius);
	background: var(--hn-white);
}

.hn-rating__name {
	display: flex;
	flex-direction: column;
	color: var(--hn-navy);
	font-size: max(11px, calc(16 * var(--hn-u)));
	font-weight: 800;
	line-height: 1.35;
}

.hn-rating__name small {
	color: var(--hn-muted);
	font-size: max(11px, calc(12 * var(--hn-u)));
	font-weight: 500;
}

.hn-rating__value {
	display: flex;
	align-items: center;
	gap: calc(6 * var(--hn-u));
	font-size: max(11px, calc(14 * var(--hn-u)));
	font-weight: 800;
}

.hn-rating__mark {
	font-size: max(11px, calc(20 * var(--hn-u)));
	line-height: 1;
}

.hn-rating--2 { border-color: #bfe6c9; background: #f3fbf5; }
.hn-rating--2 .hn-rating__value { color: var(--hn-green-dark); }
.hn-rating--1 .hn-rating__value { color: var(--hn-blue-deep); }
.hn-rating--0 { background: #f7f8fa; }
.hn-rating--0 .hn-rating__value { color: #8a3b2c; }
.hn-rating--0 .hn-rating__name { color: var(--hn-muted); }

/* 特徴 */
.hn-product__content {
	margin-bottom: calc(20 * var(--hn-u));
}

.hn-points {
	padding: calc(16 * var(--hn-u));
	border-radius: var(--hn-radius);
}

.hn-points + .hn-points {
	margin-top: calc(12 * var(--hn-u));
}

.hn-points--merit {
	background: #f3fbf5;
}

.hn-points--caution {
	background: #fff6f3;
}

.hn-main .hn-points__title {
	margin-bottom: calc(8 * var(--hn-u));
	font-size: max(11px, calc(16 * var(--hn-u)));
	font-weight: 800;
	padding: 0;
	background: none;
	border: 0;
}

.hn-points--merit .hn-points__title { color: var(--hn-green-dark); }
.hn-points--caution .hn-points__title { color: var(--hn-red-text); }

.hn-points li {
	display: flex;
	gap: calc(8 * var(--hn-u));
	font-size: max(11px, calc(15 * var(--hn-u)));
	line-height: 1.7;
}

.hn-points li + li {
	margin-top: calc(6 * var(--hn-u));
}

.hn-points li .hn-icon {
	margin-top: calc(3 * var(--hn-u));
}

.hn-points--merit li .hn-icon { color: var(--hn-green); }
.hn-points--caution li .hn-icon { color: var(--hn-red); }

/* 基本情報 */
.hn-specs {
	overflow: hidden;
	border: 1px solid var(--hn-border);
	border-radius: var(--hn-radius);
}

.hn-specs__row {
	display: grid;
	grid-template-columns: 7.5em 1fr;
	border-top: 1px solid var(--hn-border);
}

.hn-specs__row:first-child {
	border-top: 0;
}

.hn-specs dt,
.hn-specs dd {
	padding: calc(12 * var(--hn-u));
	font-size: max(11px, calc(15 * var(--hn-u)));
	line-height: 1.6;
}

.hn-specs dt {
	background: var(--hn-light-2);
	color: var(--hn-navy);
	font-weight: 700;
}

.hn-specs dd {
	word-break: break-word;
}

.hn-next {
	display: grid;
	gap: calc(12 * var(--hn-u));
}

/* 画面下の固定バー */
.hn-stickybar {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 90;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: calc(12 * var(--hn-u));
	padding: calc(10 * var(--hn-u)) calc(16 * var(--hn-u)) calc(calc(10 * var(--hn-u)) + env(safe-area-inset-bottom));
	border-top: 1px solid var(--hn-border);
	background: rgba(255, 255, 255, 0.97);
	box-shadow: 0 -4px calc(16 * var(--hn-u)) rgba(10, 42, 85, 0.1);
	transform: translateY(110%);
	transition: transform 0.25s ease;
}

.hn-stickybar[hidden] {
	display: none;
}

.hn-stickybar.is-visible {
	transform: none;
}

.hn-stickybar__price {
	display: flex;
	flex-direction: column;
	line-height: 1.2;
}

.hn-stickybar__price > span:first-child {
	color: var(--hn-muted);
	font-size: max(11px, calc(12 * var(--hn-u)));
	font-weight: 700;
}

.hn-stickybar .hn-offer__btn {
	flex: 1;
	max-width: calc(240 * var(--hn-u));
}

/* SWELLのページトップボタンと重ならないように */
.hn-has-stickybar #pagetop {
	bottom: calc(88 * var(--hn-u));
}

/* =========================================================
 * 記事内：この記事に関連する商品
 * （.post_content 内に入るため、SWELLの本文スタイルを打ち消す）
 * ======================================================= */

.hn-relprod {
	margin: 2.5em 0;
	padding: calc(16 * var(--hn-u));
	border: 2px solid var(--hn-light);
	border-radius: var(--hn-radius-lg);
	background: var(--hn-light-2);
	font-family: var(--hn-font);
	line-height: 1.6;
}

.post_content .hn-relprod__title,
.hn-relprod .hn-relprod__title {
	display: flex;
	align-items: center;
	gap: calc(8 * var(--hn-u));
	margin: 0 0 calc(12 * var(--hn-u));
	color: var(--hn-navy);
	font-size: max(11px, calc(17 * var(--hn-u)));
	font-weight: 800;
}

.hn-relprod__title .hn-icon {
	color: var(--hn-green);
}

.post_content .hn-relprod .hn-relprod__list {
	display: grid;
	gap: calc(10 * var(--hn-u));
	margin: 0;
	padding: 0;
	list-style: none;
}

.post_content .hn-relprod .hn-relprod__item,
.hn-relprod .hn-relprod__item {
	display: grid;
	grid-template-columns: calc(72 * var(--hn-u)) 1fr;
	gap: calc(8 * var(--hn-u)) calc(12 * var(--hn-u));
	align-items: center;
	margin: 0;
	padding: calc(12 * var(--hn-u));
	border: 1px solid var(--hn-border);
	border-radius: var(--hn-radius);
	background: var(--hn-white);
	list-style: none;
}

.hn-relprod .hn-relprod__item::before,
.hn-relprod .hn-relprod__item::marker {
	content: none;
}

.post_content .hn-relprod .hn-relprod__thumb {
	display: block;
	width: calc(72 * var(--hn-u));
	height: max(44px, calc(72 * var(--hn-u)));
	border: 0;
}

.post_content .hn-relprod .hn-relprod__thumb img {
	width: 100%;
	height: 100%;
	margin: 0;
	object-fit: contain;
	border-radius: calc(8 * var(--hn-u));
}

.hn-relprod__body {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

.hn-relprod__maker {
	color: var(--hn-muted);
	font-size: max(11px, calc(12 * var(--hn-u)));
}

.post_content .hn-relprod .hn-relprod__name {
	color: var(--hn-navy);
	font-size: max(11px, calc(16 * var(--hn-u)));
	font-weight: 800;
	line-height: 1.45;
	text-decoration: none;
}

.hn-relprod__price {
	color: var(--hn-muted);
	font-size: max(11px, calc(13 * var(--hn-u)));
}

.hn-relprod__price .hn-price {
	font-size: max(11px, calc(18 * var(--hn-u)));
}

.post_content .hn-relprod .hn-relprod__cta {
	grid-column: 1 / -1;
	width: 100%;
	color: var(--hn-white);
	text-decoration: none;
}

/* =========================================================
 * 768px〜 タブレット
 * ======================================================= */

@media (min-width: 768px) {

	.hn-section {
		margin-top: calc(56 * var(--hn-u));
	}

	.hn-main .hn-sec-title {
		font-size: max(11px, calc(24 * var(--hn-u)));
	}

	.hn-hero {
		margin: calc(24 * var(--hn-u)) 0 0;
		padding: calc(48 * var(--hn-u)) calc(40 * var(--hn-u)) 0;
		border-radius: var(--hn-radius-lg);
	}

	.hn-main .hn-hero__title {
		font-size: max(11px, calc(42 * var(--hn-u)));
	}

	.hn-hero__lead {
		font-size: max(11px, calc(17 * var(--hn-u)));
	}

	.hn-hero__points {
		max-width: calc(560 * var(--hn-u));
		margin-top: calc(32 * var(--hn-u));
	}

	.hn-entry {
		grid-template-columns: 1fr 1fr;
		align-items: stretch;
	}

	.hn-main .hn-diagcta {
		min-height: 100%;
	}

	.hn-locs {
		grid-template-columns: repeat(3, 1fr);
		gap: calc(16 * var(--hn-u));
	}

	.hn-worries,
	.hn-posts {
		grid-template-columns: repeat(2, 1fr);
	}

	.hn-plist {
		grid-template-columns: repeat(2, 1fr);
		gap: calc(20 * var(--hn-u));
	}

	.hn-plist--rank {
		grid-template-columns: 1fr;
	}

	.hn-shortcuts {
		grid-template-columns: repeat(4, 1fr);
	}

	.hn-catnav ul {
		grid-template-columns: repeat(3, 1fr);
	}

	.hn-postcard__thumb {
		width: calc(140 * var(--hn-u));
	}

	.hn-diag-options {
		grid-template-columns: 1fr 1fr;
	}

	.hn-diag-step--grid .hn-diag-options {
		grid-template-columns: repeat(3, 1fr);
	}

	.hn-main .hn-diag-step {
		padding: calc(28 * var(--hn-u));
	}

	.hn-product__hero {
		grid-template-columns: calc(300 * var(--hn-u)) 1fr;
		gap: calc(28 * var(--hn-u));
		align-items: start;
	}

	.hn-ratings {
		grid-template-columns: repeat(3, 1fr);
	}

	.hn-offers {
		gap: calc(12 * var(--hn-u));
	}

	.hn-offer__price {
		flex-basis: auto;
		margin-left: auto;
		margin-right: calc(8 * var(--hn-u));
	}

	.hn-offer__info {
		flex: 1;
	}

	.hn-main .hn-offer__btn {
		min-width: calc(180 * var(--hn-u));
	}

	.hn-sheet__panel {
		max-width: calc(720 * var(--hn-u));
	}

	.hn-js .hn-sheet__panel {
		left: 50%;
		width: 100%;
		transform: translateX(-50%);
		animation: none;
	}

	.hn-next {
		grid-template-columns: 1fr 1fr;
		align-items: stretch;
	}

	.post_content .hn-relprod .hn-relprod__item,
	.hn-relprod .hn-relprod__item {
		grid-template-columns: calc(72 * var(--hn-u)) 1fr auto;
	}

	.post_content .hn-relprod .hn-relprod__cta {
		grid-column: auto;
		width: auto;
	}
}

/* =========================================================
 * 1024px〜 PC（横に引き伸ばさず最大幅で止める）
 * ======================================================= */

@media (min-width: 1024px) {

	.hn-hero {
		padding: calc(64 * var(--hn-u)) calc(56 * var(--hn-u)) 0;
	}

	.hn-main .hn-hero__title {
		font-size: max(11px, calc(48 * var(--hn-u)));
	}

	.hn-locs {
		grid-template-columns: repeat(6, 1fr);
	}

	.hn-worries {
		grid-template-columns: repeat(3, 1fr);
	}

	.hn-plist--rank {
		grid-template-columns: repeat(3, 1fr);
	}

	.hn-posts {
		grid-template-columns: repeat(3, 1fr);
	}

	.hn-main .hn-postcard__link {
		flex-direction: column;
	}

	.hn-postcard__thumb {
		width: 100%;
	}

	/* 一覧：左に絞り込みを常時表示 */
	.hn-archive__layout {
		display: grid;
		grid-template-columns: calc(300 * var(--hn-u)) 1fr;
		gap: calc(32 * var(--hn-u));
		align-items: start;
	}

	.hn-archive__side {
		position: sticky;
		top: calc(96 * var(--hn-u));
	}

	.hn-js .hn-sheet {
		position: static;
		display: block;
		z-index: auto;
	}

	.hn-js .hn-sheet__backdrop,
	.hn-js .hn-main .hn-sheet__close,
	.hn-toolbar__filter,
	.hn-js .hn-toolbar__filter {
		display: none;
	}

	.hn-js .hn-sheet__panel {
		position: static;
		transform: none;
		max-height: calc(100vh - calc(120 * var(--hn-u)));
		border: 1px solid var(--hn-border);
		border-radius: var(--hn-radius-lg);
		box-shadow: none;
	}

	.hn-js .hn-sheet__foot {
		border-radius: 0 0 var(--hn-radius-lg) var(--hn-radius-lg);
	}

	.hn-choices {
		grid-template-columns: 1fr;
	}

	.hn-product__hero {
		grid-template-columns: calc(420 * var(--hn-u)) 1fr;
		gap: calc(40 * var(--hn-u));
		align-items: start;
	}

	/* PC：画像は左で追従、右に仕様→説明→ボタン */
	.hn-product__image {
		position: sticky;
		top: calc(96 * var(--hn-u));
	}

	.hn-keyspecs__row {
		grid-template-columns: 7.5em 1fr;
	}

	.hn-product__image {
		max-width: calc(400 * var(--hn-u));
	}

	.hn-main .hn-product__image img {
		max-height: calc(400 * var(--hn-u));
	}

	.hn-single .hn-product {
		max-width: calc(960 * var(--hn-u));
		margin: 0 auto;
	}

	.hn-stickybar {
		display: none;
	}
}


/* =========================================================
 * 商品ページ上部：主な仕様・アフィリエイトボタン
 * （スマホ：画像→仕様→説明→ボタン／PC：左に画像・右に仕様→説明→ボタン）
 * ======================================================= */

.hn-keyspecs {
	overflow: hidden;
	border: 1px solid var(--hn-border);
	border-radius: var(--hn-radius);
	background: var(--hn-white);
}

.hn-keyspecs__row {
	display: grid;
	grid-template-columns: 6.2em 1fr;
	align-items: center;
	border-top: 1px solid var(--hn-border);
}

.hn-keyspecs__row:first-child {
	border-top: 0;
}

.hn-keyspecs dt {
	align-self: stretch;
	display: flex;
	align-items: center;
	padding: calc(10 * var(--hn-u)) calc(12 * var(--hn-u));
	background: var(--hn-light-2);
	color: var(--hn-navy);
	font-size: max(11px, calc(13 * var(--hn-u)));
	font-weight: 800;
}

.hn-keyspecs dd {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: calc(6 * var(--hn-u));
	padding: calc(8 * var(--hn-u)) calc(12 * var(--hn-u));
	font-size: max(11px, calc(15 * var(--hn-u)));
	line-height: 1.5;
}

.hn-main .hn-spec-chip {
	display: inline-flex;
	align-items: center;
	min-height: calc(30 * var(--hn-u));
	padding: 2px calc(10 * var(--hn-u));
	border: 1px solid var(--hn-border-strong);
	border-radius: calc(999 * var(--hn-u));
	background: var(--hn-white);
	color: var(--hn-blue-deep);
	font-size: max(11px, calc(13 * var(--hn-u)));
	font-weight: 700;
	line-height: 1.3;
}

.hn-main .hn-spec-chip.is-best {
	border-color: var(--hn-blue);
	background: var(--hn-blue);
	color: var(--hn-white);
}

.hn-main a.hn-spec-chip:hover {
	border-color: var(--hn-blue-deep);
}

.hn-keyspecs__text {
	color: var(--hn-text);
	font-size: max(11px, calc(14 * var(--hn-u)));
}

.hn-keyspecs__flag {
	font-size: max(11px, calc(14 * var(--hn-u)));
	font-weight: 800;
}

.hn-keyspecs__flag.is-ok { color: var(--hn-green-dark); }
.hn-keyspecs__flag.is-ng { color: var(--hn-red-text); }

.hn-keyspecs__cost {
	color: var(--hn-navy);
	font-size: max(11px, calc(17 * var(--hn-u)));
	font-weight: 900;
}

.hn-main .hn-keyspecs__legend {
	display: flex;
	align-items: center;
	gap: calc(6 * var(--hn-u));
	margin-top: -2px;
	color: var(--hn-muted);
	font-size: max(11px, calc(12 * var(--hn-u)));
}

.hn-main .hn-spec-chip.is-sample {
	min-height: calc(20 * var(--hn-u));
	padding: 0 calc(8 * var(--hn-u));
	font-size: max(11px, calc(11 * var(--hn-u)));
}

/* アフィリエイトボタン */
.hn-buybox {
	scroll-margin-top: calc(80 * var(--hn-u));
	padding: calc(14 * var(--hn-u));
	border: 1px solid var(--hn-border);
	border-radius: var(--hn-radius-lg);
	background: var(--hn-light-2);
}

.hn-buybox__offers {
	display: grid;
	gap: calc(8 * var(--hn-u));
}

.hn-buybox__offer {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: calc(10 * var(--hn-u));
	padding: calc(10 * var(--hn-u)) calc(10 * var(--hn-u)) calc(10 * var(--hn-u)) calc(14 * var(--hn-u));
	border: 1px solid var(--hn-border);
	border-radius: var(--hn-radius);
	background: var(--hn-white);
}

.hn-buybox__offer.is-lowest {
	border: 2px solid var(--hn-red);
}

.hn-buybox__info {
	display: flex;
	flex-direction: column;
	min-width: 0;
	line-height: 1.3;
}

.hn-buybox__shop {
	display: flex;
	align-items: center;
	gap: calc(6 * var(--hn-u));
	color: var(--hn-navy);
	font-size: max(11px, calc(13 * var(--hn-u)));
	font-weight: 800;
}

.hn-buybox__info .hn-price {
	font-size: max(11px, calc(20 * var(--hn-u)));
}

.hn-buybox__time {
	color: var(--hn-muted);
	font-size: max(11px, calc(11 * var(--hn-u)));
}

.hn-buybox__info .hn-price--none {
	font-size: max(11px, calc(13 * var(--hn-u)));
}

.hn-buybox .hn-offer__btn {
	flex-shrink: 0;
	min-width: calc(132 * var(--hn-u));
}

.hn-buybox__about {
	margin-top: calc(8 * var(--hn-u));
	color: var(--hn-muted);
	font-size: max(11px, calc(12 * var(--hn-u)));
}

.hn-buybox__about summary {
	display: inline-flex;
	align-items: center;
	min-height: calc(32 * var(--hn-u));
	cursor: pointer;
	text-decoration: underline;
	text-underline-offset: 2px;
}

.hn-main .hn-buybox__about p {
	margin-top: calc(4 * var(--hn-u));
	line-height: 1.7;
}

/* 広告表記（PR） */
.hn-pr-label {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: calc(20 * var(--hn-u));
	margin-right: calc(8 * var(--hn-u));
	padding: 0 calc(7 * var(--hn-u));
	border: 1px solid #b8c2cf;
	border-radius: calc(4 * var(--hn-u));
	color: #6b7788;
	font-size: max(11px, calc(11 * var(--hn-u)));
	font-weight: 700;
	letter-spacing: 0.04em;
	line-height: 1;
	vertical-align: middle;
}

.hn-relprod__title .hn-pr-label {
	margin: 0 0 0 auto;
}

.hn-product__summary {
	gap: calc(12 * var(--hn-u));
}

/* =========================================================
 * FitPicker型の比較部品（ランキング・単価・順位・FAQ）
 * ======================================================= */

/* ランキングページの概要 */
.hn-rankstats {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: calc(8 * var(--hn-u));
	margin: calc(12 * var(--hn-u)) 0 calc(8 * var(--hn-u));
}

.hn-rankstats li {
	display: flex;
	flex-direction: column;
	padding: calc(10 * var(--hn-u)) calc(12 * var(--hn-u));
	border-radius: var(--hn-radius-sm);
	background: var(--hn-light);
	color: var(--hn-navy);
	font-size: max(11px, calc(12 * var(--hn-u)));
	line-height: 1.4;
}

.hn-rankstats li span {
	color: var(--hn-muted);
	font-weight: 700;
}

.hn-rankstats li b {
	font-size: max(11px, calc(13 * var(--hn-u)));
	font-weight: 700;
	white-space: nowrap;
}

.hn-rankstats li strong {
	margin-right: 1px;
	font-size: max(11px, calc(18 * var(--hn-u)));
	font-weight: 900;
}

/* 単価 */
.hn-unitprice {
	display: flex;
	flex-wrap: wrap;
	gap: calc(8 * var(--hn-u));
}

.hn-unitprice li {
	display: flex;
	align-items: baseline;
	gap: calc(6 * var(--hn-u));
	padding: calc(6 * var(--hn-u)) calc(12 * var(--hn-u));
	border-radius: calc(999 * var(--hn-u));
	background: var(--hn-white);
	border: 1px solid var(--hn-border);
	font-size: max(11px, calc(13 * var(--hn-u)));
}

.hn-unitprice li span {
	color: var(--hn-muted);
	font-weight: 700;
}

.hn-unitprice li strong {
	color: var(--hn-navy);
	font-size: max(11px, calc(16 * var(--hn-u)));
	font-weight: 900;
}

/* ランキング内の順位 */
.hn-main .hn-rankpos {
	display: grid;
	grid-template-columns: 1fr auto;
	gap: 2px calc(12 * var(--hn-u));
	align-items: center;
	padding: calc(16 * var(--hn-u));
	border: 2px solid #f1d27a;
	border-radius: var(--hn-radius-lg);
	background: #fffbef;
	color: var(--hn-navy);
}

.hn-rankpos__label {
	grid-column: 1 / -1;
	font-size: max(11px, calc(14 * var(--hn-u)));
	font-weight: 700;
}

.hn-rankpos__value {
	font-size: max(11px, calc(15 * var(--hn-u)));
	font-weight: 700;
}

.hn-rankpos__value strong {
	font-size: max(11px, calc(22 * var(--hn-u)));
	font-weight: 900;
}

.hn-rankpos__pos {
	color: #c7900a;
	font-size: max(11px, calc(30 * var(--hn-u)));
}

.hn-rankpos__by {
	grid-column: 1 / 2;
	color: var(--hn-muted);
	font-size: max(11px, calc(13 * var(--hn-u)));
}

.hn-rankpos__more {
	grid-column: 2;
	grid-row: 2 / 4;
	display: inline-flex;
	align-items: center;
	gap: 2px;
	color: var(--hn-blue);
	font-size: max(11px, calc(14 * var(--hn-u)));
	font-weight: 700;
	white-space: nowrap;
}

.hn-rankpos__more .hn-icon {
	width: calc(18 * var(--hn-u));
	height: calc(18 * var(--hn-u));
}

.hn-main .hn-compare__subtitle {
	margin: calc(24 * var(--hn-u)) 0 calc(12 * var(--hn-u));
	color: var(--hn-navy);
	font-size: max(11px, calc(17 * var(--hn-u)));
	font-weight: 800;
}

.hn-altlist {
	display: grid;
	gap: calc(10 * var(--hn-u));
}

.hn-main .hn-alt {
	display: flex;
	align-items: center;
	gap: calc(12 * var(--hn-u));
	min-height: max(44px, calc(72 * var(--hn-u)));
	padding: calc(10 * var(--hn-u)) calc(12 * var(--hn-u));
	border: 1px solid var(--hn-border);
	border-radius: var(--hn-radius);
	background: var(--hn-white);
}

.hn-main .hn-alt:hover {
	border-color: var(--hn-blue);
}

.hn-alt__thumb {
	flex-shrink: 0;
	width: max(44px, calc(56 * var(--hn-u)));
	height: max(44px, calc(56 * var(--hn-u)));
}

.hn-main .hn-alt__thumb img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.hn-alt__body {
	display: flex;
	flex-direction: column;
	flex: 1;
	min-width: 0;
	gap: 2px;
}

.hn-alt__name {
	color: var(--hn-navy);
	font-size: max(11px, calc(15 * var(--hn-u)));
	font-weight: 800;
	line-height: 1.4;
}

.hn-alt__price {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: calc(4 * var(--hn-u)) calc(10 * var(--hn-u));
}

.hn-alt__price .hn-price {
	font-size: max(11px, calc(17 * var(--hn-u)));
}

.hn-alt__unit {
	color: var(--hn-green-dark);
	font-size: max(11px, calc(13 * var(--hn-u)));
	font-weight: 700;
}

.hn-alt__arrow {
	color: var(--hn-blue);
}

/* よくある質問 */
.hn-faq__list {
	display: grid;
	gap: calc(10 * var(--hn-u));
}

.hn-faq__item {
	border: 1px solid var(--hn-border);
	border-radius: var(--hn-radius);
	background: var(--hn-white);
}

.hn-faq__q {
	display: flex;
	align-items: center;
	gap: calc(10 * var(--hn-u));
	min-height: max(44px, calc(56 * var(--hn-u)));
	padding: calc(12 * var(--hn-u)) calc(14 * var(--hn-u));
	color: var(--hn-navy);
	font-size: max(11px, calc(15 * var(--hn-u)));
	font-weight: 800;
	line-height: 1.5;
	cursor: pointer;
	list-style: none;
}

.hn-faq__q::-webkit-details-marker {
	display: none;
}

.hn-faq__q > span:nth-child(2) {
	flex: 1;
}

.hn-faq__mark {
	display: grid;
	place-items: center;
	flex-shrink: 0;
	width: calc(28 * var(--hn-u));
	height: calc(28 * var(--hn-u));
	border-radius: 50%;
	background: var(--hn-blue);
	color: var(--hn-white);
	font-size: max(11px, calc(14 * var(--hn-u)));
	font-weight: 900;
}

.hn-faq__mark--a {
	background: var(--hn-green);
}

.hn-faq__arrow {
	color: var(--hn-muted);
	transition: transform 0.2s;
}

.hn-faq__item[open] .hn-faq__arrow {
	transform: rotate(180deg);
}

.hn-faq__a {
	display: flex;
	gap: calc(10 * var(--hn-u));
	padding: 0 calc(14 * var(--hn-u)) calc(14 * var(--hn-u));
	font-size: max(11px, calc(15 * var(--hn-u)));
	line-height: 1.75;
}

/* カテゴリ別ランキングのリンク集 */
.hn-rankingnav__group + .hn-rankingnav__group {
	margin-top: calc(16 * var(--hn-u));
}

.hn-main .hn-rankingnav__label {
	margin-bottom: calc(8 * var(--hn-u));
	color: var(--hn-muted);
	font-size: max(11px, calc(14 * var(--hn-u)));
	font-weight: 700;
}

.hn-rankingnav__list {
	display: flex;
	flex-wrap: wrap;
	gap: calc(8 * var(--hn-u));
}

.hn-main .hn-rankingnav__link {
	display: inline-flex;
	align-items: center;
	min-height: max(44px, calc(44 * var(--hn-u)));
	padding: 0 calc(16 * var(--hn-u));
	border: 1px solid var(--hn-border-strong);
	border-radius: calc(999 * var(--hn-u));
	background: var(--hn-white);
	color: var(--hn-navy);
	font-size: max(11px, calc(14 * var(--hn-u)));
	font-weight: 700;
}

.hn-main .hn-rankingnav__link:hover,
.hn-main .hn-rankingnav__link.is-current {
	border-color: var(--hn-blue);
	background: var(--hn-light);
	color: var(--hn-blue-deep);
}

/* ◎○×の名前からランキングへ */
.hn-main .hn-rating__name a {
	color: var(--hn-navy);
	text-decoration: underline;
	text-decoration-color: var(--hn-border-strong);
	text-underline-offset: calc(3 * var(--hn-u));
}

@media (min-width: 768px) {
	.hn-rankstats {
		max-width: calc(640 * var(--hn-u));
	}

	.hn-faq__list {
		gap: calc(12 * var(--hn-u));
	}
}

/* =========================================================
 * PC（1024px〜）：トップ・診断のPCデザイン
 * ※ スマホ・タブレットの見た目には影響しません
 * ======================================================= */

@media (min-width: 1024px) {

	/* 画面幅いっぱいの背景が数pxはみ出しても横スクロールを出さない（clip は sticky を壊さない） */
	#body_wrap.hn-page {
		overflow-x: clip;
	}

	/* ---------- 専用ヘッダー ---------- */
	.hn-hide-swell-header-pc #header,
	.hn-hide-swell-header-pc #fix_header {
		display: none;
	}

	.hn-topbar-space.hn-topbar--pc-only {
		display: block;
	}

	header.hn-topbar--pc-only {
		display: block;
	}

	.hn-topbar-space,
	.hn-topbar__inner {
		height: max(44px, calc(76 * var(--hn-u)));
	}

	.hn-topbar {
		border-bottom-color: transparent;
		box-shadow: 0 2px calc(12 * var(--hn-u)) rgba(10, 42, 85, 0.06);
	}

	.hn-topbar__inner {
		gap: calc(32 * var(--hn-u));
		padding: 0 calc(24 * var(--hn-u));
	}

	.hn-topbar__logo img,
	.hn-topbar__logo-img {
		max-width: calc(320 * var(--hn-u));
		height: max(44px, calc(44 * var(--hn-u)));
	}

	.hn-topbar__nav {
		display: block;
	}

	.hn-topbar__menu {
		display: flex;
		gap: calc(4 * var(--hn-u));
		margin: 0;
		padding: 0;
		list-style: none;
	}

	.hn-topbar__menu a {
		display: flex;
		align-items: center;
		min-height: max(44px, calc(44 * var(--hn-u)));
		padding: 0 calc(14 * var(--hn-u));
		border-radius: calc(999 * var(--hn-u));
		color: var(--hn-navy);
		font-size: max(11px, calc(15 * var(--hn-u)));
		font-weight: 700;
		text-decoration: none;
		white-space: nowrap;
	}

	.hn-topbar__menu a:hover {
		background: var(--hn-light);
		color: var(--hn-blue);
	}

	.hn-topbar__search {
		position: relative;
		display: block;
		flex-shrink: 0;
		width: calc(320 * var(--hn-u));
	}

	.hn-topbar .hn-topbar__search .hn-search__input {
		width: 100%;
		height: max(44px, calc(46 * var(--hn-u)));
		margin: 0;
		padding: 0 calc(52 * var(--hn-u)) 0 calc(20 * var(--hn-u));
		border: 1.5px solid var(--hn-border-strong);
		border-radius: calc(999 * var(--hn-u));
		background: var(--hn-white);
		color: var(--hn-text);
		font-family: inherit;
		font-size: max(13px, calc(14 * var(--hn-u))); /* PC専用の検索窓なので比率どおりに縮める（スマホの入力欄は16px以上を維持） */
		box-shadow: none;
		-webkit-appearance: none;
		appearance: none;
	}

	.hn-topbar .hn-topbar__search .hn-search__input:focus {
		border-color: var(--hn-blue);
		outline: none;
		box-shadow: 0 0 0 calc(4 * var(--hn-u)) rgba(8, 119, 232, 0.15);
	}

	.hn-topbar .hn-topbar__search-btn {
		position: absolute;
		top: 1px;
		right: 2px;
		display: grid;
		place-items: center;
		width: max(44px, calc(44 * var(--hn-u)));
		height: max(44px, calc(44 * var(--hn-u)));
		padding: 0;
		border: 0;
		border-radius: 50%;
		background: transparent;
		color: var(--hn-navy);
		cursor: pointer;
	}

	.hn-topbar .hn-topbar__search-btn .hn-icon {
		width: calc(22 * var(--hn-u));
		height: calc(22 * var(--hn-u));
	}

	/* PCはナビと検索窓を出すので、ボタンは隠す */
	.hn-topbar .hn-topbar__btn--menu,
	.hn-topbar .hn-topbar__btn--search {
		display: none;
	}

	.hn-sec-title {
		scroll-margin-top: calc(100 * var(--hn-u));
	}

	/* ---------- ヒーロー（画面幅いっぱい＋下端の波） ---------- */
	.hn-front .hn-hero {
		min-height: max(44px, calc(640 * var(--hn-u)));
		/* PCはスクロールバーに幅があるため、SWELLが出力する --swl-scrollbar_width を差し引く */
		margin: 0 calc(50% - 50vw + var(--swl-scrollbar_width, 0px) / 2);
		padding: calc(72 * var(--hn-u)) max(calc(40 * var(--hn-u)), calc((100vw - var(--swl-scrollbar_width, 0px) - calc(1180 * var(--hn-u))) / 2)) calc(270 * var(--hn-u));
		border-radius: 0;
	}

	.hn-front .hn-hero__bg::after {
		background:
			linear-gradient(90deg, rgba(255, 255, 255, 0.92) 0%, rgba(255, 255, 255, 0.72) 30%, rgba(255, 255, 255, 0) 58%),
			linear-gradient(0deg, rgba(255, 255, 255, 0.9) 0%, rgba(255, 255, 255, 0) 30%);
	}

	.hn-front .hn-hero::after {
		content: "";
		position: absolute;
		left: 0;
		right: 0;
		bottom: -1px;
		z-index: 1;
		height: max(44px, calc(110 * var(--hn-u)));
		background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 110' preserveAspectRatio='none'%3E%3Cpath d='M0 70C240 20 520 0 780 22s460 60 660 18v70H0z' fill='%23fff'/%3E%3C/svg%3E") center bottom / 100% 100% no-repeat;
	}

	.hn-front .hn-hero__inner {
		max-width: calc(720 * var(--hn-u));
	}

	.hn-front .hn-hero__catch {
		position: relative;
		flex-direction: row;
		margin: 0 0 calc(18 * var(--hn-u)) 0;
		padding-bottom: calc(10 * var(--hn-u));
		font-size: max(11px, calc(28 * var(--hn-u)));
		transform: rotate(-5deg);
	}

	.hn-front .hn-hero__catch span + span {
		padding-left: 0;
	}

	/* 手書き風の下線 */
	.hn-front .hn-hero__catch::after {
		content: "";
		position: absolute;
		left: 20%;
		right: 0;
		bottom: 0;
		height: calc(12 * var(--hn-u));
		background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 12' preserveAspectRatio='none'%3E%3Cpath d='M2 9C80 3 180 2 298 5' stroke='%237aa4d6' stroke-width='3' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
	}

	.hn-main.hn-front .hn-hero__title {
		font-size: max(11px, calc(64 * var(--hn-u)));
		line-height: 1.25;
		letter-spacing: 0.02em;
	}

	.hn-front .hn-hero__lead {
		margin-top: calc(22 * var(--hn-u));
		font-size: max(11px, calc(19 * var(--hn-u)));
		line-height: 1.8;
	}

	/* PCでは特徴3点は出さない（モックアップどおり） */
	.hn-front .hn-hero__points {
		display: none;
	}

	/* ---------- 診断ボタン＋商品名検索（ヒーローに重ねて横並び） ---------- */
	.hn-main.hn-front .hn-entry {
		position: relative;
		z-index: 3;
		grid-template-columns: 1.1fr 1fr;
		gap: calc(32 * var(--hn-u));
		align-items: stretch;
		margin-top: -230px;
	}

	.hn-main.hn-front .hn-diagcta,
	.hn-front .hn-diagcta {
		min-height: max(44px, calc(176 * var(--hn-u)));
		margin-top: 0;
		padding: calc(28 * var(--hn-u)) calc(64 * var(--hn-u)) calc(28 * var(--hn-u)) calc(220 * var(--hn-u));
		border-radius: calc(28 * var(--hn-u));
	}

	.hn-front .hn-diagcta__mascot {
		left: calc(20 * var(--hn-u));
		width: calc(190 * var(--hn-u));
		height: max(44px, calc(196 * var(--hn-u)));
	}

	.hn-main.hn-front .hn-diagcta__mascot img,
	.hn-front .hn-diagcta__mascot img {
		width: calc(190 * var(--hn-u));
		height: max(44px, calc(196 * var(--hn-u)));
	}

	.hn-front .hn-diagcta__body {
		gap: calc(8 * var(--hn-u));
	}

	.hn-front .hn-diagcta__lead {
		padding: calc(5 * var(--hn-u)) calc(18 * var(--hn-u));
		font-size: max(11px, calc(15 * var(--hn-u)));
	}

	.hn-front .hn-diagcta__label {
		font-size: max(11px, calc(40 * var(--hn-u)));
	}

	.hn-front .hn-diagcta__label small {
		font-size: 1em;
	}

	.hn-front .hn-diagcta__note {
		font-size: max(11px, calc(18 * var(--hn-u)));
	}

	.hn-front .hn-diagcta__arrow {
		right: calc(26 * var(--hn-u));
		width: calc(34 * var(--hn-u));
		height: calc(34 * var(--hn-u));
	}

	.hn-front .hn-searchbox {
		display: flex;
		flex-direction: column;
		justify-content: center;
		padding: calc(28 * var(--hn-u)) calc(32 * var(--hn-u));
		border: 0;
		border-radius: calc(28 * var(--hn-u));
		box-shadow: 0 calc(12 * var(--hn-u)) calc(40 * var(--hn-u)) rgba(10, 42, 85, 0.12);
	}

	.hn-main.hn-front .hn-searchbox__title,
	.hn-front .hn-searchbox__title {
		flex-direction: row;
		align-items: center;
		gap: calc(12 * var(--hn-u));
		margin-bottom: calc(18 * var(--hn-u));
		padding: 0;
		font-size: max(11px, calc(24 * var(--hn-u)));
	}

	.hn-front .hn-searchbox__title small {
		display: none;
	}

	.hn-front .hn-searchbox__pcicon {
		display: grid;
		color: var(--hn-blue);
	}

	.hn-front .hn-searchbox__pcicon .hn-icon {
		width: calc(30 * var(--hn-u));
		height: calc(30 * var(--hn-u));
		stroke-width: 2.6;
	}

	.hn-main.hn-front .hn-searchbox__note,
	.hn-front .hn-searchbox__note {
		display: block;
		margin-top: calc(12 * var(--hn-u));
		padding-left: calc(12 * var(--hn-u));
		color: var(--hn-muted);
		font-size: max(11px, calc(14 * var(--hn-u)));
	}

	.hn-main.hn-front .hn-search__input {
		height: max(44px, calc(64 * var(--hn-u)));
		padding: 0 calc(76 * var(--hn-u)) 0 calc(28 * var(--hn-u));
		font-size: max(16px, calc(18 * var(--hn-u)));
	}

	.hn-front .hn-search__icon {
		display: none;
	}

	.hn-main.hn-front .hn-search__submit {
		right: calc(8 * var(--hn-u));
		width: max(44px, calc(52 * var(--hn-u)));
		height: max(44px, calc(52 * var(--hn-u)));
		background: var(--hn-blue);
		color: var(--hn-white);
		box-shadow: 0 calc(4 * var(--hn-u)) calc(12 * var(--hn-u)) rgba(8, 119, 232, 0.3);
	}

	.hn-main.hn-front .hn-search__submit:hover {
		background: var(--hn-blue-dark);
	}

	.hn-front .hn-search__submit-sp {
		display: none;
	}

	.hn-front .hn-search__submit-pc {
		display: block;
	}

	/* ---------- セクション見出し（左に青い線） ---------- */
	.hn-front .hn-section {
		margin-top: calc(72 * var(--hn-u));
	}

	.hn-main.hn-front .hn-sec-title,
	.hn-front .hn-sec-title {
		font-size: max(11px, calc(30 * var(--hn-u)));
	}

	.hn-front .hn-sec-head .hn-sec-title::before {
		content: "";
		flex-shrink: 0;
		width: calc(6 * var(--hn-u));
		height: calc(32 * var(--hn-u));
		margin-right: calc(8 * var(--hn-u));
		border-radius: calc(3 * var(--hn-u));
		background: var(--hn-blue);
	}

	.hn-front .hn-sec-head {
		margin-bottom: calc(24 * var(--hn-u));
	}

	/* ---------- よく使う場所（6枚を横1列） ---------- */
	.hn-front .hn-locs {
		grid-template-columns: repeat(6, 1fr);
		gap: calc(20 * var(--hn-u));
	}

	.hn-main.hn-front .hn-loc {
		position: relative;
		padding: 0;
		border: 0;
		border-radius: calc(18 * var(--hn-u));
		box-shadow: 0 calc(6 * var(--hn-u)) calc(20 * var(--hn-u)) rgba(10, 42, 85, 0.09);
		text-align: left;
		transition: transform 0.15s, box-shadow 0.15s;
	}

	.hn-main.hn-front .hn-loc:hover {
		transform: translateY(-2px);
		box-shadow: 0 calc(10 * var(--hn-u)) calc(28 * var(--hn-u)) rgba(10, 42, 85, 0.14);
	}

	.hn-front .hn-loc__media {
		border-radius: 0;
		aspect-ratio: 16 / 10;
	}

	.hn-front .hn-loc__label {
		padding: calc(18 * var(--hn-u)) calc(44 * var(--hn-u)) calc(20 * var(--hn-u)) calc(20 * var(--hn-u));
		font-size: max(11px, calc(18 * var(--hn-u)));
	}

	.hn-front .hn-loc__sub {
		display: none;
	}

	.hn-front .hn-loc__arrow {
		position: absolute;
		right: calc(16 * var(--hn-u));
		bottom: calc(22 * var(--hn-u));
		display: block;
		width: calc(22 * var(--hn-u));
		height: calc(22 * var(--hn-u));
		color: var(--hn-blue);
		stroke-width: 2.6;
	}

	/* ---------- 診断ページ ---------- */
	.hn-diag.hn-main {
		position: relative;
		max-width: calc(1000 * var(--hn-u));
		padding-top: calc(40 * var(--hn-u));
	}

	/* 背景の写真帯（ヒーロー背景と同じ画像）＋波 */
	.hn-diag.hn-main::before,
	.hn-diag.hn-main::after {
		content: "";
		position: absolute;
		top: 0;
		left: calc(50% - 50vw + var(--swl-scrollbar_width, 0px) / 2);
		z-index: 0;
		width: calc(100vw - var(--swl-scrollbar_width, 0px));
		pointer-events: none;
	}

	.hn-diag.hn-main::before {
		height: max(44px, calc(460 * var(--hn-u)));
		background:
			linear-gradient(90deg, rgba(255, 255, 255, 0.94) 0%, rgba(255, 255, 255, 0.78) 40%, rgba(255, 255, 255, 0.35) 75%),
			linear-gradient(0deg, #fff 0%, rgba(255, 255, 255, 0) 45%),
			var(--hn-band-img, none) center 30% / cover no-repeat,
			var(--hn-light);
	}

	.hn-diag.hn-main::after {
		top: calc(360 * var(--hn-u));
		height: max(44px, calc(100 * var(--hn-u)));
		background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 100' preserveAspectRatio='none'%3E%3Cpath d='M0 60C240 15 520 0 780 20s460 55 660 15v65H0z' fill='%23fff'/%3E%3C/svg%3E") center bottom / 100% 100% no-repeat;
	}

	.hn-diag.hn-main > * {
		position: relative;
		z-index: 1;
	}

	.hn-diag__top {
		max-width: calc(640 * var(--hn-u));
	}

	.hn-progress__num {
		font-size: max(11px, calc(20 * var(--hn-u)));
	}

	.hn-progress__bar {
		height: calc(12 * var(--hn-u));
	}

	.hn-diag__intro {
		gap: calc(20 * var(--hn-u));
		margin: calc(24 * var(--hn-u)) 0 calc(28 * var(--hn-u));
	}

	.hn-diag__mascot {
		width: calc(150 * var(--hn-u));
		height: max(44px, calc(170 * var(--hn-u)));
	}

	.hn-diag__bubble {
		flex: 0 1 auto;
		margin-bottom: calc(36 * var(--hn-u));
		padding: calc(22 * var(--hn-u)) calc(32 * var(--hn-u));
		border: 0;
		border-radius: calc(28 * var(--hn-u));
		box-shadow: 0 calc(10 * var(--hn-u)) calc(32 * var(--hn-u)) rgba(10, 42, 85, 0.12);
	}

	.hn-diag__bubble::before {
		border: 0;
	}

	.hn-diag__lead {
		font-size: max(11px, calc(22 * var(--hn-u)));
		line-height: 1.6;
	}

	.hn-main .hn-diag-step {
		padding: calc(40 * var(--hn-u)) calc(44 * var(--hn-u));
		border: 0;
		border-radius: calc(28 * var(--hn-u));
		box-shadow: 0 calc(12 * var(--hn-u)) calc(40 * var(--hn-u)) rgba(10, 42, 85, 0.1);
	}

	.hn-diag-step__legend {
		gap: calc(18 * var(--hn-u));
		margin-bottom: calc(28 * var(--hn-u));
	}

	.hn-diag-step__num {
		width: max(44px, calc(64 * var(--hn-u)));
		height: max(44px, calc(64 * var(--hn-u)));
		font-size: max(11px, calc(24 * var(--hn-u)));
	}

	.hn-diag-step__q {
		font-size: max(11px, calc(32 * var(--hn-u)));
	}

	.hn-diag-step__q small {
		margin-top: calc(4 * var(--hn-u));
		font-size: max(11px, calc(16 * var(--hn-u)));
	}

	.hn-diag-step--grid .hn-diag-options {
		grid-template-columns: repeat(3, 1fr);
		gap: calc(20 * var(--hn-u));
	}

	.hn-diag-options {
		gap: calc(16 * var(--hn-u));
	}

	.hn-diag-step--grid .hn-diag-opt__box {
		padding: 0 0 calc(18 * var(--hn-u));
		gap: calc(12 * var(--hn-u));
		overflow: hidden;
		border-radius: calc(20 * var(--hn-u));
	}

	.hn-diag-step--grid .hn-diag-opt__media {
		aspect-ratio: 16 / 10;
		border-radius: 0;
	}

	.hn-diag-step--grid .hn-diag-opt__text {
		padding: 0 calc(20 * var(--hn-u));
	}

	.hn-diag-step--grid .hn-diag-opt__check {
		top: calc(14 * var(--hn-u));
		right: calc(14 * var(--hn-u));
		width: calc(30 * var(--hn-u));
		height: calc(30 * var(--hn-u));
	}

	.hn-diag-opt__box {
		min-height: max(44px, calc(76 * var(--hn-u)));
		padding: calc(14 * var(--hn-u)) calc(56 * var(--hn-u)) calc(14 * var(--hn-u)) calc(20 * var(--hn-u));
		border-radius: calc(18 * var(--hn-u));
	}

	.hn-diag-opt__label {
		font-size: max(11px, calc(19 * var(--hn-u)));
	}

	.hn-diag-opt__sub {
		font-size: max(11px, calc(14 * var(--hn-u)));
	}

	.hn-diag-opt:hover .hn-diag-opt__box {
		border-color: var(--hn-blue);
	}

	.hn-js .hn-diag__nav {
		position: static;
		margin-top: calc(28 * var(--hn-u));
		padding: 0;
		background: none;
	}

	.hn-diag__nav .hn-btn {
		max-width: calc(440 * var(--hn-u));
		margin: 0 auto;
		min-height: max(44px, calc(64 * var(--hn-u)));
		font-size: max(11px, calc(19 * var(--hn-u)));
	}

	.hn-diag-result {
		margin-top: calc(16 * var(--hn-u));
	}
}


/* =========================================================
 * 全ページ共通：ヘッダー・フッター・配色の統一
 * （body_class「hn-site」。SWELLは body_class を #body_wrap に付けます）
 * ======================================================= */

:root {
	--hn-topbar-h: calc(56 * var(--hn-u));
}

@media (min-width: 1024px) {
	:root {
		--hn-topbar-h: calc(76 * var(--hn-u));
	}
}

html {
	scroll-padding-top: calc(var(--hn-topbar-h) + 12px);
}

/* SWELLのヘッダー・追従ヘッダー・フッターは全ページで隠し、専用のものを使う */
#body_wrap.hn-site #header,
#body_wrap.hn-site #fix_header,
#body_wrap.hn-site #footer {
	display: none;
}

/* SWELLの本文下の余白（6em）とフッターの余白が重ならないように */
#body_wrap.hn-site #content {
	margin-bottom: 0;
}

/* 固定ヘッダーの高さぶん下げる */
#body_wrap.hn-site {
	padding-top: var(--hn-topbar-h);
}

.hn-topbar-space {
	display: none;
}

.hn-topbar .hn-topbar__inner {
	height: var(--hn-topbar-h);
}

/* SWELLの配色を除草剤ナビの配色に */
#body_wrap.hn-site {
	--color_main: #0877e8;
	--color_main_thin: rgba(8, 119, 232, 0.08);
	--color_main_dark: #0662c2;
	--color_link: #0877e8;
	--color_htag: #0877e8;
	--color_text: #1b2b41;
}

/* パンくず */
#body_wrap.hn-site #breadcrumb {
	background: var(--hn-light-2);
	border-bottom: 1px solid var(--hn-border);
	font-size: max(12px, calc(12 * var(--hn-u)));
}

/* ---------- 記事本文（SWELLの記事・固定ページ）の見出し・表 ---------- */
#body_wrap.hn-site .post_content h2:where(:not([class^="swell-block-"]):not(.faq_q):not(.p-postList__title)) {
	position: relative;
	margin: 2.4em 0 1em;
	padding: 0.75em 1em 0.75em 1.1em;
	border: 0;
	border-left: 6px solid var(--hn-blue);
	border-radius: 0 var(--hn-radius-sm) var(--hn-radius-sm) 0;
	background: var(--hn-light);
	color: var(--hn-navy);
	font-size: max(18px, calc(20 * var(--hn-u)));
	font-weight: 800;
	line-height: 1.5;
}

#body_wrap.hn-site .post_content h3:where(:not([class^="swell-block-"]):not(.faq_q):not(.p-postList__title)) {
	position: relative;
	margin: 2em 0 0.8em;
	padding: 0 0 0.5em 0.1em;
	border: 0;
	border-bottom: 2px solid var(--hn-border-strong);
	background: none;
	color: var(--hn-navy);
	font-size: max(16px, calc(18 * var(--hn-u)));
	font-weight: 800;
	line-height: 1.5;
}

#body_wrap.hn-site .post_content h3:where(:not([class^="swell-block-"]):not(.faq_q):not(.p-postList__title))::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: -2px;
	width: 3em;
	height: 2px;
	background: var(--hn-blue);
}

#body_wrap.hn-site .post_content h2:where(:not([class^="swell-block-"]):not(.faq_q):not(.p-postList__title))::before,
#body_wrap.hn-site .post_content h2:where(:not([class^="swell-block-"]):not(.faq_q):not(.p-postList__title))::after,
#body_wrap.hn-site .post_content h3:where(:not([class^="swell-block-"]):not(.faq_q):not(.p-postList__title))::before {
	content: none;
}

#body_wrap.hn-site .post_content table {
	border-collapse: collapse;
	overflow: hidden;
	border-radius: var(--hn-radius-sm);
}

#body_wrap.hn-site .post_content th {
	background: var(--hn-light-2);
	color: var(--hn-navy);
}

/* =========================================================
 * 固定ページ（page.php：プライバシーポリシー・運営者情報など）
 * ======================================================= */

.hn-pagewrap {
	max-width: calc(860 * var(--hn-u));
}

.hn-pagehead {
	margin: 0 calc(50% - 50vw);
	padding: calc(28 * var(--hn-u)) 16px calc(24 * var(--hn-u));
	background: linear-gradient(180deg, var(--hn-light) 0%, rgba(237, 247, 255, 0) 100%);
	text-align: center;
}

.hn-main .hn-pagehead__title {
	color: var(--hn-navy);
	font-size: max(20px, calc(24 * var(--hn-u)));
	font-weight: 900;
	line-height: 1.4;
	letter-spacing: 0.03em;
}

.hn-main .hn-pagehead__meta {
	margin-top: calc(6 * var(--hn-u));
	color: var(--hn-muted);
	font-size: max(12px, calc(13 * var(--hn-u)));
}

.hn-pagebody {
	padding: calc(20 * var(--hn-u)) calc(16 * var(--hn-u));
	border: 1px solid var(--hn-border);
	border-radius: var(--hn-radius-lg);
	background: var(--hn-white);
	box-shadow: var(--hn-shadow);
}

.hn-pagefoot {
	margin-top: calc(24 * var(--hn-u));
}

/* 本文の読みやすさ */
.hn-prose {
	color: var(--hn-text);
	font-size: max(15px, calc(16 * var(--hn-u)));
	line-height: 1.9;
	word-break: normal;
	overflow-wrap: anywhere;
}

#body_wrap .hn-prose > :first-child {
	margin-top: 0;
}

#body_wrap .hn-prose a:not(.hn-btn):not(.swell-block-button__link) {
	color: var(--hn-blue);
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* お問合せフォーム（Contact Form 7・SWELLのフォーム等）：スマホで押しやすく */
#body_wrap .hn-prose input[type="text"],
#body_wrap .hn-prose input[type="email"],
#body_wrap .hn-prose input[type="tel"],
#body_wrap .hn-prose input[type="url"],
#body_wrap .hn-prose input[type="number"],
#body_wrap .hn-prose select,
#body_wrap .hn-prose textarea {
	width: 100%;
	min-height: 48px;
	padding: 10px 14px;
	border: 1.5px solid var(--hn-border-strong);
	border-radius: var(--hn-radius-sm);
	background: var(--hn-white);
	color: var(--hn-text);
	font-family: inherit;
	font-size: 16px; /* iPhoneで入力時に拡大されないよう16px */
	box-shadow: none;
	-webkit-appearance: none;
	appearance: none;
}

#body_wrap .hn-prose textarea {
	min-height: 160px;
	line-height: 1.7;
}

#body_wrap .hn-prose input:focus,
#body_wrap .hn-prose select:focus,
#body_wrap .hn-prose textarea:focus {
	border-color: var(--hn-blue);
	outline: none;
	box-shadow: 0 0 0 4px rgba(8, 119, 232, 0.15);
}

#body_wrap .hn-prose input[type="submit"],
#body_wrap .hn-prose button[type="submit"] {
	display: block;
	width: 100%;
	max-width: 360px;
	min-height: 52px;
	margin: 1.2em auto 0;
	padding: 12px 24px;
	border: 0;
	border-radius: 999px;
	background: var(--hn-blue);
	color: var(--hn-white);
	font-family: inherit;
	font-size: 16px;
	font-weight: 800;
	cursor: pointer;
	box-shadow: 0 4px 12px rgba(8, 119, 232, 0.25);
}

#body_wrap .hn-prose input[type="checkbox"],
#body_wrap .hn-prose input[type="radio"] {
	width: 20px;
	height: 20px;
	vertical-align: middle;
}

/* =========================================================
 * 共通フッター
 * ======================================================= */

.hn-footer {
	margin-top: calc(24 * var(--hn-u));
	background: var(--hn-navy);
	color: rgba(255, 255, 255, 0.86);
	font-family: var(--hn-font);
}

.hn-footer a {
	color: inherit;
	text-decoration: none;
}

.hn-footer__inner {
	max-width: var(--hn-max);
	margin: 0 auto;
	padding: calc(32 * var(--hn-u)) 16px calc(8 * var(--hn-u));
}

.hn-footer__brand {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: calc(10 * var(--hn-u));
	padding-bottom: calc(20 * var(--hn-u));
	border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

.hn-footer__logo {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	padding: 6px 10px;
	border-radius: 10px;
	background: var(--hn-white);
}

.hn-footer__logo img,
.hn-footer__logo .hn-topbar__logo-img {
	display: block;
	width: auto;
	height: calc(30 * var(--hn-u));
	max-width: 240px;
}

.hn-footer__logo .hn-topbar__logo-text {
	color: var(--hn-blue);
	font-size: max(16px, calc(17 * var(--hn-u)));
	font-weight: 900;
}

.hn-footer__tagline {
	margin: 0;
	font-size: max(13px, calc(14 * var(--hn-u)));
	line-height: 1.6;
}

.hn-footer .hn-footer__cta {
	white-space: nowrap;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	min-height: 48px;
	padding: 0 18px;
	border-radius: 999px;
	background: var(--hn-blue);
	color: var(--hn-white);
	font-size: max(15px, calc(15 * var(--hn-u)));
	font-weight: 800;
}

.hn-footer__cta .hn-icon {
	width: 18px;
	height: 18px;
}

.hn-footer__group {
	border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

.hn-footer__title {
	display: flex;
	align-items: center;
	justify-content: space-between;
	min-height: 52px;
	color: var(--hn-white);
	font-size: max(15px, calc(15 * var(--hn-u)));
	font-weight: 800;
	cursor: pointer;
	list-style: none;
}

.hn-footer__title::-webkit-details-marker {
	display: none;
}

.hn-footer__arrow {
	width: 18px;
	height: 18px;
	opacity: 0.7;
	transition: transform 0.2s;
}

.hn-footer__group[open] .hn-footer__arrow {
	transform: rotate(180deg);
}

.hn-footer__links {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0 12px;
	margin: 0;
	padding: 0 0 12px;
	list-style: none;
}

.hn-footer__links a {
	display: flex;
	align-items: center;
	min-height: 44px;
	font-size: max(13px, calc(14 * var(--hn-u)));
	line-height: 1.4;
}

.hn-footer__links a:hover {
	color: var(--hn-white);
	text-decoration: underline;
}

.hn-footer__bottom {
	padding: calc(16 * var(--hn-u)) 16px calc(24 * var(--hn-u) + env(safe-area-inset-bottom));
	text-align: center;
}

.hn-footer__note,
.hn-footer__copy {
	margin: 0;
	color: rgba(255, 255, 255, 0.6);
	font-size: max(11px, calc(12 * var(--hn-u)));
	line-height: 1.7;
}

/* SWELLのページトップボタンがフッターに重なっても見えるように */
#body_wrap.hn-site #pagetop {
	z-index: 50;
}

@media (min-width: 768px) {
	.hn-pagebody {
		padding: calc(36 * var(--hn-u)) calc(40 * var(--hn-u));
	}

	.hn-main .hn-pagehead__title {
		font-size: calc(30 * var(--hn-u));
	}
}

@media (min-width: 1024px) {
	.hn-footer__inner {
		display: grid;
		grid-template-columns: calc(260 * var(--hn-u)) 1fr;
		gap: calc(48 * var(--hn-u));
		padding: calc(56 * var(--hn-u)) 24px calc(24 * var(--hn-u));
	}

	.hn-footer__brand {
		border-bottom: 0;
	}

	.hn-footer__groups {
		display: grid;
		grid-template-columns: repeat(5, 1fr);
		gap: calc(24 * var(--hn-u));
	}

	.hn-footer__group {
		border-bottom: 0;
	}

	.hn-footer__title {
		min-height: 0;
		margin-bottom: calc(10 * var(--hn-u));
		cursor: default;
		pointer-events: none;
	}

	.hn-footer__arrow {
		display: none;
	}

	.hn-footer__links {
		grid-template-columns: 1fr;
	}

	.hn-footer__links a {
		min-height: 0;
		padding: calc(5 * var(--hn-u)) 0;
	}

	.hn-footer__bottom {
		border-top: 1px solid rgba(255, 255, 255, 0.12);
	}
}

/* =========================================================
 * 容量ちがい（商品ページ）・ほかの容量（商品カード）
 * ======================================================= */
.hn-variants__name {
	margin-left: calc(8 * var(--hn-u));
	color: var(--hn-muted);
	font-size: max(11px, calc(14 * var(--hn-u)));
	font-weight: 700;
}

.hn-variants__lead {
	margin: 0 0 calc(10 * var(--hn-u));
	color: var(--hn-text);
	font-size: max(11px, calc(14 * var(--hn-u)));
}

.hn-variants__list {
	display: grid;
	gap: calc(8 * var(--hn-u));
	margin: 0;
	padding: 0;
	list-style: none;
}

.hn-main .hn-variant {
	display: grid;
	grid-template-columns: minmax(calc(72 * var(--hn-u)), auto) 1fr auto;
	align-items: center;
	gap: calc(12 * var(--hn-u));
	min-height: 44px;
	padding: calc(10 * var(--hn-u)) calc(14 * var(--hn-u));
	border: 1px solid var(--hn-border);
	border-radius: var(--hn-radius);
	background: var(--hn-white);
	color: inherit;
	text-decoration: none;
}

.hn-main a.hn-variant:hover {
	border-color: var(--hn-blue);
}

.hn-main .hn-variant.is-current {
	border: 2px solid var(--hn-blue);
	background: #f2f7ff;
}

.hn-variant__size {
	color: var(--hn-navy);
	font-size: max(13px, calc(18 * var(--hn-u)));
	font-weight: 800;
}

.hn-variant__price {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: calc(2 * var(--hn-u)) calc(10 * var(--hn-u));
	min-width: 0;
}

.hn-variant__price .hn-price {
	font-size: max(12px, calc(17 * var(--hn-u)));
}

.hn-variant__unit {
	color: var(--hn-green-dark);
	font-size: max(11px, calc(13 * var(--hn-u)));
	font-weight: 700;
}

.hn-variant__none {
	color: var(--hn-muted);
	font-size: max(11px, calc(13 * var(--hn-u)));
}

.hn-variant__badges {
	display: flex;
	align-items: center;
	gap: calc(6 * var(--hn-u));
}

.hn-variant__best,
.hn-variant__here {
	padding: 2px calc(8 * var(--hn-u));
	border-radius: 999px;
	font-size: max(10px, calc(12 * var(--hn-u)));
	font-weight: 800;
	white-space: nowrap;
}

.hn-variant__best {
	background: #fff1d6;
	color: #a35a00;
}

.hn-variant__here {
	background: var(--hn-blue);
	color: #fff;
}

.hn-variant__arrow {
	color: var(--hn-blue);
}

.hn-pcard__sizes {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: calc(6 * var(--hn-u));
	margin: 0;
	font-size: max(11px, calc(13 * var(--hn-u)));
}

.hn-pcard__sizes-label {
	color: var(--hn-muted);
	font-weight: 700;
}

.hn-size {
	padding: 1px calc(8 * var(--hn-u));
	border: 1px solid var(--hn-border);
	border-radius: 999px;
	background: var(--hn-white);
	font-weight: 700;
}

.hn-size.is-current {
	border-color: var(--hn-blue);
	color: var(--hn-blue);
}