@charset "UTF-8";

/* --------------------------------
重要なお知らせ
-------------------------------- */
.top_important_news__inner>div{
width:100%;
text-align:left;
padding:5px 10px;
overflow-y: auto;
/*font-family: NotoSansJP-Bold;*/
font-size: 14px;
height:90px;
scroll-behavior: smooth;
scrollbar-color: #55C0CF #e1e1e1;
scrollbar-width: thin;
}

/*SP表示時幅を100%にする必要あり*/

.top_important_news__inner>div::-webkit-scrollbar {
width: 10px;
height: 10px;
}
/* スクロールの背景の設定 */
.top_important_news__inner>div::-webkit-scrollbar-track {
border-radius: 5px;
box-shadow: 0 0 4px #aaa inset;
}

/* スクロールのつまみ部分の設定 */
.top_important_news__inner>div::-webkit-scrollbar-thumb {
border-radius: 5px;
background: #55C0CF;
}

.top_important_news__inner dl{
padding:3px;
}

.top_important_news__inner dt{
float: left;
text-align: left;
letter-spacing: 0px;
color: #582488;
opacity: 1;
}
.top_important_news__inner dd{
margin-left: 120px;
}
.top_important_news__inner dd>a{
text-decoration: none;
}

/* --------------------------------
カテゴリ別トピックス一覧
-------------------------------- */
#wrapper main ul.top_lists>li.top_list>p.top_list_cat {
margin: 2px 0px 16px 0;
text-align: left;
font-family: 'NotoSansJP-Regular', sans-serif;
}

/*カテゴリラベルベース*/
#wrapper main ul.top_lists>li.top_list>div.cat_link>p.top_list_cat>a,
#wrapper main ul.lists>li.list>div.cat_link>p>a,
.single_date-cat p a{
background: #683399 0% 0% no-repeat padding-box;
border-radius: 3px;
opacity: 1;
color:#ffffff !important;
text-decoration: none;
padding: 0px 10px;
}

#wrapper main ul.top_lists>li.top_list>a>p.top_list_title{
margin:2px 0px;
text-align: left;
letter-spacing: 0px;
color: #101010;
opacity: 1;
font-family: 'NotoSansJP-Regular', sans-serif;
font-size: 18px;
word-wrap: break-word;

}
#wrapper main ul.top_lists>li.top_list>a{
text-decoration: none;
color: #101010;
font-family: 'NotoSansJP-Regular', sans-serif;
word-wrap: break-word;

}
#wrapper main ul.top_lists>li.top_list>a>p.top_list_post_date {
margin:2px 0px 2px 2px;
text-align: right;
letter-spacing: 0px;
color: #7F7F7F;
opacity: 1;
}
#wrapper main ul.top_lists>li.top_list>a>p.top_list_excerpt {
margin:2px 0px;
text-align: left;
letter-spacing: 0px;
color: #101010;
opacity: 1;
font-family: 'NotoSansJP-Regular', sans-serif;
word-wrap: break-word;
}

#wrapper main div.btnWrap>a.cat_btn {
position: relative;
border: 1px solid #582488;
border-radius: 15px;
opacity: 1;
color: #582488;
text-decoration: none;
padding: 5px 10px 5px 35px;
margin: 0px 10px 10px 0;
}

#wrapper main div.btnWrap>a.cat_btn::before{
position: absolute;
top: 50%;
content: "";
width: 16px;
height: 8px;
margin-top: -6px;
margin-left: -24px;
background: url("../img/common/cmn_topics_icon_arrow01.png") no-repeat;
}

#wrapper main div.btnWrap {
text-align:right;
display: flex;
flex-wrap: wrap;
justify-content: flex-end;
}

.top_lists{
list-style-type: none;
padding-left: 0;
display: flex;
flex-wrap: wrap;
justify-content: flex-start;
}

.top_lists .top_list{
width: 100%;
padding: 1.0rem;
margin-bottom: 1.0rem;
display: flex;
flex-direction: column;
}
#wrapper main .main_inner ul.top_lists{
margin: 1rem 0 1rem 0rem;
}

.su-tabs-nav{
    /*overflow-x: scroll;*/
    display: -webkit-box;
    display: flex;
    -webkit-box-align: end;
    align-items: flex-end;
    white-space: nowrap;
    overflow-x: auto;
}

.front-page .su-tabs-nav span{
    height: 60px;
    line-height: 36px;
}

@media only screen and (min-width: 769px) {
.top_important_news__inner>div{
width:90%;
}

/*カテゴリラベルベース*/
#wrapper main ul.top_lists>li.top_list>div.cat_link>p.top_list_cat>a,
#wrapper main ul.lists>li.list>div.cat_link>p>a,
.single_date-cat p a{
padding: 1px 10px;
}
/*カテゴリラベルベース*/
#wrapper main ul.top_lists>li.top_list>div.cat_link>p.top_list_cat,
#wrapper main ul.lists>li.list>div.cat_link>p{
margin: 0.3rem 0.3rem 0 0;
}
/*カテゴリラベルエリア*/
#wrapper main ul.top_lists>li.top_list>div.cat_link {
margin-bottom: 2rem;
padding-bottom: 0.8rem;
border-bottom: solid 1px #c7f5fc;
position: relative;
display: flex;
justify-content: flex-start;
flex-wrap: wrap;
}
#wrapper main ul.top_lists>li.top_list>p.top_list_cat {
margin:2px 0px;
}
.top_lists .top_list{
width: 50%;
}
/*一覧の時のカテゴリラベルエリア*/
#wrapper main ul.lists > li.list > div.cat_link {
margin: 0.5rem 0 0 0;
padding-bottom: 0;
border-bottom: none;
position: relative;
display: flex;
justify-content: flex-start;
flex-wrap: wrap;
    }
}

@media screen and (min-width: 551px) { 
    #wrapper main div.btnWrap>a.cat_btn {
    padding: 5px 20px 5px 40px;
    margin:0px 10px;
    }
}