/*▼----------------------------------------------------------------▼*/


header, footer {
	content: "";
	color: inherit;
	/* background:inherit; */
	background: #f8f9fa;
	background: #f4f4f4;
	text-align: center;
	padding: 1rem;
}

footer {
	font-size: 90%;
}


.lead {
	color: #6bb576;
	color: #6d766e;
	font-size:100%;
	margin-bottom: 0.25em;
}

footer a {
	color: #696969;
}

/*▲----------------------------------------------------------------▲*/



/*▼----------------------------------------------------------------▼*/

ul.breadcrumb {
	display: flex;
	list-style: none;
	flex-wrap: wrap;
	padding: 0;
}

ul.breadcrumb li {
	display: inline-block;
	margin-right: 0.5em;
	margin-bottom: 0em;
	white-space: nowrap;
}
/*▲----------------------------------------------------------------▲*/







/*▼----------------------------------------------------------------▼*/

ul.item {
	list-style: none;
	/* border: 1px #00F solid; */
	padding: 0;
}

/*
ul.item li {
	border:1px #DDD solid;
	border-radius: 0.5rem;
	margin:1em 0;
	padding:0.5em;
}
*/

ul.item li {
	/* border: 1px #F00 solid; */
	margin: 1em 0;
	padding: 0.5em;
}

ul.item li:first-child {
	border-top: 2px #DDD solid;
	border-bottom: 2px #DDD solid;
}
 
ul.item li + li {
	border-bottom: 2px #DDD solid;
}

.spot_url {
	font-size: 150%;
	font-weight: bold;
}

.spot_info div {
	border: 0px solid #DDD;
	border-radius: 0.5rem;
	margin: 0.25em;
	padding: 0.25em;
	text-align: left;
}



.spot_rank .rank_region {
	border:1px solid #DDD;
	border-radius: 0.5rem;
	margin: 0.25em;
	padding: 0 0.25em;
	text-align: center;
	width: 20%;
	
}

.rank_region > div:first-child {
	/* background: #FF0; */
	margin-top: 0.25em;
}

.rank_region > div {
	margin: 0.25em 0;
}


.spot_score div {
	border:1px solid #DDD;
	border-radius: 0.5rem;
	margin: 0.25em;
	padding: 0.25em;
	text-align: center;
	width: 15%;
}


.rank_num,
.val,
ul.item li .val {
	font-size:150%;
	font-weight: bold;
	color:#AAA;
	
}

/*▲----------------------------------------------------------------▲*/



/*▼----------------------------------------------------------------▼*/

ul.flex {
	display: flex;
	list-style: none;
	flex-wrap: wrap;
	padding: 0;
}

ul.flex li {
	display: inline-block;
	margin-right: 0.5em;
	margin-bottom: 0.5em;
	white-space: nowrap;
	border: 1px #30b844 solid;
	border: 1px #7dc488 solid;
	border-radius: 0.25rem;
	/* background: #d9f5f1; */
	background: #eaf7e6;

	
	padding: 0.1rem 0.5em;
}

/*▲----------------------------------------------------------------▲*/







/*▼----------------------------------------------------------------▼*/

dl dt {
	text-align: center;
	font-size: 125%;
	padding: 0.25em 0.5em;
	border-radius: 0.25rem;
}

dl dd {
	margin: 1em;
}

dl dd ul.flex {
	justify-content: center;
}


dl dd ul.flex li {
	border: 2px solid #DDD;
	border-radius: 0.25rem;
	margin: 0.25em;
	padding: 0.25em 0.5em;
	list-style: none;
	width: 20%;
	background: none;
	text-align: center;
}

dl dd ul li a {
	font-size: 110%;	
	display: block;
	height: 100%;
	width: 100%
}
/*▲----------------------------------------------------------------▲*/



/*▼----------------------------------------------------------------▼*/


/*▲----------------------------------------------------------------▲*/




.box {
	border-color:#00F;
	padding-left:0em;
}

.parts {
	border:1px solid #DDD;
	border-radius: 0.5rem;
	margin: 0.25em;
}





section {
	border:0px solid #F00;
	border-radius: 0.5rem;
	margin:1em 0;
}



.parts {
	padding:0.5em;
}


.flex,
.flex_c {
	display: flex;
	list-style: none;
	flex-wrap: wrap;
	padding: 0;
	border:0px dashed #DDD;
	/* margin:1em; */
}

.flex_c {
	justify-content: center;
}

footer ul.flex {
	justify-content: center;
}

footer ul.flex li {
	border:none;
	background:none;
}





/*▼----------------------------------------------------------------▼*/
input.keyword {
	font-family: sans-serif, FontAwesome;
}
/*▲----------------------------------------------------------------▲*/



/*▼----------------------------------------------------------------▼*/
/*こっち*/


/*

.degree {
	width:100px;
	border: 0px #CCC solid;
	
	margin:0;
	padding:0;
	
	background:#EEE;
	
	display: inline-block;
}


.degree span.degree_bar {
	
	width:100px;height:8px;
	overflow:hidden;
	
	
	
	font-size:8px;
	line-height:100%;
	color:#FFF;
	display:block;
	
	text-indent:-9999px;
	
	background: url('http://chart.apis.google.com/chart?cht=lc&chs=96x16&chf=bg,lg,0,00d10f,0,4ed000,0.1,c8d500,0.2,f07f00,0.567,d03000,0.75,ad0000,1') repeat-y 0 center;
	background: url('http://chart.apis.google.com/chart?cht=lc&chs=100x8&chf=bg,lg,0,00d10f,0,4ed000,0.1,c8d500,0.2,f07f00,0.567,d03000,0.75,ad0000,1') repeat-y 0 center;
	
}

.degree_val {
	color:#AAA;
	font-weight: bold;
	display:inline-block;
} 

*/

/*▲----------------------------------------------------------------▲*/



/*▼----------------------------------------------------------------▼*/
/*[szk css]*/

.item-score {
	border: 0;
}

.item-score .tbl-graph td,
.item-score .tbl-graph th {
	border: 0;
}

.item-score table {
	border-collapse: collapse;
	width: 100%;
	width: 40%;
	background: #eaf7e6;
}

.item-score table th {
	text-align: right;
}


.item-score table .td-graph {
	width: calc(100% - 8em);
	width: 50%;
}






.degree {
	background: #eee;
	border: 0 solid #ccc;
	display: inline-block;
	margin: 0;
	padding: 0;
	width: 100%;
	
	border: 0px solid #f00;
	
	
}


/*
.degree span.degree-bar-3 {
	background-color: #d4a155;
	color: #d4a155;
}
*/

.degree span.degree-bar-3 {
	background-color: #f90;
	color: #f90;
	color: transparent;
	display: block;
	font-size: .5rem;
	height: 1.8em;
	line-height: 100%;
	opacity: .8;
	overflow: hidden;
	width: 15rem;
}

.item-score table .td-value, .rank-item-score table .td-value {
	text-align: right;
	width: 3em;
}

.degree-val, .rank-val {
	display: inline-block;
	padding-left: .5em;
}


.degree {
	background:#F7F7F7;
	border: 1px solid #DDD;
	width: 300px;
}



.degree span.degree-bar-3 {
	background: url('../img/SCR-20240716-dwoc.png') repeat-y 0 center;
	/* background-size:cover; */
	
	/* background: rgb(0,209,15); */
	background: linear-gradient(90deg, rgba(0,209,15,1) 0%, rgba(78,208,0,1) 10%, rgba(200,213,0,1) 20%, rgba(240,127,0,1) 55%, rgba(208,48,0,1) 75%, rgba(173,0,0,1) 100%);
	
	
	background-size: 300px ; 
	display: block;

}



/*▲----------------------------------------------------------------▲*/



/*▼----------------------------------------------------------------▼*/
/*▲----------------------------------------------------------------▲*/












/*▼----------------------------------------------------------------▼*/
/*ランキング トップ n */

.rank_top_n .box {
	margin: 0 0.5em;
}

.box_rank {
	border-radius: 0.5rem;
	margin: 0.25em;
}

.box_rank td.rank_top_n {text-align: right;}
.box_rank td.rank_region {text-align: left;}
.box_rank td.rank_val {text-align: right;}




/*▲----------------------------------------------------------------▲*/




/*▼----------------------------------------------------------------▼*/
/* pref */




/*▲----------------------------------------------------------------▲*/




.pager_navi_ul {
	padding: 0;
}



.rank_arrow {
	font-size: 100%;
}


.rank_last {
	font-size: 80%;
	display: block;
	color: gray;
	white-space: nowrap;
	/* color: transparent; */
}


.metric_type,
.score_type {
	font-weight: bold;
	font-weight: normal;
	white-space: nowrap;
	color: #998;
}

 
.rank_region .region_info {
	background: #EEE;
}

.rank_region .region_info, 
.metric {
	margin: 0.5em 0;
	margin: 0em 0;
	padding: 0.5em 0;
	border: 1px solid #DDD;
	border-radius: 0.25rem;
}


/*▼----------------------------------------------------------------▼*/


/*▲----------------------------------------------------------------▲*/



/*▼----------------------------------------------------------------▼*/
.terms ul {
	
	list-style: none;
}

/*▲----------------------------------------------------------------▲*/


/*▼----------------------------------------------------------------▼*/

.spot_rank .masked,
.spot_rank .rank_last.masked,
.spot_score .masked {
	/* filter: blur(5px);  */
	color:#EFEFEF;
	color: transparent;
	background: #EFEFEF;
	
}


.spot_score > .eth_sort {
	/* border-color: #999; */
	background: #F7F7F7;
}

.spot_score .crr_sort {
	border-color: #999;
}

.crr_sort .score_type {
	font-weight: bold;
}

.spot_rank .rank_region .eth_metric {
	background: #F7F7F7;
}

.spot_rank .crr_metric {
	border: 1px solid #999;
	border-radius: 0.25rem;
	background: #FFF;
}

.crr_metric .metric_type {
	font-weight: bold;
}



.spot_rank a.region {
	font-size: 120%;
}






.warn {
	margin-left:0.5em;
	display:none;
}



/*▲----------------------------------------------------------------▲*/
/*展開絡み*/

.box_rank_region {
	text-align: center;
	font-size: 60%;
	
	/* display: none; */
}

.box_rank_region_opn {
	display: block;
	
	/* display: none; */
}
.box_rank_region_cls {
	display: none;
	
	/* display: none; */
}

.spot_rank {
	/* display: none; */
	display: none;
	
	/* display: flex; */
}

/*▼----------------------------------------------------------------▼*/

/*▲----------------------------------------------------------------▲*/

/*▼----------------------------------------------------------------▼*/
.other {
	text-align: center;
}

.per_30 {
	text-align: center;
}

.id_label {
	font-size: 80%;
	color: #9AB;
}


.id_str {
	font-size: 80%;
	color: #417400;
	cursor: pointer;
}

/*▲----------------------------------------------------------------▲*/



/*▼----------------------------------------------------------------▼*/
/*▲----------------------------------------------------------------▲*/







/*▼----------------------------------------------------------------▼*/
/* フォーム */



#box_frm table th {
	text-align: right;
	vertical-align: top;
	white-space: nowrap;
}




#box_frm #btn_cfrm[disabled] {
	/* background-color: #999; */
	filter: alpha(opacity=50);
	-moz-opacity: 0.5;
	opacity: 0.5;
	cursor: auto;
}


#box_frm .btns {
	/* background-color: #01addf; */
	background-color: #26b290;
	/* background-color: #FF6600; */
	-moz-border-radius: 3px;
	-webkit-border-radius: 3px;
	border-radius: 3px;
	display: inline-block;
	color: #ffffff;
	text-align: center;
	padding: 0.5em 3em;
	padding: 0.5em 2.5em;
	position: relative;
	margin: 0.5em;
	text-decoration: none;
}

#box_frm table {
	width: 100%;
	
}

#frm_contact table {
	width: 70%;
}


#frm_contact table th, #frm_contact table td {
	border-top: 1px solid #ECECEC;
	border-top: 1px solid #E1E8ED;
	padding: 0.25em 0.5em;
}


#frm_contact .btns {
	/* background-color: #01addf; */
	background-color: #26b290;
	/* background-color: #FF6600; */
	-moz-border-radius: 3px;
	-webkit-border-radius: 3px;
	border-radius: 3px;
	display: inline-block;
	color: #ffffff;
	text-align: center;
	padding: 0.5em 3em;
	padding: 0.5em 2.5em;
	position: relative;
	margin: 0.5em;
	text-decoration: none;
}


#frm_contact textarea {
	height: 12em;
	line-height: 1.5em;
}




#box_frm .error {
	color: #E65777;
	font-size: 90%;
	display: none;
}


/*▲----------------------------------------------------------------▲*/






/*▼----------------------------------------------------------------▼*/
/* スマートフォン向けスタイル */

@media only screen and (max-width: 599px) {
	
	body {
		font-size: 80%;
	}
	
	header, footer {
		padding: 0rem;
	}
	
	main {
		content: "";
		margin: 0.5rem;
	}
	
	
	dl dd {
		margin: 0em;
	}
	
	dl dd ul.flex li {
		width: auto;
		
	}
	
	.box table th, .box table td {
		padding: 0.25em 0.25em;
	}
	
	
	.degree {
		width: 150px;
	}
	
	.degree span.degree-bar-3 {
		background-size: 150px ; 
	}
	
	.spot_rank .rank_region {
		width: 25%;
		width: 27%;
	}
	
	.rank_arrow {
		font-size: 100%;
		display: block;
	}
	
	.spot_score div {
		width: 18%;
	}
	
	ul.item li .val {
		font-size: 125%;

	}
	
	
	
	#frm_contact input[type="text"], 
	#frm_contact input[type="password"], 
	#frm_contact select, 
	#frm_contact textarea {
		width: 100%;
	}
	
	#frm_contact table {
		width: 100%;
	}
	
	#frm_contact table th {
		white-space: normal !important;
	}
	
	
}

/*▲----------------------------------------------------------------▲*/


/*▼----------------------------------------------------------------▼*/
/* タブレット向けスタイル */

@media only screen and (min-width: 600px) and (max-width: 1023px) {
	
}

/*▲----------------------------------------------------------------▲*/



/*▼----------------------------------------------------------------▼*/
/* デスクトップ向けスタイル */

@media only screen and (min-width: 1024px) {
	
}

/*▲----------------------------------------------------------------▲*/