@charset "utf-8";

/* ===================================================================
CSS information

 File Name  : layout.css
 Author     : 
 Style Info : 共通CSS
=================================================================== */

.smp_header, .smp_footer, .smp{ display:none;}

#newsticker{margin-bottom: 20px;}
#newsticker ul li a{color: #9c1c2b;}

.syosai{ float:right;}


#wrapper{}
#container {width: 1040px; background:#fff; padding:0; font-size: 14px; line-height: 170%; margin: 0 auto;}
#container_w {width: 1060px; background:#fff; padding:0; font-size: 14px; line-height: 170%; margin: 0 auto;}

.bnr_box{width: 423px; margin-left: 10px; float: left;}
.bnr_box img{margin-bottom: 7px;}

.bnr_abt{margin-bottom: 40px;}
.bnr_abt img{margin-bottom: -48px}


.item_data{ width:80%; margin:0 auto; box-sizing:border-box; padding:15px; border:#ccc 1px solid;}
.item_data .ul_L{ float:left;}
.item_data .ul_R{ float:right;}
.item_data ul li{margin-bottom: 5px;}

#sub_main{width: 740px; box-sizing:border-box; float:left; margin-bottom:60px;}
#sub_main h3{width:710px; margin-top: 20px; text-align: center; background: #fff; line-height: 180%; color: #fff; font-size: 16px; font-weight: bold; letter-spacing: 2px;}
#sub_main .item_box_3{height: 380px; margin-top: 20px; clear: both; }
#sub_main .item_box{width: 220px; float: left; margin-right: 24px;}
#sub_main .item_box_3 > .item_box:last-child{margin-right: 0;}
#sub_main .item_name{width: 220px; height: 50px; display: table-cell;  vertical-align: middle; text-align: center; background: #273996; padding: 0 5px;}
#sub_main .item_name p{display: inline-block; text-align: left; color: #fff; font-size: 15px; line-height: 120%;}
#sub_main .item_no{font-size: 25px; font-weight: bold; margin: 7px auto; text-align: center}
#sub_main .price_box{ width:60%; height:40px; line-height:40px; float:left; margin-top:10px; font-size:20px; font-weight:bold; display: table-cell; vertical-align: middle; text-align: right; }
#sub_main .limit{display: inline-block; margin-right: 5px;}
#sub_main .item_price{display: inline-block; font-size: 19px; font-weight: bold; line-height: 35px;}
#sub_main .item_price b{font-size: 30px; font-weight: bold; color: #e60012;}
#sub_main .item_btn{text-align: right; margin: 10px; font-size: 16px; margin-left: 70px;}
#sub_main .item_btn select{width: 45px; height: 31px; font-size: 16px;}
#sub_main .item_btn input{vertical-align: bottom; margin-left: 8px; margin-right: 30px;}
#sub_main .item_btn p{}
#sub_main p.hf_no{width:280px; margin-top: 20px; float: left;}
#sub_main p{ width:90%; margin:0 auto; font-size:16px; line-height:165%;}
#sub_main h2{ text-align:center;}


#s_menu{ width:260px; margin-top:15px; float:right; font-size:16px; margin-left:10px; background:#eefdff;}
#s_menu img{ text-align:center; margin-bottom:15px;}

#s_menu ul{ margin-top:5px; margin-bottom:15px;  color:#fff; list-style:circle;}
#s_menu li{ margin-left:30px; font-size:15px; line-height:165%;}

#s_menu a{ color:#305eac;}


#tokusen .tokusen_box{}

#tokusen .tokusen_img{ float:left; margin-left:30px;}
#tokusen .tokusen_logo{ float:left; padding:0 30px;}
#tokusen .tokusen_item{ float:left; width:535px;}
#tokusen .tokusen_item p span{font-size: 14px;}
#tokusen p{ margin-top:20px; font-size:16px; line-height:165%;}
#tokusen .item_btn select{width: 45px; height: 31px; font-size: 16px;}
#tokusen .item_btn input{vertical-align: bottom; margin-left: 6px;}

#tokusen .pickup_item_box{ width:230px; float:left; margin-left:29px;}
#tokusen .pickup_item_box:first-child{ margin-left:15px;}
#tokusen .pickup_item_box img{ display:block; margin:auto;}


.pickup{ margin:60px 0 50px;}
.pickup_item_price, .top_item_price{ margin-top:15px; font-size:16px; text-align:center;}
.pickup_item_text, .top_item_text{ margin-top:15px; line-height:165%;}
.pickup_item_img{ height:230px;}

.gift_img{margin-bottom: 20px;}


.item_wrap{ width:750px; margin-bottom:30px; float:left; margin-top: 20px;}
.top_item_box{ width:215px; background:#f6f5f5; border:#dadada 1px solid; float:left; margin-left:29px;}
.top_item_box:first-child{ margin-left:0;}
.top_item_box img{ display:block; margin:auto;}
.top_item_img{ background:#fff; width:93%; margin:7px auto;}
.top_item_price{ height:30px; margin-top:5px;}
.gry_box{font-size: 12px; background: #b1b1b1; color: #fff; margin-left: 3px; padding: 0 3px}


.cat_title1,.cat_title2,.cat_title3,.cat_title4,.cat_title5,.cat_title6{width:260px; font-size:18px; text-align:center; display: table-cell; vertical-align:middle; color:#fff; margin-top:15px;}

#sub_main .span1{ font-weight:bold; color:rgba(235,45,48,1.00);}

.f22{ font-size:22px;}

.top_img{ margin:20px 0;}

.cake, .yokan{width: 350px; margin: 30px auto; padding: 15px; border: solid 1px #eee;}
.cake img{height: 320px;}
.yokan img{width: 100%;}


#sub_main p.txt01{margin-left: 70px;}

.item_btn{ width:80%; margin:0 auto; padding:5px 0; text-align:center;
	margin-top:10px;
	border-top: 1px rgba(196,196,196,1.00) solid;
	border-bottom: 1px rgba(196,196,196,1.00) solid;
	vertical-align:central;
	}
	
.item_btn2{ width:80%; margin:0 auto; padding:5px 0; text-align:center;
	vertical-align:central;
	border-top: 1px rgba(196,196,196,1.00) solid;
	border-bottom: 1px rgba(196,196,196,1.00) solid;
	margin-bottom:8px;
	}
.item_btn2 select{width: 45px; height: 31px; font-size: 16px;}
.item_btn2 input{vertical-align: bottom; margin-left: 6px;}
.item_btn2 p{margin-top: 7px;}


.submit_btn{
    border: 0px;
    width:63px;
    height:27px;
    background:url(../img/btn01.png); left top no-repeat;}

.clearfix:after {
    content:" ";
    display:block;
    clear:both;
}

a.btn{
  position: relative;
  display: block;
  height: 18%;
  width: 45%;
  text-decoration: none;
  background:rgba(75,162,255,1.00);
  color: #fff;
  font-size:21px;
  font-weight:bold;
  line-height: 37px;
  text-align: center;
  border-radius: 3px;
  box-shadow: 1px 2px 4px #d4842c;
}
a.btn{
  -ms-transform: translateY(2px);
  -webkit-transform: translateY(2px);
  transform: translateY(2px);
  box-shadow:none;
}

.att_footer{ background:#fff; color:#000;}


/*　トップスライドバナー　*/
.slider {float: left;}
.slider img {width: 100%; height: auto;}
.single-item {max-width: 607px; margin: 0 ;}

.slick-prev::before, .slick-next::before {
	font-size: 24px;
}
.lazy-item .slick-next,
.thumb-item-nav .slick-next,
.multiple-item .slick-next,
.center-item .slick-next {
	right: 20px;
	z-index: 99;
}
.lazy-item .slick-prev,
.thumb-item-nav .slick-prev,
.multiple-item .slick-prev,
.center-item .slick-prev {
	left: 15px;
	z-index: 100;
}
.single-item .slick-prev::before,
.single-item .slick-next::before {
	color: #666;
}
.slick-dots {
	bottom:-25px;
}
.multiple-item li {
	margin: 0 5px;
}
.thumb-item {
	max-width: 700px;
	margin: 0 auto 5px;
	padding: 0 5px;
}
.thumb-item-nav {
	max-width: 700px;
	margin: 0 auto;
}
.thumb-item-nav li{
	margin: 5px;
}
.lazy-item {
	width: 400px;
	margin: 0 auto 50px;
}
.lazy-item li {
	margin: 0 5px;
}

/*スライドメニュー*/
/*------------------------------*/
#menu {
  position: fixed;
  top: 0;
  right: -340px; /* メニューのwidth + padding */
  width: 60%; /* メニューのwidth */
  height: 100%;
  padding: 20px;
  transition: left .5s, right .5s; /* アニメーション */
  background-color: rgba(86, 86, 86, .9);
  z-index:100;
  font-size:17px;
  line-height:165%;
}
 
.toggle {
  font-size: 50px;
  cursor: pointer;
}
 
.toggle:hover {
  text-decoration: underline;
}
 
#open {
  display: none;
}
 
/* :checked 擬似クラスを使って、#openがチェック状態になった時に、#menuが「right: 0;」になります。 */
#open:checked + #menu {
  right: 0;
}

#menu a {
  text-decoration: none;
  color: #fff;
}

.imgfix { text-align:center; margin-bottom:15px;}

#item #gFooter .gFooterInner, #category #gFooter .gFooterInner, #hanpu #gFooter .gFooterInner{width: 1040px;}

/* category */
#category .item_wrap{margin:20px 0 0 20px;}
.cat_txt{padding: 10px; font-size: 18px; text-align: center; }
#category .top_item_box{height: 325px;}
.gift img{width: 720px; margin-left: 20px;}

#item .rsrv{color: #c90926; margin-top: 20px; padding: 5px 10px; border: solid 2px #c90926; font-weight: bold;}
#item .rsrv span{color: #333;}
#item .limit{text-align: center;}
.price_box span{background: #c90926; color: #fff; padding: 0 10px; font-size: 18px; margin-right: 10px;}

/* 酒粕　商品ページ　*/
#item .sakekasu{margin: 20px 40px 40px;}
#item .sakekasu ul{width: 500px; margin: 0 auto 30px;}
#item .sakekasu ul li{width: 140px; display: inline-block;}
#item .sakekasu ul li:nth-child(n+2){margin-left: 30px;}
#item .sakekasu div:nth-child(2){ background: #f6f5f5; padding: 20px 0;}
#item .sakekasu div:nth-child(2) p:first-child{margin-bottom: 10px;}
#item .sakekasu p:last-child{font-weight: bold;}

/* all blacks 商品ページ　*/
#allblacks section{width: 880px; margin: 40px auto;}
#allblacks .ab_txt01{text-align: center; font-weight: bold; margin: 60px 0 40px; font-size: 24px; line-height: 1.7;}
#allblacks .ab_txt02{width: 880px; margin: 0 auto; font-size: 18px; line-height: 1.5;} 
#allblacks .stry>div{margin-bottom: 60px;}
#allblacks .stry h3{background: #000; color: #fff; font-weight: bold; font-size: 20px; text-align: center; padding: 8px; margin-bottom: 40px; line-height: 1.5;}
#allblacks .stry .fRimg{width: 420px; float: right; margin-bottom: 20px;}
#allblacks .stry .fRimg img{width: 100%;}
#allblacks .stry p.fL{width: 440px; }
#allblacks .stry div.fR{width: 340px; background: #eefdff; color: #009ce6; padding: 20px 40px;}
#allblacks .stry div.fR h6{text-align: center; font-weight: bold; border-bottom: solid 1px #009ce6; margin-bottom: 10px; font-size: 16px;}
#allblacks .stry .fLimg{width: 320px; float: left; margin-bottom: 20px;}
#allblacks .stry .fLimg img{width: 100%;}
#allblacks .stry p{font-size: 16px; line-height: 1.7;}
#allblacks .stry p.fR{width: 540px;}
#allblacks .stry .name{text-align: right; font-weight: bold; margin-top: 10px;}
#allblacks .offer{background: #f2f2f2;}
#allblacks .offer .fL{width: 310px; padding: 20px;}
#allblacks .offer .fL img{width: 100%;}
#allblacks .offer .fR{width: 500px;}
#allblacks .offer h2{font-size: 34px; margin: 60px 0 30px;}
#allblacks .offer h2+p{background: #313131; display: inline-block; color: #fff; font-size: 20px; padding: 3px 40px;}
#allblacks .offer .ab_price{font-weight: bold; font-size: 20px; margin-top: 50px;}
#allblacks .offer .ab_btn01{width: 380px; display: block; background: #fff; border: solid 2px #c90926; line-height: 48px; font-size: 20px; color:#c90926; font-weight: bold; margin: 20px 0;}
#allblacks .offer .ab_btn01:hover{text-decoration: none; background: #c90926; color: #fff;}
#allblacks .offer .ab_btn02{width: 380px; display: block; font-size: 20px; font-weight: bold; color: #fff; background: #d8ac2e; padding: 20px 0; border: double 5px #fff;}
#allblacks .offer .ab_btn02:hover{text-decoration: none; background: #f1c444; color: #313131;}
#allblacks .offer .rsrv{border: none;}

/* ギフト商品ページ */
#item .gift{margin-top: 20px;}
#item .txtRbox{ background: #c90926; color: #fff; padding: 5px 0; font-weight: bold; font-size: 18px; border: double; text-align: center; margin: 20px auto 40px;}
#item .item_btn+p{margin-right: 100px;}

.bnr_pick {padding: 0 40px;}

@media screen and (max-width:480px) { 
/*　画面サイズが480pxまではここを読み込む　*/
	
	
	.pc{ display:none;}
	.smp{ display:block;}
	
	.imgfix{ width:100%;}
	.img90{width: 90%; margin: 0 auto;}
	
	#container,#wrapper,#container_w{ width:100%; min-width:100%; max-width:100%; padding:0;}
	
	/*　トップスライドバナー　*/
	.slider {float: none; width: 100%;}
	
	/* トップ　バナー	*/
	.bnr_box{width: 96%; padding: 0 2%; margin: 0;}
	.bnr_box img{width: 49%; float: left; }
	.bnr_box a.odd img{margin-right: 2%;}
	
	/* #sub_mainは商品P　*/
	.subttl{width: 100%; margin-top: 17%;}
	#sub_main{ width:90%; float:none; margin:0 auto; padding:0 0 20px; font-size:16px; margin-top:20%;}
	#sub_main img{ width:100%;}
	#sub_main h3{width: 100%;}
	#sub_main .item_box_3{ width:100%; height:auto;}
	p{ padding:3% 5%;}
	
	#sub_main .item_box{position: relative; width:98%; margin:0 auto; float:none; margin-top:15px; clear:both; border: 1px rgba(40,56,151,1.00) solid;}
	#sub_main .item_name{ float:left; width:58%; height:50%; background:none; margin-top:15%; }
	#sub_main .item_name p{font-size:20px; color:#111;}
	#sub_main .item_no{ clear:both; width:90%; font-size:20px; text-align:left; margin:0; background:rgba(40,56,151,1.00); color:#fff; position: absolute;
    top: 0;
    left: 0;}
	figure{ width:35%; float:left; margin-top:15%; margin-left:2%;}
	#sub_main .limit{ width:20%; float:left; padding:3px; margin-right:10px; margin-left: 37%;}
	.limit img{ width:100%;}
	#sub_main .price_box{ float:none; width:100%; margin-top:0; text-align:center; margin-bottom:10px; display: block; }
	#sub_main .price_box p{ padding:0;}
	#sub_main .item_btn{ float:none; width:100%; margin:0; box-sizing:border-box; font-size:20px background:rgba(180,228,182,1.00); padding:3%; border-top:dotted 1px rgba(40,56,151,1.00); text-align: center;}
	#sub_main p.hf_no{float: none; margin-top: 10px;}
	#sub_main .item_data{margin-top: 0; width: 90%; font-size: 14px;}
	#sub_main .item_data .ul_L{float: none;}
	#sub_main .item_data .ul_R {float: none; margin: 10px 5px 0; padding-top: 5px; border-top: dotted 1px #ddd;}
	
	#tokusen{ width:100%; margin-top:15%;}
	#tokusen .tokusen_box{ margin-top:15px;}
	#tokusen .tokusen_item{ float:none; width:95%; margin:0 auto; margin-top:30px;}
	#tokusen .tokusen_item p{margin-top: 0;}
	#tokusen .tokusen_logo{ width:20%; position:absolute; top:250px; left:auto;}
	#tokusen .tokusen_logo img{ width:100%;}
	#tokusen .tokusen_img{ width:40%; float:none; margin:0 auto;}
	#tokusen .tokusen_img img{ width:100%;}
	
	#tokusen .pickup{margin-bottom: 30px;}
	
	#tokusen .pickup_item_box{ float:none; margin:0 auto; margin-top:30px;}
	#tokusen .pickup_item_box:first-child{ margin-left:0; margin:0 auto;}

	
	.top_item_box{ float:none; margin:0 auto; margin-top:30px; width: 70%;}
	.top_item_box:first-child{ margin-left:0; margin:0 auto;}
	.top_item_box:last-child{ margin-bottom:30px;}
	
	.item_wrap{ margin-bottom:0; width: 100%; margin-top: 10px;}
	
	.gift_txt{text-align: left; margin-top: -10px;}
	
	.cp1803 h5{font-size: 20px; color: #fff; background: #9c1c2b; line-height: 1.5; margin: 0 5%;}
	.cp1803 h5+p{text-align: left; font-size: 16px;}
	.cp1803 p img{width: 100%;}
	.cp1803 p:nth-child(4) img{width: 25px;}
	
	#sub_main .cake{width: 60%; margin: 30px auto; border: solid 1px #eee;}
	#sub_main .cake img{width: 60%; height: auto;}
	#sub_main p.txt01{margin-left: 0;}
	
	#sub_main{ margin-top:30px;}

	/* category */
	#category .item_wrap{margin:0;}
	.cat_txt{padding: 10px; font-size: 16px; text-align: left; }
	#category .top_item_box{height: auto;}
	
	#item .limit{text-align: left;}
	.price_box span{font-size: 14px; margin-right: 10px;}
	#item .txtRbox{width: 98%; font-size: 14px; margin-bottom: 20px;}
	#item .item_btn+p{width: 96%; font-size: 12px; text-align: center; margin-right: 0;}
	
	.bnr_pick {padding: 0;}
		
	/* 酒粕　商品ページ　*/
	#item .sakekasu{margin: 0 auto 20px;}
	#item .sakekasu ul{width: 100%; margin: 0 auto 30px;}
	#item .sakekasu ul li{width: 140px; display: block; margin:0 auto;} 
	#item .sakekasu ul li:nth-child(n+2){margin: 20px auto 0;}
	#item .sakekasu div:nth-child(2){padding: 10px 0;}
	
	/* all blacks 商品ページ　*/
	#item .bnr_rgby a img{margin-top: 10px;}
	#allblacks .subttl{margin-top: 0; padding-top: 0;}
	#allblacks section{width: 94%;}
	#allblacks .stry .fL, #allblacks .stry .fR, #allblacks .offer .fL, #allblacks .offer .fR, #allblacks .stry .fLimg, #allblacks .stry .fRimg{float: none;}
	#allblacks p{font-size: 14px; padding: 0;}
	#allblacks .ab_txt01{margin: 10px 0; font-size: 18px; line-height: 1.5;}
	#allblacks .ab_txt02{width: 94%; margin: 0 auto; font-size: 16px;}
	#allblacks .stry>div{margin-bottom: 30px;}
	#allblacks .stry h3{font-size: 16px; text-align: center; padding: 5px; margin-bottom: 15px; line-height: 1.5;}
	#allblacks .stry .fRimg{width: 94%; max-width: 350px; margin: 0 auto 10px;}
	#allblacks .stry p{width: 94%; font-size: 14px; margin: 0 auto;}
	#allblacks .stry p.fL{width: 94%; margin: 0 auto;}
	#allblacks .stry div.fR{width: 90%; padding: 15px 2%; margin: 10px auto;}
	#allblacks .stry div.fR h6{font-size: 13px;}
	#allblacks .stry div.fR p{font-size: 12px;}
	#allblacks .stry .fLimg{width: 94%; max-width: 300px; margin: 0 auto 10px;}
	#allblacks .stry p.fR{width: 92%; }
	#allblacks .stry .sprt h3{text-align: left; padding: 5px 10px;}
	#allblacks .stry .name{margin-right: 3%;}
	#allblacks .offer{padding-bottom: 15px}
	#allblacks .offer .fL{width: 70%; max-width: 250px; margin: 0 auto; padding: 15px 0;}
	#allblacks .offer .fR{width: 100%;}
	#allblacks .offer h2{font-size: 20px; margin: 10px 0;}
	#allblacks .offer h2+p{font-size: 14px; padding: 3px 20px;}
	#allblacks .offer .ab_price{font-size: 16px; margin-top: 10px; text-align: center}
	#allblacks .offer .ab_btn01{width: 86%; line-height: 36px; font-size: 18px;margin: 10px 0 15px;}
	#allblacks .offer .ab_btn02{width: 86%; font-size: 16px; padding: 10px 0;}
	#allblacks .offer .rsrv{text-align: left;}
	
	.smp_header{ 
		display:block;
		position: fixed;            /* ヘッダーの固定 */
		top: 0px;                   /* 位置(上0px) */
		left: 0px;                  /* 位置(右0px) */	
		width:100%;
		z-index:90;
		background:#111 url(../../img/smp_logo.png); 
		background-position:center; 
		background-size:50%; 
		background-repeat:no-repeat; 
		box-sizing:border-box;
		padding:3%; 
	}
	.smp_footer{
	display:block;
	width:100%;
	background:#111;
	color:#fff;
	text-align:center;
	box-sizing:border-box;
	padding:3%; 
	font-size:12px;
		}
	
	#gFooter { width:100%; min-width:100%; background:#eefbfe; overflow:hidden; margin:0 auto; border-top: solid 2px #a4e3f1;}
	#gFooter .gFooterInner {margin:0 auto; height: auto; width: 100%; }
	#gFooter .gFooterInner ul{padding: 7px 7px 0; background: #f4fcfe;}
	#gFooter .gFooterInner ul li{padding: 0 10px; border-bottom: solid 1px #fff; line-height: 190%}
	#gFooter .gFooterInner ul li a{color: #000; font-size: 13px; text-decoration: none;}
	#gFooter .gFooterInner p{color: #0377ae; line-height: 160%; padding: 15px 17px 10px; font-size: 13px; background: #dcf5fb; }
	#gFooter .gFooterInner p.cr{font-size: 11px; text-align: center; background: #000; color: #fff; padding-top: 5px;}
	
	#item #gFooter .gFooterInner, #category #gFooter .gFooterInner, #hanpu #gFooter .gFooterInner{width: 100%;}
	
	a.btn{
	  height: 18%;
	  width: 85%;
	  font-size:18px;
	  font-weight:bold;
	}
	
}


@media screen and (max-width:321px) { 
/*　画面サイズが321pxまではここを読み込む　*/
	#item .rsrv{font-size: 14px; font-weight: normal;}
	#item .price_box{font-size:16px;}
}