/*
 * 提供 CSS（/coding/）への追加・上書き分
 * 提供 CSS はデザイン更新で差し替わるため直接は編集せず、ここに書く
 */

/*
 * ファーマIT のロゴを 1 行版（/img/pharma_logo.svg）へ差し替え、CPHI・Medtec との間隔を広げる（2026-10-30 先方フィードバック No1・No2）
 *
 * 大きさ: ファーマIT の大文字の高さを、CPHI のロゴの「CPHI」の文字の高さにそろえる
 *   「CPHI」の文字 = CPHI のロゴの高さの 58%（文字の下端はロゴの下端）
 *   ファーマIT の大文字 = ロゴの高さの 87.6%（下 12.4% は g・p の下に伸びる部分）
 *   → ファーマIT のロゴの高さ = CPHI のロゴの高さ × 0.58 ÷ 0.876 ≒ CPHI のロゴの高さ × 0.662
 * 位置: 文字の下端（ベースライン）を「CPHI」の文字の下端にそろえる（g・p の下に伸びる分だけ下げる）
 */

/* 来場登録・ログイン等のヘッダー（CPHI | JAPAN と ファーマIT）。提供 CSS で下揃え（align-items: flex-end） */
.header__logo--cphi {
  gap: 2.8rem;
}
.header__logo--cphi .header__logo-pharma {
  inline-size: auto;
  block-size: 2.91rem; /* CPHI のロゴ 4.4rem × 0.662 */
  margin-block-end: -0.36rem; /* 2.91rem × 0.124 */
}
@media screen and (max-width: 768px) {
  /*
   * スマホ幅: ロゴとログインボタンを横に並べたまま、ロゴは CPHI の下にファーマIT を置く（共通ページのヘッダーと同じ考え方）
   * 提供 CSS は 420px 以下でログインボタンを下の段へ折り返すが、ロゴが縦に並ぶ分だけ横幅が空くため折り返さない
   */
  .header__inner--cphi {
    flex-wrap: nowrap;
    gap: 1rem;
    block-size: 6rem;
    padding-block: 0;
  }
  .header__logo--cphi {
    flex: 0 1 auto;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.4rem;
    min-inline-size: 0;
  }
  .header__logo--cphi .header__logo-pharma {
    /* 横幅に収まらない場合は縮める（既定は高さ 1.3rem 相当の幅） */
    inline-size: min(18.2rem, 100%);
    block-size: auto;
    margin-block-end: 0;
  }
}

/* マイページ・共通ページのヘッダー（CPHI | JAPAN と ファーマIT と Medtec）。中央揃えを下揃えにする */
.portal-brand {
  align-items: flex-end;
  gap: 2.4rem;
}
.portal-brand__pharma {
  inline-size: auto;
  block-size: 2.4rem; /* CPHI のロゴの高さ 3.6rem（幅 17.7rem）× 0.662 */
  margin-block-end: -0.3rem; /* 2.4rem × 0.124 */
}
@media screen and (max-width: 768px) {
  /* 横 1 列では収まらないため、ファーマIT は CPHI・Medtec の下の段へ回す */
  .portal-brand {
    flex-wrap: wrap;
    gap: 0.6rem 1.2rem;
  }
  .portal-brand__pharma {
    order: 1;
    block-size: 1.21rem; /* CPHI のロゴの高さ 1.83rem（幅 9rem）× 0.662 */
    margin-block-end: 0;
  }
}