/* =========================
   Service Page (サービス紹介)
========================= */
.service-nav {
  display: flex;
  justify-content: center;
  gap: 0;
  margin-bottom: 60px;
  border-bottom: 1px solid #e8dcc4;
  flex-wrap: wrap;
}
.service-nav-btn {
  padding: 16px 32px;
  background: none;
  border: none;
  border-bottom: 3px solid transparent;
  color: #8b6a4f;
  font-size: 15px;
  cursor: pointer;
  font-family: inherit;
  font-weight: 500;
  transition: all .2s;
}
.service-nav-btn.active {
  color: #5a7a4a;
  border-bottom-color: #5a7a4a;
}
.service-nav-btn:hover { color: #5a7a4a; }

.service-block { display: none; }
.service-block.active { display: block; animation: fadeIn .3s; }

.service-hero {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 50px;
  align-items: center;
  margin-bottom: 60px;
}
.service-hero .img-placeholder { min-height: 320px; }
.hero-split {
  display: flex;
  height: 320px; /* explicit height so the split images can resolve height:100% */
}
.hero-split img {
  position: static;
  width: 50%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.service-hero h2 {
  font-size: 28px;
  margin-bottom: 8px;
}
.service-hero .en {
  font-size: 11px;
  color: #7a9968;
  letter-spacing: 0.25em;
  margin-bottom: 24px;
  display: block;
}
.service-hero .lead {
  font-size: 17px;
  color: #5a3e2b;
  font-family: "Yu Mincho", serif;
  margin-bottom: 16px;
  line-height: 1.7;
}

.room-photo-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-bottom: 40px;
}
.room-photo-grid-4 { grid-template-columns: repeat(4, 1fr); }
.room-photo-grid-4 .img-placeholder { min-height: 160px; }

.feature-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  margin-bottom: 60px;
}
.feature-card {
  background: #fff;
  padding: 28px 22px;
  border-radius: 6px;
  border-top: 3px solid #7a9968;
}
.feature-card h4 {
  font-size: 17px;
  margin-bottom: 10px;
  color: #5a3e2b;
}
.feature-card p { font-size: 14px; color: #6a5a48; }

/* 利用料金 */
.price-table {
  width: 100%;
  border-collapse: collapse;
  background: #fff;
  font-size: 13px;
  margin-bottom: 20px;
}
.price-table th, .price-table td {
  padding: 10px 8px;
  border: 1px solid #e8dcc4;
  text-align: center;
}
.price-table thead th {
  background: #5a7a4a;
  color: #fff;
  font-family: "Yu Mincho", serif;
  font-weight: 500;
}
.price-table tbody th {
  background: #f5ede0;
  color: #5a3e2b;
  font-family: "Yu Mincho", serif;
  text-align: left;
  font-weight: 500;
  white-space: nowrap;
}
.price-table .sub-row th {
  padding-left: 24px;
  font-size: 12px;
}
.price-table-wrap {
  overflow-x: auto;
  margin-bottom: 30px;
  -webkit-overflow-scrolling: touch;
}
.price-note {
  background: #faf7f2;
  padding: 20px 24px;
  border-left: 3px solid #c4d4b5;
  margin-top: 20px;
  border-radius: 4px;
}
.price-note p {
  font-size: 13px;
  color: #6a5a48;
  margin-bottom: 6px;
  line-height: 1.7;
}
.price-note p:last-child { margin-bottom: 0; }

/* ご利用までの流れ */
.flow-list {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 8px;
  margin-bottom: 20px;
}
.flow-list-6 { grid-template-columns: repeat(6, 1fr); }
.flow-step {
  background: #fff;
  padding: 16px 8px;
  border-radius: 4px;
  text-align: center;
  font-size: 12px;
  color: #5a3e2b;
  border-top: 3px solid #7a9968;
  position: relative;
}
.flow-step .num {
  display: block;
  font-family: "Yu Mincho", serif;
  color: #7a9968;
  font-size: 18px;
  margin-bottom: 4px;
}
.flow-label {
  font-size: 13px;
  color: #5a3e2b;
  font-weight: 600;
  margin-bottom: 12px;
}

/* 一日の流れ */
.schedule-list {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-bottom: 20px;
}
.schedule-item {
  background: #fff;
  padding: 18px 16px;
  border-radius: 4px;
  border-left: 3px solid #7a9968;
}
.schedule-time {
  font-family: "Yu Mincho", serif;
  color: #5a7a4a;
  font-size: 17px;
  font-weight: 600;
  margin-bottom: 4px;
}
.schedule-label {
  color: #5a3e2b;
  font-size: 14px;
}

/* フロア別ユニット名 */
.unit-table {
  width: 100%;
  border-collapse: collapse;
  margin: 20px 0 30px;
  font-size: 14px;
}
.unit-table th, .unit-table td {
  padding: 12px 16px;
  border: 1px solid #e8dcc4;
  text-align: center;
}
.unit-table thead th {
  background: #8b6a4f;
  color: #fff;
  font-family: "Yu Mincho", serif;
  font-weight: 500;
}
.unit-table tbody th {
  background: #f5ede0;
  color: #5a3e2b;
  font-family: "Yu Mincho", serif;
  font-weight: 500;
}

/* 7つのポイント */
.point-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-bottom: 30px;
}
.point-card {
  background: #fff;
  padding: 24px 20px;
  border-radius: 6px;
  border-top: 3px solid #7a9968;
  position: relative;
}
.point-num {
  display: inline-block;
  font-family: "Yu Mincho", serif;
  color: #7a9968;
  font-size: 13px;
  letter-spacing: 0.15em;
  margin-bottom: 8px;
}
.point-card h4 {
  font-size: 17px;
  margin-bottom: 10px;
  color: #5a3e2b;
}
.point-card p {
  font-size: 13px;
  color: #6a5a48;
  line-height: 1.7;
}
.point-list-6 { grid-template-columns: repeat(3, 1fr); }

/* ご家族のこんなお悩み / 在宅介護を長く…: テキスト + イラスト */
.worry-block {
  display: grid;
  grid-template-columns: 1fr 220px;
  gap: 30px;
  align-items: center;
  margin-bottom: 24px;
}
.worry-block p { margin-bottom: 0; }
.worry-block .target-list { margin-bottom: 0; }
.worry-illustration {
  aspect-ratio: 1 / 1;
  min-height: 0;
  background: #fff;
}
.worry-illustration::before { display: none; }

/* デイサービス一日の流れ: 15時の項目は内容が長いため2列分確保 */
.schedule-list-day .schedule-item:nth-child(6) { grid-column: span 2; }

/* デイサービス末尾の写真3枚（お食事・お買い物・ウォーターベッド） */
.day-photo-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-top: 30px;
}
.day-photo-grid .img-placeholder { min-height: 180px; }

.service-contact-box {
  margin-top: 40px;
  padding: 28px;
  border-radius: 6px;
  background: #fff;
  border: 1px solid #e8dcc4;
  text-align: center;
}
.service-contact-box p {
  margin-bottom: 14px;
  color: #5a3e2b;
  font-family: "Yu Mincho", serif;
  font-size: 17px;
}
.service-contact-btn { font-size: 18px; letter-spacing: 0.04em; }

/* こんな方に */
.target-list {
  background: #fff;
  padding: 28px 36px;
  border-radius: 6px;
  margin-bottom: 40px;
  border-left: 4px solid #c4d4b5;
}
.target-list h4 {
  font-size: 17px;
  margin-bottom: 14px;
  color: #5a3e2b;
}
.target-list ul { padding-left: 8px; }
.target-list li {
  padding: 6px 0 6px 24px;
  list-style: none;
  position: relative;
  font-size: 14px;
}
.target-list li::before {
  content: "";
  position: absolute;
  left: 6px; top: 16px;
  width: 8px; height: 8px;
  background: #7a9968;
  border-radius: 50%;
}

/* 通常の送迎範囲 */
.area-box {
  background: #fff;
  padding: 28px 32px;
  border-radius: 6px;
  margin-bottom: 30px;
}
.area-box h4 {
  font-size: 17px;
  margin-bottom: 14px;
  color: #5a3e2b;
}
.area-box ul { padding-left: 8px; }
.area-box li {
  padding: 6px 0 6px 24px;
  list-style: none;
  position: relative;
  font-size: 14px;
}
.area-box li::before {
  content: "";
  position: absolute;
  left: 6px; top: 16px;
  width: 6px; height: 6px;
  background: #8b6a4f;
  border-radius: 50%;
}

@media (max-width: 1024px) and (min-width: 769px) {
  .flow-list, .flow-list-6 { grid-template-columns: repeat(4, 1fr); }
  .point-list, .point-list-6 { grid-template-columns: repeat(2, 1fr); }
  .feature-grid { grid-template-columns: repeat(2, 1fr); }
  .room-photo-grid-4 { grid-template-columns: repeat(2, 1fr); }
  .schedule-list-day .schedule-item:nth-child(6) { grid-column: auto; }
}

@media (max-width: 768px) {
  .service-hero { grid-template-columns: 1fr; gap: 30px; }
  .service-nav-btn { padding: 12px 18px; font-size: 13px; }
  .feature-grid { grid-template-columns: 1fr; }
  .room-photo-grid { grid-template-columns: 1fr; }
  .room-photo-grid-4 { grid-template-columns: repeat(2, 1fr); }
  .day-photo-grid { grid-template-columns: 1fr; }
  .flow-list, .flow-list-6 { grid-template-columns: repeat(2, 1fr); }
  .schedule-list { grid-template-columns: repeat(2, 1fr); }
  .schedule-list-day .schedule-item:nth-child(6) { grid-column: auto; }
  .point-list, .point-list-6 { grid-template-columns: 1fr; }
  .price-table { font-size: 11px; }
  .price-table th, .price-table td { padding: 6px 4px; }
  .unit-table { font-size: 12px; }
  .unit-table th, .unit-table td { padding: 8px 6px; }
  .target-list, .area-box { padding: 22px 20px; }
  .worry-block { grid-template-columns: 1fr; }
  .worry-illustration { order: -1; width: 100%; max-width: 160px; justify-self: center; }
}

@media (max-width: 420px) {
  .schedule-list { grid-template-columns: 1fr 1fr; }
  .flow-list, .flow-list-6 { grid-template-columns: 1fr 1fr; }
}