/* A (more) Modern CSS Reset */

body > #mc *,

body > #mc *::before,

body > #mc *::after{box-sizing: border-box}

body > #mc  html{-moz-text-size-adjust: none; -webkit-text-size-adjust: none; text-size-adjust: none}

body > #mc body,

body > #mc h1,

body > #mc h2,

body > #mc h3,

body > #mc h4,

body > #mc p,

body > #mc figure,

body > #mc blockquote,

body > #mc dl,

body > #mc dd{margin: 0}

body > #mc ul[role='list'],

body > #mcol[role='list']{list-style: none}

body > #mc body{min-height: 100vh; line-height: 1.5}

body > #mc h1,

body > #mc h2,

body > #mc h3,

body > #mc h4,

body > #mc button,

body > #mc input,

body > #mc label{line-height: 1.1}

body > #mc h1,

body > #mc h2,

body > #mc h3,

body > #mc h4{text-wrap: balance}

body > #mc a:not([class]){text-decoration-skip-ink: auto; color: currentColor}

body > #mc img,

body > #mc picture{max-width: 100%; display: block; vertical-align: bottom;}

body > #mc input,

body > #mc button,

body > #mc textarea,

body > #mc select{font: inherit}

body > #mc textarea:not([rows]){min-height: 10em}

body > #mc :target{scroll-margin-block: 5ex}



/* corporateBanner */

footer .corporateBanner{display: none!important;}



/* contents */

body > .container{overflow: hidden;/*overflow-x: hidden;*/ width: 100%; display: block;}

body > .container .inner{width: 100%; margin: 0 auto; max-width: 430px; /*max-width: 700px; max-width: 480px;*/ font-size: 10px; /* font-size:1.0rem;*/}

body > .container .inner img{width: 100%; height: auto;}

body > .container section{position: relative;}



body > .container .in-anime .--ad0,

body > .container .in-anime .--ad1,

body > .container .in-anime .--ad2,

body > .container .in-anime .--ad3,

body > .container .in-anime .--ad4,

body > .container .in-anime .--ad5{opacity: 0;}

body > .container .in-anime.animated .--ad0{animation: fadein 1.2s ease 0.4s 1 forwards;}

body > .container .in-anime.animated .--ad1{animation: fadein 1.2s ease 0.8s 1 forwards;}

body > .container .in-anime.animated .--ad2{animation: fadein 1.2s ease 1.2s 1 forwards;}

body > .container .in-anime.animated .--ad3{animation: fadein 1.2s ease 1.6s 1 forwards;}

body > .container .in-anime.animated .--ad4{animation: fadein 1.2s ease 2.0s 1 forwards;}

body > .container .in-anime.animated .--ad5{animation: fadein 1.2s ease 2.4s 1 forwards;}



@keyframes fadein { 0% { opacity: 0;}

  100% { opacity: 1;} }



body > .container main a{transition: all 0.3s ease;}

body > .container main a:hover{opacity: 0.7;}



body > .container #star1,

body > .container #star2,

body > .container #star3,

body > .container #star4,

body > .container #star5{position: absolute; z-index:0; width: 100%; height: 100%; top :0; left :0;}



body > .container main.bg{background: url(../images/main_bg.webp) 50% 0% / cover repeat-y; overflow:hidden;}

body > .container main .inner{box-shadow: 10px 0px 10px -0px rgba(0, 0, 0, .3), -10px 0px 10px -0px rgba(0, 0, 0, .3);}

body > .container #kv{line-height: 0;}

body > .container #kv .images{position: relative;}

body > .container #kv .link,

body > .container #kv .title{position: absolute; display: block; z-index:+2;}

body > .container #kv .item{position: absolute; display: block; z-index:+1; width: 18.266%; top: 80.990%; left: 78.6%;}

body > .container #kv .link{width: 31.466%; top: 2.060%; left: 64.266%;}

body > .container #kv .title{width: 77.6%; top: 2.166%; left: 10.4%;}



body > .container #message{line-height: 0;}

body > .container #message .images{position: relative;}

body > .container #message .lead{position: absolute; display: block; z-index:+2; width: 70.6%; top: 16.053%; left: 15.533%;}



body > .container #item_milk{line-height: 0;}

body > .container #item_milk .images{position: relative;}

body > .container #item_milk .title{position: absolute; display: block; z-index:+2; width: 100%; top: 0%; left: 0%; /*width: 93.733%; top: 0%; left: 2.4%;*/}

body > .container #item_milk .bg{position: absolute; display: block; z-index:+1; width: 100%; top: 23.207%; /*top: 16.491%;*/ left: 0%;}



body > .container #item_creme{line-height: 0;}

body > .container #item_creme .images{position: relative;}

body > .container #item_creme .title{position: absolute; display: block; z-index:+2; width: 81.2%; top: 0%; left: 9.4%;}



body > .container #voice{line-height: 0;}

body > .container #voice .images{position: relative;}

body > .container #voice .title{width: 81.3%; top: 12.717%; left: 8.4%; position: absolute; display: block; z-index:+2;}



body > .container #social{line-height: 1; width: 100%; height: auto; background: #fff;}

body > .container #social ul{display: flex; flex-wrap: wrap; justify-items: center; position: absolute; z-index: +2; width:47.6%; top: 80.517%; left: 26.133%; padding: 0;}

body > .container #social li{display: block; list-style: none; margin: 0 13.165% 0 0; padding: 0; width: 24.369%;}

body > .container #social li:nth-last-child(1){margin: 0;}

body > .container #social li img{width: 100%;}

body > .container #social .images{position: relative; top: -1px;}

body > .container #social .item{position: absolute; display: block; width: 54.533%; top: 7.169%; left: 22.733%; z-index:+2;}

body > .container #social .link{width: 72.866%; top: 58.210%; left: 12.933%; position: absolute; display: block; z-index:+2;}







@media screen and (min-width: 960px){

    body > .container main#mc{margin-top: 132px;/*margin-top: 120px;*/}

    body > .container main#mc .--sp{display: none!important;}

}



@media screen and (max-width: 959px){

    body > .container main#mc{margin-top: 126px;/*margin-top: 90px;*/}

    body > .container main#mc .--pc{display: none!important;}

    body > .container main a{opacity: 1;}

}



@media screen and (max-width: 768px){

  body > .container .inner{max-width: 768px;}

  body > .container main .bg{background: none;}

  body > .container main .inner{box-shadow: none;}

}