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

/*================================
共通
================================*/
#sidebar h3{
	font-size: 1.1rem;
	font-weight: bold;
	background-color: #f5f5f3;
	border-left: #fccc44 2px solid;
	padding: .5rem;
	margin-bottom: 1rem;
}
#sidebar ul{
	list-style: none;
	padding: 0;
	margin-bottom: 2rem;
}
#sidebar ul li{ border-bottom: #e4e4e4 1px solid;}
#sidebar ul li:not(:last-child){ margin-bottom: 1rem;}
#sidebar ul li a{ text-decoration: none;}

@media (min-width: 992px){
	#post_wrap{ display: flex;}
	#sidebar{
		order: 1;
		width: 300px;
		margin-right: 3rem;
	}
	#content{
		order: 2;
		flex: 1;
	}
}
@media (max-width: 991px){
	#content{ margin-bottom: 4rem;} 
}

/*ページネーション
================================*/
#page_nav{
	display: flex;
	justify-content: center;
	align-items: center;
	margin-top: 3rem;
}
#page_nav .pagination{
	width: 100%;
	justify-content: center;
	align-items: center;
	margin-bottom: 0;
}
#page_nav .pagination .page-item{ margin-bottom: 0 !important;}
#page_nav .pagination .page-link{
	color: #000;
	position: relative;
	border: none;
	background-color: transparent;
	padding-top: 0;
	padding-bottom: 0;
}
#page_nav .pagination .page-link:hover{ color: #fccc44 !important;}
#page_nav .pagination .page-item.active .page-link{
	background-color: transparent;
}
#page_nav .pagination .page-item.active .page-link::before{
	content: '';
	display: inline-block;
	width: 10px;
	height: 3px;
	background-color: #fccc44;
	position: absolute;
	left: 50%;
	-webkit-transform: translateY(-50%) translateX(-50%);
  transform: translateY(-50%) translateX(-50%);
	bottom: -3px;
}
#page_nav .pagination .page-item.prev .page-link,
#page_nav .pagination .page-item.next .page-link{ padding: 0;}
#page_nav .pagination .page-item.prev .page-link span,
#page_nav .pagination .page-item.next .page-link span{
	position: relative;
	width: 25px;
	height: 25px;
	display: block;
	border-radius: 50%;
	border: #333 1px solid;
}
#page_nav .pagination .page-item.prev .page-link span::before,
#page_nav .pagination .page-item.next .page-link span::before{
	content: '';
	display: inline-block;
	width: 6px;
	height: 6px;
	position: absolute;
	top: 50%;
	-webkit-transform: translateY(-50%) rotate(45deg);
	transform: translateY(-50%) rotate(45deg);
}
#page_nav .pagination .page-item.prev .page-link span::before{
	left: 10px;
	border-bottom: 1px solid #000;
	border-left: 1px solid #000;
}
#page_nav .pagination .page-item.next .page-link span::before{
	right: 10px;
	border-top: 1px solid #000;
	border-right: 1px solid #000;
}
#page_nav .pagination .page-item.prev .page-link:hover span,
#page_nav .pagination .page-item.next .page-link:hover span{ background-color: #fccc44;}
#page_nav .pagination .page-item .btn_back{
	border: #333 1px solid;
	border-radius: 0;
	width: 180px;
	margin: 0 1rem;
	padding: .25rem;
}
#page_nav .pagination .page-item .btn_back:hover{ background-color: #f5f5f3;}
@media (min-width: 768px){
	#page_nav .pagination .page-item:not(.prev):not(.next) .page-link{ font-size: 1.1rem;}
	#page_nav .pagination .page-item.prev{ margin-right: 1.5rem;}
	#page_nav .pagination .page-item.next{ margin-left: 1.5rem;}
}
@media (max-width: 767px){
	#page_nav .pagination .page-item:not(.prev):not(.next) .page-link{ font-size: 1rem;}
	#page_nav .pagination .page-item.prev .page-link{ margin-right: .4rem;}
	#page_nav .pagination .page-item.next .page-link{ margin-left: .4rem;}
	#page_nav .pagination .page-link{
		font-size: .9rem;
		padding-left: .5rem;
		padding-right: .5rem;
	}
}

/*================================
新着情報
================================*/
/*一覧
================================*/
.post_list ul{
	flex: 1;
	list-style: none;
	padding-left: 0;
	margin-bottom: 0;
}
.post_list ul li{ border-bottom: #e4e4e4 1px solid;}
@media (min-width: 768px){
	.post_list ul li{ padding: 0 0 0.6rem;}
}
.post_list ul li:not(:last-child){ margin-bottom: 1rem;}
.post_list ul li span{ margin-right: 1rem;}
.post_list ul li a{ text-decoration: none;}
@media (max-width: 767px){
	.post_list ul li span{ display: block;}
}

/*詳細
================================*/
.post_detail{ border: #e4e4e4 1px solid;}
.post_detail .date{ margin-bottom: .5rem;}
.post_detail h2{
	font-size: 1.4rem;
	font-weight: bold;
	margin-bottom: 1.5rem;
}
@media (min-width: 768px){
	.post_detail{ padding: 1.5rem;}
}
@media (max-width: 767px){
	.post_detail{ padding: .75rem;}
}

/*================================
ギャラリー
================================*/
#gallery_wrap:not(.gallery_article) a{
	position: relative;
	display: block;
	padding-top: 100%;
	color: #fff;
}
#gallery_wrap:not(.gallery_article) a::before,
#gallery_wrap:not(.gallery_article) a::after{
	opacity: 0;
	transition: .3s;
}
#gallery_wrap:not(.gallery_article) a::before{
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(128, 128, 128, .8);
	z-index: 1;
}
#gallery_wrap:not(.gallery_article) a::after{
	content: 'VIEW MORE';
	position: absolute;
	top: 50%;
	left: 50%;
	-webkit-transform: translateY(-50%) translateX(-50%);
  transform: translateY(-50%) translateX(-50%);
	width: 100%;
	font-size: clamp(.75rem, 2.5vw, 1.2rem);
	text-align: center;
	padding: 0 .5rem;
	z-index: 2;
}
#gallery_wrap:not(.gallery_article) a:hover::before,
#gallery_wrap:not(.gallery_article) a:hover::after{ opacity: 1;}
#gallery_wrap:not(.gallery_article) a img{
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
	object-fit: cover;
	-webkit-backface-visibility: hidden;
	z-index: 0;
}
@media (min-width: 768px){
	#gallery_wrap:not(.gallery_article) a{ margin-bottom: 1.5rem;}
}
@media (max-width: 767px){
	#gallery_wrap:not(.gallery_article) a{ margin-bottom: .5rem;}
}

/*ページネーション（ギャラリー）
================================*/
#g_pagination{
	display: flex;
	justify-content: center;
	align-items: center;
	margin-top: 3rem;
}
#g_pagination .pagination{
	width: 100%;
	justify-content: center;
	align-items: center;
	margin-bottom: 0;
}
#g_pagination .pagination .page-item{ margin-bottom: 0 !important;}
#g_pagination .pagination .page-link{
	color: #000;
	position: relative;
	border: none;
	background-color: transparent;
	padding-top: 0;
	padding-bottom: 0;
}
#g_pagination .pagination .page-item:not(.prev):not(.next) .page-link::before{
	content: '';
	display: inline-block;
	width: 60px;
	height: 60px;
	border-radius: 50%;
	background: radial-gradient( rgba(250, 190, 0, .3) 0%, rgba(250, 190, 0, 0) 50%, rgba(250, 190, 0, 0) 100%);
	position: absolute;
	top: 50%;
	left: 50%;
	-webkit-transform: translateY(-50%) translateX(-50%);
	transform: translateY(-50%) translateX(-50%);
	opacity: 0;
	transition: .3s;
}
#g_pagination .pagination .page-item:not(.prev):not(.next) .page-link:hover::before{ opacity: .6;}

#g_pagination .pagination .page-item.active .page-link{ color: #fccc44;}
#g_pagination .pagination .page-item.prev .page-link,
#g_pagination .pagination .page-item.next .page-link{ padding: 0;}
#g_pagination .pagination .page-item.prev .page-link span,
#g_pagination .pagination .page-item.next .page-link span{
	position: relative;
	width: 35px;
	height: 35px;
	display: block;
	border-radius: 50%;
	border: #333 1px solid;
}
#g_pagination .pagination .page-item.prev .page-link:disabled span,
#g_pagination .pagination .page-item.next .page-link:disabled span{
	border: #ccc 1px solid;
}
#g_pagination .pagination .page-item.prev .page-link span::before,
#g_pagination .pagination .page-item.prev .page-link span::after,
#g_pagination .pagination .page-item.next .page-link span::before,
#g_pagination .pagination .page-item.next .page-link span::after{
	content: '';
  position: absolute;
  background-color:#000;
}#g_pagination .pagination .page-item.prev .page-link:disabled span::before,
#g_pagination .pagination .page-item.prev .page-link:disabled span::after,
#g_pagination .pagination .page-item.next .page-link:disabled span::before,
#g_pagination .pagination .page-item.next .page-link:disabled span::after{
  background-color:#ccc;
}
#g_pagination .pagination .page-item.prev .page-link span::before,
#g_pagination .pagination .page-item.next .page-link span::before{
	top: 50%;
  -webkit-transform: translateY(-50%);
	transform: translateY(-50%);
  width: 15px;
  height: 1px;
}
#g_pagination .pagination .page-item.prev .page-link span::after,
#g_pagination .pagination .page-item.next .page-link span::after{
	top: 50%;
  width: 5px;
  height:1px;
	margin-top: -2px;
}
#g_pagination .pagination .page-item.prev .page-link span::before,
#g_pagination .pagination .page-item.prev .page-link span::after{ left: 10px;}
#g_pagination .pagination .page-item.prev .page-link span::after{
  -webkit-transform: translateY(-50%) rotate(-40deg);
	transform: translateY(-50%) rotate(-40deg);
}
#g_pagination .pagination .page-item.next .page-link span::before,
#g_pagination .pagination .page-item.next .page-link span::after{ right: 10px;}
#g_pagination .pagination .page-item.next .page-link span::after{
  -webkit-transform: translateY(-50%) rotate(40deg);
	transform: translateY(-50%) rotate(40deg);
}
#g_pagination .pagination .page-item.prev .page-link:not(:disabled):hover span,
#g_pagination .pagination .page-item.next .page-link:not(:disabled):hover span{ background-color: rgba(250, 190, 0, .2);}
#g_pagination .pagination .page-item .btn_back{
	color: #fff;
	border: #000 1px solid;
	border-radius: 0;
	width: 180px;
	margin: 0 1rem;
	padding: .25rem;
	background-color: rgba(0, 0, 0, 1);
}
#g_pagination .pagination .page-item .btn_back:hover{ background-color: rgba(0, 0, 0, .8);}
@media (min-width: 768px){
	#g_pagination .pagination .page-item:not(.prev):not(.next) .page-link{ font-size: 1.1rem;}
	#g_pagination .pagination .page-item.prev{ margin-right: 1.5rem;}
	#g_pagination .pagination .page-item.next{ margin-left: 1.5rem;}
}
@media (max-width: 767px){
	#g_pagination .pagination .page-item:not(.prev):not(.next) .page-link{ font-size: 1rem;}
	#g_pagination .pagination .page-item.prev .page-link{ margin-right: .4rem;}
	#g_pagination .pagination .page-item.next .page-link{ margin-left: .4rem;}
	#g_pagination .pagination .page-link{
		font-size: .9rem;
		padding-left: .5rem;
		padding-right: .5rem;
	}
}

/*ギャラリー詳細
================================*/
/*スライダー*/
#gallery_slider{
	position: relative;
  width: 100%;
	margin-bottom: 5rem;
}
#gallery_slider .swiper-slide .slide_photo{
	position: relative;
	width: 100%;
  aspect-ratio: 8 / 5;
	background: #eee;
	overflow: hidden;
}
#gallery_slider .swiper-slide img{
	object-fit: contain;
	position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
	max-width: 100%;
	max-height: 100%;
	width: auto;
	height: auto;
}
#gallery_wrap .slide_txt{
/*	position: absolute;
	left: 50%;
	-webkit-transform: translateX(-50%);
	transform: translateX(-50%);
	bottom: -10rem;*/
	width: 100%;
	max-width: 700px;
	margin-left: auto;
	margin-right: auto;
	padding: 1rem;
	overflow: hidden;
}
#gallery_wrap .slide_txt{ border: #cacaca 1px solid;}
#gallery_wrap .slide_txt p{
  animation-delay: 1s;
  animation-duration: 1s;
  animation-fill-mode: both;
  animation-name: fadeIn;
}
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateX(100px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}
#gallery_wrap .slide_txt p:last-child{ margin-bottom: 0;}
#gallery_slider .swiper-button-prev,
#gallery_slider .swiper-button-next{ color: #000;}
#gallery_slider .swiper-button-prev:hover,
#gallery_slider .swiper-button-next:hover{ color: #fccc44;}
#gallery_slider .swiper-button-prev{ left: -3rem;}
#gallery_slider .swiper-button-next{ right: -3rem;}
#gallery_slider .swiper-pagination-bullet{
	width: 9px;
	height: 9px;
	border-color: #cacaca;
	border-style: solid;
	border-width: 1px;
	background-color: #fff;
	opacity: 1;
}
#gallery_slider .swiper-pagination-bullet-active{
	border-color: #fccc44;
	background-color: #fccc44;
}
@media (min-width: 768px){
	#gallery_slider .swiper-pagination{ bottom: -2rem;}
}
@media (max-width: 767px){
	#gallery_slider .swiper-slide .slide_photo{ margin-bottom: 2rem;}
	#gallery_slider .swiper-pagination{ bottom: .25rem;}
}

/*SNSバナー 
================================*/
.sns_bnr{
	padding-left: 0;
	list-style: none;
	margin: 2rem 0 0;
	display: flex;
	justify-content: center;
}
@media (min-width: 768px){
	.sns_bnr li:not(:last-child){ margin-right: 1rem;}
}
@media (max-width: 767px){
	.sns_bnr li:not(:last-child){ margin-right: .75rem;}
}