@charset "utf-8";
/* CSS Document */
/*====================
reset
====================*/
figure{
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
vertical-align: baseline;
background: transparent;
}
ol{
margin: 0;
padding: 0;
}
div:after, dl:after, ul:after{
content: none;
}
*:focus{
outline: none;
}

/*====================
basic
====================*/
body{
position: relative;
}
.l-container{
-webkit-text-size-adjust: 100%;
}
.l-container img{
max-width: 100%;
height: auto;
vertical-align: bottom;
transition: ease .4s;
}
.l-container a:hover img{
/*opacity: 0.7;*/
}
p.note, ul.note > li{
text-align: left;
text-indent: -1em;
padding-left: 1em;
}
.txt_left{
text-align: left !important;
}
.txt_right{
text-align: right !important;
}
.txt_center{
text-align: center !important;
}
.txt_information{
font-size: 2.4vw !important;
}
.txt_red{
color: #d42a2a;
}
.moveit{
opacity: 0;
}
/*
hidden{
display: none;
}
*/

/*====================
印刷不可
====================*/
@media print{
.nocopy,
#mainvisual{
opacity: 0;
}
}

/*====================
フォント読み込み
====================*/
@font-face{
font-family: 'SmoothStone';
src: url(/products/brand/mchoco/font/SmoothStone-Regular.woff) format('woff');
font-weight: 100;
}
.txt_eng{
font-family: SmoothStone !important;
font-size: 9vw;
line-height: 1;
font-weight: 100 !important;
}

/*====================
コンテンツ
====================*/
.isPC {
display: none;
}
#content_wrap{
position: relative;
overflow: hidden;
font-size: 3.1vw;
line-height: 1.8;
color: #020202;
}
#content_wrap p{
font-family: 游ゴシック体, YuGothic, 游ゴシック Medium, Yu Gothic Medium, 游ゴシック, Yu Gothic, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Hiragino Kaku Gothic ProN, メイリオ, Meiryo, sans-serif;
font-weight: 600;
}
#content_wrap > section{
text-align: center;
}

/* ▽ SP ▽======================================================================================================================================================== */
/*====================
base
====================*/
.inner{
padding: 0 5vw;
}

/*====================
ローディング画面
====================*/
#loading{
width: 100%;
height: 100%;
position: fixed;
top: 0;
left: 0;
z-index: 9999;
background: #20120f;
}
#loading img{
width: 44vw;
position: absolute;
top: calc(50% - 10vw);
left: calc(50% - 22vw);
-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;}
90% {opacity:1;}
100% {opacity:1;}
}
@-moz-keyframes blink{
0% {opacity:0;}
90% {opacity:1;}
100% {opacity:1;}
}
@keyframes blink{
0% {opacity:0;}
90% {opacity:1;}
100% {opacity:1;}
}

/*====================
位置固定ナビ
====================*/
#mchoco_header{
background: #20120f;
border-top: solid 0.8vw #bea370;
position: absolute;
z-index: 600;
width: 100%;
font-size: 2.8vw;
}
#mchoco_header .inner{
padding: 0;
}
#mchoco_header h1{
padding: 2.5vw 25vw 2.1vw;
}
#mchoco_header.fixed{
position: fixed;
top: 0;
transition: 0.4s;
width: 100%;
background: #20120f;
}
#mchoco_header:after,
#mchoco_header.fixed:after{
content: "";
display: block;
width: 100%;
height: 2.6vw;
background: url(/products/brand/mchoco/images/wave_br.png) repeat-x;
background-size: contain;
background-position: top center;
position: absolute;
margin-top: -4px;
}
#mchoco_header .nav_menu p,
#mchoco_header .nav_menu a{
color: #ffffff !important;
font-weight: 100 !important;
padding: 4vw 0 3.9vw;
}
#mchoco_header .nav_menu p:hover,
#mchoco_header .nav_menu a:hover{
color: #bdb8b7 !important;
}
.nav_menu{
display: flex;
flex-wrap: wrap;
justify-content: space-between;
margin-bottom: -0.2vw;
}
.nav_menu li{
width: calc(100% / 3);
line-height: 1;
text-align: center;
}
.nav_menu li p{
position: relative;
}
.nav_menu li p:after{
display: block;
content: "";
width: 1px;
height: 3vw;
background: #7c7472;
position: absolute;
right: 0;
top: calc(50% - 1.5vw);
}
.nav_menu li:last-child p:after{
display: none;
}
/*.nav_menu li:nth-child(3) p:before,
.nav_menu li:last-child p:before{
display: block;
content: "";
width: 3vw;
height: 1px;
background: #7c7472;
position: absolute;
left: calc(50% - 1.5vw);
top: 0;
}*/

/*====================
ブランドフッター
====================*/
#mchoco_footer{
position: relative;
}
.sns{
display: flex;
justify-content: center;
margin-bottom: 20vw;
}
.sns li{
width: 11.8vw;
}
.sns li:not(:first-child){
margin-left: 5vw;
}
.bnr_wrap{
background: url("/products/brand/mchoco/images/bg_footer.png"), #25120d;
background-position: center center, center center;
background-repeat: repeat, repeat;
background-size: 70px 70px, auto;
position: relative;
/*padding: 11vw 0 6.6vw; 1列時*/
padding: 8vw 0 3.6vw;
}
.bnr_wrap .inner {
/*padding: 0 10.6vw; 1列時*/
padding: 0 5vw;
}
.bnr_list{
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.bnr_list li{
width: 48%;
margin-bottom: 4vw;
}

/*====================
ページトップ
====================*/
.pagetop{
position: fixed;
bottom: 20vw;
right: 3vw;
width: 11.8vw;
height: 11.8vw;
text-indent: -9999px;
background-color: #37230f;
background-image: url(/products/brand/mchoco/common/images/btn_pagetop.png);
background-repeat: no-repeat;
background-position: top left;
background-size: contain;
border-radius: 50vw;
z-index: 400;
}
.pagetop a{
display: block;
}

/*====================
マウスオーバー
====================*/
.sns li a:hover,
.bnr_list li:hover,
.pagetop:hover{
opacity: 0.7;
}

/*====================
モーダル：閉じる・左右ボタン
====================*/
.mfp-close{
width: 7.8vw !important;
height: 7.8vw !important;
font-size: 0 !important;
position: absolute;
top: -10.7vw !important;
right: 0 !important;
background: url("/products/brand/mchoco/common/images/btn_close.png") no-repeat center / contain !important;
}
.popup-modal-prev,
.popup-modal-next{
width: 11vw;
height: 11vw;
text-indent: -9999px;
border: none;
cursor: pointer;
z-index: 300;
}
.popup-modal-prev{
background-color: #bea370;
background-image: url(/products/brand/mchoco/common/images/btn_prev.png);
background-repeat: no-repeat;
background-position: top left;
background-size: contain;
border-radius: 50vw;
}
.popup-modal-next{
background-color: #bea370;
background-image: url(/products/brand/mchoco/common/images/btn_next.png);
background-repeat: no-repeat;
background-position: top left;
background-size: contain;
border-radius: 50vw;
}

/*====================
スライダー：Slick
====================*/
.slick-dots li{
text-indent: -9999px;
background: #37230f;
width: 3vw;
height: 3vw;
cursor: pointer;
border-radius: 50vw;
}
.slick-dots li.slick-active{
background: #bb1111	;
}
.slick-prev,
.slick-next{
width: 11vw;
height: 11vw;
text-indent: -9999px;
border: none;
cursor: pointer;
z-index: 300;
}
.slick-prev{
background-color: #bea370;
background-image: url(/products/brand/mchoco/common/images/btn_prev.png);
background-repeat: no-repeat;
background-position: top left;
background-size: contain;
border-radius: 50vw;
}
.slick-next{
background-color: #bea370;
background-image: url(/products/brand/mchoco/common/images/btn_next.png);
background-repeat: no-repeat;
background-position: top left;
background-size: contain;
border-radius: 50vw;
}

/*====================
動画モーダル
====================*/
#modal_movie{
position: relative;
background: #fff;
width: auto;
max-width: 800px;
margin: 0 auto;
}
button.mfp-arrow{
display: none;
}
.mfp-iframe-scaler iframe {
box-shadow: 0 0 0 rgba(0, 0, 0, 0);
}
.mfp-figure:after {
box-shadow: 0 0 0 rgba(0, 0, 0, 0);
}

/* ▽ PC ▽======================================================================================================================================================== */
/* 768px～ For PC
====================================================*/
@media screen and (min-width: 768px), print{
.isSP {
display: none;
}
.isPC {
display: block;
}
body{
min-width: 950px;
}
body{
min-width: 950px;
}
.inner{
width: 880px;
margin: 0 auto;
padding: 0 0 !important;
}
.txt_eng{
font-size: 52px !important;
}
.txt_information{
font-size: 12px !important;
}

/*====================
コンテンツ
====================*/
#content_wrap,
#content_wrap p{
font-size: 16px;
}

/*====================
ローディング画面
====================*/
#loading img{
width: 334px;
top: calc(50% - 100px);
left: calc(50% - 167px);
}

/*====================
位置固定ナビ
====================*/
#mchoco_header{
border-top: solid 5px #bea370;
}
#mchoco_header .inner{
width: 944px;
}
#mchoco_header h1{
width: 334px;
margin: 0 auto;
line-height: 0;
padding: 21px 0 9px;
}
#mchoco_header:after,
#mchoco_header.fixed:after{
height: 20px;
background-position: 361px top;
}
#mchoco_header .nav_menu p,
#mchoco_header .nav_menu a{
padding: 17px 0 17px;
}
.nav_menu{
padding-bottom: 6px;
}
.nav_menu li{
width: calc(100% / 3);
}
.nav_menu li:first-child p:before{
display: block;
content: "";
background: #7c7472;
position: absolute;
width: 1px;
height: 18px;
left: 0;
top: calc(50% - 9px);
}
.nav_menu li p:after{
width: 1px;
height: 18px;
top: calc(50% - 9px);
}
.nav_menu li:last-child p:after{
display: block;
}
/*.nav_menu li:last-child p:after{
display: none;
}
.nav_menu li:nth-child(3) p:before,
.nav_menu li:last-child p:before{
display: none;
}*/

/*====================
ブランドフッター
====================*/
.sns {
margin-bottom: 118px;
}
.sns li {
width: 66px;
}
.sns li:not(:first-child) {
margin-left: 34px;
}
.bnr_wrap{
/*padding: 63px 0 30px; 2列時*/
padding: 54px 0 24px;
}
.bnr_wrap .inner {
/*width: 840px; 2列時*/
width: 910px;
}
.bnr_list{
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.bnr_list li{
margin-bottom: 24px;
/*width: 400px;2列時*/
width: 290px;
}
.bnr_list:after {
display: block;
content:"";
width: 290px;
}

/*====================
ページトップ
====================*/
.pagetop{
bottom: 20px;
right: 40px;
width: 66px;
height: 66px;
}

/*====================
モーダル：閉じる・左右ボタン
====================*/
.mfp-close{
width: 54px !important;
height: 54px !important;
top: -70px !important;
right: 0 !important;
}
.popup-modal-prev,
.popup-modal-next{
width: 80px;
height: 80px;
}

/*====================
スライダー：Slick
====================*/
.slick-dots li{
width: 15px;
height: 15px;
}
.slick-prev,
.slick-next{
width: 80px;
height: 80px;
}
}