/*==============================================
  common
==================================================*/
@media screen and (max-width: 767px) {
body{padding: 0px; width: 100%; min-width: 100%; overflow-x: hidden; word-wrap: break-word;}
.pc-none{display: block !important;}
.sp-none{display: none !important;}
img {width: 100%; margin: 0; padding: 0; vertical-align: bottom;}
/* =========================================================
	common
========================================================= */
.bg_brand{background: url("../img/brand_bg_sp.webp") no-repeat bottom center; position: relative; background-size: cover;}
.bg_logo{background: url("../img/logo_bg_sp.webp") no-repeat top center; position: relative; background-size: cover;}
.contents_inner{max-width: inherit; width: 90%; margin: 0 auto;}
.swiper1 .swiper-button-prev{display: none;}
.swiper1 .swiper-button-next{display: none;}
/* =========================================================
	donpaloma
========================================================= */
#donpaloma .contents_inner{padding: 18% 0 6%; max-width: inherit; margin-top: -26px; width: 92%;}
.paloma_con{display: block;}
.paloma_con .paloma_detail{width: 100%;}
.paloma_con .paloma_copy{padding:0 0 0;}

/* =========================================================
	about
========================================================= */
.about_con1{margin-top: 0;}
.about_con1 .contents_inner{padding: 15% 0 10%;}
.about_con1 .contents_inner .logo{width: 48%; margin: 0 auto 14%;}
.about_con1 .about_m_copy1{width: 100%; margin: 0 auto 8%;}
.about_con1 .about_copy1{font-size: 15px; text-align: center; letter-spacing: 0.5px; line-height: 1.8;}


.about_con2 .contents_inner{padding: 75% 0 15%; position: relative;}
.about_con2 .brand_m_copy1{width: 100%; margin: 0 0 6%;}
.about_con2 .brand_copy1{font-size: 15px; letter-spacing: 0.5px; line-height: 1.8;}
.about_con2 .sign{position: absolute; bottom: -1%; right: -5%; width: 48%;}

.about_con3 .contents_inner{padding: 12% 0 14%;}
.about_con3 .brand_point{padding: 10% 6%; display: block;}
.about_con3 .brand_point .point_pic{width: 100%;}
.about_con3 .brand_point h2{width: 100%; padding-bottom: 7%;}	
.about_con3 .brand_point .point_detail{width: 100%;}
.about_con3 .brand_point .point_detail p{font-size: 15px; letter-spacing: 0.5px; line-height: 1.8; padding-top: 6%;}
	
/* =========================================================
	product
========================================================= */
.donjulio{width: 100%; margin: -20% auto 2%; position: relative; padding-right: 0;}
.don_m_copy{width:70%; margin: 5% auto 6%;}
.don_copy{font-size: 15px; text-align: center; letter-spacing: 0.5px; line-height: 1.8;}
.don_att{font-size: 11px; text-align: center; padding-top: 4%;}

.don_aw{ padding: 18% 0 15%;}
.line_frame img{width: 6%;}
.line_frame::before,
.line_frame::after {
  background-color: #000;
  content: "";
  height: 1px; 
  width: 45%;
}
.line_frame::before {
  margin-right: 10px; /* 文字との余白 */
}
.line_frame::after {
  margin-left: 10px; /* 文字との余白 */
}
.drinks_aw{width: 92%; margin:10% auto 10%; display: block;}
.drinks_aw .aw_icon{width: 33%; margin: 0 auto 7%;}
.drinks_aw .aw_copy{width: 100%; line-height: 1.8; font-size: 15px; text-align: center;}


.lineup_area{padding: 3% 0 14%;}
.lineup_area h3{width: 53%; margin: 0 auto 10%;}
.lineup_area .swiper-slide{padding: 5% 0; border-radius: 8px; box-shadow: 2px 2px 5px 2px rgb(0 0 0 / 6%);}
.lineup_area .swiper-slide dt img{width:46%; margin: 0 auto; padding: 2% 0 1%;}
.lineup_area .swiper-slide .lineup_logo img{width: 44%; margin: 0 auto 5px;}
.lineup_area .swiper-slide .name{font-size: 13px;}
.lineup_area .swiper-slide .copy{font-size: 15px; padding: 5% 0 0; height: 185px; width: 88%;}
.swiper-button-prev::after,
.swiper-button-next::after {
  height: 49px;
  margin: auto;
  width: 26px !important;
}

#swiper2 .swiper-button-prev{left:2% !important;}
#swiper2 .swiper-button-next{right:2% !important;}
/* =========================================================
	CP
========================================================= */
#cp_area .contents_inner{padding: 0 0 4%; max-width: inherit; width: 100%;}
#cp_area .cp_ttl{width: 90%; margin: 4% auto 2%;}
#cp_area .cp_date{width: 82%; margin: 0 auto 6%;}

.line_area{padding: 6% 0; border-radius: 10px; width: 90%; margin: 0 auto;}
.line_area h3{width: 84%; margin: 0 auto 0;}
.line_area .line_arrow{width: 20%; margin: 0 auto 5%;}
.line_area .line_btn{width: 90%; margin: 0 auto 0;}
.cp_att{width: 90%; margin: 3% auto; font-size: 11px; line-height: 1.5; letter-spacing: 0;}

/*-----obo-----*/
#cp_obo{padding: 0; width: 90%; margin: 0 auto;}
#cp_obo .obo_att1{font-size: 14px; padding: 5px; margin: 8% auto 3%; letter-spacing: 0;}
#cp_obo .obo_att2{font-size: 12px; letter-spacing: 0;}

/* =========================================================
	map_cp
========================================================= */
#cp_map{width: 86%; padding:7% 3% 3%; margin: 10% auto 5%;}
.cp_s_ttl{width: 80%; margin: 0 auto 7%;}
	
.map_area{height: 84vw;}
.map_att{font-size: 11px;
        padding: 10px 0 15px;
        text-align: left;}

#shop_data {
    padding: 2.5% 2%;
       margin: 15px 0 0;
    border: 1px solid #999;
	font-size: 14px;
	line-height: 1.5;
}
#shop_data span{font-size: 15px; font-weight: 600;}	
.map_att p {padding: 0 0 0;}

.map_icon_descarea{padding: 3% 5%; margin-bottom: 5px;}
.icon_desc_list{display: flex;
        align-items: center;
        margin: 0 0;}
.icon_desc_list img{display: flex;
        width: 17%;
        margin-right: 7%;}
.map_icon_item{font-size: 13px;
        width: 70%;
        line-height: 1.3;}
/* =========================================================
	contact
========================================================= */
#contact{padding: 10% 0 10%;}
.hype_area{padding: 10% 0 8%;}
.hype_area .contents_inner{max-width: inherit; width: 100%;}
.hype_area .hype_box{display: block;}
.hype_area .hype_pic{width: 100%;}
.hype_area .hype_detail{width: 90%; margin: 5% auto}
.hype_area .hype_detail .copy1{font-size: 15px; line-height: 1.7; padding-bottom: 6%; letter-spacing: 0.6px;}
.hype_link{display:block;}
.hypebeast, .hypebae{
	margin: 0 auto 15px;
	display: block;
	width: 70%;
	padding: 8px 0;
	font-size: 15px;}
.hypebeast a{margin-right: 0;}
.contactcon{max-width: inherit; width: 90%; margin: 0 auto; padding: 12% 0 0;}
.contactcon h4{font-size: 16px; padding: 0 0 5px; letter-spacing: 1px;}	
.contact_title{font-size: 14px;}
/* =========================================================
		footer
========================================================= */
/* ---footer-----*/
footer {padding-bottom: 5px;}
.footer_bg {max-width: inherit; width: 90%; padding: 2% 0 8%;}	
footer .footer_inner{width: 100%; margin: 0 auto; padding: 6% 0 8%; display:block;}
footer .f_warning{width: 100%;}
footer .copyr{font-size: 12px; padding-top: 15px; text-align: center;}
	

.l-footer_notice{font-size: 12px; line-height: 1.4;}
	

.drinkiq_banner{padding: 4% 3% 5%; display: block; width: 94%; margin: 0 auto 5px; position: relative;}
.drinkiq_banner .d_logo{width: 30%; padding: 0 0 5px; margin: 0 auto;}
.drinkiq_banner .d_copy{width: 94%; font-size: 12px; line-height: 1.4;}
.drinkiq_banner .d_arrow{width: 3%; position: absolute; bottom: 38%; right: 3%;}
.drinkiq_att{font-size: 11px; text-align: left; padding: 5px 0; letter-spacing: 0;}	
/* ---footer_link-----*/
footer .footer_link{width: 100%; padding: 8% 0 0; display: block;}
footer .footer_link li{border-bottom: 1px dotted #666; padding-bottom: 10px; margin:0 0 10px;}
footer .footer_link li a{font-size: 14px; display: block; position: relative;}
footer .footer_link li a:after {
    content: '';
    width: 6px;
    height: 6px;
    transform: rotate(-45deg);
    position: absolute;
    right: 12px;
    top: calc(50% - 4px);
    border-right: 1px solid #999;
    border-bottom: 1px solid #999;
}

/* =========================================================
		top modal
========================================================= */

#ageModal .modal__contentsInner {
  display: block;
    position: absolute;
    left: 0;
    top: 48%;
	height: auto;
    width: 100%;
    padding: 0;
    transform: translateY(-50%);
    background: none;
    background-size: contain;
}
#ageModal .age__dewarsLogo {
  width: 50%;
    margin: 0 auto;
}
#ageModal .age__txt {
 margin-top: 8%;
    font-weight: 700;
    font-size: 12px;
    font-size: 3.6vw;
    letter-spacing: .04em;
    text-align: center;
}
#ageModal .age__txt span {
   display: block;
    margin-top: .3em;
    font-size: 20px;
    font-size: 6.4vw;
}
#ageModal .age__btns {
   width: 55%;
    margin: 8% auto 0;
	display: block;
}
#ageModal .age__btns > li {
      -webkit-transition: opacity .2s;
        -o-transition: opacity .2s;
        transition: opacity .2s; }
        #ageModal .age__btns > li:nth-of-type(1) {
          float: none; }
        #ageModal .age__btns > li:nth-of-type(2) {
          float: none;}
        #ageModal .age__btns > li:hover {
          opacity: .75; }
#ageModal .age__btns>li {
    width: 100%;
    margin: 0 0 7%;
}
.modal .copyr {width: 80%;}

/* =========================================================
		top age modal 2
========================================================= */
#ageModal .modal__contents2 .age__dewarsLogo {width: 43%;}
#ageModal .modal__contents2 .age__txt span {  font-size: 19px; font-size: 6.3vw; letter-spacing: 0;}
.modal__contents2 #birthday{padding: 3%;font-size: 17px;height: 30px; width: 76%;}
.modal__contents2 #submit_age{width: 33%; padding: 4% 0;}

	

	
/* =========================================================
	kiyaku regulation
========================================================= */
/* ---regulation----*/
.kiyaku_bg{
	    background: url(../img/bg1.jpg) center top repeat;
    background-size: auto;
	padding: 6% 0 6%;
}
.kiyaku_area{max-width: inherit; width: 80%; margin: 0 auto; padding: 10% 5% 8%; line-height: 1.6;}
.kiyaku_area .kiyaku_title1{
	font-size: 24px;
	margin-bottom: 20px;
}
.kiyaku_area .kiyaku_copy {
    font-size: 16px;
}

.kiyaku_area .kiyaku_title {
    margin: 9% 0 5px;
	font-size:18px;
}

.kiyaku_sub_title{margin: 15px 0 3px;}


.kiyaku_att_txt{font-size: 12px;}
.kiyaku_area li {
    font-size: 15px;
	padding-bottom: 3px;
}
.home_btn_r a{
	display: block;
    width: 60%;
    padding: 16px 0 16px;
    margin: 30px auto 15px;
    font-size: 15px;
}




@media (orientation: landscape){
.lineup_area .product_area1 li dd p, .lineup_area .product_area2 li dd p {font-size: 16px; line-height: 1.8;}
.map_cp_detail .sub_ttl {
        width: 65%;
        position: absolute;
        top: -70px;
        left: -4%;
    }
.oubo_products h4 {margin: -55px auto 10px;}
.cp_oubo_con2 .oubo_cocktail h4 {margin: -65px auto 10px;}
.oubo_cocktail dl dd h5 {font-size: 40px;}
.lineup_area h2 .lineup_ttl {font-size: 55px;}
	
#ageModal .modal__contents2 .age__dewarsLogo {width: 25%;}
#ageModal .modal__contents2 .age__txt {margin-top: 4%; font-size: 16px;}
#ageModal .modal__contents2 .age__txt span {  font-size: 24px;}
.modal__contents2 #birthday{padding: 2%; width: 56%;}
.modal__contents2 #submit_age{width: 23%; padding: 2% 0;}	
	
	
	
}
}