@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);
}

/*-----------------------------------------------
 * Story
-------------------------------------------------*/
.storyArea{
	position: relative;
	padding-bottom: min(calc(160 / var(--vw-min) * 100vw),160px);
	position: relative;
	z-index: 10;
}
.storyArea .area__inner{
	margin: 0 auto;
}
.storyCont{
	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){ 
	.storyArea .area__inner{
		width: 100%;
		padding: calc(224 / var(--vw-min) * 100vw) 0 0;
	}
	.storyCont{
		width: 100%;
	}
}

/* ttl */
.sub .story__ttl{
	position: relative;
	margin-bottom:min(calc(34 / var(--vw-min) * 100vw),34px);
}
.story__ttl_en{
	display: block;
	background: url(../img/common/title/ttl_story_en.svg)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 .story__ttl{
		padding: 0;
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: calc(48 / var(--vw-min)* 100vw);
	}
	.story__ttl_en{
		width: calc(206 / var(--vw-min) * 100vw);
		height: calc(88 / var(--vw-min) * 100vw);
		margin-bottom: 0;
	}
	.section__ttl_jp{
		font-size:calc(24 / 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));
	}
}

/* subTtl */
.subTtl{
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  margin-bottom: min(calc(40 / var(--vw-min) * 100vw), 40px);
  flex-direction: column;
}
.subTtl_en{
	display: block;
	font-size:min(calc(42 / var(--vw-min) * 100vw), 42px);
	font-weight: 400;
	font-family: var(--font-en);
	letter-spacing: 0.03em;
	position: relative;
	padding: 0 min(calc(60 / var(--vw-min) * 100vw), 60px) min(calc(5 / var(--vw-min) * 100vw), 5px);
}
@media screen and (max-width: 768px) {
	.subTtl{
		margin-bottom: calc(48 / var(--vw-min) * 100vw);
	}
	.subTtl_en{
		font-size:calc(56 / var(--vw-min) * 100vw);
		padding: 0 calc(68 / var(--vw-min) * 100vw);
	}
}
.subTtl_en::before,
.subTtl_en::after{
  content: "";
  width: min(calc(52 / var(--vw-min) * 100vw), 52px);
  height:min(calc(5 / var(--vw-min) * 100vw), 5px);
  display: block;
  position: absolute;
  top: 0;
  bottom: 0;
  margin: auto;
  z-index: 0;
  background: url(../img/common/deco/subttl_deco.svg) no-repeat center center / contain;
}
@media screen and (max-width: 768px) {
	.subTtl_en::before,
	.subTtl_en::after{
	content: "";
	width:calc(68 / var(--vw-min) * 100vw);
	height:calc(6 / var(--vw-min) * 100vw);
	}
}
.subTtl_en::before{
	left: 0;
}
.subTtl_en::after{
	right: 0;
}

/*--------------------
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:767px) {
	.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:767px) {
	.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);
	}
}

/*-----------------------------------------------
 * storyNav
-------------------------------------------------*/
.storyNavBlock{
	display: flex;
	justify-content: center;
    align-items: center;
    margin: min(calc(100 / var(--vw-min) * 100vw),100px) auto min(calc(33 / var(--vw-min) * 100vw),33px);
	position: relative;
	width:min(calc(800 / var(--vw-min) * 100vw),800px);
  }
/* storyNav */
@media screen and (max-width:767px){
  .storyNavBlock{
    margin: calc(100 / var(--vw-min) * 100vw) calc(42 / var(--vw-min) * 100vw) calc(42 / var(--vw-min) * 100vw);
	align-items: flex-start;
	justify-content: flex-start;
	width: unset;
	padding-left: calc(48 / var(--vw-min) * 100vw) ;
  }
}

/* ttl */
.storyNav__ttl{
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
	margin: auto;
}
@media screen and (max-width:767px){
	.storyNav__ttl{
		font-size: calc(22 / var(--vw-min) * 100vw);
		writing-mode: vertical-rl;
		position: absolute;
		left: 0;
		top: 0;
		white-space: nowrap
	}
}
.storyNav{
    display: flex;
    flex-wrap: wrap;
}
.storyNav__item {
  width: min(calc(40 / var(--vw-min) * 100vw),40px);
  height: min(calc(40 / var(--vw-min) * 100vw),40px);
  background-color: var(--color-brown);
  border-radius: 50%;
  position: relative;
  transition: all .4s ease;
  margin: 0 min(calc(7 / var(--vw-min) * 100vw),7px);
}

@media screen and (max-width:767px){
  .storyNav__item {
      width: calc(80 / var(--vw-min) * 100vw);
      height: calc(80 / var(--vw-min) * 100vw);
	  margin-bottom: calc(7 / var(--vw-min) * 100vw);
  }

}
.storyNav__item a{
  display: block;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  position: relative;
  transition: all .4s ease;
  color: #FFF;
  font-size: min(calc(16 / var(--vw-min) * 100vw),16px);
  font-weight: normal;
}

@media screen and (max-width:767px){
  .storyNav__item .item__num{
    font-size: calc(32 / var(--vw-min) * 100vw);
  }
}
.storyNav__item.is-active{
  color: #FFF;
  background-color: var(--color-main);
}
.storyNav__item:hover{
	background-color: var(--color-main);
}
.storyNav__item a:hover{
}
/* active a */
.storyNav__item.is-active a{
  pointer-events: none;
}
.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));
	}
}

/*-----------------------------------------------
 * STORY DETAIL
-------------------------------------------------*/
.storyContBox{
	margin-top: min(calc(48 / var(--vw-min) * 100vw), 48px);

}
/* title */
.storyCont__ttlWrap{
	width: min(calc(800 / var(--vw-min) * 100vw), 800px);
    margin: 0 auto min(calc(40 / var(--vw-min) * 100vw), 40px);
}
.epTtl__number{
	text-align: center;
	font-size: min(calc(24 / var(--vw-min) * 100vw), 24px);
	letter-spacing: 0.03em;
	margin-bottom: min(calc(10 / var(--vw-min) * 100vw), 10px);
}
.epTtl__ttl{
	font-size: min(calc(32 / var(--vw-min) * 100vw),32px);
	line-height: min(calc(40 / var(--vw-min) * 100vw),40px);
	font-weight: 500;
	text-align: center;
}
@media screen and (max-width: 767px) {
	.storyCont__ttlWrap{
		width: 100%;
		margin: 0 auto calc(40 / var(--vw-min) * 100vw);
	}
	.epTtl__number{
		font-size:calc(28 / var(--vw-min) * 100vw);
	}
	.epTtl__ttl{
		font-size: calc(38 / var(--vw-min) * 100vw);
	}
}
/*
* Image
*/
.storyImageWrap{
	margin-bottom: min(calc(54 / var(--vw-min) * 100vw),54px);
	position: relative;
	padding-bottom: min(calc(52 / var(--vw-min) * 100vw),52px);
}
.storyImageWrap::after{
	content: "";
	pointer-events: none;
	background-color: var(--color-main);
	z-index: -1;
	width: 100%;
	height: calc(414 / var(--vw-min) * 100vw);
	position: absolute;
	bottom: 0;
	left: 0;
}
@media screen and (max-width: 767px) {
	.storyImageWrap::after{
		height: calc(356 / var(--vw-min) * 100vw);
	}
}
.storyImageList{
	padding: 0 calc(6 / var(--vw-min) * 100vw);
}
.storyImageList__img{
	width: 100%;
	padding-top: 56.25%;
	position: relative;
	margin-bottom: 18px;
	overflow: hidden;
	border: min(calc(4 / var(--vw-min) * 100vw),4px) solid #FFF;
}
@media screen and (max-width:767px){
	.storyImageWrap{
		margin-bottom: 0;
	}
	.storyImageList{
		padding: 0 calc(4 / var(--vw-min) * 100vw);
	}
	.storyImageList__img{
		margin-bottom: calc(12 / var(--vw-min) * 100vw);
		border:calc(8 / var(--vw-min) * 100vw) solid #FFF;
	}
}
.storyImageList__img img{
	width: 100%;
	height: 100%;
	object-fit: cover;
	position: absolute;
	top: 0;
	left: 0;
}

/* arrowBtn */
.sliderArrowBtn{
	position: absolute;
	bottom: 0;
	top: 0;
	left: 0;
	right: 0;
	margin: auto;
	width:calc(856 / var(--vw-min) * 100vw);
	height: min(calc(40 / var(--vw-min) * 100vw),40px);
	z-index: 2;
	display: flex;
    justify-content: space-between;
}
.sliderArrowBtn .arrowBtn {
    background-color: var(--color-brown);
	display: block;
	width: min(calc(56 / var(--vw-min) * 100vw),56px);
	height: min(calc(56 / var(--vw-min) * 100vw),56px);
	border-radius: 50%;
	display: flex;
	align-items: center;
    justify-content: center;
	cursor: pointer;
}
.sliderArrowBtn .arrowBtn._prev{
	left: 0;
}
.sliderArrowBtn .arrowBtn._next{
	right: 0;
}
.sliderArrowBtn .arrowBtn span {
	display: block;
    background-color: #FFF;
	-wevkit-mask: url(../img/common/icon_arrow3_r.svg) no-repeat center center /contain;
	mask: url(../img/common/icon_arrow3_r.svg) no-repeat center center /contain;
	width:  min(calc(10 / var(--vw-min) * 100vw),10px);
	height:  min(calc(16 / var(--vw-min) * 100vw),16px);
	transition: all 0.4s ease;
}
.sliderArrowBtn .arrowBtn._prev span {
	-webkit-mask: url(../img/common/icon_arrow3_l.svg) no-repeat center center /contain;
	mask: url(../img/common/icon_arrow3_l.svg) no-repeat center center /contain;
}
  @media screen and (max-width:767px){
	.sliderArrowBtn{
		position: absolute;
		top: calc(148 / var(--vw-min) * 100vw);
		bottom: unset;
		width:calc(702 / var(--vw-min) * 100vw);
		height: calc(80 / var(--vw-min) * 100vw);
	}
	.sliderArrowBtn .arrowBtn {
		width: calc(72 / var(--vw-min) * 100vw);
		height: calc(72 / var(--vw-min) * 100vw);
	}
	.sliderArrowBtn .arrowBtn span {
		width: calc(16 / var(--vw-min) * 100vw);
		height: calc(24 / var(--vw-min) * 100vw);
	}
}
@media screen and (hover:hover) and (pointer: fine){
	/* ホバーの内容 */
	.sliderArrowBtn .arrowBtn:hover span {
		transform: translateX(5px);
	}
	.sliderArrowBtn .arrowBtn._prev:hover span {
		transform: translateX(-5px);
	}
}
/*sliderPager*/
.sliderPagerWrap{
	display: flex;
    align-items: center;
    justify-content: center;
	margin-top: min(calc(10 / var(--vw-min) * 100vw),10px);
}
.swiper-pagination-clickable .swiper-pagination-bullet{
	background-color: #FFF;
	opacity: 1;
}
.swiper-pagination-clickable .swiper-pagination-bullet.swiper-pagination-bullet-active{
	background-color: var(--color-brown);
}

/*------
 * storyDetaileBlock
------*/
.storyDetaileBlock{
	width: min(calc(800 / var(--vw-min) * 100vw),800px);
	margin: 0 auto;
}
@media screen and (max-width: 768px){
	.storyDetaileBlock{
		width: 100%;
		padding: 0 calc(44 / var(--vw-min) * 100vw);
	}
}
/* text */
.storyTextWrap{
	margin-bottom: min(calc(64 / var(--vw-min) * 100vw),64px);
}
.storyText{
	width: 100%;
	letter-spacing: min(calc(0.64 / var(--vw-min) * 100vw),0.64px);
	line-height: min(calc(34 / var(--vw-min) * 100vw),34px);
	letter-spacing: 0.04em;
}
@media screen and (max-width: 768px){
	.storyTextWrap{
		background-size: auto calc(3 / var(--vw-min) * 100vw);
		margin-top: calc(64 / var(--vw-min) * 100vw);
	}
	.storyText{
		line-height:calc(25 / 12.5);
		font-size: calc(25 / var(--vw-min) * 100vw);
	}
}

.storyDetaile__inBlock{
    display: flex;
    justify-content: space-between;
}
@media screen and (max-width: 768px){
	.storyDetaile__inBlock{
		flex-direction: column;
	}
}
/*
* STAFF
*/
.storyStaffListsWrap{
    display: flex;
	flex-direction: column;
}
.storyStaffLists__ttl{
	font-size: min(calc(20 / var(--vw-min) * 100vw), 20px);
}
.storyStaffList{
	display: flex;
	letter-spacing: 0.05em;
	line-height: calc(27 / 16);
	padding-bottom: 4px;
	font-size: min(calc(16 / var(--vw-min) * 100vw), 16px);
}
@media screen and (max-width: 768px){
	.storyStaffListsWrap{
		flex-direction: column;
	}
	.storyStaffLists__ttl{
		font-size:calc(32 / var(--vw-min) * 100vw);
	}
	.storyStaffList{
		font-size: calc(25 / var(--vw-min) * 100vw);
		line-height: calc(22 / 12.5);
	}
}
.storyStaffList > dt{
	flex-shrink: 0;
}
.storyStaffList > dt:after{
	content: '：';
}
@media screen and (max-width: 768px){
	.storyStaffList:not(:last-child){
		padding-bottom: calc(4 / var(--vw-min) * 100vw);
	}
}
/*
* Trailer
*/
.storyTrailerContWrap{
    width: min(calc(488 / var(--vw-min) * 100vw),488px);
}
.movieTitle {
    display: block;
    font-size: min(calc(16 / var(--vw-min) * 100vw), 16px);
    line-height: calc(38 / 20);
	line-height: min(calc(30 / var(--vw-min) * 100vw), 30px); /* 187.5% */
	letter-spacing: min(calc(0.64 / var(--vw-min) * 100vw), 0.64px);
    margin-top: min(calc(12 / var(--vw-min) * 100vw), 12px);
    text-align: center;
  }  
@media screen and (max-width: 767px) {
	.storyTrailerContWrap{
		width:100%;
		margin-top:calc(80 / var(--vw-min) * 100vw);
	}
	.movieTitle {
		font-size: calc(26 / var(--vw-min) * 100vw);
		margin-top: calc(36 / var(--vw-min) * 100vw);
	}
}
/* Trailer > movieThumb */
.movieThumbWrap {
	padding: min(calc(10 / var(--vw-min) * 100vw), 10px);
	background-color: #FFFFFF;
	position: relative;
}
@media screen and (max-width: 767px) {
	.movieThumbWrap {
		padding: calc(8 / 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);
}