@charset "utf-8";
/*------------------------------------------------------------
	index
------------------------------------------------------------*/
#main .mainVisual {
	position: relative;
}
#main .mainVisual .tagImg {
	position: absolute;
	top: 2rem;
	left: 2.8rem;
	width: 15.6rem;
	z-index: 10;
}
#main .mainVisual .fooUl {
	position: relative;
	line-height: 0;
	mask-image: url("../img/index/mask01.png");
	-webkit-mask-image: url("../img/index/mask01.png");
	mask-position: center bottom;
	-webkit-mask-position: center bottom;
	mask-repeat: no-repeat;
	-webkit-mask-repeat: no-repeat;
	mask-size: 100% auto;
	-webkit-mask-size: 100% auto;
}
#main .mainVisual .slideBox::before {
	position: absolute;
	bottom: min(-9.9vw,-13.3rem);
	left: 0;
	width: 100%;
	height: max(40.4rem,30.2vw);
	background: url(../img/index/main_bg01.png) no-repeat center bottom / 100%;
	content: '';
}
#main .mainVisual .fooUl li {
	aspect-ratio: 288 / 165;
}
#main .mainVisual .fooUl li img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
#main .mainVisual .fooUl .animate img {
	animation: slideimg 9.5s forwards linear;
}
@keyframes slideimg {
	0% {
		transform: scale(1);
	}
	100% {
		transform: scale(1.2);
	}
}
#main .mainVisual .slick-dots {
	margin-top: -9rem;
	position: absolute;
	top: 50%;
	right: 2.2rem;
	transform: translateY(-50%);
	font-size: 0;
	z-index: 100;
}
#main .mainVisual .slick-dots li {
	margin-bottom: 0.9rem;
	width: 1.8rem;
	height: 1.8rem;
	aspect-ratio: inherit;
	background: #9e773e;
	clip-path: polygon(50% 0%,100% 50%,50% 100%,0 50%);
	cursor: pointer;
}
#main .mainVisual .slick-dots li.slick-active {
	background: #ffe566;
}
#main .mainVisual .slick-dots li:last-child {
	margin-bottom: 0;
}
#main .mainVisual .slick-dots li button {
	display: none;
}
#main .mainVisual .inner {
	position: absolute;
	top: 2.8rem;
	left: 50%;
	transform: translateX(-50%);
	width: 100%;
	max-width: 106.5rem;
	z-index: 5;
}
#main .mainVisual .inner .textImg {
	width: 16.3rem;
}
#main .topArea {
	margin: -34.5rem 0 7.4rem;
	position: relative;
	z-index: 15;
}
#main .topArea .lPhoto {
	margin-right: -20rem;
	width: 45.8rem;
	position: relative;
	z-index: 5;
}
#main .topArea .rPhoto {
	margin: -5rem -3.6rem 0 0;
	padding: 0 0 0 3.6rem;
	width: 45.8rem;
	box-sizing: content-box;
}
#main .topArea .textImg {
	margin: -30.4rem auto 0;
	width: 76rem;
	position: relative;
	z-index: 11;
}
#main .secBox {
	margin-bottom: 4.2rem;
}
#main .secBox .content {
	margin: 0 auto;
	max-width: 134rem;
	position: relative;
}
#main .secBox .hTitle {
	margin: 0 auto 4.1rem;
	padding: 0 4.5rem;
	width: fit-content;
	max-width: 82rem;
	font-family: "Zen Maru Gothic", sans-serif;
	font-size: 3rem;
	font-weight: 900;
	line-height: 1.42;
	text-align: center;
	font-feature-settings: "palt";
	-moz-font-feature-settings: "palt";
	background: url(../img/common/icon02.png) no-repeat left center / 4rem,url(../img/common/icon03.png) no-repeat right center / 4rem;
}
#main .secBox .textBox {
	margin: 0 auto;
	max-width: 75rem;
}
#main .secBox .textBox .sub:not(:last-child) {
	margin-bottom: 3.1rem;
}
#main .secBox .textBox .text {
	margin-bottom: 3.1rem;
	line-height: 1.94;
	text-align: center;
}
#main .secBox .textBox .text:last-child {
	margin-bottom: 0;
}
#main .secBox .photo01 {
	position: absolute;
	top: 8.2rem;
	left: -4.3rem;
	width: 43.8rem;
}
#main .secBox .photo02 {
	position: absolute;
	top: 9.4rem;
	right: -3.9rem;
	width: 45.3rem;
}
#main .outInner {
	margin-bottom: -50.05%;
	padding: 0 min(11.8%,16.9rem) 34.35%;
	position: relative;
	aspect-ratio: 2880 / 3276;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	z-index: 5;
}
#main .outInner .bgArea {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}
#main .outInner .bgArea img {
	width: 100%;
}
#main .outInner .photo {
	position: absolute;
	top: 7.9%;
	right: 0;
	width: 69.4%;
	z-index: 5;
}
#main .outInner .content {
	position: relative;
	z-index: 10;
}
#main .outInner .inner .textImg {
	margin-bottom: min(4%,3.3rem);
	width: min(50%,40.7rem);
}
#main .outInner .inner .textBox {
	width: fit-content;
}
#main .outInner .inner .textBox .subBox {
	padding: 0 min(5%,4.2rem);
}
#main .outInner .inner .textBox .text {
	margin-bottom: min(4.1%,3.1rem);
	color: #FFF;
	line-height: 1.94;
}
#main .outInner .inner .innPhoto {
	position: absolute;
	bottom: 31.6%;
	left: calc(50% - 17.65%);
	width: 28.5%;
	z-index: 6;
}
#main .outInner.reverse {
	margin-bottom: -20.3%;
	padding: 0 min(10.2%,14.7rem) 24.2%;
	justify-content: flex-end;
	z-index: inherit;
}
#main .outInner.reverse .photo {
	top: 20.15%;
	right: auto;
	left: 0;
}
#main .outInner.reverse .inner .textImg {
	margin: 0 0 min(8.72%,7.2rem) auto;
	width: min(50%,41.2rem);
}
#main .outInner.reverse .inner .textBox {
	position: relative;
	z-index: 11;
}
#main .outInner.reverse .inner .textBox .subBox {
	padding: 0 min(7.8%,6.5rem);
}
#main .outInner.reverse .inner .textBox .text {
	text-align: right;
}
#main .outInner.reverse .inner .innPhoto {
	bottom: 16.5%;
    left: calc(50% - 11.58%);
    width: 28.45%;
}
#main .movieBox {
	margin-bottom: 3.7rem;
}
#main .movieBox .titleImg {
	margin: 0 auto 1.3rem;
	width: 42.8rem;
}
#main .movieBox .movie a {
	margin: 0 auto;
	position: relative;
	padding: 1.9rem;
	width: 80rem;
	display: block;
	background: url(../img/index/movie_bg01.png) no-repeat left top / 100%;
	box-sizing: content-box;
}
#main .movieBox .movie a:hover {
	opacity: 0.7;
}
#main .movieBox .movie a::before {
	margin-top: 0.1rem;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
	width: 10.6rem;
	height: 10.6rem;
	background: url(../img/common/icon04.png) no-repeat left top / 100%;
	content: '';
}
#main .officalBox {
	margin: 0 auto 4.6rem;
	max-width: 68rem;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}
#main .officalBox .lBox {
	width: 19.1rem;
}
#main .officalBox .lBox .link {
	margin: -1.9rem auto 0;
	width: 12.5rem;
	position: relative;
	z-index: 5;
}
#main .officalBox .lBox .link a {
	padding: 0.3rem 1rem 0.5rem;
	display: block;
	color: #FFF;
	font-size: 1.5rem;
	font-weight: 900;
	text-align: center;
	letter-spacing: 0.05em;
	background: #9e773e;
	border-radius: 1rem;
	font-family: "Zen Maru Gothic", sans-serif;
}
#main .officalBox .lBox .link a:hover {
	opacity: 0.7;
}
#main .officalBox .rBox {
	padding-top: 2.6rem;
	width: calc(100% - 19.6rem);
	font-family: "Zen Maru Gothic", sans-serif;
}
#main .officalBox .rBox .title {
	margin-bottom: 1.4rem;
	font-weight: 700;
}
#main .officalBox .rBox .text {
	font-size: 1.4rem;
	font-weight: 500;
	line-height: 1.71;
}
#main .display {
	position: relative;
	padding: 4.2rem 0 4rem;
	aspect-ratio: 288 / 200;
	background: #000 url(../img/index/display_bg01.png) no-repeat left top / 100%;
}
#main .display .photo01,
#main .display .photo02 {
	position: absolute;
	top: 5rem;
}
#main .display .photo01 img,
#main .display .photo02 img {
	width: 100%;
}
#main .display .photo01 {
	left: 0;
	width: 31.25%;
}
#main .display .photo02 {
	right: 0;
	width: 31.25%;
}
#main .display .content {
	margin: 0 auto;
	width: 32.6%;
}
#main .display .hTitle {
	margin-bottom: 4.3rem;
	padding-top: 5rem;
	color: #FFF;
	font-size: 4rem;
	font-weight: 900;
	text-align: center;
	font-family: "Zen Maru Gothic", sans-serif;
	background: url(../img/common/icon05.png) no-repeat center top / 3.6rem;
}
#main .display .text {
	margin: 0 -2rem 6.6rem;
	color: #FFF;
	line-height: 1.94;
	text-align: center;
}
#main .display .title {
	margin-bottom: 1.2rem;
	padding-bottom: 0.2rem;
	color: #c6bc75;
	font-size: 2rem;
	font-family: "Zen Maru Gothic", sans-serif;
	border-bottom: 1px dotted #FFF;
	text-align: center;
}
#main .display .date {
	margin-bottom: 3.8rem;
	color: #FFF;
	font-family: "Zen Maru Gothic", sans-serif;
	font-size: 2.8rem;
	font-weight: 700;
	text-align: center;
}
#main .display .photo {
	margin: 2.5rem auto 1.3rem;
	width: 21rem;
}
#main .display .bigText {
	margin-bottom: 1.7rem;
	color: #FFF;
	font-family: "Zen Maru Gothic", sans-serif;
	font-size: 2.3rem;
	font-weight: 700;
	text-align: center;
}
#main .display .link {
	margin: 0 auto;
	width: 19.3rem;
}
#main .display .link a {
	padding: 0.5rem 0 0.5rem 2.4rem;
	min-height: 4.1rem;
	color: #000;
	font-size: 1.4rem;
	font-weight: 500;
	background: #e0d073 url(../img/common/icon06.png) no-repeat right 1.7rem center / 2.5rem;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	border-radius: 3rem;
}
#main .display .link a:hover {
	opacity: 0.7;
}
@media all and (min-width: 961px) and (max-width: 1420px) {
	#main .secBox .photo01 {
		top: 10vw;
		left: 0;
		width: 30%;
	}
	#main .secBox .photo02 {
		top: 10vw;
		right: 0;
		width: 30%;
	}
}
@media all and (max-width: 960px) {
	#main .mainVisual .tagImg {
		margin-left: 0.2rem;
		position: absolute;
		top: 1.1rem;
		left: 50%;
		transform: translateX(-50%);
		width: 15.6rem;
		z-index: 10;
	}
	#main .mainVisual .fooUl {
		mask-image: url("../img/index/mask01_sp.png");
		-webkit-mask-image: url("../img/index/mask01_sp.png");
	}
	#main .mainVisual .slideBox::before {
		bottom: -39.4vw;
		width: 100%;
		height: 41.3vw;
		background-image: url(../img/index/main_bg01_sp.png);
	}
	#main .mainVisual .fooUl li {
		aspect-ratio: 75 / 166;
	}
	#main .mainVisual .slick-dots {
		margin-top: 8.6rem;
		position: absolute;
		top: 50%;
		right: 1.5rem;
		transform: translateY(-50%);
		font-size: 0;
		z-index: 100;
	}
	#main .mainVisual .slick-dots li {
		margin-bottom: 0.4rem;
		width: 1.6rem;
		height: 1.6rem;
	}
	#main .mainVisual .inner {
		top: 16.5vw;
		left: -5.3vw;
		transform: none;
		max-width: inherit;
	}
	#main .mainVisual .inner .textImg {
		width: 22.1vw;
	}
	#main .topArea {
		margin: -74.2vw 0 5.6rem;
		justify-content: space-between;
	}
	#main .topArea img {
		width: 100%;
	}
	#main .topArea .lPhoto {
		margin: 0 0 0 -49.3vw;
		width: 88vw;
	}
	#main .topArea .rPhoto {
		margin: -10.6vw -53.5vw 0 -34.5vw;
		padding: 0;
		width: 88vw;
	}
	#main .topArea .textImg {
		margin: -57.6vw auto 0;
		width: auto;
	}
	#main .secBox {
		margin-bottom: 3.7rem;
	}
	#main .secBox .content {
		margin: 0;
		max-width: inherit;
	}
	#main .secBox .hTitle {
		margin: 0 auto 3rem;
		padding: 0 3rem;
		width: fit-content;
		max-width: inherit;
		font-size: 2.3rem;
		line-height: 1.54;
		background: url(../img/common/icon02_sp.png) no-repeat left 0.1rem top calc(50% + 0.2rem) / 4.5rem,url(../img/common/icon03_sp.png) no-repeat right 0.1rem top calc(50% + 0.2rem) / 4.5rem;
	}
	#main .secBox .textBox {
		margin: 0 2rem;
		max-width: inherit;
	}
	#main .secBox .textBox .sub:not(:last-child) {
		margin-bottom: 2rem;
	}
	#main .secBox .textBox .text {
		margin-bottom: 3rem;
		line-height: 2;
	}
	#main .secBox .photo01 {
		margin: 0 0 -0.8rem -2rem;
		position: static;
		width: auto;
	}
	#main .secBox .photo01 img {
		width: 100%;
	}
	#main .secBox .photo02 {
		margin: -0.8rem -2.7rem 0;
		position: static;
		width: auto;
	}
	#main .secBox .photo02 img {
		width: 100%;
	}
	#main .outInner {
		margin-bottom: 9.6vw;
		padding: 25.8vw 0 5vw;
		aspect-ratio: 750 / 3742;
		display: block;
	}
	#main .outInner .bgArea img {
		height: 100%;
		object-fit: cover;
	}
	#main .outInner .photo {
		margin-bottom: 7.6vw;
		position: static;
		width: auto;
	}
	#main .outInner .photo img {
		width: 100%;
	}
	#main .outInner .inner .textImg {
		margin: 0 auto 6vw !important;
		width: 86.8vw !important;
	}
	#main .outInner .inner .textImg img {
		width: 100%;
	}
	#main .outInner .inner .textBox {
		width: auto;
	}
	#main .outInner .inner .textBox .subBox {
		padding: 0 6.5vw 45rem;
	}
	#main .outInner .inner .textBox .text {
		margin-bottom: 8vw;
		font-size: 4vw;
		line-height: 2;
	}
	#main .outInner .inner .innPhoto {
		position: absolute;
		bottom: 11vw;
		left: -8.4vw;
		width: 87.5vw;
	}
	#main .outInner.reverse {
		margin-bottom: 12.6vw;
		padding: 14vw 0 0;
		aspect-ratio: 150 / 701;
	}
	#main .outInner.reverse .photo {
		margin-bottom: 9.1vw;
	}
	#main .outInner.reverse .inner .textImg {
		margin: 0 auto 6.8vw !important;
		width: 88vw !important;
	}
	#main .outInner.reverse .inner .textBox .subBox {
		padding: 0 6.5vw 35rem;
	}
	#main .outInner.reverse .inner .textBox .text {
		text-align: left;
	}
	#main .outInner.reverse .inner .innPhoto {
		bottom: -14vw;
		left: auto;
		right: -10vw;
		width: 87.6vw;
	}
	#main .movieBox {
		margin-bottom: 2.1rem;
	}
	#main .movieBox .titleImg {
		margin: 0 auto 1.6rem;
		width: auto;
		max-width: 31.1rem;
	}
	#main .movieBox .movie a {
		margin: 0 1rem;
		padding: 3.2vw 2.67vw 0;
		width: auto;
		aspect-ratio: 335 / 199;
		background-image: url(../img/index/movie_bg01_sp.png);
		box-sizing: border-box;
	}
	#main .movieBox .movie a::before {
		margin-top: 0;
		width: 4.4rem;
		height: 4.4rem;
	}
	#main .officalBox {
		margin: 0 0 6.1rem;
		max-width: inherit;
		display: block;
	}
	#main .officalBox .lBox {
		margin: 0 auto 2.1rem;
	}
	#main .officalBox .lBox .link {
		margin: -0.2rem auto 0;
		position: static;
	}
	#main .officalBox .lBox .link a {
		padding: 0.3rem 1rem 0.4rem;
	}
	#main .officalBox .rBox {
		padding: 0 3.1rem;
		width: auto;
	}
	#main .officalBox .rBox .title {
		margin-bottom: 1.4rem;
		font-size: 1.6rem;
	}
	#main .display {
		padding: 3.1rem 0 6.7rem;
		aspect-ratio: inherit;
		background: #000 url(../img/index/display_bg01_sp.png) no-repeat left top / 100%;
	}
	#main .display .photo01,
	#main .display .photo02 {
		display: none;
	}
	#main .display .content {
		margin: 0 auto;
		width: auto;
	}
	#main .display .hTitle {
		margin-bottom: 2.7rem;
		padding-top: 5.2rem;
		font-size: 3rem;
		background: url(../img/common/icon05.png) no-repeat center top / 3.6rem;
	}
	#main .display .text {
		margin: 0 2rem 6.6rem;
		line-height: 2;
	}
	#main .display .innPhoto {
		margin-bottom: 8.1rem;
	}
	#main .display .innPhoto img {
		width: 100%;
	}
	#main .display .textBox {
		margin: 0 3.8rem;
	}
	#main .display .title {
		margin-bottom: 1.6rem;
	}
	#main .display .date {
		margin-bottom: 3.8rem;
		font-size: 2.5rem;
	}
	#main .display .photo {
		margin-bottom: 1.7rem;
	}
	#main .display .bigText {
		margin-bottom: 1.8rem;
		font-size: 2rem;
	}
}