@charset "utf-8";


/* -----------------------------------------------------------
    ページベース
-------------------------------------------------------------- */
.simulation{
	background: var(--blue);
}

.head-area{
	display: flex;
	justify-content: center;
	align-items: center;
}
.head-area .logo{
	width: 80px;
}
.head-area .page-title{
	font-size: 2.6rem;
	line-height: 1.4;
	font-weight: bold;
	color: #004B6A;
	margin: 0 0 0 30px;
}
.head-area .page-title span{
	font-size: 1.8rem;
	display: block;
}

.simulation-area {
	background: #fff;
	padding: 50px 80px 10px 80px;
	width: 900px;
	margin: 40px auto;
	border-radius: 10px;
}
.simulation-area.index {
	padding: 80px 80px 10px 80px;
}

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

	.head-area{
	}
	.head-area .logo{
		width: 60px;
	}
	.head-area .page-title{
		font-size: 2.3rem;
		margin: 0 0 0 15px;
	}
	.head-area .page-title span{
		font-size: 1.5rem;
	}

	.simulation-area {
		padding: 20px 20px 5px 20px;
		width: 90%;
		margin: 20px auto 0;
	}
	.simulation-area.index {
		padding: 30px 20px 5px 20px;
	}
	
}


/* -----------------------------------------------------------
    イントロエリア
-------------------------------------------------------------- */
.simulation-intro {
	padding: 30px 0 0;
}
.simulation-intro .basic-txt {
	font-size: 1.6rem;
	line-height: 1.8;
	font-weight: 400;
}
.simulation-intro .basic-txt .s {
	font-size: 1.4rem;
	display: block;
	margin: 10px 0 0;
}

.simulation-intro .start {
	text-align: center;
	margin: 40px 0 -20px;
}
.simulation-intro .start a {
	min-width: 280px;
	display: inline-block;
	padding: 15px 20px;
	font-size: 2rem;
	font-weight: bold;
	border-radius: 50px;
	border: none;
	color: #fff;
	background: #00BCD4;
	box-shadow: 10px 20px 30px rgba(0, 0, 0, .2);
}
.simulation-intro .start a:hover {
	box-shadow: none;
}

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

	.simulation-intro {
		padding: 25px 0 10px;
	}
	.simulation-intro .txt-area .basic-txt {
	}
	
	.simulation-intro .start {
		margin: 30px 0 0;
	}
	
}

#mainContents a,
#mainContents a:link,
#mainContents a:visited {
	transition: normal;
}
#mainContents a:hover {
	transition: normal;
}


/* -----------------------------------------------------------
    formエリア
-------------------------------------------------------------- */
.result-area{
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin: -30px 0 30px;
}
.result-area .txt-area{
	width: calc(100% - 200px);
	color: var(--navy);
	font-size: 1.8rem;
	font-weight: bold;
	line-height: 1.5;
}
.result-area .img-area{
	width: 150px;
}


@media screen and (max-width: 768px){
	
	.result-area{
		margin: 10px 0 20px;
	}
	.result-area .txt-area{
		width: calc(100% - 120px);
	}
	.result-area .img-area{
		width: 100px;
	}
	
	/*form*/
	#form .form_table.wide th {
		padding: 30px 0 15px 0;
	  }
	#form .form_table.wide td {
		padding: 0 0 30px;
	}
	
}

/* -----------------------------------------------------------
    Q3 「その他」
-------------------------------------------------------------- */
#form .other {
	position: relative;
    display: -moz-inline-stack;
    display: block;
    vertical-align: middle;
    zoom: 1;
    border-radius: 6px;
    box-shadow: 0 4px #DCE5ED;
    border: solid 2px #0CB6E4;
    margin-bottom: 23px;
    text-decoration: none;
	cursor: pointer;
}

#form .other span {
    display: table-cell;
    padding: 20px;
    font-size: 2rem;
    line-height: 1.4;
    font-weight: bold;
    color: #333;
    text-decoration: none;
}

#nextQuestionBtn a {
	width: 200px;
	padding: 10px 0;
	cursor: pointer;
	background: #0CB6E4;
	color: #fff;
	font-size: 1.8rem;
	font-weight: 600;
	border-radius: 100px !important;
	margin: 10px 0 0 0 ;
}

@media screen and (max-width: 768px){
	#nextQuestionBtn {
		margin: 0 auto;
		
	}
	#nextQuestionBtn a {
		margin: 15px auto;
		
	}
}