@charset "utf-8";
body {
background-color:#f6efe3;
background-image: url(../img/footer_bg.jpg);
background-repeat: no-repeat;
background-position: center bottom;
}
img {width: 100%}
h2, h3 {
 font-family: 'Shuei Yokobuto Min B';
}
p {
 font-family: 'Shuei Yokobuto Min M';
}
#header {
position: relative;
width: 100%;
margin: 0 auto;
top: 0;
z-index: 1;
}
.header-wrap {
width: 100%;
margin: 0 auto;
}
.header-wrap::after  {content: '';display: table;clear: both;}
#navi {
display: none;
}
.overview {
padding: 150px 0 100px 0;
}
.overview > h1 {
width: 80%;
margin: 0 10% 4em 10%;
}
.overview > p {
width: 80%;
margin: 0 10% 4em 10%;
color: #868686;
text-align: center;
}
.sns_wrap::after  {content: '';display: table;clear: both;}
.sns_wrap {
width: 45%;
margin: 0 27.5%;
}
.sns_wrap > ul > li {
width: 21.3%;
float: left;
margin: 0 6%;
}
.sns_wrap > ul > li > a {
display: block;
width: 100%;
transition: all .2s;
}
.sns_wrap > ul > li > a:hover {
opacity: 0.6;
}

.main_image {
width: 100%;
height: 460px;
}

.cb-slideshow,
.cb-slideshow:after {
position: relative;
width: 100%;
height: 460px;
margin: 0;
top: 0px;
left: 0px;
z-index: 0;
}
.cb-slideshow > li > span {
width: 100%;
height: 460px;
position: absolute;
top: 0px;
left: 0px;
color: transparent;
background-size: 130% auto;
background-position: 50% 50%;
background-repeat: no-repeat;
z-index: 0;
}
.cb-slideshow > li:nth-child(1) > span {
background-image: url(../img/mainimage_01.jpg);
animation: fadeSlide01 0s ease-out infinite;
animation-delay: 0.3s;
}
.cb-slideshow > li:nth-child(2) > span {
opacity: 0;
background-image:  url(../img/mainimage_02.jpg);
animation: fadeSlide02 10s ease-out infinite;
animation-delay: 0.3s;
}
.cb-slideshow > li:nth-child(3) > span {
opacity: 0;
background-image:  url(../img/mainimage_03.jpg);
animation: fadeSlide03 10s ease-out infinite;
animation-delay: 0.3s;
}
.cb-slideshow > li:nth-child(4) > span {
opacity: 0;
background-image:  url(../img/mainimage_04.jpg);
animation: fadeSlide04 10s ease-out infinite;
animation-delay: 0.3s;
}
@keyframes fadeSlide01 {
0% { opacity: 1; }
25% { opacity: 0; }
50% { opacity: 0; }
75% { opacity: 0; }
100% { opacity: 1; }
}
@keyframes fadeSlide02 {
0% { opacity: 0; }
25% { opacity: 1; }
50% { opacity: 0; }
75% { opacity: 0; }
100% { opacity: 0; }
}
@keyframes fadeSlide03 {
0% { opacity: 0; }
25% { opacity: 0; }
50% { opacity: 1; }
75% { opacity: 0; }
100% { opacity: 0; }
}
@keyframes fadeSlide04 {
0% { opacity: 0; }
25% { opacity: 0; }
50% { opacity: 0; }
75% { opacity: 1; }
100% { opacity: 0; }
}


.consept {
position: relative;
width: 100%;
margin: 0 0 100px 0;
padding: 100px 0;
background: url(../img/consept-bg.jpg) no-repeat center top;
background-size: auto 100%;
z-index: 100;
}
.consept > .wrap_wide > .image {
width: 60%;
margin: 0 20% 4em 20%;
}
.consept > .wrap_wide > .txt {
width: 100%;
padding: 0 10%;
color: #FFF;
text-align: center;
}
.consept > .wrap_wide > .txt > h2 {
margin: 0 0 1em 0;
font-size: 2em;
}
.consept > .wrap_wide > .txt > h2 > span {
display: block;
font-size: 0.5em;
}
.consept > .wrap_wide > .txt > em {
 font-family: 'Shuei Yokobuto Min M';
display: inline-block;
font-size: 1.3em;
margin: 1em 0;
}
.consept > .wrap_wide > .txt > p.name {
display: block;
margin: 2em 0 0 0;
text-align: right;
}


.cafe > .wrap_wide > .cafe_image {
width: 60%;
margin: 0 20% 4em 20%;
}
.cafe_menu {
margin: 0 0 4em 0;
padding: 0 10%;
text-align: center;
}
.cafe_menu> h2 {
margin: 0 0 1em 0;
font-size: 2em;
}
.cafe_menu > h2 > span {
display: block;
font-size: 0.5em;
}
.cafe_menu> h3 {
margin: 0 0 0.5em 0;
font-size: 1.3em;
}
.cafe_menu > p {
margin: 0 0 2.5em 0;
}
.cafe_menu > .link > a {
display: block;
font-family: 'Shuei Yokobuto Min M';
margin: 0 0 1em;
padding: 1em 0;
background: #e95735;
text-align: center;
color: #FFF;
text-decoration: none;
transition: all .2s;
}
.cafe_menu > .link > a:hover {
opacity: 0.7;
}



.dimsum {
margin: 0 0 100px 0;
}
.dimsum_image {
margin: 0 0 4em 0;
}
.dimsum_menu::after  {content: '';display: table;clear: both;}
.dimsum_menu {
padding: 0 10%;
text-align: center;
}
.dimsum_menu > .txt_block > h2 {
margin: 0 0 1em 0;
font-size: 2em;
}
.dimsum_menu > .txt_block > h2 > span {
display: block;
font-size: 0.5em;
}
.dimsum_menu > .txt_block > p {
margin: 0 0 2.5em 0;
}


.strawberry_field {
margin: 0 0 100px 0;
text-align: center;
}
.field_image {
height: 250px;
margin: 0 0 2em 0;
overflow: hidden;
}
.strawberry_field > .wrap_wide > .txt_block > h2 {
margin: 0 0 1em 0;
font-size: 2em;
}
.strawberry_field > .wrap_wide > .txt_block > h2 > span {
display: block;
font-size: 0.5em;
}
.strawberry_field > .wrap_wide > .txt_block > p {
margin: 0 0 2.5em 0;
padding: 0 10%;
}


.gmap {
margin: 0 0 2em 0;
}
.gmap > iframe {
height: 350px;
}

.access {
margin: 0 0 4em 0;
padding: 0 10%;
text-align: center;
}
.access > h2 {
margin: 0 0 1em 0;
font-size: 2em;
}
.access > h2 > span {
display: block;
font-size: 0.5em;
}
.access > h3 {
margin: 0 0 0.5em 0;
font-size: 1.2em;
}

.pickup {
width: 100%;
margin: 0 0 4em 0;
}
.pickup > h3 {
margin: 0 0 1.5em 0;
font-size: 1.5em;
text-align: center;
}
.pickup > ul > li {
margin: 0 0 2em 0;
padding: 0 10%;
}
.pickup > ul > li::after  {content: '';display: table;clear: both;}
.pickup > ul > li > .pickup_image {
width: 35%;
margin: 0 5% 0 0;
float: left;
}
.pickup > ul > li > .doc {
width: 60%;
float: left;
}
.pickup > ul > li > .doc > h3 {
margin: 0 0 0.5em 0;
font-size: 1.1em;
}
.pickup > ul > li > .doc > h3 > a {
text-decoration: none;
color:#e95735;
}
.pickup > ul > li > .doc > h3 > a:hover {
text-decoration:underline;
}
.pickup > ul > li > .doc > p {
font-family:"Yu Gothic Medium", "游ゴシック Medium";
font-size: 0.9em;
line-height: 1.7;
}


.onlineshop {
position: relative;
width: 100%;
padding: 0 0 70px 0;
background: #FFF;
z-index: 5;
}
.onlineshop::before {
position: relative;
content: "";
display: block;
width: 100%;
height: 120px;
background: url(../img/shop-up.png) no-repeat center top;
background-size: 100%;
}
.onlineshop_doc > .left {
padding: 0 10%;
text-align: center;
}
.onlineshop_doc > .left > h2 {
margin: 0 0 1em 0;
font-size: 2em;
}
.onlineshop_doc > .left > h2 > span {
display: block;
font-size: 0.5em;
}
.onlineshop_doc > .left > p {
margin: 0 0 2.5em 0;
}
.onlineshop_doc > .right {
margin: 0 0 2em 0;
padding: 0 20%;
}
.onlineshop_doc > .right > ul > li {
width: 40%;
margin: 0 5% 30px 5%;
float: left;
}
.onlineshop_doc > .right > ul::after  {content: '';display: table;clear: both;}
.onlineshop > .wrap > .link {
padding: 0 20%;
}
.onlineshop > .wrap > .link > a {
display: block;
 font-family: 'Shuei Yokobuto Min M';
padding: 1em 0;
background: #e95735;
text-align: center;
color: #FFF;
font-size: 1.2em;
text-decoration: none;
transition: all .2s;
}
.onlineshop > .wrap > .link > a:hover {
opacity: 0.7;
}

#footer {
position: relative;
width: 100%;
height: 600px;
}
#footer::before {
position: relative;
content: "";
display: block;
width: 100%;
height: 120px;
background: url(../img/shop-down.png) no-repeat center top;
background-size: 100%;
top: 0;
}
.footer_wrap > .infomation {
padding: 0 10%;
text-align: center;
}
.footer_wrap > .infomation > h1 {
width: 50%;
margin: 0 25% 3em 25%;
}
.footer_wrap > .infomation > p {
font-family:"Yu Gothic Medium", "游ゴシック Medium";
margin: 0 0 2em 0;
color: #FFF;
}
.footer_wrap > .infomation > .sns_footer_wrap::after  {content: '';display: table;clear: both;}
.footer_wrap > .infomation > .sns_footer_wrap {
width: 45%;
margin: 0 27.5%;
}
.footer_wrap > .infomation > .sns_footer_wrap > ul > li {
width: 21.3%;
float: left;
margin: 0 6%;
}
.footer_wrap > .infomation > .sns_footer_wrap > ul > li > a {
display: block;
width: 100%;
transition: all .2s;
}
.footer_wrap > .infomation > .sns_footer_wrap > ul > li > a:hover {
opacity: 0.6;
}

.footer_wrap > .privacy {
margin: 2em 0 0 0;
text-align: center;
}
.footer_wrap > .privacy > a {
color: #FFF;
}
.footer_wrap > .privacy > a:hover {
text-decoration: none;
}
.footer_wrap > .copyright {
margin: 0.5em 0 0 0;
text-align: center;
color: #FFF;
}

/*----------------------------------------------------
to top
----------------------------------------------------*/
.totop {
display: block;
position:fixed;
width:40px;
right:40px;
bottom:15px;
z-index: 9000;
}
.totop > a {
box-sizing: content-box;
display: block;
width: 100%;
padding: 1.2em 0.3em;
text-decoration: none;
background-color:#8A8A8A;
color: #FFF;
font-size: 0.7em;
font-weight: bold;
border: #FFF solid 1px;
border-radius: 800px;
text-align: center;
}

/*-------------------------------------------------------------------------------------------------------------- 768 ---*/
@media print, screen and (min-width:768px){

.overview > h1 {
width: 60%;
margin: 0 20% 4em 20%;
}
.sns_wrap {
width: 35%;
margin: 0 32.5%;
}

.consept > .wrap_wide > .image {
width: 50%;
margin: 0 25% 2em 25%;
}
.consept > .wrap_wide > .txt {
padding: 0 15%;
}


.cafe > .wrap_wide > .cafe_image {
width: 50%;
margin: 0 25% 3em 25%;
}
.cafe_menu {
margin: 0 0 4em 0;
padding: 0 15%;
}
.cafe_menu > .link > a {
display: inline-block;
padding: 1em 2em;
text-align: center;
}


.field_image {
height: 300px;
}

.pickup > ul > li {
padding: 0 15%;
}
.pickup > ul > li > .pickup_image {
width: 25%;
margin: 0 3% 0 0;
}
.pickup > ul > li > .doc {
width: 72%;
}


.onlineshop_doc > .left {
padding: 20px 15% 0 15%;
}
.onlineshop_doc > .right {
padding: 0 10%;
}
.onlineshop_doc > .right > ul > li {
width: 21%;
margin: 0 2% 30px 2%;
float: left;
}
.onlineshop > .wrap > .link {
padding: 0 25%;
}


.footer_wrap > .infomation > h1 {
width: 40%;
margin: 0 30% 3em 30%;
}

}

/*-------------------------------------------------------------------------------------------------------------- 1024 ---*/
@media print, screen and (min-width:1024px){
.wrap_wide {
max-width: 1400px;
margin: 0 auto;

}
.header-wrap {
padding: 0 2.5%;
}

#navi {
display: block;
padding: 15px 0 100px 0;
}
#navi > ul::after  {content: '';display: table;clear: both;}
#navi > ul > li {
float: left;
margin: 0 0.8em 0 0;
font-size: 0.9em;
font-weight: bold;
}
#navi > ul > li > a {
text-decoration: none;
color:#330405;
}
#navi > ul > li > a:hover {
text-decoration: underline;
}

.overview {
width: 50%;
float: left;
padding: 0 0 100px 0;
}

.overview > h1 {
display: block;
width: 80%;
margin: 0 auto 4em auto;
}
.overview > p {
display: block;
width: 90%;
margin: 0 auto 4em auto;
text-align:center;
}
.sns_wrap {
width: 40%;
margin: 0 auto;
}
.sns_wrap > ul > li {
width: 21.3%;
margin: 0 6%;
}

.main_image {
width: 50%;
height: 700px;
float: right;
}
.cb-slideshow,
.cb-slideshow:after {
height: 700px;
}
.cb-slideshow > li > span {
height: 700px;
}


.consept {
height: 750px;
padding: 0;
}
.consept > .wrap_wide > .image {
position: absolute;
width: 32%;
margin: 0;
top: 55%;
left: 5%;
transform: translateY(-50%);
}
.consept > .wrap_wide > .txt > h2 {
margin: 0 0 1.5em 0;
}
.consept > .wrap_wide > .txt {
position: absolute;
width: 63%;
padding: 0 3%;
top: 50%;
right: 0;
transform: translateY(-50%);
}


.cafe > .wrap_wide > .cafe_image {
width: 40%;
margin: 0 30% 3em 30%;
}

.dimsum_menu {
padding: 0 15%;
}

.field_image {
height: 400px;
}

.pickup {
margin: 0 0 6em 0;
padding: 0 5%;
}
.pickup > ul::after  {content: '';display: table;clear: both;}
.pickup > ul > li {
width: 47%;
margin: 0 1.5% 2em 1.5%;
padding: 0;
float: left;
}
.pickup > ul > li > .pickup_image {
width: 30%;
margin: 0 3% 0 0;
}
.pickup > ul > li > .doc {
width: 67%;
}


.onlineshop_doc > .right {
padding: 0 20%;
}


.footer_wrap > .infomation {
position: absolute;
padding: 0;
text-align: left;
left: 5%;
bottom: 80px;
}
.footer_wrap > .infomation > h1 {
width: 50%;
margin: 0 0 2em 0;
}
.footer_wrap > .infomation > .sns_footer_wrap {
width: 45%;
margin: 0 ;
}
.footer_wrap > .privacy {
position: absolute;
margin: 0;
text-align: right;
right: 5%;
bottom: 120px;
}
.footer_wrap > .copyright {
position: absolute;
margin: 0;
text-align: right;
right: 5%;
bottom: 80px;
}


}

/*-------------------------------------------------------------------------------------------------------------- 1200 ---*/
@media print, screen and (min-width:1200px){

.header-wrap {
padding: 0 4% 0 2.5%;
}
#navi {
padding: 25px 0 230px 0;
}

#navi > ul > li {
float: left;
margin: 0 1.4em 0 0;
font-size: 1em;
}
.overview {
padding: 0 0 150px 0;
}
.sns_wrap {
width: 27%;
margin: 0 auto;
}
.main_image {
height: 870px;
}
.cb-slideshow,
.cb-slideshow:after {
height: 870px;
}
.cb-slideshow > li > span {
height: 870px;
}

.consept {
height: 600px;
margin: 0 0 100px 0;
background-size: 100% 100%;
}
.consept > .wrap_wide > .image {
width: 30%;
left: 10%;
}
.consept > .wrap_wide > .txt {
width: 63%;
right: 3%;
}


.cafe {
margin: 0 0 100px 0;
padding: 0 10%;
}
.cafe::after  {content: '';display: table;clear: both;}
.cafe > .wrap_wide > .cafe_image {
width: 40%;
margin: 0 5% 0 0;
float: left;
}
.cafe_menu {
width: 50%;
margin: 0 0 0 5%;
padding: 0;
float: right;
}


.dimsum {
margin: 0 0 150px 0;
}
.dimsum_menu {
padding: 0;
text-align: left;
}
.dimsum_image {
margin: 0 0 2em 0;
}
.dimsum_menu > .txt_block {
width: 45%;
margin: 0 5% 0 0;
float: left;
}
.dimsum_menu > .sub_image {
width: 47%;
float: right;
}

.field_image {
height: 450px;
}

.strawberry_field {
margin: 0 0 150px 0;
}


.pickup > ul {
max-width: 1400px;
margin: 0 auto;
}
.pickup > ul > li > .doc > h3 {
font-size: 1.3em;
}


.onlineshop::before {
height: 150px;
}
.onlineshop_doc > .left > p {
padding: 0 15%;
}
.onlineshop_doc > .right {
padding: 0 25%;
}
.onlineshop > .wrap > .link {
padding: 0 35%;
}


#footer::before {
height: 150px;
}
#footer {
height: 600px;
}

}

/*-------------------------------------------------------------------------------------------------------------- 1400 ---*/
@media print, screen and (min-width:1400px){

.main_image {
width: 45%;
height: 960px;
}
.cb-slideshow,
.cb-slideshow:after {
height: 960px;
}
.cb-slideshow > li > span {
height: 960px;
}

.consept {
height: 700px;
margin: 0 0 150px 0;
}
.consept > .wrap_wide > .txt {
width: 50%;
right: 8%;
}


.onlineshop::before {
height: 180px;
}
.onlineshop_doc > .right {
padding: 0 30%;
}


#footer::before {
height: 180px;
}

}

/* 読みやすさ改善のためのスタイル */
body {
    background-color: #F5F5DC;
    color: #4A3728;
    font-family: "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", "游明朝", YuMincho, "メイリオ", Meiryo, serif;
    font-size: 16px;
    line-height: 1.6;
}

h1, h2, h3 {
    color: #2C1E16;
}

a {
    color: #8B4513;
}

.media-list {
    background: linear-gradient(135deg, #ffecd2 0%, #fcb69f 100%);
    padding: 30px;
    border-radius: 10px;
    box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
    margin: 20px 0;
}

.media-item {
    background-color: rgba(255, 255, 255, 0.8);
    margin-bottom: 20px;
    border-bottom: 1px solid #D2B48C;
    padding: 15px;
    border-radius: 5px;
    transition: all 0.3s ease;
}

.media-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}