@charset "UTF-8";
.pc {}
.sp {display: none !important;}

/**************************** common inner ********************************/
.common_inner {
width: 1024px;
padding-left:calc((100% - 1024px) / 2 );
padding-right:calc((100% - 1024px) / 2 );
}

.common_inner_wp {
width: calc(1024px + 18px);
padding-left:calc((100% - 1024px - 18px) / 2 );
padding-right:calc((100% - 1024px - 18px) / 2 );
}

.common_inner_800 {
width: 768px;
padding-left:calc((100% - 768px) / 2 );
padding-right:calc((100% - 768px) / 2 );
}

@media screen and (min-width:1500px) {
.common_inner {width: 70%; padding-left:calc((100% - 70%) / 2 ); padding-right:calc((100% - 70%) / 2 );}
.common_inner_wp {width: calc(70% + 18px); padding-left:calc(15% - 9px); padding-right:calc(15% - 9px);}
}
@media screen and (max-width:1080px) {
.common_inner {width: 90%; padding-left:calc((100% - 90%) / 2 ); padding-right:calc((100% - 90%) / 2 );}
.common_inner_wp {width: calc(90% + 18px); padding-left:calc(5% - 9px); padding-right:calc(5% - 9px);}
.common_inner_800 {width: 90%; padding-left:calc((100% - 90%) / 2 ); padding-right:calc((100% - 90%) / 2 );}
}

@media screen and (max-width:960px) {
.tb {display: none !important;}
}

/**************************** flex ********************************/
.flex {
display: flex;
flex-wrap: wrap;
}

.f_start {align-items: flex-start;}
.f_center {align-items:center !important;}
.f_stretch {align-items:stretch !important;}
.f_end {align-items:flex-end;}
.f_reverse {flex-direction: row-reverse;}
.nowrap {flex-wrap: nowrap;}
.between {justify-content: space-between;}
.around {justify-content: space-around;}
.center {justify-content: center !important;}

.flex .halfbox {width: calc(50% - 0px);}
.flex .thirdbox {width: calc((100% / 3 ) - 0px);}

.flex100 {width:calc((100% / 1 ) - 0px);}
.flex80 {width:calc((80% / 1 ) - 0px); padding:0 10%;}
.flex50 {width:calc((100% / 2 ) - 10px);}
.flex33 {width:calc((100% / 3 ) - 12px); margin-bottom: 18px;}
.flex25 {width:calc((100% / 4 ) - 12px); margin-bottom: 16px;}
.flex20 {width:calc((100% / 5 ) - 10px); margin-bottom: 10px;}

.flex55 {width:calc((100% - 45% ) - 20px);}
.flex45 {width:calc((100% - 55% ) - 20px);}

/**************************** header ********************************/
header {
width: calc(100% - 20px - 15% - 5px);
height: calc(100px - 50px);
padding: 25px 0 25px 20px;
display: flex;
justify-content: space-between;
align-items: center;
}

header .header_logobox {
display: block;
width: 200px;
height: 50px;
background: url("../img/uniface_logo_bk.svg") left center / contain no-repeat;
}

header .header_nav {
width:auto;
display: flex;
align-items: center;
justify-content: flex-end;
}

header .header_nav i {color: rgba(180,10,10,1.0);}

header .header_nav a {
background: rgba(235,235,235,1.0);
padding:0.6em 1em 0.6em 1em;
transition: all 0.3s ease;
font-size: 95%;
letter-spacing: 0.5px;
font-weight: 500;
color: rgb(88,88,88);
}

header .header_nav a:hover {
background: rgba(180,10,10,1.0);
color:white;
letter-spacing: 1px;
}

header .header_nav a:hover i {
color:white;
}

header .header_nav a:first-child {
padding-left:2em;
border-radius: 1.5em 0 0 1.5em;
}

header .header_nav a:last-child {
padding-right:2em;
border-radius: 0 1.5em 1.5em 0;
}

#nav_btn {
position:fixed;
top: 25px;
right:40px;
width:25px;
height:25px;
margin:12.5px 0 12.5px 0;
z-index: 999;
background: url("../img/navi_btn.svg") 0 0 / 25px no-repeat;
animation: nav_btn 0.6s steps(10) forwards;
cursor: pointer;
transition: all 0.7s ease;
}
@keyframes nav_btn {
  0% { background-position: 0px 0px; }
  100% { background-position: 0px -250px; }
}

#nav_btn.active {
animation: nav_btn_active 0.6s steps(14) forwards;
right:340px;
}
@keyframes nav_btn_active {
  0% { background-position: 0px -250px; }
  100% { background-position: 0px -600px; }
}

/*** nav_btn_menu ***/
#nav_btn_menu {
position: fixed;
width: 300px;
height:100%;
top:0px;
left: 100%;
background: rgba(150,10,10,1.0);
color: rgba(255,255,255,1.0);
transition: all 0.7s ease;
z-index: 998;
padding-top:70px;
}

body.active {margin-left:-300px;}
#nav_btn_menu.active {left: calc(100% - 300px);}

#nav_btn_menu dl {
position: relative;
width: calc(100% - 40px);
margin:20px 20px 30px 20px;
padding:0;
}

#nav_btn_menu dt {
position: relative;
margin-bottom: 0.5em;
font-family: 'Ubuntu', sans-serif;
font-weight: 700;
}

#nav_btn_menu dt.menu_title::after {
position: absolute;
content: "";
width: 120px;
height:1px;
top: 0.7em;
right:0;
background: linear-gradient(135deg, rgba(255,255,255,0.3)20%, rgba(255,255,255,1.0)100%);
}

#nav_btn_menu dd {
letter-spacing: 0.05em;
padding-right: 0px;
padding-bottom: 0.4em;
cursor: pointer;
}

#nav_btn_menu dd.child {
padding-left: 1em;
}

#nav_btn_menu dd:hover {
margin-left:5px;
transition: all 0.3s ease;
}

#nav_btn_menu dd::after {
content: ">";
position: absolute;
right:0;
font-size: 60%;
}

/**************************** main ********************************/
main {
}

article section {width: 100%;  padding:50px 0px 100px; overflow: hidden;}
aside {width: 100%;  padding:50px 0px 100px; overflow: hidden;}

/**************************** KV ********************************/
.KV {
width: 100%;
height: auto;
box-sizing:border-box;
}

.KV_slider {
position: relative;
width: calc(100% - 20px - 45px) !important;
height:calc(100vh - 200px - 140px);
border-radius: 20px 20px 20px 20px;
margin:0 10px;
padding:70px 25px;
display: flex !important;
flex-wrap: wrap;
align-content: space-between;
overflow-x: hidden;
}

.KV_slider div {width: 100%;}
.KV_slider .KV_catchcopy {margin-top:1em;}
.KV_slider .KV_catchcopy_B {margin-top:0em;}
.KV_slider .KV_bodycopy {margin-top:-50px;}
.KV_slider .btn_area {}

@media screen and (max-width:1080px) {
.KV_bodycopy {background: rgba(255,255,255,0.5);}
}

rt.newface {text-align: center;}
span.face {letter-spacing: -0.12em;}
span.no {letter-spacing: -0.4em;}
span.and {font-size: 80%; padding:0 0.2em 0 0.2em;}

.KV_story {
display: inline-block;
font-family: "vdl-gigag", sans-serif;
font-weight: 500;
font-style: normal;
transform: skewX(-8deg);
letter-spacing: 0;
line-height: 1.2em;
color: white;
background: rgba(180,10,10,1.0);
padding:0.5em 2em 0.5em 3em;
margin-left: -3em;
margin-bottom: 0.5em;
}

.KV_copy_jp {
font-family: "vdl-gigag", sans-serif;
font-weight: 500;
font-size: 250%;
font-style: normal;
transform: skewX(-8deg);
letter-spacing: -1px;
line-height: 1.2em;
color: rgb(180,10,10);}

a.KV_btn {
position: relative;
display: inline-block;
color: white;
border-radius: 1.5em;
padding:0.6em 2em 0.65em 4.3em;
font-weight: 500;
transition: all 0.3s ease;
background: linear-gradient(135deg, rgba(222,22,22,1.0)33%, rgba(180,10,10,1.0)66%);
background-size:150% auto; 
background-position: right center;
cursor: pointer;}
a.KV_btn::before {
content: "";
display: inline-block;
position: absolute;
top:-1.8em;
left:0.5em;
width: 80px;
height:80px;
background: url("../img/paperbagman_a.svg")left center / contain no-repeat;
}
a.KV_btn:hover {
background-position: left center;
padding:0.6em 2em 0.65em 4.5em;
}

.KV_slider.KV_01 {background: url("../img/KV/kv_01.jpg") right bottom / cover no-repeat;}
.KV_slider.KV_02 {background: url("../img/KV/kv_02.jpg") right bottom / cover no-repeat;}
.KV_slider.KV_03 {background: url("../img/KV/kv_03.jpg") right bottom / cover no-repeat;}
.KV_slider.KV_04 {background: url("../img/KV/kv_04.jpg") right bottom / cover no-repeat;}
.KV_slider.KV_05 {background: url("../img/KV/kv_05.jpg") right bottom / cover no-repeat;}
.KV_slider.KV_06 {background: url("../img/KV/kv_06.jpg") right bottom / cover no-repeat;}

.KV_slider.KV_01::before, .KV_slider.KV_02::before, .KV_slider.KV_03::before, .KV_slider.KV_04::before, .KV_slider.KV_05::before {
content: "uniface's　- face -";
display: block;
position: absolute;
top:0;
left:0;
width: auto;
height:auto;
padding:0 2.5em 8px 2em;
background: rgba(255,255,255,1.0);
z-index: 98;
font-family: cairo, sans-serif;
font-weight: 600;
font-style: normal;
font-size: 100%;
border-radius: 0 0 20px 0;
color:rgb(150,10,10);
letter-spacing: 1px;
}

.KV_slider.KV_01::after, .KV_slider.KV_02::after, .KV_slider.KV_03::after, .KV_slider.KV_04::after, .KV_slider.KV_05::after, .KV_slider.KV_06::after {
content: "";
display: block;
position: absolute;
top:0;
right:0;
width: 60px;
height:60px;
z-index: 99;
}

.KV_slider.KV_01::after {background: url("../img/face_01.svg") right top / contain no-repeat;}
.KV_slider.KV_02::after {background: url("../img/face_02.svg") right top / contain no-repeat;}
.KV_slider.KV_03::after {background: url("../img/face_03.svg") right top / contain no-repeat;}
.KV_slider.KV_04::after {background: url("../img/face_04.svg") right top / contain no-repeat;}
.KV_slider.KV_05::after {background: url("../img/face_05.svg") right top / contain no-repeat;}
.KV_slider.KV_06::after {background: url("../img/face_new.svg") right top / contain no-repeat;}

/**************************** section title ********************************/
.sec_title, .sec_title_b, .sec_title_h {
position: relative;
width: auto;
margin:40px auto;
text-align: center;
}

.sec_title::before, .sec_title_b::before, .sec_title_h::before {
content: "";
position: absolute;
top:-35px;
left:calc(50% - 15em);
width: 100px;
height:100px;
}

.sec_title::before {background: url("../img/paperbagman_a.svg") left center / contain no-repeat;}
.sec_title_b::before {background: url("../img/paperbagman_b.svg") left center / contain no-repeat;}
.sec_title_h::before {background: url("../img/paperbagman_h.svg") left center / contain no-repeat;}

.sec_title .eng, .sec_title_b .eng, .sec_title_h .eng {
font-family: 'Ubuntu', sans-serif;
font-size: 300%;
font-weight: 700;
padding-bottom: 12px;
letter-spacing: -1px;
}

.sec_title .sub_jp, .sec_title_b .sub_jp, .sec_title_h .sub_jp {
font-family: "vdl-gigag", sans-serif;
font-weight: 500;
font-style: normal;
transform: skewX(-8deg);
color: rgb(180,10,10);
font-size: 120%;
padding-left: 0.2em;
padding-bottom: 20px;
}

/**************************** section 01 company ********************************/
#company {
margin-top:200px;
}

.ourcompany {
width: calc(100% - 50px);
text-align: justify;
font-size: 100%;
}

.sec01box {overflow: hidden;}

.sec01box figure, .sec01box figure img {
border-radius: 20px 20px 0 0;
}

.sec01box figure img:hover {
transform: scale(1.1);
transition: all 0.3s ease;
}

.sec01box .textbox {
padding:20px;
border-radius: 0 0 20px 20px;
background: rgb(55,55,55);
color: white;
}

.sec01box .title {
padding-bottom: 1em;
}

.sec01box .bodycopy {
text-align: justify;
}

/**************************** section 02 ********************************/

.vision {
background: rgb(245,245,245) url("../img/bg_index_product_04.svg") top right / contain no-repeat;
}

.halfbox {
width:calc(50% - 80px);
}

.xbox {
width:160px;
background: url("../img/xbox.svg") center center / 80px no-repeat;
}

.halfbox_title {
font-size: 150%;
font-weight: 700;
line-height: 2em;
}

.halfbox_mid {
font-size: 150%;
font-weight: 700;
line-height: 1.5em;
padding-top:20px;
}

.section_title {
margin:0 auto 50px;
text-align: center;
padding:20px 0 20px;
width:35vw;
}

.flex_company, .flex_recruit {
display: flex;
flex-wrap: nowrap;
align-items: flex-start;
width:100%;
}

.flex_company .left { width: calc(50% - 9em - 50px); margin-right:50px;}
.flex_company .right { width: calc(50% + 9em);}
.flex_company .form_left { width: calc(50% - 9em - 50px); margin-right:50px;}
.flex_company .form_right { width: calc(50% + 9em);}
.flex_recruit .left { width: calc(50% - 0em - 25px); margin-right:25px;}
.flex_recruit .right { width: calc(50% - 0em - 25px); margin-left:25px;}

.flex_company .left .title, .flex_company .right .title, .form_left .title, .form_right .title {
font-size: 125%;
font-weight: 700;
line-height: 2em;
}

.recruit_mid {
font-size: 135%;
font-weight: 700;
text-align: center;
line-height: 2em;
}

.recruit_space {
width:40px;
height:80px;
margin:20px auto;
background: url("../img/recruit_spacer.svg") center center / contain no-repeat;
}

.history_table {width:55em; margin-left:calc((100% - 55em) / 2);}
.history_table dl {display: flex; padding:10px 0 10px 0;}
.history_table .row1 {width:20%; padding-left:0em; padding-bottom:10px; border-bottom:solid 3px rgb(180,0,0);}
.history_table .row2 {width:80%; padding-left:2em; padding-bottom:10px; border-bottom:solid 1px #ddd;}

.recruit_table {width:55em; margin-left:calc((100% - 55em) / 2);}
.recruit_table dl {display: flex; padding:10px 0 10px 0;}
.recruit_table .row1 {width:20%; height:6em;}
.recruit_table .row2 {width:80%; height:6em;}

.job_title {
font-size: 135%;
font-weight: 700;
margin-bottom: 20px;
background: rgb(180,10,10);
padding: 0.5em 2em 0.5em 2em;
border-radius: 1em;
color: white;
}

.bg_wh_pc {background-color: rgb(255,255,255) !important;}

/**************************** contact form ********************************/
.contact {
width: 100%;
padding:50px 0;
background: rgba(180,10,10,1.0);
}

.thankspage {
width: 100%;
padding:200px 0 400px;
}

.thankspage figure, .thankspage figure img {
width: 100px;
height:100px;
}

.thanks_right {
margin-left: 2em;
transition: all 0.3s ease;
}

.thanks_right a:hover {
color:rgb(180,10,10);
letter-spacing: 1px;
}

/**************************** WordPress Feed ********************************/
.unifacehub .info_grid {
width: calc((100% / 3) - 18px);
background: rgba(222,222,222,1.0);
border-radius: 8px;
margin:9px;
transition: all 0.3s ease;
}

.unifacehub .info_grid figure {
position: relative;
border-radius: 8px 8px 0 0;
}

.unifacehub .info_grid figure img {
width: 100%;
border-radius: 8px 8px 0 0;
overflow: hidden;
}
.unifacehub .info_grid figure img:hover {
transform: scale(1.1);
cursor: pointer;
}

.unifacehub .info_grid_title {
font-weight: 500;
padding:1em;
}

.unifacehub .info_grid_date {
font-size: 90%;
padding:0 1.05em;
color:rgba(150,150,150,1.0);
}

.unifacehub .info_grid_body {
padding:1em 1em 2em 1em;
text-align: justify;
}

.unifacehub .info_grid .category {
position: absolute;
bottom:15px;
right:0px;
background: rgba(33,33,33,0.8);
color:white;
font-size: 88%;
padding:5px 15px;
}

a.info_grid:hover {
background: rgba(200,200,200,1.0);
margin-top:4px;
}

/**************************** footer ********************************/
footer {
position: relative;
display: flex;
flex-wrap:wrap;
justify-content: space-between;
width:100%;
color:white;
border-bottom:solid 20px rgb(55,55,55);
padding-top:80px;
padding-bottom: 60px;
background: rgb(38,37,36) url("../img/footer_face.svg") left center / cover no-repeat;
}

.footer_left {
width:calc(50% - 0px);
margin-left:0px;
}

.footer_logo {
width:160px;
margin-bottom:30px;
}

.footer_logo img {
width:100%;
}

.company_name {
width:220px;
margin-bottom:10px;
}

.footer_left i {
padding-right:0.5em;
}

.footer_left .tel {
margin:1em 0;
font-weight: 700;
font-size: 120%;
line-height: 1.5em;
letter-spacing: 0.1em;
}

.footer_left .copyright {}
.footer_left .copyright::after {
content: "© 2023 UNIFACE.co.,ltd";
position:absolute;
bottom:50px;
color:rgba(88,88,88,1.0);
font-size: 88%;
}

.footer_right {
width:calc(50% - 0px);
margin-right:0px;
}


#footer_nav_menu {
border-left: solid 1px rgba(180,10,10,1.0);
padding-left:20px;
}

#footer_nav_menu ul li {
margin-left:10em;
padding-bottom: 0.25em;
transition: all 0.3s ease;
cursor: pointer;
}
#footer_nav_menu ul li:hover { padding-left:10px;}

.footer_nav_menu_01 {position: relative;}
.footer_nav_menu_01::before {content: "採用サイト";}
.footer_nav_menu_02::before {content: "企業サイト";}
.footer_nav_menu_03::before {content: "製品サイト";}
.footer_nav_menu_04::before {content: "開発者ブログ";}
.footer_nav_menu_01::before, .footer_nav_menu_02::before, .footer_nav_menu_03::before, .footer_nav_menu_04::before {
position: absolute;
margin-left:-10em;
font-weight: 500;
color: rgba(111,111,111,1.0);
}

#page_top {
position: absolute;
top:00px;
right:40px;
writing-mode: vertical-rl;
background: rgba(180,10,10,1.0);
padding:1.5em 1em;
transition: all 0.3s ease;
}

#page_top:hover {
top:20px;
}