@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Hammersmith+One&display=swap');

body{
    position: relative;
    margin: 0;
    overflow-x: hidden;
    height: 100vh;
    width: 100vw;
    background: #fff;
}
.pd-tb{padding: 100px 0;}
.pd-tp{padding-top: 100px;}
.pd-bt{padding-bottom: 100px;}
.read{font-weight: bold;}
.cl-white{color: #fefefe;}

body.is-fixed {
    position: fixed;
	left: 0;
}
.overlay {
    background: rgba(0,0,0,0.5);
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 99;
    display: none;
}

/* SP以下 */
@media only screen and (max-width: 768px){
    .pd-tb{padding: 10% 0;}
    .pd-tp{padding-top: 10%;}
    .pd-bt{padding-bottom: 10%;}
}

/* header
---------------------------------------------------------------- */
/* メインページヘッダー */
.header{
    position: absolute;
    top: 0;
    width: 100%;
    z-index: 98;
    padding: 8px 16px;
}
.header-change{
background: #fefefe;
position: fixed;
transition: .5s;
width: 100%;
z-index: 99;
opacity: 0.8;
padding: 8px 16px;
}

/* サブページヘッダー */
.header-sub{
    background-image: url('../images/common/main.jpg');
    background-position: center;
    background-size: cover;
    padding: 1em;
}

.header .logo,.header-change .logo,.header-sub .logo{width: 250px;max-width: 40%;}

@media only screen and (max-width: 1024px){
    .header-sub{
        background-image: none;
        padding: 0;
    }
}
@media only screen and (max-width: 768px){
.header{ padding: 15px 1.5%; }
}
@media only screen and (max-width: 480px){
    .header .logo,.header-change .logo,.header-sub .logo{max-width: 60%;}
}

/* footer
---------------------------------------------------------------- */
.footer{background-color:#F76F1B;padding:30px 0 0; width: 100%; text-align: center;}
.footer a{padding: 0 20px; display: block;color: #fafafa;}
.footer address{ font-size: 13px; margin-top: 50px; color: #fafafa; padding: 5px;}
.footer li+ li {border-left: 1px solid #333;}
.footer .logo{width: 250px;max-width: 40%;margin: auto;}
@media only screen and (max-width: 480px){
    .footer .logo{max-width: 70%;}
}


/* MENU
---------------------------------------------------------------- */
.menu-list{
    display: flex;
    flex-wrap: wrap;
}
.menu-list li a{
    position: relative;
    display: block;
    color: #fefefe;
    padding: 1em 0;
    width: 110px;
    text-align: center;
}
.header-change .menu-list li a{
    color: #5a5a5a;
}
.menu-list li a:hover{
  opacity: 1;
}
.menu-list li a::after {
    content: '';
    /*絶対配置で線の位置を決める*/
    position: absolute;
    bottom: 0;
    left: 0;
    /*線になる丸の形状*/
    width: 100%;
    height: 5px;
    border-radius: 50%;
    background:#fefefe;
    /*アニメーションの指定*/
    transition: all .3s;
    transform: scale(0, 1);/*X方向0.04、Y方向1*/
    transform-origin:center bottom;/*中央下部基点*/
}
/*hoverの設定*/
.menu-list li a:hover::after {
    height: 2px;/*縦幅を変化*/
    border-radius: 0;/*丸みをなくす*/    
    transform: scale(0.8, 1);/*X方向0.8、Y方向1にスケール拡大*/
}
.header-change .menu-list li a::after{
    background:#5a5a5a;
}


/* TopMain
---------------------------------------------------------------- */
.top-hero{
    width:100%;
    height: 85vh;
    /* background-image: url('../images/common/main.jpg');
    background-position: center;
    background-size: cover;
    background-attachment: fixed; */
    line-height:1.4;
    display: flex;
    justify-content: center;
    align-items: center;
}
.top-hero::before {
    position:fixed;
    top:0;
    left:0;
    z-index:-1;
    width:100vw;
    height: 100vh;
    background:url("../images/common/main.jpg") no-repeat;
    -webkit-background-size: cover;
    background-size: cover;
    content:"";
}
.top-hero h2{
    font-size: 35px;
    font-family: "游明朝", YuMincho, "Hiragino Mincho ProN W3", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
    color: #fff;
}
@media only screen and (max-width: 768px){
.top-hero{padding:120px 0; }
}
@media only screen and (max-width: 480px){
    .top-hero h2{
        font-size: 28px;
    }
}


/* 事業紹介
---------------------------------------------------------------- */
#business{
    position: relative;
    background: #fff;
}

#business .ttl--01{margin-top: 100px;}

#business .read{
    font-size: 22px;
    font-weight: bold;
}
.business-01 .item-01{
    background: url(../images/common/business01.jpg) center center no-repeat;
    background-size: cover;
    width: 53%;
    padding-top: 30%;
    z-index: 1;
}
.business-01 .item-02{
    position: relative;
    width: 47%;
}
.business-contents{width: 85%;margin: auto;}
.business-contents p{margin-top: 5%;}

.business-02{position: relative;}
.business-02 .item-01{
    position: absolute;
    background: url(../images/common/business02.jpg) center center no-repeat;
    background-size: cover;
    width: 53%;
    padding-top: 30%;
    top: -10%;
    right: 0;
    z-index: 2;
}
.business-02 .item-02{
    position: relative;
    width: 47%;
    padding-top: 30%;
    display: flex;
    align-items: center;
}
.business-02 .item-02 .business-contents{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateY(-50%) translateX(-50%);
}

@media only screen and (max-width: 1279px){
    .business-contents p{font-size: 1.5rem;}
}

/* TB以下 */
@media only screen and (max-width: 1024px){
    #business h4{margin-top: 50px;}
    .business-contents p{font-size: 1.6rem;}
    .business-01 .item-01{
        width: 100%;
        padding-top: 50%;
    }
    .business-01 .item-02{
        width: 100%;
        margin-top: 9%;
    }
    .business-02 .item-01{
        position: relative;
        width: 100%;
        margin-top: 10%;
        padding-top: 50%;
    }
    .business-02 .item-02{
        width: 100%;
        margin-top: 9%;
        padding-top: 0;
    }
    .business-02 .item-02 .business-contents{
        position: relative;
        top: 0;
        left: 0;
        transform: translateY(0) translateX(0);
    }
}

/* SP以下 */
@media only screen and (max-width: 768px){
    .business-contents{width: 90%;}
    #business .read{
        font-size: 18px;
        font-weight: bold;
    }
}





/* 会社概要
---------------------------------------------------------------- */

#company{
    background: #fff;
}
/* main */
.company-main{
    position: relative;
    background: url(../images/common/company_main.jpg)  center center no-repeat;
    background-size: cover;
    /* background-attachment: fixed; */
    width: 100%;
    padding-top: 35%;
}
#company h3{position: absolute;top: 50%;left: 50%;transform: translateX(-50%);}
#company .read{text-align: center;line-height: 1.6;padding-bottom: 30px;}
#company h4{font-size: 2.4rem;text-align: center;}

/* ごあいさつ */
.company-greeting .greeting-box{display: flex;flex-wrap: wrap;}
.company-greeting .greeting-box>div:nth-of-type(1){width: 30%;}
.company-greeting .greeting-box>div:nth-of-type(2){width: 70%;padding-left: 10%;position: relative;}
.company-greeting .greeting-box p{font-size: 16px;line-height: 1.5;}
.ceo-name{font-size: 20px;margin-top: 1em;text-align: right;font-family:"游明朝", "YuMincho", serif;font-weight: bold;}
.ceo-name span{margin-right: 1em;font-size: .8em;}

/* 会社情報 */
.company-info{margin-top: 3em;}
.company-info dl{width: 100%; padding:0 2em 2em; align-items: stretch;justify-content: center;}
.company-info dl dt:first-of-type,.company-info dl dd:first-of-type{border-top: #5a5a5a 1px solid;}

.company-info dl dt{width: 20%;padding: 1em;border-bottom: #5a5a5a 1px solid;}
.company-info dl dd{width: 80%;padding: 1em;border-bottom: #5a5a5a 1px solid;line-height: 2.0;}

/* TB以下 */
@media only screen and (max-width: 1024px){
    .company-main{padding-top: 45%;}
    .company-greeting .greeting-box>div:nth-of-type(2){padding-left: 5%;}
    .company-greeting .greeting-box p{font-size: 16px;}
    .ceo-name{font-size: 18px;}
}

/* SP以下 */
@media only screen and (max-width: 768px){
    .company-main{padding-top: 50%;}
    .company-greeting .greeting-box>div:nth-of-type(1){width: 100%;text-align: center;max-width: 80%;margin: 5% auto 0;}
    .company-greeting .greeting-box>div:nth-of-type(2){width: 100%;padding-left: 0;}
    .ceo-name{font-size: 20px;margin-top: 1em;text-align: right;}
    .company-info{margin-top: 15%;}
    .company-info dl{padding: 0;}
    .company-info dl dd:first-of-type{border-top: none;}
    .company-info dl dt{width: 100%;border-bottom: none;background: #FCFCEC;}
    .company-info dl dd{width: 100%;padding: 1em 1em 1em 2em;}
}
@media only screen and (max-width: 480px){
    .company-main{
        padding-top: 60%;
    }
    #company h4{font-size: 2rem;}
}

/* 採用情報
---------------------------------------------------------------- */

#recruit{
    background: #fff;
}
.recruit-main{
    position: relative;
    background: url(../images/common/recruit_main.jpg)  center center no-repeat;
    background-size: cover;
    /* background-attachment: fixed; */
    width: 100%;
    padding-top: 35%;
}

#recruit h3{position: absolute;top: 50%;left: 50%;transform: translateX(-50%);}
#recruit h4{text-align: center;font-size: 2.4rem;}


/*アコーディオン全体*/
.accordion-area{
    list-style: none;
    width: 100%;
    margin-left: auto;margin-right: auto;
}
.accordion-area li{
    margin: 10px 0;
}
.accordion-area li > div{
	border: #707070 1px solid;
}

/*アコーディオンタイトル*/
.accordion-title {
    position: relative;
    cursor: pointer;
    font-size: 2.0rem;
    font-weight: normal;
    background: #FCFCEC;
    padding: 3%;
    transition: all .5s ease;
    border-bottom: #707070 1px solid;
    margin: 0 0 -1px;
}
/*アイコンの＋と×*/
.accordion-title::after{
    position: absolute;
    content:'';
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    content: "\f078";
    top: 50%;
    transform: translateY(-50%);
    right: 3%;
}
.accordion-title.close::after{
	transform: rotate(-180deg);
    top: 30%;
}

/*アコーディオンで現れるエリア*/
.accordion-box {
    display: none;
    padding: 3%;
}
.recruit-table table{
    margin-top: 3%;
    border: none!important;
    width: 100%;
}
.recruit-table tr{
    border-bottom: #707070 1px solid;
    width: 100%;
    display: flex;
    flex-wrap: wrap;
}
.recruit-table td:nth-of-type(2n-1){
    width: 20%;
    padding: .5em;
    font-weight: bold;
}
.recruit-table td:nth-of-type(2n){
    width: 80%;
    padding: .5em;
}
.recruit-table td{
    border: none!important;
}
.recruit-table td img{width: 100%!important;}
.recruit-table tr:last-of-type{
    border-bottom: none;
}

/* TB以下 */
@media only screen and (max-width: 1024px){
    .recruit-main{padding-top: 45%;}

}

/* SP以下 */
@media only screen and (max-width: 768px){
    .recruit-main{padding-top: 50%;}
    .accordion-box {
        padding: 5% 3%;
    }
}
@media only screen and (max-width: 480px){
    #recruit h4{font-size: 2rem;}
    .recruit-main{
        padding-top: 60%;
    }
    .accordion-title {
        font-size: 1.6rem;
        padding: 3% 10% 3% 3%;
    }
    .recruit-table td:nth-of-type(2n-1){
        width: 100%;
        padding: .5em;
    }
    .recruit-table td:nth-of-type(2n){
        width: 100%;
        padding: .5em;
    }
}

/* アクセス
---------------------------------------------------------------- */
#access{
    background: #fff;
}
#access p{width: 550px;margin-left: auto;margin-right: auto;max-width: 94%;}

/* google map */
.google-maps {
    position: relative;
    padding-bottom: 25%;
    height: 0;
    overflow: hidden;
}
.google-maps iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100% !important;
    height: 100% !important;
}

/* TB以下 */
@media only screen and (max-width: 1024px){
    .google-maps {padding-bottom: 40%;}
}

/* SP以下 */
@media only screen and (max-width: 768px){
    #access h3{margin-top: 60px;}
    .google-maps {padding-bottom: 50%;}
}
@media only screen and (max-width: 480px){
    .google-maps {padding-bottom: 60%;}
}



/* お問い合わせ
---------------------------------------------------------------- */
#contact{background: #fff;}
.contact-box{
    position: relative;
    display: flex;
    justify-content: space-between;
    border: #5a5a5a 1px solid;
    padding: 3% 5%;
}
.contact-box::before{
    position: absolute;
    content: '';
    height: 4em;
    width: 1px;
    background: #5a5a5a;
    left: 50%;
    top: 50%;
    transform: translateY(-50%);
}

.contact-tel a{
    display: block;
    width: 100%;
    height: 100%;
}
.contact-tel p{line-height: 1.3;}
.contact-tel span{
    font-size: 4.0rem;
    font-weight: bold;
}

.contact-mail{
    display: flex;
    align-items: center;
    justify-content: center;
}

/* SP以下 */
@media only screen and (max-width: 768px){
    #contact h3{margin-top: 60px;}
    .contact-box{
        flex-direction: column;
        height: 100%;
        padding: 5%;
    }
    .contact-box::before{
        display: none;
    }
    .contact-tel{
        width: 100%;
        height: 120px;
        text-align: center;
        position: relative;
    }
    .contact-tel::after{
        position: absolute;
        content: '';
        height: 1px;
        width: 80%;
        background: #5a5a5a;
        left: 50%;
        bottom: 0;
        transform: translateX(-50%);
    }
    .contact-mail{height: 60px;align-items:flex-end;}
}
@media only screen and (max-width: 480px){
    .contact-tel span{
        font-size: 3.5rem;
    }
    .contact-tel{height: 100px;}
    .contact-mail{height: 50px;}
}

/* フォーム
---------------------------------------------------------------- */
.contact-form {
    margin-top: 80px;
    margin-left: auto;
    margin-right: auto;
    max-width: 720px;
}
.form-item {
    border-top: 1px solid #ddd;
    padding-top: 24px;
    padding-bottom: 24px;
    width: 100%;
    display: flex;
    align-items: center;
}
.form-item:nth-child(5) {
border-bottom: 1px solid #ddd;
}
.form-item-label {
width: 100%;
max-width: 248px;
letter-spacing: 0.05em;
font-weight: bold;
font-size: 18px;
}
.form-item-label.isMsg {
margin-top: 8px;
margin-bottom: auto;
}
.form-item-label-required {
border-radius: 6px;
margin-right: 8px;
padding-top: 8px;
padding-bottom: 8px;
width: 48px;
display: inline-block;
text-align: center;
background: #73C10F;
color: #fff;
font-size: 14px;
}
.contact-form input[type="text"] {
    border: 1px solid #ddd;
    border-radius: 6px;
    margin-left: 40px;
    padding-left: 1em;
    padding-right: 1em;
    height: 48px;
    flex: 1;
    width: 100%;
    max-width: 410px;
    background: #eaedf2;
    font-size: 16px;
    -webkit-appearance: none;
}
.contact-form textarea{
    border: 1px solid #ddd;
    border-radius: 6px;
    margin-left: 40px;
    padding-left: 1em;
    padding-right: 1em;
    height: 216px;
    flex: 1;
    width: 100%;
    max-width: 410px;
    background: #eaedf2;
    font-size: 18px;
    -webkit-appearance: none;
}
.contact-form input[type="submit"]{
border-radius: 6px;
margin-top: 32px;
margin-left: auto;
margin-right: auto;
padding-top: 20px;
padding-bottom: 20px;
width: 280px;
display: block;
letter-spacing: 0.05em;
background: #73C10F;
color: #fff;
font-weight: bold;
font-size: 20px;
border: none;
cursor: pointer;
}

.mw_wp_form .error {
    margin-left: 40px;
    margin-top: .3em;
}

@media screen and (max-width: 768px) {
    .form {
        margin-top: 40px;
    }
    .contact-form {
        max-width: 410px;
    }
    .form-item {
    padding-left: 14px;
    padding-right: 14px;
    padding-top: 16px;
    padding-bottom: 16px;
    flex-wrap: wrap;
    }
    .form-item-label {
    max-width: inherit;
    display: flex;
    align-items: center;
    font-size: 15px;
    }
    .form-item-label.isMsg {
    margin-top: 0;
    }
    .form-item-label-required {
    border-radius: 4px;
    padding-top: 4px;
    padding-bottom: 4px;
    width: 32px;
    font-size: 10px;
    }
    .contact-form input[type="text"] {
    margin-left: 0;
    margin-top: 18px;
    height: 40px;
    flex: inherit;
    font-size: 15px;
    }
    .contact-form textarea{
    margin-top: 18px;
    margin-left: 0;
    height: 200px;
    flex: inherit;
    font-size: 15px;
    }
    .contact-form input[type="submit"] {
    margin-top: 24px;
    padding-top: 8px;
    padding-bottom: 8px;
    width: 160px;
    font-size: 16px;
    }
    .mw_wp_form .error {
        margin-left: 0;
        margin-top: .3em;
    }
}




/* 404
---------------------------------------------------------------- */
.se-404 .top-hero{
    width:100%;
    height: 0;
    background-image: url('../images/common/main.jpg');
    background-position: bottom;
    background-size: cover;
    background-attachment: fixed;
    line-height:1.4;
    padding-top: 20%;
}


/* title
---------------------------------------------------------------- */
.ttl--01{position: relative;font-size: 3rem;text-align: center;}
.ttl--01::before{
    position:absolute;
    content: '';
    display:block;
    width: 85px;
    height: 62px;
    background: url(../images/common/ttl01.svg) no-repeat;
    top: -100%;
    left: 49.5%;
    transform: translateX(-49.5%);
}
.ttl--02,.ttl--03{position: relative;font-size: 2.4rem;text-align: center;}
.ttl--02::before{
    position:absolute;
    content: '';
    display:block;
    width: 3rem;
    height: 3rem;
    background: url(../images/common/ttl02.svg) no-repeat;
    background-size: cover;
    top: -100%;
    left: 50%;
    transform: translateX(-50%);
}
.ttl--03::before{
    position:absolute;
    content: '';
    display:block;
    width: 3rem;
    height: 3rem;
    background: url(../images/common/ttl03.svg) no-repeat;
    background-size: cover;
    top: -100%;
    left: 50%;
    transform: translateX(-50%);
}
.sub-en{display: block;font-size: 0.5em;margin-top: .5em;font-family: 'Hammersmith One', sans-serif;}

@media screen and (max-width: 768px) {
    .ttl--01{font-size: 2.4rem;}
    .ttl--01::before{
        width: 50px;
        height: 36.45px;
        background: url(../images/common/ttl01.svg) no-repeat;
        background-size: contain;
        top: -90%;
        left: 49.5%;
        transform: translateX(-49.5%);
    }
}


/* btn
---------------------------------------------------------------- */
.btn{margin-top: 40px; text-align: center;}

.btn--01 a,.btn--02 a,.btn--03 a{
padding: 10px 50px;
display: block;
color:#fff;
font-size: 1.6rem;
text-decoration: none;
background: #666666;
text-align: center;
}

.btn--02 a{max-width: 200px;margin: auto;}
.btn--03 a{max-width: 250px;margin: auto;padding: 10px 20px;}

@media only screen and (max-width: 768px){
.btn--01 a{font-size:14px;padding: 10px 30px;}
}




/* ハンバーガーメニュー
---------------------------------------------------------------- */
.hamburger-container{position: fixed;right: 0;top: 0;width: 80px;height: 90px;background: #fff;opacity: 0.7;}
.hamburger-container,.hamburger,.drawer-list{z-index: 999;}
input.hamburger:checked ~ .hamburger-container {
    display: none;
}
.drawer-list {
    position: fixed;
    right: 0;
    top: 0;
    height: 100vh;
    width: 100vw;
    transform: translate(100vw, 0);
    /* ie workaround */
    -ms-transform: translatex(-100vw);
    box-sizing: border-box;
    pointer-events: none;
    padding-top: 125px;
    transition: width 475ms ease-out, transform 450ms ease, border-radius 0.8s 0.1s ease;
    border-bottom-left-radius: 100vw;
    background-color: #3d88ce;
    background-color: rgba(12, 106, 194, 0.8);
}
@media (min-width: 768px) {
    .drawer-list {
        width: 50vw;
    }
}
.drawer-list ul {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
overflow: auto;
overflow-x: hidden;
pointer-events: auto;
}
.drawer-list li {
list-style: none;
text-transform: uppercase;
pointer-events: auto;
white-space: nowrap;
box-sizing: border-box;
transform: translatex(100vw);
/* ie workaround */
-ms-transform: translatex(-100vw);
}
.drawer-list li:last-child {
margin-bottom: 2em;
}
.drawer-list li a {
text-decoration: none;
color: #FEFEFE;
text-align: center;
display: block;
padding: 1rem;
font-size: calc(24px - .5vw);
}
@media (min-width: 768px) {
.drawer-list li a {
    text-align: right;
    padding: 0.5rem;
}
}
.drawer-list li a:hover {
cursor: pointer;
background-color: #88c2f8;
background-color: rgba(17, 132, 240, 0.5);
}

input.hamburger {
display: none;
}
input.hamburger:checked ~ .drawer-list {
transform: translatex(0);
border-bottom-left-radius: 0;
}
input.hamburger:checked ~ .drawer-list li {
transform: translatex(0);
}
input.hamburger:checked ~ .drawer-list li:nth-child(1) {
transition: transform 1s 0.08s cubic-bezier(0.29, 1.4, 0.44, 0.96);
}
input.hamburger:checked ~ .drawer-list li:nth-child(2) {
transition: transform 1s 0.16s cubic-bezier(0.29, 1.4, 0.44, 0.96);
}
input.hamburger:checked ~ .drawer-list li:nth-child(3) {
transition: transform 1s 0.24s cubic-bezier(0.29, 1.4, 0.44, 0.96);
}
input.hamburger:checked ~ .drawer-list li:nth-child(4) {
transition: transform 1s 0.32s cubic-bezier(0.29, 1.4, 0.44, 0.96);
}
input.hamburger:checked ~ .drawer-list li:nth-child(5) {
transition: transform 1s 0.4s cubic-bezier(0.29, 1.4, 0.44, 0.96);
}
input.hamburger:checked ~ .drawer-list li:nth-child(6) {
transition: transform 1s 0.48s cubic-bezier(0.29, 1.4, 0.44, 0.96);
}
input.hamburger:checked ~ .drawer-list li:nth-child(7) {
transition: transform 1s 0.56s cubic-bezier(0.29, 1.4, 0.44, 0.96);
}
input.hamburger:checked ~ .drawer-list li:nth-child(8) {
transition: transform 1s 0.64s cubic-bezier(0.29, 1.4, 0.44, 0.96);
}
input.hamburger:checked ~ .drawer-list li:nth-child(9) {
transition: transform 1s 0.72s cubic-bezier(0.29, 1.4, 0.44, 0.96);
}
input.hamburger:checked ~ .drawer-list li:nth-child(10) {
transition: transform 1s 0.8s cubic-bezier(0.29, 1.4, 0.44, 0.96);
}
input.hamburger:checked ~ .drawer-list li:nth-child(11) {
transition: transform 1s 0.88s cubic-bezier(0.29, 1.4, 0.44, 0.96);
}
input.hamburger:checked ~ .drawer-list li:nth-child(12) {
transition: transform 1s 0.96s cubic-bezier(0.29, 1.4, 0.44, 0.96);
}
input.hamburger:checked ~ .drawer-list li:nth-child(13) {
transition: transform 1s 1.04s cubic-bezier(0.29, 1.4, 0.44, 0.96);
}
input.hamburger:checked ~ .drawer-list li:nth-child(14) {
transition: transform 1s 1.12s cubic-bezier(0.29, 1.4, 0.44, 0.96);
}
input.hamburger:checked ~ .drawer-list li:nth-child(15) {
transition: transform 1s 1.2s cubic-bezier(0.29, 1.4, 0.44, 0.96);
}
input.hamburger:checked ~ .drawer-list li:nth-child(16) {
transition: transform 1s 1.28s cubic-bezier(0.29, 1.4, 0.44, 0.96);
}
input.hamburger:checked ~ .drawer-list li:nth-child(17) {
transition: transform 1s 1.36s cubic-bezier(0.29, 1.4, 0.44, 0.96);
}
input.hamburger:checked ~ .drawer-list li:nth-child(18) {
transition: transform 1s 1.44s cubic-bezier(0.29, 1.4, 0.44, 0.96);
}
input.hamburger:checked ~ .drawer-list li:nth-child(19) {
transition: transform 1s 1.52s cubic-bezier(0.29, 1.4, 0.44, 0.96);
}
input.hamburger:checked ~ .drawer-list li:nth-child(20) {
transition: transform 1s 1.6s cubic-bezier(0.29, 1.4, 0.44, 0.96);
}
input.hamburger:checked ~ .drawer-list li a {
padding-right: 15px;
}
input.hamburger:checked ~ label > i {
background-color: transparent;
transform: rotate(90deg);
}
input.hamburger:checked ~ label > i:before {
transform: translate(-50%, -50%) rotate(315deg);
background-color: #FEFEFE;
}
input.hamburger:checked ~ label > i:after {
transform: translate(-50%, -50%) rotate(-315deg);
background-color: #FEFEFE;
}
input.hamburger:checked ~ label close {
color: #FEFEFE;
width: 100%;
}
input.hamburger:checked ~ label open {
color: rgba(0, 0, 0, 0);
width: 0;
}

label.hamburger {
z-index: 9999;
position: relative;
display: block;
height: 50px;
width: 50px;
}
label.hamburger:hover {
cursor: pointer;
}
label.hamburger text close,
label.hamburger text open {
text-transform: uppercase;
font-size: 0.8em;
text-align: center;
position: absolute;
transform: translateY(50px);
text-align: center;
overflow: hidden;
transition: width 0.25s 0.35s, color 0.45s 0.35s;
}
label.hamburger text close {
color: rgba(0, 0, 0, 0);
right: 0;
width: 0;
}
label.hamburger text open {
color: #5a5a5a;
width: 100%;
}
label.hamburger > i {
position: absolute;
width: 100%;
height: 2px;
top: 50%;
background-color: #5a5a5a;
pointer-events: auto;
transition-duration: 0.35s;
/* transition-delay: 0.35s; */
}
label.hamburger > i:before, label.hamburger > i:after {
position: absolute;
display: block;
width: 100%;
height: 2px;
left: 50%;
background-color: #5a5a5a;
content: "";
transition: transform 0.35s;
transform-origin: 50% 50%;
}
label.hamburger > i:before {
transform: translate(-50%, -14px);
}
label.hamburger > i:after {
transform: translate(-50%, 14px);
}
label.hamburger {
position: fixed;
top: 15px;
right: 15px;
}

@media only screen and (min-width: 1025px){
    .hamburger{ display:none!important;}
}