@charset "utf-8";


/*----------------------------------------------------------
	00 reset
	01 link
	02 font
	03 common layout and heading
	04 header
	05 footer
	06 toppage
  07 FAQ
  08 product page
	00 common parts
----------------------------------------------------------*/


/*  00 reset
======================================================================================*/


article,aside,details,figcaption,figure,
footer,header,hgroup,menu,nav,section { 
    display:block;
}

html, body, div, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
	margin:0;
	padding:0;
	border:0;
	outline:0;
	font-size:13px;
	font-weight:normal;
	line-height:1.6;
	color: #000;
	vertical-align:middle;
	background:transparent;
}

input,textarea {
	font-size:13px;
}


html {
	overflow-y:scroll;
}


body {
    line-height:1;
}

nav ul {
    list-style:none;
}

blockquote, q {
    quotes:none;
}

blockquote:before, blockquote:after,
q:before, q:after {
    content:'';
    content:none;
}


table {
    border-collapse:collapse;
    border-spacing:0;
}

hr {
    display:block;
    height:1px;
    border:0;   
    border-top:1px solid #cccccc;
    margin:1em 0;
    padding:0;
}


input{
	padding:5px;
}

input[type^="image"] {
	padding:0;
}

li {
	list-style:none;
}

img {
	border: 0;
	vertical-align:top;
	max-width: 100%;
	height: auto;
}

@media screen and ( max-width : 600px ) {
	img {
  -webkit-touch-callout:none;
  -webkit-user-select:none;
  -moz-touch-callout:none;
  -moz-user-select:none;
  touch-callout:none;
  user-select:none;
}
}






/*  01 link
======================================================================================*/

a:link,
a:visited,
a:hover,
a:active {
	color: #000;
	text-decoration: none;
}


a.tx_link:link,
a.tx_link:visited {
	color: #166300;
	text-decoration: underline;
}

a.tx_link:hover,
a.tx_link:active {
	color: #1D8200;
	text-decoration: none;
}

.overbu:hover {
	opacity: 0.8;
}

#gnav li a:link,
#gnav li a:visited,
.foot_nav li a:link,
.foot_nav li a:visited,
.foot_policy li a:link,
.foot_policy li a:visited,
.foot_policy li a:hover,
.foot_policy li a:active {
	color: #000;
	text-decoration: none;
}

.foot_nav li a:hover,
.foot_nav li a:active{
	color: #166300;
	text-decoration: underline;
}

.arrow_link:link,
.arrow_link:visited {
	color: #166300;
	text-decoration: none;
}

.arrow_link:hover,
.arrow_link:active {
	text-decoration: underline;
}

.arrow_link {
	position:relative;
	padding-left:10px;
}

.arrow_link:before {
	content:"";
	display: block;
	width:5px;
	height:5px;
	border-top:1px solid #166300;
	border-right:1px solid #166300;
	-webkit-transform: rotate(45deg);
	transform: rotate(45deg);
	position: absolute;
	left:0px;
	top:50%;
	margin-top:-2px;
}

.more_link:link,
.more_link:visited {
	color: #912824;
	text-decoration: none;
}

.more_link {
	position:relative;
	padding-right:10px;
	font-weight:700;
}

.more_link:before {
	content:"";
	display: block;
	width:5px;
	height:5px;
	border-top:1px solid #912824;
	border-right:1px solid #912824;
	-webkit-transform: rotate(45deg);
	transform: rotate(45deg);
	position: absolute;
	right:0px;
	top:50%;
	margin-top:-2px;
}

.brw_link{
	position:relative;
	background-color:#896253;
	display:block;
	padding: 10px;
	box-sizing:border-box;
	text-align:center;
	color:#FFF;
	margin:4.6%;
	font-size:12px;
}

.red_link {
	background-color:#B61D22;
	margin:10px 0 0;
	padding:5px;
}

.brw_link:after {
	content:"";
	display: block;
	width:5px;
	height:5px;
	border-top:1px solid #FFF;
	border-right:1px solid #FFF;
	-webkit-transform: rotate(45deg);
	transform: rotate(45deg);
	position: absolute;
	right:10px;
	top:50%;
	margin-top:-2px;
}

.brw_link:link,
.brw_link:visited,
.brw_link:hover,
.brw_link:active {
	color: #FFF;
	text-decoration: none;
}



/*  02 font-family
======================================================================================*/
body, textarea {
	font-family: 'Noto Sans JP', sans-serif;
}

#gnav li.itemList ul li a span,
.sidenav .item_nav > ul > li span {
	font-family: 'Noto Serif JP', serif;
}




/*  03 common layout and heading
======================================================================================*/
body {
	background-color: #FFF;
	-webkit-text-size-adjust: none;
	font-size:14px;
}



section {
	margin-bottom:5px;
	padding:8% 4.6%;
}

.content p {
	margin-bottom:10px;
}

.p0 {
	padding:8% 0;
}

.beige_bg {
	background-color:#F9F4E9;
}





/*  04 header
======================================================================================*/


#header h1 {
	width:115px;
	margin:6px 0 10px 15px;
}

@media screen and ( max-width : 600px ) {
#bumenu {
	width:35px;
	position:fixed;
	top:6px;
	right:10px;
	z-index:200;
}

#gnav {
	display:none;
	position:absolute;
	top: 50px;
	right: 0;
	width:100%;
z-index:200;
}


#gnav ul {
	border-top: 1px solid #F2E7D0;
	overflow:hidden;
	box-sizing:border-box;
	min-width:320px;
}

#gnav li {
	border-bottom: 1px solid #F2E7D0;
}

#gnav li a {
	display:block;
	padding:12px 25px 12px 15px;
	font-size:13px;
	text-align:left;
	position:relative;
	background-color:#F9F4E9;
}


#gnav li:not([class]) a:after {
	content:"";
	display: block;
	width:6px;
	height:6px;
	border-top:1px solid #166300;
	border-right:1px solid #166300;
	-webkit-transform: rotate(45deg);
	transform: rotate(45deg);
	position: absolute;
	right:20px;
	top:50%;
	margin-top:-6px;
}

#gnav li.itemList>a:before,
#gnav li.itemList>a:after{
content: "";
position: absolute;
top: 50%;
background: #166300;
}

#gnav li.itemList>a:before {
right: 22px;
width: 1px;
height: 9px;
margin-top: -7px;
}

#gnav li.itemList>a:after {
right: 18px;
width: 9px;
height: 1px;
margin-top: -3px;
}

#gnav li.itemList a[class~="active"]:before {
	display:none;
}
#gnav li.itemList ul {
display:none;
}

#gnav li.itemList ul li:last-child {
	border-bottom:none;
}

#gnav li.itemList ul li a {
	background-color:#FFF;
	padding: 19px 10px 19px 100px;
	background-repeat:no-repeat;
	background-size:75px 50px;
	background-position:15px;
}

#gnav li a.login {background-image:url(../img/head_login.png)}
#gnav li a.cart {background-image:url(../img/head_cart.png)}

#gnav li a.ss:link,
#gnav li a.ss:visited,
#gnav li a.ss:hover,
#gnav li a.ss:active {
	color: #FFF;
	text-decoration: none;
}

#gnav li a.ss:after {
	border-top:1px solid #FFF;
	border-right:1px solid #FFF;
}

}

#gnav li.itemList ul li a.beans { background-image:url(../img/gnav_beans.jpg)}
#gnav li.itemList ul li a.gift { background-image:url(../img/gnav_gift.jpg)}
#gnav li.itemList ul li a.drip { background-image:url(../img/gnav_drip.jpg)}
#gnav li.itemList ul li a.honey { background-image:url(../img/gnav_honey.jpg)}
#gnav li.itemList ul li a.other { background-image:url(../img/gnav_other.jpg)}

#gnav li.itemList ul li a span {
	font-weight:300;
	color:#888;
	font-size:10px;
}

#gnav li a.ss {
	padding-left:40px;
	background-color:#896253;
	background-repeat:no-repeat;
	background-size:16px 14px;
	background-position:15px 12px;
}





/*  05 footer
======================================================================================*/

#footer {
	text-align:center;
}

@media screen and ( max-width : 600px ) {
.foot_nav {
	display:none;
}
}

.foot_logo img {
	width:230px;
	margin-bottom:10px;
}

#footer p {
	font-size:12px;
}

.foot_policy {
	margin-top:10px;
}

.foot_policy li {
	background-color: #F5F5F5;
	border-bottom: 1px solid #E6E6E6;
}

.foot_policy li a {
	display:block;
	padding:10px 0;
}

.copy {
	background-color: #F5F5F5;
	padding:10px 0;
}

small {
	color:#000;
	font-size:12px;
 padding:0 10px 2px 0;
}

/* -------------- ページトップへ */



#toTop {
	display: none;
	position: fixed;
	right: 10px;
	bottom: 40px;
	font-size:13px;
	background-color: rgba(21,86,0,0.8);
}

#toTop a:link,
#toTop a:visited {
	position: relative;
	color:#FFF;
	display: block;
	padding: 15px 7px 7px;
	text-decoration:none;
}

#toTop a:before{
	content:"";
	display: block;
	width:7px;
	height:7px;
	border-top:2px solid #FFF;
	border-right:2px solid #FFF;
	-webkit-transform: rotate(-45deg);
	transform: rotate(-45deg);
	position: absolute;
	left:40%;
	top:8px;
}


/* cart ------------------------------*/

.cart_bu {
	background-color: #54934D;
	background-image: url(../img/ic_cart.png);
	background-repeat: no-repeat;
	background-position: 15px 8px;
	background-size:20px;
	border: none;
	width:100%;
	color:#FFF;
	margin-bottom:10px;
}

.soldout {
	background-color:#949494;
	padding:7px;
	text-align:center;
	color:#FFF;
	font-size:15px;
}


/*  00 common parts
======================================================================================*/

.content p {
	margin-bottom:10px;
}


.for_pc,
.for_pc_ib {
	display: none;
}




.mgn0,
div#content p.mgn0 {
	margin: 0px !important;
}

.mgn10,
div#content .mgn10,
div#content p.mgn10 {
	margin-bottom: 10px !important;
}

.mgn20,
div#content .mgn20 {
	margin-bottom: 20px;
}

.mgn30,
div#content .mgn30 {
	margin-bottom: 30px;
}

.mgn40,
div#content p.mgn40 {
	margin-bottom: 40px;
}


.mgn50,
div#content p.mgn50 {
	margin-bottom: 50px;
}



.pdt0 { padding-top:0px;}
#content .pdt10 { padding-top:10px;}
.pdr5 { padding-right:5px;}
.pdb5 { padding-bottom:5px;}
.pdl10 { padding-left:10px;}
.pdl120 { padding-left:120px;}
.pdg0 { padding:0px;}
.pdg10 { padding:10px;}


strong {
	font-size: 14px;
	font-weight: bold;
	color: #795800;
}


#content .center {	text-align:center;}
#content .left {	text-align:left;}




.p_img_l {
	float:left;
	padding-right:15px;
}

.p_img_r {
	float:right;
	padding-left:15px;
}

.red {
	color:#912824;
}

.bold {
	font-weight:bold;
}

.red_bold {
	font-weight:bold;
	color:#912824;
}


.tx0 {	font-size: 0px;}
.tx11 {	font-size: 11px;}
.tx13 {	font-size: 13px;}
.tx15 {	font-size: 15px;}



table.common {
	margin-bottom: 20px;
	width: 100%;
	border-top: 2px solid #CCC;
	border-right: 1px solid #CCC;
	border-bottom: 1px solid #CCC;
	border-left: 2px solid #CCC;
}

table.common th,
table.common td {
	border-right: 1px solid #CCC;
	border-bottom: 1px solid #CCC;
	text-align:left;
	padding:5px;
}

table.common th {
	white-space:nowrap;
	background-color:#F9F4E9;

	font-weight:700;
}

table.common td {
	padding:10px;
}

table.common tr:nth-child(2n+1) td {
	background-color:#F4F4F4;
}

table.common tr td:last-of-type {
	color:#912824;
}




#content th.sub {
	background-color: #f6f6f6;
	font-weight: normal;
}

#content table.single td {
	border-left: none;
}


table th span {
	font-size: 11px;
	font-weight: normal;
}

#content th.bg_red {
	background-color: #fadce9;
}

td input.long,
td textarea {
	width:98% !important;
}

textarea.h80 {
	height:80px !important;
}

.resp_table {
	border-top: 1px solid #ebebeb;
}

.resp_table th,
.resp_table td {
	border-bottom: 1px solid #ebebeb;
}

.resp_table th {
	background-color:#F4F4F4;
}

@media screen and ( max-width : 600px ) {
.resp_table th,
.resp_table td {
	display:block;
	padding:10px 0;
}
}

table.text_table {
	border-top: 1px solid #ebebeb;
}

table.text_table th,
table.text_table td {
	border-bottom: 1px solid #ebebeb;
	text-align:left;
	padding:8px;
}

table.text_table th {
	background-color:#F4F4F4;
}


.beige_shld,
.brwn_shld,
.red_shld {
	font-size:12px;
	text-align:center;
	padding:2px 0 4px;
	margin-bottom:10px;
	color:#FFF;
	background-color:#C39365;
}

.brwn_shld {background-color:#6B3226;}
.red_shld {background-color:#912824;}


.dot_list li,
.dot_list2 li {
	padding-left:13px;
	position:relative;
}

.dot_list li:before,
.dot_list2 li:before {
	content:"";
	display: block;
	width:2px;
	height:2px;
	background-color:#668B36;
	position: absolute;
	left:0;
	top:9px;
}

.dot_list.bold li {
	font-weight:700;
}


/* =========================================================
	*00 clearfix
========================================================= */
.cl:after{
	content: '';
	display: block;
	clear: both;
 }






/* pc style -------------------------------------------------------*/


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


/* common ------------------------*/

html, body, div, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
	font-size:14px;
	line-height:1.8;
}

input,textarea {
	font-size:14px;
}

body .for_sp {
	display:none;
}

.for_pc {
	display: block;
}

.for_pc_ib {
	display:inline-block;
}




section {
	margin-bottom:0px;
	padding:40px 0;
}


.content_inner {
	width:1200px;
	margin:auto;
}

.main_area {
	width:960px;
	float:right;
}




.p0 {
	padding:40px 0;
}


input{
	padding:2px;
}

table.w530 {
	width: 530px;
}


table.th150 th {
	width:150px;
}

.pc_p_img_l {
	float:left;
	padding-right:15px;
}

.pc_p_img_r {
	float:right;
	padding-left:15px;
}


.w300 {	width:300px;}
.w360 {	width:360px;}
.w400 {	width:400px;}
.w440 {	width:440px;}
.w490 {	width:490px;}
.w530 {	width:530px;}
.w630 {	width:630px;}



.beige_shld,
.brwn_shld,
.red_shld {
	font-size:15px;
}

.foot_info {
	width:1200px;
	margin:0 auto 40px;
}

.main_area .foot_info {
	width:960px;
}

.resp_table {
	width:100%;
}

.resp_table th,
.resp_table td {
	padding:20px;
}

.resp_table th {
	text-align:left;
	white-space:nowrap;
}


.path {
	width:1200px;
	margin:20px auto 0;
	font-size:12px;
	font-weight:300;
}

.dot_list2 li:before {
	top:11px;
}



/* cart ------------------------------*/

.cart_bu {
	padding:10px 10px 10px 25px;
	font-size:16px;
	background-position: 15px 10px;
}


.cart_bu.w270 {
	width:270px;
}


/* link -----------------------*/

.brw_link {
	margin:auto;
	font-size:16px;
}

.brw_link_2 p {
	width:465px;
	float:left;
	margin:20px 0 40px;
}

.brw_link_2 p:nth-of-type(2n) {
	float:right;
}

.brw_link_1,
ul.related + p .brw_link {
	width:465px;
	margin:50px auto;
}


/* header -------------------------*/


#header{
	width:1200px;
	margin:15px auto;
}


#header h1 {
	width:230px;
	float:left;
	margin:0;
}

#gnav {
	width:970px;
	text-align:right;
	float:left;
	padding-top:25px;
}


#gnav ul {
	font-size:0;
}

#gnav li {
	display:inline-block;
	font-size:14px;
}

#gnav li a {
	display:inline-block;
	margin:0 20px;
	padding:14px 0 4px;
	text-align:left;
	position:relative;
}

#gnav > ul > li > a:after {
  position: absolute;
  bottom: 0px;
  left: 0;
  content: '';
  width: 100%;
  height: 2px;
  background: #b61d22;
  opacity: 0;
  visibility: hidden;
  transition: .3s;
}

#gnav > ul > li > a:hover:after {
  bottom: -4px;
  opacity: 1;
  visibility: visible;
}


#gnav li.itemList ul {
	display:none;
	position:absolute;
	top:100px;
	left:0;
	width:100%;
	text-align:center;
	background-color:#F9F4E9;
	padding:30px 0 10px;
	z-index:200;
}

#gnav li.itemList ul li {
	width:190px;
	box-sizing:border-box;
}

#gnav li.itemList ul li a {
	display:block;
	padding: 110px 10px 10px;
	text-align:center;
	font-size:15px;
	background-repeat:no-repeat;
	background-size:150px 100px;
	background-position: center top;
	line-height:1.2;
}


#gnav li.itemList ul li a span {
	font-size:11px;
}

#gnav li a.ss {
	padding-left:26px;
	background-color:transparent;
	background-repeat:no-repeat;
	background-size:20px 16px;
	background-position:0 16px;
}

#gnav li a.login {background-image:url(../img/head_login_pc.png);}
#gnav li a.cart {
	background-image:url(../img/head_cart_pc.png);
	margin-right:0;
}


/* aside --------------------------- */

.sidenav {
	width:200px;
	float:left;
	padding-top:40px;
}

.sidenav .item_nav ul {
	border-top: 1px solid #E5E5E5;
}

.sidenav .item_nav > ul > li,
.sidenav .item_nav h3 {
	font-size:15px;
	font-weight:700;
	line-height:1.4;
}

.sidenav .item_nav > ul > li {
	border-bottom: 1px solid #E5E5E5;
}

.sidenav .item_nav h3 {
	padding:20px 10px 10px;
}

.sidenav .item_nav > ul > li span {
	font-size:10px;
	color:#005C00;
}

.sidenav .item_nav li a {
	display:block;
	padding:10px 10px 13px;
}

.sidenav .item_nav > ul > li > a:hover {
	background-color: #F9F4E9;
}

.sidenav .item_nav > ul ul {
	margin-bottom:10px;
}

.sidenav .item_nav > ul > li li a {
	padding:8px 10px 8px 22px;
	position:relative;
}

.sidenav .item_nav > ul > li li a:before {
	content:"";
	display: block;
	width:4px;
	height:4px;
	border-top:1px solid #858585;
	border-right:1px solid #858585;
	-webkit-transform: rotate(45deg);
	transform: rotate(45deg);
	position: absolute;
	left:10px;
	top:21px;
}



/* footer -------------------------- */

#footer {
	text-align:left;
}


.foot_nav {
	border-top: 1px solid #E5E5E5;
	border-bottom: 1px solid #E5E5E5;
	width:1200px;
	margin: 0 auto 40px;
}

.foot_nav li {
	display:inline-block;
	padding:10px;
	font-size:13px;
}

.foot_nav li a {
	display:block;
	padding:15px;
	position:relative;
}

.foot_nav li a:before {
	content:"";
	display: block;
	width:5px;
	height:5px;
	border-top:1px solid #8F8F8F;
	border-right:1px solid #8F8F8F;
	-webkit-transform: rotate(45deg);
	transform: rotate(45deg);
	position: absolute;
	left:0px;
	top:53%;
	margin-top:-4px;
}

.footer_inner {
	width:1200px;
	margin: 0 auto 30px;
}

.foot_logo,
.foot_logo + p  {
	display:inline-block;
}

#footer .foot_logo + p {
	padding:20px 0 0 30px;
	font-size:14px;
}

.foot_logo img {
	width:230px;
	margin-bottom:10px;
}

#footer p {
	font-size:12px;
}

.copy_area {
	background-color:#F5F5F5;
}

.copy_area_inner {
	width:1200px;
	margin: 0 auto
}

.foot_policy {
	margin-top:0;
	float:left;
	width:50%;
}

.foot_policy li {
	border-bottom: none;
	display:inline-block;
	padding-right:20px;
	font-size:12px;
}

.foot_policy li a {
	display:block;
	padding:10px 0;
}

.copy {
	padding:10px 0;
	float:right;
	width:30%;
	text-align:right;
}

small {
	font-size:12px;
 padding:0;
}









}