/*/// General settings ///*/
html {
    scroll-behavior: smooth;
}
body {
	font-family:  'Nunito',  "游ゴシック体", "游ゴシック", "Yu Gothic", "メイリオ", Meiryo, sans-serif;
	font-size: 1rem;
	line-height: 1.8;
	font-feature-settings: 'palt';
	letter-spacing: .05em;
	width: 100vw;
	margin: 0 auto;
	font-weight: 500;
}
*, *:before, *:after {
    box-sizing: border-box;
}
img{
	width: 100%;
}

:root {
    --color-red: #D35345;
    --color-ecru: #FFFEF2;
    --box-shadow:  2px 2px 8px rgba(146, 146, 146, 0.2);
    --box-shadow:   rgba(149, 157, 165, 0.301) 0px 8px 24px;

  }

p, h1, h2, h3, h4, h5, h6, a, ul, li, span, tr, th, small{
	color: #1c1a1a;
}

@media (max-width: 768px) {
	.display_pc {
	 display:none;
	 }
}
@media (min-width: 769px) {
	.display_sp {
	 display:none;
	 }
}

main {
	animation: fadein 2s forwards;
}

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



/*====================================================================
bg
====================================================================*/

@media (max-width: 768px) {
	.bg{
		background-image: url(/img/single/fukubukuro/2023/bg-sp.png);
		background-repeat:  no-repeat;  
		background-position:center center; 
		min-height: 100vh;
		object-fit: contain;
		background-size: 100% 100%;
		padding-bottom: 30px;
	}
}
@media (min-width: 768px) {
	.bg{
		background-image: url(/img/single/fukubukuro/2023/bg-pc.png);
		background-repeat:  no-repeat;  
		background-position:top center; 
		object-fit: contain;
		background-size: auto 100%;
		padding-bottom: 64px;
	}
}

/*====================================================================
HEADER
====================================================================*/
header{
	width: 100vw;
	height: 60px;
	background: white;
	box-shadow: var(--box-shadow);
	display: flex;
	align-items: center;
}
header a{
	width: 45%;
	margin: auto;
	display: flex;
	justify-content: center;
}
header a img{
	width: 100%;
	margin: auto;
}
/*/// Tblet ///*/
@media (min-width: 768px) {
	header a{
		width: 35%;
	}
	header a img{
		max-width:250px;
	}
}

/*====================================================================
MV
====================================================================*/
#mv{
	margin: auto;
	position: relative;
	overflow: hidden;
}
#mv .mv_wrap{
	position: relative;
}
#mv .mv_wrap h1{
	margin: auto;
	width: 45%;
	padding-top: 20px;
}
#mv .mv_wrap h2{
	width: 35%;
	position: absolute;
	top: 85%;
	left:62%;
	z-index: 10;
}
#mv .mvflex{
	display: flex;
	flex-wrap: wrap;
	padding: 0;
	width: 100%;
	margin: auto;
}
#mv .mvflex li img{
	width: 57%;
	filter: drop-shadow( rgba(165, 156, 149, 0.108) 0px 8px 24px);
}
#mv .mvflex li:nth-child(odd) {/* M35 */
	margin-left: -16px;
}
#mv .mvflex li:nth-child(even) a {/* M38 */
	display: flex;
	flex-direction: row-reverse;
	margin-top: -120px;
	margin-right: -30px;
}
#mv .mvflex li:last-child{/* LINKS */
	margin-top: -110px;
	margin-left: -8px;
}

#mv .mvflex li{
cursor: pointer;
transition: .5s;
}
#mv .mvflex li:hover{
	transform: scale(1.05);
}


/*/// Tblet ///*/
@media (min-width: 768px) {
	#mv .mvflex{
		justify-content: center;
		width: 70%;
	}
	#mv .mvflex li img{
		width: 64%;
	}
	#mv .mvflex li:nth-child(odd) {/* M35 */
		margin-left: -80px;
	}
	#mv .mvflex li:nth-child(even) a {/* M38 */
		margin-top: -150px;
		margin-right: -90px;
	}
	#mv .mvflex li:last-child{/* LINKS */
		margin-top: -180px;
		margin-left: -90px;
	}
}
/*/// PC ///*/
@media (min-width: 820px) {
	#mv{
		max-width: 1000px;
		width: 100%;
	}
	#mv .mvflex{
		width: 100%;
	}
	#mv .mv_wrap h1{
		margin: auto;
		width: 25%;
		padding-top: 40px;
	}
	#mv .mv_wrap h2{
		width: 20%;
		top: 15%;
		left:72%;
		z-index: 100;
	}
	#mv .mvflex{
		justify-content: center;
		flex-wrap: nowrap;
		gap: 3%;
		margin-top: 40px;
	}
	#mv .mvflex li{
		width: calc(90%/3);
		padding-bottom: 24px;
	}
	#mv .mvflex li img{
		width: 100%;
	}
	#mv .mvflex li:nth-child(odd) {/* M35 */
		margin-left: 0px;
	}
	#mv .mvflex li:nth-child(even) a{/* M38 */
		margin-top: 0px;
		margin-right: 0px;
	}
	#mv .mvflex li:last-child{/* LINKS */
		margin-top: 0px;
		margin-left: 0px;
	}
}

@media (min-width: 1001px) {
	#mv{
		overflow: visible;
	}
}
/*///////// 線と紐 /////////////*/
#mv .sen{
	position: absolute;
	top: 45%;
	left:0;
	width: 20%;
	z-index: 10;
}
#mv .senR{
	left: auto;
	right:0;
}
#mv .himo{
	position: absolute;
	top: 60%;
	left:-60px;
	width: 150%;
}

/*///////// 雲 /////////////*/
.clouds{
	position: absolute;
	width: 40%;
}
.cloudL{
	top: 5%;
	left: -50px;
	animation: fuwafuwa_1 10s ease 0s infinite;
}
.cloudR{
	top: 22%;
	right: -50px;
	animation: fuwafuwa_2 7s ease .5s infinite;
}
.cloudRed{
	top: 80%;
	right: -20px;
	animation: fuwafuwa_3 8s ease 0s infinite;
}
@keyframes fuwafuwa_1 {
    0% {
        transform: translate(0, 0);
    }
    50% {
        transform: translate(-15%, 0);
    }
    100% {
        transform: translate(0, 0);
    }
}
@keyframes fuwafuwa_2 {
    0% {
        transform: translate(0, 0);
    }
    40% {
        transform: translate(-2%, 0);
    }
    80% {
        transform: translate(2%, 0);
    }
    100% {
        transform: translate(0, 0);
    }
}
@keyframes fuwafuwa_3 {
    0% {
        transform: translate(0, 0);
    }
    40% {
        transform: translate(-5%, 0);
    }
    80% {
        transform: translate(5%, 0);
    }
    100% {
        transform: translate(0, 0);
    }
}
/*/// Tblet ///*/
@media (min-width: 768px) {
	#mv .himo{
		position: absolute;
		top: 60%;
		left:-130px;
		width: 150%;
	}
}
/*/// PC ///*/
@media (min-width: 821px) {
	#mv .himo{
		top: 60%;
		left:75px;
		width: 90%;
	}
	#mv .senR{
		top: 55%;
		left: auto;
	}
	.clouds{
		width: 30%;
	}
	.cloudL{
		top: 15%;
		left: -120px;
	}
	.cloudR{
		top: 42%;
		right: -120px;
	}
	.cloudRed{
		top: 90%;
		right: -20px;
	}
}
@media (min-width: 1001px) {
	#mv .himo{
		left: 95px;
	}
	#mv .sen{
		top: 45%;
		width:15%;
		left: 10%;
	}

	#mv .senR{
		width:12%;
		top: 50%;
		left: 88%;
	}
	.clouds{
		width: 23%;
	}
	.cloudL{
		top: 15%;
		left: 0px;
	}
	.cloudR{
		right: 0px;
	}
	.cloudRed{
		right: 0px;
	}
}





/*====================================================================
MVSTORE
====================================================================*/
.mvstore{
	width: 100%;
	margin: auto;
	text-align: center;
	position: relative;
	z-index: 100;
	background-color:var(--color-ecru);
	padding: 24px;
}

/*///////// あしらい /////////////*/
.cloudG_L{
	position: absolute;
	top: 0;
	left: 0;
	z-index: -1;
}
.title{
	width: 55%;
	margin: auto;
	/* margin-right: 8%; */
	margin-left: 15%;
	margin-top: 5%;
}
.cloud_title{
	width: 22%;
	position: absolute;
	top: 45px;
	left: 21%;
	z-index: -1;
	animation: fuwafuwa_1 10s ease 0s infinite;
}

/*///////// P /////////////*/
.mvstore>div{
	margin-bottom: 24px;
}
.mvstore>p{
	text-align: left;
	width: 90%;
	margin: auto;
	margin-top: 32px;
}
/*/// Tblet ///*/
@media (min-width: 768px) {
	.mvstore{
		padding: 48px;
	}
	.mvstore>div{
		margin-bottom: 40px;
	}
	.mvstore>p{
		text-align: center;
		width: 85%;
		margin-top: 32px;
		font-size: 1.2rem;
	}
	.title{
		width: 40%;
		margin-left: 9%;
	}
	.cloud_title{
		width: 16%;
		top: 75px;
		left: 30%;
	}
}
/*/// PC ///*/
@media (min-width: 821px) {
	.mvstore>div{
		max-width: 1000px;
		margin: auto;
		margin-bottom: 80px;
	}
	.cloudG_L{
		width: 60%;
		max-width: 800px;
	}
	.title{
		width: 30%;
		margin-left: 9%;
	}
	.cloud_title{
		width: 10%;
		top: 85px;
		left: 40%;
	}
}

/*///////// hr /////////////*/
.margin24{
	margin-top: 24px;
}
hr:nth-child(even){
	border-top: 1px solid #D35345;
}
hr:nth-child(odd){
	border-top: 3px solid #D35345;
	margin: 2px auto;
}
/*/// PC ///*/
@media (min-width: 821px) {
	.margin24{
		margin-top: 64px;
	}
	hr{
		max-width: 1000px;
		margin: auto;
	}
}

/*///////// store /////////////*/
.mvstore h3{
	font-size: 1.1rem;
	margin-bottom: 8px;
	margin-top: 32px;
	font-weight: bold;
	line-height: 1.4;
}
.mvstore h3 span{
	font-size: 1.2rem;
	color: var(--color-red)
}
.mvstore a div{
	background-color:var(--color-red);
	width: 75%;
	padding: 9px;
	margin: auto;
	border-radius: 60px;
	color: white;
	font-size: 1rem;
	font-weight: bold;
	transition: .3s;
	cursor: pointer;
	border: #D35345 solid 3px;
}
.mvstore a div:hover{
	background-color:white;
	border: #D35345 solid 3px;
	color: var(--color-red);
}
.mvstore .notes{
	width: 80%;
	margin: auto;
	font-size: 0.7rem;
	margin-top: 8px;
	/* text-align: left; */
}
.mvstore .notes li{
	margin-bottom: 0;
}
/* .mvstore .notes li:last-child{
	margin-top: -3px;
} */
/*/// Tblet ///*/
@media (min-width: 768px) {
	.mvstore h3{
		font-size: 1.5rem;
		line-height: 1.5;
	}
	.mvstore h3 span{
		font-size: 1.6rem;
	}
	.mvstore a div{
		width: 45%;
		padding: 18px;
		font-size: 1.3rem;
	}
	.mvstore .notes{
		width: 43%;
		font-size: 0.8rem;
		margin-top: 12px;
	}
}
/*/// PC ///*/
@media (min-width: 821px) {
	.mvstore h3{
		margin-top: 64px;
	}
	.mvstore a div{
		width: 350px;
		padding: 18px;
		font-size: 1.3rem;
	}
	.mvstore .notes{
		width: 330px
	}
}


/*====================================================================
LINEUP
====================================================================*/
#lineup{
	background:linear-gradient( 180deg, #FFFEF2 0% 10%, #f3efdd 10% 100% );
	z-index: 10;
	position: relative;
	padding-bottom: 40px;
	overflow: hidden;
}

/*///////// arc /////////////*/
.arc {
	position: relative;
}
.arc::before{
		content: "";
		position: absolute;
		width: 500px;
		height: 200px;
		border-top-left-radius: 50%;
		border-top-right-radius: 50%;
		background-color: #f3efdd; 
		top:0px;
		left: 50%;
		transform: translateX(-50%);
		z-index: 10;
}
#lineup h2{
	font-size: 200%;
	font-weight: bold;
	color: #b8a273;
	text-align: center;
	z-index: 100;
	position: relative;	/* z-index用 */
	text-shadow: var(--box-shadow);
	margin-top: 0px;
	padding-top: 56px;
}
/*/// Tblet ///*/
@media (min-width: 768px) {
   .arc::before{
		width: 950px;
		height: 300px;
		top:40px;
	}
	#lineup h2{
		font-size: 3rem;
		margin-top: 0px;
		padding-top: 88px;
   }
}
/*/// PC ///*/
@media (min-width: 821px) {
	#lineup{
		background:linear-gradient( 180deg, #FFFEF2 0% 20%, #f3efdd 20% 100% );
	}
	.arc::before{
		width: 1500px;
		height: 600px;
		top:64px;
	}
	#lineup h2{
		padding-top: 144px;
   }
}
/*/// WidePC ///*/
@media (min-width: 821px) {
	.arc::before{
		width: 2500px;
		height: 1000px;
		top:64px;
	}
}

/*///////// flexbox /////////////*/
.lineup_wrap{
	width: 92.5%;
	margin: auto;
	margin-top: -24px;
	z-index: 10;
	position: relative;
}
#lineup .flexbox{
	width: 90%;
	margin: auto;
	background-color: rgba(255, 255, 255, 0.9);
	border-radius: 10px;
	border: 2px solid #b8a273;
	margin: 32px auto;
	padding: 16px;
}
#lineup .text{
	width: 85%;
	margin: auto;
	padding-left: 8px;
}
#lineup .text h4{
	font-size: 1.6rem;
	font-weight: bold;
	line-height: 1.4;
	margin-top: 4px;
}
#lineup .text h5{
	color: var(--color-red);
	font-size: 1.2rem;
	margin-top: -8px;
	margin-bottom: 8px;
}
#lineup .text h5 span{
	font-size: 80%;
}
#lineup .text ul{
	font-size: 90%;
}
#lineup .text ul li{
	margin-bottom: 0;
	margin-top: -6px;
}
#lineup .text ul li:first-child{
	margin-top: 4px;
}
#lineup .text ul li span{
	font-size: 80%;
}
#lineup .text ul li::before{
	content: "";
	width: 8px;
	height: 8px;
	display: inline-block;
	background-color: var(--color-red);
	border-radius: 50%;
	margin-bottom: 2px;
	margin-right: 6px;

}

/*///////// 注釈 /////////////*/
#lineup>p{
	font-size: .7rem;
	width: 80%;
	margin: auto;
	margin-top: -24px;
	line-height: 1.5;
} 

/*/// Tblet ///*/
@media (min-width: 768px) {
	.lineup_wrap{
		width: 92.5%;
		margin-top: -24px;
	}
	#lineup .flexbox{
		width: 98%;
		border: 3px solid #b8a273;
		display: flex;
		flex-wrap: nowrap;
		padding: 32px;
	}
	#lineup .flexL{
		width:50%;
	}
	#lineup .text{
		width: 50%;
		padding-left: 24px;
	}
	#lineup .text h4{
		font-size: 2rem;
		line-height: 1.6;
		margin-top: -24px;
	}
	#lineup .text h5{
		font-size: 1.5rem;
		margin-top: -12px;
	}
	#lineup .text h5 span{
		font-size: 80%;
	}
	#lineup .text ul{
		font-size: 1.1rem;
	}
	#lineup>p{
		font-size: .8rem;
		width: 90%;
		margin-top: -20px;
	} 
 }
/*/// PC ///*/
@media (min-width: 821px) {
	.lineup_wrap{
		max-width: 800px;
		width: 100%;
		margin-top: 0px;
	}
	#lineup .text{
		padding-left: 24px;
	}
	#lineup .text h5{
		margin-bottom: 24px;
	}
	#lineup .text ul li{
		margin-top: -4px;
	}
	#lineup>p{
		max-width: 780px;
		margin-bottom: 40px;
	} 
}








/*====================================================================
FOOTER
====================================================================*/
#store-search .mvstore h3{
		margin-top: 8px;
}

footer{
	background-color: white;
	width: 100vw;
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: 0.8rem;
	padding: 8px 0;
}

/*/// Tblet ///*/
@media (min-width: 768px) {
	#store-search .mvstore h3{
		margin: 0 auto;
		padding-top: 24px;
}
	#store-search .mvstore .notes{
		padding-bottom: 24px;
}

footer{
	font-size: 1rem;
	padding: 16px 0;
}
}
/*/// PC ///*/
@media (min-width: 821px) {
	#store-search .mvstore h3{
		margin: 0 auto;
		padding-top: 48px;
		margin-bottom: 8px;
}
	#store-search .mvstore .notes{
		padding-bottom: 48px;
}
}

.hr{
	max-width: 5000px;
}



.fade-in {
	opacity: 0;
	transition-duration: 500ms;
	transition-property: opacity, transform;
  }
  
  .fade-in-up {
	transform: translate(0, 10px);
  }

  .scroll-in {
	opacity: 1;
	transform: translate(0, 0);
  }