@charset "utf-8";

.insta-wrapper {
	background-color: #fff;
	padding-bottom: 30px;
}

.insta-title-body {
	margin-bottom: 88px;
}

.insta-title-cnt {
	max-width: 780px;
	margin: 0 auto;
	display: flex;
}

.insta-logoimg {
	width: 155px;
	margin-right: 54px;
}

.insta-more a {
	display: block;
	position: relative;
	border: 1px solid #333;
	padding: 8px 12px 8px 60px;
	width: 35px;
}

.insta-more a::before {
	position: absolute;
	top: 12px;
	left: 8px;
	content: '';
	width: 40px;
	height: 8px;
	border-bottom: 1px solid #000;
	border-right: 1px solid #000;
	transform: skew(45deg);
}

.insta-container {
	display: flex;
	flex-wrap: wrap;
	gap: 2%;
	justify-content: flex-start;
	max-width: 780px;
	margin: 0 auto;
}

.insta-media {
	position: relative;
	/* max-width: 160px; */
	width: 32%;
	margin-bottom: 30px;
}

.insta-media img {
	max-width: 100%;
	aspect-ratio: 1/1;
	object-fit: cover;
	display: block;
	width: 100%;
	height: auto;
}

.like-count,
.comments-count {
	position: absolute;
	bottom: 0;
	color: #fff;
	filter: drop-shadow(1px 1px 1px #333);
}

.like-count {
	right: 22%;
	font-size: 10px;
}

.comments-count {
	right: 3%;
	font-size: 10px;
}

.like-count::before {
	content: "";
	display: inline-block;
	height: 11px;
	width: 11px;
	vertical-align: -2px;
	margin-right: 5px;
	background-size: cover;
	background-repeat: no-repeat;
	/*アイコンのSVG画像*/
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%23ffffff' viewBox='0 0 16 16'%3E  %3Cpath d='M8.864.046C7.908-.193 7.02.53 6.956 1.466c-.072 1.051-.23 2.016-.428 2.59-.125.36-.479 1.013-1.04 1.639-.557.623-1.282 1.178-2.131 1.41C2.685 7.288 2 7.87 2 8.72v4.001c0 .845.682 1.464 1.448 1.545 1.07.114 1.564.415 2.068.723l.048.03c.272.165.578.348.97.484.397.136.861.217 1.466.217h3.5c.937 0 1.599-.477 1.934-1.064a1.86 1.86 0 0 0 .254-.912c0-.152-.023-.312-.077-.464.201-.263.38-.578.488-.901.11-.33.172-.762.004-1.149.069-.13.12-.269.159-.403.077-.27.113-.568.113-.857 0-.288-.036-.585-.113-.856a2.144 2.144 0 0 0-.138-.362 1.9 1.9 0 0 0 .234-1.734c-.206-.592-.682-1.1-1.2-1.272-.847-.282-1.803-.276-2.516-.211a9.84 9.84 0 0 0-.443.05 9.365 9.365 0 0 0-.062-4.509A1.38 1.38 0 0 0 9.125.111L8.864.046zM11.5 14.721H8c-.51 0-.863-.069-1.14-.164-.281-.097-.506-.228-.776-.393l-.04-.024c-.555-.339-1.198-.731-2.49-.868-.333-.036-.554-.29-.554-.55V8.72c0-.254.226-.543.62-.65 1.095-.3 1.977-.996 2.614-1.708.635-.71 1.064-1.475 1.238-1.978.243-.7.407-1.768.482-2.85.025-.362.36-.594.667-.518l.262.066c.16.04.258.143.288.255a8.34 8.34 0 0 1-.145 4.725.5.5 0 0 0 .595.644l.003-.001.014-.003.058-.014a8.908 8.908 0 0 1 1.036-.157c.663-.06 1.457-.054 2.11.164.175.058.45.3.57.65.107.308.087.67-.266 1.022l-.353.353.353.354c.043.043.105.141.154.315.048.167.075.37.075.581 0 .212-.027.414-.075.582-.05.174-.111.272-.154.315l-.353.353.353.354c.047.047.109.177.005.488a2.224 2.224 0 0 1-.505.805l-.353.353.353.354c.006.005.041.05.041.17a.866.866 0 0 1-.121.416c-.165.288-.503.56-1.066.56z'/%3E%3C/svg%3E");
}

.comments-count::before {
	content: "";
	display: inline-block;
	height: 11px;
	width: 11px;
	vertical-align: -2px;
	margin-right: 5px;
	background-repeat: no-repeat;
	background-size: cover;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%23ffffff' viewBox='0 0 16 16'%3E  %3Cpath d='M2.678 11.894a1 1 0 0 1 .287.801 10.97 10.97 0 0 1-.398 2c1.395-.323 2.247-.697 2.634-.893a1 1 0 0 1 .71-.074A8.06 8.06 0 0 0 8 14c3.996 0 7-2.807 7-6 0-3.192-3.004-6-7-6S1 4.808 1 8c0 1.468.617 2.83 1.678 3.894zm-.493 3.905a21.682 21.682 0 0 1-.713.129c-.2.032-.352-.176-.273-.362a9.68 9.68 0 0 0 .244-.637l.003-.01c.248-.72.45-1.548.524-2.319C.743 11.37 0 9.76 0 8c0-3.866 3.582-7 8-7s8 3.134 8 7-3.582 7-8 7a9.06 9.06 0 0 1-2.347-.306c-.52.263-1.639.742-3.468 1.105z'/%3E%3C/svg%3E");
}

.video-icon {
	position: absolute;
	top: 1px;
	right: 3px;
	filter: drop-shadow(1px 1px 1px #333);
}

.video-icon::before {
	content: "";
	display: inline-block;
	height: 13px;
	width: 13px;
	background-repeat: no-repeat;
	background-size: contain;
	background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' width='24' height='24' fill='%23ffffff' xmlns='http://www.w3.org/2000/svg'%3E%3Cg stroke='%23ffffff' stroke-linejoin='round' stroke-width='2'%3E%3Cpath d='M2.0493 7.002 21.9503 7.002' fill='none'/%3E%3Cpath stroke-linecap='round' d='M13.50427 2.001 16.36227 7.002' fill='none'/%3E%3Cpath stroke-linecap='round' d='M7.20677 2.1099 10.00177 7.0019' fill='none'/%3E%3Cpath d='M2 12.001v3.449c0 2.849.698 4.006 1.606 4.945.94.908 2.098 1.607 4.946 1.607h6.896c2.848 0 4.006-.699 4.946-1.607.908-.939 1.606-2.096 1.606-4.945V8.552c0-2.848-.698-4.006-1.606-4.945C19.454 2.699 18.296 2 15.448 2H8.552c-2.848 0-4.006.699-4.946 1.607C2.698 4.546 2 5.704 2 8.552z' stroke-linecap='round' fill='none'/%3E%3C/g%3E%3Cpath d='M9.763 17.664a.908.908 0 0 1-.454-.787V11.63a.909.909 0 0 1 1.364-.788l4.545 2.624a.909.909 0 0 1 0 1.575l-4.545 2.624a.91.91 0 0 1-.91 0z' fill-rule='evenodd'/%3E%3C/svg%3E");
}

.multi-icon {
	position: absolute;
	top: 0.5px;
	right: 2px;
	filter: drop-shadow(1px 1px 1px #333);
}

.multi-icon::before {
	content: "";
	display: inline-block;
	height: 13px;
	width: 13px;
	background-repeat: no-repeat;
	background-size: contain;
	background-image: url("data:image/svg+xml,%3Csvg aria-label='カルーセル' fill='%23ffffff' height='20' role='img' viewBox='0 0 48 48' width='20' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M34.8 29.7V11c0-2.9-2.3-5.2-5.2-5.2H11c-2.9 0-5.2 2.3-5.2 5.2v18.7c0 2.9 2.3 5.2 5.2 5.2h18.7c2.8-.1 5.1-2.4 5.1-5.2zM39.2 15v16.1c0 4.5-3.7 8.2-8.2 8.2H14.9c-.6 0-.9.7-.5 1.1 1 1.1 2.4 1.8 4.1 1.8h13.4c5.7 0 10.3-4.6 10.3-10.3V18.5c0-1.6-.7-3.1-1.8-4.1-.5-.4-1.2 0-1.2.6z'/%3E%3C/svg%3E");
}


.insta-media {
	animation: fadeInThumbs .9s;
}

@keyframes fadeInThumbs {
	0% {
		opacity: 0;
	}

	100% {
		opacity: 1;
	}
}

.insta-media {
	position: relative;
	overflow: hidden;
}

.insta-thumb {
	position: relative;
}

.insta-thumb img {
	width: 100%;
	display: block;
}

/* .insta-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  background: rgba(0,0,0,0.5);
  color: #fff;
  display: flex;
  justify-content: space-between;
  padding: 6px 10px;
  font-size: 0.9rem;
} */
.insta-meta {
	padding: 8px 0;
}

.insta-date {
	display: block;
	font-size: 11px;
	color: #333;
	margin-bottom: 4px;
	font-weight: bold;
}

.insta-caption {
	font-size: 12px;
	line-height: 1.4;
	color: #333;
}