@charset "UTF-8";

/* CSS Document */

/*===================================================
    各画面作成用CSS(スマホ)
===================================================*/


/*//////////////////////////////////////////////////
    iDeCo加入者診断ページ
///////////////////////////////////////////////////*/

/* --------------------------------------------------
    モーダルウインドウ
-------------------------------------------------- */
#diagnosis .modalContent {
	width: 90%;
}
#diagnosis .modalContent dl {
	padding: 25px 15px;
}
	#diagnosis .modalContent dl dd {
		font-size: 14px;
	}
		#diagnosis .modalContent dl dd ul li {
			padding-left: 15px;
		}
		#diagnosis .modalContent dl dd .modalClose {
			width: 100%;
		}

/* 質問画面
--------------------------------------*/
#diagnosis .questionBox {
	padding: 50px 15px 40px;
}
	#diagnosis .questionBox h2 {
		font-size: 15px;
	}
	#diagnosis .questionBox h2:before {
		top: -30px;
		width: 38px;
		height: 22px;
		background-size: 29px auto;
	}
	/* 二択 */
	#diagnosis .questionBox .twoChoices li {
		width: 48%;
	}
	#diagnosis .questionBox .twoChoices li + li {
		margin-left: 2%;
	}
		#diagnosis .questionBox .twoChoices li img {
			width: 100%;
		}
	/*三択 */
	#diagnosis .questionBox .threeChoices li {
		width: 48%;
	}
	#diagnosis .questionBox .threeChoices li,
	#diagnosis .questionBox .threeChoices li + li {
		margin: 0;
	}
	#diagnosis .questionBox .threeChoices li:first-child {
		margin:0 2% 0 0;
	}
	#diagnosis .questionBox .threeChoices li + li + li {
		margin: 25px 0 0 0;
	}
	/*四択 */
	#diagnosis .questionBox .fourChoices {
		margin: -20px 0 0 -1%;
	}
	#diagnosis .questionBox .fourChoices li,
	#diagnosis .questionBox .fourChoices li + li {
		width: 48%;
		margin: 20px 0 0 1%;
	}
		#diagnosis .questionBox .fourChoices li img {
			width: 80%;
		}
	#diagnosis .questionBox .buttonArea li img {
		margin-bottom: 2%;
	}

/* 結果画面
--------------------------------------*/
#diagnosis .resultBox {
	padding: 15px 15px 30px;
}
	#diagnosis .resultBox h2 + p {
		font-size: 18px;
	}
	#diagnosis .resultBox .detailBox > div {
		float: none;
		width: 100%;
		margin: 0 auto;
	}
		#diagnosis .resultBox .detailBox > div img {
			width: 220px;
		}
	#diagnosis .resultBox .detailBox > p {
		float: none;
		width: 100%;
		padding: 10px 15px;
	}
		#diagnosis .resultBox .detailBox > p em {
			font-size: 30px;
		}
		#diagnosis .resultBox .detailBox > p br {
			display: block;
		}
	#diagnosis .resultBox .buttonArea .requestDoc,
	#diagnosis .resultBox .buttonArea .moveSimulation {
		float: none;
	}
	#diagnosis .resultBox .buttonArea .moveSimulation {
		margin-top: 40px;
	}
	#diagnosis .resultBox .buttonArea .btnLink {
		width: 100%;
	}
	#diagnosis .resultBox .buttonArea .requestDoc .btnLink a:after {
		margin: 0 0 0 5px;
		width: 15px;
		height: 15px;
		background-size: contain;
	}

	/* 掛金の上限が2パターンあり、少ないほうが適用される場合 */
	#diagnosis .resultBox .detailBox .resultText__list {
		margin:0px;
	}

	#diagnosis .resultBox .detailBox .resultText__list div {
		text-align: left;
		padding: 10px 12px 10px 12px;
		background-color: #fff;
		border: 1px solid #D8DAE0;
		font-size: 12px;
		line-height: 1.5;
	}

/* ボタン設定
--------------------------------------*/
#diagnosis button {
	font-size: 14px;
	line-height: 45px;
}
#diagnosis .btnBack {
	margin: 20px 0 40px;
}

/* 設問1
--------------------------------------*/
#diagnosis #page1 .questionBox {
	margin-bottom: 50px;
}

/* 設問2
--------------------------------------*/
#diagnosis #page2 .note li:before {
	top: 4px;
}
#diagnosis .questionBox .jobList {
	margin-top: 25px;
}
	#diagnosis .questionBox .jobList li {
		display: block;
		width: 100%;
		margin-top: 0;
		padding-right: 0;
		font-size: 12px;
	}
	#diagnosis .questionBox .jobList li + li {
		margin: 1em 0 0 0;
	}

/* 設問3
--------------------------------------*/
#diagnosis #page3 .questionBox h2 + div > p {
	float: none;
	width: 100%;
}

/* 設問4
--------------------------------------*/
#diagnosis #page4 .questionBox ul {
	margin: -20px 0 25px 0;
}
	#diagnosis #page4 .questionBox ul li {
		display: block;
		margin: 20px 0 0 0;
	}
	#diagnosis #page4 .questionBox ul li:nth-child(-n+4),
	#diagnosis #page4 .questionBox ul li:last-child {
		width: 100%;
	}
		#diagnosis #page4 .questionBox ul li button {
			font-size: 14px;
		}
		#diagnosis #page4 .questionBox ul li:nth-child(2) br,
		#diagnosis #page4 .questionBox ul li:nth-child(3) br {
			display: block;
		}

		#diagnosis #page4 .questionBox ul li:nth-child(3) span {
			font-size: 12px;
		}
	#diagnosis #page4 .questionBox h2 + div > p {
		font-size: 12px;
	}

/* 設問5
--------------------------------------*/
#diagnosis #page5 .questionBox h2 + div {
	font-size: 12px;
}
#diagnosis #page5 .questionBox h2 + div div ul li:before {
	top: 4px;
}

/* 結果NG、結果どれに該当するかわからない
--------------------------------------*/
#diagnosis #pageUnavailable,
#diagnosis #pageUnknown {
	min-height: 0;
}