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

/*====================
コーラアップブランドナビ
====================*/
#colaup_header{
background: #ffffff;
/*padding: 1.7vw 3vw 1vw 1.7vw;*/
}
#colaup_header .inner{
padding: 0;
}
h1{
width: 29.1vw;
}
#colaup_header nav ul{
display: flex;
justify-content: space-around;
align-items: center;
}
#colaup_header nav ul li{
line-height: 1;
}
.menu{
position: relative;
padding: 4vw 0 3.6vw;
}
.menu:before{
content: "";
position: absolute;
top: 50%;
left: -5vw;
transform: translateY(-50%);
border: 1.4vw solid transparent;
border-left: 2vw solid #d3000e;
}
#colaup_header nav li.products{
padding-left: 9.5vw;
}
#colaup_header nav li.history{
padding-left: 10.5vw;
padding-right: 8vw;
}
/*#colaup_header nav li:not(:first-child) img{
height: 5.086vw;
}*/
#colaup_header nav li img{
height: 5.086vw;
}

/*====================
メインビジュアル
====================*/
#mainvisual{
background: #ffffff;
position: relative;
}

/*====================
バナーインフォ
====================*/
#information{
background: url("/products/brand/cola-up/images/base_info2_sp.png");
background-position: top center;
background-repeat: no-repeat;
background-size: cover;
position: relative;
padding: 19.4vw 0;
margin-top: -3.6vw;
}
#information .inner{
padding: 0 8.6vw;
}
.information_list{
position: relative;
}
.information_list li:not(:first-child){
margin-top: 6vw;
}
.borderline{
box-shadow: 0 0 0 0.6vw #23262c;
}
.deco_lt{
position: absolute;
top: -21.9vw;
left: -23.7vw;
width: 59vw;
}
.deco_rt{
position: absolute;
top: -25.6vw;
right: -9.5vw;
width: 44.5vw;
}
.deco_lb{
position: absolute;
top: 68.9vw; /*バナー2個用*/
/*top: 32.8vw; バナー1個用*/
left: -13.7vw;
width: 45.5vw;
}
.deco_rb{
position: absolute;
top: 60.5vw; /*バナー2個用*/
/*top: 24.4vw; バナー1個用*/
right: -24.8vw;
width: 57.4vw;
}

/*====================
商品紹介
====================*/
#products{
padding: 13.2vw 0 15.2vw;
position: relative;
}
#products .inner{
padding: 0 9vw;
}
#products h3{
margin: 0 auto 8.2vw;
}
.products_item{
margin-bottom: 16vw;
}
.pkg_box{
position: relative;
}
.pkg{
position: relative;
width: 46vw;
margin: 0 auto;
}
.pkg img{
position: relative;
z-index: 30;
}
.pkg:before{
content: "";
position: absolute;
top: 5vw;
left: -15.5vw;
width: 70vw;
height: 70vw;
background: url(/products/brand/cola-up/common/images/deco_dot.png) no-repeat top center / 100% auto;
z-index: 5;	
}
.szl img{
position: absolute;
bottom: -5vw;
right: -1.8vw;
width: 25.5vw;
z-index: 35;
}
.ttl img{
height: 7.041vw;
margin: 9.2vw 0 5.8vw;
}
.catch img{
height: 12.647vw;
margin-bottom: 2.6vw;
}
/*キャッチコピーが一行しかない場合*/
.catch_oneline img{
height: 5vw;
}
.level{
position: relative;
width: 62vw;
margin: 1.5vw auto 0;
}
.level img{
position: relative;
z-index: 30;
}
.level:before{
content: "";
position: absolute;
top: -6.6vw;
left: 12vw;
width: 52.2vw;
height: 52.2vw;
background: url(/products/brand/cola-up/common/images/deco_dot.png) no-repeat top center / 100% auto;
z-index: 5;
}

/*====================
SNS・PAGETOPボタン、バナー
====================*/
.gummisite_list li:not(:first-child){
margin-top: 7.2vw;
}

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

/*====================
コーラアップブランドナビ
====================*/
/*#colaup_header{
padding: 15px 0 8px;
}*/
#colaup_header .inner{
width: 870px;
}
h1{
width: 205px;
}
.menu{
padding: 30px 0 28px;
}
.menu:before{
left: -34px;
border: 8px solid transparent;
border-left: 14px solid #d3000e;
}
#colaup_header nav li.products{
padding-left: 60px;
}
#colaup_header nav li.history{
padding-left: 60px;
}
/*#colaup_header nav li:not(:first-child) img{
height: 35px;
}*/
#colaup_header nav li img{
height: 35px;
}

/*====================
メインビジュアル
====================*/
.mv{
width: 100%;
position: relative;
}
.mainvisual_pc{
display: flex;
justify-content: space-between;
}
/*.mainvisual_pc li{
width: calc(100% / 3);
}*/
.mainvisual_pc li:first-child{
width: 33.1%;
padding-left: 0.8vw;
}
.mainvisual_pc li:nth-child(2){
width: 33.8%;
margin: 0 -0.4vw;
}
.mainvisual_pc li:last-child{
width: 33.1%;
padding-right: 0.8vw;
}

/*====================
バナーインフォ
====================*/
#information{
background: url("/products/brand/cola-up/images/base_info_pc.png");
background-position: top center;
background-repeat: no-repeat;
background-size: auto;
padding: 185px 0 192px;
margin-top: calc(-66px - 1.8vw);
}
#information .inner{
padding: 0;
width: 906px;
position: relative;
}
.information_list{
display: flex;
justify-content: space-between; /*バナー2個用*/
/*justify-content: center; バナー1個用*/
}
.information_list li:not(:first-child){
margin-top: 0;
}
.information_list li img{
width: 418px;
}
.borderline{
box-shadow: 0 0 0 4px #23262c;
}
.deco_lt{
position: absolute;
top: -170px;
left: -92px;
width: 460px;
}
.deco_rt{
position: absolute;
top: -200px;
right: -40px;
width: 348px;
}
.deco_lb{
position: absolute;
top: 175px;
left: 13px;
width: 357px;
}
.deco_rb{
position: absolute;
top: 108px;
right: -110px;
width: 449px;
}

/*====================
商品紹介
====================*/
#products{
padding: 34px 0 94px;
}
#products .inner{
padding: 0;
}
#products h3{
margin: 0 auto 47px;
}
.products_item{
margin-bottom: 77px;
}
.products_list{
display: flex;
align-items: flex-start;
}
.products_list li:nth-child(2){
text-align: left;
width: 420px;
}
.pkg{
width: 242px;
margin-right: 26px;
}
.pkg:before{
top: 14px;
left: -84px;
width: 365px;
height: 365px;
}
.szl img{
bottom: -22px;
right: -584px;
width: 150px;
}
.ttl img{
height: 36px;
margin: 19px 0 36px;
}
.catch img{
height: 68px;
margin-bottom: 26px;
}
/*商品名が長い場合*/
.ttl_long img{
height: 34px;
margin-top: 42px;
}
/*キャッチコピーが一行しかない場合*/
.catch_oneline img{
height: 26px;
}
.level{
width: 325px;
margin: -26px -24px 0 -78px;
}
.level:before{
top: -38px;
left: 74px;
width: 272px;
height: 272px;
}

/*====================
SNS・PAGETOPボタン、バナー
====================*/
#brand_footer .inner{
width: 840px;
}
.gummisite_list{
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.gummisite_list li{
width: 400px;
}
.gummisite_list li:not(:first-child){
margin-top: 0;
}
.gummisite_list li:nth-child(n+3){
margin-top: 40px;
}
.gummisite_list li img{
width: 400px;
}
}