@charset "utf-8";
/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
◆ベストプラクティス（index）
　/bp/css/index.css
　Last updated:2016/03/24
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

/* =========================================================
■ベストプラクティス
========================================================= */

@media (max-width: 800px) {
	#bp{
		margin: 0 0 35px;
		border-bottom: 1px solid #a2a2a2;
		font-size: 14px;
	}
	.main_visual{
		margin: 0 0 30px;
	}
	.lbox{
		background: #ebebeb;
		margin: 0 0 30px;
		padding: 20px 10px 1px;
	}

	.lbox.ra{
		border-top: 3px solid #4c81c8;
	}
	.lbox.dp{
		border-top: 3px solid #c7a04c;
	}
	.lbox h2{
		font-size: 17px;/*21px*/
		margin: 0 0 20px;
	}
	.lbox h2 span{font-size: 76.2%;/*16px 150%に対しての値 */display: block;}
	.lbox.ra h2{
		background: url(../images/icn_ra.png) no-repeat 5px center;
		padding: 5px 50px;
		background-size: 35px auto;
		margin: 0 0 10px 10px;
	}
	.lbox.dp h2{
		background: url(../images/icn_dp.png) no-repeat center left;
		padding: 10px 52px;
		background-size: 40px auto;
		margin: 0 0 10px 10px;
	}
	.lbox.dp h3{
		font-size: 107.1%;/*16px*/
		color: #c7a04c;
		border-left: 4px solid #c7a04c;
		padding: 3px 3px 3px 10px;
		line-height: 1.0;
		margin: 0 0 15px 3px;
	}
	.listbox{
		margin: 0 0 35px;
	}
	.listbox ul{
		overflow: hidden;
		margin: 0 0 0 3px;
	}
	.listbox ul li{
		background: #fff;
		width: 50%;
		float: left;
		display: table;
	}
	.listbox ul li a{
		display: table-cell;
		height: 90px;
		vertical-align: middle;
		background: url(../images/icn_circle_01.png) no-repeat 10px center;
		padding: 1px 10px 0px 35px;
		text-decoration: none;
		border-right: 3px solid #ebebeb;
		border-bottom: 3px solid #ebebeb;
	}
	.listbox ul li:hover{
		background: #f7f7f7;
	}
	.lbox02{
		margin: 0 0 50px;
	}
	.lbox02 .txtbox01{
		margin: 0 20px;
	}

	.leadbox{
		overflow: hidden;
		margin: 0 0 30px;
	}
	.leadbox .lead{
		width: auto;
		float: none;
		margin: 0 20px 10px;
		line-height: 1.7;
	}
	.leadbox .btn{
		width: 57%;
		float: right;
    margin-right: 20px;
		background: #505050;
	}
	.leadbox .btn a{
		display: block;
		color: #fff;
		text-decoration: none;
		background: url(../images/icn_arrow_01.png) no-repeat 160px center;
		padding: 5px 55px 5px 10px;
	}
	.leadbox .btn:hover{
		background: #777;
	}

	/* -------------------------------------
	▽ レイアウト 汎用
	------------------------------------- */

	.lnav{
		text-align: left;
		border: 1px dotted #333;
		padding: 10px;
		margin: 0 20px 40px;
	}
	.lnav li{
		display: block;
		margin: 0;
		line-height: 1.7;
		/* width: 48%; */
	}
	.lnav li a{
		background: url(../images/icn_circle_02.png) no-repeat left center;
		display: block;
		padding: 5px 0 5px 20px;
	}

	.txtbox01{
		font-size: 114.3%;/*16px*/
		line-height: 2.0;
	}
	.txtbox02{
		background: #f5f5f5;
		border: 2px solid #ccc;
		padding: 10px;
		margin: 0 0 20px;
	}
	.txtbox02 dt{
		font-weight: bold;
		margin: 0 0 5px -5px;
	}
	.txtbox02 dd{
		line-height: 1.8;
	}

	.txtbox02 dd ul li{
		padding: 0 0 0 15px;
		margin: 0 0 5px;
		background: url(../images/icon_list_s.gif) no-repeat left 9px;
	}

	.txtbox03{
		margin: 0 20px 30px;
	}
	.txtbox03 dt{
		color: #b78e36;
		font-weight: bold;
		margin: 0 0 3px;
	}
	.txtbox03 dd{
		background: url(../images/icn_dp.png) no-repeat 10px center #f5f5f5;
		padding: 15px 10px 15px 56px;
		background-size: 35px auto;
	}

	/*2カラム*/
	.colbox01{
		overflow: hidden;
		margin: 0 20px 30px;
	}
	.colbox01 .col{
		width: auto;
		float: none;
	}
	.colbox01 .col:first-child{
		margin: 0;
	}
	.colbox01 .col h3{margin: 0 0 20px;}

	/*シングルカラム*/
	.colbox02{
		margin: 0 20px 50px;
	}

	.colimg{
		text-align: center;
		margin: 0 0 20px;
	}

	/* -------------------------------------
	▽ 見出し系 汎用
	------------------------------------- */
	.pagetitle{
		margin: 0 0 25px;
		background: #f5f5f5;
		position: relative;
		padding: 15px 0 15px 63px;
	}
	.pagetitle p{
		margin: 0 20px 5px 0;
	}
	 .pagetitle h1{
		font-size: 20px;
		line-height: 1.2;
		margin: 0 20px 0 0;
	}
	.pagetitle.one_line{
		padding: 30px 0 31px 100px;
	}
	.ra .pagetitle{border-top: 3px solid #4c81c8;}
	.ra .pagetitle h1{color: #3c77c5;}
	.dp .pagetitle{border-top: 3px solid #c7a04c;}
	.dp .pagetitle h1{color: #b78e36;}

	.ra .pagetitle:after{
		content: "";
		display: block;
		position: absolute;
		top: 13px;
		left: 20px;
		width: 31px;
		height: 27px;
		background: url(../images/icn_ra_l.png) no-repeat left 4px;
		background-size: contain;
	}
	.dp .pagetitle:after{
		content: "";
		display: block;
		position: absolute;
		top: 14px;
		left: 10px;
		width: 40px;
		height: 40px;
		background: url(../images/icn_dp_l.png) no-repeat left 0px;
		background-size: contain;
	}



	.h_style_01{
		font-size: 131%;/*21px*/
		color: #fff;
		background: #8c8c8c;
		padding: 4px 7px;
		margin: 0 10px 20px;
	}
	.h_style_01 span{
		color: #fff;
		display: inline-block;
		padding: 3px 10px;
	}
	.ra .h_style_01 span{border-left: 4px solid #4c81c8;}
	.dp .h_style_01 span{border-left: 4px solid #c7a04c;}

	.h_style_01_tips{
		font-size: 131%;/*21px*/
		color: #fff;
		background: #8c8c8c;
		padding: 7px 5px 7px 5em;
		margin: 0 15px 30px;
		position: relative;
	}
	.h_style_01_tips .tips{
		position: absolute;
		top: 0;
		left: 0;
		display: inline-block;
		height: 100%;
		width: 4em;
		text-align: center;
		padding: 7px 0 0;
	}
	.ra .h_style_01_tips .tips{background: #4c81c8;}
	.dp .h_style_01_tips .tips{background: #c7a04c;}

	.h_style_02{
		font-size: 114.3%;/*16px*/
		padding: 5px 0;
		position: relative;
		margin: 0 20px 20px;
	}
	.h_style_02 span{
		display: inline-block;
		padding: 0px 10px;
	}
	.ra .h_style_02{border-bottom: 1px solid #4c81c8;}
	.dp .h_style_02{border-bottom: 1px solid #c7a04c;}
	.ra .h_style_02 span{border-left: 4px solid #4c81c8;}
	.dp .h_style_02 span{border-left: 4px solid #c7a04c;}


	.h_style_03{
		font-size: 114.3%;/*16px*/
		padding: 0 0 0 25px;
		margin: 0 0 15px;
	}
	.ra .h_style_03{
		color: #4c81c8;
		background: url(../images/icn_circle_04.png) no-repeat left 2px;
	}
	.dp .h_style_03{
		color: #b78e36;
		background: url(../images/icn_circle_06.png) no-repeat left 4px;
	}



	.txt_style_01{
		font-size: 18px;/*20px*/
		text-align: center;
		margin: 0 0 20px;
		font-weight: bold;
	}
	.txt_style_02{
		font-size: 114.3%;/*16px*/
		margin: 0 0 20px;
		color: #3c77c5;
	}
	.txt_style_03{
		font-weight: bold;
		margin: 0 0 15px;
	}

	/* -------------------------------------
	▽ ボタン系 リンクテキスト 汎用
	------------------------------------- */
	.btn01{
		width: auto;
		margin: 0 20px;
		background: #505050;
	}
	.btn01 a{
		display: block;
		vertical-align: middle;
		text-align: center;
		color: #fff;
		text-decoration: none;
		font-size: 16px;/*21px*/
		padding: 10px;
		background: url(../images/icn_arrow_01.png) no-repeat 98% center;
	}
	.btn01 a span{
		font-size: 72%;
		/* display: block; */
	}
	.btn01:hover{
		background: #777;
	}


	.link_style_01{}
	.link_style_01 a{
		background: url(../images/icn_arrow_02.png) no-repeat left 3px;
		display: inline-block;
		padding: 0 0 0 6px;
	}


	/* -------------------------------------
	▽ リスト系 汎用
	------------------------------------- */

	/*チェックマークアイコンリスト*/
	.list_style_01{
		background: #f5f5f5;
		border: 2px solid #ccc;
		padding: 15px 10px 0px;
	}
	.list_style_01 li{
		padding: 0 15px 15px 25px;
		line-height: 1.7;
		margin: 0 0 15px;
		border-bottom: 1px dotted #ccc;
		position: relative;
		font-size: 14px;/*18px*/
		line-height: 1.5;
	}
	.list_style_01 li:last-child{
		border-bottom: none;
	}

	.list_style_01 li span.point{
		color: #d62b49;
	}/*changed*/

	.list_style_01 li:after{
		content: "";
		display: block;
		position: absolute;
		background: url(../images/icn_circle_03.png) no-repeat top left;
		top: 4px;
		left: 0px;
		width: 17px;
		height: 17px;
	}

	/*小丸アイコンリスト*/
	.list_style_02{
		margin: 0;
	}
	.list_style_02 > li{
		padding: 0 0 0 17px;
		line-height: 1.7;
		margin: 0 0 15px;
	}
	.ra .list_style_02 > li{background: url(../images/icn_circle_08.png) no-repeat left 7.5px;}
	.dp .list_style_02 > li{background: url(../images/icn_circle_09.png) no-repeat left 7.5px;}

	.list_style_02 > li ul{
		margin: 15px 0 0;
	}
	.list_style_02 > li ul li{
		padding: 0 0 0 15px;
		line-height: 1.7;
		margin: 0 0 10px;
	}
	.ra .list_style_02 > li ul li{background: url(../images/icn_circle_05.png) no-repeat left 8px;}
	.dp .list_style_02 > li ul li{background: url(../images/icn_circle_07.png) no-repeat left 8px;}




	/*赤矢印右アイコンリスト*/
	.list_style_03{}
	.list_style_03 li{
		padding: 0 0 0 15px;
		background: url(../images/icn_arrow_02.png) no-repeat left 5px;
		line-height: 1.7;
		margin: 0 0 15px;
	}

	/*サムネイル付き記事リスト*/
	.list_style_04{
		position: relative;
		min-width: 97px;
		margin-bottom:25px;
	}
	.list_style_04 dt{
		position: absolute;
		top: 0;
		left: 5px;
		width: 100px;
	}

	.list_style_04 dt img {
		border:solid 1px #ECECEC;
		width: 100%;
		height: auto;
	}

	.list_style_04 dd{
		margin: 0 0 0 120px;
		line-height: 1.7;
		font-size:90%;
	}
	.list_style_04 .name{
		font-size: 114.3%;/*16px*/
		font-weight: bold;
		margin: 0 0 5px 120px;
	}

	/*リンク領域*/

	a.caselink_area {
		display:block;
		border:none;
		margin:0;
		padding:0;
	}

	/*画像下 注釈*/
	.list_style_05{
		margin: 10px 0 0;
		text-align: left;
		font-size: 85.7%;
	}

	.list_style_05 dt{
		margin: 0 0 5px
	}

	.list_style_05 dd{
		line-height: 1.6;
		margin: 0 0 15px;
	}

	.list_style_05 dd:last-child{
		margin: 0;
	}

	.list_style_05 ul li{
		padding: 0 0 0 12px;
		margin: 0 0 5px;
		background: url(../images/icon_list_s.gif) no-repeat left 6.5px;
	}

	.list_style_06,
	.list_style_06 li{ list-style: disc;}
	.list_style_06{margin-left:20px;}

	/* -------------------------------------
	▽ その他
	------------------------------------- */
	.table_style_01{
		width: 100%;
		margin: 0 0 10px;
	}
	.table_style_01 thead th{
		font-size: 14px;/*16px*/
		background: #b6b6b6;
		color: #fff;
		text-align: center;
	}
	.table_style_01 th{
		border: 1px solid #e0e0e0;
		background: #f5f5f5;
		padding: 5px;
		white-space: nowrap;
	}
	.table_style_01 td{
		border: 1px solid #e0e0e0;
		padding: 10px;
		font-size: 12px;
	}
	.table_style_01 td.num{
		text-align: center;
	}

	.tablehead_link{ color:#FFF !important;}

	.lead_style01{
		margin: 0 20px 30px;
	}

	.link_blank{
		background: url(/svcsol/common/images/com_ico_blank.png) no-repeat right 3px;
		display: inline-block;
		padding: 0 17px 0 0;
	}
}

@media (max-width: 380px) {
  .leadbox .btn a{
    padding-right: 20px;
  }
  .btn01 a{
    font-size: 14px;
    padding: 10px 20px;
  }

}