/*
 * てるるん会員教材 — オリジナルデザイン
 * 世界観: 天気・空のパステル（アバターのお天気モチーフと統一）／ふんわり優しい／スマホ優先
 * 方針: すべて .trr- 接頭辞のクラスにスコープし、SWELL本体（素のタグ・.wp-block-*・テーマ変数）には触れない。
 *       !important は原則使わない。色は付録Bの12色パレットを基調にする。
 */

/* ============================================================
 *  カラートークン（--trr- 接頭辞でSWELLと衝突しない）
 * ============================================================ */
:root {
	--trr-sky:        #A8E0F0; /* スカイ */
	--trr-sky-pale:   #EAF7FB; /* 淡い空（カード上部のグラデ） */
	--trr-blue:       #A8CFFF; /* ブルー（フォーカス） */
	--trr-sun:        #FFE08A; /* イエロー（主アクセント） */
	--trr-sun-deep:   #FFC178; /* オレンジ寄り（主ボタン濃色／選択枠） */
	--trr-coral:      #FFB3B3; /* コーラル（注意・退会） */
	--trr-coral-deep: #FF8E9B; /* コーラル濃（退会ボタン） */
	--trr-mint:       #A8E6CF; /* ミント（成功メッセージ） */
	--trr-pink:       #FFC0D9;
	--trr-lavender:   #E0C3F0;

	--trr-ink:        #5b5560; /* やわらかい本文色 */
	--trr-ink-soft:   #8d8893; /* 補助テキスト */
	--trr-ink-warm:   #7a5a2a; /* 黄色ボタン上の文字 */
	--trr-card:       #ffffff;
	--trr-paper:      #fffdf8; /* オフホワイト */
	--trr-line:       #ece6da; /* やわらかい境界線 */

	--trr-radius:     16px;
	--trr-radius-lg:  22px;
	--trr-radius-pill:999px;
	--trr-shadow:     0 8px 24px rgba(150,180,205,.18);
	--trr-shadow-sm:  0 3px 10px rgba(150,180,205,.20);
}

/* ============================================================
 *  カード（各ショートコードの外枠）
 * ============================================================ */
.trr-gate,
.trr-unlock,
.trr-avatar-select,
.trr-delete {
	color: var(--trr-ink);
	line-height: 1.75;
	width: 100%;          /* 見出しと同じ全幅。枠・背景・影なしでページに自然配置 */
	margin: 1em 0;
}

.trr-gate p,
.trr-unlock p,
.trr-avatar-select p,
.trr-delete p { margin: 0 0 .9em; }

/* 見出し的なラベル（アバター選択の「絵を選ぶ」など） */
.trr-label {
	font-weight: 700;
	color: var(--trr-ink);
	margin: 1.1em 0 .5em;
	padding-left: 12px;
	position: relative;
}
.trr-label::before {
	content: "";
	position: absolute;
	left: 0; top: .25em;
	width: 5px; height: 1.1em;
	border-radius: var(--trr-radius-pill);
	background: linear-gradient(180deg, var(--trr-sun), var(--trr-sun-deep));
}

.trr-help {
	font-size: .9em;
	color: var(--trr-ink-soft);
}

/* ============================================================
 *  ボタン（ふんわりした角丸pill）
 * ============================================================ */
.trr-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 46px;
	padding: 11px 24px;
	border: none;
	border-radius: var(--trr-radius-pill);
	background: #ed7a1d;
	color: #fff;
	font-weight: 700;
	font-size: 1em;
	line-height: 1.2;
	text-decoration: none;
	cursor: pointer;
	box-shadow: 0 4px 12px rgba(255,193,120,.40);
	transition: background .15s ease;   /* ホバーで背景色だけ滑らかに変える（浮き上がりは廃止） */
}
.trr-btn:hover,
.trr-btn:focus-visible {
	background: #d96e15;   /* ホバーは上に動かさず、背景色を少し暗くするだけ */
	color: #fff;
}
.trr-btn:active { transform: none; }

/* サブボタン（新規登録など） */
.trr-btn-sub {
	background: var(--trr-card);
	color: var(--trr-ink);
	border: 1.5px solid var(--trr-line);
	box-shadow: var(--trr-shadow-sm);
}
.trr-btn-sub:hover,
.trr-btn-sub:focus-visible {
	background: #efe7da;   /* 白系を少し暗く */
	color: var(--trr-ink);
	border-color: #cfc8ba;
}

/* 危険な操作（退会） */
.trr-btn-danger {
	background: #e63946;
	color: #fff;
	box-shadow: 0 4px 12px rgba(255,142,155,.40);
}
.trr-btn-danger:hover,
.trr-btn-danger:focus-visible {
	background: #cf2f3b;   /* 退会ボタンの赤を少し暗く */
	color: #fff;
}

.trr-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	align-items: center;
}

/* ============================================================
 *  入力フォーム
 * ============================================================ */
.trr-pass-form label,
.trr-avatar-form label,
.trr-delete-form label {
	display: block;
	font-weight: 600;
	margin-bottom: .5em;
}

.trr-delete-form input[type="password"] {
	box-sizing: border-box;
	width: 100%;
	margin: .3em 0 .8em;
	padding: 12px 16px;
	border: 1.5px solid var(--trr-line);
	border-radius: var(--trr-radius);
	background: var(--trr-card);
	color: var(--trr-ink);
	font-size: 1em;
	transition: border-color .15s ease, box-shadow .15s ease;
}
.trr-delete-form input[type="password"]:focus {
	outline: none;
	border-color: var(--trr-blue);
	box-shadow: 0 0 0 4px rgba(168,207,255,.30);
}

/* 合言葉フォーム：入力欄とボタンをPCで横並び・スマホで縦並び。幅は全幅 */
.trr-pass-label { display: block; font-weight: 600; margin: 0 0 .4em; }
.trr-pass-row {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	align-items: center;
}
.trr-pass-input {
	flex: 1 1 240px;
	min-width: 0;
	box-sizing: border-box;
	padding: 12px 16px;
	border: 1.5px solid var(--trr-line);
	border-radius: var(--trr-radius);
	background: var(--trr-card);
	color: var(--trr-ink);
	font-size: 1em;
	transition: border-color .15s ease, box-shadow .15s ease;
}
.trr-pass-input:focus {
	outline: none;
	border-color: var(--trr-blue);
	box-shadow: 0 0 0 4px rgba(168,207,255,.30);
}
.trr-pass-row .trr-btn { flex: 0 0 auto; }
@media (max-width: 480px) {
	.trr-pass-row { flex-direction: column; align-items: stretch; }
	/* 縦並び時に flex-basis:240px が「高さ」として効いて入力欄が伸びるのを防ぐ */
	.trr-pass-row .trr-pass-input { flex: 0 0 auto; }
	.trr-pass-row .trr-btn { width: 100%; }
}

/* 表示名フォームは .trr-pass-row / .trr-pass-input を流用（入力欄＋ボタン横並び） */

/* ============================================================
 *  お知らせ（既存購入者向け）
 * ============================================================ */
.trr-notice a { color: #3a7bd0; text-decoration: underline; font-weight: 600; }
.trr-notice {
	position: relative;
	margin: 1.6em 0 1.1em;   /* 上に余白＝合言葉のテキストボックス／ボタンとの間隔 */
	padding: 14px 16px 14px 46px;
	background: #fff7e0;
	border: 1px solid #ffe3a8;
	border-radius: var(--trr-radius);
}
.trr-notice::before {
	content: "📣";
	position: absolute;
	left: 14px; top: 12px;
	font-size: 1.2em;
	line-height: 1;
}
.trr-notice p { margin: 0 0 .4em; }
.trr-notice p:last-child { margin-bottom: 0; }
.trr-notice strong { color: #b9772a; }

/* ============================================================
 *  メッセージ（成功／エラー）
 * ============================================================ */
.trr-msg {
	position: relative;
	margin: 0 0 1em;
	padding: 12px 14px 12px 44px;
	border-radius: var(--trr-radius);
	font-weight: 600;
}
.trr-msg::before {
	position: absolute;
	left: 14px; top: 50%;
	transform: translateY(-50%);
	font-size: 1.05em;
	line-height: 1;
}
.trr-ok {
	background: #ecf9f2;
	border: 1px solid var(--trr-mint);
	color: #2f7d5b;
}
.trr-ok::before { content: "☀️"; }
.trr-ng {
	background: #fff0f1;
	border: 1px solid var(--trr-coral);
	color: #c75763;
}
.trr-ng::before { content: "🌧️"; }

/* ============================================================
 *  解放済み教材の一覧
 * ============================================================ */
.trr-my-lessons {
	list-style: none;
	margin: 1em 0;
	padding: 0;
	display: grid;
	gap: 10px;
}
.trr-my-lessons li {
	margin: 0;
	padding: 0;
}
.trr-my-lessons li {
	background: var(--trr-card);
	border: 1px solid var(--trr-line);
	border-radius: var(--trr-radius);
	box-shadow: var(--trr-shadow-sm);
	transition: transform .15s ease, box-shadow .15s ease;
}
.trr-my-lessons li:hover { transform: translateY(-2px); box-shadow: var(--trr-shadow); }
.trr-my-lessons li a,
.trr-my-lessons li {
	color: var(--trr-ink);
}
.trr-my-lessons li a {
	display: block;
	padding: 14px 16px 14px 46px;
	position: relative;
	text-decoration: none;
	font-weight: 600;
}
.trr-my-lessons li a::before {
	content: "";
	width: 22px; height: 22px;
	background-color: var(--trr-icon-color, #ed7a1d);
	-webkit-mask: url(lesson-icon.png) no-repeat center / contain;
	mask: url(lesson-icon.png) no-repeat center / contain;
	position: absolute;
	left: 16px; top: 50%;
	transform: translateY(-50%);
}
.trr-my-lessons li a:hover { color: #3a7bd0; }
/* リンクのない項目（URL未設定）にも左アイコンと余白を */
.trr-my-lessons li:not(:has(a)) {
	padding: 14px 16px 14px 46px;
	position: relative;
	font-weight: 600;
}
.trr-my-lessons li:not(:has(a))::before {
	content: "";
	width: 22px; height: 22px;
	background-color: var(--trr-icon-color, #ed7a1d);
	-webkit-mask: url(lesson-icon.png) no-repeat center / contain;
	mask: url(lesson-icon.png) no-repeat center / contain;
	position: absolute;
	left: 16px; top: 50%;
	transform: translateY(-50%);
}

/* ============================================================
 *  アバター（背景色の丸＋透明PNG。HTMLのinline styleに重ねる）
 * ============================================================ */
.trr-avatar {
	box-shadow: none;
}
.trr-current {
	text-align: center;
	font-weight: 600;
}
.trr-current .trr-avatar {
	display: block !important;   /* inlineのinline-blockを中央寄せするため */
	margin: 8px auto 0;
	box-shadow: none;
	transition: background-color .25s ease;   /* 色変更がふわっと反映される */
}

/* ============================================================
 *  アバター選択UI（絵12 × 背景色12）
 * ============================================================ */
.trr-grid {
	display: grid;
	gap: 10px;
	margin: 0 0 .4em;        /* 左右マージン（auto）は削除＝左寄せ。中央寄せは親で行う */
	max-width: 500px;        /* タイルが横に伸びすぎないように（選択枠を詰める） */
}
.trr-grid-img { grid-template-columns: repeat(auto-fill, minmax(72px, 1fr)); }
.trr-grid-bg  { grid-template-columns: repeat(auto-fill, minmax(56px, 1fr)); }

.trr-opt {
	position: relative;
	display: flex !important;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	min-height: 44px;
	padding: 7px;
	border: 2px solid var(--trr-line);
	border-radius: var(--trr-radius);
	background: var(--trr-paper);
	cursor: pointer;
	transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease, background .15s ease;
}
.trr-opt input { position: absolute; opacity: 0; width: 0; height: 0; }
.trr-opt img { display: block; border-radius: 12px; }
.trr-opt:hover { transform: translateY(-2px); box-shadow: var(--trr-shadow-sm); }
/* 選択（マウスクリック）時は水色のフォーカス枠を出さない。キーボード操作（focus-visible）時のみ出してアクセシビリティを保つ */
.trr-opt:has(input:focus-visible) { outline: 3px solid rgba(168,207,255,.55); outline-offset: 2px; }

/* 選択中（:has で囲みラベルを光らせる） */
.trr-opt:has(input:checked) {
	border-color: var(--trr-sun-deep);
	background: #fff6e3;
	box-shadow: none;
	transform: translateY(-2px) scale(1.03);
}
.trr-opt:has(input:checked)::after {
	content: "✓";
	position: absolute;
	top: -7px; right: -7px;
	width: 22px; height: 22px;
	border-radius: 50%;
	background: var(--trr-sun-deep);
	color: #fff;
	font-size: 13px;
	font-weight: 700;
	line-height: 22px;
	text-align: center;
	box-shadow: 0 2px 5px rgba(0,0,0,.18);
}

.trr-grid-img .trr-opt:has(input:checked) { background: #fff6e3; }

/* ============================================================
 *  同意チェック（利用規約・プライバシーポリシー）
 * ============================================================ */
.trr-tos {
	margin: 1em 0;
	text-align: center;     /* 中央寄せ・枠と背景はなし */
	line-height: 1.8;
}
.trr-tos label {
	cursor: pointer;
	display: inline-flex !important;
	align-items: center;
	flex-wrap: wrap;
	justify-content: center;
}
.trr-tos input[type="checkbox"] {
	width: 18px;
	height: 18px;
	accent-color: var(--trr-sun-deep);
	margin: 0 4px 0 0 !important;
	flex: 0 0 auto;
}
.trr-tos a {
	color: #3a7bd0;
	text-decoration: underline;
	font-weight: 600;
}

/* ============================================================
 *  退会（やさしい警告トーン）
 * ============================================================ */
/* .trr-delete も枠なし・全幅（上の共通ルール）。危険トーンは「退会する」ボタンの色で表現 */
.trr-delete-form label { font-weight: 500; }
/* 送信系ボタンを左右中央に */
.trr-delete-form p:has(.trr-btn-danger) { text-align: center; }
.trr-logout { justify-content: center; }
.trr-delete-form input[type="checkbox"] {
	width: 18px; height: 18px;
	accent-color: var(--trr-coral-deep);
	vertical-align: -3px;
	margin-right: 6px;
}

/* ============================================================
 *  ログイン/新規登録の導線（ゲート内）
 * ============================================================ */
.trr-gate .trr-actions,
.trr-unlock .trr-actions { margin: 1.5em 0; }

/* ============================================================
 *  画面幅が広いとき
 * ============================================================ */
@media (min-width: 600px) {
	.trr-grid-img { grid-template-columns: repeat(6, 1fr); }
	.trr-grid-bg  { grid-template-columns: repeat(6, 1fr); }
}

/* 動きを減らす設定の人には控えめに */
@media (prefers-reduced-motion: reduce) {
	.trr-btn,
	.trr-opt,
	.trr-my-lessons li,
	.trr-pass-form input,
	.trr-delete-form input {
		transition: none;
	}
	.trr-btn:hover,
	.trr-opt:hover,
	.trr-opt:has(input:checked),
	.trr-my-lessons li:hover { transform: none; }
}

/* ============================================================
 *  WP-Members の標準フォーム（ログイン／新規登録）をなじませる
 *  ※ #wpmem_login_form / #wpmem_register_form に限定（SWELLや他フォームには触れない）
 * ============================================================ */
#wpmem_login_form,
#wpmem_register_form {
	box-sizing: border-box;
	width: 100%;
	margin: 1em 0;
	color: var(--trr-ink);
	line-height: 1.7;
}
/* WP-Members の fieldset/legend：重複見出しと点線を消し、中身を縦並びに */
#wpmem_login_form fieldset,
#wpmem_register_form fieldset {
	display: flex;
	flex-direction: column;
	border: 0;
	margin: 0;
	padding: 0;
	min-width: 0;
}
#wpmem_login_form legend,
#wpmem_register_form legend { display: none; }
/* （legend は上の display:none に統一。点線見出しの重複ルールは削除） */
#wpmem_login_form > fieldset > label,
#wpmem_login_form label.text,
#wpmem_register_form label.text {
	display: block;
	font-weight: 600;
	margin: .8em 0 .25em;
}
#wpmem_login_form label[for="rememberme"] { display: inline; font-weight: 500; margin: 0; }
#wpmem_login_form .req,
#wpmem_register_form .req { color: var(--trr-coral-deep); }

#wpmem_login_form input[type="text"],
#wpmem_login_form input[type="password"],
#wpmem_login_form input.username,
#wpmem_login_form input.password,
#wpmem_register_form input[type="text"],
#wpmem_register_form input[type="email"],
#wpmem_register_form input[type="password"],
#wpmem_register_form input.textbox {
	box-sizing: border-box !important;
	width: 100% !important;
	max-width: 100% !important;
	margin: .2em 0 !important;
	padding: 12px 16px !important;
	border: 1.5px solid var(--trr-line) !important;
	border-radius: 0 !important;
	background: var(--trr-card) !important;
	color: var(--trr-ink) !important;
	font-size: 1em !important;
	line-height: 1.5 !important;
	box-shadow: none !important;
	transition: border-color .15s ease, box-shadow .15s ease;
}
#wpmem_login_form .div_text,
#wpmem_register_form .div_text { margin: 0; }
#wpmem_login_form input:focus,
#wpmem_register_form input:focus {
	outline: none !important;
	border-color: var(--trr-blue) !important;
	box-shadow: 0 0 0 4px rgba(168,207,255,.30) !important;
}
#wpmem_login_form .button_div {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 1em;
}
#wpmem_register_form .button_div { margin-top: 1em; text-align: center; }
#wpmem_login_form #rememberme {
	width: 16px; height: 16px;
	accent-color: var(--trr-sun-deep);
	vertical-align: middle;
}

#wpmem_login_form .buttons,
#wpmem_login_form input[type="submit"],
#wpmem_register_form .buttons,
#wpmem_register_form input[type="submit"] {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 46px;
	padding: 11px 28px;
	border: none;
	border-radius: var(--trr-radius-pill);
	background: #ed7a1d;
	color: #fff;
	font-weight: 700;
	font-size: 1em;
	cursor: pointer;
	box-shadow: 0 4px 12px rgba(255,193,120,.40);
	transition: background .15s ease;
}
#wpmem_login_form .buttons:hover,
#wpmem_login_form input[type="submit"]:hover,
#wpmem_register_form .buttons:hover,
#wpmem_register_form input[type="submit"]:hover {
	background: #d96e15;   /* 上に動かさず、背景色を少し暗く */
}
#wpmem_register_form input[type="reset"] {
	min-height: 46px;
	margin-right: 8px;
	padding: 11px 22px;
	border: 1.5px solid var(--trr-line);
	border-radius: var(--trr-radius-pill);
	background: var(--trr-card);
	color: var(--trr-ink);
	cursor: pointer;
}
#wpmem_login_form .req-text,
#wpmem_register_form .req-text {
	order: -1;            /* 「* 必須項目」をフォームの先頭（右上）へ */
	margin: 0 0 .6em;
	text-align: right;
	font-size: .85em;
	color: var(--trr-ink-soft);
}
/* 補助リンク（パスワードリセット・新規ユーザー登録） */
#wpmem_login_form .link-text {
	margin: .5em 0 0;
	font-size: .9em;
	color: var(--trr-ink-soft);
	text-align: left;
}
#wpmem_login_form .link-text a {
	color: #3a7bd0;
	text-decoration: underline;
	font-weight: 600;
}

/* 登録情報の編集（user_edit）・パスワード変更（password）フォームも同じデザインに */
#wpmem_profile_form,
#wpmem_pwdchange_form {
	box-sizing: border-box;
	width: 100%;
	margin: 1em 0;
	color: var(--trr-ink);
	line-height: 1.7;
}
#wpmem_profile_form fieldset,
#wpmem_pwdchange_form fieldset {
	display: flex;
	flex-direction: column;
	border: 0; margin: 0; padding: 0; min-width: 0;
}
#wpmem_profile_form legend,
#wpmem_pwdchange_form legend { display: none; }
#wpmem_profile_form label.text,
#wpmem_pwdchange_form label.text {
	display: block; font-weight: 600; margin: .8em 0 .25em;
}
#wpmem_profile_form .req,
#wpmem_pwdchange_form .req { color: var(--trr-coral-deep); }
#wpmem_profile_form input[type="text"],
#wpmem_profile_form input[type="email"],
#wpmem_profile_form input[type="password"],
#wpmem_profile_form .textbox,
#wpmem_pwdchange_form input[type="text"],
#wpmem_pwdchange_form input[type="password"],
#wpmem_pwdchange_form .textbox {
	box-sizing: border-box !important;
	width: 100% !important;
	max-width: 100% !important;
	margin: .2em 0 !important;
	padding: 12px 16px !important;
	border: 1.5px solid var(--trr-line) !important;
	border-radius: 0 !important;
	background: var(--trr-card) !important;
	color: var(--trr-ink) !important;
	font-size: 1em !important;
	box-shadow: none !important;
}
#wpmem_profile_form input:focus,
#wpmem_pwdchange_form input:focus {
	outline: none !important;
	border-color: var(--trr-blue) !important;
	box-shadow: 0 0 0 4px rgba(168,207,255,.30) !important;
}
#wpmem_profile_form .div_text,
#wpmem_pwdchange_form .div_text { margin: 0; }
#wpmem_profile_form .button_div,
#wpmem_pwdchange_form .button_div { margin-top: 1em; text-align: center; }
#wpmem_profile_form .buttons,
#wpmem_profile_form input[type="submit"],
#wpmem_pwdchange_form .buttons,
#wpmem_pwdchange_form input[type="submit"] {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 46px;
	padding: 11px 28px;
	border: none;
	border-radius: var(--trr-radius-pill);
	background: #ed7a1d;
	color: #fff;
	font-weight: 700;
	font-size: 1em;
	cursor: pointer;
	box-shadow: 0 4px 12px rgba(255,193,120,.40);
}
#wpmem_profile_form .req-text,
#wpmem_pwdchange_form .req-text {
	margin: 0 0 .6em;
	text-align: right;
	font-size: .85em;
	color: var(--trr-ink-soft);
}

/* === 追加調整（幅・配置）2026-05-30 === */
/* WP-Membersフォームを見出しと同じ全幅に（SWELLの本文幅制限633pxを解除） */
[id^="wpmem_"] { width: 100% !important; max-width: none !important; }
/* パスワード変更ボタンは左右中央 */
#wpmem_pwdchange_form .button_div { text-align: center !important; }
/* 登録情報の変更（メール）：ラベルは全幅、入力欄＋ボタンを横並び（PC）・縦並び（スマホ） */
#wpmem_profile_form fieldset { flex-direction: row; flex-wrap: wrap; align-items: center; column-gap: 10px; }
#wpmem_profile_form label.text { flex: 1 1 100%; }
#wpmem_profile_form .div_text { flex: 1 1 240px; min-width: 0; margin: 0 !important; }
#wpmem_profile_form .button_div { flex: 0 0 auto; margin: 0; text-align: left !important; }
#wpmem_profile_form .req-text { flex: 1 1 100%; }
/* アバター：見出し「アバター」→プレビュー→（絵/背景色を左、保存ボタンを右に配置） */
.trr-avatar-heading { display: block; font-weight: 600; margin: 1.1em 0 .5em; color: var(--trr-ink); font-size: 1em; }
.trr-avatar-preview { flex: 0 0 auto; margin: 0; }
.trr-avatar-preview .trr-avatar { display: inline-block; box-shadow: none; transition: background-color .25s ease; }
.trr-avatar-body { display: flex; flex-wrap: wrap; gap: 3em; align-items: center; justify-content: center; margin-top: 1em; }
.trr-avatar-choices { flex: 0 1 auto; min-width: 0; text-align: center; }
/* 「絵を選ぶ／背景色を選ぶ」見出しの幅を .trr-grid と同じ（最大500px）にして、グリッドと左右端を揃える */
.trr-avatar-choices .trr-label { max-width: 500px; }
/* アイコンのグリッドの下に余白を入れて「背景色」見出しと離す */
.trr-avatar-choices .trr-grid-img { margin: 0 0 1.5em; }
.trr-avatar-save { flex: 0 0 auto; margin: 0; text-align: right; }
@media (max-width: 600px) {
	.trr-avatar-body { flex-direction: column; align-items: stretch; }
	.trr-avatar-save { text-align: center; }
	/* スマホでアバター設定を左右中央に：アイコン/背景色のタイルを中央寄せ（端数行も中央）。
	   grid→flex(justify-content:center)に切替。タイル幅は元のgrid最小値(72/56px)＝列数・タイルサイズは不変 */
	.trr-avatar-choices .trr-grid { display: flex; flex-wrap: wrap; justify-content: center; }
	.trr-avatar-choices .trr-grid-img .trr-opt { flex: 0 0 72px; }
	.trr-avatar-choices .trr-grid-bg .trr-opt { flex: 0 0 56px; }
}

/* === ボタン・退会・登録・一覧の追加調整 2026-05-30 === */
/* ボタンのシャドウは全て削除 */
.trr-btn, .trr-btn:hover, .trr-btn:focus-visible,
.trr-btn-sub, .trr-btn-sub:hover, .trr-btn-danger, .trr-btn-danger:hover,
[id^="wpmem_"] .buttons, [id^="wpmem_"] .buttons:hover,
[id^="wpmem_"] input[type="submit"], [id^="wpmem_"] input[type="submit"]:hover {
	box-shadow: none !important;
}
/* 退会ボタン：必要事項を入力するまでグレー（無効）、入力後 #e63946（有効） */
.trr-del-actions { text-align: center; }
.trr-del-btn:disabled,
.trr-del-btn[disabled] {
	background: #c9ccd1 !important;
	color: #fff !important;
	cursor: not-allowed;
	transform: none !important;
	filter: none !important;
}
/* 新規登録ページ：登録ボタンを中央 */
#wpmem_register_form .button_div { text-align: center !important; }
/* 新規登録ページ：*必須項目を「ユーザー名*」ラベルと同じ高さ・右寄せに。
   頑丈にするポイント＝line-height をフォントに依存しない固定値(1.7rem=27.2px)にし、
   ラベルの行の高さ(line-height:1.7×16px=27.2px)と同じにする。これで「必須項目」とラベルの
   行ボックスが同じ高さになり、文字サイズ(.85em)やフォント読込状態が変わっても上下中央がぶれない。
   top はその行ボックスをラベル行に重ねる位置（実測でラベル中央と一致＝-7px）。 */
#wpmem_register_form fieldset { position: relative; }
#wpmem_register_form .req-text {
	position: absolute;
	top: -7px;
	right: 0;
	order: 0;
	margin: 0;
	line-height: 1.7rem;
}
/* 購入済みの商品一覧：SWELLのリスト左パディングを削除 */
.trr-my-lessons { padding-left: 0 !important; }
/* パスワードリセットフォーム（#wpmem_pwdreset_form）も同じデザインに */
#wpmem_pwdreset_form fieldset { display: flex; flex-direction: column; border: 0; margin: 0; padding: 0; min-width: 0; }
#wpmem_pwdreset_form legend { display: none; }
#wpmem_pwdreset_form label { display: block; font-weight: 600; margin: .6em 0 .25em; }
#wpmem_pwdreset_form input[type="text"],
#wpmem_pwdreset_form input[type="email"],
#wpmem_pwdreset_form .textbox {
	box-sizing: border-box !important;
	width: 100% !important;
	max-width: 100% !important;
	margin: .2em 0 !important;
	padding: 12px 16px !important;
	border: 1.5px solid var(--trr-line) !important;
	border-radius: 0 !important;
	background: var(--trr-card) !important;
	color: var(--trr-ink) !important;
	font-size: 1em !important;
}
#wpmem_pwdreset_form input:focus { outline: none !important; border-color: var(--trr-blue) !important; box-shadow: 0 0 0 4px rgba(168,207,255,.30) !important; }
#wpmem_pwdreset_form .button_div { margin-top: 1em; text-align: center !important; }
#wpmem_pwdreset_form .buttons,
#wpmem_pwdreset_form input[type="submit"] {
	display: inline-flex; align-items: center; justify-content: center;
	min-height: 46px; padding: 11px 28px; border: none;
	border-radius: var(--trr-radius-pill);
	background: #ed7a1d; color: #fff; font-weight: 700; font-size: 1em; cursor: pointer;
}

/* === 追加調整3 2026-05-30 === */
/* アバター選択の見出し（絵を選ぶ/背景色を選ぶ）の左の縦バーを削除 */
.trr-label { padding-left: 0; }
.trr-label::before { display: none; }
/* 購入済みの商品一覧：影を削除 */
.trr-my-lessons li,
.trr-my-lessons li:hover { box-shadow: none !important; }
.trr-my-lessons li:hover { transform: none; }
/* 退会の同意ラベルはクリック可能に */
.trr-del-confirm { cursor: pointer; }
/* 「ログイン状態を保存する」：チェックと文字を中央で揃え、 の余白を消す。
   親をfont-size:0にして （テキストノード）を不可視化し、実要素だけ絶対値1remで戻す。
   ※1emだと親0pxの1倍＝0pxになり文字が消えるため、必ずrem（ルート基準）を使う。 */
#wpmem_login_form .button_div { font-size: 0; gap: 0; }
#wpmem_login_form .button_div > input,
#wpmem_login_form .button_div > label { font-size: 1rem; vertical-align: middle; }
#wpmem_login_form #rememberme { margin: 0 6px 0 0; }
#wpmem_login_form .button_div label[for="rememberme"] { margin: 0 16px 0 0; }
/* ヘッダーのアバター＋ユーザー名（PCナビ＝.ttl内／スマホメニュー＝<a>直下） */
.trr-nav-account > a > .ttl { display: inline-flex; align-items: center; }
.c-spnav .trr-nav-account > a { display: inline-flex; align-items: center; }
.trr-nav-account .trr-avatar { box-shadow: none; flex: none; }
/* アバターとユーザー名の間の余白（.ttlがblockでflexのgapが効かない環境でも確実に効くようmarginで指定） */
.trr-nav-account .trr-nav-name { margin-left: 9px; }

/* === 追加調整4 2026-05-31 === */
/* 入力欄（テキストボックス）は角丸にしない（四角） */
[id^="wpmem_"] input[type="text"],
[id^="wpmem_"] input[type="email"],
[id^="wpmem_"] input[type="password"],
[id^="wpmem_"] input.textbox,
[id^="wpmem_"] input.username,
[id^="wpmem_"] input.password,
.trr-pass-input,
.trr-delete-form input[type="password"] {
	border-radius: 0 !important;
}
/* マイページ「ユーザー情報の変更」では必須マーク（*）と「*必須項目」を非表示
   （必須・重複チェックはサーバー側で実施する） */
#wpmem_profile_form .req,
#wpmem_profile_form .req-text { display: none; }

/* === 追加調整5 2026-05-31 === */
/* ログインのエラー文（パスワード違いなど）：枠・背景なし、全幅、赤文字。
   ログインフォーム(#wpmem_login_form)を含むラッパーの直前のものだけを対象にし、
   マイページのパスワード変更などのメッセージには影響させない */
body:has(#wpmem_login_form) .wpmem_msg:has(+ #wpmem_login) {
	width: 100% !important;
	max-width: none !important;
	margin: 0 0 1em !important;
	padding: 0 !important;
	border: none !important;
	background: none !important;
	color: #e63946 !important;
	font-weight: 600;
}
body:has(#wpmem_login_form) .wpmem_msg:has(+ #wpmem_login) a { color: #3a7bd0; text-decoration: underline; font-weight: 600; }
/* マイページ：更新メッセージが「ユーザー情報フォーム(#wpmem_reg)」と「パスワード変更
   フォーム(#wpmem_login)」の両方の前に二重表示されるのを防ぐ（先頭の#wpmem_reg前の
   メッセージがある場合、後続の重複メッセージを隠す） */
.wpmem_msg:has(+ #wpmem_reg) ~ .wpmem_msg:has(+ #wpmem_login) { display: none; }

/* === 追加調整6 2026-05-31 === */
/* ログインの「ログイン状態を保存する」と「ログイン」ボタンを縦並びに（チェックの行→ボタンの行） */
#wpmem_login_form .button_div { display: block; text-align: center !important; }
#wpmem_login_form .button_div label[for="rememberme"] { margin: 0; }
#wpmem_login_form .button_div .buttons,
#wpmem_login_form .button_div input[type="submit"] {
	display: block;
	width: -moz-fit-content;
	width: fit-content;
	margin: 14px auto 0;
}

/* === 追加調整7 2026-05-31 === */
/* 一問一答アプリのサイドバー(#hamburger-menu)下部：ログイン中のアバター＋ユーザー名（縦並び・クリックでマイページ） */
#hamburger-menu .trr-hb-user {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	padding: 22px 14px;
	text-decoration: none;
	color: inherit;
}
#hamburger-menu .trr-hb-user-name { font-weight: 600; font-size: .95em; text-align: center; word-break: break-word; line-height: 1.3; }
#hamburger-menu .trr-hb-user:hover .trr-hb-user-name { color: #3a7bd0; }

/* 新規登録ページ下部の「登録済みの方はログイン」リンク */
.trr-alt-link { text-align: center; margin: 1.4em 0 0; color: var(--trr-ink-soft); font-size: .95em; }
.trr-alt-link a { color: #3a7bd0; text-decoration: underline; font-weight: 600; }
/* パスワードリセット等の「ユーザー名をお忘れですか？ ここをクリック」リンクは非表示（メール方式のため不要） */
.link-text-username { display: none; }

/* === 追加調整8 2026-05-31 === */
/* ユーザー情報の変更（ユーザー名・メール・アバターを1つに統合、保存ボタン1つ） */
.trr-field-label { display: block; font-weight: 600; margin: 1em 0 .3em; color: var(--trr-ink); }
.trr-account-input {
	box-sizing: border-box;
	width: 100%;
	padding: 12px 16px;
	border: 1.5px solid var(--trr-line);
	border-radius: 0;
	background: var(--trr-card);
	color: var(--trr-ink);
	font-size: 1em;
	transition: border-color .15s ease, box-shadow .15s ease;
}
.trr-account-input:focus { outline: none; border-color: var(--trr-blue); box-shadow: 0 0 0 4px rgba(168,207,255,.30); }
/* 「アバター」見出し・プレビューを中央に */
.trr-account-form .trr-avatar-heading { text-align: center; }
.trr-account-form .trr-avatar-preview { text-align: center; margin: .1em 0 1em; }
/* 保存ボタンは下部に中央 */
/* .trr-avatar-select p（margin:0 0 .9em）に上書きされないよう親クラスを足して詳細度を上げる */
.trr-account-form .trr-account-save { text-align: center; margin: 2.5em 0 0; }

/* === 追加調整9 2026-05-31 === */
/* チェックボックスはチェックで青背景＋白チェックに（accent-color） */
.trr-tos input[type="checkbox"],
#wpmem_login_form #rememberme,
.trr-delete-form input[type="checkbox"] { accent-color: #2c6fdb; }
/* 「ログイン状態を保存する」のチェック・ラベルはクリック可能に */
#wpmem_login_form #rememberme,
#wpmem_login_form label[for="rememberme"] { cursor: pointer; }
/* 商品ゲートの「ログイン」「新規登録」ボタンを左右中央に
   （.trr-actions は display:flex のため text-align では中央化されない→justify-content で中央に） */
.trr-actions { justify-content: center; text-align: center; }

/* === 追加調整11 2026-05-31 === */
/* ログアウトボタン：ホバー／フォーカス時は青枠でなく、少し濃いグレー枠に */
.trr-logout .trr-btn-sub:hover,
.trr-logout .trr-btn-sub:focus-visible {
	border-color: #b8b2a6;
}
/* 確認モーダル（ログアウト確認など） */
.trr-modal-overlay {
	position: fixed;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
	background: rgba(60,50,40,.45);
	z-index: 100000;
}
.trr-modal {
	box-sizing: border-box;
	width: 100%;
	max-width: 340px;
	padding: 26px 22px 22px;
	background: #fff;
	border-radius: var(--trr-radius);
	box-shadow: 0 16px 48px rgba(0,0,0,.25);
	text-align: center;
}
.trr-modal-msg {
	margin: 0 0 20px;
	font-weight: 700;
	font-size: 1.05em;
	color: var(--trr-ink);
}
.trr-modal-actions {
	display: flex;
	gap: 10px;
	justify-content: center;
	flex-wrap: wrap;
}
.trr-modal-actions .trr-btn { min-width: 120px; }

/* === 追加調整15 2026-05-31：保存トースト＋保存中ローディング === */
/* 画面上部に出る通知（成功＝緑／失敗＝赤）。数秒でふわっと消える */
.trr-toast {
	position: fixed;
	top: 20px;
	left: 50%;
	transform: translate(-50%, -16px);
	z-index: 100001;
	max-width: 92%;
	box-sizing: border-box;
	padding: 13px 22px;
	border-radius: 12px;
	font-weight: 700;
	font-size: .98em;
	line-height: 1.5;
	box-shadow: 0 10px 30px rgba(0,0,0,.18);
	opacity: 0;
	transition: opacity .35s ease, transform .35s ease;
	pointer-events: none;
}
.trr-toast.is-show { opacity: 1; transform: translate(-50%, 0); }
.trr-toast-ok { background: #ecf9f2; border: 1px solid var(--trr-mint); color: #2f7d5b; }
.trr-toast-ng { background: #fff0f1; border: 1px solid var(--trr-coral); color: #c75763; }
/* 送信ボタンの中のくるくる（ローディング） */
.trr-spin {
	display: inline-block;
	width: 14px; height: 14px;
	margin-right: 8px;
	vertical-align: -2px;
	border: 2px solid rgba(255,255,255,.55);
	border-top-color: #fff;
	border-radius: 50%;
	animation: trr-spin .6s linear infinite;
}
@keyframes trr-spin { to { transform: rotate(360deg); } }
.trr-btn.is-loading,
[id^="wpmem_"] input[type="submit"].is-loading { opacity: .85; cursor: wait; }

/* === 追加調整14 2026-05-31 === */
/* WP-Membersのプロフィール/パスワード変更/リセットの送信ボタンも、ホバーで上に動かさず背景色を少し暗くする */
#wpmem_profile_form .buttons:hover,
#wpmem_profile_form input[type="submit"]:hover,
#wpmem_pwdchange_form .buttons:hover,
#wpmem_pwdchange_form input[type="submit"]:hover,
#wpmem_pwdreset_form .buttons:hover,
#wpmem_pwdreset_form input[type="submit"]:hover {
	background: #d96e15;
}
/* 確認モーダルのキャンセル（サブボタン）／OK（メインボタン）のホバーも上記の共通ルールに従う（追加指定なし） */

/* === 追加調整16 2026-05-31 === */
/* 全画面ページ（赤シート版など page-trr-fullscreen.php）がロック中＝ゲート表示のときだけ、
   ページをスクロール可能にして余白を付ける。テンプレートの body{overflow:hidden} を上書き。
   解放後（クイズ表示・.trr-gate無し）は overflow:hidden のままなので影響しない。 */
body.trr-fullscreen-page:has(.trr-gate) {
	overflow: auto !important;
	height: auto !important;
	min-height: 100%;
	padding: 28px 16px;
	background: #fff;
}
body.trr-fullscreen-page:has(.trr-gate) .trr-gate {
	max-width: 600px;
	margin: 0 auto;
}

/* === 追加調整：記事途中ゲート [trr_gate_more] のティザー＋購入導線 2026-05-31 === */
/* ロック中は、解説ボックス末尾に自動挿入される販促（CTA文＋記事下バナー）を隠してクリーンなティザーにする */
body:has(.trr-gate-more) .trr-article-bottom-message,
body:has(.trr-gate-more) .trr-banner--article_bottom { display: none !important; }

/* 解説ボックスの下端を「切れている／まだ続く」見た目に＋下端フェードで「続きがある」感（記事途中ゲートのページのみ）。
   ※ 無料部分を入れ物で囲むと .post_content 直下の余白ルールが外れて問題番号ボタンとの間隔が詰まるため、
      囲まずにボックスへ直接当てる（上の余白は通常記事と同じまま）。 */
body:has(.trr-gate-more) .kaisetsu-capbox {
	position: relative;
	border-bottom-color: transparent !important;
	border-bottom-left-radius: 0 !important;
	border-bottom-right-radius: 0 !important;
	margin-bottom: 0 !important;
}
body:has(.trr-gate-more) .kaisetsu-capbox::after {
	content: "";
	position: absolute; left: 0; right: 0; bottom: 0;
	height: 90px;
	background: linear-gradient(to bottom, rgba(255,255,255,0), #fff 92%);
	pointer-events: none;
}

/* 購入者限定の案内（ゲート） */
.trr-gate-more { margin-top: .25em; }
.trr-gate-more-lead { text-align: center; font-weight: 700; color: var(--trr-ink-warm, #6b5b4d); font-size: 1.05rem; margin: 0 0 1em; }
/* 「解説の続きを購入する」ボタン＝大きめで目立たせる */
.trr-gate-more-buy { margin: 0 0 1.2em; }
.trr-gate-more-buy .trr-btn-buy { font-size: 1.05rem; padding: .95em 3em; font-weight: 700; }

/* === 追加調整：退会アコーディオン＋パスワード条件ヒント 2026-05-31 === */
/* 退会の見出し＝クリックで開閉（見出しの見た目はそのまま、右に小さな矢印だけ足す） */
.trr-acc-head { cursor: pointer; position: relative; }
/* ▲は見出しの右端に固定（「退会」テキストは左寄せのまま） */
.trr-acc-head::after {
	content: "▼";
	position: absolute;
	right: .5em;
	top: 50%;
	transform: translateY(-50%);
	font-size: .7em;
	color: #b0a99c;
	transition: transform .2s ease;
}
.trr-acc-head.trr-acc-open::after { transform: translateY(-50%) rotate(180deg); }
.trr-acc-collapsed { display: none !important; }

/* パスワード変更の「新規パスワード」横に出す条件ヒント（小さめ・控えめ） */
.trr-pwd-hint { font-size: .8em; font-weight: normal; color: #8a8275; }

/* === 追加調整：記事途中ゲートのボタン強調（ログインを白系に＋購入ボタンをキラッと光らせる） 2026-05-31 === */
/* 「ログイン」を新規登録と同じ白系にして、オレンジの「解説の続きを購入する」を目立たせる（記事途中ゲートのみ） */
body:has(.trr-gate-more) .trr-actions:not(.trr-gate-more-buy) a.trr-btn:not(.trr-btn-sub) {
	background: var(--trr-card);
	color: var(--trr-ink);
	border: 1.5px solid var(--trr-line);
	box-shadow: var(--trr-shadow-sm);
}
body:has(.trr-gate-more) .trr-actions:not(.trr-gate-more-buy) a.trr-btn:not(.trr-btn-sub):hover,
body:has(.trr-gate-more) .trr-actions:not(.trr-gate-more-buy) a.trr-btn:not(.trr-btn-sub):focus-visible {
	background: #efe7da;
	color: var(--trr-ink);
	border-color: #cfc8ba;
}
/* 「解説の続きを購入する」ボタンを4秒に1回キラッと光らせる（横切る光） */
.trr-gate-more-buy .trr-btn-buy { position: relative; overflow: hidden; }
.trr-gate-more-buy .trr-btn-buy::before {
	content: "";
	position: absolute; top: 0; left: -75%;
	width: 50%; height: 100%;
	background: linear-gradient(120deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.55) 50%, rgba(255,255,255,0) 100%);
	transform: skewX(-20deg);
	animation: trr-shine 4s ease-in-out infinite;
	pointer-events: none;
}
@keyframes trr-shine {
	0%   { left: -75%; }
	18%  { left: 130%; }
	100% { left: 130%; }
}
@media (prefers-reduced-motion: reduce) {
	.trr-gate-more-buy .trr-btn-buy::before { animation: none; }
}

/* ===== 記事ゲートの購入プラン（カード型・試験種別で色分け）===== */
.trr-gate-plans { --trr-pl-hd:#ed7a1d; --trr-pl-hero:#d2660f; --trr-pl-single:#efa45f; margin: 0 0 1.4em; }
.trr-theme-ippan  { --trr-pl-hd:#3a8dd0; --trr-pl-hero:#2b6fa8; --trr-pl-single:#7fb4e2; }
.trr-theme-senmon { --trr-pl-hd:#ed7a1d; --trr-pl-hero:#d2660f; --trr-pl-single:#efa45f; }
.trr-theme-jitsugi{ --trr-pl-hd:#2fa56b; --trr-pl-hero:#1f8050; --trr-pl-single:#79c79e; }
.trr-cards { container-type: inline-size; }
.trr-vrow { display:flex; gap:16px 13px; justify-content:center; align-items:stretch; flex-wrap:wrap; margin-top:30px; }
.trr-cap-col { flex:1; min-width:165px; max-width:200px; display:flex; flex-direction:column; position:relative; }
.trr-cap { flex:1; border:1px solid #e6ddd0; border-radius:12px; overflow:hidden; display:flex; flex-direction:column; background:#fff; width:100%; box-sizing:border-box; }
.trr-cap-title { background:var(--trr-pl-hd); color:#fff; font-weight:700; font-size:13.5px; padding:10px 8px; text-align:center; line-height:1.4; }
.trr-cap-body { padding:14px 11px 15px; text-align:center; display:flex; flex-direction:column; flex:1; }
.trr-cap-sub { font-size:11.5px; color:#888; line-height:1.5; flex:1; margin:0; }
.trr-cap-btn { margin-top:13px; background:var(--trr-pl-hd); color:#fff !important; font-weight:700; font-size:13px; padding:9px 8px; border-radius:999px; text-decoration:none !important; display:block; box-shadow:none; border:0; }
.trr-cap-btn:hover { filter:brightness(.94); color:#fff !important; }
.trr-cap-single .trr-cap-title { background:var(--trr-pl-single); }
.trr-cap-single .trr-cap-btn { background:#fff; color:var(--trr-pl-hd) !important; border:1.5px solid var(--trr-pl-hd); }
.trr-cap-single .trr-cap-btn:hover { color:var(--trr-pl-hd) !important; }
.trr-cap-hero { border:2px solid var(--trr-pl-hero); box-shadow:0 6px 16px rgba(0,0,0,.14); }
.trr-cap-hero .trr-cap-title { background:var(--trr-pl-hero); }
.trr-cap-hero .trr-cap-btn { background:var(--trr-pl-hero); position:relative; overflow:hidden; }
/* 一番お得ボタンに4秒キラッ（既存の @keyframes trr-shine を流用） */
.trr-cap-hero .trr-cap-btn::before {
	content:""; position:absolute; top:0; left:-75%; width:50%; height:100%;
	background:linear-gradient(120deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.55) 50%, rgba(255,255,255,0) 100%);
	transform:skewX(-20deg); animation:trr-shine 4s ease-in-out infinite; pointer-events:none;
}
/* ＼ 人気No.1 ／（斜め線はCSS） */
.trr-hero-pop { position:absolute; top:-27px; left:0; right:0; display:flex; align-items:center; justify-content:center; gap:11px; font-size:16.5px; font-weight:700; color:var(--trr-pl-hero); letter-spacing:.3px; }
.trr-hero-pop::before, .trr-hero-pop::after { content:""; width:2px; height:19px; background:currentColor; border-radius:2px; }
.trr-hero-pop::before { transform:rotate(-27deg); }
.trr-hero-pop::after { transform:rotate(27deg); }
/* カードが折り返したときだけ：行間は狭いまま、人気No.1カードの上にだけ余白を足す（重なり防止） */
@container (max-width:520px) {
	.trr-cap-col { flex-basis:100%; max-width:none; }
	.trr-vrow { margin-top:8px; }
	.trr-cap-col-hero { margin-top:30px; }
}
@media (prefers-reduced-motion: reduce) {
	.trr-cap-hero .trr-cap-btn::before { animation: none; }
}

/* 「おかえりなさい」のユーザー名の左に小さくアバターをインライン表示 */
.trr-welcome-avatar { margin: 0 .3em 0 .1em; }

/* 合言葉入力フォームの下に1emの余白。SWELLの .post_content div > :last-child{margin-bottom:0!important} が
   margin を強制的に消すため、見た目が同じになる padding-bottom で確保する（フォームは枠/背景なし） */
.trr-pass-form { padding-bottom: 1em; }