#diagnosis {
  font-family: 'Noto Sans JP', sans-serif;
}
#pagePath {
  margin-top: 0;
}
.mainVisual02 {
	margin-bottom: 0;
}
/*------------------------------------------------------------
diagnosis
------------------------------------------------------------*/
.diagnosisBox {
	padding: 50px 0;
	background-color: #effafc;
}
.read {
	text-align: center;
	font-size: 2.5rem;
	font-weight: bold;
	padding: 15px;
	margin-bottom: 20px;
	color: #23b3d3;
}
.question {
	display: none;
      opacity: 0;
      transition: all 0.9s ease;
	background-color: #fff;
	border-radius: 10px;
	padding: 30px;
	box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}
.question.active {
      display: block;
      opacity: 1;
}
.question .q-text {
	font-size: 2rem;
	color: #23b3d3;
	border-bottom: solid 1px #23b3d3;
	padding-bottom: 5px;
	margin-bottom: 15px;
}
.question .btnBox {
	display: flex;
	flex-flow: wrap;
	justify-content: space-between;
}
.question .btnBox .qBtn {
	width: 48%;
	margin-bottom: 15px;
	padding: 15px 10px;
	cursor: pointer;
	font-size: 1.8rem;
	border: solid 2px;
	border-radius: 10px;
	background-color: #fff;
}
.question .btnBox .qBtn:active {
      transform: scale(0.98);
    }
.question .btnBox .qBtn.btnA {border-color: #ff931e;color: #ff931e;}
.question .btnBox .qBtn.btnB {border-color: #7ac943;color: #7ac943;}
.question .btnBox .qBtn.btnC {border-color: #3fa9f5;color: #3fa9f5;}
.question .btnBox .qBtn.btnD {border-color: #ff7bac;color: #ff7bac;}
.question .btnBox .qBtn.btnE {border-color: #a37ec3;color: #a37ec3;}
.question .btnBox .qBtn.btnF {border-color: #3273ce;color: #3273ce;}
.question .btnBox .qBtn.btnG {border-color: #46b998;color: #46b998;}

.question .btnBox .qBtn.btnA:hover {background-color: #fff0cf;}
.question .btnBox .qBtn.btnB:hover {background-color: #f3fad3;}
.question .btnBox .qBtn.btnC:hover {background-color: #ddf0fd;}
.question .btnBox .qBtn.btnD:hover {background-color: #ffeaf2;}
.question .btnBox .qBtn.btnE:hover {background-color: #ede6f4;}
.question .btnBox .qBtn.btnF:hover {background-color: #d6e3f5;}
.question .btnBox .qBtn.btnG:hover {background-color: #dcf2eb;}

.backBtn {
	border: none;
	background: none;
	margin: 15px 0 0;
	cursor: pointer;
	color: #23b3d3;
	font-size: 1.5rem;
}

.result {
	display: none;
      opacity: 0;
      transition: all 0.4s ease;
	animation: fadeIn 1.3s forwards;
}
.result .inner {
	background-color: #fff;
	border-radius: 10px;
	padding: 20px;
	box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}
.result .textImg {
	width: 530px;
	margin: 20px auto;
}
.restartBtn {
	display: block;
	border: none;
	background: none;
	text-align: center;
	margin: 20px auto;
	cursor: pointer;
	color: #23b3d3;
	font-size: 1.5rem;
}
.result .courseBox {
	padding: 20px 10px;
	display: flex;
	flex-flow: column;
	align-items: center;
	background-color: #fdf2f0;
}
.result .courseBox.ado {background-color: #fdf3ec;}
.result .courseBox.fro {background-color: #fdf2f5;}
.result .courseBox.nur {background-color: #f1f9f9;}
.result .courseBox.inf {background-color: #f4f9f0;}
.result .courseBox.it {background-color: #f0f8f5;}
.result .courseBox.mc {background-color: #edf9fb;}
.result .courseBox.des {background-color: #f6f2f8;}
.result .courseBox.man {background-color: #eef1f8;}

.result .courseBox h3 {
	width: 100%;
	text-align: center;
	font-size: 3.8rem;
	margin-bottom: 15px;
	color: #ed7969;
	background: url("../images/diagnosis/bg01L.png") no-repeat center left/contain, url("../images/diagnosis/bg01R.png") no-repeat center right/contain;
}
.result .courseBox.ado h3 {
	color: #f0843f;
	background: url("../images/diagnosis/bg02L.png") no-repeat center left/contain, url("../images/diagnosis/bg02R.png") no-repeat center right/contain;
}
.result .courseBox.fro h3 {
	color: #ed7a9b;
	background: url("../images/diagnosis/bg03L.png") no-repeat center left/contain, url("../images/diagnosis/bg03R.png") no-repeat center right/contain;
}
.result .courseBox.nur h3 {
	color: #4eb7ba;
	background: url("../images/diagnosis/bg04L.png") no-repeat center left/contain, url("../images/diagnosis/bg04R.png") no-repeat center right/contain;
}
.result .courseBox.inf h3 {
	color: #8dc16b;
	background: url("../images/diagnosis/bg05L.png") no-repeat center left/contain, url("../images/diagnosis/bg05R.png") no-repeat center right/contain;
}
.result .courseBox.it h3 {
	color: #45a97f;
	background: url("../images/diagnosis/bg06L.png") no-repeat center left/contain, url("../images/diagnosis/bg06R.png") no-repeat center right/contain;
}
.result .courseBox.mc h3 {
	color: #23b3d3;
	background: url("../images/diagnosis/bg07L.png") no-repeat center left/contain, url("../images/diagnosis/bg07R.png") no-repeat center right/contain;
}
.result .courseBox.des h3 {
	color: #a67eb7;
	background: url("../images/diagnosis/bg08L.png") no-repeat center left/contain, url("../images/diagnosis/bg08R.png") no-repeat center right/contain;
}
.result .courseBox.man h3 {
	color: #5976ba;
	background: url("../images/diagnosis/bg09L.png") no-repeat center left/contain, url("../images/diagnosis/bg09R.png") no-repeat center right/contain;
}

.result .courseBox p {
	max-width: 600px;
	font-size: 2rem;
}
.result .courseBox p.p-ssm {
	margin-bottom: 10px;
	border-bottom: double 2px #ed7969;
}
.result .courseBox.ado p.p-ssm {border-color: #f0843f;}
.result .courseBox.fro p.p-ssm {border-color: #ed7a9b;}
.result .courseBox.nur p.p-ssm {border-color: #4eb7ba;}
.result .courseBox.inf p.p-ssm {border-color: #8dc16b;}
.result .courseBox.it p.p-ssm {border-color: #45a97f;}
.result .courseBox.mc p.p-ssm {border-color: #23b3d3;}
.result .courseBox.des p.p-ssm {border-color: #a67eb7;}
.result .courseBox.man p.p-ssm {border-color: #5976ba;}

.result .btn {
	text-align: center;
	/*margin: 25px 0;*/
}
.mt25 {margin-top: 25px;}
.result .btn a.btn01 {
	display: inline-block;
	padding: 20px 50px;
	border: solid 3px #fff;
	font-size: 2.5rem;
	font-family: "Zen Maru Gothic", serif;
	font-weight: 500;
	background-color: #e8456c;
	background-image: linear-gradient(90deg, #e8456c, #ec6d67);
	color: #fff;
	box-shadow: 0 2px 8px rgba(0,0,0,0.1);
	border-radius: 50px;
	margin-bottom: 15px;
	position: relative;
}
.result .btn a.btn01::after {
  width: 12px;
  height: 18px;
  position: absolute;
  top: 50%;
  right: 15px;
  background: url("../../img/common/icon04.png") no-repeat left top / 100% 100%;
  content: "";
  transform: translateY(-50%);
}
.result .btn a.btn01:hover {
	background-image:none;
	background-color: #f086a0;
	border-color: #e8456c;
}
.result .text {
	font-size: 1.5rem;
}
.result .text .pink {
	color: #e8456c;
	font-weight: bold;
}
.result .btn a.btn02 {
	margin-top: 30px;
	color: #fff;
	display: inline-block;
	padding: 20px 50px;
	font-size: 1.8rem;
	border-radius: 50px;
	background-color: #ef8678;
	position: relative;
}
.result .btn.ado a.btn02 {background-color: #f19052;}
.result .btn.fro a.btn02 {background-color: #ee87a5;}
.result .btn.nur a.btn02 {background-color: #60bec1;}
.result .btn.inf a.btn02 {background-color: #99c77a;}
.result .btn.it a.btn02 {background-color: #57b28c;}
.result .btn.mc a.btn02 {background-color: #39bbd7;}
.result .btn.des a.btn02 {background-color: #af8bbe;}
.result .btn.man a.btn02 {background-color: #6984c1;}

.result .btn a.btn02::after {
  width: 10px;
  height: 15px;
  position: absolute;
  top: 50%;
  right: 13px;
  background: url("../../img/common/icon04.png") no-repeat left top / 100% 100%;
  content: "";
  transform: translateY(-50%);
}
.result .btn a.btn02:hover {
	opacity: 0.7;
}
.sp576 {display: none;}

@keyframes fadeIn {
      from {opacity: 0; transform: scale(0.95);}
      to {opacity: 1; transform: scale(1);}
    }
@media all and (max-width: 896px) {
	.result .textImg {
		width: 80%;
	max-width: 530px;
}
.result .courseBox h3 {
	font-size: 3rem;
}
	.result .btn a.btn01 {
		width: 80%;
	padding: 10px 20px;
	font-size: 1.8rem;
	}
	.result .btn a.btn02 {
	width: 400px;
	padding: 8px 20px;
	font-size: 1.5rem;
}
}
@media all and (max-width: 576px) {
	.sp576 {display: block;}
	.question .q-text {
	font-size: 1.7rem;
}
	.question .btnBox .qBtn {
	width: 48%;
	font-size: 1.6rem;
}
.result .courseBox h3 {
	font-size: 2.4rem;
}
	.result .courseBox p {
		font-size: 1.6rem;
	}
	.result .text {
	font-size: 1.23rem;
}
	.read {
	font-size: 2rem;
}
	.result .btn a.btn02 {
	width: 300px;
}
}
@media all and (max-width: 419px) {
	.question .btnBox .qBtn {
	width: 100%;
}
 .result .textImg {
		width: 88%;
}
	.result .courseBox h3 {
	font-size: 2.1rem;
		background: none;
		padding-bottom: 4px;
		border-bottom: dotted 2px;
}
	.result .courseBox.ado h3 {
	background: none;
}
.result .courseBox.fro h3 {
	background: none;
}
.result .courseBox.nur h3 {
	background: none;
}
.result .courseBox.inf h3 {
	background: none;
}
.result .courseBox.it h3 {
	background: none;
}
.result .courseBox.mc h3 {
	background: none;
}
.result .courseBox.des h3 {
	background: none;
}
.result .courseBox.man h3 {
	background: none;
}
	.result .btn a.btn02 {
	width: 230px;
}
}
@media all and (max-width: 374px) {

}