@charset "UTF-8";
/* =============================================================
 * case.css — 研究・症例記事テンプレート専用スタイル
 *
 * 移植元 : https://hama-ortho.jp/case/disclose-info/
 *          https://hama-ortho.jp/case/kotsubank/
 *          https://hama-ortho.jp/case/graduateschool/
 *          CSS は https://hama-ortho.jp/css/style.min.css?date=20170729
 *          (PC 既定 + @media screen and (max-width:768px)) から実測抽出。
 * 適用元 : page-case.php (main#primary.caseArticle)
 * 読込   : inc/case-article.php が is_page_template() で条件付き enqueue
 *
 * ■ なぜ study-abroad.css に相乗りしないのか
 *   旧サイトの /case/ 配下は .abroad-* とは別のクラス族
 *   (.intro-area / .txt-area / .txt-box / .photo-box / .box / .txt /
 *    .clm0 / .clm1 / .read-box / .firstBox / .min-width) を使う。
 *   study-abroad.css は .studyAbroad スコープで .inner / .left / .right /
 *   .cf を既に定義しており、同じスコープへ別族を足すと /recruit/ 配下
 *   14 ページの計算値に影響しうる。回帰ゼロを最優先し、
 *   ファイル・スコープ・テンプレート・enqueue をすべて分離した。
 *   (study-abroad.css / page-study-abroad.php / inc/study-abroad.php は
 *    本移設で一切変更していない)
 *
 * ■ スコープ方針
 *   旧サイトは .inner / .left / .right / .cf / .box / .txt を
 *   グローバルユーティリティとして定義していた。本テーマにこれらの
 *   グローバル定義は無く、足すとサイト全体へ漏れる。
 *   よって全セレクタを .caseArticle 配下に限定する。
 *   クラス名は旧サイトのまま維持する (貼り付け HTML を書き換えないため)。
 *
 * ■ 触らない範囲 (style.css に既存。ここでは絶対に再定義しない)
 *     .l-mv / .container / パンくず / ヘッダー / フッター
 *     .img-lightbox-overlay / .img-lightbox-img / .img-lightbox-close
 *
 * ■ ブレークポイント
 *   旧サイト = max-width:768px。study-abroad.css と同じ 768px を踏襲。
 *
 * ■ フォント
 *   旧 h3 は font-family:'Rufina','Hiragino Mincho ProN',serif。
 *   Rufina は Latin のみで、実際の h3 はすべて日本語のため描画に使われない。
 *   study-abroad.css と同じ判断で Rufina は読み込まない。
 * ============================================================= */

/* ---- 1. 本文ラッパ ------------------------------------------------ */
/* .container を被せない。旧サイトどおり .inner が自力でセンタリングし、
   SP では左右 % パディングがガターを作る。.container を重ねると
   SP でガターが二重になる (page-study-abroad.php と同じ判断)。 */
.caseArticle__body {
  margin-bottom: 80px;
}

/* 旧: .bread + .intro-area { margin:50px 0 0; }
   新テーマはパンくずと本文の間に h1 が入るため、本文先頭の
   .intro-area に同じ上マージンを与える。 */
.caseArticle__body > .intro-area:first-child {
  margin: 50px 0 0;
}

/* ---- 2. ページタイトル -------------------------------------------- */
/* 旧サイトは .mt > .inner > h2。現行の下層ページ作法
   (page-study-abroad.php の h1.studyAbroad__pageTitle) に合わせる。 */
.caseArticle__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. 旧グローバルユーティリティ (scope 化) ---------------------- */
/* 旧: .inner { max-width:1100px; margin:auto; } */
.caseArticle .inner {
  max-width: 1100px;
  margin: auto;
}
/* 旧: .cf::after { clear:both; content:"."; display:block; height:0; visibility:hidden; } */
.caseArticle .cf::after {
  clear: both;
  content: ".";
  display: block;
  height: 0;
  visibility: hidden;
}
.caseArticle .left  { float: left; }
.caseArticle .right { float: right; }
.caseArticle .pt30  { padding-top: 30px !important; }
.caseArticle .pt50  { padding-top: 50px !important; }
.caseArticle .mt0   { margin-top: 0 !important; }

/* ---- 4. 本文タイポグラフィ ---------------------------------------- */
/* 旧 body: font-size:16px / line-height:1.75 / letter-spacing:1px /
   color:#1c2947。本テーマの style.css は別の本文指定を持つため、
   旧サイトの見えかたを .caseArticle 配下だけで再現する。 */
.caseArticle .intro-area {
  font-size: 16px;
  line-height: 1.75;
  letter-spacing: 1px;
  color: #1c2947;
}
.caseArticle .intro-area .txt {
  text-align: justify;
}
.caseArticle .intro-area a {
  color: #1c2947;
}
/* 旧 <font size="2" color="#808080"> の置き換え。
   size="2" のブラウザ実測値は 13px (Chromium / 基準 16px)。 */
.caseArticle .intro-area .fig-note {
  font-size: 13px;
  color: #808080;
}
.caseArticle .intro-area .center {
  text-align: center;
}

/* ---- 5. 見出し ---------------------------------------------------- */
.caseArticle .intro-area .txt-box h3 {
  font-family: var(--f-heading-serif, "Hiragino Mincho ProN", serif);
  font-size: 40px;
  line-height: 1.75;
  font-weight: normal;
}

/* ---- 6. .txt-area (2 カラムの器) ---------------------------------- */
.caseArticle .intro-area .txt-area {
  background: #f3f4f6;
  margin: 0 0 50px;
}
.caseArticle .intro-area .txt-area:last-child {
  margin: 0;
}
.caseArticle .intro-area .txt-area .txt-box {
  width: 50%;
}
.caseArticle .intro-area .txt-area .photo-box {
  width: 50%;
  padding: 100px 0;
}
.caseArticle .intro-area .txt-area .txt-box .box {
  max-width: 550px;
  padding: 100px 40px;
}
.caseArticle .intro-area .txt-area .txt-box.left .box {
  float: right;
  padding: 100px 40px 100px 0;
}
.caseArticle .intro-area .txt-area .txt-box.right .box {
  padding: 100px 0 100px 40px;
}
.caseArticle .intro-area .txt-area .photo-box.right,
.caseArticle .intro-area .txt-area .txt-box.right {
  float: right;
}
.caseArticle .intro-area .txt-area .photo-box.left,
.caseArticle .intro-area .txt-area .txt-box.left {
  float: left;
}
.caseArticle .intro-area .txt-area .txt-box.list {
  padding: 100px 0;
}

/* ---- 7. .clm0 / .clm1 (カラム数の切り替え) ------------------------ */
.caseArticle .intro-area .txt-area.clm1 .txt-box  { width: 65%; }
.caseArticle .intro-area .txt-area.clm1 .photo-box { width: 35%; }
.caseArticle .intro-area .txt-area.clm1 .txt-box .box,
.caseArticle .intro-area .txt-area.clm1 div dl {
  max-width: 100%;
}
.caseArticle .intro-area .txt-area.clm0 .txt-box  { width: 100%; }
.caseArticle .intro-area .txt-area.clm0 .txt-box .box {
  max-width: 100%;
  padding: 100px 0 0;
}
.caseArticle .intro-area .txt-area.clm0 .photo-box {
  width: 100%;
  padding: 40px 0 100px;
  display: flex;
}
.caseArticle .intro-area .txt-area.clm0 .photo-box.even dl { width: 33.3%; }
.caseArticle .intro-area .txt-area.clm0 .photo-box.min-width { padding-right: 250px; }
.caseArticle .intro-area .txt-area.clm0 .photo-box dl { padding: 0 10px; }

/* ---- 8. .read-box / .firstBox (リード文ブロック) ------------------ */
.caseArticle .intro-area .txt-area.clm0.read-box { margin: 0; }
.caseArticle .intro-area .txt-area.clm0.read-box + .txt-area .box { padding: 30px 0 0; }
.caseArticle .intro-area .txt-area.firstBox .txt-box { padding: 100px 0 0; }
.caseArticle .intro-area .txt-area.firstBox .txt-box .box { padding: 30px 0 0; }

/* ---- 9. 写真 ------------------------------------------------------ */
.caseArticle .intro-area .txt-area .photo-box img {
  width: 100%;
  height: auto;
  position: relative;
}
.caseArticle .intro-area .txt-area div dl { margin: 0 0 15px; }
.caseArticle .intro-area .txt-area .photo-box dt,
.caseArticle .intro-area .txt-area .photo-box dd {
  font-size: 12px;
  line-height: 1.25;
  padding: 0 0 5px;
}

/* ---- 10. 番号付きリスト ------------------------------------------- */
.caseArticle .intro-area .number { list-style: decimal; }
.caseArticle .intro-area .number li {
  margin: 0 0 0 30px;
  padding: 7px 0 7px 10px;
}

/* ---- 11. ライトボックス用バッジ ----------------------------------- */
/* 旧サイトは .intro-area .txt-area .photo-box a::after で
   32x32 の img/about/ico_plus.png を右下に重ねていた。
   study-abroad.css 10 節と同じ判断で、画像アセットを持ち込まず
   現行テーマの a.img-lightbox::after (SVG 虫眼鏡) を使う。
   オーバーレイ本体はグローバル定義 (style.css 19-6 節) をそのまま使う。 */
.caseArticle a.img-lightbox {
  position: relative;
  display: block;
  cursor: zoom-in;
}
/* display は指定しない。旧サイトの <a rel="lightbox2"><img> は inline のままで、
   img{vertical-align:bottom} により余白が出ない。block 化すると行ボックスが
   消えて図版下の余白が旧サイトと 1〜3px ずれる (実測で確認)。 */
.caseArticle a.img-lightbox img {
  width: 100%;
  height: auto;
}
.caseArticle 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;
}
.caseArticle a.img-lightbox:hover::after {
  transform: scale(1.08);
  background-color: rgba(217, 119, 87, 0.85);
}

/* ---- 12. PDF / 外部リンク ----------------------------------------- */
/* 旧サイトに専用スタイルは無く素の <a> だった。下線だけ明示して
   本文中のリンクと分かるようにする (本文の a 色は 4 節で旧サイト準拠)。 */
.caseArticle .intro-area .txt a {
  text-decoration: underline;
}
.caseArticle .intro-area .txt a:hover {
  text-decoration: none;
}

/* ---- 13. /research/ 一覧 (中間ページ) ----------------------------- */
/* 旧サイトに対応ページが無いため新規。3 本の子ページへのリンク一覧。 */
.caseArticle .case-linkList {
  list-style: none;
  max-width: 1100px;
  margin: 50px auto 0;
  padding: 0;
}
.caseArticle .case-linkList li + li { margin-top: 16px; }
.caseArticle .case-linkList a {
  display: block;
  padding: 24px 56px 24px 24px;
  border: 1px solid #dcdfe6;
  background: #f3f4f6;
  color: #1c2947;
  text-decoration: none;
  position: relative;
  transition: background-color .15s ease, border-color .15s ease;
}
.caseArticle .case-linkList a::after {
  content: "";
  position: absolute;
  right: 24px;
  top: 50%;
  width: 8px;
  height: 8px;
  margin-top: -4px;
  border-top: 1px solid #1c2947;
  border-right: 1px solid #1c2947;
  transform: rotate(45deg);
}
.caseArticle .case-linkList a:hover {
  background: #e8eaf0;
  border-color: #1c2947;
}
.caseArticle .case-linkList .case-linkList__title {
  font-size: 18px;
  line-height: 1.5;
}
.caseArticle .case-linkList .case-linkList__desc {
  font-size: 14px;
  line-height: 1.6;
  color: #5a6478;
  margin-top: 6px;
}

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

  .caseArticle .pt50  { padding-top: 4% !important; }
  .caseArticle .pb0-sp { padding-bottom: 0 !important; }

  .caseArticle__pageTitle { font-size: 22px; }

  /* 旧: .intro-area .txt-area .txt-box { width:100%; height:auto; float:none; } */
  .caseArticle .intro-area .txt-area .txt-box,
  .caseArticle .intro-area .txt-area .txt-box .box {
    width: 100%;
    height: auto;
    float: none;
  }
  .caseArticle .intro-area .txt-area .txt-box.left .box,
  .caseArticle .intro-area .txt-area .photo-box.right,
  .caseArticle .intro-area .txt-area .txt-box.right,
  .caseArticle .intro-area .txt-area .photo-box.left,
  .caseArticle .intro-area .txt-area .txt-box.left {
    float: none;
  }

  .caseArticle .intro-area .txt-box h3 { font-size: 24px; }

  .caseArticle .intro-area .txt-area { margin: 0; }
  .caseArticle .intro-area .txt-area.firstBox .txt-box { padding: 8% 0 0; }
  .caseArticle .intro-area .txt-area.firstBox .txt-box h3 { padding: 0 4%; }

  .caseArticle .intro-area .txt-area .txt-box .box,
  .caseArticle .intro-area .txt-area .txt-box.left .box,
  .caseArticle .intro-area .txt-area .txt-box.right .box,
  .caseArticle .intro-area .txt-area .photo-box,
  .caseArticle .intro-area .txt-area.clm0 .txt-box .box,
  .caseArticle .intro-area .txt-area.clm0 .photo-box,
  .caseArticle .intro-area .txt-area.clm0.read-box + .txt-area .box {
    width: 100%;
    max-width: 100%;
    padding: 4% 8% 12%;
  }
  .caseArticle .intro-area .txt-area.clm0 .photo-box.min-width { padding-right: 8%; }
  .caseArticle .intro-area .txt-area.clm0 .photo-box {
    flex-wrap: wrap;
    display: flex;
    justify-content: space-between;
  }
  .caseArticle .intro-area .txt-area.clm0 .photo-box dl,
  .caseArticle .intro-area .txt-area.clm0 .photo-box.even dl { width: 50%; }
  .caseArticle .intro-area .txt-area.clm1 .txt-box,
  .caseArticle .intro-area .txt-area.clm0 .photo-box dl.clm1,
  .caseArticle .intro-area .txt-area.clm1 .photo-box { width: 100%; }

  .caseArticle .intro-area .txt-area .txt-box.list { padding: 0 8% 8%; }

  .caseArticle__body > .intro-area:first-child { margin: 0; }

  .caseArticle .case-linkList { margin: 8% 4% 0; }
  .caseArticle .case-linkList a { padding: 16px 44px 16px 16px; }
}