/* 基本的なリセットと設定 */
body {
    font-family: 'Arial', sans-serif; /* 基本のフォント */
    line-height: 1.6;                 /* 行間 */
    margin: 0;                        /* ブラウザデフォルトのマージンを削除 */
    padding: 0;                       /* ブラウザデフォルトのパディングを削除 */
    background-color: #f4f4f4;       /* 背景色 */
    color: #333;                      /* 基本の文字色 */
}

/* ヘッダー */
header-logo {
    background-color: #fff;
    color: #fff;
    padding: 1rem 0;
    text-align: center;
}

header {
    background-color: #333;
    color: #fff;
    padding: 1rem 0;
    text-align: center;
}

header h1 {
    margin: 0;
    font-size: 2rem;
}

/* メインコンテンツエリア */
main {
    max-width: 960px; /* メインコンテンツの最大幅 */
    margin: 20px auto;  /* 上下20pxマージン、左右は自動で中央寄せ */
    padding: 0 20px;    /* 左右に20pxのパディング */
    background-color: #fff;
    box-shadow: 0 0 10px rgba(0,0,0,0.1); /* ちょっとした影 */
}

/* ヒーローセクション（画像） */
.hero-section {
    text-align: center; /* 画像を中央に配置 */
    margin-bottom: 20px;
}

.hero-section img {
    max-width: 80%;   /* 画像が親要素の幅を超えないようにする */
    height: auto;      /* 画像の縦横比を維持する */
    border-radius: 8px; /* 画像の角を少し丸くする (任意) */
}

/* コンテンツセクション（説明文） */
.content-section {
    padding: 20px;
    text-align: justify; /* テキストを両端揃え (任意) */
}

.content-section h2 {
    color: #333;
    margin-bottom: 15px;
    text-align: center;
}

/* フッター */
footer {
    text-align: center;
    padding: 1rem 0;
    background-color: #333;
    color: #fff;
    margin-top: 30px;
}

footer-logo {
    text-align: center;
    height: 100px;
}


/* --- レスポンシブ対応 --- */

/* スマートフォンなど、画面幅が600px以下の場合 */
@media (max-width: 600px) {
    header h1 {
        font-size: 1.5rem; /* ヘッダーの文字サイズを少し小さく */
    }

    main {
        margin: 10px auto; /* マージンを小さく */
        padding: 0 10px;   /* パディングを小さく */
    }

    .content-section {
        padding: 15px;
        text-align: left; /* スマートフォンでは左揃えの方が見やすい場合がある */
    }

    .content-section h2 {
        font-size: 1.2rem;
    }
}