@charset "utf-8";
/* ==========================================================================
   愛知淑徳大学クリニック オウンドメディア「お役立ち情報」
   記事詳細ページ 追加スタイル v3

   前提：既存 /clinic/css/style.css の直後に読み込む
        （ヘッダー・フッター・heading01・パンくずは既存CSSのまま使用）

   設計方針：
     レイアウトとフォントサイズは「愛知淑徳大学 受験生サイト お知らせページ」
     （薄グレー地＋白カード／cms-p の見出し・表・注釈枠）の実装値に合わせ、
     配色だけをクリニックの基調色に置き換えている。
       大学 #004098 → クリニック #2f5597
       大学 #e9f1fb → クリニック #f0f6ff
       大学 #faf3e0 → クリニック #f9f1e5
       文字色は クリニック #523c3c
   ========================================================================== */

:root {
  --m-key: #2f5597;        /* クリニック基調色 */
  --m-key-hover: #119bf2;  /* クリニック リンクホバー */
  --m-key-pale: #f0f6ff;   /* 淡青（面） */
  --m-key-line: #c5d9f4;   /* 薄青（罫線） */
  --m-text: #523c3c;
  --m-gray: #a39b9b;
  --m-bg: #f3f3f3;         /* 大学お知らせページと同じ薄グレー */
  --m-line: #e6e6e5;       /* 大学と同じ罫線色 */
  --m-cream: #f9f1e5;      /* 注意 */
  --m-red: #b85042;        /* 重要 */
}

/* --------------------------------------------------------------------------
   1. ページ全体（薄グレー地）と白カード
   -------------------------------------------------------------------------- */
.mediaWrap {
  background-color: var(--m-bg);
  padding-top: 50px;
  padding-top: clamp(30px, 1.51515vw + 20.9px, 70px);
  padding-bottom: 80px;
  padding-bottom: clamp(50px, 3vw + 30px, 100px);
}
.mediaWrap_inner {
  width: 90%;
  max-width: 1120px;
  margin: 0 auto;
}
.mediaArticle {
  background-color: #fff;
  border-radius: 20px;
  padding: 50px 75px 60px;
  padding-top: clamp(25px, 1.89vw + 13.6px, 50px);
  padding-right: clamp(20px, 2.84vw + 20.4px, 75px);
  padding-bottom: clamp(35px, 2.5vw + 20px, 60px);
  padding-left: clamp(20px, 2.84vw + 20.4px, 75px);
  overflow: hidden;
}

/* --------------------------------------------------------------------------
   2. 記事ヘッダー（日付・カテゴリ・タイトル）
      サイズは大学 t-r-sm / t-r-xs / t-r-xl と同値
   -------------------------------------------------------------------------- */
.mediaArticle_head {
  padding-bottom: 35px;
  padding-bottom: clamp(20px, 1.5vw + 10px, 35px);
  border-bottom: 1px solid var(--m-line);
  margin-bottom: 40px;
  margin-bottom: clamp(25px, 1.8vw + 12px, 40px);
}
.mediaMeta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 20px;
  margin-bottom: 20px;
}
.mediaMeta_date {
  color: var(--m-key);
  font-size: clamp(12px, 0.22727vw + 10.63636px, 15px);
  font-family: "Roboto", sans-serif;
  letter-spacing: .04em;
}
.mediaMeta_cat {
  display: inline-block;
  padding: 4px 12px;
  background-color: var(--m-key);
  color: #fff;
  font-size: clamp(9px, 0.30303vw + 7.18182px, 13px);
  line-height: 1.6;
  letter-spacing: .06em;
}
.mediaMeta_update {
  color: var(--m-gray);
  font-size: clamp(12px, 0.22727vw + 10.63636px, 15px);
}
.mediaArticle_title {
  color: var(--m-key);
  font-weight: bold;
  font-size: clamp(20px, 0.75758vw + 15.45455px, 30px);
  line-height: 1.5;
}

/* --------------------------------------------------------------------------
   3. アイキャッチ画像（600×400 / 3:2）
   -------------------------------------------------------------------------- */
.mediaEyecatch {
  max-width: 600px;
  margin-right: auto;
  margin-left: auto;
  margin-bottom: 40px;
  margin-bottom: clamp(25px, 1.8vw + 12px, 40px);
}
.mediaEyecatch_img {
  display: block;
  width: 100%;
  max-width: 600px;
  aspect-ratio: 600 / 400;
  object-fit: cover;
  border-radius: 10px;
  background-color: var(--m-bg);
}
.mediaEyecatch_caption {
  margin-top: 10px;
  color: #676767;
  font-size: 1.2rem;
  line-height: 1.7;
  text-align: center;
}

/* --------------------------------------------------------------------------
   4. 本文（大学 cms-p のサイズ・余白・見出し装飾に準拠）
   -------------------------------------------------------------------------- */
.mediaBody {
  display: flex;
  flex-direction: column;
  gap: 3.5rem;
  gap: clamp(2.5rem, 0.07576vw + 2.04545px, 3.5rem);
  color: var(--m-text);
  font-size: clamp(1.5rem, 0.02273vw + 1.36364px, 1.8rem);
  line-height: 1.7;
}
/* 本文をラップした場合もプレビューと同じセクション間余白を維持する */
.mediaBody .js-clinic-body {
  display: flex;
  flex-direction: column;
  gap: inherit;
}
.mediaBody p {
  font-size: clamp(1.5rem, 0.02273vw + 1.36364px, 1.8rem);
  line-height: 1.7;
}
.mediaBody a { color: var(--m-key); text-decoration: underline; transition: color .2s; }
.mediaBody a:hover { color: var(--m-key-hover); text-decoration: none; }
.mediaBody strong { font-weight: bold; }

/* リード文 */
.mediaLead {
  color: #4e4e4e;
  font-size: clamp(1.5rem, 0.02273vw + 1.36364px, 1.8rem) !important;
  line-height: 1.9 !important;
}

/* 見出し */
.mediaBody h2 {
  clear: both;
  margin: 0;
  padding: .5em 0 .5em .75em;
  border-left: .3em solid var(--m-key);
  color: var(--m-text);
  font-weight: bold;
  font-size: 1.9rem;
  line-height: 1.3;
  -webkit-font-smoothing: antialiased;
}
.mediaBody h3 {
  clear: both;
  margin: 0;
  padding: .75em;
  border-left: .25em solid var(--m-key);
  background: var(--m-bg);
  font-weight: bold;
  font-size: 1.8rem;
  line-height: 1.3;
}
.mediaBody h4 {
  clear: both;
  margin: 0;
  padding: .5em 0 .5em .75em;
  border-bottom: 4px solid var(--m-key-line);
  font-weight: bold;
  font-size: 1.7rem;
  line-height: 1.3;
}
.mediaBody h5 {
  clear: both;
  margin: 0;
  padding: .5em .75em;
  background: var(--m-key-pale);
  font-weight: bold;
  font-size: 1.7rem;
  line-height: 1.3;
}
/* 固定ヘッダー分のアンカー位置補正 */
.mediaBody h2[id],
.mediaBody h3[id],
.mediaBody h4[id] { scroll-margin-top: 160px; }

/* リスト（大学 cms-p と同じ list-style ベース） */
.mediaBody ul,
.mediaBody ol { font-size: clamp(1.5rem, 0.02273vw + 1.36364px, 1.8rem); }
.mediaBody ul > li {
  margin: 0 0 .8rem 3rem;
  list-style-type: disc;
}
.mediaBody ol > li {
  margin: 0 0 .8rem 3rem;
  list-style-type: decimal;
}
.mediaBody ul > li::marker { color: var(--m-key); }
.mediaBody ol > li::marker { color: var(--m-key); font-weight: bold; }

/* 本文中の画像：アイキャッチと同じ 600×400（3:2）に統一 */
.mediaBody figure {
  margin: 0 auto;
  max-width: 600px;
  width: 100%;
}
.mediaBody figure img,
.mediaBody > img {
  display: block;
  width: 100%;
  max-width: 600px;
  margin: 0 auto;
  aspect-ratio: 600 / 400;
  object-fit: cover;
  border-radius: 6px;
  background-color: var(--m-bg);
}
.mediaBody figcaption {
  margin-top: .5em;
  color: #676767;
  font-size: 1.2rem;
  text-align: center;
}

/* 表（大学 cms-p table と同仕様） */
.mediaTable {
  width: 100%;
  border: 1px solid var(--m-line);
  border-collapse: collapse;
  font-size: clamp(1.4rem, 0.02273vw + 1.36364px, 1.6rem);
}
.mediaTable th,
.mediaTable td {
  padding: .75em 1em;
  border: 1px solid var(--m-line);
  text-align: left;
  vertical-align: top;
  line-height: 1.6;
}
.mediaTable th { background-color: var(--m-key-pale); font-weight: 600; }
.mediaTable td { background-color: #fff; }
.mediaTable_scroll { overflow-x: auto; }

/* 注釈・注意・重要（大学 .note / .caution / .important と同仕様） */
.mediaBox-note,
.mediaBox-caution,
.mediaBox-important {
  padding: 1.5em;
  border-radius: 0 .4em .4em 0;
}
.mediaBox-note {
  background: var(--m-key-pale);
  border: 1px solid var(--m-key-line);
  border-left: .4em solid var(--m-key);
}
.mediaBox-caution {
  background: var(--m-cream);
  border: 1px solid #ecdcc2;
  border-left: .4em solid #d19c0b;
}
.mediaBox-important {
  background: #fceeee;
  border: 1px solid #f0cbcb;
  border-left: .4em solid var(--m-red);
}
.mediaBox_title {
  margin-bottom: .5em;
  font-weight: bold;
  font-size: 1.7rem;
  line-height: 1.4;
}
.mediaBox-note .mediaBox_title { color: var(--m-key); }
.mediaBox-caution .mediaBox_title { color: #a5760a; }
.mediaBox-important .mediaBox_title { color: var(--m-red); }
.mediaBox_list > li { margin: 0 0 .5rem 2.2rem; list-style-type: disc; }
.mediaBox_list > li::marker { color: var(--m-key); }

/* 監修者 */
.mediaSupervisor {
  padding: 1.5em;
  background: var(--m-key-pale);
  border-left: .4em solid var(--m-key);
  border-radius: 0 .4em .4em 0;
}
.mediaSupervisor_chip {
  display: inline-block;
  margin-bottom: 10px;
  padding: 2px 12px;
  background: var(--m-key);
  color: #fff;
  font-size: 1.2rem;
  letter-spacing: .1em;
}
.mediaSupervisor_name {
  font-weight: bold;
  font-size: 1.8rem;
  line-height: 1.4;
}
.mediaSupervisor_name small {
  margin-left: 12px;
  font-weight: normal;
  font-size: 1.4rem;
}
.mediaSupervisor_dept {
  margin-top: 4px;
  color: var(--m-key);
  font-size: 1.4rem !important;
}
.mediaSupervisor_text { margin-top: 10px; font-size: 1.4rem !important; line-height: 1.8 !important; }

/* 目次 */
.mediaToc {
  padding: 30px;
  padding: clamp(20px, 1.2vw + 12px, 30px);
  background: var(--m-bg);
  border-radius: 10px;
}
.mediaToc_title {
  margin-bottom: 15px;
  padding-bottom: 12px;
  border-bottom: 1px solid #dcdcdc;
  color: var(--m-key);
  font-weight: bold;
  font-size: 1.7rem;
  text-align: center;
}
.mediaToc_list { counter-reset: mtoc; }
.mediaToc_list > li,
.mediaBody .mediaToc_list > li { margin: 0; list-style: none; }
.mediaToc_item { position: relative; padding-left: 2.4em; }
.mediaToc_item + .mediaToc_item { margin-top: 10px; }
.mediaToc_item::before {
  counter-increment: mtoc;
  content: counter(mtoc, decimal-leading-zero);
  position: absolute;
  top: .1em;
  left: 0;
  color: var(--m-key);
  font-weight: bold;
  font-size: 1.3rem;
  font-family: "Roboto", sans-serif;
}
.mediaToc_link {
  font-size: 1.6rem;
  line-height: 1.6;
  text-decoration: underline;
}
.mediaToc_sub { margin-top: 8px; }
.mediaToc_subItem {
  position: relative;
  margin: 0 0 4px 0 !important;
  padding-left: 1.2em;
  list-style: none !important;
  font-size: 1.4rem;
}
.mediaToc_subItem::before {
  position: absolute;
  top: .8em;
  left: 0;
  width: 10px;
  height: 1px;
  background: var(--m-key);
  content: "";
}

/* 参考にした情報 */
.mediaRef {
  padding: 1.5em;
  background: var(--m-bg);
  border-radius: .4em;
}
.mediaRef_title {
  margin-bottom: .5em;
  color: var(--m-key);
  font-weight: bold;
  font-size: 1.5rem;
}
.mediaRef_list > li {
  margin: 0 0 .3rem 0 !important;
  padding-left: 1.2em;
  position: relative;
  list-style: none !important;
  font-size: 1.3rem;
  color: #676767;
}
.mediaRef_list > li::before { position: absolute; left: 0; content: "―"; color: var(--m-gray); }

/* --------------------------------------------------------------------------
   5. ボタン（色付きピル型）
      形は大学 .btn-q.is-line、塗りはクリニック基調色
   -------------------------------------------------------------------------- */
.mediaBtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5em;
  min-width: 16em;
  padding: .9em 2.5em;
  border: 1px solid var(--m-key);
  border-radius: 300px;
  background: var(--m-key);
  color: #fff !important;
  font-weight: bold;
  font-size: clamp(15px, 0.07576vw + 14.54545px, 16px);
  line-height: 1.3;
  text-align: center;
  text-decoration: none !important;
  transition: background-color .3s, color .3s, border-color .3s;
}
.mediaBtn::after {
  width: .45em;
  height: .45em;
  border-top: 2px solid currentColor;
  border-right: 2px solid currentColor;
  transform: rotate(45deg);
  content: "";
}
.mediaBtn:hover,
.mediaBtn:focus-visible {
  background: #fff;
  color: var(--m-key) !important;
}
.mediaBtn-line {
  background: #fff;
  color: var(--m-key) !important;
}
.mediaBtn-line:hover,
.mediaBtn-line:focus-visible {
  background: var(--m-key);
  color: #fff !important;
}
.mediaBtnWrap { text-align: center; }

/* --------------------------------------------------------------------------
   6. 関連記事（白カード）
   -------------------------------------------------------------------------- */
.mediaRelated { margin-top: 60px; margin-top: clamp(30px, 2vw + 20px, 60px); }
.mediaRelated_title {
  margin-bottom: 20px;
  color: var(--m-key);
  font-weight: bold;
  font-size: clamp(17.5px, 0.56818vw + 14.09091px, 25px);
  text-align: center;
}
.mediaCardList {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.mediaCard {
  background: #fff;
  border-radius: 10px;
  overflow: hidden;
  transition: box-shadow .3s;
}
.mediaCard:hover { box-shadow: 0 6px 20px rgba(47, 85, 151, .12); }
.mediaCard_link { display: block; height: 100%; text-decoration: none; }
.mediaCard_imgArea { aspect-ratio: 600 / 400; background: var(--m-bg); overflow: hidden; }
.mediaCard_img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s; }
.mediaCard_link:hover .mediaCard_img { transform: scale(1.06); }
.mediaCard_body { padding: 16px 18px 22px; }
.mediaCard_date {
  color: var(--m-key);
  font-size: clamp(12px, 0.22727vw + 10.63636px, 15px);
  font-family: "Roboto", sans-serif;
}
.mediaCard_title {
  margin-top: 8px;
  color: var(--m-text);
  font-weight: bold;
  font-size: 1.6rem;
  line-height: 1.6;
}
.mediaCard_link:hover .mediaCard_title { color: var(--m-key); }
.mediaRelated_more { margin-top: 40px; margin-top: clamp(25px, 1.5vw + 15px, 40px); text-align: center; }

/* --------------------------------------------------------------------------
   7. レスポンシブ
   -------------------------------------------------------------------------- */
@media screen and (max-width: 1023px) {
  .mediaCardList { grid-template-columns: repeat(2, 1fr); }
}
@media screen and (max-width: 767px) {
  .mediaArticle { border-radius: 10px; }
  .mediaBody ul > li,
  .mediaBody ol > li { margin-left: 2rem; }
  .mediaTable { white-space: normal; }
  .mediaCardList { grid-template-columns: 1fr; }
  .mediaBtn { min-width: 0; width: 100%; }
  .mediaEyecatch_img { border-radius: 6px; }
}

/* --------------------------------------------------------------------------
   8. 監修者ボックス（丸型の顔写真つき）
   -------------------------------------------------------------------------- */
.mediaBody .mediaSupervisor_inner {
  display: flex;
  align-items: flex-start;
  gap: 20px;
}
/* 写真：1:1の比率ボックスで丸く切り抜く
   （.mediaBody figure img の 600/400 指定に負けないよう .mediaBody から指定） */
.mediaBody .mediaSupervisor_photo {
  position: relative;
  flex: 0 0 auto;
  width: 96px;
  margin: 0;
  padding: 0;
  border-radius: 50%;
  background-color: #fff;
  box-shadow: 0 0 0 3px #fff, 0 0 0 4px var(--m-key-line);
  overflow: hidden;
}
.mediaBody .mediaSupervisor_photo::before {
  display: block;
  padding-top: 100%;
  content: "";
}
.mediaBody .mediaSupervisor_photo img {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  margin: 0;
  border-radius: 0;
  aspect-ratio: auto;
  object-fit: cover;
  background-color: var(--m-bg);
}
.mediaBody .mediaSupervisor_body { flex: 1 1 auto; min-width: 0; }

/* --------------------------------------------------------------------------
   9. よくある質問（FAQ）
   -------------------------------------------------------------------------- */
.mediaFaq { border-top: 1px solid var(--m-line); }
.mediaFaq_item {
  padding: 1.4em 0;
  border-bottom: 1px solid var(--m-line);
}
.mediaBody .mediaFaq_q,
.mediaFaq_q {
  position: relative;
  clear: both;
  margin: 0;
  padding: 0 0 0 1.9em;
  border: 0;
  background: none;
  color: var(--m-key);
  font-weight: bold;
  font-size: 1.7rem;
  line-height: 1.5;
}
.mediaFaq_a {
  position: relative;
  margin-top: .8em;
  padding-left: 1.9em;
}
.mediaFaq_q::before,
.mediaFaq_a::before {
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.4em;
  height: 1.4em;
  border-radius: 50%;
  font-family: "Roboto", sans-serif;
  font-weight: bold;
  font-size: 1.4rem;
  line-height: 1;
}
.mediaFaq_q::before {
  background: var(--m-key);
  color: #fff;
  content: "Q";
}
.mediaFaq_a::before {
  background: var(--m-key-pale);
  border: 1px solid var(--m-key-line);
  color: var(--m-key);
  content: "A";
}
.mediaFaq_a > p:last-child { margin-bottom: 0; }

/* --------------------------------------------------------------------------
   10. クリニック誘導ブロック（電話発信つき）
   -------------------------------------------------------------------------- */
.mediaCta {
  padding: 1.5em;
  background: var(--m-key-pale);
  border: 1px solid var(--m-key-line);
  border-radius: .4em;
  text-align: center;
}
.mediaCta_lead {
  margin-bottom: 1em;
  color: var(--m-key);
  font-weight: bold;
  font-size: 1.7rem !important;
  line-height: 1.5;
}
.mediaCta_btns {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
}
.mediaCta_note {
  margin-top: 1em;
  color: #676767;
  font-size: 1.3rem !important;
  line-height: 1.7 !important;
}
.mediaBtn-tel { line-height: 1.2; }
.mediaBtn-tel::after { display: none; }
.mediaBtn_icon {
  flex: 0 0 auto;
  width: 1.1em;
  height: 1.1em;
}
.mediaBtn_label { font-size: .9em; }
.mediaBtn_num {
  font-family: "Roboto", sans-serif;
  font-size: 1.25em;
  letter-spacing: .04em;
}
.mediaTelLink {
  font-family: "Roboto", sans-serif;
  letter-spacing: .04em;
  white-space: nowrap;
}

/* --------------------------------------------------------------------------
   11. カテゴリ表示（記事ヘッダー・関連記事カード）
   -------------------------------------------------------------------------- */
a.mediaMeta_cat {
  text-decoration: none;
  transition: background-color .3s;
}
a.mediaMeta_cat:hover,
a.mediaMeta_cat:focus-visible { background-color: var(--m-key-hover); }
.mediaRelated_lead {
  margin-top: -10px;
  margin-bottom: 20px;
  color: #676767;
  font-size: 1.4rem;
  text-align: center;
}
.mediaRelated_catLink { color: var(--m-key); text-decoration: underline; }
.mediaRelated_catLink:hover { color: var(--m-key-hover); }
.mediaCard_meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 10px;
}
.mediaCard_cat {
  display: inline-block;
  padding: 1px 10px;
  background: var(--m-key-pale);
  border: 1px solid var(--m-key-line);
  color: var(--m-key);
  font-size: 1.2rem;
  line-height: 1.7;
}
.mediaRelated_all {
  margin-top: 12px;
  font-size: 1.4rem;
  text-align: center;
}
.mediaRelated_all a { color: var(--m-key); text-decoration: underline; }
.mediaRelated_all a:hover { color: var(--m-key-hover); }

/* --------------------------------------------------------------------------
   12. レスポンシブ（追加分）
   -------------------------------------------------------------------------- */
@media screen and (max-width: 767px) {
  .mediaBody .mediaSupervisor_inner { gap: 14px; }
  .mediaBody .mediaSupervisor_photo { width: 76px; }
  .mediaCta_btns { display: block; }
  .mediaCta_btns > .mediaBtn + .mediaBtn { margin-top: 12px; }
  .mediaBtn-tel {
    flex-wrap: wrap;
    padding-left: 1em;
    padding-right: 1em;
  }
}