@charset "utf-8";

.wrap-notice {padding-right: 6rem;}
.wrap-notice .title-box{display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; padding: 8.9rem 0 2.5rem;}
.wrap-notice .title-left{display: flex; align-items: center; flex-wrap: wrap;}
.wrap-notice .title-left h2{font-size: 5.6rem; color: #161616; font-family: pbl; margin-right: 6rem;}
.wrap-notice .category-list .cate-button{display: none;}
.wrap-notice .category-list ul{display: flex; flex-wrap: wrap;}
.wrap-notice .category-list li button{color: #888888; font-size: 2rem; border-radius: 5rem; padding: .4rem 1.65rem; display: block; border: .2rem solid transparent}
.wrap-notice .category-list li button:hover,
.wrap-notice .category-list li.active button{color: #503992; border: .2rem solid #503992;}
.wrap-notice .title-box .more{width: 2.8rem; height: 2.8rem; background: url(../images/ic-notice-more.png) no-repeat center center / cover; text-indent: -9999rem; transition: transform .35s;}
.wrap-notice .title-box .more:hover{transform: rotate(180deg);}
.wrap-notice > ul > li{display: none;}
.wrap-notice > ul > li.active{display: block;}
.wrap-notice .list ul{display: flex; flex-wrap: wrap; justify-content: space-between; margin: -2.5rem -2.7rem 0 -2.7rem}
.wrap-notice .list li{width: 50%; margin-top: 2.5rem; padding: 0 2.7rem}
.wrap-notice .list li .subject{display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center;}
.wrap-notice .list .date-content{width: 9rem; height: 9rem; border-radius: 1rem; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; flex-direction: column; border: .1rem solid #dedede;}
.wrap-notice .list .date-content h2{font-size: 3.8rem; font-family: peb; color: #222222; line-height: 1;}
.wrap-notice .list .date-content p{font-size: 1.4rem; font-family: psb; color: #a5a5a5;}
.wrap-notice .list .con{width: calc(100% - 9rem); padding-left: 2rem;}
.wrap-notice .list .recent-title{display: flex; flex-wrap: wrap;}
.wrap-notice .list .recent-title .recent-category{width: 8rem; height: 3.5rem; border-radius: .5rem; text-align: center; display: flex; flex-wrap: wrap; justify-content: center; align-items :center; font-size: 1.6rem; font-family: pm; border-radius: .5rem;}

.wrap-notice .list .recent-title .recent-category.color0{border: .1rem solid #111111; color: #111111;}
.wrap-notice .list .recent-title .recent-category.color1{border: .1rem solid #1d398d; color: #1d398d;}
.wrap-notice .list .recent-title .recent-category.color2{border: .1rem solid #02a3da; color: #02a3da;}
.wrap-notice .list .recent-title .recent-category.color3{border: .1rem solid #854dbf; color: #854dbf;}
.wrap-notice .list .recent-title .recent-category.color4{border: .1rem solid #008000; color: #008000;}
.wrap-notice .list .recent-title .recent-category.color5{border: .1rem solid #404000; color: #404000;}
.wrap-notice .list .recent-title .recent-category.color6{border: .1rem solid #e85f9f; color: #e85f9f;}
.wrap-notice .list .recent-title .recent-category.color7{border: .1rem solid #ee8888; color: #ee8888;}

.wrap-notice .list .recent-title .recent-title-text{font-size: 2.2rem; color: #222222; font-family: pm; overflow: hidden; display: -webkit-box; text-overflow: ellipsis; -webkit-box-orient: vertical; -webkit-line-clamp: 1; width: calc(100% - 8.5rem); padding-left: 2rem; word-break: break-all;}
.wrap-notice .list .recent-title .recent-title-text.topnotice{padding-left: 5rem; background: url(../images/ic-top-notice.png) no-repeat left 2rem top .5rem;}
.wrap-notice .list .recent-title .recent-title-text span{background-image: linear-gradient(#222222, #222222); background-repeat: no-repeat; background-position: left 0 bottom 0; background-size: 0 2px; transition: background-size .5s;}
.wrap-notice .list .recent-content{font-family: pl; font-size: 1.8rem; color: #666666; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1; overflow: hidden; text-overflow: ellipsis; margin-top: 1rem; word-break: break-all;}
.wrap-notice .list .recent-content span{background-image: linear-gradient(#666666, #666666); background-repeat: no-repeat; background-position: left 0 bottom 0; background-size: 0 1px; transition: background-size .5s;}

.wrap-notice .list li .subject:hover .date-content{border: .1rem solid transparent; background-color: #503992;}
.wrap-notice .list li .subject:hover .date-content h2{color: white;}
.wrap-notice .list li .subject:hover .date-content p{color: white;}
.wrap-notice .list li .subject:hover .recent-title-text span{background-size: 100% .2rem;}
.wrap-notice .list li .subject:hover .recent-content span{background-size: 100% .1rem;}


.wrap-notice .list .recent-title .recent-title-text.recent-title-I{width: 100%; padding-left: 0;}

@media screen and (max-width: 1470px) {
    .wrap-notice .title-left h2{font-size: 5.6rem; margin-right: 4rem;}
}

@media screen and (max-width: 1200px) {
    .wrap-notice{padding-right: 4rem;}
    .wrap-notice .title-box{padding: 4.5rem 0 2rem;}
    .wrap-notice .category-list{position: relative;}
    .wrap-notice .category-list .cate-button{display: block; font-size: 1.6rem; font-family: psb; color: #503992; border: .2rem solid #503992; border-radius: 1.8rem; padding: .5rem 3.9rem .5rem 2rem; position: relative; z-index: 2; background-color: white;}
    .wrap-notice .category-list .cate-button::after{content:""; display: block; position: absolute; right: 1.7rem; top: 50%; margin-top: -.4rem; width: 1.1rem; height: .8rem; background: url(../images/ic-cate-arrow.png) no-repeat center center / cover; transition: all .35s;}
    .wrap-notice .category-list .cate-button.active::after{transform: rotate(180deg);}
    .wrap-notice .category-list ul{position: absolute; left: 0; top: 2rem; width: 100%; display: block; background-color: #eeecf2; padding-top: 3rem; display: none;}
    .wrap-notice .category-list ul.active{display: block;}
    .wrap-notice .category-list li button{border-radius: 0; padding: 0; display: block; text-align: center; padding: .5rem 0; font-size: 1.4rem; width: 100%; display: block; text-align: center;}
    .wrap-notice .category-list li.active button{color: white; background-color: #503992; border: 0;}
    .wrap-notice .list .date-content{width: 8rem;}
    .wrap-notice .list li{width: 100%; display: none;}
    .wrap-notice .list li:nth-child(-n+4){display: block;}
    .wrap-notice .list .con{width: calc(100% - 8rem);}
}

@media screen and (max-width: 768px) {
    .wrap-notice{padding-right: 0;}
    .wrap-notice .title-box{padding: 3rem 0 1rem;}
    .wrap-notice .title-left h2{font-size: 4.6rem;}
	.wrap-notice .list .recent-title .recent-title-text{-webkit-line-clamp: 2;}
	.wrap-notice .list .recent-content{display: none;}
}