@font-face {
  font-family: "03SmartFontUI";
  src: url("font/03SmartFontUI.ttf");
}

@font-face {
  font-family: "ZenMaruGothic-Light";
  src: url("font/ZenMaruGothic-Light.ttf");
}

/* Body全体のスタイル */
body {
    font-family: '03SmartFontUI', sans-serif; /* ページ全体のフォント設定 */
    background-color: #f1f2f3; /* ページの背景色 */
    margin: 0;
    padding: 0;
}

body a {
    color:#000000;
    text-decoration: none;
    font-weight: bold;
}

body h2 {
  border-bottom: 4px solid #0a1573;
}

/* メニューバーのスタイル */
.navbar {
    font-family: 'ZenMaruGothic-Light', sans-serif;
    position: fixed; /* メニューバーを固定位置に配置 */
    width: 100%;
    top: 0;
    left: 0;
    z-index: 100;
    background-color: #0a1573; /* メニューバーの背景色 */
    color: #fff; /* メニューバーのフォントカラー */
	 border-bottom: 8px solid #00b5f0; /* メニューバー下部の飾り線 */
	 border-radius: 0px 0px 32px 32px;
}

.navbar .logo {
    display: flex;
    align-items: center;
}

.navbar .logo img {
    width: 50px;
    height: 50px;
    margin-top: 4px;
    margin-bottom: 4px;
    margin-right: 16px;
    margin-left: 8px;
}

h1 {
    font-family: 'ZenMaruGothic-Light', sans-serif;
    font-size: 36px; /* ページタイトルのフォントサイズ */
    margin: 0;
    padding-top: 16px;
}

/* Headerのスタイルを修正 */
header {
    background: url('picture/header.svg') center center; /* Headerの背景画像 */
    background-size: cover;
    color: #fff; /* ヘッダーのフォントカラー */
    text-align: center;
    padding: 50px;
    height: 256px; /* ヘッダーの高さ */
	 border-bottom: 4px solid #00b5f0; /* ヘッダー下部の飾り線 */
	 border-radius: 0px 0px 32px 32px;
}

.container {
    max-width: 75%;
    margin: 0 auto;
    padding: 20px;
    background-color: #fff; /* コンテナの背景色 */
    box-shadow: 0 0 16px rgba(0, 0, 0, 0.4);
    border-radius: 32px;
    margin-top: 20px;
　  display: flex;
　  align-items: center;
　  justify-content: center;
}

.server-info {
    margin-top: 20px;
}

.server-info p {
    font-size: 18px; /* 情報テキストのフォントサイズ */
}

footer {
    background-color: #333; /* フッターの背景色 */
    color: #fff; /* フッターのフォントカラー */
    text-align: center;
    padding: 10px;
    clear: both;
}

/* テーブルのスタイル */
table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 20px;
    background-color: #fff; /* テーブルの背景色 */
    box-shadow: 0 0 8px rgba(0, 0, 0, 0.4);
	 border-radius: 16px; /* 角を丸くする値を設定 */
    overflow: hidden; /* 内容が角をはみ出ないようにする */
}

th, td {
    padding: 12px;
    text-align: center;
}

th {
    background-color: #0a1573; /* テーブルヘッダー行の背景色 */
    color: #fff; /* ヘッダー行の文字色 */
}

tr:nth-child(even) {
    background-color: #f2f2f2; /* 偶数行の背景色 */
}

/* 表内のリンクにスタイルを適用 */
table a {
    text-decoration: none;
    color: #3498db; /* テーブル内のリンクの色 */
    font-weight: bold;
}

/* リンクホバー時のスタイル */
table a:hover {
    text-decoration: underline;
}


/* Discordボタンのスタイル */
.discord-button {
    background-color: #5865f2;
    font-size: 18px; /* ボタンのフォントサイズ */
    padding: 10px 20px; /* ボタンのパディング */
    border: none;
    border-radius: 25px;
    text-align: center;
    text-decoration: none;
    color: #fff; /* ボタンのテキスト色 */
    cursor: pointer;
    margin: 5px;
}

/* Twitterボタンのスタイル */
.twitter-button {
    background-color: #1DA1F2;
    font-size: 18px; /* ボタンのフォントサイズ */
    padding: 10px 20px; /* ボタンのパディング */
    border: none;
    border-radius: 25px;
    text-align: center;
    text-decoration: none;
    color: #fff; /* ボタンのテキスト色 */
    cursor: pointer;
    margin: 5px;
}

/* ボタンホバーエフェクト */
.button {
    /* 通常状態のスタイル */
    transition: background-color 0.3s, box-shadow 0.3s;
}

.button:hover {
    background-color: #00b5f0;
    box-shadow: 0 0 8px rgba(0, 181, 240, 0.8);
}

/* 側面のボタンのスタイル */
.social-buttons {
    position: fixed;
    bottom: 20px; /* 画面下部からの距離 */
    right: 20px; /* 画面右からの距離 */
    z-index: 1000; /* ボタンを前面に表示 */
}

/* 側面のボタンのデフォルトスタイル */
.social-button {
    background-color: transparent;
    border: none;
    border-radius: 50%; /* 丸い形状 */
    color: #0a1573; /* テーマに合った色 */
    font-size: 24px; /* アイコンのフォントサイズ */
    cursor: pointer;
    transition: background-color 0.3s; /* ホバーエフェクトのトランジション */
	 margin-top: 10px; /* 上側の間隔を設定 */
    margin-bottom: 10px; /* 下側の間隔を設定 */
}


/* サイドバー共有ボタンの共通スタイル */
.social-button {
    width: 40px; /* ボタンの幅 */
    height: 40px; /* ボタンの高さ */
    border: none;
    border-radius: 50%; /* 丸い形状 */
    font-size: 20px; /* アイコンのサイズ */
    color: #fff; /* アイコンの色 */
    text-align: center;
    cursor: pointer;
    transition: background-color 0.3s;
    display: flex;
    justify-content: center;
    align-items: center;
	 text-decoration: none; /* 下線を削除 */
}

/* サイドバー共有ボタンのデフォルト背景色 */
.social-button {
    background-color: #0a1573; /* テーマのカラーコードを設定 */
}

/* サイドバー共有ボタンのホバーエフェクト */
.social-button:hover {
    background-color: #00b5f0;
}

/* Minecraft風の石ブロックデザイン */
footer {
    background: #383838; /* 石ブロックのテクスチャ画像 */
    background-image: url('picture/stone_texture.svg'); /* 石ブロックのテクスチャ画像のパスを指定 */
    background-size: 100%;
    color: #fff; /* フォントカラー */
    text-align: center;
    padding: 10px;
    clear: both;
    font-size: 16px; /* フォントサイズ */
    border-top: 4px solid #233f9a; /* 石ブロックの上部の飾り線 */
    position: relative;
    overflow: hidden;
    transition: background 1s;
	 background-image: url('picture/stone_texture.svg');
    background-size: 32px 32px;
	 border-radius: 32px 32px 0px 0px;

}

footer:before {
    content: ''; /* 空のコンテンツを挿入 */
    width: 100%;
    background: #121212;
    position: absolute;
    bottom: 0;
    left: 0;
}

footer:after {
    display: block;
    margin-top: 16px;
    font-weight: bold;
    width: 100%;
}

/* ホバー時のスタイル */
footer:hover {
    background-position: 0 -8px;
    background-color: #2b2b2b; /* ホバー時の背景色 */
    border-top: 4px solid #00b5f0; /* ホバー時の上部の飾り線 */
}

/* フォトギャラリーボタンのスタイル */
.normal-button {
    background-color: #0a1573;
    font-size: 18px; /* ボタンのフォントサイズ */
    padding: 10px 20px; /* ボタンのパディング */
    border: none;
    border-radius: 25px;
    text-align: center;
    text-decoration: none;
    color: #fff; /* ボタンのテキスト色 */
    cursor: pointer;
    margin: 10px;
    display: flex;
    justify-content: space-around;
}

footer a {
    color:#fafafa;
    text-decoration: none;
}

li {
    padding: 5px 0;
}