@charset "UTF-8";
/* /shop/e/eLhwoassort202508/
----------------------------------------------------------*/
@import url('https://fonts.googleapis.com/css2?family=M+PLUS+Rounded+1c:wght@400;500;700;900&display=swap');

/* reset
---------------------- */
#Lhwoassort{
	color:#613400;
	font-size: 18px;
	font-weight: 500;
	font-family: YakuHanRP, "M PLUS Rounded 1c", sans-serif;
	line-height: 1.625;
	text-align: center;
}
#Lhwoassort *{
	box-sizing: border-box;
}
#Lhwoassort p{
	transform: rotate(0.03deg);
}

/* contents
---------------------- */
#Lhwoassort .main{
	background:url(/img/event_L/eLhwoassort202508/main_bg.png)no-repeat;
	position: relative;
	height:819px;
}
#Lhwoassort .main .ttl{
	position: absolute;
	top:16px;
	left:21px;
	animation: tada 1s ease-out .5s;
}
@keyframes tada {
    0% {
        transform: scaleX(1)
    }
    10%,20% {
        transform: scale3d(.9,.9,.9) rotate(-3deg)
    }
    30%,50%,70%,90% {
        transform: scale3d(1.1,1.1,1.1) rotate(3deg)
    }
    40%,60%,80% {
        transform: scale3d(1.1,1.1,1.1) rotate(-3deg)
    }
    to {
        transform: scaleX(1)
    }
}
#Lhwoassort .main .c1{
	position: absolute;
	bottom:-52px;
	left:38px;
}
#Lhwoassort .main .c1.active{
	animation: swing .8s ease-out .8s forwards;
}
@keyframes swing {
    20% {
        transform: rotate(15deg)
    }
    40% {
        transform: rotate(-10deg)
    }
    60% {
        transform: rotate(5deg)
    }
    80% {
        transform: rotate(-5deg)
    }
    to {
        transform: rotate(0deg)
    }
}
#Lhwoassort .main .c2{
	position: absolute;
	bottom:-97px;
	right:-39px;
}
#Lhwoassort .main .c2.active{
	animation: shakeY 1.2s ease-out .5s forwards;
}
@keyframes shakeY {
    0%,to {
        transform: translateZ(0)
    }
    10%,30%,50%,70%,90% {
        transform: translate3d(0,-10px,0)
    }
    20%,40%,60%,80% {
        transform: translate3d(0,10px,0)
    }
}
#Lhwoassort .main .ico1{
	position: absolute;
	bottom:266px;
	left:38px;
	animation: tilt 2.5s infinite;
  transform-origin: bottom right;
}
#Lhwoassort .main .ico2{
	position: absolute;
	top:228px;
	left:592px;
	animation: shakeY2 2s infinite;
}
#Lhwoassort .main .ico3{
	position: absolute;
	top:335px;
	right:33px;
	animation: tada2 2s ease-in-out infinite;
}
@keyframes tilt {
  0% {
    transform: rotate(2deg);
  }
  50% {
    transform: rotate(-10deg);
  }
  100% {
    transform: rotate(2deg);
  }
}
@keyframes shakeY2 {
  0%, 20%, 40%, 100% {
    transform: translateY(0);
  }
  10%, 30% {
    transform: translateY(-10px);
  }
}
@keyframes tada2 {
    0% {
        transform: scaleX(1);
    }
    5%, 10% {
        transform: scale3d(0.9, 0.9, 0.9) rotate(-3deg);
    }
    15%, 25%, 35%, 45% {
        transform: scale3d(1.1, 1.1, 1.1) rotate(3deg);
    }
    20%, 30%, 40% {
        transform: scale3d(1.1, 1.1, 1.1) rotate(-3deg);
    }
    60% {
        transform: scale3d(1.05, 1.05, 1.05) rotate(1deg);
    }
    80% {
        transform: scale3d(1.02, 1.02, 1.02) rotate(0.5deg);
    }
    100% {
        transform: scale3d(1, 1, 1) rotate(0deg);
    }
}

#Lhwoassort .cv{
	position: relative;
}
#Lhwoassort .cv a{
	width:800px;
	height:122px;
	display:block;
	background:#fea506 url(/img/event_L/eLhwoassort202508/cv_btn_txt.png)no-repeat center right 33px;
	border-radius: 15px;
	position: absolute;
	bottom:105px;
	left:150px;
	box-shadow: 0px 7px #ff8400;
	text-indent:-9999px;
	transition-duration: .2s;
}
#Lhwoassort .cv.cv1 a{
	bottom:280px;
}
#Lhwoassort .cv a:hover{
	box-shadow: none;
	-webkit-transform: translateY(7px);
	transform: translateY(7px);
}
#Lhwoassort .osusume{
	background:url(/img/event_L/eLhwoassort202508/osusume_bg.png)no-repeat top;
	padding-top: 453px;
	padding-bottom: 85px;
	margin-top: -126px;
	position: relative;
}
#Lhwoassort .osusume img.ttl{
	position: absolute;
	top:169px;
	right:27px;
}
#Lhwoassort .osusume img.ttl.active{
	animation: rubberBand 1.5s ease-out .3s forwards;
}
@keyframes rubberBand {
    0% {
        transform: scaleX(1)
    }
    30% {
        transform: scale3d(1.25,.75,1)
    }
    40% {
        transform: scale3d(.75,1.25,1)
    }
    50% {
        transform: scale3d(1.15,.85,1)
    }
    65% {
        transform: scale3d(.95,1.05,1)
    }
    75% {
        transform: scale3d(1.05,.95,1)
    }
    to {
        transform: scaleX(1)
    }
}
#Lhwoassort .osusume ul{
	display:flex;
	gap:10px;
}
#Lhwoassort .osusume ul li img.scroll{
	opacity:0;
}
#Lhwoassort .osusume ul li img.active{
	animation: fadeInUp .5s ease-in backwards;
	opacity:1;
}
#Lhwoassort .osusume ul li:nth-child(2) img.active{
	animation-delay:.3s;
}
#Lhwoassort .osusume ul li:nth-child(3) img.active{
	animation-delay:.6s;
}
@keyframes fadeInUp {
    0% {
        transform: translate3d(0,100%,0)
    }
    to {
        opacity: 1;
        transform: translateZ(0)
    }
}
#Lhwoassort .set{
	background:#f8edf8 url(/img/event_L/eLhwoassort202508/set_bg.png)no-repeat top left;
	padding: 0 70px 104px;
	position: relative;
}
#Lhwoassort .set img.ttl{
	margin-top: -28px;
	margin-bottom: 202px;
}
#Lhwoassort .set img.ttl.active{
	animation: swing 1s;
}
#Lhwoassort .set img.chara{
	position: absolute;
	top:200px;
	right:41px;
}
#Lhwoassort .set img.chara.active{
	animation: heartBeat 1s ease-out 1s forwards;
}
@keyframes heartBeat {
    0%, 28%, 70% {
        transform: scale(1)
    }
    14%, 42% {
        transform: scale(1.3)
    }
}
#Lhwoassort .set ul{
	display: inline-flex;
	flex-wrap: wrap;
	gap: 30px 48px;
	justify-content: flex-start;
	width: fit-content;
	max-width: 100%;
	position: relative;
}
#Lhwoassort .set ul li{
	width:456px;
	background:#fff;
	border:7px solid #8c077c;
	border-radius: 10px;
	box-shadow:0 8px #ea5404;
	flex-shrink: 0;
	padding-top: 23px;
}
#Lhwoassort .set ul li p:first-child{
	color:#48005f;
	font-size: 28px;
	font-weight: 900;
	line-height: 1.21;
	background:url(/img/event_L/eLhwoassort202508/set_line.png)no-repeat bottom center;
	padding-bottom:.7em;
	margin-bottom: 28px;
}
#Lhwoassort .set ul li p:first-child.ls-s{
	letter-spacing: -0.08em;
}
#Lhwoassort .set ul li p:first-child span:last-child{
	font-size: 20px;
	display:block;
	letter-spacing:normal;
}
#Lhwoassort .set ul li p:last-child{
	color:#333;
	font-weight: 500;
	text-align: left;
	padding: .3em 1em 1.4em;
}
#Lhwoassort .set ul li.box{
	width:100%;
	height:340px;
	text-align: left;
	position: relative;
	align-items: center;
	display:flex;
	padding-top: 0;
	padding-left: 428px;
}
#Lhwoassort .set ul li.box img.box{
	position: absolute;
	top:25px;
	left:78px;
}
#Lhwoassort .set ul li.box p.size{
	color:#000;
	font-size: 20px;
	font-weight: bold;
	line-height: 1;
	text-align: center;
	width:450px;
	position: absolute;
	bottom:14px;
	left:0;
	padding: 0;
}
#Lhwoassort .set ul li.box p.txt{
	color:#613400;
	font-size: 30px;
	font-weight: bold;
	line-height: 1.4;
	display:inline-block;
	background:url(/img/event_L/eLhwoassort202508/set_box_line.png)no-repeat top left,
	url(/img/event_L/eLhwoassort202508/set_box_line.png)no-repeat bottom left;
	padding: 1.2em 0;
	min-width:441px;
}
#Lhwoassort .set ul li.box p.txt span{
	letter-spacing: -0.05em;
}
#pageTop {
	left: calc(50% + 580px);
	bottom: 40px;
	text-align: center;
	display: none;
	position: fixed;
	z-index: 5;
}
#pageTop .img {
	animation: shakeY2 3s ease-out infinite;
}
#pageTop .ico {
	position: absolute;
	top:-31px;
	left:4px;
	animation: tilt 3s ease-out infinite;
}
#pageTop .txt {
	position: absolute;
	top:-64px;
	right:-48px;
	transition: 0.2s;
	transform: scale(0);
	transform-origin: bottom left;
}
#pageTop:hover{
	opacity:1;
}
#pageTop:hover .txt {
	-webkit-transform: scale(100%);
					transform: scale(100%);
}
@keyframes shakeY2 {
  0% {
    transform: translateY(0)
  }
  50% {
    transform: translateY(-7px)
  }
}