/* 英語は日本語の字間設定が不要なためリセット */
* {
  letter-spacing: 0 !important;
}

/* ===== ヘッダー（構造セレクタ）=====
   日本語サイトの再公開で .symbol-1__sd-N クラスが _cN に置き換わったため、
   ヘッダーは「header > 直下の div」の形で当てる。
   NAVROW = header > div:has(> div > a)（ナビ全体+Members' Menu）
   NAVGRP = NAVROW > div:first-child（NEWS/LABO/LISTEN/KNITTERESTING/KNITPEDIA）
   ハンバーガー = header > div:has(> button) */
header#home { justify-content: flex-start !important; }
header#home > div:has(> div > a) { margin-left: auto !important; }
header#home > div:has(> button) { margin-left: 28px !important; }

@media (min-width: 768px) and (max-width: 1279px) {
  header#home > a:first-child { margin-right: 48px !important; flex-shrink: 0 !important; }
  header#home > div:has(> div > a) { gap: 28px !important; flex-shrink: 0 !important; }
  header#home > div:has(> div > a) > div:first-child { gap: 22px !important; flex-shrink: 0 !important; }
}
@media (min-width: 768px) and (max-width: 999px) {
  header#home > a:first-child { margin-right: 24px !important; }
  header#home > div:has(> div > a),
  header#home > div:has(> div > a) > div:first-child { gap: 16px !important; }
}

/* ハンバーガーメニュー(.modal-container)内、「MEMBER MENU」見出し(p)と
   「Subscription Information」丸ボタン(a)が同じ行(flex-direction:row;
   justify-content:space-between)に収まる設計だが、英語だと両方とも
   日本語より長くなり横幅を超えて重なってしまう。縦積みに変更 */
.modal-container div:has(> p + a:last-child) {
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 12px !important;
  height: auto !important;
}

/* ナビのホバー説明：白い吹き出し（角丸＋上向き三角）・左揃え */
header#home > div:has(> div > a),
header#home > div:has(> div > a) > div:first-child,
header#home > div:has(> div > a) > div:first-child > a { overflow: visible !important; }
header#home > div:has(> div > a) > div:first-child > a > div:nth-child(2) {
  top: calc(100% + 12px) !important;
  bottom: auto !important;
  left: 0 !important;
  height: auto !important;
  background: #fff !important;
  padding: 10px 16px !important;
  border-radius: 10px !important;
  box-shadow: 0 6px 22px rgba(0, 0, 0, 0.18) !important;
  z-index: 100 !important;
  min-width: 200px !important;
  max-width: 320px !important;
  overflow: visible !important;
}
header#home > div:has(> div > a) > div:first-child > a > div:nth-child(2) > * {
  height: auto !important;
  min-height: 0 !important;
}
header#home > div:has(> div > a) > div:first-child > a:hover::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-top: 5px;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 7px solid transparent;
  border-right: 7px solid transparent;
  border-bottom: 7px solid #fff;
  filter: drop-shadow(0 -2px 1px rgba(0, 0, 0, 0.06));
  z-index: 101;
  pointer-events: none;
}
header#home > div:has(> div > a) > div:first-child > a > div:nth-child(2) p {
  text-align: left !important;
  color: #333 !important;
  font-size: 13px !important;
  line-height: 1.55 !important;
}
header#home > div:has(> div > a) > div:first-child > a:hover > div:first-child { opacity: 1 !important; }
header#home > div:has(> div > a) > div:first-child > a:hover > div:first-child p { color: #999 !important; opacity: 1 !important; }


/* 吹き出しテキスト */
#position p.text {
  font-size: 15px !important;
  text-align: center !important;
  letter-spacing: 0.03em !important;
}

/* ===== トップ：吹き出し・カルーセル（構造セレクタ）=====
   日本語サイト再公開で .sd-N が消えたため #position / sd-carousel の構造で当てる。
   #position > div:nth-child(2) = 黄色い吹き出しの背景、その中の div:has(> h1) = 本文の入れ物 */
#position .appear { opacity: 1 !important; }
#position > div:nth-child(2) {
  justify-content: center !important;
  width: 100% !important;
  box-shadow: 0 -1px 0 0 #fef162; /* 黄色い雲との継ぎ目の1px隙間を塞ぐ */
}
#position div:has(> h1) {
  display: block !important;
  word-break: normal !important;
  overflow-wrap: break-word !important;
  width: 100% !important;
  max-width: 720px !important; /* PC(1920)で本文と左右の「＼ ／」の間隔を約100pxに */
  text-align: center !important;
  margin: 0 auto !important;
  white-space: normal !important;
}
#position h1 {
  display: block !important;
  font-size: 15px !important;
  line-height: 1.6 !important;
  text-align: center !important;
}

/* カルーセルのキャプション（タイトル・発言者の黒半透明帯）：英語が長いと全幅に広がり、
   左上の黄色い雲の下に潜るので、幅を620pxまでに制限（右寄せは親の flex-end で維持） */
sd-carousel[data-type="carousel"] a > div > div > div:nth-child(n+3) {
  max-width: 620px !important;
  flex: 0 1 auto !important;
}
sd-carousel[data-type="carousel"] a > div > div > div:nth-child(n+3) p {
  max-width: 100% !important;
}
@media (max-width: 767px) {
  sd-carousel[data-type="carousel"] a > div > div > div:nth-child(n+3) { max-width: 100% !important; }
}

/* カルーセル内テキスト縮小 */
sd-carousel[data-type="carousel"] .text {
  font-size: 0.8em !important;
  line-height: 1.5 !important;
  word-break: break-word !important;
}

/* トップページ黄色いナビ6ボタン（Union Overview 等）。STUDIO 側で
   組合メニュー div に id="home-nav-buttons" を振ってもらったので、それで固定
   （sd-N の振り直しに影響されない）。コンテナ幅400pxは日本語の短いラベル
   前提。英語では 3列×2段・全ボタン同一サイズの端正なグリッドに組み直す。
   ・帯（黄色い角丸）は全6つ同じ幅 → 右端が揃う
   ・上段の丸アイコンは帯の外側の兄弟要素なので、帯を -47px 引いて
     左端を下段の帯と揃える（円は帯の左に重なる＝STUDIO のデザインは維持）*/
#home-nav-buttons {
  width: auto !important;
  max-width: 880px !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
  align-items: flex-start !important;
  align-content: flex-start !important;
  column-gap: 18px !important;
  row-gap: 22px !important;
}
#home-nav-buttons > a.box {
  flex: 0 0 auto !important;
  width: 270px !important;
  justify-content: flex-start !important;
}
#home-nav-buttons a.box p.text {
  white-space: nowrap !important;
  width: auto !important;
  max-width: none !important;
  overflow: visible !important;
}
/* 全6ボタンの黄色帯を同一サイズに */
#home-nav-buttons a.box > .box:last-child {
  width: 270px !important;
  max-width: 270px !important;
  box-sizing: border-box !important;
}
/* 上段3ボタン：帯の左端を下段と揃え、左パディングで文字を丸アイコンの右へ。
   STUDIO の align-items:center でテキストが中央寄せになり下段（左揃え）と
   不揃いなので、左揃えに統一する */
#home-nav-buttons a.box > .box:last-child:not(:has(> img)) {
  margin-left: -47px !important;
  padding-left: 54px !important;
  padding-right: 16px !important;
  align-items: flex-start !important;
}
/* 下段3ボタン（Announcement/Events & Seminars/Activity Report）：アイコンは帯の中。
   アイコンを固定幅スロットにして、テキストの頭を上段（帯左から61px）と揃える。
   12(padL) + 26(icon) + 23(gap) = 61 */
#home-nav-buttons a.box > .box:has(> img):has(> p.text) {
  padding-left: 12px !important;
  padding-right: 16px !important;
  gap: 0 !important;
}
#home-nav-buttons a.box > .box:has(> img):has(> p.text) > img {
  width: 26px !important;
  height: 26px !important;
  min-width: 26px !important;
  max-width: 26px !important;
  margin: 0 23px 0 0 !important;
  flex: 0 0 auto !important;
}
#home-nav-buttons a.box > .box:has(> img):has(> p.text) > p.text {
  margin-left: 0 !important;
}
/* スマホ（≤620px）：PC用の等幅グリッドは通用しないので、6ボタンを
   「アイコン＋黄色い帯」の縦1列リストに組み直す。上段/下段で構造が違う
   （上段=アイコンは帯の外の丸div、下段=アイコンは帯の中のimg）が、
   どちらもアイコンを帯の左14pxに絶対配置・テキストを左46px開始で完全に揃える。
   帯はコンテナの左右15pxパディングで内側に寄せる。長い英語ラベルは折返し可 */
@media (max-width: 620px) {
  #home-nav-buttons {
    flex-direction: column !important;
    flex-wrap: nowrap !important;
    align-items: stretch !important;
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 15px !important;      /* ★ 帯の左右に15px余白 */
    column-gap: 0 !important;
    row-gap: 10px !important;
  }
  #home-nav-buttons,
  #home-nav-buttons > a.box {
    --gap-h: 0px !important;
    --gap-v: 0px !important;
  }
  #home-nav-buttons > a.box {
    width: 100% !important;
    /* STUDIO が Events/Member の <a> に max-width: calc(100% - 10px) 等を付けており
       これが width:100% を無視して帯幅を縮めていた */
    max-width: 100% !important;
    align-self: stretch !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
    position: relative !important;   /* 上段アイコンの絶対配置アンカー */
  }
  /* 上段の帯（丸アイコンの兄弟）にも STUDIO の margin が残ることがあるので念のため */
  #home-nav-buttons a.box > .box {
    margin: 0 !important;
  }
  /* 黄色い帯（全6つ共通）：全幅・高さ44px・左パディング46px（アイコンぶん）。
     flex-direction:row + justify:flex-start でテキストを左寄せ（STUDIO の
     column+center を打ち消す）。PC用ルール（:not(:has(>img)) / :has(>img):has(>p.text)）
     は specificity が高いので同値で並記して確実に上書きする */
  #home-nav-buttons a.box > .box:last-child,
  #home-nav-buttons a.box > .box:last-child:not(:has(> img)),
  #home-nav-buttons a.box > .box:last-child:has(> img):has(> p.text) {
    position: relative !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-start !important;
    flex: 1 1 100% !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 11px 14px 11px 46px !important;
    min-height: 44px !important;
    box-sizing: border-box !important;
  }
  /* テキスト（全6つ共通）：帯の左端から46pxで開始 */
  #home-nav-buttons a.box p.text {
    white-space: normal !important;
    font-size: 14px !important;
    line-height: 1.3 !important;
    text-align: left !important;
    width: auto !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  /* アイコン（全6つ共通）：帯の左端から14px・22px・上下センターに絶対配置。
     上段=丸div（.box:first-child かつ非last）／下段=帯の中のimg（.box:last-child > img） */
  #home-nav-buttons a.box > .box:first-child:not(:last-child),
  #home-nav-buttons a.box > .box:last-child > img {
    position: absolute !important;
    left: 14px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 22px !important;
    min-width: 22px !important;
    max-width: 22px !important;
    height: 22px !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    flex: none !important;
    z-index: 2 !important;
  }
  #home-nav-buttons a.box > .box:first-child:not(:last-child) > img {
    width: 22px !important;
    height: 22px !important;
    margin: 0 !important;
  }

  /* 6ボタンを縦1列に組み直した結果、ブロックが縦に伸びて直後の
     KUMIAI NEWS（#news、黒枠+左上に乗る見出しピル）と隙間なく
     接触・一部重なってしまう → 50px空ける */
  #news {
    margin-top: 50px !important;
  }
}


/* ===== トップ：各セクション（#labo / #listen / #knitteresting / #knitpedia）=====
   テキストスタイルID（theme-XXXX）は再公開後も残るのでこれを目印に使う */

/* 各見出しのサブテキスト（LABO/LISTEN/…/We are recruiting）：中央揃え・同サイズ。
   flex要素なので display:block に戻さないと text-align が効かない */
.theme-be9e5644 {
  font-size: 15px !important;
  text-align: center !important;
  display: block !important;
}
/* 「We are recruiting」本文：行間1.8→1.6、両端揃えは英語でスカスカなので左揃え */
.theme-f5b2985f {
  line-height: 1.6 !important;
  text-align: left !important;
}

/* LABOの黄色い丸（#labo の最初の子の最初の子）の中の3行テキスト：英語だと18pxで
   6行になり円からはみ出す → 円幅いっぱい＋13pxで3行に収める。
   円 > div > div > div(テキスト箱) > p の入れ子。border-bottom は箱側にあるので消し、
   ::after で80pxの線を1本だけ引く */
#labo > div:first-child > div:first-child,
#labo > div:first-child > div:first-child > div {
  width: 156px !important;
  max-width: none !important;
}
#labo > div:first-child > div:first-child > div > div {
  width: 156px !important;
  max-width: none !important;
  border-bottom: 0 !important;
  padding-bottom: 0 !important;
}
#labo > div:first-child > div:first-child > div > div > div {
  border-bottom: 0 !important;
  padding-bottom: 0 !important;
}
#labo > div:first-child > div:first-child > div > div > div::after {
  content: "";
  display: block;
  width: 80px;
  height: 2px;
  background: #000;
  margin: 10px auto 0 !important;
}
#labo > div:first-child > div:first-child p {
  font-size: 13px !important;
  line-height: 1.5 !important;
}

/* LABO会員限定カード（#labo ul > a）：縦書きの肩書き2本を横向き気味に縮小して
   max-height で複数列に折り返す。記事タイトルは18px。
   a > div:first-child > div:nth-child(3) = 縦書きテキストの入れ物、a > div:nth-child(2) = タイトル */
#labo ul > a > div:first-child > div:nth-child(3) > p:first-child {
  text-orientation: mixed !important;
  transform: scale(0.7) !important;
  transform-origin: top center !important;
  align-self: flex-start !important;
  font-size: 13px !important;
  line-height: 1.35 !important;
  max-height: 210px !important;
}
#labo ul > a > div:first-child > div:nth-child(3) > p:nth-child(2) {
  text-orientation: mixed !important;
  font-size: 14px !important;
  line-height: 1.35 !important;
  max-height: 200px !important;
}
#labo ul > a > div:nth-child(2) > :is(h3, p).theme-f49dc878 {
  font-size: 18px !important;
  line-height: 1.3 !important;
}

/* LISTEN / KNITTERESTING の記事カードタイトル：22px×多行は大きすぎる */
#listen :is(h3, p).theme-f49dc878,
#knitteresting :is(h3, p).theme-f49dc878 {
  font-size: 16px !important;
  line-height: 1.5 !important;
}

/* 記事一覧ページ（/search-listen /search-knitteresting）のカードタイトル：
   英語だと24px×多行で大きすぎるので16px */
.theme-31a661a4 {
  font-size: 16px !important;
  line-height: 1.5 !important;
}

/* KNITPEDIA カテゴリカード5枚のラベル：アイコンの下で中央揃え＋縮小
   （#knitpedia > div:nth-child(2) > a > div:first-child > div:nth-child(2) > p） */
#knitpedia > div:nth-child(2) > a > div:first-child > div:nth-child(2) > p {
  display: block !important;
  text-align: center !important;
  font-size: 15px !important;
  line-height: 1.4 !important;
}

/* KNITTERESTINGサブタイトルの改行（translate-html.tsが挿入）はPCのみ有効 */
br.knit-pcbr {
  display: none;
}
@media (min-width: 900px) {
  br.knit-pcbr {
    display: block;
  }
}

/* ===== スマホ(≤767px)調整：PC向け固定値がモバイルで崩れる箇所の対応。
   iPad(768px)は元レイアウトのままにしたいので767pxで分岐 ===== */
@media (max-width: 767px) {
  /* ハンバーガー(ラッパーdiv)：モバイルではナビが非表示になり margin-left:auto の
     基準を失うので、auto で右端に寄せ、JA用に右へ34px分の余白を残す
     （JA自体は right:10px に絶対配置＝translate-html.ts の addJpButton 参照） */
  header#home > div:has(> button) {
    margin-left: auto !important;
    margin-right: 34px !important;
  }

  /* LABOの黄色い丸バッジ：正円の直径を明示し、LABOの右側に絶対配置 */
  #labo > div:first-child > div:first-child {
    position: absolute !important;
    top: 70px !important;
    right: 10px !important;
    left: auto !important;
    bottom: auto !important;
    width: 90px !important;
    height: 90px !important;
    max-width: 90px !important;
    margin: 0 !important;
    z-index: 3 !important;
  }
  #labo > div:first-child > div:first-child > div,
  #labo > div:first-child > div:first-child > div > div {
    width: 100% !important;
    max-width: 100% !important;
  }
  #labo > div:first-child > div:first-child p {
    font-size: 9px !important;
    line-height: 1.25 !important;
  }
  #labo > div:first-child > div:first-child > div > div > div::after {
    width: 40px !important;
    margin-top: 4px !important;
  }
  /* LABOセクションが直前のNEWS枠と隙間なく重なるため空ける */
  #labo {
    margin-top: 100px !important;
  }

  /* KNITPEDIAカテゴリ5枚のラベル：カード幅が約94pxしかなく15pxだと単語が途中で割れる */
  #knitpedia > div:nth-child(2) > a > div:first-child > div:nth-child(2) > p {
    font-size: 12px !important;
  }

  /* トップ吹き出し：固定高さのままだと英語が多行に折り返して黄色い帯からはみ出す。
     背景・中身とも高さ自動にして文章量に合わせて伸ばし、上に20pxの余白 */
  #position > div:nth-child(2),
  #position > div:nth-child(2) > div,
  #position div:has(> h1) {
    height: auto !important;
  }
  #position > div:nth-child(2) {
    padding-top: 20px !important;
  }
  #position div:has(> h1) {
    padding: 0 20px 12px !important;
    box-sizing: border-box !important;
  }
  #position h1 {
    font-size: 11px !important;
    line-height: 1.5 !important;
    text-align: center !important;
  }
}

/* /member A→Zフィルター：ホバーで110%拡大（All含む） */
#az-filter-bar .az-circle:hover,
#az-filter-bar .az-all:hover {
  transform: scale(1.1);
}
/* 「Regular Member」ピルとA→Z行の間隔を20px空ける */
#az-filter-bar {
  margin-top: 20px !important;
}

/* /member 下部の会員種別見出しピル（Supporting / Special / 関連団体リンク）：
   元は幅200px・高さ60px固定・文字24px薄グレーで、英語だと枠の外に2行ではみ出す。
   枠線・文字を黒に統一し、幅・高さは中身に合わせて文字は1行16px。
   （#support #special #partner はJP側が振った固定ID、直下の最初の div がピル） */
:is(#support, #special, #partner) > div:first-child {
  border-color: #000 !important;
  width: auto !important;
  max-width: none !important;
  height: auto !important;
  padding: 4px 16px !important;
}
:is(#support, #special, #partner) > div:first-child p {
  white-space: nowrap !important;
  color: #000 !important;
  font-size: 16px !important;
  height: auto !important;
}

/* #labo セクション：会員ページ(members.tokyo-knit.com)は翻訳対象外の別サイトなので
   日本語のみである旨の注記（translate-html.ts が会員ページへのカード直下に挿入する #labo-en-note） */
#labo-en-note {
  color: #777 !important;
  font-size: 13px !important;
  line-height: 1.6 !important;
  text-align: center !important;
  margin: 18px auto 34px !important;
  padding: 0 16px !important;
  max-width: min(100%, 560px) !important;
  box-sizing: border-box !important;
}

/* トップ「卸・商業」の黄色い雲（SVG画像）と直下の黄色い吹き出しの継ぎ目：
   小数px(636.58等)の丸めで約1px隙間ができ下の写真が線状に透けるため、
   吹き出し側を1px上へ黄色で伸ばして塞ぐ（#position はJP側が振った固定ID、
   その2番目の子＝黄色い吹き出し。sd-N番号に依存しない） */
#position > div:nth-child(2) {
  box-shadow: 0 -1px 0 0 #fef162;
}

/* サブページ上部の黄色タイトル帯（div#top：サブタイトル＋H1）のモバイル表示。
   STUDIO 側がサブタイトルに幅356px固定＋右マージン20pxを付けていて、英語では
   左に見切れる。サブタイトルを2行で折り返し、H1は右に収める。
   ※ トップページの #top は <section> なので div#top で限定する。 */
@media (max-width: 767px) {
  div#top > div:has(h1) {
    justify-content: space-between !important;
    padding: 0 12px !important;
    box-sizing: border-box !important;
    gap: 6px !important;
  }
  div#top > div:has(h1) > div { margin: 0 !important; min-width: 0 !important; }
  div#top > div:has(h1) > div > div { margin: 0 !important; width: 100% !important; }
  div#top > div:has(h1) > div:first-child {
    width: auto !important;
    flex: 1 1 0 !important;
    align-items: flex-start !important;
  }
  div#top > div:has(h1) > div:first-child p {
    width: 100% !important;
    white-space: normal !important;
    text-align: left !important;
    text-wrap: balance;
    height: auto !important;
    line-height: 1.4 !important;
  }
  div#top > div:has(h1) > div:nth-child(2),
  div#top > div:has(h1) > div:nth-child(2) > div,
  div#top > div:has(h1) h1 {
    width: max-content !important;
    min-width: max-content !important;
    flex-shrink: 0 !important;
  }
  div#top > div:has(h1) > div:nth-child(2) { flex: 0 0 auto !important; }
  div#top > div:has(h1) h1 { font-size: 18px !important; white-space: nowrap !important; }
}

/* /member モバイル：会員種別（正会員／賛助／特別／団体）を「ピル＋説明文」の2段組に統一。
   STUDIO は左ピル・右説明の横並びで、英語の長い説明が不揃いに折り返してガタつく。
   縦に積んで左端を揃え、Union の説明文はピルの直下、A→Z 絞り込みバーはその下に置く。
   (div:has(> div > #az-filter-bar) = A→Z バー(#az-filter-bar)を子孫に持つ種別ブロック。sd-N 番号に依存しない) */
@media (max-width: 767px) {
  div:has(> div > #az-filter-bar) { align-items: flex-start !important; }
  div:has(> div > #az-filter-bar) > div:first-child { display: contents !important; }
  div:has(> div > #az-filter-bar) > div:first-child > div:first-child { order: 1 !important; margin: 0 0 10px 0 !important; }
  div:has(> div > #az-filter-bar) > div:has(> p) {
    order: 2 !important; padding: 0 !important; margin: 0 !important;
    width: 100% !important; height: auto !important; align-items: flex-start !important;
  }
  div:has(> div > #az-filter-bar) > div:has(> p) > p { width: 100% !important; height: auto !important; text-align: left !important; }
  div:has(> div > #az-filter-bar) > div:first-child > #az-filter-bar { order: 3 !important; margin: 18px 0 0 0 !important; }
  body:has(#az-filter-bar) div:has(> div > #az-filter-bar) > div:has(> div > a) {
    order: 4 !important; margin: 36px 0 0 0 !important; padding: 0 !important;
    width: 100% !important; align-items: flex-start !important; gap: 28px !important;
  }
  div:has(> div > #az-filter-bar) > div:has(> div > a) > div {
    flex-direction: column !important; align-items: flex-start !important;
    width: 100% !important; height: auto !important; gap: 10px !important; margin: 0 !important;
  }
  div:has(> div > #az-filter-bar) > div:has(> div > a) > div > div {
    width: 100% !important; margin: 0 !important; padding: 0 !important; height: auto !important;
  }
  div:has(> div > #az-filter-bar) > div:has(> div > a) > div > div > p { width: 100% !important; height: auto !important; text-align: left !important; }
}

/* /member モバイル：一番下の「関連団体リンク」一覧（#partner）。
   STUDIO は項目ごとに別クラスで中央寄せ／幅指定しており、「>」アイコンと文字の開始位置が
   項目によってバラバラ（複数行の項目は右にはみ出す）。全項目を
   「>（24px）＋テキスト（残り幅・左揃え）」に統一し、左右に10pxの余白を取る。
   #partner はJP側が振った固定ID。 */
@media (max-width: 767px) {
  #partner ul { padding: 0 10px !important; box-sizing: border-box !important; }
  #partner ul > a { width: 100% !important; justify-content: flex-start !important; }
  #partner ul > a > div {
    width: 100% !important; justify-content: flex-start !important; align-items: flex-start !important;
    gap: 4px !important; margin: 0 !important; padding: 0 !important;
  }
  #partner ul > a > div > .icon {
    position: static !important; margin: -1px 0 0 0 !important; flex: 0 0 24px !important; transform: none !important;
  }
  #partner ul > a > div > p {
    width: auto !important; flex: 1 1 0 !important; min-width: 0 !important; margin: 0 !important; padding: 0 !important;
    text-align: left !important; line-height: 1.4 !important; height: auto !important;
  }
}

/* 本文の左右にある斜線の飾り（＼／）付きリード文（/topics など）のモバイル表示。
   飾りの箱が16pxなのにアイコンが34pxで左右に飛び出し、しかも本文ブロックが
   382px固定で行全体が画面幅（392px）を超えるため、飾りが画面外に切れていた。
   飾り(26px)＋本文(残り幅)＋飾り(26px)に収める。
   ※ トップページにも同じ飾りがあり別デザインなので、/topics /event /news に限定する。
   （div:has(> div:first-child > div > .icon):has(> div:last-child > div > .icon) ＝ 先頭・末尾の子にアイコンを持つ行。sd-N番号に依存しない） */
@media (max-width: 767px) {
  body:is([data-en-path="/topics"], [data-en-path="/event"], [data-en-path="/news"]) div:has(> div:first-child > div > .icon):has(> div:last-child > div > .icon) {
    width: 100% !important; padding: 0 6px !important; box-sizing: border-box !important;
    gap: 0 !important; justify-content: space-between !important;
  }
  body:is([data-en-path="/topics"], [data-en-path="/event"], [data-en-path="/news"]) div:has(> div:first-child > div > .icon):has(> div:last-child > div > .icon) > div:first-child,
  body:is([data-en-path="/topics"], [data-en-path="/event"], [data-en-path="/news"]) div:has(> div:first-child > div > .icon):has(> div:last-child > div > .icon) > div:last-child {
    width: 26px !important; min-width: 26px !important; flex: 0 0 26px !important; overflow: visible !important;
  }
  body:is([data-en-path="/topics"], [data-en-path="/event"], [data-en-path="/news"]) div:has(> div:first-child > div > .icon):has(> div:last-child > div > .icon) > div:first-child > div,
  body:is([data-en-path="/topics"], [data-en-path="/event"], [data-en-path="/news"]) div:has(> div:first-child > div > .icon):has(> div:last-child > div > .icon) > div:last-child > div { width: 26px !important; align-items: center !important; }
  body:is([data-en-path="/topics"], [data-en-path="/event"], [data-en-path="/news"]) div:has(> div:first-child > div > .icon):has(> div:last-child > div > .icon) .icon { font-size: 26px !important; }
  body:is([data-en-path="/topics"], [data-en-path="/event"], [data-en-path="/news"]) div:has(> div:first-child > div > .icon):has(> div:last-child > div > .icon) > div:nth-child(2) {
    flex: 1 1 0 !important; min-width: 0 !important; width: auto !important; margin: 0 4px !important; max-width: none !important;
  }
  body:is([data-en-path="/topics"], [data-en-path="/event"], [data-en-path="/news"]) div:has(> div:first-child > div > .icon):has(> div:last-child > div > .icon) > div:nth-child(2) div,
  body:is([data-en-path="/topics"], [data-en-path="/event"], [data-en-path="/news"]) div:has(> div:first-child > div > .icon):has(> div:last-child > div > .icon) > div:nth-child(2) p,
  body:is([data-en-path="/topics"], [data-en-path="/event"], [data-en-path="/news"]) div:has(> div:first-child > div > .icon):has(> div:last-child > div > .icon) > div:nth-child(2) h2 { max-width: 100% !important; }
  body:is([data-en-path="/topics"], [data-en-path="/event"], [data-en-path="/news"]) div:has(> div:first-child > div > .icon):has(> div:last-child > div > .icon) > div:nth-child(2) > div,
  body:is([data-en-path="/topics"], [data-en-path="/event"], [data-en-path="/news"]) div:has(> div:first-child > div > .icon):has(> div:last-child > div > .icon) > div:nth-child(2) > div > div { width: 100% !important; }
}

/* 本文（リッチテキスト）は STUDIO 既定が両端揃え(justify)で、英語だと単語間が不揃いに
   空く。左揃えに統一（子要素の中央/右揃えは個別指定なので影響しない）。
   ※ richText 以外の justify 要素は translate-html.ts の applyLayoutFixes が左揃えにする。 */
.richText { text-align: left !important; }

/* 英語版に差し替えた図（IMG_SWAPS で /img-en/ を参照する画像）のモバイル表示。
   STUDIO は figure に左右 -5px の負マージンを付けていて、図が画面幅より広く
   （-5〜417px）なり、端に寄せた吹き出し内の文字が画面外で切れる。本文と同じ左右20pxの
   余白に収める。 */
@media (max-width: 767px) {
  .richText figure:has(img[data-sd-img-src^="/img-en/"]) {
    margin-left: 20px !important;
    margin-right: 20px !important;
    width: auto !important;
    max-width: calc(100% - 40px) !important;
  }
  .richText figure:has(img[data-sd-img-src^="/img-en/"]) img {
    width: 100% !important;
    height: auto !important;
    max-width: 100% !important;
  }
}

/* 記事ページ（post-*）上部の色帯：サブタイトル（例: The World of Knitting…）が
   帯の左端にべったり張り付く。左に16pxの余白を取る（右は STUDIO 既定の20px）。
   H1を持つ /member 系の帯は別ルールで処理済みなので除外。 */
@media (max-width: 767px) {
  div#top > div:not(:has(h1)) > div { margin-left: 16px !important; }
}

/* v2 */