@charset "UTF-8";
/* CSS Document */
#popup,#popup2{
    display: none;
    position: relative;
    z-index: 99;
}
.pop{
	background: rgba(0,0,0,0.5);
    position: fixed;
    top: 0;
    width: 100%;
    height: 100vh;
  	height: calc(var(--vh, 1vh) * 100);
    z-index: 999;
}
.pop .pop_iframe{
	position: relative;
    /*max-width: 80%;
    height: 80%;
    text-align: center;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);*/
	width: 100vw;
  	width: calc(var(--vw, 1vw) * 100);
    height: 100vh;
  	height: calc(var(--vh, 1vh) * 100);
}
.pop .pop_iframe video{
	position: absolute;
    top: 0;
    width: 100%;
	height: 100vh; /* 変数をサポートしていないブラウザのフォールバック */
  	height: calc(var(--vh, 1vh) * 100);
    background: #FFF;
    z-index: 10;
}
.pop .pop_iframe .pop_close{
	position: absolute;
    top: 20px;
    right: 10px;
    width: 50px;
    height: 50px;
    z-index: 999999;
}
.pop .pop_iframe .pop_close img{
	width: 100%;
}
@media only screen and (min-device-width: 768px) and (max-device-width: 896px) and (orientation: landscape){
	.pop .pop_iframe .pop_close {
		position: absolute;
		top: 50px;
    	right: 10px;
		width: 30px;
		height: 30px;
	}
}
@media (max-width: 768px){
	.pop .pop_iframe {
		/*position: relative;
		max-width: 330px;
		height: 186px;
		text-align: center;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		-webkit-transform: translate(-50%, -50%);
		-ms-transform: translate(-50%, -50%);*/
	}
	.pop .pop_iframe .pop_close {
		position: absolute;
		top: 50px;
    	right: 10px;
		width: 30px;
		height: 30px;
	}
}
.mindar-ui-scanning .scanning{
	display: none !important;
}

.btn a{
	position: fixed;
    bottom: 10px;
    right: calc(50%);
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
    background: white;
    padding: 10px 20px;
    color: black;
    z-index: 99;
    max-width: 600px;
   	width: 70%;
    text-align: center;
    border-radius: 50px;
	text-decoration: none;
}


.header{
	position: fixed;
	background: rgba(255,255,255,0.6);
	width: 100%;
	padding: 10px 10px;
}
.header img{
	max-width: 120px;
	width: 100%;
}
#sound{
	position: fixed;
	bottom: 20px;
	right: 10px;
	background: blue;
	padding: 10px 20px;
	color: white;
	z-index: 99;
	width: 20px;
    height: 40px;
	background: url("img/s_off.png");
	background-size: cover;
}
#sound.on{
	position: fixed;
	bottom: 20px;
	right: 10px;
	background: blue;
	padding: 10px 20px;
	color: white;
	z-index: 99;
	width: 20px;
    height: 40px;
	background: url("img/s_on.png");
	background-size: cover;
}

.mindar-ui-loading .loader{
	background: url("img/lode_img.png");
	background-size: cover;
	width: 165px;
	height: 145px;
	animation: diagonal-move-anim 2s linear infinite alternate;
	border: none;
	border-radius: 0;
}
/*.mindar-ui-loading::after{
	content: "赤枠画像にスマホを水平にかざしてください。\A音声は右下のボタンでON/OFFできます。";
	white-space: pre;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%,350%);
	width: 100%;
	color: white;
	text-align: center;
	font-size: 18px;
}*/
@keyframes diagonal-move-anim {
	0% {
		transform: translate(30px, 0);
	}
	50% {
		transform: translate(-30px, 0px);
	}
	100% {
		transform: translate(30px, 0px);
	}
}
.note{
	position: fixed;
	bottom: 0;
	left: 10px;
	font-size: 15px;
	color: white;
	font-family: "Hiragino Kaku Gothic ProN", "Noto Sans JP", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Helvetica Neue", Arial, sans-serif;
}