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



/*PC*/
@media print, screen and (min-width: 769px) {

#interview { margin: 0 auto 120px; }


#interview ul { display: flex; flex-wrap: wrap; border-top: 1px solid #ccc; }
#interview ul li {
width: calc((100% - 2px) / 3);
border-left: 1px solid #ccc;
border-bottom: 1px solid #ccc;
padding: 40px;
box-sizing: border-box;
}
#interview ul li:last-child { border-right: 1px solid #ccc; }

#interview ul li .hover_wrap { width: 80%; margin: auto; overflow: hidden; }
#interview ul li .hover_wrap .img { transition: all 0.7s ease; }
#interview ul li a:hover .hover_wrap .img { transform: scale(1.1); }
#interview ul li .txt { display: flex; flex-wrap: wrap; justify-content: space-between; padding: 40px 0 0; }
#interview ul li .txt h4 {
font-size: 1.8rem;
background: linear-gradient(123deg, #2C2826 0%, #0050a6 45%);
background-size: 200% 200%;
background-position: 0 0;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
#interview ul li .txt h4 span {
display: table;
font-size: 1.4rem;
background: linear-gradient(123deg, #2C2826 0%, #0050a6 45%);
background-size: 200% 200%;
background-position: 0 0;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}

#interview ul li .txt .button span.icon { width: 40px; height: 40px; }
#interview ul li .txt .button .icon.arrow::after { width: 10px; height: 15px; }



/* detail
--------------------------------------------*/
#interview h3 {
font-size: 4rem;
margin-bottom: 40px;
background: linear-gradient(123deg, #2C2826 0%, #0050a6 60%);
background-size: 200% 200%;
background-position: 0 0;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
display: inline-block;
}
#interview h3 span {
display: table;
font-size: 1.6rem;
font-weight: 500;
background: linear-gradient(123deg, #2C2826 0%, #0050a6 45%);
background-size: 200% 200%;
background-position: 0 0;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}

#interview .flex_wrap {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
width: 95%; margin: 0 auto 0 0;
}
#interview .flex_wrap .img { width: 53%; position: relative; }
#interview .flex_wrap .txt { width: 42%; margin-top: 30px; }
#interview .flex_wrap .txt p { font-size: 2.6rem; }
#interview .flex_wrap .txt p span {
display: table;
font-size: 1.4rem;
color: #fff;
padding: 5px 10px;
margin-bottom: 5px;
background: linear-gradient(90deg, #0050a6, #0071bf);
}

#interview .b_box { width: 80%; margin: 100px auto 0; }
#interview .b_box .imgbox { margin: 0 auto 80px; }
#interview .b_box .txtbox { margin: 0 auto 80px; }
#interview .b_box .txtbox h4 {
font-size: 2.2rem;
margin: 0 0 20px;
display: inline-block;
background: linear-gradient(123deg, #2C2826 0%, #0050a6 60%);
background-size: 200% 200%;
background-position: 0 0;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
#interview .b_box .txtbox p { line-height: 2; }

#interview .button a { justify-content: center; }



}


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

#interview { margin: 0 auto 60px; }


#interview ul { width: 90%; margin: 0 auto; border-top: 1px solid #ccc; }
#interview ul li {
border: 1px solid #ccc;
border-top: none;
padding: 40px 20px;
box-sizing: border-box;
}

#interview ul li .hover_wrap { width: 80%; margin: auto; overflow: hidden; }
#interview ul li .txt {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
padding: 30px 0 0;
}
#interview ul li .txt h4 {
font-size: 1.6rem;
background: linear-gradient(123deg, #2C2826 0%, #0050a6 60%);
background-size: 200% 200%;
background-position: 0 0;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
#interview ul li .txt h4 span {
display: table;
font-size: 1.2rem;
background: linear-gradient(123deg, #2C2826 0%, #0050a6 45%);
background-size: 200% 200%;
background-position: 0 0;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}

#interview ul li .txt .button span.icon { width: 40px; height: 40px; }
#interview ul li .txt .button .icon.arrow::after { width: 10px; height: 15px; }



/* detail
--------------------------------------------*/
#interview h3 {
font-size: 2.2rem;
margin-bottom: 20px;
background: linear-gradient(123deg, #2C2826 0%, #0050a6 60%);
background-size: 200% 200%;
background-position: 0 0;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
display: inline-block;
}

#interview .flex_wrap { }
#interview .flex_wrap .img { width: 95%; position: relative; }
#interview .flex_wrap .txt { width: 90%; margin: 30px auto 0; }
#interview .flex_wrap .txt p { font-size: 2rem; }
#interview .flex_wrap .txt p span {
display: table;
font-size: 1.4rem;
color: #fff;
padding: 3px 10px;
margin-bottom: 5px;
background: linear-gradient(90deg, #0050a6, #0071bf);
}

#interview .b_box { width: 90%; margin: 50px auto 0; }
#interview .b_box .imgbox { margin: 0 auto 40px; }
#interview .b_box .txtbox { margin: 0 auto 40px; padding: 20px; background: #f5f5f6; }
#interview .b_box .txtbox h4 {
font-size: 1.6rem;
margin: 0 0 20px;
display: inline-block;
background: linear-gradient(123deg, #2C2826 0%, #0050a6 60%);
background-size: 200% 200%;
background-position: 0 0;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
#interview .b_box .txtbox p { font-size: 1.2rem; line-height: 2; }

#interview .button a { justify-content: center; }



}