/* Layout */
#wrapper {
	width: auto;
}
div.inner-block,
div.cautionTitle,
p.caution {
	width: 1120px;
	margin: 0 auto;
}
div.body-area {
	margin-bottom: 100px;
}



/* Common */
a {
	text-decoration: none;
}
div.item-image {
	position: relative;
}
div.item-image:before {
	content: "";
	display: block;
	padding-top: 66.7%;
}
div.item-image img,
div.item-image 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%;
}
div.item div.item-image div.video div.video-inner video {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
div.item div.item-image div.video 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==);
}
div.item[data-video-sound="0"] div.item-image div.video div.sound {
	background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz48c3ZnIHZlcnNpb249IjEuMSIgaWQ9IuODrOOCpOODpOODvF8xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4PSIwcHgiIHk9IjBweCIgdmlld0JveD0iMCAwIDUwMCA1MDAiIHN0eWxlPSJlbmFibGUtYmFja2dyb3VuZDpuZXcgMCAwIDUwMCA1MDA7IiB4bWw6c3BhY2U9InByZXNlcnZlIj48c3R5bGUgdHlwZT0idGV4dC9jc3MiPi5zdDB7ZmlsbDojMTExMTExO3N0cm9rZTojRkZGRkZGO3N0cm9rZS13aWR0aDoxNTtzdHJva2UtbGluZWpvaW46cm91bmQ7fS5zdDF7ZmlsbDpub25lO3N0cm9rZTojMTExMTExO3N0cm9rZS13aWR0aDoyMDtzdHJva2UtbGluZWNhcDpyb3VuZDt9LnN0MntzdHJva2U6I0ZGRkZGRjtzdHJva2Utd2lkdGg6MTA7c3Ryb2tlLWxpbmVjYXA6cm91bmQ7fTwvc3R5bGU+PHBhdGggY2xhc3M9InN0MCIgZD0iTTI2Mi42LDkxLjhsLTExNC40LDk4LjlINDBWMzE4aDEwNi42bDExNiwxMDAuM1Y5MS44eiIvPjxwYXRoIGNsYXNzPSJzdDEiIGQ9Ik0zMjAsMTg0YzI4LjQsNDMuMywyOC40LDk5LjQsMCwxNDIuNyBNMzY3LjMsMTM2LjdjNTIsNzAuNiw1MiwxNjYuOCwwLDIzNy4zIE00MTAuNyw5My4zYzc2LDk0LjYsNzYsMjI5LjQsMCwzMjQiLz48cGF0aCBjbGFzcz0ic3QyIiBkPSJNMzk5LjYsODguOGwtMzQyLDM0MmMtMy4zLDMuMy04LjcsMy4zLTEyLDBsLTYuNy02LjdjLTMuMy0zLjMtMy4zLTguNywwLTEybDM0Mi0zNDJjMy4zLTMuMyw4LjctMy4zLDEyLDBsNi43LDYuN0M0MDIuOSw4MCw0MDIuOSw4NS41LDM5OS42LDg4Ljh6Ii8+PC9zdmc+);
}
div.item div.item-image div.video div.sound:hover {
	opacity: 0.7;
}
div.item div.item-image div.video div.icon-area {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;

	display: flex;
	align-items: center;
	justify-content: center;
}
div.item div.item-image div.video div.icon-area div.icon {
	width: 100px;
	height: 100px;
	border-radius: 50%;
	border: solid 2px #fff;
	box-sizing: border-box;
}
div.item div.item-image div.video div.icon-area div.icon:hover {
	border-color: #ff9c3d;
}
div.item div.item-image div.video div.icon-area div.icon: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.item div.item-image div.video div.icon-area div.icon:hover:before {
	border-color: transparent transparent transparent #ff9c3d;
}
div.item[data-video-state="1"] div.item-image div.video div.icon-area div.icon {
	display: none;
}
div.item div.item-image div.video 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;
}
div.item[data-video-state="1"] div.item-image div.video div.progress-bar {
	display: block;
}
div.item[data-load-state="1"] div.item-image div.video div.progress-bar {
	transform: scaleX(1);
}
div.item[data-load-state="2"] div.item-image div.video div.progress-bar {
	display: none;
}

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



/* Small Play Icon */
div.item[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.item[data-play-icon-small="1"] div.item-image div.video div.icon-area div.icon {
	width: 100%;
	height: 100%;
}
div.item[data-play-icon-small="1"] div.item-image div.video div.icon-area div.icon:before,
div.item[data-play-icon-small="1"] div.item-image div.video div.icon-area div.icon:after {
	content: "";
	position: absolute;
}
div.item[data-play-icon-small="1"][data-video-state="1"] div.item-image div.video div.icon-area:hover div.icon:before,
div.item[data-play-icon-small="1"][data-video-state="1"] div.item-image div.video div.icon-area:hover div.icon:after {
	background: #ff9c3d;
}
div.item[data-play-icon-small="1"] div.item-image div.video div.icon-area div.icon:before {
	left: 2px;
	border-width: 5px 0 5px 8px;
}
div.item[data-play-icon-small="1"][data-video-state="1"] div.item-image div.video div.icon-area div.icon {
	display: block;
}
div.item[data-play-icon-small="1"][data-video-state="1"] div.item-image div.video div.icon-area div.icon:before,
div.item[data-play-icon-small="1"][data-video-state="1"] div.item-image div.video div.icon-area div.icon:after {
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	margin: auto;

	width: 3px;
	height: 40%;
	border: none;
	background: #fff;
}
div.item[data-play-icon-small="1"][data-video-state="1"] div.item-image div.video div.icon-area div.icon:before {
	left: -7px;
}
div.item[data-play-icon-small="1"][data-video-state="1"] div.item-image div.video div.icon-area div.icon:after {
	left: 7px;
}
div.item[data-play-icon-small="1"] div.item-image div.video div.sound {
	right: 10px;
	bottom: 10px;
	width: 30px;
	height: 30px;
}
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-area div.pointer {
	text-align: center;
}
div.pointer-area div.pointer div.pointer-inner {
	display: inline-flex;
	align-items: center;
}
div.pointer-area div.pointer div.pointer-inner 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;
}
div.pointer-area div.pointer div.pointer-inner div.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-area div.main-image-inner {
	position: absolute;
	top: 0;
	left: 0;
	width: 300%;
	height: 100%;

	display: flex;
	align-items: start;
}
div.main-image-area div.main-image-inner div.item {
	width: 100%;
	height: 100%;
}
div.main-image-area div.main-image-inner div.item div.image {
	height: 100%;
}
div.main-image-area div.item-image:before {
	display: none;
}
div.main-image-area div.image-area {
	height: 100%;
}



/* Main Explain */
div.main-explain-area {
	margin-top: 70px;
}
div.main-explain-area div.main-explain-title {
	display: flex;
	align-items: center;
	line-height: normal;
	margin-bottom: 15px;
}
div.main-explain-area div.main-explain-title div.title {
	color: #258CB8;
	font-size: 350%;
	font-weight: bold;
}
div.main-explain-area div.main-explain-title div.subtitle {
	color: #767676;
	margin-left: 10px;
	font-size: 300%;
}
div.main-explain-area 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.gallery-area div.item {
	width: 33%;
	margin: 0 15px 15px 0;
	padding: 15px;
	background: #fff;
	line-height: normal;
}
div.gallery-area div.item:hover {
	opacity: 0.8;
}
div.gallery-area div.item[data-media-type="5"]:hover {
	opacity: 1;
}
div.gallery-area div.item div.title {
	color: #484848;
	font-weight: bold;
	font-size: 150%;
	margin-top: 30px;
}
div.gallery-area div.item div.explain {
	color: #484848;
	font-size: 130%;
}



/* Count */
div.count-area {
	display: flex;
	align-items: center;
	height: 250px;
	margin-top: 30px;
	background: #f2f2f2;
}
div.count-area div.item {
	width: 33%;
	text-align: center;
}
div.count-area div.item a {
	display: inline-block;
	color: #484848;
}
div.count-area div.item a:hover {
	color: #ff9c3d;
}
div.count-area div.item a div.title {
	font-size: 300%;
	font-weight: bold;
	line-height: normal;
}
div.count-area div.item a div.explain {
	font-size: 130%;
}



/* List */
div.list-area {
	margin-top: 60px;
}
div.list-area div.list-title-area {
	color: #484848;
	font-size: 240%;
	font-weight: bold;
	margin-bottom: 30px;
	padding-bottom: 30px;
	border-bottom: solid 1px #eee;
}
div.list-area div.list-title-area input {
	font-weight: bold;
	font-size: 200%;
}
div.list-area div.list-content-area {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
	gap: 32px;
}
div.list-area div.list-content-area div.item {
	line-height: normal;
	background: #fff;
	margin-bottom: 30px;
}
div.list-area div.list-content-area div.item:hover {
	opacity: 0.8;
}
div.list-area div.list-content-area div.item[data-media-type="5"]:hover {
	opacity: 1;
}
div.list-area div.list-content-area div.item 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;
}