@charset "UTF-8";

/*
div#modal_win{background-color:#ff0000;}
div#modal_win_outer{background-color:#00ff00;}
div#modal_win_inner{background-color:#0000ff;}
div.modal_prev,div.modal_next,div.modal_close,div.modal_close2{background-color:#000000;}
*/

/*共通==========================================================*/
div#modal_area{
	position: fixed !important;
	z-index: 10000;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	font-size: 0;
	line-height: 0;
	letter-spacing: 0;
}
div#modal_mask{
	position: absolute;
	z-index: 10001;
	width: 100%;
	height:100%;
	background-color: rgba(0,0,0,.8);
	filter: alpha( opacity=0 );
	-moz-opacity: 0; 
	opacity: 0;
	transition: all .5s;
}
div#modal_mask.appear{
	filter: alpha( opacity=100 );
	-moz-opacity: 1; 
	opacity: 1;
}
div#modal_win{
	position: relative;
	z-index: 10002;
	/*box-sizing: border-box;*/
	margin: 0 auto;
	height: 100%;
	top: -100%;
	pointer-events: none;
}
.pc_view div#modal_win{
	padding: 0 1rem;/*前後ボタンなし*/
}
.pc_view div#modal_win.modal_has_prev_next{
	padding: 0 5rem;/*前後ボタンあり*/
}
.sm_view div#modal_win{
}
div#modal_win.appear{
	top: 0 !important;
}
div#modal_win.appear2{/*open_twでなぜかtop-100%だと、高さが得られない*/
	top: 0 !important;
	filter: alpha( opacity=0 );
	-moz-opacity: 0; 
	opacity: 0;
}

div#modal_win_outer{
	position: relative;
	box-sizing: border-box;
	width: 100%;
	height: 100%;
	overflow: hidden;
}
div#modal_win_inner{
	position: relative;
	box-sizing: border-box;
	width: 100%;
	max-height: 100%;
	font-size: 1.3rem;
	line-height: 2.2rem;
	text-align: left;
}
.pc_view div#modal_win_inner{
	overflow: hidden;
	padding: 5rem 0;
}
.sm_view div#modal_win_inner{/*スマホはここがスクロール*/
	pointer-events: auto;
	overflow: auto;
	padding: 5rem 0rem;
	-webkit-overflow-scrolling:touch;
}

div#modal_content{/*PCはここがスクロール*/
	position: relative;
	box-sizing: border-box;
	width: 100%;
	background-clip: content-box;
	background-color: #ffffff;
	pointer-events: auto;
	-webkit-transform: translate3d(0,0,0);/*ちらつき防止*/
}
.pc_view div#modal_content{
	overflow: auto;
	/*heightはjsで*/
	/*titleがある場合は、margin-topをjsで指定*/
}

/*modal_divなどで隠しておく用*/
div#modal_hide{
	position: relative;
	height: 0;
	overflow: hidden;
}

/*open_div・open_modal・open_text 用=================================================*/
div.modal_head{
	pointer-events: auto;
}
.pc_view #modal_content>div.modal_head{
	display: none;
	/*PCはjsでmodal_content外へ*/
}
p.modal_title{
	box-sizing: border-box;
	height: auto;
	padding: 2rem;
	font-size: 2rem;
	line-height: 2rem;
	font-weight: bold;
	background-color: rgba(134,28,60,1);
	color: #ffffff;
}
div.modal_content_inner{
	position: relative;
	padding: 15px;
	max-height: 100%;
}
.sm_view div.modal_content_inner{
	padding: 3%;
}

/*modal_iframe用========================================================================*/
div.modal_iframe_outer{
	height: 90vh;/*calcがだめな場合*/
	height: calc(100vh - 10rem);
	font-size: 0;
	line-height: 0;
	letter-spacing: 0;
}
div.modal_iframe_outer>iframe{
	width: 100%;
	height: 100%;
	border: 0;
}

/*open_img・open_youtube 用==============================================================*/
/*リンクを設定するエリア*/
div.modal_link_area{
}
*[data-modal_script],
*[data-modal_link]{
	cursor: pointer;
}

/*比率固定のエリア*/
div[data-modal_ratio]{
	overflow: hidden;
	box-sizing: border-box;
	background-color: rgba(0,0,0,.2);
	background-repeat: no-repeat;
	background-position: center center;
	background-size: contain;
	font-size: 0;
	line-height: 0;
	letter-spacing: 0;
	max-height: 90vh;/*calcがだめな場合*/
	max-height: calc(100vh - 10rem);
	overflow: hidden;
}

/*loading*/
div.modal_loading{
	background-repeat: no-repeat;
	background-position: center center;
	background-color: #000000;
	background-size: 48px 48px;
	background-image: url(../img/modal_loading.gif);
}

/*caption*/
p.modal_caption{
	font-size: 1.3rem;
	line-height: 2rem;
	font-weight: bold;
	text-align: center;
	color: #ffffff;
	padding: .5rem .5rem 0;
}
.sm_view p.modal_caption{
	padding-bottom: 1rem;
}
p.modal_caption>span{
	display: inline-block;
	text-align: left;
}

/*zoom*/
.pc_view div.modal_zoom_pc,
div.modal_zoom,
span.modal_zoom{
	position: relative;
	font-size: 0;
	line-height: 0;
	letter-spacing: 0;
	cursor: pointer;
}
span.modal_zoom{
	display: inline-block;
}

.pc_view div.modal_zoom_pc:after,
div.modal_zoom:after,
span.modal_zoom:after{
	content: "";
	display: block;
	position:absolute;
	left:0;
	top:0;
	width: 100%;
	height: 100%;
	background-image: url(../img/modal_zoom.png);
	background-position: right bottom;
	background-repeat: no-repeat;
	background-size: 3rem 3rem;
	opacity: .7;
	transition: all .3s;
}
.display_device div.modal_zoom_pc:hover:after,
.display_device div.modal_zoom:hover:after,
.display_device span.modal_zoom:hover:after{
	opacity: 1;
}

/*動画用*/
div.modal_movie_area{
}
div.modal_movie_area>iframe{
	width:  100%;
	height: 100%;
	border: 0;
}
div.modal_movie_hide{
	position: absolute;
	width: 100%;
	height: 100%;
	left: 0;
	top: 0;
	background-color: #000000;
}

div[data-modal_mp4],
div[data-modal_cxvideo],
div[data-modal_youtube],
div[data-modal_playlist]{
	position: relative;
	background-repeat: no-repeat;
	background-position: center center;
	background-color: #000000;
	background-size: 24px 24px;
	background-image: url(../img/modal_loading.gif);
	overflow: visible;
}
div[data-modal_cxvideo].modal_no_thumb{
	background-size: 100% auto;
	background-image: url(../img/modal_youtube1.png);
}
div[data-modal_playlist].modal_no_thumb{
	background-size: 100% auto;
	background-image: url(../img/modal_youtube.png);
}
.modal_play
/*div[data-modal_mp4] .modal_play,
div[data-modal_cxvideo] .modal_play,
div[data-modal_youtube] .modal_play,
div[data-modal_playlist] .modal_play*/{
	display: block;
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	background-image: url(../img/modal_play.png);
	background-repeat: no-repeat;
	background-position: center center;
	background-size: contain;
	opacity: 0.7;
	transition: all .2s;
}
.modal_play:hover
/*.display_device div[data-modal_mp4] .modal_play:hover,
.display_device div[data-modal_cxvideo] .modal_play:hover,
.display_device div[data-modal_youtube] .modal_play:hover,
.display_device div[data-modal_playlist] .modal_play:hover*/{
	opacity:1;
}

div[data-modal_mp4] .modal_movie_title,
div[data-modal_cxvideo] .modal_movie_title,
div[data-modal_youtube] .modal_movie_title,
div[data-modal_playlist] .modal_movie_title{
	position:absolute;
	left:0;
	top: 100%;
	box-sizing: border-box;
	width:100%;
	height: 3rem;
	/*padding:0 .8rem;*/
	padding: 0;
	/*background:rgba(0,0,0,.5);*/
	font-size:1.4rem;
	line-height:3rem;
	text-align: center;
	/*color:#ffffff;*/
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

/*open_cxvideo 用=========================*/
div#modal_cx_video{
}
div#modal_cx_video>*,
div#modal_cx_video>*>*{
	width: 100% !important;
	height: 100% !important;
}

/*SNS 用================================*/
div#modal_sns{
	font-size: 0;
	line-height: 0;
	letter-spacing: 0;
	overflow: hidden;
}
.pc_view div#modal_sns{
	padding: 18px 0 18px 18px;
	
}
.sm_view div#modal_sns{
	padding: 0;
	max-width: 100%;
}
iframe#modal_iframe_sns{
	width: 100%;
	transform-origin:0 0
}

/*ボタン==============================================================================*/
/*CLOSE*/
div.modal_close{
	position: absolute;
	right: -.5rem;
	top: 0;
	width: 5rem;
	height: 5rem;
	cursor: pointer;
	background-image: url(../img/modal_close.png);
	background-position: center center;
	background-repeat: no-repeat;
	background-size: contain;
	
	-moz-transform: scale(1);
	-webkit-transform: scale(1);
	-o-transform: scale(1);
	-ms-transform: scale(1);
	transform: scale(1);

	pointer-events: auto;
	transition: all .2s;
}
.sm_view div.modal_close{
	right: .5rem;
}

.display_device div.modal_close:hover{
	-moz-transform: scale(1.2);
	-webkit-transform: scale(1.2);
	-o-transform: scale(1.2);
	-ms-transform: scale(1.2);
	transform: scale(1.2);
}

div.modal_close2{
	width: 16rem;
	height: 5rem;
	margin: 0 auto;
	cursor: pointer;
	background-image: url(../img/modal_close2.png);
	background-position: center center;
	background-repeat: no-repeat;
	background-size: contain;
}

/*PREV NEXT*/
div.modal_prev,
div.modal_next{
	position: absolute;
	cursor: pointer;
	background-position: center center;
	background-repeat: no-repeat;
	background-size: contain;
	cursor: pointer;
	pointer-events: auto;
	transition: all .2s;
	display: none;
}
div#modal_win.modal_has_prev_next div.modal_prev,
div#modal_win.modal_has_prev_next div.modal_next{
	display: block;
}

div.modal_prev{
	background-image: url(../img/modal_prev.png);
	left: 0;
}
div.modal_next{
	background-image: url(../img/modal_next.png);
	right: 0;
}
.pc_view div.modal_prev,
.pc_view div.modal_next{
	top: 50%;
	width: 5rem;
	height: 8rem;
	margin-top: -4rem;
}
.sm_view div.modal_btn_area{
	position: relative;
	height: 5rem;
}
.sm_view div.modal_prev,
.sm_view div.modal_next{
	top: 0;
	width: 5rem;
	height: 5rem;
}

.display_device div.modal_prev:hover{
	background-position: -5px center;
}
.display_device div.modal_next:hover{
	background-position: 5px center;
}

/*SWIPE*/
.sm_view div#modal_swipe{
	width: 100%;
	height: 100%;
	position: absolute;
	z-index: 10002;
	left: 0;
	bottom: 0;
	background-image: url(../img/modal_swipe.png);
	background-position: center center;
	background-repeat: no-repeat;
	background-size: 20% auto;
	display: none;
	pointer-events: none;
}