/*
Theme Name: RISCON TOKYO 2025 EN
Description:
Author: RISCON
Template: exhibitor-search
Version: 1.0.0
Text Domain: riscon-en
*/

:root {
  /* =========================================================
    Color customization
  ========================================================= */
  --c-primary: #C7000B; /* メインカラー */
  --c-primary-dark: #C4000A; /* キーワード検索の検索ボタン背景色 */
  --c-primary-gradation: #C60709; /* 「出展社一覧」タイトルの背景グラデーション */
  --c-primary-light: #F7D6D6; /* 出展社詳細ページ「展示会名」欄背景色 */
  --c-primary-medium: #E38B8A; /* 管理者用メッセージ背景色 */
  --c-contrasting: #5098EA;
}
/* 準備中およびイベント終了ページのロゴサイズ */
.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, #0A0003, #DF042A);
  background-repeat:
    no-repeat,
    no-repeat;

  background-position:
    top left,
    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;
}