/* =========================================================
		common
========================================================= */
body{font-family:"Lato", "Noto Sans Japanese", "ヒラギノ角ゴ Pro W3", "Yu Gothic Medium", "游ゴシック Medium", YuGothic, 游ゴシック体, メイリオ, sans-serif;font-size:16px;line-height:1.7; margin:0;padding:0;min-width:100%;letter-spacing:0.5px;overflow-x:hidden;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;position:relative; color: #040303; font-weight: 500; background-color: #fff;}
a{text-decoration: none; color: #040303;}
.pc-none{display:none;}
.sp-none{display:block;}
img{width:100%;} .clear{clear:both;} select::-ms-expand{display:none;}
button{background-color:transparent;border:none;cursor:pointer;outline:none;padding:0;appearance:none;}
/* =========================================================
	header
========================================================= */
.header_ttl{background: url("../img/header_bg.jpg") no-repeat center; background-size:cover;}
.header_ttl .logo{width:20%; max-width: 300px; margin: 0 auto; padding: 35px 0;}


/* =========================================================
	recipe
========================================================= */
.recipe_area{background: #fff9f4;}
.recipe_area .inner{max-width: 1100px; width: 92%; margin: 0 auto; padding: 65px 0 70px;}
.recipe_area .inner h2{width: 76%; margin: 0 auto 45px;}

.recipe_con{background: url("../img/re_bg.png") no-repeat center top; background-size: 100%; padding: 8% 0 10%;}
.recipe_con .highball_ttl{width: 52%; margin: 0 auto 4.5%;}


.recipe_detail{margin: 3% auto 0; padding: 4% 5% 3%; width: 75%; border: 3px dotted #5dc2d0; display: flex; background-color: #effafc;}
.recipe_detail .r_detail{width: 63%; margin-right: 0;}
.recipe_detail .r_detail .title{width: 41%; margin-bottom:4%;}
.recipe_detail .r_detail ul li{padding-bottom: 7px; font-size: 18px;}
.recipe_detail .r_detail ul dl{display: flex;}
.recipe_detail .r_pic{width: 37%;}

/* ===========movie======= */
.movie_area{ width: 91%; display: flex; justify-content: space-between; margin: 0 auto 0; padding-bottom: 3%;}
.movie_area .movie{width: 48.5%; position: relative;}
.movie_thumb a figure::before {
        content: '';
        position: absolute;
        left: 50%;
        top: 50%;
        z-index: 1;
        width: 80px;
        height: 0;
        padding-top: 140px;
        background: url(../img/play.svg) 50% 50% no-repeat;
        background-size: contain;
        transform: translate(-50%, -50%);
        pointer-events: none;
	opacity: 0.85;
    }

.movie_thumb a{display: block;
        position: relative;
        color: #200;}

.movie_thumb figure {
        position: relative;
        overflow: hidden;
	background: #000;
    }
.movie_thumb a:hover img {
        opacity: .9;
    }
.movie_thumb figure img {
        position: relative;
        transition: all .2s;
		cursor: pointer;	
    }
.mv_ttl{width: 94%; margin: 3.5% auto 0;}


/* =========================================================
	noma profile
========================================================= */
.profile_con{background: url("../img/noma_bg.jpg") no-repeat center; background-size:cover; padding: 80px 0 85px;}
.profile_con .prof_ttl{text-align: center; color: #fff; font-size: 38px; padding-bottom: 56px;}
.profile_con .inner{max-width: 980px; width: 94%; margin: 0 auto; display: flex; justify-content: space-between; flex-direction:row-reverse;}
.profile_con .prof_detail{width: 55%; color: #fff;}
.profile_con .prof_pic{width: 38%;}
.profile_con .prof_detail .name1{width: 60%; padding-bottom: 1.5%;}
.profile_con .prof_detail .name2{font-size:26px; padding-bottom: 3.2%;}
.profile_con .prof_detail p{font-size: 17px; font-weight: 500;}

/* =========================================================
		product
========================================================= */
.product_con{background: #fff9f4; padding: 65px 0 75px; position: relative;}
.product_con .inner{max-width: 840px; width: 94%; margin: 0 auto;}
.product_con .product_box{display: flex; justify-content: center;}

.product_box .product_pic{width: 36%; margin: 0 10% 0 0; text-align: center;}
.product_box .product_pic img{width: 61%; margin: 0 auto 0;}
.product_box .product_detail{width: 50%;}
.product_box .dew_logo{width:97%; padding: 45px 0 40px; margin: 0 auto;}
.product_box h2{font-size: 21px; padding-bottom: 10px;}
.product_box .dew_copy{font-size: 16px; line-height: 2; font-weight: 500; padding-bottom: 40px;}


.official_btn a{
	display: block;
    width: 80%;
    padding: 22px 0 22px 20px;
   margin: 0 auto;
    background-color: #5dc2d0;
    color: #fff;
    font-size: 18px;
    font-weight: 600;
    letter-spacing: 0;
    text-align: center;
    text-decoration: none;
    transition: 0.2s;
    position: relative;
    line-height: 1;
    border-radius: 5px;
box-shadow: 0 3px 5px rgba(0, 0, 0, 0.2);
}
.official_btn a:hover{
	opacity: 0.8;
}

.official_btn a:after {
    background: url(../img/arrow3.svg) no-repeat 50% / contain;
    content: "";
    display: block;
    height: 20px;
    position: absolute;
    left: 20px;
    top: 50%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    width: 20px;
	
}

.f_warning{max-width: 980px; width: 94%; margin: 30px auto; display: flex; align-items: center;}
.f_warning .stop_logo{width: 35px; margin-right: 18px;}
.f_warning p{font-size: 15px; line-height: 1.45;}






.totop {
 
   background: #5dc2d0;
    border-radius: 20px;
    width: 40px;
    height: 40px;
    display: inline-block;
    margin: 2%;
    z-index: 999;
    text-align: right;
    right: 0;
    bottom: 0;
    position: relative;
    opacity: 1;
    position: fixed;
    bottom: 30px;
    opacity: 0.8;
    display: none;
    z-index: 1;
    
}
.totop a {
 
      display: inline-block;
    position: relative;
    width: 41px;
    height: 40px;
}

.totop a::after {
    position: absolute;
    content: "";
    width: 13px;
    height: 13px;
    vertical-align: middle;
    border-top: 1px solid #fff;
    border-right: 1px solid #fff;
    -webkit-transform: rotate(315deg);
    transform: rotate(315deg);
    vertical-align: middle;
    right: 34%;
    top: 15px;
}
/* =========================================================
		top age modal
========================================================= */


button {
    width: 100%;
    padding: 0;
    background-color: transparent;
    border: none;
    font-family: inherit;
    cursor: pointer;
    outline: 0;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}


#wrap{
	display: none
	
	
}

.modal {
 display: block;
   
    	
	  background: #040303;
   
    position: fixed;
    text-align: center;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    z-index: 200000;
	  }
#ageModal .modal__bg {
    background: url(../img/body_bg2.jpg) 50% 0 no-repeat;
    background-size: cover;
}

.modal .modal__bg {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,.8);
}

.modal .modal__contents {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
}

#ageModal .modal__contentsInner {
    display: block;
    position: absolute;
    left: 50%;
    top: 50%;
    width: 650px;
    height: 561px;
    padding: 0;
    transform: translate(-50%,-50%);
    background: url(../img/age_cts-plate_pc.png) 50% 0 no-repeat;
    background-size: contain;
}

#ageModal .age__dewarsLogo {
    width: 48.4589%;
    margin: 18.83562% auto 0;
}


#ageModal .age__txt {
  margin-top: 6%;
    font-weight: 700;
    font-size: 16px;
    letter-spacing: .06em;
    text-align: center;
    line-height: 1.3;
}

#ageModal .age__txt span {
    display: block;
    margin-top: 15px;
    font-size: 27px;
 
}


#ageModal .age__btns {
    display: flex;
    margin-top: 7.84932%;
    justify-content: center;
}



      #ageModal .age__btns > li {
      
        -webkit-transition: opacity .2s;
        -o-transition: opacity .2s;
        transition: opacity .2s; }
        #ageModal .age__btns > li:nth-of-type(1) {
          float: left; }
        #ageModal .age__btns > li:nth-of-type(2) {
          float: right; }
        #ageModal .age__btns > li:hover {
          opacity: .75; }


#ageModal .age__btns>li {
    width: 34.58904%;
    margin: 0 .5137%;
}


button {
    width: 100%;
    padding: 0;
    background-color: transparent;
    border: none;
    font-family: inherit;
    cursor: pointer;
    outline: 0;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

.lock1{
	
	 position: fixed;
    width: 100%;
    
}
.modal .copyr{letter-spacing: 0; text-align: center; color: #fff;
 position: absolute;
	bottom:5%;
	left: 50%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
	width: 345px;
}


@media screen and (max-width: 1050px) {
.recipe_detail .r_detail ul li{padding-bottom: 5px; font-size: 16px;}
.profile_con .prof_detail p{font-size: 16px;}
}
@media screen and (max-width: 900px) {
.recipe_detail .r_detail ul li{padding-bottom: 4px; font-size: 14px;}
.recipe_detail .r_detail{width: 66%; margin-right: 0;}
.recipe_detail .r_pic{width: 33%;}

}