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


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

#works { margin: 0 auto 120px; }

#works h3 {
font-size: 3rem;
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;
}
#works 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;
}


/* read
--------------------------------------------*/
#works .read { position: relative; width: 95%; margin: 0 0 0 auto; }

#works .read .flex_wrap {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
flex-direction: row-reverse;
}
#works .read .flex_wrap .imgbox { width: 50%; position: relative; }
#works .read .flex_wrap .txtbox { width: 47%; }


/* flow
--------------------------------------------*/
#works .flow { position: relative; margin: 120px auto 0; }

#works .flow .txt { text-align: center; }
#works .flow .txt h3 { font-size: 4rem; }
#works .flow .txt h3 span { margin: auto; }

#works .flow .bg { background: linear-gradient(120deg, #2C2826 -10%, #0050a6 30%,#0050a6 70%,#2C2826 110%); }
#works .flow .bg ol { width: 1000px; margin: 0 auto; padding: 100px 0; }
#works .flow .bg ol li { margin-bottom: 50px; }
#works .flow .bg ol li:last-child { margin-bottom: 0; }
#works .flow .bg ol li h4 { font-size: 2.6rem; margin-bottom: 20px; color: #fff; }
#works .flow .bg ol li ul { background: #fff; padding: 20px; }
#works .flow .bg ol li ul li {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
margin-bottom: 20px;
}
#works .flow .bg ol li ul li h5 {
width: 35%;
font-weight: 400;
text-align: center;
padding: 10px;
background: #2C2826;
color: #fff;
}
#works .flow .bg ol li ul li p { width: 60%; font-size: 1.4rem; font-weight: 400; }


/* business
--------------------------------------------*/
#works .business { position: relative; width: 90%; margin: 120px auto 0; text-align: center; }

#works .business h3 { font-size: 3.6rem; }

#works .business .swiper { position: relative; width: 90%; margin: 0 auto; }
#works .business .swiper-slide { opacity: .6; transform: scale(.9); transition: .7s; }
#works .business .swiper-slide-active { opacity: 1; transform: scale(1); z-index: 1; }
#works .business .swiper-prev,
#works .business .swiper-next{
font-size: 0;
line-height: 0;
position: absolute;
top: 0;
display: block;
width: 50px;
height: 50px;
background: #2C2826;
text-align: center;
z-index: 1;
}
#works .business .swiper-prev { left: 0; top: 45%; }
#works .business .swiper-next { right: 0; top: 45%; }
#works .business .swiper-prev::before,
#works .business .swiper-next::before
{
font-family: 'slick';
font-size: 20px;
line-height: 2.5;
opacity: 1;
color: #fff;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
#works .business .swiper-prev::before { content: "<"; }
#works .business .swiper-next::before { content: ">"; }


/* interview
--------------------------------------------*/
#works .interview { position: relative; margin: 150px auto 0; }

#works .interview .txtbox { width: 90%; margin: auto; }
#works .interview .txtbox h3 { font-size: 4rem; margin-bottom: 0; }
#works .interview .txtbox .button a { display: inline-flex; z-index: 20; }

#works .interview .swiper { width: 95%; margin: -50px 0 0 auto; position: relative; overflow: hidden; padding-right: 80px; box-sizing: border-box;  }
#works .interview .swiper ul { padding: 90px 0px; }
#works .interview .swiper ul li { position: relative; }
#works .interview .swiper ul li .hover_wrap { overflow: hidden; }
#works .interview .swiper ul li .hover_wrap .img { transition: all 0.7s ease; }
#works .interview .swiper ul li a:hover .hover_wrap .img { transform: scale(1.1); }
#works .interview .swiper ul li .txt {
position: absolute;
bottom: 0;
background: #fff;
padding: 10px;
box-sizing: border-box;
}
#works .interview .swiper ul li .txt h4 { font-size: 2rem; }
#works .interview .swiper 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;
}

#works .interview .swiper .swiper-slide {
transform: scale(.9);
transform-origin: top;
transition: .7s;
}
#works .interview .swiper .swiper-slide-active {
transform: scale(1.1);
transform-origin: top left;
margin-right: 50px;
}

#works .interview .swiper .swiper-prev,
#works .interview .swiper .swiper-next{
font-size: 0;
line-height: 0;
position: absolute;
top: 0;
display: block;
width: 50px;
height: 50px;
border: 1px solid #2C2826;
text-align: center;
z-index: 1;
}
#works .interview .swiper .swiper-prev { right: 130px; }
#works .interview .swiper .swiper-next { right: 50px; }
#works .interview .swiper .swiper-prev::before,
#works .interview .swiper .swiper-next::before
{
font-family: 'slick';
font-size: 20px;
line-height: 2.5;
opacity: 1;
color: #2C2826;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
#works .interview .swiper .swiper-prev::before { content: "<"; }
#works .interview .swiper .swiper-next::before { content: ">"; }


}






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

#works { margin:0 auto 60px; }

#works h3 {
font-size: 2.8rem;
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;
}
#works h3 span {
display: table;
font-size: 1.4rem;
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;
}


/* read
--------------------------------------------*/
#works .read { position: relative; width: 90%; margin: 0 auto; }

#works .read .flex_wrap {  }
#works .read .flex_wrap .txtbox { margin-top: 30px; }
#works .read .flex_wrap .imgbox { position: relative; }


/* flow
--------------------------------------------*/
#works .flow { position: relative; margin: 60px auto 0; }

#works .flow .txt { text-align: center; }
#works .flow .txt h3 span { margin: auto; }

#works .flow .bg { background: linear-gradient(120deg, #2C2826 -10%, #0050a6 30%,#0050a6 70%,#2C2826 110%); }
#works .flow .bg ol { width: 90%; margin: 0 auto; padding: 50px 0; }
#works .flow .bg ol li { margin-bottom: 30px; }
#works .flow .bg ol li:last-child { margin-bottom: 0; }
#works .flow .bg ol li h4 { font-size: 1.6rem; margin-bottom: 10px; color: #fff; }
#works .flow .bg ol li ul { background: #fff; padding: 10px; }
#works .flow .bg ol li ul li {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
margin-bottom: 15px;
}
#works .flow .bg ol li ul li h5 {
width: 30%;
font-size: 1.2rem;
font-weight: 400;
text-align: center;
padding: 5px;
background: #2C2826;
color: #fff;
}
#works .flow .bg ol li ul li p { width: 65%; font-size: 1.2rem; font-weight: 400; }


/* business
--------------------------------------------*/
#works .business { position: relative; width: 90%; margin: 60px auto 0; text-align: center; }

#works .business h3 { font-size: 2.2rem; }

#works .business .swiper { position: relative; }
#works .business .swiper-prev,
#works .business .swiper-next{
font-size: 0;
line-height: 0;
position: absolute;
top: 0;
display: block;
width: 50px;
height: 50px;
background: #2C2826;
text-align: center;
z-index: 1;
}
#works .business .swiper-prev { left: 0; top: 45%; }
#works .business .swiper-next { right: 0; top: 45%; }
#works .business .swiper-prev::before,
#works .business .swiper-next::before
{
font-family: 'slick';
font-size: 20px;
line-height: 2.5;
opacity: 1;
color: #fff;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
#works .business .swiper-prev::before { content: "<"; }
#works .business .swiper-next::before { content: ">"; }


/* interview
--------------------------------------------*/
#works .interview { position: relative; margin: 60px auto 0; }

#works .interview .txtbox { width: 90%; margin: auto; }
#works .interview .txtbox h3 { margin-bottom: 0; }
#works .interview .txtbox .button a { display: inline-flex; z-index: 5; }

#works .interview .swiper { width: 95%; margin: -50px 0 0 auto; position: relative; overflow: hidden; padding-right: 20px; box-sizing: border-box;  }
#works .interview .swiper ul { padding: 90px 0 0; }
#works .interview .swiper ul li { position: relative; }
#works .interview .swiper ul li .txt {
position: absolute;
bottom: 0;
background: #fff;
padding: 10px;
box-sizing: border-box;
}
#works .interview .swiper ul li .txt h4 { font-size: 1.6rem; }
#works .interview .swiper 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;
}

#works .interview .swiper .swiper-prev,
#works .interview .swiper .swiper-next{
font-size: 0;
line-height: 0;
position: absolute;
top: 0;
display: block;
width: 40px;
height: 40px;
border: 1px solid #2C2826;
text-align: center;
z-index: 1;
}
#works .interview .swiper .swiper-prev { right: 90px; }
#works .interview .swiper .swiper-next { right: 20px; }
#works .interview .swiper .swiper-prev::before,
#works .interview .swiper .swiper-next::before
{
font-family: 'slick';
font-size: 18px;
line-height: 2.3;
opacity: 1;
color: #2C2826;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
#works .interview .swiper .swiper-prev::before { content: "<"; }
#works .interview .swiper .swiper-next::before { content: ">"; }

}