@charset "UTF-8";
/* =====================================================================
 * 桐箱（KIRIBAKO）  共通スタイル  common/css/kiribako.css
 *   構造は FEDA/LEAPS/Luna のコンポーネント（btn・card・message系・menu_box/header/dashboard）を踏襲。
 *   配色・書体は桐箱ブランド（brand-ux 第3部 D1/D4）に置換：
 *     藍(navy #1B2A4A)=主・信頼 ／ 生成り(cream #F5F1E8)=地 ／ 金茶(gold #B8862B)=報酬・成果アクセント限定。
 *   UD系ゴシック・本文17px+・数字は等幅・コントラスト4.5:1・主要タッチ56/最小48px。
 *   禁止：紫金グラデ／成功者写真／煽りタイポ（D7・MLM記号）。
 *   モバイルファースト（既定=スマホ、min-width で拡張）。
 * ===================================================================== */

:root{
	--navy:#1B2A4A;        /* 主・藍（信頼） */
	--navy-2:#26395E;      /* 藍の明（グラデ/ホバー） */
	--navy-ink:#14202E;    /* 本文＝ほぼ黒に近い濃藍（白地で高コントラスト） */
	--cream:#F5F1E8;       /* 地・生成り */
	--cream-2:#EFE9DB;     /* 生成りの濃 */
	--paper:#FFFFFF;
	--ink:#14202E;         /* 主要テキスト */
	--ink-soft:#5A6473;    /* 補助テキスト（4.5:1確保） */
	--line:#E2DACB;        /* 生成り系の境界線 */
	--line-2:#D6CCB8;
	--gold:#B8862B;        /* 金茶（報酬・成果のアクセント＝限定使用） */
	--gold-soft:#8A6114;   /* 金茶テキスト（実測：紙5.5:1・生成り4.9:1・金淡地4.7:1＝WCAG AA。旧#A9791Fは紙3.9:1で不適合だったため2026-07-12に是正） */
	--gold-bg:#F3EBD8;     /* 金茶の淡背景 */
	--paper-2:#FCFAF4;     /* 紙（純白より一段温かい面＝カード） */
	--gold-hi:#CBA85C;     /* 薄金（濃藍上の金文字・大級表示用） */
	--gold-deep:#8A6114;   /* 濃金茶（白地の小さめ文字用＝紙5.3:1・生成り4.9:1） */
	--slate:#5A6B82;       /* 識別用の石板（3色目） */
	--ok:#2F8F6B; --info:#2E6FA8; --warn:#B5791C; --err:#B23B36;
	--radius:14px; --radius-s:10px; --radius-l:18px;
	--shadow-s:0 2px 10px rgba(20,30,50,.08);
	--shadow-m:0 8px 28px rgba(20,30,50,.12);
	--maxw:1040px;         /* サイト全体の共通コンテナ幅。km-tiles（メニュー4列上限）と同値に統一（2026-07-13）。
	                          全体の幅がメニューの上限より広い必要はない＝ひとつの値で足りる（1080→1280は撤回）。 */
	--tap:48px;            /* 最小タッチ */
	--tap-lg:56px;         /* 主要タッチ */
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
	margin:0;
	color:var(--ink, #14202E);
	background:var(--cream, #F5F1E8);
	font-family:"BIZ UDPGothic","Hiragino Sans","Noto Sans JP",system-ui,sans-serif;
	font-size:17px; line-height:1.85; letter-spacing:.01em; word-break:auto-phrase;
	font-variant-numeric:tabular-nums lining-nums;   /* 数字は等幅（金額の桁が揃う・D4） */
	-webkit-font-smoothing:antialiased; overflow-x:hidden;
}
img{max-width:100%; height:auto; vertical-align:middle}
a{color:var(--gold-soft); text-decoration:underline; text-underline-offset:.16em}
a:hover{color:var(--navy)}
.wrap{max-width:var(--maxw); margin:0 auto; padding:0 18px}
.serif{font-family:"Shippori Mincho B1",serif}
h1,h2,h3{margin:0; line-height:1.4; color:var(--ink); font-weight:700}
p{margin:0 0 1.2em}
.muted{color:var(--ink-soft)}
.center{text-align:center}
/* キーボード操作の可視フォーカス（アクセシビリティ） */
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{
	outline:3px solid rgba(27,42,74,.45); outline-offset:2px; border-radius:4px}

/* ===== ボタン（FEDA/Luna .btn 系を踏襲・桐箱色） ===== */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:8px;
	min-height:var(--tap); padding:12px 22px; border:0; border-radius:var(--radius-s);
	font-family:inherit; font-size:16px; font-weight:700; line-height:1.2; cursor:pointer;
	text-decoration:none; transition:background .15s ease,box-shadow .15s ease,color .15s ease}
.btn-navy{background:var(--navy, #1B2A4A); color:#fff; box-shadow:0 2px 8px rgba(20,30,50,.18)}
.btn-navy:hover:not(:disabled){background:var(--navy-2, #26395E); color:#fff; box-shadow:0 4px 14px rgba(20,30,50,.24)}
.btn-gold{background:var(--gold, #B8862B); color:var(--navy-ink, #14202E); box-shadow:0 2px 8px rgba(140,100,30,.22)}   /* 報酬/成果アクセント＝限定使用。金地×濃藍文字5.1:1（白文字は3.2:1で不適合のため2026-07-12是正） */
.btn-gold:hover:not(:disabled){background:var(--gold-soft); color:#fff; box-shadow:0 4px 14px rgba(140,100,30,.3)}
.btn-ghost{background:var(--paper, #FFFFFF); color:var(--navy, #1B2A4A); border:1.5px solid #D6CCB8; border-color:var(--line-2)}
.btn-ghost:hover:not(:disabled){background:var(--cream-2); color:var(--navy); border-color:var(--navy)}
.btn:disabled{opacity:.5; cursor:not-allowed}
.btn-block{display:flex; width:100%}
.btn-lg{min-height:var(--tap-lg); padding:16px 28px; font-size:17px}
.btn-sm{min-height:40px; padding:8px 16px; font-size:14.5px}

/* ===== カード／フラッシュ ===== */
.card{background:var(--paper); border:1px solid var(--line); border-radius:var(--radius); padding:20px; box-shadow:var(--shadow-s)}
.flash{border-radius:var(--radius-s); padding:13px 16px; margin:14px 0; font-size:15px; font-weight:700}
.flash.ok{background:var(--gold-bg); border:1px solid var(--gold); color:var(--gold-soft)}
.flash.err{background:#FBEAE9; border:1px solid #E2B5B2; color:var(--err)}

/* ===== メッセージバー（FEDA .message 準拠：意味別の落ち着いた配色・煽らない） ===== */
.message{position:relative; display:block; margin:7px 0; padding:14px 32px 14px 18px; border-radius:8px;
	color:#fff; font-size:14.5px; font-weight:700; box-shadow:0 1px 6px rgba(0,0,0,.18)}
a.message:hover{filter:brightness(1.05); color:#fff}   /* グローバル a:hover{color:var(--navy)}(詳細度11) がmessageの白文字(詳細度10)に勝ち、hover時に紺文字化してコントラスト崩壊するバグの修正。a.message:hover(詳細度21)で確実に上書き */
a.message:after{content:"›"; position:absolute; right:14px; top:50%; transform:translateY(-50%); font-size:18px; opacity:.85}
.message_normal{background:linear-gradient(to left,#2f5d8f 0%,#1f3f63 15%)}   /* 通常＝藍。明色は右端の予約余白(矢印用・本文非侵入域)相当のみ */
.message_success{background:linear-gradient(to left,#2f8f6b 0%,#246b51 15%)}  /* 成功＝緑 */
.message_error{background:linear-gradient(to left,#c08a2b 0%,#8a6320 15%)}    /* 注意＝金茶 */
.message_fault{background:linear-gradient(to left,#c0524b 0%,#933e36 15%)}    /* 警告＝赤 */
.message_conf{background:linear-gradient(to left,#c0524b 0%,#933e36 15%)}

/* =====================================================================
 *  公開・ログイン枠（inc/layout.php）
 * ===================================================================== */
.lp-nav{background:var(--navy); color:#fff; position:sticky; top:0; z-index:5}
.lp-nav .wrap{display:flex; align-items:center; justify-content:space-between; height:64px}
.nav-brand{display:flex; align-items:center; gap:10px; text-decoration:none; color:#fff}
.nav-brand .brand-chip{display:inline-flex; align-items:center; padding:5px 9px; background:var(--paper);
	border-radius:9px; box-shadow:inset 0 0 0 1px rgba(20,30,50,.08)}
.nav-brand .brand-chip img{height:30px; width:auto; display:block}
.nav-brand .bt{display:flex; flex-direction:column; line-height:1.05}
.nav-brand .wm{font-family:"Shippori Mincho B1",serif; font-size:20px; font-weight:700; letter-spacing:.14em}
.nav-brand small{font-size:12px; letter-spacing:.22em; color:rgba(255,255,255,.78)}   /* 装飾ワードマーク（ロゴの一部扱い） */
.lp-nav .nav-right{display:flex; gap:8px}
.lp-nav .btn-ghost{background:rgba(255,255,255,.1); color:#fff; border-color:rgba(255,255,255,.4)}
.lp-nav .btn-ghost:hover:not(:disabled){background:rgba(255,255,255,.2); color:#fff; border-color:#fff}

.lp-foot{background:var(--navy); color:rgba(255,255,255,.82); margin-top:40px; padding:28px 0}
.lp-foot .foot-brand{display:flex; align-items:baseline; gap:8px; margin-bottom:8px}
.lp-foot .foot-brand .wm{font-family:"Shippori Mincho B1",serif; font-size:18px; letter-spacing:.14em; color:#fff}
.lp-foot .foot-brand small{font-size:12px; letter-spacing:.2em; color:rgba(255,255,255,.72)}   /* 装飾ワードマーク（ロゴの一部扱い） */
.lp-foot .foot-links{display:flex; gap:16px; flex-wrap:wrap; margin-bottom:12px}
.lp-foot .foot-links a{color:rgba(255,255,255,.88); font-size:14px}
.lp-foot .foot-copy{border-top:1px solid rgba(255,255,255,.18); padding-top:12px; font-size:14px; color:rgba(255,255,255,.72)}

/* =====================================================================
 *  ログイン（スプリット：左＝桐の白木パネル／右＝フォーム）
 *   署名要素＝白木に墨藍の縦書き「桐箱」（美術品桐箱の“箱書き”文化）＋金茶の落款。
 *   紋様なし・木目はCSSの柾目表現。/common/img/auth-visual.jpg（桐材の木目写真）を
 *   置くと左パネルに適用され、白木の淡いかぶせで文字可読を担保する。
 *   ※要所は「リテラル→var」の二段宣言（var()が効かない環境でも成立する防弾仕様）。
 * ===================================================================== */
.auth-split{display:flex; min-height:100vh; min-height:100svh; background:var(--cream, #F5F1E8)}

/* --- 左：桐の白木パネル（柾目＝縦の木理をCSSで） --- */
.auth-visual{position:relative; flex:1 1 52%; overflow:hidden; background:var(--navy, #1B2A4A)}
/* --- 上半分：桐の白木（引き出しの上段） --- */
.av-wood{position:absolute; top:0; left:0; right:0; height:50%; background-color:#EFE6D1;
	background-image:
		repeating-linear-gradient(90deg, rgba(146,114,62,.10) 0 1px, transparent 1px 19px),
		repeating-linear-gradient(90deg, rgba(146,114,62,.06) 0 1px, transparent 1px 47px),
		repeating-linear-gradient(90deg, rgba(184,150,95,.05) 0 74px, transparent 74px 165px),
		linear-gradient(180deg, #F3EBD9 0%, #EDE3CC 100%);
	box-shadow:inset 0 0 70px rgba(120,92,48,.14)}
.av-wood::before{content:""; position:absolute; inset:0; pointer-events:none; opacity:.5;
	background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)' opacity='0.05'/></svg>")}
/* --- 下半分：藍（引き出しの下段） --- */
.av-navy{position:absolute; left:0; right:0; bottom:0; height:50%; background-color:#16233F;
	background-image:
		radial-gradient(120% 140% at 80% 0%, rgba(203,168,92,.14), transparent 58%),
		linear-gradient(200deg, #24365C 0%, #1B2A4A 55%, #101A30 100%)}
.av-navy::before{content:""; position:absolute; inset:0; pointer-events:none; opacity:.4;
	background-image:repeating-conic-gradient(rgba(255,255,255,.05) 0% 25%, transparent 0% 50%);
	background-size:46px 46px;
	-webkit-mask-image:linear-gradient(180deg,rgba(0,0,0,.9),rgba(0,0,0,.15) 80%);
	mask-image:linear-gradient(180deg,rgba(0,0,0,.9),rgba(0,0,0,.15) 80%)}   /* 市松紋様（元の紺パネル意匠を継承） */
/* --- 継ぎ目：抽斗の合わせ目（金の細線＋二重影） --- */
.av-seam{position:absolute; left:0; right:0; top:50%; height:1px; z-index:1;
	background:linear-gradient(90deg, transparent, rgba(184,134,43,.7) 18%, rgba(184,134,43,.7) 82%, transparent);
	box-shadow:0 -3px 7px rgba(20,15,5,.16), 0 2px 5px rgba(20,15,5,.22)}
/* --- 写真使用時：継ぎ目デザインを退避し、パネル全面に写真＋藍の淡いかぶせ --- */
.auth-visual[style] .av-wood,.auth-visual[style] .av-navy,.auth-visual[style] .av-seam{display:none}
.auth-visual[style]{background-size:cover; background-position:center}
.auth-visual[style]::after{content:""; position:absolute; inset:0; pointer-events:none;
	background:linear-gradient(180deg, rgba(243,235,217,.5), rgba(27,42,74,.58))}
.av-frame{position:absolute; inset:22px; border:1px solid rgba(184,134,43,.5); pointer-events:none; z-index:1}
.av-frame::after{content:""; position:absolute; inset:7px; border:1px solid rgba(184,134,43,.22)}
.av-inner{position:absolute; inset:0; z-index:2; padding:64px 60px}
.av-what{position:absolute; top:56px; right:56px; margin:0; max-width:58%; text-align:left;
	padding-left:14px; border-left:3px solid #B8862B; border-left-color:var(--gold);
	color:#6B4F26; font-size:14px; font-weight:700; letter-spacing:.12em; line-height:1.9}
.av-inner::before{content:""; position:absolute; right:56px; top:118px; width:min(52%, 300px); aspect-ratio:4/3;
	pointer-events:none; opacity:.3; background-repeat:no-repeat; background-size:contain;
	background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 440 330' fill='none' stroke='%236B4F26' stroke-width='2' stroke-linecap='round'><rect x='14' y='14' width='412' height='302' stroke-width='4'/><path d='M14 208 H426'/><path d='M196 14 V208'/><path d='M306 208 V316'/><path d='M14 44 H196'/><path d='M105 14 V44'/><path d='M14 126 H196'/><path d='M105 44 V126'/><path d='M74 126 V208'/><path d='M137 126 V208'/><path d='M226 208 V248'/><path d='M186 208 A40 40 0 0 0 226 248'/><path d='M306 252 H266'/><path d='M306 292 A40 40 0 0 1 266 252'/><path d='M196 84 H306' stroke-dasharray='9 7'/></svg>")}   /* 間取図＝焦茶の実線（1列表示と同色） */
.av-copy{position:absolute; left:60px; bottom:58px; margin:0;
	color:rgba(255,255,255,.92); font-size:17px; font-weight:700; letter-spacing:.14em; line-height:2.2}   /* 下半分＝藍地のため白文字 */

/* --- 右：フォーム面（和紙グレインの生成り） --- */
.auth-pane{position:relative; flex:1 1 48%; display:flex; flex-direction:column;
	align-items:center; justify-content:center; padding:48px 24px 26px;
	background:var(--paper-2, #FCFAF4)}   /* 外側＝さっきカードだった明るめの茶色。カード自体は下のauth-cardで白 */
.auth-pane::before{content:""; position:absolute; inset:0; pointer-events:none; opacity:.55;
	background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)' opacity='0.045'/></svg>")}
.auth-card{position:relative; width:100%; max-width:432px; z-index:1;
	background:var(--paper, #FFFFFF);
	border:1px solid #E2DACB; border-color:var(--line); border-radius:3px;
	padding:38px 34px 32px;
	box-shadow:0 1px 2px rgba(20,30,50,.05), 0 22px 52px -20px rgba(20,30,50,.24);
	animation:kiriCardIn .6s cubic-bezier(.22,.8,.3,1) both}
.auth-card::before{content:""; position:absolute; top:-1px; left:28px; right:28px; height:2px; border-radius:2px;
	background:linear-gradient(90deg, transparent, #B8862B 30%, #B8862B 70%, transparent)}   /* 封の帯 */
@keyframes kiriCardIn{from{opacity:0; transform:translateY(10px)}}
@media (prefers-reduced-motion:reduce){ .auth-card{animation:none} }
.auth-head{text-align:center; margin-bottom:6px}
.auth-logo{height:62px; width:auto}
.auth-eyebrow{margin:14px 0 2px; font-size:14px; font-weight:700; letter-spacing:.3em; color:var(--gold-deep, #8A6114)}
.auth-title{font-size:30px; font-weight:600; letter-spacing:.1em; margin:0 0 8px; color:var(--ink, #14202E)}
.auth-sub{color:var(--ink, #14202E); font-size:14.5px; margin:0 0 4px}
.auth-form .field{margin-top:18px}
.auth-form label{display:block; font-size:14px; font-weight:700; color:var(--ink, #14202E); margin:0 0 7px;
	letter-spacing:.04em; transition:color .18s ease}
.auth-form .field:focus-within label{color:var(--navy, #1B2A4A)}
.auth-form input[type=email],.auth-form input[type=password],.auth-form input[type=text]{
	width:100%; min-height:var(--tap-lg, 56px); padding:14px 15px; font-size:16px; font-family:inherit;
	border:1.5px solid #D6CCB8; border-color:var(--line-2); border-radius:var(--radius-s, 10px);
	background:#fff; color:var(--ink, #14202E);
	transition:border-color .18s ease, box-shadow .18s ease}
.auth-form input:focus{outline:none; border-color:var(--navy, #1B2A4A); box-shadow:0 0 0 3.5px rgba(27,42,74,.13)}
.auth-form .btn{margin-top:26px}
.btn-seal{position:relative}
.btn-seal::after{content:""; position:absolute; left:50%; bottom:9px; transform:translateX(-50%);
	height:2px; width:0; border-radius:2px; background:var(--gold-hi, #CBA85C); transition:width .26s ease}
.btn-seal:hover:not(:disabled)::after{width:44%}
.btn-seal:active:not(:disabled){transform:translateY(1px)}
.pw-wrap{position:relative}
.pw-wrap input{padding-right:70px}
.pw-toggle{position:absolute; right:8px; top:50%; transform:translateY(-50%); min-height:40px; padding:7px 12px;
	background:var(--cream-2, #EFE9DB); border:1px solid #D6CCB8; border-color:var(--line-2); border-radius:8px;
	font-size:14px; font-weight:700; color:var(--navy, #1B2A4A); cursor:pointer; transition:background .15s ease}
.pw-toggle:hover{background:var(--cream, #F5F1E8); color:var(--navy, #1B2A4A)}
.auth-link{text-align:center; margin:18px 0 0; font-size:14.5px}
.auth-link a{color:var(--navy, #1B2A4A)}
.auth-link a:hover{color:var(--gold-deep, #8A6114)}
.auth-legal{position:relative; z-index:1; display:flex; flex-wrap:wrap; gap:8px 20px;
	justify-content:center; align-items:center; margin-top:26px; font-size:14px}
.auth-legal a{color:var(--ink, #14202E)}
.auth-legal .al-copy{color:var(--ink, #14202E)}

/* SP用ブランドブロック（1列時のみ表示＝フォーム直下：桐箱＋落款＋説明＋キャッチ） */
.auth-brand-sp{display:none}
.abs-copy{display:none}   /* 2列表示では左パネルの av-copy と重複するため既定非表示 */

/* --- 中間段（〜1023px）：パネルを絞って2列を維持 --- */
@media (max-width:1023px){
	.auth-visual{flex:0 0 36%}
	.av-frame{inset:14px}
	.av-inner{padding:34px 28px}
	.av-what{top:22px; right:18px; max-width:76%; letter-spacing:.06em; line-height:1.8}
	.av-inner::before{right:18px; top:88px; width:64%}
	.av-copy{left:28px; bottom:24px; font-size:14px; line-height:2; letter-spacing:.08em; color:rgba(255,255,255,.92)}
	.auth-pane{padding:32px 16px 22px}
	.auth-card{padding:30px 22px 26px}
}
/* --- 1列（〜679px）：この幅ではパネル側にキャッチフレーズを描けなくなるため1列化（指定）。
 *     パネル帯は置かず、ログイン面そのものを桐の白木に。カードは背景白。
 *     ブランド（桐箱＋落款）・システム説明・キャッチはフォーム直下に同伴表示。 --- */
@media (max-width:679px){
	.auth-visual{display:none}
	.auth-pane{min-height:100vh; min-height:100svh; padding:34px 16px 24px; background-color:#EFE6D1;
		background-image:
			url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 440 330' fill='none' stroke='%236B4F26' stroke-width='2' stroke-linecap='round' stroke-opacity='0.14'><rect x='14' y='14' width='412' height='302' stroke-width='4'/><path d='M14 208 H426'/><path d='M196 14 V208'/><path d='M306 208 V316'/><path d='M14 44 H196'/><path d='M105 14 V44'/><path d='M14 126 H196'/><path d='M105 44 V126'/><path d='M74 126 V208'/><path d='M137 126 V208'/><path d='M226 208 V248'/><path d='M186 208 A40 40 0 0 0 226 248'/><path d='M306 252 H266'/><path d='M306 292 A40 40 0 0 1 266 252'/><path d='M196 84 H306' stroke-dasharray='9 7'/></svg>"),
			repeating-linear-gradient(90deg, rgba(146,114,62,.10) 0 1px, transparent 1px 19px),
			repeating-linear-gradient(90deg, rgba(146,114,62,.06) 0 1px, transparent 1px 47px),
			repeating-linear-gradient(90deg, rgba(184,150,95,.05) 0 74px, transparent 74px 165px),
			linear-gradient(180deg, #F3EBD9 0%, #EDE3CC 58%, #E6DABF 100%);
		background-repeat:no-repeat, repeat, repeat, repeat, repeat;
		background-position:center calc(100% - 26px), 0 0, 0 0, 0 0, 0 0;
		background-size:min(78%, 360px) auto, auto, auto, auto, auto;
		box-shadow:inset 0 0 70px rgba(120,92,48,.13)}
	.auth-card{background:var(--paper, #FFFFFF); padding:28px 18px 26px;
		box-shadow:0 1px 2px rgba(60,45,20,.06), 0 20px 46px -18px rgba(90,66,28,.3)}   /* カード内＝確実に白 */
	.auth-brand-sp{display:block; margin:0 4px 26px; text-align:center}
	.abs-name{display:inline-block; margin:0; text-align:left; padding-left:14px;
		border-left:3px solid #B8862B; border-left-color:var(--gold);
		color:#6B4F26; font-size:14px; font-weight:700; letter-spacing:.1em; line-height:1.9}
	/* --- 紺帯：キャッチコピー以下（法務リンク含む）を紺背景＋市松紋様で締める（元の意匠を復元） --- */
	.auth-navy-band{position:relative; overflow:hidden; margin:28px -16px -24px; padding:24px 16px 38px; text-align:center;
		background-color:#16233F;
		background-image:
			radial-gradient(120% 160% at 80% 0%, rgba(203,168,92,.14), transparent 58%),
			linear-gradient(200deg, #24365C 0%, #1B2A4A 55%, #101A30 100%)}
	.auth-navy-band::before{content:""; position:absolute; inset:0; pointer-events:none; opacity:.4; z-index:0;
		background-image:repeating-conic-gradient(rgba(255,255,255,.05) 0% 25%, transparent 0% 50%);
		background-size:46px 46px}   /* 市松紋様 */
	.auth-navy-band>*{position:relative; z-index:1}
	.abs-copy{display:block; margin:0; color:rgba(255,255,255,.92); font-size:15px; font-weight:700; letter-spacing:.12em; line-height:2.05}
	.auth-navy-band .auth-legal{margin-top:18px}
	.auth-navy-band .auth-legal a,.auth-navy-band .auth-legal .al-copy{color:rgba(255,255,255,.82)}   /* 紺地＝白文字（グレー禁止ルール） */
}

/* =====================================================================
 *  ログイン後アプリ枠（header.php / footer.php）
 * ===================================================================== */
.kiri-app{background:var(--cream); min-height:100vh}
.kiri-app:not(.menu-mode){display:flex; flex-direction:column; min-height:100vh}   /* sticky footer（FEDA/Luna踏襲：内容が短くてもフッターは画面最下端） */
.imp-bar{position:sticky; top:0; z-index:7; display:flex; align-items:center; justify-content:center; gap:14px;
	background:linear-gradient(90deg,#16233F,#2a3d63); color:#fff; padding:7px 16px; font-size:13px; font-weight:700}
.imp-bar a{color:var(--gold-hi, #CBA85C); text-decoration:none; border:1px solid rgba(255,255,255,.5); border-radius:999px; padding:3px 14px}
.imp-bar a:hover{background:rgba(255,255,255,.15); color:var(--gold-hi, #CBA85C)}

/* --- メニュー画面（管理者TOP）：藍ヘッド → 大ロゴ → タイル --- */
.kiri-app.menu-mode{background:var(--cream)}
.msgbars{background:var(--navy); padding:10px 14px 2px}
.msgbars .message{margin:6px 0}
.menu-head{background:var(--navy); color:#fff; text-align:center; padding:8px 16px 22px;
	box-shadow:0 6px 18px rgba(20,30,50,.18)}
.menu-head .submenu-back{text-align:left; margin-bottom:6px}
.menu-head .submenu-back a{color:rgba(255,255,255,.9); font-size:13.5px}
.menu-head .menu_logo{margin:0}
.menu-head .menu_logo{display:inline-block; margin-top:6px; background:var(--paper); padding:16px 32px; border-radius:18px; box-shadow:0 6px 18px rgba(0,0,0,.20)}
.menu-head .menu_logo img{display:block; width:auto; height:88px; max-width:none}
.menu{display:block}
.menu_wrap{max-width:var(--maxw); margin:0 auto; padding:22px 14px 40px}
.menu_price{margin:0 0 18px; padding:13px 18px; border-radius:12px; text-align:center;
	background:var(--paper); border:1px solid var(--line); color:var(--ink); font-size:14.5px; font-weight:700}
.menu_price .mp_num{font-size:17px; color:var(--gold-soft)}

/* タイル（FEDA menu_list/menu_box 踏襲。スマホ=3列、PC=5列） */
.menu_list{display:flex; flex-wrap:wrap; justify-content:space-between}
.menu_box{width:31%; margin-bottom:14px; padding:16px 6px 13px; box-sizing:border-box; position:relative;
	display:flex; flex-direction:column; align-items:center; gap:8px;
	background:var(--paper); border:1px solid var(--line); border-radius:var(--radius);
	text-decoration:none; color:var(--ink)}
	/* FEDA/Luna同様のgroove hover。ただし桐箱の下地は明るい生成り（Lunaは暗背景）のため、
	   土台の薄枠だけは残す＝背景色に応じた独自調整（design-rules：盲目移植しない） */
.menu_box:before{transition-duration:.3s; transition-property:top,right,bottom,left;
	position:absolute; top:0; right:0; bottom:0; left:0; content:''}
.menu_box:hover:before,.menu_box:focus:before,.menu_box:active:before{
	z-index:2; top:-8px; right:-8px; bottom:-8px; left:-8px; border:var(--gold, #B8862B) solid 4px; border-radius:0.7em;
	box-shadow:0 0 10px var(--gold-bg, #F3EBD8), 0 0 30px var(--gold-hi, #CBA85C)}
.menu_box .emo{width:54px; height:54px; display:flex; align-items:center; justify-content:center;
	border-radius:50%; border:2px solid var(--line-2); background:var(--paper)}
.menu_box .emo .emo-i{font-size:26px; line-height:1; display:block}
/* タイル色＝3色限定（navy/gold/slate）。emoリングの色で識別 */
.menu_box.cluster_navy .emo{border-color:#B9C3E0}   /* パステル藍（Luna cluster_navy踏襲） */
.menu_box.cluster_gold .emo{border-color:#F3DA9C}   /* パステル金（Luna cluster_gold踏襲） */
.menu_box.cluster_slate .emo{border-color:#C7D0DC}  /* パステル石板 */
.menu_box.cluster_sage .emo{border-color:#BFD9C4}   /* パステル若草（Luna mint系→桐箱の和トーン緑） */
.menu_box.cluster_clay .emo{border-color:#E4C4A8}   /* パステル土器（桐＝木箱の温かみ・和の暖色） */
.menu_box .lbl{display:flex; align-items:center; justify-content:center; text-align:center;
	min-height:2.7em; line-height:1.32; font-size:13.5px; font-weight:700}
.menu_blank{width:31%}

/* manager（枠線ボタン・大アイコンなし） */
.menu_manager{display:flex; justify-content:center; flex-wrap:wrap; gap:10px; margin:10px 0 24px}
.menu_manager_box{position:relative; flex:1 1 0; min-width:140px; max-width:260px; min-height:var(--tap); padding:14px 12px;
	display:flex; align-items:center; justify-content:center; text-align:center;
	background:var(--paper); border:1.5px solid var(--line-2); border-radius:var(--radius-s);
	text-decoration:none; color:var(--navy); font-weight:700; font-size:14.5px}
.menu_manager_box:before{transition-duration:.3s; transition-property:top,right,bottom,left;
	position:absolute; top:0; right:0; bottom:0; left:0; content:''}
.menu_manager_box:hover:before,.menu_manager_box:focus:before,.menu_manager_box:active:before{
	z-index:2; top:-8px; right:-8px; bottom:-8px; left:-8px; border:var(--gold, #B8862B) solid 3px; border-radius:0.7em;
	box-shadow:0 0 10px var(--gold-bg, #F3EBD8), 0 0 30px var(--gold-hi, #CBA85C)}
.menu_manager_box.logout{color:var(--ink-soft)}

/* --- 下層ページ：ヘッダー＋ドロワー（FEDA header 踏襲） --- */
.header{background:linear-gradient(180deg,#000 0%,#161C30 55%,var(--navy) 100%); color:#fff; position:sticky; top:0; z-index:5;
	display:flex; align-items:center; justify-content:space-between; padding:0 14px; min-height:60px; padding-right:70px}   /* 右70px＝固定ハンバーガー(44px+右14px)分を確保し戻るボタンと重ならない */
.kiri-app.imp .header{top:36px}
.header_wrap a{display:flex; align-items:center; gap:10px; text-decoration:none; color:#fff}
.header_wrap a:hover{color:#fff}   /* グローバルa:hoverとの同点勝ちをソース順に頼らず明示的に確定 */
.header_logo{margin:0; background:var(--paper); padding:5px 9px; border-radius:8px; display:flex; align-items:center}
.header_logo img{height:30px; width:auto}
.header .title{font-size:17px; font-weight:700; display:flex; align-items:center; gap:8px; color:#fff}   /* h1-h3グローバルのcolor:var(--ink)より明示指定を優先（藍帯上は白） */
.header .title .title_ico{width:34px; height:34px; display:flex; align-items:center; justify-content:center;
	border-radius:50%; border:2px solid rgba(255,255,255,.5); background:rgba(255,255,255,.1)}
.header .title .title_ico .emo-i{font-size:18px}
.header .title .title_ico.cluster_gold{border-color:#F3DA9C}
.header .title .title_ico.cluster_slate{border-color:#C7D0DC}
.header .title .title_ico.cluster_navy{border-color:#B9C3E0}   /* タイルと完全同色（Luna cluster_navy踏襲） */
.header .title .title_ico.cluster_sage{border-color:#BFD9C4}
.header .title .title_ico.cluster_clay{border-color:#E4C4A8}
.header_subnav .return{position:relative; display:inline-block; padding:5px 24px; border:solid 2px var(--gold); border-radius:5px;
	background:#fff; color:var(--navy); font-size:13px; font-weight:700; text-decoration:none; white-space:nowrap}
.header_subnav .return:hover{background:var(--cream)}

/* ハンバーガー */
.header_spnav_wrap{position:fixed; right:14px; top:14px; z-index:8; width:44px; height:44px;
	display:flex; align-items:center; justify-content:center; cursor:pointer}
.kiri-app.imp .header_spnav_wrap{top:50px}
.header_spnav{position:relative; width:24px; height:18px}
.header_spnav span,.header_spnav:before,.header_spnav:after{content:""; position:absolute; left:0; width:100%; height:2.5px; background:#fff; border-radius:2px; transition:.2s}
.header_spnav:before{top:0} .header_spnav span{top:50%; transform:translateY(-50%)} .header_spnav:after{bottom:0}
.nav-open .header_spnav:before{top:50%; transform:translateY(-50%) rotate(45deg)}
.nav-open .header_spnav span{opacity:0}
.nav-open .header_spnav:after{bottom:50%; transform:translateY(50%) rotate(-45deg)}

/* ドロワー（全画面オーバーレイ） */
.nav{position:fixed; inset:0; z-index:6; background:var(--navy); color:#fff; padding:64px 16px 30px;
	overflow-y:auto; transform:translateX(100%); transition:transform .22s ease; visibility:hidden}
.nav-open .nav{transform:translateX(0); visibility:visible}
.nav h2{color:#fff; font-size:16px; margin:0 0 10px}
.nav .menu_price{background:rgba(255,255,255,.08); border-color:rgba(255,255,255,.18); color:#fff}
.nav .menu_price .mp_num{color:var(--gold-soft)}
.nav .menu_box{background:rgba(255,255,255,.06); border-color:rgba(255,255,255,.14); color:#fff}
.nav .menu_box:hover{background:rgba(255,255,255,.12); color:#fff}
.nav .menu_box .emo{background:rgba(255,255,255,.08); border-color:rgba(255,255,255,.28)}
.nav .menu_manager_box{background:rgba(255,255,255,.06); border-color:rgba(255,255,255,.2); color:#fff}
.nav .bread_wrap{display:none}

.main{max-width:var(--maxw); margin:0 auto; padding:16px 16px 60px; flex:1 0 auto; width:100%; box-sizing:border-box}
.main .title_wrap{margin-bottom:14px}
.bread{display:flex; flex-wrap:wrap; gap:6px; list-style:none; margin:0; padding:0; font-size:12.5px; color:var(--ink-soft)}
.bread li:not(:last-child):after{content:"▸"; margin-left:6px; opacity:.6}
.bread a{color:var(--ink-soft)}
.bread a:hover{color:var(--ink-soft)}   /* グローバルa:hoverとの同点勝ちをソース順に頼らず明示的に確定 */
/* ===== 検索フォーム（FEDA .form_send_input/.form_send_btn 踏襲。虫眼鏡は左に配置） ===== */
/* ===== セレクトボックス（FEDA .form_select_wrap 踏襲：右に金帯＋白矢印。フォーカスで消えない） ===== */
.form_select_wrap{display:inline-block; position:relative}
.form_select_wrap select{-webkit-appearance:none; -moz-appearance:none; appearance:none; z-index:1; position:relative;
	height:var(--tap, 48px); margin:0; padding:0 30px 0 12px; border:1px solid var(--line-2); border-radius:8px;
	background:transparent; font-size:15px; color:var(--ink); box-sizing:border-box; min-width:100%}
.form_select_wrap select::-ms-expand{display:none}
.form_select_wrap:before{z-index:0; position:absolute; top:0; right:0; width:26px; height:100%;
	border-top-right-radius:8px; border-bottom-right-radius:8px; background:var(--navy); content:''}
.form_select_wrap:after{z-index:0; position:absolute; top:0; right:9px; bottom:0; width:0; height:0; margin:auto 0;
	border-width:4px 4px 0 4px; border-style:solid; border-color:#fff transparent transparent transparent; content:''}

.form_send_wrap{display:flex}
.form_send_input{flex:1; min-width:0; padding:14px 16px 14px 44px; border:1px solid var(--line-2); border-right:none;
	border-radius:8px 0 0 8px; background:var(--paper) url(/common/img/icon_search.png) 14px center/18px no-repeat;
	font-size:16px; color:var(--ink); -webkit-appearance:none; appearance:none}
.form_send_input::placeholder{color:var(--ink-soft)}
.form_send_input:focus{outline:none; background-color:var(--paper); box-shadow:inset 0 0 0 2px var(--gold)}
.form_send_btn{flex:0 0 auto; padding:14px 22px; border:none; border-radius:0 8px 8px 0;
	background:var(--navy); color:#fff; font-size:15px; font-weight:700; letter-spacing:.06em; cursor:pointer; transition:filter .2s}
.form_send_btn:hover{filter:brightness(1.25)}

.footer{background:linear-gradient(180deg,#000 0%,#161C30 55%,var(--navy) 100%); color:rgba(255,255,255,.8);
	text-align:center; font-size:12.5px; padding:20px 16px; flex-shrink:0}
.footer a{color:var(--gold-hi, #CBA85C)}
.footer a:hover{color:var(--gold-hi, #CBA85C)}   /* グローバルa:hoverとの同点勝ちをソース順に頼らず明示的に確定 */

/* =====================================================================
 *  メンバーダッシュボード（home.php・モバイルファースト）
 * ===================================================================== */
.dash{max-width:var(--maxw); margin:0 auto; padding:14px 16px 0}   /* 他ページ（.main/.pagewrap/.wrap）と同じ共通コンテナ幅（2026-07-13統一） */
.dash-greet{display:flex; align-items:flex-start; justify-content:space-between; gap:12px; margin:6px 0 14px}
.dg-hi{font-size:18px; margin:0 0 8px} .dg-hi b{font-weight:700}
.dg-tags{display:flex; flex-wrap:wrap; gap:6px}
.tag{display:inline-flex; align-items:center; min-height:26px; padding:3px 10px; border-radius:999px;
	font-size:12.5px; font-weight:700; text-decoration:none}
.tag-role{background:var(--navy); color:#fff}
.tag-plan{background:var(--gold-bg); color:var(--gold-soft); border:1px solid var(--gold)}
.tag-verified{background:#E6F2EC; color:#1F6A4E /* on淡緑5.7:1（旧var(--ok)は3.5:1） */; border:1px solid #A9D6C1}
.tag-pending{background:#F3EDDD; color:#8A5A10 /* on淡黄5.1:1（旧var(--warn)は3.1:1） */; border:1px solid #E0CFA0}
.tag-unverified{background:var(--paper); color:var(--ink-soft); border:1px dashed var(--line-2)}
.dg-menu{flex:0 0 auto; display:inline-flex; flex-direction:column; align-items:center; justify-content:center;
	min-width:54px; min-height:var(--tap); padding:5px 10px; background:var(--paper); border:1px solid var(--line);
	border-radius:12px; text-decoration:none; color:var(--navy); font-size:11px; font-weight:700; box-shadow:var(--shadow-s)}
.dg-menu span{font-size:20px; line-height:1}

.secure-note{display:flex; align-items:flex-start; gap:8px; background:#EAEEF6; border:1px solid #C9D5E6;
	border-radius:var(--radius-s); padding:11px 14px; margin:0 0 14px; font-size:13.5px; color:var(--navy); line-height:1.6}
.secure-note .lock{flex:0 0 auto}

.trial-band{background:var(--gold-bg); border:1px solid var(--gold); border-radius:var(--radius); padding:14px 16px; margin:0 0 16px}
.trial-band .tb-main{font-size:15px; margin-bottom:4px} .trial-band .tb-main b{color:var(--gold-soft)}
.trial-band .tb-sub{font-size:13px; color:var(--ink-soft); line-height:1.6; margin-bottom:10px}

/* 主役の数字（3カード。1枚目=primary・大きく） */
.stat-grid{display:grid; grid-template-columns:1fr 1fr; gap:12px; margin:0 0 16px}
.stat-card{display:flex; flex-direction:column; gap:4px; min-height:104px; padding:16px;
	background:var(--paper); border:1px solid var(--line); border-radius:var(--radius);
	text-decoration:none; color:var(--ink); box-shadow:var(--shadow-s)}
.stat-card:hover{box-shadow:var(--shadow-m); color:var(--ink)}
.stat-primary:hover{color:#fff}   /* .stat-card:hover の var(--ink) 上書きが藍背景で1.16:1まで潰れるバグ修正（詳細度0,2,1で確実に勝つ） */
.stat-primary{grid-column:1 / -1; background:var(--navy); border-color:var(--navy); color:#fff}
.stat-primary .sc-foot,.stat-primary .sc-label{color:rgba(255,255,255,.82)}
.stat-warn{border-color:var(--warn); background:#FBF3E2}
.sc-label{font-size:13px; color:var(--ink-soft); font-weight:700}
.sc-num{font-size:40px; font-weight:700; line-height:1.05; letter-spacing:.01em; font-variant-numeric:tabular-nums}
.sc-num small{font-size:15px; font-weight:700; margin-left:3px; opacity:.85}
.sc-num-sm{font-size:24px}
.sc-foot{font-size:12.5px; color:var(--ink-soft)}

/* 使用量メーター */
.usage-card{background:var(--paper); border:1px solid var(--line); border-radius:var(--radius); padding:15px 16px; margin:0 0 16px; box-shadow:var(--shadow-s)}
.uc-head{display:flex; align-items:baseline; justify-content:space-between; margin-bottom:9px}
.uc-label{font-size:14px; font-weight:700}
.uc-count{font-size:14px; color:var(--ink-soft); font-variant-numeric:tabular-nums} .uc-count b{font-size:18px; color:var(--navy)}
.uc-bar{height:10px; background:var(--cream-2); border-radius:999px; overflow:hidden}
.uc-fill{display:block; height:100%; background:var(--navy); border-radius:999px; transition:width .3s ease}
.uc-fill.near{background:var(--gold)}
.uc-hint{font-size:12.5px; color:var(--ink-soft); margin-top:8px}
.uc-near{font-size:13px; color:var(--gold-soft); margin-top:8px; font-weight:700}

/* オンボ進捗 */
.onboard-card{background:var(--paper); border:1px solid var(--line); border-radius:var(--radius); padding:16px; margin:0 0 16px; box-shadow:var(--shadow-s)}
.ob-head{display:flex; align-items:baseline; justify-content:space-between; margin-bottom:9px}
.ob-title{font-size:15px; font-weight:700}
.ob-count{font-size:13px; color:var(--gold-soft); font-weight:700}
.ob-bar{height:8px; background:var(--cream-2); border-radius:999px; overflow:hidden; margin-bottom:12px}
.ob-fill{display:block; height:100%; background:var(--gold); border-radius:999px; transition:width .3s ease}
.ob-list{list-style:none; margin:0 0 14px; padding:0}
.ob-list li{display:flex; align-items:center; gap:10px; padding:7px 0; font-size:14px; border-bottom:1px solid var(--cream-2)}
.ob-list li:last-child{border-bottom:0}
.ob-list li.done{color:var(--ink-soft)}
.ob-check{flex:0 0 auto; width:24px; height:24px; display:flex; align-items:center; justify-content:center;
	border-radius:50%; background:var(--cream-2); color:var(--ink-soft); font-size:12px; font-weight:700}
.ob-list li.done .ob-check{background:var(--ok); color:#fff}  /* ✓は非テキスト（WCAG 1.4.11＝3:1基準）：白on緑3.99:1で適合（2026-07-12監査判定） */

/* クイック操作 */
.quick-row{display:grid; grid-template-columns:repeat(4,1fr); gap:8px; margin:0 0 18px}
.quick-btn{display:flex; flex-direction:column; align-items:center; gap:5px; min-height:64px; padding:10px 4px;
	background:var(--paper); border:1px solid var(--line); border-radius:var(--radius-s);
	text-decoration:none; color:var(--ink); font-size:12px; font-weight:700; box-shadow:var(--shadow-s)}
.quick-btn:hover{background:var(--cream-2); color:var(--ink)}
.qb-ico{font-size:22px; line-height:1}

/* ===== home下部の全機能グリッド（Luna home.php .dash-grid/.dash-tile 移植・桐箱パレット） ===== */
.dash-sec-lbl{font-size:13px; font-weight:700; color:var(--ink-soft); letter-spacing:.08em; margin:26px 0 10px}
.dash-grid{display:flex; flex-wrap:wrap; gap:12px; margin:0 0 8px}
.dash-tile{position:relative; width:calc(25% - 9px); min-width:96px; box-sizing:border-box; display:flex; flex-direction:column;
	align-items:center; gap:8px; padding:16px 8px 12px; border-radius:16px; background:var(--paper); color:var(--ink);
	font-size:12.5px; font-weight:600; text-align:center; line-height:1.35; text-decoration:none;
	box-shadow:var(--shadow-s); transition:box-shadow .2s}
.dash-tile:hover{box-shadow:var(--shadow-m); color:var(--ink)}
.dash-tile:before{transition-duration:.3s; transition-property:top,right,bottom,left;
	position:absolute; top:0; right:0; bottom:0; left:0; content:''}
.dash-tile:hover:before,.dash-tile:focus:before{   /* menu_boxと同一の金グロー（FEDA/Luna踏襲）＝ホバーが一目で分かる */
	z-index:2; top:-8px; right:-8px; bottom:-8px; left:-8px; border:var(--gold, #B8862B) solid 4px; border-radius:0.7em;
	box-shadow:0 0 10px var(--gold-bg, #F3EBD8), 0 0 30px var(--gold-hi, #CBA85C)}
.dash-tile .emo{font-size:25px; line-height:1; width:48px; height:48px; display:flex; align-items:center;
	justify-content:center; border-radius:50%; background:transparent; border:2px solid var(--line-2); box-sizing:border-box}
.dash-tile .emo .emo-i{font-size:25px; line-height:1; display:block}   /* サイズ明示＝絵文字つぶれ防止（menu_boxの.emo-i規則と同型） */
.dash-tile.cluster_navy .emo{border-color:#B9C3E0}
.dash-tile.cluster_gold .emo{border-color:#F3DA9C}
.dash-tile.cluster_slate .emo{border-color:#C7D0DC}
.dash-tile.cluster_sage .emo{border-color:#BFD9C4}
.dash-tile.cluster_clay .emo{border-color:#E4C4A8}
.dash-logout{position:relative; display:block; max-width:360px; margin:18px auto 0; padding:16px 18px; border:1px solid var(--line);
	border-radius:12px; background:var(--paper); color:var(--ink-soft); font-size:14px; font-weight:700; letter-spacing:.04em;
	text-align:center; text-decoration:none; box-shadow:var(--shadow-s)}
.dash-logout:before{transition-duration:.3s; transition-property:top,right,bottom,left;
	position:absolute; top:0; right:0; bottom:0; left:0; content:''}
.dash-logout:hover{box-shadow:var(--shadow-m); color:var(--ink-soft)}
.dash-logout:hover:before,.dash-logout:focus:before{
	top:-8px; right:-8px; bottom:-8px; left:-8px; border:var(--gold, #B8862B) solid 3px; border-radius:0.7em;
	box-shadow:0 0 10px var(--gold-bg, #F3EBD8), 0 0 30px var(--gold-hi, #CBA85C)}

.dash-bottom-space{height:24px}   /* 固定ボトムナビ廃止に伴い最小限の下余白のみ */

/* 下部固定ボトムナビ（P5） */
.bottomnav{position:fixed; left:0; right:0; bottom:0; z-index:6; display:flex; justify-content:space-around;
	background:var(--paper); border-top:1px solid var(--line); box-shadow:0 -4px 16px rgba(20,30,50,.08);
	padding:6px 6px calc(6px + env(safe-area-inset-bottom))}
.bn-item{flex:1 1 0; display:flex; flex-direction:column; align-items:center; gap:2px; min-height:56px; padding:6px 0;
	text-decoration:none; color:var(--ink-soft); font-size:11px; font-weight:700}
.bn-item:hover{color:var(--navy)}
.bn-ico{font-size:22px; line-height:1}
.bn-lbl{line-height:1}
.bn-center .bn-plus{display:flex; align-items:center; justify-content:center; width:44px; height:44px; margin-top:-14px;
	background:var(--navy); color:#fff; border-radius:50%; font-size:26px; line-height:1; box-shadow:0 3px 10px rgba(20,30,50,.3)}
.bn-center{color:var(--navy)}

/* =====================================================================
 *  デスクトップ拡張（min-width）
 * ===================================================================== */
@media (min-width:720px){
	.menu_box{width:18%} .menu_blank{width:18%}
	.menu_box .lbl{font-size:14px}
	.menu-head .menu_logo img{height:120px}
	.stat-grid{grid-template-columns:repeat(3,1fr)}
	.stat-primary{grid-column:auto}        /* PCは3列横並び */
	.bottomnav{display:none}                /* PCはボトムナビ非表示（ドロワー/メニューで代替） */
	.dash-bottom-space{display:none}
}
/* .dash 固有の max-width 段階（900px→1040px）はここにあったが、コンテナ幅（ページ幅）と内部グリッドの
   列数という別々の関心事が同じブレイクポイントに同居して積み重なり、意味不明になっていたため撤去（2026-07-13）。
   .dash は他ページ（.main/.pagewrap/.wrap）と同じ var(--maxw) に統一（下の .dash 単体ルールを参照）。
   列数（stat-grid 3列・km-tiles 4列）は各グリッドの grid-template-columns 側だけで制御する。 */

/* =====================================================================
 *  下層ページ共通部品（チェックポイント2：一覧テーブル・フォーム・状態バッジ）
 *   規約：14px未満禁止・グレーは白系背景のみ・hoverはクリック可能要素のみ。
 * ===================================================================== */
.pagewrap{max-width:var(--maxw); margin:0 auto; padding:18px 14px 40px}
.pagehead{display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap; margin:4px 0 14px}
.pagehead .ph-note{font-size:14px; color:var(--ink-soft)}
.pagehead .ph-btns{display:flex; gap:8px; flex-wrap:wrap}

.card-box{background:var(--paper); border:1px solid var(--line); border-radius:var(--radius); padding:16px; margin:0 0 16px; box-shadow:var(--shadow-s)}
.card-box h2{font-size:17px; margin:0 0 10px}
.card-box .cb-note{font-size:14px; color:var(--ink-soft); line-height:1.8}

table.list{width:100%; border-collapse:collapse; background:var(--paper); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; font-size:15px}
table.list th{background:var(--navy); color:#fff; font-size:14px; font-weight:700; text-align:left; padding:10px 12px; white-space:nowrap}
table.list td{padding:11px 12px; border-top:1px solid var(--line); vertical-align:middle}
table.list tbody tr[href]{cursor:pointer; transition:background .15s}	/* FEDA/LUNA移植：ホバーの背景変化を滑らかに */
table.list tbody tr[href]:hover{background:var(--cream-2)}
/* 装飾のみのホバー（クリックしても遷移しない行に使用。会員管理＝代行の誤操作防止でtr[href]を廃止した代わり） */
table.list tbody tr.hoverline{transition:background .15s}
table.list tbody tr.hoverline:hover{background:var(--cream-2)}
table.list .num{text-align:right; font-variant-numeric:tabular-nums}
.tbl-scroll{overflow-x:auto; -webkit-overflow-scrolling:touch}

.stbadge{display:inline-block; padding:3px 10px; border-radius:999px; font-size:14px; font-weight:700; line-height:1.5}
.st-private{background:var(--navy); color:#fff}
.st-public{background:var(--gold-bg); color:var(--gold-deep); border:1px solid var(--gold)}
.st-shared{background:var(--gold); color:var(--navy-ink, #14202E) /* 金地×濃藍5.1:1（白は3.2:1で不適合・2026-07-12是正） */}
.st-closed{background:var(--cream-2); color:var(--ink); border:1px solid var(--line-2)}
.st-pending{background:#FBF3E2; color:#7A5A14; border:1px solid var(--warn)}
.st-ok{background:#E7F3EE; color:#1F6B4F; border:1px solid var(--ok)}
.st-ng{background:#FBEAE9; color:#8E2F2A; border:1px solid var(--err)}

.form-grid{display:grid; grid-template-columns:1fr; gap:14px}
@media (min-width:720px){ .form-grid{grid-template-columns:1fr 1fr} .form-grid .fg-full{grid-column:1 / -1} }
.fld label{display:block; font-size:14px; font-weight:700; margin:0 0 6px; color:var(--ink)}
.fld input[type=text],.fld input[type=email],.fld input[type=password],.fld input[type=number],.fld input[type=date],.fld select,.fld textarea{
	width:100%; min-height:var(--tap); padding:11px 13px; font-size:16px; font-family:inherit;
	border:1.5px solid var(--line-2); border-radius:var(--radius-s); background:#fff; color:var(--ink)}
.fld textarea{min-height:120px; line-height:1.8}
.fld input:focus,.fld select:focus,.fld textarea:focus{outline:none; border-color:var(--navy); box-shadow:0 0 0 3px rgba(27,42,74,.13)}
.fld .fl-note{font-size:14px; color:var(--ink-soft); margin-top:5px; line-height:1.7}
.form-btns{display:flex; gap:10px; flex-wrap:wrap; margin-top:18px}

.tabbar{display:flex; gap:6px; margin:0 0 14px; flex-wrap:wrap}
.tabbar a{display:inline-flex; align-items:center; min-height:44px; padding:8px 18px; border-radius:999px;
	text-decoration:none; font-size:15px; font-weight:700;
	background:var(--paper); color:var(--navy); border:1.5px solid var(--line-2)}
.tabbar a:hover{border-color:var(--navy); color:var(--navy)}
.tabbar a.on{background:var(--navy); color:#fff; border-color:var(--navy)}

.plangrid{display:grid; grid-template-columns:1fr; gap:12px}
@media (min-width:900px){ .plangrid{grid-template-columns:repeat(4,1fr)} }
.plancard{background:var(--paper); border:1.5px solid var(--line); border-radius:var(--radius); padding:16px; display:flex; flex-direction:column; gap:8px}
.plancard.recommended{border-color:var(--gold); box-shadow:0 0 0 3px rgba(184,134,43,.15); position:relative}
.pc-badge{position:absolute; top:-13px; left:50%; transform:translateX(-50%);
	background:var(--gold, #B8862B); color:var(--navy-ink, #14202E) /* 金地×濃藍5.1:1・2026-07-12是正 */; font-size:13px; font-weight:700;
	padding:4px 14px; border-radius:999px; white-space:nowrap}
.plancard.cur{border-color:var(--navy); box-shadow:0 0 0 3px rgba(27,42,74,.12)}
.plancard .pc-name{font-size:16px; font-weight:700}
.plancard .pc-sub{font-size:14px; color:var(--ink-soft); line-height:1.6; margin:-2px 0 2px}
.plancard .pc-price{font-size:24px; font-weight:700; font-variant-numeric:tabular-nums}
.plancard .pc-price small{font-size:14px; font-weight:700; color:var(--ink-soft)}
.plancard ul{margin:0; padding-left:1.2em; font-size:14px; line-height:1.9}
.plancard .pc-cur{margin-top:auto; text-align:center; font-size:14px; font-weight:700; color:var(--navy)}
.emptybox{text-align:center; padding:34px 16px; color:var(--ink-soft); font-size:15px; background:var(--paper); border:1px dashed var(--line-2); border-radius:var(--radius)}

/* ===== 文字サイズ拡大トグル（P4）：ボタンは最小48px・印刷非表示。拡大は zoom（全ブラウザ2024+対応） ===== */
html.txt-lg body{zoom:1.12}
#txtzoom{position:fixed; right:12px; bottom:12px; z-index:7; width:52px; height:52px; border-radius:50%;
	border:1px solid var(--line-2, #C9CFD8); background:#fff; color:var(--ink, #14202E); font-size:19px; font-weight:700;
	box-shadow:0 2px 10px rgba(20,32,46,.18); cursor:pointer; line-height:1}
#txtzoom span{font-size:13px; vertical-align:top}
html.txt-lg #txtzoom{background:var(--navy, #1b2a4a); color:#fff; border-color:var(--navy, #1b2a4a)}
@media print{ #txtzoom{display:none !important} }

/* ===== 会員メニュー（機能グループ版・BuzzCoach移植 2026-07-13）====================================
   sub/p-menu-member.php（home下部＋下層ハンバーガー共用）。
   「何ができるか」の目的語見出し＋1行説明の行型タイル＋行動バッジ＋目次scrollspy。
   配色は桐箱デザインシステム内（金縦棒・監査済みコントラストのみ使用・多色グラデ禁止方針の踏襲） */
.km-sec{font-size:16px; font-weight:700; color:var(--ink); margin:26px 2px 10px; position:relative; padding-left:14px;
	scroll-margin-top:var(--km-toc-offset, 96px)}
.km-sec::before{content:""; position:absolute; left:0; top:.14em; bottom:.14em; width:5px; border-radius:3px;
	background:linear-gradient(var(--gold-deep), var(--gold))}
.km-sec-d{font-size:13.5px; font-weight:700; color:var(--ink-soft); margin-left:8px}
/* 目次チップ（長いメニューの現在地・全体地図。Wikipedia目次＋Google Playタブの定石） */
.km-jump{display:flex; flex-wrap:wrap; align-items:center; gap:6px; margin:6px 0 18px;
	background:rgba(255,255,255,.72); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
	border:1px solid var(--line); border-radius:12px; padding:9px 11px}
.km-jump.stick{position:sticky; top:72px; z-index:6}   /* 固定ヘッダ64px+余白（home側のみ追従） */
.km-jump-l{font-size:12.5px; font-weight:700; color:var(--ink-soft); letter-spacing:.05em; margin-right:2px; white-space:nowrap}
.km-jump a{display:inline-flex; align-items:center; gap:3px; font-size:13.5px; font-weight:700; color:var(--ink);
	background:var(--paper); border:1.5px solid var(--line-2); border-radius:999px; padding:6px 12px; text-decoration:none;
	white-space:nowrap; transition:border-color .2s ease, background .2s ease, color .2s ease}
.km-jump a .dw{font-style:normal; font-size:11.5px; color:var(--gold-deep); font-weight:700}
.km-jump a:hover, .km-jump a:focus-visible{border-color:var(--gold); background:var(--gold-bg)}
.km-jump a.on{background:var(--navy); border-color:var(--navy); color:#fff}
.km-jump a.on .dw{color:var(--gold-hi)}
html{scroll-behavior:smooth}
/* 🕐最近使ったチップ */
.km-recent{display:flex; flex-wrap:wrap; gap:8px}
.km-recent a{display:inline-flex; align-items:center; gap:7px; font-size:14.5px; font-weight:700; color:var(--ink);
	background:var(--paper); border:1.5px solid var(--line-2); border-radius:999px; padding:9px 15px; text-decoration:none;
	transition:border-color .2s ease}
.km-recent a:hover, .km-recent a:focus-visible{border-color:var(--gold)}
.km-recent a .e{font-size:17px}
/* 行型タイル（絵文字＋太字ラベル＋1行説明＋›） */
.km-tiles{display:grid; grid-template-columns:repeat(auto-fit, minmax(230px, 1fr)); gap:10px;
	max-width:1040px; margin-left:auto; margin-right:auto}   /* 4列を上限にする値（tile230px+gap10px×4列＝内側950px必要）。
	外側コンテナ（.dash/.nav）の幅がどれだけ広くても、このグリッド自身が4列で頭打ちになるよう独立して制約する
	（外側コンテナ幅を広げるたびにこの値まで一緒に動かす必要はない＝関心事の分離） */
.km-tile{display:flex; align-items:center; gap:11px; background:var(--paper); border:1px solid var(--line);
	border-radius:12px; padding:12px 13px; text-decoration:none; color:var(--ink);
	transition:border-color .18s ease, box-shadow .18s ease}
.km-tile:hover, .km-tile:focus-visible{border-color:var(--gold); box-shadow:0 4px 14px rgba(27,42,74,.10); text-decoration:none}
.km-tile.blank{visibility:hidden; pointer-events:none}   /* menu_blank方式：トラック幅の確保のみ */
.km-tile .e{flex:0 0 44px; height:44px; border-radius:50%; display:flex; align-items:center; justify-content:center;
	font-size:21px; background:#fff; border:2px solid var(--line-2)}
.km-tile .tx{flex:1; min-width:0; display:flex; flex-direction:column; gap:2px}
.km-tile .tx b{font-size:15.5px; font-weight:700; color:var(--ink); line-height:1.35; display:flex; align-items:center; gap:6px; flex-wrap:wrap}
.km-tile .tx .d{font-size:13px; font-weight:500; color:var(--ink-soft); line-height:1.5}
.km-tile .ar{flex:none; font-size:18px; font-weight:700; color:var(--gold-deep); line-height:1}
/* 行動バッジ（監査済みコントラストのペアのみ使用） */
.km-b{font-style:normal; font-size:12px; font-weight:700; border-radius:999px; padding:2px 9px; line-height:1.5; white-space:nowrap}
.km-b-pop{background:var(--gold); color:var(--navy-ink, #14202E)}                 /* 金地×濃藍 5.1:1 */
.km-b-gold{background:var(--gold-bg); color:var(--gold-soft); border:1px solid var(--gold)}   /* 4.7:1 */
.km-b-warn{background:#F3EDDD; color:#8A5A10; border:1px solid var(--warn)}       /* 5.1:1（tag-pending同ペア） */
.km-b-err{background:#FBEAE9; color:#8E2F2A; border:1px solid var(--err)}         /* st-ng同ペア */
/* ハンバーガー（紺地）内の反転 */
.nav .km-sec{color:#fff}
.nav .km-sec-d{color:rgba(255,255,255,.85)}
.nav .km-jump{background:rgba(255,255,255,.08); border-color:rgba(255,255,255,.18)}
.nav .km-jump-l{color:rgba(255,255,255,.85)}
.nav .km-jump a{background:rgba(255,255,255,.10); border-color:rgba(255,255,255,.22); color:#fff}
.nav .km-jump a .dw{color:var(--gold-hi)}
.nav .km-recent a{background:rgba(255,255,255,.10); border-color:rgba(255,255,255,.22); color:#fff}
.nav .km-tile{background:rgba(255,255,255,.06); border-color:rgba(255,255,255,.14); color:#fff}
.nav .km-tile:hover, .nav .km-tile:focus-visible{border-color:var(--gold)}
.nav .km-tile .e{background:rgba(255,255,255,.10); border-color:rgba(255,255,255,.25)}
.nav .km-tile .tx b{color:#fff}
.nav .km-tile .tx .d{color:rgba(255,255,255,.85)}
.nav .km-tile .ar{color:var(--gold-hi)}
.km-jump, .km-recent{max-width:1040px; margin-left:auto; margin-right:auto}   /* km-tilesと同じ上限幅に揃え、目次・最近使ったの横幅を一致させる */
/* モバイル（2列・タップ寸法維持） */
@media(max-width:560px){
	.km-tiles{grid-template-columns:repeat(2, 1fr); gap:8px}
	.km-tile{padding:10px 10px; gap:8px; position:relative}
	.km-tile .e{flex:0 0 32px; height:32px; font-size:16px; border-width:1.5px}
	.km-tile .tx b{font-size:14px}
	.km-tile .tx .d{font-size:12px; line-height:1.45}
	.km-tile .ar{position:absolute; top:10px; right:9px; font-size:14px}
	.km-b{font-size:11px; padding:1px 7px}
	.km-jump{padding:8px 9px; gap:5px}
	.km-jump a{font-size:12.5px; padding:5px 10px}
	.km-jump-l{display:none}
	.km-jump.stick{top:64px}
	.km-sec{scroll-margin-top:var(--km-toc-offset, 88px)}
}