@charset "utf-8";
/* CSS Document */
main {
    background: #f1f4f6;
   display: block;
}
.contentsflex {
    display: flex;
        justify-content: flex-end;
    flex-wrap: wrap;
    margin:55px 0;
}
.contentsflex.top{
	position: relative;
    margin: 50px 0;
    justify-content: flex-start;
}
.contentsflex.top .contents-img{
	position: relative;
	float: left;
	left: 0;
	top: 50px;
	margin-left: 0px;
}
.contentsflex.reverse{
	flex-direction: row-reverse;
}
.contentsflex .contents-img{
	margin-left: 50px;
}
.contentsflex.reverse .contents-img{
	margin-left:0px;
	margin-right: 50px;
}

/*--------------
.appeal-box 
----------------*/
.appeal-box {
    padding: 50px 0;
    position: relative;
}
.appeal-bg {
    background: linear-gradient(-90deg, #fff 0%, #fff 90%, #f1f4f6 50%, #f1f4f6 100%);
    position: relative;
}
.appeal-bg.reverse{
    background: linear-gradient(90deg, #fff 0%, #fff 90%, #f1f4f6 50%, #f1f4f6 100%);
    position: relative;
}
.appeal-bg.top{
    /*background: linear-gradient(-90deg, #d3e1ea 0%, #d3e1ea 70%, #f1f4f6 50%, #f1f4f6 100%);*/
    position: relative;
	background: none;
}
h3 {
    color: #035089;
    font-size: 200%;
    font-weight: 100;
    text-align: left;
    border-bottom: none;
    letter-spacing: 2px;
}
.sub-midashi {
    position: absolute;
    width: 60%;
    right: 0;
    top: 25px;
    background: #035089;
    padding: 8px 20px;
    color: #fff;
    font-size: 125%;
    text-align: left;
}
.contents-text {
    max-width: 600px;
}
.contents-text.wide{
    max-width: 100%;
}
.appeal-tit {
    position: absolute;
    display: flex;
    justify-content: start;
    align-items: center;
    top: 0px;
    z-index: 90;
}
.appeal-tit.reverse{
	right: 20%;
}
.appeal-titnem {
    font-size: 430%;
    font-weight: bold;
    color: #ccdce7;
    line-height: 1;
    text-align: center;
    margin: -50px 0 0 0;
}
.tit-nem {
    font-size: 23%;
}
.contents-text-box.top{
	position:absolute;
	right: 0;
	width: 55%;
	background-color: #d3e1ea;
	padding: 50px 50px 50px 150px;
}
.job-subtitle{
	margin-bottom: 50px;
	font-weight: bold;
	letter-spacing: 0.1em;
}
.job-subtitle:after{
    content: "";
    width: 60px;
    height: 1px;
    background-color: #6594b7;
    bottom: -10px;
    display: block;
    position: relative;
}
.contents-text-block{
  margin-bottom: 30px;
}

.contents-text-block .job-subtitle{
  margin-bottom: 25px;
}
.iconlist {
	padding: 60px 5%;
	margin-bottom: 0;
	background: url("../../img/job.png") no-repeat center;
  background-size: cover;
	@media screen and ( max-width: 767px ){
		padding: 20px 5%;
	}
}

@media screen and ( max-width: 767px ){
.ft-warp {
    margin-top: 0px;
}
h3 {
    font-size: 177%;
}
.sub-midashi {
    position: relative;
    max-width: 90%;
    width: auto;
    top: 50px;
}
.contentsflex {
    display: flex;
	justify-content: flex-end;
	margin-bottom: 0px;
}
.contents-text {
	max-width: 570px;
	margin: 0 auto;
	}
.contents-text-box.top {
	position: static;
	padding: 30px;
	width: 100%;
	}
.contentsflex.top {
    margin: 0 auto 50px;
	}
.contentsflex.top .contents-img {
	position: static;
	}
.contents-text-box{
	width: 90%;
	margin-bottom: 30px;
	}
.contentsflex .contents-img {
    margin-left: 0px;
	}
.contentsflex.reverse .contents-img {
    margin-left: 0px;
    margin-right: 0;
	}
	
}
@media print {

}