@charset "UTF-8";

/* * * * uiCard * * * */
.c-uiCard {
	display: flex;
	flex-wrap: wrap;
	gap: 24px;
	align-items: flex-start;
	justify-content: flex-start;
	margin-top: 8px;
}

/* モバイル〜タブレット：2列 */
.c-uiCard__item {
	flex: 0 0 calc((100% - 24px) / 2); /* 2列 → gap1つ */
	overflow: hidden;
	position: relative;
	/*margin-bottom: 12px;*/
}
.c-uiCard__item--horizontal {
	flex: 0 0 calc((100% - 24px) / 2);
}
.c-uiCard__item--vertical {
	flex: 0 0 calc((100% - 48px) / 3); /* 3列 → gap2つ */
}

@media only screen and (min-width: 768px) {.c-uiCard__item {
	margin-bottom: 24px;
	}
  .c-uiCard__item--vertical {
    flex: 0 0 calc((100% - 72px) / 4); /* 4列: gap 3つ分 */
  }
}
/* 1280px以上：3列（horizontal） / 5列（vertical） */
@media only screen and (min-width: 1280px) {
	.c-uiCard__item {
		flex: 0 0 calc((100% - 48px) / 3); /* 3列 → gap2つ */
	margin-bottom: 36px;
	}
	.c-uiCard__item--horizontal {
		flex: 0 0 calc((100% - 48px) / 3);
	}
	.c-uiCard__item--vertical {
		flex: 0 0 calc((100% - 96px) / 5); /* 5列 → gap4つ */
	}
}

/* 1440px以上：4列（horizontal） / 6列（vertical） */
@media only screen and (min-width: 1440px) {
	.c-uiCard__item {
		flex: 0 0 calc((100% - 72px) / 4); /* 4列 → gap3つ */
	margin-bottom: 48px;
	}
	.c-uiCard__item--horizontal {
		flex: 0 0 calc((100% - 72px) / 4);
	}
	.c-uiCard__item--vertical {
		flex: 0 0 calc((100% - 120px) / 6); /* 6列 → gap5つ */
	}
}

/*.c-uiCard{
	display:flex;
	align-items: flex-start;
	justify-content: flex-start;
	flex-wrap: wrap;
	margin-top: 8px;
}

.c-uiCard__item{
	width: 50%;
	padding: 0 8px;
	overflow: hidden;
	position: relative;
	margin-bottom:48px;
}
.c-uiCard__item--horizontal{
	width: 50%;
}
.c-uiCard__item--vertical{
	width: 33.33%;
}
@media only screen and (min-width:1280px){
.c-uiCard__item{
	padding: 0 16px;
	width: 33.33%;
}
.c-uiCard__item--horizontal{
	width: 33.33%;
}
.c-uiCard__item--vertical{
	width: 20%;
}
}
@media only screen and (min-width:1440px){
.c-uiCard__item{
	width: 25%;
}
.c-uiCard__item--horizontal{
	width: 25%;
}
.c-uiCard__item--vertical{
	width: 16.66%;
}
}*/

.c-uiCard__item:hover {
}

.c-uiCard__link{
	text-decoration:none;
}

.c-uiCard__metas a{
	color: var(--font-color);
	font-size:10px;
	margin-top:10px;
}

/*.c-uiCard__metas a{
	color: var(--font-color);
	font-size:10px;
	text-decoration: none;
    padding: 5px 10px;
    border-radius: 9999px;
    border: 1px solid var(--font-color);
    display: inline-block;
	margin-top:10px;
}
.c-uiCard__metas a:hover{
	color:#fff;
    background-color: var(--main-color);
}*/
.c-uiCard__times__modified{
	flex-grow: 1;
}

.c-uiCard__times__createdAt{
	color:#d0021b;
	flex-shrink: 0;
}

.c-uiCard__excerpt{
	display:none;
}
@media only screen and (min-width:768px){
.c-uiCard__excerpt{
	display:block;
}
}

.c-uiCard__thumb{
	border-radius: 8px;
	overflow:hidden;
	position: relative;
}

.c-uiCard__background{
    height: 100%;
    width: 100%;
	position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
	background-size:cover;
	background-position:center;
	background-repeat:no-repeat;
	filter: blur(5px);
	opacity: 0.5;
}
.c-uiCard__figure{
	background-color:var(--light-gray);
	margin-bottom:0;
}
.c-uiCard__figure::before{
content: "";
    display: block;
    height: 0;
    padding-top: 75%;
}
.single .c-uiCard__figure::before{
    display: none;
}

.c-uiCard__item--horizontal .c-uiCard__figure::before{
    padding-top: 56.25%;
}
.c-uiCard__item--vertical .c-uiCard__figure::before{
    padding-top: 200%;
}


.c-uiCard__img{
	display: block;
    height: 100%;
    width: 100%;
	object-fit: contain;
	position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
}

.single .c-uiCard__img{
	position:static;
	
}
.c-uiCard__body{
	flex-grow: 1;
}


	/* フェードイン用 */
.fade-in {
  opacity: 0;
  transform: translateY(10px);
  animation: fadeInUp 1s ease forwards;
}

@keyframes fadeInUp {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}







.attached-videos {
    display: grid;
    grid-gap: 1em;
    grid-template-columns: 1fr;
    margin: 1em 0;
}

@media (min-width: 1280px) {
    .attached-videos {
        grid-template-columns: repeat(2, 1fr);
    }
}

.attached-video-item {
    /* 動画自体がレスポンシブになるように、必要に応じて調整 */
}