@charset "utf-8";
.section_area{
	width: 100%;
	position: relative;
	opacity: 0;
	transition: opacity 1s ease;
	transition-delay: .8s;
}
.section_area.is-ani{
	opacity: 1;
}
.ani-fade.js-scrani,
.section_area.js-scrani{
	opacity: 0;
	filter: blur(15px);

	transition: all .8s ease;
	transition-delay: .2s;
}
.ani-fade.is-ani,
.section_area.is-ani{
	opacity: 1;
	filter: blur(0);
}
.news__listsBlock.ani-fade{
	transition-delay: .6s;
}


/*-----------------------------------------------
 * Movie
-------------------------------------------------*/
.movieArea{
	position: relative;
	padding-bottom: min(calc(160 / var(--vw-min) * 100vw),160px);
	position: relative;
	z-index: 10;
}
.movieArea .area__inner{
	margin: 0 auto;
}
.movieCont{
	width: min(calc(1000 / var(--vw-min) * 100vw),1000px);
	margin: min(calc(80 / var(--vw-min) * 100vw),80px) auto 0;
}
@media screen and (max-width:767px){ 
	.movieArea .area__inner{
		width: 100%;
		padding: calc(224 / var(--vw-min) * 100vw) 0 0;
	}
	.movieCont{
		width: 100%;
	}
}

/* ttl */
.sub .movie__ttl{
	position: relative;
	margin-bottom:min(calc(34 / var(--vw-min) * 100vw),34px);
}
.movie__ttl_en{
	display: block;
	background: url(../img/movie/Group_240@2x.png)no-repeat center center / contain;
	width: min(calc(194 / var(--vw-min) * 100vw),194px);
	height: min(calc(93/ var(--vw-min) * 100vw),93px);
	margin-bottom:min(calc(20 / var(--vw-min) * 100vw),20px);
}
.section__ttl_jp{
	font-size:min(calc(16 / var(--vw-min) * 100vw),16px);
}
@media screen and (max-width:767px){ 
	.sub .movie__ttl{
		padding: 0;
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: calc(50 / var(--vw-min)* 100vw);
	}
	.movie__ttl_en{
		width: calc(272 / var(--vw-min) * 100vw);
		height: calc(122 / var(--vw-min) * 100vw);
	}
}
.pageTtl__deco{
	display: block;
	width: 100%;
	height: min(calc(10 / var(--vw-min) * 100vw),10px);
	background: url(../img/common/deco/section_ttl_deco.png) no-repeat center bottom;
    background-size: min(calc(34 / var(--vw-min) * 100vw), 34px) auto;
	position: relative;
}
.pageTtl__deco:before,
.pageTtl__deco::after{
	z-index: 1;
	position: absolute;
	bottom: min(calc(5 / var(--vw-min) * 100vw), 5px);
	left: 0;
	content: "";
	height: 1px;
	width: calc(50% - min(calc(30 / var(--vw-min) * 100vw), 30px));
	background-color:#B79487;
}
.pageTtl__deco:before{
		left: unset;
		right: 0;
}
@media screen and (max-width: 767px) {
	.pageTtl__deco{
		height:calc(18 / var(--vw-min) * 100vw);
		background-size:calc(60 / var(--vw-min) * 100vw) auto;
	}
	.pageTtl__deco:before,
	.pageTtl__deco::after{
		bottom: calc(8 / var(--vw-min) * 100vw);
		width: calc(50% - calc(60 / var(--vw-min) * 100vw));
	}
}

/* pageNav */
.pageNav{
	display: flex;
	align-items: center;
    justify-content: center;
	margin-bottom: min(calc(36 / var(--vw-min) * 100vw), 36px);
}
.pageNav__item{
	display: flex;
	font-family: var(--font-en);
	position: relative;
	padding-bottom: min(calc(6 / var(--vw-min) * 100vw), 6px);
	margin-right:min(calc(20 / var(--vw-min) * 100vw),20px);
}
@media screen and (max-width: 767px) {
	.pageNav {
		flex-wrap: wrap;
		justify-content: center;
		gap: calc(20 / var(--vw-min) * 100vw);
	}

	.pageNav__item:nth-child(1),
	.pageNav__item:nth-child(2),
	.pageNav__item:nth-child(3) {
		flex: 0 1 auto;
	}

	.pageNav__item:nth-child(n+4) {
		/* flex: 0 1 100%; */
		display: flex;
		justify-content: space-around;
		margin-top: calc(20 / var(--vw-min) * 100vw);
	}
	
}

.pageNav__item:last-child{
	margin-right:0;
}
.pageNav__item::after {
	position: absolute;
	content: "";
	bottom: 0;
	left: 0;
	right: 0;
	margin: auto;
	width: min(calc(12 / var(--vw-min) * 100vw), 12px);
	height: min(calc(4 / var(--vw-min) * 100vw), 4px);
	background: url(../img/common/deco/pagenav_arrow.svg) no-repeat center bottom / contain;
}
.pageNav__item:has(> .pageNav__item--link.is-active)::after {
    background: none;
}
@media screen and (max-width: 767px) {
	.pageNav__item::after {
		width:calc(16 / var(--vw-min) * 100vw);
		height: calc(6 / var(--vw-min) * 100vw);
	}
}
.pageNav__item--link {
	text-decoration: none;
	color: var(--color-brown);
	padding:0 min(calc(20 / var(--vw-min) * 100vw), 20px);
	background-image: url(../img/common/deco/pagenav_left.svg),url(../img/common/deco/pagenav_right.svg);
	background-repeat: no-repeat;
	background-size: auto 100%;
	background-position: left center, right center;
	transition: color .4s ease;
}
.link__inner{
	display: flex;
	align-items: center;
	padding:0 min(calc(20 / var(--vw-min) * 100vw), 20px);
	background-image: url(../img/common/deco/pagenav_center.svg);
	background-repeat: repeat-x;
	background-size: auto 100%;
	background-position: 0 0;
	height: min(calc(50 / var(--vw-min) * 100vw), 50px);
	font-size: min(calc(15 / var(--vw-min) * 100vw), 15px);
	font-family: var(--font-en);
}
@media screen and (max-width: 767px) {
	.pageNav__item {
		margin-right: 0;
	}
	.pageNav__item--link {
		padding:0 calc(28 / var(--vw-min) * 100vw);
	}
	.link__inner{
		padding:0 calc(22 / var(--vw-min) * 100vw);
		height: calc(71 / var(--vw-min) * 100vw);
		font-size:calc(24 / var(--vw-min) * 100vw);
		font-family: var(--font-en);
	}
}
@media screen and (hover:hover) and (pointer: fine) and (min-width:768px){
	.pageNav__item:hover .pageNav__item--link{
		background-image: url(../img/common/deco/pagenav_left_on.svg),url(../img/common/deco/pagenav_right_on.svg);
		color: #FFF;
	}
	.pageNav__item:hover .link__inner{
		background-image: url(../img/common/deco/pagenav_center_on.svg);
	}
}

/* --- Movie List Layout --- */
.movieLists {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(444px, 1fr));
  gap: min(calc(40 / var(--vw-min) * 100vw), 40px);
  width: 100%;
  max-width: min(calc(1000 / var(--vw-min) * 100vw), 1000px);
  margin: min(calc(80 / var(--vw-min) * 100vw),80px) auto 0 auto;
  padding:  0;
  list-style: none;
}

@media screen and (min-width: 768px) {
  .movieLists {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media screen and (max-width: 767px) {
  .movieLists {
    grid-template-columns: 1fr;
  }
}

.movieItem {
  text-align: center;
}

.movieThumbWrap {
	padding: min(calc(10 / var(--vw-min) * 100vw), 10px);
	background-color: #FFFFFF;
	position: relative;
}

@media screen and (max-width: 767px) {
	.movieItem {
		text-align: center;
		margin: 0 calc(50/ var(--vw-min) * 100vw) 0 calc(50/ var(--vw-min) * 100vw);
	}
	.movieThumbWrap {
		padding: calc(10 / var(--vw-min) * 100vw);
	}
}

.movieThumbWrap::after {
	width: 99.5%;
	height: 99.5%;
	background-color: #CCEDE3;
	background: linear-gradient(140deg,rgba(204, 237, 227, 0.8) 0%, rgba(204, 237, 227, 0.8) 30%, rgba(152, 159, 207, 0.8) 80%, rgba(152, 159, 207, 0.8) 100%);
	content: "";
	position: absolute;
	right: max(calc(-8 / var(--vw-min) * 100vw),-8px);
    bottom: max(calc(-8 / var(--vw-min) * 100vw),-8px);
	z-index: -1;
	transition: all .4s ease;
}
.movieThumb {
  position: relative;
  width: 100%;
  aspect-ratio: 16/9;
  background-size: cover;
  background-position: center;
  overflow: hidden;
  cursor: pointer;
}

.movieThumb::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(#daf5fb 0%, #d9dff2 100%);;
  transition: opacity 0.4s ease;
  opacity: 0.5;
}

.movieThumb::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: min(calc(64 / var(--vw-min) * 100vw), 64px);
  height: min(calc(64 / var(--vw-min) * 100vw), 64px);
  background: url('../img/movie/play_icon@2x.png') no-repeat center/contain;
  transform: translate(-50%, -50%);
  transition: transform 0.4s ease;
}

@media screen and (max-width: 767px) {
	.movieThumb::after {
		width: calc(96 / var(--vw-min) * 100vw);
		height: calc(96 / var(--vw-min) * 100vw);
	}
}

/* Hover effect */
.movieThumb:hover::before {
  opacity: 0;
}
.movieThumb:hover::after {
  transform: translate(-50%, -50%) scale(1.05);
}

.movieTitle {
  margin-top: min(calc(20 / var(--vw-min) * 100vw), 20px);
  color: var(--color-brown);
  text-align: left;
  font-family: var(--font-en);
  font-size:  min(calc(16 / var(--vw-min) * 100vw),16px);
}

@media screen and (max-width: 767px) {
	.movieTitle {
		margin-top:calc(20 / var(--vw-min) * 100vw);
		color: var(--color-brown);
		text-align: center;
		font-family: var(--font-en);
		font-size:calc(26 / var(--vw-min) * 100vw);
	}
}

.pageNav__item--link.is-active {
  background-image: url(../img/common/deco/pagenav_left_on.svg), 
                    url(../img/common/deco/pagenav_right_on.svg);
  color: var(--color-brown);;
}
.pageNav__item--link.is-active .link__inner {
  background-image: url(../img/common/deco/pagenav_center_on.svg);
	color: #F9F9EF;
}

/*--------------------
circle
------------------- */
.circleBoxWrap{
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	pointer-events: none;
	z-index: -1;
}
.circleBox{
	position: sticky;
	top: 0;
	bottom: 0;
	margin: auto;
	left: 0;
	width: 100%;
	height: 100vh;
	overflow-x: hidden;
	pointer-events: none;
	z-index: 3;
	display: flex;
	align-items:center;
}
.circleBox__inner{
	width: 100%;
	height: calc(501 / var(--vw-min)* 100vw);
	position: relative;
}
@media screen and (max-width:768px) {
	.circleBox{
		position: absolute;
		top: 0;
		bottom: unset;
		align-items:flex-start;
	}
	.circleBox__inner{
		width: 100%;
		height: calc(420 / var(--vw-min)* 100vw);
		position: relative;
	}
}

.circle-tp{
	mask-image: url(../img/common/bg_circle.svg);
	mask-repeat: no-repeat;
	mask-size: contain;
	width: calc(120 / var(--vw-min) * 100vw);
	height: calc(120 / var(--vw-min) * 100vw);
	background: url(../img/common/deco/bg_transparent.jpg) left top;
	background-size: 12px auto;
	animation: floating 5s ease infinite alternate-reverse;
}
.circle-grad{
	mask-image: url(../img/common/deco/bg_grd.png);
	mask-repeat: no-repeat;
	mask-size: contain;
	width: calc(150 / var(--vw-min) * 100vw);
	height: calc(150 / var(--vw-min) * 100vw);
	opacity: 0.8;
	background: linear-gradient(to bottom right, #DAF5FB, #D9DFF2);
	background-size: 100% 100%;
	animation: floating 3s ease-in-out infinite alternate;
}
@keyframes floating {
	0% {
		transform: translate(-3%,3%);
	}
	100% {
	  transform: translate(4%,-3%);

	}
}

/* scrani */
.circleBox .circle-tp.js-scrani{
	opacity: 0;
	transition: opacity 1s ease;
}
.circleBox .circle-tp.js-scrani.is-ani{
	opacity: 1;
}

.circleBox .circle-grad.js-scrani{
	opacity: 0;
	transition: opacity 1s ease;
}
.circleBox .circle-grad.js-scrani.is-ani{
	opacity: .8;
}
@media screen and (max-width:768px) {
	.circleBox .circle-grad.js-scrani,
	.circleBox .circle-tp.js-scrani{
		opacity: 1!important;
	}
}
._circle1{
	position: absolute;
	right: calc(100 / var(--vw-min) * 100vw);
	bottom:calc(20 / var(--vw-min) * 100vw);
	background: linear-gradient(to bottom right, #CCEDE3, #D9DFF2);
}
._circle2{
	position: absolute;
	right: calc(80 / var(--vw-min) * 100vw);
	bottom: 0;
	animation-delay: 1s;
}
._circle3{
	width: calc(200 / var(--vw-min) * 100vw);
	height: calc(200 / var(--vw-min) * 100vw);
	position: absolute;
	right: calc(-80 / var(--vw-min) * 100vw);
	top: 0;
	animation: floating 4s ease infinite alternate-reverse;
	background: linear-gradient(to bottom right, #DAF5FB, #D9DFF2);
	background-size: 100% auto;
}
._circle4{
	width: calc(160 / var(--vw-min) * 100vw);
	height: calc(160 / var(--vw-min) * 100vw);
	position: absolute;
	left: calc(-30 / var(--vw-min) * 100vw);
	top: calc(96 / var(--vw-min) * 100vw);
}
._circle5{
	width: calc(170 / var(--vw-min) * 100vw);
	height: calc(170 / var(--vw-min) * 100vw);
	position: absolute;
	left: calc(46 / var(--vw-min) * 100vw);
	top: calc(160 / var(--vw-min) * 100vw);
	background: linear-gradient(to bottom right, #CCEDE3, #D9DFF2);
}
@media screen and (max-width:767px){
	._circle1{
		left: unset;
		right: calc(-40 / var(--vw-min) * 100vw);
		top: calc(112 / var(--vw-min) * 100vw);
		bottom: unset;
		width:calc(170 / var(--vw-min) * 100vw);
		height:calc(170 / var(--vw-min) * 100vw);
	}
	._circle2{
		display: none;
	}
	._circle3{
		display: none;
	}
	._circle4{
		width: calc(180 / var(--vw-min) * 100vw);
		height: calc(180 / var(--vw-min) * 100vw);
		right:unset;
		bottom: unset;
		left: calc(-76 / var(--vw-min) * 100vw);
		top: calc(206 / var(--vw-min) * 100vw);
	}
	._circle5{
		width: calc(180 / var(--vw-min) * 100vw);
		height: calc(180 / var(--vw-min) * 100vw);
		right:calc(10 / var(--vw-min) * 100vw);
		bottom: unset;
		top:  calc(274 / var(--vw-min) * 100vw);
	}
}