@charset "euc-jp";
/* CSS Document */

body {
margin: 0;
padding: 0;
background-color: #fff;
font-size:16px;
line-height:2.2em;
color:#353535;
font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
font-feature-settings: "palt";
letter-spacing: 0.1em;
}

p {
margin-bottom:1.5em;
}

a:hover img {
/*filter:brightness(80%);*/
}

.pc {
display:block;
}

.sp {
display:none;
}

img{
-webkit-backface-visibility: hidden;
}

/* -------------------------------------------------
menu
-------------------------------------------------*/

#overlay {
position:fixed;
top:0;
left:0;
width:100%;
height:100vh;
background-color:#8d8d8d;
z-index:15;
display:none;
}

#menu-wrapper {
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
z-index:15;
display:none;
}

#menu-flex {
display: flex;
flex-direction: column; /* 子要素をflexboxにより縦方向に揃える */
justify-content: center; /* 子要素をflexboxにより中央に配置する */
align-items: center;  /* 子要素をflexboxにより中央に配置する */
width: 100%;
height:100%;
text-align: center;
}

#inner {
width:100%;
max-width:1200px;
}

#btn-close {
position:absolute;
right:20px;
top:20px;
z-index:100;
cursor: pointer;
}


#btn-menu {
position:fixed;
top:20px;
right:20px;
z-index:10;
display:none;
cursor: pointer;
}

#btn-menu img,
#btn-close img {
width:102px;
height:auto;
}

#menu-flex ul.menu {
color:#fff;
font-family: "秀英にじみ明朝 L","DNPShueiNMinStd-L";
font-size:30px;
z-index:30px;
display: block;
max-width: 12em;
margin: 0 auto;
padding-bottom: 30px;
border-bottom: solid 1px #fff;
}

#menu-flex ul.menu li a {
color:#ffffff;
text-decoration: none;
padding:10px 20px;
display: inline-block;
font-weight: normal;
letter-spacing: 0.1em;
}

#menu-flex ul.menu li:nth-of-type(1) a {
background-image: url("../images/icon_fb_menu.png");
background-size:30px auto;
background-repeat: no-repeat;
background-position: left center;
padding:16px 46px;
}

#menu-flex h3 {
font-family: "秀英にじみ明朝 L","DNPShueiNMinStd-L";
color:#fff;
text-align: center;
font-size:28px;
margin:30px 0 20px 0;
}

#menu-flex ul.sns li {
display:inline-block;
padding:0 10px;
}

/* -------------------------------------------------
hero
-------------------------------------------------*/
#hero-wrapper,#credit-wrapper {
position: relative;
}

#hero-container1 {
width:100%;
height:456px;
background-image:url(../images/hero_bg1_pc.jpg);
background-repeat:no-repeat;
background-position: left top;
background-size:auto 100%;
}

#hero-container2 {
width:100%;
height:249px;
background-image:url(../images/hero_bg2.jpg);
background-repeat:no-repeat;
background-position: center bottom;
background-size:cover;
}

#hero-container3 {
width:100%;
height:334px;
background-image:url(../images/hero_bg3.jpg);
background-repeat:no-repeat;
background-position: right bottom;
background-size:auto 100%;
}

#hero-wrapper h1 {
position: absolute;
right:9%;
top:103px;
width:40vw;
max-width: 595px;
z-index: 2;
}

#hero-wrapper h1 img,#hero-wrapper>h2 img,#hero-wrapper h3 img {
width:100%;
height: auto;
}

#hero-wrapper>h2 {
position: absolute;
right:13%;
top:340px;
width:30vw;
max-width:357px;
}

#hero-wrapper h3#copy1 {
position: absolute;
left:48px;
top:48px;
width:60px;
}

#hero-wrapper h3#copy2 {
position: absolute;
right:14%;
top:508px;
width:238px;
z-index: 2;
}

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

#credit-container {
position: absolute;
left:48px;
top:44px;
}

#credit-container h3#award {
font-family: "秀英角ゴシック金 B","DNPShueiGoKinStd-B";
font-size:18px;
color:#6c6c6c;
line-height: 1.5em;
margin-bottom:30px;
}

#credit-container h3#beling {
font-family: "秀英にじみ明朝 L","DNPShueiNMinStd-L";
font-size:16px;
color:#1d1d1d;
line-height: 1.5em;
margin-bottom:20px;
}

#credit-container h3#credit {
font-family: "秀英にじみ明朝 L","DNPShueiNMinStd-L";
font-size:14px;
color:#1d1d1d;
line-height: 1.5em;
margin-bottom:20px;
}

#beling span,#actor span,#director span {
display: inline-block;
margin-right: 0.8em;
}

#roadshow {
font-family: "秀英横太明朝 B","DNPShueiYMinStd-B";
font-size: 44px;
line-height: 1.3em;
letter-spacing: 0;
color: #353535;
text-align: center;
margin: 50px 20px;
}

#roadshow span {
display: inline-block;
}

#roadshow span.small {
font-size: 0.8em;
display: inline;
}

/* -------------------------------------------------
banner
-------------------------------------------------*/
#banner-container {
display: flex;
justify-content: space-between;
width: 94%;
max-width:1000px;
margin: 0 auto;
}

.banner {
width:48%;
}

.banner img {
width: 100%;
height: auto;
border: solid 1px #c6c6c6;
margin-bottom: 40px;
}

/* -------------------------------------------------
footer
-------------------------------------------------*/
#footer-wrapper {
width:100%;
background-color: #f0f8ff;
padding:50px 0 50px 0;
}

#footer-container {
margin:0 auto;
text-align: center;
width:100%;
max-width:1000px;
margin-bottom:30px;
}

#footer-container h3 {
font-family: "秀英にじみ明朝 L","DNPShueiNMinStd-L";
font-size:34px;
color:#353535;
margin-bottom: 30px;
}

#footer-container h3 img {
width:245px;
height:auto;
}

#footer-container ul#sns-icon {
margin-bottom:26px;
}

#footer-container ul#sns-icon li,
#footer-container ul#widget li{
display: inline-block;
margin:0 10px;
}

#footer-container ul#widget {
margin-bottom: 20px;
}

#footer-container ul#widget li {
width:300px;
height: 360px;
margin-bottom: 20px;
}

#footer-container ul#sns-icon li img {
width:68px;
height: auto;
}

#footer-container p {
margin-bottom: 0;
color: #353535;
font-weight: bold;
line-height: 1.4em;
padding:0 20px;
}

#footer-container p span {
display: inline-block;
}

/* -------------------------------------------------
introduction
-------------------------------------------------*/

#intro-hero {
width:100%;
height: 56.25vw;
max-height: 900px;
overflow: hidden;
}

#intro-hero img {
width: 100%;
height: auto;
object-fit: cover;
}

#intro-container {
max-width:840px;
margin: 0 auto;
padding:80px 30px 30px 30px;
}

#intro-container h3 {
margin-bottom: 40px;
}

#intro-container p {
font-size:20px;
line-height: 1.8em;
font-family: "秀英横太明朝 B","DNPShueiYMinStd-B";
}

ul.pics {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
width:99%;
padding: 0.5%;
}

ul.pics li {
width:24%;
padding:0.5%;
}

ul.pics li  img {
width: 100%;
height: auto;
}

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

#staff-container {
max-width:1060px;
padding:60px 30px 20px 30px;
margin: 0 auto;
}

#staff-container h3 {
font-size: 34px;
font-family: "秀英にじみ明朝 L","DNPShueiNMinStd-L";
margin-bottom: 30px;
text-align: center;
}

.staff-detail {
margin-bottom: 30px;
overflow: auto;
}

.staff-detail > img {
float: left;
margin:0 30px 30px 0;
}

.staff-detail h4 {
font-family: "秀英横太明朝 B","DNPShueiYMinStd-B";
font-size: 30px;
margin-bottom: 20px;
}

.staff-detail h4 span.job {
font-family: "秀英角ゴシック金 B","DNPShueiGoKinStd-B";
font-size:18px;
display: inline-block;
margin-right: 10px;
}

.staff-detail h4 span.kana {
font-size:18px;
}

.staff-detail p {
font-family: "秀英横太明朝 M","DNPShueiYMinStd-M";
font-size:16px;
line-height: 1.75em;
}

#staff-container > h4 {
font-family: "秀英角ゴシック金 B","DNPShueiGoKinStd-B";
font-size:20px;
text-align: center;
margin-bottom: 30px;
}

#staff-container dl {
display:flex;
flex-wrap: wrap;
margin-bottom: 50px;
}

#staff-container dl dt.even,
#staff-container dl dd.even {
background-color: #f0f8ff;
}

#staff-container dl dt,#staff-container dl dd {
padding:20px;
}

#staff-container dl dt {
width: 4em;
color:#61aef1;
font-weight: bold;
}

#staff-container dl dd {
width:calc(100% - (4em + 80px));
font-weight: bold;
}

#staff-container dl dd span.sub {
font-weight: normal;
font-size:14px;
opacity: 0.8;
display: inline-block;
margin-left: 0.5em;
}

/* -------------------------------------------------
statement
-------------------------------------------------*/

#statement-container {
max-width:820px;
padding:60px 30px 80px 30px;
margin: 0 auto;
}

#statement-container h3 {
font-size: 34px;
font-family: "秀英にじみ明朝 L","DNPShueiNMinStd-L";
margin-bottom: 30px;
text-align: center;
}

#statement-container h4 {
font-family: "秀英横太明朝 B","DNPShueiYMinStd-B";
font-size: 24px;
margin-bottom: 20px;
}

#statement-container p {
font-family: "秀英横太明朝 M","DNPShueiYMinStd-M";
font-size:16px;
line-height: 2.0em;
}

/* -------------------------------------------------
comments
-------------------------------------------------*/

#comments-wrapper {
width:100%;
background-color: #64abea;
color:#fff;
}

#comments-container {
max-width:900px;
padding:80px 30px 80px 30px;
margin: 0 auto;
}

#comments-container h3 {
font-size: 34px;
font-family: "秀英にじみ明朝 L","DNPShueiNMinStd-L";
margin-bottom: 20px;
text-align: center;
}

#comments-container .comment-notice {
text-align: center;
font-size:12px;
margin-bottom: 60px;
opacity: 0.8;
}

.comment {
margin-bottom: 60px;
}

.comment p {
font-family: "秀英横太明朝 M","DNPShueiYMinStd-M";
font-size: 18px;
line-height: 2.0em;
margin-bottom: 1.0em;
}

.comment h4 {
font-family: "秀英横太明朝 M","DNPShueiYMinStd-M";
font-size: 30px;
}

.comment h4 img {
display: inline-block;
vertical-align: baseline;
margin:0 0.1em -0.1em 0;
width:30px;
height: auto;
-webkit-backface-visibility: hidden;
}

.comment h4 span.job {
font-family: "秀英角ゴシック金 B","DNPShueiGoKinStd-B";
font-size: 0.5em;
opacity: 0.8;
display: inline-block;
margin-left: 1.0em;
}

/* -------------------------------------------------
trailer
-------------------------------------------------*/

#trailer-container {
max-width:1060px;
padding:80px 30px 100px 30px;
margin: 0 auto;
}

#trailer-container h3 {
font-size: 34px;
font-family: "秀英にじみ明朝 L","DNPShueiNMinStd-L";
margin-bottom: 40px;
text-align: center;
}

.youtube {
position: relative;
width: 100%;
padding-top: 56.25%;
}

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

/* -------------------------------------------------
theater
-------------------------------------------------*/

#theater-wrapper {
width:100%;
background-color: #f0f8ff;
}

#theater-container {
max-width:1060px;
padding:80px 30px 120px 30px;
margin: 0 auto;
text-align: center;
}

#theater-container h3 {
font-size: 34px;
font-family: "秀英にじみ明朝 L","DNPShueiNMinStd-L";
margin-bottom: 50px;
text-align: center;
}

#theater-container #map img {
width:100%;
max-width: 650px;
height: auto;
margin-bottom: 30px;
}

#theater-container h4 {
font-size: 40px;
font-family: "FOT-筑紫ゴシック Pro H","TsukuGoPro-H";
margin-bottom: 30px;
}

#theater-container h4.theater-header {
font-size: 40px;
font-family: "FOT-筑紫ゴシック Pro H","TsukuGoPro-H";
margin-bottom: 40px;
}

#theater-container p {
font-family: "秀英横太明朝 M","DNPShueiYMinStd-M";
font-size: 18px;
line-height: 1.7em;
margin-bottom: 40px;
}

/* 上映劇場用テーブル */

.theater-table {
border-collapse: collapse;
border: none;
border-spacing: 0;
width: 100%;
margin-top: 20px;
margin-bottom: 40px;
font-size:1.0em;
line-height:1.4em;
}

.theater-table td {
padding: 1.5em 1em;
background-color: #fff;
text-align:center;
color:#101010;
}

.theater-table tr:nth-child(odd) td {
background-color:#f5f5f5;
}

.theater-table tr.header td {
background-color: #3f3a39;
font-weight: bold;
color:#fff;
}

.theater-table td a {
color:#1cafca;
text-decoration: none;
}

.theater-table td a:hover {
text-decoration: underline;
}

/* チケット */

#theater-container h5 {
font-family: "FP-ヒラギノ角ゴオールド StdN W7","FP-HiraSansOldStdN-W7";
font-size:30px;
line-height: 1.3em;
margin-bottom: 30px;
}

#theater-container h5 span {
font-size:0.6em;
}

a.btn-ticket {
display:inline-block;
border-radius: 100px;
background-color: #50b3d7;
color:#fff;
font-size:20px;
font-weight: bold;
text-decoration: none;
padding:18px 50px 18px 90px;
background-image:url("../images/icon_download_w.png");
background-repeat: no-repeat;
background-position: 35px center;
background-size:26px auto;
}

/* -------------------------------------------------
sns share
-------------------------------------------------*/

#sns-container {
width: 100%;
background-color:#f0f8ff;
text-align:center;
position:fixed;
left:0;
bottom:0;
padding:4px;
z-index: 3;
}

ul#social {
width: 100%;
align-items: center;
}

#social li {
display:inline-block;
height:27px;
vertical-align: bottom;
padding:0 0;
overflow: hidden;
}

/* -------------------------------------------------
1300以下
-------------------------------------------------*/

@media only screen and (max-width: 1300px) {
#hero-container1 {
background-position: left -80px top;
}

}

/* -------------------------------------------------
1024以下
-------------------------------------------------*/

@media only screen and (max-width: 1024px) {

.pc {
display:none;
}

.sp {
display:block;
}

/* -------------------------------------------------
menu 1240
-------------------------------------------------*/

#btn-close {
right:10px;
top:10px;
}

#btn-menu {
position:fixed;
top:10px;
right:10px;
}

#btn-menu img,
#btn-close img {
width:70px;
}

#menu-flex ul.menu {
font-size:20px;
padding-bottom: 20px;
}

#menu-flex ul.menu li a {
padding:10px 10px;
display: inline-block;
line-height: 1.0em;
}

#menu-flex ul.menu li:nth-of-type(1) a {
background-size:24px auto;
padding:16px 34px;
}

#menu-flex h3 {
font-size:20px;
margin:30px 0 20px 0;
}

#menu-flex ul.sns li {
display:inline-block;
padding:0 7px;
}

#menu-flex ul.sns li img{
width:45px;
auto;
}

/* -------------------------------------------------
hero 1024
-------------------------------------------------*/

#hero-container1 {
height:62.5vw;
background-image:url(../images/hero_bg1_sp.jpg);
background-size:cover;
}

#hero-container2 {
height:49vw;
}

#hero-container3 {
height:46.5vw;
}

#hero-wrapper h1 {
left:6vw;
top:52vw;
width:36.8vw;
}

#hero-wrapper>h2 {
left:8.75vw;
top:93.28vw;
width:3.43vw;
}

#hero-wrapper h3#copy1 {
left:5.46vw;
top:5.46vw;
width:9.53vw;
}

#hero-wrapper h3#copy2 {
right:8.75vw;
top:74.68vw;
width:36vw;
}

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

#credit-container {
position:relative;
left:0;
top:0;
text-align: center;
margin:30px 20px;
}

#credit-container h3#award {
font-size:20px;
margin-bottom:30px;
}

#credit-container h3#award li {
margin-bottom: 6px;
}

#credit-container h3#award span {
display: inline-block;
}

#credit-container h3#beling {
font-size:16px;
}

#credit-container h3#credit {
font-size:12px;
}

#beling span {
display:block;
margin-right: 0;
}

#beling br {
display: none;
}

#roadshow {
font-size: 36px;
line-height: 1.3em;
margin: 30px 20px;
}

#roadshow span {
display: inline-block;
}

#roadshow span {
display: inline-block;
}

/* -------------------------------------------------
introduction 1024
-------------------------------------------------*/

#intro-hero {
height: 135vw;
max-height: initial;
}

#intro-hero img {
height: 100%;
width: auto;
}

#intro-container {
padding:40px 30px 30px 30px;
}

#intro-container h3 {
margin-bottom: 30px;
}

#intro-container h3 img {
width:85%;
max-width:500px;
height: auto;
}

#intro-container p {
font-size:16px;
}

ul.pics {
width:96%;
padding: 2%;
margin-bottom: 20px;
}

ul.pics li {
width:48%;
padding:0.5%;
}

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

#staff-container {
padding:60px 30px 20px 30px;
}

#staff-container h3 {
font-size: 30px;
margin-bottom: 30px;
}

.staff-detail {
margin-bottom: 10px;
}

.staff-detail > img {
float: none;
width:70%;
max-width: 200px;
display: block;
margin: 0 auto;
padding-bottom: 30px;
}

.staff-detail h4 {
font-size: 24px;
margin-bottom: 15px;
text-align: center;
}

.staff-detail h4 span.job {
font-size: 16px;
display: block;
margin-right: 0;
}

.staff-detail h4 span.kana {
font-size: 16px;
}

.staff-detail p {
font-size:14px;
}

#staff-container > h4 {
font-size:18px;
margin-bottom: 30px;
}

#staff-container dl {
display:block;
margin-bottom: 40px;
line-height: 1.4em;
}

#staff-container dl dt.even,
#staff-container dl dd.even {
background-color: #fff;
}

#staff-container dl dt,#staff-container dl dt.even {
background-color: #f0f8ff;
width: calc(100% - 20px);
}

#staff-container dl dt,#staff-container dl dd {
font-size:14px;
padding:10px;
width: calc(100% - 20px);
}

#staff-container dl dd {
width:100%;
background-color: #fff;
}

#staff-container dl dd span.sub {
font-size:12px;
margin: 0;
}

/* -------------------------------------------------
statement 1024
-------------------------------------------------*/

#statement-container {
padding:30px 30px 60px 30px;
}

#statement-container h3 {
font-size: 30px;
margin-bottom: 30px;
}

#statement-container h4 {
font-size: 20px;
margin-bottom: 20px;
}

#statement-container p {
font-size:14px;
line-height: 2.0em;
}

/* -------------------------------------------------
comments 1024
-------------------------------------------------*/

#comments-wrapper {
width:100%;
background-color: #64abea;
color:#fff;
}

#comments-container {
padding:60px 30px 40px 30px;
}

#comments-container h3 {
font-size: 30px;
margin-bottom: 20px;
}

#comments-container .comment-notice {
margin-bottom: 40px;
}

.comment {
margin-bottom: 50px;
}

.comment p {
font-size: 16px;
line-height: 1.8em;
}

.comment h4 {
font-size: 24px;
}

.comment h4 img {
margin:0 0.1em -0.05em 0;
width:24px;
}

.comment h4 span.job {
display: block;
margin-left:0;
font-size: 0.6em;
}

/* -------------------------------------------------
trailer 1024
-------------------------------------------------*/

#trailer-container {
max-width:1060px;
padding:40px 30px 50px 30px;
margin: 0 auto;
}

#trailer-container h3 {
font-size: 30px;
margin-bottom: 30px;
}

/* -------------------------------------------------
theater 1024
-------------------------------------------------*/

#theater-container {
padding:50px 20px 90px 20px;
}

#theater-container h3 {
font-size: 30px;
margin-bottom: 30px;
}

#theater-container #map img {
margin-bottom: 30px;
}

#theater-container h4 {
font-size: 26px;
margin-bottom: 10px;
}

#theater-container h4.theater-header {
font-size: 26px;
margin-bottom: 30px;
}

#theater-container p {
font-size: 16px;
line-height: 1.5em;
margin-bottom: 40px;
}

/* 上映劇場用テーブル */

.theater-table {
margin-top: 20px;
margin-bottom: 40px;
font-size:0.8em;
}

.theater-table td {
padding: 0.8em 0.6em;
}

/* チケット */

#theater-container h5 {
font-size: 1.4em;
margin-bottom: 20px;
}

#theater-container h5 span {
font-size:0.6em;
}

a.btn-ticket {
font-size:0.8em;
padding:14px 30px 14px 60px;
background-image:url("../images/icon_download_w.png");
background-repeat: no-repeat;
background-position: 28px center;
background-size:18px auto;
line-height: 1.2em;
}

}


/* -------------------------------------------------
640以下
-------------------------------------------------*/


@media only screen and (max-width: 640px) {

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

#credit-container h3#award {
font-size:15px;
}

#credit-container h3#award li {
margin-bottom: 6px;
}

#credit-container h3#beling {
font-size:13px;
}

#credit-container h3#credit {
font-size:10px;
}

#roadshow {
font-size: 26px;
}

/* -------------------------------------------------
banner 640
-------------------------------------------------*/
#banner-container {
display: block;
margin-bottom: 20px;
}

.banner {
width:100%;
}

.banner img {
margin-bottom: 20px;
}

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

#footer-wrapper {
width:100%;
padding:30px 0 40px 0;
}

#footer-container {
margin-bottom:20px;
}

#footer-container h3 {
font-size:24px;
margin-bottom: 20px;
}

#footer-container ul#sns-icon {
margin-bottom:20px;
}

#footer-container ul#sns-icon li,
#footer-container ul#widget li{
margin:0 6px;
}

#footer-container ul#sns-icon li img {
width:44px;
height: auto;
}

#footer-container ul#widget {
margin-bottom: 10px;
}

#footer-container ul#widget li {
margin-bottom: 20px;
}

#footer-container p {
font-size:14px;
}

/* -------------------------------------------------
introduction 1024
-------------------------------------------------*/

ul.pics {
width:100%;
padding: 0;
margin-bottom: 30px;
}

ul.pics li {
width:100%;
padding:0.5%;
text-align: center;
}

ul.pics li img {
width:60%;
max-width: 400px;
}

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

#staff-container {
padding:20px 30px 20px 30px;
}

}