@charset "UTF-8";

/*-------------------------
__topics_listbox
-------------------------*/

.topics_list{ width: 100%; max-width: 1000px; margin: auto; border-top: 1px solid var(--base_navy);}
.topics_list a,
.topics_list span{ padding: 44px 20px; color: rgb(51, 51, 51); background: transparent; position: relative;z-index: 1; transition: .5s; display: block;}
.topics_list a::before { content: ""; width: 100%; height: 100%; position: absolute; top: 0; left: 0; z-index: -1; background: #e0ecf8; transform-origin: 100% 50%; transform: scaleX(0);transition: transform ease .5s;}
.topics_list a:hover {}
.topics_list a:hover::before { transform-origin: 0% 50%; transform: scaleX(1);}
.topics_list ul.list {display:flex;flex-wrap:wrap;}
.topics_list ul.list li {font-size: 1.6em;line-height: 1.6;font-weight: 700;width: 100%;arrow position: relative;padding:0;border-bottom: 1px solid var(--base_navy);}
.topics_list ul.list li .arrow{ position: absolute;top: 50%; right: 20px; transform: translateY(-50%); -webkit- transform: translateY(-50%); display: inline-block; width: 17px; height: 2px; margin:0; border-radius: 9999px;background-color: rgb(51, 51, 51);}
.topics_list ul.list li .arrow::before,
.topics_list ul.list li .arrow::after { content: ""; position: absolute; top: calc(50% - 1px); right: 0; width: 10px; height: 2px; border-radius: 9999px; background-color: rgb(51, 51, 51)!important; transform-origin: calc(100% - 1px) 50%;}
.topics_list ul.list li .arrow::before{transform: rotate(45deg);}
.topics_list ul.list li .arrow::after{transform: rotate(-45deg);}
.topics_list ul.list li p {display: inline-block;vertical-align: top;}
.topics_list ul.list li p.date {color: #969699; width: 8em;}
.topics_list ul.list li p.title {color: var(--base_navy); width:calc(100% - 11em);}
.topics_list ul.list li span .arrow{ display: none!important;}
.topics_list ul.list li span p.title{ width: calc(100% - 9em)!important;}
/*
ul.list_detail li {padding-bottom: 34px!important;padding-top: 34px!important;}
.topics_list ul.list li:first-child { color: #969699; width: 8em; }
.topics_list ul.list li:last-child {color: var(--base_navy); width:calc(100% - 11em);padding-right: 3em; }
*/

@media screen and (max-width:999px){
.topics_list a,
.topics_list span{ padding: 3.43vw 0;}
.topics_list a::before { background: initial;}
.topics_list a:hover{}
.topics_list a:hover::before { transform-origin: initial; transform: initial;}
.topics_list ul.list li {font-size: 1.4em;}
.topics_list ul.list li p.date {width: 8em;}
.topics_list ul.list li p.title {width:calc(100% - 11em);}
.topics_list ul.list li .arrow{ right: 0;}
}

@media screen and (max-width: 767px) {
.topics_list ul.list li{ font-size: 1.3em;}
.topics_list ul.list li p.date{ width: 100%;}
.topics_list ul.list li p.title{ width: calc(100% - 20px); color: var(--base_navy);}
/*
.topics_list ul.list li {font-size: 3vw;width: 100%!important;padding:0 0 5vw;position: inherit;}
.topics_list ul.list li:first-child {font-size: 2.8vw;width: 100%;padding: 5vw 0 0;border: none;}
ul.list_detail li {padding-bottom: 5vw!important;padding-top:0!important;}
ul.list_detail li:first-child {padding-bottom: 0!important;padding-top:5vw!important;}
*/
}

/*-------------------------
__topics_detail
-------------------------*/

.topics_detail{ width: 100%; max-width: 1000px; margin: auto;}
.topics_detail p.date{ font-size: 1.5em;line-height: 1.6;font-weight: 700;color: #969699;margin: 0 0 20px;}
.topics_detail h1.detail_title{ font-size: 3em;line-height: 1.6;font-weight: 700;margin: 0 0 70px;}
.topics_detail .text{ margin: 0 0 40px;}
.topics_detail .text > p:not(:last-child),
.topics_detail .text > div:not(:last-child){margin: 0 0 2em!important;}
.topics_detail .text > p a{color:var(--base_navy);text-decoration:underline;}
@media screen and (min-width: 768px) {
  .topics_detail .text > p a:hover{text-decoration:none;}
}
.topics_detail .text > p strong{font-weight:700;}
.topics_detail .text > p em{font-style:italic;}
.topics_detail .text p{ font-size: 1.6em; line-height: 1.8em;}
.topics_detail .text p img{ display: inline-block; margin-bottom: 20px;}
.topics_detail .text h2{ font-size: 2.4em; font-weight: bold; color: var(--main_blue); margin: 30px 0 20px;}
.topics_detail .text h3{ font-size: 2.1em; font-weight: bold; border-bottom: 2px solid var(--base_navy); margin: 30px 0 20px; padding-bottom: 5px; box-sizing: border-box;}
.topics_detail .text h4{ font-size: 1.8em; font-weight: bold; margin: 20px 0 10px;}
.topics_detail .text h5,
.topics_detail .text h6{ font-size: 1.6em; font-weight: bold; margin: 20px 0 10px;}
.topics_detail .back { text-align: center;padding: 40px 0 90px;}
.topics_detail .back a { color: var(--base_navy); font-size: 1.6em; font-weight: bold; background: transparent; padding: 28px 40px; border: 1px solid var(--base_navy); position: relative; z-index: 1; transition: .3s; display: inline-block;}
.topics_detail .back a::before{ content: ""; width: 100%; height: 100%; position: absolute; top: 0; left: 0; z-index: -1; background: var(--base_navy); transform-origin: 100% 50%; transform: scaleX(0); transition: transform ease .3s;}
.topics_detail .back a:hover{ color: #fff;}
.topics_detail .back a:hover::before{ transform-origin: 0% 50%; transform: scaleX(1);}

@media screen and (max-width:999px){
.topics_detail p.date{margin: 0 0 1.56vw;}
.topics_detail h1.detail_title{margin: 0 0 5.46vw;}
.topics_detail .text{margin: 0 0 3.12vw;}
.topics_detail .back {text-align: center;padding: 3.125vw 0 7.03vw;}
.topics_detail .back a {padding: 2.18vw 3.12vw;}
.topics_detail .back a:hover { color:initial;}
.topics_detail .back a:hover::before { transform-origin: initial; background:initial; color: initial; transform: scaleX(1);}
}

@media screen and (max-width: 767px) {
.topics_detail p.date{font-size: 1.4em; margin: 0 0 2.5vw;}
.topics_detail h1.detail_title{font-size: 1.8em; margin: 0 0 5vw;}
.topics_detail .text p{ margin-bottom: 10px; font-size: 1.4em;}
.topics_detail .text p img{ margin-bottom: 10px;}
.topics_detail .text h2{ font-size: 2.1em; margin: 20px 0 10px;}
.topics_detail .text h3{ font-size: 1.8em; margin: 20px 0 10px;}
.topics_detail .text h4{ font-size: 1.6em; margin: 10px 0 5px;}
.topics_detail .text h5,
.topics_detail .text h6{ font-size: 1.4em; margin: 10px 0 5px;}
.topics_detail .back {text-align: center;padding: 5vw 0 10vw;}
.topics_detail .back a {font-size:3vw;padding: 4vw 5vw;}
}



.list_title{ width: 100%; max-width: 1000px;margin: auto; margin-bottom: 40px;}
.list_title span{ font-size: 2em;font-weight: 700; color: var(--main_blue); display: inline-block; padding-left: 25px; position: relative;}
.list_title span:before{ content: ''; display: block; width: 17px; height: 17px; border-radius: 50vh; background-color: var(--main_blue); position: absolute; top: 2px; left: 0;}
.list_title span:after{ content: ''; display: block; width: 5px; height: 5px; border-radius: 50vh; background-color: #fff; position: absolute; top: 8px; left: 6px;}

@media screen and (max-width:999px){
.list_title{ width: 78.12vw;margin-bottom: 2.34vw;}
.list_title span{ font-size: 1.8em;}
}

@media screen and (max-width: 767px) {
.list_title{width: 100%; margin-bottom: 5vw;}
.list_title span{ font-size: 1.5em; padding-left: 15px;}
.list_title span:before{ width: 13px; height: 13px; top: 2px; left: 0;}
.list_title span:after{ width: 3px; height: 3px; top: 7px; left: 5px;}
}



.navi {text-align: center;width: 100%;padding: 90px 0 0;}
.pagination {}
.page-numbers {font-size: 1.4em;font-weight: 700; line-height: 40px; width: 40px;height: 40px;background: #fff;display: inline-block;margin: 0 4px;vertical-align: top;}
a.page-numbers {color: var(--base_navy);background: #e6e6e6; text-decoration: none;border-radius: 50vh;}
a.page-numbers:hover {background: var(--base_navy);color: #e6e6e6;}
.current {background: var(--base_navy);color: #fff;border-radius: 50vh;}
.prev,
.next {background: #fff!important;position: relative;}
.prev:hover,
.next:hover {background: #fff!important;}

@media screen and (max-width:999px){
.navi {padding: 7.03vw 0 0;}
.page-numbers {font-size: 1.09vw;line-height: 3.33vw; width:3.33vw;height: 3.33vw;}
}

@media screen and (max-width: 767px) {
.navi {padding: 7vw 0 0;}
.page-numbers {font-size: 1.2em;line-height: 8vw; width:8vw;height:8vw;}
a.page-numbers:hover {background: initial;color: initial;}
a.page-numbers:hover {background: initial;color: initial;}
}



.arrow_next{position: absolute; top: 50%; left: 50%; transform: translateY(-50%) translateX(-50%); -webkit- transform: translateY(-50%) translateX(-50%); display: inline-block; width: 17px; height: 2px; margin:0; border-radius: 9999px;background-color: rgb(51, 51, 51);}
.arrow_next::before,
.arrow_next::after { content: ""; position: absolute; top: calc(50% - 1px); right: 0; width: 10px; height: 2px; border-radius: 9999px; background-color: rgb(51, 51, 51)!important; transform-origin: calc(100% - 1px) 50%;}
.arrow_next::before{transform: rotate(45deg);}
.arrow_next::after{transform: rotate(-45deg);}
.next {transition: .2s;}
.next:hover{transform: translateX(10px);}
.arrow_prev{position: absolute; top: 50%; left: 50%; transform: translateY(-50%) translateX(-50%);
-webkit- transform: translateY(-50%) translateX(-50%); display: inline-block; width: 17px; height: 2px; margin:0; border-radius: 9999px;background-color: rgb(51, 51, 51);}
.arrow_prev::before{ content: ""; position: absolute; top: calc(50% - 2px); left: 0; width: 10px; height: 2px; border-radius: 9999px; background-color: rgb(51, 51, 51)!important; transform-origin: calc(2% - 1px) 50%;}
.arrow_prev::after { content: ""; position: absolute; top: calc(50% - 0px); left: 0; width: 10px; height: 2px; border-radius: 9999px; background-color: rgb(51, 51, 51)!important; transform-origin: calc(2% - 1px) 50%;}
.arrow_prev::before{transform: rotate(45deg);}
.arrow_prev::after{transform: rotate(-45deg);}
.prev {transition: .2s;}
.prev:hover{transform: translateX(-10px);}

@media screen and (max-width:999px){
.next:hover{transform: initial;}
.prev:hover{transform: initial;}
}

@media screen and (max-width: 767px) {
}