@charset "UTF-8";

/*-------------------------------
 *  介護施設スライダー 
 */

/* タイトル：「人気の介護施設」のスタイル */
.ad-slider_container h2.ad_h2_border.ad_favArt{
	margin: 0 auto 2em;
	padding-top: 2em;
}
.ad-slider_container{
	padding-bottom: 2rem !important;
}


/* 画像比率 */
.ad-art-list .wp-block-jet-engine-dynamic-image img{
	aspect-ratio: 4 / 3;
    object-fit: cover;
}

/* 記事抜粋情報の省略行指定 */
.wp-block-jet-engine-listing-grid .jet-listing-dynamic-field__content{
	overflow: hidden;
	display: -webkit-box;
	text-overflow: ellipsis;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 1 ; /* タイトル，タグ以外は2行目以降省略 */
}

/* 記事タイトル, 記事タグ */
.wp-block-jet-engine-listing-grid .ad-art-title .jet-listing-dynamic-field__content, .wp-block-jet-engine-listing-grid .ad-art-tag .jet-listing-dynamic-field__content{
	-webkit-line-clamp: 2; /* タイトル，タグは3行目以降省略 */
}

.ad-art-tag .jet-listing-dynamic-field__inline-wrap{
	padding: .3em;
}

.ad-art-tag.wp-block-columns {
    --wp-column-gap: 0.5em;
	margin-top: .3em;
}

.ad-art-title{
	height: 3em;
	align-items: baseline;
}

/* 記事背景，枠 */
.wp-block-jet-engine-listing-grid .jet-listing-grid__item{
	background-color: #fdfdfd;
	border: 2px solid rgb(62, 74, 61);
	margin: 0 25px;
	box-shadow: 0px 4px 4px 3px #1E2D2263;
}

/* 左右の矢印 */
.jet-listing-grid__slider-icon.slick-arrow{
	margin-top: 0px !important;
	border-radius: 50%;
	transition: background-color .25s, color .25s;
	align-items: center;
    background: #fff;
    border: 1px solid var(--color_main);
    box-shadow: var(--swl-box_shadow);
    color: var(--color_main);
    cursor: pointer;
    display: flex;
    flex-direction: column;
    height: 52px;
    justify-content: center;
    letter-spacing: normal;
    line-height: 1;
    opacity: .75;
    overflow: hidden;
    text-align: center;
    width: 52px;
}

.jet-listing-grid__slider-icon.slick-arrow:hover {
	background-color: var(--color_main);
	color: #fdfdfd;
	opacity: 1;
}

.jet-listing-grid__slider-icon.slick-arrow.next-arrow{
	right: -40px;
}
.jet-listing-grid__slider-icon.slick-arrow.prev-arrow{
	left: -40px;
} 


/* スライダー全体のレスポンシブ設定 */
@media (max-width: 1024px) {
	/* タブレット対応（幅1024px以下） */
	
	/* タイトル：「人気の介護施設」のスタイル */
	.ad-slider_container h2.ad_h2_border.ad_favArt{
		padding-top: 0;
	}
	
	.jet-listing-grid__items.slick-slider .slick-slide {
		margin: 0 25px; /* マージンを縮小 */
	}

	.jet-listing-grid__slider-icon.slick-arrow.next-arrow {
		right: -5px;
	}

	.jet-listing-grid__slider-icon.slick-arrow.prev-arrow {
		left: -5px;
	}
	
	/* 記事スライダーの上下幅	 */
/* 	.sp-py-40 {
		padding-bottom: 1em !important;
		padding-top: 1em !important;
	} */
}

@media (max-width: 768px) {
	/* スマートフォン対応（幅768px以下） */
	.jet-listing-grid__items.slick-slider .slick-slide {
		margin: 0 50px; /* マージンを縮小 */
	}

	.jet-listing-grid__slider-icon.slick-arrow.next-arrow {
		right: 0px;
	}

	.jet-listing-grid__slider-icon.slick-arrow.prev-arrow {
		left: 0px;
	}
	.ad-art-list {
		grid-template-columns: repeat(1, 1fr) !important; /* 1列レイアウト */
	}

	/* カードの余白を調整 */
	.jet-listing-grid__items.slick-slider .slick-slide {
		padding: 10px; /* 内側の余白を縮小 */
	}

	/* 画像比率の保持（スマホサイズ） */
	/*   .ad-art-list .wp-block-jet-engine-dynamic-image img {
	aspect-ratio: 16 / 9; 
} */

	/* 矢印サイズ調整 */
	.jet-listing-grid__slider-icon.slick-arrow {
		width: 40px; /* 矢印をさらに小さく */
		height: 40px;
	}
	
	/* 枠の影非表示	 */
	.wp-block-jet-engine-listing-grid .jet-listing-grid__item {
		box-shadow: 0px 0px 0px 0px #1E2D2263;
	}
}

@media (max-width: 480px) {
	/* カード内の文字の余白を調整 */
	.ad-art-tag .jet-listing-dynamic-field__inline-wrap {
		padding: 0.2em;
	}
}