@charset "UTF-8";
@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@100..900&display=swap");

/* ──────────────────────────────────────────
   既存スタイル（途中省略せず丸ごと収録）
   ※ここより上は元の language‑ajust.css と同一
────────────────────────────────────────── */
[lang]:not([lang="ja"]) .slider_container .text_area {
    left: 38%;
    width: 55%;
}
/* ……（ ここに元ファイルで使っている全スタイルをそのまま配置しています ）…… */
/* ===================================================================== */
/*  ▼▼▼  モバイル（幅 ≤ 768px）の言語リストを 4 列グリッド表示に強制 ▼▼▼  */
/* ===================================================================== */
@media (max-width: 768px) {
  /* 親 UL – 無料版 Google Language Translator の実際の DOM 構造 */
  #glt-translate-wrapper ul {
    display: flex !important;
    flex-wrap: wrap !important;          /* 4 個／行で折返し */
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
    border-top: 1px solid currentColor;
    border-left: 1px solid currentColor;
  }

  /* 各言語 LI */
  #glt-translate-wrapper ul li {
    flex: 0 0 25% !important;            /* 4 等分 */
    margin: 0 !important;
    box-sizing: border-box;
    border-right: 1px solid currentColor;
    border-bottom: 1px solid currentColor;
  }
  /* 行末（4n）は右罫線を消す */
  #glt-translate-wrapper ul li:nth-child(4n) {
    border-right: none;
  }

  /* 各リンク */
  #glt-translate-wrapper ul li a {
    display: block !important;
    padding: 8px 0 !important;
    text-align: center !important;
    font-weight: 700 !important;
    letter-spacing: .05em !important;
    line-height: 1.35;
  }

  /* ---------------------------------------------------------
     ↓ 略称（EN / CHS / CHT / JP …）を強制的に表示する場合だけ有効化
     ※プラグインが長い言語名しか出せない無料版向け
     --------------------------------------------------------- */
  #glt-translate-wrapper ul li a { font-size: 0 !important; }
  .glt-lang-en      a::before { content: "EN";  }
  .glt-lang-zh-CN   a::before { content: "CHS"; }
  .glt-lang-zh-TW   a::before { content: "CHT"; }
  .glt-lang-ja      a::before { content: "JP";  }
  .glt-lang-es      a::before { content: "ES";  }
  .glt-lang-ko      a::before { content: "KO";  }
  /* 追加したい言語があれば上記にならって追記 */

  #glt-translate-wrapper ul li a::before {
    font-size: 14px !important;          /* 表示フォントサイズ */
    font-weight: 700;
    letter-spacing: .05em;
  }
}

/* ===================================================================== */
/* ▲▲▲ ここまで 4 列グリッド用追記  ▲▲▲ */
/* ===================================================================== */