@charset "UTF-8";
.page_story .c-social-btn, .page_story .l-simple-footer {
		position: relative;
		z-index: 10
}
.l-simple-footer__copy {
		position: relative;
}
.l-simple-footer__copy::before {
		content: '';
		display: block;
		position: absolute;
		bottom: -200px;
		left: 0;
		width: 100%;
		height: 200px;
		background: #fff;
}
/*
.verPortrait .modaal-close {
		display: none !important
} */
.story_upper {
		max-width: 1200px;
		margin: 0 auto 80px;
		padding: 200px 40px 0;
		position: relative;
}
.story_btn_wrap {
		height: 130px;
		padding: 0 40px;
		display: flex;
		justify-content: flex-end
}
@media(max-width: 800px) {
		.story_btn_wrap {
				height: 80px;
				padding: 0 20px;
		}
}
.story_upper .story_ballon {
		position: absolute;
		left: calc(calc(100% - 185px) /2);
		bottom: -185px;
		width: 185px;
		transform-origin: center bottom;
		transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.story_ballon img {
		width: 100%;
		height: auto;
}
.storybook_wrapper {
		margin: 0 auto;
		padding: 0 0 100px;
		/* position: fixed;
		top: 0;
		left: 0;
		width: 100%; */
}
.page_storymovie .storybook_wrapper {
		padding-bottom: 50px;
}
@media(max-width: 800px) {
		.storybook_wrapper {
				padding: 0 0 50px;
		}
		.verLandscape .storybook_wrapper {
				position: static;
				top: inherit;
				left: inherit;
				padding-bottom: 0;
		}
		.story_upper {
				margin: 0 auto 80px;
				padding: 90px 20px 0;
		}
		.verLandscape .story_upper {
				padding-top: 80px;
		}
		.story_upper .story_ballon {
				position: absolute;
				left: calc(calc(100vw - 50px) /2);
				bottom: -70px;
				width: 70px;
				transform-origin: center bottom;
				transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
		}
		.story_upper {
				margin: 0 auto 50px;
		}
		.verLandscape .story_upper {
				margin-bottom: -5px;
		}
		.story_upper .story_ballon {
				bottom: -110px;
		}
		.verLandscape .story_upper .story_ballon {
				bottom: -45px
		}
}
.page_story .book {
		position: relative;
		margin: 0 !important;
		width: 1120px !important;
		height: 500px !important;
}
.page_story .book__body-wrap, .page_story .book__body {
		width: 976px !important;
		height: 491px !important;
		margin-top: 0 !important;
		margin-bottom: 0 !important;
		margin-left: auto;
		margin-right: auto;
		position: relative;
}
.book__body__item {
		width: 488px !important;
		height: 491px !important;
}
/*
@media(max-width: 1300px) {
		.page_story .book {
				width: 900px !important;
				height: 405px !important;
		}
		.page_story .book__body-wrap, .page_story .book__body {
				width: 800px !important;
				height: 405px !important;
		}
		.book__body__item {
				width: 400px !important;
				height: 405px !important;
		}
}
@media(max-width: 1023px) {
		.page_story .book {
				width: 740px !important;
				height: 324px !important;
		}
		.page_story .book__body-wrap, .page_story .book__body {
				width: 640px !important;
				height: 324px !important;
		}
		.book__body__item {
				width: 320px !important;
				height: 324px !important;
		}
}

@media (max-width: 820px) {
		.page_story .book {
				width: 500px !important;
				height: 250px !important;
		}
		.page_story .book__body-wrap, .page_story .book__body {
				width: 500px !important;
				height: 250px !important;
		}
		.book__body__item {
				width: 250px !important;
				height: 250px !important;
		}
}
*/
@media (max-width: 820px) {
		.page_story .book {
				width: 440px !important;
				height: 290px !important;
		}
		.page_story .book__body-wrap, .page_story .book__body {
				width: 440px !important;
				height: 222px !important;
		}
		.book__body__item {
				width: 220px !important;
				height: 222px !important;
		}
}
@media (max-width: 450px) {
		.page_story .book {
				width: 400px !important;
				height: 151px !important;
		}
		.page_story .book__body-wrap, .page_story .book__body {
				width: 300px !important;
				height: 151px !important;
		}
		.book__body__item {
				width: 150px !important;
				height: 151px !important;
		}
}
.page_story .thumbnail__item {
		width: 260px;
		cursor: pointer;
		box-shadow: -2px 1px 3px rgba(0, 0, 0, 0.2);
		transition: transform 0.1s;
		transform-origin: center center;
}
.thumbnail__item img {
		width: 100%;
		height: auto;
}
.page_story .thumbnail__item.is-disable {
		cursor: auto;
}
/*
.page_story .thumbnail__item.is-disable:hover {
		transform: scale3d(1, 1, 1);
} */
@media (hover: hover) {
		/* .page_story .thumbnail__item:hover {
				transform: scale(1.1)
		} */
}
.page_story .book-overlay {
		z-index: 9000;
		position: fixed;
		display: none;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		background: #d6e49a;
		border-radius: 0;
		opacity: 0;
}
@media(max-width: 820px) {
		.page_story .book-overlay {
				top: 0;
				background: #d6e49a;
				border-radius: 0;
				z-index: 9999;
		}
}
.page_story .book-overlay.animate {
		transition: opacity 0.3s;
}
.page_story .book-viewport {
		overflow: auto;
		z-index: 20000;
		position: fixed;
		display: none;
		width: 100%;
		height: 100%;
		left: 0;
		top: 0;
}
.page_story .book-viewport__inner {
		overflow: hidden;
		margin: 0 auto;
		width: 100%;
		height: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
}
.page_story .book__body-wrap {
		z-index: 1;
}
.book .book__close {
		position: absolute;
		display: none;
		right: -7px;
		top: -80px;
		cursor: pointer;
		width: 50px;
		height: 50px;
		border-radius: 50%;
		background: #e4002b;
		background: none;
}
.book__close .book__close_bar {
		display: block;
		width: 50px;
		height: 2px;
		position: absolute;
		left: 0;
		top: 24px;
		pointer-events: none;
		transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1);
		border-radius: 20px;
		background: #e4002b;
}
.book__close .book__close_bar:nth-child(1) {
		transform: rotate(-35deg)
}
.book__close .book__close_bar:nth-child(2) {
		transform: rotate(35deg);
}
.page_story .book__body.animate {
		transition: margin-left 0.3s, transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}
.page_story .book__body .shadow {
		box-shadow: -4px 2px 10px rgba(0, 0, 0, 0.3);
}
.page_story .book__body__item {
		width: 473px;
		height: 476px;
		transform: translate3d(0, 0, 0);
}
.page_story .book__body__item img {
		width: 100%;
}
.page_story .book__prev, .page_story .book__next {
		position: absolute;
		display: none;
		top: calc(50% - 20px);
		width: 40px;
		height: 40px;
		border-radius: 50%;
		cursor: pointer;
		background-repeat: no-repeat;
		background-position: 0 0;
		background-size: 40px;
		background-color: #e4002b;
}
.page_story .book__prev {
		left: -80px;
		background-image: url("../images/swiper_left_arw.png");
}
.page_story .book__next {
		right: -80px;
		background-image: url("../images/swiper_right_arw.png");
}
@media(max-width: 820px) {
		.book .book__close {
				right: -77px;
				top: 0;
				width: 40px;
				height: 40px;
		}
		.book__close .book__close_bar {
				width: 40px;
				height: 2px;
				left: 0;
				top: 19px;
		}
}
@media(max-width: 450px) {
		.book .book__close {
				right: 40px;
		}
		.page_story .book__prev, .page_story .book__next {
				top: calc(50% - 15px);
				width: 30px;
				height: 30px;
				background-size: 30px;
		}
		.book__close .book__close_bar {
				width: 30px;
				top: 18px;
		}
		.page_story .book__prev {
				left: -40px;
		}
		.page_story .book__next {
				right: -40px;
		}
}
.swiper-slide {
		user-select: none; /* テキスト選択を無効にする */
		-webkit-user-select: none; /* Safari */
		-moz-user-select: none; /* Firefox */
		-ms-user-select: none; /* Internet Explorer/Edge */
}