/*
 * -------------------------------------------------------------------
 * スタイルシート (style.css)
 * -------------------------------------------------------------------
 *
 * このスタイルシートは、ウェブサイト全体の基本的なスタイルを定義しています。
 * 具体的には、以下の要素に適用されます。
 *
 * - body: ページ全体のフォント、背景色、文字色、行間
 * - header: ヘッダー領域の背景色、文字色、パディング、テキスト配置、影
 * - header h1: ヘッダータイトルの余白
 * - nav: ナビゲーション領域の配置 (横並び、中央揃え)、パディング
 * - nav a: ナビゲーションリンクの文字色、マージン、テキスト装飾、パディング、角丸、ホバー時のアニメーション
 * - nav a:hover: ナビゲーションリンクのホバー時の背景色
 * - main: メインコンテンツ領域のパディング、最大幅、中央配置、背景色、影、角丸
 * - main section: メインコンテンツ内のセクションのmarginBottom、padding、下線
 * - main section:last-child: 最後のセクションの下線を削除
 * - main h2: メインコンテンツの見出しの色、marginTop、marginBottom、下線、paddingBottom
 * - main ul: メインコンテンツのリストの点削除、padding
 * - main ul li: メインコンテンツのリスト項目のpadding、下線
 * - main ul li:last-child: 最後のリスト項目の下線を削除
 * - form label: フォームのラベルの表示形式 (ブロック)、marginBottom、fontWeight
 * - form input[type="text"], form input[type="email"], form textarea: フォームのテキスト入力、メール入力、テキストエリアの幅、padding、marginTop、marginBottom、border、borderRadius、boxSizing
 * - form textarea: フォームのテキストエリアのリサイズ設定
 * - form button: フォームのボタンの背景色、文字色、padding、border、borderRadius、cursor、fontSize、ホバー時のアニメーション
 * - form button:hover: フォームのボタンのホバー時の背景色
 * - footer: フッター領域の背景色、文字色、テキスト配置、padding、marginTop、fontSize
 * - footer p: フッター内の段落要素のmargin
 *
 * このファイルは、お問い合わせページ (contact_jp.html, contact_en.html) を含む、
 * ウェブサイトのすべてのHTMLファイルに適用されることを想定しています。
 *
 * 必要に応じて、このファイルを編集して、サイトのデザインを調整してください。
 */
body {
    font-family: 'Noto Sans JP', "メイリオ", Meiryo,"ヒラギノ角ゴ Pro W3","HIragino Kaku Gothic Pro W3","HIragino Kaku Gothic Pro",Osaka,"ＭＳ Ｐゴシック", "MS P Gothic",sans-serif;
    margin: 0;
    padding: 0;
    background-color: #f4f4f4; /* 少し明るい背景色に変更 */
    color: #333;
    line-height: 1.6; /* 行間を少し広げて読みやすく */
}

header {
    background-color: #003366;
    color: white;
    padding: 1.5em 0; /* 上下のpaddingを調整 */
    text-align: center;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* 影を追加して立体感を出す */
}

header h1 {
    margin-bottom: 0.5em; /* タイトルの下の余白を追加 */
}

nav {
    display: flex; /* ナビゲーションを横並びにする */
    justify-content: center; /* 中央揃え */
    padding: 0.5em 0;
}

nav a {
    color: white;
    margin: 0 1.5em; /* 左右のmarginを調整 */
    text-decoration: none;
    padding: 0.3em 0.6em; /* 少しpaddingを追加してクリックしやすく */
    border-radius: 5px; /* 角を丸くする */
    transition: background-color 0.3s ease; /* ホバー時のアニメーションを滑らかに */
}

nav a:hover {
    background-color: #0055aa; /* ホバー時の背景色を変更 */
}

main {
    padding: 2em;
    max-width: 800px;
    margin: 2em auto; /* 上下のmarginを調整 */
    background-color: white; /* メインコンテンツの背景を白くする */
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); /* 影を追加 */
    border-radius: 5px; /* 角を丸くする */
}

main section {
    margin-bottom: 2em; /* 各セクションの下の余白を調整 */
    padding: 1em;
    border-bottom: 1px solid #eee; /* セクションの区切り線を追加 */
}

main section:last-child {
    border-bottom: none; /* 最後のセクションの区切り線を削除 */
}

main h2 {
    color: #003366; /* 見出しの色を変更 */
    margin-top: 0; /* 見出し上の余白を削除 */
    margin-bottom: 1em; /* 見出し下の余白を追加 */
    border-bottom: 2px solid #ccc; /* 見出しの下線を追加 */
    padding-bottom: 0.5em;
}

main ul {
    list-style: none; /* リストの点を削除 */
    padding: 0;
}

main ul li {
    padding: 0.5em 0;
    border-bottom: 1px dotted #ccc; /* リストの区切りを点線にする */
}

main ul li:last-child {
    border-bottom: none; /* 最後のリスト項目の区切り線を削除 */
}

form label {
    display: block; /* ラベルをブロック要素にする */
    margin-bottom: 0.3em;
    font-weight: bold; /* ラベルを太字にする */
}

form input[type="text"],
form input[type="email"],
form textarea {
    width: calc(100% - 1em); /* 左右のpaddingを考慮した幅にする */
    padding: 0.5em;
    margin-top: 0.3em;
    margin-bottom: 1em;
    border: 1px solid #ccc; /* ボーダーを追加 */
    border-radius: 3px; /* 角を少し丸くする */
    box-sizing: border-box; /* paddingとborderをwidthに含める */
}

form textarea {
    resize: vertical; /* 縦方向のリサイズを可能にする */
}

form button {
    background-color: #003366;
    color: white;
    padding: 0.8em 1.5em; /* paddingを少し大きくする */
    border: none;
    border-radius: 5px; /* 角を丸くする */
    cursor: pointer;
    font-size: 1em; /* フォントサイズを少し大きく */
    transition: background-color 0.3s ease;
}

form button:hover {
    background-color: #0055aa;
}

footer {
    background-color: #333; /* フッターの背景色を変更 */
    color: #eee; /* フッターの文字色を変更 */
    text-align: center;
    padding: 1em 0; /* 上下のpaddingを調整 */
    margin-top: 2em;
    font-size: 0.9em; /* フォントサイズを少し小さく */
}

footer p {
    margin: 0; /* p要素のデフォルトのmarginを削除 */
}