/* スタイルリセット */
#diagnosis p{
	margin-bottom: initial;
}
#diagnosis dt{
	font-weight: initial;
}
#diagnosis dd{
	margin: initial;
}
#diagnosis ul{
	margin: initial;
}
#diagnosis fieldset{
	margin: initial;
	padding: initial;
	border: initial;
}

/************ 基本設定 ****************************************************************/
#content{
	position: relative;
}
.page.page-id-31808 #content:before{
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	height: 53px;
	background-color: #F5EDA2;
}
.ast-container{
	flex-direction: column;
	padding-left: 0;
	padding-right: 0;
}
.ast-container .wrapper{
	max-width: 900px;
	width: 100%;
	margin: auto;
	padding-left: 25px;
	padding-right: 25px;
}
.page.page-id-31808 .ast-container .wrapper{
	max-width: 940px;
}
#diagnosis{
	font-family: "ryo-gothic-plusn", Sans-serif;
/* font-family: "dnp-shuei-gothic-kin-std", Sans-serif; */
	font-size: 18px;
}
.page.page-id-31808 #diagnosis{
	padding-top: 200px;
}
.page.page-id-31808 #diagnosis:before{
	content: "";
	position: absolute;
	top: 30px;
	left: calc(50% - 250px);
	width: 500px;
	aspect-ratio: 3/1;
	background: url('result_top.svg') no-repeat;
	background-size: 100%;
}

/************ 診断フォーム ****************************************************************/
#diagnosis .form{
	padding-top: 100px;
	padding-bottom: 150px;
}
#diagnosis .form header h1{
	margin-bottom: 20px;
	padding: 13px;
	border: 1px solid #3F3F3F;
	border-radius: 4px;
	text-align: center;
	font-size: 223%;
	line-height: 1.25em;
	font-weight: bold;
}
#diagnosis .form header p.comment{
	font-size: 108%;
	font-weight: bold;
	line-height: 1.8em;
}
#diagnosis .form header p.comment span{
	font-size: 82%;
	font-weight: initial;
}
#diagnosis .form main{
	margin-top: 100px;
}
#diagnosis .form main h2{
	position: relative;
	margin-bottom: 100px;
	padding: 25px 60px;
	background-color: #E2EB6B;
	border-radius: 15px;
	font-size: 105%;
	line-height: 1.75em;
	font-weight: bold;
}
#diagnosis .form main h2:after{
	content: "";
	position: absolute;
	left: calc(50% - 34px);
	bottom: -48px;
	display: flex;
	width: 0;
	height: 0;
	border-left: 22px solid transparent;
	border-right: 22px solid transparent;
	border-top: 34px solid #E2EB6B;
}
#diagnosis .form main section.question{
	
}
#diagnosis .form main section.question + section.question{
	margin-top: 70px;
}
#diagnosis .form main section.question h3{
	margin-bottom: 35px;
	padding: 8px 20px;
	background-color: #D8E3E8;
	border-radius: 3px;
	font-size: 111%;
	color: #50646D;
}
#diagnosis .form main section.question fieldset{
	display: flex;
	gap: 25px;
}
#diagnosis .form main section.question fieldset + fieldset{
	margin-top: 25px;
	padding-top: 25px;
	border-top: 1px solid #BEBEBE;
}
#diagnosis .form main section.question .number{
	width: 7.25%;
	min-width: 50px;
}
#diagnosis .form main section.question .number span{
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100%;
	aspect-ratio: 1/1;
	background-color: #C2D7E1;
	border-radius: 50%;
	font-size: 135%;
	font-weight: bold;
}
#diagnosis .form main section.question dl{
	flex: 1;
}
#diagnosis .form main section.question dl dt{
	font-size: 115%;
	line-height: 1.5em;
	font-weight: bold;
}
#diagnosis .form main section.question dl dd{
	display: flex;
	gap: 10px;
	flex-direction: column;
	margin-top: 20px;
}
#diagnosis .form main section.question label{
	max-width: 200px;
	padding: 10px 20px;
	background-color: #E9E9E9;
	border-radius: 8px;
	font-size: 80%;
}
#diagnosis .form main section.question label span{
	margin-left: 5px;
}
#diagnosis .form main section.action{
	display: flex;
	justify-content: center;
	gap: 25px;
	margin-top: 100px;
}
#diagnosis .form main section.action a{
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
	width: 229px;
	height: 50px;
	background-color: #000;
	border-radius: 25px;
	text-align: center;
	color: #fff;
	transition: all 0.75s;
}
#diagnosis .form main section.action a:hover{
	background-color: #A48D32;
}
#diagnosis .form main section.action a:after{
	content: "→";
	position: absolute;
	right: 25px;
	font-weight: bold;
}

/************ 診断結果 ****************************************************************/
#diagnosis .result{
	padding-top: 75px;
}
#diagnosis .result header{
	display: flex;
	justify-content: center;
	margin-bottom: 75px;
}
#diagnosis .result header h1{
	font-size: 265%;
	line-height: 1.25em;
	font-weight: bold;
}
#diagnosis .result header h1 span{
	display: block;
	font-size: 66.6666%;
}
#diagnosis .result main{
	
}
#diagnosis .result main section.overall{
	margin-bottom: 60px;
	border-bottom: 1px solid #000;
	padding-bottom: 40px;
}
#diagnosis .result main section.overall h2{
	margin-bottom: 40px;
	padding: 8px 24px;
	background-color: #E2EB6B;
	border-radius: 10px;
	font-size: 100%;
}
#diagnosis .result main section.overall .graph{
	display: flex;
	flex-direction: column;
}
#diagnosis .result main section.overall .graph .number{
	display: flex;
	justify-content: center;
	margin-bottom: 10px;
}
#diagnosis .result main section.overall .graph .number ul{
	display: flex;
	width: 60%;
	justify-content: space-between;
}
#diagnosis .result main section.overall .graph .number ul li{
	list-style: none;
	font-size: 90%;
}
#diagnosis .result main section.overall .graph .line{
	display: flex;
}
#diagnosis .result main section.overall .graph .line .title{
	display: flex;
	align-items: center;
	justify-content: right;
	width: 20%;
	padding-right: 20px;
	font-size: 90%;
	font-weight: bold;
}
#diagnosis .result main section.overall .graph .line .column{
	display: flex;
	align-items: center;
	justify-content: right;
	width: 20%;
	padding-right: 20px;
	font-size: 80%;
	line-height: 1.25em;
	text-align: center;
}
#diagnosis .result main section.overall .graph .line ul{
	display: flex;
	width: 60%;
	border-left: 1px solid #8E8E8E;
	border-right: 1px solid #8E8E8E;
}
#diagnosis .result main section.overall .graph .line:nth-of-type(2) ul{
	border-top: 1px solid #8E8E8E;;
}
#diagnosis .result main section.overall .graph .line:nth-of-type(5) ul{
	border-bottom: 1px solid #8E8E8E;;
}
#diagnosis .result main section.overall .graph .line ul li{
	flex: 1;
	display: flex;
	align-items: center;
	min-height: 80px;
	border: 1px solid #8E8E8E;
	list-style: none;
}
#diagnosis .result main section.overall .graph .line ul li.on:before,
#diagnosis .result main section.overall .graph .line ul.zero li:first-child:before{
	content: "";
	color: #000;
	display: block;
	height: 15px;
	margin-right: -10px;
	margin-left: -10px;
	border-radius: 25px;
	background-color: #F44519;
	z-index: 1;
}
#diagnosis .result main section.overall .graph .line ul li.on:before{
	flex: 1;
}
#diagnosis .result main section.overall .graph .line ul.zero li:first-child:before{
	width: 20px;
}
#diagnosis .result main section.overall .graph .line:nth-of-type(2) ul li:nth-child(-n+2){ background-color: #F6D8BE80; }
#diagnosis .result main section.overall .graph .line:nth-of-type(2) ul li:nth-child(n+3){ background-color: #F6D8BE; }
#diagnosis .result main section.overall .graph .line:nth-of-type(3) ul li:nth-child(-n+2){ background-color: #F1E3B980; }
#diagnosis .result main section.overall .graph .line:nth-of-type(3) ul li:nth-child(n+3){ background-color: #F1E3B9; }
#diagnosis .result main section.overall .graph .line:nth-of-type(4) ul li:nth-child(-n+2){ background-color: #D2F4BA80; }
#diagnosis .result main section.overall .graph .line:nth-of-type(4) ul li:nth-child(n+3){ background-color: #D2F4BA; }
#diagnosis .result main section.overall .graph .line:nth-of-type(5) ul li:nth-child(-n+2){ background-color: #BBF2E580; }
#diagnosis .result main section.overall .graph .line:nth-of-type(5) ul li:nth-child(n+3){ background-color: #BBF2E5; }
#diagnosis .result main section.overall .legend{
	margin-top: 40px;
	margin-bottom: 50px;
	text-align: center;
}
#diagnosis .result main section.overall .legend ul{
	display: inline-block;
}
#diagnosis .result main section.overall .legend ul li{
	display: inline-block;
	list-style: none;
	margin-left: 23px;
}
#diagnosis .result main section.overall h3{
	margin-bottom: 20px;
	font-size: 155%;
	font-weight: bold;
}
#diagnosis .result main section.overall p.comment{
	line-height: 2em;
}
#diagnosis .result main section.question + section.question{
	margin-top: 50px;
}
#diagnosis .result main section.question + section.question:before{
	content: "";
	display: flex;
	height: 39px;
	margin-bottom: 50px;
	background: url('arrow.svg') no-repeat;
}
#diagnosis .result main section.question h3{
	display: flex;
	gap: 20px;
	align-items: center;
	margin-bottom: 30px;
	font-size: 18px;
}
#diagnosis .result main section.question h3:before{
	content: "";
	display: block;
	width: 19px;
	height: 40px;
	background-color: #C2CF1C;
	border-radius: 4px;
}
#diagnosis .result main section.question img{
	display: none;
	width: 58%;
	max-width: 250px;
	margin: 0 auto 20px;
}
#diagnosis .result main section.question p.answer{
	margin-bottom: 20px;
	font-size: 89.5%;
}
#diagnosis .result main section.question p.comment{
	font-size: 89.5%;
	line-height: 2em;
}
#diagnosis .result main section.entry{
	position: relative;
	margin-top: 100px;
	padding: 70px 0 50px;
	border-top: 11px solid #D6E22B;
	border-bottom: 11px solid #D6E22B;
}
#diagnosis .result main section.entry:before{
	content: "";
	position: absolute;
	top: 15px;
	right: 100px;
	display: block;
	aspect-ratio: 1/1;
	width: 240px;
	background: url('report.svg') no-repeat;
	background-size: 100%;
}
#diagnosis .result main section.entry h3{
	display: inline-block;
	margin-bottom: 30px;
	padding: 15px 20px;
	background-color: #889200;
	border-radius: 10px;
	font-size: 125%;
	color: #fff;
}
#diagnosis .result main section.entry p{
	margin-bottom: 30px;
	font-weight: bold;
	line-height: 1.75em;
}
#diagnosis .result main section.entry ul{
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	gap: 30px;
	margin: 0;
}
#diagnosis .result main section.entry ul li{
	display: flex;
	align-items: flex-end;
	gap: 10px;
	width: calc((100% - 30px) / 2);
	list-style: none;
}
#diagnosis .result main section.entry fieldset{
	display: flex;
	flex-direction: column;
	gap: 7px;
	width: 100%;
}
#diagnosis .result main section.entry fieldset label{
	font-size: 90%;
}
#diagnosis .result main section.entry fieldset input[type='text'],
#diagnosis .result main section.entry fieldset input[type='email']{
	width: 100%;
	background-color: #fff;
	border-color: #B3B3B3;
	border-radius: 6px;
}
#diagnosis .result main section.entry .action.action{
	display: flex;
	justify-content: center;
	gap: 25px;
	margin-top: 40px;
}
#diagnosis .result main section.entry .action.action a{
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
	width: 229px;
	height: 50px;
	background-color: #000;
	border-radius: 25px;
	text-align: center;
	color: #fff;
	transition: all 0.75s;
}
#diagnosis .result main section.entry .action.action a:hover{
	background-color: #A48D32;
}
#diagnosis .result main section.entry .action.action a:after{
	content: "→";
	position: absolute;
	right: 25px;
	font-weight: bold;
}

/* レスポンシブル対応 */
@media (max-width: 767px){
	
	/************ 基本設定 ****************************************************************/
	#diagnosis{
		font-size: 14px;
	}
	.ast-container .wrapper{
		padding-left: 20px;
		padding-right: 20px;
	}
	.page.page-id-31808 #diagnosis{
		padding-top: 120px;
	}
	.page.page-id-31808 #diagnosis:before{
		left: calc(50% - 150px);
		width: 300px;
	}
	
	/************ 診断フォーム ****************************************************************/
	#diagnosis .form{
		padding-top: 60px;
		padding-bottom: 60px;
	}
	#diagnosis .form header h1{
		font-size: 143%;
	}
	#diagnosis .form header p.comment br{
		display: none;
	}
	#diagnosis .form header p.comment span{
		display: block;
	}
	#diagnosis .form main h2{
		padding: 15px 30px;
	}
	#diagnosis .form main{
		margin-top: 50px;
	}
	#diagnosis .form main section.question + section.question{
		margin-top: 40px;
	}
	#diagnosis .form main section.question h3{
		margin-bottom: 25px;
	}
	#diagnosis .form main section.question fieldset{
		gap: 15px;
	}
	#diagnosis .form main section.question dl dt{
		font-size: 100%;
	}
	#diagnosis .form main section.question dl dt br{
		display: none;
	}
	#diagnosis .form main section.question .number{
		min-width: 39px;
	}
	#diagnosis .form main section.question .number span{
		font-size: 107%;
	}
	#diagnosis .form main section.question label{
		font-size: 100%;
	}
	#diagnosis .form main section.action{
		margin-top: 45px;
	}
	/************ 診断結果 ****************************************************************/
	
	#diagnosis .result{
		padding-top: 30px;
	}
	#diagnosis .result header{
		padding-left: 20px;
		padding-right: 20px;
		margin-bottom: 40px;
	}
	#diagnosis .result header h1{
		font-size: 180%;
	}
	#diagnosis .result main section.overall .graph .number{
		justify-content: right;
		margin-right: 8%;
	}
	#diagnosis .result main section.overall .graph .number ul{
		width: 75%;
	}
	#diagnosis .result main section.overall .graph .line{
		margin-left: -10px;
		margin-right: -10px;
	}
	#diagnosis .result main section.overall .graph .line .title{
		width: 25%;
		padding-right: 10px;
		font-size: 75%;
	}
	#diagnosis .result main section.overall .graph .line .column{
		width: 25%;
		padding-right: 10px;
		font-size: 75%;
	}
	#diagnosis .result main section.overall .graph .line ul{
		width: 65%;
	}
	
	#diagnosis .result main section.overall .legend{
		display: flex;
		gap: 10px;
		text-align: left;
	}
	#diagnosis .result main section.overall .legend ul li{
		display: block;
	}
	
	#diagnosis .result main section.question + section.question{
		margin-top: 30px;
	}
	#diagnosis .result main section.question + section.question:before{
		background-position-x: center;
		margin-bottom: 40px;
	}
	#diagnosis .result main section.question img{
		display: inherit;
	}
	
	#diagnosis .result main section.entry::before{
		content: none;
	}
	#diagnosis .result main section.entry ul li{
		width: 100%;
	}
}