@charset "utf-8";

/* base&reset settings ----------------------------------------------------*/
@media screen and (min-width: 769px){
img{
max-width: 100%;
height: auto;
width /***/:auto;　
}

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

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:130px;
padding:30px 0 0 30px;
position: absolute;
z-index:0;
}

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

#first h1{
padding:155px 0 0 0;
font-size:2vw;
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:125px 0 100px 0;
width:90%;
margin:0 auto;
position: relative;
z-index:2;
}

.detail-copy{
font-size:1.3vw;
color:#FFF;
width:44%;
line-height: 2.4vw;
padding-bottom:10%;
}

.bottle{
width: 12%;
}

.bottle img{
width:auto;
}

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

.award{
width:44%;
padding-bottom:5%;
}

.award img{
width:40%;
}

#second{
background:#FFF;
}

#second .inner{
width:70%;
margin:0 auto;
padding:100px 0 0;
max-width:1080px;
}

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

.y1d28 img{
width:60%;
}

.y1d28 p{
font-size:2.4rem;
font-weight:bold;
line-height: 3.4rem;
padding-top:20px;
}

.down-arrow{
text-align: center;
padding:60px 0 100px 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:170px;
}

.frame{
width:70%;
margin:30px auto 0;
max-width:1080px;
}

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

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

.bland_detail{
font-size:2.2rem;
line-height: 3rem;
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:200px;
margin:30px auto 10px;
display: block;
padding:30px 40px;
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;
min-height:560px;
}

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

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

.item-photo{
width:30%;
}

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

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

.item-detail-inner{
width:70%;
min-width:700px;
}

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

.item-detail p{
font-size:1.75rem;
line-height: 2.4rem;
margin-top:20px;
}

.extra01{
padding-right:150px;
}

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

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

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

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

.single{
background-image: url("../image/single_award.png");
background-position:right;
background-repeat: no-repeat;
}


#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:70%;
margin: 0 auto;
max-width:1080px;
}

#fifth h1{
width:600px;
margin: 150px auto 0;
font-size:3.6rem;
letter-spacing: 1rem;
}

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

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

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

#sixth .inner{
width:80%;
margin:0 auto;
max-width:1080px;
}

.enjoy{
width:400px;
margin:0 auto;
margin-bottom:60px;
}

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

.flex5 div{
width:30%;
}

.flex5 h3{
font-size:2rem;
}

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

.flex5 img{
margin:20px 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:3rem;
line-height: 3rem;
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:60px 0 0 0;
font-size:2rem;
line-height: 3rem;
}

.flex6 {
display: -webkit-flex;
display: flex;
-webkit-justify-content: space-around;
justify-content: space-around;
width:700px;
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;
font-size:2.4rem;
}

.warning img{
width:960px;
}

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

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

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

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

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

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

.padr_30{
padding-right:40px;
}

.mat_60{
margin-top:90px;
}

.gold{
color:#b39c52;
}

.wid1080{
width:1080px;
}

.medal{
display: none;
}