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

@media screen and (max-width: 768px) and (orientation: landscape) {
.portrait {display: none !important;}
}

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

.common_inner_wp {
width: calc(100% - 20px);
padding-left:10px;
padding-right:10px;
}

.common_inner_800 {
width: calc(100% - 40px);
padding-left:20px;
padding-right:20px;
}

@media screen and (max-width:768px) {
.common_inner_wp {
width: calc(100% - 40px);
padding-left:20px;
padding-right:20px;
}
}

/**************************** 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% / 1 ) - 0px);}
.flex33 {width:calc((100% / 1 ) - 0px); margin-bottom: 20px;}
.flex25 {width:calc((100% / 1 ) - 0px); margin-bottom: 15px;}
.flex20 {width:calc((100% / 1 ) - 0px); margin-bottom: 10px;}

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

@media screen and (max-width: 768px) and (orientation: landscape) {
.flex50 {width:calc((100% / 2 ) - 10px);}
}

@media screen and (min-width: 500px) and (max-width: 880px) and (orientation: portrait) {
.flex50 {width:calc((100% / 2 ) - 10px);}
}

/**************************** header ********************************/
header {
position: absolute;
width: calc(100% - 40px);
height: auto;
padding: 15px 20px 20px;
z-index: 90;
}

header .header_logobox {
display: block;
width: 120px;
height: 40px;
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;
}

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: 0px;
right:20px;
width:25px;
height:25px;
margin:20px 0 25px 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:20px;
}

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%;
}

@media screen and (max-width: 768px) and (orientation: landscape) {
#nav_btn_menu {
padding-top:10px;
padding-bottom: 50px;
overflow-y: scroll;
}

#nav_btn_menu dl {
position: relative;
width: calc(100% - 40px);
margin:10px 20px 10px 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 {
position: relative;
overflow-x: hidden;
}

article section {width: 100%;  padding:70px 0px;}
aside {width: 100%;  padding:70px 0px;}


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

.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_bodycopy {
margin-top:-30px; 
background: rgba(255,255,255,0.5);
padding:20px;
margin-left:-20px;
border-radius: 0 10px 10px 0;
}
.KV_slider .btn_area {}

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: 220%;
font-style: normal;
transform: skewX(-8deg);
letter-spacing: -1px;
line-height: 1.2em;
color: rgb(150,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(88,88,88);
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;}

/**************************** KV for SP ********************************/
section.KV_for_SP {
margin:0;
padding:100px 20px 50px;
width: calc(100% - 40px);
height: calc(147vw - 100px - 50px);
background: url("../img/KV/kv_06.jpg") right 19% bottom / cover no-repeat;
display: flex !important;
flex-wrap: wrap;
align-content: space-between;
overflow-x: hidden;
}

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

.KV_bodycopy_sp {
margin-top:-30px; 
background: rgba(255,255,255,0.5);
padding:20px;
margin-left:-20px;
border-radius: 0 10px 10px 0;
}

a.KV_btn_sp {
position: relative;
display: inline-block;
color: white;
border-radius: 1.5em;
padding:0.6em 2em 0.65em 6em;
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_sp::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_sp:hover {
background-position: left center;
padding:0.6em 2em 0.65em 4.5em;
}

@media screen and (max-width: 768px) and (orientation: landscape) {
section.KV_for_SP {
margin:0;
padding:80px 20px 20px;
width: calc(100% - 40px);
height: calc(100vh - 80px - 20px);
background: url("../img/KV/kv_06.jpg") right 19% bottom / cover no-repeat;
display: flex !important;
flex-wrap: nowrap;
align-content: center;
justify-content: space-between;
overflow-x: hidden;
}
.landscape {display: block !important;}
.KV_bodycopy_sp {
margin-top:0px; 
background: rgba(255,255,255,0.5);
padding:20px;
margin-left:20px;
border-radius: 10px 10px 10px 10px;
}
a.KV_btn_sp {
position: relative;
display: inline-block;
color: white;
border-radius: 1em;
padding:0.6em 1em 0.65em 5em;
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;
margin-top:4em;
}
.btn_area {display: none !important;}
}

@media screen and (min-width: 500px) and (max-width: 880px) and (orientation: portrait) {
section.KV_for_SP {
margin:0;
padding:80px 20px 20px;
width: calc(100% - 40px);
height: calc(50vh - 0px - 0px);
background: url("../img/KV/kv_06.jpg") right 19% bottom / cover no-repeat;
display: flex !important;
flex-wrap: wrap;
align-content: center;
justify-content: space-between;
overflow-x: hidden;
}
.landscape {display: block !important;}
.KV_bodycopy_sp {
width: 100%;
margin-top:50px; 
background: rgba(255,255,255,0.0);
padding:0px;
margin-left:0px;
border-radius: 0px;
}
a.KV_btn_sp {
position: relative;
display: inline-block;
color: white;
border-radius: 1em;
padding:0.6em 1em 0.65em 5em;
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;
margin-top:4em;
}
.btn_area {display: none !important;}
}

/**************************** section title ********************************/
.sec_title, .sec_title_b, .sec_title_h {
position: relative;
width: auto;
margin:0px auto;
text-align: center;
padding-left: 4em;
}

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

.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: 260%;
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: 130%;
padding-left: 0.2em;
padding-bottom: 20px;
}

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

.ourcompany {
width: calc(100% - 0px);
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 members SP only ********************************/
.members {
width: 100%;
height:auto;

}

.sp_KV_box {
width: calc(100% - 14px) !important;
overflow: hidden;
margin:0 7px;
}

.img_box {
width: 100%;
height:160px;
border-radius: 10px 10px 0 0;
}

.img_box .top {border-radius: 10px 10px 0 0; padding-top:0px;}

.facenumber {
font-family: cairo, sans-serif;
font-weight: 600;
font-style: normal;
font-size: 100%;
color:rgb(150,10,10);
margin-left: 15px;
padding-top:10px;
}

.face01 {background: url("../img/KV/kv_01.jpg") center center / cover no-repeat;}
.face02 {background: url("../img/KV/kv_02.jpg") center center / cover no-repeat;}
.face03 {background: url("../img/KV/kv_03.jpg") center center / cover no-repeat;}
.face04 {background: url("../img/KV/kv_04.jpg") center center / cover no-repeat;}
.face05 {background: url("../img/KV/kv_05.jpg") center center / cover no-repeat;}

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

.KV_copy_jp_sp {
font-family: "vdl-gigag", sans-serif;
font-weight: 500;
font-size: 110%;
font-style: normal;
transform: skewX(-8deg);
letter-spacing: -1px;
line-height: 1.2em;
color: rgb(150,10,10);
margin-left: 15px;
margin-top: 10px;
}

.sp_KV_box .bot {
width: calc(100% - 20px);
padding:20px 10px;
background: rgb(150,10,10);
color: white;
text-align: justify;
border-radius: 0 0 10px 10px;
}


/**************************** section 02 ********************************/
.bg_gr_pc {background: white !important;}

.body_recruit {background: url("/photo/KV_company.jpg") center top / 250% fixed no-repeat;}
.body_contact {background: url("/photo/index_feed_bg.jpg") center center / cover fixed no-repeat;}
@media (orientation: landscape){
.body_recruit {background: url("/photo/KV_company.jpg") center top / cover fixed no-repeat;}
}

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

.halfbox {
width:calc(100% - 0px);
}

.xbox {
width:100px;
height:100px;
margin:0 auto;
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;
color:white;
text-align: center;
padding:20px 0 20px;
background: rgb(180,0,0);
width:18em;
}

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

.flex_company .left { width: 100%;}
.flex_company .right { width: 100%; margin-top:30px;}
.flex_company .form_left { width: 100%;}
.flex_company .form_right { width: 100%; margin-top:30px;}
.flex_recruit .left { width: 100%;}
.flex_recruit .right { width: 100%; margin-top:30px;}

@media (orientation: landscape){
.flex_recruit .left { width: calc(50% - 10px); margin-right:10px;}
.flex_recruit .right { width: calc(50% - 10px); margin-left:10px; margin-top:0px;}
.sp_title {
font-size: 135%;
font-weight: 700;
line-height: 2em;
}
}

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

.recruit_mid {
font-size: 120%;
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:calc(100% - 40px); margin-left: 20px;}
.history_table dl {display: flex; padding:10px 0 10px 0;}
.history_table .row1 {width:22%; padding-left:0em; padding-bottom:10px; border-bottom:solid 3px rgb(180,0,0);}
.history_table .row2 {width:78%; padding-left:1em; padding-bottom:10px; border-bottom:solid 1px #ddd;}

.recruit_table {width:100%;}
.recruit_table dl {display: flex; padding:10px 0 10px 0;}
.recruit_table .row1 {width:22%; }
.recruit_table .row2 {width:78%; }

.job_title {
display: inline-block;
font-size: 130%;
font-weight: 700;
margin: 2em auto 10px;
background: rgb(180,10,10);
padding: 0.5em 2em 0.5em 2em;
border-radius: 1em;
color: white;
}

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

#form_submit .button {
margin-top:20px;
padding : 12px 30px;
vertical-align : middle;
line-height : 1;
background : rgb(12,181,155);
border : 1px solid rgb(12,181,155);
border-radius : 5px;
color : red;
font-weight: 700;
transition: all 0.2s ease 0s;
}

@media (orientation: landscape){
.flex_company .left { width: 44%;}
.flex_company .right { width: 55%; margin-top:0px;}
}

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

form {margin-top:30px !important;}

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

.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;
transition: all 0.3s ease;
}
.unifacehub .info_grid figure img:hover {
transform: scale(1.1);
cursor: pointer;
}

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

.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;
}

/**************************** WordPress Feed ********************************/
.unifacehub .info_grid {
width: calc((100% / 1) - 0px);
background: rgba(222,222,222,1.0);
border-radius: 8px;
margin:5px 0;
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:0 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(100% - 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:20px;
color:rgba(88,88,88,1.0);
font-size: 88%;
}

.footer_right {
width:calc(100% - 0px);
margin-right:0px;
padding-top:30px;
padding-bottom: 30px;
}

@media screen and (min-width: 500px) and (max-width: 880px) and (orientation: portrait) {
.footer_left {
width:calc(50% - 0px);
margin-left:0px;
}
.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:20px;
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;
}