@charset "utf-8";
#layout .wrap ,
#day .wrap ,
#living .wrap ,
#activity .wrap ,
#community .wrap ,
#safety .wrap,
#training .wrap ,
#support .wrap {padding: 200px 0 0;}

#layout .wrap .layout {margin: 100px auto; max-width: 1000px;}

#day .wrap .day {display: flex; margin: 100px 150px;}
#day .wrap .day .timeline {width: 50%;}
#day .wrap .day .timeline .item {display: flex; align-items: stretch; margin-bottom: 25px;}
#day .wrap .day .timeline .item .time {width: 100px; display: flex; align-items: center; padding-left: 10px; color: var(--color-primary); font-weight: bold; position: relative;}
#day .wrap .day .timeline .item .time::before {position: absolute; content: "";  top: 0; bottom: 0; left: 33px; width: 2px; background: var(--color-primary); height: calc(100% + 25px);}
#day .wrap .day .timeline.left .item:first-child .time::before {top: 50%; height: calc(50% + 25px);}
#day .wrap .day .timeline.left .item:last-child .time::before {height: 100%;}
#day .wrap .day .timeline.right .item:last-child .time::before {height: 50%;}
#day .wrap .day .timeline .item .time time {background-color: var(--color-bg); z-index: 2;}
#day .wrap .day .timeline .item .event {width: calc(100% - 100px); background-color: var(--color-white); padding: 25px 20px; position: relative;}
#day .wrap .day .timeline .item .event::before {position: absolute; content: ""; width: 26px; height: 30px; background-color: var(--color-white); clip-path: polygon(100% 0, 0 50%, 100% 100%); top: 50%; left: 0; transform: translate(-100%,-50%); z-index: 3;}
#day .wrap .day .timeline .item .event h3 {font-size: 20px; border-bottom: 1px solid var(--color-text-light);}
#day .wrap .day .timeline .item .event p {margin-top: 1rem;}
#day .wrap .day .timeline .item .event img {margin-top: 1rem; width: 100%; border-radius: 20px;}
@media screen and (max-width:1280px) {
    #day .wrap .day {margin: 100px 50px;}
    #day .wrap .day .timeline .item .event h3 {font-size: 18px;}
}
@media screen and (max-width:960px) {
  #day .wrap .day {display: block;}
  #day .wrap .day .timeline {width: 100%;}
  #day .wrap .day .timeline .item .time { padding-left: 0;}
  #day .wrap .day .timeline .item .time::before {left: 20.5px;}
  #day .wrap .day .timeline.left .item:last-child .time::before {height: calc(100% + 25px);}
  #day .wrap .day .timeline .item .event img {max-width: 500px; margin: 1rem auto 0;}
}
@media screen and (max-width:768px) {
    #day .wrap .day {margin: 100px 20px;}
    #day .wrap .day .timeline .item .time::before {left: 17.5px;}
}
@media screen and (max-width:590px) {
  #day .wrap .day .timeline .item .time {width: 70px;}
  #day .wrap .day .timeline .item .event {width: calc(100% - 70px);}
  #day .wrap .day .timeline .item .event h3 {font-size: 16px;}
}

#living .wrap .swiper {margin: 100px 0;}
#living .wrap .swiper .note {font-size: 14px;}
@media screen and (max-width:1280px) {
    #living .wrap .swiper .note {font-size: 12px;}
}
@media screen and (max-width:768px) {
    #living .wrap .swiper .note {font-size: 10px;}
}

#support .wrap {margin: 0 auto 200px;}