/*
Theme Name: Lightning Child - life-is-investment
Theme URI: https://life-is-investment.jp/
Description: life-is-investment.jp のデザインリニューアル用子テーマ。親テーマ Lightning (G3) のヘッダー／フッターを、提示のデザイン案に合わせて上書きする。既存の会員登録・購入まわりの機能には手を入れない。
Author: hrmクリエイト｜山口
Author URI: https://hrm20311721.site/
Template: lightning
Version: 0.1.0
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: lightning-child
*/

/* ==========================================================================
   1. デザイントークン
   デザイン案（mockup/index (4).html）の :root から取得。
   親テーマの --vk-* / theme.json の変数と衝突しないよう --lii- を接頭辞にする。
   ========================================================================== */

:root {
	/* 地の色 */
	--lii-paper: #ffffff;
	--lii-parchment: #eef1f5;
	--lii-parchment-2: #e3e8ee;

	/* 文字色 */
	--lii-ink: #16233a;
	--lii-charcoal: #0d2340;
	--lii-charcoal-2: #163256;
	--lii-text-mute: #4a5568;
	--lii-text-soft: #71809b;

	/* アクセント（金） */
	--lii-gold: #bf9b52;
	--lii-gold-deep: #9c7a34;
	--lii-gold-pale: #e8d9b0;

	/* 罫線 */
	--lii-line: rgba(13, 35, 64, 0.16);
	--lii-line-soft: rgba(13, 35, 64, 0.10);

	/* 書体 */
	--lii-serif: "Noto Serif JP", "Yu Mincho", "YuMincho", serif;
	--lii-sans: "Noto Sans JP", "Hiragino Sans", "Yu Gothic", sans-serif;

	/* レイアウト */
	--lii-container: 1120px;
	--lii-gutter: 40px;
}

/* ==========================================================================
   2. ベース
   ========================================================================== */

body {
	font-family: var(--lii-sans);
	font-weight: 300;
	line-height: 2;
	color: var(--lii-ink);
	background: var(--lii-paper);
	-webkit-font-smoothing: antialiased;
}

/*
 * 親テーマが p { line-height: var(--vk-line-height) }（1.7em）を直接
 * 当てているため、body に書いた 2 は継承で届かない。同じ p で上書きする。
 * デザイン案は body の 2 がそのまま全段落に効いている。
 * 個別に別の値を持たせている箇所（規約の 1.95 など）はそちらが勝つ。
 */
p {
	line-height: 2;
}

/*
 * 見出しも同じ。親テーマが
 *   h1,h2,h3,h4,h5,h6{line-height:var(--vk-line-height-low)}（1.4em）
 * を直接当てている。デザイン案は指定が無く body の 2 を継承するので戻す。
 * Elementor の見出しウィジェットは別に指定している（line-height:1）ため、
 * そちらは .elementor .elementor-heading-title で上書きしてある。
 */
h1,
h2,
h3,
h4,
h5,
h6 {
	line-height: 2;
}

/*
 * 親テーマのコンテナ幅をデザイン案に合わせる。
 * パンくず（#breadcrumb）は .site-body の外に出力されるため、個別に指定が要る。
 * 入れ忘れるとヘッダーのブランドロックと左端が揃わない。
 */
.site-header-container.container,
.site-body .container,
#breadcrumb .container,
.lii-footer .container {
	max-width: var(--lii-container);
	padding-left: var(--lii-gutter);
	padding-right: var(--lii-gutter);
}

@media (max-width: 767px) {
	.site-header-container.container,
	.site-body .container,
	#breadcrumb .container {
		padding-left: 20px;
		padding-right: 20px;
	}
}

/* ==========================================================================
   3. ヘッダー
   マークアップは _g3/template-parts/site-header.php（子テーマで上書き）を参照。
   ========================================================================== */

/*
 * ヘッダーを上部に固定する（デザイン案は sticky ＋ 半透明＋ぼかし）。
 *
 * ⚠️ 親テーマが body,html { overflow-x:hidden } を当てており、
 *    overflow が visible 以外の祖先の中では position:sticky が効かない。
 *    Lightning 自身も同じ問題に対して overflow-x:unset で回避しているので、同じ手を使う。
 *
 *    横スクロールの抑止は overflow-x:clip で代替する。clip はスクロールコンテナを
 *    作らないため sticky と併用できる。
 */
/*
 * 横スクロールの抑止はルート要素だけでよい。ルートの overflow は
 * ビューポートへ引き継がれるため、body まで clip にする必要がない。
 *
 * body を clip にすると body 自体が切り取りの箱になり、はみ出した要素が
 * スクロール範囲に入らなくなる可能性がある。付ける理由がないので外した。
 *
 * ただし親テーマの body { overflow-x: hidden } はそのままだと
 * sticky が効かなくなるので、visible で打ち消す。
 */
:root {
	overflow-x: clip;
}

:root body {
	overflow-x: visible;
}

.site-header {
	position: sticky;
	top: 0;
	z-index: 60;
	background: rgba(255, 255, 255, 0.92);
	backdrop-filter: blur(8px);
	border-bottom: 1px solid var(--lii-line-soft);
	box-shadow: none;
}

.site-header-container {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	padding-top: 24px;
	padding-bottom: 24px;
}

/* --- ブランドロック（3行テキスト） ------------------------------------- */

.site-header-logo.lii-brand {
	margin: 0;
	padding: 0;
	max-width: none;
}

/*
 * 親テーマに
 *   .site-header--layout--nav-float .site-header-logo a { display:block; width:fit-content }
 * があり（特異性 0,2,1）、単独クラスでは負けるため .site-header を足して 0,3,1 にする。
 */
.site-header .site-header-logo a.lii-brand__lock {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	width: -moz-fit-content;
	width: fit-content;
	line-height: 1.3;
	text-decoration: none;
}

.site-header .site-header-logo a.lii-brand__lock:hover {
	text-decoration: none;
}

.lii-brand__name {
	font-family: var(--lii-serif);
	font-size: 40px;
	font-weight: 700;
	letter-spacing: 0.03em;
	color: var(--lii-charcoal);
}

.lii-brand__en {
	font-family: var(--lii-sans);
	font-size: 16px;
	font-weight: 500;
	letter-spacing: 0.06em;
	color: var(--lii-gold-deep);
	margin-top: 8px;
}

.lii-brand__site {
	font-family: var(--lii-serif);
	font-size: 17px;
	font-weight: 500;
	letter-spacing: 0.04em;
	color: #5c6b87;
	margin-top: 3px;
}

/*
 * デザイン案の値は 40/16/17px で、モバイルの縮小指定は無い。
 * 375px 幅でも収まることは計算と実測で確認済みだが
 *   「福井尚和」4文字 × 40px × 字送り1.03 ≒ 165px
 *   「人生は投資である」8文字 × 17px ≒ 136px
 * 実機ではヘッダーが重く見えたことと、CTAとメニューボタンが
 * 収まらなかったため、狭い画面だけ 24/11/12px に落とす。
 * ヘッダーCTAも合わせて小さくする。
 * （2026-09-09・山口判断／藤間様へ報告予定）
 */
@media (max-width: 767.98px) {
	.lii-brand__name {
		font-size: 24px;
	}

	.lii-brand__en {
		font-size: 11px;
		margin-top: 6px;
	}

	.lii-brand__site {
		font-size: 12px;
	}

	/* 単独クラスの a.lii-btn（0,1,1）より強くするため .lii-header-cta を足す */
	.lii-header-cta a.lii-btn {
		padding: 11px 18px;
		font-size: 11.5px;
		letter-spacing: 0.06em;
	}
}

/*
 * 320px 幅ではブランド・CTA・メニューボタンが並びきらないため、もう一段落とす。
 * 使える幅は 320 − 左右padding 20px×2 = 280px。
 *   ブランド「人生は投資である」8文字 × 11px ≒ 88px
 *   CTA 左右padding 12px×2 ＋ 枠線 1px×2 ＋ 文字 6字×11px ≒ 95px
 *   すき間 12px ＋ ボタンの逃がし 64px
 *   合計 259px
 * （2026-09-09・山口判断）
 */
@media (max-width: 479.98px) {
	.site-header-container {
		gap: 12px;
	}

	.lii-brand__name {
		font-size: 21px;
	}

	.lii-brand__en {
		font-size: 10px;
	}

	.lii-brand__site {
		font-size: 11px;
	}

	.lii-header-cta a.lii-btn {
		padding: 9px 12px;
		font-size: 11px;
		letter-spacing: 0.04em;
	}
}

/* --- グローバルナビ ------------------------------------------------------ */

/*
 * デザイン案のナビは body の font-weight:300 を継承する（.navlinks に指定なし）。
 * ここも 300 で揃える。
 */
.global-nav-list > li > a {
	font-family: var(--lii-sans);
	font-size: 12.5px;
	font-weight: 300;
	letter-spacing: 0.02em;
	color: var(--lii-text-mute);
}

/*
 * ナビのラベルは <strong class="global-nav-name"> で囲まれている。
 *   - font-size は親テーマが .global-nav-list > li .global-nav-name（0,2,1）で 14px を指定
 *   - font-weight は未指定なので <strong> のブラウザ既定 bold が効く
 * その結果、存在しないウェイトが合成されて（Noto Sans JP Thin + faux bold）
 * デザイン案より太く不自然に見えていた。
 * .site-header を足して 0,3,1 にし、サイズとウェイトを両方確定させる。
 * サブメニューのラベルも同じセレクタで拾える。
 */
.site-header .global-nav-list > li .global-nav-name {
	font-family: var(--lii-sans);
	font-size: 12.5px;
	font-weight: 300;
	letter-spacing: 0.02em;
}

.global-nav-list > li > a:hover {
	color: var(--lii-gold-deep);
	background: transparent;
}

/*
 * ヘッダー右端のお問い合わせボタン。
 *
 * WordPress の「外観 → メニュー」で項目を追加し、
 * その項目の「CSSクラス」欄に lii-nav-cta と入れると適用される。
 * 子テーマに直接書かずメニュー項目にしているのは、
 * 藤間様が管理画面からリンク先や文言を変えられるようにするため。
 *
 * ※ CSSクラス欄はメニュー編集画面の「表示オプション」で有効化が必要。
 */
.site-header .global-nav-list > li.lii-nav-cta {
	display: flex;
	align-items: center;
	margin-left: 10px;
}

.site-header .global-nav-list > li.lii-nav-cta > a {
	display: inline-flex;
	align-items: center;
	background: var(--lii-charcoal);
	border: 1px solid var(--lii-charcoal);
	padding: 15px 30px;
	border-radius: 1px;
	transition: background .3s, border-color .3s;
}

.site-header .global-nav-list > li.lii-nav-cta > a:hover {
	background: var(--lii-gold-deep);
	border-color: var(--lii-gold-deep);
}

.site-header .global-nav-list > li.lii-nav-cta .global-nav-name {
	color: var(--lii-paper);
	font-size: 12.5px;
	font-weight: 400;
	letter-spacing: 0.1em;
}

@media (prefers-reduced-motion: reduce) {
	.site-header .global-nav-list > li.lii-nav-cta > a { transition: none; }
}

/*
 * 親テーマの装飾を消す。デザイン案にはどちらも無い。
 *   ::after → ドロップダウンの上に出る濃紺の三角
 *   ::before → ホバー時に伸びる濃紺の下線
 * どちらも display を指定している指定が他に無いため display:none で確実に消える。
 */
.site-header .global-nav-list > li.menu-item-has-children::after,
.site-header .global-nav-list > li::before {
	display: none;
}

/*
 * クリック後もドロップダウンが開いたままになるのを防ぐ。
 *
 * 親テーマは
 *   .device-pc .global-nav-list > li:focus-within > .sub-menu { opacity:1; max-height:80vh }
 * で開くため、マウスでクリックすると <a> にフォーカスが残って閉じなくなる。
 *
 * ホバー中でもキーボード操作中（:focus-visible）でもない focus-within のときだけ閉じる。
 * キーボードでのタブ操作による開閉は維持する。
 */
.device-pc .global-nav-list > li:focus-within:not(:hover):not(:has(:focus-visible)) > .sub-menu {
	opacity: 0;
	max-height: 0;
}

/*
 * ドロップダウン（サービス一覧・メニュー）
 *
 * 親テーマは
 *   .global-nav-list > li > ul.sub-menu { background-color:var(--vk-color-primary); width:240px; left:50%; margin-left:-120px }
 * で濃紺の240px固定にしている（特異性 0,2,2）。
 * .site-header を足して 0,3,2 にし、デザイン案の白背景・300px に置き換える。
 */
.site-header .global-nav-list > li > ul.sub-menu {
	background-color: var(--lii-paper);
	border: 1px solid var(--lii-line-soft);
	box-shadow: 0 18px 36px rgba(13, 35, 64, 0.14);

	/*
	 * width:auto だと、開いた瞬間に中身の幅が確定し直して横位置がずれる。
	 * （親テーマが開くときに overflow-y:auto へ切り替えるため幅計算が再度走る）
	 * max-content で確定させることで揺れなくなる。
	 */
	width: -moz-max-content;
	width: max-content;
	min-width: 300px;
	max-width: 90vw;

	left: 50%;
	margin-left: 0;
	transform: translateX(-50%);
	padding: 10px 0;

	/*
	 * 親テーマのベース指定が transition:all .5s のため、
	 * width / margin-left / transform までアニメーションしてしまう。
	 * 開閉に必要な2つだけに限定する。
	 */
	transition: opacity .25s ease, max-height .25s ease;
}

.site-header .global-nav-list .sub-menu li a {
	font-family: var(--lii-sans);
	font-size: 12.5px;
	font-weight: 400;
	color: var(--lii-text-mute);
	background-color: transparent;
	padding: 10px 22px;
	border: none;
	white-space: nowrap;
}

.site-header .global-nav-list .sub-menu li a:hover,
.site-header .global-nav-list .sub-menu li a:focus-within {
	color: var(--lii-gold-deep);
	background-color: var(--lii-parchment);
}


/* --- ドロップダウンの中の子項目 ------------------------------------------- */
/*
 * シリーズ別ページを「動画・コンテンツ」の下の階層として並べる
 * （2026-09-11 藤間様のご指示）。
 *
 * 親テーマは入れ子のリストを隠さない。opacity:0 / max-height:0 が付くのは
 *   .global-nav-list > li > .sub-menu
 * だけで、その中の入れ子には当たらないため、開いたパネルの中に
 * そのまま並ぶ。字下げも .sub-menu li ul.sub-menu li a{padding-left:2.2em}
 * で付くが、親項目（22px）との差が 5px ほどしかないので下げ直す。
 */
.site-header .global-nav-list .sub-menu .sub-menu li a {
	padding-left: 38px;
	font-size: 12px;
}

/*
 * PC では開閉ボタンを出さない。入れ子は常に開いているので押す必要がなく、
 * 親テーマの指定（白い枠と矢印アイコン）がドロップダウンの中で浮く。
 */
.device-pc .site-header .global-nav-list .sub-menu .acc-btn {
	display: none;
}

/* 開閉ボタンのために空けてある右余白を、他の項目と同じに戻す */
.device-pc .site-header .global-nav-list .sub-menu li.menu-item-has-children > a {
	padding-right: 22px;
}

/*
 * 3階層目を常に開いた状態にする。
 * 親テーマのJSが子のリストに acc-child-close を付け、
 *   .vk-menu-acc ul.acc-child-close{max-height:0; opacity:0}
 * でたたむ。display は block のままなので、DOMには出ているが見えない。
 * PCでは開閉ボタンを消しているため、たたまれたままだと開く手段がない。
 * モバイルのドロワーはアコーディオンのままにしたいので device-pc に限る。
 */
.device-pc .site-header .global-nav-list .sub-menu ul.acc-child-close,
.device-pc .site-header .global-nav-list .sub-menu ul.acc-child-open {
	max-height: none;
	opacity: 1;
	transition: none;
}

/* --- モバイルのメニューボタン -------------------------------------------- */
/*
 * 親テーマはボタンを画面の左上に position:fixed で貼り付ける
 * （top:5px / left:5px / 34px角）。ボタンの HTML はフッターの後ろに
 * 出力されるので、ヘッダーの中へ入れることはできない。固定のまま、
 * 位置と見た目を整える。
 *
 * 左右はカスタマイザー（モバイルナビ → メニューボタンの位置）でも
 * 変えられるが、余白の値まで含めてここで指定している。position-right も
 * 併記しているのは、設定を右にしたときに親テーマ側の 5px が
 * 後から効くのを防ぐため。
 *
 * ── 三本線を画像でなく枠線で描く理由 ──
 * 親テーマのアイコンは 48×48 の SVG で、線が入っているのは
 * y=13.2〜34.8 の範囲だけ（全体の45%）。CTAボタンと同じ高さに
 * 見せようとすると画像を100px以上に拡大することになり、線の太さも
 * 4px を超えて重くなる。枠線で描けば、線の太さを保ったまま
 * 高さだけを合わせられる。
 *
 * --lii-burger-h は三本線の上端から下端まで。
 * もとはヘッダーCTAの高さにそろえていたが、大きすぎたため
 * 2段階下げて、今はCTAの高さの約56%（2026-09-09・山口判断）。
 * CTAの高さは 768px以上 57px / 767px以下 47px。
 * 線の太さは 2px のまま。縮めても細くしていない。
 *
 * 当たり判定は幅44pxを確保している（指で押せる最低限の大きさ）。
 *
 * top はヘッダーの上下中央から高さの半分を引いた位置。
 * ヘッダーの高さ＝上下padding 24px ＋ ブランド3行（行送り1.3）で
 *   768px以上：105.9 → 中央 77px
 *   767px以下： 70.1 → 中央 59px
 *   479px以下： 63.6 → 中央 56px
 */

.vk-mobile-nav-menu-btn,
.vk-mobile-nav-menu-btn.position-right,
.mobile-nav-btn-right .vk-mobile-nav-menu-btn {
	--lii-burger-h: 32px;
	--lii-burger-w: 22px;
	--lii-burger-line: 2px;

	top: calc(77px - var(--lii-burger-h) / 2);
	right: 16px;
	left: auto;
	width: 44px;
	height: var(--lii-burger-h);
	border: none;
	border-radius: 0;
	background-color: transparent;
	background-image: none;
	box-shadow: none;
	color: var(--lii-charcoal);
}

/* 開いている間（×）も枠と画像を出さない。親テーマは白い枠を足してくる。 */
.vk-mobile-nav-menu-btn.menu-open {
	border: none;
	background-color: transparent;
	background-image: none;
}

.vk-mobile-nav-menu-btn::before,
.vk-mobile-nav-menu-btn::after {
	content: "";
	position: absolute;
	left: 50%;
	width: var(--lii-burger-w);
	transform: translateX(-50%);
}

/*
 * 上下の線。box-sizing:border-box なので height:100% の外周が
 * そのままボタンの上端・下端になり、CTAボタンと高さがそろう。
 */
.vk-mobile-nav-menu-btn::before {
	top: 0;
	height: 100%;
	border-top: var(--lii-burger-line) solid currentColor;
	border-bottom: var(--lii-burger-line) solid currentColor;
}

/* 真ん中の線 */
.vk-mobile-nav-menu-btn::after {
	top: 50%;
	height: var(--lii-burger-line);
	background-color: currentColor;
	transform: translate(-50%, -50%);
}

/* 開いた状態は2本を交差させて × にする */
.vk-mobile-nav-menu-btn.menu-open::before {
	top: 50%;
	height: var(--lii-burger-line);
	border: none;
	background-color: currentColor;
	transform: translate(-50%, -50%) rotate(45deg);
}

.vk-mobile-nav-menu-btn.menu-open::after {
	transform: translate(-50%, -50%) rotate(-45deg);
}

@media (max-width: 767.98px) {
	.vk-mobile-nav-menu-btn {
		--lii-burger-h: 27px;

		top: calc(59px - var(--lii-burger-h) / 2);
	}
}

@media (max-width: 479.98px) {
	.vk-mobile-nav-menu-btn {
		top: calc(56px - var(--lii-burger-h) / 2);
	}
}

/* 管理バーの高さぶんだけ下げる（親テーマと同じ考え方） */
.admin-bar .vk-mobile-nav-menu-btn {
	top: calc(32px + 77px - var(--lii-burger-h) / 2);
}

@media (max-width: 782px) {
	.admin-bar .vk-mobile-nav-menu-btn {
		top: calc(46px + 77px - var(--lii-burger-h) / 2);
	}
}

@media (max-width: 767.98px) {
	.admin-bar .vk-mobile-nav-menu-btn {
		top: calc(46px + 59px - var(--lii-burger-h) / 2);
	}
}

@media (max-width: 479.98px) {
	.admin-bar .vk-mobile-nav-menu-btn {
		top: calc(46px + 56px - var(--lii-burger-h) / 2);
	}
}

/*
 * ドロワー内のアコーディオン（∨）の枠を消す。
 * 親テーマは .vk-mobile-nav .acc-btn（0,2,0）と
 * .vk-menu-acc .acc-btn（0,2,0）の2か所で枠を付けるため、
 * こちらは 0,3,0 にして確実に上書きする。
 */
.vk-mobile-nav .vk-menu-acc .acc-btn,
.vk-mobile-nav .vk-menu-acc .acc-btn.acc-btn-close {
	border: none;
}

/* ボタンが右上に固定されるので、ヘッダーのCTAを内側へ寄せて重なりを避ける */
@media (max-width: 991.98px) {
	.lii-header-cta {
		margin-right: 72px;
	}
}

@media (max-width: 479.98px) {
	.lii-header-cta {
		margin-right: 64px;
	}
}

/* ==========================================================================
   4. 共通パーツ
   ========================================================================== */

/*
 * ボタン。
 *
 * ⚠️ Elementor のボタンウィジェットには使わないこと。
 * Elementor の「CSSクラス」欄はウィジェットの外枠（div）に付くため、
 * ここで background を指定すると枠全体が塗られて帯になる。
 * Elementor のボタンは「サイト設定 → テーマスタイル → ボタン」で設定する。
 *
 * セレクタを a.〜 に限定しているのは、誤ってウィジェットに付けても
 * 帯にならないようにするため。
 */
a.lii-btn {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 15px 30px;
	font-size: 12.5px;
	letter-spacing: 0.1em;
	border-radius: 1px;
	white-space: nowrap;
	text-decoration: none;
	transition: background .3s, border-color .3s, color .3s;
}

a.lii-btn--primary {
	background: var(--lii-charcoal);
	color: var(--lii-paper);
	border: 1px solid var(--lii-charcoal);
}

a.lii-btn--primary:hover {
	background: var(--lii-gold-deep);
	border-color: var(--lii-gold-deep);
	color: var(--lii-paper);
}

@media (prefers-reduced-motion: reduce) {
	a.lii-btn { transition: none; }
}

/* ==========================================================================
   5. フッター
   マークアップは _g3/template-parts/site-footer.php（子テーマで上書き）を参照。
   リンク4列は「外観 → メニュー」で編集する。
   ========================================================================== */

.site-footer.lii-footer {
	background: var(--lii-charcoal);
	color: #a9b4c6;
	font-size: 12.5px;
	padding: 60px 0 34px;
	border-top: none;
}

.site-footer.lii-footer a {
	color: #a9b4c6;
	text-decoration: none;
}

.site-footer.lii-footer a:hover {
	color: var(--lii-gold-pale);
}

.lii-foot-grid {
	display: grid;
	grid-template-columns: 1.1fr repeat(4, 1fr);
	gap: 26px;
}

/* --- ブランド列 --------------------------------------------------------- */

.lii-foot-brand__name {
	font-family: var(--lii-serif);
	font-size: 20px;
	font-weight: 700;
	color: var(--lii-paper);
}

.lii-foot-brand__en {
	display: block;
	font-family: var(--lii-sans);
	font-size: 11px;
	font-weight: 500;
	letter-spacing: 0.06em;
	color: var(--lii-gold-pale);
	margin-top: 5px;
}

.lii-foot-brand__site {
	display: block;
	font-family: var(--lii-serif);
	font-size: 12px;
	letter-spacing: 0.03em;
	color: #8b9bb8;
	margin-top: 2px;
}

.lii-foot-brand__lead {
	margin-top: 14px;
	max-width: 230px;
	font-size: 12px;
	color: #9d9584;
}

/* --- リンク列 ----------------------------------------------------------- */

/*
 * Lightning は h4 に背景色と余白を付ける。
 *   h4:where(:not(.wp-block-post-title)) { padding:.5em; background-color:var(--vk-color-border-hr) }
 * その背景が見出しの横に伸びる帯（罫線のように見える）の正体なので消す。
 */
.lii-foot-col__head {
	font-family: var(--lii-sans);
	font-size: 11px;
	letter-spacing: 0.16em;
	font-weight: 500;
	color: var(--lii-gold-pale);
	margin: 0 0 16px;
	padding: 0;
	background: none;
	border: none;
	border-radius: 0;
}

.lii-foot-list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.lii-foot-list li {
	list-style: none;
	margin-bottom: 10px;
}

/* --- 著作権表示 --------------------------------------------------------- */

/*
 * 著作権表示。
 * Lightning が .site-footer-copyright に padding:1rem、
 * 中の p に text-align:center と margin:.5rem を当てているので打ち消す。
 * デザイン案は左寄せで、上に金色の細い区切り線が入る。
 */
.lii-foot-bottom.site-footer-copyright {
	margin-top: 48px;
	padding: 22px 0 0;
	border-top: 1px solid rgba(191, 155, 82, 0.2);
	font-size: 11px;
	color: #7a869c;
	text-align: left;
}

.lii-foot-bottom.site-footer-copyright p {
	text-align: left;
	margin: 0;
	font-size: 11px;
	color: #7a869c;
}

@media (max-width: 860px) {
	.lii-foot-grid { grid-template-columns: 1fr 1fr 1fr; }
}

@media (max-width: 575px) {
	.lii-foot-grid { grid-template-columns: 1fr 1fr; }
	.lii-foot-brand { grid-column: 1 / -1; }
	.lii-foot-brand__lead { max-width: none; }
}

/* ==========================================================================
   6. ページ内パーツ
   Elementor のウィジェットに「高度な設定 → CSSクラス」で指定して使う。

   余白・段組み・幅は Elementor 側で設定する（藤間様が触れるようにするため）。
   ここに置くのは、Elementor では再現しにくい装飾と、
   全ページで揃っている必要がある書体まわりに絞っている。
   ========================================================================== */

/* --- アイブロウ（セクション上の小見出し） ------------------------------- */
/* 例：PHILOSOPHY / ACTIVITIES / DIGEST MOVIE */

.lii-eyebrow {
	display: block;
	font-family: var(--lii-sans);
	font-size: 11px;
	font-weight: 500;
	letter-spacing: 0.34em;
	color: var(--lii-gold-deep);
}

/* --- パンくず ----------------------------------------------------------- */
/*
 * Lightning が出力するパンくず（#breadcrumb）をデザイン案の見た目に寄せる。
 * schema.org の構造化データが付いているので、Elementor で作り直さず活かす。
 *
 * 帯の背景と枠線を外し、デザイン案と同じ「本文の上に置かれた1行」にする。
 * 上の余白 80px はデザイン案の .pagehero に相当するので、
 * Elementor 側のセクション1は上の余白を 0 にすること。
 */
#breadcrumb.breadcrumb {
	background: none;
	border: none;
	padding-top: 80px;
	/* 案の .crumb は margin-bottom:20px だが、続くアイブロウが
	   インラインで行送りぶん乗るため実測 30px。実測に合わせる。 */
	padding-bottom: 30px;
	font-size: 11.5px;
	color: var(--lii-text-soft);
}

#breadcrumb .breadcrumb-list {
	margin: 0;
	padding: 0;
}

#breadcrumb a {
	color: var(--lii-text-soft);
	text-decoration: none;
}

#breadcrumb a:hover {
	color: var(--lii-gold-deep);
}

/* ホームアイコンはデザイン案に無いので隠す（文字の HOME だけ残る） */
#breadcrumb .breadcrumb-list__item--home i {
	display: none;
}

@media (max-width: 767px) {
	#breadcrumb.breadcrumb { padding-top: 40px; }
}

/* Elementor で個別にパンくずを置く場合用。通常は上の #breadcrumb を使う */
.lii-crumb {
	font-size: 11.5px;
	color: var(--lii-text-soft);
	margin-bottom: 20px;
}

.lii-crumb a:hover {
	color: var(--lii-gold-deep);
}

/* --- ページ見出し下のリード文 ------------------------------------------- */

/* Elementor の max-width:100%（クラス4つぶん）に勝たせるため、クラスを重ねて底上げしている。詳しくは .lii-head の注記を参照。 */
.elementor.elementor .lii-lead.lii-lead.lii-lead {
	max-width: 560px;
	font-size: 14px;
	color: var(--lii-text-mute);
}

/* --- 記事本文のかたまり -------------------------------------------------- */
/* Elementor の「テキストエディター」ウィジェットに指定する。
   見出しと段落の間隔をデザイン案に合わせるためのもの。 */

/* Elementor の max-width:100%（クラス4つぶん）に勝たせるため、クラスを重ねて底上げしている。詳しくは .lii-head の注記を参照。 */
.elementor.elementor .lii-article.lii-article.lii-article {
	max-width: 800px;
}

/*
 * Lightning は全ての h2 に罫線を付けている。
 *   h2:where(:not(.wp-block-post-title)) {
 *     padding:.5em 0; border-top:2px solid …; border-bottom:1px solid …;
 *   }
 * デザイン案に罫線は無いので外す。
 * :where() は特異性0なので、クラス1つで上書きできる。
 */
.lii-article h2 {
	font-family: var(--lii-serif);
	font-size: 22px;
	font-weight: 700;
	/* デザイン案は指定なし＝body の 2 を継承。親テーマが 1.4 を直接当てる。 */
	line-height: 2;
	margin: 44px 0 18px;
	padding: 0;
	border: none;
}

.lii-article > .elementor-widget-container > h2:first-child {
	margin-top: 0;
}

/*
 * Elementor で作る領域の見出しから、テーマ側の装飾を外す。
 * Lightning は h2 に上下の罫線、h3 に下線を付ける。
 * 背景色も念のため打ち消す（どこかで灰色の帯が付くため）。
 * カート・会員ページなど Elementor 以外のテンプレートには影響しない。
 */
.elementor h2,
.elementor h3,
.elementor h4 {
	padding: 0;
	border: none;
	background: none;
}

/*
 * Elementor は見出しウィジェットに line-height:1 を当てている。
 * デザイン案の見出しは指定が無く body の 2 を継承するので、それに戻す。
 * 行送りは文字の外側に余白を作るため、見出しの前後の間隔にも効く。
 *
 * 個別に指定している .lii-h2-lg（1.6）などはクラス3つぶんあるので、
 * この指定には影響されない。
 */
.elementor .elementor-heading-title {
	line-height: 2;
}

.lii-article p {
	font-size: 14px;
	color: var(--lii-text-mute);
	margin-bottom: 16px;
}

/* --- 注記ボックス（破線枠） --------------------------------------------- */

.lii-notice {
	padding: 20px 24px;
	border: 1px dashed var(--lii-line);
	background: rgba(191, 155, 82, 0.05);
	font-size: 12px;
	color: var(--lii-text-mute);
}

/*
 * 枠の中の段落に、親テーマの p の下マージンが残ると
 * 上下の余白が揃わず、下だけ広く見える。
 */
.lii-notice p {
	margin: 0;
	font-size: inherit;
	color: inherit;
}

.lii-notice p + p {
	margin-top: 10px;
}

/*
 * 枠の中の見出し。
 * ダイジェスト映像と動画・コンテンツの末尾に置く
 * 「映像がうまく再生できない、全画面に切り替わらない方へ」で使う（2026-09-14）。
 * 親テーマが h3 に線や背景を付けるので、それも打ち消す。
 * リンクは既存の lii-link（濃紺の文字＋金の下線）を付けて使う。
 */
.elementor .lii-notice h3 {
	margin: 0 0 8px;
	padding: 0;
	border: none;
	background: none;
	font-family: var(--lii-serif);
	font-size: 15px;
	font-weight: 700;
	color: var(--lii-charcoal);
}

/* --- 数値の並び（実績など） --------------------------------------------- */

.lii-facts {
	display: flex;
	flex-wrap: wrap;
	max-width: 640px;
	border-top: 1px solid var(--lii-line-soft);
}

.lii-fact {
	flex: 1;
	min-width: 140px;
	padding: 20px 20px 0;
	border-right: 1px solid var(--lii-line-soft);
}

.lii-fact:last-child {
	border-right: none;
}

.lii-fact__num {
	display: block;
	font-family: var(--lii-serif);
	font-size: 26px;
	color: var(--lii-gold-deep);
	font-variant-numeric: tabular-nums;
}

.lii-fact__label {
	display: block;
	font-size: 10.5px;
	color: var(--lii-text-mute);
	margin-top: 6px;
}

/* --- カード並び ---------------------------------------------------------- */

.lii-card__title {
	font-family: var(--lii-serif);
	font-size: 17px;
	font-weight: 700;
	margin: 16px 0 8px;
}

.lii-card__text {
	font-size: 12.5px;
	color: var(--lii-text-mute);
}

/* --- 分岐図（活動紹介の「福井尚和 → 3つの活動」） ----------------------- */

.lii-hbranch {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	margin: 40px 0 48px;
	padding: 56px 40px;
	background: var(--lii-parchment);
	border: 1px solid var(--lii-line-soft);
}

.lii-hbranch__root {
	font-family: var(--lii-serif);
	font-size: 20px;
	font-weight: 700;
	color: var(--lii-charcoal);
}

.lii-hbranch__stem {
	width: 2px;
	height: 32px;
	background: rgba(13, 35, 64, 0.35);
	margin: 10px auto 0;
}

.lii-hbranch__row {
	display: flex;
	width: 100%;
	max-width: 960px;
	position: relative;
	margin: 0 auto;
	justify-content: space-between;
}

/* 3列をつなぐ横線 */
.lii-hbranch__row::before {
	content: "";
	position: absolute;
	top: 0;
	left: 16.667%;
	right: 16.667%;
	height: 2px;
	background: rgba(13, 35, 64, 0.35);
}

.lii-hbranch__col {
	flex: 1;
	position: relative;
	padding: 30px 20px 0;
}

/* 各列から上へ伸びる縦線 */
.lii-hbranch__col::before {
	content: "";
	position: absolute;
	top: 0;
	left: 50%;
	width: 2px;
	height: 30px;
	background: rgba(13, 35, 64, 0.35);
	transform: translateX(-1px);
}

.lii-hbranch__cat {
	font-family: var(--lii-serif);
	font-size: 23px;
	font-weight: 700;
	letter-spacing: 0.03em;
	color: var(--lii-charcoal);
}

/*
 * TOPで div タグの見出しウィジェットにした一行ものも、実体を親に合わせる。
 * 文字の指定はラッパーの lii-* が持っているので、中身は継承させる。
 */
.elementor .lii-act-cards__cat .elementor-heading-title,
.elementor .lii-act-cards__sub .elementor-heading-title,
.elementor .lii-act-cards__entity .elementor-heading-title,
.elementor .lii-books__pub .elementor-heading-title,
.elementor .lii-books__desc .elementor-heading-title,
.elementor .lii-explore__verb .elementor-heading-title,
.elementor .lii-explore__sub .elementor-heading-title,
.elementor .lii-voices__role .elementor-heading-title,
.elementor .lii-voices__text .elementor-heading-title,
.elementor .lii-assoc__url .elementor-heading-title {
	font: inherit;
	color: inherit;
	letter-spacing: inherit;
}

/*
 * 見出しウィジェットの実体を親に合わせる。
 * ラッパーの div に lii-* を付けても、文字の指定は中の
 * .elementor-heading-title がテーマスタイルで上書きしてしまうため。
 */
.elementor .lii-act-row__cat .elementor-heading-title {
	font: inherit;
	color: inherit;
	letter-spacing: inherit;
}

.lii-hbranch__entity {
	font-family: var(--lii-serif);
	font-size: 15px;
	font-weight: 700;
	line-height: 1.6;
	color: var(--lii-gold-deep);
	margin-top: 14px;
}

/* 狭い画面では縦積みにして、線は消す */
@media (max-width: 767px) {
	.lii-hbranch { padding: 40px 20px; }
	.lii-hbranch__row { flex-direction: column; gap: 20px; }
	.lii-hbranch__row::before,
	.lii-hbranch__col::before { display: none; }
	.lii-hbranch__col { padding-top: 0; }
}

/* --- 活動の詳細（写真＋テキストの横並び） -------------------------------- */

/*
 * Elementor のコンテナに勝つための書き方。
 *
 * frontend.min.css の .e-con-full.e-flex はクラス2つ（0,2,0）ある。
 * .elementor .lii-act-row も 0,2,0 で同点になり、後から読まれる Elementor が勝つ。
 * 同じクラスを2回書いて 0,3,0 に上げている（.lii-cta-band と同じ手）。
 *
 * flex-direction は var(--flex-direction) 経由で当たるので、
 * 変数側も一緒に上書きしておく。
 */
.elementor .lii-act-row.lii-act-row {
	display: flex;
	--flex-direction: row;
	flex-direction: row;
	align-items: center;
	gap: 32px;
	max-width: 840px;
	padding: 28px 0;
	border-top: 1px solid var(--lii-line-soft);
}

.elementor .lii-act-row__photo.lii-act-row__photo {
	flex: 0 0 300px;
	width: 300px;
	overflow: hidden;
}

/*
 * Elementor が .elementor img { height:auto } を当てており（特異性 0,1,1）、
 * height:100% では同じ特異性で競合して負ける。
 * そこで height は auto のまま使い、aspect-ratio を画像自体に持たせて
 * 高さを確定させる。object-fit:cover で切り抜く。
 * セレクタは 0,2,1 にして確実に勝たせる。
 */
.lii-act-row .lii-act-row__photo img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 3;
	object-fit: cover;
}

.elementor .lii-act-row__text.lii-act-row__text {
	flex: 1;
	min-width: 0;
}

/*
 * 写真の寄せ。HTML ウィジェットのときは img の style 属性に直接書いていたが、
 * 画像ウィジェットには属性を足せないので、CSSクラス欄に付けた修飾クラスで指定する。
 */
.lii-act-row__photo--shadan-hero img { object-position: center 45%; }
.lii-act-row__photo--pap-hero img { object-position: center 30%; }

.lii-act-row__cat {
	display: block;
	font-size: 11px;
	letter-spacing: 0.14em;
	color: var(--lii-gold-deep);
}

.elementor .lii-act-row h3 {
	font-family: var(--lii-serif);
	font-size: 18px;
	font-weight: 700;
	margin: 8px 0 14px;
	padding: 0;
	border: none;
	background: none;
}

.lii-act-row p {
	font-size: 13.5px;
	color: var(--lii-text-mute);
	margin-bottom: 16px;
}

@media (max-width: 767px) {
	.elementor .lii-act-row.lii-act-row { --flex-direction: column; flex-direction: column; align-items: stretch; gap: 20px; }
	.elementor .lii-act-row__photo.lii-act-row__photo { flex: none; }
}

/* --- 資料ダウンロードの一覧 --------------------------------------------- */
/* HTMLウィジェットに書き出した .lii-dl-list を装飾する */

.lii-dl-list {
	border-top: 1px solid var(--lii-line-soft);
	max-width: 800px;
}

.lii-dl-item {
	display: flex;
	align-items: center;
	gap: 18px;
	padding: 22px 4px;
	border-bottom: 1px solid var(--lii-line-soft);
}

.lii-dl-item__tag {
	flex: none;
	font-size: 10px;
	font-weight: 500;
	letter-spacing: 0.1em;
	color: var(--lii-gold-deep);
	border: 1px solid var(--lii-gold-pale);
	border-radius: 1px;
	padding: 2px 8px;
}

.lii-dl-item__body {
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.lii-dl-item__name {
	font-family: var(--lii-serif);
	font-size: 15.5px;
	font-weight: 700;
	color: var(--lii-ink);
}

.lii-dl-item__desc {
	font-size: 12.5px;
	color: var(--lii-text-mute);
}

.lii-dl-item__action {
	flex: none;
	font-size: 12px;
	letter-spacing: 0.08em;
	color: var(--lii-gold-deep);
}

@media (max-width: 575px) {
	.lii-dl-item { flex-wrap: wrap; gap: 10px; }
	.lii-dl-item__body { flex-basis: 100%; order: 2; }
	.lii-dl-item__action { order: 3; }
}

/* --- 濃紺の帯（ページ下部のCTA） ---------------------------------------- */
/*
 * ⚠️ この帯は Elementor のテーマスタイル（.elementor-kit-4429）と
 *    正面からぶつかる。キット側は見出しに本文色、ボタンに濃紺を当てており、
 *    どちらも濃紺の帯の上では読めなくなる。
 *    キットのセレクタはクラス1つ＋要素なので、こちらはクラスを重ねて勝たせる。
 */

.lii-cta-band {
	background: var(--lii-charcoal);
	color: var(--lii-paper);
	text-align: center;
}

/*
 * Elementor はコンテナの内側に text-align:var(--text-align) を当てており、
 * 既定値が initial なので、帯に書いた中央寄せが打ち消される。
 * 内側のコンテナを直接狙う。
 */
.lii-cta-band.lii-cta-band .e-con-inner {
	text-align: center;
}

/* キットの .elementor-kit-XXXX h2（クラス1つ＋要素）に勝たせる */
.lii-cta-band.lii-cta-band h2 {
	font-family: var(--lii-serif);
	font-size: 24px;
	font-weight: 700;
	color: var(--lii-paper);
}

.lii-cta-band.lii-cta-band p {
	margin-top: 14px;
	font-size: 13px;
	color: #a9b4c6;
}

/*
 * ボタンの上余白。デザイン案の .cta-band .btn は 28px だが、
 * 受講者の声のCTAと同じ 40px にそろえる（2026-09-10・山口判断）。
 * コンテナの gap 20px に上乗せされるので、書く値は差分の 20px。
 */
.lii-cta-band .elementor-widget-button {
	margin-top: 20px;
}

/*
 * 濃紺の帯の上では金色のボタンにする。
 * キット側は .elementor-kit-XXXX a.elementor-button（クラス2つ＋要素）で
 * 濃紺を当ててくるので、こちらはクラス3つ＋要素にする。
 */
.lii-cta-band.lii-cta-band a.elementor-button,
.lii-cta-band.lii-cta-band button.elementor-button,
.lii-cta-band.lii-cta-band input.elementor-button,
.lii-cta-band.lii-cta-band a.lii-btn--primary {
	background-color: var(--lii-gold);
	border-color: var(--lii-gold);
	color: var(--lii-charcoal);
}

.lii-cta-band.lii-cta-band a.elementor-button:hover,
.lii-cta-band.lii-cta-band button.elementor-button:hover,
.lii-cta-band.lii-cta-band input.elementor-button:hover,
.lii-cta-band.lii-cta-band a.lii-btn--primary:hover {
	background-color: var(--lii-gold-pale);
	border-color: var(--lii-gold-pale);
	color: var(--lii-charcoal);
}

/* --- 規約・ポリシー系の本文 --------------------------------------------- */
/*
 * 利用規約・プライバシーポリシーで共通して使う。
 * Elementor の「テキストエディター」ウィジェットに lii-terms を指定する。
 *
 * 条文の区切り線は h2 の上ボーダーで引いている。
 * モックは条文ごとに div で囲っているが、それだと藤間様が
 * テキストエディター（TinyMCE）で条文を足すたびに div を書く必要が出る。
 * 見出しを追加するだけで区切りが付く形にしてある。
 *
 * .elementor h2 の打ち消し（padding/border なし）と同じ詳細度だと
 * 記述順に左右されるため、.elementor を付けて確実に勝たせる。
 */

/* Elementor の max-width:100%（クラス4つぶん）に勝たせるため、クラスを重ねて底上げしている。詳しくは .lii-head の注記を参照。 */
.elementor.elementor .lii-terms.lii-terms.lii-terms {
	max-width: 820px;
}

.elementor .lii-terms h2 {
	margin: 0 0 14px;
	padding-top: 28px;
	border-top: 1px solid var(--lii-line-soft);
	font-family: var(--lii-serif);
	font-size: 17px;
	font-weight: 700;
	color: var(--lii-ink);
}

.elementor .lii-terms h2 + * {
	margin-top: 0;
}

/* 最初の条文は、上のリード文との間に線を引かない。 */
.elementor .lii-terms h2:first-child {
	padding-top: 0;
	border-top: none;
}

/* h2 の下、次の h2 までが 1 条文ぶんの間隔になるように余白を持たせる。 */
.elementor .lii-terms h2:not(:first-child) {
	margin-top: 28px;
}

/*
 * プライバシーポリシーだけは、最初のブロックにも線を引く。
 *
 * 案の作りが2ページで違う。
 *   規約           .tk-clause:first-of-type に border-top:none  → 最初の条文に線なし
 *   プライバシー   .pp-block に border-top のみ、除外なし        → すべてのブロックに線
 *
 * 本文が複数の text-editor ウィジェットに分かれていると、
 * ウィジェットごとに先頭の h2 が :first-child になり、上の除外に当たって線が消える。
 * プライバシーだけリード文が独立したウィジェット（lii-terms--intro）になっているので、
 * それを手がかりに、以降のブロックへ線を戻す。
 */
.elementor .lii-terms--intro ~ .lii-terms h2:first-child {
	padding-top: 28px;
	border-top: 1px solid var(--lii-line-soft);
}

/* プライバシーポリシーの小見出し（【お客様がご自身で〜】など） */
.elementor .lii-terms h3 {
	margin: 18px 0 8px;
	font-family: var(--lii-serif);
	font-size: 13.5px;
	font-weight: 700;
	color: var(--lii-gold-deep);
}

.lii-terms p {
	margin-bottom: 10px;
	font-size: 13px;
	line-height: 1.95;
	color: var(--lii-text-mute);
}

.lii-terms ol,
.lii-terms ul {
	margin: 8px 0 12px;
	padding-left: 22px;
}

.lii-terms ol li,
.lii-terms ul li {
	margin-bottom: 6px;
	font-size: 13px;
	line-height: 1.9;
	color: var(--lii-text-mute);
}

/* リード文だけ別ウィジェットにして、この修飾クラスを足す。
   1 段落目が見出し扱いになる（プライバシーポリシーの【〜表記】）。 */
/* クラスはウィジェットの外枠に付き、中身は .elementor-widget-container の
   中に入る。直接の子では届かないので、両方の形を書いておく。 */
.lii-terms--intro > p:first-child,
.lii-terms--intro > .elementor-widget-container > p:first-child {
	margin-bottom: 20px;
	font-family: var(--lii-serif);
	font-size: 19px;
	font-weight: 700;
	color: var(--lii-ink);
}

.lii-terms--intro p {
	font-size: 13px;
	line-height: 1.95;
}

/* --- 特定商取引法表記の表 ----------------------------------------------- */
/*
 * テキストエディターウィジェットに lii-spec を指定する。
 * 表そのものは TinyMCE の表ツールで編集できるので、
 * 見た目だけをここで当てて、markup は素の table のままにしている。
 */

/* Elementor の max-width:100%（クラス4つぶん）に勝たせるため、クラスを重ねて底上げしている。詳しくは .lii-head の注記を参照。 */
.elementor.elementor .lii-spec.lii-spec.lii-spec {
	max-width: 820px;
}

.lii-spec table {
	width: 100%;
	border-collapse: collapse;
	font-size: 13px;
}

/* 親テーマが table :is(th,td) に font-size を当ててくるので、
   td 側にも明示する（table への指定は継承されない）。 */
.lii-spec td {
	padding: 16px 18px;
	font-size: 13px;
	border-bottom: 1px solid var(--lii-line-soft);
	line-height: 1.9;
	color: var(--lii-text-mute);
}

.lii-spec tr:last-child td {
	border-bottom: none;
}

/* 上寄せは見出しセルだけ。内容セルは案と同じく既定（中央）にする。 */
.lii-spec td:first-child {
	width: 28%;
	background: var(--lii-parchment);
	font-weight: 700;
	color: var(--lii-charcoal);
	vertical-align: top;
}

@media (max-width: 575px) {
	.lii-spec td,
	.lii-spec td:first-child {
		display: block;
		width: auto;
	}

	.lii-spec td:first-child {
		border-bottom: none;
	}
}

/* ==========================================================================
   既存の問い合わせフォーム（*_toiawase の各ページ／フォームID 5052-5054）
   フォームの中身は <p>ラベル<br><input> の素のHTMLで、クラスが無い。
   MW WP Form の外枠（.mw_wp_form）を起点に当てる。

   ⚠️ .lii-oldform の中だけに限定している。この目印が無いと
      お問い合わせページ（.lii-form）にも当たってしまい、
      ラベルと入力欄の間隔が広がる。クラスはテンプレート側の
      ショートコードウィジェットに付けている。
   ========================================================================== */

.lii-oldform .mw_wp_form {
	max-width: 560px;
}

.lii-oldform .mw_wp_form form p {
	margin-bottom: 18px;
	font-size: 11.5px;
	line-height: 2;
	color: var(--lii-text-mute);
}

.lii-oldform .mw_wp_form input[type="text"],
.lii-oldform .mw_wp_form input[type="email"],
.lii-oldform .mw_wp_form input[type="tel"],
.lii-oldform .mw_wp_form select,
.lii-oldform .mw_wp_form textarea {
	box-sizing: border-box;
	width: 100%;
	margin-top: 6px;
	padding: 12px 14px;
	border: 1px solid var(--lii-line-soft);
	border-radius: 1px;
	background: var(--lii-paper);
	font-family: var(--lii-sans);
	font-size: 13px;
	color: var(--lii-ink);
	transition: border-color 0.2s;
}

.lii-oldform .mw_wp_form input:focus,
.lii-oldform .mw_wp_form select:focus,
.lii-oldform .mw_wp_form textarea:focus {
	border-color: var(--lii-gold-deep);
	outline: none;
}

.lii-oldform .mw_wp_form textarea {
	min-height: 160px;
	line-height: 1.9;
}

/* 電話番号は3つに分かれている。幅100%だと縦に並んでしまう。 */
.lii-oldform .mw_wp_form .mwform-tel-field {
	display: inline-flex;
	align-items: center;
	gap: 8px;
}

.lii-oldform .mw_wp_form .mwform-tel-field input[type="text"] {
	width: 6em;
	margin-top: 0;
}

/* 送信・確認・戻るのボタン */
.lii-oldform .mw_wp_form input[type="submit"],
.lii-oldform .mw_wp_form button[type="submit"] {
	width: auto;
	margin-top: 10px;
	padding: 15px 30px;
	border: 1px solid var(--lii-charcoal);
	border-radius: 1px;
	background: var(--lii-charcoal);
	color: var(--lii-paper);
	font-family: var(--lii-sans);
	font-size: 12.5px;
	font-weight: 500;
	letter-spacing: 0.1em;
	line-height: 1.6;
	cursor: pointer;
	transition: background 0.3s, border-color 0.3s;
}

.lii-oldform .mw_wp_form input[type="submit"]:hover,
.lii-oldform .mw_wp_form button[type="submit"]:hover {
	background: var(--lii-gold-deep);
	border-color: var(--lii-gold-deep);
}

/* 「戻る」は枠線のボタンにして、送信と区別する */
.lii-oldform .mw_wp_form input[name="submitBack"] {
	margin-right: 10px;
	background: var(--lii-paper);
	color: var(--lii-charcoal);
}

.lii-oldform .mw_wp_form input[name="submitBack"]:hover {
	background: var(--lii-parchment);
	border-color: var(--lii-charcoal);
	color: var(--lii-charcoal);
}

/* 入力エラー */
.lii-oldform .mw_wp_form .error {
	display: block;
	margin-top: 6px;
	font-size: 11.5px;
	color: #c0392b;
}

/* --- お問い合わせフォーム ------------------------------------------------- */
/*
 * MW WP Form の出力に当てる。フォーム本文の HTML は
 * MW WP Form 側で書くので、ここではその構造に合わせた見た目だけを持つ。
 *
 * 既存の各種お問い合わせページ（*_toiawase）はプラグイン既定の
 * 見た目のままなので、そちらには影響しない（.lii-form が付かないため）。
 */

.lii-form {
	display: flex;
	max-width: 560px;
	flex-direction: column;
	gap: 16px;
	margin-top: 8px;
}

.lii-form__row {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.lii-form__row > label {
	font-size: 11.5px;
	color: var(--lii-text-mute);
}

/*
 * フォーム本文（MW WP Form 側で書く HTML）は wpautop を通る。
 * ラベルとショートコードが改行で分かれているため、そこに <br> が生まれる。
 *
 *   <div class="lii-form__row"><label>お名前…</label>
 *   [mwform_text …]</div>
 *
 * この行は縦並びの flex なので、<br> が3つ目の項目として1行ぶんの高さを占め、
 * さらに前後に gap:6px が付く。設計の 6px が 35px 前後まで開く。
 * 間隔は gap だけで作りたいので、中の <br> は消す。
 * 段落マージンではないので、p への指定では直らない（2026-09-12 に一度外した）。
 */
.lii-form br {
	display: none;
}

/* 必須ラベル。デザイン案には無いが、入力漏れを減らすために足している。 */
.lii-form__req {
	margin-left: 8px;
	padding: 2px 7px;
	border: 1px solid var(--lii-gold-deep);
	font-size: 10px;
	letter-spacing: 0.08em;
	color: var(--lii-gold-deep);
}

.lii-form input[type="text"],
.lii-form input[type="email"],
.lii-form input[type="tel"],
.lii-form select,
.lii-form textarea {
	width: 100%;
	padding: 12px 14px;
	border: 1px solid var(--lii-line-soft);
	border-radius: 1px;
	background: var(--lii-paper);
	font-family: var(--lii-sans);
	font-size: 13px;
	color: var(--lii-ink);
	transition: border-color 0.2s;
}

.lii-form input:focus,
.lii-form select:focus,
.lii-form textarea:focus {
	border-color: var(--lii-gold-deep);
	outline: none;
}

.lii-form textarea {
	min-height: 100px;
	line-height: 1.9;
	resize: vertical;
}

/* 電話番号は 3 分割で出力されるので、横に並べる。 */
.lii-form .mwform-tel-field {
	display: flex;
	align-items: center;
	gap: 8px;
}

.lii-form .mwform-tel-field input {
	width: auto;
	flex: 1;
}

.lii-form__actions {
	margin-top: 8px;
}

.lii-form input[type="submit"],
.lii-form button[type="submit"] {
	display: inline-flex;
	width: auto;
	padding: 15px 30px;
	border: 1px solid var(--lii-charcoal);
	border-radius: 1px;
	background: var(--lii-charcoal);
	font-family: var(--lii-sans);
	font-size: 12.5px;
	letter-spacing: 0.1em;
	color: var(--lii-paper);
	cursor: pointer;
	transition: background 0.3s, border-color 0.3s;
}

.lii-form input[type="submit"]:hover,
.lii-form button[type="submit"]:hover {
	border-color: var(--lii-gold-deep);
	background: var(--lii-gold-deep);
}

/* 「戻る」ボタンは主張を弱める。 */
.lii-form input[name="submitBack"] {
	margin-right: 12px;
	border-color: var(--lii-line);
	background: none;
	color: var(--lii-text-mute);
}

.lii-form input[name="submitBack"]:hover {
	border-color: var(--lii-charcoal);
	background: none;
	color: var(--lii-charcoal);
}

/* エラー表示 */
.lii-form .error {
	display: block;
	margin-top: 4px;
	font-size: 11.5px;
	color: #b4453a;
}

/* ==========================================================================
   7. TOPページ
   ========================================================================== */

/* --- 全幅の帯 ------------------------------------------------------------- */
/*
 * 全幅にする指定はここには置かない。
 * 100vw で親からはみ出させる手を使っていたが、100vw はスクロールバーの幅を
 * 含むため親要素の 50% と数px ずれ、セクションが左へ寄る原因になった。
 *
 * TOPは固定ページの「ページレイアウト」を Elementor 全幅にしてあるので、
 * Elementor のコンテナ設定（全幅／ボックス）だけで意図どおりに並ぶ。
 * lii-band は目印として残してあるが、幅の指定は持たせない。
 */

.elementor .lii-band--alt {
	background: var(--lii-parchment);
}

/* --- ヒーロー ------------------------------------------------------------- */
/*
 * 2枚の写真が5秒ごとに入れ替わる。JavaScript もスライダープラグインも使わない。
 * 写真だけで、文字は乗らない（デザイン案どおり）。
 *
 * 1枚目は常に表示したまま下に敷き、上に重ねた2枚目だけを出し入れする。
 * 2枚を別々にフェードさせると、切り替えの途中で両方が薄くなり地の色が透ける。
 */

.elementor .lii-hero.lii-hero {
	position: relative;
	display: flex;
	--flex-direction: row;
	flex-direction: row;
	height: min(94vh, 860px);
	min-height: 640px;
	align-items: center;
	overflow: hidden;
	color: var(--lii-paper);
}

/*
 * 画像ウィジェットにしたので、Elementor がウィジェットへ当てている
 * .e-con > .elementor-widget（0,2,0）に勝つ必要がある。
 * クラスを2回書いて 0,3,0 にする。
 * 効いていないと2枚が横に並び、重ならないまま交互に点滅する。
 */
.elementor .lii-hero__slide.lii-hero__slide {
	position: absolute;
	z-index: 0;
	inset: 0;
	opacity: 1;
}

/*
 * 上のスライドと同じ特異性（0,3,0）で後に書く。
 * 以前は animation の一括指定が .lii-hero__slide--2 { animation-delay } を
 * 特異性で上書きしてしまい、2枚が同時に消えていた（2026-09-15 修正）。
 */
.elementor .lii-hero__slide--2.lii-hero__slide--2 {
	z-index: 1;
	opacity: 0;
	animation: liiHeroSwap 10s infinite;
}

.elementor .lii-hero__slide.lii-hero__slide::after {
	position: absolute;
	background: rgba(13, 35, 64, 0.06);
	content: "";
	inset: 0;
}

/*
 * 画像ウィジェットは img を .elementor-widget-container で包む。
 * スライドは position:absolute で高さを持つが、包みは高さ auto なので
 * img の height:100% が潰れる。包みにも高さを渡す。
 */
.elementor .lii-hero__slide .elementor-widget-container {
	height: 100%;
}

.lii-hero .lii-hero__slide img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.lii-hero__slide--1 img { object-position: center 22%; }
.lii-hero__slide--2 img { object-position: center 12%; }

/* 0〜4秒 1枚目 → 4〜5秒で重なる → 5〜9秒 2枚目 → 9〜10秒で1枚目に戻る */
@keyframes liiHeroSwap {
	0%   { opacity: 0; }
	40%  { opacity: 0; }
	50%  { opacity: 1; }
	90%  { opacity: 1; }
	100% { opacity: 0; }
}

/* アニメーションを減らす設定の閲覧者には、1枚目を出したまま止める。 */
@media (prefers-reduced-motion: reduce) {
	.elementor .lii-hero__slide--2.lii-hero__slide--2 {
		opacity: 0;
		animation: none;
	}
}

@media (max-width: 767px) {
	.lii-hero {
		height: min(72vh, 640px);
		min-height: 480px;
	}
}

/* --- 冒頭のリード（中央寄せ） --------------------------------------------- */

.elementor .lii-intro h2 {
	max-width: 760px;
	margin: 0 auto;
	font-family: var(--lii-serif);
	font-size: clamp(22px, 3vw, 30px);
	font-weight: 700;
	line-height: 1.7;
	color: var(--lii-charcoal);
	text-align: center;
}

/* Elementor の max-width:100%（クラス4つぶん）に勝たせるため、クラスを重ねて底上げしている。詳しくは .lii-head の注記を参照。 */
.elementor.elementor .lii-intro-lead.lii-intro-lead.lii-intro-lead {
	max-width: 560px;
	margin: 0 auto;
	font-size: 14px;
	color: var(--lii-text-mute);
	text-align: center;
}

/* --- 理念の引用ブロック --------------------------------------------------- */

/* Elementor の max-width:100%（クラス4つぶん）に勝たせるため、クラスを重ねて底上げしている。詳しくは .lii-head の注記を参照。 */
.elementor.elementor .lii-idea.lii-idea.lii-idea {
	max-width: 960px;
	margin: 0 auto;
	text-align: center;
}

.lii-idea p {
	margin-bottom: 26px;
	font-size: 16px;
	/* デザイン案の .idea-body は 400。body の 300 のままだと細く見える。 */
	font-weight: 400;
	letter-spacing: 0.01em;
	line-height: 2.4;
	color: var(--lii-charcoal);
}

.lii-idea p:last-child { margin-bottom: 0; }

/* --- セクション見出しのまとまり ------------------------------------------- */
/* アイブロウ＋H2＋説明文。左寄せで最大660px。 */

/* 下余白はモックの .head（margin-bottom:44px）から、
   Elementor のコンテナ既定の隙間ぶんを引いた値。 */
/*
 * Elementor がコンテナ直下のウィジェットに max-width:100% を当ててくるため、
 * クラス1つでは幅の指定が届かない。同じクラスを重ねて詳細度を上げている。
 */
/*
 * Elementor が
 *   .e-con.e-con>.e-con-inner>.elementor-widget,
 *   .elementor.elementor .e-con>.elementor-widget { max-width:100% }
 * を持っている。同じクラスを2回書いて詳細度を稼いでおり、クラス4つぶん。
 * こちらは .elementor を2回、.lii-head を3回でクラス5つぶんにして勝たせる。
 * 構造に依存させたくないので、子結合子（>）は使っていない。
 *
 * margin-bottom が案の 44px でなく 24px なのは、Elementor のコンテナが
 * gap で 20px 空けるため。24 + 20 = 44 で案と同じになる。
 */
.elementor.elementor .lii-head.lii-head.lii-head {
	max-width: 660px;
	margin-bottom: 24px;
}

/* アイブロウと見出しの間隔。デザイン案の .head .eyebrow に合わせる。 */
.lii-head .lii-eyebrow {
	margin-bottom: 14px;
}

.elementor .lii-head h2 {
	font-family: var(--lii-serif);
	font-size: clamp(23px, 3vw, 30px);
	font-weight: 700;
	line-height: 1.6;
}

.lii-head p {
	margin-top: 16px;
	font-size: 14px;
	color: var(--lii-text-mute);
}

/* --- 3つの活動カード ------------------------------------------------------ */
/*
 * 罫線は gap:2px と背景色で作っている。各カードに border を引くと
 * 隣り合う辺が二重になるため。
 */

.elementor .lii-act-cards.lii-act-cards.lii-act-cards {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 2px;
	border: 1px solid var(--lii-line-soft);
	background: var(--lii-line-soft);
}

.elementor .lii-act-cards__card.lii-act-cards__card {
	min-width: 0;
	position: relative;
	display: flex;
	--flex-direction: column;
	flex-direction: column;
	background: var(--lii-paper);
	color: var(--lii-ink);
	text-decoration: none;
	transition: box-shadow 0.25s, transform 0.25s;
}

.lii-act-cards__card:hover {
	z-index: 2;
	box-shadow: 0 16px 32px rgba(13, 35, 64, 0.16);
	transform: translateY(-4px);
}

/* 写真の枠。比率は .lii-act-row と同じ考え方で img 自身に持たせる。 */
.lii-act-cards__photo {
	overflow: hidden;
}

/* 本文側。行の間隔は各行の margin が持つので gap は 0 にする。 */
.elementor .lii-act-cards__body.lii-act-cards__body {
	gap: 0;
	padding: 24px 22px 28px;
}

.elementor .lii-act-cards .lii-act-cards__photo img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	transition: transform 0.5s;
}

.lii-act-cards__photo--shadan-hero img { object-position: center 45%; }
.lii-act-cards__photo--pap-hero img { object-position: center 30%; }

/*
 * カード全体をクリックできるようにする。
 *
 * もとの案はカード全体が <a> だった。Elementor のコンテナにもリンク設定はあるが、
 * 実機では <a> にならなかった。写真側にリンクを置く手も試したが、
 * .lii-act-cards__photo が overflow:hidden（ホバー拡大のはみ出し防止）なので、
 * 擬似要素を広げても写真の枠で切り取られる。
 * そこで団体名の見出しにリンクを持たせ、その擬似要素をカード全面へ広げている。
 * カードは position:relative なので、位置はカードを基準に決まる。
 * （いずれも 2026-09-13 に実機で確認）
 *
 * 利点はリンク先を管理画面から編集できること。
 * 代わりにカード内の文字は選択できなくなる（クリック領域が上に乗るため）。
 */
.lii-act-cards__photo a {
	display: block;
}

.elementor .lii-act-cards__entity a {
	color: inherit;
	text-decoration: none;
}

/*
 * 擬似要素の基準をカードに引き戻す。
 *
 * position:absolute は「いちばん近い、位置指定された祖先」を基準にする。
 * Elementor はウィジェットに position:relative を当てるので、そのままだと
 * 見出しウィジェットの箱が基準になり、文字の範囲しか覆えない。
 * 見出しからカードまでの間を静的に戻すと、基準がカード（position:relative）になる。
 * どれが位置指定されているかは版によって違うので、間の3つとも明示する。
 */
.elementor .lii-act-cards__entity.lii-act-cards__entity,
.elementor .lii-act-cards__entity .elementor-widget-container,
.elementor .lii-act-cards__entity .elementor-heading-title {
	position: static;
}

.lii-act-cards__entity a::after {
	position: absolute;
	content: "";
	inset: 0;
}

.lii-act-cards__card:hover .lii-act-cards__photo img {
	transform: scale(1.06);
}

.lii-act-cards__cat {
	font-family: var(--lii-serif);
	font-size: 21px;
	font-weight: 700;
	color: var(--lii-charcoal);
}

.lii-act-cards__sub {
	margin-top: 16px;
	font-size: 12.5px;
	line-height: 1.6;
	color: var(--lii-text-mute);
}

.lii-act-cards__entity {
	margin-top: 4px;
	font-size: 13.5px;
	font-weight: 700;
	line-height: 1.5;
	color: var(--lii-gold-deep);
}

.lii-act-cards__entity .lii-arrow-ic {
	margin-left: 4px;
	font-size: 11px;
	opacity: 0;
	transition: opacity 0.25s, margin 0.25s;
}

.lii-act-cards__card:hover .lii-act-cards__entity .lii-arrow-ic {
	margin-left: 8px;
	opacity: 1;
}

/* --- 著書紹介 ------------------------------------------------------------- */

.elementor .lii-books.lii-books.lii-books {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 28px;
}

.elementor .lii-books__card.lii-books__card {
	display: flex;
	--flex-direction: row;
	flex-direction: row;
	gap: 24px;
	padding: 28px;
	border: 1px solid var(--lii-line-soft);
	border-radius: 10px;
	background: var(--lii-paper);
}

.lii-books__cover {
	flex: none;
	width: 128px;
	background: #fff;
}

.lii-books .lii-books__cover img {
	display: block;
	width: 100%;
	border: 1px solid rgba(13, 35, 64, 0.08);
	border-radius: 2px;
	aspect-ratio: 2 / 3;
	object-fit: contain;
	box-shadow: 0 10px 24px rgba(13, 35, 64, 0.18), 0 2px 6px rgba(13, 35, 64, 0.10);
}

/*
 * ウィジェットの外枠に付けた margin-bottom は Elementor に 0 にされる。
 * margin-top は残る（活動カードの説明文で効いている）。
 * そのため .lii-books__pub の下14px、.lii-voices__role の下20px が消えていた。
 * 親コンテナの gap も 0 なので、次の要素の margin-top で持たせる（2026-09-14）。
 */
.elementor .lii-books__body > .lii-books__desc {
	margin-top: 14px;
}

.elementor .lii-voices__card > .lii-voices__text {
	margin-top: 20px;
}

.elementor .lii-books__body.lii-books__body {
	flex: 1;
	min-width: 0;
	gap: 0;
	padding-top: 4px;
}

.elementor .lii-books__body h3 {
	margin: 0 0 10px;
	font-family: var(--lii-serif);
	font-size: 17px;
	font-weight: 700;
}

.lii-books__pub {
	margin-bottom: 14px;
	font-size: 11px;
	line-height: 1.7;
	color: var(--lii-text-soft);
}

.lii-books__desc {
	margin-bottom: 20px;
	font-size: 12px;
	line-height: 1.85;
	color: var(--lii-text-mute);
}

.elementor .lii-books__actions.lii-books__actions {
	display: flex;
	--flex-direction: row;
	flex-direction: row;
	flex-wrap: wrap;
	gap: 10px;
	/* 親の .lii-books__body は gap:0 なので、ここで説明文との間隔をすべて持つ。 */
	margin-top: 20px;
}

.lii-books__actions a.lii-btn,
.elementor .lii-books__actions a.elementor-button {
	height: 40px;
	padding: 11px 20px;
	border-radius: 5px;
	font-size: 12px;
}

/*
 * ボタンウィジェット版の文字の縦位置。
 * a.lii-btn は inline-flex で中央に揃うが、Elementor のボタンは inline-block。
 * こちらで当てている line-height:2（12px で 24px）に上下 padding 11px が乗って
 * 固定高さ 40px をはみ出し、文字が下に寄っていた（2026-09-14 確認）。
 * flex で中央に置き、上下の padding は外す。
 */
.elementor .lii-books__actions a.elementor-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding-top: 0;
	padding-bottom: 0;
}

/* --- 知る・学ぶ・依頼する ------------------------------------------------- */

/* 1fr の下限は auto。折り返せない長いリンク名があるとトラックが膨らんで
   3列の幅が揃わなくなるので、下限を 0 にする。 */
.elementor .lii-explore.lii-explore.lii-explore {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 24px;
}

.elementor .lii-explore__card.lii-explore__card {
	min-width: 0;
	display: flex;
	--flex-direction: column;
	flex-direction: column;
	gap: 0;
	padding: 30px 24px;
	border: 1px solid var(--lii-line-soft);
	background: var(--lii-paper);
	text-align: center;
}

.lii-explore__verb {
	font-family: var(--lii-serif);
	font-size: 20px;
	font-weight: 700;
	color: var(--lii-charcoal);
}

/* 高さを固定して、3枚のリンクの開始位置を揃える。 */
.lii-explore__sub {
	height: 64px;
	margin: 10px 0 0;
	overflow: hidden;
	font-size: 12.5px;
	line-height: 1.7;
	color: var(--lii-text-mute);
}

.lii-explore__links {
	margin-top: 24px;
	border-top: 1px solid var(--lii-line-soft);
}

.lii-explore__links a {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 15px 10px;
	border-bottom: 1px solid var(--lii-line-soft);
	gap: 8px;
	font-size: 12.5px;
	color: var(--lii-charcoal);
	text-decoration: none;
	transition: background 0.2s, color 0.2s;
}

.lii-explore__links a:hover {
	background: var(--lii-parchment);
	color: var(--lii-gold-deep);
}

.lii-explore__links a .lii-arrow {
	transition: transform 0.2s;
}

.lii-explore__links a:hover .lii-arrow {
	transform: translateX(4px);
}

/* --- 動画の並び ----------------------------------------------------------- */

.lii-videos {
	display: flex;
	max-width: 800px;
	flex-wrap: wrap;
	justify-content: center;
	margin: 28px auto 0;
	gap: 28px;
}

.lii-videos__item { width: 370px; }
.lii-videos__item--large { width: 100%; max-width: 600px; }

.lii-videos__frame {
	width: 100%;
	background: var(--lii-parchment-2);
	aspect-ratio: 16 / 9;
}

.lii-videos__frame iframe {
	display: block;
	width: 100%;
	height: 100%;
	border: none;
}

.lii-videos__title {
	margin-top: 12px;
	font-size: 12.5px;
	color: var(--lii-text-mute);
	text-align: center;
}

/* --- 受講者の声 ----------------------------------------------------------- */

.elementor .lii-voices.lii-voices.lii-voices {
	display: grid;
	max-width: 800px;
	grid-template-columns: 1fr 1fr;
	margin: 28px auto 0;
	gap: 24px;
}

.elementor .lii-voices__card.lii-voices__card {
	gap: 0;
	padding: 34px 32px;
	border: 1px solid var(--lii-line-soft);
	border-radius: 6px;
	background: var(--lii-paper);
}

.lii-voices__role {
	margin-bottom: 20px;
	padding-bottom: 18px;
	border-bottom: 1px solid var(--lii-line-soft);
	font-size: 12.5px;
	font-weight: 700;
	color: var(--lii-gold-deep);
}

.lii-voices__role span {
	display: inline;
	margin-left: 10px;
	font-weight: 400;
	color: var(--lii-text-soft);
}

.lii-voices__text {
	font-size: 13.5px;
	line-height: 2;
	color: var(--lii-ink);
}

/* --- 枠線のボタン --------------------------------------------------------- */

a.lii-btn--line,
.elementor .lii-btn-line a.elementor-button {
	border: 1px solid var(--lii-charcoal);
	background: var(--lii-paper);
	color: var(--lii-charcoal);
}

a.lii-btn--line:hover,
.elementor .lii-btn-line a.elementor-button:hover {
	background: var(--lii-parchment);
	color: var(--lii-charcoal);
}

a.lii-btn .lii-arrow {
	transition: transform 0.3s;
}

a.lii-btn:hover .lii-arrow {
	transform: translateX(4px);
}

/* --- TOPのレスポンシブ ---------------------------------------------------- */

@media (max-width: 767px) {
	.elementor .lii-act-cards.lii-act-cards.lii-act-cards,
	.elementor .lii-explore.lii-explore.lii-explore,
	.elementor .lii-books.lii-books.lii-books,
	.elementor .lii-voices.lii-voices.lii-voices { grid-template-columns: 1fr; }

	.elementor .lii-books__card.lii-books__card { --flex-direction: column; flex-direction: column; }
	.lii-books__cover { width: 100px; }

	.lii-videos__item { width: 100%; max-width: 370px; }

	.lii-explore__sub { height: auto; }
}


/* --- TOPだけテーマ側の幅制限を外す --------------------------------------- */
/*
 * Elementor の「全幅」ページレイアウトは Lightning では使えない。
 * Lightning の header.php は <head> と <body> の開始タグしか出力せず、
 * 見えるヘッダーは index.php から template-parts/site-header.php を
 * 呼んで描いている。Elementor 全幅テンプレートは get_header() しか
 * 呼ばないため、ヘッダーとフッターが消える。
 *
 * そこでページレイアウトは「デフォルト」のまま、Elementor で作った
 * ページに限って、テーマ側のコンテナ幅（1120px）と左右余白を外す。
 *
 * 絞り込みには Elementor が付ける body クラス elementor-page を使う。
 * 会員ページ・カート・決済など Elementor で作っていないページは
 * テーマの幅指定のまま残す必要があるため。
 *
 * これで Elementor 側の指定だけで幅が決まる：
 *   全幅コンテナ   → 画面幅いっぱい（帯の背景がここまで広がる）
 *   ボックスコンテナ → サイト設定のコンテンツ幅 1120px で中央寄せ
 *
 * 上下の余白を消しているのは TOP だけ。ヒーローをヘッダーの直下から
 * 始めるための指定で、他のページには不要なため .home.page のまま残す。
 * （.home だけだと投稿一覧がトップの場合にも当たるので .page と組にしている）
 */

.elementor-page .site-body > .site-body-container.container {
	max-width: none;
	padding-right: 0;
	padding-left: 0;
}

/*
 * 上の余白はパンくず側で作る（#breadcrumb の padding-top:80px）。
 * 親テーマの .site-body は上に 56px 持っており、両方効くと
 * デザイン案より 56px ぶん空く。Elementor ページに限って消す。
 */
.elementor-page .site-body {
	padding-top: 0;
}

/* ヒーローをヘッダーの直下から始めるため、TOPは下の余白も消す。 */
.home.page .site-body {
	padding-top: 0;
	padding-bottom: 0;
}

.home.page .main-section {
	margin-top: 0;
	margin-bottom: 0;
}

/* --- ボックスコンテナの左右余白 ------------------------------------------ */
/*
 * Elementor の「ボックス」コンテナは、サイト設定のコンテンツ幅 1120px で
 * 中央寄せになる。ただし左右の余白は持たないので、中身も 1120px になる。
 *
 * デザイン案の .wrap は max-width:1120px に padding:0 40px なので、
 * 文字が乗る幅は 1040px。80px の差が出るため、ここで揃える。
 *
 * 画面が狭いときに文字が端に張り付くのを防ぐ役割も兼ねる。
 * （テーマ側の .container の左右余白を TOP では外しているため）
 *
 * 全幅コンテナには .e-con-inner が生成されないので、
 * ヒーローや帯の背景はこの指定の影響を受けない。
 */

.elementor-page .elementor .e-con-inner {
	padding-right: 40px;
	padding-left: 40px;
}

/*
 * ドロップダウンを開いても横にずれないようにする。
 *
 * 親テーマは開くときに overflow-y:auto へ切り替える
 * （.device-pc .global-nav-list>li:hover>.sub-menu）。
 * 閉じている間は max-height:0 なので中身が必ず溢れ、
 * ブラウザはスクロールバー分の幅を width:max-content に足す。
 * 開くと中身が収まって不要になり、幅が15px縮む。
 * 中央寄せ（translateX(-50%)）のため、その半分だけ横に動いて見えていた。
 *
 * 開閉のどちらでもスクロールバーを出さなければ、幅は変わらない。
 *
 * ※ 代わりに、項目が増えて max-height:80vh を超えると
 *    はみ出した分が見えなくなる。ヘッダーのドロップダウンは
 *    5項目前後なので当面問題ないが、増やすときはここを見直すこと。
 *    デザイン案のドロップダウンにもスクロールは無い。
 */

.device-pc .site-header .global-nav-list > li:hover > ul.sub-menu,
.device-pc .site-header .global-nav-list > li:focus-within > ul.sub-menu {
	overflow-y: hidden;
}

/*
 * 閉じている間は当たり判定を消す。
 *
 * max-height:0 で高さを潰しても、上下のパディング（10px×2）は残るため、
 * 見えない20pxの帯がナビの下に居座る。その帯は隣の項目の li の中にあるので、
 * マウスが触れると li:hover が成立し、隣のドロップダウンが開いてしまう。
 *
 * ドロップダウンは項目より横幅が広く、隣の項目の下まで張り出しているため、
 * 開いているドロップダウンの右端が隣の帯と重なって選べなくなっていた。
 *
 * opacity:0 では当たり判定は消えないので pointer-events で消す。
 */
.site-header .global-nav-list > li > ul.sub-menu {
	pointer-events: none;
}

.device-pc .site-header .global-nav-list > li:hover > ul.sub-menu,
.device-pc .site-header .global-nav-list > li:focus-within > ul.sub-menu {
	pointer-events: auto;
}


/* ==========================================================================
   8. 動画・コンテンツ（/contents/）
   ========================================================================== */

/* --- 大きく見せる1本 ------------------------------------------------------ */

.lii-video-hero {
	max-width: 800px;
	margin-top: 20px;
}

.lii-video-cap {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	margin-top: 16px;
	gap: 16px;
}

.elementor .lii-video-cap h3 {
	margin: 0;
	font-family: var(--lii-serif);
	font-size: 20px;
	font-weight: 700;
}

/* --- おすすめ動画のタイル ------------------------------------------------- */

.lii-video-grid {
	display: grid;
	max-width: 800px;
	grid-template-columns: 1fr 1fr;
	gap: 26px 30px;
}

.lii-video-tile {
	display: block;
	color: var(--lii-ink);
}

.elementor .lii-video-tile h4 {
	margin: 12px 0 0;
	font-family: var(--lii-serif);
	font-size: 14.5px;
	font-weight: 700;
	line-height: 1.6;
}

/* --- シリーズの入口 ------------------------------------------------------- */
/*
 * デザイン案には無い要素。各シリーズの商品一覧（商品カテゴリーの
 * アーカイブ）への入口として追加している。
 *
 * 現行サイトのシリーズ入口4本はいずれも空か404で、実際に商品が並ぶのは
 * /product-category/<親>/<シリーズ>/ だけ。壊れていた導線を作り直す位置づけ。
 *
 * カード1枚は Elementor のコンテナで作る。中身は
 *   HTMLウィジェット（ダイジェスト動画）
 *   見出しウィジェット（シリーズ名）
 *   テキストエディター（説明）← 藤間様がここを書き換える
 *   ボタンウィジェット（商品一覧へ）
 * の4つ。説明をテキストエディターにしているのは、HTMLを触らずに
 * 編集できるようにするため。
 */

/*
 * Elementor のコンテナは中身を .e-con-inner に入れて出力する。
 * レイアウトの指定はコンテナ本体ではなく、そちらに当てないと効かない。
 * （本体に当てると .e-con-inner 1個だけが子になり、中は縦積みのまま）
 */

.elementor .lii-series > .e-con-inner {
	display: block;
}

.elementor .lii-series__card {
	width: 100%;
	max-width: 100%;
	padding: 36px 0;
	border: none;
	border-top: 1px solid var(--lii-line-soft);
	background: none;
}

.elementor .lii-series__card:first-child {
	padding-top: 8px;
	border-top: none;
}

/*
 * 1シリーズ＝1行。
 *   シリーズ名（横幅いっぱい）
 *   動画　説明文
 *   　　　ボタン
 *
 * ウィジェットの並び順は 動画・見出し・説明・ボタン なので、
 * 見出しだけ1行目へ引き上げる形で置いている。
 */
.elementor .lii-series__card > .e-con-inner {
	display: grid;
	grid-template-columns: minmax(0, 440px) 1fr;
	align-content: start;
	column-gap: 40px;
	row-gap: 0;
}

.elementor .lii-series__card > .e-con-inner > :nth-child(1) {
	grid-column: 1;
	grid-row: 2 / span 2;
	align-self: start;
}

.elementor .lii-series__card > .e-con-inner > :nth-child(2) {
	grid-column: 1 / -1;
	grid-row: 1;
}

.elementor .lii-series__card > .e-con-inner > :nth-child(3) {
	grid-column: 2;
	grid-row: 2;
}

.elementor .lii-series__card > .e-con-inner > :nth-child(4) {
	grid-column: 2;
	grid-row: 3;
	margin-top: 20px;
	align-self: start;
	justify-self: start;
}

/* 見出しウィジェットの実体を狙う。H2 でも H3 でも同じ見た目にするため。 */
.elementor .lii-series__name .elementor-heading-title {
	margin: 0 0 28px;
	font-family: var(--lii-serif);
	font-size: 22px;
	font-weight: 700;
	line-height: 1.6;
	color: var(--lii-ink);
}

.lii-series__desc p {
	margin: 0;
	font-size: 13.5px;
	line-height: 2;
	color: var(--lii-text-mute);
}

/*
 * シリーズカードはタブレットでも1列にする。
 * 左の動画が最大440pxの固定幅なので、768px（iPad縦）で2列のままだと
 * 右の説明文に残る幅がほとんど無く、1〜2文字ごとに折り返していた
 * （2026-09-14 確認。以前は767pxで切り替えていた）。
 * 991px はヘッダーがハンバーガーに切り替わる幅と同じ。
 * 992px以上なら本文幅が900px前後あり、動画と説明文が無理なく並ぶ。
 */
@media (max-width: 991px) {
	/* 1列。見出しを先頭に、続けて動画・説明・ボタン。 */
	.elementor .lii-series__card > .e-con-inner {
		grid-template-columns: 1fr;
		row-gap: 16px;
	}

	.elementor .lii-series__card > .e-con-inner > :nth-child(1) { grid-column: 1; grid-row: 2; }
	.elementor .lii-series__card > .e-con-inner > :nth-child(2) { grid-column: 1; grid-row: 1; }
	.elementor .lii-series__card > .e-con-inner > :nth-child(3) { grid-column: 1; grid-row: 3; }
	.elementor .lii-series__card > .e-con-inner > :nth-child(4) { grid-column: 1; grid-row: 4; margin-top: 4px; }

	.elementor .lii-series__name .elementor-heading-title { margin-bottom: 0; }
}

@media (max-width: 767px) {
	.lii-video-grid { grid-template-columns: 1fr; }

	.lii-video-cap { justify-content: flex-start; }
}

/* --- 商品カテゴリー（シリーズ）のアーカイブ見出し ------------------------- */
/*
 * シリーズの商品一覧は WooCommerce が <h1 class="page-title"> を出しており、
 * Elementor のテーマスタイルが効かない。他のページと同じ見出しに揃える。
 *
 * 金の英字サブタイトルは ::before で足している。
 * WooCommerce にもテーマにも、ここへ要素を差し込むフックが無いため。
 * 装飾目的の文字なので DOM に無くても実害は小さいが、
 * 選択・コピーはできない。文言を本文として扱いたくなったら、
 * WooCommerce のテンプレートを子テーマへ複製する方針に切り替えること。
 *
 * 出し分けには body の term-<スラッグ> を使っている。
 * ※ 日本語スラッグだと非ASCIIが落ちてクラス名が壊れる。
 *   2026-09-09 に英字スラッグへ変更済みなので成立している。
 */

.tax-product_cat .entry-body .page-title,
.post-type-archive-product .entry-body .page-title {
	margin: 0 0 44px;
	padding: 0;
	border: none;
	background: none;
	font-family: var(--lii-serif);
	font-size: 44px;
	font-weight: 700;
	line-height: 1.4;
	color: var(--lii-ink);
}

.tax-product_cat .entry-body .page-title::before,
.post-type-archive-product .entry-body .page-title::before {
	display: block;
	margin-bottom: 14px;
	content: "CONTENTS";
	font-family: var(--lii-sans);
	font-size: 11px;
	font-weight: 500;
	letter-spacing: 0.34em;
	line-height: 1;
	color: var(--lii-gold-deep);
}

/* シリーズごとの英字。増えたらここに足す。 */

.term-bs-pl .entry-body .page-title::before {
	content: "BS/PL SERIES";
}

.term-problem-solving .entry-body .page-title::before {
	content: "PROBLEM SOLVING SERIES";
}

.term-time-structuring .entry-body .page-title::before {
	content: "TIME STRUCTURING SERIES";
}

@media (max-width: 991px) {
	.tax-product_cat .entry-body .page-title,
	.post-type-archive-product .entry-body .page-title {
		font-size: 36px;
	}
}

@media (max-width: 575px) {
	.tax-product_cat .entry-body .page-title,
	.post-type-archive-product .entry-body .page-title {
		margin-bottom: 32px;
		font-size: 28px;
	}
}

/* --- 商品一覧の件数表示と並び替え ----------------------------------------- */
/*
 * デザイン案にアーカイブページは無い。見出しを揃えたぶん、
 * この2つだけテーマ既定のまま浮いて見えるので、
 * 本文まわりの書体・色に寄せる程度にとどめている。
 */

.woocommerce .woocommerce-result-count {
	margin-bottom: 28px;
	font-family: var(--lii-sans);
	font-size: 12px;
	color: var(--lii-text-soft);
}

.woocommerce .woocommerce-ordering select {
	padding: 10px 34px 10px 14px;
	border: 1px solid var(--lii-line-soft);
	border-radius: 1px;
	background-color: var(--lii-paper);
	font-family: var(--lii-sans);
	font-size: 12.5px;
	color: var(--lii-ink);
	transition: border-color 0.2s;
}

.woocommerce .woocommerce-ordering select:hover,
.woocommerce .woocommerce-ordering select:focus {
	border-color: var(--lii-gold-deep);
	outline: none;
}

/* ==========================================================================
   9. プロフィール
   ========================================================================== */

/* 本文の幅。他ページの .lii-article（800px）より少し狭い。 */
/* Elementor の max-width:100%（クラス4つぶん）に勝たせるため、クラスを重ねて底上げしている。詳しくは .lii-head の注記を参照。 */
.elementor.elementor .lii-prof.lii-prof.lii-prof {
	max-width: 760px;
}

/* 生年・出身 */
.lii-prof-meta p {
	margin: 0 0 20px;
	font-size: 13px;
	color: var(--lii-text-soft);
}

/* 肩書きの並び */
.lii-prof-roles p {
	margin: 0;
	font-size: 14px;
	line-height: 2.1;
	color: var(--lii-ink);
}

/*
 * 本文中のリンク。文字は濃紺のまま、金の下線で示す。
 *
 * デザイン案のプロフィールでは青（#1a56db）が指定されていたが、
 * サイトの配色に青が無く浮くため、講演ページの見せ方に揃えた
 * （2026-09-09・山口判断／藤間様へ報告予定）。
 *
 * 金の文字にする案もあったが、白地に #9C7A34 はコントラスト比が約4:1で
 * 本文文字の推奨値4.5:1を下回る。濃紺の文字なら十分な差が取れる。
 *
 * .lii-link はプロフィール、.lii-link-soft は講演ページで使っている。
 * 見た目を分ける理由が無いので、同じ指定にまとめている。
 */



/* 横長の写真 */
.lii-prof-photo {
	margin-top: 32px;
	overflow: hidden;
}

.lii-prof-photo img {
	display: block;
	width: 100%;
	height: 100%;
	aspect-ratio: 16 / 9;
	object-fit: cover;
	object-position: center 20%;
}

/* 支援実績の箇条書き */
.lii-prof-list ul {
	margin: 0 0 8px;
	padding-left: 20px;
}

.lii-prof-list li {
	margin-bottom: 12px;
	/* 案の <li> は指定なし。ブラウザ既定の 16px と body の文字色・行送りが出る。
	   同じ article でも <p> は 14px・--text-mute を明示しており、揃っていない。 */
	font-size: 16px;
	line-height: 2;
	color: var(--lii-ink);
}

/* --- 著書（表紙＋紹介） --------------------------------------------------- */

/* 「最新刊」「代表作」の小見出し */
.lii-prof-label {
	margin-bottom: 10px;
	font-family: var(--lii-sans);
	font-size: 11px;
	letter-spacing: 0.12em;
	color: var(--lii-gold-deep);
}

/* コンテナ化したので .e-con-full.e-flex（0,2,0）に勝つ書き方にする。詳細は .lii-act-row の注記。 */
.elementor .lii-prof-book.lii-prof-book {
	display: flex;
	--flex-direction: row;
	flex-direction: row;
	flex-wrap: wrap;
	align-items: flex-start;
	gap: 24px;
}

.lii-prof-book + .lii-prof-label {
	margin-top: 40px;
}

/* 表紙とAmazonボタンの間隔はボタン側の margin-top が持つので、コンテナの gap は 0 にする。 */
.elementor .lii-prof-book__cover.lii-prof-book__cover {
	width: 160px;
	flex: none;
	gap: 0;
}

/* 同じ枠の中に Amazon ボタンも入っているので、ボタンは除く。 */
.lii-prof-book__cover a:not(.lii-btn):not(.elementor-button) {
	display: block;
	background: #fff;
}

.lii-prof-book .lii-prof-book__cover img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
}

/* 各行の間隔は段落の margin が持つので、コンテナの gap は 0 にする。 */
.elementor .lii-prof-book__body.lii-prof-book__body {
	flex: 1;
	min-width: 260px;
	gap: 0;
}

.elementor .lii-prof-book__body h3 {
	margin: 0;
	font-family: var(--lii-serif);
	font-size: 16px;
	font-weight: 700;
	line-height: 1.7;
}

.lii-prof-book__pub {
	margin: 8px 0 12px;
	font-size: 12px;
	color: var(--lii-text-soft);
}

.lii-prof-book__desc {
	margin: 0 0 16px;
	font-size: 14px;
	line-height: 1.95;
	color: var(--lii-text-mute);
}

/*
 * 出版社・説明文・ボタンの間隔を、次のウィジェット側の上マージンで持たせる。
 *
 * ウィジェット化で出版社と説明文がそれぞれ単独の text-editor になり、
 * 段落が「ウィジェットの最後の段落」扱いになった。12章の共通指定
 * （末尾段落の下マージンを0にする、特異性 0,4,1）が当たり、
 * 上の .lii-prof-book__pub（下12px）と .lii-prof-book__desc（下16px）の
 * 下マージンが消えて、説明文と詳細ボタンが密着していた（2026-09-14 確認）。
 *
 * 共通指定の特異性を下げると規約ページなど他の箇所の間隔が変わるので、
 * ここだけ次の要素の上マージンに置き換える。値はデザイン案と同じ。
 * コンテナは全幅（.e-con-inner が無い）なので、子を > で直接たどれる。
 */
.elementor .lii-prof-book__body > .elementor-widget-text-editor + .elementor-widget-text-editor {
	margin-top: 12px;
}

.elementor .lii-prof-book__body > .elementor-widget-button {
	margin-top: 16px;
}

/* 表紙の下に置く「Amazonで購入」は幅いっぱいの小さめボタン。 */
/* ボタンウィジェットは a.elementor-button で出るので、そちらも同じ見た目にする。 */
.lii-prof-book__cover a.lii-btn,
.elementor .lii-prof-book__cover a.elementor-button {
	width: 100%;
	margin-top: 12px;
	padding: 9px 10px;
	justify-content: center;
	font-size: 11px;
}

/* --- 関連ページのボタン列 ------------------------------------------------- */

.elementor .lii-prof-links.lii-prof-links {
	display: flex;
	--flex-direction: row;
	flex-direction: row;
	flex-wrap: wrap;
	gap: 14px;
}

@media (max-width: 575px) {
	.elementor .lii-prof-book__cover.lii-prof-book__cover { width: 120px; }
	.elementor .lii-prof-book__body.lii-prof-book__body { min-width: 0; }
}

/* 本文が左寄せのページで使う動画の並び。中央寄せを打ち消す。 */
/* 例：理念ページ末尾の「ご挨拶とプロローグ」 */
.lii-videos--left {
	margin-left: 0;
	margin-right: 0;
}

/*
 * 上に細い区切り線を引く。活動紹介の各活動の区切りと同じ線。
 *
 * コンテナ側に引くと、全幅化の影響で画面幅いっぱいに伸びてしまう。
 * 見出しウィジェットに当てて、本文と同じ幅（.lii-article の 800px）に収める。
 */
.lii-rule-top {
	padding-top: 44px;
	border-top: 1px solid var(--lii-line-soft);
}

/* ==========================================================================
   10. 講演・個別セッション
   ========================================================================== */

/* 本文をコンテンツ幅いっぱいまで使う。デザイン案がその指定のため。 */
/* Elementor の max-width:100%（クラス4つぶん）に勝たせるため、クラスを重ねて底上げしている。詳しくは .lii-head の注記を参照。 */
.elementor.elementor .lii-article--wide.lii-article--wide.lii-article--wide {
	max-width: none;
}

.elementor .lii-article h3 {
	margin: 24px 0 10px;
	font-family: var(--lii-serif);
	font-size: 16px;
	font-weight: 700;
	line-height: 1.7;
	color: var(--lii-ink);
}

.elementor a.lii-link,
.elementor a.lii-link:visited,
.elementor a.lii-link-soft,
.elementor a.lii-link-soft:visited {
	border-bottom: 1px solid var(--lii-gold);
	color: var(--lii-charcoal);
	text-decoration: none;
}

.elementor a.lii-link:hover,
.elementor a.lii-link-soft:hover {
	border-bottom-color: var(--lii-gold-deep);
	color: var(--lii-gold-deep);
	text-decoration: none;
}

/* 横長の写真（21:9） */
.lii-lec-photo {
	max-width: 760px;
	overflow: hidden;
}

.elementor .lii-lec-photo img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 21 / 9;
	object-fit: cover;
	object-position: center 25%;
}

/* --- 料金表 --------------------------------------------------------------- */
/*
 * デザイン案の見た目をそのまま移している。
 * 罫線・見出しの灰色・ボタンの青は、サイトの配色（濃紺と金）とは別系統。
 * 揃えたくなったら、下の3つの色指定を変えるだけで切り替わる。
 *   見出しの背景  #eeeeee     → var(--lii-parchment)
 *   罫線          #d5d5d5     → var(--lii-line)
 *   ボタンの背景  #3d6fc4     → var(--lii-charcoal)
 *
 * 4列あるため狭い画面では収まらない。横スクロールで逃がしている。
 */

.lii-price {
	margin-top: 20px;
	overflow-x: auto;
}

.lii-price table {
	width: 100%;
	min-width: 680px;
	/* 4列を正確に等分する。自動レイアウトだと中身の量で幅が動き、
	   折り返し位置がデザイン案とずれるため。 */
	table-layout: fixed;
	border: 2px solid #d5d5d5;
	border-collapse: collapse;
	font-size: 12.5px;
}

/*
 * 親テーマが table :is(th,td) に font-size を直接当てているため、
 * table 側の指定は継承されない。th と td にも明示する。
 */
.lii-price th {
	width: 25%;
	padding: 16px 14px;
	font-size: 12.5px;
	border: 2px solid #d5d5d5;
	background: #eeeeee;
	font-weight: 700;
	color: #333;
	text-align: center;
}

.lii-price td {
	padding: 14px;
	font-size: 12.5px;
	border: 2px solid #d5d5d5;
	color: #555;
	text-align: center;
}

/* 金額の行。.lii-price td（0,1,1）に勝たせるため td を足す。 */
.lii-price td.lii-price__fee {
	padding: 18px 14px;
	font-family: var(--lii-serif);
	font-size: 18px;
	font-weight: 700;
	color: #333;
}

.lii-price a {
	color: #3d6fc4;
	font-weight: 700;
}

/* 各列の問い合わせボタン */
.lii-price__cta {
	display: block;
	width: 100%;
	box-sizing: border-box;
	padding: 14px 8px;
	border-radius: 2px;
	background: #3d6fc4;
	font-size: 12.5px;
	font-weight: 700;
	color: #fff;
	line-height: 1.6;
	text-decoration: none;
	transition: background 0.2s;
}

.elementor .lii-price a.lii-price__cta,
.elementor .lii-price a.lii-price__cta:visited {
	color: #fff;
	text-decoration: none;
}

.elementor .lii-price a.lii-price__cta:hover {
	background: #2f5aa8;
	color: #fff;
}

/* ==========================================================================
   11. 書籍ページ（2冊共通）
   ========================================================================== */

/* --- 表紙＋書誌情報 ------------------------------------------------------- */

.elementor .lii-book-head.lii-book-head.lii-book-head {
	display: grid;
	grid-template-columns: 260px 1fr;
	align-items: start;
	gap: 36px;
}

/* 左右の列。行の間隔は各要素の margin が持つので、コンテナの gap は 0 にする。 */
.elementor .lii-book-head__col.lii-book-head__col {
	gap: 0;
}

.lii-book-cover {
	border: 1px solid rgba(13, 35, 64, 0.08);
	background: #fff;
	box-shadow: 0 10px 24px rgba(13, 35, 64, 0.18), 0 2px 6px rgba(13, 35, 64, 0.10);
}

/*
 * 表紙の縦横比。もとは .lii-book-cover の style 属性に直接書いていたが、
 * 画像ウィジェットには属性を足せないうえ、外枠に aspect-ratio を持たせても
 * 中の img には伝わらない（間にウィジェットの div が2枚入るため）。
 * 比率は img 自身に持たせ、本ごとの修飾クラスで切り替える。
 */
.elementor .lii-book-head .lii-book-cover img {
	display: block;
	width: 100%;
	height: auto;
	object-fit: contain;
}

.lii-book-cover--book-life-is-investment img { aspect-ratio: 785 / 1144; }
.lii-book-cover--book-owner-manager img { aspect-ratio: 2 / 3; }

/* 表紙の下の「Amazonで見る」。ボタンウィジェットは a.elementor-button で出る。 */
.lii-book-head a.lii-btn,
.elementor .lii-book-head a.elementor-button {
	width: 100%;
	margin-top: 16px;
	justify-content: center;
}

/*
 * 表紙の下の Amazon ボタンを、TOP の書籍カードの「Amazonで購入」と同じあしらいにする。
 * 角丸 5px・白い背景・濃紺の枠線と文字。ホバーは薄いグレー（2026-09-14）。
 * 対象はプロフィールの著書ブロックと、書籍①②の表紙まわり。
 *
 * 大きさと幅は置き場所ごとの指定（プロフィールは小さめ、どちらも幅いっぱい）を残し、
 * 見た目だけを揃えている。
 * テンプレート側でクラスを足すと、再インポートで Elementor 上の文言修正が消えるので、
 * 置き場所のクラスから CSS だけで当てている。
 */
.elementor .lii-prof-book__cover a.elementor-button,
.elementor .lii-book-head a.elementor-button {
	border: 1px solid var(--lii-charcoal);
	border-radius: 5px;
	background: var(--lii-paper);
	color: var(--lii-charcoal);
}

.elementor .lii-prof-book__cover a.elementor-button:hover,
.elementor .lii-book-head a.elementor-button:hover {
	border-color: var(--lii-charcoal);
	background: var(--lii-parchment);
	color: var(--lii-charcoal);
}

.elementor .lii-book-head h2 {
	margin-top: 0;
}

.lii-book-sub {
	margin-top: -10px;
	font-size: 13px;
	color: var(--lii-text-soft);
}

.elementor .lii-book-head h3 {
	margin: 0 0 10px;
	font-family: var(--lii-serif);
	font-size: 16px;
	font-weight: 700;
}

/* --- 書誌情報の表 --------------------------------------------------------- */
/* 親テーマが th/td に font-size を直接当てるため、こちらでも明示する。 */

.lii-book-spec table {
	width: 100%;
	margin: 20px 0;
	border: none;
	border-collapse: collapse;
}

/* 親テーマがセル全周に罫線を当ててくるので、一度 none にしてから上だけ引く。 */
.lii-book-spec td {
	padding: 10px 0;
	border: none;
	border-top: 1px solid var(--lii-line-soft);
	font-size: 13px;
	line-height: 1.9;
}

.lii-book-spec td:first-child {
	width: 110px;
	color: var(--lii-text-soft);
}

/*
 * 最終行の下にも線を引いて表を閉じる。
 * 当初は案の流儀（各行の上だけに線）に寄せて引いていなかったが、
 * 表として下が開いて見えるため引くことにした（2026-09-12 山口判断）。
 * デザイン案にこの仕様表そのものが無いので、案との突き合わせは効かない。
 */
.lii-book-spec tr:last-child td {
	border-bottom: 1px solid var(--lii-line-soft);
}

/* --- 目次 ----------------------------------------------------------------- */

.lii-book-toc {
	max-width: 720px;
}

.lii-book-toc table {
	width: 100%;
	border: none;
	border-collapse: collapse;
}

/*
 * 親テーマが table :is(th,td) にセル全周の罫線を当ててくる。
 * border-top だけ書くと左右と下が残り、囲み罫と縦線が出る。
 * 一度 none にしてから上だけ引く。
 */
.lii-book-toc td {
	padding: 12px 0;
	border: none;
	border-top: 1px solid var(--lii-line-soft);
	font-size: 13px;
	line-height: 1.8;
	vertical-align: top;
}

.lii-book-toc td:first-child {
	width: 110px;
	padding-right: 16px;
	color: var(--lii-gold-deep);
}

/*
 * 最終行の下にも線を引いて表を閉じる。仕様表（.lii-book-spec）と揃えた。
 * 部立てのある本は部ごとに table が分かれているので、部の最後の行それぞれに入る。
 * （2026-09-12 山口判断。デザイン案にこの表が無いため案との突き合わせは効かない）
 */
.lii-book-toc tr:last-child td {
	border-bottom: 1px solid var(--lii-line-soft);
}

/* 部立てのある本（「オーナー経営者」という仕事）の見出し */
.lii-book-toc__part {
	margin: 24px 0 10px;
	font-family: var(--lii-serif);
	font-size: 15px;
	font-weight: 700;
	color: var(--lii-ink);
}

.lii-book-toc__part:first-child {
	margin-top: 0;
}

.lii-book-toc__note {
	margin-top: 14px;
	font-size: 12px;
	color: var(--lii-text-soft);
}

/* --- 著者より ------------------------------------------------------------- */

.lii-book-lead {
	margin-bottom: 18px;
	font-family: var(--lii-serif);
	font-size: 15px;
	font-weight: 700;
	color: var(--lii-charcoal);
}

/* --- 書店陳列 ------------------------------------------------------------- */

.elementor .lii-store.lii-store.lii-store {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 24px;
	margin-top: 16px;
}

.elementor .lii-store img {
	display: block;
	width: 100%;
	height: 100%;
	aspect-ratio: 16 / 10;
	object-fit: cover;
}

/* --- Amazonレビューのギャラリー ------------------------------------------- */
/*
 * 高さがまちまちの画像を隙間なく並べるため、段組み（columns）を使っている。
 * グリッドだと行の高さが揃ってしまい、余白が目立つ。
 */

/* コンテナは既定が flex なので、段組みを効かせるために block へ戻す。 */
.elementor .lii-review.lii-review.lii-review {
	display: block;
	margin-top: 16px;
	columns: 3;
	column-gap: 16px;
}

/*
 * 段落ちを避ける指定と下余白は、画像ではなくウィジェットの外枠へ移す。
 * ウィジェット化で img と .lii-review の間に div が2枚入り、
 * 段組みが数えるのが img ではなく外枠になったため。
 */
.elementor .lii-review__item {
	margin-bottom: 16px;
	break-inside: avoid;
}

.lii-review img {
	display: block;
	width: 100%;
	border: 1px solid var(--lii-line-soft);
	border-radius: 4px;
}

/*
 * ホバーで拡大する。
 *
 * 現行サイトは Elementor 標準の elementor-animation-grow（1.1倍）だが、
 * 新デザインは3段組みで1枚あたり約336pxまで縮んでおり、1.1倍では文字が読めない。
 * ご指摘の趣旨は「読めるようにしてほしい」なので倍率を上げている
 * （2026-09-12 藤間様のご指摘）。
 *
 * タッチ端末はホバーが外れず拡大したまま残るので、対象を絞る。
 */
@media (hover: hover) {
	/* 拡大・縮小の速さ。数字を大きくするほどゆっくりになる。 */
	.elementor .lii-review__item {
		transition: transform 0.5s ease-out;
	}

	.elementor .lii-review__item:hover {
		position: relative;
		z-index: 10;
		transform: scale(1.7);
	}
}

/* --- 社団のバナー --------------------------------------------------------- */

.elementor .lii-assoc.lii-assoc {
	display: flex;
	--flex-direction: row;
	flex-direction: row;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	margin-top: 44px;
	padding: 28px 32px;
	gap: 24px;
	background: var(--lii-charcoal);
	color: var(--lii-paper);
}

.elementor .lii-assoc h3 {
	margin: 8px 0;
	font-family: var(--lii-serif);
	font-size: 18px;
	font-weight: 700;
	color: var(--lii-paper);
}

.lii-assoc p {
	margin: 0;
	font-size: 12.5px;
	color: #c3cbdb;
}

/*
 * 案ではこのバナーのアイブロウは <span> のまま（display:block は
 * .head .eyebrow だけ）。インラインだと行の高さが親の行送り 32px になる。
 * block のままだと 22px で、バナーが10px低くなる。
 */
/*
 * 見出しウィジェットにしたので、外枠は block になる。
 * インラインのときは親の行送り 32px を拾っていたので、
 * バナーの高さが 10px 縮まないよう行送りを明示する。
 */
.elementor .lii-assoc .lii-eyebrow {
	display: block;
	line-height: 32px;
	color: var(--lii-gold-pale);
}

/*
 * 紹介文の側。
 * コンテナは既定で width:100% なので、そのままだと1行を占め切って
 * ボタンが flex-wrap で次の行へ落ちる。中身なりの幅にする。
 * 行の間隔は各行の margin が持つので gap は 0。
 */
.elementor .lii-assoc__body.lii-assoc__body {
	flex: 1 1 auto;
	width: auto;
	min-width: 0;
	gap: 0;
}

/* <p> に付けるクラス。.lii-assoc p（0,1,1）に勝たせるため p を足す。 */
/* 見出しウィジェットにした版（ラッパーの div）も同じ見た目にする。 */
.lii-assoc p.lii-assoc__url,
.elementor .lii-assoc .lii-assoc__url {
	margin-top: 6px;
	font-size: 11.5px;
	color: var(--lii-gold-pale);
}

/* 濃紺の上なので金のボタンにする。ボタンウィジェットは a.elementor-button で出る。 */
.lii-assoc a.lii-btn,
.elementor .lii-assoc a.elementor-button {
	flex: none;
	border-color: var(--lii-gold);
	background: var(--lii-gold);
	color: var(--lii-charcoal);
}

.lii-assoc a.lii-btn:hover,
.elementor .lii-assoc a.elementor-button:hover {
	border-color: var(--lii-gold-pale);
	background: var(--lii-gold-pale);
	color: var(--lii-charcoal);
}

/* --- 書籍内リンク動画 ----------------------------------------------------- */

.lii-book-videos {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 26px 24px;
	margin-top: 16px;
}

.lii-book-videos__frame {
	background: var(--lii-parchment-2);
	aspect-ratio: 16 / 9;
}

.lii-book-videos__frame iframe {
	display: block;
	width: 100%;
	height: 100%;
	border: none;
}

.lii-book-videos__cap {
	margin-top: 10px;
	font-size: 12px;
	line-height: 1.6;
	color: var(--lii-text-mute);
}

.lii-book-videos__cap span {
	display: block;
	margin-top: 2px;
	font-size: 11px;
	color: var(--lii-text-soft);
}

/* --- 末尾の関連リンク ----------------------------------------------------- */

/* 案は inline-flex のリンクを並べただけ。横に流れ、足りなければ折り返す。
   案の margin-top:8px は折り返したときの行間なので、gap で作る。 */
.elementor .lii-book-links.lii-book-links {
	display: flex;
	--flex-direction: row;
	flex-direction: row;
	flex-wrap: wrap;
	align-items: flex-start;
	gap: 8px;
	margin-top: 20px;
}

@media (max-width: 767px) {
	.elementor .lii-book-head.lii-book-head.lii-book-head { grid-template-columns: 1fr; }
	.lii-book-head .lii-book-cover { max-width: 220px; }
	.elementor .lii-review.lii-review.lii-review { columns: 2; }
	.elementor .lii-store.lii-store.lii-store,
	.lii-book-videos { grid-template-columns: 1fr; }
}

/* ==========================================================================
   12. 余白の調整（全ページ共通）
   ========================================================================== */

/*
 * ウィジェットの最後の段落・リストに下マージンが残ると、
 * Elementor のウィジェット間の余白に上乗せされて、
 * ブロックごとに間隔がばらつく。
 *
 * 段落どうしの間隔は各コンポーネント側で持たせているので、
 * 末尾のマージンだけ落とす。
 *
 * ただし見出しは対象外にする。見出しが末尾に来るウィジェットで
 * 下マージンまで消すと、直後の画像や動画と間隔が無くなる。
 */

.elementor .elementor-widget-text-editor > .elementor-widget-container > :is(p, ul, ol, dl, table):last-child,
.elementor .elementor-widget-html > .elementor-widget-container > :is(p, ul, ol, dl, table):last-child,
.elementor .elementor-widget-text-editor > :is(p, ul, ol, dl, table):last-child,
.elementor .elementor-widget-html > :is(p, ul, ol, dl, table):last-child {
	margin-bottom: 0;
}

/* ==========================================================================
   13. 無料会員登録（CWBの登録フォーム）
   ========================================================================== */
/*
 * フォームの HTML は CWB プラグインの登録エンドポイントへ直接POSTする作りで、
 * 既存ページの本文をそのまま移している。
 *   - form の id / action / name
 *   - input の id / name / required / type
 *   - reCAPTCHA の data-sitekey
 *   - hidden の cwb_return
 *   - #cwb-message と、URLパラメータを読むインラインスクリプト
 * これらは登録処理に直結するので、見た目だけを CSS で当てる。
 *
 * 元の markup は Bootstrap 風のクラス（input-group / form-control /
 * btn-warning）と <div align="center"> を使っている。
 * markup は触らず、こちらで打ち消す。
 */

/* Elementor の max-width:100%（クラス4つぶん）に勝たせるため、クラスを重ねて底上げしている。詳しくは .lii-head の注記を参照。 */
.elementor.elementor .lii-reg.lii-reg.lii-reg {
	max-width: 560px;
}

.lii-reg div[align="center"] {
	text-align: left;
}

.lii-reg .input-group {
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.lii-reg input[type="email"],
.lii-reg input[type="text"] {
	width: 100%;
	padding: 12px 14px;
	border: 1px solid var(--lii-line-soft);
	border-radius: 1px;
	background: var(--lii-paper);
	font-family: var(--lii-sans);
	font-size: 13px;
	color: var(--lii-ink);
	transition: border-color 0.2s;
}

.lii-reg input[type="email"]:focus,
.lii-reg input[type="text"]:focus {
	border-color: var(--lii-gold-deep);
	outline: none;
}

.lii-reg .g-recaptcha {
	margin-top: 2px;
}

.lii-reg .input-group-btn {
	margin-top: 6px;
}

/* 登録ボタン。元の btn-warning（黄色）を濃紺に置き換える。 */
.lii-reg input[type="submit"] {
	display: inline-flex;
	width: auto;
	padding: 15px 34px;
	border: 1px solid var(--lii-charcoal);
	border-radius: 1px;
	background: var(--lii-charcoal);
	font-family: var(--lii-sans);
	font-size: 12.5px;
	letter-spacing: 0.1em;
	color: var(--lii-paper);
	cursor: pointer;
	transition: background 0.3s, border-color 0.3s;
}

.lii-reg input[type="submit"]:hover {
	border-color: var(--lii-gold-deep);
	background: var(--lii-gold-deep);
}

/* 登録結果のメッセージ。色はインラインスクリプトが直接指定するので、
   ここでは形だけ整える。 */
.lii-reg #cwb-message {
	padding: 12px 16px;
	margin-bottom: 16px;
	border-radius: 2px;
	font-size: 13px;
	line-height: 1.8;
}

/* 登録の流れ */
.elementor .lii-reg h4 {
	margin: 0 0 10px;
	font-family: var(--lii-serif);
	font-size: 15px;
	font-weight: 700;
	color: var(--lii-ink);
}

.lii-reg ol {
	margin: 0 0 28px;
	padding-left: 20px;
}

.lii-reg ol li {
	margin-bottom: 6px;
	font-size: 13.5px;
	line-height: 1.9;
	color: var(--lii-text-mute);
}

/* ==========================================================================
   14. Elementor の配色プリセットの打ち消し
   ========================================================================== */
/*
 * 登録完了ページ（/basic-course-tokuten/）などで、Elementor 標準の
 * 「成功（緑）」「情報（青）」プリセットのボタンが使われている。
 * サイトの配色に無い色なので、テーマスタイルの既定（濃紺）に揃える。
 *
 * プリセットのクラスはウィジェットのラッパーに付くため、
 * ボタンの実体（.elementor-button）を子孫として指定する。
 */

.elementor .elementor-button-success .elementor-button,
.elementor .elementor-button-info .elementor-button,
.elementor .elementor-button-warning .elementor-button,
.elementor .elementor-button-danger .elementor-button {
	border: 1px solid var(--lii-charcoal);
	background-color: var(--lii-charcoal);
	color: var(--lii-paper);
}

.elementor .elementor-button-success .elementor-button:hover,
.elementor .elementor-button-info .elementor-button:hover,
.elementor .elementor-button-warning .elementor-button:hover,
.elementor .elementor-button-danger .elementor-button:hover {
	border-color: var(--lii-gold-deep);
	background-color: var(--lii-gold-deep);
	color: var(--lii-paper);
}

/* --- 特典動画（登録完了ページ）のカード ---------------------------------- */
/*
 * 元は各ウィジェットにマイナスのマージンを入れて詰めていた。
 * 作り直しにあたって全部外し、余白はここで持たせている。
 */

.lii-tokuten__card {
	padding: 20px;
	border: 1px solid var(--lii-line-soft);
	background: var(--lii-paper);
}

.elementor .lii-tokuten__title .elementor-heading-title {
	margin: 0 0 14px;
	font-family: var(--lii-serif);
	font-size: 16px;
	font-weight: 700;
	line-height: 1.6;
	color: var(--lii-ink);
}

.lii-tokuten__time p {
	margin: 8px 0 12px;
	font-size: 12px;
	color: var(--lii-text-soft);
}

/* 埋め込みは幅いっぱいに追従させる（元は width:720px 固定だった）。 */
.lii-tokuten__card iframe {
	width: 100%;
	max-width: 100%;
	aspect-ratio: 16 / 9;
	height: auto;
	border: none;
}

/* 末尾の注意事項は小さめに */
.lii-tokuten__notes p {
	font-size: 13px;
}

.elementor .lii-tokuten__notes h3 {
	margin: 26px 0 8px;
	font-family: var(--lii-sans);
	font-size: 13.5px;
	font-weight: 700;
	color: var(--lii-charcoal);
}

@media (max-width: 767px) {
	.lii-tokuten__card { width: 100%; }
}

/* --- Elementorのボタンの高さ --------------------------------------------- */
/*
 * Elementor のボタンウィジェットは line-height:1 を持っているため、
 * デザイン案（行の高さ2）より 12.5px 低くなる。
 *   モック      57px = 12.5 × 2 + パディング30 + 枠線2
 *   Elementor  44.5px = 12.5 × 1 + パディング30 + 枠線2
 *
 * HTMLウィジェットで書いた a.lii-btn は本文の行の高さを継承しているので
 * 元から合っている。ここで揃うのはボタンウィジェットだけ。
 *
 * テーマスタイル → ボタン → タイポグラフィ → 行の高さ でも同じことができるが、
 * CSSに置いておけば rsync だけで本番にも反映される。
 */

.elementor .elementor-button {
	line-height: 2;
}

/* --- 大きめの見出し ------------------------------------------------------- */
/*
 * デザイン案は、TOPの理念セクションの見出しだけインラインで
 * 大きさと色を上書きしている（他のセクション見出しは .lii-head が持つ）。
 * 見出しウィジェットの「CSSクラス」に lii-h2-lg を入れて使う。
 */

.elementor .lii-h2-lg .elementor-heading-title {
	margin-top: 18px;
	font-size: clamp(23px, 3vw, 30px);
	line-height: 1.6;
	color: var(--lii-charcoal);
}

/* --- 動画セクションの下のCTAボタン ---------------------------------------- */
/*
 * デザイン案の .voice-cta は margin-top:40px。
 * Elementor はウィジェット間に既定の隙間（20px前後）を持つので、
 * その差分だけを足している。見出しブロックの下余白と同じ考え方。
 */

/*
 * ボタンの上余白。
 *
 * Elementor のコンテナは gap でウィジェット間に 20px を空けている（実測）。
 * margin はそこに上乗せされるため、ここに書くのは「目標 − 20px」の差分。
 * gap の値を変えたら、ここも全部見直すこと。
 *
 * 目標はデザイン案の値。理念と活動は HTML 側にインラインで margin-top が
 * 書かれていて、CSS の .idea-block .btn（30px）よりそちらが勝っている。
 *
 *   .lii-idea-cta   理念を見る            44px
 *   .lii-act-cta    活動について詳しく見る   24px
 *   .lii-voice-cta  受講者の声のCTA        40px
 *
 * どれも Elementor のボタンウィジェットの「詳細 → CSSクラス」に入れる。
 */
.elementor .lii-idea-cta {
	margin-top: 24px;
}

.elementor .lii-act-cta {
	margin-top: 4px;
}

.elementor .lii-voice-cta {
	margin-top: 20px;
}

/* --- ヘッダーを3ブロックに振り分ける -------------------------------------- */
/*
 * デザイン案の nav は brand-lock / navlinks / nav-cta を
 * space-between で左・中央・右に置いている。
 * CTA は functions.php でメニューから抜き出し、テンプレートで
 * ナビの外に描いている（.lii-header-cta）。
 */

.site-header .site-header-container {
	align-items: center;
	justify-content: space-between;
}

.lii-header-cta {
	display: flex;
	flex: none;
	align-items: center;
	gap: 8px;
}

/*
 * CTA の2つ目の見た目（無料会員登録）。白い背景に濃紺の枠線と文字。
 * メニュー項目の CSSクラスに lii-nav-cta--accent を足すと付く（2026-09-14）。
 *
 * 同じ濃紺の塗りボタンが2つ並ぶと、どちらを押すべきかの手がかりが無くなるため
 * 片方を枠線にした。金の塗りも試したが、枠線に決めた。
 * ホバーはサイト共通の枠線ボタン（a.lii-btn--line:hover）と同じく薄いグレーの背景。
 * 濃紺と白のコントラスト比は 15.8:1。
 */
.lii-header-cta a.lii-btn.lii-nav-cta--accent {
	border-color: var(--lii-charcoal);
	background: var(--lii-paper);
	color: var(--lii-charcoal);
}

.lii-header-cta a.lii-btn.lii-nav-cta--accent:hover {
	border-color: var(--lii-charcoal);
	background: var(--lii-parchment);
	color: var(--lii-charcoal);
}

/*
 * お問い合わせ（塗りのボタン）のホバー。
 * 既定のホバーは金（gold-deep）だが、ヘッダーの中だけ明るい濃紺にしている。
 * 金の塗りを試していた時期に、隣と両方金に見えるのを避けるため入れたもの。
 * 明るさの変化が分かりやすい値（CIELAB の L* で +13）にしてある。
 *   #0d2340 L*14 → #173f72 L*27
 * charcoal-2（#163256、+7）では変化が小さく分かりにくかった。
 * 色相は charcoal と同じ 214°。白い文字とのコントラスト比は 10.6:1。
 * パレットに無い色なので変数にはせず、ここにだけ書いている。
 */
.lii-header-cta a.lii-btn--primary:not(.lii-nav-cta--accent):hover {
	border-color: #173f72;
	background: #173f72;
	color: var(--lii-paper);
}

/*
 * CTA を2つ並べると、スマホ幅ではブランド名・ボタン2つ・ハンバーガーが
 * 1行に収まらない（375px で約390px必要）。
 * 狭い画面ではヘッダーの帯に右端の1つ（お問い合わせ）だけ残す。
 * 残りはハンバーガーのメニューに項目として残っているので、辿れなくはならない
 * （抜き出しはPCヘッダーの描画時だけで、モバイルナビには CTA が残る）。
 */
@media (max-width: 479.98px) {
	.lii-header-cta a:not(:last-child) {
		display: none;
	}
}

/*
 * ブランドロックの幅を中身なりにする。
 *
 * 親テーマの .site-header--layout--nav-float .site-header-logo が
 * width:100% と margin-right:2em を持っており、フレックスで縮められて
 * 中途半端な幅（306px）になっていた。
 * デザイン案の .brand-lock は中身の幅なので、指定を解除する。
 *
 * 上下のパディングとマージンは触らない。現状でヘッダーの高さが
 * デザイン案と一致している（153.89px）ため。
 */

.site-header .site-header-logo.lii-brand {
	width: auto;
	flex: none;
	margin-right: 0;
}

/*
 * ナビ枠も中身なりの幅にする。
 *
 * 親テーマは .global-nav-list に margin:0 auto を当てており、
 * 伸びたナビ枠の中でリストが中央寄せされる作りになっている。
 * デザイン案は3ブロックとも中身なりの幅で、間隔は space-between が作る。
 * 見た目はほぼ同じだが、構造を合わせておく。
 */

.site-header .global-nav {
	flex: none;

	/*
	 * 親テーマの global-nav--layout--float-right が margin-left:auto を持つ。
	 * 自動マージンは space-between より先に余白を吸うため、これを外さないと
	 * ナビとCTAが右へ寄ってしまう（実測 141.484px）。
	 */
	margin-left: 0;
	margin-right: 0;
}

.site-header .global-nav-list {
	margin-right: 0;
	margin-left: 0;
}

/* --- ドロップダウンのキャレット ------------------------------------------- */
/*
 * 親テーマの濃紺の三角（li.menu-item-has-children::after）は消しているが、
 * デザイン案には 9px の小さな ▾ がある。同じものを入れ直す。
 *
 * リンク直下に足すと、親テーマの .global-nav-name が width:100% を持つため
 * 折り返して次の行に落ちる。名前の中に入れて、テキストの直後に並べる。
 */

.site-header .global-nav-list > li.menu-item-has-children > a .global-nav-name::after {
	/*
	 * 三角は文字ではなく枠線で描く。
	 * デザイン案は ▾（U+25BE）を 9px で置いているが、この文字は
	 * フォント側で小さく描かれるため、実機では三角と判別できなかった。
	 * font-size を上げても余白が増えるだけなので、枠線で作っている。
	 * 幅8px・高さ4px。色は文字色に追従する。
	 * （2026-09-09・山口判断／藤間様へ報告予定）
	 */
	content: "";
	display: inline-block;
	margin-left: 6px;
	border-top: 4px solid currentColor;
	border-right: 4px solid transparent;
	border-left: 4px solid transparent;
	vertical-align: middle;
}

/* --- TOPへ戻るボタン（WPFront Scroll Top） -------------------------------- */
/*
 * プラグインは画像を1枚置くだけの作り。画像を隠して、枠を円にする。
 *
 * 表示・非表示はプラグインが opacity と display で制御しているので触らない。
 * display を上書きするとスクロール連動が壊れるため、中央寄せは
 * flex ではなく line-height で作っている。
 *
 * サイズと位置はプラグインがインラインで書き込むので !important が必要。
 * プラグインの設定画面で変えられる項目があれば、そちらで指定してもよい。
 *
 * プラグインの指定は #wpfront-scroll-top-container（ID）のみで、
 * 同名のクラスは出力されない。ID を主に書き、将来クラスが
 * 付いた場合に備えてクラスも並べている。
 */

#wpfront-scroll-top-container,
.wpfront-scroll-top-container {
	width: 46px !important;
	height: 46px !important;
	right: 24px !important;
	bottom: 24px !important;
	border-radius: 50% !important;
	background-color: var(--lii-charcoal) !important;
	background-image: none !important;
	box-shadow: 0 6px 18px rgba(13, 35, 64, 0.25);
	line-height: 46px !important;
	text-align: center !important;
	transition: background-color 0.2s;
}

#wpfront-scroll-top-container img,
.wpfront-scroll-top-container img {
	display: none !important;
}

#wpfront-scroll-top-container::after,
.wpfront-scroll-top-container::after {
	content: "↑";
	font-size: 20px;
	font-weight: 700;
	color: var(--lii-paper);
}

#wpfront-scroll-top-container:hover,
.wpfront-scroll-top-container:hover {
	background-color: var(--lii-gold-deep) !important;
}

/* ==========================================================================
   15. WooCommerce（お買い物カゴ・購入手続き・注文完了）
   デザイン案にこの3ページは無い。決済の動きを壊さないよう、
   マークアップとレイアウトには触れず、色と文字まわりだけをそろえる。

   打ち消す相手は2つある。
     - WooCommerce 本体 assets/css/woocommerce.css
     - 親テーマ _g3/plugin-support/woocommerce/css/woo.css
   どちらも子テーマより先に読み込まれるので、同じ詳細度なら後勝ちで足りる。
   ========================================================================== */

/*
 * 金額。親テーマが .woocommerce-Price-amount に #c00（赤）を当てている。
 * サイトの配色に赤は無く、合計金額だけが浮くため濃紺に変える。
 * 商品一覧のブロック版も同じ赤を持っているので併せて指定する。
 */
.woocommerce-Price-amount,
.wc-block-grid__products .wc-block-grid__product-price__value .wc-block-components-formatted-money-amount {
	color: var(--lii-charcoal);
}

/* --- 表（カゴの中身・注文詳細） ------------------------------------------ */

.woocommerce table.shop_table {
	border: 1px solid var(--lii-line-soft);
	border-radius: 0;
	font-size: 13px;
}

.woocommerce table.shop_table thead th {
	background-color: var(--lii-parchment);
	font-family: var(--lii-sans);
	font-size: 12.5px;
	font-weight: 500;
	color: var(--lii-ink);
	padding: 14px 14px;
}

.woocommerce table.shop_table th,
.woocommerce table.shop_table td {
	padding: 14px;
	line-height: 1.8;
	color: var(--lii-text-mute);
}

.woocommerce table.shop_table td,
.woocommerce table.shop_table tbody th,
.woocommerce table.shop_table tfoot td,
.woocommerce table.shop_table tfoot th {
	border-top-color: var(--lii-line-soft);
}

.woocommerce table.shop_table .product-name a {
	color: var(--lii-ink);
}

/* 「お買い物カゴの合計」などの小見出し */
.woocommerce .cart_totals h2,
.woocommerce .woocommerce-order-details__title,
.woocommerce .woocommerce-column__title {
	font-family: var(--lii-serif);
	font-weight: 700;
	color: var(--lii-ink);
}

/* --- ボタン --------------------------------------------------------------- */
/*
 * 形と字送りだけサイトのボタンに合わせる（角丸 3px → 1px、字送り 0.1em）。
 * 色は カスタマイザーのメインカラーから来ているのでそのまま。
 * .alt 付きは親テーマ側が 0,3,1 で指定しているため、こちらも .alt を書く。
 */
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt,
.woocommerce #respond input#submit.alt {
	padding: 14px 26px;
	border-radius: 1px;
	font-family: var(--lii-sans);
	font-size: 12.5px;
	font-weight: 500;
	letter-spacing: 0.1em;
	line-height: 1.6;
}

/* --- 通知（クーポン案内など） --------------------------------------------- */
/*
 * WooCommerce 既定は上辺 3px の紫。サイトに無い色なので金に置き換える。
 * 左のアイコンは WooCommerce 専用フォントで描かれているので触らない。
 */
.woocommerce-info,
.woocommerce-message {
	background-color: var(--lii-parchment);
	border-top-color: var(--lii-gold);
	color: var(--lii-text-mute);
	font-size: 13px;
}

.woocommerce-info a,
.woocommerce-message a {
	color: var(--lii-charcoal);
}

/* 左のアイコンも同じ色に。既定は緑（追加完了）と青（案内）。 */
.woocommerce-info::before,
.woocommerce-message::before {
	color: var(--lii-gold);
}

/* --- 入力欄 --------------------------------------------------------------- */
/*
 * お問い合わせフォーム（.lii-form）と同じ見た目にそろえる。
 */
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select,
.woocommerce table.shop_table td.actions input[type="text"].input-text {
	padding: 12px 14px;
	border: 1px solid var(--lii-line-soft);
	border-radius: 1px;
	font-family: var(--lii-sans);
	font-size: 13px;
	color: var(--lii-ink);
	transition: border-color 0.2s;
}

.woocommerce form .form-row input.input-text:focus,
.woocommerce form .form-row textarea:focus,
.woocommerce form .form-row select:focus {
	border-color: var(--lii-gold-deep);
	outline: none;
}

/*
 * 入力済みの欄が緑の枠になるのを止める。
 * WooCommerce 本体が .woocommerce-validated に #6dc22e を当てている。
 * 入力の正誤を色で伝える必要がある欄ではないうえ、サイトに無い色なので
 * 通常時と同じ枠に戻す。誤りのとき（woocommerce-invalid）の赤は残す。
 */
.woocommerce form .form-row.woocommerce-validated input.input-text,
.woocommerce form .form-row.woocommerce-validated select,
.woocommerce form .form-row.woocommerce-validated .select2-container {
	border-color: var(--lii-line-soft);
}

.woocommerce form .form-row label {
	font-size: 13px;
	color: var(--lii-text-mute);
}

/* 必須の印。既定の赤はエラー表示に使うので、こちらは金にする。 */
.woocommerce form .form-row .required {
	color: var(--lii-gold-deep);
	text-decoration: none;
}

/* --- 商品カテゴリーの説明文 ----------------------------------------------- */
/*
 * WooCommerce が <div class="term-description"> で出す領域。
 * シリーズページでは冒頭の動画（最大800px）の下に並ぶので幅をそろえる。
 * 文面は 商品 → カテゴリー → 説明 で藤間様が編集できる。
 */
.woocommerce .term-description {
	max-width: 800px;
	margin-top: 20px;
	font-size: 14px;
	color: var(--lii-text-mute);
}

.woocommerce .term-description p {
	margin-bottom: 12px;
}

.woocommerce .term-description p:last-child {
	margin-bottom: 0;
}

/* --- 商品一覧のボタン ------------------------------------------------------ */
/*
 * 親テーマは商品カードのボタンを position:absolute; bottom:0 で下端に貼り、
 * カード側の padding-bottom:35px でその場所を空けている。タイトルの行数が
 * 違ってもボタンの高さがそろう、という作り。
 *
 * ただしカゴに追加した後に出る「Checkout」リンク（.added_to_cart）も
 * 同じ場所に置かれるため、追加ボタンと重なって読めなくなる。
 *
 * カードを縦のフレックスにして、商品リンクを伸ばす形に変える。
 * ボタンは通常の流れに戻しても下端でそろい、2つ並んでも重ならない。
 */

.woocommerce ul.products li.product {
	display: flex;
	flex-direction: column;
	padding-bottom: 0;
}

/* 画像・タイトル・価格を包むリンク。ここを伸ばしてボタンを下端へ送る。 */
.woocommerce ul.products li.product > a.woocommerce-LoopProduct-link {
	flex: 1 1 auto;
}

.woocommerce ul.products .add_to_cart_button,
.woocommerce ul.products .button {
	position: static;
	width: 100%;
	margin-top: 12px;
}

/*
 * 追加後に出るリンク。塗りつぶしを2つ並べるとどちらを押すか迷うので、
 * こちらは枠線のボタンにする。文言と行き先（/checkout/）は
 * 既存の設定のままにしてある。
 */
.woocommerce ul.products .added_to_cart,
.woocommerce ul.products .added_to_cart.wc-forward {
	position: static;
	top: 0;
	display: block;
	width: 100%;
	margin-top: 8px;
	margin-bottom: 0;
	padding: 13px 20px;
	border: 1px solid var(--lii-charcoal);
	border-radius: 1px;
	background-color: transparent;
	color: var(--lii-charcoal);
	font-family: var(--lii-sans);
	font-size: 12.5px;
	font-weight: 500;
	letter-spacing: 0.1em;
	line-height: 1.6;
	text-align: center;
	transition: background-color 0.2s, color 0.2s;
}

.woocommerce ul.products .added_to_cart:hover,
.woocommerce ul.products .added_to_cart.wc-forward:hover {
	background-color: var(--lii-charcoal);
	color: var(--lii-paper);
	text-decoration: none;
}

/* ==========================================================================
   16. 動画視聴のご利用につきまして（/video-viewing-environment/）
   テキストエディターウィジェットに lii-vv を指定する。
   表は TinyMCE の表ツールで編集できるよう、素の table のままにしている。
   ========================================================================== */

/* Elementor の max-width:100%（クラス4つぶん）に勝たせるため重ねている。 */
.elementor.elementor .lii-vv.lii-vv.lii-vv {
	max-width: 820px;
}

/* 「動画視聴における推奨環境」の帯 */
.lii-vv .lii-vv-box {
	margin: 44px 0 24px;
	padding: 14px 20px;
	border-left: 4px solid var(--lii-charcoal);
	background: var(--lii-parchment);
	font-size: 15px;
	font-weight: 700;
	color: var(--lii-ink);
}

.lii-vv .lii-vv-box:first-child {
	margin-top: 0;
}

/* 【PCの場合】などの小見出し */
.lii-vv .lii-vv-sub {
	margin: 32px 0 16px;
	padding-bottom: 10px;
	border-bottom: 1px solid var(--lii-line);
	font-family: var(--lii-serif);
	font-size: 15px;
	font-weight: 700;
	color: var(--lii-ink);
}

.lii-vv table {
	width: 100%;
	margin-bottom: 8px;
	border-collapse: collapse;
	font-size: 13px;
}

/*
 * 親テーマが table :is(th,td) に罫線と文字サイズを直接当ててくるので、
 * td 側にも明示する（table への指定は継承されない）。
 */
.lii-vv td {
	padding: 14px 16px;
	border: 1px solid var(--lii-line-soft);
	font-size: 13px;
	line-height: 1.9;
	color: var(--lii-text-mute);
	vertical-align: top;
}

/* 左の見出しセル。TinyMCE で編集しても崩れないようクラスで指定する。 */
.lii-vv td.lii-vv-th {
	width: 22%;
	background: var(--lii-parchment);
	font-weight: 700;
	color: var(--lii-charcoal);
}

/* 注意書き（赤） */
.lii-vv .lii-vv-red {
	margin-bottom: 6px;
	font-size: 12.5px;
	line-height: 1.9;
	color: #c0392b;
}

.lii-vv .lii-vv-note {
	margin-top: 20px;
	font-size: 12.5px;
}

.lii-vv .lii-vv-note--small {
	margin-top: 16px;
	font-size: 12px;
	color: var(--lii-text-soft);
}

.lii-vv .lii-vv-mark {
	background: #fdf3d0;
}

/* iPhone の操作手順の画像。縦長なので幅で止める。 */
.lii-vv .lii-vv-photo {
	max-width: 260px;
	margin-top: 20px;
}

.lii-vv .lii-vv-photo img {
	display: block;
	width: 100%;
	height: auto;
}

@media (max-width: 575px) {
	.lii-vv td {
		display: block;
		width: auto;
		border-bottom: none;
	}

	.lii-vv tr:last-child td:last-child {
		border-bottom: 1px solid var(--lii-line-soft);
	}

	.lii-vv td.lii-vv-th {
		width: auto;
	}
}