@charset "UTF-8";
@import url("https://fonts.googleapis.com/css?family=EB+Garamond");
/* =========================================================
 VARIABLE
========================================================= */
/* =========================================================
 MIXIN
========================================================= */
/* ----- BREAK POINT ----- */
/* ----- PREFIX ----- */
/* ----- IE用アンチエイリアス ----- */
/* ----- CLEARFIX ----- */
/* ----- LINK COLOR ----- */
/* ----- HIDDEN TEXT ----- */
/* ----- BACKGROUND HEIGHT ----- */
/* ----- GRADATION ----- */
/* =========================================================
 FUNCTION
========================================================= */
/*
  使用例
  margin: autoSpace(10, 1.6rem, 1.5);
          autoSpace(最終的に空いてほしい値, 要素のfont-size, 要素のline-height)
*/
/* =========================================================

2017 renewal lineup fantasist

========================================================= */
main:before {
  background-color: #f5bae4; }

.mainVisual {
  background-image: url(/lineup/img/2017renewal/fantasist/pc_main_bg.jpg);
  margin-bottom: 0; }

.containMovieLink a {
  display: block; }

.containMovie {
  max-width: 1000px;
  margin-top: -80px;
  margin-left: auto;
  margin-right: auto;
  padding-top: 80px; }
  .containMovie .movie {
    background: #ffd9f4;
    padding-bottom: 100px; }
    .containMovie .movie a:hover {
      opacity: .7; }

.containItemList {
  max-width: 1450px;
  margin-bottom: 90px;
  padding-top: 50px; }
  .containItemList .itemList > li .link {
    width: 42.4107142857%; }

.containItemDesc {
  max-width: 1450px;
  margin-bottom: 100px; }
  .containItemDesc .image01 {
    margin-bottom: 40px; }

.containItem > div {
  margin-bottom: 100px; }
  .containItem > div:last-child {
    margin-bottom: 0; }
.containItem .mainHead:before {
  padding-top: 52.375%;
  background-image: url(/lineup/img/2017renewal/fantasist/item/pc_mainhead_bg.jpg); }
.containItem .desc {
  background-color: rgba(255, 255, 255, 0.2);
  padding-top: 80px; }
.containItem .summary {
  background-color: #F5BEDF; }

/* -- movie modal -- */
.remodal-overlay {
  background: url(/cm/img/bg_movieoverlay.png); }

.remodal {
  position: relative;
  outline: none;
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
  text-size-adjust: 100%; }

.remodal {
  box-sizing: border-box;
  width: 100%;
  margin-bottom: 10px;
  padding: 0;
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
  color: #2b2e38;
  background: #fff; }

.remodal, .remodal-wrapper::after {
  vertical-align: middle; }

.movieModal {
  width: 960px;
  padding: 45px 0 0;
  background-color: transparent; }

.plyr--ready {
  outline: none; }

.video {
  position: relative;
  width: 100%;
  padding-top: 56.875%; }

.video iframe {
  position: absolute;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%; }

.floatButton.one {
  position: relative; }
  .floatButton.one .buyButton {
    transition: opacity .2s ease-in;
    position: absolute;
    bottom: 60px;
    right: 21.4%; }
    .floatButton.one .buyButton:hover {
      opacity: .7; }

.summary.floatButton {
  position: relative; }
  .summary.floatButton .variationList {
    position: absolute;
    bottom: 40px; }
    .summary.floatButton .variationList.btn01 {
      left: 6%;
      right: auto; }
    .summary.floatButton .variationList.btn02 {
      left: 13.3%;
      right: auto; }
    .summary.floatButton .variationList.btn03 {
      left: 35.5%;
      right: auto; }
    .summary.floatButton .variationList .buyButton_txt {
      margin-top: 5px; }
      .summary.floatButton .variationList .buyButton_txt a {
        border-bottom: 1px solid #000;
        transition: opacity .2s ease-in; }
        .summary.floatButton .variationList .buyButton_txt a:hover {
          opacity: .7; }
    .summary.floatButton .variationList a {
      transition: opacity .2s ease-in; }
      .summary.floatButton .variationList a:hover {
        opacity: .7; }

/* =========================================================
 RESPONSIVE - sp
========================================================= */
@media print, screen and (max-width: 48em) {
  .mainVisual {
    background-image: url(/lineup/img/2017renewal/fantasist/sp_main_bg.jpg); }

  .containItemDesc {
    padding: 0 4.6875%;
    max-width: none;
    margin-bottom: 45px; }
    .containItemDesc .image01 {
      padding-top: 50px;
      margin-bottom: 25px; }

  .containItem > div {
    margin-bottom: 60px; }
  .containItem .mainHead:before {
    padding-top: 147.5%;
    background-image: url(/lineup/img/2017renewal/fantasist/item/sp_mainhead_bg.jpg); }
  .containItem .itemDesc {
    width: 90.625%;
    padding: 0; }
  .containItem .desc {
    padding-top: 40px; }

  .containMovieLink {
    margin-bottom: 40px; }

  .containMovie {
    margin-top: -40px;
    padding-top: 40px; }
    .containMovie .image02 {
      max-width: 77.586207%;
      margin: 0 auto; }

  /* -- movie modal -- */
  .movieModal {
    width: 100%; }

  video {
    width: 100%; }

  .floatButton.one .buyButton {
    bottom: 20px;
    left: 0;
    right: 0;
    margin: auto; }
    .floatButton.one .buyButton img {
      width: 65%; }

  .summary.floatButton .variationList.btn01 {
    bottom: 32%;
    left: 6%;
    right: auto;
    width: 43%; }
  .summary.floatButton .variationList.btn02 {
    bottom: 14%;
    left: 4%;
    right: auto;
    width: 43%; }
  .summary.floatButton .variationList.btn03 {
    bottom: 14%;
    left: auto;
    right: 4%;
    margin: auto;
    width: 43%; }
  .summary.floatButton .variationList .buyButton_txt {
    margin-top: 5px; }
    .summary.floatButton .variationList .buyButton_txt a {
      font-size: 1rem; }

  .containMovie .movie {
    padding-bottom: 50px; } }