@charset "UTF-8";



.content
{
	padding-top: 90px;
}

@media screen and (max-width: 767px)
{
	.content
	{
		padding-top: 15vw;
	}


}


/* ================================================================================
kv
================================================================================ */
#kv{
	position: relative;
}

#kv .sectionInner
{
	height: 500px;
	width: 84vw;
	margin: 0 auto;
	padding: 70px  0 0 5vw;
}


#kv .box
{
	padding: 40px 25px 50px;
	width: 32vw;
	background: linear-gradient( 90deg,
		rgba(3,71,153,1) 0%,
		rgba(89,213,237,1) 100%
	);
	color: white;
}

#kv .text1
{
font-size: 14px;
font-weight: bold;
margin-bottom: 10px;
}

#kv h2
{
font-size: 18px;
font-weight: bold;
line-height: 1.6;
margin-bottom: 50px;
}

#kv h1
{
font-size: 30px;
font-weight: bold;
line-height: 1.6;
margin-bottom: 30px;
}

#kv .text2
{
font-size: 16px;
line-height: 2;
font-weight: bold;
}

#kv .text2 span
{
font-size: 22px;
}

#kv ul
{
	position: absolute;
	top:20px;	left: 80px;

	display: flex;	flex-wrap: wrap;
}

#kv li
{
	margin: 0 10px 0 0;
	color: black;
	font-size: 12px;
}
#kv li a
{
	border-bottom: 1px solid black;
}

#kv li:not(:last-child)::after
{
	content: "＞";
	display: inline;
	margin: 0 0 0 10px;
}

#kv .bg
{
	z-index: -1;
	position: absolute;
	top: 0;
	right: 0;
	width: 70vw;
	height: 100%;
}


#kv .background
{
	width: 100%;
height: 100%;
	background: url("../../image/intro_hanbai/intro_kv_PC.jpg") center center/cover;
}
/* ========================================
1180-768
======================================== */
@media screen and (min-width: 768px) and (max-width: 1180px)
{


}

/* ========================================
-767
======================================== */
/* ========================================
-767
======================================== */
@media screen and (max-width: 767px)
{

	#kv{}
	#kv .sectionInner
	{
		position: relative;
		width: 100vw;
height: 132vw;
		display: block;
		padding: 5vw;


	}


	#kv .box
	{
		padding: 5vw 4vw;
		margin: 0 auto;
		width: 80vw;
		background: linear-gradient( 90deg,
			rgba(3,71,153,1) 0%,
			rgba(89,213,237,1) 100%
		);
		color: white;
	}


	#kv .bg
	{
		z-index: -1;
		position: absolute;
		top: 20vw;
		right: 0;
		left: 0;
		width: 100%;
		height: 70vw;
	}

	#kv .background
	{

		width: 100vw;	height: 70vw;
		background: url("../../image/intro_hanbai/intro_kv.jpg") bottom center/cover;

	}

	#kv .text1
	{
	font-size: 3.9vw;
	font-weight: bold;
	margin-bottom: 2vw;
	}

	#kv h2
	{
	font-size: 4.2vw;
	font-weight: bold;
	line-height: 1.6;
	margin-bottom: 73vw;
	}

	#kv h1
	{
	font-size: 6vw;
	font-weight: bold;
	line-height: 1.6;
	margin-bottom: 3vw;
	}

	#kv .text2
	{
	font-size: 4.1vw;
	line-height: 2;
	font-weight: bold;
	}

	#kv .text2 span
	{
	font-size: 4.6vw;
	}
}


/* ================================================================================
episode
================================================================================ */
#episode
{

}

#episode .sectionInner
{
width: 84vw;
margin: 0 auto;
padding: 30px 0 0;
}

#episode h2
{
	font-size: 32px;
	line-height: 1.5;
	font-weight: bold;
}

#episode .QA
{
	padding-top: 90px;
}

	#episode .textQ
{
	font-size: 20px;
	font-weight: bold;
	color: #004097;
	margin-bottom: 60px;
}

#episode .textQ span
{
	font-size: 26px;
	color: white;
	padding: 8px 17px 10px 17px;
	margin:0 20px 0px 0;
	background: linear-gradient( 90deg,
		rgba(3,71,153,1) 0%,
		rgba(89,213,237,1) 100%
	);
}


#episode .textA
{
	font-size: 20px;
	font-weight: bold;
	color: #4acf54;
	margin-bottom: 60px;
}

#episode .textA span
{
	font-size: 26px;
	color: white;
	padding: 8px 17px 10px 17px;
	margin:0 20px 0px 0;
	background: linear-gradient(90deg,
	rgba(75, 207, 84, 1.0) 0%,
	rgba(101, 234, 254, 1.0) 100%
	);
}

#episode .text1
{
	font-size: 15px;
	line-height: 1.8;
	margin-bottom: 145px;
}
/* ========================================
1180-768
======================================== */
@media screen and (min-width: 768px) and (max-width: 1180px)
{


}

/* ========================================
-767
======================================== */
@media screen and (max-width: 767px)
{
	#episode
	{

	}

	#episode .sectionInner
	{
	width: 90vw;
	margin: 0 auto;
	padding: 10vw 0 0;
	}

	#episode h2
	{
		font-size: 4.7vw;
		line-height: 1.5;
		font-weight: bold;
	}

	#episode .QA
	{
		padding-top: 10vw;
	}

		#episode .textQ
	{
		font-size: 4.2vw;
		font-weight: bold;
		color: #004097;
		margin-bottom: 10vw;
	}

	#episode .textQ span
	{
		font-size: 5vw;
		color: white;
		padding: 2vw 3vw 2vw 3vw;
		margin:0 4vw 0px 0;
		background: linear-gradient( 90deg,
			rgba(3,71,153,1) 0%,
			rgba(89,213,237,1) 100%
		);
	}


	#episode .textA
	{
		font-size: 4.2vw;
		line-height: 1.5;
		font-weight: bold;
		color: #4acf54;
		margin-left: 14vw;
		text-indent: -14vw;
		margin-bottom: 5vw;
	}

	#episode .textA span
	{
		font-size: 5vw;
		color: white;
		padding: 2vw 3vw 2vw 3vw;
		margin:0 4vw 0px 0;
		background: linear-gradient(90deg,
		rgba(75, 207, 84, 1.0) 0%,
		rgba(101, 234, 254, 1.0) 100%
		);
	}

	#episode .text1
	{
		font-size: 4vw;
		line-height: 2;
		margin-bottom: 10vw;
	}

}



#bar
{

}

#bar .sectionInner
{
width: 100vw;
display:flex;
}

#bar .img
{
	width: 50vw;
}


/* ========================================
1180-768
======================================== */
@media screen and (min-width: 768px) and (max-width: 1180px)
{


}

/* ========================================
-767
======================================== */
@media screen and (max-width: 767px)
{
	#bar
	{

	}

	#bar .sectionInner
	{
	width: 100vw;
	display:block;
	}

	#bar .img
	{
		width: 100vw;
	}


}





/* ================================================================================
day
================================================================================ */
#day

{
background-color: #0ab6f3
}

#day .sectionInner
{
width: 84vw;
margin: 0 auto;
padding: 50px 0 50px;
color: white;
}

#day .title
{
	display: flex;
}

#day .dimg
{
	width: 79px;
	margin-right: 40px;
}


#day h2
{
	padding: 20px 0 0;
	font-size: 14px;
	margin-bottom: 30px;
}

#day h2 span
{
	font-size: 32px;
	font-weight: bold;
	margin-right: 20px;
}


#day ul
{
padding-left: 130px;
}


#day li
{
display: flex;
margin-bottom: 30px;
}

#day .time
{
width: 120px;
font-size: 22px;
font-weight: bold;
margin-right: 0px;
}

#day .schedule
{
width: calc(100% - 120px);
font-size: 15px;
line-height: 1.5;
}

/* ========================================
1180-768
======================================== */
@media screen and (min-width: 768px) and (max-width: 1180px)
{


}

/* ========================================
-767
======================================== */
@media screen and (max-width: 767px)
{

	#day

	{
	}

	#day .sectionInner
	{
	width: 90vw;
	margin: 0 auto;
	padding: 10vw 0 10vw;
	color: white;
	}

	#day .title
	{
		display: block;
	}

	#day .dimg
	{
		width: 15vw;
		margin-right: 0px;
		margin-bottom: 5vw;
	}


	#day h2
	{
		padding: 0px 0 0;
		font-size: 3.9vw;
		margin-bottom: 8vw;
	}

	#day h2 span
	{
		font-size: 7vw;
		font-weight: bold;
		margin-right: 3vw;
	}


	#day ul
	{
	padding-left: 0px;
	}


	#day li
	{
	display: flex;
	margin-bottom: 5vw;
	}

	#day .time
	{
	width: 15vw;
	font-size: 6vw;
	font-weight: bold;
	margin-right: 10vw;
	}

	#day .schedule
	{
		width: 85vw;
	font-size: 4vw;
	}


}

/* ================================================================================
step
================================================================================ */
#step

{
background-color: #4acf54
}

#step .sectionInner
{
width: 84vw;
margin: 0 auto;
padding: 50px 0 50px;
color: white;
}

#step .title
{
	display: flex;
}

#step .simg
{
	width: 79px;
	margin-right: 40px;
}


#step h2
{
	padding: 20px 0 0;
	font-size: 14px;
	margin-bottom: 30px;
}

#step h2 span
{
	font-size: 32px;
	font-weight: bold;
	margin-right: 20px;
}


#step ul
{
padding-left: 113px;
}


#step li
{
display: flex;
}

#step .year
{
width: 120px;
font-size: 20px;
line-height: 2;
font-weight: bold;
text-align: center;
margin-right: 20px;
}

#step .year span
{
font-size: 15px;
}

#step .schedule
{
width: calc(100% - 120px);
font-size: 15px;
line-height: 44px;
}

#step .year span
{
font-size: 15px;
}

/* ========================================
1180-768
======================================== */
@media screen and (min-width: 768px) and (max-width: 1180px)
{


}

/* ========================================
-767
======================================== */
@media screen and (max-width: 767px)
{

	#step

	{
	background-color: #4acf54
	}

	#step .sectionInner
	{
	width: 90vw;
	margin: 0 auto;
	padding: 10vw 0 10vw;
	color: white;
	}

	#step .title
	{
		display: block;
	}

	#step .simg
	{
		width: 15vw;
		margin-right: 0px;
		margin-bottom: 5vw;
	}


	#step h2
	{
		padding: 0px 0 0;
		font-size: 3.9vw;
		margin-bottom: 8vw;
	}

	#step h2 span
	{
		font-size: 7vw;
		font-weight: bold;
		margin-right: 3vw;
	}


	#step ul
	{
	padding-left: 0px;
	}


	#step li
	{
	display: flex;
	}

	#step .year
	{
		width: 25vw;
		font-size: 5vw;
		font-weight: bold;
		margin-right: 5vw;
	}

	#step .year span
	{
	font-size: 4vw;
	}

	#step .schedule
	{
		width:  75vw;
		font-size: 4vw;
		line-height: 1.5;

	}

	#step .year span
	{
		font-size: 4vw;

	}

}

/* ================================================================================
off
================================================================================ */
#off

{
}

#off .sectionInner
{
width: 84vw;
margin: 0 auto;
padding: 130px 0 130px;
display: flex;

}

#off .img
{
	width: 40vw;
	margin-right: 4vw;
}

#off .box
{
	width: 40vw;
}

#off h2
{
	font-size: 43px;
	font-style: italic;
	color: #0ab6f3;
	margin-bottom: 20px;
}


#off hr
{
width: 90px;
margin: 0 0 20px;
height: 4px;
border: none;
background: linear-gradient(90deg,
	rgba(0, 64, 151, 1.0) 0%,
	rgba(97, 232, 254, 1.0) 100%
);
}

#off .box p
{
font-size: 15px;
line-height: 2;
color: #0ab6f3;

}

/* ========================================
1180-768
======================================== */
@media screen and (min-width: 768px) and (max-width: 1180px)
{


}

/* ========================================
-767
======================================== */
@media screen and (max-width: 767px)
{

	#off

	{
	}

	#off .sectionInner
	{
	width: 90vw;
	margin: 0 auto;
		padding: 10vw 0 10vw;
	display: block;

	}

	#off .img
	{
		width: 90vw;
		margin-right: 0vw;
		margin-bottom: 10vw;
	}

	#off .box
	{
		width: 90vw;
	}

	#off h2
	{
		font-size: 9vw;
		color: #0ab6f3;
		margin-bottom: 5vw;
	}


	#off hr
	{
	width: 25vw;
	margin: 0 0 10vw;
	height: 4px;
	border: none;
	background: linear-gradient(90deg,
		rgba(0, 64, 151, 1.0) 0%,
		rgba(97, 232, 254, 1.0) 100%
	);
	}

	#off .box p
	{
	font-size: 4vw;
	line-height: 2;
	color: #0ab6f3;

	}

}


/* ================================================================================
member
================================================================================ */
#member{	overflow: hidden;	}
#member .sectionInner
{
	padding: 4rem 0 5rem;
	background: linear-gradient(90deg,
		rgba(75, 207, 84, 1.0) 0%,
		rgba(101, 234, 254, 1.0) 100%
	);
}

#member h2
{
	margin: 0 0 2rem;

	color: white;
	font-size: 18px;
	font-weight: bold;
	text-align: center;
}

#member .member
{
	position: relative;
	overflow: hidden;

	display: block;
	width: 430px;	height: 490px;
}
#member .member a::before
{
	content: "";

	z-index: 6;
	position: absolute;
	bottom: 0;	left: 0;

	display: block;
	width: 100%;	height: 50%;

	background: linear-gradient(180deg,
		rgba(0, 0, 0, 0) 0%,
		rgba(0, 0, 0, 0.6) 100%
	);
}

#member .member .thumb
{
	z-index: 5;
	position: absolute;
	top: 0;	left: 0;
	width: 100%;
}

#member .member .num
{
	z-index: 10;
	position: absolute;
	top: 340px;	left: 30px;

	color: white;
	font-size: 14px;
	font-weight: bold;
}
#member .member .message
{
	z-index: 10;
	position: absolute;
	top: 370px;	left: 30px;

	color: white;
	font-size: 20px;
	line-height: 1.5;
}
#member .member .readmore
{
	z-index: 10;
	position: absolute;
	bottom: 30px;	right: 30px;
}

#member .member .thumb img{	transition: transform 1.0s;	}
/* #member .member .MH .thumb img{	animation: fadeZoomUp 0.3s cubic-bezier(0.6, 0, 0, 0.6) 0.0s both;	} */
/* #member .member .MO .thumb img{	animation: fadeZoomDown 0.3s cubic-bezier(0.6, 0, 0, 0.6) 0.0s both;	} */
#member .member .MH .thumb img{	transform: scale(1.10);	}
#member .member .MO .thumb img{	transform: scale(1.00);	}

#member .members .swiper-button-next
{
	top: 40%;	right: 0;
	background-color: white;
	width: 100px;	height: 100px;

	outline: none;
	transition: opacity 0.5s;
}
#member .members .swiper-button-next::after
{
	content: "";
	width: 60%;	height: 60%;
	background: url("../../image/common/readmore_rmg_arrow.png") no-repeat center center/contain;
}
#member .members .swiper-button-next:hover{	opacity: 0.7	}

#member .members .swiper-button-prev
{
	top: 40%;	left: 0;
	background-color: white;
	width: 100px;	height: 100px;

	outline: none;
	transition: opacity 0.5s;
}
#member .members .swiper-button-prev::after
{
	content: "";
	width: 60%;	height: 60%;
	background: url("../../image/common/readmore_rmg_arrow.png") no-repeat center center/contain;
	transform: rotate(180deg);
}

#member .members .swiper-button-prev:hover{	opacity: 0.7	}


/* ========================================
-430 x 5 = 2150
======================================== */
@media screen and (min-width: 2150px)
{

#member .members
{
	width: 2150px;
	margin: 0 auto;
}

}

/* ========================================
-767
======================================== */
@media screen and (max-width: 767px)
{

#member .sectionInner{	padding: 10vw 0 15vw;	}
#member h2{	font-size: 4vw;	}
#member .member{	width: 60vw;	height: calc(60vw/430*490);	}
#member .member .num
{
	top: 45vw;	left: 5vw;
	font-size: 2.8vw;
}
#member .member .message
{
	top: 50vw;	left: 5vw;
	font-size: 3.2vw;
}
#member .member .readmore
{
	bottom: 4vw;	right: 5vw;
}

#member .member .thumb img{	transition: unset;	}
#member .member .MH .thumb img{	transform: unset;	}
#member .member .MO .thumb img{	transform: unset;	}

#member .members .swiper-button-next,
#member .members .swiper-button-prev
{
	width: 15vw;	height: 15vw;
	transition: unset;
}
#member .members .swiper-button-next:hover,
#member .members .swiper-button-prev:hover
{	opacity: 1;	}

}




















































































































































































/* ======================================== end ======================================== */