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


/*-------------------------------------------
Base
-------------------------------------------*/

br.pc-none,
#gurumekuji .sp,
#gurumekuji .tablet{
    display: none !important;
}
#gurumekuji ul, #gurumekuji p, #gurumekuji dl{ margin-bottom: 0;}
#gurumekuji dd{ margin-left: 0;}
#gurumekuji .title{	margin-bottom: 0;}

#gurumekuji {
	width: 100%;
    overflow: hidden;
	position: relative;
	color: #000;
	font-size: 16px;
	letter-spacing: 0.04em;
    background: #fff57f;
    font-family: 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3', Meiryo, メイリオ, sans-serif;
    font-feature-settings: "palt";  
	max-width: 1300px;
	border-radius: 30px;
	margin: 0 auto;
}
#gurumekuji a{
    outline: none;
}
#gurumekuji a:hover{
    text-decoration: none;
}
#gurumekuji img{ 
    width: 100%; 
    vertical-align: bottom; 
    -webkit-backface-visibility: hidden; 
    backface-visibility: hidden;
}

#gurumekuji h3{
    margin: 0;
}

#gurumekuji .deco{
    position: absolute;
    transition: .5s;
}

#gurumekuji .nowrap{
    display: inline-block;
    white-space: nowrap;
}
#gurumekuji .red {
    color: #e50012;
}


/*-------------------------------------------
PC
-------------------------------------------*/
#gurumekuji::after{
	content: "";
	display: block;
	width: 100%;
	height: 100%;
	/*height: calc(100% - ((711 / 1300) * 100%));*/
	position: absolute;
	left: 0;
	top: 0;
	margin-top: calc((711 / 1300) * 100%);
	background: #fac83e;
}

/*--- mv ---*/
#gurumekuji #mv{
	position: relative;
}
#gurumekuji #mv .title{
	width: 85%;
	margin: 0 auto;
	padding-top: calc((107 / 1300) * 100%);
	position: relative;
	z-index: 2;
}
#gurumekuji #mv .date{
	width: 21%;
	position: absolute;
	left: 0;
	top: 0;
	margin: calc((52 / 1300) * 100%) 0 0 calc((912 / 1300) * 100%);
	z-index: 1;
}

#gurumekuji #mv .dennyas{
	max-width: 797px;
	width: calc((797 / 1300) * 100%);
	margin: 0 auto;
	position: relative;
	z-index: 1;
}

#gurumekuji #mv .decoGroup{
	position: absolute;
	width: 100%;
	height: 100%;
	left: 0;
	top: 0;
	z-index: 0;
}

#gurumekuji #mv .decoGroup .shop{
	width: 100%;
	left: 0;
	top: 0;
	margin: calc((594/ 1300) * 100%) 0 0 0;
}

#gurumekuji #mv .hanabi01{
	width: calc((103/ 1300) * 100%);
	margin: calc((143/ 1300) * 100%) 0 0 calc((33/ 1300) * 100%);
}
#gurumekuji #mv .hanabi02{
	width: calc((135/ 1300) * 100%);
	margin: calc((73/ 1300) * 100%) 0 0 calc((300/ 1300) * 100%);
}
#gurumekuji #mv .hanabi03{
	width: calc((125/ 1300) * 100%);
	margin: calc((37/ 1300) * 100%) 0 0 calc((487/ 1300) * 100%);
}
#gurumekuji #mv .hanabi04{
	width: calc((92/ 1300) * 100%);
	margin: calc((48/ 1300) * 100%) 0 0 calc((858/ 1300) * 100%);
}
#gurumekuji #mv .hanabi05{
	width: calc((103/ 1300) * 100%);
	margin: calc((323/ 1300) * 100%) 0 0 calc((1114/ 1300) * 100%);
}
#gurumekuji #mv .hanabi06{
	width: calc((62/ 1300) * 100%);
	margin: calc((447/ 1300) * 100%) 0 0 calc((970/ 1300) * 100%);
}
#gurumekuji #mv .hanabi07{
	width: calc((125/ 1300) * 100%);
	margin: calc((447/ 1300) * 100%) 0 0 calc((1054/ 1300) * 100%);
}
#gurumekuji #mv .hanabi08{
	width: calc((74/ 1300) * 100%);
	margin: calc((378/ 1300) * 100%) 0 0 calc((65/ 1300) * 100%);
}
#gurumekuji #mv .hanabi09{
	width: calc((197/ 1300) * 100%);
	margin: calc((413/ 1300) * 100%) 0 0 calc((106/ 1300) * 100%);
}

/*--- contents ---*/
#gurumekuji #contents{
	background: #fff;
	border-radius: 30px;
	box-shadow: 5px 5px 0px rgba(0,0,0,0.3);
	padding: 60px 85px;
	margin: 30px auto 60px;
	max-width: 1050px;
	width: 85%;
	position: relative;
	z-index: 2;
}

#gurumekuji #contents .prizeList {
	margin-top: 30px;
}
#gurumekuji #contents .prizeList li{
	border-radius: 20px;
	background: #e95539;
	padding: 20px;
	position: relative;
}
#gurumekuji #contents .prizeList li + li{
	margin-top: 20px;
}
#gurumekuji #contents .prizeList li.tokusho{
	display: flex;
	justify-content: space-between;
}
#gurumekuji #contents .prizeList li.tokusho .image{
	width: 50%;
}
#gurumekuji #contents .prizeList li.tokusho .title{
	width: 50%;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	text-align: center;
	padding: 0 30px;
}

#gurumekuji #contents .prizeList li .imageBox{
	display: flex;
	justify-content: space-between;
	gap: 10px;
}

#gurumekuji #contents .prizeList li .imageBox:has(:nth-last-child(2)) .image{
	width: calc(50% - 5px);
}
#gurumekuji #contents .prizeList li:not(.tokusho) .title{
	margin: 15px auto 30px;
	text-align: center;
}
#gurumekuji #contents .prizeList li:not(.tokusho) .title img{
	width: auto;
	display: block;
	height: 42px;
	margin: 0 auto;
}
#gurumekuji #contents .prizeList li:not(.tokusho) .title .dt{
	max-width: 300px;
	display: block;
	margin: 10px auto 0;
	height: auto;
}

#gurumekuji #contents .prizeList li .imageBox:has(:nth-last-child(3)) picture{
	width: calc(33.333% - 5px);
	display: block;
}
#gurumekuji #contents .prizeList li .imageBox:has(:nth-last-child(3)) picture img{
	width: 100%;
}

#gurumekuji .omatsuri{
	width: calc((120 / 1050) * 100%);
}
#gurumekuji #contents .prizeList li .omatsuri{
}
#gurumekuji .deco01{
	width: calc((180 / 1050) * 100%);
	left: 0;
    top: 0;
    margin: -8% 0 0 -5%;
}
#gurumekuji .deco02{
	right: 0;
	top: 0;
	margin: -4.5% 1% 0 0;
}

#gurumekuji .deco03,
#gurumekuji .deco05{
	transform: translate(-130%,-50%);
	top: 50%;
	left: 0;
}
#gurumekuji .deco04{
	transform: translate(120%,-50%);
	top: 50%;
	right: 0;
}

#gurumekuji .deco06{
	width: calc((89 / 1050) * 100%);
	top: 0;
	right: 0;
	transform: translate(80%,-70%);
}
#gurumekuji .deco07{
	width: calc((77 / 1050) * 100%);
	left: 0;
	bottom: 0;
	transform: translate(-100%,30%);
}


#gurumekuji .ending{
	position: relative;
	z-index: 1;
}
#gurumekuji .ending .belt{
	background: #e95539;
	padding: 40px;
}
#gurumekuji .ending .belt img{
	display: block;
	max-width: 750px;
	margin: 0 auto;
}
#gurumekuji .ending .notice{
	background: #fff57f;
	padding: 40px;
	display: flex;
	justify-content: center;
}
#gurumekuji .ending .notice ul{
	display: table;
}
#gurumekuji .ending .notice ul li{
	padding-left: 1em;
	text-indent: -1em;
	color: #76421b;
	line-height: 1.3;
	font-size: 12px;
}
#gurumekuji .ending .notice ul li + li{
	margin-top: 10px;
}


/*-------------------------------------------
Animation
-------------------------------------------*/

.appMain .slidein,
.out.slidein,
.out .slidein{
    opacity: 0;
}

.appMain .slidein,
.in.slidein,
.in .slidein{
    animation: slidein 0.8s ease forwards;
}

@keyframes slidein{
    0%{ transform: translate(0,10px); opacity: 0; }
    100%{  transform: translate(0,0);opacity: 1;}
}

.fadein{
    opacity: 0;
}
.in.fadein,
.in .fadein,
.appMain .fadein,
.appMain.fadein,
#mainTitle .fadein{
    animation: fadein 1s ease forwards;
}

@keyframes fadein {
	0% { opacity: 0;}
	100% { opacity: 1; }
}

.appMain .clipAnimationLtoR,
.clipAnimationLtoR {
    clip-path: inset(0 100% 0 0);
}

.appMain .clipAnimationLtoR,
.in .clipAnimationLtoR,
.in.clipAnimationLtoR{
    animation: clipAnimationLtoR .5s ease-in-out forwards;
}

@keyframes clipAnimationLtoR {
	0% { clip-path: inset(0 100% 0 0);}
	100% { clip-path: inset(0 0 0 0); }
}

#gurumekuji #mv .hanabi img{
    display: block;
    transform: scale(0);
    opacity: 0;
    animation: hanabi 2.2s ease-in-out infinite;
}
@keyframes hanabi {
	0% { transform: translate(0,100%) scale(0); opacity: 0;}
	60% { transform: translate(0,0) scale(1); opacity: 1;}
	100% { transform: translate(0,20%) scale(1.05); opacity: 0;}
}

#gurumekuji #mv .hanabi01 img{ animation-delay: .5s !important;}
/*#gurumekuji #mv .hanabi02 img{ animation-delay: .2 !important;}*/
#gurumekuji #mv .hanabi03 img{ animation-delay: 2.0s !important;}
#gurumekuji #mv .hanabi04 img{ animation-delay: .5s !important;}
#gurumekuji #mv .hanabi04 img{ animation-delay: 1.5s !important;}
#gurumekuji #mv .hanabi06 img{ animation-delay: 1.0s !important;}
/*#gurumekuji #mv .hanabi07 img{ animation-delay: .2 !important;}*/
#gurumekuji #mv .hanabi08 img{ animation-delay: 2.0s !important;}
#gurumekuji #mv .hanabi09 img{ animation-delay: .5s !important;}

#gurumekuji #mv .date img{
    display: block;
    transform: scale(0);
    opacity: 0;
    animation: hanabi-02 .8s ease-in-out forwards;
    animation-delay: .2s;
}
@keyframes hanabi-02 {
	0% { transform: translate(0,100%) scale(0); opacity: 0;}
	100% { transform: translate(0,0) scale(1); opacity: 1;}
}

#gurumekuji .bounceinup{
    opacity: 0;
}

#gurumekuji #mv .title img,
#gurumekuji .in .bounceinup,
#gurumekuji .in.bounceinup{
    animation:bounceInUp .4s ease forwards;
}

@keyframes bounceInUp {
  from, 60%, 75%, 90%, to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
    animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
  }
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, 30px, 0) scale(0.9);
    transform: translate3d(0, 30px, 0) scale(0.9);
  }
  60% {
    opacity: 1;
    -webkit-transform: translate3d(0, -10px, 0) scale(1.05);
    transform: translate3d(0, -10px, 0) scale(1.05);
  }
  75% {
    opacity: 1;
    -webkit-transform: translate3d(0, 10px, 0) scale(0.95);
    transform: translate3d(0, 10px, 0) scale(0.95);
  }
  90% {
    opacity: 1;
    -webkit-transform: translate3d(0, -5px, 0) scale(1.025);
    transform: translate3d(0, -5px, 0) scale(1.025);
  }
  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0) scale(1);
    transform: translate3d(0, 0, 0) scale(1);
  }
}

.delay01{ animation-delay: 0.1s!important;}
.delay02{ animation-delay: 0.2s!important;}
.delay03{ animation-delay: 0.3s!important;}
.delay04{ animation-delay: 0.4s!important;}
.delay05{ animation-delay: 0.5s!important;}
.delay06{ animation-delay: 0.6s!important;}
.delay07{ animation-delay: 0.7s!important;}
.delay08{ animation-delay: 0.8s!important;}
.delay09{ animation-delay: 0.9s!important;}
.delay10{ animation-delay: 1.0s!important;}
.delay11{ animation-delay: 1.1s!important;}
.delay12{ animation-delay: 1.2s!important;}
.delay13{ animation-delay: 1.3s!important;}
.delay14{ animation-delay: 1.4s!important;}
.delay15{ animation-delay: 1.5s!important;}
.delay16{ animation-delay: 1.6s!important;}
.delay17{ animation-delay: 1.7s!important;}
.delay18{ animation-delay: 1.8s!important;}
.delay19{ animation-delay: 1.9s!important;}
.delay20{ animation-delay: 2.0s!important;}
.delay21{ animation-delay: 2.1s!important;}
.delay22{ animation-delay: 2.2s!important;}
.delay23{ animation-delay: 2.3s!important;}
.delay24{ animation-delay: 2.4s!important;}
.delay25{ animation-delay: 2.5s!important;}
.delay26{ animation-delay: 2.6s!important;}
.delay27{ animation-delay: 2.7s!important;}
.delay28{ animation-delay: 2.8s!important;}
.delay29{ animation-delay: 2.9s!important;}
.delay30{ animation-delay: 2.0s!important;}


/*-------------------------------------------
ONLY PC & HOVER
-------------------------------------------*/
@media only screen and (min-width: 769px){
	#gurumekuji img,
	#gurumekuji .appMain .inr{
		-webkit-backface-visibility: hidden;
		backface-visibility: hidden;
		image-rendering: crisp-edges;
		image-rendering: -webkit-optimize-contrast;
	}

}

/*-------------------------------------------
UNDER 1300
-------------------------------------------*/
@media only screen and (max-width: 1300px){
    #gurumekuji{
        border-radius: 0;
    }   
}

/*-------------------------------------------
UNDER 900
-------------------------------------------*/
@media only screen and (max-width: 900px){
    
    #gurumekuji .tablet{ display: block !important;}
    
    #gurumekuji #contents {
        padding: 40px;
    }
    
    #gurumekuji #contents .prizeList li.tokusho{
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }
    #gurumekuji #contents .prizeList li.tokusho .title{
        width: 100%;
        max-width: 400px;
        margin: 16px 0 30px;
    }
    #gurumekuji #contents .prizeList li.tokusho .image{
        width: 100%;
    }
    
    #gurumekuji .omatsuri {
        width: 15%;
    }
    #gurumekuji .deco02 {
        margin: -8.5% -3% 0 0;
        z-index: 3;
    }
    #gurumekuji .deco03,
    #gurumekuji .deco05{
        transform: translate(-90%,-50%);
    }
    #gurumekuji .deco04{
        transform: translate(100%,-50%);
    }
}

/*-------------------------------------------
UNDER 600
-------------------------------------------*/
@media only screen and (max-width: 600px){
	
    #gurumekuji {
        font-size: 14px;
    }
	br.pc-none {
        display: inline;
    }
	#gurumekuji .sp { display: block !important;}
	#gurumekuji .pc { display: none;}
    
    
    #gurumekuji::after {
        margin-top: 83%;
    }
    
    
    /*--- mv ---*/
    
    #gurumekuji #mv .title {
        width: 100%;
    }
    #gurumekuji #mv .dennyas {
        width: 94%;
    }
    #gurumekuji #mv .decoGroup .shop {
        margin: 69% 0px 0 -25%;
        width: 150%;
    }
    #gurumekuji #mv .date {
        width: 60%;
        position: relative;
        margin: 2% auto 2%;
    }
    
    #gurumekuji #mv .hanabi01{
        width: 10%;
        margin: 5% 0 0 8%;
    }
    #gurumekuji #mv .hanabi02{
        width: 12%;
        margin: 3% 0 0 22%;
    }
    #gurumekuji #mv .hanabi03{
        width: 8%;
        margin: 3% 0 0 40%;
    }
    #gurumekuji #mv .hanabi04{
        width: 12%;
        margin: 6% 0 0 68%;
    }
    #gurumekuji #mv .hanabi05{
        width: 15%;
        margin: 10% 0 0 86%;
    }
    #gurumekuji #mv .hanabi06{
        width: 8%;
        margin: 40% 0 0 90%;
    }
    #gurumekuji #mv .hanabi07{
        width: 13%;
        margin: 53% 0 0 80%;
    }
    #gurumekuji #mv .hanabi08{
        width: 15%;
        margin: 37% 0 0 3%;
    }
    #gurumekuji #mv .hanabi09{
        width: 24%;
        margin: 48% 0 0 10%;
    }
    
    /*--- contents ---*/
    
    #gurumekuji #contents {
        padding: 30px;
        max-width: 400px;
        border-radius: 20px;
    }
    
   #gurumekuji #contents .prizeList li .imageBox{
        flex-direction: column;
        justify-content: center;
        align-items: center; 
    }
    
    #gurumekuji #contents .prizeList li .imageBox:has(:nth-last-child(2)) .image,
    #gurumekuji #contents .prizeList li .imageBox:has(:nth-last-child(3)) picture{
        width: 100%;
    }
    #gurumekuji .omatsuri {
        width: 76px;
    }
    #gurumekuji .deco01 {
        width: 96px;
        margin: -37px 0 0 -5%;
    }
    #gurumekuji #contents .prizeList li:not(.tokusho) .title img {
        height: 28px;
    }
    #gurumekuji #contents .prizeList li:not(.tokusho) .title .dt{
        width: 80%;
    }
}

/*-------------------------------------------
UNDER 480
-------------------------------------------*/
@media only screen and (max-width: 480px){
    
    
    #gurumekuji #contents {
        padding: 40px 20px;
        border-radius: 15px;
        margin-bottom: 40px;
    }
    #gurumekuji #contents .title01{
        margin-bottom: 5px;
    }
    
    #gurumekuji .deco03,
    #gurumekuji .deco05{
        transform: translate(-60%,-50%);
    }
    #gurumekuji .deco04{
        transform: translate(70%,-50%);
    }
    
    #gurumekuji #contents .prizeList li {
        border-radius: 10px;
    }
    #gurumekuji #contents .prizeList li + li {
        margin-top: 10px;
    }
    #gurumekuji #contents .prizeList li.tokusho .title {
        margin: 10px 0 25px;
    }
    #gurumekuji #contents .prizeList li:not(.tokusho) .title img {
        height: 21px;
    }
    #gurumekuji #contents .prizeList li:not(.tokusho) .title {
        margin: 5px auto 20px;
    }
    
    #gurumekuji .ending .belt,
    #gurumekuji .ending .notice{
        padding: 25px;
    }
    
}