@charset "utf-8";
/* CSS Document */
/* ▽ SP ▽======================================================================================================================== */
html {
overscroll-behavior: none;
}
/*====================
メインビジュアル
====================*/
#mainvisual{
padding-top: 10vw;
}

/*====================
バナー掲載などの特別枠
====================*/
#information_area{
padding: 11.6vw 0;
background: url("/products/brand/mchoco/images/bg_movie.jpg");
background-position: top center;
background-repeat: repeat;
background-size: auto;
position: relative;
border-top: 1px solid #d3c2a2;
}
#information_area:before{
content: "";
position: absolute;
top: 4px;
left: 0;
width: 100%;
height: 1px;
background-color: #e7dfd1;
}
.info_bnr li{
margin-bottom: 6vw;
}
.info_bnr li:last-child{
margin-bottom: 0;
}

/*====================
商品紹介
====================*/
#products{
padding: 16.3vw 0 9.3vw; 
background: url("/products/brand/mchoco/images/prod_choco.png"), url("/products/brand/mchoco/images/bg_products.jpg");
background-position: -82.2vw -2vw, center top;
/*background-position: -83.8vw -2.6vw, center top;*/
background-repeat: repeat-x, repeat;
background-size: 255vw, auto;
/*background-size: 260vw, auto;*/
position: relative;
}
.choco_l1{
position: absolute;
top: 21.9vw;
left: 4.2vw;
width: 22.4255vw;
z-index: 10;
}
.choco_l2{
position: absolute;
top: 154.2vw;
left: -8.6vw;
width: 22.557vw;
z-index: 10;
}
.choco_r1{
position: absolute;
top: 4.9vw;
right: -3.3vw;
width: 35.7255vw;
z-index: 10;
}
.choco_r2{
position: absolute;
top: 112.5vw;
right: -11.2vw;
width: 23.078vw;
z-index: 10;
}
#products .txt_eng{
color: #37230f;
}
#products h2{
color: #d42a2a;
font-size: 3.2vw;
position: relative;
margin-bottom: 8vw;
}
#products h2:after{
content: "";
display: block;
width: 12vw;
height: 0.4vw;
background-color: #d42a2a;
position: absolute;
bottom: -1.7vw;
left: calc(50% - 6vw);
}
.toggle_contents{
background: #ffffff;
margin-bottom: 6vw;
}
.toggle_title{
position: relative;
background: #bea370;
cursor: pointer;
padding: 2.7vw 4vw 2.3vw;
}
#products h3 p{
font-size: 3.3vw;
line-height: 1;
color: #37230f;
}
.toggle_btn{
position: absolute;
top: 50%;
right: 2vw;
transform: translateY(-50%);
display: block;
width: 4vw;
height: 4vw;
white-space: nowrap;
overflow: hidden;
}
.toggle_btn:before, .toggle_btn:after{
display: block;
content: '';
background-color: #37230f;
position: absolute;
width: 3vw;
height: 0.3vw;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.toggle_btn:before{
width: 0.3vw;
height: 3vw;
}
.toggle_title.selected .toggle_btn:before{
content: normal;
}
.toggle_contents dd{
display: none;
}
.toggle_contents:first-of-type dd{
display: block;
}
.products_list{
display: flex;
flex-wrap: wrap;
padding: 3vw 3vw 5vw;
}
.products_list li{
width: calc(50% - 1vw);
margin-top: 3vw;
}
.products_list li img{
width: 31vw;
margin: 2vw 0;
}
.products_list li .adjust_plus_pc img{
margin: 2vw 0;
}
.products_list li .adjust_plus_sp img{
margin: 4.2vw 0 2vw;
}
#type_bar li img,
#type_stick li img{
margin: 0;
}
.products_list a{
color: #1c100d;
}

/*====================
動画
====================*/
#movies{
padding: 14.6vw 0 41.2vw;
background: url("/products/brand/mchoco/images/bg_movie.jpg");
background-position: top center;
background-repeat: repeat;
background-size: auto;
position: relative;
border-top: 1px solid #d3c2a2;
}
#movies:before{
content: "";
position: absolute;
top: 4px;
left: 0;
width: 100%;
height: 1px;
background-color: #e7dfd1;
}
#movies .inner{
padding: 0 10.5vw;
}
#movies .txt_eng{
color: #37230f;
}
#movies h2{
color: #d42a2a;
font-size: 3.2vw;
position: relative;
}
#movies h2:after{
content: "";
display: block;
width: 12vw;
height: 0.4vw;
background-color: #d42a2a;
position: absolute;
bottom: -1.7vw;
left: calc(50% - 6vw);
}
.movies_list{
margin-top: 9.5vw;
}
.movies_list li{
margin-bottom: 10.3vw;
}
.ttl_movies{
margin: 2.5vw 0;
}
.thumb{
border: 6px solid #bea370;
}
.movies_list .btn_movies{
display: flex;
flex-wrap: wrap;
justify-content: center;
margin: 4vw auto 0;
}
.movies_list .btn_movies li{
margin: 0 1.2vw 3.2vw;
}
.movies_list .btn_movies a{
display: block;
background: #c9b389;
border-radius: 50vw;
padding: 1.8vw 2vw;
color: #37230f !important;
line-height: 1;
}
.movies_list .btn_usually a{
width: 19vw;
}
.movies_list .btn_irregular a{
width: 19vw;
}
.movies_list .btn_irregular li:nth-child(-n+2) a{
width: 25.6vw;
}
/*▽ IE用設定 ▽*/
_:-ms-fullscreen, :root .movies_list .btn_movies a{
padding: 2.4vw 2vw 1.2vw;
}

/*====================
ブランドフッター
====================*/
#mchoco_footer {
margin-top: -34vw;
}

/*====================
商品詳細モーダル
====================*/
.products_modal{
position: relative;
width: 88.8vw;
margin: 0 auto;
background: #ffffff;
border: solid 0.7vw #bea370;
text-align: center;
color: #020202;
user-select: none;
-webkit-user-select: none;
}
.products_modal h3{
background: #bea370;
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-size: 3.3vw;
padding: 1.4vw 4vw;
}
.products_modal .popup-modal-prev{
position: absolute;
top: calc(50% - 5.5vw);
left: -5.6vw;
}
.products_modal .popup-modal-next{
position: absolute;
top: calc(50% - 5.5vw);
right: -5.6vw;
}
.products_detail{
padding: 9vw 10vw 10vw;
}
.products_detail li.note{
text-indent: -1em;
padding-left: 1em;
}
.pkg img{
width: 58vw;
margin-bottom: 4vw;
}
.products_detail 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-size: 3vw;
text-align: left;
}

/*====================
マウスオーバー
====================*/
.products_list a:hover img,
.products_list a:hover p,
.movies_list a:hover img,
.movies_list a:hover{
opacity: 0.7;
}

/*====================
フローティングバナー
====================*/
.float_99annive {
position: fixed;
width: calc(100%*624/767);
bottom: 0;
left: 0;
transition: all 0.3s;
z-index: 100;
}
.is-scrollEnd .float_99annive {
opacity: 0;
}

/* ▽ PC ▽======================================================================================================================== */
/* 768px～ For PC
====================================================*/
@media screen and (min-width: 768px), print{
/*====================
メインビジュアル
====================*/
#mainvisual{
padding-top: 106px;
}
.kv{
background: url("/products/brand/mchoco/images/kv_pc.png") no-repeat center top;
height: 780px;
}

/*====================
バナー掲載などの特別枠
====================*/
#information_area{
padding: 84px 0;
}
.info_bnr li{
margin-bottom: 50px;
}
.info_bnr li:last-child{
margin-bottom: 0;
}

/*====================
商品紹介
====================*/
#products{
padding: 109px 0 20px;
background: url("/products/brand/mchoco/images/prod_choco.png"), url("/products/brand/mchoco/images/bg_products.jpg");
background-position: center -14px, center top;
background-repeat: repeat-x, repeat;
background-size: 2000px, auto;
}
.choco_l1{
top: 127px;
left: calc(50% - 443px);
width: 172px;
}
.choco_l2{
top: 793px;
left: calc(50% - 621px);
width: 173px;
}
.choco_r1{
top: 48px;
right: calc(50% - 459px);
width: 274px;
}
.choco_r2{
top: 992px;
right: calc(50% - 627px);
width: 177px;
}
#products .inner{
width: 910px;
}
#products h2{
font-size: 14px !important;
margin-bottom: 61px;
}
#products h2:after{
width: 82px;
height: 3px;
bottom: -17px;
left: calc(50% - 41px);
}
.toggle_contents{
margin-bottom: 60px;
}
.toggle_title{
padding: 18px 10px 15px;
}
#products h3 p{
font-size: 17px;
}
.toggle_btn{
right: 20px;
width: 40px;
height: 40px;
}
.toggle_btn:before, .toggle_btn:after{
width: 20px;
height: 2px;
}
.toggle_btn:before{
width: 2px;
height: 20px;
}
.products_list{
padding: 4px 14px 24px;
}
.pc_center{
justify-content: space-evenly;
}
.products_list li{
width: calc(100% / 5);
margin-top: 14px;
}
.products_list li img{
width: 140px;
margin: 18px 0 16px;
}
.products_list li .adjust_plus_sp img{
margin: 18px 0 16px;
}
.products_list li .adjust_plus_pc img{
margin: 27px 0 16px;
}
.products_list p{
font-size: 14px !important;
line-height: 1.5;
}

/*====================
動画
====================*/
#movies{
padding: 84px 0px 291px;
}
#movies .inner{
width: 920px;
}
#movies h2{
font-size: 14px !important;
}
#movies h2:after{
width: 82px;
height: 3px;
bottom: -17px;
left: calc(50% - 41px);
}
.movies_list{
margin-top: 33px;
display: flex;
flex-wrap: wrap;
justify-content: space-around;
}
.movies_list li{
margin-bottom: 36px;
/*width:calc(100%/2)*/
width: 420px;
}
.ttl_movies{
margin: 12px 0 8px;
}
.thumb{
border: 5px solid #bea370;
}
.movies_list .btn_movies{
margin: 18px auto 0;
}
.movies_list .btn_movies li{
margin: 0 0 17px;
/*width: calc(100%/3);*/
width: 140px;
}
.movies_list .btn_irregular li:nth-child(-n+2){
/*width: calc(100%/2);*/
width: 176px;
}
.movies_list .btn_movies a{
border-radius: 100px;
padding: 13px 4px 11px;
}
.movies_list .btn_usually a{
width: 118px;
margin: 0 auto;
}
.movies_list .btn_irregular a{
width: 118px;
margin: 0 auto;
}
.movies_list .btn_irregular li:nth-child(-n+2) a{
width: 154px;
}
/*▽ IE用設定 ▽*/
_:-ms-fullscreen, :root .movies_list .btn_movies a{
padding: 14px 4px 8px;
}
/*====================
ブランドフッター
====================*/
#mchoco_footer {
margin-top: -222px;
}

/*====================
商品詳細モーダル
====================*/
.products_modal{
width: 760px;
border: solid 5px #bea370;
user-select: none;
-webkit-user-select: none;
}
.products_modal h3{
font-size: 24px;
padding: 14px 0;
}
.products_detail{
padding: 56px 100px;
}
.pkg img{
width: 370px;
margin-bottom: 34px;
}
.products_detail p{
font-size: 16px;
}
.mfp-close {
width: 54px !important;
height: 54px !important;
top: -70px !important;
right: 0 !important;
}
.products_modal .popup-modal-prev{
top: calc(50% - 30px);
left: -60px;
}
.products_modal .popup-modal-next{
top: calc(50% - 30px);
right: -60px;
}

/*====================
フローティングバナー
====================*/
.float_99annive {
width: 300px;
}
}

/* ▽ タブレット ▽======================================================================================================================== */
/* タブレット＝PCだと調整が必要なもの
====================================================*/
@media all and (min-width: 768px) and (max-width: 960px){
#products .inner{
width: 840px !important;
}
.products_box h3 {
margin: 0 285px;
}
.choco_l2{
left: calc(50% - 567px);
}
.choco_r2{
right: calc(50% - 570px);
}
}