@charset "utf-8";
/* CSS Document */
body,html { margin: 0; overflow: hidden; }
		body { font-family: "Noto Sans JP", sans-serif;}
		#startWrap { width: 100%; height: 100svh; position: fixed; top:0; left: 0; background-image: url("../2.jpg"); background-size: cover;font-family: "Kaisei Tokumin", serif; padding: 2vw; box-sizing: border-box; }
		.view #startWrap { display: none;}
		#startWrap h1 { font-family: "Kaisei Tokumin", serif; font-weight: 500; color: #FFF; font-size: 13vw; margin: 0; line-height: 1.4;}
		#startWrap h2 {font-family: "Kaisei Tokumin", serif; font-weight: 300; color: #FFF; font-size: 5vw; margin: 0; padding: 0; margin-bottom: 2em;}

.en #startWrap h1{font-size: 7vw; }
.en #startWrap h2 {font-size: 3vw;}

		#startWrap .start { width: 100%; /*height: 50svh;*/ position: absolute; bottom: 0; left: 0; text-align: center; display: flex;justify-content: center;align-items: center; padding-bottom: 10vh;}
#startWrap .start .inner > p { color: #FFF; font-size: 4vw; margin: 0; margin-bottom: .5em;}
		
        canvas { display: block; }
        #info { 
            position: fixed; 
            top: 0px; 
            width: 100%;
            color: white; 
            background-color: rgba(0,0,0,0.5); line-height: 60px; text-overflow: ellipsis;overflow: hidden;
            white-space: nowrap;
            padding:  0 10px; height: 60px;
            z-index: 100; padding-right: 70px; box-sizing: border-box;
        }
        #info:empty { display: none;}
        #imageSelector { 
            position: fixed;
            bottom: 0px;
            left: 50%;
            transform: translateX(-50%);
            z-index: 100; 
            display: none;
            background-color: rgba(0,0,0,0.5);
            padding: 0px;
            width: 100%;
        }
        .ar #imageSelector { display: block;}
        .imageSelector { display: flex;height: 12vw;}
        .imageSelector label {
            color: white;
            margin-right: 10px;
            cursor: pointer;
        }
        .imageSelector > div { width: calc( 100% / 3 ); height: 100%; position: relative; cursor: pointer;}
        .imageSelector div input { height: 100%; width: 100%; display: block; opacity: 0;}
        
        .imageSelector div label{ width: 100%; height: 100%; position: absolute; text-align: center; line-height: 12vw; color: #FFF; display: block; top:0; left: 0; font-size: 4vw;}
        .imageSelector div input:checked+label { background-color: #FCF100; color: #000;}
        
        h2 { margin: 0; text-align: center; color: #FFF; font-size: 80%; padding: .7em;}
        
        #exitAR {
            position: fixed;
            top: 0px;
            right: 0px;
            padding: 0;
            background-color: #FCF100;
            color: #000;
            border: none;
            border-radius: 0px;
            cursor: pointer;
            z-index: 101;
            display: none; width: 60px; height: 60px; background-image: url("../img/close.svg"); background-repeat: no-repeat; background-position: center;
        }
        #start {
            margin: 0 auto;
            padding: 12px 24px;
            border: none;
            border-radius: 4px;
            background: #FCF100;
            color: #000;
            font: bold 16px Arial;
            cursor: pointer;
            z-index: 100;
        }
		
		#overlay { position: fixed; top:0; left: 0; background-color: rgba(0,0,0,.5); width: 100%; height: 100%; display: none;}
		.ios #overlay,.android #overlay,.app #overlay { display: block;}
		#ios,#android,#app { width: 100%; position: fixed; top:0; left: 0; background-color: #FFF; box-shadow: 0 2px 20px rgba(0,0,0,.5); padding: 8vw; box-sizing: border-box; border-bottom-left-radius: .3em; border-bottom-right-radius: .3em;font-family: "Noto Sans JP", sans-serif; text-align: center; display: none;}
#app { top:auto; bottom: 0; border-radius:0;  border-top-left-radius: .3em; border-top-right-radius: .3em;  box-shadow: 0 -2px 20px rgba(0,0,0,.5);}

		.ios #ios,.android #android,.app #app { display: block;}
		#ios figure img,#android figure img,#app figure img { width: 100%; height: auto;}
		#ios figure,#android figure,#app figure {  overflow: hidden; margin: 0; line-height: 0; width: 20vw; height: 20vw;}
		#app figure { width: 100%; height: auto; border-radius: .3em;}
		.iosInner { display: flex; text-align: left; margin-bottom: 1.5em;}
		.iosInner div { margin-left: 5vw;}
		.iosInner div > * { margin: 0;}
		.iosInner div h3 { font-size: 5vw;}
		#ios a,#android a,#app a { display: inline-block; font-size: 4vw; color: #fff;background-color: #0070c9; height: 10vw; border-radius: 5vw; text-decoration: none; padding: 0 2em; line-height: 10vw; font-weight: bold;}

a#cancel {color: #0070c9; background-color: transparent;}
		
		#ios .box { padding: 8vw 0; border-top: 1px solid #eee;}
		#ios .box h4 { margin: 0; margin-bottom: 2em; font-size: 3.6vw; }

.appInner { margin-bottom: 7vw;}

@media (orientation: landscape) {
           #ios figure, #android figure, #app figure {
    width: 10vw;
    height: 10vw;
}
	.iosInner div {
    margin-left: 2.5vw;
}
	.iosInner div h3 {
    font-size: 2.5vw;
}
	#ios .box h4 {
    font-size: 1.8vw;
}
	#ios a, #android a, #app a {
    font-size: 2vw;
    height: 5vw;
    border-radius: 2.5vw;
    line-height: 5vw;
}
	#ios .box {
    padding: 4vw 0; border: none;
}
	.iosInner {justify-content: center;align-items: center;}
	#ios, #android, #app {
    padding: 4vw;
}
	#app figure {
    width: 40%;
    height: auto;
    border-radius: .3em;
}
	.appInner { display: flex; margin-bottom: 5vw;}
	.appInner > div { text-align:left; margin-left:5vw; }
	
	.boxWrap { display: flex;justify-content: space-around;}
	
	#startWrap h1 {
    font-size: 6vw;
}
	#startWrap h2 {
    font-size: 2.5vw;
}
	#startWrap .start .inner > p { font-size: 2vw;}
	
	.imageSelector div label { font-size: 2vw;line-height: 6vw;}
	.imageSelector{  height: 6vw;}
        }

@media (orientation: portrait) and (min-width:760px) {
           #ios figure, #android figure, #app figure {
    width: 10vw;
    height: 10vw;
}
	.iosInner div {
    margin-left: 2.5vw;
}
	.iosInner div h3 {
    font-size: 2.5vw;
}
	#ios .box h4 {
    font-size: 1.8vw;
}
	#ios a, #android a, #app a {
    font-size: 2vw;
    height: 5vw;
    border-radius: 2.5vw;
    line-height: 5vw;
}
	#ios .box {
    padding: 4vw 0;
}
	.iosInner {justify-content: center;align-items: center;}
	#ios, #android, #app {
    padding: 4vw;
}
	#app figure {
    width: 100%;
    height: auto;
    border-radius: .3em;
}
	#startWrap h1 {
    font-size: 6vw;
}
	#startWrap h2 {
    font-size: 2.5vw;
}
	.imageSelector div label { font-size: 2vw;line-height: 6vw;}
	.imageSelector{  height: 6vw;}
        }