/*/////////////////////////////////////////////////////////////////////////////////////////////////

 Base Layout

/////////////////////////////////////////////////////////////////////////////////////////////////*/

/* 既存のPOPUP崩れを修正 */
#comic_popup_viewer .view_check_btn {
  position: absolute;
  top: 20px;
  right: 20px;
}
#comic_popup_viewer .back_btn_01 {
  position: absolute;
  top: 50%;
  left: 20px;
  margin-top: -30px;
}
#comic_popup_viewer .fwd_btn_01 {
  position: absolute;
  top: 50%;
  right: 20px;
  margin-top: -30px;
}
#comic_popup {
  float: none !important;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto !important;
}
/* 既存のPOPUP崩れを修正 */


.comic_area {
  height: 486px;
  width: 486px;
  margin: 0 auto;
  background: #FFF;
  border: 1px solid #666;
  overflow: hidden;
}
.comic_area .viewer {
  width:9999px;
  cursor:pointer;
}
.comic_area .viewer img {
  float:left;
  padding:3px;
}

.viewer_btns {
  width:100%;
  margin:20px 0 30px;
  text-align:center;
}
.viewer_btns a {
	display:inline-block !important;
  height:34px;
	font-size:14px;
  color:#F04370 !important;
  line-height:34px;
	
	border: #F04370 1px solid;
	border-radius: 4px;
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
}
.viewer_btns a:hover {
  background-color:#F04370 !important;
  color:#FFF !important;
  text-decoration:none !important;
}
.viewer_btns a.off { color:inherit !important; border-color:#777777 !important;}
.viewer_btns a.off:hover { background-color:inherit !important;}

.viewer_btns .page_l { padding:0 20px 0 10px; margin-right:20px;}
.viewer_btns .page_r { padding:0 10px 0 20px; margin-left:20px;}


.popup_viewer {
  display:none;
  width: 680px;
  height: 600px;
  background-color:#fff;
  position:fixed;
  top:0;
  left:0;
  right:0;
  bottom:0;
  margin:auto;
  z-index:200;
}
.popup_viewer .comic_area {
  border:none;
  position:absolute;
  top:0;
  left:0;
  right:0;
  bottom:0;
  margin:auto;
}
.popup_viewer .viewer {
  cursor:default;
}


.popup_viewer .popup_l {
  width:60px;
  height:60px;
  position:absolute;
  top:0;
  left:20px;
  bottom:0;
  margin:auto;
}
.popup_viewer .popup_r {
  width:60px;
  height:60px;
  position:absolute;
  top:0;
  right:20px;
  bottom:0;
  margin:auto;
}
.popup_viewer .popup_close {
  width:40px;
  height:40px;
  position:absolute;
  top:20px;
  right:20px;
}
.popup_viewer .over:hover {
	filter:alpha(opacity=70);
	-moz-opacity:0.7;
	opacity:0.7;
}

.popup_back {
  display:none;
  width: 100%;
  height: 100%;
  position:fixed;
  top:0;
  left:0;
  background-color: rgba(0,0,0,0.5);
  z-index:100;
}

/*/////////////////////////////////////////////////////////////////////////////////////////////////

 Flip Layout

/////////////////////////////////////////////////////////////////////////////////////////////////*/

/*** フリップ領域設定 ***/

.viewerSet * {
  -webkit-box-sizing: border-box !important;
  -moz-box-sizing: border-box !important;
  -o-box-sizing: border-box !important;
  -ms-box-sizing: border-box !important;
  box-sizing:border-box !important;
}
.viewerSet .flipView {
  width: 100%;
  background: #FFF;
  overflow: hidden;
}
.viewerSet .flipView .viewer {
  width:9999px;
}
.viewerSet .flipView .viewer .itemBox {
  float:left;
  width:0;
  padding:0 10px;
  cursor:pointer;
  position: relative;
}
.viewerSet .flipView .viewer img {
  display:block;
  width:100%;
  height:auto;
}
.viewerSet .flipView .viewer .itemBox p {
  padding-top:10px;
  color:#3978B2;
}

.viewerSet .flipView .viewer .itemBox .btnPlay {
  display:block;
  width:60px;
  height:60px;
  background:url(btn_view.png) no-repeat;
  background-size: contain;
  position:absolute;
  top:0;
  left:0;
  right:0;
  bottom:0;
  margin:auto;
}
.viewerSet .flipView .viewer .itemBox .btnPlay.large {
  width:120px;
  height:120px;
}


/*** POPUP領域設定 ***/

.viewerSet .popup {
  display:none;
  width: 560px;
  height: 614px;
  background-color:#fff;
  position:fixed;
  top:0;
  left:0;
  right:0;
  bottom:0;
  margin:auto;
  z-index:9999;
}
.viewerSet .popupClose {
  display:block;
  position:fixed;
  top:20px;
  right:20px;
  z-index:9999;
}
.viewerSet .popupClose:hover {
  background: none !important;
}
.viewerSet .popup_back {
  display:none;
  width: 100%;
  height: 100%;
  position:fixed;
  top:0;
  left:0;
  background-color: rgba(225,236,247,0.9);
  z-index:9999;
}

.viewerSet .comic_area {
  height: 480px;
  width: 480px;
  margin: 40px auto 0;
  background: #FFF;
  border:none;
  overflow: hidden;
}
.viewerSet .comic_area .viewer {
  width:9999px;
}
.viewerSet .comic_area .viewer .page {
  display:block;
  float:left;
  padding:0;
}
.viewerSet .comic_area .viewer img {
  display:block;
  float:none;
  width:100%;
  height:auto;
}


/* 768px 以下 (TAB of SP) */
@media screen and (max-width: 768px) {

.viewerSet .flipView .viewer .itemBox .btnPlay {
  width: 28vw;
  height: 28vw;
}

.viewerSet .popup {
  width: 100%;
}
.viewerSet .comic_area {
  width: 100%;
  height: auto;
  margin:0;
}
.viewerSet .viewer_btns {
  padding:10px 0 20px;
  margin:0;
  background-color:#fff;
}
.viewerSet .popupClose {
  top:10px;
  right:10px;
}
.viewerSet .popupClose img {
  width:20px;
  height:auto;
}

}