@charset "utf-8";

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

#topFooter img{
    max-width:100%;
}

/* footerContent */
#topFooter{
    width: 100%;
    max-width: 1200px;
    margin:0 auto;
}
#topFooter .footerWrap{
    display:flex;
    flex-wrap:wrap;
    justify-content: space-between;
}
#topFooter .footerContentL,#topFooter .footerContentR{
    width: 49%;
    display:flex;
}

#topFooter .footerContentR{
    flex-direction: column;
}

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

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

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

#topFooter .obiFukidashi p{
    color:var(--yellow);
    font-size:1.6rem;
    font-weight:600;
    text-align: center;
    position:relative;
}

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

#topFooter .omakaseTitle{
    max-width:290px;
    margin: 0 auto;
}

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

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

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

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

/* btnOrange */
#topFooter .btnOrange{
    margin-top:2rem;
}
#topFooter .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.4rem;
    margin: 1rem auto 0 auto;
    max-width:227px;
    padding:1rem;
    text-align: center;
    width: 100%;
}

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

/* footer */
#topFooter .footerMenu{
    background: var(--footerBg);
    padding:2rem;
    height: auto;
}

#topFooter .footerMenuWrap{
    width: 100%;
    max-width:800px;
    margin:0 auto;
    display: flex;
    justify-content: center;
    flex-wrap:wrap;
    gap: 2rem 6rem;
}

#topFooter .footerMenuBox,
#topFooter .footerMenuBox ul li{
    list-style:none;
}

#topFooter .footerTitle{
    width: 100%;
    font-size:1.4rem;
    color:var(--lyeBrown);
    text-align: center;
    margin:2rem auto;
}

#topFooter .footerMenuList{
    display: flex;
    flex-direction:column;
    margin-bottom:2rem;
    padding: 0;
}
#topFooter .footerMenuList li a{
    color:var(--lyeBrown);
    font-size:1.2rem;
    font-weight:bold;
}

#topFooter .footerMenuList li a:hover{
    opacity:0.6;
    transition:0.3s;
    color:var(--midgreen);
}

#topFooter .footerMenuListChild{
    margin:0.5rem 0 0 1rem;
    padding: 0;
}

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

/* hint */
#topFooter .hintTitle{
    width: 100%;
    display:flex;
    justify-content: center;
    align-items:center;
}
#topFooter .hintTitle h3{
    color:#128D84;
    display: flex;
    font-size: 1.6rem;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin: 1rem 0 1rem 0;
    padding:4rem 0 0 0;
    position: relative;
}
#topFooter .hintTitle h3:before{
    background: url(/new/_app/_webroot/img/page/job/hint_icon@2x.webp) center / contain no-repeat;
    content: "";
    display:block;
    width: 37px;
    height: 45px;
    margin-right: 1rem;
    position:absolute;
    position: absolute;
    top:-2rem;
    left: 50%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
}

#topFooter .hint{
    display: flex;
    justify-content: space-between;
    flex-wrap:wrap;
    gap:40px;
    margin:0 auto 2rem auto;
    padding:1rem;
    max-width:980px;
}

#topFooter .hintBox{
    width: 30%;
    color:var(--richBlack);
    display: flex;
    flex-direction:column;
}

#topFooter .hintBox p{
    font-size:1.2rem;
    line-height:1.8;
    flex-grow:1;
}

#topFooter .hintBoxL{
    width:65%;
    display: flex;
    align-items: center;
    background: #f5eee3;
    padding: 2rem;
}

.hintBoxLwrap1,.hintBoxLwrap2{
    width: 49%;
}

.hintTextL{
    font-size:1.2rem;
    font-weight:600;
    line-height:1.8 ;
    color:var(--black);
}

#topFooter .hintBox h4{
    text-align:center;
    font-size:1.4rem;
    color:#128D84;
    margin-bottom:1rem;
}

#topFooter .hintBoxL h4{
    font-size:1.6rem;
    color:#128D84;
    margin:1rem 0 1.5rem 0;
}

.redAttention{
    color:var(--red);
    border:1px solid var(--red);
    display:inline-block;
    padding:4px 12px;
    font-weight: 600;
    font-size:1.2rem;
    margin-bottom:0.5rem;
}

.btnGreen a{
    background:#6db1b3;
    border-radius: 50px;
    margin:7px auto 12px auto;
    border:2px solid #128D84;
    display: block;
    color:#ffffff;
    padding:1rem;
    font-size:1.25rem;
    font-weight: 600;
    text-align: center;
    text-shadow:1px 1px 3px rgb(9, 85, 90);
    box-sizing: border-box;
    box-shadow:0 5px 0 rgb(9, 85, 90);
}


@media screen and (min-width:768px) and (max-width:900px){
    .btnGreen a{
        font-size:1.2rem;
    }
}

@media screen and (min-width:768px){
    #topFooter .pc-none{
        display:none;
    }
}


@media screen and (max-width:1001px){
    #topFooter .hint{
        padding:2rem;
    }
    
    #topFooter .hintBox{
        width: 46%;
    }
        
    #topFooter .hintBoxL{
        width:100%;
    }
}

@media screen and (max-width:768px){
    #topFooter .footerMenu{
        background: var(--footerBg);
        padding:2rem 2rem;
        height: auto;
    }

    #topFooter .footerMenuListChild li{
        margin:2rem 0 0 0;
    }
    
    #topFooter .footerMenuList li a{
        font-size:1.4rem;
    }

    #topFooter .sp-none{
        display:none;
    }
    #topFooter .footerContentL,#topFooter .footerContentR{
        width: 100%;
    }

    #topFooter .omakase{
        box-sizing: border-box;
        padding:2rem 1rem;
    }

    #topFooter .omakaseBox{
        max-width:100%;
        padding:7rem 1rem 3rem 1rem;
        margin: 0;
    }

    #topFooter .obiFukidashi{
        box-sizing: border-box;
        padding:2rem;
    }

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

    #topFooter .footerMenuWrap{
        display: flex;
        justify-content:space-between;
        flex-wrap:wrap;
    }

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

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

    #topFooter .hint{
        margin:0 auto 2rem auto;
        padding:1rem 2rem;
        max-width:980px;
    }

    #topFooter .hintBox{
        width: 100%;
        color:var(--richBlack);
        padding-bottom:2rem;
    }

    #topFooter .hintBox p{
        padding-bottom:2rem;
    }
}

@media screen and (max-width:540px){
    #topFooter .footerMenuBox {
        width: 100%;
    }
}