@charset "UTF-8";

/* CSS Document */


/*PC*/
@media print, screen and (min-width: 768px) {


/*hyogo-fieldpavilion
----------------------------------------*/
.cont01 { padding: 50px 0; }
.cont01 p.read { width: 100%; text-align: center; font-size: 0.9em; font-weight: 900; line-height: 2; margin-bottom: 100px; }
.cont01 .map { position: relative; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; margin-bottom: 100px; }
.cont01 .map .bg { width: 60%; position: absolute; top: -15%; left: -5%; opacity: 0.1; z-index: -1; }
.cont01 .map .txt { width: 45%; }
.cont01 .map .txt h3 { font-size: 3rem; margin-bottom: 50px; color: #e56b00; }
.cont01 .map .txt p { font-size: 1.6rem; font-weight: 900; line-height: 2.2; }
.cont01 .map .img { width: 40%; }




.cont02 { padding: 0 0 50px; }

.cont02 .filter { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; margin-bottom: 50px; }
.cont02 .filter form { width: 40%; }
.cont02 .filter form select { width: 80%; font-size: 1.3rem; padding: 10px; background: #fff; border: solid 1px #CCC; box-sizing: border-box; }
.cont02 .filter form input { width: 18%; background: #E56B00; padding: 10px 0; box-sizing: border-box; font-size: 1.2rem; border: none; color: #FFF; }

.cont02 .iconbox { display: flex; flex-wrap: wrap; justify-content: flex-end; margin: 0 40px 20px auto; }
.cont02 .iconbox p { margin-left: 20px; font-size: 1.2rem; }
.cont02 .iconbox p img { width: 40px; margin-right: 5px; }

.cont02 .hfp_wrap .hfp_wrap_box { width: 90%; position: relative; margin: 0 0 0 auto; padding: 0 6% 0 0 !important; box-sizing: border-box; }
.cont02 .hfp_wrap .hfp_wrap_box ul { margin-bottom: 80px; }
.cont02 .hfp_wrap .hfp_wrap_box ul li { padding: 15px; box-sizing: border-box; }
.cont02 .hfp_wrap .hfp_wrap_box ul li .articles_index_thumbnail { position: relative; overflow: hidden; }
.cont02 .hfp_wrap .hfp_wrap_box ul li .articles_index_thumbnail .area { position: absolute; top: 0; left: 0; padding: 5px 15px; font-size: 1.4rem; color: #fff; background: #e56b00; box-shadow: 0px 0px 10px rgba(0,0,0,0.3); }
.cont02 .hfp_wrap .hfp_wrap_box ul li .articles_index_thumbnail .img { position: absolute; top: 5px; right: 5px; display: flex; flex-wrap: wrap; z-index: 1; }
.cont02 .hfp_wrap .hfp_wrap_box ul li .articles_index_thumbnail .img img { width: 40px; margin-right: 5px; }
.cont02 .hfp_wrap .hfp_wrap_box ul li .txt { padding: 15px; border-top: 1px solid #e56b0073; }
.cont02 .hfp_wrap .hfp_wrap_box ul li .txt .area { margin-bottom: 10px; padding: 4px 10px; font-size: 1.2rem; color: #fff; background: #a49f9a; display: inline-block; }
.cont02 .hfp_wrap .hfp_wrap_box ul li .txt h3 { margin: 0; }
.cont02 .hfp_wrap .hfp_wrap_box ul li .txt h3 a { color: #333; font-size: 1.4rem; font-weight: 500; }

.cont02 .hfp_wrap .swiper-prev,
.cont02 .hfp_wrap .swiper-next { bottom: 0px; }
.cont02 .hfp_wrap .swiper-prev { right: 120px; left: auto; }
.cont02 .hfp_wrap .swiper-next { right: 60px; left: auto; }

.cont02 .hfp_wrap .swiper-pagination { display: flex; justify-content: flex-end; right: 40px; left: auto; bottom: 60px; }
.cont02 .hfp_wrap .swiper-pagination span { width: 60px; height: 5px; margin: 0 4px; background: #fff; border: 1px solid #ccc; border-radius: 0; cursor: pointer; opacity: 1; transition: 0.2s; }
.cont02 .hfp_wrap .swiper-pagination span:hover,
.cont02 .hfp_wrap .swiper-pagination span.swiper-pagination-bullet-active { background: coral; transition: 0.2s; }



}






/*sp*/
@media only screen and (max-width: 767px) {


/*hyogo-fieldpavilion
----------------------------------------*/
.cont01 { width: 90%; margin: auto; padding: 50px 0; }

.cont01 p.read { width: 100%; font-size: 0.9em; font-weight: 900; line-height: 2; margin-bottom: 80px; }
.cont01 .map { position: relative; margin-bottom: 50px; }
.cont01 .map .bg { width: 90%; position: absolute; top: -10%; right: -20px; opacity: 0.15; z-index: -1; }
.cont01 .map .txt { margin-bottom: 30px; }
.cont01 .map .txt h3 { font-size: 2.2rem; margin-bottom: 10px; color: #e56b00; }
.cont01 .map .txt p { font-size: 1.2rem; font-weight: 900; line-height: 2.2; }
.cont01 .map .img {  }




.cont02 { padding: 0 0 50px; }

.cont02 .filter { width: 90%; margin: 0 auto 30px; }
.cont02 .filter form select { width: 80%; font-size: 1.2rem; padding: 10px; background: #fff; border: solid 1px #CCC; box-sizing: border-box; }
.cont02 .filter form input { width: 18%; background: #E56B00; padding: 10px 0; box-sizing: border-box; font-size: 1.2rem; border: none; color: #FFF; }

.cont02 .iconbox { width: 90%; margin: auto; }
.cont02 .iconbox p { font-size: 1.1rem; margin-bottom: 10px; }
.cont02 .iconbox p img { width: 30px; margin-right: 5px; }

.cont02 .hfp_wrap .hfp_wrap_box { width: 95%; position: relative; margin: 0 auto 40px; }
.cont02 .hfp_wrap .hfp_wrap_box ul { margin-bottom: 60px; }
.cont02 .hfp_wrap .hfp_wrap_box ul li { padding: 5px; box-sizing: border-box; }
.cont02 .hfp_wrap .hfp_wrap_box ul li .articles_index_thumbnail { position: relative; overflow: hidden; }
.cont02 .hfp_wrap .hfp_wrap_box ul li .articles_index_thumbnail .area { position: absolute; top: 0; left: 0; padding: 4px 8px; font-size: 1.2rem; color: #fff; background: #e56b00; box-shadow: 0px 0px 6px rgba(0,0,0,0.4); }
.cont02 .hfp_wrap .hfp_wrap_box ul li .articles_index_thumbnail .img { position: absolute; top: 10px; right: 5px; display: flex; flex-wrap: wrap; z-index: 1; }
.cont02 .hfp_wrap .hfp_wrap_box ul li .articles_index_thumbnail .img img { width: 30px; margin-right: 5px; }
.cont02 .hfp_wrap .hfp_wrap_box ul li .txt { padding: 10px; border-top: 1px solid #e56b0073; }
.cont02 .hfp_wrap .hfp_wrap_box ul li .txt .area { margin-bottom: 5px; padding: 4px 8px; font-size: 1.1rem; color: #fff; background: #a49f9a; display: inline-block; }
.cont02 .hfp_wrap .hfp_wrap_box ul li .txt h3 { margin: 0; }
.cont02 .hfp_wrap .hfp_wrap_box ul li .txt h3 a { color: #333; font-size: 1.2rem; font-weight: 500; }

.cont02 .hfp_wrap .swiper-prev,
.cont02 .hfp_wrap .swiper-next { bottom: 0px; }
.cont02 .hfp_wrap .swiper-prev { right: 80px; left: auto; }
.cont02 .hfp_wrap .swiper-next { right: 20px; left: auto; }

.cont02 .hfp_wrap .swiper-pagination { display: flex; justify-content: flex-end; right: 0; left: auto; bottom: 50px; }
.cont02 .hfp_wrap .swiper-pagination span { width: 40px; height: 5px; margin: 0 4px; background: #fff; border: 1px solid #ccc; border-radius: 0; cursor: pointer; opacity: 1; transition: 0.2s; }
.cont02 .hfp_wrap .swiper-pagination span:hover,
.cont02 .hfp_wrap .swiper-pagination span.swiper-pagination-bullet-active { background: coral; transition: 0.2s; }





}