/* =========================================================
   cardiacrehabilitation.css
   - 特設：心臓リハビリテーション 専用スタイル
   - Last Updated: 2025.12 (Final Version)
========================================================= */

/* --- Utilities --- */
.bg-gray {
  background-color: var(--color-gray-light);
  padding: 6rem 0;
}
.mt-2 {
  margin-top: 0.5rem;
}
.mt-4 {
  margin-top: 2rem;
}
.mb-2 {
  margin-bottom: 0.5rem;
}

.text-link {
  color: var(--color-primary);
  text-decoration: underline;
  font-weight: 700;
}
.text-sm {
  font-size: 0.85rem;
  color: #666;
}
.text-center {
  text-align: center;
}

/* ---------------------------------------------------------
   4. Cardiac Points (3 Columns)
   - 「なぜ必要か」の3つのポイント
--------------------------------------------------------- */
.cardiac-points-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
  margin-top: 50px;
}

.point-card {
  background: #fff;
  padding: 40px 30px;
  border-radius: 8px;
  position: relative;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.03);
  border-top: 4px solid var(--color-primary);
  height: 100%;
}

.point-num {
  font-family: 'Helvetica Neue', sans-serif;
  font-size: 3rem;
  font-weight: 700;
  color: #e0f2ff; /* 薄い青 */
  position: absolute;
  top: 10px;
  right: 20px;
  line-height: 1;
}

.point-card h3 {
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--color-primary-dark);
  margin-bottom: 20px;
  position: relative;
  line-height: 1.4;
}

.point-card p {
  font-size: 0.95rem;
  line-height: 1.8;
  color: var(--text-main);
  position: relative;
  text-align: left;
}

/* ---------------------------------------------------------
   5. Target & Effects
   - 対象者と効果の2カラムレイアウト
--------------------------------------------------------- */
.target-effect-wrapper {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  margin-top: 40px;
}

.target-box,
.effect-box {
  background: #fff;
  border: 1px solid var(--color-gray-border);
  border-radius: 8px;
  padding: 40px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.02);
}

.box-title {
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--color-primary-dark);
  margin-bottom: 25px;
  display: flex;
  align-items: center;
  border-bottom: 2px solid #eee;
  padding-bottom: 15px;
}
.box-title i {
  color: var(--color-primary);
  margin-right: 10px;
  font-style: normal;
}

/* リストスタイル */
.target-list,
.effect-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.target-list li,
.effect-list li {
  position: relative;
  padding-left: 1.5em;
  margin-bottom: 12px;
  font-size: 1rem;
  line-height: 1.6;
  color: var(--text-main);
}
.target-list li::before {
  content: '●';
  color: var(--color-primary);
  position: absolute;
  left: 0;
  top: 0;
  font-size: 0.8em;
}
.effect-list li::before {
  content: '✔';
  color: var(--color-secondary);
  position: absolute;
  left: 0;
  top: 0;
  font-weight: bold;
}

.target-lead {
  font-weight: 700;
  margin-bottom: 15px;
}
.small-note {
  font-size: 0.85rem;
  color: #888;
  line-height: 1.6;
}

/* ---------------------------------------------------------
   6. Programs (Zig-Zag Layout)
   - 当院の取り組み
--------------------------------------------------------- */
.program-list {
  display: flex;
  flex-direction: column;
  gap: 60px;
  margin-top: 50px;
}

.program-item {
  display: flex;
  align-items: stretch;
  background: #fff;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.05);
}

.program-item:nth-child(even) {
  flex-direction: row-reverse;
}

.program-img {
  flex: 1;
  min-height: 300px;
  position: relative;
}
.program-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  object-position: center 25%;
}

.program-text {
  flex: 1;
  padding: 40px 50px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.program-text h3 {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--color-primary-dark);
  margin-bottom: 20px;
  position: relative;
  padding-left: 20px;
}
.program-text h3::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 4px;
  height: 100%;
  background-color: var(--color-primary);
  border-radius: 2px;
}

.program-text p {
  font-size: 0.95rem;
  line-height: 1.8;
  color: var(--text-main);
  text-align: justify;
}

/* ---------------------------------------------------------
   7. CPX Feature (Large Card)
   - 検査機器の紹介
--------------------------------------------------------- */
.cpx-feature {
  background: #fff;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
  margin-top: 50px;
  border: 1px solid var(--color-gray-border);
}

.cpx-img {
  width: 100%;
  height: 400px;
  position: relative;
}
.cpx-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
}

.cpx-desc {
  padding: 50px;
}
.cpx-desc h3 {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--color-primary-dark);
  margin-bottom: 25px;
  text-align: center;
}
.cpx-desc p {
  font-size: 1rem;
  line-height: 2;
  color: var(--text-main);
  max-width: 800px;
  margin: 0 auto;
}

/* ---------------------------------------------------------
   8. Facilities (Grid Gallery)
   - 環境・設備
--------------------------------------------------------- */
.facility-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 25px;
  margin-top: 50px;
}

.facility-item {
  position: relative;
}
.facility-item img {
  width: 100%;
  height: 220px;
  object-fit: cover;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  display: block;
  transition: transform 0.3s;
}
.facility-item:hover img {
  transform: scale(1.02);
}
.facility-item p {
  font-size: 0.9rem;
  font-weight: 700;
  margin-top: 10px;
  color: var(--text-main);
  text-align: center;
}

/* ---------------------------------------------------------
   9. Outpatient Guide (Enhanced Version)
   - 外来案内（導入、特徴、チェックリスト、基本情報）
--------------------------------------------------------- */

/* A. 導入ボックス (画像+テキスト) */
.guide-intro-box {
  display: flex;
  align-items: center;
  gap: 40px;
  margin-bottom: 50px;
  background: #fff;
  padding: 40px;
  border-radius: 12px;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.03);
}
.guide-intro-img {
  flex: 1;
  min-width: 300px;
}
.guide-intro-img img {
  width: 100%;
  border-radius: 8px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
  display: block;
}
.guide-intro-text {
  flex: 1.5;
}
.intro-title {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--color-primary-dark);
  margin-bottom: 20px;
  line-height: 1.4;
}
.guide-intro-text p {
  font-size: 1rem;
  line-height: 1.8;
  color: var(--text-main);
  text-align: justify;
}

/* B. 特徴カード (3列) */
.guide-features-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 25px;
  margin-bottom: 50px;
}
.guide-feature-card {
  background: #fff;
  padding: 30px 20px;
  border-radius: 8px;
  text-align: center;
  border: 1px solid #eee;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.02);
  height: 100%;
}
.feature-icon {
  width: 60px;
  height: 60px;
  background: #eef6ff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 15px;
}
.feature-icon img {
  width: 30px;
  height: 30px;
}
.guide-feature-card h4 {
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--color-primary);
  margin-bottom: 15px;
  line-height: 1.4;
}
.guide-feature-card p {
  font-size: 0.9rem;
  line-height: 1.7;
  text-align: left;
}

/* C. 対象者チェックリスト (デザイン調整版) */
.guide-target-area {
  max-width: 800px;
  margin: 0 auto 50px;
}

.target-card {
  background: #fff;
  border: 2px solid var(--color-primary); /* 青い外枠 */
  border-radius: 12px;
  padding: 35px 40px 40px; /* タイトルを内包するための余白調整 */
  position: relative;
}

.target-head {
  /* 配置のリセット（枠内に戻す） */
  position: static;
  transform: none;
  background: transparent;
  width: 100%;
  display: block;
  white-space: normal;
  padding: 0;

  /* テキストスタイル */
  text-align: center;
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--color-primary-dark);
  margin-bottom: 25px;
  border-bottom: 1px solid #eee;
  padding-bottom: 15px;
}

.target-checklist {
  list-style: none;
  padding: 0;
  margin: 0;
}
.target-checklist li {
  position: relative;
  padding-left: 35px;
  margin-bottom: 12px;
  font-size: 1.05rem;
  line-height: 1.6;
  border-bottom: 1px dashed #eee;
  padding-bottom: 12px;
  color: var(--text-main);
}
.target-checklist li:last-child {
  border-bottom: none;
  padding-bottom: 0;
}
.target-checklist li::before {
  content: '✔';
  position: absolute;
  left: 5px;
  top: 0;
  color: var(--color-secondary);
  font-weight: bold;
  font-size: 1.3rem;
}

/* D. 実務情報（料金・場所・問い合わせ） */
.guide-wrapper {
  background: #fff;
  border-radius: 12px;
  padding: 50px;
  box-shadow: 0 5px 25px rgba(0, 0, 0, 0.03);
  border: 1px solid var(--color-gray-border);
  margin-top: 40px;
}

.guide-info-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 30px;
  margin-bottom: 40px;
}

.guide-info-box {
  background: #f9fbfd;
  padding: 30px;
  border-radius: 8px;
  border: 1px solid #eef2f6;
}
.guide-info-box h4 {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--color-primary);
  margin-bottom: 15px;
  border-bottom: 1px solid #ddd;
  padding-bottom: 10px;
}

/* お問い合わせ（電話） */
.contact-info {
  background-color: #fcfcfc;
  border: 2px solid #eef2f6;
  border-radius: 8px;
  padding: 30px;
  max-width: 600px;
  margin: 0 auto;
}
.contact-tel {
  font-family: 'Helvetica Neue', sans-serif;
  font-size: 2.2rem;
  font-weight: 700;
  color: var(--color-primary-dark);
  line-height: 1.2;
  margin-bottom: 5px;
}
.contact-hour {
  font-size: 0.9rem;
  color: #666;
}

/* ---------------------------------------------------------
   10. Movie (YouTube)
--------------------------------------------------------- */
.movie-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 40px;
  margin-top: 50px;
}

.movie-frame {
  position: relative;
  width: 100%;
  padding-top: 56.25%; /* 16:9 Aspect Ratio */
}
.movie-frame iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 8px;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

.movie-title {
  font-size: 1.1rem;
  font-weight: 700;
  text-align: center;
  margin-top: 15px;
  color: var(--color-primary-dark);
}

/* ---------------------------------------------------------
   Responsive
--------------------------------------------------------- */
@media (max-width: 900px) {
  /* ポイント、対象・効果、設備を1〜2列に調整 */
  .cardiac-points-grid,
  .target-effect-wrapper,
  .guide-features-grid,
  .facility-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 768px) {
  /* Programs (ZigZag解除・縦積み) */
  .program-list {
    gap: 40px;
  }
  .program-item,
  .program-item:nth-child(even) {
    flex-direction: column;
    height: auto;
  }

  .program-img {
    width: 100%;
    min-height: 240px;
    position: relative;
    flex: none;
  }
  .program-img img {
    position: relative;
    height: 240px;
  }

  .program-text {
    flex: none;
    width: 100%;
    padding: 40px 30px;
  }

  /* CPX Feature */
  .cpx-img {
    height: 250px;
  }
  .cpx-desc {
    padding: 30px 20px;
  }
  .cpx-desc h3 {
    font-size: 1.3rem;
    text-align: left;
  }

  /* Guide Section Mobile */
  .guide-intro-box {
    flex-direction: column;
    padding: 25px;
    gap: 25px;
  }
  .intro-title {
    font-size: 1.3rem;
    text-align: center;
  }
  .guide-features-grid {
    grid-template-columns: 1fr;
  }

  /* Target Card Mobile (Updated) */
  .target-card {
    padding: 30px 20px;
  }
  .target-head {
    font-size: 1.1rem;
    margin-bottom: 20px;
    padding-bottom: 15px;
  }
  .target-checklist li {
    font-size: 0.95rem;
  }

  .guide-wrapper {
    padding: 30px 20px;
  }
  .guide-info-grid {
    grid-template-columns: 1fr;
  }

  /* Facility & Movie */
  .facility-grid {
    grid-template-columns: 1fr;
  }
  .movie-grid {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  /* Contact Info */
  .contact-tel {
    font-size: 1.8rem;
  }
}