@charset "UTF-8";
@import "/mc45th/common/css/reset.css";
@import "/mc45th/common/css/common.css";

/**************************************************/
/* index.html */
/**************************************************/
#loop-shadow{bottom:auto;height:0;}
body:before,
body:after{content:'';display:block;position:fixed;top:0;margin:50px auto 0;padding:0;}
body:before{left:50%;width:1498px;padding-top:679px;background:url("/mc45th/susume/img/body-img.png") center top no-repeat;background-size:100% auto;transform:translateX(-50%);z-index:2;}
body:after{left:0;bottom:0;width:100%;background:url("/mc45th/susume/img/body-bg.png") center top repeat;background-size:271px auto;z-index:1;}

.sectionBox:before,
.sectionBox:after{content:none;}

#bg-main{width:100%;max-width:750px;padding-top:100%;background:#d1ebe7;position:absolute;top:0;left:50%;transform:translateX(-50%);z-index:1;}


/* メイン */
/**************************************************/
#main{}
#main:before{content:'';display:block;width:707px;position:fixed;top:0;left:50%;margin:50px  auto 0;padding-top:200px;background:url("/mc45th/susume/img/body-deco.png") center top no-repeat;background-size:100% auto;transform:translateX(-50%);z-index:3;}
#main .sectionBox{z-index:4;}

.wrapper{position:relative;z-index:2;}
.wrapper img{margin:0 auto;}

.btn{margin:0 auto;padding:0;}
.btn a{display:block;position:relative;}
.btn a:before{content:'';display:block;font-size:20px;position:relative;padding:0;box-sizing:border-box;z-index:1;}
.btn a img{position:absolute;top:0;left:0;width:100%;margin:0 auto;z-index:2;}
.btn a:hover img{opacity:0.8;}

.layout{position:relative;margin:0 auto;padding:0;}
.layout:after{content:'';display:block;clear:both;}
.layout-box{margin:0 auto;padding:0;}

.sectionLayout h2{position:relative;width:92.8%;margin:0 auto 5.334%;}
.sectionLayout h2:before{content:'';display:block;position:relative;padding:20.115% 0 0;}
.sectionLayout h2 img{position:absolute;top:0;left:0;width:100%;margin:0 auto;}


/* kv */
/**************************************************/
#kv{margin-top:50px;z-index:4;}
.kv-frame{}

.kv-scene{width:100%;padding:1.067% 0 1.8667%;}
.kv-scene p{margin:0 auto;}

.kv-scene p.kv-ttl{width:84.8%;}
.kv-scene p.kv-txt{width:89.734%;margin:1.3334% 0 0.9334% 5.201%;}
.kv-scene p.kv-img{width:75.3334%;margin-left:17.8667%;}
#lead-bnr{width:92.5334%;margin-left:3.7334%;}


/* ページ内アンカー */
/**************************************************/
#charm-index{padding:4.8% 0 4.267%;background:#d1ebe7;}

.index-wrap{width:92.5334%;margin:0 auto;padding:6.4% 0 6.134%;background:url(/mc45th/susume/img/index-bg.png) no-repeat center;background-size:100% 100%;}
.index-wrap p{width:12.825%;margin:0 auto 5.332%;}
.index-wrap ul{width:84.15%;margin:0 auto;}
.index-wrap li + li{margin-top:2.398%;}
.index-wrap li a:hover img{opacity:0.7;}


/* 管理栄養士が解説「大人のためのミッキャロ講座」 */
/**************************************************/
#charm01{padding:4.267% 0 10.267%;background:#d1ebe7;}
#charm01-ttl img{width:101.0058%;}
#charm01-text01{margin-bottom:8.401%;}

#charm01-box01{}
#charm01-box01 p{width:89.334%;margin:0 auto;position:relative;}
#charm01-box01 p + p{margin-top:12.667%;}
#charm01-box01 p:nth-of-type(3){width:90.934%;margin-left:3.734%;}
#charm01-box01 .point03-link{width:40%;padding-top:4%;margin:0 0 48% 31%;position:absolute;bottom:0;left:0;}
#charm01-box01 .point03-link:before{content:'';display:block;position:absolute;top:0;left:0;bottom:0;width:100%;background-color:#FFF;opacity:0;}
#charm01-box01 .point03-link:hover:before{opacity:0.3;}


/* こんなときに飲みたい！ */
/**************************************************/
#charm02{padding:12% 0 8.534%;background:#fff0cc url(/mc45th/susume/img/charm-line.png) no-repeat top center;background-size:100% auto;}
#charm02-ttl img{top:auto;bottom:0;}

#charm02-img01{width:63.3334%;margin-left:20.534%;}
#charm02-img02{width:97.0667%;margin:3.334% 0 0 0;}
#charm02-img03{width:86.934%;margin:4% 0 0 3.067%;}


/* 組合員の声 */
/**************************************************/
#charm03{padding:12% 0 11.0667%;background:#fdece9 url(/mc45th/susume/img/charm-line.png) no-repeat top center;background-size:100% auto;}

#charm03-img01{position:relative;width:100%;margin:5.4667% auto 0;}
#charm03-img01:before{content:'';display:block;position:relative;padding:64% 0 0;z-index:1;}
#charm03-img01 img{position:absolute;top:0;left:2.2667%;width:95.3334%;margin:0 auto;z-index:2;}
#charm03-img02{width:94.4%;margin:3.2% 0 0 1.6%;}


/* 教えて！ミックスキャロット */
/**************************************************/
#charm04{padding:13.067% 0 8.267%;background:#dbebc4 url(/mc45th/susume/img/charm-line.png) no-repeat top center;background-size:100% auto;}

#charm04-ttl{margin-bottom:7.4667%;}
#charm04-ttl img{width:101.0058%;}

#charm04-img01{width:97.2%;margin:6% 0 0 2%;}
#charm04-img02{width:98%;margin:6.134% 0 0 2%;}
#charm04-img03{width:89.0667%;margin:2% 0 0 6.4%;}


/* 大人がうれしいミッキャロレシピ */
/**************************************************/
#charm05{padding:10.267% 0 7.867%;background:#fce5ce url(/mc45th/susume/img/charm-line.png) no-repeat top center;background-size:100% auto;}

#charm05-btn{display:flex;justify-content:center;flex-wrap:wrap;margin:6.667% 0 0%;}
.charm05-box{width:37.467%;margin:0 5.734% 0%;}
.charm05-box:nth-of-type(1),
.charm05-box:nth-of-type(2){margin-bottom:8.667%;}
.charm05-box a:hover img{opacity:0.8;}


/* 大人のミッキャロラインアップ */
/**************************************************/
#charm06{padding:11.0667% 0 2.134%;border-bottom-width:3px;background:#fffbe0 url(/mc45th/susume/img/charm-line.png) no-repeat top center;background-size:100% auto;}

#charm06-ttl{margin-bottom:6%;}

#charm06-img01{width:87.334%;margin:1.867% 0 0 8.4%;}


/* SNSボタン */
/**************************************************/
#sns{position:relative;padding:6.4% 0 10.6667%;background:#d1ebe7 url(/mc45th/susume/img/charm-line.png) no-repeat top center;background-size:100% auto;;}
#sns:after{content:'';display:block;clear:both;}

#sns-text{width:52.9334%;margin:0 auto 11.0667%;margin-left:23.4667%;}

#sns div.btn p{width:5.3334%;float:left;margin-left:9.3334%;}
#sns div.btn p:first-child{margin-left:24.8%;}
#sns div.btn p a:before{padding-top:100%;}


/* 関連リンク */
/**************************************************/
#link{position:relative;padding-bottom:6%;background:#d1ebe7;}

#link p.btn{width:36%;padding-bottom:3.7334%;}
#link p.btn a:before{padding-top:19.6297%;}
#link p.btn a img{left:-0.3704%;width:101.8519%;}


/* コピーライト */
/**************************************************/
#copyright{background:#e28e3a;}
#copyright .sectionLayout{background:none;}
#copyright .sectionLayout p{color:#fff;}


/* ポップアップ */
/**************************************************/
#popup{position:fixed;top:0;left:0;width:100%;height:0;overflow:hidden;z-index:5;}
.popup-table{position:absolute;top:0;left:0;width:100%;height:100%;display:table;}
.popup-td{display:table-cell;vertical-align:middle;}
.popup-layout{width:66.6667%;max-width:500px;margin:70px auto;background-color:#FFF;position:relative;z-index:2;background-repeat:no-repeat;background-position:center;background-size:100% auto;}
.popup-layout:before{content:'';display:block;padding-top:100%;position:relative;z-index:1;}
.popup-layout .perfectScroll{position:absolute;left:0;top:0;bottom:0;display:block;width:100%;overflow:hidden;z-index:2;}
.ps-scrollbar-y-rail{right:0!important;}

.popup-contents{}
.popup-contents p{display:none;width:100%;margin:0 auto;}
.popup-contents p img{width:100%;height:auto;}

.popup-close{position:absolute;top:0;right:0;width:14.4%;margin:2.2% 2% 0 0;z-index:3;}
.popup-close a{display:block;}
.popup-close a img{display:block;width:100%;height:auto;}
.popup-close a:hover img{opacity:0.8;}

#popup-bg{position:absolute;top:0;left:0;width:100%;height:100%;z-index:1;background-color:#000;opacity:0.5;}

body.popup #popup{height:100%;}
body.popup{position:fixed;width:100%;overflow-y:scroll;}


/**************************************************/


@media print, screen and (max-width: 750px) {

body:before{display:none;}
body:after{left:0;width:100%;margin-top:13.3334%;margin-bottom:-50%;background-image:url("/mc45th/susume/img/sp/body-bg.png");background-size:36.1334% auto;}


/* メイン */
/**************************************************/
#main{}
#main:before{content:none;}

.btn a:before{font-size:2.6667vw;}

.sectionLayout h2{margin-bottom:0;}
.sectionLayout h2:before{padding-top:23.1322%;}


/* kv */
/**************************************************/
#kv{margin-top:13.3334%;}

.kv-scene{padding:0.8% 0 7.4667%;}

.kv-scene p.kv-ttl{width:93.4667%;}
.kv-scene p.kv-txt{width:98.6667%;margin:0.1334% 0 0 1.3334%;}
.kv-scene p.kv-img{display:none;}
#lead-bnr{position:relative;width:100%;margin-left:0;}
#lead-bnr:before{content:'';display:block;position:relative;padding:50.1334% 0 0;z-index:1;}
#lead-bnr img{position:absolute;left:3.7334%;bottom:0;width:92.5334%;z-index:2;}


/* ページ内アンカー */
/**************************************************/
#charm-index{padding:9.3334% 0 4.8%;}
.index-wrap{margin-top:0;padding:5.8667% 0 6.5334%;background-image:url(/mc45th/susume/img/sp/index-bg.png);}
.index-wrap p{width:15.2738%;margin-bottom:6.6283%;}
.index-wrap ul{width:91.6427%;}
.index-wrap li + li{margin-top:3.4592%;}


/* 管理栄養士が解説「大人のためのミッキャロ講座」 */
/**************************************************/
#charm01{padding:4.6667% 0 11.3334%;}
#charm01-ttl{margin-bottom:6.2667%;}
#charm01-ttl:before{padding-top:30.6035%;}
#charm01-text01{margin-bottom:6.5334%;}

#charm01-box01 p{width:87.4667%;}
#charm01-box01 p:before{content:'';display:block;position:relative;padding:0;z-index:1;}
#charm01-box01 p img{position:absolute;top:0;left:0;width:100%;z-index:2;}
#charm01-box01 p + p{margin-top:8.8%;}
#charm01-box01 p:nth-of-type(1):before{padding-top:255.183%;}
#charm01-box01 p:nth-of-type(1) img{left:-4.7257%;width:107.0122%;}
#charm01-box01 p:nth-of-type(2):before{padding-top:240.5488%;}
#charm01-box01 p:nth-of-type(2) img{left:-7.1647%;width:109.4513%;}
#charm01-box01 p:nth-of-type(3){width:87.4667%;margin-left:auto;}
#charm01-box01 p:nth-of-type(3):before{padding-top:296.6464%;}
#charm01-box01 p:nth-of-type(3) img{left:-4.5732%;width:108.8415%;}
#charm01-box01 .point03-link{width:34.6037%;padding-top:9.7561%;margin:0 0 59.6037% 41.0061%;z-index:3;}


/* こんなときに飲みたい！ */
/**************************************************/
#charm02{padding:11.3334% 0 10.6667%;background-image:url(/mc45th/susume/img/sp/charm-line.png);}
#charm02-ttl{margin-bottom:3.8667%;}

#charm02-img01{width:79.7334%;margin:1.0667% 0 0 15.0667%;}
#charm02-img02{width:96.9334%;margin:1.8667% 0 0 0;}
#charm02-img03{width:84.2667%;margin:3.3334% 0 0 5.6%;}


/* 組合員の声 */
/**************************************************/
#charm03{padding:12.4% 0 8.8%;background-image:url(/mc45th/susume/img/sp/charm-line.png);}
#charm03-ttl{margin-bottom:5.3334%;}

#charm03-img01{margin-top:5.8667%;}
#charm03-img01:before{padding-top:80.2667%;}
#charm03-img01 img{left:4.1334%;width:92.6667%;}
#charm03-img02{width:95.0667%;margin:0 0 0 1.8667%;}


/* 教えて！ミックスキャロット */
/**************************************************/
#charm04{padding:11.6% 0;background-image:url(/mc45th/susume/img/sp/charm-line.png);}
#charm04-ttl{margin-bottom:6.8%;}
#charm04-ttl img{width:101.0058%;}

#charm04-img01{width:100%;margin:0.9334% 0 0 0;}
#charm04-img02{width:97.7334%;margin:6% 0 0 2.2667%;}
#charm04-img03{width:93.4667%;margin:1.3334% 0 0 3.8667%;}


/* 大人がうれしいミッキャロレシピ */
/**************************************************/
#charm05{padding:11.2% 0 7.867%;background-image:url(/mc45th/susume/img/sp/charm-line.png);}
#charm05-ttl{margin-bottom:4.2667%;}

#charm05-btn{margin-top:4.4%;}
.charm05-box{width:37.601%;margin:0 4.9334%;}
.charm05-box:nth-of-type(odd){width:37.4667%;}
.charm05-box:nth-of-type(1),
.charm05-box:nth-of-type(2){margin-bottom:4%;}


/* 大人のミッキャロラインアップ */
/**************************************************/
#charm06{padding:11.0667% 0 5.6%;border-bottom-width:0;background-image:url(/mc45th/susume/img/sp/charm-line.png);}
#charm06-ttl{margin-bottom:4.4%;}

#charm06-img01{width:94%;margin:6.6667% 0 0 5.4667%;}


/* SNSボタン */
/**************************************************/
#sns{padding:6.2667% 0 12.6667%;background-image:url(/mc45th/susume/img/sp/charm-line.png);}

#sns-text{width:74.6667%;margin-bottom:14%;margin-left:12.5334%;}

#sns div.btn p{width:8%;margin-left:6.6667%;}
#sns div.btn p:first-child{margin-left:24%;}


/* 関連リンク */
/**************************************************/
#link{padding-bottom:5.7334%;}

#link p.btn{width:72.8%;padding-bottom:6.1334%;}
#link p.btn a:before{padding-top:16.4836%;}
#link p.btn a img{width:100.9158%;}


/* ポップアップ */
/**************************************************/
.popup-layout{width:100%;max-width:750px;margin:9.3334% auto;}

.popup-close{right:1.3334%;width:6.8%;margin-bottom:1.3334%;}
.popup-close a:hover img{opacity:1;}

}


/**************************************************/