@charset "UTF-8";
/* =============================================================
 * study-abroad.css — 留学体験記テンプレート専用スタイル
 *
 * 移植元 : https://hama-ortho.jp/doctor/study-abroad/dr.arima.php
 *          CSS は https://hama-ortho.jp/css/style.min.css?date=20170729
 *          (PC 既定 + @media screen and (max-width:768px) の 2 系統) から実測抽出。
 * 適用元 : page-study-abroad.php (main#primary.studyAbroad)
 * 読込   : inc/study-abroad.php が is_page_template() で条件付き enqueue
 *
 * ■ 触らない範囲 (style.css に既存。ここでは絶対に再定義しない)
 *     .l-mv        … style.css 18-1 節
 *     .container   … style.css 1 節
 *     パンくず      … style.css 11 節
 *     ヘッダー / フッター
 *     .img-lightbox-overlay / .img-lightbox-img / .img-lightbox-close
 *                  … style.css 19-6 節 (オーバーレイ本体はグローバル定義を流用)
 *
 * ■ スコープ方針
 *   旧サイトは .inner / .right / .left / .cf をグローバルなユーティリティとして
 *   定義していた。本テーマにこれらの定義は無く (確認済)、グローバルに足すと
 *   サイト全体へ漏れる。よって全セレクタを .studyAbroad 配下に限定する。
 *   ユーザー指定どおりクラス名 (.inner 等) は旧サイトのまま維持する。
 *
 * ■ ブレークポイント
 *   旧サイト = max-width:768px。本テーマの SP 指定も max-width:768px が主流
 *   (style.css で 768px:7件 / 767px:3件) のため 768px をそのまま踏襲する。
 *
 * ■ フォント
 *   旧 .abroad-title は font-family:'Rufina','Hiragino Mincho ProN',serif。
 *   Rufina は Latin のみのフォントで、実際の見出しはすべて日本語 (「ケンタッキー
 *   州ルイビル」等) のため描画には一度も使われず Hiragino Mincho ProN に落ちる。
 *   Google Fonts へのリクエストを増やす価値が無いので Rufina は読み込まない。
 *   → 旧サイトの「実際の描画結果」と同一になる明示スタックを指定する。
 *      (将来 Latin のみの見出しを使うなら inc/study-abroad.php で Rufina を
 *       enqueue し、下記 font-family 先頭に 'Rufina' を戻すこと)
 * ============================================================= */

/* ---- 1. 本文ラッパ ------------------------------------------------ */
/* .container を被せていない (SP ガター二重化を避けるため / template 側コメント参照)。
   センタリングは旧サイトどおり .abroad-read-box / .inner が自力で行う。 */
.studyAbroad__body {
  margin-bottom: 80px;
}

/* ---- 2. ページタイトル -------------------------------------------- */
/* 旧サイトは .inner > h2。現行の下層ページ作法 (page-entry.php の
   h1.entryForm__pageTitle) に合わせ h1 + 同系の見た目に寄せる。 */
.studyAbroad__pageTitle {
  font-family: var(--f-heading-serif, "Hiragino Mincho ProN", serif);
  color: #1c2947;
  font-size: 28px;
  line-height: 1.4;
  margin: 24px 0 8px;
}

/* ---- 3. 旧 .inner (max-width:1100px の中央寄せコンテナ) ------------ */
/* 旧: .inner { max-width:1100px; margin:auto; } — グローバル定義だったものを scope 化 */
.studyAbroad .inner {
  max-width: 1100px;
  margin: auto;
}

/* ---- 4. 旧ユーティリティ (.cf / .right / .left) -------------------- */
/* 旧: .cf::after { clear:both; content:"."; display:block; height:0; visibility:hidden; } */
.studyAbroad .cf::after {
  clear: both;
  content: ".";
  display: block;
  height: 0;
  visibility: hidden;
}
/* 旧: .right { float:right; } / .left { float:left; } */
.studyAbroad .right { float: right; }
.studyAbroad .left  { float: left; }

/* ---- 4a. img のベースライン除去 ------------------------------------ */
/* 旧サイトは reset CSS に `img { vertical-align: bottom; }` を持っており
   (style.min.css 冒頭)、インライン img の下にできるベースライン分の隙間
   (約 7px) が全画像で消えていた。本テーマに同等の指定は無く、そのままだと
   young-dr のエントリーボタンが 114px → 121px に膨らむ等、画像を含む行
   ボックスが軒並み数 px 高くなる。移植元と同じ描画にするため scope 内で
   同じ reset を効かせる。 */
.studyAbroad img {
  vertical-align: bottom;
}

/* ---- 4b. dl / dt / dd のマージンリセット --------------------------- */
/* 旧サイトは全体 reset CSS で dd の margin-left を 0 にしていた (実測: 移植元の
   .abroad-photo.right dd は margin 0 / width 320px)。本テーマに同等の reset は
   無くブラウザ既定の margin-left:40px が効いてしまい、キャプションが 40px
   右にずれて幅も 280px に縮む。移植元と同じ描画にするため scope 内で打ち消す。 */
.studyAbroad .abroad-photo dt,
.studyAbroad .abroad-photo dd,
.studyAbroad .abroad-flex-box dt,
.studyAbroad .abroad-flex-box dd {
  margin: 0;
}

/* ---- 5. リード文ボックス ------------------------------------------- */
/* 旧: .abroad-read-box { border:#dcdcdc 1px solid; margin:30px auto 0;
       padding:25px 30px; max-width:1100px; } */
.studyAbroad .abroad-read-box {
  border: #dcdcdc 1px solid;
  margin: 30px auto 0;
  padding: 25px 30px;
  max-width: 1100px;
}
/* 移植元のリード文 <p> は margin 0 (実測)。テーマ既定の p 下マージン 16px が
   付くとボックス高が 108px → 124px に膨らむため打ち消す。 */
.studyAbroad .abroad-read-box p {
  margin: 0;
}

/* ---- 6. 本文ブロック ----------------------------------------------- */
/* 旧: .abroad-txt-box { margin:0 0 40px; } / :first-child { margin:80px 0 40px; } */
.studyAbroad .abroad-txt-box {
  margin: 0 0 40px;
}
.studyAbroad .abroad-txt-box:first-child {
  margin: 80px 0 40px;
}
/* 旧: .abroad-txt-box p { margin:0 0 20px; letter-spacing:0; text-align:justify; } */
.studyAbroad .abroad-txt-box p {
  margin: 0 0 20px;
  font-size: 16px; /* 本文 16px 指定（ユーザー指示 2026-09-26） */
  letter-spacing: 0;
  text-align: justify;
}
/* 旧: .abroad-txt-box p.name-space { text-indent:-96px; margin:0 0 0 96px; }
   dr.arima には未出現だが、兄弟ページ (全 6 本) で使われる可能性があるため移植。 */
.studyAbroad .abroad-txt-box p.name-space {
  text-indent: -96px;
  margin: 0 0 0 96px;
}

/* ---- 7. 回り込み写真 ----------------------------------------------- */
/* 旧: .abroad-txt-box .abroad-photo { width:320px; margin:5px 0 0 30px; } */
.studyAbroad .abroad-txt-box .abroad-photo {
  width: 320px;
  margin: 5px 0 0 30px;
}
.studyAbroad .abroad-txt-box .abroad-photo img {
  width: 100%;
  height: auto;
}
/* 旧: .abroad-txt-box .abroad-photo.right dd, .abroad-flex-box dd
       { font-size:12px; letter-spacing:0; } */
.studyAbroad .abroad-txt-box .abroad-photo.right dd,
.studyAbroad .abroad-flex-box dd {
  font-size: 12px;
  letter-spacing: 0;
}
/* 旧: ... dd + dt { margin:15px 0 0; } (1 つの dl に複数写真を積む場合の間隔) */
.studyAbroad .abroad-txt-box .abroad-photo.right dd + dt,
.studyAbroad .abroad-flex-box dd + dt {
  margin: 15px 0 0;
}

/* ---- 8. 見出し ----------------------------------------------------- */
/* 旧: .abroad-title { font-family:'Rufina','Hiragino Mincho ProN',serif;
       color:#1c2947; font-size:30px; margin:0 0 17px; position:relative; }
   Rufina の扱いは冒頭コメント参照。 */
.studyAbroad .abroad-title {
  font-family: "Hiragino Mincho ProN", "Noto Serif JP", serif;
  color: #1c2947;
  font-size: 30px;
  /* 移植元は line-height を指定せず body の 1.75 を継承し 52.5px になる。
     下の ::before は top:23px でその行ボックスの光学中心に合わせて置かれて
     いるため、line-height を変えると装飾線の位置がずれる。明示的に固定する。 */
  line-height: 1.75;
  /* 移植元は body の letter-spacing:1px を継承 (実測)。テーマの見出し既定は
     0.6px なので、字送りを移植元に合わせる。SP 側は移植元どおり 0。 */
  letter-spacing: 1px;
  margin: 0 0 17px;
  position: relative;
}
/* 旧: .abroad-title::before { content:""; position:absolute; display:block;
       width:40px; height:3px; background:#1c2947; top:23px; left:-50px; } */
.studyAbroad .abroad-title::before {
  content: "";
  position: absolute;
  display: block;
  width: 40px;
  height: 3px;
  background: #1c2947;
  top: 23px;
  left: -50px;
}

/* ---- 9. 写真グリッド ----------------------------------------------- */
/* 旧: .abroad-flex-box { display:flex; flex-wrap:wrap; }
       dl { width:23%; margin:0 1% 20px; } / .col3 dl { width:31.3%; } */
.studyAbroad .abroad-flex-box {
  display: flex;
  flex-wrap: wrap;
}
.studyAbroad .abroad-flex-box dl {
  width: 23%;
  margin: 0 1% 20px;
}
.studyAbroad .abroad-flex-box.col3 dl {
  width: 31.3%;
  margin: 0 1% 20px;
}
.studyAbroad .abroad-flex-box img {
  width: 100%;
  height: auto;
}

/* ---- 10. ライトボックス用バッジ ------------------------------------- */
/* 旧サイトは .abroad-photo a::after / .abroad-flex-box dt a::after で
   32x32 の img/about/ico_plus.png を右下に重ねていた。
   現行テーマは同じ役割を a.img-lightbox::after (SVG 虫眼鏡) で実装済みのため、
   画像アセットを持ち込まず style.css 19-6 節と同じ見た目を .studyAbroad に適用する。
   オーバーレイ本体 (.img-lightbox-overlay 等) はグローバル定義をそのまま使う。 */
.studyAbroad a.img-lightbox {
  position: relative;
  display: block;
  cursor: zoom-in;
}
.studyAbroad a.img-lightbox img {
  display: block;
  width: 100%;
  height: auto;
}
.studyAbroad a.img-lightbox::after {
  position: absolute;
  content: "";
  width: 28px;
  height: 28px;
  right: 8px;
  bottom: 8px;
  background: rgba(20, 20, 19, 0.7)
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2'><circle cx='11' cy='11' r='7'/><path d='M11 8v6M8 11h6M20 20l-3.5-3.5'/></svg>")
    center / 18px no-repeat;
  border-radius: 50%;
  pointer-events: none;
  transition: transform .15s ease, background-color .15s ease;
}
.studyAbroad a.img-lightbox:hover::after {
  transform: scale(1.08);
  background-color: rgba(217, 119, 87, 0.85);
}

/* =============================================================
 * SP — 旧サイト @media screen and (max-width:768px) の完全移植
 * ============================================================= */
@media screen and (max-width: 768px) {

  .studyAbroad__body {
    margin-bottom: 48px;
  }

  .studyAbroad__pageTitle {
    font-size: 22px;
    margin: 16px 0 4px;
  }

  /* 旧: .abroad-read-box { margin:4%; padding:4% 6%; width:92%;
         letter-spacing:0; text-align:justify; } */
  .studyAbroad .abroad-read-box {
    margin: 4%;
    padding: 4% 6%;
    width: 92%;
    letter-spacing: 0;
    text-align: justify;
    box-sizing: border-box; /* 旧サイトは box-sizing:border-box が全体適用済 */
  }

  /* 旧: .abroad-txt-box { margin:4%; } / :first-child { margin:8% 4% 4%; } */
  .studyAbroad .abroad-txt-box {
    margin: 4%;
  }
  .studyAbroad .abroad-txt-box:first-child {
    margin: 8% 4% 4%;
  }
  /* 旧: .abroad-txt-box p { margin:0 0 6%; } */
  .studyAbroad .abroad-txt-box p {
    margin: 0 0 6%;
    font-size: 16px; /* 本文 16px 指定（ユーザー指示 2026-09-26） */
  }

  /* 旧: .abroad-txt-box .abroad-photo { width:100%; margin:0 0 4%; }
     → 回り込み解除。旧サイトは width:100% で float が実質無効化されるが、
       明示的に float:none を与えて確実にスタックさせる。 */
  .studyAbroad .abroad-txt-box .abroad-photo {
    width: 100%;
    margin: 0 0 4%;
  }
  .studyAbroad .abroad-txt-box .abroad-photo.right {
    float: none;
  }
  /* 旧: .abroad-txt-box .abroad-photo.right dd { font-size:15px; letter-spacing:0;
         color:#999; line-height:1.25; margin:5px 0 0; } */
  .studyAbroad .abroad-txt-box .abroad-photo.right dd {
    font-size: 15px;
    letter-spacing: 0;
    color: #999;
    line-height: 1.25;
    margin: 5px 0 0;
  }

  /* 旧: .abroad-title { font-size:24px; margin:0 0 2%; line-height:1.25;
         letter-spacing:0; } / ::before { content:none; } */
  .studyAbroad .abroad-title {
    font-size: 24px;
    margin: 0 0 2%;
    line-height: 1.25;
    letter-spacing: 0;
  }
  .studyAbroad .abroad-title::before {
    content: none;
  }

  /* 旧: .abroad-flex-box dl { width:48%; margin:0 1% 20px; } */
  .studyAbroad .abroad-flex-box dl {
    width: 48%;
    margin: 0 1% 20px;
  }
  .studyAbroad .abroad-flex-box.col3 dl {
    width: 48%;
    margin: 0 1% 20px;
  }
}

/* =============================================================
 * 追補 — /recruit/ 配下 14 本移設に伴う未移植クラス
 *   (2026-09-26 / 旧 https://hama-ortho.jp/css/style.min.css から実測抽出)
 *
 * 追加系統は 2 つ:
 *   (A) abroad 系 13 本 — young.dr が使う .pc / .sp / .w100 / .btn-box / .pb30
 *   (B) women.dr 1 本   — .womenBox01 / .womenBox02 系統 (.abroad-* を使わない)
 *
 * いずれも旧サイトではグローバル定義だったため、本テーマへ漏らさないよう
 * 全て .studyAbroad 配下へスコープする (上部「スコープ方針」と同じ作法)。
 * 値は旧 CSS の実測値をそのまま (改変なし)。
 * ============================================================= */

/* ---- 11. PC / SP 出し分けユーティリティ ---------------------------- */
/* 旧: .pc { display:block; } / .sp { display:none; }
       @768: .pc { display:none; } / .sp { display:block; }
   本テーマに .pc / .sp の定義は無い (確認済) ため scope 内で新設する。 */
.studyAbroad .pc { display: block; }
.studyAbroad .sp { display: none; }

/* 旧: .w100 { width:100%; height:auto; } */
.studyAbroad .w100 {
  width: 100%;
  height: auto;
}

/* ---- 12. ボタンボックス (young.dr / 「相談や見学の申し込み」) -------- */
/* 旧: .btn-box { text-align:center; margin:50px auto 20px; }
       .btn-box a:hover { opacity:.8; }
       .btn-box .pc { display:inline-block; }
       .pb30 { padding-bottom:30px !important; } */
.studyAbroad .btn-box {
  text-align: center;
  margin: 50px auto 20px;
}
.studyAbroad .btn-box a:hover { opacity: .8; }
.studyAbroad .btn-box .pc { display: inline-block; }
.studyAbroad .pb30 { padding-bottom: 30px !important; }

/* ---- 13. .abroad-txt-box 直下の素の img (young.dr 末尾の集合写真) ---- */
/* 旧サイトは全体 reset で img{border:0} のみ。幅は .w100 が担うが、
   .w100 の付かない img が来ても本文幅を超えないよう保険をかける。 */
.studyAbroad .abroad-txt-box > img {
  max-width: 100%;
  height: auto;
}

/* =============================================================
 * (B) women.dr — 女性医師の支援と先輩の声
 *     旧 /doctor/women.dr/ 専用系統。.abroad-* とは独立。
 * ============================================================= */

/* 旧サイトは reset で ul{list-style:none} が全体に効いていた。
   本テーマにその reset は無いため、対象の ul のみ打ち消す。 */
.studyAbroad .flex01 {
  list-style: none;
  padding: 0;
  margin: 0;
}

/* ---- 14. womenBox01 (ポイント 5 枚カード) --------------------------- */
/* 旧: .womenBox01 { background:#f9f4ea; margin:30px 0 0; padding:0 0 25px; } */
.studyAbroad .womenBox01 {
  background: #f9f4ea;
  margin: 30px 0 0;
  padding: 0 0 25px;
}
/* 旧: .womenBox01 .ttl01 { text-align:center; height:175px; }
   旧サイトの reset は見出しの margin を全て 0 にしていた。本テーマの h3 既定
   (margin-bottom 0.6em = 9.36px) が残ると .womenBox01 全体が 598px → 607px に
   伸びるため打ち消す。中身は画像 1 枚なので font 指定は不要 (高さ固定)。 */
.studyAbroad .womenBox01 .ttl01 {
  text-align: center;
  height: 175px;
  margin: 0;
}
/* 旧: .womenBox01 .ttl01 img { margin:-40px 0 0 -445px; position:absolute; left:50%; } */
.studyAbroad .womenBox01 .ttl01 img {
  margin: -40px 0 0 -445px;
  position: absolute;
  left: 50%;
}
/* 旧: .womenBox01 .flex01 { display:flex; flex-wrap:wrap;
       justify-content:space-between; margin:-10px auto 0; } */
.studyAbroad .womenBox01 .flex01 {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  margin: -10px auto 0;
}
/* 旧: .womenBox01 dl { background:#fff; border-radius:8px;
       box-shadow:0 1px 1px rgba(0,0,0,.2); width:32%; margin:0 0 2%; } */
.studyAbroad .womenBox01 dl {
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 1px 1px rgba(0, 0, 0, .2);
  width: 32%;
  margin: 0 0 2%;
}
/* 旧: .womenBox01 dl dt { background:#baa188; color:#fff; border-radius:8px 8px 0 0;
       font-size:22px; font-weight:200; line-height:1.5; text-indent:-19px;
       padding:15px 0 15px 35px; } */
.studyAbroad .womenBox01 dl dt {
  background: #baa188;
  color: #fff;
  border-radius: 8px 8px 0 0;
  font-size: 22px;
  font-weight: 200;
  line-height: 1.5;
  text-indent: -19px;
  padding: 15px 0 15px 35px;
  margin: 0;
  /* 旧サイトは body の letter-spacing:1px を継承 (実測)。本テーマの既定は
     normal なので、折り返し位置を移植元に合わせるため明示する。 */
  letter-spacing: 1px;
}
/* 旧: .womenBox01 dl dt.lows { padding:31px 0 32px 35px; } */
.studyAbroad .womenBox01 dl dt.lows {
  padding: 31px 0 32px 35px;
}
/* 旧: .womenBox01 dl dd { padding:10px 20px 20px; letter-spacing:0; } */
.studyAbroad .womenBox01 dl dd {
  padding: 10px 20px 20px;
  letter-spacing: 0;
  margin: 0; /* ブラウザ既定 margin-left:40px の打ち消し (旧サイトは reset 済) */
}
/* 旧: .womenBox01 .btnBox { text-align:center; }
       .womenBox01 .btnBox a { display:block; padding:29px 0 0; }
       .womenBox01 .btnBox a:hover { opacity:.8; }
       .womenBox01 .btnBox img.pc { display:inline-block; } */
.studyAbroad .womenBox01 .btnBox { text-align: center; }
.studyAbroad .womenBox01 .btnBox a {
  display: block;
  padding: 29px 0 0;
}
.studyAbroad .womenBox01 .btnBox a:hover { opacity: .8; }
.studyAbroad .womenBox01 .btnBox img.pc { display: inline-block; }

/* ---- 15. womenBox02 (先輩医師 2 名の Q&A / 2 カラム) ----------------- */
/* 旧: .womenBox02 { margin:40px auto; } */
.studyAbroad .womenBox02 {
  margin: 40px auto;
  /* 旧サイトは body の letter-spacing:1px を継承 (実測)。本テーマの既定は
     normal で、字送りが詰まると Q&A の折り返し行数が減り 2 カラムの高さが
     移植元より 109px 短くなる。移植元と同じ行送りにするため明示する。
     (.abroad-title で採った対処と同じ。SP も旧サイトは 1px のまま) */
  letter-spacing: 1px;
}
/* 旧: .womenBox02 .ttl02 { background:url(/doctor/women.dr/img/ico_01.png) no-repeat 0 3px;
       padding:0 0 5px 190px; margin:0 0 10px -45px; line-height:1.5; }
   アイコンはテーマ同梱 (assets/img/recruit/women-dr/ico_01.webp) へ差し替え。
   本 CSS からの相対パスで解決するのでドメインが変わっても追従する。 */
.studyAbroad .womenBox02 .ttl02 {
  background: url("../img/recruit/women-dr/ico_01.webp") no-repeat 0 3px;
  padding: 0 0 5px 190px;
  margin: 0 0 10px -45px;
  line-height: 1.5;
  font-size: 16px; /* 旧サイトは reset の font:inherit で body 16px を継承 */
  font-weight: normal;
}
/* 旧: .womenBox02 .left, .womenBox02 .right { width:50%; }
       .womenBox02 .left { padding:0 47px 0 0; border-right:#eee7d9 1px solid; }
       .womenBox02 .right { padding:0 0 0 47px; } */
.studyAbroad .womenBox02 .left,
.studyAbroad .womenBox02 .right {
  width: 50%;
}
.studyAbroad .womenBox02 .left {
  padding: 0 47px 0 0;
  border-right: #eee7d9 1px solid;
}
.studyAbroad .womenBox02 .right {
  padding: 0 0 0 47px;
}
/* 旧: .womenBox02 .photo01 { border-radius:12px; } */
.studyAbroad .womenBox02 .photo01 {
  border-radius: 12px;
  max-width: 100%;
  height: auto;
}
/* 旧: .womenBox02 dl { margin:0 0 30px; } / :last-child { margin:0; } */
.studyAbroad .womenBox02 dl { margin: 0 0 30px; }
.studyAbroad .womenBox02 dl:last-child { margin: 0; }
/* 旧: .womenBox02 dt { border-bottom:#dcd0c3 1px dashed; padding:0 0 5px; }
       .womenBox02 dt::before { content:"Q"; color:#baa188; width:30px;
         display:inline-block; text-align:center; font-size:24px; } */
.studyAbroad .womenBox02 dt {
  border-bottom: #dcd0c3 1px dashed;
  padding: 0 0 5px;
  margin: 0;
}
.studyAbroad .womenBox02 dt::before {
  content: "Q";
  color: #baa188;
  width: 30px;
  display: inline-block;
  text-align: center;
  font-size: 24px;
}
/* 旧: .womenBox02 dd { text-indent:-30px; margin:0 0 0 30px; padding:5px 0 0;
         text-align:justify; }
       .womenBox02 dd::before { content:"A"; color:#f28f97; width:30px;
         display:inline-block; text-align:center; font-size:24px;
         text-indent:0; line-height:1.25; } */
.studyAbroad .womenBox02 dd {
  text-indent: -30px;
  margin: 0 0 0 30px;
  padding: 5px 0 0;
  text-align: justify;
}
.studyAbroad .womenBox02 dd::before {
  content: "A";
  color: #f28f97;
  width: 30px;
  display: inline-block;
  text-align: center;
  font-size: 24px;
  text-indent: 0;
  line-height: 1.25;
}

/* =============================================================
 * SP 追補 — 旧 @media screen and (max-width:768px) の完全移植
 * ============================================================= */
@media screen and (max-width: 768px) {

  /* 旧: .pc { display:none; } / .sp { display:block; } */
  .studyAbroad .pc { display: none; }
  .studyAbroad .sp { display: block; }

  /* 旧: .btn-box { margin:4%; } / .btn-box a img { width:100%; } */
  .studyAbroad .btn-box { margin: 4%; }
  .studyAbroad .btn-box a img { width: 100%; }

  /* ---- womenBox01 ---- */
  /* 旧: .womenBox01 { margin:0; padding:8%; } */
  .studyAbroad .womenBox01 {
    margin: 0;
    padding: 8%;
  }
  /* 旧: .womenBox01 .ttl01 { height:auto; }
         .womenBox01 .ttl01 img { margin:0 -4%; width:108%; height:auto; position:static; } */
  .studyAbroad .womenBox01 .ttl01 { height: auto; }
  .studyAbroad .womenBox01 .ttl01 img {
    margin: 0 -4%;
    width: 108%;
    height: auto;
    position: static;
  }
  /* 旧: .womenBox01 .flex01 { display:block; margin:4% 0 0; } */
  .studyAbroad .womenBox01 .flex01 {
    display: block;
    margin: 4% 0 0;
  }
  /* 旧: .womenBox01 dl, .womenBox02 .left, .womenBox02 .right
           { width:100%; float:none; }
         .womenBox01 dl { margin:0 0 6%; border-radius:4px; } */
  .studyAbroad .womenBox01 dl,
  .studyAbroad .womenBox02 .left,
  .studyAbroad .womenBox02 .right {
    width: 100%;
    float: none;
  }
  .studyAbroad .womenBox01 dl {
    margin: 0 0 6%;
    border-radius: 4px;
  }
  /* 旧: .womenBox01 dl dt { font-size:18px; padding:2% 2% 2% 30px;
           border-radius:4px 4px 0 0; text-indent:-17px; }
         .womenBox01 dl dt.lows { padding:2% 2% 2% 30px; } */
  .studyAbroad .womenBox01 dl dt {
    font-size: 18px;
    padding: 2% 2% 2% 30px;
    border-radius: 4px 4px 0 0;
    text-indent: -17px;
  }
  .studyAbroad .womenBox01 dl dt.lows {
    padding: 2% 2% 2% 30px;
  }
  /* 旧: .womenBox01 dl dd { padding:2% 6% 4%; } */
  .studyAbroad .womenBox01 dl dd {
    padding: 2% 6% 4%;
  }
  /* 旧: .womenBox01 .btnBox { margin:8% 0 0; } / img { width:100% }
         / img.pc { display:none } / a { display:block; padding:0 } */
  .studyAbroad .womenBox01 .btnBox { margin: 8% 0 0; }
  .studyAbroad .womenBox01 .btnBox img { width: 100%; }
  .studyAbroad .womenBox01 .btnBox img.pc { display: none; }
  .studyAbroad .womenBox01 .btnBox a {
    display: block;
    padding: 0;
  }

  /* ---- womenBox02 ---- */
  /* 旧: .womenBox02 { padding:8%; margin:auto; } */
  .studyAbroad .womenBox02 {
    padding: 8%;
    margin: auto;
  }
  /* 旧: .womenBox02 .left, .womenBox02 .right { padding:0; }
         .womenBox02 .left { border:none; border-bottom:#eee7d9 1px solid;
           padding:0 0 8%; margin:0 0 8%; } */
  .studyAbroad .womenBox02 .left,
  .studyAbroad .womenBox02 .right {
    padding: 0;
  }
  .studyAbroad .womenBox02 .left {
    border: none;
    border-bottom: #eee7d9 1px solid;
    padding: 0 0 8%;
    margin: 0 0 8%;
  }
  /* 旧: .womenBox02 .ttl02 { background:url(...) no-repeat 5% 5px;
           background-size:35%; padding:0 0 4% 46%; } */
  .studyAbroad .womenBox02 .ttl02 {
    background: url("../img/recruit/women-dr/ico_01.webp") no-repeat 5% 5px;
    background-size: 35%;
    padding: 0 0 4% 46%;
  }
  /* 旧: .womenBox02 .photo01, .womenBox02 dl { width:100%; height:auto; margin:0 0 4%; } */
  .studyAbroad .womenBox02 .photo01,
  .studyAbroad .womenBox02 dl {
    width: 100%;
    height: auto;
    margin: 0 0 4%;
  }
}

/* =============================================================
 * (C) /recruit/ 配下 index (一覧) ページ — 3 カラムカードグリッド
 *     2026-09-26 追補
 *
 * ■ 「デザイン踏襲」の解釈
 *   旧サイトの一覧ページ (https://hama-ortho.jp/doctor/) は実測の結果
 *   <div class="commingsoon"><p>Comming soon</p></div> のみで、踏襲できる
 *   一覧デザインは存在しなかった。よって踏襲元を **現行テーマのカード意匠**
 *   に取る。具体的には style.css 13 節 .voice-card / .voice-grid の値を
 *   そのまま写し (角丸 6px / 1px ボーダー / hover で translateY(-4px) +
 *   0 8px 20px rgba(30,42,50,.1) / 200ms / meta は --f-heading 600 大文字)、
 *   ブレークポイント 640px・1024px も .voice-grid と同一にしている。
 *
 * ■ なぜ .voice-card を直接使わず別クラスにしたか
 *   .voice-card は投稿タイプ voice のアーカイブ用でテーマ全体に効く。
 *   一覧ページ都合で微調整するたびにサイト全体へ波及するのを避けるため、
 *   値を写した専用クラスを .studyAbroad 配下に閉じて持つ。
 *   (本ファイルの「スコープ方針」= .studyAbroad 配下限定 と同じ作法)
 *
 * ■ サムネイルを切らない理由
 *   /recruit/ 配下の mv.webp は全点 1600x538 (women-dr のみ 1600x401) の
 *   横長コラージュで、複数の写真を横に並べた 1 枚絵になっている。
 *   .voice-card__image と同じ aspect-ratio:16/10 + object-fit:cover を
 *   かけると中央 1/3 だけが残り構図が分断される (advice は写真と写真の
 *   継ぎ目が出る)。よってカードのサムネイルは MV の実比率のまま無トリミングで
 *   使う。aspect-ratio は CLS 防止のため明示する。
 *
 * ■ 触らない範囲 (本ファイル冒頭と同じ)
 *   .l-mv / .container / パンくず / ヘッダー / フッター / 既存 .abroad-* /
 *   .womenBox* には一切手を入れていない。
 * ============================================================= */

/* ---- 16. 一覧グリッド --------------------------------------------- */
/* 旧 .inner と同じ 1100px 幅で中央寄せ。PC 3 列 → 1023px 以下 2 列 →
   639px 以下 1 列 (= style.css .voice-grid の 640/1024 と同じ折り返し点を
   max-width 方向で表現。本ファイルは max-width クエリで統一しているため)。 */
.studyAbroad .recruit-index-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  max-width: 1100px;
  margin: 40px auto 0;
  padding: 0;
  list-style: none;
}

@media screen and (max-width: 1023px) {
  .studyAbroad .recruit-index-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
  }
}

@media screen and (max-width: 639px) {
  .studyAbroad .recruit-index-grid {
    grid-template-columns: 1fr;
  }
}

/* SP のガター。本ファイルの他ブロック (.abroad-read-box / .abroad-txt-box)
   と同じ 4% を使い、一覧だけ左右の揃いがずれないようにする。 */
@media screen and (max-width: 768px) {
  .studyAbroad .recruit-index-grid {
    margin: 8% 4% 0;
    width: 92%;
    box-sizing: border-box;
  }
}

/* ---- 17. カード ---------------------------------------------------- */
/* 値は style.css 13 節 .voice-card の写し。 */
.studyAbroad .recruit-card {
  display: block;
  border-radius: 6px;
  overflow: hidden;
  background: var(--c-white, #fff);
  border: 1px solid var(--c-border, #d9e2ea);
  text-decoration: none;
  color: inherit;
  transition: transform 200ms, box-shadow 200ms;
}

.studyAbroad .recruit-card:hover,
.studyAbroad .recruit-card:focus-visible {
  transform: translateY(-4px);
  box-shadow: 0 8px 20px rgba(30, 42, 50, 0.1);
  color: inherit;
  opacity: 1;
}

/* 移動を伴う演出を切っている利用者には静止のまま hover 影だけ出す。 */
@media (prefers-reduced-motion: reduce) {
  .studyAbroad .recruit-card {
    transition: box-shadow 200ms;
  }
  .studyAbroad .recruit-card:hover,
  .studyAbroad .recruit-card:focus-visible {
    transform: none;
  }
}

/* サムネイル — 切り抜かない (冒頭コメント参照)。
   枠は MV の標準比 1600:538 に固定する。カードの高さが揃わないと同じ行の
   見出し位置が食い違うため、比率自体は全カード共通にする必要がある。
   ただし object-fit は cover ではなく **contain**。/recruit/ 配下 15 枚の MV は
   14 枚が 1600x538 でこの枠にちょうど収まり (レターボックス 0)、women-dr の
   1600x401 だけが上下に細い余白を持つ。cover にすると women-dr は左右 12.5%
   ずつ切れて「浜松医科大学整形外科医局は…」の文字と右端の医師が欠けるので、
   切るより余白を持たせるほうを採る。余白はカード背景と同じ白にして目立たせない。
   [recruit_card] は実ファイルから width / height も出力するので CLS も出ない。
   .studyAbroad img { vertical-align: bottom } が既に効いているので
   ベースライン分の隙間は出ない。 */
.studyAbroad .recruit-card__image {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1600 / 538;
  object-fit: contain;
  background: var(--c-white, #fff);
}

/* 旧 .abroad-photo 用の dl リセットは .abroad-* にしか掛かっていないため
   ここでは影響しない。カード本文は素の div。 */
.studyAbroad .recruit-card__body {
  padding: 16px 20px 20px;
}

/* .voice-card__meta の写し。 */
.studyAbroad .recruit-card__meta {
  font-size: 0.75rem;
  color: var(--c-text-mute, #4a5560);
  margin-bottom: 6px;
  letter-spacing: 0.08em;
  font-family: var(--f-heading, "Poppins", "Noto Serif JP", serif);
  font-weight: 600;
  text-transform: uppercase;
}

/* .voice-card__title の写し。h3 のテーマ既定マージンを打ち消す。 */
.studyAbroad .recruit-card__title {
  font-size: 1rem;
  font-weight: 700;
  color: var(--c-text, #1e2a32);
  margin: 0;
  line-height: 1.5;
  letter-spacing: 0;
}

/* 一覧でだけ使う 1 行説明。.voice-card には無い追加要素なので、本文
   (.abroad-txt-box p) と衝突しないよう専用クラスで独立させる。 */
.studyAbroad .recruit-card__desc {
  margin: 8px 0 0;
  font-size: 0.8125rem;
  line-height: 1.6;
  color: var(--c-text-mute, #4a5560);
  letter-spacing: 0;
  text-align: justify;
}