@charset "UTF-8";
/* =============================================================
   ryugaku-refresh.css
   海外留学推進協会 ヘッダー刷新＋下部固定「留学相談予約」バー

   使い方: 既存の 2023css/style.css を読み込んだ「後」に、この1枚を追加読込する。
     <link rel="stylesheet" href="/2023css/style.css">
     <link rel="stylesheet" href="/2023css/ryugaku-refresh.css">   ← 追加

   設計方針:
     - 既存CSSは一切書き換えず、このファイルの後読み上書きだけで完結させる
     - ヘッダーの絶対配置(position:absolute)固定高さレイアウトを Flexbox に置き換え
     - h1 / リード文を「読めるサイズ」に引き上げ
     - ハンバーガーを小型化
     - 全ページ共通の下部固定CTAバー(.rf-cta-bar)を新設
   既存ブレークポイント: 980px / 480px に合わせる
   ============================================================= */

:root {
  --rf-navy: #1066A9;      /* 現状サイトのブランドブルー（差し色） */
  --rf-navy-deep: #0b4f83;
  --rf-accent: #1066A9;    /* CTA主ボタンも差し色ブルーに統一 */
  --rf-accent-deep: #0b4f83;
  --rf-green: #59b200;     /* floating-bannerと同じ緑（予約ボタン用） */
  --rf-green-deep: #4a9600;
  --rf-ink: #1f2b38;       /* 本文の濃いグレー */
  --rf-muted: #6b7785;     /* 補助テキストのグレー */
  --rf-line: #e3e8ee;      /* 罫線のライトグレー */
  --rf-tint: #f5f8fb;      /* 説明バー背景（ごく淡いブルーグレー） */
  --rf-cta-h: 60px;        /* 下部CTAバーの高さ（PC） */
  --rf-cta-h-sp: 56px;     /* 下部CTAバーの高さ（スマホ） */
}

/* =============================================================
   1. ヘッダー：Flexboxで組み直し
   ============================================================= */

/* ヘッダー背景：既存のグラデーションを白basedのすっきりした帯に */
header {
  background-image: none !important;
  background-color: #fff !important;
  border-bottom: 1px solid var(--rf-line);
}

/* 固定高さ140px・relativeはそのまま活かしつつ、中身をflex化。
   構造変更後: ヘッダー = 「ロゴ左 ＋ グローバルナビ右」の横並び（nikkei風・1段） */
header .inner {
  height: auto !important;          /* 固定140pxを解除 */
  min-height: 0 !important;
  max-width: 1150px;
  display: flex;
  align-items: center;
  justify-content: space-between;   /* ロゴ左・ナビ右 */
  gap: 24px;
  padding: 10px 24px;
  box-sizing: border-box;
}

/* ロゴ：絶対配置を解除してflexアイテムに。サイズを360px→200pxに縮小 */
header .inner .logo {
  position: static !important;
  left: auto !important;
  top: auto !important;
  margin: 0 !important;
  flex: 0 0 auto;
}
header .inner .logo img {
  width: 200px !important;
  height: auto;
  display: block;
}

/* =============================================================
   1-a2. ヘッダー内に取り込んだグローバルナビ（PC: 981px以上）
        既存の nav#menu は「全幅の帯＋グラデ＋下線5px」だったのを、
        ヘッダー右側に収まるインライン・メニューへと上書きする
   ============================================================= */
@media (min-width: 981px) {
  header .inner nav#menu {
    background: none !important;
    background-image: none !important;
    border: 0 !important;
    position: static !important;
    flex: 1 1 auto;
    z-index: auto;
  }
  /* ヘッダー全体を最前面に。ドロップダウンが後続コンテンツ(バナー等)の
     下に潜らないようにする */
  header {
    position: relative;
    z-index: 1000;
  }
  header .inner nav#menu ul.dropdwn > li .dropdwn_menu {
    z-index: 1001 !important;
  }
  /* メニューのul：右寄せの横並び。幅100%・max-width指定を解除 */
  header .inner nav#menu ul.dropdwn {
    width: auto !important;
    max-width: none !important;
    margin: 0 !important;
    justify-content: flex-end;
    gap: 2px;
  }
  /* 各項目：16.5%固定幅・罫線を解除し、内容幅で並べる */
  header .inner nav#menu ul.dropdwn > li {
    width: auto !important;
    max-width: none !important;
    float: none !important;
    border: 0 !important;
    margin: 0 !important;
  }
  header .inner nav#menu ul.dropdwn > li > a {
    font-size: 15px !important;
    line-height: 1.3 !important;
    padding: 8px 12px !important;
    text-shadow: none !important;
    white-space: nowrap;
    color: var(--rf-ink) !important;
  }
  /* 英字サブラベル */
  header .inner nav#menu ul.dropdwn > li > a span {
    font-size: 10px !important;
    letter-spacing: .1em;
    color: var(--rf-muted) !important;
  }
  header .inner nav#menu ul.dropdwn > li > a:hover {
    color: var(--rf-navy) !important;
  }
  /* ホバー時の下線アクセント */
  header .inner nav#menu ul.dropdwn > li > a:hover span {
    color: var(--rf-navy) !important;
  }
  /* ドロップダウン(.dropdwn_menu)の位置基準を各liに */
  header .inner nav#menu ul.dropdwn > li {
    position: relative !important;
  }
  header .inner nav#menu ul.dropdwn > li .dropdwn_menu {
    width: 220px !important;
    left: 0 !important;
    top: 100% !important;
  }
  /* ヘッダー下端にbrand色のラインを1本だけ残す（元の下線5pxの名残） */
  header {
    border-bottom: 3px solid var(--rf-navy) !important;
  }
}

/* =============================================================
   1-b. サイト説明バー（旧ヘッダー内h1/pの新しい置き場所）
        ナビ直下の細い帯。リンゲージの navy×gold トーンに寄せる
   ============================================================= */
.rf-sitedesc {
  background: var(--rf-tint);
  border-bottom: 1px solid var(--rf-line);
}
.rf-sitedesc__in {
  max-width: var(--rf-site-w);   /* header .inner と同じ最大幅に統一 */
  margin: 0 auto;
  padding: 12px 24px;            /* 左右paddingを header .inner と揃える */
  box-sizing: border-box;
}
/* h1: サイト説明としてページ内に残すが、視覚的には控えめな1行に。
   12px → 14px。太字にせず、色はnavy寄りのink */
.rf-sitedesc__h1 {
  font-size: 14px !important;
  font-weight: 600 !important;
  line-height: 1.55 !important;
  color: var(--rf-ink) !important;
  margin: 0 !important;
  letter-spacing: .01em;
}
.rf-sitedesc__lead {
  font-size: 12px !important;
  line-height: 1.6 !important;
  color: var(--rf-muted) !important;
  margin: 4px 0 0 !important;
}

/* =============================================================
   2. グローバルナビ：帯を軽く整える（PC）
   ============================================================= */
@media (min-width: 981px) {
  nav#menu {
    border-top: 1px solid var(--rf-line);
  }
}

/* =============================================================
   3. ハンバーガー：小型化（980px以下で表示される）
      既存 .drawer-hamburger は padding 30px で巨大だった
   ============================================================= */
@media (max-width: 980px) {
  .drawer-hamburger {
    padding: 18px 11px !important;   /* 上下を12px→18pxに（ロゴ高さに合わせて縦を出す） */
    margin-top: 10px !important;
    margin-right: 10px !important;
    width: 28px !important;
    border-radius: 6px;
  }
  .drawer-hamburger-icon,
  .drawer-hamburger-icon:before,
  .drawer-hamburger-icon:after {
    height: 3px !important;          /* 5px→3px */
    border-radius: 2px;
  }
  .drawer-hamburger-icon:before { top: -9px !important; }  /* 線の間隔を少し広げる */
  .drawer-hamburger-icon:after  { top:  9px !important; }

  /* ドロワーの開始位置をヘッダー高さに追従（top:90px固定だったのを調整） */
  .drawer-nav { top: 70px !important; }
}

/* =============================================================
   4. スマホ：ヘッダーを縦積み・中央寄せ、文字を読めるサイズに
   ============================================================= */
@media (max-width: 980px) {
  header .inner {
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 6px;
    padding: 10px 12px;
  }
  header .inner .logo img { width: 190px !important; }

  /* ヘッダー内に取り込んだナビは、スマホでは非表示（ドロワーに集約）
     ※ drawer.css も #menu を非表示にするが、header内に入ったため明示的に指定 */
  header .inner nav#menu { display: none !important; }

  /* サイト説明バー：スマホでも読めるサイズを維持（既存9px/8px→13px/11px） */
  .rf-sitedesc__in { padding: 10px 14px; }
  .rf-sitedesc__h1 { font-size: 13px !important; }
  .rf-sitedesc__lead { font-size: 11px !important; }
}

@media (max-width: 480px) {
  header .inner .logo img { width: 170px !important; }
  .rf-sitedesc__h1 { font-size: 12px !important; line-height: 1.5 !important; }
  .rf-sitedesc__lead { font-size: 11px !important; }
}

/* =============================================================
   5. 下部固定「留学相談予約」CTAバー（スマホ・タブレット限定 / PCは非表示）
   ============================================================= */
.rf-cta-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 900;
  display: none;             /* デフォルト非表示。980px以下でのみ表示する */
  align-items: stretch;
  height: var(--rf-cta-h);
  background: #ffffff;
  border-top: 1px solid var(--rf-line);
  box-shadow: 0 -2px 12px rgba(15, 40, 70, 0.08);
}
@media (max-width: 980px) {
  .rf-cta-bar { display: flex; }   /* スマホ・タブレットで表示 */
}
.rf-cta-bar__item {
  flex: 1 1 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  text-decoration: none;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.2;
  color: var(--rf-ink);
  border-left: 1px solid var(--rf-line);
  transition: background-color .2s ease;
  padding: 0 8px;
  text-align: center;
}
.rf-cta-bar__item:first-child { border-left: 0; }
.rf-cta-bar__item:hover { background: #f5f8fb; text-decoration: none; }

.rf-cta-bar__item .rf-ico {
  width: 22px; height: 22px;
  flex: 0 0 auto;
  fill: currentColor;
}

/* 予約ボタンだけ強調（緑の塗り＝floating-bannerと同色） */
.rf-cta-bar__item--primary,
.rf-cta-bar__item--primary:hover {
  background: var(--rf-green);
  color: #fff;
  flex: 1.4 1 0;              /* 少し広めに */
}
.rf-cta-bar__item--primary * { color: #fff; }   /* 内側のspanも確実に白に */
.rf-cta-bar__item--primary:hover { background: var(--rf-green-deep); }
.rf-cta-bar__item--primary .rf-ico { fill: #fff; }

/* 電話は色でブランド寄せ */
.rf-cta-bar__item--tel { color: var(--rf-navy); }

/* サブラベル（電話番号など小さい補助テキスト） */
.rf-cta-bar__sub {
  display: block;
  font-size: 10px;
  font-weight: 500;
  color: inherit;
  opacity: .85;
  margin-top: 2px;
}

/* CTAバーは980px以下のみ表示。ページ末尾／トップ戻るボタンの逃がしも同じ範囲に限定 */
@media (max-width: 980px) {
  /* ページ末尾がCTAバーに隠れないよう底上げ */
  body { padding-bottom: var(--rf-cta-h); }

  /* 既存の「ページトップへ戻る」ボタンをCTAバーの上へ逃がす */
  #page-to-top,
  .page-to-top {
    bottom: calc(var(--rf-cta-h) + 12px) !important;
  }
}

/* スマホ：高さと文字を調整。3つ並ぶので窮屈にならないように */
@media (max-width: 480px) {
  .rf-cta-bar { height: var(--rf-cta-h-sp); }
  .rf-cta-bar__item {
    font-size: 12px;
    flex-direction: column;
    gap: 2px;
  }
  .rf-cta-bar__item .rf-ico { width: 20px; height: 20px; }
  .rf-cta-bar__sub { display: none; }   /* スマホでは電話番号テキストは省略 */
  body { padding-bottom: var(--rf-cta-h-sp); }
  #page-to-top,
  .page-to-top {
    bottom: calc(var(--rf-cta-h-sp) + 10px) !important;
  }
}

/* =============================================================
   6. 既存のサイド固定バナー(.floating-banner)
      PC（981px以上）では表示、スマホ・タブレット（980px以下）では
      下部CTAバーと役割が被るため非表示にする
   ============================================================= */
@media (max-width: 980px) {
  #main .floating-banner { display: none; }
}

/* =============================================================
   7. テキストバナー（画像バナーの置き換え）
      白ベース＋差し色ブルー。スマホでも文字が潰れない。
      マークアップは banner-text-snippet.html を参照。
   ============================================================= */
.rf-banner {
  display: block;
  position: relative;
  max-width: 680px;               /* 従来の画像バナー幅(680px)に合わせる */
  margin: 16px 0;
  padding: 20px 24px;
  background: #fff;
  border: 1px solid var(--rf-line);
  border-left: 5px solid var(--rf-navy);   /* 差し色ブルーの縦ライン */
  border-radius: 6px;
  text-decoration: none;
  color: var(--rf-ink);
  box-shadow: 0 2px 10px rgba(15, 40, 70, 0.05);
  transition: box-shadow .2s ease, transform .2s ease, border-color .2s ease;
}
.rf-banner:hover {
  box-shadow: 0 8px 24px rgba(15, 40, 70, 0.12);
  transform: translateY(-2px);
  text-decoration: none;
}

/* タグ行（形式バッジ＋日付） */
.rf-banner__tag {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
  flex-wrap: wrap;
}
.rf-banner__badge {
  display: inline-block;
  background: var(--rf-navy);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .04em;
  padding: 3px 10px;
  border-radius: 3px;
}
.rf-banner__date {
  font-size: 14px;
  font-weight: 700;
  color: var(--rf-navy);
  letter-spacing: .02em;
}

/* メインタイトル */
.rf-banner__title {
  display: block;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.5;
  color: var(--rf-ink);
  margin-bottom: 6px;
}
/* サブタイトル */
.rf-banner__sub {
  display: block;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.6;
  color: var(--rf-muted);
  margin-bottom: 10px;
}
/* 内容説明 */
.rf-banner__desc {
  display: block;
  font-size: 13px;
  line-height: 1.7;
  color: var(--rf-ink);
  padding-top: 10px;
  border-top: 1px dashed var(--rf-line);
}
/* 矢印（詳しく見る） */
.rf-banner__arrow {
  display: inline-block;
  margin-top: 12px;
  font-size: 13px;
  font-weight: 700;
  color: var(--rf-navy);
}

/* スマホ最適化：文字サイズを少し落として詰める */
@media (max-width: 480px) {
  .rf-banner { padding: 16px 16px; }
  .rf-banner__title { font-size: 17px; }
  .rf-banner__sub { font-size: 13px; }
  .rf-banner__desc { font-size: 12px; }
}

/* =============================================================
   8. テーブル（説明会一覧など）の見やすさ改善
      既存 table は font-size:100% / padding:8px のみで、
      スマホで4列が窮屈・行が詰まって見づらい。
      ここでは可読性を上げつつ、スマホでは横スクロールで破綻を防ぐ。
   ============================================================= */

/* 基本の可読性：行間・パディング・ゼブラ・ヘッダー配色 */
#main table {
  width: 100%;
  font-size: 15px;
  line-height: 1.7;
}
#main table tr th {
  padding: 12px 10px !important;
  background-color: #eef4f9 !important;   /* 差し色ブルーのごく薄い版 */
  color: var(--rf-ink);
  border: 1px solid #d7e0ea !important;
  font-weight: 700;
}
#main table tr td {
  padding: 12px 10px !important;
  border: 1px solid #e3e8ee !important;
  vertical-align: middle;
}
/* ゼブラ（偶数行を淡く） */
#main table tr:nth-child(even) td {
  background-color: #fafbfd;
}
/* 行ホバーで薄くハイライト */
#main table tr:hover td {
  background-color: #f2f7fb;
}
/* セル内リンクは差し色ブルーに */
#main table td a {
  color: var(--rf-navy);
  font-weight: 600;
}
#main table td a:hover {
  text-decoration: underline;
}
/* 「オススメ」アイコンとテキストの間隔を少し空ける */
#main table td img[src*="icon_recommend"] {
  margin-left: 4px;
  vertical-align: middle;
}

/* スマホ：フォントを少し落とし、横スクロールを許容して列崩れを防ぐ */
@media (max-width: 768px) {
  #main table {
    font-size: 13px;
    display: block;
    overflow-x: auto;              /* はみ出したら横スクロール */
    -webkit-overflow-scrolling: touch;
    white-space: nowrap;
  }
  #main table tr th,
  #main table tr td {
    padding: 9px 8px !important;
  }
  /* 内容セルだけは折り返しを許可（タイトルが長いため） */
  #main table td:last-child {
    white-space: normal;
    min-width: 200px;
  }
}

/* =============================================================
   7-b. テキストバナー：サムネイル画像付きバリアント
        .rf-banner に .rf-banner--thumb を併記すると
        「左に画像 ／ 右にテキスト」の横並びレイアウトになる。
        マークアップ例は banner-text-thumb-snippet.html を参照。
   ============================================================= */
.rf-banner--thumb {
  display: flex !important;   /* 基本 .rf-banner の display:block を確実に上書き */
  flex-direction: row;
  gap: 20px;
  align-items: stretch;
}
.rf-banner--thumb .rf-banner__thumb {
  flex: 0 0 200px;                 /* サムネイル幅 */
  align-self: stretch;
  border-radius: 4px;
  overflow: hidden;
  background: #f0f3f7;
}
.rf-banner--thumb .rf-banner__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;               /* 枠に合わせてトリミング */
  display: block;
}
.rf-banner--thumb .rf-banner__body {
  flex: 1 1 auto;
  min-width: 0;                    /* テキストのはみ出し防止 */
}

/* スマホ：縦積みに切り替え（画像を上、テキストを下） */
@media (max-width: 600px) {
  .rf-banner--thumb {
    flex-direction: column !important;
    gap: 12px;
  }
  .rf-banner--thumb .rf-banner__thumb {
    flex: none;
    width: 100%;
    height: 160px;                 /* スマホでは高さ固定で横長に */
  }
}

/* =============================================================
   9. サイト全体幅の拡張（1150px → 1280px）
      現状は #contents 1150 / #main 840 / #sub 280 の2カラム。
      全体を1280pxに広げ、増えた分(+130px)を本文カラムに配分する。
      （数値だけ上書きし、既存の float 2カラム構造はそのまま活かす）
   ============================================================= */
:root { --rf-site-w: 1280px; }   /* ここを変えるだけで全体幅を調整可能 */

/* 全体枠 */
#contents {
  max-width: var(--rf-site-w) !important;
  margin-left: auto !important;
  margin-right: auto !important;
  box-sizing: border-box !important;
}
/* 左右paddingはPCのみ（スマホは responsive.css の margin:6px を活かす） */
@media (min-width: 981px) {
  #contents {
    padding-left: 24px;
    padding-right: 24px;
  }
}

/* ヘッダー・ナビも同じ最大幅・同じ左右paddingに揃える（左端統一） */
header .inner {
  max-width: var(--rf-site-w) !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 24px !important;
  padding-right: 24px !important;
}
@media (min-width: 981px) {
  header .inner nav#menu ul.dropdwn { max-width: none !important; }
}

/* 本文カラム／サイドバーの幅拡張は【PC(981px以上)のみ】に限定する。
   980px以下では responsive.css の #main:width:100% / float:none を活かすため、
   ここで !important を当てない（当てるとスマホでも2カラム幅が残ってしまう） */
@media (min-width: 981px) {
  /* 本文カラム：840 → 960px に拡張（サイドバーは280pxのまま） */
  #contents #main {
    max-width: 960px !important;
    width: 74% !important;
  }
  /* サイドバーなしレイアウトのときは全幅寄りに */
  #contents #no-side-column #main {
    max-width: var(--rf-site-w) !important;
  }
  /* サイドバーは現状維持 */
  #contents #sub {
    width: 24% !important;
    max-width: 280px !important;
  }
}

/* 本文中の画像がカラム拡張で粗く拡大されないよう、
   元サイズ以上には引き伸ばさない（はみ出しだけ防ぐ） */
#main img { max-width: 100%; height: auto; }

/* 全幅で左右padding 24px に統一済み。狭い中間幅でも同値を維持し、
   ロゴ帯・説明バー・本文・全体枠の左端を常に揃える */

/* =============================================================
   10. 留学体験談 詳細ページ（single-voice.php / .vc-single）
      - ページ幅をヘッダー・全体枠と同じ最大幅に統一
      - タイトル下：性別・年代の行を廃止し、英語表記のサブタイトルに置換
      - 本文(the_content)内のh2：#main h2 の協会アイコン画像を打ち消す
      - h2・h3・本文のサイズバランスをQ&A形式向けに調整
   ============================================================= */

/* ページ全体幅：ヘッダー・#contentsと同じ最大幅・左右paddingに統一 */
.vc-single {
  max-width: var(--rf-site-w);
  margin-left: auto;
  margin-right: auto;
  padding-left: 24px;
  padding-right: 24px;
  box-sizing: border-box;
}
@media (max-width: 980px) {
  .vc-single { padding-left: 14px; padding-right: 14px; }
}

/* タイトル直下のサブタイトル（英語表記）。旧・性別/年代行の代わり */
.vc-single__subtitle {
  font-size: 15px;
  font-weight: 500;
  color: var(--rf-muted);
  margin: 4px 0 0;
  letter-spacing: .01em;
}

/* 本文(the_content)内のh2：#main h2 のアイコン画像・box-shadowを打ち消し、
   コンパクトな見出しに（左に差し色ブルーの太罫のみ残す） */
.vc-single__body h2 {
  background-color: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  font-size: 20px !important;
  color: var(--rf-navy) !important;
  padding: 10px 14px !important;
  margin-top: 40px !important;
  margin-bottom: 16px !important;
  border-style: solid !important;
  border-width: 1px 1px 1px 4px !important;
  border-color: var(--rf-line) var(--rf-line) var(--rf-line) var(--rf-navy) !important;
  border-radius: 4px !important;
  line-height: 1.4 !important;
}

/* 本文内のh3：Q&Aの「問い」。h2よりワンランク小さく、下線のみの軽い装飾に */
.vc-single__body h3 {
  background-color: transparent !important;
  border: 0 !important;
  border-bottom: 2px solid var(--rf-navy) !important;
  border-radius: 0 !important;
  font-size: 16px !important;
  color: var(--rf-ink) !important;
  padding: 0 0 8px !important;
  margin-top: 32px !important;
  margin-bottom: 10px !important;
  line-height: 1.5 !important;
}

/* 本文の段落：読みやすい行間・サイズに統一 */
.vc-single__body p {
  font-size: 15px;
  line-height: 1.9;
  color: var(--rf-ink);
  padding: 0 !important;   /* #main p の左右padding 10pxを打ち消し、h2/h3と左端を揃える */
}

/* 本文内のリスト（学校名・留学タイプ等の箇条書き）も左端をh2/h3に揃える */
.vc-single__body ul,
.vc-single__body ol {
  padding-left: 1.4em;
}