@charset "UTF-8";

/*//////////////////////////////////////////////////////////////
	layout
//////////////////////////////////////////////////////////////*/

/*=======================================================
	body
=======================================================*/
body {}


@keyframes slide-left {
	0% {
		transform: translateX(-30%);
	}

	100% {
		transform: translateX(-25%);
	}
}

@keyframes slide-right {
	0% {
		transform: translateX(25%);
	}

	100% {
		transform: translateX(30%);
	}
}

@media screen and (max-width: 979px) {
	.bg_btm {
		background-image: linear-gradient(-60deg, #000 40%, transparent 40%);
	}
}

/*=======================================================
	container
=======================================================*/

#container {
	position: relative;
	overflow-x: hidden;
  	width: 100%;
}

.KV{
	position: relative;
    background-image: url(../img/KV_bg.jpg);
    background-position: 50% 0; /* 横50%、縦0 */
    background-repeat: no-repeat;
    background-size: auto;
}

/* btn_sns_area */
#btn_sns_area {
	position: absolute;
	right: 150px;
	top: 10px;
	z-index: 10;
}

/* fb_btn_area */
#fb_btn_area {
	text-align: right;
	float: right;
	margin-right: 10px;
}

#fb_btn_area span {
	vertical-align: top !important;
}

/* tw_btn_area */
#tw_btn_area {
	text-align: right;
	float: right;
}

/* gnavi_area */
#gnavi_area {
	top: 0;
}

/* 本来の形（中間コンテンツがある時）の、下部セクション */
.next-section {
    position: relative;
}

/* 初回のみ（中間コンテンツが消えて、隙間が空く時） */
.is-first-time .next-section {
	/* 上から下へ向かうグラデーション（上半分青、下半分白でパキッと分割） */
    background-image: linear-gradient(to bottom, #2758a0 0%, #2758a0 50%, #ffffff 50%, #ffffff 100%);
}

/*=======================================================
	common
=======================================================*/
section {
	width: 1199px;
	margin: 0 auto;
}

.youtube_area {
	margin-bottom: 20px;
}

.youtube_area iframe {
	border-radius: 5px;
}

.btn {
	margin-top: 20px;
}

.btn a {
	display: inline-block;
	background: #EE7701;
	color: #FFF;
	padding: 15px 10%;
	text-decoration: none;
	font-weight: bold;
}

.btn.promo a {
	background: #faf671;
	color: #000;
	margin-bottom: 80px;
}

/*=======================================================
	logo_area
=======================================================*/
#logo_area,
#logo_s_area {
	padding-top: 120px;
	margin-bottom: 80px;
	position: relative;/* 背景に円形の黒いグラデーションを敷く（中心が一番濃く、外に向かって消える） */
    
    /* 調整用：ロゴのサイズに合わせて内側に少し余裕を持たせる */
    padding: 120px 20px 20px; 
    display: inline-block;
}

#logo_area .hero{
	width: 1280px;
}

/* クラスがつく前もついた後も、絶対に中央から動かさないための指定 */
#logo_area .hero h1,
#logo_area .hero h1.fadeInDown {
    position: absolute !important; /* !importantでお守りを強化 */
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    z-index: 5 !important;
    
    width: 120%; /* ロゴのサイズ感はお好みで調整してください */
    margin: 0 !important; /* 流用元の余白を強制リセット */
    text-align: center;
}

#logo_area h2{	
	color: #FFF;
	}

#logo_area .hero{
	position: relative;
}
#logo_area .hero .grid-container{
	display: flex !important;
    flex-wrap: wrap !important;
	gap: 10px;
}
#logo_area .hero .grid-item{
	background-color: #000000;
}
#logo_area .hero .grid-item img{
	width: 100%;
	height: auto;
	display: block;
	opacity: 0.5; 
}

#logo_date_area {
	padding: 40px 16px 16px;
}

#logo_date_area .first{
	font-size: 376%;
	color: #fff600;
}

#logo_date_area p {
	font-family: "Noto Sans JP", sans-serif;
	font-size: 500%;
	color: #FFF;
	font-weight: bold;
	text-shadow: 0px 0px 10px #DDD;
	line-height: 1em;
	margin-bottom: 10px;
}

#logo_date_area p span{
	font-size: 81.2%;
}

#logo_date_area h5 {
	color: #FFF;
	font-weight: normal;
}



/*=======================================================
	new_area
=======================================================*/
#new_area {
	width: 100%;
    padding: 120px 0; 
    position: relative;
    /* topでの調整ではなく、上の要素との重なりはmargin-topのマイナス値で調整するのが安全です */
    /* margin-top: -80px;  */
    z-index: 10; /* 背景画像の上に確実に重ねるために高めの数値を設定 */
}

#new_area::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
 	background-color: #2758a0;
    transform: skewY(-7deg);
    z-index: -1; /* 親要素の背景として扱うため -1 に変更します */
}

#new_area h2 {
	margin-bottom: 80px;
	color: #FFF;
}

#new_area h3{
	color:#FFF;
	font-size: 137.5%;
	margin-bottom: 10px;
}

#new_area h4{
	color:#FFF;
	font-size: 112.5%;
	margin-bottom: 20px;
}
#new_area .archive-btn{
	font-family: "Noto Sans JP", sans-serif;
	display: flex;
	align-items: center;
	justify-content: center;
	line-height: 1;
	text-decoration: none;
	color: #2758a0;
	font-size: 188%;
	border-radius: 40px;
	width: 500px;
	height: 40px;
	font-weight: bold;
	transition: 0.3s;
	box-shadow: 0px 0px 3px 2px rgba(0, 0, 0, 0.5);
	background-color: #fff;
	text-align: center;
	padding: 20px 40px;
	margin: 50px auto 0;
}

#new_area .archive-btn:hover {
  opacity: .7;
}


/*=======================================================
	about_area
=======================================================*/
#about_area {
	width: 100%;
 	/* paddingで上下の余白（高さ）を確保します */
    padding: 160px 0; 
    position: relative;
    /* topでの調整ではなく、上の要素との重なりはmargin-topのマイナス値で調整するのが安全です */
    /* margin-top: -80px;  */
    z-index: 10; /* 背景画像の上に確実に重ねるために高めの数値を設定 */
}

#about_area::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
 	background-color: #3e9ace;
    transform: skewY(-7deg);
    z-index: -1; /* 親要素の背景として扱うため -1 に変更します */
}

#about_area h2 {
	color: #fff600;
	text-align: center;
/* 文字はabsoluteにせず、自然に真ん中に配置させます */
    position: relative; 
    margin: 0 auto;
    max-width: 1280px; /* 画面幅が広がったときも、文字がはみ出さないようにガード */
    padding: 0 20px;   /* スマホ時の左右の保険余白 */
}


/*=======================================================
	intro_area
=======================================================*/
#intro_area {
    padding: 120px 0; 
}

#intro_area h2 {
	margin-bottom: 80px;
	color: #000;
}

/* --- PCレイアウト（基本形：左画像・右文章） --- */
#intro_area .intro_row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 50px;       /* 画像とテキストの間の隙間 */
    margin-bottom: 80px; /* 段と段の間の隙間 */
}

/* 左右の要素の横幅をそれぞれ50%（gapを考慮して自動計算されます） */
#intro_area .intro_img, .intro_text {
    width: 48%; 
}

#intro_area .intro_img img {
    width: 100%;
    height: auto;
    display: block;
}

#intro_area .intro_text p{
	text-align: left;
	font-size: 188%;
}


/* ★ 1段目と3段目に付与した「reverse」で左右をひっくり返す（これで左文章・右画像になる） */
#intro_area .intro_row.reverse {
    flex-direction: row-reverse;
}

/* --- スマホレイアウト（レスポンシブ：横幅768px以下） --- */
@media screen and (max-width: 768px) {
    .intro_row {
        flex-direction: column; /* 2段目を通常の縦並び（上画像・下文章）に */
        gap: 20px;
        margin-bottom: 50px;
    }
    
    /* ★ 1・3段目のひっくり返しを解除して、通常の縦並び（上画像・下文章）にリセット */
    .intro_row.reverse {
        flex-direction: column; 
    }

    .intro_img, .intro_text {
        width: 100%; /* スマホ時は横幅いっぱいに広げる */
    }
}


/*=======================================================
	YT
=======================================================*/
.YT{
	background-color: #091528 ;
	width: 100%;
    /* 削られる分（12.28vw）を考慮して、多めに上部余白を取る */
    padding: calc(80px + 12.28vw) 0 80px 0; 
    clip-path: polygon(0 12.28vw, 100% 0, 100% 100%, 0 100%);
}

.YT h3,.YT h4{
	color:#FFF;
}

.YT h4{
	margin-bottom: 20px;
}

/*=======================================================
	archive_area
=======================================================*/
#archive_area {
    padding: 100px 0; 
}

#archive_area h2 {
	margin-bottom: 80px;
	color: #FFF;
}

#archive_area ul {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
}

#archive_area ul li {
	width: 45%;
	max-width: 640px;
	margin: 0 2% 70px;
	position: relative;
}

#archive_area ul li a {
	display: block;
	position: relative;
}

#archive_area ul li img {
	display: block;
}

.thumb_youtube {
	margin-bottom: 10px;
}

.thumb_youtube img {
	box-shadow: 2px 2px 5px #DDD;
	border-radius: 5px;
	width: 100%;
}

.icon_play {
	position: absolute;
	top: 0;
	left: 0;
}

.icon_play img {
	width: 100%;
}


/*=======================================================
	sponsor_area
=======================================================*/
#sponsor_area {
	margin-bottom: 0;
}

#sponsor_area ul {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
}

#sponsor_area ul li {
	margin: 0 20px 20px;
}

#sponsor_area ul li:first-child {
	width: 100%;
	margin: 20px 0 ;
}

#sponsor_area ul li img{
	width: 60%;
}

/*=======================================================
	footer
=======================================================*/
#footer {
	width: 100%;
	background: #091528;
}

#footer p {
	text-align: center;
	line-height: 180px;
	margin-bottom: 0;
}

#footer p a {
	text-decoration: none;
	color: #FFF;
}

/*=======================================================
	pagetop_area
=======================================================*/
#pagetop_area {
	position: fixed;
	bottom: 0px;
	right: 0px;
	z-index: 20;
}

#pagetop_area a {
	width: 120px;
	height: 120px;
	display: block;
}

/*=======================================================
	keyframes
=======================================================*/
/* fadeInDown */
.fadeInDown {
	-webkit-animation-fill-mode: both;
	-ms-animation-fill-mode: both;
	animation-fill-mode: both;
	-webkit-animation-duration: 3s;
	-ms-animation-duration: 3s;
	animation-duration: 3s;
	-webkit-animation-name: fadeInDown;
	animation-name: fadeInDown;
	visibility: visible !important;
}

@-webkit-keyframes fadeInDown {
	0% {
		opacity: 0;
		-webkit-transform: translateY(0);
	}

	100% {
		opacity: 1;
		-webkit-transform: translateY(0);
	}
}

@keyframes fadeInDown {
	0% {
		opacity: 0;
		-webkit-transform: translateY(0);
		-ms-transform: translateY(0);
		transform: translateY(0);
	}

	100% {
		opacity: 1;
		-webkit-transform: translateY(0);
		-ms-transform: translateY(0);
		transform: translateY(0);
	}
}

/* fadeInRight */
.fadeInRight {
	-webkit-animation-fill-mode: both;
	-ms-animation-fill-mode: both;
	animation-fill-mode: both;
	-webkit-animation-duration: 3s;
	-ms-animation-duration: 3s;
	animation-duration: 3s;
	-webkit-animation-name: fadeInRight;
	animation-name: fadeInRight;
	visibility: visible !important;
}

@-webkit-keyframes fadeInRight {
	0% {
		opacity: 0;
		-webkit-transform: translateX(-50px) translateY(20px);
	}

	100% {
		opacity: 1;
		-webkit-transform: translateX(0) translateY(0);
	}
}

@keyframes fadeInRight {
	0% {
		opacity: 0;
		-webkit-transform: translateX(-50px) translateY(20px);
		-ms-transform: translateX(-50px) translateY(20px);
		transform: translateX(-50px) translateY(20px);
	}

	100% {
		opacity: 1;
		-webkit-transform: translateX(0) translateY(0);
		-ms-transform: translateX(0) translateY(-50px);
		transform: translateX(0) translateY(0);
	}
}

/* fadeInLeft */
.fadeInLeft {
	-webkit-animation-fill-mode: both;
	-ms-animation-fill-mode: both;
	animation-fill-mode: both;
	-webkit-animation-duration: 3s;
	-ms-animation-duration: 3s;
	animation-duration: 3s;
	-webkit-animation-name: fadeInLeft;
	animation-name: fadeInLeft;
	visibility: visible !important;
}

@-webkit-keyframes fadeInLeft {
	0% {
		opacity: 0;
		-webkit-transform: translateX(0) translateY(20px);
	}

	100% {
		opacity: 1;
		-webkit-transform: translateX(-50px) translateY(0);
	}
}

@keyframes fadeInLeft {
	0% {
		opacity: 0;
		-webkit-transform: translateX(0) translateY(20px);
		-ms-transform: translateX(0) translateY(20px);
		transform: translateX(0) translateY(20px);
	}

	100% {
		opacity: 1;
		-webkit-transform: translateX(-50px) translateY(0);
		-ms-transform: translateX(-50px) translateY(0);
		transform: translateX(-50px) translateY(0);
	}
}

#filter_area {
	margin-bottom: 30px;
	padding: 20px;
	background: rgba(255, 255, 255, 0.05);
	border-radius: 5px;
	border: 1px solid #444;
}

#filter_form .filter_row {
	margin-bottom: 15px;
}

#filter_form .filter_row:last-child {
	margin-bottom: 0;
}

#filter_form p {
	font-weight: bold;
	margin-bottom: 5px;
}

#filter_form label {
	margin-right: 15px;
	cursor: pointer;
	display: inline-block;
	transition: opacity 0.2s;
}

#filter_form label:hover {
	opacity: 0.7;
}

#filter_form input[type="checkbox"] {
	accent-color: #F1A0A8;
}

#filter_year {
	padding: 5px;
	min-width: 100px;
}

#no_result_msg {
	text-align: center;
	padding: 50px;
	width: 100%;
}

/*=======================================================
	scrollAnime
=======================================================*/
.scrollAnime{
	opacity: 0;
	transition: 2s;
}
.scrollAnime.active{
   opacity: 1;
}