/* =========================================================
		common
========================================================= */
body{font-family:"Noto Sans JP", "ヒラギノ角ゴ Pro W3", "Yu Gothic Medium", "游ゴシック Medium", YuGothic, 游ゴシック体, メイリオ, sans-serif; font-size:16px;line-height:1.6; 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: #1b0000; font-feature-settings: 'palt' 1;}
a{text-decoration: none; color: #1b0000; transition: all .3s;}
.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;}
html {background-color: #fff;}
.flex_l{flex-direction: row-reverse;}
.en{font-family: "Alternate Gothic W01 No 2 V3"; font-weight: 500;}
.min{font-family: "Shippori Mincho", serif;}
/* =========================================================
	main kv
========================================================= */
.swiper1 .swiper-slide {
    opacity: .7;
    transition: .5s;
}
.swiper1 .swiper-slide-active {
    opacity: 1;
    z-index: 1;
}
.swiper-button-prev, .swiper-button-next{height: 55px !important;
  margin: auto;
  width: 28px !important;
	top: 45% !important;
}
.swiper-button-prev{left: 4% !important;}
.swiper-button-next{right:4% !important;}
/* 前へ次への矢印カスタマイズ */
.swiper-button-prev::after,
.swiper-button-next::after {
  background-repeat: no-repeat !important;
  background-size: contain !important;
  content: "" !important;
  height: 59px;
  margin: auto;
  width: 30px !important;
}
.swiper-button-prev::after {background: url("../img/prev_next.svg") no-repeat; background-size: 30px;}
/* 次への矢印カスタマイズ */
.swiper-button-next::after {background: url("../img/next_btn.svg") no-repeat; background-size: 30px;}

#swiper2 .swiper-button-prev::after {background: url("../img/prev_next_b.svg")}
#swiper2 .swiper-button-next::after {background: url("../img/next_btn_b.svg")}
#swiper2 .swiper-button-prev{left:5% !important;}
#swiper2 .swiper-button-next{right:5% !important;}

.swiper-pagination-bullet{background: #fff;}
.swiper-pagination{position: inherit !important; bottom: inherit !important;}
.swiper-pagination-bullet{background: #fff; opacity: 1;}
.swiper-pagination-bullet-active{background: #007aff;}
/* =========================================================
	common
========================================================= */
.bg_blue{background: url("../img/body_bg_blue.webp") no-repeat top center; position: relative; background-size: cover;}
.bg_wh{background: url("../img/body_bg.webp") no-repeat top center; background-size: cover;}
.bg_brand{background: url("../img/brand_bg.webp") no-repeat top center; position: relative; background-size: cover;}
.bg_logo{background: url("../img/logo_bg.webp") no-repeat top center; position: relative; background-size: cover;}
.contents_inner{max-width: 980px; width: 90%; margin: 0 auto;}

/* =========================================================
	donpaloma
========================================================= */
#donpaloma .contents_inner{padding: 5% 0 0; max-width: 960px; margin-top: -26px;}
.paloma_con{display: flex; justify-content: space-between;}
.paloma_con .paloma_pic{width: 17%;}
.paloma_con .paloma_detail{width: 81%;}
.paloma_con .paloma_copy{padding:2% 0 3%;}
.paloma_con .paloma_txt{font-size: 16px; font-weight: 500; letter-spacing: 0;}
.paloma_con .paloma_att{font-size: 11px; padding-top: 3%; text-align: right;}
.flex_l{display: flex; justify-content: right;}

@media screen and (max-width: 980px) {
.paloma_con .paloma_txt{font-size: 14px;}
}
/* =========================================================
	about
========================================================= */
.about_con1{margin-top: -50px; position: relative;}
.about_con1 .contents_inner{padding: 8% 0 6%;}
.about_con1 .contents_inner .logo{width: 26%; margin: 0 auto 8.5%;}
.about_con1 .about_m_copy1{width: 62%; margin: 0 auto 4%;}
.about_con1 .about_copy1{font-size: 16px; text-align: center; letter-spacing: 1.5px; line-height: 1.8;}


.about_con2 .contents_inner{padding: 16% 0 8%; position: relative;}
.about_con2 .brand_m_copy1{width: 48%; margin: 0 0 3%;}
.about_con2 .brand_copy1{font-size: 16px; text-align:left; letter-spacing: 1.5px; line-height: 1.8; color: #fff;}
.about_con2 .sign{position: absolute; bottom: -1.5%; right: 6%; width: 220px;}

.about_con3 .contents_inner{padding: 6% 0 6%; position: relative; max-width: 960px;}
.about_con3 .brand_point{background: rgba(255, 255, 255, 0.8); padding: 45px; display: flex; justify-content: space-between; align-items: center;}
.about_con3 .brand_point .point_pic{width: 29%;}
.about_con3 .brand_point .point_detail{width: 67%;}
.about_con3 .brand_point .point_detail h2{padding-bottom: 4.5%; width: 87%;}
.about_con3 .brand_point .point_detail p{font-size: 16px; text-align:left; letter-spacing: 1.5px; line-height: 1.85; }
/* =========================================================
	product
========================================================= */
.donjulio{width: 630px; margin: -9% auto 2%; position: relative; padding-right: 3%;}
.don_m_copy{width:35%; margin: 0% auto 4%;}
.don_copy{font-size: 16px; text-align: center; letter-spacing: 1.5px; line-height: 1.8;}
.don_att{font-size: 11px; text-align: center; padding-top: 2%;}
.side_left{width: 0.6%; left: 1%; bottom: -45%; position: absolute;}
.side_right{width: 0.7%; right: 1%; bottom: -45%; position: absolute;}
.don_aw{margin: 0 auto; padding: 6% 0;}
.line_frame{align-items: center;
  display: flex;
  justify-content: center;
text-align: center;}
.line_frame img{width: 30px;}
.line_frame::before,
.line_frame::after {
  background-color: #000;
  content: "";
  height: 1px; 
  width: 45%;
}
.line_frame::before {
  margin-right: 13px; /* 文字との余白 */
}
.line_frame::after {
  margin-left: 13px; /* 文字との余白 */
}
.drinks_aw{width: 76%; margin: 3% auto; align-items: center; display: flex; justify-content: space-between;}
.drinks_aw .aw_icon{width: 17%;}
.drinks_aw .aw_copy{width: 78%; line-height: 1.9; font-size: 16px;}

/*#swiper2{position: relative;
  overflow: hidden;
  width: 100%;}*/
.lineup_area{margin: 0 auto; padding: 5% 0 8%;}
.lineup_area h3{width: 230px; margin: 0 auto 5%;}
.lineup_area .swiper-slide{background: url("../img/lineup_bg.webp") no-repeat center center; background-size: cover; text-align: center; padding: 20px 0; border-radius: 10px; box-shadow: 3px 3px 7px 3px rgb(0 0 0 / 7%);　box-sizing: border-box; display: flex;
  justify-content: center;
  align-items: center; margin: 0 auto;}
.lineup_area .swiper-slide dt img{width: 44%; margin: 0 auto; padding: 2% 0 1.5%;}
.lineup_area .swiper-slide .lineup_logo img{width: 46%; margin: 0 auto 3px;}
.lineup_area .swiper-slide .name{font-size: 12px;}
.lineup_area .swiper-slide .copy{font-size: 15px; text-align: left; padding: 6% 0 2%; height: 185px; width: 88%; margin: 0 auto;}

@media screen and (max-width: 980px) {
.lineup_area .swiper-slide .copy {font-size: 14px;}	
.lineup_area .swiper-slide dt img {width: 42%;}	
}
/* =========================================================
	CP
========================================================= */
#cp_area .contents_inner{padding: 5% 0 8%; max-width: 940px;}
#cp_area .cp_ttl{width: 80%; margin: 3% auto 3%;}
#cp_area .cp_date{width: 58%; margin: 0 auto 3%;}

.line_area{background: rgba(255, 255, 255, 0.85); padding: 4%; border-radius: 15px;}
.line_area h3{width: 65%; margin: 0 auto 1%;}
.line_area .line_arrow{width: 8%; margin: 0 auto 2%;}
.line_area .line_btn{width: 59%; margin: 0 auto 0;}
.line_area .line_btn a{transition: all .3s; display: block;}
.line_area .line_btn a:hover{transform: scale(1.03,1.03); opacity: 0.9;}
.cp_att{width: 90%; margin: 3% auto; font-size: 13px;}
#cp_obo{padding: 0 0 20px; width: 90%; margin: 0 auto;}
#cp_obo .obo_att1{background: #f3626b; padding: 5px 0; margin: 25px auto 10px; text-align: center; color: #fff; font-weight: 600;}
#cp_obo .obo_att2{font-size: 14px; text-align: center;}


/* =========================================================
	map_cp
========================================================= */
#cp_map{background: #fff; padding:7% 4% 5%; margin-top: 50px;}
.cp_s_ttl{width: 46%; margin: 0 auto 4%;}
.map_area{background: #ccc; height: 470px;}
.map_att{font-size: 11px; text-align: right; padding: 18px 0 0;}
.map_att p{padding: 0 0 3px;}
#shop_data {background-color: #fff;
    margin-bottom: 0;
    padding: 1.5% 2%;
    text-align: center;
       margin: 15px 0 0;
    border: 1px solid #999;
	letter-spacing: 0;
}
#shop_data span{font-size: 1.15em; font-weight: 600; letter-spacing: 0;}


.map_icon_descarea{display: flex; justify-content: center; background: #f3f3f3; padding: 10px 0; margin-bottom: 10px;}
.icon_desc_list{display: flex; align-items: center; margin: 0 25px;}
.icon_desc_list img{display: flex; width: 26px; margin-right: 10px;}
.map_icon_item{font-size: 15px;}

/* =========================================================
	contact
========================================================= */
#contact{padding: 7% 0 5%;}
.hype_area{background: #fff; border-top: 1px solid #000; border-bottom: 1px solid #000; padding: 3% 0;}
.hype_area .contents_inner{max-width: 920px;}
.hype_area .hype_box{display: flex; justify-content: space-between; align-items: center;}
.hype_area .hype_pic{width: 25%;}
.hype_area .hype_detail{width: 69%;}
.hype_area .hype_detail .copy1{font-size: 17px; line-height: 1.8; padding-bottom: 35px; letter-spacing: 1px;}
.hype_link{display: flex; gap:20px; }
.hypebeast, .hypebae{
	border: 2px solid #000;
	display: block;
	width: 100%;
	padding: 10px 0;
	font-size: 16px;
	font-weight: 500;
text-align: center;
letter-spacing: 0;
transition: all .3s;}
.hypebeast:hover, .hypebae:hover{color: #fff; background: #000;}
.contactcon{max-width: 920px; width: 90%; margin: 0 auto; padding: 5% 0 0;}
.contactcon h4{font-size: 17px; padding: 0 0 8px; letter-spacing: 1px;}
.contactcon .contact_title{font-size: 15px;}
/* =========================================================
		footer
========================================================= */
footer{background: url("../img/f_bg.webp") no-repeat top center; position: relative; background-size: cover; padding-bottom: 65px;}
.footer_bg{max-width: 920px; width: 90%; margin: 0 auto;}
/* ---footer-----*/
footer a{color: #000;}
footer .footer_inner{margin: 0 auto; padding: 20px 0 30px; display: flex; justify-content: space-between; color: #fff;}
/* ---footer_link-----*/
footer .footer_link{padding: 35px 0 0; display:flex; flex-wrap:wrap; justify-content: left; color: #fff;}
footer .footer_link li{margin:0 25px 0 0;}
footer .footer_link li a{color: #000; font-size: 15px; text-decoration: none; transition: 0.2s; letter-spacing: 0;}
footer .footer_link li a:hover{opacity: 0.8; text-decoration: underline;}
.l-footer_notice{font-size: 14px; line-height: 1.5; color: #000;}
footer .copyr{font-size: 13px; letter-spacing: 0px; color: #000}

.drinkiq_link{display: block;}
.drinkiq_banner{background: #fff; padding: 15px 10px; display: flex; align-items: center; justify-content: space-around; margin: 20px auto 0; box-shadow: 0 2px 4px 2px rgb(0 0 0 / 5%); border-radius: 5px;}
.drinkiq_banner .d_logo{width: 16%; padding: 0 1%;}
.drinkiq_banner .d_copy{width: 72%; font-size: 14px; line-height: 1.4; letter-spacing: 0;}
.drinkiq_banner .d_copy a{color: #2414a7;}
.drinkiq_banner .d_copy a:hover{text-decoration: underline;}
.drinkiq_banner .d_arrow{width: 2%;}
.drinkiq_att{font-size: 12px; text-align: right; padding: 5px;}

.totop {
 
   background: #006bb7;
    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: #f8f1e1;
    position: fixed;
    text-align: center;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    z-index: 200000;
	  }
#ageModal .modal__bg {
 background:#1b0000;
	flex-direction: column;
align-items: center;
position: fixed;
	display: flex;

}

.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%;
    padding: 0;
    transform: translate(-50%,-50%);
    background-size: contain;
 
}

#ageModal .age__dewarsLogo {
    width: 210px;
    margin: 0 auto 0;
}


#ageModal .age__txt {
  margin-top: 30px;
    font-weight: 400;
    font-size: 16px;
    letter-spacing: 0.6px;
    text-align: center;
    line-height: 1.3;
	color: #fff
}

#ageModal .age__txt span {
    display: block;
    margin-top: 14px;
    font-size:28px;
 font-weight: 500;
}


#ageModal .age__btns {
    display: flex;
    margin-top: 30px;
    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: 45%;
    margin: 0 2%;
}

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%;}
.age__btns button{
	    border: 2px solid #fff;
    padding: 12px 0;
	    width: 100%;
    font-size: 15px;
    font-weight: 600;
	color: #fff;
}
.age__btns button:hover{
  background: #fff;
	color: #1b0000;
	opacity: 1;
}
.modal .copyr{letter-spacing: 0; font-size: 12px; text-align: center; color: #fff;
 position: absolute;
	bottom:5%;
	left: 50%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
	width: 90%;
}
/* =========================================================
		top age modal 2
========================================================= */
#ageModal .modal__contents2 .age__dewarsLogo {width: 190px;}
#ageModal .modal__contents2 .age__txt span {margin: 10px 0 15px; font-size: 28px;}
.modal__contents2 #birthday{
	    padding: 10px;
    border: solid 1px #333;
    font-size: 17px;
    line-height: 1.68;
    background-color: #fff;
    height: 30px;
	width: 265px;
	margin: 5px auto 17px;
	text-align: center;
}
.modal__contents2 #submit_age{
	display: block;
    width: 120px;
    padding: 15px 0 15px;
    margin: 0 auto 0;
    background-color: #f5d476;
    color: #1b0000;
    font-size: 16px;
    font-weight: 600;
    letter-spacing: 0.5px;
    text-align: center;
    text-decoration: none;
    transition: 0.2s;
    position: relative;
    line-height: 1;
    border-radius: 3em;
}
.modal__contents2 #submit_age:disabled{background-color: #555; color: #222; cursor: inherit;}



/* =========================================================
	kiyaku regulation
========================================================= */
/* ---regulation----*/
.kiyaku_bg{
	    background: url(../img/bg2.jpg) center top no-repeat;
    background-size: cover;
	padding: 4% 0;
}
.kiyaku_area{background: rgba(255, 255, 255, 0.9); max-width: 900px; width: 80%; margin: 0 auto; padding: 6% 5% 6%; line-height: 1.7;}
.kiyaku_area .kiyaku_title1{
	font-size: 28px;
	margin-bottom: 22px;
	font-weight: 600;
}
.kiyaku_area .kiyaku_copy {
    font-size: 16px;
}

.kiyaku_area .kiyaku_title {
    margin: 3.5% 0 5px;
	font-size: 20px;
}

.kiyaku_sub_title{margin: 15px 0 3px;}
.nopmargin{margin-top: 0;}


.kiyaku_area li {
    padding-left: 1em;
    text-indent: -1em;
}
.kiyaku_att_txt{font-size: 13px;}
.kiyaku_area li {
    font-size: 15px;
	padding-bottom: 5px;
}
.home_btn_r a{
	display: block;
    width: 240px;
    padding: 19px 0 19px;
    margin: 30px auto 15px;
    background-color: #1b0000;
    border: 2px solid #1b0000;
    color: #fff;
    font-size: 16px;
    font-weight: 600;
    letter-spacing: 0.5px;
    text-align: center;
    text-decoration: none;
    transition: 0.2s;
    position: relative;
    line-height: 1;
    border-radius: 3em;
}
.home_btn_r a:hover{
    background-color: #fff;
    border: 2px solid #1b0000;
    color: #1b0000;
   
}