/* ========================================================================
   6FTMethod Lab（月額サロン）— Premium design system
   6ftmethod.net 本体のデザイントークンに準拠（dark × purple × gold）
   ======================================================================== */
:root{
  --bg:#050508; --bg2:#08080d; --bg3:#0b0b12;
  --text:#f0f0f0; --text2:#8a8a96; --text3:#5a5a64;
  --purple:#9b59b6; --purple2:#b370cf; --blue:#6366f1;
  --gold:#d4ac0d; --gold2:#f1c40f; --gold-soft:rgba(212,172,13,.18);
  --card:rgba(255,255,255,.03); --card-border:rgba(255,255,255,.07);
  --gradient:linear-gradient(135deg,#9b59b6,#6366f1);
  --gradient-lux:linear-gradient(135deg,#9b59b6 0%,#b370cf 35%,#d4ac0d 100%);
  --gradient2:linear-gradient(135deg,#6366f1,#9b59b6);
  --radius:14px; --radius-lg:22px;
  --ease-soft:cubic-bezier(.16,1,.3,1); --ease-pop:cubic-bezier(.34,1.56,.64,1);
  color-scheme:dark;
}
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  background:var(--bg); color:var(--text);
  font-family:'Inter','Noto Sans JP',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  font-size:16px; line-height:1.8; -webkit-font-smoothing:antialiased;
  font-feature-settings:"palt"; overflow-x:hidden;
}
/* 背景の高級感：紫グローのアンビエント */
body::before{
  content:""; position:fixed; inset:0; z-index:-1; pointer-events:none;
  background:
    radial-gradient(70vw 50vh at 80% -5%, rgba(155,89,182,.13), transparent 60%),
    radial-gradient(60vw 45vh at 10% 5%, rgba(99,102,241,.10), transparent 60%),
    radial-gradient(50vw 40vh at 50% 110%, rgba(212,172,13,.07), transparent 60%);
}
a{color:var(--purple2); text-decoration:none; transition:color .25s}
a:hover{color:var(--gold)}
img{max-width:100%; display:block}

.wrap{max-width:920px; margin:0 auto; padding-left:22px; padding-right:22px}
.narrow{max-width:560px}

/* ---- Top bar ---- */
.bar{position:sticky; top:0; z-index:50; backdrop-filter:blur(18px);
  background:rgba(5,5,8,.72); border-bottom:1px solid var(--card-border)}
.bar-in{max-width:920px; margin:0 auto; padding:14px 22px; display:flex; align-items:center; justify-content:space-between}
.brand{display:inline-flex; align-items:center; gap:9px; font-weight:800; letter-spacing:.04em; color:var(--text)}
.brand b{background:var(--gradient-lux); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent}
.bar a.link{font-size:.9rem; color:var(--text2); font-weight:600}
.bar a.link:hover{color:var(--gold)}

/* ---- Section rhythm ---- */
section{padding:78px 0}
.eyebrow{display:inline-flex; align-items:center; gap:8px; padding:7px 16px; border-radius:100px;
  background:rgba(155,89,182,.12); border:1px solid rgba(179,107,214,.35);
  color:var(--purple2); font-weight:700; font-size:.78rem; letter-spacing:.12em; text-transform:uppercase}
h1{font-size:clamp(2rem,6vw,3.4rem); font-weight:900; line-height:1.18; letter-spacing:-.02em}
h2{font-size:clamp(1.5rem,4vw,2.2rem); font-weight:800; line-height:1.3; letter-spacing:-.01em}
h3{font-size:1.12rem; font-weight:700}
.lux{background:var(--gradient-lux); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent}
.muted{color:var(--text2)}
.center{text-align:center}
.lede{color:var(--text2); font-size:1.1rem; line-height:1.95; max-width:620px}
.center .lede{margin-left:auto; margin-right:auto}

/* ---- Hero ---- */
.hero{padding:72px 0 40px; text-align:center}
.hero h1{margin:22px auto 18px; max-width:14em}
.hero .sub{font-size:clamp(1rem,2.6vw,1.25rem); color:var(--purple2); font-weight:700; margin-bottom:6px}

/* ---- Buttons ---- */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:10px;
  font-family:inherit; font-weight:800; font-size:1rem; line-height:1; cursor:pointer;
  border:none; border-radius:100px; padding:17px 38px; text-decoration:none;
  transition:transform .25s var(--ease-pop), box-shadow .25s, opacity .2s; position:relative; overflow:hidden}
.btn:disabled{opacity:.55; cursor:wait}
.btn-gold{background:linear-gradient(135deg,var(--gold),var(--gold2)); color:#1a1407;
  box-shadow:0 8px 30px rgba(212,172,13,.34)}
.btn-gold:hover{transform:translateY(-2px); box-shadow:0 12px 40px rgba(212,172,13,.5); color:#1a1407}
.btn-grad{background:var(--gradient); color:#fff; box-shadow:0 8px 30px rgba(155,89,182,.34)}
.btn-grad:hover{transform:translateY(-2px); box-shadow:0 12px 40px rgba(155,89,182,.5); color:#fff}
.btn-ghost{background:rgba(255,255,255,.04); color:var(--text); border:1px solid var(--card-border)}
.btn-ghost:hover{border-color:var(--purple2); color:#fff; transform:translateY(-1px)}
.btn-block{width:100%}
/* shine */
.btn-gold::after,.btn-grad::after{content:""; position:absolute; inset:0;
  background:linear-gradient(110deg,transparent 20%,rgba(255,255,255,.35) 50%,transparent 80%);
  transform:translateX(-120%); transition:transform .7s}
.btn-gold:hover::after,.btn-grad:hover::after{transform:translateX(120%)}

/* ---- Cards ---- */
.card{background:var(--card); border:1px solid var(--card-border); border-radius:var(--radius-lg); padding:30px}
/* pricing card with gradient frame */
.price-card{position:relative; border-radius:24px; padding:1px; background:linear-gradient(135deg,rgba(155,89,182,.55),rgba(212,172,13,.45));
  box-shadow:0 30px 80px rgba(0,0,0,.5)}
.price-card>.inner{background:linear-gradient(180deg,#0c0c14,#08080d); border-radius:23px; padding:34px}
.price-row{display:flex; align-items:baseline; justify-content:space-between; flex-wrap:wrap; gap:12px}
.price{font-size:3.2rem; font-weight:900; letter-spacing:-.03em; line-height:1}
.price .lux{font-size:inherit}
.price small{font-size:1rem; font-weight:600; color:var(--text2); margin-left:8px}
.tagchip{display:inline-flex; align-items:center; gap:6px; padding:6px 14px; border-radius:100px;
  background:var(--gold-soft); border:1px solid rgba(212,172,13,.4); color:var(--gold2); font-weight:700; font-size:.8rem}
.ok{display:inline-flex; padding:5px 12px; border-radius:100px; background:rgba(16,185,129,.14); color:#34d399; font-size:.78rem; font-weight:700}

/* feature list */
.feat{list-style:none; margin:22px 0}
.feat li{position:relative; padding:11px 0 11px 34px; border-bottom:1px solid rgba(255,255,255,.05); color:#dcdce6}
.feat li:last-child{border-bottom:none}
.feat li::before{content:"✓"; position:absolute; left:0; top:11px; width:22px; height:22px; border-radius:50%;
  background:var(--gold-soft); color:var(--gold2); font-weight:900; font-size:.8rem; display:flex; align-items:center; justify-content:center}
.feat li b{color:var(--gold2); font-weight:800}

/* benefit grid */
.grid{display:grid; grid-template-columns:1fr; gap:14px}
@media(min-width:660px){.grid{grid-template-columns:1fr 1fr}}
.tile{background:var(--card); border:1px solid var(--card-border); border-radius:var(--radius); padding:22px; transition:transform .3s var(--ease-soft), border-color .3s}
.tile:hover{transform:translateY(-3px); border-color:rgba(179,107,214,.4)}
.tile .ic{font-size:1.7rem; margin-bottom:10px}
.tile h3{margin-bottom:8px}
.tile p{color:var(--text2); font-size:.95rem; line-height:1.75}

/* steps */
.steps{counter-reset:s; display:grid; gap:14px}
.step{position:relative; padding:18px 18px 18px 64px; background:var(--card); border:1px solid var(--card-border); border-radius:var(--radius)}
.step::before{counter-increment:s; content:counter(s); position:absolute; left:18px; top:18px; width:32px; height:32px;
  border-radius:50%; background:var(--gradient); color:#fff; font-weight:900; display:flex; align-items:center; justify-content:center; font-size:.95rem}
.step h3{margin-bottom:5px}
.step p{color:var(--text2); font-size:.95rem; line-height:1.7}

/* FAQ */
.faq details{background:var(--card); border:1px solid var(--card-border); border-radius:var(--radius); margin-bottom:10px; overflow:hidden}
.faq summary{cursor:pointer; padding:18px 20px; font-weight:700; list-style:none; display:flex; justify-content:space-between; gap:12px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"＋"; color:var(--gold); font-weight:900; transition:transform .3s}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq .a{padding:0 20px 18px; color:var(--text2)}

/* note / disclaimer / alerts */
.note{font-size:.78rem; color:var(--text3); text-align:center; margin-top:14px}
.disclaimer{margin-top:40px; padding:18px 20px; border:1px solid var(--card-border); border-radius:var(--radius);
  background:rgba(0,0,0,.3); color:var(--text3); font-size:.78rem; line-height:1.85}
.alert{padding:13px 16px; border-radius:12px; font-size:.9rem; margin:14px 0}
.alert-error{background:rgba(255,91,107,.1); border:1px solid rgba(255,91,107,.3); color:#ffc8cf}
.alert-ok{background:rgba(16,185,129,.1); border:1px solid rgba(16,185,129,.3); color:#a7f3d0}
.alert-info{background:rgba(99,102,241,.1); border:1px solid rgba(99,102,241,.3); color:#c7d2fe}

/* forms */
.field{margin-bottom:16px}
.field label{display:block; margin-bottom:7px; font-size:.85rem; color:var(--text2); font-weight:600}
.input{width:100%; padding:15px 16px; background:#0c0c14; border:1px solid var(--card-border); border-radius:12px;
  color:var(--text); font-family:inherit; font-size:1rem; transition:border-color .2s, box-shadow .2s}
.input:focus{outline:none; border-color:var(--purple2); box-shadow:0 0 0 3px rgba(155,89,182,.22)}

/* loader */
.loader{width:34px; height:34px; border:3px solid var(--card-border); border-top-color:var(--purple2);
  border-radius:50%; animation:spin .8s linear infinite; margin:48px auto}
@keyframes spin{to{transform:rotate(360deg)}}

/* member modules */
.module{display:flex; gap:16px; align-items:flex-start; padding:20px; background:var(--card);
  border:1px solid var(--card-border); border-radius:var(--radius); margin-bottom:12px}
.module .ic{font-size:1.5rem; flex-shrink:0}
.module h3{margin-bottom:4px}
.module p{color:var(--text2); font-size:.9rem}
.badge-on{display:inline-flex; padding:5px 13px; border-radius:100px; background:rgba(16,185,129,.14); color:#34d399; font-weight:700; font-size:.8rem}

/* footer */
.foot{border-top:1px solid var(--card-border); padding:34px 0; text-align:center; color:var(--text3); font-size:.82rem; line-height:1.9}
.foot a{color:var(--text2)}

/* reveal animation */
.reveal{opacity:0; transform:translateY(18px); transition:opacity .7s var(--ease-soft), transform .7s var(--ease-soft)}
.reveal.in{opacity:1; transform:none}
@media(prefers-reduced-motion:reduce){.reveal{opacity:1; transform:none} *{animation-duration:.01ms!important; transition-duration:.01ms!important}}

/* ===== モダン・インタラクション（2026 refresh：高級感を保った微反応） ===== */
html{scroll-behavior:smooth}
*{-webkit-tap-highlight-color:transparent}
/* キーボード操作のフォーカスリング（アクセシビリティ＋現代的） */
.btn:focus-visible,a:focus-visible,summary:focus-visible,.input:focus-visible{outline:2px solid var(--purple2); outline-offset:3px; border-radius:10px}
/* 押した瞬間の触覚的フィードバック */
.btn:active{transform:translateY(0) scale(.975); transition-duration:.08s}
.btn-gold:active,.btn-grad:active{box-shadow:0 4px 16px rgba(212,172,13,.4)}
/* アイコンの微反応 */
.tile .ic,.module .ic{transition:transform .35s var(--ease-pop)}
.tile:hover .ic,.module:hover .ic{transform:scale(1.12) translateY(-2px)}
/* モジュール（マイページ各行）のホバー浮上 */
.module{transition:transform .3s var(--ease-soft), border-color .3s, box-shadow .3s, background .3s}
.module:hover{transform:translateY(-2px); border-color:rgba(179,107,214,.38); box-shadow:0 16px 44px rgba(0,0,0,.32)}
/* プレミアムな価格カードのアニメ・グラデ枠 */
.price-card{position:relative}
.price-card::before{content:""; position:absolute; inset:-1px; border-radius:inherit; padding:1px;
  background:linear-gradient(130deg,rgba(155,89,182,.75),rgba(99,102,241,.2) 42%,rgba(212,172,13,.75));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude; opacity:.55; pointer-events:none;
  background-size:220% 220%; animation:luxborder 9s linear infinite}
@keyframes luxborder{0%{background-position:0% 50%}100%{background-position:220% 50%}}
/* FAQ展開の色変化 */
.faq details[open] summary{color:var(--purple2)}
/* ダーク統一の現代的スクロールバー */
*{scrollbar-width:thin; scrollbar-color:rgba(155,89,182,.45) transparent}
*::-webkit-scrollbar{width:10px; height:10px}
*::-webkit-scrollbar-thumb{background:linear-gradient(var(--purple),var(--blue)); border-radius:99px; border:2px solid transparent; background-clip:padding-box}
*::-webkit-scrollbar-track{background:transparent}
@media(prefers-reduced-motion:reduce){.price-card::before{animation:none}}

/* タブメニュー（マイページ等の整理用・スクロール削減） */
.tabs{display:flex;gap:4px;margin:26px 0 18px;border-bottom:1px solid var(--card-border);overflow-x:auto;scrollbar-width:none}
.tabs::-webkit-scrollbar{display:none}
.tab{flex:0 0 auto;background:none;border:none;color:var(--text2);font-family:inherit;font-weight:700;font-size:.95rem;padding:12px 16px;margin-bottom:-1px;cursor:pointer;border-bottom:2px solid transparent;white-space:nowrap;transition:color .2s,border-color .2s;-webkit-tap-highlight-color:transparent}
.tab:hover{color:var(--text)}
.tab.is-on{color:var(--gold2);border-bottom-color:var(--gold)}
.tabpanel[hidden]{display:none}
.tabpanel{animation:tabIn .35s var(--ease-soft)}
@keyframes tabIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}