@charset "UTF-8";
/* CSS Document */



/****************************************************************************************************
初期設定
****************************************************************************************************/

/* IE8以下への対応 */
article, aside, figure, figcaption, footer, header, nav, section {
	display:block;
}
/* IE8以下への対応 */

.pcOnly {
	display:block;
}
span.pcOnly {
	display:inline;
}
.spOnly {
	display:none;
}

html,body{
	text-align:center;
	/* https://spyweb.media/2017/11/27/css-font-family-best-practice-yu-gothic-meiryo-etc/ */
	font-family:-apple-system, blinkMacSystemFont, /* Macの欧文はSan Francisco (OS X 10.11以降) */
				/*'Hiragino Sans',*/
				'Hiragino Kaku Gothic ProN', /* Macのヒラギノ */
				'Helvetica Neue',            /* Macの欧文 (OS X 10.10以前) */
				Meiryo,                      /* Windowsのメイリオ */
				'Segoe UI',                  /* Windowsの欧文 */
				sans-serif;
	-webkit-font-smoothing:antialiased;
	-webkit-text-size-adjust:100%;
	font-feature-settings:"palt";
	font-size:1rem;
	min-width:1060px;
}

/* clear fix */
.clearfix:before,
.clearfix:after {
	content:" ";
	display:table;
}
.clearfix:after {
	clear:both;
}
.clearfix {
	*zoom:1;
}
/* clear fix */

* {
	box-sizing:border-box;
}
img {
	vertical-align:top;
}
a {
	color:#333;
	text-decoration:none;
	-webkit-transition:opacity 200ms;
	transition:opacity 200ms;
}
a:hover {
	opacity:.6;
}

input[type="text"],
input[type="password"],
input[type="tel"],
input[type="email"] {
	border:1px solid #CCC;
	height:2.4rem;
	padding:0.5rem 1rem;
}
select {
	border:1px solid #CCC;
	height:2.4rem;
	padding:0.5rem 0.7rem;
}
.whitebox {
	margin:0;
	padding:0;
	background:#FFFFFF;
}
.member-box .submit,
.member-box #nav {
	text-align:center;
}
.settlement_form {
	font-size:0.933rem;
	line-height:1.6;
	text-align:left;
}
.settlement_form th,
.settlement_form td {
	padding:1rem !important;
}
.settlement_form td a {
	text-decoration:underline;
}
#escott-token-form + .send {
	padding-top:0rem;
}
.notes {
	width:100%;
	height:10rem;
}
em {
	font-style:normal;
}
.col1 {
	color:#8C6700;
}



/****************************************************************************************************
header
****************************************************************************************************/
#header {
	position:absolute;
	left:0;
	top:0;
	width:100%;
	min-width:1060px;
	z-index:100;
}
.settop {
	position:fixed !important;
}
#header.settop .inner {
	padding:13px 50px 13px 62px;
}
.wback {
	background:rgba(255,255,255,.9);
	transition: all 0.5s ease;
}
#header .inner {
	padding:33px 50px 33px 62px;
}
#header .inner #logo {
	float:left;
}
#header.fixed {
}

#h-navi {
	float:left;
	margin:21px 0 0 54px;
	font-size:0.866rem;
}
#h-navi ul {
}
#h-navi ul li {
	float:left;
}
#h-navi ul li + li {
	margin-left:2em;
}
#h-navi ul li#h-tel {
	margin-top:-4px;
	margin-left:2.5em;
}
#h-navi ul li#h-tel em {
	font-style:normal;
	vertical-align:2px;
}
#h-navi ul li#h-tel strong {
	font-size:1.2rem;
}
#h-navi ul li#h-tel span {
	font-size:0.733rem;
	vertical-align:3px;
}
#s-tel{
	display: none;
}

#h-sns {
	float:right;
	margin:9px 32px 0 0;
}
#h-sns ul li {
	float:left;
}
#h-sns ul li + li {
	margin-left:8px;
}

#menu {
	float:right;
	width:32px;
	height:32px;
	margin:11px 0 0 0;
}
#menuButton {
	overflow:hidden;
	display:block;
	position:relative;
	width:100%;
	height:100%;
	cursor:pointer;
	z-index:100;
	text-decoration:none;
	-webkit-transition:opacity 200ms;
	transition:opacity 200ms;
}
#menuButton:hover {
	opacity:.6;
}
#menuButton span,
#menuButton::before,
#menuButton::after {
	display:block;
	position:absolute;
	top:0;
	bottom:0;
	left:0;
	right:0;
	width:32px;
	height:4px;
	margin:auto;
	background:#000;
	border-radius:2px;
}
#menuButton span {
  overflow:hidden;
  z-index:1;
}
#menuButton::before {
	z-index:2;
	-webkit-transform:translate(0, -11px);
	-ms-transform:translate(0, -11px);
	transform:translate(0, -11px);
	content:"";
}
#menuButton::after {
	z-index:2;
	-webkit-transform:translate(0, 11px);
	-ms-transform:translate(0, 11px);
	transform:translate(0, 11px);
	content:"";
}


.ico-arrow,
#h-navi ul li a,
#categorylist-block ul li a,
#sNavi ul li a {
    position:relative;
    padding:0 0 0 13px;
}
.ico-arrow::before,
.ico-arrow::after,
#h-navi ul li a::after,
#h-navi ul li a::after,
#categorylist-block ul li a::after,
#sNavi ul li a::after {
    content:"";
    position:absolute;
    top:0;
    bottom:0;
    left:0;
    margin:auto;
}
.ico-arrow::after,
#h-navi ul li a::after,
#categorylist-block ul li a::after,
#sNavi ul li a::after {
    width:8px;
    height:8px;
	top:0;
	left:-2px;
    border-top:2px solid #D9A300;
    border-right:2px solid #D9A300;
	-webkit-transform:rotate(45deg);
	-ms-transform:rotate(45deg);
	transform:rotate(45deg);
	-webkit-transform-origin:50% 50%;
	-ms-transform-origin:50% 50%;
	transform-origin:50% 50%;
}
#h-navi ul li a::after {
	top:-2px;
}
/****************************************************************************************************
header
****************************************************************************************************/





/****************************************************************************************************
サブナビ
****************************************************************************************************/
#sNavi {
	position:fixed;
	width:360px;
	max-height:100vh;
	top:0;
	right:0;
	z-index:1001;
	padding:0 0 30px 30px;
	overflow:scroll;
	background:#FFF;
	text-align: left;
	display:none;
}
#sNaviWrap {
	contents:'';
	display:block;
	position:fixed;
	width:100%;
	height:100%;
	left:0;
	top:0;
	z-index:1000;
	background:rgba(0,0,0,.5);
	opacity:0;
}

#sNaviHeader {
	margin-left:-30px;
	margin-bottom:30px;
	border-bottom:1px solid rgba(0,51,102,.1);
}
#sNaviHeader form {
	position:relative;
	padding:13px 30px;
}
#sNaviHeader form input[type="text"] {
	display:inline-block;
	margin:0;
	padding:0;
    border:none;
    border-radius:0;
    outline:none;
	background:RGBA(255,255,255,.8);
	width:220px;
	height:34px;
	padding:0 10px;
	font-size:1rem;
	color:#333;
}
#sNaviHeader form input[type="submit"] {
	position:absolute;
	right:0;
	top:13px;
	display:inline-block;
	-webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    padding: 0;
    border: none;
    outline: none;
    background: transparent;
	margin:0;
	padding:0;
	width:34px;
	height:34px;
	text-indent:-9999px;
	background:URL(../img/common/search-btn.png);
}
#sNaviHeader form::before {
	position:absolute;
	content:'';
	display:block;
	border-left:1px solid #AAA;
	height:34px;
	width:1px;
	animation: Flash1 1.8s infinite;
}


#search-block-sp {
	float:left;
}
#closeBtn {
	float:right;
	width:60px;
	height:60px;
	background:#000000;
}
#close-btn {
	width:100%;
	height:100%;
}
#closeButton {
	overflow:hidden;
	display:block;
	position:relative;
	width:100%;
	height:100%;
	cursor:pointer;
}

#closeButton span,
#closeButton::before,
#closeButton::after {
	display:block;
	position:absolute;
	top:0;
	bottom:0;
	left:0;
	right:0;
	width:28px;
	height:2px;
	margin:auto;
	background:#FFF;
	border-radius:2px;
}
#closeButton span {
	display:none;
}
#closeButton::before {
	z-index:2;
	-webkit-transform:translate(0, -12px);
	transform:translate(0, -12px);
	-webkit-transform: rotate(45deg);
	transform: rotate(45deg);
	content:"";
}
#closeButton::after {
	z-index:2;
	-webkit-transform:translate(0, 12px);
	transform:translate(0, 12px);
	-webkit-transform: rotate(-45deg);
	transform: rotate(-45deg);
	content:"";
}

#sNavi ul {
}
#sNavi ul + ul {
	margin:25px 0 0 0;
	padding:27px 0 0 0;
	border-top:1px dotted #CCC;
}
#sNavi ul li {
	font-size:1rem;
	line-height:1.0;
}
#sNavi > ul > li + li {
	margin:1rem 0 0 0;
}
#sNavi ul li .children {
	display:none;
	margin:0.8rem 0 0 1rem;
	padding:0 0 0.5rem 0;
}
#sNavi ul li .children li + li {
	margin:0.6rem 0 0 0;
}
#sNavi ul li.current-cat .children,
#sNavi ul li.current-cat-parent .children {
	display:block;
}



/****************************************************************************************************
contents
****************************************************************************************************/

#contents,
#content {
	width:1000px;
	margin:0 auto;
	margin-top:110px;
	display:-webkit-box;
	display:-webkit-flex;
	display:-ms-flexbox;
	display:flex;
}
#contents.page,
#content.two-column {
	margin-top:174px;
}
#contents-left {
	width:588px;
	margin-right:70px;
	text-align:left;
}
#contents-right {
	width:342px;
	text-align:left;
}
#contents-all {
	width:100%;
	text-align:left;
}
#contents-all .sec-body {
	line-height:1.6;
}


.sec-block + .sec-block {
	margin-top:35px;
}

.sec-ttl {
}
.sec-ttl h2,
.sec-ttl h3,
.member_page_title {
	color:#333;
	font-size:1.333rem;
}
.sec-ttl h2 span {
	position:relative;
	display:inline-block;
	margin-left:1.5em;
	padding-left:1.5em;
	font-size:0.933rem;
	font-weight:normal;
}
.sec-ttl h2 span::after {
	display:block;
	position:absolute;
	left:0;
	top:0;
	content:'';
	width:1px;
	height:95%;
	background:#B28500;
}

.sec-ttl + .sec-body {
	margin-top:22px;
}



#search-block {
	padding:9px;
	border:1px solid #000;
}
#search-block form {
}
#search-block form .search-text {
	width:280px;
	height:34px;
    border:none;
    border-radius:0;
    outline:none;
	padding:0 1em;
	font-size:0.866rem;
}
#search-block form .search-submit {
	-webkit-appearance:none;
    -moz-appearance:none;
    appearance:none;
    padding:0;
    border:none;
    outline:none;
    background:transparent;
	margin:0;
	padding:0;
	width:34px;
	height:34px;
	text-indent:-9999px;
	background:URL(../img/common/search-btn.png);
}
#search-block form::before {
	position:absolute;
	content:'';
	display:block;
	border-left:1px solid #AAA;
	height:34px;
	width:1px;
	animation: Flash1 1.8s infinite;
}
@keyframes Flash1{
	50%{
		opacity: .2;
	}
}

#categorylist-block {
	padding:30px;
	border:1px solid #B28500;
}
#categorylist-block ul {
	font-size:1rem;
	line-height:1.6;
}
#categorylist-block > ul > li {
}
#categorylist-block > ul > li + li {
	margin-top:0.8rem;
}
#categorylist-block ul.children {
	/*display:none;*/
	margin-top:0.2rem;
	margin-left:1rem;
}
#categorylist-block .current-cat-parent ul.children,
#categorylist-block .current-cat ul.children {
	display:block;
}
.current-cat-parent > a,
.current-cat > a {
	color:#8C6800;
	font-weight:bold;
}

#section-controle {
}
#section-controle #controle-block {
}
#section-controle #controle-block .controle-box {
	text-align:center;
}
#section-controle #controle-block .controle-box + .controle-box {
	margin-top:2px;
}
#section-controle #controle-block .controle-box a {
	display:block;
	padding:2rem;
	color:#FFF;
	font-size:1.2rem;
}
#section-controle #controle-block .controle-box a:hover {
	opacity:.8;
}
#section-controle #controle-block #user-button a {
	background:#DDD;
	color:#000000;
}
#section-controle #controle-block #login-button a {
	background:#000000;
}
#section-controle #controle-block #cart-button a {
	background:#4B3C18;
}

#section-link {
}
#section-link #link-block {
}
#section-link #link-block ul {
	font-size:1rem;
	line-height:1.6;
}
#section-link #link-block ul li + li {
	margin-top:0.5rem;
}

#section-banner {
}
#section-banner #banner-block {
}
#section-banner #banner-block .banner-box {
}
#section-banner #banner-block .banner-box a:hover {
	opacity:.7;
}
#section-banner #banner-block .banner-box + .banner-box {
	margin-top:10px;
}



/****************************************************************************************************
footer
****************************************************************************************************/
#pagetop {
	margin-top:80px;
}
#pagetop a {
	display:inline-block;
	color:#333;
	font-size:0.866rem;
}
#pagetop a::before {
	content:'';
	display:block;
	width:46px;
	height:46px;
	margin:0 auto;
    border-top:2px solid #B28500;
    border-right:2px solid #B28500;
	-webkit-transform:translate(0, 0) rotate(-45deg);
	-ms-transform:translate(0, 0) rotate(-45deg);
	transform:translate(0, 0) rotate(-45deg);
	margin-bottom:-10px;
}


#f-navi {
	margin-top:60px;
	padding:40px 0;
	background:#F6F6F6;
}
#f-navi .inner {
	display:-webkit-box;
	display:-webkit-flex;
	display:-ms-flexbox;
	display:flex;
	-webkit-box-pack:justify;
	-webkit-justify-content:space-between;
	-ms-flex-pack:justify;
	justify-content:space-between;
	
	width:1000px;
	margin:0 auto;
	text-align:left;
}

#f-navi .inner dl {
	display:-webkit-box;
	display:-webkit-flex;
	display:-ms-flexbox;
	display:flex;
}
#f-navi .inner dl dt {
	white-space:nowrap;
}
#f-navi .inner dl dt h4 {
	font-size:1rem;
}
#f-navi .inner dl dt h4 strong {
	color:#8C6700;
	font-size:1rem;
	line-height:1.4;
}
#f-navi .inner dl dd {
	position:relative;
	margin-left:1em;
	padding-left:2em;
	font-size:0.866rem;
	line-height:1.7;
}
#f-navi .inner dl dd::after {
	position:absolute;
	display:block;
	content:'';
	left:0;
	top:0;
	width:1px;
	height:100%;
	background:#B28500;
}
#f-navi .inner dl dd ul {
}
#f-navi .inner dl dd ul li {
	display:inline-block;
	white-space:nowrap;
}
#f-navi .inner dl:nth-of-type(1) dd ul li {
	width:14em;
}


#footer {
	padding:50px 0;
}
#f-logo {
}
#f-name {
	margin-top:1.5rem;
	font-size:1rem;
	font-weight:bold;
}
#f-name strong {
	color:#8C6700;
}

#f-comp {
	margin-top:1.0rem;
	font-size:0.866rem;
	line-height:1.6;
}
#f-comp div,
#f-comp ul,
#f-comp ul li {
	display:inline-block;
}
#f-comp ul li {
	margin-left:1em;
}

#recommendation,
#copyright {
	margin-top:1.0rem;
	font-size:0.866rem;
	line-height:1.6;
}


@media screen and (max-width: 1360px) {
	#h-sns {
		display:none;
	}
}
@media screen and (max-width: 1260px) {
	#h-navi ul li#h-tel span {
		font-size:0.666rem;
	}
}
@media screen and (max-width: 1220px) {
	#h-navi ul li#h-tel {
		margin-top:-12px;
		text-align:left;
	}
	#h-navi ul li#h-tel span {
		display:block;
		margin-top:0.3rem;
	}
}





@media screen and (max-width: 812px) {
	/****************************************************************************************************
	初期設定
	****************************************************************************************************/
	html,
	body {
		min-width:initial;
		min-width:auto;
		background:none;
		font-feature-settings:initial;
		scroll-padding-top:0;
		font-size:4.000vw;
	}
	img {
		width:100%;
		height:auto;
	}
	a {
		-webkit-transition:none;
		transition:none;
	}
	a:hover {
		opacity:1;
	}
	.pcOnly,
	span.pcOnly,
	i.pcOnly {
		display:none;
	}
	.spOnly {
		display:block;
	}
	span.spOnly {
		display:inline;
	}

	input[type="text"],
	input[type="password"],
	input[type="tel"],
	input[type="email"] {
		height:2rem;
		padding:0.5rem;
		-webkit-appearance: none;
	}
	select {
		height:2rem;
		padding:0.5rem;
		/*-webkit-appearance:none;*/
	}



	/****************************************************************************************************
	header
	****************************************************************************************************/
	#header {
		position:fixed !important;
		min-width:initial;
		min-width:auto;
		background:rgba(255,255,255,.9);
	}
	#header.settop .inner,
	#header .inner {
		padding:3.5vw 5vw 3.5vw 3.5vw;
	}
	#header .inner #logo {
		float:left;
		width:53vw;
	}
	
	#h-navi,
	#h-sns {
		display:none;
	}
	
	#menu {
		float:right;
		width:8vw;
		height:8vw;
		margin:1vw;
	}
	#menuButton span,
	#menuButton::before,
	#menuButton::after {
		width:100%;
		height:1vw;
		border-radius:0.5vw;
	}
	#menuButton::before {
		-webkit-transform:translate(0, -3vw);
		-ms-transform:translate(0, -3vw);
		transform:translate(0, -3vw);
	}
	#menuButton::after {
		-webkit-transform:translate(0, 3vw);
		-ms-transform:translate(0, 3vw);
		transform:translate(0, 3vw);
	}
	
	
	.ico-arrow,
	#sNavi ul li a {
		position:relative;
		padding:0 0 0 1rem;
	}
	.ico-arrow::after,
	#sNavi ul li a::after {
		width:0.6rem;
		height:0.6rem;
		top:0;
		left:-0.1rem;
	}
	/****************************************************************************************************
	header
	****************************************************************************************************/
	
	
	
	
	
	/****************************************************************************************************
	サブナビ
	****************************************************************************************************/
	#sNavi {
		position:fixed;
		width:80%;
		max-height:100vh;
		padding:0 0 6vw 6vw;
	}
	
	#sNaviHeader {
		margin-left:-6vw;
		margin-bottom:6vw;
		border-bottom:1px solid rgba(0,51,102,.1);
	}
	#sNaviHeader form {
		padding:2vw 6vw;
	}
	#sNaviHeader form input[type="text"] {
		background:RGBA(255,255,255,.8);
		width:50vw;
		height:8vw;
		padding:0 3vw;
		font-size:4.000vw;
	}
	#sNaviHeader form input[type="submit"] {
		top:2vw;
		width:8vw;
		height:8vw;
		background:URL(../img/common/search-btn.png);
		background-size:8vw;
	}
	#sNaviHeader form::before {
		height:8vw;
	}
	@keyframes Flash1{
	  50%{
		opacity:.2;
	  }
	}
	
	
	#closeBtn {
		width:12.5vw;
		height:12.5vw;
	}
	#closeButton span,
	#closeButton::before,
	#closeButton::after {
		width:6vw;
		height:0.5vw;
		border-radius:1vw;
		margin-left:3.5vw;
	}
	#closeButton::before {
		-webkit-transform:translate(0, -3vw);
		transform:translate(0, -3vw);
		-webkit-transform: rotate(45deg);
		transform: rotate(45deg);
	}
	#closeButton::after {
		-webkit-transform:translate(0, 3vw);
		transform:translate(0, 3vw);
		-webkit-transform: rotate(-45deg);
		transform: rotate(-45deg);
	}
	
	#sNavi ul {
	}
	#sNavi ul + ul {
		margin:1.8rem 0 0 0;
		padding:1.8rem 0 0 0;
	}
	#sNavi ul li .children {
		display:block;
	}

	#sNavi ul li#s-tel{
	display: block;
	font-size:1.2rem;
	}
	#sNavi ul li#s-tel span{
		font-size:0.8rem;
	}



	/****************************************************************************************************
	contents
	****************************************************************************************************/
	
	#contents,
	#content {
		display:block;
		width:100%;
		margin-top:10vw;
		padding:0 5vw;
	}
	#contents.page,
	#content.two-column {
		margin-top:20vw;
	}
	#contents-left {
		width:100%;
		margin-right:0;
	}
	#contents-right {
		width:100%;
	}
	#contents-all {
		width:100%;
	}
	
	
	.sec-block + .sec-block {
		margin-top:10vw;
	}
	
	.sec-ttl + .sec-body {
		margin-top:4vw;
	}
	
	
	
	#contents-right {
		margin-top:10vw;
		padding-top:10vw;
		border-top:1px solid #CCC;
	}
	#section-search {
	}
	#search-block {
		padding:3vw;
		border:1px solid #000;
	}
	#search-block form {
	}
	#search-block form .search-text {
		width:74vw;
		height:8vw;
	}
	#search-block form .search-submit {
		width:8vw;
		height:8vw;
		background:URL(../img/common/search-btn.png);
		background-size:8vw;
	}
	#search-block form::before {
		height:8vw;
		animation: Flash1 1.8s infinite;
	}
	@keyframes Flash1{
		50%{
			opacity: .2;
		}
	}

	#section-categorylist {
	}
	#categorylist-block {
		padding:2rem;
	}
	
	#section-controle {
		margin-top:5vw;
	}
	#section-controle #controle-block .controle-box + .controle-box {
		margin-top:2vw;
	}
	#section-banner {
		margin-top:2vw;
	}
	#section-banner #banner-block .banner-box {
		float:left;
		width:44vw;
	}
	#section-banner #banner-block .banner-box + .banner-box {
		margin-top:0;
		margin-left:2vw;
	}
	
	#section-link {
		display:none;
	}
	
	
	
	/****************************************************************************************************
	footer
	****************************************************************************************************/
	#pagetop {
		margin-top:12vw;
	}
	#pagetop a::before {
		width:12vw;
		height:12vw;
		margin-bottom:-3vw;
	}
	
	
	#f-navi {
		margin-top:10vw;
		padding:10vw 5vw;
	}
	#f-navi .inner {
		display:block;
		width:100%;
	}
	
	#f-navi .inner dl {
		display:block;
	}
	#f-navi .inner dl + dl {
		margin-top:2rem;
	}
	#f-navi .inner dl dt {
		padding-bottom:1rem;
		margin-bottom:1rem;
		border-bottom:1px solid #CCC;
		text-align:center;
	}
	#f-navi .inner dl dd {
		margin-left:0;
		padding-left:0;
	}
	#f-navi .inner dl dd::after {
		display:none;
	}
	#f-navi .inner dl dd ul li,
	#f-navi .inner dl:nth-of-type(1) dd ul li {
		width:49%;
	}
	
	
	#footer {
		padding:10vw 5vw;
	}
	#f-logo {
		width:15vw;
		margin:0 auto;
	}
	#f-name {
		line-height:1.4;
	}
	
	#recommendation,
	#copyright {
		font-size:0.666rem;
	}
}