@charset "UTF-8";

/* ==========================================================================
   pages/language.css — /hangeul/・/chinese/ 専用CSS
   --------------------------------------------------------------------------
   役割：多言語ページ（簡易ヘッダー・簡易フッター）専用のレイアウト。
   共通ヘッダー・フッター（inc/header.html・inc/footer.html）は使わず、
   ページに直書きするため、ヘッダー・フッターの見た目もここで定義する。

   出自：現行 language.style.css（.header／.box-static／.box-address 等）の
   構造（外枠は実線・項目間は破線、本文61.5%：右カラム34.6%等）を参考にし、
   配色・変数・クラス名は新サイトの規約（p-lang__* ・ var(--color-*)）に
   作り直した。値のコピペ・hex直書きはしていない。

   - KV は core の .c-mv／.c-mv__inner／.c-mv__title を流用し、画像2枚
     （PC/SP）は .c-mv 内に <img> として配置、絶対配置で背景化している
     （.c-mv 自体が position:relative のため追加のラッパーは不要）
   - 2カラム（本文／Address）は core の .c-boxCol2 を流用し、列幅比率のみここで指定
   - SP用ブロックはベース定義の後ろ（本ファイル末尾）に置く
   ========================================================================== */

/* --- body上余白の打ち消し ---
   common.css の body{padding-top:var(--header-height)} は共通ヘッダー
  （.site-header{position:fixed}）が上に重なる前提の余白。
   本ページは簡易ヘッダー（position:fixedではない通常フロー）のため、
   このページに限り打ち消す（core側は変更しない）。 */
body.p-lang {
  padding-top: 0;
}

/* --- 簡易ヘッダー --- */
.p-lang__header {
  background-color: var(--color-main);
}
.p-lang__header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: 1200px;
  margin: 0 auto;
  padding: 10px var(--spacing-lg);
}
.p-lang__logo img {
  display: block;
  height: 72px;
  width: auto;
}
.p-lang__home a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 200px;
  padding: var(--spacing-sm) var(--spacing-md);
  border: 1px solid #fff;
  color: #fff;
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
}

/* --- KV画像（core の .c-mv に重ねる背景画像。PC/SPの出し分けは u-none_pc/u-none_sp） --- */
.p-lang__kv-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* --- 本文2カラムの列幅比率（現行 .l-col 61.5% / .l-col-side 34.6% を踏襲） --- */
.p-lang__row > .c-boxCol:first-child {
  flex: 1 1 62%;
}
.p-lang__side {
  flex: 0 1 34%;
}

/* --- 右カラムのウィジェット（現行 .l-widget の背景ボックスを core の変数で再現） --- */
.p-lang__widget {
  background-color: var(--color-sub);
  border-radius: var(--radius-lg);
  padding: var(--spacing-xl);
  margin-bottom: var(--spacing-lg);
}
.p-lang__widget-title {
  margin: 0 0 var(--spacing-lg);
  text-align: center;
  font-size: var(--fs-base);
  font-weight: var(--fw-bold);
}
.p-lang__widget .btn,
.p-lang__widget-btn .btn {
  width: 100%;
}
.p-lang__widget .btn + .btn {
  margin-top: var(--spacing-md);
}
.p-lang__widget-btn {
  margin: 0;
  padding: 0 var(--spacing-xl);
  text-align: center;
}

/* --- 日程・Address 共通の dl（項目名＝dt／内容＝dd） --- */
.p-lang__list {
  margin: 0 0 var(--spacing-xl);
}
.p-lang__list-item {
  padding: var(--spacing-md) 0;
}
.p-lang__list-item dt {
  margin: 0;
  color: var(--color-main);
  font-weight: var(--fw-bold);
}
.p-lang__list-item dd {
  margin: 0;
}

/* 日程用：外枠は実線、項目間は破線（現行 .box-static の実線／破線の使い分けを再現。
   現行は破線を画像（ico-dashed.png）で表現していたが、ここではborder-styleで組む） */
.p-lang__list--divided {
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
}
.p-lang__list--divided .p-lang__list-item + .p-lang__list-item {
  border-top: 1px dashed var(--color-border);
}

/* 見出し内の注記（/chinese/ の外国人留学生特別入試のみで使用。
   現行は該当h2内に style="color:red;margin-left:16px;font-size:16px" のインライン指定で
   実現していたが、色は u-textRed（既存）、間隔・文字サイズはこの新規クラスで再現する） */
.p-lang__notice {
  display: inline-block; /* 折り返す場合も注記全体をひとまとまりで次行へ送る（h2::afterの下線をまたがせない） */
  margin-left: var(--spacing-md);
  font-size: var(--fs-base);
}

/* --- Address（PCは2件を左右2カラム。core の .c-boxCol2 をそのまま使用し、
   SPは core 側の @media(max-width:768px){.c-boxCol2{flex-direction:column}} で
   自動的に縦積みに戻るため、pages側にSP用の分岐は不要） --- */
.p-lang__address {
  margin-top: var(--spacing-xl);
  padding-top: var(--spacing-lg);
}
.p-lang__address .c-boxCol2 > .p-lang__address-block {
  flex: 1;
  min-width: 0;
}
.p-lang__address-name {
  margin: 0 0 var(--spacing-md);
  font-weight: var(--fw-bold);
}

/* Address内の項目のみ、現行 .box-align の詰まった組版に合わせて上書きする
   （日程側の .p-lang__list-item はそのまま。ラベル幅・余白・文字サイズ・行間は
   現行 language.style.css の .box-align li / .ttl / body の実測値を踏襲） */
.p-lang__address .p-lang__list-item {
  display: flex;
  padding: 0;
  font-size: 12px; /* 現行：.box-align に個別指定なし＝body{font-size:12px}（≥768px）がそのまま適用されている */
  line-height: 1.8; /* 現行：body{line-height:1.8} がそのまま適用されている */
}
.p-lang__address .p-lang__list-item dt {
  flex: 0 0 60px; /* 現行 .ttl{width:60px} */
  margin-right: 5px; /* 現行 .ttl{margin-right:5px} */
  text-align: right;
}
.p-lang__address .p-lang__list-item dd {
  flex: 1;
  min-width: 0;
}

/* --- 簡易フッター --- */
.p-lang__footer {
  padding: var(--spacing-lg) 0;
  border-top: 1px solid var(--color-border);
}
.p-lang__copyright {
  margin: 0;
  text-align: center;
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
}

/* ==========================================================================
   SP（max-width: 768px）
   ========================================================================== */
@media (max-width: 768px) {
  .p-lang__header-inner {
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: var(--spacing-sm);
    padding: var(--spacing-sm) var(--spacing-md);
  }
  .p-lang__logo img {
    height: 68px;
  }
  .p-lang__home a {
    width: 160px;
    padding: var(--spacing-sm);
    font-size: var(--fs-sm);
  }

  /* .c-boxCol2 は core 側で SP は flex-direction:column になるため、
     ここでは列幅比率（flex-basis）だけを縦積み用にリセットする */
  .p-lang__row {
    align-items: stretch;
  }
  .p-lang__row > .c-boxCol:first-child,
  .p-lang__side {
    flex: 1 1 auto;
  }

  .p-lang__widget {
    padding: var(--spacing-lg);
  }
  .p-lang__widget-btn {
    padding: 0 var(--spacing-lg);
  }

  /* Address も同じ理由（flex-basis:0 のままだと縦積み時の高さ計算がおかしくなる）で
     列幅比率をリセットする */
  .p-lang__address .c-boxCol2 > .p-lang__address-block {
    flex: 1 1 auto;
  }

  .p-lang__footer {
    padding: var(--spacing-sm) 0;
  }
}