@charset 'UTF-8';


/*********************************************************************************/
/* Basic                                                                         */
/*********************************************************************************/
html{
	font-size: 62.5%;
}

body{
	font-size:1.6rem;/* 16px*/
	margin: 0;
	padding: 0;
	font-family: 'Noto Sans JP', 'Lato', '游ゴシック Medium', '游ゴシック体', 'Yu Gothic Medium', YuGothic, 'ヒラギノ角ゴ ProN', 'Hiragino Kaku Gothic ProN', 'メイリオ', Meiryo, 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif;
	font-size: 16px;
	width: 100%;
	line-height: 1.5;
	word-break: break-all;
	color: #fff;
	background-color: #000;
	text-align: center;
	padding: 0;
}
/* Images */

.image{
	display: inline-block;
}


img{
	max-width:100%;
	height:auto;
	vertical-align: bottom;
}

a:link { color: #fff; }
a:visited { color: #fff; }
a:hover { color: #fff; }
a:active { color: #fff; }

a {
text-decoration: none;
}




/************************************************/
/* koshirock                                    */
/************************************************/
:root{
	--pointColor: #d92922;
	--mainwidth: 1000px;
	/*--sabuwidth: 1000px;*/
}
/*罫線デフォルト*/
.bou{
	display: block;
	background-color: #fff;
	height: 2px;
	margin: 0 auto;
}
/*-----------------mainvisual-----------------*/
.ksrckbk{
	background-image: url("../images/koshirock_bg.jpg");
	background-position:center center;
	background-size: cover;
	background-attachment: fixed;
	background-repeat: no-repeat;
}
.top{
	width: 100%;
	background-color: var(--pointColor);
	padding: 15px;
	font-family: "Roboto", sans-serif;
	font-weight: 700;
	font-style: normal;
	font-size: 2rem;
}
.logoZone{
	width: var(--mainwidth);
	margin: 0 auto;
	display: flex;
	align-items: center;
}
.logoZone .flexItem{
	width: 50%;
	padding: 60px;
}
/*-----------------dataZone-----------------*/
.dataZone{
	background-color: #000;
	background-image: url("../images/backgraundimg.png");
	background-size: 500px auto;
	background-position:center center;
	background-attachment: fixed;
	background-repeat: no-repeat;
	width: 100%;
}
.dataZoneInner{
	padding: 80px 0;
	width: var(--mainwidth);
	margin:0 auto;
}
/*-----------------ライブ日程-----------------*/
.dateArea{
	display: flex;
	gap: 20px;
}
.dates{
	width: 50%;
	display: flex;
	gap: 15px;
}
.datesLeft{
	background-color: var(--pointColor);
	padding: 20px;
	width: 25%;
	position: relative;
}
.datesLeft p{
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	font-family: "Roboto", sans-serif;
	font-weight: 700;
	font-size: 2.5rem;
}
.datesRight{
	text-align: left;
	width: 75%;
	padding: 10px 0;
}
.datesDay{
	font-family: "Roboto", sans-serif;
	font-weight: 700;
	font-style: normal;
	font-size: 3.2rem;
	line-height: 2.5rem;
}
.datesRight .bou{
	margin: 15px auto 10px auto;
	width: 100%;
}
/*-----------------通し券-----------------*/
.twodays{
	padding: 30px;
	padding-bottom: 0;
	font-size: 1.8rem;
	font-weight: 700;
	line-height: 1.4;
}
.twodays p span{
	font-size: 2.6rem;
}
/*-----------------デフォルトh2-----------------*/
h2{
	font-size: 2.6rem;
}
/*-----------------オフィシャル先行-----------------*/
.official{
	margin: 30px auto 0 auto;
	padding: 30px 20px 30px 20px;
	text-align: center;
	border: solid 2px #fff;
	font-size: 1.8rem;
	font-weight: 400;
}
.official p{
	margin: 5px 0 15px 0;
}
.official .btn a{
	padding: 15px 20px;
	width: 300px;
	font-size: 1.8rem;
	font-weight: 700;
}

/*-----------------罫線カスタム-----------------*/
.middles{
	width: 300px;
	margin: 50px auto;
}
/*-----------------通常チケット販売-----------------*/
.ticket{
	margin: 0 auto;
	padding: 0 0;
}
.ticket h2 span{
	font-size: 1.8rem;
}
.ticket .buyZone{
	display: flex;
	justify-content: center;
	gap: 20px;
	padding: 30px 0 0 0;
}
.ticket .buyZone .btn1{
	padding: 15px;
	width: 250px;
	font-size: 1.8rem;
	font-weight: 700;
}
.ticket .buyZone .btn a{
	padding: 15px;
	width: 250px;
	font-size: 1.8rem;
	font-weight: 700;
}
/*-----------------お問い合わせ-----------------*/
.inquiry{
	margin: 0 auto;
}
.inquiry h2{
	padding: 0 0 15px 0;
}
.inquiry p{
	font-size: 1.8rem;
}
.inquiry .btn a{
	margin-top: 10px;
	padding: 15px;
	width: 300px;
	font-size: 1.7rem;
	font-weight: 700;
}
/*-----------------ボタン-----------------*/
.buyBtn a{
	margin: 0 auto;
	display: block;
	background: #fff;
	color: #000;
	text-align: center;
	border-radius:120px;
	transition: .2s;
}
.buyBtn a:hover{
	transform: scale(0.9);
}

.beforeBtn{
	margin: 0 auto;
	display: block;
	background: #373737;
	color: #000;
	text-align: center;
	border-radius:120px;
	transition: .2s;
	padding: 15px 20px;
	width: 300px;
	font-size: 1.8rem;
	font-weight: 700;
}



.fakeBtn{
/* 	margin: 0 auto; */
	display: block;
	background: #373737;
	color: #000;
	text-align: center;
	border-radius:120px;
/* 	cursor: not-allowed; */
}
/*-----------------最下部-----------------*/
.copyRight{
	width: 100%;
	height: auto;
	background-color: var(--pointColor);
	color: #fff;
	text-align: center;
	padding: 80px 0;
	font-size: 1.4rem;
}
.copyRight img{
	width: 100px;
	padding-bottom: 30px;
}
/*-----------------ページトップ-----------------*/
#page_top_krg2024{
	width: 100px;
	height: 100px;
	position: fixed;
	right: -150px;
	bottom: 20px;
	z-index: 1500;
}
#page_top_krg2024 a{
	background: url("../images/pagetop.png");
	background-size: 100% auto;
	background-repeat: no-repeat;
	position: relative;
	display: inline-block;
	width: 100px;
	height: 100px;
	text-decoration: none;
}
/*-----------------ふわふわanimation-----------------*/
@keyframes fuwafuwa {
	0%, 100% {
		transform: translateY(0);
	}
	50% {
		transform: translateY(-10px);
	}
}
.fuwafuwa1 {
	animation: 3s fuwafuwa infinite;
}

@media screen and (max-width: 1200px) {
	:root{
		--mainwidth: 1000px;
	}
/* 	.dateData .flexItem .right p .hidden{
		display: none;
	}
 */
}
/*-----------------バンド一覧-----------------*/
.bandZone{
	padding-top:20px;
	display: flex;
	flex-wrap: wrap;
	gap: 20px 2%;
}
.bandZone a{
	width: 32%;
}
.bandZone a:hover{
	opacity: 0.9;
}
.bandZone_p{
	font-family: "Roboto", sans-serif;
	font-weight: 700;
	font-style: normal;
	font-size: 2.8rem;
	line-height: 2.5rem;
	margin: 0 auto;
}
.bandZone_h2{
	margin-bottom: 20px;
}
.bandZone_span{
	display: block;
	height: 60px;
}
.dateTitle{
	background-color: var(--pointColor);
	padding: 10px 15px;
	margin: 20px 0 0 0;
	text-align: left;
}

/*-----------------タイムテーブル-----------------*/
.timetable img{
	border: 2px solid #fff;
}

/*-----------------その他-----------------*/
/*太字*/
.bolds{
	font-weight: 700;
}
/*テキストサイズ*/
.sizeM{
	font-size: 1.8rem;
}
.sizeL{
	font-size: 2.0rem;
}
.sizeXL{
	font-size: 2.4rem;
}
.sizeXXL{
	font-size: 2.8rem;
}

@media screen and (max-width: 1000px) {
	:root{
		--mainwidth: 90%;
		/*--sabuwidth: 80%;*/
	}
	.fakeBtn{
		margin: 0 auto;
	}
	.dataZone{
		background-size: 80% auto;
		padding: 0;
	}
	.dataZoneInner{
		padding: 50px 0;
	}
	.dateArea{
		display: block;
		gap: 20px;
	}
	.dates{
		width: 100%;
		margin: 0 0 20px 0;
	}
	.twodays{
		padding: 10px 0 0 0;
	}
	.ticket .buyZone{
		display: flex;
		flex-direction: column;
		gap: 20px;
	}
	.bandZone{
		gap: 15px 2%;
	}
}
@media screen and (max-width: 880px) {
	.top{
		font-size: 1.6rem;
	}
	.logoZone{
		width: var(--mainwidth);
		margin: 0 auto;
		display: flex;
		flex-direction: column;
		align-items: center;
		padding: 40px;
		gap: 20px;
	}
	.logoZone .flexItem{
		width: 80%;
		padding: 0 ;
	}
	.copyRight{
		font-size: 1.4rem;
		padding: 40px 0;
	}
	.copyRight img{
		width: 90px;
		padding-bottom: 20px;
	}
	#page_top_krg2024{
		width: 75px;
		height: 75px;
	}
	#page_top_krg2024 a{
		width: 75px;
		height: 75px;
	}

}
@media screen and (max-width: 768px) {
	:root{
		--mainwidth: 100%;
	}
	.top{
		padding: 10px;
	}
	.dataZone{
		background-size: 82% auto;
	}
	.ksrckbk{
		background-image: url("../images/koshirock_spbg.jpg");
		background-position:center center;
		background-size: cover;
		background-attachment: scroll;
		background-repeat: no-repeat;
	}
	.dataZone{
		background-position:top 40px center;
		padding: 40px 5% 40px 5%;
		background-attachment: scroll;
	}
	.dateData{
		gap: 20px;
	}
	.dataZoneInner{
		padding: 0;
	}
	.dates{
		gap: 12px;
		margin: 0 0 12px 0;
	}
	.datesLeft{
		padding: 0;
	}
	.datesLeft p{
		font-size: 1.8rem;
	}
	.datesRight{
		padding: 8px 0;
	}
	.datesDay{
		font-size: 2.4rem;
		line-height: 2.4rem;
	}
	.datesRight .bou{
		margin: 5px auto 5px auto;
	}
	.twodays{
		padding: 0;
	}
	.twodays p{
		font-size: 1.6rem;
	}
	.twodays p span{
		font-size: 2.0rem;
	}
	h2{
		font-size: 2.0rem;
	}
	.official{
		margin: 15px auto 0 auto;
		padding: 20px;
		font-size: 1.6rem;
	}
	.ticket{
		padding: 0 0 0 0;
	}
	.ticket p{
		font-size: 2rem;
		padding: 20px 0 20px 0;
	}
	.ticket h2 span{
		font-size: 1.4rem;
	}
	.official p:nth-of-type(2){
		font-size: 1.4rem;
		margin: 2px auto 10px auto;
	}
	.middles{
		width: 30%;
		margin: 40px auto 30px auto;
	}
	.inquiry h2{
		padding: 0 0 8px 0;
	}
	.inquiry p:nth-child(2),
	.inquiry p:nth-child(3){
		font-size: 1.6rem;
		padding-bottom: 1px;
	}
	.inquiry p{
		font-size: 1.6rem;
	}
	.ticket .buyZone{
		gap: 10px;
		padding: 20px 0 0 0;
	}
	.official .btn a,
	.ticket .buyZone .btn a,
	.inquiry .btn a{
		width: 250px;
		padding: 10px;
		font-size: 1.4rem;
	}
	.beforeBtn{
		padding: 10px;
		width: 250px;
		font-size: 1.4rem;
	}
	.ticket .buyZone .btn1{
		width: 250px;
		padding: 10px;
		font-size: 1.4rem;
	}
	.copyRight{
		font-size: 1.2rem;
	}
	.copyRight img{
		width: 70px;
	}
	.sizeM{
		font-size: 1.6rem;
	}
	.sizeL{
		font-size: 1.7rem;
	}
	.sizeXL{
		font-size: 1.8rem;
	}
	.sizeXXL{
		font-size: 2.4rem;
	}
	/* バンド一覧 */
	.bandZone{
		padding-top:20px;
		gap: 20px 6%;
	}
	.bandZone a{
		width: 47%;
	}
	.bandZone_h2{
		margin-bottom: 10px;
	}
	.bandZone_span{
		display: block;
		height: 40px;
	}
}