@charset "UTF8";

@media only screen and (max-width: 767px){

#hamburgernav {
    cursor:pointer;
    background-color: #045409;
    box-sizing: border-box;
    height: 100%;
    padding: 10px 10px;
    position: fixed;
    right: -300px;
    top: 0;
    transition: transform 0.3s linear 0s;
    width: 300px;
    z-index: 1000;
}

#global-navi li{
display: none;
}

#footer-navi ul{
margin: 0px;
padding: 0px;
list-style-type: none;
text-alin: center;
table-layout: atuo;
vertical-align:middle;
border: 1px #000000 solid;
}

#footer-navi ul:after{
content:'';
display:block;
height: 0px;
clear: both;
visibility:hidden;
}

#footer-navi li{
font-size: 3vw;
display: inline;
color: #ffffff;
overflow: hidden;
vertical-align: middle;
height:25px;
text-align: center;
}

#footer-navi li:last-child{

}

#footer-navi li a{
display: block;
overflow: hidden;
text-decoration: none;
font-weight: bold;
border: 0.5px #000000 solid;
line-height: 30px;
}

#footer-navi li span.en{
display: none;
}

#footer-navi a:link{
background-color: #045409;
background-position: top left;
color: #ffffff;
}

#footer-navi a:visited{
background-color: #045409;
background-position: top left;
color: #ffffff;
}

#footer-navi a:hover{
background-color: #045409;
background-position: top left;
color: #ffa500;
}

#footer-navi a:active{
background-color: #045409;
background-position: top left;
color: #ffffff;
}

.title-bar{
width: 100%;
border-radius: 20px;
background-color: #045409;
font-size: 4vw;
font-weight: bold;
text-indent: 1em;
color: #ffffff;
}

.title-bar-2{
width: 100%;
border-radius: 8px;
font-size: 3.5vw;
font-weight: bold;
text-align: center;
color: #045409;
}

.title-bar3{
width: 100%;
border-radius: 8px;
background-color: #045409;
font-size: 2vw;
font-weight: bold;
text-indent: 1em;
text-align: center;
color: #ffffff;
}

.left-area{
display: none;
}

.right-area{
width: 100%;
}

.right-area-wrapper{
width: 100%;
display: block;
}

.main{
width: 100%;
}

.height-line{
display: none;
}

.category-area{
display: none;
}

.m-category-area{
width: 100%;
}

td.category-navi-inner p{
font-size: 4vw;
font-weight: bold;
text-indent: 0.5em;
text-align: left;
vertical-align: middle;
margin: 0px;
}

p.notice{
margin: 0px;
padding: 0px;
line-height: 10px;
text-align: left;
font-size: 2vw;
}

.twitter{
width: 95%;
margin: 0px auto;
}

p.b-contents-text-inner-comment{
font-size: 2.5vw;
}

p.b-contents-text-inner-title{
font-size: 4vw;
font-weight: bold;
}

.order-area{
display: none;
}

.m-order-area{
width: 100%;
}

th.order{
width: 30%;
background-color: #288E2A;
border: 3px solid #045409;
text-align: left;
vertical-align: top;
padding: 5px;
}

td.order{
width: 70%;
border: 3px solid #045409;
text-align: left;
vertical-align: top;
padding: 5px;
}

p.order-title{
font-size: 3vw;
font-weight: bold;
color: #ffffff;
margin: 0px;
padding: 0px;
}

p.order-comment{
font-size: 2vw;
color: #045409;
margin: 0px;
padding: 0px;
}

.company-profile-area{
display: none;
}

.m-company-profile-area{
width: 100%;
}

th.company-profile{
width: 30%;
background-color: #288E2A;
border: 3px solid #045409;
text-align: left;
vertical-align: top;
padding: 5px;
}

td.company-profile{
width: 70%;
border: 3px solid #045409;
text-align: left;
vertical-align: top;
padding: 5px;
}

p.company-profile-area-title{
font-size: 3.5vw;
font-weight: bold;
color: #ffffff;
margin: 0px;
padding: 0px;
}

p.company-profile-area-comment{
font-size: 3vw;
color: #000000;
margin: 0px;
padding: 0px;
}

p.access-text{
font-size: 3vw;
font-weight: bold;
margin: 0px;
padding: 0px;
}

.careers-inner{
width: 100%;
margin: 0px auto;
}

.careers-title{
width: 100%;
font-size: 11px;
background-color: #E70B0A;
color: #ffffff;
font-weight: bold;
margin-bottom: 5px;
text-indent: 5px;
}

th.careers{
width: 30%;
font-size: 2vw;
text-indent: 5px;
border: solid 1px #045409;
vertical-align: top;
}

td.careers{
width: 70%;
font-size: 2vw;
padding-left: 5px;
padding-right: 5px;
border: solid 1px #045409;
}

.contact-us-form{
width: 100%;
}

.contact-us-inner{
width: 90%;
margin: 0px auto;
}

p.contact-us-text{
font-size: 3vw;
margin: 0px;
padding: 0px;
}

table.contact-us{
width: 100%;
border: 1px solid #045409;
border-spacing: 0px;
}

th.contact-us{
width: 40%;
background-color: #288E2A;
color: #ffffff;
vertical-align: middle;
text-align: left;
text-indent: 1em;
padding: 5px;
font-size: 8px;
border: 1px solid #045409;
}

td.contact-us{
width: 60%;
background-color: #D6EAD6;
padding: 5px;
border: 1px solid #045409;
}

td.contact-us-menu{
width: 70%;
padding: 5px;
text-align: center;
}

table.button{
width: 100%;
}

tr.button{
text-align: center;
}

input.button{
padding: 10px;
background-color: #288E2A;
color: #ffffff;
font-weight: bold;
}

table.contact-us-menu{
width: 100%;
}

tr.contact-us-menu{
text-align: center;
}

input.contact-us-menu{
padding: 10px;
background-color: #288E2A;
color: #ffffff;
font-weight: bold;
}

.send-completely{
width: 100%;
background-color: #288E2A;
color: #ffffff;
font-weight: bold;
text-align: center;
}

p.send-completely-comment{
text-align: center;
}

.footer-text p{
color: #ffffff;
font-size: 2.5vw;
font-weight: bold;
text-align: right;
margin: 0px 20px 0px 0px;
}

p.vegetable-village-text-inner-comment{
font-size: 2.5vw;
}

p.vegetable-village-text-inner-title{
font-size: 4vw;
font-weight: bold;
}

p.sitemap{
font-size: 2vw;
margin: 0px;
padding: 0px;
font-weight: normal;
}

p.sitemap1{
font-size: 2vw;
margin: 0px;
padding: 0px;
}

p.sitemap2{
font-size: 1.7vw;
margin: 0px;
padding: 0px;
}

.footer-text p{
color: #ffffff;
font-size: 2.5vw;
font-weight: bold;
text-align: right;
margin: 0px 20px 0px 0px;
}

.copy p{
font-size: 2vw;
color: #000000;
font-weight: bold;
}

}

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

#hamburgernav {
display: none;
}

#global-navi li{
display: inline;
text-align: left;
text-indent: 2em;
font-size: 1.2vw;
font-weight: bold;
color: #000000;
overflow: hidden;
vertical-align: middle;
height:25px;
}

#footer-navi ul{
width: 100%;
margin: 0px auto;
padding: 0px;
list-style-type: none;
text-alin: center;
display: table;
table-layout: atuo;
vertical-align:middle;
line-height: 3;
}

#footer-navi ul:after{
content:'';
display:block;
height: 0px;
clear: both;
visibility:hidden;
}

#footer-navi li{
display: table-cell;
font-size: 1.5vw;
color: #ffffff;
overflow: hidden;
vertical-align: middle;
height:25px;
text-align: center;
}

#footer-navi li a{
display: block;
overflow: hidden;
padding-left: 10px;
padding-right: 10px;
text-decoration: none;
font-weight: bold;
}

#footer-navi li span.en{
display: none;
}

#footer-navi a:link{
background-color: #045409;
background-position: top left;
color: #ffffff;
}

#footer-navi a:visited{
background-color: #045409;
background-position: top left;
color: #ffffff;
}

#footer-navi a:hover{
background-color: #045409;
background-position: top left;
color: #ffa500;
}

#footer-navi a:active{
background-color: #045409;
background-position: top left;
color: #ffffff;
}

.title-bar{
width: 100%;
border-radius: 8px;
background-color: #045409;
font-size: 1.7vw;
font-weight: bold;
text-indent: 1em;
color: #ffffff;
}

.title-bar-2{
width: 100%;
border-radius: 8px;
font-size: 2vw;
font-weight: bold;
text-align: center;
color: #045409;
}

.title-bar3{
width: 100%;
border-radius: 8px;
background-color: #045409;
font-size: 1.7vw;
font-weight: bold;
text-indent: 1em;
text-align: center;
color: #ffffff;
}

.left-area{
width: 15%;
position: fixed;
height: 100%; 
float:left;
}

.right-area{
width: 85%;
float: right;
}

.right-area-wrapper{
width: 90%;
margin: 0px auto;
display: block;
}

.main{
width: 70%;
float: left;
}

.category-area{
width: 100%;
}

.m-category-area{
display: none;
}

td.category-navi-inner p{
font-size: 1.5vw;
font-weight: bold;
text-indent: 0.5em;
text-align: left;
vertical-align: middle;
margin: 0px;
}

p.notice{
margin: 5px 0px 5px 0px;
padding: 0px;
line-height: 10px;
text-align: left;
font-size: 1.2vw;
}

.twitter{
width: 30%;
float: right;
}

p.b-contents-text-inner-comment{
font-size: 1.5vw;
margin: 0px;
padding: 0px;
}

p.b-contents-text-inner-title{
font-size: 1.5vw;
font-weight: bold;
margin: 0px;
padding: 0px;
}

.order-area{
width: 100%;
}

.m-order-area{
display: none;
}

th.order{
width: 30%;
background-color: #288E2A;
border: 3px solid #045409;
text-align: left;
vertical-align: top;
padding: 10px;
}

td.order{
width: 70%;
border: 3px solid #045409;
text-align: left;
vertical-align: top;
padding: 10px;
}

p.order-title{
font-size: 1.2vw;
font-weight: bold;
color: #ffffff;
margin: 0px;
padding: 0px;
}

p.order-comment{
font-size: 1.2vw;
color: #045409;
margin: 0px;
padding: 0px;
}

.company-profile-area{
width: 100%;
}

.m-company-profile-area{
display: none;
}

th.company-profile{
width: 30%;
background-color: #288E2A;
border: 3px solid #045409;
text-align: left;
vertical-align: top;
padding: 10px;
}

td.company-profile{
width: 70%;
border: 3px solid #045409;
text-align: left;
vertical-align: top;
padding: 10px;
}

p.company-profile-area-title{
font-size: 1.5vw;
font-weight: bold;
color: #ffffff;
margin: 0px;
padding: 0px;
}

p.company-profile-area-comment{
font-size: 1.5vw;
color: #000000;
margin: 0px;
padding: 0px;
}

p.access-text{
font-size: 1.5vw;
margin: 0px;
padding: 0px;
}

.careers-inner{
width: 80%;
margin: 0px auto;
}

.careers-title{
width: 100%;
background-color: #E70B0A;
color: #ffffff;
font-weight: bold;
margin-bottom: 5px;
text-indent: 5px;
}

th.careers{
width: 30%;
text-indent: 1em;
border: solid 1px #045409;
text-align: left;
vertical-align: top;
}

td.careers{
width: 70%;
padding-left: 5px;
padding-right: 5px;
border: solid 1px #045409;
}

.contact-us-form{
width: 100%;
}

.contact-us-inner{
width: 80%;
margin: 0px auto;
}

p.contact-us-text{
font-size: 1.2vw;
margin: 0px;
padding: 0px;
}

table.contact-us{
width: 100%;
border: 1px solid #045409;
border-spacing: 0px;
}

th.contact-us{
width: 30%;
background-color: #288E2A;
color: #ffffff;
vertical-align: middle;
text-align: left;
text-indent: 1em;
padding: 5px;
border: 1px solid #045409;
}

td.contact-us{
width: 70%;
background-color: #D6EAD6;
padding: 5px;
border: 1px solid #045409;
}

td.contact-us-menu{
width: 70%;
padding: 5px;
text-align: center;
}

table.button{
width: 100%;
}

tr.button{
text-align: center;
}

input.button{
padding: 10px;
background-color: #288E2A;
color: #ffffff;
font-weight: bold;
}

table.contact-us-menu{
width: 100%;
}

tr.contact-us-menu{
text-align: center;
}

input.contact-us-menu{
padding: 10px;
background-color: #288E2A;
color: #ffffff;
font-weight: bold;
}

.send-completely{
width: 100%;
background-color: #288E2A;
color: #ffffff;
font-weight: bold;
text-align: center;
}

p.send-completely-comment{
text-align: center;
}

p.vegetable-village-text-inner-comment{
font-size: 1.5vw;
margin: 0px;
padding: 0px;
}

p.vegetable-village-text-inner-title{
font-size: 1.5vw;
font-weight: bold;
margin: 0px;
padding: 0px;
}

p.sitemap{
font-size: 1.5vw;
margin: 0px;
padding: 0px;
font-weight: normal;
}

p.sitemap1{
font-size: 1.5vw;
margin: 0px;
padding: 0px;
}

p.sitemap2{
font-size: 1.5vw;
margin: 0px;
padding: 0px;
}

.footer-text p{
color: #ffffff;
font-size: 1.5vw;
font-weight: bold;
text-align: right;
margin: 0px 20px 0px 0px;
}

.copy p{
font-size: 1vw;
color: #000000;
font-weight: bold;
}

}

html{
width:100%;
height: 100%;
margin: 0px;
padding: 0px;
}

body{
width: 100%;
height: 100%;
margin: 0px;
padding: 0px;
font-family: 'ＭＳ Ｐゴシック';
overflow-y:scroll;
}

hr{
border: 1px solid #000000;
margin: 0px;
padding: 0px;
}

a{
text-decoration: none;
color: #000000;
}

.wrapper{
width: 100%;
height: auto;
overflow: auto;
}

.height-space{
height: 10px;
}

.flame{
width: 100%;
height: 100%;
overflow: hidden;
}

.left-area-wrapper{
width: 100%;
height: 100%;
clear:both;
display: table;
}

.left-area-wrapper-left{
width: 99%;
height: 100%;
min-height: 100%;
display: table-cell;
}

.left-area-wrapper-right{
width: 1%;
height: 100%;
min-height: 100%;
display: table-cell;
border-left: 1px solid #000000;
border-collapse: collapse;
border-spacing: 0px;
}

/*左エリア*/

.logo-area{
width: 100%;
}

.logo-area img{
width: 100%;
display: block;
}

.companyname{
width: 100%;
text-align: center;
}

p.companyname{
font-size: 1.5vw;
font-weight: bold;
margin: 0px;
padding: 0px;
}

.global-navi-area{
width: 100%;
}

.global-navi-inner{
width: 100%;
background-color: #ffffff;
}

.top-image-area{
width: 100%;
}

.top-image{
width: 100%;
}

.top-image img{
width: 100%;
display: block;
}

.sub-image-area{
width: 100%;
}

.sub-image{
width: 100%;
}

.sub-image img{
width: 100%;
display: block;
}

.contents-area{
width: 100%;
overflow: hidden;
}

.main-inner{
clear:both;
display: table;
}

.main-inner-left{
width: 99%;
display: table-cell;
}

.banner-area{
width: 100%;
}

.banner-area img{
width: 100%;
display: block;
}

.main-inner-right{
width: 1%;
height: 100%;
display: table-cell;
}

.category-navi{
width: 100%;
}

table.category-navi{
width: 100%;
border: none;
border-collapse: collapse;
border-spacing: 0px;
}

tr.category-navi{
width: 100%;
}

td.category-navi{
width: 48%;
}

td.category-navi img{
width: 100%;
}

td.category-navi-space-x{
width: 2%;
}

td.category-navi-space-y{
height: 10px;
}

td.m-category-navi-space-y{
height: 3px;
}

.category-navi-inner{
width: 100%;
}

table.category-navi-inner{
width: 100%;
border: 1px solid #000000;
border-collapse: collapse;
border-spacing: 0px;
}

tr.category-navi-inner{
width: 100%;
}

td.category-navi-inner-image{
width: 48%;
padding: 2%;
}

td.category-navi-inner-image img{
width: 100%;
display: block;
}

td.category-navi-inner{
width: 50%;
}

.notice-area{
width: 100%
}

.notice{
width: 100%;
}

table.notice{
width: 100%;
border: 3px solid #045409;
padding: 5px;
}

tr.notice{
width: 100%;
}

td.notice-left{
width: 20%;
}

td.notice-right{
width: 80%;
}

hr.notice{
width: 100%;
border: none;
border-bottom: 2px dashed #000000;
}

.twitter-inner{
width: 100%;
clear:both;
display: table;
}

.twitter-inner-area{
width: 100%;
height: 500px;
background-color: #E1E5E1;
border: 1px solid #000000;
border-collapse: collapse;
border-spacing: 0px;
display: table-cell;
}

.sns-icon{
width: 100%;
clear: both;
}

.sns-icon-inner{
width: 100%;
display: -webkit-flex;
display: -moz-flex;
display: -ms-flex;
display: -o-flex;
display: flex;
justify-content: space-around;
align-items: center;
}

.sns-icon-twitter{
width:30%;
}

.sns-icon-twitter img{
width: 100%;
}

.sns-icon-instagram{
width: 30%;
}

.sns-icon-instagram img{
width: 100%;
}

iframe {
width: 100%;
}

.sub-contents-area{
width: 100%;
}

.b-contents-area{
width: 100%;
}

.b-contents-image{
width: 100%;
}

table.b-contents-image{
width: 100%;
}

tr.b-contents-image{
width: 100%;
}

td.b-contents-image-first{
width: 50%;
}

td.b-contents-image-second{
width: 50%;
}

.b-contents-image img{
width: 100%;
border-radius: 20px;
}

.b-contents-text{
width: 100%;
background-color: #D5EFD6;
border-radius: 20px;
}

.b-contents-text-inner{
padding: 20px;
}

.order-set-area{
width: 70%;
margin: 0px auto;
}

table.order-set{
width: 100%;
border: none;
border-collapse: collapse;
}

tr.order-set{
width: 100%;
}

td.order-set-left{
width: 30%;
text-align: left;
}

td.order-set-right{
width: 70%;
padding-left: 20px;
padding-right: 20px;
vertical-align: top;
}

.order-set-left img{
width: 100%;
}

p.order-set{

}

.order{
width: 100%;
}

table.order{
width: 100%;
border-collapse: collapse;
border-spacing: 0px;
}

tr.order{
width: 100%;
}

.order-button-area{
width: 100%;
}

.order-button-area-inner{
width: 50%;
margin: 0px auto;
}

table.order-button-area-inner{
width: 100%;
}

tr.order-button-area-inner{
width: 100%;
}

td.order-button-area-inner{
width: 100%;
text-align: center;
}

.order-button{
display: inline-block;
padding: 0.5em 1em;
text-decoration: none;
background-color: #045409;
color: #ffffff;
border-bottom: solid 4px #022603;
border-radius: 3px;
font-size: 2vw;
font-weight: bold;
}

.order-button:active{
-ms-transform: translateY(4px);
-webkit-transform: translateY(4px);
transform: translateY(4px);
border-bottom: none;
}

table.company-profile{
width: 100%;
border-collapse: collapse;
border-spacing: 0px;
}

tr.company-profile{
width: 100%;
}

.access-area{
width: 100%;
}

.map{
width: 100%;
text-align: center;
}

.access-text{
width: 100%;
text-align: center;
}

.careers-area{
width: 100%;
}

.careers-text{
width: 100%;
text-align: center;
}

p.careers-text{
font: 2vw;
}

table.careers{
width: 100%;
border: solid 1px #045409;
border-spacing: 0px;
}

.contact-us-area{
width: 100%;
}

.vegetable-village-image{
width: 100%;
}

table.vegetable-village-image{
width: 100%;
}

tr.vegetable-village-image{
width: 100%;
}

td.vegetable-village-image{
width: 100%;
}

td.vegetable-village-image img{
width: 60%;
display: block;
margin: 0px auto;
}

td.vegetable-village-image-first img{
width: 100%;
display: block;
}

td.vegetable-village-image-second img{
width: 100%;
display: block;
}

.vegetable-village-area{
width: 100%;
}


.vegetable-village-text{
width: 100%;
background-color: #D5EFD6;
border-radius: 20px;
}

.vegetable-village-text-inner{
padding: 20px;
}

.sitemap-area{
width: 100%;
}

table.sitemap{
width: 100%;
border: 3px solid #045409;
border-collapse:collapse;
}

tr.sitemap{
width: 100%;
}

th.sitemap{
width: 30%;
border: 3px solid #045409;
background-color: #98E598;
text-align: left;
text-indent: 1em;
}

td.sitemap1{
width: 5%;
border: 3px solid #045409;
background-color: #79D379;
text-align: center;
}

td.sitemap2{
width: 65%;
border: 3px solid #045409;
background-color: #D6EAD6;
text-align: left;
text-indent: 1em;
}

.footer-inner{
width: 100%;
background-color: #045409;
}

.footer-text-area{
width: 100%;
}

.footer-text{
width: 100%;
}

.copy{
width: 100%;
text-align: center;
}

#hamburgernav::before {
    background-color: #045409;
    border-radius: 0 0 0 10px;
    color: #ffffff;
    content: "\2261";
    display: block;
    font-size: 30px;
    height: 30px;
    line-height: 30px;
    position: absolute;
    right: 100%;
    text-align: center;
    top: 0;
    width: 30px;
}

#hamburgernavbackground {
    background-color: #333;
    display: block;
    height: 100%;
    opacity: 0;
    position: fixed;
    right: 0;
    top: 0;
    transition: all 0.3s linear 0s; 
    width: 100%;
    z-index: -1;
}

#hamburgernav:hover {
    transform: translate(-150px); 
color: #000000;
}

#hamburgernav:hover + #hamburgernavbackground {
    opacity: 0.5;
    z-index: 999;
}

#hamburgernav a:link{
    background-color : #045409;
    color: #ffffff;
    background-position: top left;
    text-decoration: none;
}
#hamburgernav a:visited{
    background-color : #045409;
    color: #ffffff;
    background-position: top left;
}
#hamburgernav a:hover{
    background-color : #045409;
    color: #000000;
    background-position: left top;
}
#hamburgernav a:active{
    background-color : #045409;
    color: #ffffff;
    background-position: left top;
}

#global-navi ul{
width: 100%;
margin: 0px auto;
padding: 0px;
list-style-type: none;
text-alin: center;
display: table;
table-layout: atuo;
vertical-align:middle;
line-height: 3;
}

#global-navi ul:after{
content:'';
display:block;
height: 0px;
clear: both;
visibility:hidden;
}

#global-navi li:last-child{
border-right: none;
}

#global-navi li a{
display: block;
overflow: hidden;
padding-left: 10px;
padding-right: 10px;
text-decoration: none;
font-weight: bold;
border-bottom: 1px dashed #000000;
}

#global-navi li span.en{
display: none;
}

#global-navi a:link{
background-color: #ffffff;
background-position: top left;
color: #000000;
}

#global-navi a:visited{
background-color: #ffffff;
background-position: top left;
color: #000000;
}

#global-navi a:hover{
background-color: #045409;
background-position: top left;
color: #ffffff;
}

#global-navi a:active{
background-color: #ffffff;
background-position: top left;
color: #000000;
}

/*右エリア*/