@charset "utf-8";
/* CSS Document */
.o750{display: block;}
.u750{display: none;}

p{
	font-size: 14px;
	line-height: 2.2;
    box-sizing: border-box;
}

h3{
	margin-bottom: 40px;
	display: block;
	overflow: hidden;
}

body {
	width:100%;
	margin:0;
	padding:0;
	overflow: auto;
}

@media screen and (max-width: 750px) {
h3{margin-bottom: 30px;}
}


/* ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
ページトップ
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝*/

 

#pageTop {
    z-index: 3;
    position: fixed;
    bottom: 0px;
    right: 0px;
    display:block;
}

 

#pageTop a img{
    width: 80px;
    height: 80px;
}

 

@media screen and (max-width: 750px) {
    
#pageTop a img{
    width: 60px;
    height: 60px;
}
}


/*＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝

FV

＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝*/

#main {
	width:100%;
	background:#c4c5c5;
	margin-top: 110px;
}

.pcfv {
	height:900px;
	background:url("../img/main_bg_large.jpg") no-repeat center top;
	position:relative;
}

h2{
	position:absolute;
	width: 620px;
	top:0%;
	right:0%;
	margin-top: 20px;
	margin-right: 20px;
}

h2 img{width: 100%;}

.lineup{
	position:absolute;
	width: 460px;
	bottom:0%;
	left:0%;
	margin-bottom: 20px;
	margin-left: 20px;
}

.lineup img{width: 100%;}

#shirokiri > a > img{
	position: fixed;
	z-index: 999;
	width: 60px;
	height: 178px;
	top:0%;
	left:0%;
	margin-top: 20px;
	margin-left: 30px;
}

@media screen and (max-width: 1600px) {
h2{width: 41%;}
}

@media screen and (max-width: 1400px) {
.lineup{width: 40%;}
}

@media screen and (max-width: 980px) {
.o750{display:none!important;}
.u750{display: block!important;}
.spfv img{
	width:100%;
}
	
h3 img{width: 100%;}
	
#shirokiri a img{
	width: 50px;
	margin-top: 20px;
	margin-left: 20px;
}
}

@media screen and (max-width: 750px) {
#main {margin-top: 73px;
}
}
	
/*＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝

ボトル

＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝*/

.bin{
	width: 100%;
	border-bottom: 1px solid #c9caca;
}

.bin_in{
	width: 1000px;
	overflow: hidden;
	margin: 0 auto;
	display: block;
}

.bin h3{
    margin-top: 200px;
    width: 580px;
    float: left;
    display: block;
}

.parallax-window {
		width: 400px;
	float: right;
     min-height: 800px;
	display: block;
	overflow: hidden;
	
     background: transparent;
}
 
.parallax-slider {
     top: 0;
     left: 0;
}

#bottle {
	width:100%;
	height:900px;
	position:relative;
	background:#fff;
	overflow:hidden;
}

.bottle_in{
	width:980px;
	height:900px;
	margin:0 auto;
	position:relative;
	background:#fff;
}

.bottle_h3 {
	position:absolute;
	top:228px;
	left:0px;
}

.product {
	position:absolute;
	top: 0px;
	right:-80px;
	z-index: 0;
}

@media screen and (max-width: 980px) {
	
.parallax-window {
	width: 350px;
	min-height: auto;
}
	
.bin_in{
	width: 100%;
}
	
.bin h3 {
	width: 50%;
	margin-top: 100px;
}
	
.bin img {
	width: 100%;
}	
	
#bottle {
    height: 250px;
    padding: 100px 0px;
}
	
.product {
	width: 50%;
	tio:-100px;
	right:0;
}	

.product img{
	width: 100%;
}
	
.bottle_h3 {
    position: static;
    width: 100%;
	z-index: 999;
	overflow: hidden;
}

.bottle_in {
    width: 100%;
	height: 450px;
}
	
.bottle_h3 h3 img{
    width: 100%;
	z-index: 1;
}
}

@media screen and (max-width: 750px) {
.parallax-window {width: 50%;
}
}


/*＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝

歴史

＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝*/
#label {
	width:1000px;
	padding-top: 150px;
	overflow: hidden;
	margin:0 auto;
	background:#fff;
}

#label > h3{
    width: 80%!important;
    display: block;
	overflow: hidden;
}

#label h3 img{
    width: 100%;
}

.center{
	width: 80%;
	float: left;
	overflow: hidden;
}

.center p{
	margin-bottom: 40px;
}

.left{
	width: 80%;
	float: left;
	overflow: hidden;
}

.left ul{
	list-style-type: none;
}

.left li{
	width: 25%;
	float: left;
}

.left > ul > li > div > img{
	width: 90%;
	margin: 0 auto;
	display: block;
}

.right{
	width: 20%;
	float: right;
	overflow: hidden;
}

.right p{
    margin: 10px 0px 0px 0px;
    color: #a58228;
    line-height: 1.2;
    letter-spacing: 1px;
    text-align: center;
    font-weight: normal;
    font-family: 'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','Meiryo UI','メイリオ','ＭＳ Ｐゴシック',sans-serif;
}

.right img{
	width: 100%;
}

.left ul li div{
	display: table-cell;
	width: 165px;
}

#label {
    width: 1000px;
	margin: 0 auto;
}

#labelHeader {
margin-top: 70px;
}

.arrow_r{
	display: table-cell!important;
}

.arrow_r img{
	display: table-cell;
    margin-bottom: 65px;
}

.labelCaption {
	margin:10px 0px 0px 0px;
	color: #a58228;
    line-height: 1.2;
    letter-spacing: 1px;
    text-align: center;
    font-weight: normal;
	font-family:'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','Meiryo UI','メイリオ','ＭＳ Ｐゴシック',sans-serif;
}

.material{
	width: 100%;
	float: left;
}

.material li{
	width: 100%;
	float: left;
}

.material p {
	color: #a58228;
	width:33%;
	text-align: center;
	margin:10px 0px 0px 0px;
	float:left;
	font-size:14px;
}

@media screen and (max-width: 980px) {
.label_in{
	width: 90%;
	margin: 0 auto;
}	

.arrow_r{
	transform: rotate( 90deg );
    display: block!important;
	overflow: hidden;
	    margin: 0 auto;
}

.arrow_r img{
	margin: 10px auto;
	display: block;
}
	
.center{
	width: 100%;
	margin: 0 auto;
}	
	
.left{
	width: 25%;
	overflow: hidden;
	margin-left: 15%;
}
	
.right{
	width: 35%;
	float: right;
	overflow: hidden;
	margin-right: 10%;
	bottom: 0;
}	

.left ul li div img{
	margin: 0 auto;
	display: block;
	width: 100%;
}
	
	
.left ul li:last-child >.arrow_r img{
	display: table-cell;
		transform: rotate( -90deg );
}	

.left li {
    width:100%;
    float:none;
}
	
.left ul li div {
    display: block;
    width: 100%;
}

.right img{
	width: 96%;
	display: block;
	margin: 0 auto;
}
	
#label {
    width: 100%;
    padding: 100px 0px;
	margin: 0 auto;
}
	
.material p {
	width:100%;
	text-align: center;
	margin:20px auto;
	float:none;
}
}

@media screen and (max-width: 750px) {
.left {
    width: 45%;
    overflow: hidden;
	margin-left: 0%;
}
	
.right {
    width: 50%;
    float: right;
    overflow: hidden;
	margin-right: 0%;
	padding-top: 70px;
}	
}

/*＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝

恵み

＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝*/
#ingred {
	width:1000px;
	padding: 100px 0px 0px;
	margin:0 auto;
	background:#fff;
}

#ingred p{
	margin-bottom: 50px;
}

#material{
overflow: hidden;
width: 100%;
}

#material ol{
	width: 100%;
	overflow: hidden;
	list-style-type: none;
}

#material li{
	width: 33.3%;
	float: left;
}

#material li img{
	width: 100%;
}

#material ol.under li{
	width: 50%;
}

#material p{
	margin: 10px auto 20px;
    font-size: 14px;
    color: #a58228;
    line-height: 1.2;
    letter-spacing: 1px;
    text-align: center;
}

.last_in p{
	font-size:14px;
	margin-bottom: 40px;
	color:#fff;
	line-height:2.2;
	letter-spacing:1px;
	font-family:'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','Meiryo UI','メイリオ','ＭＳ Ｐゴシック',sans-serif;
}

@media screen and (max-width: 980px) {
	
.last_in p {margin-bottom: 30px;}
	
#ingred {
    width: 100%;
	overflow: hidden;
	margin: 0 auto;
    padding: 0px 0px 40px;
}
	
#ingred p{
    width: 90%;
	margin: 0 auto;
}

#material li{
	width: 100%;
	float: none;
}
	
#material ol.under li{
	width: 100%;
	float: none;
}
}

/*＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝

チャート

＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝*/

#chartContainer {
	padding: 150px 0px;
	width:980px;
	margin:0 auto;
	background:#fff;
}

.chart_title {
    color: #a58228;
    text-align: center;
    display: block;
    padding: 25px 0;
    border-top: solid 1px #a58228;
    border-bottom: solid 1px #a58228;
    font-size: 26px;
    font-weight: 100;
    letter-spacing: 2px;
}

.chart_in p{
    margin-bottom: 40px;
}

.chart_in img{
    width: 100%;
}

@media screen and (max-width: 980px) {
.chart_title {
    font-size: 16px;
}
	
#chartContainer {
	height: auto;
    padding: 100px 0px;
    width: 100%;
    margin: 0 auto;
    background: #fff;
}
	
.chart_in p{
    margin-bottom: 30px;
}	

.chart_title {
    margin-bottom: 30px;
}
	
.chart_in {
    width: 90%;
    margin: 0 auto;
}
	
.chart_in img{
    width: 100%;
}
}

/*＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝

ゼロゼロ訴求

＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝*/

#zerozero{
	padding: 0px 0px 150px;
	width:980px;
	margin:0 auto;
	background:#fff;
}

#zerozero p{
	margin-bottom: 30px;
}

.upper{
	vertical-align: super;
	font-size: 10px;
}

.attention{
	font-size: 12px;
}

#zerozero .btn a {
	z-index: 999;
	width: 292px;
	margin: 0 auto;
	height: 0;
	padding: 62px 0 0 0;
	background: url("../img/zerozero_btn.png") left top no-repeat;
	display: block;
	overflow: hidden;
	top: 544px;
	left: 550px;
}

#zerozero a:hover {
    background-position: left bottom;
}

@media screen and (max-width: 980px) {
#zerozero{
	width: 90%;
	margin: 0 auto;
}

#zerozero p{
	margin-bottom: 30px;	
	}

#zerozero .btn a{
	width: auto;
	color: #a58228;
    height: auto;
	background: #fff;
	background-color: #fff;
	text-align: center;
	text-decoration: none;
	padding: 20px 0px 22px;
	border-top: #a58228 1px solid;
	border-bottom: #a58228 4px double;
	border-right: #a58228 4px double;
	border-left: #a58228 1px solid;
    border-radius: 8px;
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
	box-sizing: border-box;
}

#zerozero .btn a:hover{
	border-top: #a58228 1px solid;
	border-bottom: #a58228 1px solid;
	border-right: #a58228 1px solid;
	border-left: #a58228 1px solid;
	box-sizing: border-box;
	padding: 23px 0px 22px;
}
}
/*＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝

80年以上

＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝*/

#last {
	position: relative;
	width:100%;
	background:url("../img/last_bg.jpg") no-repeat center top;
	height:900px;
	background-color:#070608;
	overflow:hidden;
}

.last_in {
	width:980px;
	height:900px;
	margin:0 auto;
}

#last h3 img{
	width: 100%;
}

.last_in{
	position: absolute;
	left: 50%;
	margin-left: -30px;
	width: 540px;
	height: auto;
	margin-top: 150px;
	display: block;
	overflow: hidden;
}

.btn a {
	z-index: 999;
	width: 292px;
	margin: 0 auto;
	height: 0;
	padding: 62px 0 0 0;
	background: url(../img/last_btn.jpg) left top no-repeat;
	display: block;
	overflow: hidden;
	top: 544px;
	left: 550px;
}

.last_in a:hover {
    background-position: left bottom;
}

@media screen and (max-width: 980px) {
	
.last_in{
	position: static;
}

#last {
	position: static;
    width: 100%;
	padding: 100px 0;
    background: #ccc;
    height: auto;
}
	
.last_in{
	width: 90%;
	float: none;
	margin: 0 auto;
}

.last_in p{
	color: #000;
}
	
.last_in div {
    float: none;
    width: 100%;
}
		
#last .btn a{
	width: auto;
	color: #a58228;
    height: auto;
	background: #fff;
	background-color: #fff;
	text-align: center;
	text-decoration: none;
	padding: 20px 0px 22px;
	border-top: #a58228 1px solid;
	border-bottom: #a58228 4px double;
	border-right: #a58228 4px double;
	border-left: #a58228 1px solid;
    border-radius: 8px;
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
	box-sizing: border-box;
}
	
#last .btn a:hover{
	border-top: #a58228 1px solid;
	border-bottom: #a58228 1px solid;
	border-right: #a58228 1px solid;
	border-left: #a58228 1px solid;
	box-sizing: border-box;
	padding: 23px 0px 22px;

}
	
.bkime img{width: 100%;
}
}