/* common
**************/
@import url('https://fonts.googleapis.com/css2?family=EB+Garamond:ital,wght@0,400..800;1,400..800&family=Noto+Serif+JP:wght@200..900&display=swap');

/* <link
    href="https://fonts.googleapis.com/css2?family=EB+Garamond:ital,wght@0,400..800;1,400..800&family=Noto+Serif+JP:wght@200..900&display=swap"
    rel="stylesheet"> */

:root {
  --primary-color: #CBA373;
  --secondary-color: #fff;
  --tertiary-color: #E2D2BF;
  --foreground-color: #fff;
  --foreground-inverted-color: #000;
  --background-color: #0d0d0d;
  --background-secondary-color: #050505;
  --main-color-1: #101010;
  --main-color-2: #0d0d0d;
  --main-color-3: #050505;
  --main-color-4: #212121;

  --logo-color: #d4b22d;

  --header-background-color: rgba(0, 0, 0, 0.3);
  --header-tel-color: #fff;

  --gnav-background-color: #222;
  --gnav-en-color: var(--primary-color);

  --slide-arrows-color: var(--foreground-inverted-color);
  --slide-arrows-bg-color: var(--foreground-color);

  --gradient-color-1: linear-gradient(90deg, #CBA373, #BB8443);
  --gradient-color-2: linear-gradient(180deg, #fff, #CBA373);
  --gradient-color-3: linear-gradient(180deg, #CBA373, #BB8443);
  --gradient-color-4: linear-gradient(180deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, .5) 85%, rgba(0, 0, 0, 1) 100%);
  --gradient-color-5: linear-gradient(45deg, #1f1e1e, #3f3c37);

  --base-kana-font: "Noto Serif JP", "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
  --base-font-family: "EB Garamond", "Noto Serif JP", "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
  --base-alphabetic-font: "EB Garamond", sans-serif;
}

.logo-text {
  fill: var(--logo-color);
}



/*****************************
 * 背景画像
*****************************/
/* body
**************/
body {
  background: url(../img/bg/premium/bg-fix.jpg) fixed no-repeat center top;
  background-size: cover;
}

@media (max-width: 767px) {
  body::before {
    background-image: url(../img/bg/premium/bg-fix.jpg);
    background-repeat: no-repeat;
    background-position: 50% 100%;
    background-size: cover;
  }
}

/* header
**************/
@media (max-width: 767px) {
  .header__contents {
    background: url(../img/bg/premium/footer-bg.jpg) no-repeat;
    background-size: cover;
  }
}

#gnav .container {
  background: url(../img/bg/premium/nav-bg.jpg);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

#gnav.fixed .header__contents {
  background: url(../img/bg/premium/footer-bg.jpg) no-repeat;
  background-size: cover;

}

/* footer
**************/
footer {
  background: url(../img/bg/premium/footer-bg.jpg) no-repeat;
  background-size: cover;
}

#footer_btn {
  background: url(../img/bg/premium/nav-bg.jpg);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}


/* top
**************/
.cover,
.recommend {
  background-color: var(--background-secondary-color);
}

.freespace {
  position: relative;
  background-repeat: repeat-y;
  background-position: center, center;
  background-image: url(../img/bg/premium/free-space-text-bg-bk.png);
  background-color: #000;
}

#event {
  position: relative;
  background: var(--background-color);
  overflow: hidden;
  border: none;
}

#event::before {
  content: "";
  position: absolute;
  top: 0;
  right: auto;
  width: 100%;
  height: 100%;
  background: url(../img/bg/premium/event-bg.jpg) no-repeat center/cover;
  opacity: .4;
}

#event::after {
  content: "";
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
  background: var(--background-color);
  mix-blend-mode: hue;
  z-index: -1;
}

#event .contents h3 a::before {
    background-image: url(../img/bg/premium/event-mark.svg);
}

.marquee {
  background: url(../img/bg/premium/text-break-bg.jpg) no-repeat;
  background-size: cover;
}

#newface {
  position: relative;
  background: url(../img/bg/premium/new-face-bg.jpg) no-repeat;
  background-size: cover;
}


#ranking {
  background-image: url(../img/bg/premium/ranking-bg.jpg);
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}

@media (max-width: 767px) {

  .freespace {
    background-size: 170% auto;
  }

  #newface {
    background-position: center right 50%;
  }

  footer {
    background-position: 40% 25%;
  }
}

@media (min-width: 768px) {

  .freespace {
    background-size: 85% auto;
  }

  #newface {
    background-position: center;
  }

}

/*event*/
.price li .price-title {
    background-color: var(--primary-color);
    background: var(--gradient-color-1);
  }
.price li {
  border: 2px solid transparent;
  border-image: var(--gradient-color-1) 1;
  background: linear-gradient(90deg, #171717, #111111 70%, #000000);
}

/*****************************
 * 文字色調整
*****************************/
/* 新人一覧 */
/* #newface .name,
#newface .prof,
#newface .comment, */
/* キャスト詳細 */
/* #profile .name,
#profile .prof, */
#schedule .schedule-list .time,
/* ランキング */
#ranking .name,
#ranking .prof,
/* 絞り込み */
.search .search-area select {
  color: var(--foreground-inverted-color);
}


.search .search-area::before { 
  background-color:  var(--foreground-inverted-color);
}
/* TOPランキング */
#ranking .splide-ranking .splide__slide .name {
  color: var(--foreground-color);
}

#access th {
  background-color: #3f3c37;
}

th,
td {
  border: 1px solid var(--main-color-4);
}

/*****************************
 * その他 色調整
*****************************/
#gnav .container ul li a:hover {
  background-color: rgba(255, 255, 255, 0.1);
}

.cast-card .tag,
.newface-list li .castdata .tag ul li,
#profile>.container .tag ul li,
#profile>.container .tag ul li,
.cardlist li a .info .catch {
  color: var(--main-color-4);
}

.search .go {
  background-color: #BB8443;
}


@media (max-width: 767px) {

  .cast-card .tag,
  .newface-list li .castdata .tag ul li,
  #profile>.container .tag ul li,
  #profile>.container .tag ul li,
  .cardlist li a .info .catch {
    font-weight: 700;
  }
}