@charset "UTF-8";

/* **************************************************

Name: products.css

Description: Setting of grid layout

***************************************************** */

/*法人のお客さまページリニューアル2510*/

*,
*:before,
*:after {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

.LinkNewWin{
	background: url(/image/jp/r1/icon/icon_new_window.gif) no-repeat right top;
	padding:0 18px 0 0;
}

.ListStyle5 {
      list-style-type: none;
      counter-reset: item-counter; /* カウンタの初期化 */
			font-size: 90%;
			padding-left: 0;
}

.ListStyle5 li::before {
      counter-increment: item-counter; /* カウンタの増分 */
      content: counter(item-counter) ". "; /* 番号の表示 */
      color: #CC0000; /* ここで数字の色を指定 */
			font-weight:600;
}
.ListStyle5 li p{
	padding-left: 1.0em;
	margin: 0 0 1em;
}

.ListStyle5 li ul{
	padding-left: 1.0em;
	font-size: 100%;
}

.ListStyle5 li ul li::before {
	content:'';
}

/*ボタン*/

.ButtonStyle1.largeBtn1 a { 
	border-radius: 5px;
	width:400px;
	padding-top:10px;
	padding-bottom:10px;
}
.ButtonStyle1.largeBtn1 a b  { line-height: 24px; font-size: 20px; padding-left: 20px; padding-right: 20px ; }

@media screen and (max-width: 767px){
	.ButtonStyle1.largeBtn1 a{
		width:100%;
	}
}

.red{color:#CC0000;}

.ttl_corp {
	margin-left: -15px;
	margin-right: -15px;
	height: 100px;
	padding-top: 0;
	padding-left: 15px;
	box-sizing: border-box;
	display: flex;
	align-items: center;
	background-image: url("/group/procedure/images/bg_corp_sp.png");
	background-color: #D6E9F5;
	background-size: 234px 100px;
	background-position: right center;
	background-repeat: no-repeat;
	margin-bottom: 25PX;
	}
.ttl_corp h1 {
	margin: 0;
	display: flex;
	flex-direction: column;
	font-size:160%;
	font-weight:600;
	color:#222222;
 }
.ttl_corp h1 {
	margin: 0;
	display: flex;
	flex-direction: column;
 }
.ttl_corp h1 span {
	margin: 0 0 0 0; }

@media screen and (min-width: 768px) {
	.ttl_corp {
		margin-left: 0;
		margin-right: 0;
		padding-left: 27px;
    flex-direction: row;
		background-image: url("/group/procedure/images/bg_corp_pc.png");
		background-size: 427px 100px;}
	.ttl_corp h1 {
		margin: 0;
		flex-direction: row;
		align-items: center;
		}
	.ttl_corp h1 span {
		margin: 0 0 0 0; }
}

h2.case_ttl{
	font-size: 150%;
  font-weight: bold;
  color: #222;
	background: none;
	width:100%;
	border-radius: 10px;
	background: #F4F4F4;
	text-align:left;
	padding:10px 20px;
	margin:0 auto 1.5em;
}
h2.case_ttl::before {
	display: inline-block;
	margin: 0 10px 4px 0;
	width: 10px;
	height: 10px;
	content: '';
	border-radius: 100%;
	background:#CC0000;
}

.corp_header {
  border-left: solid 5px #cc0000;
  border-bottom: solid 1px #d9d9d9;
  background: none;
  padding: 5px 0 7px 10px;
  font-size: 130%;
  font-weight: bold;
  color: #4D4D4D;
	margin-top:1em;
  margin-bottom: 25px; }


.gray_ttl_box{
	width:100%;
	border-radius: 10px;
	background: #F4F4F4;
	text-align:center;
	padding:15px 5px 10px;
	margin-bottom:1em;
}

.Column1andHalf {
	width: 48%;
}
@media screen and (max-width: 767px) {
    .Column1andHalf{
     margin-left: 15px !important;
		 width: 100%; } 
}


.corp_tag a{
	display: block;
	padding: 30px 15px 20px;
	margin-bottom: 15px;
	border: #B3B3B3 solid 1px;
	text-decoration: none;
	background-image: url(/image/jp/r1/icon/icon_link_right_l_hd.gif),url(/general/corp/images/img_back_tag.png);
	background-repeat: no-repeat,no-repeat;
	background-position: right 2px center,center center;
	background-size: 16px 16px,cover;
}
.corp_tag a:hover{
	background-position: right 0 center,center center;
	background-color: #f2f2f2;
}
.corp_tag a h3{
	display:inline-block;
	border-bottom:#C00 2px solid;
	color:#222;
}
.ImgOnlyStyle img {
	width: 100%;
	height: auto;
}

h4{
	font-weight: bold;
}

table.Tbls01,
table.Tbls02,
table.Tbls03{
	width:100%;
}

table.Tbls01 th{
	background-color: #FA000F;
	color:#FFF;
	font-weight: bold;
	text-align: center;
	font-size:90%;
	border:#FFF solid 1px;
  padding:5px;
}
table.Tbls01 td{
	background-color: #FDCBCC;
	border:#FFF solid 1px;
	font-size:90%;
    padding:5px;
}
table.Tbls01 tr:nth-child(odd) td {
  background: #FEE7E7;
}
table.Tbls02 th{
	background-color: #747474;
	color:#FFF;
	font-weight: bold;
	text-align: center;
	font-size:90%;
	border:#FFF solid 1px;
  padding:5px;
}
table.Tbls02 td{
	background-color: #FFF;
	border:#FFF solid 1px;
	font-size:90%;
  padding:5px;
}
table.Tbls02 tr:nth-child(1) td {
  background: #FFF;
}
table.Tbls02 tr:nth-child(odd) td {
  background: #FDCBCC;
}
table.Tbls02 tr:nth-child(1n+4) td {
  background: #FEE7E7;
}
table.Tbls02 tr:nth-child(1n+5) td {
  background: #F2F2F2;
}
table.Tbls02 tr:nth-child(2n+5) td {
  background: #D0D0D0;
}
table.Tbls03 th{
	background-color: #919191;
	color:#FFF;
	font-weight: bold;
	text-align: center;
	font-size:90%;
	border:#FFF solid 1px;
	border-bottom:#FFF solid 15px;
	width:30%;
}
table.Tbls03 td{
	background-color: #FFF;
	border:#FFF solid 1px;
	font-size:90%
}

.BlackBorderT{
	border-top: #222 2px solid !important;
}
.BlackBorderB{
	border-bottom: #222 2px solid !important;
}
.BlackBorderL{
	border-left: #222 2px solid !important;
}
.BlackBorderR{
	border-right: #222 2px solid !important;
}
.RedBorderT{
	border-top: #CC0000 2px solid !important;
}
.RedBorderB{
	border-bottom: #CC0000 2px solid !important;
}
.RedBorderL{
	border-left: #CC0000 2px solid !important;
}
.RedBorderR{
	border-right: #CC0000 2px solid !important;
}

.BlackBox{
	width:100%;
	border: #222 2px solid;
	padding:20px 30px 0 20px;
	position: relative;
}
.BlackBox:before {
  content: "";
  position: absolute;
  top: -30px;
  left: 35%;
  margin-left: -15px;
  border: 15px solid transparent;
  border-bottom: 15px solid #222;
}
.RedBox{
	width:auto;
	border: #CC0000 2px solid;
	padding:10px;
	font-size:90%;
	color:#CC0000;
	font-weight:bold;
	margin-bottom:0px;
	display:inline-block;
	position: relative;
}
.RedBox:before {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -15px;
  border: 15px solid transparent;
  border-top: 15px solid #CC0000;
}

.FontRed{
	color:#CC0000;
}

/* flow */

.progressbar {
  display: flex;
  flex-wrap: wrap;
}
.progressbar .item {
	align-items: center;
    width: 16.66%;
    text-align: center;
	align-content: center;
    position: relative;
    padding: 14px 0 13px 24px;
    background: #919191;
    color: #FFF;
	font-size:90%;
	font-weight:bold;
}
.progressbar .item:first-child{
	padding: 10px 0 10px 0;
}
.progressbar .item:not(:last-child)::before,
.progressbar .item:not(:last-child)::after {
    position: absolute;
    z-index: 2;
    top: 0;
    bottom: 0;
    left: 100%;
    content: '';
    border: 47px solid transparent;
    border-left: 20px solid #919191;
    margin: auto;
}
.progressbar .item:not(:last-child)::before {
    margin-left: 2px;
    border-left-color: #FFF;
}

@media screen and (max-width: 767px) {
	.progressbar {
	  flex-direction: row;
	}
	.progressbar .item {
		width: 100%;
		margin-bottom: 15px;
		padding: 15px 0 15px 0;
	}
	.progressbar .item:not(:last-child)::before,
	.progressbar .item:not(:last-child)::after {
	  content: "";
	  position: absolute;
	  top: -15px;
	  left: 50%;
	  margin-left: -15px;
	  border: 15px solid transparent;
	  border-top: 15px solid #919191;
	}
	.progressbar .item::before{
		content: "";
	  position: absolute;
	  top: -15px;
	  left: 50%;
	  margin-left: -15px;
	  border: 15px solid transparent;
	  border-top: 15px solid #919191;
	}
	.progressbar .item:first-child::before,
	.progressbar .item:first-child::after{
	  border:none;
	}
}

/* active */

.progressbar .item.active {
    z-index: 1;
    background: #F4000F;
    color: #FFF;
}
.progressbar .item.active:not(:last-child)::after {
    border-left-color: #F4000F;
}
.progressbar .item.active:not(:last-child)::before {
    border-left: none;
}

/*flow2*/
:root {
  --flowchart-size: 30px;/* 番号のサイズ 変更可 */
  --flowchart-border: 5px;/* 縦線太さ 変更可 */
}
.flowchart {
  list-style: none !important;
  counter-reset: flownum;/* リストアイテムの名称(任意) */
  margin: 1em 0 0;/* フローチャートと前後要素との距離(任意) */
  padding: 0 !important;
}
.flowchart li {
  position: relative;
  padding: 0 0 2em calc(var(--flowchart-size) + 6px);/* 6px がタイトルとの距離であり余白 */
}

/* 番号部位デザイン */
.flowchart li::before {
  content: counter(flownum);
  counter-increment: flownum;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  top: -5px;/* 通常は 0, 横に並ぶタイトルとのバランスを見て調整 */
  left: 0;
  z-index: 2;
  width: var(--flowchart-size);
  height: var(--flowchart-size);
  border-radius: 50%;/* 番号円形, 四角形で良ければこの一行削除 */
  background: #CC0000;/* 番号背景 */
  color: white;/* 番号文字色 */
}

/* 縦線部位デザイン */
.flowchart li::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: calc(var(--flowchart-size) / 2 - calc(var(--flowchart-border) / 2));
  z-index: 1;
  width: var(--flowchart-border);
  height: 100%;
  background: #B3B3B3;/* 線の色 */
}

/* 工程タイトル */
.flowchart-title {
  margin: 0 0 .6em;
  font-weight: bold;
  font-size: 100%;
  line-height: 1.4;/* 大きめの文字は 1.2 〜 1.4 程度で調整すると良い */
}

/* 最終工程の縦線が必要な方ここから削除 */
.flowchart li:last-of-type::after {
  content: none;
}
/* 最終工程の縦線が必要な方ここまで削除 */

/* p要素を利用した場合の調整 */
.flowchart li p {
  margin: 1em 0 !important;
	font-size: 90%;
}
.flowchart li p:last-of-type {
  margin-bottom: 0 !important;
}