.kv{
    line-height: 0;
    .button{
        width: 82%;
        margin:-95px auto 10px;
        @media(min-width:750px){
            margin:-195px auto 10px;
        }
    }
}
.sec01{
    .inner{
     position: relative;
     padding: 30px 0 0;
    background: url(/template/default/img/sp/qusomeretinoa/2508/sec01_bg.jpg) no-repeat center top;
    background-size: 100% auto;
    aspect-ratio: 750/1268;
    }
    .img01{
        position: relative;
        z-index: 4;
        width: 58%;
        padding: 0 0 0 20px;
        margin: 0 0 20px;
    }
    .img02{
        position: absolute;
        right: 0;
        top: 30px;
        width: 48%;
    }
    .img03{
        position: relative;
        z-index: 4;
        width: 65%;
        margin: 0 0 35px;
    }
    .img04{
        width: 65%;
        margin: auto;
    }
    .img05{
        margin: 20px 0 0;
    }
}
.sec02{
    background: url(/template/default/img/sp/qusomeretinoa/2508/sec02_img01.jpg) no-repeat center top;
    background-size: cover;
    margin: 40px 0 0;
    padding: 0 0 20px;
    .img01{
        position: relative;
        top: -20px;
    }
    .content{
        width: 95%;
        margin: 0 auto 30px 0;
        .list{
            .item{
                display: flex;
                justify-content: space-between;
                margin: 0 0 20px;
                .item-text{ 
                    width: 64%;
                }
                .item-img{
                    width: 30%;
                }
            }
        }
    }
}
.sec03{
    padding: 30px 0 50px;
    .content{
        position: relative;
    }
    .img01{
        margin: 0 0 20px;
    }
    .img02{
        margin: 0 0 30px;
    }
    .img03{
        position: absolute;
        right: 0;
        bottom: -60px;
        width: 30%;
    }
}
.sec04{
    background: url(/template/default/img/sp/qusomeretinoa/2508/sec04_bg.jpg) no-repeat center top;
    background-size: 100% auto;
    aspect-ratio: 750/1373;
    margin: 0 0 20px;
    .img02{
        padding: 15px 0 20px;
    }
    .content{
        width: 95%;
        margin: 0 0 30px auto;
        .list{
            .item{
                position: relative;
                display: flex;
                justify-content: space-between;
                margin: 0 0 25px;
                .item-img{ 
                    position: absolute;
                    width: 30%;
                    bottom: -20px;
                    left: 0;
                }
                .item-text{
                    margin: 0 0 0 auto;
                    width: 85%;
                }
            }
        }
    }
    .texture{
        width: 40%;
        margin: -5px auto 0;
    }
    .img03{
        margin-top: -25px;
    }
}
.sec05{
	background: #bad4f7;
    .img01{
        line-height: 0;
    }
    .img02{
        line-height: 0;
    }
    .img03{
        line-height: 0;
    }
    .video{
        text-align: center;
        background: url(/template/default/img/sp/qusomeretinoa/2508/sec05_img03.jpg) no-repeat center top;
        background-size: 100% auto;
        aspect-ratio: 75/40;

    }
    video{
        width: 94%;
        aspect-ratio: 16/9;
        margin: auto;
    }
    .img04{
        line-height: 0;
    }
    .img05{
        line-height: 0;
    }
}
.sec06{
    padding: 30px 0 50px;
    .inner{
        width: 90%;
        margin: auto;
    }
    .img01{
        padding: 0 0 10px;
    }
    .block{
        background: #f5f5f5;
        margin:90px 0 0;
        padding: 0 15px 20px;
        .pic{
            position: relative;
            width: 100%;
            margin:auto;
            top: -60px;
        }
        .list{
            margin-top: -35px;
            .item{
                display: flex;
                justify-content: space-between;
                .item-img{
                    width: 30%;
                }
                .item-text{
                    width: 65%; 
                }
            }
        }
    }
    .img02{
        margin: 40px 0 0;
    }
}
.sec07{
    background: url(/template/default/img/sp/qusomeretinoa/2508/sec07_bg.jpg) no-repeat center top;
    background-size: cover;
    padding: 20px 0 120px;
    .img01{
        text-align: center;
        margin: 0 0 30px;
    }
}
.sec08{
    position: relative;
    background: url(/template/default/img/sp/qusomeretinoa/2508/sec08_bg.jpg) no-repeat center top;
    background-size: 100% auto;
    aspect-ratio: 75/161;
    padding: 0 0 8px;
    .img01{
        position: relative;
        width: 55%;
        margin: 0 auto 10px;
        top: -30px;
        @media(min-width:750px){
            top: -60px;
        }
    }
    .img02{
        margin: -30px 0 20px;
        @media(min-width:750px){
            margin: -60px 0 20px;
        }
    }
    .img03{
        margin: 0 0 35px;
    }
    .img05{
        position: absolute;
        bottom: 0;
        padding: 0 0 8px;
    }
}  

.c-title{
    text-align: center;
    margin: 0 0 30px;
    .en{
        display: block;
        background: #ffde00;
        color: #fff;
        font-weight: bold;
        font-size: 13px;
        width: 150px;
        padding: 2px 0;
        line-height: 1;
        letter-spacing: .2em;
        margin:0 auto 4px;
        @media(min-width:750px){
            font-size: 16px;
        }
    }
    .jp{
        display: block;
        font-weight: bold;
        font-size: 24px;
        @media(min-width:750px){
            font-size: 36px;
        }
    }
}



.faq{ background:#fff; background-size:cover; padding: 35px 0; }
.faq_wrapper{ width: 100%; margin: auto; }
.faq .q_icon{ font-family: "Arial"; color: #ffde00; font-size: 3rem; margin-right: 10px;line-height: 1; }
.faq .c-list{ background: #fff;border-top:1px solid #eee; }
.faq .q { display: flex; align-items: center; font-size: 3rem; font-weight: normal; font-size: 1.4rem; padding: 6px 20px; }
.faq .txt{ font-weight: bold; }
.faq .a { background: #f7f7f7; padding: 20px 20px;}
.faq .a .inner{
    display: flex;
}
.faq dt .i { position: relative; display: block; width: 30px; height: 30px; margin: 0 0 0 auto; flex-shrink: 0; }
.faq dt .i::before, 
.faq dt .i::after { content: ''; display: block; width: 15px; height: 1px; background: #000; position: absolute; right: 25%; top: 50%; transform: translateY(-50%); }
.faq dt .i::after { background: #000; transform: translateY(-50%) rotate(90deg); transition: 0.5s; }
.faq dt.active .i::after { transform: rotate(0); transition: 0.5s; height: 0px; }

@media only screen and (min-width: 750px) {
	.faq { background-size: cover; padding: 40px 0; }
	.faq_wrapper { width: auto; }
	.faq .q { font-size: 1.6rem; cursor: pointer; }
	.faq .a { font-size: 20px; }
    .faq p{
        font-size: 22px;
    }
}


.howto{
    padding: 30px 0;
    .content{
        width: 90%;
        margin: auto;
        .list{
            .item{
                display: flex;
                justify-content: space-between;
                align-items: center;
                margin: 0 0 15px;
                .item-img{  
                    width: 35%;
                }
                .item-text{
                    width: 60%;
                    .step{
                        font-size: 16px;
                        @media(min-width:750px){
                            font-size: 20px;
                        }
                    }
                    b{
                        font-size: 130%;
                    }
                    .desc{
                        margin: 5px 0 0;
                        font-size: 14px;
                        @media(min-width:750px){
                            font-size: 18px;
                        }
                    }
                }
            }
        }
        .note{
            color: #888;
            margin: 25px 0 0;
            font-size: 11px;
        }
    }
}
.ingredients{
    margin: 20px 0;
    .c-title{
        margin: 0 0 25px;
    }
    .inner{
        background: #f7f7f7;
        padding: 25px 15px;
        width: 90%;
        margin: auto;
        @media(min-width:750px){
            font-size: 16px;
        }
    }
}


@media(min-width:750px){
    .qusomeretinoa{
        width: 750px;
        margin: auto;
        box-shadow: 0px 0px 15px -5px #4d4d4d;
        padding-bottom: 60px;
    }
}    




.fadeInRight,
.fadeInLeft,
.fadeIn,.fadeInTop {
	animation-duration:2s;

}
.fadeInRight {
    -webkit-animation-name: fadeInRight2;
    animation-name: fadeInRight2;
}
.fadeInLeft {
    -webkit-animation-name: fadeInLeft2;
    animation-name: fadeInLeft2;
}
.fadeInTop {
    -webkit-animation-name: fadeInTop;
    animation-name: fadeInTop;
}
@keyframes fadeInLeft2 {
  from {
    opacity: 0;
    -webkit-transform: translate3d(-10%, 0, 0);
    transform: translate3d(-10%, 0, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
@keyframes fadeInRight2 {
  from {
    opacity: 0;
    -webkit-transform: translate3d(10%, 0, 0);
    transform: translate3d(10%, 0, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
@keyframes fadeInTop {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, 10%, 0);
    transform: translate3d(0, 10%, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}