@charset "utf-8";


/* TOP */
#top{
width: 100%;
height: 80vh;
/*background: #ff87a9;*/
background: linear-gradient(to top, #ff87a9 0%, #ffb787 100%);
display: flex;
align-items: center;
justify-content: center;
position: relative;
padding: 0 5%;
}
#top .item{
width: 100%;
/*max-width: 1400px;*/
/*background: rgba(0,0,0,0.5);*/
position: relative;
/*
padding: 50px;
border-radius: 30px;
*/
}
#top h1{
width: 100%;
max-width: 400px;
position: relative;
margin: 0 auto 30px;
}
#top .item h1 img{ width: 100%; }
#top .item h2{
font-size: 60px;
color: #fff;
margin: 0;
}
#top .item h2 span{
background: #fff;
color: #424242;
}
/*
#top h1,
#top h2{ mix-blend-mode: difference; }
*/
#bg-ef{
width: 100%;
height: 100vh;
overflow: hidden;
position: fixed;
top: 0;
left: 0;
}
.particle {
	position: absolute;
	bottom: 0; /* -150px 画面下部の外側からスタート */
	border-radius: 8%; /* 50% 円形にトリミング */
	pointer-events: none; /* パーティクルがクリックイベントを妨げないようにする */
	background-size: cover;
	background-position: center;
	opacity: 0;
	/* アニメーションを適用 */
	animation: bubble-rise linear forwards;
	will-change: transform, opacity; /* ブラウザにアニメーションを最適化させるヒント */
	--rotation-end: 0deg; /* 回転角度のカスタムプロパティ（初期値） */
	--sway-x: 0px; /* 左右の揺れの大きさ（初期値） */
}
@keyframes bubble-rise {
	0% {
		transform: translateY(0) rotate(0) translateX(0);
		opacity: 0;
	}
	10% {
		opacity: 1.0;
	}
	25% {
		transform: translateY(-30vh) rotate(calc(var(--rotation-end) * 0.25)) translateX(var(--sway-x));
	}
	50% {
		transform: translateY(-60vh) rotate(calc(var(--rotation-end) * 0.5)) translateX(0);
	}
	75% {
		transform: translateY(-90vh) rotate(calc(var(--rotation-end) * 0.75)) translateX(calc(var(--sway-x) * -1));
	}
	90% {
		opacity: 1.0;
	}
	100% {
		transform: translateY(-120vh) rotate(var(--rotation-end)) translateX(0);
		opacity: 0;
	}
}


/* 概要 */
#about{
width: 100%;
/*background: rgba(255,255,255,0.9);*/
background: linear-gradient(to bottom, rgba(255,255,255,0.6) 0%,rgba(255,255,255,1.0) 100%);
/*backdrop-filter: blur(10px);*/
overflow: hidden;
position: relative;
padding: 150px 5%;
}
#about .item{
width: 100%;
max-width: 1200px;
position: relative;
margin: 0 auto;
}
#about p{
width: 100%;
text-align: center;
font-size: 22px;
line-height: 1.6em;
position: relative;
}
#about p span{
color: #ff87a9;
font-size: 22px;
line-height: 1.6em;
border-bottom: #ff87a9 2px solid;
}


/* グッズ通販 */
#goods{
width: 100%;
background: #fff;
position: relative;
/* padding: 150px 0 110px; */
padding: 0 0 150px;
}
#goods .banner{
width: 100%;
position: relative;
padding: 0 5%;
}
#goods .banner a{
width: 100%;
max-width: 1200px;
display: block;
position: relative;
margin: 0 auto;
}
#goods .banner a img{
width: 100%;
border-radius: 20px;
box-shadow: 10px 10px 15px rgba(0,0,0,0.1);
}
/* グッズ通販 一覧 */
#goods .list{
width: 100%;
position: relative;
padding: 0 calc(5% - 10px);
}
#goods ul{
width: 100%;
max-width: 1620px;
display: flex;
flex-wrap: wrap;
position: relative;
margin: 0 auto;
}
#goods h3{
width: 100%;
max-width: 1600px;
font-size: 26px;
line-height: 1.4em;
position: relative;
margin: 50px auto 40px;
}
#goods ul li{
width: calc(20% - 20px);
position: relative;
margin: 0 10px 40px;
}
#goods ul li a{
width: 100%;
overflow: hidden;
display: block;
position: relative;
margin: 0 0 10px;
border: #eee 1px solid;
border-radius: 20px;
}
#goods ul li a img{
width: 100%;
transition: all 0.4s ease;
}
#goods ul li a .info{
width: 100%;
height: 100%;
background: rgba(255,255,255,0.8);
display: none;
align-items: center;
justify-content: center;
font-size: 18px;
line-height: 1.0em;
position: absolute;
top: 0;
left: 0;
padding: 20px;
animation: all 0.4s ease;
}
#goods ul li a .info span{
width: auto;
background: #121212;
display: block;
font-size: 16px;
line-height: 1.0em;
text-align: center;
color: #fff;
font-family: sans-serif;
position: relative;
padding: 10px 15px;
border-radius: 10px;
}
#goods ul li a:hover .info{
display: flex;
-webkit-animation-name: fadeInUp;
animation-name: fadeInUp;
}
#goods ul li a:hover img{ transform: scale(1.05); }
#goods ul li p{
width: 100%;
font-size: 16px;
line-height: 1.4em;
position: relative;
}
#goods ul li p span{
color: #ff87a9;
font-size: 14px;
line-height: 1.4em;
}


#back-bt{
width: 100%;
position: relative;
padding: 150px 100px;
}


/* レスポンシブ */


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



}


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

	/* グッズ通販 */
	#goods ul li{ width: calc(25% - 20px); }

}


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


	/* TOP */
	#top{ padding: 100px 0 0 0; }
	#top h2{ margin: 0 0 100px; }
	#top .bg img{ width: 20%; }

	/* 概要 */
	#about{ padding: 100px 5%; }
	#about > div{ display: block; }
	#about .mov{
	width: 100%;
	box-shadow: none;
	margin: 0 0 40px;
	}
	#about .text{
	width: 100%;
	padding: 0;
	}
	#about .text .bg{ display: none; }
	#about h2{
	color: #424242;
	text-align: center;
	}
	#about .text p{
	color: #424242;
	text-align: center;
	}
	#about .text p span{
	color: #424242;
	border-bottom: #ff87a9 2px solid;
	}

	/* グッズ通販 */
	#goods{ padding: 100px 0 60px; }
	#goods ul li{ width: calc(33.33% - 20px); }



}


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



}


/*
@media (prefers-color-scheme: dark) {

	#intro > div{ background: #121212; }
	#col .bg .gra{ background: linear-gradient(to top, rgba(33,33,33,1.0) 0%,rgba(33,33,33,0.7) 65%); }
	#col .arc .open{ background: linear-gradient(to top, rgba(33,33,33,1.0) 0%,rgba(33,33,33,0.5) 65%); }
	#goods{ background: #121212; }

}
*/


/* end */