@charset "UTF-8";

body{
display: none;
font-size: 15px;
color: #404040;
background-color: #fff;
font-family: kinuta-maruminfuji-stdn, serif;
line-height: 1.5;
}

img{
vertical-align:bottom;
max-width:100%;
height:auto;
}

p{
letter-spacing: 0.05em;
}


/*ーーーーーーーーーーーーーートップページに戻るボタンーーーーーーーーーーーーーー*/
/*リンクの形状*/
#page-top a{
    display: flex;
    justify-content: center;
    align-items: center;
    background: #fbfaf3;
    border-radius: 90px;
	border:1.5px solid #BFBFBF;
    width: 50px;
    height: 50px;
    color: #000;
    text-align: center;
    text-transform: uppercase;
    text-decoration: none;
    font-size: 0.6rem;
    transition: all 0.3s;
}

#page-top a:hover{
	background: #777;
	color: #fff;
}

/*リンクを右下に固定*/
#page-top {
	position: fixed;
	right: 10px;
	bottom:10px;
	z-index: 2;
    /*はじめは非表示*/
	opacity: 0;
	transform: translateX(100px);
}

/*　左の動き　*/
#page-top.LeftMove{
	animation: LeftAnime 0.5s forwards;
}

@keyframes LeftAnime{
  from {
    opacity: 0;
	transform: translateX(100px);
  }
  to {
    opacity: 1;
	transform: translateX(0);
  }
}

/*　右の動き　*/
#page-top.RightMove{
	animation: RightAnime 0.5s forwards;
}
@keyframes RightAnime{
  from {
  	opacity: 1;
	transform: translateX(0);
  }
  to {
  	opacity: 1;
	transform: translateX(100px);
  }
}


span1 ,.shopbutton{
font-size: 13px;
color:#CCC;
margin-left: 20px
}


header,#top-main,footer{
width:100%;
}

nav ul{
margin-top: 50px;
}
nav ul li{
margin: 0 18%;
}

nav ul li a{
text-decoration: none;
color: #000;
font-weight: normal;
text-align: center;
line-height: 50px;
font-size: 18px;
}

nav ul li a,.subname:hover{
-webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-transition: all .3s;
  transition: all .3s;
 color:#000;
}

nav ul li img{
margin-bottom: 10px;
width: 45%;
margin-left: 20%;
}
#top-main{
position: relative;
}

header{
position: relative;
}

h1{
margin:4.0263% 0 0 5.5%;
padding: 0;
position:fixed;
z-index: 2;
width:50px;
height:72px;
font-size: 16px;
}

h1 a{
color: #404040;
text-decoration: none;
}

h2{
font-size: 26px;
color: #fff;
font-weight: normal;
position: absolute;
top:70%;
transform:translateY(-50%);
left:70%;
-ms-writing-mode: tb-rl;
 writing-mode: vertical-rl;
	letter-spacing: 0.2em;
/*	line-height: 50px;*/
	height: 450px;
}
/*下から上へ*/
.fadeup{
animation-name:fadeupAnime;
animation-duration:3s;
animation-fill-mode:forwards;
opacity:0;
}

@keyframes fadeupAnime{
  from {
    opacity: 0;
  transform: translateY(150px);
  }

  to {
    opacity: 1;
  transform: translateY(-100px);
  }
}

h4{
font-size: 25px;
font-weight: normal;
margin-bottom: 30px;
margin: -6em 0 30px;
text-align: center;
}
#coment{
margin-bottom: 80px;
margin-top: 150px;
text-align: center;
}

main{
padding: 0 4.67%;
}

span.price{
font-size:12px;
}

section p{
margin-top: 20px;
margin-bottom: 90px;
}

.section img{
width: 330px;
height: auto;
margin-top: 40px;
transition: 0.5s;
transition-duration: 0.3s;
}

.section img:hover{
transform: scale(1.05);
}

.section{
padding:0 20px 5px;
text-align: center;
}

.section:hover{
/*生成り色*/
background-color:#fbfaf3;
transition: 0.3s;
}

	.section{
/*	display: flex;*/
	opacity : 0;
	visibility: hidden;
	transition: 1s;
	transform: translateY(30px);
	margin: 0 5px;
	}
	
/*	奇数がreverseする*/
.section:nth-child(odd){
flex-direction: row-reverse;
}

.title1,.title3,.title5,.title6{
  font-size: 10px;
  margin:30px 90px 30px 80%;
  position: relative;
  opacity : 0;
	visibility: hidden;
	transition: 1s;
	transform: translatex(30px);
}

.title2,.title4{
  font-size: 10px;
  margin-top: 90px;
	margin-bottom: 30px;
  position: relative;
  opacity : 0;
	visibility: hidden;
	transition: 1s;
	transform: translatex(-30px);
}

/*アニメーション要素までスクロールした時のスタイル*/
.active{
	opacity: 1;
	visibility: visible;
	transform: translatex(0);
}


h3{
font-size: 30px;
font-weight: normal;
-ms-writing-mode: tb-rl;
 writing-mode: vertical-rl;
padding-top: 60px;
letter-spacing:0.3em;
}

h5{
font-size: 20px;
margin: 25px 0 0;
font-weight: bold;
text-align:center;
}


h6{
border-left:solid #404040 1px;
height: 100px;
-ms-writing-mode: tb-rl;
writing-mode: vertical-rl;
-webkit-text-orientation: sideways;
text-orientation: sideways;
font-size: 12px;
position: absolute; 
border-bottom: thin #A92F31;
top:0;
left: 60px
}

p.s_tittle{
text-align: left;
font-size: 17px;
margin-top:15px; 
font-weight: bold;
}

.season{
font-size: 13px;
color: #B0B0B0;
text-align: left;
letter-spacing: 1px;
}

#shain{
position: relative;
text-align: center;
}
#top-recommendation{
position: absolute;
font-size: 35px;
text-align: left;
margin-left: 10%;
font-weight: bold;
left:-10%;
top:10px;
}

#shain p{
margin: 0 auto;
text-align:left;
}

.cancel{
color: #e99372;
text-align: left;
}


.shopbutton:hover{
background: #FFBA89;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
-webkit-transition: all .3s;
transition: all .3s;
}

.shopbutton{
background-color:#000;
border-radius: 30px;
width: 100px;
line-height: 40px;
text-align: center;
margin: 20px auto;
}

.fruits {
margin-bottom: 10px;
text-align: left;
}



/*------------instagram----------------*/
.insta_p{
margin-left: 5%;
}


/*ーーーーーーproducts内ショップリンクーーーーー*/
.shop a{
color: #404040;
text-decoration: none;
display: inline-block;
padding: 20px;
border: #ccc 1px solid;
border-radius: 90px;
transition: all .3s;
text-align: center;
margin: 5px 5%;
width: 220px;
}

.shop a:hover{
background: #e49474;
border: #e49474 1px solid;
transition: all .3s;
}

.shop{
text-align:center;
}
/*
.netshop{
text-align: center;
color: #47acac;
margin: 100px 0 10px;
}
*/

/*ーーーーーーーーQ&Aーーーーーーーーーー*/
#qa{
margin-top: -100px;
}

p.q_tittle{
margin:45px 0 0 5px;
font-size: 18px;
margin-bottom: 5px;
}

p.question {
cursor: pointer;
background-color:#f9f9f9;
padding: 10px;
margin: 10px 0 10px 20px;
}
p.question:hover {
text-decoration: underline;

}
p.answer {
display: none;
background: #f2f2f2;
margin-left: 3em;
margin-bottom: 30px;
padding: 10px 20px 10px 20px;
}

span .ans{
background-color: #565656;
}
/*-------------------------------*/
/*=================slick=====*/
.slider {
width: 100%;
margin: 0 auto 80px;
}

.slick-slide img {
width: 100%;
height: auto;
}

.mypattern {
width: 100%;
}

.mypattern .slick-slide {
margin: 10px 0px;
}

/*slick setting*/
.mypattern .slick-slide:not(.slick-center) {
-webkit-filter: opacity(70%);
-moz-filter: opacity(70%);
-o-filter: opacity(70%);
-ms-filter: opacity(70%);
filter: opacity(70%);
transition: 0.2s linear;
}

/*slick setting*/
.slick-prev:before,
.slick-next:before {
color: #000;
}


.slick-list{
overflow: visible;
}

.mypattern a{
color: #000;
text-decoration: none;
}
.img-box{
overflow: hidden;
}

.kiji{
padding: 10px;
transition-duration: 0.3s;
}

.kiji:hover{
background-color:#fbfaf3;
transition: 0.3s;
}
.kiji img{
transition: 0.5s;
transition-duration: 0.3s;
}
.kiji img:hover{
transform: scale(1.1);
}

.number{
font-size: 30px;
font-family:  'Raleway', sans-serif;
float:left;
margin: 7px 13px 0 0;
color: #47acac;
}

.topic_text{
font-size: 17px;
font-weight: bold;
margin: 20px 0 10px;
}

dd {
padding: 0 0 10px 50px;
margin-bottom: 30px;
border-bottom: 1px solid #ccc;
}
dt{
margin-bottom:20px;
font-size: 20px;
}

#us{
width: 80%;
text-align: center;
margin:20px auto;
}
/*-------------instagram表示------------*/
.insta_list{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    list-style: none;
    margin: 3vw 0 2vw;
}

.insta_list img{
    width: 50px;
    height: auto;
    padding:.25vw;
}

/*-----------------about-----------------*/
.logo_meaning{
font-size: 18px;
margin-bottom:5px;
}

.about_text01{
text-align: center;
font-size: 12px;
line-height: 1.5;
margin: -20px 0 40px;
}

.about_text02{
font-size: 18px;
margin: 20px 0 -20px;
}

.picture{
display: block;
text-align: center;
}

.picture_logo img{
width: 40%;
justify-content: center;
transform: translateX(-27px);
}

.picture-img{
padding: 0 -20px;
}
/*
.img_box {
background-image: url(../images/sub_img/sub_img1@2x.jpg);
position: relative;
background-attachment:scroll;
background-repeat: no-repeat;
background-position: center center;
z-index: 2;
}

.www{
height: 400px;
}
*/

p.access {
line-height: 25px;
margin-top: -40px;
}

p.tel a{
 color:#000;
 text-decoration: none;
}

/*-------------footer--------------*/
#footer_nav{
display: flex;
font-size: 13px;
margin-top: 10px;
justify-content: center;
}

#footer_nav a {
font-size: 14px;
display: block;
margin: auto;
color: #000;
text-align: left;
text-decoration: none;
}

#footer_nav a:hover {
color: #ccc;
}
  
#footer_nav .subname{
color: #000;
font-size: 8px;
margin-left: 10px;
}
   
#footer_nav .subname:hover{
color: #ccc;
}

.footer_nav01{
margin-right: 10px;
}
.footer_nav02{
margin-left: 10px;
}


footer small{
font-size: 12px;
line-height: 40px;
}

footer{
text-align: center;
background-color: #FFFFFF;
margin: 0 auto;
border-top: #414141 solid 1px;
width: 90%;
}

#products,#news,#topics,#access,#question,#aboutus{
padding-top: 40px;
}

article iframe{
margin: 30px 0 190px;
}

aside #sns{
text-align: center;
}

#sns ul {
display: flex;
margin: 0 auto;
justify-content: space-between;
width: 140px;
padding:50px 0 30px;
}

footer a{
color: #414141;
text-decoration: none;
font-size: 13px;
margin: 0 10px;
transition: all 0.2s;
}
footer a:hover{
color: #ccc;
}

#mini-menu{
margin: 10px 0;
}

.facebook,.twitter,.instaglam{
  width: 27px;
  height: 27px;
}

/*====== 9-1-1 縦線が動いてスクロールを促す =======*/

/*スクロールダウン全体の場所*/
.scrolldown1{
/*描画位置※位置は適宜調整してください*/
position:absolute;
left:50%;
bottom:70px;
/*全体の高さ*/
height:60px;
z-index: 2;
}

/*Scrollテキストの描写*/
.scrolldown1 span{
/*描画位置*/
position: absolute;
left:9px;
top: -50px;
/*テキストの形状*/
color: #eee;
font-size: 0.8em;
letter-spacing: 0.05em;
-ms-writing-mode: tb-rl;
writing-mode: vertical-rl;
padding-top: 60px;
}

/* 線の描写 */
.scrolldown1::after{
	content: "";
    /*描画位置*/
	position: absolute;
	top: 0;
    /*線の形状*/
	width: 1px;
	height: 40px;
	background: #eee;
    /*線の動き1.4秒かけて動く。永遠にループ*/
	animation: pathmove 2.5s ease-in-out infinite;
	opacity:0;
}

/*高さ・位置・透過が変化して線が上から下に動く*/
@keyframes pathmove{
	0%{
		height:0;
		top:0;
		opacity: 0;
	}
	30%{
		height:40px;
		opacity: 1;
	}
	100%{
		height:0;
		top:50px;
		opacity: 0;
	}

}


/*タブレット*/
@media screen and (min-width:600px){

h1{
width:70px;
}

nav ul{
margin-top: 100px;
}

p{
/*font-size:16px;*/
line-height: 25px;
}

.active{
opacity: 1;
visibility: visible;
transform: translateY(0px);
}

#shain-product{
display: flex;
visibility: hidden;
justify-content: center;
}

.section img{
width:330px;
}

.text{
margin-top: auto;
margin-left: 5%;
}

#coment{
margin: 150px 5% 100px;
}

#shain .width530,#shain p{
width: 530px;
}

#shain{
left: 0;
top: 0;
}

.fruits{
width: 90%;
}

.shop a{
width: 250px;
padding: 20px 60px;
}
.kiji{
padding: 5%;
}

.img_box {
background-image: url(../images/sub_img/sub_img1@2x.jpg);
position: relative;
background-attachment:fixed;
background-repeat: no-repeat;
background-position: center center;
z-index: 2;
width: 670px;
}

/*
.www{
    margin-top: 60px;
}
*/


}



/*PC*/
@media screen and (min-width:960px){

#wrapper{
width:100%;
flex-wrap: wrap;
display: flex;
justify-content: space-between;
}

.scrolldown1{
height: 100px;
}

aside{
position: relative;
width:18.30%;
}

h2{
font-size: 28px;
top:60%;
height: 400px;
}

.text{
width: 500px;
}

span1{
color: #414141;
}

#top-recommendation{
font-size: 45px;
left: 10%;
top: 0;
}

main{
padding: 0;
width: 81.69%;
}

article{
margin: 0 10%;
}

section p{
width:400px;
}

.section{
width: 35%;
}

#shain{
left:30px;
}

/*
#topics{
margin: 0 20%;
}
*/

.picture img {
  width: 100%;
  height: auto;
  justify-content: center;
}

/*
.www{
padding: 100px 0;
}
*/

/*-------------footer--------------*/
#footer_nav{
display: flex;
font-size: 13px;
margin-top: 10px;
justify-content: center;
line-height: 27px;
}

#footer_nav a {
font-size: 16px;
}
  
#footer_nav .subname{
font-size: 10px;
}

.footer_nav01{
margin-right: 15px;
}
.footer_nav02{
margin-left: 15px;
}

.footer_logo{
margin: 10px 0 10px;
width: 140px;
}



}