* {
	margin: 0;
	padding: 0;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	-o-box-sizing: border-box;
	-ms-box-sizing: border-box;
	box-sizing: border-box;
}


ul, li{
list-style:none;
}

img{
	width:100%;
	height:auto;
}


html {
font-size: 100%;
overflow-y: scroll;
-webkit-font-smoothing: antialiased;
text-rendering:optimizeLegibility;
}


body{
font-family: "Times New Roman", Times, 游明朝,"Yu Mincho",YuMincho,"Hiragino Mincho ProN",HGS明朝E,serif;
}


body#home{
	overflow: hidden;
}


a{
	text-decoration: none;
	display:block;
	color:#000;
}






.sub_grand_menu{
	position:fixed;
	top: 20px;
	right: 18px;
	z-index:9999;
	width: 54px;
	-webkit-transition: .6s cubic-bezier(0.78, .18, .34, .98);
	-moz-transition: .6s cubic-bezier(0.78, .18, .34, .98);
	-ms-transition: .6s cubic-bezier(0.78, .18, .34, .98);
	-o-transition: .6s cubic-bezier(0.78, .18, .34, .98);
	transition: .6s cubic-bezier(0.78, .18, .34, .98);
}



.sub_grand_menu .button-navi-icon {
	display: block;
	position: absolute;
	top: 50%;
	left: 50%;
	width: 24px;
	height: 2px;
	margin: 0px 0 0 -11px;
	background: #000;
}

.sub_grand_menu .button-navi-icon:after, .sub_grand_menu .button-navi-icon:before {
	display: block;
	content: "";
	position: absolute;
	top: 50%;
	left: 0;
	width: 24px;
	height: 2px;
	background: #000;
	-webkit-transition: 0.3s ease-out;
	-moz-transition: 0.3s ease-out;
	-ms-transition: 0.3s ease-out;
	-o-transition: 0.3s ease-out;
	transition: 0.3s ease-out;
}

.sub_grand_menu .button-navi-icon:before {
	margin-top: -8px;
}

.sub_grand_menu .button-navi-icon:after {
	margin-top: 6px;
}


.sub_grand_menu_top{
	padding: 20px 10px;
	overflow:hidden;
}

.sub_grand_menu_top .sub_menu ul li{
	display: inline-block;
	padding:0 20px;
}

.sub_grand_menu .button-navi-icon.close:before, .sub_grand_menu .button-navi-icon.close:after {
	margin-top: 0;
	background: #fff;
}

.sub_grand_menu .button-navi-icon.close:after {
	margin-left: 0px;
}

.button-navi-icon.close:after {
	-moz-transform: rotate(45deg);
	-ms-transform: rotate(45deg);
	-webkit-transform: rotate(45deg);
	transform: rotate(45deg);
}

.button-navi-icon.close:before {
	-moz-transform: rotate(-45deg);
	-ms-transform: rotate(-45deg);
	-webkit-transform: rotate(-45deg);
	transform: rotate(-45deg);
}

.button-navi-icon.close {
	background: transparent;
}

.button-close{
	position:absolute;
	padding: 20px 15px;
	width: 54px;
	top: 0;
	z-index:-9999;
}

#menu_index{
	position:fixed;
	top: 0px;
	right: 0;
	width: 32%;
	height:100%;
	background:rgba(0,0,0,.8);
	z-index: 9998;
}


#product #menu_index{
	width: 50%;
}


#menu_index.active{
	width: 50%;
}



.menu_index_inner{
	width: auto;
	height: 100%;
	overflow: scroll;
	margin: 0 auto;
	position: relative;
	padding: 0 60px;
}

.menu_top{
	position: relative;
	transform: translateY(-30%);
	-webkit-transform: translateY(-30%);
	-moz-transform: translateY(-30%);
	-o-transform: translateY(-30%);
	-ms-transform: translateY(-30%);
	top: 30%;
}


.menu_top li{
	margin-bottom:30px;
	text-align: center;
}

.menu_top li a{
	color:#fff;
	letter-spacing: 2px;
	text-align:center;
	font-family: roboto, sans-serif;
	position:relative;
}


.menu_top.page_menu li a{
	font-size: 13pt;
	letter-spacing: 3px;
	font-weight:bold;
	display:inline-block;
}

.menu_top.page_menu li a:after{
	content:"";
	display:block;
	background:#fff;
	width:0%;
	height:2px;
	-webkit-transition: 0.4s cubic-bezier(0.78, .18, .34, .98);
	-moz-transition: 0.4s cubic-bezier(0.78, .18, .34, .98);
	-ms-transition:  0.4s cubic-bezier(0.78, .18, .34, .98);
	-o-transition:  0.4s cubic-bezier(0.78, .18, .34, .98);
	transition: 0.4s cubic-bezier(0.78, .18, .34, .98);
}

.menu_top.page_menu li a:hover:after{
	width:96%;
	-webkit-transition: 0.4s cubic-bezier(0.78, .18, .34, .98);
	-moz-transition: 0.4s cubic-bezier(0.78, .18, .34, .98);
	-ms-transition:  0.4s cubic-bezier(0.78, .18, .34, .98);
	-o-transition:  0.4s cubic-bezier(0.78, .18, .34, .98);
	transition: 0.4s cubic-bezier(0.78, .18, .34, .98);
}

.menu_top li a span{
	font-size:9pt;
}

.menu_bottom{
	position: absolute;
	left: 0;
	bottom: 50px;
	width: 100%;
	text-align: center;
}








#logo{
	position:fixed;
	top: 28px;
	left:0;
	width:100%;
	text-align:center;
	z-index: 9997;
}

#logo a{
	display:inline-block;
	width: 230px;
}



.fullpage-wrapper {
	width: 100%!important;
	transform: none!important;
}

.fullpage-wrapper div:first-child{
	z-index:1;
}


.fp-section {
	width: 100%!important;
	position: absolute!important;
	left: 0;
	top: 0px;
	padding: 80px 30px 30px 30px;
	visibility: hidden;
	opacity: 0;
	transition: all .4s ease-in-out;
	-o-transition: all .4s ease-in-out;
	-moz-transition: all .4s ease-in-out;
	-webkit-transition: all .4s ease-in-out;
	-ms-transition: all .4s ease-in-out;
}



.fp-section.active {
	visibility: visible;
	opacity: 1;
}





.top_slide {
	position:absolute;
	top:0;
	right:0;
	overflow: hidden;
	width: 100%;
	height:100%;
	padding: 46px;
	-webkit-box-sizing:border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	background-color: #999;
}






#fullpage{
	padding: 80px 30px 0px 30px;
}


.double > div > a{
	position:relative;
}


.double{
font-size:0;
display: flex;
flex-wrap: wrap;
	padding-bottom: 30px;
}

.double .left_box{
	padding-right:15px;
	width:50%;
	height:100%;
	position: relative;
	display:inline-block;
}

.double .right_box{
	padding-left:15px;
	width:50%;
	height:100%;
	position: relative;
	display:inline-block;
}

.double > div > a:after{
	content:"";
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
	background:rgba(0,0,0,.2);
	opacity:0;
	-webkit-transition: 0.4s cubic-bezier(0.78, .18, .34, .98);
	-moz-transition: 0.4s cubic-bezier(0.78, .18, .34, .98);
	-ms-transition:  0.4s cubic-bezier(0.78, .18, .34, .98);
	-o-transition:  0.4s cubic-bezier(0.78, .18, .34, .98);
	transition: 0.4s cubic-bezier(0.78, .18, .34, .98);
}


.double > div > a:hover:after{
	opacity:1;
	-webkit-transition: 0.4s cubic-bezier(0.78, .18, .34, .98);
	-moz-transition: 0.4s cubic-bezier(0.78, .18, .34, .98);
	-ms-transition:  0.4s cubic-bezier(0.78, .18, .34, .98);
	-o-transition:  0.4s cubic-bezier(0.78, .18, .34, .98);
	transition: 0.4s cubic-bezier(0.78, .18, .34, .98);
}

.c_detail{
	width: 100%;
	z-index: 999;
	position:absolute;
	transform: translate(-50%, -50%);
	-webkit-transform: translate(-50%, -50%);
	-moz-transform: translate(-50%, -50%);
	-o-transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%);
	top: 50%;
	left:50%;
}



.c_detail p{
	font-size:16pt;
	letter-spacing:3px;
	color:#fff;
	text-align:center;
}

.double > div > a .c_detail p b{
	font-weight:normal;
	position:relative;
	display: block;
	opacity:0;
	-webkit-transition: 0.4s cubic-bezier(0.78, .18, .34, .98);
	-moz-transition: 0.4s cubic-bezier(0.78, .18, .34, .98);
	-ms-transition:  0.4s cubic-bezier(0.78, .18, .34, .98);
	-o-transition:  0.4s cubic-bezier(0.78, .18, .34, .98);
	transition: 0.4s cubic-bezier(0.78, .18, .34, .98);
	transform: translateY(0%);
	-webkit-transform: translateY(0%);
	-moz-transform: translateY(0%);
	-o-transform: translateY(0%);
	-ms-transform: translateY(0%);
}

.double > div > a:hover .c_detail p b{
	opacity:1;
	-webkit-transition: 0.6s cubic-bezier(0.78, .18, .34, .98);
	-moz-transition: 0.6s cubic-bezier(0.78, .18, .34, .98);
	-ms-transition:  0.6s cubic-bezier(0.78, .18, .34, .98);
	-o-transition:  0.6s cubic-bezier(0.78, .18, .34, .98);
	transition: 0.6s cubic-bezier(0.78, .18, .34, .98);
	transform: translateY(-50%);
	-webkit-transform: translateY(-50%);
	-moz-transform: translateY(-50%);
	-o-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
}



.c_detail p span{
	display:block;
	font-size:11pt; 
	letter-spacing:2px;
	color:#fff;
	margin-top: 5px;
	opacity:0;
	-webkit-transition: 0.4s cubic-bezier(0.78, .18, .34, .98);
	-moz-transition: 0.4s cubic-bezier(0.78, .18, .34, .98);
	-ms-transition:  0.4s cubic-bezier(0.78, .18, .34, .98);
	-o-transition:  0.4s cubic-bezier(0.78, .18, .34, .98);
	transition: 0.4s cubic-bezier(0.78, .18, .34, .98);
	transform: translateY(0%);
	-webkit-transform: translateY(0%);
	-moz-transform: translateY(0%);
	-o-transform: translateY(0%);
	-ms-transform: translateY(0%);
}


.double > div > a:hover .c_detail p span{
	opacity:1;
	-webkit-transition: 0.6s cubic-bezier(0.78, .18, .34, .98) .1s;
	-moz-transition: 0.6s cubic-bezier(0.78, .18, .34, .98) .1s;
	-ms-transition:  0.6s cubic-bezier(0.78, .18, .34, .98) .1s;
	-o-transition:  0.6s cubic-bezier(0.78, .18, .34, .98) .1s;
	transition: 0.6s cubic-bezier(0.78, .18, .34, .98) .1s;
	transform: translateY(-50%);
	-webkit-transform: translateY(-50%);
	-moz-transform: translateY(-50%);
	-o-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
}





.double .right_box a.bg_img{
width:100%;
height:100%;
background-size: cover;
background-position: center center;
}




.detail{
	text-align:center;
}

.detail_wrap{
position: absolute;
transform: translateY(-50%);
-webkit-transform: translateY(-50%);
-moz-transform: translateY(-50%);
-o-transform: translateY(-50%);
-ms-transform: translateY(-50%);
	top: 50%;
	width: 100%;
}

.sns_icon a{
	display:inline-block;
	width:20px;
	margin:0 6px;
}

.copy_light{
	margin-top:30px;
}

.copy_light p{
	color:#000;
	font-size:9pt;
	letter-spacing:1px;
	line-height:180%;
	font-family: roboto, sans-serif;
}

.menu_bottom .copy_light p{
	color:#fff;
}

.copy_light p span{
	display: block;
	font-size:7pt;
	letter-spacing:0px;
}

.fullpage-wrapper > div a{
	position:relative;
}










.loading {
	position: fixed;
	width: 100%;
	height: 100%;
	left: 0;
	top: 0;
	bottom: 0;
	z-index: 999999;
	opacity: 1;
	background: #fff;
}









.loader
{
	position: absolute;
	display: inline-block;
	top:50%;
	left:50%;
	margin-left:-17px;
	margin-top:-30px;
	width: 30px;
	height: 30px;
	border-radius: 30px;
	border: 1px solid #000;
	border-right-color: transparent;
	-webkit-animation: spin 1s infinite linear;
	-moz-animation: spin 1s infinite linear;
}


@-webkit-keyframes spin
{
0% { -webkit-transform: rotate(0deg); opacity: 0.4; }
50%  { -webkit-transform: rotate(180deg); opacity: 1; }
100%   { -webkit-transform: rotate(360deg); opacity: 0.4; }
}

@-moz-keyframes spin
{
0% { -moz-transform: rotate(0deg); opacity: 0.4; }
50%  { -moz-transform: rotate(180deg); opacity: 1; }
100%   { -moz-transform: rotate(360deg); opacity: 0.4; }
}






.top_scroll {
	position: absolute;
	z-index:999;
	bottom: 100px;
	right: 60px;
}


.scrol_line {
	height:80px;
	width:2px;
	margin-bottom:16px;
	overflow:hidden;
	z-index: 999;
	position: relative;
	display: inline-block;
}



.scrol_line:before {
	content: "";
	position: absolute;
	display: block;
	left: 0;
	top: 0px;
	width: 1px;
	height: 100%;
	background: #fff;
	background-size: 100%;
	-webkit-animation: lineAnime 2s ease-in-out infinite;
	animation: lineAnime 2s ease-in-out infinite;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	-o-box-sizing: border-box;
	-ms-box-sizing: border-box;
	box-sizing: border-box;
}


@keyframes lineAnime {
	0% {
transform: translateY(-100%); }
100% {
transform: translateY(100%); } 
}



.scrol_text {
	margin-top: -44px;
}




.scrol_text p{
	font-size:8pt;
	color: #fff;
	transform: rotate(90deg);
	-ms-transform: rotate(90deg);
	-moz-transform: rotate(90deg);
	-webkit-transform: rotate(90deg);
	-webkit-transition: 0.4s cubic-bezier(0.78, .18, .34, .98);
	-moz-transition: 0.4s cubic-bezier(0.78, .18, .34, .98);
	-ms-transition:  0.4s cubic-bezier(0.78, .18, .34, .98);
	-o-transition:  0.4s cubic-bezier(0.78, .18, .34, .98);
	transition: 0.4s cubic-bezier(0.78, .18, .34, .98);
}




#top_img{
	position:fixed;
	top:0;
	left:0;
	width:50%;
	height: 100%;
	background-size: cover;
	background-position: center center;
}


#page_content{
	position:absolute;
	top:0;
	right:0;
	width:50%;
	padding:0 8%;
}


.c_middle{
	padding:0 10%;
}

.c_thin{
	margin: 0 14%;
}


.content_sec{
	position:relative;
	padding-top:100px;
}




#content_top{
	position:relative;
}


.content_logo{
	position: relative;
	opacity:0;
	transform: translateY(-35%);
	-webkit-transform: translateY(-35%);
	-moz-transform: translateY(-35%);
	-o-transform: translateY(-35%);
	-ms-transform: translateY(-35%);
	top: 50%;
	text-align:center;
}

.open .content_logo{
	opacity:1;
	-webkit-transition: 0.6s cubic-bezier(0.78, .18, .34, .98);
	-moz-transition: 0.6s cubic-bezier(0.78, .18, .34, .98);
	-ms-transition:  0.6s cubic-bezier(0.78, .18, .34, .98);
	-o-transition:  0.6s cubic-bezier(0.78, .18, .34, .98);
	transition: 0.6s cubic-bezier(0.78, .18, .34, .98);
	transform: translateY(-50%);
	-webkit-transform: translateY(-50%);
	-moz-transform: translateY(-50%);
	-o-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
}





.content_logo p{
	width: 70%;
	display:inline-block;
}



.content_top_bottom{
	position: absolute;
	bottom: 30px;
	left: 0;
	width: 100%;
	text-align:center;
}





.content_top_bottom .mane_name p{
	font-size: 15pt;
	letter-spacing: 6px;
}

.content_top_bottom .mane_name p b{
	font-weight:normal;
	display:block;
	opacity:0;
	transform: translateY(20%);
	-webkit-transform: translateY(20%);
	-moz-transform: translateY(20%);
	-o-transform: translateY(20%);
	-ms-transform: translateY(20%);
}

.open .content_top_bottom .mane_name p b{
	opacity:1;
	-webkit-transition: 0.6s cubic-bezier(0.78, .18, .34, .98) .3s;
	-moz-transition: 0.6s cubic-bezier(0.78, .18, .34, .98) .3s;
	-ms-transition:  0.6s cubic-bezier(0.78, .18, .34, .98) .3s;
	-o-transition:  0.6s cubic-bezier(0.78, .18, .34, .98) .3s;
	transition: 0.6s cubic-bezier(0.78, .18, .34, .98) .3s;
	transform: translateY(0%);
	-webkit-transform: translateY(0%);
	-moz-transform: translateY(0%);
	-o-transform: translateY(0%);
	-ms-transform: translateY(0%);
}



.content_top_bottom .mane_name p span{
	font-size:10pt;
	letter-spacing: 2px;
	display:block;
	margin-top:10px;
	opacity:0;
	transform: translateY(20%);
	-webkit-transform: translateY(20%);
	-moz-transform: translateY(20%);
	-o-transform: translateY(20%);
	-ms-transform: translateY(20%);
}

.open .content_top_bottom .mane_name p span{
	opacity:1;
	-webkit-transition: 0.6s cubic-bezier(0.78, .18, .34, .98) .5s;
	-moz-transition: 0.6s cubic-bezier(0.78, .18, .34, .98) .5s;
	-ms-transition:  0.6s cubic-bezier(0.78, .18, .34, .98) .5s;
	-o-transition:  0.6s cubic-bezier(0.78, .18, .34, .98) .5s;
	transition: 0.6s cubic-bezier(0.78, .18, .34, .98) .5s;
	transform: translateY(0%);
	-webkit-transform: translateY(0%);
	-moz-transform: translateY(0%);
	-o-transform: translateY(0%);
	-ms-transform: translateY(0%);
}


.content_top_bottom .scro{
	margin-top:35px;
	opacity:0;
	transform: translateY(20%);
	-webkit-transform: translateY(20%);
	-moz-transform: translateY(20%);
	-o-transform: translateY(20%);
	-ms-transform: translateY(20%);
}

.open .content_top_bottom .scro{
	opacity:1;
	-webkit-transition: 0.6s cubic-bezier(0.78, .18, .34, .98) .6s;
	-moz-transition: 0.6s cubic-bezier(0.78, .18, .34, .98) .6s;
	-ms-transition:  0.6s cubic-bezier(0.78, .18, .34, .98) .6s;
	-o-transition:  0.6s cubic-bezier(0.78, .18, .34, .98) .6s;
	transition: 0.6s cubic-bezier(0.78, .18, .34, .98) .6s;
	transform: translateY(0%);
	-webkit-transform: translateY(0%);
	-moz-transform: translateY(0%);
	-o-transform: translateY(0%);
	-ms-transform: translateY(0%);
}




.content_top_bottom .scro a{
	font-size:7pt;
	color:#000;
	font-family: Helvetica;
	font-weight:600;
}



.content_top_bottom .scro_navi{
	width: 9px;
	display: inline-block;
	margin-top:10px;
}








.sub_title{
	text-align:center;
	margin-bottom: 60px;
}

.sub_title p{
	position:relative;
	display:inline-block;
	font-size:13pt;
	letter-spacing: 3px;
	font-family: roboto, sans-serif;
	font-weight:bold;
}

.sub_title p:after{
	content:"";
	display:block;
	width:96%;
	height:2px;
	background:#000;
	margin-top: 2px;
}

.note p{
	font-size: 10pt;
	letter-spacing: 1px;
	text-align: justify;
	line-height: 200%;
}

.note p a{
	display:inline;
}




.farm_box{
	margin-bottom:30px;
}

.farm_img{
	margin-bottom:20px;
}

.farm_logo{
	text-align:center;
}

.farm_logo p{
	display:inline-block;
	width:50px;
	margin:0 10px;
}

.farm_logo.wide p{
	width:90px;
}


#content_shop{
	border-top:1px solid #ccc;
	border-bottom:1px solid #ccc;
	padding-bottom:80px;
}

#content_shop .note p{
	text-align:center;
}

#content_shop .note p a{
	font-family: roboto, sans-serif;
	font-size:9pt;
}





.page_top{
	text-align:center;
	margin-top:80px;
}

.page_top a{
	font-size: 13pt;
	letter-spacing: 1px;
	font-weight:bold;
	display:inline-block;
	border-bottom:2px solid #000;
	font-family: din-condensed, sans-serif;
}





.page_copylight{
	padding:60px 0 40px 0;
}

.page_copylight p{
	text-align:center;
	font-size:9pt;
	font-family: roboto, sans-serif;
}


.beans_index{
	margin-bottom:30px;
}



.beans_title{
	border-top:1px solid #ccc;
	border-bottom:1px solid #ccc;
	text-align:center;
	padding:25px;
}

.beans_title p{
	font-size: 12pt;
	letter-spacing: 4px;
}

.beans_list{
	margin-top:50px;
}

.beans_box {
	display: flex;
	justify-content: space-between;
}

.beans_box .dot{
	display: flex;
	justify-content: space-between;
	width:65%;
}

.beans_box .dot span{
	width:1px;
	height:10px;
	background:#000;
	display:block;
}


.beans_box div{
margin-bottom:20px;
}

.beans_box div.title{
	width:23%;
	padding-right:10px;
}

.beans_box div.title p{
	font-size:11pt;
	text-align:left;
	font-family: din-condensed, sans-serif;
}


.beans_box div.line{
	width:65%;
}

.beans_box div.title_jp	{
	width:12%;
}

.beans_box div.title_jp p{
	font-family: YuGothic, 游ゴシック, sans-serif;
	font-size: 9pt;
	text-align: right;
}


.beans_box div.line:after{
	content:"";
	width:0;
	height:8px;
	display: inline-block;
}



.beans_box.aroma div.line:after{
	-webkit-transition: .8s cubic-bezier(0.78, .18, .34, .98);
	-moz-transition: .8s cubic-bezier(0.78, .18, .34, .98) ;
	-ms-transition: .8s cubic-bezier(0.78, .18, .34, .98) ;
	-o-transition: .8s cubic-bezier(0.78, .18, .34, .98);
	transition: .8s cubic-bezier(0.78, .18, .34, .98) ;
}

.beans_box.bitterness div.line:after{
	-webkit-transition: .8s cubic-bezier(0.78, .18, .34, .98) .2s;
	-moz-transition: .8s cubic-bezier(0.78, .18, .34, .98) .2s;
	-ms-transition: .8s cubic-bezier(0.78, .18, .34, .98) .2s;
	-o-transition: .8s cubic-bezier(0.78, .18, .34, .98) .2s;
	transition: .8s cubic-bezier(0.78, .18, .34, .98) .2s;
}

.beans_box.acidity div.line:after{
	-webkit-transition: .8s cubic-bezier(0.78, .18, .34, .98) .4s;
	-moz-transition: .8s cubic-bezier(0.78, .18, .34, .98) .4s;
	-ms-transition: .8s cubic-bezier(0.78, .18, .34, .98) .4s;
	-o-transition: .8s cubic-bezier(0.78, .18, .34, .98) .4s;
	transition: .8s cubic-bezier(0.78, .18, .34, .98) .4s;
}

.beans_box.body div.line:after{
	-webkit-transition: .8s cubic-bezier(0.78, .18, .34, .98) .6s;
	-moz-transition: .8s cubic-bezier(0.78, .18, .34, .98) .6s;
	-ms-transition: .8s cubic-bezier(0.78, .18, .34, .98) .6s;
	-o-transition: .8s cubic-bezier(0.78, .18, .34, .98) .6s;
	transition: .8s cubic-bezier(0.78, .18, .34, .98) .6s;
}



.active .beans_box div.line.l20:after{
	width:20%;

}

.active .beans_box div.line.l40:after{
	width:40%;
}

.active .beans_box div.line.l60:after{
	width:60%;
}

.active .beans_box div.line.l80:after{
	width:80%;
}

.active .beans_box div.line.l100:after{
	width:100%;
}


.beans_box.aroma div.line:after{
	background:#efbdbd;
}

.beans_box.bitterness div.line:after{
	background:#c7a9c5;
}

.beans_box.acidity div.line:after{
	background:#dbcf80;
}

.beans_box.body div.line:after{
	background:#9dd0d1;
}


























.sp_ver{
display:none;
}













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


.pc_ver{
display:none;
}

.sp_ver{
display:block;
}


body{

}



#product #menu_index {
	width: 100%;
}

.sub_grand_menu {
	top: 15px;
	right: 5px;
}

#menu_index {
	width: 100%;
}



#logo a {
	width: 170px;
}



#sp_content{
	padding-top:70px;
}

#sp_content > div{
	margin-bottom:20px;
}

#sp_content > div a{
	position: relative;
	text-align:center;
}


#sp_content > div a p{
	position: absolute;
	transform: translate(-50%, -50%);
	-webkit-transform: translate(-50%, -50%);
	-moz-transform: translateY(-50%);
	-o-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
	top: 50%;
	left: 50%;
	font-size:13pt;
	letter-spacing:2px;
	color:#fff;
}

#sp_content > div a p span{
	display:block;
	margin-top:5px;
}


.sp_footer{
	margin-top: 40px;
	margin-bottom: 40px;
	text-align:center;
	
}

.copy_light {
	margin-top: 10px;
}

.sp_footer .copy_light p {
	font-size: 8pt;
	letter-spacing:0;
}






#top_img {
	position: static;
	width: 100%;
	padding-top: 70px;
	background-image: none!important;
}




#page_content {
	position: static;
	top: 0;
	right: 0;
	width: 100%;
	padding: 0 0px;
}




#content_top {
	position: relative;
	height: auto!important;
	margin: 0 40px;
	padding-bottom: 30px;
	margin-top: 40px;
	border-bottom: 1px solid #ccc;
}

.content_logo{
	display:none;
}


.content_top_bottom {
	position: static;
}

.content_top_bottom .scro {
	display:none;
}

.c_middle {
	padding: 70px 40px 0;
}


#content_farm.c_middle {
	padding: 70px 0px 0;
}


#content_farm .note{
	padding: 0 40px;
}


#content_shop.content_sec {
	padding-bottom: 80px;
	padding-top: 80px;
}





.other_index a{
	margin-bottom:20px;
}


.page_top {
	margin-top: 50px;
}


.page_copylight {
	padding: 50px 0 25px 0;
}

.page_copylight p {
	font-size: 8pt;
}










#fullpage {
	padding: 70px 0px 0px 0px;
}



.double {
	display: block;
	padding-bottom: 0px;
}

.double > div{
margin-bottom:30px;
}


.double .left_box {
	padding-right: 0px;
	width: 100%;
	display: block;
}

.double .right_box {
	padding-left: 0px;
	width: 100%;
	display: block;
}

.double .right_box.detail {
	display:none;
}


.double > div > a:after {
	opacity: 0;
}

.c_detail {
	opacity: 1;
}



.double > div > a .c_detail p b{
	opacity: 1;
}

.c_detail p span {
	opacity: 1;
}



.page_top a {
	letter-spacing: 0px;
}



}