@charset "UTF-8";
/**
 * 会員エリア（ルミステーション）共通スタイル
 *
 * 公開サイトとは独立したデザイン。会員ページでのみ読み込む（functions.php 参照）。
 * 含むもの: CSS変数 / レイアウト(.app) / サイドバー / トップバー / フッター /
 *           トップページのヒーロー・ピックアップ・ダウンロードグリッド。
 * 仕様書など下層ページ固有（表/カード切替）は member-spec.css に分離。
 *
 * 出典: sample_member/lumi-station-redesign.html の <style> を外部化・整理したもの。
 */

:root{
	--bg:#eef2f8;
	--surface:#ffffff;
	--ink:#11203a;
	--muted:#65748d;
	--line:#e4eaf3;
	--brand:#2563eb;
	--brand-dark:#1b4fc4;
	--brand-soft:#eaf1ff;
	--accent:#ff5a52;       /* LUMIレッドのニュアンス */
	--radius:18px;
	--radius-sm:12px;
	--shadow-sm:0 1px 2px rgba(17,32,58,.06);
	--shadow:0 2px 6px rgba(17,32,58,.06), 0 18px 40px -24px rgba(17,32,58,.35);
	--shadow-hover:0 6px 14px rgba(17,32,58,.10), 0 28px 60px -28px rgba(17,32,58,.45);
	--rainbow:linear-gradient(90deg,#ff5a52,#ff9f43,#ffd24a,#3ec97a,#2563eb,#7b61ff);
}

/* 会員ページのみへスコープ（body.member-page）。リセットは会員ページ内に限定する。 */
body.member-page{
	font-family:"Zen Kaku Gothic New","Hiragino Kaku Gothic ProN","Yu Gothic",sans-serif;
	color:var(--ink);
	background:
		radial-gradient(1200px 500px at 88% -8%, #dce8ff 0%, transparent 60%),
		radial-gradient(900px 500px at -5% 110%, #ffe7e6 0%, transparent 55%),
		var(--bg);
	min-height:100vh;
	-webkit-font-smoothing:antialiased;
	margin:0;
}
body.member-page *{box-sizing:border-box}
body.member-page a{text-decoration:none;color:inherit}

/* ===== レイアウト ===== */
.member-page .app{display:grid;grid-template-columns:264px 1fr;min-height:100vh}

/* ===== サイドバー ===== */
.member-page .sidebar{
	position:sticky;top:0;align-self:start;height:100vh;
	background:var(--surface);border-right:1px solid var(--line);
	padding:26px 18px;display:flex;flex-direction:column;gap:28px;
}
.member-page .brand{padding:6px 8px 18px;border-bottom:1px solid var(--line)}
.member-page .brand img.logo{display:block;width:100%;max-width:150px;height:auto}

.member-page .nav-label{font-size:11px;font-weight:700;letter-spacing:.12em;color:#9aa7bd;text-transform:uppercase;padding:0 10px;margin-bottom:8px}
.member-page .nav{display:flex;flex-direction:column;gap:3px}
.member-page .nav-item{
	display:flex;align-items:center;gap:12px;padding:11px 12px;border-radius:12px;
	font-size:14.5px;font-weight:500;color:#33405a;transition:.18s;
}
.member-page .nav-item svg{width:19px;height:19px;color:#8a97ad;transition:.18s;flex:none}
.member-page .nav-item:hover{background:#f3f6fc;color:var(--ink)}
.member-page .nav-item:hover svg{color:var(--brand)}
.member-page .nav-item.active{background:var(--brand-soft);color:var(--brand-dark);font-weight:700}
.member-page .nav-item.active svg{color:var(--brand)}

.member-page .rel{display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:12px;font-size:13.5px;color:#46546e;transition:.18s}
.member-page .rel:hover{background:#f3f6fc}
.member-page .rel .rel-logo{height:28px;width:auto;max-width:46px;object-fit:contain;flex:none}
.member-page .rel .ext{margin-left:auto;color:#aab6c9}
.member-page .rel .ext svg{width:14px;height:14px}

/* ===== メイン ===== */
.member-page main{padding:22px 30px 48px;min-width:0}
.member-page .topbar{display:flex;align-items:center;justify-content:space-between;margin-bottom:24px}
.member-page .crumb{font-size:13px;color:var(--muted);font-weight:500}
.member-page .crumb .now{color:var(--ink);font-weight:700}
.member-page .userbox{display:flex;align-items:center;gap:14px}
.member-page .userchip{display:flex;align-items:center;gap:9px;font-size:13.5px;color:#3a4a64;font-weight:600}
.member-page .avatar{width:30px;height:30px;border-radius:50%;background:var(--brand-soft);color:var(--brand);display:grid;place-items:center}
.member-page .avatar svg{width:17px;height:17px}
.member-page .logout{
	border:1px solid var(--line);background:#fff;color:#46546e;font-family:inherit;font-weight:600;
	font-size:13px;padding:8px 16px;border-radius:99px;cursor:pointer;transition:.18s;display:flex;align-items:center;gap:7px;
}
.member-page .logout svg{width:15px;height:15px}
.member-page .logout:hover{border-color:#ffc9c5;color:var(--accent);background:#fff6f5}

/* ===== ヒーロー ===== */
.member-page .hero{
	position:relative;overflow:hidden;border-radius:24px;color:#fff;
	background:linear-gradient(120deg,#1f5fe0 0%,#2f7bf0 45%,#46a0ff 100%);
	box-shadow:var(--shadow);padding:40px 44px;min-height:208px;
	display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;gap:10px;
	animation:rise .6s ease both;
}
.member-page .hero::after{content:"";position:absolute;inset:0;background:
	radial-gradient(420px 200px at 100% 0%, rgba(255,255,255,.22), transparent 70%);pointer-events:none}
.member-page .hero .tag{display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:600;color:#dbe9ff;letter-spacing:.02em}
.member-page .hero .tag::before{content:"";width:18px;height:3px;border-radius:9px;background:#fff;opacity:.7}
.member-page .hero h1{font-size:clamp(28px,4vw,44px);font-weight:900;letter-spacing:.01em;line-height:1.1;text-shadow:0 2px 14px rgba(10,30,70,.25)}
.member-page .hero p{font-size:14px;color:#e7f0ff;max-width:440px;line-height:1.7}

/* ===== セクション見出し ===== */
.member-page .section{margin-top:38px;animation:rise .6s ease both}
.member-page .sec-head{display:flex;align-items:center;gap:12px;margin-bottom:18px}
.member-page .sec-head .dot{width:11px;height:24px;border-radius:6px;background:var(--brand)}
.member-page .sec-head h2{font-size:19px;font-weight:700;letter-spacing:.01em}
.member-page .sec-head .line{flex:1;height:1px;background:var(--line)}

/* ===== ピックアップ ===== */
.member-page .campaign{
	display:flex;align-items:stretch;gap:0;background:var(--surface);border:1px solid var(--line);
	border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow-sm);transition:.2s;max-width:760px;
}
.member-page .campaign:hover{box-shadow:var(--shadow-hover);transform:translateY(-2px)}
.member-page .campaign .art{
	width:200px;flex:none;position:relative;color:#241b6b;
	background:repeating-linear-gradient(115deg,#fff9c7 0 22px,#fdee9c 22px 44px);
	display:flex;align-items:center;justify-content:center;padding:18px;text-align:center;
}
.member-page .campaign .art b{font-family:"Outfit";font-weight:800;font-size:16px;line-height:1.25;color:#3417c0}
.member-page .campaign .body{padding:20px 22px;display:flex;flex-direction:column;justify-content:center;gap:6px}
.member-page .campaign .body .k{font-size:11px;font-weight:700;letter-spacing:.1em;color:var(--accent)}
.member-page .campaign .body h3{font-size:16.5px;font-weight:700}
.member-page .campaign .body span{font-size:13px;color:var(--muted)}
.member-page .campaign .go{margin-left:auto;align-self:center;padding-right:22px;color:var(--brand)}
.member-page .campaign .go svg{width:22px;height:22px;transition:.2s}
.member-page .campaign:hover .go svg{transform:translateX(4px)}

/* ===== ダウンロードグリッド ===== */
.member-page .grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(248px,1fr));gap:18px}
.member-page .card{
	background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;
	box-shadow:var(--shadow-sm);transition:.22s;display:flex;flex-direction:column;
}
.member-page .card:hover{transform:translateY(-4px);box-shadow:var(--shadow-hover);border-color:#d4e0f5}
.member-page .thumb{height:118px;position:relative;display:grid;place-items:center;color:#fff}
.member-page .thumb svg{width:40px;height:40px;opacity:.96;filter:drop-shadow(0 4px 10px rgba(0,0,0,.18))}
.member-page .thumb .pdf{position:absolute;top:10px;right:10px;background:rgba(255,255,255,.92);color:#d23b32;font-family:"Outfit";font-weight:800;font-size:10px;letter-spacing:.04em;padding:3px 7px;border-radius:6px}
.member-page .t1{background:linear-gradient(135deg,#7b61ff,#2563eb)}
.member-page .t2{background:linear-gradient(135deg,#0ea5a4,#1f9bd6)}
.member-page .t3{background:linear-gradient(135deg,#ff7a59,#ff5a52)}
.member-page .t4{background:linear-gradient(135deg,#1f6fe5,#46a0ff)}
.member-page .t5{background:linear-gradient(135deg,#ffb02e,#ff7a59)}
.member-page .t6{background:linear-gradient(135deg,#5b6bff,#9b6bff)}
.member-page .t7{background:linear-gradient(135deg,#16a34a,#0ea5a4)}
.member-page .t8{background:linear-gradient(135deg,#0ea5e9,#22d3ee)}
.member-page .card .meta{padding:15px 16px;display:flex;align-items:center;gap:10px}
.member-page .card .meta h3{font-size:14.5px;font-weight:700;line-height:1.4}
.member-page .card .meta .arrow{margin-left:auto;width:28px;height:28px;border-radius:50%;background:#f1f5fc;color:var(--brand);display:grid;place-items:center;transition:.2s;flex:none}
.member-page .card .meta .arrow svg{width:15px;height:15px}
.member-page .card:hover .meta .arrow{background:var(--brand);color:#fff}

/* ===== フッター ===== */
.member-page .site-footer{margin-top:46px;padding-top:20px;border-top:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px}
.member-page .foot-links{display:flex;align-items:center;flex-wrap:wrap;gap:10px;font-size:13px}
.member-page .foot-links a{color:#46546e;transition:.15s}
.member-page .foot-links a:hover{color:var(--brand)}
.member-page .foot-links .sep{color:#d4dce9}
.member-page .copy{font-size:12px;color:#9aa7bd}

@keyframes rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.member-page .section:nth-of-type(2){animation-delay:.06s}
.member-page .section:nth-of-type(3){animation-delay:.12s}
.member-page .section:nth-of-type(4){animation-delay:.18s}

/* ===== レスポンシブ ===== */
@media(max-width:900px){
	.member-page .app{grid-template-columns:1fr}
	.member-page .sidebar{position:static;height:auto;flex-direction:row;flex-wrap:wrap;align-items:center;gap:14px 22px;padding:16px 18px}
	.member-page .brand{border-bottom:none;padding:0;margin-right:auto}
	.member-page .brand img.logo{max-width:120px}
	.member-page .nav-label{display:none}
	.member-page .nav{flex-direction:row;flex-wrap:wrap;gap:4px}
	.member-page .nav-item{padding:9px 12px}
	.member-page .rel{padding:8px 10px}
	.member-page main{padding:18px 18px 40px}
}
@media(max-width:540px){
	.member-page .campaign{flex-direction:column}
	.member-page .campaign .art{width:100%;height:120px}
	.member-page .campaign .go{align-self:flex-end;padding:0 18px 16px}
	.member-page .site-footer{flex-direction:column;align-items:flex-start}
}

/* ===== シンプル（サイドバー無し・システムページ）===== */
/* ログアウト・ログイン・お知らせ等。ロゴ＋中央寄せカードの最小構成。 */
.member-page.member-simple{min-height:100vh}
.member-simple .simple-wrap{
	min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;
	gap:26px;padding:48px 20px;
}
.member-simple .simple-brand img{display:block;width:100%;max-width:190px;height:auto}
.member-simple .simple-card{
	background:var(--surface);border:1px solid var(--line);border-radius:24px;box-shadow:var(--shadow);
	padding:44px 40px;width:100%;max-width:520px;text-align:center;animation:rise .5s ease both;
}
.member-simple .simple-title{font-size:23px;font-weight:800;letter-spacing:.01em;margin:0 0 16px}
.member-simple .simple-body{color:#46546e;font-size:14.5px;line-height:1.85}
.member-simple .simple-body p{margin:0 0 14px}
.member-simple .simple-body p:last-child{margin-bottom:0}
.member-simple .simple-body a{color:var(--brand);font-weight:700}
.member-simple .simple-body a:hover{text-decoration:underline}

/* 本文で使えるボタンユーティリティ（例: <a class="btn" href="...">ホームへ戻る</a>） */
.member-simple .simple-body .btn{
	display:inline-flex;align-items:center;justify-content:center;gap:8px;margin-top:8px;
	background:var(--brand);color:#fff;font-weight:700;font-size:14px;
	padding:12px 26px;border-radius:99px;box-shadow:0 4px 12px -3px rgba(37,99,235,.5);transition:.18s;
}
.member-simple .simple-body .btn:hover{background:var(--brand-dark);text-decoration:none;transform:translateY(-1px)}
.member-simple .simple-body .btn.ghost{
	background:#fff;color:#46546e;border:1px solid var(--line);box-shadow:none;
}
.member-simple .simple-body .btn.ghost:hover{border-color:#c9d6ea;color:var(--ink);background:#f7faff}

.member-simple .simple-copy{font-size:12px;color:#9aa7bd}

@media(max-width:540px){
	.member-simple .simple-card{padding:36px 22px;border-radius:18px}
	.member-simple .simple-title{font-size:21px}
}