@charset "UTF-8";

html { font-size: 100%;}
body {
/*  color: #121212;*/
  color: #fff;
  font-size: 0.9rem;
  line-height: 1.7;
background-color:#000;
}
a {  color: #121212;  text-decoration: none;}
img {  max-width: 100%;}
li {  list-style: none;}
.site-title {  line-height: 1px;}
.site-title a {  display: block;}
.sec-title {
  font-size: 2.25rem;
  margin-bottom: 30px;
  text-align: center;
}
/*
フェード表示させる要素に使用するためのクラス
*/
.fadein {
  opacity : 0;
  transform: translateY(20px);
  transition: all 1s;
}

/*-------------------------------------------
header
-------------------------------------------*/
header {
	padding: 10px 4% 10px;
	position: fixed;
	top: 0;
	width: 100%;
	background-color: transparent;
	display: flex;
	align-items: center;
  z-index: 10;
background-color:#000;
}
h1 {
	margin: 0; padding: 0;
	font-size: 20px;
}
h1 img{width:20%;}
a {	
	text-decoration: none;
	color: #fff;
}
nav {
	margin: 0 0 0 auto;
}
ul {
	list-style: none;
	margin: 0;
	display: flex;
}
li {
	margin: 0 0 0 15px;
	font-size: 14px;
}
.main-visual {
	display: flex;
	justify-content: center;
	align-items: center;
	height: 100vh;
	background: url('main_visual.jpg') top center / cover no-repeat;
}
h2 {
	margin: 0;
	font-size: 30px;
	font-weight: normal;
	color: #fff;
}

.sp-nav {
	display: none;
}

@media screen and (max-width: 640px) {
	/*ハンバーガーメニュー*/
	.pc-nav {
		display: none;
	}
	.sp-nav {
		z-index: 1;
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100vh;
		display: block;
		width: 100%;
		background: rgba(0, 0, 0, .8);
		opacity: 0;
		transform: translateY(-100%);
		transition: all .2s ease-in-out;
	}
	#hamburger {
		position: relative;
		display: block;
		width: 30px;
		height: 25px;
		margin: 0 0 0 auto;
	}
	#hamburger span {
		position: absolute;
		top: 50%;
		left: 0;
		display: block;
		width: 100%;
		height: 2px;
		background-color: #fff;
		transform: translateY(-50%);
	}
	#hamburger::before {
		content: '';
		display: block;
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 2px;
		background-color: #fff;
	}
	#hamburger::after {
		content: '';
		display: block;
		position: absolute;
		bottom: 0;
		left: 0;
		width: 50%;
		height: 2px;
		background-color: #fff;
	}
	/*スマホメニュー*/
	.sp-nav ul {
		padding: 0;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		height: 100%;
	}
	.sp-nav li {
		margin: 0;
		padding: 0;
	}
	.sp-nav li span {
		font-size: 15px;
		color: #fff;
	}
	.sp-nav li a, .sp-nav li span {
		display: block;
		padding: 20px 0;
	}
	/*-閉じるアイコンー*/
	.sp-nav .close {
		position: relative;
		padding-left: 20px;
	}
	.sp-nav .close::before {
		content: '';
		position: absolute;
		top: 50%;
		left: 0;
		display: block;
		width: 16px;
		height: 1px;
		background: #fff;
		transform: rotate( 45deg );
	}
	.sp-nav .close::after {
		content: '';
		position: absolute;
		top: 50%;
		left: 0;
		display: block;
		width: 16px;
		height: 1px;
		background: #fff;
		transform: rotate( -45deg );
	}
	.toggle {
		transform: translateY( 0 );
		opacity: 1;
	}
	.main-visual {
		padding: 0 4%;
	}
	h2 {
		line-height: 1.6;
		text-align: center;
	}
}

/*-------------------------------------------
Main
-------------------------------------------*/
#main {
  padding-top: 4%;

}

/*-------------------------------------------
Video
-------------------------------------------*/
#bg-video {
  width: 100%;
  max-height: 960px;
  object-fit: cover;
}

/*-------------------------------------------
Video
-------------------------------------------*/
#bg-topImg {
margin-top:4%;
  width: 100%;
  max-height: 960px;
}
#bg-topImg img{
    width: 100%;/*各スライダー全体の横幅を画面の高さいっぱい（100%）にする*/
  object-fit: cover;
}

/*===========================================
  スライダーの為のCSS
 ==========================================*/
.slider {
   position:relative;
  z-index: 1;
  /*↑z-indexの値をh1のz-indexの値よりも小さくして背景に回す*/
  height: 100vh;/*スライダー全体の縦幅を画面の高さいっぱい（100vh）にする*/
}

.slider-top,
.slider-bottom {
    height: 50vh;/*スライダー上下の縦幅を画面の高さの半分（50vh）にする*/
}

/*　背景画像設定　*/

.slider-item01 { background:url(img/);}


.slider-item {
    width: 100%;/*各スライダー全体の横幅を画面の高さいっぱい（100%）にする*/
    height:50vh;/*各スライダーの縦幅を画面の高さの半分（50vh）にする*/
    background-repeat: no-repeat;/*背景画像をリピートしない*/
    background-position: center;/*背景画像の位置を中央に*/
    background-size: cover;/*背景画像が.slider-item全体を覆い表示*/
}





/*-------------------------------------------
Pickup
-------------------------------------------*/
#game_name {
  width: 100%;
  padding: 50px 0 80px 0;
}
#game_name .slick-area {
  font-size: 0;
}
#game_name .slick-area li {
  padding: 0 30px;
}

/*-------------------------------------------
Feature
-------------------------------------------*/
#feature {
  max-width: 1240px;
  padding: 50px 16px 50px 16px;
  margin: -50px auto 10px auto;
}
#feature .grid {
  display: grid;
  gap: 26px;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}

#feature .grid .item {
  display: flex;
  flex-direction: column;
  height: 100%; /* 高さを揃えるために必要なら指定 */
  transition: all 0.3s ease;
  box-shadow: 0 0 8px 4px #ccc;
 /*  padding: 0 30px 30px 30px; 内側の余白を統一 */
}
#feature .grid img {
  vertical-align: top;
}
#feature .grid .item-cat {
  font-size: 1.2rem;
  margin-bottom: 20px;
}

#feature .grid .item-cat .team {
  font-size: 0.7rem;
  margin-bottom: 20px;
}

#feature .grid .item-text {
  font-weight: bold;
  margin-bottom: 20px;
padding: 0 30px 30px 30px;
}

#feature .grid .item-date {
  margin-top: auto; /* これがポイント！ */
  font-size: 0.75rem;
  text-align: right;
padding: 0 30px 30px 30px;
}

/*-------------------------------------------
BG カラー
-------------------------------------------*/
.enrou{ padding:5px; background-image: linear-gradient(315deg, rgba(136, 136, 136, 1) 50%, rgba(0, 0, 0, 1) 50%);}
.enrou a:hover img{background-color: rgba(136, 136, 136, 0.3)}
.enrou-name{background-color: rgba(136, 136, 136, 0.8); text-align:center;
  border-top: solid 1px #fff;
  border-bottom: solid 1px #fff;
}

.garaku{ padding:5px; background-image: linear-gradient(315deg, rgba(171,163,0,1) 50%, rgba(0, 0, 0, 1) 50%); }
.garaku a:hover img{background-color: rgba(171,163,0, 0.3)}
.garaku-name{background-color: rgba(171,163,0, 0.8); text-align:center;
  border-top: solid 1px #fff;
  border-bottom: solid 1px #fff;
}

.ibukuro { padding:5px; background-image: linear-gradient(315deg, rgba(53, 141, 71, 1) 50%, rgba(0, 0, 0, 1) 50%);}
.ibukuro a:hover img{background-color: rgba(53, 141, 71, 0.3)}
.ibukuro-name{background-color: rgba(53, 141, 71, 0.8); text-align:center;
  border-top: solid 1px #fff;
  border-bottom: solid 1px #fff;
}

.akagi { padding:5px; background-image: linear-gradient(315deg, rgba(162, 6, 6, 1) 50%, rgba(0, 0, 0, 1) 50%);}
.akagi a:hover img{background-color: rgba(0, 117, 219, 0.3)}
.akagi-name{background-color: rgba(162, 6, 6, 0.8); text-align:center;
  border-top: solid 1px #fff;
  border-bottom: solid 1px #fff;
}

.staff { padding:5px; background-image: linear-gradient(315deg, rgba(95, 28, 138, 1) 50%, rgba(0, 0, 0, 1) 50%);}
.staff-name{background-color: rgba(95, 28, 138, 0.8); text-align:center;
  border-top: solid 1px #fff;
  border-bottom: solid 1px #fff;
}

.sns-hiehgt{padding:0 0.5rem 0 0.5rem;margin-left:0.5rem;height:1rem;}

.game-name{background-color: rgba(255,105,0, 0.8); text-align:center;
  border-top: solid 1px #fff;
  border-bottom: solid 1px #fff;
}

/*-------------------------------------------
Contact
-------------------------------------------*/
#contact {
  color: #fff;
  background-color: #121212;
  padding: 50px 0;
}
#contact .sec-title {
  color: #fff;
}
#contact .content {
  max-width: 1240px;
  padding: 0 16px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
}
#contact .contact-info p {
  margin-bottom: 30px;
}
#contact .contact-info,
#contact .contact-sraff {
  width: 45%;
}

#contact .sraff{
  max-width: 1240px;
  padding: 0 16px;
  margin: 0 auto;
}

/*-------------------------------------------
テーブル
-------------------------------------------*/

.out-table{width: 100%; border-collapse:separate; border-spacing: 5px;}
.out-table th,
.out-table td{ border-radius: 5px;  text-align: center;  padding: 10px 0;}
.out-table th{ width:20%;  background-color: #c79852;  border:solid 1px #927141;}
.out-table td{ color:#121212; font-weight:bold; background-color: #e4d4bc; border:solid 1px #af9d85;}

.in-table{width: 100%; border-collapse:separate; border-spacing: 5px;}
.in-table th,
.in-table td{ text-align: left; padding: 5px;}
.in-table th{ background-color: #e6c78a;  border:solid 1px #000;}


/*-------------------------------------------
フッター
-------------------------------------------*/
#footer {
  color: #fff;
  background-color: #121212;
  text-align: center;
  padding: 10px;
  font-size: 0.75rem;
}

/*-------------------------------------------
SP
-------------------------------------------*/
@media screen and (max-width: 900px) {
  .sec-title {
    font-size: 1.5rem;
    margin-bottom: 20px;
  }

  /*-------------------------------------------
  ヘッダー
  -------------------------------------------*/
  #header {
    padding: 20px 16px;
  }
  .toggle_btn {
    right: 20px;
  }

  /*-------------------------------------------
  Video
  -------------------------------------------*/
  /*
  「height: 100vh;」で画面の高さにあわせる
  「object-fit: cover;」で中央でトリミング
  */
  #bg-video {
    width: 100%;
    height: 100vh;
    object-fit: cover;
  }

  /*-------------------------------------------
  Pickup
  -------------------------------------------*/
  #pickup {
    padding: 80px 0;
  }
  #pickup .slick-area li {
    padding: 0 20px;
  }

  /*-------------------------------------------
  Feature
  #feature {
    padding: 80px 16px;
  }
  #feature .grid .item-content {
    padding: 16px;
  }
  -------------------------------------------*/

  /*-------------------------------------------
  Contact
  -------------------------------------------*/
  #contact {
    padding: 80px 0;
  }
  #contact .content {
    flex-direction: column;
  }
  #contact .contact-info,
  #contact .contact-form {
    width: 100%;
  }
  #contact .contact-form .button input {
    width: 100%;
  }
}