/* =====================================================================
   Luna Lotus  design system  /common/css/luna.css
   方向性: 白基調＋にじみパステル（周囲）＋紺〜黒の夜／シャンパンゴールド。
   タイポ: 見出し=明朝(Zen Old Mincho) / 欧文=Cormorant / 本文=Zen Kaku Gothic
   ※ コンポーネント（card/btn/form/dashboard/flash/foot）は全ページ共有。
   ===================================================================== */
:root{
	--ivory:#FBF8F3; --white:#FFFFFF; --paper:#FFFFFF;
	--ink:#0A0A0A;          /* 主要テキスト＝ほぼ黒（白地で最大コントラスト） */
	--body:#0A0A0A; --ink-soft:#2C2730;
	--line:#E9DFD3;
	--gold-1:#5C4318;       /* 白地の金テキスト＝輝度を落とした濃金（約8:1） */
	--gold-2:#C7A153; --gold-3:#EBD49A; --gold-line:#C7A153;
	--rose:#D6A6AE; --plum:#5A2E56; --night:#5C6A99;
	--navy-1:#222A44; --navy-2:#323F66;
	--gold-grad:linear-gradient(118deg,#C49A3F 0%,#E7C781 46%,#E6B7C4 100%);
	--shadow-s:0 6px 20px rgba(20,20,30,.10);
	--shadow-m:0 18px 50px rgba(20,20,30,.14);
	--radius:22px; --radius-s:14px;
	--maxw:1100px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}
body{
	margin:0; color:var(--body); background:#fff;
	font-family:"Zen Kaku Gothic New","Noto Sans JP",sans-serif;
	font-size:16.5px; line-height:1.85; letter-spacing:.012em; word-break:auto-phrase;
	-webkit-font-smoothing:antialiased; overflow-x:hidden;
}
/* にじみパステル背景（濃く多彩・周囲）＋中央#fff（周囲ほど薄れる白を重ねる） */
body::before{
	content:""; position:fixed; inset:-12%; z-index:-2; pointer-events:none;
	background:
		radial-gradient(48% 42% at 3% -4%,   rgba(248,158,196,1),   transparent 64%),
		radial-gradient(46% 40% at 99% -5%,  rgba(194,172,250,1),   transparent 62%),
		radial-gradient(52% 46% at 105% 54%, rgba(252,186,138,1),   transparent 66%),
		radial-gradient(52% 46% at -5% 86%,  rgba(158,231,200,1),   transparent 66%),
		radial-gradient(48% 42% at 53% 107%, rgba(176,202,251,1),   transparent 64%),
		radial-gradient(38% 34% at 85% 20%,  rgba(250,172,214,.85), transparent 58%);
	filter:blur(5px) saturate(1.32);
}
body::after{
	content:""; position:fixed; inset:-12%; z-index:-2; pointer-events:none;
	background:radial-gradient(70% 64% at 50% 42%, #fff 0%, rgba(255,255,255,.95) 17%, rgba(255,255,255,.55) 38%, rgba(255,255,255,0) 70%);
}
.wrap{position:relative; z-index:1; max-width:var(--maxw); margin:0 auto; padding:0 22px}

/* タイポ */
.serif{font-family:"Zen Old Mincho","Shippori Mincho B1",serif}
.latin{font-family:"Cormorant Garamond",serif; letter-spacing:.02em}
h1,h2,h3{font-family:"Zen Old Mincho","Shippori Mincho B1",serif; font-weight:700; line-height:1.36; letter-spacing:.03em; color:var(--ink); margin:0}
h1{font-size:clamp(28px,5vw,46px)} h2{font-size:clamp(28px,4vw,44px)} h3{font-size:21px; font-weight:600}
p{margin:0 0 1.4em}
a{color:var(--gold-1); text-decoration:underline; text-underline-offset:.18em}
.eyebrow{font-family:"Cormorant Garamond",serif; font-style:italic; font-size:16px; color:var(--gold-1); letter-spacing:.06em; margin:0 0 .4em}
.muted{color:var(--ink-soft)}
.center{text-align:center}
.u{display:inline-block}

/* 見出しメリハリ（kicker＋ゴースト語＋金ライン）＝.section-head を新仕様へ */
.section-head{position:relative; text-align:center; max-width:780px; margin:0 auto 46px; padding-top:30px}
.section-head .ghost{position:absolute; top:-6px; left:50%; transform:translateX(-50%);
	font-family:"Cormorant Garamond",serif; font-weight:700; font-style:italic;
	font-size:clamp(74px,12vw,150px); line-height:1; white-space:nowrap; pointer-events:none; z-index:0;
	color:rgba(199,161,83,.16); letter-spacing:.01em}
.section-head .eyebrow,.section-head h2,.section-head p{position:relative; z-index:1}
.section-head .eyebrow{display:inline-flex; align-items:center; gap:13px; text-transform:uppercase; letter-spacing:.24em; font-size:15px}
.section-head .eyebrow::before,.section-head .eyebrow::after{content:""; width:30px; height:1px; background:var(--gold-line)}
.section-head h2::after{content:""; display:block; width:54px; height:3px; margin:18px auto 0; background:var(--gold-grad); border-radius:2px}
.section-head p{max-width:640px; margin:16px auto 0; color:var(--ink-soft)}

/* 金の月（汎用・残置） */
.moon{width:120px;height:120px;border-radius:50%;background:var(--gold-grad);
	box-shadow:0 10px 40px rgba(184,137,59,.35), inset -10px -14px 30px rgba(150,100,40,.25); margin:0 auto}
.hr-gold{height:1px;border:0;background:linear-gradient(90deg,transparent,var(--gold-2),transparent);margin:42px 0}

/* ナビ（上=#000→下=紺の縦グラデ・白文字・左ロゴ・下線アニメ・パステルCTA） */
.nav{position:sticky; top:0; z-index:30;
	background:linear-gradient(180deg, #000 0%, #161C30 55%, var(--navy-1) 100%);
	border-bottom:1px solid rgba(255,255,255,.08)}
.nav .wrap{display:flex; align-items:center; justify-content:space-between; height:70px}
.nav-brand{display:flex; align-items:center; gap:12px; text-decoration:none}
.nav-brand img{height:42px; width:auto; display:block}
.nav-brand .bt{font-family:"Zen Old Mincho",serif; font-size:20px; letter-spacing:.2em; color:#fff; line-height:1; white-space:nowrap}
.nav-brand .bt small{display:block; font-family:"Cormorant Garamond",serif; font-style:italic; font-size:10.5px; letter-spacing:.22em; color:var(--gold-3); margin-top:2px}
.nav-links{display:flex; gap:24px; align-items:center}
.nav-links a:not(.btn){position:relative; color:#fff; text-decoration:none; font-size:14.5px; font-weight:500; letter-spacing:.03em; white-space:nowrap}
.nav-links a:not(.btn)::after{content:""; position:absolute; left:0; right:0; bottom:-5px; height:2px; background:var(--gold-3); border-radius:2px; transform:scaleX(0); transform-origin:left center; transition:transform .26s cubic-bezier(.2,.7,.2,1)}
.nav-links a:not(.btn):hover::after,.nav-links a:not(.btn):focus-visible::after{transform:scaleX(1)}
.nav .btn-ghost{color:#fff; border-color:rgba(255,255,255,.5); padding:11px 22px; font-size:14.5px}
.nav .btn-ghost:hover:not(:disabled){color:#fff; border-color:#fff; background:rgba(255,255,255,.12)}
.nav .btn-pastel{padding:11px 24px; font-size:15px}

/* ボタン */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:8px;
	padding:15px 32px; border-radius:999px; border:0; cursor:pointer; text-decoration:none;
	font-family:"Zen Kaku Gothic New",sans-serif; font-weight:700; font-size:16px; letter-spacing:.04em;
	transition:transform .18s ease, box-shadow .18s ease, filter .18s ease}
.btn-gold{background:var(--gold-grad); color:#000; text-shadow:0 0 1px rgba(255,255,255,.9),0 1px 1px rgba(255,255,255,.85); box-shadow:0 12px 32px rgba(196,154,63,.45)}
.btn-gold:hover:not(:disabled){color:#000; transform:translateY(-2px); box-shadow:0 18px 42px rgba(196,154,63,.5); filter:saturate(1.05)}
.btn-ghost{background:rgba(255,255,255,.7); color:var(--ink); border:1.5px solid var(--gold-2)}
.btn-ghost:hover:not(:disabled){color:var(--gold-1); border-color:var(--gold-1); transform:translateY(-1px)}
.btn-onnavy{background:rgba(255,255,255,.12); color:#fff; border:1.5px solid rgba(255,255,255,.5)}
.btn-onnavy:hover:not(:disabled){background:rgba(255,255,255,.2); color:#fff; transform:translateY(-1px)}
.btn:disabled{opacity:.5; cursor:not-allowed}
.btn-lg{padding:18px 44px; font-size:17px}
.btn-block{display:flex; width:100%}
/* 白＋にじみパステルCTA（中心#fff・周囲パステル。暗い地で映える） */
.btn-pastel{position:relative; isolation:isolate; background:#ffffff; color:#000;
	border:1px solid rgba(255,255,255,.65); box-shadow:0 6px 18px rgba(18,16,32,.30)}
.btn-pastel::before{content:""; position:absolute; inset:0; z-index:-2; border-radius:inherit;
	background:
		radial-gradient(75% 95% at 6% 4%,   rgba(250,176,208,.98), transparent 60%),
		radial-gradient(75% 95% at 96% 8%,  rgba(206,186,250,.96), transparent 60%),
		radial-gradient(85% 98% at 90% 98%, rgba(252,200,160,.95), transparent 62%),
		radial-gradient(85% 98% at 10% 96%, rgba(176,233,209,.95), transparent 62%);
	filter:blur(2px) saturate(1.25)}
.btn-pastel::after{content:""; position:absolute; inset:0; z-index:-1; border-radius:inherit;
	background:radial-gradient(72% 82% at 50% 50%, #ffffff 0%, rgba(255,255,255,.94) 32%, rgba(255,255,255,0) 76%)}
.btn-pastel:hover:not(:disabled){transform:translateY(-2px); box-shadow:0 11px 28px rgba(18,16,32,.36)}
.btn-pastel:hover:not(:disabled)::before{filter:blur(2px) saturate(1.45)}
a:focus-visible,.btn:focus-visible,summary:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid var(--gold-1); outline-offset:2px}

/* カード */
.card{background:#fff; border:1px solid var(--line); border-radius:var(--radius);
	box-shadow:var(--shadow-s); padding:26px}
.card-quiet{background:#fff}
.grid{display:grid; gap:22px}
.g3{grid-template-columns:repeat(3,1fr)} .g2{grid-template-columns:repeat(2,1fr)}

/* HERO（紺・logo1右上・憲章マニフェスト） */
.hero{position:relative; overflow:hidden; color:#fff;
	background:linear-gradient(140deg,var(--navy-1) 0%,#2B355A 55%,var(--navy-2) 100%); padding:34px 0 58px}
.hero::after{content:""; position:absolute; inset:0; pointer-events:none;
	background:radial-gradient(60% 60% at 84% 12%, rgba(231,199,129,.16), transparent 60%),
		radial-gradient(50% 50% at 10% 90%, rgba(214,166,174,.14), transparent 60%)}
.hero .logo1{position:absolute; top:26px; right:max(24px,4vw); width:clamp(130px,15vw,196px); z-index:2;
	filter:drop-shadow(0 14px 30px rgba(0,0,0,.35)); animation:fade .9s ease forwards}
.hero .wrap{position:relative; z-index:3}
.hero .htext{max-width:min(760px, calc(100% - 220px))}
.hero .kicker{color:var(--gold-3)}
.hero .kicker::before,.hero .kicker::after{background:rgba(235,212,154,.6)}
.hero h1{color:#fff; font-weight:600; font-size:clamp(24px,3.6vw,40px); line-height:1.55; letter-spacing:.03em}
.hero h1 .hl{color:var(--gold-3)}
.hero .lead{font-size:clamp(16.5px,1.6vw,19px); color:#fff; max-width:38em; margin:22px 0 30px; line-height:1.95}
.hero .cta-row{display:flex; gap:14px; flex-wrap:wrap}
.kicker{display:inline-flex; align-items:center; gap:13px; font-family:"Cormorant Garamond",serif;
	font-style:italic; font-weight:600; font-size:16px; letter-spacing:.26em; text-transform:uppercase;
	color:var(--gold-1); margin-bottom:.55em}
.kicker::before,.kicker::after{content:""; width:32px; height:1px; background:var(--gold-line)}
.reveal{opacity:0; transform:translateY(14px); animation:rise .9s cubic-bezier(.2,.7,.2,1) forwards}
.reveal.d1{animation-delay:.08s}.reveal.d2{animation-delay:.18s}.reveal.d3{animation-delay:.30s}.reveal.d4{animation-delay:.42s}
@keyframes rise{to{opacity:1; transform:none}}
@keyframes fade{from{opacity:0}to{opacity:1}}
@keyframes faqOpen{from{opacity:0; transform:translateY(-8px)} to{opacity:1; transform:none}}

/* 信頼ストリップ */
.trust{background:rgba(255,255,255,.82); border-bottom:1px solid var(--line)}
.trust .wrap{display:flex; flex-wrap:wrap; justify-content:center; gap:14px 50px; padding:20px 22px}
.trust .ti{display:flex; align-items:baseline; gap:10px; font-size:14.5px; color:var(--ink-soft)}
.trust b{font-family:"Zen Old Mincho",serif; font-size:22px; color:var(--gold-1)}

/* セクション帯 */
section.block{padding:clamp(56px,7vw,92px) 0}
.band-dark{position:relative; overflow:hidden; color:#fff;
	background:linear-gradient(135deg,var(--navy-1),var(--navy-2))}
.band-dark .muted{color:#fff}
.band-dark a:not(.btn){color:var(--gold-3)}
.band-dark .wm{position:absolute; right:-30px; bottom:-50px; width:min(360px,46%); opacity:.16; z-index:0}
.band-dark .center{position:relative; z-index:1}
.band-dark .logo1c{width:200px; margin:0 auto 14px; display:block; filter:drop-shadow(0 10px 22px rgba(0,0,0,.3))}
.band-dark .kicker{color:var(--gold-3)}
.band-dark .kicker::before,.band-dark .kicker::after{background:rgba(235,212,154,.6)}

/* 3つの柱（アイコン＋英字を右／JP／説明。3列はCONNECTが収まる限界まで保持） */
.pillars{display:grid; grid-template-columns:repeat(auto-fit,minmax(225px,1fr)); gap:22px}
.pillar{text-align:left; padding:clamp(28px,3vw,40px) 30px; min-width:0}
.pillar .p-top{display:flex; align-items:center; gap:14px; margin-bottom:14px; min-width:0}
.pillar .pic{flex:0 0 54px; width:54px; height:54px; border-radius:50%; background:var(--gold-grad);
	display:flex; align-items:center; justify-content:center; font-size:26px; box-shadow:0 10px 26px rgba(196,154,63,.32)}
.pillar .en{font-family:"Cormorant Garamond",serif; font-weight:700; font-style:normal;
	font-size:clamp(16px,2vw,26px); letter-spacing:.06em; color:var(--gold-1); line-height:1; white-space:nowrap; min-width:0}
.pillar h3{margin:.1em 0 .5em; font-size:22px; color:var(--ink)}
.pillar .muted{text-align:left; margin:0}

/* 憲章（金円＋太字白アウトラインの番号） */
.charter{counter-reset:c; display:grid; grid-template-columns:repeat(2,1fr); gap:16px; padding:0; margin:0}
.charter li{list-style:none; display:flex; gap:16px; align-items:flex-start; padding:22px 24px; background:#fff; border:1px solid var(--line); border-radius:var(--radius-s); box-shadow:0 12px 30px rgba(95,70,50,.13)}
.charter li::before{counter-increment:c; content:counter(c); flex:0 0 42px; height:42px; border-radius:50%;
	background:var(--gold-grad); color:#000; font-family:"Zen Kaku Gothic New",sans-serif; font-weight:800; font-size:17px;
	text-shadow:-1px -1px 0 #fff,1px -1px 0 #fff,-1px 1px 0 #fff,1px 1px 0 #fff,0 0 3px rgba(255,255,255,.9);
	display:flex; align-items:center; justify-content:center}
.charter b{font-family:"Zen Old Mincho",serif; color:var(--ink)}

/* 料金カード（白カードは金ボタンで明快に） */
.plan{position:relative; display:flex; flex-direction:column; background:#fff; border:1px solid var(--line);
	border-radius:var(--radius); box-shadow:0 16px 40px rgba(95,70,50,.14); padding:32px 28px}
.plan.feature{background:#fff; border:2px solid var(--gold-line); box-shadow:0 28px 64px rgba(95,70,50,.22); transform:scale(1.04)}
@media(max-width:880px){.plan.feature{transform:none}}
.plan .pname{font-family:"Zen Old Mincho",serif; font-size:21px; color:var(--ink)}
.plan .price{font-family:"Zen Old Mincho",serif; font-size:44px; color:var(--ink); line-height:1.1; margin:.18em 0 0}
.plan .price small{font-family:"Zen Kaku Gothic New",sans-serif; font-size:15px; color:var(--ink-soft); font-weight:400}
.plan .founding{font-size:14.5px; color:var(--plum); margin-top:7px; font-weight:700}
.plan ul{list-style:none; padding:0; margin:18px 0 22px; flex:1}
.plan ul li{padding:8px 0 8px 26px; position:relative; border-bottom:1px dashed var(--line); font-size:15px; color:var(--body)}
.plan ul li::before{content:"✦"; position:absolute; left:2px; color:var(--gold-2)}
.ribbon{position:absolute; top:-13px; left:50%; transform:translateX(-50%); background:var(--gold-grad); color:#000;
	font-size:13.5px; font-weight:700; padding:7px 20px; border-radius:999px; letter-spacing:.06em; box-shadow:var(--shadow-s); white-space:nowrap}

/* FAQ（アコーディオン） */
.faq{max-width:860px; margin:0 auto; display:grid; gap:12px}
.faq details{background:#fff; border:1px solid var(--line); border-radius:var(--radius-s); padding:2px 24px; box-shadow:var(--shadow-s)}
.faq summary{cursor:pointer; list-style:none; padding:20px 0; font-weight:700; font-size:16.5px; color:var(--ink); display:flex; justify-content:space-between; gap:16px; font-family:"Zen Old Mincho",serif}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+"; color:var(--gold-1); font-weight:700; font-size:22px; line-height:1; transition:transform .28s ease}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq .a{padding:0 0 22px; color:var(--body); font-size:15.5px}
.faq details[open] .a{animation:faqOpen .3s ease}

/* ===== Dashboard（共有・残置） ===== */
.dash{display:grid;grid-template-columns:1fr 320px;gap:24px;padding:30px 0}
.dash-main{display:grid;gap:22px}
.rankcard{background:linear-gradient(135deg,var(--navy-1),#473a4e);color:#fff;border-radius:var(--radius);padding:26px;position:relative;overflow:hidden}
.rankcard::before{content:"";position:absolute;width:160px;height:160px;border-radius:50%;background:var(--gold-grad);right:-46px;top:-46px;opacity:.85;filter:blur(2px)}
.rankcard .lbl{font-family:"Cormorant Garamond",serif;font-style:italic;color:var(--gold-3);letter-spacing:.06em}
.rankcard .rname{font-family:"Zen Old Mincho",serif;font-size:28px;margin:.1em 0}
.meter{height:8px;border-radius:999px;background:rgba(255,255,255,.18);overflow:hidden;margin-top:14px}
.meter>i{display:block;height:100%;background:var(--gold-grad);border-radius:999px}
.steps{display:grid;gap:10px}
.step{display:flex;gap:12px;align-items:center;padding:12px 14px;border:1px solid var(--line);border-radius:var(--radius-s);background:#fff}
.step .dot{flex:0 0 24px;height:24px;border-radius:50%;border:2px solid var(--gold-2);display:flex;align-items:center;justify-content:center;font-size:13px;color:var(--gold-1)}
.step.done .dot{background:var(--gold-grad);border-color:transparent;color:#3a2a14}
.step.done span{color:var(--ink-soft);text-decoration:line-through;text-decoration-color:var(--line)}
.milestones{display:flex;justify-content:space-between;gap:8px;margin-top:6px;position:relative}
.milestones::before{content:"";position:absolute;left:8%;right:8%;top:15px;height:2px;background:var(--line)}
.ms{flex:1;text-align:center;position:relative;z-index:1}
.ms .node{width:32px;height:32px;border-radius:50%;margin:0 auto 8px;border:2px solid var(--line);background:var(--white);display:flex;align-items:center;justify-content:center;font-family:"Cormorant Garamond",serif;font-style:italic;color:var(--ink-soft)}
.ms.hit .node{background:var(--gold-grad);border-color:transparent;color:#3a2a14}
.ms small{display:block;font-size:12px;color:var(--ink-soft);line-height:1.4}
.match{display:flex;gap:18px;align-items:center}
.avatar{flex:0 0 72px;height:72px;border-radius:50%;background:var(--gold-grad);display:flex;align-items:center;justify-content:center;font-family:"Zen Old Mincho",serif;font-size:26px;color:#3a2a14;overflow:hidden}
.avatar img{width:100%;height:100%;object-fit:cover}
.tag{display:inline-block;font-size:12px;color:var(--plum);background:rgba(122,92,126,.10);border-radius:999px;padding:2px 10px;margin:2px 4px 2px 0}
.side .card+.card{margin-top:22px}

/* バックエンド講座（共有・残置） */
.course{display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:28px;box-shadow:var(--shadow-s)}
.course .cn{font-family:"Zen Old Mincho",serif;font-size:21px}
.course .cp{font-family:"Cormorant Garamond",serif;font-size:30px;color:var(--gold-1);margin:.1em 0}
.note{font-size:14px;color:var(--ink-soft);background:rgba(92,106,153,.07);border-left:3px solid var(--night);padding:12px 14px;border-radius:6px}

/* form（共有・残置） */
label{display:block;font-size:14px;color:var(--ink-soft);margin:14px 0 6px}
input[type=text],input[type=email],input[type=tel],input[type=password],select,textarea{
	width:100%;padding:13px 14px;border:1px solid var(--line);border-radius:10px;background:var(--white);
	font-family:inherit;font-size:16px;color:var(--ink)}
input:focus,select:focus,textarea:focus{outline:0;border-color:var(--gold-2);box-shadow:0 0 0 3px rgba(217,178,107,.18)}
input:-webkit-autofill,input:-webkit-autofill:hover,input:-webkit-autofill:focus{
	-webkit-box-shadow:0 0 0 1000px var(--white) inset !important;-webkit-text-fill-color:var(--ink)}
.check{display:flex;gap:10px;align-items:flex-start;margin:12px 0;font-size:14px;color:var(--ink-soft)}
.check input{margin-top:4px}

/* flash（共有・残置） */
.flash{border-radius:12px;padding:14px 18px;margin:18px 0;font-size:14.5px}
.flash.ok{background:rgba(217,178,107,.14);border:1px solid var(--gold-2);color:#7a5a1e}
.flash.err{background:rgba(214,90,90,.10);border:1px solid #d99;color:#9a3b3b}

/* footer */
.foot{margin-top:60px;border-top:1px solid var(--line);padding:34px 0;color:var(--ink-soft);font-size:13px;background:rgba(255,255,255,.7)}
.foot a{color:var(--ink-soft)}
.foot .wrap{display:flex;justify-content:space-between;flex-wrap:wrap;gap:14px}

@media(max-width:880px){
	.g3{grid-template-columns:1fr} .g2{grid-template-columns:1fr}
	.dash{grid-template-columns:1fr}
	.charter{grid-template-columns:1fr}
}
@media(max-width:820px){
	.hero{padding:26px 0 54px}
	.hero .htext{max-width:none}
	.hero .logo1{position:static; display:block; width:124px; margin:0 22px 12px auto}
}
@media(max-width:780px){ .nav-links{gap:14px} .nav-links a:not(.btn){font-size:13.5px} }
@media(max-width:660px){ .nav-links{gap:10px} .nav-links a:not(.btn){font-size:12.5px; letter-spacing:0}
	.nav-brand .bt{font-size:18px} .nav-brand img{height:38px} }
@media(max-width:560px){ .nav-links a:not(.btn){display:none} }
@media(prefers-reduced-motion:reduce){.reveal{animation:none;opacity:1;transform:none}}