/* すべての要素のデフォルトのマージンとパディングをリセット */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box; /* 要素の幅や高さにパディングやボーダーを含める */
}

/* HTMLとBody要素の基本設定 */
html, body {
    width: 100%;               /* ブラウザの横幅いっぱいに広がるように設定 */
    overflow-x: hidden;        /* 横方向のスクロールバーを非表示にする */
}

/* Body要素の背景色を設定 */
body {
    background-color: #EFFFFA; /* 指定された全体背景色 */
    text-align: center;        /* 中央寄せのため */
    min-width: 320px;          /* 最小幅を設定して、小さすぎる画面での崩れを防ぐ */
}

/* ヒーロー画像 (section01.png) */
.hero-image {
    display: block;
    width: 100vw;              /* ビューポートの幅の100%に設定 */
    height: auto;
    object-fit: contain;       /* 画像全体が表示されるように調整 */
    margin: 0;                 /* マージンを確実にゼロにする */
    padding: 0;                /* パディングを確実にゼロにする */
}

/* テキスト画像 (text01.png) */
.section-text-image {
    display: block;
    width: 1837px;             /* PC版の固定幅 */
    max-width: calc(100% - 80px); /* 左右の余白40px*2=80pxを引いた幅 */
    height: auto;              /* 縦横比を維持 */
    margin: 0 auto;            /* 中央寄せ */
    padding: 0 40px;           /* 左右に40pxの余白を追加 */
    box-sizing: content-box;   /* パディングを幅に含めない */
    margin-top: 50px;          /* 上の要素との間に余白 */
}

/* 申し込みボタン画像 (mousikomi.png) */
.apply-button {
    display: block;
    max-width: 500px;          /* ボタンの最大幅 */
    height: auto;              /* 縦横比を維持 */
    border: none;              /* リンクによる枠線を消す */
    text-decoration: none;     /* リンクによる下線を消す（もしテキストリンクの場合） */
    margin: 50px auto;         /* 上下50px、左右中央寄せ */
}

/* 区切り線画像 (kugirisen.png) */
.divider-image {
    display: block;
    max-width: 1200px;         /* 区切り線の最大幅 */
    height: auto;              /* 縦横比を維持 */
    margin: 50px auto;         /* 上下左右共通の余白 */
}

/* セクション2の画像 (section02.png) */
.section-image {
    display: block;
    max-width: calc(100% - 80px); /* 左右の余白40px*2=80pxを引いた幅 */
    height: auto;              /* 縦横比を維持 */
    margin: 50px auto;         /* 上下余白、左右中央寄せ */
    padding: 0 40px;           /* 左右に40pxの余白を追加 */
    box-sizing: content-box;   /* パディングを幅に含めない */
    object-fit: contain;       /* 画像全体が表示されるように調整 */
}

/* セクション3の画像 (section03.png) */
.section03-image {
    display: block;
    max-width: calc(100% - 350px); /* 左右の余白175px*2=350pxを引いた幅 */
    height: auto;              /* 縦横比を維持 */
    margin: 50px auto;         /* 上下余白、左右中央寄せ */
    padding: 0 175px;          /* 左右に175pxの余白を追加 */
    box-sizing: content-box;   /* パディングを幅に含めない */
    object-fit: contain;       /* 画像全体が表示されるように調整 */
}

/* セクション4の画像 (section04.png) */
.section04-image {
    display: block;
    max-width: calc(100% - 350px); /* 左右の余白175px*2=350pxを引いた幅 */
    height: auto;              /* 縦横比を維持 */
    margin: 50px auto;         /* 上下余白、左右中央寄せ */
    padding: 0 175px;          /* 左右に175pxの余白を追加 */
    box-sizing: content-box;   /* パディングを幅に含めない */
    object-fit: contain;       /* 画像全体が表示されるように調整 */
}

/* セクション5の画像 (section05.png) */
.section05-image {
    display: block;
    max-width: calc(100% - 350px); /* 左右の余白175px*2=350pxを引いた幅 */
    height: auto;              /* 縦横比を維持 */
    margin: 50px auto;         /* 上下余白、左右中央寄せ */
    padding: 0 175px;          /* 左右に175pxの余白を追加 */
    box-sizing: content-box;   /* パディングを幅に含めない */
    object-fit: contain;       /* 画像全体が表示されるように調整 */
}

/* セクション6の画像 (section06.png) のスタイル */
.section06-image {
    display: block;
    width: 100%;               /* 親要素の幅に合わせて100%に */
    max-width: calc(100% - 80px); /* 左右の余白40px*2=80pxを引いた幅 */
    height: auto;              /* 高さを自動調整 */
    object-fit: contain;       /* 画像全体が見えるように調整 */
    margin: 50px auto;         /* 上下余白、中央寄せ */
    padding: 0 40px;           /* 左右に40pxの余白を追加 */
    box-sizing: content-box;   /* パディングを幅に含めない */
}


/*
## スマートフォン対応
画面幅が768px以下の場合に適用されるスタイル
*/
@media (max-width: 768px) {

    /* テキスト画像 (text01.png) */
    .section-text-image {
        width: 100%;
        max-width: 100%;
        padding: 0 20px; /* 左右20pxの余白を確保 */
        margin-top: 30px;
        box-sizing: border-box; /* パディングを幅に含めるように変更 */
    }

    /* 申し込みボタン画像 */
    .apply-button {
        max-width: calc(100% - 40px); /* 左右20pxの余白を引いた幅 */
        margin: 30px auto;
        padding: 0 20px; /* 左右20pxの余白を確保 */
        box-sizing: border-box; /* パディングを幅に含めるように変更 */
    }

    /* 区切り線 */
    .divider-image {
        max-width: calc(100% - 40px); /* 左右20pxの余白を引いた幅 */
        margin: 40px auto;
        padding: 0 20px; /* 左右20pxの余白を確保 */
        box-sizing: border-box; /* パディングを幅に含めるように変更 */
    }

    /* セクション2の画像 (section02.png) */
    .section-image {
        width: 100%;
        max-width: 100%;
        padding: 0 20px; /* 左右20pxの余白を確保 */
        margin: 30px auto;
        box-sizing: border-box; /* パディングを幅に含めるように変更 */
    }

    /* セクション3, 4, 5の画像 */
    .section03-image,
    .section04-image,
    .section05-image {
        width: 100%;
        max-width: 100%;
        padding: 0 20px; /* 左右20pxの余白を確保 */
        margin: 30px auto;
        box-sizing: border-box; /* パディングを幅に含めるように変更 */
    }

    /* セクション6の画像 (section06.png) */
    .section06-image {
        width: 100%;
        max-width: 100%;
        padding: 0 20px; /* 左右20pxの余白を確保 */
        height: auto;
        margin: 30px auto;
        box-sizing: border-box; /* パディングを幅に含めるように変更 */
    }
}