@charset "UTF-8";
/*
    Template: swell
    Theme Name: SWELL CHILD
    Theme URI: https://swell-theme.com/
    Description: SWELLの子テーマ
    Version: 1.0.0
    Author: LOOS WEB STUDIO
    Author URI: https://loos-web-studio.com/

    License: GNU General Public License
    License URI: http://www.gnu.org/licenses/gpl.html
*/

/* =========================================================
   本文インライン装飾(黄色マーカー+太字 / 太字 / 赤文字)
   ========================================================= */

/* 黄色マーカー + 太字 */
mark.hahito-mark {
	background: linear-gradient(transparent 55%, #ffe066 55%);
	font-weight: 700;
	color: inherit;
	padding: 0 2px;
}

/* 太字(標準の strong と同等だが、記事生成時に明示指定したい場合用) */
.hahito-bold {
	font-weight: 700;
}

/* 赤文字 */
.hahito-red {
	color: #e0393e;
	text-decoration: none;
}

/* PR表記(ステマ規制対応) */
/* 注意: SWELLの --color_gray は半透明の薄い色(hsla(0,0%,78%,.15))であり
   読みやすいグレーテキストではないため、ここでは使わず直接指定する */
.hahito-pr-notice {
	font-size: 0.8em;
	line-height: 1.7;
	color: #333333;
	background: #f7f7f7;
	border: 1px solid #e3e3e3;
	border-radius: 8px;
	padding: 10px 14px;
	margin: 0 0 20px;
}

/* 監修者情報ボックス */
.hahito-supervisor {
	display: flex;
	gap: 16px;
	align-items: flex-start;
	margin: 0 0 32px;
	padding: 20px;
	border-radius: 12px;
	background: var(--color_content_bg, #f7f7f7);
	border: 1px solid var(--color_border, #e3e3e3);
}
.hahito-supervisor__avatar { flex: none; }
.hahito-supervisor__avatar img {
	width: 96px;
	height: 96px;
	border-radius: 50%;
	object-fit: cover;
	display: block;
	background: #fff;
}
.hahito-supervisor__body { flex: 1; }
.hahito-supervisor__label {
	display: inline-block;
	font-size: 0.75em;
	font-weight: 700;
	color: #fff;
	background: var(--color_main, #2c3e50);
	padding: 2px 10px;
	border-radius: 999px;
	margin: 0 0 6px;
}
.hahito-supervisor__name {
	font-size: 1.05em;
	font-weight: 700;
	margin: 0 0 6px;
}
.hahito-supervisor p { margin: 0 0 0.5em; }
.hahito-supervisor p:last-child { margin-bottom: 0; }
.hahito-supervisor__instagram { margin-top: 8px !important; }
.hahito-supervisor__instagram a {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	font-size: 0.85em;
	font-weight: 700;
	color: #00c2b3;
	text-decoration: none;
}
.hahito-supervisor__instagram a:hover { text-decoration: underline; }
.hahito-supervisor__instagram svg { flex: none; }
@media screen and (max-width: 600px) {
	.hahito-supervisor {
		flex-direction: column;
		align-items: center;
		text-align: center;
	}
}

/* =========================================================
   POINT / 注意ボックス(POPで清潔感のあるデザイン)
   ========================================================= */

.hahito-box {
	position: relative;
	background: #ffffff;
	border-radius: 18px;
	padding: 24px 26px 22px;
	margin: 28px 0;
}
.hahito-box > *:first-child { margin-top: 0; }
.hahito-box > *:last-child { margin-bottom: 0; }
.hahito-box p { color: #2b2b2b; line-height: 1.9; }

.hahito-box__label {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 0.85em;
	font-weight: 800;
	letter-spacing: 0.04em;
	color: #ffffff;
	padding: 5px 16px 5px 12px;
	border-radius: 999px;
	margin: 0 0 12px;
}
.hahito-box__label::before {
	content: "";
	display: inline-block;
	width: 16px;
	height: 16px;
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
}

/* POINT: ポップな水色×白 */
.hahito-box--point {
	border: 2.5px solid #00c2b3;
	box-shadow: 0 6px 0 0 #d6f7f3, 0 10px 20px -8px rgba(0, 194, 179, 0.35);
}
.hahito-box--point .hahito-box__label {
	background: #00c2b3;
}
.hahito-box--point .hahito-box__label::before {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E");
}

/* 注意: ポップなオレンジ×白 */
.hahito-box--caution {
	border: 2.5px solid #ff8a3d;
	box-shadow: 0 6px 0 0 #ffe6d4, 0 10px 20px -8px rgba(255, 138, 61, 0.35);
}
.hahito-box--caution .hahito-box__label {
	background: #ff8a3d;
}
.hahito-box--caution .hahito-box__label::before {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 9v4M12 17h.01M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z'/%3E%3C/svg%3E");
}

@media screen and (max-width: 600px) {
	.hahito-box {
		padding: 20px 18px 18px;
		border-radius: 14px;
	}
}

/* 箇条書き(記事本文中のリスト)も枠で囲んでPOPに */
ul.hahito-list-box {
	list-style: none;
	background: #ffffff;
	border: 2.5px solid #00c2b3;
	border-radius: 18px;
	box-shadow: 0 6px 0 0 #d6f7f3, 0 10px 20px -8px rgba(0, 194, 179, 0.35);
	margin: 28px 0;
	padding: 22px 24px 22px 22px;
}
ul.hahito-list-box li {
	position: relative;
	padding-left: 30px;
	margin: 0 0 12px;
	line-height: 1.8;
	color: #2b2b2b;
}
ul.hahito-list-box li:last-child { margin-bottom: 0; }
ul.hahito-list-box li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.15em;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	background-color: #00c2b3;
	background-repeat: no-repeat;
	background-position: center;
	background-size: 11px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E");
}

@media screen and (max-width: 600px) {
	ul.hahito-list-box {
		padding: 18px 18px 18px 16px;
		border-radius: 14px;
	}
}

/* =========================================================
   ヘッダー・フッター(Hahito求人サイトと同じ配色)
   ========================================================= */

.hahito-media-header {
	background: #FFDC5A;
	width: 100%;
}
.hahito-media-header__inner {
	max-width: 1200px;
	margin: 0 auto;
	padding: 20px 40px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
}
.hahito-media-header__logo img {
	width: 200px;
	height: auto;
	display: block;
}
.hahito-media-header__nav ul {
	display: flex;
	align-items: center;
	gap: 2em;
	margin: 0;
	padding: 0;
	list-style: none;
}
.hahito-media-header__nav a {
	color: #000;
	font-size: 16px;
	font-weight: 500;
	text-decoration: none;
}
.hahito-media-header__nav a:hover {
	text-decoration: underline;
}

.hahito-media-footer {
	background: #FFDC5A;
	width: 100%;
}
.hahito-media-footer__inner {
	max-width: 1200px;
	margin: 0 auto;
	padding: 3em 40px 4em;
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	flex-wrap: wrap;
	gap: 24px;
}
.hahito-media-footer__logo img {
	height: auto;
	width: 180px;
	display: block;
}
.hahito-media-footer__links {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-end;
	gap: 0 1.5em;
	margin: 0;
	padding: 0;
	list-style: none;
}
.hahito-media-footer__links a {
	color: #000;
	font-size: 14px;
	text-decoration: none;
}
.hahito-media-footer__links a:hover {
	text-decoration: underline;
}
.hahito-media-footer__copyright {
	width: 100%;
	text-align: right;
	color: #000;
	font-size: 12px;
	margin-top: 2em;
}

@media screen and (max-width: 767px) {
	.hahito-media-header__inner {
		flex-direction: column;
		align-items: center;
		padding: 14px 4vw;
		gap: 10px;
	}
	.hahito-media-header__logo img {
		width: 140px;
	}
	.hahito-media-header__nav ul {
		gap: 0.6em 1.2em;
		flex-wrap: wrap;
		justify-content: center;
	}
	.hahito-media-header__nav a {
		font-size: 13px;
	}
	.hahito-media-footer__inner {
		flex-direction: column;
		align-items: center;
		text-align: center;
		padding: 2em 4vw 3em;
	}
	.hahito-media-footer__links {
		justify-content: center;
	}
	.hahito-media-footer__copyright {
		text-align: center;
		margin-top: 1.5em;
	}
}

/* =========================================================
   CTAパターン(PR枠CTA / 控えめCTA / インラインCTA)
   ========================================================= */

/* PR枠CTA: 記事末に置く最上位のコンバージョンカード。
   2026-07-31にデザイン刷新（旧: 黄枠+中央寄せ箇条書き）し、同日さらに
   soicoの結論BOX（.soico-cta-conclusion-box 実測 PC 584x330px / SP 326x426px）
   相当のサイズに合わせて再調整した。
   - 配色はCTAファミリー（.hahito-cta-subtle と同じ赤系）。黄色の .summary-box
     （この記事のポイント）と役割が被って見えるのを避ける
   - 余白24px / 角丸12px / 枠2px は soico の結論BOX に合わせた値
   - 画像とリストを2カラム(grid)に並べて縦の積み上がりを解消（PC 828x363px）。
     DOM順（タイトル→画像→リスト→ボタン）は変えず grid の明示配置だけで組むため、
     再利用ブロック7件のHTMLは無改修のまま */
.hahito-cta-pr {
	position: relative;
	display: grid;
	grid-template-columns: 44% 1fr;
	column-gap: 20px;
	row-gap: 14px;
	align-items: center;
	background: #ffffff;
	border: 2px solid #f4b4b6;
	border-radius: 12px;
	box-shadow: 0 6px 0 0 #fde8e8, 0 12px 24px -10px rgba(224, 57, 62, 0.35);
	padding: 24px;
	margin: 28px 0;
	text-align: center;
}

/* PR表記(ステマ規制): 主張しすぎない中立のグレーピル */
/* フロント出力では wp:group の中身が .wp-block-group__inner-container で1枚
   包まれるため、そのままだとgridアイテムがこのラッパー1個だけになり、中身が
   左カラム(44%)に潰れる（2026-07-31、記事290で発覚）。display:contents で
   ラッパーを透過させ実際の子要素をgridアイテムにする。エディタ側の直列化
   （ラッパー無し）でも無害。
   【教訓】再利用ブロックのrawはこのラッパーを含まないので、親子関係に依存する
   CSSは必ず content.rendered（フロント出力）で検証すること */
.hahito-cta-pr > .wp-block-group__inner-container {
	display: contents;
}

.hahito-cta-pr__badge {
	position: absolute;
	top: -12px;
	left: 20px;
	display: inline-block;
	background: #5a5a5a;
	color: #ffffff;
	font-size: 0.75em;
	font-weight: 700;
	letter-spacing: 0.08em;
	line-height: 1.7;
	padding: 3px 14px;
	border-radius: 999px;
	margin: 0;
}

.hahito-cta-pr__title {
	grid-column: 1 / -1;
	grid-row: 1;
	font-size: 1.05em;
	font-weight: 800;
	color: #222222;
	margin: 0;
	line-height: 1.5;
}
.hahito-cta-pr__title::after {
	content: "";
	display: block;
	width: 32px;
	height: 2px;
	margin: 8px auto 0;
	border-radius: 999px;
	background: #e0393e;
}

/* 公式サイトのスクリーンショット。元画像は院ごとに縦横比がばらばらで、
   下端が要素の途中で切れているものもあるため、16:9に統一して切り出し、
   下端はカード背景へフェードさせて切断面を見せない */
.hahito-cta-pr .wp-block-image {
	grid-column: 1;
	grid-row: 2;
	position: relative;
	margin: 0;
	line-height: 0;
}
.hahito-cta-pr .wp-block-image img {
	display: block;
	width: 100%;
	aspect-ratio: 16 / 9;
	object-fit: cover;
	object-position: top center;
	border-radius: 8px;
	border: 1px solid rgba(0, 0, 0, 0.08);
	box-shadow: 0 4px 14px -6px rgba(0, 0, 0, 0.25);
}
.hahito-cta-pr .wp-block-image::after {
	content: "";
	/* SWELLは .wp-block-image:after を clear:both のクリアフィックスに使っており
	   visibility:hidden が効いているため、明示的に visible に戻す必要がある */
	visibility: visible;
	position: absolute;
	left: 1px;
	right: 1px;
	bottom: 1px;
	/* 固定pxだとSPで画像を覆いすぎる（スクショ内の料金表示まで白く飛ぶ）ため比率で */
	height: 13%;
	border-radius: 0 0 7px 7px;
	background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.92) 78%, #ffffff 100%);
	pointer-events: none;
}

/* 訴求ポイント: 中央寄せをやめ、チェック付きの左寄せリストにする */
.hahito-cta-pr ul {
	grid-column: 2;
	grid-row: 2;
	list-style: none;
	text-align: left;
	margin: 0;
	padding: 0;
}
.hahito-cta-pr ul li {
	position: relative;
	padding-left: 28px;
	margin: 0 0 9px;
	line-height: 1.7;
	font-size: 0.95em;
	color: #2b2b2b;
}
.hahito-cta-pr ul li:last-child { margin-bottom: 0; }
.hahito-cta-pr ul li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.18em;
	width: 19px;
	height: 19px;
	border-radius: 50%;
	background-color: #e0393e;
	background-repeat: no-repeat;
	background-position: center;
	background-size: 11px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E");
}

/* CTAボタン */
.hahito-cta-pr .swell-block-button {
	grid-column: 1 / -1;
	grid-row: 3;
	margin: 0;
}
.hahito-cta-pr .swell-block-button__link {
	/* 幅は SWELL の -size-l が持つ min-width:80% に委ねる（min-width は max-width に
	   優先するため max-width で絞ることはできない）。SPだけ width:100% で全幅にする */
	font-weight: 800;
}

@media screen and (max-width: 600px) {
	.hahito-cta-pr {
		grid-template-columns: 1fr;
		row-gap: 12px;
		padding: 16px;
	}
	.hahito-cta-pr__title,
	.hahito-cta-pr .wp-block-image,
	.hahito-cta-pr ul,
	.hahito-cta-pr .swell-block-button {
		grid-column: 1;
		grid-row: auto;
	}
	.hahito-cta-pr__title { font-size: 1em; }
	.hahito-cta-pr ul li {
		font-size: 0.88em;
		padding-left: 26px;
	}
	.hahito-cta-pr ul li::before {
		width: 18px;
		height: 18px;
		background-size: 10px;
	}
	.hahito-cta-pr .swell-block-button__link {
		width: 100%;
		font-size: 0.95em;
		padding-left: 1em;
		padding-right: 1em;
	}
}

/* 控えめCTA: カード型（2026-07-25、テキストリンクのみのデザインから変更） */
.hahito-cta-subtle {
	background: linear-gradient(135deg, #fff7f6 0%, #fffaf9 100%);
	border: 1px solid #f3d0ce;
	border-radius: 12px;
	padding: 14px 20px;
	margin: 24px 0;
	overflow: hidden;
}
.hahito-cta-subtle__inner {
	display: flex;
	align-items: center;
	gap: 12px;
	flex-wrap: wrap;
}
.hahito-cta-subtle__body {
	flex: 1;
	min-width: 150px;
}
.hahito-cta-subtle__title {
	font-size: 15px;
	font-weight: bold;
	color: #1a1a1a;
	line-height: 1.4;
	margin: 0;
}
.hahito-cta-subtle__desc {
	font-size: 13px;
	color: #555;
	line-height: 1.5;
	margin: 2px 0 0;
}
.hahito-cta-subtle__button {
	display: inline-block;
	background: #e0393e;
	color: #ffffff;
	padding: 10px 24px;
	border-radius: 8px;
	text-decoration: none;
	font-weight: bold;
	font-size: 14px;
	white-space: nowrap;
	text-align: center;
	box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
.hahito-cta-subtle__button:hover {
	opacity: 0.85;
}
@media screen and (max-width: 480px) {
	.hahito-cta-subtle__inner {
		flex-direction: column;
		align-items: stretch;
	}
	.hahito-cta-subtle__button {
		text-align: center;
	}
}

/* インラインCTA: 本文中に埋め込む強調リンク */
a.hahito-cta-inline {
	font-weight: 700;
	color: #e0393e;
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
}
a.hahito-cta-inline:hover {
	opacity: 0.75;
}


/* =========================================================
   記事冒頭の要約ボックス（この記事のポイント。hahitoブランドカラー＝黄色）
   共通クラス.summary-boxはジャンル・サイト間で共有される名前だが、
   CSSはサイトごと個別なのでここで定義しても他サイトには影響しない
   ========================================================= */

.summary-box {
	background: #fffbf0;
	border: 2.5px solid #FFDC5A;
	border-radius: 18px;
	box-shadow: 0 6px 0 0 #fff3cc, 0 10px 20px -8px rgba(255, 200, 0, 0.35);
	margin: 28px 0 32px;
	padding: 26px 24px 20px;
	position: relative;
}
.summary-box ul {
	list-style: none;
	margin: 0;
	padding: 0;
}
.summary-box::before {
	content: "この記事のポイント";
	display: inline-block;
	font-size: 0.85em;
	font-weight: 800;
	letter-spacing: 0.04em;
	color: #5a4a00;
	background: #FFDC5A;
	padding: 5px 16px;
	border-radius: 999px;
	position: absolute;
	top: -14px;
	left: 20px;
}
.summary-box li {
	position: relative;
	padding-left: 30px;
	margin: 0 0 12px;
	line-height: 1.8;
	color: #2b2b2b;
}
.summary-box li:last-child { margin-bottom: 0; }
.summary-box li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.15em;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	background-color: #FFDC5A;
	background-repeat: no-repeat;
	background-position: center;
	background-size: 11px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23333333' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E");
}

@media screen and (max-width: 600px) {
	.summary-box {
		padding: 22px 18px 16px;
		border-radius: 14px;
	}
}

/* =========================================================
   目次的なジャンプリンク集（「選び方のN個のポイント」等、本文アンカーへの
   リンクを縦一列に並べるセクション）。他メディアと共有していた丸みのある
   カードグリッドデザインから、hahito専用の「カラフルシャドー」デザイン
   （角丸なし・右下オフセットのベタ塗り影、参考: su-gi-rx.com/heading-design/）
   に刷新（2026-07-22）。以前はAIが記事ごとに任意の青系インラインCSSを
   発明していたため、決まったデザインとして固定する。
   ========================================================= */

.hahito-jump-list {
	border: 2px solid #00c2b3;
	border-radius: 0;
	padding: 22px 20px 20px;
	margin: 28px 0 32px;
}
.hahito-jump-list__title {
	margin: 0 0 14px;
	padding-left: 12px;
	border-left: 5px solid #00c2b3;
	font-weight: 800;
	font-size: 1.05em;
	color: #2b2b2b;
}
.hahito-jump-list__grid {
	display: flex;
	flex-direction: column;
	gap: 14px;
}
.hahito-jump-list__item {
	background: #ffffff;
	border: 2px solid #00c2b3;
	border-radius: 0;
	box-shadow: 5px 5px 0 rgba(0, 194, 179, 0.35);
	padding: 14px 18px;
}
.hahito-jump-list__item a {
	display: block;
	color: #1a5c54;
	text-decoration: none;
	font-weight: 700;
}
.hahito-jump-list__item a:hover {
	text-decoration: underline;
}

/* =========================================================
   比較表・スペック表を「タイル風」デザインに統一。
   参考: https://seotimes.jp/responsive-css-table-design/ の table_design01
   （白い枠線で仕切られたタイル状セル。見出し=濃色+白文字／データ=淡色）を
   hahitoブランドカラー（ティール）に置き換えて適用（2026-07-23、黒線版を
   一度試したが不採用となり白グリッドに戻した）。
   見出し行（th）だけでなく、ラベル|値の2列表（店舗情報・スペック表等、
   全セルtd）にも対応するため td:first-child も見出し扱いにする。
   本文中の表は is-style-stripes クラス無しの素の<table>（AIがMarkdown表を
   そのままHTML化したもの）で出力されることがあるため、.post_content table
   全体を対象にする（is-style-stripes限定だと一部の表が対象外になる）。
   ========================================================= */
.post_content table {
	border-collapse: collapse;
}
.post_content table th,
.post_content table td {
	border: 2px solid #ffffff;
	background-color: #e3f8f5;
	padding: 12px 16px;
	color: #2b2b2b;
}
.post_content table th,
.post_content table td:first-child {
	background-color: #00b3a1;
	color: #ffffff;
	font-weight: 700;
}
/* ティール背景セル内のリンク（比較表クリニック名のジャンプリンク等）は
   ブラウザ既定の青がテーマ色に勝ってしまい視認性が落ちるため、白字+下線で
   明示的に上書きする（2026-07-24） */
.post_content table th a,
.post_content table td:first-child a {
	color: #ffffff;
	text-decoration: underline;
	text-decoration-color: rgba(255, 255, 255, 0.6);
}
.post_content table th a:hover,
.post_content table td:first-child a:hover {
	opacity: 0.85;
}

@media screen and (max-width: 600px) {
	.post_content table th,
	.post_content table td {
		padding: 10px 12px;
	}
	.hahito-jump-list {
		padding: 16px 14px 14px;
	}
	.hahito-jump-list__item {
		padding: 12px 14px;
		box-shadow: 4px 4px 0 rgba(0, 194, 179, 0.35);
	}
}

/* =========================================================
   記事冒頭TOP3ランキングBOX（要約ボックス直前）。
   参考: https://seotimes.jp/responsive-css-table-design/ の「交互に色分け」
   テーブルの配色（見出し=濃色+白文字／強調列=別色）を、色だけhahitoブランド
   （CTA同系赤）に置き換えて適用（2026-07-24、ユーザー指定レイアウトに
   合わせ最終形に変更: 項目（料金/特徴/CVボタン）を行、クリニックを列に
   持つ比較表。1列目＝項目ラベル列を強調色にする）。
   ========================================================= */
.hahito-top3-table-wrap {
	margin: 20px 0 28px;
}
.hahito-top3-table-wrap .table-scroll {
	overflow-x: auto;
	/* overflow-x:auto を指定するとCSS仕様上overflow-yも暗黙にautoになり
	   （overflow-y:visibleを書いても効かない）、上にはみ出す「おすすめ」
	   バッジが縦方向でクリップされてしまう。バッジの高さ分だけ上に
	   パディングを確保しつつ同量のマイナスマージンで見た目の位置は
	   変えずにスクロールコンテナ内に収める（2026-07-24、表示欠け修正） */
	padding-top: 18px;
	margin-top: -18px;
}
.hahito-top3-table-wrap .hahito-top3-table {
	width: 100%;
	min-width: 480px;
	border-collapse: collapse;
	table-layout: fixed;
}
.hahito-top3-table-wrap .hahito-top3-table th:first-child,
.hahito-top3-table-wrap .hahito-top3-table td:first-child {
	/* 90pxだとパディング32pxを引いた58px（約3.6文字）しか文字に使えず、
	   「精密検査料」「初診・相談料」がセルからはみ出していた
	   （2026-08-17）。6文字が収まる幅にし、左右パディングも詰める */
	width: 116px;
}
.hahito-top3-table-wrap .hahito-top3-table th {
	background-color: #e0393e;
	color: #ffffff;
	padding: 12px 16px;
	font-weight: 800;
	text-align: center;
	border: 2px solid #ffffff;
	word-break: break-word;
}
.hahito-top3-table-wrap .hahito-top3-table th.hahito-top3-table__recommend {
	position: relative;
	overflow: visible;
}
.hahito-top3-table-wrap .hahito-top3-table__badge {
	position: absolute;
	top: -14px;
	left: 50%;
	transform: translateX(-50%);
	background: #ffffff;
	color: #e0393e;
	border: 2px solid #e0393e;
	border-radius: 999px;
	padding: 2px 14px;
	font-size: 0.75em;
	font-weight: 800;
	white-space: nowrap;
	z-index: 1;
}
.hahito-top3-table-wrap .hahito-top3-table th a {
	color: #ffffff;
	text-decoration: underline;
}
.hahito-top3-table-wrap .hahito-top3-table td {
	padding: 12px 16px;
	color: #2b2b2b;
	border: 2px solid #ffffff;
	background-color: #ffe9e8;
	text-align: center;
}
.hahito-top3-table-wrap .hahito-top3-table tbody tr:nth-child(even) td {
	background-color: #ffffff;
}
.hahito-top3-table-wrap .hahito-top3-table td:first-child {
	background-color: #fff0ef;
	color: #e0393e;
	font-weight: 800;
	padding-left: 8px;
	padding-right: 8px;
	/* nowrap だと長いラベルがセル外へ突き抜ける。折り返しに変えて
	   将来ラベルが増えてもはみ出さないようにする */
	white-space: normal;
	word-break: break-word;
}
.hahito-top3-table-wrap td.hahito-top3-table__cta {
	text-align: center;
}
.hahito-top3-table-wrap td.hahito-top3-table__image {
	text-align: center;
	padding: 8px;
}
.hahito-top3-table-wrap td.hahito-top3-table__image img {
	display: block;
	width: 100%;
	max-width: 160px;
	height: auto;
	margin: 0 auto;
	border-radius: 6px;
}
.hahito-top3-table-wrap .hahito-top3-table__cta a {
	display: inline-block;
	background-color: #e0393e;
	color: #ffffff;
	font-weight: 800;
	padding: 6px 16px;
	border-radius: 999px;
	text-decoration: none;
	white-space: nowrap;
}
.hahito-top3-table-wrap .hahito-top3-table__cta a:hover {
	opacity: 0.85;
}
.hahito-top3-table-wrap td.hahito-top3-table__features {
	text-align: left;
	vertical-align: top;
}
.hahito-top3-table-wrap td.hahito-top3-table__features ul {
	margin: 0;
	padding: 0;
	list-style: none;
}
.hahito-top3-table-wrap td.hahito-top3-table__features li {
	position: relative;
	padding-left: 14px;
	font-size: 13px;
	line-height: 1.5;
	text-align: left;
}
.hahito-top3-table-wrap td.hahito-top3-table__features li:not(:last-child) {
	margin-bottom: 4px;
}
.hahito-top3-table-wrap td.hahito-top3-table__features li::before {
	content: "・";
	position: absolute;
	left: 0;
}

@media screen and (max-width: 600px) {
	.hahito-top3-table-wrap .hahito-top3-table th,
	.hahito-top3-table-wrap .hahito-top3-table td {
		padding: 10px 12px;
	}
}

/* =========================================================
   トップページ: トピックから探す（front_topウィジェット）
   ========================================================= */
.hahito-topics {
	max-width: 1200px;
	margin: 16px auto 0;
	padding: 0 40px;
}
.hahito-topics .hahito-section-title {
	position: relative;
	display: inline-block;
	font-size: 22px;
	font-weight: 800;
	margin: 0 0 24px;
	padding-bottom: 10px;
}
.hahito-topics .hahito-section-title::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: 42px;
	height: 4px;
	background: #e0393e;
	border-radius: 2px;
}
.hahito-topic-cards {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
	gap: 14px;
}
.hahito-topic-cards li {
	margin: 0;
}
.hahito-topic-card {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 12px;
	height: 100%;
	padding: 20px 18px;
	border-radius: 16px;
	background: #fff;
	border: 1px solid #e5e5e5;
	box-shadow: 0 2px 8px -4px rgba(30, 42, 50, 0.06);
	text-decoration: none;
	transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}
.hahito-topic-card:hover {
	transform: translateY(-4px);
	box-shadow: 0 14px 28px -12px rgba(0, 194, 179, 0.3);
	border-color: #00c2b3;
}
.hahito-topic-card__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: 12px;
	background: #d6f7f3;
	background-repeat: no-repeat;
	background-position: center;
	background-size: 24px 24px;
}
.hahito-topic-card__icon.icon-whitening { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23129C90' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 2L14 8L20 10L14 12L12 18L10 12L4 10L10 8L12 2Z'/%3E%3Cpath d='M19 15L19.8 17.2L22 18L19.8 18.8L19 21L18.2 18.8L16 18L18.2 17.2L19 15Z'/%3E%3C/svg%3E"); }
.hahito-topic-card__icon.icon-ceramic { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23129C90' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3L20 8V16L12 21L4 16V8L12 3Z'/%3E%3Cpath d='M4 8L12 12L20 8'/%3E%3Cpath d='M12 12V21'/%3E%3C/svg%3E"); }
.hahito-topic-card__icon.icon-veneer { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23129C90' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3L21 7.5L12 12L3 7.5L12 3Z'/%3E%3Cpath d='M3 16.5L12 21L21 16.5'/%3E%3Cpath d='M3 12L12 16.5L21 12'/%3E%3C/svg%3E"); }
.hahito-topic-card__icon.icon-clinic { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23129C90' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='10.5' cy='10.5' r='6.5'/%3E%3Cpath d='M20 20L15.2 15.2'/%3E%3C/svg%3E"); }
.hahito-topic-card__icon.icon-price { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23129C90' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M9 8H14.5C15.6 8 16.5 8.9 16.5 10C16.5 11.1 15.6 12 14.5 12H9.5C8.4 12 7.5 12.9 7.5 14C7.5 15.1 8.4 16 9.5 16H15'/%3E%3Cpath d='M12 6V18'/%3E%3C/svg%3E"); }
.hahito-topic-card__icon.icon-faq { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23129C90' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9.5 9C9.5 7.6 10.6 6.5 12 6.5C13.4 6.5 14.5 7.6 14.5 9C14.5 10.4 12 10.8 12 13'/%3E%3Ccircle cx='12' cy='17' r='0.9' fill='%23129C90' stroke='none'/%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3C/svg%3E"); }
.hahito-topic-card__label {
	font-size: 14px;
	font-weight: 700;
	color: #1e2a32;
	line-height: 1.5;
}

@media screen and (max-width: 767px) {
	.hahito-topics {
		margin-top: 36px;
		padding: 0 20px;
	}
	.hahito-topics .hahito-section-title {
		font-size: 19px;
	}
	.hahito-topic-cards {
		grid-template-columns: repeat(2, 1fr);
	}
}

/* =========================================================
   記事末: 出典元まとめBOX（citation_sources_box）
   ========================================================= */
.hahito-citation-box {
	margin: 32px 0 0;
	padding: 20px 24px;
	background: #f7f7f7;
	border-radius: 12px;
	border: 1px solid #e5e5e5;
}
.hahito-citation-box__title {
	font-size: 0.9em;
	font-weight: 700;
	color: #555;
	margin: 0 0 10px;
}
.hahito-citation-box__list {
	margin: 0;
	padding-left: 1.3em;
	list-style: decimal;
}
.hahito-citation-box__list li {
	font-size: 0.85em;
	color: #666;
	margin-bottom: 6px;
	line-height: 1.6;
}
.hahito-citation-box__list a {
	color: #666;
	text-decoration: underline;
	text-decoration-color: #ccc;
	word-break: break-all;
}
.hahito-citation-box__list a:hover {
	color: #e0393e;
	text-decoration-color: #e0393e;
}
.hahito-related-articles {
	margin: 32px 0 0;
	padding: 20px 24px;
	background: #fff7f6;
	border-radius: 12px;
	border: 1px solid #f3d0ce;
}
.hahito-related-articles__title {
	font-size: 0.95em;
	font-weight: 700;
	color: #444;
	margin: 0 0 10px;
}
.hahito-related-articles__list {
	margin: 0;
	padding-left: 1.3em;
	list-style: disc;
}
.hahito-related-articles__list li {
	font-size: 0.9em;
	margin-bottom: 6px;
	line-height: 1.6;
}
.hahito-related-articles__list a {
	color: #e0393e;
	text-decoration: underline;
	text-decoration-color: #f3d0ce;
}
.hahito-related-articles__list a:hover {
	opacity: 0.75;
}
/* =========================================================
   エリア別・出口別セクション末尾の院名比較テーブル（area_entity_table）。
   文中テキストリンク→バッジ案を経て、購買心理上CTAボタンで直接遷移させる方が
   離脱が少ないとの指摘により、クリニック名・画像・アクセス・CTAボタンの
   テーブル形式に変更した（2026-07-27）
   ========================================================= */
.hahito-area-table-wrap {
	margin: 20px 0;
}
.hahito-area-table-wrap .table-scroll {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}
.hahito-area-table {
	width: 100%;
	border-collapse: collapse;
	min-width: 480px;
}
.hahito-area-table th,
.hahito-area-table td {
	border: 1px solid #d6f7f3;
	padding: 10px 12px;
	text-align: center;
	vertical-align: middle;
	font-size: 0.9em;
}
.hahito-area-table th {
	background: #00c2b3;
	color: #ffffff;
	font-weight: 700;
	white-space: nowrap;
}
.hahito-area-table__profile {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
	min-width: 100px;
}
.hahito-area-table__profile img {
	max-width: 100px;
	height: auto;
	border-radius: 6px;
}
.hahito-area-table__name {
	font-weight: 700;
	color: #2b2b2b;
}
.hahito-area-table__button {
	display: inline-block;
	padding: 8px 16px;
	background: #e0393e;
	border: 2px solid #e0393e;
	border-radius: 999px;
	color: #ffffff !important;
	font-size: 0.85em;
	font-weight: 700;
	text-decoration: none !important;
	white-space: nowrap;
}
.hahito-area-table__button:hover {
	background: #ffffff;
	color: #e0393e !important;
}
@media (max-width: 600px) {
	.hahito-area-table th,
	.hahito-area-table td {
		padding: 8px 8px;
		font-size: 0.82em;
	}
	.hahito-area-table__profile img {
		max-width: 70px;
	}
	.hahito-area-table__button {
		padding: 6px 12px;
		font-size: 0.78em;
	}
}


/* =========================================================
   よくある質問: 質問BOX（faq_accordion_box）
   Q=teal（hahito-box--pointと同系統）・A=red（CTAブランドカラー）で
   見出し文言を視覚的に強調し、プレーンh3見出しの見づらさを解消する
   ========================================================= */
.hahito-faq {
	display: flex;
	flex-direction: column;
	gap: 12px;
	margin: 24px 0;
}
.hahito-faq__item {
	background: #fff;
	border: 1px solid #d6f7f3;
	border-radius: 12px;
	overflow: hidden;
}
.hahito-faq__question {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	padding: 16px 20px;
	font-weight: 700;
	font-size: 1.02em;
	color: #1e2a32;
	cursor: pointer;
	list-style: none;
	background: #f5fbfa;
}
.hahito-faq__question::-webkit-details-marker {
	display: none;
}
.hahito-faq__question::marker {
	content: "";
}
.hahito-faq__mark {
	flex: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 26px;
	height: 26px;
	border-radius: 50%;
	font-size: 0.85em;
	font-weight: 800;
	line-height: 1;
}
.hahito-faq__mark--q {
	background: #00c2b3;
	color: #fff;
}
.hahito-faq__mark--a {
	background: #fff0ef;
	color: #e0393e;
}
.hahito-faq__question-text {
	padding-top: 2px;
}
.hahito-faq__answer {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	padding: 4px 20px 18px;
	font-size: 0.95em;
	line-height: 1.8;
	color: #333;
}
.hahito-faq__answer-text p {
	margin: 0 0 0.6em;
}
.hahito-faq__answer-text p:last-child {
	margin-bottom: 0;
}
@media screen and (max-width: 600px) {
	.hahito-faq__question {
		padding: 14px 16px;
		font-size: 0.98em;
	}
	.hahito-faq__answer {
		padding: 4px 16px 16px;
	}
}
/* =========================================================
   コンテンツ先頭（アイキャッチ直下）の追従POPUP（fv_cta_blocks.sticky_bar）。
   デスクトップは右下固定の浮遊カード、モバイルは下部固定の全幅バーになる。
   2026-07-31実装（ASP提携確定まで genre.yaml 側で enabled:false のため非表示）
   ========================================================= */
.hahito-fv-sticky {
	position: fixed;
	right: 20px;
	bottom: 20px;
	z-index: 999;
	max-width: 300px;
	background: #ffffff;
	border: 2px solid #e0393e;
	border-radius: 16px;
	box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
	padding: 14px 16px;
}
.hahito-fv-sticky__label {
	margin: 0 0 2px;
	font-size: 0.75em;
	font-weight: 700;
	color: #e0393e;
}
.hahito-fv-sticky__name {
	margin: 0 0 8px;
	font-size: 1em;
	font-weight: 700;
	color: #2b2b2b;
}
.hahito-fv-sticky__button {
	display: block;
	text-align: center;
	padding: 8px 12px;
	background: #e0393e;
	border-radius: 999px;
	color: #ffffff !important;
	font-size: 0.85em;
	font-weight: 700;
	text-decoration: none !important;
}
.hahito-fv-sticky__button:hover {
	opacity: 0.85;
}
@media (max-width: 600px) {
	.hahito-fv-sticky {
		left: 12px;
		right: 12px;
		bottom: 12px;
		max-width: none;
		padding: 10px 14px;
	}
	.hahito-fv-sticky__inner {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 10px;
	}
	.hahito-fv-sticky__label {
		display: none;
	}
	.hahito-fv-sticky__name {
		margin: 0;
		font-size: 0.9em;
	}
	.hahito-fv-sticky__button {
		flex-shrink: 0;
		padding: 8px 16px;
	}
}

/* 監修者ボックス内の肩書き・資格行 */
.hahito-supervisor__title {
	font-size: 0.8em;
	font-weight: 600;
	color: #666666;
	margin: 0 0 8px !important;
}

/* TOPページ「監修医のご紹介」「情報の信頼性について」セクション */
.hahito-frontSupervisor {
	margin: 56px 0 24px;
}
.hahito-frontSupervisor__heading {
	font-size: 1.25em;
	font-weight: 700;
	margin: 0 0 16px;
	padding-bottom: 8px;
	border-bottom: 2px solid var(--color_main, #2c3e50);
}
.hahito-frontSupervisor .hahito-supervisor {
	margin-bottom: 40px;
}
.hahito-frontSupervisor__note {
	font-size: 0.9em;
	line-height: 1.8;
	color: #333333;
	margin: 0;
}

/* 記事冒頭の統括監修コンパクトカード(カテゴリ監修BOXの直下) */
.hahito-supervisor--compact {
	margin: -20px 0 32px;
	padding: 12px 16px;
	align-items: center;
	gap: 12px;
}
.hahito-supervisor--compact .hahito-supervisor__avatar img {
	width: 48px;
	height: 48px;
}
.hahito-supervisor--compact .hahito-supervisor__label {
	font-size: 0.7em;
	padding: 1px 8px;
	margin: 0 10px 2px 0;
}
.hahito-supervisor--compact .hahito-supervisor__name {
	font-size: 0.95em;
	display: inline-block;
	margin: 0 8px 0 0;
}
.hahito-supervisor--compact .hahito-supervisor__title {
	display: inline-block;
	margin: 0 !important;
}
@media screen and (max-width: 600px) {
	.hahito-supervisor--compact {
		flex-direction: row;
		align-items: center;
		text-align: left;
	}
}

/* ========================================
   紹介セクション冒頭の掲載全院比較表（転置型）
   （html_decorator._insert_roster_comparison_table / 2026-08-06）
   ゼブラ（交互の背景色）は使わず、ヘッダ行と項目ラベル列のみ着色する
   ======================================== */
.hahito-roster-table-wrap {
	margin: 24px 0 32px;
}
.hahito-roster-table-wrap .table-scroll {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}
.hahito-roster-table-wrap .hahito-roster-table {
	/* width:100% を指定すると列が圧縮され横スクロールが発生しないため
	   width:auto にし、各列の幅で自然に横へ伸ばす（2026-08-06、
	   セルが窮屈という指摘を受け table-layout:fixed から変更） */
	width: auto;
	border-collapse: collapse;
	font-size: 14px;
	background-color: #ffffff;
}
.hahito-roster-table-wrap .hahito-roster-table th.hahito-roster-table__label {
	/* 1列目（項目名）はスクロールしても常に見えるよう左固定 */
	position: sticky;
	left: 0;
	z-index: 2;
	width: 116px;
	min-width: 116px;
}
.hahito-roster-table-wrap .hahito-roster-table thead th:not(.hahito-roster-table__label) {
	width: 190px;
	min-width: 190px;
}
/* thead の1列目（「項目」セル）にも sticky を効かせる。
   tbody 側だけに指定すると左上だけスクロールで流れてしまう */
.hahito-roster-table-wrap .hahito-roster-table thead th:first-child {
	position: sticky;
	left: 0;
	z-index: 3;
	width: 116px;
	min-width: 116px;
	background-color: #00c2b3;
}
.hahito-roster-table-wrap .hahito-roster-table thead th {
	background-color: #00c2b3;
	color: #ffffff;
	padding: 12px 10px;
	font-weight: 800;
	text-align: center;
	border: 2px solid #ffffff;
	vertical-align: middle;
}
.hahito-roster-table-wrap .hahito-roster-table thead th a {
	color: #ffffff;
	text-decoration: underline;
}
.hahito-roster-table-wrap .hahito-roster-table tbody th.hahito-roster-table__label {
	/* sticky で重なるため背景は不透明にする */
	background-color: #eefaf9;
	color: #0b7f76;
	font-weight: 700;
	text-align: left;
	padding: 14px 12px;
	/* nowrap だと「プロバイダーランク」「カウンセリング料」等の長いラベルが
	   sticky なラベル列からはみ出す。折り返して収める（2026-08-17） */
	white-space: normal;
	word-break: break-word;
	border: 1px solid #d9efec;
}
.hahito-roster-table-wrap .hahito-roster-table td {
	padding: 14px 12px;
	text-align: center;
	border: 1px solid #d9efec;
	background-color: #ffffff;
	word-break: break-word;
	vertical-align: middle;
	line-height: 1.7;
}

/* ========================================
   記事冒頭のPR表記（ステマ規制・内閣府告示第19号 2023-10施行）
   アフィリエイトリンクを含む記事で広告である旨を明瞭に示す
   （html_decorator._insert_pr_disclosure / 2026-08-10）
   ======================================== */
.hahito-pr-disclosure {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0 0 20px;
	padding: 8px 12px;
	background-color: #f5f7f8;
	border-radius: 6px;
	font-size: 13px;
	line-height: 1.6;
	color: #555;
}
.hahito-pr-disclosure__badge {
	flex-shrink: 0;
	background-color: #8a9299;
	color: #fff;
	font-weight: 700;
	font-size: 11px;
	letter-spacing: .04em;
	padding: 2px 8px;
	border-radius: 3px;
}