@charset "UTF-8";

/*
===== NOTES =====================================
+01: CSS Reset
+02: Base Setting
+03: Common Setup
+04: HOME Setup
================================================
*/


#pagetop{display: none;}


/* ==================================================================================================
+01: CSS Reset
================================================================================================== */
html, body, div, span, iframe, h1, h2, h3, h4, h5, h6, p, abbr, address, em, img, small, strong, b, i,
dl, dt, dd, ol, ul, li, form, label, table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, figcaption, figure, footer, header, nav, section, summary, time, a{
    margin   : 0;
    padding  : 0;
    border   : 0;
    outline  : 0;
    font-size: 100%;
	font-weight   : normal;
    vertical-align: baseline;
    background    : transparent;
	}
article,aside,details,figcaption,figure,
footer,header,hgroup,menu,nav,section { display:block;}
table {
    border-collapse: collapse;
    border-spacing : 0;
	}
html{
	overflow-y: -moz-scrollbars-vertical;
	overflow-y: scroll;
	}
strong{font-weight: bold;}
	
/* ==================================================================================================
+02: Base Setting
================================================================================================== */
html,body{width:100%; height:100%;}
ul,ol{list-style-type:none;}
body{
	background : #fff;
	font-size  : 16px;
	font-family: '游明朝','游明朝体',YuMincho,'Yu Mincho',"ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", "serif";
	color      : #222;
	line-height: 1.5;
	-moz-text-size-adjust   : none;
	-ms-text-size-adjust    : 100%;
	-webkit-text-size-adjust: 100%;
	text-size-adjust        : 100%;
	}

/* link ------------------------------ */
a:link, 
a:visited,  
a:active {
	color          : #00a0e9;
	text-decoration: underline;
	}
a:hover{text-decoration: none;}

/* images ------------------------------ */
img{vertical-align: top;}

/* ==================================================================================================
+03: Common Setup
================================================================================================== */

/* loading
------------------------------------------------------------ */
#loading{
	width     :100%;
	height    :100%;
	background:#fff;
	}
#loading img{
	-webkit-transform: translate(-50%,-50%);
	-ms-transform    : translate(-50%,-50%);
	transform        : translate(-50%,-50%);

	position:absolute;
	top     :50%;
	left    :50%;
	}

/* layout
------------------------------------------------------------ */
.contents #pagetop{
	position  : relative;
	min-height: 100%;
	}
.contents #contents{ padding-bottom: 100px;}
footer{
	background: #00a0e9;
	width     : 100%;
	position  : absolute;
	bottom    : 0;
	}
footer div{
	width    : 1020px;
	margin   : 0 auto;
	font-size: 75%;
	color    : #fff;
	padding  : 10px 0 50px;
	}
.pagetop{
	position    : fixed;
	bottom      : 100px;
	right       : 50%;
	margin-right: -560px;
	}

.contents header{
	width          : 1020px;
	margin         : 0 auto;
	background     : url(../images/home_globe.png) right center no-repeat;
	background-size: auto 80px;
	padding        : 10px 0;
	}
.contents header h1{
	width : 444px;
	margin: 0 auto;
	}
.contents header h1 img{
	width : 100%;
	height: auto;
	}

/* pagetitle
------------------------------------------------------------ */
.contents section h1{
	text-align: center;
	position  : relative;
	padding   : 80px 0 40px;
	margin-bottom: 80px;
	}
.contents section h1:after{
	-webkit-transform: translateX(-50%);
	-ms-transform    : translateX(-50%);
	transform        : translateX(-50%);

	content : "";
	height  : 1px;
	position: absolute;
	bottom  : 0;
	left    : 50%;
	width   : 100px;
	border-bottom: #ccc 1px solid;
	}
#theaters.contents section h1{	margin-bottom: 50px;}

/* navigation
------------------------------------------------------------ */
nav{
	width   : 1020px;
	height  : 28px;
	position: relative;
	}
#home nav{margin: 14px auto 0;}
.contents nav{
	border-top   : #ddd 1px solid;
	border-bottom: #ddd 1px solid;
	padding      : 10px 0;
	margin       : 0 auto;
	}
#introduction.contents nav{
	border-top-color   : #fff;
	border-bottom-color: #fff;
	}
.nav{
	-webkit-transform: translateX(-50%);
	-ms-transform    : translateX(-50%);
	transform        : translateX(-50%);

	position: absolute;
	top     : 7px;
	left    : 50%;
	width   : 765px;
	}
.contents .nav{ top: 17px;}
.nav li{
	float  : left;
	padding: 0 10px;
	}
/*
.nav li:nth-child(2) img{
	-moz-opacity: 0.15;
	opacity     : 0.15;
	filter      : alpha(opacity=15);
	}
*/
.nav a:hover img{
	-moz-opacity: 0.5;
	opacity     : 0.5;
	filter      : alpha(opacity=50);
	}

.sns{
	position: absolute;
	right   : 0;
	}
.sns li{
	float  : left;
	padding: 0 5px;
	}

/* ==================================================================================================
+04: HOME
================================================================================================== */

/* photo
------------------------------------------------------------ */
.main1,
.main2{
	width   : 1020px;
	height  : 500px;
	margin  : 20px auto 0;
	position: relative;
	}
.main1{background: url(../images/main01.jpg) center top no-repeat;}
.main2{background: url(../images/main02.jpg) center top no-repeat;}
.main1 .poem{
	position: absolute;
	top     : 60px;
	right   : 120px;
	}
.main1 .line01,
.main1 .line02,
.main1 .line03,
.main1 .line04,
.main1 .line05{
	float       : right;
	width       : 30px;
	padding-left: 22px;
	}
.main1 .line04 img{padding-bottom: 20px;}
.main2 .poem{
	position   : absolute;
	top        : 20px;
	left       : 50%;
	margin-left: -488px;
	}
.main2 .line01,
.main2 .line02,
.main2 .line03,
.main2 .line04,
.main2 .line05,
.main2 .line06,
.main2 .line07{
	float       : right;
	width       : 22px;
	padding-left: 22px;
	}
.main2 img{padding-bottom: 20px;}
.main2{display: none;}

/* layout
------------------------------------------------------------ */
#home h1{
	-webkit-transform: translateX(-50%);
	-ms-transform    : translateX(-50%);
	transform        : translateX(-50%);

	position: absolute;
	top     : 509px;
	left    : 50%;
	z-index : 200;
	}
#home h2{
	text-align: center;
	padding   : 83px 0 20px;
	}

#home .credit{
	width     : 987px;
	margin    : 0 auto;
	position  : relative;
	text-align: center;
	background-image   : url(../images/home_globe.png),url(../images/home_umeboshi.png);
	background-position: right 13px, left 13px;
	background-repeat  : no-repeat,no-repeat;
	}
#home h4{ padding: 20px 0;}
#home h6{ padding-top: 15px;}

.bnr,
.bnr2{
	overflow: hidden;
	position: relative;
	zoom    : 1;

	width : 716px;
	margin: 30px auto 20px;
	}
.bnr2{
	width : 330px;
	margin: 30px auto 10px;
	}
.bnr li,
.bnr2 li{
	float  : left;
	padding: 0 5px;
	}
.share{
	overflow: hidden;
	position: relative;
	zoom    : 1;

	width : 415px;
	margin: 20px auto 40px;
	}
.share li{
	float      : left;
	padding    : 0 5px;
	line-height: 1;
	}

#home .note{
	text-align    : center;
	padding-bottom: 30px;
	}

.greeting{
position: absolute;
top: 530px;
right: 50%;
margin-right: -500px;

}
.greeting:hover{
top: 531px;
-moz-opacity : 0.9;
opacity      : 0.9;
filter       : alpha(opacity=90);
}

/* ==================================================================================================
+05: TRAILER
================================================================================================== */

#trailer{
	width     : 100%;
	height    : 100%;
	position  : fixed;
	top       : 0;
	left      : 0;
	z-index   : 500;
	background: #000;
	}
#trailer iframe{
	-webkit-transform: translate(-50%,-55%);
	-ms-transform    : translate(-50%,-55%);
	transform        : translate(-50%,-55%);

	position: absolute;
	top     : 50%;
	left    : 50%;
	width   : 90%;
	height  : 90%;
	}
#trailer .close{
	-webkit-transform: translateX(-50%);
	-ms-transform    : translateX(-50%);
	transform        : translateX(-50%);

	position: absolute;
	bottom  : 10px;
	left    : 50%;
	z-index : 500;
	}
#trailer ul{
	-webkit-transform: translateX(-50%);
	-ms-transform    : translateX(-50%);
	transform        : translateX(-50%);
	
	position: absolute;
	bottom  : 20px;
	left    : 50%;
	z-index : 500;
	width   : 740px;
	}
#trailer ul li{
	display: block;
	cursor : pointer;
	padding: 5px 5px 5px 15px;
	color  : #fff;
	float  : left;
	margin :0 5px;
	text-align: center;
	}
#trailer ul li:last-child{padding:5px 10px 5px 10px;}
#trailer ul li:hover{
	-moz-opacity: 0.6;
	opacity     : 0.6;
	filter      : alpha(opacity=60);
	}

/* ==================================================================================================
+06: THEATERS
================================================================================================== */

.update{
	text-align: center;
	font-size : 87%;
	}

#theaters table{
	width : 960px;
	margin: 50px auto 100px;
	border-collapse: collapse;
	}
#theaters th{
	font-size : 75%;
	padding   : 5px 20px;
	text-align: left;
	vertical-align: middle;
	border-bottom : #ccc 1px solid;
	}
#theaters td{
	text-align: left;
	padding   : 25px 20px;
	color     : #222;
	font-size : 150%;
	border-bottom: #ccc 1px solid;
	}
#theaters tr th:last-child,
#theaters tr td:last-child{ text-align: center;}


#theaters td a{
	color          : #222;
	text-decoration: none;
	}
#theaters tr.clickable{           cursor:pointer;}
#theaters tr.clickable:hover td{  background-color: #fcfcfc;}
#theaters tr.clickable:hover td a{color:#000; }

.place{  width: 150px;}
.release{width: 250px;}
.tickets{width: 100px;}

#theaters tr.fin td{
	background-color: #f0f0f0;
	font-size       : 100%;
	}

#theaters tr.fin.clickable:hover td{ background-color: #f7f7f7;}

/* ==================================================================================================
+07: INTRODUCTION
================================================================================================== */

#introduction .slider{
	width     : 100%;
	max-width : 1400px;
	min-width : 980px;
	height    : 482px;
	text-align: center;
	overflow  : hidden;
	margin    : 20px auto 0;
	position  : relative;
	}
#introduction .slider ul{
	-webkit-transform: translateX(-50%) !important;
	-ms-transform    : translateX(-50%) !important;
	transform        : translateX(-50%) !important;

	position: absolute !important;
	left    : 50% !important;
	width   : 1400px !important;
	}
#introduction .main{
	width   : 1020px;
	margin  : 0 auto 100px;
	position: relative;
	}
#introduction .main h2{
	position: absolute;
	top     : 224px;
	right   : 0;
	}
#introduction .main .text1,
#introduction .main .text2{
		-ms-writing-mode: tb-rl;            /* IE用　*/
	-webkit-writing-mode: vertical-rl;  /* chrome用　*/
		 -o-writing-mode: vertical-rl;       /* opera用　*/
			writing-mode: vertical-rl;

	width       : 672px; /* 1020-298-50 */
	height      : 290px;
	line-height : 2;
	font-size   : 125%;
	text-align  : justify;
	text-justify: inter-ideograph;
	}
#introduction .main .text2{ margin-top: 40px;}
#introduction .main .text1 span.tatechu,
#introduction .main .text2 span.tatechu{
	  -webkit-text-combine           : horizontal;
	      -ms-text-combine-horizontal: all;
	          text-combine-upright   : all;
	}
#introduction .main .column{
	text-align  : justify;
	text-justify: inter-ideograph;

	position       : absolute;
	bottom         : 0;
	left           : 0;
	width          : 335px;
	padding-top    : 70px;
	background     : url(../images/home_globe.png) right top no-repeat;
	background-size: 114px auto;
	}
#introduction .main .column h3{
	font-size  : 112%;
	font-weight: bold;
	color      : #00a0e9;
	}
#introduction .main .column p{
	font-size  : 87%;
	padding-top: 0.5em;
	line-height: 1.75;
	}

/* ==================================================================================================
+08: STORY
================================================================================================== */

#story .main{
	width : 1020px;
	margin: 0 auto;
	background-image   : url(../images/story_okayama.png), url(../images/story_takeda.png);
	background-position: right bottom, left bottom;
	background-repeat  : no-repeat, no-repeat;
	}
#story .main .text1{
		-ms-writing-mode: tb-rl;            /* IE用　*/
	-webkit-writing-mode: vertical-rl;  /* chrome用　*/
		 -o-writing-mode: vertical-rl;       /* opera用　*/
			writing-mode: vertical-rl;
	text-align  : justify;
	text-justify: inter-ideograph;

	line-height: 2;
	margin     : 0 auto;
	font-family: '游明朝','游明朝体',YuMincho,'Yu Mincho',"ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", "serif";
	width      : 480px;
	height     : 400px;
	column-count        : 2;
	-moz-column-count   : 2;
	-webkit-column-count: 2;
	}

@media all and (-ms-high-contrast:none){
	#story .main .text1{ margin-left:270px; } /* IE10 */
}
#story .main .text1:not(:target) {
	margin-left:270px\9; /* IE9, 10 */
	}

#story .slider{
	width : 100%;
	margin: 30px 0 10px;
	}

/* ==================================================================================================
+09: CAST & STAFF
================================================================================================== */

#cast .main,
#staff .main{
	width : 1020px;
	margin: 0 auto;
	}
.cast-list li{margin-bottom: 50px;}
.cast-list li:nth-child(1),
.cast-list li:nth-child(2){
	float: left;
	width: 480px;
	}
.cast-list li:nth-child(1){margin-right: 60px;}
.cast-list h2{
	font-size  : 150%;
	font-weight: 600;
	}
.cast-list h2 em{
	font-size  : 58%;
	font-weight: 400;
	font-style : normal;
	}
.cast-list h2 span{
	font-size   : 58%;
	font-weight : 200;
	font-style  : italic;
	padding-left: 1em;
	color       : #999;
	}
.cast-list h2 em span{
	font-size   : 85%;
	font-style  : normal;
	padding-left: 0.5em;
	color       : #222;
	}
.cast-list li:nth-child(1) h2,
.cast-list li:nth-child(2) h2{margin-top: 30px;}
.cast-list li:nth-child(1) h2 em,
.cast-list li:nth-child(2) h2 em{display: block;}
.cast-list p{
	text-align  : justify;
	text-justify: inter-ideograph;
	background  : url(images);
	
	font-size  : 87.5%;
	margin-top : 1em;
	line-height: 1.75;
	}

.cast-list li:nth-child(3),
.cast-list li:nth-child(4),
.cast-list li:nth-child(5),
.cast-list li:nth-child(6),
.cast-list li:nth-child(7),
.cast-list li:nth-child(8),
.cast-list li:nth-child(9){clear: both;}
.cast-list li:nth-child(3) figure,
.cast-list li:nth-child(4) figure,
.cast-list li:nth-child(5) figure,
.cast-list li:nth-child(6) figure,
.cast-list li:nth-child(7) figure,
.cast-list li:nth-child(8) figure,
.cast-list li:nth-child(9) figure{
	width: 140px;
	float: left;
	margin-right : 20px;
	margin-bottom: 50px;
	}
.cast-list li:nth-child(3) .text-area,
.cast-list li:nth-child(4) .text-area,
.cast-list li:nth-child(5) .text-area,
.cast-list li:nth-child(6) .text-area,
.cast-list li:nth-child(7) .text-area,
.cast-list li:nth-child(8) .text-area,
.cast-list li:nth-child(9) .text-area{
	width: 860px;
	float: left;
	margin-bottom: 50px;
	}
.cast-list li:nth-child(9) p:first-child{margin-top: 0;}
.cast-list li:nth-child(3) .text-area em,
.cast-list li:nth-child(4) .text-area em,
.cast-list li:nth-child(5) .text-area em,
.cast-list li:nth-child(6) .text-area em,
.cast-list li:nth-child(7) .text-area em,
.cast-list li:nth-child(8) .text-area em,
.cast-list li:nth-child(9) .text-area em{padding-left: 0.5em;}

/* cast foot area
------------------------------------------------------------ */

.foot-area{
	overflow: hidden;
	position: relative;
	zoom    : 1;

	clear   : both;
	padding-bottom: 50px;
	}

.angels{
	width: 860px;
	float: left;
	background         : url(../images/cast_ring_l.png), url(../images/cast_ring_r.png);
	background-position: left center, right center;
	background-repeat  : no-repeat,no-repeat;
	}
.angels h3{ text-align: center;}
.angels ul{
	width      : 710px;
	margin     : 0 auto;
	padding-top: 20px;
	}
.angels li{
	width  : 122px;
	float  : left;
	padding: 0 10px;
	}
.others li{
	width: 122px;
	float: right;
	padding-top: 53px;
	}

.foot-area h2{
	font-size  : 100%;
	font-weight: 600;
	text-align : center;
	margin-top : 0.5em;
	}
.foot-area h2 em{
	font-size  : 58%;
	font-weight: 400;
	font-style : normal;
	display    : block;
	}
.foot-area h2 span{
	font-size  : 58%;
	font-weight: 200;
	font-style : italic;
	color      : #999;
	display    : block;
	}
.foot-area h2 em span{
	font-size   : 85%;
	font-style  : normal;
	padding-left: 0.5em;
	color       : #222;
	display     : inline;
	}

/* director
------------------------------------------------------------ */

.director figure{
	width: 340px;
	float: left;
	}
.director .text-area{
	width: 640px;
	float: right;
	}

/* music
------------------------------------------------------------ */

.music{clear: both;}
.music figure{
	width: 502px;
	float: right;
	margin-bottom: 20px;
	}
.music .text-area{
	width: 480px;
	float: left;
	margin-bottom: 20px;
	}

#staff h2{
	font-size  : 150%;
	font-weight: 600;
	}
#staff h2 em{
	font-size  : 58%;
	font-weight: 400;
	font-style : normal;
	display    : block;
	}
#staff h2 span{
	font-size   : 58%;
	font-weight : 200;
	font-style  : italic;
	padding-left: 1em;
	color       : #999;
	}
#staff h2 em span{
	font-size   : 85%;
	font-style  : normal;
	padding-left: 0.5em;
	color       : #222;
	}

.director p,
.music p{
	text-align  : justify;
	text-justify: inter-ideograph;
	background  : url(images);

	font-size  : 87.5%;
	margin-top : 1em;
	line-height: 1.75;
	}
#staff figcaption{
	font-size  : 75%;
	padding-top: 0.25em;
	}

/* comment
------------------------------------------------------------ */
.comment{
	clear  : both;
	border : #ccc 1px solid;
	padding: 40px;
	}
.comment h3{
	color      : #00a0e9;
	font-weight: 500;
	font-size  : 100%;
	}

/* cd ad
------------------------------------------------------------ */

.music dt,
.music dd{display: table-cell;}
.music dl{
	margin-top    : 20px;
	padding-bottom: 50px;
	}
.music dt{width: 120px;}
.music dd{
	vertical-align: bottom;
	width         : 210px;
	padding       : 0 10px;
	font-size     : 87%;
	}
.music dd h4{
	font-weight   : 500;
	letter-spacing: -0.05em;
	}
.music dd p{margin-top: 0;}
.music dd a{
	position : relative;
	display  : inline-block;
	padding  : 0 0 0 10px;
	color    : #222;
	vertical-align: middle;
	font-size     : 114%;
	letter-spacing: -0.05em;
	}
.music dd a::before{
	position: absolute;
	top     : 0;
	bottom  : 0;
	left    : 0;
	margin  : auto;
	content : "";
	vertical-align: middle;
	box-sizing    : border-box;
	width         : 5px;
	height        : 4px;
	border        : 5px solid transparent;
	border-left   : 5px solid #00a0e9;
	}

/* ==================================================================================================
+10: GREETING
================================================================================================== */

#greeting h1{font-size: 1.875rem;}
#greeting section{
width: 860px;
margin: 0 auto;

}

#greeting h2{
font-size: 2rem;
/*
cursor: pointer;
*/
display: block;
border-bottom: #ccc 1px solid;
margin-bottom: 30px;
position: relative;
background: url(images);
}
/*
#greeting h2:hover{
-moz-opacity : 0.5;
opacity      : 0.5;
filter       : alpha(opacity=50);
}
*/
#greeting h2.link{
border-bottom: none;
margin-bottom: 0;
}
/*
#greeting h2::after {
    position: absolute;
    top: 0;
    bottom: 5px;
    left: auto;
    right: 10px;
    margin: auto;
    content: "";
    width: 0;
    height: 0;
    display: inline-block;
    vertical-align: middle;
    border-left: 7px solid transparent;
    border-right: 7px solid transparent;
    border-top: 10px solid #00a0e9
}
#greeting h2.link::after  {
    border-top: none;
    border-bottom: 10px solid #00a0e9;
	}
*/
#greeting table{
width: 100%;
border-collapse: separate;
border-spacing: 2px;
background: #ccc;
font-size: 1rem;
}
#greeting th,
#greeting td{padding: 1em;}
#greeting th{
background: #f4f4f4;
text-align: left;
font-size: 0.875rem;
white-space: nowrap;
width: 5em;
}
#greeting th span{font-size: 0.65rem;}
#greeting td{background: #fff;}

#greeting td ul{
margin-top: 1em;
font-size: 0.75rem;
list-style-type: disc;
list-style-position: outside;
padding-left: 1.5em;
}
#greeting td p{ padding-top: 1em;}

.text14{font-size: 0.875rem;}
.mt1em{margin-top: 1em;}

#greeting h3{
font-size: 1.5rem;
margin-top: 1em;
background: url(images);
}
#greeting h4{
font-size: 1.3125rem;
margin-top: 1em;
border-bottom: #ccc 1px solid;
margin-bottom: 1em;
background: url(images);
}
#greeting h4::before{
content: "－";
padding-right: 0.5em;
}

#greeting .note{
border: #ccc 1px solid;
padding: 1em;
margin-top: 2em;
margin-bottom: 50px;
font-size: 0.875rem;
}

#greeting h5{
font-size: 1.3125rem;
margin-top: 1rem;
background: url(images);
}

#greeting .btn a{
display: inline-block;
border-radius: 30px;
background: #00a0e9;
color: #fff;
padding: 1em 2em;
text-decoration: none;
border: #00a0e9 1px solid;
}

#greeting .btn a:hover{
color: #00a0e9;
background: #fff;
}

.detail{
margin-bottom: 30px;
/*
display: none;
*/
}

#greeting li,
#greeting p{background: url(images);}