@charset "utf-8";

/* CSS INFORMATION -====================================================
File name : story.css
Description :
===================================================================== */


/* =====================================================================
*    story
* =================================================================== */
.story_mainBox {
	padding: calc(140 / 750 * 100%) 0 calc(100 / 750 * 100%);
}

.story .inner {
	z-index: 1;
}

.story_box::before {
	content: '';
	position: absolute;
	bottom: 0;
	left: 0;
	background: url(../images/deco/bg_deco4.png) no-repeat center/contain;
	width: calc(324 / 650 * 100%);
	padding-top: calc(113 / 650 * 100%);
	margin: 0 0 calc(-77 / 650 * 100%) calc(-170 / 650 * 100%);
}

.story_box::after {
	content: '';
	position: absolute;
	bottom: 0;
	right: 0;
	background: url(../images/deco/bg_deco3.png) no-repeat center/contain;
	width: calc(265 / 650 * 100%);
	padding-top: calc(143 / 650 * 100%);
	margin: 0 calc(-150 / 650 * 100%) calc(-83 / 650 * 100%) 0;
	z-index: -1;
}

.story_movie_photo {
	background: url(../images/top/bg_nextstory_movie_sp.png) no-repeat center/contain;
	width: calc(666 / 650 * 100%);
	padding: calc(25 / 650 * 100%);
	margin: 0 0 calc(34 / 650 * 100%) calc(-8 / 650 * 100%);
}

.story_movie_photo img {
	-o-object-fit: cover;
	object-fit: cover;
	font-family: 'object-fit: cover;';
	-o-object-position: center;
	object-position: center;
	height: calc(330 / 750 * 100vw);
}

.story_subttl {
	position: absolute;
	top: 0;
	right: 0;
	width: calc(213 / 650 * 100%);
	background: url(../images/top/bg_nextstory_subttl.png) no-repeat center/contain;
	padding: calc(43 / 650 * 100%) calc(30 / 650 * 100%) calc(30 / 650 * 100%) calc(113 / 650 * 100%);
	font-size: 4rem;
	font-weight: bold;
	line-height: 1;
	white-space: nowrap;
	color: #fff;
	font-family: YuMincho, 'Yu Mincho', serif;
	margin: calc(-62 / 650 * 100%) calc(-30 / 650 * 100%) 0 0;
	z-index: 1;
}

.story_subttl.last {
	font-size: 2.5rem;
	padding: calc(43 / 650 * 100%) calc(30 / 650 * 100%) calc(30 / 650 * 100%) calc(98 / 650 * 100%);
}

.story_date {
	width: calc(458 / 650 * 100%);
	color: #fff;
	font-size: 3rem;
	line-height: 1;
	margin: 0 auto calc(55 / 650 * 100%);
}

.story_date p:first-child {
	background: url(../images/top/bg_nextsory_date.png) no-repeat center/100% auto;
	text-align: center;
	letter-spacing: 0.05em;
	font-weight: 700;
	padding: calc(10 / 458 * 100%) 0;
}

.story_date small {
	color: #7f7575;
	display: block;
	font-size: 1.8rem;
	margin: 0.3em 0 0;
	text-align: right;
}

.story_movie_btn::before {
	content: "";
	display: block;
	width: calc(100 / 750 * 100vw);
	height: calc(100 / 750 * 100vw);
	position: absolute;
	background-color: #982411;
	border-radius: 50%;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	margin: auto;
	z-index: 1;
}

.story_movie_btn::after {
	content: '';
	display: block;
	position: absolute;
	top: 0;
	bottom: 0;
	left: .4em;
	right: 0;
	margin: auto;
	width: 0;
	height: 0;
	border-style: solid;
	border-width: .7em 0 .7em 1em;
	border-color: transparent transparent transparent #fff;
	border-radius: .3em;
	z-index: 1;
}

.story_btn {
	margin-top: calc(60 / 650 * 100%);
}

.story_txt_list_photo,
.story_txt_list li > p {
	margin: 0 auto calc(50 / 650 * 100%);
}

@media screen and (min-width: 768px) {
	.story_mainBox {
		padding: calc(120 / 1200 * 100%) 0;
	}

	.story_movie {
		width: calc(800 / 1000 * 100%);
		margin: 0 auto;
	}

	.story_subttl {
		width: calc(213 / 800 * 100%);
		font-size: 4rem;
		margin: calc(-50 / 800 * 100%) calc(-55 / 800 * 100%) 0 0;
		padding: calc(43 / 800 * 100%) calc(50 / 800 * 100%) calc(30 / 800 * 100%) calc(113 / 800 * 100%);
	}

	.story_subttl.last {
		padding: calc(43 / 800 * 100%) calc(50 / 800 * 100%) calc(30 / 800 * 100%) calc(108 / 800 * 100%);
	}

	.story_box::before {
		width: calc(324 / 800 * 100%);
		padding-top: calc(113 / 800 * 100%);
		margin: 0 0 calc(-39 / 800 * 100%) calc(-150 / 800 * 100%);
	}

	.story_box::after {
		width: calc(265 / 800 * 100%);
		padding-top: calc(143 / 800 * 100%);
		margin: 0 calc(-125 / 800 * 100%) calc(-50 / 800 * 100%) 0;
		z-index: -1;
	}

	.story_movie_photo {
		width: 100%;
		background: url(../images/top/bg_nextstory_movie_pc.png) no-repeat center/contain;
		margin: 0 0 calc(22 / 800 * 100%);
		padding: calc(20 / 800 * 100%);
	}

	.story_movie_photo img {
		height: calc(417 / 1200 * 100vw);
	}

	.story_movie_btn::before {
		width: calc(100 / 1200 * 100vw);
		height: calc(100 / 1200 * 100vw);
	}

	.story_movie_btn::after {
		border-width: 1.2em 0 1.2em 1.8em;
	}

	.story_movie_btn::before,
	.story_movie_btn::after {
		-webkit-transition: .2s;
		transition: .2s;
	}

	.story_movie_btn:hover::before,
	.story_movie_btn:hover::after {
		-webkit-transform: scale(1.2);
		transform: scale(1.2);
		-webkit-transition: .2s;
		transition: .2s;
	}

	.story_date {
		width: calc(425 / 800 * 100%);
		font-size: 2.4rem;
		margin-bottom: calc(70 / 800 * 100%);
	}

	.story_date p:first-child {
		padding: calc(10 / 425 * 100%);
	}

	.story_date small {
		font-size: 1.2rem;
		margin-right: 1.2em;
	}

	.story_txt_list {
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-ms-flex-wrap: wrap;
		flex-wrap: wrap;
		-webkit-box-pack: justify;
		-ms-flex-pack: justify;
		justify-content: space-between;
		margin: 0 auto;
		font-size: 1.4rem;
		line-height: 1.875;
	}

	.story_txt_list li {
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-ms-flex-wrap: wrap;
		flex-wrap: wrap;
		-webkit-box-pack: justify;
		-ms-flex-pack: justify;
		justify-content: space-between;
		-webkit-box-align: start;
		-ms-flex-align: start;
		align-items: flex-start;
		width: 100%;
	}

	.story_btn {
		width: calc(260 / 800 * 100%);
	}

	.story_txt_list li > p {
		font-size: 1.6rem;
		line-height: 1.875;
		width: calc(475 / 1000 * 100%);
		margin: 0 0 calc(60 / 1000 * 100%) 0;
	}

	.story_txt_list_photo {
		width: 100%;
		margin: 0 0 calc(50 / 1000 * 100%);
	}

	.story_txt_list li .story_txt_list_photo {
		width: calc(475 / 1000 * 100%);
	}

	.other_images li {
		width: calc(475 / 1000 * 100%);
	}

	.other_images .story_txt_list_photo {
		width: 100% !important;
	}

	.story_txt_list_photo::before {
		margin: 0 0 calc(-30 / 475 * 100%) calc(-30 / 475 * 100%);
		width: calc(150 / 475 * 100%);
		padding-top: calc(150 / 475 * 100%);
	}

	.trailer li:nth-child(2n),
	.spoiler li.reverse {
		-webkit-box-orient: horizontal;
		-webkit-box-direction: reverse;
		-ms-flex-direction: row-reverse;
		flex-direction: row-reverse;
	}
}

@media screen and (min-width: 1200px) {
	.story_mainBox {
		padding: 120px 0;
	}

	.story_movie_btn::before {
		width: 100px;
		height: 100px;
	}

	.story_movie_photo img {
		height: 417px;
	}
}


/* =====================================================================
*    sns
* =================================================================== */

.story_sns {
	background-color: #9b200c;
	padding: calc(85 / 750 * 100%) 0 calc(110 / 750 * 100%);
}

.story_sns_share {
	padding: calc(55 / 650 * 100%) 0;
	border-right: 5px solid #000;
	border-left: 5px solid #000;
}

.story_sns_share::before,
.story_sns_share::after {
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	margin-left: -3%;
	width: 106%;
	height: 5px;
	background-color: #000;
}

.story_sns_share::before {
	top: 0;
	margin-top: 5px;
}

.story_sns_share::after {
	bottom: 0;
	margin-bottom: 5px;
}

.story_sns_share dt {
	font-size: 2.8rem;
	text-align: center;
	margin: 0 0 calc(30 / 650 * 100%);
}

.story_sns_share_list {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
}

.story_sns_share_list li {
	width: calc(180 / 650 * 100%);
	margin: 0 calc(8 / 650 * 100%);
}

.story_sns_share_list li a {
	padding: calc(10 / 180 * 100%) 0;
	color: #fff;
	font-size: 2.6rem;
	text-align: center;
	white-space: nowrap;
}

.facebookShare a {
	background-color: #3b5997;
}

.twitterShare a {
	background-color: #55aced;
}

.lineShare a {
	background-color: #08b704;
}

.story_bnr {
	margin: calc(60 / 650 * 100%) auto 0;
}

.story_bnr li {}

@media screen and (min-width: 768px) {
	.story_sns {
		padding: calc(65 / 1200 * 100%) 0;
	}

	.story_sns_share {
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-ms-align-items: center;
		-webkit-box-align: center;
		-ms-flex-align: center;
		align-items: center;
		padding: calc(25 / 1000 * 100%) 0;
	}

	.story_sns_share::before,
	.story_sns_share::after {
		width: 102%;
		margin-left: -1%;
	}

	.story_sns_share dt {
		width: calc(300 / 1000 * 100%);
		font-size: 1.6rem;
		margin: 0;
	}

	.story_sns_share dd {
		width: calc(640 / 1000 * 100%);
	}

	.story_sns_share_list li {
		width: calc(200 / 640 * 100%);
		margin: 0 calc(10 / 640 * 100%);
	}

	.story_sns_share_list li a {
		padding: calc(15 / 200 * 100%) 0;
		font-size: 1.4rem;
		line-height: 1;
	}

	.story_sns_share_list li a:hover {
		background-color: #fff;
		-webkit-box-shadow: 0 0 0 1px #9b200c;
		box-shadow: 0 0 0 1px #9b200c;
		border: #9b200c;
		color: #9b200c;
	}

	.story_bnr {
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-pack: center;
		-ms-flex-pack: center;
		justify-content: center;
		width: calc(900 / 1000 * 100%);
		margin: calc(55 / 1000 * 100%) auto 0;
	}

	.story_bnr li {
		width: calc(440 / 900 * 100%);
		margin: 0;
	}
}

@media screen and (min-width: 1200px) {
	.story_sns {
		padding: 65px 0;
	}
}



/* =====================================================================
*    delivery 
* =================================================================== */

.delivery {
	padding: calc(65 / 750 * 100%) 0 calc(100 / 750 * 100%);
}

.delivery .inner::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	background: url(../images/deco/bg_deco4.png) no-repeat center/contain;
	width: calc(324 / 650 * 100%);
	padding-top: calc(113 / 650 * 100%);
	margin: calc(85 / 650 * 100%) 0 0 calc(-170 / 650 * 100%);
}

.delivery .inner::after {
	content: '';
	position: absolute;
	top: 0;
	right: 0;
	background: url(../images/deco/bg_deco3.png) no-repeat center/contain;
	width: calc(265 / 650 * 100%);
	padding-top: calc(143 / 650 * 100%);
	margin: calc(65 / 650 * 100%) calc(-150 / 650 * 100%) 0 0;
	z-index: -1;
}

@media screen and (min-width: 768px) {
	.delivery {
		padding: calc(35 / 1200 * 100%) 0 calc(68 / 1200 * 100%);
	}

	.delivery .inner::before {
		width: calc(324 / 1200 * 100%);
		padding-top: calc(113 / 1200 * 100%);
		margin: calc(152 / 1200 * 100%) 0 0 calc(15 / 1200 * 100%);
	}

	.delivery .inner::after {
		width: calc(265 / 1200 * 100%);
		padding-top: calc(143 / 1200 * 100%);
		margin: calc(135 / 1200 * 100%) calc(75 / 1200 * 100%) 0 0;
	}

	.delivery_list li {
		width: calc(440 / 1000 * 100%);
	}
}

@media screen and (min-width: 1200px) {
	.delivery {
		padding: 35px 0 68px;
	}
}


/* =====================================================================
*    backnumber
* =================================================================== */
.backnumber_box {
	background: url(../images/story/bg_back.jpg) repeat center/calc(250 / 750 * 100%) auto;
	padding: calc(120 / 750 * 100%) 0 calc(320 / 750 * 100%);
}

.bucknumber_list {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
}

.bucknumber_list li {
	width: calc(300 / 650 * 100%);
	margin: 0 0 calc(30 / 650 * 100%);
}

.bucknumber_list li:nth-child(2n) {
	margin-left: calc(30 / 650 * 100%);
}

.bucknumber_list li a {
	-webkit-box-shadow: 0px 5px 5px 0px rgba(0, 0, 0, 0.1);
	box-shadow: 0px 5px 5px 0px rgba(0, 0, 0, 0.1);
}

.bucknumber_num {
	position: absolute;
	top: 0;
	left: 0;
	background: url(../images/story/bg_back_ttl.png) no-repeat center/contain;
	width: calc(114 / 300 * 100%);
	padding: calc(10 / 300 * 100%) 0 calc(22 / 300 * 100%);
	margin: calc(-20 / 300 * 100%) 0 0 calc(-20 / 300 * 100%);
	color: #fff;
	text-align: center;
}

.bucknumber_num span {
	display: block;
	font-size: 2rem;
	line-height: 1;
}

.bucknumber_num span::before {
	content: '#';
	margin-right: .2em;
}


@media screen and (min-width: 768px) {
	.backnumber_box {
		padding: calc(70 / 1200 * 100%) 0 calc(200 / 1200 * 100%);
		background-size: calc(250 / 1200 * 100%) auto;
	}

	.bucknumber_list {}

	.bucknumber_list li {
		width: calc(300 / 1000 * 100%);
		margin: 0 calc(50 / 1000 * 100%) calc(40 / 1000 * 100%) 0;
	}

	.bucknumber_list li:nth-child(3n),
	.bucknumber_list li:last-child {
		margin-right: 0;
	}

	.bucknumber_list li:nth-child(2n) {
		margin-left: 0;
	}

	.bucknumber_list li a {
		overflow: hidden;
	}

	.bucknumber_list li a:hover {
		-webkit-box-shadow: 0px 5px 5px 0px rgba(0, 0, 0, 0.3);
		box-shadow: 0px 5px 5px 0px rgba(0, 0, 0, 0.3)
	}

	.bucknumber_list li a img {
		-webkit-transition: .2s;
		transition: .2s;
	}

	.bucknumber_list li a:hover img {
		-webkit-transform: scale(1.05);
		transform: scale(1.05);
		-webkit-transition: .2s;
		transition: .2s;
	}
}

@media screen and (min-width: 1200px) {
	.backnumber_box {
		padding: 70px 0 200px;
		background-size: 250px;
	}

}