@charset "utf-8";
/* CSS Document */
/*--------------------------------------------
　UCC×明治 BLACK MARIAGE ＜SP用＞ index.css
----------------------------------------------*/

/*====================
reset
====================*/
figure {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
vertical-align: baseline;
background: transparent;
}
li {
list-style: none;
}
*:focus {
outline: none;
}
img {
width: 100%;
height: auto;
}
/*====================
base
====================*/
body {
-webkit-text-size-adjust: 100%;
}
body * {
box-sizing: border-box;
-webkit-transform-style: flat;
}

/*====================
コピーガード
====================*/
.copyGuard {
position: relative;
-webkit-user-select:none;
}
a.copyGuard {
display: block;
}
.copyGuard:before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: #fff;
opacity: 0;
z-index: 10;
}

/*====================
loading
====================*/
#loading{
width: 100%;
height: 100%;
position: fixed;
top: 0;
left: 0;
z-index: 9999;
background: #1f1f1f;
background-repeat: repeat;
background-position: center center;
}
#loading img{
width: 40%;
position: absolute;
top: 40%;
left: 30%;
-webkit-animation:blink 2s ease-in-out infinite alternate;
-moz-animation:blink 2s ease-in-out infinite alternate;
animation:blink 2s ease-in-out infinite alternate;
}
/* 点滅 */
@-webkit-keyframes blink{
0%{opacity: 0;}
50%{opacity: 1;}
100%{opacity: 1;}
}
@-moz-keyframes blink{
0%{opacity:0;}
50%{opacity:1;}
100%{opacity:1;}
}
@keyframes blink{
0%{opacity:0;}
50%{opacity:1;}
100%{opacity:1;}
}

/*====================
コンテンツ
====================*/
#content_wrap {
overflow: hidden;
}
/*.
hidden{
display: none;
}
*/

/*====================
メインビジュアル
====================*/
#mainvisual{
position: relative;
padding-top: 74.4%!important;
background: url(/smartphone/sweets/chocolate/the-chocolate/blackmariage/images/mv.png);
background-size: 100% auto;
background-repeat: no-repeat;
background-position: center top;
}
#mainvisual h1{
position: absolute;
width: calc(100%*376/750);
top: calc(100%*170/558);
left: calc(100%*187/750);
}

/*====================
イントロダクション
====================*/
#introduction{
position: relative;
padding: 13.2vw 0 21vw;
overflow: hidden;
background: #1f1f1f;
}
#introduction .szl_l1{
position: absolute;
width: calc(100%*138/750);
top: calc(100%*167/2991);
left: calc(100%*0/750);
}
#introduction .szl_l2{
position: absolute;
width: calc(100%*203/750);
bottom: calc(100%*255/2991);
left: calc(100%*0/750);
}
#introduction .szl_r1{
position: absolute;
width: calc(100%*212/750);
top: calc(100%*27/2991);
right: calc(100%*0/750);
}
#introduction .szl_r2{
position: absolute;
width: calc(100%*250/750);
top: calc(100%*667/2991);
right: calc(100%*0/750);
}
#introduction .szl_r3{
position: absolute;
width: calc(100%*244/750);
bottom: calc(100%*961/2991);
right: calc(100%*48/750);
}
#introduction .goods_sugar{
position: absolute;
width: calc(100%*187/750);
bottom: calc(100%*9/2991);
left: calc(100%*0/750);
}
#introduction .goods_cutlery{
position: absolute;
width: calc(100%*486/750);
bottom: calc(100%*0/2991);
left: calc(100%*215/750);
}
#introduction .goods_candle{
position: absolute;
width: calc(100%*159/750);
top: calc(100%*994/2991);
right: calc(100%*192/750);
}
#introduction .goods_dish{
position: absolute;
width: calc(100%*161/750);
bottom: calc(100%*588/2991);
right: calc(100%*0/750);
}
#introduction .intro_txt{
display: -webkit-flex;
display: -moz-flex;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
margin: 0 auto;
}
#introduction .copy1{
width: calc(100%*396/750);
}
#introduction .copy2{
width: calc(100%*499/750);
}
#introduction .copy3{
width: calc(100%*544/750);
}
#introduction .intro_txt li:nth-child(2){
margin: 13.7vw 0 16vw;
}
#introduction .bm{
margin: 8vw -14.2vw 0 -5.6vw;
}
#introduction .bm li{
width: calc(100vw*455/750);	
}
#introduction .bm li:nth-child(2){
margin: -25.7vw 0 0 auto;
}
#introduction .bm li:nth-child(3){
margin: -19vw auto 0 9.2vw;
}
#introduction .bm li:first-child img{
width: calc(100vw*436/750);	
}
#introduction .bm li:nth-child(2) img{
width: calc(100vw*403/750);	
}
#introduction .lets{
padding: 3.1vw 4vw 0;
}
#introduction .lets li{
width: calc(100vw*690/750);	
}
#introduction .lets li:nth-child(2){
margin-top: -0.9vw;
}
#introduction .lets li:nth-child(3){
margin-top: -0.6vw;
}
#introduction .lets li:last-child{
margin-top: -0.6vw;
}

/*====================
マリアージュ
====================*/
#mariage{
position: relative;
padding: 6.2vw 0 19.2vw;
overflow: hidden;
background: url(/smartphone/sweets/chocolate/the-chocolate/blackmariage/images/base.png), url(/sweets/chocolate/the-chocolate/blackmariage/common/images/bg_mariage.png), #44382e;
background-size: 92% 82%, 100% auto;
background-position: center 83%, center top, center center;
background-repeat: no-repeat, repeat, repeat;
}
#mariage .m_szl_l1{
position: absolute;
width: calc(100%*121/750);
top: 24.1%;
left: calc(100%*0/750);
z-index:1;
}
#mariage .m_szl_l2{
position: absolute;
width: calc(100%*150/750);
bottom: 12.3%;
left: calc(100%*0/750);
}
#mariage .m_szl_r1{
position: absolute;
width: calc(100%*191/750);
top: calc(100%*34/3034);
right: calc(100%*0/750);
z-index:1;
}
#mariage .m_szl_r2{
position: absolute;
width: calc(100%*139/750);
top: 50.6%;
right: calc(100%*0/750);
z-index:1;
}
#mariage .m_szl_r3{
position: absolute;
width: calc(100%*88/750);
bottom: 8.6%;
right: calc(100%*0/750);
}
#mariage .tap,
#coffee_chocolate .tap{
width: calc(100%*616/750);
margin: 0 auto;
}
#mariage .tap img,
#coffee_chocolate .tap img{
animation: blink 2s ease-in-out 6s infinite alternate;
-webkit-animation: blink 2s ease-in-out 6s infinite alternate;
-moz-animation: blink 2s ease-in-out 6s infinite alternate;
}
.mariage_nav_wrap {
padding: 7.5vw 2vw 0;
}
.mariage_nav {
display: flex;
justify-content: space-around;
align-items: center;
padding-left: 0;
}
.mariage_nav li {
width: 27.4vw;
text-align: center;
position: relative;
}
.mariage_nav li img {
width: 72%;
opacity: 0.5;
}
.mariage_nav li.active img {
width: 100%;
opacity: 1;
}
/*
.mariage_nav li.active:before {
content: "";
width: 18%;
height: 18%;
background: url(/smartphone/sweets/chocolate/the-chocolate/blackmariage/images/tap_arrow.png) no-repeat top left /contain;
position: absolute;
top: 98%;
left: 40%;
}
*/
.mariage_box_wrap{
padding: 0;
position: relative;
}

.prev-arrow{
position: absolute;
top: 57.8%;
left: 8%;
width: 5%;
z-index:10;
}

.next-arrow{
position: absolute;
top: 57.8%;
right: 8%;
width: 5%;
z-index:10;
}

.comment_blue,
.comment_red,
.comment_orange,
.comment_violet{
display: flex;
justify-content: center;
align-items: baseline;
padding: 0 8vw;
}
.recomend_blue,
.recomend_red,
.recomend_orange,
.recomend_violet{
  padding: 4vw 7.7vw 0;
}
.recomend_blue li:nth-child(2),
.recomend_red li:nth-child(2),
.recomend_orange li:nth-child(2),
.recomend_violet li:nth-child(2){
margin: 4.6vw 0 4.5vw;
}
#mariage .line {
width: calc(100%*635/750);
margin: 0 auto;
}
#mariage .line > img{
  height:1px;
}
.mariagepoint{
  padding: 5.4vw 7.6vw 0;
}
.mariagepoint li:first-child{
margin-bottom: 1.7vw;
}


/*====================
コーヒー×チョコレート
====================*/
#coffee_chocolate{
position: relative;
padding: 10.2vw 0 0vw;
overflow: hidden;
background: url(/smartphone/sweets/chocolate/the-chocolate/blackmariage/images/bg_coffee_chocolate.png), #696356;
background-size: 100% auto, 100% auto;
background-position: center top, center center;
background-repeat: repeat-y, repeat;
}
#coffee_chocolate h3{
width: calc(100%*730/750);
margin-left: auto;
}
#coffee_chocolate .mds_cof_cho{
width: calc(100%*590/750);
margin: 5.1vw auto 6.9vw;
}
#coffee_chocolate .txt_cof{
width: calc(100%*522/750);
margin: 0 auto 7.2vw;
}
.cof_cho_nav_wrap {
padding: 6.5vw 0.3vw 0;
}
.cof_cho_nav {
display: flex;
justify-content: space-around;
align-items: center;
flex-wrap: wrap;
}
.cof_cho_nav li {
width: 44vw;
text-align: center;
position: relative;
}
.cof_cho_nav li img {
width: 72%;
opacity: 0.5;
}
.cof_cho_nav li.active img {
width: 100%;
opacity: 1;
}
.cof_cho_box_wrap{
padding: 1.1vw 0 0;
}
.coffee_box{
background: url(/smartphone/sweets/chocolate/the-chocolate/blackmariage/images/flow_cof.png), url(/smartphone/sweets/chocolate/the-chocolate/blackmariage/images/map.png);
background-size: 26.8vw 100%, 100% auto;
background-repeat: no-repeat, no-repeat;
background-position: left top, center 10.8vw;
padding: 68.6vw 0 3.6vw;
}
.coffee_box .ucc_info1 {
width: calc(100%*679/750);
margin: 0.2vw 0 0 5.8vw;
}
.flow_cof{
padding: 14.7vw 4.2vw 0;
}
.flow_cof li:nth-child(2){
margin-top: -16vw;
}
.flow_cof li:nth-child(3){
margin-top: -1.5vw;
}
.flow_cof li:nth-child(4){
margin-top: 13.3vw;
}
.flow_cof li:nth-child(5){
margin-top: -15.1vw;
}
.flow_cof li:nth-child(6){
margin-top: 3.2vw;
}
.flow_cof li:nth-child(7){
margin-top: 5.1vw;
}
.flow_cof li:nth-child(8){
margin-top: -9.8vw;
}
.flow_cof li:nth-child(9){
margin-top: -9.1vw;
}
.flow_cof li:nth-child(10){
margin-top: 6.3vw;
}
.flow_cof li:nth-child(11){
margin-top: -12.2vw;
}
.flow_cof li:last-child{
margin-top: 10.9vw;
}
.chocolate_box{
background: url(/smartphone/sweets/chocolate/the-chocolate/blackmariage/images/flow_cho.png), url(/smartphone/sweets/chocolate/the-chocolate/blackmariage/images/map.png);
background-size: 26.8vw 100%, 100% auto;
background-repeat: no-repeat, no-repeat;
background-position: right top, center 10.8vw;
padding: 71.3vw 0 3.6vw;
}
.chocolate_box .meiji_info1 {
width: calc(100%*675/750);
margin: 0 0 0 3.4vw;
}
.flow_cho{
padding: 13.6vw 4.2vw 0;
}
.flow_cho li:nth-child(2){
margin-top: 3.3vw;
}
.flow_cho li:nth-child(3){
margin-top: -6vw;
}
.flow_cho li:nth-child(4){
margin-top: 6.9vw;
}
.flow_cho li:nth-child(5){
margin-top: 8.6vw;
}
.flow_cho li:nth-child(6){
margin-top: -4.4vw;
}
.flow_cho li:nth-child(7){
margin-top: 7.1vw;
}
.flow_cho li:nth-child(8){
margin-top: -3.8vw;
}
.flow_cho li:last-child{
margin-top: 10.7vw;
}

/*====================
キャンペーンボタン
====================*/
.cp_box{
  text-align: center;
  padding: 7.75vw 9vw 9.4vw;
}
.cp_box .cp_lead{
  margin:0 2vw 4.6vw;
}
/*====================
フッターコンテンツ
====================*/
#bm_footer {
padding: 6.7vw 0 4.6vw;
font-size: 0;
text-align: center;
}
#bm_footer .sns ul {
display: -ms-flexbox; /*IE10*/
display: -webkit-flex; /*safari*/
display: flex;
-webkit-justify-content: center; /*safari*/
justify-content: center;
}
#bm_footer .sns ul li {
width: 12vw;
}
#bm_footer .sns ul li:not(:first-child) {
margin-left: 5.3vw;
}
#bm_footer .bnr_link_area{
padding: 6.6vw 5.3vw 0;
}
#bm_footer .bnr_link_area ul{
display: -ms-flexbox; /*IE10*/
display: -webkit-flex; /*safari*/
display: flex;
flex-wrap: wrap;
-webkit-justify-content: center; /*safari*/
justify-content: center;
}
#bm_footer .bnr_link_area ul li{
margin-bottom: 4vw;
}
#bm_footer .bnr_link_area ul li:nth-child(3),
#bm_footer .bnr_link_area ul li:last-child{
width: 42.6vw;
margin-bottom: 0;
}
#bm_footer .bnr_link_area ul li:nth-child(3){
margin-right: 4vw;
}
#bm_footer .bnr_link_area ul li:last-child{
margin-right: 0;
}