/******************** kv ********************/

#kv{
    background: url(../img/top/bg_01.png) center 0 no-repeat;
    background-size: 4000px auto;
    text-align: center;
}

#kv .inner{
    position: relative;
}

#kv h1{
    animation-delay: 1.5s;
    position: relative;
    z-index: 100;
}

#kv h1 img{
    margin:110px auto 0; 
    width:540px;
}

#kv h1 span{
    font-family: Noto Sans JP;
    margin-top:15px;
    display: block;
}

#kv ul li{
    width:350px;
    position:absolute;
}

#kv ul li:first-child{
    top:30px;
    left:-100px;
    animation-delay: 0.3s;
}

#kv ul li:nth-child(2){
    bottom:130px;
    left:-140px;
    animation-delay: 0.6s;
}

#kv ul li:nth-child(3){
    top:50px;
    right:-75px;
    animation-delay: 0.9s;
}

#kv ul li:nth-child(4){
    bottom:120px;
    right:-130px;
    animation-delay: 1.2s;
}


/******************** nav ********************/

nav{
    margin-top:-100px;
    background: url(../img/top/bg_02.png) center 0 no-repeat;
    background-size: 4000px auto;
    text-align: center;
    padding-bottom:500px;
}

#nav_head{
    position: absolute;
    left: 0;
    right: 0;
    margin: auto;
}

nav ul{
    max-width: 950px;
    width:100%;
    padding:120px 0 0;
    margin:0 auto;
    display: flex;
    justify-content: space-between;
    position:relative;
    z-index: 100;
    animation-delay: 1.8s;
}

nav ul li img{
    width:300px;
}

#nav_head.fixed {
    position: fixed !important;
    top: 0;
    width:100% !important;
    padding:5px 0;
    margin:0 auto;
    z-index: 1000 !important;
    background:rgba(255, 255, 255, 0.7);
    transition: all 0.3s ease 0s;
}

.fixed ul{
    padding:0;
}


/******************** onayami ********************/

#onayami{
    margin-top:-550px;
    z-index: 80;
}

#onayami .inner{
    padding-top:280px;
    padding-bottom:100px;
    position: relative;
    z-index:90;
}

#onayami ul{
    width:750px;
    height:250px;
    margin:0 auto;
    background: url(../img/top/onayami_bg.png) center 0 no-repeat;
    background-size: 700px 250px;
    position: relative;
}

#onayami ul li:first-child{
    width:390px;
    position: absolute;
    top:70px;
    left: -80px;
    opacity:0;
    animation-delay: 0.6s;
}

#onayami ul li:nth-child(2){
    width:320px;
    position: absolute;
    top:70px;
    right: -40px;
    opacity:0;
    animation-delay: 0.9s;
}

.fukidashi {
    animation-name: fukidashiAnime;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
    animation-direction: alternate;
    animation-duration: 1.5s;
}

@keyframes fukidashiAnime {
    from {
        transform: scale(0.95);
    }

    to {
        transform: scale(1);
    }
}

.fukidashi2 {
    animation-name: fukidashiAnime2;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
    animation-direction: alternate;
    animation-duration: 1.5s;
}

@keyframes fukidashiAnime2 {
    from {
        transform: scale(1);
    }

    to {
        transform: scale(0.95);
    }
}

/******************** point ********************/

#point{
    margin-top:-210px;
    padding-bottom:70px;
    background: url(../img/top/bg_03.png) center 0 no-repeat;
    background-size: 4000px auto;
    position:relative;
    z-index:70;
}

#point .inner{
    padding-top:130px;
}

#point_link{
    margin-top:-0px;
    padding-top:10px;
}

#point h2{
    width:580px;
    margin:0 auto;
}

#point .box{
    margin:20px auto 0;
    max-width:900px;
    display: flex;
    justify-content:space-between;
}

#point .product{
    width:38%;
    background:url(../img/top/kaiketsu_product.png) right 80% no-repeat;
    background-size:70% auto;
    position:relative;
}

#point .product ul li:first-child{
    width:35%;
    position: absolute;
    top:5%;
    left:0;
}

#point .product ul li:nth-child(2){
    width:35%;
    position: absolute;
    bottom:20%;
    right:-15%;
}

#point .text{
    width:60%;
}

#point .graph{
    margin:30px auto;
    max-width:890px;
}

/******************** ykr_recipe ********************/

#ykr_recipe{
    margin-top:-120px;
    padding:160px 0 120px;
    background: url(../img/top/bg_04.png) center 0 no-repeat;
    background-size: 4000px auto;
    position:relative;
}

#ykr_recipe_link{
    margin-top:-10px;
    padding-top:10px;
}

#ykr_recipe h2{
    width:710px;
    margin:0 auto;
}

#ykr_recipe .prof{
    width:710px;
    margin:-150px auto 0;
}

#ykr_recipe .prof img{
    width:330px;
}

#ykr_recipe .prof p{
    margin-top:0.5em;
    width:485px;
}

/******************** ykr01 ********************/

.ykr01{
    margin-top:30px;
}

.ykr01 .box{
    max-width:950px;
    display: flex;
    justify-content:space-between;
    align-items: flex-start;
}

.ykr01 .box .main  {
    max-width:505px;
    width:55%;
    height:inherit;
    position:relative;
}

.ykr01 .box .main a {
    position:absolute;
    left:0;
    bottom:-13%;
    width:25%;
}

.ykr01 .box .detail{
    max-width: 420px;
    width:45%;
    padding:25px 0 0;
    margin-left:20px;
}

.ykr01 .box .detail img.copy{
    width:245px;
}

.ykr01 .box .detail h3{
    font-size:2.9rem;
    margin:10px 0 -10px;
}

.ykr01 .box .detail a.btn{
    text-align: right;
    display: block;
}

.ykr01 .box .detail a.btn img{
    width:185px;
    margin-top:15px;
}

.ykr01 .box .detail .comment img{
    width:380px;
    margin-bottom:-5px;
}

.ykr01 img.hikaku{
    width:720px;
    margin:40px auto 0;
    display: block;
}

/******************** ykr_recipe02 ********************/

#ykr_recipe02{
    padding:160px 0 150px;
    background: url(../img/top/bg_05.png) center 0 no-repeat;
    background-size: 4000px auto;
    position:relative;
    z-index:80;
}

#ykr_recipe02 .inner{
    max-width:910px;
    display: flex;
    justify-content:space-between;
}

#ykr_recipe02 .inner .ykr02,
#ykr_recipe02 .inner .ykr03{
    margin-top:100px;
    max-width:425px;
    width:50%;
    background:#fff;
    text-align: center;
}

#ykr_recipe02 .inner .ykr03{
    margin-left:20px;
}

#ykr_recipe02 .inner .ykr02 .main,
#ykr_recipe02 .inner .ykr03 .main{
    max-width:400px;
    margin:-120px auto 20px;
}

#ykr_recipe02 .inner .ykr02 h3,
#ykr_recipe02 .inner .ykr03 h3{
    font-size:2.8rem;
    position:relative;
}

#ykr_recipe02 .inner .ykr02 .copy{
    width:120px;
    position: absolute;
    left:-30px;
}

#ykr_recipe02 .inner .ykr03 .copy{
    width:140px;
    position: absolute;
    left:-50px;
}

#ykr_recipe02 .inner .ykr02 .line,
#ykr_recipe02 .inner .ykr03 .line{
    width:300px;
    margin:-10px 0 15px;
}

#ykr_recipe02 .inner .ykr02 .btn img,
#ykr_recipe02 .inner .ykr03 .btn img{
    width:185px;
}

#ykr_recipe02 .inner .ykr02 .comment img,
#ykr_recipe02 .inner .ykr03 .comment img{
    width:335px;
    margin-top:20px;
}

#ykr_recipe02 .inner .ykr02 .comment p,
#ykr_recipe02 .inner .ykr03 .comment p{
    width:335px;
    text-align: left;
    margin:10px auto;
}

#ykr_recipe02 .inner .ykr02 img.hikaku,
#ykr_recipe02 .inner .ykr03 img.hikaku{
    width:335px;
    margin:10px auto 30px;
}


/******************** abc_recipe ********************/

#abc_recipe{
    margin-top:-260px;
    padding:180px 0 100px;
    background: url(../img/top/bg_06.png) center 0 no-repeat;
    background-size: 4000px auto;
}

#abc_recipe_link{
    margin-top:-10px;
    padding-top:10px;
}

#abc_recipe .box{
    max-width:950px;
    margin:40px auto 80px;
    display: flex;
    justify-content:space-between;
    position:relative;
    z-index:90;
}

#abc_recipe .box .main{
    max-width:505px;
    width:55%;
}

#abc_recipe .box .detail{
    max-width: 420px;
    width:45%;
    margin-top:-60px;
    margin-left:20px;
}

#abc_recipe .box .detail .copy{
    text-align: right;
    display: block;
}

#abc_recipe .box .detail .copy img{
    width:60%;
}

#abc_recipe .box .detail h3{
    font-size:2.9rem;
    margin:-15px 0 -10px;
}

#abc_recipe .box .detail a.btn{
    text-align: right;
    display: block;
}

#abc_recipe .box .detail a.btn img{
    width:185px;
    margin-top:15px;
}

#abc_recipe .box .detail .sns{
    display: flex;
    justify-content:space-between;
    margin-top:30px;
}

#abc_recipe .box .detail .sns img{
    width:190px;
}



/******************** other_recipe ********************/

#other_recipe{
    margin-top:-60px;
    padding-top:10px;
    text-align:center;
}

#other_recipe h2{
    width:685px;
    margin:0 auto;
}

#other_recipe ul{
    width:720px;
    margin:20px auto;
    display: flex;
    flex-wrap: wrap;
    justify-content:space-between;
}

#other_recipe ul li{
    width:340px;
    margin:30px 0;
}

#other_recipe ul li .main{
    position:relative;
}

#other_recipe ul li .main .copy{
    position: absolute;
    left:-40px;
    top:-40px;
    width:200px;
}

#other_recipe ul li h3{
    font-size:2.8rem;
    margin:10px 0 -10px;
}

#other_recipe ul li a.btn img{
    width:185px;
    margin-top:15px;
}


/******************** SP ********************/

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

/******************** SP kv ********************/

#kv{
    background: url(../img/top/sp_bg_01.png) center 0 no-repeat;
    background-size: contain;
}

#kv  h1  img{
    width:90%;
}

#kv ul li{
    width:30%;
}

#kv ul li:first-child{
    top:30px;
    left:-30px;
    animation-delay: 0.3s;
}

#kv ul li:nth-child(2){
    top:10px;
    left:22%;
    animation-delay: 0.6s;
}

#kv ul li:nth-child(3){
    top:60px;
    right:-40px;
    animation-delay: 1.2s;
}
    
#kv ul li:nth-child(4){
    top:-20px;
    right:17%;
    animation-delay: 0.9s;
}

/******************** SP nav ********************/

nav{
    margin-top:20px;
    background: #e86771;
    padding:0;
}

#nav_head{
    position: relative !important;
}

nav ul{
    background: #e86771;
    padding:0;
    display: block;
    animation-delay: 1.8s;
}

nav ul li{
    padding:15px 0;
    border-bottom:1px solid #fff;
}

nav ul li:last-child{
    border:none;
}

nav ul li img{
    width:90%;
    margin:0 auto;
}

#nav_head.fixed{
    position: relative !important;
}


/******************** SP onayami ********************/

#onayami{
    background: url(../img/top/sp_bg_02.png) center 0 no-repeat;
    background-size: cover;
    margin:0px;
    z-index: 80;
    padding-top:30px;
}

#onayami .inner{
    padding:0;
}

#onayami .inner .bgimg{
    width:90%;
    margin:0 auto;
}

#onayami ul{
    width:auto;
    height:auto;
    background:none;
}

#onayami ul li:first-child{
    width:60%;
    position: absolute;
    margin-top:-60%;
    left: 20%;
    opacity:0;
    animation-delay: 0.6s;
}

#onayami ul li:nth-child(2){
    width:65%;
    position: absolute;
    margin-top: -38%;
    left: 5%;
    opacity:0;
    animation-delay: 0.9s;
}

/******************** SP point ********************/

#point{
    margin-top:-30px;
    padding-bottom:50px;
    background: url(../img/top/sp_bg_03.png) center 0 no-repeat;
    background-size: cover;
    position:relative;
}

#point .inner{
    padding-top:70px;
}

#point h2{
    width:90%;
    margin:0 auto;
}

#point .box{
    margin:30px auto;
    width:auto;
    display: block;
}

#point .product{
    width:70%;
    margin:30px auto;
    background:none;
    position:relative;
}

#point .product ul li:first-child{
    width:85%;
    position: inherit;
}

#point .product ul li:nth-child(2){
    width:100%;
    position: inherit;
}

#point .text{
    width:90%;
    margin:0 auto;
}

#point .graph{
    width:90%;
}


/******************** SP ykr_recipe ********************/

#ykr_recipe{
    margin-top:-120px;
    background: url(../img/top/sp_bg_04.png) center 0 no-repeat;
    background-size: cover;
}

#ykr_recipe h2{
    width:90%;
    margin:0 auto;
}

#ykr_recipe .prof{
    width:90%;
    margin:-20px auto 0;
}

#ykr_recipe .prof img{
    width:100%;
}

/******************** SP ykr01 ********************/

.ykr01{
    margin-top:30px;
    text-align:center;
}

.ykr01 .box{
    width:90%;
    margin:0 auto;
    display: block;
}

.ykr01 .box .main{
    max-width: 750px;
    width:100%;
    margin-left:-1%;
}

.ykr01 .box .detail{
    max-width: 750px;
    width: 100%;
    margin:0 auto;
    padding:25px 0 0;
}

.ykr01 .box .detail img.copy{
    width:60%;
    margin-left:10%;
}

.ykr01 .box .detail h3{
    font-size:2.9rem;
    margin:10px auto -10px;
}

.ykr01 .box .detail a.btn{
    text-align: center;
    display: block;
}

.ykr01 .box .detail a.btn img{
    width:50%;
    margin:15px 0  20px;
}

.ykr01 .box .detail .comment{
    text-align: left;
}

.ykr01 .box .detail .comment img{
    width:100%;
    margin-bottom:-5px;
}
.ykr01 img.hikaku{
    width:90%;
    margin:40px auto 0;
    display: block;
}

/******************** SP ykr_recipe02 ********************/

#ykr_recipe02{
    margin:50px 0 0;
    padding:10px 0 100px;
    background: url(../img/top/sp_bg_05.png) center 0 no-repeat;
    background-size: cover;
    position:relative;
    text-align: center;
}

#ykr_recipe02 .inner{
    width:90%;
    margin:0 auto;
    display: block;
    justify-content:space-between;
}

#ykr_recipe02 .inner .ykr02,
#ykr_recipe02 .inner .ykr03{
    margin-top:70px;
    width:100%;
    max-width: 750px;
    background:none;
    text-align: center;
}

#ykr_recipe02 .inner .ykr03{
    margin-left:0;
}

#ykr_recipe02 .inner .ykr02 .main,
#ykr_recipe02 .inner .ykr03 .main{
    width:100%;
    max-width: 750px;
    margin:0 auto 20px;
    margin-left:-1%;
}

#ykr_recipe02 .inner .ykr02 h3,
#ykr_recipe02 .inner .ykr03 h3{
    font-size:2.8rem;
    position:relative;
}

#ykr_recipe02 .inner .ykr02 .copy{
    width:60%;
    margin:10px auto;
    position: static;
}

#ykr_recipe02 .inner .ykr03 .copy{
    width:70%;
    margin:10px auto;
    position: static;
}

#ykr_recipe02 .inner .ykr02 .line,
#ykr_recipe02 .inner .ykr03 .line{
    width:100%;
    margin:-10px 0 15px;
}

#ykr_recipe02 .inner .ykr02 .btn img,
#ykr_recipe02 .inner .ykr03 .btn img{
    width:50%;
}

#ykr_recipe02 .inner .ykr02 .comment img,
#ykr_recipe02 .inner .ykr03 .comment img{
    width:100%;
    margin-top:20px;
}

#ykr_recipe02 .inner .ykr02 .comment p,
#ykr_recipe02 .inner .ykr03 .comment p{
    width:100%;
    text-align: left;
    margin:10px auto;
}

#ykr_recipe02 .inner .ykr02 img.hikaku,
#ykr_recipe02 .inner .ykr03 img.hikaku{
    width:100%;
    margin:40px auto 0;
}


/******************** SP abc_recipe ********************/

#abc_recipe{
    margin-top:-60px;
    padding:40px 0 10px;
    background: url(../img/top/sp_bg_06.png) center 0 no-repeat ;
    background-size: cover;
    position:relative;
    z-index:100;
    text-align: center;
}

#abc_recipe .box{
    width:90%;
    margin:40px auto 80px;
    display: block;
}

#abc_recipe .box .main{
    width:100%;
    max-width: 750px;
    margin-left:-1%;
}

#abc_recipe .box .detail{
    width: 100%;
    max-width: 750px;
    margin-top:0px;
    padding:25px 0 0;
    margin-left:0;
}

#abc_recipe .box .detail .copy{
    text-align: right;
    display: block;
}

#abc_recipe .box .detail .copy  img{
    width:60%;
}

#abc_recipe .box .detail h3{
    font-size:2.9rem;
    margin:10px 0 -10px;
}

#abc_recipe .box .detail a.btn{
    text-align: center;
    display: block;
}

#abc_recipe .box .detail a.btn img{
    width:50%;
    margin-top:15px;
}

#abc_recipe .box .detail .sns img{
    width:90%;
}


/******************** SP other_recipe ********************/

#other_recipe{
    margin-top:30px;
    text-align:center;
}

#other_recipe h2{
    width:90%;
    margin:0 auto 60px;
}

#other_recipe ul{
    width:90%;
    margin:0 auto;
    display: block;
}

#other_recipe ul li{
    width:90%;
    margin:0 auto 70px;
}

#other_recipe ul li .main{
    position:relative;
}

#other_recipe ul li .main .copy{
    position: absolute;
    left:-40px;
    top:-40px;
    width:50%;
}

#other_recipe ul li h3{
    font-size:2.8rem;
    margin:10px 0 -10px;
}

#other_recipe ul li a.btn img{
    width:50%;
    margin-top:15px;
}

}/*SP media*/

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

    #onayami ul li:first-child{
        width:60%;
        position: absolute;
        margin-top:-66%;
        left: 20%;
        opacity:0;
        animation-delay: 0.6s;
    }
    
    #onayami ul li:nth-child(2){
        width:65%;
        position: absolute;
        margin-top: -44%;
        left: 5%;
        opacity:0;
        animation-delay: 0.9s;
    }
}