@charset "UTF-8";
@import url("pager.css");

/*
	市民団体のイベント専用css

*/
/* -----------------------------------------------
 トップページの市民団体のイベント専用
--------------------------------------------------*/
.bl_event {
    padding-bottom: 10rem;
    background-image: url(../img/home/bg-event.png);
    background-repeat: no-repeat;
    background-size: cover;
    background-position-y: -13rem;
}

/* インナー */
.bl_event .inner {
    width: calc(100% - 10rem);
    margin: 0 auto;
    max-width: 1600px;
}

/* トップページの見出し */
.bl_event .bl_sectionTitle {
    text-align: center;
}

.bl_event_top{
	padding-bottom: 5rem;
}

/* イベントの登録・取り消しはこちらから */
.bl_event_btm h3{
	text-align: center;
	font-size: 1.3333333333333rem;
}
.bl_event_btm h3 span {
    display: inline-block;
    position: relative;
    padding-left: 2rem;
    margin-bottom: 1.5rem;
}
.bl_event_btm h3 span::before {
    -webkit-mask-image: url(../img/icon/pen.svg);
    mask-image: url(../img/icon/pen.svg);
    content: "";
    display: inline-block;
    position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	margin: auto;
    width: 30px;
    aspect-ratio: 1 / 1;
    background-color: var(--mainColor);
    font-weight: 500;
    z-index: 1;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: 28px;
    mask-size: 45px;
    -webkit-mask-position: left 50% top 50%;
    mask-position: left 50% top 50%;
}

.bl_event_btm .bl_bannerWrap{
	margin: 0 auto;
}
.bl_event .add-btn::before{
	background-image: url(../img/icon/eventadd.png);
}

.bl_event .del-btn::before{
	background-image: url(../img/icon/eventdel.png);
}


.bl_event .bl_btn{
	margin: 0 auto;
}

/*団体のイベント・お知らせ*/
.bl_event--ttl {
	margin-bottom: 0.25em;
	text-align: center;
	font-size: 1.125rem;
}


/*記事リスト*/
.bl_event_listWrap{
	margin-bottom: 3rem;
}

.bl_event-item {
	position: relative;
}
.bl_event-item a {
	position: absolute;
	top:0;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 1;
}
.bl_event-item:hover {
	opacity: 0.8;
}
.bl_event-thumbnail {
	aspect-ratio: 4 / 3;
	background-color: #ccc;
	display: flex;
	align-items: center;
	overflow: hidden;
	position: relative;
	margin-bottom: .75rem;
}
.bl_event-thumbnail img {
	min-width: 100%;
	min-height: 100%;
	width: auto;
	object-fit: cover;
	vertical-align: middle;
}
.bl_event-name {
	font-size: 0.75rem;
    padding: 0.5rem 0.75rem;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: auto;
    color: var(--baseBlack);
    background-color: rgb(255 255 255 / 50%);
}

.bl_event-text time {
	color: #392926;
	font-size: 1rem;
}
.bl_event-text time+.bl_event-title {
	margin-top: 0.25rem;
}
.bl_event-title {
	font-size: 1.1111111111111rem;
}

/* 記事スライダーのマージン */
.bl_event .slick-slide{
	margin: 0 .5rem;
}

/* 記事スライダーの矢印ボタン */
.bl_event button.slick-arrow {
    background-color: #f8daac;
    border-radius: 50vh;
	color:#000;
}

.bl_event .slick-prev, .bl_event .slick-next {
	z-index: 1;
	position: absolute;
	top: 0;
	bottom: 0;
	margin: auto;
}
.bl_event .slick-prev:before, .bl_event .slick-next:before {
	color: #fff;
	text-shadow: none;
    font-size: 1.5rem;
	opacity: 1;
	content: none;
}
/* ボタンの位置 */
.bl_event .slick-next {
    right: -4rem;
}
.bl_event .slick-prev{
	left: -4rem;
}

/* next */
.slick-next::after {
	transform: rotate(45deg);
  }
  /* prev */
  .slick-prev::after {
	transform: rotate(-135deg);
  }
  .slick-arrow {
	display: block;
	position: absolute;
	top: 0;
	bottom: 0;
	margin: auto;
	padding: 0;
	color: transparent;
	z-index: 1;
	transition: opacity 0.5s;
	z-index: 1;
  }
  
  /* 共通設定 */
  .slick-next::before,
  .slick-next::after,
  .slick-prev::before,
  .slick-prev::after {
	position: absolute;
	top: 0;
	bottom: 0;
	margin: auto;
	content: "";
	vertical-align: middle;
  }
  
  .slick-next::after, .slick-prev::after {
    width: 13px;
    height: 13px;
    border-top: 2px solid #fff;
    border-right: 2px solid #fff;
    position: absolute;
    top: 0;
    right: 3px;
    bottom: 0;
    left: 0;
    margin: auto;
}

.slick-prev::after{
	left:6px;
}


/* more home専用 */
.bl_event-item-more {
	width: 70%;
	margin: 0 auto 3rem auto;
}
.bl_event-more {
	display: flex;
	align-items: center;
}
.bl_event-more .bl_event-more--link {
	font-size: 1rem;
	font-weight: bold;
}
.bl_event-more .bl_event-more--link:before {
	content: "\f061";
	margin-right: 1rem;
	font-family: "Font Awesome 5 Free";
	font-weight: 900;
	font-size: 1rem;
	width: 1em;
	height: 1em;
	line-height: 1em;
	z-index: 20;
}
.bl_event-more a {
	border-radius: 2rem;
	width: 100%;
	display: flex;
    padding: 1rem;
	color: #fff;
    align-items: center;
    justify-content: center;
	background-color: var(--mainColor);
}
.bl_event-more a:hover {
	transform: translate(1px,1px);
	box-shadow: none;
	background-color: #20688c;
}

/* ======================================================================
トップページの市民団体のイベント 768px以下
====================================================================== */
@media screen and (max-width: 768px){
	/* インナー */
.bl_event .inner {
    width: calc(100% - 2rem);
}
/* イベントの記事スライダーのボタンの位置 */
.bl_event .slick-prev {
    left: 0;
}
.bl_event .slick-next {
    right: 0;
}
.bl_event {
    padding-bottom: 5rem;
}
.bl_event_top{
	padding-bottom: 3rem;
}
}

/* ======================================================================
トップページの市民団体のイベント 576px以下
====================================================================== */
@media screen and (max-width: 576px){
	.bl_event_btm h3{
		font-size: 1.2rem;

	}
}


/* ======================================================================
一覧ページ(event_all.php)の市民団体のイベント
====================================================================== */
#event .bl_sectionTitle{
	text-align: center;
}

#event .news-list {
	display: flex;
	flex-wrap: wrap;
	gap: 60px 5%;
	margin-bottom: 6rem;
}

#event .bl_event-item{
    width: 30%;
}

/* ======================================================================
一覧ページ(event_all.php)の市民団体のイベント 992px以下
====================================================================== */
@media screen and (max-width: 992px){
	/* #event .bl_event-item {
		width: calc(50% - 2.5%);
	} */
	#event .news-list{
		row-gap: 1.5rem;
	}
	#event .bl_event-item {
		width: 100%;
		display: flex;
		gap: 1rem;
	}
	#event .bl_event-thumbnail{
		width: 30%;
	}
	#event .bl_event-text{
		width: 70%;
	}
}
/* ======================================================================
一覧ページ(event_all.php)の市民団体のイベント 768px以下
====================================================================== */
@media screen and (max-width: 768px){
	/* #event .news-list {
     flex-direction: column;
	}
	#event .bl_event-item {
		width: 100%;
	} */
}