@charset "utf-8";

body {
    font-family: Arial, sans-serif;
    font-size: 20px;
}
*{
    margin: 0; /* marginとpaddingの設定を初期化 */
    padding: 0;
    box-sizing: border-box;
}
.container { /* 左右の要素を中央に寄せる */
    max-width: 75%; /* 幅は最大75%まで */
    padding: 0 30px; /* 左右に30pxずつ余白 */
    margin-left: auto; /* containerを中央表示 */
    margin-right: auto;
}
.header { /* ヘッダーの設定 */
    height: 56px;
    width: 100%;
    box-shadow: 0 0 10px #dddddd; /* 下に影をつける */
    background-color: white; /* 下に影をつける */
    position: fixed; /* 固定表示 */
    top: 0; /* 画面上部からの表示位置を0に指定 */
    z-index: 1000; /* 最前面表示 */
}
.header-left {
    float: left; /* 左端に表示 */
}
.header-right {
    float: right; /* 右端に表示 */
}
.clear{
    clear: both; /* 回り込み解除*/
}
.header-logo { /* ロゴ画像が中央に表示されるよう調整 */
    height: 40px; /* 画像の高さ */
    margin-top: 8px; /* (ヘッダーの高さ-画像の高さ)÷2 */
}
.header-right a { /* メニューそれぞれに設定するため、aスタイル */
    line-height: 56px; /* 文字を中央に表示する(縦方向) */
    color: #5a5c5f; /* 文字色 */
    margin-left: 5px; /* リンクとリンクの横の間隔 */
    font-size: 16px;
    padding: 16px 5px; /* ポインタが反応する領域 */
    text-decoration: none; /* 下線を削除 */
}
.header-right a:hover { /* カーソルを乗せた時の効果 */
    background-color: #e2f1ff; /* 背景色を変更 */
    transition: background-color 0.5s; /* アニメーション追加 */
}

.footer {
    height: 630px;
    background-color: #2f3a44;
    color: #e8e8e8;
    padding-top: 15px; /* 文字より上の余白 */
    margin-bottom: 0 !important; /* 重要な修正を適用 */
    padding-bottom: 0 !important; /* パディングの下余白も削除 */
}
.footer_left {
    float: left;
}
.footer_right {
    float: right;
    padding-top: 0; /* 上部の余白 */
}
.footer_left p {
    margin-bottom: 0px;
    text-indent: 30px;
}
.indent {
    display: inline-block;
    margin-left: 30px; /* `<br>`の後のインデントを指定 */
}