/*---------------------------------------------------
アレルギー情報ページ (allergy.html) のスタイル
----------------------------------------------------*/

/* ページ全体のコンテナ調整 */
.allergy-page-content {
    /* index.htmlのセクションと同じように、適切な余白を設定 */
    padding: 80px var(--global-space); 
    max-width: 1600px; 
    margin: 0 auto;
    background-color: var(--background-color); 
}

/* PDF/画像コンテナ */
.allergy-data-container {
    margin: 50px 0;
    text-align: center; 
}

/* 画像ラッパーと画像自体の調整 */
.allergy-image-wrapper {
    margin-top: 20px;
    border: 1px solid #ccc;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    /* PC環境での最大幅を設定（この幅以下で画像を表示） */
    max-width: 1600px; 
    margin-left: auto;
    margin-right: auto;
}

/* 画像が親要素からはみ出さないようにする */
.allergy-image {
    width: 100%; /* 親要素(allergy-image-wrapper)の幅いっぱいに広がる */
    height: auto;
    display: block;
}

.allergy-notes-box {
    margin-top: 24px; 
    margin-bottom: 24px; 
}
/* ---------------------------------------------------
モバイル環境での調整 (max-width: 768px 以下)
---------------------------------------------------- */
@media (max-width: 768px) {
    
    .allergy-page-content {
        /* モバイル環境ではpadding-top: 0px が設定されているため、上部のパディングを調整 */
        padding: 40px var(--global-space); 
    }

    /* 画像ラッパーが、画面の幅（100%）から左右の余白（--global-space）を引いた幅に収まるように設定します。 */
    .allergy-image-wrapper {
        max-width: calc(100vw - (var(--global-space) * 2));
    }

    .page-title {
        font-size: 30px; 
    }
}