@charset "UTF-8";
/* CSS Document */
/* CSS Document */
/*---------------------
カラム幅設定
----------------------*/
/*---------------------
カラー設定
----------------------*/
/*---------------------
ベンダープレフィックス初期設定
----------------------*/
/*---------------------
透明度　初期設定
----------------------*/
/*---------------------
フォントサイズ初期設定
----------------------*/
/*---------------------
フォントファミリー初期設定
----------------------*/
/*----------------
Retina,高解像度 対策
-----------------*/
/*---------------------
角丸　初期設定
----------------------*/
/*
.box {
     @include circle(100px);
     background: #fc0;
}
*/
/*---------------------
ボックスシャドウ　mixin
----------------------*/
/*
div { @include box-shadow(8px, 8px);}
*/
 /*---------------------
グラデーション　mixin
----------------------*/
 /* 使用例
 div { @include gradient(#ff00ff, #ff00cc, vertical);}
*/
/*---------------------
デュレーション　mixin
----------------------*/
/*
.move{
    @include transition(0.5s);
}
*/
/*---------------------
キーフレーム　mixin
----------------------*/
@import url("https://fonts.googleapis.com/css?family=Libre+Baskerville");
@import url("https://fonts.googleapis.com/css?family=Merriweather");
@import url("https://fonts.googleapis.com/css?family=Russo+One");
@-webkit-keyframes $animation-name {
  0% {
    opacity: 0; }
  100% {
    opacity: 1; } }
@-moz-keyframes $animation-name {
  0% {
    opacity: 0; }
  100% {
    opacity: 1; } }
@keyframes $animation-name {
  0% {
    opacity: 0; }
  100% {
    opacity: 1; } }
@-webkit-keyframes $animation-name {
  0% {
    color: #fff; }
  100% {
    color: #0094d5; } }
@-moz-keyframes $animation-name {
  0% {
    color: #fff; }
  100% {
    color: #0094d5; } }
@keyframes $animation-name {
  0% {
    color: #fff; }
  100% {
    color: #0094d5; } }
/*---------------------
カラムグリッド mixin
----------------------*/
/*---------------------
カラムグリッド mixin
----------------------*/
/*　使用例 
div { @include ghost-button(“Trebuchet”, 12px, #ffffff, 5px, #34dec6, 4px, 300ms, #000000 );}
*/
/*---------------------
リンクカラー初期設定
----------------------*/
/*---------------------
汎用BOX用　マージンMIXIN リセット
----------------------*/
.m_0 {
  margin: 0 !important; }

.p_0 {
  padding: 0 !important; }

/*---------------------
汎用ボタンリンク用　
----------------------*/
.btn {
  -moz-user-select: none;
  background-image: none;
  border-radius: 4px;
  cursor: pointer;
  display: inline-block;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.42857;
  margin-bottom: 0;
  padding: 6px 12px;
  text-align: center;
  vertical-align: middle;
  white-space: nowrap; }

.btn-info {
  background-color: #5bc0de;
  border-color: #46b8da;
  color: #fff; }

/*---------------------
フォント import
----------------------*/

@import url('https://fonts.googleapis.com/css?family=Roboto+Condensed:400,700');

/*---------------------
HTML BODY初期設定
----------------------*/
html, body {
  height: 100%;
  margin: 0;
  padding: 0;
  color: #111; }

html {
  margin: 0;
  padding: 0;
  font-family: "Hiragino Kaku Gothic Pro", Meiryo, "MS PGothic", sans-serif  !important; }
  html li {
    list-style-type: none; }

body {
  font-family: Arial,Helvetica,"ヒラギノ角ゴ ProN W3","Hiragino Kaku Gothic ProN","メイリオ",Meiryo,sans-serif; }

p {
  line-height: 1.3em; }


a {
  color: #555; text-decoration: underline;}

a:hover {
  color: #111; text-decoration: none; }

a.button {
  opacity: 100; }

a.button:hover {
  opacity: 0.7; }

/*---------------------
フォント設定 
----------------------*/
h1, h2, h3, h4, h5, h6 {
  font-weight: normal; }

/*---------------------
カスタムボタン 
----------------------*/
/* Custom default button */
.btn-default,
.btn-default:hover,
.btn-default:focus {
  color: #333;
  text-shadow: none;
  /* Prevent inheritance from `body` */
  background-color: #fff;
  border: 1px solid #fff; }

/*---------------------
wrapper設定 
----------------------*/
#wrapper {
  -webkit-overflow-scrolling: touch; }

/*---------------------
nav設定 
----------------------*/
#top-head {
  box-shadow: 0px 1px 2px 0px #888; }

/*---------------------
汎用ボックス　マージン相殺
----------------------*/
header .container-fluid, header div {
  padding-left: 0 !important;
  padding-right: 0 !important; }

header .row,
section.main-contents .row {
  margin-left: 0;
  margin-right: 0; }

section.main-contents .container > div {
  padding-left: 0;
  padding-right: 0; }

section.main-contents .container-fluid {
  padding-left: 0;
  padding-right: 0; }

section.main-contents .row {
  margin: 30px 0 20px; }

/*---------------------
ヘッダーロゴ設定 
----------------------*/
header {
  background: #fff;
  position: relative; }

.logo-pc {
  max-width: 500px;
  margin: 0 auto; }

.logo-smp {
  max-width: 150px;
  margin: 0 auto;
  padding: 20px 0;
  text-align: center; }

@media screen and (min-width: 640px) {
  .logo-smp {
    max-width: 250px;
    margin: 0 auto;
    padding: 20px 0;
    text-align: center; } }
.sub-logo {
  width: 100%;
  text-align: center; }
  .sub-logo img {
    display: block;
    width: 90%;
    max-width: 250px;
    margin: 0 auto; }

@media screen and (max-width: 767px) {
  .sub-logo img {
    display: block;
    width: 90%;
    max-width: 250px;
    margin: 0 auto; } }
/*---------------------
Archiveページロゴ設定 
----------------------*/
header.pn-archive {
  background: #fff;
  position: relative; }

/*---------------------
ヘッダーバナー
----------------------*/
.header-banner {
  text-align: center; }
  .header-banner img {
    width: 100%;
    max-width: 320px; }

@media screen and (max-width: 480px) {
  .header-banner {
    text-align: center; }
    .header-banner img {
      width: 100%;
      max-width: 300px; } }
/*---------------------
ヘッダーイメージ設定 
----------------------*/
.main-image {
  position: relative;
  width: 100%; }
  .main-image h1 {
    margin-top: 0;
    margin-bottom: 0; }
  .main-image img {
    width: 100%; }

@media screen and (min-width: 970px) {
  .main-image {
    margin: 0 auto; } }
@media screen and (min-width: 1170px) {
  .main-image {
    margin: 0 auto; } }
/*---------------------
twitter 
----------------------*/
.twitter-icon {
  display: block;
  position: absolute;
  z-index: 100;
  top: 20px;
  right: 35px; }
  .twitter-icon a.twitter {
    display: block;
    width: 45px;
    height: 45px;
    background: url(../img/twitter_official.svg) no-repeat top left;
    background-size: 45px 45px;
    text-indent: -9999px; }
  .twitter-icon a.twitter:hover {
      background: url(../img/twitter_official_o.svg) no-repeat top left;
    background-size: 45px 45px; }
  .twitter-icon a.twitter-staff {
    display: block;
    width: 45px;
    height: 45px;
    margin-top: 20px;
    background: url(../img/twitter_staff.svg) no-repeat top left;
    background-size: 45px 45px;
    text-indent: -9999px; }
  .twitter-icon a.twitter-staff:hover {
    background: url(../img/twitter_staff_o.svg) no-repeat top left;
    background-size: 45px 45px; }
  .twitter-icon a.insta {
    display: block;
    width: 45px;
    height: 45px;
    margin-top: 20px;
    background: url(../img/instagram.svg) no-repeat top left;
    background-size: 45px 45px;
    text-indent: -9999px; }
  .twitter-icon a.insta:hover {
    background: url(../img/instagram_o.svg) no-repeat top left;
    background-size: 45px 45px; }

.twitter-icon a.lineat {
    display: block;
    width: 45px;
    height: 45px;
    margin-top: 20px;
    background: url(../img/lineat.svg) no-repeat top left;
    background-size: 45px 45px;
    text-indent: -9999px; }
.twitter-icon a.lineat:hover {
    background: url(../img/lineat_o.svg) no-repeat top left;
    background-size: 45px 45px; }

.twitter-icon a.youtube {
    display: block;
    width: 45px;
    height: 45px;
    margin-top: 20px;
    background: url(../img/youtube.svg) no-repeat top left;
    background-size: 45px 45px;
    text-indent: -9999px; }
.twitter-icon a.youtube:hover {
    background: url(../img/youtube_o.svg) no-repeat top left;
    background-size: 45px 45px; }

.twitter-icon a.tiktok {
    display: block;
    width: 45px;
    height: 45px;
    margin-top: 20px;
    background: url(../img/tiktok.svg) no-repeat top left;
    background-size: 45px 45px;
    text-indent: -9999px; }
.twitter-icon a.tiktok:hover {
    background: url(../img/tiktok_o.svg) no-repeat top left;
    background-size: 45px 45px; }


/*---------------------
SNSアイコン 
----------------------*/
section.sns .container-fluid {
  padding-left: 0 !important;
  padding-right: 0 !important; }

section.sns .row {
  margin-left: 0 !important;
  margin-right: 0 !important; }

.sns-icon {
  width: 100%;
  background: rgba(200, 200, 200, 0.4);
  padding: 20px 0;
  text-align: center; }
  .sns-icon .container div img {
    border-radius: 5px; }

/*---------------------
ticker 一行ニュース 
----------------------*/
.ticker-wrap {
  width: 100%;
  background: #111; }

.ticker {
  margin: 0 auto;
  padding: 10px;
  width: 650px;
  min-height: 40px;
  text-align: left;
  position: relative;
  overflow: hidden; }

.ticker ul {
  width: 100%;
  position: relative; }

.ticker ul li {
  width: 100%;
  display: none;
  text-align: center;
  overflow-x: hidden;
  color: #fff; }

.ticker ul li a {
  color: #fff; }

.ticker ul li a:hover {
  text-decoration: underline;
  color: #dcdcdc; }

/*---------------------
各コンテンツ見出し　
----------------------*/
h3.ch-head {
  margin-bottom: 40px;
  font-size: 43px;
  text-align: center;
  font-family: 'Russo One', sans-serif;
  color: #444;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  background: #444;
  background: -webkit-linear-gradient(-90deg, #444 0%, #000 100%);
  -webkit-text-fill-color: transparent;
  -webkit-background-clip: text; }

@media screen and (max-width: 767px) {
  h3.ch-head {
    margin-bottom: 40px;
    font-size: 32px;
    text-align: center;
    font-weight: 300;
    font-family: 'Russo One', sans-serif; } }
h3.ch-head2 {
  margin-bottom: 40px;
  font-size: 43px;
  text-align: center;
  font-weight: 300;
  font-family: 'Russo One', sans-serif;
  color: #fff;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale; }

@media screen and (max-width: 767px) {
  h3.ch-head2 {
    margin-bottom: 40px;
    font-size: 32px;
    text-align: center;
    font-weight: 300;
    font-family: 'Russo One', sans-serif; } }
h3.ch-head3 {
  margin-bottom: 40px;
  font-size: 43px;
  text-align: center;
  font-weight: 300;
  font-family: 'Russo One', sans-serif;
  color: #fff;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  background: #fff;
  background: -webkit-linear-gradient(-90deg, #fff 0%, #dcdcdc 100%);
  -webkit-text-fill-color: transparent;
  -webkit-background-clip: text; }

@media screen and (max-width: 767px) {
  h3.ch-head3 {
    margin-bottom: 40px;
    font-size: 32px;
    text-align: center;
    font-weight: 300;
    font-family: 'Russo One', sans-serif; } }
/*---------------------
ユニットプロフ　
----------------------*/
.unit-prof {
  background: rgba(255, 255, 255, 0.7);
  margin: 0 auto;
  margin-left: 20px;
  margin-right: 20px;
  margin-bottom: 30px;
  margin-top: 30px;
  padding: 30px;
  border-radius: 5px; }
  .unit-prof p {
    line-height: 1.4;
    color: #666; }

@media screen and (min-width: 970px) {
  .unit-prof {
    max-width: 960px;
    margin: 0 auto;
    margin-bottom: 30px; } }
@media screen and (min-width: 1170px) {
  .unit-prof {
    max-width: 960px;
    margin: 0 auto;
    margin-bottom: 30px; } }
@media screen and (max-width: 480px) {
  .unit-prof {
    margin-left: 5px;
    margin-right: 5px;
    margin-bottom: 5px;
    margin-top: 10px; }
    .unit-prof .f150, .unit-prof .f120 {
      font-size: 17px; } }
.c-orange {
  color: #e95412; }

.c-gray {
  color: #333; }

.c-cyan {
  color: #00a0e9; }

.c-gold {
  color: #ba9233; }

/*---------------------
youtubeエリア　
----------------------*/
.youtube-area {
  border-top: 1px solid #f0f0f0; }
  .youtube-area .w-full img {
    max-width: 100%; }

.youtube-wrap {
  margin: 0 auto;
  max-width: 560px;
  max-height: 315px; }

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

.youtube iframe {
  position: absolute;
  top: 0;
  right: 0;
  width: 100% !important;
  height: 100% !important; }

.youtube-wrap2 {
  margin: 0 auto;
  max-width: 560px;
  max-height: 315px; }

@media screen and (min-width: 1170px) {
  .youtube-wrap2 {
    margin: 0 auto;
    max-width: 560px;
    max-height: 315px; } }
@media screen and (min-width: 960px) {
  .youtube-wrap2 {
    margin: 0 auto;
    max-width: 460px;
    max-height: 259px; } }
table.youtube-pc {
  width: 100%;
  max-width: 960px;
  margin: 0 auto; }
  table.youtube-pc td {
    text-align: center;
    padding: 20px; }

/*---------------------
重要お知らせ　
----------------------*/
.attention {
  margin-top: 20px; }
  .attention p {
    font-size: 14px;
    font-weight: 600; }

.attention-inner {
  background: rgba(255, 255, 255, 0.4);
  padding: 15px 15px 10px;
  margin-bottom: 20px;
  border: 2px solid yellow;
  border-radius: 4px; }

.attention-inner:last-child {
  margin-bottom: 0; }

/*---------------------
メンバープロフィール
----------------------*/
#profile {
  background: url(../img/pattern3.png) top center;
  margin: 0;
  padding-bottom: 60px; }

.about-unit {
  color: #fff;
  font-family: Helvetica,"ヒラギノ角ゴ ProN W3","Hiragino Kaku Gothic ProN","メイリオ",Meiryo,sans-serif; }
  .about-unit h3 {
    font-weight: 600;
    font-size: 1.5em;
    padding: 10px 0;
    text-align: center; }
  .about-unit p {
    font-size: 1em; }

.about-member .member {
    position: relative;
  width: 23.1%;
  float: left;
  color: #fff;
  margin-right: 1.8%; }
.about-member .member:last-child {
    margin-right: 0;
}
  .about-member .member img {
    width: 100%; }
  .about-member .member .name {
    margin-top: 10px;
    font-size: 1.3em;
    font-family: 'Russo One', sans-serif; }
  .about-member .member .prof-txt {
    font-size: 0.8em;
    font-family: Helvetica,"ヒラギノ角ゴ ProN W3","Hiragino Kaku Gothic ProN","メイリオ",Meiryo,sans-serif; }
.about-member .member:first-child {
  margin-left: 0.5%; }

@media screen and (max-width: 970px) {
  .about-member .member {
    width: 47%;
    min-height: 500px;
    float: left;
    color: #fff;
    margin-right: 2%;
    }
    .about-member .member img {
      width: 100%; }
    .about-member .member .name {
      margin-top: 10px;
      font-size: 1.3em;
      font-family: 'Russo One', sans-serif; }
    .about-member .member .prof-txt {
      font-size: 0.8em;
      font-family: Helvetica,"ヒラギノ角ゴ ProN W3","Hiragino Kaku Gothic ProN","メイリオ",Meiryo,sans-serif; }
  .about-member .member:first-child {
    margin-left: 0.5%; }
  .about-member .member:nth-child(5) {
    margin-left: 0; } }
@media screen and (max-width: 480px) {
  .about-member {
    width: 90%;
    margin: 0 auto; }
    .about-member .member {
      width: 100%;
      margin: 0 auto;
      margin-bottom: 50px;
      float: none;
      color: #fff; }
      .about-member .member img {
        width: 100%; }
      .about-member .member .name {
        margin-top: 10px;
        font-size: 1.5em;
        font-family: 'Russo One', sans-serif; }
      .about-member .member .prof-txt {
        font-size: 0.8em;
        font-family: Helvetica,"ヒラギノ角ゴ ProN W3","Hiragino Kaku Gothic ProN","メイリオ",Meiryo,sans-serif; }
    .about-member .member:first-child {
      margin-left: 0; }
    .about-member .member:nth-child(5) {
      margin-left: 0; } }
.member-txt {
  color: #999;
  font-size: 1.2em;
  font-family: 'Russo One', sans-serif; }
  .member-txt em {
    font-style: normal;
    width: 7em; }
  .member-txt span {
    margin-left: 1em;
    font-size: 0.8em;
    font-family: Helvetica,"游ゴシック",YuGothic,"ヒラギノ角ゴ ProN W3","Hiragino Kaku Gothic ProN","メイリオ",Meiryo,sans-serif; }

.profile-txt {
  background: #7e6b5a;
  color: #fff; }
  .profile-txt .col-sm-5,
  .profile-txt .col-sm-7 {
    padding: 0; }
  .profile-txt .inner-prof {
    background: url(../img/bg_profile.png) no-repeat top left;
    background-size: cover; }
  .profile-txt .inner-txt {
    padding: 30px 40px; }
  .profile-txt .inner-name {
    margin-top: 100px;
    margin-bottom: 30px;
    font-size: 3em;
    font-family: 'Russo One', sans-serif;
    color: #fff;
    line-height: 1.0; }
    .profile-txt .inner-name span {
      font-size: 13px; }

@media screen and (max-width: 767px) {
  .profile-txt .inner-name {
    margin-top: 40px; } }
/*---------------------
メンバーtwitter 
----------------------*/
.member-thumb {
  position: relative;
  display: block; }

.member-twitter {
  position: absolute;
  display: block;
  bottom: 0px;
  right: 5px;
  font-size: 10px;
  z-index: 100; }
  .member-twitter img {
    width: 35px;
    height: 35px;
    border-radius: 50%; }
  .member-twitter span {
    position: relative;
    line-height: 30px;
    font-size: 10px;
    top: -4px; }

/*---------------------
Release / CD情報
----------------------*/
#release {
  /*background: #fff url(../img/release_bg.png) no-repeat top center;*/
  background-size: cover; }

.cd {
  margin: 0 auto;
  margin-top: 30px;
  padding-bottom: 20px; }
  .cd .thumb {
      position: relative;
    text-align: left; }
    .cd .thumb img {
      width: 100%;
      border: 1px solid #eff0f5; }

.cd-info {
  text-align: left;
  font-size: 22px;
  font-weight: 400; }
  .cd-info h2.release-copy {
    font-size: 22px;
    font-weight: 600;
    font-family: Helvetica,"ヒラギノ角ゴ ProN W3","Hiragino Kaku Gothic ProN","メイリオ",Meiryo,sans-serif;
    margin-top: 0;
    line-height: 1.5; }
    .cd-info h2.release-copy span {
      font-size: 15px; }
    .cd-info h2.release-copy em {
      font-family: 'Russo One', sans-serif; }
  .cd-info p.release-txt {
    font-size: 13px;
    line-height: 1.4;
    text-align: justify; }
.cd-info p.release-txt2 {
    font-size: 13px;
    line-height: 1.4;
    text-align: justify; }
  .cd-info h3 {
    font-size: 28px;
    font-weight: 600;
    margin-bottom: 20px;
    line-height: 1.6;
    text-indent: -0.5em; }
  .cd-info p.songs {
    margin-bottom: 10px;
    line-height: 1.2; }
    .cd-info p.songs span {
      font-size: 13px; }
.cd-info p.songs2 {
    font-size: 0.8em;
    margin-bottom: 5px;
    line-height: 1.1; }
.cd-info p.songs2 span {
    font-size: 13px; }

  .cd-info p.credit {
    font-size: 12px;
    margin-top: 20px;
    font-weight: 400;
    letter-spacing: 0px; }

.producer {
  padding: 20px;
  background: rgba(255, 255, 255, 0.8);
  border-radius: 5px;
  border: 2px solid #fff; }

@media screen and (max-width: 970px) {
  .cd-info h2 {
    font-size: 18px; }
  .cd-info h3 {
    font-size: 24px; } }
@media screen and (max-width: 767px) {
  .cd .thumb {
    margin-bottom: 30px; }
    .cd .thumb img {
      display: block;
      width: 70%;
      margin: 0 auto; }

  .cd-info h2, .cd-info h3 {
    text-align: center; }
  .cd-info h3 {
    padding: 10px 0;
    border-top: 1px dotted #eff0f5;
    border-bottom: 1px dotted #eff0f5; }
  .cd-info .songs {
    font-size: 16px; } }
@media screen and (max-width: 480px) {
  .cd-info {
    text-align: left;
    font-size: 22px;
    font-weight: 400; }
    .cd-info h2.release-copy {
      font-size: 17px;
      font-weight: 600;
      font-family: Helvetica,"ヒラギノ角ゴ ProN W3","Hiragino Kaku Gothic ProN","メイリオ",Meiryo,sans-serif;
      margin-top: 0;
      line-height: 1.5;
      text-shadow: 1px 0px 3px rgba(255, 255, 255, 0.5); }
    .cd-info p.release-txt {
      font-size: 15px; } 
    .cd-info p.release-txt2 {
        font-size: 11px; }
}

.buynow-wrap{
    border: 4px solid #000;
    border-radius: 3px;
}

.buynow {
  margin-bottom: 30px; }
  .buynow ul {
    width: 100%;
    margin: 0 auto; }
  .buynow li {
    display: block;
    float: left;
    width: 16%;
    margin-right: 5px;
    text-align: center; }
  .buynow li img {
    width: 100%;
    max-width: 120px;
    border-radius: 5px;
    border: 1px solid #f0f0f0; }
  .buynow li img:hover {
    border: 1px solid #ff9200; }
  .buynow li:last-child {
    margin-right: 0; }

@media screen and (max-width: 979px) {
  .buynow ul {
    width: 99%;
    margin: 0 auto; }
  .buynow li {
    display: block;
    float: left;
    width: 32%;
    margin-bottom: 10px;
    text-align: center; }
  .buynow li img {
    max-width: 115px;
    border-radius: 5px;
    border: 1px solid #f0f0f0; }
  .buynow li img:hover {
    border: 1px solid #ff9200; }
  .buynow li:last-child {
    margin-right: 0; } }
@media screen and (max-width: 767px) {
  .buynow ul {
    width: 100%;
    margin: 0 auto;
    padding: 0; }
  .buynow li {
    margin: 0;
    padding: 0; }
  .buynow li {
    display: block;
    float: left;
    width: 48%;
    margin-bottom: 10px;
    text-align: center; }
  .buynow li img {
    max-width: 105px;
    border-radius: 5px;
    border: 1px solid #f0f0f0; }
  .buynow li img:hover {
    border: 1px solid #ff9200; }
  .buynow li:last-child {
    margin-right: 0; } }
.ch-name {
  border: 2px solid #fff100;
  background: #fff100;
  padding: 10px; }

/* CD disc */
.buynow2 {
    margin-bottom: 30px; }
.buynow2 ul {
    width: 100%;
    margin: 0 auto; }
.buynow2 li {
    display: block;
    float: left;
    width: 25%;
    text-align: center; }
.buynow2 li img {
    width: 100%;
    max-width: 120px;
    border-radius: 5px;
    border: 1px solid #f0f0f0; }
.buynow2 li img:hover {
    border: 1px solid #000; }
.buynow2 li:last-child {
    margin-right: 0; }

@media screen and (max-width: 979px) {
    .buynow2 ul {
        width: 99%;
        margin: 0 auto; }
    .buynow2 li {
        display: block;
        float: left;
        width: 32%;
        margin-bottom: 10px;
        text-align: center; }
    .buynow2 li img {
        max-width: 115px;
        border-radius: 5px;
        border: 1px solid #f0f0f0; }
    .buynow2 li img:hover {
        border: 1px solid #000; }
    .buynow li:last-child {
        margin-right: 0; } }
@media screen and (max-width: 767px) {
    .buynow2 ul {
        width: 100%;
        margin: 0 auto;
        padding: 0; }
    .buynow2 li {
        margin: 0;
        padding: 0; }
    .buynow2 li {
        display: block;
        float: left;
        width: 48%;
        margin-bottom: 10px;
        text-align: center; }
    .buynow2 li img {
        max-width: 105px;
        border-radius: 5px;
        border: 1px solid #f0f0f0; }
    .buynow2 li img:hover {
        border: 1px solid #000; }
    .buynow2 li:last-child {
        margin-right: 0; } }



/* CD disc 横2つ */
.buynow5 {
    margin-bottom: 30px; }
.buynow5 ul {
    width: 100%;
    max-width: 250px;
    margin: 0 auto; }
.buynow5 li {
    display: block;
    float: left;
    width: 50%;
    text-align: center; }
.buynow5 li img {
    width: 100%;
    max-width: 120px;
    border-radius: 5px;
    border: 1px solid #f0f0f0; }
.buynow5 li img:hover {
    border: 1px solid #000; }
.buynow5 li:last-child {
    margin-right: 0; }

@media screen and (max-width: 979px) {
    .buynow5 ul {
        width: 99%;
        margin: 0 auto; }
    .buynow5 li {
        display: block;
        float: left;
        width: 32%;
        margin-bottom: 10px;
        text-align: center; }
    .buynow5 li img {
        max-width: 115px;
        border-radius: 5px;
        border: 1px solid #f0f0f0; }
    .buynow5 li img:hover {
        border: 1px solid #000; }
    .buynow5 li:last-child {
        margin-right: 0; } }
@media screen and (max-width: 767px) {
    .buynow5 ul {
        width: 100%;
        margin: 0 auto;
        padding: 0; }
    .buynow5 li {
        margin: 0;
        padding: 0; }
    .buynow5 li {
        display: block;
        float: left;
        width: 48%;
        margin-bottom: 10px;
        text-align: center; }
    .buynow5 li img {
        max-width: 105px;
        border-radius: 5px;
        border: 1px solid #f0f0f0; }
    .buynow5 li img:hover {
        border: 1px solid #000; }
    .buynow5 li:last-child {
        margin-right: 0; } }

/*---------------------
Banner area　
----------------------*/
.banner-area {
  padding: 10px 0 20px;
  background: url(../img/pattern4.png); }
  .banner-area h2 {
    font-size: 1.4em;
    font-weight: 600; }
  .banner-area a img {
    opacity: 1; }
  .banner-area a:hover img {
    opacity: 0.7; }
  .banner-area .tbc {
    max-width: 500px;
    margin: 0 auto;
    padding: 0; }
    .banner-area .tbc img {
      width: 100%; }
  .banner-area .jolfes {
    max-width: 530px;
    margin: 0 auto;
    margin-top: 40px; }
    .banner-area .jolfes .thumb {
      width: 100%;
      max-width: 200px;
      margin: 0 auto;
      margin-top: 10px;
      margin-bottom: 20px;
      text-align: left; }
    .banner-area .jolfes h3 {
      font-size: 1.1em;
      font-weight: 600;
      line-height: 1.6;
      margin: 0;
      padding: 0; }
      .banner-area .jolfes h3 span {
        font-size: 0.8em;
        font-weight: normal; }

@media screen and (max-width: 767px) {
  .banner-area .jolfes .thumb {
    width: 100%;
    max-width: 200px;
    margin: 0 auto;
    margin-bottom: 20px;
    text-align: center; } }
/*---------------------
INFORMATION　
----------------------*/
#info {
  background: #fff url(../img/pattern1.png); }

.information h2.ch-head {
  color: #111;
  font-size: 28px;
  letter-spacing: 1px;
  text-align: center; }
.information .information-inner {
  padding: 15px 15px 10px;
  border-radius: 4px;
  color: #333; }
  .information .information-inner dl {
    margin: 10px 0;
    padding-bottom: 10px;
    border-bottom: 1px dotted #444; }
    .information .information-inner dl dt, .information .information-inner dl dd {
      padding-left: 0;
      padding-right: 0; }
    .information .information-inner dl dt {
      font-size: 14px;
      font-weight: normal;
      text-align: right; }
      .information .information-inner dl dt span.day {
        font-size: 13px; }
    .information .information-inner dl dd {
      font-size: 14px;
      text-indent: 1.5em; }
  .information .information-inner dl:last-child {
    border-bottom: none; }
  .information .information-inner dl a {
    color: #444; }
  .information .information-inner dl a:hover {
    color: #222;
}

.blinking {
    font-size: 14px;
    color: #ff0000;
    font-family: 'Russo One', sans-serif;
    margin-right: 10px;
    -webkit-animation: blink 0.5s ease-in-out infinite alternate;
    -moz-animation: blink 0.5s ease-in-out infinite alternate;
    animation: blink 0.5s ease-in-out infinite alternate; }

@-webkit-keyframes blink {
    0% {
        opacity: 0; }
    100% {
        opacity: 1; } }
@-moz-keyframes blink {
    0% {
        opacity: 0; }
    100% {
        opacity: 1; } }
@keyframes blink {
    0% {
        opacity: 0; }
    100% {
        opacity: 1; } 
}

.blinkTitle {
    -webkit-animation: blinkTitle 0.8s ease-in-out infinite alternate;
    -moz-animation: blinkTitle 0.8s ease-in-out infinite alternate;
    animation: blinkTitle 0.8s ease-in-out infinite alternate; }

@-webkit-keyframes blinkTitle {
    0% {
        opacity: 0; }
    100% {
        opacity: 1; } }
@-moz-keyframes blinkTitle {
    0% {
        opacity: 0; }
    100% {
        opacity: 1; } }
@keyframes blinkTitle {
    0% {
        opacity: 0; }
    100% {
        opacity: 1; } 
}
@media screen and (max-width: 767px) {
  .information-inner dl dt, .information-inner dl dd {
    text-align: left !important; }
  .information-inner dl dd {
    text-indent: 0 !important; } }
/*---------------------
バナー　
----------------------*/
.banner-area .container div {
  text-align: center; }
  .banner-area .container div img.rect {
    width: 100%;
    max-width: 250px; }
  .banner-area .container div img.long {
    width: 100%;
    max-width: 480px; }

.banner-area2 .row div {
  margin-bottom: 20px; }

.banner-area2 .container div {
  padding-left: 0;
  padding-right: 0;
  text-align: center; }
  .banner-area2 .container div img.rect {
    width: 100%;
    max-width: 250px; }
  .banner-area2 .container div img.long {
    width: 100%;
    max-width: 480px; }

/*---------------------
アーカイブ　
----------------------*/
#archive {
  background: #fff url(../img/pattern4.png);
  background-attachment: fixed;
  min-height: 500px; }

.archive {
  padding-bottom: 40px; }
  .archive .inner {
    border-bottom: 1px solid #ddd; }
  .archive .inner:last-child {
    border-bottom: none; }
  .archive .day {
    text-align: right;
    font-weight: 600; }
    .archive .day p {
      padding-right: 2em; }

@media screen and (max-width: 767px) {
  .archive {
    width: 90%;
    margin: 0 auto;
    padding-bottom: 40px; }
    .archive .inner {
      border-bottom: 1px solid #ddd; }
    .archive .inner:last-child {
      border-bottom: none; }
    .archive .day {
      text-align: left;
      font-weight: 600; }
      .archive .day p {
        padding-right: 2em; } }
/*---------------------
汎用ボックス&見出し　
----------------------*/
.box-radius {
  background: #fff;
  border-radius: 10px;
  box-shadow: 0px 0px 4px 1px #98b6bf; }

/*---------------------
MEDIA情報  スタイルはイベント情報と共用
----------------------*/
/*---------------------
イベント情報
----------------------*/
#live {
  background: url(../img/pattern4.png); }

.event-wrap {
  border-radius: 5px; }

.event {
  margin: 0 auto;
  margin-bottom: 20px;
  padding: 10px 20px;
  border-bottom: 1px dotted #89826d; }

  .event .day, .event .event-txt {
    font-size: 14px;
    line-height: 1.5; }
  .event .event-title {
    font-size: 16px;
    font-weight: 600;
    line-height: 1.5; }

.event:last-child {
  border-bottom: none; }

@media screen and (max-width: 767px) {
  .event-wrap {
    margin-left: 10px;
    margin-right: 10px; } }
@media screen and (max-width: 640px) {
  h3.ch-event {
    font-size: 24px; }

  .event .event-title {
    font-size: 14px; } }
.event2 {
  margin: 0 auto;
  margin-bottom: 20px;
  padding: 10px 20px;
  border-bottom: 1px dotted #89826d; }

  .event2 .day, .event2 .event-txt {
    font-size: 14px;
    line-height: 1.5; }
  .event2 .event-title {
    font-size: 16px;
    font-weight: 600;
    line-height: 1.5; }

.event2:last-child {
  border-bottom: none; }

@media screen and (max-width: 767px) {
  .event-wrap {
    margin-left: 10px;
    margin-right: 10px; } }
@media screen and (max-width: 640px) {
  h3.ch-event {
    font-size: 24px; }

  .event2 .event-title {
    font-size: 14px; } }
/*---------------------
インストアイベントキャンペーン 
----------------------*/
.instore-wrap {
  border-radius: 5px; }


.instore {
  margin: 0 auto;
  margin-bottom: 30px;
  padding: 10px 20px;
  border-bottom: 2px dashed #89826d; }

  .instore .day, .instore .instore-txt {
    font-size: 14px;
    line-height: 1.5; }
  .instore .instore-title {
    font-size: 16px;
    font-weight: 600;
    line-height: 1.5; }
  .instore table.instore-info {
    width: 100%; }
    .instore table.instore-info th {
      min-width: 13em; }
    .instore table.instore-info th, .instore table.instore-info td {
      font-size: 14px;
      line-height: 1.5;
      font-weight: 600;
      padding: 10px; }
    .instore table.instore-info tr {
      border-bottom: 1px dotted #89826d; }
    .instore table.instore-info tr:last-child {
      border-bottom: none; }
    .instore table.instore-info th span, .instore table.instore-info td span {
      font-size: 13px; }
    .instore table.instore-info th i {
      color: red;
      font-size: 13px;
      margin-right: 0.3em; }

.instore:last-child {
  border-bottom: none; }

@media screen and (max-width: 767px) {
  .instore-wrap {
    margin-left: 10px;
    margin-right: 10px; } }
@media screen and (max-width: 640px) {
  h3.ch-instore {
    font-size: 24px; }

  .instore .instore-title {
    font-size: 14px; }
    .instore .instore-title span.blinking {
      display: block; }

  table.instore-info th {
    display: block; }
  table.instore-info td {
    display: block; } }
/*---------------------
トップへ戻るボタン 
----------------------*/
a.backtop {
  position: relative;
  display: block;
  background: rgba(255, 255, 255, 0.6);
  padding: 10px 0;
  border: 2px solid #89826d;
  color: #8a75bf;
  font-weight: 600;
  text-align: center;
  border-radius: 4px; }
  a.backtop i {
    position: absolute;
    left: 20px;
    top: 50%;
    font-size: 13px;
    margin-top: -6px; }

a.backtop:hover,
a.backtop:focus {
  background: #89826d;
  color: #fff; }

/*---------------------
フッター 
----------------------*/
section#footer .footer-contents {
  background: url(../img/pattern3.png) top center;
  border-top: 1px solid #f0f0f0;
  padding-top: 15px;
  padding-bottom: 15px; }
  section#footer .footer-contents p {
    line-height: 1.6; }

.btn-official {
  min-width: 350px;
  text-align: center; }

.footer-logo {
  color: #dcdcdc; }
  .footer-logo .row {
    margin: 0; }
  .footer-logo div {
    text-align: center; }
    .footer-logo div img {
      display: inline-block;
      margin: 0 auto;
      max-width: 200px; }
    .footer-logo div img:hover {
      opacity: 0.8; }

@media screen and (max-width: 767px) {
  .footer-logo div {
    text-align: center;
    margin-bottom: 20px; }
    .footer-logo div img {
      max-width: 200px; }
    .footer-logo div img:hover {
      opacity: 0.8; } }
.copyright {
  margin: 20px 0;
  font-size: 11px;
  text-align: center; }

.pagetop-area {
  background: #333;
  text-align: center; }
  .pagetop-area a {
    background: #333;
    display: block;
    padding: 5px 0;
    font-size: 28px;
    color: #999; }
  .pagetop-area a:hover {
    background: #000;
    display: block;
    color: #fff;
    -webkit-transition: all .3s;
    transition: all .3s; }

.ch-shadow {
  text-shadow: 4px 3px 0px #fff, 9px 8px 0px rgba(0, 0, 0, 0.15); }
  .ch-shadow span {
    display: block;
    transform: rotate(-1.8deg); }

.info {
  background: rgba(255, 255, 255, 0.5); }

/*button*/
a.cp_btn {
display: block;
position: relative;
width: 70%;
padding: 0.8em;
text-align: center;
text-decoration: none;
color: #fff;
border:1px solid #424242;
background: #424242;
overflow: hidden;
z-index: 1 !important;
font-size: 1em;
font-weight: bold;
}
a.cp_btn:after {
content:"";
position: absolute;
top: 50%;
left: 50%;
height: 0;
width: 100%;
background : #fff;
opacity: 0;
transform: translateX(-50%) translateY(-50%) rotate(45deg);
transition: 0.3s;
z-index: -1;
}
a.cp_btn:hover {
color: #424242;
}
a.cp_btn:hover:after {
height: 250%;
opacity: 1;
}
a.cp_btn:active:after {
height: 350%;
opacity: 1;
}
/*button*/

h4 {
    overflow: hidden;
    text-align: center;
}

h4 span {
    display: inline-block;
    padding: 0 0.5em;
    position: relative;
}

h4 span:before,
h4 span:after {
    border-top: 2px solid #ddd;
    content: "";
    position: absolute;
    top: 50%;
    width: 99em;
}

h4 span:before {
    right: 100%;
}

h4 span:after {
    left: 100%;
} 

.info-box{
    background: #000 url(../img/pattern3.png);
    padding: 20px;
    margin-bottom: 20px;
    color: #fff;
    font-size: 1.2em;
    font-weight: 600;
    text-align: center;
}
.info-box a{
    color: #ff0000;
}
.info-box a:hover{
    color: #fff;
}
.info-box span.release{
    color: #ff0000;
}
.info-box span.topics{
    color: #ff0000;
    display: block;
    margin-bottom: 5px;
}
.info-box span.tieup{
    font-size: 0.7em;
}

.info-box2{
    background: #000 url(../img/pattern3.png);
    padding: 20px;
    margin-bottom: 30px;
    color: #fff;
    font-size: 1.3em;
    font-weight: 600;
    text-align: center;
}
.info-box2 a{
    color: #ff0000;
}
.info-box2 a:hover{
    color: #fff;
}
.info-box2 span.release{
    color: #ff0000;
}
.info-box2 span.tieup{
    font-size: 0.7em;
}

.link-txt a{
    text-decoration: underline;
}

.link-txt a:hover{
    text-decoration: none;
}
/* link red */
.link-txt2 a{
    color: #ff0000;
    text-decoration: underline;
}

.link-txt2 a:hover{
    text-decoration: none;
}


.reserve-img {
    display: block;
    text-align: center; }
.reserve-img img {
    width: 100%;
    max-width: 120px;
    border-radius: 5px;
    border: 1px solid #f0f0f0; }
.reserve-img img:hover {
    border: 1px solid #ff9200; }


/*
===================================
member twitter
===================================
*/
.relative{
    position: relative;
}
.member-twitter {
    display: block;
    position: absolute;
    z-index: 100;
    top: 0px;
    right: 0px;
    display: -webkit-flex;
    display: flex;
    align-content:space-between;
}
.member-twitter a.twitter {
    display: block;
    width: 33px;
    height: 30px;
    background: url(../img/twitter4.svg) no-repeat top left;
    background-size: 23px 23px;
    text-indent: -9999px; }
.member-twitter a.twitter:hover {
    background: url(../img/twitter4_o.svg) no-repeat top left;
    background-size: 23px 23px; }

.member-twitter a.insta {
    display: block;
    width: 30px;
    height: 30px;
    background: url(../img/instagram3.svg) no-repeat top left;
    background-size: 23px 23px;
    text-indent: -9999px; }
.member-twitter a.insta:hover {
    background: url(../img/instagram3_o.svg) no-repeat top left;
    background-size: 23px 23px; }


/*
===================================
release > tieup
===================================
*/
.tieup-txt{
    padding: 20px;
    border-top: 2px solid #000;
    border-bottom: 2px solid #000;
    font-size: 0.8em;
    font-weight: 600;
    line-height: 1.6;
}

@media screen and (max-width: 767px) {
    .tieup-txt{
        font-size: 0.6em;
        text-align: center;
    }
}
/*
===================================
release > onecoin txt
===================================
*/

.onecoin{
    font-size: 0.8em;
    font-weight: 600;
}
.onecoin p{
    line-height: 1.5;
}
.onecoin p span{
    color: #ff0000;
}
.onecoin-img{
    position: absolute;
    right: 0;
    top: -20px;
}
.onecoin-img img{
    width: 120px;
    height: 120px;
    border: none !important;
}

@media screen and (max-width: 767px) {
    .onecoin{
        font-size: 0.6em;
        font-weight: 600;
    }
    .onecoin-img{
        right: 0;
        top: -20px;
    }
    .onecoin-img img{
        width: 120px !important;
        height: 120px;
        border: none !important;
    }

}
@media screen and (max-width: 480px) {
    .onecoin-img{
        right: -25px;
        top: 0px;
    }
    .onecoin-img img{
        width: 90px !important;
        height: 90px;
        border: none !important;
    }
}
/*
===================================
release > release txt 2019
===================================
*/

.release-catch{
    font-size: 0.6em;
}
.release-catch p{
    line-height: 1.4;
}
.release-catch span{
    font-weight: 600;
    color: #183f88;
    font-size: 1.2em;
}

.release-catch2{
    font-size: 0.6em;
}
.release-catch2 p{
    line-height: 1.4;
}
.release-catch2 span{
    font-weight: 600;
    color: #b7001e;
    font-size: 1.2em;
}

.release-catch3{
    font-size: 0.6em;
}
.release-catch3 p{
    line-height: 1.6;
}
.release-catch3 span{
    font-weight: 600;
    color: #c25b92;
    font-size: 1.2em;
}

.release-catch4{
    font-size: 0.6em;
}
.release-catch4 p{
    line-height: 1.4;
}
.release-catch4 span{
    font-weight: 600;
    color: #c25b92;
    font-size: 1.2em;
}


/*
========================
リリースキャンペーン
========================
*/
.release-campaign-wrap{
    padding: 20px;
    border: 2px solid #c25b92;
}
.release-campaign{
    padding: 10px 15px 15px;
    margin-bottom: 10px;
    background: linear-gradient( -45deg,  rgba(215,173,193,0.1) 25%, rgba(248,165,173,0.07) 75% );
    border-radius: 10px;
}
.bg-gradationblue{
    background: linear-gradient( -45deg,  rgba(175,219,225,0.1) 25%, rgba(175,209,225,0.07) 75% );
}
.release-campaign h3{
    font-size: 2.2rem;
    font-weight: 600;
    color: #c25b92;
}
@media screen and (max-width: 768px) {
    .release-campaign h3{
        font-size: 1.8rem;
    }
}
.sh-campaigndate{
    padding: 10px;
    margin-bottom: 20px;
    background: #c25b92;
    color: #fff;
    text-align: center;
    font-weight: 600;
    font-size: 1.6rem;
}
.sh-campaignhead{
    font-size: 2.2rem;
    font-weight: 600;
    margin: 20px 0 10px;
    text-align: center;
}
@media screen and (max-width: 768px) {
    .sh-campaignhead{
        font-size: 1.8rem;
    }
}
.sh-campaignhead span{
}
.sh-campaignhead i{
    color: #c25b92;
}
.sh-campaigndetail{
    padding: 10px 0;
    border-bottom: 1px dotted #dcdcdc;
    line-height: 1.6;
    font-size: 1.6rem;
}
.sh-campaigndetail span{
    background: rgba(255,248,128,0.5);
    padding: 3px 7px;
    border-radius: 15px;
    font-weight: 600;
}
.sh-campaigndetail i{
    color: #c25b92;
    margin-right: 0.5em;
}

.sh-campaignevent{
    
}
.sh-campaignevent p{
    text-align: center;
}
.sh-campaignevent h3{
    text-align: center;
    font-weight: 600;
    font-size: 2rem;
    color: #222;
}
@media screen and (max-width: 768px) {
    .sh-campaignevent h3{
        font-size: 1.8rem;
    }
}



a.more-link{
    background: #ff0000;   
    color: #fff;
    padding: 10px;
    border-radius: 3px;
}
a.more-link:hover{
    background: #000;
    color: #fff;
}


h3.ch-disc{
    font-family: 'Roboto Condensed', sans-serif;
    font-size: 2em;
    font-weight: 600;
    line-height: 1.4;
    margin: 0;
    padding: 0;
}


@media screen and (max-width: 768px) {

    h3.ch-disc{
        font-family: 'Roboto Condensed', sans-serif;
        font-size: 1.5em;
        font-weight: 600;
        line-height: 1.4;
    }
}


.ch-newcatch{
    font-size: 2.4rem;
    letter-spacing: -0.025em;
}

.ch-newcatch2{
    font-size: 2.2rem;
    letter-spacing: -0.025em;
}


.bn-hover img{
    opacity: 1;
}
.bn-hover img:hover{
    opacity: 0.7;
}



.cd-yoyaku img{
    border-radius: 4px;
    border: 1px solid #ddd;
}
.cd-yoyaku img:hover{
    border: 1px solid #c25b92;
}



#booking {
  background: #fefefe;
  border-top: 3px solid #efefef;
}

.booking-inner {
  position: relative;
  width: 100%;
  max-width: 1440px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  margin: 0 auto;
}

.booking-inner .booking-box {
  width: 33.3%;
  padding: 30px 20px;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  border-right: 1px solid #ededed;
}

.booking-inner .booking-box h4 {
  margin-bottom: 30px;
  text-align: center;
}

.booking-inner .booking-box i {
  margin-right: 0.3em;
}

.booking-inner .booking-box:first-child {
  border-left: 1px solid #ededed;
}

@media screen and (max-width: 979px) {
  .booking-inner {
    display: block;
    padding: 20px;
  }
  .booking-inner .booking-box {
    width: 100%;
    padding: 20px 0 20px;
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
    text-align: left;
    border-right: none;
    border-bottom: 1px solid #ededed;
  }
  .booking-inner .booking-box:first-child {
    border-left: none;
  }
  .booking-inner .booking-box:last-child {
    border-bottom: none;
  }
}

.booking-txt {
  font-size: 1.1em;
  font-weight: 600;
  margin-top: 10px;
  margin-bottom: 10px;
}

.booking-txt a {
  padding: 10px 12px 11px;
  color: #111;
  border: 2px solid #111;
  text-decoration: none;
  border-radius: 25px;
}

.booking-txt a:hover {
  background: #111;
  color: #fff;
  border: 2px solid #111;
}


#booking h4 span:before,
#booking h4 span:after {
    border-top: none;
    content: "";
    position: absolute;
    top: 50%;
    width: 99em;
}