@charset "UTF-8";
/*=======================================
SMACSS  base
========================================*/

/*=======================================
SMACSS  layout　　　　　      ( style.scss ) ( header.scss / main.scss / footer.scss ...) 
========================================*/
/*=======================================
animation
========================================*/
.inview {
	opacity: 0;
	transition-duration: 1s;
}

.inview.active {
	opacity: 1;
}

/*=======================================
                  PC   
========================================*/
/* ===================
	General
=================== */
html {
	font-size: 62.5%;
}

* {
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
}

#mainLP_Contents {
	overflow: hidden;
	margin-top: 2rem;
}

#wrapper {
	width: 120rem;
	margin: 0 auto;
	-webkit-font-feature-settings: "palt";
	font-feature-settings: "palt";
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
}

/* ===================
				common
=================== */
img {
	max-width: 100%;
	height: auto;
}

.sp_only {
	display: none;
}

.pc_only {
	display: block;
}

.yugothic {
	font-family: "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic", "メイリオ", sans-serif;
	line-height: 2;
	letter-spacing: 0.01em;
	font-feature-settings: "palt";
	font-size: 1.4rem;
}

.Crimson_Text {
	font-family: 'Crimson Text', serif;
	letter-spacing: 0.015em;
	font-feature-settings: "palt";
}

.garamond {
	font-family: adobe-garamond-pro, serif;
	font-weight: 400;
	letter-spacing: 0.025em;
	line-height: 1.5;
	font-feature-settings: "palt";
}

.credit p {
	font-size: 1.2rem;
	border-bottom: 0.1rem solid #E5E5E5;
	margin-bottom: 1.1rem;
	text-align: left;
	display: inline-block;
}

/* ===================
			firstview
=================== */
#firstview {
	width: 108rem;
	text-align: center;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 8.3rem;
}

.fv-img {
	margin-bottom: 8.3rem;
}

#firstview h2 {
	font-size: 3.5rem;
	margin-bottom: 1.8rem;
}

/* ===================
				cont
=================== */
#cont1 {
	width: 90rem;
	border-top: 0.1rem solid #808080;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 12rem;
	position: relative;
}

#cont1 .blk {
	height: 73rem;
}

#cont1 h2 {
	font-size: 3rem;
	margin-bottom: 2.2rem;
}

.cont1-img {
	width: 18rem;
	position: absolute;
	left: 45rem;
	top: 37.8rem;
}

#cont1 .about {
	position: absolute;
	left: 45rem;
	top: 16.5rem;
}

.about p {
	text-align: left;
	letter-spacing: 0.02em;
}

#cont1 .movie {
	position: absolute;
	left: 5rem;
	top: 9rem;
}

.movie video {
	width: 36rem;
	height: 64rem;
}

#cont1 .credit {
	position: absolute;
	left: 66rem;
	top: 53.9rem;
}

#cont2 {
	margin-left: 19.6rem;
	margin-bottom: 12rem;
	position: relative;
}

#cont2 .blk {
	height: 64rem;
}

#cont2 h2 {
	font-size: 3rem;
	margin-bottom: 2.2rem;
}

.cont2-img {
	width: 18rem;
	position: absolute;
	left: 0;
	top: 33.8rem;
}

#cont2 .about {
	position: absolute;
	left: 0;
	top: 2.6rem;
}

#cont2 .movie {
	position: absolute;
	left: 44.8rem;
	top: 0;
}

#cont2 .credit {
	position: absolute;
	left: 21rem;
	top: 54.7rem;
}

#cont3 {
	margin-left: 16.8rem;
	position: relative;
}

#cont3 .blk {
	height: 64rem;
}

#cont3 h2 {
	font-size: 3rem;
	margin-bottom: 2.2rem;
}

.cont3-img {
	width: 18rem;
	position: absolute;
	left: 40rem;
	top: 28.8rem;
}

#cont3 .about {
	position: absolute;
	left: 40rem;
	top: 7.5rem;
}

#cont3 .movie {
	position: absolute;
	left: 0;
	top: 0;
}

#cont3 .credit {
	position: absolute;
	left: 61rem;
	top: 47.3rem;
}

/* ===================
				button
=================== */
.m-btn {
	width: 60rem;
	margin: 12rem auto 12rem;
}

.m-btn a {
	width: 60rem;
	height: 6.2rem;
	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;
	border: 0.1rem solid #000;
	background-color: #fff;
	font-family: "Crimson Text", serif;
	font-size: 1.5rem;
	line-height: 1.54;
	letter-spacing: 0.002em;
	text-align: center;
}

.m-btn:hover {
	opacity: .7;
}

/*=======================================
							Responsive
========================================*/
/* for SP */
@media only screen and (max-width: 767px) {


	/*=======================================
                    SP    
  ========================================*/

	/* ===================
				General
	=================== */
	.main-inner {
		overflow: hidden;
	}

	.main-area .main-inner {
		width: 100%;
	}

	#wrapper {
		width: calc(750* (100vw / 750));
		margin: 0 auto;
		-webkit-font-feature-settings: "palt";
		font-feature-settings: "palt";
		-webkit-box-sizing: border-box;
		box-sizing: border-box;
	}

	#breadcrumb .cateList {
		text-overflow: ellipsis;
		white-space: nowrap;
		overflow: hidden;
	}

	/* ===================
					common
  =================== */
	.sp_only {
		display: block;
	}

	.pc_only {
		display: none;
	}

	.yugothic {
		letter-spacing: 0.01em;
		font-size: calc(28* (100vw / 750));
	}

	.credit p {
		font-size: calc(24* (100vw / 750));
		border-bottom: 1px solid #E5E5E5;
		margin-bottom: calc(22* (100vw / 750));
		text-align: center;
	}

	/* ===================
				firstview
  =================== */
	#firstview {
		width: 100%;
		margin-bottom: calc(135* (100vw / 750));
	}

	.fv-img {
		margin-bottom: calc(140* (100vw / 750));
	}

	#firstview h2 {
		font-size: calc(60* (100vw / 750));
		margin-bottom: calc(34* (100vw / 750));
	}

	/* ===================
				cont
  =================== */
	#cont1 {
		width: calc(660* (100vw / 750));
		border-top: 1px solid #808080;
		margin-bottom: calc(180* (100vw / 750));
	}

	#cont1 .blk {
		height: auto;
	}

	#cont1 h2 {
		font-size: calc(50* (100vw / 750));
		margin-bottom: calc(20* (100vw / 750));
		text-align: center;
	}

	.cont1-img {
		width: calc(360* (100vw / 750));
		position: initial;
		margin-left: auto;
		margin-right: auto;
		margin-top: calc(149* (100vw / 750));
		margin-bottom: calc(60* (100vw / 750));
	}

	.cont1-img img {
		width: calc(360* (100vw / 750));
	}

	#cont1 .about {
		position: initial;
		margin-bottom: calc(57* (100vw / 750));
	}

	.about p {
		text-align: center;
		letter-spacing: 0.01em;
	}

	#cont1 .movie {
		width: calc(594* (100vw / 750));
		position: initial;
		margin-bottom: calc(61.5* (100vw / 750));
		margin-left: auto;
		margin-right: auto;
	}

	.movie video {
		width: calc(594* (100vw / 750));
		height: calc(1056* (100vw / 750));

	}

	#cont1 .credit {
		position: initial;
		text-align: center;
	}

	#cont2 {
		margin-left: 0;
		margin-bottom: calc(180* (100vw / 750));
	}

	#cont2 .blk {
		height: auto;
	}

	#cont2 h2 {
		font-size: calc(50* (100vw / 750));
		text-align: center;
		margin-bottom: calc(17.5* (100vw / 750));
	}

	.cont2-img {
		width: calc(360* (100vw / 750));
		position: initial;
		margin-left: auto;
		margin-right: auto;
		margin-bottom: calc(60* (100vw / 750));
	}

	.cont2-img img {
		width: calc(360* (100vw / 750));
	}

	#cont2 .about {
		position: initial;
		margin-bottom: calc(58* (100vw / 750));
	}

	#cont2 .movie {
		width: calc(594* (100vw / 750));
		position: initial;
		margin-bottom: calc(60* (100vw / 750));
		margin-left: auto;
		margin-right: auto;
	}

	#cont2 .credit {
		position: initial;
		text-align: center;
	}

	#cont3 {
		margin-left: 0;
		position: relative;
	}

	#cont3 .blk {
		height: auto;
	}

	#cont3 h2 {
		font-size: calc(50* (100vw / 750));
		margin-bottom: calc(20* (100vw / 750));
		text-align: center;
	}

	.cont3-img {
		width: calc(360* (100vw / 750));
		position: initial;
		margin-bottom: calc(63* (100vw / 750));
		margin-left: auto;
		margin-right: auto;
	}

	.cont3-img img {
		width: calc(360* (100vw / 750));
	}

	#cont3 .about {
		position: initial;
		margin-bottom: calc(57* (100vw / 750));
	}

	#cont3 .movie {
		position: initial;
		width: calc(594* (100vw / 750));
		margin-left: auto;
		margin-right: auto;
		margin-bottom: calc(60* (100vw / 750));
	}

	#cont3 .credit {
		position: initial;
		text-align: center;
	}

	/* ===================
					button
  =================== */
	.m-btn {
		width: calc(615 *(100vw / 750));
		margin: calc(130 *(100vw / 750)) auto calc(68 *(100vw / 750));
	}

	.m-btn a {
		width: calc(615 *(100vw / 750));
		height: calc(124 *(100vw / 750));
		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;
		border: 1px solid #000;
		background-color: #fff;
		font-family: "Crimson Text", serif;
		font-size: calc(28 *(100vw / 750));
		line-height: 1.54;
		letter-spacing: 0.002em;
		text-align: center;
	}
}

/* for Tablet */
@media screen and (min-width: 768px) and (max-width: 1200px) {

	/*=======================================
                    Tablet    
  ========================================*/
	/* ===================
	General
=================== */
	html {
		font-size: calc(10* (100vw / 1200)) !important;
	}

	* {
		-webkit-box-sizing: border-box;
		box-sizing: border-box;
	}

	#mainLP_Contents {
		background-repeat: no-repeat;
		background-size: calc(1200 *(100vw / 1200));
		overflow: hidden;
	}

	#wrapper {
		width: calc(1200 *(100vw / 1200));
		-webkit-font-feature-settings: "palt";
		font-feature-settings: "palt";
		-webkit-box-sizing: border-box;
		box-sizing: border-box;
	}

}


/*# sourceMappingURL=style.css.map */