html {
	scroll-behavior:smooth;
}
body {
	margin: 0;
	padding: 0;
	font-size: small;
	line-height: 150%;
	color: #333333;
	background:#BA4214 url(../../image/background.jpg) repeat-x top;
}
img {
	max-width:100%;
	height:auto;
	border: none;
	vertical-align:bottom;
}
p {
	margin: 0;
	padding: 0;
}
#wrapper {
	margin: 0;
	padding: 0;
}
#base {
	margin: 0;
	padding: 0;
}
br.pc { display:block!important;}
br.sp { display:none!important;}


@media (max-width:980px){
	:root {
		--trans:0.5s ease;

		--btn-size:40px;
		--space:15px;
		--header-height:calc(var(--btn-size) + var(--space) * 2 + 5px);
	}
	br.pc { display:none!important;}
	br.sp { display:block!important;}
}

/*====================================================================================================

  HEADER

====================================================================================================*/
#header {
	clear:both;
	width:min(930px, 100%);
	margin: 5px auto 0;
	padding: 0;
}
#header h1.logo {
	display: inline;
}
#header h1.logo a {
	display: block;
	width:930px;
	height:102px;
	text-indent: -9999px;
	background: url(../../image/logo.gif) no-repeat;
}
#header button { display:none;}

@media (max-width:980px){
	#header {
		position:relative;
		padding-inline:var(--space);
		height:calc(var(--btn-size) + var(--space) * 2);

		& h1.logo a {
			width:calc(100% - var(--btn-size) - var(--space) * 3);
			height:100%;
			background:url(../../image/logo_sp.png) no-repeat center left / contain;
		}

		& button {
			display:block;
			position:fixed;
			inset:calc(var(--header-height) / 2) var(--space) auto auto;
			translate:0 -50%;
			width:var(--btn-size);
			aspect-ratio:1;
			color:#fff;
			background-color:#813214;
			border:solid 1px currentColor;
			border-radius:calc(var(--space) / 2);
			cursor:pointer;
			z-index:2;
		}
		& button span {
			position:absolute;
			inset-inline:50% auto;
			translate:-50% -50%;
			width:calc(100% - var(--space));
			height:2px;
			background-color:currentColor;
			transition:all var(--trans);
		}
		& button span:nth-of-type(1) { inset-block:calc(50% - var(--space) / 2) auto;}
		& button span:nth-of-type(2) { inset-block:50% auto;}
		& button span:nth-of-type(3) { inset-block:calc(50% + var(--space) / 2) auto;}
		& button.active span:nth-of-type(1) { inset-block:50% auto; rotate:45deg;}
		& button.active span:nth-of-type(2) { opacity:0;}
		& button.active span:nth-of-type(3) { inset-block:50% auto; rotate:-45deg;}
	}
}

/*====================================================================================================

  CONTENT

====================================================================================================*/

#content {
	display:flex;
	flex-wrap:wrap;
	clear:both;
	width:930px;
	margin: 0 auto;
	padding: 0 15px;
	background:#fff url(../../image/footer-line.jpg) repeat-x bottom;
}
#content .content-left {
	width:200px;

	& .shop-banner { padding: 20px 0 0;}
	& > img { display:none;}
}
#content .content-right { width:min(650px, 100%); margin: 40px 0 0 25px;}

@media (max-width:980px) {
	#content {
		display:block;
		padding-block:1rem 0;
		width:100%;
	}
	#content .content-left {
		position:fixed;
		inset:0 0 auto auto;
		padding:30px 10px 10px;
		width:auto;
		height:100%;
		overflow-y:auto;
		overscroll-behavior:contain;
		background-color:#fff;
		translate:100% 0;
		transition:translate var(--trans);
		z-index:1;

		& > img { display:block; margin-top:10px; width:200px;}
	}
	#content .content-right { margin-inline:auto; padding-bottom:50px;}
	#header:has(button.active) ~ #content .content-left { translate:0% 0;}
}


/*** NAVI-MENU *************************************************************/

ul.Navimenu {
	clear:both;
	margin: 0;
	padding: 0;
	width:200px;
	list-style:none;
}
ul.Navimenu li {
	display: inline;
	margin: 0;
	padding: 0;
	width:200px;
	height:45px;
	list-style:none;
}
ul.Navimenu li a {
	display: block;
	width:200px;
	height:45px;
	text-indent: -9999px;
}
ul.Navimenu li#navi00 {
	display: block;
	width:200px;
	height:39px;
	text-indent: -9999px;
	background: url(../../image/menu00_off.gif) no-repeat;
}

ul.Navimenu li {

	& a { background:url() no-repeat;}

	/* def */
	&#navi01 a { background-image:url(../../image/menu01_off.gif);}
	&#navi02 a { background-image:url(../../image/menu02_off.gif);}
	&#navi03 a { background-image:url(../../image/menu03_off.gif);}
	&#navi04 a { background-image:url(../../image/menu04_off.gif);}
	&#navi05 a { background-image:url(../../image/menu05_off.gif); height:30px;}
	&#navi06 a { background-image:url(../../image/menu06_off.gif); height:30px;}
	&#navi07 a { background-image:url(../../image/menu07_off.gif); height:30px;}
	&#navi08 a { background-image:url(../../image/menu08_off.gif); height:30px;}
	/* hover */
	@media(any-hover:hover){
		&#navi01 a:hover { background-image:url(../../image/menu01_on.gif);}
		&#navi02 a:hover { background-image:url(../../image/menu02_on.gif);}
		&#navi03 a:hover { background-image:url(../../image/menu03_on.gif);}
		&#navi04 a:hover { background-image:url(../../image/menu04_on.gif);}
		&#navi05 a:hover { background-image:url(../../image/menu05_on.gif);}
		&#navi06 a:hover { background-image:url(../../image/menu06_on.gif);}
		&#navi07 a:hover { background-image:url(../../image/menu07_on.gif);}
		&#navi08 a:hover { background-image:url(../../image/menu08_on.gif);}
	}
	@media(any-hover:none){
		&#navi01 a:active { background-image:url(../../image/menu01_on.gif);}
		&#navi02 a:active { background-image:url(../../image/menu02_on.gif);}
		&#navi03 a:active { background-image:url(../../image/menu03_on.gif);}
		&#navi04 a:active { background-image:url(../../image/menu04_on.gif);}
		&#navi05 a:active { background-image:url(../../image/menu05_on.gif);}
		&#navi06 a:active { background-image:url(../../image/menu06_on.gif);}
		&#navi07 a:active { background-image:url(../../image/menu07_on.gif);}
		&#navi08 a:active { background-image:url(../../image/menu08_on.gif);}	
	}
}



/* ul.Navimenu li#navi01 a { background: url(../../image/menu01_off.gif) no-repeat;}
ul.Navimenu li#navi01 a:hover { background: url(../../image/menu01_on.gif) no-repeat;}
ul.Navimenu li#navi02 a { background: url(../../image/menu02_off.gif) no-repeat;}
ul.Navimenu li#navi02 a:hover { background: url(../../image/menu02_on.gif) no-repeat;}
ul.Navimenu li#navi03 a { background: url(../../image/menu03_off.gif) no-repeat;}
ul.Navimenu li#navi03 a:hover { background: url(../../image/menu03_on.gif) no-repeat;}
ul.Navimenu li#navi04 a {
	background: url(../../image/menu04_off.gif) no-repeat;
}
ul.Navimenu li#navi04 a:hover {
	background: url(../../image/menu04_on.gif) no-repeat;
}
ul.Navimenu li#navi05 a {
	height:30px;
	background: url(../../image/menu05_off.gif) no-repeat;
}
ul.Navimenu li#navi05 a:hover {
	background: url(../../image/menu05_on.gif) no-repeat;
}
ul.Navimenu li#navi06 a {
	height:30px;
	background: url(../../image/menu06_off.gif) no-repeat;
}
ul.Navimenu li#navi06 a:hover {
	background: url(../../image/menu06_on.gif) no-repeat;
}
ul.Navimenu li#navi07 a {
	height:30px;
	background: url(../../image/menu07_off.gif) no-repeat;
}
ul.Navimenu li#navi07 a:hover {
	background: url(../../image/menu07_on.gif) no-repeat;
}
ul.Navimenu li#navi08 a {
	height:30px;
	background: url(../../image/menu08_off.gif) no-repeat;
}
ul.Navimenu li#navi08 a:hover {
	background: url(../../image/menu08_on.gif) no-repeat;
} */

/*** TITLE *****************************************************************/

#content h3.sb-title {
	clear:both;
	margin: 0;
	padding: 0 0 0 15px;
	/* font-family:'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','メイリオ','Meiryo','ＭＳ Ｐゴシック',sans-serif; */
	background-image: url(../../image/arrow.gif);
	background-repeat: no-repeat;
	background-position: left 1px;
	color:#362320;
	font-size:large;
}

/*** PAGE ******************************************************************/

.page {
	margin-inline:auto 0;
	padding: 20px 0 0;
}
@media (max-width:980px){
	.page { width:fit-content;}
}

/*====================================================================================================

  FOOTER

====================================================================================================*/

#footer {
	clear:both;
	width:930px;
	margin: 0 auto;
	padding: 20px 15px 0;
	background-color:#F9F8F3;
	line-height: 120%;
}
#footer .content-left {
	float:left;
	width:280px;
	margin: 0 0 20px;
}
#footer .content-center {
	float:left;
	width:280px;
	margin: 0 30px 20px;
}
#footer .content-right {
	float:left;
	width:280px;
	margin: 0 0 20px;
}
#footer h3.add {
	--bg-size:min(100px, 25vw);

	margin: 0;
	padding: 15px 0 15px calc(var(--bg-size) + 10px);
	font-size: small;
	font-weight:normal;
	background:url(../../image/footer-logo.gif) no-repeat left top / var(--bg-size) auto;

	& :is(dl, dd) { margin:0px;}
	& dl { display:grid; grid-template-columns:4em 1fr;}
	& dd { white-space:nowrap; word-break:break-all;}
}
#footer .midashi {
	border-top:1px dotted #666666;
	border-bottom:1px dotted #666666;
	margin: 20px 0 5px;
	padding:9px 0 7px;
	font-size:110%;
	font-weight:bold;
}
#footer .copyright {
	clear:both;
	display: block;
	width:100%;
	height:40px;
	margin:15px 0 0;
	text-indent: -9999px;
	background: url(../../image/copyright.jpg) no-repeat center / min(400px, 80%) auto;
	border-top:1px dotted #666666;
}

@media (max-width:980px){
	#footer {
		width:100%;
		display:grid;
		grid-template-columns:repeat(3, 1fr);
		gap:0 20px;

		& :is(.content-left, .content-center, .content-right) { width:auto; margin:0px; float:none;}
		& .add { grid-column:1/-1;}
		& .copyright { grid-column:1/-1; width:auto;}
	}
}
@media (max-width:768px){
	#footer {
		grid-template-columns:repeat(2, 1fr);

		& .content-right { grid-column:1/-1;}
	}
}
@media (max-width:500px){
	#footer { grid-template-columns:1fr;}
}