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

/*==================================
	base
==================================*/
* {
	box-sizing: border-box;
}


.l-header {
	display: block;
	flex-flow: unset;
	width: 100%;
	margin: 0 auto
  }
  
  @media screen and (max-width:767px) {
	.l-header {
	  width: 100%
	}
  }

  /* .u-pc {
	display: block!important
  } */
  
  /* .u-pc--inline {
	display: inline!important
  } */
  
  .u-sp, .u-sp--inline {
	display: none!important
  }
  
  .p-header {
	min-width: 1120px;
	height: 74px;
	box-shadow: 0 0 4px rgba(0, 0, 0, .2);
	background-color: #fff;
	position: -webkit-sticky;
	position: sticky;
	top: 0;
	z-index: 2
  }
  
  .p-header__inner {
	display: flex;
	justify-content: space-between;
	margin: 0 auto
  }
  
  @media screen and (max-width:767px) {
	.p-header {
	  min-width: 100%;
	  height: 50px
	}
	.p-header__inner {
	  width: 100%;
	  flex-wrap: wrap;
	  align-items: center;
	  overflow: hidden
	}
	.p-header__nav-btn {
	  font-size: 24px;
	  color: #9d4500;
	  margin-left: 15px
	}
	.p-header__shop-btn-wrapper {
	  width: 38px;
	  height: 38px;
	  margin-right: 10px
	}
	.p-header__shop-btn {
	  width: 38px;
	  height: 38px;
	  line-height: 1.5;
	  border: 1px solid #ccc;
	  border-radius: 5px;
	  box-sizing: border-box;
	  text-align: center;
	  font-size: 16px;
	  box-shadow: inset 0 -2px 0 #e8e8e8
	}
	.p-header__shop-btn svg {
	  color: #e6370f
	}
	.p-header__shop-desc {
	  font-size: 7px;
	  margin-top: -3px;
	  line-height: 1
	}
	.p-header__title {
	  display: flex;
	  align-items: center;
	  height: 50px
	}
  }
  
  .p-nav {
	width: 745px
  }
  
  .p-nav__list {
	display: flex;
	align-items: center;
	height: 74px;
	margin-left: auto;
    margin-right: auto;
  }
  
  .p-nav__item {
	height: 74px;
	position: relative
  }
  
  .p-nav__item:not(:last-child):after {
	content: "";
	width: 1px;
	height: 15px;
	background-color: #d9d9d9;
	position: absolute;
	right: 0;
	top: 37%
  }
  
  .p-nav__item-link, .p-nav__item-link--kawara, .p-nav__item-link--kodawari, .p-nav__item-link--menu, .p-nav__item-link--netshop, .p-nav__item-link--news, .p-nav__item-link--recruit, .p-nav__item-link--shop {
	display: block;
	line-height: 74px
  }
  
  .p-nav__item-link--kawara:before, .p-nav__item-link--kodawari:before, .p-nav__item-link--menu:before, .p-nav__item-link--netshop:before, .p-nav__item-link--news:before, .p-nav__item-link--recruit:before, .p-nav__item-link--shop:before, .p-nav__item-link:before {
	content: "";
	width: 100%;
	height: 14px;
	position: absolute;
	top: 38%;
	left: 0;
	background: url(/img/common/nav01@2x.png) no-repeat 50%/cover
  }
  
  .p-nav__item-link--kawara:hover, .p-nav__item-link--kodawari:hover, .p-nav__item-link--menu:hover, .p-nav__item-link--netshop:hover, .p-nav__item-link--news:hover, .p-nav__item-link--recruit:hover, .p-nav__item-link--shop:hover, .p-nav__item-link:hover {
	opacity: .7
  }
  
  .p-nav__text {
	display: block;
	width: 0;
	height: 0;
	overflow: hidden
  }
  
  .p-nav__item-link--news {
	width: 92px
  }
  
  .p-nav__item-link--news:before {
	background: url(/img/common/nav01@2x.png) no-repeat 50%/cover
  }
  
  .p-nav__item-link--menu {
	width: 107px
  }
  
  .p-nav__item-link--menu:before {
	background: url(/img/common/nav02@2x.png) no-repeat 50%/cover
  }
  
  .p-nav__item-link--kodawari {
	width: 92px
  }
  
  .p-nav__item-link--kodawari:before {
	background: url(/img/common/nav03@2x.png) no-repeat 50%/cover
  }
  
  .p-nav__item-link--shop {
	width: 92px
  }
  
  .p-nav__item-link--shop:before {
	background: url(/img/common/nav04@2x.png) no-repeat 50%/cover
  }
  
  .p-nav__item-link--kawara {
	width: 135px
  }
  
  .p-nav__item-link--kawara:before {
	background: url(/img/common/nav05@2x.png) no-repeat 50%/cover
  }
  
  .p-nav__item-link--netshop {
	width: 107px
  }
  
  .p-nav__item-link--netshop:before {
	background: url(/img/common/nav06@2x.png) no-repeat 50%/cover
  }
  
  .p-nav__item-link--recruit {
	width: 93px
  }
  
  .p-nav__item-link--recruit:before {
	background: url(/img/common/nav07@2x.png) no-repeat 50%/cover
  }

  img.facebook { zoom: 70%; }

  img.twitter { zoom: 70%; }

  img.instagram { zoom: 70%; }

  .site-header{
	text-align:right;
  }
  
  .site-header__sns-item{
	display: flex;
	align-items: center;
	height: 74px;
	margin-left: auto;
    margin-right: auto;
  }

body {
	font-family: 'Noto Serif Japanese', serif, sans-serif;
	font-size:14px;
	color:#1b0e00;
	background:#f8f8f8;
	height: 100%;
	width: 100%;
	min-width: 1100px;
	line-height: 140%;
}
ul, li, dl, dt, dd {
	list-style: none;
}
img {
    vertical-align: bottom;
}
a {
	color: #353a3f;
	transition: 0.8s;
	text-decoration: none;
	display: block;
}
a:hover {
	transition: 0.8s;
	opacity:0.5;
}
.arrow {display: inline-block; padding-left: 5px;}

.p-top-pages {
	width: 1000px;
	margin: 0 auto;
	padding: 19px 0 74px
  }
  
  .p-top-pages__list {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between
  }
  
.p-top-pages__item--kodawari{
	width: 100%;
	height: 1px;
	text-align: center;
	margin-bottom: 19px;
	background-position: 50%;
	background-size: cover;
	position: relative
  }
    
.p-top-pages__item--kodawari:after{
	content: "";
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 0;
	background: rgba(0, 0, 0, .2)
  }
  
  .p-top-pages__item--kodawari:hover{
	opacity: .7
  }
  
  .p-top-pages__item--kodawari{
	width: 100%;
	height: 400px;
	background-image:url(/img/top/kodawari.jpeg);
  }

  .p-top-pages__item-wrap {
	display: inline-block;
	width: 100%;
	height: 100%;
	text-decoration: none;
	position: relative;
	z-index: 1
  }
  
  .p-top-pages__item-wrap:hover {
	text-decoration: none
  }
  
  .p-top-pages__title {
	font-size: 36px;
	font-weight: 700;
	margin: 200px 0 30px;
	text-shadow: 0 0 5px　rgba(0, 0, 0, .3);
	text-align: center;
	color:#fff;
	text-shadow: 1px 2px 3px #000
  }
  
  .p-top-kodawari__title {
	text-align: center;
	margin-bottom: 60px
  }

  .p-top-news {
	background-color: #faf5e2;
	color: #000
  }
  
  .p-top-news__wrap {
	width: 1000px;
	margin: 0 auto;
	padding: 58px 0 100px
  }
  
  .p-top-news__title {
	text-align: center;
	margin-bottom: 60px
  }
  
  .p-top-news__title img {
	margin: 0 auto
  }
  
  .p-top-news__dl {
	display: flex;
	flex-wrap: wrap;
	font-size: 16px
  }
  
  .p-top-news__dt {
	width: 130px;
	text-align: center;
	margin-bottom: 20px
  }
  
  .p-top-news__dt:last-of-type {
	margin-bottom: 0
  }
  
  .p-top-news__dd {
	width: calc(100% - 130px)
  }
  
  .p-top-news__dd a {
	text-decoration: none;
	color: #000
  }
  
  .p-top-news__dd a:hover {
	opacity: .7;
	text-decoration: none
  }
  
  @media screen and (max-width:767px) {
	.p-top-news__wrap {
	  width: 100%;
	  padding: 28px 0
	}
	.p-top-news__title {
	  margin-bottom: 18px
	}
	.p-top-news__dl {
	  font-size: 14px;
	  width: calc(100% - 26px);
	  margin: 0 auto
	}
	.p-top-news__dt {
	  width: 100%;
	  margin: 0;
	  text-align: left
	}
	.p-top-news__dd {
	  width: 100%;
	  margin-bottom: 28px
	}
	.p-top-news__btn {
	  width: calc(100% - 13px);
	  text-align: right;
	  text-decoration: none
	}
	.p-top-news__btn a {
	  color: #000
	}
  }

	.item_wide{
		position:relative;
		width:300px;
		margin: 0 auto;
	}
	.product{
		position:absolute;
		bottom:80px;
	}

	.item_wide-mb0{
		position:center;
	}
	
	.item02{
		display: inline;
	}
	.item03{
		display: inline;
	}
	.item04{
		display: inline;
	}
	.item05{
		display: inline;
	}

	.top-item{
		display: flex;
		flex-wrap:wrap;
	}
	.top-item li{
		width: calc(100%/2);
		padding:0 5px;
		box-sizing: border-box;
	}
	.top-item img{
		max-width:100%;
		height: auto;
	}

div.item_wide{
	margin:0;
	padding:0;
	text-align:center;
}

ul.top-item{
	margin:0;
	padding:0;
	text-align:center;
}

.newstitle{
	margin:0;
	padding:0;
	text-align:center;
	font-size: 60px;
}

.p-top-pages-menu {
	width: 1000px;
	margin: 0 auto;
	padding: 10px 0 0px
  }

.p-top-pages__item--udon{
	width: 100%;
	height: 1px;
	text-align: center;
	margin-bottom: 19px;
	background-position: 50%;
	background-size: cover;
	position: relative
  }
    
.p-top-pages__item--udon:after{
	content: "";
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 0;
	background: rgba(177, 177, 177, 0.2)
  }
  
  .p-top-pages__item--udon:hover{
	opacity: .7
  }
  
  .p-top-pages__item--udon{
	width: 100%;
	height: 180px;
	background-image:url(/img/top/bnr_-category_pc.jpeg);
  }
  .p-top-pages_udon_title {
	font-size: 36px;
	font-weight: 700;
	margin: 100px 0 30px;
	text-shadow: 0 0 5px　rgba(0, 0, 0, .3);
	text-align: center;
	color:#fff;
	text-shadow: 1px 2px 3px #000
  }

  .p-top-pages__item--canp{
	width: 100%;
	height: 1px;
	text-align: center;
	margin-bottom: 19px;
	background-position: 50%;
	background-size: cover;
	position: relative
  }
    
.p-top-pages__item--canp:after{
	content: "";
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 0;
	background: rgba(177, 177, 177, 0.2)
  }
  
  .p-top-pages__item--canp:hover{
	opacity: .7
  }
  
  .p-top-pages__item--canp{
	width: 100%;
	height: 180px;
	background-image:url(/img/top/syabon_cp_bnr_pc_2.jpeg);
  }

  .p-top-pages__item--niku{
	width: 100%;
	height: 1px;
	text-align: center;
	margin-bottom: 19px;
	background-position: 50%;
	background-size: cover;
	position: relative
  }
  .p-top-pages__item--niku:after{
	content: "";
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 0;
	background: rgba(177, 177, 177, 0.2)
  }
  
  .p-top-pages__item--niku:hover{
	opacity: .7
  }
  
  .p-top-pages__item--niku{
	width: 100%;
	height: 180px;
	background-image:url(/img/top/nikuudon.jpeg);
  }
  .p-top-pages__item--motu{
	width: 100%;
	height: 1px;
	text-align: center;
	margin-bottom: 19px;
	background-position: 50%;
	background-size: cover;
	position: relative
  }
  .p-top-pages__item--motu:after{
	content: "";
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 0;
	background: rgba(177, 177, 177, 0.2)
  }
  
  .p-top-pages__item--motu:hover{
	opacity: .7
  }
  
  .p-top-pages__item--motu{
	width: 100%;
	height: 180px;
	background-image:url(/img/top/motunabe.jpeg);
  }
  .p-top-pages__item--gct{
	width: 100%;
	height: 1px;
	text-align: center;
	margin-bottom: 19px;
	background-position: 50%;
	background-size: cover;
	position: relative
  }
  .p-top-pages__item--gct:after{
	content: "";
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 0;
	background: rgba(177, 177, 177, 0.2)
  }
  
  .p-top-pages__item--gct:hover{
	opacity: .7
  }
  
  .p-top-pages__item--gct{
	width: 100%;
	height: 180px;
	background-image:url(/img/top/gct.png);
  }
  .p-top-pages__item--nama{
	width: 100%;
	height: 1px;
	text-align: center;
	margin-bottom: 19px;
	background-position: 50%;
	background-size: cover;
	position: relative
  }
  .p-top-pages__item--nama:after{
	content: "";
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 0;
	background: rgba(177, 177, 177, 0.2)
  }
  
  .p-top-pages__item--nama:hover{
	opacity: .7
  }
  
  .p-top-pages__item--nama{
	width: 100%;
	height: 180px;
	background-image:url(/img/top/sukesantuyu.png);
  }
.top-itemlist{

}

.ttl{
	font-family: 'Noto Serif Japanese', serif, sans-serif;
	color: #1b0e00;
	line-height: 140%;
	box-sizing: border-box;
	border: 0;
	outline: 0;
	vertical-align: baseline;
	background: transparent;
	width: 130px;
	font-size: 26px;
	text-align: center;
	margin: 0 auto 60px auto;
	position: relative;
	padding: 15px 0;
	border-top: solid 3px #1b0e00;
	border-bottom: solid 3px #1b0e00;
}



section#itemlist .item_wide .shiawaseBnrTxt01{font-size: 20px;display: block;}
/*==================================
	itemlist
==================================*/
section#itemlist .item_wide {position: relative; margin-bottom: 5%;}
section#itemlist .item_wide  {margin-top: 0%;}
section#itemlist .item_wide img {width: 100%;}
section#itemlist .item_wide .txt {top:15%; left: 0; right: 0; text-align: center;}
section#itemlist .item_wide .txt.campaign {top: 10%;}
section#itemlist .item_wide .txt .product {font-size: 130%;  padding-bottom: 3%;}
section#itemlist .item_wide .btn {top: 65%;left: 0;right: 0;text-align: center;}

section#itemlist {margin: 0 auto; width: 90%; padding: 15% 0;}
section#itemlist h1 {font-size: 26px; text-align: center;margin-bottom: 10%;}
section#itemlist h1 .title-border::before, section .title-border::after {width: 20%;}
section#itemlist ul {display: block;}
section#itemlist ul li {position: relative; margin-top: 5%;}
section#itemlist ul li:first-child {margin-top: 0%;}
section#itemlist ul li img {width: 100%;}
section#itemlist ul li .txt {top:15%; left: 0; right: 0; text-align: center;}
section#itemlist ul li .txt.campaign {top: 30%;}
section#itemlist ul li.item06 .txt {top:25%;}
section#itemlist ul li .txt .product {font-size: 150%;  padding-bottom: 3%;}
section#itemlist ul li .txt .product.caption {padding-bottom: 1%;}
section#itemlist ul li .txt .price {font-size: 140%;}
section#itemlist ul li .link {font-size: 18px;}
section#itemlist ul li .link a {font-size: 18px;}
section#itemlist ul li .btn {position: absolute;}
section#itemlist ul li .btn { top:65%; left: 0; right: 0; text-align: center;}
section#itemlist .btn .linkbtn {font-size: 90%; padding: 1% 8%;}

/*==================================
	itemlist
==================================*/
section#news {
	margin: 0 auto;
	width: 90%;
	padding: 15% 0;
}
section#news h1 {
	font-size: 26px;
	text-align: center;
	margin-bottom: 10%;
}
section#news ul {
    width: 100%;
}




/*==================================
	PCSP
==================================*/
.pcOnly {display: block;}
.spOnly {display: none;}

@media screen and (max-width: 750px) {
.pcOnly {display: none;}
.spOnly {display: block;}
}

/*==================================
	font
==================================*/

.font24 {font-size:24px;}
.font12 {font-size:12px;}
.font_red {color:#ed7d4b; }

/*==================================
	header
==================================*/
header {position: fixed;width: 100%;z-index: 100;top: 0; background:#f8f8f8;height: 100px; margin: 0 auto; font-family: "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック体", "YuGothic", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", "Meiryo", "verdana", sans-serif;}

header nav {position: relative; width: 100%; max-width: 1200px; margin: 0 auto; top: 15px;background:#f8f8f8;}
header nav .logo  {width: 344px; position: absolute; left: 0; right: 0; margin: 0 auto;}
header nav .logo img  {width: 100%;}
header nav a {display: block;}
header nav ul {display: flex; position: absolute; right: 0; top: 20px;}
header nav ul li:first-child {margin: 10px 40px 0 0;}
header nav .mypage {font-weight: 600;}
header nav .mypage a {padding-left: 35px;}
header nav .mypage .mypageicon {position: relative;}
header nav .mypage .mypageicon img {position: absolute; left: 0; top:-2px; width: 25px; }
header nav .cart {width: 180px; color: #fff; background: #ed7d4b; border-radius:5px; position: relative; font-weight: 600;}
header nav .cart a {color: #fff; padding: 10px 25px;}
header nav .cart .carticon img {position: absolute; right:30px; top: 8px; width: 25px; }

header #headerTelBox { position: absolute; left: 0; top: 1px;}
header #headerTelBox .txt { font-size: 15px; font-weight: bold; margin-bottom: 5px;}
header #headerTelBox .tel { font-size: 25px; font-weight: bold;line-height: 1.0;}
header #headerTelBox .tel img { width: 1.2em; vertical-align: -1px; margin-right: 6px;}
header #headerTelBox .time { font-size: 13px; margin-top: 2px; text-align: right;}

@media screen and (max-width: 1200px) {
	header {padding: 0 5%;}
}

@media screen and (max-width: 1200px) {
header {padding: 0 5%;}
header nav {width:1000px;}
header nav .logo {width: 300px;}
}




/*==================================
	footer
==================================*/
footer {background: #f8f8f8; background-position: right;font-family: "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック体", "YuGothic", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", "Meiryo", "verdana", sans-serif;}
footer .footerInnerBlock {}
footer .menuBlock {padding: 30px 0; border-bottom: solid #dadada 1px; border-top: solid #1b0e00 3px;}
footer .menuBlock ul {margin-right: 30px; display: flex; flex-flow: row wrap; justify-content: center;}
footer .menuBlock ul li {margin-right:45px; }
footer .menuBlock ul li:last-child {margin-left: 25px;}
footer .menuBlock ul li a {text-decoration: none; display: block;}
footer .storeInfo {width: 1000px; margin: 60px auto;display: flex;justify-content: space-between;}
footer .address {width: 500px; display: flex;}
footer .address .add {margin-left: 40px; font-size: 12px; line-height: 1.9; padding-top: 5px;}

footer p.copy {margin: 0; color: #fff; padding: 20px; text-align: center; background: #1b0e00; font-size: 10px;}



@media screen and (max-width: 750px) {

/*==================================
	base
==================================*/
body {min-width: 100%;}
.arrow::before {top:10px;}	

/*==================================
	font
==================================*/
.font24 {font-size:120%;}
.font12 {font-size:60%;}

/*==================================
	header
==================================*/
header {height: 64px; width: 100%; padding: 0 3%;}
header nav {width: 100%; height: auto; top: 10px;}
header nav .logo {width: 44%; max-width: 180px; display: inline-block; z-index: 100; /*right: 50%; transform: translate(-50%, 0); position: initial;*/ text-align: center;}
header nav ul {top:0;}
header nav ul li:first-child {margin: 10px 8px; }
header nav .cart {width: 50%;}
header nav .cart .carticon img {padding-left:0; position: initial;}
header nav .cart a {padding: 10px;}
    
header #headerTelBox { left: -1%; top:-2px;}
header #headerTelBox a { color: inherit; text-decoration: none;}
header #headerTelBox .txt { font-size: 12px; line-height: 1.5; font-weight: bold; margin-bottom: 0;}
header #headerTelBox .tel { font-size: 22px; font-weight: bold;line-height: 1.0;}
header #headerTelBox .tel img { width: 1em; vertical-align: -1px; margin-right: 6px;}
header #headerTelBox .time { font-size: 10px; margin-top: 0; text-align: left; line-height: 1.5;}

main #mv .mvbox {margin-top: 64px !important;}
#contentPage main {margin-top: 64px !important;}
    

}

@media screen and (max-width: 420px) {
header #headerTelBox { left: -1%; top:0;}
header #headerTelBox .txt { font-size: 2.2vw; line-height: 1.6; font-weight: bold; margin-bottom: 1px;}
header #headerTelBox .tel { font-size: 3.5vw; font-weight: bold;line-height: 1.0;}
header #headerTelBox .tel img { display: none;}
header #headerTelBox .time { font-size: 1.8vw; margin-top: 1px; text-align: left; line-height: 1.5;}
}