div.item-image {
	position: relative;

	&:before {
		content: "";
		display: block;
		padding-top: 177.7%;
	}

	img,
	div.video {
		position: absolute;
		top: 0;
		left: 0;
		bottom: 0;
		right: 0;
		width: 100%;
		height: 100%;
		object-fit: cover;
	}

}
div.item {
	div.item-image {
		div.video {
			div.video-inner {
				height: 100%;

				video {
					width: 100%;
					height: 100%;
					object-fit: cover;
				}

			}

			div.sound {
				position: absolute;
				right: 20px;
				bottom: 20px;
				width: 40px;
				height: 40px;
				cursor: pointer;
				background-repeat: no-repeat;
				background-position: center;
				background-size: contain;
				background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz48c3ZnIHZlcnNpb249IjEuMSIgaWQ9IuODrOOCpOODpOODvF8xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4PSIwcHgiIHk9IjBweCIgdmlld0JveD0iMCAwIDUwMCA1MDAiIHN0eWxlPSJlbmFibGUtYmFja2dyb3VuZDpuZXcgMCAwIDUwMCA1MDA7IiB4bWw6c3BhY2U9InByZXNlcnZlIj48c3R5bGUgdHlwZT0idGV4dC9jc3MiPi5zdDB7ZmlsbDojMTExMTExO3N0cm9rZTojRkZGRkZGO3N0cm9rZS13aWR0aDoxNTtzdHJva2UtbGluZWpvaW46cm91bmQ7fS5zdDF7ZmlsbDpub25lO3N0cm9rZTojMTExMTExO3N0cm9rZS13aWR0aDoyMDtzdHJva2UtbGluZWNhcDpyb3VuZDt9LnN0MntkaXNwbGF5Om5vbmU7c3Ryb2tlOiNGRkZGRkY7c3Ryb2tlLXdpZHRoOjEwO3N0cm9rZS1saW5lY2FwOnJvdW5kO308L3N0eWxlPjxwYXRoIGNsYXNzPSJzdDAiIGQ9Ik0yNjIuNiw5MS44bC0xMTQuNCw5OC45SDQwVjMxOGgxMDYuNmwxMTYsMTAwLjNWOTEuOHoiLz48cGF0aCBjbGFzcz0ic3QxIiBkPSJNMzIwLDE4NGMyOC40LDQzLjMsMjguNCw5OS40LDAsMTQyLjcgTTM2Ny4zLDEzNi43YzUyLDcwLjYsNTIsMTY2LjgsMCwyMzcuMyBNNDEwLjcsOTMuM2M3Niw5NC42LDc2LDIyOS40LDAsMzI0Ii8+PHBhdGggY2xhc3M9InN0MiIgZD0iTTM5OS42LDg4LjhsLTM0MiwzNDJjLTMuMywzLjMtOC43LDMuMy0xMiwwbC02LjctNi43Yy0zLjMtMy4zLTMuMy04LjcsMC0xMmwzNDItMzQyYzMuMy0zLjMsOC43LTMuMywxMiwwbDYuNyw2LjdDNDAyLjksODAsNDAyLjksODUuNSwzOTkuNiw4OC44eiIvPjwvc3ZnPg==);

				&:hover {
					opacity: 0.7;
				}

			}

			div.icon-area {
				position: absolute;
				left: 0;
				top: 0;
				width: 100%;
				height: 100%;

				display: flex;
				align-items: center;
				justify-content: center;

				div.icon {
					width: 100px;
					height: 100px;
					border-radius: 50%;
					border: solid 2px #fff;
					box-sizing: border-box;

					&:hover {
						border-color: #ff9c3d;

						&:before {
							border-color: transparent transparent transparent #ff9c3d;
						}
					}

					&:before {
						content: "";
						position: absolute;
						left: 5px;
						top: 0;
						right: 0;
						bottom: 0;
						width: 0;
						height: 0;
						margin: auto;

						border-style: solid;
						border-color: transparent transparent transparent #fff;
						border-width: 15px 0 15px 25px;
					}


				}

			}

			div.progress-bar {
				display: none;
				position: absolute;
				top: 0;
				left: 0;
				width: 100%;
				height: 3px;
				background: rgba(0, 200, 255, 0.8);
				transform: scaleX(0);
				transform-origin: left;
				transition: transform 1.0s;
			}

		}
	}

	&[data-video-sound="0"] {
		div.item-image {
			div.video {
				div.sound {
					background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz48c3ZnIHZlcnNpb249IjEuMSIgaWQ9IuODrOOCpOODpOODvF8xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4PSIwcHgiIHk9IjBweCIgdmlld0JveD0iMCAwIDUwMCA1MDAiIHN0eWxlPSJlbmFibGUtYmFja2dyb3VuZDpuZXcgMCAwIDUwMCA1MDA7IiB4bWw6c3BhY2U9InByZXNlcnZlIj48c3R5bGUgdHlwZT0idGV4dC9jc3MiPi5zdDB7ZmlsbDojMTExMTExO3N0cm9rZTojRkZGRkZGO3N0cm9rZS13aWR0aDoxNTtzdHJva2UtbGluZWpvaW46cm91bmQ7fS5zdDF7ZmlsbDpub25lO3N0cm9rZTojMTExMTExO3N0cm9rZS13aWR0aDoyMDtzdHJva2UtbGluZWNhcDpyb3VuZDt9LnN0MntzdHJva2U6I0ZGRkZGRjtzdHJva2Utd2lkdGg6MTA7c3Ryb2tlLWxpbmVjYXA6cm91bmQ7fTwvc3R5bGU+PHBhdGggY2xhc3M9InN0MCIgZD0iTTI2Mi42LDkxLjhsLTExNC40LDk4LjlINDBWMzE4aDEwNi42bDExNiwxMDAuM1Y5MS44eiIvPjxwYXRoIGNsYXNzPSJzdDEiIGQ9Ik0zMjAsMTg0YzI4LjQsNDMuMywyOC40LDk5LjQsMCwxNDIuNyBNMzY3LjMsMTM2LjdjNTIsNzAuNiw1MiwxNjYuOCwwLDIzNy4zIE00MTAuNyw5My4zYzc2LDk0LjYsNzYsMjI5LjQsMCwzMjQiLz48cGF0aCBjbGFzcz0ic3QyIiBkPSJNMzk5LjYsODguOGwtMzQyLDM0MmMtMy4zLDMuMy04LjcsMy4zLTEyLDBsLTYuNy02LjdjLTMuMy0zLjMtMy4zLTguNywwLTEybDM0Mi0zNDJjMy4zLTMuMyw4LjctMy4zLDEyLDBsNi43LDYuN0M0MDIuOSw4MCw0MDIuOSw4NS41LDM5OS42LDg4Ljh6Ii8+PC9zdmc+);
				}
			}
		}
	}

	&[data-video-state="1"] {
		div.item-image {
			div.video {
				div.icon-area {
					div.icon {
						display: none;
					}
				}

				div.progress-bar {
					display: block;
					transform: scaleX(1);
				}

			}
		}
	}

	&[data-load-state="2"] {
		div.item-image {
			div.video {
				div.progress-bar {
					display: none;
				}
			}
		}
	}

	/* Small Play Icon */
	&[data-play-icon-small="1"] {
		div.item-image {
			div.video {
				div.icon-area {
					left: 10px;
					top: auto;
					bottom: 10px;
					right: auto;
					width: 30px;
					height: 30px;

					div.icon {
						width: 100%;
						height: 100%;

						&:before,
						&:after {
							content: "";
							position: absolute;
						}
					}
				}

				div.sound {
					right: 10px;
					bottom: 10px;
					width: 30px;
					height: 30px;
				}

			}
		}

		&[data-video-state="1"] {
			div.item-image {
				div.video {
					div.icon-area {
						&:hover {
							div.icon {
								&:before,
								&:after {
									background: #ff9c3d;
								}

								&:before {
									left: 2px;
									border-width: 5px 0 5px 8px;
								}

							}
						}

						div.icon {
							display: block;

							&:before,
							&:after {
								top: 0;
								bottom: 0;
								left: 0;
								right: 0;
								margin: auto;

								width: 3px;
								height: 40%;
								border: none;
								background: #fff;
							}

							&:before {
								left: -7px;
							}
							&:after {
								left: 7px;
							}
						}
					}
				}
			}
		}
	}
}

@keyframes video-progress-bar {
	0% {
	}
	100% {
		transform: scaleX(1);
	}
}



div.item[data-video-state="1"][data-play-hover="1"] div.item-image div.video div.icon-area {
	display: none;
}


/* Flick */
div.pointer-area {
	position: absolute;
	bottom: 10px;
	width: 100%;

	div.pointer {
		text-align: center;

		div.pointer-inner {
			display: inline-flex;
			align-items: center;

			div {
				width: 6px;
				height: 6px;
				display: inline-block;
				background: #111;
				background: -webkit-gradient(linear,center top,center bottom,from(#111),to(#111));
				background: -moz-linear-gradient(top,#111,#111);
				-webkit-box-shadow: 0 0.1em 0 0 rgba(255, 255, 255, 0.4);
				-mox-box-shadow: 0 0.1em 0 0 rgba(255, 255, 255, 0.4);
				box-shadow: 0 0.1em 0 0 rgba(255, 255, 255, 0.4);
				-webkit-border-radius: 100%;
				-moz-border-radius: 100%;
				border-radius: 100%;
				opacity: .7;
				margin: 0 1px;

				&.current {
					background:#fff;
					background:-webkit-gradient(linear,center top,center bottom,from(#fff),to(#fff));
					background:-moz-linear-gradient(top,#fff,#fff);
					opacity:1;
					-webkit-box-shadow:0 0 0.2em rgba(255,255,255,0.6);
					-mox-box-shadow:0 0 0.2em rgba(255,255,255,0.6);
					box-shadow:0 0 0.2em rgba(255,255,255,0.6)
				}
			}
		}
	}
}




/* Main Image */
div.main-image-area {
	position: relative;
	height: 500px;
	overflow: hidden;

	div.main-image-inner {
		position: absolute;
		top: 0;
		left: 0;
		width: 300%;
		height: 100%;

		display: flex;
		align-items: start;

		div.item {
			width: 100%;
			height: 100%;

			div.image {
				height: 100%;
			}

		}

	}

	div.item-image:before {
		display: none;
	}

	div.image-area {
		height: 100%;
	}
}



/* Main Explain */
div.main-explain-area {
	margin-top: 70px;

	div.main-explain-title {
		display: flex;
		align-items: center;
		line-height: normal;
		margin-bottom: 15px;

		div.title {
			color: #258CB8;
			font-size: 350%;
			font-weight: bold;
		}

		div.subtitle {
			color: #767676;
			margin-left: 10px;
			font-size: 300%;
		}
	}

	div.main-explain-message {
		color: #484848;
		font-size: 130%;
		line-height: normal;
	}
}



/* Gallery */
div.gallery-area {
	display: flex;
	align-items: start;
	justify-content: center;
	margin-top: 30px;

	div.item {
		width: 33%;
		margin: 0 15px 15px 0;
		padding: 15px;
		background: #fff;
		line-height: normal;

		&:hover {
			opacity: 0.8;
		}

		&[data-media-type="5"]:hover {
			opacity: 1;
		}

		div.title {
			color: #484848;
			font-weight: bold;
			font-size: 150%;
			margin-top: 30px;
		}

		div.explain {
			color: #484848;
			font-size: 130%;
		}
	}
}



/* Count */
div.count-area {
	display: flex;
	align-items: center;
	height: 250px;
	margin-top: 30px;
	background: #f2f2f2;

	div.item {
		width: 33%;
		text-align: center;

		a {
			display: inline-block;
			color: #484848;

			&:hover {
				color: #ff9c3d;
			}

			div.title {
				font-size: 300%;
				font-weight: bold;
				line-height: normal;
			}

			div.explain {
				font-size: 130%;
			}
		}
	}
}



/* List */
div.list-area {
	margin-top: 60px;

	div.list-title-area {
		color: #484848;
		font-size: 240%;
		font-weight: bold;
		margin-bottom: 30px;
		padding-bottom: 30px;
		border-bottom: solid 1px #eee;

		input {
			font-weight: bold;
			font-size: 200%;
		}

	}

	div.list-content-area {
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
		gap: 32px;

		div.item {
			line-height: normal;
			background: #fff;
			margin-bottom: 30px;

			&:hover {
				opacity: 0.8;
			}

			&[data-media-type="5"]:hover {
				opacity: 1;
			}

			div.title {
				color: #484848;
				font-weight: bold;
				font-size: 150%;
				margin-top: 30px;
			}
		}
	}
}



div.gallery-area div.item div.item-image div.video div.icon-area div.icon,
div.list-area div.item div.item-image div.video div.icon-area div.icon {
	width: 80px;
	height: 80px;
}

div.gallery-area div.item div.item-image div.video div.sound,
div.list-area div.item div.item-image div.video div.sound {
	display: none;
}