@charset "UTF-8";

/* ----------------------------------------------- CSS Information
 Style Info:     福利厚生
 Notes:          
--------------------------------------------------------------- */
.main-wrap{
width:100%;
padding-top: 4vw;
}

.main-title{
width:100%;
padding: 0;
margin: 0 auto 5%;
}
.main-title img{
width:100%;
}

.main{
width:100%;
margin: 0 auto;
}

.sec01-bg{
width:100%;	
background-color: #ffff70;
	margin: 0 auto 3%;
	padding-bottom: 3%;
}

.sec01{
width:52.0833%;
margin: 0 auto;
}

.sec-title{
	width:100%;
}
.sec-title img{
	width:100%;
	margin-top: -3%;
	margin-bottom: 2%;
}

.sec01-txt{
width: 52.0833%;
font-size: 1vw;
line-height: 170%;
margin:  0 auto;
font-weight: bold;
text-align: left;
}

.sec-midasi{
	width: 100%;
	font-size: 2.3vw;
    line-height: 140%;
    margin-bottom: 3%;
    font-weight: bold;
    letter-spacing: 0.1em;
}

/************ sec02 *********************************/
.sec02{
width: 100%;
	margin: 0 auto 5%;
}

.step01{
	width:52.0833%;
	margin: 0 auto;
	font-size: 1vw;
	line-height: 170%;
	padding-bottom: 3%;
}
.step01 img{
	width:100%;
}

.step02-bg{
	width:100%;
	background-color: #fffff1;
	padding: 3% 0 0;
	margin-bottom: 3%;
}

.pic-area{
	width:100%;
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
}

.pic-box{
	width:32%;
}
.pic-box img{
	width:100%;
	margin-bottom: 5%;
}

.picbox-title{
	font-size: 1.4vw;
    line-height: 200%;
    font-weight: bold;
    text-align: center;
    margin-bottom: 3%;
    letter-spacing: 0.1em;
}

.picbox-txt{
	font-size: 1vw;
	line-height: 170%;
	text-align: left;
}

.step03{
	width:52.0833%;
	margin: 0 auto;
	font-size: 1vw;
	line-height: 170%;
	padding-bottom: 2%;
}

.step03-midasi{
	-webkit-transform: skewX(150deg);
-moz-transform: skewX(150deg);
transform: skewX(150deg);
border-left: 9px solid #FFCD00;
	position: relative;
	margin-bottom: 2%;
	font-size: 1.3vw;
	line-height: 120%;
}

.step03-m-txt{
margin-top: -4.8%;
    padding-left: 3%;
	font-size: 1.3vw;
    line-height: 120%;
    font-weight: bold;
	margin-bottom: 1%;
}

/********** sec03 *******************************/
.sec03-bg{
width:100%;	
background-color: #77acf2;
	margin: 0 auto;
	padding-bottom: 3%;
}

.sec03{
width:52.0833%;
margin: 0 auto;
}

/************ sec04 *********************************/
.sec04{
width: 100%;
	margin: 0 auto;
		padding: 4% 0;
}

.sec04#bg{
width: 100%;
	margin: 0 auto;
		padding: 4% 0;
	background-color: #e7edfb;
}

.sec04-box{
	width:52.0833%;
	margin: 0 auto;

}

.sec04box-l{
	width:40.5%;
	float: left;
}

.sec04box-r{
	width:57.5%;
	float: right;
    line-height: 0;
}

.sec04box-l#bg{
	width:40.5%;
	float: right;
}

.sec04box-r#bg{
	width:57.5%;
	float: left;
}

.sec04box-l#awards{
	width:42.5%;
	float: left;
}

.f-title{
width:100%;
margin-bottom: 10%;
}
.f-title img{
width:100%;
}

.f-title#life{
width:100%;
margin-bottom: 0;
}

.f-txt{
font-size: 1vw;
line-height: 170%;
}

/************** sec05 **********************************/

.sec05-bg{
width:100%;
margin: 7% 0 3%;
padding: 0 0 4%;
background-color: #ffabca;
}

.sec05{
width:52.0833%;
margin: 0 auto;
}

.sec05-title{
width:100%;
}
.sec05-title img{
width:100%;
margin-top: -4%;
    margin-bottom: 3%;
}

.sec05-area{
width:100%;
display: flex;
justify-content: space-between;
flex-wrap: wrap;
}

.sec05-l{
width:49%;
line-height: 170%;
font-size: 1vw;
}

.sec05-r{
width:49%;
line-height: 0;
}
.sec05-r img{
width:100%;
}

/************** sec06 **********************************/
.sec06{
width:52.0833%;
margin: 0 auto 4%;
}

.sec06-title{
width:100%;
margin-bottom: 2%;
}
.sec06-title img{
width:100%;
}

.sec06-area{
width:100%;
display: flex;
justify-content: space-between;
flex-wrap: wrap;
}

.sec06-box{
width:32%;
line-height: 170%;
font-size: 1.2vw;
font-weight: bold;
text-align: center;
letter-spacing: 0.1em;
}

/* ================= smartphone ================= */
@media only screen and (max-width:699px) {
.main-wrap{
width:100%;
padding-top: 50px;
}

.main-title{
width:100%;
}

.sec01{
width:90%;
margin-bottom: 5%;
background: none;

}

.sec01-txt {
    width: 100%;
    font-size: 18px;
    }

.sec-midasi {
    width: 100%;
    font-size: 18px;
    }
    
.sec-txt{
font-size: 14px;
line-height: 170%;
} 

.sec02 {
    width: 100%;
    margin: 0 auto 10%;
}
    
.step01 {
    width: 90%;
    font-size: 14px;
    }
    
.pic-box {
    width: 100%;
    margin-bottom: 10%;
} 
.pic-box img {
    width: 100%;
    margin-bottom: 0;
}    
    
.picbox-title {
    font-size: 18px;
    line-height: 150%;
    font-weight: bold;
    text-align: center;
    margin-bottom: 0;
    letter-spacing: 0.1em;
}    
    
.picbox-txt {
    font-size: 14px;
    }
    
.step03 {
    width: 90%;
    margin: 0 auto;
    font-size: 14px;
    }
    
.step03-midasi {
    font-size: 18px;
    line-height: 120%;
} 
    
.step03-m-txt {
    margin-top: -8%;
    padding-left: 5%;
    font-size: 18px;
    }
    
.sec03 {
    width: 90%;
    margin: 0 auto;
} 
    
.sec04-box {
    width: 90%;
    margin: 0 auto 5%;
}   
    
.sec04box-l {
    width: 100%;
    float: none;
}  

.f-title {
    width: 50%;
    margin-bottom: 0;
}

.f-txt {
    font-size: 14px;
    line-height: 170%;
}

.sec04box-r {
    width: 100%;
    float: none;
}

.sec04box-l#bg {
    width: 100%;
    float: none;
}

.f-title#life {
    width: 50%;
    margin-bottom: 0;
}

.sec04box-r#bg {
    width: 100%;
    float: none;
}

.sec04box-l#awards {
    width: 100%;
    float: none;
}

.sec05-bg {
    width: 100%;
    margin: 10% 0 5%;
    padding: 0 0 5%;
    background-color: #ffabca;
}

.sec05 {
    width: 90%;
    margin: 0 auto;
}

.sec05-l {
    width: 100%;
    line-height: 170%;
    font-size: 14px;
    margin-bottom: 5%;
}

.sec05-r {
    width: 100%;
    line-height: 0;
}

.sec06 {
    width: 90%;
    margin: 0 auto 10%;
}

.sec06-box {
    width: 100%;
    line-height: 170%;
    font-size: 16px;
    margin-bottom: 5%;
}


}