@charset "UTF-8";
/*color*/
/* mixinCSS Document */
/*----------common----------*/
/*alt*/
/*hover*/
/*text-shadow*/
/*
 top.css
 トップページ用CSS
*/
/* ==========================================
manabi_contentsBox
========================================== */
.manabi-inner {
  width: 100%;
  max-width: 1000px;
  margin: 0 auto;
  padding: 0 4px;
  background: rgba(255, 255, 255, 0.9);
}

br.pc {
  display: block;
}
br.sp {
  display: none;
}

/* ==========================================
date and theme
========================================== */
.manabi_date_area {
  width: 100%;
}
.manabi_date_inner {
  padding: 40px 0 0;
  background: unset;
}
.manabi_date_body p {
  background: url(../../images/top/date.png) no-repeat center center;
  background-size: contain;
  width: 100%;
  height: 88px;
  text-indent: -9999px;
  display: block;
  overflow: hidden;
}

/* ==========================================
topBanner
========================================== */
#topBanner {
  width: 80%;
  max-width: 800px;
  margin: 0 auto;
  padding: 0;
}
#topBanner p {
  width: 100%;
  margin: 10px 0;
}
#topBanner p img {
  width: 100%;
}
#topBanner p.bnr_form {
  margin-bottom: 4%;
}

/* ==========================================
topics
========================================== */
#topics {
  /* topics-btn
  ------------------------------ */
}
#topics.topics-area {
  background-color: unset;
  width: 100%;
  max-width: 1000px;
  margin: 60px auto;
  padding: 0 4px;
  background: rgba(255, 255, 255, 0.8);
}
#topics .topics-inner {
  max-width: 960px;
  padding: 40px 0 60px;
}
#topics .topics-btn a {
  padding: 16px;
  line-height: 1;
  background-color: #ffffff;
  border: 1px solid #0042AB;
  color: #0042AB;
  font-weight: bold;
}

.manabi_topics_tit_wrapper {
  background: #bfd500;
  outline: 2px solid #000000;
  outline-offset: 2px;
}
.manabi_topics_tit {
  text-indent: -9999px;
  display: block;
  overflow: hidden;
  background: url(../../images/top/h2_topics.png) no-repeat center center;
  height: 68px;
}

/* ==========================================
movie
========================================== */
.manabi_movie_area {
  width: 100%;
  margin: 10px auto;
}
.manabi_movie_inner {
  position: relative;
}
.manabi_movie_inner:after {
  content: '';
  display: block;
  background-image: url(../../images/common/line_dot.png);
  background-repeat: repeat-x;
  width: 90%;
  height: 7px;
  position: absolute;
  top: 0;
  left: 5%;
}
.manabi_movie_body {
  max-width: 800px;
  margin: 0 auto;
  padding: 60px 0;
}

/* movie-player
------------------------------ */
.manabi_movie_body .player {
  position: relative;
  padding-top: 56.25%;
  border: 4px solid #bfd500;
}
.manabi_movie_body .player iframe {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 10;
}

/* movie-thumbnail
------------------------------ */
.manabi_movie_body .thumb {
  margin: 0 -6px;
  font-size: 0;
  padding-top: 12px;
}
.manabi_movie_body .thumb .thumb_item {
  width: 33.3333%;
  display: inline-block;
  padding: 0 6px;
  box-sizing: border-box;
}
.manabi_movie_body .thumb .thumb_item .img {
  background: #cccccc;
  border: 2px solid #fff200;
  position: relative;
}
.manabi_movie_body .thumb .thumb_item .img img {
  width: 100%;
}
.manabi_movie_body .thumb .thumb_item .title {
  padding-top: 8px;
  font-size: 1.3rem;
}

/* movie-button
------------------------------ */
.manabi_movie_body .btn {
  text-align: center;
  padding-top: 4%;
}
.manabi_movie_body .btn p {
  width: 50%;
  display: block;
  margin: 0 auto;
}
.manabi_movie_body .btn p a {
  display: block;
  background: #fff200;
  border: 1px solid #0042AB;
  color: #0042AB;
  font-size: 1.5rem;
  line-height: 3;
  width: 100%;
  border-radius: 8px;
  position: relative;
}
.manabi_movie_body .btn p a:hover {
  background: #ffffff;
  border: 1px solid #0042AB;
  color: #0042AB;
}
.manabi_movie_body .btn p a:after {
  content: '';
  display: block;
  width: 10px;
  height: 10px;
  border-right: 1px solid #0042AB;
  border-bottom: 1px solid #0042AB;
  position: absolute;
  top: 0;
  right: 6%;
  bottom: 0;
  margin: auto 0;
  -webkit-transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);
  transform: rotate(-45deg);
}

/* ==========================================
cast
========================================== */
.manabi_cast_area {
  width: 100%;
  margin: 60px 0 0;
}
.manabi_cast_body {
  padding: 60px 0;
  width: 90%;
  margin: 0 auto;
}
.manabi_cast_tit_wrapper {
  background: #bfd500;
  outline: 2px solid #000000;
  outline-offset: 2px;
}
.manabi_cast_tit {
  text-indent: -9999px;
  display: block;
  overflow: hidden;
  background: url(../../images/top/h2_cast.png) no-repeat center center;
  height: 68px;
}
.manabi_cast_list {
  text-indent: -9999px;
  display: block;
  overflow: hidden;
  background: url(../../images/top/cast.png) no-repeat center top;
  height: 0;
  padding-top: 82.71%;
  background-size: contain;
}

/* ==========================================
concept
========================================== */
.manabi_concept_area {
  width: 100%;
  margin: 60px 0 0;
}
.manabi_concept_body {
  padding: 60px 0;
  width: 90%;
  margin: 0 auto;
}
.manabi_concept_tit_wrapper {
  background: #bfd500;
  outline: 2px solid #000000;
  outline-offset: 2px;
}
.manabi_concept_tit {
  text-indent: -9999px;
  display: block;
  overflow: hidden;
  background: url(../../images/top/h2_concept.png) no-repeat center center;
  height: 68px;
}
.manabi_concept_txt h3 {
  text-indent: -9999px;
  display: block;
  overflow: hidden;
  position: relative;
  height: 92px;
  margin-bottom: 40px;
}
.manabi_concept_txt h3.about {
  background: url(../../images/top/h3_about.png) no-repeat 0 0;
}
.manabi_concept_txt h3.theme {
  background: url(../../images/top/h3_theme.png) no-repeat 0 0;
}
.manabi_concept_txt h3:after {
  content: '';
  display: block;
  background-image: url(../../images/common/line_dot.png);
  background-repeat: repeat-x;
  width: 100%;
  height: 7px;
  position: absolute;
  top: 85px;
  left: 112px;
}
.manabi_concept_txt p {
  text-indent: -9999px;
  display: block;
  overflow: hidden;
  height: 0;
  margin: 60px 0 80px;
}
.manabi_concept_txt p.txt_about {
  background: url(../../images/top/txt_about.png) no-repeat center top;
  background-size: contain;
  padding-top: 24.46%;
}
.manabi_concept_txt p.txt_theme {
  background: url(../../images/top/txt_theme.png) no-repeat center top;
  background-size: contain;
  padding-top: 77.4%;
  margin: 60px 0 0;
}

/* ==========================================
Song
========================================== */
.manabi_song_area {
  width: 100%;
  padding: 40px 0;
}
.manabi_song_body {
  padding: 60px 0 20px;
  width: 90%;
  margin: 0 auto;
}
.manabi_song_body p {
  font-family: 'Hiragino Kaku Gothic Pro', 'ヒラギノ角ゴ Pro W3', Meiryo, メイリオ, Osaka, 'MS PGothic', arial, helvetica, sans-serif;
  font-size: 2.4rem;
  font-feature-settings: "palt";
  letter-spacing: 0.1em;
  text-align: center;
  line-height: 1.8;
  padding-bottom: 1.5em;
  font-weight: bold;
  padding: 0;
}
.manabi_song_body p span {
  font-size: 1.5em;
  letter-spacing: 0.2em;
  color: #fff200;
  text-shadow: #000000 1px 1px 0, #000000 -1px -1px 0, #000000 -1px 1px 0, #000000 1px -1px 0, #000000 0px 1px 0, #000000 0 -1px 0, #000000 -1px 0 0, #000000 1px 0 0;
}
.manabi_song_tit_wrapper {
  background: #bfd500;
  outline: 2px solid #000000;
  outline-offset: 2px;
}
.manabi_song_tit {
  text-indent: -9999px;
  display: block;
  overflow: hidden;
  background: url(../../images/top/h2_song.png) no-repeat center center;
  height: 68px;
}

/* ==========================================
Twitter
========================================== */
.manabi_twitter_area {
  width: 100%;
}
.manabi_twitter_inner {
  padding: 40px 0 60px;
  background: unset;
}
.manabi_twitter_body {
  width: 80%;
  max-width: 800px;
  margin: 0 auto;
  background: #ffffff;
  border: 4px solid #bfd500;
  border-radius: 10px;
  padding: 3% 3% 0;
}

/* twitter-timeline-box
------------------------------ */
.twitter_timeline_box {
  height: 300px;
}

.twitter_timeline_box iframe {
  width: 745px !important;
}

/* ==========================================
program
========================================== */
.manabi_program_area {
  width: 100%;
  padding: 60px 0 0;
}
.manabi_program_body {
  padding: 60px 0 0;
  width: 90%;
  margin: 0 auto;
}
.manabi_program_body p, .manabi_program_body li {
  font-feature-settings: "palt";
  letter-spacing: 0.04em;
  line-height: 1.4;
}
.manabi_program_tit_wrapper {
  background: #bfd500;
  outline: 2px solid #000000;
  outline-offset: 2px;
}
.manabi_program_tit {
  text-indent: -9999px;
  display: block;
  overflow: hidden;
  background: url(../../images/top/h2_program.png) no-repeat center center;
  height: 68px;
}

/* program_tab
------------------------------ */
.manabi_program_body .program_tab_list {
  width: 100%;
  font-size: 0;
}
.manabi_program_body .program_tab_list li {
  display: inline-block;
  width: 12%;
  height: 68px;
  margin-right: 0.11%;
  background-color: #bfd500;
  background-repeat: no-repeat;
  background-size: 100%;
  border-radius: 5%;
  transition: none;
}
.manabi_program_body .program_tab_list li:last-child {
  margin-right: 0;
}
.manabi_program_body .program_tab_list li:hover {
  opacity: 0.6;
  transition: 0.3s;
}
.manabi_program_body .program_tab_list li.active {
  background-color: #6da200;
  transition: none;
}
.manabi_program_body .program_tab_list li.active:hover {
  opacity: 1;
}
.manabi_program_body .program_tab_list li.date0429 {
  background-image: url(../../images/top/program/date/date0429.png);
  background-position: center top 7%;
}
.manabi_program_body .program_tab_list li.date0429.active {
  background-image: url(../../images/top/program/date/date0429.png);
  background-position: center bottom 0;
}
.manabi_program_body .program_tab_list li.date0430 {
  background-image: url(../../images/top/program/date/date0430.png);
  background-position: center top 7%;
}
.manabi_program_body .program_tab_list li.date0430.active {
  background-image: url(../../images/top/program/date/date0430.png);
  background-position: center bottom 0;
}
.manabi_program_body .program_tab_list li.date0501 {
  background-image: url(../../images/top/program/date/date0501.png);
  background-position: center top 7%;
}
.manabi_program_body .program_tab_list li.date0501.active {
  background-image: url(../../images/top/program/date/date0501.png);
  background-position: center bottom 0;
}
.manabi_program_body .program_tab_list li.date0502 {
  background-image: url(../../images/top/program/date/date0502.png);
  background-position: center top 7%;
}
.manabi_program_body .program_tab_list li.date0502.active {
  background-image: url(../../images/top/program/date/date0502.png);
  background-position: center bottom 0;
}
.manabi_program_body .program_tab_list li.date0503 {
  background-image: url(../../images/top/program/date/date0503.png);
  background-position: center top 7%;
}
.manabi_program_body .program_tab_list li.date0503.active {
  background-image: url(../../images/top/program/date/date0503.png);
  background-position: center bottom 0;
}
.manabi_program_body .program_tab_list li.date0504 {
  background-image: url(../../images/top/program/date/date0504.png);
  background-position: center top 7%;
}
.manabi_program_body .program_tab_list li.date0504.active {
  background-image: url(../../images/top/program/date/date0504.png);
  background-position: center bottom 0;
}
.manabi_program_body .program_tab_list li.date0505 {
  background-image: url(../../images/top/program/date/date0505.png);
  background-position: center top 7%;
}
.manabi_program_body .program_tab_list li.date0505.active {
  background-image: url(../../images/top/program/date/date0505.png);
  background-position: center bottom 0;
}
.manabi_program_body .program_tab_list li.date0506 {
  background-image: url(../../images/top/program/date/date0506.png);
  background-position: center top 7%;
}
.manabi_program_body .program_tab_list li.date0506.active {
  background-image: url(../../images/top/program/date/date0506.png);
  background-position: center bottom 0;
}
.manabi_program_body .program_contents {
  padding: 40px 0;
}
.manabi_program_body .program_contents .panel {
  margin: 0 -12px;
  font-size: 0;
}
.manabi_program_body .program_contents .panel.active {
  display: block;
}
.manabi_program_body .program_contents .panel_item {
  width: 33.3333%;
  display: inline-block;
  padding: 0 12px;
  margin-bottom: 4.5%;
  box-sizing: border-box;
  vertical-align: top;
  font-size: 1.7rem;
  text-align: left;
  position: relative;
}
.manabi_program_body .program_contents .panel_thumb {
  border: 1px solid #cccccc;
  font-size: 0;
}
.manabi_program_body .program_contents .panel_thumb img {
  width: 100%;
}
.manabi_program_body .program_contents .panel_title {
  font-weight: bold;
  color: #6da200;
  font-size: 1em;
  padding: 0.5em 0;
}
.manabi_program_body .program_contents .panel_onair {
  padding-bottom: 3.5em;
}
.manabi_program_body .program_contents .panel_btn {
  width: 100%;
  text-align: center;
  position: absolute;
  bottom: 0;
  left: 0;
  padding: 0 12px;
}
.manabi_program_body .program_contents .panel_btn a {
  display: block;
  background: #ffffff;
  border: 1px solid #0042AB;
  color: #0042AB;
  font-size: 1.6rem;
  line-height: 2.5;
  width: 100%;
  border-radius: 8px;
  position: relative;
}
.manabi_program_body .program_contents .panel_btn a:hover {
  background: #fff200;
  opacity: 1;
}
.manabi_program_body .program_contents .panel_btn a::after {
  content: '';
  display: block;
  width: 10px;
  height: 10px;
  border-right: 1px solid #0042AB;
  border-bottom: 1px solid #0042AB;
  position: absolute;
  top: 0;
  right: 6%;
  bottom: 0;
  margin: auto 0;
  -webkit-transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);
  transform: rotate(-45deg);
}
.manabi_program_body .program_contents .panel p.iscome {
  font-family: 'Hiragino Kaku Gothic Pro', 'ヒラギノ角ゴ Pro W3', Meiryo, メイリオ, Osaka, 'MS PGothic', arial, helvetica, sans-serif;
  font-size: 2.4rem;
  font-feature-settings: "palt";
  letter-spacing: 0.1em;
  text-align: center;
  font-weight: bold;
  color: #fff200;
  text-shadow: #000000 1px 1px 0, #000000 -1px -1px 0, #000000 -1px 1px 0, #000000 1px -1px 0, #000000 0px 1px 0, #000000 0 -1px 0, #000000 -1px 0 0, #000000 1px 0 0;
  padding: 40px 0;
}

/* ------------------------------------------------------------------
 SP（〜600px）
------------------------------------------------------------------ */
@media only screen and (max-width: 600px) {
  div.manabi_contentsBox {
    background: #ffffff;
  }

  div.manabi-inner {
    width: 100%;
  }

  /* ==========================================
  date and theme
  ========================================== */
  div.manabi_date_inner {
    width: 90%;
  }
  div.manabi_date_body p {
    height: 0;
    padding-top: 18.03%;
  }

  /* ==========================================
  topBanner
  ========================================== */
  div#topBanner p {
    margin: 0 0 8px;
  }

  /* ==========================================
  topics
  ========================================== */
  #topics.topics-area {
    width: 100% !important;
    margin: 0 !important;
  }

  #topics .topics-inner {
    padding: 8% 0 0 !important;
  }

  br.pc {
    display: none;
  }
  br.sp {
    display: block;
  }

  /* ==========================================
  movie
  ========================================== */
  div.manabi_movie_inner:after {
    width: 100%;
    left: 0;
  }
  div.manabi_movie_body {
    padding: 8% 0;
    width: 100%;
  }
  div.manabi_movie_body .thumb .thumb_item .title {
    font-size: 1.2rem;
  }
  div.manabi_movie_body .btn p {
    width: 80%;
  }
  div.manabi_movie_body .btn p a {
    font-size: 1.3rem;
  }

  /* ==========================================
  cast
  ========================================== */
  .manabi_cast_body {
    width: 96%;
  }
  .manabi_cast_area {
    margin: 8% 0 0;
  }
  .manabi_cast_list {
    background: url(../../images/sp/cast.png) no-repeat center top;
    padding-top: 107.712%;
    background-size: contain;
  }

  /* ==========================================
  concept
  ========================================== */
  div.manabi_concept_body {
    width: 96%;
  }
  div.manabi_concept_area {
    margin: 8% 0 0;
  }
  div.manabi_concept_txt p {
    font-size: 1.4rem;
  }
  div.manabi_concept_txt p.txt_about {
    margin: 6% 0;
  }
  div.manabi_concept_txt p.txt_theme {
    margin: 6% 0 0;
  }

  /* ==========================================
  Song
  ========================================== */
  /* ==========================================
  twitter
  ========================================== */
  div.manabi_twitter_inner {
    background: #ffffff;
  }
  div.manabi_twitter_body {
    width: 90%;
  }

  /* ==========================================
  program
  ========================================== */
  div.manabi_program_area {
    padding: 0;
  }
  div.manabi_program_body {
    width: 96%;
  }

  /* program_tab
  ------------------------------ */
  .manabi_program_body .program_tab {
    padding-top: 3%;
  }
  .manabi_program_body .program_tab_list {
    text-align: center;
  }
  .manabi_program_body .program_tab_list li {
    width: 19.5%;
    margin-right: 0.5%;
    margin-bottom: 0.5%;
  }
  .manabi_program_body .program_tab_list li:nth-child(5) {
    margin-right: 0;
  }
  .manabi_program_body .program_tab_list li.date0429 {
    background-position: center top 17.5%;
  }
  .manabi_program_body .program_tab_list li.date0429.active {
    background-position: center bottom 11.5%;
  }
  .manabi_program_body .program_tab_list li.date0430 {
    background-position: center top 17.5%;
  }
  .manabi_program_body .program_tab_list li.date0430.active {
    background-position: center bottom 11.5%;
  }
  .manabi_program_body .program_tab_list li.date0501 {
    background-position: center top 17.5%;
  }
  .manabi_program_body .program_tab_list li.date0501.active {
    background-position: center bottom 11.5%;
  }
  .manabi_program_body .program_tab_list li.date0502 {
    background-position: center top 17.5%;
  }
  .manabi_program_body .program_tab_list li.date0502.active {
    background-position: center bottom 11.5%;
  }
  .manabi_program_body .program_tab_list li.date0503 {
    background-position: center top 17.5%;
  }
  .manabi_program_body .program_tab_list li.date0503.active {
    background-position: center bottom 11.5%;
  }
  .manabi_program_body .program_tab_list li.date0504 {
    background-position: center top 17.5%;
  }
  .manabi_program_body .program_tab_list li.date0504.active {
    background-position: center bottom 11.5%;
  }
  .manabi_program_body .program_tab_list li.date0505 {
    background-position: center top 17.5%;
  }
  .manabi_program_body .program_tab_list li.date0505.active {
    background-position: center bottom 11.5%;
  }
  .manabi_program_body .program_tab_list li.date0506 {
    background-position: center top 17.5%;
  }
  .manabi_program_body .program_tab_list li.date0506.active {
    background-position: center bottom 11.5%;
  }
  .manabi_program_body .program_contents {
    padding: 6% 0 0;
  }
  .manabi_program_body .program_contents .panel_item {
    width: 50%;
    font-size: 1.4rem;
    margin-bottom: 5%;
  }
  .manabi_program_body .program_contents .panel_btn a {
    font-size: 1.4rem;
  }
  .manabi_program_body .program_contents .panel_btn a::after {
    width: 8px;
    height: 8px;
  }
  .manabi_program_body .program_contents .panel p.iscome {
    padding: 6% 0;
  }
}
/* ------------------------------------------------------------------
 SP 〜 tablet（〜992px）
------------------------------------------------------------------ */
@media screen and (max-width: 992px) {
  .manabi-inner {
    width: 94%;
  }

  /* ==========================================
  date and theme
  ========================================== */
  .manabi_date_inner {
    padding: 6% 0 0;
  }

  /* ==========================================
  topBanner
  ========================================== */
  #topBanner {
    width: 94%;
  }

  /* ==========================================
  topics
  ========================================== */
  #topics.topics-area {
    width: 94%;
  }

  .manabi_topics_tit {
    background-size: contain;
    width: 45.654%;
    height: 0;
    padding-top: 4.96259%;
    margin: 0 auto;
  }
  .manabi_topics_tit_wrapper {
    padding: 2% 0;
    margin: 8% 0 0;
  }
  .manabi_topics_inner {
    margin: 6% auto;
  }

  /* ==========================================
  movie
  ========================================== */
  .manabi_movie_inner:after {
    height: 3px;
    background-size: contain;
  }
  .manabi_movie_body {
    padding: 8% 0;
    margin: 0 auto;
    width: 90%;
  }

  /* ==========================================
  cast
  ========================================== */
  .manabi_cast_body {
    padding: 4% 0;
    margin: 6% auto;
  }
  .manabi_cast_tit {
    background-size: contain;
    width: 81.088%;
    height: 0;
    padding-top: 7.006%;
    margin: 0 auto;
  }
  .manabi_cast_tit_wrapper {
    padding: 2% 0;
  }

  /* ==========================================
  concept
  ========================================== */
  .manabi_concept_body {
    padding: 6% 0 4%;
  }
  .manabi_concept_txt {
    padding: 4% 0 0;
  }
  .manabi_concept_txt h3 {
    height: 0;
    padding-top: 10.43%;
  }
  .manabi_concept_txt h3.about {
    background-size: contain;
    margin-bottom: 0;
  }
  .manabi_concept_txt h3.theme {
    background-size: contain;
    margin-bottom: 0;
  }
  .manabi_concept_txt h3:after {
    width: 100%;
    height: 3px;
    background-size: contain;
    top: unset;
    bottom: 0;
    left: 12.17%;
  }
  .manabi_concept_txt p {
    font-size: 2rem;
  }
  .manabi_concept_tit {
    background-size: contain;
    width: 45.654%;
    height: 0;
    padding-top: 5.10868%;
    margin: 0 auto;
  }
  .manabi_concept_tit_wrapper {
    padding: 2% 0;
  }

  /* ==========================================
  song
  ========================================== */
  .manabi_song_area {
    padding: 8% 0;
  }
  .manabi_song_tit {
    background-size: contain;
    width: 100%;
    height: 0;
    padding-top: 4.76315%;
    margin: 0 auto;
  }
  .manabi_song_tit_wrapper {
    padding: 2% 0;
  }
  .manabi_song_body {
    padding: 8% 0 0;
  }
  .manabi_song_body p {
    font-size: 2rem;
  }

  /* ==========================================
  Twitter
  ========================================== */
  .manabi_twitter_inner {
    padding: 4% 0 8%;
  }
  .manabi_twitter_body {
    width: 100%;
  }

  /* ==========================================
  program
  ========================================== */
  .manabi_program_body {
    padding: 4% 0;
  }
  .manabi_program_tit_wrapper {
    padding: 2% 0;
  }
  .manabi_program_tit {
    background-size: contain;
    width: 62.244%;
    height: 0;
    padding-top: 4.67676%;
    margin: 0 auto;
  }

  /* program_tab
  ------------------------------ */
  .manabi_program_body .program_tab_list li {
    height: 0;
    padding-top: 7.6329%;
  }
}
/* ------------------------------------------------------------------
 PC（993px〜）
------------------------------------------------------------------ */
@media screen and (min-width: 993px) {
  .ntv-pageTop a {
    background-color: #fff200;
    border: 1px solid #0042AB;
  }
  .ntv-pageTop a:after {
    border-top: 2px solid #0042AB;
    border-right: 2px solid #0042AB;
  }
}