@charset "utf-8";

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

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

.story::before {
	content: "";
	display: block;
	width: calc(218 / 750 * 100%);
	padding-top: calc(572 / 750 * 100%);
	background: url(../images/common/bg_deco3.webp) no-repeat left top;
	background-size: cover;
	position: absolute;
	top: 0;
	right: 0;
	margin: calc(-128 / 750 * 100%) 0 0;
}

.story h2 {
	margin-bottom: calc(100 / 650 * 100%);
}

.story_movie {
	margin-bottom: calc(50 / 650 * 100%);
}

.story_movie::before {
	content: "";
	display: block;
	width: calc(750 / 650 * 100%);
	padding-top: calc(433 / 650 * 100%);
	background: url(../images/story/bg_movie.png) no-repeat center top;
	background-size: cover;
	position: absolute;
	top: 0;
	left: 0;
	margin: calc(-35 / 650 * 100%) 0 0 calc(-50 / 650 * 100%);
}

.story_movie_box {
	border: 3px solid #ffec9c;
}

.story_movie_photo {
	width: 100%;
	padding-top: 56.25%;
}

.story_movie_photo iframe {
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	bottom: 0;
	right: 0;
	left: 0;
}

.story_subttl_wrap {
	margin-bottom: calc(40 / 650 * 100%);
}

.story_subttl {
	margin-bottom: 0.8em;
	font-size: 4.8rem;
	letter-spacing: .1em;
	line-height: .8;
	margin-top: -.3em;
}

.story_subttl.last {}

.story_subttl span {
	margin: 0 0 0 .4em;
	vertical-align: bottom;
}

.story_date {
	color: #c39fff;
	font-size: 2.8rem;
	letter-spacing: 0;
}

.story_date span {
	display: inline-block;
	margin: 0 0 0 1em;
	color: #b2a5cb;
	font-size: 2.4rem;
}

.story_txt_list li {}

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

.story_txt_list p {
	margin-bottom: calc(40 / 650 * 100%);
}


@media screen and (min-width: 768px) {
	.story {
		padding: calc(115 / 1400 * 100%) 0 0;
	}

	.story::before {
		width: calc(260 / 1400 * 100%);
		padding-top: calc(523 / 1400 * 100%);
		margin: calc(-30 / 1400 * 100%) 0 0;
		background-size: contain;
	}

	.story h2 {
		margin: 0 auto calc(100 / 1200 * 100%);
	}

	.story_movie {
		margin-bottom: calc(40 / 1200 * 100%);
	}

	.story_movie::before {
		width: calc(1399 / 1200 * 100%);
		padding-top: calc(618 / 1200 * 100%);
		margin: calc(-52 / 1200 * 100%) 0 0 calc(-100 / 1200 * 100%);
	}

	.story_movie_box {
		width: calc(880 / 1200 * 100%);
		margin: 0 auto;
		border-width: .6rem;
	}

	.story_subttl_wrap {
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-align: end;
		-ms-flex-align: end;
		align-items: flex-end;
		width: calc(870 / 1200 * 100%);
		margin: 0 auto calc(55 / 1200 * 100%);
	}

	.story_subttl {
		margin: 0;
		font-size: 3.2rem;
		line-height: 1;
	}

	.story_date {
		margin: 0 0 0 2em;
		font-size: 2.4rem;
		line-height: 1.1;
	}

	.story_date span {
		font-size: 1.6rem;
	}

	.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;
		width: calc(1000 / 1200 * 100%);
		margin: 0 auto;
	}

	.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_txt_list p {
		font-size: 1.6rem;
		margin: 0 0 calc(60 / 1000 * 100%) 0;
	}

	.story_txt_list li > p {
		width: calc(460 / 1000 * 100%);
	}

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

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

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

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

	.story_txt_list_photo::before {
		margin: 0 0 calc(-30 / 460 * 100%) calc(-30 / 460 * 100%);
		width: calc(150 / 460 * 100%);
		padding-top: calc(150 / 460 * 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: 1400px) {
	.story {
		padding: 115px 0 0;
	}

	.story::before {
		width: 260px;
		padding-top: 523px;
		margin: -30px 0 0;
	}
}


/* =====================================================================
*    sns
* =================================================================== */
.sns {
	padding-top: calc(60 / 750 * 100%);
}

.sns h2 {
	margin-bottom: calc(40 / 650 * 100%);
}

.story_sns_share {
	padding: calc(40 / 650 * 100%) 0;
	border-top: 2px solid #b3adb9;
	border-bottom: 2px solid #b3adb9;
}

.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(35 / 650 * 100%) 0 0;
}

.story_sns_share_list li:last-of-type {
	margin: 0;
}

.story_sns_share_list li a {
	padding: calc(25 / 180 * 100%) 0;
	color: #fff;
	background-color: #383440;
}

.story_sns_share_list li img {
	margin: 0 auto;
	width: calc(38 / 180 * 100%);
}


@media screen and (min-width: 768px) {
	.sns {
		padding: calc(80 / 1400 * 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;
		-webkit-box-pack: center;
		-ms-flex-pack: center;
		justify-content: center;
		width: calc(1000 / 1200 * 100%);
		margin: 0 auto;
		padding: calc(30 / 1000 * 100%) 0;
		border-width: 1px;
	}

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

	.story_sns_share_list {
		width: calc(410 / 1000 * 100%);
		-webkit-box-pack: justify;
		-ms-flex-pack: justify;
		justify-content: space-between;
	}

	.story_sns_share_list li {
		width: calc(120 / 410 * 100%);
		margin: 0;
	}

	.story_sns_share_list li a {
		padding: calc(12 / 120 * 100%) 0;
	}

	.story_sns_share_list li img {
		width: calc(21 / 120 * 100%);
	}

	.twitterShare a:hover {
		background-color: #8ccaff;
	}

	.lineShare a:hover {
		background-color: #7cd588;
	}

	.facebookShare a:hover {
		background-color: #91a5ff;
	}

}

@media screen and (min-width: 1400px) {
	.sns {
		padding: 80px 0;
	}
}

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

@media screen and (min-width: 768px) {
	.banner1 {
		padding: 0 0 calc(80 / 1400 * 100%);
	}

	.banner_list li {
		margin: 0 calc(90 / 1200 * 100%) !important;
	}
}

@media screen and (min-width: 1400px) {
	.banner1 {
		padding: 0 0 80px;
	}
}


/* =====================================================================
*    delivery 
* =================================================================== */
.delivery {
	padding-bottom: calc(100 / 750 * 100%);
}

.delivery_box {}

.delivery h2 {
	width: calc(501 / 650 * 100%);
	margin-bottom: calc(40 / 650 * 100%);
}

.delivery_list {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
	width: calc(750 / 650 * 100%);
	padding: calc(60 / 650 * 100%) 0;
	margin: 0 0 0 calc(-50 / 650 * 100%);
	background: rgb(245, 245, 245);
}

.delivery_list li {
	width: calc(320 / 750 * 100%);
}

.delivery_list li:not(:last-child) {
	margin-right: calc(50 / 750 * 100%);
}

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

	.delivery h2 {
		width: calc(353 / 1200 * 100%);
		margin-bottom: calc(40 / 1200 * 100%);
	}

	.delivery_box {
		padding: calc(40 / 1400 * 100%) calc(50 / 1400 * 100%);
	}

	.delivery_box::before {
		margin: calc(-324 / 1400 * 100%) auto 0;
		width: calc(468 / 1400 * 100%);
		padding-top: calc(468 / 1400 * 100%);
	}

	.delivery_list {
		width: 100%;
		margin: 0;
		padding: calc(50 / 1200 * 100%) 0;
	}

	.delivery_list li {
		width: calc(320 / 1200 * 100%);
	}

	.delivery_list li:not(:last-child) {
		margin-right: calc(100 / 1200 * 100%);
	}
}

@media screen and (min-width: 1400px) {
	.delivery {
		padding: 0 0 100px;
	}
}

/* =====================================================================
*    backnumber
* =================================================================== */
.backnumber {
	padding-top: calc(100 / 750 * 100%);
}

.backnumber::before {
	content: "";
	display: block;
	width: 100%;
	height: 80%;
	background-color: #ffff8c;
	-webkit-transform: skewY(-6deg);
	transform: skewY(-6deg);
	position: absolute;
	top: 0;
	left: 0;
}

.backnumber::after {
	content: "";
	display: block;
	width: calc(300 / 750 * 100%);
	padding-top: calc(634 / 750 * 100%);
	background: url(../images/common/bg_deco4.webp) no-repeat center top;
	background-size: cover;
	position: absolute;
	bottom: 0;
	margin: 0 0 calc(-211 / 750 * 100%);
	z-index: 2;
}

.backnumber .outer {
	background-color: #ffff8c;
	padding-bottom: calc(100 / 750 * 100%);
}

.backnumber .outer * {
	z-index: 3;
}

.backnumber h2 {
	margin-bottom: calc(60 / 650 * 100%);
}

.bucknumber_list {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
}

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

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

.bucknumber_list li figcaption {
	width: calc(81 / 300 * 100%);
	padding: .6em 1em;
	background: url(../images/story/bg_back_deco.png) no-repeat center/contain;
	color: #fff;
	line-height: 1;
	text-align: center;
	position: absolute;
	bottom: 0;
	left: 0;
	z-index: 2;
	font-size: 2.2rem;
	margin: 0 0 calc(-15 / 300 * 100%) calc(-13 / 300 * 100%);
}


@media screen and (min-width: 768px) {
	.backnumber {
		padding-top: calc(110 / 1400 * 100%);
		margin-top: calc(-70 / 1400 * 100%);
	}

	.backnumber::after {
		width: calc(306 / 1400 * 100%);
		padding-top: calc(634 / 1400 * 100%);
		background-size: contain;
		margin: 0 0 calc(150 / 1400 * 100%);
	}

	.backnumber .outer {
		padding-bottom: calc(100 / 1400 * 100%);
	}

	.backnumber h2 {
		margin-bottom: calc(85 / 1000 * 100%);
	}

	.bucknumber_list {
		width: calc(1000 / 1200 * 100%);
		margin: auto;
	}

	.bucknumber_list li,
	.bucknumber_list li:nth-child(even) {
		width: calc(180 / 1000 * 100%);
		margin: 0 calc(25 / 1000 * 100%) calc(40 / 1000 * 100%) 0;
	}

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

	.bucknumber_list li figcaption {
		width: calc(46 / 180 * 100%);
		font-size: 1.6rem;
		padding: .3em 1em .4em;
		z-index: 5 !important;
		margin: 0 0 calc(-6 / 180 * 100%) calc(-8 / 180 * 100%);
	}

	.bucknumber_list li figure::before {
		content: '';
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		-webkit-transition: .3s ease;
		transition: .3s ease;
		background-image: linear-gradient(70deg, rgba(254, 255, 159, 0.8) 0%, rgba(176, 224, 255, 0.8) 33%, rgba(255, 179, 208, 0.8) 67%, rgba(255, 246, 189, 0.8) 100%);
		mix-blend-mode: screen;
		z-index: 4;
		opacity: 0;
	}

	.bucknumber_list li a:hover figure::before {
		opacity: 1;
	}

}

@media screen and (min-width: 1400px) {
	.backnumber {
		padding-top: 110px;
		margin-top: -70px;
	}

	.backnumber .outer {
		padding-bottom: 100px;
	}

	.backnumber::after {
		width: 306px;
		padding-top: 634px;
		margin: 0 0 150px;
	}

}