@charset "utf-8";
/* ============================================== */
/* rehab-style.css */
/* ============================================== */

/* ===========================
   固定ページPC共通スタイル
============================= */
/* ------------------------
   紹介セクション調整
------------------------ */
.font-jp-m {
   font-family: A1 Mincho, serif;
   font-weight: normal;
   font-style: italic;
   -webkit-font-smoothing: antialiased;
}
h2 {
   font-size: 1.5em;
   font-weight: bold;
}
.section_pdg {
  padding: 100px 0;
}
.home_intro {
    background-color: #fff;
}
.waypoint {
    opacity: 0;
    transform: translateY(30px); /* 下にずらす */
    transition: opacity 3s ease, transform 3s ease;
}
.waypoint.active {
    opacity: 1;
    transform: translateY(0);
}
.inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}
.section_ttl {
    position: relative;
    color: #1f2427;
    font-size: 2em;
    text-align: center;
    line-height: 1.28;
    letter-spacing: 0.2em;
}
.txt-ctr {
    text-align: center;
}
.txt-ctr-pc {
    text-align: center;
}
.mgn-btm80 {
    margin-bottom: 80px;
}
.mgn-btm64 {
    margin-bottom: 64px;
}
.mgn-btm30 {
    margin-bottom: 30px;
}
.section_ttl small {
    display: block;
    margin-bottom: 14px;
    font-size: 62%;
    letter-spacing: 0.2em;
}
.font-jp-gl {
    font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;
    font-size: 31px;
    font-weight: normal;
    font-style: italic;
}
.font-jp-m {
    font-family: A1 Mincho, serif;
    font-size: 51px;
    font-weight: normal;
    font-style: italic;
    -webkit-font-smoothing: antialiased;
}
.txt-italic {
  font-style: italic;
}
.txtarea .txt-lg {
    line-height: 2.43;
    letter-spacing: 0.04em;
}
p.txt-lg {
    font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;
    font-size: 20px;
    font-weight: 500;
    letter-spacing: 1em;
    line-height: 5.2;
}
.txtarea p.txt-lg {
    line-height: 2 !important;
    letter-spacing: 0.5em !important;
}

/* Noto Sans JP 見出し用 */
.font-noto {
  display: block;
  font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;
  font-style: italic;
  font-size: 24px;
  font-weight: 400;
  line-height: 1.6;
  margin-bottom: 60px;
  letter-spacing: 0.1em;
  color: #1f2427;
}
/* 明朝系の小サイズ見出し */
.font-jp-m-sub {
  display: block;
  font-family: "A1 Mincho", "Hiragino Mincho ProN", "Yu Mincho", serif;
  font-style: italic;
  font-weight: 400;
  font-size: 31px;
  line-height: 1.6;
  letter-spacing: 0.1em;
  color: #1f2427;
}
/* 小サイズの明朝斜体 */
.font-jp-m-sm {
  display: block;
  font-family: "A1 Mincho", "Hiragino Mincho ProN", "Yu Mincho", serif;
  font-style: italic;
  font-weight: 400;
  font-size: clamp(20px, 2.2vw, 26px);
  line-height: 1.6;
  margin-top: 20px;
  letter-spacing: 0.08em;
  color: #1f2427;
}
/* 色付き下線 */
.text-highlight-item {
  background: linear-gradient(180deg, transparent 70%, #DBEFFE 0%) no-repeat;
  background-size: 100% 1.5em;
  background-position: 0 100%;
  display: inline;
  font-weight: 500;
  font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;
}
.rehab-feature-list li {
    line-height: 2 !important;
}

/* ----------------------------
   リハビリ イメージセクション
------------------------------ */
/* ==== 病期フロー ==== */
#rehab-flow {
  --max-width: 1200px;
  --gutter: 16px;
  /* 基本の重なり量（回復期は個別でさらに寄せます） */
  --overlap: 65px;
  --hover-lift: 6px;
  /* 画像高さ（PC/SP） */
  --img-h: 260px;
  --img-h-sp: 180px;
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 24px var(--gutter) 200px;
  box-sizing: border-box;
  position: relative;
}

.flow-title {
  font-size: clamp(20px, 2.4vw, 28px);
  font-weight: 700;
  margin-bottom: 16px;
}

/* 横並び本体 */
.timeline-arrows {
  display: flex;
  align-items: flex-end;
  position: relative;
}

/* 各フェーズ共通（影なし・はみ出し防止） */
.timeline-arrows .phase {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: 12px;
  text-decoration: none;
  color: inherit;

  /* 比率配分：basis=0、growは個別指定 */
  flex: 0 1 0%;

  /* 影なし */
  box-shadow: none !important;
}

/* ▼共通の重なり：:where()で“強さゼロ”にして後の個別指定を必ず勝たせる */
.timeline-arrows :where(.phase):not(:first-child) {
  margin-left: calc(var(--overlap) * -2);
}

/* ▼急性期↔回復期の間だけ、さらに詰める（=回復期をもっと左へ） */
.timeline-arrows .phase.phase-recovery {
  margin-left: calc(var(--overlap) * -2.3);
}

/* 画像：高さ統一＋トリミングなしで枠内に収める */
.timeline-arrows .phase img {
    width: 100% !important;
    height: 100% !important; /* height: auto から height: 100% に変更 */
    display: block !important;
    vertical-align: top !important;
    object-fit: contain !important; /* 画像の縦横比を維持しながら100%に収める */
}

/* フェーズボタンの基本設定 */
.timeline-arrows .phase {
    z-index: 50; /* 他の要素の上に表示するための基本z-index */
    transition: z-index 0s 0.2s, transform 0.2s;
    transform: scale(1.0) translateY(0); /* 基本のtransform値をリセット */
}

/* ホバー時の設定 (クリックしていなくても強調 + 最前面に表示) */
.timeline-arrows .phase:hover {
    /* 最前面 (z-index: 101) にする */
    z-index: 101;
    /* 拡大と持ち上げ効果 */
    transform: translateY(calc(var(--hover-lift, 2px) * -1)) scale(1.05);
    /* transition-delay: 0s; を追加することで、z-indexの切り替わりが即座に反映される */
    transition-delay: 0s;
}

/* クリック時/選択時に最前面に固定するクラス */
.timeline-arrows .phase.is-focused {
    /* ホバーと同じ z-index で最前面に固定 */
    z-index: 101;
    /* 拡大と持ち上げ効果 */
    transform: translateY(calc(var(--hover-lift, 2px) * -1)) scale(1.05);
}

/* タイトル要素の基本デザイン (インラインスタイルと競合しない部分のみ残す) */
.rehab-detail-box {
    width: 380px !important;
    background-color: #ffffff !important;
    border: 2px dashed #bbb !important;
    border-radius: 8px !important;
    padding: 20px !important;
    position: absolute !important;
    z-index: 99 !important;
    font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;
    display: none;
}
.rehab-detail-box h3 {
    text-align: center !important;
    font-size: 1.6em !important;
    font-weight: bold;
    color: #333 !important;
    /* 下線装飾 */
    text-decoration: underline !important;
    text-decoration-color: #ffdddd !important;
    text-decoration-thickness: 0.2em !important;
    padding-bottom: 8px;
    margin-top: 0;
    font-family: "Noto Serif JP", "Hiragino Mincho ProN", "Yu Mincho", serif;
    letter-spacing: 0.4em;
}
/* 詳細ボックス内のリスト全体のスタイル */
.rehab-detail-box ul {
    list-style: none !important;
    padding-left: 20px;
    margin: 0;
}
/* リスト項目（<li>）の先頭に「・」を擬似要素で追加 */
.rehab-detail-box ul li {
    position: relative;
    padding-left: 1.2em;
    line-height: 1.8;
    font-weight: 500;
}
.rehab-detail-box ul li::before {
    content: "・";
    color: #333;
    font-weight: bold;
    position: absolute;
    left: 0;
    top: 0;
}
#living-detail {
    border: 2px dashed #bbb !important;
}

/* 個々のドットのデザイン */
.anim-dot {
    position: absolute;
    width: 10px; /* 初期サイズ */
    height: 10px;
    background-color: #bbbbbb; /* グレー */
    border-radius: 50%;
    opacity: 0;
    transform: scale(1);
    /* 詳細ボックス (z-index: 99) より上にする */
    z-index: 100;
    /* クリックを妨げないように */
    pointer-events: none;
    margin-top: -5px;
    margin-left: -5px;
}

/* アニメーションのキーフレーム: 段々小さくなる */
@keyframes shrinkFade {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1.0; /* 完全に不透明で固定 */
    }
}

/* ドットに適用するアニメーションクラス */
.anim-dot.start {
    /*  transform の値を初期値に戻すための transition を追加 */
    animation: shrinkFade 0.8s ease-out forwards;
    /* transition を追加することで、サイズクラスの変更を滑らかに反映 */
    transition: width 0.3s, height 0.3s;
}

/* 段階的に小さくするためのクラスを定義 */
.dot-size-large {
    width: 10px;
    height: 10px;
}
.dot-size-medium {
    width: 8px; /* 少し小さく */
    height: 8px;
}
.dot-size-small {
    width: 6px; /* さらに小さく */
    height: 6px;
}
.dot-size-xsmall {
    width: 4px; /* 最小サイズ */
    height: 4px;
}

/* PCレイアウト */
.timeline-arrows {
    display: flex !important; /* コンテナをFlexboxに強制 */
    justify-content: flex-start !important;
}
.timeline-arrows .phase-acute {
    flex-grow: 951 !important; /* PCの本来の比率に強制 */
    flex-shrink: 0 !important;
    margin-left: 0 !important;
    z-index: 10 !important;
}
.timeline-arrows .phase-recovery {
    flex-grow: 880 !important; /* PCの本来の比率に強制 */
    flex-shrink: 0 !important;
    margin-left: -100px !important; /* 画像を重ねるためのネガティブマージンに強制（正確な値に置き換え） */
    z-index: 30 !important;
}
.timeline-arrows .phase-living {
    flex-grow: 1658 !important; /* PCの本来の比率に強制 */
    flex-shrink: 0 !important;
    margin-left: -80px !important; /* 画像を重ねるためのネガティブマージンに強制（正確な値に置き換え） */
    z-index: 20 !important;
}

/* クリック時 (フォーカス時) に画像を最前面に移動 */
.timeline-arrows .phase:focus {
    z-index: 101 !important;
}


/* -------------------
   職種紹介セクション
-------------------- */
/* PC共通: ナビゲーション */
.dept-nav-img {
    display: block;
    height: auto;
    margin: 0 auto;
    width: 100%; /* 親の div.dept-nav-shadow-wrap の 120px に収まる */
}
/* リスト全体の横並びと中央配置 */
.dept-nav-list {
    display: flex; /* 横並びに */
    justify-content: center; /* リスト全体を中央揃え */
    gap: 30px; /* ボタン間の間隔 */
    padding: 0;
    list-style: none;
    margin: 100px auto;
}
/* <li> 要素が縦に並ぶのを防ぐ */
.dept-nav-list li {
    padding: 0;
    margin: 0;
}
/* リンク要素（ボタン全体）の幅を解除 */
.dept-nav-link {
    /* 以前の横長ボタンのために設定されていた可能性のある固定幅を解除 */
    width: auto !important;
    display: inline-block;
    box-shadow: none !important;
}
/* ホバー時の変化 */
/* 新しいラッパー要素にシャドウとアニメーションを設定 */
.dept-nav-shadow-wrap {
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
    transition: box-shadow 0.3s ease;
    max-width: 320px;
    margin: 0 auto;
}
/* ホバー時の影の濃淡をラッパーに設定 */
.dept-nav-link:hover .dept-nav-shadow-wrap {
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.25);
}
/* ホバー時の持ち上げアニメーションはリンク要素に残す */
.dept-nav-link:hover {
    transform: translateY(-2px);
    cursor: pointer;
}
/* クリック瞬間の動作（押し込まれる） */
.dept-nav-link:active {
    /* 影を最小限にするか解除 */
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    /* 要素を元の位置に戻すか、少し下に移動させて押し込み感を演出 */
    transform: translateY(0);
}

/* 非アクティブなコンテンツは非表示 */
.dept-content {
    display: none;
}
.dept-content.active-content {
    display: block;
}

/* 共通スタイル */
.dept-subtitle {
    /* 治療内容などの見出し */
    padding-left: 10px;
    margin-top: 0;
    margin-bottom: 24px;
    /* 下部のボーダーを設定 */
    border-bottom: 1px solid #CCCCCC; /* 1pxの太さ、実線、薄い灰色 */
    /* ボーダーとテキストの間の余白を調整 */
    padding-bottom: 5px;
    font-family: "Noto Serif JP", "Hiragino Mincho ProN", "Yu Mincho", serif;
    letter-spacing: 4px;
    font-size: 20px;
    color: #333333;
}

/* PC: 2列レイアウト */
/* ---------------------------------------------------- */
/* A. 新しいラッパーの作成 (floatを内包し、マージンを設定) */
/* ---------------------------------------------------- */
.content-box-2col-float {
    /* floatした要素を内包するための clearfix を適用 */
    overflow: hidden;
    margin-bottom: 148px; /* 元のマージンを維持 */
}

/* ---------------------------------------------------- */
/* B. 画像の回り込み（float）とマージンの設定 */
/* ---------------------------------------------------- */
.content-image-placeholder.float-right-image {
    float: right; /* 右側に回り込ませる */
    /* サイズを再設定 */
    width: 500px;
    height: auto;
    /* テキストとの間の余白を確保 */
    margin-left: 40px; /* 以前の gap: 40px と同等の余白 */
    margin-bottom: 20px;
    display: block;
}

/* ---------------------------------------------------- */
/* C. テキストエリアの設定 */
/* ---------------------------------------------------- */
.content-text-float {
    width: auto; /* 画像がfloatした残りの幅を占める */
}

/* 1列コンテンツ（疾患リストなど） */
.content-box-1col {
    margin-bottom: 50px;
}

/* <h3>帯のデザイン1 */
.section-intro-band {
    /* 帯の背景色 */
    background-image: linear-gradient(to right, #D6EDFD 0%, #FFFFFF 100%);
    /* 文字色を濃い色に (黒に近い色) */
    color: #1F2427;
    font-family: "Noto Serif JP", "Hiragino Mincho ProN", "Yu Mincho", serif;
    /* 上下のパディングで高さを調整 */
    padding-top: 15px;
    padding-bottom: 15px;
    /* 左右のパディング。左側は装飾のために広めに確保 */
    padding-left: 20px;
    padding-right: 20px;
    /* 見出しの下に間隔を空ける (必要に応じて) */
    margin-bottom: 50px;
    /* テキストの整列 */
    text-align: left;
    /* 帯の左端の濃い青の縦線を作成 */
    position: relative; /* 擬似要素の位置の基準とする */
}
/* 帯の左側の装飾（太い縦線）を追加 */
.section-intro-band::before {
    content: ""; /* 擬似要素には content が必要 */
    display: block;
    /* 縦線のサイズと色 */
    width: 20px; /* 縦線の太さ */
    height: 100%; /* 親要素の高さ全体に広げる */
    background-color: #002E86; /* 濃い青色 (例) */
    /* 位置の調整 */
    position: absolute;
    top: 0;
    left: 0; /* 左端に配置 */
}
/* 帯のテキストを縦線から少し離す */
/* padding-leftを調整し、縦線分のスペースと少しの余白を確保 */
.section-intro-band {
    /* 縦線 + 余白のパディング */
    padding-left: 30px;
}
/* 必要に応じてフォント調整 */
.section-intro-band > * {
    font-size: 31.5px;
    font-weight: normal;
    margin: 0; /* 要素内のpタグなどに余計なマージンがあればリセット */
}

/* <h3>帯のデザイン2 */
.section-title-band {
    /* 帯の背景色 */
    background-color: #002E86; /* 濃い青色 (例) */
    /* 文字色を白に */
    color: #FFFFFF;
    /* 左右のパディングで帯の横幅を調整 */
    padding: 15px 20px 15px 19px; /* 上右下左 */
    /* 見出しの下に間隔を空ける (必要に応じて) */
    margin-bottom: 20px;
    /* テキストのフォントサイズや太さ (必要に応じて調整) */
    font-family: "Noto Serif JP", "Hiragino Mincho ProN", "Yu Mincho", serif;
    letter-spacing: 4px;
    font-size: 20px;
    font-weight: bold;
    /* 帯の左端の縦線部分を擬似要素で作成 */
    position: relative; /* 擬似要素の位置の基準とする */
    border-radius: 10px;
}
/* 帯の左側の装飾（細い縦線）を追加 */
.section-title-band::before {
    content: ""; /* 擬似要素には content が必要 */
    display: block;
    /* 縦線のサイズと色 */
    width: 1px; /* 縦線の太さ */
    height: 100%; /* 親要素の高さ全体に広げる */
    background-color: #FFFFFF; /* 縦線の色を白に */
    /* 位置の調整 */
    position: absolute;
    top: 20%;
    left: 20px;
    height: 60%;
}
/* 帯のテキストを縦線から少し離す */
/* padding-leftを調整し、縦線分のスペースと少しの余白を確保 */
.section-title-band {
    padding-left: 35px;
    margin-bottom: 38px;
}

/* 概要説明 */
.section-description {
    font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;
    font-size: 16px;
    letter-spacing: 0.2em;
    line-height: 30px !important;
    margin-top: 0;
}

/* 訓練内容リスト全体の設定 */
.therapy-list-container ul {
    list-style: none !important; /* デフォルトの記号を非表示 */
    padding-left: 0 !important; /* ブラウザの左パディングをリセット */
    margin: 0;
}
/* リスト項目（<li>）のスタイル */
.therapy-list-container ul li {
    position: relative;
    /* 「●」のスペースと、その後のテキストの開始位置を調整 */
    padding-left: 1.5em;
    line-height: 1.5;
    /* 項目間の縦スペース */
    margin-bottom: 30px;
    font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;
    font-size: 18px !important;
    font-weight: 500;
    letter-spacing: 0.2em;
}
.therapy-list-container ul li p {
    font-size: 16px !important;
    font-weight: 400;
}
/* 紺色の「●」を ::before で適用 */
.therapy-list-container ul li::before {
    content: "●";
    color: #002E86;
    font-size: 0.8em; /* 記号を少し小さくする */
    font-weight: bold;
    position: absolute;
    left: 0;       /* <li>の左端に配置 */
    top: 0.2em;
}
/* <li>内の説明文（<p>）のスタイル */
.therapy-list-container ul li p {
    margin-top: 5px;
    margin-bottom: 0;
    font-size: 0.9em;
    line-height: 1.4;
}

/* 対象疾患リスト全体 (.disease-list) の調整 */
.disease-list {
    list-style: none !important;
    padding-left: 0 !important;
    margin-top: 10px;
    margin-bottom: 25px;
}
/* リスト項目（<li>）の調整 */
.disease-list li {
    margin-bottom: 20px;
    padding-left: 1.5em;
    /* テキストが複数行になった場合の行間を調整 */
    line-height: 1.6;
    font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;
    font-size: 20px !important;
    font-weight: 400;
    letter-spacing: 0.2em;
}
/* 脚注 (.footnote) の調整 */
.footnote {
    font-size: 0.85em;
    font-family: "Noto Serif JP", "Hiragino Mincho ProN", "Yu Mincho", serif;
    color: #666;
    margin-top: 15px;
    padding-left: 1em;
}

/* PC表示 (768px 以上)改行 */
.pc-br {
    /* 何も設定しない (デフォルトの改行が有効) */
}
.sp-br {
    display: none;   /* SP用の改行を無効にする */
}

/* 各セクション間の間隔 */
#contents .dept-section {
    margin-bottom: 200px !important;
}
#contents .dept-section:last-child,
#contents #st-content {
    margin-bottom: 100px !important;
}

/* -------------------------------------
    画面固定タブ (#fixed-recruit-tab)
--------------------------------------- */
#fixed-recruit-tab {
    /* 1. 固定化 */
    position: fixed;
    z-index: 999;
    /* 2. 配置 (右端に密着し、上下中央に配置) */
    right: 0;
    top: 50%;
    transform: translateY(-50%); /* 要素の高さの半分だけ上にずらして完全な中央配置 */
    /* 3. サイズ設定 */
    width: auto; /* コンテンツに合わせて幅を調整 */
    /* 4. 外観：角丸と影 */
    /* 右側を固定するので、左側の角だけ角丸にする */
    border-top-left-radius: 8px;
    border-bottom-left-radius: 8px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
    /* 1. スクロール表示用の初期設定 */
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.5s ease, transform 0.5s ease; /* transformもアニメーション対象に含める */
    /* 2. 初期位置: 画面右外へ移動 (自分の幅だけ右へ) */
    transform: translateY(-50%) translateX(100%);
}
/* スクロール後の表示状態 (PC画面) */
#fixed-recruit-tab.is-visible {
    opacity: 1;
    visibility: visible;
    /* 初期位置をリセット: 画面内へスライドイン */
    transform: translateY(-50%) translateX(0); /* 横移動をゼロに戻す */
}
.fixed-link-button {
    display: block;
    padding: 20px 10px;
    writing-mode: vertical-rl; /* 右から左へ、縦書きに */

    /* 6. デザイン */
    background-color: #002E86;
    color: #ffffff !important;
    font-size: 20px;
    font-family: "Noto Serif JP", "Hiragino Mincho ProN", "Yu Mincho", serif;
    font-weight: bold;
    text-decoration: none;
    text-align: center;
    letter-spacing: 0.3em;
    /* リンク要素自体にも角丸を適用して、親の角丸を隠す */
    border-top-left-radius: 8px;
    border-bottom-left-radius: 8px;
    /* ホバー時のスムーズな変化を設定 */
    transition: background-color 0.3s ease;
}
/* 7. ホバー時の効果（クリック可能であることを示す） */
.fixed-link-button:hover {
    background-color: #6AAEDA;
    cursor: pointer;
}

/* ============================ */
/* フェードイン・スライドアップ  */
/* ============================ */
.waypoint {
    opacity: 0;
    transform: translateY(30px); /* 30px 下にずらしておく */
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}
.waypoint.active {
    opacity: 1;
    transform: translateY(0); /* 元の位置に戻す */
}


/* 親要素の幅を無視して横いっぱいに広げるクラス */
.full-width-section {
    width: 100vw; /* ビューポート（画面）の幅100%にする */
    position: relative;
    left: 50%;
    transform: translateX(-50%); /* 画面の中央に強制的に配置する */
}


/* レスポンシブ */
@media (max-width: 960px) {
  #rehab-flow {
    --overlap: 56px;   /* 画面が狭い時は重なり弱め */
    --hover-lift: 4px;
  }
  .timeline-arrows .phase.phase-recovery {
    margin-left: calc(var(--overlap) * -1.4);
  }
}

/* --------------------------------------------------------
   タブレット・モバイル共通 (〜1024px)
   -------------------------------------------------------- */
@media (max-width: 1024px) {
    /* 画像（フェーズボタン）の基本幅を調整し、タブレットでも見やすく */
    .timeline-arrows .phase {
        width: 30% !important;
        margin: 0 1%;
    }
}

/* --------------------------------------------------------
    スマートフォン対応 (〜767px)
    -------------------------------------------------------- */
@media (max-width: 767px) {
    /* -----------------------------------------------------------------
     * 文字と間隔の調整
     * -----------------------------------------------------------------
     */
    .font-noto {
        font-size: 1.5rem;
        margin-top: 40px;
        margin-bottom: 40px;
    }
    .section_ttl small {
        font-size: 1.4rem;
        margin-bottom: 20px;
        line-height: 1.2;
    }

    .font-jp-m {
        font-size: 2.6rem;
        font-weight: 600;
    }

    .font-jp-m-sm {
        font-size: 1.4rem;
        margin-top: 20px;
    }

    .text-highlight-item {
        font-size: 1.4rem;

    }

    .rehab-feature-list li {
        line-height: 1.2 !important;
        margin-bottom: 15px;
    }

    .txtarea p.txt-lg {
        line-height: 1.5 !important;
        letter-spacing: 0.06em !important;
    }

    .mgn-btm80 {
    margin-bottom: 60px;
    }

    .mgn-btm30 {
    margin-bottom: 0;
    }

    .mgn-btm64 {
    margin-bottom: 30px;
    }

    #contents section {
        margin-bottom: 0 !important;
    }

    /* -----------------------------------------------------------------
     * 1. 親要素: Flex設定と間隔/フォントリセット
     * -----------------------------------------------------------------
     */
    .timeline-arrows {
        display: flex !important;
        justify-content: center !important;
        width: 100% !important;

        /* 間隔を調整: 10px は維持し、この値が変化するか確認してください */
        gap: 0px !important;

        /* 要素間の空白文字の影響を無効化 */
        font-size: 0 !important;
        line-height: 0 !important;
    }

    /* -----------------------------------------------------------------
     * 2. 子要素: 幅・高さの強制上書き (セレクタ優先度を最大化)
     * -----------------------------------------------------------------
     */
    .timeline-arrows .phase,
    /* セレクタ強化：nth-childを追加し、優先度を上げる */
    .timeline-arrows .phase:nth-child(1),
    .timeline-arrows .phase:nth-child(2),
    .timeline-arrows .phase:nth-child(3) {
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        padding: 0 !important;

        /* 幅の固定値をすべて解除し、Flexboxに計算させる */
        width: auto !important;
        flex: 1 1 auto !important;
        flex-grow: 1 !important; /* 均等分配を維持 */

        /* 画像サイズ拡大と強制固定: 200px は維持し、この値が変化するか確認してください */
        height: 100px !important;
        max-height: 100px !important;

        /* 子要素のフォントサイズを復元 */
        font-size: 14px !important;
        line-height: normal !important;
    }
/* -----------------------------------------------------------------
     * 個別ルール 1: 重ね順序 (z-index) の設定
     * -----------------------------------------------------------------
     */
    .timeline-arrows .phase:nth-child(1) { z-index: 1 !important; } /* 急性期 (一番手前) */
    .timeline-arrows .phase:nth-child(2) { z-index: 2 !important; } /* 回復期 */
    .timeline-arrows .phase:nth-child(3) { z-index: 3 !important; } /* 生活期 */

    /* -----------------------------------------------------------------
     * 個別ルール 2: ネガティブマージンによる隙間の微調整
     * -----------------------------------------------------------------
     */
    /* (1) 急性期：回復期との間の隙間を埋める */
    .timeline-arrows .phase:nth-child(1) {
        /* この値を微調整して、急性期と回復期の間を重ねてください */
        margin-right: -30px !important;
    }

    /* (2) 回復期：生活期との間の隙間を埋める */
    .timeline-arrows .phase:nth-child(2) {
        /* この値を微調整して、回復期と生活期の間を重ねてください */
        margin-right: -20px !important;
    }

    /* (3) 生活期：最後の要素なので、ネガティブマージンは不要 */
    .timeline-arrows .phase:nth-child(3) {
        margin-right: 0 !important;
    }

    /* -----------------------------------------------------------------
     * 3. 個別クラスの固定幅設定を削除/上書き (最重要)
     * -----------------------------------------------------------------
     */

     /* PCで設定された flex-grow, flex-shrink を個別に上書きする */
    .timeline-arrows .phase-acute,
    .timeline-arrows .phase-recovery,
    .timeline-arrows .phase-living {
        /* Flexboxの均等分配設定に戻す */
        flex: 1 1 auto !important;
        flex-grow: 1 !important; /* 均等分配を強制 */
        flex-shrink: 1 !important; /* 縮小可能に強制 */

        width: auto !important;
        z-index: 50 !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    /* ... 3. (続き) 競合していた width: auto のリセットはそのまま維持 ... */
    .timeline-arrows .phase-acute,
    .timeline-arrows .phase-recovery,
    .timeline-arrows .phase-living {
        width: auto !important;
    }

    /* -----------------------------------------------------------------
     * 4. 既存のロジック維持
     * -----------------------------------------------------------------
     */

    /* Flexコンテナの幅と制限を完全に解除 */
    #rehab-flow,
    .inner {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    #rehab-flow {
        max-width: 100% !important;
        width: 100% !important;
        box-sizing: border-box !important;
        padding: 0 !important;
    }

    /* 詳細ボックス */
    .rehab-detail-box {
        margin-top: -10px !important;
        padding-top: 0 !important;
        padding-bottom: 0 !important;
        width: 350px !important;
    }
    .rehab-detail-box > *,
    .rehab-detail-box h2,
    .rehab-detail-box div {
        margin-top: 0 !important;
        padding-top: 0 !important;
    }

    /* スマホで他の画像を強制的に非表示にする */
    .timeline-arrows .phase.is-hidden-mobile {
        display: none !important;
        visibility: hidden !important;
        width: 0 !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    /* クリックした画像を強制的に拡大する */
    .timeline-arrows .phase.is-expanded {
        width: 100% !important;
        flex: 1 1 100% !important;
        display: block !important;
        margin: 0 !important;
        padding: 0 !important;
        z-index: 101 !important;
        transform: none !important;
        height: auto !important;
        max-height: none !important;
    }

    /* 画像（img）自体の設定 */
    .timeline-arrows .phase img {
        width: 100% !important;
        height: 100% !important;
        max-height: 100px !important;
        display: block !important;
        vertical-align: top !important;
        object-fit: contain !important;
        object-position: center !important;
    }

    .timeline-arrows, .timeline-arrows * { box-sizing: border-box !important; }

    /* ドットは非表示 */
    .anim-dot { display: none !important; }

/* ------------------
* 職種紹介セクション
* ------------------
*/
/* <h3>帯のデザイン1 */
    .section-intro-band {
        font-size: 16px;
        padding-top: 10px;
        padding-bottom: 10px;
        margin-bottom: 30px;
    }
    .section-intro-band::before {
        width: 13px;
    }
    .section-intro-band {
        padding-left: 20px;
    }

/* <h3>帯のデザイン2 */
    .section-title-band {
        font-size: 16px;
        padding-top: 10px;
        padding-bottom: 10px;
        border-radius: 5px;
    }
/* 帯の左側の装飾（細い縦線） */
    .section-title-band::before {
        top: 20%;
        left: 13px;
        height: 60%;
    }
    .section-title-band {
        padding-left: 25px;
        margin-bottom: 20px;
    }

    .dept-subtitle {
        padding-left: 10px;
        margin-bottom: 10px;
        /* ボーダーとテキストの間の余白を調整 */
        padding-bottom: 5px;
        font-size: 16px;
    }

/* SP表示 (MOBILE) 専用の修正 */
    /* 1. 親要素をFlexコンテナにし、縦並びにする */
    .content-box-2col-float {
        display: flex;
        flex-direction: column;
        padding: 0 15px;
    }
    /* 2. 画像の float を解除し、幅を100%にする */
    .content-box-2col-float .float-right-image {
        float: none;           /* float を解除 */
        width: 100% !important; /* 幅をコンテナいっぱいに広げる */
        margin: 15px 0 0 0;     /* 上にスペースを追加、回り込みのマージンをリセット */
        height: auto;
        /* 3. 画像の順序をテキストより下に設定 (HTML記述順と逆転) */
        order: 2;
    }
    /* 4. テキストの順序を上に設定 */
    .content-box-2col-float .content-text-float {
        width: 100% !important; /* 幅をコンテナいっぱいに広げる */
        overflow: visible;      /* overflow設定をリセット */
        order: 1;
    }

    p.section-description {
        font-size: 14px !important;
        line-height: 20px !important;
    }

    /* SP表示 (767px 以下)改行 */
    .content-box-2col-float .pc-br {
        display: none;   /* PC用の改行を無効にする */
    }
    .sp-br {
        display: block; /* または inline/inline-block */
    }

    .content-box-2col-float {
        margin-bottom: 80px;
    }

    /* リスト項目（<li>）のスタイル */
    .therapy-list-container ul li {
        padding-left: 1em;
        line-height: 1.0;
        /* 項目間の縦スペース */
        margin-bottom: 20px;
        font-size: 15px !important;
        font-weight: 600;
    }
    .therapy-list-container ul li p {
        font-size: 14px !important;
        font-weight: 400;
        margin-top: 2px;
    }
    .disease-list li {
        /* 項目間の縦のスペースを追加し、見やすくする */
        margin-bottom: 8px;
        padding-left: 1.2em;
        line-height: 1.6;
        font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;
        font-size: 14px !important;
        letter-spacing: 0.2em;
    }
    ul.disease-list {
        margin-bottom: 10px;
    }
    .sp-small-text {
        font-size: 0.8em; /* 親要素の80%のサイズに縮小 */
        display: block; /* 常に改行させたい場合はブロック要素化 */
    }

    .footnote {
        font-size: 10px !important;
        margin-top: 0;
        padding-left: 0.6em;
    }

/* ------------------------------------------- */
    /* 詳細ボックス内の文字と間隔の調整 */
    /* ------------------------------------------- */
    /* 1. タイトル（例: 生活期, 急性期など）の調整 */
    .rehab-detail-box h3 {
        font-size: 18px !important;
        margin-top: 10px;
        margin-bottom: 0px;
    }
    /* 2. リスト項目（箇条書きテキスト）の調整 */
    .rehab-detail-box ul li {
        font-size: 12px;
        margin-bottom: 8px;
        line-height: 1.2;
    }
    /* 3. ボックス全体のパディング（内部余白）を調整 */
    .rehab-detail-box {
        padding-top: 12px !important;
        padding-bottom: 12px !important;
        padding-left: 12px !important;
        padding-right: 12px !important;
    }
    /* 4. ボックス幅の調整 (必要に応じて) */
    .rehab-detail-box {
        width: 300px !important;
    }
    .rehab-detail-box {
    border: 1px dashed #bbb !important;
    }
    #living-detail {
    border: 1px dashed #bbb !important;
    }

    /* 各セクション間の間隔 */
    #contents .dept-section {
        margin-bottom: 80px !important;
    }
    #contents .dept-section:last-child,
    #contents #st-content {
        margin-bottom: 60px !important;
    }

    /* 職種ボタンの配置 */
    .dept-nav-list {
        gap: 10px; /* ボタン間の間隔 */
        margin: 40px auto;
    }

    /* 採用情報タブの配置変更 */
    #fixed-recruit-tab {
        /* SPの配置: 下部中央（横長または縦長） */
        position: fixed;
        left: 50%;
        bottom: 0px; /* 画面下からの距離 */
        top: auto;   /* PC用のtopをリセット */
        /* SPの非表示アニメーション: 移動はさせず、透明度のみで制御 */
        transform: translateX(-50%); /* 中央寄せ */
    }
    #fixed-recruit-tab.is-visible {
        opacity: 1;
        visibility: visible;
        transform: translateX(-50%); /* 中央寄せを維持 */
    }
    .fixed-link-button {
        /* 6. リンク要素の角丸を親に合わせて調整 */
        border-radius: 0;
        border-top-left-radius: 8px;
        border-top-right-radius: 8px;
        /* 横書き設定 */
        writing-mode: horizontal-tb;
        padding: 10px 15px !important;
        font-size: 15px;
    }
}