﻿@charset "UTF-8";
/* PCだけ表示 */
.visible_l,img.visible_l,span.visible_l,br.visible_l,td.visible_l,th.visible_l,tr.visible_l,table.visible_l {
	display: none !important;
}

/* SPだけ表示 */
.visible_s {
	display: block !important;
}
span.visible_s,img.visible_s,br.visible_s {
	display: inline !important;
}
table.visible_s {
	display: table !important;
}


/* 共通デザイン コンテンツメニュー
----------------------------------------*/
section.menu{
	margin-bottom:40px;
}

section.menu ul{
}

section.menu ul li{
	float:left;
	margin:0 2% 0 0;
	width:49%;
}

section.menu ul li:nth-of-type(2n){
	margin:0;
}

section.menu ul li.column{
	margin:0;
	width:100%;
}
section.menu ul li:last-child{
	margin-bottom:25px;
}

div.osusume{
	border-radius: 10px;		/* CSS3草案 */
	-webkit-border-radius: 10px;	/* Safari,Google Chrome用 */
	-moz-border-radius: 10px;	/* Firefox用 */
	background:#E8F8E3;
	padding:20px;
	margin:10px 0 5px 0;
}

div.osusume ul{
}

div.osusume ul li{
	background:url(../../images/service/check.png) no-repeat 0 0.4em;
	padding:5px 0 0 25px;
	font-size:14px;
	border-bottom:1px dotted #ccc;
}

/* ふきだし　リスト*/
ul.fukidashi {
  position: relative;
  display: inline-block;
  margin: 1.5em 0;
  padding: 7px 10px;
  min-width: 120px;
  max-width: 100%;
  color: #555;
  font-size: 16px;
  background: #FBEBD1;
  border-radius: 15px;
}

ul.fukidashi:before {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -15px;
  border: 15px solid transparent;
  border-top: 15px solid #e0edff;
}

ul.fukidashi p {
  margin: 0;
  padding: 0;
}
ul.fukidashi li {
  width: 100%;
  padding: 4px 0;
    padding-left: 0px;
  line-height: 1.4em;
  font-size: 15px;
  padding-left: 2em;
  text-indent: -2em;
  box-sizing: border-box;
}


/*----------------------------------------*/
img{
	max_width:100%;
	width:100%;
	height:auto;
	margin:0;
}

img.block{
	display:block !important;
}
img.center,
img.center2{
	display:block!important;
	margin:0 auto!important;
	}


img.sp{
	width:auto;
	height:auto;
}
img.sp_auto{
		width:auto;
		float:none;
		display:block !important;
		margin:0 auto 10px auto!important;
	}
img.l{
	float:left;
	display: block;
	width:auto;
	height:auto;
	margin-right:5px;
}
img.border{
	border:1px solid #ccc;
	box-sizing: border-box;
}

#main img.p80_s,
#main img.p50_s{
	display: block;
	width:80% !important;
	height:auto !important;
	margin:0 auto 10px auto !important;
}
#main img.p50_s{
	width:50% !important;
}

#pagetop {
    position: fixed;
    bottom: 10px;
    right: 10px;
}

#pagetop img{
    width:auto;
}

p.ptop{
	display:none;
}

p{
	margin-bottom:15px!important;
}

hr{
	clear:both;
	border: 0;
	border-top: #CCC dashed 1px;
	margin:15px 0;
}

.mt0{
	margin-top:0px !important;
}

.mt10,.mt10-s{
	margin-top:10px;
}

.mt20,.mt20-s{
	margin-top:20px;
}

.mt30{
	margin-top:30px;
}

.mt50{
	margin-top:50px;
}

.mb10{
	margin-bottom:10px !important;
}
.mb25{
	margin-bottom:25px !important;
}
.mb20,.mb20-s{
	margin-bottom:20px !important;
}
.mb30{
	margin-bottom:30px !important;
}
.mb50{
	margin-bottom:50px !important;
}

.mr10{
	margin-right:10px;
}

.ml30{
	margin-left:30px;
}

.ml50{
	margin-left:50px;
}

.mtb20{
	margin:20px 0 40px 0;
}

.clr{
	clear:both !important;
}
.bclr{
	clear:both !important;
}
.clearfix:after,
.s_clearfix:after{
	content: "";
	clear: both;
	display: block;
}

.r{
	float:right;
	margin:5px 0 0 5px;
}

.f-left{
	float:left;
}

.f-right{
	float:right;
}

.a-left{
	text-align:left;
}

.a-right{
	text-align:right;
}

.a-center,
.s_a-center{
	text-align:center !important;
}

.va-middle{
	vertical-align:middle;
}

/*----------------------------- 
幅  
----------------------------- */
.p20{
	width:20% !important;
}

.p34{
	width:34% !important;
}
.p50{
	width:50%;
}
.p80{
	width:80% !important;
}
/*----------------------------- 
フォント  
----------------------------- */
.red{
	color:#cc0000;
}

.blue{
	color:#0076bc;
}
.blue2{
	color:#3333cc;
}
.blue3{
	color:#008CD6;
}
.blue4{
	color:#4082B5;
}

.green{
	color:#129330;
}
.ygreen{
	color:#9adb77;
}
.pink{
	color:#e4238e;
}
.og,.org{
	color:#C23300;
}
.brown{
	color:#663333;
}
.fc-bge{
	color:#D98338;
}
.sm{
		font-size:11px;
	}
.bg{
		font-size:15px;
	}
.bo{
	font-weight:bold;
}

.lh120{
	line-height:1.2;
}
.f12{
	font-size:12px;
}
.f14{
	font-size:14px;
}
.f18{
	font-size:18px;
}
.font-s90{
	font-size:90%;
}
.font-s110{
	font-size:110%;
}
/*----------------------------- 
アイコン 
----------------------------- */
/* アイコン 　やじるし
基本の内部リンク　ピンクの→ */
.ic-arrow{
	background:url(../../images/base/ico_arrow30r_2.gif) no-repeat left 0.5em;
	padding: 0 0 0 10px;
}

/* 外部リンク　newwindowのアイコン */
.ic-gaibu{
	border-top:1px solid #cecece;
	padding: 20px 0;
	margin:0 !important;
}

.ic-gaibu:nth-last-of-type(1){
	border-bottom:1px solid #cecece;
	margin-bottom:30px;
}

.ic-gaibu a{
	width:90%;
	margin:0 auto;
	display: block;
	padding: 10px;
	text-decoration: none;
	text-align: center;
	color:#EF4806;
	border:1px solid #EF4806;
	border-radius:10px;
	-webkit-border-radius: 10px;	/* Safari,Google Chrome用 */
	-moz-border-radius: 10px;	/* Firefox用 */
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
}

.ic-gaibu br{
	border:1px solid #ff0000;
	margin-bottom:5px !important;
}

/* リスト　アイコン 　やじるし
基本の内部リンク　ピンクの→
*/
ul.arr_g{
	margin:0 0 20px 0;
	padding:15px 5px;
	border:1px solid #ccc;
	border-radius: 15px;
	box-sizing: border-box;
}

ul.arr_g li{
	font-size:95%;
	line-height:180%;
	border-bottom:2px dotted #ccc;
	margin:0 0 2px 20px;
	padding-top:8px;
	padding-bottom:8px;
	letter-spacing: -0.8px;
}

ul.arr_g li span{
	display:block;
	border:1px dotted #e599d4;
	padding:5px;
	font-size:12px;
	margin:5px 10px 5px 0;
	color:#BD2BB4;
}
ul.arr_g li a{
	text-decoration:none;
	color:#333;
}

ul.arr_g li a:hover{
	text-decoration:underline;
	color:#4688C5;
}

ul.arr_g img.link{
	width:auto !important;
	height:auto !important;
	margin:4px 15px 0 5px;
}
/* リスト　アイコン 　やじるし
基本の内部リンク　ピンクの→ 横並びver
*/

ul.arr_g2{
	margin:0 0 20px 0;
}
ul.arr_g2:after{
    content: "";
    display: block;
    clear: both;
}
ul.arr_g2 li{
	font-size:90%;
	line-height:160%;
	margin:0 2% 0 0;
	width:48%;
	float:left;
	border:1px solid #ececec;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
}

ul.arr_g2 li:nth-of-type(2n+2){
	margin:0 0 10px 0;
}

ul.arr_g2 li span{
	display:block;
	border:1px dotted #e599d4;
	padding:5px;
	font-size:12px;
	margin:5px 100px 5px 0;
	color:#BD2BB4;
}
ul.arr_g2 li a{
	display: block;
	text-decoration:none;
	color:#333;
	padding:12px 0 12px 22px;
}
ul.arr_g2 li img{
	display: none;
}
a.to_list2{
    width:85%;
	display: block;
	padding: 10px;
	border:1px solid #0754CC;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
	color:#0754CC;
	text-decoration: none;
	margin:10px auto;
	text-align: center;
	letter-spacing: -0.2px;
}
a.to_list2:after{
    content: "";
    display: block;
    clear: both;
}
ul.check_list li,ul.check_list_blue li {
	position:relative;
	padding: 0em 0.3em 0.3em 1.3em;
}
ul.check_list li:after,ul.check_list li:before,
ul.check_list_blue li:after,ul.check_list_blue li:before {
	position:absolute;
	content:'';
	display:block;
	background: #D98338;
	top: 0.43em;
	left: 0.5em;
	height: 11px;
	width: 4px;
	border-radius: 10px;
	transform: rotate(45deg);
}
ul.check_list_blue li:after,ul.check_list_blue li:before {
	background: #4082B5;
}
ul.check_list li:before,ul.check_list_blue li:before {
	top: 0.6em;
	left: 0.2em;
	height:8px;
	transform:rotate(-45deg);
}

/*リンク*/
.to_detail2 a,.to_detail3{
	width:90%;
	margin:0 auto 30px;
	display: block;
	padding:10px 5px;
	text-align: center;
	color:#0068B6;
	background:#E4E4E4;
	text-decoration: none;
	border-radius: 40px;
	font-weight:bold;
}

.to_detail3{
	background:#FFF;
	margin:10px auto 0;
	font-size:90%;
}
.to_detail2 a:hover{
	filter:alpha(opacity=80);
    -moz-opacity: 0.8;
    opacity: 0.8;		
}

p.to_link_h{
	width:98%;
	margin:5px auto;
	border:1px solid #0754CC;
	text-align: center;
}

p.to_link_h:nth-child(2){
	width:98%;
	margin:5px auto;
	border:1px solid #0754CC;
	text-align: center;
}

p.to_link_h a{
	padding:10px 0;
	display: block;
	text-decoration: none;
	color:#0754CC;
}
p.to_link_h a:hover{
	background: #0754CC;
	padding:10px 0;
	display: block;
	text-decoration: none;
	color:#fff;
}
.to_link_light a {
    width: 300px;
    display: block;
    padding: 12px;
    border: 1px solid #0754CC;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    color: #0754CC;
	background:#E1E1E1;
    text-decoration: none;
    margin: 30px auto 50px;
    text-align: center;
	font-weight:bold;
}
.to_link_light a:hover{
	color:#0754CC;
	background:#E1E1E1;
}

/*systemサイトへのリンク a>… >.detail3と利用*/
.to-Products{
	display:block;
	color:#333;
	box-sizing: border-box;
	padding:30px 15px 15px;
	text-decoration: none;
	position: relative;
	background: #D9E9F5;
}
.to-Products p{
	font-size:95%;
}
.to-Products[target="_blank"] .to-Products_img{

}
.to-Products[target="_blank"] ::after {
    content: '新しいウィンドウで開く';
    display: inline-block;
    position: absolute;
    top: 9px;
    right: 9px;
    overflow: hidden;
    width: 20px;
    height: 20px;
    vertical-align: middle;
    white-space: nowrap;
    text-indent: 100%;
    background-image: url('../../images/base/blankLink.png');
    background-size: 100%;
}
.to-Products[target="_blank"]:hover{
	background: #D9E9F5;
	text-decoration: none;
	color:#333;
}
/*system TOPへのリンク*/
.toLink-system{
    background: url("../../images/base/systemsite_bg.jpg") no-repeat center center;
    position: relative;
	background-size:cover;
    width: 100%;
    height: 220px;
    background-color: #fff;
}
.toLink-system a {
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
    text-decoration: none;
    color: #111;
	padding:30px 0;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}
.toLink-system a .transp{
	background:rgba(255,255,255,0.75);
	padding:15px 10px ;
	margin:0 20px auto;
	text-align: center;
	font-weight:bold;
}
.toLink-system .mds {
	font-size:20px ;
}
.toLink-system .t_txt {
    font-size: 13px;
    line-height:1.4;
    width: 100%;
	font-weight:bold;
	text-align:center;
	margin-bottom:0 !important;
}
.toLink-system .click {
	position: absolute;
	bottom:0;
	width:100%;
	background:#60ABBD;
	color:#fff;
	font-size:85%;
	padding:5px 8px;
	margin:0 !important;
	text-align:center;
	box-sizing: border-box;
}
/* 字下げ */
.txt_idt{
   padding-left: 1em !important;
   text-indent: -1em !important;	
}
/* 字下げ 5*/
.txt_idt2{
   padding-left: 4em !important;
   text-indent: -4em !important;	
}
.txt_idt3{
   padding-left: 3em !important;
   text-indent: -3em !important;	
}
/*マーカー*/
/* マーカー線・赤 */
.marker_red{
	background:linear-gradient(transparent 75%, #ffadad 75%);
}
/* マーカー線・青 */
.marker_blue{
	background: linear-gradient(transparent 75%, #c1e0ff 75%);
}
/* マーカー線・黄色 */
.marker_yel{
	background:linear-gradient(transparent 75%, #fff799 75%);
}
/*下線*/
.border_bge{
	border-bottom: solid 2px #D98338;
}
.border_blue4{
	border-bottom: solid 2px #4082B5;
}
/*リンクブロック*/
.toc_3cl,.toc_2cl{
	display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -ms-flex-wrap: wrap;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
}
.toc_3cl a,.toc_2cl a{
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;
	width:45%;
	margin:10px auto 0;
	font-weight:bold;
}
.toc_3cl a,.toc_2cl a{
	text-decoration: none;
	padding:1.5%;
    background-color: #F3F3F3;
	color:#4572b1;
	border:1px solid #4572b1;
}
.toc_3cl a:hover,.toc_2cl a:hover{
	background-color:#4572b1;
	color:#fff;
}
.toc_2cl a{
	width:49%;
	margin:5px 2% 5px 0;
	border:1px solid #1d4255;
	color:#1d4255;
	padding:10px ;
	text-align: center;
	text-decoration: none;
	box-sizing: border-box;
}
.toc_2cl a:nth-of-type(2n){
	margin:5px 0 !important;
}