@charset "UTF-8";

/* Media Quary */
@mixin mq($breakpoint: md){
	@media #{map-get($breakpoints, $breakpoint)} {
		@content;
	}
}

$breakpoints: (
	'md': 'screen and (max-width: 767px)',
	'md-min': 'screen and (min-width: 768px)',
) !default;


/*
	受賞作品をカード形式で表示
	デフォルトは佳作作品
*/
.sakuhin2025{
	@include mq{
		padding-left: 0 !important;
		padding-right: 0 !important;
	}

	.container{
		max-width: 920px;
		margin: 0 auto;
		padding: 0;
	}
	.card-grid{
		display: grid;
		grid-template-columns: 1fr;
		gap: 16px;
	}
	.photo-card{
		display: flex;
		flex-direction: column;
		padding-bottom: 5rem;
	}
	.card-image-container{
		height: 220px;
		&:hover .card-image {
			@include mq(md-min){
				transform: scale(1.2);
			}
		}

		/* 縦位置写真の時は次のクラスを付加 */
		&.vertical{
			height: 340px;
		}
	}
	.card-image{
		width: 100%;
		height: 100%;
		object-fit: contain;
		transition: transform 0.2s ease;
	}
	.card-text-content{
		flex-grow: 1;
		.card-title {
			margin-bottom: 8px;
		}
		.detail-item {
			display: flex;
			padding: 0;
			font-size: 14px;
		}
		.detail-label {
			// width: 6em;
			min-width: 6em;
			margin-right: 1.5em;
			color: #666;
			font-weight: 700;
		}
	}

	/* 大賞の場合 */
	.taishou{
		.card-image-container{
			max-width: 640px;
			height: auto;
			margin: 0 auto;
		}
		.card-text-content{
			.card-title{
				font-size: 2rem;
			}
		}
	}

	/* 入賞の場合 */
	.nyuushou{
		.photo-card{
			flex-direction: row;
			padding-bottom: 1rem;
			border-bottom: #ccc dotted 3px;
			@include mq{
				flex-direction: column;
			}
		}
		.card-image-container{
			max-width: 410px;
			height: auto;
			flex-shrink: 0;
		}
		.card-text-content{
			flex-grow: unset;
			padding: 1rem 3rem;
			@include mq{
				padding: 0;
			}
		}
	}

	/* 佳作の場合 */
	.kasaku{
		.card-grid{
			grid-template-columns: repeat(3, 1fr);
			@include mq{
				grid-template-columns: 1fr;
			}
		}
	}

	/* インスタ部門 */
	.d-instagram{
		.hd_shiraito{
			@include mq{
				font-size: 21px;
			}
		}
		.taishou{
			.card-grid{
				width: fit-content;
				margin: 0 auto;
			}
		}
		.nyuushou{
			.card-image.vertical{
				padding: 0 6rem;
			}
		}
	}
}