@charset "utf-8";


/*==================================================
---COMMON
====================================================*/

body {
    font-family: YakuHanJPs_Noto, 'Work Sans', 'Noto Sans JP', sans-serif;
    animation-name: opacity;
    letter-spacing: .1em;
    color: #333;
    line-height: 25px;
    animation-duration: 1.5s;
    overflow-x: hidden;
    position: relative;
    z-index: -1;
}

.bodyWrap {
    overflow-x: hidden;
    position: relative;
    z-index: -1;
}

.pcHeader {
    display: flex;
    padding-left: 5%;
    margin-left: auto;
    justify-content: space-between;
    align-items: center;
    background: #333;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    background-color: rgba(255, 255, 255, 0.5);
    position: fixed;
    width: calc(100% - 5%);
    top: 0;
    z-index: 99;
}

.pcHeader .logoBox img {
    width: 184px;
    position: relative;
    top: 3px;
}

.pcHeader ul {
    display: flex;
    align-items: center;
}

.pcHeader ul a {
    color: #333;
    display: block;
    font-weight: 500;
}

.h_nav {
    padding-right: 47px;
}

.spheader {
    display: none;
}

.pcHeader ul .h_navbg1 {
    background: #EBEBEB;
    width: 180px;
    padding: 27px 19px;
    text-align: center;
    font-weight: 500;
}

.pcHeader ul .h_navbg2 {
    background: #333;
    color: #fff;
    padding: 27px 19px;
    width: 180px;
    text-align: center;
    font-weight: 500;
}

.hero {
    position: relative;
    margin-bottom: 100px;
    height: 100vh;
    overflow: hidden;
}

.hero::after {
    position: absolute;
    content: "";
    top: 60px;
    right: 0;
    left: 0;
    bottom: 0;
    background: #333;
    z-index: 5;
    opacity: .4;
}

.hero .swiper-slide img {
    height: 100vh;
    width: 100%;
    object-fit: cover;
}

.heroOpTextBox {
    position: absolute;
    bottom: 20%;
    left: 5%;
    z-index: 6;
}

.heroOpTextBox h1 {
    font-weight: 700;
    font-size: 30px;
    color: #fff;
    letter-spacing: .1em;
    margin-bottom: 20px;
    position: relative;
}

.heroOpTextBox h1::after {
    position: absolute;
    height: 1px;
    width: 66%;
    content: "";
    background: #fff;
    left: 182px;
    top: 50%;
}

.heroOpTextBox p {
    color: rgba(255, 255, 255, 0) !important;
    text-stroke: 1px rgba(255, 255, 255, 1) !important;
    -webkit-text-stroke: 1px rgba(255, 255, 255, 1) !important;
    font-size: 42px;
    font-weight: 700;
    letter-spacing: .1em;
    font-family: 'Roboto', sans-serif;
}

.swiper-pagination {
    position: absolute;
    top: 43%;
}




.scrollBox {
    display: inline-block;
    position: absolute;
    right: 40px;
    bottom: 0;
    z-index: 6;
    padding: 10px 10px 61px;
    overflow: hidden;
    color: #fff;
    font-size: 12px;
    line-height: 1;
    letter-spacing: .2em;
    text-transform: uppercase;
    text-decoration: none;
}

.scrollBox::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 1px;
    height: 51px;
    background: #fff;
}


.h_nav {
    position: relative;
    text-align: center;
    overflow: hidden;
    padding: 27px 22px;
}

.h_nav::after {
    position: absolute;
    bottom: 0;
    left: 0;
    display: block;
    content: "";
    width: 0%;
    height: 2px;
    background: #333;
    transition: all 0.2s cubic-bezier(0.455, 0.03, 0.515, 0.955);
}

.logoBox .h_nav::after {
    display: none;
}

.h_navbg1.h_nav::after {
    display: none;
}

.h_navbg2.h_nav::after {
    display: none;
}

.h_nav span {
    display: block;
    width: 100%;
    margin: 0 auto;
    transition: all 0.2s cubic-bezier(0.455, 0.03, 0.515, 0.955);
}

.h_nav span.ja {
    position: absolute;
    top: 100%;
    left: 0%;
    font-size: 14px;
    white-space: nowrap;
    color: #607690;
    font-weight: 500;
}

.h_nav:hover::after {
    width: 100%;
}

.h_nav:hover span.en {
    transform: translate(0%, -184%);
}

.h_nav:hover span.ja {
    top: 37%;
}

.udHeader {
    position: relative;
    margin-bottom: 200px;
    margin-top: 79px;
}

.udHeader::before {
    position: absolute;
    top: 70px;
    left: 0;
    bottom: -53px;
    right: 0;
    background: #1A1A1A;
    content: "";
    width: calc(100% - 10%);
}

.udHeaderInner {
    background-repeat: no-repeat;
    background-size: cover;
    height: 496px;
    position: relative;
    margin-left: auto;
    width: calc(100% - 10%);
}

.udHeaderInnerTitleBox {
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    text-align: center;
    z-index: 2;
    color: #fff;
}

.udHeaderInnerTitleBox h2 {
    color: rgba(255, 255, 255, 0) !important;
    text-stroke: 1px rgba(255, 255, 255, 1) !important;
    -webkit-text-stroke: 1px rgba(255, 255, 255, 1) !important;
    font-size: 69px;
}

.udHeaderInnerTitleBox p {
    margin-top: 19px;
}

.BreadcrumbWrap {
    width: calc(100% - 20%);
    margin: 0 auto;
    margin-top: 9px;
    color: #fff;
    font-size: 14px;
    z-index: 2;
    position: relative;
}

.BreadcrumbWrap a {
    color: #fff;
}

.udHeaderInner::after {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background: rgba(0, 0, 0, 0.35);
    content: "";
}

.companyHero {
    background-image: url(../img/companyhero.png);
}

.contactHero {
    background-image: url(../img/contacthero.jpg);
}

.recruitHero {
    background-image: url(../img/recruitHero.png);
}

.aboutHero {
    background-image: url(../img/abiutHero.png);
}
.businessHero{
    background-image: url(../img/businessHro.png);
}
/*==================================================
---news
====================================================*/

#news {
    padding: 0 40px;
    padding-top: 130px;
    padding-bottom: 160px;
    max-width: 1200px;
    margin: 0 auto;

}

#news .title {
    margin-top: -80px;
}

#news > div {
    display: flex;
    align-items: center;
}

.NewsItem {
    width: 100%;
    padding: 45px 0;

    position: relative;
    display: block;
    color: #333;
}

.NewsItemWrap a {
    border-top: solid 1px #CCCCCC;
    transition: .4s;
}

.NewsItemWrap .mainText {
    transition: .4s;
}

.NewsItemWrap a:hover .mainText {
    letter-spacing: .15em;
}

.NewsItemWrap a:hover .cateBox .cate {
    background: #333;
    color: #fff;
    border: solid 1px #333;
}

.NewsItemWrap a:hover::after {
    right: 4px;
}


.NewsItemOutWrap {
    width: 100%;
}
.udnewslistBox{
    width: auto;
}

.NewsItemWrap a:last-child {
    border-bottom: solid 1px #CCCCCC;
}

.NewsItemWrap a::after {
    transition: .4s;
    content: "";
    background-image: url(../img/arrow.svg);
    background-size: contain;
    width: 21px;
    height: 28px;
    position: absolute;
    right: 16px;
    top: 59px;
    background-repeat: no-repeat;
}

.cateBox {
    margin-bottom: 11px;
    display: flex;
    align-items: center;
}

.cateBox .day {
    color: #333;
    padding-right: 37px;
}

.NewsItemWrap {
    width: 100%;
}

#news h2 {
    font-size: 40px;
    font-weight: 100;
    margin-bottom: 8px;
    color: #333;
    line-height: 28px;
    padding-right: 180px;
}

.NewsItem {
    font-size: 15px;
}

.cateBox .cate {
    border: solid 1px #8E8E8E;
    padding: 1px 18px;
    color: #8E8E8E;
    font-size: 12px;
    font-weight: 700;
    line-height: normal;
    transition: .4s;
    text-transform: uppercase;
}

#news .subTitle {
    font-size: 15px;
    font-weight: normal;
    color: #607690;
}

.textAnime {
    display: flex;
    overflow: hidden;
}

.textAnime span {
    display: block;
    transform: translate(0, 105%);
    transition: transform cubic-bezier(0.215, 0.61, 0.355, 1) 0.5s;
}

.textAnime.-visible span {
    transform: translate(0, 0);
}

.textAnime span:nth-child(2) {
    transition-delay: 0.06s;
}

.textAnime span:nth-child(3) {
    transition-delay: 0.12s;
}

.textAnime span:nth-child(4) {
    transition-delay: 0.18s;
}

.textAnime span:nth-child(5) {
    transition-delay: 0.24s;
}

.textAnime span:nth-child(6) {
    transition-delay: 0.30s;
}

.textAnime span:nth-child(7) {
    transition-delay: 0.36s;
}

.textAnime span:nth-child(8) {
    transition-delay: 0.42s;
}

.textAnime span:nth-child(9) {
    transition-delay: 0.48s;
}

.textAnime span:nth-child(10) {
    transition-delay: 0.54s;
}

.textAnime span:nth-child(11) {
    transition-delay: 0.6s;
}

.textAnime span:nth-child(12) {
    transition-delay: 0.66s;
}

.textAnime span:nth-child(13) {
    transition-delay: 0.72s;
}

.textAnime span:nth-child(14) {
    transition-delay: 0.86s;
}

.textAnime span:nth-child(15) {
    transition-delay: 1s;
}

.textAnime span:nth-child(16) {
    transition-delay: 1.14s;
}

.textAnime span:nth-child(17) {
    transition-delay: 1.28s;
}

.commonBtn {
    color: #333;
    font-size: 16px;
    background: transparent;
    width: 255px;
    height: 60px;
    text-align: center;
    line-height: 60px;
    margin: 0 auto;
    position: relative;
    z-index: 1;
    display: block;
    overflow: hidden;
    background: #EBEBEB;
    transition: .3s;
    margin-top: 45px;
    font-weight: 700;
}

.commonBtn::before {
    content: "";
    width: 100%;
    position: absolute;
    top: 0;
    right: -60px;
    z-index: -1;
    border-right: 60px solid transparent;
    border-bottom: 60px solid #333;
    transform: translateX(-100%);
    transition: transform ease .3s;
}

.commonBtn:hover {
    color: #fff;
}

.commonBtn:hover::before {
    transform: translateX(0);
}



/*==================================================
---brandBg
====================================================*/
.brandSpBtn {
    display: none;
}

#brandBg {
    position: relative;
    margin-bottom: 70px;
}

.brandBgFlexBox {
    display: flex;
}

.brandBgFlexBox img {
    width: 100%;
    vertical-align: bottom;
}

.brandBg_logo {
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    z-index: 5;
}

.brandBg_logo img {
    width: 250px;
}


#brandBg .brandBg01 {
    position: relative;
    overflow: hidden;
}

#brandBg .brandBg02 {
    position: relative;
    overflow: hidden;
}

#brandBg .brandBg01::after {
    position: absolute;
    content: "";
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: #333;
    transition: opacity .5s linear 0s;
}

#brandBg .brandBg02::after {
    position: absolute;
    content: "";
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: #333;
    transition: opacity .5s linear 0s;
    transition-delay: 400ms;
}

#brandBg.scrollin .brandBg02::after {
    opacity: 0;
}

#brandBg.scrollin .brandBg01::after {
    opacity: 0;
}

#brandBg .brandBg01 img {
    transform: scale(1.2);
}

#brandBg .brandBg02 img {
    transform: scale(1.2);
}

#brandBg.scrollin .brandBg01 img {
    transition: 3s;
    transition-timing-function: cubic-bezier(0.22, 0.61, 0.36, 1);
    transform: scale(1);
}

#brandBg.scrollin .brandBg02 img {
    transition-delay: 400ms;
    transition: 3s;
    transition-timing-function: cubic-bezier(0.22, 0.61, 0.36, 1);
    transform: scale(1);
}

/*==================================================
---brandDes
====================================================*/
#brandDes {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 40px;
    box-sizing: content-box;
    margin-bottom: 170px;
}

#brandDes h2 {
    font-size: 51px;
    font-weight: 700;
    margin-bottom: 8px;
    color: #333;
    line-height: 1.5;
}

#brandDes h3 {
    font-size: 27px;
    line-height: 40px;
}

#brandDes .commonBtn {
    margin-left: 0;
    margin-right: auto;
}


#brandDes .titleWrap {
    margin-bottom: 77px;
}

#brandDes .subTitle {
    font-size: 14px;
    font-weight: 700;
    color: #607690;
}

.brandDesFlexBox {
    display: flex;
    justify-content: space-between;
}

.brandDesFlexBoxTextBox {
    width: 48%;
    font-size: 15px;
    margin-left: 50px;
}

.brandDesFlexBoxTextBox p {
    margin-bottom: 37px;
}


/*==================================================
---bannerBox
====================================================*/

#bannerBox {
    display: flex;
    max-width: 1200px;
    margin: 0 auto;
    box-sizing: content-box;
    padding: 0 40px;
    justify-content: space-between;
    text-align: center;
    margin-bottom: 160px;
}

#bannerBox a {
    color: #fff;
    width: 46%;
    display: block;
    padding: 90px 0 55px 0;
    position: relative;
    box-shadow: 0 0 25px rgba(0, 0, 0, 0.44);
    transition: .4s;
}

#bannerBox a::after {
    position: absolute;
    content: "";
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: rgba(51, 51, 51, 0.53);
}

#bannerBox a:hover {
    box-shadow: none;
}

#bannerBox p {
    text-transform: uppercase;
    margin-bottom: 15px;
}

.bannerBox01 {
    background-image: url(../img/banner01_new.png);
    background-size: cover;
    background-position: center;
}

.bannerBox02 {
    background-image: url(../img/banner02.png);
    background-size: cover;
    background-position: center;
}

#bannerBox .textWrap {
    position: relative;
    z-index: 1;
}



/*==================================================
---freezing
====================================================*/

#freezing {
    background: #333;
    position: relative;
    padding-left: 40px;
    padding-bottom: 240px;
}

#freezing::before {
    position: absolute;
    content: "";
    width: 1px;
    height: 30px;
    background: #fff;
    left: 50%;
}

#freezing::after {
    position: absolute;
    content: "";
    width: 1px;
    height: 30px;
    background: #333;
    top: -30px;
    left: 50%;
}

#freezing h2 {
    color: #fff;
    padding-top: 140px;
    font-size: 30px;
    max-width: 1200px;
    margin: 0 auto;
    margin-bottom: 60px;
}

#freezing h2 span {
    font-size: 18px;
    color: #ABABAB;
    margin-left: 20px;
}



#freezing .swiper-container2 {
    width: 100%;
    color: #fff;
    position: relative;
}

#freezing .swiper-container2 h3 {
    color: #fff;
    margin-bottom: 23px;
}

#freezing .swiper-container2 p {
    font-size: 14px;
    color: #ddd;
    margin-bottom: 5px;
}

#freezing .swiper-containerWraper {
    padding-left: calc((100% - 1200px) / 2);
}

.swiper-slideImg {
    margin-bottom: 14px;
    overflow: hidden;
}

.swiperArrowWrap {
    position: absolute;
    display: block;
    top: -13%;
    right: calc(100% - 1200px);
}

.swiper-wrapper a {
    color: #000;
    text-decoration: none;
}

#freezing .swiper-wrapper a {
    color: #FFF;
    text-decoration: none;
    padding-top: 10px;
    border-bottom: 1px solid #fff;
}
#freezing .swiper-wrapper a:hover {
    border-bottom: none;
}


/*==================================================
---mediaMove
====================================================*/

#mediaMove {
    background: #333;
    padding-bottom: 338px;
}

#mediaMove h2 {
    color: #fff;
    font-size: 51px;
    line-height: 47px;
    letter-spacing: .05em;
}

#mediaMove .subTitle {
    color: #fff;
    font-size: 12px;
}

.mediaMoveFlexBox {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 40px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}


.video {
    position: relative;
    width: 100%;
    height: 0;
    margin-left: 102px;
    padding-top: 35.25%;
}

.video iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/*==================================================
---business
====================================================*/

#business {
    margin-top: -166px;
    position: relative;
    margin-bottom: 151px;
}

#business::after {
    position: absolute;
    content: "BUSINESS";
    right: 46px;
    -webkit-text-orientation: sideways;
    text-orientation: sideways;
    -ms-writing-mode: tb-rl;
    writing-mode: vertical-rl;
    font-size: 20vw;
    top: 27px;
    color: rgb(212 212 212 / 38%);
}

#business h2 {
    max-width: 1200px;
    margin: 0 auto;
    font-size: 28px;
    position: relative;
    padding-left: 20px;
    color: #fff;
    letter-spacing: .1em;
    margin-bottom: 26px;
}

#business h2::after {
    position: absolute;
    content: "";
    width: 147px;
    left: 188px;
    height: 1px;
    background: #ffffff6e;
    top: 50%;
}

.businessItemBoxWrap {
    position: relative;
}

.businessItemBoxWrap::after {
    background-image: url(../img/nextArrow.svg);
    background-size: contain;
    background-repeat: no-repeat;
    position: absolute;
    height: 48px;
    top: 50%;
    width: 48px;
    right: 32%;
    content: "";
    z-index: 2;
}

.businessItemBox {
    width: calc(100% - 28%);
    display: block;
    overflow: hidden;
    color: #fff;
    opacity: 0;
    transition: opacity .4s;
}

.businessItemBox img {
    transform: scale(1.2);
}

.businessItemBox.scrollin {
    opacity: 1;

}

.businessItemBox.scrollin img {
    transition: 3s;
    transition-timing-function: cubic-bezier(0.22, 0.61, 0.36, 1);
    transform: scale(1);
}




.businessItemBox_TextB {
    position: absolute;
    bottom: 10%;
    left: calc((100% - 1200px) / 2);
    z-index: 2;
}

#business .businessItemBox img {
    width: 100%;
    vertical-align: bottom;
    transition: transform 1.4s cubic-bezier(.36, .14, 0, 1), -webkit-transform 1.4s cubic-bezier(.36, .14, 0, 1);
}

#business .businessItemBox:hover img {
    transform: scale(1.2);
}

.businessItemBox::after {
    position: absolute;
    background: #0000009e;
    top: 0;
    right: 28%;
    bottom: 0;
    left: 0;
    content: "";
    -webkit-backface-visibility: hidden;
}

.businessItemBox_TextB .subTitle {
    text-transform: uppercase;
    font-size: 15px;
    font-weight: 700;
    opacity: 0.7;
    margin-bottom: 40px;
}

.businessItemBox_TextB .des {
    font-size: 17px;
    line-height: 30px;
    letter-spacing: .15em;
}

.businessItemBox_TextB h3 {
    font-size: 24px;
}



/*==================================================
---tkn
====================================================*/
#tkn {
    padding: 0 40px;
    margin-bottom: 114px;
}

#tkn h2 {
    text-align: center;
    justify-content: center;
    font-size: 85px;
    line-height: 68px;
}

#tkn p {
    text-align: center;
    margin-bottom: 46px;
    font-size: 16px;
    letter-spacing: .15em;
    line-height: 30px;
    max-width: 998px;
    margin: 0 auto;
}

#tkn h3 {
    text-align: center;
    margin-bottom: 20px;
}

/*==================================================
---covit
====================================================*/
#covit {
    margin-bottom: 143px;
}

.covitWrap {
    position: relative;
    text-align: center;
    display: block;
    overflow: hidden;
    max-width: 858px;
    opacity: 0;
    transition: opacity .4s;
    margin: 0 auto;
    transition: .4s;
}

.covitWrap:hover {
    box-shadow: 0 0 30px rgba(51, 51, 51, 0.66);
}

.covitWrap.scrollin {
    opacity: 1;

}

.covitWrap.scrollin img {
    transition: 3s;
    transition-timing-function: cubic-bezier(0.22, 0.61, 0.36, 1);
    transform: scale(1);
    vertical-align: bottom;
}





.covitWrap img {
    transform: scale(1.2);
    max-width: 858px;
    width: 100%;
    margin: 0 auto;
}

.covitWrap h2 {
    position: absolute;
    font-size: 29px;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    color: #fff;
}


/*==================================================
---meshibnr
====================================================*/
#meshibnr {
    margin-bottom: 143px;
}
@media screen and (max-width:540px) {
    #meshibnr {
        margin-bottom: 20px;
    }
}

/*==================================================
---sns
====================================================*/
#sns {
    position: relative;
    /*margin-bottom: 267px;*/
    margin-bottom: 104px;
}

#sns::before {
    position: absolute;
    top: -256px;
    right: 0;
    z-index: -1;
    bottom: -104px;
    left: 0;
    background: #F1F1F1;
    content: "";
}

#sns::after {
    position: absolute;
    height: 68px;
    width: 1px;
    background: #33333378;
    content: "";
    left: 50%;
    bottom: -138px;
}

#sns h2 {
    font-size: 119px;
    text-align: center;
    opacity: .25;
    font-weight: 500;
}

#sns h3 {
    font-size: 20px;
    margin-bottom: 5px;
}

#sns h3 span {
    color: #607690;
    font-size: 12px;
    margin-left: 14px;
}



.snsFlexBox {
    display: flex;
    max-width: 1200px;
    margin: 0 auto;
    justify-content: space-between;
    position: relative;
    z-index: 2;
}

.snsFlexBox a {
    display: block;
    color: #fff;
    text-align: center;
    position: relative;
    padding: 11px 20px;
    font-size: 20px;
}

.snsFlexBox > div {
    background: #fff;
    box-shadow: 0 0 25px #3333;
    width: 25%;
    padding: 30px 42px;
}

.snsFlexBox > div:nth-child(2n) {
    margin: 0 15px;
}

.twitter {
    background: #00ACEE;
    margin-bottom: 10px;
}

.twitter::before {
    background-image: url(../img/twitter.svg);
    background-size: contain;
    background-repeat: no-repeat;
    position: absolute;
    height: 48px;
    top: 31%;
    width: 23px;
    left: 13px;
    content: "";
    z-index: 2;
}

.x {
    background: #0F1419;
    margin-bottom: 10px;
}

.x::before {
    background-image: url(../img/x.svg);
    background-size: contain;
    background-repeat: no-repeat;
    position: absolute;
    height: 48px;
    top: 31%;
    width: 23px;
    left: 13px;
    content: "";
    z-index: 2;
}
.hp {
    background: #167ac6;
    margin-bottom: 10px;
}

.hp::before {
    background-image: url(../img/hp.svg);
    background-size: contain;
    background-repeat: no-repeat;
    position: absolute;
    height: 48px;
    top: 31%;
    width: 23px;
    left: 13px;
    content: "";
    z-index: 2;
}

.instagram {
    background: #CF2E92;
    margin-bottom: 10px;
}

.instagram::before {
    background-image: url(../img/instagram.svg);
    background-size: contain;
    background-repeat: no-repeat;
    position: absolute;
    height: 48px;
    top: 31%;
    width: 23px;
    left: 13px;
    content: "";
    z-index: 2;
}

.youtube {
    background: #DA1725;
    margin-bottom: 10px;
}

.youtube::before {
    background-image: url(../img/youtube.svg);
    background-size: contain;
    background-repeat: no-repeat;
    position: absolute;
    height: 48px;
    top: 31%;
    width: 23px;
    left: 13px;
    content: "";
    z-index: 2;
}

.tiktok {
    background: #000000;
    margin-bottom: 10px;
}

.tiktok::before {
    background-image: url(../img/tiktok.svg);
    background-size: contain;
    background-repeat: no-repeat;
    position: absolute;
    height: 48px;
    top: 31%;
    width: 23px;
    left: 13px;
    content: "";
    z-index: 2;
}


/*==================================================
---interview
====================================================*/
#interview {
    padding: 0 40px;
}

#media .swiperArrowWrap {
    top: 20%;
    right: calc((100% - 1200px) / 2);
}

#interview h2 {
    text-align: center;
    font-size: 25px;
    margin-bottom: 20px;
}

#interview h2 span {
    margin-left: 15px;
    font-size: 24px;
    color: #b5b5b5;
}

#interview .video {
    margin-left: 0;
    max-width: 1015px;
    padding-top: 29.25%;
    margin: 0 auto;
}

.video iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/*==================================================
---media
====================================================*/
#media {
    position: relative;
    padding-left: calc((100% - 1240px) / 2);
    margin-bottom: 145px;
    margin-left: 40px;
}

#media .swiper-container2 h3 {
    margin-bottom: 23px;
}

#media .swiper-container2 p {
    font-size: 14px;
    margin-bottom: 50px;
    min-height: 82px;
}

#media .swiper-scrollbar-drag {
    background: #333;
}

#media h2 {
    /*padding-top: 140px;*/
    padding-top: 0px;
    font-size: 30px;
    margin: 0 auto;
    margin-bottom: 60px;
}

#media h2 span {
    font-size: 18px;
    color: #ABABAB;
    margin-left: 20px;
}

#media .swiperArrowWrap {
    top: 20%;
    right: calc((100% - 1200px) / 2);
}
#media .mediaBtn a{
    background: #333;
    color: #fff;
    text-decoration: none;
    display: block;
    max-width: 200px;
    padding: 10px 0;
    text-align: center;
    margin-left: auto;
    font-size: 15px;
}

/*==================================================
---businesPartner
====================================================*/
#businesPartner {
    background: #EBEBEB;
    padding: 40px;
}


#businesPartner h2 {
    text-align: center;
    position: relative;
    margin-bottom: 74px;
    font-size: 30px;

}

#businesPartner h2::after {
    position: absolute;
    content: "";
    background: #333;
    height: 34px;
    width: 1px;
    bottom: -49px;
    left: 50%;
}

.businesPartnerFlexBox {
    display: flex;
    max-width: 900px;
    margin: 0 auto;
    justify-content: space-between;
    flex-wrap: wrap;
}

.businesPartnerFlexBox img {
    width: 100%;
    vertical-align: bottom;
}

.businesPartnerFlexBox > div {
    width: 31%;
    margin-bottom: 27px;
    box-shadow: 0 0 25px #33333326;
}

#businesPartner p {
    text-align: center;
    color: #607690;
    font-size: 23px;
}

/*==================================================
---navBanner
====================================================*/

#navBanner {
    display: flex;
    margin-bottom: 103px;
}

#navBanner a {
    display: block;
    position: relative;
    color: #fff;
    overflow: hidden;
}

#navBanner a::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    -webkit-backface-visibility: hidden;
    left: 0;
    background: #00000057;
}

#navBanner img {
    width: 100%;
    transition: transform 1.4s cubic-bezier(.36, .14, 0, 1), -webkit-transform 1.4s cubic-bezier(.36, .14, 0, 1);
    vertical-align: bottom;
}

.navBannerText {
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    text-align: center;
    z-index: 2;
}

.navBannerText h2 {
    font-size: 30px;
}

.navBannerText p {
    font-weight: 300;
}



#navBanner a:hover img {

    transform: scale(1.2);
}



/*==================================================
---contact
====================================================*/
#contact {
    margin-bottom: -70px;
    padding: 0 20px;
}

#contact a {
    display: block;
    max-width: 858px;
    margin: 0 auto;
    background: rgb(41, 41, 41);
    background: linear-gradient(90deg, rgba(41, 41, 41, 1) 0%, rgba(73, 73, 73, 1) 100%);
    box-shadow: 0 0 25px #3333334a;
    color: #fff;
    padding: 96px 20px 86px 50px;
    position: relative;
    transition: .4s;
}

#contact a:hover {
    background: linear-gradient(90deg, rgba(73, 73, 73, 1) 0%, rgba(41, 41, 41, 1) 100%);
    transition: .4s;
}

#contact h2 {
    font-size: 41px;
}

#contact a::after {
    position: absolute;
    right: 50px;
    background-image: url(../img/nextArrow.svg);
    background-size: contain;
    height: 52px;
    background-repeat: no-repeat;
    width: 52px;
    top: 40%;
    content: "";
}

#contact span {
    font-size: 15px;
    margin-left: 20px;
}


/*==================================================
---contact
====================================================*/
.footerTFlexBox {
    display: flex;
    max-width: 1200px;
    justify-content: space-between;
    margin: 0 auto;
    align-items: center;
}

.footerTopWrap {
    padding: 0 40px;
}

.footerTFlexBox ul {
    display: flex;
}

.footerTFlexBox ul a {
    margin-left: 47px;
    display: block;
    color: #333;
    font-size: 15px;
}

.footerTFlexBox ul a:last-child {
    margin-right: 0;
}

.footerTFlexBox img {
    width: 200px;
}

.footerAddressBox {
    display: flex;
    font-size: 12px;
    max-width: 1200px;
    margin: 0 auto;
    margin-top: 50px;
    margin-bottom: 80px;
}

.footerAddressBox p {
    line-height: 20px;
}

.footerAddressBox div {
    margin-right: 88px;
}

.footerAddressBox div:last-child {
    margin-right: 0;
}

.footerBFlexBox ul {
    display: flex;
}

.footerBFlexBox ul a {
    margin-right: 50px;
}



.footerBFlexBox a {
    color: #333;
    font-size: 15px;
    display: block;
}

.footerBFlexBox {
    display: flex;
    max-width: 1200px;
    justify-content: space-between;
    margin: 0 auto;
    margin-bottom: 20px;
}

.smartCopyWriting p {
    text-align: center;
    background: #333;
    color: #fff;
    font-size: 12px;
    padding: 5px 0;
    letter-spacing: .15em;
}

footer {
    background: #EBEBEB;
    padding-top: 136px;
}


/*==================================================
---
udrecruitCompany

====================================================*/


.udrecruitCompany .subTitle {
    font-size: 20px;
    font-weight: normal;
    color: #333;
    margin-bottom: 46px;
}

.udrecruitCompany h3 {
    font-size: 35px;
    color: #333;
    left: .15em;
    margin-bottom: 5px;
}



.udrecruitCompany_wrap {
    padding: 0 25px;
}


.udrecruitCompany_wrap dl {
    max-width: 1025px;
    margin: 0 auto;
    border-top: solid 1px #f3f6f7;
    margin-bottom: 80px;
    box-sizing: border-box;

}

.udrecruitCompany_wrap dl > div {
    display: flex;

}

.udrecruitCompany_wrap dl dt {
    width: 30%;
    color: #fff;
    background: #333;
    text-align: center;
    border-bottom: solid 1px #fff;
    padding-top: 38px;
}


.udrecruitCompany_wrap dl dd {
    line-height: 2;
    color: #333;
    padding-left: 50px;
    border-right: solid 1px rgb(209 209 209 / 15%);
    border-bottom: solid 1px rgb(209 209 209 / 15%);
    padding-top: 30px;
    width: 70%;
    padding-bottom: 30px;
    font-size: 15px;
}

.udrecruitCompany_wrap hr {
    border-top: 1px solid #fff;
    margin: 2em 0;
}

.udrecruitCompany .titleBox {
    max-width: 1025px;
    margin: 0 auto;
    box-sizing: content-box;
    padding: 0 20px;
}


/*==================================================
---form
====================================================*/

.form {
    max-width: 900px;
    margin: 0 auto;
    padding: 0 25px;
    margin-bottom: 60px;
    position: relative;
}

.form::after {
    position: absolute;
    content: "FORM";
    right: -439px;
    font-size: 155px;
    color: rgb(86 86 86 / 22%);
    font-weight: bold;
    transform: rotate(90deg);
    top: 28%;
    letter-spacing: .1em;
}

.formSchoolBox {
    width: 100%;
}

.formSchoolBox .inputBg {
    margin-bottom: 10px;
}


.form p {
    text-align: center;
    line-height: 28px;
    color: #333;
    margin-bottom: 45px;
}

.form_flexBox {
    display: flex;
    border-top: solid 1px #DFDFDF;
    padding-top: 34px;
    margin-bottom: 35px;
}

.form_flexBox_list {
    width: 529px;
    position: relative;
    font-weight: 500;
    padding-top: 17px;
    font-size: 15px;
}

.mandatory {
    position: absolute;
    right: 15px;
    color: #fff;
    top: 11px;
    font-size: 14px;
    background: #333;
    padding: 5px 10px;
}


.Any {
    position: absolute;
    right: 15px;
    color: #333;
    top: 11px;
    font-size: 14px;
    background: #E1E1E1;
    padding: 5px 10px;
}


.inputBg {
    width: 100%;
}

input {
    width: 100%;
    box-sizing: border-box;
    height: 56px;
    background: #f4f3f1;
    border: 1px solid #f4f3f1;
    padding: 0 15px;
}

textarea {
    width: 100%;
    box-sizing: border-box;
    background: #f4f3f1;
    padding: 5px 15px;
    border: 1px solid #e3e2df;
}

.privacypBox {
    text-align: center;
}

.form .privacyp {
    display: inline-block;
    font-size: 13px;
    border-bottom: 1px solid #00419A;
    margin-bottom: 20px;

}

.form .privacyp a {
    color: #333;
}


.form .nmber {
    font-size: 25px;
    color: #011640;
}

.checkbox {
    display: flex;
    align-content: center;
    justify-content: center;
}

.checkbox input {
    width: 10%;
    height: 25px;
}

.checkbox p {
    width: 315px;
}

.form_contentBox {
    margin-bottom: 50px;
}

.submitBox {
    width: 60%;
    margin: 0 auto;
    display: flex;
}

.submitBox input {
    background: #fff;
    color: #333;
    border: solid 1px #333;
    font-size: 16px;
    height: 78px;
    letter-spacing: .1em;
    cursor: pointer;
    transition: .4s;
}

.submitBox input:hover {
    background: #333;
    color: #fff;
}

.mw_wp_form .error {
    font-size: 13px;
    margin-top: 8px;
}

.thanyouMail {
    max-width: 750px;
    margin: 0 auto;
    margin-bottom: 78px;
    padding: 0 25px;
}

.thanyouMail h3 {
    font-size: 23px;
    margin-bottom: 25px;
    font-weight: 400;
}

.thanyouMail p {
    line-height: 30px;
    color: #333;
}

.thanyouMail .blackBtn {
    margin: 0 auto;
    margin-top: 25px;
}

.mw_wp_form .error {
    font-size: 78% !important;
}

input[type="text"] {
    -webkit-appearance: none;
    border-radius: 0;
}

textarea {
    -webkit-appearance: none;
    border-radius: 0;
}


select {
    width: 52%;
    box-sizing: border-box;
    height: 56px;
    background: #f4f3f1;
    border: 1px solid #f4f3f1;
    padding: 0 15px;
}


input[type="submit"],
input[type="button"] {
    border-radius: 0;
    -webkit-box-sizing: content-box;
    -webkit-appearance: button;
    appearance: button;
    box-sizing: border-box;
    cursor: pointer;
}

input[type="submit"]::-webkit-search-decoration,
input[type="button"]::-webkit-search-decoration {
    display: none;
}

input[type="submit"]::focus,
input[type="button"]::focus {
    outline-offset: -2px;
}

.submitBox .button_back {
    background: #d3d2d2;
    border: solid 1px #d3d2d2;
    margin: 0 5px;
}

.mw_wp_form_preview .form_flexBox_list {
    padding-top: 0;
}

.mw_wp_form_preview .mandatory {
    top: -3px;
}

.mw_wp_form_preview .Any {
    top: -3px;
}

.mw_wp_form_preview .submitBox {
    width: auto;
}

#privacyPolicy {
    max-width: 1025px;
    margin: 0 auto;
    padding: 0 25px;
}

.birthBgBox {
    display: flex;
}

.birthBgBox > div {
    width: 50%;

}


.birthBgBox input {
    width: 90%;
}

.selectinner {
    position: relative;
}

.selectinner::after {
    position: absolute;
    position: absolute;
    content: "";
    background-image: url(../img/selectArrow.svg);
    background-size: contain;
    background-repeat: no-repeat;
    width: 15px;
    height: 17px;
    top: 62%;
    left: 77%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}

.selectinnerEntry::after {
    left: 47%;
}

.selectinner span {
    position: absolute;
}

.birthBgBox select {
    width: 90%;
}

select {
    -webkit-border-radius: 0;
    -webkit-appearance: none;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

.mw_wp_form_preview .privacypBox {
    display: none;
}

.mw_wp_form_preview .checkbox p {
    position: relative;
    -webkit-backface-visibility: hidden;
}

.mw_wp_form_preview .checkbox p::before {
    position: absolute;
    content: "";
    background-image: url(../img/privacypolicyCheck.png);
    background-size: contain;
    background-repeat: no-repeat;
    width: 43px;
    height: 42px;
    top: 50%;
    left: 13px;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}

.privacyAge {
    text-align: right;
    font-weight: bold;
    text-decoration: underline;
}

.inactive {
    color: #D8D8D8;
}

#udRecruit h3 {
    text-align: center;
    margin-bottom: 44px;
    font-size: 19px;
    line-height: 31px;
    letter-spacing: .1em;
}


#udRecruit {
    background: #ededed;
    padding: 60px 20px;
    margin-bottom: 100px;
}

/*タブ切り替え全体のスタイル*/
.Rtabs {
    margin-top: 50px;
    padding-bottom: 40px;
    max-width: 1200px;
    margin: 0 auto;
}

.Rtabs label {
    cursor: pointer;
}

/*タブのスタイル*/
.tab_item {
    width: calc(100%/2);
    height: 70px;
    background-color: #d9d9d9;
    line-height: 70px;
    font-size: 16px;
    text-align: center;
    color: #565656;
    display: block;
    float: left;
    text-align: center;
    font-weight: bold;
    transition: all 0.2s ease;
}

.tab_item:hover {
    opacity: 0.75;
}

/*ラジオボタンを全て消す*/
input[name="tab_item"] {
    display: none;
}

.tab_content {
    display: none;
    padding: 40px 56px 0;
    clear: both;
    overflow: hidden;
    padding-bottom: 60px;
}


/*選択されているタブのコンテンツのみを表示*/
#all:checked ~ #all_content,
#programming:checked ~ #programming_content,
#design:checked ~ #design_content {
    display: block;
    background: #fff;
}

/*選択されているタブのスタイルを変える*/
.Rtabs input:checked + .tab_item {
    background-color: #333;
    color: #fff;
}

.Rtabs dl {
    display: flex;
    padding: 45px 0;
    border-bottom: solid 1px #eee;
}

.Rtabs dt {
    width: 300px;
}

.Rtabs dd {
    color: #484848;
    font-size: 15px;
    display: block;
    width: 71%;
}

.Rtabs dd p {
    text-indent: -1em;
    margin-bottom: 5px;
    padding-left: 1em;
}

.recruitBtn a {
    display: block;
    padding: 60px;
    background: #333;
    border: solid 1px;
    color: #fff;
    text-align: center;
    font-size: 34px;
    margin-top: 70px;
    transition: .4s;
}

.recruitBtn a:hover {
    background: #fff;
    color: #333;
}

.recruitEnTitle {
    font-size: 58px;
    text-align: center;
    text-transform: uppercase;
    position: relative;
    margin-bottom: 60px;
}

.recruitEnTitle::after {
    position: absolute;
    content: "";
    width: 1px;
    height: 63px;
    margin: 0 auto;
    right: 0;
    left: 0;
    bottom: -92px;
    background: #33333359;
}





#privacyPolicy {
    max-width: 1025px;
    margin: 0 auto;
    padding: 0 25px;
    margin-bottom: 65px;
}

#privacyPolicy dl {
    margin-bottom: 30px;
}

#privacyPolicy dt {
    margin-bottom: 10px;
    line-height: 25px;
    text-decoration: underline;
    color: #607690;
}

#privacyPolicy dd {
    font-size: 15px;
    line-height: 28px;
    margin-bottom: 14px;
}

#privacyPolicy ul {
    list-style: disc;
    list-style-position: inside;
}

#privacyPolicy ul li {
    margin-bottom: 8px;
    padding-left: 1.5em;
    text-indent: -1.5em;
    line-height: 24px;
}

#udAbout {
    max-width: 1000px;
    margin: 0 auto;
    padding: 0 40px;
}

.udbrandDes {
    margin-bottom: 20px !important;
}

#udAbout .titleBox {
    font-size: 25px;
    line-height: 35px;
    letter-spacing: .1em;
    font-weight: bold;
    margin-bottom: 38px;
}

#udAbout h3 {
    margin-bottom: 17px;
    font-size: 30px;
}

#udAbout .des {
    font-size: 15px;
    line-height: 28px;
    letter-spacing: .15em;
    margin-bottom: 20px;
}

#udAbout .imgBox img {
    /*max-width: 500px;*/
    margin: 0px auto 20px;
    height: auto;
}

#udAbout .imgBox {
    /*display: flex;*/
    width: 100;
    justify-content: space-between;
}

#udAbout .contents {
    margin-bottom: 82px;
}

#udBusiness > div {
    display: flex;
    margin-bottom: 72px;
    opacity: 0;
    transform: translateY(20px);
    transition: 1.4s;
    transition-timing-function: cubic-bezier(.07, .48, .56, .96);
}

#udBusiness > div.scrollin {
    opacity: 1;
    transform: translateY(0);
}



#udstoreManagement {
    padding-left: calc((100% - 1280px) / 2);
}

#udBusiness .textBox {
    margin-right: 60px;
    padding-left: 40px;
    width: 65%;
}

#udBusiness img {
    width: 100%;
}

#udBusiness h3 {
    font-size: 30px;
    line-height: 35px;
    margin-bottom: 4px;
}

.caseBtn a {
    display: block;
    width: 277px;
    background: #333;
    color: #fff;
    text-align: center;
    font-size: 15px;
    padding: 18px 0;
    transition: .4s;
    border: solid 1px #333;
}

.caseBtn a:hover {
    background: #fff;
    color: #333;
}

#udBusiness .des {
    font-size: 16px;
    letter-spacing: .15em;
    line-height: 32px;
    margin-bottom: 14px;
}

#udBusiness .enTitle {
    color: #898989;
    letter-spacing: .15em;
    margin-bottom: 20px;
}




#udfoodHaring {
    flex-direction: row-reverse;
    padding-right: calc((100% - 1280px) / 2);
}

#udfoodHaring .textBox {
    margin-right: 40px;
    padding-left: 60px;
}


#udlendindBenefits {
    padding-left: calc((100% - 1280px) / 2);
}

#udlendindBenefits .textBox {
    margin-right: 60px;
    padding-left: 40px;
    width: 65%;
}


#udbuyGoods {
    flex-direction: row-reverse;
    padding-right: calc((100% - 1280px) / 2);
}

#udbuyGoods .textBox {
    margin-right: 40px;
    padding-left: 60px;
}

.udnewslistBox{
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 40px;
    margin-bottom: 80px;
}



.archive_page_navi {
    text-align: center;
    margin: 20px 0;
    margin-bottom: 40px;
    font-size: 22px;
}

.archive_page_navi a {
    color: #333;
    padding: 0 5px;
}

.archive_page_navi .current {
    padding: 0 5px;
}
#udpost{
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 40px;
}
#udpost .pagenationBox li a {
    color: #333;
}

.pagenationBox_centaer {
    margin: 0 10px;
}

#udpost .pagenationBox a {
    display: block;
    padding: 13px 54px;
    border: solid #333 2px;
    transition: .4s;
    letter-spacing: .1em;
    text-decoration: none;
}

.udPostTxtBox p {
    line-height: 28px;
    font-size: 15px;
    margin-bottom: 20px;
}

#udpost .pagenationBox {
    margin-top: 55px;
    list-style-type: none;
}

.pagenationBox {
    display: flex;
    justify-content: center;
    margin-bottom: 40px;
}

#udpost .pagenationBox li {
    background: #fff;
    padding-left: 0;
    text-indent: 0;
}

/*==================================================
---udQuestion
====================================================*/


.udQuestion {
    max-width: 1200px;
    margin: 0 auto;
    margin-bottom: 50px;
    padding: 38px 40px;
    box-sizing: content-box;
}

.udQuestion .title_wrap {
    max-width: 887px;
    margin: 0 auto;
}
.udQuestion .title_en {
    font-size: 35px;
    font-weight: bold;
}


/*==================================================
---toggle
====================================================*/

.accordion {
    max-width: 887px;
    margin: 3em auto;
}

.accordion .toggle {
    display: none;
}

.accordion .option {
    position: relative;
    margin-bottom: 60px;
    box-shadow: 0 0 25px rgba(0, 0, 0, 0.09);
}

.accordion .title,
.accordion .content {
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    transform: translateZ(0);
    transition: all 0.3s;

}

.accordion .title {
    padding: 20px 45px;
    display: block;
    color: #333;
    cursor: pointer;
    border-top: solid 6px #333;
}

.accordion .title::after,
.accordion .title::before {
    content: "";
    position: absolute;
    right: 32px;
    top: 48px;
    width: 2px;
    height: 28px;
    background-color: #333;
    transition: all 0.3s;
}

.accordion .lastPrice .title::after,
.accordion .lastPrice .title::before {
    display: none;
}

.accordion .lastPrice .title {
    cursor: default;
}

.accordion .title::after {
    transform: rotate(90deg);
}

.accordion .content {
    max-height: 0;
    overflow: hidden;
    padding: 0 45px;
}

.tableBox {
    padding: 0 80px 40px 80px;
}



.accordion .toggle:checked + .title + .content {

    max-height: 500px;
    transition: all 1.5s;
}

.accordion .toggle:checked + .title::before {
    transform: rotate(90deg) !important;
}

.accordionFlexBox {
    display: flex;
    align-items: center;
}

.accordionFlexBoxNmber {
    font-size: 30px;
    color: #fff;
    text-transform: uppercase;
    padding: 23px 14px;
    background: #333;
    border-radius: 8px;
    margin-right: 50px;
}

.accordionFlexBoxanswer {
    font-size: 30px;
    color: #fff;
    text-transform: uppercase;
    padding: 23px 26px;
    background: #D3B07B;
    border-radius: 8px;
    margin-right: 50px;
}

.qText {
    font-size: 19px;
    font-weight: 600;
}

.AText {
    font-size: 15px;
    font-weight: 600;
    letter-spacing: .1em;
    line-height: 28px;
}

.answerBox {
    padding: 28px 0;
    border-top: solid 1px;
}

.udvmMap{
    display: flex;
    max-width: 1200px;
    margin: 0 auto;
    flex-wrap: wrap;
    padding: 0 40px;
}
.udvmMap>div{
    width: 48%;
    margin-right: 2%;
    margin-bottom: 40px;
}
.udvmMap div img{
width: 100%;
 image-rendering: -webkit-optimize-contrast;
}
.udvmMap div:nth-child(2){
    margin-right: 0;
}


#udstoreManagement,#udfoodHaring,#udlendindBenefits,#udbuyGoods{
    padding-top: 120px;
}






@media screen and (max-width:1336px) {
    .pcHeader {
        display: none;
    }

    .hero::after {
        top: 0;
    }

    .spheader {
        display: block;
        width: 100%;
        padding: 13px 0;
        background: #fff;
        position: fixed;
        z-index: 11;
        top: 0;
    }

    .spheader .logoBox {
        z-index: 5;
    }

    .spheader .logoBox img {
        width: 164px;
    }

}


@media screen and (max-width:1255px) {
    .businessItemBox_TextB {
        left: 20px;
    }

}

@media screen and (max-width:1220px) {
    .swiperArrowWrap {
        right: 0;
    }

    #media .swiperArrowWrap {
        right: 0;
    }

}


@media screen and (max-width:1025px) {
    .businessItemBox_TextB .subTitle {
        margin-bottom: 5px;
    }

    .businessItemBox_TextB .des {
        font-size: 14px;
        line-height: 24px;
    }

    .businessItemBox_TextB h3 {
        font-size: 21px;
    }

    .businessItemBox {
        width: calc(100% - 15%);
    }

    .businessItemBox::after {
        right: 15%;
    }

    .businessItemBoxWrap::after {
        top: 44%;
        right: 19%;
    }

    #business::after {
        right: 46px;
        font-size: 10vw;
        top: 35%;
    }

    #tkn p {
        margin-bottom: 2px;
        font-size: 16px;
        line-height: 29px;
    }

    #business {
        margin-bottom: 86px;
    }

    #interview .video {
        padding-top: 56.25%;
    }

    #udRecruit h3 br {
        display: none
    }

    #udRecruit h3 {
        margin-bottom: 44px;
        font-size: 16px;
        line-height: 28px;
    }

    #udBusiness > div {
        display: block;
    }

    #udBusiness div .textBox {
        margin-right: 0;
        padding: 0 40px;
        margin-bottom: 25px;
        width: auto;
    }

    #udBusiness > div {
        margin-bottom: 72px;
    }


}

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

    #news h2 {
        padding-right: 100px;
    }
}


@media screen and (max-width:1010px) {
    #sns h3 {
        font-size: 16px;
    }

    .snsFlexBox > div {
        width: 29%;
        padding: 30px 15px;
    }
}


@media screen and (max-width:1000px) {
    #freezing {
        padding-bottom: 162px;
    }

    .mediaMoveFlexBox {
        display: block;
    }

    .video {
        margin-left: 0;
        padding-top: 57.25%;
    }

    #mediaMove .subTitle {
        margin-bottom: 15px;
    }

}

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

    #news {
        padding: 0 20px;
        padding-top: 130px;
        padding-bottom: 160px;
    }
}

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

    .udHeaderInnerTitleBox h2 {
        font-size: 42px;
    }

    .udHeaderInnerTitleBox p {
        margin-top: 4px;
        font-size: 14px;
    }

    .udHeader::before {
        bottom: -18px;
    }

    .udHeaderInner {
        width: calc(100% - 5%);
    }

    .udHeader::before {
        width: calc(100% - 5%);
    }


    .BreadcrumbWrap {
        width: calc(100% - 10%);
        margin-top: 3px;
        font-size: 12px;
    }


}




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

    .swiper-horizontal > .swiper-pagination-bullets,
    .swiper-pagination-bullets.swiper-pagination-horizontal,
    .swiper-pagination-custom,
    .swiper-pagination-fraction {
        left: -20px !important;
    }

    .heroOpTextBox p {
        font-size: 21px;
    }

    .scrollBox {
        right: 20px;
    }

    .heroOpTextBox h1 {
        font-size: 22px;
    }

    .heroOpTextBox h1::after {
        width: 59%;
        left: 137px;
    }


    .footerTFlexBox {
        display: block;
    }

    footer .footerTFlexBox ul a {
        margin-right: 40px !important;
        margin-left: 0;
    }

    .footerLogo {
        margin-bottom: 20px;
    }

}


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

    #news > div {
        display: block;
    }

    #news .subTitle {
        margin-bottom: 20px;
    }

    #news h2 {
        font-size: 29px;
    }

    #news .subTitle {
        font-size: 13px;
    }


    #news {
        padding-bottom: 124px;
    }
}


@media screen and (max-width:858px) {
    .form_flexBox {
        display: block;
    }

    .form_flexBox_list {
        margin-bottom: 16px;
    }

    .inputBg {
        padding: 0;
    }

    .form_flexBox_list {
        width: 215px;
        font-size: 14px;
    }

    .mandatory {
        font-size: 12px;
    }

    .Any {
        font-size: 12px;
    }

}




@media screen and (max-width:768px) {
    #media .swiperArrowWrap {
        top: 8%;
    }

    #tkn {
        padding: 0 20px;
    }

    #mediaMove h2 {
        font-size: 36px;
    }

    #mediaMove {
        padding-bottom: 245px;
    }

    #tkn h2 {
        font-size: 64px;
        line-height: 57px;
    }

    #tkn p {
        font-size: 14px;
        line-height: 27px;
    }

    #mediaMove .subTitle {
        margin-top: -7px;
    }

    .brandDesFlexBox {
        display: block;
    }

    .brandDesFlexBoxTextBox {
        width: auto;
        margin-left: 0;
    }

    #brandDes {
        padding: 0 20px;
        margin-bottom: 88px;
    }

    .brandPcBtn {
        display: none;
    }

    .brandSpBtn {
        display: block;
    }

    #brandDes h3 {
        font-size: 21px;
        line-height: 34px;
        margin-bottom: 30px;
    }

    #brandDes .titleWrap {
        margin-bottom: 26px;
    }

    #bannerBox {
        display: block;
        padding: 0 20px;
    }

    #bannerBox a {
        width: auto;
        margin-bottom: 24px;
    }

    #bannerBox a {
        box-shadow: 0 0 15px rgb(0 0 0 / 44%);
    }

    #freezing {
        padding: 0 20px;
        padding-bottom: 50px;
    }

    .snsFlexBox {
        display: block;
    }

    .snsFlexBox > div:nth-child(2n) {
        margin: 0;
    }

    #sns .snsFlexBox > div {
        width: auto;
        margin-bottom: 25px;
    }

    #sns {
        padding: 0 20px;
    }


    #sns h2 {
        white-space: nowrap;
        font-size: 15vw;
    }

    #covit {
        margin-bottom: 78px;
    }

    #sns {
        margin-bottom: 104px;
    }

    #interview {
        padding: 0 20px;
    }

    #media h2 {
        margin-bottom: 26px;
    }

    #media h2 {
        padding-top: 20px;
    }

    #media {
        padding: 20px;
        margin-left: 0px;
        margin-bottom: 85px;
    }

    .mediaMoveFlexBox {
        padding: 0 20px;
    }

    .businesPartnerFlexBox > div {
        width: 49%;
    }

    #businesPartner {
        padding: 40px 20px;
    }

    #navBanner {
        display: block;
    }

    #brandDes h2 {
        font-size: 36px;
        margin-bottom: -5px;
    }

    #freezing h2 span {
        font-size: 15px;
        margin-left: 0;
        display: block;
    }

    #freezing h2 {
        font-size: 20px;
        margin-bottom: 33px;
    }

    #media h2 span {
        font-size: 15px;
        margin-left: 0;
        display: block;
    }

    #media h2 {
        font-size: 20px;
        margin-bottom: 33px;
    }

    .swiper-button-prev:after,
    .swiper-rtl .swiper-button-next:after {
        height: 39px !important;
    }

    .swiper-button-next:after,
    .swiper-rtl .swiper-button-prev:after {
        height: 39px !important;
    }

    .swiper-button-prev,
    .swiper-rtl .swiper-button-next {
        right: 60px !important;
    }

    .Rtabs dl {
        display: block;
        padding: 35px 0;
    }

    .Rtabs dt {
        width: auto;
        margin-bottom: 14px;
    }

    .tab_content {
        padding: 1px 29px 0;
    }

    .Rtabs dd p {
        font-size: 14px;
    }

    .Rtabs dd {
        width: auto;
    }

    .tab_item {
        font-size: 15px;
    }

    .recruitBtn a {
        padding: 41px;
        font-size: 27px;
        margin-top: 41px;
        margin-bottom: 40px;
    }

    .recruitEnTitle {
        font-size: 38px;
        margin-bottom: 43px;
    }

    .recruitEnTitle::after {
        height: 42px;
        bottom: -66px;
    }

    #udAbout {
        padding: 0 20px;
    }

    #udAbout .imgBox img {
        margin-bottom: 7px;
    }

    #udAbout .contents {
        margin-bottom: 58px;
    }

    #udAbout .titleBox {
        font-size: 17px;
        line-height: 29px;
        margin-bottom: 28px;
    }

    #udAbout .des {
        font-size: 14px;
        line-height: 28px;
        margin-bottom: 13px;
    }

    #udAbout h3 {
        margin-bottom: 10px;
        font-size: 21px;
    }

    #udBusiness div .textBox {
        padding: 0 20px;
    }

    #udBusiness h3 {
        font-size: 19px;
        line-height: 26px;
        margin-bottom: 0px;
    }

    #udBusiness .enTitle {
        margin-bottom: 10px;
    }

    #udBusiness .des {
        font-size: 14px;
        line-height: 28px;
    }

    #udBusiness > div {
        margin-bottom: 40px;
    }
    
    .udnewslistBox {
    padding: 0 20px;
}
    #udpost{
    padding: 0 20px;
}
    .udPostTxtBox p {
    font-size: 13px;
}
}




@media screen and (max-width:700px) {
    .businessItemBox_TextB .des {
        font-size: 12px;
        line-height: 21px;
        padding-right: 26px;
    }


    .businessItemBox_TextB {
        bottom: 4%;
    }

    #business::after {
        right: 25px;
    }

    .footerTFlexBox ul {
        display: block;
    }

    .footerTopWrap {
        padding: 0 20px;
    }

    footer .footerTFlexBox ul a {
        margin-right: 0 !important;
        padding-bottom: 20px;
        border-bottom: solid 1px #bbb;
        margin-bottom: 20px;
    }

    .footerAddressBox {
        display: block;
        margin-top: 29px;
        margin-bottom: 29px;
    }

    .footerAddressBox > div {
        margin-bottom: 20px;
    }

    .footerBFlexBox ul {
        display: block;
    }

    .footerAddressBox div {
        margin-right: 0;
    }

    .footerBFlexBox {
        display: block;
    }

    .footerBFlexBox ul a {
        padding-bottom: 20px;
        border-bottom: solid 1px #bbb;
        margin-bottom: 20px;
        margin-right: 0;
    }

    .udrecruitCompany_wrap dl > div {
        display: block;
    }

    .udrecruitCompany_wrap dl dd {
        padding-left: 0;
        width: 99.7%;
        border: none;
    }

    .udrecruitCompany_wrap dl dt {
        width: 100%;
        padding: 25px 0;
    }


}




@media screen and (max-width:600px) {
    #contact span {
        display: block;
        margin-left: 0;
    }

    #contact span {
        font-size: 13px;
    }

    #contact a::after {
        right: 10px;
        height: 35px;
        top: 37%;
    }

    #contact h2 {
        font-size: 32px;
    }

    #contact a {
        padding: 55px 20px 44px 20px;
    }

    .brandBgFlexBox {
        display: block;
    }

    #business .businessItemBox img {
        height: 250px;
        object-fit: cover;
    }

    .businessItemBox {
        width: calc(100% - 6%);
    }

    .businessItemBox::after {
        right: 6%;
    }

    #business::after {
        display: none;
    }

    .businessItemBoxWrap::after {
        top: 8%;
        opacity: .8;
        right: 12%;
    }

    .udrecruitCompany_wrap dl dd {
        padding-top: 20px;
        padding-bottom: 17px;
        font-size: 15px;
    }

    .udrecruitCompany_wrap dl dt {
        padding: 18px 0;
    }

    .udrecruitCompany .subTitle {
        font-size: 15px;
    }
     .qText {
    font-size: 13px;
    padding-right: 20px;
}

    .accordionFlexBoxNmber {
        margin-right: 16px;
    }

    .accordion .title {
        padding: 20px 23px;
    }

    .accordionFlexBoxanswer {
        margin-right: 16px;
    }

    .accordion .content {
        padding: 0 23px;
    }

    .AText {
        font-size: 13px;
        line-height: 25px;
    }
.accordion .option {
    margin-bottom: 24px;
}
    .udQuestion {
        padding: 38px 20px;
    }
.udQuestion {
    margin-bottom: 0;
}
    .accordion .title::after,
    .accordion .title::before {
        height: 19px;
    }
    #udBusiness > div {
    margin-bottom: 0;
}
    #media .swiper-container2 p {
    margin-bottom: 0;
}
    #udstoreManagement, #udfoodHaring, #udlendindBenefits, #udbuyGoods {
    padding-top: 100px;
}
    input {
    font-size: 16px;
    }
    textarea {
    font-size: 16px;
}
}

@media screen and (max-width:515px) {
    .udrecruitCompany_wrap dl dd {
        font-size: 15px;
    }


    .udHeaderInner {
        height: 209px;
    }


    .udHeader {
        margin-top: 83px;
        margin-bottom: 62px;
    }

    .udHeaderInnerTitleBox h2 {
        font-size: 32px;
    }

    .udHeaderInnerTitleBox p {
        margin-top: 1px;
    }


    .udHeader::before {
        bottom: -23px;
    }

    .BreadcrumbWrap {
        display: none;
    }


    .form p br {
        display: none;
    }

    .form p {
        font-size: 14px;
    }
}




@media screen and (max-width:520px) {
    #brandDes h3 {
        font-size: 18px;
        line-height: 30px;
        margin-bottom: 30px;
    }

    .brandDesFlexBoxTextBox p {
        margin-bottom: 26px;
        font-size: 13px;
    }

    .thanyouMail h3 {
        font-size: 17px;
    }

    .thanyouMail p {
        line-height: 25px;
        font-size: 14px;
    }

    .form_flexBox_list {
        width: 100%;
    }

    select {
        width: 100%;
    }

    .selectinnerEntry::after {
        left: auto;
        right: 7px;
    }

    .recruitEnTitle {
        font-size: 32px;
        margin-bottom: 26px;
    }

    .recruitEnTitle::after {
        height: 37px;
        bottom: -48px;
    }

    #udRecruit {
        padding: 45px 20px;
    }

    .Rtabs {
        max-width: 1200px;
    }

    .swiper-pagination {
        top: 35%;
    }

    .hero {
        margin-bottom: 1px;
    }

    #news {
        padding-bottom: 46px;
    }

    #brandDes {
        margin-bottom: 59px;
    }

    #bannerBox {
        margin-bottom: 95px;
    }

    .swiperArrowWrap {
        right: -24px;
        top: -9%;
    }

    #business {
        margin-bottom: 50px;
    }

    #tkn .commonBtn {
        margin-top: 17px;
    }

    .covitWrap h2 {
        font-size: 23px;
        width: 100%;
    }


}

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

    #news .subTitle {
        margin-top: -10px;
    }

    .NewsItem {
        font-size: 13px;
    }

    .NewsItem {
        padding: 27px 0;
    }

    .NewsItemWrap a::after {
        width: 16px;
        top: 42px;
    }
}



.entry_img{
    margin: 1em auto;
    text-align: center;
}
.entry_img img{
    max-width: 100%;
}
#udpost .mediaBtn a {
    background: #333;
    color: #fff;
    text-decoration: none;
    display: block;
    max-width: 200px;
    padding: 10px 0;
    text-align: center;
    margin: auto;
    font-size: 15px;
}
.mediainfowrap{
    display: flex;
}
.mediainfowrap{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-content: center;
    justify-content: center;
    align-items: center;
}
.mediainfoItem{
    width: 29%;
    margin: 0% 2%;
}
.mediainfoItem .archive_img img{
    max-width: 100%;
    height: auto;
}
.mediainfowrap a{
    border:none !important;
}
.mediainfowrap a::after{
    top:auto !important;
    bottom: 10px !important;
}
@media screen and (max-width:767px) {
    .mediainfoItem{
        width: 100%;
        margin: 0% auto 2em;
    }
    .mediainfoItem .archive_img img{
        width: 100%;
        height: auto;
    }
}




.mediaMoveFlexBox_ttl {
    width: 55%;
}
.mediaMoveFlexBox video {
    width: 100%;
    position: relative;
    width: 55%;
    text-align: center;
    margin: auto;
    display: block;
}
@media screen and (max-width:768px) {
    .mediaMoveFlexBox_ttl {
        width: 100%;
    }
    .mediaMoveFlexBox video{
        width: 100%;
    }
}



.topNewsList_time{
    font-size: 28px;
    margin-bottom: 10px;
}
.topNewsList .day{
    font-size: 14px;
    display: inline-block;
}
.topNewsList .category{
    font-size: 14px;
    display: inline-block;
}
@media screen and (max-width:768px) {
    .topNewsList_time{
        font-size: 24px;
    }
}