.top-wrapper {
	font-family: "Zen Kaku Gothic Antique",sans-serif;
}

.top-inner {
	max-width: 1256px;
	margin: 0 auto;
	padding: 0 16px;
	width: 100%;
}

.top-kv {
	background-color: #fafafa;
	border-bottom: 1px solid #d9d9d9;
	overflow: hidden;
	margin-bottom: 40px;
	padding: 0 0 24px;
}

.top-kv__inner {
	margin: 0 auto;
	max-width: 1016px;
	width: 100%;
}

.top-kv .slick-list {
	overflow: visible;
}

.top-kv img {
	max-width: 100%;
	width: 100%;
}

.top-kv .slick-dots {
	display: flex !important;
	align-items: center;
	justify-content: center;
	margin-top: 32px;
}

.top-kv .slick-dots li {
	margin-right: 8px;
}

.top-kv .slick-dots li:last-child {
	margin-right: 0;
}

.top-kv .slick-dots li:first-child.slick-active.first button::after {
	transition: 5.5s linear;
	width: 100%;
}

.top-kv .slick-dots li:not(:first-child).slick-active button::after {
	transition: 5.5s linear;
	width: 100%;
}

.top-kv .slick-dots button {
	background: #e3e3e3;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	border: 0;
	color: rgba(0,0,0,0);
	cursor: pointer;
	display: block;
	font-size: 0;
	outline: none;
	height: 3px;
	width: 60px;
	margin: 0;
	padding: 0;
	position: relative;
}

.top-kv .slick-dots button::after {
	content: "";
	background: #000;
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
	width: 0;
}

.top-headline {
	margin-bottom: 24px;
}

.top-headline__ttl {
	display: inline-block;
	font-family: "Jost",sans-serif;
	font-size: 32px;
	font-weight: 400;
	letter-spacing: .08em;
	line-height: 1.4375;
	position: relative;
	text-transform: uppercase;
}

.top-headline__ttl::after {
	content: "";
	background-color: #000;
	height: 16px;
	width: 2px;
	transform: rotate(45deg);
	position: absolute;
	left: calc(100% + 8px);
	top: 0;
}

.top-headline__sub {
	color: gray;
	font-size: 12px;
	font-weight: 500;
	letter-spacing: .08em;
}

.top-news {
	overflow: hidden;
	margin-bottom: 44px;
}

.top-news__inner {
	position: relative;
}

.top-news .slick-track {
	margin: 0;
}

.top-news .slick-list {
	overflow: visible;
}

.top-news__nav {
	display: flex;
	align-items: center;
	justify-content: space-between;
	position: absolute;
	right: 16px;
	top: 72px;
	width: 80px;
}

.top-news__nav::after {
	content: "";
	background-color: #d9d9d9;
	height: 26px;
	width: 1px;
	transform: rotate(27deg) translate(-50%, -50%);
	transform-origin: top;
	position: absolute;
	left: 50%;
	top: 50%;
}

.top-news__nav .slick-arrow {
	cursor: pointer;
}

.top-news__nav .slick-arrow.slick-disabled {
	cursor: auto;
	opacity: .5;
}

.top-news__nav .slick-arrow svg {
	display: block;
}

.top-news__list {
	margin: 0 -8px;
}

.top-news__item {
	padding: 0 8px;
}

.top-news__item__img {
	margin-bottom: 15px;
}

.top-news__item__img img {
	box-shadow: 0 4px 12px rgba(0,0,0,.08);
	width: 100%;
}

.top-news__item__info {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 8px;
}

.top-news__item__info .cate {
	background-color: #000;
	color: #fff;
	font-family: "Noto Sans JP",sans-serif;
	font-size: 10px;
	font-weight: 500;
	padding: 4px 8px 5px;
}

.top-news__item__info .date {
	color: gray;
	font-family: "Jost",sans-serif;
	font-size: 10px;
	font-weight: 500;
	letter-spacing: .08em;
}

.top-news__item__ttl {
	font-size: 13px;
	font-weight: 500;
	letter-spacing: .05em;
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
}

.top-products {
	background-color: #fafafa;
	padding: 40px 0;
}

.top-products .top-headline {
	text-align: center;
}

.top-products .top-headline__ttl::after {
	left: 50%;
	top: -10px;
}

.top-products-list {
	position: relative;
	display: flex;
	flex-flow: wrap;
}

.top-products-list::after {
	content: "";
	position: absolute;
	width: 100%;
	height: 100%;
	left: 0;
	top: 0;
	background-color: rgba(0,0,0,.16);
	pointer-events: none;
	z-index: 1;
}

.top-products-list .images-hover {
	position: absolute;
	width: 100%;
	height: 100%;
	left: 0;
	top: 0;
	z-index: 0;
	visibility: hidden;
	overflow: hidden;
	opacity: 0;
	transition: all .4s linear;
	pointer-events: none;
}

.top-products-list .images-hover img {
	width: 100%;
	transition: transform 8s linear;
	height: 100%;
	-o-object-fit: cover;
	object-fit: cover;
}

.top-products-list .image {
	position: relative;
	z-index: 1;
	transition: all .2s linear;
}

.top-products-list .image img {
	width: 100%;
}

.top-products-list .body {
	position: absolute;
	z-index: 3;
	padding: 10px 10px 16px;
	transition: all .35s linear;
	width: 100%;
	bottom: 0;
}

.top-products-list .ttl {
	text-transform: uppercase;
	font-family: "Jost",sans-serif;
	font-size: 20px;
	letter-spacing: .08em;
	margin-bottom: 3px;
}

.top-products-list .txt {
	font-family: "Zen Kaku Gothic Antique",sans-serif;
	font-size: 10px;
}

.top-products-list .item {
	cursor: pointer;
	width: 50%;
}

.top-series {
	padding: 40px 0 80px;
}

.top-series__head {
	margin-bottom: 24px;
}

.top-series__head .top-headline {
	margin-bottom: 0 !important;
}

.top-series__viewmore {
	text-transform: uppercase;
	font-family: "Jost",sans-serif;
	display: block;
}

.top-series-list {
	display: flex;
	flex-flow: wrap;
}

.top-series-list .item {
	cursor: pointer;
	transition: all .35s linear;
	display: block;
	width: 100%;
}

.top-series-list .item:hover {
	opacity: .7;
}

.top-series-list .item img {
	width: 100%;
}

.top-movie {
	color: #fff;
	background-color: #000;
}

.top-movie__left {
	width: calc(100% - 16px);
	position: relative;
	top: -40px;
	text-align: right;
}

.top-movie__left .box-video {
	width: 100%;
	height: calc(100vw - 16px);
	margin-left: auto;
	position: relative;
	overflow: hidden;
}

.top-movie__left .box-video::before {
	content: "";
	background-color: rgba(0,0,0,.35);
	position: absolute;
	left: 0;
	top: 0;
	height: 100%;
	width: 100%;
	z-index: 2;
}

.top-movie__left .box-video video {
	width: 200%;
	height: 100%;
	-o-object-fit: cover;
	object-fit: cover;
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	z-index: 1;
}

.top-movie__left .box-video iframe {
	width: 200%;
	height: 100%;
	-o-object-fit: cover;
	object-fit: cover;
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	z-index: 1;
}

.top-movie__body {
	padding: 16px 32px 48px 32px;
}

.top-movie__body .top-headline__ttl::after {
	background-color: #fff;
}

.top-movie__btn {
	cursor: pointer;
	display: block;
	width: 220px;
	height: 48px;
	line-height: 46px;
	color: #fff;
	letter-spacing: .05em;
	text-align: center;
	border: 1px solid #fff;
	transition: all .3s;
	position: absolute;
	bottom: 30px;
	right: 50%;
	transform: translateX(50%);
	z-index: 5;
}

.top-movie__btn:hover {
	background-color: #fff;
	color: #000;
}

.top-movie__des {
	font-size: 18px;
	margin-bottom: 16px;
	font-weight: 500;
}

.top-movie__txt {
	font-size: 12px;
	margin-bottom: 24px;
	line-height: 2;
}

.top-movie__anchor {
	text-transform: uppercase;
	display: inline-block;
	font-family: "Jost",sans-serif;
	position: relative;
	padding-bottom: 10px;
	color: #fff;
}

.top-movie__anchor::after {
	content: "";
	background: #fff;
	width: 100%;
	height: 1px;
	position: absolute;
	left: 0;
	bottom: 0;
	display: block;
}

.top-movie__anchor:hover::after {
	animation: allLinkBorder .6s linear forwards;
}

@media (min-width: 769px) {

.top-kv {
	margin-bottom: 88px;
	padding: 32px 0 32px;
}

.top-kv__item {
	margin: 0 12px;
}

.top-kv .slick-dots li {
	margin-right: 12px;
}

.top-kv .slick-dots button {
	width: 88px;
}

.top-headline {
	margin-bottom: 32px;
}

.top-headline__ttl {
	font-size: 48px;
}

.top-headline__sub {
	font-size: 16px;
}

.top-news {
	margin-bottom: 88px;
}

.top-news__list {
	margin: 0 -12px;
}

.top-news__item {
	padding: 0 12px;
}

.top-news__item__img {
	margin-bottom: 32px;
}

.top-news__item__img img {
	box-shadow: 0 7px 18px rgba(0,0,0,.09);
}

.top-news__item__info {
	margin-bottom: 16px;
}

.top-news__item__info .cate {
	font-size: 12px;
	padding: 5px 14px 7px;
}

.top-news__item__info .date {
	font-size: 15px;
}

.top-news__item__ttl {
	font-size: 15px;
}

.top-products {
	padding: 80px 0 118px;
}

.top-products-list .body {
	padding: 24px;
	margin-left: 16px;
	bottom: -30px;
	box-shadow: 0 6px 17px rgba(0,0,0,.06);
	background-color: #fff;
	width: calc(25% - 16px);
}

.top-products-list .ttl {
	font-size: 26px;
	margin-bottom: 8px;
}

.top-products-list .txt {
	font-size: 13px;
	color: gray;
}

.top-products-list .item {
	width: 25%;
}

.top-products-list .item:nth-child(1) .body {
	left: 0;
}

.top-products-list .item:nth-child(2) .body {
	left: 25%;
}

.top-products-list .item:nth-child(3) .body {
	left: 50%;
}

.top-products-list .item:nth-child(4) .body {
	left: 75%;
}

.top-products-list .item.no-hover .image {
	opacity: 0;
}

.top-products-list .item.is-hover .images-hover {
	z-index: 2;
	visibility: visible;
	opacity: 1;
}

.top-products-list .item.is-hover .images-hover img {
	transform: scale(1.3);
}

.top-products-list .item.is-hover .image {
	visibility: hidden;
	opacity: 0;
	z-index: 0;
}

.top-products-list .item.is-hover .body {
	background-color: #000;
	color: #fff;
}

.top-products-list .item.is-hover .txt {
	color: #fff;
}

.top-series {
	padding: 95px 0 118px;
}

.top-series__head {
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
	margin-bottom: 32px;
}

.top-series__viewmore {
	display: inline-block;
	padding-bottom: 16px;
	position: relative;
}

.top-series__viewmore::after {
	content: "";
	background: #000;
	width: 100%;
	height: 1px;
	position: absolute;
	left: 0;
	bottom: 0;
	display: block;
}

.top-series__viewmore:hover::after {
	animation: allLinkBorder .6s linear forwards;
}

.top-series-list .item {
	width: calc(50% - 12px);
}

.top-series-list .item:nth-child(even) {
	margin-left: 24px;
}

.top-series-list .item:nth-child(n+3) {
	margin-top: 24px;
}

.top-movie {
	display: flex;
}

.top-movie__left {
	width: calc(100% - 16px);
	top: -40px;
	padding-right: 20px;
	padding-bottom: 54px;
	width: calc(45.714285vw + 20px);
}

.top-movie__left .box-video {
	width: 100%;
	height: 36.7857142857vw;
}

.top-movie__body {
	width: 610px;
	width: auto;
	padding: 70px 0 40px 12px;
}

.top-movie__btn {
	line-height: 58px;
	height: 60px;
	bottom: 120px;
	width: 260px;
	right: 60px;
	left: 0;
	margin: 0 auto;
	transform: translateX(0px);
}

.top-movie__des {
	font-size: 24px;
}

.top-movie__txt {
	font-size: 16px;
	margin-bottom: 40px;
}

.top-movie__anchor {
	padding-bottom: 16px;
}

}

@media (min-width: 992px) {

.top-movie__left {
	padding-right: 60px;
	width: calc(45.714285vw + 60px);
}

.top-movie__body {
	padding-bottom: 140px;
}

}

@media (max-width: 768px) {

.top-news__nav {
	display: none;
}

.top-news__item {
	width: 52.266vw;
}

.top-products__inner {
	padding: 0;
}

.top-products-list .body {
	left: 0;
	color: #fff;
}

.top-products-list .item {
	position: relative;
}

.top-series {
	position: relative;
	margin-bottom: 88px;
}

.top-series__viewmore {
	width: calc(100% - 32px);
	position: absolute;
	bottom: 0;
	left: 16px;
	text-align: center;
	border: 1px solid #000;
	padding: 15px 0;
}

.top-series-list .item:nth-child(n+2) {
	margin-top: 16px;
}

}

@keyframes allLinkBorder {

0% {
	width: 100%;
	left: auto;
	right: 0;
}

50% {
	width: 0;
	left: auto;
	right: 0;
}

51% {
	width: 0%;
	left: 0;
	right: auto;
}

100% {
	width: 100%;
	left: 0;
	right: auto;
}

}