@charset "UTF-8";
/*
html5doctor.com Reset Stylesheet
v1.6.1
Last Updated: 2010-09-17
Author: Richard Clark - http://richclarkdesign.com
Twitter: @rich_clark
*/
html {
  margin: 0;
  padding: 0;
  height: 100%;
}

body {
  background: #ffffff;
  font-size: 100%;
  line-height: 1;
}

/*要素のフォントサイズやマージン・パディングをリセットしています*/
html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure,
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  font-size: 100%;
  font-weight: normal;
  vertical-align: baseline;
  background: transparent;
}

/*新規追加要素のデフォルトはすべてインライン要素になっているので、section要素などをブロック要素へ変更しています*/
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
  display: block;
}

/*ulolのマーカー（行頭記号）を表示しないようにしています*/
ul, ol {
  list-style: none;
}

/*引用符の表示が出ないようにしています*/
blockquote, q {
  quotes: none;
}

/*blockquote要素、q要素の前後にコンテンツを追加しないように指定しています*/
blockquote:before, blockquote:after,
q:before, q:after {
  content: '';
  content: none;
}

/*a要素のフォントサイズなどをリセットしフォントの縦方向の揃え位置を親要素のベースラインに揃えるようにしています*/
a {
  margin: 0;
  padding: 0;
  font-size: 100%;
  vertical-align: baseline;
  background: transparent;
}

/* ins要素のデフォルトをセットし、色を変える場合はここで変更できるようにしています */
ins {
  background-color: #ff9;
  color: #000;
  text-decoration: none;
}

/* mark要素のデフォルトをセットし、色やフォントスタイルを変える場合はここで変更できるようにしています
また、mark要素とは、文書内の検索結果で該当するフレーズをハイライトして、目立たせる際に使用するようです。*/
mark {
  background-color: #ff9;
  color: #000;
  font-style: italic;
  font-weight: bold;
}

/*テキストに打ち消し線が付くようにしています*/
del {
  text-decoration: line-through;
}

/*IEではデフォルトで点線を下線表示する設定ではないので、下線がつくようにしています
また、マウスオーバー時にヘルプカーソルの表示が出るようにしています*/
abbr[title], dfn[title] {
  border-bottom: 1px dotted;
  cursor: help;
}

/*隣接するセルのボーダーを重ねて表示し、間隔を0に指定しています*/
table {
  border-collapse: collapse;
  border-spacing: 0;
}

/*水平罫線のデフォルトである立体的な罫線を見えなくしています*/
hr {
  display: block;
  height: 1px;
  border: 0;
  border-top: 1px solid #cccccc;
  margin: 1em 0;
  padding: 0;
}

/*縦方向の揃え位置を中央揃えに指定しています*/
input, select {
  vertical-align: middle;
}

/*画像の余白削除*/
img {
  　　　vertical-align: bottom;
}

/* ----------------------------------------------------------------
    common
----------------------------------------------------------------- */
html {
  font-family: "メイリオ", "ＭＳ Ｐゴシック", "小塚ゴシック Pro R", "ヒラギノ角ゴ Pro W3", "Meiryo", "MS PGothic", "KozGoPro-Regular", "Hiragino Kaku Gothic Pro", "MS UI Gothic", Osaka, sans-serif;
  color: #333;
  font-size: 62.5%;
}

body {
  background: url(../images/common/bg.png);
  font-size: 16px;
  font-size: 1.6rem;
}

img {
  max-width: 100%;
  vertical-align: middle;
}

.globalFooterInner {
  margin-right: auto;
  margin-left: auto;
  width: 94.8%;
}
@media screen and (min-width: 768px) {
  .globalFooterInner {
    max-width: 1020px;
    padding: 40px 0 0;
  }
}

.wrapper {
  position: relative;
}

/* ----------------------------------------------------------------
    header
----------------------------------------------------------------- */
@media screen and (min-width: 768px) {
  #header {
    position: relative;
    z-index: +1;
    -webkit-box-shadow: 0 5px 5px rgba(0, 0, 0, 0.2);
    box-shadow: 0 5px 5px rgba(0, 0, 0, 0.2);
    background: #fff;
  }
}

.globalHeaderTtl {
  position: relative;
}
@media screen and (max-width: 767px) {
  .globalHeaderTtl {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    padding: 10px 0 10px 2.6%;
    width: calc(100% - 60px);
    height: 60px;
  }
}
@media screen and (min-width: 768px) {
  .globalHeaderTtl {
    margin: 0 auto;
    width: 94.8%;
    height: 186px;
    max-width: 960px;
    background: url(../images/common/bg_title_pc.jpg) no-repeat right;
  }
}
@media screen and (min-width: 768px) {
  .globalHeaderTtlWrap {
    background: #0f0f0f url(../images/common/bg_global_header_title_pc.png) repeat-x bottom;
  }
}
.globalHeaderTtl a {
  position: absolute;
  top: 50%;
  left: 2.6%;
  width: 98%;
  -webkit-transform: translate(0, -50%);
  transform: translate(0, -50%);
}
@media screen and (max-width: 767px) {
  .globalHeaderTtl a {
    max-width: 318px;
  }
}
@media screen and (min-width: 768px) {
  .globalHeaderTtl a {
    left: 0;
    width: 60%;
    max-width: 517px;
  }
}
@media screen and (min-width: 768px) {
  .globalHeaderTtl a:hover {
    opacity: .8;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
  }
}
.globalHeaderSub {
  position: relative;
  z-index: +3;
  margin: 0 auto -28px;
  width: 100%;
  background: url(../images/common/bg_header_loop_pc.png) repeat-x top;
  background-size: auto 100%;
}
@media screen and (min-width: 1021px) {
  .globalHeaderSub {
    margin-bottom: -36px;
  }
}
@media screen and (max-width: 767px) {
  .globalHeaderSub {
    display: none;
  }
}
.globalHeaderSubInner {
  position: relative;
  margin: 0 auto;
  width: 90%;
  max-width: 1024px;
}
.globalHeaderSub img {
  width: 100%;
}
.globalHeaderSubThumb {
  position: absolute;
  top: 3%;
  left: 0%;
  width: 28.2%;
}
.globalHeaderSubLogo {
  position: absolute;
  top: 14%;
  left: 50%;
  width: 48.829%;
  -webkit-transform: translate(-50%, 0);
  transform: translate(-50%, 0);
}
.globalHeaderSubLogo:hover {
  opacity: .6;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)";
}
.globalHeaderSubDate {
  position: absolute;
  top: 14%;
  right: 2%;
  width: 17%;
}
.globalHeaderSns {
  position: relative;
  margin: 24px 5%;
  min-height: 20px;
}
@media screen and (min-width: 768px) {
  .globalHeaderSns {
    display: none;
  }
}
.globalHeaderSns .sns {
  position: absolute;
  top: 0;
  right: 0;
}

@media screen and (max-width: 767px) {
  .globalNav {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 9998;
    overflow: hidden;
    width: 100%;
    max-height: 0;
    background: #fff;
    -webkit-transition: max-height .4s;
    transition: max-height .4s;
  }
}
@media screen and (min-width: 768px) {
  .globalNav {
    position: relative;
    z-index: +4;
    margin-bottom: 48px;
  }
}
@media screen and (min-width: 768px) {
  #top .globalNav {
    margin-bottom: 0;
  }
}
@media screen and (max-width: 767px) {
  html.active .globalNav {
    max-height: calc(100vh - 60px);
  }
}
@media screen and (max-width: 767px) {
  .globalNavTtl {
    position: relative;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    padding: 10px 0 0 2.6%;
    width: calc(100% - 60px);
    height: 60px;
  }
}
@media screen and (min-width: 768px) {
  .globalNavTtl {
    display: none;
  }
}
@media screen and (max-width: 767px) {
  .globalNavTtl a {
    position: absolute;
    top: 50%;
    left: 2.6%;
    width: 90%;
    max-width: 318px;
    -webkit-transform: translate(0, -50%);
    transform: translate(0, -50%);
  }
}
.globalNavHeader {
  position: relative;
  background: repeating-linear-gradient(90deg, #ec5990 0, #ec5990 3px, #ee6a9b 3px, #ee6a9b 6px);
}
@media screen and (min-width: 768px) {
  .globalNavHeader {
    display: none;
  }
}
.globalNavHeaderInner {
  display: -ms-flexbox;
  display: -webkit-box;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
}
.globalNavHeaderTtl, .globalNavHeaderDate {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
.globalNavHeaderTtl {
  padding: 16px 14px 10px 5%;
  background: #fff;
  width: 60%;
}
.globalNavHeaderDate {
  padding: 10px 10% 10px 14px;
  width: 40%;
}

.primaryNav {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
@media screen and (max-width: 767px) {
  .primaryNav {
    padding: 25px 14%;
  }
}
@media screen and (min-width: 768px) {
  .primaryNav {
    margin: 0 auto;
    padding: 0 3px 0 5px;
    width: 90%;
    max-width: 1035px;
    background: url(../images/nav/bg_pc.png) no-repeat center;
    background-size: 100% auto;
  }
}
.primaryNavInner, .primaryNavInner--top {
  display: -ms-flexbox;
  display: -webkit-box;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
}
@media screen and (min-width: 768px) {
  .primaryNavInner, .primaryNavInner--top {
    padding: 8px 0;
  }
}
.primaryNavInner--top {
  -ms-flex-pack: justify;
  -webkit-box-pack: justify;
  justify-content: space-between;
}
.primaryNavRow1 {
  display: -ms-flexbox;
  display: -webkit-box;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  width: 100%;
}
@media screen and (min-width: 768px) {
  .primaryNavRow1 {
    width: calc(100% / 3);
  }
}
.primaryNavItem, .primaryNavItem--row1 {
  position: relative;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  text-align: center;
}
@media screen and (max-width: 767px) {
  .primaryNavItem, .primaryNavItem--row1 {
    padding: 10px 0;
    width: 50%;
  }
}
@media screen and (min-width: 768px) {
  .primaryNavItem, .primaryNavItem--row1 {
    padding: 0 2px 0 0;
    width: calc(100% / 6 - 0.1px);
  }
}
@media screen and (max-width: 767px) {
  .primaryNavItem.hulu {
    width: 100%;
  }
  .primaryNav .primaryNavItem.hulu .primaryNavItemInner:before {
    width: 103%;
    padding-bottom: 3%;
    left: -1.5%;
  }
  .primaryNav .primaryNavItem.hulu .primaryNavItemInner:after {
    width: 103%;
    padding-bottom: 3%;
    left: -1.5%;
    background: url(../images/nav/bg_hulu_sp.png) no-repeat;
    background-size: cover;
  }
}
@media screen and (min-width: 768px) {
  .primaryNavItem.hulu {
    width: calc(100% / 3);
  }
}
.primaryNavItem:before, .primaryNavItem--row1:before {
  position: absolute;
  top: 50%;
  right: 0;
  width: 2px;
  height: 60%;
  background: #ec5990;
  content: "";
  -webkit-transform: translate(0, -50%);
  transform: translate(0, -50%);
}
@media screen and (min-width: 768px) {
  .primaryNavItem:before, .primaryNavItem--row1:before {
    height: 40px;
  }
}
.primaryNavItem:first-child:after, .primaryNavItem--row1:first-child:after {
  position: absolute;
  top: 50%;
  left: -2px;
  width: 2px;
  height: 60%;
  background: #ec5990;
  content: "";
  -webkit-transform: translate(0, -50%);
  transform: translate(0, -50%);
}
@media screen and (min-width: 768px) {
  .primaryNavItem:first-child:after, .primaryNavItem--row1:first-child:after {
    height: 40px;
  }
}
@media screen and (max-width: 767px) {
  .primaryNavItem:last-child .primaryNavItemInner:after, .primaryNavItem--row1:last-child .primaryNavItemInner:after {
    position: absolute;
    bottom: -3%;
    left: -3%;
    width: 106%;
    padding-bottom: 6%;
    background: url(../images/nav/bg_sp.png) no-repeat left center;
    background-size: auto 100%;
    content: "";
  }
}
@media screen and (max-width: 767px) {
  .primaryNavItem:nth-child(2n+1) .primaryNavItemInner:before, .primaryNavItem--row1:nth-child(2n+1) .primaryNavItemInner:before {
    position: absolute;
    top: -3%;
    left: -3%;
    width: 206%;
    padding-bottom: 6%;
    background: url(../images/nav/bg_sp.png) no-repeat;
    background-size: cover;
    content: "";
  }
}
@media screen and (max-width: 767px) {
  .primaryNavItem:nth-child(2n+1):after, .primaryNavItem--row1:nth-child(2n+1):after {
    position: absolute;
    top: 50%;
    left: -2px;
    width: 2px;
    height: 60%;
    background: #ec5990;
    content: "";
    -webkit-transform: translate(0, -50%);
    transform: translate(0, -50%);
  }
}
@media screen and (max-width: 767px) and (min-width: 768px) {
  .primaryNavItem:nth-child(2n+1):after, .primaryNavItem--row1:nth-child(2n+1):after {
    height: 40px;
  }
}

.primaryNavItem a, .primaryNavItem--row1 a {
  display: block;
}
@media screen and (min-width: 768px) {
  .primaryNavItem a:hover, .primaryNavItem--row1 a:hover {
    background: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0)), to(#ffbdd5));
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0), #ffbdd5);
  }
}
.primaryNavItem--row1 {
  width: 50%;
}
.primaryNavItem--row1 > .primaryNavItemInner:after {
  display: none;
}
@media screen and (max-width: 767px) {
  .primaryNavItem--row1:nth-last-child(2) .primaryNavItemInner:after {
    position: absolute;
    bottom: -3%;
    left: -3%;
    width: 206%;
    padding-bottom: 6%;
    background: url(../images/nav/bg_sp.png) no-repeat;
    background-size: cover;
    content: "";
  }
}
.primaryNavItem img, .primaryNavItem--row1 img {
  vertical-align: top;
}

.navTrigger {
  position: absolute;
  top: 2vw;
  right: 0;
  z-index: 9999;
  width: 10%;
  padding-bottom: 13%;
}
@media screen and (min-width: 768px) {
  .navTrigger {
    display: none;
  }
}
.navTrigger span {
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 20px;
  height: 2px;
  background: #fff;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}
@media screen and (min-width: 768px) {
  .navTrigger span {
    top: 32px;
  }
}
.navTrigger span:before, .navTrigger span:after {
  display: block;
  position: absolute;
  left: 0;
  width: 20px;
  height: 2px;
  background: #fff;
  content: "";
  -webkit-transition: -webkit-transform .3s;
  transition: -webkit-transform .3s;
  transition: transform .3s;
  transition: transform .3s, -webkit-transform .3s;
}
.navTrigger span:before {
  top: -6px;
}
.navTrigger span:after {
  top: 6px;
}
html.active .navTrigger span {
  background: transparent;
}
html.active .navTrigger span:before {
  top: 0;
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
}
html.active .navTrigger span:after {
  top: 0;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}

.global_social_link ul {
  display: -ms-flexbox;
  display: -webkit-box;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
}
.global_social_link ul > li {
  margin-left: 10px;
}

/* ----------------------------------------------------------------
    footer
----------------------------------------------------------------- */
.globalFooter {
  text-align: center;
}
@media screen and (min-width: 768px) {
  .globalFooterInner {
    position: relative;
  }
}
.globalFooterSnsList {
  position: relative;
  display: -ms-flexbox;
  display: -webkit-box;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -ms-flex-pack: center;
  -webkit-box-pack: center;
  justify-content: center;
  margin-bottom: 20px;
  padding-bottom: 20px;
}
.globalFooterSnsList:before {
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 63px;
  height: 2px;
  background: -webkit-gradient(linear, left top, right top, from(rgba(0, 0, 0, 0)), color-stop(20%, #ffffff), color-stop(80%, #ffffff), to(rgba(0, 0, 0, 0)));
  background: linear-gradient(to right, rgba(0, 0, 0, 0) 0%, #ffffff 20%, #ffffff 80%, rgba(0, 0, 0, 0) 100%);
  content: "";
  -webkit-transform: translate(-50%, 0);
  transform: translate(-50%, 0);
}
@media screen and (min-width: 768px) {
  .globalFooterSnsList:before {
    width: 70px;
  }
}
.globalFooterSnsList a {
  display: block;
  margin: 0 14px;
  width: 42px;
}
.globalFooterBnr {
  margin: 0 auto 18px;
}
@media screen and (min-width: 768px) {
  .globalFooterBnr {
    margin-bottom: 30px;
    width: 60%;
    max-width: 572px;
  }
}
.globalFooterBnr a {
  display: inline-block;
}
@media screen and (min-width: 768px) {
  .globalFooterBnr a:hover {
    opacity: 0.8;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
  }
}
.globalFooterPagetop {
  max-width: 181px;
}
@media screen and (max-width: 767px) {
  .globalFooterPagetop {
    margin: 0 auto 18px;
    width: 120px;
  }
}
@media screen and (min-width: 768px) {
  .globalFooterPagetop {
    position: absolute;
    bottom: -68px;
    right: 0;
  }
}
.globalFooterCopy {
  display: block;
  padding: 8px 0;
  line-height: 1.5;
  background: #fff;
  color: #333;
  font-size: 9px;
  font-size: 2.4vw;
}
@media screen and (min-width: 768px) {
  .globalFooterCopy {
    font-size: 1.4rem;
  }
}

.cmnBlock, .introBlock {
  margin: 0 auto 48px;
  width: 90%;
  max-width: 1020px;
}
@media screen and (min-width: 768px) {
  .cmnBlock, .introBlock {
    margin-bottom: 64px;
  }
}

.colorBlockInner {
  padding: 24px 5%;
  background: rgba(255, 255, 255, 0.7);
}

.borderBlock, .chartModal, .yellowTextureInner, .pinkTextureInner, .blueTextureInner {
  position: relative;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-box-shadow: 0 5px 5px rgba(0, 0, 0, 0.2);
  box-shadow: 0 5px 5px rgba(0, 0, 0, 0.2);
  margin: 0 auto;
  padding: 36px calc(5% + 12px);
  width: 90%;
  max-width: 1020px;
  background: #fff;
}
@media screen and (min-width: 768px) {
  .borderBlock, .chartModal, .yellowTextureInner, .pinkTextureInner, .blueTextureInner {
    padding: 64px;
  }
}
.borderBlock:before, .chartModal:before, .yellowTextureInner:before, .pinkTextureInner:before, .blueTextureInner:before, .borderBlock:after, .chartModal:after, .yellowTextureInner:after, .pinkTextureInner:after, .blueTextureInner:after {
  position: absolute;
  border: solid #aaa;
  margin: auto;
  content: "";
  pointer-events: none;
}
.borderBlock:before, .chartModal:before, .yellowTextureInner:before, .pinkTextureInner:before, .blueTextureInner:before {
  top: 6px;
  right: 6px;
  bottom: 6px;
  left: 6px;
  border-width: 2px;
}
.borderBlock:after, .chartModal:after, .yellowTextureInner:after, .pinkTextureInner:after, .blueTextureInner:after {
  top: 12px;
  right: 12px;
  bottom: 12px;
  left: 12px;
  border-width: 1px;
}

.ttlSubpage {
  position: relative;
  margin: 0 auto 24px;
  text-align: center;
}
@media screen and (max-width: 767px) {
  .ttlSubpage {
    margin-bottom: 16px;
    max-width: 140px;
  }
}
@media screen and (max-width: 767px) {
  .ttlSubpage.chart, .ttlSubpage.backnumber {
    max-width: 100px;
  }
}
@media screen and (max-width: 767px) {
  .ttlSubpage.intro {
    max-width: 220px;
  }
}
.ttlSubpagePrimary {
  position: relative;
  margin: 0 auto 1em;
  padding-bottom: 16px;
  font-size: 16px;
  font-size: 4.26667vw;
  font-weight: bold;
  text-align: center;
}
@media screen and (min-width: 768px) {
  .ttlSubpagePrimary {
    margin-bottom: 24px;
    font-size: 2.2rem;
  }
}
.ttlSubpagePrimary:before {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 11px;
  background: url(../images/common/line.png) no-repeat top center/contain;
  content: "";
}
.ttlSubpagePrimary span {
  display: block;
  margin-top: .5em;
  font-weight: normal;
  font-size: 13px;
  font-size: 3.46667vw;
}
@media screen and (min-width: 768px) {
  .ttlSubpagePrimary span {
    font-size: 1.6rem;
  }
}
.ttlSubpagePrimary em {
  font-weight: inherit;
  color: #f36;
}
.ttlSubpageSecondary {
  border-bottom: 2px dotted #fff;
  margin-bottom: 24px;
  padding-bottom: 16px;
  text-align: left;
}

.linkMovie, .linkNone {
  display: block;
  margin: 0 auto 30px;
  max-width: 500px;
  position: relative;
}
@media screen and (min-width: 768px) {
  .linkMovie, .linkNone {
    max-width: 646px;
  }
}
.linkMovie:before {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 45px;
  height: 46px;
  background: url(../images/common/icon_movie.png) no-repeat;
  background-size: 100% auto;
  content: "";
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}
@media screen and (min-width: 768px) {
  .linkMovie:before {
    width: 90px;
    height: 91px;
  }
}

.bc_popup {
  display: block;
  position: relative;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  border: 2px solid #fff;
}

.bc_popup:after {
  content: "";
  width: 60px;
  height: 60px;
  background: url("../images/common/icon_movie.png") no-repeat;
  background-size: cover;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  -webkit-transition: background 0.6s;
  transition: background 0.6s;
  z-index: 3;
}

.bc_wrapper .bc_movie_wrap .btn a {
  display: block;
  border: 1px solid #fff;
  margin: 40px auto 0;
  padding: 15px 0;
  max-width: 280px;
  background-color: rgba(255, 255, 255, 0.7);
  color: #000 !important;
  letter-spacing: 2px;
  text-decoration: none;
}

/* =====================================================================
*    共通：brightcovePOPUP
* =================================================================== */
.bc_wrapper {
  width: 100%;
  height: 100%;
  display: block;
  position: fixed;
  top: 0;
  left: 0;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 100000;
  display: none;
  cursor: pointer;
}

.bc_wrapper .return_box {
  width: 100%;
  height: 100%;
  display: block;
  position: absolute;
  top: 0;
  left: 0;
}

.bc_wrapper .bc_movie_wrap {
  width: 100%;
  max-width: 700px;
  height: auto;
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  margin: auto;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  text-align: center;
}

.bc_wrapper .bc_movie_wrap .bc_movie {
  width: 100%;
  padding-top: 56.25%;
  position: relative;
  border-radius: 5px;
}

.bc_wrapper .bc_movie_wrap .bc_movie video {
  position: absolute;
  top: 0px;
  bottom: 0px;
  right: 0px;
  left: 0px;
}

.bc_wrapper .bc_movie_wrap .btn {
  padding: 10px;
}

.bc_wrapper .bc_movie_wrap .btn a {
  margin-top: 4.3479%;
  font-size: 14px;
}

.bc_popup {
  display: block;
  position: relative;
}

@media screen and (min-width: 700px) {
  .bc_wrapper .bc_movie_wrap .btn a {
    margin-top: 20px;
  }

  .bc_popup:after {
    border-width: 35px 0 35px 60px;
  }
}
.gDef-top-banner {
  background-color: transparent !important;
}

@media screen and (min-width: 768px) {
  .sp {
    display: none;
  }
}

@media screen and (max-width: 767px) {
  .pc {
    display: none;
  }
}

.tal {
  text-align: left !important;
}

.tac {
  text-align: center !important;
}

.tar {
  text-align: right !important;
}

.mt0 {
  margin-top: 0px !important;
}

.mb0 {
  margin-bottom: 0px !important;
}

.pt0 {
  padding-top: 0px !important;
}

.pb0 {
  padding-bottom: 0px !important;
}

.mt5 {
  margin-top: 5px !important;
}

.mb5 {
  margin-bottom: 5px !important;
}

.pt5 {
  padding-top: 5px !important;
}

.pb5 {
  padding-bottom: 5px !important;
}

.mt10 {
  margin-top: 10px !important;
}

.mb10 {
  margin-bottom: 10px !important;
}

.pt10 {
  padding-top: 10px !important;
}

.pb10 {
  padding-bottom: 10px !important;
}

.mt15 {
  margin-top: 15px !important;
}

.mb15 {
  margin-bottom: 15px !important;
}

.pt15 {
  padding-top: 15px !important;
}

.pb15 {
  padding-bottom: 15px !important;
}

.mt20 {
  margin-top: 20px !important;
}

.mb20 {
  margin-bottom: 20px !important;
}

.pt20 {
  padding-top: 20px !important;
}

.pb20 {
  padding-bottom: 20px !important;
}

.mt25 {
  margin-top: 25px !important;
}

.mb25 {
  margin-bottom: 25px !important;
}

.pt25 {
  padding-top: 25px !important;
}

.pb25 {
  padding-bottom: 25px !important;
}

.mt30 {
  margin-top: 30px !important;
}

.mb30 {
  margin-bottom: 30px !important;
}

.pt30 {
  padding-top: 30px !important;
}

.pb30 {
  padding-bottom: 30px !important;
}

.mt35 {
  margin-top: 35px !important;
}

.mb35 {
  margin-bottom: 35px !important;
}

.pt35 {
  padding-top: 35px !important;
}

.pb35 {
  padding-bottom: 35px !important;
}

.mt40 {
  margin-top: 40px !important;
}

.mb40 {
  margin-bottom: 40px !important;
}

.pt40 {
  padding-top: 40px !important;
}

.pb40 {
  padding-bottom: 40px !important;
}

.mt45 {
  margin-top: 45px !important;
}

.mb45 {
  margin-bottom: 45px !important;
}

.pt45 {
  padding-top: 45px !important;
}

.pb45 {
  padding-bottom: 45px !important;
}

.mt50 {
  margin-top: 50px !important;
}

.mb50 {
  margin-bottom: 50px !important;
}

.pt50 {
  padding-top: 50px !important;
}

.pb50 {
  padding-bottom: 50px !important;
}

.mt55 {
  margin-top: 55px !important;
}

.mb55 {
  margin-bottom: 55px !important;
}

.pt55 {
  padding-top: 55px !important;
}

.pb55 {
  padding-bottom: 55px !important;
}

.mt60 {
  margin-top: 60px !important;
}

.mb60 {
  margin-bottom: 60px !important;
}

.pt60 {
  padding-top: 60px !important;
}

.pb60 {
  padding-bottom: 60px !important;
}

.mt65 {
  margin-top: 65px !important;
}

.mb65 {
  margin-bottom: 65px !important;
}

.pt65 {
  padding-top: 65px !important;
}

.pb65 {
  padding-bottom: 65px !important;
}

.mt70 {
  margin-top: 70px !important;
}

.mb70 {
  margin-bottom: 70px !important;
}

.pt70 {
  padding-top: 70px !important;
}

.pb70 {
  padding-bottom: 70px !important;
}

.mt75 {
  margin-top: 75px !important;
}

.mb75 {
  margin-bottom: 75px !important;
}

.pt75 {
  padding-top: 75px !important;
}

.pb75 {
  padding-bottom: 75px !important;
}

.mt80 {
  margin-top: 80px !important;
}

.mb80 {
  margin-bottom: 80px !important;
}

.pt80 {
  padding-top: 80px !important;
}

.pb80 {
  padding-bottom: 80px !important;
}

.mt85 {
  margin-top: 85px !important;
}

.mb85 {
  margin-bottom: 85px !important;
}

.pt85 {
  padding-top: 85px !important;
}

.pb85 {
  padding-bottom: 85px !important;
}

.mt90 {
  margin-top: 90px !important;
}

.mb90 {
  margin-bottom: 90px !important;
}

.pt90 {
  padding-top: 90px !important;
}

.pb90 {
  padding-bottom: 90px !important;
}

.mt95 {
  margin-top: 95px !important;
}

.mb95 {
  margin-bottom: 95px !important;
}

.pt95 {
  padding-top: 95px !important;
}

.pb95 {
  padding-bottom: 95px !important;
}

.mt100 {
  margin-top: 100px !important;
}

.mb100 {
  margin-bottom: 100px !important;
}

.pt100 {
  padding-top: 100px !important;
}

.pb100 {
  padding-bottom: 100px !important;
}

.mt105 {
  margin-top: 105px !important;
}

.mb105 {
  margin-bottom: 105px !important;
}

.pt105 {
  padding-top: 105px !important;
}

.pb105 {
  padding-bottom: 105px !important;
}

.mt110 {
  margin-top: 110px !important;
}

.mb110 {
  margin-bottom: 110px !important;
}

.pt110 {
  padding-top: 110px !important;
}

.pb110 {
  padding-bottom: 110px !important;
}

.mt115 {
  margin-top: 115px !important;
}

.mb115 {
  margin-bottom: 115px !important;
}

.pt115 {
  padding-top: 115px !important;
}

.pb115 {
  padding-bottom: 115px !important;
}

.mt120 {
  margin-top: 120px !important;
}

.mb120 {
  margin-bottom: 120px !important;
}

.pt120 {
  padding-top: 120px !important;
}

.pb120 {
  padding-bottom: 120px !important;
}

.mt125 {
  margin-top: 125px !important;
}

.mb125 {
  margin-bottom: 125px !important;
}

.pt125 {
  padding-top: 125px !important;
}

.pb125 {
  padding-bottom: 125px !important;
}

.mt130 {
  margin-top: 130px !important;
}

.mb130 {
  margin-bottom: 130px !important;
}

.pt130 {
  padding-top: 130px !important;
}

.pb130 {
  padding-bottom: 130px !important;
}

.mt135 {
  margin-top: 135px !important;
}

.mb135 {
  margin-bottom: 135px !important;
}

.pt135 {
  padding-top: 135px !important;
}

.pb135 {
  padding-bottom: 135px !important;
}

.mt140 {
  margin-top: 140px !important;
}

.mb140 {
  margin-bottom: 140px !important;
}

.pt140 {
  padding-top: 140px !important;
}

.pb140 {
  padding-bottom: 140px !important;
}

.mt145 {
  margin-top: 145px !important;
}

.mb145 {
  margin-bottom: 145px !important;
}

.pt145 {
  padding-top: 145px !important;
}

.pb145 {
  padding-bottom: 145px !important;
}

.mt150 {
  margin-top: 150px !important;
}

.mb150 {
  margin-bottom: 150px !important;
}

.pt150 {
  padding-top: 150px !important;
}

.pb150 {
  padding-bottom: 150px !important;
}

.mt155 {
  margin-top: 155px !important;
}

.mb155 {
  margin-bottom: 155px !important;
}

.pt155 {
  padding-top: 155px !important;
}

.pb155 {
  padding-bottom: 155px !important;
}

.mt160 {
  margin-top: 160px !important;
}

.mb160 {
  margin-bottom: 160px !important;
}

.pt160 {
  padding-top: 160px !important;
}

.pb160 {
  padding-bottom: 160px !important;
}

.mt165 {
  margin-top: 165px !important;
}

.mb165 {
  margin-bottom: 165px !important;
}

.pt165 {
  padding-top: 165px !important;
}

.pb165 {
  padding-bottom: 165px !important;
}

.mt170 {
  margin-top: 170px !important;
}

.mb170 {
  margin-bottom: 170px !important;
}

.pt170 {
  padding-top: 170px !important;
}

.pb170 {
  padding-bottom: 170px !important;
}

.mt175 {
  margin-top: 175px !important;
}

.mb175 {
  margin-bottom: 175px !important;
}

.pt175 {
  padding-top: 175px !important;
}

.pb175 {
  padding-bottom: 175px !important;
}

.mt180 {
  margin-top: 180px !important;
}

.mb180 {
  margin-bottom: 180px !important;
}

.pt180 {
  padding-top: 180px !important;
}

.pb180 {
  padding-bottom: 180px !important;
}

.mt185 {
  margin-top: 185px !important;
}

.mb185 {
  margin-bottom: 185px !important;
}

.pt185 {
  padding-top: 185px !important;
}

.pb185 {
  padding-bottom: 185px !important;
}

.mt190 {
  margin-top: 190px !important;
}

.mb190 {
  margin-bottom: 190px !important;
}

.pt190 {
  padding-top: 190px !important;
}

.pb190 {
  padding-bottom: 190px !important;
}

.mt195 {
  margin-top: 195px !important;
}

.mb195 {
  margin-bottom: 195px !important;
}

.pt195 {
  padding-top: 195px !important;
}

.pb195 {
  padding-bottom: 195px !important;
}

.mt200 {
  margin-top: 200px !important;
}

.mb200 {
  margin-bottom: 200px !important;
}

.pt200 {
  padding-top: 200px !important;
}

.pb200 {
  padding-bottom: 200px !important;
}

.mt0 {
  margin-top: 0px !important;
}

.mb0 {
  margin-bottom: 0px !important;
}

.pt0 {
  padding-top: 0px !important;
}

.pb0 {
  padding-bottom: 0px !important;
}

.mt8 {
  margin-top: 8px !important;
}

.mb8 {
  margin-bottom: 8px !important;
}

.pt8 {
  padding-top: 8px !important;
}

.pb8 {
  padding-bottom: 8px !important;
}

.mt16 {
  margin-top: 16px !important;
}

.mb16 {
  margin-bottom: 16px !important;
}

.pt16 {
  padding-top: 16px !important;
}

.pb16 {
  padding-bottom: 16px !important;
}

.mt24 {
  margin-top: 24px !important;
}

.mb24 {
  margin-bottom: 24px !important;
}

.pt24 {
  padding-top: 24px !important;
}

.pb24 {
  padding-bottom: 24px !important;
}

.mt32 {
  margin-top: 32px !important;
}

.mb32 {
  margin-bottom: 32px !important;
}

.pt32 {
  padding-top: 32px !important;
}

.pb32 {
  padding-bottom: 32px !important;
}

.mt40 {
  margin-top: 40px !important;
}

.mb40 {
  margin-bottom: 40px !important;
}

.pt40 {
  padding-top: 40px !important;
}

.pb40 {
  padding-bottom: 40px !important;
}

.mt48 {
  margin-top: 48px !important;
}

.mb48 {
  margin-bottom: 48px !important;
}

.pt48 {
  padding-top: 48px !important;
}

.pb48 {
  padding-bottom: 48px !important;
}

.mt56 {
  margin-top: 56px !important;
}

.mb56 {
  margin-bottom: 56px !important;
}

.pt56 {
  padding-top: 56px !important;
}

.pb56 {
  padding-bottom: 56px !important;
}

.mt64 {
  margin-top: 64px !important;
}

.mb64 {
  margin-bottom: 64px !important;
}

.pt64 {
  padding-top: 64px !important;
}

.pb64 {
  padding-bottom: 64px !important;
}

.mt72 {
  margin-top: 72px !important;
}

.mb72 {
  margin-bottom: 72px !important;
}

.pt72 {
  padding-top: 72px !important;
}

.pb72 {
  padding-bottom: 72px !important;
}

.mt80 {
  margin-top: 80px !important;
}

.mb80 {
  margin-bottom: 80px !important;
}

.pt80 {
  padding-top: 80px !important;
}

.pb80 {
  padding-bottom: 80px !important;
}

.mt88 {
  margin-top: 88px !important;
}

.mb88 {
  margin-bottom: 88px !important;
}

.pt88 {
  padding-top: 88px !important;
}

.pb88 {
  padding-bottom: 88px !important;
}

.mt96 {
  margin-top: 96px !important;
}

.mb96 {
  margin-bottom: 96px !important;
}

.pt96 {
  padding-top: 96px !important;
}

.pb96 {
  padding-bottom: 96px !important;
}

.storyMyDoLink {
  font-size: 20px;
  font-size: 2rem;
  text-align: center;
}
@media screen and (max-width: 767px) {
  .storyMyDoLink {
    font-size: 14px;
    font-size: 3.73333vw;
  }
}
.storyMyDoLinkWrap {
  margin: 0 auto 15px;
  padding: 16px 0;
  width: 90%;
  max-width: 520px;
}
@media screen and (min-width: 768px) {
  .storyMyDoLinkWrap {
    margin-bottom: 30px;
  }
}
.storyMyDoLink strong {
  display: inline-block;
  margin: 0 .25em;
  font-size: 24px;
  font-size: 2.4rem;
}
@media screen and (max-width: 767px) {
  .storyMyDoLink strong {
    font-size: 16px;
    font-size: 4.26667vw;
  }
}
.storyMyDoLink a {
  display: inline-block;
  position: relative;
  border-bottom: 1px solid #fff;
  color: #fff;
  text-decoration: none;
}
.storyMyDoLink a:hover {
  border-bottom-color: transparent;
}

#next-story_area .title_area .guest_name {
  margin: 10px 0 20px;
  text-align: center;
  font-size: 16px;
  font-size: 1.6rem;
  font-weight: bold;
}
#next-story_area .title_area .guest_name .notes {
  font-size: 10px;
  padding-top: 8px;
  display: block;
}
@media screen and (min-width: 768px) {
  #next-story_area .title_area .guest_name .notes {
    font-size: 14px;
  }
}
#next-story_area .title_area .guest_name span {
  margin-right: 6px;
  font-size: 12px;
  color: #fff;
  background: #000;
  padding: 4px 6px;
}
#next-story_area .next_area .text_next {
  margin: 0 auto 32px;
  padding: 24px 5%;
  background: rgba(255, 255, 255, 0.7);
  line-height: 1.8;
  text-align: left;
}
#next-story_area .next_area .slide_img_wrap {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
@media screen and (max-width: 767px) {
  #next-story_area .next_area .slide_img_wrap {
    position: relative;
    z-index: 10;
    margin-left: auto;
    margin-right: auto;
    padding: 4% 3.5715% 4%;
    width: 83.1625%;
  }
}
@media screen and (max-width: 767px) {
  #next-story_area .next_area .slide_img_wrap .slide_img_wrap_inner {
    min-height: 168px !important;
    overflow: hidden;
  }
}
@media screen and (min-width: 768px) {
  #next-story_area .next_area .slide_img_wrap .slide_img_wrap_inner {
    position: relative;
  }
}
@media screen and (min-width: 768px) {
  #next-story_area .next_area .slide_img_wrap .slide_img_wrap_inner .slide_img {
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    -ms-flex-pack: center;
    -webkit-box-pack: center;
    justify-content: center;
    margin-left: -1%;
    width: 102% !important;
    position: static !important;
    overflow: visible !important;
    display: -ms-flexbox;
    display: -webkit-box;
    display: flex;
  }
}
#next-story_area .next_area .slide_img_wrap .slide_img_wrap_inner .slide_img li {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  border: 2px solid #fff;
  list-style: none;
  float: left;
}
@media screen and (min-width: 768px) {
  #next-story_area .next_area .slide_img_wrap .slide_img_wrap_inner .slide_img li {
    width: 31.3% !important;
    margin: 0 1% 20px;
    float: none;
  }
}
#next-story_area .next_area .slide_img_wrap .btn_ctrl {
  width: 128%;
  height: 100%;
  position: absolute;
  top: 0;
  left: -14%;
}
@media screen and (min-width: 768px) {
  #next-story_area .next_area .slide_img_wrap .btn_ctrl {
    display: none;
  }
}
#next-story_area .next_area .slide_img_wrap .btn_ctrl .btn_left,
#next-story_area .next_area .slide_img_wrap .btn_ctrl .btn_right {
  width: 14.0625%;
  height: 0;
  padding-top: 18.75%;
  display: block;
  position: absolute;
  top: 0;
  bottom: 0;
  margin-top: auto;
  margin-bottom: auto;
}
#next-story_area .next_area .slide_img_wrap .btn_ctrl .btn_left a,
#next-story_area .next_area .slide_img_wrap .btn_ctrl .btn_right a {
  width: 100%;
  height: 100%;
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  text-indent: -999em;
  overflow: hidden;
}
#next-story_area .next_area .slide_img_wrap .btn_ctrl .btn_left {
  left: 0;
  background: url("../images/story/btn_list_image_left.png") no-repeat 60% center;
  background-size: 40% auto;
}
#next-story_area .next_area .slide_img_wrap .btn_ctrl .btn_right {
  right: 0;
  background: url("../images/story/btn_list_image_right.png") no-repeat 30% center;
  background-size: 40% auto;
}

#backnumber .bnInner {
  margin: 0 auto;
  max-width: 1020px;
}
#backnumber .bnInner ul {
  display: -ms-flexbox;
  display: -webkit-box;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -ms-flex-pack: center;
  -webkit-box-pack: center;
  justify-content: center;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  margin: 0 -6px;
}
@media screen and (min-width: 768px) {
  #backnumber .bnInner ul {
    margin: 0 -10px;
  }
}
#backnumber .bnInner ul li {
  width: calc(50% - 12px);
  margin: 0 6px 10px;
  position: relative;
  line-height: 0;
}
@media screen and (min-width: 768px) {
  #backnumber .bnInner ul li {
    width: calc(100% / 4 - 21px);
    margin: 0 10px 20px;
  }
}
#backnumber .bnInner ul a {
  display: block;
  position: relative;
}
#backnumber .bnInner ul a:before, #backnumber .bnInner ul a:after {
  position: absolute;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  content: "";
  pointer-events: none;
}
#backnumber .bnInner ul a:before {
  top: 0;
  left: 0;
  border: 4px solid #e5b67f;
  width: 100%;
  height: 100%;
}
#backnumber .bnInner ul a:after {
  top: 1px;
  right: 2px;
  left: 2px;
  margin: auto;
  border-top: 1px solid #ffd594;
  height: 1px;
}
#backnumber .bnInner ul a img {
  width: 100%;
}
#backnumber .bnInner ul a .img_story-number {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 3;
  width: 50px;
  height: auto;
}
@media screen and (min-width: 768px) {
  #backnumber .bnInner ul a .img_story-number {
    width: 88px;
    height: 45px;
  }
}
#backnumber .bnInner ul a .img_story-number img {
  vertical-align: top;
}

.mainVisual {
  position: relative;
  z-index: +3;
  overflow: hidden;
  margin-bottom: -10%;
  width: 100%;
}
@media screen and (min-width: 768px) {
  .mainVisual {
    margin-bottom: -3%;
  }
}
@media screen and (min-width: 1021px) {
  .mainVisual {
    margin-bottom: -48px;
  }
}
.mainVisual:before, .mainVisual:after {
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
  content: "";
}
@media screen and (max-width: 767px) {
  .mainVisual:before, .mainVisual:after {
    display: none;
  }
}
.mainVisual:before {
  right: 50%;
  background: url(../images/index/bg_main01_pc.png) repeat-x top;
  background-size: auto 100%;
}
.mainVisual:after {
  left: 50%;
  background: url(../images/index/bg_main02_pc.png) repeat-x top;
  background-size: auto 100%;
}
.mainVisualInner {
  position: relative;
  z-index: +1;
}
@media screen and (min-width: 768px) {
  .mainVisualInner {
    margin: 0 auto;
    max-width: 1100px;
  }
}
.mainVisualTxtWrap {
  position: absolute;
  bottom: 20%;
  left: 48.6%;
  width: 64%;
  -webkit-transform: translate(-50%, 0);
  transform: translate(-50%, 0);
}
.mainVisualTxt {
  margin-bottom: -4%;
  width: 44%;
}
.mainVisualObj01 {
  position: absolute;
  top: 31.3%;
  left: 28%;
  width: 10%;
  padding-bottom: 10%;
  opacity: 0;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
  background: url(../images/index/img_glitter.png) no-repeat center;
  background-size: 100% auto;
  -webkit-transition: opacity .4s;
  transition: opacity .4s;
}
@media screen and (min-width: 768px) {
  .mainVisualObj01 {
    top: 34%;
    left: 28.5%;
    width: 10%;
    padding-bottom: 10%;
  }
}
.mainVisualObj01.loaded {
  opacity: 1;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
  -webkit-animation: spin 3s linear infinite;
  animation: spin 3s linear infinite;
}

@-webkit-keyframes spin {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

@keyframes spin {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

.topBnr {
    text-align: center;
    margin: 30px auto 0;
}
.indexChain {
  -webkit-box-shadow: 0 5px 5px rgba(0, 0, 0, 0.2);
  box-shadow: 0 5px 5px rgba(0, 0, 0, 0.2);
  background: url(../images/common/bg_texture_yellow2.png);
  text-align: center;
}
@media screen and (min-width: 768px) {
  .indexChain {
    padding: 24px 0;
  }
    .indexChain a:hover {
        opacity: 0.8;
    }
}
.indexSnsList, .indexSnsListSp {
  position: relative;
  margin: 0 auto;
  width: 90%;
  height: 20px;
  max-width: 1020px;
}
.indexSnsListPc {
  position: absolute;
  top: 4%;
  right: 3%;
}
@media screen and (max-width: 767px) {
  .indexSnsListPc {
    display: none;
  }
}
@media screen and (min-width: 768px) {
  .indexSnsListSp {
    display: none;
  }
}
.indexSnsList .sns, .indexSnsListSp .sns {
  position: absolute;
  top: 16px;
  right: 0;
}
.indexNextStory {
  position: relative;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  background: url(../images/index/bg_ns.png) repeat-y center;
  background-size: 100% auto;
  color: #fff;
  text-align: center;
}
@media screen and (min-width: 768px) {
  .indexNextStory {
    background-image: url(../images/index/bg_ns_pc.png);
  }
}
.indexNextStory:before {
  position: absolute;
  top: -8%;
  left: 0;
  z-index: +1;
  width: 100%;
  padding-bottom: 30.25%;
  background: url(../images/index/bg_ns_top.png) no-repeat top center;
  background-size: 100% auto;
  content: "";
}
@media screen and (min-width: 768px) {
  .indexNextStory:before {
    padding-bottom: 27.25%;
    background-image: url(../images/index/bg_ns_top_pc.png);
  }
}
.indexNextStory:after {
  position: absolute;
  bottom: -10%;
  left: 0;
  width: 100%;
  padding-bottom: 60%;
  background: url(../images/index/bg_ns_btm.png) no-repeat top center;
  background-size: 100% auto;
  content: "";
}
@media screen and (min-width: 768px) {
  .indexNextStory:after {
    padding-bottom: 58%;
    background-image: url(../images/index/bg_ns_btm_pc.png);
  }
}
.indexNextStoryWrap {
  position: relative;
  margin: 80px auto 40px;
  padding: 0px 0 48px;
  width: 90%;
  max-width: 1036px;
}
@media screen and (min-width: 768px) {
  .indexNextStoryWrap {
    margin: 110px auto 64px;
  }
}
.indexNextStoryInner {
  position: relative;
  z-index: +1;
}
.indexNextStoryTtl {
  margin: 0 auto 2.5vw;
  width: 40%;
  text-align: center;
}
@media screen and (min-width: 768px) {
  .indexNextStoryTtl {
    margin-bottom: 16px;
    max-width: 189px;
    width: 30%;
  }
}
.indexNextStoryTtlSub, #next-story_area .title_area .img_story-number, .musicName {
  position: relative;
  margin-bottom: 2.5vw;
  color: #fff;
  font-size: 16px;
  font-size: 4.26667vw;
  font-weight: bold;
  text-align: center;
}
@media screen and (min-width: 768px) {
  .indexNextStoryTtlSub, #next-story_area .title_area .img_story-number, .musicName {
    margin-bottom: 20px;
    font-size: 2rem;
  }
}
@media screen and (min-width: 1021px) {
  .indexNextStoryTtlSub, #next-story_area .title_area .img_story-number, .musicName {
    margin-bottom: 10px;
    font-size: 2.4rem;
  }
}
.indexNextStoryTtlSub img, #next-story_area .title_area .img_story-number img, .musicName img {
  vertical-align: text-bottom;
}
.indexNextStoryTtlSub strong, #next-story_area .title_area .img_story-number strong, .musicName strong {
  font-weight: bold;
}
@media screen and (min-width: 768px) {
  .indexNextStoryTtlSub strong, #next-story_area .title_area .img_story-number strong, .musicName strong {
    font-size: 3rem;
  }
}
.music_comment {
    text-align: center;
}
.music_comment img {
    width: 41.86%;
}
@media screen and (min-width: 768px) {
    .music_comment {
        text-align: left;
    }
    .music_comment img {
        width: 18.83%;
    }
}
.indexNextStoryTxt {
  margin: 0 auto 1em;
  line-height: 1.5;
  color: #333;
  font-size: 14px;
  font-size: 3.73333vw;
  text-align: center;
}
@media screen and (max-width: 767px) {
  .indexNextStoryTxt {
    width: 70%;
  }
}
@media screen and (min-width: 768px) {
  .indexNextStoryTxt {
    font-size: 2rem;
  }
}
@media screen and (min-width: 1021px) {
  .indexNextStoryTxt {
    font-size: 2.2rem;
  }
}
.indexNextStoryTxt strong {
  font-weight: bold;
}
.indexNextStoryTxt span {
  display: block;
  font-size: 10px;
  font-size: 2.66667vw;
}
@media screen and (min-width: 768px) {
  .indexNextStoryTxt span {
    font-size: 1.6rem;
  }
}

.thumbnail_area {
  position: relative;
  margin: 0 auto 2.5vw;
  max-width: 500px;
  width: 80%;
}
@media screen and (min-width: 768px) {
  .thumbnail_area {
    margin-bottom: 30px;
    width: 60%;
  }
}
@media screen and (min-width: 1021px) {
  .thumbnail_area {
    margin-bottom: 16px;
    width: 80%;
    max-width: 640px;
  }
}
.thumbnail_area .link {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.thumbnail_area .link a {
  display: block;
  height: 100%;
}

.btnStory {
  margin: 15px auto 0;
  width: 60%;
}
@media screen and (min-width: 768px) {
  .btnStory {
    width: 30%;
      margin: 40px auto 0;
      padding: 0 0 3%;
  }
}

.indexNews {
  position: relative;
  margin: 14vw 0 20vw;
  padding: 0 5%;
  background: url(../images/index/bg_news.png) repeat-y center;
  background-size: 100% auto;
}
@media screen and (min-width: 768px) {
  .indexNews {
    margin: 22px 0 48px;
  }
}
.indexNews:before, .indexNews:after {
  position: absolute;
  left: 0;
  background: no-repeat;
  background-size: 100% auto;
  width: 100%;
  content: "";
}
.indexNews:before {
  top: -13vw;
  padding-bottom: 17%;
  background-image: url(../images/index/bg_news_top.png);
}
@media screen and (min-width: 768px) {
  .indexNews:before {
    top: -15.5%;
  }
}
.indexNews:after {
  bottom: -11vw;
  padding-bottom: 14%;
  background-image: url(../images/index/bg_news_btm.png);
}
@media screen and (min-width: 768px) {
  .indexNews:after {
    bottom: -10%;
  }
}
.indexNewsListWrap {
  position: relative;
  z-index: +1;
  border-radius: 6px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  padding: 0 20px;
  height: 290px;
  overflow-y: auto;
}
@media screen and (max-width: 767px) {
  .indexNewsListWrap {
    margin-bottom: 20px;
  }
}
@media screen and (min-width: 768px) {
  .indexNewsListWrap {
    height: 290px;
  }
}
.indexNewsList > li {
  border-bottom: 2px dotted #fff;
  padding: 10px;
  line-height: 1.5;
}
@media screen and (min-width: 768px) {
  .indexNewsList > li {
    font-size: 1.8rem;
  }
}
.indexNewsList > li:first-child {
  padding-top: 0;
}
.indexNewsList > li time {
  margin-bottom: 0.5em;
}
@media screen and (min-width: 768px) {
  .indexNewsList > li time {
    font-size: 1.4rem;
  }
}
.indexNewsList > li a {
  color: #333;
}
@media screen and (min-width: 768px) {
  .indexNewsList > li a {
    font-size: 1.8rem;
  }
}
.indexNewsList > li a:before {
  display: inline-block;
  margin-right: .25em;
  width: 12px;
  height: 12px;
  background: url(../images/icon_news.png) no-repeat;
  background-size: 100% auto;
  content: "";
}
@media screen and (min-width: 768px) {
  .indexNewsList > li a:hover {
    text-decoration: none;
  }
}
.indexSnsWidget {
  padding: 8vw 4% 10vw;
}
@media screen and (min-width: 768px) {
  .indexSnsWidget {
    display: -ms-flexbox;
    display: -webkit-box;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    margin: 0 auto;
    padding: 64px 4% 36px;
    max-width: 1036px;
  }
}
@media screen and (min-width: 768px) {
  .indexSnsWidgetLeft {
    margin-right: 40px;
    width: calc(55% - 20px);
  }
}
@media screen and (min-width: 768px) {
  .indexSnsWidgetRight {
    width: calc(45% - 20px);
  }
}
.indexSnsWidgetTtl {
  position: relative;
  z-index: +1;
  margin: 0 0 16px;
}
@media screen and (max-width: 767px) {
  .indexSnsWidgetTtl {
    width: 180px;
  }
}
@media screen and (min-width: 768px) {
  .indexSnsWidgetTtl {
    margin-bottom: 16px;
  }
}
.indexSnsWidgetTtl.news {
  margin: 0 auto 16px;
  width: 40.5%;
  max-width: 200px;
}
.indexSnsWidgetTwitter {
  position: relative;
  width: 100%;
  height: 220px;
  overflow: hidden;
}
.indexSnsWidgetTwitter iframe {
  position: static;
  visibility: visible;
  display: inline-block;
  width: 100%;
  height: 216px;
  padding: 0px;
  border: none;
  max-width: 100%;
  min-width: 180px;
  margin-top: 0px;
  margin-bottom: 0px;
  min-height: 200px;
}
.indexTwitter {
  position: relative;
  margin: 6vw 0 12vw;
  padding: 0 10%;
  background: url(../images/index/bg_twitter.png) repeat-y center;
  background-size: 100% auto;
}
@media screen and (min-width: 768px) {
  .indexTwitter {
    margin: 22px 0 48px;
  }
}
.indexTwitter:before, .indexTwitter:after {
  position: absolute;
  left: 0;
  background: no-repeat;
  background-size: 100% auto;
  width: 100%;
  content: "";
}
.indexTwitter:before {
  top: -5.5vw;
  padding-bottom: 8%;
  background-image: url(../images/index/bg_twitter_top.png);
}
@media screen and (min-width: 768px) {
  .indexTwitter:before {
    top: -8%;
  }
}
.indexTwitter:after {
  bottom: -8vw;
  padding-bottom: 11%;
  background-image: url(../images/index/bg_twitter_btm.png);
}
@media screen and (min-width: 768px) {
  .indexTwitter:after {
    bottom: -11%;
  }
}

.btnFollow {
  text-align: center;
}
.btnFollow a {
  display: inline-block;
}

.indexPlatinight {
  position: relative;
  z-index: +1;
  -webkit-box-shadow: 0 5px 5px rgba(0, 0, 0, 0.2);
  box-shadow: 0 5px 5px rgba(0, 0, 0, 0.2);
  padding: 25px 5%;
  background: url(../images/common/bg_texture_pink.png);
  text-align: center;
}
@media screen and (min-width: 768px) {
  .indexPlatinight {
    padding: 50px 5%;
  }
}
.indexSnsBtm {
  -webkit-box-shadow: 0 5px 5px rgba(0, 0, 0, 0.2);
  box-shadow: 0 5px 5px rgba(0, 0, 0, 0.2);
  display: -ms-flexbox;
  display: -webkit-box;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -ms-flex-pack: center;
  -webkit-box-pack: center;
  justify-content: center;
  margin: 48px 0;
  padding: 25px 5%;
  background: url(../images/common/bg_sns.png);
  text-align: center;
}
@media screen and (min-width: 768px) {
  .indexSnsBtm {
    margin-bottom: 0;
    padding: 50px 5%;
  }
}
.indexSnsBtm > * {
  margin: 0 8px;
}
@media screen and (min-width: 768px) {
  .indexSnsBtm > * {
    margin: 0 16px;
  }
}
@media screen and (max-width: 767px) {
  .indexSnsBtm img {
    width: 39px;
  }
}
.indexIntro {
  position: relative;
  -webkit-box-shadow: 0 5px 5px rgba(0, 0, 0, 0.2);
  box-shadow: 0 5px 5px rgba(0, 0, 0, 0.2);
  padding: 15vw 0 10vw;
  background: url(../images/index/bg_intro.png) center top;
}
@media screen and (min-width: 768px) {
  .indexIntro {
    padding: 33px 0;
  }
}
@media screen and (min-width: 768px) {
  .indexIntroInner {
    width: 90%;
    max-width: 1036px;
    margin: 0 auto;
  }
}

.mydoArea {
  -webkit-box-shadow: 0 5px 5px rgba(0, 0, 0, 0.2);
  box-shadow: 0 5px 5px rgba(0, 0, 0, 0.2);
  padding: 32px 0;
  background: url(../images/common/bg_texture_blue.png);
  color: #333;
  font-size: 20px;
  font-size: 2rem;
  font-weight: bold;
  text-align: center;
}
@media screen and (max-width: 767px) {
  .mydoArea {
    font-size: 14px;
    font-size: 3.73333vw;
  }
}
.mydoArea strong {
  display: inline-block;
  margin: 0 .25em;
  font-size: 24px;
  font-size: 2.4rem;
  font-weight: bold;
}
@media screen and (max-width: 767px) {
  .mydoArea strong {
    font-size: 16px;
    font-size: 4.26667vw;
  }
}
.mydoArea a {
  display: inline-block;
  position: relative;
  border-bottom: 1px solid #333;
  color: #333;
  font-weight: bold;
  text-decoration: none;
}
.mydoArea a:hover {
  border-bottom-color: transparent;
}

.musicThumb {
  margin: 0 auto 30px;
  text-align: center;
}
@media screen and (min-width: 768px) {
  .musicName {
    font-size: 3rem;
  }
}
.musicArtistName, .originalAuthor {
  margin-bottom: 1em;
  font-size: 14px;
  font-size: 3.73333vw;
  text-align: center;
}
@media screen and (min-width: 768px) {
  .musicArtistName, .originalAuthor {
    font-size: 2.4rem;
  }
}
.musicCompany {
  margin-left: auto;
  margin-right: auto;
}
@media screen and (max-width: 767px) {
  .musicCompany {
    width: 55%;
  }
}
.musicProfileTxt, .originalProfile {
  margin-bottom: 1em;
  font-size: 14px;
  font-size: 3.73333vw;
  line-height: 1.8;
  text-align: left;
}
@media screen and (min-width: 768px) {
  .musicProfileTxt, .originalProfile {
    font-size: 1.6rem;
  }
}
.musicProfileBtn {
  display: block;
  margin: 0 auto;
  text-align: center;
}

@media screen and (min-width: 768px) {
  .originalAbout {
    display: -ms-flexbox;
    display: -webkit-box;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -ms-flex-pack: center;
    -webkit-box-pack: center;
    justify-content: center;
    -ms-flex-align: center;
    -webkit-box-align: center;
    align-items: center;
    margin: 0 -16px;
  }
}
@media screen and (min-width: 768px) {
  .originalAbout > * {
    margin: 0 16px 32px;
  }
}
.originalAuthor span {
  font-size: 12px;
  font-size: 3.2vw;
}
@media screen and (min-width: 768px) {
  .originalAuthor span {
    font-size: 1.6rem;
  }
}
.originalProfile {
  margin-bottom: 0;
}
.originalProfile strong {
  font-weight: bold;
}
@media screen and (min-width: 768px) {
    .originalTxt {
        margin-top: 40px;
    }

    .originalTxt .musicProfileBtn {
        margin-top: 4em !important;
    }
}

.storyBlock {
  position: relative;
}
.storyBlock:before {
  position: absolute;
  top: 0;
  right: 0;
  z-index: +1;
  width: 30%;
  max-width: 186px;
  padding-bottom: 30%;
  background: url(../images/story/img_ribbon.png) no-repeat;
  background-size: 100% auto;
  content: "";
}

.storyBlockLabel {
  position: absolute;
  top: 0;
  right: 0;
}

.newsListItem {
  margin-bottom: 15px;
  text-align: left;
}
@media screen and (min-width: 768px) {
  .newsListItem {
    margin-bottom: 30px;
  }
}
.newsListItem:last-of-type {
  margin-bottom: 0;
}
.newsListItemDate {
  display: block;
  margin-bottom: .5em;
  line-height: 1.5;
  color: #777;
  font-size: 12px;
  font-size: 3.2vw;
}
@media screen and (max-width: 767px) {
  .newsListItemDate {
    margin-bottom: .25em;
  }
}
@media screen and (min-width: 768px) {
  .newsListItemDate {
    width: 110px;
    font-size: 1.6rem;
  }
}
.newsListItemTtl {
  position: relative;
  border-bottom: 2px dotted #fff;
  margin-bottom: 24px;
  padding: 0 0 .5em 4vw;
  line-height: 1.5;
  font-size: 15px;
  font-size: 4vw;
}
@media screen and (min-width: 768px) {
  .newsListItemTtl {
    padding-left: 20px;
    font-size: 2.2rem;
  }
}
.newsListItemTtl:before {
  position: absolute;
  top: 1.75vw;
  left: 0;
  width: 2vw;
  height: 2vw;
  background: url(../images/icon_news.png) no-repeat;
  background-size: 100% auto;
  content: "";
}
@media screen and (min-width: 768px) {
  .newsListItemTtl:before {
    top: 9px;
    width: 12px;
    height: 12px;
  }
}
.newsListItemThumb, .newsListItemBoxCol2Thumb {
  margin: 0 auto 15px;
  text-align: center;
}
@media screen and (min-width: 768px) {
  .newsListItemThumb, .newsListItemBoxCol2Thumb {
    margin-bottom: 30px;
  }
}
.newsListItemTxt, .newsListItemBoxCol2Txt {
  margin: 0 auto 15px;
  line-height: 1.5;
}
@media screen and (min-width: 768px) {
  .newsListItemTxt, .newsListItemBoxCol2Txt {
    margin-bottom: 30px;
  }
}
.newsListItemBtn {
  text-align: center;
}
@media screen and (max-width: 767px) {
  .newsListItemBtn {
    margin: 0 auto;
    width: 210px;
  }
}
@media screen and (min-width: 768px) {
  .newsListItemBoxCol2 {
    display: -ms-flexbox;
    display: -webkit-box;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -ms-flex-pack: justify;
    -webkit-box-pack: justify;
    justify-content: space-between;
  }
}
@media screen and (min-width: 768px) {
  .newsListItemBoxCol2.right .newsListItemBoxCol2Thumb {
    -ms-flex-order: 2;
    -webkit-box-ordinal-group: 3;
    order: 2;
  }
}
@media screen and (min-width: 768px) {
  .newsListItemBoxCol2.right .newsListItemBoxCol2Txt {
    -ms-flex-order: 1;
    -webkit-box-ordinal-group: 2;
    order: 1;
  }
}
@media screen and (min-width: 768px) {
  .newsListItemBoxCol2Thumb {
    margin-right: 0;
    margin-left: 0;
    width: 40%;
  }
}
@media screen and (min-width: 768px) {
  .newsListItemBoxCol2Txt {
    margin-right: 0;
    margin-left: 0;
    /*width: calc(60% - 30px);*/
  }
}

.csCastList,
.csStaffList {
  position: relative;
  display: -ms-flexbox;
  display: -webkit-box;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -ms-flex-align: center;
  -webkit-box-align: center;
  align-items: center;
  -ms-flex-pack: center;
  -webkit-box-pack: center;
  justify-content: center;
  margin-bottom: 15px;
  color: #fff;
  text-align: left;
}
@media screen and (min-width: 768px) {
  .csCastList,
  .csStaffList {
    margin-bottom: 30px;
  }
}
.csCastList > dt,
.csCastList > dd,
.csStaffList > dt,
.csStaffList > dd {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  padding: 12px 0;
  width: 50%;
  line-height: 1.5;
  font-size: 13px;
  font-size: 3.46667vw;
}
@media screen and (max-width: 767px) {
  .csCastList > dt,
  .csCastList > dd,
  .csStaffList > dt,
  .csStaffList > dd {
    letter-spacing: -0.1em;
  }
}
@media screen and (min-width: 768px) {
  .csCastList > dt,
  .csCastList > dd,
  .csStaffList > dt,
  .csStaffList > dd {
    font-size: 2.2rem;
  }
}
.csCastList > dt:last-of-type,
.csCastList > dd:last-of-type,
.csStaffList > dt:last-of-type,
.csStaffList > dd:last-of-type {
  margin-bottom: 0;
}
.csCastList > dt,
.csStaffList > dt {
  position: relative;
  padding-right: 6vw;
  font-weight: bold;
  text-align: right;
}
@media screen and (min-width: 768px) {
  .csCastList > dt,
  .csStaffList > dt {
    padding-right: 68px;
  }
}
.csCastList > dt:after,
.csStaffList > dt:after {
  position: absolute;
  top: 50%;
  right: 0;
  width: 4vw;
  height: 4vw;
  background: no-repeat center / contain;
  color: #333;
  font-weight: normal;
  content: "";
  -webkit-transform: translate(0, -50%);
  transform: translate(0, -50%);
}
@media screen and (min-width: 768px) {
  .csCastList > dt:after,
  .csStaffList > dt:after {
    width: 58px;
    height: 52px;
    background-size: auto;
  }
}
.csCastList > dd,
.csStaffList > dd {
  padding-left: 2vw;
}
@media screen and (min-width: 768px) {
  .csCastList > dd,
  .csStaffList > dd {
    padding-left: 10px;
  }
}
.csCastList > dd p,
.csStaffList > dd p {
  margin-bottom: .5em;
}
.csCastList > dd p:last-of-type,
.csStaffList > dd p:last-of-type {
  margin-bottom: 0;
}
.csCastList > dd span,
.csStaffList > dd span {
  font-size: 10px;
  font-size: 2.66667vw;
}
@media screen and (min-width: 768px) {
  .csCastList > dd span,
  .csStaffList > dd span {
    font-size: 1.8rem;
  }
}

.csCastList > dt:after {
  background-image: url(../images/common/icon_glitter.png);
}

.csStaffList {
  overflow: hidden;
}
.csStaffList > dt:after {
  background-image: url(../images/common/icon_heart.png);
}
.csStaffList > dd {
  position: relative;
}
.csStaffList > dd:before {
  position: absolute;
  bottom: 0;
  right: 0;
  border-bottom: 2px dotted #fff;
  width: 1000%;
  height: 2px;
  content: "";
}

.introImg {
  display: block;
  margin-bottom: 30px;
}
.introImg00 {
  margin-bottom: 30px;
}
@media screen and (min-width: 768px) {
  .introImg00 {
    margin-bottom: 40px;
  }
}
.introImg.mb0 {
  margin-bottom: 0;
}

.introBlock {
  max-width: 1032px;
}

.chartFig {
  position: relative;
  margin-bottom: 16px;
}
.chartFig a {
  position: absolute;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
.chartFig a.c01 {
  top: 46%;
  left: 35%;
  width: 30%;
  padding-bottom: 35.4%;
}
@media screen and (min-width: 768px) {
  .chartFig a.c01 {
    top: 41.3%;
    left: 38.4%;
    width: 23.7%;
    padding-bottom: 28.6%;
  }
}
.chartFig a.c02 {
  top: 46%;
  left: 1.8%;
  width: 30%;
  padding-bottom: 35.4%;
}
@media screen and (min-width: 768px) {
  .chartFig a.c02 {
    top: 41.3%;
    left: 9.8%;
    width: 23.7%;
    padding-bottom: 28.6%;
  }
}
.chartFig a.c03 {
  top: 46%;
  left: 68%;
  width: 30%;
  padding-bottom: 35.4%;
}
@media screen and (min-width: 768px) {
  .chartFig a.c03 {
    top: 41.3%;
    left: 67%;
    width: 23.7%;
    padding-bottom: 28.6%;
  }
}
.chartFig a.c04 {
  top: 11%;
  left: 35%;
  width: 30%;
  padding-bottom: 43%;
}
@media screen and (min-width: 768px) {
  .chartFig a.c04 {
    top: 6.6%;
    left: 38.4%;
    width: 23.8%;
    padding-bottom: 29.7%;
  }
}
.chartFig a.c05 {
  top: 76.6%;
  left: 37.1%;
  width: 25.7%;
  padding-bottom: 30.3%;
}
@media screen and (min-width: 768px) {
  .chartFig a.c05 {
    top: 73%;
    left: 40.2%;
    width: 20.2%;
    padding-bottom: 24.2%;
  }
}
.chartFig a.c06 {
  top: 76.6%;
  left: 71.3%;
  width: 25.7%;
  padding-bottom: 30.3%;
}
@media screen and (min-width: 768px) {
  .chartFig a.c06 {
    top: 73%;
    left: 73.2%;
    width: 20.2%;
    padding-bottom: 24.2%;
  }
}
.chartFig a.c07 {
  top: 76.6%;
  left: 3%;
  width: 25.7%;
  padding-bottom: 30.3%;
}
@media screen and (min-width: 768px) {
  .chartFig a.c07 {
    top: 73%;
    left: 6.6%;
    width: 20.2%;
    padding-bottom: 24.2%;
  }
}
.chartFig a.c08 {
  top: 18.3%;
  left: 2.6%;
  width: 25.7%;
  padding-bottom: 30.3%;
}
@media screen and (min-width: 768px) {
  .chartFig a.c08 {
    top: 11.2%;
    left: 6.6%;
    width: 20.2%;
    padding-bottom: 24.2%;
  }
}
.chartFig a.c09 {
  top: 23.1%;
  left: 73.8%;
  width: 20.6%;
  padding-bottom: 21.7%;
}
@media screen and (min-width: 768px) {
  .chartFig a.c09 {
    top: 11.2%;
    left: 81.6%;
    width: 16.3%;
    padding-bottom: 24.2%;
  }
}
.chartFig a.c10 {
  top: 5%;
  left: 73.8%;
  width: 20.6%;
  padding-bottom: 21.7%;
}
@media screen and (min-width: 768px) {
  .chartFig a.c10 {
    top: 11.2%;
    left: 64.5%;
    width: 16.3%;
    padding-bottom: 24.2%;
  }
}
.chartFigTxt {
  margin: 0 auto -16px;
  text-align: center;
}
@media screen and (max-width: 767px) {
  .chartFigTxt {
    width: 80%;
  }
}
@media screen and (min-width: 768px) {
  .chartFigTxt {
    text-align: right;
  }
}

.chartModal {
  text-align: left;
}

.chartCastList {
  margin-bottom: 48px;
}
@media screen and (min-width: 768px) {
  .chartCastList {
    margin-bottom: 64px;
  }
}
.chartCastItem {
  font-size: 14px;
  font-size: 3.73333vw;
}
@media screen and (min-width: 768px) {
  .chartCastItem {
    display: -ms-flexbox;
    display: -webkit-box;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -ms-flex-pack: justify;
    -webkit-box-pack: justify;
    justify-content: space-between;
    font-size: 1.6rem;
  }
}
.chartCastItem .thumb {
  max-width: 160px;
}
@media screen and (max-width: 767px) {
  .chartCastItem .thumb {
    margin: 0 auto 16px;
  }
}
@media screen and (min-width: 768px) {
  .chartCastItem .thumb {
    width: 30%;
    max-width: 264px;
  }
}
@media screen and (min-width: 768px) {
  .chartCastItem .right {
    width: calc(70% - 30px);
  }
}
.chartCastItem .name {
  position: relative;
  margin-bottom: 16px;
  padding-bottom: 1.5em;
}
@media screen and (max-width: 767px) {
  .chartCastItem .name {
    text-align: center;
  }
}
.chartCastItem .name:before, .chartCastItem .name:after {
  position: absolute;
  bottom: 0;
  background: url(../images/common/icon_glitter_pink.png) no-repeat center;
  background-size: 100% auto;
  width: 10px;
  height: 12px;
  content: "";
}
.chartCastItem .name:before {
  left: 0;
}
.chartCastItem .name:after {
  right: 0;
}
.chartCastItem .nameInner:before {
  position: absolute;
  bottom: 5px;
  left: 50%;
  border-bottom: 2px dotted #ddd;
  width: calc(100% - 40px);
  height: 2px;
  content: "";
  -webkit-transform: translate(-50%, 0);
  transform: translate(-50%, 0);
}
.chartCastItem .name .name01, .chartCastItem .name .name02 {
  display: inline-block;
}
.chartCastItem .name .name01 {
  position: relative;
  font-size: 13px;
  font-size: 3.46667vw;
  line-height: 1;
  font-weight: bold;
}
@media screen and (min-width: 768px) {
  .chartCastItem .name .name01 {
    font-size: 1.6rem;
  }
}
.chartCastItem .name .name01Inner {
  font-size: 18px;
  font-size: 4.8vw;
  font-weight: bold;
}
@media screen and (min-width: 768px) {
  .chartCastItem .name .name01Inner {
    font-size: 2.2rem;
  }
}
.chartCastItem .name .name02 {
  margin-left: .25em;
  line-height: 1;
}
@media screen and (min-width: 768px) {
  .chartCastItem .name .name02 {
    font-size: 1.8rem;
  }
}
.chartCastItem .name .name02:before {
  display: inline-block;
  margin-right: .5em;
  width: 12px;
  height: 12px;
  background: url(../images/icon_news.png) no-repeat;
  background-size: 100% auto;
  content: "";
}
.chartCastItem .name .name02 span {
  font-size: 10px;
  font-size: 2.66667vw;
}
@media screen and (min-width: 768px) {
  .chartCastItem .name .name02 span {
    font-size: 1.4rem;
  }
}
.chartCastItem .txtWrap {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  text-align: left;
}
.chartCastItem .txtWrap p {
  margin-bottom: 1em;
  line-height: 1.8;
}
.chartCastItem .txtWrap p:last-of-type {
  margin-bottom: 0;
}
.chartCastItem .txtWrap p strong {
  font-weight: bold;
}

.yellowTexture {
  padding: 25px 0;
  background: url(../images/common/bg_texture_yellow.png);
}
@media screen and (min-width: 768px) {
  .yellowTexture {
    padding: 50px 0;
  }
}

.yellowBlock {
  position: relative;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  margin: 0 auto 48px;
  width: 90%;
  max-width: 1036px;
  color: #333;
  text-align: center;
}
@media screen and (min-width: 768px) {
  .yellowBlock {
    margin-bottom: 64px;
  }
}
.yellowBlock:before {
  display: block;
  width: 100%;
  padding-bottom: 12%;
  background: url(../images/common/bg_block_yellow_top.png) no-repeat top center;
  background-size: 100% auto;
  content: "";
}
@media screen and (min-width: 768px) {
  .yellowBlock:before {
    padding-bottom: 6%;
    background-image: url(../images/common/bg_block_yellow_top_pc.png);
  }
}
.yellowBlock:after {
  display: block;
  width: 100%;
  padding-bottom: 12%;
  background: url(../images/common/bg_block_yellow_btm.png) no-repeat bottom center;
  background-size: 100% auto;
  content: "";
}
@media screen and (min-width: 768px) {
  .yellowBlock:after {
    padding-bottom: 6%;
    background-image: url(../images/common/bg_block_yellow_btm_pc.png);
  }
}
.yellowBlockInner {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  background: url(../images/common/bg_block_yellow.png) repeat-y center;
  background-size: 100% auto;
  color: #333;
  text-align: center;
  padding: 0 5% 1px;
}
@media screen and (min-width: 768px) {
  .yellowBlockInner {
    background-image: url(../images/common/bg_block_yellow_pc.png);
  }
}

.pinkTexture {
  padding: 25px 0;
  background: url(../images/common/bg_texture_pink.png);
}
@media screen and (min-width: 768px) {
  .pinkTexture {
    padding: 50px 0;
  }
}

.pinkBlock {
  position: relative;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  margin: 0 auto 48px;
  width: 90%;
  max-width: 1036px;
  color: #333;
  text-align: center;
}
@media screen and (min-width: 768px) {
  .pinkBlock {
    margin-bottom: 64px;
  }
}
.pinkBlock:before {
  display: block;
  width: 100%;
  padding-bottom: 12%;
  background: url(../images/common/bg_block_pink_top.png) no-repeat top center;
  background-size: 100% auto;
  content: "";
}
@media screen and (min-width: 768px) {
  .pinkBlock:before {
    padding-bottom: 6%;
    background-image: url(../images/common/bg_block_pink_top_pc.png);
  }
}
.pinkBlock:after {
  display: block;
  width: 100%;
  padding-bottom: 12%;
  background: url(../images/common/bg_block_pink_btm.png) no-repeat bottom center;
  background-size: 100% auto;
  content: "";
}
@media screen and (min-width: 768px) {
  .pinkBlock:after {
    padding-bottom: 6%;
    background-image: url(../images/common/bg_block_pink_btm_pc.png);
  }
}
.pinkBlockInner {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  background: url(../images/common/bg_block_pink.png) repeat-y center;
  background-size: 100% auto;
  color: #333;
  text-align: center;
  padding: 0 5% 1px;
}
@media screen and (min-width: 768px) {
  .pinkBlockInner {
    background-image: url(../images/common/bg_block_pink_pc.png);
  }
}

.blueTexture {
  padding: 25px 0;
  background: url(../images/common/bg_texture_blue.png);
}
@media screen and (min-width: 768px) {
  .blueTexture {
    padding: 50px 0;
  }
}

.blueBlock {
  position: relative;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  margin: 0 auto 48px;
  width: 90%;
  max-width: 1036px;
  color: #333;
  text-align: center;
}
@media screen and (min-width: 768px) {
  .blueBlock {
    margin-bottom: 64px;
  }
}
.blueBlock:before {
  display: block;
  width: 100%;
  padding-bottom: 12%;
  background: url(../images/common/bg_block_blue_top.png) no-repeat top center;
  background-size: 100% auto;
  content: "";
}
@media screen and (min-width: 768px) {
  .blueBlock:before {
    padding-bottom: 6%;
    background-image: url(../images/common/bg_block_blue_top_pc.png);
  }
}
.blueBlock:after {
  display: block;
  width: 100%;
  padding-bottom: 12%;
  background: url(../images/common/bg_block_blue_btm.png) no-repeat bottom center;
  background-size: 100% auto;
  content: "";
}
@media screen and (min-width: 768px) {
  .blueBlock:after {
    padding-bottom: 6%;
    background-image: url(../images/common/bg_block_blue_btm_pc.png);
  }
}
.blueBlockInner {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  background: url(../images/common/bg_block_blue.png) repeat-y center;
  background-size: 100% auto;
  color: #333;
  text-align: center;
  padding: 0 5% 1px;
}
@media screen and (min-width: 768px) {
  .blueBlockInner {
    background-image: url(../images/common/bg_block_blue_pc.png);
  }
}

/* =====================================================================
*    67コール募集用追加
* =================================================================== */

.txt {
    padding-left: 1em;
    text-indent: -1em;
    margin-bottom: 30px;
}

.txt li {
      margin-bottom: 5px;
}

@media screen and (max-width: 699px) {
.dates {
    color: #F00;
    font-weight: bold;
    margin: 3px 3px 0 5px;
    background-color: #FFF;
    line-height: 1.5em;
}
}


@media screen and (min-width: 700px) {
.dates {
    color: #F00;
    font-weight: bold;
    margin: 3px 3px 0 5px;
    background-color: #FFF;
        line-height: 1.5em;
}
}

@media screen and (max-width: 699px) {
.call67 {
    width: 80px;
    padding-right: 1px;
    display: inline-block;
    margin-bottom: 2px;
}
}

@media screen and (min-width: 700px) {
.call67 img {
    width: 85px;
    height: auto;
    padding-right: 2px;
    display: inline-block;
}
}

@media screen and (max-width: 699px) {
.call67 img {
    padding-left: 15px;
    width: 100% !important;
}
}

.tellbox {
  width: 40%;
  padding: 3%;
  margin: 10px auto;
  background-color: #FFF;
  border: solid 2px #ec5990;
  border-radius: .4em;
}

@media screen and (max-width: 699px) {
.tellbox {
  width: 90%;
    padding: 5%;
}
}

.telltxt {
  font-size: 2rem;
  font-weight: bold;
  text-align: center;
color: #F00;
}

.newsListItem a:link {
   color: #F00;
  }
.newsListItem a:visited {
  color: #F00;
 }
.newsListItem a:hover {
  color: #F00;
 }
.newsListItem a:active {
  color: #F00;
 }


/* =====================================================================
*    Hulu
* =================================================================== */
#hulu .indexNextStoryWrap {
  position: relative;
  margin: 40px auto 40px;
  padding: 0px 0 48px;
  width: 90%;
  max-width: 1036px;
}
@media screen and (min-width: 768px) {
  #hulu .indexNextStoryWrap {
    margin: 120px auto 64px;
  }
}

#hulu .indexNextStory:after {
  position: absolute;
  bottom: -10%;
  left: 0;
  width: 100%;
  padding-bottom: 60%;
  background: url(../images/hulu/bg_ns_btm.png) no-repeat top center;
  background-size: 100% auto;
  content: "";
}
@media screen and (min-width: 768px) {
  #hulu .indexNextStory:after {
    padding-bottom: 58%;
    background-image: url(../images/hulu/bg_ns_btm_pc.png) ;
  }
}

#hulu .indexNextStory h2 {
    width: 300px !important;
    margin: 0 auto ;
    padding: 20px 0;
}
@media screen and (min-width: 768px) {
    #hulu .indexNextStory h2 {
        width: 468px !important;
        margin: 0 auto ;
        padding: 20px 0;
    }
}

#hulu .yellowBlockInner .inner{
    width:90%;
    max-width: 840px;
    margin: auto;
}
.huluTxt {
    width:95%;
    margin: auto;
    margin-bottom: 2em;
    font-size: 14px;
    font-size: 3.73333vw;
    line-height: 2;
    text-align: left;
}
@media screen and (min-width: 768px) {
    .huluTxt {
        font-size: 1.6rem;
    }
}

ul.imageBlock {
    margin: 40px 10px 20px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
}
ul.imageBlock li{
    width: 100%;
    margin: 2%;
    padding: 0;
}
@media screen and (min-width: 768px) {
    ul.imageBlock li{
        width: 47%;
        margin: 1.45%;
        padding: 0;
    }
}

#hulu .date {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: start;
    -ms-flex-pack: start;
    justify-content: flex-start;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    width: 85%;
    max-width: 410px;
    margin: 10px auto 20px;
    font-size: 14px;
    line-height: 2em;
}
#hulu .date dt {
    width: 40%;
    text-align: center;
    color: #e3007f;
    background: #fff;
    padding: 0;
    margin-right: 5%;
    border-radius: 30px;
    font-weight: bold;
    margin-bottom: 10px;
}
#hulu .date dd {
    width: 55%;
    text-align: left;
    padding: 0;
    font-weight: bold;
    margin-bottom: 10px;
}
@media screen and (min-width: 768px) {
    #hulu .date {
        font-size: 20px;
    }
    #hulu .date dt {
    }
}


#hulu .colorBlockInner{
    text-align: left;
    border-bottom: none !important;
}
.hulu_comment h3 {
    color: #fff;
    background: #e3007f;
    font-size: 18px;
    border-radius: 30px;
    font-weight: bold;
    line-height: 1.6em;
    padding: 5px 15px 3px;
    display: inline-block;
    margin-bottom: 15px;
}
.hulu_comment dl {
    border-top: 2px dotted #fff;
    line-height: 1.6em;
    padding-top: 15px;
}
.hulu_comment dl dt{
    color: #e3007f;
    font-weight: bold;
    position: relative;
    padding-left: 2em;
    padding-bottom:.5em;
}
.hulu_comment dl dt::before {
    content: "Q.";
    position: absolute;
    left:0;
    top: -.1em;
    font-size: 1.2em;

}
.hulu_comment dl dd{
    padding-bottom: 20px;
    position: relative;
    padding-left: 2em;
}
.hulu_comment dl dd::before {
    content: "A.";
    position: absolute;
    left: .1em;
    top: -.1em;
    font-size: 1.2em;

}
#aboutHulu.pinkTexture {
    background: #f8b6c6 !important;
}
#aboutHulu {
    text-align: center;
}
#aboutHulu p{
    line-height: 1.6em;
    text-align: center;
    padding-bottom: 30px;
}

.hulu_movie_dokusen {
    width: 80%;
    margin: 0 auto 10px;
}

.btn_free {
    width: 270px;
    margin: auto;
}
@media screen and (min-width: 768px) {
    .hulu_movie_dokusen {
        width: auto;
        padding: 2% 0;
    }

    .btn_free {
        width: 568px;
        margin: auto;
        padding: 0 0 2%;
    }

    /*.indexNextStoryWrap .btn_free {
        padding: 10px 0 70px;
    }*/
}

.hulu_movie {
    background-color: #000;
    border-radius: 6px;
    padding: 7% 0 4%;
    margin: 0 0 6%;
    position: relative;
}

.hulu_movie::before,
.hulu_movie::after {
    content: "";
    display: block;
    width: 14.77%;
    padding-top: 14.77%;
    background: url(../images/hulu/movie_bg.png) no-repeat left top;
    background-size: 100% auto;
    position: absolute;
    top: 3px;
    left: 3px;
}

.hulu_movie::after {
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg);
    right: 3px;
    bottom: 3px;
    left: auto;
    top: auto;
}

.hulu_movie h3 {
    width: 54.29%;
    margin: 0 auto 3%;
}

.hulu_movie_box {
    width: 91.14%;
    margin: 0 auto 5%;
}

.hulu_movie_wrap {
    width: 100%;
    padding-top: 56.25%;
    position: relative;
}

.hulu_movie_txt {
    width: 69%;
    margin: 0 auto 2.5%;
}

.hulu_movie_txt2 {
    width: 85.94%;
    margin: 0 auto;
}

@media screen and (min-width: 768px) {
    .hulu_movie {
        width: 88.24%;
        margin: 0 auto 4%;
        padding: 5% 0;
    }

    .hulu_movie h3 {
        width: 43.89%;
        margin: 0 auto 2.5%;
    }

    .hulu_movie_box {
        width: 80%;
        margin: 0 auto 4%;
    }

    .hulu_movie_txt {
        width: 55%;
        margin: 0 auto 2%
    }

    .hulu_movie_txt2 {
        width: 45.22%;
    }

    .hulu_movie::before,
    .hulu_movie::after {
        width: 11.67%;
        padding-top: 11.67%;
    }
}