@charset "utf-8";

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


/* ********************************************************************
        メインイメージ
******************************************************************** */
#mv {
	position: relative;
}

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

#mv .inner {
	max-width: calc(690 / 750 * 100%);
}

#mv .mv_ttl {
	width: calc(603 / 690 * 100%);
	margin: 0 auto calc(10 / 690 * 100%);
	padding-top: calc(250 / 690 * 100%);
}

#mv .mv_ttl,
#mv .mv_date,
.mv_dvd {
	position: relative;
	z-index: 2;
}

#mv .mv_date {
	width: calc(317 / 690 * 100%);
	margin: 0 auto calc(25 / 690 * 100%);
	padding-right: calc(20 / 690 * 100%);
	-webkit-box-sizing: content-box;
	box-sizing: content-box;
}

.mv_dvd {
	background-color: #fff45c;
	width: calc(750 / 690 * 100%);
	margin-left: calc(-30 / 690 * 100%);
	padding: calc(27/ 750 * 100%) 0;
}

.mv_dvd img {
	width: calc(430 / 750 * 100%);
}

@media screen and (min-width: 768px) {
	#mv {
		background-color: #eee;
		z-index: 2;
	}

	#mv::before {
		content: '';
		position: absolute;
		width: 100%;
		height: 85px;
		background: #b6babd;
		top: auto;
		bottom: 0;
		left: 0;
		z-index: 1;
	}

	#mv .inner {
		position: relative;
		max-width: 1600px !important;
		padding-bottom: 10px;
	}

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

	#mv .mv_ttl {
		width: calc(603 / 1600 * 100%);
		margin: 0 auto calc(10 / 1600 * 100%);
		padding-top: calc(277 / 1600 * 100%);
	}

	#mv .mv_date {
		width: calc(317 / 1600 * 100%);
		padding: 0;
		margin: 0 calc(30 / 1600 * 100%) 0 0;
		-webkit-box-sizing: border-box;
		box-sizing: border-box;
	}

	.mv_dvd {
		width: calc(370 / 1600 * 100%);
		margin: 0;
		padding: calc(15 / 1600 * 100%) 0;
		position: relative;
		background: linear-gradient(45deg, transparent 8px, #fff45c 5px), linear-gradient(135deg, transparent 8px, #fff45c 5px), linear-gradient(225deg, transparent 8px, #fff45c 5px), linear-gradient(315deg, transparent 8px, #fff45c 5px);
		background-position: bottom left, top left, top right, bottom right;
		background-size: 50.1% 50.1%;
		background-repeat: no-repeat;
	}

	.mv_dvd img {
		width: calc(290 / 370 * 100%)
	}

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

}


/* ********************************************************************
	Hulu
******************************************************************** */
.hulu_bnr {
	padding-top: calc(100 / 630 * 100%);
}

.hulu h2 {
	width: calc(595 / 630 * 100%);
	margin: 0 auto calc(30 / 630 * 100%);
	padding-top: calc(100 / 630 * 100%);
}

.hulu_contents_ttl {
	width: calc(500 / 630 * 100%);
	margin: 0 auto calc(20 / 630 * 100%);
}

.hulu_movie_ttl {
	text-align: center;
	font-weight: bold;
	font-size: 2.5rem;
	margin-bottom: calc(40 / 630 * 100%);
}

.hulu_movie_photo {
	position: relative;
	background: url(../images/common/bg_story_movie.jpg) no-repeat center;
	background-size: contain;
	padding: calc(60 / 630 * 100%);
	width: calc(750 / 630 * 100%);
	margin-left: calc(-55 / 630 * 100%);
}

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

.hulu_movie_photo::after {
	content: '';
	position: absolute;
	background: url(../images/common/img_story_movie2.png) no-repeat center;
	background-size: 100%;
	bottom: 0;
	right: 0;
	margin: 0 calc(-50 / 630 * 100%) calc(-120 / 630 * 100%) 0;
	width: calc(220 / 630 * 100%);
	height: calc(380 / 630 * 100%);
	z-index: 2;
}

.hulu_catch {
	text-align: center;
	font-size: 1.6rem;
	font-weight: bold;
}

.hulu_catch * {
	font-weight: bold;
}

.hulu_catch strong {
	font-size: 2.6rem;
}

.hulu_catch span {
	font-size: 2.1rem;
}


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

	.hulu h2 {
		width: calc(446 / 1000 * 100%);
		margin: 0 auto calc(20 / 1000 * 100%);
		padding-top: calc(80 / 1000 * 100%);
	}

	.hulu_contents_ttl {
		width: calc(373 / 1000 * 100%);
		margin: 0 auto calc(20 / 1000 * 100%);
	}


	.hulu_movie_ttl {
		font-size: 3.4rem;
		margin-bottom: calc(40 / 1000 * 100%);
	}

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

	.hulu_movie_photo::before {
		margin: calc(-10 / 1000 * 100%) 0 0 calc(-10 / 1000 * 100%);
		width: calc(175 / 1000 * 100%);
		height: calc(450 / 1000 * 100%);
		z-index: 2;
	}

	.hulu_movie_photo::after {
		margin: 0 calc(20 / 1000 * 100%) calc(-60 / 1000 * 100%) 0;
		width: calc(240 / 1000 * 100%);
		height: calc(430 / 1000 * 100%);
	}

	.hulu_movie_photo a:hover {
		opacity: 1;
	}

	.hulu_catch {
		font-size: 2rem;
		/*		margin-bottom: calc(50 / 1000 * 100%);*/
	}

	.hulu_catch strong {
		font-size: 3.8rem;
	}

	.hulu_catch span {
		font-size: 3.4rem;
	}
}

/* ********************************************************************
        次回予告
******************************************************************** */
.nextstory {
	padding-top: calc(100 / 750 * 100%);
}

.nextstory h2 {
	width: calc(210 / 630 * 100%);
	margin: 0 auto calc(20 / 630 * 100%);
	padding-top: calc(80 / 630 * 100%);
}

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

.nextstory .nextstory_movie_photo {
	position: relative;
	background: url(../images/common/bg_story_movie.jpg) no-repeat center;
	background-size: contain;
	padding: calc(60 / 630 * 100%);
	width: calc(750 / 630 * 100%);
	margin-left: calc(-55 / 630 * 100%);
}

.nextstory .nextstory_movie_photo::before {
	content: '';
	position: absolute;
	background: url(../images/common/img_story_movie1.png) no-repeat center;
	background-size: 100%;
	top: 0;
	left: 0;
	margin: calc(-30 / 630 * 100%) 0 0 calc(-30 / 630 * 100%);
	width: calc(150 / 630 * 100%);
	height: calc(380 / 630 * 100%);
	z-index: 3;
}

.nextstory .nextstory_movie_photo::after {
	content: '';
	position: absolute;
	background: url(../images/common/img_story_movie2.png) no-repeat center;
	background-size: 100%;
	bottom: 0;
	right: 0;
	margin: 0 calc(-50 / 630 * 100%) calc(-120 / 630 * 100%) 0;
	width: calc(220 / 630 * 100%);
	height: calc(380 / 630 * 100%);
	z-index: 3;
}

.nextstory dl {
	margin: calc(40 / 630 * 100%) 0;
	text-align: center;
	font-size: 1.8rem;
}

.nextstory dt {
	font-weight: 600;
}

.nextstory dd {
	margin-top: calc(10 / 630 * 100%);
	line-height: 1.5;
}

.nextstory dd p {
	font-weight: 600;
}

.nextstory dd span {
	color: #beb09f;
	font-size: 1.2rem;
}


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

	.nextstory h2 {
		width: calc(160 / 1000 * 100%);
		margin: 0 auto calc(20 / 1000 * 100%);
		padding-top: calc(80 / 1000 * 100%);
	}

	.nextstory .nextstory_wrap {
		margin-bottom: calc(50 / 1000 * 100%);
	}

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

	.nextstory .nextstory_movie_photo::before {
		margin: calc(-10 / 1000 * 100%) 0 0 calc(-10 / 1000 * 100%);
		width: calc(175 / 1000 * 100%);
		height: calc(450 / 1000 * 100%);
		z-index: 2;
	}

	.nextstory .nextstory_movie_photo::after {
		margin: 0 calc(20 / 1000 * 100%) calc(-60 / 1000 * 100%) 0;
		width: calc(240 / 1000 * 100%);
		height: calc(430 / 1000 * 100%);
	}

	.nextstory .nextstory_movie_photo a:hover {
		opacity: 1;
	}

	.nextstory dl {
		margin: calc(40 / 1000 * 100%) 0;
		font-size: 2.4rem;
	}

	.nextstory dt {}

	.nextstory dd {
		margin-top: calc(10 / 1000 * 100%);
	}

	.nextstory dd span {
		font-size: 1.5rem;
	}

	.nextstory .nextstory_txt {
		width: 100%;
		max-width: 800px;
		margin: 0 auto;
	}

}


/* ********************************************************************
        登場する合コン相手
******************************************************************** */

.nextcast {
	overflow-y: hidden;
	padding-bottom: calc(100 / 630 * 100%);
}

.nextcast .nextcast_wrap {
	position: relative;
	background-color: #f4f0ef;
	z-index: 2;
}

.nextcast .nextcast_wrap::before {
	content: '';
	position: absolute;
	background: url(../images/common/bg_news2.jpg) no-repeat center;
	background-size: contain;
	width: calc(320 / 750 * 100%);
	padding-top: calc(350 / 750 * 100%);
	-webkit-transform: scale(-1, -1);
	transform: scale(-1, -1);
	top: 0;
	left: 0;
	right: calc(-100 / 750 * 100%);
	margin: calc(-130 / 750 * 100%) auto 0;
	z-index: 0;
}

.nextcast .bg_nextcast {
	padding-top: calc(90 / 630 * 100%);
}

.nextcast h3 {
	font-size: 1.6rem;
	font-weight: 600;
	margin-bottom: calc(60 / 630 * 100%);
}

.nextcast h3 span {
	font-weight: 600;
}

.nextcast .nextcast_box {
	position: relative;
	z-index: 2;
	padding-bottom: calc(10 / 750 * 100%);
}

.nextcast .nextcast_box::before {
	content: '';
	position: absolute;
	background: url(../images/common/bg_stripe_blue.jpg) repeat center;
	width: 100%;
	height: calc(350 / 750 * 100%);
	z-index: 0;
	bottom: 0;
	left: 0;
}

.nextcast .img {
	position: relative;
	z-index: 2;
	width: calc(400 / 630 * 100%);
	margin: 0 auto;
}

.nextcast .nextcast_box:nth-child(odd) .img::before {
	content: '';
	position: absolute;
	background: url(../images/top/bg_cast_spoon.png) no-repeat center;
	background-size: contain;
	width: calc(130 / 400 * 100%);
	height: calc(250 / 400 * 100%);
	bottom: 0;
	right: 0;
	margin: 0 calc(-130 / 630 * 100%) calc(-30 / 630 * 100%) 0;

}

.nextcast .nextcast_box:nth-child(even) .img::before {
	content: '';
	position: absolute;
	background: url(../images/top/bg_cast_fork.png) no-repeat center;
	background-size: contain;
	width: calc(130 / 400 * 100%);
	height: calc(230 / 400 * 100%);
	bottom: 0;
	right: 0;
	margin: 0 calc(-130 / 630 * 100%) calc(-30 / 630 * 100%) 0;
}

.nextcast .next_name {
	color: #fff;
	width: calc(250 / 500 * 100%);
	position: relative;
	z-index: 1;
	width: calc(500 / 630 * 100%);
	margin: calc(-25 / 630 * 100%) auto calc(30 / 630 * 100%);
	padding: calc(50 / 630 * 100%) calc(20 / 630 * 100%) calc(35 / 630 * 100%);
	background:
		linear-gradient(135deg, transparent 10px, #4ad5ce 10px),
		linear-gradient(315deg, transparent 10px, #4ad5ce 10px);
	background-position: bottom left, bottom right, top right, top left;
	background-size: 50.5% 100%;
	background-repeat: no-repeat;
	text-align: center;
}

.nextcast .next_name::before,
.nextcast .next_name::after {
	content: '';
	position: absolute;
	bottom: 10%;
	left: 2%;
	width: 10px;
	padding-top: calc(60 / 630 * 100%);
	background: url(../images/common/img_border.png) no-repeat center;
	background-size: contain;
}

.nextcast .next_name::after {
	bottom: auto;
	left: auto;
	top: 10%;
	right: 2%;
}

.nextcast .btn_green {
	margin: calc(80 / 630 * 100%) 0 0 calc(-20 / 630 * 100%);
}

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

.bnr_link li:not(:last-child) {
	margin-bottom: calc(20 / 630 * 100%);
}

@media screen and (min-width: 768px) {
	.nextcast {
		padding-bottom: 100px;
	}

	.nextcast .nextcast_wrap {
		max-width: 1000px;
		width: 100%;
		margin: 0 auto;
		position: relative;
		z-index: 1;
		background: linear-gradient(135deg, transparent 30px, #f4f0ef 30px), linear-gradient(225deg, transparent 30px, #f4f0ef 30px);
		background-position: top left, top right;
		background-size: 50% 100%;
		background-repeat: no-repeat;
	}

	.bg_nextcast {
		position: relative;
	}

	.bg_nextcast::before,
	.bg_nextcast::after {
		content: '';
		position: absolute;
		display: block;
		width: 0;
		height: 0;
		bottom: 0;
		right: 0;
		border-style: solid;
		border-width: 40px 40px 0 50px;
		border-color: transparent #fff transparent transparent;
		z-index: 2;
	}

	.bg_nextcast::after {
		left: 0;
		-webkit-transform: scale(-1, 1);
		transform: scale(-1, 1);
	}

	.nextcast .nextcast_wrap::after {
		position: absolute;
		content: '';
		background: url(../images/common/bg_stripe_blue.jpg) repeat center;
		bottom: 0;
		left: 0;
		width: 100%;
		height: 40%;
		z-index: 0;
	}

	.nextcast .nextcast_wrap::before {
		width: 180px;
		padding-top: 190px;
		right: calc(-50 / 1000 * 100%);
		margin: calc(-60 / 1000 * 100%) auto 0;
	}

	.nextcast .bg_nextcast {
		padding-top: calc(50 / 1000 * 100%);
	}

	.nextcast h3 {
		font-size: 2rem;
		margin-bottom: calc(40 / 1000 * 100%);
	}

	.nextcast .nextcast_flex {
		width: 100%;
		max-width: 800px;
		margin: 0 auto;
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-ms-flex-wrap: wrap;
		flex-wrap: wrap;
		-ms-flex-pack: distribute;
		justify-content: space-around;
	}

	.nextcast .nextcast_box {
		width: calc(250 / 800 * 100%);
		padding-bottom: 0;
		margin: 0 calc(50 / 800 * 100%) calc(50 / 800 * 100%);
	}

	.nextcast .nextcast_box::before {
		display: none;
	}

	.nextcast .img {
		width: calc(200 / 250 * 100%);
	}

	.nextcast .nextcast_box:nth-child(odd) .img::before {
		width: calc(60 / 200 * 100%);
		height: calc(100 / 200 * 100%);
		margin: 0 calc(-30 / 200 * 100%) 0 0;

	}

	.nextcast .nextcast_box:nth-child(even) .img::before {
		width: calc(70 / 200 * 100%);
		height: calc(100 / 200 * 100%);
		margin: 0 calc(-35 / 200 * 100%) 0 0;
	}

	.nextcast .next_name {
		width: 100%;
		margin: calc(-15 / 250 * 100%) auto 0;
		padding: calc(20 / 250 * 100%) 0 calc(10 / 250 * 100%);
		font-size: 1.4rem;
	}

	.nextcast .btn_green {
		margin: calc(40/ 1000 * 100%) auto calc(20 / 1000 * 100%);
	}

	.nextcast .btn_green .hover {
		padding: calc(30 / 350 * 100%) calc(76 / 350 * 100%) calc(45 / 350 * 100%);
		width: 100%;
		left: 1%;
	}

	.nextcast .bnr_mydo {
		position: relative;
		margin: 0 auto;
	}

	.bnr_hulu {
		width: calc(600 / 1000 * 100%);
		margin: 0 auto;
		-webkit-transition: .2s;
		transition: .2s;
	}

	.bnr_hulu:hover {
		opacity: .7;
		-webkit-transition: .2s;
		transition: .2s;
	}

	.bnr_link {
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-pack: justify;
		-ms-flex-pack: justify;
		justify-content: space-between;
		margin-top: calc(30 / 1000 * 100%);
	}

	.bnr_link li:not(:last-child) {
		margin-bottom: 0;
	}

	.bnr_link li {
		position: relative;
		width: calc(500 / 1000 * 100%);
	}

	.nextcast .bnr_mydo:hover .hover,
	.bnr_link li:hover .hover {
		opacity: 1;
	}

}


/* ********************************************************************
        チェインストーリー
******************************************************************** */

.chain {
	background: #c1f2f0;
}

.chain h2 {
	width: calc(410 / 630 * 100%);
	margin-bottom: 10px;
}

.chain .chain_box {
	position: relative;
	background: url(../images/common/bg_chain_img.jpg) no-repeat center;
	background-size: 110%;
	background-position: top, center;
}

.chain .img {
	position: relative;
	display: block;
	z-index: 2;
	padding-top: calc(80 / 630 * 100%);
}

.chain .img::before {
	content: '';
	position: absolute;
	background: url(../images/common/img_chinstory_movie1.png) no-repeat center;
	background-size: 100%;
	top: 0;
	left: 0;
	margin: calc(-30 / 630 * 100%) 0 0 calc(-170 / 630 * 100%);
	width: calc(350 / 630 * 100%);
	height: calc(400 / 630 * 100%);
	z-index: 3;
}

.chain .img::after {
	content: '';
	position: absolute;
	background: url(../images/common/img_chinstory_movie2.png) no-repeat center;
	background-size: 100%;
	bottom: 0;
	right: 0;
	margin: 0 calc(-120 / 630 * 100%) calc(-100 / 630 * 100%) 0;
	width: calc(300 / 630 * 100%);
	height: calc(330 / 630 * 100%);
	z-index: 3;
}

.chain .bebel_box {
	padding: calc(120 / 630 * 100%) calc(60 / 630 * 100%) calc(80 / 630 * 100%);
	z-index: 1;
	margin: calc(-60 / 630 * 100%) 0 0 calc(-60 / 630 * 100%);
}

.chain .bebel_box dt {
	font-size: 1.6rem;
	font-weight: 900;
	margin-bottom: calc(30 / 630 * 100%);
}

.chain .bebel_box .ttl {
	font-size: 1.6rem;
	font-weight: 600;
	margin-bottom: calc(15 / 630 * 100%);
}

.chain .bnr_chain {
	margin: calc(50 / 630 * 100%) 0 0 calc(-20 / 630 * 100%);
}

@media screen and (min-width: 768px) {
	.chain {
		padding-bottom: 100px;
	}

	.chain h2 {
		width: calc(310 / 1000 * 100%);
	}

	.chain .chain_box {
		max-width: 1000px;
		width: 100%;
		margin: 0 auto;
		background-size: 80%;
		background-position: center 100px, right;
	}

	.chain .img {
		width: calc(630 / 1000 * 100%);
		z-index: 1;
		padding-top: calc(70 / 1000 * 100%);
	}

	.chain .img::before {
		left: auto;
		right: 0;
		top: calc(100 / 630 * 100%);
		right: calc(-230 / 630 * 100%);
		width: calc(200 / 630 * 100%);
		height: calc(300 / 630 * 100%);
		z-index: 3;
	}

	.chain .img::after {
		top: calc(300 / 630 * 100%);
		right: calc(-180 / 630 * 100%);
		width: calc(150 / 630 * 100%);
		height: calc(200 / 630 * 100%);
		z-index: 3;
	}

	.chain .bebel_box {
		width: calc(560 / 1000 * 100%);
		padding: calc(60 / 1000 * 100%) calc(75 / 1000 * 100%);
		z-index: 2;
		margin: calc(-60 / 1000 * 100%) 0 0 auto;
	}

	.chain .bebel_box dt {
		width: 100%;
		font-size: 1.6rem;
		font-weight: 900;
		margin-bottom: calc(30 / 1000 * 100%);
	}

	.chain .bebel_box .ttl {
		font-size: 1.8rem;
		margin-bottom: calc(15 / 560 * 100%);
	}

	.chain .bnr_chain {
		position: relative;
		z-index: 3;
		width: calc(400 / 1000 * 100%);
		margin: calc(-80 / 1000 * 100%) 0 0 calc(90 / 1000 * 100%);
	}

	.chain .bnr_chain:hover .hover {
		opacity: 1;
	}

}

/* ********************************************************************
        新着情報
******************************************************************** */
.news {
	background-color: #f4f0ef;
	background-image: url(../images/common/bg_news1.jpg), url(../images/common/bg_news2.jpg), url(../images/common/bg_news3.jpg);
	background-repeat: no-repeat;
	background-position: top 10px right, top 83px left -50px, bottom right;
	background-size: calc(228 / 750 * 100%), calc(350 / 750 * 100%), calc(290 / 750 * 100%);
}

.news::after {
	content: '';
	position: absolute;
}

.news .inner {
	padding-bottom: 20vw;
}

.news h2 {
	width: calc(215 / 630 * 100%);
}

.news .news_wrap {
	background-color: #fff;
}

.news .news_box {
	position: relative;
}

.news .news_box:first-child dt {}

.news .news_box:first-child dd {
	letter-spacing: -.01rem;
}

.news .news_box:first-child dd p {
	font-size: 1.4rem;
	margin-bottom: calc(15 / 630 * 100%);
}

.news .news_box:first-child dd,
.news .news_box:not(:first-child) {
	margin: 0 calc(50 / 630 * 100%);
	padding: calc(50 / 630 * 100%) 0;
}

.news .news_box:not(:first-child) {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-pack: justify;
	-ms-flex-pack: justify;
	justify-content: space-between;
	border-top: 3px dotted #a58e84;
}

.news .news_box:not(:first-child) dt {
	width: calc(195 / 530 * 100%);
}

.news .news_box:not(:first-child) dd {
	width: calc(310 / 530 * 100%);
	letter-spacing: -.01rem;
	margin-top: calc(-5 / 530 * 100%);
}

.news .news_box:not(:first-child) dd p {
	font-size: 1.2rem;
	margin-bottom: calc(10 / 530 * 100%);
}

.news .news_box dd span {
	font-size: 1rem;
}

.news .news_box a {
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
}

@media screen and (min-width: 768px) {
	.news {
		background-image: none;
	}

	.news::after {
		content: '';
		position: absolute;
	}

	.news .inner {
		position: relative;
		padding-bottom: 130px;
	}

	.news .inner::before {
		content: '';
		position: absolute;
		width: 350px;
		height: 360px;
		background-size: contain;
		background-image: url(../images/common/bg_news2.jpg);
		background-repeat: no-repeat;
		z-index: 1;
		top: 50px;
		left: calc(-70 / 1000 * 100%);
	}

	.news .inner::after {
		content: '';
		position: absolute;
		width: 300px;
		height: 280px;
		bottom: 50px;
		right: calc(-70 / 1000 * 100%);
		background-size: contain;
		background-image: url(../images/common/bg_news3.jpg);
		background-repeat: no-repeat;
		z-index: 1;
	}

	.news h2 {
		width: calc(175 / 1000 * 100%);
	}

	.news .news_wrap {
		background-color: transparent;
		position: relative;
		z-index: 2;
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-ms-flex-wrap: wrap;
		flex-wrap: wrap;
	}

	.news .news_box {
		width: calc(315 / 1000 * 100%);
		background-color: #fff;
		display: block !important;
		border: 0 !important;
		padding: 0;
		margin: 0 0 calc(20 / 1000 * 100%) !important;
		-webkit-box-shadow: 0 .5rem 1rem rgba(150, 150, 150, 0.3);
		box-shadow: 0 .5rem 1rem rgba(150, 150, 150, 0.3);
		-webkit-transition: .3s;
		transition: .3s;
	}

	.news .news_box:hover {
		-webkit-box-shadow: none;
		box-shadow: none;
		-webkit-transition: .3s;
		transition: .3s;
		-webkit-transform: translate3d(0, 3px, 0);
		transform: translate3d(0, 3px, 0);
	}

	.news .news_box dd p {
		font-size: 1.4rem !important;
		margin-bottom: calc(15 / 315 * 100%);
	}

	.news .news_box dd {
		margin: 0 !important;
		padding: calc(20 / 315 * 100%) calc(15 / 315 * 100%) calc(30 / 315 * 100%) !important;
	}

	.news .news_box:not(:first-child) {
		padding: 0;
	}

	.news .news_box:not(:nth-child(3n)) {
		margin-right: calc(20 / 1000 * 100%) !important;
	}

	.news .news_box:not(:first-child) dt {
		width: 100%;
	}

	.news .news_box:not(:first-child) dd {
		width: 100%;
		margin-top: calc(10 / 315 * 100%);
	}

	.news .news_box:not(:first-child) dd p {
		font-size: 1.2rem;
		margin-bottom: calc(10 / 315 * 100%);
	}

	.news .news_box dd span {
		font-size: 1rem;
	}

	.news .btn_green .hover {
		padding: calc(30 / 350 * 100%) calc(76 / 350 * 100%) calc(45 / 350 * 100%);
		width: 100%;
		top: 2.5%;
		right: 1%;
	}

}

/* ********************************************************************
        公式SNS
******************************************************************** */
.sns {
	background: #c1f2f0;
}

.sns .inner {
	position: relative;
}

.sns .inner::before {
	content: '';
	position: absolute;
	background-image: url(../images/common/bg_sns1_sp.jpg);
	background-repeat: no-repeat;
	background-size: contain;
	width: calc(500 / 630 * 100%);
	padding-top: calc(500 / 630 * 100%);
	top: calc(60 / 630 * 100%);
	left: calc(-55 / 630 * 100%);
	z-index: 1;
}

.sns .inner::after {
	content: '';
	position: absolute;
	background-image: url(../images/common/bg_sns2_sp.jpg);
	background-repeat: no-repeat;
	background-size: contain;
	width: calc(500 / 630 * 100%);
	padding-top: calc(500 / 630 * 100%);
	bottom: calc(10 / 630 * 100%);
	right: calc(-55 / 630 * 100%);
	z-index: 1;
}

.sns h2 {
	position: relative;
	z-index: 1;
	width: calc(222 / 630 * 100%);
}

.sns .sns_wrap {
	position: relative;
	z-index: 3;
	padding-bottom: calc(150 / 630 * 100%);
}

.twitter_box {
	position: relative;
	padding-top: calc(600 / 630 * 100%);
}

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

.sns .sns_list {
	margin-top: calc(70 / 630 * 100%);
	padding: calc(80 / 630 * 100%) calc(60 / 630 * 100%) calc(50 / 630 * 100%);
}

.sns .sns_list li:not(:last-child) {
	margin-bottom: calc(10 / 630 * 100%);
}

.sns .sns_list li:nth-child(odd)::before {
	background: url(../images/common/img_border.png) repeat-y center;
	background-size: 100%;
	border: 0;
	width: 1%;
}

.sns .sns_list li::before,
.sns .sns_list li::after {
	bottom: 15%;
}

.sns .sns_list a {
	padding: calc(33 / 630 * 100%) 0 calc(55 / 630 * 100%);
}

.sns .sns_list li img {
	width: calc(430 / 630 * 100%);
}

.sns .btn_green::after {
	right: calc(50 / 630 * 100%);
}

@media screen and (min-width: 768px) {
	.sns .inner {
		position: relative;
	}

	.sns .inner::before {
		background-image: url(../images/common/bg_sns1_pc.jpg);
		background-repeat: no-repeat;
		background-size: contain;
		width: 440px;
		top: calc(180 / 1000 * 100%);
		padding-top: calc(500 / 1000 * 100%);
		left: calc(-145 / 1000 * 100%);
		z-index: 1;
	}

	.sns .inner::after {
		background-image: url(../images/common/bg_sns2_pc.jpg);
		background-repeat: no-repeat;
		background-size: contain;
		width: 470px;
		padding-top: calc(500 / 1000 * 100%);
		bottom: 30px;
		right: calc(-145 / 1000 * 100%);
		z-index: 1;
	}

	.sns h2 {
		width: calc(180 / 1000 * 100%);
	}

	.sns .sns_wrap {
		position: relative;
		z-index: 2;
		padding-bottom: calc(150 / 1000 * 100%);
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-align: center;
		-ms-flex-align: center;
		align-items: center;
		-webkit-box-pack: justify;
		-ms-flex-pack: justify;
		justify-content: space-between;
	}

	.sns .twitter,
	.sns .sns_list {
		width: calc(475 / 1000 * 100%);
		margin-left: 0;
	}

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

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

	.sns .sns_list {
		padding: calc(50 / 1000 * 100%) calc(50 / 1000 * 100%) calc(40 / 1000 * 100%);
		margin-top: 0;
	}

	.sns .sns_list li {
		position: relative;
		width: 100%;
	}

	.sns .sns_list li:nth-child(odd):hover::before {
		background: url(../images/common/img_border_h.png) repeat-y center;
		background-size: 100%;
	}

	.sns .sns_list li .hover {
		display: -webkit-inline-box;
		display: -ms-inline-flexbox;
		display: inline-flex;
		-webkit-box-align: center;
		-ms-flex-align: center;
		align-items: center;
		bottom: calc(58 / 475 * 100%);
		right: 0;
		margin: auto;
	}

	.sns .sns_list li:hover .hover {
		opacity: 1;
	}

	.sns .sns_list li:not(:last-child) {
		margin-bottom: calc(10 / 1000 * 100%);
	}

	.sns .sns_list a {
		padding: calc(28 / 475 * 100%) 0 calc(45 / 475 * 100%);
	}

	.sns .sns_list li img {
		width: calc(300 / 475 * 100%);
	}

	.sns .btn_green::after {
		right: calc(20 / 475 * 100%);
	}

	.sns .btn_green::before {
		height: 55%;
		bottom: 10%;
	}

	.sns .btn_green::after {
		bottom: 17%;
	}
}


/* ********************************************************************
        公式SNS
******************************************************************** */
.platinight {
	background-color: #f2efeb;
}

.platinight .top_ttl {
	width: calc(550 / 630 * 100%);
}

.platinight p {
	text-align: center;
	font-size: 1.2rem;
}

.platinight p:nth-of-type(2) {
	position: relative;
	padding-top: calc(50 / 630 * 100%);
}

.platinight p:nth-of-type(2)::before {
	content: '…';
	position: absolute;
	color: #717171;
	width: calc(50 / 630 * 100%);
	height: calc(100 / 630 * 100%);
	top: 0;
	right: 0;
	left: 0;
	margin: auto;
	font-size: 1.6rem;
}

.platinight .fusion {
	width: calc(750 / 630 * 100%);
	margin: calc(20 / 630 * 100%) 0 calc(20 / 630 * 100%) calc(-60 / 630 * 100%);
}

.platinight p:nth-of-type(3) {
	padding-bottom: calc(150 / 630 * 100%);
}

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

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

	.platinight p {
		font-size: 1.6rem;
	}

	.platinight p:nth-of-type(2) {
		padding-top: calc(30 / 1000 * 100%);
	}

	.platinight p:nth-of-type(2)::before {
		width: calc(50 / 1000 * 100%);
		height: calc(100 / 1000 * 100%);
		font-size: 2rem;
	}

	.platinight .fusion {
		margin: calc(20 / 1000 * 100%) auto;
		width: calc(700 / 1000 * 100%);
	}

	.platinight p:nth-of-type(3) {
		padding-bottom: calc(100 / 1000 * 100%);
	}

}