@charset "utf-8";
/* CSS Document */
/* ▽ SP ▽================================================================================================================================== */
/*====================
base
====================*/
.l-container{
line-height: 2;
}
#content_wrap{
font-size: 3.2vw;
background: url("/products/brand/cola-up/another/images/base_dot_pink.png"), #fffefc;
background-position: top center, center center;
background-repeat: repeat, repeat;
background-size: 2.6vw, auto;
}

/*====================
ローディング画面
====================*/
#loading{
width: 100%;
height: 100%;
position: fixed;
top: 0;
left: 0;
z-index: 9999;
background: url("/products/brand/cola-up/another/images/base_dot_pink.png"), #fffefc;
background-position: top center, center center;
background-repeat: repeat, repeat;
background-size: 2.6vw, auto;
}

/*====================
メインビジュアル
====================*/
#mv{
background: url("/products/brand/cola-up/another/images/base_another_sp.png");
background-position: top center;
background-repeat: no-repeat;
background-size: cover;
position: relative;
padding: 6.1vw 0 10.4vw;
}
h1{
margin: 0 11vw 6.3vw 15.3vw;
}
#mv .kyun{
width: 20.861vw;
position: absolute;
top: 3.1vw;
left: 5.4vw;
}
#mv .catch{
width: 71.448vw;
margin: 0 auto;
}

/*====================
商品紹介
====================*/
#products{
padding: 11.8vw 0 19.6vw;
position: relative;
}
#products .inner{
padding: 0 9vw;
}
#products h3{
margin: 0 auto 7.8vw;
}
#products .products_item{
margin-bottom: 14.3vw;
}
#products .pkg_box{
position: relative;
}
#products .pkg{
position: relative;
width: 47.197vw;
margin: 0 auto;
}
#products .pkg img{
position: relative;
z-index: 30;
}
#products .pkg:before{
content: "";
position: absolute;
top: 4.7vw;
left: -15.7vw;
width: 71.317vw;
height: 71.317vw;
background: url(/products/brand/cola-up/another/images/deco_dot.png) no-repeat top center / 100% auto;
z-index: 5;
}
#products .szl img{
position: absolute;
bottom: -23px;
right: -582px;
width: 152px;
z-index: 35;
}
#products .ttl img{
height: 8.3444vw;
margin: 7.9vw 0 4.2vw;
}
#products .catch img{
height: 14.472vw;
margin-bottom: 3.5vw;
}
/*キャッチコピーが一行しかない場合*/
#products .catch_oneline img{
height: 5vw;
}
#products .level{
position: relative;
width: 61.539vw;
margin: 3.7vw auto 0;
}
#products .level img{
position: relative;
z-index: 30;
}
#products .level:before{
content: "";
position: absolute;
top: -6.6vw;
left: 12vw;
width: 52.2vw;
height: 52.2vw;
background: url(/products/brand/cola-up/another/images/deco_dot.png) no-repeat top center / 100% auto;
z-index: 5;
}

/*====================
SNSボタン、バナー
====================*/
#another_footer {
padding: 7.9vw 0 9.1vw;
background: #f9e1e9;
position: relative;
}
#another_footer:before{
content: "";
display: block;
width: 100%;
height: 4.5633vw;
background: url(/products/brand/cola-up/another/images/partition.png) repeat-x top left 60.2vw / auto 100%;
position: absolute;
top: -4vw;
left: 0;
}
#another_footer .inner {
padding: 0 13vw;
}

/* ▽ PC ▽================================================================================================================================== */
/* 768px～ For PC
====================================================*/
@media screen and (min-width: 768px), print{
/*====================
PC：base
====================*/
#content_wrap,
#content_wrap p{
background-size: 20px 24px;
font-size:18.5px;
}

/*====================
ローディング画面
====================*/
#loading{
background-size: 20px 24px;
}

/*====================
メインビジュアル
====================*/
#mv{
background: url(/products/brand/cola-up/another/images/base_another_pc.png), #f8d5e1;
background-position: top center, center center;
background-repeat: no-repeat, repeat;
background-size: 2400px auto, auto auto;
padding: 29px 0 50px;
}
#mv:after{
content: "";
display: block;
width: 100%;
height: 35px;
background: url(/products/brand/cola-up/another/images/partition_top.png) repeat-x left -92px bottom / auto 100%;
position: absolute;
bottom: -33px;
}
h1{
width: 592px;
margin: 0 auto 50px;
padding-left: 17px;
}
#mv .kyun{
width: 166px;
position: absolute;
top: 32px;
left: calc(50% - 377px);
}
#mv .catch{
width: 632px;
margin: 0 auto;
}

/*====================
商品紹介
====================*/
#products{
padding: 105px 0 117px;
}
#products .inner{
padding: 0;
}
#products h3{
margin: 0 auto 50px;
width: 320px;
}
#products .products_item{
margin-bottom: 65px;
}
#products .products_list{
display: flex;
align-items: flex-start;
}
#products .products_list li:nth-child(2){
text-align: left;
width: 420px;
}
#products .pkg{
width: 245px;
margin-right: 26px;
}
#products .pkg:before{
top: 17px;
left: -82px;
width: 363px;
height: 363px;
}
#products .szl img{
bottom: -22px;
right: -584px;
width: 150px;
}
#products .ttl img{
height: 46.2px;
margin: 11px 0 23px;
}
#products .catch img{
height: 82.8px;
margin-bottom: 24px;
}
/*商品名が長い場合*/
#products .ttl_long img{
height: 34px;
margin-top: 42px;
}
/*キャッチコピーが一行しかない場合*/
#products .catch_oneline img{
height: 26px;
}
#products .level{
width: 311px;
margin: -25px -11px 0 -80px;
}
#products .level:before{
top: -38px;
left: 74px;
width: 272px;
height: 272px;
/*top: -41px;
left: 59px;
width: 272px;
height: 272px;*/
}

/*====================
SNSボタン、バナー
====================*/
#another_footer {
padding: 59px 0 68px;
background: #f9e1e9;
position: relative;
}
#another_footer:before{
height: 35px;
background: url(/products/brand/cola-up/another/images/partition.png) repeat-x top left -198px / auto 100%;
position: absolute;
top: -30px;
left: 0;
}
#another_footer .inner{
width: 485px;
}
}