@charset "UTF-8";

/*````````````````````````````````````````*/
@media only screen and (min-width: 769px) {
/*````````````````````````````````````````*/

/*================*/
section.pagetitle {
}
section.pagetitle>.inner {
}
/*----*/
section.pagetitle .area-ttl{
padding: 110px 0 100px 0;
}
section.pagetitle .sectioning-title h2 span.main{
width: 288px;
aspect-ratio: 288/83;
line-height: 1;
}
section.pagetitle .sectioning-title h2 span.main b{
background-image: url(/topics/img/char_title_search.svg);
}

/*================*/
.topics-search{
padding: 75px 0 0 0;
display: -webkit-flex;
display: -moz-flex;
display: -ms-flex;
display: -o-flex;
display: flex;
}
.topics-search .search-ttl{
display: flex;
justify-content: center;
align-items: center;
width: 90px;
}
.topics-search .search-ttl p{
width: 100%;
font-size: 19px;
font-weight: 500;
letter-spacing: 0.08em;
}
.topics-search .search-ttl p::before{
  content: " ";
  display: inline-block;
  width: 30px;
  height: 20px;
  background-image: url(/topics/img/search_icon.svg);
  background-size: contain;
}
.topics-search .search-box{
position: relative;
}
.topics-search .search-box::before {
content: "";
width: 8px;
height: 8px;
border-top: solid 1px #000;
border-right: solid 1px #000;
position: absolute;
top: 38%;
right: 25px;
transform: rotate(135deg);
pointer-events: none;
}
.topics-search .search-box select{
width: 260px;
height: 44px;
padding-left: 25px;
font-size: 16px;
font-weight: 400;
letter-spacing: 0.05em;
border-radius: 3px;
border: 1px solid #979797;
}
.topics-search .search-box select disabled{
color:#848484;
}

.topics-ttl{
margin:73px 0 0 0;
padding-bottom: 6px;
border-bottom: 2px solid #00833E;
}

.topics-ttl .main{
color: #00833E;
font-family: Roboto;
font-size: 41px;
font-weight: 700;
line-height: 48.05px;
letter-spacing: 0.08em;
}



/*----*/
section.topics .topics-body {
display: flex;
justify-content: start;
flex-wrap: wrap;
align-items: stretch;
gap: 54px 50px;
padding: 48px 0 90px 0;
}

section.topics .topics-body .each {
width: 300px;
border-bottom:1px solid #8C8C8C;
}

section.topics .topics-body .each .skin {
position: relative;
width: 100%;
height: 100%;
padding:0 0 21px 0;
}
section.topics .topics-body .each .topics-photo{
width: 100%;
aspect-ratio: 600/376;
overflow: hidden;
border-radius: 10px;
background-color: rgba(40,40,40,1);
}
section.topics .topics-body .each .topics-photo figure{
background-position: 50% 50%;
background-size: contain;
}
section.topics .topics-body .each .topics-date {
padding:25px 0 0 0;
}
section.topics .topics-body .each .topics-date .date {
vertical-align: top;
line-height: 1;
font-size: 16px;
font-weight: 700;
white-space: nowrap;
color: #8C8C8C;
}
section.topics .topics-body .each .topics-detail{
margin-top: 10px;
}

section.topics .topics-body .each .topics-detail a{
}
section.topics .topics-body .each .topics-detail .txt{
font-size:20px;
line-height: 1.6;
letter-spacing: 0.03em;
vertical-align: text-top;
}
section.topics .topics-body .each .topics-detail .txt span{
color: #000;
}
section.topics .topics-body .each .topics-detail a:hover .txt span {
color: #00833e;
text-decoration: underline;
}
section.topics .topics-body .each .topics-detail .txt i{
display: none;
vertical-align: bottom;
width: 30px;
aspect-ratio: 1/1;
background-repeat: no-repeat;
background-position: 0 0;
background-size: 100% auto;
margin: 0 0 0 5px;
}
section.topics .topics-body .each .topics-detail .txt i.external{
background-image: url(/common/img/ico_externallink_01.svg);
}
section.topics .topics-body .each .topics-detail .txt i.pdf{
background-image: url(/common/img/ico_pdflink_01.svg);
}
section.topics .topics-body .each[data-topictype="2"] .topics-detail .txt i.external{
display: inline-block;
}
section.topics .topics-body .each[data-topictype="3"] .topics-detail .txt i.pdf{
display: inline-block;
}
/*--area-jump--*/
section.topics .area-jump{
margin-bottom:120px;
}
section.topics .area-jump .box-pager{
}
section.topics .area-jump .box-pager .jump{
display: flex;
justify-content: center;
flex-wrap: nowrap;
align-items: stretch;
gap:0 10px;
}
section.topics .area-jump .box-pager .jump .char{
position: relative;
width: 50px;
height: 50px;
line-height: 50px;
text-align: center;
border-radius: 50px;
font-size: 26px;
font-weight: 700;
color: var(--color-01);
font-family: "Roboto", sans-serif;
}
section.topics .area-jump .box-pager .jump .char.num.curr{
color: rgba(255,255,255,1);
background-color: var(--color-01);
}
section.topics .area-jump .box-pager .jump .char.num:hover{
color: rgba(255,255,255,1);
background-color: var(--color-01);
}
section.topics .area-jump .box-pager .jump .char.shift{
font-size: 0;
opacity: 1;
}
section.topics .area-jump .box-pager .jump .char.shift:hover{
opacity: 0.5;
}
section.topics .area-jump .box-pager .jump .char.shift.prev{
margin: 0 15px 0 0;
}
section.topics .area-jump .box-pager .jump .char.shift.next{
margin: 0 0 0 15px;
}
section.topics .area-jump .box-pager .jump .char.shift::after{
content: "";
position: absolute;
top: 0;
height: 100%;
aspect-ratio: 18/50;
background-repeat: no-repeat;
background-position: 0 50%;
background-size: 100% auto;
}
section.topics .area-jump .box-pager .jump .char.shift.prev::after{
left: 15px;
background-image: url(/topics/img/arrow-left.svg);
}
section.topics .area-jump .box-pager .jump .char.shift.next::after{
right: 15px;
background-image: url(/topics/img/arrow-right.svg);
}

section.topics .box-empty-message {
  padding: 100px 0 300px 0;
}

/*````````````````````````````````````````*/
} @media only screen and (max-width: 768px) {
/*````````````````````````````````````````*/

/*================*/
section.pagetitle {
}
section.pagetitle>.inner {
}
/*----*/
section.pagetitle .area-ttl {
padding: 17vw 0 15vw 0;
}
section.pagetitle .sectioning-title h2 span.main{
width:44vw;
aspect-ratio: 288/83;
}
section.pagetitle .sectioning-title h2 span.main b{
background-image: url(/topics/img/char_title_search.svg);
}

/*================*/
.topics-search{
width: 74.6vw;
padding: 11vw 0 0 0;
margin: 0 auto 0 auto;
}
.topics-search .search-ttl{
margin: 0 auto;
}
.topics-search .search-ttl p{
width: 100%;
font-size: 4.26vw;
font-weight: 500;
letter-spacing: 0.08em;
}
.topics-search .search-ttl p::before{
content: " ";
display: inline-block;
width: 7.46vw;
height: 5vw;
background-image: url(/topics/img/search_icon.svg);
background-size: contain;
}
.topics-search .search-box{
position: relative;
}
.topics-search .search-box::before {
content: "";
width: 3vw;
height: 3vw;
border-top: solid 1px #000;
border-right: solid 1px #000;
position: absolute;
top: 38%;
right: 6vw;
transform: rotate(135deg);
pointer-events: none;
}
.topics-search .search-box select{
width: 100%;
height: 13vw;
padding-left: 3vw;
font-size:4.26vw;
font-weight: 400;
letter-spacing: 0.05em;
border-radius: 1vw;
border: 1px solid #979797;
margin-top: 1.2vw;
}
.topics-search .search-box select disabled{
color:#848484;
}

.topics-ttl{
margin: 14vw 0 0 0;
padding-bottom: 2.9vw;
border-bottom: 2px solid #00833E;
}

.topics-ttl .main{
color: #00833E;
font-family: Roboto;
font-size: 9.06vw;
font-weight: 700;
line-height: 1.2;
letter-spacing: 0.08em;
}



/*----*/
section.topics .topics-body {
padding-top: 10vw;
}
section.topics .topics-body .each{
width:100%;
border-bottom:1px solid #8C8C8C;
margin-bottom: 10vw;
}
section.topics .topics-body .each:last-child{
margin-bottom: 0;
}

section.topics .topics-body .each .skin {
position: relative;
width: 100%;
height: 100%;
padding:0 0 6vw 0;
}
section.topics .topics-body .each .topics-photo{
width: 100%;
aspect-ratio: 600/376;
overflow: hidden;
border-radius: 3vw;
background-color: rgba(40,40,40,1);
}
section.topics .topics-body .each .topics-photo figure{
background-position: 50% 50%;
background-size: contain;
}
section.topics .topics-body .each .topics-date{
padding:6vw 0 0 0;
}
section.topics .topics-body .each .topics-date .date {
vertical-align: top;
line-height: 1;
font-size: 4.26vw;
font-weight: 700;
white-space: nowrap;
color: #8C8C8C;
}
section.topics .topics-body .each .topics-detail{
margin-top:2.7vw;
}
section.topics .topics-body .each .topics-detail a{
}
section.topics .topics-body .each .topics-detail .txt{
font-size:5vw;
line-height: 1.6;
letter-spacing: 0.05em;
vertical-align:text-top;
}
section.topics .topics-body .each .topics-detail .txt span{
color: #000;
}
section.topics .topics-body .each .topics-detail .txt i{
display: none;
vertical-align: bottom;
width: 7vw;
aspect-ratio: 1/1;
background-repeat: no-repeat;
background-position: 0 0;
background-size: 100% auto;
margin: 0 0 0 1vw;
}
section.topics .topics-body .each .topics-detail .txt i.external{
background-image: url(/common/img/ico_externallink_01.svg);
}
section.topics .topics-body .each .topics-detail .txt i.pdf{
background-image: url(/common/img/ico_pdflink_01.svg);
}
section.topics .topics-body .each[data-topictype="2"] .topics-detail .txt i.external{
display: inline-block;
}
section.topics .topics-body .each[data-topictype="3"] .topics-detail .char.shift.next i.pdf{
display: inline-block;
}
/*--area-jump--*/
section.topics .area-jump{
margin:17.5vw auto 17vw auto;
}
section.topics .area-jump .box-pager{
}
section.topics .area-jump .box-pager .jump{
display: flex;
justify-content: center;
flex-wrap: nowrap;
align-items: stretch;
gap: 0 1.8vw;
}
section.topics .area-jump .box-pager .jump .char{
position: relative;
width: 8vw;
height: 8vw;
line-height: 8vw;
text-align: center;
border-radius: 8vw;
font-size: 4.4vw;
font-weight: 700;
color: var(--color-01);
font-family: "Roboto", sans-serif;
}
section.topics .area-jump .box-pager .jump .char.num.curr{
color: rgba(255,255,255,1);
background-color: var(--color-01);
}
section.topics .area-jump .box-pager .jump .char.shift{
font-size: 0;
}
section.topics .area-jump .box-pager .jump .char.shift.prev{
margin: 0 2vw 0 0;
}
section.topics .area-jump .box-pager .jump .char.shift.next{
margin: 0 0 0 2vw;
}
section.topics .area-jump .box-pager .jump .char.shift::after{
content: "";
position: absolute;
top: 0;
height: 100%;
aspect-ratio: 18/50;
background-repeat: no-repeat;
background-position: 0 50%;
background-size: 100% auto;
}
section.topics .area-jump .box-pager .jump .char.shift.prev::after{
left: 2vw;
background-image: url(/topics/img/arrow-left.svg);
}
section.topics .area-jump .box-pager .jump .char.shift.next::after{
right: 2vw;
background-image: url(/topics/img/arrow-right.svg);
}

section.topics .box-empty-message {
  padding: 15vw 0 50vw 0;
}

/*````````````````````````````````````````*/
} /* end of @media */
/*````````````````````````````````````````*/