/*
Theme Name: ANGEL child
Template: angel_tcd047
Version: 1.0.0
*/

/* 18歳未満不可の表示（コピーライトの前） */
#copyright .age_limit { margin-right:1em; }

/* ----------------------------------------------------------------------
 親テーマ 2.1.4 で変わった見た目を、前（1.7.1）に戻す
---------------------------------------------------------------------- */

/* 記事一覧・記事ページの日付・カテゴリーは12px（2.1.4 は14px） */
.post_list .meta li,
#post_title_area .meta li { font-size: 12px; }

/* パンくずリストは12px・行の高さ1.6（2.1.4 は14px・1.8） */
#bread_crumb li { font-size: 12px; line-height: 1.6; }

/* 記事・固定ページのサイドバーは右端に（2.1.4 は flex で本文の右に15pxあけて並べるので、左に寄る。
   回り込み解除の ::after も並びに入り、その前にも15pxあくので、すき間を0にして margin-left:auto で右へ） */
body.single-post #main_col,
body.page-template-page-notitle #main_col,
body.page-template-page-profile #main_col,
body.page-template-default #main_col { column-gap: 0; }
body.single-post #side_col,
body.page-template-page-notitle #side_col,
body.page-template-page-profile #side_col,
body.page-template-default #side_col { margin-left: auto; }

/* ページビルダーの見出し（2.1.4 は h3→h2 になり、明朝体の設定「type3」を pb_font_family_2 に読み替えるが、
   そのCSSが TCD の別プラグインを入れたときにしか出ない。前の明朝体と、/style.css の見出しの大きさに戻す） */
.pb_headline.pb_font_family_2,
/* トップページのピンクの見出し3つも、同じ明朝体に（2026-10-09、本人の依頼。色・大きさはそのまま） */
.balanzaMsg .post_list_headline em,
.balanzaMsg em.balanzaMsg__mincho,
/* ご入会ページのピンクの大きな文（2026-10-09、本人の依頼。色・大きさはそのまま）
   /guide/（ID 16）は16ptの1つだけ（14ptの「縄の講習会…」は対象外）、男性（ID 20）・女性（ID 18）はピンクの文すべて */
.page-id-16 .pb-widget-editor span[style*="16pt"][style*="#e0869b"],
.page-id-20 .pb-widget-editor span[style*="#e0869b"],
.page-id-18 .pb-widget-editor span[style*="#e0869b"] {
	font-family: "Times New Roman", "游明朝", "Yu Mincho", "游明朝体", "YuMincho", "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", "HiraMinProN-W3", "HGS明朝E", "ＭＳ Ｐ明朝", "MS PMincho", serif;
}
.pb-widget-headline .pb_headline { font-weight: 600; font-size: 25px; line-height: 1.6; margin-top: 40px; }
@media only screen and (min-width: 600px) and (max-width: 1221px) {
	.pb-widget-headline .pb_headline { font-size: 26px; }
}
@media only screen and (max-width: 599px) {
	.pb-widget-headline .pb_headline { font-size: 22px; }
	.page-id-14 .pb_headline.pb_font_family_2 { font-feature-settings: "pkna"; }
}

/* サイドバーの自由入力ウィジェットの段落（2.1.4 は本文用の .post_content が付き、行間と下の余白が広がる） */
.side_widget .textwidget.post_content p { line-height: inherit; margin-bottom: 0; }

/* ----------------------------------------------------------------------
 よくあるご質問（/faq/）：プラグインを使わず <details> で開け閉めする
 （熊野整形外科のテストサイト /wp26/medical/ の「よくあるご質問」と同じ作りを、ピンク系に。2026-10-08、本人の指示）
 質問の行は淡いピンクの背景＋濃いピンクの太字、頭に「Q」の丸（メインのピンク）、右端に＋／－。
 答えは白の背景、頭に「A」の丸（淡いピンク）。丸は HTML を変えずに CSS で描く
---------------------------------------------------------------------- */
.balanza-faq {
	display: flex;
	flex-direction: column;
	gap: 6px;
	margin: 0 0 20px;
}
details.balanza-faq__item {
	position: relative;
	margin: 0;
	padding: 0;
	border: 1px solid #f3d0d9;
	background: #fff;
}
summary.balanza-faq__q {
	position: relative;
	display: block;
	padding: 18px 56px 18px 64px;
	background: #fcf0f3;
	color: #b94a66;
	font-size: 15px;
	font-weight: 600;
	line-height: 1.8;
	letter-spacing: .03em;
	list-style: none; /* ブラウザ標準の三角を消す */
	cursor: pointer;
}
summary.balanza-faq__q::-webkit-details-marker { display: none; } /* Safari の三角を消す */
summary.balanza-faq__q:hover { color: #9c3a53; }
/* 開け閉めの目印（＋／－） */
summary.balanza-faq__q::before,
summary.balanza-faq__q::after {
	content: "";
	position: absolute;
	top: 50%;
	right: 24px;
	width: 14px;
	border-top: 2px solid #e0869b;
	transform: translateY(-50%);
}
summary.balanza-faq__q::after {
	transform: translateY(-50%) rotate(90deg);
	transition: transform .2s;
}
details.balanza-faq__item[open] summary.balanza-faq__q::after { transform: translateY(-50%) rotate(0deg); }
/* 「Q」「A」の丸 */
details.balanza-faq__item::before,
.balanza-faq__a::before {
	position: absolute;
	left: 18px;
	z-index: 1;
	width: 30px;
	height: 30px;
	border-radius: 50%;
	color: #fff;
	font-size: 16px;
	font-weight: 600;
	line-height: 30px;
	text-align: center;
	pointer-events: none;
}
details.balanza-faq__item::before {
	content: "Q";
	top: 16px; /* 質問の1行目にそろえる */
	background: #e0869b;
}
.balanza-faq__a {
	position: relative;
	padding: 20px 28px 22px 64px;
	color: #333;
	font-size: 15px; /* 2026-10-09 本人の依頼で 14→15 */
	line-height: 2;
}
.balanza-faq__a::before {
	content: "A";
	top: 20px;
	background: #f2b3c2;
}
.post_content .balanza-faq__a p {
	margin: 0;
	font-size: 15px;
	line-height: 2;
}
.post_content .balanza-faq__a p + p { margin-top: 12px; }
.post_content .balanza-faq__a a { color: #b94a66; text-decoration: underline; }
.post_content .balanza-faq__a a:hover { text-decoration: none; }
@media only screen and (max-width: 767px) {
	summary.balanza-faq__q { padding: 14px 44px 14px 50px; font-size: 14px; line-height: 1.7; }
	summary.balanza-faq__q::before,
	summary.balanza-faq__q::after { right: 16px; width: 12px; }
	details.balanza-faq__item::before,
	.balanza-faq__a::before { left: 12px; width: 26px; height: 26px; font-size: 14px; line-height: 26px; }
	details.balanza-faq__item::before { top: 13px; }
	.balanza-faq__a { padding: 16px 16px 18px 50px; }
	.balanza-faq__a::before { top: 17px; }
}

/* ----------------------------------------------------------------------
 サンキューページ（/inquiry/thanks/・/event_form/thanks/）
---------------------------------------------------------------------- */
.balanza-thanks__btn { margin: 40px 0 0; text-align: center; }
.post_content p.balanza-thanks__btn a,
.balanza-thanks__btn a {
	display: inline-block;
	width: 225px;
	padding: 20px 30px;
	background-color: #333;
	color: #fff;
	border-radius: 5px;
	font-size: 14px;
	line-height: 1.2;
	text-decoration: none;
	box-sizing: border-box;
	transition: all .3s;
}
.post_content p.balanza-thanks__btn a:hover,
.balanza-thanks__btn a:hover { background-color: #666; color: #fff; text-decoration: none; }

/* ----------------------------------------------------------------------
 お問い合わせフォーム（CF7 6.x＋Confirm Plus）を、前（CF7 5.1.1＋add confirm）と同じ見た目にする
---------------------------------------------------------------------- */

/* 選択肢は横に並べる（前の CF7 は span.wpcf7-list-item で指定していて、テーマの縦並びに勝っていた） */
.contactTbl .wpcf7-list-item { display: inline-block; }

/* 送信のボタン（入力画面の「送信内容確認」・確認画面の「送信する」）は、大きなピンクのボタン
   （熊野整形外科の採用応募フォームと同じ作り。色はテーマのメインのピンク #E0869B。2026-10-08、本人の指示）
   イベント記事の「申込み（お問合せ）」（input.send。申込フォームへ進むボタン）も同じピンクにそろえる */
.wpcf7 .sendok { position: relative; }
.wpcf7 .sendok input.wpcf7-submit,
.wpcf7 button.wpcf7cp-cfm-submit-btn,
.sendok input.send {
	display: block;
	width: 100%;
	max-width: 400px;
	height: auto;
	min-height: 72px;
	margin: 0 auto;
	padding: 12px 32px;
	background-color: #E0869B;
	color: #fff;
	border: none !important;
	border-radius: 6px;
	font-size: 20px;
	font-weight: 600;
	line-height: 1.4;
	letter-spacing: .05em;
	box-sizing: border-box;
	-webkit-appearance: none;
	box-shadow: none;
	cursor: pointer;
	transition: opacity .2s;
}
.wpcf7 .sendok input.wpcf7-submit:hover,
.wpcf7 button.wpcf7cp-cfm-submit-btn:hover,
.sendok input.send:hover { background-color: #E0869B; opacity: .85; }

/* 送信中の印は、ボタンの下に出す（ボタンの位置がずれないように） */
.wpcf7 .sendok .wpcf7-spinner {
	position: absolute;
	top: 100%;
	left: 50%;
	margin: 6px 0 0 -12px;
}

/* 確認画面のボタン：上に「入力に戻る」、下に「送信する」（Confirm Plus は横並びなので縦に） */
.wpcf7 div.wpcf7cp-btns {
	display: block;
	margin-top: 0;
	padding: 8px 0 30px;
	text-align: center;
}

/* 確認画面の「入力に戻る」は、目立たせない白いボタン（熊野整形外科の「内容を修正する」と同じ作り） */
.wpcf7 button.wpcf7cp-cfm-edit-btn {
	display: block;
	width: 100%;
	max-width: 400px;
	height: auto;
	margin: 0 auto 16px;
	padding: 14px 32px;
	background-color: #fff;
	color: #333;
	border: 1px solid #999 !important;
	border-radius: 6px;
	font-size: 16px;
	font-weight: 600;
	line-height: 1.4;
	box-sizing: border-box;
	-webkit-appearance: none;
	box-shadow: none;
	cursor: pointer;
	transition: background-color .2s;
}
.wpcf7 button.wpcf7cp-cfm-edit-btn:hover { background-color: #f5f5f5; }

/* スマホでは、送信のボタンを少し小さく */
@media only screen and (max-width: 767px) {
	.wpcf7 .sendok input.wpcf7-submit,
	.wpcf7 button.wpcf7cp-cfm-submit-btn,
	.sendok input.send {
		min-height: 64px;
		font-size: 18px;
	}
}

/* ヘッダーロゴの「トビラの会 加盟 サークル」を、トップページ以外でもトップと同じ見た目に -----
   /style.css の指定は、トップページのロゴ（h1.logo）にだけ書かれている。
   ほかのページのロゴは div.logo なので効かず、「サークル」が改行されて位置もずれていた。
   同じ指定を div.logo にも当てる（中身は /style.css の h1.logo の指定と同じ） */
@media only screen and (min-width: 1222px) {
	#header #logo_image div.logo .logoMsg .dispTL { display: inline; }
}
@media only screen and (min-width: 600px) and (max-width: 1221px) {
	#header #logo_image div.logo {
		position: relative;
		top: 0;
		left: 0;
		text-align: left;
	}
	#header #logo_image div.logo .logoMsg {
		position: absolute;
		top: 20px;
		left: 170px;
		width: 200px;
		margin: 0;
		padding: 0;
		font-size: 12px;
	}
	#header #logo_image div.logo .logoMsg span { font-size: 12px; }
	#header #logo_image div.logo .logoMsg .dispTL { display: inline; }
}
@media only screen and (max-width: 599px) {
	#header #logo_image div.logo {
		position: relative;
		top: 0;
		left: 0;
		text-align: left;
	}
	#header #logo_image div.logo .logoMsg {
		position: absolute;
		top: 21px;
		left: 170px;
		width: 140px;
		margin: 0;
		padding: 0;
		font-size: 11px;
	}
}

/* 本文の文字の大きさ（2026-10-09、本人の依頼） --------------------------
   テーマオプションの「本文のフォントサイズ」を 14→15px にした（本文と、ページ全体の基本の大きさに効く）。
   本文以外で一緒に大きくなるところは、前の 14px のままにする
   （サイドバーは全体を 14px に。スマホではテーマの responsive.css が .side_widget を 12px にするので、そちらが効く） */
#side_col,
#header_social_link a,
#footer_social_link a,
#return_top span { font-size: 14px; }

/* 読む文字は 14px 以上にする（2026-10-09、本人の方針） --------------------
   日付・カテゴリーの札・パンくず・コピーライトなど、読まなくてよい文字は小さいままでよい。
   記事名・カテゴリー名・メニュー・イベントの表の中身など、読む文字が 12px だったものを 14px に */
#footer_menu li,                       /* 下のメニュー（ホーム・会員規約など。テーマで 12px。本人の依頼で 15px） */
#header_menu a                         /* ヘッダーのメニュー（会員規約・守秘義務など。PC だけ出る。14px だった） */
{ font-size: 15px; }
/* トップページの紹介文の段落も本文と同じ 15px に（/style.css の .balanzaMsg p で 14px だった。2026-10-09、本人の依頼）。
   段落の中の「本文の 1.2 倍」の強調（em の style="font-size:1.2em"）は、前と同じ 16.8px のまま */
/* （/style.css は子テーマのあとに読み込まれるので、#left_col を付けて強くする） */
#left_col .balanzaMsg > p { font-size: 15px; }
#left_col .balanzaMsg > p > em[style*="1.2em"] { font-size: 16.8px !important; }
/* サイドバーの記事名・カテゴリー名・「月を選択」は本文と同じ 15px に（2026-10-09、本人の依頼） */
#side_col .widget_recent_entries li a, /* 「新着記事・コラム」の記事名（スマホは responsive.css で 12px だった） */
#side_col .tcd_category_list a,        /* カテゴリー名（テーマで 12px） */
#side_col .widget_archive select       /* アーカイブの「月を選択」 */
{ font-size: 15px; }
/* 一番上の帯の文字（PC 12px・スマホ 11px だった）を 13px に（2026-10-09、本人の依頼） */
#header #logoInfo { font-size: 13px; }
/* スマホは 13px だと2行になり、帯の高さが決まっているので2行目が隠れる。1行に収まる 12px に */
@media only screen and (max-width: 599px) {
	#header #logoInfo { font-size: 12px; }
}
/* 幅 360px 未満（小さいスマホ）は 12px でも2行になるので、前と同じ 11px */
@media only screen and (max-width: 359px) {
	#header #logoInfo { font-size: 11px; }
}
/* イベント情報の表の中身は本文と同じ大きさに（/style.css でタブレット・スマホは 12px だった） */
.post_content .contactTbl.eventfrm td { font-size: inherit; }

/* サイドバーの X（旧Twitter）の案内カード（2026-10-09） ---------------------
   X の投稿一覧の埋め込みは、X の仕様変更でログインしていない人にはほぼ出ないため、カードにした。
   中身はウィジェット（カスタムHTML）にある。作り直すときは work/sidebar_x_card.php */
.balanza-x-card {
	display: block;
	padding: 22px 16px 20px;
	border: 1px solid #f2d5dd;
	border-radius: 8px;
	background: #fdf5f7;
	color: #333;
	text-align: center;
	text-decoration: none;
	transition: background-color .2s;
}
.balanza-x-card:hover {
	background: #fbe9ee;
	color: #333;
	text-decoration: none;
}
.balanza-x-card__photo {
	display: block;
	width: 72px;
	height: 72px;
	margin: 0 auto 10px;
	border-radius: 50%;
	object-fit: cover;
}
.balanza-x-card__name {
	display: block;
	font-size: 15px;
	font-weight: 600;
	line-height: 1.5;
}
.balanza-x-card__id {
	display: block;
	color: #888;
	font-size: 13px;
	line-height: 1.5;
}
.balanza-x-card__text {
	display: block;
	margin: 10px 0 16px;
	font-size: 13px;
	line-height: 1.7;
}
.balanza-x-card__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-width: 200px;
	padding: 11px 24px;
	border-radius: 999px;
	background: #E0869B;
	color: #fff;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.4;
	box-sizing: border-box;
	transition: background-color .2s;
}
.balanza-x-card:hover .balanza-x-card__btn { background: #d06f86; }
.balanza-x-card__btn svg {
	flex-shrink: 0;
	width: 15px;
	height: 15px;
	fill: #fff;
}