@charset "utf-8";
/* Base style configurations for Morinaga Milk Industry */
/* INITIALIZE
==================================================== */
body{margin:0; padding:0; overflow:visible;}
html,body{height:100%;}
#mmi-header *,
#mmi-footer *,
#mmi-container *:not(.vjs-big-play-button){margin:0;padding:0; -moz-box-sizing:border-box; -webkit-box-sizing:border-box; box-sizing:border-box;}
#mmi-container .customer-container button,#mmi-container .customer-index button,#mmi-container .customer-container input,#mmi-container .recipe-search-box button,#mmi-container .sitesearch-container button,#mmi-container .errorpage button{margin:0;padding:0; border:0;background:transparent;-moz-box-sizing:border-box; -webkit-box-sizing:border-box; box-sizing:border-box;}

#mmi-header article,#mmi-header aside,#mmi-header details,#mmi-header figcaption,#mmi-header figure,#mmi-header footer,#mmi-header header,#mmi-header hgroup,#mmi-header menu,#mmi-header nav,#mmi-header section,#mmi-header main,
#mmi-footer article,#mmi-footer aside,#mmi-footer details,#mmi-footer figcaption,#mmi-footer figure,#mmi-footer footer,#mmi-footer header,#mmi-footer hgroup,#mmi-footer menu,#mmi-footer nav,#mmi-footer section,#mmi-footer main,
#mmi-container article,#mmi-container aside,#mmi-container details,#mmi-container figcaption,#mmi-container figure,#mmi-container footer,#mmi-container header,#mmi-container hgroup,#mmi-container menu,#mmi-container nav,#mmi-container section,#mmi-container main{display:block;}
#mmi-header ul li,
#mmi-footer ul li,
#mmi-container ul li{list-style:none;}
#mmi-header blockquote,
#mmi-footer blockquote,
#mmi-container blockquote,
#mmi-header q,
#mmi-footer q,
#mmi-container q{quotes:none;}
#mmi-header img,
#mmi-footer img,
#mmi-container img{border:0 none;}
#mmi-header blockquote:before,
#mmi-footer blockquote:before,
#mmi-container blockquote:before,
#mmi-header q:before,
#mmi-footer q:before,
#mmi-container q:before,
#mmi-header blockquote:after,
#mmi-footer blockquote:after,
#mmi-container blockquote:after,
#mmi-header q:after,
#mmi-footer q:after,
#mmi-container q:after{content:''; content:none;}
#mmi-container pre,
#mmi-container code,
#mmi-container kbd,
#mmi-container samp{font-family:monospace,monospace; font-size:inherit;}
#mmi-container table{border-collapse:collapse; border-spacing:0;}
#mmi-container img{border:0;}
#mmi-container address,
#mmi-container caption,
#mmi-container cite,
#mmi-container code,
#mmi-container dfn,
#mmi-container em,
#mmi-container th,
#mmi-container var{font-style:normal; font-weight:normal;}
#mmi-container caption,th{text-align:left;}
#mmi-container h1,
#mmi-container h2,
#mmi-container h3,
#mmi-container h4,
#mmi-container h5,
#mmi-container h6{font-size:100%; font-weight:normal;}
#mmi-container sup,
#mmi-container sub{font-size:75%; line-height:1; vertical-align:baseline;}
#mmi-container sup{bottom:.75ex;}
#mmi-container sub{bottom:.5ex;}
#mmi-container input,
#mmi-container textarea,
#mmi-container select{vertical-align:middle; font-family:inherit; font-size:inherit; font-weight:inherit;}
#mmi-container a{outline:none;}
#mmi-container audio:not([controls]){display:none;}
#mmi-container time{display:inline;}
#mmi-container [hidden]{display:none;}
#mmi-container input::-ms-clear,
#mmi-container input::-ms-reveal,
#mmi-container input:focus::-ms-clear,
#mmi-container input:focus::-ms-reveal{visibility:hidden; display:none;}
#mmi-container button::-moz-focus-inner,
#mmi-container input[type="reset"]::-moz-focus-inner,
#mmi-container input[type="button"]::-moz-focus-inner,
#mmi-container input[type="submit"]::-moz-focus-inner,
#mmi-container input[type="file"]>input[type="button"]::-moz-focus-inner{padding:0; border:0;}
#mmi-container input,
#mmi-container textarea,
#mmi-container select{-moz-box-sizing:border-box; -webkit-box-sizing:border-box; box-sizing:border-box;}
#mmi-container i,
#mmi-container em{font-style:normal;}

#mmi-header button.mmi-search-btn,#mmi-header input{border:0;margin:0;padding:0;background:transparent;}

#mmi-container button.slick-arrow{border:0;margin:0;padding:0;background:transparent;}

/* Anchor
==================================================== */
#mmi-footer a:link,
#mmi-container a:link{color:#0a3066; text-decoration:none;}
#mmi-footer a:visited,
#mmi-container a:visited{color:#0a3066; text-decoration:none;}
#mmi-header a:hover,
#mmi-footer a:hover,
#mmi-container a:hover{}
#mmi-container a:active{color:#000;}

#mmi-container a img,button,input[type=button],input[type=submit],input[type=reset],a div{}
#mmi-container a img:hover,a:hover img,button:hover,input[type=button]:hover,input[type=submit]:hover,input[type=reset]:hover,a div:hover{opacity:0.7;}

/* force alignment 
==================================================== */
#mmi-container .aCt{text-align:center;}
#mmi-container .aRt{text-align:right;}

/* clear element 
==================================================== */
#mmi-container .clr,
#mmi-container .clrFx{clear:both;}
#mmi-container .clrFx:after{content:''; clear:both; display:block;}
#mmi-container main,
#mmi-container article,s
#mmi-container footer{clear:both;}
#mmi-container main:after,
#mmi-container article:after,
#mmi-container section:after,
#mmi-container footer:after,
#mmi-wrapper:after,
.mmi-big-bnrs:after,
.mmi-big-bnrs ul:after{content:''; clear:both; display:block;}

/* font global 
==================================================== */
@font-face {
  font-family:'mmiicons';
  src:url(/common/fonts/mmi.woff) format('woff');
  font-weight: normal;
  font-style: normal;
}
@font-face {
   font-family:'noto';
   font-style: normal;
   font-weight: 500;
   src: url(//fonts.gstatic.com/ea/notosansjp/v5/NotoSansJP-Medium.woff) format('woff');
 }
#mmi-header input,
#mmi-header textarea,
#mmi-header select,
#mmi-header button,
#mmi-footer input,
#mmi-footer textarea,
#mmi-footer select,
#mmi-footer button,
#mmi-container input,
#mmi-container textarea,
#mmi-container select{
font-size:15px; font-family:'メイリオ',Meiryo,'Hiragino Kaku Gothic ProN','ヒラギノ角ゴ ProN W3','ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','游ゴシック Medium', 'Yu Gothic Medium', '游ゴシック体', YuGothic, Helvetica, Arial, sans-serif; color:#1e1e1e; line-height:1.75; font-weight:normal; -webkit-font-smoothing: antialiased; font-smoothing: antialiased;}
#mmi-header .icon,
#mmi-footer icon,
#mmi-container .icon,
#mmi-header *:before,
#mmi-footer *:before,
#mmi-header *:after,
#mmi-footer *:after{font-family:mmiicons;}


#mmi-container *:not(.vjs-control):not(.vjs-big-play-button):not(.vjs-icon-placeholder):before{font-family:mmiicons;}

#mmi-container *:not(.vjs-control):not(.vjs-big-play-button):after{font-family:mmiicons;}
	

	

#mmi-header .noto,
#mmi-footer .noto,
#mmi-container .noto{font-family:noto,sans-serif;}

/* script access elements
==================================================== */

/* page wrapper
==================================================== */
#mmi-wrapper{position:relative; clear:both;}
#mmi-container{}

/* page header
==================================================== */
#mmi-header{background:#fff; height:110px; background:#fff; box-shadow:0 0 10px rgba(0,0,0,.3); font-family:noto; text-align:left;}
#mmi-header .mmi-inner{width:1000px; height:110px; margin:0 auto; position:relative; overflow:hidden;}
#mmi-header #mmi-site-id{width:188px; height:44px; position:absolute; left:0; top:14px;}
#mmi-header #mmi-site-id img{width:100%; height:auto; display:block;}
#mmi-global{width:1000px; height:22px; position:absolute; left:0; bottom:14px;}
#mmi-global ul{}
#mmi-global li{width:135px; height:22px; float:left; text-align:center; font-size:15px; line-height:22px; border-right:1px #b6c7d6 solid;}
#mmi-global li:first-child{width:173px; border-left:1px #b6c7d6 solid;}
#mmi-global li:nth-of-type(4){width:148px;}
#mmi-global li a{display:block;}
#mmi-head-links{width:735px; height:30px; position:absolute; right:40px; top:16px;}
#mmi-head-links ul{text-align:right; position:absolute; top:0;}
#mmi-head-links ul.mmi-corp{right:325px;}
#mmi-head-links ul.mmi-special{right:0;}
#mmi-head-links ul li{text-align:left; display:inline-block; font-size:14px;}
#mmi-head-links ul li a{display:block; line-height:30px;}
#mmi-head-links ul li a:before{content:'\e902'; color:#f62837; font-size:11px; vertical-align:middle; margin-right:5px; position:relative; top:-1px;}
#mmi-head-links ul li a[target=_blank]:before{content:'\e90a';}
#mmi-head-links ul.mmi-corp li a[target=_blank]:before{content: '';
    background: url(/common/img/icon_global.svg) center center/contain no-repeat;
    width: 1.5em;
    height: 1.5em;
    top: -0.2em;
    display: inline-block;}
#mmi-head-links ul li.mmi-contact a,
#mmi-head-links ul li.mmi-tel a,
#mmi-head-links ul li.mmi-cm a,
#mmi-head-links ul li.mmi-shop a{border:1px #f62837 solid;height:32px;line-height:28px;border-radius:16px;padding: 0 14px;color: #f62837;}
#mmi-head-links ul li.mmi-tel{display:none;}
#mmi-head-links ul li.mmi-contact a:before{content:'\e901'; font-size:16px;}
#mmi-head-links ul li.mmi-cm{margin-right:0;}
#mmi-head-links ul li.mmi-cm a:before{content:''; width:24px; height:24px; background:url(/common/img/moorii.png) no-repeat center center; background-size:24px auto; display:inline-block; top:0;}
#mmi-header .mmi-site-search{width:30px; height:30px; position:absolute; top:16px; right:0;}
#mmi-header .mmi-site-search label.mmi-search-trig,
#mmi-header .mmi-site-search .mmi-search-btn{width:30px; height:30px; display:block; position:absolute; right:0; top:0; cursor:pointer;}
#mmi-header .mmi-site-search .mmi-search-btn{/*right:1px; top:-1px;*/}
#mmi-header .mmi-site-search label.mmi-search-trig:before,
#mmi-header .mmi-site-search .mmi-search-btn:before{content:'\e900'; text-align:center; line-height:30px; color:#224475; font-size:24px; width:30px; height:30px; display:block;}
#mmi-header .mmi-head-search-input{width:0; height:30px; position:absolute; right:0; top:0; border:0px #b6c7d6 solid; background:#fff; transition:all .5s ease-out; overflow:hidden;z-index:100;}
#mmi-header #mmi-search-toggle{opacity:0; visibility:hidden;}
#mmi-header #mmi-search-toggle:checked + .mmi-head-search-input{width:245px; opacity:1; border-width:1px; overflow:visible;}
#mmi-header .mmi-head-search-input input[type=text]{outline:none; width:200px; height:28px; padding:5px;}
#mmi-header label.mmi-hide-mask{position:fixed; left:0; top:0; width:100%; height:100%; z-index:90; background:rgba(0,0,0,0); display:none;}
#mmi-header #mmi-search-toggle:checked + .mmi-head-search-input + label.mmi-hide-mask{display:block;}
#mmi-header .mmi-toggle,
#mmi-header .mmi-toggle-check{display:none;}

#mmi-header a:link{color:#224475; text-decoration:none;}
#mmi-header a:visited{color:#224475;}


/* activate navigation
==================================================== */

@media screen and (min-width:768px){
#mmi-global li a{position:relative;}
#mmi-global li a,
#mmi-head-links ul.mmi-corp a,
#mmi-head-links ul.mmi-special a{}
#mmi-head-links ul.mmi-special a{}
#mmi-global li a:hover,
#mmi-head-links ul.mmi-corp a:hover{color:#f62837;}
#mmi-head-links ul.mmi-special a:hover,
#mmi-head-links ul.mmi-special a:hover:before{color:#fff; background-color:#f62837;}
#mmi-head-links ul.mmi-special a:hover:after{color:#fff!important; background-color:#f62837;}
#mmi-global li a.active:after{content:''; display:block; width:100%; height:5px; background:#f62837; position:absolute; left:0; bottom:-15px;}


}

/* big banners area
====================================================== */
.mmi-big-bnrs{clear:both; padding:50px 0 45px; background:url(/common/img/bg-milk-crown.png) no-repeat center bottom,url(/common/img/bg-container-bottom.png) repeat-x center bottom; min-height:370px; box-sizing:border-box;}
/*.mmi-big-bnrs ul{width:1030px; margin:0 auto; clear:both; padding:0;}*/
.mmi-big-bnrs ul li{list-style:none;}
.mmi-big-bnrs .banner{text-align:center;}
/*.mmi-big-bnrs ul li img{display:block; border:0 none; -moz-box-sizing:border-box; -webkit-box-sizing:border-box; box-sizing:border-box;}*/
/* site footer


/*誘導バナー*/
.mmi-big-bnrs ul.top_navi{clear:both; margin:3em auto;width:1000px;box-sizing: border-box; display:block;padding:0;}
.mmi-big-bnrs ul.top_navi:after{display:block;clear:both;content:"";}
.mmi-big-bnrs ul.top_navi li{position:relative; text-align:center; float:left; width:242px; border:solid 1px #dddddd; box-sizing:border-box; margin-right:10.5px; background-color:#FFF;}
.mmi-big-bnrs ul.top_navi li:last-child{margin-right:0px;}
.mmi-big-bnrs ul.top_navi li p:nth-of-type(1){font-size:17px; color:#f22837; margin-bottom:0.5em; font-family:'noto'; margin-top:0.6em;}
.mmi-big-bnrs ul.top_navi li p:nth-of-type(2){font-size:14px; margin-bottom:0.7em; color:#314040;}
.mmi-big-bnrs ul.top_navi li a{text-decoration:none;}
.mmi-big-bnrs ul.top_navi li:after {
	font-family:'mmiicons';
    content: '\e902';
    display: block;
    width: 15px;
    height: 15px;
    position: absolute;
    right: 0px;
    top: 42px;
    line-height: 15px;
    font-size: 15px;
	color:#f73644;
}
.mmi-big-bnrs ul.top_navi li .sp_display{
	display:none;
}

.mmi-big-bnrs ul.usr-communications{clear:both; height:85px;width:1000px; margin: 0 auto;padding:0;}
.mmi-big-bnrs ul.usr-communications li{width:480px; float:none;  text-align:center; font-family:noto; font-size:16px;margin:0 auto;}
.mmi-big-bnrs ul.usr-communications li a{display:block; height:85px; border:1px #f73644 solid; background:#f1ebde; border-radius:5px; color:#333; line-height:83px; position:relative; text-decoration:none;}
.mmi-big-bnrs ul.usr-communications li.mm{float:right;}
.mmi-big-bnrs ul.usr-communications li a:before{width:83px; height:83px; position:absolute; left:1px; top:1px; content:''; display:block; color:#f73644; text-align:center; line-height:83px;}
.mmi-big-bnrs ul.usr-communications li.sns a:before{content:''; font-size:54px; background:url(/communication/img/icon_social.png) 17px center no-repeat; background-size:66px auto; }
.mmi-big-bnrs ul.usr-communications li.mm a:before{content:''; font-size:36px;background:url(/communication/img/icon_communication.png) 17px center no-repeat; background-size:66px auto; }
.mmi-big-bnrs ul.usr-communications li a:after{content:'\e902'; display:block; width:14px; height:14px; position:absolute; right:14px; top:50%; margin-top:-7px; line-height:14px; font-size:14px; color:#f73644;font-family:'mmiicons';}
.mmi-big-bnrs ul.usr-communications li a:hover{background:#f73644; color:#fff; text-decoration:none;}
.mmi-big-bnrs ul.usr-communications li a:hover:after,
.mmi-big-bnrs ul.usr-communications li a:hover:before{color:#fff;}


/*誘導バナー*/



/*====================================================== */
#mmi-footer{border-top:2px #f62837 solid; background:#fff; text-align:left;}
#mmi-footer .mmi-inner{width:1000px; margin:0 auto; padding:20px 0; clear:both;}
#mmi-footer .mmi-inner:after{content:''; display:block; clear:both;}
#mmi-footer .mmi-primary{float:left; width:590px; padding:5px 15px 5px 0; border-right:1px #b6c7d6 solid; margin-bottom:30px; font-family:noto;}
#mmi-footer .mmi-primary ul{float:left; width:50%; padding-right:10px;}
#mmi-footer .mmi-primary ul li{border-top:1px #b6c7d6 solid; font-size:14px;}
#mmi-footer .mmi-primary ul li:last-child{border-bottom:1px #b6c7d6 solid;}
#mmi-footer .mmi-primary ul li a{padding:10px 20px 10px 10px; display:block; position:relative;}
#mmi-footer .mmi-primary ul li a:after{content:'\e902'; display:block; position:absolute; right:10px; top:50%; width:10px; height:10px; line-height:10px; margin-top:-5px; font-size:10px;}
#mmi-footer .mmi-secondary{float:right; padding:18px 0 0 0; width:385px; font-family:noto;}
#mmi-footer .mmi-secondary ul.mmi-corp{float:left; margin-right:25px;}
#mmi-footer .mmi-secondary ul.mmi-special{width:270px; float:right; position:relative; top:-20px;}
#mmi-footer .mmi-secondary ul li{font-size:12px; margin-bottom:23px; width:100%;}
#mmi-footer .mmi-secondary ul li a[target=_blank]:after{content:'\e90a'; color:#f62837; font-size:11px; vertical-align:middle; margin-left:5px; position:relative; top:-1px;}
#mmi-footer .mmi-secondary ul li.mmi-en a[target=_blank]:after{content: '';
    background: url(/common/img/icon_global.svg) center center/contain no-repeat;
    width: 1.5em;
    height: 1.5em;
    top: -0.2em;
    display: inline-block;}

#mmi-footer .mmi-secondary ul.mmi-special a[target=_blank]:hover:after{color:#fff!important;}
#mmi-footer .mmi-secondary ul li.mmi-contact,
#mmi-footer .mmi-secondary ul li.mmi-tel,
#mmi-footer .mmi-secondary ul li.mmi-cm,
#mmi-footer .mmi-secondary ul li.mmi-shop{font-size:14px; font-weight:bold; text-align:center; margin-bottom:10px;}
#mmi-footer .mmi-secondary ul li.mmi-tel{display:none;}
#mmi-footer .mmi-secondary ul li.mmi-contact a,
#mmi-footer .mmi-secondary ul li.mmi-tel a,
#mmi-footer .mmi-secondary ul li.mmi-cm a,
#mmi-footer .mmi-secondary ul li.mmi-shop a{border:1px #f62837 solid; height:56px; line-height:54px; border-radius:5px; padding:0 15px; color:#f62837; display:block; position:relative;}
#mmi-footer .mmi-secondary ul li.mmi-contact a:before{content:'\e901'; font-size:26px; position:absolute; left:15px; top:50%; margin-top:-13px; height:26px; line-height:1}
#mmi-footer .mmi-secondary ul li.mmi-tel a:before{content:'\e912'; font-size:26px; width:22px; height:26px; position:absolute; left:10px; top:50%; margin-top:-13px; line-height:26px;}
#mmi-footer .mmi-secondary ul li.mmi-cm{margin-right:0;}
#mmi-footer .mmi-secondary ul li.mmi-cm a:before{content:''; width:32px; height:31px; background:url(/common/img/moorii.png) no-repeat center center; background-size:32px auto; display:block; left:10px; top:50%; margin-top:-15px; position:absolute;}
#mmi-footer .mm-sub-link{clear:both; float:left; width:50%; padding-top:25px; font-family:"メイリオ", Meiryo,"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", sans-serif}
#mmi-footer .mm-sub-link li{display:inline-block; border-right:1px #333 solid; padding:0 20px; font-size:13px; line-height:1;}
#mmi-footer .mm-sub-link li:first-child{padding-left:0;}
#mmi-footer .mm-sub-link li:last-child{border-right:0;}
#mmi-footer .mmi-owner{width:50%; float:right; text-align:right;}
#mmi-footer .mmi-owner img{width:170px; height:auto;}
#mmi-footer .mmi-owner small{display:block; font-size:10px;}
.mmi-pagetop{width:60px; height:60px; border-radius:30px; position:fixed; right:20px; bottom:20px; display:none; z-index:100002;}
.mmi-pagetop a{width:60px; height:60px; border-radius:30px; background:#ccc; color:#ccc !important; display:block; text-indent:-100px; overflow:hidden; text-decoration:none;}
.mmi-pagetop a:hover{text-decoration:none; opacity:.5;}
.mmi-pagetop a:before{content:'\e905'; text-align:center; line-height:55px; color:#fff; font-size:36px; display:block; font-family:mmiicons; text-indent:0; text-decoration:none;}

#mmi-footer a:link{color:#224475; text-decoration:none;}
#mmi-footer a:visited{color:#224475;}



/* learn_enjoy navi
====================================================== */


#mmi-wrapper .learn-nav{background:#fafbf4; padding:20px 0;}
#mmi-wrapper .learn-nav ul{height:136px; width:1000px; margin:0 auto;padding:0;}
#mmi-wrapper .learn-nav li{width:150px; height:136px; margin-right:20px; float:left; list-style:none;}
#mmi-wrapper .learn-nav li:last-child{margin-right:0;}
#mmi-wrapper .learn-nav li a{width:150px; height:136px; display:table-cell; border:1px #f62837 solid; border-radius:5px; background:#fff; color:#f62837; font-size:18px; font-family:noto; vertical-align:middle; text-align:center; line-height:1.4;text-decoration:none;}
#mmi-wrapper .learn-nav li a:hover,
#mmi-wrapper .learn-nav li a.active{background:#f62837; color:#fff; text-decoration:none;}
#mmi-wrapper .learn-nav li a:after{display:block; font-size:44px; font-family:mmiicons;} 
#mmi-wrapper .learn-nav li.factory a:after{content:'\e91e';}
#mmi-wrapper .learn-nav li.education a:after{content:'\e91d';}
#mmi-wrapper .learn-nav li.knowledge a:after{content:'\e91c'; margin-top:10px;}
#mmi-wrapper .learn-nav li.safaty a:after{content:'\e91b';}
#mmi-wrapper .learn-nav li.research a:after{content:'\e919'; margin-top:10px;}
#mmi-wrapper .learn-nav li.top a:after{content:'\e902'; font-size:24px; margin-top:10px; line-height:40px;}


@media screen and (min-width:768px){
#mmi-footer .mmi-primary ul li a,
#mmi-footer .mmi-secondary ul li a,
#mmi-footer .mm-sub-link li a{}
#mmi-footer ul.mmi-special a{}
#mmi-footer .mmi-primary ul li a:hover,
#mmi-footer .mmi-secondary ul li a:hover,
#mmi-footer .mm-sub-link li a:hover{color:#f62837;}
#mmi-footer .mmi-secondary ul.mmi-special a:hover,
#mmi-footer .mmi-secondary ul.mmi-special a:hover:before{color:#fff; background-color:#f62837;}
}



/* dummy */
#lipsum{width:1000px; margin:0 auto; padding:50px 0; line-height:1.75;}
#lipsum p{font-style:italic; margin-bottom:1.5em;}