@charset "shift_jis";
@import "common.css";


/*===============================================
全メディア共通
===============================================*/


/*----お酒の紹介----*/
#items h3{background:top;text-indent:-9999px;}
#items p{margin:20px 0 25px;}

#item1{
	background:url(../images/items/item1b.jpg) center / cover no-repeat;
	background-size:cover;
}

#item1 h3{
	background:url(../images/top/item1t.png)  no-repeat;
	float:left;
}

#item2{
	background:url(../images/items/item2b.jpg) center / cover no-repeat;
	background-size:cover;
}

#item2 h3{
	background:url(../images/top/item2t.png)  no-repeat;
	float:left;
}

#item1_list{
	background-color:#E3F0F6;
}

#item2_list{
	background-color:#EAEEF4;
}

#item3_list{
	background-color:#F0F0F0;
}

#item1_list div.container,
#item2_list div.container,
#item3_list div.container{text-align:center;}

#items div.itembox{
	background-color:#fff;
	display:inline-block;
}

#items h5{
	text-align:center;
	font-size:1em;
	margin:7px 0;
}

#items li{
	background:url(../images/items/lst.gif) left no-repeat;
	border-style:dotted;
	border-color:#ccc;
	border-width:0 0 1px 0;
	width:85%;
	margin:0 auto;
}

/*↓詳細ボタン↓*/
#items a.detail{
  display: inline-block;
  width: 154px;
  text-align: center;
  text-decoration: none;
  outline: none;
  background-color: #3E0707;
  color: #fff;
	margin-top:20px;
	font-size:0.95em;
	padding:2px;
} 
#items a.detail:hover{
  background-color: #BE3333;
}
#items a.detail::before,
#items a.detail::after {
  position: absolute;
  z-index: -1;
  display: block;
  content: '';
}
#items a.detail,
#items a.detail::before,
#items a.detail::after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-transition: all .3s;
  transition: all .3s;
}
/*↑詳細ボタン↑*/

/*===============================================
画面の横幅が769px以上（パソコン用）
===============================================*/
@media screen and (min-width: 769px){
#items{	margin:120px 0 0;}
#items h3{width:67px;}
#items h4{font-size:1.3em;margin:50px 0 0;padding-top:50px;}
#item1{	height:210px;	padding-bottom:20px;}
#item1 h3{
	height:167px;	
	margin:50px 35px 0;
}
#item2{
	height:210px;
	padding-bottom:20px;
	clear:both;
}
#item2 h3{
	height:124px;	
	margin:50px 35px 0;
}
#item1_list{
	padding:10px 0 30px ;
	clear:both;
}
#item2_list{
	padding:10px 0 30px;
	clear:both;
	margin-bottom:80px;
}
#item3_list{
	padding:30px 0 70px;
}

#items div.itembox{
	width:250px;
	padding:20px;
	margin:10px;
	vertical-align:top;
}

#item1_list div.itembox{
	height:620px;
}

#item2_list div.itembox{
	height:590px;
}

#item3_list div.itembox{
	height:370px;
}

#item1_list p,
#item2_list p,
#item3_list p{margin:0 0 10px;font-size:0.98em}
#items li{font-size:0.95em;	padding:2px 0 2px 18px;}


}


/*===============================================
画面の横幅が799pxまで（スマホ・タブレット用）
===============================================*/
@media screen and (max-width:799px){
#items{	margin:80px 0 0;}
#item1,#item2{padding:15px;}
#item1 h3,#item2 h3{
	background-size:100%;
	width:50px;
	margin:10px 20px 10px 10px;
}
#item1 h3{	height:120px;	}
#item2 h3{	height:95px;	}
#items h4{font-size:1.2em;margin:10px;}
#item1 p,#item2 p{margin:0}
#item1_list,#item2_list,#item3_list{padding-bottom:40px;}
#items div.itembox{width:47%;margin:7px 0;padding:7px 0;vertical-align:top}
#item1_list p,
#item2_list p,
#item3_list p{margin:10px;font-size:0.9em;line-height:1.2em}
#items li{font-size:0.85em;line-height:1.2em;padding:5px 0 5px 18px;}
#item3_list{padding-top:40px;margin-top:40px;}
}