@charset "UTF-8";

/* CSS INFORMATION -====================================================
File name : base.css
Description : フォント・カラー・背景変更用css
===================================================================== */
/* =====================================================================
/*    フォント・カラー設定
/*
/*  【グーグルフォント設定】
/*  1.「https://fonts.google.com/」からフォントを選択
/*  2.文字の太さを選択（適当で大丈夫です）
/*  3.右サイドメニュー（出てこない場合は右上のカバンアイコンをクリック）
/*    の下部に出てくる「CSS rules to specify families」を確認。
/*  4.「font-family: ●●●,●●●」の●●●をベースフォント、英字フォントに入力する
/* ================================================================== */
:root {
  /* ベースフォント */
  --font-base: "Noto Sans JP", sans-serif;
  /* 英字フォント */
  --font-en: 'M PLUS Rounded 1c', sans-serif;
  /* テキスト：ベースカラー */
  --color-base: #000000;
  /* アクセントカラー1 緑*/
  --color-accent1: #50ba33;
  /* アクセントカラー1 ベージュ*/
  --color-accent2: #c9a063;
  /* アクセントカラー1 ピンク*/
  --color-accent3: #f5647f;
  /* 背景色：MV */
  --color-bg1: rgba(247, 245, 223, 1);
  /* 背景色：MV下、放送を見逃した方はこちら */
  --color-bg2: rgba(249, 211, 224, 0.7);
  /* 背景色：ナビ、イントロ、トップSNS、バックナンバー */
  --color-bg3: #38b227;
  /* 背景色：コンテンツインナー、ページトップ */
  --color-bg4: #fff;
  /* SNSアイコン */
  --color-sns: #fff;
}

/* 直接色コード等を変更したいときは下記の変数を書き換えてください。 */
/* =====================================================================
    共通
======================================================================*/
.gDef-top-banner {
  background: var(--color-bg2);
}

.wrapper {
  font-family: var(--font-base);
  font-weight: 600;
  color: var(--color-base);
  background-image: url(../images/common/bg_pattern.png);
  background-size: auto;
  background-repeat: repeat;
  background-position: top center;
}

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

.main .inner {
}

.comment dt {
  color: var(--color-accent2);
}

a.btn1 {
  color: #fff;
  background: var(--color-accent1);
}

.en,
.comment dt,
.popup_comment_ttl::before,
.content_group_ttl,
.nav_menu li a .en,
.sec_ttl .ja {
  font-family: var(--font-en);
  font-weight: 600;
}

@media screen and (min-width: 1600px) {
  .wrapper {
    background-size: 100% auto;
  }
}

/* =====================================================================
      header
======================================================================*/
.mv,
.submv {
  background-image: url(../images/common/bg_dot.png);
}

.header_group {
  background-image: url(../images/common/bg_yellow.png);
}

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

.nav_menu li::after {
  border-color: #93e381;
}

.nav {
    background-image: url(../images/common/bg_green.png);
}

.nav_date {
  color: #fff;
  background: var(--color-accent3);
  padding: 0.4em 0 0.5em;
}

.nav_sns li a {
  color: var(--color-sns);
  background: var(--color-accent3);
}

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

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


/* =====================================================================
  20231130 ナビ・タイトル：フォント対応
======================================================================*/

.nav_menu li a {
  color: #ffffff;
}

.sec_ttl .en {
  color: #5f451f;
}

.sec_ttl .ja {
  color: var(--color-accent2);
}

.sec_ttl .en::before,
.sec_ttl .en::after {
  background-color: var(--color-accent2);
}

/* =====================================================================
      footer
======================================================================*/
.pagetop a {
  background: var(--color-accent3);
}

.pagetop a::after {
  border-color: #fff;
}

.copyright {
  color: var(--color-base);
  background: var(--color-bg1);
}

/* =====================================================================
      top
======================================================================*/
.nextstory_num,
.story_num {
  color: var(--color-accent1);
}

.nextstory_date,
.story_date {
  color: var(--color-accent1);
}

.intro {
  color: var(--color-accent2);
  background: url(../images/top/img_sp.png) no-repeat center bottom;
  background-size: contain;
  /* background-image: url(../images/common/bg_yellow.png); */
}

.intro .inner {
  background: transparent;
  margin-bottom: 15em;
}

@media screen and (min-width: 768px) {
  .intro {
    /* background-image: url(../images/common/bg_yellow.png); */
    background: url(../images/top/img.png) no-repeat center bottom;
  }
  .intro .inner {
    margin-bottom: 0em;
  }
}

.intro_content {
  color: var(--color-base);
}

.intro_content .fz_large {
  font-size: 155%;
}

.intro_content .bg_color {
  background: var(--color-accent1);
  color: #fff;
  /*-- sukidoya --*/
  padding: 0.2em 0.5em 0.3em 0.5em;
  border-radius: 5px;
  font-size: 1.4em;
}

.intro_content .color1 {
  color: var(--color-accent1);
}

.intro_content .color2 {
  color: var(--color-accent3);
}

.sns {
  background-image: url(../images/common/bg_yellow.png);
}

.cast_top {
   background-image: url(../images/common/bg_yellow.png);
}

/* =====================================================================
      story
======================================================================*/
.delivery {
  background-image: url(../images/common/bg_green.png);
}

.delivery h3 {
  color: #ffffff;
}

.backnumber {
  background-image: url(../images/common/bg_yellow.png);
}

.backnumber_list li dd {
  color: #5f451f;
}

/* =====================================================================
      chart
======================================================================*/
.chart_list li {
  border-color: var(--color-accent2);
}

.chart_list_name dt {
  vertical-align: top;
  color: var(--color-accent1);
  font-weight: bold;
}

.chart_list_name dd {
  color: var(--color-accent3);
}

/*-- sukidoya --*/

.cast_sub {
  width: 100%;
  background: #fff;
  padding: 1.5em 2em 2em;
  margin-top: 2em;
  border-radius: 20px;
  line-height: 1.785;
}

.cast_sub h4 {
  color:  var(--color-accent2);
  padding: 0 0 1em;
  text-align: center;
  font-size: 1.4em;
}

/* =====================================================================
      cast
======================================================================*/
.cast_list li dl dt {
  color: var(--color-accent1);
}

.cast_list li .popup_btn svg {
  fill: var(--color-accent1);
}

/* =====================================================================
      popup
======================================================================*/
.popup_bg {
  background: rgba(10, 11, 25, 0.92);
}

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

.popup_close {
  background: #2c1b65;
}

.popup_close::before,
.popup_close::after {
  background: var(--color-bg4);
}

.popup_comment_ttl {
  color: var(--color-accent1);
}

.popup_comment_ttl::before {
  color: var(--color-accent2);
}

/* =====================================================================
      original, music, onair
======================================================================*/
.content_group_ttl {
  color: #fff;
  background: var(--color-bg3);
}

.content_desc_huge,
.content_group_item li h3 {
  color: var(--color-accent2);
}

.content_group_item li:not(:last-child) {
  border-color: var(--color-accent2);
}

.content_group_btn li a {
  color: #fff;
  background: var(--color-accent1);
}

.content_group .fz_large {
  font-size: 165%;
}
.content_group .color1 {
  color: var(--color-accent1);
}


/* =====================================================================
      topics
======================================================================*/
.topics_article:not(:last-child) {
  border-color: var(--color-accent2);
}

.topics_article header time {
  color: var(--color-accent2);
}

.topics_article_contents {
  font-weight: normal;
}

.topics_article_contents span,
.topics_article_contents a {
  color: var(--color-accent1);
}

.topics_article_contents strong {
  color: var(--color-accent3);
}

.original {
  background-image: url(../images/common/bg_yellow.png);
}