@charset "utf-8";
/* CSS Document */

/*mainコンテンツのh2(実績)タグ設定*/
#bank h2 {
	clear: both;
	margin: 10px 20px 20px 20px;	/*上下、左右への余白*/
	font-size: 160%;	/*文字サイズ*/
	color: #1f2c5c;		/*文字色*/
    text-align: center;
    border-bottom: 1px solid #999999;	/*枠線の幅、線種、色*/
}

#bank h3, #bank02 h3 {
	clear: both;
    color: #1f2c5c;
	margin-bottom: 20px;
	padding: 5px 20px;	/*上下、左右への余白*/
	font-size: 120%;	/*文字サイズ*/  
    background: #eeeeee;
    text-align: center;
    border-bottom: 1px solid #999999;	/*枠線の幅、線種、色*/
    border-radius: 0px;	/*角丸のサイズ。この行を削除すれば角が尖った長方形になります。*/
    border-left: none;
    border-top: none;
    border-right: none;
}
#bank h3::first-letter {
	border-left: none;	/*左の線の幅、線種、色*/
	padding-left: 0px;				/*線とテキストとの余白*/
}

/*コンテンツのh4タグ設定*/
#bank h4 {
	clear: both;
	color: #1f2c5c;
    font-size: 110%;	/*文字サイズ*/
    margin-left: 20px;
    margin-bottom: 6px;
    border-bottom: 1px solid #1f2c5c;	/*枠線の幅、線種、色*/
}
#bank h4:before {
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    content: "\f061";
    margin-right: 8px;
}

/*マッチングの仕組みのフロー
------------------------------------------------------------------------------------------------------------------------------------------------------*/
.matching_wrap {
    display:flex;
    text-align: center;
    margin: 16px 0px 0px 0px;
}
.matching_aria {
    float: left;
    width: 28%;
    padding-top: 8px;
    background: #f4f4f4;
    border-left: solid 6px #b1b9d7;
    border-right: solid 6px #b1b9d7;
    box-shadow: 0px 2px 3px rgba(0, 0, 0, 0.33);
}

.arrow_aria {
    float: left;
    width: 5%;

    margin: 0 1%;
	-ms-writing-mode: tb-rl;
	writing-mode: vertical-rl;
    
    top:0;
    bottom:0;
    text-align: center;
    left:50%;
    transform:translate(-25%, 0%);
}

.matching_aria_title {
    font-size: 140%;
    font-weight: bold;
}
.matching_aria_titlemini {
    font-size: 90%;
    font-weight: bold;
    line-height: 0em;
    margin-top: -20px;
}
#main p.matching_aria_text {  /* メインの#main p設定が効くため#main pから記述 */
    border-top: dotted 1px #1f2c5c;
    padding-top: 20px;
    margin-top: 0px;
}

.arrow_aria02 {
    font-size: 120%;
    text-align: center;
    margin: 16px 0px 0px 3%;
}

.matching_ok {
    padding: 0.5em 1em;
    margin: 16px 0px 0px 0px;
    color: #1f2c5c;
    font-size: 140%;
    font-weight: bold;
    text-align: center;
    background: white;
    border-top: solid 5px #43b934;
    box-shadow: 0 3px 5px rgba(0, 0, 0, 0.22);
}

/*承継するメリット・デメリット
------------------------------------------------------------------------------------------------------------------------------------------------------*/
.merit_demerit {
    display:flex;
    
}

.merit_demerit_aria {
    float: left;
    width: 48%;
    margin: 1em 0px 0px 3%;
    background: #fff;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.22);
}
.merit_demerit_aria .merit_title, .merit_demerit_aria .demerit_title {
    font-size: 1.2em;
    text-align: center;
    color: #FFF;
    font-weight: bold;
    letter-spacing: 0.05em;
}
.merit_title {
    background: #b1b9d7;
}
.demerit_title {
    background: #6a79b1;
}
.merit_demerit_aria p {
    padding: 15px 20px;
    margin: 0;
}
.merit_demerit ul {
    padding: 6px 12px 0 26px;
    list-style-type: disc;
}

/*マッチングの仕組みのフローの中の矢印
------------------------------------------------------------------------------------------------------------------------------------------------------*/
.arrow_pc { display:inline !important; }
.arrow_sp { display:none !important; }


/*申込フォームボタン　設定*/
.btn_form {
	color: #fff;
	width: 300px;
	margin: 0 auto 1em;
	background-color: #113893;
	font-size: 1.2em;
	padding: 0.5em 1em;
	text-align: center;
	border-radius: 10px;
	cursor:pointer;
}
.btn_form a {
	display:block;
	text-decoration: none;
	color: #FFFFFF;
}

.btn_form:hover {
  color: #fff;
  background: #5e7aba;
}

/*画面幅900px以下の設定
------------------------------------------------------------------------------------------------------------------------------------------------------*/
@media screen and (max-width:900px){

  .matching_wrap {
      display: inline;
  }
  .matching_aria,.arrow_aria {
      float: none;
      width: 98%;
  }
  .arrow_aria {
      margin: 10px 0 10px;
      left:100%;
      transform:translate(0%, 0%);
      -webkit-writing-mode: horizontal-tb;
      writing-mode: horizontal-tb;
  }
  
  .matching_aria_title {
      font-size: 140%;
      font-weight: bold;
  }
  
  .matching_aria_titlemini {
      font-size: 90%;
      font-weight: bold;
  }
  
  #main p.matching_aria_text {
      padding-top: 10px;
      margin-top: 0px;
  }
  
  .arrow_aria02 {
  
  }
  
  .matching_ok {
       margin: 10px 5px 10px; 
  }
  
/*承継するメリット・デメリット
------------------------------------------------------------------------------------------------------------------------------------------------------*/
  .merit_demerit {
      display: inline;
  }
  .merit_demerit_aria {
      float: none;
      width: 99%;
      margin: 10px 5px 10px; 
  }  
  
  
  
  
  /*マッチングの仕組みのフローの中の矢印
  ------------------------------------------------------------------------------------------------------------------------------------------------------*/
  .arrow_pc { display:none !important; }
  .arrow_sp { display:inline !important; }
}


/*画面幅800px以下の設定
------------------------------------------------------------------------------------------------------------------------------------------------------*/
@media screen and (max-width:800px){

  .matching_aria_titlemini {
      margin-top: 0px;
  }
  #main p.matching_aria_text {
      padding-top: 10px;
      margin-top: 20px;
  }

}


/*画面幅767px以下の設定
------------------------------------------------------------------------------------------------------------------------------------------------------*/
@media screen and (max-width:767px){



}


/*画面幅480px以下の設定
------------------------------------------------------------------------------------------------------------------------------------------------------*/
@media screen and (max-width:480px){




}