/*設定*/
:root {
  /* ヘッダー */
  --header-bg-color: #ffffff;/* ヘッダーの背景色 */
  --header-hover--color: #c1cedb;/* ホバー時の背景色 */
  --header--active-color: #848484;/* タブが選択された時の背景色 */
  
  /* トップ */
  --main-title-color: #164A83;/* タイトルテキストの色 */
  --main-text-color: #333333;/* テキスト色 */
  --table-title-line-color: #164A83;/* タイムテーブルのタイトルアンダーラインの色 */
  --table-venue1-line-color: #164A83;/* 会場名 アンダーラインの色 */
  --table-venue2-line-color: #00FFF0;/* 会場名 アンダーラインの色 */
  --table-bg-color: #FFFFFF80;/* タイムテーブルの背景色 */
  --table-booth-bg-color: #FFFFFF;/* タイムテーブル内コンテンツの背景色 */
  --table-booth-bghover-color1:#c1cedb;/* タイムテーブル内コンテンツのホバー時の背景色 */
  --table-booth-bghover-color2:#c1cedb;/* タイムテーブル内コンテンツのホバー時の背景色 */
  --table-time-color: #525252;/* タイムテーブル内 時間軸の色 */
  --button-bg-color:#297BAB;/* 上に戻るボタンの背景色 */
  --button-icon-color:#ffffff;/* 上に戻るボタンの矢印色 */

  /* チケットはこちらボタン */
  --ticket-text-color1:#ffffff;/* チケットボタン テキスト色 */
  --ticket-btn-color1: #297BAB;/* チケットボタン グラデーション背景色1 */
  --ticket-btn-color2: #164A83;/* チケットボタン グラデーション背景色2 */
  --ticket-hover-color: #ffffff;/* チケットボタン ホバー時の背景色 */
  --ticket-text-color2:#164A83;/* チケットボタン ホバー時のテキスト色 */

  /* ブースの一覧ページ */
  --booth-list-color: #164A83;/* ブースタイトル横の色 */
  --booth-search-color: #164A83;/* 絞り込むボタンの背景色・「＋」アイコン、「絞り込むボタン」色 */
  --booth-icon-color: #FFFFFF;/* 右上アイコン色 */
  --booth-pagetop-color: #164A83;/* イベントトップページ「もっとみる」 */
  --booth-pagination-color: #164A83;/* ページ番号の色 */
  
  /* ブースの中身 */
  --booth-detail-color: #164A83;/*ブースタイトルの背景色*/
  /*--booth-textbox-color: #f6f1ed;*//* ブース 注意書きの背景色 */
  /*--booth-other-color: #164A83;*//* ブース その他のおすすめ〇〇の色 */
}

/* 背景画像 */
.widget__wrap, .list__wrap, .detail__wrap {
  background-repeat: no-repeat !important;
  background-image: url(https://doshin.eventos.tokyo/file/wysiwyg/1105/file-9f6a23a0-9e14-4167-a0fb-edba8c7d998d.jpg);
  background-size: 100% auto;
  background-position: top right;
  background-attachment: fixed;
  padding: 0 !important;
}


@media screen and (max-width: 960px) {
  .widget__wrap, .list__wrap, .detail__wrap {
    background-repeat: no-repeat !important;
    background-image: url(https://doshin.eventos.tokyo/file/wysiwyg/1105/file-05e800ef-05c3-4ed4-9a53-4966a5932765.jpg);
    background-size: 100% auto;
    background-position: top right;
    background-attachment: fixed;
    margin-top: 3.8em;
  }
}

/* ヘッダー */
.header__wrap {
  position: fixed;
  z-index: 1000;
  background: #fff;
}

@media only screen and (min-width: 850px) {
  .header__wrap {
    height: 48px !important;
  }
}

.header-tab__name {
  padding: 0 15px;
}

.header-tab__name:hover {
  padding: 0 15px;
  border-radius: 10px;
  background: var(--header-hover--color);
  transition: 0.3s;
}

.header-tab__active__event {
  border-bottom: none !important;
  color: var(--header--active-color) !important;
}

.v-tab:before {
  display: none;
}

@media only screen and (min-width: 850px) {
  .menu__name {
    display: none !important;
  }
  .header__wrap {
    height: 48px !important;
  }
}

/* チケットはこちらボタン */
.btn {
  width: 460px;
  line-height: 70px;
  text-align: center;
  margin: 30px auto 80px;
}

.btn a {
  text-decoration: none;
  font-size: 20px;
  font-weight: bold;
  letter-spacing: .2em;
  display: block;
  width: 100%;
  color: var(--ticket-text-color1);
  /* ホバー後の背景カラー */
  background: var(--ticket-hover-color);
  border-radius: 50px;
  box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);
  position: relative;
  z-index: 0;
}


.btn a::before {
  content: '';
  left: 0;
  width: 100%;
  height: 100%;
  /* ホバー前の背景カラー */
  background: linear-gradient(90deg, var(--ticket-btn-color1), var(--ticket-btn-color2));
  border-radius: 50px;
  position: absolute;
  z-index: -1;
}

.btn a:hover::before {
  opacity: 0;
  transition: all 1s ease;
}


/* ホバー後のテキストカラー */
.btn a:hover {
  color: var(--ticket-text-color2);
  transition: all .3s ease;
}


@media only screen and (max-width: 768px) {
  .btn{
    width: 240px;
    line-height: 54px;
    position: static;
    border-radius: 97px;
    background: linear-gradient(90deg, var(--ticket-btn-color1), var(--ticket-btn-color2));
    margin: 30px auto 0px;
  }
  .btn a{
    font-size: 16px;
  }
  .btn::before,.btn::after{
    display: none;
  }
}

/*ブースの一覧ページ*/
/*背景調整*/  
section.contents__wrap.list__contents>section>div {
  background: transparent !important;
}

.booth-list__item {
  background-color: #fff;
}


/*ブースタイトル横の色*/
.booth-list-title__text {
  border-color: var(--booth-list-color) !important;
}

/*「条件を指定して絞り込む」背景色*/
.booth-search__button {
  background-color: var(--booth-search-color) !important;
}

/*「+」の色*/
section.contents__wrap.list__contents>section>form>div>div>div>button>div>div>p {
  color: var(--booth-search-color);
}

/*右上アイコンの色*/
button:nth-child(1)>span>i, button:nth-child(2)>span>i {
  color: var(--booth-pagetop-color) !important;
}

/*「絞り込む」ボタンの色*/
button.booth-search__action-button.v-btn.v-btn--depressed.v-btn--flat.v-btn--outlined.theme--light.v-size--default {
  color: var(--booth-search-color) !important;
  caret-color: var(--booth-searchcolor) !important;
}


/*ページ番号の色*/
.v-pagination__item--active {
  background-color: var(--booth-pagination-color) !important;
  border-color: var(--booth-pagination-color) !important;
}

/*ブースの中身*/
/*ブースタイトルの背景色*/
.detail-title__text h2 {
  background-color: transparent !important;
}

/*ブースタイトル下のアンダーライン*/
.base-background-color {
  background-color: var(--booth-detail-color) !important;
}

/* ブースの詳細ページ */
.detail__wrap {
  height: 100vh;
}

.detail__wrap .detail__contents .booth__wrap {
  background: #FFFFFF;
  margin: 0 100px;
  padding: 10px 20px !important;
}

/* ページトップに戻るボタン(各ページ共通) */
.top-button__wrap .top-button__content {
  background-color: var(--button-bg-color) !important;
}

.top-button__wrap .top-button__content i {
  color: var(--button-icon-color) !important;
}

.contents__wrap.detail__contents {
  display: flex;
  justify-content: center;
}