@charset "UTF-8";

/*----◇◇◇　市場調査のポイントやメリットを分かりやすく解説！ /announce/explain.html　◇◇◇---*/
/*----◇◇◇　調査サービス初めての方へ /announce/beginner.html　◇◇◇---*/
/*----◇◇◇　市場調査資料（マーケットレポート）の効果的な活用方法とは？ /announce/howto.html　◇◇◇---*/


/*----
市場調査のポイントやメリットを分かりやすく解説！
---*/

/*----　---*/
.explain{
}
	.explain .expBox{
		border:1px solid #555555;
	}
	.explain .expBoxGray{
		border:2px solid #cccccc;
	}
	.explain .expBoxRd{
		border:2px solid #1b2751;
		border-radius: 30px;
	}
	.explain .expBoxBkN{
		color:#ffffff;
		background:#1b2751;
		border:5px double #ffffff;
	}
		.explain .expBoxBkN span.txtYR{
			color:#ffcc00;
			padding-left:2px;
			padding-right:2px;
		}
		.explain a:hover .expBoxBkN{
			opacity: 0.7;
		}
	.explain .expBdB{
		border-bottom:1px solid #ffffff;
	}
	.explain .positionRT{
		position: relative
	}
	.explain .positionAL{
		position: absolute;
		top:13px;
	}
	.explain a:hover .img-responsive{
		opacity: 0.6;
	}

/*----　定性調査 定量調査　---*/
	.explain .expBoxRd .expBoxRbox div{
		margin-left:-15px;
	}
	.explain .expBoxRd .expBoxRbox ul{
		margin-left:-40px;
	}
@media screen and (max-width: 575.98px) { /*スマホ用*/
	.explain .expBoxRd .expBoxRbox div{
		margin-left:17px;
	}
	.explain .expBoxRd .expBoxRbox ul{
		margin-left:0;
	}
}

/*----　見出し調整　---*/
#yri-cat .explain h2.type01{
	padding-left:5px;
}
#yri-cat .explain h2.type02{
	padding-left:10px;
}
#yri-cat .explain h3{
	padding-left:10px;
	font-size: 13pt;
	font-weight:bold;
	color:#444444;
}
#yri-cat .explain h3.type01{
	border:1px solid #aaaaaa;
	border-radius: 5px;
}

/*----　Li 文字色　---*/
.explain .LiBL{
	color:#1e92f9;
}
.explain .txtBK{
	color:#444444;
}

/*----　文字色　---*/
.explain .colorNavy{
	color:#275e8f;
}

/*----　背景　---*/
.explain .BGyl{
	background:#fdf4e6;
}
.explain .BGbl{
	background:#e8eff5;
}
.explain .BGlbl{
	background:#e6f6fc;
}
.explain .BGlbl2{
	background:#edf6fc;
}

/*----　ボタン背景　---*/
#yri-cat a.BKog {
	color :#fff;
	background:#ed8f05;
	text-decoration:none;
}
	#yri-cat a.BKog:hover {
		opacity: 0.5;
		text-decoration:none;
	}
#yri-cat a.BKrd {
	color :#fff;
	background:#cc0000;
	text-decoration:none;
}
	#yri-cat a.BKrd:hover {
		opacity: 0.5;
		text-decoration:none;
	}
#yri-cat a.BKbl {
	color :#fff;
	background:#215f9a;
	text-decoration:none;
}
	#yri-cat a.BKbl:hover {
		opacity: 0.5;
		text-decoration:none;
	}
#yri-cat a.BKbl2 {
	color :#fff;
	background:#1f497d;
	text-decoration:none;
}
	#yri-cat a.BKbl2:hover {
		opacity: 0.5;
		text-decoration:none;
	}


/*----
はじめての方へ
---*/

/*----　FlexBox　---*/
.FlexboxWrap{
	display: -webkit-box; /*Android4.3*/
	display: -moz-box;    /*Firefox21*/
	display: -ms-flexbox; /*IE10*/
	display: -webkit-flex; /*PC-Safari,iOS8.4*/
	display: flex;
}
	.Flex_Box{
		width:46%;
		margin:1%;
	}
		#yri-cat .explain .Flex_Box a{
			color:#000000;
		}
		#yri-cat .explain .Flex_Box a:hover {
			opacity: 0.5;
		}

@media screen and (max-width: 575.98px) { /*スマホ用*/
	.FlexboxWrap{
		display: block;
	}
		.Flex_Box{
			width:100%;
			margin:0 0 3% 0;
		}
}

/*----　線　---*/
.explain .boDer{
	border:1px solid #cccccc;
}
.explain .expBoxGray{
	border:2px solid #cccccc;
}

/*----　デザインBOX　---*/
.explain .BoxDesign01 {
    position: relative;
    margin: 0;
    padding: 10px 5px 20px 5px;
    border: solid 1px #cccccc;
}
.explain .BoxDesign01 .box-title {
    position: absolute;
    display: inline-block;
    top: -20px;
    left: -15px;
    padding: 2px 19px;
    line-height: 25px;
    background: #0099cc;
    color: #ffffff;
    font-weight: bold;
    border-radius: 5px;
}
.explain .BoxDesign01 p {
    margin: 0; 
    padding: 0;
}

.explain .pt4 { padding-top:0.4em!important; }
.explain .pb4 { padding-bottom:0.4em!important; }
.explain .pr4 { padding-right:0.4em!important; }
.explain .pl4 { padding-left:0.4em!important; }

.explain .pt8 { padding-top:0.8em!important; }
.explain .pb8 { padding-bottom:0.8em!important; }
.explain .pr8 { padding-right:0.8em!important; }
.explain .pl8 { padding-left:0.8em!important; }

.explain .pt16 { padding-top:1.6em!important; }
.explain .pb16 { padding-bottom:1.6em!important; }
.explain .pr16 { padding-right:1.6em!important; }
.explain .pl16 { padding-left:1.6em!important; }

.explain .mt24 { margin-top:2.4em!important; }
.explain .mb24 { margin-bottom:2.4em!important; }
.explain .mr24 { margin-right:2.4em!important; }
.explain .ml24 { margin-left:2.4em!important; }

.explain .mt16 { margin-top:1.6em!important; }
.explain .mb16 { margin-bottom:1.6em!important; }
.explain .mr16 { margin-right:1.6em!important; }
.explain .ml16 { margin-left:1.6em!important; }

.explain .mt8 { margin-top:0.8em!important; }
.explain .mb8 { margin-bottom:0.8em!important; }
.explain .mr8 { margin-right:0.8em!important; }
.explain .ml8 { margin-left:0.8em!important; }

.explain .mt4 { margin-top:0.4em!important; }
.explain .mb4 { margin-bottom:0.4em!important; }
.explain .mr4 { margin-right:0.4em!important; }
.explain .ml4 { margin-left:0.4em!important; }

.explain .mt2 { margin-top:0.2em!important; }
.explain .mb2 { margin-bottom:0.2em!important; }
.explain .mr2 { margin-right:0.2em!important; }
.explain .ml2 { margin-left:0.2em!important; }


/*----　ボタンカラー　---*/
.btn-howto {
	background: #375c78;
	color: #fff;
}
.btn-howto:hover, .btn-howto:focus, .btn-howto:active {
	background: #69859a !important;
}

/*----　文字半分のマーカー　---*/
span.marker {
    background: linear-gradient(transparent 50%, #d2e4f5 50%);
}

/*----　/announce/howto.html　2. 市場調査資料（マーケットレポート）の活用方法　---*/
/*----　丸枠　---*/
.flow-Box {
	border-radius: 30px;
	box-shadow: 1px 1px 6px #ccc;
}

/*----　/column_list.html　市場調査に関するお役立ち情報・コラム　---*/
.column_list_box {
	padding:5px;
	border:1px solid #cccccc;
	border-radius: 5px;
	box-shadow: 1px 1px 3px #dddddd;
}
	.column_list_box .flag01,
	.column_list_box .flag02{
		display:block;
		width:25%;
		padding:1px 3px;
		text-align:center;
		font-size:80%;
		color:#ffffff;
	}
		.column_list_box .flag01{
			background:#ff9900;
		}
		.column_list_box .flag02{
			background:#4e95d9;
		}
	.column_list_box .column_list_img img{
		width:100%;
		height:100%;
		background-size: cover;
	}
	#yri-cat .explain .column_list_box h3.column_list_h3{
	    text-align: justify;
		font-size:100%;
		margin:10px 0 5px 0;
	    padding-bottom: 0.8em;
	    text-shadow: 1px 1px 3px #dddddd;
	    line-height: 1.4em;
	    letter-spacing: 0.05em;
	}
	.column_list_box .column_list_txt{
		font-size:90%;
		color:#999999;
	}
a .column_list_box:hover {
	opacity: 0.7;
}