@charset "UTF-8";
body {
	font: 100%/1.4 "游明朝体", "Yu Mincho", YuMincho, "ヒラギノ明朝 Pro", "Hiragino Mincho Pro", "MS P明朝", "MS PMincho", serif;
	font-size : 14px;
	font-size : 1.4rem;
	margin: 0;
	padding: 0;
	color: #707070;
}
body.fade{
    animation: fadeIn 2s ease 0s 1 normal;
    -webkit-animation: fadeIn 2s ease 0s 1 normal;
}


@keyframes fadeIn {
      0% {opacity: 0}
    100% {opacity: 1}
}
@-webkit-keyframes fadeIn {
    0% {opacity: 0}
    100% {opacity: 1}
}

ul, ol, dl {padding: 0;margin: 0;}
a img { border: none;}
a:link {color:#414958;text-decoration:none;}
a:visited {color: #4E5869;text-decoration:none;}
a:hover, a:active, a:focus {text-decoration: none;}
.fr {float: right;}
.fl {float: left;}
.clearfloat { clear:both;height:0;font-size: 1px;line-height: 0px;}

.img120{width : 120%;}
.img115{width : 115%;}
.img110{width : 110%;}
.img100{width : 100%;}
.img95{width : 95%;}
.img90{width : 90%;}
.img85{width : 85%;}
.img80{width : 80%;}
.img75{width : 75%;}
.img70{width : 70%;}
.img68{width : 68%;}
.img65{width : 65%;}
.img60{width : 60%;}
.img50{width : 50%;}
.img40{width : 40%;}
.img35{width : 35%;}
.img30{width : 30%;}
.img25{width : 25%;}
.img20{width : 20%;}
.img15{width : 15%;}
.img10{width : 10%;}
.img5{width : 5%;}
.cen{margin : 0 auto;}
.dtdn{display : none;}
.tb{font-weight : bold;}
.tInB{display:inline-block}
.relative{position : relative;}
.ub{background:linear-gradient(transparent 70%, #FFFF00 0%);}

/** 
SP NAV ******************/
#spNav{
	background-color : #fff;
	opacity:0.9;
	z-index : 12;
}
button.drawer-hamburger{
	display : none;
}
ul.drawer-menu{
	padding-top : 10%;
}
ul.drawer-menu li{
	font-family:"fGreco";
	text-align : right;
	width : 90%;
	padding-right : 10%;
	line-height : 2.5;
}

.drawer-hamburger-icon,
.drawer-hamburger-icon:before,
.drawer-hamburger-icon:after {
  width: 100%;
  height: 2px;
  transition: all var(--drawer-transitionDuration) var(--drawer-transitionFunction);
  background-color: #fff;
}

.drawer-hamburger{
	background-color : #006e54;}

.pcdn{
	display : none;
}


/**
Index 
*************************************************************************************************************/

#wrapper{
	font-size : 1.2rem;
	line-height : 1.6;
}
#header{
	width : 100%;
	padding-bottom : 1%;
}

ul#header-nav{
	float : right;
	font-size: 0;
	box-sizing: border-box;
	padding: 4px;
	list-style: none;
}
ul#header-nav li{
	display : inline-block;
	padding-right : 23px;
	font-family:'fGreco';
	padding-top : 3%;
	font-size: 24px;
	margin: 0 8px;
}
ul#header-nav li a {
	text-decoration: none;
	padding-bottom: 3px;
	display: block;
}
ul#header-nav li a:after {
	content: '';
	width: 0;
	transition: all 0.3s ease;
	border-bottom: 2px solid #666;
	display: block;
}
ul#header-nav li a:hover:after {
	width: 100%;
	border-bottom: 2px solid #666;
}

#eyeCatch{
	text-align : center;
	margin-top : 8%;
	position : relative;
}
#eyeCatch img{
	width : 80%;
}

#news{
	width : 70%;
	margin: 5% auto 15%;
}
#news a{
	font-weight : 600;
}
#news h2{
	font-size : 1.4rem;
	margin-bottom : 2%;
}
#news ul{
	width : 100%;
	margin :0 auto;
}
#news ul li{
	padding : 1.5% 0 1.5% 1%;
	border-bottom : dashed 1px #444444;
	font-size : 1rem;
}



.instaIcon{
	width : 1.5% !important;
	position : absolute;
	top : 70%;
	left : 5%;
}

.fixShop{
	position : fixed;
	top : 70%;
	left : 93%;
	width : 3% !important;
	z-index : 150;
}
.fixTop{
	position : fixed;
	top : 80%;
	left : 93%;
	width : 3% !important;
	z-index:150;
}

h2{
	font-size : 1.9rem;
	padding-bottom : 3%;
}
#introduce{
	margin : 8% 0 2%;
}

#section01 h2{
	text-align : right ;
	padding-right :12.5%;
}
#section01 p{
	width : 50%;
	padding-left : 38%;
	text-align: left;
}

#top_organics{
	padding : 4% 0 8% 12%;
}

#top_evaporate{
	padding : 0 0 8% 12%;
}

#section03 p{
	width : 60%;
}

.movie{
	width : 60%;
	margin-left : 30%;
	margin-top : 3%;
	position : relative;
	padding-top :33.75%
}
.movie iframe{
	width : 100% !important;
	height : 100% !important;
	position : absolute;
	top : 0;
	right : 0;
}
	

#section04{
	margin-top : 10%;
	position : relative;
}
#section04 img{
	vertical-align:bottom;
}
#section04 h2{
	text-align : center;
	width : 100%;
	position : absolute;
	top : 15%;
}
#section04 p{
	width : 40%;
	position : absolute;
	top : 25%;
	left : 30%;
}
p.copy{
	text-align : center;
	width : 100%;
	top : 96%;
	left:0;
	z-index:100;
	font-size : 0.8rem;
	padding-bottom : 2%;
}
#section04 p.copy{
	text-align : center;
	width : 100%;
	top : 96%;
	left:0;
	z-index:100;
	font-size : 0.8rem;
}

.swiper-container {
    width: 100%;
}




a.button{
	margin : 9% auto 20%;
	padding : 20px;
	width : 20%;
  display: inline-block;
  text-align: center;
  text-decoration: none;
  outline: none;
	font-size : 1.2rem;

}
.button::before,
.button::after {
  position: absolute;
  z-index: -1;
  display: block;
  content: '';
}
.button,
.button::before,
.button::after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-transition: all .3s;
  transition: all .3s;
}

.button {
  position: relative;
  z-index: 2;
  background-color: #fff;
  border: 2px solid #333;
  color: #333;
  overflow: hidden;
}
.button:hover {
  color: #fff;
  border-color: #006e54!important;

}
.button::after {
  top: 0;
  left : -100%;
  width: 100%;
  height: 100%;
}
.button:hover::after {
  top: 0;
  left : 0;
  background-color: #006e54;
}

/** ==========================
Single page 
=========================== **/
#singleHeader {
	width : 100%;
}
#singleHeader img{
	width : 7%;
	padding : 3% 88% 3% 5%;
}
.newsHeader{
	text-align : center;
	width : 100%;
}
.newsHeader h2{
	font-size : 3rem !important;
	letter-spacing: 1.4px !important;
}
.news_section{
	width : 85%;
	margin : 0 auto;
	line-height : 1.8;
	letter-spacing: 1.3px;
}
.news_section img{
	width : 80%;
	padding : 3% 0 1%;
}
.news_section p.date{
	font-weight : bold;
	margin : 2% 0;
	font-size : 0.9rem;
}
.newsTitle{
	font-size : 1.4rem;
}
.newsText{
	font-size : 1rem;
	padding: 3% 0;
	width : 80%;
}
table.newsTable{
    table-layout: fixed;
}
table.newsTable{
	width : 100%;
	text-align : left;
}
table.newsTable th{
	width : 10%;
}
table.newsTable td{
	width : 78%;
	padding-left : 2%;
}
table.newsTable th,.news_section table.newsTable td{
	font-size : 1rem;
}
.news_section hr{
	margin : 3% 0;
}


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

}

@media screen and (min-width : 1660px) {
ul#header-nav li{
	padding-top : 5.5%;
	font-size: 25px;
}
}

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

@media screen and (max-width : 1240px) {
}

@media screen and (max-width : 1150px) {
}

@media screen and (max-width : 960px) {
	
#eyeCatch{
	text-align : center;
	margin-top : 4%;
	position : relative;
}
#eyeCatch img{
	width : 90%;
}
.instaIcon{
	width : 2% !important;
	top : 85%;
	left : 2%;
}

.fixShop{
	top : 70%;
	left : 93%;
	width : 4% !important;
}
.fixTop{
	position : fixed;
	top : 80%;
	left : 93%;
	width : 4% !important;
}
	
	
button.drawer-hamburger{
	display : inherit;
}
ul#header-nav{
	display : none;
}
}

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

#eyeCatch{
	margin-top : 0 !important;
}
#eyeCatch img{
	width : 100%;
}
#header{
	margin : 0;
	padding : 0;
}
.instaIcon{
	width : 3.5% !important;
	top : 120%;
	left : 2.5%;
}

.fixShop{
	top : 70%;
	left : 91%;
	width : 5.5% !important;
}
.fixTop{
	top : 80%;
	left : 91%;
	width : 5.5% !important;
}
	
#wrapper{
	font-size : 1rem;
	line-height : 1.8;
}
	
	
h2{
	font-size : 1.5rem;
	padding-bottom : 4%;
}
#introduce{
	margin : 8% 0 2%;
}

#section01 h2{
	text-align : right ;
	padding-right :12.5%;
}
#section01 p{
	width : 60%;
	padding-left : 30%;
text-align: justify;
text-justify: inter-ideograph;
}

#top_organics{
	padding : 4% 0 8% 12%;
}

#top_evaporate{
	padding : 0 0 8% 12%;
}

#section03 p{
	width : 75%;
	text-align: justify;
	text-justify: inter-ideograph;
}

.movie{
	width : 80%;
	margin : 0 auto 10%;
	padding-top :45%
}	

#section04{
	margin-top : 25%;
}
#section04 h2{
	top : 1%;
}

#section04 p.copy{
	top : 95%;
	font-size : 0.7rem;
	color : #fff;
}

#section04 p{
	width : 55%;
	position : absolute;
	top : 15%;
	left : 25%;
}

/**
image scale ***********************************************/
.iScale img{
  	transition: none;
} 
.iScale img:hover{
		-webkit-transform:none;
		-moz-transform: none;
		transform: none;
}

	
	

}
@media screen and (max-width : 600px) {
#wrapper{
	font-size : 1rem;
	line-height : 1.8;
}
	
#news{
	width : 85%;
	margin: 8% auto 25%;
}
#news h2{
	font-size : 1.3rem;
	margin-bottom : 1.5%;
}
#news ul li{
	font-size : 0.9rem;
}
	
.instaIcon{
	width : 4% !important;
	position : fixed;
	top : 60%;
	left : 87.2%;
	opacity:0.8;
	z-index : 150;
	display : none;
}

.fixShop{
	top : 80%;
	left : 85%;
	width : 8.5% !important;
}
.fixTop{
	display : none;
}


	
h2{
	font-size : 1.3rem;
	padding-bottom : 5%;
}
#introduce{
	margin : 15% 0 10%;
}

#section01 h2{
	text-align : left ;
	padding-right :0;
	padding-left : 10%;
}
#section01 p{
	width : 80%;
	padding-left : 10%;
text-align: justify;
text-justify: inter-ideograph;
}

#top_organics{
	padding : 6% 0 15% 9%;
}
#top_organics p{
	width : 85%;
}
#top_evaporate{
	padding : 0 0 12% 9%;
}

#section03 p{
	width : 80%;
	text-align: justify;
	text-justify: inter-ideograph;
}

.movie{
	width : 80%;
	margin : 0 auto 20%;
	padding-top :45%
}	

#section04{
	margin-top : 25%;
}
#section04 h2{
	top : 1%;
}
#section04 p{
	width : 60%;
	position : absolute;
	top : 15%;
	left : 20%;
}
#section04 p.copy{
	font-size : 0.6rem;
}
.spdn{
	display : none;
}
	
#singleHeader img{
	width : 15%;
	padding : 3% 80% 3% 5%;
}	
	

.news_section img{
	width : 100%;
}
.news_section p.date{
	font-weight : bold;
	font-size : 0.9rem;
}
.newsTitle{
	font-size : 1.4rem;
}
.newsText{
	font-size : 1rem;
	padding: 3% 0;
	width : 100%;
}	
.newsHeader h2{
	font-size : 2.4rem !important;
	letter-spacing: 1.4px !important;
}
table.newsTable th{
	width : 20%;
}
table.newsTable td{
	width : 78%;
	padding-left : 1%;
}	
	
}
@media screen and (max-width : 500px) {
h2{
	font-size : 1.2rem;
	padding-bottom : 8%;
	font-weight : bold;
}
#wrapper{
	font-size : 0.95rem;
	line-height : 1.6;
}
.instaIcon{
	width : 4.5% !important;
	position : fixed;
	top : 65%;
	left : 87.5%;
	opacity:0.8;
	z-index : 150;
}


.fixShop{
	top : 80%;
	left : 85%;
	width : 10% !important;
}
.fixTop{
	display : none;
}

#top_organics{
	padding : 10% 0 15% 9%;
}
#top_evaporate{
	padding : 9% 0 12% 9%;
}


.movie{
	width : 90%;
	margin : 0 auto 20%;
}	

#section04 h2{
	top : -5%;
}
#section04 p{
	width : 80%;
	position : absolute;
	text-align: justify;
	text-justify: inter-ideograph;
	top : 15%;
	left : 10%;
}
	.newsHeader h2{
	font-size : 2rem !important;
	letter-spacing: 1.4px !important;
}
}
@media screen and (max-width : 400px) {
.instaIcon{
	width : 5% !important;
	top : 65%;
	left : 87.5%;
}
#section04 p.copy{
	top : 94%;
	font-size : 0.5rem;
}
.pcdn{
	display : inherit;
}

.news_section{
	line-height : 1.8;
	letter-spacing: 1.2px;
}
.newsTitle{
	font-size : 1.2rem;
}
.newsText{
	font-size : 1rem;
}	
	.news_section ul li{
		font-size : 1rem;
	}
	
}