@charset 'utf-8';

.roboto-light {
  font-family: "Roboto", sans-serif;
  font-optical-sizing: auto;
  font-weight: 700;
  font-style: normal;
  font-variation-settings: "wdth" 100;
}
.roboto-mono-light {
  font-family: "Roboto Mono", monospace;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
}
body {
	background-image:
	 url(../img_test/parts_01.png),
	 url(../img_test/background_image.png);
	background-repeat:
	 repeat-x,
	 repeat;
	background-position:
	 top center,
	 center;
	background-size:
	 auto,
	 auto;
}
.container {
	position: relative;
	height: 100vh;
}
.wrapper {
	position: absolute;
	width: 100%;
	max-width: 1000px;
	height: 100%;
	top: 100px;
	left: 50%;
	transform: translate(-50%);
}
header {
	text-align: center;
}

.image-container {
	position: relative;
	width: 500px;
	margin-top: 30px;
	margin-left: auto;
	margin-right: auto;
}
.image-container:after {
	content:'';
	position: absolute;
	top: 0px;
	left: 50%;
	width: 350px;
	height: 350px;
	background-color: #FFFFFF;
	border-radius: 50%;
	transform: translate(-50%);
	z-index: -1;
}
.omkj-btn {
	text-align: center;
	margin-top: 20px;
}


#resultImage {
    display: none;
    width: 100%;
    max-width: 500px;
    height: auto;
}
.omkj_sample {
	position: relative;
	width: 500px;
	margin-top: 10px;
	margin-left: auto;
	margin-right: auto;
	display: flex; 
}
.omkj_sample span {
	display: block;
}


#countdown-container {
	position: relative;
	width: 100%;
	max-width: 450px;
	text-align: center;
	margin-top: 20px;
	margin-left: auto;
	margin-right: auto;
	padding: 10px 20px;
	background-color: #f44336;
	border-radius: 50px;
	display: none;
}
#countdown-container #countdown {
	padding: 15px;
	border-radius: 20px;
	background-color: #FFFFFF; 
}
#countdown-container #countdown .countdown-digit {
	font-size: max(4.5vw,25px);
}
#countdown-container #countdown .countdown-separator {
	font-size: min(3vw,20px);
}
.tel-box {
	width: 420px;
	margin-top: 20px;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 20px;
	position: relative;
	display: none;
}
.tel-box span {
	display: block;
}
.tel-box span a {
	font-size: 30px;
	color: #FFFFFF;
	text-decoration: none;
}
.tel_content {
/*	color: #FFFFFF;*/
/*	text-align: center;*/
/*	padding: 10px;*/
/*	border-radius: 50px;*/
/*	border: 10px solid #FFFFFF;*/
/*	background-color: #2a5da2;*/
}

.tel_content .tel {
	font-size: 30px;
	margin-bottom: 10px	;
}
.tel_content .time {
	font-size: 15px;
}
.sub_tel-box {
	margin-top: 20px;
	display: flex;
	gap: 20px;
}
.hp-check {
	
}
.hp-check img {
	width: 100%;
}

.omkj-result {
	width: 100%;
	max-width: 400px;
	text-align: center;
	margin-top: 20px;
	margin-left: auto;
	margin-right: auto;
	padding: 10px 5px;
	background-color: #FFFFFF;
	border-radius: 20px;
    display: none;
}
.omkj-result .code-box {
	line-height: 1.6;
	padding: 10px 0px;
	border-top: 2px dashed rgba(236, 204, 51, 1);
	border-bottom: 2px dashed rgba(236, 204, 51, 1);
}
.omkj-code {
	display: block;
}

footer {
	font-size: 12px;
	text-align: center;
}