@charset "UTF-8";
/* ============================================================================
 *  出展者詳細ページ — 追加分の見た目（nakalab アドオン版）
 * ============================================================================
 *
 *  公式のデザイン（/assets/css/exhibitor_detail.css など）はそのまま使います。
 *  このファイルは「従来 jQuery のプラグインが作っていた見た目」を
 *  自前で作り直した分と、新しく増えた注釈タグの分だけです。
 *
 *  ■ 変更点 — このファイルが引き受けたもの
 *    1) ショーケースのスライダー … slick の代わり（CSS の scroll-snap）
 *    2) 画像の拡大表示           … fancybox の代わり（<dialog>）
 *    3) 画像のふわっとした表示   … jQuery の fadeIn の代わり
 *    4) セクションの出現アニメ   … 新規
 *    5) 特別企画のタグ           … 新規（Annotator の情報）
 *
 *  ★ 色や大きさを変えたいときは、下の「★」が付いた値を変えてください。
 *    タグの色だけは detail_config.php の IBX_D_TAG_COLORS で決めています
 *    （出展者ごとに変わるため、CSS ではなく PHP 側にあります）。
 * ========================================================================= */


/* ============================================================================
 *  1. 画像
 *
 *  画像は画面に近づいてから読み込みます（detail.js）。
 *  読み込みが終わると is-loaded が付くので、そこでふわっと出します。
 *  従来 jQuery の fadeIn がやっていたことと同じですが、
 *  表示・非表示の切り替えを伴わないので、まわりの文字がガタつきません。
 * ========================================================================= */

/* ★ 隠すのは「まだ読み込んでいない画像」だけです。
 *
 *  ⚠ 2026-09-03 の不具合と、その直し方
 *    以前はここに `img.is-observed { opacity: 0 }` と書いていました。
 *    is-observed は「監視に登録した」という印で、読み込みが終わっても外して
 *    いなかったため、読み込み済みの画像がずっと透明のままでした。
 *    さらにこちらのほうがクラス 3 個で詳細度が高く、下の is-loaded { opacity: 1 }
 *    に勝ってしまっていました（公式 CSS の .u-hover が opacity を上書きするので、
 *    マウスを載せたときだけ見える、という症状になっていました）。
 *
 *    そこで「読み込み中だけ付き、終わったら外れる」ibx-lazy を使います。
 *    印（is-observed）とスタイル（ibx-lazy）を分けたので、同じ事故は起きません。
 *
 *  .ibx-js が付いているとき（JavaScript が動いているとき）だけ隠します。
 *  JavaScript が止まっている環境で画像が永久に見えなくなるのを防ぐためです。 */
.ibx-js .exhibition_detail_page img.ibx-lazy {
  opacity: 0;
}

.exhibition_detail_page img.is-loaded {
  opacity: 1;
  transition: opacity .35s ease;   /* ★ 画像が出てくる速さ */
}

/* 「視差効果を減らす」設定の人には、動きを付けません */
@media (prefers-reduced-motion: reduce) {
  .exhibition_detail_page img.is-loaded { transition: none; }
}


/* ============================================================================
 *  2. セクションの出現アニメーション
 *
 *  画面に入ったセクションの中身を、少しずつずらして浮かび上がらせます。
 *  anime.js が読み込めなかった場合や、アニメーションを切っている場合は
 *  detail.js が is-shown を即座に付けるので、そのまま表示されます。
 * ========================================================================= */

/* ★ 隠すのは .ibx-js が付いているとき（＝ JavaScript が動いているとき）だけです。
      JavaScript が止まっている環境では、はじめから全部見えている状態になります。
      .ibx-js は detail.php の <body> 直後の 1 行が付けています。 */
.ibx-js [data-ibx-reveal] .ibx-reveal-item {
  opacity: 0;
  transform: translateY(12px);
}

.ibx-js [data-ibx-reveal] .ibx-reveal-item.is-shown {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .ibx-js [data-ibx-reveal] .ibx-reveal-item {
    opacity: 1;
    transform: none;
  }
}


/* ============================================================================
 *  3. ショーケースのスライダー（slick の代わり）
 *
 *  横に並べて 1 枚ずつ吸着させる、という作りです。
 *  指でスワイプしても、サムネイルを押しても動きます。
 * ========================================================================= */

.showcase_slide.ibx-slider {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  margin: 0;
  padding: 0;
  list-style: none;
  scrollbar-width: none;            /* スクロールバーは出しません */
}
.showcase_slide.ibx-slider::-webkit-scrollbar { display: none; }

.showcase_slide.ibx-slider > .slide_item {
  flex: 0 0 100%;
  scroll-snap-align: center;
  margin: 0;
}

.showcase_slide.ibx-slider > .slide_item figure {
  margin: 0;
}

.showcase_slide.ibx-slider > .slide_item img {
  width: 100%;
  height: auto;
  display: block;
  cursor: zoom-in;
}


/* -------- サムネイルの並び -------- */

.thumbnail_list.ibx-thumbs {
  display: flex;
  gap: 6px;                          /* ★ サムネイル同士の間隔 */
  overflow-x: auto;
  margin: 10px 0 0;
  padding: 0;
  list-style: none;
  scrollbar-width: none;
}
.thumbnail_list.ibx-thumbs::-webkit-scrollbar { display: none; }

.thumbnail_list.ibx-thumbs > .slide_item {
  flex: 0 0 calc((100% - 6px * 8) / 9);   /* ★ 横に 9 枚（従来と同じ） */
  margin: 0;
  cursor: pointer;
  opacity: .5;
  transition: opacity .2s ease;
}

.thumbnail_list.ibx-thumbs > .slide_item.thumbnail_current,
.thumbnail_list.ibx-thumbs > .slide_item:hover {
  opacity: 1;
}

.thumbnail_list.ibx-thumbs > .slide_item figure { margin: 0; }

.thumbnail_list.ibx-thumbs > .slide_item img {
  width: 100%;
  height: auto;
  display: block;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

/* スマートフォンでは横に 4 枚（従来と同じ） */
@media screen and (max-width: 768px) {
  .thumbnail_list.ibx-thumbs > .slide_item {
    flex: 0 0 calc((100% - 6px * 3) / 4);
  }
}


/* ============================================================================
 *  4. 画像の拡大表示（fancybox の代わり）
 * ========================================================================= */

/* ⚠ サイト共通 CSS の打ち消し（消さないでください）
 *
 *  html/assets/css/style.css の 767 行目に、全ページ共通で
 *      dialog { position: absolute; left:0; right:0; width:fit-content;
 *               height:fit-content; margin:auto; border:solid; padding:1em;
 *               background:#fff; color:#000; display:block; }
 *  という指定があります。<dialog> がまだ広く使えなかった頃の名残です。
 *
 *  作者の CSS はブラウザ既定より優先されるため、この 1 行のせいで
 *  ブラウザ既定の dialog:modal { position: fixed } が負けます。その結果、
 *  モーダルが「画面」ではなく「文書の先頭」を基準に置かれ、
 *  ページを下にスクロールした状態で画像を開くと、拡大画像が画面の
 *  はるか上に出て、上へスクロールしないと見えなくなります
 *  （2026-09-03 中森さん指摘。実測: スクロール量 782px のとき画像が画面上端より 507px 上）。
 *
 *  そのため position だけでなく、上書きされている項目をすべて明示的に戻します。
 *  ★ ID セレクタなので、要素セレクタの dialog より必ず優先されます。 */
#ibx-lightbox {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  max-width: 100vw;
  max-height: 100vh;
  margin: 0;
  padding: 0;
  border: none;
  background: transparent;
  color: inherit;
  overflow: hidden;
}

/* 開いているときだけ中身を中央に寄せる。
   閉じているときは共通 CSS の dialog:not([open]) { display:none } が効きます */
#ibx-lightbox[open] {
  display: flex;
  align-items: center;
  justify-content: center;
}

#ibx-lightbox::backdrop {
  background: rgba(0, 0, 0, .86);    /* ★ 背景の暗さ */
}

/* 中央寄せは上の flex に任せます。
   position で寄せると、上記のような外部 CSS の影響を受けやすくなるためです */
.ibx-lightbox__inner {
  position: static;
  transform: none;
  max-width: 92vw;
  max-height: 88vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

.ibx-lightbox__img {
  max-width: 92vw;
  max-height: 78vh;
  width: auto;
  height: auto;
  display: block;
  background: #fff;
}

.ibx-lightbox__caption {
  color: #fff;
  font-size: 14px;
  line-height: 1.6;
  text-align: center;
  max-width: 92vw;
  margin: 0;
}

.ibx-lightbox__close,
.ibx-lightbox__prev,
.ibx-lightbox__next {
  position: fixed;
  border: none;
  background: rgba(255, 255, 255, .12);
  color: #fff;
  width: 44px;                        /* ★ ボタンの大きさ（指で押せる 44px 以上） */
  height: 44px;
  border-radius: 50%;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.ibx-lightbox__close:hover,
.ibx-lightbox__prev:hover,
.ibx-lightbox__next:hover {
  background: rgba(255, 255, 255, .28);
}

.ibx-lightbox__close { top: 16px; right: 16px; }
.ibx-lightbox__prev  { top: 50%; left: 16px;  transform: translateY(-50%); }
.ibx-lightbox__next  { top: 50%; right: 16px; transform: translateY(-50%); }

/* 画像が 1 枚だけのときは、前後のボタンを出しません（detail.js が付けます） */
#ibx-lightbox.is-single .ibx-lightbox__prev,
#ibx-lightbox.is-single .ibx-lightbox__next { display: none; }


/* ============================================================================
 *  5. 特別企画のタグ（Annotator の追加情報）
 *
 *  ★ 色は detail_config.php の IBX_D_TAG_COLORS で決めています。
 *    出展者ごとに変わるため、ここには書けません。
 *    ここで決めているのは、形と大きさと並べ方だけです。
 * ========================================================================= */

#ibx-annotation-tags {
  margin: 12px 0 0;
}

.ibx-tag_list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;                           /* ★ タグ同士の間隔 */
  margin: 0;
  padding: 0;
  list-style: none;
}

.ibx-tag {
  display: inline-block;
  padding: 4px 12px;                  /* ★ タグの余白 */
  border-radius: 999px;
  font-size: 13px;                    /* ★ タグの文字の大きさ */
  font-weight: 700;
  line-height: 1.5;
  white-space: nowrap;
}


/* ============================================================================
 *  6. 細かい調整
 * ========================================================================= */

/* 長文の「more」で開く部分。従来は jQuery が hide/show していました */
.text_overflow .hide[hidden] { display: none; }

/* 個人情報提供の同意は、確認が終わるまで出しません */
.overlay.is-pi_consent[hidden] { display: none !important; }

/* 右側の固定ボタンは、少しスクロールしてから出します（detail.js が制御） */
#scroll_btn {
  transition: opacity .25s ease;
}


/* ============================================================================
 *  7. ページ下部のコントローラー
 *
 *  従来は画像ボタンでしたが、文字＋Font Awesome のアイコンに作り直しました。
 *  画面下に固定する・スマートフォンで隠す、はサイト共通の
 *  /assets/css/style_org2.css（.hidden_box）のままです。
 *
 *  「コントローラー全表示」（#label1 のチェック）で開閉します。
 *    閉じているとき … 1 段目（ランダムウォークと検索）だけ
 *    開いているとき … 部門ボタンと右のボタン 4 つも出す
 *
 *  ★ ID セレクタ（#hidden_box）で書いているのは、style_org2.css の
 *    .hidden_box label / .hidden_show の指定に確実に勝つためです。
 * ========================================================================= */

#hidden_box .hidden_show {
  height: auto;                        /* 共通 CSS の height: 50px を打ち消し */
  overflow: visible;
}

#hidden_box .ibx-ctrl__bar {
  background: #474747;                 /* ★ バーの背景色 */
  padding: 16px 24px;
}

/* ★ レイアウトは 2 通りです。境目の幅は、このファイルの最後の @media で決めています。
 *
 *  A. PC（デザインどおり）… 画面が十分広いとき
 *     ┌ランダムウォーク┬─検索─────┐ ┌右のボタン 4 つ┐   ［全表示］
 *     └部門 4 つを 1 本のピル（両端が丸い）─┘ └──────────┘
 *
 *  B. 幅が足りないとき … 部門を 2×2（田の字・四隅が丸い）にして組み替え
 *     ［ランダムウォーク］［検索──────］   ［全表示────］
 *     ［部門 2×2      　　　　　　　 ］   ［右のボタン 4 つ］
 *
 *  どちらでも文字は消えません（B では部門名が 2 行に折り返すことがあります）。 */

/* -------- A. PC -------- */

#hidden_box .ibx-ctrl__inner {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  max-width: 1360px;
  margin: 0 auto;
}

#hidden_box .ibx-ctrl__main {
  flex: 0 0 auto;                      /* 幅は部門のピルの長さに合わせます */
  display: flex;
  flex-direction: column;
}

#hidden_box .ibx-ctrl__row {
  display: flex;
  gap: 8px;
}

/* 閉じているとき
 *   右のボタン 4 つ … 出しません
 *   部門           … 見えなくするだけで幅は残します
 *                     （開け閉めで検索欄の長さが変わらないように） */
#hidden_box #label1:not(:checked) ~ .hidden_show .ibx-ctrl__links {
  display: none;
}
#hidden_box #label1:not(:checked) ~ .hidden_show .ibx-ctrl__cats {
  height: 0;
  margin-top: 0;
  visibility: hidden;
}

#hidden_box a:hover { opacity: .85; }


/* -------- ランダムウォーク -------- */

#hidden_box .ibx-ctrl__walk {
  flex: 0 0 224px;
  height: 40px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 20px 0 44px;
  border-radius: 999px;
  background: linear-gradient(90deg, #1266c6 0%, #4ba4f1 100%);  /* ★ */
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
}
#hidden_box .ibx-ctrl__walk span { font-size: 14px; line-height: 1; }
#hidden_box .ibx-ctrl__walk .fa-person-walking { font-size: 17px; }
#hidden_box .ibx-ctrl__walk .fa-chevron-right  { margin-left: auto; font-size: 12px; }


/* -------- フリーワード検索 -------- */

#hidden_box .ibx-ctrl__search {
  flex: 1 1 auto;
  min-width: 160px;
  height: 40px;
  display: flex;
  align-items: center;
  border: 1.5px solid #3b8fe6;         /* ★ 枠の色 */
  border-radius: 999px;
  background: #eaf5ff;                 /* ★ 中の色 */
  overflow: hidden;
}

#hidden_box .ibx-ctrl__search input[type="text"] {
  flex: 1 1 auto;
  min-width: 0;
  height: 100%;
  padding: 0 0 0 22px;
  border: none;
  background: none;
  color: #1a3350;
  font-size: 14px;
  font-family: inherit;
}
#hidden_box .ibx-ctrl__search input[type="text"]:focus { outline: 0; }
#hidden_box .ibx-ctrl__search input[type="text"]::placeholder { color: #a8c7ea; }

#hidden_box .ibx-ctrl__search button {
  flex: 0 0 auto;
  width: auto;                         /* サイト共通 CSS の button { width: 100% } を打ち消し */
  height: 100%;
  padding: 0 20px 0 12px;
  border: none;
  background: none;
  color: #1f6fd0;
  font-size: 17px;
  cursor: pointer;
}


/* -------- 出展部門 --------
   ★ 色は出展者一覧の部門色（components/config.php）を少し淡くしたものです

   角の丸みは、ul 全体を丸めて中身を切り抜く（overflow: hidden）ことで作っています。
   li や a に角丸を付けると、色の付いた li の角が四角いまま残ります。
   区切りの細い線は、ul の背景色が 1px の隙間から見えているものです。

   ⚠ 以前は「はみ出した分はスクロールで隠す」作りで、狭い画面では
     「メディア・ソリューション」が見えないまま切れていました。
     今は幅が足りなくなる前に B のレイアウト（2×2）へ切り替えるので、切れません。 */

#hidden_box .ibx-ctrl__cats {
  display: flex;
  gap: 1px;
  margin: 14px 0 0;
  padding: 0;
  list-style: none;
  border-radius: 999px;                /* ★ PC では両端が丸いピル */
  background: rgb(255 255 255 / 80%);  /* ★ 区切り線の色 */
  overflow: hidden;
}

#hidden_box .ibx-ctrl__cats li {
  flex: 1 0 auto;
  margin: 0;
}

#hidden_box .ibx-ctrl__cats li.is-audio         { background: #5aa7a1; }
#hidden_box .ibx-ctrl__cats li.is-entertainment { background: #8f7fb4; }
#hidden_box .ibx-ctrl__cats li.is-creation      { background: #6f9ccb; }
#hidden_box .ibx-ctrl__cats li.is-media         { background: #c4905f; }

#hidden_box .ibx-ctrl__cats a {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  min-height: 40px;
  padding: 0 14px;
  background: linear-gradient(180deg, rgba(255, 255, 255, .12) 0%, rgba(255, 255, 255, 0) 100%);
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.25;
  text-align: center;
  text-decoration: none;
  white-space: nowrap;                 /* PC では 1 行（境目の幅はこれが収まるように決めています） */
}

/* 英語版は部門名が長いので、少し小さくします */
#hidden_box .ibx-ctrl__cats.is-en a { font-size: 13px; }

/* 「エンターテインメント/ライティング」「Video Production / Broadcast Equipment」は
   2 行になるとき、狙った位置（/ の前）で折り返したいので <br class="ibx-ctrl__brk"> を
   仕込んでいます。PC の 1 行表示では効かせないよう、ここでは隠しておきます
   （幅が狭いときの @media で display: inline に戻して効かせます）。 */
#hidden_box .ibx-ctrl__brk { display: none; }


/* -------- 右のボタン 4 つ -------- */

#hidden_box .ibx-ctrl__links {
  flex: 0 0 auto;
  display: grid;
  grid-template-columns: 130px 130px;  /* ★ ボタンの幅 */
  gap: 8px 7px;
  margin: 0;
  padding: 9px 13px;
  list-style: none;
  border: 1px solid rgba(255, 255, 255, .4);
  border-radius: 4px;
  background: rgba(255, 255, 255, .14);
}

#hidden_box .ibx-ctrl__links li { margin: 0; }

#hidden_box .ibx-ctrl__links a {
  display: flex;
  align-items: center;
  gap: 5px;
  height: 34px;
  padding: 0 6px 0 9px;
  border-radius: 5px;
  background: linear-gradient(180deg, #3a4254 0%, #252b39 100%);  /* ★ */
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  line-height: 1.15;
  text-decoration: none;
}
#hidden_box .ibx-ctrl__links a i {
  flex: 0 0 16px;
  font-size: 14px;
  text-align: center;
}
/* span の大きさはサイト共通 CSS（17px）に負けないよう、ここで決めます */
#hidden_box .ibx-ctrl__links a span { flex: 1 1 auto; font-size: 9.5px; line-height: 1.2; text-align: center; white-space: nowrap; }
#hidden_box .ibx-ctrl__links a span.is-en { font-size: 11px; letter-spacing: .02em; }


/* -------- コントローラー全表示 -------- */

#hidden_box label.ibx-ctrl__toggle {
  position: static;                    /* 共通 CSS の右上固定を打ち消し */
  flex: 0 0 auto;
  width: auto;
  min-width: 180px;
  max-width: none;
  height: 45px;
  margin-left: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 0 20px;
  border-radius: 4px;
  background: #bcbcbc;                 /* ★ */
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  white-space: nowrap;
  cursor: pointer;
}
#hidden_box label.ibx-ctrl__toggle::before { content: none; }  /* 共通 CSS の ▲▼ の文字を消す */

/* 閉じているときは ▲、開いているときは ▼ */
#hidden_box label.ibx-ctrl__toggle .fa-caret-down { display: none; }
#hidden_box #label1:checked ~ .hidden_show label.ibx-ctrl__toggle .fa-caret-up   { display: none; }
#hidden_box #label1:checked ~ .hidden_show label.ibx-ctrl__toggle .fa-caret-down { display: inline-block; }


/* -------- B. 幅が足りないとき（スマートフォンでは共通 CSS で非表示） --------
 *
 *  ★ 境目の幅 = A のレイアウトが 1 行に収まる幅（実測）＋ 少しの余裕
 *     日本語 1340px … 余白 48 + 部門 751 + 14 + 右のボタン 295 + 14 + 全表示 190 ≒ 1312
 *     英語   1400px … 余白 48 + 部門 820 + 14 + 右のボタン 295 + 14 + 全表示 180 ≒ 1371
 *     部門名を変えたら、ここも見直してください。
 *
 *  main を display: contents にして、中の 1 段目（.ibx-ctrl__row）と部門を
 *  直接 grid に並べ、下のように配置し直します。
 *     "row  toggle"
 *     "cats links"
 *
 *  日本語と英語で境目が違うため、同じ中身を 2 回書いています
 *  （英語版は #hidden_box に is-en が付いています）。直すときは両方直してください。 */

/* 日本語 */
@media screen and (max-width: 1339px) {
  #hidden_box:not(.is-en) .ibx-ctrl__inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      "row  toggle"
      "cats links";
  }
  #hidden_box:not(.is-en) .ibx-ctrl__main  { display: contents; }
  #hidden_box:not(.is-en) .ibx-ctrl__row   { grid-area: row; min-width: 0; }
  #hidden_box:not(.is-en) .ibx-ctrl__walk  { flex: 0 0 auto; padding: 0 18px; }  /* 検索欄に幅を回す */
  #hidden_box:not(.is-en) .ibx-ctrl__links { grid-area: links; }
  #hidden_box:not(.is-en) label.ibx-ctrl__toggle { grid-area: toggle; margin-left: 0; }

  /* 部門は 2×2（田の字）。★ 四隅の丸み */
  #hidden_box:not(.is-en) .ibx-ctrl__cats {
    grid-area: cats;
    display: grid;
    grid-template-columns: 1fr 1fr;
    margin: 0;
    border-radius: 15px;
  }
  #hidden_box:not(.is-en) .ibx-ctrl__cats a { padding: 6px 10px; white-space: normal; }
  #hidden_box:not(.is-en) .ibx-ctrl__brk { display: inline; }

  /* 閉じているときは 1 段だけ */
  #hidden_box:not(.is-en) #label1:not(:checked) ~ .hidden_show .ibx-ctrl__inner { grid-template-areas: "row toggle"; }
  #hidden_box:not(.is-en) #label1:not(:checked) ~ .hidden_show .ibx-ctrl__cats  { display: none; }
}

/* 英語 */
@media screen and (max-width: 1399px) {
  #hidden_box.is-en .ibx-ctrl__inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      "row  toggle"
      "cats links";
  }
  #hidden_box.is-en .ibx-ctrl__main  { display: contents; }
  #hidden_box.is-en .ibx-ctrl__row   { grid-area: row; min-width: 0; }
  #hidden_box.is-en .ibx-ctrl__walk  { flex: 0 0 auto; padding: 0 18px; }
  #hidden_box.is-en .ibx-ctrl__links { grid-area: links; }
  #hidden_box.is-en label.ibx-ctrl__toggle { grid-area: toggle; margin-left: 0; }

  #hidden_box.is-en .ibx-ctrl__cats {
    grid-area: cats;
    display: grid;
    grid-template-columns: 1fr 1fr;
    margin: 0;
    border-radius: 15px;
  }
  #hidden_box.is-en .ibx-ctrl__cats a { padding: 6px 10px; white-space: normal; }
  #hidden_box.is-en .ibx-ctrl__brk { display: inline; }

  #hidden_box.is-en #label1:not(:checked) ~ .hidden_show .ibx-ctrl__inner { grid-template-areas: "row toggle"; }
  #hidden_box.is-en #label1:not(:checked) ~ .hidden_show .ibx-ctrl__cats  { display: none; }
}