/* ============================================================================================================================
食育
============================================================================================================================ */

/* 上部イラスト配置 */
div.food-education-illust { justify-content:center; margin-bottom:24px; }
div.food-education-illust img { margin:auto; height:auto; max-width:220px; width:100%; }

/* リード文 */
.food-education p.read { font-size:17px; font-weight:700; line-height:40px; margin:auto; margin-bottom:50px; max-width:80%; width:100%; }

/* 給食づくりで大切にしていること */
.focus h2 { align-items:center; background-color:var(--ye); border:1px solid var(--bk); border-radius:50px; font-size:16px; font-weight:700; justify-content:center; transform:translateY(30px); margin:auto; height:60px; width:275px; }
.focus ul { background-color:var(--wh); border-radius:10px; border:1px solid var(--pi-2); flex-direction:column; gap:10px; padding:45px 16px 46px 36px; margin:auto; margin-bottom:35px; max-width:90%; width:100%; }
.focus ul li { font-size:16px; font-weight:500; line-height:28px; }

/* 食育コンテンツ */
section.food { flex-direction:column; gap:60px; padding:0 30px; margin:auto; margin-bottom:120px; }
div.food-item h2 { align-items:center; color:var(--gr-2); flex-direction:column; font-size:24px; font-weight:700; gap:20px; justify-content:center; text-align:center; }
div.food-item h2::before { aspect-ratio:1/1; margin:auto; height:60px; width:60px; }

/* 行事食 */
div.food-item.event-food h2::before { background-image:url('../img/page/food-education/icon-01event.svg'); }
div.outside-flex { flex-direction:column-reverse; gap:20px; }
div.outside-flex ul, div.outside-flex ul li { flex-direction:column; }
div.outside-flex ul { gap:50px; }
div.outside-flex ul li img { max-width:100%; width:100%; }
div.food-item.event-food div.outside-flex h3 { color:var(--gr-2); font-size:20px; font-weight:700; letter-spacing:4px; margin-bottom:10px; }
div.food-item.event-food div.outside-flex h3::before { content:'★'; }
div.food-item.event-food ul.pc-only { display:none; }

/* 食器 */
div.food-item.tableware h2::before { background-image:url('../img/page/food-education/icon-02tableware.svg'); }

/* 給食の展示 */
div.food-item.exhibition h2::before { background-image:url('../img/page/food-education/icon-03exhibition.svg'); }
div.food-item.exhibition div.flex { flex-direction:column; gap:20px; }
div.food-item.exhibition div.flex div.ph-box img { height:auto; max-width:100%; width:100%; }
div.food-item.exhibition div.flex div.txt-box { flex-direction:column; gap:20px; }

/* 食物アレルギー対応 */
div.food-item.allergy h2::before { background-image:url('../img/page/food-education/icon-04allergy.svg'); }

@container( min-width:960px ) {

/* 上部イラスト配置 */
div.food-education-illust { margin-bottom:90px; }
div.food-education-illust img { max-width:365px; }

/* リード文 */
.food-education p.read { font-size:22px; line-height:50px; margin-bottom:120px; max-width:850px; }

/* 給食づくりで大切にしていること */
.focus h2 { font-size:30px; transform:translateY(34.5px); position:relative; height:77px; width:640px; z-index:1; }
.focus h2::before, .focus h2::after { background-color:var(--gr-1); border-radius:50%; transform:translateY(-50%); position:absolute; top:50%; height:16px; width:16px; z-index:1; }
.focus h2::before { left:50px; }
.focus h2::after { right:50px; }
.focus ul { padding:50px 52px 30px 72px; margin-bottom:130px; max-width:925px; }
.focus ul li { font-size:18px; line-height:40px; }

/* 食育コンテンツ */
section.food { gap:80px; padding:0; max-width:1000px; width:100%; }
div.food-item h2 { flex-direction:row; justify-content:flex-start; margin-bottom:30px; }
div.food-item h2::before { margin:0; }

/* 行事食 */
div.outside-flex { flex-direction:column; }
div.outside-flex ul { flex-direction:row; }
div.food-item.event-food ul.pc-only { display:flex; flex:1; justify-content:center; gap:38px; }
div.food-item.event-food ul.pc-only li img { aspect-ratio:1/1; height:100%; max-width:100%; width:100%; }

/* 給食の展示 */
div.food-item.exhibition div.flex { flex-direction:row; gap:50px; }
div.food-item.exhibition div.flex div.ph-box { width:300px; }
div.food-item.exhibition div.flex div.txt-box { width:calc( 100% - 350px ); }

}

@media( max-width:959px ) {

/* デコレーション */
section.focus, div.allergy { position:relative; z-index:1; }
section.focus::before { aspect-ratio:223/247; background-image:url('../img/common/sp-sakura-left-2.png'); position:absolute; bottom:-100px; left:-65px; height:247px; width:223px; z-index:-1; }
div.allergy::before { aspect-ratio:185/247; background-image:url('../img/common/sp-sakura-right-1.png'); position:absolute; bottom:-120px; right:0; height:170px; width:120px; z-index:-1; }

}

@media( min-width:960px ) {

/* デコレーション */
main::before { position:absolute; z-index:-1; }
main::before { aspect-ratio:376/780; background-image:url('../img/common/sakura-right-2.png'); top:1165px; right:0; height:786px; width:376px; }

}