@charset "utf-8";

	.hutte-o_logo{
		text-align: center;
		margin-bottom:2em;
	}
	.hutte-o_logo p{
		font-size: 1.3em;
		color: #006c6d;
	}
	.hutte-o_logo p.hutte-o_maincopy{
		font-size: 1em;
		color:#603813;
}
	.hutte-o_logo p.hutte-o_maincopy img{
		height: 1em;
		width: auto;
		display: inline-block;
		margin: 0 0 0 0.2em;
	}
	.hutte-o_logo  a{
		color: #000;
	}
	.hutte-o_logo img{
		width: 70%;
		margin: 1em auto;
	}
	@media screen and (min-width:625px) {
		.hutte-o_logo img{		width: 45%;}
	}

		.hutte-o_howto{
		}
		.hutte-o_howto p{
			width:80%;
			margin-right: auto;
			margin-left: auto;
			border-top:1px dashed #a17c52;
			border-bottom:1px dashed #a17c52;
			color:#603813;
		}
		.hutte-o_howto ul{
			width: 80%;
			margin-right: auto;
			margin-left: auto;
			display: flex;
			justify-content: space-around;
			align-items: center;
			font-size: 0.9em;
			line-height: 1.2;
		}
		.hutte-o_howto li{
			vertical-align: middle;
			text-align: center;
		}
		.hutte-o_arrow{
			color: #a17c52;
		}
		.hutte-o_howto img{
			display: inline-block;
			width:2em;
			background:#603813;
			margin-bottom: 0.2em;
			padding:0.2em;
			border-radius: 5px;
		}
	@media screen and (min-width:625px) {
		.hutte-o_howto p,.hutte-o_howto ul{width:50%;}
	}

	.hutte-o_about{
		width: 80%;
		margin:0 auto 1em;
		border: 1px solid #a17c52;
		font-size: 0.8em;
	}
	.hutte-o_open {
		background: rgba(255,255,255,0.6);
		padding: 0.5em 1em;
	}
	.hutte-o_open:after {
		display: inline-block;
		float:right;
		content:"▼";
		font-size: 0.7em;
	}
	.hutte-o_open.open:after  {content:"▲";}
	.hutte-o_open + p{
		display: none;
		padding: 1em;
	}


		.hutte-o_ttl{
			width:96%;
			margin:1em 2% 0;
			padding:0.2em 0.5em;
			background:rgba(194,173,148,0.5) ;
			font-size: 1.2em;
			color: #603813;
			line-height: 1.2;
			border-top:1px solid #603813;
			}
	@media screen and (min-width:1050px) {
		.hutte-o_ttl{width:100%;margin-right:0;margin-left:0;}
}

	ul.hutte-o{
		display: flex;
		flex-wrap: wrap;
		justify-content:space-between;
		max-width: 100%;
		margin:0 auto;
		padding: 2%;
	}
	ul.hutte-o:after{content: "";display: block;width: 200px;height: 0;}
	ul.hutte-o:before{content: "";display: block;width: 200px;height: 0;order:1;}
.hutte-o_item{
		width:200px;
		margin-bottom:1em;
		padding:10px;
		background:#fff;
		border:1px solid #c1976d;
		border-radius: 10px;
		font-size:0.8em;
		line-height: 1.4em;
	}
	.hutte-o_item div{
		display:flex;
		margin-bottom:1em;
	}
	.hutte-o_item a{
		width:35%;
		height: 35%;
		margin-right: 0.5em;
	}
	.hutte-o_name{display:block;font-size:0.7em;line-height: 1.2em;}
	div.hutte-o_cart{margin-bottom:0;padding: 0 15px;}

	@media screen and (max-width:467px) {
		.hutte-o_item{width:170px;}	
		div.hutte-o_cart{padding: 0 15px;}
	}
@media screen and (min-width:540px) and (max-width:624px) {
		.hutte-o_item{	width:250px;}
		ul.hutte-o:after{width: 250px;}
		ul.hutte-o:before{width: 250px;}
		div.hutte-o_cart{padding: 0 39px;}
}
@media screen and (min-width:968px) {
		.hutte-o_item{	width:240px;}
		ul.hutte-o:after{width: 240px;}
		ul.hutte-o:before{width: 240px;}
		div.hutte-o_cart{padding: 0 34px;}
}

					.hutte-o_caution{
						width: 80%;
						margin:2em auto;
						padding:1em	;
						border:1px solid #a17c52;
						background:rgba(255,255,255,0.5);
						font-size: 0.7em;
					}		
							
							
				.hutte-o_index{
					display: flex;
					justify-content: center;
				}
				.hutte-o_index li{
					width: 25%;
					border-right: 1px solid #a17c52;
					margin: 0.8em auto;
					padding: 0.3em auto;
				}
				.hutte-o_index li:last-child{
					border-right: none;
				}
				.hutte-o_index a{
					display: block;
					text-align: center;
					text-decoration: none;
					font-size: 0.8em;
					line-height: 1.2;
					color: #603813;
				}

				#hutte-o_cartopen{
					width: 320px;
					margin:0 auto 3em;
				}