@charset "utf-8";
@media screen and (min-width:1921px) and (max-width:3840px){
    .slide-fade img.company{
        object-position: 50% 70%;
    }
}
@media screen and (max-width:1200px){
    /*1200px delivery*/
    .farmer img.cone{
        width:260px;
    }
}
@media screen and (max-width:1024px){
    .slide-top, .slide-fade img{
        height:65vh;
    }
}
@media screen and (min-width:1000px) and (max-width:1150px){
    .recruit-top h1{
        white-space: nowrap;
    }
}
@media screen and (max-width:1000px){
    /*1000px common*/
    .pc{
        display: none;
    }
    .sp{
        display: block;
    }
    p, section.philosophy ul ul li{
        line-height: 1.6em;
    }
    .page-top{
        right:3vw;
    }
    .link-flow::before{
        width:auto;
    }
    .contact-btn_sp {
        display: block;
        margin:0 35px;
        padding: 8px 4%;
        font-size:14px;
        color: #fff;
        background-color: #d2171a;
        border-radius: 50px;
    }
    img.eyecatch{
        width:95vw;
        height:20vh;
        min-height:150px;
        margin:0 auto 50px;
    }
    img.catch{
        width:90vw;
        height:auto;
        aspect-ratio:16/9;
    }
    p.concept{
        margin:35px auto;
    }
    .h_type.non-ec{
        padding-top:100px;
    }
    ul.nav-anc{
        flex-flow: column;
        width:95vw;
        margin:50px auto 0;
        padding:0 0 50px;
    }
    ul.nav-anc li{
        width:100%;
        border-left:none;
        border-top:solid 1px #bfbcb1;
    }
    ul.nav-anc li:nth-last-of-type(1){
        border-right:none;
        border-bottom:solid 1px #bfbcb1;
    }
    ul.nav-anc li a{
        padding:15px 0;
        text-decoration: none;
    }
    /*1000px common aside*/
    aside.bottom-nav ul{
        display: flex;
        flex-flow: column;
    }
    aside.bottom-nav ul li{
        width:100%;
        height:auto;
    }
    aside.bottom-nav ul li:nth-of-type(odd){
        border-right:none;
    }
    aside.bottom-nav ul li .wrap{
        display: flex;
        justify-content: space-between;
        width:100%;
        padding:3% 5%;
    }
    aside.bottom-nav ul li a{
        justify-content: space-between;
        border:none;
        border-top:solid 1px #d2171a;
    }
    aside.bottom-nav ul li h2.h_type.center{
        width:50%;
        margin:0;
        text-align: left;
    }
    /*1000px header*/
    header nav, .scroll-nav .wrap{
        display: none;
    }
    .scroll-nav{
        height:50px;
    }
    .scroll-nav .box01 a.logo img{
        width:150px;
    }
    /*1000px footer*/
    footer{
        padding:50px 0 100px;
    }
    footer a.logo{
        margin:auto;
    }
    footer ul{
        flex-flow: column;
        width:auto;
        margin:35px auto 50px;
        text-align: center;
    }
    footer ul li{
        margin:10px 0;
        padding:5px;
    }
    footer small{
        margin:auto;
    }
    /*1000px index*/
    /*1000px slide*/
    .slide-top, .slide-top img{
        height:75vh;
    }
    .slide-top h2{
        width:90%;
    }
    /*1000px top menu*/
    .top-menu{
        padding:0 0 100px;
    }
    .top-menu h2{
        width:90vw;
        margin:50px auto;
        text-align: center;
    }
    .top-menu .service{
        margin:0 0 50px;
    }
    .top-menu .service, .top-menu .service.reverse{
        position: inherit;
        flex-flow: column;
    }
    .top-menu .service img{
        width:100%;
        height:auto;
        min-height:200px;
        aspect-ratio:14/9;
    }
    img.milk{
        height:auto;
    }
    .top-menu .service::after, .top-menu .service .box01{
        width:100%;
        height:auto;
    }
    .top-menu .service .box01, .top-menu .service.reverse .box01{
        width:100%;
        height:auto;
        align-items: center;
    }
    .top-menu .service .box01 .text, .top-menu .service.reverse .box01 .text{
        width:90%;
        max-width:700px;
        margin:auto 5%;
        padding:10% 0;
    }
    .top-menu .about, .top-menu .recruit{
        width:100%;
        margin:100px auto 0;
        padding:0;
    }
    .top-menu .about img, .top-menu .recruit img{
        width:100%;
        height:auto;
        min-height:200px;
        aspect-ratio:14/9;
    }
    .top-menu .about .box01, .top-menu .recruit .box01{
        padding:10% 5%;
    }
    .top-menu .about .box01 h3, .top-menu .recruit h3{
        text-align: center;
    }
    .top-menu .recruit{
        position: inherit;
        flex-flow: column;
        width:100%;
        margin:50px 0 0;
    }
    .top-menu .recruit::after{
        display: none;
    }
    .top-menu .recruit .box01{
        justify-content: center;
    }
    .top-menu .recruit .text{
        width:100%;
        margin:0;
    }
    /*1000px top info*/
    .top-info section.news{
        padding:50px 0;
    }
    .top-info section.news .box01{
        width:90vw;
    }
    ul.news li a{
        display: flex;
        flex-flow: column;
        line-height: 1.3em;
    }
    ul.news li span.date{
        font-size:14px;
    }
    /*1000px about*/
    section.about.concept{
        padding:0 0 25px;
    }
    section.greeting{
        padding:50px 0;
    }
    p.sign{
        margin:0 1em 0 0;
    }
    section.philosophy{
        padding:50px 0;
    }
    section.philosophy ul.wrap{
        width:90vw;
        margin:50px auto;
    }
    section.philosophy ul.wrap li.wrap{
        margin:20px 0;
    }
    section.philosophy ul ul{
        margin:20px 0 0;
    }
    section.philosophy ul ul li{
        margin:10px 0 10px 1em;
    }
    section.appeal{
        padding:50px 0;
    }
    section.appeal ul{
        flex-flow: row wrap;
        justify-content: space-around;
        width:90vw;
    }
    section.appeal ul li{
        width:49%;
    }
    section.appeal ul li img{
        width:75%;
        margin:0 auto 20px;
    }
    section.appeal ul li{
        margin:0 0 50px;
    }
    section.appeal ul li h3{
        margin:0 0 20px;
    }
    /*1000px news*/
    iframe.information-nav.info-news{
        height:1200px;
    }
    section.news, section.all-article{
        padding:50px 0;
    }
    ul.info-list{
        display: flex;
        flex-flow: column;
        grid-row-gap:15px;
        width:95vw;
        margin:35px auto;
    }
    ul.info-list li a{
        display: flex;
        flex-flow: row;
    }
    ul.info-list li img{
        width:40%;
    }
    ul.info-list li.info-box .title-box{
        width:60%;
    }
    ul.info-list li.info-box span.date{
        display: flex;
        flex-flow: column;
    }
    ul.info-list li.info-box span.date span{
        margin:5px 0;
    }
    .title-box.lower h2{
        line-height: 1.3em;
    }
    aside.category.lower{
        padding:50px 0 0;
    }
    aside.category.lower ul.nav-anc{
        margin:50px auto 0;
    }
    /*1000px business*/
    section.service{
        padding:75px 0;
    }
    section.service:nth-of-type(1){
        margin:50px 0 0;
    }
    section.service .cont{
        width:90vw;
        padding:25px 0 0;
    }
    section.service .cont .wrap{
        flex-flow: column-reverse;
        margin:25px 0 0;
    }
    section.service .cont .box.text{
        width:100%;
        padding:25px 0 0;
        background-size:30%;
        background-position: top right;
        aspect-ratio:inherit;
    }
    section.service .cont .box.text a{
        margin:35px auto;
    }
    section.service .cont img.sub{
        display: none;
/*
        width:100%;
        height:20vh;
        min-height:200px;
        margin:auto;
*/
    }
    section.service .slide-fade{
        width:95%;
        margin:auto;
    }
    section.service .slide-fade img{
        height:auto;
        aspect-ratio:16/9;
    }
    section.service .slide-fade .slick-dots{
        bottom:25px;
    }
    section.service .slide-fade .slick-dots li{
        margin:auto 5px;
    }
    section.service .slide-fade .slick-dots li button::before, section.service .slide-fade .slick-dots li button::after{
        width:35px;
        height:35px;
    }
    /*1000px business lower*/
    section.service_lower{
        padding:50px 0;
    }
    section.service_lower.reverse{
        padding:0 0 50px;
    }
    section.service_lower .wrap, section.service_lower.reverse .wrap{
        flex-flow: column-reverse;
        width:90vw;
    }
    section.service_lower .wrap img, section.service_lower .wrap .box01{
        width:100%;
    }
    section.service_lower h2{
        margin:20px 0;
    }
    section.service_lower .wrap .box01 a{
        margin:35px auto;
        padding:15px 0;
        text-align: center;
    }
    /*1000px contact*/
    article.order p.detail{
        width:80%;
        margin:50px auto;
        text-align: left;
    }
    section.order.form{
        margin:50px auto 0;
        padding:50px 0;
    }
    .form-wrap{
        width:95%;
        min-width:300px;
        margin:50px auto;
        padding:20px 0 50px;
    }
    .order-form{
        width:100%;
        margin:0 auto;
    }
    .order-form .form-box{
        flex-flow: column;
        justify-content: center;
        align-items: flex-start;
        margin:20px 1em;
    }
    .order-form .title-box{
        width:auto;
        margin:0 0 10px;
        text-align: left;
    }
    .order-form .ans-box, .order-form .ans-box.text input, .order-form .ans-box.text select, .order-form .ans-box.text textarea{
        width:95%;
        margin:auto;
    }
    /*1000px delivery*/
    section.delivery .box02{
        width:90%;
        margin:35px auto 0;
    }
    section.delivery .box02 h3{
        font-size:22px;
    }
    section.delivery .box02 span{
        text-align: center;
    }
    section.delivery .box02 p.detail{
        text-align: left;
    }
    section.delivery .box02 p br.sp{
        display: none;
    }
    /*1000px FAQ*/
    article.faq{
        padding:0 0 50px;
    }
    section.faq{
        width:95vw;
    }
    section.faq .wrap{
        padding:20px;
    }
    .farmer{
        width:90vw;
    }
    .farmer img.cone{
        width:220px;
        right:-30px;
    }
    /*1000px home delivery milk*/
    section.d-milk.concept{
        padding:0 0 50px;
    }
    section.d-milk.concept ul.nav-anc{
        padding:0 0 50px;
    }
    section.d-milk.flow{
        padding:50px 0;
    }
    ol.system{
        width:90vw;
    }
    ol.system li{
        margin:0 0 35px;
        background-size:20%;
    }
    ol.system li.sys03{
        background-size:10%;
    }
    ul.del-info li.top{
        width:31%;
    }
    ul.del-info li.bottom{
        width:48%;
    }
    ul.del-info li .wrap{
        margin:18px;
    }
    ul.del-info li.cooler{
        background-size:70%;
    }
    section.area .wrap{
        width:90vw;
    }
    /*1000px order*/
    .form-wrap{
/*        width:75vw;*/
    }
    section.order.outline{
        width:90vw;
    }
    section.order.outline .wrap{
        padding:35px;
    }
    .order-form .ans-box.jusyo div{
        flex-flow: column;
        align-items: flex-start;
    }
    .order-form .ans-box.jusyo div:nth-of-type(1){
        margin-top:25px;
    }
    .order-form .ans-box.jusyo div:nth-of-type(n+2){
        margin:15px 0 0;
    }
    .order-form .ans-box.jusyo div span:nth-of-type(1){
        width:auto;
        margin:0 0 10px;
    }
    .order-form .ans-box.jusyo div span:nth-of-type(2){
        margin:0;
    }
    .order-form .ans-box.jusyo #yubin{
        margin:0;
    }
    .order-form .ans-box.radio{
        display: flex;
        align-items: center;
    }
    .order-form .ans-box.radio label{
        margin-right:1em;
    }
    /*1000px outline*/
    section.company ul.type02{
        width:90vw;
    }
    section.company iframe{
        width:90%;
        height:auto;
        aspect-ratio:16/9;
    }
    section.history{
        width:90vw;
    }
    table.history{
        width:100%;
    }
    section.base h3{
        width:90vw;
    }
    section.base ul{
        width:90vw;
    }
    section.base ul li{
        flex-flow: column;
        justify-content: flex-start;
        height:auto;
    }
    section.base ul li .box01{
        margin:10px 0 0;
    }
    section.base ul li .box01, section.base ul li img{
        width:100%;
    }
    section.base ul li .box01 p{
        margin:10px 0 0;
    }
    /*1000px policy*/
    article.policy p.detail{
        width:90vw;
        margin:50px auto;
        text-align: left;
    }
    /*1000px restaurant*/
    section.restaurant address{
        width:90%;
    }
    /*1000px recruit*/
    .recruit-top .title-box .ribbon span{
        margin:0 20px 0 0;
    }
    .recruit-company .wrap{
        flex-flow: column-reverse;
    }
    .recruit-company .wrap .box01, .recruit-company .wrap .box02{
        width:100%;
    }
    .recruit-company .wrap .box02{
        margin:0 0 50px;
    }
    .recruit-greeting .wrap{
        flex-flow: column-reverse;
    }
    .recruit-greeting .wrap p, .recruit-greeting .wrap img{
        width:100%;
    }
    .recruit-greeting .wrap img{
        margin:0 0 25px;
    }
    .recruit-joblist ul{
        width:90vw;
    }
    /*1000px recruit lower*/
    main.recruit img.catch{
        height:auto;
        aspect-ratio:16/9;
    }
    .recruit-lower.melit ul{
        width:90vw;
    }
    .recruit-lower.interview .wrap{
        width:90vw;
    }
    .recruit-lower.schedule ul{
        width:90vw;
    }
    .recruit-lower.overview .wrap{
        width:90vw;
    }
}
@media screen and (max-width:768px){
    .farmer img.farmer{
        height:25vh;
        min-height:220px;
    }
    .farmer img.cone{
        width:160px;
        right:-10px;
    }
    /*768px news*/
    iframe.information-nav.info-news{
        height:850px;
    }
}
/*mobile*/
@media screen and (max-width:500px){
    /*500px common*/
    .page-top img{
        width:8px;
    }
    .top-menu .service, .top-menu .service.reverse{
        width:95%;
        margin:0 auto 50px;
    }
    .top-menu .service .box01 .text, .top-menu .service.reverse .box01 .text{
        padding:15px 0;
    }
    .top-menu .service .box01 h3{
        font-size: 16px;
        margin-bottom:12px;
    }
    .top-menu .service .box01 h3.h_type span{
        font-size:12px;
    }
    .link-flow{
        font-size:14px;
    }
    .link-flow::before{
        height:0.5px;
    }
    aside.bottom-nav ul li h2.h_type.center{
        font-size:18px;
    }
    aside.bottom-nav ul li .link-flow{
        font-size:14px;
    }
    footer ul{
        font-size:14px;
    }
    footer small{
        font-size:12px;
    }
    /*500px about*/
    img.catch.greeting{
        height:380px;
        object-position: 60% 50%;
    }
    section.appeal ul{
        flex-flow: column;
    }
    section.appeal ul li{
        width:100%;
        text-align: left;
    }
    section.appeal ul li img{
        width:100%;
    }
    section.appeal ul li h3.center{
        text-align: left;
    }
    /*500px business*/
    section.service{
        padding:50px 0;
    }
    section.service .cont img.sub{
/*        width:75vw;*/
    }
    section.service .cont .wrap{
        margin:0;
        flex-flow: column-reverse;
    }
    section.service .cont img.sub{
/*
        width:100%;
        height:120px;
        min-height:inherit;
        margin:25px 0 0;
*/
    }
    section.service .slide-fade img{
        aspect-ratio:4/3;
    }
    section.service .slide-fade .slick-dots{
        bottom:10px;
    }
    section.service .slide-fade .slick-dots li{
        margin:auto 5px;
        width:25px;
        height:25px;
    }
    section.service .slide-fade .slick-dots li button::before, section.service .slide-fade .slick-dots li button::after{
        font-size:35px;
        width:25px;
        height:25px;
    }
    section.service_lower .wrap .box01 a, section.service .cont .box.text a{
        display: block;
        width:auto;
        padding:15px 0;
        text-align: center;
        border:solid 1px #bfbcb1;
    }
    /*500px delivery*/
    section.delivery .box02 p br.sp{
        display: block;
    }
    ul.del-info{
        flex-flow: column;
    }
    ul.del-info li{
        min-height:inherit;
    }
    ul.del-info li .wrap{
        margin:25px;
    }
    ul.del-info li.top, ul.del-info li.bottom{
        width:100%;
    }
    ul.del-info li.cooler{
        background-size:50%;
    }
    ol.system{
        margin:50px auto;
    }
    ol.system li.sys01 a, ol.system li.sys03 a{
        display: block;
        margin:25px auto;
        padding:15px 0;
        text-align: center;
        border:solid 1px #bfbcb1;
    }
    ol.system li.sys02{
        margin:0;
        padding:0;
    }
    ol.system li h3{
        width:75%;
    }
    section.area{
        padding:50px 0;
    }
    section.area .wrap img.area-pc{
        display: none;
    }
    section.area .wrap img.area-sp{
        display: block;
        margin:35px 0 0;
    }
    p.area-sp{
        display: block;
        margin-bottom:35px;
    }
    .farmer{
        margin:15px auto 0;
    }
    .farmer img.farmer{
        height:15vh;
        min-height:125px;
    }
    .farmer img.cone{
        width:120px;
    }
    /*500px order*/
    article.order p.detail{
        width:90vw;
        margin:50px auto;
    }
    section.order.outline{
        width:90vw;
        margin:0 auto 50px;
    }
    section.order.outline .wrap{
        padding:25px 15px;
    }
    section.order.outline .box01.first{
        margin:0 0 25px;
        padding:0 0 25px;
    }
    section.order.outline ol{
        width:auto;
        margin:35px 0 0;
    }
    section.order.outline ol li{
        margin:35px 0 0;
    }
    section.order.outline ol li a{
        display: block;
        padding:15px 0;
        text-align: center;
        border:solid 1px #bfbcb1;
    }
    article.order ul.alert{
        width:90%;
    }
    ul.alert li{
        margin-bottom:10px;
    }
    .order-form .ans-box.radio{
        flex-flow: column;
        align-items: flex-start;
        margin-top:15px;
    }
    .order-form .ans-box.radio span.radio{
        margin-bottom:10px;
    }
    /*500px contact*/
    .form-wrap{
        width:95%;
    }
    /*500px outline*/
    section.company ul.type02{
        margin:50px auto 0;
    }
    section.company ul.type02 li{
        align-items: baseline;
    }
    section.company ul.type02 li h3{
        margin:0 0 0 10px;
    }
    section.history{
        padding:50px 0 100px;
    }
    table.history th, table.history td{
        display: block;
        width:92%;
        margin:auto;
        padding:1em 0;
    }
    table.history th{
        padding:1em 4%;
    }
    table.history th, table.history td .month{
        text-align: left;
    }
    table.history td .month{
        width:100%;
        text-align: left;
    }
    section.base{
        padding:50px 0;
    }
    section.base h3{
        margin:0 auto 35px;
    }
    section.base h4{
        font-size:16px;
    }
    section.base ul li .box01 p, section.base ul li .box01 a{
        font-size:14px;
    }
    /*500px policy*/
    .h_type.middle2{
        line-height: 1.3em;
    }
    /*500px products*/
    section.product.concept .nav-anc{
        padding:0 0 75px;
    }
    section.product.list{
        padding:50px 0;
    }
    ul.product{
        grid-template-columns: repeat(2, 1fr);
        width:90vw;
        padding:50px 0 0;
    }
    ul.product li h3{
        margin:8px 0;
        font-size:14px;
    }
    section.item{
        width:90vw;
    }
    section.item p.concept{
        text-align: left;
    }
    section.item p.concept span{
        text-align: center;
    }
    section.item table{
        width:100%;
        margin:100px auto;
    }
    section.item ul.nav-anc{
        padding:0;
    }
    /*500px restaurant*/
    section.restaurant address{
        flex-flow: column;
        width:90%;
        padding:10px 0;
    }
    section.restaurant address p{
        margin:1em;
    }
    /*500px recruit*/
    main.recruit h2{
        margin-bottom:35px;
    }
    .recruit-top{
        height:55vh;
        min-height:320px;
        background-position: 75% 50%;
    }
    .recruit-top .title-box{
        width:80%;
    }
    .recruit-merit{
        padding:50px 0;
    }
    .recruit-merit ul.type01{
        width:90vw;
        margin:50px auto;
    }
    .recruit-merit ul.type01 li{
        margin:50px 0;
    }
    .recruit-company{
        padding:50px 0;
    }
    .recruit-company .wrap{
        width:90vw;
    }
    .recruit-company .wrap .box01 img{
        height:auto;
        aspect-ratio:16/9;
    }
    section.recruit-greeting{
        padding:50px 0;
    }
    .recruit-greeting .wrap{
        width:90vw;
    }
    .recruit-greeting .wrap img{
        aspect-ratio:16/9;
    }
    section.recruit-joblist{
        padding:50px 0;
    }
    .recruit-joblist ul li a{
        flex-flow: column;
    }
    .recruit-joblist ul li img{
        width:100%;
        height:auto;
        aspect-ratio:16/9;
    }
    .recruit-joblist ul li .box01{
        width:100%;
    }
    .recruit-joblist ul li span{
        margin-bottom:20px;
    }
    .recruit-form{
        width:90vw;
        padding:50px 0;
    }
    .recruit-form form{
        padding:25px 0;
    }
    .recruit-form .box01{
        flex-flow: column;
        align-items: flex-start;
        padding:15px 25px;
    }
    .recruit-form .box01 label{
        width:auto;
        margin:0 0 10px;
    }
    .recruit-form .box01 input{
        width:95%;
    }
    .submit-btn{
        margin:35px auto 0;
    }
    /*recruit lower*/
    .recruit-lower.detail .box01{
        width:90vw;
    }
    .recruit-lower.detail img{
        margin:50px 0;
    }
    .recruit-lower.detail img.catch{
        height:120px;
        aspect-ratio:inherit;
    }
    .recruit-lower.content{
        padding:0 0 50px;
    }
    .recruit-lower.content ul li{
        text-indent: -1em;
        margin-left:1em;
    }
    .recruit-lower.melit{
        padding:50px 0;
    }
    .recruit-lower.melit ul li{
        align-items: flex-start;
    }
    .recruit-lower.melit ul li img{
        width:60px;
    }
    .recruit-lower.melit ul li .box01{
        margin:15px 0 0 5px;
    }
    .recruit-lower.interview{
        padding:50px 0;
    }
    .recruit-lower.interview .box01, .recruit-lower.interview .box01.reverse{
        flex-flow: column-reverse;
        margin:1em 0;
    }
    .recruit-lower.interview img.catch{
        margin:0 0 1em;
    }
    .recruit-lower.interview .title{
        margin:0 0 35px;
    }
    .recruit-lower.interview .box01 p{
        width:100%;
    }
    .recruit-lower.interview .box01 img{
        width:100%;
        height:auto;
        margin-top:1em;
        aspect-ratio:16/9;
    }
    .recruit-lower.schedule{
        padding:50px 0;
    }
    .recruit-lower.schedule ul li .time{
        font-size:14px;
    }
    .recruit-lower.schedule ul li p{
        width:90%;
        padding:1em;
    }
    .recruit-lower.overview{
        padding:50px 0;
    }
    .recruit-lower.overview ul.type02 li{
        flex-flow: column;
        align-items: flex-start;
    }
    .recruit-lower.overview ul li h3{
        width:auto;
        padding:0;
    }
    .recruit-lower.overview ul li p{
        width:95%;
        margin:auto;
    }
    /*500px news*/
    li.info-box h3{
        -webkit-line-clamp: 1;
    }
    iframe.information-nav.info-news{
        height:600px;
    }
}