@charset "UTF-8";
/* CSS Document */



#top_main{ position: relative;}
#top_main>img{ display: block;}
@media (min-width: 768px) {
#top_main>img{ width: 100%;}
}
@media (max-width: 767.98px) {
#top_main{ overflow: hidden; height: 285px;}
#top_main>img{ position: absolute; max-width: none; height: 100%; top: 0; left: -100%; right: -100%; margin: 0 auto;}
}



#top_slide{ position: relative;}
#top_slide .swiper-slide{ box-shadow: 0 1px 7px rgba(0,0,0,0.50); text-decoration: none; font-weight: normal; color: black; background-color: white;}
#top_slide .swiper-slide>img{ display: block;}
#top_slide .swiper-slide>time{ font-weight: bold; color: #808080; display: block;}
#top_slide .swiper-pagination-bullet { border-radius: 0; background: #a7a7a7; opacity: 1; transition: .3s;}
#top_slide .swiper-pagination-bullet-active{ background-color: #00a0e9;}
@media (min-width: 768px) {
#top_slide{ margin: -50px 0 100px; padding-bottom: 50px;}
#top_slide .swiper-slide{ width: 580px; padding: 12px;}
#top_slide .swiper-slide>p{ margin: 20px 0 15px; padding: 0 25px; font-size: 20px;}
#top_slide .swiper-slide>time{ padding: 0 25px 5px; font-size: 14px;}
#top_slide .swiper-pagination-bullet{ width: 30px; height: 1px; }
#top_slide .swiper-pagination-bullet-active{ width: 80px;}
}
@media (max-width: 767.98px) {
#top_slide{ margin: -40px 0 50px; padding-bottom: 40px;}
#top_slide .swiper-slide{ width: 290px; padding: 6px;}
#top_slide .swiper-slide>p{ margin: 10px 0 8px; padding: 0 12px; font-size: 10px;}
#top_slide .swiper-slide>time{ padding: 0 12px 3px; font-size: 7px;}
#top_slide .swiper-pagination-bullet{ width: 15px; height: 1px; }
#top_slide .swiper-pagination-bullet-active{ width: 40px;}

}







.view_more_btn{ display: flex; justify-content: center; align-items: center; border: #808080 solid 2px; color: black; text-decoration: none;}
.view_more_btn:hover{ background-color: #808080; color: white; text-decoration: none;}
@media (min-width: 768px) {
.view_more_btn{ margin: 50px auto; width: 200px; height: 50px;}
}
@media (max-width: 767.98px) {
.view_more_btn{ margin: 50px auto; width: 176px; height: 44px; font-size: 14px;}
}









.top_container{}
.top_container>div{}
.top_container>div>div{ position: relative;}
.top_container>div>div:nth-child(2)>div{ background-repeat: no-repeat;}

.img_flex{ display: flex;}
.img_flex>div{ border-color: white; border-style: solid; box-shadow: 0 1px 4px rgba(0,0,0,0.5);}
.top_text_box{ margin: 0;}
.top_text_box>strong{ display: block;}
.top_text_box>span{}

.top_container>div>div>a{ color: black; text-decoration: none; background: url("../common/images/view.svg") no-repeat left bottom; display: flex; align-items: center;}
.top_container>div>div>a:hover{ color: black;}

.top_container>div:nth-child(odd)>div:nth-child(1)>.midashi02{ text-align: right;}
.top_container>div:nth-child(odd)>div:nth-child(1)>.midashi02::after{ left: auto; right: 0;}
@media (min-width: 768px) {
.top_container{}
.top_container>div{ width: 1205px; padding: 0 15px; margin: 0 auto; display: flex; justify-content: space-between;}
.top_container>div:nth-child(n+2){ margin-top: 100px;}
.top_container>div>div{ width: calc(50% - 15px);}
.top_container>div>div:nth-child(1){ padding-bottom: 70px;}
.top_container>div>div:nth-child(2)>div{ position: absolute; left: 0; top: 0; width: calc(50vw - 15px); min-width: 587.5px;; height: 100%; background-position: left center; background-size: auto 100%;}

.top_container.ver2025>div>div:nth-child(2)>div{ background-size: contain;}



.img_flex{ margin: -9px -9px 21px;}
.img_flex>div{ width: calc(50% - 18px); margin: 9px; border-width: 2px;}

.top_text_box{ font-size: 16px; padding: 0 20px;}
.top_text_box>strong{ font-size: 22px; margin: 0 0 20px;}
.top_text_box>span{}
.top_container>div>div>a{ position: absolute; left: 20px; bottom: 10px; width: 150px; height: 30px;}

.top_container>div:nth-child(odd)>div:nth-child(1){ order: 1;}
.top_container>div:nth-child(odd)>div:nth-child(1)>.midashi02::before{ left: 100%;}

.top_container>div:nth-child(odd)>div:nth-child(2){ order: 0;}
.top_container>div:nth-child(odd)>div:nth-child(2)>div{ left: auto; right: 0; background-position: right center;}
}
@media (max-width: 767.98px) {
.top_container>div:nth-child(n+2){ margin-top: 80px;}

.top_container>div:nth-child(odd)>div:nth-child(1)>.midashi02{ padding: 0 10px 0 0;}

.img_flex{ margin: -5px 0 10px; padding: 5px 0;}
.img_flex>div{ width: calc(50% - 10px); margin: 5px; border-width: 1px;}

.top_text_box{ font-size: 8px; padding: 0 10px;}
.top_text_box>strong{ font-size: 11px; margin: 0 0 10px;}
.top_text_box>span{}
.top_container>div>div>a{ font-size: 8px; width: 75px; height: 15px; background-size: 71px auto; margin: 15px 0 0 10px;}
.top_container>div>div:nth-child(2){ margin-top: 20px;}
.top_container>div>div:nth-child(2)>div{ padding: 0 0 60%; background-position: center; background-size: cover;}
}



@media (min-width: 768px) {}
@media (max-width: 767.98px) {}



@media (min-width: 768px) {}
@media (max-width: 767.98px) {}



@media (min-width: 768px) {}
@media (max-width: 767.98px) {}



@media (min-width: 768px) {}
@media (max-width: 767.98px) {}



@media (min-width: 768px) {}
@media (max-width: 767.98px) {}



@media (min-width: 768px) {}
@media (max-width: 767.98px) {}