/* CSS Document */ 

.match-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    max-width: 800px;
    margin: 0;
    padding: 0px;
    border: 2px solid #ccc;
    border-radius: 8px;
    background-color: #f9f9f9;
    font-family: Arial, sans-serif;
	box-sizing: border-box;
}


.score-section {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    margin: 10px 0;
}

.team {
    font-family: Arial, sans-serif;
    margin: 20px;
    padding: 10px;
    border: 2px solid #ccc;
    border-radius: 5px;
    background-color: #f9f9f9;
}

.team h3 {
    text-align: center;
    color: #333;
    font-size: 24px;
}


.home-team {
    text-align: center;
}

.away-team {
    text-align: center;
}

.score {
    font-size: 2em;
    font-weight: bold;
    margin: 0 20px;
    color: #333;
    text-align: center;
}


/* 試合終了*/
h1.text_style{
	width:40%;
	height:auto;
	box-sizing: border-box;
	padding:5px;
	line-height:3em;
	color:white;
	background:black;
	border-radius: 8px;
}

h1{
	width:100%;
	height:auto;
	text-align: center;
	
}

.container {
    width: 80%;
    margin: 0 auto;
    padding: 20px;
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}



.container p {
    margin: 5px 0;
}

/*試合データ*/
.match-info {
    width: 100%;
    margin: auto; /* Center the match-info div horizontally */
}

.match-info p {
    flex: 1 1 45%; /* Allow items to wrap with roughly half-width */
    margin: 10px 5%;
    text-align: left; /* Align text to the left */
}

.match-info p:nth-child(5) {
    flex: 1 1 100%; /* Make the last paragraph full-width */
    text-align: center; /* Center the text */
}




/* テスト　*/
table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 20px;
}

th, td {
    padding: 10px;
    border: 1px solid #ddd;
}

th {
    background-color: #4CAF50;
    color: white;
}

td {
    background-color: #f2f2f2;
}

tr:nth-child(even) td {
    background-color: #e9f7df;
}

tr:hover td {
    background-color: #d1f1b9;
}

.result {
    font-weight: bold;
    color: #ff5733;
}

/* 列幅とテキスト配置の調整 */
th:nth-child(1), td:nth-child(1) {
    text-align: center;
    width: 10%; /* No. 列 */
}

td:nth-child(2) {
    width: 50%; /* 選手名列 */
}

td:nth-child(3), td:nth-child(4) {
    text-align: center;
    width: 20%; /* ゴールとシュート列 */
}


/*  セルのサイズ　*/
.number_cell {
	width:10%;
	
}
.athlete_cell {
	width:50%;
	
}
.goal_cell{
	
	width:20%;
	
}
.shot_cell{
	width:20%;
}

/* 選手名の列を左寄せ */
td.name_style {
    text-align: left; /* 左寄せ */
    width: 70%; /* 選手名列の幅 */
    background-color: #dff0d8; /* 背景色 */
}

td.goal_style {
        width: 30%;
        text-align: center;
        background-color: #dff0d8;
		font-size: 1.5vw;
    }

/*  footer sns シェア --*/

.x_img {
	width:90px;
	height:auto;
	margin:3px;
}


.fb_icon{
	width:50px;
	height:auto;
	margin:3px;
	
}

div.footer-sns {
    display: flex;
    gap: 10px; /* ボタン間の余白 */
    justify-content: center; /* ボタンを中央揃え */
    align-items: center;
    padding: 20px;
	box-sizing: border-box;
    background-color: #f9f9f9; /* 背景色 */
    border-top: 1px solid #ddd; /* 上部の境界線 */
}

.sns-icon {
    width: 40px; /* アイコンサイズ */
    height: 40px;
    transition: transform 0.3s;
}

.sns-icon:hover {
    transform: scale(1.1); /* ホバー時に拡大 */
}


/* AFL lp img*/
.lp_arena {
	width:100%;
	height:auto;
	display: block;
	margin: 0 auto;
}




@media screen and (max-width: 768px) {
	
.container {
    width: 100%;
    margin: 0 auto;
    padding: 20px;
    background-color: #fff;
	box-sizing: border-box;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

	
}