/* 千遥 会員機能 — 表側
   色はサイトのキーカラー（テーマの --vk-color-primary）に合わせる。
   字体はテーマ（追加CSSの Zen Kaku Gothic New）を継承する。 */

:root {
	--ch-key: var(--vk-color-primary, #ffd1db);
	--ch-key-dark: var(--vk-color-primary-dark, #cca7af);
	--ch-key-pale: #fff5f8;
	--ch-line: #f2e4e8;
	--ch-ink: #333;
	--ch-ink-soft: #7a5c63;
}

/* ------------------------------------------------------------------
   会員向けページで、テーマの飾りを出さない
   （ピンクのタイトル帯・パンくず・サイドバー。千遥様 2026-09-08）
   ------------------------------------------------------------------ */
.chiharu-member-page .page-header,
.chiharu-member-page .breadcrumb { display: none; }
/* コースの紹介ページは、タイトルも出さない（画像の中に名前があるため） */
.single-chiharu_course .entry-header,
.single-chiharu_course .entry-title { display: none; }

/* マイページとパスワード変更は、ロゴもメニューも出さず、いちばん上にテーマの題名の帯だけ
   （クローズドな画面。千遥様 2026-09-18・PDF p17/p19） */
.chiharu-closed-page .site-header,
.chiharu-closed-page .global-nav,
.chiharu-closed-page .vk-mobile-nav-menu-btn,
.chiharu-closed-page .vk-mobile-nav,
.chiharu-closed-page .chiharu-member-bar { display: none !important; }
.chiharu-closed-page .page-header { display: flex; } /* テーマは flex で題名を上下中央に置いている */
.chiharu-closed-page { overflow-x: hidden; }

/* ------------------------------------------------------------------
   ボタン
   ------------------------------------------------------------------ */
.chiharu-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .5em;
	padding: .9em 2em;
	border: 0;
	border-radius: 2px;
	background: var(--ch-key);
	color: var(--ch-ink);
	font-family: inherit;
	font-size: 1.05em;
	font-weight: 500;
	line-height: 1.4;
	text-decoration: none;
	cursor: pointer;
	transition: background .2s;
}
.chiharu-btn:hover,
.chiharu-btn:focus { background: var(--ch-key-dark); color: var(--ch-ink); }
.chiharu-btn-price { font-size: .95em; font-weight: 400; }
/* Lightning 15.42 から、フォームの送信ボタンに色・枠・余白を付ける指定（:where(form) button[type="submit"]）が入った。
   こちらの指定より強いので、会員機能のボタンだけ元の見た目に戻す（2026-09-29） */
button[type="submit"].chiharu-btn { padding: .9em 2em; border: 0; border-radius: 2px; background: var(--ch-key); color: var(--ch-ink); font-size: 1.05em; }
button[type="submit"].chiharu-btn:hover,
button[type="submit"].chiharu-btn:focus { background: var(--ch-key-dark); color: var(--ch-ink); }
button[type="submit"].chiharu-imgbtn { padding: 0; border: 0; border-radius: 0; background: none; }

.chiharu-tax { font-size: .85em; }

/* 画像のボタン（千遥様デザイン）。2倍サイズで受け取るので幅をCSSで決める */
.chiharu-imgbtn {
	display: inline-block;
	padding: 0;
	border: 0;
	background: none;
	cursor: pointer;
	line-height: 0;
}
.chiharu-imgbtn img { display: block; width: min(320px, 100%); height: auto; transition: opacity .2s; }
.chiharu-imgbtn:hover img,
.chiharu-imgbtn:focus img { opacity: .8; }
.chiharu-buy { margin: 0; display: flex; justify-content: center; }
/* 幅を明示して中央に置く。テーマ側でリンクが横いっぱいに広がる指定があり、inline-block だけでは寄ってしまう */
.chiharu-offer .chiharu-imgbtn,
.chiharu-next .chiharu-imgbtn { display: block; width: min(320px, 100%); margin: 0 auto; }
.chiharu-offer .chiharu-imgbtn img,
.chiharu-next .chiharu-imgbtn img { width: 100%; }
/* スマホでは今の6.5割の大きさに（千遥様 2026-09-18）。320px × 0.65 = 208px */
@media (max-width: 767px) {
	.chiharu-imgbtn img,
	.chiharu-offer .chiharu-imgbtn,
	.chiharu-next .chiharu-imgbtn { width: min(208px, 65%); }
}
.chiharu-nick-current { font-size: 1.1em; margin: .5em 0; }
.chiharu-nick-gate { margin: 1.5em 0 0; padding: 1.2em 1.4em; background: var(--ch-key-pale); border: 1px solid var(--ch-line); }
.chiharu-nick-gate > p:first-child { margin: 0 0 .5em; font-weight: 500; }
/* 名前の説明文は横幅いっぱいに。パスワード欄と同じ細い幅だと、パソコンで文の途中に折り返しが入る（千遥様 2026-09-28）。入力欄だけ細いまま */
.chiharu-pw-form.chiharu-nick-form { max-width: none; }
.chiharu-nick-form .chiharu-pw-row { max-width: 26em; }
/* 名前を決める前の「コメントは受け付けていません」は出さない（入力欄が無いことで伝わる） */
.chiharu-chat-page .no-comments { display: none; }

.chiharu-offer { margin: 2.5em 0; text-align: center; }
.chiharu-price { margin: 0 0 1em; font-size: 1.3em; letter-spacing: .04em; }

.chiharu-hint { margin: 1em 0 0; font-size: .9em; color: #666; }
.chiharu-notice { margin: 1.5em 0; padding: 1em; background: #f4f4f4; border-radius: 2px; font-size: .95em; }
.chiharu-alert { margin: 1.5em 0; padding: 1em; border-left: 4px solid var(--ch-key-dark); background: var(--ch-key-pale); }
.chiharu-note { font-size: .92em; color: #555; }

/* ------------------------------------------------------------------
   横長バナー・動画
   ------------------------------------------------------------------ */
.chiharu-banner { margin: 0 0 1.8em; }
.chiharu-banner img { display: block; width: 100%; height: auto; }

/* コースの説明ページと受講ページは、バナーを画面の端から端まで出す（参照サイトに合わせる。
   受講ページは千遥様 2026-09-24）。本文は .container で幅が決まっているので、その分だけ外側へはみ出させる。
   どちらも single-chiharu_course。モジュールのページ（single-chiharu_lesson）にはバナーを出さない。
   テーマのテンプレートには触らない */
.single-chiharu_course .site-body,
.single-chiharu_course .main-section { padding-top: 0; }
.single-chiharu_course { overflow-x: hidden; }
.chiharu-banner--course,
.chiharu-banner--learn {
	width: auto;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
	margin-top: 0;
}
.chiharu-banner--course img,
.chiharu-banner--learn img { width: 100%; }

.chiharu-player {
	position: relative;
	margin: 0 0 2em;
	padding-top: 56.25%;
	background: #000;
	overflow: hidden;
}
.chiharu-player iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* 本編とボーナスビデオの見出し（千遥様の見本 2026-09-25）。テーマの h2 の飾りは付けない */
.chiharu-video + .chiharu-video { margin-top: 5em; } /* 本編とボーナスの間を広めに（千遥様 2026-09-28） */
.chiharu-video .chiharu-video-title {
	margin: 0 0 .5em;
	padding: 0;
	border: 0;
	background: none;
	font-size: 1.25em;
	font-weight: 500;
	line-height: 1.4;
}
.chiharu-video .chiharu-video-title::before,
.chiharu-video .chiharu-video-title::after { content: none; }

.chiharu-download { margin: 0 0 2em; display: flex; flex-wrap: wrap; align-items: center; gap: 1em; }

/* ------------------------------------------------------------------
   コース一覧のカード：四角・黒の細い縁取り・名前は出さない
   ------------------------------------------------------------------ */
.chiharu-list {
	list-style: none;
	margin: 1.5em 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 360px));
	justify-content: center;
	gap: 2em;
}
.chiharu-card a {
	position: relative;
	display: block;
	border: 1px solid #222;
	color: inherit;
	text-decoration: none;
	line-height: 0;
	transition: box-shadow .2s;
}
.chiharu-card a:hover { box-shadow: 0 6px 20px rgba(0,0,0,.12); }
.chiharu-card-thumb { display: block; }
.chiharu-card-thumb img { display: block; width: 100%; height: auto; }
.chiharu-card-thumb--text { padding: 2em 1em; line-height: 1.5; text-align: center; }
.chiharu-card-owned {
	position: absolute;
	right: .6em;
	bottom: .6em;
	padding: .3em .8em;
	background: var(--ch-key);
	color: var(--ch-ink);
	font-size: .8em;
	line-height: 1.6;
	letter-spacing: .06em;
}
.chiharu-card-stopped {
	position: absolute;
	left: .6em;
	top: .6em;
	padding: .2em .6em;
	background: #f4f4f4;
	color: #666;
	font-size: .75em;
	line-height: 1.6;
}

.chiharu-empty { margin: 1.5em 0; padding: 2em; background: #f8f8f8; text-align: center; }
.chiharu-empty p { margin: 0 0 1em; }
.chiharu-empty p:last-child { margin: 0; }

/* ------------------------------------------------------------------
   モジュールの並び（受講ページ・各モジュールの下）。横幅いっぱい
   ------------------------------------------------------------------ */
.chiharu-modules { margin: 2em 0 0; }
.chiharu-modules ul { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--ch-line); }
.chiharu-menu-item > a,
.chiharu-menu-item > span {
	display: flex;
	align-items: center;
	min-height: 52px;
	padding: .9em 1em;
	border-bottom: 1px solid var(--ch-line);
	color: inherit;
	text-decoration: none;
	line-height: 1.6;
}
.chiharu-menu-item > a:hover,
.chiharu-menu-item > a:focus { background: var(--ch-key-pale); }
.chiharu-menu-item.is-chat > a::before,
.chiharu-menu-item.is-chat > span::before { content: "\1f4ac"; margin-right: .5em; }
.chiharu-menu-item.is-current > span { background: var(--ch-key-pale); box-shadow: inset 4px 0 0 var(--ch-key); cursor: default; }

.chiharu-prevnext { display: flex; justify-content: space-between; gap: 1em; margin: 1.5em 0 0; font-size: .95em; }
.chiharu-prevnext a { text-decoration: underline; color: inherit; }

/* モジュールのページ：パソコンでは左に一覧・右に動画（前の形：千遥様 2026-09-18・PDF p22）。
   スマホでは動画→本文→一覧の順に縦に並ぶ（HTMLの順のまま） */
.chiharu-modules--side .chiharu-menu-title { display: none; }
@media (min-width: 900px) {
	.chiharu-layout {
		display: grid;
		grid-template-columns: 240px minmax(0, 1fr);
		gap: 0 2.5em;
		align-items: start;
	}
	.chiharu-layout > .chiharu-main { order: 2; }
	.chiharu-layout > .chiharu-modules--side { order: 1; margin: 0; position: sticky; top: 1em; }
	.chiharu-modules--side .chiharu-menu-title { display: block; }
	.chiharu-modules--side ul { border-top: 0; }
}

/* ------------------------------------------------------------------
   チャットルーム
   ------------------------------------------------------------------ */
/* 入力欄を上に。コメントが増えても書き込みやすいように（千遥様） */
.chiharu-chat-page .comments-area { display: flex; flex-direction: column; }
.chiharu-chat-page .comments-area > .comment-respond { order: -1; margin: 0 0 2em; }
.chiharu-chat-page .comments-area > .chiharu-jump { order: 99; margin: 1.5em 0 0; text-align: center; }
.chiharu-chat-page .chiharu-jump a { text-decoration: underline; color: inherit; }
/* ページ番号（50件ごと）。テーマの「古い／新しいコメント」は隠す */
.chiharu-chat-page .comment-navigation { display: none; }
.chiharu-chat-page .comments-area > .chiharu-cpager { order: 98; margin: 1.5em 0 0; display: flex; flex-wrap: wrap; justify-content: center; gap: .4em; }
.chiharu-cpager .page-numbers { display: inline-block; min-width: 2.2em; padding: .35em .6em; border: 1px solid var(--ch-line); color: inherit; text-align: center; text-decoration: none; line-height: 1.4; }
.chiharu-cpager a.page-numbers:hover { background: var(--ch-key-pale); }
.chiharu-cpager .page-numbers.current { background: var(--ch-key); border-color: var(--ch-key); }
.chiharu-cpager .page-numbers.dots { border: 0; min-width: 0; }
.chiharu-chat-page .comment-reply-title { display: none; }
.chiharu-chat-page .comment-form-comment label { font-size: .95em; }

/* 「コメント ◯件」は控えめに */
.chiharu-chat-page .comments-title { font-size: .95em; font-weight: 400; color: #666; margin: 0 0 1em; }

/* コメントの枠を淡いピンクにして、どこからどこまでかを分かるように。
   テーマが付ける外側の枠は消して、枠は一重にする（千遥様 2026-09-18） */
.chiharu-chat-page .comment-list,
.chiharu-chat-page .comment-list .children { list-style: none; margin: 0; padding: 0; }
.chiharu-chat-page ol.comment-list > .comment,
.chiharu-chat-page li.comment ol.children .comment { margin: 0; padding: 0; border: 0; border-radius: 0; }
.chiharu-chat-page .comment .children { border-top: 0; }
.chiharu-chat-page .comment-list .children { margin: 0 0 0 1.5em; }
.chiharu-chat-page .comment-body {
	margin: 0 0 1em;
	padding: 1em 1.2em;
	background: var(--ch-key-pale);
	border: 1px solid var(--ch-line);
}
.chiharu-chat-page .comment-author .fn { font-style: normal; font-weight: 500; }
.chiharu-chat-page .comment-meta { font-size: .8em; color: #888; }
.chiharu-chat-page .comment-body p { margin: .6em 0 0; }
.chiharu-chat-page .reply { margin: .6em 0 0; font-size: .85em; }
/* 講師（千遥様）の書き込みは、名前の横の「講師」の印だけで区別する。
   背景の色は会員と同じ（千遥様 2026-09-18）。会員はアイコンを持たないので全員アイコンなし */
.chiharu-chat-page .chiharu-host > .comment-body .fn::after {
	content: "講師";
	margin-left: .6em;
	padding: .1em .5em;
	background: var(--ch-key);
	font-size: .75em;
	font-weight: 400;
	vertical-align: middle;
}

/* パソコンでは左にモジュールの一覧。スマホでは出さない（千遥様） */
.chiharu-menu { display: none; }
.chiharu-menu-title { margin: 0 0 .6em; font-size: .9em; letter-spacing: .08em; color: var(--ch-ink-soft); }
.chiharu-menu ul { list-style: none; margin: 0; padding: 0; }
@media (min-width: 900px) {
	.chiharu-menu { display: block; }
	.chiharu-chat-page .main-section {
		display: grid;
		grid-template-columns: 240px minmax(0, 1fr);
		gap: 0 2.5em;
		align-items: start;
	}
	.chiharu-chat-page .main-section > .chiharu-menu { grid-column: 1; grid-row: 1 / span 2; position: sticky; top: 1em; }
	.chiharu-chat-page .main-section > .entry { grid-column: 2; grid-row: 1; }
	.chiharu-chat-page .main-section > .comments-area { grid-column: 2; grid-row: 2; }
	/* 左の列の箱（チャットルーム・モジュールのページで共通）。
	   内側の余白を詰めて、名前を左端に寄せる（千遥様 2026-09-18） */
	.chiharu-menu,
	.chiharu-modules--side { padding: .6em .4em; border: 1px solid var(--ch-line); }
	.chiharu-menu .chiharu-menu-title,
	.chiharu-modules--side .chiharu-menu-title { padding: 0 .4em; }
	.chiharu-menu .chiharu-menu-item > a,
	.chiharu-menu .chiharu-menu-item > span,
	.chiharu-modules--side .chiharu-menu-item > a,
	.chiharu-modules--side .chiharu-menu-item > span { min-height: 0; padding: .55em .4em; border-bottom: 0; font-size: .95em; }
	.chiharu-menu .chiharu-menu-item + .chiharu-menu-item > a,
	.chiharu-menu .chiharu-menu-item + .chiharu-menu-item > span,
	.chiharu-modules--side .chiharu-menu-item + .chiharu-menu-item > a,
	.chiharu-modules--side .chiharu-menu-item + .chiharu-menu-item > span { border-top: 1px solid #f7f2f4; }
}

/* ------------------------------------------------------------------
   マイページ・パスワードの変更
   ------------------------------------------------------------------ */
.chiharu-greeting { margin: 0 0 1.5em; font-size: 1.15em; }
.chiharu-heading { margin: 2.2em 0 .8em; padding-bottom: .4em; border-bottom: 1px solid var(--ch-line); font-size: 1.05em; font-weight: 500; letter-spacing: .04em; }
.chiharu-heading--first { margin-top: 0; }

/* 末尾のリンク（千遥様のイラスト 2026-09-18）：
   上の線はフッターの線と同じもの（1px・キーカラー）を左右の端まで。下の線は無し。
   「HOMEへ戻る」を上に大きめ、「パスワードの変更｜ログアウト」を下に小さく */
.chiharu-foot-links {
	margin: 3em calc(50% - 50vw) 0;
	padding: 1.8em 1em 1em;
	border-top: 1px solid var(--vk-color-primary, var(--ch-key));
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: .8em;
}
.chiharu-foot-links a { color: inherit; text-decoration: underline; }
.chiharu-foot-home { font-size: 1.1em; }
.chiharu-foot-sub { margin: 0; font-size: .85em; }
.chiharu-foot-sep { margin: 0 .3em; }

.chiharu-pw-form { margin: 1em 0 0; max-width: 26em; }
.chiharu-pw-row { display: flex; flex-direction: column; gap: .3em; margin: 0 0 1em; }
.chiharu-pw-row label { font-size: .9em; }
.chiharu-pw-row input { padding: .7em .8em; border: 1px solid #ddd; border-radius: 2px; font-size: 1em; font-family: inherit; }
.chiharu-pw-row input:focus { border-color: var(--ch-key-dark); outline: 2px solid var(--ch-key-pale); }

/* ------------------------------------------------------------------
   購入完了
   ------------------------------------------------------------------ */
/* バナーはメニューのすぐ下で、左右の端まで（千遥様 2026-09-18・PDF p12）。コースの紹介ページと同じはみ出し方 */
.chiharu-complete-page .site-body,
.chiharu-complete-page .main-section { padding-top: 0; }
.chiharu-complete-page { overflow-x: hidden; }
.chiharu-thanks { margin: 0 calc(50% - 50vw) 2em; }
.chiharu-thanks img { display: block; width: 100%; height: auto; }
.chiharu-login-info { margin: 1.5em 0; padding: 1.2em 1.4em; background: var(--ch-key-pale); border: 1px solid var(--ch-line); }
.chiharu-login-info dt { margin: 0; font-size: .85em; color: #666; }
.chiharu-login-info dd { margin: .2em 0 .9em; font-size: 1.05em; word-break: break-all; }
.chiharu-login-info dd:last-child { margin-bottom: 0; }
.chiharu-email { text-decoration: none; -webkit-text-decoration: none; color: inherit; }
/* パスワードもメールアドレスと同じ字体（千遥様 2026-09-18）。等幅にはしない */
.chiharu-pw { letter-spacing: .04em; }
.chiharu-next { margin: 2em 0 1em; text-align: center; }
/* 購入完了ページのボタンは、左寄せの文章にそろえて左に置く（千遥様 2026-09-28）。コース紹介ページのボタンは中央のまま */
.chiharu-complete .chiharu-next { text-align: left; }
.chiharu-complete .chiharu-next .chiharu-imgbtn { margin: 0; }

/* 販売ページに出す、ご購入済みの方向けのダウンロード */
.chiharu-owned { margin: 0 0 2em; padding: 1.4em 1.6em; border: 1px solid var(--ch-line); background: var(--ch-key-pale); }
.chiharu-owned-title { margin: 0 0 .9em; font-weight: 500; }
.chiharu-owned-list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .8em; }
.chiharu-owned-list .chiharu-btn { font-size: .95em; padding: .7em 1.6em; }

/* ------------------------------------------------------------------
   ヘッダーの会員の出入り口：下線付きの文字リンク1つ
   ------------------------------------------------------------------ */
.chiharu-member-bar { display: flex; justify-content: flex-end; }
.chiharu-member-link { font-size: .85em; letter-spacing: .06em; color: inherit; text-decoration: underline; text-underline-offset: .2em; white-space: nowrap; }
.chiharu-member-link:hover { color: var(--ch-ink-soft); }

@media (min-width: 992px) {
	/* ヘッダーはロゴとナビが横並び。3つ目の要素として挟まず、右上に重ねる */
	.site-header-container { position: relative; }
	.chiharu-member-bar { position: absolute; top: .8em; right: 0; z-index: 2; }
}
@media (max-width: 991px) {
	/* ロゴを少し下げ、空いた上の段でハンバーガー（右上・34px角）の横に置く */
	.site-header { position: relative; }
	.site-header-logo { padding-top: 34px; }
	.chiharu-member-bar { position: absolute; top: 12px; right: 48px; z-index: 2; }
}

/* ------------------------------------------------------------------
   本文に置くボタン [chiharu_button]（千遥様 2026-09-30）
   幅は1行の中の width（--chiharu-scbtn-w）。スマホではその65%
   ------------------------------------------------------------------ */
.chiharu-scbtn { margin: 1.5em 0; }
.chiharu-scbtn--left { text-align: left; }
.chiharu-scbtn--center { text-align: center; }
.chiharu-scbtn--right { text-align: right; }
.chiharu-scbtn .chiharu-buy { display: block; }
.chiharu-scbtn .chiharu-imgbtn { display: block; width: min(var(--chiharu-scbtn-w, 320px), 100%); }
.chiharu-scbtn .chiharu-imgbtn img { display: block; width: 100%; height: auto; }
.chiharu-scbtn--left .chiharu-imgbtn { margin: 0 auto 0 0; }
.chiharu-scbtn--center .chiharu-imgbtn { margin: 0 auto; }
.chiharu-scbtn--right .chiharu-imgbtn { margin: 0 0 0 auto; }
@media (max-width: 767px) {
	.chiharu-scbtn .chiharu-imgbtn { width: min(calc(var(--chiharu-scbtn-w, 320px) * .65), 100%); }
	.chiharu-scbtn .chiharu-imgbtn img { width: 100%; }
}