@charset "utf-8";

/*
キャラA：#5EC656
コミケS：#2DBEFF
電気街S：#FF9800
キャラO：#FF7444
コミケW：#916AFF
電気街W：#EF5350
*/

/* TOP */
header{
width: 100%;
max-width: 2560px;
overflow: hidden;
position: relative;
margin: 0 auto;
}
header .title{
width: 100%;
text-align: center;
position: relative;
margin: 0;
padding: 40px 5%;
}
header .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;
}
header .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);
}
header ul{
width: 100%;
position: relative;
margin: 0 0 40px;
}
header ul li{
width: 100%;
position: relative;
padding: 20px 0;
}
header ul li .img{
width: 100%;
z-index: 5;
background: #fff;
opacity: 0.5;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
aspect-ratio: 1 / 1;
position: relative;
border-radius: 10px;
-webkit-transition: 0.5s ease-in-out;
transition: 0.5s ease-in-out;
transform: scale( 0.75 );
}
header ul li .img img{ width: 100%; }
header ul li.slick-current .img{
z-index: 10;
opacity: 1!important;
transform: scale(1) rotate(4deg);
}
header ul .bg-img{
width: 100%;
height: 100%;
display: none;
position: absolute;
top: 0;
left: -20px;
}
header ul .slick-current .bg-img{ display: block; }
header ul .bg-img img{
width: 90%;
position: absolute;
}
header ul .bg-img img.img01{
top: 10%;
left: -70%;
}
header ul .bg-img img.img02{
bottom: 10%;
right: -70%;
}
header .goods-img{ display: none; }
header .goods-img.slick-initialized{ display: block; }
header ul li .bt{
width: 100%;
z-index: 15;
display: none;
justify-content: center;
position: absolute;
bottom: 0;
left: 0;
}
header ul li .bt a{
width: 60px;
height: 60px;
background: #2DBEFF;
display: flex;
align-items: center;
justify-content: center;
text-decoration: none;
position: relative;
border-radius: 100%;
}
header ul li .bt a::after{
content: '▼';
font-size: 20px;
line-height: 1.0em;
color: #fff;
font-weight: bold;
}
header ul .slick-current .bt{ display: flex; }


/* メニュー */
nav{
width: 100%;
z-index: 5;
display: flex;
justify-content: center;
position: sticky;
top: 20px;
left: 0;
}
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;
}


/* イベント概要 */
#about{
width: 100%;
max-width: 850px;
position: relative;
margin: 0 auto;
padding: 60px 0;
}
#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;
}


/* 欲しいものリスト */
#favlist{
width: 100%;
background: #fff;
overflow-y: auto;
position: relative;
padding: 30px;
border-radius: 10px;
}
#favlist .text{
width: 100%;
text-align: center;
position: relative;
margin: 0 0 30px;
}
#favlist ul{
width: 100%;
max-height: max-content;
position: relative;
margin: 0 0 10px;
padding: 10px 0 0;
border-top: 1px #eee solid;
border-bottom: 1px #eee solid;
}
#favlist ul li{
width: 100%;
display: none;
list-style: none;
position: relative;
margin: 0 0 10px;
}
#favlist ul li div{
width: 100%;
display: flex;
position: relative;
}
#favlist ul li span{
width: 30px;
height: 30px;
background: #2DBEFF;
display: flex;
align-items: center;
justify-content: center;
font-size: 14px;
line-height: 14px;
color: #fff;
font-weight: bold;
position: relative;
margin: 0 5px 0 0;
padding: 10px;
border-radius: 100%;
}
#favlist ul li p{
width: calc(100% - 40px);
position: relative;
}
#favlist .price{
width: 100%;
display: flex;
position: relative;
margin: 0 0 30px;
}
#favlist #resetFavlist{
width: auto;
background: #424242;
display: inline-block;
color: #fff;
position: relative;
padding: 5px 15px;
border-radius: 30px;
cursor: pointer;
}


/* グッズ一覧 */
#goods{
max-width: 1200px;
position: relative;
margin: 0 auto;
padding: 60px 0;
}
#goods > section{
width: 100%;
display: flex;
flex-wrap: wrap;
position: relative;
margin: 0 auto;
}
/* グッズ テキスト */
#goods .info{
width: 50%;
margin: 0;
position: relative;
}
#goods .info .tags{	/* タグ */
width: 100%;
position: relative;
margin: -40px 0 50px;
}
#goods .info .tags span{
background: #424242;
font-size: clamp(0.75rem, calc(0.5785714285714285rem + 0.4285714285714286vw), 0.9rem);
line-height: clamp(1.25rem, calc(0.5785714285714285rem + 0.4285714285714286vw), 1.4rem);
position: relative;
margin: 0 5px;
padding: 3px 10px;
border-radius: 4px;
}
#goods .info h3{	/* 商品名 */
width: 100%;
display: flex;
align-items: flex-start;
position: relative;
margin: 0 0 20px;
}
#goods .info h3 span{
width: 65px;
height: 65px;
background: #2DBEFF; /* イベントカラー */
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
font-size: 26px;
line-height: 26px;
font-weight: bold;
color: #fff;
position: relative;
margin: 0 10px 10px -75px;
border-radius: 100px;
border: 5px #fff solid;
}
#goods .info h3 p{
width: 100%;
font-size: clamp(1.5rem, calc(0.9285714285714286rem + 1.4285714285714286vw), 2rem);
line-height: clamp(2.0rem, calc(0.9285714285714286rem + 1.4285714285714286vw), 2.5rem);
font-feature-settings: "palt";
position: relative;
}
/* 欲しいものリストボタン */
#goods .info .checkbox{
width: 100%;
display: flex;
align-items: center;
position: relative;
margin: 0 0 20px;
}
#goods .info .checkbox input[type="checkbox"]{
width: 25px;
height: 25px;
background: #eee;
display: flex;
align-items: center;
justify-content: center;
font-size: 20px;
line-height: 20px;
position: relative;
margin: 0 5px 0 0;;
border-radius: 4px;
cursor: pointer;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
}
#goods .info .checkbox input[type="checkbox"]:before{
content: '★';
color: #fff;
}
#goods .info .checkbox input[type="checkbox"]:checked{
background: #2DBEFF;
}
#goods .info .checkbox input[type="checkbox"]:checked:before {
content: '★';
color: #fff;
}
#goods .info .text{	/* 説明 */
width: 100%;
position: relative;
margin: 0 0 30px;
}
#goods .info .text p{
width: 100%;
position: relative;
}
#goods .info .spec{	/* 概要 */
width: 100%;
position: relative;
}
#goods .info .spec p{
width: 100%;
position: relative;
}
#goods .info .spec dl{
width: 100%;
display: grid;
grid-template-columns: auto auto 1fr;
position: relative;
margin: 0 0 0 10px;
}
#goods .info .spec.set dl{ grid-template-columns: auto 1fr; }
#goods .info > a{
display: inline-block;
position: relative;
margin: 30px 0 0 0;
}
#goods .info .img-link{
width: 100%;
display: block;
position: relative;
margin: 50px 0 0 0;
}
#goods .info .img-link img{ width: 100%; }
/* グッズ イメージ */
#goods .image{
width: calc(50% - 10px);
display: flex;
align-items: center;
justify-content: center;
aspect-ratio: 1 / 1;
position: relative;
margin: 0 0 0 10px;
}
#goods .multiple{
display: flex;
flex-wrap: wrap;
align-items: flex-start;
justify-content: center;
}
#goods .image-sp{
width: 100%;
display: none;
position: relative;
margin: 0 auto 20px auto;
}
#goods .image img,
#goods .image-sp img{
width: 100%;
display: block;
flex-shrink: 0;
border-radius: 10px;
}
#goods .multiple img{ width: 50%; }
/* グッズ 複数 */
#goods .more-list{
width: 100%;
display: flex;
flex-wrap: wrap;
justify-content: center;
position: relative;
margin: 50px 0 0 0;
}
#goods .more-list p{
width: 100%;
text-align: center;
margin: 0 auto 20px;
}
#goods .more-list a{
width: calc(20% - 10px);
text-decoration: none;
position: relative;
margin: 0 5px 20px;
}
#goods .more-list a img{
width: 100%;
border-radius: 10px;
margin: 0 0 5px;
border: 1px #eee solid;
}
#goods .more-list a span{
width: 100%;
display: block;
font-size: clamp(0.6rem, calc(0.37142857142857133rem + 0.5714285714285716vw), 0.8rem);
line-height: clamp(1.1rem, calc(0.37142857142857133rem + 0.5714285714285716vw), 1.3rem);
position: relative;
}


/* 告知 */
#note{
max-width: 1200px;
position: relative;
margin: 0 auto;
padding: 60px 0;
}
#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;
}


/* キャンペーン */
#campaign{
max-width: 1200px;
position: relative;
margin: 0 auto;
padding: 60px 0 20px 0;
}
#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: 10px;
}
#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(1.3rem, calc(0.842857142857143rem + 1.1428571428571428vw), 1.7rem);
line-height: clamp(1.8rem, calc(0.842857142857143rem + 1.1428571428571428vw), 2.2rem);
font-feature-settings: "palt";
position: relative;
margin: 0 0 20px;
}
#campaign .text p{
width: 100%;
font-weight: bold;
position: relative;
margin: 0 0 20px;
}


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


/* グッズ一覧 */
#goods-list{
width: 100%;
position: relative;
margin: 0 auto;
padding: 60px 0;
}
#goods-list p{
width: 100%;
text-align: center;
position: relative;
margin: 0 0 20px;
}
#goods-list ul{
width: 100%;
display: flex;
flex-wrap: wrap;
position: relative;
}
#goods-list ul li{
width: calc(16.66% - 10px);
position: relative;
margin: 0 5px 30px;
}
#goods-list ul li a{
width: 100%;
background: #fff;
overflow: hidden;
display: block;
position: relative;
padding: 5px;
border: #ddd 1px solid;
border-radius: 10px;
}
#goods-list ul li a img{
width: 100%;
}



/* レスポンシブ */


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


	/* メニュー */
	nav{
	background: rgba(0, 0, 0, 0.5);
	padding: 0 5%;
	backdrop-filter: blur(10px);
	border-radius: 40px;
	}
	nav a{
	width: 25%;
	max-width: auto;
	background: none;
	display: inline-block;
	overflow: hidden;
	color: #fff;
	position: relative;
	margin: 0;
	padding: 10px 5px;
	border-radius: 0;
	text-overflow: ellipsis;
	white-space: nowrap;
	}


	/* TOP */
	header{ padding: 0; }
	header .title{ padding: 40px 20px; }
	header ul .bg-img img.img01{ left: -40%; }
	header ul .bg-img img.img02{ right: -40%;}

	/* イベント概要 */
	#about{ padding: 40px 0; }
	#about > div{ display: block; }
	#about dl{
	width: 100%;
	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;
	}


	/* グッズ一覧 */
	#goods{ padding: 40px 0; }
	#goods > section{ display: block; }
	#goods .info{ width: 100%; }
	#goods .info .tags{	/* タグ */
	margin: -10px 0 20px;
	}
	#goods .info h3{
	display: flex;
	/*align-items: center;*/
	margin: 0 0 20px;
	padding: 0;
	}
	#goods .info h3 span{
	width: 50px;
	height: 50px;
	font-size: 24px;
	line-height: 24px;
	margin: 0 10px 10px 0;
	border: none;
	}
	#goods .info h3 br{ display: none; }
	#goods .info .text{ margin: 0 0 20px 0; }
	#goods .image{ display: none; }
	#goods .info .image-sp{ display: block; }
	/* グッズ 複数 */
	#goods .more-list a{ width: 25%; }


	/* キャンペーン */
	#campaign{ padding: 40px 0 10px 0; }
	#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 */