@charset "UTF-8";

/* ==========================================================================
   カスタムスタイル（既存CSSとは分離して管理）
   - main.css / style.css をビルドし直さずに追記できるよう独立ファイル化
   ========================================================================== */

/* --------------------------------------------------------------------------
   ヘッダー：Bogo 多言語切り替え（JA / EN）
   -------------------------------------------------------------------------- */
.c-header__lang {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 20px 24px;
  font-family: "Lato", "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", "メイリオ", Meiryo, sans-serif;
  line-height: 1;
  white-space: nowrap;
  /* ナビ／ロゴと同じ半透明白ピルで枠囲み、ヒーロー上でも文字を読みやすくする */
  background-color: #ffffff75;
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
  border: 1px solid #fff;
  border-radius: 8px;
}

.c-header__lang__link {
  display: inline-block;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: #000;
  transition: color 0.3s ease-in-out;
}

/* 表示中の言語をプライマリカラーで強調 */
.c-header__lang__link.is-active {
  color: #3b82f6;
  pointer-events: none;
}

.c-header__lang__sep {
  display: inline-block;
  font-size: 14px;
  font-weight: 400;
  color: #000;
}

/* PC：ホバー時のカラー変化 */
@media only screen and (min-width: 769px) {
  .c-header__lang__link:hover {
    color: #3b82f6;
  }

  /* 中間幅（タブレット〜小型PC）でナビと文字サイズを揃える */
  @media (max-width: 1400px) {
    .c-header__lang {
      gap: 6px;
      padding: 20px 12px;
    }

    .c-header__lang__link {
      font-size: 14px;
    }
  }

  @media (max-width: 1030px) {
    .c-header__lang {
      padding: 20px 5px;
    }

    .c-header__lang__link {
      font-size: 12px;
    }
  }
}

/* SP：ドロワーメニュー内で全幅・中央寄せ */
@media only screen and (max-width: 768px) {
  .c-header__link-area {
    align-items: center;
  }

  /* SP：ドロワー内（白背景）では混色しないため、枠を外してテキスト表示に戻す */
  .c-header__lang {
    padding: 14px 20px;
    background-color: transparent;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    border: none;
    border-radius: 0;
  }

  .c-header__lang__link {
    font-size: 14px;
  }
}

/* --------------------------------------------------------------------------
   ヘッダー：リンクエリアの配置調整（PCのみ normal。SPは上記768px以下で center）
   -------------------------------------------------------------------------- */
@media only screen and (min-width: 769px) {
  .c-header__link-area {
    align-items: normal;
  }
}

/* gap:28px が効くPC幅でのみ、ナビ↔言語切替の間隔だけ半分(14px)にする */
@media only screen and (min-width: 1401px) {
  .c-header__link-area {
    gap: 0;
  }

  .c-header__lang {
    margin-left: 14px;
    margin-right: 28px;
  }
}