@charset "utf-8";

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

@media screen and (min-width: 768px) {
	.top_ttl {
		width: calc(750 / 1000 * 100%);
		margin: 0 auto;
	}
}

/* =====================================================================
*    mv
* =================================================================== */

.mv {
	background-color: #000;
}

.mv::before {
	content: "";
	display: block;
	width: 100%;
	padding-top: calc(630 / 750 * 100%);
	background: url(../images/top/bg_mv_sp.jpg) no-repeat center top;
	background-size: 100% auto;
}

.mv > .inner {
	width: 100%;
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	z-index: 2;
}

.mv_category {
	width: calc(250 / 750 * 100%);
	position: absolute;
	top: 0;
	right: 0;
	margin: 0 calc(20 / 750 * 100%) 0 0;
	opacity: 0;
}

.mv_ani_start .mv_category {
	-webkit-animation: mv_anime6 0.1s linear 3.6s forwards;
	animation: mv_anime6 0.1s linear 3.6s forwards;
}

.mv_ttl {
	width: calc(398 / 750 * 100%);
	position: absolute;
	top: 0;
	left: 0;
	margin: calc(371 / 750 * 100%) 0 0 calc(172 / 750 * 100%);
	opacity: 0;
}

.mv_ani_start .mv_ttl {
	-webkit-animation: mv_anime1 1s linear 2.6s forwards;
	animation: mv_anime1 1s linear 2.6s forwards;
}

.mv_onair {
	width: calc(714 / 750 * 100%);
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	margin: calc(555 / 750 * 100%) auto 0;
	opacity: 0;
}

.mv_ani_start .mv_onair {
	-webkit-animation: mv_anime1 1s linear 2.6s forwards;
	animation: mv_anime1 1s linear 2.6s forwards;
}

.mv_open {
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 100000;
	overflow: hidden;
}

.mv_open .inner {
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	margin: auto;
	padding: 0;
}

.mv_open .inner::before {
	content: "";
	display: block;
	width: 100%;
	height: 100%;
	background-color: #000;
	position: absolute;
	top: 0;
	left: 0;
}

.mv_ani_start .mv_open .inner::before {
	-webkit-animation: mv_anime5 1.9s linear 2s forwards;
	animation: mv_anime5 1.9s linear 2s forwards;
}

.mv_open_caution {
	position: absolute;
	color: #fff;
	-webkit-writing-mode: vertical-rl;
	-ms-writing-mode: tb-rl;
	writing-mode: vertical-rl;
	top: 0;
	right: 0;
	opacity: 0;
	width: calc(17 / 750 * 100%);
	margin: calc(110 / 750 * 100%) calc(295 / 750 * 100%) 0 0;
}

.mv_ani_start .mv_open_caution {
	-webkit-animation: mv_anime6 .5s linear .6s forwards;
	animation: mv_anime6 .5s linear .6s forwards;
}

@-webkit-keyframes mv_anime1 {
	0% {
		opacity: 0;
		top: 50px;
	}

	100% {
		opacity: 1;
		top: 0;
	}
}

@keyframes mv_anime1 {
	0% {
		opacity: 0;
		top: 50px;
	}

	100% {
		opacity: 1;
		top: 0;
	}
}

@-webkit-keyframes mv_anime2 {
	0% {
		-webkit-transform: rotate(0) translateY(0);
		transform: rotate(0) translateY(0);
	}

	60% {
		-webkit-transform: rotate(-5deg) translateY(0);
		transform: rotate(-5deg) translateY(0);
	}

	100% {
		-webkit-transform: rotate(-45deg) translateY(-100%);
		transform: rotate(-45deg) translateY(-100%);
	}
}

@keyframes mv_anime2 {
	0% {
		-webkit-transform: rotate(0) translateY(0);
		transform: rotate(0) translateY(0);
	}

	60% {
		-webkit-transform: rotate(-5deg) translateY(0);
		transform: rotate(-5deg) translateY(0);
	}

	100% {
		-webkit-transform: rotate(-45deg) translateY(-100%);
		transform: rotate(-45deg) translateY(-100%);
	}
}

@-webkit-keyframes mv_anime3 {
	0% {
		-webkit-transform: rotate(0) translateY(0);
		transform: rotate(0) translateY(0);
	}

	60% {
		-webkit-transform: rotate(2deg) translateY(0);
		transform: rotate(2deg) translateY(0);
	}

	100% {
		-webkit-transform: rotate(10deg) translateY(150%);
		transform: rotate(10deg) translateY(150%);
	}
}

@keyframes mv_anime3 {
	0% {
		-webkit-transform: rotate(0) translateY(0);
		transform: rotate(0) translateY(0);
	}

	60% {
		-webkit-transform: rotate(2deg) translateY(0);
		transform: rotate(2deg) translateY(0);
	}

	100% {
		-webkit-transform: rotate(10deg) translateY(150%);
		transform: rotate(10deg) translateY(150%);
	}
}

@-webkit-keyframes mv_anime4 {
	0% {
		-webkit-transform: scale(3);
		transform: scale(3);
		opacity: 0;
	}

	100% {
		-webkit-transform: scale(1);
		transform: scale(1);
		opacity: 1;
	}
}

@keyframes mv_anime4 {
	0% {
		-webkit-transform: scale(3);
		transform: scale(3);
		opacity: 0;
	}

	100% {
		-webkit-transform: scale(1);
		transform: scale(1);
		opacity: 1;
	}
}

@-webkit-keyframes mv_anime5 {
	0% {
		opacity: 1;
	}

	100% {
		opacity: 0;
	}
}

@keyframes mv_anime5 {
	0% {
		opacity: 1;
	}

	100% {
		opacity: 0;
	}
}

@-webkit-keyframes mv_anime6 {
	0% {
		opacity: 0;
	}

	100% {
		opacity: 1;
	}
}

@keyframes mv_anime6 {
	0% {
		opacity: 0;
	}

	100% {
		opacity: 1;
	}
}

@-webkit-keyframes mv_anime7 {
	0% {
		opacity: 0;
	}

	50% {
		opacity: 1;
	}

	100% {
		opacity: 0;
	}
}

@keyframes mv_anime7 {
	0% {
		opacity: 0;
	}

	50% {
		opacity: 1;
	}

	100% {
		opacity: 0;
	}
}


@media screen and (min-width: 768px) {
	.mv {
		background-size: cover;
		overflow: hidden;
	}

	.mv::before {
		background: url(../images/top/bg_mv_pc.jpg) no-repeat center;
		background-size: 100% auto;
		margin: 0 auto;
		padding-top: calc(800 / 1200 * 100%);
		z-index: 2;
	}

	.mv > .inner {}

	.mv_category {
		width: calc(310 / 1200 * 100%);
		margin: calc(10 / 1200 * 100%) 0 0 0;
	}

	.mv_ttl {
		width: calc(588 / 1200 * 100%);
		margin: calc(454 / 1200 * 100%) 0 0 calc(303 / 1200 * 100%);
	}

	.mv_onair {
		width: calc(703 / 1200 * 100%);
		margin: calc(720 / 1200 * 100%) auto 0;
	}

	.mv_open .inner::before {
		width: 150%;
		left: -25%;
	}

	.mv_open_caution {
		margin: calc(160 / 1200 * 100%) calc(480 / 1200 * 100%) 0 0;
		width: calc(22 / 1200 * 100%);
	}
}

@media screen and (min-width: 1200px) {
	.mv::before {
		background-size: 1200px;
		padding-top: 800px;
	}
}


/* =====================================================================
*    top_bnr(1つ目)
* =================================================================== */

.top_bnr1 {
	background-color: #e0e1e1;
	padding: calc(80 / 750 * 100%) 0;
}

.top_bnr1::before {
	content: '';
	background: url(../images/top/bg_bnr1_sp.jpg) no-repeat center bottom/cover;
	width: 100%;
	/*	height: calc(470 / 750 * 100%);*/
	height: 100%;
	position: absolute;
	bottom: 0;
	left: 0;
}

.top_bnr1 .sec_contents,
.top_bnr2 .sec_contents {
	width: calc(560 / 750 * 100%);
}

.top_bnr1 .contents_bnr li::before {
	background: #f1ff38;
	background: -webkit-gradient(linear, left top, right top, from(#f1ff38), color-stop(25%, #b7e449), color-stop(50%, #52b4c2), color-stop(75%, #4c4dff), to(#a200ff));
	background: linear-gradient(to right, #f1ff38 0%, #b7e449 25%, #52b4c2 50%, #4c4dff 75%, #a200ff 100%);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f1ff38', endColorstr='#a200ff', GradientType=1);
}

@media screen and (min-width: 768px) {
	.top_bnr1 {
		background: -webkit-gradient(linear, left top, left bottom, from(#fff), color-stop(59%, #fff), color-stop(50%, #e0e1e1), to(#e0e1e1));
		background: linear-gradient(180deg, #fff 0%, #fff 59%, #e0e1e1 50%, #e0e1e1 100%);
		padding: calc(55 / 1200 * 100%) 0;
	}

	.top_bnr1::before {
		background: url(../images/top/bg_bnr1_pc.jpg) no-repeat center bottom/cover;
		max-width: calc(1600 / 1200 * 100vw);
		max-height: calc(120 / 1200 * 100vw);
		right: 0;
		margin: auto;
	}
}


@media screen and (min-width: 1200px) {
	.top_bnr1::before {
		background-size: cover;
		max-height: 115px;
		max-width: 1600px;
	}

	.top_bnr1 {
		padding: 55px 0;
	}

}


/* =====================================================================
*    news
* =================================================================== */

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

.news::before {
	content: '';
	background: url(../images/top/bg_news_sp.png) no-repeat center top/contain;
	width: 100%;
	height: calc(200 / 750 * 100%);
	position: absolute;
	top: 0;
	right: 0;
}

.news_ttl {
	margin-bottom: calc(30 / 630 * 100%);
}

.news_list li {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-pack: justify;
	-ms-flex-pack: justify;
	justify-content: space-between;
	padding-bottom: calc(85 / 630 * 100%);
	margin: 0 0 calc(70 / 630 * 100%);
}

.news_list li::before {
	content: '';
	position: absolute;
	width: 82%;
	height: 2px;
	background-color: #000;
	bottom: 0;
	right: 0;
}

.news_photo {
	width: calc(220 / 630 * 100%);
}

.news_txt {
	width: calc(360 / 630 * 100%);
}

.news_txt .category {
	position: absolute;
	display: block;
	bottom: 0;
	right: 0;
	color: #c91149;
	font-family: 'Playfair Display', serif;
	font-size: 4rem;
	font-weight: 700;
	letter-spacing: -0.1em;
	margin: 0 0 calc(-80 / 360 * 100%);
}

.news_txt .date {
	display: block;
	width: calc(150 / 360 * 100%);
	padding: 0.2em 0.3em;
	position: absolute;
	top: 0;
	left: 0;
	margin: calc(130 / 360 * 100%) 0 0 calc(-290 / 360 * 100%);
	color: #b5b5b5;
	font-size: 2.2rem;
	line-height: 1;
	text-align: right;
}

.news_txt dd {
	font-size: 2.4rem;
	line-height: 4.2rem;
}

.news_list li a {
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
}

@media screen and (min-width: 768px) {

	.news {
		padding: 90px 0 175px;
	}

	.news::before {
		background: url(../images/top/bg_news_pc.jpg) no-repeat center top/contain;
		height: calc(827 / 1200 * 100vw);
		max-width: calc(1600 / 1200 * 100vw);
		left: 0;
		margin: auto;
	}

	.news_ttl {
		width: calc(450 / 1000 * 100%);
		margin: 0 0 calc(30 / 1000 * 100%) calc(-35 / 1000 * 100%);
	}

	.news_list {
		display: -moz-flex;
		display: -ms-flex;
		display: -o-flex;
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-pack: center;
		-ms-flex-pack: center;
		justify-content: center;
		-ms-align-items: flex-start;
		-webkit-box-align: start;
		-ms-flex-align: start;
		align-items: flex-start;
	}

	.news_list li {
		width: calc(320 / 1000 * 100%);
		padding-bottom: calc(55 / 1000 * 100%);
		margin: 0;
		-webkit-transition: .3s;
		transition: .3s;

	}

	.news_list li:not(:last-child) {
		margin: 0 calc(20 / 1000 * 100%) 0 0;
	}

	.news_list li.hover:hover {
		-webkit-transition: .3s;
		transition: .3s;
		-webkit-transform: translate3d(0, 5px, 0);
		transform: translate3d(0, 5px, 0);
	}

	.news_photo {
		width: calc(100 / 320 * 100%);
	}

	.news_txt {
		width: calc(200 / 320 * 100%);
	}

	.news_txt dd {
		font-size: 1.4rem;
		line-height: 1.5;
	}

	.news_txt .category {
		font-size: 2.8rem;
		margin: 0 0 calc(-80 / 320 * 100%);
	}

	.news_txt .date {
		width: auto;
		padding: 0.2em 0.3em;
		margin: calc(100 / 320 * 100%) 0 0 calc(-195 / 320 * 100%);
		font-size: 1.4rem;
	}
}

@media screen and (min-width: 1200px) {
	.news::before {
		max-width: 1600px;
	}
}


/* =====================================================================
*    nextstory
* =================================================================== */
.nextstory {
	background-color: #f8f8f8;
	padding: 0 0 calc(100 / 750 * 100%);
}

.nextstory::before {
	content: '';
	background: url(../images/top/bg_nextstory_sp.jpg) no-repeat center top/contain;
	width: 100%;
	height: calc(410 / 750 * 100vw);
	position: absolute;
	top: 0;
	left: 0;
}

.nextstory .top_ttl {
	margin: 0 0 calc(105 / 750 * 100%);
}

.nextstory_ttl {
	position: absolute;
	top: 0;
	left: 0;
	margin-top: calc(-50 / 750 * 100%);
}

.nextstory_ttl .en {
	display: block;
	line-height: 1;
	width: calc(717 / 750 * 100%);
	margin: 0 0 calc(20 / 750 * 100%) calc(-30 / 750 * 100%);
}

.nextstory_ttl.last::before {
	display: none;
}

.nextstory_movie_photo {
	width: calc(690 / 630 * 100%);
	margin: 0 0 calc(40 / 630 * 100%);
	padding-top: calc(160 / 630 * 100%);
}

.nextstory_movie_photo::before {
	background: #ff4800;
	background: -webkit-gradient(linear, left top, right top, from(#ff4800), color-stop(25%, #f7480e), color-stop(50%, #4451ff), color-stop(75%, #228cd6), to(#10ca95));
	background: linear-gradient(to right, #ff4800 0%, #f7480e 25%, #4451ff 50%, #228cd6 75%, #10ca95 100%);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff4800', endColorstr='#10ca95', GradientType=1);
}

.nextstory_movie {
	margin: 0 0 calc(50 / 630 * 100%);
}

.nextstory_subttl {
	font-family: 'Playfair Display', serif;
	font-size: 9rem;
	font-weight: 700;
	line-height: 1;
	letter-spacing: ;
	white-space: nowrap;
	text-align: right;
	margin-bottom: calc(75 / 630 * 100%);
	color: #696969;
}

.nextstory_subttl.last {
	font-size: 9rem;
}

.nextstory_subttl::before {
	content: '';
	position: absolute;
	width: 10rem;
	height: 1px;
	background-color: #696969;
	left: 0;
	bottom: 0;
	margin-bottom: 4rem;
}

.nextstory_subttl.last::before {
	width: 10rem;
}

.nextstory_subttl span {
	font-size: 19rem;
	line-height: .5;
}

.nextstory_date {
	color: #c91149;
	font-size: 3.6rem;
	line-height: 1;
	letter-spacing: 0.05em;
	margin: 0 0 calc(55 / 630 * 100%);
}

.nextstory_date p {
	font-weight: 700;
}

.nextstory_date small {
	color: #696969;
	display: block;
	font-size: 2.2rem;
	letter-spacing: 0;
	margin: 0.6em 0 0;
}

.nextstory_movie_btn::before {
	content: "";
	display: block;
	width: calc(107 / 750 * 100vw);
	height: calc(107 / 750 * 100vw);
	position: absolute;
	border: 2px solid #fff;
	border-radius: 50%;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	margin: auto;
	z-index: 2;
}

.nextstory_movie_btn::after {
	content: '';
	display: block;
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	margin: auto;
	width: calc(35 / 750 * 100vw);
	height: calc(10 / 750 * 100vw);
	border-bottom: calc(3 / 750 * 100vw) solid #fff;
	border-right: calc(3 / 750 * 100vw) solid #fff;
	-webkit-transform: skew(25deg);
	transform: skew(25deg);
	z-index: 2;
}

.nextstory_txt {
	font-size: 2.8rem;
	line-height: 1.75;
}

.nextstory_btn {
	margin-top: calc(50 / 630 * 100%);
	text-align: right;
}

@media screen and (min-width: 768px) {
	.nextstory {
		padding: 0 0 90px;
	}

	.nextstory::before {
		background: url(../images/top/bg_nextstory_pc.jpg) no-repeat center top/contain;
		max-width: calc(1600 / 1200 * 100vw);
		height: calc(340 / 1200 * 100vw);
		right: 0;
		left: calc(-180 / 1200 * 100%);
		margin: auto;
	}

	.nextstory .inner {
		max-width: 1300px;
		margin: 0 0 0 auto;
	}

	.nextstory .top_ttl {
		margin: 0 0 calc(105 / 1000 * 100%);
	}

	.nextstory_ttl {
		width: 100%;
		max-width: 1000px;
		margin-top: calc(-65 / 1000 * 100%);
	}

	.nextstory_ttl .en {
		width: calc(797 / 1000 * 100%);
		margin: 0 0 calc(5 / 1000 * 100%) 0;
	}

	.nextstory_ttl .ja {
		display: block;
		width: calc(500 / 1000 * 100%);
		margin-left: calc(-35 / 1000 * 100%);
	}

	.nextstory_movie_photo {
		width: calc(600 / 1000 * 100%);
		margin: calc(140 / 1000 * 100%) calc(-100 / 1000 * 100%) 0 0;
		padding-top: 0;
	}

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

	.nextstory_movie_btn::after {
		width: calc(35 / 1200 * 100vw);
		height: calc(10 / 1200 * 100vw);
		border-bottom: calc(3 / 1200 * 100vw) solid #fff;
		border-right: calc(3 / 1200 * 100vw) solid #fff;
	}

	.nextstory_movie {
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-orient: horizontal;
		-webkit-box-direction: reverse;
		-ms-flex-direction: row-reverse;
		flex-direction: row-reverse;
		-webkit-box-pack: justify;
		-ms-flex-pack: justify;
		justify-content: space-between;
		-ms-align-items: flex-start;
		-webkit-box-align: start;
		-ms-flex-align: start;
		align-items: flex-start;
		margin: 0 0 calc(50 / 630 * 100%);
	}

	.nextstory_movie_wrap {
		width: calc(410 / 1000 * 100%);
		margin-right: calc(80 / 1000 * 100%);
		padding-top: calc(100 / 1000 * 100%);
	}

	.nextstory_subttl {
		font-size: 4.5rem;
		margin-bottom: calc(55 / 410 * 100%);
	}

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

    .nextstory_subttl.last {
        font-size: 6rem;
    }
    
	.nextstory_subttl.last::before {
        width: 6rem;
	}

	.nextstory_subttl span {
		font-size: 10rem;
	}

	.nextstory_date {
		font-size: 2.4rem;
		margin: 0 0 calc(55 / 410 * 100%);
	}

	.nextstory_date small {
		font-size: 1.3rem;
	}

	.nextstory_txt {
		font-size: 1.6rem;
	}

	.nextstory_btn {
		margin: calc(40 / 410 * 100%) 0 0;
	}
}

@media screen and (min-width: 1200px) {
	.nextstory::before {
		max-width: 1600px;
	}

	.nextstory_movie_photo {
		width: calc(600 / 1200 * 100vw);
		margin: calc(140 / 1000 * 100%) calc(-100 / 1000 * 100%) 0 0;
	}

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

	.nextstory_movie_btn::after {
		width: 35px;
		height: 10px;
		border-bottom: 3px solid #fff;
		border-right: 3px solid #fff;
	}

	.nextstory_btn {
		margin: 40px 0 0;
	}
}

@media screen and (min-width: 1600px) {
	.nextstory .inner {
		max-width: 1200px;
		margin: 0 auto;
	}

	.nextstory_movie_photo {
		width: calc(800 / 1000 * 100%);
		margin: calc(140 / 1000 * 100%) calc(-300 / 1000 * 100%) 0 0;
	}

	.nextstory_ttl .en {
		margin: 0 0 calc(5 / 1000 * 100%) calc(-30 / 1000 * 100%);
	}

	.nextstory_ttl .ja {
		margin-left: calc(-65 / 1000 * 100%);
	}

}


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

.delivery {
	padding: calc(100 / 750 * 100%) 0;
	background-color: #121318;
}

.delivery::before {
	background: url(../images/top/bg_delivery_sp.jpg) no-repeat center/cover;
	content: '';
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
}

.delivery .top_ttl {
	margin: 0 calc(60 / 750 * 100%) -2.2rem;
	color: #fff;
	text-align: center;
	font-size: 3.6rem;
	font-weight: 700;
	z-index: 2;
	white-space: nowrap;
}

.delivery .top_ttl::before,
.delivery .top_ttl::after {
	content: '';
	position: absolute;
	background-color: #fff;
	height: 1px;
	width: 2em;
	top: 1rem;
	bottom: 0;
	margin: auto;
}

.delivery .top_ttl::before {
	left: 0;
}

.delivery .top_ttl::after {
	right: 0;
}

.delivery_list {
	border-bottom: 1px solid #fff;
	border-left: 1px solid #fff;
	border-right: 1px solid #fff;
	padding: calc(70 / 630 * 100%) calc(40 / 630 * 100%);
}

.delivery_list li:not(:last-child) {
	margin-bottom: calc(40 / 550 * 100%);
}

.delivery_list li::before {
	background: #574aee;
	background: -webkit-gradient(linear, left top, right top, from(#574aee), color-stop(25%, #8d42a1), color-stop(50%, #db4233), color-stop(75%, #ff6e00), to(#ffcc00));
	background: linear-gradient(to right, #574aee 0%, #8d42a1 25%, #db4233 50%, #ff6e00 75%, #ffcc00 100%);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#574aee', endColorstr='#ffcc00', GradientType=1);
}

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

	.delivery::before {
		background: url(../images/top/bg_delivery_pc.jpg) no-repeat center/cover;
		height: 100%;
		right: 0;
		margin: auto;
	}

	.delivery .top_ttl {
		width: auto;
		font-size: 2.4rem;
		margin: 0 calc(100 / 1000 * 100%) -1.3rem;
	}

	.delivery .top_ttl::before,
	.delivery .top_ttl::after {
		width: calc(250 / 1000 * 100%);
	}

	.delivery .sec_contents {
		width: calc(800 / 1000 * 100%) !important;
	}

	.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;
		padding: calc(50 / 800 * 100%) 0;
        justify-content: center;
	}

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

	.delivery_list li:first-child {
		margin: 0 calc(20 / 800 * 100%) 0 calc(-50 / 800 * 100%);
	}

	.delivery_list li:last-child {
		margin: 0 calc(-50 / 800 * 100%) 0 0;
	}
}

@media screen and (min-width: 1200px) {
	.delivery::before {
		max-width: 1600px;
	}

	.delivery .top_ttl::before,
	.delivery .top_ttl::after {
		width: 230px;
	}
}


/* =====================================================================
*    top_bnr (2つ目) 
* =================================================================== */
.top_bnr2 {
	/*	padding: calc(100 / 750 * 100%) 0;*/
	padding: calc(50 / 750 * 100%) 0;
	overflow: hidden;
}

.top_bnr2::before {
	content: '';
	background: url(../images/top/bg_bnr2_sp.jpg) no-repeat center bottom/contain;
	width: 100%;
	/*	height: 50%;*/
	height: calc(190 / 750 * 100vw);
	position: absolute;
	bottom: 0;
	left: 0;
}

.top_bnr2 .contents_bnr {
	padding: calc(50 / 750 * 100%) 0;
	z-index: 2;
}

.top_bnr2 .contents_bnr li::before {
	background: #574aee;
	background: -webkit-gradient(linear, left top, right top, from(#574aee), color-stop(25%, #8d42a1), color-stop(50%, #db4233), color-stop(75%, #ff6e00), to(#ffcc00));
	background: linear-gradient(to right, #574aee 0%, #8d42a1 25%, #db4233 50%, #ff6e00 75%, #ffcc00 100%);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#574aee', endColorstr='#ffcc00', GradientType=1);
}

@media screen and (min-width: 768px) {
	.top_bnr2 {
		/*
		background: -webkit-gradient(linear, left top, left bottom, from(#fff), color-stop(50%, #fff), color-stop(50%, #e0e1e1), to(#e0e1e1));
		background: linear-gradient(180deg, #fff 0%, #fff 50%, #e0e1e1 50%, #e0e1e1 100%);
*/
		padding: calc(50 / 1200 * 100%) 0;
	}

	.top_bnr2::before {
		/*
		content: '';
		background: url(../images/top/bg_bnr2_pc.jpg) no-repeat center bottom/contain;
		height: calc(120 / 1200 * 100vw);
		right: 0;
		margin: auto;
*/
		display: none;
	}

	.bg_bnr2 {
		/*
		width: 100%;
		height: 100%;
		overflow: hidden;
*/
	}

/*
	.bg_bnr2 {
		content: '';
		background: url(../images/top/bg_bnr2_pc.jpg) no-repeat center bottom #e0e1e1;
		background-size: cover;
		width: 100%;
		height: calc(120 / 1200 * 100vw);
		position: absolute;
		left: 0;
		right: 0;
		bottom: 0;
		margin: auto;
	}
*/

	.top_bnr2 .contents_bnr {
		padding: 0;
	}

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

@media screen and (min-width: 1200px) {

	.top_bnr2 {
		padding: 50px 0;
	}

	/*
	.top_bnr2::before {
		max-width: 1600px;
		max-height: 120px;
	}
*/

	.bg_bnr2 {
		background-size: 1600px auto;
		/*		max-width: 1600px;*/
		max-height: 120px;
	}


}

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

.movie::before {
	content: '';
	background: url(../images/top/bg_movie_sp.png) no-repeat left top/contain;
	width: 100%;
	height: calc(195 / 750 * 100vw);
	position: absolute;
	top: 0;
	left: 0;
}

.movie .top_ttl {
	margin-bottom: calc(125 / 750 * 100%);
}

.movie_list {
	margin-bottom: calc(70 / 630 * 100%);
}

.movie_list .draggable {
	/*	padding: 0 calc(100 / 750 * 100%) !important;*/
	overflow: visible;
}

.slick-slide {
	height: auto !important;
}

.movie_list li::before {
	content: '';
	position: absolute;
	width: 82%;
	height: 2px;
	background-color: #000;
	bottom: 0;
	right: 3%;
}

.movie_list li a {
	margin: 0 calc(15 / 550 * 100%);
}

.movie_list li a span {
	display: block;
}

.movie_list li a span::before {
	content: "";
	display: block;
	width: calc(116 / 750 * 100vw);
	height: calc(116 / 750 * 100vw);
	border: 2px solid #fff;
	border-radius: 50%;
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	margin: auto;
	z-index: 2;
}

.movie_list li a span::after {
	content: "";
	display: block;
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 2.8vw 0 2.8vw 4.4vw;
	border-color: transparent transparent transparent #fff;
	position: absolute;
	top: 0;
	bottom: 0;
	left: 1.2vw;
	right: 0;
	margin: auto;
	z-index: 2;
}

.movie_list_photo figcaption {
	padding: 1em .8em 1.5em;
	color: #000;
	font-size: 2.4rem;
	line-height: 1.75;
}

.movie_more_btn {
	text-align: right;
}

@media screen and (min-width: 768px) {
	.movie {
		padding: 50px 0 85px;
	}

	.movie::before {
		background: url(../images/top/bg_movie_pc.jpg) no-repeat left top/contain;
		max-width: calc(1600 / 1200 * 100vw);
		height: calc(195 / 750 * 100vw);
		right: 0;
		margin: auto;
	}

	.movie .top_ttl {
		width: calc(600 / 1000 * 100%);
		margin-bottom: calc(50 / 1000 * 100%);
	}

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

	.movie_list .draggable {
		padding: 0 0 10px !important;
		overflow: hidden;
	}

	.slick-arrow {
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		width: calc(60 / 1440 * 100vw);
		height: 100%;
		position: absolute;
		top: 0;
		cursor: pointer;
	}

	.slick-arrow.prev {
		left: calc(-40 / 1200 * 100vw);
		z-index: 2;
	}

	.slick-arrow.next {
		right: calc(-40 / 1200 * 100vw);
	}

	.slick-arrow::before,
	.slick-arrow::after {
		content: "";
		display: block;
		width: calc(35 / 1200 * 100vw);
		height: calc(35 / 1200 * 100vw);
		position: absolute;
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;
		z-index: 2;
		margin: auto;
		-webkit-transition: 0.2s ease;
		transition: 0.2s ease;
	}

	.slick-arrow::before {
		background-color: #fff;
		border: 1px solid #000;
		-webkit-transition: 0.2s ease;
		transition: 0.2s ease;
	}

	.slick-arrow:hover::before {
		background-color: #cccccc;
	}

	.slick-arrow::after {
		top: 0;
		bottom: 0;
		margin: auto;
		width: calc(15 / 1200 * 100vw);
		height: calc(5 / 1200 * 100vw);
		border-bottom: calc(2 / 1200 * 100vw) solid #000;
	}

	.slick-arrow.prev::after {
		border-left: calc(2 / 1200 * 100vw) solid #000;
		-webkit-transform: skew(-25deg);
		transform: skew(-25deg);
	}

	.slick-arrow.next::after {
		border-right: calc(2 / 1200 * 100vw) solid #000;
		-webkit-transform: skew(25deg);
		transform: skew(25deg);
	}

	.movie_list li {
		-webkit-transition: .3s;
		transition: .3s;
	}

	.movie_list li a {
		margin: 0 10px;
	}

	.movie_list li a img {
		-webkit-transition: 0.2s ease;
		transition: 0.2s ease;
	}

	.movie_list li:hover {
		-webkit-transition: .3s;
		transition: .3s;
		-webkit-transform: translate3d(0, 5px, 0);
		transform: translate3d(0, 5px, 0);
	}

	.movie_list li a span::before {
		width: calc(72 / 1200 * 100vw);
		height: calc(72 / 1200 * 100vw);
	}

	.movie_list li a span::after {
		border-width: calc(14 / 1200 * 100vw) 0 calc(14 / 1200 * 100vw) calc(22 / 1200 * 100vw);
		left: calc(8 / 1200 * 100vw);
	}

	.movie_list_photo figcaption {
		font-size: 1.4rem;
		padding: 1.5em 1.2em;
	}

	.movie_more_btn {
		text-align: center;
	}
}

@media screen and (min-width: 1200px) {

	.movie::before {
		max-width: 1600px;
	}

	.movie_list li a span::before {
		width: 72px;
		height: 72px;
	}

	.movie_list li a span::after {
		border-width: 14px 0 14px 22px;
		left: 8px;
	}

	.slick-arrow::before {
		width: 35px;
		height: 35px;
	}

	.slick-arrow::after {
		width: 15px;
		height: 5px;
		border-width: 2px;
	}

	.movie_more_btn {}
}


/* =====================================================================
*    topics
* =================================================================== */
.topics {
	background-color: #ebebeb;
	padding: calc(125 / 750 * 100%) 0;
	overflow: hidden;
}

.topics::before {
	content: '';
	background: url(../images/top/bg_topics_sp.png) no-repeat right top/contain;
	width: 100%;
	height: calc(200 / 750 * 100vw);
	position: absolute;
	top: 0;
	right: 0;
}

.topics .top_ttl {
	margin-bottom: calc(125 / 750 * 100%);
}

.topics_list li {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-pack: justify;
	-ms-flex-pack: justify;
	justify-content: space-between;
	padding-bottom: calc(85 / 630 * 100%);
	margin: 0 0 calc(70 / 630 * 100%);
}

.topics_list li::before {
	content: '';
	position: absolute;
	width: 82%;
	height: 2px;
	background-color: #000;
	bottom: 0;
	right: 0;
}

.topics_photo {
	width: calc(300 / 630 * 100%);
}

.topics_txt {
	width: calc(300 / 630 * 100%);
}

.topics_txt dt {
	position: absolute;
	display: block;
	bottom: 0;
	right: 0;
	color: #b5b5b5;
	font-size: 2.2rem;
	letter-spacing: .2rem;
	margin: 0 0 calc(-70 / 300 * 100%);
}

.topics_txt dd {
	font-size: 2.4rem;
	line-height: 4.2rem;
}

.topics_list li a {
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
}

.topics_more_btn {
	text-align: right;
}

@media screen and (min-width: 768px) {
	.topics {
		padding: 100px 0 85px;
	}

	.topics::before {
		content: '';
		background: url(../images/top/bg_topics_pc.png) no-repeat center top/contain;
		max-width: calc(1254 / 1200 * 100vw);
		height: calc(295 / 1200 * 100vw);
		left: 0;
		right: calc(-650 / 1200 * 100vw);
		margin: auto;
	}

	.topics .top_ttl {
		width: calc(600 / 1000 * 100%);
		margin-bottom: calc(55 / 1000 * 100%);
	}

	.topics_list {
		display: -moz-flex;
		display: -ms-flex;
		display: -o-flex;
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-ms-flex-wrap: wrap;
		-o-flex-wrap: wrap;
		flex-wrap: wrap;
		-webkit-box-pack: start;
		-ms-flex-pack: start;
		justify-content: flex-start;
		-ms-align-items: flex-start;
		-webkit-box-align: start;
		-ms-flex-align: start;
		align-items: flex-start;
		margin-bottom: calc(60 / 1000 * 100%);
	}

	.topics_list li {
		width: calc(320 / 1000 * 100%);
		padding-bottom: calc(40 / 1000 * 100%);
		margin: 0;
		-ms-flex-wrap: wrap;
		-o-flex-wrap: wrap;
		flex-wrap: wrap;
		margin: 0 calc(20 / 1000 * 100%) calc(40 / 1000 * 100%) 0;
		-webkit-transition: .3s;
		transition: .3s;
	}

	.topics_list li:hover {
		-webkit-transition: .3s;
		transition: .3s;
		-webkit-transform: translate3d(0, 5px, 0);
		transform: translate3d(0, 5px, 0);
	}

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

	.topics_photo,
	.topics_txt {
		width: 100%;
		-webkit-transition: .3s ease;
		transition: .3s ease;
	}

	.topics_txt dt {
		font-size: 1.2rem;
		margin: 0 0 calc(-30 / 320 * 100%);
	}

	.topics_txt dd {
		padding: 1.5em 1.5em 0;
		font-size: 1.4rem;
		line-height: 1.75;
	}

	.topics_more_btn {
		text-align: center;
	}
}

@media screen and (min-width: 1200px) {

	.topics::before {
		right: -660px;
		max-width: 1254px;
	}

	.topics_more_btn {}
}


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

.sns .top_ttl {
	position: absolute;
	top: 0;
	left: 0;
	background-color: #fff;
	padding: 2em;
	margin: calc(-60 / 750 * 100%) 0 0 calc(40 / 750 * 100%);
	z-index: 2;
}

.sns .sec_contents {
	width: calc(580 / 750 * 100%);
	border: 1px solid #000;
	padding: calc(120 / 750 * 100%) 0 calc(70 / 750 * 100%);
}

.twitter {
	width: calc(560 / 580 * 100%);
	margin: 0 auto calc(80 / 580 * 100%) calc(-50 / 630 * 100%);
	padding: 0 calc(20 / 580 * 100%);
	background-color: #fff;
	border: 5px solid #f2f2f2;
	z-index: 2;
}

.twitter_box {
	padding-top: calc(500 / 560 * 100%);
	overflow: hidden;
}

.twitter_box iframe {
	width: 740px !important;
	height: 30em !important;
	font-size: 2rem;
	position: absolute !important;
	top: 0;
	left: 0;
	-webkit-overflow-scrolling: touch;
}

.sns_list {
	width: calc(600 / 580 * 100%);
	margin: 0 0 0 calc(65 / 580 * 100%);
	z-index: 2;
}

.sns_list li {
	background-color: #1b1b1b;
	margin: 0 0 2.5em auto;
}

.sns_list2 {
	width: calc(560 / 600 * 100%);
}

.sns_list3 {
	width: calc(520 / 600 * 100%);
}

.sns_list .grade_line::before {
	right: 0 !important;
	left: auto !important;
}

.sns_list1::before {
	background: #4260ff;
	background: -webkit-gradient(linear, left top, right top, from(#4260ff), color-stop(25%, #18beff), color-stop(50%, #02f1ff), color-stop(75%, #3382ff), to(#5a28ff));
	background: linear-gradient(to right, #4260ff 0%, #18beff 25%, #02f1ff 50%, #3382ff 75%, #5a28ff 100%);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#4260ff', endColorstr='#5a28ff', GradientType=1);
}

.sns_list2::before {
	background: #574aee;
	background: -webkit-gradient(linear, left top, right top, from(#574aee), color-stop(25%, #8d42a1), color-stop(50%, #db4233), color-stop(75%, #ff6e00), to(#ffcc00));
	background: linear-gradient(to right, #574aee 0%, #8d42a1 25%, #db4233 50%, #ff6e00 75%, #ffcc00 100%);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#574aee', endColorstr='#ffcc00', GradientType=1);
}

.sns_list3::before {
	background: #00ffea;
	background: -webkit-gradient(linear, left top, right top, from(#00ffea), color-stop(25%, #47ff7c), color-stop(50%, #97ff0c), color-stop(75%, #d8e700), to(#fbce00));
	background: linear-gradient(to right, #00ffea 0%, #47ff7c 25%, #97ff0c 50%, #d8e700 75%, #fbce00 100%);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00ffea', endColorstr='#fbce00', GradientType=1);
}

.sns_list li a {
	padding: 1.8em 1.8em 1.8em 5.5em;
	color: #fff;
	font-size: 2.6rem;
	line-height: 1;
	letter-spacing: -0.01em;
	z-index: 2;
}

.sns_list li a::before {
	content: "";
	display: block;
	width: 1.9em;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	margin: 0 0 0 2.8em;
}

.sns_list li a::after {
	content: "";
	display: block;
	width: 1.8em;
	height: 1px;
	position: absolute;
	background-color: #fff;
	top: 0;
	bottom: 0;
	left: 0;
	margin: auto 0;
}

.sns_list li.sns_list1 a::before {
	background: url(../images/common/btn_sns1.png) no-repeat left center;
	background-size: 100% auto;
}

.sns_list li.sns_list2 a::before {
	background: url(../images/common/btn_sns2.png) no-repeat left center;
	background-size: 100% auto;
}

.sns_list li.sns_list3 a::before {
	background: url(../images/common/btn_sns3.png) no-repeat left center;
	background-size: 100% auto;
}

.sns_list a span {
	display: block;
	text-align: left;
}

.sns_list .en {
	position: absolute;
	top: 0;
	bottom: 0;
	right: 0;
	width: 26.5vw;
	margin: 2.5vw 7vw auto 0;
	z-index: 1;
}


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

	.sns .top_ttl {
		width: auto;
		margin: calc(-20 / 1000 * 100%) 0 0 calc(80 / 1000 * 100%);
		padding: .5em;
	}

	.sns .sec_contents {
		width: calc(880 / 1000 * 100%) !important;
		padding: 70px 0 0;
		display: -moz-flex;
		display: -ms-flex;
		display: -o-flex;
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
	}

	.twitter {
		width: calc(480 / 880 * 100%);
		margin: 0 auto calc(-50 / 800 * 100%) calc(-60 / 880 * 100%);
		padding: 0;
		height: 100%;
	}

	.twitter_box {
		padding-top: calc(412 / 480 * 100%);
	}

	.twitter_box iframe {
		height: 100% !important;
	}

	.sns_list {
		width: calc(480 / 880 * 100%);
		margin: calc(-100 / 800 * 100%) calc(-60 / 880 * 100%) 0 calc(40 / 880 * 100%);
	}

	.sns_list li {}

	.sns_list2 {
		width: calc(460 / 480 * 100%);
	}

	.sns_list3 {
		width: calc(440 / 480 * 100%);
	}

	.sns_list li a {
		padding: 2.5em 2.5em 2.5em 5.2em;
		font-size: 1.6rem;
	}

	.sns_list li a::before {
		width: 1.7em;
	}

	.sns_list .en {
		width: calc(440 / 1000 * 100%);
		margin: .8em 1.6em auto 0;
	}

}

@media screen and (min-width: 1200px) {
	.sns_list li a {
		padding: 3em 3em 3em 7em;
	}

	.sns_list li a::before {
		margin: 0 0 0 4.2em;
	}

	.sns_list li a::after {
		width: 2.8em;
	}

	.sns_list .en {
		width: 195px;
	}
}


/* =====================================================================
*    platinight
* =================================================================== */
.platinight {
	padding: calc(117 / 750 * 100%) 0 calc(150 / 750 * 100%);
	background-color: #121318;
}

.platinight::before {
	background: url(../images/top/bg_platinight_sp.jpg) no-repeat center/100% auto;
	content: '';
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
}

.platinight_box {
	width: calc(680 / 750 * 100%);
	margin: 0 auto;
}

.platinight .top_ttl {
	margin: 0 auto calc(135 / 680 * 100%);
}

.platinight_txt {
	text-align: center;
	color: #fff;
	font-size: 2.6rem;
	line-height: 2.307;
}

.platinight_txt img {
	margin: .5em 0;
}


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

	.platinight::before {
		background: url(../images/top/bg_platinight_pc.jpg) no-repeat center/cover;
		right: 0;
		margin: auto;
		max-width: calc(1600 / 1200 * 100%);
	}

	.platinight_box::before,
	.platinight_box::after {
		width: calc(20 / 1000 * 100%);
		padding-top: calc(20 / 1000 * 100%);
	}

	.platinight .top_ttl {
		width: calc(600 / 1000 * 100%);
		margin: 0 auto calc(70 / 1000 * 100%);
	}

	.platinight_txt {
		font-size: 1.6rem;
		line-height: 2.25;
	}

	.platinight_txt img {
		width: calc(502 / 1000 * 100%);
		margin: 0 auto;
	}

}

@media screen and (min-width: 1200px) {
	.platinight::before {
		max-width: 1600px;
	}
}