@charset "utf-8";

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


/* =====================================================================
*    story
* =================================================================== */
.story {
	background-color: #f8f8f8;
}

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

.story_box::after {
	content: '';
	position: absolute;
	bottom: 0;
	right: 0;
	margin: 0 calc(-30 / 630 * 100%) calc(-30 / 630 * 100%) 0;
	z-index: 1;
	background: url(../images/common/img_triangle_blue.png) no-repeat center;
	background-size: 100% auto;
	width: calc(150 / 630 * 100%);
	padding-top: calc(150 / 630 * 100%);
}

.story_mainBox .sec_ttl {
	margin: 0 0 calc(70 / 630 * 100%);
}

.story_movie_photo {
	margin: 0 0 calc(45 / 630 * 100%);
}

.story_movie_photo::before {
	content: '';
	position: absolute;
	width: 100%;
	height: 100%;
	background-color: #85c0c7;
	top: 0;
	left: 0;
	margin: calc(10 / 630 * 100%) 0 0 calc(-10 / 630 * 100%);
}

.story_movie_photo::after {
	content: '';
	position: absolute;
	background: url(../images/chara/img_chara2.png) no-repeat center;
	background-size: 100% auto;
	width: calc(99 / 630 * 100%);
	padding-top: calc(80 / 630 * 100%);
	top: 0;
	right: 0;
	margin-top: calc(-75 / 630 * 100%);
	z-index: 1;
}

.story_subttl {
	font-size: 3.2rem;
	font-weight: bold;
	line-height: 1;
	letter-spacing: ;
	white-space: nowrap;
	color: #716040;
	margin-bottom: calc(-20 / 630 * 100%);
	z-index: 1;
}

.story_subttl.last {
	width: calc(193 / 630 * 100%);
	margin: 2em 0 -.25em 1em;
}

.story_subttl span {
	font-family: 'Cantata One', serif;
	font-size: 8rem;
	vertical-align: top;
	margin-left: .1em;
}

.story_date {
	color: #85c0c7;
	font-size: 4rem;
	line-height: 1;
	letter-spacing: 0.05em;
	margin: 0 0 calc(80 / 630 * 100%);
}

.story_date p {
	font-weight: 700;
}

.story_date small {
	color: #b0a99c;
	display: block;
	font-size: 2.2rem;
	margin: 0.6em 0 0;
}

.story_movie_btn::before {
	content: "";
	display: block;
	width: calc(100 / 750 * 100vw);
	height: calc(100 / 750 * 100vw);
	position: absolute;
	background-color: #ffffff;
	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 #85c0c7;
	z-index: 1;
}

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

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

.story_txt_list_photo::before {
	content: '';
	position: absolute;
	bottom: 0;
	left: 0;
	margin: 0 0 calc(-30 / 630 * 100%) calc(-30 / 630 * 100%);
	z-index: 2;
	background: url(../images/common/img_triangle_yellow.png) no-repeat center;
	background-size: 100% auto;
	width: calc(150 / 630 * 100%);
	padding-top: calc(150 / 630 * 100%);
}

.trailer li:nth-child(even) .story_txt_list_photo::before,
.reverse .story_txt_list_photo::before,
.other_images li:nth-child(even) .story_txt_list_photo::before {
	left: auto;
	right: 0;
	-webkit-transform: scale(-1, 1);
	transform: scale(-1, 1);
	margin: 0 calc(-30 / 630 * 100%) calc(-30 / 630 * 100%) 0;
}

.story_txt_more .story_txt_list {
	height: 20em;
	overflow: hidden;
	width: calc(750 / 630 * 100%);
	margin-left: calc(-60 / 630 * 100%);
	padding: 0 calc(60 / 630 * 100%);
}

.story_txt_more {
	margin-top: 3em;
}

.spoiler ul {
	width: 100%;
}

.story_txt_more_btn {
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	bottom: 0;
	margin: auto;
	left: 0;
	background: -webkit-gradient(linear, left bottom, left top, from(rgba(248, 248, 248, 1)), to(rgba(248, 248, 248, 0)));
	background: linear-gradient(0deg, rgba(248, 248, 248, 1) 0%, rgba(248, 248, 248, 0) 100%);
}

.story_txt_more_btn a {
	margin: calc(150 / 660 * 100%) auto 0;
	background-color: #b0a99c;
	display: block;
	width: calc(500 / 630 * 100%);
	top: 0;
	padding: 1.2em 0;
	color: #fff;
	font-size: 2.8rem;
	line-height: 1;
	text-align: center;
	text-decoration: none;
}

.story_sns_share {
	margin: calc(180 / 630 * 100%) 0 0;
	padding: calc(40 / 630 * 100%) 0;
	border-top: 3px double #b0a99c;
	border-bottom: 3px double #b0a99c;
}

.story_sns_share::before {
	content: '';
	position: absolute;
	background: url(../images/chara/img_chara11.png) no-repeat center left;
	background-size: contain;
	width: calc(96 / 630 * 100%);
	padding-top: calc(60 / 630 * 100%);
	top: 0;
	left: 0;
	margin: calc(-67 / 630 * 100%) 0 0 calc(10 / 630 * 100%);
	z-index: 2;
}

.story_sns_share dt {
	font-size: 2.8rem;
	line-height: 1;
	text-align: center;
	margin: 0 0 calc(30 / 630 * 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(200 / 630 * 100%);
	margin: 0 calc(10 / 630 * 100%) 0 0;
}

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

.story_sns_share_list li a {
	padding: calc(12 / 200 * 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 {
	width: calc(560 / 630 * 100%);
	margin: calc(130 / 630 * 100%) auto 0;
}

.story_bnr li {
	margin-bottom: calc(50 / 560 * 100%);
}

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

	.story_mainBox .inner::before {
		content: "";
		display: block;
		width: calc(40 / 1600 * 100%);
		padding-top: calc(320 / 1600 * 100%);
		background-image: repeating-linear-gradient(0deg, transparent, transparent calc(6 / 200 * 100%), #f6ec7f calc(7 / 200 * 100%), #f6ec7f calc(10 / 200 * 100%), transparent calc(11 / 200 * 100%));
		margin: calc(80 / 1600 * 100%) 0 0;
		-webkit-transform: skewY(40deg);
		transform: skewY(40deg);
		position: absolute;
		top: 0;
		left: 0;
		z-index: 2;
	}

	.story_mainBox .inner::after {
		content: "";
		display: block;
		width: calc(40 / 1600 * 100%);
		padding-top: calc(320 / 1600 * 100%);
		background-image: repeating-linear-gradient(0deg, transparent, transparent calc(6 / 200 * 100%), #85c0c7 calc(7 / 200 * 100%), #85c0c7 calc(10 / 200 * 100%), transparent calc(11 / 200 * 100%));
		margin: 0 0 calc(400 / 1600 * 100%);
		-webkit-transform: skewY(40deg);
		transform: skewY(40deg);
		position: absolute;
		bottom: 0;
		right: 0;
		z-index: 2;
	}

	.story_mainBox .sec_ttl {
		margin: 0 auto calc(45 / 1000 * 100%);
	}

	.story_movie {
		z-index: 2;
	}

	.story_box::after {
		margin: 0 calc(-30 / 800 * 100%) calc(-30 / 800 * 100%) 0;
		width: calc(150 / 800 * 100%);
		padding-top: calc(150 / 800 * 100%);
	}

	.story_movie_photo {
		z-index: 1;
		margin-bottom: calc(45 / 1000 * 100%);
	}

	.story_movie_photo::before {
		margin: calc(10 / 1000 * 100%) 0 0 calc(-10 / 1000 * 100%);
	}

	.story_movie::before {
		display: none;
	}

	.story_movie_photo::after {
		width: calc(141 / 1000 * 100%);
		padding-top: calc(113 / 1000 * 100%);
		margin-top: calc(-105 / 1000 * 100%);
	}

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

	.story_movie_btn::after {
		border-width: 1em 0 1em 1.5em;
	}

	.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_movie {
		padding: 0 calc(100 / 1000 * 100%);
	}

	.story_subttl {
		font-size: 5rem;
		margin-bottom: calc(-25 / 800 * 100%);
		z-index: 3;
	}

	.story_subttl.last {
		width: calc(265 / 800 * 100%);
		margin-top: 1em;
	}

	.story_subttl::before {
		width: 14rem;
		margin-bottom: 2rem;
	}

	.story_subttl.last::before {
		width: 7rem;
	}

	.story_subttl span {
		font-size: 11rem;
	}

	.story_date {
		display: -moz-flex;
		display: -ms-flex;
		display: -o-flex;
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		font-size: 2.8rem;
		margin-bottom: calc(85 / 800 * 100%);
	}

	.story_date small {
		font-size: 1.3rem;
		padding-left: 1em;
	}

	.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%);
	}

	.story_txt_list_photo::before {
		/*		margin: 0 calc(-30 / 475 * 100%) calc(-30 / 475 * 100%) 0;*/
		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;
	}

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

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

	.story_txt_more .story_txt_list {
		height: 10em;
		width: calc(1200 / 1000 * 100%);
		margin-left: calc(-100 / 1000 * 100%);
		padding: 0 calc(100 / 1000 * 100%);
	}

	.story_txt_more_btn a {
		width: calc(360 / 1000 * 100%);
		margin: calc(40 / 1000 * 100%) auto 0;
		padding: 1.1em 0;
		font-size: 1.8rem;
	}

	.story_txt_more_btn a:hover {
		background-color: #85c0c7;
	}

	.story_txt_more_btn a.arrow2::after {
		-webkit-transition: 0.3s ease;
		transition: 0.3s ease;
	}

	.story_txt_more_btn a.arrow2:hover::after {
		border-color: #fff;
	}

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

	.story_sns_share::before {
		width: calc(96 / 1000 * 100%);
		padding-top: calc(60 / 1000 * 100%);
		margin: calc(-64 / 1000 * 100%) 0 0 calc(15 / 1000 * 100%);
	}

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

	.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 #b0a99c;
		box-shadow: 0 0 0 1px #b0a99c;
		border: #b0a99c;
		color: #b0a99c;
	}

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

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

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

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



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

.delivery {
	overflow: hidden;
}

.delivery::before {
	content: '';
	background: url(../images/common/bg_pattern2.png) center top 1.9em;
	background-size: calc(115 / 750 * 100%);
	width: 100%;
	height: 50%;
	position: absolute;
	bottom: 0;
	left: 0;
}

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

.delivery_ttl {
	color: #716040;
	text-align: center;
	font-size: 3.2rem;
	font-weight: bold;
	margin: 0 auto calc(50/ 630 * 100%);
}

.delivery_ttl::after {
	content: "";
	display: block;
	width: 58%;
	padding-top: calc(10 / 750 * 100%);
	margin: .3em auto 0;
	background-image: repeating-linear-gradient(90deg, #85c0c7 0px, #85c0c7 calc(4 / 750 * 100vw), transparent calc(4 / 750 * 100vw), transparent calc(10 / 750 * 100vw));
	-webkit-transform: skewX(-27deg);
	transform: skewX(-27deg);
}

.delivery .top_ttl::before {
	content: '';
	position: absolute;
	background-color: #fff;
}

.delivery_list li {
	width: calc(560 / 630 * 100%);
	margin: 0 auto calc(40 / 630 * 100%);
}

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

	.delivery .inner::before {
		content: '';
		position: absolute;
		background: url(../images/chara/img_chara4.png) no-repeat center bottom;
		background-size: 100% auto;
		width: calc(191 / 1600 * 100%);
		padding-top: calc(122 / 1600 * 100%);
		margin: 0 calc(20 / 1600 * 100%) calc(-15 / 1600 * 100%) 0;
		bottom: 0;
		right: 0;
		z-index: 2;
		-webkit-transform: rotate(-7deg);
		transform: rotate(-7deg);
	}

	.delivery::before {
		height: 40%;
		background-size: calc(65 / 1200 * 100%);
		background-position: center;
	}

	.delivery_ttl {
		width: auto;
		font-size: 2.4rem;
		margin-bottom: calc(40 / 1000 * 100%);
	}

	.delivery_ttl::after {
		width: 20%;
		padding-top: calc(6 / 1000 * 100%);
		margin: .3em auto 0;
		background-image: repeating-linear-gradient(90deg, #85c0c7 0px, #85c0c7 calc(3 / 1000 * 100vw), transparent calc(3 / 1000 * 100vw), transparent calc(5 / 1000 * 100vw));
	}

	.delivery_list {
		display: -moz-flex;
		display: -ms-flex;
		display: -o-flex;
		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: justify;
		-ms-flex-pack: justify;
        justify-content: center;
		padding: 0 calc(50 / 1000 * 100%);
	}

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

}


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

	.delivery::before {
		background-size: 65px;
	}

	.delivery .inner::before {
		margin-right: calc(180 / 1600 * 100%);
	}

}

/* =====================================================================
*    backnumber
* =================================================================== */
.backnumber_box {
	background-color: #f6ec7f;
}

.backnumber_box::before {
	content: "";
	position: absolute;
	background-size: .7em .7em;
	margin: 0 auto;
	background-image: radial-gradient(#fff 25%, transparent 20%);
	width: 100%;
	padding-top: calc(155 / 750 * 100%);
	bottom: 0;
	left: 0;
}

.backnumber_box .inner {
	padding: calc(120 / 750 * 100%) 0 calc(80 / 750 * 100%);
}

.backnumber_box .inner::before {
	content: "";
	position: absolute;
	top: 0;
	left: .5em;
	display: block;
	width: calc(320 / 750 * 100%);
	margin-top: calc(-20 / 750 * 100%);
	padding-top: calc(40 / 750 * 100%);
	background-image: repeating-linear-gradient(90deg, #85c0c7 0px, #85c0c7 calc(5 / 750 * 100vw), transparent calc(6 / 750 * 100vw), transparent calc(18 / 750 * 100vw));
	-webkit-transform: skewX(-40deg);
	transform: skewX(-40deg);
	z-index: 3;
}

.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;
	-webkit-box-pack: justify;
	-ms-flex-pack: justify;
	justify-content: space-between;
	z-index: 2;
}

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

.bucknumber_num {
	width: calc(150 / 300 * 100%);
	margin: 0 auto;
	color: #716040;
	text-align: center;
	line-height: 1.3;
}

.bucknumber_num::before {
	content: '';
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	margin: auto;
	border-top: 4px double #716040;
	width: 1.5em;
	height: 2px;
}

.bucknumber_num::after {
	content: '';
	position: absolute;
	top: 0;
	bottom: 0;
	right: 0;
	margin: auto;
	border-top: 4px double #716040;
	width: 1.5em;
	height: 2px;
}

.bucknumber_num span {
	font-family: 'Cantata One', serif;
	font-size: 3.2rem;
}

.bucknumber_num span::before {
	content: '#';
	margin-right: .1em;
	font-size: 2.4rem;
}

.chara12 {
	position: absolute;
	width: calc(193 / 630 * 100%) !important;
	bottom: 0;
	left: 0;
	margin: 0 0 calc(-50 / 630 * 100%) calc(-65 / 630 * 100%);
	z-index: 1;
}

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

	.backnumber_box::before {
		padding-top: calc(150 / 1200 * 100%);
		background-size: 1.1em 1.1em;
	}

	.backnumber_box .inner::before {
		width: calc(320 / 1600 * 100%);
		padding-top: calc(40 / 1600 * 100%);
		background-image: repeating-linear-gradient(90deg, #85c0c7 0px, #85c0c7 calc(6 / 1600 * 100vw), transparent calc(6 / 1600 * 100vw), transparent calc(17 / 1600 * 100vw));
		margin-top: calc(-20 / 1600 * 100%);
	}

	.bucknumber_list {
		-webkit-box-pack: start;
		-ms-flex-pack: start;
		justify-content: flex-start;
	}

	.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 a {
		overflow: hidden;
	}

	.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;
	}

	.bucknumber_list li a::before {
		content: '';
		position: absolute;
		background: url(../images/chara/img_chara6.png) no-repeat center;
		background-size: 100% auto;
		z-index: 1;
		width: calc(60 / 300 * 100%);
		padding-top: calc(36 / 300 * 100%);
		bottom: -2.5em;
		right: 0;
		left: 0;
		margin: auto;
		-webkit-transition: .3s;
		transition: .3s;
	}

	.bucknumber_list li a:hover::before {
		-webkit-transition: .3s;
		transition: .3s;
		bottom: 0;
	}

	.chara12 {
		width: calc(193 / 1200 * 100%) !important;
		margin: 0 0 calc(20 / 1200 * 100%);
	}
}

@media screen and (min-width: 1200px) {
	.backnumber_box::before {
		padding-top: 157px;
	}

	.backnumber_box .inner {
		padding: 100px 0 70px;
	}

	.chara12 {
		margin-left: calc(-50 / 1200 * 100%);
	}
}