@charset "utf-8";
/* CSS Document */

/* mv
-------------------------------------------------- */
.mv--area {
    background:url(../img/bg_mv01.jpg) center top no-repeat;
    background-size: cover;
}
.mv--area {
    height:100vh;
    overflow: hidden;
}
.mv--area img {
    width:100%; height: auto;
}
.mv--area .inner {
    position:relative;
    height:100vh;
    background:url(../img/mv_kamon01.png) center center no-repeat;
    background-size: 89.3333%;
}

.mv--area h1 {
    position:absolute;
    top:28.7%;
    left:5.333%;
    width:39.91666%;
    height:42.7%;
    z-index: 11;
}
.mv--area .img {
    position:absolute;
    top:51.3%;
    left:31.3333%;
    width:24.333%;
    z-index: 1;
}
.mv--area .bottle {
    position:absolute;
    bottom: 6vh;
    right:-9.6%;
    width:50.2666%;
    -webkit-animation-name: slideimage;
    animation-name: slideimage;
    -webkit-animation-duration: 2.5s;
    animation-duration: 2.5s;
}

@-webkit-keyframes slideimage {
    0% {
        position: absolute;
        bottom: -22.5vh;
    }
    100% {
        position: absolute;
        bottom: 6vh;
    }
}

@media (min-width: 1025px) {
/* PC用 */
    .mv--area {
        height:100vh;
        overflow: hidden;
    }
    .mv--area img {
        width:100%; height: auto;
    }
    .mv--area .inner {
        position:relative;
        height:100vh;
        background:url(../img/mv_kamon01.png) center center no-repeat;
    }
    
    .mv--area h1 {
        position:absolute;
        top:20.7%;
        width:39.91666%;
        height:42.7%;
        z-index: 11;
    }
    .mv--area .img {
        position:absolute;
        top:55.3%;
        /*left:33.3333%;*/
		left:30.3333%;
        width:22.333%;
        z-index: 1;
    }
    .mv--area .bottle {
        position:absolute;
        right:3.5%;
        /*width:35%;*/
		width:45%;
    }
    
}
@media (max-width: 640px) {
/* SP用 */
    .mv--area {
        position:relative;
        height:75vh;
        overflow: hidden;
        z-index: 1;
    }
    .mv--area img {
        width:100%; height: auto;
    }
    .mv--area .inner {
        position:relative;
        height:75vh;
        background:url(../img/mv_kamon01.png) center center no-repeat;
        background-size: 89.3333%;
    }
    
    .mv--area h1 {
        position:absolute;
        top:2.175rem;
        left:5%;
        width:52.3333%;
        z-index: 11;
    }
    .mv--area .img {
        position:absolute;
        /*top:39.3%;
        left:21.8%;*/
		top: 41.3%;
    	left: 4.8%;
        width:34.66666%;
        z-index: 1;
    }
    .mv--area .bottle {
        position:absolute;
        /*top:-15.5vh;
        right:-9.6%;
        width:54.2666%;*/
		top: 7vh;
		right: -2.6%;
		width: 74.2666%;
    }
    
    @-webkit-keyframes slideimage {
        0% {
            position: absolute;
            top: -4.5vh;
        }
        100% {
            position: absolute;
            top:7.5vh;
        }
    }
}




/* 
-------------------------------------------------- */
.sec01 {
    text-align: center;
}
.sec01 img { width:100%; height:auto;}
.sec01 .inner {
    padding:8rem 0 8rem;
    overflow:hidden;
}
.sec01 h2 {
    position: relative;
    margin:0 14.4% 2.4375rem;
    margin-bottom:5rem;
    z-index: 11;
}
.sec01 p {
    margin:0 8.12%;
}
.sec01 .nm02 {
    position: absolute;
    bottom: -2.275rem;
    right: -6.4666%;
    width: 32.8%;
    z-index: 201;
    overflow: hidden;
}
.sec01 .nm01 {
    position: absolute;
    top: -2.275rem;
    left: -6.4666%;
    width: 32.8%;
    z-index: 201;
}

.sec01 .kr01 {
    position: absolute;
    bottom:1.71875rem;
    left: 0%;
    width:34.1333%;
    z-index: 1;
}
.sec01 .kr02 {
    position: absolute;
    top:1.71875rem;
    right: 0;
    width:34.1333%;
    z-index: 1;
}

@media (min-width: 1025px) {
/* PC用 */
    .sec01 {}
    .sec01 img { width:auto; height:auto;}
    .sec01 .inner {
        position: relative;
        padding:11rem 0 11rem;
        overflow:hidden;
    }
    .sec01 h2 {
        position: relative;
        margin-bottom:5rem;
        z-index: 11;
    }
    .sec01 .nm01 {
        position: absolute;
        top: 9rem;
        left: -15.5%;
        width: 18.45vw;
        z-index: 1;
    }
    .sec01 .nm02 {
        position: absolute;
        top: 28.6rem;
        right: -12%;
        width: 18.45vw;
        z-index: 1;
    }
    
    .sec01 .kr01 {
        position: absolute;
        top: 29.5rem;
        left: -23.5%;
        width: 18.45vw;
        z-index: 1;
    }
    .sec01 .kr02 {
        position: absolute;
        top: 14rem;
        right: -18.5%;
        width: 18.45vw;
        z-index: 1;
    }
}

@media (min-width: 769px) {
/* PC用 */
    .sec01 .inner {
        overflow:visible;
    }
}
@media (min-width: 1201px) {
/* PC用 */
    .sec01 {
        overflow:hidden;
    }
}
@media (max-width: 640px) {
/* SP用 */
    .sec01 {
        z-index:11;
    }
    .sec01 img { width:100%; height:auto;}
    
    .sec01 .inner {
        padding:6.6875rem 0 6.6875rem;
        overflow:hidden;
    }
    .sec01 h2 {
        position: relative;
        margin:0 14.4% 2.4375rem;
        z-index: 11;
    }
    .sec01 p {
        margin:0 8.12%;
    }
    .sec01 .nm02 {
        position: absolute;
        bottom: -2.075rem;
        right: -11.4666%;
        width: 56.8%;
        z-index: 201;
    }
    .sec01 .nm01 {
        position: absolute;
        top: -2.075rem;
        left: -11.4666%;
        width: 56.8%;
        z-index: 201;
    }
    
    .sec01 .kr01 {
        position: absolute;
        bottom:1.71875rem;
        left: 0%;
        width:40.1333%;
        z-index: 1;
    }
    .sec01 .kr02 {
        position: absolute;
        top:1.71875rem;
        right: 0;
        width:40.1333%;
        z-index: 1;
    }
}

/* sec02
-------------------------------------------------- */
.sec02 {
    background:url(../img/bg_sec03.png) center top repeat;
    background-size: cover;
}
.sec02 {
    padding:3.5rem 0 0rem;
}
.sec02 .inner {
    padding:0 5.3%;
}
.sec02 h2 {
    margin-bottom: 2.1875em;
    /*height: 7.625rem;*/ height: 10.625rem;
    text-indent: -999em;
    background: url(../img/sec02_ttl01.png) center top no-repeat;
    background-size:72%;
}

.sec02 ul {
    list-style:none;
}
.sec02 ul::after {
    content: "";
    clear: both;
    display: table;
}
.sec02 ul li {
    float:right;
    width:43.33333%;
    text-align: center;
}
.sec02 ul li:first-of-type {
    float:left;
}
.sec02 ul li ul li {
    float:left;
    width:50%;
    padding-left:4.6153%;
    box-sizing: border-box;
}
.sec02 ul li ul li:nth-child(odd) {
    clear:left;
    padding-right:4.6153%;
    padding-left:0;
}

.sec02 h3 {
    margin-bottom:1.1rem;
}
.sec02 h3 img {
    width:41.66666%; height: auto;
}

.sec02 ul li ul li {
    padding-bottom:2.75rem;
}
.sec02 ul li ul li .img img {
    width:100%; height:auto;
    margin-bottom: 0.85rem;
}
.sec02 ul li ul li h4 img {
    height:1.6rem; width:auto;
    margin-bottom: 1.1rem;
}
.sec02 ul li ul li .icn img {
    height:1.25rem; width:auto;
}



@media (min-width: 1025px) {
/* PC用 */
    .sec02 {
        padding:8.15rem 0 6.15rem;
    }
    .sec02 h2 {
        margin-bottom: 3em;
        position: relative;
        height: 202px;
        text-indent: -999em;
        /*background: url(../img/sec02_ttl01.png) center top no-repeat;*/
    }
    .sec02 h2::before {
        content:'';
        display: inline-block;
        position:absolute;
        left:0;
        top:-53px;
        width:100px;
        height:259px;
        background:url(../img/img_bottle.png);
    }
    .sec02 h2::after {
        content:'';
        display: inline-block;
        position:absolute;
        right:-5px;
        top:30px;
        width:116px;
        height:173px;
        background:url(../img/img_pack.png);
        background-size: 100% auto;
    }
    
    .sec02 ul {
        list-style:none;
    }
    .sec02 ul::after {
        content: "";
        clear: both;
        display: table;
    }
    .sec02 ul li {
        float:right;
        width:43.33333%;
        text-align: center;
    }
    .sec02 ul li:first-of-type {
        float:left;
    }
    .sec02 ul li ul li {
        float:left;
        width:50%;
        padding-left:4.6153%;
        box-sizing: border-box;
    }
    .sec02 ul li ul li:nth-child(odd) {
        clear:left;
        padding-right:4.6153%;
        padding-left:0;
    }
    
    .sec02 h3 {
        margin-bottom:1.1rem;
    }
    .sec02 h3 img {
        width:41.66666%; height: auto;
    }
    
    .sec02 ul li ul li {
        padding-bottom:2.75rem;
    }
    .sec02 ul li ul li .img img {
        width:100%; height:auto;
        margin-bottom: 0.85rem;
    }
    .sec02 ul li ul li h4 img {
        height:2.375rem; width:auto;
        margin-bottom: 1.1rem;
    }
    .sec02 ul li ul li .icn img {
        height:1.6875rem; width:auto;
    }
}
@media (max-width: 640px) {
/* SP用 */
    .sec02 {
        padding:3.5rem 0 0rem;
    }
    .sec02 .inner {
        padding:0 5.3%;
    }
    .sec02 h2 {
        margin-bottom: 2.1875em;
        height: 5.625rem;
        text-indent: -999em;
        background: url(../img/sec02_ttl01.png) center top no-repeat;
        background-size:100%;
    }
    
    .sec02 ul {
        list-style:none;
        padding:0;
    }
    .sec02 ul::after {
        content: "";
        clear: both;
        display: table;
    }
    .sec02 ul li {
        float:none;
        width:100%;
        text-align: center;
        padding-bottom:1.5625rem;
    }
    .sec02 ul li ul li {
        float:left;
        width:50%;
        padding-left:4.6153%;
        padding-bottom:1.5625rem;
        box-sizing: border-box;
    }
    .sec02 ul li ul li:nth-child(odd) {
        clear:left;
        padding-right:4.6153%;
        padding-left:0;
    }
    
    .sec02 h3 {
        margin-bottom:1.1rem;
    }
    .sec02 h3 img {
        width:41.66666%; height: auto;
    }
    
    .sec02 ul li ul li {
    }
    .sec02 ul li ul li .img img {
        width:100%; height:auto;
        margin-bottom: 0.85rem;
    }
    .sec02 ul li ul li h4 img {
        height:1.2rem; width:auto;
        margin-bottom: 0.75rem;
    }
    .sec02 ul li ul li .icn img {
        height:1rem; width:auto;
    }
}

/* sec03
-------------------------------------------------- */
.sec03 {
    padding:6.8125rem 0 3.75rem;
    text-align: center;
}
.sec03 .inner {
    background:url(../img/sec03_bg01.png) center 11.5rem no-repeat;
    background-size: 90%;
}
.sec03 img { width:100%; height:auto;}

.sec03 h2 {
    margin:0 5.333% 5rem;
    z-index: 11;
}
.sec03 h3 {
    margin:0 5.333% 8.9375rem;
}
.sec03 .saponin,
.sec03 .drink  {
    position:relative;
    margin:0 5.33333% 8.125%;
}
.sec03 .fukidashi {
    position:absolute;
    top:-6rem;
    left:0;
}

@media (min-width: 1025px) {
/* PC用 */
    .sec03 {
        padding:6.8125rem 0 3.75rem;
        text-align: center;
    }
    .sec03 img { width:auto; height:auto;}
    .sec03 .inner {
        background:url(../img/sec03_bg01.png) center 13.5rem no-repeat;
        background-size:100%;
    }
    .sec03 h2 {
        width:100%;
        margin:0 0 5rem;
        z-index: 11;
    }
    .sec03 h3 {
        margin:0 0 8.9375rem;
    }
    .sec03 .saponin {
        position:relative;
        margin:0 0 8.125%;
    }
    .sec03 .fukidashi {
        position:absolute;
        top:-3rem;
        left:18.58333%;
    }
}
@media (max-width: 640px) {
/* SP用 */
    .sec03 {
        padding:2.75rem 0 3.175rem;
        text-align: center;
    }
    .sec03 img { width:100%; height:auto;}
    .sec03 .inner {
        background:url(../img/sec03_bg01.png) center 9.4rem no-repeat;
        background-size:100% auto;
    }
    .sec03 h2 {
        margin:0 16.9333% 2.5rem;
        z-index: 11;
    }
    .sec03 h3 {
        margin:0 8.6666% 8.625rem;
    }
    .sec03 .saponin {
        position:relative;
        margin-bottom:8.125%;
    }
    .sec03 .ne,
    .sec03 .drink {
        margin:0 5.3333%;
    }
    .sec03 .fukidashi {
        position:absolute;
        top:-6.15625rem;
        left:5.3333%;
        width:68.26666%;
    }
}

/* footer
-------------------------------------------------- */
@media (min-width: 641px) {
/* PC用 */
}
@media (max-width: 640px) {
/* SP用 */
}

/* 
-------------------------------------------------- */
@media (min-width: 641px) {
/* PC用 */
}
@media (max-width: 640px) {
/* SP用 */
}