/*--------------------------
	style-index.css
--------------------------*/
.findOutWrap{position:relative;margin-top:3.2vw;padding-top:10.4vw;}
.findOut{
	position:absolute;
	top:0;
	width:40vw;
	margin-left:30vw;
	padding:2.4vw 0;
	background:var(--White);
	box-shadow:var(--BoxShadow);
	border-radius:var(--Radius);
	z-index:1;
}
.findOut > h2{margin-bottom:1.4vw;}
.findOut > h2 span{
	background-image:linear-gradient(to right, #0E9FEC 0%, #22AC38 100%);
	background-clip:text;
	-webkit-background-clip:text;
	-webkit-text-fill-color:transparent;
	color:transparent;
}
.findOut > input[type=text]{
	width:80%;
	padding:0.6vw;
	text-align:center;
	border:0.08vw solid var(--Black);
	border-radius:0.4vw;
}
.findOut > input[type=text]::placeholder{color:#AAA;}

.resultsWrap .faqArea{display:block;}
.resultsWrap .articleArea{display:none;}
.resultsWrap.active .faqArea{display:none;}
.resultsWrap.active .articleArea{display:block;}

.resultsWrap{
	width:76.8vw;
	margin-left:11.6vw;
	padding:2.4vw 4.2vw;
	background:var(--White);
	box-shadow:var(--BoxShadow);
	border-radius:var(--Radius);
}
.faqArea > div, .articleArea > div{max-height:16vw;overflow-y:auto;}

.resultsWrap h4{font-weight:normal;text-align:left;margin-bottom:0.4vw;color:#AAA;}
.resultsWrap ul{margin-left:1.2em;padding-right:1.6vw;text-align:left;list-style:disc;}
.resultsWrap ul li{padding:0.2vw 0;}
.resultsWrap ul li a{color:var(--Black);}
.resultsWrap ul li a span{color:var(--LinkBlue);}
.resultsWrap ul li a:hover{text-decoration:underline;opacity:0.6;}

.articleLinkList{display:flex;gap:1.6vw;width:76.8vw;margin-left:11.6vw;margin-top:4vw;}
.articleLinkList > div{box-sizing:border-box;width:18vw;text-align:left;}
.articleLinkList h3 > svg{width:2vw;height:2vw;vertical-align:-0.5vw;}
.articleLinkList > div:nth-child(1) h3 > svg{fill:var(--Green);}
.articleLinkList > div:nth-child(2) h3 > svg{fill:var(--Blue);}
.articleLinkList > div:nth-child(3) h3 > svg{fill:#F389BB;}
.articleLinkList > div:nth-child(4) h3 > svg{fill:#EEC200;}

.articleLinkList h3{font-weight:normal;padding-bottom:0.8vw;}
.articleLinkList h3 > *{display:inline-block;}
.articleLinkList h3 > p{text-align:left;}

.articleLinkList > div a{display:block;}
.articleLinkList > div a:hover{opacity:0.6;text-decoration:underline;}

.wordHint{margin-top:4vw;}
.wordHint > div{box-sizing:border-box;width:76.8vw;margin-left:11.6vw;padding:1.4vw;background:#F1F0EC;border-radius:1.6vw;}
.wordHint > h2{font-size:2vw;color:var(--Blue);font-weight:normal;}
.wordHint table td{text-align:left;padding:0.2vw 0 0.2vw 1.2vw;}
.wordHint table td:first-child{width:4.6vw;padding:0.2vw;text-align:center;background:var(--Blue);color:var(--White);}
.wordHint table tr:first-child td:first-child{background:var(--Green);}
.wordHint table td > label + label{margin-left:0.6vw;}
.wordHint table td > label:hover{color:var(--LinkBlue);text-decoration:underline;}