@charset "UTF-8";

/* ----------------------------------
 Charapla Side
---------------------------------- */
#charapla_left_frame { text-align: center;}
#charapla_left_frame .charapla-left-item { display: none;}
#charapla_left_frame .charapla-left-item .charapla-side-in { margin: 0 0 20px 0;}
#charapla_left_frame .charapla-left-item .charapla-side-in span,
#charapla_left_frame .charapla-left-item .charapla-side-in a { padding: 25px 20px; margin: 0 0 20px 0; border-radius: 20px; text-align: center; display: block; background: #F0F5F7; transition: 0.3s;}
#charapla_left_frame .charapla-left-item .charapla-side-in a:hover { opacity: 0.6;}
#charapla_left_frame .charapla-left-item .img_character { margin: 0 auto; text-align: center;}
#charapla_left_frame .charapla-left-item .copyright { width: 80%; margin: 0 auto;}

/* ----------------------------------
 Charapla LIST
---------------------------------- */
#charapla_news_list { display: flex; flex-wrap: wrap; gap: 20px;}
#charapla_news_list .charapla-news-item { width: calc((100% - 60px)/ 4); margin: 0 0 15px 0;}
#charapla_news_list .charapla-news-item a { text-decoration: none;}
#charapla_news_list .charapla-news-item .image { width: 100%; padding: 75% 0 0 0; margin: 0 0 10px 0; position: relative; transition: 0.3s;}
#charapla_news_list .charapla-news-item .image figure { width: 100%; height: 100%; border: #F0F5F7 1px solid; border-radius: 30px; display: flex; justify-content: center; align-items: center; position: absolute; top: 0; left: 0; overflow: hidden;}
#charapla_news_list .charapla-news-item .image img  { vertical-align: top;}
#charapla_news_list .charapla-news-item a:hover .image { opacity: 0.7;}
#charapla_news_list .charapla-news-item .desc { display: flex; justify-content: space-between; align-items: center;}
#charapla_news_list .charapla-news-item .desc .block-icon { width: 60px; height: 60px; border-radius: 20px; display: flex; justify-content: center; align-items: center; background: #F0F5F7; overflow: hidden;}
#charapla_news_list .charapla-news-item .desc .block-data { width: calc(100% - 70px);}
#charapla_news_list .charapla-news-item .desc .block-data .date { margin: 0 0 5px 0; font-size: 14px; color: #0047BA;}
#charapla_news_list .charapla-news-item .desc .block-data .title { max-height: 39.2px !important; font-size: 14px; line-height: 1.4; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;}

/* ----------------------------------
 Character Detail
---------------------------------- */
#charapla_news_detail { margin: 0 0 100px 0;}
#charapla_news_detail .design-title { padding: 0 0 20px 0; margin: 0 0 40px 0; border-bottom: #DFE4E6 1px solid; font-family: "roc-grotesk", sans-serif; font-size: 34px; font-weight: 800; font-style: normal; text-align: center; line-height: 1.0; color: #0047BA;}
.charapla-news-detail-frame { padding: 0 60px;}
.charapla-news-detail-frame p { font-size: 16px; line-height: 2.0;}
.charapla-news-detail-frame .charapla-news-detail-header { margin: 0 0 20px 0; display: flex; flex-wrap: wrap;}
.charapla-news-detail-frame .charapla-news-detail-header .block-icon { margin: 0; align-items: center;}
.charapla-news-detail-frame .charapla-news-detail-header .block-icon .image-icon,
.charapla-news-detail-frame .charapla-news-detail-header .block-icon .text-icon { margin: 0 4px 0 0;}
.charapla-news-detail-frame .charapla-news-detail-header .date  { margin: 0 20px 0 0; font-size: 14px; word-break: keep-all; color: #0047BA;}
.charapla-news-detail-frame .charapla-news-detail-header .title { width: 100%; padding: 0; margin: 15px 0 0 0; font-size: 26px; font-weight: 600;}
.charapla-news-detail-share { margin: 0 0 30px 0; display: flex; justify-content: flex-end; align-items: center;}
.charapla-news-detail-share .title { font-size: 15px; color: #0047BA;}
.charapla-news-detail-share .sns-list { display: flex; justify-content: flex-end; align-items: center;}
.charapla-news-detail-share .sns-list li { width: 38px; height: 38px; margin: 0 0 0 15px;}
.charapla-news-detail-navigation.detail-page-navigation { margin-bottom: 50px;}
.for-top-button { width: 300px; margin: 0 auto 80px;}
.for-top-button a { width: 100%; height: 45px; border-radius: 45px; font-size: 14px; font-weight: 400; font-style: normal; text-decoration: none; color: #fff; background: #0047BA; display: flex; justify-content: center; align-items: center; position: relative;}