@charset "utf-8";

/* font */
@font-face {
  font-family: 'Noto Sans Japanese';
  font-style: normal;
  font-weight: 100;
  src: url(https://fonts.gstatic.com/ea/notosansjapanese/v3/NotoSansJP-Thin.woff2) format('woff2'),
       url(https://fonts.gstatic.com/ea/notosansjapanese/v3/NotoSansJP-Thin.woff) format('woff'),
       url(https://fonts.gstatic.com/ea/notosansjapanese/v3/NotoSansJP-Thin.otf) format('opentype');
}
@font-face {
  font-family: 'Noto Sans Japanese';
  font-style: normal;
  font-weight: 200;
  src: url(https://fonts.gstatic.com/ea/notosansjapanese/v3/NotoSansJP-Light.woff2) format('woff2'),
       url(https://fonts.gstatic.com/ea/notosansjapanese/v3/NotoSansJP-Light.woff) format('woff'),
       url(https://fonts.gstatic.com/ea/notosansjapanese/v3/NotoSansJP-Light.otf) format('opentype');
}
@font-face {
   font-family: 'Noto Sans Japanese';
   font-style: normal;
   font-weight: 300;
   src: url(https://fonts.gstatic.com/ea/notosansjapanese/v3/NotoSansJP-DemiLight.woff2) format('woff2'),
        url(https://fonts.gstatic.com/ea/notosansjapanese/v3/NotoSansJP-DemiLight.woff) format('woff'),
        url(https://fonts.gstatic.com/ea/notosansjapanese/v3/NotoSansJP-DemiLight.otf) format('opentype');
}
@font-face {
   font-family: 'Noto Sans Japanese';
   font-style: normal;
   font-weight: 400;
   src: url(https://fonts.gstatic.com/ea/notosansjapanese/v3/NotoSansJP-Regular.woff2) format('woff2'),
        url(https://fonts.gstatic.com/ea/notosansjapanese/v3/NotoSansJP-Regular.woff) format('woff'),
        url(https://fonts.gstatic.com/ea/notosansjapanese/v3/NotoSansJP-Regular.otf) format('opentype');
 }
@font-face {
   font-family: 'Noto Sans Japanese';
   font-style: normal;
   font-weight: 500;
   src: url(https://fonts.gstatic.com/ea/notosansjapanese/v3/NotoSansJP-Medium.woff2) format('woff2'),
        url(https://fonts.gstatic.com/ea/notosansjapanese/v3/NotoSansJP-Medium.woff) format('woff'),
        url(https://fonts.gstatic.com/ea/notosansjapanese/v3/NotoSansJP-Medium.otf) format('opentype');
 }
@font-face {
   font-family: 'Noto Sans Japanese';
   font-style: normal;
   font-weight: 700;
   src: url(https://fonts.gstatic.com/ea/notosansjapanese/v3/NotoSansJP-Bold.woff2) format('woff2'),
        url(https://fonts.gstatic.com/ea/notosansjapanese/v3/NotoSansJP-Bold.woff) format('woff'),
        url(https://fonts.gstatic.com/ea/notosansjapanese/v3/NotoSansJP-Bold.otf) format('opentype');
 }
@font-face {
   font-family: 'Noto Sans Japanese';
   font-style: normal;
   font-weight: 900;
   src: url(https://fonts.gstatic.com/ea/notosansjapanese/v3/NotoSansJP-Black.woff2) format('woff2'),
        url(https://fonts.gstatic.com/ea/notosansjapanese/v3/NotoSansJP-Black.woff) format('woff'),
        url(https://fonts.gstatic.com/ea/notosansjapanese/v3/NotoSansJP-Black.otf) format('opentype');
 }


/* loading */
#loading{
	position:fixed;
	width:100%;
	height:100%;
	background:#000;
	z-index:9999;
	color:#f0e600;
}
#loading .fa{
	position:absolute;
	top:50%;
	left:50%;
	margin-top:-25px;
	margin-left:-25px;
	font-size:50px;
}


/* base
=============================== */
html,body {
	width:100%;
	height:100%;
	font-family:Avenir , "Open Sans" , "Helvetica Neue" , Helvetica , Arial , Verdana , Roboto , "游ゴシック" , "Yu Gothic" , "游ゴシック体" , "YuGothic" , "ヒラギノ角ゴ Pro W3" , "Hiragino Kaku Gothic Pro" , "Meiryo UI" , "メイリオ" , Meiryo , "ＭＳ Ｐゴシック" , "MS PGothic" , sans-serif;
}
body {
	-webkit-font-smoothing:antialiased;
	font-size:14px;
	line-height:1.4em;
}
/* clearfix */
.clearfix:after {
  content: "."; 
  display: block; 
  height: 0; 
  font-size:0;	
  clear: both; 
  visibility:hidden;
}
	
.clearfix {display: inline-block;} 

/* Hides from IE Mac */
* html .clearfix {height: 1%;}
.clearfix {display:block;}
/* End Hack */ 
.clear { clear: both; }

a{color:#000;text-decoration:none;}
a:hover{color:#999;text-decoration:underline;}


.center{text-align:center;}
.right{text-align:right;}
.txt{margin-bottom:10px;}
.subTxt{font-size:0.8em;}

.bold{font-weight:bold;}
.red{color:#ff0000;}

.mb5{margin-bottom:5px;}
.mb10{margin-bottom:10px;}
.mb20{margin-bottom:20px;}
.mb30{margin-bottom:30px;}
.mb40{margin-bottom:40px;}

/* 枠
------------------------------------ */
#wrap{
	background:#eee url(../images/bg.png);
	background-size:100%;
	overflow:hidden;
}


/* header
------------------------------------ */
#header {
    background: #000 none repeat scroll 0 0;
    color: #fff;
    height: 16px;
    position: relative;
    z-index: 1;
}
#header h1 {
    font-size: 10px;
    font-weight: bold;
    line-height: 16px;
    padding: 0 0 0 1em;
    text-align: left;
}
#header a {
    color: #fff;
    display: block;
    font-size: 10px;
    line-height: 16px;
    position: absolute;
    right: 1em;
    top: 0;
}
#header a:hover {
    color: #aaa;
    text-decoration: none;
}


.social {
    position: absolute;
    right: 10px;
    top: 30px;
    z-index: 10;
}
.social .fb-like,
.social .twitter {
	width: 110px;
	float: right;
}


/* footer
------------------------------------ */
#footer {
	text-align: center;
	padding: 20px 0;
	clear:both;
	background:#333;
	color:#999;
	position: relative;
	z-index: 1;
	_width:100%;
	/* IE5 later && javascript-on */
	position: expression('absolute');
	bottom: expression(documentElement.scrollTop + 0 + 'px');
	left: expression(documentElement.scrollTop + 0 + 'px');

}
#footer #supportNav { margin: 0 0 10px; }
#footer #supportNav li { display: inline; font-size:11px;}
#footer address { font-size: 10px; }
#footer .jasrac { font-size: 10px; }

#footer{
}

#supportNav a{
	color:#999;
}


#pageTop a {
	display:block;
	width:100%;
	color: #fff;
	font-size:40px;
	line-height:30px;
	text-align:center;
	background:#222;
	transition-duration:0.5s;
	-webkit-transition-duration:0.5s;
}

#pageTop a:hover {
	color: #EBE301;
	text-decoration:none;
}

#pageTop {
	width: 100%;
	position: relative;
	z-index:2;
}

/* コンテンツ
------------------------------------ */
.contents{
	position:relative;
	width:100%;
	margin:0 auto;
	padding:50px 0 60px;
}
.splash1{
	position:absolute;
	top:-20px;
	left:-280px;
}
.splash2{
	position:absolute;
	bottom:-200px;
	right:-300px;
}
.splash3{
	position:absolute;
	bottom:-50px;
	left:-250px;
}
.splash4{
	position:absolute;
	bottom:-100px;
	right:-250px;
}

/* キービジュアル */
.keyvisual{
	width:100%;
	padding:10px 0;
	background:#000;
	text-align:center;
}
.mainLead{
	padding:10px 0;
	background:#ede400;
}
/* ダウンロード */

a.btnDl {
	float:left;
	display:block;
	position: relative;
	width:215px;
	padding:10px 0 10px 85px;
	z-index: 2;
	background-color: #000000;
	border: 2px solid #000000;
	color: #fff;
	font-size:15px;
	font-weight:bold;
	border-radius:5px;
}
a.btnDl.modal-open{
	width:240px;
	padding:10px 0 10px 60px;
}
a.btnDl .fa-mobile,
a.btnDl .icon-download-alt{
	position:absolute;
	top:50%;
	color:#fff;
}
a.btnDl:hover .fa-mobile,
a.btnDl:hover .icon-download-alt{
	color:#999;
}
a.btnDl .icon-download-alt{
	margin-top:-10px;
	font-size:32px;
	left:34px;
	font-weight:normal;
}
a.btnDl .fa-mobile{
	margin-top:-25px;
	font-size:50px;
	left:22px;
}
a.btnDl:hover {
	background-color: #fff;
	border-color: #000000;
	color: #000000;
	text-decoration:none;
}
a.btnDl::before,
a.btnDl::after {
	left: 0;
	width: 100%;
	height: 50%;
	background-color: #000000;
}
a.btnDl::before {
	top: 0;
}
a.btnDl::after {
	bottom: 0;
}
a.btnDl:hover::before,
a.btnDl:hover::after {
	height: 0;
	background-color: #000000;
}
a.btnDl::before,
a.btnDl::after {
	position: absolute;
	z-index: -1;
	display: block;
	content: '';
}
a.btnDl,
a.btnDl::before,
a.btnDl::after {
	-webkit-transition: all .3s;
	transition: all .3s;
}
.mainLead .inner{
	width:628px;
	margin:0 auto;
}
.qr{
	padding:20px;
	background:#eeeeee;
}
.qr li{
	float:left;
	width:50%;
	text-align:center;
}
.qr li p{
	margin-top:5px;
	color:#aa9400;
	font-weight:bold;
}
/* モーダル */
.modal-content {
    position:fixed;
    display:none;
    z-index:999;
    width:50%;
    margin:0;
    padding:20px;
    background:#fff;
}


.modal-overlay {
    z-index:998;
    display:none;
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:120%;
    background-color:rgba(0,0,0,0.85);
}

.modal-open:hover {
    cursor:pointer;
}

.modal-close {
	position:absolute;
	top:10px;
	right:10px;
    color:#999;
	font-weight:normal;
	font-size:24px;
}

.modal-close:hover {
    cursor:pointer;
    color:#ccc;
	text-decoration:none;
}

/* 動画 */
.lead{
	font-family:/*'Hiragino Kaku Gothic ProN', */'Noto Sans Japanese',sans-serif;
	font-size:20px;
	line-height:1.6;
	font-weight:500;
}
.movie{
	width:750px;
	margin:0 auto 40px;
	position:relative;
	text-align:center;
}
.movie .inner{
	position:relative;
	z-index:2;
}

/* コメント */
.comment{
	width:670px;
	margin:0 auto 80px;
	padding:30px 40px;
	position:relative;
	font-family:/*'Hiragino Kaku Gothic ProN', */'Noto Sans Japanese',sans-serif;
	position:relative;
	z-index:2;
	line-height:1.8;
	font-weight:500;
	background:rgba(150,150,150,0.1);
}
.title{
	margin-bottom:20px;
	font-size:20px;
	text-align:center;
	font-weight:500;
	color:#aa9400;
}

/* ドラマ情報 */
.drama{
	position:relative;
	z-index:2;
	padding:20px 40px 30px;
	background:rgba(255,255,255,0.8);
	font-size:13px;
}
.drama .inner{
	width:750px;
	margin:0 auto;
}
.leftArea{
width:63%;
	float:left;
}
.rightArea{
	width:33%;
	margin-left:4%;
	float:left;
}
.rightArea img{width:100%;}
.intro{
	padding-bottom:5px;
	margin-bottom:10px;
	font-size:16px;
	font-family:"ヒラギノ明朝 ProN W3","HiraMinProN-W6","HG明朝E","ＭＳ Ｐ明朝","MS PMincho","MS 明朝",serif;
	background:url(../images/line.png) repeat-x bottom;
}
.drama .mincho{
	font-weight:15px;
	font-family:"ヒラギノ明朝 ProN W3","HiraMinProN-W6","HG明朝E","ＭＳ Ｐ明朝","MS PMincho","MS 明朝",serif;
}
.drama a{
	color:#142290;
}