@charset "utf-8";
/* ==========================================================
   セルフチェック（診断）ページ
   アーカイブ: /self-check   シングル: /self-check/{slug}

   既存CSSの .btn は .blog スコープ配下のため当ページでは効かない。
   配色・寸法だけ踏襲して .selfcheck-btn として再定義している。

   ========================================================== */

[class^="selfcheck-"],
[class*=" selfcheck-"],
[class^="selfcheck-"] *,
[class*=" selfcheck-"] * {
	box-sizing: border-box;
}


.selfcheck-br-sp {
	display: none;
}
.selfcheck-br-pc {
	display: block;
}

:root {
	--sc-mincho: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝B", serif;
	--sc-gothic: "Yu Gothic Medium", "游ゴシック Medium", "游ゴシック体", "Yu Gothic", YuGothic, "ヒラギノ角ゴシック Pro", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	--sc-sp-gutter: 10.5px;
	--sc-sp-gutter-total: 17.5px;
}

/* 既定はゴシック（本文系）。見出しだけ後段で明朝に戻す */
.selfcheck-archive .article-body,
.selfcheck-archive .article-body p,
[class^="selfcheck-"],
[class*=" selfcheck-"],
[class^="selfcheck-"] *,
[class*=" selfcheck-"] * {
	font-family: var(--sc-gothic);
}

/* 本文（Yu Gothic Medium 16px） */
.selfcheck-archive .article-body > .inner > p,
.selfcheck-about__text p,
.selfcheck-card__text,
.selfcheck-card__note,
.selfcheck-result__body {
	font-size: 16px;
	font-weight: 500;
}

/* 強調本文（Yu Gothic Bold） */
.selfcheck-card__desc,
.selfcheck-options__btn,
.selfcheck-btn a,
.selfcheck-result__lead {
	font-weight: bold;
}

/* 参考文献・ページャ番号（Yu Gothic Medium） */
.selfcheck-refs,
.selfcheck-refs *,
.selfcheck-carousel .slick-dots button {
	font-family: var(--sc-gothic);
	font-weight: 500;
}

/* 見出し系（游明朝） */
.article-body .selfcheck-h2,
.selfcheck-quiz__title,
.selfcheck-card__title,
.selfcheck-card__num,
.selfcheck-result__title,
.selfcheck-lead,
.article-body .selfcheck-lead p,
.selfcheck-intro__text,
.article-body .selfcheck-intro__text p {
	font-family: var(--sc-mincho);
}

/* Yu Mincho Regular（大見出し 40px） */
.article-body .selfcheck-h2,
.selfcheck-quiz__title {
	font-weight: 400;
}

/* Yu Mincho Demibold */
.selfcheck-card__title,
.selfcheck-card__num,
.selfcheck-result__title,
.selfcheck-lead,
.article-body .selfcheck-lead p,
.selfcheck-intro__text,
.article-body .selfcheck-intro__text p {
	font-size: 16px;
	font-weight: 600;
}

/* ----------------------------------------------------------
   1. ボタン（.blog .btn の値を流用して再定義）
   ---------------------------------------------------------- */
.selfcheck-btn {
	margin: 32px auto;
	text-align: center;
}

.selfcheck-btn a {
	box-sizing: border-box;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 15px;
	position: relative;
	width: 100%;
	max-width: 500px;
	min-height: 80px;
	margin: 0 auto;
	padding: 8px 40px;
	background: #7c7cca;
	border: none;
	border-radius: 8px;
	color: #fff;
	font-size: 20px;
	font-weight: bold;
	line-height: 1.8;
	text-align: center;
	text-decoration: none;
	transition: opacity .3s ease;
}
.selfcheck-btn a:hover {
	opacity: .8;
	color: #fff;
}
.selfcheck-btn a::after {
	content: "";
	position: absolute;
	top: 50%;
	right: 19px;
	width: 8px;
	height: 15px;
	margin-top: -7.5px;
	background: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='15' viewBox='0 0 8 15' fill='none'%3E%3Cpath d='M1 1L7 7.5L1 14' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / contain;
}

.selfcheck-btn--check a {
	background: #fff;
	border: 2px solid #4d4da5;
	box-shadow: 4px 4px 4px rgba(0, 0, 0, .2);
	color: #4d4da5;
}
.selfcheck-btn--check a:hover {
	color: #4d4da5;
}
.selfcheck-btn--check a::after {
	background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='15' viewBox='0 0 8 15' fill='none'%3E%3Cpath d='M1 1L7 7.5L1 14' stroke='%234d4da5' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.selfcheck-btn__icon {
	flex: 0 0 34px;
	width: 34px;
	height: auto;
}
.selfcheck-btn--check a span {
	margin-right: auto;
}
.selfcheck-btn--check a img {
	margin-left: auto;
}


/* ----------------------------------------------------------
   2. 見出し h2（中央寄せ・紫文字・下罫線）
   ---------------------------------------------------------- */
.article-body .selfcheck-h2,
.selfcheck-quiz__title {
	max-width: 1280px;
	margin: 64px auto 40px;
	padding: 0 0 16px;
	border-bottom: 2px dotted #7c7cca;
	background: none;
	color: #4d4da5;
	font-size: 40px;
	font-weight: 400;
	line-height: 1.4;
	text-align: center;
}
.selfcheck-quiz__title {
	width: calc(100% + 200px);
	max-width: none;
	margin-left: -100px;
}

/* ----------------------------------------------------------
   3. アーカイブ
   ---------------------------------------------------------- */
.selfcheck-lead {
	margin-top: 70px;
	margin-bottom: 80px;
	text-align: center;
	color: #000;
}
.selfcheck-lead p {
	margin: 0 0 8px;
	font-weight: bold;
}

/* 誘導カード: カード幅1080pxに対し内側の要素（タイトル等）は950px＝左右65pxパディング */
.selfcheck-card--entry {
	margin: 40px 0;
	padding: 40px 65px;
	background: #E9E9FF;
	border-radius: 4px;
}
.selfcheck-card__title {
	margin: 0 0 40px;
	padding: 0 0 16px;
	border-bottom: 1px solid #4D4DA5;
	color: #4d4da5;
	font-size: 30px;
	font-weight: 500;
	text-align: center;
}
.selfcheck-card__desc {
	margin: 0 0 8px;
	font-size: 16px;
	font-weight: 700;
	text-align: center;
}
.selfcheck-card__note {
	margin: 24px 0 0;
	color: #000;
	font-family: "Yu Gothic";
	font-size: 16px;
	font-style: normal;
	font-weight: 500;
}

/* 「発達障害とは」画像＋本文 */
.selfcheck-about {
	display: flex;
	gap: 40px;
	align-items: flex-start;

}
.selfcheck-about__img {
	flex: 0 0 400px;
}
.selfcheck-about__img img {
	width: 100%;
	height: auto;
}
.selfcheck-about__text {
	flex: 1 1 auto;
}

/* ----------------------------------------------------------
   4. 参考文献（13px / 行間1.8 / 下線リンク）
   ---------------------------------------------------------- */
.selfcheck-refs {
	margin: 24px auto 0;
	color: #000;
	font-size: 13px;
	line-height: 1.8;
}
.selfcheck-refs .selfcheck-refs__head {
	margin: 0 0 4px;
	font-size: 13px;
	font-weight: 500;
}
.selfcheck-refs__list {
	margin: 0;
	padding: 0;
	list-style: none;
}
.selfcheck-refs .selfcheck-refs__list li {
	margin: 0 0 4px;
	padding-left: 1em;
	font-size: 13px;
	text-indent: -1em;
}
.selfcheck-refs__list li::before {
	content: "・";
}
/* .selfcheck-quiz__inner .selfcheck-after a（本文用リンク色）と詳細度が
   並ぶので、祖先の .inner（.selfcheck-quiz__inner）を挟んで参考文献側を勝たせる */
.selfcheck-quiz__inner .selfcheck-after .selfcheck-refs__list a,
.selfcheck-refs__list a {
	color: #454545;
	/* base.css の a { text-decoration: none !important } を上書き */
	text-decoration: underline !important;
}
.selfcheck-refs__list a:hover {
	opacity: .7;
}

/* ----------------------------------------------------------
   5. シングル 導入文
   ---------------------------------------------------------- */
.selfcheck-intro {
	display: flex;
	gap: 32px;
	align-items: flex-start;
	max-width: 833.29px;
	margin: 40px auto;
}
.selfcheck-intro__img {
	flex: 0 0 199px;
}
.selfcheck-intro__img img {
	width: 100%;
	height: auto;
}
.selfcheck-intro__text {
	flex: 1 1 auto;
}

/* ----------------------------------------------------------
   6. 設問カルーセル
   ---------------------------------------------------------- */
.selfcheck-quiz {
	margin: 64px 0;
	padding: 1px 0 64px;   /* 1px … 子要素の margin 相殺よけ */
	background: #f7f7f7;
}
.selfcheck-quiz__inner {
	padding: 0;
}

.selfcheck-carousel {
	margin: 40px auto 0;
}
/* slick-track が親幅を超えるので slick-list で必ず切る（slick既定を明示的に保持） */
.selfcheck-carousel .slick-list {
	overflow: hidden;
}
/* テーマの slick.css が .slick-slide に height:100% を当てており、
   adaptiveHeight と噛み合って高さが過大になるので打ち消す */
.selfcheck-carousel .slick-slide {
	height: auto;
}
/* slick 初期化前のちらつき防止（1枚目以外を隠す） */
.selfcheck-carousel:not(.slick-initialized) .selfcheck-slide + .selfcheck-slide {
	display: none;
}

.selfcheck-slide .selfcheck-card {
	position: relative;
	min-height: 380px;
	padding: 40px;
	background: #fff;
	border-radius: 8px;
	border-top: 4px solid #7c7cca;
	box-shadow: 0 0 10px rgba(0, 0, 0, .15);
}
.selfcheck-card__num {
	margin: 0 0 16px;
	color: #4d4da5;
	font-size: 24px;
	font-weight: 600;
}
.selfcheck-card__text {
	margin: 0 0 24px;
	font-size: 16px;
	line-height: 1.8;
}

/* 4択ボタン（2列） */
.selfcheck-options {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 15px;
}
.selfcheck-options__btn {
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
	min-height: 80px;
	padding: 12px 40px 12px 20px;
	background: #e9e9ff;
	/* 枠線2px・影あり。未選択は枠 #7c7cca、選択済みは枠 #4d4da5 */
	border: 2px solid #7c7cca;
	border-radius: 8px;
	box-shadow: 4px 4px 4px rgba(0, 0, 0, .2);
	color: #4d4da5;
	font-size: 16px;
	line-height: 1.5;
	text-align: center;
	cursor: pointer;
	transition: background-color .3s ease, color .3s ease, border-color .3s ease;
}
/* 右向き矢印（8x15 / 2px / 角丸キャップ） */
.selfcheck-options__btn::after {
	content: "";
	position: absolute;
	top: 50%;
	right: 20px;
	width: 8px;
	height: 15px;
	margin-top: -7.5px;
	background: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='15' viewBox='0 0 8 15' fill='none'%3E%3Cpath d='M1 1L7 7.5L1 14' stroke='%237c7cca' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / contain;
}
.selfcheck-options__btn:hover,
.selfcheck-options__btn[aria-pressed="true"] {
	background: #7c7cca;
	border-color: #4d4da5;
	color: #fff;
}
.selfcheck-options__btn:hover::after,
.selfcheck-options__btn[aria-pressed="true"]::after {
	background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='15' viewBox='0 0 8 15' fill='none'%3E%3Cpath d='M1 1L7 7.5L1 14' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* 前へ／次へ */
.selfcheck-carousel .slick-prev,
.selfcheck-carousel .slick-next {
	width: 40px;
	height: 50px;
	background: #7c7cca;
	border-radius: 4px;
	z-index: 1;
}
.selfcheck-carousel .slick-prev { left: -20px; }
.selfcheck-carousel .slick-next { right: -20px; }
.selfcheck-carousel .slick-prev:not(.slick-disabled):hover,
.selfcheck-carousel .slick-next:not(.slick-disabled):hover {
	background: #6a6ab8;
}
/* 先頭／末尾でクリックできない矢印はグレー(#cccccc)になる */
.selfcheck-carousel .slick-prev.slick-disabled,
.selfcheck-carousel .slick-next.slick-disabled {
	background: #cccccc;
	cursor: default;
}
/* slick 既定の矢印文字を消して疑似要素で描く */
.selfcheck-carousel .slick-prev::before,
.selfcheck-carousel .slick-next::before {
	content: "";
	display: inline-block;
	width: 8px;
	height: 8px;
	border-top: 2px solid #fff;
	border-right: 2px solid #fff;
	opacity: 1;
}
.selfcheck-carousel .slick-prev::before { transform: rotate(-135deg); margin-left: 4px; }
.selfcheck-carousel .slick-next::before { transform: rotate(45deg);   margin-right: 4px; }

/* ページネーション（番号入り） */
/* 20x20 / 角丸4px（円ではない） / 非アクティブ #cccccc / アクティブ #7c7cca */
.selfcheck-carousel .slick-dots {
	position: static;
	margin: 24px 0 0;
}
.selfcheck-carousel .slick-dots li {
	width: 20px;
	height: 20px;
	margin: 0 3px;
}
.selfcheck-carousel .slick-dots li button {
	width: 20px;
	height: 20px;
	padding: 0;
	background: #cccccc;
	border-radius: 4px;
	color: #fff;
	font-size: 11px;
	line-height: 20px;
	text-align: center;
}
.selfcheck-carousel .slick-dots li button::before {
	content: none;
}
.selfcheck-carousel .slick-dots li.slick-active button {
	background: #7c7cca;
	color: #fff;
}
/* 回答済みの設問 */
.selfcheck-carousel .slick-dots li.is-answered button {
	background: #b6b6e4;
	color: #fff;
}

.selfcheck-submit {
	margin: 32px 0 0;
	text-align: center;
}
.selfcheck-submit__btn {
	min-width: 320px;
	min-height: 64px;
	padding: 8px 24px;
	background: #7c7cca;
	border: none;
	border-radius: 8px;
	color: #fff;
	font-size: 18px;
	font-weight: 500;
	cursor: pointer;
	transition: opacity .3s ease;
}
.selfcheck-submit__btn:hover:not(:disabled) {
	opacity: .8;
}
.selfcheck-submit__btn:disabled {
	background: #c5c5d8;
	cursor: not-allowed;
}
.selfcheck-alert {
	margin: 12px 0 0;
	color: #c00;
	font-size: 14px;
	text-align: center;
}

/* ----------------------------------------------------------
   7. 結果モーダル
   SEO のため HTML には出力し、通常表示では隠す。
   magnific-popup が開くときに .mfp-hide が外れる。
   fixedContentPos: true のため背景（body）はスクロール不可になるが、
   ボックスが画面より縦長のときは .mfp-wrap 側で内部スクロールさせる。
   ---------------------------------------------------------- */
.mfp-wrap {
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
}

/* 結果1／結果2: 1080x536 / 白背景 / border 4px #7c7cca /
   角丸8 / box-shadow 0 0 20px rgba(0,0,0,.3) / 内側は左右65pxインセット */
.selfcheck-result {
	position: relative;
	max-width: 1080px;
	margin: 40px auto;
	padding: 40px 65px;
	background: #fff;
	border: 4px solid #7c7cca;
	border-radius: 8px;
	box-shadow: 0 0 20px rgba(0, 0, 0, .3);
}
/* 閉じるボタン（50x50 / #ccc / 角丸4 / 白い×線 2px、結果ボックス右上15px） */
.selfcheck-result .mfp-close {
	position: absolute;
	top: 15px;
	right: 15px;
	width: 50px;
	height: 50px;
	margin: 0;
	background: #ccc;
	border-radius: 4px;
	color: transparent;
	font-size: 0;
	opacity: 1;
	transition: background-color .3s ease;
}
.selfcheck-result .mfp-close:active {
	top: 15px;
}
.selfcheck-result .mfp-close:hover {
	background: #b3b3b3;
}
.selfcheck-result .mfp-close::before,
.selfcheck-result .mfp-close::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 20px;
	height: 2px;
	background: #fff;
}
.selfcheck-result .mfp-close::before {
	transform: translate(-50%, -50%) rotate(45deg);
}
.selfcheck-result .mfp-close::after {
	transform: translate(-50%, -50%) rotate(-45deg);
}
.selfcheck-result__title {
	margin: 0 0 24px;
	padding: 0 0 16px;
	border-bottom: 1px solid #4d4da5;
	color: #4d4da5;
	font-size: 30px;
	font-weight: 600;
	text-align: center;
}
/* 強調文（14点以上＝淡紫帯／14点未満＝グレー帯） */
.selfcheck-result__lead {
	margin: 0 0 24px;
	padding: 24px 16px;
	border-radius: 4px;
	font-size: 24px;
	font-weight: 700;
	line-height: 1.8;
	text-align: center;
}
.selfcheck-result__lead--high {
	background: #e9e9ff;
	color: #4d4da5;
}
.selfcheck-result__lead--low {
	background: #f5f5f5;
	color: #5c5c5c;
}
.selfcheck-result__body {
	margin: 0;
	font-size: 16px;
	font-weight: 500;
	line-height: 1.8;
	text-align: center;
}

/* ----------------------------------------------------------
   8. 設問下のコンテンツ（ACF wysiwyg の自由記述）
      管理側が本文と同じ感覚で書けるよう、素の h2/h3/p/ul/a に
      当ページのトンマナを当てておく。
   ---------------------------------------------------------- */
.selfcheck-after {
	margin-top: 8px;
}
.selfcheck-after h2 {
	margin: 64px auto 24px;
	padding: 0 0 16px;
	border-bottom: 2px solid #d6d6ef;
	background: none;
	color: #4d4da5;
	font-family: var(--sc-mincho);
	font-size: 40px;
	font-weight: 400;
	line-height: 1.4;
	text-align: center;
}
.selfcheck-after h3 {
	margin: 40px auto 16px;
	padding: 0;
	border: none;
	background: none;
	color: #4d4da5;
	font-family: var(--sc-mincho);
	font-size: 24px;
	font-weight: 600;
	line-height: 1.5;
}
.selfcheck-after p {
	margin: 0 0 1.5em;
	font-size: 16px;
	font-weight: 500;
	line-height: 1.9;
}
.selfcheck-after ul,
.selfcheck-after ol {
	margin: 0 0 1.5em;
	padding-left: 1.5em;
	font-size: 16px;
	font-weight: 500;
	line-height: 1.9;
}
/* テーマ側が li { list-style: none } を当てているので明示的に戻す */
.selfcheck-after ul > li { list-style: disc outside; }
.selfcheck-after ol > li { list-style: decimal outside; }
.selfcheck-after li {
	margin: 0 0 .5em;
}
/* base.css が a { text-decoration: none !important } を当てているため
   下線を出すには !important で上書きするしかない */
.selfcheck-quiz__inner .selfcheck-after a {
	color: #4d4da5;
	text-decoration: underline !important;
}
.selfcheck-quiz__inner .selfcheck-after a:hover {
	opacity: .7;
}
.selfcheck-after img {
	max-width: 100%;
	height: auto;
}
/* 参考文献はエディタで小さい文字（<small>）にすれば従来の見た目に近づく */
.selfcheck-after small {
	color: #666;
	font-size: 13px;
	line-height: 1.8;
}

/* ----------------------------------------------------------
   8-2. 設問下のコンテンツで既存コンポーネントを使ったときの調整

   エディタ側で .selfcheck-refs / .selfcheck-btn を書いた場合、
   上の汎用タイポ指定（p/ul/li/a）の方が詳細度で勝ってしまい
   コンポーネントの見た目が崩れる。ここで打ち消す。
   ---------------------------------------------------------- */

/* 参考文献 */
.selfcheck-after .selfcheck-refs p,
.selfcheck-after .selfcheck-refs ul,
.selfcheck-after .selfcheck-refs li {
	font-size: 13px;
	font-weight: 500;
	line-height: 1.8;
}
.selfcheck-after .selfcheck-refs__head {
	margin: 0 0 4px;
}
.selfcheck-after .selfcheck-refs__list {
	padding-left: 0;
}
.selfcheck-after .selfcheck-refs__list > li {
	margin: 0 0 4px;
	/* 「・」は ::before で出しているのでマーカーは消す */
	list-style: none;
}

/* ボタン */
.selfcheck-after .selfcheck-btn {
	margin: 32px auto;
	font-size: inherit;
}
.selfcheck-quiz__inner .selfcheck-after .selfcheck-btn a {
	color: #fff;
	text-decoration: none !important;
}
.selfcheck-quiz__inner .selfcheck-after .selfcheck-btn--check a {
	color: #4d4da5;
}

/* ----------------------------------------------------------
   8-1. アーカイブ末尾（フッターとの間を空ける）
   ---------------------------------------------------------- */
.selfcheck-archive .article-body {
	margin-bottom: 200px;
}

/* ----------------------------------------------------------
   9. SP
   ---------------------------------------------------------- */
@media screen and (max-width: 640px) {
	

	.selfcheck-br-sp {
		display: block;
	}
	.selfcheck-br-pc {
		display: none;
	}

	.selfcheck {
		overflow-x: hidden;
	}

	/* SP共通の横余白（--sc-sp-gutter）を、.inner の内外を問わず
	   同じ値で当てて左右の見た目を揃える。
	   テーマ共通の要素だが self_check アーカイブに限定して安全に上書きする。
	   ・.inner の外側にある要素（h1 / パンくず）はここでまとめて管理。
	     .selfcheck-quiz__title は .selfcheck-quiz__inner（後述）の内側にいるため対象外。 */
	body.post-type-archive-self_check .key__title,
	body.post-type-archive-self_check .keni-breadcrumb-list_outer,
	body.single-self_check .keni-breadcrumb-list_outer {
		padding-left: var(--sc-sp-gutter);
		padding-right: var(--sc-sp-gutter);
	}
	/* パンくずは折り返さず横スクロールで読めるようにする（self-check 限定）。
	   ・下パディングでスクロールバーと文字の間に余白を確保
	   ・スクロールバー自体を薄く常時見せて「動かせる」ことを示す
	   ・右端をフェードさせて続きがあることを視覚的に示す
	   ・初回表示時は JS で一瞬スクロールさせ、動かせることを体感で伝える（self-check.js 側） */
	body.post-type-archive-self_check .keni-breadcrumb-list_outer,
	body.single-self_check .keni-breadcrumb-list_outer {
		position: relative;
	}
	body.post-type-archive-self_check .keni-breadcrumb-list_outer::after,
	body.single-self_check .keni-breadcrumb-list_outer::after {
		content: "";
		position: absolute;
		top: 0;
		right: 0;
		width: 32px;
		height: 24px;
		background: linear-gradient(to right, rgba(255, 255, 255, 0), #fff);
		pointer-events: none;
	}
	body.post-type-archive-self_check .keni-breadcrumb-list,
	body.single-self_check .keni-breadcrumb-list {
		overflow-x: auto;
		padding-bottom: 10px;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: thin;
		scrollbar-color: #b7b7e0 transparent;
	}
	body.post-type-archive-self_check .keni-breadcrumb-list::-webkit-scrollbar,
	body.single-self_check .keni-breadcrumb-list::-webkit-scrollbar {
		height: 4px;
	}
	body.post-type-archive-self_check .keni-breadcrumb-list::-webkit-scrollbar-thumb,
	body.single-self_check .keni-breadcrumb-list::-webkit-scrollbar-thumb {
		background: #b7b7e0;
		border-radius: 2px;
	}
	body.post-type-archive-self_check .keni-breadcrumb-list_inner,
	body.single-self_check .keni-breadcrumb-list_inner {
		display: flex;
		flex-wrap: nowrap;
		width: max-content;
		padding-right: 20px;
	}
	body.post-type-archive-self_check .keni-breadcrumb-list_inner li,
	body.single-self_check .keni-breadcrumb-list_inner li {
		white-space: nowrap;
	}
	/* アーカイブの h2 は border-bottom を持つため、padding では枠（線）まで
	   縮められない。width 自体を余白ぶん狭めて中央寄せする。 */
	.article-body .selfcheck-h2 {
		width: calc(100% - (var(--sc-sp-gutter-total) * 2));
		margin-left: auto;
		margin-right: auto;
	}
	/* .inner 系コンテナ（本文・カード群・設問エリア）にまとめて同じ余白をつける。
	   内側の要素（.selfcheck-lead や .selfcheck-quiz__title 等）には重ねて付けない。 */
	.selfcheck-archive .article-body > .inner,
	body.single-self_check .article-body > .inner,
	.selfcheck-quiz__inner {
		padding-left: var(--sc-sp-gutter);
		padding-right: var(--sc-sp-gutter);
	}
	.selfcheck-lead {
		margin-top: 24px;
		margin-bottom: 56px;
	}

	/* 24px / Yu Mincho Regular / #4d4da5 / 中央寄せ */
	.article-body .selfcheck-h2,
	.selfcheck-quiz__title {
		margin-top: 40px;
		font-size: 24px;
	}
	.selfcheck-quiz__title {
		/* PC用の calc(100% + 200px) をやめ、親（.selfcheck-quiz__inner）の
		   パディング内に収めてカード・カルーセルと同じ幅・位置に揃える */
		width: 100%;
		margin-left: 0;
	}
	/* SP: 設問エリア見出しのみ 20px */
	.selfcheck-quiz__title { font-size: 20px; }

	/* SP確認用フレームに実在するボタン（QEEG/TMS詳細等）は80pxだが、
	   結果ボックスのボタンとサイズを揃えたいという要望で縮小。 */
	.selfcheck-btn a {
		max-width: none;
		min-height: 56px;
		gap: 12px;
		font-size: 15px;
		padding: 8px 24px;
	}
	.selfcheck-btn a::after { right: 12px; }

	/* アイコンは左端から16px固定、サイズ28px、テキストとの間も16px。中央寄せではなく左詰め。 */
	.selfcheck-btn--check a {
		justify-content: flex-start;
		gap: 16px;
		padding-left: 16px;
	}
	.selfcheck-btn--check .selfcheck-btn__icon {
		flex: 0 0 28px;
		width: 28px;
	}

	.selfcheck-lead { text-align: left; }

	.selfcheck-card--entry { padding: 24px 16px; }
	/* SP: 本文系は 13px */
	.selfcheck-archive .article-body > .inner > p,
	.selfcheck-about__text p,
	.selfcheck-card__desc,
	.selfcheck-card__note {
		font-size: 13px;
	}
	.selfcheck-card__title { font-size: 20px; }

	/* 画像は本文の上に回す */
	.selfcheck-about,
	.selfcheck-intro {
		display: block;
	}
	/* PC用の max-width: 833.29px / auto中央寄せ をやめ、
	   .inner（--sc-sp-gutter 適用済み）の内側いっぱいに広げて
	   他の要素と同じ横幅スペースにする */
	.selfcheck-intro {
		max-width: none;
		margin: 40px 0;
	}
	.selfcheck-about__img,
	.selfcheck-intro__img {
		max-width: 280px;
		margin: 0 auto 24px;
	}

	.selfcheck-quiz { padding-bottom: 40px; }

	.selfcheck-slide .selfcheck-card {
		min-height: 0;
		padding: 24px 25px;
	}
	.selfcheck-card__num  { font-size: 20px; }
	.selfcheck-card__text { font-size: 13px; }

	/* 4択は1列 */
	.selfcheck-options {
		grid-template-columns: 1fr;
		gap: 10px;
	}
	/* 高さは固定せずテキスト量に応じて伸びる（1行48px／2行60px相当）。 */
	.selfcheck-options__btn {
		min-height: 48px;
		font-size: 13px;
		padding: 10px 32px 10px 12px;
	}
	.selfcheck-options__btn::after { right: 14px; }

	/* SPでも矢印はカード縦中央のまま、横位置だけ画面の左右端につく。
	   カルーセル（カードと同じ幅）は画面から左右 23px の位置にあるため、
	   その分だけ内側にオフセットして画面端に揃える。矢印自体の幅も 40px → 30px に詰まる。 */
	.selfcheck-carousel .slick-prev,
	.selfcheck-carousel .slick-next {
		width: 30px;
	}
	.selfcheck-carousel .slick-prev { left: -23px; }
	.selfcheck-carousel .slick-next { right: -23px; }
	/* 見た目は変えずタップ範囲だけ広げる（30x50pxは指タップには狭いため）。
	   ::before は矢じるし表現に使用中なので ::after で透明な当たり判定を重ねる。 */
	.selfcheck-carousel .slick-prev::after,
	.selfcheck-carousel .slick-next::after {
		content: "";
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		width: 44px;
		height: 64px;
	}
	.selfcheck-carousel .slick-dots {
		margin-top: 16px;
		/* 14個 x 16px + アイテム間隔5px x 13 = 289px（フレーム幅の約77%）。
		   PC用の gap（margin: 0 3px）のままだと折り返すため、SP限定で詰める。 */
		display: flex;
		flex-wrap: nowrap;
		justify-content: center;
		gap: 5px;
		width: 100%;
	}

	/* 16x16 / 角丸4px（円ではない） */
	.selfcheck-carousel .slick-dots li,
	.selfcheck-carousel .slick-dots li button {
		width: 16px;
		height: 16px;
		border-radius: 4px;
	}
	.selfcheck-carousel .slick-dots li {
		flex: 0 0 auto;
		margin: 0;
	}
	.selfcheck-carousel .slick-dots li button {
		font-size: 9px;
		line-height: 16px;
	}

	.selfcheck-submit__btn {
		min-width: 0;
		width: 100%;
	}

	.selfcheck-after h2 {
		margin-top: 40px;
		font-size: 24px;
	}
	.selfcheck-after h3 { font-size: 18px; }
	.selfcheck-after p,
	.selfcheck-after ul,
	.selfcheck-after ol { font-size: 13px; }

	.selfcheck-result { padding: 32px 16px 16px; }
	.selfcheck-result__title { font-size: 20px; }
	.selfcheck-result__lead  { font-size: 17px; padding: 16px 12px; }
	.selfcheck-result__body  { font-size: 14px; text-align: left; }

	/* PCの50x50はSPには大きすぎるため縮小 */
	.selfcheck-result .mfp-close {
		top: 10px;
		right: 10px;
		width: 32px;
		height: 32px;
	}
	.selfcheck-result .mfp-close:active {
		top: 10px;
	}
	.selfcheck-result .mfp-close::before,
	.selfcheck-result .mfp-close::after {
		width: 10px;
	}

}