@charset "utf-8";
/* CSS Document */

/* Menu
------------------------------ */
/* pc tab */
#kyudan {
	background-color: black;
}
#kyudan img {
	width: auto;
	height: calc(75 / 1080 * 100vh);
}
#kyudan > a { transition : all 0.25s ease 0s; }
#kyudan > a:nth-child(1) { background:url(../img/nav/m_no8.png) no-repeat; background-size: contain; }
#kyudan > a:nth-child(2) { background:url(../img/nav/m_giants.png) no-repeat; background-size: contain; }
#kyudan > a:nth-child(3) { background:url(../img/nav/m_swallows.png) no-repeat; background-size: contain; }
#kyudan > a:nth-child(4) { background:url(../img/nav/m_baystars.png) no-repeat; background-size: contain; }
#kyudan > a:nth-child(5) { background:url(../img/nav/m_dragons.png) no-repeat; background-size: contain; }
#kyudan > a:nth-child(6) { background:url(../img/nav/m_tigers.png) no-repeat; background-size: contain; }
#kyudan > a:nth-child(7) { background:url(../img/nav/m_carp.png) no-repeat; background-size: contain; }
#kyudan > a:nth-child(8) { background:url(../img/nav/m_fighters.png) no-repeat; background-size: contain; }
#kyudan > a:nth-child(9) { background:url(../img/nav/m_eagles.png) no-repeat; background-size: contain; }
#kyudan > a:nth-child(10) { background:url(../img/nav/m_lions.png) no-repeat; background-size: contain; }
#kyudan > a:nth-child(11) { background:url(../img/nav/m_marines.png) no-repeat; background-size: contain; }
#kyudan > a:nth-child(12) { background:url(../img/nav/m_buffaloes.png) no-repeat; background-size: contain; }
#kyudan > a:nth-child(13) { background:url(../img/nav/m_hawks.png) no-repeat; background-size: contain; }

#kyudan > a:nth-child(1):hover { background:url(../img/nav/m_no8_on.png) no-repeat; background-size: contain; }
#kyudan > a:nth-child(2):hover { background:url(../img/nav/m_giants_on.png) no-repeat; background-size: contain; }
#kyudan > a:nth-child(3):hover { background:url(../img/nav/m_swallows_on.png) no-repeat; background-size: contain; }
#kyudan > a:nth-child(4):hover { background:url(../img/nav/m_baystars_on.png) no-repeat; background-size: contain; }
#kyudan > a:nth-child(5):hover { background:url(../img/nav/m_dragons_on.png) no-repeat; background-size: contain; }
#kyudan > a:nth-child(6):hover { background:url(../img/nav/m_tigers_on.png) no-repeat; background-size: contain; }
#kyudan > a:nth-child(7):hover { background:url(../img/nav/m_carp_on.png) no-repeat; background-size: contain; }
#kyudan > a:nth-child(8):hover { background:url(../img/nav/m_fighters_on.png) no-repeat; background-size: contain; }
#kyudan > a:nth-child(9):hover { background:url(../img/nav/m_eagles_on.png) no-repeat; background-size: contain; }
#kyudan > a:nth-child(10):hover { background:url(../img/nav/m_lions_on.png) no-repeat; background-size: contain; }
#kyudan > a:nth-child(11):hover { background:url(../img/nav/m_marines_on.png) no-repeat; background-size: contain; }
#kyudan > a:nth-child(12):hover { background:url(../img/nav/m_buffaloes_on.png) no-repeat; background-size: contain; }
#kyudan > a:nth-child(13):hover { background:url(../img/nav/m_hawks_on.png) no-repeat; background-size: contain; }

#purchase { opacity: 0; /* padding-top: calc(150 / 1080 * 100vh); */ }
#purchase > p:nth-child(1) { aspect-ratio: 624 / 205; height: calc(205 / 1920 * 100vw); }
#purchase > p:nth-child(2) { aspect-ratio: 125 / 33; height: calc(66 / 1920 * 100vw); }
#purchase > p:nth-child(3) { aspect-ratio: 16 / 3; height: calc(60 / 1920 * 100vw); }
#purchase > p:nth-child(4) { aspect-ratio: 49 / 6; height: calc(60 / 1920 * 100vw); }

.bgKaiju8	{ animation: bc-kaiju8 0.5s ease-in forwards; }
.bgGiants	{ animation: bc-giants 0.5s ease-in forwards; }
.bgSwallows { animation: bc-swallows 0.5s ease-in forwards; }
@keyframes bc-kaiju8 {
	100% { background-color: #000; }
}
@keyframes bc-giants {
	100% { background-color: #f39b00; }
}
@keyframes bc-swallows {
	100% { background-color: #0f1351; }
}

#baseball > a,
#spaceage > a { display: block; transition: all 0.25s ease 0s; }
#baseball > a { background:url(../img/shop/bt_official.png) no-repeat; background-size: contain; }
#spaceage > a { background:url(../img/shop/bt_sags.png) no-repeat; background-size: contain; }
#baseball > a:hover { background:url(../img/shop/bt_official_on.png) no-repeat; background-size: contain; }
#spaceage > a:hover { background:url(../img/shop/bt_sags_on.png) no-repeat; background-size: contain; }


/* SP only
.menu-btn { display: none; }
*/
.menu-btn {
	display: block;
	position: fixed;
	z-index: 110;
	/* 右上
	top: 0;
	right: 0;
	*/
	/*左上*/
	top: 0;
	left: 0;
	width: 74px;
	height: 74px;
	background: url(../img/open.png) no-repeat;
	background-position: center;
	background-size: 46px;

	transition: transform 0.25s;
	transform: rotate(0);
}
#menu-btn-check:checked ~ .menu-btn {
	transform: rotate(90deg);
	background: url(../img/close.png) no-repeat;
	background-position: center;
	background-size: 46px;
}

#menu-btn-check { display: none; }
#menu-btn-check:checked ~ .menu-content { /*左から出現 left: 0; */ right:0;  }
#menu-btn-check:checked ~ .menu-btn {
	background: url(../img/close.png) no-repeat;
	background-position: center;
	background-size: 46px;
}
#menu-btn-check:checked ~ .menu-content #purchase { flex-grow: 1; }

.menu-content {
	width: 100%;
	height: 100%;
	position: fixed;
	/*右から出現*/
	/*
	top: 0;
	left: 100%;
	*/
	/*左から*/
	top: 0;
	right: 100%;
	z-index: 100;
	padding-top: 67px;
	background: rgba(0, 0, 0, 0.7);
	transition: all 0.3s;
	-webkit-animation: wipe 0.2s infinite linear;
	animation: wipe 0.2s infinite linear;
	translateZ(0);
}

@keyframes kaiten {
  from {
    transform: rotate(0);
  }
  to {
    transform: rotate(90deg);
  }
}

@media screen and (max-width: 600px) {
	.menu-btn {
		display: block;
		position: fixed;
		z-index: 110;
		/* 右上
		top: 0;
		right: 0;
		*/
		/*左上*/
		top: 9px;
		left: 8px;
		width: 32px;
		height: 32px;
		background: url(../img/open.png) no-repeat;
		background-size: contain;
		
		transition: transform 0.3s;
		transform: rotate(0);
	}
	#menu-btn-check:checked ~ .menu-btn {
		transform: rotate(90deg);
		background: url(../img/close.png) no-repeat;
		background-size: contain;
	}
	.menu-content {
		padding-top: 50px;
	}
	/*
	縦並び→横並び
	*/
	#kyudan {
		width: 100%;
		-webkit-box-orient: horizontal; -webkit-box-direction: normal; flex-direction: row;
		flex-wrap: wrap; -webkit-justify-content: space-between; justify-content: space-between;
	}
	#kyudan > a {
		transition : none;
	}
	#kyudan > a:nth-child(1) {
		width: 100%;
		height: 100px;
	}
	#kyudan > a:nth-child(n+2) {
		width: 33.33%;
		height: calc((100svh - 150px) / 4);
	}
	#kyudan > a > img {
		width: auto;
		height: 100%;
	}
	#kyudan > a:nth-child(1) { background:url(../img/menu/sp_m_no8.png) #00eee0 no-repeat; background-size: contain; background-position: center; background-size: 40%; }
	#kyudan > a:nth-child(2) { background:url(../img/menu/sp_m_giants.png) #f39b00 no-repeat; background-size: contain; background-position: center; background-size: 80%; }
	#kyudan > a:nth-child(3) { background:url(../img/menu/sp_m_swallows.png) #0f1351 no-repeat; background-size: contain; background-position: center; background-size: 80%; }
	#kyudan > a:nth-child(4) { background:url(../img/menu/sp_m_baystars.png) #003b8f no-repeat; background-size: contain; background-position: center; background-size: 80%; }
	#kyudan > a:nth-child(5) { background:url(../img/menu/sp_m_dragons.png) #00418d no-repeat; background-size: contain; background-position: center; background-size: 80%; }
	#kyudan > a:nth-child(6) { background:url(../img/menu/sp_m_tigers.png) #ffe100 no-repeat; background-size: contain; background-position: center; background-size: 80%; }
	#kyudan > a:nth-child(7) { background:url(../img/menu/sp_m_carp.png) #b00c15 no-repeat; background-size: contain; background-position: center; background-size: 80%; }
	#kyudan > a:nth-child(8) { background:url(../img/menu/sp_m_fighters.png) #005a98 no-repeat; background-size: contain; background-position: center; background-size: 80%; }
	#kyudan > a:nth-child(9) { background:url(../img/menu/sp_m_eagles.png) #7d001a no-repeat; background-size: contain; background-position: center; background-size: 80%; }
	#kyudan > a:nth-child(10) { background:url(../img/menu/sp_m_lions.png) #00214b no-repeat; background-size: contain; background-position: center; background-size: 80%; }
	#kyudan > a:nth-child(11) { background:url(../img/menu/sp_m_marines.png) #ffffff no-repeat; background-size: contain; background-position: center; background-size: 80%; }
	#kyudan > a:nth-child(12) { background:url(../img/menu/sp_m_buffaloes.png) #cdb483 no-repeat; background-size: contain; background-position: center; background-size: 80%; }
	#kyudan > a:nth-child(13) { background:url(../img/menu/sp_m_hawks.png) #fbc600 no-repeat; background-size: contain; background-position: center; background-size: 80%; }
	
	/*pcのhover、要打ちけし*/
	#kyudan > a:nth-child(1):hover { background:url(../img/menu/sp_m_no8.png) #00eee0 no-repeat; background-size: contain; background-position: center; background-size: 40%; }
	#kyudan > a:nth-child(2):hover { background:url(../img/menu/sp_m_giants.png) #f39b00 no-repeat; background-size: contain; background-position: center; background-size: 80%; }
	#kyudan > a:nth-child(3):hover { background:url(../img/menu/sp_m_swallows.png) #0f1351 no-repeat; background-size: contain; background-position: center; background-size: 80%; }
	#kyudan > a:nth-child(4):hover { background:url(../img/menu/sp_m_baystars.png) #003b8f no-repeat; background-size: contain; background-position: center; background-size: 80%; }
	#kyudan > a:nth-child(5):hover { background:url(../img/menu/sp_m_dragons.png) #00418d no-repeat; background-size: contain; background-position: center; background-size: 80%; }
	#kyudan > a:nth-child(6):hover { background:url(../img/menu/sp_m_tigers.png) #ffe100 no-repeat; background-size: contain; background-position: center; background-size: 80%; }
	#kyudan > a:nth-child(7):hover { background:url(../img/menu/sp_m_carp.png) #b00c15 no-repeat; background-size: contain; background-position: center; background-size: 80%; }
	#kyudan > a:nth-child(8):hover { background:url(../img/menu/sp_m_fighters.png) #005a98 no-repeat; background-size: contain; background-position: center; background-size: 80%; }
	#kyudan > a:nth-child(9):hover { background:url(../img/menu/sp_m_eagles.png) #7d001a no-repeat; background-size: contain; background-position: center; background-size: 80%; }
	#kyudan > a:nth-child(10):hover { background:url(../img/menu/sp_m_lions.png) #00214b no-repeat; background-size: contain; background-position: center; background-size: 80%; }
	#kyudan > a:nth-child(11):hover { background:url(../img/menu/sp_m_marines.png) #ffffff no-repeat; background-size: contain; background-position: center; background-size: 80%; }
	#kyudan > a:nth-child(12):hover { background:url(../img/menu/sp_m_buffaloes.png) #cdb483 no-repeat; background-size: contain; background-position: center; background-size: 80%; }
	#kyudan > a:nth-child(13):hover { background:url(../img/menu/sp_m_hawks.png) #fbc600 no-repeat; background-size: contain; background-position: center; background-size: 80%; }
	
	#purchase > p:nth-child(1) { height: calc(103 / 375 * 100vw); }
	#purchase > p:nth-child(2) { height: calc(33 / 375 * 100vw); }
	#purchase > p:nth-child(3) { height: calc(30 / 375 * 100vw); }
	#purchase > p:nth-child(4) { height: calc(30 / 375 * 100vw); }
}