@charset "UTF-8";
/*
デビスカップの色を例に変更しています。

■リンク、ボタン等の色
#ce659d

■差し色（カレントのライン等の色）
#3399cc

■テーブルのthの色
#ce659d
■テーブルの二つ目のthの色(.type_01)
#9F4A78

■画像色変更
  filterで変更するか、画像を変更するかのどちらかの方法で。
 ジェネレーター
 https://angel-rs.github.io/css-color-filter-generator/

filter: brightness(0) saturate(100%) invert(70%) sepia(51%) saturate(1798%) hue-rotate(289deg) brightness(82%) contrast(97%);
*/

/*===========================================================
 default
===========================================================*/
/* ------------------------
 基本のリンク色
 -------------------------*/
a {
  color: #ce659d;
}
a:hover {
  color: #ce659d;
}
/*===========================================================
 グローバルナビの非表示・表示設定
===========================================================*/
/* ------------------------
 グローバルナビのPC用の非表示　　
 .Tab2461 のクラスを非表示にしたいページのクラス名にする。
 -------------------------*/
#header .token_menu ul li.Tab2461,
#header .token_menu ul li.Tab2456,
#header .token_menu ul li.Tab2448,
#header .token_menu ul li.Tab2437,
#header .token_menu ul li.Tab2659,
#header .token_menu ul li.Tab2677 {
  display: none;
}
/* ------------------------
 グローバルナビのスマホ用の表示　　
 PC版で非表示したものをスマホ版で表示させる。
 -------------------------*/
@media screen and (max-width: 768px) {
#header .token_menu ul li.Tab2461 {
    display: block;
  }
}

/*===========================================================
 skin
===========================================================*/
/* ------------------------
 トップページの背景色
 -------------------------*/
._Index .content_01 {
  background-color: #ce659d;
}
/* ------------------------
 フッター
 -------------------------*/
/* フッターの背景色 */
#footer .foot_wrap {
  background-color: #ce659d;
  color: #fff;
}
/* ページトップの色*/
.pagetop a {
  filter: brightness(0) saturate(100%) invert(70%) sepia(51%) saturate(1798%) hue-rotate(289deg) brightness(82%) contrast(97%);
}
/*===========================================================
 header
===========================================================*/
/* ------------------------------------
　ページタイトルの背景色と画像の変更
----------------------------------------*/
.pagetitle {
  background: url(/Portals/0/image/billiejeanking_cup/common/pagetitle_bg.png) center right no-repeat #ce659d;
  background-size: contain;
}
/* ------------------------------------
　文字変更の箇所
----------------------------------------*/
.head_font img {
  filter: brightness(0) saturate(100%) invert(70%) sepia(51%) saturate(1798%) hue-rotate(289deg) brightness(82%) contrast(97%);
}
.head_font ul li.active {
  border-color: #ce659d;
}

/* ------------------------------------
 グローバルナビ　カレント下線の色変更
----------------------------------------*/
#header .token_menu ul ul li a.currentLink:after {
  background-color: #3399cc;
}
/* ------------------------------------
 メガメニュー
----------------------------------------*/
.megamenu_wrap > ul > li > a:before,
.megamenu_wrap > ul > li > ul > li > a:before {
  filter: brightness(0) saturate(100%) invert(70%) sepia(51%) saturate(1798%) hue-rotate(289deg) brightness(82%) contrast(97%);
}
.megamenu_wrap > ul > li > a:after {
  border-color: #ce659d;
}
.megamenu_wrap > ul > li > a:hover,
.megamenu_wrap > ul > li > ul > li > a:hover {
  color: #ce659d;
}
.megamenu_wrap > ul > li > ul > li > ul > li > a:before {
  background-color: #ce659d;
}
.mega_closeBtn:hover {
  color: #ce659d;
}
/* 閉じるの× */
.mega_closeBtn p:before,
.mega_closeBtn p:after {
  background-color: #ce659d;
}
/*===========================================================
 sample
===========================================================*/
/* ------------------------------------
　リンクテキスト
----------------------------------------*/
a.link_txt:hover,
.link_txt a:hover {
  color: #ce659d;
}
a.link_txt:before,
.link_txt a:before {
  background: url(/Portals/0/image/common/ico_arrow_r.svg) 0 0 no-repeat;
  filter: brightness(0) saturate(100%) invert(70%) sepia(51%) saturate(1798%) hue-rotate(289deg) brightness(82%) contrast(97%);
}
/* 丸枠矢印のリンクボタン */
a.link_txt_circle:hover,
.link_txt_circle a:hover {
  color: #ce659d;
}
a.link_txt_circle:before,
.link_txt_circle a:before {
  background: url(/Portals/0/image/common/ico_arrow_r.svg) 0 0 no-repeat;
  filter: brightness(0) saturate(100%) invert(70%) sepia(51%) saturate(1798%) hue-rotate(289deg) brightness(82%) contrast(97%);
}
a.link_txt_circle:after,
.link_txt_circle a:after {
  border: #ce659d solid 2px;
}

/* ------------------------------------
　リンクボタン
----------------------------------------*/
a.link_btn,
.link_btn a {
  background-color: #ce659d;
  border: #ce659d solid 2px;
}
a.link_btn:hover,
.link_btn a:hover {
  color: #ce659d;
}
/* ------------------------------------
　ページ内リンク
----------------------------------------*/
a.link_inpage:before,
.link_inpage a:before {
  filter: brightness(0) saturate(100%) invert(70%) sepia(51%) saturate(1798%) hue-rotate(289deg) brightness(82%) contrast(97%);
}

/* ------------------------------------
　見出しの装飾色変更
----------------------------------------*/
h2:after {
  background-color: #ce659d;
}
h3 {
  border-bottom: #ddd solid 3px;
}
h4:after {
  background-color: #ce659d;
}
h5:after {
  background-color: #3399cc;
}

/* ------------------------------------
　テーブル
----------------------------------------*/
table.table_basic > tbody > tr > th,
table.tableBasic > tbody > tr > th {
  background-color: #ce659d;
  color: #fff;
  border-color: #fff;
}
table.table_basic > tbody > tr > th:first-child,
table.tableBasic > tbody > tr > th:first-child {
  border-left-color: #ce659d;
}
table.table_basic > tbody > tr:first-child > th,
table.tableBasic > tbody > tr:first-child > th {
  border-top-color: #ce659d;
}
table.table_basic.type_01 > tbody > tr:nth-child(2) > th,
table.tableBasic.type_01 > tbody > tr:nth-child(2) > th {
  background-color: #9F4A78;
}
table.table_basic.type_01 > tbody > tr:nth-child(2) > th:first-child,
table.tableBasic.type_01 > tbody > tr:nth-child(2) > th:first-child {
  border-left-color: #9F4A78;
}
table.table_basic.type_02 > tbody > tr > th,
table.tableBasic.type_02 > tbody > tr > th {
  background-color: transparent;
  color: #1c1c1c;
  border: none;
  border-bottom: #ce659d solid 2px;
}
/* ------------------------
 トップページ
 -------------------------*/
/* スライダー背景 */
._Index .slicksliderArea {
  position: relative;
  background: #ce659d;
}
._Index .slicksliderArea ul.slick-dots li button:hover,
._Index .slicksliderArea ul.slick-dots li.slick-active button {
  background-color: #ce659d;
}
._Index .slicksliderArea .btnPause:before,
._Index .slicksliderArea .btnPause:after {
  background-color: #ce659d;
}
/*  */
._Index .index_heading span,
._Index .index_heading .title {
  color: #ce659d;
}
._Index .index_heading h2:after {
  background-color: #3399cc;
}
/* ------------------------
 カルーセル
 -------------------------*/
.carousel_area .slick-arrow:after {
  filter: brightness(0) saturate(100%) invert(70%) sepia(51%) saturate(1798%) hue-rotate(289deg) brightness(82%) contrast(97%);
}
.carousel_area .controls-btn.pause-btn:before,
.carousel_area .controls-btn.pause-btn:after {
  background-color: #ce659d;
}
.carousel_area .controls-btn:hover {
  border-color: #ce659d;
}

/*===========================================================
サイドナビ
===========================================================*/
.side_nav ul ul li.parentItem > a,
.side_nav ul ul li.currentItem > a {
  color: #ce659d;
}
.side_nav > ul > li > a,
.side_nav ul li a.toggleSwitch .toggleBtn:before,
.side_nav ul li a.toggleSwitch .toggleBtn:after {
  background-color: #ce659d;
}
.side_nav ul li a:hover {
  color: #ce659d;
}
/* カレント */
.side_nav ul li.currentItem > a:before {
  background-color: #3399cc;
}


.side_nav ul li.Tab2448,
.side_nav ul li.Tab2456,
.side_nav ul li.Tab2659 {
  display:none;
}
/*===========================================================
　共通：汎用フォーム（お問い合わせフォーム等）
===========================================================*/
/* 住所検索のボタン */
[id*="ViewMailForm_pnlInput"] .icmdtp-formItem input[type="submit"].btnSearchZipCode {
  background-color: #ce659d;
  border-color: #ce659d solid;
}
[id*="ViewMailForm_pnlInput"] .icmdtp-formItem input[type="submit"].btnSearchZipCode:hover {
  background-color: #fff;
  color: #ce659d;
}
/*  確認ボタン　送信ボタン*/
.icmdtp-formItem .formSubmitarea input[id^="dnn_"][type="submit"][id$="Confirm"],
.icmdtp-formItem .formSubmitarea input[id^="dnn_"][type="submit"][id$="ConfirmSend"] {
  background-color: #ce659d;
  border-color: #ce659d;
  color: #fff;
}
.icmdtp-formItem .formSubmitarea input[id^="dnn_"][type="submit"][id$="Confirm"]:hover,
.icmdtp-formItem .formSubmitarea input[id^="dnn_"][type="submit"][id$="ConfirmSend"]:hover {
  background-color: #fff;
  color: #ce659d;
}
/*===========================================================
　タブ
===========================================================*/
div.ViewTabs > ul.ui-tabs-nav > li.ui-tabs-active a,
div.ViewTabs > ul.ui-tabs-nav > li > a:hover {
  color: #1c1c1c;
  border-color: #3399cc;
}
/*===========================================================
　試合・結果の部分
===========================================================*/
.match_result > tbody > tr > th.score:after {
  background-color: #3399cc;
}
.match_result > tbody > tr > th.score,
.match_result > tbody > tr > td.score {
  color: #ce659d;
}
/*===========================================================
　お知らせ
===========================================================*/
/* カテゴリの枠線 */
ul.news_list li .news_category > span {
  border: 1px solid #ce659d;
}
/* お知らせ詳細の見出し */
.news_detail h1.newsTitle:after {
  background-color: #ce659d;
}
.news_detail .news_description h3:after {
  background-color: #ce659d;
}
.news_detail .news_description h4:after {
  background-color: #3399cc;
}
/*===========================================================
　スポンサーのタイトルの下線
===========================================================*/
._Index .benner_area h3:after {
  background-color: #3399cc;
}

/*===========================================================
　追加CSS
===========================================================*/
._Index .benner_area h3:after {
  background-color: #3399cc;
}

.d-flex {
  display:flex;
  flex-direction:row;
}

.head-logo_link-page {
  margin-left: 10%;
  max-height:90px;
}

.link_text {
  font-size:.95em;
      color: #1c1c1c;
    text-decoration: none;
    position: relative;
    display: inline-flex;
    padding: 0 25px 0 0;
    align-items: center;
    line-height: 1.4;
    margin-bottom:0;
}

.link_text:before {
    content: "";
    width: 12px;
    height: 12px;
    background: url(/Portals/0/image/common/ico_arrow_r.svg) 0 0 no-repeat;
    filter: brightness(0) saturate(100%) invert(70%) sepia(51%) saturate(1798%) hue-rotate(289deg) brightness(82%) contrast(97%);
    position: absolute;
    right: 5px;
    left: auto;
    bottom: auto;
    top: 50%;
    transform: translateY(-50%);
    transition: right 0.2s;
}

#header .logo img {
  max-height: 90px
}

#header .logo .head-logo_link-page img {
  max-height: 55px
}

.txt_center {
  text-align:center;
}

.txt_3xl.head {
  margin-bottom:.5em;
}

.evolution-img {
  display:block;
  width:100%;
  max-width:600px;
  height: auto;
  margin: 30px auto;
}

.evolution-txt {
  line-height: 1.5;
  margin-bottom:40px;
}

.link_btn a.top-link {
  padding-top: 2rem;
  padding-bottom: 2rem;
  font-size:18px;
  background-color:#ce659d !important;
  border:none !important;
}

.link_btn a.top-link:hover {
  color:#fff;
}

.mt30 {
  margin-top: 30px;
}

.logoArea {
  padding:5px 0 !important;
}

/*===========================================================
 スマホ
===========================================================*/
@media screen and (max-width: 768px) {
  /* ハンバーガーメニューの色 */
  .burger_motion.main p span:before,
  .burger_motion.main p span:after,
  .burger_motion.main p span,
  #header #gNav .token_menu > ul > li,
  #header #gNav .token_menu > ul > li > ul > li {
    background-color: #ce659d;
  }
  /* ハンバーガーメニューのカレントの文字色 */
  #header #gNav .token_menu > ul > li > ul > li > ul > li a.currentLink {
    color: #ce659d;
  }
  .head-logo_link-page {
    display:none;
  }
  .txt_3xl.head {
    font-size: 16px;
  }
  .logoArea {
    padding:8px 0 !important;
  }
  iframe {
    width: 100% !important;
    height: auto;
    aspect-ratio: 16 / 9;
  }
}
