@charset "utf-8";

/* base&reset settings ----------------------------------------------------*/

@media screen and (max-width:640px){
img{
max-width: 100%;
height: auto;
width /***/:auto;　
}

html,
body{
	width:100%;
	height:100%;
}

img{
	max-width: 100%;
	height: auto;
	width /***/:auto;　
}

html{
	margin:0px;
	padding: 0px;
font-size: 62.5%;
font-family: "ヒラギノ角ゴ ProN W3","Hiragino Kaku Gothic ProN", Verdana, "游ゴシック", YuGothic, "メイリオ", Meiryo, sans-serif;
color: #333333;
line-height:18px;
background:#fffff;
}


body,p,div,ul,li,h1,h2,h3,h4,dl,dt,dd{
	padding:0;
	margin:0;
}

li{
list-style:none;
}

a{
color:#2EA6DF;
}

a:hover{
color:#369;
}

.mincho{
font-family: '游明朝';
}

/*content
----------------------------------------------------*/

#first{
position:relative;
background-image: url("../image/yellowback.jpg");
background-position:bottom;
background-size: cover;
background-repeat: no-repeat;
}

#first .inner{
text-align: center;
}

.top-logo{
width:70px;
padding:30px 0 0 0;
position: relative;
z-index:0;
margin:0 auto;
}

.top-catch{
position: absolute;
width:85%;
top:200px;
left:0;
right:0;
margin:0 auto;
z-index:0;
padding-left:7.5%;
}

#first h1{
padding:40px 0 0 0;
font-size:5vw;
letter-spacing: 7.5px;
position: relative;
z-index:1;
}

.flex3 {
display: -webkit-block;
display: block;
-webkit-justify-content: space-around;
justify-content: space-around;
-webkit-align-items: flex-end;
align-items: flex-end;
padding:30px 0 110px 0;
width:90%;
margin:0 auto;
position: relative;
z-index:2;
}

.detail-copy{
font-size:3.4vw;
color:#FFF;
width:100%;
line-height: 5.6vw;
padding-bottom:8%;
position:absolute;
bottom:0;
font-weight:bold;
}

.bottle{
width: 100%;
}

.bottle img{
width:auto;
height:400px;
}

.bottle p{
text-align: center;
padding:10px 0 0;
font-size:1.4rem;
}

.award{
width:40%;
position:absolute;
top:250px;
left:65%;
}

.award img{
width:70%;
}

#second{
background:#FFF;
}

#second .inner{
width:90%;
margin:0 auto;
padding:80px 0 0;
}

.flex2 {
display: -webkit-block;
display: block;
-webkit-align-items: flex-end;
align-items: flex-end;
width:90%;
margin:0 auto;
}

.d28_365{
width:50%;
margin:0 auto 20px;
}

.y1d28{
width: 70%;
padding:0;margin:0 auto;
}

.y1d28 img{
width:100%;
}

.y1d28 p{
font-size:3vw;
font-weight:bold;
line-height: 4vw;
padding-top:10px;
}

.down-arrow{
text-align: center;
padding:20px 0 40px 0;
}

.down-arrow img{
width:10%;
}

#third{
position:relative;
background-color:#333;
padding:60px 0 40px 0 ;
}

#third .inner{
padding:0 0 10px 0;
}

.sunmai-gold{
text-align:center;
}

.sunmai-gold img{
width:100px;
}

.frame{
width:90%;
margin:30px auto 0;
}

.frame .upper,
.frame .lower{
width:100%;
line-height: 0;
}

.frame .content{
background-color:#b39c52;
padding:0 5%;
}

.content_inner{
background:#FFF;
padding:0 0 40px;
}

.bland_detail{
font-size:2.7vw;
line-height: 3.2vw;
font-weight:bold;
text-align: center;
padding:30px 0;
width:90%;
margin:0 auto;
}

.youtube-wapper{
width:90%;
margin:0 auto;
}

.youtube {
  position: relative;
  width: 100%;
  padding-top: 56.25%;
}

.youtube iframe {
  position: absolute;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
}

.official{
width:120px;
margin:30px auto 10px;
display: block;
padding:20px 30px;
background:#333;
}

.link{
text-align: center;
font-size:1.2rem;
font-weight: bold;
}

#fourth{
background-image: url("../image/forth_upper.png");
background-position: top;
background-repeat: no-repeat;
background-size:contain;
padding:60px 0 0 0;
position:relative;
z-index:99;
}

#fourth .inner{
padding:0 0 0 0;
}

#item{
position: relative;
}

#item .flex2{
position: relative;
z-index:1;
display: block!important;
}

.itembg{
position:absolute;
z-index:0;
overflow: hidden;
padding-top:80px;
}

.item-photo{
width:100%;
text-align: center!important;
margin:0 0 20px;
}

.item-photo img{
height:270px;
}

.item-detail{
width:100%;
font-weight:bold;
}

.item-detail-inner{
width:100%;
}

.item-detail h2{
font-size:5vw;
}

.item-detail p{
font-size:2.8vw;
line-height: 3.8vw;
margin-top:10px;
}

.extra01{
padding-right:0;
}

.flex4 {
display: -webkit-block;
display: block;
-webkit-justify-content: space-around;
justify-content: space-around;
padding-top:20px;
}

.rank{
width:100%;
font-size:2.5vw;
line-height: 4vw;
}

.twtag{
width: 100%;
padding:10px 0 0 0;
font-size:2.5vw;
line-height: 4vw;
}

.twtag span{
background:#b39c52;
color:#FFF;
font-size:2.5vw;
padding:5px 10px;
font-weight:normal;
}

.twtag a{
color:#FFF;
text-decoration: none;
}

.itembgex{
background-image: url("../image/item04bg.png");
background-position:bottom;
background-repeat: no-repeat;
background-size:100%;
padding-bottom:20%;
}

.triple{
background-image:none;
}

.single{
background-image: none;
}

.medal{
position: absolute;
display:block;
z-index:1;
width:16%;
right:20px;
}


#fifth{
background-image: url("../image/honeycomb.png");
background-position:top;
background-repeat: no-repeat;
background-size: cover;
position:relative;
z-index:88;
margin-top:-12%;
padding-top:12%;
text-align: center;
}

#fifth .inner{
width:90%;
margin: 0 auto;
}

#fifth h1{
width:300px;
margin: 80px auto 0;
font-size:2rem;
letter-spacing: 0.4rem;
}

.foods{
padding:30px 0;
width:300px;
margin:0 auto;
}

.foods-copy{
font-size:2.8vw;
line-height: 4vw;
font-weight:bold;
padding-bottom:60px;
}

#sixth{
padding:40px 0 0;
text-align: center;
background: #f6b735;
color:#fff;
}

#sixth .inner{
width:100%;
margin:0 auto;
}

.enjoy{
width:280px;
margin:0 auto;
margin-bottom:30px;
}

.flex5 {
display: -webkit-block;
display: block;
-webkit-justify-content: space-around;
justify-content: space-around;
}

.flex5 div{
width:70%;
margin:0 auto;
}

.flex5 h3{
font-size:3.4vw;
}

.flex5 p{
font-size:2.6vw;
padding-bottom:40px;
}

.flex5 img{
margin:10px 0;
}

footer{
background: #333;
}

footer .inner{
margin:0 auto;
padding:60px 0 0;
text-align: center;
width:90%;
}

footer h4{
border:1px solid #b39c52;
color:#b39c52;
padding:20px 30px;
font-size:1.4rem;
line-height: 1.4rem;
display: inline-block;
margin:0 auto;
}

footer h3{
background:#b39c52;
color:#333;
font-size:1.6rem;
padding:5px 10px;
display: inline-block;
font-weight:normal;
margin:60px 0 0 0;
}

.place{
color:#b39c52;
text-align: center;
margin:40px 0 0 0;
font-size:1.2rem;
line-height: 2rem;
}

.flex6 {
display: -webkit-block;
display: block;
-webkit-justify-content: space-around;
justify-content: space-around;
width:100%;
margin:0 auto 0;
}

.flex6 div{
width:70%;
margin:0 auto;
}

.flex6 img{
border:2px solid #b39c52;
margin-top:30px;
}

.flex6 .instagram img{
border:none;
}

.online{
color:#b39c52;
text-align: center;
}

.online h2{
margin:10px 0;
font-size:1.6rem;
}

.real{
color:#b39c52;
font-size:1.4rem;
line-height: 2rem;
text-align: left;
}

.real h2{
margin:10px 0;
font-size:1.6rem;
}

.real a{
color:#FFF;
text-decoration: none;
}

.credit{
font-size:small;
text-align:center;
padding: 25px 0;
color:#FFF;
}

.warning{
background:#FFF;
text-align: center;
padding:20px 0;
font-size:2.4rem;
}

.warning img{
width:90%;
}

.arrow{
position:fixed;
bottom:5%;
left:3%;
width:40px;
height:40px;
z-index:9999;
}

#buy-link{
position:fixed;
bottom:5%;
right:3%;
width:80px;
height:77px;
z-index:9999;
}

#buy-link{
animation-iteration-count: infinite;
}

/* button
----------------------------------------------------*/

/* spview
----------------------------------------------------*/

.pcview{
display:none!important;
}

.spview{
display:block!important;
}

.tabview{
display:none!important;
}

/* clear
----------------------------------------------------*/
/* ---IE7.IE8 clearfix--- */
.clearfix:after { content: ".";display: block;clear: both;height: 0;visibility: hidden; }
.clearfix { display: inline-block; }
/* Hides from IE-mac \*/
* html .clearfix { height: 1%; }
.clearfix { display: block; }
/* End hide from IE-mac */

/*画像透過*/
.alpha a:hover img {
  opacity: 0.6;
  filter: alpha(opacity=60);
  -ms-filter: "alpha(opacity=60)";
}

.alpha img {
	-webkit-transition: 0.3s ease-in-out;
	   -moz-transition: 0.3s ease-in-out;
	     -o-transition: 0.3s ease-in-out;
	        transition: 0.3s ease-in-out;
}

.clear{
	clear:both;
}

/* decoration and adjust
----------------------------------------------------*/
.title-border-right {
display: flex;
align-items: center;
margin-bottom: 10px;
}
.title-border-right:after {
border-top: 1px solid;
content: "";
flex-grow: 1;
}
.title-border-right:after {
margin-left: 1rem;
}

.rev {
flex-flow: row-reverse;
}

.left{
text-align: left;
}

.right{
text-align: right;
}

.mright{
margin:0 0 0 auto;
}

.padl_30{
padding-left:0px;
}

.padr_30{
padding-right:0px;
}

.mat_60{
margin-top:90px;
}

.gold{
color:#b39c52;
}