@charset "UTF-8";

.topics_block {width:1020px;text-align: left;margin: auto;padding: 100px 0;}
.topics_block ul.topics-list {list-style: none;  padding: 0;  margin: 0;font-family: "M PLUS Rounded 1c", sans-serif;}
.topics_block ul.topics-list li {display: flex;  align-items: center;  gap: 20px;  padding: 0 0 50px;  font-size: 16px;}
.date {font-size: 12px;font-weight: 700;  width: 7em;  flex-shrink: 0;}


.topics_block ul.topics-list li a {text-decoration: underline;color: #000;transition: all 0.5s;}
.topics_block ul.topics-list li a:hover {margin-left: 1vw;}
.label {width: 6em;  padding: 5px 0;  color: #fff;  font-size: 14px;  flex-shrink: 0;  text-align: center;}
.label-green { background: #3ea663; }
.label-red   { background: #e9654a; }
.label-blue  { background: #4179d1; }
.text {width:calc(100% - 206px);  flex-grow: 1;}


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

.topics_block {width:80vw;padding: 9.8vw 0;}
.topics_block ul.topics-list li {  gap: 1.78vw;  padding: 0 0 4.46vw;  font-size:1.42vw;}
.date {font-size: 1.07vw;}
.label {padding: 0.44vw 0;font-size:1.25vw;}

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

.topics_block {}
.topics_block ul.topics-list li {padding: 5vw 0 0;font-size: 3vw;display: inherit;}
.topics_block ul.topics-list li:first-child {padding: 0;}
.date {font-size: 3vw;width: 6em;}
.label {width: 5em;  padding:4px 5px;  color: #fff;  font-size: 2.8vw;}
.text {width:100%;display: block;padding: 2.5% 0 0;}

}


.topics_detail {width:1020px;text-align: left;margin: auto;padding: 100px 0;font-family: "M PLUS Rounded 1c", sans-serif;}
.topics_detail .detail_top {display: flex;  align-items: center;  gap: 20px;  padding: 0 0 20px;}
.topics_detail h2.topics_title {font-size: 24px;line-height: 1.6; margin: 0 0 50px;}
.topics_detail p.text {font-size: 16px;line-height: 1.6;}
@media screen and (max-width: 1120px) {

.topics_detail {width:90vw;padding: 9.8vw 0;}
.topics_detail .detail_top {gap: 1.88vw;  padding: 0 0 1.88vw;}
.topics_detail h2.topics_title {font-size: 2.35vw;margin: 0 0 4.90vw;}
.topics_detail p.text {font-size: 1.5vw;}


}
@media screen and (max-width: 767px) {
.topics_detail h2.topics_title {font-size: 4vw;margin: 0 0 5vw;}
.topics_detail p.text {font-size: 3vw;}

}


ul.photo {display: grid;grid-template-columns: repeat(2, 1fr);gap: 20px;list-style: none;padding: 50px 0 0;margin: 0;}
ul.photo li {}

/* 
ul.photo li img {width: 100%;height: auto;display: block;cursor: pointer;transition: opacity .3s;}
ul.photo li img:hover {opacity: .8;}
*/


ul.photo li .topics_pic {
    aspect-ratio: 4 / 3;
    overflow: hidden;
    border-radius: 16px;

    display: flex;
    justify-content: center;
    align-items: center;
}

ul.photo li .topics_pic img {
    width: auto;
    height: 100%;
    max-width: 100%;
    display: block;
    border-radius: 16px;
}




ul.photo li p.text {font-size: 14px;line-height: 1.6;text-align: left;padding: 10px 0 0;margin: 0;}


@media screen and (max-width: 1120px) {
ul.photo {gap:1.88vw;padding: 4.90vw 0 0;}
ul.photo li p.text {font-size: 1.32vw;padding: 0.94vw 0 0;margin: 0;}

ul.photo li .topics_pic {border-radius: 1.42vw;}
ul.photo li .topics_pic img {border-radius: 1.42vw;}


}


/* スマホ */
@media screen and (max-width: 767px) {
ul.photo {gap: 5vw;}
ul.photo li p.text {font-size: 2.6vw;}
.modal {padding: 5vw;}
.modal img {max-width: 100%;max-height: 70vh;}
.modal .caption {font-size: 3vw;}
.modal .close {top: 10px;right: 15px;font-size: 32px;}

}

.modal_prev,
.modal_next {position: absolute;top: 50%;transform: translateY(-50%);background: rgba(255,255,255,.15);border: none;color: #fff;font-size: 40px;width: 60px;height: 60px;cursor: pointer;transition: .3s;z-index: 9999;}
.modal_prev:hover,
.modal_next:hover {background: rgba(255,255,255,.3);}
.modal_prev {left: 20px;}
.modal_next {right: 20px;}
@media screen and (max-width: 767px){
.modal_prev,
.modal_next{width: 44px;height: 44px;font-size: 28px;}
.modal_prev{left: 10px;}
.modal_next{right: 10px;}

}




/* モーダル */

.modal {
position: fixed;inset: 0;background: rgba(0,0,0,.9);display: flex;justify-content: center;align-items: center;z-index: 9999;padding: 20px;box-sizing: border-box;opacity: 0;visibility: hidden;transition: opacity .4s ease,
visibility .4s ease;}
.modal.active {opacity: 1;visibility: visible;}
.modal_inner {transform: scale(.95);opacity: 0;transition: transform .4s ease,
opacity .4s ease;}
.modal.active .modal_inner {transform: scale(1);opacity: 1;}
.modal img {display: block;max-width: 90vw;max-height: 80vh;width: auto;height: auto;margin: 0 auto;}
.modal .caption {color: #fff;margin-top: 15px;font-size: 14px;line-height: 1.6;}
.modal .close {position: absolute;top: 15px;right: 20px;color: #fff;font-size: 40px;line-height: 1;cursor: pointer;}