@charset "UTF-8";

/* CSS INFORMATION -====================================================
File name : base.css
Description : フォント・カラー・背景変更用css
===================================================================== */

/* =====================================================================
  フォント・カラー設定

  【グーグルフォント設定】
  ※游ゴシックなどのシステムフォントでは下記設定は不要です。
  1.「https://fonts.google.com/」からフォントを選択
  2.「Get Font」をクリック
  3.「Get embed code」をクリック 
    ∟ 4.「Embed code in the <head>of your html」を確認。
    ∟ 5.  3行目の「<link href="●●●">」の●●●のURLを23行目の@import url()に入力する

    ∟ 6.「CSS class for a variable style」を確認。
    ∟ 7.「font-family: ●●●,●●●」の●●●をベースフォントに入力する
/* ================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&display=swap');

:root {
  /* ベースフォント */
  --font-base: 'Noto Sans JP', sans-serif;
  /* テキスト：ベースカラー */
  --color-base: #000000;
  /* アクセントカラー1 */
  --color-accent1: #ffffff;
  /* アクセントカラー2 */
  --color-accent2: #cec02b;
  /* 背景色：MV */
  --color-bg1: #2b2b2b;
  /* 背景色：MV下、放送を見逃した方はこちら */
  --color-bg2: #405b8d;
  /* 背景色：ナビ、イントロ、トップSNS、バックナンバー */
  --color-bg3: #27395b;
  /* 背景色：コンテンツインナー、ページトップ */
  --color-bg4: #ffffff;
  /* SNSアイコン */
  --color-sns: #fff;
}

/* 直接色コード等を変更したいときは変数を書き換えてください。 */
/* =====================================================================
    共通
======================================================================*/
.wrapper {
  font-family: var(--font-base);
  font-weight: 400;
  color: var(--color-base);
  background-image: url(../images/common/bg_pattern.jpg);
  background-size: 100% auto;
  background-repeat: repeat;
  background-position: top center;
  background-attachment: fixed;
}

.wrapper a {
  color: var(--color-base);
}

.main .inner {
  background: var(--color-bg4);
}

/* =====================================================================
      header
======================================================================*/
.header_top {
  background: var(--color-bg2);
}

.header_top h1 {
  background: var(--color-bg1);
}

.nav_menu li::before,
.nav_menu li::after {
  border-color: var(--color-bg2) !important;
}

.nav {
  background: var(--color-bg3);
}

.nav_date {
  color: var(--color-base);
  background: var(--color-accent2);
}

.sns_list li a {
  color: var(--color-sns);
  background: var(--color-accent2);
}

.sns_list li a svg {
  fill: var(--color-sns);
}

/* =====================================================================
      footer
======================================================================*/
.footer_banner {
  background: var(--color-bg2);
}

.footer_sns_list li a {
  color: var(--color-sns);
  background: var(--color-accent2);
}

.footer_sns_list li a svg {
  fill: var(--color-sns);
}

.pagetop a {
  background: var(--color-bg4);
}

.pagetop a::after {
  border-color: var(--color-base);
}

.copyright {
  color: var(--color-bg4);
  background: var(--color-bg2);
}

/* =====================================================================
      info
======================================================================*/
.info_content time {
  color: var(--color-bg4);
  background: var(--color-accent2);
}

.info_content h3,
.info_content h4 {
  color: var(--color-accent2);
}

.info_content h5 span {
  background: var(--color-bg3);
}

.info_content p a {
  color: var(--color-accent1);
}

.sns {
  background: var(--color-bg3);
}

/* =====================================================================
      nextstory
======================================================================*/
/*.nextstory {
  background: var(--color-bg3);
}*/

.nextstory_date {
  color: var(--color-bg4);
  background-color: var(--color-accent2);
}

/* =====================================================================
    cast
======================================================================*/

.cast {
  background: var(--color-bg3);
}

.cast_list li dl dt {
  color: var(--color-accent2);
}

.cast_item dl dt {
  color: var(--color-bg4);
  background: var(--color-accent2);
}

/* =====================================================================
    tver
======================================================================*/
.tver {
  background-color: var(--color-bg3);
}

/* =====================================================================
    news & backnumber 
======================================================================*/
.n_b {
  background: var(--color-bg3);
}

.news_list li {
  border-color: #ededed;
}

.news_list li time {
  color: var(--color-bg4);
  background: var(--color-accent2);
}

.news_list li p {
  color: #717171;
}

/*# sourceMappingURL=base.css.map */