@charset "utf-8";

/* ****************************************************
Title: css
---------------------------------------------------------------------------- */

.title_frame .title {
  display: flex;
  align-items: center;
  width: 400px;
  margin: 30px 0;
	font-size:24px;
	line-height:1;
}
.title_frame .title:before {
  content: url(/img/company/title_line.png);
    margin: 0 0.4em 0 0;
    height: 32px;
}
/* =============================
 .common
==============================*/

img{
  max-width: 100%;
}

a:hover{opacity: 0.8;}

h2.cont_bar{
  font-size: 140%;
  font-weight: 600;
  background-color: #2B2B2B;
  padding: 32px 0;
  color: #fff;
  margin-bottom: 80px;
  
}

h3.komidashi{
  font-size: 100%;
  font-weight: 600;
  padding-left: 5px;
  border-left: 5px solid #09204D;
  margin-bottom: 20px;
}
h3.komidashiA{
  font-size: 140%;
  font-weight: 600;
  margin-bottom: 20px;
  text-align: center;
}

.content{
  margin-bottom: 0px;
}
.col5{
  width: 49%;
}
.col4{
  width: 40%;
  box-sizing: border-box;
}
.col2{
  width: 20%;
  box-sizing: border-box;
  text-align: center;
}

.font-32{
  font-size: 32px;
}

.mb{
  margin-bottom: 20px;
}

.parent{
  position: relative;
}

/* =============================
 .section0
==============================*/



.flex.anc{
  justify-content: space-between;
}

.anc .anc_box{
  width: 32%;
}

.anc .anc_box a{
  color: #fff;
  text-decoration: none;
}
.anc .anc_box a i{
  transition: .3s linear;
}
.anc .anc_box a:hover i{
  transform: translateY(5px);
}

.anc .anc_box .anctext{
  background-color: #2B2B2B;
  text-align: center;
  padding: 5px 0;
}

#contents1 .section{
	margin-top:40px;
}

/* =============================
 .section1
==============================*/
body#secondary .text_area#contents1{
	padding:0;
}
.sec01 .first_txt {
	margin-bottom: 50px;
}

.sec01 .first_txt .chead {
	font-size: 120%;
	font-weight: 600;
  margin-bottom: 40px;
}

.sec01 .first_txt p {
	font-size: 90%;
  margin-bottom: 80px;
}


.sec01 .second_txt .chead {
	font-size: 120%;
	font-weight: 600;
  margin-bottom: 40px;
}

.sec01 .flex{
  justify-content: space-between;
  margin-bottom: 0px;
}

.sec01 .flex.second_txt .box {
  width: 45%;
  position: relative;
}


.sec01 .flex.second_txt .box2 {
  width: 55%;
  position: relative;
}

.sec01 .flex.second_txt {
  align-self: center;
}
.sec01 .flex.second_txt .box h3.msgbox{
  font-size: 100%;
  font-weight: 600;
  line-height: 2.5em;
  white-space: nowrap;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translatey(-50%);
  -webkit-transform: translateX(-50%) translatey(-50%);
}

.sec01 .flex.second_txt .box h4.msgtitle{
  font-size: 100%;
  font-weight: 600;
  padding-left: 5px;
  border-left: 5px solid #09204D;
  margin-bottom: 20px;
}



.sec01 .flex.second_txt .box2 h3.msgbox{
  font-size: 100%;
  font-weight: 600;
  line-height: 2.5em;
  white-space: nowrap;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translatey(-50%);
  -webkit-transform: translateX(-50%) translatey(-50%);
}

.sec01 .flex.second_txt .box2 h4.msgtitle{
  font-size: 100%;
  font-weight: 600;
  padding-left: 5px;
  border-left: 5px solid #09204D;
  margin-bottom: 20px;
}


.sec01 .flex.second_txt .box p{
  font-size: 90%;
  
}


.sec01 .flex.second_txt .box2 p{
  font-size: 90%;
  
}

.sec01 .textarea p{
  margin-bottom: 30px;
}

.sec01 .textarea p span{
  font-size: 100%;
  margin-left: 10px;
  padding: 5px 7px;
  color: #F3F4F7;
}

.sec01 .textarea p .ji{
  background-color: #738B90;
}

.sec01 .textarea p .ke{
  background-color: #808080;
}

.sec01 .parent .mid{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
  -webkit-transform: translateX(-50%) translateY(-50%);
}

.textbox{font-size: 90%;}

.textbox span{
  font-size: 150%;
  font-weight: 600;
  display: block;
}

/* =============================
 .section2
==============================*/
#contents2 {
	padding-top:106px;
}
.sec02 .first_txt {
	margin-bottom: 50px;
}

.sec02 .first_txt .chead {
	font-size: 120%;
	font-weight: 600;
  margin-bottom: 40px;
}

.sec02 .first_txt p {
	font-size: 90%;
  margin-bottom: 80px;
}

.sec02 .flex{
  justify-content: space-between;
  margin-bottom: 0px;
}

.sec02 h2.msgtitle{
  font-size: 100%;
  font-weight: 600;
  line-height: 2em;
  margin-bottom: 20px;
}

.sec02 h2.msgtitle + p{
  font-size: 90%;
}

.sec02 .img3 li{
  width: 30%;
}
.sec02 .img3 li a{
  text-decoration: none;
  color:#2d2d2d;
}
.sec02 .img3 img{
  margin-bottom: 10px;
}
.sec02 .btn_more{
  background-color: #2B2B2B;
  color: #fff;
  padding: 2px 7px;
  font-size: 90%;
}

.sec02 .btn_more i{
  margin-top: 2px;
  font-size: 75%;
}

/* =============================
 .section3
==============================*/
#contents3 {
	padding-top:106px;
}
.sec03 .first_txt {
	margin-bottom: 50px;
}

.sec03 .first_txt .chead {
	font-size: 120%;
	font-weight: 600;
  margin-bottom: 40px;
}

.sec03 .first_txt p {
	font-size: 90%;
  margin-bottom: 80px;
}

.sec03 .flex{
  justify-content: space-between;
  margin-bottom: 80px;
}

.sec03 h2.msgtitle{
  font-size: 100%;
  font-weight: 600;
  line-height: 2em;
  margin-bottom: 20px;
}

.sec03 h2.msgtitle + p{
  font-size: 90%;
}

.sec03 .parent .mid{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
  -webkit-transform: translateX(-50%) translateY(-50%);
}

.sec03 .bgarea{
  background-color: #F3F3F2;
  padding: 80px;
}

.sec03 .bgarea h2{
  font-size: 150%;
  text-align: center;
  margin-bottom: 80px;
}

.sec03 .bgarea .flex{
  justify-content: space-between;
  align-items: center;
}

.font_b{font-weight: 700; font-size: 110%;}


@media screen and (max-width: 740px) {
.section {width: 100%;}
/* sec01 */
.sec01 {width: 100%;}
.sec01 .first_txt .chead {line-height: 1.5;}
.sec01 .flowlist li .flownum {width: 20px;}

.sec01 .flowlist li .flownum{
width: 20px;
border-bottom: solid 14px #fff;
}
.sec01 .flowlist li .flownum:before{
bottom: -19px;
border-width: 10px 0 10px 10px;
left: 5px;
}
.sec01 .flowlist li .flownum:after{
bottom: -15px;
border-top: 10px solid transparent;
border-bottom: 10px solid transparent;
border-left: 10px solid #DACAB6;
left: 5px;
}
.sec01 .flowlist li dl {
	width: 90%;
	padding: 10px;
}
  
.anc_box img{
  display: none;
}

.sec01 .flex.second_txt{
  display: block;
}
  
.sec01 .flex.second_txt .box {
  width: 100%;
}
	
.sec01 .flex.second_txt .box2 {
  width: 100%;
	}
	
.sec01 .first_txt p,.sec02 .first_txt p,.sec03 .first_txt p {
  margin-bottom: 40px;
}
  
.sec01 .flex.second_txt .box h3.msgbox {
  text-align: center;
  margin-bottom: 40px;
  position: relative;
  top: 0;
  left: 0;
  transform: none;
  -webkit-transform:none;
}
  
.sec01 .flex.second_txt .box2 h3.msgbox {
  text-align: center;
  margin-bottom: 40px;
  position: relative;
  top: 0;
  left: 0;
  transform: none;
  -webkit-transform:none;
}
  
.sec01 .flex {
  margin-bottom: 40px;
}

.sec01 .flex.spblock{
  display: block;
}
  
.sec01 .flex.spblock .col5{
  width: 100%;
  margin-bottom: 20px;
}
  
.sec01 .parent .mid {
  position: relative;
  top: 0;
  left: 0;
  transform: none;
  -webkit-transform: none;
}

.sec02 .flex,.sec03 .flex {
  display: block;
  margin-bottom: 40px;
}

.sec02 .flex > div,.sec03 .flex > div,.sec02 .flex > li,.sec03 .flex > li{
  width: 100%;
  margin-bottom: 20px;
}
  
h2.msgtitle {
  text-align: center;
  margin-bottom: 40px!important;
}
  
.sec03 .bgarea {
  padding: 40px 20px;
}
.sec03 .bgarea h2 {
  text-align: center;
  margin-bottom: 20px;
}
  h2.cont_bar{margin-bottom: 40px;}
  .sec01 .first_txt .chead,.sec02 .first_txt .chead,.sec03 .first_txt .chead{
    font-size: 110%;
  }
}