/*
Theme Name: SEECAT 2025 EN
Description:
Author: SEECAT
Template: exhibitor-search
Version: 1.0.0
Text Domain: seecat-en
*/

:root {
  /* =========================================================
    Color customization
  ========================================================= */
  --c-primary: #171F55; /* メインカラー */
  --c-primary-dark: #151B4D; /* キーワード検索の検索ボタン背景色 */
  --c-primary-gradation: #1A245D; /* 「出展社一覧」タイトルの背景グラデーション */
  --c-primary-light: #A6A9D3; /* 出展社詳細ページ「展示会名」欄背景色 */
  --c-primary-medium: #4C5590; /* 管理者用メッセージ背景色 */
  --c-contrasting: #EA9850;
}
/* 準備中およびイベント終了ページのロゴサイズ */
.notice__logo {
  --logo-width: clamp(140px, 18vw, 240px);
}
/* 新商品アイコン */
/* .products__icon {
  --c-icon-new-item: #E95513;
  --c-icon-white:  var(--c-black);
} */

/* =========================================================
  Customize header footer
========================================================= */
.wrapper {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}
main {
  flex: 1;
}
.site-header__inner {
  padding: clamp(16px, 2.08vw, 20px) 0;
}
.page-title-wrap {
  padding: 0;
}
.page-title {
  max-width: none;
  padding: clamp(10px, 1.52vw, 22px) 0;
  border-top: 3px solid #000;
  border-radius: 0;
  background-image:
    url('assets/img/bg-title.png'),
    linear-gradient(to right, #020818, #001767);
  background-repeat:
    no-repeat,
    no-repeat;

  background-position:
    bottom right,
    left;
  background-blend-mode:
    lighten,
    normal;
}
.page-title::before,
.page-title__inner::before,
.page-title::after,
.page-title__inner::after,
.exhibitor-info__title::before,
.exhibitor-info__title::after {
  display: none;
}
.footer {
  padding: clamp(20px, 1.52vw, 22px) clamp(30px, 2.3vw, 30px);
  background-color: #000;
  color: #fff;
}
@media screen and (max-width: 767px) {
  .page-title {
    background-size:
      50% auto,
      auto auto;
  }
}

/* =========================================================
  For modal
========================================================= */
.js-modal-btn:has(img) {
  position: relative;
  display: block;
  text-decoration: none;
}
.js-modal-btn:has(img)::before {
  position: absolute;
  content: "";
  display: block;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  border: 6px solid var(--c-primary-light);
  width: 60px;
  height: 60px;
}
.js-modal-btn:has(img)::after {
  position: absolute;
  content: "";
  display: block;
  top: 50%;
  left: 50%;
  transform: translate(-40%, -50%);
  border-style: solid;
  border-color: transparent transparent transparent var(--c-primary-light);
  border-width: 15px 0 15px 25px;
}