/* ============================================================
   services.html 専用スタイル
   - スマホ用セクションあしらい画像（左右交互）
   - PC用 services-layout（メイン + サイドあしらい）
   - SP用 services-nav 開閉アニメーション
   ============================================================ */

/* === スマホ用 セクションあしらい画像（半分サイズ + 左右交互）=== */
.sec-arch-mobile {
  display: block;
  width: 55%;
  margin-bottom: 24px;
  position: relative;
}
.sec-arch-mobile.is-left { margin-right: auto; margin-left: 8px; }
.sec-arch-mobile.is-right { margin-left: auto; margin-right: 8px; }
.sec-arch-mobile .arch-photo {
  width: 100%;
  aspect-ratio: 4 / 5.3;
  overflow: hidden;
  background: rgba(124,179,66,0.08);
  position: relative;
}
.sec-arch-mobile .arch-photo.arch-top { border-radius: 999px 999px 0 0; }
.sec-arch-mobile .arch-photo.arch-bottom { border-radius: 0 0 999px 999px; }
.sec-arch-mobile .arch-photo img {
  width: 100%; height: 100%;
  object-fit: cover; display: block;
}
.sec-arch-mobile .arch-accent {
  position: absolute;
  width: 26%; aspect-ratio: 1;
  background: #7cb342;
  border-radius: 8px;
  z-index: -1;
}
.sec-arch-mobile.is-left .arch-accent { bottom: -10px; right: -10px; }
.sec-arch-mobile.is-right .arch-accent { bottom: -10px; left: -10px; }
@media (min-width: 1024px) {
  .sec-arch-mobile { display: none; }
}

/* === 診療科目セクション PC用：左あしらい付きレイアウト === */
.services-layout { position: relative; }
.services-main { max-width: 720px; margin: 0 auto; }
.services-arch { display: none; }
@media (min-width: 1024px) {
  .services-layout {
    display: grid;
    grid-template-columns: minmax(360px, 1.2fr) minmax(0, 720px) 1fr;
    gap: 56px;
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 24px;
  }
  .services-main { grid-column: 2; max-width: none; }
  .services-arch {
    display: flex;
    flex-direction: column;
    gap: 60px;
    grid-column: 1;
    align-self: start;
  }
  .services-arch .arch-photo-wrap {
    position: relative;
    width: 100%;
  }
  .services-arch .arch-photo {
    width: 100%;
    aspect-ratio: 4 / 6;
    border-radius: 999px 999px 0 0;
    overflow: hidden;
    background: rgba(124,179,66,0.08);
  }
  .services-arch .arch-photo.arch-inverted {
    border-radius: 0 0 999px 999px;
  }
  .services-arch .arch-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }
  .services-arch .arch-accent {
    position: absolute;
    bottom: -14px;
    right: -14px;
    width: 28%;
    aspect-ratio: 1;
    background: #7cb342;
    border-radius: 10px;
    z-index: -1;
  }
  .services-arch .arch-accent-top {
    bottom: auto;
    right: auto;
    top: -14px;
    left: -14px;
  }
  .services-arch-right { grid-column: 3; align-self: start; }

  /* 6番目以降：本文左寄せ + 右あしらい */
  .services-layout-alt {
    display: grid;
    grid-template-columns: minmax(0, 720px) 1fr;
    gap: 56px;
    max-width: 1400px;
    margin: 80px auto 0;
    padding: 0 24px;
  }
  .services-layout-alt .services-main { grid-column: 1; max-width: none; }
  .services-layout-alt .services-arch { grid-column: 2; align-self: start; }

  /* 11番目以降：左あしらい + 本文右寄せ */
  .services-layout-alt2 {
    display: grid;
    grid-template-columns: 1fr minmax(0, 720px);
    gap: 56px;
    max-width: 1400px;
    margin: 80px auto 0;
    padding: 0 24px;
  }
  .services-layout-alt2 .services-main { grid-column: 2; max-width: none; }
  .services-layout-alt2 .services-arch { grid-column: 1; align-self: start; }
}

/* ============================================================
   神経内科外来 関連疾患クラスター（神経内科外来カードの直下）
   - ピラー（神経内科外来）→ クラスター（4疾患）の内部リンク構造
   ============================================================ */
.shinkei-cluster {
  margin-top: 28px;
  background: linear-gradient(180deg, #f1f8e9 0%, #e8f5e0 100%);
  border: 1px solid rgba(85, 139, 47, 0.16);
  border-radius: 24px;
  padding: 28px 24px 30px;
}
.shinkei-cluster-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}
.shinkei-cluster-head svg {
  width: 18px;
  height: 18px;
  color: #558b2f;
  flex-shrink: 0;
}
.shinkei-cluster-label {
  font-size: 15px;
  font-weight: 700;
  color: #33691e;
  letter-spacing: 0.04em;
}
.shinkei-cluster-note {
  font-size: 13px;
  color: #5a6b6a;
  line-height: 1.9;
  margin-bottom: 20px;
}
.shinkei-cluster-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}
@media (min-width: 640px) {
  .shinkei-cluster-grid { grid-template-columns: 1fr 1fr; }
}
.shinkei-cluster-card {
  display: flex;
  flex-direction: column;
  gap: 5px;
  background: #fff;
  border: 1px solid rgba(85, 139, 47, 0.12);
  border-radius: 16px;
  padding: 16px 18px;
  text-decoration: none;
  color: inherit;
  transition: box-shadow 0.3s, transform 0.3s, border-color 0.3s;
}
.shinkei-cluster-card:hover {
  box-shadow: 0 10px 26px rgba(85, 139, 47, 0.13);
  transform: translateY(-2px);
  border-color: rgba(85, 139, 47, 0.30);
}
.scc-en {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #8bc34a;
}
.scc-ja {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 16px;
  font-weight: 700;
  color: #333;
  line-height: 1.4;
}
.scc-ja::after {
  content: '›';
  margin-left: auto;
  color: #558b2f;
  font-weight: 700;
  transition: transform 0.3s;
}
.shinkei-cluster-card:hover .scc-ja::after { transform: translateX(3px); }
.scc-desc {
  font-size: 12.5px;
  color: #5a6b6a;
  line-height: 1.7;
}