@charset "utf-8";

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

/* =====================================================================
*    mv
* =================================================================== */
.mv::before {
	content: "";
	display: block;
	width: 100%;
	height: 0;
	padding-top: calc(90 / 750 * 100%);
	background-image: -webkit-gradient(linear, left top, right top, from(#e5d8ff), color-stop(50%, #e7ebfc), to(#ffe3ea));
	background-image: linear-gradient(90deg, #e5d8ff 0%, #e7ebfc 50%, #ffe3ea 100%);
	-webkit-transform: skewY(6deg);
	transform: skewY(6deg);
	position: absolute;
	bottom: 0;
	left: 0;
	margin: 0 0 calc(-28 / 750 * 100%);
	z-index: 1;
}

.mv .inner {
	z-index: 3;
}

.class_sp .mv .inner {
	width: 100%;
}

.mv_ttl {
	width: calc(322 / 750 * 100%);
	position: absolute;
	top: 0;
	left: 0;
	z-index: 2;
	margin: calc(326 / 750 * 100%) 0 0 calc(20 / 750 * 100%);
}

.mv_img_clip {
	position: absolute;
	top: 0;
	left: 0;
}

.mv_date {
	margin: calc(-76 / 750 * 100%) 0 calc(65 / 750 * 100%);
	z-index: 3;
}

.class_sp .mv_date .inner {
	width: 100%;
}

.mv_date::before {
	content: "";
	display: block;
	width: 100%;
	height: 0;
	padding-top: calc(86 / 750 * 100%);
	background-color: #ffff8c;
	-webkit-transform: skewY(-6deg);
	transform: skewY(-6deg);
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	margin: auto;
}

.mv_date img {
	width: calc(691 / 750 * 100%);
	margin: 0 auto;
}

@media screen and (min-width: 768px) {
	.mv::before {
		height: 100%;
		padding-top: 0;
		margin: 0 0 calc(25 / 1400 * 100%);
	}

	.mv .inner {
		padding: 0;
	}

	.mv_ttl {
		width: calc(580 / 1400 * 100%);
		margin: calc(600 / 1400 * 100%) 0 0 calc(75 / 1400 * 100%);
	}

	.mv_img {
		margin: -1px 0 0;
	}

	.mv_date {
		margin: calc(-120 / 1400 * 100%) 0 calc(60 / 1400 * 100%);
	}

	.mv_date::before {
		padding-top: calc(80 / 1400 * 100%);
	}

	.mv_date img {
		width: calc(691 / 1200 * 100%);
	}

	.mv_bg {
		width: 100%;
		height: 130%;
		-webkit-transform: skewY(-6deg);
		transform: skewY(-6deg);
		position: absolute;
		bottom: 3rem;
		left: 0;
		z-index: 2;
		overflow: hidden;
	}

	.mv_bg::after {
		content: "";
		display: block;
		width: 100%;
		height: 100%;
		background: url(../images/top/bg_mv_pc.jpg) repeat center top -300%;
		background-size: 1600px auto;
		-webkit-transform-origin: left bottom;
		transform-origin: left bottom;
		-webkit-transform: skewY(6deg);
		transform: skewY(6deg);
		position: absolute;
		top: 0;
		left: 0;
	}
}

@media screen and (min-width: 1400px) {
	.mv::before {
		margin: 0 0 25px;
	}

	.mv::after {
		margin: 0 0 80px;
	}

	.mv_date {
		margin: -120px 0 60px;
	}

	.mv_date::before {
		padding-top: 80px;
	}
}

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


/* =====================================================================
*    top_wrap
* =================================================================== */
.top_wrap {
	overflow: hidden;
}

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

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


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

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

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

.news .inner {
	width: 100%;
}

@media screen and (max-width: 767px) {
	.news .inner::before {
		content: "";
		display: block;
		width: calc(158 / 750 * 100%);
		padding-top: calc(458 / 750 * 100%);
		background: url(../images/top/bg_deco1_pc.webp) no-repeat right top;
		background-size: cover;
		position: absolute;
		top: 0;
		left: 0;
		z-index: 2;
		margin: calc(-63 / 750 * 100%) 0 0;
	}

	.news .inner::after {
		content: "";
		display: block;
		width: calc(168 / 750 * 100%);
		padding-top: calc(461 / 750 * 100%);
		background: url(../images/top/bg_deco2_pc.webp) no-repeat left top;
		background-size: cover;
		position: absolute;
		bottom: 0;
		right: 0;
		margin: 0 0 calc(-175 / 750 * 100%);
	}
}


.news_ttl {
	width: calc(172 / 750 * 100%);
	margin: 0 0 0 calc(50 / 750 * 100%);
	z-index: 2;
}

.news_list_wrap {
	overflow: scroll;
	background: #ffc2de;
	padding: calc(80 / 750 * 100%) 0;
	margin-top: calc(-20 / 750 * 100%);
}

.news_list {
	display: -moz-flex;
	display: -ms-flex;
	display: -o-flex;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	width: calc(1300 / 750 * 100%);
	padding: 0 calc(30 / 750 * 100%);
	-webkit-box-sizing: content-box;
	box-sizing: content-box;
	z-index: 2;
}

.news_list li {
	width: calc(409 / 1300 * 100%);
	margin: 0 calc(20 / 1300 * 100%);
}

.news_list_top {
	display: -moz-flex;
	display: -ms-flex;
	display: -o-flex;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	font-size: 2rem;
	margin-bottom: .5em;
}

.news_list_top .category {
	padding-left: .9em;
	margin-left: .5em;
}

.news_list_top .category::before {
	content: '/';
	position: absolute;
	width: .8em;
	top: -.05em;
	bottom: 0;
	left: 0;
	margin: auto;
}

.news_txt {
	margin: 1em .5em 0;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	overflow: hidden;
	-webkit-box-orient: vertical;
}

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

@media screen and (min-width: 768px) {
	.news {
		margin: calc(60 / 1400 * 100%) 0 calc(80 / 1400 * 100%);
		padding: 0;
		background-color: #ffc2de;
	}

	.news::before {
		content: "";
		display: block;
		width: calc(209 / 1400 * 100%);
		padding-top: calc(477 / 1400 * 100%);
		background: url(../images/top/bg_deco1_pc.webp) no-repeat left top;
		background-size: 100% auto;
		position: absolute;
		top: 0;
		left: 0;
		z-index: 2;
		margin: calc(-72 / 1400 * 100%) 0 0;
	}

	.news::after {
		content: "";
		display: block;
		width: calc(189 / 1400 * 100%);
		padding-top: calc(540 / 1400 * 100%);
		background: url(../images/top/bg_deco2_pc.webp) no-repeat left top;
		background-size: 100% auto;
		position: absolute;
		bottom: 0;
		right: 0;
		z-index: 2;
		margin: 0 0 calc(-194 / 1400 * 100%);
	}

	.news .inner {
		z-index: 2;
	}

	.news_ttl {
		width: calc(172 / 1400 * 100%);
		position: absolute;
		top: 0;
		left: 0;
		margin: calc(-45 / 1400 * 100%) 0 0 calc(100 / 1400 * 100%);
	}

	.news_list_wrap {
		margin: 0 auto;
		overflow: hidden;
		padding: calc(70 / 1200 * 100%) calc(50 / 1200 * 100%);
		background-color: transparent;
	}

	.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;
		width: 100%;
		padding: 0;
	}

	.news_list li {
		width: calc(350 / 1100 * 100%);
		margin: 0;
	}

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

	.news_list_top {
		font-size: 1.2rem;
		margin-bottom: .2em;
	}

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

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

	.news_photo::after {
		content: "";
		display: block;
		width: 100%;
		height: 100%;
		background-image: -webkit-gradient(linear, left top, right top, from(rgb(254, 255, 159)), color-stop(33%, rgb(176, 224, 255)), color-stop(67%, rgb(255, 179, 208)), to(rgb(255, 246, 189)));
		background-image: linear-gradient(90deg, rgb(254, 255, 159) 0%, rgb(176, 224, 255) 33%, rgb(255, 179, 208) 67%, rgb(255, 246, 189) 100%);
		position: absolute;
		top: 0;
		left: 0;
		opacity: 0;
		mix-blend-mode: screen;
		-webkit-transition: .5s ease;
		transition: .5s ease;
	}

	.news_list li:hover .news_photo::after {
		opacity: 0.8;
	}

	.news_txt {
		width: calc(210 / 350 * 100%);
		margin: -.3em 0 0;
		font-size: 1.5rem;
		line-height: 1.75;
		letter-spacing: 0;
	}
}

@media screen and (min-width: 1400px) {
	.news {
		margin: 60px 0 80px;
	}

	.news::before {
		width: 209px;
		padding-top: 477px;
		margin: -72px 0 0;
	}

	.news::after {
		width: 189px;
		padding-top: 540px;
		margin: 0 0 -194px;
	}
}


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

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

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

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

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

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

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

.nextstory_subttl_wrap {}

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

.nextstory_subttl.last {}

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

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

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

.nextstory_txt {
	font-size: 2.4rem;
	line-height: 2;
	margin-top: 0.8em;
}

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


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

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

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

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

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

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

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

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

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

	.nextstory_txt {
		width: calc(800 / 1200 * 100%);
		margin: 1.8em auto 0;
		font-size: 1.6rem;
		line-height: 2;
	}

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

}

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


/* =====================================================================
*    delivery 
* =================================================================== */
.delivery {
	padding-bottom: calc(80 / 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-color: #f5f5f5;
}

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


/* =====================================================================
*    banner2
* =================================================================== */
.banner2 {}

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

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

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

@media screen and (max-width: 767px) {
	.movie::before {
		content: "";
		display: block;
		width: 100%;
		padding-top: calc(725 / 750 * 100%);
		background: url(../images/top/bg_deco3_sp.jpg) no-repeat center top;
		background-size: cover;
		position: absolute;
		top: 0;
		left: 0;
		margin: calc(-410 / 750 * 100%) 0 0;
	}
}

@media screen and (max-width: 767px) {
	.movie_list_wrap {
		overflow: scroll;
		width: calc(750 / 650 * 100%);
		margin-left: calc(-50 / 650 * 100%);
	}

	.movie_list {
		display: -moz-flex;
		display: -ms-flex;
		display: -o-flex;
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		width: calc(1960 / 750 * 100%);
		padding: 0 calc(30 / 750 * 100%);
		margin-bottom: calc(70 / 750 * 100%);
		z-index: 2;
	}

}

.slick-track {
	display: -moz-flex;
	display: -ms-flex;
	display: -o-flex;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
}

.movie_list .draggable {
	overflow: visible;
	padding: 0 calc(60 / 750 * 100vw);
}

.slick-slide {
	height: auto !important;
	padding: 0 calc(25 / 750 * 100vw);
}

.movie_list li {
	width: calc(580 / 1900 * 100%);
	margin: 0 calc(25 / 1900 * 100%);
}

.movie_list li a {
	margin: 0 auto;
	background-color: #fff;
	-webkit-box-shadow: 0.7rem 0.7rem 0 0 rgb(255, 255, 140);
	box-shadow: 0.7rem 0.7rem 0 0 rgb(255, 255, 140);
	-webkit-transform: skewX(-4deg);
	transform: skewX(-4deg);
	overflow: hidden;
}

.movie_list_photo_box {
	display: block;
	width: calc(630 / 580 * 100%);
	margin: 0 0 0 calc(-25 / 580 * 100%);
	-webkit-transform: skewX(4deg);
	transform: skewX(4deg);
}

.movie_list_photo figcaption {
	padding: 1em 2em;
	-webkit-transform: skewX(4deg);
	transform: skewX(4deg);
}

.movie_list_txt {
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.movie_list_photo figcaption span {
	display: block;
	margin: 0.2em 0 0;
	color: #c29dff;
	font-size: 2rem;
}

.movie .slick-arrow {
	display: none !important;
}


@media all and (-ms-high-contrast: none) {
	.movie_list_txt {
		overflow: visible;
	}

	.movie_list_photo figcaption span {
		z-index: 2;
	}
}

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

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

	.movie .outer::before {
		content: "";
		display: block;
		width: calc(267 / 1400 * 100%);
		padding-top: calc(471 / 1400 * 100%);
		background: url(../images/top/bg_deco3_pc.webp) no-repeat center top;
		background-size: 100% auto;
		position: absolute;
		top: 0;
		left: 0;
		margin: calc(-270 / 1400 * 100%) 0 0;
	}

	.movie .outer::after {
		content: "";
		display: block;
		width: calc(198 / 1400 * 100%);
		padding-top: calc(517 / 1400 * 100%);
		background: url(../images/top/bg_deco4_pc.webp) no-repeat center top;
		background-size: 100% auto;
		position: absolute;
		top: 0;
		right: 0;
		margin: calc(-575 / 1400 * 100%) 0 0;
	}

	.movie_list {
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-pack: center;
		-ms-flex-pack: center;
		justify-content: center;
		margin-bottom: calc(60 / 1200 * 100%);
	}

	.movie_list li {
		width: calc(320 / 1200 * 100%);
		margin: 0 calc(40 / 1200 * 100%) 0 0;
	}

	.movie_list li:last-child {
		margin-right: 0;
	}

	.movie_list li a {
		top: 0;
		left: 0;
	}

	.movie_list li a:hover {
		-webkit-box-shadow: none;
		box-shadow: none;
		top: .7rem;
		left: .7rem;
	}

	::-webkit-full-page-media,
	:future,
	:root .movie_list li a:hover {
		-webkit-box-shadow: 0.7rem 0.7rem 0 0 transparent;
		box-shadow: 0.7rem 0.7rem 0 0 transparent;
	}

	.movie_list_photo figcaption {
		padding: 1.5em 2em;
		font-size: 1.5rem;
		line-height: 1.5;
	}

	.movie_list_photo figcaption span {
		margin: 1.2em 0 0;
		font-size: 1.2rem;
	}
}

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

	.movie .outer::before {
		width: 267px;
		padding-top: 471px;
		margin: -270px 0 0;
	}

	.movie .outer::after {
		width: 198px;
		padding-top: 517px;
		margin: -575px 0 0;
	}
}


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

@media screen and (max-width: 767px) {
	.topics::before {
		content: "";
		display: block;
		width: 100%;
		padding-top: calc(689 / 750 * 100%);
		background: url(../images/top/bg_deco4_sp.jpg) no-repeat center top;
		background-size: cover;
		position: absolute;
		top: 0;
		left: 0;
		margin: calc(-300 / 750 * 100%) 0 0;
	}
}

.topics_box {
	width: calc(580 / 650 * 100%);
	margin: 0 auto calc(60 / 650 * 100%);
	background-color: #fff;
	-webkit-box-shadow: 0.7rem 0.7rem 0 0 #a6e4ff;
	box-shadow: 0.7rem 0.7rem 0 0 #a6e4ff;
	-webkit-transform: skewX(-4deg);
	transform: skewX(-4deg);
	overflow: hidden;
}

.topics_box:last-of-type {
	margin-bottom: 0;
}

@media screen and (max-width: 767px) {
	.topics_box:not(:first-child) {
		overflow: unset;
	}

	.topics_box:not(:first-child) dl {
		display: -moz-flex;
		display: -ms-flex;
		display: -o-flex;
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-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;
	}

	.topics_box:not(:first-child) dt {
		width: calc(220 / 580 * 100%);
		-webkit-box-shadow: 0px 6px 15px 0px rgba(50, 0, 92, 0.22);
		box-shadow: 0px 6px 15px 0px rgba(50, 0, 92, 0.22);
		margin: 1.2em 0 0 -1em;
	}

	.topics_box:not(:first-child) dd {
		width: calc(397 / 580 * 100%);
	}
}

.topics_box dt {
	width: calc(630 / 580 * 100%);
	margin: 0 0 0 calc(-25 / 580 * 100%);
	-webkit-transform: skewX(4deg);
	transform: skewX(4deg);
}

.topics_box .txt {
	line-height: 1.666;
	padding: 1em 2em;
	-webkit-transform: skewX(4deg);
	transform: skewX(4deg);
}

.topics_box .txt1 {
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.topics_box .date {
	display: -moz-flex;
	display: -ms-flex;
	display: -o-flex;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	font-size: 2rem;
	color: #c29dff;
	margin: 0.5em 0 0;
}

.topics_box .date span {
	padding-left: .9em;
	margin-left: .5em;
}

.topics_box .date span::before {
	content: '/';
	position: absolute;
	width: .8em;
	top: -.05em;
	bottom: 0;
	left: 0;
	margin: auto;
}

.topics_box a {
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	z-index: 1;
}

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

@media all and (-ms-high-contrast: none) {
	.topics_box .txt1 {
		overflow: visible;
	}

	.topics_box .date {
		z-index: 2;
	}
}

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

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

	.topics .outer::before {
		content: "";
		display: block;
		width: calc(204 / 1400 * 100%);
		padding-top: calc(462 / 1400 * 100%);
		background: url(../images/top/bg_deco5_pc.webp) no-repeat center top;
		background-size: 100% auto;
		position: absolute;
		top: 0;
		left: 0;
		margin: calc(-185 / 1400 * 100%) 0 0;
	}

	.topics .outer::after {
		content: "";
		display: block;
		width: calc(220 / 1400 * 100%);
		padding-top: calc(512 / 1400 * 100%);
		background: url(../images/top/bg_deco6_pc.webp) no-repeat center top;
		background-size: 100% auto;
		position: absolute;
		top: 0;
		right: 0;
		margin: calc(-397 / 1400 * 100%) 0 0;
	}

	.topics_list {
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-pack: center;
		-ms-flex-pack: center;
		justify-content: center;
		margin-bottom: calc(60 / 1200 * 100%);
	}

	.topics_list li {
		width: calc(320 / 1200 * 100%);
		margin: 0 calc(40 / 1200 * 100%) 0 0;
	}

	.topics_list li:last-child {
		margin-right: 0;
	}

	.topics_box {
		top: 0;
		left: 0;
		-webkit-transition: 0.3s ease;
		transition: 0.3s ease;
	}

	.topics_box:hover {
		-webkit-box-shadow: none;
		box-shadow: none;
		top: .7rem;
		left: .7rem;
	}

	::-webkit-full-page-media,
	:future,
	:root .topics_box:hover {
		-webkit-box-shadow: 0.7rem 0.7rem 0 0 transparent;
		box-shadow: 0.7rem 0.7rem 0 0 transparent;
	}

	.topics_box .txt {
		padding: 1.5em 2em;
		font-size: 1.5rem;
		line-height: 1.5;
	}

	.topics_box .date {
		margin: 1.2em 0 0;
		font-size: 1.2rem;
	}

	.topics_more_btn {
		margin-top: 0;
	}
}

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

	.topics .outer::before {
		width: 204px;
		padding-top: 462px;
		margin: -185px 0 0;
	}

	.topics .outer::after {
		width: 220px;
		padding-top: 512px;
		margin: -397px 0 0;
	}
}


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

@media screen and (max-width: 767px) {
	.sns::before {
		content: "";
		display: block;
		width: 100%;
		padding-top: calc(691 / 750 * 100%);
		background: url(../images/top/bg_deco5_sp.jpg) no-repeat center top;
		background-size: cover;
		position: absolute;
		top: 0;
		left: 0;
		margin: calc(-350 / 750 * 100%) 0 0;
	}
}

.sns_box {
	border: 2px solid;
	-o-border-image: linear-gradient(67deg, #a1ffe3, #b7b3ff, #ff9ce4);
	border-image: linear-gradient(67deg, #a1ffe3, #b7b3ff, #ff9ce4);
	border-image-slice: 1;
	margin-bottom: calc(65 / 650 * 100%);
}

.twitter {
	padding: calc(40 / 650 * 100%);
	z-index: 2;
}

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

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

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

.sns_list li {
	width: calc(120 / 650 * 100%);
	margin: 0 calc(80 / 650 * 100%) 0 0;
}

.sns_list li:last-child {
	margin-right: 0;
}

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

	.sns::before {
		content: "";
		display: block;
		width: calc(220 / 1400 * 100%);
		padding-top: calc(505 / 1400 * 100%);
		background: url(../images/top/bg_deco7_pc.webp) no-repeat center top;
		background-size: 100% auto;
		position: absolute;
		top: 0;
		left: 0;
	}

	.sns::after {
		content: "";
		display: block;
		width: calc(183 / 1400 * 100%);
		padding-top: calc(531 / 1400 * 100%);
		background: url(../images/top/bg_deco8_pc.webp) no-repeat center top;
		background-size: 100% auto;
		position: absolute;
		top: 0;
		right: 0;
		margin: calc(-150 / 1400 * 100%) 0 0;
	}

	.sns_wrap {
		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;
		-webkit-box-align: center;
		-ms-flex-align: center;
		align-items: center;
	}

	.sns_wrap::before {
		content: "";
		display: block;
		width: calc(542/ 1200 * 100%);
		padding-top: calc(491 / 1200 * 100%);
		background: url(../images/top/bg_deco_sns.jpg) no-repeat center top;
		background-size: 100% auto;
		position: absolute;
		top: 0;
		right: 0;
		margin: calc(18 / 1200 * 100%) calc(42 / 1200 * 100%) 0 0;
	}

	.sns_box {
		width: calc(460 / 1200 * 100%);
		margin: 0 calc(135 / 1200 * 100%) 0 0;
	}

	.twitter {
		padding: calc(30 / 456 * 100%) calc(20 / 456 * 100%);
		height: 100%;
	}

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

	.twitter_box iframe {
		height: 100% !important;
		background-color: #fff;
	}

	.sns_list {
		display: block;
		width: calc(400 / 1200 * 100%);
	}

	.sns_list li {
		width: calc(360 / 400 * 100%);
		margin: 0 0 calc(50 / 400 * 100%) auto;
	}

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

	.sns_list li:last-child {
		margin-bottom: 0;
	}
}

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

	.sns::before {
		width: 220px;
		padding-top: 505px;
	}

	.sns::after {
		width: 183px;
		padding-top: 531px;
		margin: -150px 0 0;
	}
}


/* =====================================================================
*    platinight
* =================================================================== */
.platinight {
	background-color: #ffc2de;
}

.platinight_box {
	padding: calc(100 / 650 * 100%) 0 calc(40 / 650 * 100%);
}

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

	.platinight_box {
		width: calc(480 / 1200 * 100%);
		margin: 0 auto;
		padding: calc(80 / 1200 * 100%) 0 calc(70 / 1200 * 100%);
	}
}

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


/* =====================================================================
*    footer_bnr
* =================================================================== */

.footer_bnr a img {
	border: solid 3px #f5f5f5;
}


/* =====================================================================
*    hulu_movie
* =================================================================== */

.hulu_movie,
.hulu_movie .outer,
.hulu_movie_box,
.hulu_movie .inner {
	position: relative;
}

.hulu_movie h2 {
	margin-bottom: calc(70 / 650 * 100%);
	width: calc(571 / 650 * 100%);
}

.hulu_movie_subttl {
	width: calc(420 / 650 * 100%);
	background-color: #000;
	color: #fff;
	font-size: 3.6rem;
	line-height: 1.2;
	padding: .5em 0;
	text-align: center;
	margin: 0 auto calc(40 / 650 * 100%);
}

.hulu_movie_subttl small {
	display: block;
	font-size: 2.6rem;
}

.hulu_movie_box::before {
	content: "";
	display: block;
	width: calc(750 / 650 * 100%);
	padding-top: calc(433 / 650 * 100%);
	background: url(../images/top/bg_deco_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%);
}

.hulu_movie_photo {
	position: relative;
	width: 100%;
	padding-top: 56.25%;
	border: 3px solid #ffec9c;
	margin-bottom: calc(60 / 650 * 100%);
}

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

.hulu_movie_txt p {
	margin-bottom: 0.3em;
	text-align: center;
	line-height: 1.5;
	font-size: 2.8rem;
	font-weight: 700;
}

.hulu_movie_txt strong {
	display: block;
	font-size: 3.4rem;
}

.red {
	color: #cc261b;
}

@media screen and (min-width: 768px) {
	.hulu_movie h2 {
		margin-bottom: calc(88 / 1000 * 100%);
		width: calc(571 / 1200 * 100%);
	}

	.hulu_movie_subttl {
		width: calc(360 / 1000 * 100%);
		font-size: 2.8rem;
		margin-bottom: calc(40 / 1000 * 100%);
	}

	.hulu_movie_subttl small {
		font-size: 1.8rem;
	}

	.hulu_movie_box {
		width: calc(880 / 1200 * 100%);
		margin: 0 auto calc(40 / 1000 * 100%);
	}

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

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

	.hulu_movie_txt p {
		line-height: 1.3;
		margin-bottom: 0.9em;
		font-size: 1.8rem;
	}

	.hulu_movie_txt strong {
		font-size: 2.8rem;
	}
}

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


/* =====================================================================
*    hulu_popup
* =================================================================== */
.hulu_popup {
	display: none;
	width: 100%;
	height: 100%;
	position: fixed;
	top: 0;
	left: 0;
	background: rgba(255, 255, 140, 0.9);
	z-index: 100000;
	font-family: YakuHanJP, "Noto Sans JP", "メイリオ", "ＭＳ Ｐゴシック", "小塚ゴシック Pro R", "ヒラギノ角ゴ Pro W3", "Meiryo", "MS PGothic", "KozGoPro-Regular", "Hiragino Kaku Gothic Pro", "MS UI Gothic", Osaka, sans-serif;
}

.hulu_popup_inner {
	width: calc(650 / 750 * 100%);
	max-width: 650px;
	height: auto;
	position: absolute;
	top: 50%;
	left: 0;
	right: 0;
	margin: auto;
	-webkit-transform: translateY(-50%);
	transform: translateY(-50%);
	text-align: center;
	background: url(../images/top/bg_hulu_popup.jpg) no-repeat left top;
	background-size: 100% auto;
}

.hulu_popup_area1 {
	padding-top: calc(415 / 650 * 100%);
}

.hulu_popup_area1 h2 {
	width: calc(419 / 650 * 100%);
	margin: calc(24 / 650 * 100%) auto 0;
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
}

.hulu_popup_btn {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	margin: calc(315 / 650 * 100%) auto 0;
	width: calc(300 / 650 * 100%);
}

.hulu_popup_btn a {
	background-color: #000;
	border-radius: 3em;
	color: #fff;
	padding: 0.2em 0 .4em;
	font-size: 2.4rem;
	font-weight: 700;
}

.hulu_popup_btn a::before {
	content: "";
	display: block;
	width: .5em;
	height: .5em;
	position: absolute;
	top: 0;
	bottom: 0;
	right: 1em;
	-webkit-transform: rotate(-315deg);
	transform: rotate(-315deg);
	z-index: 2;
	margin: auto;
	border-top: .15em solid #fff;
	border-right: .15em solid #fff;
}

.hulu_popup_area2 {
	padding: 0 0 calc(7 / 650 * 100%);
}

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

.hulu_popup_link_list li {
	width: calc(401 / 650 * 100%);
	margin: 0 0 0 calc(40 / 650 * 100%);
}

.hulu_popup_link_list li:first-child {
	margin-left: 0;
}

.hulu_popup_link_list li a {
	background: url(../images/common/btn_txt2.png) no-repeat center/100% auto;
	color: #fff;
	font-size: 2.8rem;
	width: 100%;
	line-height: 1;
	padding: calc(22 / 401 * 100%) 0;
}

.hulu_popup_area2_txt {
	width: calc(330 / 650 * 100%);
	margin: calc(-55 / 650 * 100%) 0 calc(-53 / 650 * 100%) calc(121 / 650 * 100%);
	font-size: 2.4rem;
	font-weight: 700;
	line-height: 1;
	letter-spacing: 0.05em;
	text-align: center;
	z-index: -1;
}

.hulu_popup_area2_txt img {}

.hulu_popup_check {
	font-size: 2rem;
	font-weight: 700;
	letter-spacing: 0.05em;
}

.hulu_popup_check input {
	margin: 0 10px 0 0;
	-webkit-transform: scale(1.2);
	transform: scale(1.2);
}

.hulu_popup_close {
	margin: calc(20 / 650 * 100%) 0 0;
	color: #000;
	font-size: 2.4rem;
	line-height: 1;
	text-align: center;
	cursor: pointer;
	-webkit-transition: 0.3s ease;
	transition: 0.3s ease;
}

.hulu_popup_close::before {
	content: "×";
	display: inline-block;
	margin-right: .5em;
}

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

	.hulu_popup_area1 {
		padding-top: calc(423 / 650 * 100%);
	}

	.hulu_popup_btn {
		width: calc(200 / 650 * 100%);
		margin: calc(335 / 650 * 100%) auto 0;
	}

	.hulu_popup_btn a {
		font-size: 1.6rem;
	}

	.hulu_popup_btn a:hover {
		background-color: #545454;
	}

	.hulu_popup_area2_txt {
		margin: calc(-55 / 650 * 100%) 0 calc(-45 / 650 * 100%) calc(121 / 650 * 100%);
	}

	.hulu_popup_area2_txt2 {
		font-size: 1.6rem;
	}

	.hulu_popup_link_list li {
		width: calc(360 / 650 * 100%);
	}

	.hulu_popup_link_list li a {
		font-size: 1.8rem;
		padding: calc(22 / 360 * 100%) 0;
	}

	.hulu_popup_check {
		font-size: 1.6rem;
	}

	.hulu_popup_check label {
		cursor: pointer;
	}

	.hulu_popup_close {
		margin: calc(25 / 650 * 100%) 0 0;
		font-size: 1.8rem;
	}

	.hulu_popup_close:hover {
		opacity: 0.7;
	}
}

@media screen and (max-height: 900px) and (orientation: landscape) {
	.hulu_popup_inner {
		width: 100%;
		max-width: calc(520 / 750 * 100vh);
		min-width: 500px;
	}

	.hulu_popup_inner * {
		font-size: .8em;
	}

	.hulu_popup_btn a {
		font-size: 0.8em;
	}

	.hulu_popup_area2_txt {
		margin: calc(-55 / 650 * 100%) 0 calc(-50 / 650 * 100%) calc(121 / 650 * 100%);
	}
}