@charset "utf-8";

/*------baselayout------*/
.wrap1200{
	width: 1200px;
	padding: 0px 25px;
	margin-right: auto;
	margin-left: auto;
}
.wrap1{	width: 900px;
	margin-right: auto;
	margin-left: auto;}

.rmt1{margin-top: 100px;}
.rmt2{margin-top: 50px;}
.rmt3{margin-top: 30px;}
.rmt4{margin-top: 15px;}
/*------リード------*/
.read{color: #FFF; padding: 20px;text-align: center;margin-top: 85px;
	width: 1200px;
	margin-right: auto;
	margin-left: auto;}

h1{font-size:1.5em;font-weight: 500;}
h2{padding: 10px 0px 15px 0px; font-size: 1.5em;font-weight: 500;color: #FFF; text-align: center;}
h3{font-size:2em;font-weight: 500;text-align: center;line-height: 160%;}
h4{font-size:2em;font-weight: 500;text-align: center;line-height: 160%;margin-top: 80px;margin-bottom: 50px;}
h5{font-size:1.2em;font-weight: 700;line-height: 160%;margin-bottom: 20px;}

/*------メインイメージ------*/
.mainimg{
	width: 1200px;
	margin: 0px auto;
	padding: 0px auto;}
.mainimg img{width: 100%;}
/*------ブロック1------*/
.flex-block1{display: flex;
  justify-content:flex-start;
  flex-wrap: wrap;
  flex-direction: row;
  align-items:center;
  }
.flex-block1-c{width:  30%;}
.flex-block1-arrow{width: 5%;}
.flex-block1-c img{width: 100%;}
.flex-block1 p{font-size:1.2em;font-weight: 700;text-align: center;}
/*------ブロック2サービス紹介------*/
.flex-block2{display: flex;
  justify-content:space-between;
  flex-wrap: wrap;
  flex-direction: row;
  align-items:center;
  }
.flex-block2-box{width: 48%;height: 160px;
display: flex;
  justify-content:space-between;
  flex-wrap: wrap;
  flex-direction: row;
  align-items:center;background-color: #F5F5F5;
  margin-bottom: 15px;}
.flex-block2-box-img{width: 160px;}
.flex-block2-box-text{width:calc(100% - 160px);padding: 0px 20px ;font-size: 1.2em;font-weight: 500;line-height: 160%;}

/*------ブロック3お悩み------*/
.flex-block3{display: flex;
  justify-content:space-between;
  flex-wrap: wrap;
  flex-direction: row;
  align-items:flex-start;
  }
.flex-block3-img{width: 40%;}
.flex-block3-text{width: 55%;}
.flex-block3-img img{width: 100%;}

/*------ブロック4利用のながれ------*/
.flex-block4{display: flex;
  justify-content:space-between;
  flex-wrap: wrap;
  flex-direction: row;
  align-items:center;
  }
.flex-block4-c{width: 30%;}
.flex-block4-arrow{width: 5%;text-align: center;}
.flex-block4-c img{width: 100%;}
.flex-block4-arrow img{width: 20px;}
.step{font-style: italic; font-weight: 700;padding-right: 1em;}
.block4title{padding: 2px 10px 5px 10px;color: #FFF;}
.block4text{padding: 10px;background-color: #FFF;font-size: 0.9em;margin-top: 5px;}

/*------ブロック5メニュー------*/
.flex-block5{
display: flex;
  justify-content:space-around;
  flex-wrap: wrap;
  flex-direction: row;
  align-items:center;
  }
.flex-block5-c{width: 30%;margin-bottom: 30px;}
.flex-block5-c img{width: 100%;}
/*------ブロックお問い合わせー------*/
.section-contact{text-align: center!important; padding-bottom: 100px;}
.tel{font-size: 2em;padding: 0px 20px 0px 10px;}
.section-contact p{font-size: 1.2em;}

.btn-box{text-align: center;margin-top: 30px;}
.btn-box .common-btn01,.btn-box .common-btn01:visited{font-weight: 700; max-width: 400px; /* ボタン幅 */}
.common-btn01,.common-btn01:visited{
display: inline-block;
  width: 100%;
  color: #fff; /* 文字色 */
  border: 1px solid rgba(0,160,233,1); /* 線幅・種類・色 */
  background: rgba(0,160,233,1);/* 背景色 */
  padding: 3px 0px 6px 0px;
  font-weight: 400; /* 文字の太さ */
  text-decoration: none;
  text-align: center;
  transition: 0.3s;
  border-radius: 5px;
}
/* マウスオーバーした際のデザイン */
.common-btn01:hover {
  color: #FFF; /* 文字色 */
  background: rgba(0,160,233,0.5); /* 背景色 */
  border: 1px solid rgba(0,160,233,1); /* 線幅・種類・色 */
    text-decoration: none;
}
/*------------------header------*/
header{height: 85px;border-bottom: 2px solid #CFCFCF;
	position: fixed;
	top: 0px;
	z-index: 10;
	width: 100%;background-color: #FFF;
}
.flex-head{display: flex;
  justify-content:flex-start;
  flex-wrap: wrap;
  flex-direction: row;
  align-items:center;
  padding: 20px 0px 15px 0px;}
.flex-head-l{width:30%;}
.flex-head-n{width:50%;text-align: left;}

.flex-head-l img{height:50px;}
/*------nav------*/
.flex-navi{display: flex;
  justify-content:space-between;
  flex-wrap: wrap;
  flex-direction: row;
  align-items:center;
  padding: 20px 0px 15px 0px;}
.navi1{width: 18%;text-align: center;font-weight: 700;font-size: 14px;}
.navi1 a{
position: relative; /*アンダーラインの位置を決めるための基準 */
color:#333;
text-decoration: none;
}
.navi1 a:hover{color:#333;}

.navi1 a::after {
position: absolute;
left: 0;
content: '';
width: 100%;
height: 2px;
background: #333;
bottom: 10px; /*アンダーラインが現れ始める位置（aタグの下辺からの高さ）*/
opacity: 0;
visibility: hidden;
transition: 0.3s;
}
.navi1 a:hover::after{
visibility: visible;
bottom: -2px; /*アニメーションが止まる位置*/
opacity: 1;
}



/*------footer------*/