@charset "UTF-8";
/*----------------------------------------

	index CSS

	- opening
	- mv
	- column

-----------------------------------------*/

/*----------------------------------------
	opening
-----------------------------------------*/
.wrapper.opanime {
	overflow: hidden;
	height: 100vh;
	padding: 0!important;
}
.opening {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 9999;
	width: 100%;
	height: 100vh;
	background: url("../img/cmn/c_bg01s.jpg") center center no-repeat;
	background-size: cover;
}
@media screen and (orientation: portrait) {
	.opening {
		background-size: auto 100%;
	}
}
@media screen and (orientation: landscape) {
	.opening {
		background-size: 100% auto;
	}
}
.opening-take01 {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	background-color: rgba(255,255,255,1);
	text-align: center;
}
.opening-take01_obj {
	/*display: none;*/
	position: absolute;
	top: 0;
	right: 0;
	width: 100%;
	height: 100%;
	/*background: url("../img/cmn/c_bg02.png") right 7% top calc(50% + 70px) no-repeat;*/
	/*background-size: 1024px auto;*/
}
.opening-take01_obj > span {
	display: block;
	position: absolute;
	top: 0;
	right: 0;
	width: 100%;
	height: 100%;
	background: right 7% top calc(50% + 70px) no-repeat;
	background-size: 1024px auto;
	opacity: 0;
	transition: opacity 1.6s;
}
.opening-take01_obj > span:nth-of-type(1) {
	background-image: url("../img/cmn/c_bg02_01.png");
}
.opening-take01_obj > span:nth-of-type(2) {
	background-image: url("../img/cmn/c_bg02_02.png");
	transition-delay: 0.2s;
}
.opening-take01_obj > span:nth-of-type(3) {
	background-image: url("../img/cmn/c_bg02_03.png");
	transition-delay: 0.4s;
}
.opening-take01_obj > span:nth-of-type(4) {
	background-image: url("../img/cmn/c_bg02_04.png");
	transition-delay: 0.6s;
}
.opening-take01_obj > span:nth-of-type(5) {
	background-image: url("../img/cmn/c_bg02_05.png");
	transition-delay: 0.8s;
}
.opening-take01_obj > span:nth-of-type(6) {
	background-image: url("../img/cmn/c_bg02_06.png");
	transition-delay: 1.0s;
}
.opening-take01_obj > span:nth-of-type(7) {
	background-image: url("../img/cmn/c_bg02_07.png");
	transition-delay: 1.2s;
}
.opening-take01_obj > span:nth-of-type(8) {
	background-image: url("../img/cmn/c_bg02_08.png");
	transition-delay: 1.4s;
}
.opening-take01_obj.is-active > span {
	opacity: 1;
}
.opening-take01_txt {
	position: relative;
	padding: 0 0 100px;
	line-height: 1.5;
	letter-spacing: 0.1em;
}
.opening-take01_txt dt {
	margin: 0 0 14px;
	font-size: 2.6rem;
}
.opening-take01_txt dd {
	font-size: 1.8rem;
}
.opening-take01_anime01,
.opening-take01_anime02,
.opening-take01_anime03 {
	opacity: 0;
}
@media print, screen and (min-width:768px) {
	.opening {
		background-image: url("../img/cmn/c_bg01.jpg");
		background-position: center top;
		background-size: cover;
		background-attachment: fixed;
	}
	.opening-take01_obj {
		left: 0;
		right: auto;
		background-position: right center;
		background-size: cover;
	}
	.opening-take01_obj > span {
		left: 0;
		right: auto;
		background-position: right center;
		background-size: cover;
	}
	.opening-take01_txt {
		line-height: 1.5;
		letter-spacing: 0.1em;
	}
	.opening-take01_txt dt {
		margin: 0 0 14px;
		font-size: 4.0rem;
	}
	.opening-take01_txt dd {
		font-size: 2.4rem;
	}
}

/*----------------------------------------
	mv
-----------------------------------------*/
.mv {
	overflow: hidden;
	padding: 0 0 36px;
}
.mv-block {
	position: relative;
}
.mv-item {
	position: relative;
	padding-bottom: 100%;
	cursor: pointer;
}
.mv-item_inner {
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	border-radius: 6px;
	background: #fff;
	color: #fff;
	transition: color 0.2s, text-shadow 0.2s;
}
.mv-item_img {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}
.mv-item_img img {
	object-fit: cover;
	object-position: center center;
	width: 100%;
	height: 100%;
}
.mv-item_txt {
	display: flex;
	flex-wrap: wrap;
	align-content: center;
	position: relative;
	z-index: 100;
	height: 100%;
	padding: 10% 0 5%;
	text-align: center;
}
.mv-item.mv-item_type02 .mv-item_txt {
	align-content: space-between;
}
.mv-item_txt dt {
	width: 100%;
	font-size: 1.4rem;
	font-weight: 700;
}
.mv-item_txt dd {
	width: 100%;
	font-size: 1.1rem;
}
.mv-item_txt dd p {
	margin: 0 5px;
}
.mv-item_overlay {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0,0,0,0.3);
	transition: opacity 0.2s;
}
.mv-block .slick-slide {
	font-size: 0;
	padding: 4px;
}
.mv-block .slick-slide.slick-center .mv-item_inner {
	color: #111;
	text-shadow: 0 0 10px rgba(255, 255, 255,1);
}
.mv-block .slick-slide.slick-center .mv-item_overlay {
	opacity: 0;
}
@media print, screen and (min-width:768px) {
	.mv {
		min-width: 1024px;
		height: 745px;/*230px * 3 + 55px*/
		padding: 0;
	}
	.mv-block {
		left: auto;
	}
	.mv-block_box {
		float: left;
		position: relative;
		height: 690px;
		width: 230px;
		transition: 0.6s cubic-bezier(0.075, 0.82, 0.165, 1);
	}
	.mv-block_box[class*="is-active"] {
		width: 460px;
	}
	.mv-item {
		position: absolute;
		top: 0;
		left: 0;
		width: 230px;
		height: 230px;
		padding: 5px;
		transition: 0.6s cubic-bezier(0.075, 0.82, 0.165, 1);
	}
	.mv-item:nth-of-type(2) {
		top: 230px;
	}
	.mv-item:nth-of-type(3) {
		top: 460px;
	}
	.mv-block_box.is-active-02 .mv-item:nth-of-type(3),
	.mv-block_box.is-active-03 .mv-item:nth-of-type(2) {
		top: 0;
	}
	.mv-block_box.is-active-02 .mv-item:nth-of-type(2),
	.mv-block_box.is-active-03 .mv-item:nth-of-type(3) {
		top: 230px;
	}
	.mv-block_box.is-active-01 .mv-item:nth-of-type(2),
	.mv-block_box.is-active-01 .mv-item:nth-of-type(3) {
		top: 460px;
	}
	.mv-block_box.is-active-01 .mv-item:nth-of-type(3),
	.mv-block_box.is-active-02 .mv-item:nth-of-type(3),
	.mv-block_box.is-active-03 .mv-item:nth-of-type(2) {
		left: 230px;
	}
	.mv-block_box.is-active-01 .mv-item:nth-of-type(1),
	.mv-block_box.is-active-02 .mv-item:nth-of-type(2),
	.mv-block_box.is-active-03 .mv-item:nth-of-type(3) {
		width: 460px;
		height: 460px;
	}
	.mv-item_inner {
		position: relative;
		border-radius: 8px;
	}
	.mv-item_inner:hover {
		color: #111;
		text-shadow: 0 0 10px rgba(255, 255, 255,1);
	}
	.mv-item_txt {
		padding: 10px;
		font-weight: 700;
		line-height: 1.3;
	}
	.mv-item_txt dt {
		font-size: 1.8rem;
	}
	.mv-item_txt dd {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		font-size: 1.4rem;
	}
	.mv-item_txt dd p {
		margin: 0 7px;
	}
	.mv-item_overlay {
		transition: none;
	}
}

/*----------------------------------------
	column
-----------------------------------------*/
.column-block {
	overflow: hidden;
	display: flex;
	flex-wrap: wrap;
	margin: 0 0 20px;
}
.column-item {
	overflow: hidden;
	position: relative;
	width: calc(50% - 10px);
	margin: 0 5px 10px;
	padding: 0 0 calc(50% - 10px);
	border-radius: 16px 16px 0 16px;
	background: #ddd;
	transition: opacity 0.6s;
	opacity: 0;
}
.column-item.anime {
	opacity: 1;
}
.column-item a {
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}
.column-item_tag {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-end;
	position: absolute;
	top: 10px;
	right: 10px;
	font-size: 0.8rem;
	line-height: 1;
}
.column-item_tag li {
	margin: 0 0 3px 3px;
	padding: 5px 12px;
	border-radius: 50px;
	background: #000;
}
.column-item_title {
	position: absolute;
	bottom: 0;
	right: 10px;
	left: 10px;
	font-size: 2.5vw;
	font-weight: 700;
	line-height: 2;
	text-align: right;
	letter-spacing: -0.02em;
}
.column-item_title > span {
	padding: 2px 0 2px 10px;
	border-left: 3px solid #000;
	background: #fff;
	filter: drop-shadow(10px 0px 0px #fff);
}
.column-item_title > span  > span {
	padding: 2px;
	background: #fff;
	filter: drop-shadow(-10px 0px 0px #fff);
}
body.isIE .column-item_title > span {
	filter: none;
	box-shadow: 10px 0px 0px 0 #fff;
}
body.isIE .column-item_title > span  > span {
	filter: none;
	box-shadow: -10px 0px 0px 0 #fff;
}
.column-more {
	width: 300px;
	margin: 0 auto;
}
.column-more a {
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
	width: 100%;
	height: 50px;
	padding: 0 20px;
	border-radius: 50px;
	background: #fff;
	font-size: 1.4rem;
	font-weight: 700;
	text-align: center;
}
.column-more a::before,
.column-more a::after {
	content: '';
	position: absolute;
	top: calc(50% - 1px);
	left: 40px;
	border-width: 2px 0 0 0;
	border-style: solid;
	border-color: #0491ff;
	width: 16px;
}
.column-more a::after {
	transform: rotate(-90deg);
}
@media print, screen and (min-width:768px) {
	.column-item {
		margin: 0 4px 8px;
		padding: 0;
		width: 370px;
		height: 370px;
	}
	.column-item_img {
		transition: transform 0.6s;
	}
	.column-item a:hover .column-item_img {
		transform: scale(1.2);
	}
	.column-item_tag {
		top: 20px;
		right: 20px;
		font-size: 1.2rem;
	}
	.column-item_tag li {
		margin: 0 0 4px 4px;
		padding: 6px 15px;
	}
	.column-item_title {
		right: 20px;
		left: 20px;
		bottom: 28px;
		font-size: 1.7rem;
		line-height: 2.3;
	}
	.column-item_title > span {
		padding: 6px 0 6px 20px;
		border-left-width: 4px;
		filter: drop-shadow(20px 0px 0px #fff);
	}
	.column-item_title > span  > span {
		padding: 6px;
		filter: drop-shadow(-20px 0px 0px #fff);
	}
	body.isIE .column-item_title > span {
		filter: none;
		box-shadow: 20px 0px 0px 0 #fff;
	}
	body.isIE .column-item_title > span  > span {
		filter: none;
		box-shadow: -20px 0px 0px 0 #fff;
	}
}