@charset "utf-8";

/*-------------------------------------------------------------
 01: Reset
 --------------------------------------------------------------*/
html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
    margin:0;
    padding:0;
    border:0;
    outline:0;
    font-size:100%;
    vertical-align:baseline;
}

/*-------------------------------------------------------------
 02: Base
 --------------------------------------------------------------*/
#suntory_contents {
    font-size:100%;
	font-family: "ヒラギノ角ゴ Pro W3", "メイリオ", Meiryo, "Helvetica", "Arial", "Verdana", "Geneva", "ＭＳ Ｐゴシック", "Hiragino Kaku Gothic Pro", "MS P Gothic", sans-serif;
	color:#030303;
	line-height:1.6;
}
h1,h2,h3,h4,h5,h6 {
    font-size: 100%;
    font-weight:normal;
}
article,aside,details,figcaption,figure,
footer,header,hgroup,menu,nav,section { 
    display:block;
}
blockquote, q {
    quotes:none;
}
blockquote:before, blockquote:after,
q:before, q:after {
    content:'';
    content:none;
}
table {
    /*border-collapse: collapse;*/
    border-spacing: 0;
    /*font-size: inherit;*/
    /*font: 100%;*/
}
/* change colours to suit your needs */
ins {
    background-color:#ff9;
    color:#000;
    text-decoration:none;
}
/* change colours to suit your needs */
mark {
    background-color:#ff9;
    color:#000; 
    font-style:italic;
    font-weight:bold;
}
del {
    text-decoration: line-through;
}
abbr[title], dfn[title] {
    border-bottom:1px dotted;
    cursor:help;
}
/* change border colour to suit your needs */
hr {
    display:block;
    height:1px;
    border:0;   
    border-top:1px solid #cccccc;
    margin:1em 0;
    padding:0;
}
input, select {
    vertical-align:middle;
}
fieldset,img { border: 0; }
ol,ul {
    list-style: none; 
    padding: 0; 
    margin: 0;
}
li,dt,dd {
    font-size :100%;
}
button,
input,
select,
textarea {
    font-size:100%;
}
caption,th { text-align: left; }
iframe{ border: none; }

img{ vertical-align:top; }

#gn_block_top{
	height:auto;
}

/*-------------------------------------------------------------
 03: Header,Footer
 --------------------------------------------------------------*/
#container header,
#container footer{
	text-align:center;
	background-color:#612e1c;
}
#container header .inner,
#container footer .inner{
	width:960px;
	height:60px;
	text-align:left;
	position:relative;
	margin:0 auto;
}
#container header nav,
#container footer nav{
	position:absolute;
	top:0;
	right:0;
}
#container header nav ul li,
#container footer nav ul li{
	float:left;
}

#container header .menuBtn,
#container footer .menuBtn{
	width:20px;
	height:40px;
	text-indent:-9999px;
	overflow:hidden;
	background:url(../img/sp/icon_menu.png) no-repeat;
	-webkit-background-size:100%;
	background-size:100%;
	position:absolute;
	top:10px;
	right:10px;
}
#container header .menuBtn.open,
#container footer .menuBtn.open{
	width:11px;
	height:11px;
	background:url(../img/sp/icon_close.png) no-repeat;
	-webkit-background-size:100%;
	background-size:100%;
}

@media screen and (max-width: 767px) {
	#container header .inner,
	#container footer .inner{
		width:auto;
		height:auto;
	}
	#container header h1 img,
	#container footer .logo img{
		width:164px;
		height:auto;
	}
	#container header nav,
	#container footer nav{
		display:none;
		position:static;
		top:auto;
		right:auto;
	}
	#container header nav ul{
		width:100%;
	}
	#container header nav ul li,
	#container footer nav ul li{
		width:25%;
	}
	#container header nav ul li img,
	#container footer nav ul li img{
		width:100%;
		height:auto;
	}
}

/*-------------------------------------------------------------
 04: Layout
 --------------------------------------------------------------*/

.clearfix:after {
    content: "";
    clear: both;
    display: block;
    height: 0;
    visibility: hidden;
    line-height: 0;
}
.clearfix {
    zoom: 1;
}

.pagetop {
    display: none;
    position: fixed;
    bottom: 30px;
    right: 30px;
	z-index:100;
}

/*-------------------------------------------------------------
 05: レスポンシブ
 --------------------------------------------------------------*/
 
.pc-display {
	display: block;
}

.sp-display {
	display: none;
}

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

	.pc-display {
		display: none;
		display: block\9;
	}

	.sp-display {
		display: block;
		display: none\9;
	}
	
	#container #btmNav{
		height:auto;
		background-image:none;
		background-color:#ececec;
		padding:20px 0;
	}
	#container #btmNav ul{
		width:264px;
	}
	#container #btmNav ul li{
		border:solid 1px #bbb9b8;
	}
	#container #btmNav ul li img{
		width:130px;
		height:auto;
	}
	
	.pagetop{
   		bottom: 10px;
  		right: 10px;
	}
	.pagetop img{
		width:40px;
		height:auto;
	}

}