@charset "utf-8";

/* for /campaign/index.html setting
--------------------------------------------------------------*/
body{
	overflow-x:hidden;
}
main .main{
	background:url(../img/mainimg_bg.jpg) center top no-repeat;
	padding-top:14px!important;
}
main .main .slide #canvas{
	
}
main .main .slide_wrap{
	text-align:center;
	position:relative;
	width:768px;
	margin:0 auto!important;
	height:303px;
}
main .main .slide{
	width:1229px!important;
	text-align:center;
	margin-left:-229px!important;
}
main .main .slide ul{
}


main .main .slide li img{
  transform:scale(0.9) rotate(0.1deg);
  opacity:0;
}
main .main .slide li.appear img{
  transform: translate3d(0,0,0);
  transform:scale(1) rotate(0.1deg);
	transition-duration: 1000ms;
  opacity:1;
}
main .main .slide li.showUp img{
  transform: translate3d(0,0,0);
  transform:scale(0.9) rotate(0.1deg);
	transition-duration: 800ms;
	opacity:0;
}
main .main .slide .bx-controls{
	display:none!important;
}
main .main .slide + .milk{
	position:absolute;
	top:242px;
	left:0px;
	width:100%;
	text-align:center;
	z-index:100;
}
main .main .slide + .milk span{
	width:323px;
	margin:0 auto!important;
	display:block;
}
main .main .slide + .milk img{
	margin-right:-27px!important;
}
main .main h1{
	text-align:center;
	padding-top:20px!important;
	position:relative;
	z-index:101;
}

main .main .lead{
	text-align:center;
	font-size:20px;
	color:#37537a;
	line-height:1.5;
	margin-top:-40px!important;
}
main .main .btn{
	text-align:center;
	font-size:0px;
	padding-top:40px!important;
	margin-bottom:45px!important;
}
main .main .btn li{
	display:inline-block;
	margin-left:15px!important;
	margin-right:15px!important;
	margin-bottom:15px!important;
}
main .main .btn a{
	display:block;
	width:414px;
	background-color:#f62837;
	border-radius:3em;
	font-size:18px;
	color:#FFF;
	text-align:center;
	padding-top:0.5em!important;
	padding-bottom:0.5em!important;
	color:#FFF!important;
	text-decoration:none!important;
	position:relative;
	font-family:notoE;
}
main .main .btn a:after {
    content: "\e902";
    font-size: 0.7em;
    position: absolute;
    right: 1em;
    top: 50%;
    margin-top: -0.8em;
}
main .main .btn a:hover{
	opacity:0.7;
}
main .main .news{
	border-top:2px solid #224475;
	width:1000px;
	margin:0 auto!important;
}
main .main .news .ttl{
	font-size:24px;
	color:#224475!important;
	float:left;
	margin-top:10px!important;
	margin-left:10px!important;
}
main .main .news .more{
	float:right;
	margin-bottom:10px!important;
	line-height:1;
}
main .main .news .more a{
	display:block!important;
	border:solid 1px #224475;
	color:#224475!important;
	text-decoration:none;
	padding:0.5em 2em 0.6em 1.5em!important;
	border-radius:3em;
	font-size:20px;
	margin-top:11px!important;
	margin-right:15px!important;
	line-height:1;
	position:relative;
}
main .main .news .more a:after {
    content: '\e902';
    display: block;
    position: absolute;
    right: 1em;
    top: 50%;
    margin-top: -0.5em;
    font-size: 0.8em;
}
main .main .news .more a:hover{
	text-decoration:none!important;
	opacity:0.7;
}

main .main .news ul{
	border-top:1px solid #d8d8d8;
	clear:both;
}
main .main .news ul li{
	border-bottom:1px solid #d8d8d8;
	padding-top:0.5em!important;
	padding-bottom:0.5em!important;
}
main .main .news ul li p{
	display:table-cell;
	vertical-align:top;
	font-size:16px;
	padding-left:0.5em!important;
	padding-right:0.5em!important;
}
main .main .news ul li p:nth-of-type(1){
	white-space:nowrap;
	width:10em;
	
}
main .main .news ul li p a{
	color:#237cbc;
}

main .products{
	background-color:#e4f1f9;
	margin-top:53px!important;
	position:relative;
}
main .water{
	position:absolute;
	left:0px;
	top:0px;
	width:100%;	
	text-align:center;
	overflow:hidden;
}
main .water img{
	position:relative;
  transition-duration: 500ms;
  transition-timing-function: ease-out;
  width:0px;
  top:-15px;
}
main .water img.showUp{
	top:0px;
  width:68px;
}
main .water img.showUp2{
	top:0px;
  width:85px;
  transition-duration: 400ms;
}
main .water img.showUp3{
	top:0px;
  width:68px;
  transition-duration: 400ms;
}
main .products h2{
	text-align:center;
	font-size:38px!important;
	color:#224475;
	padding-top:80px!important;
	margin-bottom:20px!important;
}
main .products .slider div img{
	margin-left:50px!important;
	margin-right:50px!important;
	
}
main .products .icon{
	position:absolute;
	left:0px;
	top:44px;
	width:100%;
}
main .products .icon span{
	display:block;
	width:960px;
	margin:0 auto!important;
}
main .products .text{
	font-size:20px;
	text-align:center;
	line-height:1.5;
	margin-top:25px!important;
	margin-bottom:30px!important;
}
main .products .btn{
	padding-bottom:40px!important;
}
main .products .btn a{
    display: block;
    width: 355px;
	margin:0 auto!important;
    background-color: #f62837;
    border-radius: 3em;
    font-size: 18px;
    color: #FFF;
    text-align: center;
    padding-top: 0.5em!important;
    padding-bottom: 0.5em!important;
    color: #FFF!important;
    text-decoration: none!important;
	position:relative;
	font-family:notoE;
}
main .products .btn a:after {
    content: "\e902";
    font-size: 0.7em;
    position: absolute;
    right: 1em;
    top: 50%;
    margin-top: -0.8em;
}
main .products .btn a:hover{
	opacity:0.7;
}

main .ir{
	position:relative;
	clear:both;
	background-color:#FFF;
	padding-bottom:50px!important;
}
main .ir .inner{
	width:1000px;
	margin: 0 auto!important;
}
main .ir h2{
	text-align:center;
	font-size:38px!important;
	color:#224475;
	padding-top:80px!important;
	margin-bottom:20px!important;
}
main .ir .slider div{
	margin-left:50px!important;
	margin-right:50px!important;
}
main .ir .icon{
	position:absolute;
	left:0px;
	top:60px;
	width:100%;
}
main .ir .icon span{
	display:block;
	width:960px;
	margin:0 auto!important;
	text-align:right;
}
main .ir .img{
	float:left;
	width:54.2%;
}
main .ir .img img{
	width:100%;
}
main .ir .right{
	float:left;
	width:36%;
	margin-left:2%!important;
}
main .ir .text{
	font-size:20px;
	line-height:1.5;
	margin-bottom:30px!important;
	white-space:nowrap;
}


main .ir .btn a{
    display: block;
    width: 100%;
    background-color: #f62837;
    border-radius: 3em;
    font-size: 18px;
    color: #FFF;
    text-align: center;
    padding-top: 0.5em!important;
    padding-bottom: 0.5em!important;
    color: #FFF!important;
    text-decoration: none!important;
	position:relative;
	font-family:notoE;
}
main .ir .btn a:after {
    content: "\e902";
    font-size: 0.7em;
    position: absolute;
    right: 1em;
    top: 50%;
    margin-top: -0.8em;
}
main .ir .btn a:hover{
	opacity:0.7;
}



main .csr{
	position:relative;
	clear:both;
	background-color:#eff0e7;
	padding-bottom:50px!important;
}
main .csr .inner{
	width:1000px;
	margin: 0 auto!important;
}
main .csr h2{
	text-align:center;
	font-size:38px!important;
	color:#224475;
	padding-top:80px!important;
	margin-bottom:20px!important;
}
main .csr .slider div{
	margin-left:50px!important;
	margin-right:50px!important;
}
main .csr .icon{
	position:absolute;
	left:0px;
	top:60px;
	width:100%;
}
main .csr .icon span{
	display:block;
	width:960px;
	margin:0 auto!important;
}
main .csr .img{
	float:right;
	width:54.3%;
}
main .csr .img img{
	width:100%;
}
main .csr .right{
	float:left;
	width:43%;
}
main .csr .text{
	font-size:20px;
	line-height:1.5;
	margin-bottom:30px!important;
	text-align:left;
}
main .csr .text span{
	display:block;
	color:#224475;
	font-size:24px;
	margin-bottom:1em!important;
}

main .csr .btn a{
    display: block;
    width: 83%;
    background-color: #f62837;
    border-radius: 3em;
    font-size: 18px;
    color: #FFF;
    text-align: center;
    padding-top: 0.5em!important;
    padding-bottom: 0.5em!important;
    color: #FFF!important;
    text-decoration: none!important;
	position:relative;
	font-family:notoE;
}
main .csr .btn a:after {
    content: "\e902";
    font-size: 0.7em;
    position: absolute;
    right: 1em;
    top: 50%;
    margin-top: -0.8em;
}
main .csr .btn a:hover{
	opacity:0.7;
}
main .bottom{
	background:url(../img/bottom_bg.jpg) center bottom no-repeat;
	padding-top:70px!important;
	padding-bottom:150px!important;
}
main .bottom .inner{
	width:1000px;
	margin: 0 auto!important;
}

main .bottom .box{
	width:48.1%;
	background:#d7ebf7;
	border-radius:10px;
	box-shadow: 10px 10px 10px rgba(0,0,0,0.2); 
	padding-bottom:30px!important;
	float:left;
}
main .bottom .box_right{
	float:right;
}
main .bottom .box h2.ttl{
	font-size:34px!important;
	color:#224475;
	text-align:center;
	padding-top:20px!important;
	padding-bottom:10px!important;
}
main .bottom .box .img{
	margin-bottom:20px!important;
}
main .bottom .box .img img{
	width:100%;
}
main .bottom .box .text{
	font-size:20px;
	width:90%;
	margin:0 auto!important;
	text-align:left;
	line-height:1.5;
}
main .main .btn {
    padding-top: 40px!important;
    margin-bottom: 30px!important;
}
main .bottom .box .btn a{
    display: block;
    width: 75%;
	margin:0 auto!important;
	margin-top:20px!important;
    background-color: #f62837;
    border-radius: 3em;
    font-size: 18px;
    color: #FFF;
    text-align: center;
    padding-top: 0.5em!important;
    padding-bottom: 0.5em!important;
    color: #FFF!important;
    text-decoration: none!important;
	position:relative;
	font-family:notoE;
}
main .bottom .box .btn a:after {
    content: "\e902";
    font-size: 0.7em;
    position: absolute;
    right: 1em;
    top: 50%;
    margin-top: -0.8em;
}
main .bottom .box .btn a:hover{
	opacity:0.7;
}




@media screen and (max-width:760px){
	
body{
	overflow-x:hidden;
}	
#mmi-container{
	overflow-x:hidden;
}
main .main {
    background: url(../img/mainimg_bg.jpg) center top no-repeat;
	background-size:400%;
    padding-top: 10px!important;
}
main .main .lead {
    font-size: 16px;
	width:90%;
	margin:0 auto!important;
    margin-top: -25px!important;
}
main .main .slide_wrap{
	width:100%;
	height:65vw;
}

main .main .slide{
	width:100%!important;
	margin-left:0px!important;
}
main .main .slide + .milk {
    position: absolute;
    top: 50vw;
    left: 0px;
}
main .main .slide + .milk img{
	width:68vw;
    margin-right: -6.5vw!important;
}

main .main .btn li{
	width:90%;
	margin:0 auto!important;
	margin-bottom:15px!important;
}
main .main .btn a {
	display:block;
	margin:0 auto!important;
    background-color: #f62837;
    font-size: 3.8vw;
	width:100%;
}

main .main .news {
    border-top: 2px solid #224475;
    width: 95%;
    margin: 0 auto!important;
}

main .main .news .ttl {
    font-size:20px;
}
main .main .news .more a {

	background-size:0.5em;
    font-size: 14px;
	padding-bottom:0.7em!important;
}
main .main .news ul li p {
    display: block;
    font-size: 14px;
    padding-left: 0em!important;
    padding-right: 0em!important;
}
main .main .news ul li p:nth-of-type(2) {
	line-height:1.4;
}

main .water img {
    width: 0px;
    top: -10px;
}
main .water img.showUp {
    top: 0px;
    width: 55px;
}
main .water img.showUp2{
  width:65px;
}
main .water img.showUp3{
  width:55px;
}

main .products h2 {
    font-size: 28px!important;
    padding-top: 60px!important;
    margin-bottom: 20px!important;
}
main .products .icon {
    position: absolute;
    left: 0px;
    top: 44px;
    width: 100%;
}
main .products .icon span {
    width: 100%;
}
main .products .icon span img{
	width:80px;
	margin-left:10px!important;
}
main .products .slider div img {
	height:130px!important;
    margin-left: 25px!important;
    margin-right: 25px!important;
}

main .products .text {
    font-size: 14px;
    text-align: center;
    line-height: 1.5;
	width:95%;
	margin:0 auto!important;
    margin-top: 20px!important;
    margin-bottom: 20px!important;
}

main .products .btn a {
    width: 80%;
    font-size: 16px;
}

main .ir h2 {
    font-size: 28px!important;
    padding-top: 60px!important;
    margin-bottom: 20px!important;
}
main .ir .icon {
    width: 100%;
}
main .ir .icon span {
    width: 100%;
}
main .ir .icon span img{
	width:50px;
	margin-right:20px!important;
	margin-top:-13px!important;
}
main .ir .inner {
    width: 100%;
}
main .ir .img {
    float: none;
    width: 95%;
	margin:0 auto!important;
}
main .ir .right {
    float: none;
    width: 95%;
	margin:0 auto!important;
}
main .ir .text {
    font-size:14px;
    margin-bottom: 25px!important;
    white-space:normal;
	text-align:center;
}

main .ir .btn a {
    width: 80%;
	margin:0 auto!important;
    font-size: 16px;
}

main .csr h2 {
    font-size: 28px!important;
    padding-top: 60px!important;
    margin-bottom: 20px!important;
}
main .csr .icon {
    position: absolute;
    width: 100%;
}
main .csr .icon span {
    width: 100%;
}
main .csr .icon span img{
	width:50px;
	margin-left:20px!important;
	margin-top:-22px!important;
}
main .csr .inner {
    width: 100%;
}
main .csr .img {
    float: none;
    width: 95%;
	margin:0 auto!important;
}
main .csr .right {
    float: none;
    width: 95%;
	margin:0 auto!important;
}

main .csr .text span {
    font-size: 18px;
	text-align:center;
}
main .csr .text {
    font-size: 14px;
    margin-bottom: 30px!important;
	text-align:center;
}
main .csr .btn a {
    width: 80%;
	margin:0 auto!important;
    font-size: 16px;
}
main .bottom {
    background: url(../img/bottom_bg.jpg) center bottom no-repeat;
	background-size:100%;
    padding-top: 50px!important;
    padding-bottom: 100px!important;
}
main .bottom .inner {
    width: 100%;
}
main .bottom .box {
    width: 95%;
	margin:0 auto!important;
    box-shadow: 5px 5px 5px rgba(0,0,0,0.2);
    padding-bottom: 25px!important;
    float: none;
}
main .bottom .box_right{
    float: none;
	margin-top:20px!important;
}
main .bottom .box h2.ttl {
    font-size: 22px!important;
    padding-top: 20px!important;
    padding-bottom: 10px!important;
}
main .bottom .box .img {
    margin-bottom: 10px!important;
}
main .bottom .box .text {
    font-size: 14px;
}
main .bottom .box .btn a {
    font-size: 16px;
}







}