/* COMMON */
body {touch-action: manipulation;}
.inner {padding: 0 2rem;}

header {padding: 1.5rem 2rem; display: flex; align-items: center; justify-content: space-between;}
header a {display: block;}
header a img {width: 16rem;}
header button {font-size: 1.3rem; font-weight: 500; letter-spacing: -.1rem; display: flex; align-items: center; gap: .6rem;}
header button img {width: .6rem;}

main {margin-bottom: 2rem;}

/* index.php */
.index_container {background: #fe2222; min-height: 100dvh; display: flex; align-items: center; justify-content: center;}
.index_container img {width: 200px;}

/* home.php */
.home_container .gather_wrap {background: #fe2222; padding: 3.5rem 1.5rem; border-radius: 1rem; overflow: hidden; margin-bottom: 3rem;}
.home_container .gather_wrap .title_wrap {text-align: center; margin-bottom: 3rem;}
.home_container .gather_wrap .title_wrap h2 {color: #fff; font-size: 2.3rem; font-family: 'RiaSans-ExtraBold'; margin-bottom: 1.7rem;}
.home_container .gather_wrap .title_wrap p {color: #fff; font-size: 1.5rem; letter-spacing: -.1rem;}
.home_container .gather_wrap .channel_wrap ul {display: flex;}
.home_container .gather_wrap .channel_wrap ul li {width: 5.5rem !important;}
.home_container .gather_wrap .channel_wrap ul li img {width: 100%;}
.home_container .gather_wrap .shopping {display: flex; align-items: center; justify-content: space-between; border: 1px solid #fff; font-size: 1.5rem; padding: 1.5rem 2rem; border-radius: 1rem; color: #fff; letter-spacing: -.1rem; margin-top: 3rem;}
.home_container .gather_wrap .shopping img {width: 1.5rem;}

.home_container .today_wrap {margin-bottom: 3rem;}
.home_container .today_wrap .title_wrap {display: flex; align-items: center; justify-content: space-between; margin-bottom: 1.5rem;}
.home_container .today_wrap .title_wrap h3 {font-size: 2rem; font-weight: 800; letter-spacing: -.1rem; color: #333;}
.home_container .today_wrap .title_wrap a {font-size: 1.4rem; letter-spacing: -.1rem; color: #555; display: flex; align-items: center; gap: .6rem;}
.home_container .today_wrap .title_wrap a img {width: .6rem;}
.home_container .today_wrap .bar_wrap {display: flex; align-items: center; justify-content: space-between; background: #efefef; padding: .9rem 1.3rem; border-radius: .8rem; margin-bottom: 2rem;}
.home_container .today_wrap .bar_wrap .logo {width: 8rem; max-height: 2.2rem; object-fit: contain;}
.home_container .today_wrap .bar_wrap a img {width: 2.1rem; box-shadow: rgba(0, 0, 0, 0.24) 0px 2px 5px; border-radius: 100%;}
.home_container .today_wrap .list_wrap ul {display: flex; flex-direction: column; gap: 1.2rem;}
.home_container .today_wrap .list_wrap ul li {display: flex; align-items: center; gap: 1rem;}
.home_container .today_wrap .list_wrap ul li span {display: block; background: #ffd9d9; font-size: 1.45rem; letter-spacing: -.1rem; color: #ef2222; padding: .3rem 0; border-radius: .4rem; min-width: 5rem; text-align: center;}
.home_container .today_wrap .list_wrap ul li p {font-size: 1.4rem; letter-spacing: -.1rem; color: #555; text-overflow: ellipsis; overflow: hidden; width: 100%;}

.home_container .like_wrap a img {width: 100%;}

.swiper-wrapper {transition-timing-function: linear !important;}

/* channel.php */
.channel_container .banner_wrap {margin-bottom: 3.5rem;}
.channel_container .banner_wrap img {width: 100%;}
.channel_container .channel_wrap h3 {font-size: 2rem; font-weight: 800; letter-spacing: -.1rem; color: #333; margin-bottom: 1.7rem;}
.channel_container .channel_wrap ul {display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.4rem 1.2rem;}
.channel_container .channel_wrap ul li a {display: flex; align-items: center; justify-content: center; box-shadow: rgba(0, 0, 0, 0.24) 0px 1px 5px; border-radius: 1rem; padding: 0 1rem; height: 10rem;}
.channel_container .channel_wrap ul li a img {width: 100%;}

/* timetable.php */
.table_container .select_wrap {display: flex; gap: 1.2rem; margin-bottom: 2.8rem;}
.table_container .select_wrap .select_box {width: 100%; position: relative;}
.table_container .select_wrap .select_box select {width: 100%; background: #efefef; border: 0; font-size: 1.45rem; padding: 1.5rem 1.8rem; letter-spacing: -.1rem; border-radius: .8rem; outline: none; padding-left: 4.2rem; white-space: nowrap;}
.table_container .select_wrap .select_box::before {content: ""; width: 1.4rem; height: 1.4rem; background: url("../img/arrow-5.png") no-repeat center / contain; position: absolute; right: 1.8rem; top: 50%; transform: translateY(-50%);}
.table_container .select_wrap .select_box::after {content: ""; width: 1.6rem; height: 1.6rem; background: url("../img/icon-1.png") no-repeat center / contain; position: absolute; left: 1.8rem; top: 50%; transform: translateY(-50%);}
.table_container .select_wrap .select_box:last-of-type::after {background: url("../img/icon-2.png") no-repeat center / contain;}

.table_container .time_wrap h4 {background: #efefef; text-align: center; padding: 1rem 0; border-radius: .8rem; margin-bottom: 2rem;}
.table_container .time_wrap h4 img {width: 8rem; height: 2.2rem; object-fit: contain;}
.table_container .time_wrap ul {display: flex; flex-direction: column; gap: 1.2rem;}
.table_container .time_wrap ul li {display: flex; align-items: center; gap: 1rem;}
.table_container .time_wrap ul li span {display: block; background: #ffd9d9; font-size: 1.45rem; letter-spacing: -.1rem; color: #ef2222; padding: .3rem 0; border-radius: .4rem; min-width: 5rem; text-align: center;}
.table_container .time_wrap ul li p {font-size: 1.4rem; letter-spacing: -.1rem; color: #555; text-overflow: ellipsis; overflow: hidden; width: 25rem;}
.table_container .time_wrap ul li button {display: block; width: 1.4rem; margin-left: auto;}
.table_container .time_wrap ul li button img {width: 100%;}

/* like.php */
.like_container h3 {font-size: 2rem; font-weight: 800; letter-spacing: -.1rem; color: #333; margin-bottom: 1.7rem; margin-top: .8rem;}
.like_container .list_wrap {display: flex; flex-direction: column; gap: 2rem;}
.like_container .list_wrap .date_box {display: flex; align-items: center; gap: 2rem;}
.like_container .list_wrap .date_box h5 {font-size: 1.5rem; letter-spacing: -.1rem; background: #efefef; padding: 0 1.3rem; height: -webkit-fill-available; text-align: center; border-radius: .6rem; display: flex; flex-direction: column; align-items: center; justify-content: center;}
.like_container .list_wrap .date_box h5 b {display: block; color: #aaa; font-weight: 300; margin-top: .3rem;}
.like_container .list_wrap .date_box ul {display: flex; flex-direction: column; gap: 1.8rem; padding: 1rem 0; width: 100%;}
.like_container .list_wrap .date_box ul li .broadcast {width: 100%; display: flex; align-items: center; justify-content: space-between;}
.like_container .list_wrap .date_box ul li .broadcast:not(:last-of-type) {margin-bottom: .8rem;}
.like_container .list_wrap .date_box ul li .broadcast button {width: 1.3rem;}
.like_container .list_wrap .date_box ul li .broadcast button img {width: 100%}
.like_container .list_wrap .date_box ul li .broadcast .title_wrap {display: flex; align-self: center; gap: .7rem;}
.like_container .list_wrap .date_box ul li .broadcast .title_wrap b,
.like_container .list_wrap .date_box ul li .broadcast .title_wrap p {font-size: 1.5rem; letter-spacing: -.1rem;}
.like_container .list_wrap .date_box ul li .broadcast .title_wrap p {text-overflow: ellipsis; overflow: hidden; width: 19rem;}
.like_container .list_wrap .date_box ul li span {font-size: 1.3rem; color: #bbb; display: block; margin-bottom: .8rem;}