/**
 * services.css — XiADEN サービス一覧ページCSS
 * 対象テンプレート: page-services.php
 */

/* Services Hero */
.s-svc-hero { background:var(--n); min-height:420px; position:relative; overflow:hidden; }
.svc-hero-inner {
  max-width:var(--max-w); margin:0 auto; padding:0 var(--sp48);
  min-height:420px; display:grid; grid-template-columns:1fr 1fr; align-items:center; gap:var(--sp64);
  position:relative; z-index:2;
}
.svc-hero-content { padding:var(--sp64) 0; }
.svc-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); }
.svc-hero-h1 { font-size:clamp(24px,3.5vw,38px); font-weight:900; color:var(--w); line-height:1.32; margin-bottom:var(--sp16); }
.svc-hero-desc { font-size:var(--f-body); color:rgba(255,255,255,.72); line-height:1.85; margin-bottom:var(--sp32); }
.svc-hero-btns { display:flex; gap:var(--sp12); flex-wrap:wrap; }
.svc-hero-btns .btn-primary { background:var(--or); }
.svc-hero-btns .btn-outline { border-color:rgba(255,255,255,.36); color:rgba(255,255,255,.85); }
.svc-hero-btns .btn-outline:hover { background:rgba(255,255,255,.1); border-color:rgba(255,255,255,.6); color:var(--w); }
.svc-hero-visual { position:relative; height:320px; border-radius:var(--r4); overflow:hidden; }
.svc-hero-visual img { width:100%; height:100%; object-fit:cover; display:block; }
.svc-hero-visual-overlay { position:absolute; inset:0; background:linear-gradient(135deg,rgba(29,58,90,.2) 0%,transparent 60%); }

/* Category bento */
.s-categories { background:var(--bs); border-top:1px solid var(--div); }
.cat-bento { display:grid; grid-template-columns:repeat(4,1fr); gap:var(--sp16); }
.cat-card {
  background:var(--w); border:1px solid var(--bm); border-radius:var(--r3);
  overflow:hidden; display:flex; flex-direction:column;
  transition:box-shadow .2s, transform .18s;
}
.cat-card:hover { box-shadow:var(--s2); transform:translateY(-2px); }
.cat-card-img { aspect-ratio:16/10; overflow:hidden; background:var(--bs); }
.cat-card-img img { width:100%; height:100%; object-fit:cover; display:block; }
.cat-card .cat-icon, .cat-card .cat-num, .cat-card .cat-title, .cat-card .cat-desc { margin:0 var(--sp20); }
.cat-icon {
  width:44px; height:44px; border-radius:var(--r2);
  display:flex; align-items:center; justify-content:center;
  margin-top:var(--sp20); flex-shrink:0;
}
.cat-icon--or     { background:rgba(232,120,12,.1); color:var(--or); }
.cat-icon--teal   { background:rgba(8,150,168,.1);  color:#0896a8; }
.cat-icon--navy   { background:var(--b); color:var(--n); }
.cat-icon--purple { background:rgba(128,96,200,.1); color:#8060c8; }
.cat-num   { font-size:10px; font-weight:700; letter-spacing:.16em; color:var(--txl); margin-top:var(--sp12); }
.cat-title { font-size:15px; font-weight:900; color:var(--n); margin-top:var(--sp8); }
.cat-desc  { font-size:12px; color:var(--txm); line-height:1.7; margin-top:var(--sp8); margin-bottom:var(--sp20); }

/* Services grid */
.s-svc-grid { background:var(--w); border-top:1px solid var(--div); }
.svc-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:var(--sp20); }
.svc-card {
  background:var(--w); border:1px solid var(--bm); border-radius:var(--r2);
  padding:var(--sp24); display:flex; flex-direction:column; gap:var(--sp12);
  transition:box-shadow .2s, transform .18s;
}
.svc-card:hover { box-shadow:var(--s2); transform:translateY(-2px); }
.svc-cat-tag {
  display:inline-block; font-size:10px; font-weight:700; padding:2px 10px;
  border-radius:var(--rf); align-self:flex-start;
}
.tag-home   { background:rgba(232,120,12,.1);  color:var(--or); }
.tag-elec   { background:rgba(8,150,168,.1);   color:#0896a8; }
.tag-biz    { background:rgba(29,58,90,.1);    color:var(--n); }
.tag-plan   { background:rgba(128,96,200,.1);  color:#8060c8; }
.svc-card-icon { color:var(--n); }
.svc-card-name { font-size:15px; font-weight:700; color:var(--n); line-height:1.4; }
.svc-card-desc { font-size:var(--f-sm); color:var(--txm); line-height:1.72; flex:1; }
.svc-card-actions { display:flex; gap:var(--sp8); margin-top:auto; }
.svc-card-btn {
  display:inline-flex; align-items:center; gap:6px;
  font-size:12px; font-weight:700; padding:8px 16px; border-radius:var(--rf);
  transition:background .15s, border-color .15s;
}
.svc-card-btn--detail  { background:var(--n); color:var(--w); }
.svc-card-btn--detail:hover { background:var(--nm); }
.svc-card-btn--consult { background:transparent; color:var(--n); border:1.5px solid var(--bm); }
.svc-card-btn--consult:hover { background:var(--b); border-color:var(--nm); }

/* Audience */
.s-audience { background:var(--bs); border-top:1px solid var(--div); }
.audience-grid { display:grid; grid-template-columns:1fr 1fr; gap:var(--sp24); }
.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-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; }

/* Member CTA strip */
.s-member-cta { background:var(--n); border-top:1px solid var(--div); }
.member-cta-inner {
  max-width:760px; margin:0 auto; padding:0 var(--sp48);
  text-align:center; display:flex; flex-direction:column; align-items:center; gap:var(--sp16);
}
.member-cta-eyebrow { font-size:var(--f-xs); font-weight:700; letter-spacing:.18em; color:rgba(255,255,255,.56); }
.member-cta-h2      { font-size:clamp(22px,3vw,32px); font-weight:900; color:var(--w); line-height:1.38; }
.member-cta-desc    { font-size:var(--f-body); color:rgba(255,255,255,.72); line-height:1.85; }
.member-cta-btns    { display:flex; gap:var(--sp12); flex-wrap:wrap; justify-content:center; }
.member-cta-btn-primary {
  display:inline-flex; align-items:center; gap:var(--sp8);
  padding:14px 32px; font-size:var(--f-body); font-weight:700;
  border-radius:var(--rf); text-decoration:none; transition:background .15s, box-shadow .15s;
  background:var(--or); color:var(--w); border:2px solid var(--or);
}
.member-cta-btn-primary:hover { background:var(--or-h); border-color:var(--or-h); box-shadow:var(--s2); }
.member-cta-btn-outline {
  display:inline-flex; align-items:center; gap:var(--sp8);
  padding:14px 32px; font-size:var(--f-body); font-weight:700;
  border-radius:var(--rf); text-decoration:none; transition:background .15s, border-color .15s, color .15s;
  background:transparent; border:2px solid rgba(255,255,255,.36); color:rgba(255,255,255,.85);
}
.member-cta-btn-outline:hover { background:rgba(255,255,255,.1); border-color:rgba(255,255,255,.6); color:var(--w); }

/* Responsive */
@media (max-width:1024px) {
  .cat-bento  { grid-template-columns:repeat(2,1fr); }
  .svc-grid   { grid-template-columns:repeat(2,1fr); }
}
@media (max-width:768px) {
  .svc-hero-inner   { grid-template-columns:1fr; padding:0 20px; }
  .svc-hero-visual  { height:200px; }
  .cat-bento        { grid-template-columns:repeat(2,1fr); }
  .svc-grid         { grid-template-columns:1fr; }
  .audience-grid    { grid-template-columns:1fr; }
  .member-cta-inner { padding:0 20px; }
}
@media (max-width:480px) {
  .cat-bento { grid-template-columns:1fr; }
}