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

.naviBox {
	font-family: "Amatic SC", cursive;
}
#jfm000017 .container {
	width: 100%;
	margin: 0 auto;
	background: #c7e6f0;
}
#jfm000017 .container a {
	-webkit-user-select: none;
	  -moz-user-select: none;
		-ms-user-select: none;
			user-select: none;

		-o-user-select: none;
}
.sp#jfm000017 .container {
	width: 100%;
	margin: 0 auto;
}
#jfm000017 .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 {
    background: #000;
    padding: 2%;
}

/*--section #hederG-------------------------------*/
section#hederG h1 {
	padding-left: 390px;
	text-align: center;
}
.pc section#hederG h2 {
	padding-left: 400px;
	text-align: center;
}

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

.pc .naviBox ul li {
	display: inline-block;
	text-align: center;
}
.pc .naviBox ul li a {
	display: block;
	overflow: hidden;
	height: 48px;
	background: url(/static/cpn/jfm000017/img/gnav_intro.jpg) no-repeat;
	text-indent: 100%;
	white-space: nowrap;
}
.pc .naviBox ul li.gnav1 a {
	width: 236px;
	height: 50px;
	background: url(/static/cpn/jfm000017/img/gnav_trailer.png) no-repeat;
}
.pc .naviBox ul li.gnav2 a {
	width: 260px;
	height: 50px;
	background: url(/static/cpn/jfm000017/img/gnav_intro.png) no-repeat;
}
.pc .naviBox ul li.gnav3 a {
	width: 236px;
	height: 50px;
	background: url(/static/cpn/jfm000017/img/gnav_story.png) no-repeat;
}
.pc .naviBox ul li.gnav4 a {
	width: 238px;
	height: 50px;
	background: url(/static/cpn/jfm000017/img/gnav_works.png) no-repeat;
}
section#hederG {
	margin-bottom: 50px;
	background: #C7E6F0 url(/static/cpn/jfm000017/img/headerMain.jpg) no-repeat center 0;
	text-align: center;
}


section.trailerWaku h1,
section.introWaku h1,
section.storyWaku h1,
section.relatedWaku h1 {
	padding-bottom: 14px;
	background: url(/static/cpn/jfm000017/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.storyWaku h1 img,
section.relatedWaku h1 img {
    padding-bottom: 5px;
}
.cpnTtl h2{
	font-size: 21px;
	text-align: center;
}
.cpnTtl h3 {
	font-size: 21px;
	text-align: center;
	font-weight: normal;
	margin-top: 5px;
}
.cpnTtl {
	margin-bottom: 35px;
}
span.red {
	color: red;
}
section.trailerWaku h2 {
	margin-bottom: 20px;
	text-align: center;
}
.pc 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,
ul li.cap,
p.storyImg {
	width: 487px;
	vertical-align: top;
}
p.cap,
p.storyImg span {
	color: #6f6f6f;
	font-size: 10px;
}
.pc p.cap img{
	width: 486px;
	padding-left: 20px;
}
p.introTxt_1,
p.storyTxt_1 {
	width: 410px;
	padding: 0 32px;
	color: #1447ad;
	font-weight: bold;
}
section#story.storyWaku div.storyBox div.storyDetail p.cap span,
section#introduction.introWaku div.introBox div.introDetail p.cap span {
	padding-left: 21px;
}

.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: 25%;
	margin-bottom: 20px;
	vertical-align: top;
	letter-spacing: 0;
}
.targetWork ul img {
	width: 90%;
}
p.copyR {
	margin-bottom: 40px;
	color: #000000;
	font-size: 10px;
}
p.copyL {
	margin-left: 22px;
	color: #000000;
	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#jfm000017 .container {
	width: 100%;
	border-bottom: 5px solid #595151;
}

section#cpn table {
	background: #fff;
}
.sp .naviBox ul {
	width: 100%;
	letter-spacing: -.4em;
}

.sp .naviBox ul li {
	display: inline-block;
	text-align: center;
	width: 49%;
}
.sp .naviBox ul li img {
	width: 49%;
	padding: 1% 1% 1% 1%;
}
.sp .naviBox ul li a {
	overflow: hidden;
	white-space: nowrap;
}
.sp .naviBox ul li.gnav1 a {
	
}
.sp .naviBox ul li.gnav2 a {
	
}
.sp .naviBox ul li.gnav3 a {
	
}
.sp .naviBox ul li.gnav4 a {
	
}
/*============================================================
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-------------------------------*/
		#jfm000017 img {
		  width: 100%;
		}
		section#hederG h1 {
		  margin-bottom: 12%;
		  padding-left: 38%;
		  text-align: center;
		}
		.sp section#hederG h2 {
		  width: 97%;
    	  margin: 0 auto;
		}
		
		section#hederG {
		  margin-bottom: 9%;
		 /* background: #ebebeb url(/static/cpn/jfm000017/img/headerMain.jpg) no-repeat center 0;*/
		  background-size: contain;
		  text-align: center;
		}
		section.trailerWaku h1,
		section.introWaku h1,
		section.storyWaku h1,
		section.relatedWaku h1 {
		  margin-bottom: 4%;
		  padding: 2% 42% 1% 2%;
		  background: none;
		  background-size: contain;
		  font-size: 170%;
		  text-align: left;
		  letter-spacing: 1px;
		}
		section.introWaku h1 img,
		section.trailerWaku h1 img,
		section.introWaku h1 img,
		section.storyWaku h1 img,
		section.relatedWaku h1 img {
		    padding-bottom: 0;
		}
		section.trailerWaku h1:after,
		section.introWaku h1:after,
		section.storyWaku 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#jfm000017 section.relatedWaku h1 img,
		.sp#jfm000017 section.trailerWaku h1 img,
		.sp#jfm000017 section.introWaku h1 img,
		.sp#jfm000017 section.storyWaku h1 img,
		.sp#jfm000017 section.relatedWaku h1 img {
		  width: 170%;
		  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,
		p.storyTxt_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;
		}
		#jfm000017 .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*/
		#jfm000017 .container *,
		#jfm000017 .container *:after,
		#jfm000017 .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;
		}
}