.indexB-arshine {padding: clamp(10px, 1.0417vw, 20px) 0; background: var(--bg-color); border-top: 1px solid var(--color-primary); border-bottom: 1px solid var(--color-primary);}
.indexB-arshine ul {display: flex; flex-wrap: wrap; gap: 15px; list-style: none; padding: 0; margin: 0;}
.indexB-arshine ul li {flex: 0 0 calc(25% - 15px); max-width: calc(25% - 15px); text-align: center; position: relative; display: flex; flex-direction: column; justify-content: center; align-items: center; box-sizing: border-box;}
.indexB-arshine ul li h5 {font-family: var(--font-family); color: var(--color-primary); font-size: clamp(32px, 3.13vw, 60px); line-height: 1; display: inline-block; position: relative; margin: 0;}
.indexB-arshine ul li h5::after {content: attr(date-txt); position: absolute; right: -25px; top: 50%; transform: translateY(-50%); color: var(--color-primary); font-size: clamp(24px, 2.08vw, 40px);}
.indexB-arshine ul li::after {content: ""; position: absolute; right: calc(-7.5px); top: 50%; transform: translateY(-50%); width: 1px; height: clamp(30px, 4vw, 60px); background-color: var(--color-primary); pointer-events: none;}
.indexB-arshine ul li:nth-child(4n)::after {display: none;}
.indexB-arshine ul li p {font-size: clamp(12px, 0.89vw, 17px); color: #333; line-height: 24px; margin: 5px 0 0;}

@media screen and (max-width: 768px) {
    .indexB-arshine ul li {flex: 0 0 calc(50% - 15px); max-width: calc(50% - 15px);}
    .indexB-arshine ul li:nth-child(4n)::after {display: block;}
    .indexB-arshine ul li:nth-child(2n)::after {display: none;}
    .indexB-arshine ul li h5::after {right: -20px;}
}