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

.wrapper{
	max-width: 1200px;
	width: 100%;
	margin: 0 auto 5%;
}
.bnr{
	position: relative;
}
.pc{
	display: block;
}
.sp{
	display: none;
}
.bnr_ttl{
	display: block;
	width: 32%;
	position: absolute;
	bottom: 4%;
	left: 34%;
}
@media(max-width:750px){
.pc{
	display: none;
}
.sp{
	display: block;
}
.bnr_ttl{
	width: 76%;
	bottom: 3%;
	left: 12%;
}
}

.content{
	max-width: 650px;
	margin: 0 auto;
	width: 100%;
	padding: 3% 0;
}
.bg1{
	background-color: #F4E4DA;
}
.bg2{
	background-color: #000;
}
.flower{
	display: block;
	width: 30%;
	margin: 0 auto;
}
.box{
	margin: 5% auto;
	position: relative;
}
.slide{
	position: relative;
	width: 90%;
	margin: 0 auto;
}
.slide_img{
    position: absolute;
    top: 50%;
    left: 0;
    transform: translate(0%, -50%);
    animation: slideshow 10s linear infinite;
}
@keyframes slideshow{
	  0%{
		opacity: 0;
	  }
	  10%{
		opacity: 1;
	  }
	  45%{
		opacity: 1
	  }
	  55%{
		opacity: 0;
	  }
	  100%{
		opacity: 0;
	  }
	}

.img3{
	display: block;
	width: 60%;
	position: relative;
	z-index: 10;
}
.img4{
	display: block;
	width: 80%;
	margin-left: 20%;
	margin-top: 10%;
	position: relative;
	z-index: 10;
}
.snacks_paper{
	position: absolute;
	display: block;
	width: 100%;
	top: 10%;
}
.img6{
	display: block;
	margin-bottom: 2%;
}
.img8{
	display: block;
	width: 50%;
	margin: 15% auto 3%;
}
.copy{
	display: block;
	width: 50%;
	margin: 0 auto 15%;
}
.img9{
	display: block;
	width: 70%;
	margin-left: 5%;
	margin-bottom: 5%;
}
.img10{
	display: block;
	width: 55%;
	margin-left: 40%;
}
.lead{
	display: block;
	width: 90%;
	margin: 20% auto 10%;
}
.heart{
	display: block;
	position: absolute;
	width: 30%;
	top: -18%;
	right: 5%;
}
.img12{
	display: block;
	width: 80%;
	margin: 0 auto;
}
.look{
	display: block;
	width: 30%;
	margin: 15% auto;
}
.content ul{
	padding: 0;
	display: flex;
	line-height: 0;
	flex-wrap: wrap;
}
.content ul li{
	list-style: none;
	position: relative;
	margin-bottom: 10%;
	width: 50%;
}
.content ul li .p01 {
    opacity: 1;
    animation-name: ani1;
    animation-duration: 4s;
    animation-iteration-count: infinite;
    animation-timing-function: steps(1, end);
}
.content ul li .p02 {
    position: absolute;
	top: 0;
	left: 0;
    animation-name: ani2;
    animation-duration: 4s;
    animation-iteration-count: infinite;
    animation-timing-function: steps(1, end);
}
@keyframes ani1 {
    0% {
        opacity: 0;
    }
    50% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}
@keyframes ani2 {
    0% {
        opacity: 1;
    }
    50% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}
.content ul li .check {
   position: absolute;
	width: 25%;
	bottom: 0;
	right: 0;
}
.all{
	width: 90%;
	background-color: #F6C1D7;
	margin: 4% auto;
}
.all a{
	display: block;
	padding: 10% 0;
}
.all img{
	width: 50%;
	display: block;
	margin: 0 auto;
}
.staff{
	display: block;
	width: 60%;
	margin: 20% auto;
}
.logo{
	display: block;
	width: 30%;
	margin: 0 auto;
}
.india{
	display: block;
	width: 80%;
	margin: 10% auto;
}
.w1200{
	width: 100%;
}

.wrapper a:hover img {
	-moz-opacity:1;
	opacity:1;
}