@charset "utf-8";

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

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

.mv .inner {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	width: 100%;
	height: 100%;
	margin: auto;
	overflow: hidden;
}

.mv .inner::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	background: url(../images/top/img_mv.jpg) no-repeat center/cover;
	width: 100%;
	height: 100%;
	z-index: 1;
}

.mv .inner::after {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	background: url(../images/top/img_mv_frame.png) no-repeat center/contain;
	width: 100%;
	height: 100%;
	z-index: 4;
}

.mv_ttl {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	width: calc(410 / 650 * 100%);
	margin: calc(310 / 750 * 100%) auto;
	opacity: 0;
	display: none;
	z-index: 3;
}

.mv_ani_start .mv_ttl {
	display: block;
	-webkit-animation: fadeIn 2s linear 5s forwards, slideUp1 2s linear 5s forwards;
	animation: fadeIn 2s linear 5s forwards, slideUp1 2s linear 5s forwards;
}

.mv_senka {
	position: absolute;
	top: 0;
	left: 0;
	width: calc(580 / 650 * 100%);
	margin: 0 0 0 calc(7 / 750 * 100%);
	opacity: 0;
	z-index: 2;
}

.mv_ani_start .mv_senka {
	-webkit-animation: fadeIn 1.5s linear 5.5s forwards, slideUp2 1.5s linear 5.5s forwards;
	animation: fadeIn 1.5s linear 5.5s forwards, slideUp2 1.5s linear 5.5s forwards;
}

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

.mv_open::before {
	content: "";
	display: block;
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	background: url(../images/top/bg_brown.jpg) repeat center/calc(500 / 750 * 100%) auto;
}

.mv_ani_start .mv_open::before {
	-webkit-animation: fadeOut 1.5s linear 4s forwards;
	animation: fadeOut 1.5s linear 4s 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;
	left: 0;
	opacity: 0;
	width: calc(28 / 750 * 100%);
	margin: calc(55 / 750 * 100%) auto 0;
}

.mv_ani_start .mv_open_caution {
	-webkit-animation: fadeIn .3s linear .5s forwards, fadeOut 1s linear 3.5s forwards;
	animation: fadeIn .3s linear .5s forwards, fadeOut 1s linear 3.5s forwards;
}

.mv_onair {
	background-color: #000;
	padding: calc(28 / 750 * 100%);
}


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

	100% {
		opacity: 1;
	}
}


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

	100% {
		opacity: 1;
	}
}

@-webkit-keyframes slideUp1 {
	0% {
		top: 2em;
	}

	100% {
		top: 0;
	}
}

@keyframes slideUp1 {
	0% {
		top: 2em;
	}

	100% {
		top: 0;
	}
}

@-webkit-keyframes slideUp2 {
	0% {
		top: 2.5em;
	}

	100% {
		top: 0;
	}
}

@keyframes slideUp2 {
	0% {
		top: 2.5em;
	}

	100% {
		top: 0;
	}
}

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

	100% {
		opacity: 0;
	}
}

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

	100% {
		opacity: 0;
	}
}


@media screen and (min-width: 768px) {
	.mv {
		padding-top: calc(790 / 1200 * 100%);
	}

	.mv::before,
	.mv::after {
		content: '';
		position: absolute;
		top: 0;
		width: calc(50% - 600px);
		height: 100%;
		background: url(../images/common/bg_pattern1.jpg) repeat-x center/calc(360 / 1200 * 100%) auto;
	}

	.mv::before {
		left: 0;
		background-position: center right;
	}

	.mv::after {
		right: 0;
		background-position: center left;
	}

	.mv .inner {
		padding: 0;
	}

	.mv_ttl {
		width: calc(760 / 1200 * 100%);
		margin-top: calc(480 / 1200 * 100%);
	}

	.mv_senka {
		width: calc(1066 / 1200 * 100%);
		margin-left: calc(16 / 1200 * 100%);
	}

	.mv_open::before {
		background-size: calc(500 / 1200 * 100%) auto;
	}

	.mv_open_caution {
		width: calc(40 / 1200 * 100%);
		margin-top: calc(114 / 1200 * 100%);
	}

	.mv_onair {
		padding: calc(30 / 1200 * 100%) 0;
	}

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

@media screen and (min-width: 1200px) {
	.mv {
		padding-top: 790px;
	}

	.mv::before,
	.mv::after {
		background-size: 365px auto;
	}

	.mv_onair {
		padding: 30px 0;
	}
}

/* =====================================================================
*    top_wrap
* =================================================================== */
.top_wrap {
	background: #b9f5f0;
	background: -webkit-gradient(linear, left top, left bottom, from(#b9f5f0), color-stop(50%, #fffaeb), to(#ffc1e7));
	background: linear-gradient(to bottom, #b9f5f0 0%, #fffaeb 50%, #ffc1e7 100%);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#b9f5f0', endColorstr='#ffc1e7', GradientType=0);
	overflow: hidden;
}

.top_wrap::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	padding-top: calc(800 / 750 * 100%);
	background: url(../images/common/bg_grade_green2.png) repeat-x center top/calc(100 / 750 * 100%) auto;
}

.top_wrap::after {
	content: '';
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	padding-top: calc(800 / 750 * 100%);
	background: url(../images/common/bg_grade_pink2.png) repeat-x center bottom/calc(100 / 750 * 100%) auto;
	-webkit-transform: scale(1, -1);
	transform: scale(1, -1);
}

.top_wrap .outer::before {
	content: '';
	position: absolute;
	top: 0;
	right: 0;
	width: calc(321 / 750 * 100%);
	padding-top: calc(320 / 750 * 100%);
	background: url(../images/common/bg_deco2.png) no-repeat center/contain;
	opacity: .2;
	margin: calc(-33 / 750 * 100%) calc(-33 / 750 * 100%) 0 0;
}

.top_wrap .outer::after {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: calc(240 / 750 * 100%);
	padding-top: calc(240 / 750 * 100%);
	background: url(../images/common/bg_deco2.png) no-repeat center/contain;
	opacity: .15;
	margin: calc(7 / 750 * 100%) 0 0 calc(-52 / 750 * 100%);
}

/*回転アニメーション*/
.banner1::before,
.nextstory::before {
	-webkit-animation: 70s linear infinite rotation1;
	animation: 70s linear infinite rotation1;
}

.top_wrap .outer::before,
.banner1::after {
	-webkit-animation: 60s linear infinite rotation1;
	animation: 60s linear infinite rotation1;
}

.top_wrap .outer::after,
.nextstory::after {
	-webkit-animation: 30s linear infinite rotation1;
	animation: 30s linear infinite rotation1;
}

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

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

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

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

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

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

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

	.top_wrap::before,
	.top_wrap::after {
		padding-top: calc(800 / 1600 * 100%);
		background-size: calc(100 / 1600 * 100%) auto;
	}

	.top_wrap .outer::before {
		width: calc(320 / 1600 * 100%);
		padding-top: calc(320 / 1600 * 100%);
		opacity: .2;
		margin: calc(244 / 1600 * 100%) calc(-175 / 1600 * 100%) 0 0;
	}

	.top_wrap .outer::after {
		width: calc(403 / 1600 * 100%);
		padding-top: calc(402 / 1600 * 100%);
		opacity: .2;
		margin: calc(47 / 1600 * 100%) 0 0 calc(-200 / 1600 * 100%);
	}

	/*回転アニメーション*/
	.top_wrap .outer::after,
	.nextstory::before {
		-webkit-animation: 70s linear infinite rotation1;
		animation: 70s linear infinite rotation1;
	}

	.top_wrap .outer::before,
	.banner1::after {
		-webkit-animation: 60s linear infinite rotation1;
		animation: 60s linear infinite rotation1;
	}

	.banner1::before,
	.nextstory::after {
		-webkit-animation: 30s linear infinite rotation1;
		animation: 30s linear infinite rotation1;
	}
}

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

	.top_wrap::before,
	.top_wrap::after {
		padding-top: 800px;
		background-size: 100px auto;
	}
}


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

.banner1::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: calc(403 / 750 * 100%);
	padding-top: calc(402 / 750 * 100%);
	background: url(../images/common/bg_deco1.png) no-repeat center/contain;
	opacity: .2;
	margin: calc(312 / 750 * 100%) 0 0 calc(-141 / 750 * 100%);
}

.banner1::after {
	content: '';
	position: absolute;
	top: 0;
	right: 0;
	width: calc(320 / 750 * 100%);
	padding-top: calc(320 / 750 * 100%);
	background: url(../images/common/bg_deco1.png) no-repeat center/contain;
	opacity: .1;
	margin: calc(307 / 750 * 100%) calc(-205 / 750 * 100%) 0 0;
}

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

	.banner1::before {
		width: calc(240 / 1600 * 100%);
		padding-top: calc(240 / 1600 * 100%);
		opacity: .15;
		margin: calc(-96 / 1600 * 100%) 0 0 calc(160 / 1600 * 100%);
	}

	.banner1::after {
		width: calc(320 / 1600 * 100%);
		padding-top: calc(320 / 1600 * 100%);
		opacity: .1;
		margin: calc(-94 / 1600 * 100%) calc(-30 / 1600 * 100%) 0 0;
	}
}

/* =====================================================================
*    news
* =================================================================== */
.news {
	padding: calc(90 / 750 * 100%) 0 calc(110 / 750 * 100%);
	z-index: 2;
}

.news_ttl {
	width: calc(155 / 750 * 100%);
	margin: 0 auto;
	z-index: 1;
}

.news_list_wrap {
	overflow: scroll;
	background: rgba(255, 255, 255, 0.5);
	padding: calc(130 / 750 * 100%) 0 calc(80 / 750 * 100%);
	margin-top: calc(-87 / 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;
}

.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-family: 'Cabin', sans-serif;
	font-size: 2rem;
	color: #948770;
	margin-bottom: .5em;
}

.news_list_top .category {
	padding-left: 1.2em;
	margin-left: .4em;
}

.news_list_top .category::before {
	content: '';
	position: absolute;
	width: .8em;
	height: 1px;
	top: 0;
	bottom: 0;
	left: 0;
	margin: auto;
	background-color: #948770;
}

.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 {
		max-width: 1320px;
		margin: 0 auto;
		padding: calc(90 / 1600 * 100%) calc(100 / 1600 * 100%) calc(120 / 1600 * 100%);
	}

	.news_ttl {
		position: absolute;
		top: 0;
		left: 0;
		width: calc(101 / 1400 * 100%);
		margin: calc(68 / 1400 * 100%) 0 0 calc(27 / 1400 * 100%);
	}

	.news_list_wrap {
		margin: 0 auto;
		overflow: hidden;
		padding: calc(20 / 1120 * 100%) calc(60 / 1120 * 100%) calc(35 / 1120 * 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;
		width: 100%;
		padding: 0;
	}

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

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

	.news_list li::before {
		content: '';
		position: absolute;
		bottom: 0;
		left: 0;
		width: 100%;
		height: .2em;
		background-color: #67385d;
		opacity: 0;
		margin-bottom: calc(-15 / 320 * 100%);
		-webkit-transition: .3s ease;
		transition: .3s ease;
	}

	.news_list li:hover::before {
		opacity: 1;
	}

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

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

	.news_txt {
		font-size: 1.4rem;
		width: calc(188 / 320 * 100%);
		margin: 0;
		line-height: 1.57;
	}
}


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

.nextstory::before {
	content: '';
	position: absolute;
	top: 0;
	right: 0;
	width: calc(403 / 750 * 100%);
	padding-top: calc(402 / 750 * 100%);
	background: url(../images/common/bg_deco3.png) no-repeat center/contain;
	opacity: .3;
	margin: calc(-450 / 750 * 100%) calc(-145 / 750 * 100%) 0 0;
}

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

.nextstory_movie::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	margin: calc(-123 / 650 * 100%) 0 0 calc(-105 / 650 * 100%);
	background: url(../images/common/img_deco1.png) no-repeat center/contain;
	width: calc(205 / 650 * 100%);
	padding-top: calc(228 / 650 * 100%);
}

.nextstory_movie::after {
	content: '';
	position: absolute;
	bottom: 0;
	right: 0;
	margin: 0 calc(-78 / 650 * 100%) calc(-60 / 650 * 100%) 0;
	z-index: 1;
	background: url(../images/common/img_deco2.png) no-repeat center/contain;
	width: calc(226 / 650 * 100%);
	padding-top: calc(200 / 650 * 100%);
}

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

.nextstory_movie_photo::before {
	content: '';
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	padding-top: calc(5 / 650 * 100%);
	background: url(../images/common/img_line1.png) no-repeat center/contain;
	margin-bottom: calc(-4 / 650 * 100%);
}

.nextstory_movie_btn::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(103, 56, 93, 0.7);
	z-index: 1;
}

.nextstory_movie_btn::after {
	content: "";
	display: block;
	width: calc(100 / 750 * 100vw);
	height: calc(100 / 750 * 100vw);
	position: absolute;
	background: url(../images/common/btn_movie.png) no-repeat center/contain;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	margin: auto;
	z-index: 2;
}

.nextstory_subttl_wrap {
	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: center;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	background-color: #000;
	color: #fff;
	padding: .8em 1em;
	z-index: 2;
}

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

.nextstory_subttl.last {
	line-height: 1.75;
	margin-top: 0 !important;
}

.nextstory_subttl span {
	font-size: 4.6rem;
	vertical-align: bottom;
}

.nextstory_date {
	font-size: 3rem;
}

.nextstory_subttl_note {
	color: #ac9494;
	font-size: 1.8rem;
	text-align: right;
}

.nextstory_txt {
	font-size: 2.8rem;
	margin-top: 1em;
}

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


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

	.nextstory::before {
		width: calc(403 / 1600 * 100%);
		padding-top: calc(402 / 1600 * 100%);
		margin: calc(-62 / 1600 * 100%) calc(-120 / 1600 * 100%) 0 0;
	}

	.nextstory::after {
		content: '';
		position: absolute;
		top: 0;
		left: 0;
		width: calc(242 / 1600 * 100%);
		padding-top: calc(241 / 1600 * 100%);
		background: url(../images/common/bg_deco3.png) no-repeat center/contain;
		opacity: .3;
		margin: calc(35 / 1600 * 100%) 0 0 calc(-110 / 1600 * 100%);
	}

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

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

	.nextstory_movie::before {
		margin: calc(-125 / 1000 * 100%) 0 0 calc(-50 / 1000 * 100%);
		width: calc(205 / 1000 * 100%);
		padding-top: calc(228 / 1000 * 100%);
	}

	.nextstory_movie::after {
		margin: 0 calc(-18 / 1000 * 100%) calc(-42 / 1000 * 100%) 0;
		width: calc(226 / 1000 * 100%);
		padding-top: calc(200 / 1000 * 100%);
	}

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

	.nextstory_movie_photo::before {
		padding-top: calc(5 / 880 * 100%);
		margin-bottom: calc(-4 / 880 * 100%);
		-webkit-transition: .3s ease;
		transition: .3s ease;
	}

	.nextstory_movie_btn {
		overflow: hidden;
	}

	.nextstory_movie_btn img,
	.nextstory_movie_btn:before {
		-webkit-transition: .3s ease;
		transition: .3s ease;
	}

	.nextstory_movie_btn:hover::before {
		opacity: .6;
	}

	.nextstory_movie_btn:hover img {
		-webkit-transform: scale(1.1);
		transform: scale(1.1)
	}

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

	.nextstory_subttl_wrap {
		width: calc(800 / 1000 * 100%);
		margin: 0 auto;
		padding: .5em 1.5em;
	}

	.nextstory_subttl {
		font-size: 2.4rem;
		margin-top: -.1em;
	}

	/*IE対策*/
	_:-ms-lang(x)::-ms-backdrop,
	.nextstory_subttl {
		margin-top: .35em;
	}

	.nextstory_subttl span {
		font-size: 3.2rem;
		line-height: .7;
	}

	.nextstory_date {
		font-size: 1.8rem;
	}

	.nextstory_subttl_note {
		width: calc(800 / 1000 * 100%);
		margin: .5em auto 0;
		font-size: 1.2rem;
	}

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

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

}

@media screen and (min-width: 1200px) {
	.nextstory_movie_btn::after {
		width: 120px;
		height: 120px;
	}
}



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

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

.delivery::after {
	content: '';
	position: absolute;
	width: 100%;
	padding-top: calc(387 / 750 * 100%);
	bottom: 0;
	left: 0;
	right: 0;
	margin: auto;
	background: url(../images/common/bg_silhouette.png) no-repeat bottom center/calc(2500 / 750 * 100%) auto;
}

.delivery_box {
	background: rgba(255, 255, 255, 0.4);
	padding: calc(60 / 750 * 100%) calc(40 / 750 * 100%) calc(100 / 750 * 100%);
	z-index: 1;
	overflow: hidden;
}

.delivery_box::before {
	content: '';
	position: absolute;
	background: url(../images/common/bg_deco3.png) no-repeat center/contain;
	top: 0;
	left: 0;
	right: 0;
	margin: calc(-234 / 750 * 100%) auto 0;
	width: calc(468 / 750 * 100%);
	padding-top: calc(468 / 750 * 100%);
	opacity: .3;
}

.delivery h2 {
	text-align: center;
	color: #42233c;
	font-size: 2.6rem;
	font-weight: bold;
}

.delivery h2::before,
.delivery h2::after {
	content: '';
	position: absolute;
	background: url(../images/common/img_line2_sp.png) no-repeat center/contain;
	top: 0;
	bottom: 0;
	margin: auto;
	width: calc(160 / 670 * 100%);
	padding-top: calc(6 / 670 * 100%);
}

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

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

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

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

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

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

	.delivery::after {
		width: calc(2500 / 1600 * 100%);
		margin-left: calc(-450 / 1600 * 100%);
		padding-top: calc(387 / 1600 * 100%);
		background-size: 100% auto;
	}

	.delivery h2 {
		width: 100%;
		font-size: 2.4rem;
		margin-bottom: calc(30 / 1000 * 100%);
	}

	.delivery h2::before,
	.delivery h2::after {
		background: url(../images/common/img_line2_pc.png) no-repeat center/contain;
		width: calc(323 / 1000 * 100%);
		padding-top: calc(6 / 1000 * 100%);
	}

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

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

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

	.delivery_list li {
		width: calc(350 / 1000 * 100%);
		margin: 0 calc(25 / 1000 * 100%) !important;
	}

	.delivery_list li a {
		top: 0;
	}

	.delivery_list li a:hover {
		top: -8px;
	}
}


/* =====================================================================
*    banner2
* =================================================================== */
.banner2 {
	padding: calc(60 / 750 * 100%) 0;
	background: url(../images/common/bg_purple.jpg) repeat center/calc(150 / 750 * 100%) auto;
}

@media screen and (min-width: 768px) {
	.banner2 {
		padding: calc(40 / 1200 * 100%) 0;
		background-size: calc(150 / 1200 * 100%) auto;
	}
}

@media screen and (min-width: 1200px) {
	.banner2 {
		padding: 40px 0;
		background-size: 150px auto;
	}
}

/* =====================================================================
*    movie
* =================================================================== */
.movie {
	padding: calc(160 / 750 * 100%) 0;
	background: url(../images/top/bg_pattern.jpg) repeat center /calc(200 / 750 * 100%) auto;
}

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

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

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

.movie_list .draggable {
	overflow: visible;
}

.slick-slide {
	margin: 0 10px;
	height: auto !important;
}

.movie_list li a {
	background-color: #fff;
	-webkit-box-shadow: 0px 5px 5px 0px rgba(0, 0, 0, 0.1);
	box-shadow: 0px 5px 5px 0px rgba(0, 0, 0, 0.1);
	padding: 1.3em 1.3em 1.8em;
}

.movie_list li a span {
	display: block;
}

.movie_list li a span::before {
	content: "";
	display: block;
	width: calc(100 / 750 * 100vw);
	height: calc(100 / 750 * 100vw);
	position: absolute;
	background: url(../images/common/btn_movie.png) no-repeat center/contain;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	margin: auto;
	z-index: 2;
}

.movie_list_photo figcaption {
	margin-top: 1em;
}

.movie .slick-arrow {
	display: block;
	position: absolute;
	bottom: 0;
	top: 0;
	margin: auto;
	z-index: 3;
	width: 4em;
	height: 1.5em;
	border-bottom: 2px solid #000;
}

.movie .slick-arrow::before {
	content: "";
	display: block;
	position: absolute;
	bottom: -1px;
	left: -.2em;
	z-index: 2;
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 0 0 1em 1.5em;
	border-color: transparent transparent #000000 transparent;
}

.movie .slick-arrow.prev {
	left: calc(-20 / 650 * 100%);
}

.movie .slick-arrow.next {
	right: calc(-20 / 650 * 100%);
	-webkit-transform: scale(-1, 1);
	transform: scale(-1, 1);
}

.movie_more_btn a {
	-webkit-box-shadow: 0.6em 0.6em 0px 0px rgba(180, 156, 168, 0.8);
	box-shadow: 0.6em 0.6em 0px 0px rgba(180, 156, 168, 0.8);
}


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

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

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

	.movie_list .slick-list {
		margin-top: -10px;
		padding: 10px 50px !important;
	}

	.movie .slick-arrow {
		cursor: pointer;
		width: 5em;
		-webkit-transition: .2s ease;
		transition: .2s ease;
	}

	.movie .slick-arrow::before {
		border-width: 0 0 .8em 1em;
	}

	.movie .slick-arrow.prev {
		left: -5vw;
	}

	.movie .slick-arrow.prev:hover {
		left: -7vw;
	}

	.movie .slick-arrow.next {
		right: -5vw;
	}

	.movie .slick-arrow.next:hover {
		right: -7vw;
	}

	.movie .slick-slide {
		margin: 0 .8em;
	}

	.movie_list li a {
		padding: .7em .7em 2em;
		top: 0;
	}

	.movie_list li a:hover {
		top: -10px;
	}

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

	.movie_more_btn a {
		-webkit-box-shadow: .4em .4em 0 0 rgba(180, 156, 168, 0.8);
		box-shadow: .4em .4em 0 0 rgba(180, 156, 168, 0.8);
	}

}

@media screen and (min-width: 1200px) {
	.movie {
		padding: 120px 0;
		background-size: 130px auto;

	}

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

	.movie .slick-arrow.prev {
		left: -61px;
	}

	.movie .slick-arrow.prev:hover {
		left: -80px;
	}

	.movie .slick-arrow.next {
		right: -61px;
	}

	.movie .slick-arrow.next:hover {
		right: -80px;
	}

}


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

.topics::before {
	content: '';
	position: absolute;
	top: 0;
	right: 0;
	background: url(../images/top/bg_deco4.jpg) no-repeat right top/contain;
	width: calc(418 / 750 * 100%);
	padding-top: calc(655 / 750 * 100%);
}

.topics::after {
	content: '';
	position: absolute;
	bottom: 0;
	left: 0;
	background: url(../images/top/bg_deco5.jpg) no-repeat right top/contain;
	width: calc(342 / 750 * 100%);
	padding-top: calc(599 / 750 * 100%);
}

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

.topics_box:not(:last-child) {
	padding-bottom: calc(40 / 650 * 100%);
	margin-bottom: calc(40 / 650 * 100%);
	border-bottom: 1px solid rgba(3, 0, 0, 0.3);
	/*	border-bottom: 2px solid #671920;*/
}

.topics_box:first-child dl {
	display: -moz-flex;
	display: -ms-flex;
	display: -o-flex;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-moz-flex-direction: column;
	-ms-flex-direction: column;
	-o-flex-direction: column;
	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
	flex-direction: column;
}

.topics_box:first-child dt {
	-webkit-box-ordinal-group: 2;
	-ms-flex-order: 1;
	order: 1;
}

.topics_box:first-child .date {
	-webkit-box-ordinal-group: 3;
	-ms-flex-order: 2;
	order: 2;
	margin: .5em 1em;
}

.topics_box:first-child .txt {
	-webkit-box-ordinal-group: 4;
	-ms-flex-order: 3;
	order: 3;
	margin: 0 1em;
}

.topics_box:first-child dt img {
	-o-object-fit: cover;
	object-fit: cover;
	font-family: 'object-fit: cover;';
	-o-object-position: center;
	object-position: center;
	height: calc(327 / 750 * 100vw);
}

.topics_box dt::before {
	content: '';
	position: absolute;
	display: block;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(103, 56, 93, 0.5);
	z-index: 1;
	-webkit-transition: .3s ease;
	transition: .3s ease;
}

.topics_box:hover dt::before {
	opacity: 0;
}

.topics_box .date {
	font-family: 'Cabin', sans-serif;
	font-size: 2rem;
	color: #c4b394;
	padding-left: 1.2em;
	margin-left: .4em;
}

.topics_box .date::before {
	content: '';
	position: absolute;
	width: .8em;
	height: 1px;
	top: 0;
	bottom: 0;
	left: 0;
	margin: auto;
	background-color: #c4b394;
}

.topics_box .txt {
	color: #fff;
	overflow: hidden;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
}

.topics_box:not(:first-child) dl {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-pack: justify;
	-ms-flex-pack: justify;
	justify-content: space-between;
	padding-bottom: calc(40 / 650 * 100%);
}

.topics_box:not(:first-child) dt {
	width: calc(220 / 650 * 100%);
}

.topics_box:not(:first-child) dt img {
	-o-object-fit: cover;
	object-fit: cover;
	font-family: 'object-fit: cover;';
	-o-object-position: center;
	object-position: center;
	height: calc(125 / 750 * 100vw);
}

.topics_box:not(:first-child) .date {
	position: absolute;
	top: 0;
	left: 0;
	width: auto;
	margin: calc(135 / 650 * 100%) 0 0 0;
}

.topics_box:not(:first-child) .txt {
	width: calc(390 / 650 * 100%);
	height: calc(130 / 750 * 100vw);
	margin-top: -.3em;
}

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

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

.topics_more_btn a {
	-webkit-box-shadow: 0.6em 0.6em 0px 0px rgba(145, 53, 73, 0.8);
	box-shadow: 0.6em 0.6em 0px 0px rgba(145, 53, 73, 0.8);
}

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

	.topics::before {
		width: calc(418 / 1200 * 100%);
		padding-top: calc(655 / 1200 * 100%);
	}

	.topics::after {
		width: calc(342 / 1200 * 100%);
		padding-top: calc(599 / 1200 * 100%);
	}

	.topics h2 {
		margin-bottom: calc(60 / 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;
		background-color: transparent;
	}

	.topics_box {
		padding: 0 !important;
		width: calc(330 / 1000 * 100%);
		margin: calc(40 / 1000 * 100%) 0 0 0 !important;
		border: 0 !important;
		-webkit-transition: .4s ease;
		transition: .4s ease;
	}

	.topics_box:nth-child(-n+3) {
		margin-top: 0;
	}

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

	.topics_box:hover {
		background-color: #fff;
		-webkit-box-shadow: 0px 5px 5px 0px rgba(0, 0, 0, 0.1);
		box-shadow: 0px 5px 5px 0px rgba(0, 0, 0, 0.1);
	}

	.topics_box:hover img {
		-webkit-transform: rotate(-10deg) scale(1.3);
		transform: rotate(-10deg) scale(1.3);
	}

	.topics_box:hover .txt {
		color: #000;
	}

	.topics_box dl {
		-moz-flex-direction: column;
		-ms-flex-direction: column;
		-o-flex-direction: column;
		-webkit-box-orient: vertical;
		-webkit-box-direction: normal;
		flex-direction: column;
		padding: calc(15 / 330 * 100%) calc(15 / 330 * 100%) calc(30 / 330 * 100%);
	}

	.topics_box dt {
		overflow: hidden;
		width: 100% !important;
	}

	.topics_box dt img {
		-webkit-transition: .3s ease;
		transition: .3s ease;
		height: calc(168 / 1200 * 100vw) !important;
	}

	.topics_box:not(:first-child) dt {
		padding-bottom: 0;
	}

	.topics_box .date {
		position: relative !important;
		font-size: 1.2rem;
		margin: 1em 0 0 !important;
		-webkit-box-ordinal-group: 3 !important;
		-ms-flex-order: 2 !important;
		order: 2 !important;
	}

	.topics_box .txt {
		-webkit-box-ordinal-group: 4 !important;
		-ms-flex-order: 3 !important;
		order: 3 !important;
		width: 100% !important;
		margin: .5em 0 0 !important;
		height: calc(83 / 1200 * 100vw) !important;
		-webkit-transition: .3s ease;
		transition: .3s ease;
	}

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

}

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

	.topics::before {
		width: 418px;
		padding-top: 655px;
	}

	.topics::after {
		width: 342px;
		padding-top: 599px;
	}

	.topics_box dt img {
		height: 168px !important;
	}

	.topics_box .txt {
		height: 83px !important;
	}

}



/* =====================================================================
*    sns
* =================================================================== */
.sns {
	padding: calc(120 / 750 * 100%) 0 calc(30 / 750 * 100%);
	background: url(../images/top/bg_pattern.jpg) repeat center /calc(200 / 750 * 100%) auto;
}

.sns_box {
	border: 4px solid #804470;
	border-top: 0;
	margin-bottom: calc(110 / 650 * 100%);
}

.sns_box_inner::before {
	content: '';
	position: absolute;
	background: url(../images/common/img_deco6.png) no-repeat center/contain;
	width: calc(394 / 650 * 100%);
	padding-top: calc(394 / 650 * 100%);
	opacity: .15;
}

.sns_box:first-of-type .sns_box_inner::before {
	top: 0;
	left: 0;
	margin: calc(-91 / 650 * 100%) 0 0 calc(-72 / 650 * 100%);
}

.sns_box:nth-of-type(2) .sns_box_inner::before {
	bottom: 0;
	right: 0;
	margin: 0 calc(-37 / 650 * 100%) calc(-146 / 650 * 100%) 0;
	-webkit-transform: rotate(20deg);
	transform: rotate(20deg)
}

.sns_box_inner {
	background: url(../images/common/bg_pink.jpg) repeat center/calc(100 / 750 * 100%) auto;
	overflow: hidden;
}

.sns_box h3 {
	position: absolute;
	display: block;
	width: 100%;
	font-family: 'Cabin', sans-serif;
	font-weight: 700;
	font-size: 3.6rem;
	letter-spacing: .5rem;
	text-align: center;
	margin-top: -.75em;
	z-index: 2;
}

.sns_box h3::before,
.sns_box h3::after {
	content: '';
	position: absolute;
	top: 0;
	bottom: 0;
	margin: auto;
	height: 4px;
	background-color: #804470;
}

.sns_box h3::before {
	left: -.1em;
}

.sns_box h3::after {
	right: -.1em;
}

.sns_box:first-of-type h3::before,
.sns_box:first-of-type h3::after {
	width: 5.6em;
}

.sns_box:nth-of-type(2) h3::before,
.sns_box:nth-of-type(2) h3::after {
	width: 2.6em;
}

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

.twitter_box {
	padding-top: calc(500 / 560 * 100%);
	background-color: #fff;
	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 {
	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;
	padding: calc(70 / 650 * 100%) 0;
}

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




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

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

	.sns_box:first-child {
		width: calc(560 / 1000 * 100%);
		margin: 0 calc(40 / 1000 * 100%) 0 0;
	}

	.sns_box:nth-child(2) {
		width: calc(400 / 1000 * 100%);
		margin: 0;
	}

	.sns_box h3 {
		font-size: 2.4rem;
		margin-top: -.8em;
	}

	.sns_box:first-of-type h3::before,
	.sns_box:first-of-type h3::after {
		width: 8em;
	}

	.sns_box:nth-of-type(2) h3::before,
	.sns_box:nth-of-type(2) h3::after {
		width: 1.5em;
	}

	.sns_box_inner {
		background-size: calc(100 / 1000 * 100%) auto;
	}

	.sns_box:first-of-type .sns_box_inner::before {
		width: calc(394 / 560 * 100%);
		padding-top: calc(394 / 560 * 100%);
		margin: calc(-121 / 650 * 100%) 0 0 calc(-102 / 650 * 100%);
	}

	.twitter {
		width: calc(500 / 560 * 100%);
		margin: 0 auto;
		padding: calc(40 / 500 * 100%) 0 calc(28 / 500 * 100%);
		height: 100%;
	}

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

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

	.sns_box:nth-of-type(2) .sns_box_inner::before {
		width: calc(394 / 400 * 100%);
		padding-top: calc(394 / 400 * 100%);
		margin: 0 calc(-134 / 400 * 100%) calc(-114 / 400 * 100%) 0;
	}

	.sns_list {
		-moz-flex-direction: column;
		-ms-flex-direction: column;
		-o-flex-direction: column;
		-webkit-box-orient: vertical;
		-webkit-box-direction: normal;
		flex-direction: column;
		padding: calc(40 / 400 * 100%) 0 calc(30 / 400 * 100%);
		height: calc(365 / 1200 * 100vw);
	}

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

	.sns_list li a:hover {
		opacity: .7;
	}

}

@media screen and (min-width: 1200px) {
	.sns {
		padding: 120px 0;
		background-size: 130px auto;
	}

	.sns_list {
		height: 365px;
	}
}


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

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

.platinight::before,
.platinight::after {
	background: url(../images/common/bg_pattern2.jpg) no-repeat center/100% auto;
	content: '';
	width: 100%;
	padding-top: calc(40 / 750 * 100%);
	position: absolute;
	left: 0;
}

.platinight::before {
	top: 0;
}

.platinight::after {
	bottom: 0;
	-webkit-transform: scale(-1, 1);
	transform: scale(-1, 1);
}

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

	.platinight_wrap::before,
	.platinight_wrap::after {
		content: '';
		position: absolute;
		width: 100%;
		height: 10px;
		background-color: #000;
		z-index: 1;
	}

	.platinight_wrap::before {
		top: 0;
	}

	.platinight_wrap::after {
		bottom: 0;
	}

	.platinight::before,
	.platinight::after {
		content: '';
		position: absolute;
		top: 0;
		width: calc(50vw - calc(540 / 1200 * 100%));
		height: 100%;
		padding-top: 0;
		background: url(../images/common/bg_pattern1.jpg) repeat-x bottom center/auto;
	}

	/*	IE対策*/
	_:-ms-lang(x)::-ms-backdrop,
	.platinight::before,
	.platinight::after {
		width: 6vw;
	}

	.platinight::before {
		background-position: bottom left;
		-webkit-transform: scale(-1, -1);
		transform: scale(-1, -1);
	}

	.platinight::after {
		left: auto;
		right: 0;
		bottom: auto;
		background-position: bottom left;
		-webkit-transform: scale(1, 1);
	}

}

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

	.platinight::before,
	.platinight::after {
		width: calc(50% - 530px);
		background-size: 360px auto;
	}
}


/* =====================================================================
*    hulu_movie
* =================================================================== */
.hulu_movie h2 {
    margin-bottom: calc(70 / 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: '';
    position: absolute;
    top: 0;
    left: 0;
    margin: calc(-123 / 650 * 100%) 0 0 calc(-105 / 650 * 100%);
    background: url(../images/common/img_deco1.png) no-repeat center/contain;
    width: calc(205 / 650 * 100%);
    padding-top: calc(228 / 650 * 100%);
}

.hulu_movie_box::after {
    content: '';
    position: absolute;
    bottom: 0;
    right: 0;
    margin: 0 calc(-78 / 650 * 100%) calc(-60 / 650 * 100%) 0;
    z-index: 1;
    background: url(../images/common/img_deco2.png) no-repeat center/contain;
    width: calc(226 / 650 * 100%);
    padding-top: calc(200 / 650 * 100%);
}

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

.hulu_movie_photo::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    padding-top: calc(5 / 650 * 100%);
    background: url(../images/common/img_line1.png) no-repeat center/contain;
    margin-bottom: calc(-4 / 650 * 100%);
}

.hulu_movie_btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(103, 56, 93, 0.7);
    z-index: 1;
}

.hulu_movie_btn::after {
    content: "";
    display: block;
    width: calc(100 / 750 * 100vw);
    height: calc(100 / 750 * 100vw);
    position: absolute;
    background: url(../images/common/btn_movie.png) no-repeat center/contain;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    z-index: 2;
}

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

    .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 {
        margin-bottom: calc(40 / 1000 * 100%);
    }

    .hulu_movie_box::before {
        margin: calc(-125 / 1000 * 100%) 0 0 calc(-50 / 1000 * 100%);
        width: calc(205 / 1000 * 100%);
        padding-top: calc(228 / 1000 * 100%);
    }

    .hulu_movie_box::after {
        margin: 0 calc(-18 / 1000 * 100%) calc(-42 / 1000 * 100%) 0;
        width: calc(226 / 1000 * 100%);
        padding-top: calc(200 / 1000 * 100%);
    }

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

    .hulu_movie_photo::before {
        padding-top: calc(5 / 880 * 100%);
        margin-bottom: calc(-4 / 880 * 100%);
        -webkit-transition: .3s ease;
        transition: .3s ease;
    }

    .hulu_movie_btn {
        overflow: hidden;
    }

    .hulu_movie_btn img,
    .hulu_movie_btn:before {
        -webkit-transition: .3s ease;
        transition: .3s ease;
    }

    .hulu_movie_btn:hover::before {
        opacity: .6;
    }

    .hulu_movie_btn:hover img {
        -webkit-transform: scale(1.1);
        transform: scale(1.1)
    }

    .hulu_movie_btn::after {
        width: calc(120 / 1200 * 100vw);
        height: calc(120 / 1200 * 100vw);
    }

    .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_movie_btn::after {
        width: 120px;
        height: 120px;
    }

}


/* =====================================================================
*    hulu_popup
* =================================================================== */
.hulu_popup {
	display: none;
	width: 100%;
	height: 100%;
	position: fixed;
	top: 0;
	left: 0;
	background: rgba(13, 4, 1, 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/img_hulu_bg.jpg) no-repeat left top;
	background-size: 100% auto;
}

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

.hulu_popup_area1 h2 {
	margin: calc(10 / 650 * 100%) 0 0;
	position: absolute;
	top: 0;
	left: 0;
}

.hulu_popup_btn {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	margin: calc(275 / 650 * 100%) auto 0;
	background-color: #f8f8f8;
	width: calc(300 / 650 * 100%);
}

.hulu_popup_btn a {
	color: #0d0401;
	border: 1px solid #0d0401;
	padding: 0.2em 0 .4em;
	font-size: 2.4rem;
    font-weight: 700;
}

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

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

.hulu_popup_link_ttl {
	margin: 0 0 calc(20 / 650 * 100%);
	font-size: 2rem;
    font-weight: 700;
	line-height: 1;
	letter-spacing: 0.05em;
	text-align: center;
}

.hulu_popup_link_list {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
	margin: 0 0 calc(12 / 650 * 100%);
}

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

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

.hulu_popup_area2_txt {
	margin: 0 0 calc(33 / 650 * 100%);
    color: #fff;
	font-size: 2.4rem;
    font-weight: 700;
	line-height: 1;
	letter-spacing: 0.05em;
	text-align: center;
}

.hulu_popup_area2_txt strong {
	margin-right: 0.1em;
	font-size: 240%;
	font-weight: 700;
}

.hulu_popup_area2_txt img {
	display: inline-block;
	width: calc(142 / 650 * 100%);
	margin: 0 1.3em 0 0;
	top: 0.3em;
}

.hulu_popup_area2_txt2 {
	margin: 0 0 calc(30 / 650 * 100%);
	color: #fff;
	font-size: 2.4rem;
	line-height: 1;
	letter-spacing: 0.05em;
	text-align: center;
}

.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: #fff;
	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 {}

	.hulu_popup_btn {
		width: calc(200 / 650 * 100%);
        margin: calc(295 / 650 * 100%) auto 0;
		font-size: 1.6rem;
	}

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

	.hulu_popup_btn a:hover {
		background-color: #0d0401;
		color: #fff;
	}

	.hulu_popup_btn a:hover::before {
		border-color: #fff;
	}

	.hulu_popup_link_ttl {
		font-size: 2rem;
	}

	.hulu_popup_link_list li a:hover {
		opacity: 0.7;
	}

	.hulu_popup_area2_txt {
		margin: 0 0 calc(38 / 650 * 100%);
	}

	.hulu_popup_area2_txt2 {
		margin: 0 0 calc(15 / 650 * 100%);
		font-size: 1.6rem;
	}

	.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: 400px;
	}

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

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