/* ============================================================
   mui.works — service.css
   サービスページ共通スタイル
   ============================================================ */

/* ── 概要 ── */
.overview-sec { background:var(--bg); }
.overview-grid { display:grid; grid-template-columns:1fr 1fr; gap:64px; align-items:start; }
.overview-lead { font-size:.95rem; color:var(--text2); line-height:2.2; }
.overview-lead p+p { margin-top:16px; }
.overview-features { display:flex; flex-direction:column; gap:1px; background:var(--border); border:1px solid var(--border); }
.ov-feat { background:var(--bg1); padding:18px 22px; display:flex; align-items:center; gap:14px; }
.ov-feat-icon {
  width:28px; height:28px; border:1px solid rgba(77,158,247,.3);
  border-radius:50%; display:flex; align-items:center; justify-content:center; flex-shrink:0;
}
.ov-feat-icon svg { width:13px; height:13px; stroke:var(--accent); stroke-width:1.5; fill:none; stroke-linecap:round; stroke-linejoin:round; }
.ov-feat-text { font-size:.8rem; color:var(--text2); line-height:1.6; }
.ov-feat-text strong { display:block; font-size:.77rem; color:var(--text); font-weight:600; margin-bottom:2px; }
@media(max-width:768px) { .overview-grid { grid-template-columns:1fr; gap:36px; } }

/* ── 料金 ── */
.pricing-sec { background:var(--bg1); }
.price-note {
  font-size:.75rem; color:var(--text3); margin-bottom:36px;
  padding:14px 18px; border-left:2px solid var(--accent); background:rgba(77,158,247,.05);
}
.plans { display:grid; gap:1px; background:var(--border); border:1px solid var(--border); }
.plan { background:var(--bg); padding:36px 32px; position:relative; }
.plan.featured { background:var(--bg1); }
.plan-badge {
  position:absolute; top:20px; right:20px;
  font-size:.58rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--bg); background:var(--accent); padding:3px 10px;
}
.plan-en { font-family:var(--en); font-style:italic; font-size:.7rem; letter-spacing:.18em; color:var(--accent); text-transform:uppercase; margin-bottom:8px; display:block; }
.plan-name { font-family:var(--jp); font-size:1.1rem; font-weight:700; color:var(--text); margin-bottom:16px; }
.plan-price { margin-bottom:20px; }
.plan-price-num { font-family:var(--en); font-size:2.2rem; font-weight:300; color:var(--text); letter-spacing:-.02em; line-height:1; }
.plan-price-unit { font-size:.72rem; color:var(--text3); margin-left:4px; }
.plan-price-note { font-size:.68rem; color:var(--text3); margin-top:6px; }
.plan-price-alt { margin-top:8px; font-size:.72rem; color:var(--text3); display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.plan-price-alt-badge { font-size:.62rem; letter-spacing:.1em; color:var(--accent); border:1px solid rgba(77,158,247,.35); padding:2px 8px; flex-shrink:0; }
.plan-desc { font-size:.78rem; color:var(--text2); line-height:1.9; margin-bottom:24px; border-top:1px solid var(--border); padding-top:20px; }
.plan-includes { list-style:none; display:flex; flex-direction:column; gap:8px; }
.plan-includes li { font-size:.76rem; color:var(--text2); display:flex; align-items:baseline; gap:9px; line-height:1.6; }
.plan-includes li::before { content:''; width:14px; height:1px; background:var(--accent); opacity:.5; flex-shrink:0; margin-top:10px; }
.plan-includes li.extra { color:var(--text3); }
.plan-includes li.extra::before { opacity:.2; }
.plan-examples { margin-bottom:20px; }
.plan-examples-label { font-size:.62rem; letter-spacing:.16em; text-transform:uppercase; color:var(--text3); margin-bottom:8px; display:block; }
.plan-examples-list { list-style:none; display:flex; flex-wrap:wrap; gap:6px; }
.plan-examples-list li { font-size:.71rem; color:var(--text2); background:rgba(255,255,255,.04); border:1px solid var(--border); padding:3px 10px; line-height:1.6; }
.plan-divider { height:1px; background:var(--border); margin:20px 0; }
.plan-includes-label { font-size:.62rem; letter-spacing:.16em; text-transform:uppercase; color:var(--text3); margin-bottom:10px; display:block; }
.plan-deadline { margin-top:20px; padding-top:16px; border-top:1px solid var(--border); display:flex; align-items:center; gap:8px; }
.plan-deadline-icon { width:3px; height:3px; border-radius:50%; background:var(--accent); flex-shrink:0; }
.plan-deadline-text { font-size:.71rem; color:var(--text3); }
.plan-maintenance { margin-top:16px; padding-top:14px; border-top:1px solid var(--border); display:flex; align-items:center; gap:8px; }
.plan-maintenance-icon { width:3px; height:3px; border-radius:50%; background:var(--text3); flex-shrink:0; }
.plan-maintenance-text { font-size:.71rem; color:var(--text3); }
.pricing-group { margin-bottom:64px; }
.pricing-group:last-child { margin-bottom:0; }
.pricing-group-label { display:flex; align-items:center; gap:16px; margin-bottom:20px; }
.pricing-group-label-text { font-family:var(--jp); font-size:.88rem; font-weight:600; color:var(--text3); letter-spacing:.08em; }
.pricing-group-label-line { flex:1; height:1px; background:var(--border); }
.domain-perk { margin-top:48px; padding:24px 28px; border:1px solid rgba(77,158,247,.2); background:rgba(77,158,247,.04); display:flex; flex-direction:column; gap:8px; }
.domain-perk-title { font-size:.62rem; letter-spacing:.2em; text-transform:uppercase; color:var(--accent); margin-bottom:4px; }
.domain-perk-list { list-style:none; display:flex; flex-direction:column; gap:6px; }
.domain-perk-list li { font-size:.76rem; color:var(--text2); display:flex; align-items:baseline; gap:10px; line-height:1.7; }
.domain-perk-list li::before { content:''; width:12px; height:1px; background:var(--accent); opacity:.4; flex-shrink:0; margin-top:10px; }
.domain-perk-list code { font-size:.72rem; color:var(--accent); background:rgba(77,158,247,.1); padding:1px 7px; font-family:monospace; }
@media(max-width:900px) {
  .plans { grid-template-columns:1fr !important; }
  .plan { display:grid; grid-template-columns:1fr 1fr; grid-template-rows:auto; column-gap:32px; padding:28px 28px; }
  .plan-en             { grid-column:1; grid-row:1; }
  .plan-name           { grid-column:1; grid-row:2; }
  .plan-price          { grid-column:1; grid-row:3; }
  .plan-examples       { grid-column:1; grid-row:4; margin-bottom:0; }
  .plan-divider        { display:none; }
  .plan-includes-label { grid-column:2; grid-row:2; align-self:end; margin-bottom:10px; }
  .plan-includes       { grid-column:2; grid-row:3 / span 3; }
  .plan-deadline       { grid-column:1 / span 2; grid-row:5; margin-top:20px; padding-top:16px; }
  .plan-maintenance    { grid-column:1 / span 2; grid-row:6; margin-top:0; }
}
@media(max-width:600px) {
  .plan { display:block; padding:28px 20px; }
  .plan-divider { display:block; }
  .plan-examples { margin-bottom:20px; }
  .plan-includes-label { align-self:unset; margin-bottom:10px; }
}

/* ── サービスフロー ── */
.flow-sec { background:var(--bg); }
.svc-flow { display:flex; flex-direction:column; gap:1px; background:var(--border); border:1px solid var(--border); margin-top:8px; }
.svc-flow-item { background:var(--bg1); padding:24px 28px; display:grid; grid-template-columns:48px 1fr; gap:0 20px; align-items:center; }
.svc-flow-num { font-family:var(--en); font-size:1.8rem; font-weight:300; color:rgba(77,158,247,.18); line-height:1; }
.svc-flow-title { font-family:var(--jp); font-size:.88rem; font-weight:600; color:var(--text); margin-bottom:4px; }
.svc-flow-desc { font-size:.76rem; color:var(--text2); line-height:1.8; }

/* ── FAQ（サービスページ内）── */
.faq-sec { background:var(--bg1); }
.faq-list { display:flex; flex-direction:column; gap:1px; background:var(--border); border:1px solid var(--border); }
.faq-item { background:var(--bg); }
.faq-q {
  width:100%; display:flex; align-items:center; justify-content:space-between;
  gap:16px; padding:22px 24px; background:none; border:none;
  color:var(--text); cursor:pointer; text-align:left;
}
.faq-q-text { font-family:var(--jp); font-size:.88rem; font-weight:600; line-height:1.5; }
.faq-icon {
  width:20px; height:20px; border:1px solid var(--border2);
  border-radius:50%; display:flex; align-items:center; justify-content:center;
  flex-shrink:0; position:relative;
  transition:transform .3s, background .3s;
}
.faq-icon::before, .faq-icon::after { content:''; position:absolute; background:var(--text3); transition:opacity .3s; }
.faq-icon::before { width:8px; height:1px; }
.faq-icon::after  { width:1px; height:8px; transition:transform .3s, opacity .3s; }
.faq-item.open .faq-icon::after  { transform:rotate(90deg); opacity:0; }
.faq-item.open .faq-icon { background:rgba(77,158,247,.1); border-color:var(--accent); }
.faq-a { display:none; padding:0 24px 22px; font-size:.8rem; color:var(--text2); line-height:2; }
.faq-item.open .faq-a { display:block; }

/* ── サービス一覧ページ（services.php） ── */
.svc-cards {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
  margin-top: 56px;
}
.svc-card {
  background: var(--bg);
  padding: 48px 40px 52px;
  position: relative;
  scroll-margin-top: 80px;
}
.svc-card-num {
  font-family: var(--en);
  font-size: 3.5rem;
  font-weight: 300;
  color: rgba(77,158,247,.12);
  line-height: 1;
  margin-bottom: 20px;
  letter-spacing: -.03em;
}
.svc-card-en {
  font-family: var(--en);
  font-style: italic;
  font-size: .72rem;
  color: var(--accent);
  letter-spacing: .18em;
  text-transform: uppercase;
  margin-bottom: 10px;
  display: block;
}
.svc-card-title {
  font-family: var(--jp);
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 16px;
  line-height: 1.3;
}
.svc-card-catch {
  font-size: .8rem;
  color: var(--accent);
  margin-bottom: 16px;
  line-height: 1.7;
}
.svc-card-desc {
  font-size: .8rem;
  color: var(--text2);
  line-height: 2;
  margin-bottom: 28px;
}
.svc-card-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: .7rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--accent);
  font-family: var(--en);
  font-style: italic;
  text-decoration: none;
}
.svc-card-cta::after {
  content: '';
  display: block;
  width: 24px;
  height: 1px;
  background: var(--accent);
  transition: width .3s;
}
.svc-card-cta:hover::after { width: 40px; }
.svc-note {
  margin-top: 48px;
  padding: 28px 32px;
  border: 1px solid var(--border);
  background: var(--bg1);
}
.svc-note-title {
  font-family: var(--jp);
  font-size: .82rem;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 10px;
}
.svc-note-desc { font-size: .78rem; color: var(--text2); line-height: 2; }
@media(max-width:768px) { .svc-cards { grid-template-columns: 1fr; } }