@charset "UTF-8";
/* カラー設定 */
/*  */
/* 透ける背景用設定 */
/* 基本テキスト色 */
/* font関係 */
/**/
/* 角丸 */
/*
$border-radius:10px;

/* margin-bottom 


$margim-bottom-L:30px;
$margim-bottom-M:20px;
$margim-bottom-S:15px;
*/
/* screenサイズ */
/* ブレイクポイント */
/* カラー設定 */
/*  */
/* 透ける背景用設定 */
/* 基本テキスト色 */
/* font関係 */
/**/
/* 角丸 */
/*
$border-radius:10px;

/* margin-bottom 


$margim-bottom-L:30px;
$margim-bottom-M:20px;
$margim-bottom-S:15px;
*/
/* screenサイズ */
/* ブレイクポイント */
/* CSS Transition Easing */
#common-contents {
  width: 100%;
}
#common-contents h2 img {
  transform: skewY(-5deg) !important;
}
#common-contents > div:nth-child(even) > div {
  background: url("common-contents/bg_right.png") right top repeat-y;
}
#common-contents > div:nth-child(odd) > div {
  background: url("common-contents/bg_left.png") left top repeat-y;
}
#common-contents > div {
  opacity: 0;
}
#common-contents > div.active {
  animation: fadeIn 0.3s ease-out 1;
  opacity: 1;
}
#common-contents > div > div h3 {
  opacity: 0;
}
#common-contents > div > div h3.active {
  animation: slideLeft 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275) 1;
  opacity: 1;
}
#common-contents > div > div .windowOpen {
  opacity: 0;
}
#common-contents > div > div .windowOpen.active {
  animation: slideLeft 0.7s cubic-bezier(0.175, 0.885, 0.32, 1.275) 1;
  opacity: 1;
}
#common-contents > div > div .btnToggle {
  opacity: 0;
}
#common-contents > div > div .btnToggle.active {
  animation: fadeIn 0.5s ease-out 1;
  opacity: 1;
}
#common-contents > div .btnToggle {
  text-align: center;
  background: url("common-contents/btnToggle.png") #ffcd00 center top;
  cursor: pointer;
}
#common-contents > div .btnToggle.openToggle {
  background-position: bottom center;
}
#common-contents > div .windowToggle {
  display: none;
}

@media only screen and (max-width: 750px) {
  #common-contents h2 {
    padding: calc(20 / 750 * 100vw) 0 calc(20 / 750 * 100vw) calc(20 / 750 * 100vw);
  }
  #common-contents h2 img {
    width: calc( 328 / 750 * 100vw);
  }
  #common-contents > div {
    width: calc(750/ 750 * 100vw);
    margin: 0 0 calc(100/ 750 * 100vw) 0;
  }
  #common-contents > div > div {
    width: calc(750/ 750 * 100vw);
    padding-top: calc(20/ 750 * 100vw);
    padding-bottom: calc(20/ 750 * 100vw);
    background-size: calc(667/ 750 * 100vw) auto !important;
  }
  #common-contents > div > div > h3 {
    margin-bottom: calc(20/ 750 * 100vw);
  }
  #common-contents > div > div ul {
    width: calc(740 / 750 * 100vw) !important;
    margin: 0 auto;
  }
  #common-contents > div > div ul::after {
    content: ".";
    display: block;
    height: 0px;
    clear: both;
    line-height: 0;
    visibility: hidden;
  }
  #common-contents > div > div ul li {
    width: calc(240/ 750 * 100vw);
    margin: 0;
    margin-right: calc(10/ 750 * 100vw);
    margin-bottom: calc(10/ 750 * 100vw);
    padding: 0;
    float: left;
  }
  #common-contents > div > div ul li:nth-child(3n+0) {
    margin-right: 0;
  }
  #common-contents > div > div ul li img {
    width: 100%;
  }
  #common-contents > div:nth-child(even) {
    margin-left: auto;
  }
  #common-contents > div:nth-child(even) > div {
    padding-right: calc(5/ 750 * 100vw);
  }
  #common-contents > div:nth-child(even) > div h3 {
    text-align: right;
  }
  #common-contents > div:nth-child(odd) {
    margin-right: auto;
  }
  #common-contents > div:nth-child(odd) > div {
    padding-left: calc(5/ 750 * 100vw);
  }
  #common-contents #contents-trailer h3 img {
    width: calc(293/ 750 * 100vw);
  }
  #common-contents #contents-music h3 img {
    width: calc(362/ 750 * 100vw);
  }
  #common-contents #contents-event h3 img {
    width: calc(228/ 750 * 100vw);
  }
  #common-contents #contents-anime h3 img {
    width: calc(321/ 750 * 100vw);
  }
  #common-contents .btnToggle {
    width: calc(740/ 750 * 100vw);
    height: calc(35/ 750 * 100vw);
    margin: 0 auto;
    background-size: calc(670/ 750 * 100vw) calc(70/ 750 * 100vw) !important;
  }
}
@media only screen and (min-width: 751px) {
  #common-contents h2 {
    padding: calc(20 / 1440 * 100vw) 0 calc(20 / 1440 * 100vw) calc(20 / 1440 * 100vw);
  }
  #common-contents h2 img {
    width: calc(328/ 1440 * 100vw);
  }
  #common-contents > div {
    width: calc(1030/ 1440 * 100vw);
    margin: 0 0 calc(100/ 1440 * 100vw) 0;
  }
  #common-contents > div > div {
    padding-top: calc(20/ 1440 * 100vw);
    padding-bottom: calc(20/ 1440 * 100vw);
    background-size: calc(667/ 1440 * 100vw) auto !important;
  }
  #common-contents > div > div > h3 {
    margin-bottom: calc(20/ 1440 * 100vw);
  }
  #common-contents > div > div ul {
    width: calc(1020/ 1440 * 100vw);
  }
  #common-contents > div > div ul::after {
    content: ".";
    display: block;
    height: 0px;
    clear: both;
    line-height: 0;
    visibility: hidden;
  }
  #common-contents > div > div ul li {
    width: calc(330/ 1440 * 100vw);
    margin: 0;
    margin-right: calc(10/ 1440 * 100vw);
    margin-bottom: calc(10/ 1440 * 100vw);
    padding: 0;
    float: left;
  }
  #common-contents > div > div ul li:nth-child(3n+0) {
    margin-right: 0;
  }
  #common-contents > div > div ul li img {
    width: 100%;
  }
  #common-contents > div:nth-child(even) {
    margin-left: auto;
  }
  #common-contents > div:nth-child(even) > div {
    padding-right: calc(30/ 1440 * 100vw);
  }
  #common-contents > div:nth-child(even) > div h3 {
    text-align: right;
  }
  #common-contents > div:nth-child(odd) {
    margin-right: auto;
  }
  #common-contents > div:nth-child(odd) > div {
    padding-left: calc(30/ 1440 * 100vw);
  }
  #common-contents #contents-trailer h3 img {
    width: calc(293/ 1440 * 100vw);
  }
  #common-contents #contents-music h3 img {
    width: calc(362/ 1440 * 100vw);
  }
  #common-contents #contents-event h3 img {
    width: calc(228/ 1440 * 100vw);
  }
  #common-contents #contents-anime h3 img {
    width: calc(321/ 1440 * 100vw);
  }
  #common-contents .btnToggle {
    width: calc(1020/ 1440 * 100vw);
    height: calc(35/ 1440 * 100vw);
    text-align: center;
    background-size: calc(670/ 1440 * 100vw) calc(70/ 1440 * 100vw) !important;
  }
}