@charset "UTF-8";

/* ----------------------------------
 Charapla TOP
---------------------------------- */
.contents-box-inner { max-width: 1200px; margin: 0 auto;}

/* Layout */
#pankuzu_wrap { padding: 0 0 1px 0; background: #F0F5F7;}

/* CHARACTER */
#charapla_top_character .design-headerline h1 { padding: 0; margin: 0 0 10px 0; border: none; text-align: center; font-size: 54px; font-weight: 600; letter-spacing: 0.05em; line-height: 1.0; color: #0047BA;}
#charapla_top_character { padding: 0 0 100px 0; position: relative; background: #F0F5F7;}
#charapla_top_character::after { content: ''; border-top: 30px solid transparent; border-right: 50vw solid transparent; border-bottom: 30px solid #fff; border-left: 50vw solid #fff; position: absolute; bottom: 0; left: 0; z-index: 1;}
#charapla_top_character .charapla-chara-list { max-width: 1200px; margin: 0 auto; display: flex; flex-wrap: wrap; gap: 27px;}
#charapla_top_character .charapla-chara-list li { width: calc((100% - 54px)/3); margin: 0 auto; border-radius: 30px; display: flex; justify-content: center; align-items: center; overflow: hidden;}
#charapla_top_character .charapla-chara-list li a { display: block; transition: 0.3s;}
#charapla_top_character .charapla-chara-list li a:hover { opacity: 0.7;}
#charapla_top_character .charapla-chara-list li img { vertical-align: top;}
#charapla_top_character .link-more { margin-top: 57px;}

/* PRESENT */
#charapla_top_present { padding: 100px 0; position: relative;}
#charapla_top_present .present-btn { width: 830px; height: 75px; margin: 50px auto 0; position: relative;}
#charapla_top_present .present-btn a { width: 830px; height: 75px; margin: 0 auto; border-radius: 75px; font-size: 18px; font-weight: 600; text-decoration: none; color: #fff; background: #FF0091; display: flex; justify-content: center; align-items: center; transition: 0.3s;}
#charapla_top_present .present-btn a:hover { opacity: 0.7;}
#charapla_top_present .present-btn .chara { width: 124px; vertical-align: bottom; position: absolute; bottom: 0; right: 36px;}

/* SNS */
#charapla_top_sns { padding: 100px 0; position: relative; background: #F0F5F7;}
#charapla_top_sns::before { content: ''; border-top: 30px solid #fff; border-right: 50vw solid #fff; border-bottom: 30px solid transparent; border-left: 50vw solid transparent; position: absolute; top: 0; left: 0; z-index: 1;}
#charapla_top_sns::after { content: ''; border-top: 30px solid transparent; border-right: 50vw solid transparent; border-bottom: 30px solid #fff; border-left: 50vw solid #fff; position: absolute; bottom: 0; left: 0; z-index: 1;}
#charapla_top_sns .charapla-sns-list { max-width: 1200px; margin: 0 auto; display: flex; flex-wrap: wrap; gap: 20px;}
#charapla_top_sns .charapla-sns-list li { width: calc((100% - 60px)/4); margin: 0 auto;}
#charapla_top_sns .charapla-sns-list li a { display: block; text-decoration: none; transition: 0.3s;}
#charapla_top_sns .charapla-sns-list li a:hover { opacity: 0.7;}
#charapla_top_sns .charapla-sns-list figure { width: 100%; border-radius: 30px; margin: 0 0 10px 0; display: flex; justify-content: center; align-items: center; overflow: hidden;}
#charapla_top_sns .charapla-sns-list figure img { width: 100%; vertical-align: top;}
#charapla_top_sns .charapla-sns-list .desc { width: 100%; display: flex; justify-content: center; flex-wrap: nowrap; align-items: center;}
#charapla_top_sns .charapla-sns-list .desc .icon { width: 40px; padding: 0 12px 0 0;}
#charapla_top_sns .charapla-sns-list .desc .name { max-width: calc(100% - 40px); font-size: 18px; font-weight: 600; line-height: 1.2; color: #0047BA;}

/* NEWS */
#charapla_top_news { padding: 100px 0; position: relative;}
#charapla_top_news_tab { margin: 0 0 40px 0; display: flex; justify-content: space-between;}
#charapla_top_news_tab li { width: 120px; height: 120px; border-radius: 20px; display: flex; justify-content: center; align-items: center; background: #F0F5F7; color: #0047BA; transition: 0.3s; cursor: pointer; overflow: hidden;}
#charapla_top_news_tab li.all { font-family: "roc-grotesk", sans-serif; font-size: 32px; font-weight: 800;}
#charapla_top_news_tab li.active { background: #0047BA; color: #fff;}
#charapla_top_news_list { display: flex; flex-wrap: wrap; gap: 20px;}
#charapla_top_news_list li { width: calc((100% - 60px)/ 4); margin: 0 0 15px 0;}
#charapla_top_news_list li a { text-decoration: none;}
#charapla_top_news_list li .image { width: 100%; padding: 75% 0 0 0; margin: 0 0 10px 0; position: relative; transition: 0.3s;}
#charapla_top_news_list li .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_top_news_list li .image img  { vertical-align: top;}
#charapla_top_news_list li a:hover .image { opacity: 0.7;}
#charapla_top_news_list li .desc { display: flex; justify-content: space-between; align-items: center;}
#charapla_top_news_list li .desc .block-icon { width: 60px; height: 60px; border-radius: 20px; display: flex; justify-content: center; align-items: center; background: #F0F5F7; overflow: hidden;}
#charapla_top_news_list li .desc .block-data { width: calc(100% - 70px);}
#charapla_top_news_list li .desc .block-data .date { margin: 0 0 5px 0; font-size: 14px; color: #0047BA;}
#charapla_top_news_list li .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;}