@charset "UTF-8";

body{
  margin:0;
  font-family:'Montserrat',sans-serif;
  background:#0d1b2a;
  color:#e0e1dd;
  overflow-x: hidden;
}

/* ===== ヘッダー ===== */
header{
  position:fixed;
  top:0;
  width:100%;
  background:rgba(13,27,42,0.9);
  padding:15px 20px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  z-index:1000;
  box-sizing: border-box;
}
.logo{
  font-weight:bold;
  letter-spacing:2px;
}
.menu-btn{
  font-size:24px;
  cursor:pointer;
  flex-shrink: 0;
  margin-right: 5px;
}
.menu-btn:hover {
  color: #00b4d8;
}

/* ===== メニュー ===== */
.menu{
  position:fixed;
  right:-100%;
  top:0;
  width:70%;
  height:100%;
  background:#1b263b;
  padding:30px;
  transition:.4s;
  z-index:1001;
}
.menu.active{ right:0; }
.menu a{
  display:block;
  margin:15px 0;
  text-decoration:none;
  color:#e0e1dd;
}
.close{ text-align:right; cursor:pointer; }

.overlay{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,0.5);
  opacity:0;
  visibility:hidden;
  transition:.3s;
}
.overlay.active{ opacity:1; visibility:visible; }

/* ===== メイン ===== */
main{
	padding-top:	70px;
}

/* ===== ヒーロー ===== */
.hero{
	position:		relative;

	width:			100%;
	aspect-ratio:	4 / 3;
	box-sizing:		border-box;

	overflow:		hidden;
}
.slide{
	position:		absolute;
	inset:			0;

	background-size:	cover;
	background-position:center 20%;

	opacity:		0;
	transform:		scale(1);

	transition:
		opacity 1s ease,
		transform 5s ease;
}
.slide.active{
	opacity:		1;
	transform:		scale(1.05);
}

.hero-text{
  position:absolute;
  top:50%; left:50%;
  transform:translate(-50%,-50%);
  text-align:center;
}

/* ===== セクション ===== */
.section{
  padding:80px 20px;
  max-width:1000px;
  margin:auto;
}
.section h2{
  border-left:4px solid #00b4d8;
  padding-left:10px;
}

/* ===== NEWS ===== */
//.news-item{
//  display:flex;
//  justify-content:space-between;
//  border-bottom:1px solid #415a77;
//  padding:10px 0;
//}

.news-item{
  display:flex;
  gap:15px;
  align-items:center;
  border-bottom:1px solid #415a77;
  padding:10px 0;
}

/* 文字 */
.news-content{
  flex:1;
}

.news-title{
  font-weight:bold;
  margin-bottom:3px;
}


/* ===== SCHEDULE（重要改善） ===== */
.schedule-item{
  display:flex;
  gap:15px;
  align-items:center;
  border-bottom:1px solid #415a77;
  padding:10px 0;
}

/* 画像 */
.schedule-img{
  width:120px;
  height:70px;
  object-fit:cover;
  object-position:center 25%;
  border-radius:6px;
}

/* 文字 */
.schedule-content{
  flex:1;
}

.schedule-month{
  margin-bottom:20px;
  color:#00b4d8;
}

.schedule-title{
  font-weight:bold;
  margin-bottom:3px;
}

/* ラベル */
.schedule-label{
  display:inline-block;
  font-size:12px;
  padding:2px 6px;
  border-radius:4px;
  margin-right:5px;
}

/* 色分け */
.schedule-content-jpba{ color: yellow; }
.schedule-content-tournament{ color: yellow; }
.schedule-content-challenge{ color: white; }
.schedule-content-gobou{ color: white; }
.schedule-content-round1_live{ color: white; }
.schedule-content-plan{ color: white; }
.schedule-content-league{ color: white; }
.schedule-content-lesson{ color: white; }
.schedule-content-event{ color: white; }

.schedule-label-jpba{ background: crimson; }
.schedule-label-tournament{ background: darkorange; }
.schedule-label-challenge{ background: royalblue; }
.schedule-label-gobou{ background: darkgreen; }
.schedule-label-round1_live{ background: mediumvioletred; }
.schedule-label-plan{ background: darkturquoise; }
.schedule-label-league{ background: darkolivegreed; }
.schedule-label-lesson{ background: limegreen; }
.schedule-label-event{ background: deeppink; }


/* ===== Twitter ===== */
.twitter-area{ margin-top:20px; }

/* ===== Button ===== */
.button-area{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin: 10px;
}
.button-area a{
  border:1px solid #00b4d8;
  padding:8px 14px;
  border-radius:20px;
  color:#00b4d8;
  text-decoration:none;
}

/* ===== Follow ===== */
.follow{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}
.follow a{
  border:1px solid #00b4d8;
  padding:8px 14px;
  border-radius:20px;
  color:#00b4d8;
  text-decoration:none;
}

/* ===== フッター ===== */
footer{
  border-top:1px solid #415a77;
  padding:30px;
  text-align:center;
}
.footer-links a{
  margin:0 10px;
  color:#e0e1dd;
  text-decoration:none;
  font-size:14px;
}

/* ===== フェードイン ===== */
.fade_in_element{
  opacity:0;
  transition:
    opacity .8s ease,
    transform .8s ease;
}

.fade_in_element.visible{
  opacity:1;
}

/* 右から */
.fade_in_right{
  transform:translateX(40px);
}
.fade_in_right.visible{
  transform:translateX(0);
}
/* 左から */
.fade_in_left{
  transform:translateX(-40px);
}
.fade_in_left.visible{
  transform:translateX(0);
}
/* ズーム */
.fade_in_zoom{
  transform:scale(.9);
}
.fade_in_zoom.visible{
  transform:scale(1);
}
/* END */