@charset "utf-8";

html {
    font-size: 100%;
}

body {
    font-family: sans-serif;
    margin: 0 auto;
    /*max-width: 1366px;*/
    -webkit-tap-highlight-color: rgba(0,0,0,0);
}

a{
    color: #3a1a0c;
    text-decoration: none;
    cursor: pointer;
}

button{
    outline:none !important;
}

p {
    color: #3a1a0c;
}

h1{
    text-align: center;
    font-weight: 400;
}

h2,h3 {
    /*color: #000;*/
}

h2 {
    font-size: 2.1rem;
    font-weight: bold;
    margin-top: 70px;
    padding: 0 20px;
    text-align: center;
}

dd{
    margin-left: 0;
}
img{
    max-width: 100%;
    font-family: 'object-fit: cover;';
    -o-object-fit: cover;
    object-fit: cover;
}
iframe{
    width: 100%;
}
.no-cover{
    font-family: 'object-fit: unset;';
    -o-object-fit: unset;
    object-fit: unset;   
}

.bold {
    font-weight: bold;
}

#wrapper{
    clear:both;
    position: relative;
}
#back-top{
    position: absolute;
    bottom: 0;
    right: 50px;
}
header{
    position: fixed;
    background: rgba(255,255,255,0.8);
    z-index: 3;
    width: 100%;
    padding: 0.8em 1.2em;
    -webkit-box-shadow: 0px 4px 4px -2px rgba(0,0,0,.2);
    box-shadow: 0px 4px 4px -2px rgba(0,0,0,.2);
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
}

.site-logo img{
    max-width: 180px;
    border: none;
}
.readmore {
    display: none;
}
#main-img img{
    width: 100%;
}

#page-top {
    position: absolute;
    right: 70px;
    top: 52px;
}

.header-flex,#global_nav{
    display:-webkit-box;
    display:-ms-flexbox;
    display:flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
            align-items: center;
    height: 5rem;
}
#global_nav{
  margin-left:auto;
}
#global_nav a:hover,#global_nav a:active{
    color:#94c947;
}
#global_nav > ul{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    list-style: none;
    margin: 0;
}
#global_nav > ul > li{
    font-size: .9em;
}
#global_nav > ul > li:not(:last-child):after{
    border-right: 2px solid #000;
    content: "";
    margin: 0 1.5em;
    font-size: .8em;

}

#mobile-menu{
    display:none;
}
#mobile-menu button{
    position: absolute;
}


.drawer-hamburger{
    top: 0;
    bottom: 0;
    padding: 0 .75rem;
    margin: auto 0;
    /*height: 2.5em;*/
}
.drawer-hamburger-icon{
    margin-top: 0;
    -webkit-transition: unset;
    -o-transition: unset;
    transition: unset;
}
.drawer-hamburger-icon, .drawer-hamburger-icon:after, .drawer-hamburger-icon:before{
    border-radius: 50px;
    height: 3px;
}
.drawer-menu-item:hover{
    text-decoration: none;
}
.drawer--left.drawer-open .drawer-hamburger{
     background: rgba(255,255,255,0.8); 
}

/*.drawer--left .drawer-nav{
    position: absolute;
    width: 100vw;
    height: auto;
    left:-100%;
    top: 66.55px;
    background-color: #e7e3dc;
}
.drawer-menu-item:hover{
    text-decoration: none;
}
.drawer-open .drawer-hamburger-icon{
    background-color: black;
}
.drawer-open .drawer-hamburger-icon:before,.drawer-open .drawer-hamburger-icon:after{
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
}
.drawer-open .drawer-hamburger-icon:before{
    top: -10px;
}
.drawer-open .drawer-hamburger-icon:after{
    top: 10px;
}
.drawer--left.drawer-open .drawer-hamburger{
    left:0;
}
.drawer-menu-item {
    font-size: 1.3rem;
    font-weight: 500;
    color: #584236;
}
.drawer-menu li:not(:last-child){
    border-bottom: 1px solid #584236;
}*/

.sns-icon{
    display:block;
    margin-right: 1em;
}
.sns-icon img{
    width: 2em;
}

#farm-experience{
    width: 72vw;
    max-width: calc(1020px + 3vw);
    margin: 2.5rem auto;
}
#farm-experience strong,#farm-experience p{
    margin: 0;
}
#farm-experience strong{
    font-size: 1.3rem;
}
#farm-experience p{
    width: 50%;
}
#farm-experience p:nth-of-type(2){
    margin-left: 3em;
}
#farm-experience > div,#section-2 > div,#section-3,[id*="-area"] > div{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
}
[id*="-area"] > div{
    -webkit-box-pack: start;
        -ms-flex-pack: start;
            justify-content: start;
}

#section-2{
    background-color: #eee;
}
#section-2 > div{
    width: 72vw;
    max-width: calc(1020px + 3vw);
    margin: 0 auto;
    padding: 3vw 0;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
}
#section-2 > div > div{
    position: relative;
    width: 23vw;
    width: calc(33.33333% - 1vw);
    max-width: 340px;
    background-color: #fff;
    margin-bottom: 1.5vw;
}
#section-2 > div > div:not(:nth-of-type(3n)){
    margin-right: 1.5vw;
}
#section-2 > div > div:last-child{
    margin-bottom: 0;
}
#section-2 > div > div #fb-pattern-1_text > h3{
    min-height: auto;
}
#section-2 > div > div:not(.fb-pattern-1):after {
    content: "";
    display: block;
    height: 2em;
}
#section-2 > div > div img{
    width: 100%;
}
#section-2 > div > div h3,#section-2 > div > div p{
    padding: 0 1em;
}
#section-2 > div > div h3 {
    font-size: 1.05em;
    min-height: 2.8em;
}
#section-2 > div > div h3 > span{
    margin-left: 10px;
}
.read-more{
    position: absolute;
    bottom: 0;
    right: 0;
    margin-right: 1.5em;
    margin-bottom: .5em;
}
.read-more span{
    font-size: 1.3em;
}
a.read-more:after{
    position: absolute;
    content: "";
    width: 82%;
    height: 1px;
    color: #000;
    bottom: 2px;
    right: 0;
    display: block;
    background-color: #000;
}

#section-3{
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
}

#section-3 div:first-child{
    position:  relative;
    margin-bottom: 3px;
}
#section-3 div:first-child img{
    width: 100vw;
}
.section-3-imgontext{
    position:  absolute;
    top: 0;
    bottom: 0;
    margin:  auto 0;
    right: 10vw;
    color: #fff;
    width: 20em;
    height: 22em;
    font-size: 1.2vw;
}
.section-3-imgontext h3{
    color: #fff;
}
.section-3-imgontext p{
    color: #fff;
}
#section-3 > div:not(:nth-of-type(1)){
    width: 33%;
    width: calc(33.33333% - 2px);
}
#section-3 > div:not(:nth-of-type(1)) img{
    width: 100%;
    height: 20vw;
}
#section-3 > div:not(:nth-of-type(1)) p{
    padding: 0 1em;
}
#section-3 > div.middle-ele{
    margin: 0 3px;
}

#section-4,#section-5{
    width: 72vw;
    max-width: calc(1020px + 3vw);
    margin: 2.5rem auto 4em;
}
#section-4 a{
    display: block;
}
#section-5{
    text-align: center;
}
#section-5 p{
    word-break: break-all;
    margin:.5em 0;
}

[id*="-area"]{
    margin-top: 2em;
}
[id*="-area"] h3{
    padding-bottom: 2px;
    border-bottom: 1px solid;
}

[id*="-area"] > div > div {
    margin: 0 1%;
    width: 23.5%;
}
[id*="-area"] > div > div:first-child{
    margin-left: 0;
}
[id*="-area"] > div > div:last-child{
    margin-right: 0;
}
[id*="-area"] > div > div img{
    width: 100%;
}
[id*="-area"] > div > div p{
    margin: 5px auto 0;
    font-size: .9rem;
}
[id*="-area"] > div > div h4{
    margin: 0;
    font-size: .9rem;
}

#fb iframe {
    height: 461px;
    width: 340px;
}

#qt,
#fb {
    margin: 20px 0;
}

#footer {
    background-color: #eee;
    overflow: hidden;
    padding: 8px 2em;
    font-size: .9em;
}
#footer p:first-child{
    float: left;
}
#footer p:last-child{
    float: right;
}

.footer {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
            flex-wrap: wrap;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
}

.cam-banner{
    display: block;
    margin: 2rem auto;
}
.cam-banner img{
    width: 100%;
}

#slider {
    position: relative;
    overflow: hidden;
}

.swiper-container {
    /*height: 465px;*/
    overflow: hidden;
    width: 100%;
}

.swiper-slide > img {
    width: 100%;
    max-height: 450px;
}

/*.si1 {
    -webkit-transform: translateY(-45%);
            transform: translateY(-45%);
}

.si2 {
    -webkit-transform: translateY(-36%);
            transform: translateY(-36%);
}

.si3 {
    -webkit-transform: translateY(-32%);
            transform: translateY(-32%);
}

.si4 {
    -webkit-transform: translateY(-34%);
            transform: translateY(-34%);
}

.si5 {
    -webkit-transform: translateY(-25%);
            transform: translateY(-25%);
}*/

.swiper-button-next,
.swiper-button-prev {
    background-color: rgba(58, 26, 12, 0.67);
    background-size: 33px 25px;
    border-radius: 50%;
    height: 45px;
    top: 55%;
    width: 45px;
}

.swiper-button-next {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M27%2C22L27%2C22L5%2C44l-2.1-2.1L22.8%2C22L2.9%2C2.1L5%2C0L27%2C22L27%2C22z'%20fill%3D'%2394c947'%2F%3E%3C%2Fsvg%3E");
    right: 20px;
}

.swiper-button-prev {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M0%2C22L22%2C0l2.1%2C2.1L4.2%2C22l19.9%2C19.9L22%2C44L0%2C22L0%2C22L0%2C22z'%20fill%3D'%2394c947'%2F%3E%3C%2Fsvg%3E");
    left: 20px;
}

/*FB関連*/
#fb-pageplugin{
    overflow: hidden;
}
/*FB関連ここまで*/

@-moz-document url-prefix() {
    @media (min-width: 768px){
        div#spot-img > img:nth-of-type(2), div#spot-img > img:nth-of-type(5) {
            margin: 0 2% 1.5vw !important;
        }
    }
}


@media (min-width: 1050px){
    .header-flex{
        margin: 0 12vw;
    }
}
@media (max-width: 1049px){
    #global_nav{
        margin-right: 1em;
    }
    .site-logo{
        margin-left: 1em;
    }
    #farm-experience,#section-2 > div,#section-4,#section-5{
        width: calc(96vw - 2em);
    }
    #section-2 > div > div{
        /*width: 30vw;*/
    }
}

@media (max-width: 1199px){
    #global_nav > ul > li{
        font-size: .8em;
    }
}
@media (max-width: 1100px){
    #global_nav > ul > li{
        font-size: .7em;
    }
}

@media (max-width: 900px){
    #global_nav > ul > li:not(:last-child):after{
        margin: 0 1em;
    }
}

@media (max-width: 810px){
    .header-flex{
        font-size: 1.8vw;
    }
}

@media (min-width: 768px){
    a:hover{
        opacity: .8;
        color: #94c947;
        text-decoration: none;
    }
    a:hover p{
        opacity: .8;
    }
    a.read-more:hover:after{
        background-color: #94c947;
    }
    #section-5 p{
        overflow: hidden;
        -o-text-overflow: ellipsis;
           text-overflow: ellipsis;
        white-space: nowrap;
    }
}

@media (min-width: 741px){
    /*FB関連*/
    #section-2 > div > div.fb-pattern-1{
        width: 100%;
        max-width: none;
        margin-right: 0;
        display: -webkit-box;
        display: -webkit-flex;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -webkit-align-items: center;
            -ms-flex-align: center;
                align-items: center;
    }
    #section-2 > div > div.fb-pattern-1 > #fb-pageplugin{
        width: 50%;
        overflow: hidden;
        margin-right: 0;
        max-width: none;
    }
    #section-2 > div > div.fb-pattern-1 > #fb-pattern-1_text{
        width: 50%;
        text-align: center;
    }
    #section-2 > div > div.fb-pattern-1 > #fb-pattern-1_text > p{
        padding: 0 2em;
    }
    /*FB関連ここまで*/
}

/* 767px */
@media (max-width: 47.9375em) {
    #wrapper{
        padding-top: 3.5em;
    }
    #back-top{
        right: 0;
    }
    h1{
        font-size: 1.8rem;
    }
    #farm-experience strong{
        font-size: 1.1rem;
    }
    h2 {
        font-size: 1.7rem;
        font-weight: bolder;
    }

    a:active{
        opacity: .8;
        color: #94c947;
        text-decoration: none;
    }
    a:active p{
        opacity: .8;
    }
    a.read-more:active:after{
        background-color: #94c947;
    }

    .header-flex{
        height: auto;
    }
    #farm-experience > div,#section-2 > div,#section-3,[id*="-area"] > div{
        -ms-flex-wrap: wrap;
            flex-wrap: wrap;
    }
    
    #farm-experience p{
        width: 100%;
    }
    #farm-experience p:nth-of-type(2){
        margin-left: 0;
        margin-top: 1em;
    }
    
    .section-3-imgontext{
        position: unset;
        width: auto;
        height: auto;
        padding: 0 1em;
        font-size: 1rem;
    }
    .section-3-imgontext h3{
        color: #000;
    }
    .section-3-imgontext p{
        color: #000;
    }
    #section-3 > div:not(:nth-of-type(1)){
        width: 100%;
        height: auto;
        margin-bottom: 3px !important;
    }
    #section-3 > div:not(:nth-of-type(1)) img{
        height: auto;
    }
    #section-3 > div.middle-ele{
        margin: 0;
    }
    #mobile-menu{
        display:block;
    }
    #global_nav,.sns-icon{
        display: none;
    }
    .site-logo{
        margin-left: auto;
    }
    .site-logo img{
        width: 110px;
    }

    #section-2 > div > div:not(:nth-of-type(3n)){
        margin-right: .5vw;
    }
    [id*="-area"] > div > div {
        margin: 0 0 2em;
        width: 100%;
    }

}

@media (max-width: 740px){
    #section-2 > div{
        padding: 6vw 0;
        -webkit-box-pack: center;
            -ms-flex-pack: center;
                justify-content: center;
    }
    #section-2 > div > div{
        width: 100%;
        margin-right: 0 !important;
        margin-bottom: 1em;
    }
    #section-2 > div > div.fb-pattern-1 > #fb-pattern-1_text{
        display: none;
    }
}

@media (max-width:492px){
    #footer{
        padding: 8px 1em;
    }
}

@media (max-width: 350px){
    #footer{
        padding: 8px .5em;
    }
}