/* Top CSS */

/* Desktops and laptops */
@media print, screen and (min-width: 701px) {
	/* header ----------------------- */
	#header {
		height:185px;
		padding:52px 0 0 0;
	}
	#logo {
		width:144px;
		height:140px;
	}
	#logo a {
		width:144px;
		height:140px;
		background:url(../images/top/top_logo.png) 0 0 no-repeat;
	}
	#gnav {
		height:63px;
		margin:0 auto;
	}
	
	/* slide ----------------------- */
	.slideWrapper {
		width:100%;
		min-width:1216px;
		height:500px;
		margin:0 0 38px 0;
		overflow:hidden;
		position:relative;
	}
	.slide {
		width:150%;
		height:500px;
		position:absolute;
		top:0;
		left:0;
	}
	.slide li {
		margin:0;
		padding:0;
		float:left;
	}
	.slide li img {
		opacity: 0;
	}
	
	/* info ----------------------- */
	#inoformation_area {
		width:1152px;
		padding:30px 30px 30px 30px;
		margin:0 auto 38px auto;
		background:url(../images/common/skin_black.png);
	}
	#info_area {
		width:560px;
		float:left;
	}
	#new_arrival_area {
		width:560px;
		float:right;
	}
	#info_title,
	#new_arrival_title {
		margin:0 0 10px 0;
		font-size:16px;
		color:#a39d7d;
	}
	#info li,
	#new_arrival li {
		padding:10px 0 10px 0;
		font-size:14px;
		line-height:40px;
		background:url(../images/common/line_dot.png) left bottom repeat-x;
        display: flex;
        line-height: 1.5;
	}
	#info li span,
	#new_arrival li span {
        width: 80px;
		font-size:14px;
		color:#a39d7d;
	}
    #info li a,
	#new_arrival li a {
        width: calc(100% - 80px);
	}
    /*
    #info li,
	#new_arrival li {
		padding:5px 0 0 80px;
		font-size:14px;
		line-height:40px;
		background:url(../images/common/line_dot.png) left bottom repeat-x;
		position:relative;
	}
	#info li span,
	#new_arrival li span {
		padding:3px 0 0 0;
		font-size:14px;
		color:#a39d7d;
		position:absolute;
		top:0;
		left:0;
	}
    */
	#info li a,
	#new_arrival li a {
		font-family: "Hiragino Kaku Gothic Pro","ヒラギノ角ゴ Pro W3","メイリオ",Meiryo,"ＭＳ Ｐゴシック",Helvetica,Arial,Verdana;
	}
	
	/* stitle ----------------------- */
	.stitle {
		width:1212px;
		height:53px;
		margin:0 auto;
		position:relative;
		border-top:solid 1px #474029;
		border-bottom:solid 1px #474029;
	}
	#stitle_gallery {
		 margin:0 auto 15px auto;
	}
	.stitle h2 {
		text-align:center;
		font-size:18px;
		line-height:53px;
		color:#a39d7d;
	}
	.more {
		position:absolute;
		top:0;
		right:0;
	}
	.more a {
		padding:0 36px;
		background:url(../images/common/icon_arrow.png) 90px 13px no-repeat;
		display:block;
		text-align:center;
		text-decoration:none;
		font-size:16px;
		line-height:53px;
		color:#a39d7d;
	}
	
	/* gallery ----------------------- */
	#cocktails {
		width:1216px;
		margin:0 auto 35px auto;
	}
	#cocktails li {
		width:300px;
		height:450px;
		margin:0 2px 9px 2px;
		border-top:solid 1px #474029;
		position:relative;
		float:left;
	}
	#cocktails li p.category {
		position: absolute;
		bottom: 0;
		left: 0;
		font-size: 13px;
		color:#a39d7d;
		padding: 7px 15px 5px;
		height: 16px;
		background: rgba(45,40,27,0.8);
	}
	#cocktails li p.category:after {
		display: block;
		content: "　";
		width: 0;
		height: 0;
		padding-top: 10px;
		padding-bottom: 10px;
		border-right: transparent 27px solid;
		border-bottom: rgba(45,40,27,0.8) 27px solid;
		position: absolute;
		top: -19px;
		right: -27px;
	}
	
	#cocktails li dl {
		width:0;
		height:450px;
		border-top:solid 1px #474029;
		background-color:#000000;
		position:absolute;
		top:-1px;
		left:300px;
		z-index:10;
		overflow:hidden;
	}
	#cocktails li.rightElement dl {
		left:0;
	}
	#cocktails li dl dt {
		padding:80px 30px 0 30px;
		color:#ffffff;
		font-size:15px;
		line-height:1.5;
	}
	#cocktails li dl .month {
		width:240px;
		border-top:solid 1px #474029;
		border-bottom:solid 1px #474029;
		text-align:center;
		color:#a39d7d;
		font-size:14px;
		line-height:2;
		position:absolute;
		top:30px;
		left:30px;
		font-family: 'Mate SC';
		cursor:pointer;
	}
	#cocktails li dl .month a {
		color:#a39d7d;
		font-size:18px;
		text-decoration:none;
	}
	#cocktails li dl .description {
		padding:30px 30px 0 30px;
		color:#ffffff;
		font-size:13px;
		line-height:1.7;
	}
	#cocktails li dl .link_more {
		position:absolute;
		bottom:25px;
		left:30px;
		opacity:0;
	}
    #cocktails li a img {
        width: 100%;
        height: auto;
    }
	#more_wrapper {
		width:1216px;
		margin:0 auto 40px auto;
	}
	#more_wrapper .link_more {
		margin:0 auto;
	}
}

/* Smartphones (portrait and landscape) */
@media screen and (max-width : 700px) {
	/* Smartphones header ----------------------- */
	#header {
		height:185px;
		padding:52px 0 0 0;
	}
	#logo {
		width:144px;
		height:140px;
	}
	#logo a {
		width:144px;
		height:140px;
		background:url(../images/top/top_logo_sp.png) 0 0 no-repeat;
		background-size: 100% auto;
	}
	/* Smartphones global navigation */
	#gnav {
		display:block;
	}
	/* Smartphones slide ----------------------- */
	.slideWrapper {
		display:none;
	}
	
	/* Smartphones stitle ----------------------- */
	.stitle {
		width:100%;
		margin:0 auto;
		position:relative;
		border-top:solid 1px #474029;
		border-bottom:solid 1px #474029;
	}
	#stitle_gallery {
		 margin:0 auto 15px auto;
	}
	.stitle h2 {
		text-align:center;
		font-size:18px;
		line-height:53px;
		color:#a39d7d;
	}
	.more {
		position:absolute;
		top:0;
		right:0;
	}
	.more a {
		padding:0 36px;
		background:url(../images/common/icon_arrow.png) 90px 13px no-repeat;
		display:block;
		text-align:center;
		text-decoration:none;
		font-size:16px;
		line-height:53px;
		color:#a39d7d;
	}
	
	/* Smartphones info ----------------------- */
	#inoformation_area {
		width:100%;
		padding:0;
		margin:0 auto 30px auto;
		background:url(../images/common/skin_black.png);
	}
	#info_title,
	#new_arrival_title {
		padding:10px;
		margin:0;
		font-size:14px;
		color:#a39d7d;
		background-color:#474029;
	}
	#info li,
	#new_arrival li {
		padding:10px;
		font-size:14px;
		line-height:1.4;
		background:url(../images/common/line_dot.png) left bottom repeat-x;
	}
	#info li span,
	#new_arrival li span {
		padding:3px 0;
		font-size:16px;
		color:#a39d7d;
		display:block;
	}
	#info li a,
	#new_arrival li a {
		font-family: "Hiragino Kaku Gothic Pro","ヒラギノ角ゴ Pro W3","メイリオ",Meiryo,"ＭＳ Ｐゴシック",Helvetica,Arial,Verdana;
	}
	
	/* Smartphones gallery ----------------------- */
	#cocktails {
		width:100%;
		margin:0 auto 30px auto;
	}
	#cocktails li {
		width:25%;
		margin:0;
		float:left;
	}
    #cocktails li p.category {
        display: none;
	}
	#cocktails li img {
		width:100%;
	}
	#cocktails li dl {
		display:none;
	}
	#more_wrapper {
		width:100%;
		margin:0 auto 30px auto;
	}
	#more_wrapper .link_more {
		margin:0 auto;
	}
}