/**
 * member.css — XiADEN 会員制サポートページCSS
 * 対象テンプレート: page-member.php
 */

/* Member Hero */
.s-member-hero { background:var(--n); padding:var(--sp64) 0; position:relative; overflow:hidden; }
.member-hero-inner {
  max-width:var(--max-w); margin:0 auto; padding:0 var(--sp48);
  display:grid; grid-template-columns:1fr 1fr; gap:var(--sp48); align-items:center;
}
.member-hero-content { padding:var(--sp32) 0; }
.member-hero-eyebrow { display:block; font-size:var(--f-xs); font-weight:700; letter-spacing:.18em; color:rgba(255,255,255,.56); margin-bottom:var(--sp12); }
.member-hero-h1 { font-size:clamp(24px,3.5vw,38px); font-weight:900; color:var(--w); line-height:1.32; margin-bottom:var(--sp16); }
.member-hero-desc { font-size:var(--f-body); color:rgba(255,255,255,.72); line-height:1.85; margin-bottom:var(--sp32); }
.member-hero-btns { display:flex; gap:var(--sp12); flex-wrap:wrap; }
.member-hero-btns .btn-outline { border-color:rgba(255,255,255,.36); color:rgba(255,255,255,.85); }
.member-hero-btns .btn-outline:hover { background:rgba(255,255,255,.1); border-color:rgba(255,255,255,.6); color:var(--w); }

/* Hero visual card (右側グラデーションカード) */
.member-hero-visual {
  background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.16);
  border-radius:var(--r4); padding:var(--sp40);
  backdrop-filter:blur(8px);
}
.hero-visual-icon {
  width:48px; height:48px; background:rgba(232,120,12,.2); border-radius:50%;
  display:flex; align-items:center; justify-content:center; color:var(--or);
  margin-bottom:var(--sp20);
}
.hero-visual-label { font-size:10px; font-weight:700; letter-spacing:.16em; color:rgba(255,255,255,.56); display:block; margin-bottom:var(--sp8); }
.hero-visual-h2    { font-size:clamp(18px,2.5vw,24px); font-weight:900; color:var(--w); line-height:1.42; margin-bottom:var(--sp24); }
.hero-visual-points { display:flex; flex-direction:column; gap:var(--sp12); }
.hero-visual-point { display:flex; align-items:center; gap:var(--sp8); font-size:14px; color:rgba(255,255,255,.82); }
.hero-visual-dot { width:6px; height:6px; background:var(--or); border-radius:50%; flex-shrink:0; }

/* About member */
.s-member-about { background:var(--bs); border-top:1px solid var(--div); }
.about-member-grid { display:grid; grid-template-columns:1fr 1fr; gap:var(--sp48); align-items:start; }
.about-member-text h2 { font-size:clamp(20px,2.5vw,26px); font-weight:900; color:var(--n); line-height:1.42; margin-bottom:var(--sp16); }
.about-member-text p  { font-size:var(--f-body); color:var(--txm); line-height:1.88; }
.member-points { display:flex; flex-direction:column; gap:var(--sp12); }
.member-point { display:flex; align-items:flex-start; gap:var(--sp12); }
.member-point-dot  { width:8px; height:8px; background:var(--or); border-radius:50%; flex-shrink:0; margin-top:6px; }
.member-point-text { font-size:var(--f-body); color:var(--txm); line-height:1.72; }

/* Plans */
.s-plans { background:var(--w); border-top:1px solid var(--div); }
/* 2026-06-10 プラスプラン廃止により3列→2列に変更 */
.plans-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:var(--sp24); max-width:860px; margin-inline:auto; }
.plan-card {
  background:var(--bs); border:1px solid var(--bm); border-radius:var(--r3);
  padding:var(--sp32); display:flex; flex-direction:column; gap:var(--sp12);
}
.plan-card--standard {
  background:var(--n); border-color:var(--n);
}
.plan-card--standard .plan-name,
.plan-card--standard .plan-price,
.plan-card--standard .plan-price-note,
.plan-card--standard .plan-desc,
.plan-card--standard .plan-feature { color:rgba(255,255,255,.88); }
.plan-card--standard .plan-divider { border-color:rgba(255,255,255,.15); }
.plan-card--standard .plan-feature-check { color:var(--or); }
.plan-badge {
  display:inline-block; background:var(--or); color:var(--w);
  font-size:10px; font-weight:700; padding:3px 12px; border-radius:var(--rf);
  align-self:flex-start;
}
.plan-name       { font-size:16px; font-weight:900; color:var(--n); }
.plan-price      { font-size:28px; font-weight:900; color:var(--n); line-height:1.1; }
.plan-price-unit { font-size:14px; font-weight:400; }
.plan-price-note { font-size:12px; color:var(--txl); }
.plan-divider    { border:none; border-top:1px solid var(--bm); margin:0; }
.plan-desc       { font-size:var(--f-sm); color:var(--txm); line-height:1.78; }
.plan-features   { display:flex; flex-direction:column; gap:var(--sp8); flex:1; }
.plan-feature    { display:flex; align-items:center; gap:var(--sp8); font-size:14px; color:var(--txm); }
.plan-feature-check { color:var(--gn); font-size:16px; flex-shrink:0; }

/* Recommend */
.s-recommend { background:var(--bs); border-top:1px solid var(--div); }
.recommend-grid {
  display:grid; grid-template-columns:repeat(3,1fr); gap:var(--sp16);
}
.recommend-card {
  background:var(--w); border:1px solid var(--bm); border-radius:var(--r2);
  padding:var(--sp20) var(--sp24);
  display:flex; align-items:flex-start; gap:var(--sp12);
  transition:box-shadow .18s;
}
.recommend-card:hover { box-shadow:var(--s2); }
.recommend-num { font-size:20px; font-weight:900; color:var(--bm); line-height:1; flex-shrink:0; }
.recommend-text { font-size:14px; color:var(--txm); line-height:1.65; }

/* Audience */
.s-audience { background:var(--w); border-top:1px solid var(--div); }
.audience-card {
  background:var(--w); border:1px solid var(--bm); border-radius:var(--r3);
  padding:var(--sp40); display:flex; flex-direction:column; gap:var(--sp12);
}
.audience-label { font-size:11px; font-weight:700; color:var(--or); letter-spacing:.1em; }
.audience-title { font-size:clamp(16px,2vw,20px); font-weight:900; color:var(--n); line-height:1.42; }
.audience-desc  { font-size:var(--f-sm); color:var(--txm); line-height:1.72; }
.audience-list  { display:flex; flex-direction:column; gap:var(--sp8); }
.audience-list li { display:flex; align-items:center; gap:var(--sp8); font-size:14px; color:var(--txm); }
.audience-list li::before { content:'✓'; color:var(--gn); font-weight:700; flex-shrink:0; }
.audience-link {
  display:inline-flex; align-items:center; gap:6px;
  font-size:13px; font-weight:700; color:var(--or);
  transition:gap .15s;
}
.audience-link:hover { gap:9px; }
.audience-photo-strip {
  position:relative; height:240px; border-radius:var(--r3); overflow:hidden;
  margin-top:var(--sp32);
}
.audience-photo-strip img { width:100%; height:100%; object-fit:cover; display:block; }
.audience-photo-overlay {
  position:absolute; inset:0;
  background:linear-gradient(135deg,rgba(29,58,90,.7) 0%,rgba(29,58,90,.3) 60%,transparent 100%);
  display:flex; align-items:flex-end; padding:var(--sp32) var(--sp48);
}
.audience-photo-text {
  font-size:clamp(16px,2vw,22px); font-weight:900; color:var(--w); line-height:1.48;
}

/* Flow */
.s-member-flow { background:var(--bs); border-top:1px solid var(--div); }
.member-flow-grid {
  display:grid; grid-template-columns:repeat(5,1fr); gap:0;
}
.flow-step {
  display:flex; flex-direction:column; align-items:center; text-align:center;
  padding:var(--sp24) var(--sp16);
  border-right:1px solid var(--bm);
  background:var(--w);
}
.flow-step:last-child { border-right:none; }
.flow-step-label { font-size:10px; font-weight:700; color:var(--or); letter-spacing:.12em; margin-bottom:var(--sp8); }
.flow-step-title { font-size:14px; font-weight:700; color:var(--n); margin-bottom:var(--sp4); }
.flow-step-note  { font-size:11px; color:var(--txl); line-height:1.5; }
.member-flow-footer { text-align:center; font-size:12px; color:var(--txl); margin-top:var(--sp24); }

/* Notes */
.s-member-notes { background:var(--w); border-top:1px solid var(--div); }
.member-notes-card {
  background:var(--bs); border:1px solid var(--bm); border-left:4px solid var(--bm);
  border-radius:var(--r2); padding:var(--sp24) var(--sp32);
  max-width:760px; margin:0 auto;
}
.notes-title-bar {
  display:flex; align-items:center; gap:var(--sp8);
  font-size:14px; font-weight:700; color:var(--n);
  margin-bottom:var(--sp16);
}
.notes-title-icon { color:var(--or); flex-shrink:0; }
.notes-list { display:flex; flex-direction:column; gap:var(--sp8); }
.notes-list li { font-size:var(--f-sm); color:var(--txm); line-height:1.75; padding-left:1.2em; position:relative; }
.notes-list li::before { content:'・'; position:absolute; left:0; }

/* Member CTA */
.s-member-cta { background:var(--n); }
.member-cta-inner {
  max-width:600px; margin:0 auto; padding:0 var(--sp48);
  text-align:center; display:flex; flex-direction:column; align-items:center; gap:var(--sp16);
}
.member-cta-h2   { font-size:clamp(20px,3vw,28px); font-weight:900; color:var(--w); line-height:1.42; }
.member-cta-desc { font-size:var(--f-body); color:rgba(255,255,255,.72); line-height:1.85; }
.btn-primary.full { width:100%; justify-content:center; }

/* Responsive */
@media (max-width:1024px) {
  .recommend-grid { grid-template-columns:repeat(2,1fr); }
  .member-flow-grid { grid-template-columns:repeat(3,1fr); }
  .flow-step:nth-child(3n) { border-right:none; }
}
@media (max-width:768px) {
  .member-hero-inner { grid-template-columns:1fr; padding:0 20px; }
  .about-member-grid { grid-template-columns:1fr; }
  .plans-grid        { grid-template-columns:1fr; }
  .recommend-grid    { grid-template-columns:1fr 1fr; }
  .audience-grid     { grid-template-columns:1fr; }
  .member-flow-grid  { grid-template-columns:1fr; }
  .flow-step         { border-right:none; border-bottom:1px solid var(--bm); }
  .member-cta-inner  { padding:0 20px; }
  .audience-photo-overlay { padding:var(--sp24) 20px; }
}
@media (max-width:480px) {
  .recommend-grid { grid-template-columns:1fr; }
}