html{
    -webkit-text-size-adjust:none;
    text-size-adjust:none;
}

html,
body,
input,
button,
select,
textarea,
p,
h1,
h2,
div,
span,
table,
th,
td{
    font-family:
        Arial,
        "Helvetica Neue",
        "Hiragino Kaku Gothic ProN",
        "Hiragino Sans",
        Meiryo,
        sans-serif !important;
}

body{
    background:#f5f5f5;
    margin:0;
}
.card{

    width:400px;

    margin:40px auto;

    background:white;

    padding:30px;

    box-sizing:border-box;

    border-radius:20px;

    box-shadow:0 5px 15px rgba(0,0,0,.1);

}
h1{

    text-align:center;
    font-size:34px;
    color:#003b7a;
    margin:10px 0 5px;

}

#eventName{

    text-align:center;
    font-size:22px;
    color:#666;
    font-weight:bold;
    margin:0 0 20px;

}

input{
	
	width:100%;
		
	height:45px;
	
	font-size:18px;
	
	padding:10px;
	
	box-sizing:border-box;
	
	border:1px solid #cccccc;
	
	border-radius:8px;
	
}
button{
	
	width:100%;
	
	height:50px;
	
	background:#003b7a;
	
	color:white;
	
	font-size:18px;
	
	border:none;
	
	border-radius:10px;
	
	cursor:pointer;
	
}
button:hover{
	
	background:#0054a6;
	
}
p{
	
	margin-top:25px;
	
	margin-bottom:8px;
	
	font-weight:bold;
	
}
.logo{

    width:300px;
    max-width:100%;

    display:block;

    margin:0 auto 10px;

}
hr{
	
	border:none;
	
	border-top:1px solid #dddddd;
	
	margin:15px 0;
	
}
button:disabled{
	
	background:#bdbdbd;
	
	color:#ffffff;
	
	cursor:not-allowed;
	
	opacity:0.7;
	
}

#error{

    color:#d32f2f;
    font-size:15px;
    font-weight:bold;
    margin:5px 0 20px;
    text-align:left;
    min-height:20px;

}

.completeTitle{
	
	color:#003b7a;
	font-size:34px;
	margin-bottom:30px;
	
}

.completeText{
	
	color:#666;
	font-size:22px;
	
}

.receptionNumber{
	
	color:#e60012;
	font-size:90px;
	font-weight:bold;
	margin:20px 0;
	
}

.customerName{
	
	font-size:30px;
	font-weight:bold;
	margin-bottom:30px;
	
}

.completeMessage{
	
	font-size:20px;
	line-height:1.8;
	
	}

.loader{

    width:60px;
    height:60px;

    border:6px solid #d9d9d9;
    border-top:6px solid #003b7a;

    border-radius:50%;

    margin:0 auto 25px;

    animation:spin 1s linear infinite;

}

@keyframes spin{

    0%{
        transform:rotate(0deg);
    }

    100%{
        transform:rotate(360deg);
    }

}

.loadingText{

    font-size:22px;
    line-height:1.8;
    color:#333;

}

.errorTitle{

    color:#d32f2f;
    font-size:32px;
    margin-bottom:25px;

}

.errorMessage{

    font-size:20px;
    line-height:1.8;
    margin-bottom:40px;

}

#backButton,
#resetButton{

    width:100%;
    max-width:300px;
    height:55px;

    background:#003b7a;
    color:#fff;

    border:none;
    border-radius:8px;

    font-size:18px;
    cursor:pointer;

}

#backButton:hover,
#resetButton:hover{

    opacity:0.9;

}

.confirmTable{

    width:100%;
    border-collapse:collapse;
    margin:30px 0;

}

.confirmTable th,
.confirmTable td{

    border:1px solid #ddd;
    padding:15px;
    font-size:18px;

}

.confirmTable th{

    width:35%;
    background:#f5f5f5;

}

#backInputButton,
#confirmButton{

    height:55px;
    margin-top:15px;

    border:none;
    border-radius:8px;

    font-size:18px;
    cursor:pointer;

}

#backInputButton{

    background:#999;
    color:#fff;

}

#confirmButton{

    background:#003b7a;
    color:#fff;

}

.confirmButtonArea{

    display:flex;
    gap:15px;
    margin-top:20px;

}

.confirmButtonArea button{

    flex:1;

}

.storeName{

    margin:0 0 20px;

    font-size:18px;

    color:#777;

    text-align:center;

}
/* ==================================
   SMARTPHONE
================================== */

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

    .card{

        width:calc(100% - 24px);

        margin:20px auto;

        padding:20px;

        border-radius:16px;

    }


    .logo{

        width:260px;

    }


    h1{

        font-size:26px;

        margin:8px 0 5px;

    }


    .storeName{

        font-size:18px;

        margin-bottom:14px;

    }


    #eventName{

        font-size:18px;

        margin-bottom:18px;

    }


    p{

        font-size:15px;

        margin-top:20px;

        margin-bottom:7px;

    }


    input{

        height:48px;

        padding:8px 10px;

        font-size:16px;

    }


    button{

        height:48px;

        font-size:16px;

    }


    #error{

        font-size:14px;

    }


    .completeTitle{

        font-size:27px;

        margin-bottom:20px;

    }


    .completeText{

        font-size:18px;

    }


    .receptionNumber{

        font-size:70px;

        margin:15px 0;

    }


    .customerName{

        font-size:24px;

        margin-bottom:20px;

    }


    .completeMessage{

        font-size:17px;

        line-height:1.7;

    }


    .loadingText{

        font-size:18px;

    }


    .errorTitle{

        font-size:26px;

    }


    .errorMessage{

        font-size:17px;

    }


    .confirmTable th,
    .confirmTable td{

        padding:10px;

        font-size:16px;

    }


    #backButton,
    #resetButton,
    #backInputButton,
    #confirmButton{

        height:50px;

        font-size:16px;

    }

}