@charset "UTF-8";

@font-face {
  font-family: 'FontAwesome';
  font-weight: normal;
  font-style: normal;
  src: url('fonts/fontawesome-webfont.eot?v=4.3.0');
  src: url('fonts/fontawesome-webfont.eot?#iefix&v=4.3.0') format('embedded-opentype'),
       url('fonts/fontawesome-webfont.woff2?v=4.3.0') format('woff2'),
       url('fonts/fontawesome-webfont.woff?v=4.3.0') format('woff'),
       url('fonts/fontawesome-webfont.ttf?v=4.3.0') format('truetype'),
       url('fonts/fontawesome-webfont.svg?v=4.3.0#fontawesomeregular') format('svg');  
}

@font-face {
    font-family: 'lp';
    src: url('fonts/lp-webfont.eot');
    src: url('fonts/lp-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/lp-webfont.woff2') format('woff2'),
         url('fonts/lp-webfont.woff') format('woff'),
         url('fonts/lp-webfont.ttf') format('truetype'),
         url('fonts/lp-webfont.svg#lp') format('svg');
    font-weight: normal;
    font-style: normal;
}

* {
	-webkit-font-smoothing: antialiased !important;
	-moz-osx-font-smoothing: grayscale !important;
}

.hidden {
	position: absolute;
	width: 0;
	height: 0;
	overflow: hidden;
}

.cf:after {
	content:"";
	display: table;
    clear: both;
}

.center {
	text-align: center;
}

.uc {
	opacity: .5;
	font-size: 48px;
}

.cs {
	opacity: .5;
	font-size: 21px;
	font-family: lp;
	text-transform: uppercase;
	word-spacing: -.5em;
}

a {
	color: #369;
	text-decoration: none;
	background-color: transparent;	
}

a.anm {
	-webkit-transition:.2s ease-in-out;
	-moz-transition:.2s ease-in-out;
	transition:.2s ease-in-out;
	word-break: break-word;
}

a:hover {
	color: #69c;	
}

img {
	border: 0;
	-webkit-user-select: none;
	-moz-user-select: none;
	user-select: none;
}

.post figure {
	position: relative;
	width: 100% !important;
	margin: 0;
}

.post figure[data-provider="youtube"] {
	height: 0;
	padding-top: 56.25%;
}

.post figure[data-provider="youtube"] iframe {
  position: absolute;
  top: 0 !important;
  right: 0 !important;
  width: 100% !important;
  height: 100% !important;
}

.content-wrap img,
.content-wrap video,
.post img,
.post video {
	max-width: 100%;
	height: auto;
}

.content-wrap iframe,
.post iframe {
	max-width: 100%;
}

.cleartype {
	-webkit-transform-origin: 0 0;
	-webkit-transform: scale(1, 1.01);
	-moz-transform-origin: 0 0;
	-moz-transform: scale(1, 1.01);
	-ms-transform-origin: 0 0;
	-ms-transform: scale(1, 1.02);
}

.spin {
	position: relative;
	width: 100%;
	height: 80px;
	margin-top: 20px;
	background-position: center top;
	background-repeat: no-repeat;
	background-size: 64px 64px;
	text-align: center;
	display: none;
}

.spin.loading {
	display: block;
	background-image: url(../images/ajax-loader.gif);
}

@media only screen and (-webkit-min-device-pixel-ratio: 2), 
only screen and (min-device-pixel-ratio: 2) {
	.spin.loading {
		background-image: url(../images/ajax-loader@2x.gif);
	}
}

.spin.loading:after {
	content:"読み込み中…";
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100%;
	text-align: center;
	font-size: 11px;
	color: #975;
	text-indent: .5em;
}

body {
	min-width: 320px;
	color: #5d3335;
	margin: 0;
	padding: 0;
	background: url(../images/paper.jpg);
	background-position: center top;
	background-size: contain;
	font-family: "ヒラギノ角ゴ ProN W3","Hiragino Kaku Gothic ProN W3", "メイリオ", "ＭＳ Ｐゴシック", sans-serif;
	font-size: 16px;
	line-height: 1.6;
	-webkit-text-size-adjust: none;
	overflow-x: hidden;
}

h1,h2,h3,h4,h5,h6,strong,b,
#home-nav a,
#home-roadshow,
.entr-btns .com {
	font-weight: bold;
	font-family: "ヒラギノ角ゴ ProN W6","Hiragino Kaku Gothic ProN W6", "メイリオ", "ＭＳ Ｐゴシック", sans-serif;
}


/* header
----------------------------------------------------- */


#header {
	position: fixed;
	display: block;	
	min-width: 320px;
	top:0;
	left: 0;
	width: 100%;
	height: 44px;
	z-index: 100;
	background-image: url(../images/paper.jpg);
	background-size: cover;
	box-shadow: 0px 0px 5px rgba(50,0,0,.25);
}

.init #header,
.iframe.blog #header {
	display: none !important;
}

.home #header {
	position: absolute;
	background-image: none;
	box-shadow: none;
}

#header-toggle {
	position: absolute;
	right: 0px;
	top:0px;
	z-index: 100;
	width: 44px;
	height: 44px;
	cursor: pointer;
	color: #91624d;
}

#header-toggle:before {
	content: "\f0c9";
	position: relative;
	display: block;
	font-family: FontAwesome;
	font-size: 24px;
	line-height: 34px;
	width: 100%;
	text-align: center;
}

#header-toggle:after {
	content:"menu";
	position: absolute;
	display: block;
	bottom:0px;
	left: 0;
	font-family: lp;
	font-size: 10px;
	text-transform: uppercase;
	width: 100%;
	text-align: center;
	letter-spacing: -2px;
}

h1 {
	position: absolute;
	z-index: 100;
	margin: 0;
	width: 104px;
	height: 44px;
	text-align: left;
}

h1 a {
	display: block;
	width: 100%;
	height: 100%;
	color: #91624d;
	overflow: hidden;
}

h1 a img{
	display: block;
	margin: 0px 7px 0 7px;	
}

.home h1 {
	display: none;
}

#header-title {
	font-family: lp;
	font-size: 21px;
	word-spacing: -.5em;
	letter-spacing: -1px;
	text-transform: uppercase;
	position: absolute;
	line-height: 50px;
	top:0;
	left: 44px;
	right: 44px;
	white-space: nowrap;
	text-align: center;
	text-overflow: ellipsis;
	overflow: hidden;
	cursor: default;
	/*text-shadow: 1px 1px 0 #fff;*/
}

.home #header-title {
	display: none;
}


.about-the-movie #header-title {
	color:#cc1b20;
}

.about-the-original-book #header-title {
	color:#2f60a8;
}

.gallery #header-title {
	color: #6ab03a;	
}

.videos #header-title {
	color: #fed043;	
}


.blog #header-title {
	color: #2ab8e9;	
}

.blog.tagged-news #header-title {
	color: #8888ca;
}

.blog.tagged-reviews #header-title {
	color: #297168;
}

.blog.tagged-secret #header-title,
.blog.tagged-secret1 #header-title,
.blog.tagged-secret2 #header-title,
.blog.tagged-secret3 #header-title {
	color: #f59058;
}

@media only screen and (max-width:767px) {
	#header-title {

		word-spacing: -.75em;
		letter-spacing: -1px;
	}
}


@media only screen and (max-width:479px) {
	h1 {
		width: 44px;
		height: 44px;
	}
	
	h1 a {
		color: #91624d !important;
		overflow: hidden;
	}
	h1 a img{
		display: none;
	}
	
	h1 a:before {
		content: "\F000";
		display: block;
		width: 44px;
		height: 44px;
		text-align: center;
		font-family: lp;
		font-size: 20px;
		line-height: 44px;
	}
	
	#header-title {
		font-size: 18px;
		word-spacing: -.75em;
		letter-spacing: -2px;
	}
}


/* gnav
----------------------------------------------------- */

ul#nav {
	margin: 0 10px;
	padding: 0;
	list-style-type: none;
}

ul#nav li {
	position: relative;
	border-bottom: solid 1px rgba(93, 51, 53, 0.1);
}

ul#nav li:before {
	content: "\f105";
	font-family: FontAwesome;
	font-size: 24px;
	line-height: 43px;
	color: #8f624f;
	position: absolute;
	right: 0px;
	top:0;	
}


ul#nav a {
	display: block;
	position: relative;
	color: #8f624f;
	font-weight: bold;
	font-family: "ヒラギノ角ゴ ProN W6","Hiragino Kaku Gothic ProN W6", "メイリオ", "ＭＳ Ｐゴシック", sans-serif;
	line-height: 43px;
	text-align: left;
	text-shadow: 1px 1px 0 #fbf9f5;
}

ul#nav li:first-child a {
	margin-top:60px;
	border-top: solid 1px rgba(93, 51, 53, 0.1);
}

ul#nav li:first-child a:after {
	content: "";
	position: absolute;
	top:-60px;
	left: 0;
	width: 100%;
	height: 87px;
	background-image:url(../images/logo-s.png);
	background-repeat: no-repeat;
	background-position: center -5px;
	background-size: 120px 53px;
	z-index: 1;
}


.no-touch ul#nav li:hover:before,
.no-touch ul#nav li:hover a {
	color: #bd154c;
}


.ico a:before {
	content: "";
	display: inline-block;
	width: 24px;
	height: 24px;
	vertical-align: middle;
	margin-right: .2em;
	background-position: center center;
	background-repeat: no-repeat;
	background-size: contain;
}

.ico a[href='#home']:before {
	background-image: url(../images/ico-star.png);
}

.ico a[href='#about-the-movie']:before {
	background-image: url(../images/ico-flower.png);
}


.ico a[href='#about-the-original-book']:before {
	background-image: url(../images/ico-book.png);
}

.ico a[href='#videos']:before {
	background-image: url(../images/ico-player.png);
}

.ico a[href='#blog/tagged/news']:before {
	background-image: url(../images/ico-butterfly.png);
}

.ico a[href='#gallery']:before {
	background-image: url(../images/ico-icon.png);
}

.ico a[href^='http://www.eigakan.org']:before {
	background-image: url(../images/ico-plane.png);
}

.ico a[href^='https://warnerbros.co.jp/movies']:before {
	background-image: url(../images/ico-saturn.png);
}


.ico a[href='#blog/tagged/goods']:before {
	background-image: url(../images/ico-helmet.png);
}

.ico a[href='#blog/tagged/reviews']:before {
	background-image: url(../images/ico-icon-2.png);
}

.ico a[href='#blog/tagged/secret']:before {
	background-image: url(../images/ico-icon-3.png);
}

@media only screen and (min-width:768px) {
.bdge a {
	font-size: 0 !important;
	line-height: 0 !important;
	width: 119px;
	height: 43px;
	margin: 5px;
	padding: 0 !important;
	background-size: contain;
	background-repeat: no-repeat;
}

.bdge a:before {
	display: none;
}
.bdge a[href='#blog/tagged/reviews'] {
	background-image: url(../images/ico-icon-2l.png);	
}

.bdge a[href='#blog/tagged/secret'] {
	width: 153px;
	background-image: url(../images/ico-icon-3l.png);	
}

}

/* content
----------------------------------------------------- */

#back {
	position: absolute;
	top:0;
	left:0;
	bottom: 0;
	right: 0;
	background-position: center bottom;
	z-index: 1;
	display: none;
}

#bottom {
	position: absolute;
	top:0;
	left:0;
	bottom: 0;
	right: 0;
	background-position: center bottom;
	z-index: 2;
}

#il {
	position: absolute;
	height: 200px;
	width: 100%;
	bottom: 0;
	background-position: center bottom;
	z-index: 3;
}

#contents {
	position: relative;
	padding-top: 44px;
	padding-bottom: 100px;
	z-index: 4;
}

.iframe.blog #contents {
	padding: 0;
}

.home #contents {
	padding: 0;
	position: absolute;
	top:0;
	bottom:0;
	left: 0;
	right: 0;
}

.content {
	position: relative;
	height: 0;
	overflow:hidden;
	display: block;
	max-width: 1440px;
	margin: 0 auto;
	visibility: hidden;
	
}

.content.active {
	visibility: visible;
	display: none;
	height: auto;
	overflow: auto;
	margin: -44px auto 0 auto;
	padding-top: 44px;
}

.content-wrap {
	position: relative;
	margin: 8px auto;
	padding: 0 8px;
	min-height: 100%;
	max-width: 1440px;
}

.home .content-wrap {
	margin: 0;
	max-width: 100%;
	padding: 0;
}

.blog .content-wrap {
	padding: 0 4px;
}



.iframe.blog .content-wrap {
	padding: 0 !important;
	margin: 0 !important;
}

.content-title {
	display: none;
}

.badge {
	position: relative;
	text-align: center;
	display: none;
}

.iframe.blog .badge {
	display: none !important;
}

.blog.post .badge {
	display: block;
	padding-bottom: 2px;
}

#gallery-follow,
#blog-follow {
	display: inline-block; 
	color: #fff;
	font-size: 14px;
	height: 24px;
	line-height: 24px;
	padding: 0 10px;
	border-radius: 12px;
	box-shadow: 2px 2px 0 rgba(122, 77, 79, 0.8);
	white-space: nowrap;
}

#gallery-follow {
	background-color: rgba(58, 103, 140, 0.9);
}

#blog-follow {
	color: #7b4d4f;;
	background-color: #fff;
}

#gallery-follow:before,
#blog-follow:before {
	display: inline-block;
	font-size: 16px;
	line-height: 24px;
	width: 14px;
	text-align: center;
	font-family: FontAwesome;
	margin-right: .25em;
}


#gallery-follow:before {
	content: "\f16d";
}

#blog-follow:before {
	content: "\f174";
}



/* home
----------------------------------------------------- */

.home #home.content.active {
	color: #faf7ef;
	text-align: center;
	position: absolute;
	width: 100%;
	height: 100%;
	top:0;
	bottom:0;
	right: 0;
	left: 0;
	max-width: 100%;
}


#home-main {
	position: absolute;
	right: 1%;
	width: 50%;
	top:20px;
	bottom: 20px;
	min-height: 640px;
	background-image: url(../images/home-bg.png);
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center center;
}

#home-sub {
	position: absolute;
	z-index: 100;
	min-width: 500px;
	width: 55%;
	height: 50%;
	left: 1%;
	top:0;
	bottom:0;
	margin: auto 0;
}

#home-logo {
	position: relative;
	margin: -25% auto 0 auto;
	max-width: 700px;
	min-width: 400px;
	width: 80%;
	display: inline-block;
	z-index: 1;
}

#home-logo img {
	width: 100%;
	height: auto;
}

#home-roadshow {
	position: relative;
	font-size: 17px;
	font-weight: bold;
	font-family: "ヒラギノ角ゴ ProN W6","Hiragino Kaku Gothic ProN W6", "メイリオ", "ＭＳ Ｐゴシック", sans-serif;
	line-height: 1.4;
	color: #80392b;
	text-shadow: 1px 1px 0 #fff;
	margin: 2em 0 0 0 !important;
}

#home-roadshow a {
	display: inline-block;
	position: relative;	
}

#home-roadshow a:before {
	content: "";
	position: absolute;
	left: -55px;
	top: -8px;
	width: 50px;
	height: 64px;
	background-image: url(../images/disc.png);
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center center;
}


#home-song {
	font-size: 18px;
	font-weight: bold;
	color: #ffae00;
}

#home-song small {
	font-size: 11px;	
}

#home-song .song {
	font-size: 14px;
}

#home-bnrs {
	padding: 0;
	display: block;
	list-style-type: none;
	text-align: center;
	font-size: 0;
	line-height: 0;
	
}

#home-bnrs li {
	display: inline-block;
	margin: 3px;
}

#home-badge {
	position: absolute;
	right: 70%;
	bottom: 60%;
	width: 30%;
	height: 30%;
	max-width: 150px;
	min-width: 100px;
	margin: auto 0;
}

#home-lead {
	position: absolute;
	right: 4%;
	top:12%;
	width: 15%;
	max-width: 120px;
	min-width: 80px;
}

#home-nav {
	margin: 0 11px;
}
#home-nav ul {
	height: 44px;
	position: relative;
	display: block;
	margin: 0;
	padding: 0;
	list-style-type: none;
	font-size: 0;
	line-height: 0;
	text-align: center;
	white-space: nowrap;
}

#home-nav ul.main {
	background-color: rgba(255,255,255, 0.7);
	margin: 0 auto 10px auto;
	max-width: 700px;
}

.lt-ie9 #home-nav ul.main {
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#ccffffff,endColorstr=#ccffffff);
}

#home-nav ul li {
	display: inline;	
}

#home-nav ul a {
	display: inline-block;
	padding: 0 0 0 25px;
	font-weight: bold;
	font-size: 18px;
	line-height: 44px;
	color: #bd154c;
	text-shadow: 1px 1px 0 #fff;
}

#home-nav ul a:before {
	font-family: lp;
	font-size: 25px;
	margin-right: .1em;
}

#home-nav ul.sub a:before {
	font-size: 18px;	
}



.no-touch #home-nav ul a:hover {
	background-color: rgba(255,255,255,.1);
}

#home-cannes {
	margin: 0 0 4px 0;	
}


@media only screen and (min-width:768px) {
	#home-nav ul.sub {
		height: 36px;
	}
	
	#home-nav ul.sub a {
		line-height: 36px;
	}

	#home-nav ul.sub a {
		font-size: 14px;	
	}

	#home-nav ul li:first-child a {
		padding: 0;
	}
	#home-nav ul.main:before {
		content: "";
		position: absolute;
		left: -11px;
		top:0;
		height: 0;
		width: 0;
		border-left: 11px solid transparent;
		border-top: 22px solid rgba(255,255,255, 0.7);
		border-bottom: 22px solid rgba(255,255,255, 0.7);
	}
	
	#home-nav ul.main:after {
		content: "";
		position: absolute;
		right: -11px;
		top:0;
		height: 0;
		width: 0;
		border-right: 11px solid transparent;
		border-top: 22px solid rgba(255,255,255, 0.7);
		border-bottom: 22px solid rgba(255,255,255, 0.7);
		
	}
}

@media only screen and (max-width:767px) {
	
	.home #header {
		display: block;	
	}
	
	#home-main {
		display: none;
	}
	
	#home-image {
		position: relative;
		height: 0;
		padding-top: 138%;
		background-image: url(../images/home-bg.jpg);
		background-size: contain;
		background-repeat: no-repeat;
		background-position: center center;
		margin: -4% 10px 15px 10px;
	}
	
	/*#home-image:before {
		content: "";
		position: absolute;
		width: 40%;
		height: 0;
		padding-top: 40%;
		max-width: 150px;
		max-height: 150px;
		background-image: url(../images/home-badge.png);
		background-size: contain;
		background-repeat: no-repeat;
		top: 5%;
		left: 4%;
	}*/
	
	#home-sub {
		position: relative;
		width: 100%;
		min-width: 0;
		height: auto;
		left: 0;
		margin: 0;
		overflow: visible;
	}
	
	#home-logo {
		width: 85%;
		max-width: 600px;
		min-width: 0;
		margin-top: 1%;
		margin-bottom: 2%;
	}
	
	#home-nav {
		position: relative;
		height: auto;
		margin: -10px 10px 0 10px;
	}
	
	#home-nav ul {
		height: auto;
		background-color: rgba(255,255,255, 0.75) !important;
		border-radius: 5px;
		margin-bottom: 10px !important;
	
	}
	
	#home-nav ul li {
		display: block;
		position: relative;
		border-bottom: solid 1px #f2e9da;
	}
	
	#home-nav ul li:last-child {
		border-bottom: 0;	
	}
	
	#home-nav ul a {
		display: block;
		position: relative;
		padding: 0 10px;
		text-align: left;
		line-height: 43px;
		font-size: 16px;	
	}
	
	#home-nav ul a:before {
		font-size: 24px !important;	
	}
	
	#home-nav ul a:after {
		content: "\f105";
		font-family: FontAwesome;
		font-size: 24px;
		color: #bd154c;
		position: absolute;
		right: 10px;
		top:0;	
	}

	.home #contents {
		position: relative !important;
		height: auto !important;
		overflow: auto !important;
	}
	
	.home #home.content.active {
		position: relative;
	}
	
	#home-roadshow {
		margin: 1em 0 !important;
	}

	
	#home-cannes {
		margin: 0 0 32px 0;	
	}
}

#social {
	position: relative;
	z-index: 1000;
	font-size: 0;
	text-align: center;
	margin-bottom: 20px;
}

#tweet {
	font-size: 14px;
	line-height: 1;
	font-weight: bold;
	
}

#tweet a {
	color: #794d50;
}

#tweet a:before {
	content:"\f099";
	font-family: FontAwesome;
	font-size: 16px;
	color: #23b2eb;
}

#social .social-group {
	position: relative;
	display: block;
	margin-bottom: 10px;
	vertical-align: top;
}

#social .social-group>* {
	vertical-align: top;
}

#social-follow h3 {
	display: none;
}

#social ul {
	display: inline-block;
	margin: 0;
	padding: 0;
	font-size: 0;
	line-height: 0;
	list-style-type: none;
	white-space: nowrap;
}

#social ul li {
	display: inline;
}


#social-share h3 {
	display: none;
}


#share-items {
	display: inline-block;
	height: 20px;
	font-size: 0;
	line-height: 0;
}

ul#share-items li>* {
	position: relative !important;
	display: inline !important;
	vertical-align: top !important;
	max-height: 20px !important;
	text-align: right !important;
	margin: 0 0 0 3px;
}

ul#follow-items .follow {
	display: inline-block;
	width: 26px;
	height: 26px;
	overflow: hidden;
	margin: 0 3px;
}


ul#follow-items .follow:before {
	display: inline-block;
	width: 24px;
	height: 24px;
	border-radius: 12px;
	box-shadow: 2px 2px 0 rgba(122, 77, 79, 0.8);
	text-align: center;
	background-color: rgba(255,255,255, 0.85);
	font-family: FontAwesome;
	font-weight: normal;
	font-style: normal;
	margin-right: .25em;
	text-decoration: none;
	font-size: 16px;
	line-height: 26px;
	color: #7b4d4f;
}

.lt-ie9 ul#follow-items .follow:before {
	background-color: #fff;
}

#social-share h3:before {
	content: "\f1e0";

}

.follow#follow-tumblr:before {
	content: "\f173";
}

.follow#follow-instagram:before {
	content: "\f16d";
}

.follow#follow-twitter:before {
	content: "\f099";
}

.follow#follow-facebook:before {
	content: "\f09a";
}

.twitter-share-button {
	width: 110px !important;
}

.fb-like>span {
	min-width: 84px !important;
	vertical-align: top !important;
	overflow: hidden !important;
}


/* about the movie
----------------------------------------------------- */
.dash {
	letter-spacing: -.25em;
	margin-right: .25em;
	white-space: nowrap;
}

/*.atm-introduction #contents {
	background-image: url(../images/atm-1.png);
	background-position: right top;
	background-repeat: no-repeat;
	background-size: contain;
}*/

#back {
	background-repeat: no-repeat;
	background-size: cover;	
}


.atm-introduction #back {
	background-image: url(../images/atm-bg-introduction.jpg);
	background-position: center bottom;	
}

.atm-introduction-2 #back {
	background-image: url(../images/atm-bg-introduction-2.jpg);
	background-position: right bottom;	
}

.atm-introduction-3 #back {
	background-image: url(../images/atm-bg-introduction-3.jpg);
	background-position: left top;

}

.atm-story #bottom {
	background-image: url(../images/atm-bg-story.jpg);
	background-position: center top;
	background-repeat: no-repeat;
	background-size: cover;
}

/*.atm-staff #bottom {
	background-image: url(../images/atm-bg-staff.png);
	background-position: center 44px;
	background-size: contain;
	background-repeat: no-repeat;
}*/


.atm-theme-music #bottom {
	background-image: url(../images/atm-bg-thememusic.jpg);
	background-position: center top;
	background-size: cover;
	
	
}



@media only screen and (min-width:768px) {
	.atm .slide-content {
		position: relative;
		width:50%;
		max-width: 800px;
		min-width: 300px;
		margin-left: 5%;
		margin-right: 45%;	
		padding-top: 0px;
	}
	
	.atm .slide#introduction .slide-content,
	.atm .slide#introduction-3 .slide-content,
	.atm .slide#story .slide-content,
	.atm .slide#theme-music .slide-content {
		margin-right: 5%;
		margin-left: 45%;
	}
	
	.atm .slide#story .slide-content,
	.atm .slide#characters-and-cast .slide-content,
	.atm .slide#staff .slide-content,
	.atm .slide#production-notes .slide-content {
		margin-right: auto;
		margin-left: auto;
	}
}

.atm .slide#staff .slide-content {
	width: 100%;
	max-width: 1024px;
}

.atm .page-header {
	text-align: center;
}

.atm .page-body {
	position: relative;
	z-index: 10;
	font-size: 14px;
	line-height: 1.75;
}

.atm .slide#theme-music .page-body {
	text-align: center;
		
}

.atm .slide#theme-music p img {
	display: inline;
}

.atm .slide#story .page-body {
	background-color: rgba(255,255,255,.8);
	box-shadow: 0 0 10px rgba(0,0,0,.15);
	padding: 20px;
	margin-top: 50%;
	-webkit-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
	transform: translateY(-50%);	
}

.atm .slide#story .page-body p:last-child {
	margin-bottom: 0;	
}

.atm h3 {
	color: #bd154c;
	font-size: 21px;
	text-shadow: 2px 2px 0 #fff;
	text-align: center;
}

.atm h4 {
	font-size: 17px;
	color: #bd154c;
	text-align: center;
	margin-top: 1em;
}

.atm .slide#story h4 {
	margin-top: 0;
}


.atm .slide#theme-music p {
	margin: 0.5em 0;
}

.atm .slide#theme-music h4 {
	margin: 0em;
}

.atm .slide#theme-music h4 em {
	font-style: normal;
	
}

.atm .slide#theme-music .po-st a {
	background-color: rgba(255, 255, 255, 0.85);
	display: inline-block;
	line-height: 1;
	padding: 3px 6px;
	border-radius: 10px;
	text-shadow: none;
	min-width: 6em;
	color: #369;
}

.no-touch .atm .slide#theme-music .po-st a:hover {
	background-color: #fff;
	color: #69c;
}



@media only screen and (min-width:768px) {
	
	.atm .slide#theme-music {
		color: #fff;
		text-shadow: 1px 1px 0 #051626;
		text-align: center;
	}
	
	.atm .slide#theme-music h3 {
		
		color: #fe4;
		text-shadow: 2px 2px 0 #051626;
	}
	.atm .slide#theme-music h4 {
		color: #fff;
	}
	
	.atm .slide#theme-music .slide-content {
		margin-top: 2em;
		background-color: rgba(0, 8, 21, 0.66);
		padding: 10px 0;
	}
	
	.atm .slide#theme-music .links a {
		color: #9cf;
		margin: 0 5px;	
	}
	
	.no-touch .atm .slide#theme-music .links a:hover {
		color: #adf;	
	}
}

ul.entr-btns {
	position: relative;
	z-index: 100;
	float: left;
	width: 25%;
	top:0;
	color: #fff;
	list-style-type: none;
	margin: 0 2%;
	padding: 0;
	font-weight: bold;
	font-family: "ヒラギノ角ゴ ProN W6","Hiragino Kaku Gothic ProN W6", "メイリオ", "ＭＳ Ｐゴシック", sans-serif;
}

ul.entr-btns+ul.entr-btns {
	float:right;
	margin-right: 5%;	
}

ul.entr-btns li {
	text-align: center;
	width: 100%;
	margin-bottom: 5%;
}

ul.entr-btns+ul.entr-btns li:nth-child(1) {
	margin-top: 10%;

}

ul.entr-btns li:nth-child(odd) {
	margin-left: 10%;
}

ul.entr-btns li:nth-child(even) {
	margin-right: -10%;
}


ul.entr-btns li a {
	display: block;
	position: relative;
	float: none;
	font-size: 0;
	line-height: 0;
	margin-bottom: 20px;
}

ul.entr-btns li a>img {
	display: block;
	max-width: 100% !important;
	margin-bottom: 10px;
	opacity: .75;
	border-radius: 3px;
	-webkit-transition:0.2s ease-in-out;
	-moz-transition:0.2s ease-in-out;
	-ms-transition:0.2s ease-in-out;
	transition:0.2s ease-in-out;
}

ul.entr-btns li a>span {
	display: block;
	color: #fff;
	text-shadow: 1px 1px #000;
	position: absolute;
	top:5px;
	left:0;
	right:0;
	margin: 0 auto;
	white-space: nowrap;
	font-size: 14px;
	line-height: 1.5;
	text-indent: -6em;
	padding-left: 3em;
	-webkit-transition:0.2s ease-in-out;
	-moz-transition:0.2s ease-in-out;
	-ms-transition:0.2s ease-in-out;
	transition:0.2s ease-in-out;
	opacity: 0;

}

ul.entr-btns li a:after {
	content: attr(data-title);
	display: block;
	font-size: 16px;
	line-height: 1;
	padding-top: 0px;
	font-family: lp;
	text-transform: uppercase;
	color: #fff;
	text-shadow: 1px 1px #000;
	word-spacing: -.75em;
	opacity: .75;
	-webkit-transition:0.2s ease-in-out;
	-moz-transition:0.2s ease-in-out;
	-ms-transition:0.2s ease-in-out;
	transition:0.2s ease-in-out;
	
}

ul.entr-btns li a:hover:after,
ul.entr-btns li a:hover>img,
ul.entr-btns li a:hover>span {
	opacity: 1;
	-webkit-transform: scale(1.05);  
    -moz-transform: scale(1.05);
    -ms-transform: scale(1.05); 
    transform: scale(1.05);
}

ul.entr-btns li a:hover>img {
	box-shadow: 0 0 10px rgba(255, 255, 238, 0.5);
}


#about-the-author {
	display: none;
	background-image: url(../images/paper0.jpg);
	background-size: cover;
	background-position: center center;
	padding: 20px;
	font-size: 13px;
	margin: 0;
}

#about-the-author>img {
	float: right;
	margin: 0 0 5px 5px;
	line-height: 0;	
}

#about-the-author figcaption {
	margin: 0;
}

#about-the-author h5 {
	margin: 0 0 .5em 0;
	font-size: 14px;
	color: #bd154c;
}

#about-the-author p:last-child {
	margin-bottom: 0;	
}

.atm .thumbs {
	position: relative;
	z-index: 2;
	list-style-type: none;
	padding: 0;
	font-size: 0;
	line-height: 0;
	margin: 20px 0 10px 0;
	text-align: center;
}

.atm .thumbs+.thumbs {
	margin-top: 0;	
}

.atm .thumbs li {
	display: inline-block;
	width: 50%;
	padding: 0 5px;
	box-sizing: border-box;
}

.atm .thumbs.small li {
	width: 25%;
}


.atm .thumbs li a {
	display: block;
		
}

.atm .thumbs li a img {
	display: block;
	max-width: 100%;
}

.atm .slide#story .page-header,
.atm .slide#characters-and-cast .page-header,
.atm .slide#staff .page-header,
.atm .slide#production-notes .page-header  {
	display: none;
}

.atm .slide#characters-and-cast .slide-content,
.atm .slide#production-notes .slide-content {
	width: 100% !important;
	max-width: 1200px !important;
}



.atm .slide#characters-and-cast .page-body {
	margin-top: 0;
	text-align: center;
}

ul#list-char {
	list-style-type: none;
	padding: 20px;
	margin: -20px 0 0 0;
	overflow: hidden;
}

ul#list-char li {
	float: left;
	width: 25%;
	box-sizing: border-box;
	padding-top:25%;
	position: relative;
	margin-top: 10px;
}

ul#list-char li:nth-child(1) {
	margin-left:12.5%;
}


ul#list-char li a {
	display: block;
	position: absolute;
	left: 7px;
	right: 7px;
	bottom: 7px;
	top: 7px;
	background-image: url(../images/atm-bg-paper1.png), url(../images/paper1.jpg);
	background-size: 115%, cover;
	background-position: center center, center center;
	box-shadow: 0 1px 1px rgba(0,0,0,.1);
	border: solid 10px transparent;
	border-bottom-width: 30px;
	color: #cc1b20;
	-webkit-transition:0.1s ease-in-out;
	-moz-transition:0.1s ease-in-out;
	-ms-transition:0.1s ease-in-out;
	transition:0.1s ease-in-out;
	cursor: zoom-in;
}

ul#list-char li:nth-child(2n) a {
	background-position: center top, center center;
}

ul#list-char li:nth-child(3n) a {
	background-position: center bottom, center center;
}

.no-touch ul#list-char li a:hover {
	color: #cc1b20;
	-webkit-transform: scale(1.05);  
    -moz-transform: scale(1.05);
    -ms-transform: scale(1.05); 
    transform: scale(1.05);
    z-index: 200;
    box-shadow: 0 5px 10px rgba(0,0,0,.3);
}

ul#list-char li:nth-child(odd) a {
	left: 10px;
	right: 4px;
	bottom: 4px;
	top: 10px;
}

ul#list-char li:nth-child(even) a {
	left: 4px;
	right: 10px;
	bottom: 10px;
	top: 4px;
}

ul#list-char li a .name {
	position: absolute;
	display: block;
	bottom: -30px;
	line-height: 30px;
	width: 100%;
	text-align: center;
	z-index: 100;
	font-size: 13px;
	-webkit-transition:0.1s ease-in-out;
	-moz-transition:0.1s ease-in-out;
	-ms-transition:0.1s ease-in-out;
	transition:0.1s ease-in-out;
}

.no-touch ul#list-char li a:hover .name {
	font-weight: bold;
	-webkit-transform: scale(1.2);  
    -moz-transform: scale(1.2);
    -ms-transform: scale(1.2); 
    transform: scale(1.2);
}

ul#list-char li a:before {
	content: '';
	position: absolute;
	display: block;
	top:0;
	left: 0;
	bottom: 0;
	right: 0;
	background-color: rgba(253, 252, 250, 0.75);
	background-position: center top;
	background-repeat: no-repeat;
	background-size: 200%;
}

ul#list-char li a[href="#girl"]:before {
	background-image: url(../images/char-girl.png);
	background-position: center -5%;
	background-size: 180%;
}

ul#list-char li a[href="#mother"]:before {
	background-image: url(../images/char-mother.png);
	background-position: center -2%, right top;
	background-size: 200%;
}

ul#list-char li a[href="#aviator"]:before {
	background-image: url(../images/char-aviator.png);

	background-position: center -2%;
}

ul#list-char li a[href="#prince"]:before {
	background-image: url(../images/char-prince.png);
	background-size: 150%;
	background-position: 10% 70%;
}

ul#list-char li a[href="#fox"]:before {

	background-image: url(../images/char-fox.png);
	background-size: 150%;
	background-position: center center;
}

ul#list-char li a[href="#snake"]:before {

	background-image: url(../images/char-snake.png);
	background-position: center 40%;
	background-size: 150%;
}

ul#list-char li a[href="#rose"]:before {

	background-image: url(../images/char-rose.png);
	background-position: center bottom;
	background-size: 130%;
}

ul#list-char li a[href="#bussinessman"]:before {

	background-image: url(../images/char-bussinessman.png);
	background-position: center -2%;
	background-size: 200%;
}

ul#list-char li a[href="#conceitedman"]:before {

	background-image: url(../images/char-conceitedman.png);
	background-position: center 3%;
	background-size: 160%;
}

ul#list-char li a[href="#king"]:before {

	background-image: url(../images/char-king.png);
	background-position: 55% top;
	background-size: 190%;
}

ul#list-char li a[href="#teacher"]:before {

	background-image: url(../images/char-teacher.png);
	background-position: 80% top;
	background-size: 190%;
}


ul#list-char li a:after {
	content: '';
	position: absolute;
	display: block;
	top:-20px;
	left: 50%;
	margin-left: -25px;
	z-index: 101;
	width: 50px;
	height: 20px;
	background-color: rgba(0, 0, 0, 0.075);
	-webkit-transform: rotate(2deg);
    -moz-transform: rotate(2deg);
    -o-transform: rotate(2deg);
    -ms-transform: rotate(2deg); 	
}

ul#list-char li:nth-child(odd) a:after {
	-webkit-transform: rotate(-2deg);
    -moz-transform: rotate(-2deg);
    -o-transform: rotate(-2deg);
    -ms-transform: rotate(-2deg);
}


/* char box */

.char {
	display: block;
	box-sizing: border-box;
	width: 100%;
	min-height: 455px;
	height: 100%;
	overflow: hidden;
	margin: 0;
	padding: 15px;
	display: none;
	background-size: cover, cover;
	background-position: center center;
	background-image: url(../images/atm-bg-paper1.png), url(../images/paper1.jpg);
}

.char>.image {
	position: relative;
	display: block;
	float: right;
	box-sizing: border-box;
	width: 50%;
	background-color: rgba(253, 252, 250, 0.75);
	height: 100%;
	padding: 10px 0;
	margin: 0;
	text-align: center;
	overflow: hidden;
	
}

.char#rose>.image {
	padding-bottom: 0;	
}

.char.left>.image {
	float: left;	
}

.char>.image>* {
	display: block;
	position: relative;
	line-height: 0;
	top:50%;
	margin: 0;
	-webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}

.char#rose>.image>* {
	top:100%;
	-webkit-transform: translateY(-100%);
  -ms-transform: translateY(-100%);
  transform: translateY(-100%);
		
}

.char>.image img {
	width: auto;
	height: auto;
	max-width: 100%;
	line-height: 0;
}

.char>.caption {
	display: block;
	width: 50%;
	box-sizing: border-box;
	float: left;
	margin: 0;
	text-align: center;
	padding: 5%;
	font-size: 14px;
	position: relative;
	top:30%;
	-webkit-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
	transform: translateY(-50%);	
}

.char.left>.caption {
	float: right;
}


.char>.caption h4 {
	margin: 0 0 1em 0;
	font-size: 28px;
	padding: 0 10px;
	text-align: center;
	color: #cc1b20;
	
}

.char>.caption>p {
	font-size: 14px;
	text-align: left;
	margin-bottom: 1em;

}

.char>.caption>.cast {
	margin: 0;
	text-align: left;
	overflow: hidden;
}

.char>.caption>.cast>.image {
	float: left;
	width: 100px;
	margin: 0;
}

.char>.caption>.cast>.names {
	float: right;
	width: 100%;
	margin: 0;
}

.char>.caption>.cast>.image+.names {
	margin-left: -110px;
}

.char>.caption>.cast>.names>p {
	margin: 0 0 .5em 0;
	
}


.char>.caption>.cast>.image+.names>p {
	margin-left: 110px;	
}

.char>.caption>.cast>.names>p small {
	font-size: 12px;
	font-weight: normal;
}

.char>.caption>.cast>.image+.names>p small {
	display: block;
}

.char>.caption>.cast>.names>p.dub {
	color: #cc1b20;
	font-size: 18px;
}


.char>.caption>.cast>.names>p.sub {
	font-size: 14px;
}

/* staff */


ul#list-staff {
	font-size: 16px;
	padding: 0;
	list-style-type: none;
	margin: 2em 0;
}

ul#list-staff a {
	display: block;
	width: 100%;
	margin: 1em 0;
	padding: 0;
	line-height: 1.3;
	pointer-events: none;
	color: inherit;
}



ul#list-staff a[href] .name>strong {
	color: #369;
}

.no-touch ul#list-staff a[href]:hover .name>strong {
	color: #69c;	
}

ul#list-staff .name>* {
	vertical-align: middle;	
}

ul#list-staff .name>small:first-child {
	margin: 0;
	font-size: 11px;
	display: inline-block;
	text-align: right;
	width: 40%;
	margin-right: 1%;
	
}

ul#list-staff .name>strong {
	display: inline-block;
	text-align: left;
	width: 55%;
	pointer-events: auto;
}

ul#list-staff .name>strong small {
	font-size: 11px;	
}

.staff {
	display: none;
	box-sizing: border-box;
	width: 100%;
	min-height: 455px;
	height: 100%;
	overflow: auto;
	margin: 0;
	padding: 15px;
	background-size: cover;
	background-position: center center;
	background-image: url(../images/paper0.jpg);
}

.staff-body h4 {
	font-size: 21px;
	text-align: center;
	color: #cc1b20;
	margin-top: 0.5em;
}

.staff-body h4 small {

	font-size: 10px;
	display: block;
}

.staff-body h4 .sub {
	display: block;
	font-size: 14px;	
}

.staff-body p {
	font-size: 13px;
	margin: 0;
}

	
.staff#staff-01 h4:after {
	content: "";
	display: block; 
	width: 100px;
	height: 100px;
	margin: 1em auto;
	background-size: cover;
	background-position: center center;
	background-image: url(../images/staff-01.jpg);
}

/* prono */

ul#list-prono {
	list-style-type: none;
	padding: 0;
	
}

.prono {
	display: none;
	box-sizing: border-box;
	width: 100%;
	min-height: 455px;
	height: 100%;
	overflow: hidden;
	margin: 0;
	padding: 15px;
	background-size: cover, cover;
	background-position: center center;
	background-image: url(../images/paper1.jpg);
}

.prono-body h4 {
	font-size: 21px;
	text-align: center;
	color: #cc1b20;
	margin-top: 0.5em;
}

.prono-body p {
	font-size: 13px;
	margin: 0;
}


@media only screen and (min-width:768px) {

	ul#list-prono {
		
		padding: 20px;
		margin: -20px 0 0 0;
		overflow: hidden;
	}
	
	ul#list-prono li {
		float: left;
		
		width: 33.3%;
		box-sizing: border-box;
		padding-top:22%;
		position: relative;
		margin-top: 10px;
	}
	
	ul#list-prono li:nth-child(1),
	ul#list-prono li:nth-child(6) {
		margin-left: 16.66%;	
	}
	
	
	ul#list-prono li a {
		display: block;
		position: absolute;
		left: 7px;
		right: 7px;
		bottom: 7px;
		top: 7px;
		background-size: cover;
		background-position: center center;
		border: 0;
		background-color: rgba(253, 252, 250, 0.75);
		color: #cc1b20;
		-webkit-transition:0.1s ease-in-out;
		-moz-transition:0.1s ease-in-out;
		-ms-transition:0.1s ease-in-out;
		transition:0.1s ease-in-out;
		cursor: default;
		box-shadow: 0 2px 5px rgba(0,0,0,.3);
	}
	
	ul#list-prono li a:before,
	ul#list-prono li a:after {
		content: "";
		position: absolute;
		z-index: 2;
		top: 25%;
		left: 2%;
		width: 14px;
		height: 14px;
		background-image: url(../images/paper.jpg);
		box-shadow: inset 0 2px 5px rgba(0,0,0,.3);
		border-radius: 7px;	
	}
	
	ul#list-prono li a:after {
		top:auto;
		bottom: 25%;	
	}
	

	
	ul#list-prono li a[href] {
		cursor: zoom-in;
	}
	
	ul#list-prono li:nth-child(2n) a {
		background-position: center top, center center;
	}
	
	ul#list-prono li:nth-child(3n) a {
		background-position: center bottom, center center;
	}
	
	.no-touch ul#list-prono li a[href]:hover {
		color: #cc1b20;
		-webkit-transform: scale(1.01);  
	    -moz-transform: scale(1.01);
	    -ms-transform: scale(1.01); 
	    transform: scale(1.01);
	    z-index: 200;
	    box-shadow: 0 5px 10px rgba(0,0,0,.3);
	    opacity: .9;
	}
	
	ul#list-prono li:nth-child(odd) a {
		left: 10px;
		right: 4px;
		bottom: 4px;
		top: 10px;
	}
	
	ul#list-prono li:nth-child(even) a {
		left: 4px;
		right: 10px;
		bottom: 10px;
		top: 4px;
	}
	
	ul#list-prono li a>.title {
		position: absolute;
		display: block;
		box-sizing: border-box;
		padding: 15px 15px 7px;
		bottom: 0px;
		line-height: 1.6;
		width: 100%;
		text-align: center;
		z-index: 1;
		font-size: 12px;
		font-weight: bold;
		font-family: "ヒラギノ角ゴ ProN W6","Hiragino Kaku Gothic ProN W6", "メイリオ", "ＭＳ Ｐゴシック", sans-serif;
		color: #fff;
		-webkit-transition:0.1s ease-in-out;
		-moz-transition:0.1s ease-in-out;
		-ms-transition:0.1s ease-in-out;
		transition:0.1s ease-in-out;
		
		/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#000000+0,000000+25,000000+100&0+0,0.5+25,0.5+100 */
		background: -moz-linear-gradient(top,  rgba(0,0,0,0) 0%, rgba(0,0,0,0.5) 25%, rgba(0,0,0,0.5) 100%); /* FF3.6+ */
		background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,0)), color-stop(25%,rgba(0,0,0,0.5)), color-stop(100%,rgba(0,0,0,0.5))); /* Chrome,Safari4+ */
		background: -webkit-linear-gradient(top,  rgba(0,0,0,0) 0%,rgba(0,0,0,0.5) 25%,rgba(0,0,0,0.5) 100%); /* Chrome10+,Safari5.1+ */
		background: -o-linear-gradient(top,  rgba(0,0,0,0) 0%,rgba(0,0,0,0.5) 25%,rgba(0,0,0,0.5) 100%); /* Opera 11.10+ */
		background: -ms-linear-gradient(top,  rgba(0,0,0,0) 0%,rgba(0,0,0,0.5) 25%,rgba(0,0,0,0.5) 100%); /* IE10+ */
		background: linear-gradient(to bottom,  rgba(0,0,0,0) 0%,rgba(0,0,0,0.5) 25%,rgba(0,0,0,0.5) 100%); /* W3C */
		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#80000000',GradientType=0 ); /* IE6-9 */
	
	}

	
	ul#list-prono li a[href="#prono-1"] {
		background-image: url(../images/prono-1.jpg);
	}
	
	ul#list-prono li a[href="#prono-2"] {
		background-image: url(../images/prono-2.jpg);
	}
	
	ul#list-prono li a[href="#prono-3"] {
		background-image: url(../images/prono-3.jpg);
	}
	
	ul#list-prono li a[href="#prono-4"] {
		background-image: url(../images/prono-4.jpg);
	}
	
	ul#list-prono li a[href="#prono-5"] {
		background-image: url(../images/prono-5.jpg);
	}
	
	ul#list-prono li a[href="#prono-6"] {
		background-image: url(../images/prono-6.jpg);
	}
	
	ul#list-prono li a[href="#prono-7"] {
		background-image: url(../images/prono-7.jpg);
	}
	
	.prono#prono-1 {
		background-image: url(../images/prono-1.jpg);
	}
	
	.prono#prono-2 {
		background-image: url(../images/prono-2.jpg);
	}
	
	.prono#prono-3 {
		background-image: url(../images/prono-3.jpg);
	}
	
	.prono#prono-4 {
		background-image: url(../images/prono-4.jpg);
	}
	
	.prono#prono-5 {
		background-image: url(../images/prono-5.jpg);
	}
	
	.prono#prono-6 {
		background-image: url(../images/prono-6.jpg);
	}
	
	.prono#prono-7 {
		background-image: url(../images/prono-7.jpg);
	}
		
	.prono.left:before {
		float: left;
	}
	
	.prono-body {
		min-width: 510px;
		width: 60%;
		height: 100%;
		float: right;
		padding: 15px;
		box-sizing: border-box;
		background-color: rgba(253, 252, 250, 0.8);
		overflow: auto;
		-webkit-overflow-scrolling: touch;
	}
	
	.prono.left .prono-body {
		float: left;
	}

}



.atm nav {
	text-align: center;
	opacity: 1;
}


#about-the-movie>nav {
	padding: 0 10px;
}

.atm ul.sub-nav {
	display: table;
	height:100%;
	text-align: center;
	list-style-type: none;
	padding: 0;
	margin: 8px auto 0 auto;
	font-size: 0;
	line-height: 0;
	background-color: rgba(255,255,255,.5);
	box-shadow: 0 1px 3px rgba(0,0,0,.15);
}

.atm-theme-music .atm ul.sub-nav {
	background-color: rgba(255,255,255, 0.85);
}

.atm ul.sub-nav li {
	display: table-cell;
	width: 16.6%;
	height:100%;
	padding: 0;
	box-sizing: border-box;
	border-right: 1px solid #d9cfbb;
}

.atm ul.sub-nav a {
	display: block;
	height: 100%;
	font-size: 12px;
	line-height: 16px;
	padding: 10px 5px;
	color: #766;
	-webkit-transition:.2s ease-in-out;
	-moz-transition:.2s ease-in-out;
	transition:.2s ease-in-out;
	word-break: break-word;
}

.atm ul.sub-nav li:last-child {
	border-right: 0;
}

.atm .sub-controls {
	margin: 0;
	padding: 0;
	display: none;
}

body[class*="atm-introduction"] .atm .sub-controls {
	display: block !important;
}


.atm .sub-next,
.atm .sub-prev {
	position: fixed;
	top:50%;
	z-index: 100;
	margin: 0;
	padding: 0;
	width: 44px;
	height: 44px;
	display: block;
	/*background-color: rgba(255,255,255,.5);
	border-radius: 22px;*/
}

.atm .sub-prev {
	left: 8px !important;
}

body[class~="atm-introduction"] .atm .sub-prev {
	display: none ;
}

.atm .sub-next {
	right: 8px !important;
}

body[class~="atm-introduction-3"] .atm .sub-next {
	display: none;
}

.no-touch .atm ul.sub-nav a:hover {
	color: rgba(199, 32, 38, 0.8);
	background-color: rgba(255,255,255,.75);
}

.atm ul.sub-nav a.active,
.no-touch .atm ul.sub-nav a.active:hover {
	background-color: rgba(199, 32, 38, 0.8);
	color: #fff;
}



@media only screen and (max-width:767px) {
	
	.atm h3 {
		margin-top: 44px;
	}

	.about-the-movie #back {
		background-image: none !important;
	}
	.about-the-movie #bottom {
		background-image: none !important;
	}
	
	.about-the-movie .atm .slide#introduction:before {
		content:"";
		display: block;
		margin-left: -8px;
		margin-right: -8px;
		height: 0;
		padding-top: 60%;
		background-image: url(../images/atm-1.png);
		background-repeat: no-repeat;
		background-position: right top !important;
		background-size:175% !important;
	}
	
	
	.about-the-movie .atm .slide#introduction-3:after {
		content:"";
		display: block;
		margin-left: -8px;
		margin-right: -8px;
		margin-top:-30px;
		height: 0;
		padding-top: 63%;
		background-image: url(../images/atm-1-2.png) !important;
		background-size:150% !important;
		background-position: right bottom;
		background-repeat: no-repeat;
		background-size: contain;
		opacity: 1;
	}


	.about-the-movie .atm .slide#story:after {
		content:"";
		position: absolute;
		bottom:0;
		left: -8px;
		right: -8px;
		height: 100%;
		background-image: url(../images/.atm .slide#story.png) !important;
		background-size:125% !important;
		background-repeat: no-repeat;
		background-position: left bottom !important;
	}
	
	.about-the-movie.v2 .atm .slide#story:after {
		display: none !important;
	}
	
	.atm .slide-content {
		padding-top: 10px;
		margin: 0 auto;
		overflow: hidden;
	}
	
	.atm .slide#introduction .slide-content {
		margin-top: -100px;
	}
	

	
	.atm .slide#introduction p {
		text-align: left;
	}
	.atm .slide#introduction br {
		display: none;	
	}
	.atm .page {
		width: auto;	
	}
	
	
	.atm .slide#story .page-body {
		position: relative;
		background-color: transparent;
		box-shadow: none;
		padding: 10px 0;
		margin-top: 0;
		-webkit-transform: translateY(0);
		-ms-transform: translateY(0);
		transform: translateY(0);	
	}
	
	.atm .slide#story .slide-content:after {
		content: "";
		width: 100%;
		height: 0;
		padding-top: 72%;
		background-size: cover;
		background-repeat: no-repeat;
	}
	
	.atm .slide#story .slide-content:before {
		background-image: url(../images/atm-bg-story.jpg);
		background-position: center top;
	}
	
	.atm .slide#story .slide-content:after {
		background-image: url(../images/atm-bg-story.jpg);
		background-position: center bottom;
	}
	
	.atm .slide#story .page-header,
	.atm .slide#characters-and-cast .page-header,
	.atm .slide#staff .page-header,
	.atm .slide#theme-music .page-header,
	.atm .slide#production-notes .page-header {
		display: block;
	}

	
	.atm .slide#characters-and-cast .page-body {
		margin-top: 0;	
	}
	
	ul#list-char {
		margin: -20px -20px 0 -20px;
	}

	
	.char {
		display: block;
		box-sizing: border-box;
		width: 100%;
		min-height: 495px;
		height: auto;
		overflow: visible;
		margin: 0;
		padding: 10px;
		display: none;
		background-size: 200%;
		background-position: center bottom !important;
	}
	
	.char>.image {
		float: none !important;
		width: 100%;
		min-height: min-intrinsic;
		height: auto;
		padding: 10px;
		margin: 0 0 10px 0;
		text-align: center;
	}
	
	.char.left>.image {
		float: none !important;
	}
	

	.char>.image>* {
		display: block;
		position: relative;
		line-height: 0;
		top:0 !important;
		-webkit-transform: translateY(0) !important;
		-ms-transform: translateY(0) !important;
		transform: translateY(0) !important;
	}
	
	.char>.caption {
		width: 100%;
		float: none;
		margin: 0 auto;
		text-align: center;
		padding: 0;

		top: 0;
		-webkit-transform: translateY(0);
		-ms-transform: translateY(0);
		transform: translateY(0);	
	}
	
	.char.left>.caption {
		float: none;
	}

	.char>.caption h4 {
		font-size: 24px;
		margin-bottom: 0;	
	}
	
		
	.staff {
		overflow: auto;
		-webkit-overflow-scrolling: touch;
		background-position: center top;
		background-size: contain, cover;
		background-repeat: no-repeat;
		background-image: url(../images/atm-bg-staff.png),url(../images/paper0.jpg);
	}
	
	.staff h4 {
		margin: 1em 0 1em 0;
	}
	
	.staff h4 small {
		display: block;
		margin: 0;
	}


	.atm nav {
		display: none;	
	}
	
	.atm .bx-wrapper {
		margin: 0 !important;
		width: auto !important;
		height: auto !important;

	}
	
	.atm .bx-viewport {
		height: auto !important;
		width: auto !important;
		overflow: visible !important;
	}
	
	.atm .bxslider {
		width: auto !important;
		height: auto !important;
		
	}
	
	.atm .bxslider>* {
		display: block !important;
		position: relative !important;
		width: auto !important;
		height: auto !important;
		float: none !important;
	}
	
	.atm .slide-content {
		width: 100%;	
	}
	
	.atm .slide#staff dt {
		width: 50%;	
	}
	.atm .slide#staff dd {
		width: 50%;	
	}
	
	ul#list-prono {
		position: relative;
		display: block;
		list-style-type: none;
		padding: 0;
		margin: 1px;
		background-size: cover;
		background-image: url(../images/paper1.jpg);
		box-shadow: 0 1px 1px rgba(0,0,0,.1);
		
	}
	
	ul#list-prono:before,
	ul#list-prono:after {
		content: "";
		position: absolute;
		z-index: 2;
		top: 25%;
		left: 2%;
		width: 16px;
		height: 16px;
		background-image: url(../images/paper.jpg);
		box-shadow: inset 0 1px 1px rgba(0,0,0,.1);
		border-radius: 8px;	
	}
	
	ul#list-prono:after {
		top:auto;
		bottom: 25%;	
	}
	
	ul#list-prono a {
		display: block;
		padding: 10px 10px 10px 30px;
		border-bottom: solid 1px #e8e1d1;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
		font-weight: bold;
		font-family: "ヒラギノ角ゴ ProN W6","Hiragino Kaku Gothic ProN W6", "メイリオ", "ＭＳ Ｐゴシック", sans-serif;
	}
	
	.prono {
		overflow: auto;
		-webkit-overflow-scrolling: touch;
		background-position: center -5%, center top;
		background-size: contain, cover;
		background-repeat: no-repeat;
		background-image: url(../images/atm-bg-prono.png),url(../images/paper0.jpg);
	}
	
	.prono h4:after {
		content: "";
		display: block; 
		width: 100%;
		padding-top: 60%;
		margin: 1em auto;
		background-size: cover;
		background-position: center center;
	}
	
	.prono#prono-1 h4:after {
		background-image: url(../images/prono-1.jpg);
	}
	
	.prono#prono-2 h4:after {
		background-image: url(../images/prono-2.jpg);
	}
	
	.prono#prono-3 h4:after {
		background-image: url(../images/prono-3.jpg);
	}
	
	.prono#prono-4 h4:after {
		background-image: url(../images/prono-4.jpg);
	}
	
	.prono#prono-5 h4:after {
		background-image: url(../images/prono-5.jpg);
	}
	
	.prono#prono-6 h4:after {
		background-image: url(../images/prono-6.jpg);
	}
	
	.prono#prono-7 h4:after {
		background-image: url(../images/prono-7.jpg);
	}


}

@media only screen and (max-width:639px) {
	
	
	.char {
		background-size: 360%;
		background-position: center bottom !important;
	}
	
	ul#list-char li {

		width: 33.3%;
		padding-top:33.3%;

	}
	
	ul#list-char li:nth-child(1) {
		margin-left:0;
	}
	

}


/* about the original
----------------------------------------------------- */

.ato .page-header {
	position: relative;
	text-align: center;
	margin-bottom: -50px;
	z-index: 100;	
}

.ato .page-header-content {
	display: inline-block;
	position: relative;
}

.ato .page-header-content:before {
	content: "";
	display: block;
	position: absolute;
	left: -20px;
	bottom:10px;
	width: 25px;
	height: 0;
	border-top: 15px solid  #8f7d4d;
	border-left: 15px solid transparent;
	border-bottom: 15px solid #8f7d4d;
}

.ato .page-header-content:after {
	content: "";
	display: block;
	position: absolute;
	right: -20px;
	bottom:10px;
	width: 25px;
	height: 0;
	border-top: 15px solid  #8f7d4d;
	border-right: 15px solid transparent;
	border-bottom: 15px solid #8f7d4d;
}

.ato h3 {
	position: relative;
	z-index: 2;
	display: inline-block;
	font-size: 16px;
	line-height: 1;
	padding: 7px 6px;
	margin: 0 0 20px 0;
	color: #fff;
	background-color: #8f7d4d;
	box-shadow: 0 2px 5px rgba(0,0,0,.25);
}

.ato h3:before {
	content: "";
	display: block;
	position: absolute;
	left: 0;
	bottom:-10px;
	width: 0;
	height: 0;
	border-right: 20px solid #330;
	border-bottom: 10px solid transparent;		
}

.ato h3:after {
	content: "";
	display: block;
	position: absolute;
	right: 0;
	bottom:-10px;
	width: 0;
	height: 0;
	border-left: 20px solid #330;
	border-bottom: 10px solid transparent;		
}

.ato .slide {
	margin: 0;
}

.ato .slide-content {
	position: relative;
	text-align: center;
	background-color: rgba(255,255,255,.5);
	padding: 40px 5%;
	margin: 20px 44px 120px 44px;
	min-height: 440px;
	/*box-shadow: 0 2px 5px rgba(0,0,0,.15), inset 0 0 50px rgba(50,0,0,.15);*/
}

.lt-ie9 .ato .slide-content {
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#99ffffff,endColorstr=#99ffffff);
}


.ato-5 .slide-content {
	background-image: url(../images/ato-bg.png);
}

.lt-ie9 .ato-5 .slide-content {
	filter:none;
}



.ato-5 .slide-content:before {
	content: '';
	position: absolute;
	top: 5%;
	left: 3%;
	right: 3%;
	bottom: 5%;
	border: solid 2px #9f6f46;
}

.ato .slide-content-body {
	position: relative;
	z-index: 6;
	width: 55%;
	text-align: center;
}

.ato .slide-content-body.c {
	width: 100%;	
}

.ato .slide-content-body.r {
	width: 55%;
	float: right;
}

.ato .slide-content-body p {
	text-align: left;
}

.ato .slide-content-body .l {
	width: 35%;
	float: left;
}

.ato .slide-content-body .r {
	width: 35%;
	float: right;
}

.ato h4 {
	position: relative;
	font-size: 21px;
	color: #bd154c;
	margin: 1em 0;
	text-align: center;
	z-index: 5;
}

.ato-1 h4 {
	font-size: 14px;
	line-height: 1.6;
	
}

.ato-1 h4 strong,
.ato-1 h4 em {
	font-style: normal;
	font-size: 18px;	
}

.ato-1 h4 small {
	display: inline-block;
	font-size: 16px;
	margin: 1em 0;
}

.ato h4 img {
	display: inline-block;
	vertical-align:bottom;
}

.ato-2 h4,
.ato-3 h4 {
	display: inline-block;
	font-size: 18px;
	color: #f8f3ec;
	background-color: #3162a6;
	padding: 0 1em;
	border-radius: 15px;
	margin: 0;
}

.ato p {
	margin: 1em 0 0 0;
}
.ato p.em {
	position: relative;
	text-align: center;
	font-weight: bold;
	font-size: 21px;
	margin-bottom: 1em;
	color: #bd154c;
	z-index: 5;
}

.ato .fwd {
	width: 45%;
	position: absolute;
	left: -44px;
	bottom: -120px;
} 

.ato .fwd.l {
	width: 47%;	
}

.ato .fwd.c {
	width: 40%;
	position: absolute;
	left: 33%;
	right: 27%;
	top:20%;
	bottom:10%;
	overflow: hidden;
	z-index: 10;
}

.ato .fwd.b {
	width: 40%;
	position: absolute;
	left: 28%;
	right: 32%;
	top:20%;
	bottom:10%;
	overflow: hidden;
	z-index: 1;
} 

.ato .bwd {
	width: 45%;
	margin: 0;
	position: absolute;
	overflow: hidden;	
}

.ato .bwd.rb {
	right: 0;
	bottom: 0;
}

.ato .bwd.rc {
	right: 0;
	bottom: 0;
}


.ato .bwd.lt {
	width: 20%;
	min-width: 200px;
	top:0;
	left: 0;
}

.ato .bwd.lb {
	width: 30%;
	left: 0;
	bottom: 0;
	min-width: 300px;
}



.ato .fwd img,
.ato .bwd img {
	display: block;
	max-width: 100%;
	width: auto;
	height: auto;
	max-height: 100%;
}

.ato .bwd.rb img {
	float: right;
	margin-right: -10%;
	margin-bottom: -20%;	
}

.ato .bwd.rc img {
	float: right;
	margin-right: -2%;
	margin-bottom: 20%;

}

.ato .bwd.lt img {
	float: left;
	margin-top: 30px;
	margin-left: 10px;	
}

.ato .bwd.lb img {
	float: left;
	margin-bottom: -75%;
	margin-left: -30%;	
}

.ato .character {
	border: 3px solid #c7b68a;
	background-color: #f9f7f3;
	padding: 10px;
	margin-top: 10px;
}

.ato .character h5 {
	width: 50%;
	float: left;
	font-size: 15px;
	color: #bd154c;
	margin: -5px 0 0 0;
	white-space: nowrap;
	text-align: center;
}

.ato .l .character h5 {
	float: right;
}

.ato .r .character:first-child h5 img {
	margin: -15px 0 -10px -20px;
}

.ato .character h5 img {
	display: inline-block;	
}

.ato .character p {
	width: 50%;
	float: right;
	margin: 0;
	font-size: 12px;
}

.ato .l .character p {
	float: left;
}

.ato .trivia {
	margin-bottom: 20px;

}

.ato-5 h4 {
	text-shadow: 1px 1px 0 #fff;	
}

.ato .trivia h5 {
	font-size: 13px;
	color: #fef362;
	margin: 0;
}

.ato .trivia p {
	color: #fff;
	float: left;
	margin: 0;
	font-size: 12px;
}

.ato .bx-wrapper {
	margin: 0 !important;
}

.ato .bx-pager {
	bottom: 50px !important;
}


 
.sub-controls .bx-prev,
.sub-controls .bx-next,
.ato .bx-prev,
.ato .bx-next {
	top:auto !important;
	bottom: 55% !important;
	margin: 0 !important;
	background-image: none !important;
	background-color: transparent !important;
	width: 44px !important;
	height: 44px !important;
	margin-top: -22px !important;
	text-decoration: none !important;
	-webkit-transition:.25s ease-in-out;
	-moz-transition:.25s ease-in-out;
	transition:.25s ease-in-out;
	color:  rgba(143, 126, 78, 0.75);
}

.sub-controls .bx-prev,
.sub-controls .bx-next {
	color: rgba(199, 32, 38, 0.8);
}

.ato .bx-prev:hover,
.ato .bx-next:hover {
	color:  #8f7d4d;
}

.sub-controls .bx-prev:hover,
.sub-controls .bx-next:hover {
	color: rgba(199, 32, 38, 1);
}

.sub-controls .bx-prev:before,
.sub-controls .bx-next:before,
.ato .bx-prev:before,
.ato .bx-next:before {
	position: absolute;
	left: 0;
	top:0;
	display: block;
	font-family: FontAwesome;
	font-size: 60px;
	line-height: 40px;
	width: 100%;
	height: 100%;
	text-align: center;
	text-indent: 0;	
}


.ato .bx-pager-link {
	color: #8f7d4d !important;
	opacity: .5;
	
}

.ato .bx-pager-link:hover {
	opacity: .75;
}

.ato .bx-pager-link.active {
	opacity: 1;
	
}

@media only screen and (max-width:767px) {
	
	.ato .content-wrap {
		padding: 0;
		overflow-x: hidden;
	}

	.ato .slide-content {

		padding: 20px 10px 10px 10px;
		margin: 20px 10px;
		min-height: 0;
	}
	.ato-1, .ato-4 {
		z-index: 10;
	}
	.ato-5 .slide-content {
		padding: 20px;
	}
	
	.ato-5 .slide-content:before {
		top: 10px;
		left: 10px;
		right: 10px;
		bottom: 10px;
	}

	
	.ato .bx-wrapper {
		margin: 0 !important;
		pointer-events: none !important;
	}
	
	.ato .bx-viewport {
		height: auto !important;
	}
	.ato .bxslider {
		width: auto !important;
	}
	.ato .bxslider>* {
		position: relative !important;
		float: none !important;
	}
	.ato .bx-controls,
	.ato .bx-controls-direction {
		display: none !important;
	}
	
	.ato .slide-content-body,
	.ato .slide-content-body.r {
		width: 100%;
		float: none;
	}
	
	.ato .slide-content-body .l,
	.ato .slide-content-body .r {
		width: 100%;
		float: none;
	}
	
	.ato .fwd {
		position: relative !important;
		width: 100% !important;
		height: auto;
		margin: 10px auto -50px auto;
		left: auto !important;
		right: auto  !important;
		bottom: auto !important;
		float: none;
	}
	
	.ato-3 .fwd{
		margin-bottom: -20px;	
	}
	
	.ato .fwd.b {
		top:-20px !important;
	} 
	
	.ato .fwd img{
	 	max-width: 80%;
	 	margin: 0 auto;
	}
	.ato .bwd {
		position: relative;
		width: auto !important;
	}
	
	.ato .bwd.rc {
		margin-right: -10px;
	}
	
	.ato .bwd.rb {
		margin: 0 -10px -10px 0;
	}
	
	.ato .bwd.lt {
		width: 20%;
		min-width: 200px;
		margin: 0;
		top:0;
		left: -10px;
	}
	

	
	.ato .bwd.lb {
		margin: 0 0 -10px -10px;
	}

	.ato .bwd img {
		max-width: 70% !important;
		margin: 0 -10% !important;
	}
	
	.ato h4 {
		margin-top: 0;
	}
	
	.ato-1 h4 {
		margin-top:10px;
	}
	
	.ato-2 h4,
	.ato-3 h4 {
		font-size: 16px;
	}
}


/* gallery
----------------------------------------------------- */

#gallery ul.photos {
	list-style-type: none;
	margin: 0 -4px;
	padding: 0;
	font-size: 0;
	line-height: 0;
}

#gallery ul.photos>li {
	display: inline-block;
	width: 25%;
}

@media only screen and (max-width:767px) {
	#gallery ul.photos>li {
		width: 33.3%;
	}
}

#gallery ul.photos>li>a {
	display: block;
	position: relative;
	margin: 4px;
	background-color: #faf7ef;
	box-shadow: 0px 0 5px rgba(0,0,0,.25);
	padding: 0px;
}

#gallery ul.photos img {
	width: 100%;
	height: 100%;	
}

#gallery ul.photos .meta {
	position: absolute;
	left: 0;
	right: 0;
	bottom:0;
	opacity: 0;
	font-size: 11px;
	line-height: 1;
	text-align: center;
	color: #fff;	
	z-index: 3;
	padding: 8px;
}

#gallery ul.photos .meta>* {
	margin: 0 .5em;	
}

#gallery ul.photos .likes:before,
#gallery ul.photos .comments:before {
	font-family: FontAwesome;
	margin-right: .1em;
}

#gallery ul.photos .likes:before {
	content: "\f004";
}

#gallery ul.photos .comments:before {
	content: "\f075";
}

.no-touch #gallery ul.photos>li>a:after {
	content: "";
	position: absolute;
	width: 100%;
	height: 100%;
	left: 0;
	top:0;
	z-index: 2;
	background-color: rgba(0,0,0,.5);
	opacity: 0;
	-webkit-transition:.2s ease-in-out;
	-moz-transition:.2s ease-in-out;
	transition:.2s ease-in-out;
}

.no-touch #gallery ul.photos>li>a:hover:after,
.no-touch #gallery ul.photos>li>a:hover .meta {
	opacity: 1;
}

#gallery ul.photos>li>a.video:before {
	content: "\f03d";
	display: block;
	width: 44px;
	height: 44px;
	text-align: center;
	font-size: 22px;
	font-family: FontAwesome;
	color: #faf7ef;
	line-height: 44px;
	position: absolute;
	right: 0px;
	top:0px;
	z-index: 1;
}

/* blog
----------------------------------------------------- */


.blog .posts {
	max-width: 1440px;
	margin: 0 auto;
	overflow-x: hidden;
}

.blog .post,
.blog .post.sub-post {
	display: block;
	padding: 10px;
	width: 280px;
	font-size: 14px;
	line-height: 1.6;
	background-color: #faf7ef;
	margin: 4px;
	box-shadow: 0 1px 3px rgba(0,0,0,.15);
}

.iframe.blog .post {
	margin: 0;
}

.blog.post .post {
	width: auto;
	min-width: 500px;
	max-width: 500px;
}

.blog .post .more-content {
	display: none;	
}

.blog .post.sub-post {
	width: auto;
	margin: 0;
	min-width: 500px;
	max-width: 500px;
	box-shadow:none;
}

.blog .post.sub-post .more,
.blog.post .post .more {
	display: none;	
}

.blog .post.sub-post .more-content,
.blog.post .post .more-content {
	display: block;	
}

.blog .post:before {
	content: attr(data-type);
	position: absolute;
	right: 0;
	top:0;
	background-color: #c00;
	color: #fff;
	font-family: lp;
	text-transform: uppercase;
	line-height: 1;
	padding: 5px 2px;
	font-size: 8px;
	display: none;
}

.blog .post h3 {
	margin-top: 0;
}

.blog .post p.media {
	text-align: center;
	line-height: 0;
	margin: 0;
}

.blog .post p.media * {
	display: inline-block;
	margin: 0 2px 2px 0;

}

.blog .post video {
	cursor: pointer;	
}

.blog .post img {
	cursor: pointer;
}

.blog.post .post img,
.blog .post.sub-post img {
	cursor: default	
}

.blog .post p:first-child {
	margin-top: 0;
}

.blog .post blockquote {
	margin-left: 0;
	border-left: 2px solid #cbb;
	padding-left: .5em;
}

/* for tagged-reviews */

.blog.tagged-reviews .post p,
.blog.tagged-reviews .post.sub-post p {
	font-size: 16px;
}

.blog.tagged-reviews .post p b,
.blog.tagged-reviews .post.sub-post p b {
	color: #bd154c;
	font-size: 18px;
}

.blog.tagged-reviews .post p i,
.blog.tagged-reviews .post.sub-post p i {
	font-size: 13px;
	font-style: normal;	
}

/* for secret */

.blog.tagged-secret .post,
.blog.tagged-secret1 .post,
.blog.tagged-secret2 .post,
.blog.tagged-secret3 .post,
.blog.tagged-secret .post.sub-post,
.blog.tagged-secret1 .post.sub-post,
.blog.tagged-secret2 .post.sub-post,
.blog.tagged-secret3 .post.sub-post {
	background-color: #fff;
}

.blog.tagged-secret .post p.media,
.blog.tagged-secret1 .post p.media,
.blog.tagged-secret2 .post p.media,
.blog.tagged-secret3 .post p.media,
.blog.tagged-secret .post.sub-post p.media,
.blog.tagged-secret1 .post.sub-post p.media,
.blog.tagged-secret2 .post.sub-post p.media,
.blog.tagged-secret3 .post.sub-post p.media {
	text-align: center;
	line-height: 0;
	margin: -10px -10px 0 -10px;
}

.blog.tagged-secret .post p.media *,
.blog.tagged-secret1 .post p.media *,
.blog.tagged-secret2 .post p.media *,
.blog.tagged-secret3 .post p.media *,
.blog.tagged-secret .post.sub-post p.media *,
.blog.tagged-secret1 .post.sub-post p.media *,
.blog.tagged-secret2 .post.sub-post p.media *,
.blog.tagged-secret3 .post.sub-post p.media * {
	display: inline-block;
	margin: 0;
}

.blog.tagged-secret .post p.media+p,
.blog.tagged-secret1 .post p.media+p,
.blog.tagged-secret2 .post p.media+p,
.blog.tagged-secret3 .post p.media+p,
.blog.tagged-secret .post.sub-post p.media+p,
.blog.tagged-secret1 .post.sub-post p.media+p,
.blog.tagged-secret2 .post.sub-post p.media+p,
.blog.tagged-secret3 .post.sub-post p.media+p {
	font-size: 12px;
	margin: 1em 0;
}

.blog .post ul.tags {
	list-style-type: none;
	margin-top: 10px;
	padding: 0;
	font-size: 0;
	line-height: 0;
	word-break: break-word;
}

.blog .post ul.tags li {
	display: inline;
	margin: 0 .5em 0 0;
	font-size: 11px;
	line-height: 1.2;
}

.blog .post ul.tags a,
.blog .post .meta a {
	color: #a99;
	-webkit-transition:.2s ease-in-out;
	-moz-transition:.2s ease-in-out;
	transition:.2s ease-in-out;
}

.blog .post ul.tags a:hover,
.blog .post .meta a:hover {
	color: #766;	
}

.blog .post .meta {
	margin-top: .5em;
	margin-bottom: -6px;
	position: relative;	
}

.blog .post ul.reactions,
.blog .post ul.share {
	display: inline-block;
	position: relative;
	list-style-type: none;
	padding: 0;
	font-size: 0;
	line-height: 0;
	white-space: nowrap;
}

.blog .post ul.share {
	background-color: #fff;	
	border: 1px solid #cbb;
	border-radius: 2px;
	margin-left: 5px;
	visibility: hidden;
	opacity: 0;
	box-shadow: 0 0 2px rgba(0,0,0,.2);
	-webkit-transition:.2s ease-in-out;
	-moz-transition:.2s ease-in-out;
	transition:.2s ease-in-out;
	z-index: 100;
}

.blog .post ul.share:before {
	content: "";
	display: block;
	position: absolute;
	width: 0;
	height: 0;
	top:50%;
	margin-top: -5px;
	left: -6px;
	border-right: 5px solid #cbb;
	border-top: 5px solid transparent;	
	border-bottom: 5px solid transparent;
	z-index: 0;
}

.blog .post ul.share:after {
	content: "";
	display: block;
	position: absolute;
	width: 0;
	height: 0;
	top:50%;
	margin-top: -5px;
	left: -4px;
	border-right: 5px solid #fff;
	border-top: 5px solid transparent;	
	border-bottom: 5px solid transparent;
	z-index: 1;
}

.blog .post ul.reactions .more-wrap:hover ul.share {
	visibility: visible;
	opacity: 1;
}

.blog .post ul.reactions li,
.blog .post ul.share li {
	display: inline-block;
	width: 20px;
	margin: 0 10px 0 0;	
}

.blog .post ul.share li {
	width: 26px;
	height: 26px;
	margin: 0;
}

.blog .post ul.reactions a:before,
.blog .post ul.share a:before {
	display: inline-block;
	width: 20px;
	text-align: center;
	font-family: FontAwesome;
	font-size: 18px;
	line-height: 1;
}

.blog .post ul.share a:before {
	width: 26px;
	line-height: 26px;
}

.blog .post ul.reactions a.reblog:before {
	content: "\f079";
}

.blog .post ul.reactions a.like:before {
	content: "\f004";
}

.blog .post ul.reactions a.liked {
    color: #EB5555;
}

.blog .post ul.reactions a.more-reactions:before {
	content: "\f141";
}

.blog .post ul.share a.twitter:before {
	content: "\f099";
}

.blog .post ul.share a.facebook:before {
	content: "\f230";
}

.blog .post .parmalink {
	margin: 0;
	position: absolute;
	right: 0;
	bottom: 6px;
	font-size:11px;
}

.blog .post .parmalink .date {
	margin-left: 1em;
}

#blog .content-cap {
	display: none;
	
}

.tagged-reviews #blog .content-cap:before {
	content: "順不同・敬称略";
	display: block;
	text-align: center;
	font-size: 11px;
	line-height: 1;
	margin: 1em 0 0 0;	
}

#blog .cap: {
	text-align: center;
	font-size: 11px;
	margin: 1em 0 0 0;
}

#blog nav {
	padding: 0 10px;
}

ul#blog-nav,
ul#blog-nav-2 {
	display: none;
	text-align: center;
	list-style-type: none;
	padding: 0;
	margin: 12px auto -6px auto;
	font-size: 0;
	line-height: 0;
	background-color: rgba(255,255,255,.5);
	box-shadow: 0 1px 3px rgba(0,0,0,.15);
	min-width: 300px;
	max-width: 600px;
	height:100%;
}

.tagged-goods ul#blog-nav,
.tagged-movie-goods ul#blog-nav,
.tagged-classic-goods ul#blog-nav {
	display: table;
}

.tagged-secret ul#blog-nav-2,
.tagged-secret1 ul#blog-nav-2,
.tagged-secret2 ul#blog-nav-2,
.tagged-secret3 ul#blog-nav-2 {
	display: table;
}


ul#blog-nav li,
ul#blog-nav-2 li {
	display: table-cell;
	width: 33.3%;
	height:100%;
	box-sizing: border-box;
	border-right: 1px solid #d7ccb3;
}

ul#blog-nav-2 li {
	width: 25%;
}


ul#blog-nav a,
ul#blog-nav-2 a {
	display: block;
	height: 100%;
	font-size: 12px;
	line-height: 16px;
	padding: 10px 5px;
	-webkit-transition:.2s ease-in-out;
	-moz-transition:.2s ease-in-out;
	transition:.2s ease-in-out;
	word-break: break-word;
}


ul#blog-nav li:last-child a,
ul#blog-nav-2 li:last-child a {
	border: 0;	
}

.no-touch ul#blog-nav a:hover {
	color: #2ab8e9;
	background-color: rgba(255,255,255,.75);
}

.no-touch ul#blog-nav-2 a:hover {
	color: #f59058;
	background-color: rgba(255,255,255,.75);
}


.tagged-goods ul#blog-nav a[href$="/tagged/goods"],
.tagged-movie-goods ul#blog-nav a[href$="/tagged/movie-goods"],
.tagged-classic-goods ul#blog-nav a[href$="/tagged/classic-goods"],
.no-touch .tagged-goods ul#blog-nav a[href$="/tagged/goods"]:hover,
.no-touch .tagged-movie-goods ul#blog-nav a[href$="/tagged/movie-goods"]:hover,
.no-touch .tagged-classic-goods ul#blog-nav a[href$="/tagged/classic-goods"]:hover {
	background-color: #2ab8e9;
	color: #fff;
}

.tagged-secret ul#blog-nav-2 li.secret a,
.tagged-secret1 ul#blog-nav-2 li.secret1 a,
.tagged-secret2 ul#blog-nav-2 li.secret2 a,
.tagged-secret3 ul#blog-nav-2 li.secret3 a,
.no-touch .tagged-secret ul#blog-nav-2 li.secret a:hover,
.no-touch .tagged-secret1 ul#blog-nav-2 li.secret1 a:hover,
.no-touch .tagged-secret2 ul#blog-nav-2 li.secret2 a:hover,
.no-touch .tagged-secret3 ul#blog-nav-2 li.secret3 a:hover {
	background-color: #f59058;
}

.tagged-secret ul#blog-nav-2 li.secret a,
.tagged-secret1 ul#blog-nav-2 li.secret1 a,
.tagged-secret2 ul#blog-nav-2 li.secret2 a,
.tagged-secret3 ul#blog-nav-2 li.secret3 a,
.no-touch .tagged-secret ul#blog-nav-2 li.secret:hover a,
.no-touch .tagged-secret1 ul#blog-nav-2 li.secret1:hover a,
.no-touch .tagged-secret2 ul#blog-nav-2 li.secret2:hover a,
.no-touch .tagged-secret3 ul#blog-nav-2 li.secret3:hover a {
	color: #fff;
}



@media only screen and (max-width:767px) {
	.blog.post .post,
	.blog .post.sub-post {
		width: auto;
		min-width: 280px;
		max-width: 280px;

	}
	.iframe.blog.post .post,
	.iframe.blog .post.sub-post {
		max-width: 500px;
		box-sizing: border-box;

	}

}



/* totop
----------------------------------------------------- */

#totop {
	position:fixed;
	width: 40px;
	height: 40px;
	background: rgba(255,255,255,.7);
	text-align:center;
	bottom:30px;
	right:20px;
	cursor:pointer;
	display:none;
	color: #bd154c;
	font-size: 0;
	line-height:0;
	z-index:1000;
	overflow: hidden;
	border-radius: 20px;

	box-shadow: 3px 3px 0 rgba(0,0,0,.3);
}

.iframe.blog #totop {
	display: none !important
}

.no-rgba #totop {
	background: rgb(255,255,255);
}

#totop:before {
	content: "\F106";
	display: inline-block;
	width: 40px;
	height: 40px;
	font-family: FontAwesome;
	font-weight: normal;
	font-style: normal;
	margin-right: .25em;
	text-decoration: none;
	font-size: 40px;
	line-height: 36px;
	text-align: center;
}

.sb-active #totop {
	display: none !important
}

@media only screen and (min-width:768px) {
	#totop {
		display: none;
	}
}

/* footer
----------------------------------------------------- */

#footer {
	position: absolute;
	bottom:0;
	left: 0;
	right: 0;
	color: #5d3335;
	
	font-size: 9px;
	line-height: 20px;
	z-index: 1001;
	display: none;
}

.iframe.blog #footer {
	display: none !important;
}

#footer a {
	color: #5d3335;
}


#footer a[href='#credit']:after {
	content: "\f106";
	font-family: FontAwesome;
	width: 1em;
	display: inline-block;
	text-align: center;
}

#footer-left {
	position: absolute;
	bottom: 5px;
	left: 5px;
	font-size: 8px;
	line-height: 1;
	font-family: helvetica, arial;
	margin: 0;
	z-index: 2;
	text-shadow: 1px 1px 0 rgba(245, 236, 221, 0.75);
}

#footer-right{
	position: absolute;
	bottom: 5px;
	right: 5px;
	font-size: 9px;
	font-family: Helverica, Arial, sans-serif;
	line-height: 1;
	margin: 0;
	z-index: 2;
	text-shadow: 1px 1px 0 rgba(245, 236, 221, 0.75);
}


#il:after {
	content: "";
	position: absolute;
	background-size: contain;
	background-repeat: no-repeat;
	margin: 0 auto;
	left:0;
	right: 0;
	z-index: 1;
}


.blog.tagged-reviews #il:after {
	bottom:40px;
	width: 108px;
	height: 44px;
	margin: 0 55% 0 45%;
	background-image:url(../images/il-plane.png);
}

.blog.tagged-secret #il:after,
.blog.tagged-secret1 #il:after,
.blog.tagged-secret2 #il:after,
.blog.tagged-secret3 #il:after {
	bottom:10px;
	width: 85px;
	height: 85px;
	background-image:url(../images/il-bird.png);
	margin: 0 55% 0 45%;
}


.blog #il:after {
	bottom:10px;
	width: 130px;
	height: 80px;
	background-image:url(../images/il-city.png);	
}

.blog.tagged-news #il:after {
	bottom:10px;
	width: 90px;
	height: 100px;
	background-image:url(../images/il-planet.png);
}


.gallery #il:after {
	bottom:40px;
	width: 140px;
	height: 36px;
	background-image:url(../images/il-scarf.png);
	
}

.videos #il:after {
	bottom:10px;
	width: 85px;
	height: 100px;
	background-image:url(../images/il-kite.png);
	margin: 0 55% 0 45%;
	
}



@media only screen and (max-width:767px) {
	
	.home #footer {
		position: absolute !important;
		bottom:0px !important;
	}
	#footer-left {
		bottom: 10px;
		left: 10px;
	}
	
	#footer-right{
		bottom: 10px;
		right: 10px;
	}

}

@media only screen and (max-width:479px) {
	#footer-left,
	#footer-right {
		right: auto;
		left: auto;
		width: 100%;
		text-align: center;
	}
	#footer-left {
		bottom: 25px;
	}
}

#credit {
	position: relative;
	padding: 30px 10px 5px 10px;
	background-color: rgba(56, 30, 32, 0.95);
	z-index: 100;
	text-align: center;
	display: none;
	color: #d3993b;
}

#credit:before {
	content: "";
	position: absolute;
	background-size: contain;
	margin: 0 auto;
	left: 10%;
	z-index: 1;
	top:-98px;
	width: 33px;
	height: 100px;
	background-image:url(../images/il-flower.png);
}

#credit a {
	color: #d3993b;
}

#credit p {
	margin: 0;	
}

#credit-close {
	position: absolute;
	top:0;
	right: 0;
	width: 44px;
	height: 44px;
	text-align: center;
	font-size: 36px;
	line-height: 44px;
	cursor: pointer;	
}

#credit-close:before {
	content: "×";
	font-family: helvetica,sans-serif;	
}

#credit-text,
#credit-image {
	display: block;
	text-align: center;	
}

#credit-image img {
	max-width: 100%;
	height: auto;	
}

#credit ul {
	display: inline-block;
	list-style-type: none;
	margin: 0;
	padding: 0;
}

#credit ul li {
	display: inline-block;
	line-height: 18px !important;
	margin: 0 5px;
	vertical-align: middle;
}


#credit ul li img {
	line-height: 0;
}

/* sidebar
----------------------------------------------------- */


#sb-site {
	background: url(../images/paper0.jpg);
	
	background-size: cover;
	background-attachment: fixed;
	background-position: center top;
	-webkit-backface-visibility:hidden;
	backface-visibility:hidden;
	-webkit-transform-style: preserve-3d;
	-webkit-font-smoothing: antialiased;
	overflow: hidden;
}

.init #sb-site {
	background-image: none;
	background-color: transparent;
}

@media only screen and (max-width:767px) {
	#sb-site {
		background: url(../images/paper.jpg);
		background-size:auto
		background-attachment:scroll;
	}
}

#sb-site:before {
	content: "";
	position: absolute;
	display: block;
	z-index: 10000;
	top:0;
	left: 0;
	width: 0;
	height: 0;
	-webkit-transition:.5s ease-in-out;
	-moz-transition:.5s ease-in-out;
	transition:.5s ease-in-out;
}

#stars {
	
	position: absolute;
	display: block;
	z-index: 0;
	top:0;
	left: 0;
	right: 0;
	bottom:0;
	background-image: url(../images/stars-w.png);
	background-position: center top;
}
@media only screen and (min-width:768px) {
	.about-the-movie.atm-characters-and-cast #stars {
		background-image: url(../images/atm-bg-characters.png);
		background-position: center top;
		background-size: contain;
	}
	
	.about-the-movie.atm-staff #stars {
		background-image: url(../images/atm-bg-staff.png);
		background-position: center top;
		background-size: contain;
		background-repeat: no-repeat;
	}
	
	.about-the-movie.atm-production-notes #stars {
		background-image: url(../images/atm-bg-prono.png);
		background-position: center top;
		background-size: contain;
		background-repeat: no-repeat;
	}
	
}

.init #stars {
	display: none;
}


.sb-active #sb-site:before {
	width: auto;
	height: auto;
	right: 0;
	bottom: 0;
	background-color: rgba(225, 213, 196, 0.75);	
}

.sb-active #header {
	opacity: .25;
	pointer-events: none;
}

.sb-right {
	color: #fff;
	background-color: #fbf9f5;
	background-image: url(../images/stars.png);
	background-position: right top;
	-webkit-overflow-scrolling: touch;
}



/* queryloader2 override
----------------------------------------------------- */

#qLpercentage {
	font-family: sans-serif !important;
	font-size: 16px !important;
	margin: -1.5em 0 0 0 !important;
	padding: 0 !important;
}


/* fancybox
----------------------------------------------------- */

.fancybox-skin {
	-webkit-border-radius: 0;
	   -moz-border-radius: 0;
	        border-radius: 0;
}


.fancybox-overlay {
	overflow: auto;
	overflow-y: auto !important;
}

.fancybox-wrap {
	-webkit-overflow-scrolling: touch;
	overflow-scrolling: touch;
}

.fancybox-iframe {
	max-height: 720px !important;
}

.fancybox-prev,
.fancybox-next {
	width: 44px !important;
	height: 44px !important;
	top:50% !important;
	margin-top: -22px !important;
	background-color: transparent;
}

.fancybox-prev {
	left: -44px !important;
}


.fancybox-next {
	right: -44px !important;
}

.fancybox-prev span,
.fancybox-next span {
	visibility: visible !important;
}

.fancybox-prev span {
	left: 5px !important;
}

.fancybox-next span {
	right: 5px !important;
}

.fancybox-close {
	width: 44px !important;
	height: 44px !important;
	top: -44px !important;
	right: -44px !important;
	background-image: none;
}

.fancybox-close:before {
	content: "×";
	font-family: sans-serif;
	color: #fff;
	display: inline-block;
	width: 44px;
	height: 44px;
	text-align: center;
	font-size: 36px;
	line-height: 44px;
	font-weight: normal;
	font-style: normal;
	text-decoration: none;
}


/* videos
----------------------------------------------------- */

.youtube {
  position: relative;
  width: 100%;
  background-color: rgba(66,22,0,.25);
}

.youtube .fluid-width-video-wrapper {
	position: relative;
	padding-top: 56.25% !important;
}

.youtube iframe {
  position: absolute;
  top: 0 !important;
  right: 0 !important;
  width: 100% !important;
  height: 100% !important;
}

/* bxslider override
----------------------------------------------------- */

.bxslider {
	margin: 0;
}

.vid .video-title {
	display: block;
	text-align: center;
	line-height: 44px;
	font-size: 16px;
	font-weight: bold;
	text-transform: uppercase;
	text-shadow: 0 2px 3px rgba(0,0,0,.25);
	color: #fff;
}

.vid .bx-wrapper {
	margin-bottom: 0px !important;
}

.bx-viewport {
    -moz-box-shadow: none !important;
    -webkit-box-shadow: none !important;
    box-shadow: none !important;
    border: 0 !important;
    left: 0 !important;
    background: transparent !important;
}

.vid .bx-viewport {
	box-shadow: 0 2px 5px rgba(0,0,0,.25) !important;	
}

.vid .bx-pager {
	bottom: -40px !important;
}

.vid .bx-pager-link {
	color: #e71218 !important;
	opacity: .5;
}

.vid .bx-pager-link:hover {

	opacity: .75;
}

.vid .bx-pager-link.active {
	opacity: 1;
}

.vid .bx-prev,
.vid .bx-next {
	top: 0 !important;
	margin: 0 !important;
	background-image: none !important;
	background-color: transparent !important;
	width: 44px !important;
	height: 44px !important;
	/*margin-top: -22px !important;*/
	text-decoration: none !important;
	-webkit-transition:.25s ease-in-out;
	-moz-transition:.25s ease-in-out;
	transition:.25s ease-in-out;
}

.vid .bx-prev:before,
.vid .bx-next:before {
	position: absolute;
	left: 0;
	top:0;
	display: block;
	font-family: FontAwesome;
	color: rgba(255,255,255,.85);
	font-size: 36px;
	line-height: 44px;
	width: 100%;
	height: 100%;
	text-align: center;
	text-indent: 0;
	text-shadow: 0 2px 3px rgba(0,0,0,.25);
}

.bx-prev:before {
	content: "\f104";
	text-indent: -5px;
}

.bx-next:before {
	content: "\f105";
	text-indent: 5px;
}

.bx-prev {
	left: 0px !important;
}

.bx-next {
	right: 0px !important;
}

.bx-pager-link {
	position: relative;
	width: 16px !important;
	height: 16px !important;
	margin: 0 10px !important;
	background-color: transparent !important;
}

.bx-pager-link:before {
	content: '\f007';
	position: absolute;
	top:0;
	left: 0;
	display: inline-block;
	font-family: lp !important;
	font-size: 18px !important;
	line-height: 16px !important;
	width: 16px !important;
	height: 16px !important;
	text-indent: 0 !important;
}

.bx-pager-link.active:before {
	content: '\f000';
	text-shadow: 1px 1px 0 #fff;
	
}

#bx-pager {
	list-style-type: none;
	padding: 0;
	margin: 5px 0;
	text-align: center;
}

#bx-pager li {
	display: inline-block;
	margin: 3px;

}

#bx-pager li a {
	background-color: rgba(255, 255, 255, 0.65);
	line-height: 1;
	font-size: 14px;
	padding: 3px 12px;
	border-radius: 12px;
	white-space: nowrap;
	-webkit-transition:.2s ease-in-out;
	-moz-transition:.2s ease-in-out;
	transition:.2s ease-in-out;
}

.no-touch #bx-pager li a:hover {
	background-color: #fff;
}

#bx-pager li a.active,
.no-touch #bx-pager li a.active:hover {
	background-color: #e71218;
	color: #fff;
}