@charset "utf-8";

footer#jobUnderFooter{
    --red:#E92D2D;
    --black:#706767;
    --richBlack:#393434;
    --yellow:#FFFF44;
    --midBlue:#004684;
    --midgreen:#008E84;
    --treeBrown:#985219;
    --footerBg:#f4f4e7;
    --lyeBrown:#9E9478;
    --pink:#F53D87;
    --orange:#FF4E00;
}

footer#jobUnderFooter{
    width: 100%;
    max-width: 1200px;
    margin:4rem auto 0 auto;
    background: #FEFEF2;
}

footer#jobUnderFooter img{
    max-width:100%;
}

.footerWrap{
    width: 100%;
    display:flex;
    flex-wrap:wrap;
    justify-content: space-between;
}
.footerContentL,.footerContentR{
    width: 49%;
    display:flex;
}

.footerContentR{
    flex-direction: column;
}

/* omakase */
.omakase{
    width: 100%;
    background:repeating-linear-gradient(-45deg,#D3FFF2,#D3FFF2 1px,#A9E2DE 0,#A9E2DE 12px);
    padding:2rem;
}

.omakaseBox{
    max-width:500px;
    margin: 0 auto;
    background: #ffffff;
    border-radius:16px;
    padding:5rem 2rem 3rem 2rem;
    position:relative;
}

.obiFukidashi{
    position:absolute;
    top:0;
    left:0;
    width:100%;
    background:var(--midgreen);
    border-radius:16px 16px 0 0;
    padding:1rem;
    box-sizing: border-box;
}

.obiFukidashi p{
    color:var(--yellow);
    font-size:1rem;
    font-weight:600;
    text-align: center;
    position:relative;
    padding:1rem 0;
    margin: 0;
}

.obiFukidashi p:after{
    background: var(--midgreen);
    content:"";
    display: block;
    position:absolute;
    bottom:-20px;
    left: 50%;
    transform: translateX(-50%);
    transform: rotate(-45deg);
    width:20px;
    height:20px;
}

.omakaseTitle{
    max-width:290px;
    margin: 2rem auto 0 auto;
}

.omakaseCopy{
    width: 90%;
    max-width:275px;
    margin: 1rem auto;
    font-size:1.2rem;
    line-height:1.6;
    text-align: center;
    font-weight:700;
    color:var(--richBlack);
}

.omakasepink{
    color:var(--pink);
}

.omakaseorange{
    color:var(--orange);
}

.omakaseBooks{
    display:flex;
    justify-content: center;
}

/* btnOrange */
.btnOrange a{
    background: var(--orange);
    border-radius:8px;
    box-shadow:0 5px 0 rgba(185,66,14,1);
    color:#ffffff;
    display: block;
    font-size:1.2rem;
    margin: 3rem auto 0 auto;
    max-width:227px;
    padding:1rem;
    text-align: center;
    width: 100%;
}

.btnOrange a:hover{
    opacity:0.6;
    transition:0.3s;
}

/* hintLink */
.hintLink{
    background: #EBEBDC;
    padding:2rem;
    margin: 0 0 1rem 0;
}

.hintLink a{
    display: block flex;
    justify-content: center;
    align-items:center;
    max-width:370px;
    margin:0 auto;
    background: #ffffff;
    border:3px solid #A9E2DE;
    border-radius:8px;
    box-shadow:0 5px 0 rgba(169,226,222,1);
    padding:2rem 2rem 2rem 3rem;
    color:var(--black);
    font-size:1.2rem;
    font-weight:500;
    position:relative;
}

.hintLink a:before{
    background: url("/new/_app/_webroot/img/page/job/hint_icon@2x.webp") center / contain no-repeat;
    content:"";
    display: inline-block;
    width:37px;
    height: 45px;
    position:absolute;
    left:5%;
}
/* footer */
.footerMenu{
    background: var(--footerBg);
    padding:2rem;
    height: 100%;
}

.footerMenuWrap{
    width: 100%;
    max-width:800px;
    margin:0 auto;
    display: flex;
    justify-content: center;
    flex-wrap:wrap;
}

.footerTitle{
    width: 100%;
    font-size:1.6rem;
    color:var(--lyeBrown);
    text-align: center;
    margin:2rem 0;
}

.footerMenuL,.footerMenuR{
    width: 50%;
}

.footerMenuList{
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction:column;
    margin-bottom:2rem;
}

.footerMenuList li{
    margin-bottom:1rem;
}

.footerMenuList li a{
    color:var(--lyeBrown);
    font-size:1.4rem;
    font-weight:bold;
    word-break: auto-phrase;
}

.footerMenuList li a:hover{
    opacity:0.6;
    transition:0.3s;
}

.footerMenuListChild{
    margin:0.5rem 0 0 1rem;
    list-style: none;
    padding: 0;
}

.footerMenuListChild li{
    margin:1rem 0 0 0;
}


@media screen and (max-width:768px){
    .footerContentL,.footerContentR{
        width: 100%;
    }

    .omakase{
        padding:2rem 1rem;
    }

    .omakaseBox{
        padding:5rem 1rem 3rem 1rem;
    }

    .obiFukidashi p{
        font-size:1.2rem;
    }

    .footerMenuL,.footerMenuR{
        width: 100%;
    }

    .omakaseBooks{
        max-height:420px;
    }
}