@charset "utf-8";

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

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

body > .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( 14px, calc( 11.333333333333334px + 0.4166666666666667vw ), 18px );
line-height: clamp( 24px, calc( 21.333333333333332px + 0.4166666666666667vw ), 28px );
}
::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( 10px, calc( 7.333333333333334px + 0.4166666666666667vw ), 14px );
line-height: clamp( 20px, calc( 17.333333333333332px + 0.4166666666666667vw ), 24px );
}
.f_l{	/* .T-24px */
font-size: clamp( 18px, calc( 15.333333333333334px + 0.4166666666666667vw ), 22px );
line-height: clamp( 28px, calc( 25.333333333333332px + 0.4166666666666667vw ), 32px );
}
.f_xl{	/* .T-50px */
font-size: clamp( 32px, calc( 20px + 1.875vw ), 50px );
line-height: clamp( 42px, calc( 30px + 1.875vw ), 60px );
}
/* フォントリンク */
.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( 32px, calc( 26.666666666666668px + 0.8333333333333334vw ), 40px );
line-height: clamp( 42px, calc( 36.666666666666664px + 0.8333333333333334vw ), 50px );
position: relative;
margin: 0 auto 40px auto;
padding: 0 0 20px;
}
h2:before{
content: " ";
width: 60px;
height: 6px;
background: #2DBEFF;
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( 32px, calc( 26.666666666666668px + 0.8333333333333334vw ), 40px );
line-height: clamp( 42px, calc( 36.666666666666664px + 0.8333333333333334vw ), 50px );
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( 50px, calc( 36.66666666666667px + 2.083333333333333vw ), 70px );
line-height: clamp( 50px, calc( 36.66666666666667px + 2.083333333333333vw ), 70px );
position: relative;
margin: 0 0 15px;
}
#top .title span{
font-size: clamp( 18px, calc( 12.666666666666668px + 0.8333333333333334vw ), 26px );
line-height: clamp( 28px, calc( 22.666666666666668px + 0.8333333333333334vw ), 36px );
}
#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;
pointer-events: none;
}
nav a{
width: 25%;
max-width: 150px;
background: #2DBEFF;
display: block;
line-height: 1.0em;
color: #fff;
text-decoration: none;
text-align: center;
position: relative;
margin: 0 5px;
padding: 10px;
border-radius: 40px;
pointer-events: auto;
}


/* イベント概要 */
#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: #2DBEFF;	/* イベントカラー */
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( 18px, calc( 15.333333333333334px + 0.4166666666666667vw ), 22px );
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( 14.666666666666666px + 0.20833333333333334vw ), 18px );
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: flex;
flex-wrap: wrap;
align-items: center;
position: relative;
margin: 0 0 30px;
padding: 20px;
border-radius: 15px;
}
#campaign section img{
width: 300px;
flex-shrink: 0;
position: relative;
border-radius: 4px;
}
#campaign section .text img{ display: none; }	/* sp用 */
#campaign .text{
width: calc(100% - 300px);
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;
}
#campaign dl{
width: 100%;
background: #fff;
display: flex;
flex-wrap: wrap;
position: relative;
margin: 20px 0 10px;
padding: 20px 20px 10px;
border-radius: 10px;
/*border: #aaaaaa 1px solid;*/
}
#campaign dl p{
width: 100%;
text-align: center;
font-weight: 700;
position: relative;
margin: 0 0 10px;
padding: 0;
}
#campaign dl dt{
width: 16px;
flex-shrink: 0;
font-size: clamp( 10px, calc( 7.333333333333334px + 0.4166666666666667vw ), 14px );
line-height: clamp( 20px, calc( 17.333333333333332px + 0.4166666666666667vw ), 24px );
position: relative;
margin: 0 0 10px;
}
#campaign dl dd{
width: calc(100% - 16px);
font-size: clamp( 10px, calc( 7.333333333333334px + 0.4166666666666667vw ), 14px );
line-height: clamp( 20px, calc( 17.333333333333332px + 0.4166666666666667vw ), 24px );
position: relative;
margin: 0 0 10px;
}


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



/* レスポンシブ */


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


	/* 包装 */
	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{ width: 100%; margin: 0 0 10px; }
	#campaign section > img{ display: none; }	/* pc用 */
	#campaign section .text{ width: 100%; }
	#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 */