@charset "utf-8";
/* CSS Document */
/* ▽ SP ▽================================================================================================================================== */
/*====================
base
====================*/
.l-container{
line-height: 1.8;
}
#content_wrap{
font-size: 3vw;
background: url("/products/brand/cola-up/history/images/base_star_pink.png"), #fffefc;
background-position: top center, center center;
background-repeat: repeat, repeat;
background-size: 6.6vw, auto;
}
.inner{
padding: 0 5.5vw;
}
h3{
margin: 0 auto 7.2vw;
}

/*====================
歴史
====================*/
#history{
position: relative;
padding: 0 0 12vw;
}
#mv{
background: url("/products/brand/cola-up/history/images/base_history_sp.png");
background-position: top center;
background-repeat: no-repeat;
background-size: cover;
position: relative;
padding: 10.6vw 0 16.8vw;
}
#history_area{
padding: 20.6vw 5vw 0;
text-align: center;
}
#history_area ol{
margin: 0 auto;
position: relative;
}
#history_area ol li{
position: relative;
padding: 0 0 16.6vw 4vw;
}
#history_area ol li:last-child{
padding-bottom: 0;
}
#history_area h2{
margin: 0 auto 2.5vw;
width: 37.2vw;
position: relative;
}
.pkg{
position: relative;
margin-top: 3.2vw;
}
.pkg img{
position: relative;
z-index: 30;
}
.pkg:before{
content: "";
position: absolute;
bottom: -3.6vw;
left: 14.2vw;
width: 59.6vw;
height: 59.6vw;
background: url(/products/brand/cola-up/common/images/deco_dot.png) no-repeat top center / 100% auto;
z-index: 5;	
}
#history_area ol li:last-child .pkg:before{
content: none;
}
#history_area ol li:before{
content: "";
height: calc(100%);
width: 1vw;
background: #23262c;
position: absolute;
left: 0;
top: 5.5vw;
}
#history_area ol li:last-child:before{
content: none;
}
#history_area ol li:after{
content: "";
width: 3.4vw;
height: 3.4vw;
background: #0a3190;
border-radius: 50vw;
display: block;
position: absolute;
top: 4vw;
left: -1.2vw;
}

/*====================
個別の位置設定
====================*/
.mb30{
margin-bottom: 30vw;
}
.deco_1980{
position: absolute;
top: -30.3vw;
left: 29.6vw;
width: 52.3vw;
}
.deco_2010{
position: absolute;
top: -33.8vw;
left: 18.6vw;
width: 55vw;
}
.deco_2012{
position: absolute;
top: -25.5vw;
left: 14.1vw;
width: 63vw;
z-index: 10;
}
.deco_2013{
position: absolute;
top: 0.7vw;
left: 5.8vw;
width: 26.4vw;
}
.deco_2021{
position: absolute;
top: -39.3vw;
left: 3.8vw;
width: 84vw;
}

/*====================
誕生秘話
====================*/
#secretstory{
background: #fffdfa;
padding: 14.2vw 0 15.2vw;
position: relative;
line-height: 2;
}
#secretstory:before{
content: "";
display: block;
width: 100%;
height: 2.9vw;
background: url(/products/brand/cola-up/history/images/partition.png) repeat-x 64vw top/auto 100%;
position: absolute;
top: 0;
left: 0;
}
.secretstory_list li{
margin-bottom: 5.8vw;
}
.secretstory_list li:last-child{
margin-bottom: 16vw;
}
#secretstory .catch img{
margin: 0 auto 5vw;
}

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

/*====================
歴史
====================*/
#history{
padding: 0 0 98px;
}
#mv{
background: url("/products/brand/cola-up/history/images/base_history_pc.png");
background-position: top center;
background-repeat: no-repeat;
background-size: auto;
padding: 83px 0 192px;
}
#mv .catch img{
margin: 0 auto;
}

/*====================
HISTORYエリア
====================*/
#history_area{
padding: 78px 0 0;
}
#history_area ol{
width: 950px;
}
#history_area ol li {
padding: 0;
}
#history_area ol > li{
position: relative;
width: 100%;
display: flex;
justify-content: space-between;
align-items: center;
padding-bottom: 0;
}
#history_area ol li:before{
content: "";
height: 100%;
width: 6px;
left: calc( 50% - 3px);
top: 0;
}
#history_area ol > li:nth-child(odd):after{
width: 22px;
height: 22px;
border-radius: 50px;
top: calc(50% - 50px);
left: calc(50% - 11px);
}
#history_area ol > li:nth-child(even):after{
width: 22px;
height: 22px;
border-radius: 50px;
top: calc(50% - 23px);
left: calc(50% - 11px);
}
#history_area ol li:first-child{
align-items: flex-start;
}
#history_area ol > li:first-child:after{
top: -10px !important;
}
#history_area ol > li:nth-last-child(2):after{
top: 116px !important;
}
#history_area h2{
margin: 0 auto 25px;
width: 228px;
}
#history_area ol > li:not(:last-child) > .txt{
width: 50%;
text-align: center;
align-items: center;	
}
#history_area li:nth-child(odd) .txt{
padding-right: 22px;
}
#history_area li:nth-child(even) .txt{
padding-left: 22px;
}
#history_area li:last-child .txt{
padding: 0;
}
#history_area ol > li:nth-child(odd) .txt{
order: 2;
}
#history_area ol > li:nth-child(odd) figure{
order: 1;
}
.pkg{
margin-top: 0;
}
.pkg img{
width: 564px;
}
.pkg:before{
bottom: 5px;
left: 55px;
width: 365px;
height: 365px;
}
#history_area li:nth-child(odd) .pkg img{
margin-left: -12px;
}
#history_area li:nth-child(even) .pkg img{
margin-right: -12px;
}
#history_area li:last-child .pkg img{
width: 780px;
margin: 0 auto;
}
#history_area ol > li.current_pkg{
text-align: center;
display: block;
margin: 0 auto;
padding: 55px 0 0;
}
#history_area ol > li.current_pkg:before{
content: none;
}
#history_area ol > li.current_pkg:after{
top: 0 !important;
}
#history_area ol > li.current_pkg .pkg{
margin-top: 34px;
}

/*====================
IE用の位置調整
====================*/
_:-ms-fullscreen, :root .pkg img{
width: 544px;
}
_:-ms-fullscreen, :root #history_area li:nth-child(odd) .pkg img{
margin-left: -32px;
}
_:-ms-fullscreen, :root #history_area li:nth-child(even) .pkg img{
margin-right: -32px;
}
_:-ms-fullscreen, :root #history_area li:last-child .pkg img{
width: 780px;
margin: 0 auto;
}

/*====================
個別の位置設定
====================*/
.mb30{
margin-bottom: 0;
}
.t1980{
margin-top: -34px !important;
}
.p1980{
margin-top: -140px !important;
}
.t2010{
margin-top: 154px !important;
}
.p2011{
margin-bottom: 64px;
}
.t2019{
margin-top: -50px;
}
.p2020{
margin-bottom: 220px;
margin-top: -142px;
}
.t2020{
margin-top: -205px;
}
.deco_1980{
top: -220px;
left: 617px;
width: 320px;
}
.deco_2010{
top: 50px;
left: 544px;
width: 340px;
}
.deco_2012{
top: -28px;
left: 517px;
width: 388px;
}
.deco_2013{
top: 108px;
left: 14px;
width: 163px;	
}
.deco_2021{
top: -110px;
left: 8px;
width: 929px;
}

/*====================
誕生秘話
====================*/
#secretstory{
padding: 110px 0 96px;
line-height: 2.4;
}
#secretstory:before{
width: 100%;
height: 23px;
background: url(/products/brand/cola-up/history/images/partition.png) repeat-x center top/auto 100%;
}
.secretstory_list li{
margin-bottom: 58px;
}
.secretstory_list li:last-child{
margin-bottom: 60px;
}
#secretstory .catch img{
margin: 0 auto 32px;
}

/*====================
SNS・PAGETOPボタン、バナー
====================*/
#brand_footer .inner{
width: 485px;
}
}