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

/*====================
reset
====================*/
figure, ol {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
vertical-align: baseline;
background: transparent;
}
/*reset.cssの影響を調整*/
div:after, dl:after, ul:after {
content: none;
}
img {
-webkit-backface-visibility: hidden;
}
*:focus {
outline: none;
}

/*====================
コピーガード
====================*/
.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;
}

/*====================
base
====================*/
body {
position: relative;
min-width: 950px;
-webkit-text-size-adjust: 100%;
}
body * {
box-sizing: border-box;
line-height: 1.7;
}

/*====================
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{
position: absolute;
top: calc(50% - 100px);
left: calc(50% - 120px);
width: 240px;
-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;
}
.inner{
width: 950px;
margin: 0 auto;
text-align: center;
}
/*.hidden{
display: none;
}*/

/*====================
メインビジュアル
====================*/
#mainvisual{
position: relative;
height: 560px;
overflow: hidden;
background: url(/sweets/chocolate/the-chocolate/blackmariage/images/wood.png), #29292a;
background-position: center top, center top;
background-repeat: repeat-x, repeat;
}
#mainvisual h1{
position: absolute;
top: 70px;
left: calc( 50% - 277px);
}
#mainvisual .hand_coffee{
position: absolute;
top: 0;
left: calc( 50% - 757px);
}
#mainvisual .hand_chocolate{
position: absolute;
bottom: 0;
right: calc( 50% - 802px);
}

/*====================
イントロダクション
====================*/
#introduction{
position: relative;
height: 2100px;
overflow: hidden;
background: #1f1f1f;
padding-top: 115px;
}
#introduction .szl_l1{
position: absolute;
top: 189px;
left: calc( 50% - 566px);
}
#introduction .szl_l2{
position: absolute;
bottom: 748px;
left: calc( 50% - 637px);
}
#introduction .szl_r1{
position: absolute;
top: 21px;
right: calc( 50% - 625px);
}
#introduction .szl_r2{
position: absolute;
bottom: 475px;
right: calc( 50% - 649px);
}
#introduction .goods_spoon{
position: absolute;
top: -127px;
left: calc( 50% - 788px);
}
#introduction .goods_pot{
position: absolute;
top: 379px;
left: calc( 50% - 691px);
}
#introduction .goods_sugar{
position: absolute;
bottom: 241px;
left: calc( 50% - 546px);
}
#introduction .goods_cutlery{
position: absolute;
bottom: -231px;
left: calc( 50% - 595px);
}
#introduction .goods_candle{
position: absolute;
top: 444px;
right: calc( 50% - 395px);
}
#introduction .goods_dish{
position: absolute;
bottom: 428px;
right: calc( 50% - 698px );
}
#introduction .goods_drip{
position: absolute;
bottom: -165px;
right: calc( 50% - 614px);
}
#introduction .copy2{
margin: 101px 0 122px;
}
#introduction .bm{
position: absolute;
top: 702px;
left: calc(50% - 527px);
width: 1079px;
height: 532px;
}
#introduction .bm li:first-child{
position: absolute;
top: 0;
left: 0;
}
#introduction .bm li:first-child img{
width: 347px;
}
#introduction .bm li:nth-child(2){
position: absolute;
bottom: 0;
left: 362px;
}
#introduction .bm li:nth-child(2) img{
width: 322px;
}
#introduction .bm li:nth-child(3){
position: absolute;
top: 64px;
right: 0;
}
#introduction .bm li:nth-child(3) img{
width: 364px;
}
#introduction .lets{
display: -webkit-flex;
display: -moz-flex;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
margin: 536px auto 0;
}
#introduction .lets li:first-child{
margin-left: 6px;
}
#introduction .lets li:nth-child(2){
margin: -8px 88px 0 0;
}
#introduction .lets li:nth-child(3){
margin: -5px 0 0 32px;
}
#introduction .lets li:nth-child(4){
margin: -4px 0 0 302px;
}

/*====================
マリアージュ
====================*/
#mariage{
position: relative;
height: 1700px;
overflow: hidden;
background: url(/sweets/chocolate/the-chocolate/blackmariage/images/base.png), url(/sweets/chocolate/the-chocolate/blackmariage/common/images/bg_mariage.png), #44382e;
background-position: center 242px, center top, center center;
background-repeat: no-repeat, repeat, repeat;
padding-top: 60px;
}
#mariage .m_szl_l1{
position: absolute;
top: 181px;
left: calc( 50% - 625px);
}
#mariage .m_szl_l2{
position: absolute;
bottom: 13.5%;
left: calc( 50% - 661px);
z-index:1;
pointer-events: none;
}
#mariage .m_szl_r1{
position: absolute;
top: 90px;
right: calc( 50% - 629px);
}
#mariage .m_szl_r2{
position: absolute;
top: 45.4%;
right: calc( 50% - 636px);
z-index:1;
pointer-events: none;
}
#mariage .m_szl_r3{
position: absolute;
bottom: 126px;
right: calc( 50% - 635px);
}
#mariage h3{
margin-right: 235px;
}
#mariage .mariagepoint{
display: -webkit-flex;
display: -moz-flex;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
padding: 28px 0px 0 19px;
}
#mariage .mariagepoint li:first-child{
margin-left: -48px;
}
#mariage .mariagepoint li:nth-child(2){
margin: 14px 0 17px 0px;
}
#mariage .comment_blue {
display: -webkit-flex;
display: -moz-flex;
display: flex;
flex-flow: row;
justify-content: space-around;
align-items: center;
text-align: center;
padding: 17px 35px 27px 29px;
}
#mariage .comment_blue li:first-child{
margin-top: 51px;
}
#mariage .comment_blue li:first-child img{
width: 185px;
}
#mariage .comment_blue li:last-child img{
width: 188px;
}
#mariage .recomend_blue {
display: -webkit-flex;
display: -moz-flex;
display: flex;
flex-flow: row;
justify-content: space-around;
align-items: center;
text-align: center;
padding: 0 16px 0 66px;
margin-bottom: 23px;
}
#mariage .recomend_blue li:nth-child(2){
margin: 65px 25px 0 0;
}
#mariage .comment_red {
display: -webkit-flex;
display: -moz-flex;
display: flex;
flex-flow: row;
justify-content: space-around;
align-items: center;
text-align: center;
padding: 18px 37px 27px 30px;
}
#mariage .comment_red li:first-child{
margin-top: 50px;
}
#mariage .comment_red li:first-child img{
width: 185px;
}
#mariage .comment_red li:last-child img{
width: 188px;
}
#mariage .recomend_red {
display: -webkit-flex;
display: -moz-flex;
display: flex;
flex-flow: row;
justify-content: space-around;
align-items: center;
text-align: center;
padding: 0 46px 0 74px;
}
#mariage .recomend_red li:nth-child(2){
margin: 65px 10px 0 0;
}

#mariage .comment_orange {
display: -webkit-flex;
display: -moz-flex;
display: flex;
flex-flow: row;
justify-content: space-around;
align-items: center;
text-align: center;
padding: 20px 27px 24px 28px;
}

#mariage .comment_orange li:first-child{
  margin-top: 42px;
  margin-right: 4px;
}
#mariage .comment_orange li:last-child{
  margin-top: 29px;
}
#mariage .comment_orange li:first-child img{
width: 185px;
}
#mariage .comment_orange li:last-child img{
width: 188px;
}
#mariage .recomend_orange {
display: -webkit-flex;
display: -moz-flex;
display: flex;
flex-flow: row;
justify-content: space-around;
align-items: center;
text-align: center;
padding: 0 35px 0 77px;
margin-bottom: 23px;
}
#mariage .recomend_orange li:nth-child(2){
margin: 64px 18px 0 6px;
}

#mariage .comment_violet {
display: -webkit-flex;
display: -moz-flex;
display: flex;
flex-flow: row;
justify-content: space-around;
align-items: center;
text-align: center;
padding: 20px 28px 25px 28px;
}
#mariage .comment_violet li:first-child{
margin-top: 42px;
margin-right: 4px;
}
#mariage .comment_violet li:last-child{
  margin-top: 27px;
}
#mariage .comment_violet li:first-child img{
width: 185px;
}
#mariage .comment_violet li:last-child img{
width: 188px;
}
#mariage .recomend_violet {
display: -webkit-flex;
display: -moz-flex;
display: flex;
flex-flow: row;
justify-content: space-around;
align-items: center;
text-align: center;
padding: 0 17px 0 76px;
margin-bottom: 23px;
}
#mariage .recomend_violet li:nth-child(2){
margin: 65px 5px 0px 5px;
}
/*====================
コーヒー×チョコレート
====================*/
#coffee_chocolate{
position: relative;
min-height: 3725px;
overflow: hidden;
background: url(/sweets/chocolate/the-chocolate/blackmariage/common/images/bg_coffee_chocolate.png), #696356;
background-position: center top, center center;
background-repeat: repeat-y, repeat;
padding: 90px 0 81px;
}
#coffee_chocolate h3 img{
width: 716px;
}
#coffee_chocolate .mds_cof_cho{
margin: 37px 0 59px;
}
#coffee_chocolate .mds_cof_cho img{
width: 518px;
}
#flow_wrap{
position: relative;
height: 3219px;
background: url(/sweets/chocolate/the-chocolate/blackmariage/images/flow.png) no-repeat center 83px;
}
#flow_wrap > *{
position: absolute;
}
#flow_wrap .label_coffee{
top: 60px;
left: calc( 50% - 397px);
}
#flow_wrap .label_chocolate{
top: 60px;
right: calc( 50% - 397px);
}
#flow_wrap .label_coffee img,
#flow_wrap .label_chocolate img{
width: 297px;
}
#flow_wrap .map{
top: 284px;
left: calc( 50% - 670px);
}
#flow_wrap .ucc_info1{
top: 841px;
left: calc( 50% - 465px);
}
#flow_wrap .meiji_info1{
top: 936px;
right: calc( 50% - 464px);
}
#flow_wrap .ucc_info3{
bottom: 0;
left: calc( 50% - 445px);
}
#flow_wrap .meiji_info3{
bottom: 0;
right: calc( 50% - 447px);
}
#flow_wrap .szl_coffee{
top: -236px;
left: calc( 50% - 508px);
}
#flow_wrap .szl_chocolate{
top: -235px;
right: calc( 50% - 515px);
}
#flow_wrap .coffee_wrap{
top: 1148px;
left:21px;
}
#flow_wrap .flow_cof{
text-align: left;
}
#flow_wrap .flow_cof li:first-child{
margin: 0 0 0 -16px;
}
#flow_wrap .flow_cof li:nth-child(2){
margin: -84px 0 0 215px;
}
#flow_wrap .flow_cof li:nth-child(3){
margin: 9px 0 0 49px;
}
#flow_wrap .flow_cof li:nth-child(4){
margin: 23px 0 0 8px;
}
#flow_wrap .flow_cof li:nth-child(5){
margin: -86px 0 0 198px;
}
#flow_wrap .flow_cof li:nth-child(6){
margin: -6px 0 0 0;
}
#flow_wrap .flow_cof li:nth-child(7){
margin: 2px 0 0 100px;
}
#flow_wrap .flow_cof li:nth-child(8){
margin: -33px 0 0 6px;
}
#flow_wrap .flow_cof li:nth-child(9){
margin: -125px 0 0 208px;
}
#flow_wrap .flow_cof li:nth-child(10){
margin: 17px 0 0px 52px;
}
#flow_wrap .flow_cof li:last-child{
margin: -93px 0 0 -5px;
}
#flow_wrap .chocolate_wrap{
top: 1165px;
right:14px;
}
#flow_wrap .flow_cho{
text-align: left;
}
#flow_wrap .flow_cho li:first-child{
margin: 0 0 0 95px;
}
#flow_wrap .flow_cho li:nth-child(2){
margin: 26px 0 0 -21px;
}
#flow_wrap .flow_cho li:nth-child(3){
margin: -84px 0 0 88px;
}
#flow_wrap .flow_cho li:nth-child(4){
margin: 52px 0 0 0;
}
#flow_wrap .flow_cho li:nth-child(5){
margin: 10px -30px 0 68px;
}
#flow_wrap .flow_cho li:nth-child(6){
margin: -86px 0 0 -24px;
}
#flow_wrap .flow_cho li:nth-child(7){
margin: -28px 0 0 -41px;
}
#flow_wrap .flow_cho li:last-child{
margin: -48px 0 0 -5px;
}

/*====================
スライダー
====================*/
.slider button{
  margin: 0;
  padding: 0;
  background: none;
  border: none;
  border-radius: 0;
  outline: none;
  appearance: none;
}

.slider .prev-arrow{
  position: absolute;
  top: 63%;
  left: 1.5%;
  cursor: pointer;
  z-index:10;
}

.slider .next-arrow{
  position: absolute;
  top: 63%;
  right: 1.4%;
  cursor: pointer;
  z-index:10;
}

.slick-dots{
  text-align: center;
}

.slick-dots li{
  display: inline-block;
  margin: 0 15px;
}

.slick-dots li button{
  position: relative;
  text-indent: -9999px;
}

.slick-dots li button::before{
  content: url(/sweets/chocolate/the-chocolate/blackmariage/images/slider_nav.png);
  font-size: 20px;
  text-indent: 0px;
  position: absolute;
  top: 2px;
  left: 0;
  cursor: pointer;
  z-index:10;
}

.slick-dots li.slick-active button:before{
  content: url(/sweets/chocolate/the-chocolate/blackmariage/images/slider_nav_active.png);
  position: absolute;
  top: 0;
  left: 0;
  cursor: pointer;
  z-index:10;
}

.slick-dots li.slick-active button:nth-child(1):before{
  top: 4px;
  left: -5px;
}
.slick-dots button:nth-child(2){
  display:none;
}


/*====================
キャンペーンボタン
====================*/
.cp_box{
  text-align: center;
  padding-top: 85px;
}
.cp_box .cp_lead{
	margin-bottom: 34px;
}

/*====================
フッターコンテンツ
====================*/
#bm_footer{
padding: 52px 0 60px;
}
#bm_footer .sns{
/*width: 172px;*/
margin: 0 auto 54px;
}
#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:not(:first-child) {
margin-left: 26px;
}
#bm_footer .sns ul li img {
width: 60px;
}
#bm_footer .bnr_link_area{
width: 670px;
margin: 0 auto;
}
#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: 30px;
}
#bm_footer .bnr_link_area ul li:nth-child(3){
margin-right: 30px;
}
.pagetop {
position: fixed;
z-index: 80;
right: 0;
padding-bottom: 12px;
}

#content_wrap a:hover{
	opacity: 0.7;
}