@charset "UTF-8";
@import url(//fonts.googleapis.com/css?family=Roboto+Slab:400,100,300,700);
/*-------------------------------
共通設定
--------------------------------*/

.naviBox {
	margin-bottom: 52px;
	font-family: "Amatic SC", cursive;
	font-size: 22px;
}
#jfm000016 .container {
	width: 100%;
	margin: 0 auto;
	background: #ebebeb;
}
#jfm000016 .container a {
	-webkit-user-select: none;
	  -moz-user-select: none;
		-ms-user-select: none;
			user-select: none;

		-o-user-select: none;
}
.sp#jfm000016 .container {
	width: 100%;
	margin: 0 auto;
}
#jfm000016 .container a:hover {
	opacity: .6;
	text-decoration: none;
	cursor: pointer;
	-webkit-transition: all .2s ease-in-out;
	  -moz-transition: all .2s ease-in-out;
		-o-transition: all .2s ease-in-out;
			transition: all .2s ease-in-out;
}

#globalNavi.naviFixed{
	display:none;
}
[class$="Waku"] {
	width: 970px;
	margin: 0 auto 40px;
}
.sp [class$="Waku"] {
	width: 100%;
	margin: 0 0 3%;
}

.pc .trailermovie {
    width: 550px;
    margin: 0 auto;
}
/*--section #hederG-------------------------------*/
section#hederG h1 {
	margin-bottom: 120px;
	padding-left: 548px;
	text-align: center;
}

.naviBox ul {
	width: 970px;
	letter-spacing: -.4em;
}

.naviBox ul li {
	display: inline-block;
	text-align: center;
}.naviBox ul li a {
	display: block;
	overflow: hidden;
	height: 48px;
	background: url(/static/cpn/jfm000016/img/gnav_intro.jpg) no-repeat;
	text-indent: 100%;
	white-space: nowrap;
}
.naviBox ul li.gnav1 a {
	width: 323px;
	background: url(/static/cpn/jfm000016/img/gnav_trailer.jpg) no-repeat;
}
.naviBox ul li.gnav2 a {
	width: 326px;
	background: url(/static/cpn/jfm000016/img/gnav_intro.jpg) no-repeat;
}
.naviBox ul li.gnav3 a {
	width: 321px;
	background: url(/static/cpn/jfm000016/img/gnav_works.jpg) no-repeat;
}
section#hederG {
	margin-bottom: 50px;
	background: #ebebeb url(/static/cpn/jfm000016/img/headerMain.jpg) no-repeat center 0;
	text-align: center;
}


section.trailerWaku h1,
section.introWaku h1,
section.relatedWaku h1 {
	margin-bottom: 40px;
	padding-bottom: 14px;
	background: url(/static/cpn/jfm000016/img/allow_bt.jpg) no-repeat bottom;
	font-family: "Amatic SC", cursive;
	font-size: 44px;
	text-align: center;
	letter-spacing: 1px;
}
section.introWaku h1 img,
section.trailerWaku h1 img,
section.introWaku h1 img,
section.relatedWaku h1 img {
    padding-bottom: 5px;
}
.cpnTtl h2,
.cpnTtl h3 {
	font-size: 21px;
	text-align: center;
}
.cpnTtl {
	margin-bottom: 35px;
}
span.red {
	color: red;
}
section.trailerWaku h2 {
	margin-bottom: 20px;
	text-align: center;
}
h2.btn_cpn a {
	display: block;
	margin-bottom: 40px;
}
/*---section.trailerWaku---------------------------------------------*/
.trailermovie.video.h360 {
	width: 550px;
	margin: 0 auto 10%;
}
section.introWaku h1 {
	font-family: "Amatic SC", cursive;
	font-size: 44px;
	text-align: center;
}

.introDetail,
.storyDetail {
	margin-bottom: 45px;
	font-size: 16px;
	line-height: 1.5;
	letter-spacing: -.4em;
}

.introDetail p,
.storyDetail p,
.storyDetail div {
	display: inline-block;
	letter-spacing: 0;
}
p.cap,
p.storyImg {
	width: 520px;
	vertical-align: top;
}
p.cap,
p.storyImg span {
	color: #6f6f6f;
	font-size: 10px;
}
p.introTxt_1 {
	width: 385px;
	padding: 0 32px;
}

.storyTxt {
	width: 385px;
	padding: 0 32px 0 0;
}
.storyTxt h2 {
	font-size: 16px;
}
.storyTxt h3 {
	margin: 1em 0;
	font-weight: normal;
}
.story {
	margin-bottom: 60px;
}
/*---section.relatedWaku---------------------------------------------*/
.cpnTtl h2.workList {
    letter-spacing: 1px;
    font-size: 30px;
    font-family:"Roboto Slab" , Garamond , "Times New Roman" , "游明朝" , "Yu Mincho" , "游明朝体" , "YuMincho" , "ヒラギノ明朝 Pro W3" , "Hiragino Mincho Pro" , "HiraMinProN-W3" , "HGS明朝E" , "ＭＳ Ｐ明朝" , "MS PMincho" , serif;
    color: #666;
    margin-top: -22px;
}
.targetWork {
	margin-bottom: 20px;
	letter-spacing: -.4em;
}
.targetWork ul li {
	display: inline-block;
	width: 20%;
	margin-bottom: 20px;
	vertical-align: top;
	letter-spacing: 0;
}
.targetWork ul img {
	width: 90%;
}
p.copyR {
	margin-bottom: 40px;
	color: #afafaf;
	font-size: 10px;
}
div.coupon {
	width: 970px;
	background: #fff;
	text-align: center;
}

div.coupon a {
	display: inline-block;
	margin: 34px auto 10px;
}

.couponBox h4 {
	padding-bottom: 25px;
	font-size: 14px;
	text-align: center;
}
/*--------------------------------------------------------------
	SP
---------------------------------------------------------------*/
.sp#jfm000016 .container {
	width: 100%;
	border-bottom: 5px solid #595151;
}

section#cpn table {
	background: #fff;
}
/*============================================================
player fit
============================================================*/
.fitWindows header {
	display: none;
}
.fitWindows #globalNavi {
	display: none;
}
.fitWindows #headerUtility {
	display: none;
}
.fitWindows footer {
	display: none;
}
.fitWindows article.contents section {
	display: none;
	margin: 0;
}
.fitWindows article.contents section div#movieInfo .trailTTL {
	display: none;
	margin: 0;
}
.fitWindows article.contents section.trailer {
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: auto;
}
.fitWindows article.contents section.trailer h2,
.fitWindows div.container section.trailer div.txt,
.fitWindows div.container section.trailer div.notice {
	display: none !important;
}
.fitWindows article.contents section.trailer {
	margin: 0;
	padding: 0;
	background: none;
}
.fitWindows article.contents section.trailer div.trailermovie,
.fitWindows article.contents section.trailer li.player {
	display: block;
}
.fitWindows article.contents section.trailer div.trailermovie,
.fitWindows article.contents section.trailer li.player,
.fitWindows article.contents section.trailer div#silverlightControlHost {
	display: block;
	overflow: hidden;
	width: 100%;
	height: auto;
}
.fitWindows .container div#movieInfo {
	display: block;
}


@media screen and (max-width:641px) {
		/*--section #hederG-------------------------------*/
		#jfm000016 img {
		  width: 100%;
		}
		section#hederG h1 {
		  margin-bottom: 12%;
		  padding-left: 54%;
		  text-align: center;
		}
		.naviBox ul {
		  width: 100%;
		  -webkit-box-shadow: 0 2px 7px rgba(85,49,2,.15);
			 -moz-box-shadow: 0 2px 7px rgba(85,49,2,.15);
				  box-shadow: 0 2px 7px rgba(85,49,2,.15);
		  letter-spacing: -.4em;
		}
		.naviBox {
		  margin-bottom: 5%;
		  font-family: "Amatic SC", cursive;
		  font-size: 100%;
		}
		.naviBox ul li {
		  display: inline-block;
		  width: 33%;
		  border-right: 1px solid #d5c7b6;
		  text-align: center;
		  letter-spacing: 0;
		}
		.naviBox ul li:last-child {
		  border-right: none;
		}

		.naviBox ul li a {
		  display: block;
		  overflow: visible;
		  height: auto;
		  background: none;
		  color: #795548;
		  text-indent: 0;
		  line-height: 44px;
		  white-space: normal;
		}
		.naviBox ul li.gnav1 a {
		  width: 100%;
		  height: auto;
		  background: none;
		  background-size: contain;
		  font-size: 100%;
		  letter-spacing: .1em;
		}
		.naviBox ul li.gnav2 a {
		  width: 100%;
		  background: none;
		}
		.naviBox ul li.gnav3 a {
		  width: 100%;
		  background: none;
		}
		section#hederG {
		  margin-bottom: 9%;
		  background: #ebebeb url(/static/cpn/jfm000016/img/headerMain.jpg) no-repeat center 0;
		  background-size: contain;
		  text-align: center;
		}
		section.trailerWaku h1,
		section.introWaku h1,
		section.relatedWaku h1 {
		  position: relative;
		  margin-bottom: 4%;
		  padding: 2% 42% 1% 2%;
		  background: none;
		  background-size: contain;
		  -webkit-box-shadow: 0 2px 7px rgba(85,49,2,.15);
			 -moz-box-shadow: 0 2px 7px rgba(85,49,2,.15);
				  box-shadow: 0 2px 7px rgba(85,49,2,.15);
		  font-family: "Amatic SC", cursive;
		  font-size: 170%;
		  text-align: left;
		  letter-spacing: 1px;
		}
		section.introWaku h1 img,
		section.trailerWaku h1 img,
		section.introWaku h1 img,
		section.relatedWaku h1 img {
		    padding-bottom: 0;
		}
		section.trailerWaku h1:after,
		section.introWaku h1:after,
		section.relatedWaku h1:after {
		  position: absolute;
		  bottom: -4px;
		  left: 48%;
		  width: 0;
		  height: 0;
		  border-width: 4px 7px 0 7px;
		  border-style: solid;
		  border-color: #ebebeb transparent transparent transparent;
		  content: "";
		}
		.sp#jfm000016 section.relatedWaku h1 img,
		.sp#jfm000016 section.trailerWaku h1 img,
		.sp#jfm000016 section.introWaku h1 img,
		.sp#jfm000016 section.relatedWaku h1 img {
		  width: auto;
		  height: 1em;
		}
		.cpnTtl h2,
		.cpnTtl h3 {
		  font-size: 150%;
		  text-align: center;
		}
		.cpnTtl h3 span.red {
		  display: block;
		}
		.cpnTtl {
		  margin-bottom: 3%;
		}
		span.red {
		  color: red;
		}
		section.trailerWaku h2 {
		  margin-bottom: 2%;
		  padding: 0 18%;
		  text-align: center;
		}
		h2.btn_cpn a {
		  display: block;
		  margin-bottom: 4%;
		}
		/*---section.trailerWaku---------------------------------------------*/
		.trailermovie.video.h360 {
		  width: 94%;
		  margin: 0 auto 10%;
		}
		section.introWaku h1 {
		  font-family: "Amatic SC", cursive;
		  font-size: 170%;
		  text-align: center;
		}
		.introDetail,
		.storyDetail {
		  width: 100%;
		  margin-bottom: 5%;
		  font-size: 100%;
		  text-align: center;
		  line-height: 1.5;
		  letter-spacing: -.4em;
		}
		.introDetail p,
		.storyDetail p,
		.storyDetail div {
		  display: inline-block;
		  text-align: left;
		  letter-spacing: 0;
		}
		p.cap,
		p.storyImg {
		  width: 98%;
		  margin: 0 auto;
		  vertical-align: top;
		}
		p.cap,
		p.storyImg span {
		  color: #6f6f6f;
		  font-size: 70%;
		  text-align: right;
		}
		p.introTxt_1 {
		  width: 98%;
		  padding: 0 3%;
		  text-align: left;
		}
		.storyTxt {
		  width: 98%;
		  padding: 0 3%;
		}
		.storyTxt h3 {
		  margin: 1em 0;
		  font-weight: normal;
		}
		.story {
		  margin-bottom: 7%;
		}
		/*---section.relatedWaku---------------------------------------------*/
		.cpnTtl h2.workList {
			letter-spacing: 1px;
			font-size: 120%;
			font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
			color: #666;
			margin-top: 0;
		}
		.targetWork {
		  margin-bottom: 4%;
		  letter-spacing: -.4em;
		}
		.targetWork ul li {
		  display: inline-block;
		  width: 25%;
		  margin-bottom: 3%;
		  vertical-align: top;
		  letter-spacing: 0;
		}
		#jfm000016 .targetWork ul li img {
		  width: 94%;
		  box-shadow: 0 2px 1px rgba(0, 0, 0, .5);
		}
		.targetWork ul img {
		  width: 90%;
		}
		p.copyR {
		  margin-bottom: 4%;
		  color: #9c9c9c;
		  font-size: 60%;
		}
		div.coupon {
		  width: 98%;
		  margin: 0 1% 8%;
		  padding: 1% 2% 3%;
		  border: 2px solid #bf0000;
		  background: #fff;
		  text-align: center;
		}

		div.coupon a {
		  display: inline-block;
		  margin: 3% auto 1%;
		}

		.couponBox h4 {
		  padding: 2% 0;
		  font-size: 100%;
		  text-align: center;
		  line-height: 1.8;
		}
		/*SP cpn INfo*/
		#jfm000016 .container *,
		#jfm000016 .container *:after,
		#jfm000016 .container *:before {
		  -webkit-box-sizing: border-box;
			 -moz-box-sizing: border-box;
				  box-sizing: border-box;
		}
		.cpnInfo th.title {
		  width: 100%;
		  font-size: 100%;
		}
		section#cpn {
		  background: #fff;
		}
}