@charset "utf-8";
/*
	Theme Name: 01ゲーム部
	Description: 01ゲーム部の公式サイト
	Theme URI: https://z1game.jp.testrs.jp/
	Author: FREE　BRAIN
	Author URI: https://www.fr-brain.com/
	Version: 1.0.1
*/
@import url(common/css/reset.css);
/*@import url(common/css/custom.css);
@import url(common/css/wp_custom.css);
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond&display=swap');*/
/* ---------------------------------------------------------------------------------------------

　   基本設定

--------------------------------------------------------------------------------------------- */
/*フッター最下部固定*/
html, body { height: 100%;}
body > footer {
	position: sticky;
	top: 100vh;
}
/*//フッター最下部固定*/
html {
	-webkit-font-smoothing: antialiased;
}
body {
	font-size: 16px;
	line-height: 1.6em;
	-webkit-text-size-adjust: 100%;
	font-family: "Yusei Magic", sans-serif,'Roboto',"游ゴシック Medium", "Yu Gothic Medium","游ゴシック",YuGothic,"ヒラギノ角ゴ ProN W3","Hiragino Kaku Gothic ProN","メイリオ",Meiryo,sans-;
	color: #020202;
	letter-spacing: .4px;
}

a {
	outline:none;
	color: #2e2e2e;
}

a:hover {
	text-decoration: none;
}

a,a:hover,a:hover img {
	-webkit-transition: 0.5s;
	-moz-transition: 0.5s;
	-o-transition: 0.5s;
	transition: 0.5s;
	text-decoration: none;
}

a:hover {
	filter: alpha(opacity=80);
	-moz-opacity:0.80;
	opacity:0.80;
}
img {
	max-width: 100%;
	height: auto;
}

* {
	-webkit-box-sizing:border-box;
	-moz-box-sizing:border-box;
	box-sizing:border-box;
}


/* ---------------------------------------------------------------------------------------------

　   メニュー

--------------------------------------------------------------------------------------------- */
#nav li a {
	display: block;
	color: #696969;
	position: relative;
}
@media only screen and ( max-width : 767px ) {
.overlay {
	width: 0;
	height: 0;
	position: fixed;
	z-index: 11;
	top: 0;
	left: 0;
	opacity: 0;
	transition: opacity .5s;
	background: rgba(255,255,255,.7);
}
.overlay.open {
	width: 100%;
	height: 100%;
	opacity: 1;
}
#main {
	transition: all .5s;
	min-height: 100vh;
}
#main.open {
	position: fixed;
	width: 100%;
}
#menu_btn {
	top: 12px;
	right: 15px;
	transition: .3s;
	cursor: pointer;
	position: fixed;
	z-index: 9999;
	width: 50px;
	height: 50px;
	display: flex;
	align-items: center;
	justify-content: center;
}
.menu-trigger {
	width: 18px;
	height: 16px;
	position: relative;
}
.menu-trigger span {
	display: inline-block;
	box-sizing: border-box;
	position: absolute;
	left: 0;
	width: 100%;
	height: 1px;
	background-color: #ddd;
	transition: all .5s;
}
.menu-trigger span:nth-of-type(1) {
	top: 0;
}
.menu-trigger span:nth-of-type(2) {
	width: 70%;
	top: 7px;
}
.menu-trigger span:nth-of-type(3) {
	bottom: 0;
}
#menu_btn.active .menu-trigger span:nth-of-type(1) {
	transform: translateY(7px) rotate(-45deg);
}
#menu_btn.active .menu-trigger span:nth-of-type(2) {
	opacity: 0;
}
#menu_btn.active .menu-trigger span:nth-of-type(3) {
	transform: translateY(-7px) rotate(45deg);
}
#nav {
	width: 280px;
	height: 100%;
	overflow: auto;
	padding: 90px 0;
	background: #808080;
	position: fixed;
	top: 0;
	right: 0;
	z-index: 12;
	transform: translate(280px);
	transition: all .5s;
}
#nav.open {
	transform: translateZ(0);
}
#nav li {
	padding: 0 20px;
}
#nav li a {
	position: relative;
	padding: 20px;
	color: #fff;
}
}

@media print, screen and ( min-width : 768px ) {
#menu_btn,.overlay {
	display: none;
}
#nav ul {
	display: flex;
	flex-wrap: wrap;
}
#nav li {
	position: relative;
}
#nav li a {
	padding: 20px;
}
#nav .current-menu-item a {
	color: #dad4ec;
}
#nav .current-menu-item li a {
	color: #fff;
}
#nav li ul.sub-menu {
	flex-direction: column;
	background: #fff;
	position: absolute;
	width: 200px;
	left: 50%;
	top: 100%;
	-webkit-transform: translateX(-50%);
	transform: translateX(-50%);
	padding: 10px 0;
}
#nav li ul.sub-menu li {
	width: 100%;
}
#nav li ul.sub-menu li a {
	line-height: 1.6em;
	color: #83759a;
	padding: 10px 20px;
}
#nav li ul.sub-menu li a:hover {
	color: #dad4ec;
}
}

@media print, screen and ( min-width : 768px ) {
/*2階層目を持つliの矢印の設定*/
#nav ul li.sub-menu::before{
	content:'';
	position: absolute;
	left:10px;
	top:27px;
	width:6px;
	height:6px;
	border-top: 2px solid #999;
	border-right:2px solid #999;
	transform: rotate(135deg);
}

/*3階層目を持つliの矢印の設定*/
#nav ul ul li.sub-menu::before{
	content:'';
	position: absolute;
	left:6px;
	top:20px;
	width:6px;
	height:6px;
	border-top: 2px solid #999;
	border-right:2px solid #999;
	transform: rotate(45deg);
}
/*== 2・3階層目の共通設定 */
/*下の階層を持っているulの指定*/
#nav li.sub-menu ul{
    /*絶対配置で位置を指定*/
	position: absolute;
	left:0;
	top:65px;
	z-index: 4;
    /*形状を指定*/
	color: #696969;
	background:#fff;
	width:180px;
    /*はじめは非表示*/
	visibility: hidden;
	opacity: 0;
    /*アニメーション設定*/
	transition: all .3s;
}
#nav li.sub-menu ul li{
	width:100%;
	padding: 10px;
	padding-left: 20px;
	border-bottom:solid 1px #696969;
}

/*hoverしたら表示*/
#nav li.sub-menu:hover > ul,
#nav li.sub-menu ul li:hover > ul,
#nav li.sub-menu:active > ul,
#nav li.sub-menu ul li:active > ul{
	visibility: visible;
	opacity: 1;
}
/*ナビゲーションaタグの形状*/
#nav li.sub-menu ul li a{
	color: #fff;
	border-bottom:solid 1px rgba(255,255,255,0.6);
}

#nav li.sub-menu ul li:last-child a{
	border-bottom:none;
}

#nav li.sub-menu ul li a:hover,
#nav li.sub-menu ul li a:active{
	background:#3577CA;
}


/*==3階層目*/

/*3階層目の位置*/
#nav li.sub-menu ul ul{
	top:0;
	left:182px;
	color: #696969;
	background:#fff;
}

#nav li.sub-menu ul ul li a:hover,
#nav li.sub-menu ul ul li a:active{
	background:#448ED3;
}
}

@media screen and (max-width:768px){
#nav{
	padding: 0;
}
  
#nav ul{
	display: block;
}
  
#nav li.sub-menu ul,
#nav li.sub-menu ul ul{
	position: relative;
	left:0;
	top:0;
	width:100%;
	visibility:visible;/*JSで制御するため一旦表示*/
	opacity:1;/*JSで制御するため一旦表示*/
	display: none;/*JSのslidetoggleで表示させるため非表示に*/
	transition:none;/*JSで制御するためCSSのアニメーションを切る*/
}
  
#nav ul li a{
	border-bottom:1px solid #ccc;
}

/*矢印の位置と向き*/

#nav ul li.sub-menu::before{
	left:20px;  
}

#nav ul ul li.sub-menu::before{
	transform: rotate(135deg);
	left:20px;
}
    
#nav ul li.sub-menu.active::before{
	transform: rotate(-45deg);
}

}
/* ---------------------------------------------------------------------------------------------

　   HEADER / FOOTER

--------------------------------------------------------------------------------------------- */
header {
	width: 100%;
	background: rgba(255,255,255,1);
	display: flex;
	justify-content: space-between;
	align-items: center;
	position: fixed;
	top: 0;
	left: 0;
	z-index: 10;
}
header #logo a {
	display: block;
	font-size: 2.0em;
}
footer {
	background: #ffffff;
	margin: 0 auto;
	padding: 20px;
	text-align: center;
	color: #131313;
}
footer a {
	color: #131313;
	letter-spacing: 0.15em;
}
.copyright {
	text-align: center;
	color: #131313;
}
@media only screen and ( max-width : 767px ) {
header {
	padding: 0 20px;
	height: 70px;
}
header #logo {
	width: 250px;
}
}
@media print, screen and ( min-width : 768px ) {
header {
	padding: 0 50px;
}
header #logo {
	width: 250px;
}
}


/* ---------------------------------------------------------------------------------------------

　   ページスタイル

--------------------------------------------------------------------------------------------- */
.slider {
  position: relative; /* 中にabsolute要素を配置するため */
  width: 100%;
  height: 650px;
}

.slider img {
  width: 100%;
  height: 650px;
  display: block;
  object-fit: cover; /* この一行を追加するだけ！ */
}

.slider .centered-img {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 65%; /* 必要に応じてサイズ調整 */
  height: auto;
  z-index: 2;
  pointer-events: none; /* 背景操作を邪魔しないようにする場合 */
}
#bg-video {
  width: 100%;            /* ビューポート幅に合わせる */
  height: 650px;           /* ビューポート高さに合わせる */
  object-fit: cover;       /* アスペクト比を保って切り抜き表示 */
  z-index: -1;             /* 他のコンテンツの背面に表示 */
  pointer-events: none;    /* クリックなどの操作を無効化 */
}

section {
	padding: 50px 0;
}
section#sec01 {
	padding: 100px 0;
}

@media (max-width: 768px) {
section#sec01 {
	padding: 50px 0;
}

}

.content_wrapper {
	display: block;
	max-width: 1180px;
	margin: 0 auto;
}
@media (max-width: 768px) {
	.slider {
	height: 300px;
	}

	.slider img {
	height: 300px;
	object-fit: cover; /* この一行を追加するだけ！ */
	}
	.content_wrapper {
		max-width: 95%;
		margin: 0 auto;
	}
	#bg-video {
	height: 300px;
}

	}
/* ---------------------------------------------------------------------------------------------

　   見出しスタイル

--------------------------------------------------------------------------------------------- */
h1 {
	font-family: 'Bangers', cursive; /*** 'Luckiest Guy', cursive;     */
	color: #8bfff7;
	font-size: 8em;
	/*font-size: 8em;*/
	text-align: right;
	padding: 35px 0;
	margin-bottom: 0; /* 下の余白なし */
	margin-top: 0;
	z-index: 1;
}
h2 {
	font-family: 'Bangers', cursive; /*** 'Luckiest Guy', cursive;     */
	color: #8bfff7;
	font-size: 8em;
	text-align: center;
	padding: 55px 0;
	margin-bottom: 0; /* 下の余白なし */
	margin-top: 0;
	z-index: 1;
}
h3 {
  font-family: 'Bangers', cursive;
	color: #8bfff7;
	font-size: 3em;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 80px; /* 適宜調整 */
  margin: 0; /* h3の余白を消す */
  line-height: 1;
  background: rgba(0, 0, 0, 1);
  padding: 0; /* paddingがあるとずれる原因になる */
}
h3 span {
  display: inline-block;
  transform: translateY(-0.1em); /* 文字だけを上に微調整 */
}
@media (max-width: 768px) {
h1 {
	font-family: 'Bangers', cursive; /*** 'Luckiest Guy', cursive;     */
	color: #8bfff7;
	font-size: 3em;
	text-align: center;
	padding: 15px 0;
	margin-bottom: 0; /* 下の余白なし */
	margin-top: 0;
	z-index: 1;
}
h2 {
	font-family: 'Bangers', cursive; /*** 'Luckiest Guy', cursive;     */
	color: #8bfff7;
	font-size: 4em;
	text-align: center;
	padding: 15px 0;
	margin-bottom: 0; /* 下の余白なし */
	margin-top: 0;
	z-index: 1;
}

}

/* ---------------------------------------------------------------------------------------------

　   aboutusについて

--------------------------------------------------------------------------------------------- */
.image-text-container {
  position: relative;
  display: flex;
  align-items: flex-start;
  width: 100%;
}

.image-left {
  width: 60%;
  min-width: 200px;
  z-index: 1;
}
.image-wrap {
  width: 60%;
  min-width: 200px;
}

.image-wrap img {
  width: 100%;
  display: block;
}

.text-right {
	position: absolute;
	right: 0;
  	top: 0;
	width: 60%;
	text-align: right;
	z-index: 2;
	background: transparent; /* 必要に応じて背景をつける */
	pointer-events: none;     /* テキスト上のマウス操作を無効にしたい場合 */
}
.text-right p {
 	font-size: 2.0em;
	margin: 0;
	padding: 0.5em;
	text-shadow:
   -2px -2px 0 white,
   0px -2px 0 white,
   2px -2px 0 white,
  -2px  0px 0 white,
   2px  0px 0 white,
  -2px  2px 0 white,
   0px  2px 0 white,
   2px  2px 0 white;
	/*  -2px -2px 0 white,
   0px -2px 0 white,もっと太くする場合
   2px -2px 0 white,
  -2px  0px 0 white,
   2px  0px 0 white,
  -2px  2px 0 white,
   0px  2px 0 white,
   2px  2px 0 white;*/
}
@media (max-width: 768px) {
.text-right {
	width: 80%;
}
.text-right p {
	font-size: 1.0em;
	margin: 0;
	padding: 0em;
	text-shadow:
   -1px -1px 0 white,
    1px -1px 0 white,
   -1px  1px 0 white,
    1px  1px 0 white;
	/*  -1px -1px 0 white,
    1px -1px 0 white,
   -1px  1px 0 white,
    1px  1px 0 white;*/
}
}
/* ---------------------------------------------------------------------------------------------

　   イベントについて

--------------------------------------------------------------------------------------------- */
.event-row {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  justify-content: space-between;
  width: 100%;
}
@media (max-width: 768px) {
}

/* ---------------------------------------------------------------------------------------------

　   ボックスについて

--------------------------------------------------------------------------------------------- */
.fade-box {
  width: 90%;
  margin: 2em auto;
  padding: 1.5em;
  border: 2px solid black;
  font-size: 1.2em;
  color: #000;
text-align: center;
  background: linear-gradient(
    to left,
    rgba(139, 255, 247, 1) 0%,    /* 完全に不透明な #8bfff7 */
    rgba(139, 255, 247, 0.2) 50%,   /* 50%地点までは不透明 */
    rgba(139, 255, 247, 0) 100%   /* 左端で完全に透明に */
  );
}
.fade-box-img img {
	width: 35%;
}
.fade-box {
  font-size: clamp(1.0rem, 2.5vw, 1.2em);
  line-height: 1.5;
}

@media (max-width: 768px) {
	.fade-box-img img {
	width: 60%;
}

}

/* ---------------------------------------------------------------------------------------------

　   MEMBERについて

--------------------------------------------------------------------------------------------- */
.team-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: 20px;
}

.member {
  flex: 0 1 calc((100% - 40px) / 3);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  min-height: 350px; /* 高さ揃える */
  box-sizing: border-box;
  padding: 10px;
}

/* 画像サイズがバラバラでも大丈夫に */
.member img {
  max-width: 266px;
  height: auto;
  object-fit: cover;
  max-height: 400px;
}

/* 名前とSNSを下に固定する */
.info {
  display: flex;
  flex-direction: column;
  margin-top: auto; /* ここが重要！ */
  align-items: center;
}

.name {
  margin: 10px 0 5px;
  font-weight: bold;
}

.socials {
  display: flex;
  justify-content: center;
  gap: 10px;
}

.socials a {
  text-decoration: none;
  font-size: 14px;
}

/* レスポンシブ対応：2列にする */
@media (max-width: 768px) {
  .member {
    flex: 0 1 calc((100% - 20px) / 2);
  }
}

/* ---------------------------------------------------------------------------------------------

　   スポンサーバナーについて

--------------------------------------------------------------------------------------------- */

.banner-container {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  justify-content: center;
}

.banner {
  padding: 10px;
  box-sizing: border-box;
  height: 250px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.banner img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* レスポンシブ対応 */
@media (max-width: 768px) {
  .banner-container {
    grid-template-columns: 1fr; /* 1列に変更 */
  }
}
/* ---------------------------------------------------------------------------------------------

　   ゼロイチカップについて

--------------------------------------------------------------------------------------------- */
.zero_cup_img {
	text-align: center;
	margin-bottom: 30px;
}
.zero_cup_text {
	text-align: center;
	margin-bottom: 30px;
}
.zero_cup {
	text-align: center;
	margin-bottom: 30px;
}
/* ---------------------------------------------------------------------------------------------

　   コンタクトフォームの装飾

--------------------------------------------------------------------------------------------- */

/* 全体 */
#cf7-area {
  max-width: 85%;
  margin: 0 auto;
  font-family: "メイリオ", sans-serif;
  font-size: 16px;
  color: #333;
}

/* 見出し */
.form-heading {
  background-color: #70ccc6;
  border-left: 8px solid #549994;
  border-radius: 4px;
  color: #ffffff;
  font-weight: bold;
  padding: 1em;
  margin-bottom: 2em;
}

.form-heading p {
  margin: 0;
}

/* 各入力項目 */
.cf7-item {
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 1.5em;
}

.cf7-q {
  width: 35%;
  min-width: 120px;
  display: flex;
  align-items: center;
  font-weight: bold;
  gap: 6px;
  margin-bottom: 0.5em;
}

.cf7-a {
  width: 63%;
}

/* 必須マーク */
.cf7-req {
  display: inline-block;
  font-size: 0.75em;
  background-color: #ff5e5e;
  color: #fff;
  padding: 2px 6px;
  border-radius: 3px;
  min-width: 40px;
  text-align: center;
  margin-right: 4px;
}

/* 任意項目の空ラベルも整列用に同じ幅確保 */
.cf7-req.empty {
  background: transparent;
  color: transparent;
  border: none;
}

/* 入力系 */
#cf7-area input[type="text"],
#cf7-area input[type="email"],
#cf7-area input[type="tel"],
#cf7-area textarea,
#cf7-area select {
  width: 100%;
  background: #f9f9f9;
  border: 1px solid #ccc;
  padding: 0.6em;
  border-radius: 4px;
  font-size: 1em;
  box-sizing: border-box;
}

#cf7-area input:focus,
#cf7-area textarea:focus,
#cf7-area select:focus {
  background: #fff;
  border-color: #6495ED;
  outline: none;
}

/* チェックボックス＆送信 */
.cf7-accept-check {
  text-align: center;
  margin: 2em 0;
}

.cf7-submit {
  text-align: center;
  margin-bottom: 2em;
}

#cf7-area input[type="submit"] {
  background-color: #70ccc6;
  color: #fff;
  border: none;
  padding: 0.75em 2em;
  font-size: 1em;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.3s ease;
}

#cf7-area input[type="submit"]:hover {
  background-color: #fff;
  color: #70ccc6;
  border: 2px solid #70ccc6;
}

/* スマホ対応 */
@media screen and (max-width: 768px) {
  .cf7-item {
    display: block;
  }

  .cf7-q,
  .cf7-a {
    width: 100%;
  }

  .cf7-submit input[type="submit"] {
    width: 100%;
  }
}