/*------------------------------------------------------------------------------
								基本
------------------------------------------------------------------------------*/
.bg {
	position: fixed;
	top: 0px;
	left: 0px;
	width: 100%;
	height: 100%;
	background: #000000 url("../../img/look-back/bg-pc.jpg") no-repeat center center / cover;
	background-attachment: fixed;
}
.trailer-area {
	width:100%;
	margin:0 auto;
}
.trailer-area .prArea {  
	margin: 0 auto 0 auto;
	padding:0 0 0px 0;
	color: #000;
	font-size: 16px;
	line-height: 1.6em;
	width:100%;
}
.trailer-area .video-container {
	position: relative;
	padding-bottom: 56.25%;
	height: 0;
	overflow: hidden;
	margin:0;
	background:#000000;
}
.trailer-area .video-container iframe {
	position: absolute;
	top: 2px;
	left: 0;
	width: 100%;
	height: 100%;
}
.content {
	width: 1280px;
	margin: 0px auto 0;
	padding: 100px 40px 0;
	box-sizing: border-box;
	transform-origin: center top;
}
.content .box {
	width: 100%;
	box-sizing: border-box;
	padding: 20px 40px 40px;
	background: #131313;
	border-bottom: 1px solid #333333;
	border-right: 1px solid #333333;
	border-left: 1px solid #333333;
}
.content h3 {
	width: 100%;
	padding-top: 7.5%;
	text-indent: -99999px;
	line-height: 0px;
	height: 0px;
}
.content p {
	text-align: center;
	font-size: 24px;
	line-height: 1.8em;
	font-weight: 700;
}
.content h4 {
	font-weight: 900;
	font-size: 36px;
	line-height: 1.2em;
	text-align: center;
	background:linear-gradient(#e6cb5f,#ab751f);
	-webkit-background-clip:text;
	-webkit-text-fill-color: transparent;
}
.content h4 span {
	font-weight: 300;
}
.content h5 {
	font-size: 30px;
	line-height: 1.2em;
	background: url("../../img/look-back/btn-bg.jpg") no-repeat center center / cover;
	text-align: center;
	font-family: 'Noto Serif JP', serif;
	font-weight: 800;
	color: #131313;
	padding-bottom: 0.1em;
	margin: 0 auto;
	width: 17em;
	-webkit-border-radius: 0.8em;
	-moz-border-radius: 0.8em;
	border-radius: 0.8em;
}
/*------------------------------------------------------------------------------
								MAIN
------------------------------------------------------------------------------*/
#main-area {
	position: relative;
	width: 100%;
	padding:0;
	height: 100vh;
	margin: 0 auto;
	background: #000000;
	box-sizing: border-box;
	min-height: calc(43.33333333vw + 280px);
	max-height: calc(56.66666666vw + 280px);;
	z-index: 1;
	overflow: hidden;
	padding-bottom: 280px;
}
@media screen and (max-width: 1280px) {
#main-area {
	min-height: calc(554.6px + 280px);
	max-height: calc(725.3px + 280px);
}
}
#main-area .main-img {
	position: relative;
	width:100%;
	height:100%;
	overflow: hidden;
}
#main-area .main-img div {
	position: relative;
	width:100%;
	height:100%;
	background:url("../../img/look-back/main-pc.jpg") no-repeat center center / cover;
}
#main-area .title {
	position: absolute;
	bottom: 0px;
	left: 0px;
	width: 100%;
	height: 280px;
	background: url("../../img/look-back/tit-back.jpg") no-repeat center center/ cover;
}
#main-area .title h1 {
	width: 1280px;
	height: 100%;
	margin: 0 auto;
	background: url("../../img/look-back/tit-pc2.png") no-repeat center center;
	text-indent: -99999px;
}
/*------------------------------------------------------------------------------
								NAVI
------------------------------------------------------------------------------*/
.navi {
	width: 100%;
	background: url("../../img/look-back/navi-back.gif") repeat-x center top / contain;
}
.navi ul {
	width: 100%;
	position: relative;
	overflow: hidden;
	margin: 0 auto;
	max-width: 1600px;
	background: #131313;
}
.navi ul li {
	float: left;
	width:24.85%;
	margin-right: 0.2%;
	padding-top: 10%;
	text-indent: -99999px;
	position: relative;
	line-height: 0px;
}
.navi ul li:last-child {
	margin-right: 0px;
}
.navi ul li a {
	position: absolute;
	top: 0px;
	left: 0px;
	width: 100%;
	height: 100%;
	text-indent: -99999px;
}
.navi ul li.navi1 {
	background: url("../../img/look-back/navi1b.gif") no-repeat center top / cover;
}
.navi ul li.navi2 {
	background: url("../../img/look-back/navi2.gif") no-repeat center top / cover;
}
.navi ul li.navi3 {
	background: url("../../img/look-back/navi3.gif") no-repeat center top / cover;
}
.navi ul li.navi4{
	background: url("../../img/look-back/navi4.gif") no-repeat center top / cover;
}
/*------------------------------------------------------------------------------
								MAP
------------------------------------------------------------------------------*/
#map {
	width: 100%;
}
#map h3 {
	text-align: center;
	width: 1200px;
	margin: 0 auto;
	font-weight: 900;
	font-size: 36px;
	line-height: 2em;
	margin-bottom: 40px;
	border-top: 2px solid #e6cb5f;
	border-bottom: 2px solid #e6cb5f;
	background:linear-gradient(#ab751f,#e6cb5f);
	-webkit-background-clip:text;
	-webkit-text-fill-color: transparent;
}
#map .map-box {
	width: 100%;
	transform-origin: center top;
}
#map .map-box .map-img {
	width: 100%;
	padding-top: 56.25%;
	background: url("../../img/look-back/map3.jpg") no-repeat center center / cover;
}
/*------------------------------------------------------------------------------
								CHARA BTN
------------------------------------------------------------------------------*/
#chara-btn .btn {
	margin: 0 auto;
	width: 620px;
	text-align: center;
	background: url("../../img/common/arrow1.png") no-repeat left 1em center / 30px , url("../../img/look-back/btn-bg.jpg") repeat center center / 250px;
	color: #000000;
	line-height: 2.5em;
	font-size: 30px;
	font-weight: 700;
	-webkit-border-radius:10px;
	-moz-border-radius:10px;
	border-radius:10px;
	box-sizing: border-box;
	position: relative;
	border: 2px solid #000000;
	padding-left: 1em;
}
#chara-btn .btn a {
	position: absolute;
	top:0px;
	left:0px;
	width: 100%;
	height: 100%;
	text-indent: -99999px;
}
/*------------------------------------------------------------------------------
								CONTENT1
------------------------------------------------------------------------------*/
#content1 h3 {
	background: url("../../img/look-back/sub-tit1b-pc.gif") no-repeat center center / contain;
}
#content1 .img {
	width: 100%;
	padding-top: 52.666%;
	background: url("../../img/look-back/content1-img.jpg") no-repeat center center / cover;
	line-height: 0px;
	height: 0px;
}
#content1 .btn {
	margin: 0 auto;
	width: 500px;
	text-align: center;
	background: url("../../img/common/arrow1.png") no-repeat left 1em center / 30px , url("../../img/look-back/btn-bg.jpg") repeat center center / 250px;
	color: #000000;
	line-height: 2em;
	font-size: 30px;
	font-weight: 700;
	-webkit-border-radius:10px;
	-moz-border-radius:10px;
	border-radius:10px;
	box-sizing: border-box;
	position: relative;
	border: 2px solid #000000;
	padding-left: 1em;
}
#content1 .btn a {
	position: absolute;
	top:0px;
	left:0px;
	width: 100%;
	height: 100%;
	text-indent: -99999px;
}
/*------------------------------------------------------------------------------
								CONTENT2
------------------------------------------------------------------------------*/
#content2 h3 {
	background: url("../../img/look-back/sub-tit2-pc.gif") no-repeat center center / contain;
}
/*------------------------------------------------------------------------------
								CONTENT3
------------------------------------------------------------------------------*/
#content3 h3 {
	background: url("../../img/look-back/sub-tit3-pc.gif") no-repeat center center / contain;
}
#content3 ul {
	position: relative;
	overflow: hidden;
}
#content3 ul li.content3-1 {
	width: 49%;
	float: left;
	margin-right: 2%;
}
#content3 ul li.content3-2 {
	width: 49%;
	float: left;
}
#content3 ul li.content3-1 .img {
	width: 100%;
	padding-top: 69.64285714%;
	background: url("../../img/look-back/movie1-img2.jpg") no-repeat center center / cover;
}
#content3 ul li.content3-2 .img {
	width: 100%;
	padding-top: 69.64285714%;
	background: url("../../img/look-back/drama-img.jpg?ver2") no-repeat center center / cover;
}
#content3 .btn {
	margin: 0 auto;
	width: 400px;
	text-align: center;
	background: url("../../img/common/arrow1.png") no-repeat left 1em center / 30px , url("../../img/look-back/btn-bg.jpg") repeat center center / 250px;
	color: #000000;
	line-height: 2em;
	font-size: 30px;
	font-weight: 700;
	-webkit-border-radius:10px;
	-moz-border-radius:10px;
	border-radius:10px;
	box-sizing: border-box;
	position: relative;
	border: 2px solid #000000;
	padding-left: 1em;
}
#content3 .btn a {
	position: absolute;
	top:0px;
	left:0px;
	width: 100%;
	height: 100%;
	text-indent: -99999px;
}
/*------------------------------------------------------------------------------
								CONTENT4
------------------------------------------------------------------------------*/
#content4 h3 {
	background: url("../../img/look-back/sub-tit4-pc.gif") no-repeat center center / contain;
}
#content4 .float-box {
	position: relative;
	overflow: hidden;
}
#content4 .float-box .left-box {
	width: 49%;
	float: left;
}
#content4 .float-box .right-box {
	width: 49%;
	float: right;
}
#content4 .img1 {
	width: 100%;
	padding-top: 69.64285714%;
	background: url("../../img/look-back/movie1-img2.jpg") no-repeat center center / cover;
	margin: 0 auto;
}
#content4 .img2 {
	width: 100%;
	padding-top: 69.64285714%;
	background: url("../../img/look-back/drama-img-b.jpg") no-repeat center center / cover;
	margin: 0 auto;
}
#content4 ul {
	position: relative;
	text-align: center;
	line-height: 0px;
	font-size: 0px;
}
#content4 ul li {
	display: inline-block;
	position: relative;
	
	width: 24%;
	height: 45px;
	margin: 0 0.5% 1%;
	
	-webkit-border-radius:4px;
	-moz-border-radius:4px;
	border-radius:4px;
}
#content4 ul li.platform1 {background: #FFFFFF url("../../img/look-back/platform1.gif") no-repeat center center / contain;}
#content4 ul li.platform2 {background: #FFFFFF url("../../img/look-back/platform2.gif") no-repeat center center / contain;}
#content4 ul li.platform3 {background: #FFFFFF url("../../img/look-back/platform3.gif") no-repeat center center / contain;}
#content4 ul li.platform4 {background: #FFFFFF url("../../img/look-back/platform4.gif") no-repeat center center / contain;}
#content4 ul li.platform5 {background: #FFFFFF url("../../img/look-back/platform5.gif") no-repeat center center / contain;}
#content4 ul li.platform6 {background: #FFFFFF url("../../img/look-back/platform6.gif") no-repeat center center / contain;}
#content4 ul li.platform7 {background: #FFFFFF url("../../img/look-back/platform7.gif") no-repeat center center / contain;}
#content4 ul li.platform8 {background: #FFFFFF url("../../img/look-back/platform8.gif") no-repeat center center / contain;}
#content4 ul li.platform9 {background: #FFFFFF url("../../img/look-back/platform9.gif") no-repeat center center / contain;}
#content4 ul li.platform10 {background: #FFFFFF url("../../img/look-back/platform10.gif") no-repeat center center / contain;}
#content4 ul li.platform11 {background: #FFFFFF url("../../img/look-back/platform11.gif") no-repeat center center / contain;}
#content4 ul li a {
	position: absolute;
	top:0px;
	left:0px;
	width: 100%;
	height: 100%;
	text-indent: -99999px;
}
/*------------------------------------------------------------------------------
								BOTTOM
------------------------------------------------------------------------------*/
.bottom {
	width: 100%;
	min-width: 1280px;
}
.bottom h3 {
	text-align: center;
	font-size: 60px;
	line-height: 1em;
	font-family: 'Noto Serif JP', serif;
	background:linear-gradient(#ab751f,#e6cb5f);
	-webkit-background-clip:text;
	-webkit-text-fill-color: transparent;
}
.bottom h3 span {
	letter-spacing: -0.4em;
	margin: 0 -0.1em 0 -0.1em;
}
/*==============================================================================
								SP
==============================================================================*/
@media screen and (max-width: 1000px) {
/*------------------------------------------------------------------------------
								基本
------------------------------------------------------------------------------*/
.bg {
	background: #000000 url("../../img/look-back/bg-sp.jpg") no-repeat center center / cover;
}
#trailer-area {
	width:100%;
	margin:0px auto 0px;
}
#trailer-area .prArea {  
	width:100%;
}
.content {
	width: 100%;
	padding: 80px 4vw 0;
}
.content .box {
	padding: 2vw 3vw 4vw;
}
.content h3 {
	padding-top: 24%;
}
.content p {
	font-size: 3vw;
	line-height: 1.6em;
}
.content h4 {
	font-size: 5.5vw;
	margin: 0 -0.75em;
}
.content h5 {
	font-size: 4vw;
	line-height: 1.2em;
	width: 17em;
}
/*------------------------------------------------------------------------------
								MAIN
------------------------------------------------------------------------------*/
#main-area {
	height: 100vh;
	height: 100dvh;
	min-height: calc(113.2vw + 56vw);
	max-height: calc(113.2vw + 56vw);
	padding-bottom: 56vw;
}
#main-area .main-img div {
	background:url("../../img/look-back/main-sp.jpg") no-repeat center center / cover;
}
#main-area .title {
	height: 56vw;
}
#main-area .title h1 {
	width: 100%;
	height: 100%;
	margin: 0 auto;
	background: url("../../img/look-back/tit-sp2.png") no-repeat center center / contain;
	text-indent: -99999px;
}
/*------------------------------------------------------------------------------
								NAVI
------------------------------------------------------------------------------*/
.navi {
	background: none;
}
.navi ul li {
	width:49.7%;
	margin-right: 0.6%;
	margin-bottom: 0.6%;
	padding-top: 20%;
}
.navi ul li:last-child {
	margin-right: 0px;
}
.navi ul li:nth-child(2n) {
	margin-right: 0px;
}
.navi ul li:nth-child(3),.navi ul li:nth-child(4) {
	margin-bottom: 0%;
}
/*------------------------------------------------------------------------------
								MAP
------------------------------------------------------------------------------*/
#map {
	width: 100%;
	box-sizing: border-box;
	padding-bottom: 13%;
	position: relative;
}
#map h3 {
	font-size: 4.5vw;
	line-height: 1.4em;
	margin-bottom: 5vw;
	padding: 2vw 0;
	width: calc(100% - 60px);
}
#map .map-box {
	width: 100%;
	overflow-y: hidden;
	overflow-x: scroll;
}
#map .map-box .map-img {
	width: 266.66666667%;
	padding-top: 150%;
	background: url("../../img/look-back/map3.jpg") no-repeat center center / cover;
}
#map .scroll-icon {
	position: absolute;
	width: 100%;
	height: 0px;
	line-height: 0px;
	padding-top: 13%;
	bottom: 0px;
	left: 0px;
	background: url("../../img/look-back/scroll-icon.png") no-repeat center top 4vw / 20vw;
}
/*------------------------------------------------------------------------------
								CHARA BTN
------------------------------------------------------------------------------*/
#chara-btn .btn {
	width: 75vw;
	text-align: center;
	background: url("../../img/common/arrow1.png") no-repeat left 1em center / 4vw , url("../../img/look-back/btn-bg.jpg") repeat center center / cover;
	line-height: 3em;
	font-size: 4vw;
	-webkit-border-radius:2vw;
	-moz-border-radius:2vw;
	border-radius:2vw;
}
/*------------------------------------------------------------------------------
								CONTENT1
------------------------------------------------------------------------------*/
#content1 h3 {
	background: url("../../img/look-back/sub-tit1b-sp.gif") no-repeat center center / contain;
}
#content1 .btn {
	width: 75%;
	text-align: center;
	background: url("../../img/common/arrow1.png") no-repeat left 1em center / 4vw , url("../../img/look-back/btn-bg.jpg") repeat center center / cover;
	line-height: 2.5em;
	font-size: 4vw;
	-webkit-border-radius:2vw;
	-moz-border-radius:2vw;
	border-radius:2vw;
}
/*------------------------------------------------------------------------------
								CONTENT2
------------------------------------------------------------------------------*/
#content2 h3 {
	background: url("../../img/look-back/sub-tit2-sp.gif") no-repeat center center / contain;
}
/*------------------------------------------------------------------------------
								CONTENT3
------------------------------------------------------------------------------*/
#content3 h3 {
	background: url("../../img/look-back/sub-tit3-sp.gif") no-repeat center center / contain;
}
#content3 ul {
	position: relative;
	overflow: hidden;
}
#content3 ul li.content3-1 {
	width: 100%;
	float: none;
	margin-right: 0px;
}
#content3 ul li.content3-2 {
	width: 100%;
	float: none;
	margin-top: 5vw
}
#content3 .btn {
	width: 60%;
	background: url("../../img/common/arrow1.png") no-repeat left 1em center / 4vw , url("../../img/look-back/btn-bg.jpg") repeat center center / cover;
	line-height: 2.5em;
	font-size: 4vw;
	-webkit-border-radius:2vw;
	-moz-border-radius:2vw;
	border-radius:2vw;
}
/*------------------------------------------------------------------------------
								CONTENT4
------------------------------------------------------------------------------*/
#content4 h3 {
	background: url("../../img/look-back/sub-tit4-sp.gif") no-repeat center center / contain;
}
#content4 .float-box .left-box {
	width: 100%;
	float: none;
}
#content4 .float-box .right-box {
	width: 100%;
	float: none;
	margin-top: 5vw
}

#content4 .img1 {
	width: 100%;
	padding-top: 69.64285714%;
	background: url("../../img/look-back/movie1-img2.jpg") no-repeat center center / cover;
	margin: 0 auto;
}
#content4 .img2 {
	width: 100%;
	padding-top: 69.64285714%;
	background: url("../../img/look-back/drama-img-b.jpg?ver2") no-repeat center center / cover;
	margin: 0
}
#content4 ul li {
	display: inline-block;
	position: relative;
	width: 32.333%;
	height: 9vw;
	margin: 0 0.5% 1%;
	-webkit-border-radius:0.5vw;
	-moz-border-radius:0.5vw;
	border-radius:0.5vw;
}
/*------------------------------------------------------------------------------
								BOTTOM
------------------------------------------------------------------------------*/
.bottom {
	min-width: 740px;
}
.bottom h3 {
	line-height: 1.4em;
	font-size: 6.6vw;
}
.bottom h3 span {
	letter-spacing: -0.4em;
	margin: 0 -0.1em 0 -0.1em;
}

}