@charset "UTF-8";
/* CSS Document */


@media screen and (min-width: 0px) and (max-width: 768px) {

main{
    margin: 0;
    min-height: 750px;
}

h1{
    font-size: 160% !important;
}
    
.top_image{
    width: 100%;
    height: 85px;
    object-fit: cover;
    margin: 65px 0 0;
}

.p-header__inner {
    margin: 5px auto;
    display: flex;
    justify-content: space-between;
    width: 90%;
    height: auto;
    max-width: 1200px;
    padding: 0;
    overflow: visible;
}

.p-header__title a {
    display: flex;
    width: 45%;
    height: auto;
    transition: all 0.5s 0s ease;
    align-items: center;
}
    
.p-header__title a img {
    width: 100%;
    min-width: 200px;
}    
    
.icon_word {
    margin: 0 0 5px 0;
    width: 100px;
    color: #FFA254;
    text-align: center;
    font-size: 120%;
} 

.p-header__title.recruit a img {
    width: 40%;
    min-width: 80px;
}
    
.sub_top.temp {
    margin: 65px 0 0;
}
    
.wave_top.temp {
    margin: -11px 0 0;
} 
 
.wrap_content {
    margin: 50px auto 0;
    width: 90%;
    max-width: 1200px;
}
    
.container.sub1 {
    margin: -60px;
    right: -20%;
}  
    
.circle.sub1 {
    width: 200px;
    height: 200px;
}
    
.image.sub1 {
    width: 210px;
    height: 200px;
    background: url(../img/recruit/fuyofuyo1.jpg);
    background-size: cover;
    background-position: 391% center;
}
    
.recruit_title{
    margin: 70px 0 0;
    font-size: 160%;   
}   

.recruit_title img {
    width: 65px;
    margin: 0px 8px -17px 0;
}

.sub_top {
    margin: 84px 0 0;
    padding: 15px 0 1px;
    position: relative;
    background-color: #98DCBF;
}

.sub_tree1 {
    position: absolute;
    margin: 10px 30px 0 0;
    width: 50px;
    right: 0;
}

    
.wave_top {
    margin: -3% 0 0;
}    

.message {
    margin: 0 auto;
    width: 100%;
    background-image: url(../img/recruit/road_sp.svg);
    background-size: cover;
    background-repeat: no-repeat;
}    
    
.partner_block {
    margin: -5px auto 100px;
    max-width: 1080px;
    padding: 50px 0px;
}
    
.text_kahoku.partner{
    width: 90%;
}    
    
h2 {
    margin: 0px 0;
    position: relative;
    padding: 20px 0;
    text-align: center;
    color: #5A4524;
    font-size: 140%;
}
    
.text_kahoku {
    margin: 0 auto;
    max-width: 1200px;
    font-size: 100%;
    font-weight: 500;
    line-height: 250%;
}
    
.with_us {
    margin: 0 auto 60px;
    width: 90%;
    display: flex;
    flex-direction: column;
    align-items: center;
}
 
.with_us_a {
    margin: 0px;
}
    
.with_us_a h2 {
    text-align: center;
}

.sub_tree2 {
    width: 60px;
    margin: -470px 0 0 -20px;
    position: absolute;
}
  
.message_1.aos-init.aos-animate{
    width: 90%;
    font-size: 100%;
    font-weight: 500;
}
    
.message_1 {
        padding: 80px 50px 70px 37px;
        background-color: #FFC1A6;
        border-radius: 96% 73% 77% 120% / 63% 87% 93% 59%;
        text-align: left;
        opacity: 0.9;
        font-size: 120%;
        line-height: 250%;
        max-width: 350px;
        margin: 0 calc(50% - 40vw);
        width: 100vw;
}
    
    
.container.sub2.aos-init.aos-animate {
    margin: -60px 0px 0;
}
    
.circle.sub2 {
    width: 220px;
    height: 280px;
    border-radius: 48% 69% 56% 53% / 47% 73% 43% 49%;
    animation: move 12s linear infinite;
    overflow: hidden;
    right: -20%;
}
    
.image.sub2 {
    width: 360px;
    height: 320px;
    background: url(../img/recruit/fuyofuyo2.jpg);
    background-size: cover;
    background-position: 100% center;
}    

.container.sub3.aos-init.aos-animate {
    margin: -60px 0 0px -220px;
}
    
.circle.sub3 {
    width: 190px;
    height: 190px;
    border-radius: 48% 69% 56% 53% / 47% 73% 43% 49%;
    animation: move 15s linear infinite;
    overflow: hidden;
}    
    
.image.sub3 {
    width: 190px;
    height: 190px;
    background: url(../img/recruit/fuyofuyo3.jpg);
    background-size: cover;
    background-position: 325% center;
}
    
    
.recruit_title.aos-init.aos-animate{
    margin: 90px 0 0;
    padding: 0 0 50px;
    font-size: 150%;
    }   
    
 .sub_tree3 {
    width: 60px;
    margin: 20px 20px 0 0px;
    position: absolute;
    right: 0;
}  

.container.sub4.aos-init.aos-animate {
    margin: 40px 0 0 105px;
}
    
.circle.sub4 {
    width: 220px;
    height: 200px;
    border-radius: 48% 69% 56% 53% / 47% 73% 43% 49%;
    animation: move 15s linear infinite;
    overflow: hidden;
} 
    
.image.sub4 {
    width: 220px;
    height: 200px;
    background: url(../img/recruit/fuyofuyo4.jpg);
    background-size: cover;
    background-position: 340% center;
}    
    
.message_text.aos-init.aos-animate {
    margin: 510px 0 0;
    font-size: 110%;
}  
    
.container.sub5.aos-init.aos-animate {
    margin: -50px 0 0 90px;
}
    
.circle.sub5 {
    width: 170px;
    height: 170px;
    border-radius: 48% 69% 56% 53% / 47% 73% 43% 49%;
    animation: move 12s linear infinite;
    overflow: hidden;
    right: -20%;
}
    
 .image.sub5 {
    width: 170px;
    height: 170px;
    background: url(../img/recruit/fuyofuyo5.jpg);
    background-size: cover;
    background-position: 391% center;    
}
    
.sub_tree4 {
    width: 60px;
    margin: 370px 5% 0 35px;
    position: absolute;
    right: 0;
}
    
.message_2 {
    width: 80%;
    margin: -30px auto 30px;
    padding: 80px 45px 195px 70px;
    background-color: #CAF0D9;
    border-radius: 65% 75% 45% 90% / 80% 65% 80% 60%;
    text-align: left;
    opacity: 0.9;
    font-size: 100%;
    line-height: 250%;
    font-weight: 500;
    max-width: 350px;
}
        
.sub_tree5 {
    width: 60px;
    margin: 220px 15px 0 -25px;
    position: absolute;
}


    
.job_content.aos-init.aos-animate{
    margin: 0 auto;
}   
 
.job_description {
    margin: -25px 0 0;
    padding: 0 0 1px 0;
    background-color: #FDEAB6;
}
    
.job_description h2 {
    margin: 0 0 0 75px;
    text-align: left;
    font-size: 140%;
} 
    
.job_title::before {
    margin: 0px 0px 55px -45px;
    content: '';
    position: absolute;
    width: 35px;
    height: 35px;
    background-image: url(../img/common/tree_01.svg);
    background-size: contain;
    background-repeat: no-repeat;
    bottom: 0;
}

.job_about {
    display: flex;
    width: 100%;
    padding: 0 0 30px;
    align-items: center;
    flex-direction: column;
}

.job_about img {
    margin: 0px;
    width: 120px;
}
    
.job_title span:after {
    margin: 0 0 0 -55px;
    display: inline-block;
    width: 110%;
    height: 10px;
    background: radial-gradient(circle farthest-side, #FFA254, #FFA254 18%, transparent 22%, transparent);
    background-size: 18px;
    content: '';
}

.job_text {
    margin: 30px 0 0 0px;
    font-size: 90%;
    width: 85%;
    line-height: 200%;
}

.comment{
    display: flex!important;
    flex-direction: column;
    align-items: center;
    color: #5A4524;
}

.comment_title{
    margin: 0px;
    display: flex;
    font-size: 110%;
    font-weight: 600;
    align-items: center;
}

.comment_dot{
    margin: 0px 0px 5px;
    width: 100%;
}

.comment_dot::after{
    margin: 0px;
    display: inline-block;
    width: 100%;
    height: 10px;
    background: radial-gradient(circle farthest-side, #FFA254, #FFA254 18%, transparent 22%, transparent);
    background-size: 22px;
    content: '';
}

.comment_title ::before{
    background-image: url(../img/recruit/front_voice.svg);
    background-repeat: no-repeat;
    content: '';
    width: 90px;
    display: block;
    height: 55px;
}

.comment_title.restaurant::before{
    background-image: url("../img/recruit/restaurant_voice.svg");
    background-repeat: no-repeat;
    content: '';
    width: 90px;
    display: block;
    height: 55px;
}


.slick-prev {
    margin: 200px 100px 0 0;
    left: 50%;
}

.staff_voice {
    margin: 100px auto 160px;
    width: 100%;
}

.slider.comment{
    width: 100%;
    max-width: 1100px;
    margin: 100px auto;
}


.staff_title {
    margin: 0px 0px -70px 0px;
    position: relative;
    font-size: 170%;
    font-weight: 600;
    color: #5A4524;
    text-align: center;
    width: 100%;
    right: 0;
}
    
.slick-prev::before {
    background-image: url(../img/recruit/arrow_comment.svg);
    content: '';
    width: 50px;
    display: block;
    height: 50px;
    margin: 50px auto 100px 0;
    position: absolute;
}

.slick-next::after {
        background-image: url(../img/recruit/arrow_comment.svg);
        content: '';
        width: 50px;
        display: block;
        height: 50px;
        transform: rotate(-180deg);
        margin: 250px auto 0;
        position: relative;
        right: -950%;
}

.slick-prev:before {
    content: '';
    text-align: center;
    margin: 70px auto;
    left: 910%;
    position: relative;
}
  
.comment-popopo {
        height: 450px;
        background-color: rgb(253, 234, 182);
        padding: 25px;
        border-radius: 10px;
        box-sizing: border-box;
}
    
.regular.slider.comment .slick-list.draggable {
    margin: 0;
    width: 100%;
    opacity: 1;
}

.benefits_content {
    width: 70%;
    max-width: 450px;
    margin: 30px auto 60px;
    padding: 0;   
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}    

.job_title.benefits span::after {
    margin: 0 auto;
    width: 100%;
    height: 10px;
    background: radial-gradient(circle farthest-side, #FFA254, #FFA254 16%, transparent 21%, transparent);
    background-size: 20px;
}

.benefits_about {
    width: 100%;
    display: flex;
    flex-direction: column;    
}
    
.benefits_about:not(:last-child) {
    margin: 0 0 60px; 
}
    
.benefits_text {
    margin: -10px auto 0;
    width: 90%;
    font-size: 100%;
}

.bg_last{
    margin: 0 0 70px;        
}
    
    
.r_button {
    display: flex;
    flex-direction: column;
}
    
 .r_button_a {
     width: 100px;
    font-size: 90%;
}   

.r_button_a.part {
    margin: 0 20px;
}
    
.r_button.about {
    margin: 15px 0 0;
    width: 45%;
    display: flex;
    flex-direction: row;
    min-width: 340px;
}
    
.requirements ul li a {
    margin: 30px auto 0;
    padding: 0 20px;
    align-items: flex-end;
}    

.r_list {
    flex-direction: column;
} 
    
.r_list {
    width: 80%;
}

.r_button_s{
    padding: 2px 0;
    font-size: 90%;
}
    
.experience {
    margin: 10px 40px 3px 0;
}
    
.hello_work {
    margin: 0 auto 140px;
    font-size: 110%;
}

.accordion-008 summary {
    font-size: 110%;
}    
    
.accordion-008 p {
    font-size: 95%;
    line-height: 220%;
}

.accordion-008[open] p {
    width: 70%;
}
    
.slash {
    margin: 8px 12px 0 8px;
    width: 24px;
}   
    
.icon_comment {
    margin: 0px;
    display: flex;
    flex-direction: column;
    align-items: center;
} 
    
    
    
 .bg_top.flow {
    margin: 60px 0 14px;
}   
    
.flow_content {
    width: 90%;
    margin: 0 auto;
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.flow_box {
    width: 90%;
    max-width: unset;
    height: unset;
    margin: 0 auto;
    padding: 20px 5%;
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: row;
    align-items: center;
}
  
.flow_box img {
    margin: 4px auto 0;
    width: 75px;
}
    
.flow_box .number {
    margin: -18px auto;
    font-size: 220%;
}    
  
.flow_text {
    margin: 27px auto 0;
    font-size: 155%;
}    
    
.flow_arrow {
    margin: 15px auto 25px;
    max-width: 35px;
    width: 15%;
    rotate: 90deg;
}  
    
.flow_comment {
    margin: 40px auto;
    text-align: center;
    font-size: 100%;
    width: 90%;
}    
    
    
.sns_word{
    text-align: center;
    font-size: 120%;   
}

.instagram_r{
    width: 50px;
}

.facebook_r{
    width: 50px;
}
    
.news_c {
    margin: 50px auto;
    width: 100%;
}

.news_button_list {
    display: flex;
    flex-wrap: wrap;
    max-width: 1000px;
    justify-content: center;
    margin: 50px auto 0px;
}  

.news_symbol {
    margin: 0 10px 0 0;
    width: 40px;
    display: block;
    text-align: center;
    align-items: center;
    font-size: 22px;
    color: #fff;
    background-color: #E37161;
    transition: all 0.3s;
    font-weight: 500;
}

.news_list a {
    display: flex;
    margin: 20px 0 0px;
    padding: 0 10px;
    transition: .4s ease-in-out;
    flex-direction: row;
    align-items: center;
}
    
.page-numbers {
    border-radius: 50px;
    margin: 0px 22px 0px 0 !important;
    width: 50px;
    height: 50px;
    padding: 0px 0px 2px 19px !important;
    display: block;
    text-align: center;
    align-items: center;
    font-size: 25px !important;
    font-weight: 500;
    color: #fff !important;
    background-color: #E37161;
    transition: all 0.3s;
}    

.page-numbers.current {
    padding: 3px 0px 0px 0px !important;
    background-color: #FFA254;
}

.more_about {
    margin: 0 auto;
    width: 152px;
    padding: 0;
    position: relative;
    transition: all 0.3s;
    display: flex;
    align-items: center;
    font-size: 110%;
    color: #E37161;
}

.more_about img {
    margin: 0 0 0 20px;
    width: 18px;
    background-color: #E37161;
    padding: 15px 13px;
    border-radius: 50px;
}

.contact_about{
    margin: 3px 0;
    padding: 10px 0 10px 20px;
    color: #a7a7a7;
    background-color: #F0F0F0;
    border-radius: 5px;
}
    
.contact_info {
    margin: 20px 0 0px;
}

.about_privacy {
     margin: 70px auto 20px;
    text-align: center;
    font-size: 130%;
}
    
.privacy_list li {
    margin: 0 0 0 10px;
}
    
.privacy_list {
    margin: 0 auto;
    width: 80%;
    max-width: 600px;
    padding: 30px;
    border: 1px solid;
    font-size: 90%;
    line-height: 200%;
}

.privacy-ok {
    width: 100%;
    margin: 0 auto;
    padding: 30px 0;
    position: relative;
    overflow: hidden;
    text-align: center;
}

    
.check {
    margin: 0 auto;
    text-align: center;
    color: #fff;
    width: 250px;
    padding: 15px 5px;
    background-color: #D3D3D3;
    font-size: 130%;
}

.submit_text {
    font-size: 110%;
    margin: 50px auto 0;
    width: 100%;
    min-width: 100%;
    min-height: 240px;
}

    
}