@charset "utf-8";


/*==========================================
 body
===========================================*/
body {
    width: 100%;
    background-color: #C4D1DE;
    font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
    -ms-user-select: none; /* IE 10+ */
    -moz-user-select: -moz-none;
    -khtml-user-select: none;
    -webkit-user-select: none;
    user-select: none;
    -webkit-tap-highlight-color: rgba(0,0,0,0);
}
body,html{
	height:100%;
	}
/*==========================================
全体
===========================================*/
#container {
    position: relative;
    width: 100%;
    min-height: 100%;
    height: auto !important;
    height: 100%;
    padding: 15px 5px;
    background-color: #C4D1DE;
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -ms-box-sizing: border-box;
    -o-box-sizing: border-box;
}
.clear {
    clear:both;
}
*:focus {
	outline: none;
}
.hidden-txt {
	font-size: 0px;
}
/*==========================================
 ヘッダーのスタイル
===========================================*/
header {
}
header h1 {
text-align:center;
}
img.logo{
	width:260px;
	height:auto;
}
/*==========================================
 トップコンテンツエリア 
===========================================*/
#contents{
	height:100%;
	min-height:94vh;
	padding:10px 12px;
	border-radius:24px;
	background-color:#FFFFFF;
	box-sizing:border-box;
	-webkit-box-sizing:border-box;
	-moz-box-sizing:border-box;
	-ms-box-sizing:border-box;
	-o-box-sizing:border-box;
}
/*==========================================
 Selectbox
===========================================*/
.select_language{
	font-size: 16px;
	text-align: right;
}
.select_job{
	font-size: 16px;
	text-align: left;
}
.select_job .dropdown{
	width: 320px;
}

.dropdown {
	width: 240px;
	display: inline-block;
	background-color: #fff;
	border-radius: 5px;
	box-shadow: 0 0 2px rgb(204, 204, 204);
	transition: all .5s ease;
	position: relative;
	font-size: 20px;
	color: #474747;
	height: 100%;
	text-align: left
}
.dropdown .select {
	cursor: pointer;
	display: block;
	padding: 10px;
	font-size: 20px;
	background-color: #f3f3f3
}
.dropdown:hover {
	box-shadow: 0 0 4px rgb(204, 204, 204)
}
.dropdown:active {
	background-color: #f8f8f8
}
.dropdown.active:hover,
.dropdown.active {
	box-shadow: 0 0 4px rgb(204, 204, 204);
	border-radius: 5px 5px 0 0;
	background-color: #f8f8f8
}
.dropdown .dropdown-menu {
	position: absolute;
	background-color: #fff;
	width: 100%;
	left: 0;
	margin-top: 1px;
	box-shadow: 0 1px 2px rgb(204, 204, 204);
	border-radius: 0 1px 5px 5px;
	overflow: hidden;
	display: none;
	max-height: 300px;
	overflow-y: auto;
	z-index: 9
}
.dropdown .dropdown-menu li {
	padding: 10px;
	transition: all .2s ease-in-out;
	cursor: pointer
} 
.dropdown .dropdown-menu {
	padding: 0;
	list-style: none
}
.dropdown .dropdown-menu li:hover {
	background-color: #f2f2f2
}
.dropdown .dropdown-menu li:active {
	background-color: #e2e2e2
}

form{
	
}
.item{
	margin-top:20px;
}
label.lb{
	display:block;
	margin-bottom:8px;
	font-size:20px;
	color:#676565;
}
input,textarea{
	width: 100%;
	font-size: 20px;
	padding: 12px;
	background-color: #FFFFFF;
	border: 1px solid #9E9E9E;
	border-radius: 5px;
	outline: none;
	box-sizing:border-box;
	-webkit-box-sizing:border-box;
	-moz-box-sizing:border-box;
	-ms-box-sizing:border-box;
	-o-box-sizing:border-box;
}
.choice_box {

}
.choice{
	font-size: 22px;
	width: 40%;
	padding: 16px 0;
	margin-right:1px;
	text-align: center;
	color: #333333;
	background-color: #F3F3F3;
	border: 1px solid #989898;
	border-radius: 5px;
	float:left;
}
.age_box {

}
.age{
  font-size:20px;
  width:32.6%;
  padding:14px 0;
  margin-bottom:2px;
  text-align:center;
  color:#333333;
  background-color:#F3F3F3;
  border:1px solid #989898;
  border-radius:5px;
  float:left;
}
.start_btn {
    width: 100%;
	max-width: 450px;
    text-align: center;
    padding: 13px 0;
    font-size: 24px;
    font-weight: bold;
    color: #FFFFFF;
    background-color: #0079AB;
    border-radius: 30px;
    box-shadow: 0px 2px 1px #68A7C1;
    -webkit-box-shadow: 0px 2px 1px #68A7C1;
    margin-top: 30px;
    margin-bottom: 20px;
	margin-left:auto;
	margin-right:auto;
}
.error {
	color:#ff0000;
	margin-top:8px;
}

/*==========================================
 質問エリア
===========================================*/

.q_icon{
	position:absolute;
	top:6px;
	left:10px;
}
.circle{
	height: 90px;
	width: 90px;
	border-radius: 45px;
	line-height: 50px;
	text-align: center;
	background-color: #FFA533;
}
.q{
	font-size:20px;
	color:#FFFFFF;
	display: inline-block;
	margin-top:25px;
}
.num{
	font-size:34px;
	font-weight: bold;
	color:#FFFFFF;	
}
.q-all{
	color:#4F4E4E;
	font-size: 22px;
	margin-left: 90px;
}
/*img.qicon{
	width:80px;
	height:auto;
}*/
.q_txt{
	margin-top:50px;
	min-height:145px;
	font-size:24px;
	font-weight: bold;
	color:#4F4E4E;
	line-height:30px;
}
.q_txt2{
	font-size: 18px;
	color: #ED2B79;
	margin-top:10px;
	margin-bottom: 20px;
}
.answer_box {
	margin: 0 -3px 0 0; 
	overflow: hidden;
	_zoom: 1; 
	margin-bottom:24px;
}
.answer{
	font-size: 24px;
	font-weight: bold;
	width: 18%;
	padding: 16px 0;
	text-align: center;
	color: #333333;
	background-color: #F3F3F3;
	border: 1px solid #989898;
	border-radius: 4px;
	margin-right: 3px; 
	float:left;
}
ol{
	margin-left:30px;
	margin-bottom:30px;
}
ol li{
	font-size:18px;
	color: #5E5E5E;
	line-height:20px;
}
.f_box {
  margin-bottom:10px;		
}
.dw_btn{
	width: 42%;
	font-size: 18px;
	padding: 12px 0;
	text-align: center;
	color: #FFFFFF;
	background-color: #0079AB;
	border-radius: 20px;
	float:left;
}
.dw_btn2{
	width: 42%;
	font-size: 18px;
	padding: 12px 0;
	text-align: center;
	color: #FFFFFF;
	background-color: #0079AB;
	border-radius: 20px;
	float:right; 
}
#start_button:active, #return_top:active, .dw_btn:active, .dw_btn2:active, .btn-yes:active, .btn-no:active{
	opacity: 0.7;
}
/*==========================================
 QRコード表示
===========================================*/
.qr_box{
  width:90%;
  margin:30px auto;
}
.qr_txt{
	font-size:20px;
	color:#4F4E4E;
	line-height:28px;
	margin-bottom:40px;
}
.qr_display{
	text-align:center;
	padding:10px 0 20px 0
}
img.qr{
	width:50%;
	max-width:150px;
	height:auto;
}
.btnmode {
	-ms-user-select: none; /* IE 10+ */
	-moz-user-select: -moz-none;
	-khtml-user-select: none;
	-webkit-user-select: none;
	user-select: none;
	cursor: pointer;
}

.check {
	background-image: url('check.svg');
	background-repeat: no-repeat;
	background-position: 8% 50%;
	background-size: 28px auto;
}

.on{
    color: #FFFFFF;
    background-color: #0079AB;
    border: 1px solid #388DB1;
    -webkit-transition: background-color 0.8s ease;
    -moz-transition: background-color 0.8s ease;
    -o-transition: background-color 0.8s ease;
    transition: background-color 0.8s ease;
}
.ans-sel{
    color: #FFFFFF;
    background-color: #0079AB;
    border: 1px solid #388DB1;
}
.ans-on{
	color: #FFFFFF;
    background-color: #0079AB;
    border: 1px solid #388DB1;
	-webkit-transition: background-color 0.1s ease;
	-moz-transition: background-color 0.1s ease;
	-o-transition: background-color 0.1s ease;
	transition: background-color 0.1s ease;
}
.ans-fo{
	color:#333333;
	background-color:#EBEBEB;
	border: 1px solid #388DB1;
	-webkit-transition: background-color 0.4s ease;
	-moz-transition: background-color 0.4s ease;
	-o-transition: background-color 0.4s ease;
	transition: background-color 0.4s ease;
}
.dwbtn-on{
	color: #FFFFFF;
	background-color: #FF428E;
	-webkit-transition: background-color 0.8s ease;
	-moz-transition: background-color 0.8s ease;
	-o-transition: background-color 0.8s ease;
	transition: background-color 0.8s ease;
}
.back-icon {
	background-image: url('back.svg');
	background-repeat: no-repeat;
	background-position: 5% 50%;
	background-size: 28px auto;
}
.stop-icon {
	background-image: url('stop.svg');
	background-repeat: no-repeat;
	background-position: 5% 50%;
	background-size: 28px auto;
}

.hide {
	display: none;
}
.error-over {
	background-color: #ffd9d9;
}

/*==========================================
 top
===========================================*/
#splash {
	position: relative;
	width: 100vw;
	height: 100vh;
}
.logo-position {
  position: absolute;
  top: 50vh;
  left: 50vw;
  transform: translate(-45vw, -48vh);
}
.logo-position img {
	width: 90vw;
	height: 90vh;
	object-fit: contain;
}
.popup {
	animation: popup-animation 1.5s forwards;
}
@keyframes popup-animation {
	0% {
		opacity: 0;
		transform: scale(0.8);
	}
	100% {
		opacity: 1;
		transform: scale(1.0);
	}
}

.bg-color {
	animation: bgAnime 1s forwards;
}
@keyframes bgAnime {
	0% {
		background-color: #FFFFFF;
	}
	100% {
		background-color: #C4D1DE;
	}
}

/*==========================================
 dialog
===========================================*/
.remodal {
	width: 90%;
	border-radius: 16px;
	padding: 40px;
	line-height: normal;
}
.remodal h1 {
	font-size: 18px;
	margin-bottom: 16px;
}
.remodal p {
	font-size: 18px;
	margin-top: 25px;
	margin-bottom: 25px;
	text-align: left;
}
.btn-yes {
	width: 40%;
	border: none;
	font-size: 18px;
	padding: 12px 0;
	text-align: center;
	color: #FFFFFF;
	background-color: #75A7D8;
	border-radius: 40px;
	margin-right: 20px;
}
.btn-no {
	width: 40%;
	border: none;
	font-size: 18px;
	padding: 12px 0;
	text-align: center;
	color: #FFFFFF;
	background-color: #75A7D8;
	border-radius: 40px;
}

/*==========================================
 w330未満のモバイルに対応
===========================================*/
@media screen and (max-width: 330px) {
.q_txt{
	margin-top:50px;
	min-height:160px;
	font-size:24px;
	font-weight: bold;
	color:#4F4E4E;
	line-height:30px;
}
.check {
	background-image: url('check.svg');
	background-repeat: no-repeat;
	background-position: -50% 50%;
	background-size: 28px auto;
}
.back-icon {
	background-image: url('back.svg');
	background-repeat: no-repeat;
	background-position: -50% 50%;
	background-size: 28px auto;
}
.stop-icon {
	background-image: url('stop.svg');
	background-repeat: no-repeat;
	background-position: -50% 50%;
	background-size: 28px auto;
}
}

/*==========================================
 結果画面
===========================================*/
.message_txt{
	margin: 40px 5% 20px 5%;
	font-size:20px;
	font-weight: bold;
	color:#4F4E4E;
	line-height:30px;
}
.mt-0{
	margin-top: 0;
}

/*==========================================
 2020.10改修分
===========================================*/
.txt_link_parent {
	text-align: right;
	margin-top: 20px;
	margin-bottom: 20px;
}

.txt_link {
	font-size: 24px;
	font-weight: bold;
	margin-bottom: 10px;
	color: #EC6900;
}

.chapter_msg {
	color: #151a83;
	margin-top: 40px;
}

#result-illust {
	text-align: center;
}

#result-illust img {
	max-width: 240px;
}

.arrow {
	text-align: center;
	margin-bottom: 40px;
}

.arrow img {
	max-width: 240px;
	margin-top: 20px;
}

.large_btn {
	text-align: center;
}

.large_btn {
	width: 80%;
	max-width: 400px;
	margin: 0 auto;
}

#book_link {
	margin-bottom: 40px;
}

.iframe_parent {
	position: relative;
	width: 100%;
	padding-top: 56.25%;
	overflow: auto; 
	-webkit-overflow-scrolling: touch;
}

.iframe_parent iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	border: none;
	display: block;
}

#circuit-message {
	font-size: 26px;
    line-height: 32px;
    font-weight: bold;
}

.chart_inner_box {
	max-width: 700px;
	margin: 0 auto;
}