@charset "utf-8";

/*
コミケS：#2DBEFF
コミケW：#916AFF
*/

body{ background: #2DBEFF; -webkit-text-size-adjust: 100%; } /* イベントカラー */
*{ box-sizing: border-box; }

.bg{
width: 100%;
height: 100%;
position: fixed;
top: 0;
left: 0;
/*
background: -webkit-linear-gradient(90deg, #2DBEFF, #47ffea, #2DBEFF);
background: linear-gradient(90deg, #2DBEFF, #47ffea, #2DBEFF);
*/
background: -webkit-linear-gradient(90deg, #916AFF, #ff6abe, #916AFF);
background: linear-gradient(90deg, #916AFF, #ff6abe, #916AFF);
}
.bg > div{
width: 100%;
height: 100%;
background: url(../img/common/background01.png) repeat center top;
opacity: 0.4;
position: relative;
}
img{ vertical-align: text-bottom; }
.bt-link{ transition: all 0.4s ease; }
.bt-link:hover{
opacity: 0.4;
-webkit-animation-name: pulse;
animation-name: pulse;
}
.no-link{ opacity: 0.3; }

/* フォント */
*{
font-family: 'メイリオ',sans-serif;
color: #424242;
font-size: clamp(0.9rem, calc(0.6142857142857144rem + 0.714285714285714vw), 1.15rem);
line-height: clamp(1.4rem, calc(0.6142857142857144rem + 0.714285714285714vw), 1.65rem);
}
::selection{ background: rgba(30, 30, 30, 0.3); color: #FFFFFF; }
.f_m-pl{ font-family: "Noto Sans JP", sans-serif; }
/* カラー */
.f_ac{ color: #ff7606; }
.f_out{ color: #ccc; }
/* サイズ */
.f_s{	/* .T-14px */
font-size: clamp(0.75rem, calc(0.5785714285714285rem + 0.4285714285714286vw), 0.9rem);
line-height: clamp(1.25rem, calc(0.5785714285714285rem + 0.4285714285714286vw), 1.4rem);
}
.f_l{	/* .T-24px */
font-size: clamp(1.3rem, calc(0.842857142857143rem + 1.1428571428571428vw), 1.7rem);
line-height: clamp(1.8rem, calc(0.842857142857143rem + 1.1428571428571428vw), 2.2rem);
}
.f_xl{	/* .T-50px */
font-size: clamp(2.5rem, calc(1.7571428571428571rem + 1.8571428571428568vw), 3.15rem);
line-height: clamp(3.0rem, calc(1.7571428571428571rem + 1.8571428571428568vw), 3.65rem);
}
/* フォントリンク */
.font-link:link,
.font-link:visited,
.font-link:hover,
.font-link:active{ color: #ff7606; }

/* コンテンツ */

/* 包装 */
main{
width: 100%;
max-width: 2560px;
min-width: 800px;
position: relative;
margin: 0 auto;
}
main #content{
width: 100%;
position: relative;
padding: 0 5%;
}
main #content > div{
width: 100%;
max-width: 1600px;
background: #FFFFFF;
position: relative;
margin: 0 auto 40px;
padding: 40px 0;
border-radius: 20px;
}
/* 見出し */
h2{
width: 100%;
text-align: center;
font-size: clamp(2rem, calc(1.4285714285714286rem + 1.4285714285714286vw), 2.5rem);	/* 40px */
line-height: clamp(2.5rem, calc(1.9285714285714286rem + 1.4285714285714286vw), 3rem);
position: relative;
margin: 0 auto 40px auto;
padding: 0 0 20px;
}
h2:before{
content: " ";
width: 60px;
height: 6px;
background: #916AFF;
position: absolute;
bottom: 0;
left: 50%;
margin: 0 0 0 -30px;
border-radius: 4px;
}
h4{
width: 100%;
text-align: center;
display: block;
font-size: clamp(2rem, calc(1.4285714285714286rem + 1.4285714285714286vw), 2.5rem);	/* 40px */
line-height: clamp(2.5rem, calc(1.9285714285714286rem + 1.4285714285714286vw), 3rem);
margin: 0 auto 20px auto;
}
/* ライン */
hr{
width: 100%;
height: 0px;
border-top: 1px #E0E0E0 solid;
margin: 80px auto;
}


/* TOP */
#top{
width: 100%;
max-width: 2560px;
position: relative;
margin: 0 auto -30vh;
}
#top .title{
width: 100%;
z-index: 1;
text-align: center;
position: absolute;
top: 0;
left: 0;
padding: 40px 5%;
}
#top .title h1{
font-size: clamp(3.5rem, calc(1.7857142857142856rem + 4.285714285714286vw), 5rem);
line-height: clamp(3.8rem, calc(1.7857142857142856rem + 4.285714285714286vw), 5.3rem);
position: relative;
margin: 0 0 15px;
}
#top .title span{
font-size: clamp(1.3rem, calc(0.842857142857143rem + 1.1428571428571428vw), 1.7rem);
line-height: clamp(1.8rem, calc(0.842857142857143rem + 1.1428571428571428vw), 2.3rem);
}
#top .image{
width: 100%;
height: 100vh;
overflow: hidden;
position: relative;
}
#top .image .particle{
aspect-ratio: 1 / 1;
position: absolute;
bottom: 0; /* -150px 画面下部の外側からスタート */
pointer-events: none; /* パーティクルがクリックイベントを妨げないようにする */
background-size: cover;
background-position: center;
opacity: 0;
border-radius: 10%;
/* アニメーションを適用 */
animation: bubble-rise linear forwards;
will-change: transform, opacity; /* ブラウザにアニメーションを最適化させるヒント */
--rotation-end: 0deg; /* 回転角度のカスタムプロパティ（初期値:180deg） */
--sway-x: 0px; /* 左右の揺れの大きさ（初期値:70px） */
}
@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;
	}
}
/*
#top .image a{
overflow: hidden;
background: #fff;
display: block;
border-radius: 5%;
}
#top .image a img{ width: 100%; }
*/


/* メニュー */
nav{
width: 100%;
z-index: 5;
display: flex;
justify-content: center;
position: sticky;
padding: 0 5%;
top: 20px;
left: 0;
}
nav a{
width: 25%;
max-width: 150px;
background: #916AFF;
display: block;
line-height: 1.0em;
color: #fff;
text-decoration: none;
text-align: center;
position: relative;
margin: 0 5px;
padding: 10px;
border-radius: 40px;
}


/* イベント概要 */
#about{
width: 100%;
max-width: 1000px;
position: relative;
margin: 0 auto;
padding: 80px 5%;
}
#about .mov{
width: 100%;
overflow: hidden;
position: relative;
margin: 0 0 40px;
aspect-ratio: 16 / 9;
border-radius: 20px;
}
#about .mov iframe{
width: 100%;
height: 100%;
}
#about .info{
width: 100%;
display: flex;
flex-wrap: wrap;
align-items: flex-start;
position: relative;
}
#about dl{
width: 50%;
display: grid;
grid-template-columns: auto auto 1fr;
position: relative;
margin: 0 0 20px;
}
#about dl dt,
#about dl dd{
position: relative;
margin: 0 0 3px;
}
#about p{
width: 100%;
position: relative;
}


/* 告知 */
#note{
max-width: 1200px;
position: relative;
margin: 0 auto;
padding: 60px 5%;
}
#note > div{
width: 100%;
text-align: center;
position: relative;
margin: 0 0 30px;
}
#note .banner{
width: 100%;
max-width: 600px;
display: block;
position: relative;
margin: 0 auto;
}
#note .banner img{
width: 100%;
border-radius: 10px;
border: 1px #eee solid;
}


/* グッズ一覧 */
#goods{
width: 100%;
position: relative;
padding: 60px calc(5% - 15px);
}
#goods > div{
width: 100%;
text-align: center;
position: relative;
margin: 0 0 30px;
}
#goods ul{
width: 100%;
display: flex;
flex-wrap: wrap;
position: relative;
margin: 0 auto;
}
#goods ul li{
width: calc(33% - 30px);
overflow: hidden;
position: relative;
margin: 0 15px 60px;
border: 1px #cdcdcd solid;
border-radius: 15px;
}
#goods ul li .image{
width: 100%;
display: block;
position: relative;
}
#goods ul li .image img{ width: 100%; }
#goods ul li .info{
width: 100%;
position: relative;
padding: 20px;
}
#goods ul li .info .title{
width: 100%;
display: flex;
position: relative;
margin: 0 0 10px;
}
#goods ul li .info .title .no{
width: 50px;
height: 50px;
background: #916AFF;	/* イベントカラー */
display: flex;
flex-shrink: 0;
align-items: center;
justify-content: center;
color: #fff;
font-size: clamp( 24px, calc( 20px + 0.625vw ), 30px );
font-weight: 700;
position: relative;
margin: 0 10px 0 0;
border-radius: 10px;
}
#goods ul li .info .title h3{
width: 100%;
display: flex;
align-items: center;
font-size: clamp( 20px, calc( 17.333333333333332px + 0.4166666666666667vw ), 24px );
font-feature-settings: "palt";
font-weight: 700;
position: relative;
}
#goods ul li .info .price{
width: 100%;
display: flex;
align-items: flex-end;
justify-content: flex-end;
font-size: clamp( 16px, calc( 13.333333333333334px + 0.4166666666666667vw ), 20px );
font-feature-settings: "palt";
font-weight: 700;
position: relative;
margin: 0 0 10px;
}
#goods ul li .info .price span{ font-size: clamp( 12px, calc( 10.666666666666666px + 0.20833333333333334vw ), 14px ); }
#goods ul li .info dl{
width: 100%;
display: grid;
grid-template-columns: auto auto 1fr;
position: relative;
}
#goods ul li .info dl *{ font-size: clamp( 12px, calc( 10.666666666666666px + 0.20833333333333334vw ), 14px ); }
#goods ul li .info dl.set{ grid-template-columns: auto 1fr; }


/* キャンペーン */
#campaign{
width: 100%;
position: relative;
margin: 0 auto;
padding: 60px 5% 20px;
}
#campaign section{
width: 100%;
background: #f6f6f6;
display: grid;
align-items: center;
grid-template-columns: 300px 1fr;
position: relative;
margin: 0 0 30px;
padding: 20px;
border-radius: 15px;
}
#campaign section img{
width: 100%;
position: relative;
border-radius: 4px;
}
#campaign section .text img{ display: none; }	/* sp用 */
#campaign .text{
position: relative;
padding: 0 0 0 20px;
}
#campaign .text h3{
width: 100%;
font-size: clamp( 20px, calc( 17.333333333333332px + 0.4166666666666667vw ), 24px );
font-feature-settings: "palt";
position: relative;
margin: 0 0 20px;
}
#campaign .text p{
width: 100%;
position: relative;
margin: 0 0 20px;
}


/* c表記 */
.copyright{
width: 100%;
color: #aaa;
text-align: center;
position: relative;
margin: 0;
}



/* レスポンシブ */


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


	/* 包装 */
	main{ padding: 0; }
	main #content{ padding: 0; }
	main #content > div{
	border-radius: 0px;
	margin: 0 auto;
	}
	/* 見出し */
	h2{
	margin: 0 auto 20px;
	padding: 0 0 20px;
	}
	/* ライン */
	hr{ margin: 40px auto; }

	/* グッズ一覧 */
	#goods ul li{ width: calc(50% - 30px); }


	/* キャンペーン */
	#campaign{ padding: 40px 5% 10px; }
	#campaign section{
	display: block;
	margin: 0 0 20px;
	}
	#campaign section img{ margin: 0 0 10px; }
	#campaign section > img{ display: none; }	/* pc用 */
	#campaign section .text img{ display: block; }	/* sp用 */
	#campaign .text{ padding: 0; }
	#campaign .text h3{
	margin: 0 0 20px;
	}
	#campaign .text h3 br{ display: none; }

}

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



}


/* end */