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

body{
	background-color: blanchedalmond;
	color: #4B372F;
}

a {
	color: #d76332;
	text-decoration: none;
}

nav li a {
	display: block;
}

nav li a:hover {
	background-color:  #d76332;
	color: #fff;
}

.keyvisual{
		width: 100vw;
		margin: 0 calc(50% - 50vw);
	}
	
.keyvisual img {
		width: 100%;
    	height: 100%;
		object-fit: cover;
		/* 画像を親要素にフィットさせる */
    	object-position: center; 
		/* 画像の中央を表示 */
	}


.btn a {
	background-color: #fff;
	border: 1px solid  #d76332;
	border-radius: 6px;
	width: 100px;
	padding: 5px 10px;
	text-align: center;
	margin: 0 auto;
	display: block;
}
.btn a:hover {
	background-color:  #d76332;
	color:#fff;
}

.contact {
	margin: 50px 0;
}

.shopinfo {
	background-color: white ;
	padding: 10px;
	border-radius: 10px;
}

footer {
	width: 100vw;
	margin: 0 calc(50% - 50vw);
	background-color: #fffef6;
	padding-top: 50px;
}

.copyright {
	padding:30px 0 50px;
	text-align: center;
}
/*サイトマップ*/

.sitemap li{
	list-style-type:none;
}

.pageslist {
	margin: 20px 0 ;
}

.pageslist li {
	font-size: 18px;
	margin: 10px 0;
}

/*ショップリスト*/
.setumei h3 {
		border-bottom: 1px solid #000;
	}

.setumei details {

	border-radius:  0 0 10px 10px ;
	padding: 6px ;
	margin: 0;
	background-color: aliceblue;
}

.setumei details p{
	background-color: #fff;
	margin: 4px 0 ;
}

/*フォントサイズ*/
.font12 {
	font-size: 12px;
}

.font14 {
	font-size: 14px;
}

.font18 {
	font-size: 18px;
	font-weight: bold;
}
.font24{
	font-size: 24px;
	font-weight: bold;
}

.right {
	text-align: right;
}

@media (max-width: 375px){
/*ロゴは上中央　ハンバーガーメニュー*/
	h4 {
		text-align: center;
	}
	
    .menu {
        display: none;
        flex-direction: column;
        background-color: #fff;
        width: 50%;
        position: absolute;
        top: 50px;
        right: 0;
    }

    .menu-icon {
        display: block;
		text-align: right;
		font-size: 40px;
    }
	
	.menu li {
		margin: 10px 0;
	}

    .menu.show {
        display: flex;
    }
	
	.f_content{
		text-align: center;
	}
	
	.gazo img,
	.syohin img{
		width: 100%;
		height: 100%;
	}
	
	.horizon img,
	.horizon_pc img,
	.gazo-kiji-horizon img{
		width: 100%;
		height: 100%;
	}
	.horizon_pc p {
		margin: 0;
	}
	.for_mobile {
		display: block;
		margin-bottom: 0;
	}
	.for_pc {
		display: none;
	}
/*メディアクエリ375以下　ここまで*/
}

@media ( min-width : 375px ) and (max-width : 768px ){
/*ロゴは左　ハンバーガーメニュー*/
    .menu {
        display: none;
        flex-direction: column;
        background-color: #fff;
        width: 50%;
        position: absolute;
        top: 50px;
        right: 0;
    }

    .menu-icon {
        display: block;
		text-align: right;
		margin-right: 30px;
		font-size: 40px;
    }
	
	.menu li {
		margin: 10px 0;
	}
    .menu.show {
        display: flex;
    }
	
	.f_content{
		text-align: center;
	}
	
	.gazo {
		text-align: center;
	}
	.gazo img{
		width: 100%;
		max-width: 500px;
		height: 100%;
	}
	
	.syohin {
		text-align: center;
	}
	.syohin img {
		width: 100%;
		max-width: 400px;
		height: 100%;
	}
	.setumei {
		max-width: 400px;
		margin: 0 auto;
	}
	
	.horizon{
		display: flex;
	}
	
	.horizon img,
	.gazo-kiji-horizon img{
		width: 100%;
		height: 100%;
	}

	.gazo-kiji-horizon img{
		max-width: 460px;
		display: block;
		margin: 0 auto;
	}
	.kiji2{
		margin: 50px 0 0 20px;
	}
	
	.kiji3 {
		margin: 10px 0 0 20px;
	}
	
	.horizon_pc img {
		display: block;
		margin: 0 auto;
	}
	
	.horizon_pc p {
		margin: 0 50px;
	}
	.for_mobile {
		display: block;
		margin-bottom: 0;
	}
	.for_pc {
		display: none;
	}
/*メディアクエリ　375-768　ここまで*/
}

@media (min-width: 768px){
/*タブレット以上PC用*/
/*ロゴは左　通常メニュー*/
	.container {
		width: 768px;
		margin: 0 auto;
		/*overflow-x: hidden;*/
	}
	
	header {
		display: flex;
		justify-content: space-between;
}

	.menu-icon {
    	display: none;
    	font-size: 30px;
    	cursor: pointer;
}
	
	nav ul{
		display: flex;
		list-style-type: none
}

	nav li{
		margin: 0 10px;
		padding: 0 20px 0 0;
		border-right: 1px solid #000;
}
	.category {
		width: 100vw;
		margin: 0 calc(50% - 50vw);
		display: flex;
		justify-content: space-around;
	}
	
	.item {
		width: 20vw;
		border-bottom: 3px solid #d76332;
	}

	.item img {
		width: 100%;
		height: 100%;
		object-fit: cover;
		/* 画像を親要素にフィットさせる */
    	object-position: center; 
		/* 画像の中央を表示 */
	}
	
	.exp {
		height: 150px;
	}

	.f_content{
		width: 768px;
		display: flex;
		justify-content: space-between;
		margin: 0 auto;
	}
	
	/*画像と記事の横並び*/
	.gazo {
		text-align: center;
		margin: 30px 10px 30px 0;
	}
	
	.kiji {
		padding: 0 50px;
	}
	
	.gazo-kiji {
		/*display: flex;*/
		margin: 50px 0 ;
	}
	
	.syohin-setumei {
		display: flex;
	}
	
	.setumei {
		margin-left: 30px;
	}
	.horizon,
	.gazo-kiji-horizon {
		display: flex;
	}
	
	.horizon img {
		width: 100%;
		height: 100%;
	}

	.horizon_pc {
		display: flex;
	}
	
	/*shop画像固定用*/
	.wide400{
		min-width: 400px;
	}
	
/*	.kiji2 {
		padding: 0 20px;
	}*/
	
	.kiji3 {
		margin: 10px 0 0 20px;
	}
	
	.for_mobile {
		display: none;
	}
/*メディアクエリここまで*/
}