@charset "utf-8";

/* ==========================================================================
   共通設定・フォント・カラー
   ========================================================================== */
body {
  font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
  color: #333333;
  background-color: #ffffff;
  overflow-x: hidden;
  line-height: 1.6;
}

.site-main {
  display: block;
  width: 100%;
}

/* 繧ｹ繝槭・逕ｨ謾ｹ陦後さ繝ｳ繝医Ο繝ｼ繝ｫ */
.br-sp {
  display: none;
}
@media screen and (max-width: 1080px) {
  .br-pc {
    display: none;
  }
  .br-sp {
    display: inline-block;
  }
}

/* ==========================================================================
   ヘッダー（レスポンシブ制御含む）
   ========================================================================== */
.site-header {
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.02);
}

.header-logo-img {
  height: 60px;
  width: auto;
  max-width: 100%;
}

.header-nav-list .nav-item .nav-link {
  color: #333333 !important;
  font-weight: 500;
  padding: 0.5rem 1rem !important;
  transition: color 0.3s ease, background-color 0.3s ease;
  font-size: 0.95rem;
}

.header-nav-list .nav-item .nav-link:hover {
  color: #5c9e6c !important;
}

@media (max-width: 991.98px) {
  .header-logo-img {
    height: 48px;
  }
  
  .header-nav-list {
    padding-top: 1rem;
    padding-bottom: 0.5rem;
    text-align: center;
  }
  
  .header-nav-list .nav-item {
    border-bottom: 1px solid #f1f1f1;
  }
  
  .header-nav-list .nav-item:last-child {
    border-bottom: none;
  }
  
  .header-nav-list .nav-item .nav-link {
    padding: 0.75rem 0 !important;
  }
}

/* --- 追加：ヘッダー専用Pマークのスタイリング --- */
.header-pmark-img {
  height: 65px; /* ロゴの60pxに収まりつつ、存在感が出るジャストサイズ */
  width: auto;
  display: inline-block;
  vertical-align: middle;
}

@media (max-width: 991.98px) {
  .header-pmark-item {
    display: flex;
    justify-content: center;
    padding-bottom: 1rem; /* スマホのメニューを開いた時の最下部に余白を確保 */
  }
  .header-pmark-img {
    height: 45px; /* スマホ画面では少しだけ小ぶりに調整 */
  }
}

/* --- 追加：スマホ用Pマークのスタイリング --- */
.header-pmark-img-sp {
  height: 45px;
  width: auto;
  display: block;
}

/* ==========================================================================
   スマホでのロゴとハンバーガーボタンの横並び調整
   ========================================================================== */
@media (max-width: 991.98px) {
  /* ロゴとボタンを横並びにして縦中央に揃える */
  .header-container {
    display: flex !important;
    flex-direction: row !important;
    justify-content: space-between !important;
    align-items: center !important;
    flex-wrap: wrap !important; /* ★ココを nowrap から wrap に変更します */
  }

  /* ロゴ画像をスマホの画面幅に合わせて自動縮小させる */
  .navbar-brand {
    /* ★修正: Pマークのスペースを確保するため 70% から 65% に変更 */
    max-width: 65% !important; 
    margin-right: 10px !important;
  }
  .header-logo-img {
    width: 100% !important;
    height: auto !important;
    max-height: 50px !important; /* 必要以上に大きくならないよう上限を設定 */
    object-fit: contain !important;
  }

  /* ハンバーガーボタンのサイズや余白を微調整 */
  .navbar-toggler {
    padding: 0.25rem 0.5rem !important;
    font-size: 1rem !important;
    flex-shrink: 0 !important; /* ボタンが潰れるのを防ぐ */
  }
}
/* ハンバーガーボタンの枠線を明示的に表示する */
.navbar-toggler {
  border: 1px solid rgba(0, 0, 0, 0.2) !important;
}

/* ハンバーガーボタンの背景色・枠線・影を強制的にリセット */
.navbar-light .navbar-toggler,
.navbar-toggler {
  background-color: transparent !important;
  background: none !important;
  border: 1px solid rgba(0, 0, 0, 0.2) !important;
  box-shadow: none !important;
  outline: none !important;
}

/* ==========================================================================
   スマホ版：メニュー展開時の縦並び強制スタイル
   ========================================================================== */
@media (max-width: 991.98px) {
  /* メニュー全体が必ず100%の幅を取り、ボタンの下に落ちるようにする */
  #navbarNav {
    flex-basis: 100% !important;
    width: 100% !important;
    margin-top: 10px !important;
    background-color: #ffffff; /* 背景が透けないように白を指定 */
  }
  
  /* メニュー項目を強制的に縦1列にする */
  .header-nav-list {
    display: flex !important;
    flex-direction: column !important;
  }
  
  /* メニューの各行が画面幅いっぱいになるようにする */
  .header-nav-list .nav-item {
    width: 100% !important;
  }
}

/* ==========================================================================
   展開式問い合わせバナー・ボタン共通（画面右端に完全固定・等幅表示仕様）
   ========================================================================== */
.side-contact-wrapper {
  box-sizing: border-box;
}

.contact-trigger {
  width: 100%;
  height: 100%;
  border: none;
  background: none;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.trigger-content {
  display: flex;
  align-items: center;
  justify-content: center;
}

.contact-panel {
  box-sizing: border-box;
  z-index: 99;
}

/* --- PC版：画面の右端中央に完全固定し、2つのボタンを等幅で綺麗に並べる --- */
@media (min-width: 992px) {
  .side-contact-wrapper {
    position: fixed !important; /* absoluteからfixedに変更し、画面に完全固定 */
    right: 0 !important;
    top: 50% !important; /* 画面の上下中央に配置 */
    transform: translateY(-50%) !important;
    width: 65px !important;
    height: 660px !important; /* ★ボタン追加に伴い、580px から 660px に変更 */
    display: flex !important;
    flex-direction: column !important;
    z-index: 2500 !important; /* ヘッダーや他の全要素より必ず前面に出す */
  }

  .contact-box {
    height: 50% !important; /* 全体（580px）の半分（290px）ずつ均等に割り振り */
    display: flex !important;
    position: relative;
  }

  .medical-box .contact-trigger { background-color: #1a529b; color: #ffffff; }
  .medical-box .contact-trigger:hover { background-color: #123e78; }
  .general-box .contact-trigger { background-color: #ffffff; color: #092e67; border: 1px solid #1a529b; border-top: none; }
  .general-box .contact-trigger:hover { background-color: #f2f7ff; }

  .trigger-content {
    display: flex !important;
    flex-direction: row !important;
    writing-mode: vertical-rl;
    font-size: 0.88rem;
    font-weight: 700;
    height: 100%;
    width: 100%;
    justify-content: space-between;
    align-items: center;
    padding: 25px 0; /* 上下余白を枠内に綺麗に収める */
    white-space: nowrap;
  }
  
  .icon-main { writing-mode: horizontal-tb; font-size: 1.35rem; }
  .arrow-pc { writing-mode: horizontal-tb; font-size: 0.8rem; opacity: 0.7; }
  .arrow-sp { display: none !important; }

  .contact-panel {
    position: absolute;
    right: 65px;
    top: 0;
    bottom: 0;
    width: 370px;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 2.5rem 2.2rem;
    transition: all 0.3s ease;
    transform: translateX(15px);
    opacity: 0;
    pointer-events: none;
    box-shadow: -15px 0 35px rgba(9, 46, 103, 0.12);
    border-radius: 14px 0 0 14px;
  }

  .contact-box.is-open .contact-panel { transform: translateX(0); opacity: 1; pointer-events: auto; }
  .medical-box .contact-panel { background-color: #1a529b; color: #ffffff; }
  .general-box .contact-panel { background-color: #ffffff; color: #333333; border: 1px solid #1a529b; border-right: none; }
}

/* --- スマホ版：画面下部に固定 --- */
@media (max-width: 991.98px) {
  body { padding-bottom: 60px !important; }
  .side-contact-wrapper { position: fixed; bottom: 0; left: 0; right: 0; height: 60px; display: flex; z-index: 1050; box-shadow: 0 -3px 15px rgba(0, 0, 0, 0.1); }
  .contact-box { flex: 1; display: flex; }
  .medical-box .contact-trigger { background-color: #1a529b; color: #ffffff; }
  .general-box .contact-trigger { background-color: #ffffff; color: #092e67; border-top: 1px solid #1a529b; }
  .trigger-content { flex-direction: row; align-items: center; font-size: 0.8rem; font-weight: 700; gap: 6px; }
  .icon-main { font-size: 1.1rem; }
  .arrow-sp { font-size: 0.75rem; opacity: 0.6; }
  .arrow-pc { display: none !important; }

  .contact-panel {
    position: fixed;
    bottom: 60px;
    left: 0;
    right: 0;
    padding: 2rem 1.5rem;
    border-top-left-radius: 16px;
    border-top-right-radius: 16px;
    box-shadow: 0 -8px 25px rgba(0, 0, 0, 0.15);
    max-height: 75vh;
    overflow-y: auto;
    transform: translateY(150%);
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
  }

  .contact-box.is-open .contact-panel { transform: translateY(0); opacity: 1; visibility: visible; }
  .medical-box .contact-panel { background-color: #1a529b; color: #ffffff; }
  .general-box .contact-panel { background-color: #ffffff; color: #333333; border-top: 3px solid #1a529b; }
}

.panel-inner { display: flex; flex-direction: column; gap: 1.2rem; text-align: left; }
.panel-tag { font-size: 0.78rem; font-weight: 700; display: flex; align-items: center; gap: 6px; }
.medical-box .panel-tag { color: #d0e3ff; }
.general-box .panel-tag { color: #1a529b; }
.panel-title { font-size: 1.2rem; font-weight: 800; margin: 0; }
.panel-lead { font-size: 0.82rem; margin: 0; color: #666666; }
.panel-tel-box { background-color: #f0f7ff; border-radius: 8px; padding: 1rem; display: flex; flex-direction: column; gap: 4px; border: 1px solid #e2effe; }
.tel-link { color: #033fcb; font-size: 1.4rem; font-weight: 800; text-decoration: none; display: flex; align-items: center; gap: 8px; }
.tel-time { font-size: 0.75rem; color: #666666; }
.panel-btn { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 0.8rem 1rem; border-radius: 6px; font-size: 0.92rem; font-weight: 700; text-decoration: none; }
.btn-white { background-color: #ffffff; color: #1a529b; }
.btn-blue { background-color: #0c469b; color: #ffffff; }



/* ==========================================================================
   フッター・その他の装飾
   ========================================================================== */
.site-footer { font-size: 0.85rem; }
.footer-logo-img { height: 50px; width: auto; max-width: 100%; }
.address-text { font-size: 0.85rem; letter-spacing: 0.03em; }
.contact-details-wrap { display: flex; flex-wrap: wrap; gap: 0.25rem 0.5rem; font-size: 0.85rem; }
.contact-item { white-space: nowrap; }
.tel-item { font-weight: bold; font-size: 0.85rem; }
.footer-nav-list { margin: 0; padding: 0; }
.footer-nav-list .list-inline-item a { color: #333333; text-decoration: none; font-weight: 500; padding: 0.25rem 0.5rem; }
.footer-nav-list .list-inline-item a:hover { color: #5c9e6c; }
.delimiter-pipe { color: #cccccc; padding: 0 0.25rem; }
.pmark-img { height: 60px; width: auto; }
.pmark-links-list li { margin-bottom: 0.25rem; }
.pmark-links-list li a { color: #333333; text-decoration: none; font-size: 0.8rem; }
.pmark-links-list li a:hover { color: #5c9e6c; text-decoration: underline; }

@media (max-width: 991.98px) {
  .footer-right-col { margin-top: 1.5rem; }
  .footer-nav-list, .delimiter-pipe { display: none !important; }
  .footer-pmark-wrap { margin-top: 0.5rem; }
}


/* フッターの連絡先エリア全体を縦中央揃えにする（PC・タブレット用） */
.contact-details-wrap {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center; /* 縦方向を中央で揃える */
  gap: 0.5rem 1rem; /* 要素間の「上下の間隔」と「左右の間隔」 */
}

/* 電話番号のスタイル */
.footer-info .tel-item {
  font-size: 1.45em !important; /* 約1.5倍 */
  font-weight: bold;
  color: #333;
  line-height: 1; /* 余計な上下の余白をリセット */
}

/* 区切り線の位置微調整 */
.contact-separator {
  line-height: 1;
}

/* ==========================================================================
   【追加】スマホのときだけ電話番号の後ろで改行（縦並び）にする
   ========================================================================== */
@media (max-width: 767.98px) {
  .contact-details-wrap {
    display: flex;
    flex-direction: column;  /* 縦並び（改行）にする */
    align-items: flex-start;  /* 左揃えにする（中央揃えが良い場合は center に変更） */
    gap: 0.6rem;             /* 電話番号と営業時間などの上下の隙間 */
  }
}

/* ==========================================================================
   フッター問い合わせ / マウスオーバー設定
   ========================================================================== */
.partner-card-wrapper:hover .p-4 {
  background-color: #123e78 !important;
  transform: translateY(-3px);
  box-shadow: 0 8px 25px rgba(9, 46, 103, 0.15) !important;
}

.bottom-contact-section a:hover {
  opacity: 0.82;
}

@media (max-width: 991.98px) {
  .partner-card-wrapper, 
  .bottom-contact-section .col-lg-4 > div {
    max-width: 420px;
    margin: 0 auto;
  }
}


/* ==========================================================================
   ファーストビュー（メインビジュアル）文字1行・青文字拡大・画像下げ版
   ========================================================================== */
.fv-section {
  padding: 0;
  background-color: #ffffff;
}

/* --- タグ・テキストの装飾 --- */
.fv-tag {
  background-color: #e2effe;
  color: #1a529b;
  padding: 0.5rem 1.2rem;
  border-radius: 50px;
  font-size: 0.88rem;
  display: inline-block;
  letter-spacing: 0.03em;
}

.fv-main-title {
  font-size: calc(1.75rem - 4px);
  line-height: 1.5;
  color: #333333;
  font-weight: bold;
}

/* 【修正】スマホ版の青文字サイズを3ポイント（約3px）拡大 */
.fv-main-title .text-highlight {
  color: #1a529b;
  font-size: calc(1.75rem + 3px); 
  display: inline-block;
}

.fv-lead-text {
  font-size: 1.15rem;
  line-height: 1.8;
}

/* --- 私たちの支援内容画像（共通設定） --- */
.fv-support-wrap {
  position: relative;
  z-index: 10;
  width: 100%;
}

.fv-support-img {
  width: 92%; /* 緑の線の範囲に維持 */
  height: auto;
  display: block;
  margin: 0 auto;
}

/* --- PC版（992px以上）のレイアウト・重なり制御 --- */
@media (min-width: 992px) {
  .fv-section {
    padding-top: 0;
    padding-bottom: 2rem;
  }
  
  .fv-section .row {
    align-items: flex-start !important;
  }

  /* テキストの位置をロゴと画像の中央に高く保ちつつ、下部の安全マージンを確保 */
  .fv-text-inner {
    padding-top: 2.5rem;
    padding-bottom: 7rem; 
  }
  
  .fv-main-title {
    font-size: calc(2.6rem - 4px); 
    white-space: nowrap; /* 【追加】PC版で絶対に「おひとりさまを」が自動改行されないよう強制します */
  }
  
  /* 【修正】PC版の青文字サイズを3ポイント（約3px）拡大 */
  .fv-main-title .text-highlight {
    font-size: calc(2.6rem + 3px); 
  }

  .fv-lead-text {
    font-size: 1.25rem;
  }

  .fv-image-wrap {
    position: relative;
    width: 100%;
    display: block;
  }

  .fv-image-wrap::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 15%;
    height: 100%;
    background: linear-gradient(to right, #ffffff 0%, rgba(255, 255, 255, 0) 100%);
    z-index: 2;
    pointer-events: none;
  }
  
  /* 【大修正】
     横幅が6:6に狭まった分、画像が上に縮まないよう「min-height」と「object-fit: cover」を指定.
     これにより、右の人物画像は赤枠の通り大きく縦に長い状態（高さ490px）を強制キープします.
  */
  .fv-img {
    width: 100%;
    min-height: 490px;
    object-fit: cover;
    display: block;
  }

  /* 【大修正】
     上の画像を大きく保ったまま、重ね合わせのマイナスマージンを「-110px」に緩めました.
     これで、下の画像が紫の矢印（緑の線）の位置までカチッと下がり、美しい重なり具合になります.
  */
  .fv-support-wrap {
    margin-top: -80px; 
  }
}

/* --- スマホ版（991.98px以下）の個別制御 --- */
@media (max-width: 991.98px) {
  .fv-text-inner {
    text-align: center;
    padding-top: 0;
    padding-bottom: 0;
  }

  .fv-text-col {
    padding: 2.5rem 1.2rem;
  }

  .fv-img {
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    object-position: center 15%;
    display: block;
  }
  
  .fv-image-wrap::before {
    display: none !important;
  }

  .fv-support-wrap {
    padding: 0 1rem 3.5rem 1rem;
  }
}

/* ==========================================================================
   居住支援法人セクション（全面リンク化・ホバーエフェクト最適化版）
   ========================================================================== */
.kyoju-section {
  background-color: #eaf3fa;
  transition: background-color 0.3s ease; /* 背景変化の速度を滑らかに */
}

/* ▼▼▼ 【追加】全面リンク用のプロ仕様制御スタイル ▼▼▼ */
.kyoju-section-link {
  display: block;
  width: 100%;
  height: 100%;
  /* リンク化によって文字が意図しない色（標準の青など）に変わったり下線が出るのを完璧にガードします */
  color: inherit !important; 
}

/* マウスホバー時に全体がリンクカードだと直感的に伝わるよう、背景をわずかに白く輝かせます */
.kyoju-section-link:hover .kyoju-section {
  background-color: #f1f7fc;
}

/* マウスホバー時に右側の画像を滑らかに少しだけ明るく（透明度を変化）させます */
.kyoju-section-link:hover .kyoju-img {
  opacity: 0.85;
}
/* ▲▲▲ 【追加】ここまで ▲▲▲ */

/* --- テキストコラムのパディング制御 --- */
.kyoju-text-col {
  padding: 3.5rem 1.5rem;
  text-align: center; 
}

@media (min-width: 992px) {
  .kyoju-text-col {
    padding: 5rem 3.5rem;
    text-align: left; 
  }
}

.kyoju-text-inner {
  max-width: 520px;
  width: 100%;
  margin: 0 auto; 
}

@media (min-width: 992px) {
  .kyoju-text-inner {
    margin: 0; 
  }
}

/* --- タイトル・テキスト装飾 --- */
.kyoju-title {
  font-size: 2rem;
  line-height: 1.3; 
  color: #333333;
  font-weight: bold;
  letter-spacing: 0.02em;
}

@media (min-width: 992px) {
  .kyoju-title {
    font-size: 2.4rem;
    line-height: 1.25; 
    margin-bottom: 1rem !important; 
  }
}

.text-kyoju-blue {
  color: #1a529b;
}

.kyoju-lead {
  font-size: 1.05rem;
  line-height: 1.7; 
  color: #333333;
  letter-spacing: 0.03em;
}

@media (min-width: 992px) {
  .kyoju-lead {
    font-size: 1.15rem;
    line-height: 1.6; 
  }
}

/* --- 画像のレスポンシブ・トリミング制御 --- */
.kyoju-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: opacity 0.3s ease; /* 【追加】ホバー時の画像変化をジワっと滑らかにする設定 */
}

@media (max-width: 991.98px) {
  .kyoju-img {
    height: auto;
    aspect-ratio: 16 / 9;
  }
}

/* ==========================================================================
   主な連携・認定セクション（555.png完全再現仕様）
   ========================================================================== */
.partner-border-box {
  border: 1.5px solid #b0c4de; /* 見本に合わせた、主張しすぎない上品なブルーグレーの細枠 */
  border-radius: 16px;
  position: relative;
  background-color: #ffffff;
  padding: 2.8rem 1.2rem 1.8rem 1.2rem; /* スマホ版：タイトルと被らないよう上部に広めの余白 */
}

@media (min-width: 992px) {
  .partner-border-box {
    padding: 3.5rem 3rem 3rem 3rem; /* PC版：四方にゆったりとした高級感のある余白 */
  }
}

/* 枠線をまたぐ絶対配置のタイトル制御 */
.partner-box-title {
  position: absolute;
  top: 0;
  left: 1.5rem;
  transform: translateY(-50%);
  background-color: #ffffff; /* 枠線を綺麗に打ち消すための背景白 */
  padding: 0 0.8rem;
  font-size: 1.35rem;
  font-weight: bold;
  color: #1a529b; /* コーポレートカラーの濃い青 */
  letter-spacing: 0.03em;
  margin: 0;
}

@media (min-width: 992px) {
  .partner-box-title {
    left: 3.5rem;
    font-size: 1.6rem;
  }
}

/* --- 左側：チェックリスト構造 --- */
.partner-item {
  display: flex;
  align-items: flex-start; /* テキストが複数行に回り込んでも美しさを保つ上揃えベース */
  margin-bottom: 1.2rem;
}

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

.partner-icon {
  color: #245fa9; /* 見本画像と完全同調させた鮮やかなチェックマークの青 */
  font-size: 1.25rem;
  margin-right: 0.8rem;
  line-height: 1.4; /* テキストの1行目の中央にジャストフィットさせる高さ調整 */
  flex-shrink: 0; /* 画面が狭まってもアイコンが絶対に変形しないための保険 */
}

.partner-text {
  font-size: 0.95rem;
  font-weight: bold;
  color: #2b4260; /* 真黒ではなく、見本に合わせた少しネイビーを帯びた洗練されたダークカラー */
  line-height: 1.5;
}

@media (min-width: 1200px) {
  .partner-text {
    font-size: 1.05rem; /* PC大画面での視認性を高める微拡大 */
  }
}

/* --- 右側：指定法人ゴールドカード --- */
.designated-card {
  background-color: #fdfaf2; /* 見本をカラーコード抽出した気品のある薄いベージュゴールド */
  border: 1.5px solid #d5c59f; /* 統一感のあるプレミアムなゴールド細線 */
  border-radius: 12px;
  padding: 1.1rem 1rem;
  text-align: center;
  box-shadow: 0 2px 8px rgba(213, 197, 159, 0.08); /* 軽やかな浮遊感を出す微細なシャドウ */
}

.designated-main {
  font-size: 1.05rem;
  font-weight: bold;
  color: #886d26; /* 金枠にベストマッチする深みのある特製ゴールドブラウン */
  letter-spacing: 0.02em;
  margin-bottom: 0.25rem;
}

.designated-sub {
  font-size: 0.95rem;
  font-weight: bold;
  color: #886d26;
}

@media (min-width: 1200px) {
  .designated-main { font-size: 1.2rem; }
  .designated-sub { font-size: 1.08rem; }
}

.partner-border-box {
  border: 1.5px solid #b0c4de;
  border-radius: 16px;
  position: relative;
  background-color: #ffffff;
  /* 【修正】スマホ版の上下余白を少し詰めました（上 2.8→2.2rem / 下 1.8→1.2rem） */
  padding: 2.2rem 1.2rem 1.2rem 1.2rem; 
}

@media (min-width: 992px) {
  .partner-border-box {
    /* 【修正】PC版の上下の余白（赤丸部分）をきゅっと縮めました（上 3.5→2.2rem / 下 3→2rem） */
    padding: 2.2rem 3rem 2rem 3rem; 
  }
}

/* ==========================================================================
   ボトムコンタクトボタンセクション（見本完全同調仕様）
   ========================================================================== */
.bottom-contact-btn {
  display: flex;
  align-items: center; /* アイコンと文字の縦位置を常に中央揃えにします */
  background-color: #245fa9; /* 見本から抽出した、誠実で鮮やかなブルー */
  color: #ffffff !important;
  text-decoration: none;
  padding: 1.2rem 1.2rem;
  border-radius: 14px; /* 見本通りの美しく滑らかな大きめの角丸 */
  height: 100%; /* 3つのボタンの高さを綺麗に均等に揃えます */
  transition: opacity 0.3s ease, transform 0.3s ease;
}

/* ホバー時に既存のopacityに加え、少し上に浮くリッチな演出を追加（不要なら削除可） */
.bottom-contact-btn:hover {
  transform: translateY(-2px);
}

/* アイコンボックスの制御 */
.btn-icon-box {
  flex-shrink: 0; /* 画面が狭まってもアイコン画像が絶対に潰れないように固定 */
  width: 42px;
  margin-right: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.bottom-btn-img {
  width: 100%;
  height: auto;
  display: block;
}

/* テキストエリアの制御 */
.btn-text-box {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.btn-main-text {
  font-size: 1.08rem;
  font-weight: bold;
  letter-spacing: 0.02em;
  line-height: 1.3;
}

.btn-sub-text {
  font-size: 0.78rem;
  margin-top: 0.2rem;
  opacity: 0.9;
  letter-spacing: 0.01em;
  white-space: nowrap; /* カッコ内のテキストが途中で不自然に改行されるのを防ぎます */
}

/* 中画面（タブレット〜小さめのノートPC）での文字溢れ・改行対策 */
@media (max-width: 1199.98px) {
  .bottom-contact-btn {
    padding: 1.1rem 0.8rem;
  }
  .btn-icon-box {
    width: 36px;
    margin-right: 0.6rem;
  }
  .btn-main-text {
    font-size: 0.95rem;
  }
  .btn-sub-text {
    font-size: 0.72rem;
  }
}

/* スマホ版（SP）の個別調整 */
@media (max-width: 991.98px) {
  .bottom-contact-btn {
    padding: 1.2rem 1.5rem; /* スマホではタップしやすいよう少し広めの余白に */
  }
  .btn-icon-box {
    width: 42px;
    margin-right: 1.2rem;
  }
  .btn-main-text {
    font-size: 1.1rem;
  }
  .btn-sub-text {
    font-size: 0.8rem;
  }
}

/* ==========================================================================
   提言 ＆ 選ばれる理由 統合セクション（blogサンプル.jpg完全トレース）
   ========================================================================== */

/* --------------------------------------------------------------------------
   【左側】現場からの提言カード
   -------------------------------------------------------------------------- */
.teigen-card-box {
  background-color: #f2f7fc; /* 見本から抽出した非常に品のある薄いブルー背景 */
  border-radius: 18px;
  padding: 2.5rem 1.8rem;
}

.teigen-box-title {
  font-size: 2rem;
  font-weight: bold;
  color: #1a529b; /* コーポレートブルー */
  letter-spacing: 0.02em;
}

.teigen-box-lead {
  font-size: 0.95rem;
  line-height: 1.5;
  color: #333333;
}

/* 代表写真（元の白フチ仕様を削除） */

.teigen-box-img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 2px;
}

/* 記事リスト */
.teigen-box-item {
  margin-bottom: 0.75rem;
}
.teigen-box-item:last-child {
  margin-bottom: 0;
}

.teigen-box-item a {
  text-decoration: none;
  font-size: 0.92rem;
  line-height: 1.4;
  transition: opacity 0.2s ease;
}
.teigen-box-item a:hover {
  opacity: 0.7;
}

.teigen-box-item .date {
  font-family: Arial, sans-serif;
  min-width: 78px;
  display: inline-block;
}

.teigen-box-item .title {
  transition: color 0.2s ease;
}

/* 左側ボタン：白背景・青細枠 */
.btn-teigen-more {
  display: inline-block;
  background-color: #ffffff;
  color: #333333;
  border: 1px solid #1a529b;
  border-radius: 8px;
  font-weight: bold;
  font-size: 0.95rem;
  padding: 0.55rem 3rem;
  text-decoration: none;
  transition: background-color 0.2s ease, color 0.2s ease;
}
.btn-teigen-more:hover {
  background-color: #1a529b;
  color: #ffffff;
}

/* --------------------------------------------------------------------------
   【右側】ALPが選ばれる理由（画像ヘッダー最適化版）
   -------------------------------------------------------------------------- */
.reason-card-box {
  background-color: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 18px;
  padding: 2.5rem 1.8rem;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.02);
}

.reason-box-title {
  font-size: 2rem;
  font-weight: bold;
  color: #1a529b;
  letter-spacing: 0.02em;
}

.text-alp-gold {
  color: #8c7662;
  margin-right: 0.2rem;
}

/* 内包する6つのカード枠 */
.reason-grid-item {
  border: 1px solid #cbd5e1;
  border-radius: 14px;
  padding: 1.1rem 1rem;
  background-color: #f8fafc;
}

/* 【追加】理由画像ヘッダーのレスポンシブ制御 */
/* 内包する6つのカード枠 */
.reason-grid-item {
  border: 1px solid #cbd5e1;
  border-radius: 14px;
  padding: 0.75rem 0.6rem; /* 【修正】スマホ2列化に伴い、文字が窮屈にならないよう内側余白をスマートに調整 */
  background-color: #f8fafc;
}

@media (min-width: 576px) {
  .reason-grid-item {
    padding: 1.1rem 1rem; /* 特大スマホやタブレット以上は元の広々とした余白に */
  }
}

/* 理由画像ヘッダーのレスポンシブ制御 */
.reason-grid-img-wrap {
  width: 100%;
  display: block;
}

.reason-grid-img {
  width: 100%;
  height: auto;
  display: block;
}

/* 【大修正】カード内の説明文フォントサイズ調整 */
.reason-grid-item .desc {
  font-size: 0.8rem; /* スマホ2カラム時：枠に綺麗に収まるスマートなサイズ */
  color: #334155;
  line-height: 1.4;
  margin-top: 0.6rem;
  margin-bottom: 0;
}

@media (min-width: 992px) {
  .reason-grid-item .desc {
    font-size: 0.95rem; /* 【修正】PC版：ご要望通り、元の0.8remから「きっちり2ポイント」引き上げて視認性を強化 */
    line-height: 1.5;
  }
}

/* 右側ボタン */
.btn-reason-more {
  display: inline-block;
  background-color: #ffffff;
  color: #333333;
  border: 1px solid #1a529b;
  border-radius: 8px;
  font-weight: bold;
  font-size: 0.95rem;
  padding: 0.55rem 4.5rem;
  text-decoration: none;
  transition: background-color 0.2s ease, color 0.2s ease;
}
.btn-reason-more:hover {
  background-color: #1a529b;
  color: #ffffff;
}

@media (min-width: 1200px) {
  .teigen-card-box, .reason-card-box {
    padding: 3rem 2.5rem;
  }
}

/* ==========================================================================
   ALPの生活再建支援セクション（背景色追加・カードスペース最大化仕様）
   ========================================================================== */
/* 【追加】セクション全体を包む薄いブルーの特製背景ボックス */
.shien-bg-box {
  background-color: #f2f7fc; /* 「現場からの提言」カードと100%同一の美しい薄いブルー */
  border-radius: 24px;
  padding: 3rem 1.2rem; /* スマホ版の余白 */
}

@media (min-width: 992px) {
  .shien-bg-box {
    /* PC版：上下に贅沢な広がりを持たせつつ、左右は2remに絞って白いカードの幅を限界まで広く保ちます */
    padding: 4.5rem 2rem; 
  }
}

/* 白ベースの特製角丸カードデザイン */
.shien-card {
  background-color: #ffffff;
  border: 1px solid #e2e8f0; 
  border-radius: 20px; 
  /* 【調整】カード内の左右余白を 1.5rem→1rem に縮め、内側の有効面積を広げて小さく見えるのを防ぎます */
  padding: 2.2rem 1rem; 
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.015); 
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.shien-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.05);
}

/* タイトルカラー（各指定色） */
.shien-card-title {
  font-size: 1.25rem; /* 【調整】背景ボックス内での収まりを美しくするため、わずかに微調整 */
  font-weight: bold;
  letter-spacing: 0.02em;
}
.shien-card-title.color-green { color: #389c5c; }
.shien-card-title.color-blue  { color: #215e95; }
.shien-card-title.color-purple { color: #8d538e; }

/* カード内部（画像とテキストの横並び flex 構造） */
.shien-card-body {
  gap: 0.8rem; /* 【調整】1.2remから0.8remに詰め、右側のテキストに余裕を持たせます */
}

.shien-img-box {
  width: 41%; /* 【調整}44%から41%にわずかに絞り、テキスト幅を確保します */
  flex-shrink: 0; 
}

.shien-card-img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 6px; 
}

.shien-list {
  width: 59%; /* 【調整】56%から59%に拡大し、文字がのびのび入るようにします */
}

.shien-list li {
  font-size: 0.95rem;
  font-weight: bold;
  color: #475569; 
  line-height: 1.7; 
  white-space: nowrap; 
}

/* タブレット〜ノートPC画面での文字溢れ・改行防止用のレスポンシブ微調整 */
@media (max-width: 1199.98px) {
  .shien-card {
    padding: 1.8rem 0.75rem;
  }
  .shien-card-title {
    font-size: 1.15rem;
  }
  .shien-list li {
    font-size: 0.88rem;
    line-height: 1.6;
  }
}

/* スマホ版（SP）での表示最適化 */
@media (max-width: 991.98px) {
  .shien-bg-box {
    padding: 3.5rem 1rem;
  }
  .shien-card {
    max-width: 440px; 
    margin: 0 auto;  
    padding: 2.2rem 2rem;
  }
  /* スマホは縦1列で横幅にゆとりがあるため、元の美しい比率に戻します */
  .shien-img-box { width: 44%; }
  .shien-list { width: 56%; }
  .shien-card-title { font-size: 1.35rem; }
  .shien-list li { font-size: 1.05rem; line-height: 1.9; }
}


/* ==========================================================================
   お知らせ ＆ 4つのバナーボタンセクション（oshirase.jpg完全トレース仕様）
   ========================================================================== */
.oshirase-banner-section {
  margin-top: 5rem; /* 上の生活再建支援セクションとの間の快適な余白 */
}

/* --- 【左側】お知らせの枠線ボックス --- */
.oshirase-border-box {
  border: 1.5px solid #b0c4de;
  border-radius: 16px;
  position: relative;
  background-color: #ffffff;
  /* 【修正】全体の高さを縮めるため、外周のパディングを引き締めます */
  padding: 1.8rem 1.2rem 1rem 1.2rem; 
}

@media (min-width: 576px) {
  .oshirase-border-box {
    /* 【大修正】右側のバナー4つの合計高さと「ミリ単位」でシンクロさせるための専用パディング調整 */
    padding: 2.2rem 2rem 0.6rem 2rem; 
  }
}

/* 【大修正】緑部分：「主な連携・認定」のデザインと100%完全に統一します */
.oshirase-box-title {
  position: absolute;
  top: 0;
  left: 1.5rem;
  transform: translateY(-50%);
  background-color: #ffffff; /* 枠線を消すための白背景 */
  
  /* 青い囲み枠（border）を完全に撤廃し、左右のみに文字床の余白を確保 */
  border: none; 
  border-radius: 0;
  padding: 0 0.8rem; 
  
  /* フォントサイズとレタースペースも「主な連携・認定」と完全に同期 */
  color: #1a529b;
  font-weight: bold;
  font-size: 1.35rem; 
  letter-spacing: 0.03em;
  margin: 0;
}

@media (min-width: 992px) {
  .oshirase-box-title {
    left: 2.5rem;
    font-size: 1.6rem; /* PC版の大サイズも完全同期 */
  }
}

/* --- 【右側】4つのバナーボタン --- */
.banner-btn-link {
  text-decoration: none;
  border-radius: 12px;
  overflow: hidden; /* 画像自体の角を見本通り綺麗に丸めます */
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.02); /* 軽やかな高級感を演出する薄いシャドウ */
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* マウスホバー時にふわっと2pxだけ浮き上がる、最新のインタラクティブエフェクト */
.banner-btn-link:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(26, 82, 155, 0.08);
}

.banner-btn-img {
  width: 100%;
  height: auto;
  display: block;
}