@charset "utf-8";

/* story
---------------------------------------------------- */

/* storyページ　共通指定 */
*,
*::before,
*::after {
  box-sizing: border-box;
}
/* ------------------ */

/* タブ */
.story__tab-items {
  display: flex;
  flex-wrap: wrap;
  text-align: center;
	background-color: #fff;
}

.story__tab-items li {
	width: calc((100% - 90px) / 13);
	padding: 2.5px 0;
	transition: all 0.4s ease 0s;
	cursor: pointer;
}
@media screen and (max-width: 1100px) {
	.story__tab-items li {
		width: calc((100% - 60px) / 7);
		padding: 4px 0;
	}
}
@media screen and (max-width: 900px) {
	.story__tab-items li {
		width: calc((100% - 40px) / 5);
		padding: 6px 0;
	}
}

.story__tab-items li:hover {
	opacity: 0.6;
}

.story__tab-item:not(.disa) {
	background-color: #fff;
	border: 3px solid #000;
	color: #000;
}

.story__tab-items li:nth-child(n+2) { /*2番目以降*/
	margin-left: 7.3px;
}

@media screen and (max-width: 1100px) {
	.story__tab-items li:nth-child(n+2) { /*2番目以降*/
		margin-left: 9.8px;
	}
	.story__tab-items li:nth-child(7n+1) { /* 1,8,15,… */
		margin-left: 0;
	}
	.story__tab-items li:nth-child(n+8) { /*8番目以降*/
		margin-top: 10px;
	}
}

@media screen and (max-width: 900px) {
	.story__tab-items li:nth-child(7n+1) { /* 1,8,15,… */
		margin-left: 9.8px;
	}
	.story__tab-items li:nth-child(5n+1) { /* 1,6,11,… */
		margin-left: 0;
	}
	.story__tab-items li:nth-child(n+6) { /*6番目以降*/
		margin-top: 10px;
	}
}

.story__tab-items li p {
  margin: auto;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
}

/* 非公開話 */
.story__tab-item.disa {
	pointer-events: none;
  cursor: none;
	color: #fff;
  background-color: #b7b7b7;
	border: 3px solid #b7b7b7;
}

.story__tab-items li p b {
  display: block;
  width: 100%;
  font-family: mr-eaves-modern, sans-serif;
  font-weight: 700;
	font-style: italic;
  font-size: 20px;
	line-height: 1;
	letter-spacing: 1px;
}

.story__tab-item.is-active {
  background-color: #000;
}
.story__tab-item.is-active p b {
	color: #fff;
}



/* あらすじ */
@keyframes fade {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }

}
.story__items {
  height: auto;
  animation: fade .5s .5s ease-out both;
	margin-top: 52px;
}
@media screen and (max-width: 770px) {
	.story__items {
		margin-top: 30px;
	}
}

.story__item {
  visibility: hidden;
  height: 0;
}

.story__item.is-show {
  visibility: visible;
  height: auto;
  animation: fade .5s ease-out both;
}

.story__title {
	display: flex;
	align-items: center;
	font-family: source-han-serif-japanese, serif;
	font-weight: 900;
	font-size: 18px;
	font-style: normal;
	letter-spacing: 0.9px;
	line-height: 1.444;
	border-bottom: 1px solid #000;
	padding-bottom: 13px;
}
@media screen and (max-width: 770px) {
	.story__title {
		font-size: 15px;
		letter-spacing: 0.75px;
		line-height: 1.533;
		border-bottom: 1px solid #000;
		padding-bottom: 14px;
	}
}

.story__title span {
  font-size: 32px;
	font-family: mr-eaves-modern, sans-serif;
	font-weight: 800;
	font-style: italic;
	letter-spacing: 1.6px;
  line-height: 1.1;
	padding-right: 8.75px;
	border-right: 1px solid #000;
	margin-right: 8.75px;
}
@media screen and (max-width: 770px) {
	.story__title span {
		font-size: 28px;
		letter-spacing: 1.4px;
		line-height: 1.15;
	}
}

.swiper {
  position: relative;
  width: 100%;
}

[class*=swiper]:focus {
  outline: none;
}

.slide-media, .thumb-media {
  position: relative;
  overflow: hidden;
}

.slider {
	margin-top: 25px;
}
@media screen and (max-width: 900px) {
	.slider {
		margin-top: 20px;
	}
}

.slider01,
.slider02, 
.slider03, 
.slider04, 
.slider05, 
.slider06, 
.slider07, 
.slider08, 
.slider09, 
.slider10, 
.slider11, 
.slider12, 
.slider13 {
  overflow: hidden;
}

.swiper, .thumb-wrapper {
  width: 100%;
  margin: auto;
}

.swiper {
  overflow: visible;
}

.swiper-fade .swiper-slide-active {
  pointer-events: auto;
}

.slide {
  display: block;
  overflow: hidden;
}

.thumb-wrapper {
  display: flex;
	justify-content: space-between;
  margin-top: 5px;
}
@media screen and (max-width: 900px) {
	.thumb-wrapper {
		flex-wrap: wrap;
		margin-top: 5px;
	}
}

.thumb-media {
	cursor: pointer;
  opacity: 0.6;
	width: calc((100% - 20px) / 6);
}
@media screen and (max-width: 900px) {
	.thumb-media {
		width: calc((100% - 7.48px) / 3);
	}
	.thumb-media:nth-child(n+4) { /*4番目以降*/
		margin-top: 4px;
	}
}

.thumb-media-active {
  opacity: 1;
}

.story__summary {
  font-size: 15px;
	font-family: ryo-gothic-plusn, sans-serif;
  font-weight: 400;
  font-style: normal;
  letter-spacing: 1.13px;
	line-height: 1.933;
	margin-top: 19px;
}
@media screen and (max-width: 900px) {
	.story__summary {
		margin-top: 14px;
	}
}

.story__staff {
	font-size: 12px;
	font-family: ryo-gothic-plusn, sans-serif;
  font-weight: 400;
  font-style: normal;
  letter-spacing: 0.9px;
	line-height: 1.75;
	margin-top: 13px;
}
@media screen and (max-width: 900px) {
	.story__staff {
		margin-top: 8px;
	}
}

.story__movie {
	margin-top: 33px;
}
@media screen and (max-width: 900px) {
	.story__movie {
		margin-top: 24px;
	}
}

.story__movie-inner {
	max-width: 448px;
	width: 100%;
	margin: auto;
}

.story__movie-inner a {
	display: block;
	position: relative;
	overflow: hidden;
}

.icon_play {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	width: 30%;
	height: auto;
	z-index: 2;
}

.story__movie-inner p {
	font-size: 14px;
  line-height: 1;
  font-family: source-han-serif-japanese, serif;
  font-weight: 900;
  font-style: normal;
  letter-spacing: 0.7px;
	text-align: center;
	margin-top: 7px;
}
@media screen and (max-width: 900px) {
	.story__movie-inner p {
		margin-top: 10px;
	}
}