@charset "utf-8";
/* CSS Document */
body,html { margin: 0; overflow: hidden; }
		body { font-family: "Murecho", serif;}
		#startWrap { width: 100%; height: 100svh; position: fixed; top:0; left: 0;font-family: "Murecho", serif; padding: 2vw; box-sizing: border-box; background-position: center; background-color: #000; z-index: 2;}
		.view #startWrap { display: none;}
		#startWrap h1 { font-family: "Murecho", serif; font-weight: 700; color: #FFF; font-size: 8vw; margin: 0; line-height: 1.2; margin-bottom: 1em;}
		#startWrap h2 {font-family: "Murecho", serif; font-weight: 400; color: #FFF; font-size: 8vw; margin: 0; padding: 0;}
		#startWrap .start { width: 100%; position: absolute; bottom: 0; left: 0; text-align: center; display: flex;justify-content: center;align-items: center; padding-bottom: 10vw;}
		
        canvas { display: block; }
        #info { 
            position: fixed; 
            top: 0px; 
            width: 100%;
            color: #fff; 
            background: #232323; line-height: 100px; text-overflow: ellipsis;overflow: hidden;
            white-space: nowrap;
            padding:  0 0px 0 20px; height: 100px;
            z-index: 100; padding-right: 100px; 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: 60px;}
        .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: 60px; color: #FFF; display: block; top:0; left: 0;}
        .imageSelector div input:checked+label { background-color: #902423; color: #000;}
        
        h2 { margin: 0; text-align: center; color: #FFF; font-size: 80%; padding: .7em;}
        
        #exitAR {
            position: fixed;
            top: 30px;
            right: 0px;
            padding: 0;
            background:none;
            color: #000;
            border: none;
            border-radius: 0px;
            cursor: pointer;
            z-index: 101;
            display: none; width: 40px; height: 40px; background-image: url("../img/close.svg"); background-repeat: no-repeat; background-position: center; border-radius: 0%;background-size: 30px; background-color: transparent;
        }
        #start {
            margin: 0 auto;
            padding: 12px 24px;
            border: none;
            border-radius: 4px;
            background: #2196F3;
            color: #fff;
             font-family: "Murecho", serif; font-weight: 400;
            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,.desktop #overlay { display: block; z-index: 1;}
.desktop #overlay {
    background-color: rgba(0, 0, 0, .8);
    display: flex;
    align-content: stretch;
    justify-content: space-around;
    font-size: 140%;
    align-items: center; padding: 20px; box-sizing: border-box;
}
.desktop #overlay:before { content: "WebXR is not supported in this browser"; color: #FFF; }
		#ios,#android { width: 100%; position: fixed; bottom:0; left: 0; background-color: #333; box-shadow: 0 2px 20px rgba(0,0,0,.5); padding: 8vw; box-sizing: border-box; border-top-left-radius: .3em; border-top-right-radius: .3em;font-family: "Noto Sans JP", sans-serif; text-align: center; display: none; z-index: 2;}
		.ios #ios,.android #android { display: block;}
		#ios figure img,#android figure img { width: 100%; height: auto;}
		#ios figure,#android figure {  overflow: hidden; margin: 0; line-height: 0; width: 20vw; height: 20vw;}
		.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 { 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;}
		
		#ios .box { padding: 8vw 0; border-top: 1px solid #444;}
		#ios .box h4 { margin: 0; margin-bottom: 2em; font-size: 3.6vw; }
		
		/* シェイクアニメーションの定義 */
        @keyframes shake {
            0% { transform: translate(11vw, 11vw) rotate(0deg); }
            10% { transform: translate(-11vw, -12vw) rotate(-1deg); }
            20% { transform: translate(-13vw, 0px) rotate(1deg); }
            30% { transform: translate(13vw, 12vw) rotate(0deg); }
            40% { transform: translate(11vw, -11vw) rotate(1deg); }
            50% { transform: translate(-11vw, 12vw) rotate(-1deg); }
            60% { transform: translate(-13vw, 11vw) rotate(0deg); }
            70% { transform: translate(13vw, 11vw) rotate(-1deg); }
            80% { transform: translate(-11vw, -11vw) rotate(1deg); }
            90% { transform: translate(11vw, 12vw) rotate(0deg); }
            100% { transform: translate(11vw, -12vw) rotate(-1deg); }
        }

        /* シェイククラスの定義 */
        .shake {
            animation: shake 0.2s;
            animation-iteration-count: infinite;
        }
		
		meter::-webkit-meter-bar { background: none; }
        meter::-webkit-meter-optimum-value { background: #902423; }
        meter::-moz-meter-bar { background: #902423; }
        meter::-ms-fill { background: #902423; }

#startWrap .start { position:relative; z-index: 1; padding-bottom:0;}

/*#startWrap:before { content: ""; display: block; width: 50%; height: 7%; position: fixed; top:0; left: 0; background-image: url("../img/start1.svg"); background-repeat: no-repeat; background-size: contain; background-position: left top; z-index: 1;}
#startWrap:after { content: ""; display: block; width: 50%; height: 7%; position: fixed; bottom:0; right: 0; background-image: url("../img/start2.svg"); background-repeat: no-repeat; background-size: contain; background-position: right bottom; z-index: 1;}*/

.desktop #startWrap:before,.desktop #startWrap:after { display: none;}

#ray { width: 100%; height: 100%; position:absolute;top:0; left: 0; background-image: url("../img/bg.svg"); }

#startWrap {display: flex;
    justify-content: center;
    align-items: center;}
		
		@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: 8vw;
}
			#startWrap h2 {
    font-size: 4vw;
}
			
		
}
		
	@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: 8vw;
}
	#startWrap h2 {
    font-size: 4vw;
}
		
		
	
        }	
meter{ margin: 0; display: none;/* デフォルトの外観を削除 */
     }
.view meter { display: block;}
.Gecko meter {-webkit-appearance: none;
    appearance: none;}


body {
            color: #fff;
        }
        .container {background:rgba(34,34,34,0.5); backdrop-filter: blur(10px);
            max-width: 800px; width: calc(100% - 40px ); box-sizing: border-box;
            margin: 0 auto;border-radius: 12px;
            padding: 20px; position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%); z-index: 1;
        }
        .controls {
            margin: 0px 0;
            padding: 60px 20px 20px 20px; box-sizing: border-box;
             width: 100%; background-color: #232323; border-radius: .3em; position: fixed; bottom: 0; left: 0;
            transform: translateY(100%); transition: all .4s ease 0s; z-index: 100;
        }
.open .controls {transform: translateY(0%); }

#close2 { width: 60px; height: 60px; position: absolute; top: 0; right: 0; background-image: url("../img/close2.svg"); background-repeat: no-repeat; background-position: center; background-size: 20px; cursor: pointer;}



#overlay2 { width: 100%; height: 100svh; position: fixed; top:0; left: 0; background-color: rgba(0,0,0,.5); z-index: 0; opacity: 0; transition: all .4s ease 0s; cursor: pointer;}
.open #overlay2 { opacity: 1;  z-index: 100;}

        .chapter-buttons {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 10px;
            margin-bottom: 20px;
        }
        .playback-controls {
            text-align: center;
            margin-top: 20px;
        }
        button {
            padding: 12px 24px;
            border: none;
            border-radius: 8px;
            background: #4CAF50;
            color: white;
            cursor: pointer;
            transition: all 0.3s ease;
            font-size: 1rem;
            text-transform: uppercase;
            letter-spacing: 1px;
            margin: 0 10px; font-family: "Murecho", serif; font-weight: 400;
        }
        button:hover {
            background: #45a049;
            transform: translateY(-2px);
            box-shadow: 0 4px 8px rgba(0,0,0,0.2);
        }
        button:disabled {
            background: #cccccc;
            cursor: not-allowed;
            transform: none;
            box-shadow: none;
        }
        .chapter-btn {
            background: #2196F3;
            position: relative;
            overflow: hidden;
        }
        .chapter-btn.active {
            background: #1976D2;
            font-weight: bold;
        }
        .chapter-btn:hover {
            background: #1976D2;
        }
        #status {
            text-align: center;
            margin-top: 20px;
            font-size: 1.2rem;
            color: #fff; cursor: pointer; font-family: "Murecho", serif; font-weight: 400;
        }
#status:after { content: ""; display: inline-block; vertical-align: middle; width: 1.5em; height: 1.5em; background-image: url("../img/arrow.svg"); background-repeat: no-repeat; background-size: contain; margin-left: .5em;}
        .progress-container { width: 100%;
            margin-top: 20px;
            padding: 10px;
            background: rgba(255, 255, 255, 0);
            border-radius: 8px; box-sizing: border-box;
        }
        .progress-bar {
            width: 100%;
            height: 4px;
            background: rgba(255, 255, 255, 0.2);
            border-radius: 2px;
            overflow: hidden;
            margin-bottom: 5px;
        }
        .progress-fill {
            width: 0%;
            height: 100%;
            background: #2196F3;
            transition: width 0.1s linear;
        }
        .time-display {
            text-align: right;
            font-size: 0.9rem;
            color: rgba(255, 255, 255, 0.7);
        }

#ios,#android { color:#fff;}

@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: 8vw;
}
			#startWrap h2 {
    font-size: 4vw;
}
			#startWrap {display: flex;
    justify-content: center;
    align-items: center;}
		#startWrap .start { position: static; padding-bottom:0;}
	
	#startWrap h1 { font-size: 4vw;}
}
		
	@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: 8vw;
}
	#startWrap h2 {
    font-size: 4vw;
}
		
		
	
        }	


#book { width: 70px; height: 70px; position: fixed; top:0; right: 0; background-image: url("../img/book.svg"); background-repeat: no-repeat; background-position: center; background-size: 30px; cursor: pointer; z-index: 2;}
#modal { width: 100%; height: 100svh; background-color: #FFF; border-radius: 0em; position: fixed; top:50%; left: 50%; transform: translate(-50%,-50%); z-index: -1; opacity: 0; transition: all .4s ease 0s;}
.opens #modal { z-index: 99; opacity: 1; }
#modal #close { width: 60px; height: 60px; position: absolute; top:0; right: 0; cursor: pointer; background-image: url("../img/close2.svg"); background-repeat: no-repeat; background-position: center; background-size: 25px;}
#modal .inner { width: 100%; position: absolute; top:60px; height: calc( 100% - 60px );}
#modal .inner iframe { width: 100%; height: 100%; border: none;}
#overlay3 { width: 100%; height: 100svh; position: fixed; top:0; left: 0; background-color: rgba(0,0,0,.6); z-index: -1; opacity: 0; transition: all .4s ease 0s;}
.opens #overlay3 { opacity: 1; z-index: 99;}

.camera-error {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: rgba(0, 0, 0, 0.8);
    color: white;
    padding: 15px 20px;
    border-radius: 5px;
    z-index: 1000;
    text-align: center;
    font-size: 14px;
}

.camera-preview {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: -1;
}

.sp { display: none;}
@media screen and (max-width:767px) {
	.sp { display: block;}
}