main {
	background: url("../img/diagnosis/bg_top.png") no-repeat center top,url("../img/common/20_20.png") repeat;
	background-size: 1400px auto,auto;
	padding-bottom: 70px;
}
@media screen and (max-width: 800px) {
    main {
        background: url("../img/diagnosis/bg_top_sp.png") no-repeat center top,url("../img/common/20_20.png") repeat;
        background-size: 100% auto,auto;
    }
}
.mainWrap {
	max-width: 920px;
}
.mv {
	max-width: 800px;
	padding-top: 90px;
}
.topTxt {
	font-size: 16px;
	color: #42210b;
	line-height: 2.5;
	margin: 60px 0;
}
.starsWrap {
	background-color: #fff;
	border: 1px solid #05350a;
	border-radius: 60px;
	padding-bottom: 40px;
}
.starsFlex {
	display: flex;
	justify-content: center;
	gap: 6%;
}
.topStars {
	max-width: 470px;
	margin: -10px auto 35px;
}
.h3top {
	font-size: 20px;
	line-height: 1.2;
	margin-top: 15px;
}
.h3top small {
	font-size: 65%;
	display: block;
}
.chara1 {
	width: 96px;
}
.chara2 {
	width: 104px;
}
.chara3 {
	width: 96px;
}
.chara4 {
	width: 112px;
}
.chara5 {
	width: 144px;
}
@media screen and (max-width: 800px) {
    .topTxt {
        font-size: 14px;
        color: #42210b;
        line-height: 2.5;
        margin: 60px 0;
	}
    .starsWrap {
        border-radius: 40px;
    }
    .topStars {
        max-width: 91%;;
        margin: -30px auto 30px 0;
    }
    .starsFlex {
        flex-flow: wrap;
		gap: 5vw 6%;
    }
}
@media screen and (max-width: 500px) {
    .topTxt {
        margin: 7.5vw 0 10vw;
	}
    .starsWrap {
        border-radius: 7.5vw;
    }
    .topStars {
        max-width: 91%;;
        margin: -5vw auto 9vw 0;
    }
    .chara1 {
        width: 21vw;
    }
    .chara2 {
        width: 22.75vw;
    }
    .chara3 {
        width: 21vw;
    }
    .chara4 {
        width: 24.5vw;
    }
    .chara5 {
        width: 31.5vw;
    }
    .h3top {
        font-size: calc(100vw * 18 / 400);
    }
}
.btnStart {
	width: 420px;
	margin: 40px auto 0;
	position: relative;
}
.btnStart a {
	margin: auto;
	background-color: #05ab1e;
	color: #fff;
	display: block;
	padding: 15px 0;
	border-radius: 50px;
	border: 1px solid #42210b;
	font-size: 18px;
	transition: all .3s;
}
.btnStart a .arw {
	width: 28px;
	height: 28px;
	position: absolute;
	top: 50%;
	right: 17px;
	transform: translateY(-50%);
}
.btnStart a:hover {
	transform: translate(10px,10px);
}
.btnStart::before {
	content: '';
	width: 100%;
	height: 100%;
	background-color: #42210b;
	position: absolute;
	right: -10px;
	bottom: -10px;
	border-radius: 50px;
	z-index: 0;
}
@media screen and (max-width: 500px) {
    .btnStart {
        width: 100%;
        margin: 10vw auto 0;
    }
}
/*下層ページ*/
main.qCld {
	background: url("../img/common/20_20.png") repeat;
	padding-bottom: 70px;
}
@media screen and (max-width: 800px) {
}
.mainCld {
	padding: 140px 0 0;
}
.mainCldWrap {
	background-color: #fff;
	border: 1px solid #05350a;
	border-radius: 60px;
	padding: 30px 60px 0;
}
@media screen and (max-width: 800px) {
    .mainCldWrap {
        border-radius: 40px;
    }
}
@media screen and (max-width: 500px) {
    .mainCld {
        padding: 27.5vw 0 0;
    }
    .mainCldWrap {
        border-radius: 7.5vw;
		padding: 8vw 7% 0;
	}
}
.mainTop {
	display: flex;
	justify-content: center;
}
.toBack {
	position: absolute;
	left: 0;
	bottom: 0;
}
.toBack a {
	display: flex;
	align-items: center;
	gap: 10px;
	color: #a09085;
	font-size: 14px;
}
.toBack a .icoBack {
	width: 17px;
}
.imgTtl {
	width: 450px;
}
@media screen and (max-width: 800px) {
    .mainTop {
        flex-direction: column-reverse;
		align-items: center;
    }
    .toBack {
        position: relative;
        left: auto;
        bottom: auto;
		margin-right: auto;
		margin-top: 15px;
    }
	.imgTtl {
        width: 400px;
    }
}
@media screen and (max-width: 500px) {
	.imgTtl {
        width: 50vw;
    }
}
.qNum {
	font-size: 32px;
	margin: 60px auto 40px;
	width: 80px;
    height: 80px;
    background-color: #05ab1e;
	color: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.qTxt {
	font-size: 26px;
	color: #42210b;
	line-height: 1.4;
}
.aBtn {
	display: flex;
	justify-content: center;
	gap: 30px;
	margin: 40px 0 90px;
}
.aBtn a,
.aBtn button {
	width: 300px;
	display: block;
	padding: 15px;
	font-size: 18px;
	transition: all .3s;
	color: #42210b;
	background-color: #fff;
	border: 1px solid #42210b;
	border-radius: 100px;
	appearance: none;
	-webkit-appearance: none;
	font-family: inherit;
	line-height: inherit;
	cursor: pointer;
	text-align: center;
}
.aBtn a:hover,
.aBtn button:hover,
.aBtn button.is-selected,
.aBtn button:focus-visible {
	color: #fff;
	background-color: #05ab1e;
	border: 1px solid #05ab1e;
}
.aBtn button:focus-visible {
	outline: 2px solid #05350a;
	outline-offset: 3px;
}
.diagnosisQuizView[hidden],
.diagnosisTopView[hidden],
.qStep[hidden] {
	display: none;
}
.qNum:focus {
	outline: none;
}
.qTxtBtm {
	font-size: 16px;
	color: #42210b;
}
.progressBar {
	width: 100%;
	max-width: 800px;
	height: 12px;
	border-radius: 50px;
	background-color: #f5f1e7;
	margin: auto;
}
.progressBar span {
	position: absolute;
	top: 0;
	left: 0;
	height: 12px;
	border-radius: 50px;
	background-color: #05ab1e;
}
.progressBar span.q1 {
	width: calc(100% / 10);
}
.progressBar span.q2 {
	width: calc(100% / 10 * 2);
}
.progressBar span.q3 {
	width: calc(100% / 10 * 3);
}
.progressBar span.q4 {
	width: calc(100% / 10 * 4);
}
.progressBar span.q5 {
	width: calc(100% / 10 * 5);
}
.progressBar span.q6 {
	width: calc(100% / 10 * 6);
}
.progressBar span.q7 {
	width: calc(100% / 10 * 7);
}
.progressBar span.q8 {
	width: calc(100% / 10 * 8);
}
.progressBar span.q9 {
	width: calc(100% / 10 * 9);
}
.progressBar span.q10 {
	width: calc(100% / 10 * 10);
}
.bgYanoken {
	margin-top: 20px;
	width: 470px;
	margin-left: auto;
}
@media screen and (max-width: 768px) {
	.aBtn {
		flex-direction: column;
	}
    .aBtn a,
    .aBtn button {
        width: 100%;
    }
    .bgYanoken {
        width: 100%;
    }
}
@media screen and (max-width: 500px) {
    .qNum {
        font-size: calc(100vw * 28 / 400);
        margin: 20px auto 20px;
        width: 70px;
        height: 70px;
    }
	.qTxt {
		font-size: calc(100vw * 22 / 400);
	}
	.aBtn {
		gap: 2.5vw;
		margin: 7.5vw 0 12.5vw;
	}
    .aBtn a,
    .aBtn button {
        font-size: calc(100vw * 18 / 400);
		padding: 10px;
    }
	.qTxtBtm {
		font-size: calc(100vw * 16 / 400);
	}
}
.btnToTop a {
	width: 420px;
	margin: 40px auto 0;
	background-color: #42210b;
	color: #fff;
	display: block;
	padding: 15px 0;
	border-radius: 50px;
	font-size: 18px;
	transition: all .3s;
}
.btnToTop a .arw {
	width: 28px;
	height: 28px;
	position: absolute;
	top: 50%;
	left: 17px;
	transform: translateY(-50%);
}
@media screen and (max-width: 500px) {
    .btnToTop a {
        width: 100%;
        margin: 10vw auto 0;
    }
}
/*　診断結果ページ　*/
main.result {
	background: url("../img/common/20_20.png") repeat;
	padding-bottom: 0;
}
@media screen and (max-width: 800px) {
}
.mainResult {
	max-width: 1040px;
	padding-top: 150px;
	padding-bottom: 120px;
}
.ttlResult {
	font-size: 26px;
	color: #42210b;
	line-height: 1.4;
	padding-bottom: 80px;
}
@media screen and (max-width: 500px) {
    .mainResult {
        padding-top: 30vw;
		padding-bottom: 25vw;
    }
    .ttlResult {
        font-size: calc(100vw * 22 / 400);
		padding-bottom: 10vw;
    }
}
.resultFlex {
	display: flex;
	justify-content: space-between;
	align-items: center;
}
.resultLeft {
	width: 62%;
}
.archie .resultRight {
	width: 26%;
}
.engie .resultRight {
	width: 28%;
}
.daza .resultRight {
	width: 26%;
}
.jefty .resultRight {
	width: 30%;
}
.trans .resultRight {
	width: 33%;
}
.resultTxt1 {
	font-size: 30px;
	background-color: #05ab1e;
	width: fit-content;
	line-height: 1.4;
	border-radius: 100px;
	padding: 0.5rem 60px;
	margin: auto;
}
.archie .resultTxt1 {
	color: #fdf400;
}
.engie .resultTxt1 {
	color: #ebd493;
}
.daza .resultTxt1 {
	color: #fdd256;
}
.jefty .resultTxt1 {
	color: #d5ed3b;
}
.trans .resultTxt1 {
	color: #d9ebc0;
}
.h3result {
	font-size: 54px;
	color: #42210b;
	margin-bottom: 20px;
}
.h3result small {
	font-size: 40px;
}
.resultTxt2 {
	font-size: 18px;
	color: #42210b;
	line-height: 2;
	border-bottom: 1px solid #42210b;
	padding-bottom: 40px;
	margin-bottom: 40px;
}
.topPicks {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 2rem;
}
.resultTxt3 {
	font-size: 24px;
}
.resultTxt4 {
	font-size: 42px;
	line-height: 1.4;
	color: #42210b;
}
.mainResult .btnStart {
	margin: 30px auto 0;
}
.illustChara {
}
.archie .illustChara {
	/*width: 270px;*/
}
.h4result {
	font-size: 40px;
	line-height: 1.2;
	margin: 25px 0 10px;
	white-space: nowrap;
}
.h4result small {
	font-size: 26px;
}
.resultTxt5 {
	font-size: 20px;
	color: #42210b;
	line-height: 1.4;
}
.br960 {
	display: none;
}
.br1130 {
	display: none;
}
@media screen and (max-width: 1130px) {
    .br1130 {
        display: block;
    }
}
@media screen and (max-width: 1050px) {
    .h4result small {
        display: block;
    }
}
@media screen and (max-width: 990px) {
    .br960 {
        display: block;
    }
}
@media screen and (max-width: 800px) {
    .resultFlex {
        flex-direction: column;
    }
    .resultLeft {
        width: 100%;
    }
	.resultRight {
		display: flex;
		align-items: center;
		justify-content: center;
		margin-bottom: 20px;
    }
    .archie .resultRight,.engie .resultRight,.daza .resultRight,.jefty .resultRight,.trans .resultRight {
        width: 100%;
    }
    .h3result {
        margin-bottom: 0;
        font-size: 50px;
    }
    .h3result small {
        font-size: 36px;
    }
	.illustChara {
		width: 35%;
	}
    .h4result small {
        display: inline;
    }
    .br960 {
        display: none;
    }
}
@media screen and (max-width: 650px) {
    .daza .h3result {
		line-height: 1.2;
		margin-top: 20px
    }
    .daza .h3result small {
        display: block
    }
}
@media screen and (max-width: 500px) {
	.resultRight {
		justify-content: space-between;
    }
    .resultTxt1 {
        font-size: calc(100vw * 25 / 400);
		padding-left: 0;
		padding-right: 0;
		width: 100%;
		text-align: center;
    }
    .h3result {
        font-size: calc(100vw * 40 / 400);
    }
    .h3result small {
        font-size: calc(100vw * 28 / 400);
    }
    .br960 {
        display: block;
    }
	.resultTxt2 {
		font-size: calc(100vw * 16 / 400);
        padding-bottom: 10vw;
        margin-bottom: 10vw;
	}
    .topPicks {
        flex-direction: column;
        gap: 0;
    }
	.resultTxt3 {
		font-size: calc(100vw * 22 / 400);
	}
	.resultTxt4 {
		font-size: calc(100vw * 36 / 400);
	}
	.illustChara {
		width: 48%;
	}
    .h4result {
        font-size: calc(100vw * 40 / 400);
    }
    .h4result small {
		font-size: calc(100vw * 26 / 400);
        display: block;
    }
	.resultTxt5 {
		font-size: calc(100vw * 18 / 400);
	}
}
.resultBtm {
	padding: 100px 0 40px;
	background-color: #fff;
}
.resultTxt6 {
	font-size: 18px;
	color: #05350a;
}
.btnToOurWorks a {
	width: 420px;
	margin: 50px auto 0;
	background-color: #fff;
	color: #05350a;
	display: block;
	padding: 15px 0;
	border-radius: 50px;
	font-size: 18px;
	border: 1px solid #05350a;
	transition: all .3s;
}
.btnToOurWorks a .arw {
	width: 28px;
	height: 28px;
	position: absolute;
	top: 50%;
	right: 17px;
	transform: translateY(-50%) rotate(180deg);
}
@media screen and (max-width: 500px) {
    .resultBtm {
        padding: 17vw 0 5vw;
    }
    .resultTxt6 {
        font-size: calc(100vw * 16 / 400);
    }
    .btnToOurWorks a {
        width: 100%;
        margin: 12vw auto 0;
		line-height: 1.3;
    }
}