@charset "utf-8";
@import url("root.css");

/***************************************
------------- TOP MAIN IMG -------------
***************************************/
[class*="z-0"] {
  position: relative;
}
.z-01 { z-index: 1; }
.z-02 { z-index: 2; }
.z-03 { z-index: 3; }
.z-04 { z-index: 4; }
.z-05 { z-index: 5; }
.z-06 { z-index: 6; }



#mv {
margin: 0 auto;
text-align: center;
background: url("../img/top_bg01.jpg") top center no-repeat;
background-size: cover;
height: 500px;
padding: 45px 0;

transition: background-image 1s ease-in-out;
display: flex;
justify-content: center;
align-items:center;
}

/* テキスト画像の共通設定 */
#mv h2 {
margin: 0 auto;
width: 1200px;
text-align: left;
position: relative;
display: inline-block;

}

#mv h2 img {
opacity: 0;
transform: translateY(10px);
transition: opacity 2.8s ease, transform 2.8s ease;
margin: 0 0 15px 0;
}

#mv h2 img.active {
opacity: 1;
transform: translateY(0); /* 上にふわっと移動して定位置へ */
}


@media screen and (max-width: 900px) {
#mv {
margin: 60px auto 0;
text-align: center;
background: url("../img/top_sp_01.jpg") top center no-repeat;
background-size:cover;
height: 500px;
padding: 20px 0;
display: flex;
justify-content: center;
align-items:baseline;

transition: background-image 1s ease-in-out;

}

/* テキスト画像の共通設定 */
#mv h2 {
margin: 0 20px 0 auto;
width:55%;
text-align: left;
position: relative;
display: inline-block;

}

#mv h2 img {
opacity: 0;
transform: translateY(10px); /* 少し下から出る */
transition: opacity 1.8s ease, transform 1.8s ease; /* ゆっくりふわっと */
margin: 0 0 5px 0;
}

#mv h2 img.active {
  opacity: 1;
  transform: translateY(0); /* 上にふわっと移動して定位置へ */
}

}



/***************************************
------------- news -------------
***************************************/

#news{}

#news .col{
width: 250px;
box-sizing: border-box;
}

#news .col:nth-child(2){
width: 950px;
box-sizing: border-box;
}


#news .link_a{
margin: 40px auto;
}
#news dl{
width: 100%;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}

#news dt{
width: 150px;
text-align: left;
border-bottom: 2px dotted var(--base-color04);
padding: 20px 0;
box-sizing: border-box;
}

#news dd{
width:130px;
text-align: left;
border-bottom: 2px dotted var(--base-color04);
padding: 20px 0 20px 0;
box-sizing: border-box;
}
#news dd:nth-of-type(2n){
width:670px;
text-align: left;
border-bottom: 2px dotted var(--base-color04);
padding: 20px 0;
box-sizing: border-box;
display: flex;
flex-wrap: wrap;
justify-content: flex-start;
}

#news dd span{
display: block;
width: 110px;
text-align: center;
padding: 0 0;
box-sizing: border-box;
margin: 0 20px 0 0;
background-color: var(--base-color01);
color: var(--base-color03);
display: flex;
align-items: center;
justify-content: center;
font-size: 14px;
}

#news dd a{transition: color .25s ease;font-size: 17px;}
#news dd a:hover{color: var(--base-color01);}

#news dd .cate01{background-color: var(--base-color01);}
#news dd .cate02{background-color: #00C495;}
#news dd .cate03{background-color: #0086AE}

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

#news{}
#news .col{
width: 100%;
box-sizing: border-box;
display: flex;
justify-content: center;
}

#news .col:nth-child(2){
width: 100%;
box-sizing: border-box;
}

#news .link_a{
margin: 20px auto 0;
}
#news dl{
width: 100%;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
border-top: 1px dotted var(--base-color04);
margin: 20px auto 0;
}

#news dt{
width:25%;
text-align: left;
border-bottom: 1px dotted var(--base-color04);
padding: 15px 0;
box-sizing: border-box;
border-bottom: 1px dotted var(--base-color04);
}

#news dd{
width:75%;
text-align: left;
border-bottom: 1px dotted var(--base-color04);
padding: 15px 0;
}
#news dd:nth-of-type(2n){
width:100%;
text-align: left;
border-bottom: 1px dotted var(--base-color04);
padding: 15px 0;
}


}

/***************************************
------------- service -------------
***************************************/
#service {
background: url("../img/bg_logo.png")top left no-repeat;
background-color: var(--base-color05);
}

#service .bg{
background: url("../img/bg_logo.png")bottom right no-repeat;
}



#service .title_a{
margin: 0 auto 40px;
}

#service p{
font-size: 24px;
text-align: center;
}

#service .row{
margin: 50px auto 0;
}


#service .bg01{background: url("../img/s_01.jpg")top left no-repeat;}
#service .bg02{background: url("../img/s_02.jpg")top left no-repeat;}
#service .bg03{background: url("../img/s_03.jpg")top left no-repeat;}

#service .col_03 a{
background-color: #ffffff;
margin: 185px 0 0 10%;
width: 90%;
display: block;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
padding:20px 15px 20px 20px;
box-sizing: border-box;
line-height: 1.4;
font-size: 24px;
font-weight: 600;

display:flex;
flex-wrap: wrap;
justify-content:space-between;
font-weight:600;
text-decoration: none;
transition: background 0.3s ease;

}

#service .col_03:hover {opacity: 0.8;}

#service .col_03 .arrow {
font-size: 18px;
  background: var(--base-gd);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

#service .col_03 span{
color: #707070;
font-size: 14px;
line-height: 1.4;
display: block;
width: 100%;
}

@media screen and (max-width: 900px) {
#service {background-size: 60%;}
#service .bg{background-size: 60%;}

#service .title_a{
margin: 0 auto 20px;
}

#service p{
font-size:18px;
text-align: left;
}

#service .row{
margin: 20px auto 0;
}

#service .col_03{
width: 100%;
margin: 0 auto 25px;
}

#service .col_03:nth-child(3n){
margin: 0 auto 0;
}

#service .col_03 a {
line-height: 1.6;
font-size: 20px;
padding: 15px 15px 15px 20px;
}
}

/***************************************
------------- COMPANY -------------
***************************************/

#company {
background: url("../img/bg_b.png")top center repeat-y;
background-size: cover;
}

#company .bg{
background: url("../img/cmp_bg.png")top center no-repeat;
background-size: 100%;
}

#company .title_a{
margin: 0 auto 40px;
}

#company p{font-size: 18px;
}


#company .txt_b{
font-size: 24px;
font-weight: 600;
padding: 0 0 30px 0;
}

#company .link_a{
width: 320px;
margin: 40px auto 0;
}


@media screen and (max-width: 900px) {
#company {
background: url("../img/bg_b.png")top center repeat-y;
background-size: cover;
}

#company .bg{
background: url("")top center no-repeat;
background-size: 100%;
}

#company .box{
width: 100%;

}

#company .title_a{margin: 0 auto 20px;}
#company .txt_b{padding: 0 0 20px 0;}

#company .link_a{
width: 80%;
margin: 40px auto 40px;
}



}


/***************************************
------------- RECRUITMENT -------------
***************************************/

#recruitment{}
#recruitment .col{
width: 570px;
background-color: #f2f2f2;
margin: 0 60px 0 0;
padding: 25px;
box-sizing: border-box;

}

#recruitment .col:nth-child(2n){
margin: 0 0 0 0;
}

#recruitment dl{
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: flex-start;
}

#recruitment dt{
width: 28%;
}

#recruitment dd{
width: 72%;
padding: 0 0 0 20px;
}

#recruitment dd p{
font-size: 17px;
line-height: 1.6;
}

#recruitment .title_a h3 {
line-height: 1;
}


#recruitment .link_a{
width: 320px;
margin: 20px auto 0;

}

@media screen and (max-width: 900px) {
#recruitment{}
#recruitment .col{
width: 100%;
background-color: #f2f2f2;
margin:0 auto 40px;
padding: 25px;
box-sizing: border-box;

}

#recruitment .col:nth-child(2n){
margin: 0 0 0 0;
}

#recruitment dl{justify-content: center;}
#recruitment dt{width: 100%;margin: 0 auto; text-align: center;}
#recruitment dt img{padding: 0 0 20px 0;}
#recruitment dd{
width: 100%;
padding: 0 0 0 0;
margin: 0 auto;
text-align: center;
}

#recruitment dd p{
font-size: 17px;
line-height: 1.6;
padding: 20px 0 0 0;
}

#recruitment .title_a h3 {
line-height: 1;
}


#recruitment .link_a{
width: 100%;
margin: 20px auto 0;

}


}