@charset "utf-8";
/*------------------------------------------------------------
	index
------------------------------------------------------------*/
#main .pokeBox .lBox {
	width: 36.5%;
	position: relative;
	background: url(../../images/SC_C01_05/bg01.jpg) repeat-x left top / 43.2rem 100%;
}
#main .pokeBox .lBox .starBox {
	position: absolute;
	top: 6.4rem;
	right: 5rem;
	border-radius: 50%;
	width: 4.4rem;
	height: 4.4rem;
	background-color: rgb(255, 255, 255, 0.33);
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
}
#main .pokeBox .lBox .starBox .star {
	margin: 0 auto;
}
#main .pokeBox .lBox .bgTtl {
	margin-bottom: 1.2rem;
	padding: 0.8rem 1.7rem 0.9rem;
	font-size: 1.8rem;
	font-weight: 500;
	background-color: #FADC01;
	border-radius: 0 0 1.2rem 0;
	text-align: center;
	color: #000;
	display: inline-block;
}
#main .pokeBox .lBox .pho {
	margin: 0 auto 1rem;
	width: 9rem;
}
#main .pokeBox .lBox .bgBox {
	margin: 0 auto 2rem;
	padding: 1.1rem 1rem 1rem;
	box-sizing: border-box;
	font-size: 1.4rem;
	font-weight: 400;
	width: 79%;
	background: rgb(255, 255, 255, 0.6);
	border-radius: 1.6rem;
	text-align: center;
}
#main .pokeBox .lBox .bgBox p {
	line-height: 1.55;
}
#main .pokeBox .lBox .bgBox p .ico {
	margin: 0 0.3rem -0.4rem;
	width: 1.2rem;
	display: inline-block;
	vertical-align: -0.4rem;
}

#main .comSlideBox01 .slick-arrow.slick-prev,
#main .comSlideBox01 .slick-arrow.slick-next {
		top: 5.6rem;
}
@media all and (min-width: 520px) {
	#main .pokeBox {
		margin-top: -0.7rem;
	}
}
@media all and (max-width: 519px) {
	#main .pokeBox {
		margin: 0 -1.6rem;
	}
	.comBox {
		max-width: inherit;
	}
	#main .pokeBox .lBox {
		margin: 0 0 5rem;
		padding-bottom: 0.1rem;
		width: 100%;
	}
	#main .pageTitle.page02 {
		padding-bottom: 2.6rem;
	}
	#main .pokeBox .lBox .bgTtl {
		padding: 0.9rem 1.9rem 0.8rem;
	}
	#main .pokeBox .lBox .bgBox {
		padding: 1.1rem 1rem 0.9rem;
		width: 90%;
	}
	#main .pokeBox .lBox .bgBox p .ico {
		margin: 0 0.3rem -0.6rem;
		width: 1.2rem;
		display: inline-block;
		vertical-align: -0.4rem;
	}
	#main .pokeBox .rBox {
		margin-top: 9rem;
	}
	#main .pokeBox .lBox .pho {
		margin: 1rem auto 2rem;
	}
}

#main .heading {
	margin-bottom: 2.3rem;
	color: rgba(0, 0, 0, 0.87);
	font-size: 2rem;
	font-weight: 700;
}
#main .tabPanel .tabUl {
	display: flex;
	overflow: auto;
	border-bottom: 0.1rem solid rgba(0, 0, 0, 0.1);
}
#main .tabPanel .tabUl a {
	display: inline-block;
	padding: 0 1rem 0.8rem;
	letter-spacing: 0.04em;
	white-space: nowrap;
	color: rgba(0, 0, 0, 0.9);
	border-bottom: 0.4rem solid transparent;
}
#main .tabPanel .tabUl .on {
	border-bottom-color: #0796ff;
	font-weight: 500;
}
#main .subTabUl {
	padding: 1.9rem;
	display: flex;
	justify-content: center;
	align-items: center;
	background: rgba(0, 0, 0, 0.05);
	gap: 0.8rem;
}
#main .subTabUl a {
	display: inline-flex;
	justify-content: center;
	align-items: center;
	min-width: 6.1rem;
	height: 5rem;
	border-radius: 1rem;
	background: #fff;
	border: 0.1rem solid rgba(0, 0, 0, 0.2);
	transition: .3s;
	position: relative;
}
#main .subTabUl a::before {
	position: absolute;
	top: -0.1rem;
	left: -0.1rem;
	content: '';
	transition: .3s;
	min-width: 6.1rem;
	border-radius: 1rem;
	width: 100%;
	box-sizing: border-box;
	height: 5rem;
	opacity: 0;
	border: 0.2rem solid #0796ff;
}
#main .subTabUl .on {
	border: 0.2rem solid #0796ff;
}
#main .tabBox {
	display: none;
}
#main .tabBox .subBox {
	padding: 5.5rem 1rem 2.6rem;
}
#main .pokeList {
	display: flex;
	flex-wrap: wrap;
	gap: 4.5rem 1rem;
}
#main .pokeList li {
	width: calc((100% - 4rem)/5);
}
#main .pokeList a {
	display: block; 
	text-align: center;
}
#main .pokeList a .img {
	display: flex;
	align-items: center;
	justify-content: center;
	margin: auto;
	width: 11.2rem;
	height: 11.2rem;
	padding: 5%;
	transition: .3s;
	position: relative;
	background: url(../../images/SC_P03_02/info_bg01.png) no-repeat center center / 100% 100%;
}
#main .pokeList a .img img {
	position: relative;
    bottom: auto;
	transition: .3s;
}
#main .pokeList .ttl{
	display: block;
	font-size: 1.4rem;
	letter-spacing: 0.02em;
}
#main .star {
	margin: 1rem auto 0;
	width: 3.6rem;
	position: relative;
	cursor: pointer;
	transition: transform .2s;
}
#main .star:active{
	transform: scale(.95);
}
#main .star::before {
	position: absolute;
	left: 0.5rem;
	top: 0.5rem;
	width: 2.7rem;
	height: 2.6rem;
	content: '';
	background: url(/images/SC_C01_05/star.png) no-repeat center center / 100%;
	opacity: 0;
	transition: .3s;
}
#main .star.on::before {
	opacity: 1;
}
#main .tabBtn {
	padding: 2.4rem 0;
	display: flex;
	align-items: center;
	justify-content: center;
	border-top: 0.1rem solid rgba(0, 0, 0, 0.1);
}
#main .tabBtn p {
	margin: 0 4.8rem;
	padding: 0.7rem 0.5rem; 
	min-width: 14.8rem;
	font-family: "Lato", sans-serif;
	font-size: 1.8rem;
	text-align: center;
	color: rgba(0, 0, 0, 0.9);
	text-align: center;
	border-radius: 0.8rem;
}
#main .tabBtn a {
	position: relative;
	width: 4.4rem;
	aspect-ratio: 1;
	display: flex;
	justify-content: center;
	align-items: center;
}
#main .tabBtn .nolink a {
	pointer-events: none;
}
#main .tabBtn a img {
	width: 100%;
	transform: 0.3s;
}
#main .tabBtn a:before {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	content: '';
	background: url(/images/common/arrow03.png) no-repeat center center / 100%;
	opacity: 0;
	transform: 0.3s;
	z-index: 2;
}
#main .tabBtn .next a:before {
	background-image: url(/images/common/arrow04.png);
}
#main .tabBtn .nolink a img {
	opacity: 0;
}
#main .tabBtn .nolink a::before {
	opacity: 1;
}
#main .comSlideBox01 {
	margin: 0 auto;
}
#main .comSlideBox01 .item {
	display: none;
}
#main .comSlideBox01 .item .pho {
	padding-top: 1rem;
	width: auto;
}

#main .comSlideBox01 .item .comBtn01 {
	margin-top: 1.9rem;
}
#main .comSlideBox01 > .slick-dots {
	margin-top: 1.5rem;
	margin-bottom: -4.1rem;
}
#main .comSlideBox01 .comBtn01 a {
	padding: 0.3rem 1rem;
}
#main .comSlideBox01 .item .pho a {
	display: flex;
    height: 14rem;
    justify-content: center;
    align-items: center;
}
#main .comSlideBox01 .item .pho a img {
    height: 100%;
}
@media all and (min-width: 520px) {
	#main .pokeList a:hover .img img {
		scale: 1.1;
	}
	#main .comSlideBox01 .item .pho a:hover {
		transform: translateY(-0.7rem);
	}
	#main .pokeBox {
		display: flex;
		justify-content: space-between;
		align-items: flex-start;
	}
	#main .pokeBox .lBox {
		width: 36.48%;
	}
	#main .pokeBox .rBox {
		width: 58.1%;
	}
	#main .tabPanel .tabUl a:not(.on):hover {
		color: #0796ff;
	}
	#main .subTabUl a:hover::before {
		opacity: 1;
	}
	#main .tabBtn a:hover {
		opacity: 0.7;
	}
	#main .tabBtn .nolink a:hover {
		opacity: 1;
	}
	#main .subTabUl .on::before {
		display: none;
	}
}
@media all and (max-width: 519px) {
	#main .heading {
		margin: 0 1.6rem 2.9rem;
		color: rgba(0, 0, 0, 0.9);
		font-size: 1.8rem;
		font-weight: 500;
	}
	#main .tabPanel .tabUl {
		padding: 0 1.5rem;
		gap: 1rem;
	}
	#main .tabPanel .tabUl a {
		padding: 0 1rem 0.8rem;
	}
	#main .subTabUl {
		padding: 1.9rem;
		gap: 0.8rem;
	}
	#main .tabBox .subBox {
		padding: 5.3rem 0 6rem;
	}
	#main .pokeList {
		padding: 0 1rem;
		gap: 5.3rem 0;
	}
	#main .pokeList li {
		width: calc(100%/3);
	}
	#main .pokeList .img {
		margin: 0 -0.2rem;
	}
	#main .pokeList .ttl{
		margin-top: 0;
	}
	#main .tabBtn {
		padding: 2.4rem 1.6rem 2.7rem;
		margin: 0 -1.6rem;
		justify-content: space-between;
	}
	#main .tabBtn p {
		min-width: auto;
		margin: auto;
	}
	#main .comSlideBox01 > .slick-dots {
		margin-top: 1.5rem;
		margin-bottom: -4.3rem;
	}
}

@media all and (max-width: 519px) {
	#main .comSlideBox01 .item .pho a {
		height: 13rem;
	}
	.pagePath {
		padding: 2.4rem 1.6rem 3.2rem;
		margin-bottom: 6.3rem;
	}
}

#main .driftBox {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgb(255, 255, 255, 0.7);
	display: none;
}

#main .driftBox.show {
	display: flex;
	justify-content: center;
	align-items: center;
	--time: 3000ms;
	opacity: 0;
	z-index: 10000;
	animation: ballshow var(--time) forwards;
}
#main .driftBox .photo {
	position: relative;
	width: 13.2rem;
	height: 13.2rem;
}
#main .driftBox .photo .item {
	position: absolute;
	aspect-ratio: 1 / 1;
	opacity: 0;
	animation: pointmoveY var(--time) ease-out forwards,
			   showFlare var(--time) ease-in forwards;
}
#main .driftBox .photo .img01 {
	top: -0.2rem;
	left: -4.3rem;
	height: 3.7rem;
	animation-delay: 0s;
}
#main .driftBox .photo .img02 {
	top: -3.6rem;
	left: 1.2rem;
	height: 6.5rem;
	animation-delay: 0.1s;
}
#main .driftBox .photo .img03 {
	top: 1.8rem;
	right: 1.8rem;
	height: 3.4rem;
	animation-delay: 0.2s;
}
#main .driftBox .photo .img04 {
	top: -2.4rem;
	right: -3rem;
	height: 3.4rem;
	animation-delay: 0.3s;
}

@keyframes ballshow {
	0%, 100% {
		opacity: 0;
	}
	25%, 75% {
		opacity: 1;
	}
}
@keyframes showFlare {
	0%, 10% {
		opacity: 0;
	}
	50%, 100% {
		opacity: 1;
	}
}
@keyframes pointmoveY {
	0% {
		transform: translateY(110px);
	}
	100% {
		transform: translateY(0px);
	}
}

.tabUl::-webkit-scrollbar {
	display: none;
  }