/* ==========================================================
   サービスページ（page-service.php）
   【配色パターン：ネイビー×白（ゴシック体）】
   ※ 色・書体は style.css の変数で切り替わるため、中身は通常版と同じです
   サイト共通の変数（--paper / --ink / --hair / --moss など）と
   共通クラス（.wrap / .sec-head / .eyebrow / .btn）を使用
   ========================================================== */

.service-page{ position:relative; z-index:2; }

/* ---------- ページ見出し ---------- */
.svc-head{
  padding:9.5rem var(--pad) clamp(3.5rem,7vw,5.5rem);
  text-align:center;
  border-bottom:1px solid var(--hair);
}
.svc-head .eyebrow{ display:block; margin-bottom:1.2rem; }
.svc-head__title{
  font-weight:500;
  font-size:clamp(1.6rem,3.4vw,2.4rem);
  letter-spacing:.16em;
  line-height:1.7;
}
.svc-head__lead{
  margin-top:1.4rem;
  color:var(--ink-soft);
  font-size:1rem;
}

/* 個人／法人の切り替えリンク */
.svc-tabs{
  display:flex;
  justify-content:center;
  flex-wrap:wrap;
  gap:1rem;
  margin-top:2.6rem;
}
.svc-tabs a{
  font-family:var(--gothic);
  font-size:.9rem;
  letter-spacing:.14em;
  text-transform:none;
  color:var(--ink);
  text-decoration:none;
  padding:.6rem 1.8rem;
  border:1px solid var(--hair);
  border-radius:999px;
  transition:all .4s ease;
}
.svc-tabs a::after{ display:none; } /* 共通ナビの下線アニメーションを打ち消す */
.svc-tabs a:hover{ border-color:var(--moss); color:var(--moss-deep); }

/* ---------- サービスのまとまり ---------- */
.svc-group{ scroll-margin-top:80px; }
.svc-group .sec-head{ margin-bottom:.6rem; }
.svc-group__lead{
  margin-bottom:clamp(2.5rem,6vw,4.5rem);
  color:var(--ink-soft);
  font-size:.98rem;
}
.svc-group--tint{ background:var(--paper-2); }

/* ---------- サービス1件（写真＋説明を左右交互に） ---------- */
.svc-item{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:clamp(2rem,6vw,5.5rem);
  align-items:center;
  padding:clamp(2.5rem,5vw,4rem) 0;
  border-top:1px solid var(--hair);
}
.svc-item:last-child{ border-bottom:1px solid var(--hair); }

.svc-item__img img{
  width:100%;
  aspect-ratio:4/3;
  object-fit:cover;
  border-radius:2px;
}
.svc-item.is-reverse .svc-item__img{ order:2; }

.svc-item__en{
  font-family:var(--latin);
  font-size:.82rem;
  letter-spacing:.32em;
  text-transform:uppercase;
  color:var(--moss);
}
.svc-item h3{
  margin:.5rem 0 1.1rem;
  font-weight:600;
  font-size:1.35rem;
  letter-spacing:.08em;
  line-height:1.6;
}
.svc-item__body > p{
  color:var(--ink-soft);
  font-size:.98rem;
}

.svc-list{
  margin:1.4rem 0 0;
  list-style:none;
}
.svc-list li{
  position:relative;
  padding-left:1.8em;
  font-size:.95rem;
  line-height:1.9;
}
.svc-list li::before{
  content:"—";
  position:absolute;
  left:0;
  color:var(--moss);
  font-family:var(--latin);
}

.svc-item__price{
  margin-top:1.6rem;
  padding-top:1rem;
  border-top:1px solid var(--hair);
  font-family:var(--latin);
  font-size:1.35rem;
  letter-spacing:.08em;
  color:var(--moss-deep);
}
.svc-item__price small{
  margin-left:.4rem;
  font-family:var(--serif);
  font-size:.78rem;
  letter-spacing:.06em;
  color:var(--ink-soft);
}

/* 選ばれる理由（.svc-reason）は style.css に移動しました */

/* ---------- ご依頼の流れ ---------- */
.svc-flow__list{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:clamp(1.5rem,3vw,2.5rem);
  list-style:none;
}
.svc-flow__list li{
  position:relative;
  padding-top:1.6rem;
  border-top:1px solid var(--moss);
}
.svc-flow__step{
  font-family:var(--latin);
  font-size:.82rem;
  letter-spacing:.3em;
  text-transform:uppercase;
  color:var(--moss);
}
.svc-flow__list h3{
  margin:.6rem 0 .8rem;
  font-weight:600;
  font-size:1.1rem;
  letter-spacing:.06em;
  line-height:1.7;
}
.svc-flow__list p{
  color:var(--ink-soft);
  font-size:.93rem;
  line-height:1.95;
}

/* ---------- よくある質問 ---------- */
.svc-faq__list{
  max-width:52rem;
  border-top:1px solid var(--hair);
}
.svc-faq__list details{
  border-bottom:1px solid var(--hair);
}
.svc-faq__list summary{
  position:relative;
  list-style:none;
  cursor:pointer;
  padding:1.5rem 3rem 1.5rem 2.2rem;
  font-size:1.02rem;
  letter-spacing:.04em;
  line-height:1.8;
}
.svc-faq__list summary::-webkit-details-marker{ display:none; }
.svc-faq__list summary::before{
  content:"Q";
  position:absolute;
  left:0;
  top:1.45rem;
  font-family:var(--latin);
  font-size:1.15rem;
  color:var(--moss);
}
/* 開閉の＋／− */
.svc-faq__list summary::after{
  content:"";
  position:absolute;
  right:.4rem;
  top:50%;
  width:12px;
  height:12px;
  transform:translateY(-50%);
  background:
    linear-gradient(var(--ink-soft),var(--ink-soft)) center/12px 1px no-repeat,
    linear-gradient(var(--ink-soft),var(--ink-soft)) center/1px 12px no-repeat;
}
.svc-faq__list details[open] summary::after{
  background:linear-gradient(var(--ink-soft),var(--ink-soft)) center/12px 1px no-repeat;
}
.svc-faq__list details p{
  padding:0 3rem 1.6rem 2.2rem;
  color:var(--ink-soft);
  font-size:.95rem;
}

/* ---------- ご相談 ---------- */
.svc-cta{
  text-align:center;
  border-top:1px solid var(--hair);
}
.svc-cta .eyebrow{ display:block; margin-bottom:1.2rem; }
.svc-cta__title{
  font-weight:500;
  font-size:clamp(1.4rem,2.8vw,2rem);
  letter-spacing:.12em;
  line-height:1.7;
}
.svc-cta__lead{
  margin:1.2rem 0 2.6rem;
  color:var(--ink-soft);
}
.svc-cta__actions{
  display:flex;
  justify-content:center;
  flex-wrap:wrap;
  gap:1rem;
}
.svc-cta__actions .btn{ padding:.8rem 2.6rem; }
.svc-cta__btn{
  background:var(--moss-deep);
  border-color:var(--moss-deep);
  color:var(--paper);
}
.svc-cta__btn:hover{
  background:var(--ink);
  border-color:var(--ink);
}

/* ---------- タブレット・スマホ ---------- */
@media(max-width:820px){
  .svc-item{ grid-template-columns:1fr; gap:1.6rem; }
  .svc-item.is-reverse .svc-item__img{ order:0; }
  .svc-flow__list{ grid-template-columns:1fr 1fr; row-gap:2.5rem; }
  .pc-only{ display:none; }
}
@media(max-width:560px){
  .svc-head{ padding-top:7.5rem; }
  .svc-flow__list{ grid-template-columns:1fr; }
  .svc-faq__list summary{ padding-right:2.4rem; }
  .svc-faq__list details p{ padding-right:0; }
}