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

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

/* -------------------------------------
▽ レイアウト,固有要素
------------------------------------- */
#bp *{
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
}
#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 20px 1px;
}

.lbox.ra{
	border-top: 3px solid #4c81c8;
}
.lbox.dp{
	border-top: 3px solid #c7a04c;
}
.lbox h2{
	font-size: 150%;/*21px*/
	margin: 0 0 20px;
}
.lbox h2 span{font-size: 76.2%;/*16px 150%に対しての値 */}
.lbox.ra h2{
	background: url(../images/icn_ra.png) no-repeat 5px center;
	padding: 5px 60px;
}
.lbox.dp h2{
	background: url(../images/icn_dp.png) no-repeat center left;
	padding: 10px 60px;
}
.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: 33.333333%;
	float: left;
	display: table;
}
.listbox ul li a{
	display: table-cell;
	height: 73px;
	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 80px;
}

.leadbox{
	overflow: hidden;
	margin: 0 0 30px;
}
.leadbox .lead{
	width: 725px;
	float: left;
	margin: 0 0 0 20px;
	line-height: 1.7;
}
.leadbox .btn{
	width: 187px;
	float: right;
	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 10px;
}
.leadbox .btn:hover{
	background: #777;
}

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

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

.txtbox01{
	font-size: 114.3%;/*16px*/
	line-height: 2.0;
}
.txtbox02{
	background: #f5f5f5;
	border: 2px solid #ccc;
	padding: 10px;
}
.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 0 50px 20px;
}
.txtbox03 dt{
	color: #b78e36;
	font-weight: bold;
	margin: 0 0 3px;
}
.txtbox03 dd{
	background: url(../images/icn_dp.png) no-repeat 20px center #f5f5f5;
	padding: 20px 0 20px 85px;
}

/*2カラム*/
.colbox01{
	overflow: hidden;
	margin: 0 20px 30px;
}
.colbox01 .col{
	width: 555px;
	float: left;
}
.colbox01 .col:first-child{
	margin: 0 50px 0 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 100px;
}
.pagetitle p{
	margin: 0 20px 5px 0;
}
 .pagetitle h1{
	font-size: 180%;/*30px*/
	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: 30%;
	left: 20px;
	width: 57px;
	height: 44px;
	background: url(../images/icn_ra_l.png) no-repeat left 4px;
}
.dp .pagetitle:after{
	content: "";
	display: block;
	position: absolute;
	top: 25%;
	left: 20px;
	width: 57px;
	height: 57px;
	background: url(../images/icn_dp_l.png) no-repeat left 0px;
}



.h_style_01{
	font-size: 131%;/*21px*/
	color: #fff;
	background: #8c8c8c;
	padding: 4px 5px;
	margin: 0 0 30px;
}
.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 0 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: 142.9%;/*20px*/
	text-align: center;
	margin: 0 0 30px;
}
.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: 430px;
	margin: 0 auto;
	background: #505050;
}
.btn01 a{
	display: block;
	vertical-align: middle;
	text-align: center;
	color: #fff;
	text-decoration: none;
	font-size: 120%;/*21px*/
	padding: 10px 0;
	background: url(../images/icn_arrow_01.png) no-repeat 405px center;
}
.btn01 a span{
	font-size: 72%;
}
.btn01:hover{
	background: #777;
}


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

/* add btn02 start */
.btn02 {
  margin: 40px 0;
}
@media only screen and (max-width: 768px) {
  .btn02 {
    margin: 40px 20px;
  }
}

.btn02 a {
  display: block;
  vertical-align: middle;
  color: #fff;
  background: #c6052c url(../images/icn_arrow_01.png) no-repeat 98% center;
  text-align: center;
  text-decoration: none;
  font-size: 1.4rem;
  font-weight: bold;
  margin: 0;
  padding: 1.15rem 20px;
  border-radius: 3px;
}
.btn02 a:link,
.btn02 a:visited {
  color: #fff;
  background-color: #c6052c;
}

.btn02 a:hover {
  background-color: #dc0632;
}

/* /add btn02 end */

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

/*チェックマークアイコンリスト*/
.list_style_01{
	background: #f5f5f5;
	border: 2px solid #ccc;
	padding: 30px 20px 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: 128.6%;/*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 0 0 5px;
}
.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;
}

.list_style_04 dt img {
	border:solid 1px #ECECEC;
}

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

/*リンク領域*/

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: 114.3%;/*16px*/
	background: #b6b6b6;
	color: #fff;
	text-align: center;
}
.table_style_01 th{
	border: 1px solid #e0e0e0;
	background: #f5f5f5;
	padding: 15px;
	white-space: nowrap;
}
.table_style_01 td{
	border: 1px solid #e0e0e0;
	padding: 15px;
}
.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;
}
#contentsContainer ul.lnav li a:link,
#contentsContainer ul.list_style_01 li a:link,
#contentsContainer ul.list_style_02 li a:link,
#contentsContainer ul.list_style_03 li a:link,
#contentsContainer p.link_style_01 a:link,
#contentsContainer table.table_style_01 a:link,
#contentsContainer a.caselink_area
{
	color: #333333;
	text-decoration: underline;
}

#contentsContainer ul.lnav li a:hover,
#contentsContainer ul.list_style_01 li a:hover,
#contentsContainer ul.list_style_02 li a:hover,
#contentsContainer ul.list_style_03 li a:hover,
#contentsContainer p.link_style_01 a:hover,
#contentsContainer table.table_style_01 a:hover,
#contentsContainer a.caselink_area:hover
{
	text-decoration: none;
}

/* clearfix */
.cf:after{
	display: block;
	clear: both;
	content: "";
}


.m0{margin: 0!important;}
.m5{margin: 5px!important;}
.m10{margin: 10px!important;}
.m15{margin: 15px!important;}
.m20{margin: 20px!important;}
.m25{margin: 25px!important;}
.m30{margin: 30px!important;}
.mt5{margin-top: 5px!important;}
.mt10{margin-top: 10px!important;}
.mt15{margin-top: 15px!important;}
.mt20{margin-top: 20px!important;}
.mt25{margin-top: 25px!important;}
.mt30{margin-top: 30px!important;}
.mb1{margin-bottom: 1px!important;}
.mb5{margin-bottom: 5px!important;}
.mb10{margin-bottom: 10px!important;}
.mb15{margin-bottom: 15px!important;}
.mb20{margin-bottom: 20px!important;}
.mb25{margin-bottom: 25px!important;}
.mb30{margin-bottom: 30px!important;}
.ml5{margin-left: 5px!important;}
.ml10{margin-left: 10px!important;}
.ml15{margin-left: 15px!important;}
.ml20{margin-left: 20px!important;}
.ml25{margin-left: 25px!important;}
.ml30{margin-left: 30px!important;}
.ml40{margin-left: 40px!important;}
.mr5{margin-right: 5px!important;}
.mr10{margin-right: 10px!important;}
.mr15{margin-right: 15px!important;}
.mr20{margin-right: 20px!important;}
.mr25{margin-right: 25px!important;}
.mr30{margin-right: 30px!important;}
.p5{padding: 5px!important;}
.p10{padding: 10px!important;}
.p15{padding: 15px!important;}
.p20{padding: 20px!important;}
.p25{padding: 25px!important;}
.p30{padding: 30px!important;}
.pt5{padding-top: 5px!important;}
.pt10{padding-top: 10px!important;}
.pt15{padding-top: 15px!important;}
.pt20{padding-top: 20px!important;}
.pt25{padding-top: 25px!important;}
.pt30{padding-top: 30px!important;}
.pt55{padding-top: 55px!important;}
.pb5{padding-bottom: 5px!important;}
.pb10{padding-bottom: 10px!important;}
.pb15{padding-bottom: 15px!important;}
.pb20{padding-bottom: 20px!important;}
.pb25{padding-bottom: 25px!important;}
.pb30{padding-bottom: 30px!important;}
.pl5{padding-left: 5px!important;}
.pl10{padding-left: 10px!important;}
.pl15{padding-left: 15px!important;}
.pl20{padding-left: 20px!important;}
.pl25{padding-left: 25px!important;}
.pl30{padding-left: 30px!important;}
.pr5{padding-right: 5px!important;}
.pr10{padding-right: 10px!important;}
.pr15{padding-right: 15px!important;}
.pr20{padding-right: 20px!important;}
.pr25{padding-right: 25px!important;}
.pr30{padding-right: 30px!important;}
.txt_white{ color:#FFF !important;}