/* CSS Document */

/* bootstrap拡張 */

.inline-icon {height:1em; vertical-align: baseline;}
.inline-icon2 {height:2em; vertical-align: top;}
/*画面サイズxs(~767px)の場合*/
@media screen and (max-width:767px) {
	.inlineblock-xs { display:inline-block; }
	.block-xs { display:block; }
}


/* マウスカーソル */

.cursor-link { cursor:pointer; }
.inlineBlock { display: inline-block; }
.margin-bottom2em { margin-bottom:2em; }
.wf-mplus1p { font-family: "M PLUS 1p"; }
.inline-icon { vartical-align:top; width:1.4rem; }

* {
	font-size:12pt;
	color:#444444;
}

html {

}

/* navbar分の高さのマージンを設定 */
body {
	margin-top:81px;
	background-color: #fefcf9;
}

/*画面サイズxs(~767px)の場合*/
	@media screen and (max-width:767px) {
		body {margin-top:55px;}
	}

label {font-weight: normal}

/* header */
.headArea {
	border-top:3px solid #1565bf;}


/* ページタイトル */

.pageTitle {
	background-image: url("../images/h1-bg-image.png");
	background-repeat: repeat-x;
}

	h1 {
		/* text-shadow: 1px 1px 1px rgba(0,0,0,0.20); */
		font-family: 'Noto Sans JP', sans-serif;
		color:#777777;
		letter-spacing: 0.03em;
		margin-top:10px;
		padding: 0px 10px 10px 10px;
		font-size:19pt;
		border-bottom: 1px solid #e6e6e6;
		height:52px;
	}
		h1.noMyseinoTitle {padding-top:0.3em;}
			/*画面サイズxs(~767px)の場合*/
			@media screen and (max-width:767px) {
				h1.noMyseinoTitle {padding-top:0.8em;}
			}
	h1 span {font-size:0.2rem; display: block;text-shadow:none; letter-spacing: 0em;}
		/*画面サイズxs(~767px)の場合*/
		@media screen and (max-width:767px) {
			h1 {text-align:center;}
		}

	/* マイセイノーなどのサービス名の上にミニタイトルがない場合 */
	h1.noMiniTitle {padding-top:10px;}

/*画面サイズxs(~767px)の場合*/
@media screen and (max-width:767px) {
    h1 {
		font-weight:bold;
		padding-top:5px;
		font-size: 12pt;
	}
	    h1 span {
		font-weight:normal;
	}
}

h2 {
	margin-top:0;
	margin-bottom:0;
	border-top:1px solid #163f91;
	border-right:1px solid #163f91;
	border-left:1px solid #163f91;
	border-top-left-radius: 6px;
	border-top-right-radius: 6px;
	color:#ffffff;
	/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#285ab9+65,123e8f+85 */
	background: #285ab9; /* Old browsers */
	background: -moz-linear-gradient(top,  #285ab9 65%, #123e8f 85%); /* FF3.6-15 */
	background: -webkit-linear-gradient(top,  #285ab9 65%,#123e8f 85%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to bottom,  #285ab9 65%,#123e8f 85%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#285ab9', endColorstr='#123e8f',GradientType=0 ); /* IE6-9 */
}
	h2 div.inner{
		background-image: url("../images/h2-background- pattern.png");
		background-repeat: repeat;
		width:100%;
		height:100%;
		font-size:12pt;
		padding:12px;
		color:#ffffff;
		font-weight:bold;
		letter-spacing: 0.05em;
	}

div.h2-detailAreaFrame{
	border-right: 1px solid rgba(0,0,0,0.20);
	border-bottom: 1px solid rgba(0,0,0,0.20);
	border-left: 1px solid rgba(0,0,0,0.20);
	border-radius: 0 0 5px 5px;
	padding: 1em 1em;
	background-color: rgba(255,255,255,0.80);
	margin-bottom:20px;
	min-height:240px;
}
div.h2-detailAreaFrame p {
	margin:0 15px;
}


h3 {
	border-top:1px solid #cdcdcd;
	border-bottom:1px solid #cdcdcd;
	background-color: #F9F9F9;
	font-size:11pt;
	font-weight:bold;
	padding: 10px 10px 10px 16px;
	margin-top:0px;
}
h3:before  {
  position: relative;
  top: 0;
  left:-0.5rem;
  color: #003CAB;
  font-size: 11pt;
  font-weight: bold;
	/* content:'◯'; */
	content:'\f192';
	font-family:'Font Awesome 5 Free';
}

ul {margin:12px 18px 0px 12px;}
	ul.hosoku-red li {list-style-type: none; margin-bottom:0.15em;}
	ul.hosoku-red li:before {
		content:'\f14a';
		font-family:'Font Awesome 5 Free';
		font-weight:900;
		color: rgba(232,0,0,1.00);/*アイコン色*/
		position: absolute;
		left :3.7em;
	}

	ul.hosoku-blue li {list-style-type: none; margin-bottom:0.15em;}
	ul.hosoku-blue li:before {
		content:'\f14a';
		font-family:'Font Awesome 5 Free';
		font-weight:900;
		color: rgba(0,84,232,1.00);/*アイコン色*/
		position: absolute;
		left :3.7em;
	}

/* 箇条書きを※ */
	ul.hosoku-kome li {list-style-type: none; margin-bottom:0.15em;}
	ul.hosoku-kome li:before {
		content:'※';
		color: rgba(0,0,0,0.50);/*アイコン色*/
		position: absolute;
		left :4em;
	}



.hosokuText {color:rgba(0,0,0,0.79); font-size:9pt; margin-left:0.50em;}


/* この項目の先頭へ */
.inputTopArea {
	text-align: right;
	font-size: 8pt;
}

	.inputTopArea a {
		color:#7B7B7B;
		font-size: 8pt;
	}

		.inputTopArea a span.glyphicon {
			color:#5EB8FF;
			font-size: 8pt;
		}

/* ウィンドウ閉じるボタン */
button.btn-xs i.fas,
.btn-xs i.fas{
	color:#5EB8FF;
	vertical-align: middle;
	font-size:1.0em;
	margin-bottom:0.1em;
}

/* ステップ表示 */
.step3 li {
width:calc(100% / 3); /* 3分割する場合 */
}
.step4 li {
width:calc(100% / 4); /* 4分割する場合 */
}

.step{
  list-style-type: none;
  display:table;
  width:100%;
  padding:0;
  margin:0em 0 2em 0;
  overflow:hidden;
}
.step li{
  display:table-cell;
  position:relative;
  background: #CECECE;
  /* padding: auto 0.5em auto 2em; */
  padding: 1em 0.5em 1em 2em;
  color: #888888;
	font-weight:normal;
	font-size:11pt; /* 分割する数や文字数によりこの値は調整 */
}
	
	/*画面サイズsm(768px～991px)の場合*/
	@media screen and (min-width:768px) and (max-width:991px) {
		.step3 li{
			font-size:10pt; /* 分割する数や文字数によりこの値は調整 */
		}
		.step4 li{
			font-size:8pt; /* 分割する数や文字数によりこの値は調整 */
		}
	}	

	 /*画面サイズmd(992px～1199px)の場合*/
	@media screen and (min-width:992px) and (max-width:1199px) {
		.step4 li{
			font-size:10pt; /* 分割する数や文字数によりこの値は調整 */
		}
	}
	
.step li:last-child{
  padding-right: 1em;
}
.step li:last-child:before,
.step li:last-child:after{
  display:none;
}
.step li:before,
.step li:after{
  content: "";
  position: absolute;
  width: 0;
  height: 0;
  margin: auto;
}
.step li:before{
  top:-15px;
  right:-1em;
  border-style: solid;
  border-color: transparent transparent transparent #fff;
  border-width: 40px 0 40px 1em;
  z-index: 10;
}
.step li:after{
  top:-15px;
  right:-.8em;
  border-style: solid;
  border-color: transparent transparent transparent #CECECE;
  border-width: 40px 0 40px 1em;
  z-index: 10;
}
.step li.is-current{
  background: #3230bb;
  font-weight: bold;
	color:#ffffff;
}
.step li.is-current:after{
  border-color: transparent transparent transparent #3230bb;
}

/* /ステップ表示 */