@charset "UTF-8";
html, body {
	height: 100%;
}

body{
	padding-top: 80px;
}

main{
	min-height: calc(100vh - 160px);
	margin-bottom: 100px;
}

.index , .about_text{
	color: white;
}

h1{
	color: darkred;
	font-family: "Rampart One", sans-serif;
	font-weight: 400;
	font-style: normal;
}

/* カードにホバーしたときの効果 */
.card-hover {
	transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out; /* ホバー効果を滑らかにする */
}

.card-hover:hover {
	transform: translateY(-5px); /* 少し上に浮き上がる */
	box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2); /* 影を濃くする */
	filter: brightness(0.9); /* 少し暗くする */
}

.introduction{
    color: white;
    padding: 0 50px 0 50px;	
}

.introduction_img{
	aspect-ratio: 16 / 9;
	object-fit: cover;
}

.about{
	background-image: linear-gradient(
		rgba(0, 0, 0, 0.6),
		rgba(0, 0, 0, 0.6)),
		url(/images/introduction.jpg);
	background-size: cover;
	background-position: center;
}

.news{
	padding: 0 50px;	
}

.news_img{
	aspect-ratio: 4 / 3;
}

.member_img{
	width: 100%;
	aspect-ratio: 3 / 4;
	object-fit: cover;
}

.grade-border{
	border-bottom: 2px solid darkred;
	font-family: "Rampart One", sans-serif;
	font-weight: 400;
	font-style: normal;
}

.match{
	background-color: black;
	color: white;
	padding: 0 50px;	
}

.match_img{
	aspect-ratio: 4 / 3;
}

.cta-section{
	height: 400px;
	background-image: linear-gradient(
		 rgba(0, 0, 0, 0.6),
		 rgba(0, 0, 0, 0.6)),
		 url(https://placehold.jp/1000x400.png?text=問い合わせ);
		  background-size: cover;
		  background-position: center;
}

/*お知らせのテーブル*/
.news_id{width: 5%;}
.news_date{width: 10%;}
.news_title{width: 20%;}
.news_category{width: 10%;}
.news_photo{width: 45%;}
.news_operation{width: 10%;}

/*部員のテーブル*/
.member_name{width: 8%;}
.member_grade{width: 5%;}
.member_number{width: 5%;}
.member_position{width: 7%;}
.member_almaMater{width: 18%;}
.member_faculty{width: 10%;}
.member_department{width: 12%;}
.member_photo{width: 25%;}
.member_operation{width: 10%;}

/*試合のテーブル*/
.match_name{width: 10%;}
.match_date{width: 10%;}
.match_venue{width: 10%;}
.match_our{width: 5%;}
.match_opponent{width: 5%;}
.match_result{width: 7%;}
.match_comment{width: 23%;}
.match_photo{width: 20%;}
.match_operation{width: 10%;}

/*お問い合わせのテーブル*/
.inquiry_id{width: 5%;}
.inquiry_name{width: 10%;}
.inquiry_subject{width: 30%;}
.inquiry_date{width: 15%;}
.inquiry_status{width: 10%;}
.inquiry_operation{width: 30%;}

.inquiry_content{
	white-space: pre-wrap;
}

.footer_bg{
	background-image: linear-gradient(
		rgba(0, 0, 0, 0.6),
		rgba(0, 0, 0, 0.6)),
		url(/images/footer_bg.jpg);
	background-size: cover;
	background-position: center;
}

/*トップボタン*/
.back-to-top{
	color: white;
	background-color: darkred;
	width: 50px;
	height: 50px;
	border-radius: 50%;
	position: fixed;
	bottom: 25px;
	right: 25px;
	display: none;
	z-index: 99;
	opacity: 0.7;
}

.back-to-top:hover{
	background-color: darkred;
	border-color: darkred;
}

/*レスポンシブデザイン*/
@media screen and (max-width:1100px) {
	.index {
		font-size: 30px;
	}
}

@media screen and (min-width:600px) {
  .introduction, .news, .match {
    padding: 0 100px;
  }
  
}