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

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

#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;
    width: 40%;
    position:absolute;
}
#kv ul li img{
    max-width: 350px;
    width: 90%;
}

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

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

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

#kv ul li:nth-child(4){
    bottom:50px;
    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: center;
    position:relative;
    z-index: 100;
    animation-delay: 1.8s;
    gap:30px;
}

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:200px;
    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:80% 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 .bestfor{
    margin: 50px auto 0;
    max-width: 950px;
    width: 90%;
}
#point .bestfor h3{
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.5rem;
    gap:10px;
}
#point .bestfor h3:before,
#point .bestfor h3:after {
    content: '';
    border-bottom: 3px dotted #345b7b;
    flex: 1 1 auto;
}
#point .bestfor h3 img{
    width: 60px;
}

#point .bestfor ul{
    display: flex;
    justify-content: space-between;
    margin: 50px 0 0;
}
#point .bestfor ul li{
    width: 31%;
    background:#fffff2;
    border-radius: 20px;
    text-align: center;
    font-family: kiwi maru;
    position: relative;
    padding: 35px 10px 10px;
}
#point .bestfor ul li img{
    position: absolute;
    top:-40px;
    width: 80px;
    right: 0;
    left: 0;
    margin: 0 auto;
}
#point .bestfor ul li:first-child img{
    width: 70px;
}



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

#other_recipe{
    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{
    margin: 110px auto 0;
    width:90%;
}

#kv ul li{
    width:35%;
}

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

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

#kv ul li:nth-child(3){
    top:60px;
    right:-60px;
    animation-delay: 1.2s;
}
#kv ul li:nth-child(4){
    top:10px;
    right:15%;
    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:60px;
    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 .bestfor {
    margin:0 auto;
}
#point .bestfor h3 {
    font-size: 2rem;
}
#point .bestfor ul {
    flex-direction: column;
    gap:30px;
    margin: 20px 0 0;
}
#point .bestfor ul li {
    width: 100%;
    padding: 30px 10px 10px;
    font-size: 1.6rem;
}
#point .bestfor ul li img {
    top: -25px;
    width: 70px;
}
#point .bestfor ul li:first-child img {
    width: 60px;
}

/******************** 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.5rem;
    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;
    }
}