/* ========== POINT ========== */
#news{ padding: clamp(56px,7vw,0px) 0; background:#fff; scroll-margin-top: var(--header-h);}
#news ul{ max-width: 1200px; width: 96%; margin: 0 auto; padding: 0; list-style: none; display: flex; flex-direction: column; gap: clamp(48px,6vw,80px);}

#news li{ position: relative;}

#news .no{ display:inline-flex; align-items: center; gap:.4em; margin-bottom: 30px; padding:15px; color: #92bddb; font-weight: 900; letter-spacing: .08em; line-height:1; font-size: 40px; position: relative; z-index: 1;}
#news .no span{ font-size: 65px;}
#news .no:before {position: absolute;content: "";top: 0; left: -40px;  width: 0;  height: 0;  border-style: solid; border-right: 59px solid transparent; border-left: 59px solid transparent; border-bottom: 60px solid #e0f2ff; border-top: 0; transform: rotate(315deg); z-index: -1;}
#news h3{  font-weight: 900; line-height:1; padding: 20px; font-size: 45px;}
#news h3 > span{ display:inline-block; background: var(--brand-blue); color: #fff; padding: 8px 14px; margin-bottom: 15px;font-size: 75px;position: relative;}
#news h3 span:before{ position: absolute; top: -15px; left:-15px; content: ''; width:50px; height: 50px; border-left: 1px solid #000;border-top: 1px solid #000; }
#news h3 span:after{ position: absolute; bottom: -15px; right:-15px; content: ''; width:50px; height: 50px; border-right: 1px solid #000;border-bottom: 1px solid #000; }
#news li:nth-child(1) h3{ position: relative;}
#news li:nth-child(1) h3 > span{ position: static;}
#news li:nth-child(1) h3 span:before{ top: 0; left: 0;}
#news li:nth-child(1) h3 span:after{ bottom: 15px; right: 0;}
#news li:nth-child(3) h3 span:after{ right: -230px;}
#news h4{ margin-top: 100px; font-size: clamp(16px,6vw,50px); font-weight: 700; margin-bottom: 50px; }
#news h5{ margin: 0 0 8px; color: var(--brand-blue);}
#news p{ margin: 0 0 10px; line-height: 1.9; width: 58%;}
#news li:nth-child(3) p{ margin-left: 35px;}
#news li:nth-child(even) .no{ float: right; margin-bottom: 0;}
#news li:nth-child(even) .no:before {position: absolute;content: "";top: 0; left: auto; right: -40px;  width: 0;  height: 0;  border-style: solid; border-right: 59px solid transparent; border-left: 59px solid transparent; border-bottom: 60px solid #e0f2ff; border-top: 0; transform: rotate(45deg); z-index: -1;}
#news li:nth-child(even) h3{ margin-top: 95px; text-align: right;}
#news li:nth-child(even) h4{ text-align: right; margin-bottom: 30px;}
#news .illust{ position: absolute; right: 0;}
#news li:nth-child(2) .illust{ top:auto; bottom: 150px;}
#news .box::after{ display: block; clear: both; content: '';}
#news dl{ max-width: 1200px; width: 96%; margin: 50px auto;}
#news dl dt{ padding: 50px 100px 30px; box-sizing: border-box; background: var(--muted); border-radius: 30px 30px 0 0; color: var(--brand-blue); font-size: 36px; font-weight: 700;}
#news dl dd{ padding: 0 100px 50px; box-sizing: border-box; background: var(--muted); border-radius: 0 0 30px 30px; margin-bottom: 50px;}
#news dl dd img{ width: 30%; float: right;}
#news dl dd p{ width: 68%; float: left;}
#news dl dd::after{ display: block; clear: both; content: '';}
#news ul.loca{ display: flex;max-width: 1000px; width: 80%; margin: 50px auto 0;flex-direction: unset; gap: clamp(48px, 6vw, 40px);}
#news ul.loca li{ width: 100%;background: none;}
#news ul.loca li img{ margin-bottom: 15px;}
#news ul.loca li p{ font-size: 16px; margin-left: 0; width: 100%;}
#news li:nth-child(4) .box{ margin-top: 50px;}
#news li:nth-child(4) .box::after{ display: block; clear: both; content: '';}
#news li:nth-child(4) .box .img{ width: 38%; float: left;}
#news li:nth-child(4) .box .txt{ width: 60%; float: right;}
#news li:nth-child(4) .box .txt p{ width: 100%;}

@media (max-width:640px){
#news .no{ font-size: 25px;}
#news .no span{ font-size: 45px;}
#news h3{ margin-top: 200px; font-size: 25px;}
#news h3 > span { font-size: 30px;}
#news h4 { margin-top: 5px; margin-bottom: 5px;}
#news dl dt{ padding: 20px 20px 0; font-size: 20px;}
#news dl dd{ padding: 20px 20px 30px; font-size: 16px;}
#news dl dd img{ width: 100%; float: none; margin: 0 auto 20px;}
#news dl dd p{ width: 100%; float: none;}
#news li:nth-child(even) h3 { margin-top: 295px;}
#news h5 { font-size: 16px; margin-bottom: 20px; margin-top: 550px;}
#news li:nth-child(2) .illust { top: 600px; bottom: auto; width: 100%; float: none;}
#news p { font-size: 16px; width: 100%;}
#news li:nth-child(3) h3 span:after { right: -20px;}
#news li:nth-child(3) p { margin-left: 0px;}
#news li:nth-child(3) h4{ margin-left: 0;}
#news li:nth-child(3) .illust{ top: 350px;}
#news ul.loca { display: block;}
#news ul.loca li{ margin-bottom: 20px;}
#news li:nth-child(4) .illust { top: 500px; bottom: auto; width: 100%; float: none; text-align: center;}
#news li:nth-child(4) p{ margin-top: 500px;}
#news li:nth-child(4) .box .img{ width: 100%; float: none; margin-bottom: 20px;}
#news li:nth-child(4) .box .txt{ width: 100%; float: none;}
#news li:nth-child(4) .box .txt p{ margin-top: 20px;}
#news li:nth-child(4) .box h5{margin-bottom: 20px; }
}