@charset "utf-8";

/*-------------------------
 * タイトル・見出し
--------------------------*/
.main_image{
	margin-bottom: 70px;
}
.headline { margin-bottom: 20px; font-weight: 500;}

@media only screen and (max-width: 640px) {
	.headline { margin-bottom: 0.75em; }
}

/*-------------------------
 * セクション・レイアウト
--------------------------*/
.section { margin-bottom: 90px; color: #333;}

@media only screen and (max-width: 640px) {
	.section { margin-bottom: 40px; }
}

/*-------------------------
 * パーツ
--------------------------*/
#head_text { margin-bottom: 4em; }
#head_text .lede { margin-bottom: 2em; text-align: center; font-size: 114.2%; font-weight: 500;line-height: 2;}
.max_image + .note { margin-top: 0.3em; text-align: right; }

/* graph */

@media only screen and (min-width: 641px) {
	.graph_wrap { display: table; width: 100%; }
	.graph_wrap .left_item,
	.graph_wrap .right_item { display: table-cell; width: 50%; text-align: center; }
	.graph_wrap .left_item { padding: 0 8% 0 13%; }
	.graph_wrap .right_item { padding: 0 13% 0 8%; }
	.graph_wrap .left_item .max_image,
	.graph_wrap .right_item .max_image { max-width: 282px; }
	.graph_wrap .label { margin-bottom: 20px; font-size: 157.1%; font-weight: 600; }
	.graph_wrap.bunya .right_item { padding: 0 13% 0 6%; }
	.graph_wrap.bunya .right_item .max_image { max-width: 298px; }
	.graph_wrap.haizoku .label{margin-bottom: 35px;}
	.graph_wrap.haizoku .left_item .max_image { max-width: 326px; }
	.graph_wrap.haizoku .left_item { padding-left: calc((88 / 980) * 100%); padding-right: calc((66 / 980) * 100%);}
	.graph_wrap.haizoku .right_item .max_image { max-width: 296px; }
	.graph_wrap.haizoku .right_item { padding-left: calc((64 / 980) * 100%); padding-right: calc((130 / 980) * 100%);}
}

@media only screen and (max-width: 640px) {
	#head_text { margin-bottom: 2.75em; }
	#head_text .lede { text-align: left;line-height: inherit; }

	.max_image + .note { margin-top: 1.35em; text-align: left; }
	
	.graph_wrap { display: block; }
	.graph_wrap .left_item,
	.graph_wrap .right_item { display: block; width:auto; }
	.graph_wrap .left_item,
	.graph_wrap .right_item { padding: 0 25px; }
	.graph_wrap .left_item { margin-bottom: 2em; }
	.graph_wrap .label { margin-bottom: 1em; font-size: 128.5%; }
	.graph_wrap.bunya .right_item .max_image { position: relative; left: -15px; }
	.graph_wrap.haizoku .label{margin-bottom: 1em;}
	.graph_wrap.haizoku .left_item .max_image { position: relative; left: -15px; }
	.graph_wrap.haizoku .left_item { padding: 0 25px; }
}

@media only screen and (max-width: 400px) {
	.graph_wrap.bunya .right_item .max_image { left: 48%; transform: translateX(-50%); width:calc(100% + 14px); }
	.graph_wrap.haizoku .left_item .max_image { left: 45%; transform: translateX(-50%); width:calc(100% + 25px); }
}

/* qs */
.qs_article{margin-bottom: 70px;}
.qs_article .qs_no{position: relative; font-size: 1.75rem; font-weight: 500; letter-spacing: .04em; line-height: 1; text-align: center; margin-bottom: 20px;}
.qs_article .qs_no > span{display: inline-block; background-color: #fff;padding: 1px 0.4em; position: relative; z-index: 1; margin-bottom: 6px;}
.qs_article .qs_no > span > b{color: #c00; line-height: 1;}
.qs_article .qs_no::before{content: ''; display: block; position: absolute; top: 0; bottom: 0; left: 0; margin: auto; width: 100%; height: 1px; background-color: #ccc; z-index: 0;}

.qs_article .bd_accordion_title{position: relative; font-size: 1.5rem; font-weight: 500; line-height: 1; letter-spacing: .1em; text-align: center; padding: 20px 70px; border: 1px solid #d3d3d3; cursor: pointer; transition: color .2s ease;}
.qs_article .bd_accordion_title::before,
.qs_article .bd_accordion_title::after{content: ''; display: block; position: absolute; top: 0; bottom: 0; margin: auto; width: 30px; height: 2px; background-color: #c00; transition: opacity .2s ease;}
.qs_article .bd_accordion_title::before{right: 20px;}
.qs_article .bd_accordion_title::after{right: 20px; transform: rotate(90deg);}
.qs_article .bd_accordion_title.open::after{opacity: 0;}

.qs_article .bd_accordion_contents{border-bottom: 1px solid #d3d3d3;border-left: 1px solid #d3d3d3;border-right: 1px solid #d3d3d3;}

.qs_article .qs_graph{display: flex; justify-content: space-between; align-items: flex-start; padding: 40px 60px 50px;}
.qs_article .qs_graph > div{text-align: center;}
.qs_article .qs_graph h5.label{font-size: 1.375rem; font-weight: 500; letter-spacing: .04em; line-height: calc(24 / 22); margin-bottom: 24px;}

.qs_article .qs_ranking{padding: 30px 40px 0;}
.qs_article .qs_ranking .qs_ranking_category{font-size: 1.125rem; font-weight: 700; border-bottom: 1px solid #d3d3d3; margin-bottom: 30px; padding-bottom: 15px;}
.qs_article .qs_ranking .qs_ranking_list{display: flex; justify-content: space-between;}
.qs_article .qs_ranking .qs_ranking_list > li{display: flex; justify-content: center; align-items: center; flex-flow: column; text-align: center; width: 32.7394209354%; height: 188px; background-color: #fcf2f2;}
.qs_article .qs_ranking .qs_ranking_list > li .rank{font-size: 1.312rem; line-height: 1; color: #c00; margin-bottom: 10px;}
.qs_article .qs_ranking .qs_ranking_list > li .rank strong{font-size: 2.187rem; font-weight: 700;}
.qs_article .qs_ranking .qs_ranking_list > li .detail{font-size: 1.375rem; font-feature-settings: 'palt'; font-weight: 700; line-height: calc(32 / 22);}
.qs_article .qs_ranking .qs_ranking_list > li .detail small{font-size: 1.25rem;}
.qs_article .qs_ranking_sup{margin: 40px 40px 50px; padding: 35px 55px; border:5px solid #f0f0f0; line-height: calc(28 / 16);}

@media only screen and (min-width: 640.998px) {
	.qs_article .bd_accordion_title:hover{color: #c00;}
}

@media only screen and (max-width: 640px) {
	.qs_article{margin-bottom: 50px;}
	.qs_article .qs_no{font-size: 1.312rem; margin-bottom: 7px;}
	.qs_article .qs_no > span{display: inline-block; background-color: #fff;padding: 1px 0.25em; position: relative; z-index: 1; margin-bottom: 6px;}
	.qs_article .qs_no > span > b{color: #c00; line-height: 1;}
	.qs_article .qs_no::before{content: ''; display: block; position: absolute; top: 0; bottom: 0; left: 0; margin: auto; width: 100%; height: 1px; background-color: #ccc; z-index: 0;}
	
	.qs_article .bd_accordion_title{font-size: 1.312rem;padding: 25px 40px;line-height: calc(58 / 42); letter-spacing: .04em;}
	.qs_article .bd_accordion_title::before,
	.qs_article .bd_accordion_title::after{width: 19px; height: 2px;}
	.qs_article .bd_accordion_title::before{right: 15px;}
	.qs_article .bd_accordion_title::after{right: 15px;}

	.qs_article .qs_graph{display: block; padding: 20px 0 35px;}
	.qs_article .qs_graph > div:nth-of-type(2){margin-top: 45px;}
	.qs_article .qs_graph h5.label{font-size: 1.125rem; line-height: calc(36 / 24); margin-bottom: 18px;}

	.qs_article .qs_ranking{padding: 25px 22px 0;}
	.qs_article .qs_ranking .qs_ranking_category{font-size: 1rem; font-weight: 700; border-bottom: 1px solid #d3d3d3; margin-bottom: 20px; padding-bottom: 12px;}
	.qs_article .qs_ranking .qs_ranking_list{display: block;}
	.qs_article .qs_ranking .qs_ranking_list > li{width: auto; height: 130px; margin-bottom: 10px;}
	.qs_article .qs_ranking .qs_ranking_list > li .rank{font-size: 1.062rem; margin-bottom: 10px;}
	.qs_article .qs_ranking .qs_ranking_list > li .rank strong{font-size: 1.75rem;}
	.qs_article .qs_ranking .qs_ranking_list > li .detail{font-size: 1.25rem;  line-height: calc(52 / 40);}
	.qs_article .qs_ranking .qs_ranking_list > li .detail small{font-size: 1.125rem;}
	.qs_article .qs_ranking_sup{margin: 25px 22px 25px; padding: 25px 20px; border:4px solid #f0f0f0; font-size: 0.875rem; line-height: calc(42 / 28);}
}

/*-------------------------
 * print
--------------------------*/
/* @media print {

} */
/* css end ------------ */