@charset"UTF-8";


/*==============================
	Common
==============================*/
#support-area { margin:50px auto; font-weight:500; }

#support-area a { position:relative; color:#3036ad; }
#support-area a { padding-right:.8em; }
#support-area a:after {
	position:relative;
	top:.1em;
	right:-.2em;
	content:'';
	display:inline-block;
}
#support-area a:not([target='_blank']):after,
#support-area a:not([onclick^='Link_']):after {
	width:.4em;
	height:.4em;
	border-top:1px solid;
	border-right:1px solid;
	transform:translate(-25%,-50%) rotate(45deg);
}
#support-area a[target='_blank']:after,
#support-area a[onclick^='Link_']:after {
	top:-.1em;
	width:.66em;
	height:.66em;
    background:url(/svg/i-link-ext_navy.svg) 100% / contain no-repeat;
	border:none;
	transform:none;
}

#support-area h1 { margin-bottom:2em; text-align:center; font-size:1.3em; }


/*==============================
	よくあるご質問
==============================*/
#faq-area.support { width:94%; max-width:800px; margin:0 auto; color:#444; }

#faq-area.support h2 { padding-top:1em; font-size:1.1em; }

#faq-area.support ul {
	display:flex;
	flex-wrap:wrap;
	justify-content:space-between;
	margin:0 auto 2em;
}
#faq-area.support li { width:calc(100%/4 - 2%); }
#faq-area.support li a {
	display:block;
	padding:.8em .4em;
	text-align:center;
	color:#444;
	background:#f1f1f1;
}

#faq-area.support dl { margin:0 auto 1em; }
#faq-area.support dt { margin:1em auto 0; padding:.5em; border:.2em solid #f1f1f1; }
#faq-area.support dd { padding:.6em .2em; line-height:1.5em; }
#faq-area.support dd b,
#faq-area.support dd strong { color:var(--text-red); }
#faq-area.support dd b { font-weight:500; }


/*PC*/
@media screen and (max-width:800px) {
#faq-area.support li { width:calc(100%/2 - 2%); }
#faq-area.support li:nth-of-type(n+3) { margin-top:1em; }
}

/*SP*/
@media screen and (max-width:640px) {
#faq-area.support { font-size:.9em; }
}
@media screen and (max-width:350px) {
#faq-area.support { font-size:.8em; }
}



/*==============================
	診断チャート
==============================*/
#diag-area { max-width:1000px; margin:6em auto; }
#diag-area > p {
	margin:4em auto;
	text-align:center;
	line-height:2em;
	word-break:keep-all;
	word-wrap:break-word;
}
#diag-area > p a { margin:0 .2em; color:#2d5d9a; border-bottom:1px solid; }
#diag-area > picture { display:block; max-width:800px; margin:auto; }
#diag-area > picture img { width:100%; }

/*h1*/
#diag-area h1 { margin-bottom:2em; text-align:center; font-size:1.3em; }

/*h2*/
#diag-area h2 {
	margin:4em 1em 2em;
	text-align:center;
	font-size:1.3em;
	line-height:1.6em;
	word-break:keep-all;
	word-wrap:break-word;
}
#diag-area h2 br { display:none; }
#diag-area .question h2 + p { margin-right:1em; text-align:right; font-size:.85em; }

/*ul*/
#diag-area ul { counter-reset:ques; }
#diag-area ul li { display:flex; justify-content:space-between; margin-top:3em; padding:4em 3em; background:#f1f1f1; }
#diag-area ul li p { width:14em; }
#diag-area ul li p:before { content:'Q'counter(ques)'.'; margin-right:.2em; counter-increment:ques; }
#diag-area ul li div { display:flex; justify-content:flex-start; width:calc(100% - 14em); }

/*label*/
#diag-area label { width:auto; line-height:1.4em; cursor:pointer; }
#diag-area label:nth-of-type(n+2) { margin-left:1em; }
#diag-area label img { display:block; width:100%; max-width:180px; margin-top:.4em; }
#diag-area label input[type="radio"] { position:absolute; top:0; left:0; opacity:0; }
#diag-area label > span { display:inline-block; }
#diag-area label input[type="radio"] + span { position:relative; padding-left:1.4em; }
#diag-area label input[type="radio"] + span:before {
    position:absolute;
    top:0;
    left:0;
    content:'';
    display:inline-block;
    width:1.2em;
    height:1.2em;
    background:transparent;
    border:2px solid #5c90d2;
    border-radius:5em;
    box-sizing:border-box;
    z-index:0;
}
#diag-area label input[type="radio"]:checked + span:before { border-width:.5em; transition:.2s; }

/*Button*/
#diag-area button {
	position:relative;
	bottom:3px;
	display:block;
	width:12em;
	margin:4em auto 1em;
	padding:.8em;
	text-align:center;
	font-size:1.1em;
	color:#fff;
	background:#5c90d2;
	border:none;
	border-bottom:3px solid #2d5d9a;
	border-radius:.2em;
	cursor:pointer;
}
#diag-area button:active { bottom:0; margin-bottom:3px; border-bottom:none; transition:.2s; }
#diag-area button p { font-weight:600; letter-spacing:2px; }

/*Result*/
#diag-area .result { display:none; margin:1em; padding:2em; border:.5em solid #dfedff; }
#diag-area .result h2 b { display:block; margin-top:.2em; font-size:1.4em; }


/*SP*/
@media screen and (max-width:767px) {
#diag-area { font-size:.9em; }
}

@media screen and (max-width:600px) {
#diag-area ul li { display:block; }
#diag-area ul li p { width:calc(100% - 2em); margin:0 auto 2em; padding-bottom:1em; text-align:center; border-bottom:1px dashed; }
#diag-area ul li div { width:100%; justify-content:center; }
}

@media screen and (max-width:450px) {
#diag-area ul li:nth-of-type(n+4) div { display:block; }
#diag-area ul li:nth-of-type(n+4) label { display:block; width:100%; }
#diag-area ul li:nth-of-type(n+4) label:nth-of-type(n+2) { margin:1em 0 0 0; }
}

@media screen and (max-width:400px) {
#diag-area > p { margin:3em 2em; text-align:left; word-break:normal; word-wrap:normal; }
#diag-area h2 br { display:block; }
#diag-area ul li { padding:4em 2em; }
}