@charset "utf-8";

/*========================================================================================================================


  ◇◆◇ 詳細 ◇◆◇
  
  
========================================================================================================================*/

/*----------------------------------------------------------------------------------------------------

  Modal Window
  
----------------------------------------------------------------------------------------------------*/

.animatedModal {
  width:100%;
  height:100%;
  min-height:100%;
  z-index:999;
  position:fixed;
  left:0;
  top:0;
  background-color:#fff;
  box-sizing:border-box;
}

.modal-window-warp {
  width:100%;
  height:100%;
  min-height:100%;
  position:relative;
}

.modal-window {
  display:table;
  width:100%;
  height:100%;
  min-height:100%;
  box-sizing:border-box;
}

.modal-content {
  display:table-cell;
  vertical-align:middle;
  text-align:center;
  width:100%;
  height:100%;
  min-height:100%;
}

.modal-loading {
  position:fixed;
  left:50%;
  top:50%;
  margin-left:-47px;
  margin-top:-40px;
  overflow:hidden;
}


/*-----------------------------------------------------------------------------------
  Close
-----------------------------------------------------------------------------------*/

.fix--modal-closeBtn {
  position:fixed;
  top:0;
  right:0;
  background-repeat:no-repeat;
  background-position:center center;
  background-size:auto 28px;
  width:34px;
  height:28px;
  display:inline-block;
  cursor:pointer;
  padding:20px 15px;
  z-index:1000;
}

.svg .fix--modal-closeBtn    { background-image:url(../../image/icon/gray/close.svg); }
.no-svg .fix--modal-closeBtn { background-image:url(../../image/icon/gray/close.png); }
.no-backgroundsize .fix--modal-closeBtn {
  width:32px;
  height:25px;
  background-image:url(../../image/icon/gray/close-s.png);
}

.fix--modal-closeBtn span {
  font-size:0;
  line-height:0;
  text-indent:-9999px;
}
  
.modal-closeBtn {
  cursor:pointer;
}

@media (max-width:640px) {
  .fix--modal-closeBtn {
    background-size:auto 24px;
    width:26px;
    height:24px;
  }
}

@media (max-width:400px) {
  .fix--modal-closeBtn {
    padding:15px 10px;
    background-size:auto 22px;
    width:28px;
    height:22px;
  }
}


/*-----------------------------------------------------------------------------------
  Arrow
-----------------------------------------------------------------------------------*/

.modal-arrow .sp--modal-closeBtn {
  display:none;
}

.modal-arrow-warp {
  width:100%;
  min-width:1160px;
  position:fixed;
  bottom:0;
  background-color:#333;
  z-index:999999;
  overflow-x:hidden;
}

.modal-arrow {
  width:100%;
  display:table;
}
  
.modal-arrow .prev,
.modal-arrow .next,
.modal-arrow .ft--modal-closeBtn {
  display:table-cell;
  position:inherit;
  top:inherit;
  left:inherit;
  right:inherit;
  text-align:center;
  vertical-align:middle;
  color:#fff;
  border-left:1px solid #5c5c5c;
}

.modal-arrow li:first-child {
  border-left:0;
}

.modal-arrow .prev,
.modal-arrow .next,
.modal-arrow .ft--modal-closeBtn {
  width:33.333333%;
}

.modal-arrow a,
.modal-arrow span {
  display:block;
  padding:1em;
}
  
.modal-arrow a,
.modal-arrow .ft--modal-closeBtn span {
  color:#fff;
  text-decoration:none;
  -webkit-transition:background-color ease 0.3s, border-color ease 0.3s;
  -moz-transition:background-color ease 0.3s, border-color ease 0.3s;
  -ms-transition:background-color ease 0.3s, border-color ease 0.3s;
  -o-transition:background-color ease 0.3s, border-color ease 0.3s;
  transition:background-color ease 0.3s, border-color ease 0.3s;
}
  
.modal-arrow .disabled a,
.modal-arrow .disabled span {
  filter:alpha(opacity=30);
  opacity:0.3;
  -moz-opacity:0.3;
}

.modal-arrow .prev small:before {
  content:url(../../image/icon/white/prev-ss.png);
  display:inline-block;
  margin-right:0.5em;
  vertical-align:middle;
}

.modal-arrow .next small:after {
  content:url(../../image/icon/white/next-ss.png);
  display:inline-block;
  margin-left:0.5em;
  vertical-align:middle;
}

.modal-arrow .ft--modal-closeBtn span:before {
  content:url(../../image/icon/white/list-ss.png);
  display:inline-block;
  margin-right:0.75em;
  vertical-align:middle;
}

@media (min-width:798px) {
  .modal-arrow li:not(.disabled):hover a,
  .modal-arrow .ft--modal-closeBtn:hover span {
    background-color:#444;
  }
}

@media (max-width:767px) { 
  .modal-arrow-warp {
    min-width:inherit;
  }
}

@media (max-width:640px) {
  .modal-arrow a,
  .modal-arrow span {
    font-size:81.3%;
    line-height:1.5;
    padding:1.25em 1em;
  }
  
  .modal-arrow .prev small:before,
  .modal-arrow .next small:after,
  .modal-arrow .ft--modal-closeBtn span:before {
    margin-top:0.25em;
  }
  
}


/*----------------------------------------------------------------------------------------------------

  詳細
  
----------------------------------------------------------------------------------------------------*/

.detail-content {
  max-width:1100px;
  margin-left:auto;
  margin-right:auto;
}

.animatedModal .detail-content {
  max-width:1300px;
  min-width:1160px;
}

.animatedModal .detail-content.block {
  padding-left:3%;
  padding-right:3%;
  box-sizing:border-box;
}

@media (max-width:767px) {  
  .detail-content.block {
    padding-left:3%;
    padding-right:3%;
    box-sizing:border-box;
  }
  
  .animatedModal .detail-content {
    min-width:inherit;
  }
}


/*-----------------------------------------------------------------------------------
  スクリーンショット
-----------------------------------------------------------------------------------*/

.detail-display {
  width:600px;
  float:left;
  text-align:center;
  position:relative;
}

.animatedModal .detail-display {
  width:53.84615%;
}

.display-noset--sp {
  width:460px;
}

.animatedModal .display-noset--sp {
  width:35.38461%;
}

.detail-display .tmb {
  font-size:0;
  line-height:0;
}
  
.detail-display .tmb figure {
  width:100%;
  height:100%;
  position:relative;
  overflow:hidden;
}

.display-pc .tmb figure,
.display-noset--sp .display-sp .tmb figure {
  overflow-y:scroll;
}

.detail-display .tmb figure img {
	position:relative;
}

@media (max-width:767px) {
  .detail-display {
    margin-bottom:2.5em;
  }
  
  .detail-display,
  .animatedModal .detail-display,
  .display-set {
    width:100%;
    float:none;
  }
}


/* PC ----------------------------------------*/

.display-pc {
  position:relative;
  width:100%;
  max-width:700px;
  height:auto;
  position:inherit;
  top:inherit;
  left:inherit;
  margin-left:auto;
  margin-right:auto;
}

.display-pc:before {
  content:"";
  background:url(../../image/display-700.png) no-repeat center top;
  background-size:contain;
  display:inline-block;
  width:100%;
  max-width:700px;
  height:0;
  padding-top:83%;
  position:relative;
}

.lte-ie8 .display-pc:before {
  background:url(../../image/display-600.png) no-repeat center top;
}

.display-pc .tmb {
  position:absolute;
  width:92%;
  max-width:644px;
  height:61.6%;
  max-height:365px;
  left:4%;
  top:5.16351%;
}


/* SP ----------------------------------------*/

.display-sp {
  width:250px;
  height:515px;
  position:relative;
  margin-left:auto;
  margin-right:auto;
}

.display-set .display-sp {
  position:absolute;
  width:52%;
  height:auto;
  right:0;
  bottom:0;
}

.display-sp:before {
  background:url(../../image/display-sp250.png) no-repeat center top;
}

.display-set .display-sp:before {
  background:url(../../image/display-sp150.png) no-repeat center top;
}

.display-sp:before {
  content:"";
  background-size:contain;
  display:inline-block;
  width:100%;
  height:100%;
  position:relative;
}

.display-set .display-sp:before {
  margin-left:30%;
  background-size:contain;
  width:52%;
  max-width:150px;
  height:0;
  padding-top:83%;
}

.display-set .display-sp .tmb {
  position:absolute;
  width:37%;
  height:77%;
  left:inherit;
  right:16.55%;
  top:10%;
}

.display-sp .tmb {
  width:226px;
  height:403px;
  position:absolute;
  left:12px;
  top:55px;
}
  
.display-noset--sp .display-sp {
  position:inherit;
  right:inherit;
  bottom:inherit;
}

@media (max-width:640px) {
  .display-noset--sp .display-sp {
    width:200px;
    height:410px;
  }

  .display-noset--sp .display-sp:before {
    background:url(../../image/display-sp200.png) no-repeat center top;
  }

  .display-noset--sp .display-sp .tmb {
    width:182px;
    height:323px;
    left:9px;
    top:43px;
  }
}

@media (max-width:400px) {
  .display-noset--sp .display-sp {
    width:150px;
    height:309px;
  }

  .display-noset--sp .display-sp:before {
    background:url(../../image/display-sp150.png) no-repeat center top;
  }

  .display-noset--sp .display-sp .tmb {
    width:136px;
    height:242px;
    left:7px;
    top:33px;
  }
}


/*-----------------------------------------------------------------------------------
  データ・コメント
-----------------------------------------------------------------------------------*/

.detail-data-warp {
  width:440px;
  float:right;
}

.animatedModal .detail-data-warp {
  width:41.53846%;
}

.display-noset--sp + .detail-data-warp {
  width:640px;
}

.animatedModal .display-noset--sp + .detail-data-warp {
  width:64.61539%;
}

@media (max-width:767px) { 
  .detail-data-warp,
  .animatedModal .detail-data-warp,
  .display-noset--sp + .detail-data-warp,
  .animatedModal .display-noset--sp + .detail-data-warp {
    width:100%;
    float:none;
  }
}


/* タイトル ----------------------------------------*/

.detail-title {
  font-weight:normal;
  padding-top:0.5em;
}

.detail-title small {
  display:inline-block;
  margin-left:0.25em;
}

@media (max-width:767px) { 
  .detail-title {
    padding-top:0;
  }
}


/* データ ----------------------------------------*/

.detail-data {
  margin-top:1.75em;
  padding:1em 0;
  border-top:1px solid #e8e8e8;
  border-bottom:1px solid #e8e8e8;
}

.detail-data dt {
  width:8em;
  float:left;
  clear:both;
  margin-right:-8em;
  padding-top:0.15em;
  padding-bottom:0.15em;
  color:#969696;
}

.detail-data dd {
  padding-left:8em;
  padding-top:0.15em;
  padding-bottom:0.15em;
}

.detail-data dd+dd {
  padding-top:0;
  margin-top:-0.15em;
}


/* コメント ----------------------------------------*/

.detail-comme {
  margin-top:1.5em;
}