@charset "utf-8";

/* +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++

"Design is not just what it looks like and feels like. Design is how it works." - Steave Jobs

"Think different." - 

Author : EXTRADNA (http://www.extradna.com) 
Version : 1.2
Last modified : Jan-27, 2016

(C) Copyright EXTRADNA. All rights reserved.

+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */



/*
=================================================
リセット
=================================================
*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
margin:0; padding:0; background:transparent; border:0; outline:0; font-size:1em;
}

body,
table,
input, textarea, select, option {
font-family:HiraKakuProN-W3; font-size:1em; -webkit-text-size-adjust:none;
}

body { background:#fff; color:#000; line-height:1.6; text-align:left;}

article, aside, canvas, details, figcaption, figure,
footer, header, hgroup, menu, nav, section, summary {
display:block;
}

ol,ul,li { list-style:none;}

hr { display:none;}

blockquote, q { quotes:none;}

:focus { outline:0;}

ins { text-decoration:none;}

del { text-decoration:line-through;}

p { margin-top:1.5em;}
p:first-child { margin-top:0em;}



/*
=================================================
汎用スタイル
=================================================
*/
a:link { color:#ef7e00; text-decoration:underline;}
a:visited { color:#ef7e00; text-decoration:underline;}
a:hover {}
a:active {}

img { width:100%; border: none; vertical-align: top; font-size:0; line-height:0;}
a img { text-decoration:none;}

.txtCtr { text-align: center;}
.txtRgt { text-align: right;}
.txtLft { text-align: right;}

.wdt90 { width:90%; margin:0 auto;}
.wdt94 { width:94%; margin:0 auto;}
.wdt96 { width:96%; margin:0 auto;}

.clearfix:after { content:" "; display:block; height:0; clear:both; visibility:hidden;}

/*.borderLineTop { padding-top:1.5em; border-top:1px solid #666;}
.borderLineBtm { padding-bottom: 1.5em; border-bottom: 1px solid #666;}*/



/*
=================================================
全ページ共有スタイル
=================================================
*/

/* コンテナ */
#container {}


/* ヘッダー */
header {}
header #spHdr { width:100%; background-color:#ef7e00; position: fixed; left: 0; top:0; z-index:2;  -webkit-tap-highlight-color: rgba(0,0,0,0);}
header #spHdr h1 { width:70%; margin:0 auto;}
header #spHdr #btnHome { width:15%; position: absolute; left:0; top:0;}
header #spHdr #btnMenu { width:15%; position: absolute; right:0; top:0;}


/* フッター / 各メニュー */
footer {}
footer p { margin-top:0;}

footer #spFtr { padding: 1.5em 0 1em;}

footer #spFtr nav {}

/* サブ & メインメニュー */
footer #spFtr nav ul#subMenu,
footer #spFtr nav ul#mainMenu { width:100%; text-align:center;}
footer #spFtr nav ul#subMenu li,
footer #spFtr nav ul#mainMenu li { width:48.5%; margin-bottom:0.4em; display: inline-block; vertical-align: top;}
footer #spFtr nav ul#subMenu li a,
footer #spFtr nav ul#mainMenu li a { display:block; padding:0 3%;}

/* メニューボーダー */
footer #spFtr #menuBorder { width:94%; margin:0.6em auto 1em; border-top: 1px dashed #666;}

/* SNSメニュー */
footer #spFtr nav ul#snsMenu { width:100%; margin-bottom: 1em; text-align:center;}
footer #spFtr nav ul#snsMenu li { width:25%; display: inline-block; vertical-align: top;}
footer #spFtr nav ul#snsMenu li a { display:block;}

/* シェアボタン */
footer #spFtr nav ul#shareBtns { width: 100%; text-align: center; margin-bottom: 0.9em;}
footer #spFtr nav ul#shareBtns li { margin-left:10px; overflow:hidden; display: inline-block; vertical-align:top;}
footer #spFtr nav ul#shareBtns li:first-child { margin-left:0;}
footer #spFtr nav ul#shareBtns li img { width:auto; margin: 0; padding: 0;}

/* ビリングテキスト */
footer #spFtr p#billingTxt { width: 94%; margin: 0 auto;}



/*
=================================================
ホーム & バナーエリア
=================================================
*/
#home { width:100%; margin-bottom: 1.5em; position:relative;}

#home h1 {}

#home #btnBalloonL { width:20%; position:absolute; left:1.5%; top:29%;}
#home #btnBalloonR { width:24.6%; position:absolute; left:59%; top:33%;}

#home ul#homeBanners { width:100%; background-color: #dfe568; padding:1em 0 0.6em; text-align:center;}
#home ul#homeBanners li { width:48.5%; margin-bottom:0.4em; display: inline-block; vertical-align: top;}
#home ul#homeBanners li a { display:block; padding:0 3%;}



/*
=================================================
予告編
=================================================
*/

#trailer { width:94%; margin:0 auto; padding-bottom: 1.5em; border-bottom: 1px dashed #666;}

#trailer nav { width:85%; margin:0 auto 0.5em;}
#trailer nav ul {}
#trailer nav ul li { width:50%; display: inline-block; vertical-align: top;}
#trailer nav ul li a { display:block; opacity: 0.5;}
#trailer nav ul li:nth-child(1) a { border-right: 1px solid #fff;}
#trailer nav ul li:nth-child(2) a { border-left: 1px solid #fff;}
#trailer nav ul li a.pageSelected { opacity: 1;}

#trailer #trailerPlayer { position:relative; width:100%; height:0; padding-bottom:56.25%; overflow:hidden;}
#trailer #trailerPlayer video { position:absolute; left:0; top:0;}



/*
=================================================
配下ページ共有スタイル
=================================================
*/
#mainContent { padding-bottom: 2em;}
#mainContent p { font-size: 0.8em;}

.bgGrid { background: url(http://nekoyon-movie.com/sp/img/common/bgGrid.jpg) repeat center top;}

h2.pageTitle  { background: #7f5c2e;}

#mainPic { margin-bottom: 1.5em;}

.protectPic { position: relative;}
.protectPic img.protectPicCover { position: absolute; left: 0; top: 0; width:100%; height:100%;}


/*
=================================================
配下ページ
=================================================
*/

/* イントロダクション / ストーリー */
#intro, #story {}
#intro p strong, #story p strong { font-size: 1.25em; color: #ff1d97;}


/* キャスト & スタッフ */
#castStaff {}

#castStaff h2 { margin-bottom: 2em;}

#cast { padding-bottom: 2em;}

#staff {}

.castStaffInfo {}
.castStaffPic { position: relative; cursor:pointer; -webkit-tap-highlight-color: rgba(0,0,0,0);}
.castStaffPic h3 {}
.castStaffPic h4 { width:100%; position: absolute; left: 0; top: 0;}
p.castStaffTxt { margin-top: 0; padding-top: 1em; display: none;}

.castStaffBorder { margin:1.5em auto; border-top: 1px solid #666;}


/* 出演猫について */
#cat {}
#cat p strong { font-size: 1.1em;}
.catInfo { margin-top: 1.5em; padding: 1em; background: rgba(255,255,255,0.75); border-radius: 10px;}
.catInfo h4 { font-size:0.9em; text-align: center; color: #ff1d97;}
.catInfo h4+p { margin-top: 0;}


/* 原作 & 主題歌情報 */
#bookSong {}

#book { padding-bottom: 2em;}
#book h3 { margin-top: 1.5em;}
#book p#btnBookinfo { width:69%; margin: 0.5em auto 0;}

#song {}
#song #mainPic02 { margin-bottom: 1.5em;}
#song #songComment { margin-top: 1.5em; padding: 1em; background: rgba(255,255,255,0.75); border-radius: 10px;}
#song #songComment h4 { font-size:0.9em; text-align: center; color: #ff1d97;}
#song #songComment h4+p { margin-top: 0;}
#song p#btnScandal { width:69%; margin: 1em auto 0;}


/* プロダクション・ノート */
#pronote {}
#pronote p.catBorder { width:50%; margin: 1.5em auto 0;}
#pronote #mainPic02 { margin: 1.5em 0;}


/* チケット情報 */
#ticket {}
#ticket #mainContent { padding-bottom: 0.5em;}
#ticket h2 { margin-bottom: 1.5em;}
#ticket p.ticketCaution { font-size: 0.7em;}