/**
 * subpage.css (Latest Integrated Version)
 * 下層ページ（会社概要・サービス案内）共通のスタイル定義。
 */

/* --- スクロール位置の調整（アンカーリンク用） --- */
.subpage-content section[id] {
  scroll-margin-top: 100px; /* 固定ヘッダーに隠れないように調整 */
}

/* ==========================================
 * 1. 共通基本スタイル (PC/共通)
 * ========================================== */
.subpage-content h1 {
  font-size: 53px !important;
  line-height: 1.2 !important;
  margin-bottom: 48px !important;
}

/* 中見出し：左にブランドカラーの太線 */
.subpage-content h2 {
  font-size: 42px !important;
  line-height: 1.2 !important;
  margin-bottom: 40px !important;
  border-left: 8px solid #ec4899 !important;
  padding-left: 20px !important;
  border-bottom: none !important;
}

/* 小見出し：グレーのサイドライン */
.subpage-content h3 {
  font-size: 22px !important;
  line-height: 1.6 !important;
  color: #1a1a1a !important;
  margin-bottom: 30px !important;
  font-weight: 700 !important;
  border-left: 3px solid #d1d5db !important;
  padding-left: 15px !important;
}

/* リストスタイル（下線区切り・事業の柱） */
.subpage-content .pillar-list {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 0 40px 0 !important;
  border-top: 1px solid #eeeeee !important;
}

.subpage-content .pillar-list li {
  position: relative !important;
  padding: 15px 10px !important;
  border-bottom: 1px solid #eeeeee !important;
  font-weight: 700 !important;
  font-size: 18px !important;
  line-height: 1.5 !important;
  color: #111827 !important;
}

/* 「■主なサービス内容」などのラベルの下に余白を追加 */
.subpage-content .pillar-list li .tw\:text-primary {
  display: inline-block !important;
  margin-bottom: 12px !important;
}

/* 本文テキスト */
.subpage-content p {
  font-size: 16px !important;
  line-height: 2.0 !important;
  color: #4b5563 !important;
}

/* 標準リンク */
.subpage-content a {
  color: #ec4899 !important;
  text-decoration: underline !important;
  font-weight: 700 !important;
  transition: opacity 0.2s !important;
}

.subpage-content a:hover {
  opacity: 0.7 !important;
}

/* 引用元リンクスタイル */
.subpage-content .citation-link {
  color: #9ca3af !important;
  text-decoration: none !important;
  font-weight: 400 !important;
  font-size: 11px !important;
  display: inline-block !important;
}

/* 注釈・補足用のボックススタイル（シンプル版） */
.subpage-content .annotation-box {
  background-color: #f9fafb !important;
  border-radius: 12px !important;
  padding: 24px !important;
  border: 1px solid #f3f4f6 !important;
  margin-top: 32px !important;
  position: relative !important;
}

.subpage-content .annotation-box p {
  font-size: 14px !important;
  line-height: 1.8 !important;
  color: #6b7280 !important;
  margin: 0 !important;
}

/* ==========================================
 * 2. 料金体系テーブル (PC)
 * ========================================== */
.price-table-wrapper {
  margin-top: 30px;
  background: white;
  border-radius: 15px;
  overflow: hidden;
  border: 1px solid #e5e7eb;
}

.price-table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}

.price-table th, 
.price-table td {
  padding: 20px 25px;
  border-bottom: 1px solid #f3f4f6;
  text-align: left;
}

.price-table tr:last-child th, 
.price-table tr:last-child td {
  border-bottom: none;
}

.price-table .cell-label {
  background-color: #fafafa;
  width: 30%;
  font-weight: 700;
  color: #374151;
  font-size: 15px;
  border-right: 1px solid #f3f4f6;
}

.price-table .cell-price {
  width: 30%;
  border-right: 1px solid #f3f4f6;
}

/* 割増ルール用セル */
.price-table .cell-rule {
  background-color: #fffafa; /* 非常に薄いピンク */
  vertical-align: middle;
  text-align: center;
  width: 40%;
}

.price-table .price-val {
  color: #ec4899;
  font-weight: 800;
  font-size: 20px;
}

.price-table .unit-label {
  display: block;
  font-size: 12px;
  color: #9ca3af;
  margin-bottom: 2px;
}

.rule-content .rule-title {
  display: block;
  font-weight: 700;
  color: #ec4899;
  font-size: 14px;
  line-height: 1.4;
  margin-bottom: 10px;
}

.rule-content .time-range {
  display: block;
  font-size: 13px;
  color: #4b5563;
  line-height: 1.6;
}

/* 「■ 料金体系」見出しの上の余白 */
.subpage-content .tw\:text-wrapper h4:not(.annotation-box h4) {
  margin-top: 48px !important;
}

/* ==========================================
 * 3. 介護保険利用方法 (ステップフロー)
 * ========================================== */
.step-flow-container {
  position: relative;
  padding-left: 10px;
}

/* ステップをつなぐ縦線 (PC用) */
@media (min-width: 769px) {
  .step-flow-container::before {
    content: '';
    position: absolute;
    left: 45px;
    top: 0;
    bottom: 0;
    width: 2px;
    background: #fce7f3;
    z-index: 0;
  }
}

.step-item {
  position: relative;
  display: flex;
  gap: 40px;
  margin-bottom: 60px;
  z-index: 1;
}

.step-item:last-child {
  margin-bottom: 0;
}

.step-number {
  flex-shrink: 0;
  width: 50px;
  height: 50px;
  background: #ec4899;
  color: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 20px;
  box-shadow: 0 4px 10px rgba(236, 72, 153, 0.3);
}

.step-content {
  background: #fdf2f8;
  padding: 30px;
  border-radius: 20px;
  flex-grow: 1;
}

.step-title {
  font-size: 20px !important;
  font-weight: 800 !important;
  color: #111827 !important;
  margin-bottom: 15px !important;
  border-left: none !important;
  padding-left: 0 !important;
}

/* ==========================================
 * 4. PCレイアウト調整 (769px以上)
 * ========================================== */
@media (min-width: 769px) {
  /* コンテンツ幅とカラム間の余白設定 */
  .subpage-content .container > div {
    gap: 80px !important;
  }

  /* 2カラムの標準幅設定 */
  .subpage-content .tw\:w-1\/2 {
    width: calc(50% - 40px) !important;
    flex-shrink: 0 !important;
  }

  /* 文章を左、画像を右に配置するセクション設定 */
  #about-business .tw\:max-w-\[1100px\],
  #visiting-care .tw\:max-w-\[1100px\],
  #disability-support .tw\:max-w-\[1100px\] {
    flex-direction: row-reverse !important;
  }

  /* 画像を左、文章を右に配置するセクション設定 */
  #about-philosophy .tw\:max-w-\[1100px\],
  #home-care-support .tw\:max-w-\[1100px\],
  #private-service .tw\:max-w-\[1100px\] {
    flex-direction: row !important;
  }

  /* サービス紹介セクション (01, 02, 03, 04) の画像サイズを一括で小さく調整 */
  #visiting-care .tw\:w-1\/2:first-child,
  #home-care-support .tw\:w-1\/2:first-child,
  #disability-support .tw\:w-1\/2:first-child,
  #private-service .tw\:w-1\/2:first-child {
    width: calc(30% - 40px) !important; /* 画像側を30%に縮小 */
  }
  #visiting-care .tw\:w-1\/2:last-child,
  #home-care-support .tw\:w-1\/2:last-child,
  #disability-support .tw\:w-1\/2:last-child,
  #private-service .tw\:w-1\/2:last-child {
    width: calc(70% - 40px) !important; /* テキスト側を70%に拡大 */
  }

  /* 安全衛生方針（画像なし）の調整 */
  #about-safety {
    margin-top: 60px !important; /* PCでのセクション間の余白 */
  }
  #about-safety .tw\:max-w-\[1100px\],
  #about-safety .tw\:w-1\/2 {
    flex-direction: row !important;
    justify-content: flex-start !important;
    width: 100% !important;
    max-width: 800px !important;
  }
}

/* ==========================================
 * 5. スマホサイズ (768px以下)
 * ========================================== */
@media (max-width: 768px) {
  .subpage-content h1 { 
    font-size: 32px !important; 
    text-align: center !important;
  }

  /* 見出しを中央揃え、左線を解除 */
  .subpage-content h2 { 
    font-size: 28px !important; 
    text-align: center !important;
    border-left: none !important;
    padding-left: 0 !important;
    margin-bottom: 30px !important;
  }

  .subpage-content h3 { 
    font-size: 18px !important; 
    text-align: center !important;
    border: none !important;
    padding: 0 !important;
  }

  /* 表示順序の制御 (Flexbox order) */
  .subpage-content .container > div {
    display: flex !important;
    flex-direction: column !important;
    gap: 0 !important;
  }

  /* contentsプロパティでラッパーを無視し、直接 order 制御 */
  .subpage-content .container > div > .tw\:w-1\/2 {
    display: contents !important;
  }

  .subpage-content .tw\:mb-\[40px\] { order: 1 !important; } /* H2 */
  .subpage-content .tw\:pillar-wrapper { order: 2 !important; width: 100% !important; } /* リスト */
  .subpage-content .tw\:relative { order: 3 !important; margin: 20px 0 30px !important; } /* 画像 */
  .subpage-content .tw\:text-wrapper { order: 4 !important; } /* 本文 */

  /* 特定セクションのリスト順序一括指定 */
  #visiting-care .tw\:pillar-wrapper,
  #disability-support .tw\:pillar-wrapper,
  #private-service .tw\:pillar-wrapper,
  #about-business .tw\:pillar-wrapper { 
    order: 2 !important; 
  }

  /* --- 料金表のスマホ誤認防止ロジック --- */
  .mobile-grid-table {
    display: flex !important;
    flex-direction: column !important;
  }

  .price-table .item-row {
    display: contents !important;
  }

  .price-table th, 
  .price-table td {
    width: 100% !important;
    display: block !important;
    border: none !important;
    padding: 15px 20px !important;
    text-align: center !important;
  }

  /* 各サービス項目の順序指定 */
  /* 生活に関するサービス */
  .row-life .cell-label { order: 1 !important; background-color: #f3f4f6 !important; border-radius: 10px 10px 0 0 !important; }
  .row-life .cell-price { order: 2 !important; border-bottom: 1px solid #eee !important; margin-bottom: 15px !important; }
  
  /* 身体に関するサービス */
  .row-body .cell-label { order: 3 !important; background-color: #f3f4f6 !important; border-radius: 10px 10px 0 0 !important; }
  .row-body .cell-price { order: 4 !important; border-bottom: 1px solid #eee !important; margin-bottom: 15px !important; }

  /* 「早朝・夜間」の共通ルールを身体に関するサービスの下に配置 (Order 5) */
  .cell-rule {
    order: 5 !important;
    background-color: #fffafa !important;
    border: 2px solid #ffe4e6 !important;
    border-radius: 12px !important;
    margin-bottom: 25px !important;
  }

  /* CSSで「【全サービス共通適用】」という補足を追加 */
  .cell-rule .rule-title::before {
    content: "【全サービス共通適用】" !important;
    display: block !important;
    font-size: 11px !important;
    font-weight: normal !important;
    color: #9ca3af !important;
    margin-bottom: 4px !important;
  }

  /* 宿泊・その他 */
  .row-other .cell-label { order: 10 !important; background-color: #f9fafb !important; }
  .row-other .cell-full { order: 11 !important; background-color: #f9fafb !important; padding-bottom: 20px !important; }

  /* --- ステップフローのスマホ調整 --- */
  .step-item {
    flex-direction: column;
    align-items: center;
    gap: 15px;
  }
  .step-content {
    width: 100%;
    padding: 20px;
    text-align: center;
  }
  .step-title {
    text-align: center !important;
  }

  /* 引用元リンクの配置調整 */
  .subpage-content .tw\:text-right.tw\:max-md\:text-center {
    order: 3 !important;
    margin-top: -30px !important;
    margin-bottom: 20px !important;
  }


  #about-safety {
    margin-top: 40px !important;
  }
}



.circle-crop {
  aspect-ratio: 1 / 1;      /* 正方形にする */
  border-radius: 50%;       /* 円形 */
  overflow: hidden;         /* はみ出た部分を切る */
}

.circle-crop img {
  width: 100%;
  height: 100%;
  object-fit: cover;        /* 枠いっぱいに */
  object-position: center; /* 中央基準でトリミング */
}