/* ============================================================================================================================
安全・衛生について
============================================================================================================================ */

/* コンテンツリスト */
ul.safety-list { align-items:stretch; flex-direction:column; flex-wrap:wrap; gap:20px; justify-content:flex-start; margin-bottom:100px; }
ul.safety-list li { border:1px solid var(--bk); flex-direction:column; gap:40px; padding:25px; margin:auto; max-width:300px; width:100%; }
ul.safety-list li.pc-only { display:none; }
ul.safety-list li h2 { font-size:24px; font-weight:700; letter-spacing:4.624px; }
ul.safety-list li div.icon { text-align:center; margin:auto; height:auto; max-width:60px; }
ul.safety-list li div.icon img { height:auto; max-width:100%; }
ul.safety-list li p { font-size:14px; font-weight:500; line-height:150%; letter-spacing:3.5px; }
ul.safety-list li div.icon, ul.safety-list li h2, ul.safety-list li p { flex-shrink:0; }


@container( min-width:960px ) {

/* コンテンツリスト */
ul.safety-list { display:grid; grid-template-columns:repeat(3, 1fr); gap:60px; margin:auto; margin-bottom:100px; max-width:1000px; width:100%; }
ul.safety-list li {box-sizing:border-box; flex-direction:column; display:flex; gap:40px; justify-content:flex-start; padding:30px; margin:0; max-width:none; width:100%; }
ul.safety-list li.pc-only { align-items:flex-end; border:none; display:flex; }
ul.safety-list li.pc-only img { margin:auto auto 0 auto; max-width:100%; width:100%; }
ul.safety-list li h2 { font-size:26px; letter-spacing:5.2px; }
ul.safety-list li div.icon { margin:0 auto; }
ul.safety-list li p { font-size:18px; font-weight:400; line-height:28px; letter-spacing:1.8px; }

}

/* ============================================================================================================================
自然災害について
============================================================================================================================ */

/* ベース */
.emergency { padding:0 30px; margin:auto; margin-bottom:120px; }

/* 見出し */
.emergency h2 { font-size:20px; font-weight:700; line-height:150%; letter-spacing:5px; }
.emergency h2.content-title { font-size:26px; text-align:center; margin-bottom:35px; }
.emergency h3 { font-size:18px; font-weight:700; line-height:24px; letter-spacing:2px; }
.emergency h3.pink { color:var(--pi-4); margin-bottom:45px; }
div.details-item h3 { font-size:16px; }

/* 配置整理 */
div.details, div.details-item { flex-direction:column; }
div.details { gap:50px; }
div.details-item { gap:4px; }

/* リスト */
div.details-item ul { padding:0 0 0 1rem; }
div.details-item ul li { line-height:24px; letter-spacing:4px; }

/* リード文のあたり */
div.read-area { flex-direction:column; gap:47px; }
div.content-icon img { margin:0 auto; max-width:60px; width:100%; }
div.item-content h3 { margin-bottom:30px; }
div.item-content img { border-radius:10px; margin:60px auto; height:auto; max-width:245px; }

@container( min-width:960px ) {

/* ベース */
.emergency { padding:0; max-width:860px; }

/* 見出し */
.emergency h2.content-title { font-size:40px; text-align:left; margin-bottom:70px; }
.emergency h3.pink { font-size:24px; line-height:40px; letter-spacing:6px; margin-bottom:80px; }

/* リード文のあたり */
div.read-area { flex-direction:row; gap:60px; }
div.item-content { width:calc( 100% - 120px ); }
div.item-content img { max-width:300px; }

}

@media( max-width:959px ) {

/* デコレーション */
section.emergency { position:relative; z-index:1; }
section.emergency::before { aspect-ratio:205/228; background-image:url('../img/common/sp-sakura-left-1.png'); position:absolute; bottom:-120px; left:-11px; height:130px; width:180px; z-index:-1; }

}