/* style.css */

/* ページ全体の基本スタイル */
body {
    font-family: Arial, sans-serif; /* フォントの種類 */
    line-height: 1.6; /* 行の高さ */
    color: #333; /* 文字の色 */
    max-width: 800px; /* 最大幅 */
    margin: 0 auto; /* 中央揃え */
    padding: 20px; /* 内側の余白 */
    background-color: #f4f4f4; /* 背景色 */
}

/* 見出し1のスタイル */
h1 {
    color: #2c3e50; /* 文字の色 */
    text-align: center; /* 中央揃え */
    border-bottom: 2px solid #3498db; /* 下線 */
    padding-bottom: 10px; /* 下線と文字の間の余白 */
}

/* 見出し2のスタイル */
h2 {
    color: #2980b9; /* 文字の色 */
    margin-top: 30px; /* 上部の余白 */
}

/* 各セクションのスタイル */
.section {
    background-color: #fff; /* 背景色 */
    border-radius: 5px; /* 角の丸み */
    padding: 20px; /* 内側の余白 */
    margin-bottom: 20px; /* 下部の余白 */
    box-shadow: 0 2px 5px rgba(0,0,0,0.1); /* 影 */
}

/* ハイライト部分のスタイル */
.highlight {
    background-color: #e74c3c; /* 背景色 */
    color: #fff; /* 文字の色 */
    padding: 5px 10px; /* 内側の余白 */
    border-radius: 3px; /* 角の丸み */
    font-weight: bold; /* 太字 */
}

/* リンクのスタイル */
a {
    color: #3498db; /* 文字の色 */
    text-decoration: none; /* 下線なし */
}

/* リンクにカーソルを合わせた時のスタイル */
a:hover {
    text-decoration: underline; /* 下線を表示 */
}

/* 現在の言語表示のスタイル */
#current-language-display {
    text-align: center; /* 中央揃え */
    margin-top: 20px; /* 上部の余白 */
    font-size: 1.1em; /* フォントサイズ */
    color: #555; /* 文字の色 */
    font-weight: bold; /* 太字 */
}

/* 言語ボタンコンテナのスタイル */
#language-buttons-container {
    text-align: center; /* ボタンを中央揃え */
    margin-bottom: 20px; /* 下部の余白 */
    margin-top: 20px; /* 上部の余白 */
}

/* 言語ボタンのスタイル */
.language-button {
    background-color: #3498db; /* 背景色 */
    color: white; /* 文字の色 */
    border: none; /* ボーダーなし */
    padding: 10px 15px; /* 内側の余白 */
    margin: 0 5px; /* ボタン間の余白 */
    border-radius: 5px; /* 角の丸み */
    cursor: pointer; /* カーソルをポインターに */
    font-size: 0.9em; /* フォントサイズ */
    transition: background-color 0.3s ease; /* ホバー時のアニメーション */
}

/* 言語ボタンにカーソルを合わせた時のスタイル */
.language-button:hover {
    background-color: #2980b9; /* ホバー時の背景色 */
}

/* 現在選択されている言語ボタンのスタイル */
.language-button.active {
    background-color: #e74c3c; /* アクティブなボタンの背景色 */
    font-weight: bold; /* 太字 */
}