/* =========================
   ページ基本設定（横幅はみ出し防止）
========================= */

html,body{
margin:0;
padding:0;
width:100%;
max-width:100%;
overflow-x:hidden;
box-sizing:border-box;

display:flex;
flex-direction:column;
align-items:center;
}

*, *::before, *::after{
box-sizing:border-box;
}


/* =========================
   カメラ表示エリア
========================= */

#cameraContainer{
width:340px;
margin:20px auto;
position:relative;
display:none;
}

#reader{
width:320px;
height:320px;
margin:auto;
position:relative;
display:flex;
align-items:center;
justify-content:center;
overflow:hidden;
max-width:100%;
}

/* iPhone / Android video崩れ防止 */

#reader video{
width:100% !important;
height:100% !important;
object-fit:cover;
}

#reader canvas{
width:100% !important;
height:100% !important;
}


/* =========================
   閉じるボタン
========================= */

#closeCamera{
position:absolute;
top:-10px;
right:-10px;
width:40px;
height:40px;
background:rgba(0,0,0,0.7);
color:white;
font-size:24px;
text-align:center;
line-height:40px;
border-radius:50%;
cursor:pointer;
z-index:1000;
}


/* =========================
   スキャンエリア
========================= */

.scan-box{
text-align:center;
margin-top:20px;
width:100%;
max-width:420px;
margin-left:auto;
margin-right:auto;
}


/* =========================
   入力関連
========================= */

#hiddenInput{
position:absolute;
opacity:0;
pointer-events:none;
}


/* =========================
   読み込み画面
========================= */

#loadingOverlay{
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
background:rgba(255,255,255,0.95);
display:none;
justify-content:center;
align-items:center;
font-size:28px;
font-weight:bold;
z-index:9999;
}


/* =========================
   ボタン
========================= */

.footerBtn{
display:inline-block;
padding:12px 30px;
background:#9e9e9e;
color:#fff;
text-decoration:none;
border-radius:8px;
font-weight:bold;
}

.footerBtn:hover{
filter:brightness(0.9);
}

.manualBtn{
display:inline-block;
padding:12px 30px;
background:#4CAF50;
color:#fff;
text-decoration:none;
border-radius:8px;
font-weight:bold;
margin-top:12px;
}

.manualBtn:hover{
filter:brightness(0.9);
}


/* =========================
   スマホ用デザイン
========================= */

@media screen and (max-width:600px){

body{
font-size:18px;
}

h2{
font-size:22px;
margin-top:15px;
}

.scan-box{
margin-top:10px;
padding:10px;
}

#reader{
width:95%;
height:95vw;
max-width:380px;
max-height:380px;
margin-left:auto;
margin-right:auto;
}

.btn{
width:95%;
max-width:360px;
padding:18px;
font-size:20px;
border-radius:12px;
margin-top:10px;
margin-left:auto;
margin-right:auto;
display:block;
}

.manualBtn{
width:95%;
max-width:360px;
padding:18px;
font-size:20px;
border-radius:12px;
margin:12px auto 0 auto;
display:block;
}

.footerBtn{
width:95%;
max-width:360px;
padding:16px;
font-size:18px;
margin-top:20px;
margin-left:auto;
margin-right:auto;
display:block;
}

#closeCamera{
width:50px;
height:50px;
font-size:28px;
line-height:50px;
}

#loadingOverlay{
font-size:22px;
}

}