@charset "utf-8";

.mfp-detail {
  position: relative;
  width: 98%;
  margin: 0 auto;
}



/*.mfp-content { position: relative;}
.mfp-img { display: block; width: 90%; margin: 0 auto;}
button.mpf-close { display: block; border: 1px solid #000;}
.mfp-close { width: 80px; height: 80px; font-size: 45px; border: 1px solid #000;}
.mfp-close-btn-in .mfp-close { top: -50px; text-align: center;}

.mfp-detail { width: 95%; max-width: 810px; margin: 0 auto; padding: 20px 0 30px; background: #fff;}
.mfp-detail .movie { width: 100%; max-width: 550px; height: 350px; margin: 0 auto 1.5em;}
.mfp-detail .movie iframe { display: block; width: 100%; height: 100%; margin: 0 auto;}
.mfp-detail .popup-close { clear: both; display: block; width: 50%; max-width: 250px; height: 40px; margin: 2em auto; text-align: center; line-height: 40px; color: #000;  cursor: pointer; border: 1px solid #000;}

.mfp-detail .mfp-box { overflow: hidden; width: 90%; margin: 0 auto 20px;}
.mfp-detail .mfp-box > img { display: block; float: left; width: 36%; margin-right: 1%;}
.mfp-detail .mfp-box > p { float: left; width: 62%; padding-top: 40px; color: #000;}
.mfp-detail .mfp-box > p span { display: block; font-size: 15px; font-weight: bold; color: #f00;}
.mfp-detail .mfp-box > p b { display: block;}
.mfp-detail .mfp-box > p .mfp-head { margin-bottom: 10px; font-size: 24px;}

@media screen and (max-width: 768px) {
.mfp-detail .movie { height: 150px;}
.mfp-detail .mfp-box > img { display: block; float: none; min-width: 100px; margin: 0 auto 5px;}
.mfp-detail .mfp-box > p { float: none; width: 90%; margin: 0 auto 20px; padding-top: 0;}
.mfp-detail .mfp-box > p span { font-size: 13px; text-align: center;}
.mfp-detail .mfp-box > p b { font-size: 16px; text-align: center;}
}*/




.mfp-bg {
  opacity: 0;
  -webkit-transition: all 0.5s ease-out;
  -moz-transition: all 0.5s ease-out;
  transition: all 0.5s ease-out;
	background-color: rgba(255,255,255,0.6);
}
/* overlay animate in */
.mfp-bg.mfp-ready {
  opacity: 0.92;

}
/* overlay animate out */
.mfp-bg.mfp-removing {
  opacity: 0;
}
/* content at start */
.mfp-wrap .mfp-content {
  opacity: 0;
	padding: 113px 0;
  -webkit-transition: all 0.s ease-out;
  -moz-transition: all 0.5s ease-out;
  transition: all 0.5s ease-out;
}
/* content animate it */
.mfp-wrap.mfp-ready .mfp-content {
  opacity: 1;
}
/* content animate out */
.mfp-wrap.mfp-removing .mfp-content {
  opacity: 1!important;
}


button.mpf-close { display: block; border: 1px solid #000;}
.mfp-close { width: 60px; height: 60px; padding: 0 !important; font-size: 45px; border-radius: 50%; background: #fff !important; opacity: 1; box-shadow: 0 0 4px 4px rgba(0,0,0,0.1) !important;}
.mfp-close-btn-in .mfp-close { top: -35px; right: -35px; text-align: center;}


/* popup
-----------------------------------------*/
/*.popup-wrapper {
	position: absolute; top: 0; left: 0;
	width: 100%;
	height: 100%;
}
*/
.popup-detail {
	position: relative;
	width: 100%; max-width: 700px;
	margin: 0 auto;
	/*padding: 3em 2%;
	background: #df4321;*/
}

.popup-detail .popup-text {
	font-size: 16px; font-size: 1.6rem;
	font-weight: normal;
	color: #fff;
	display: none;
}

.popup-detail .popup-image img {
	width: 100%;
}



.popup-button {
	visibility: hidden;
	position: absolute; z-index: 80;
	width: 65px;
	height: 65px;
	text-align: center;
	font-weight: 500;
	line-height: 65px;
	color: #fff;
	border-radius: 50%;
	border: 2px #fff;
	background: #df4321;
	transition: 0.15s;
	opacity: 0;
	transform: scale(.5);
	display: none;
}

.popup-button-01 {
	bottom: 15em; right: -5%;
}
.popup-button-02 {
	bottom: 6em; left: 5%;
}
.popup-button-03 {
	bottom: 13em; left: 45%;
}
.popup-button-04 {
	bottom: 10em; right: 10%;
}
.popup-button-05 {
	top:0; right: -10%;
}
.popup-button-06 {
	top:0em; right: -28%;
}
.popup-button-07 {
	top: 0; left: 10%;
}
.popup-button-08 {
	bottom: 5em; right: 2%;
}
.popup-button-09 {
	top: 1.5em; right: 5%;
}
.popup-button-10 {
	top: 7em; left: 15%;
}


.mainMovie__btn:hover .popup-button {
	visibility: visible;
	transition: 0.15s;
	z-index: 1000;
	opacity: 1;
	transform: scale(1.2);
}


/* ポップアップ非表示 */
.popup-wrapper .popup-detail {
	position: absolute; top: 0; left: 0;
	opacity: 0;
}



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

							アニメーション
								
---------------------------------------------- */ 

/*.mainMovie__btn { border: solid 1px;}*/


.popup-button {
  cursor: pointer;
	position: relative;
}

.arrow_box {
  display: none;
  position:absolute;
  padding: 20px 10px;
  background: #df4321;
  border-radius: 50px;
  -moz-border-radius: 50px;
  -webkit-border-radius: 50px;
  color: #fff;
	font-family: Hiragino Mincho ProN, serif;
	font-size: 15px; font-size: 1.5rem;
	z-index: 2;
}

/*.arrow_box:after {
  right: 100%;
  border: solid transparent;
  content: " ";
  height: 0;
  width: 0;
  position: absolute;
  pointer-events: none;
  border-color: rgba(51, 51, 51, 0);
  border-right-color: #df4321;
  border-width: 10px;
  top: 50%;
  margin-top: -10px;
}*/