@charset "utf-8";

/* base&reset settings ----------------------------------------------------*/
@media screen and (max-width: 768px){
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 30px;
position: absolute;
z-index:0;
}

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

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

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

.detail-copy{
font-size:2vw;
color:#FFF;
width:37%;
line-height: 3vw;
padding-bottom:17%;
}

.bottle{
width: 26%;
}

.bottle img{
width:auto;
}

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

.award{
width:37%;
padding-bottom:15%;
}

.award img{
width:70%;
}

#second{
background:#FFF;
}

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

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

.d28_365{
width:20%;
}

.y1d28{
width: 80%;
padding:0 0 0 20px;
}

.y1d28 img{
width:60%;
}

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

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

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

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

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

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

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

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

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

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

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

.youtube-wapper{
width:75%;
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:150px;
margin:30px auto 10px;
display: block;
padding:20px 30px;
background:#333;
}

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

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

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

#item{
position: relative;
}

#item .flex2{
position: relative;
z-index:1;
}

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

.item-photo{
width:30%;
}

.item-photo img{
/*height:650px;*/
}

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

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

.item-detail h2{
font-size:1.4rem;
}

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

.extra01{
padding-right:150px;
}

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

.rank{
width:35%;
font-size:1.6vw;
line-height: 2vw;
}

.twtag{
width: 65%;
padding-left:5%;
font-size:1.6vw;
line-height: 2vw;
}

.twtag span{
background:#b39c52;
color:#FFF;
font-size:1vw;
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:15%;
}

.triple{
background-image: url("../image/triple_award.png");
background-position:right;
background-repeat: no-repeat;
background-size:auto;
min-height:130px;
}

.single{
background-image: url("../image/single_award.png");
background-position:right;
background-repeat: no-repeat;
background-size:auto;
min-height:130px;
}


#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:500px;
margin: 150px auto 0;
font-size:3rem;
letter-spacing: 1rem;
}

.foods{
padding:60px 0;
width:400px;
margin:0 auto;
}

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

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

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

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

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

.flex5 div{
width:30%;
}

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

.flex5 p{
font-size:1.4vw;
}

.flex5 img{
margin:10px 0;
}

footer{
background: #333;
}

footer .inner{
margin:0 auto;
padding:100px 0 0;
text-align: center;
}

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

footer h3{
background:#b39c52;
color:#333;
font-size:2rem;
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.4rem;
line-height: 2rem;
}

.flex6 {
display: -webkit-flex;
display: flex;
-webkit-justify-content: space-around;
justify-content: space-around;
width:640px;
margin:30px auto 0;
}

.flex6 div{
width:45%;
}

.flex6 img{
border:2px solid #b39c52;
}

.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 20px 0;
font-size:2.4rem;
}

.warning img{
width:700px;
}

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

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

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

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

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

.pcview{
display:none!important;
}

.tabview{
display:block!important;
}

.spview{
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:40px;
}

.padr_30{
padding-right:40px;
}

.mat_60{
margin-top:90px;
}

.gold{
color:#b39c52;
}

.medal{
display: none;
}