@charset "utf-8";
/* ===================================================================
 style info : ファイル読み込み
=================================================================== */

@import url("default.css");
@import url("assets.css");

/* ===================================================================
 style info : 個別css
=================================================================== */

html {
 /*overflow-y: auto;
	zoom:1;*/
}
body {
 margin: 0;
 color: #000;
 min-width: 1000px;
 min-height: 700px;
 background: #fff; /*f0f0f0 f1eeea*/
}
#wrapper {
 width: 100%;
 min-width: 1000px;
 max-width: 1600px;
 margin: 0 auto;
 position: relative;
}

/*枠*/
#line_top {
 border-top: solid 10px #fff;
 left: 0;
 position: absolute;
 top: 0px;
 width: 100%;
 z-index: 999;
}
#line_left {
 border-left: solid 10px #fff;
 left: 0px;
 position: fixed;
 top: 0;
 height: 100%;
 z-index: 999;
}
#line_right {
 border-right: solid 10px #fff;
 right: 0px;
 position: absolute;
 top: 0;
 height: 100%;
 z-index: 999;
}
#line_bottom {
 border-bottom: solid 10px #fff;
 left: 0;
 position: relative;
 bottom: 0px;
 width: 100%;
 z-index: 999;
}

/*  ---------------------------
			Contents
---------------------------  */

.blank {
 min-height: 500px;
}

.bg {
 position: absolute;
 top: -50px;
 left: 0;
 z-index: 100;
 width: 100%;
}

.bg img {
 width: 100%;
 /*max-height:773px !important;*/
}

.contbox {
 width: auto;
 padding: 44px;
 margin: 0 40px 0px 200px;
 max-width: 1014px;
 position: relative;
 background: #fff;
}
.contbox h2 {
 margin-bottom: 60px;
}

/*  ---------------------------
			TOP
---------------------------  */

#top {
 width: 100%;
 position: relative;
 background: #fff;
 left: -1px;
}

#titleArea {
 position: absolute;
 left: 180px;
 top: 0px;
 width: 27.8%;
 height: 100%;
 display: block;
 z-index: 1;
 background: #fff;
 padding: 4.8% 2.4% 3% 0.5%;
}
#titleLogo {
 position: absolute;
 top: 2.2%;
 left: 180px;
 width: 30%;
 z-index: 1001;
}
#titleCast {
 position: absolute;
 bottom: -70px;
 left: 0;
 width: 80%;
}
#titleCast img {
 width: 100%;
 margin-left: 0%;
}

#bn_talk {
 position: absolute;
 top: 46%;
 left: 105%;
 width: 30%;
 height: auto;
 z-index: 1001;
}
#bn_book {
 position: absolute;
 top: 46%;
 left: 135%;
 width: 30%;
 height: auto;
 z-index: 1001;
}
#bn_ginza {
 position: absolute;
 top: 28%;
 left: 48%;
 width: 36%;
 height: auto;
 z-index: 1001;
}
#bn_comment {
 position: absolute;
 top: 60%;
 left: 105%;
 width: 30%;
 height: auto;
 z-index: 1001;
}
#bn_yoshida {
 position: absolute;
 top: 60%;
 left: 135%;
 width: 30%;
 height: auto;
 z-index: 1001;
}
#bn_kosuge {
 position: absolute;
 top: 60%;
 left: 165%;
 width: 30%;
 height: auto;
 z-index: 1001;
}
#bn_hiroshima {
 position: absolute;
 top: 28%;
 left: 26.5%;
 width: 40%;
 height: auto;
 z-index: 1001;
}
#bn_london {
 position: absolute;
 top: 27%;
 left: 1px;
 width: 86%;
 height: auto;
 z-index: 1001;
}
#bn_amazonprime {
 position: absolute;
 top: 24%;
 left: 1px;
 width: 72%;
 height: auto;
 z-index: 1001;
}
#bn_netflix {
 position: absolute;
 top: 24%;
 left: 1px;
 width: 72%;
 height: auto;
 z-index: 1001;
}
#bn_shop {
 position: absolute;
 top: 32%;
 left: 1px;
 width: 72%;
 height: auto;
 z-index: 1001;
}
#bn_sche {
 position: absolute;
 top: 40%;
 left: 1px;
 width: 72%;
 height: auto;
 z-index: 1001;
}
#bn_voluntary {
 position: absolute;
 top: 48%;
 left: 1px;
 width: 72%;
 height: auto;
 z-index: 1001;
}
#bn_dvd {
 position: absolute;
 top: 56%;
 left: 1px;
 width: 72%;
 height: auto;
 z-index: 1001;
}
#bn_blog {
 position: absolute;
 top: 64%;
 left: 1px;
 width: 72%;
 height: auto;
 z-index: 1001;
}
#bn_mg {
 position: absolute;
 top: 75%;
 left: 109%;
 width: 44%;
 height: auto;
 z-index: 1001;
}
#bn_idee {
 position: absolute;
 top: 54%;
 left: 57%;
 width: 29%;
 height: auto;
 z-index: 1001;
}

#h-image {
 /*min-height:590px;*/
 text-align: right;
}
#copy {
 position: absolute;
 top: 3.5%;
 right: 1.5%;
 width: 42.5%;
 height: auto;
}
#word {
 position: absolute;
 bottom: 60px;
 left: 43%;
 width: 38%;
 height: auto;
}
#copyright {
 display: none;
}

#snsArea {
 position: relative;
 width: 100%;
 margin-top: 10px;
 padding-right: 10px;
 display: flex;
 justify-content: flex-end;
 align-items: center;
}
#snsArea ul.link {
 margin-right: 10px;
 display: flex;
 align-items: center;
}
#snsArea ul.link li {
 width: 40px;
 height: 30px;
 margin-right: 4px;
}
#snsArea .share {
 display: flex;
 justify-content: flex-end;
 align-items: center;
}
#snsArea .share li {
}
#snsArea .share li#like {
 margin-right: 4px;
}
#snsArea .share li#like .fb-like {
 height: 21px !important;
 overflow: hidden !important;
}

/* start */
#titleLogo img,
#copy img,
#word img {
 opacity: 0;
}

/*  ---------------------------
			comment
---------------------------  */

#comment {
 width: 100%;
 position: relative;
 margin: 240px 0 0;
 padding-top: 20px;
}
#comment .contbox {
 overflow: hidden;
 background: #f1f0f0 url(../img/bg_comment.gif) no-repeat 100% 0;
}
.comment_01 {
 padding-left: 28%;
 height: auto;
 position: relative;
 min-height: 240px;
}
.comment_02 {
 padding-right: 33%;
 height: auto;
 position: relative;
}
#comment #item_comment_01 {
 position: absolute;
 top: -20px;
 left: 50px;
}
#comment #item_comment_02 {
 position: absolute;
 top: 50px;
 right: -20px;
}
#comment .come {
 margin: 0 0 70px;
}
#comment .come h3 {
 margin: 0 0 1em;
}
#comment .come p {
 height: auto;
 color: #7a4208;
 font-size: 1em;
 line-height: 2em;
 letter-spacing: 0.1em;
 text-indent: 0;
 margin: 0 0 1em;
}

/*  ---------------------------
			intro
---------------------------  */

#intro {
 width: 100%;
 position: relative;
 margin: 240px 0 0;
}
#intro .contbox {
 overflow: hidden;
}
#intro .contbox .main {
 position: relative;
}
#item_introduction_01 {
 position: absolute;
 bottom: -150px;
 right: 50px;
 width: 110px;
 height: 218px;
 z-index: 2;
}
#pic_introduction_main {
 margin-bottom: 70px;
}
#pic_introduction_01 {
 float: right;
 width: 44%;
 height: auto;
}
#intro #txt_01 {
 text-align: justify;
}
#intro #txt_02 {
 width: 52%;
 text-align: justify;
}
#intro p {
 color: #000;
 font-size: 1.05em;
 line-height: 2em;
 letter-spacing: 0.1em;
 text-align: justify;
}
#intro .come_box {
 clear: both;
 padding: 88px 0 0px;
}
#intro .come_box .pic_introduction_02 {
 margin: 0 0 20px;
}
#intro .come_box p {
 height: auto;
 color: #7a4208;
 font-size: 1em;
 line-height: 2em;
 letter-spacing: 0.1em;
 margin: 0 0 1em;
}

/*  ---------------------------
			story
---------------------------  */

#story {
 width: 100%;
 position: relative;
 margin: 240px 0 0;
}
#story .contbox .main {
 position: relative;
}
#item_story_01 {
 position: absolute;
 bottom: -120px;
 right: 50px;
 width: 150px;
 height: 108px;
 z-index: 2;
}
#pic_story_main {
 margin-bottom: 70px;
}
#pic_story_main {
 margin-bottom: 70px;
}
#pic_story_01 {
}
#story #txt_01 {
 width: auto;
 text-align: justify;
 margin-bottom: 30px;
}
#story p {
 color: #000;
 font-size: 1.05em;
 line-height: 2em;
 letter-spacing: 0.1em;
 text-align: justify;
}

/*  ---------------------------
			cast
---------------------------  */

#cast {
 width: 100%;
 position: relative;
 margin: 240px 0 0;
}

#cast .contbox h2 {
 margin-bottom: 30px;
}
#cast_link {
 width: auto;
 overflow: hidden;
 position: relative;
 margin-bottom: 30px;
}
#cast_link span {
 display: inline-block;
 float: left;
}
#cast_link span a {
 display: block;
 width: auto;
 background: #fff;
}
#cast_link span a:hover {
 display: block;
 width: auto;
 background: #fff url(../img/bg_castlink.gif) repeat-x 0px 20px;
}
#cast_link span#cast_01 {
 width: 19.65%;
 margin-right: 5%;
}
#cast_link span#cast_02 {
 width: 17.92%;
 margin-right: 5%;
}
#cast_link span#cast_03 {
 width: 12.09%;
 margin-right: 5%;
}
#cast_link span#cast_04 {
 width: 8.09%;
 margin-right: 5%;
 margin-top: 10px;
}
#cast_link span#cast_05 {
 width: 18.35%;
 margin-top: 10px;
}
#cast_link span#cast_06 {
 width: 6.91%;
 margin-right: 5%;
 margin-top: 10px;
}
#cast_link span#cast_07 {
 width: 8.96%;
 margin-right: 5%;
}
#cast_link span#cast_08 {
 width: 10.86%;
 margin-right: 5%;
}
/*
#cast_link span#cast_01 { width:19.65%; margin-right:6.4%;}
#cast_link span#cast_02 { width:17.92%; margin-right:6.4%;}
#cast_link span#cast_03 { width:12.09%; margin-right:6.4%;}
#cast_link span#cast_04 { width:8.09%; margin-right:6.4%; margin-top:10px;}
#cast_link span#cast_05 { width:18.35%; margin-top:10px;}
#cast_link span#cast_06 { width:6.91%; margin-right:6.4%;}
#cast_link span#cast_07 { width:8.96%; margin-right:6.4%;}
*/

#cast .profile {
 padding: 60px 0 0;
 overflow: hidden;
 clear: both;
}
#cast .profile.notext {
 padding: 30px 0 0;
 overflow: hidden;
 clear: both;
}
#cast .profile .text_box.half {
 width: 55%;
 float: left;
}
#cast .profile .sub_box {
 width: 40%;
 float: right;
 margin: 50px 0 0;
}
.profile .text_box .name {
 margin: 0 0 20px;
}
.profile .text_box p {
 color: #000;
 font-size: 1.05em;
 line-height: 2em;
 letter-spacing: 0.1em;
 text-align: justify;
}
.profile .come_box {
 margin: 44px 0 40px;
 overflow: hidden;
}
#profile_01 .come_box p {
 width: 66%;
 height: auto;
 float: left;
 color: #7a4208;
 font-size: 1.1em;
 line-height: 2em;
 letter-spacing: 0.1em;
}
#profile_01 .come_box #item_cast_01 {
 width: 28%;
 height: auto;
 float: right;
}
#item_cast_02 {
 padding: 20px 0 0;
 text-align: center;
}

/*  ---------------------------
			staff
---------------------------  */

#staff {
 width: 100%;
 position: relative;
 margin: 240px 0 0;
}
#pic_staff_main {
 margin-bottom: 70px;
}
#staff .profile {
 margin: 0 0 40px;
 overflow: hidden;
 clear: both;
}
#staff .profile .text_box.half {
 width: 73%;
 float: left;
}
#staff .profile .sub_box {
 width: 22%;
 float: right;
 margin: 20px 0 0;
}
#staff .profile .text_box .name {
 margin: 0 0 10px;
}
#staff .profile .come_box {
 margin: 14px 0 0px;
 overflow: hidden;
}
#staff .profile .come_box p {
 height: auto;
 color: #7a4208;
 font-size: 1.1em;
 line-height: 2em;
 letter-spacing: 0.1em;
}
#themasong .text_box p {
 width: 70%;
 height: auto;
 float: left;
}
#pic_staff_01 {
 width: 27%;
 height: auto;
 float: right;
}

/*  ---------------------------
			movie
---------------------------  */

.moviex {
 padding: 0 0 0px;
 clear: both;
 overflow: hidden;
 background: #000;
 height: 588px; /*540+x*/
}

div.player {
 width: 960px;
 height: 540px;
 background: #000;
 margin: 0 auto 0px;
}

#nav-trailer {
 display: block;
 width: 960px;
 margin-left: -200px;
 margin: 0px auto;
 padding: 5px 0;
 overflow: hidden;
 -webkit-font-smoothing: antialiased;
}

#nav-trailer li {
 position: relative;
 display: block;
 float: left;
 width: 50%;
}

#nav-trailer li a {
 position: relative;
 top: 0;
 left: 0;
 right: 0;
 display: block;
 color: #000;
 background: #fff;
 line-height: 40px;
 text-align: center;
 margin: 0px 2px 4px;
 height: auto;
 font-size: 14px;
 font-weight: 900;
 letter-spacing: 0.1em;
 text-decoration: none;
 /*border-radius:3px;*/
 -o-transition: all 0.2s ease 0;
 -ms-transition: all 0.2s ease 0;
 -moz-transition: all 0.2s ease 0;
 -webkit-transition: all 0.2s ease 0;
 height: 48px;
}
#nav-trailer li a span {
 font-size: 9px;
}
#nav-trailer li a.short {
 font-size: 11px;
 line-height: 12px;
 padding: 2px 14px 2px;
 height: 28px;
}
#nav-trailer li.cur a {
 color: #fff;
 background: #333;
 cursor: default;
}
#nav-trailer li a:hover {
 background: #ffff00;
}
#nav-trailer li.cur a:hover {
 color: #fff;
 background: #333;
 cursor: default;
}

#nav-trailer li img.mark {
 position: absolute;
 left: 10px;
 top: 16px;
 margin-left: 0px;
}

#nav-trailer li a img.mark {
 display: none;
}

#nav-trailer li.cur a img.mark {
 display: block;
}

/*  ---------------------------
			credit
---------------------------  */

#credit {
 width: 100%;
 position: relative;
 min-width: 1000px;
 padding: 36px 0 36px;
}
#credit .contbox {
 width: 880px;
 padding: 0px;
 margin: 0 auto;
 position: relative;
 z-index: 1;
}
#credit .logo {
 width: 270px;
 height: 105px;
 margin: 0 auto 30px;
}
#credit .logo a,
#credit .logo span {
 width: 270px;
 height: 105px;
 display: block;
 overflow: hidden;
 text-indent: -9999px;
 background: url("../img/txt_credit_01.png") no-repeat 50% 0;
}
#credit .date {
 width: 414px;
 height: 42px;
 margin: 0 auto 30px;
 text-indent: -9999px;
 background: url("../img/txt_credit_02.png") no-repeat 50% 0;
}
#credit .copyright {
 font-size: 10px;
 color: #666;
 text-align: center;
}

/* page-top */
#page-top2 {
 position: fixed;
 bottom: 0px;
 right: 10px;
}
#page-top2 a {
 width: 60px;
 height: 60px;
 display: block;
 background: url("../img/btn_pagetop.png") no-repeat 0 0;
}
#page-top2 a:hover {
 background-position: 0px -60px;
}

/*  ---------------------------
			Navi
---------------------------  */

#navi {
 width: 180px;
 position: fixed;
 top: 0px;
 left: 0px;
 z-index: 1000;
 height: 100%;
 background: #fff;
}
#navi #navi_inner {
 padding: 48px 20px 20px;
 overflow: hidden;
 margin: 0 auto;
}
#navi #s_logo {
 width: 140px;
 height: 62px;
 margin: 0 0 26px;
}
#navi #s_logo blockquote {
 display: none;
}
#navi #s_logo a {
 display: block;
 width: 140px;
 height: 62px;
 text-indent: -9999px;
 background: url(../img/nav_logo.png) no-repeat 0px 0px;
}

#navi ul.gl_navi {
 overflow: hidden;
}
#navi ul.gl_navi li {
 margin: 0 0 15px;
}
#navi ul.gl_navi li a {
 display: block;
 width: 118px;
 height: 22px;
 text-indent: -9999px;
 background: url(../img/bg_nav_0929.png) no-repeat 0px 0px;
 cursor: pointer;
}
#navi ul.gl_navi li.home a {
 background-position: 0px 0px;
}
#navi ul.gl_navi li.news a {
 background-position: 0px -22px;
}
#navi ul.gl_navi li.trailer a {
 background-position: 0px -44px;
}
#navi ul.gl_navi li.intro a {
 background-position: 0px -66px;
}
#navi ul.gl_navi li.story a {
 background-position: 0px -88px;
}
#navi ul.gl_navi li.cast a {
 background-position: 0px -110px;
}
#navi ul.gl_navi li.staff a {
 background-position: 0px -132px;
}
#navi ul.gl_navi li.theaters a {
 background-position: 0px -154px;
}
#navi ul.gl_navi li.comment a {
 background-position: 0px -176px;
}

#navi ul.gl_navi li.home a:hover {
 background-position: -236px 0px;
}
#navi ul.gl_navi li.news a:hover {
 background-position: -236px -22px;
}
#navi ul.gl_navi li.trailer a:hover {
 background-position: -236px -44px;
}
#navi ul.gl_navi li.intro a:hover {
 background-position: -236px -66px;
}
#navi ul.gl_navi li.story a:hover {
 background-position: -236px -88px;
}
#navi ul.gl_navi li.cast a:hover {
 background-position: -236px -110px;
}
#navi ul.gl_navi li.staff a:hover {
 background-position: -236px -132px;
}
#navi ul.gl_navi li.theaters a:hover {
 background-position: -236px -154px;
}
#navi ul.gl_navi li.comment a:hover {
 background-position: -236px -176px;
}

#navi ul.gl_navi li.home.current a,
#navi ul.gl_navi li.home.current a:hover {
 background-position: -118px 0px;
}
#navi ul.gl_navi li.news.current a,
#navi ul.gl_navi li.news.current a:hover {
 background-position: -118px -22px;
}
#navi ul.gl_navi li.intro.current a,
#navi ul.gl_navi li.intro.current a:hover {
 background-position: -118px -66px;
}
#navi ul.gl_navi li.story.current a,
#navi ul.gl_navi li.story.current a:hover {
 background-position: -118px -88px;
}
#navi ul.gl_navi li.cast.current a,
#navi ul.gl_navi li.cast.current a:hover {
 background-position: -118px -110px;
}
#navi ul.gl_navi li.staff.current a,
#navi ul.gl_navi li.staff.current a:hover {
 background-position: -118px -132px;
}
#navi ul.gl_navi li.comment.current a,
#navi ul.gl_navi li.comment.current a:hover {
 background-position: -118px -176px;
}

/*  ---------------------------
			start
---------------------------  */

#item_introduction_01 {
 bottom: -100px;
 opacity: 0;
}
#item_story_01 {
 bottom: -70px;
 opacity: 0;
}
#item_cast_01 {
 opacity: 0;
}

@media screen and (max-width: 1200px) {
 #word {
  left: 46.5%;
 }
}