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

/*==================================================
mv
================================================== */

#mv-top,
.mv-page{
	width: 100%;
	height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    position: relative;
    background-color: #fff;
    z-index: 29;
}

.mv-page{
    background-color: #1e1e1e;
    height: 50vh;
}

.mv-box{
    text-align: center;
    width: 100%;
    display: block;
    position: relative;
    top: -80px;
}

#mv-logo{
    width: 22%;
    display: block;
    margin: 0 auto;
}

#copy-box{
    position: relative;
    width: 22%;
    margin: 40px auto 0;
}

#copy-01{
    position: absolute;
    top: 0;
    left: 0;
    width: 70%;
}

#copy-02{
    width: 70%;
    position: absolute;
    right: 0;
    top: 3.6vw;
}

#mv-copy{
    text-align: center !important;
    width: 100%;
    margin: 25px 0 0;
    font-size: 18px;
    letter-spacing: 0.4em;
    font-weight: bold;
}

 .mv-line {
      position: absolute;
      top: 0;
      left: 50%;
      width: 40px;
     margin-left: -20px;
      height: 0;
      background-color: #f4f4f4;
      animation: drawLine 5s ease-out forwards;
     z-index: -1;
    }

.mv-page .mv-line{
    animation: drawLinehalf 2.0s ease-out forwards;
      background-color: #fff;
}

#mv-pagetitle{
    width: 48.5%;
    margin: 0;
    font-size: 24px;
    letter-spacing: 0.4em;
    font-weight: bold;
    color: #fff;
    text-align: center;
}

#mv-pagetitle small{
    font-size: 50%;
    display: block;
    letter-spacing: 0.1em;
}

@keyframes drawLine {
      from {
        height: 0;
      }
      to {
        height: 100vh;
      }
    }

@keyframes drawLinehalf {
      from {
        height: 0;
      }
      to {
        height: 50vh;
      }
    }





@media screen and (max-width: 1024px) and (orientation: portrait){


}

@media only screen and (max-width: 1024px) {

#mv-logo{
    width: 26%;
}

#mv-copy{
    font-size: 16px;
} 

#copy-box{
    width: 26%;
}

#copy-02{
    top: 4.2vw;
}
    
}
    



@media only screen and (max-width: 768px) {

	

}

@media screen and (max-width: 768px) and (orientation: portrait){

 .mv-line {
      animation: drawLine 3.4s ease-out forwards;
     width: 26px;
     margin-left: -13px;
    }

#copy-box{
    margin-top: 30px;
}

    
    
}

@media only screen and (max-width: 767px) {
 

#mv-logo{
    width: 38%;
}

#copy-box{
    width: 46%;
}

#copy-02{
    top: 7.4vw;
}

#mv-copy{
    font-size: 4vw;
    letter-spacing: 0.2em;
} 

.mv-box{
    position: relative;
    top: -8%;
}

#mv-pagetitle{
    width: 47.5%;
    font-size: 4vw;
    letter-spacing: 0.2em;
}




    
}


/*==================================================
下層ページ共通
================================================== */



/*==================================================
message
================================================== */

#message{
    padding: 100px 0 0;
    text-align: center;
}

#message > div > p{
    display: inline-block;
    text-align: justify;
    line-height: 2.5;
}

#message .title-basic{
    margin-bottom: 35px;
}

@media only screen and (max-width: 1024px) {

#message{
    padding: 75px 0 0;
}

#message > div > p{
    line-height: 2.0;
}
    
}


@media only screen and (max-width: 767px) {

#message .title-basic{
    margin-bottom: 25px;
}

    
}



/*==================================================
service
================================================== */

#service{
    padding: 150px 0 0;
}

#head-service{
    text-align: center;
    width: fit-content;
}

.title-service-02{
    text-indent: 0.3em;
}

#head-service p{
    margin: 0;
    font-size: 18px;
    font-weight: bold;
    text-align: center !important;
}

#head-service .btn-area{
    text-align: right;
}

#service-list{
    padding: 75px 0 0;
    width: 96%;
    margin: 0 auto;
}

.box-service{
    position: relative;
    margin-bottom: 35px;
    min-height: 22vw;
}

.img-service{
    width: 50%;
    height: 100%;
    object-fit: contain;
    position: absolute;
    top: 0;
    right: 0;
}

#service-02 .img-service{
    right: inherit;
    left: 0;
}

.box-service .title-basic,
.box-service p.txt-service,
.box-service .tag-service,
.box-service .btn-area{
    width: 45%;
    text-align: right;
}

.box-service .title-basic{
    padding-top: 3vw;
    margin-bottom: 25px;
}

#service-02.box-service .title-basic,
#service-02.box-service p.txt-service,
#service-02.box-service .tag-service,
#service-02.box-service .btn-area{
    margin-left: 55%;
    text-align: left;
}

.box-service .tag-service{
    font-size: 85%;
    color: #666;
}

.box-service .tag-service span{
    display: inline-block;
    margin-left: 10px;
}

#service-02.box-service .tag-service span{
    margin-left: 0;
    margin-right: 10px;
}

@media only screen and (max-width: 1024px) {


    
}



@media only screen and (max-width: 768px) {
    
#service{
    padding-top: 80px;
}    

#head-service{
    width: 86%;
}

#head-service p{
    font-size: 15px;
    margin: 15px 0 0;
    line-height: 1.6;
}

#head-service a.btn{
    position: relative;
    bottom: inherit;
    left: inherit;
    min-width: auto;
    width: 50%;
    margin-left: 50%;
}

#service-list{
    padding: 50px 0 0;
    width: 86%;
}
    

.box-service .title-basic{
    padding-top: 2vw;
    margin-bottom: 15px;
}

.box-service{
    position: relative;
    margin-bottom: 35px;
    min-height: auto;
}

.img-service{
    display: block;
    margin: 0 auto 15px;
    width: 68%;
    height: auto;
    object-fit: inherit;
    position: relative;
    top: inherit;
    right: inherit;
    border-radius: 12px;
}

#service-02 .img-service{
    right: inherit;
    left: inherit;
}

.box-service .title-basic,
.box-service p.txt-service,
.box-service .tag-service,
.box-service .btn-area{
    width: 100%;
    text-align: left;
}
    
    .box-service .btn-area{
        text-align: center;
    }

.box-service .title-basic{
    padding-top: 0;
    margin-bottom: 12px;
    text-align: center;
}

#service-02.box-service .title-basic,
#service-02.box-service p.txt-service,
#service-02.box-service .tag-service,
#service-02.box-service .btn-area{
    margin-left: 0;
    text-align: left;
}
    
    #service-02.box-service .btn-area{
    text-align: center;
}
    
    .box-service .btn-area a.btn{
        min-width: auto;
        width: 40%;
    }

.box-service .tag-service span{
    margin-right: 10px;
    margin-left: 0;
}

#service-02.box-service .tag-service span{
    margin-left: 0;
    margin-right: 10px;
}
    
    #service-02.box-service .title-basic{
        text-align: center;
    }


    
}


@media only screen and (max-width: 599px) {
    
.box-service .btn-area a.btn{
        width: 60%;
    }
    
}



/*==================================================
recruit
================================================== */

#top-recruit{
    padding: 120px 0 0;
    text-align: center;
}

#top-recruit .title-en{
    text-align: center;
    line-height: 1;
}

#top-recruit .title-basic{
    font-size: 52px;
}

.box-recruit{
    width: 90%;
    margin: 50px auto;
    display: flex;
}

.box-recruit > div{
    width: 50%;
}

.pic-recruit{
    padding-right: 5%;
}

.pic-recruit img{
    width: 40vw;
    height: 40vw;
}

.txt-recruit{
    line-height: 2.2;
    display: flex;
    align-items: center;
    text-align: left;
}

.txt-recruit .btn-area{
    text-align: left;
}

.txt-recruit p{
    margin-bottom: 35px;
}

@media only screen and (max-width: 1024px) {

#top-recruit .title-basic{
    font-size: 4vw;
}
    
}


@media only screen and (max-width: 768px) {

#top-recruit{
    padding: 80px 0 0;
}

#top-recruit .title-basic{
    font-size: 5vw;
}
    
}

@media only screen and (max-width: 767px) {

#top-recruit{
    padding: 50px 0 0;
}

#top-recruit .title-basic{
    font-size: 6vw;
}

.box-recruit{
    width: 86%;
    margin: 20px auto;
    display: block;
}

.box-recruit > div{
    width: 100%;
}

.pic-recruit img{
    width: 60vw;
    height: 60vw;
}
    
    .pic-recruit{
        padding-right: 0;
    }

.txt-recruit{
    line-height: 1.9;
    display: block;
    margin: 20px auto 0;
    text-align: justify;
}

.txt-recruit p{
    margin-bottom: 25px;
}
    
    .box-recruit .btn-area{
        text-align: center;
    }
    
}





/*==================================================
ページリスト(.PageList)
================================================== */

.PageList {text-align:center; clear: both; margin-top: 50px; position: relative; padding-top: 50px;}
.PageList ul {}
.PageList ul li {display: inline-block; margin: 0 5px 20px 0;}
.PageList ul li.now { /* 現在のページ */}
.PageList ul li a,
.PageList ul li.active a{
    display: flex;
    text-align: center;
    align-items: center;
    justify-content: center;
    width: 60px;
    height: 60px;
    border-radius: 50%; 
    text-decoration: none; 
	background: #fff;
	color: #222;
	line-height: 1;
	font-size: 17px;
}

.PageList ul li.active a{
	pointer-events: none;
}

.PageList ul li.pagelist-dot a{
	pointer-events: none;
}

.PageList ul li.link-prev a,
.PageList ul li.link-next a{
	background: #dde9f4;
}
.PageList ul li a, 
.PageList ul li a:link, 
.PageList ul li a:visited {}
.PageList ul li.active a,
.PageList ul li a:hover{
    background: #dde9f4;
}

.btn-pagelist a.btn{
	position: absolute;
	width: 260px;
	top: 50px;
	left: 0;
}

.btn-pagelist a.btn.btn-next{
	left: inherit;
	right: 0;
}

@media (max-width: 1100px) {

.PageList {margin-top: 0; padding-top: 50px;}
.PageList ul{margin-bottom: 50px;}
.PageList ul li {display: inline-block; margin: 0 1px 10px 0;}
.PageList ul li a,
.PageList ul li.active a{
    width: 40px;
    height: 40px;
	font-size: 12px;
}
	
.btn-pagelist{
    padding-top: 20px;
}

.btn-pagelist a.btn{
	position: absolute;
	width: 45%;
	top: inherit;
	bottom: 0;
	left: 0;
}
}







/*==================================================
wp page navi
================================================== */

.wp-pagenavi {text-align:center; clear: both; margin-top: 50px; position: relative; padding-top: 50px;}
.wp-pagenavi span,
.wp-pagenavi a{
    display: inline-flex;
    text-align: center;
    align-items: center;
    justify-content: center;
    width: 60px;
    height: 60px;
    border-radius: 50%; 
    text-decoration: none;
	color: #8fa7c0;
	line-height: 1;
	font-size: 17px;
	margin: 0 5px 20px 0;
}


.wp-pagenavi span.current,
.wp-pagenavi a:hover{
    background: #8fa7c0;
	color: #fff;
}

@media (max-width: 768px) {

.wp-pagenavi{margin-top: 0; padding-top: 50px;}
.wp-pagenavi span,
.wp-pagenavi a{
    width: 40px;
    height: 40px;
	font-size: 12px;
	margin: 0 5px 10px 0;
}
}


/*==================================================
news detail
================================================== */

#news-contents{
    padding: 50px 0 120px;
}

#blog-detail .title-contents{
	line-height: 1.5;
}

#blog-detail .title-contents strong{
	font-size: 28px;
}

.body-blog{
	padding: 25px 0 0;
	line-height: 2.0;
	letter-spacing: 0.08em;
	word-break: break-all;
}



.body-blog article p{
	margin-bottom: 50px;
}

.body-blog article img{
	max-width: 100%;
	height: auto;
	margin-bottom: 50px;
}

.title-article{
	display: block;
	font-weight: 600;
	font-size: 30px;
	margin-bottom: 50px;
}

.footer-news{
	text-align: center;
	padding-top: 50px;
}

.body-blog a{
	text-decoration: underline;
}


.bottom-info{
	position: relative;
	border-top: 1px dotted #ddd;
	border-bottom: 1px dotted #ddd;
	height: 80px;
    margin-top: 50px;
}

.bottom-info a{
	display: inline-block;
	text-align: center;
	font-size: 14px;
	text-decoration: none !important;
	position: relative;
	padding: 18px 30px;
	line-height: 1;
	letter-spacing: 0.08em;
    color: #8fa7c0 !important;
}

.bottom-info a:hover{
    text-decoration: underline !important;
}


.bottom-info > a,
.bottom-info span{
	position: absolute;
	top: 15px;
}

.bottom-info a.btn-back{
	left: 0;
}

.bottom-info span.btn-next{
	right: 0;
}

.bottom-info span.btn-prev{
	right: 170px;;
}

.mv-blog{
	padding-bottom: 25px;
	border-bottom: 1px dotted #ddd;
}

.mv-blog img{
	width: 100% !important;
	height: auto !important;
	vertical-align: bottom;
	max-width: 100% !important;
}

@media only screen and (max-width: 768px) {

.body-blog{
	line-height: 1.7;
	letter-spacing: 0;
}

.body-blog p{
	margin-bottom: 30px;
}

.body-blog img{
	margin-bottom: 30px;
}

.title-article{
	font-size: 21px;
	margin-bottom: 35px;
}

.footer-news{
	padding-top: 0;
}
	
}

@media only screen and (max-width: 767px) {

#news-contents{
    padding: 20px 0 0;
}


#blog-detail .title-contents strong{
	font-size: 6.4vw;
}	

.body-blog p{
	margin-bottom: 25px;
}

.body-blog img{
	margin-bottom: 25px;
}

.title-article{
	font-size: 18px;
	margin-bottom: 35px;
}

.footer-news{
	padding-top: 0;
}

.bottom-info{
	position: relative;
	padding: 0 ;
	height: 80px;
}
	
.bottom-info span a{
	font-size: 13px;
	padding: 0;
	width: 100%;
}	

.bottom-info a.btn,
.bottom-info span{
	top: 30px;
	width: 30%;
	padding: 0;
	text-align: center;
	font-size: 12px;
}

.bottom-info a.btn-back{
	position: absolute;
	top: 34px;
	left: 0;
	width: 30%;
	margin: 0;
	box-sizing: border-box;
    padding: 0;
    font-size: 12px;
}

.bottom-info span.btn-next{
	right: 0;
}

.bottom-info span.btn-prev{
	right: 33%;
}
	
}


/*==================================================
strength
================================================== */

#strength{
    padding-bottom: 65px;
}

#ul-strength{
    margin: 50px 0 0;
    flex-wrap: nowrap;
}

#ul-strength li:nth-child(2){
    padding: 0 50px;
}

.title-no{
    display: block;
    font-size: 38px;
    text-align: center;
    line-height: 1.4;
}

.title-no small{
    display: block;
    font-size: 120%;
}

.title-no span{
    display: block;
    width: 60px;
    margin: 5px auto 0;
    height: 15px;
    border-top: 1px solid #000;
}

.img-strength{
    margin: 25px 0;
    text-align: center;
}

.img-strength img{
    vertical-align: middle;
    width: auto;
    height: 15vw;
}

#business-line .img-strength img{
    height: 8vw;
}

#business-line #ul-strength li:nth-child(2) .img-strength img{
    height: auto;
    width: 48%;
}

.copy-strength{
    display: block;
    font-size: 21px;
    margin-bottom: 10px;
    line-height: 1.6;
}

@media only screen and (max-width: 1024px) {

#ul-strength li:nth-child(2){
    padding: 0 30px;
}

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

@media only screen and (max-width: 768px) {

#ul-strength{
    margin: 35px 0 0;
    flex-wrap: wrap;
}
    
    #ul-strength li{
        width: 80%;
        margin: 0 auto 25px;
    }

#ul-strength li:nth-child(2){
    padding: 0;
}
    


#business-line .img-strength img{
    height: auto;
    width: 50%;
}

#business-line #ul-strength li:nth-child(2) .img-strength img{
    height: auto;
    width: 40%;
}    

    
}

@media only screen and (max-width: 767px) {

#ul-strength{
    margin: 35px 0 0;
}
    
#ul-strength li{
    width: 90%;
    margin-bottom: 35px;
}

.title-no{
    font-size: 6.5vw;
    line-height: 1.4;
}

.title-no span{
    width: 50px;
    margin: 0 auto;
    height: 10px;
}
    
    .img-strength{
        margin: 20px 0;
    }

.img-strength img{
    height: 30vw;
}

.copy-strength{
    font-size: 4.6vw;
    margin-bottom: 5px;
}
    


#business-line .img-strength img{
    height: auto;
    width: 70%;
}

#business-line #ul-strength li:nth-child(2) .img-strength img{
    height: auto;
    width: 60%;
}  

    
}


/*==================================================
works
================================================== */

#works{
    margin: 0 0 70px;
    padding: 100px 0;
}

#ul-works{
    list-style: none;
}

#ul-works > li{
    background-color: #fff;
    padding: 30px;
    margin-bottom: 35px;
}

#ul-works > li > h3{
    display: block;
    text-align: center;
    font-size: 38px;
    line-height: 1.5;
    margin-bottom: 25px;
}

#ul-works > li > h3 > span{
    display: block;
}

#ul-works > li > h3 > small{
    display: block;
    font-size: 60%;
}

.img-works{
    margin-bottom: 30px;
}

.img-works img{
    width: 100%;
    height: 25vw;
    object-fit: cover;
    vertical-align: bottom;
}

.contents-works{
    display: flex;
}

.contents-works > div{
    flex: 1;
    border-right: 1px solid #000;
    padding-right: 25px;
    margin-right: 25px;
}

.contents-works > div:last-child{
    border-right: none;
    padding-right: 25px;
    margin-right: 0;
}



.title-works{
    text-align: center;
    display: block;
    font-size: 26px;
    margin-bottom: 20px;
}

@media only screen and (max-width: 1024px) {
    
#works{
    margin: 0 0 50px;
    padding: 75px 0;
}

#ul-works > li{
    padding: 25px;
    margin-bottom: 25px;
}

#ul-works > li > h3{
    font-size: 32px;
    margin-bottom: 20px;
}

.img-works{
    margin-bottom: 25px;
}

.title-works{
    font-size: 21px;
    margin-bottom: 5px;
    text-align: left;
}  
    
    .contents-works{
        display: block;
    }
    
    .contents-works > div{
        width: 100%;
    margin: 0 auto 25px;
        border: none;
    }    
    
}

@media only screen and (max-width: 767px) {
    
#works{
    margin: 0 0 35px;
    padding: 45px 0;
}

#ul-works > li{
    padding: 20px;
    margin-bottom: 20px;
}

#ul-works > li > h3{
    font-size: 6vw;
    margin-bottom: 15px;
    line-height: 1.4;
}
    
    #ul-works > li > h3 > small{
        padding-top: 6px;
    }

.img-works{
    margin-bottom: 20px;
}

.img-works img{
    height: 30vw;
}
    

.title-works{
    font-size: 4.2vw;
    margin-bottom: 0;
    text-align: left;
}    
    
}


/*==================================================
voice
================================================== */

#ul-voice{
    list-style: none;
    
}

#ul-voice li{
    border: 8px solid #f4f4f4;
    padding: 35px;
    margin-bottom: 35px;
    border-radius: 5px;
}

.title-voice{
    display: block;
    font-size: 32px;
    border-bottom: 1px solid #000;
    margin-bottom: 20px;
    padding-bottom: 5px;
}
.title-voice small{
    font-size: 60%;
    padding-left: 10px;
}

.img-voice{
    width: 24%;
    float: right;
    margin: 0 0 20px 50px;
}

@media only screen and (max-width: 767px) {

#ul-voice li{
    border: 6px solid #f4f4f4;
    padding: 10px 20px 20px;
    margin-bottom: 25px;
}

.title-voice{
    font-size: 6vw;
    margin-bottom: 15px;
    padding-bottom: 0;
}
.title-voice small{
    padding-left: 5px;
}

.img-voice{
    width: 32%;
    margin: 0 0 10px 20px;
}
    
    .box-voice p{
        margin: 0;
    }
    
}


/*==================================================
faq
================================================== */

#faq{
    margin: 100px 0 0;
    padding: 75px 0 65px;
}

.faq-one,
.dl-faq{
    background-color: #fff;
    border-radius: 8px;
    padding: 25px ;
    margin-bottom: 15px;
    cursor: pointer;
}

.faq-one summary{
    
    position: relative;
    list-style: none;
}

summary::before {
  content: "▼";
  position: absolute;
  left: 0;
}

details[open] summary::before {
  content: "▲";
}

.dl-faq dt{
	margin: 0 auto;
    cursor:pointer;
    position: relative;
    display: flex;
}

.dl-faq dd{
    display: none;
    background-color: #f4f4f4;
    padding: 20px;
    border-radius: 6px;
    position: relative;
    margin-top: 20px;
}

.dl-faq dd::before{
    content: '▲';
    color: #f4f4f4;
    font-size: 24px;
    position: absolute;
    top: -14px;
    left: 8px;
    line-height: 1;
}

.dl-faq span{
    display: inline-flex;
    border-radius: 50%;
    background-color: #000;
    color: #fff;
    text-align: center;
    font-size: 18px;
    font-weight: bold;
    width: 36px;
    height: 36px;
    align-items: center;
    justify-content: center;
    margin-right: 10px;
    border: 2px solid #000;
}

.dl-faq dd span{
    background-color: #fff;
    color: #000;
    float: left;
}

.dl-faq p{
    margin: 0;
    line-height: 1.6;
    display: flex;
    align-items: center;
    width: calc(100% - 50px);
}

@media only screen and (max-width: 767px) {

#faq{
    margin: 50px 0 0;
    padding: 50px 0 35px;
}

.faq-one,
.dl-faq{
    padding: 15px ;
    margin-bottom: 12px;
}

.dl-faq dd{
    padding: 12px;
    margin-top: 20px;
}

.dl-faq span{
    font-size: 15px;
    width: 26px;
    height: 26px;
}

.dl-faq p{
    width: calc(100% - 40px);
}
    
}

/*==================================================
cta-area
================================================== */

.cta-area{
    font-size: 21px;
    color: #fff;
    font-weight: bold;
    text-align: center !important;
    padding: 50px 0 65px;
    background-color: #1e1e1e;
}

.cta-area .btn{
    min-width: 420px;
}

@media only screen and (max-width: 767px) {
    
.cta-area{
    font-size: 18px;
    padding: 25px 0 40px;
}

.cta-area .btn{
    min-width: 90%;
}    
    
}


/*==================================================
page-fixed-btn
================================================== */

#page-fixed-btn{
    position: fixed;
    bottom: 165px;
    right: 25px;
    z-index: 2;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s;
}

#page-fixed-btn.btn-visible{
    opacity: 1;
    pointer-events: auto;
}

a.a-fix{
    display: flex;
    align-items: center;
    border: 1px solid #000;
    font-weight: 200 !important;
    text-align: center;
    font-size: 18px;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    text-decoration: none;
    justify-content: center;
    background-color: #fff;
}

a.a-fix:hover{
    background-color: #000;
    color: #fff;
}

.fixed-btn{
    width: 96px;
}

@media only screen and (max-width: 767px) {

#page-fixed-btn{
    bottom: 100px;
    right: 15px;
}

.fixed-btn{
    width: 80px;
}
    
}

/*==================================================
pic-company
================================================== */

.pic-01{
    width: 100%;
    height: 42vw;
    object-fit: cover;
    object-position: center bottom;
    vertical-align: bottom;
}

#g-map{
    margin: 50px 0 0;
}

#g-map iframe{
    width: 100%;
    vertical-align: bottom;
    height: 420px;
}

@media only screen and (max-width: 767px) {
    
.pic-01{
    height: 64vw;
}    


    
}


/*==================================================
profile-company
================================================== */

#profile-company{
    padding-bottom: 150px;
}

@media only screen and (max-width: 767px) {
    
#profile-company{
    padding-bottom: 80px;
}    
    
}





/*==================================================
flow
================================================== */

#business-line #flow,
#recruit #flow{
    padding: 100px 0;
}

#flow article{
    padding: 35px 50px;
    display: flex;
}

#flow article#flow-recruit{
    padding: 35px 0;
}

.box-flow{
    width: 100%;
    text-align: center;
    border: 10px solid #f4f4f4;
    padding: 25px 15px;
    border-radius: 12px;
}

p.p-step-no{
    font-weight: 600;
}

.p-step-no i{
    display: inline-flex;
    width: 42px;
    height: 42px;
    background-color: #000;
    color: #fff;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    border-radius: 50%;
    font-style: normal;
    margin-left: 10px;
}

.y-flow{
    display: flex;
    text-align: center;
    align-items: center;
    justify-content: center;
    width: 10%;
}

.step-title{
    display: block;
    line-height: 1.6;
    font-size: 21px;
    margin-bottom: 15px;
}

.box-flow > div > p{
    margin: 0;
    text-align: left;
}

#flow article > div:nth-child(3){transition-delay: 200ms;}
#flow article > div:nth-child(5){transition-delay: 400ms;}
#flow article > div:nth-child(7){transition-delay: 600ms;}
#flow article > div:nth-child(9){transition-delay: 800ms;}
#flow article > div:nth-child(11){transition-delay: 1000ms;}

@media only screen and (max-width: 1280px) {
    
#business-line #flow,
#recruit #flow{
    padding: 75px 0;
}    
    
#flow article{
    padding: 15px 19%;
    display: block;
}

.box-flow{
    box-sizing: border-box;
}

    .y-flow{
        width: 100%;
        text-align: center;
        padding: 12px 0;
    }
.y-flow span.pc-only{display: none;}
.y-flow span.sp-only{display: inline !important;}


#flow article > div:nth-child(3){transition-delay: 0;}
#flow article > div:nth-child(5){transition-delay: 0;}
#flow article > div:nth-child(7){transition-delay: 0;}
#flow article > div:nth-child(9){transition-delay: 0;}
#flow article > div:nth-child(11){transition-delay: 0;}    
    
}

@media only screen and (max-width: 767px) {
    
#business-line #flow,
#recruit #flow{
    padding: 50px 0;
}  
    
#flow article{
    padding: 15px 5%;
}
    .y-flow{
        padding: 8px 0;
    }

.p-step-no i{
    width: 34px;
    height: 34px;
    font-size: 18px;
    margin-left: 6px;
}

.box-flow > div > p{
    text-align: left;
}

#business-line .box-flow > div > p,
#business-sns .box-flow > div > p,
#business-esthe .box-flow > div > p{
    text-align: center;
}
   
    
}



/*==================================================
recruit
================================================== */


#mission{
    padding: 100px 0;
    text-align: center;
}

#mission .title-basic{
    margin-bottom: 35px;
    font-size: 52px;
}

#our-business,
#vision{
    padding-bottom: 100px;
}

.ul-blackbox{
    list-style: none;
}

.ul-blackbox li{
    display: flex;
    text-align: center;
    background-color: #1e1e1e;
    color: #fff;
    padding: 20px 15px;
    margin-bottom: 20px;
    align-items: center;
    justify-content: center;
}

.ul-blackbox li i{
    margin-right: 12px;
    font-size: 125%;
}


@media only screen and (max-width: 1024px) {

#mission .title-basic{
    margin-bottom: 25px;
    font-size: 38px;
}
    
}

@media only screen and (max-width: 767px) {

#our-business,
#vision{
    padding-bottom: 50px;
}

.ul-blackbox li{
    text-align: left;
    padding: 14px 12px;
    margin-bottom: 10px;
    align-items: center;
    justify-content: inherit !important;
    line-height: 1.6;
}

.ul-blackbox li i{
    margin-right: 12px;
    font-size: 125%;
}

#mission .title-basic{
    margin-bottom: 15px;
    font-size: 7vw;
}
    
}

#style{
    padding-bottom: 100px;
    border-top: 1px solid #000;
}


.box-style{
    margin: 80px 0 0;
}

.ill-style{
    width: 25%;
    float: left;
    text-align: center;
}

.ill-style img{
    width: 70%;
    vertical-align: bottom;
}

.txt-style{
    width: 70%;
    float: right;
}

.box-style .title-basic{
    font-size:28px;
    margin-bottom: 25px;
}
.box-style .title-basic small{
    font-size: 50%;
}

.box-style table th{
    padding: 12px 10px;
    width: 180px;
}

.box-style table td{
    padding: 20px;
}

.comment-style{
    margin: 35px 0 0;
    clear: both;
    padding-top: 50px;
}

#style-02 .ill-style{
    float: right;
}

#style-02 .txt-style{
    float: left;
}

.strong-ttl{
    display: block;
}

.comment-style p{
    margin-bottom: 30px;
}

#style-01{
    border-bottom: 1px solid #000;
    padding-bottom: 30px;
}


@media only screen and (max-width: 1024px) {
.box-style table th{
    padding: 12px 10px;
    width: 180px;
    line-height: 1.5;
}

.box-style table td{
    padding: 12px ;
    line-height: 1.5;
}

.comment-style p{
    margin-bottom: 20px;
}
    
    #style-02{
        margin-top: 50px;
    }
    
}

@media only screen and (max-width: 767px) {
    
#style{
    padding-bottom: 50px;
}


.box-style{
    margin: 60px 0 0;
}

.ill-style{
    text-align: center;
    float: none;
    width: 100%;
}

.txt-style{
    float: none;
    width: 100%;
    padding-top: 20px;
    box-sizing: border-box;
}

.ill-style img{
    width: 20%;
}

.box-style .title-basic{
    font-size:6vw;
    margin-bottom: 15px;
    line-height: 1.5;
}
/*.box-style .title-basic small{
    display: block;
}*/

.box-style table th{
    display: table-cell;
    width: 35%;
    padding: 9px 10px 7px;
    line-height: 1.5;
}

.box-style table td{
    display: table-cell;
    padding: 9px 10px 7px;
    line-height: 1.5;
}

.comment-style{
    margin: 20px 0 0;
    padding-top: 0;
}
    #style-01{
        margin-top: 35px;
    }

    #style-02{
        margin-top: 25px;
    }

#style-02 .ill-style{
    float: none;
}

#style-02 .txt-style{
    float: none;
}  

.comment-style p{
    margin-bottom: 15px;
}  
    
}

#types{
    padding-bottom: 100px;
}

#ul-types{
    flex-wrap: nowrap;
    margin-top: 100px;
}

#ul-types li{
    text-align: center;
    padding: 0 25px;
}

#ul-types li h3{
    font-size: 25px;
    line-height: 1.4;
}
#ul-types li h3 small{
    display: block;
    font-size: 60%;
    padding-top: 8px;
}

.ill-types{
    margin: 20px 0;
}

.ill-types img{
    vertical-align: bottom;
    width: auto;
    height: 200px;
}

@media only screen and (max-width: 767px) {
    
#types{
    padding-bottom: 50px;
}

#ul-types{
    flex-wrap: wrap;
    margin-top: 50px;
}

#ul-types li{
    text-align: center;
    padding: 0 30px;
    box-sizing: border-box;
    margin-bottom: 35px;
}

#ul-types li h3{
    font-size: 6vw;
    line-height: 1.6;
}
#ul-types li h3 small{
    padding-top: 0;
}

.ill-types img{
    height: 50vw;
}   
    
}