@charset "utf-8";


/* all
-------------------------------------------------------------------*/
body {
	font-family: 'Noto Sans JP',"メイリオ", Meiryo, MS PGothic,"Hiragino Kaku Gothic Pro", arial, sans-serif;
	height: 100%;
	width: 100%;
	display: flex;
    min-height: 100vh;
    flex-direction: column;
}
body * {
	box-sizing: border-box;
}

.sitewrap {
	width: 880px;
	min-width: 880px;
	overflow:hidden;
	margin: 0 auto;
	text-align: left;
	box-sizing: border-box;
	-webkit-box-sizing: border-box;
}

@media screen and (max-width:768px) {
	html {
		color:#000000;
		font-size:7.5px;
	}
	.sitewrap {
		width: 100%;
		min-width:0;
	}
}


/* contents
-------------------------------------------------------------------*/

main{
	display: block;
	font-size:1.2rem;
}

h1{
	background:#eeeeee;
	border-top:5px solid #34afc9;
	
}
h1 .sitewrap{
	font-size:1.85rem;
	letter-spacing:-0.03em;
	padding:1em 0;
	font-weight:500;
	color:#34afc9;
	line-height:1.2;
	text-align:center;
}
.lead{
	padding-bottom:90px;
	border-bottom:16px solid #7ecea2;
}
.lead h2{
	font-size:1.8rem;
	font-weight:500;
	margin:1.5em 0 1em;
	position: relative;
	padding-left:0.75em;
}
.lead h2:before{
	content:"";
	display:inline-block;
	vertical-align:middle;
	width:10px;
	height:1.25em;
	position: absolute;
	left:0;
	top:0;
	bottom:0;
	margin:auto;
	background:#b3d9e8;
}
.lead ul,
.answer_col ul{
	font-size:1.2rem;
	line-height:1.8;	
	margin-top:2em;
}
.lead ul li,
.answer_col ul li{
	position:relative;
	padding-left:1.25em;
	margin-bottom:0.5em;
	letter-spacing:-0.03em;
}
.lead ul li:before,
.answer_col ul li:before{
	content:"";
	display:inline-block;
	position:absolute;
	top:0.75em;
	left:0;
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 12px 8px 0 8px;
	border-color: #b3d9e8 transparent transparent transparent;
}
.indent_box{
	padding-left:60px;
}
.kagi{
	text-indent:-0.5em;
}
.texts p{
	font-size:1.2rem;
	line-height:1.8;
}
.qa h2{
	text-align:center;
	font-size:2.2rem;
	font-weight:600;
	margin:2.5em 0;
}
.qa .tit_q {
	position:relative;
	padding-left: 60px;
	padding-bottom:1em;
	line-height:1.8;
	border-bottom:#34afc9 solid 2px;
	margin-bottom: 1.5em;
}
.qa .tit_q strong{
	position:absolute;
	top:0;
	left:0;
	display:flex;
	align-items:center;
	justify-content:center;
	width:49px;
	height:49px;
	background:#3db5cf;
	border-radius:50%;
	color:#fff;
	font-size:1.6rem;
	font-weight:normal;
}
.qa .tit_q div{
	font-size:1.4rem;
	font-weight:500;
	letter-spacing:-0.03em;
}
.qa .tit_q i{
	display:block;
}
.qa .qa_list > li{
	margin-bottom:90px;
}
.qa .qa_list .texts{
	margin-bottom:2em;
}
.qa .qa_list .graph_col{
	display:flex;
	align-items:center;
	justify-content:space-between;
	letter-spacing:-0.03em;
}
.qa .qa_list .graph_col .data{
	max-width:65%;
}
.qa .qa_list .graph_col li + li{
	margin-top:0.75em;
}
.qa .qa_list .qa02 .graph_col{
	margin-top:75px;
}
.qa .qa_list .qa02 .graph_col li + li{
	margin-top:0.5em;
}
.qa .qa_list .graph_col.pie li{
	position:relative;
	padding-left:1.5em;
}
.qa .qa_list .graph_col.pie li:before{
	content:"";
	width:1em;
	height:1em;
	display:inline-block;
	position:absolute;
	top:0.25em;
	left:0;
	background:#3366cc;
	border-radius:50%;
}
.qa .qa_list .graph_col.pie li.c_blue:before{ background:#3366cc;}
.qa .qa_list .graph_col.pie li.c_red:before{ background:#dc3912;}
.qa .qa_list .graph_col.pie li.c_orange:before{ background:#ff9900;}
.qa .qa_list .graph_col.pie li.c_green:before{ background:#109618;}
.qa .qa_list .graph_col.pie li.c_purple:before{ background:#990099;}
.qa .qa_list .graph_col.pie li.c_cyan:before{ background:#0099c6;}
.qa .qa_list .graph_col.pie li.c_pink:before{ background:#dd4477;}
.qa .qa_list .graph_col.pie li.c_lime:before{ background:#66aa00;}
.qa .qa_list .graph_col.pie li.c_bordeaux:before{ background:#b82e2e;}
.qa .qa_list .graph_col.pie li.c_ironblue:before{ background:#316395;}
.qa .qa_list .graph_col.pie li.c_amethyst:before{ background:#994499;}
.qa .qa_list .graph_col.pie li.c_jadegreen:before{ background:#22aa99;}
.qa .qa_list .graph_col.pie li.c_elmgreen:before{ background:#aaaa11;}
.qa .qa_list .graph_col.pie li.c_pansy:before{ background:#6633cc;}

.qa .qa_list .graph_col.bar {
	justify-content:flex-start;
}
.qa .qa_list .graph_col.bar .data{
	text-align:right;
	padding-right:1em;
}
.qa .qa_list .graph_col.bar .data{
	display:flex;
	flex-direction:column;
	justify-content:space-between;
	min-height: 340px;
}
.qa .qa_list .graph_col.bar .data li{
	font-size:1.0rem;
	line-height:1.2;
	height:2.25em;
	display:flex;
	align-items: center;
	justify-content:flex-end;
}
.qa .qa_list .graph_col.bar .data li + li{
	margin:0;
}

.btn_wrap{
	margin:50px 0 0;
}
.btn_wrap a{
	background:#3db5cf;
	padding:10px;
	max-width:465px;
	display:block;
	font-size:2.2rem;
	color:#fff;
	margin:0 auto 2px;
	border-radius:10px;
	text-decoration:none;
	box-shadow:0 2px 8px 1px rgba(0,0,0,0.3);
	transition:transform .4s, box-shadow .4s; 
}
.btn_wrap a span{
	display:flex;
	align-items:center;
	justify-content:center;
	height:75px;
	font-weight:bold;
	background:#3db5cf;
	border:solid 2px #fff;
	border-radius:8px;
	position:relative;
	transition:background .4s,color .4s;
}
.btn_wrap a span:before,
.btn_wrap a span:after{
	content:"";
	display:inline-block;
	position:absolute;
	right:20px;
	top:0;
	bottom:0;
	margin:auto;
}
.btn_wrap a span:before{
	width:28px;
	height:28px;
	background:#fff;
	border-radius:50%;
	z-index:1;
	transition:background .4s
}
.btn_wrap a span:after{
	width:12px;
	height:12px;
	right:30px;
	border-top:solid 3px #3db5cf;
	border-right:solid 3px #3db5cf;
	transform:rotate(45deg);
	z-index: 5;
	box-sizing:border-box;
	transition:border .4s
}
.btn_wrap a:hover{
	transform:translateY(2px);
	box-shadow:0 0px 0px 0px rgba(0,0,0,0.3);
}
.btn_wrap a:hover span{
	background:#fff;
	color:#3db5cf;
}
.btn_wrap a:hover span:before{
	background:#3db5cf;
}
.btn_wrap a:hover span:after{
	border-color:#fff;
}
.overview{
	background:rgba(126,206,162,0.5);
	position:relative;
	padding-bottom:150px;
}
.overview:before{
	content:"";
	width:100%;
	height:270px;
	background:#fff;
	position:absolute;
	top:0;
	left:0;
	right:0;
	z-index:1;
}
.overview .box{
	position:relative;
	z-index:5;
	background:#fff;
	border:solid 2px #3db5cf;
	padding:30px 50px 50px;
	border-radius:30px;
	margin-bottom:90px;
}
.overview .box h2{
	font-size:2.8rem;
	font-weight:600;
	margin:0 0 1em;
	position: relative;
	text-align:center;
	padding-left:0.75em;
}
.overview .box > *:nth-child(n+2){
	margin-top:2.0em;
	line-height:1.8;
}
.text_link a{
	color:#2083f4;
	word-break:break-all;
}
.overview .end_banner{
	display:inline-block;
	background:#2083f4;
	margin-bottom:2px;
	box-shadow:0 2px 8px 1px rgba(0,0,0,0.2);
	transition:transform .4s, box-shadow .4s; 
}
.overview .end_banner:hover{
	transform:translateY(2px);
	box-shadow:0 0px 0px 0px rgba(0,0,0,0.2);	
}

/* footer
-------------------------------------------------------------------*/
#pageTop {
    position: fixed;
    bottom: 15px;
    right: 5%;
    width: 70px;
	height:70px;
    z-index: 500;
	display:flex;
	justify-content:center;
	align-items:center;
	flex-direction:column;
	background:#2083f4;
	border:solid 2px #2083f4;
	color:#fff;
	border-radius:50%;
	font-weight:bold;
	text-decoration:none;
	transition:transform .4s,background .4s, color .4s;	
}
#pageTop:before{
	content:"";
	display:inline-block;
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 0px 8px 12px 8px;
	border-color:  transparent transparent #fff transparent;
	margin-bottom:2px;
	transition:border-color .4s;
}
#pageTop:hover{
	transform:translateY(-2px);
	background:#fff;
	color:#2083f4;
}
#pageTop:hover:before{
	border-bottom-color:#2083f4;
}



@media screen and (max-width:768px) {
	h1 .sitewrap{
		font-size:3.0rem;
		padding:1em 15px;
	}
	.sitewrap > *{
		padding-left:15px;
		padding-right:15px;
	}
	
	.lead{
		padding:0 15px 30px;
		border-bottom:16px solid #7ecea2;
	}
	.lead h2{
		font-size:2.5rem;
	}
	.lead ul,
	.answer_col ul{
		font-size:1.9rem;
	}
	.lead ul li,
	.answer_col ul li{
		padding-left:1.25em;
	}
	.lead ul li:before,
	.answer_col ul li:before{
		top:0.66em;
		border-width: 10px 6px 0 6px;
	}
	.indent_box{
		padding-left:0px;
		font-size:1.75rem;
	}
	.kagi{
		text-indent:-0.5em;
	}
	.texts p{
		font-size:1.9rem;
		line-height:1.6;
	}
	.qa .tit_q {
		padding-left: 50px;
		line-height:1.4;
	}
	.qa .tit_q div{
		font-size:2.15rem;
	}
	.qa .tit_q strong{
		width:40px;
		height:40px;
		font-size:2rem;
	}
	.qa .tit_q i{
		margin-top:0.5em;
	}
	.qa .qa_list > li{
		margin-bottom: 75px;
	}
	.qa .qa_list .graph_col.pie{
		flex-direction:column;
		width:100%;
	}
	.qa .qa_list .graph_col .data{
		max-width:100%;
		width:100%;
	}
	.qa .qa_list .graph_col .graph{
		max-width: 198px;
		margin:0 auto 15px;
	}
	.qa .qa_list .graph_col .graph img{
		max-width: 100%;
	}
	.qa .qa_list .graph_col li + li{
		margin-top:0.5em;
	}
	.qa .qa_list .qa02 .graph_col{
		margin-top:0;
	}
	.qa .qa_list .qa02 .graph_col li + li{
		margin-top:0.5em;
	}
	.qa .qa_list .sp_scroll {
		overflow-x:auto;
		overflow-y:hidden;
		padding-bottom:5px;
	}
	.qa .qa_list .sp_scroll::-webkit-scrollbar {
		height: 8px;
	}
	.qa .qa_list .sp_scroll::-webkit-scrollbar-track {
		border-radius: 8px;
		background: rgba(55,55,55,0.3);
	}
	.qa .qa_list .sp_scroll::-webkit-scrollbar-thumb {
		border-radius: 8px;
		background: #666;
	}
	.qa .qa_list .sp_scroll .graph_col.bar{
	}	
	.qa .qa_list .graph_col.bar .data{
		/*order:5;*/
		width:auto;
		min-height: 175px;
		text-align:left;
		align-items:flex-end;
		margin-left:80px;
		padding: 5px 0px;
	}
	.qa .qa_list .graph_col.bar .graph{
		width: 206px;
		max-width: initial;
		min-height: 0;
		margin: 0;
		order:1;
	}
	.qa .qa_list .graph_col.bar .graph img{
		width:206px;
		max-width: inherit;
		height:auto;
	}
	.qa .qa_list .graph_col.bar .data li{
		height:auto;
		white-space:nowrap;
		background:rgba(255,255,255,0.75);
		position:relative;
		z-index:5;
		font-size:1.2rem;
		padding: 5px 0px 5px 0px;
	}
	.qa .qa_list .graph_col.bar .data li br{
		display:none;
	}

	.qa .qa_list .graph_col.bar .data li + li{
		margin:0;
	}
	
	.btn_wrap{
		margin: 35px 15px 0;
	}
	.btn_wrap a{
		padding:8px;
		font-size:2.2rem;
	}
	.btn_wrap a span{
		height:65px;
	}
	.btn_wrap a span:before{
		width:20px;
		height:20px;
		right:15px;
	}
	.btn_wrap a span:after{
		width:8px;
		height:8px;
		right:22px;
		border-width:2px;
	}
	.overview{
		padding-bottom:90px;
		font-size:1.8rem;
	}
	.overview:before{
		height:120px;
	}
	.overview .box{
		position:relative;
		z-index:5;
		margin:0 15px;
		background:#fff;
		border:solid 2px #3db5cf;
		padding:20px 15px 50px;
		border-radius:15px;
		margin-bottom:50px;
	}
	.overview .box h2{
		font-size:2.8rem;
	}
	.overview .end_banner {
		margin:0 15px;
		padding:0;
	}
	.overview .end_banner img{
		max-width:100%;
	}
	#pageTop {
	    position: fixed;
	    bottom: 10px;
	    right: 10px;
	    width: 50px;
		height:50px;
	}
	#pageTop:before{
		border-width: 0px 5px 9px 5px;
	}
}
@media screen and (max-width:374px) {
	.btn_wrap{
		margin-left:0;
		margin-right:0;
	}
	.btn_wrap a span{
		padding-right:20px;
		font-size:2rem;
	}
	.btn_wrap a span:before{
		right:10px;
	}
	.btn_wrap a span:after{
		right:17px;
	}
}