.instagram {
	background-color: #F5F0F0;
	.instagram__container {
		margin-top: 90px;
		@media screen and (max-width: 767px) {
			margin-top: 50px;
		}
		.instagram__lists {
			display: grid;
			grid-template-columns: repeat(5, 1fr);
			gap: 20px;
			margin-bottom: 60px;
			@media screen and (max-width: 767px) {
				grid-template-columns: repeat(2, 1fr);
				gap: 40px 12px;
				margin-bottom: 40px;
			}
			li {
				.instagram__ttl {
					background-image: url(blog/wp-content/themes/katsuda-theme/assets/images/common/icn-instagram-gra.svg);
					background-position: center left;
					background-repeat: no-repeat;
					background-size: 20px;
					margin-bottom: 8px;
					padding: 5px 0 5px 25px;
					font-size: 13px;
					font-family: "Noto Serif JP";
					font-style: normal;
					font-weight: 400;
					line-height: 100%;
					@media screen and (max-width: 767px) {
						margin-bottom: 5px;
					}
				}
				.instagram__img {
					margin-bottom: 20px;
					transition: opacity 0.6s;
					@media screen and (min-width: 768px) {
						&:hover {
							opacity: 0.6;
						}
					}
					@media screen and (max-width: 767px) {
						margin-bottom: 15px;
					}
				}
				.instagram__modal-open {
					text-align: center;
					button {
						display: inline-block;
						padding: 8px 20px;
						gap: 10px;
						border: 1px solid #333;
						color: #000;
						font-family: "Noto Sans JP";
						font-size: 12px;
						font-style: normal;
						font-weight: 400;
						line-height: 14px;
						letter-spacing: 3.2px;
						transition: opacity 0.6s;
						@media screen and (min-width: 768px) {
							&:hover {
								opacity: 0.6;
							}
						}
					}
				}
				@media screen and (max-width: 767px) {
					&:nth-child(5) {
						display: none;
					}
				}
			}
		}
		.instagram__link {
			display: block;
			margin: 0 auto;
			padding: 13px 40px 13px 68px;
			width: 309px;
			height: 49px;
			color: #fff;
			font-family: "Noto Serif JP";
			font-size: 16px;
			font-style: normal;
			font-weight: 600;
			line-height: 1.4;
			letter-spacing: 1.5px;
			background-color: #962124;
			background-image: url(https://katsuda.itembox.cloud/item/icn-instagram.svg?t=20260501175915);
			background-size: 30px;
			background-repeat: no-repeat;
			background-position: center left 36px;
			transition: opacity 0.6s;
			@media screen and (min-width: 768px) {
				&:hover {
					opacity: 0.6;
				}
			}
			@media screen and (max-width: 767px) {
				width: 297px;
				height: 53px;
				padding: 15px 32px 15px 64px;
				background-position: center left 32px;
			}
		}
	}
}
.instagram__modal {
	display: none;
	&.is-active {
		display: block;
	}
	.instagram__modal-bg {
		width: 100%;
		height: 100%;
		opacity: 0.7;
		background: #000;
		position: fixed;
		top: 0;
		left: 0;
		z-index: 1000;
		cursor: pointer;
	}
	.instagram__modal__lists {
		li {
			.instagram__modal-content {
				font-family: "Noto Serif JP";
				display: flex;
				gap: 24px;
				position: fixed;
				top: 50%;
				left: 50%;
				transform: translate(-50%, -50%);
				width: 736px;
				height: 428px;
				border-radius: 5px;
				background: #fff;
				z-index: 1001;
				padding: 10px;
				@media screen and (max-width: 767px) {
					display: block;
					width: 84.6%;
					height: auto;
					padding: 25px 20px 40px;
				}
				.instagram__modal-close {
					position: absolute;
					top: -64px;
					right: 0;
					width: 60px;
					height: 60px;
					background-image: url(blog/wp-content/themes/katsuda-theme/assets/images/common/icn-modal-close.svg);
					background-position: top left;
					background-repeat: no-repeat;
					background-size: 60px;
					cursor: pointer;
					@media screen and (max-width: 767px) {
						top: -44px;
						width: 36px;
						height: 36px;
						background-size: 36px;
					}
				}
				.instagram__modal-content-img {
					text-align: center;
					width: 326px;
					img {
						width: auto;
						height: 100%;
					}
					@media screen and (max-width: 767px) {
						width: 100%;
						margin-bottom: 15px;
						img {
							width: auto;
							height: 230px;
							margin: 0 auto;
							display: block;
						}
					}
				}
				.instagram__modal-content-txt {
					width: 366px;
					@media screen and (max-width: 767px) {
						width: 100%;
					}
					.instagram__modal-content-ttl {
						color: #000;
						font-size: 18px;
						font-style: normal;
						font-weight: 700;
						line-height: 150%;
						letter-spacing: 0.7px;
						margin-bottom: 20px;
						@media screen and (max-width: 767px) {
							font-size: 15px;
							line-height: 140%;
						}
					}
					.instagram__modal-content-lead {
						max-height: 200px;
						overflow-y: scroll;
						color: #333;
						font-size: 12px;
						font-style: normal;
						font-weight: 500;
						line-height: 160%;
						letter-spacing: 0.7px;
						margin-bottom: 30px;
						@media screen and (max-width: 767px) {
							max-height: 140px;
						}
					}
					.instagram__modal-content-link {
						text-align: center;
						a {
							display: inline-block;
							padding: 16px 84px;
							background: #962124;
							color: var(--fff, #FFF);
							font-size: 16px;
							font-style: normal;
							font-weight: 400;
							line-height: 16px;
							letter-spacing: 1.6px;
							transition: opacity 0.6s;
							&:hover {
								opacity: 0.6;
							}
							@media screen and (max-width: 767px) {
								font-size: 15px;
								padding: 16px 64px;
							}
						}
					}
				}
			}
		}
	}
}