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

html{
    font-size:62.5%;/*16px*62.5%=10px*/
    background:url("../images/html_bg.jpg"),repeat;
}
body{
    font-size:1.4rem;
    line-height: 1.5;
    color:#000;
    font-family: 'Noto Serif JP', 游明朝,"Yu Mincho",YuMincho,"Hiragino Mincho ProN",HGS明朝E,メイリオ,Meiryo,serif;
	font-feature-settings : "palt"; /*効かない　WEBフォントは効かない？講師相談済み*/
    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:antialiased;
}
a{color:#000;}
img{
    max-width: 100%;
    height: auto;
}

/* ------------共通部------------- */
.display_sp{}
.display_sp_02{}
.display_pc{display:none;}
.display_pc_02{display: none;}
/* -----768------1240---------
   sp-----|
   sp_20-----------|
          pc------------------
                   pc_02------
*/

.appeal{
    color:#c30d23;
}
.order_button{
    padding: 0 10px;
}

/* ------------ヘッダ------------- */
header{
    padding: 30px 0 24px;
}
header .logo{
    text-align: center;
}
header .logo img{
    width:30%;
    min-width: 143px;
}

/* ------------ヒーロー------------- */
.hero{
    box-sizing: border-box;
    width: 100%;
    padding: 0 10px;
}
.hero .inner{
    position: relative;
    box-sizing: border-box;
    width: 100%;
    height: 107vw;
    min-height:400px;
    background-image:url("../images/main_sp.jpg");
    background-size: cover;
}
.hero .inner .word01{
    width: 40%;
    min-width: 142px;
    position: absolute;
    left: 50%;
    top:50%;
    transform: translate(-50%,-50%);
}
.hero .inner .word02{
    width: 57%;
    min-width:206px;
    position: absolute;
    left: 50%;
    bottom:12px;
    transform:translateX(-50%);
}

/* ------------スグ食べとは------------- */
.about{
    position: relative;
    padding-bottom: 112px;
}
.about .inner{
    padding: 40px 30px 0;
}
.about .title{
    padding-bottom: 20px;
}
.about .text{
    margin-bottom: 20px;
}
.about .image{
    margin-bottom: 60px;
}
.about .yasai{
    position: absolute;
    left:50%;
    bottom:0;
    transform:translateX(-50%);
}
.about .yasai img{
    width: 191px;
}

/* ------------3つの理由------------- */
.reason{
    padding: 47px 20px;
    background-image:url("../images/3reason_bg01.jpg");
    background-position: top center;
    background-size: cover;
}
.reason .title{
    text-align: center;
    margin-bottom: 44px;
}
.reason .info{
    background-image:url("../images/3reason_bg03.png");
    background-repeat: repeat;
    padding: 0 20px 47px;
    margin-bottom: 32px;
    text-align: center;
    box-shadow: 0px 3px 7px 0px rgba(0, 0, 0, 0.3);
}
.reason .info .info_num{
    position: relative;
    top:-15px;
    display: inline-block;
    background-color: rgba(0,0,0,0.95);
    box-shadow: 0px 3px 7px 0px rgba(0, 0, 0, 0.3);
    width: 30px;
    height: 30px;
    font-size:2.1rem;
    color:#fff;
}
.reason .info h3{
    margin-bottom: 21px;
}
.reason .info h3 img{
    width: 34vw;
    min-width:130px;
}
.reason li:nth-of-type(2) .info h3 img{
    width: 35.8vw;
    min-width: 135px;
}
.reason li:nth-of-type(3) .info h3 img{
    width: 52vw;
    min-width:200px;
}
.reason .info .text{
    text-align:justify;
}

/* ------------お試しセット------------- */
.trial{
    margin-top: -48px;
    background-image: url("../images/trialset_bg.png");
    background-repeat: repeat-x;
    background-position: center 47px;
    padding-bottom: 48px;
}
.trial.lower{
    padding-bottom: 80px;
}
.trial h2{
    margin-bottom: 32px;
}
.trial .item{
    padding: 0 20px;
    margin-bottom: 60px;
}
.trial .item li{
    margin-bottom: 32px;
}
.trial .item li:last-of-type{
    margin-bottom: 0px;
}

/* ------------品質保証------------- */
.quarity{
    position: relative;
    padding: 40px 0 80px;
}
.quarity h2 img{
    position: absolute;
    width: 15%;
    max-width:75px;
    top:0px;
    right:40px;
}
.quarity .contents{
    box-sizing: border-box;
    width : calc(100% - 40px) ;
    background-color: rgba(255, 255, 255,0.60);
    box-shadow: 0px 5px 5px 0px rgba(0, 0, 0, 0.1);
    margin: auto;
    padding: 40px 20px;
}
.quarity .contents .title{
    width: 70%;
    margin-bottom: 20px;
}
.quarity .contents .text{
    font-size:1.2rem;
}

/* ------------農家------------- */
.farmers{
    background-color: rgba(255,255,255,0.85);
    padding-bottom: 54px;
}
.farmers .backimage{
    width: 100%;
    height: 53vw;
    background-image:url("../images/farmers_bg_sp.jpg");
    background-position: top center;
    background-size: cover;
}

/* このブロックのヘッダ部分--*/
.farmers .title_info{
    position: relative;
}
.farmers .title_info .title_01{
    position: absolute;
    top:-17vw;
    box-sizing: border-box;
    width: 50%;
    height: 50vw;
    background-color: #111;
    text-align: center;
    padding: 5vw;
    z-index:100;
}
.farmers .title_info .title_01 img{
    height: 100%;
}
.farmers .title_info .title_02 img{
    position: relative;
    left:75%;
    transform: translateX(-50%);
    max-width: 16vw;
    padding: 40px 0;
}
.farmers .title_info .vegitablesimage{
    position: absolute;
    top:40px;
    right: 35vw;
    width: 57vw;
    height: auto;
    z-index:10;
}

/* 農家紹介部分--*/
.farmers .contents li .item_title{
    position: relative;
    margin-bottom: 20px;
}
.farmers .contents li{
    margin-bottom: 54px;
}
.farmers .contents li:last-of-type{
    margin-bottom: 0px;
}
.farmers .contents li .item_title .item_info{
    position: absolute;
    bottom:0;
    right:30px;
}
.farmers .contents li:nth-child(2n) .item_title .item_info{
    left:30px;
    right:0px;
}
.farmers .contents li .item_text{
    padding: 0 30px;
    text-align: justify;
}

/* ------------よくある質問------------- */
.faq{
    background-image: url("../images/faq_bg.jpg");
    background-repeat: repeat;
    padding: 40px 20px 54px;
}
.faq h2{
    margin-bottom: 32px;
}
.faq .info{
    background-color: rgba(0,0,0,0.20);
    margin-bottom: 40px;
    padding: 32px 20px 40px;
    text-align: center;
    color:#fff;
}
.faq .info:last-of-type{
    margin-bottom: 0;
}
.faq .info .num{
    position: relative;
    font-size:1.25rem;
    margin-bottom: 12px;
}
.faq .info .num img{
    width:40px;
    height:auto;
}
.faq .info .num span{
    position: absolute;
    left:50%;
    top:48%;
    transform: translate(-50%,-50%);
}
.faq .info h3{
    font-size:1.6rem;
    padding-bottom: 12px;
    margin-bottom: 32px;
    border-bottom:dotted 1px #fff;
}
.faq .info .answer .main_text{
    font-size:1.6rem;
    margin-bottom: 20px;
}
.faq .info .answer .sub_text{
    font-size:1.2rem;
    text-align: left;
}

/* ------------フッター------------- */
footer{
    background-image: url("../images/footer_bg.jpg");
    background-repeat: repeat;
    box-shadow: 0px 5px 5px 0px rgba(0, 0, 0, 0.1);
    text-align: center;
    padding: 25px 0 20px;
}
footer .logo{
    margin-bottom: 10px;
}
footer .logo img{
    width: 30%;
    min-width: 143px;
    
}
footer small{
    font-size:1.0rem;
}


/* ------------------------------------------------------
 *                          PC用(768以上）
 * ----------------------------------------------------- */

@media screen and (min-width: 768px){
    
    body{
        font-size:1.6rem;
    }
    
    /* ------------共通部------------- */
    .display_pc{display:inline;}
    .display_pc_02{display: none;}
    .display_sp{display: none;} 
    .display_sp_02{display: inline;}
    /* -----768------1240---------
       sp-----|
       sp_20-----------|
              pc------------------
                       pc_02------
    */
    
    
    .inner{
        max-width:824px;
        margin:auto;
    }
    .order_button{
        display: block;
        margin:auto;
        margin-top: -7px;
        max-width:824px;
        padding: 0;
    }
    
    /* ------------ヘッダ------------- */
    header{
        padding: 0;
    }
    header .inner{
        display: flex;
        justify-content: space-between;
        max-width:1028px;
    }
    header .logo{
        text-align: left;
        width: 213px;
        padding-top: 50px;
    }
    header .logo img{
        width: 100%;
        max-width: none;
    }
    @media screen and (max-width: 1108px){
        header .inner{
            padding: 0 40px;
        }
    }
    /*ナビ*/
    header .navigation ul{
        display: flex;
        flex-direction : row-reverse;
    }   
    header .navigation ul li{
        display: inline-block;
    }
    header .navigation ul li a{
        display: block;
        width: 54px;
        height: 190px;
        background-image:url("../images/topnavi.png");
        background-repeat:no-repeat;
        background-position: -162px top;
    }
    header .navigation ul li a:hover{background-position: -162px bottom; }
    header .navigation ul li:nth-child(2) a{background-position: -108px top;} 
    header .navigation ul li:nth-child(2) a:hover{background-position: -108px bottom;}  
    header .navigation ul li:nth-child(3) a{background-position: -54px top;} 
    header .navigation ul li:nth-child(3) a:hover{background-position: -54px bottom;}  
    header .navigation ul li:nth-child(4) a{background-position: 0px top;}
    header .navigation ul li:nth-child(4) a:hover{background-position: 0px bottom;}
    header .navigation ul li a span{opacity: 0;}

    
    /* ------------ヒーロー------------- */
    hero{
        padding: 0 20px;
    }
    .hero .inner{
        position: relative;
        max-width: inherit;
        height: 600px;
        background-image:url("../images/main_pc.jpg");
    } 
    .hero .inner .contents{
        display: block;
        max-width:1028px;
        height: 100%;
        margin: 0 auto;
    }
    .hero .inner .word01{
        width: 180px;
    }
    .hero .inner .word02{
        width: 244px;
        bottom:20px;
    }
    .hero .inner .word03{
        position: relative;
        display: block;
        width: 64px;
        height: 100%;
        background-color: rgba(0,0,0,0.95);
        margin-left: auto;
    }
    .hero .inner .word03 img{
        position: absolute;
        top:50%;
        left:50%;
        transform: translate(-50%,-50%);
    }
    @media screen and (max-width: 1108px){
        .hero .inner .word03{
            margin-right:40px;
        }
    }
        
    /* ------------スグ食べとは------------- */
        .about{
            padding-bottom: 160px;
        }
        .about .inner{
            display: flex;
            flex-direction : row-reverse;
            justify-content: space-between;
            padding: 110px 0 0;
        }
        .about .inner .contents{
            display: flex;
            flex-direction : row-reverse;
            height: 460px;
        }
        .about .inner .contents .title{
            margin-right: -35px;
        }
        .about .inner .contents .text{
            padding: 40px 20px 0 0;
        }
        .about .inner .image{
            width: 288px;
            background-image:url("../images/about_image01.png");
            background-repeat: no-repeat;
            background-position: center bottom;
            margin-bottom: 0;
        }
        .about .inner .image img{
            padding-top: 40px;
        }
        .about .yasai{
            position: relative;
            display: block;
            width:816px;
            margin:auto;
            left:auto;
            transform: translateX(0);
        }
        .about .yasai img{
            display: block;
            margin-left: auto;
            margin-top: -110px;
            width: 359px;
        }

    
    
        /* ------------3つの理由------------- */
        .reason{
            padding: 120px 0 120px;
            background-image: url("../images/3reason_bg02.png"),url(../images/3reason_bg01.jpg);
            background-position: center top , center top;
            background-size: auto ,cover;
            background-repeat: repeat-x , no-repeat;
        }
        .reason .inner{
            max-width: 1028px;
        }
        .reason .inner .title{
            margin-bottom: 80px;
        }
        .reason .inner .title img{
            width: 456px;
        }
        .reason .contents ul{
            display: flex;
            justify-content: space-between;
            padding: 0 20px;
        }
        .reason .contents ul li{
           width: 32%;
        }
        .reason .contents .info{
            max-width:285px;
            margin-bottom: 0;
            padding-bottom: 48px;
        }
        .reason .info .info_num{
            top:-25px;
            font-size:3.5rem;
            width: 50px;
            height: 50px;
        }
        .reason .info h3{
            padding-top: 10px;
            margin-bottom: 32px;
        }  
        .reason .info h3 img {
            width: 133px;
            min-width: inherit;
        }
        .reason li:nth-of-type(2) .info h3 img {
            width: 140px;
            min-width: inherit;
        }
        .reason li:nth-of-type(3) .info h3 img {
            width: 206px;
            min-width: inherit;
        }  
    
        /* ------------お試しセット------------- */    
    .trial{
        margin-top: 0;
        background-position: center top;
        padding: 120px 0 88px;
    }
    .trial h2{
        margin-bottom: 56px;
    }
    .trial .inner .item{
        display: flex;
        justify-content: space-between;
        margin-bottom: 56px;
        padding: 0;
    }
    .trial .inner .item li{
        margin-right: 20px;  
    }
    .trial .inner .item li:last-of-type{
        margin-right: 0;
    }
    .trial .item li{
        margin-bottom: 0;
    }
    
    /* ------------品質保証------------- */
    .quarity{
        margin-top: 28px;
        padding:0 0 160px;
    }
    .quarity .inner{
        position: relative;
    }
    .quarity h2 img{
        width: 123px;
        max-width: inherit;
        left:80px;
        right:0;
        top:-28px;
    }
    .quarity .contents{
        padding: 56px 72px 80px 244px;
        width: 100%;
        min-height:435px;
    }
    .quarity .contents .title{
        width: 100%;
        margin-bottom: 32px;
    }
    .quarity .contents .text{
        font-size:1.6rem;
    }
    
    
    
    /* ------------農家------------- */
    .farmers{
        padding-bottom: 160px;
    }
    .farmers .backimage{
        height: 400px;
        background-image: url(../images/farmers_bg_pc.jpg);
        background-position: center -200px;
        background-repeat: no-repeat;
/*        background-attachment: fixed;*/
    }
    .farmers .title_info{
        width: 286px;
        left:50%;
        margin-top:-143px;
        transform: translate(-424px);
        z-index:100;
    }
    .farmers .title_info .title_01{
        position: relative;
        top:0;
        width: 286px;
        height: 286px;
        padding: 48px;
    }
    .farmers .title_info .title_02 img{
        display: block;
        left:0;
        transform: none;
        max-width: none;
        margin: auto;
        z-index:110;
    }
    .farmers .title_info .vegitablesimage{
        width:971px;
        top:-160px;
        left:50%;
        max-width: none;
        transform: translate(-600px);
    }
    
    .farmers .contents{
        width: 816px;
        margin: 0 auto;
        margin-top: -510px;
    } 
    .farmers .contents ul{
        width: 61%;
        margin-left: auto;
    }
    /* ------------よくある質問------------- */
    .faq{
        padding: 120px 0;
    }
    .faq h2{
        text-align: center;
        margin-bottom: 80px;
    }
    .faq h2 img{
        height: 80px;
    }
    .faq .info{
        margin-bottom: 48px;
        padding: 45px 90px 72px;
    }
    .faq .info .num{
        font-size:2.0rem;
        margin-bottom: 20px;
    }
    .faq .info .num img{
        width: 47px;
    }
    .faq .info .num span{
        top:43%;
    }
    .faq .info h3{
        font-size:2.4rem;
        margin-bottom: 42px;
    }
    .faq .info .answer .main_text{
        font-size:2.4rem;
    }
    .faq .info .answer .sub_text{
        font-size:1.6rem;
    }
    
        
    /* ------------フッター------------- */
    footer{
        min-height:200px;
    }
    footer .inner{
        display: flex;
        justify-content: space-between;
        padding: 56px 0;
    }
    footer .logo img{
        width: 286px;
    }
    footer small{
        font-size:1.2rem;
        padding-bottom: 20px;
        margin-top: auto;
    }
    
}





/* ------------------------------------------------------
 *                          PC用(1240以上）
 * ----------------------------------------------------- */

@media screen and (min-width: 1240px){
    
    /* ------------共通部------------- */
    .display_pc{display:inline;}
    .display_pc_02{display: inline;}
    .display_sp{display: none;} 
    .display_sp_02{display: none;}
    

    .farmers .contents{
        width: 1240px;
        margin: auto;
        margin-top: -496px;
        z-index: 90;
    }
    .farmers .contents ul{
        margin-left: auto;
        width: 100%;
    }
    .farmers .contents ul li{
        position: relative;
        width: 710px;
        height: 460px;
        margin-left: auto;
        margin-bottom: 80px;
    }
    .farmers .contents ul li:nth-child(2){
        width: 1028px;
        height: 300px;
    }
    .farmers .contents ul li .item_title .item_title__images{
        position: absolute;
        right:0;
        width: 286px;
    }
    .farmers .contents ul li:nth-child(2) .item_title .item_title__images{
        width: 605px;
        height: 300px;
        left:0;
    }
    .farmers .contents ul li .item_title .item_title__title{
        position: relative;
        margin-top: 240px;
        padding-top: 48px;
    }
    .farmers .contents ul li:nth-child(2) .item_title .item_title__title{
        display: block;
        margin-left: auto;
        margin-top: 0;
    }
    .farmers .contents ul li .item_title .item_info{
        position: relative;
        margin-top: 4px;
        right:0;
        left:140px;
    }
    .farmers .contents ul li:nth-child(2) .item_title .item_info{
        display: block;
        left:0;
        margin-left: auto;
        margin-top: 0;
        text-align: right;
    }
    .farmers .contents ul li .item_text{
        width: 392px;
        padding: 0;
    }
    .farmers .contents ul li:nth-child(2) .item_text{
        width: 392px;
        margin-left: auto;
    }
}