/* -- postsingle ------------------------------- */
.postsingle h4{
	font-weight: 700;
	margin-top: var(--sp-m);
	line-height: var(--lh-tight);
}

/* FAQ（よくある質問・Q/Aアイコン付き） */
.postsingle .faq-q,
.postsingle .faq-a{
	position: relative;
	padding-left: var(--sp-l);
	margin: var(--sp-s) 0 0;
	line-height: var(--lh-ui);
}
.postsingle .faq-q{
	font-weight: 700;
	margin-top: var(--sp-m);

border-bottom: 1px dashed var(--sub);
padding-bottom: 2px;
display: inline-block;

}
.postsingle .faq-q::before,
.postsingle .faq-a::before{
	position: absolute;
	left: 0;
	top: 0;
	width: 24px;
	height: 24px;
	border-radius: 50%;
	font-size: var(--fz-s);
	font-weight: 700;
	line-height: 24px;
	text-align: center;
}
.postsingle .faq-q::before{
	content: "Q.";
	/* background: var(--ink); */
	color: var(--ink);
}
.postsingle .faq-a::before{
	content: "A";
	/* background: var(--key); */
	color: var(--ink);
}

.postsingle em{
	font-style: normal;
	color: var(--campaign);
	font-weight: 700;
}

.postsingle p.kome{
	margin-top: var(--sp-m);
	text-indent: -1rem;
	padding-left: var(--sp-m);
	line-height: var(--lh-sub);
	font-size: var(--fz-s);
}

.postsingle table td p.kome{
	margin-top: var(--sp-s);
}

.postsingle p.arrow{
	margin: var(--sp-s) auto 0;
	width: 0;
	height: 0;
	border-left: 15px solid transparent;
	border-right: 15px solid transparent;
	border-top: 15px solid var(--ink);
}


/* 記事内の画像 */
.postsingle :is(p.pic_yoko, p.pic_tate){
	text-align: center;
	margin-left: auto;
	margin-right: auto;
	line-height: 0;
}

.postsingle p.pic_yoko{
	width: 100%;
}

.postsingle p.pic_tate{
	max-width: 300px;
}

.postsingle p.pic_yoko img,
.postsingle p.pic_tate img{
	width: 100%;
	border: 1px solid var(--line);
	border-radius: var(--r-md);
}

/* -- password -- */
.postsingle .post-password-form input[type=password]{
	flex-grow: 1;
	min-width: 3rem;
	border: 1px solid var(--ink);
	border-radius: 0.5rem;
	padding: var(--sp-s);
	font-size: var(--fz-m);
	width: 150px;
}

.postsingle .post-password-form input[type=submit]{
	flex-grow: 1;
	width: 50px;
	font-size: var(--fz-s);
	padding: var(--sp-s) 0;
	background: var(--ink);
	border: 1px solid var(--ink);
	border-radius: 0.5rem;
	text-align: center;
	color: var(--paper);
}


.postsingle blockquote p.pic_tate img,
.postsingle blockquote p.pic_yoko img{
	border: none;
}

/* ブログカード（カード全体が押せる＝黒い罫線。中のボタンだけが押せる招待コード・勧めるカードは薄い罫線 --line で区別） */
.postsingle .blogcard{
	margin-top: var(--sp-l); /* 枠線に重ねたラベルのぶん空ける */
	border: 1px solid var(--ink);
	background: var(--paper);
	border-radius: var(--r-md);
	transition: background-color .2s ease;
}

.postsingle .blogcard a{
	position: relative;
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--sp-m);
	align-items: center;
	padding: var(--sp-m) var(--sp-xl) var(--sp-m) var(--sp-xs); /* 文字の左は .tit の余白と合わせて --sp-m */
	text-decoration: none;
}

.postsingle .blogcard a::after{
	content: '';
	position: absolute;
	top: 50%;
	width: 16px;
	height: 16px;
	background: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M13.293 5.293a1 1 0 0 1 1.414 0l6 6a1 1 0 0 1 0 1.414l-6 6a1 1 0 0 1-1.414-1.414L17.586 13H4a1 1 0 1 1 0-2h13.586l-4.293-4.293a1 1 0 0 1 0-1.414Z'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M13.293 5.293a1 1 0 0 1 1.414 0l6 6a1 1 0 0 1 0 1.414l-6 6a1 1 0 0 1-1.414-1.414L17.586 13H4a1 1 0 1 1 0-2h13.586l-4.293-4.293a1 1 0 0 1 0-1.414Z'/%3E%3C/svg%3E") center / contain no-repeat;
	transform: translateY(-50%);
	right: 16px;
}

/* 「あわせて読みたい」：枠線の左上に重ねる（地の色で線を切る）。PR ボタンより目立たせないよう文字は --sub */
.postsingle .blogcard__label{
	position: absolute;
	top: 0;
	left: var(--sp-s);
	padding: 0 var(--sp-xs);
	color: var(--sub);
	background: var(--paper);
	font-size: var(--fz-ss);
	font-weight: 700;
	line-height: var(--lh-tight);
	transform: translateY(-50%);
}

.postsingle .blogcard p.tit{
	margin: 0;
	padding: 0 var(--sp-s);
	line-height: var(--lh-sub);
	font-size: var(--fz-s);
	font-weight: 700;
	width: auto;
}

.postsingle .blogcard__deadline{
	display: block;
}

/* [blogcard] の招待コードのカード・勧めるカード（functions.php poimame_refcard）。どのコード・ボタンがどのサービスのものかわかるよう1件ずつ枠で囲む。
   中のボタン・記事を見るだけが押せる＝枠は薄い罫線（カード全体が押せるブログカードは黒） */
.postsingle .refcard{
	margin-top: var(--sp-m);
	padding: var(--sp-m);
	border: 1px solid var(--line);
	border-radius: var(--r-md);
	background: var(--paper);
}

/* サービス名（招待コードのカードは h3）。枠の中なので本文の h3 の左の縦線は付けない */
.postsingle .refcard__name{
	margin: 0 0 var(--sp-xs);
	padding: 0;
	border-left: 0;
	font-size: var(--fz-m);
	font-weight: 700;
	line-height: var(--lh-tight);
}

/* 特典の1文（記事の特典ブロックの1文目）。金額は本文の em と同じ赤い太字 */
.postsingle .refcard__lead{
	margin: 0 0 var(--sp-s);
	font-size: var(--fz-s);
	line-height: var(--lh-sub);
}

/* 期限（記事タイトルの【〜まで】・期限内だけ出す。見た目は記事カードの .postgrid__deadline と同じ）。ブログカードも共通 */
.postsingle .blogcard__deadline{
	width: fit-content;
	margin: 0 0 var(--sp-xs);
	padding: 2px var(--sp-xs);
	color: var(--on-campaign);
	background: var(--campaign);
	border-radius: var(--r-pill);
	font-size: var(--fz-ss);
	font-weight: 700;
	line-height: var(--lh-tight);
}

/* コードは途中で改行させない（SP・PC とも同じ大きさ） */
.postsingle .refcard .code{
	margin-top: 0;
	padding: var(--sp-xs) var(--sp-l);
	font-size: var(--fz-m);
	white-space: nowrap;
}

.postsingle .refcard .btn{
	margin-top: var(--sp-xs);
}

/* 招待コードのカードの、コードの注意書き（記事でコードの直後に置いた米印） */
.postsingle .refcard .kome{
	margin-top: var(--sp-xs);
}

.postsingle .refcard :is(.code, .kome) + .btn{
	margin-top: var(--sp-s);
}

.postsingle .refcard .btn a{
	padding: var(--sp-s) var(--sp-l) var(--sp-s) var(--sp-s);
	font-size: var(--fz-s);
}

.postsingle .refcard__more{
	display: inline-block;
	margin-top: var(--sp-xs);
	padding: var(--sp-2xs) var(--sp-xs);
	border-radius: var(--r-sm);
	font-size: var(--fz-s);
}

/* コード */
.postsingle .code{
	position: relative;
	margin: var(--sp-m) auto 0;
	width: 100%;
	display: block;
	padding: var(--sp-s) var(--sp-xl);
	border: 1px dashed var(--ink);
	border-radius: var(--r-sm);
	text-align: center;
	font-size: var(--fz-l);
	font-family: Consolas;
	line-height: var(--lh-tight);
	font-weight: 700;
}

/* コード枠の上部に「招待コード」（::before なのでコピーボタンが読む textContent には入らない） */
.postsingle .code::before{
	content: "招待コード";
	display: block;
	margin-bottom: var(--sp-xs);
	color: var(--sub);
	font-family: 'Inter', 'Noto Sans JP', -apple-system, sans-serif;
	font-size: var(--fz-ss);
	font-weight: 700;
}

.postsingle li .code{
	margin: 0 auto var(--sp-s);
}

/* コードのコピーボタン（script.js が挿入） */
.postsingle .code__copy{
	position: absolute;
	top: 50%;
	right: 8px;
	transform: translateY(-50%);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	padding: 0;
	border: none;
	background: none;
	color: var(--ink);
	cursor: pointer;
}
.postsingle .code__copy svg{
	width: 18px;
	height: 18px;
}
.postsingle .code__tip{
	position: absolute;
	bottom: calc(100% + 6px);
	right: 0;
	padding: var(--sp-2xs) var(--sp-s);
	border-radius: var(--r-sm);
	background: var(--paper);
	color: var(--ink);
	border: 1px solid var(--line);
	font-family: 'Inter', 'Noto Sans JP', -apple-system, sans-serif;
	font-size: var(--fz-ss);
	font-weight: 400;
	line-height: var(--lh-tight);
	white-space: nowrap;
	opacity: 0;
	transition: opacity .2s;
	pointer-events: none;
}
.postsingle .code__tip.is-show{
	opacity: 1;
}


/* 外部リンクボタン */
.postsingle .btn{
	margin-top: var(--sp-l);
}

.postsingle li .btn{
	margin: 0 auto var(--sp-s);
}

.postsingle .btn a{
	position: relative;
	width: 100%;
	display: block;
	margin: 0 auto;
	padding: var(--sp-m) var(--sp-l) var(--sp-m) var(--sp-s);
	border-radius: 50px;
	border: 1px solid var(--btn-bg);
	background: var(--btn-bg);
	background-image: linear-gradient(var(--shine-angle), transparent 0%, transparent 40%, var(--shine-color) 48%, transparent 56%, transparent 100%);
	background-repeat: no-repeat;
	background-size: 240% 100%;
	background-position: 140% 0;
	text-decoration: none;
	text-align: center;
	color: var(--btn-fg);
	font-weight: 700;
	font-size: var(--fz-m);
	line-height: var(--lh-tight);
	overflow: hidden;
	transition: transform .2s ease;
	/* box-shadow: 0 5px 15px rgba(0,0,0,.15); */
}

.postsingle .btn a::before{
	content: 'PR';
	display: inline-block;
	margin-right: var(--sp-xs);
	color: currentColor;
	font-size: var(--fz-ss);
	font-weight: 700;
	line-height: 1;
	vertical-align: 0.08em;
}

.postsingle .btn a::after{
	content: '';
	position: absolute;
	top: 50%;
	width: 16px;
	height: 16px;
	right: 20px;
	background: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M13.293 5.293a1 1 0 0 1 1.414 0l6 6a1 1 0 0 1 0 1.414l-6 6a1 1 0 0 1-1.414-1.414L17.586 13H4a1 1 0 1 1 0-2h13.586l-4.293-4.293a1 1 0 0 1 0-1.414Z'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M13.293 5.293a1 1 0 0 1 1.414 0l6 6a1 1 0 0 1 0 1.414l-6 6a1 1 0 0 1-1.414-1.414L17.586 13H4a1 1 0 1 1 0-2h13.586l-4.293-4.293a1 1 0 0 1 0-1.414Z'/%3E%3C/svg%3E") center / contain no-repeat;
	animation: btn_arrow .6s infinite ease-in-out;
}

/* 別タブで開くボタンは矢印の代わりに「別タブ」アイコン（Material Symbols open_in_new） */
.postsingle .btn a[target="_blank"]::after{
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -960 960 960'%3E%3Cpath d='M200-120q-33 0-56.5-23.5T120-200v-560q0-33 23.5-56.5T200-840h280v80H200v560h560v-280h80v280q0 33-23.5 56.5T760-120H200Zm188-212-56-56 372-372H560v-80h280v280h-80v-144L388-332Z'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -960 960 960'%3E%3Cpath d='M200-120q-33 0-56.5-23.5T120-200v-560q0-33 23.5-56.5T200-840h280v80H200v560h560v-280h80v280q0 33-23.5 56.5T760-120H200Zm188-212-56-56 372-372H560v-80h280v280h-80v-144L388-332Z'/%3E%3C/svg%3E");
	/* 別タブアイコンは揺らさない（矢印だけ動かす） */
	transform: translateY(-50%);
	animation: none;
}

@keyframes btn_arrow {
	0%, 100% { transform: translateY(-50%) translateX(0); }
	50% { transform: translateY(-50%) translateX(5px); }
}

.postsingle .btn a:hover{
	animation: btn_shine var(--shine-dur) var(--shine-ease);
}

@keyframes btn_shine {
	from { background-position: 140% 0; }
	to { background-position: -40% 0; }
}

/* 固定ボタン：元の .btn が上に消えたら本文カラム右上に最小化（黒丸＋PR＋黄色矢印）。top は script.js がヘッダー下に合わせる。
   PC で右カラムが列になる幅（900px〜の目次のある記事・1120px〜の全記事）は、script.js が右カラムに置き通常サイズで出す（下の PC 用 .postsingle__side .btn--fixed）。
   ボタン文言は GTM の Click Text 計測のため innerText に残るよう text-indent で枠外へ押し出して隠す（font-size:0 だと innerText が空になる） */
.postsingle .btn.btn--fixed{
	position: fixed;
	right: max(var(--gutter), (100vw - var(--post-w)) / 2);
	z-index: 30;
	margin: 0;
	opacity: 1;
	transform: scale(1);
	transition: opacity .3s ease, transform .3s ease, visibility .3s ease;
}

.postsingle .btn.btn--fixed.is-hidden{
	visibility: hidden;
	opacity: 0;
	pointer-events: none;
	transform: scale(.6);
}

/* 記事末のボタン：本文最初のボタンが見えている間は隠す（場所は確保したまま＝レイアウトが動かない。script.js）。特典まとめ（.postend）の中のボタンは隠さない */
.postsingle .btn.btn--end{
	transition: opacity .3s ease, visibility .3s ease;
}

.postsingle .btn.btn--end.is-hidden{
	visibility: hidden;
	opacity: 0;
}

/* 記事末の特典まとめ（index.php）：枠で囲まず、先頭の見出し「特典内容」を太い罫線の中央に文字を載せる形（——— 特典内容 ———）にする */
.postsingle .postend{
	margin-top: var(--sp-2xl);
}

/* 見出しがあるときは、終わりにも見出しの罫線と同じ太さの線を引く。線の上の余白は見出しの下と同じ（--sp-l） */
.postsingle .postend:has(> .postend__title){
	padding-bottom: var(--sp-l);
	border-bottom: 3px solid var(--ink);
}

/* 見出しは本文の h2 の見た目（番号・大きい余白）を打ち消す。記事の章ではないので番号を付けない＝目次とずれない。番号の ::before と ::after を左右の罫線に使う */
.postsingle__body .postend__title{
	margin: 0 0 var(--sp-l);
	color: var(--ink);
	font-size: var(--fz-l);
}

.postsingle__body .postend__title::before,
.postsingle__body .postend__title::after{
	content: "";
	counter-increment: none;
	flex: 1 1 0;
	width: auto;
	height: 3px;
	border-radius: 0;
	background: var(--ink);
}

.postsingle .btn.btn--fixed a{
	width: 52px;
	height: 52px;
	padding: 0;
	border-radius: 50%;
	white-space: nowrap;
	text-indent: 200%;
	box-shadow: var(--shadow);
}

.postsingle .btn.btn--fixed a::before{
	position: absolute;
	top: 11px;
	left: 0;
	right: 0;
	margin: 0;
	text-indent: 0;
	text-align: center;
	font-size: var(--fz-ss);
}

.postsingle .btn.btn--fixed a::after{
	top: 62%;
	left: calc(50% - 9px);
	right: auto;
	width: 18px;
	height: 18px;
	transform: translateY(-50%);
	animation: none;
}

/* テーブル内のボタンは小さく */
.postsingle table .btn{
	margin-top: 0;
}

.postsingle table .btn a{
	font-size: var(--fz-ss);
	padding: var(--sp-2xs);
	max-width: 200px;
}

.postsingle table .btn a::after{
	right: 15px;
}

/* メッセージ吹き出し */
.postsingle .messe{
	margin: var(--sp-l) auto 0;
	overflow: hidden;
}

.postsingle .messe p{
	margin: 0;
}

.postsingle .messe p.fuki{
	float: left;
	width: calc(100% - 80px);
	position: relative;
	display: inline-block;
	padding: var(--sp-s) var(--sp-s);
	border: 0;
	background: var(--base);
	border-radius: var(--r-md);
	line-height: var(--lh-sub);
	font-size: var(--fz-s);
}

.postsingle .messe p.fuki:before{
	content: "";
	position: absolute;
	top: 25px;
	left: -20px;
	margin-top: calc(var(--sp-s) * -1);
	border: 10px solid transparent;
	border-right: 12px solid var(--base);
	z-index: 11;
}

.postsingle .messe p.fuki:after{
	display: none;
}

.postsingle .messe p.icon{
	float: left;
	display: inline-block;
	width: 80px;
}

.postsingle .messe p.icon:before{
	content: '';
	width: 55px;
	height: 55px;
	display: inline-block;
	border-radius: 55px;
	background-image: url(img/pic_fuki.png);
	background-size: contain;
	vertical-align: middle;
}


/* -- アイキャッチ（投稿の先頭・SP は画面幅いっぱい） -- */
.postsingle .postsingle__eyecatch{
  margin: 0 calc(var(--gutter) * -1);
}

.postsingle .postsingle__eyecatch img{
  width: 100%;
  height: auto;
  display: block;
}


/* -- index（目次・functions.php poimame_render_toc() が自動生成） ------------------------------- */
.postsingle .posttoc{
	/* .postsingle__body > *:first-child{margin-top:0} を上書きするため必須 */
	margin: var(--sp-xl) calc(var(--gutter) * -1) 0 !important;
	padding: calc(var(--section-pad) + var(--sp-2xs)) var(--gutter) calc(var(--section-pad) - var(--sp-2xs));
	background: var(--paper);
	border-top: 1px solid var(--line);
	border-bottom: 1px solid var(--line);
	font-size: var(--fz-s);
	line-height: var(--lh-ui);
}

.postsingle .posttoc__head{
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--sp-s);
	margin: 0 0 var(--sp-s);
}

.postsingle .posttoc__title{
	margin: 0;
	font-weight: 700;
	line-height: var(--lh-tight);
	font-size: var(--fz-s);
}

.postsingle .posttoc__toggle{
	flex: none;
	padding: 0;
	border: 0;
	background: none;
	color: var(--ink);
	font-size: var(--fz-s);
	text-decoration: underline;
	text-underline-offset: 3px;
	cursor: pointer;
}

.postsingle .posttoc__list{
	margin: 0;
	counter-reset: toc-num;
}

.postsingle .posttoc__list > li{
	position: relative;
	padding-left: var(--sp-l);
	padding-top: var(--sp-2xs);
	padding-bottom: var(--sp-2xs);
	font-size: var(--fz-s);
}

.postsingle .posttoc__list > li:before{
	counter-increment: toc-num;
	content: counter(toc-num);
	position: absolute;
	top: 5px;
	left: 0;
	width: 18px;
	height: 18px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: var(--ink);
	color: var(--paper);
	border-radius: 2px;
	font-size: var(--fz-ss);
	line-height: 1;
}


/* -- 記事（SP=1カラム / PC=本文＋右カラムの目次） ------------------------------- */
/* 記事は白い面（地のベージュの上）。SP は画面幅いっぱい、PC は角丸のカード */
.postsingle__main {
	max-width: var(--post-w);
	margin: 0 calc(var(--gutter) * -1);
	padding: 0 var(--gutter);
	background: var(--paper);
}

/* 右カラム（目次・固定ボタン・シェア。PC 900px〜で目次のある記事／1120px〜は全記事で列になる。それ以外は固定ボタンの置き場だけ）・左カラム（PC 1120px〜） */
.postsingle__side .posttoc,
.postsingle__sideshare,
.postsingle__left {
	display: none;
}

.postsingle--single {
	border-top: 0;
}

/* 記事・固定ページの上の広告（index.php・白い面の外）。ヘッダー・記事との間を空ける */
.postad--header:has(+ .postsingle) {
	margin: var(--gutter) 0;
}

.postsingle__head {
	padding: var(--gutter) 0 0;
}

.postsingle__tag {
	display: inline-block;
	padding: var(--sp-2xs) var(--sp-s);
	background: var(--paper);
	border-radius: var(--r-pill);
	color: var(--sub);
	border:1px solid var(--line);
	font-size: var(--fz-ss);
	font-weight: 700;
}

.postsingle__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--sp-xs);
}

.postsingle__date {
	color: var(--sub);
	font-size: var(--fz-ss);
}

.postsingle__titlerow {
	display: flex;
	align-items: flex-start;
	gap: var(--sp-s);
}

.postsingle h1 {
	margin: var(--sp-s) 0 0;
	padding: 0;
	font-size: var(--fz-ll);
	font-weight: 700;
	line-height: var(--lh-tight);
}

.postsingle__titlerow h1 {
	flex: 1 1 auto;
	min-width: 0;
}

.postsingle__body {
	padding: var(--section-pad) 0;
}

.postsingle__body p {
	margin: var(--sp-s) 0 0;
	font-size: var(--fz-m);
	line-height: var(--lh-body);
}

.postsingle__body > *:first-child {
	margin-top: 0;
}

.postsingle__body a {
	text-decoration: underline;
	text-underline-offset: 3px;
}

.postsingle__body .blogcard a,
.postsingle__body .btn a,
.postsingle__body .posttoc a {
	text-decoration: none;
}

.postsingle__body {
	counter-reset: h2num;
}

.postsingle__body h2 {
	display: flex;
	align-items: center;
	gap: var(--sp-s);
	margin: var(--sp-2xl) 0 var(--sp-s) 0;
	font-size: var(--fz-ll);
	font-weight: 700;
	line-height: var(--lh-tight);
}

.postsingle__body h2::before {
	counter-increment: h2num;
	content: counter(h2num);
	flex: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 1.8em;
	height: 1.8em;
	border-radius: 2px;
	background: var(--ink);
	color: var(--paper);
	font-size: var(--fz-l);
	line-height: 1;
}

.postsingle__body h3 {
	margin: var(--sp-xl) 0 0;
	font-size: var(--fz-m);
	font-weight: 700;
	line-height: var(--lh-tight);
	border-left:3px solid var(--ink);
	padding:var(--sp-2xs) 0 var(--sp-2xs) var(--sp-s);
}

.postsingle__body :is(ul, ol) {
	margin: var(--sp-m) 0 0;
	padding: 0;
}

.postsingle__body :is(ul, ol) li {
	position: relative;
	margin: 0;
	padding: var(--sp-xs) 0 var(--sp-xs) var(--sp-l);
	font-size: var(--fz-m);
	line-height: var(--lh-sub);
}

.postsingle__body ul li::before {
	content: '';
	position: absolute;
	top: 16px;
	left: 6px;
	width: 10px;
	height: 10px;
	background: var(--paper);
	border: 2px solid var(--ink);
	border-radius: 50%;
}

/* 冒頭の特典ブロックの包み（functions.php）。本文の先頭なので、中の先頭の要素も上の余白なし（.postsingle__body > *:first-child と同じ扱い） */
.postsingle__body .offer > :first-child {
	margin-top: 0;
}

/* 特典ブロック（冒頭の .offer＝functions.php／記事末の .postend）の特典が2件以上のリストは一段小さく（リードの「合計最大◯円分」を主役にする） */
.postsingle__body :is(.offer, .postend) ul:has(> li + li) > li {
	font-size: var(--fz-s);
}

.postsingle__body :is(.offer, .postend) ul:has(> li + li) > li::before {
	top: 14px; /* 小さい文字の1行目の中央に合わせる */
}

/* 特典ブロックの区切り（記事に手入力の <hr>。これから申し込む人と、すでに口座開設済みの人の案内を分ける） */
.postsingle__body :is(.offer, .postend) hr {
	border: 0;
	border-top: 1px dashed var(--sub);
	margin: var(--sp-l) 0;
}

.postsingle__body ol {
	counter-reset: postsingle-number;
}

.postsingle__body ol li {
	counter-increment: postsingle-number;
}

.postsingle__body ol li::before {
	content: counter(postsingle-number);
	position: absolute;
	top: 7px;
	left: 0;
	width: 22px;
	height: 22px;
	display: grid;
	place-items: center;
	color: var(--ink);
	background: var(--paper);
	border: 1px solid var(--ink);
	border-radius: 50%;
	font-size: var(--fz-ss);
	font-weight: 700;
}

.postsingle__body blockquote {
	position: relative;
	margin: var(--sp-m) 0 0;
	padding: var(--sp-m) var(--sp-m) var(--sp-m) var(--sp-xl);
	color: var(--ink);
	background: var(--base);
	border-radius: var(--r-md);
	font-size: var(--fz-m);
	font-style: normal;
	line-height: var(--lh-sub);
}

.postsingle__body blockquote::before {
	content: '';
	position: absolute;
	top: 16px;
	left: 16px;
	width: 24px;
	height: 24px;
	background: var(--ink);
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath d='M0 216C0 149.7 53.7 96 120 96h8c17.7 0 32 14.3 32 32s-14.3 32-32 32h-8c-30.9 0-56 25.1-56 56v8h64c35.3 0 64 28.7 64 64v64c0 35.3-28.7 64-64 64H64c-35.3 0-64-28.7-64-64V216zm256 0c0-66.3 53.7-120 120-120h8c17.7 0 32 14.3 32 32s-14.3 32-32 32h-8c-30.9 0-56 25.1-56 56v8h64c35.3 0 64 28.7 64 64v64c0 35.3-28.7 64-64 64H320c-35.3 0-64-28.7-64-64V216z'/%3E%3C/svg%3E") no-repeat center / contain;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath d='M0 216C0 149.7 53.7 96 120 96h8c17.7 0 32 14.3 32 32s-14.3 32-32 32h-8c-30.9 0-56 25.1-56 56v8h64c35.3 0 64 28.7 64 64v64c0 35.3-28.7 64-64 64H64c-35.3 0-64-28.7-64-64V216zm256 0c0-66.3 53.7-120 120-120h8c17.7 0 32 14.3 32 32s-14.3 32-32 32h-8c-30.9 0-56 25.1-56 56v8h64c35.3 0 64 28.7 64 64v64c0 35.3-28.7 64-64 64H320c-35.3 0-64-28.7-64-64V216z'/%3E%3C/svg%3E") no-repeat center / contain;
}

/* X の投稿の埋め込み（記事に投稿の URL を1行で入れる＝WordPress が自動で変換）。上に見出しと同じ余白を空け、中央に置く。
   X のスクリプトが要素に直接付ける style（上下 10px・左寄せ）を上書きするので !important */
.postsingle__body .twitter-tweet {
	margin: var(--sp-2xl) auto 0 !important;
}

.postsingle__body table {
	width: 100%;
	margin: var(--sp-m) 0 0;
	border-collapse: separate;
	border-spacing: 0;
	border-radius: var(--r-md);
	box-shadow: 0 0 0 1px var(--line);
	overflow: hidden;
	font-size: var(--fz-s);
}

.postsingle__body table th {
	padding: var(--sp-s);
	color: var(--ink);
	background: var(--base);
	border: 0;
	border-right: 1px solid var(--line);
	border-bottom: 1px solid var(--line);
	font-size: var(--fz-s);
	font-weight: 700;
	text-align: left;
}

.postsingle__body table td {
	padding: var(--sp-s);
	border: 0;
	border-right: 1px solid var(--line);
	border-bottom: 1px solid var(--line);
	font-size: var(--fz-s);
	line-height: var(--lh-ui);
}

/* 表の中の段落（wpautop が入れる <p> を含む）は本文の段落の大きさ（.postsingle__body p）でなく表の文字に合わせる */
.postsingle__body table :is(th, td) p {
	font-size: inherit;
	line-height: inherit;
}

.postsingle__body table th:last-child,
.postsingle__body table td:last-child {
	border-right: 0;
}

.postsingle__body table tr:last-child td {
	border-bottom: 0;
}

/* 表の中のリストは表の文字に合わせて小さく・字下げを浅く（スマホの細いセルで折り返しすぎないように） */
.postsingle__body table ul {
	margin: 0;
}

.postsingle__body table ul li {
	padding: 0 0 0 var(--sp-s);
	font-size: inherit;
	line-height: inherit;
}

.postsingle__body table ul li + li {
	margin-top: var(--sp-2xs);
}

.postsingle__body table ul li::before {
	top: calc(var(--lh-ui) * 1em / 2 - 3px); /* 1行目の中央（点の高さ 6px の半分を引く） */
	left: 2px;
	width: 6px;
	height: 6px;
	background: var(--ink);
	border: 0;
}

.postsingle__body figure {
	margin: var(--sp-m) 0 0;
}

.postsingle strong {
	background: linear-gradient(transparent 75%, var(--marker) 75%);
}

.postsingle code {
	padding: var(--sp-2xs) var(--sp-xs);
	margin:0 var(--sp-2xs);
	border: 1px solid var(--ink);
	border-radius: var(--r-pill);
}

.postsingle__body figure img,
.postsingle__body p > img {
	border: 1px solid var(--line);
	border-radius: var(--r-md);
}

.postsingle__share {
	margin: var(--sp-xl) 0 0; /* 下は本文の余白（--section-pad）だけにする */
}

.postsingle__share-text {
	color: var(--sub);
	font-size: var(--fz-ss);
	font-weight: 700;
	letter-spacing: .08em;
}

.postsingle__share-row {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: nowrap;
	gap: var(--sp-xs);
	margin-top: var(--sp-s);
}

.postsingle__share-btn {
	width: var(--share-btn);
	height: var(--share-btn);
	display: grid;
	place-items: center;
	padding: 0;
	color: var(--ink);
	background: var(--paper);
	border: 0;
	border-radius: 50%;
	font-size: var(--emoji);
	line-height: 1;
	cursor: pointer;
}

.postsingle__share-btn svg {
	width: var(--share-icon);
	height: var(--share-icon);
}

/* LINE は公式ロゴをブランドカラーで（ひと目で LINE と分かるように） */
.postsingle__share-btn--line {
	color: var(--line-brand);
}

/* 関連記事 related-posts.php（記事末の広告の下。1件はサムネ＋タイトルの横並び catblock__item（style.css）で、間に罫線） */
.relposts {
	padding-bottom: var(--section-pad); /* SP は .postsingle__main に下の余白が無いため */
}

.relposts__list {
	display: flex;
	flex-direction: column;
}

.relposts__item {
	margin: 0;
	padding: var(--sp-s) 0;
	border-radius: 0;
}

/* 区切りは記事の間の罫線だけ（上下の端には引かない） */
.relposts__item + .relposts__item {
	border-top: 1px solid var(--line);
}

@media (min-width: 768px) {
	.relposts {
		padding-bottom: 0;
	}
}

/* 告知カード promo-card.php（プロフィールの下。見た目は記事カード postgrid__item と同じ） */
.promo {
	position: relative;
	display: flex;
	flex-direction: column;
	max-width: 480px;
	margin: var(--sp-m) auto 0;
	color: var(--ink);
	background: var(--paper);
	border: 1px solid var(--line);
	border-radius: var(--r-md);
}

.promo__img {
	display: block;
	width: 100%;
	aspect-ratio: 2 / 1;
	object-fit: cover;
	border-radius: calc(var(--r-md) - 1px) calc(var(--r-md) - 1px) 0 0; /* overflow で切らない（バッジを上へはみ出させる）ので画像の角を丸める */
}

/* hover：テーマが出力するリンク・ボタンは色を変えず動きで反応（style.css の hover ルールと同じ）。
   記事本文に手入力したテキストリンクだけは例外で、下線を消す */
@media (hover: hover) and (pointer: fine) {
	.postsingle__body a:hover {
		text-decoration: none;
	}
}

@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
	.promo,
	.postsingle .blogcard,
	.postsingle .refcard__more,
	.postsingle__share-btn,
	a.postsingle__tag,
	.postsingle .posttoc__link {
		transition: transform .2s ease;
	}

	/* 画像のあるもの・PR ボタン（ボタンは光沢の掃引と合わせて少し大きく） */
	.promo:hover,
	.postsingle .blogcard:hover,
	.postsingle .btn a:hover {
		transform: scale(1.03);
	}

	/* 文字だけのもの */
	.postsingle .refcard__more:hover,
	.postsingle__share-btn:hover,
	a.postsingle__tag:hover,
	.postsingle .posttoc__link:hover {
		transform: translateY(-2px);
	}
}

/* PC は画面幅に応じて3段階：
   768px〜 = 記事のみ（目次は本文中・固定ボタンは黒丸）
   900px〜 = 記事｜目次＋シェア（目次のある記事のみ。目次はスクロール追従・固定ボタンは目次の下）
   1120px〜 = プロフィール｜記事｜目次＋シェア（左右とも同じ幅でスクロール追従・記事は中央。記事は 480px 程度まで縮む） */
@media (min-width: 768px) {
	.postsingle {
		display: grid;
		grid-template-columns: minmax(0, var(--post-w));
		grid-template-areas: "main" "side";
		justify-content: center;
		column-gap: var(--sp-l); /* --sp-xl だと 1120px 幅で記事が 440px まで細るため */
		margin-top: var(--gutter);
	}

	.postsingle__main {
		grid-area: main;
		margin: 0;
		padding: var(--section-pad);
		border-radius: var(--r-md);
	}

	.postsingle h1 {
		font-size: var(--fz-xl);
		line-height: var(--lh-tight);
	}

	.postsingle__side {
		grid-area: side;
	}

	.postsingle__left {
		grid-area: left;
	}

	/* 記事カードの内側の余白を打ち消して枠にぴったり付け、上だけカードと同じ角丸（SP は画面幅いっぱいなので角丸なし） */
	.postsingle .postsingle__eyecatch {
		margin: calc(var(--section-pad) * -1) calc(var(--section-pad) * -1) 0;
	}

	.postsingle .postsingle__eyecatch img {
		border-radius: var(--r-md) var(--r-md) 0 0;
	}

}

@media (min-width: 900px) {
	.postsingle:has(.postsingle__side .posttoc) {
		grid-template-columns: minmax(0, var(--post-w)) 260px;
		grid-template-areas: "main side";
	}

	/* シェア（右カラムの一番下）。5つ×45px＋隙間＝257px で 260px の列に1行で収まる */
	.postsingle:has(.postsingle__side .posttoc) .postsingle__sideshare {
		display: grid;
	}

	/* 右カラムにシェアを出す記事は記事末のシェアを隠す（記事末ボタン .btn--end の挿入位置なので要素は残す） */
	.postsingle:has(.postsingle__side .posttoc) .postsingle__share {
		display: none;
	}

	.postsingle__sideshare {
		grid-template-columns: repeat(5, var(--share-btn));
		gap: var(--sp-xs);
		margin-top: var(--sp-m);
	}

	/* 目次は右カラム（スクロール追従）に出すので本文中は隠す */
	.postsingle__body .posttoc {
		display: none;
	}

	/* スクロール用の overflow は hover で少し大きくなるカード・ボタンも切るので、内側に余白（--sp-xs）を取り、
	   同じだけ負のマージン・top・max-height で戻して見た目の位置は変えない */
	.postsingle__side,
	.postsingle__left {
		position: sticky;
		top: calc(var(--head-h) + var(--gutter) - var(--sp-xs));
		align-self: start;
		max-height: calc(100vh - var(--head-h) - var(--gutter) * 2 + var(--sp-xs) * 2);
		margin: calc(var(--sp-xs) * -1);
		padding: var(--sp-xs);
		overflow-y: auto;
		scrollbar-width: thin;
	}

	.postsingle__side .posttoc {
		display: block;
		margin: 0 !important;
		padding: var(--sp-m);
		border: 0;
		border-radius: var(--r-md);
	}

	.postsingle__side .posttoc__toggle {
		display: none;
	}

	/* 固定ボタン（右カラム版）：目次の下に通常サイズで表示 */
	.postsingle .postsingle__side .btn.btn--fixed {
		position: static;
		margin-top: var(--sp-m);
	}

	.postsingle .postsingle__side .btn.btn--fixed a {
		width: 100%;
		height: auto;
		padding: var(--sp-s) var(--sp-l) var(--sp-s) var(--sp-s);
		border-radius: 50px;
		white-space: normal;
		text-indent: 0;
		box-shadow: none;
		font-size: var(--fz-s);
	}

	.postsingle .postsingle__side .btn.btn--fixed a::before {
		position: static;
		margin-right: var(--sp-xs);
		font-size: var(--fz-ss);
	}

	.postsingle .postsingle__side .btn.btn--fixed a::after {
		top: 50%;
		left: auto;
		right: 16px;
		width: 16px;
		height: 16px;
		animation: btn_arrow .6s infinite ease-in-out;
	}

	.postsingle .postsingle__side .btn.btn--fixed a[target="_blank"]::after {
		animation: none;
	}
}

@media (min-width: 1120px) {
	/* 左右の列は同じ幅＝記事が画面中央に来る（目次の無い記事も右に同じ幅の空き列を取る） */
	.postsingle,
	.postsingle:has(.postsingle__side .posttoc) {
		grid-template-columns: 260px minmax(0, var(--post-w)) 260px;
		grid-template-areas: "left main side";
	}

	.postsingle__left {
		display: block;
	}

	.postsingle__sideshare {
		display: grid;
	}

	.postsingle__share {
		display: none;
	}

	/* 目次の無い記事はシェアが右カラムの先頭になる */
	.postsingle__side > .postsingle__sideshare:first-child {
		margin-top: 0;
	}

	.postsingle__left .author {
		margin-top: 0;
		padding: var(--sp-s);
	}

	/* プロフィールと告知カードは左カラムに出すので記事下は隠す */
	.postsingle + .author,
	.postsingle ~ .promo {
		display: none;
	}
}