@charset "UTF-8";
main::before {
    content: "TOPICS";
    font-family: "Raleway", sans-serif;
    font-weight: 700;
    font-size: 30vw;
    position: absolute;
    opacity: 0.1;
    color: #999999;
    z-index: -1;
    top: 0;
    left: -3vw;
    line-height: 70%;
    transition: all ease 800ms;
    transform: translateX(103vw);
}
main.moved::before {
    transform: translateX(0);
}
.page_ttl {
    font-size: min(6vw, 34px);
}
.txt{
    font-size: min(3.5vw,17px);
    line-height: min(7.5vw, 210%);
    letter-spacing: min(0.2vw, 1px);
}
.page_head {
    padding-top: min(3vw, 20px);
}
.head_img_wrap{
    width: 85%;
    margin: 0 auto min(13vw, 115px);
    transition: all ease 200ms;
    clip-path: polygon(50% 0, 50% 0, 50% 100%, 50% 100%);
}

.page_main {
    width: calc(100% - 280px);
    margin-bottom: min(20vw, 160px);
}
.page-content {
    width: min(90vw, 1200px);
    margin: 0 auto;
    display: flex;
}
.category_ttl {
    font-size: min(5vw,24px);
    line-height: 100%;
    padding-bottom: min(6vw,34px);
    font-weight: 500;
}
.works_list {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
}
.works_item {
    width: calc(100% / 3 - 10px);
    padding-top: min(1vw, 7px);
    margin: 0 5px min(10vw, 50px);
}
.works_item .get_date {
    line-height: 100%;
    margin-bottom: min(3vw, 16px);
}
.works_item .thumb {
    aspect-ratio: 4 / 3;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    background: #efefef;
}
.works_item .ttl {
    font-size: min(4vw, 18px);
    font-weight: 600;
    line-height: 1.4;
    margin: min(2vw, 10px) 0;
}
.works_link::before{
    content: "";
    display: block;
    width: 100%;
    height: min(1vw, 7px);
    margin-bottom: min(3vw, 20px);
    background: url(../img/topics/list_head_deco.png) repeat-x top / auto 100%;
}
.works_tag {
    line-height: 100%;
    font-size: min(3vw, 15px);
    color: #fff;
    background: #b3b3b3;
    padding: min(0.7vw, 5px) min(0.7vw, 6px);
    margin: 0 min(0.7vw, 4px) min(0.7vw, 4px) 0;
    display: inline-block;
}
.page_works .address {
    color: #808080;
    font-size: min(3vw, 15px);
    line-height: min(7vw, 120%);
    margin-top: 3px;
}
.more_txt {
    color: #666;
    margin-top: min(0.8vw, 8px);
    font-size: min(3.5vw, 17px);
    position: relative;
    text-align: right;
    padding-right: 1em;
    letter-spacing: min(2vw, 1.5px);
    transition: all ease 300ms;
}
.more_txt::after {
    content: "\02192";
    margin-left: 10px;
}
.works_link .thumb img{
    transition: all ease 300ms;
}
.works_link:hover .thumb img{
    transform: scale(1.05);
}

/*====================================
サイドメニュー
====================================*/
.side_menu {
    width: 280px;
    min-width: 280px;
    padding-left: 85px;
    margin-bottom: min(20vw, 160px);
}
.side_menu_ttl {
    font-size: min(7vw, 30px);
    font-weight: 600;
    letter-spacing: min(0.5vw, 2px);
    margin-bottom: min(4vw, 30px);
}
.side_cat_list li {
    border-bottom: 1px solid;
}
.side_cat_list li:last-child{
    border-bottom: none;
}
.side_cat_list a {
    display: flex;
    width: 100%;
    padding: 0.8em 0;
    font-size: 93.75%;
    justify-content: space-between;
}
.side_cat_list a::after {
    content: "\02192";
    display: block;
    width: 22px;
    height: 8px;
}
/*====================================
ページネーション
====================================*/
.screen-reader-text {
    display: none;
}
.navigation.pagination {
    background: #f6f6f6;
    margin-top: min(4vw, 30px);
    padding: min(4vw,20px) 5%;
}
.nav-links {
    display: flex;
    justify-content: center;
    text-align: center;
}
.nav-links .page-numbers{
    color: #0178f9;
    border:2px solid #0178f9;
    background: #fff;
    font-size: min(5vw, 24px);
    width: 30px;
    height: 30px;
    display: flex;
    justify-content: center;
    align-items: center;
    line-height: 100%;
    margin: 2px;
}
.nav-links .page-numbers.current{
    background: #0178f9;
    color: #fff;
}
.nav-links .page-numbers.next,
.nav-links .page-numbers.prev{
    display: none;
}
/*====================================
一覧ページ
====================================*/
.site-archive .page_ttl_wrap {
    width: min(90vw, 1200px);
}
.page_content {
    width: min(90vw, 1200px);
    margin: 0 auto;
    display: flex;
}
/*====================================
詳細ページ
====================================*/
#breadcrumb {
    width: min(90vw, 1280px);
}
.single_content {
    padding-top: min(10vw, 80px);
}
.time {
    line-height: 150%;
}
.news_content {
    width: calc(100% - 280px);
    margin-bottom: min(20vw, 160px);
}
.single_sub_wrap {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    border-bottom: 1px solid;
    padding-bottom: min(3vw, 25px);
    margin-bottom: min(7vw, 50px);
}
.single .cat_list {
    display: flex;
    margin-top: 10px;
}
.single .side_cat {
    color: #fff;
    line-height: 100%;
    background: #b3b3b3;
    padding: 4px;
    font-size: 93.75%;
    margin-right: 5px;
}
.snsicon_list {
    display: flex;
    margin-top: 10px;
    margin-left: auto;
}
.snsicon_list li {
    width: 33px;
    margin-left: 7px;
}
.single_ttl {
    font-size: min(6vw, 30px);
    line-height: 140%;
    margin-top: min(3vw, 20px);
    margin-bottom: min(3vw, 20px);
    font-weight: 600;
    letter-spacing: min(0.3vw, 2px);
}

.date_wrap {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    line-height: 100%;
    font-size: min(3vw, 15px);
    margin-bottom: min(6vw, 50px);
    letter-spacing: min(0.2vw, 0.5px);
}
.single_date {
    margin-right: min(3vw, 15px);
    letter-spacing: min(0.2vw, 1px);
}
.works_single_content {
    margin-bottom: min(10vw, 130px);
}
.main_img {
    margin-bottom: min(10vw, 40px);
}

.news_contents {
    margin-bottom: min(8vw, 60px);
}
.news_contents h2 {
    font-size: min(5vw, 24px);
    line-height: 140%;
    padding-bottom: min(1.5vw, 10px);
    margin-bottom: min(3vw, 20px);
    font-weight: 600;
    letter-spacing: min(0.2vw, 2px);
    border-bottom: 1px solid;
}
.news_contents h3 {
    font-size: min(4.5vw, 20px);
    line-height: 140%;
    padding-bottom: min(1.5vw, 10px);
    margin-bottom: min(3vw, 20px);
    font-weight: 600;
    letter-spacing: min(0.2vw, 1px);
    border-bottom: 1px solid;
    color: #0178f9;
    border-left: min(2vw, 10px) solid;
    padding-left: min(3.5vw, 15px);
}
.news_contents h4 {
    font-size: min(4vw, 19px);
    line-height: 140%;
    margin-bottom: min(3vw, 20px);
    font-weight: 600;
    letter-spacing: min(0.2vw, 1px);
    color: #fff;
    padding: min(2vw, 8px) min(3vw, 14px);
    background: #999;
}
.news_contents h5 {
    font-size: min(4vw, 18px);
    line-height: 140%;
    margin-bottom: min(2vw, 10px);
    font-weight: 600;
    letter-spacing: min(0.2vw, 1px);
    color: #0178f9;
}
.news_contents h6 {
    font-size: min(4vw, 17px);
    line-height: 140%;
    margin-bottom: min(2vw, 10px);
    font-weight: 600;
    letter-spacing: min(0.2vw, 1px);
    border-bottom: 1px solid;
    padding-bottom: min(1vw, 5px);
}
.news_contents > p {
    font-size: min(3.5vw, 16px);
    line-height: min(8vw, 190%);
    margin-bottom: min(3vw, 15px);
}
.news_contents > p + :not(p){
    margin-top: min(10vw, 40px);
}

.works_detail {
    margin-top: min(8vw, 60px);
}
.detail_ttl {
    font-size: min(5vw, 24px);
    font-weight: 500;
    padding-bottom: min(2vw, 10px);
    border-bottom: 1px solid;
    margin-bottom: min(4vw, 20px);
    letter-spacing: 1px;
}
.detail_content_wrap {
    font-size: min(3.5vw, 16px);
    line-height: min(7.5vw, 180%);
}

.other_works_ttl{
    font-size: min(5vw, 24px);
    font-weight: 500;
    margin-bottom: min(6vw, 40px);   
}
.btn_pager_wrap {
    display: flex;
    justify-content: space-between;
    margin-bottom: min(15vw, 80px);
}
.pager_btn {
    display: flex;
    align-items: center;
    flex: 1;
    justify-content: center;
    color: #666666;
    text-decoration: underline;
}
.prev_btn {
    justify-content: flex-start;
}
.prev_arw {
    transform: rotateY(180deg);
    margin-right: 5px;
}
.next_btn {
    justify-content: flex-end;
}
.next_arw{
    margin-left: 5px;    
}
.btn_list {
    margin: 0 1em;
}
.pager_arw {
    -webkit-filter: brightness(0.8);
    filter: brightness(0.6);
    width: 22px;
    max-width: 22px;
    display: flex;
    align-items: center;
}
@media screen and (max-width: 860px) {
.page_content {
    flex-wrap: wrap;
}
.side_menu,
.news_content {
    width: 100%;
    padding-left: 0;
}
.works_item {
    width: calc(100% / 2 - 10px);
}
}