@charset "utf-8";
/* CSS Document */

/*pc*/
@media screen and (min-width: 1367px) {
	.movie_sp1366 {display:none!important;}
}
@media screen and (min-width: 1281px) {
	.movie_sp1280 {display:none!important;}
}
@media screen and (min-width: 1195px) {
	.movie_sp1194 {display:none!important;}
}
@media screen and (min-width: 1113px) {
	.movie_sp1112 {display:none!important;}
}
@media screen and (min-width: 1025px) {
	.movie_sp1024 {display:none!important;}
}
@media screen and (min-width: 1001px) {
	.movie_sp1000 {display:none!important;}
}
@media screen and (min-width: 897px) {
	.movie_sp896 {display:none!important;}
}
@media screen and (min-width: 769px) {
	.movie_sp {display:none!important;}
}
@media screen and (min-width: 641px) {
	.movie_sp640 {display:none!important;}
}
@media screen and (min-width: 481px) {
	.movie_sp480 {display:none!important;}
}

/*sp*/
@media screen and (max-width: 1366px) {
	.movie_pc1366 {display:none!important;}
}
@media screen and (max-width: 1194px) {
	.movie_pc1194 {display:none!important;}
}
@media screen and (max-width: 1024px) {
	.movie_pc1024 {display:none!important;}
}
@media screen and (max-width: 1000px) {
	.movie_pc1000 {display:none!important;}
}
@media screen and (max-width: 896px) {
	.movie_pc896 {display:none!important;}
}
@media screen and (max-width: 768px) {
	.movie_pc {display:none!important;}
}
@media screen and (max-width: 640px) {
	.movie_pc640 {display:none!important;}
}
@media screen and (max-width: 480px) {
	.movie_pc480 {display:none!important;}
}


/* ==============================================

	secMovie

================================================= */
#secMovie {
	letter-spacing: 0.025em;
	line-height: 1.2;
	color: #252525;
	font-weight: 500;
	word-break: break-word;
}
.movie_img {
	max-width: 100%;
	height: auto;
	width: auto;
}
#secMovie a {
	text-decoration: none;
}
#secMovie iframe {
	aspect-ratio: 16 / 9;
	width: 100%;
	height: auto;
	border-radius: 30px;
	display: block;
}
@media screen and (max-width: 768px) {
	#secMovie {
		margin-bottom: 140px;
	}
}
@media screen and (max-width: 480px) {
	#secMovie {
		margin-bottom: 80px;
	}
}


/* ==============================================

	movie_h2_ttl

================================================= */
.movie_h2_ttl {
	text-align: center;
	display: flex;
	flex-flow: column;
	gap: 15px;
}
.movie_h2_ttl p {
	font-size: 60px;
	font-weight: bold;
	color: #ed6d20;
	display: inline-block;
	line-height: 100%;
	letter-spacing: 0.15em;
}
.movie_h2_ttl h2 {
	font-size: 20px;
	font-weight: bold;
	word-break: keep-all;
	color: #9b9b9b;
	letter-spacing: 0.1em;
}

.movie_h2_ttl.movie_h2_ttl_s {
	gap: 4px;
}
.movie_h2_ttl.movie_h2_ttl_s p {
	font-size: 30px;
}
.movie_h2_ttl.movie_h2_ttl_s h2 {
	font-size: 16px;
}

@media screen and (max-width: 768px) {
	.movie_h2_ttl {
		gap: 10px;
	}
	.movie_h2_ttl p {
		font-size: 54px;
	}
	.movie_h2_ttl h2 {
		font-size: 18px;
	}
}
@media screen and (max-width: 480px) {
	.movie_h2_ttl p {
		font-size: 40px;
	}
	.movie_h2_ttl h2 {
		font-size: 16px;
	}
	.movie_h2_ttl.movie_h2_ttl_s {
		gap: 2px;
	}
	.movie_h2_ttl.movie_h2_ttl_s p {
		font-size: 22px;
	}
	.movie_h2_ttl.movie_h2_ttl_s h2 {
		font-size: 13px;
	}
}


/* ==============================================

	movie_mv

================================================= */
.movie_mv {
	height: 750px;
	display: flex;
	margin: 0 125px 80px 0;
	position: relative;
}
.movie_mv_txt {
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	margin: auto;
	z-index: 5;
	display: flex;
	align-items: center;
	justify-content: center;
}

/* 複数画像切り替え---------------------------------------------- */
.movie_mv_img {
	position: relative;
	max-width: 930px;
	width: 52.4%;
	height: 750px;
	overflow: hidden;
}

/* 全スライドの共通設定 */
.movie_mv_slide {
	position: absolute;
	inset: 0;
	opacity: 0;
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
}

/* アニメーション指定 */
.movie_mv_slide_left {
	animation: slideAnime_left 12s infinite; /* 2枚目以降用 */
}
.movie_mv_slide_right {
	animation: slideAnime_right 12s infinite;
}

/* 【追加】左側1本目の1枚目専用キーフレーム */
@keyframes slideAnime_right_first {
	0%, 33.33% { opacity: 1; } /* 開始（0%）から表示終了（33.33%）までずっと不透明度1 */
	50%, 100% { opacity: 0; }
}

/* キーフレーム（通常用） */
@keyframes slideAnime_left {
	0%, 50%, 100% { opacity: 0; }
	16.6%, 33.33% { opacity: 1; }
}
@keyframes slideAnime_right {
	0%, 50%, 100% { opacity: 0; }
	16.6%, 33.33% { opacity: 1; }
}

/* 左側スライダー（0s, 3s, 6s） */
.movie_mv_slide_left:nth-of-type(1) {
	background-image: url('../images/movie/left_03.jpg');
	animation-delay: -6s;
}
.movie_mv_slide_left:nth-of-type(2) {
	background-image: url('../images/movie/left_01.jpg');
	animation-delay: -2s;
}
.movie_mv_slide_left:nth-of-type(3) {
	background-image: url('../images/movie/left_02.jpg');
	animation-delay: 2s;
}

/* 右側スライダー（4.5秒進んだ状態からスタートさせる） */
.movie_mv_slide_right:nth-of-type(1) {
	background-image: url('../images/movie/right_01.jpg');
	animation: slideAnime_right_first 12s infinite; /* 専用アニメーションに上書き */
	animation-delay: 0s;
}
.movie_mv_slide_right:nth-of-type(2) {
	background-image: url('../images/movie/right_02.jpg');
	animation-delay: 4s;
}
.movie_mv_slide_right:nth-of-type(3) {
	background-image: url('../images/movie/right_03.jpg');
	animation-delay: 8s;
}


@media screen and (max-width: 1600px) {
	.movie_mv, .movie_mv_img {
		height: 480px;
	}
	.movie_img {
		zoom: 0.75;
	}
	.movie_mv_slide_left:nth-of-type(1){
		background: url('../images/movie/left_03_1600.jpg') center no-repeat;
		background-position:50%;
		background-size: cover;
	}
	.movie_mv_slide_left:nth-of-type(2) {
		background: url('../images/movie/left_01_1600.jpg') center no-repeat;
		background-position:50%;
		background-size: cover;
	}
	.movie_mv_slide_left:nth-of-type(3) {
		background: url('../images/movie/left_02_1600.jpg') center no-repeat;
		background-position:50%;
		background-size: cover;
	}
	.movie_mv_slide_right:nth-of-type(1){
		background: url('../images/movie/right_01_1600.jpg') center no-repeat;
		background-position:50%;
		background-size: cover;
	}
	.movie_mv_slide_right:nth-of-type(2) {
		background: url('../images/movie/right_02_1600.jpg') center no-repeat;
		background-position:50%;
		background-size: cover;
	}
	.movie_mv_slide_right:nth-of-type(3) {
		background: url('../images/movie/right_03_1600.jpg') center no-repeat;
		background-position:50%;
		background-size: cover;
	}
}
@media screen and (max-width: 1366px) {
	.movie_mv, .movie_mv_img {
		height: 480px;
	}
	.movie_img {
		zoom: 0.65;
	}
}
@media screen and (max-width: 768px) {
	.movie_mv, .movie_mv_img {
		height: 650px;
	}
	.movie_mv {
		margin: 0 0 80px;
		flex-flow: column;
	}
	.movie_mv_img {
		width: 100%;
	}
	.movie_img {
		width: 60%;
		max-width: 620px;
	}
	.movie_mv_slide_left:nth-of-type(1){
		background: url('../images/movie/left_03_sp.jpg') center no-repeat;
		background-position:50%;
		background-size: cover;
	}
	.movie_mv_slide_left:nth-of-type(2) {
		background: url('../images/movie/left_01_sp.jpg') center no-repeat;
		background-position:50%;
		background-size: cover;
	}
	.movie_mv_slide_left:nth-of-type(3) {
		background: url('../images/movie/left_02_sp.jpg') center no-repeat;
		background-position:50%;
		background-size: cover;
	}
	.movie_mv_slide_right:nth-of-type(1){
		background: url('../images/movie/right_01_sp.jpg') center no-repeat;
		background-position:50%;
		background-size: cover;
	}
	.movie_mv_slide_right:nth-of-type(2) {
		background: url('../images/movie/right_02_sp.jpg') center no-repeat;
		background-position:50%;
		background-size: cover;
	}
	.movie_mv_slide_right:nth-of-type(3) {
		background: url('../images/movie/right_03_sp.jpg') center no-repeat;
		background-position:50%;
		background-size: cover;
	}
}
@media screen and (max-width: 640px) {
	.movie_img {
		width: 70%;
	}
}
@media screen and (max-width: 480px) {
	.movie_mv {
		/*
		height: calc(100vh - 85px);
		*/
		height: 430px;
		margin-bottom: 40px;
	}
	.movie_mv_img {
		height: 280px;
	}
	.movie_mv_slide_left:nth-of-type(1){
		background: url('../images/movie/left_03_sp480.jpg') center no-repeat;
		background-position:50%;
		background-size: cover;
	}
	.movie_mv_slide_left:nth-of-type(2) {
		background: url('../images/movie/left_01_sp480.jpg') center no-repeat;
		background-position:50%;
		background-size: cover;
	}
	.movie_mv_slide_left:nth-of-type(3) {
		background: url('../images/movie/left_02_sp480.jpg') center no-repeat;
		background-position:50%;
		background-size: cover;
	}
	.movie_mv_slide_right:nth-of-type(1){
		background: url('../images/movie/right_01_sp480.jpg') center no-repeat;
		background-position:50%;
		background-size: cover;
	}
	.movie_mv_slide_right:nth-of-type(2) {
		background: url('../images/movie/right_02_sp480.jpg') center no-repeat;
		background-position:50%;
		background-size: cover;
	}
	.movie_mv_slide_right:nth-of-type(3) {
		background: url('../images/movie/right_03_sp480.jpg') center no-repeat;
		background-position:50%;
		background-size: cover;
	}
}



/* ==============================================

	secMovie_cat

================================================= */
#secMovie_cat {
	max-width: 1200px;
	margin: 0 auto;
	background: #f0f0f0;
	padding: 30px 3%;
	border-radius: 25px;
}
#secMovie_cat .movie_h2_ttl_s {
	margin-bottom: 40px;
}
.secMovie_catBtn {
	max-width: 1020px;
	margin: 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 20px 3%;
}
.secMovie_catBtn li {
	flex: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	max-width: 320px;
}
.secMovie_catBtn li a {
	background: #ed6d20;
	color: #fff;
	border-radius: 50vh;
	width: 100%;
	height: 50px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 18px;
	position: relative;
	overflow: hidden;
	z-index: 1;
	border: 2px solid #ed6d20;
}
.secMovie_catBtn li a::before {
	content: "";
	background: url("../images/movie/arrow_under.png") center no-repeat;
	width: 12px;
	height: 15px;
	position: absolute;
	right: 25px;
}
.secMovie_catBtn li a::after {
	background: #fff;
	position: absolute;
	top: 0;
	left: 0;
	content: '';
	width: 100%;
	height: 100%;
	transform: scale(0, 1);
	transform-origin: left top;
	transition: .2s cubic-bezier(0.45, 0, 0.55, 1);
	z-index: -1;
}
.secMovie_catBtn li a:hover {
	color: #ed6d20;
}
.secMovie_catBtn li a:hover::before {
	filter: brightness(0) saturate(100%) invert(50%) sepia(52%) saturate(3044%) hue-rotate(351deg) brightness(98%) contrast(89%);
}
.secMovie_catBtn li a:hover::after {
	transform: scale(1, 1);
}
@media screen and (max-width: 1366px) {
	#secMovie_cat {
		max-width: inherit;
		width: 90%;
	}
}
@media screen and (max-width: 1194px) {
	.secMovie_catBtn {
		gap: 20px 2.5%;
	}
	.secMovie_catBtn li a::before {
		right: 15px;
	}
}
@media screen and (max-width: 768px) {
	.secMovie_catBtn {
		flex-flow: row wrap;
		gap: 18px 2.5%;
	}
	.secMovie_catBtn li {
		width: calc((100% - 2.5%) / 2);
		max-width: inherit;
		flex: inherit;
	}
	.secMovie_catBtn li a {
		font-size: 15px;
	}
	.secMovie_catBtn li a::before {
		right: 10px;
		zoom: 0.8;
	}
}
@media screen and (max-width: 480px) {
	#secMovie_cat .movie_h2_ttl_s {
		margin-bottom: 20px;
	}
	#secMovie_cat {
		padding: 20px 3% 25px;
		border-radius: 15px;
	}
	.secMovie_catBtn {
		gap: 10px 2.5%;
	}
	.secMovie_catBtn li a {
		height: 35px;
		font-size: 12.5px;
	}
	.secMovie_catBtn li a::before {
		right: 5px;
		zoom: 0.7;
	}
}


/* ==============================================

	secMovie_sec

================================================= */
.secMovie_sec {
	padding: 85px 5% 100px;
}
.secMovie_sec .movie_h2_ttl {
	margin-bottom: 60px;
}
@media screen and (max-width: 768px) {
	.secMovie_sec {
		padding: 70px 5% 80px;
	}
}
@media screen and (max-width: 480px) {
	.secMovie_sec {
		padding: 50px 4% 60px;
	}
	.secMovie_sec .movie_h2_ttl {
		margin-bottom: 30px;
	}
}

/* ==============================================

	secMovie_voice

================================================= */
#secMovie_voice {
	padding: 90px 5% 70px;
}
#secMovie_voice .movie_h2_ttl {
	margin-bottom: 60px;
}
.secMovie_voiceList {
	max-width: 1460px;
	margin: 0 auto;
}
.secMovie_voiceList > ul {
	display: flex;
	align-items: flex-end;
	flex-flow: row wrap;
	gap: 30px 2.7%;
}
.secMovie_voiceList > ul > li {
	width: calc((100% - 5.4%) / 3);
	padding: 0 25px 30px;
	border-radius: 30px;
	position: relative;
}


.secMovie_voice_special {
	background: #BAECCA;
	background: linear-gradient(290deg, rgba(186, 236, 202, 1) 0%, rgba(236, 237, 162, 1) 100%);
	margin-bottom: 30px;
}
.secMovie_voice_special > p {
	font-size: 38px;
	font-family: 'Caveat', cursive;
	line-height: 1;
	position: absolute;
	top: -25px;
	left: 30px;
	z-index: 1;
	background: #FF9400;
	background: linear-gradient(259deg, rgba(32, 161, 56, 1) 0%, rgba(28, 102, 186, 1) 25%, rgba(81, 18, 127, 1) 50%, rgba(215, 10, 132, 1) 75%, rgba(255, 148, 0, 1) 100%);
	color: transparent;
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	text-fill-color: transparent;
	display: inline-block;
	padding-right: 10px;
}
.secMovie_voice_special .secMovie_voice_box iframe {
	margin-top: 30px;
}

/*
.secMovie_voice_box {
	display: flex;
	flex-flow: column;
	gap: 15px;
}
*/
.secMovie_voice_box_txt div {
	display: flex;
	align-items: baseline;
	flex-flow: row wrap;
	gap: 10px 15px;
	margin: 15px 0 10px;
}
.secMovie_voice_cat {
	display: flex;
	flex-flow: row wrap;
	gap: 5px;
}
.secMovie_voice_cat li {
	border-radius: 50vh;
	height: 25px;
	padding: 0 18px;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #fff;
}
.secMovie_voice_cat_Golf {
	background: #d75597;
}
.secMovie_voice_cat_Premium {
	background: #4abb47;
}
.secMovie_voice_cat_Soccer {
	background: #3c79d4;
}
.secMovie_voice_cat_Esports {
	background: #8f67cd;
}
.secMovie_voice_box p {
	font-weight: bold;
	font-size: 17px;
}
.secMovie_voice_box h3 {
	font-size: 15px;
	line-height: 146%;
}
@media screen and (max-width: 768px) {
	#secMovie_voice {
		padding: 80px 5% 50px;
	}
	.secMovie_voiceList > ul {
		gap: 30px 5%;
	}
	.secMovie_voiceList > ul > li {
		width: calc((100% - 5%) / 2);
	}
	.secMovie_voice_special > p {
		font-size: 35px;
		top: -20px;
	}
	.secMovie_voice_cat li {
		padding: 0 10px;
		font-size: 13px;
	}
	.secMovie_voice_box p {
		font-size: 15px;
	}
}
@media screen and (max-width: 640px) {
	.secMovie_voiceList > ul > li {
		width: 100%;
	}
	.secMovie_voice_special {
		padding: 30px 25px!important;
	}
	.secMovie_voice_box {
		display: flex;
		align-items: flex-start;
		gap: 5%;
	}
	.secMovie_voice_box_mov,
	#secMovie_voice iframe {
		width: 45%;
		margin-top: 0;
		border-radius: 10px;
	}
	.secMovie_voice_box_mov img {
		border-radius: 10px;
	}
	.secMovie_voice_box_txt {
		flex: 1;
	}
	.secMovie_voice_box_txt div {
		margin: 0 0 8px;
		gap: 8px 5px;
	}
}
@media screen and (max-width: 480px) {
	#secMovie_voice {
		padding: 50px 4% 40px;
	}
	#secMovie_voice .movie_h2_ttl {
		margin-bottom: 30px;
	}
	.secMovie_voiceList > ul {
		gap: 10px 5%;
	}
	.secMovie_voiceList > ul > li {
		padding: 0 12px 20px;
		border-radius: 15px;
	}
	.secMovie_voice_special {
		margin-bottom: 20px;
		padding: 20px 12px 20px!important;
	}
	.secMovie_voice_special > p {
		font-size: 28px;
		left: 15px;
		top: -18px;
	}
	.secMovie_voice_box h3 {
		font-size: 12px;
		line-height: 130%;
		letter-spacing: 0;
	}
	.secMovie_voice_cat li {
		font-size: 11px;
		height: 20px;
	}
	.secMovie_voice_box p {
		font-size: 13px;
	}
	.secMovie_voice_box_txt div {
		gap: 5px;
	}
}


/* ==============================================

	secMovie_cmnList

================================================= */
.secMovie_cmnList {
	max-width: 1560px;
	margin: 0 auto;
	display: flex;
	align-items: flex-end;
	flex-flow: row wrap;
	gap: 40px 3.8%;
}
.secMovie_cmnList section {
	width: calc((100% - 7.6%) / 3);
}
.secMovie_cmnList section > p{
	font-size: 24px;
	font-size: clamp(0.906rem, 0.085rem + 1.28vw, 1.625rem);
	color: #e5e5e5;
	font-weight: bold;
	letter-spacing: 0.15em;
	line-height: 100%;
	text-align: left;
}
.secMovie_cmnList section > div {
	background: #fff;
	padding: 35px 30px 30px;
	border-radius: 30px;
	margin-top: -10px;
	text-align: center;
}
.secMovie_cmnList section > div h3 {
	text-align: center;
	background: #ed6d20;
	min-width: 180px;
	margin: 0 auto 25px;
	color: #fff;
	padding: 8px 20px;
	font-size: 22px;
	letter-spacing: 0.15em;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	word-break: keep-all;
}
.secMovie_cmnList_box p {
	text-align: left;
	font-size: 15px;
	margin-top: 15px;
	line-height: 146%;
}
@media screen and (max-width: 1366px) {
	.secMovie_cmnList section > div h3 {
		font-size: 20px;
	}
}
@media screen and (max-width: 768px) {
	.secMovie_cmnList {
		gap: 40px 5%;
	}
	.secMovie_cmnList section {
		width: calc((100% - 5%) / 2);
	}
	.secMovie_cmnList section > div h3 {
		font-size: 18px;
	}
}
@media screen and (max-width: 640px) {
	.secMovie_cmnList section {
		width: 100%;
	}
	.secMovie_cmnList section > p{
		font-size: 22px;
	}
	.secMovie_cmnList section > div h3 {
		margin-bottom: 20px;
	}
	.secMovie_cmnList_box {
		display: flex;
		align-items: center;
		gap: 5%;
	}
	.secMovie_cmnList_box_mov,
	#secMovie_event iframe {
		width: 45%;
		margin-top: 0;
		border-radius: 10px;
	}
	.secMovie_cmnList_box_mov img {
		border-radius: 10px;
	}
	.secMovie_cmnList_box p {
		flex: 1;
		margin-top: 0;
	}
}
@media screen and (max-width: 480px) {
	.secMovie_cmnList {
		gap: 25px 5%;
	}
	.secMovie_cmnList section > p{
		font-size: 17px;
	}
	.secMovie_cmnList section > div {
		margin-top: -8px;
		padding: 25px 12px 20px;
		border-radius: 20px;
	}
	.secMovie_cmnList section > div h3 {
		word-break: inherit;
		margin-bottom: 15px;
		font-size: 16px;
		padding: 6px 15px;
		/*
		padding: 6px 10px;
		width: 100%;
		*/
	}
	.secMovie_cmnList_box p {
		font-size: 12px;
		line-height: 130%;
	}
}


/* ==============================================

	secMovie_event

================================================= */
#secMovie_event {
	background: #f0f0f0;
}
#secMovie_event iframe {
	border-radius: 20px;
}


/* ==============================================

	secMovie_course

================================================= */
#secMovie_course .secMovie_cmnList section > p{
	color: #ede3da;
}
#secMovie_course .secMovie_cmnList section > div {
	background: #faede2;
}


/* ==============================================

	secMovie_btn

================================================= */
.secMovie_btn {
	max-width: 630px;
	margin: 0 auto;
}
#secMovie_event + .secMovie_btn {
	margin: 140px auto 0;
}
.secMovie_btn a {
	background: linear-gradient(-90deg, rgba(255,112,30,1) 0%, rgba(239,192,17,1) 50%, rgba(255,77,48,1) 100%);
	background: #2A7B9B;
	background: linear-gradient(285deg, rgba(42, 123, 155, 1) 0%, rgba(87, 199, 133, 1) 50%, rgba(237, 221, 83, 1) 100%);
  background-size: 150% 100%;
  border: none;
	color: #fff;
	border-radius: 50vh;
	width: 100%;
	height: 100px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 30px;
	font-weight: bold;
	position: relative;
	letter-spacing: 0.05em;
}
.secMovie_btn a::before {
	content: "";
	background: url("../images/movie/arrow_right.png") center no-repeat;
	width: 14px;
	height: 11px;
	position: absolute;
	right: 25px;
}
.secMovie_btn a:hover {
  background: #57C785;
background: linear-gradient(101deg, rgba(87, 199, 133, 1) 50%, rgba(237, 221, 83, 1) 100%);
}
.secMovie_btn span {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 18px;
}
.secMovie_btn span::before {
	content: "";
	background: url("../images/movie/icon_youtube.png") center no-repeat;
	width: 65px;
	height: 46px;
	background-size: contain;
	display: block;
}
@media screen and (max-width: 768px) {
	.secMovie_btn {
		max-width: inherit;
		width: 90%;
	}
}
@media screen and (max-width: 480px) {
	#secMovie_event + .secMovie_btn {
		margin: 70px auto 0;
	}
	.secMovie_btn a {
		font-size: 20px;
		height: 70px;
		font-weight: 500;
	}
	.secMovie_btn span {
		gap: 15px;
	}
	.secMovie_btn span::before {
		width: 35px;
	}
}


