@charset "UTF-8";
/* =====================================
	全体設定
===================================== */

html{
    font-size: 62.5%;
}

/* a{
	color:#4b4b4b;
	text-decoration:none;
} */

.sp{
	display:none !important;
}

body{
	position: relative;
	margin: 0 auto;
	font-family: "游ゴシック", "游ゴシック体", "Yu Gothic Medium", YuGothic, "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	color: #4b4b4b;
    line-height: 1.5;
	text-align: left;
	text-size-adjust: 100%;
	-webkit-text-size-adjust: 100%;/*Chrome,Safari*/
	-ms-text-size-adjust: 100%;/*EgdeMobile*/
	-moz-text-size-adjust: 100%;/*firefox*/
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

.wrapper{
    width: 100%;
    margin: 0 auto;
}

@media screen and (min-width: 768px) {
    .wrapper{
        width: 750px;
    }
}


/* =====================================
	main
===================================== */

img{
    max-width: 100%;
    width: 100%;
    height: auto;
    display: block;
    transition: opacity .4s linear;
}

img.lazyload {
    opacity: 0;
}
img.lazyloaded {
    opacity: 1;
}

.cv_area{
    position: relative;
}

.flexbox{
    position: absolute;
    display: flex;
    justify-content: center;
    width: 100%;
    bottom: 4%;
}

.flexbox .cv_btn{
    width: 47%;
}

.flexbox .cv_btn img{
    width: auto;
    max-width: 100%;
}

.movie01{
    position: relative;
}

.movie01 video{
    position: absolute;
    top: 43px;
    left: 50%;
    transform: translateX(-50%);
    width: 84.26666666666667%;
}

@media screen and (min-width: 768px) {
    .movie01 video{
        top: 85px;
    }
}

.anime01{
    position: relative;
}

.anime01 .gif01{
    position: absolute;
    top: 122px;
    left: 50%;
    transform: translateX(-50%);
    width: 60.53333333333333%;
}

@media screen and (min-width: 768px) {
    .anime01 .gif01{
        top: 256px;
    }
}
.tab01{
    width: 92%;
    margin: 0 auto;
    border-bottom: 2px solid #9a8347;
    display: flex;
    justify-content: space-between;
    padding: 0 4%;
}

.tab01 li{
    width: 31.158%;
    border: 2px solid #9a8347;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    border-bottom: none;
    font-size: 3.8vw;
    text-align: center;
    line-height: 1;
    color: #9a8347;
    font-weight: bold;
    padding: 9px 0 9px;
    cursor: pointer;
}

.tab01 li.active{
    background: #9a8347;
    color: #fff;
}

@media screen and (min-width: 768px) {
    .tab01 li{
        font-size: 28px;
        padding: 10px 0 10px;
    }
}

.semilong, .long{
    display: none;
}

.difference{
    padding-bottom: 65px;
}

.difference h2{
    margin-bottom: 14px;
}

.difference dt{
    position: relative;
    margin-bottom: 10px;
    cursor: pointer;
    text-align: center;
}
.difference dt .accordion-ico{
    position: absolute;
    width: 4%;
    right: 4%;
    top:45%;
    transform: translate(-20%, -20%) rotate(0deg);
    transition: 0.5s;
}

@media screen and (min-width: 768px) {
    .difference dt .accordion-ico{
        right: 6%;
    }
}

.difference .active .accordion-ico{
    transform: translate(-20%, -20%) rotate(180deg);
}

.difference dt img{
    max-width: 100%;
    width: auto;
}

.difference dd{
    padding: 10px 0 20px;
    display: none;
}

.tab02{
    margin: 0 auto 20px;
    border-bottom: 4px solid #03a5a7;
    display: flex;
    justify-content: space-between;
}

@media screen and (min-width: 768px) {
    .tab02{
        margin: 0 auto 30px;
    }
}

.tab02 li{
    background: #e6e6e6;
    width: 31.884%;
    font-size: 4vw;
    text-align: center;
    line-height: 1.1337890625;
    color: #231815;
    padding: 19px 0 18px;
    cursor: pointer;
}

.tab02 li.active{
    background: #03a5a7;
    color: #fff;
}

@media screen and (min-width: 768px) {
    .tab02 li{
        font-size: 30px;
    }
}

.howto, .product{
    display: none;
}

.faq{
    margin-top: 20px;
    padding: 0 4%;
}

@media screen and (min-width: 768px) {
    .faq{
        margin-top: 30px;
    }
}

.qa__area{
    margin: 40px 0 20px;
}

.qa__title{
    padding-bottom: 20px;
    text-align: center;
}

@media screen and (min-width: 768px) {
    .qa__title{
        padding-bottom: 30px;
    }
}

.qa__title img{
    width: 60%;
    max-width:100%;
}

@media screen and (min-width: 768px) {
    .qa__title img{
        width: auto;
    }
}
.qa__wrap{
    padding:10px 4%;
}

.qa__content{
    border: 1px solid #03A6A6;
    border-radius: 30px;
    padding:2% 3%;
    margin-bottom: 15px;
}

@media screen and (min-width: 768px) {
.qa__content{
    padding:1% 2%;
    margin-bottom: 15px;
}
}

.qa__question{
    position: relative;
    font-size: 4vw;
    padding: 1% 7% 1% 10% ;
    background:url(/resources/img/lulu_white/Q.png) no-repeat left;
    background-size: 8%;
}

@media screen and (min-width: 768px) {
    .qa__question{
        font-size: 22px;
        padding: 1% 7% 1% 50px ;
        background-size: 6%;
    }
}

.qa__question-ico{
    position: absolute;
    width: 4%;
    right: 0;
    top:43%;
    transform: translate(-20%, -20%) rotate(0deg);
    transition: 0.5s;
}

@media screen and (min-width: 768px) {
    .qa__question-ico{
        right: 1%;
    }
}
.active .qa__question-ico{
    transform: translate(-20%, -20%) rotate(180deg);
}

.qa__answer{
    font-size: 3.8vw;
    margin-top:10px;
    padding: 10px 0 0 10%;
    background:url(/resources/img/lulu_white/A.png) no-repeat left 15px;
    background-size: 8%;
    border-top: 2px dashed #A3D9D9;
}

@media screen and (min-width: 768px) {
    .qa__answer{
        font-size: 20px;
        padding: 15px 0 10px 50px;
        background-size: 6%;
    }
}

.payment-delivery{
    margin-top:65px;
    padding:0 4.7%;
}

.payment__content{
    padding-bottom: 10px;
    line-height: 1.8;
}

@media screen and (min-width: 768px) {
.payment__content{
    padding-bottom: 20px;
}
}

.payment__content__inner{
    margin:20px 0;
}


.payment__content__img{
    text-align: center;
}

@media screen and (min-width: 768px) {
    .payment__content__img{
        text-align: left;
    }
}

.payment__dl{
    margin-top:20px;
}

@media screen and (min-width: 768px) {
    .payment__dl{
        margin-top:30px;
    }
}

.payment__dt{
    font-size: 4.2vw;
    font-weight: bold;
    color: #03A6A6;
    border-bottom: 2px solid #03A6A6;
    padding-bottom: 5px;
    margin-bottom: 15px;
}

@media screen and (min-width: 768px) {
    .payment__dt{
        font-size: 24px;
    }
}

.payment__dd{
    font-size: 3.8vw;
}

@media screen and (min-width: 768px) {
    .payment__dd{
        font-size: 22px;
    }
}

.payment__dd--small{
    font-size: 80%;
    margin-top:10px;
}

@media screen and (min-width: 768px) {
    .payment__dd--small{
        font-size: 18px;
        margin-top:20px;
    }
}


.information{
    margin-top:20px;
}

.information__container{
    padding:20px 4%;
    font-size: 3.8vw;
}

@media screen and (min-width: 768px) {
    .information__container{
        font-size: 22px;
    }
}

.information__container--small{
    font-size: 3.8vw;
}

@media screen and (min-width: 768px) {
    .information__container--small{
        font-size: 18px;
    }
}

.methods_title{
    text-align: center;
}

.methods_title img{
    width: 90%;
    max-width:100%;
}

@media screen and (min-width: 768px) {
    .methods_title img{
        width: auto;
    }
}

.payment_methods{
    font-size: 4.2vw;
    font-weight: bold;
    color: #03A6A6;
    border-left:solid 10px #03A6A6;
    padding-left:10px;
    margin: 25px 0 20px;
    line-height: 1;
}

@media screen and (min-width: 768px) {
    .payment_methods{
        font-size: 26px;
        margin: 40px 0 30px;
    }
}

.payment__titile{
    position: relative;
}

.payment-ico{
    position: absolute;
    width: 5%;
    right: 2%;
    top:43%;
    transform: translate(-20%, -20%) rotate(0deg);
    transition: 0.5s;
}

.active .payment-ico{
    transform: translate(-20%, -20%) rotate(180deg);
}

.shipping__fee__wrap{
    margin-bottom:60px;
}

@media screen and (min-width: 768px) {
    .shipping__fee__wrap{
        margin-bottom:120px;
    }
}
.shipping__fee{
    position: relative;
    color: #fff;
    font-size: 4.3vw;
    font-weight: bold;
    background:url(/resources/img/lulu_white/delivery.gif) no-repeat 4% 47%;
    background-color: #03A6A6;
    background-size: 8%;
    border-radius: 45px;
    padding: 15px 0 15px 14%;
    margin-top:30px;
}

@media screen and (min-width: 768px) {
    .shipping__fee{
        font-size: 24px;
        padding:20px 0 20px 12%;
        background-size: 7%;
    }
}

.shipping__fee .accordion-ico{
    position: absolute;
    width: 5%;
    right: 6%;
    top:42%;
    transform: translate(-20%, -20%) rotate(0deg);
    transition: 0.5s;
}

.accordion-title .accordion-ico{
    position: absolute;
    width: 4%;
    right: 4%;
    top:45%;
    transform: translate(-20%, -20%) rotate(0deg);
    transition: 0.5s;
}

.active .accordion-ico{
    transform: translate(-20%, -20%) rotate(180deg);
}

.accordion-content{
	display: none;
}

.accordion-content img{
	width: auto;
}

.table__wrap{
    padding:0 4%;
    margin: 80px 0 30px;
}
.ingredients {
    width: 100%;
    border-spacing: 2px;
    table-layout: fixed;
    height: 100%;
    border: 1px solid #ccc;
	border-collapse: collapse;
}

@media screen and (min-width: 768px) {
    .ingredients {
        border: none;
    }
}

.ingredients_th {
    background: #F2F2F2;
}


.ingredients_th {
    display: block;
    padding: 1.33vw;
    width: auto;
    font-size: 4vw;
    text-align: center;
    vertical-align: top;
}
@media screen and (min-width: 768px) {
    .ingredients_th {
        display: table-cell;
        width: 20%;
        padding: 10px;
        font-size: 14px;
        border: 1px solid #ccc;
    }
    .ingredients tr:not(:last-child) th {
        height: 25px;
    }
}
.ingredients_td {
    display: block;
    padding: 1.33vw;
    width: auto;
    font-size: 4vw;
    text-align: center;
    vertical-align: top;
}
.ingredients_td.ingredients_td--left{
    text-align: left;
}
.ingredients_td.ingredients_txt {
    font-size: 3.2vw;
}
@media screen and (min-width: 768px) {
    .ingredients_td {
        display: table-cell;
        width: 80%;
        padding: 10px;
        font-size: 14px;
        border: 1px solid #ccc;
        text-align: left;
    }
    .ingredients_td.ingredients_txt {
        font-size: 12px;
    }
}

.accordion-title{
    position: relative;
    color: #fff;
    font-size: 4vw;
    padding: 15px 2%;
    background-color: #03A6A6;
}

@media screen and (min-width: 768px) {
.accordion-title{
    font-size: 28px;
    padding: 20px 4%;
}
}

.accordion-title__border{
    border-left: solid 6px #fff;
    padding-left: 3%;
    line-height: 1;
}

@media screen and (min-width: 768px) {
.accordion-title__border{
    padding-left: 20px;
}
}

.information{
    margin-top:100px;
}

.information__container{
    padding:20px 4%;
    font-size: 3.8vw;
}

.information__dl{
    margin-bottom: 5px;
}

@media screen and (min-width: 768px) {
    .information__container{
        font-size: 22px;
    }
}

.information__container--small{
    font-size: 3.8vw;
}

@media screen and (min-width: 768px) {
    .information__container--small{
        font-size: 18px;
    }
}

.contact__area{
    position: relative;
}

.contact__btn{
    position: absolute;
    width: 88%;
    bottom: 5%;
    left: 50%;
    right: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
}

.contact__btn img{
    width: auto;
    max-width: 100%;
}

.footer_info_02{
    text-align: center;
    padding-top: 20px;
}

.footer_info_02 a{
    color: #000;
}

.copyright{
    color: #000;
    padding: 20px 0;
	text-align: center;
}

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

.pc{
	display:none !important;
}

.sp{
	display:block !important;
}
	
}

.return_content{
    position: relative;
}

.return_btn{
    position: absolute;
    width: 80%;
    bottom: 4%;
    left: 0;
    right: 0;
    margin: 0 auto;
}

.pru {
    -webkit-transform: perspective(1px) translateZ(0);
    transform: perspective(1px) translateZ(0);
    box-shadow: 0 0 1px transparent;
    -webkit-transform-origin: 0 100%;
    transform-origin: 0 100%;
    -webkit-animation-name: hvr-wobble-top;
    animation-name: hvr-wobble-top;
    -webkit-animation-duration: 3s;
    animation-duration: 3s;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
}
/* Wobble Top */
@-webkit-keyframes hvr-wobble-top {
	5% {
		-webkit-transform: skew(0);
		transform: skew(0);
	}
	11% {
		-webkit-transform: skew(-5deg);
		transform: skew(-5deg);
	}
	17% {
		-webkit-transform: skew(4deg);
		transform: skew(4deg);
	}
	22% {
		-webkit-transform: skew(-3deg);
		transform: skew(-3deg);
	}
	28%{
		-webkit-transform: skew(2deg);
		transform: skew(2deg);
	}
	33% {
		-webkit-transform: skew(0);
		transform: skew(0);
	}
	100% {
		-webkit-transform: skew(0);
		transform: skew(0);
	}
}
@keyframes hvr-wobble-top {
	5% {
		-webkit-transform: skew(0);
		transform: skew(0);
	}
	11% {
		-webkit-transform: skew(-5deg);
		transform: skew(-5deg);
	}
	17% {
		-webkit-transform: skew(4deg);
		transform: skew(4deg);
	}
	22% {
		-webkit-transform: skew(-3deg);
		transform: skew(-3deg);
	}
	28%{
		-webkit-transform: skew(2deg);
		transform: skew(2deg);
	}
	33% {
		-webkit-transform: skew(0);
		transform: skew(0);
	}
	100% {
		-webkit-transform: skew(0);
		transform: skew(0);
	}
}