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

body {
margin: 0;
padding: 0;
background-color: #fff;
font-size:16px;
line-height:2.2em;
color:#262626;
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;
}

.nijimi-l {
font-family: "秀英にじみ明朝 L","DNPShueiNMinStd-L";
}

.yokobuto-m {
font-family: "秀英横太明朝 M","DNPShueiYMinStd-M";
}

.yokobuto-b {
font-family: "秀英横太明朝 B","DNPShueiYMinStd-B";
}

/* -------------------------------------------------
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:96px;
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;
}

#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/common/icon_fb_menu.png");
background-size:30px auto;
background-repeat: no-repeat;
background-position: left center;
padding:16px 46px;
}

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

#hero-container {
width:100%;
height: 61.25vw;
max-height: 980px;
position: relative;
}

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

#hero-container h1 {
position: absolute;
left:8%;
top:6%;
width:10.62%;
max-width: 170px;
z-index: 2;
}

#hero-container h2 {
position: absolute;
left:62.5%;
top:80%;
width:18.06%;
max-width: 289px;
z-index: 2;
}

#hero-pic {
position: absolute;
right:0%;
top:11.63%;
width:69.25%;
max-width: 1108px;
z-index: 1;
}

#hero-pic li:nth-of-type(1) {
display: none;
}

#hero-container h3 {
position: absolute;
right:2.375%;
top:4.285%;
width:27.375%;
max-width: 438px;
z-index: 3;
}

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

#credit-container {
padding:20px 50px 40px 50px;
text-align: center;
}

#credit-container h3#director,#credit-container h3#beling1,#credit-container h3#beling2,#credit-container h3#beling3 {
font-family: "秀英にじみ明朝 L","DNPShueiNMinStd-L";
line-height: 1.5em;
margin-bottom:20px;
text-align: left;
}

#credit-container h3#director {
font-size:24px;
margin-bottom:50px;
}

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

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

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

#credit-container h3#beling1 span,#credit-container h3#beling2 span,#credit-container h3#beling3 span {
display: inline-block;
}

#credit-container h3#beling1 span,#credit-container h3#beling3 span {
margin-right: 1em;
}

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

#roadshow span {
display: inline-block;
}

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

#screening {
display: inline-block;
text-align: center;
font-family: "秀英横太明朝 B","DNPShueiYMinStd-B";
font-size: 36px;
line-height: 1.2em;
background-color:#7b7a70;
color:#fff;
padding:20px 40px;
margin-bottom: 30px;
}

    
#screening span {
font-size: 0.8em;
}

ul.banner {
display: flex;
justify-content:space-between;
width: 100%;
max-width: 1040px;
margin: 0 auto;
}

ul.banner li {
width:48%;
max-width: 490px;
}

ul.banner li img {
width:100%;
height: auto;
border:solid 1px #c6c6c6;
}


/* -------------------------------------------------
footer
-------------------------------------------------*/
#footer-wrapper {
width:100%;
background-color: #f0ece1;
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{
border-radius: 100px;
background-color: #4f4f4f;
width: 68px;
height: 68px;
}

#footer-container ul#sns-icon li:hover {
background-color: #868686;
}

#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:100%;
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-container {
max-width: 1200px;
width:97%;
margin: 0 auto;
padding:120px 1.5% 60px 1.5%;
overflow: auto;
}

#intro-container p {
font-family: "秀英にじみ明朝 L","DNPShueiNMinStd-L";
font-size:18px;
line-height: 2.0em;
}

#intro-container h2 {
font-family: "秀英横太明朝 M","DNPShueiYMinStd-M";
font-size: 56px;
line-height: 1.4em;
text-align: right;
margin-bottom: 80px;
}

#intro-container h2 span {
display: inline-block;
}

#intro-section1 {
width: 100%;
height: 1050px;
position: relative;
}

#intro-section1 > img {
width:60%;
height: auto;
}

#intro-section1 p {
width:50%;
position: absolute;
right:0;
top:360px;
}

#intro-section1 .intro-copy {
position: absolute;
left:70px;
top:620px;
width:40.66%;
}

#intro-section1 .intro-illust {
position: absolute;
right:64px;
bottom: 0;
width:29.08%;
}

#intro-section1 .intro-copy img,
#intro-section1 .intro-illust img {
width:100%;
height: auto;
}

#intro-container h3 {
font-family: "秀英横太明朝 M","DNPShueiYMinStd-M";
font-size: 36px;
line-height: 1.6em;
margin-bottom: 60px;
}

#intro-container p.intro2 {
width:46%;
float: left;
}

#intro-container ul.intro-pic-list {
float:right;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
width:50%;
}

#intro-container ul.intro-pic-list li {
width:48%;
margin-bottom: 24px;
}


#intro-container ul.intro-pic-list li img {
vertical-align: bottom;
width: 100%;
height: auto;
}

/* -------------------------------------------------
staff
-------------------------------------------------*/
#staff-container {
max-width: 1200px;
width:97%;
margin: 0 auto;
padding:60px 1.5% 60px 1.5%;
}

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

#staff-container h3 {
font-family: "秀英横太明朝 M","DNPShueiYMinStd-M";
font-size: 30px;
text-align: center;
margin-bottom: 20px;
}

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

#staff-main {
overflow: auto;
margin-bottom: 50px;
}

#staff-main img {
float: left;
width: 35%;
height: auto;
}

#staff-main p {
float: right;
overflow: hidden;
width:59%;
font-family: "秀英にじみ明朝 L","DNPShueiNMinStd-L";
font-size: 16px;
line-height: 1.8em;
margin-top: -1.8em;
}

#staff-sub {
display: flex;
justify-content: space-between;
background-image: url(../images/content/staff_border.png);
background-position: center bottom;
background-repeat: no-repeat;
background-size: 62px auto;
margin-bottom: 60px;
}

#staff-sub dl {
width:45%;
}

#staff-sub dl dt {
font-family: "秀英横太明朝 M","DNPShueiYMinStd-M";
font-size: 24px;
margin-bottom: 20px;
}
#staff-sub dl dt span {
font-family: "秀英にじみ明朝 L","DNPShueiNMinStd-L";
margin-left: 1em;
font-size: 18px;
display: inline-block;
}

#staff-sub dl dd {
font-family: "秀英にじみ明朝 L","DNPShueiNMinStd-L";
font-size: 16px;
line-height: 1.8em;
}

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

#comments-container {
max-width: 1200px;
width:97%;
margin: 0 auto;
padding:0 0 60px 0;
background-color: #191e15;
margin-bottom: 60px;
}

#comments-container > img {
width: 100%;
height: auto;
}

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

.comments-article {
color: #e6e6e6;
margin: 0 80px 60px 80px;
}

.comments-article p {
font-family: "秀英にじみ明朝 L","DNPShueiNMinStd-L";
font-size: 16px;
line-height: 1.7em;
margin-bottom: 20px;
}

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

.comments-article h4 span {
font-family: "秀英にじみ明朝 L","DNPShueiNMinStd-L";
font-size: 0.6em;
display: inline-block;
margin-left: 1em;
opacity: 0.8;
}

#comment-notice {
color: #fff;
margin: 0 80px 20px 80px;
text-align: right;
font-size: 0.8em;
opacity: 0.8;
}

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

#trailer-container {
max-width: 1200px;
width:97%;
margin: 0 auto;
padding:60px 1.5% 60px 1.5%;
}

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

.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-container {
max-width: 1200px;
width:97%;
margin: 0 auto;
padding:60px 1.5% 140px 1.5%;
text-align: center;
}

#theater-container h2 {
font-family: "秀英横太明朝 B","DNPShueiYMinStd-B";
font-size: 40px;
line-height: 1.35em;
text-align: center;
margin-bottom: 60px;
}

#theater-container h2 span {
font-size: 0.8em;
}

#theater-container h3 {
font-family: "秀英横太明朝 B","DNPShueiYMinStd-B";
font-size: 30px;
line-height: 1.35em;
text-align: center;
margin-bottom: 40px;
}

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

.theater-table {
border-collapse: collapse;
border: none;
border-spacing: 0;
width: 100%;
margin-top: 20px;
margin-bottom: 60px;
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: #405a66;
color:#fff;
font-size:20px;
font-weight: bold;
text-decoration: none;
padding:18px 50px 18px 90px;
background-image:url("../images/content/icon_cart.png");
background-repeat: no-repeat;
background-position: 35px center;
background-size:26px auto;
}

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

#sns-container {
width: 100%;
background-color:#e7dfca;
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;
}

/* -------------------------------------------------
1280以下
-------------------------------------------------*/

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


}

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

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

.pc {
display:none;
}

.sp {
display:block;
}

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

#btn-close,#btn-menu {
right:15px;
top:15px;
}

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

#menu-flex ul.menu {
font-size:5vw
}

#menu-flex ul.menu li a {
padding:8px 10px;
}

#menu-flex ul.menu li:nth-of-type(1) a {
background-size:20px auto;
padding:8px 36px;
}

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

#hero-container {
width:100%;
height: 183.4vw;
max-height: initial;
}

#hero-container h1 {
position: absolute;
left:4.37%;
top:2.8%;
width:22.69%;
max-width: initial;
}

#hero-container h2 {
position: absolute;
left:46.4%;
top:7.58%;
width:45.31%;
max-width: initial;
}

#hero-pic {
position: absolute;
right:0%;
top:32.62%;
width:89.06%;
max-width: initial;
z-index: 1;
}

#hero-pic li,
#hero-pic li:nth-of-type(1) {
display: block;
}

#hero-container h3 {
position: absolute;
right:36.71%;
top:60.44%;
width:58.75%;
}

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

#credit-container {
padding:20px 4vw 20px 4vw;
}

#credit-container h3#director {
text-align: right;
font-size:5.5vw;
margin-bottom:40px;
}

#credit-container h3#beling1 {
text-align: center;
font-size:3vw;
}

#credit-container h3#beling2 {
text-align: center;
font-size:3vw;
}

#credit-container h3#beling3 {
text-align: center;
font-size:3vw;
}

#roadshow {
font-size: 6vw;
margin: 30px 0;
}

#screening {
font-size: 4.2vw;
padding:15px 30px;
margin-bottom: 20px;
}

/* -------------------------------------------------
introduction 1024
-------------------------------------------------*/
#intro-container {
width:91%;
padding:90px 4.5% 60px 4.5%;
}

#intro-container p {
font-size:4vw;
line-height: 2.0em;
}

#intro-container h2 {
font-size: 7vw;
text-align: right;
margin-bottom: 40px;
}

#intro-section1 {
width: 100%;
height: auto;
position: relative;
}

#intro-section1 > img {
width:100%;
height: auto;
margin-bottom: 30px;
}

#intro-section1 p {
width:100%;
position: relative;
right:0;
left:0;
top:inherit;
}

#intro-section1 .intro-copy {
position: relative;
left:inherit;
top:inherit;
width:80%;
margin-left: 6%;
margin-top: 50px;
margin-bottom: 50px;
}

#intro-section1 .intro-illust {
position: relative;
right:inherit;
bottom:inherit;
width:50%;
margin-left: 40%;
margin-bottom: 30px;
}

#intro-container h3 {
font-size: 5vw;
margin-bottom: 30px;
}

#intro-container p.intro2 {
width:100%;
float:none;
margin-bottom: 40px;
}

#intro-container ul.intro-pic-list {
float:none;
width:100%;
}

#intro-container ul.intro-pic-list li {
width:48%;
margin-bottom: 3vw;
}


#intro-container ul.intro-pic-list li img {
vertical-align: bottom;
width: 100%;
height: auto;
}

/* -------------------------------------------------
staff 1024
-------------------------------------------------*/
#staff-container {
width:91%;
padding:60px 4.5% 60px 4.5%;
}

#staff-container h2 {
font-size: 8vw;
text-align: center;
margin-bottom: 40px;
}

#staff-container h3 {
font-size: 6vw;
margin-bottom: 10px;
}

#staff-container h4 {
font-size: 4vw;
margin-bottom: 40px;
}

#staff-main {
margin-bottom: 40px;
}

#staff-main img {
float: none;
width: 70%;
margin: 0 15% 40px 15%;
}

#staff-main p {
float: none;
width:100%;
font-size: 3.8vw;
margin-top: 0;
}

#staff-sub {
display: block;
background-image:none;
margin-bottom: 40px;
}

#staff-sub dl {
width:100%;
margin-bottom: 30px;
}

#staff-sub dl dt {
font-size: 5.5vw;
margin-bottom: 20px;
}
#staff-sub dl dt span {
margin-left: 1em;
font-size: 4vw;
display: inline-block;
}

#staff-sub dl dd {
font-size: 3.5vw;
}

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

#comments-container {
width:91%;
padding:0 0 40px 0;
margin-bottom: 40px;
}

#comments-container > img {
width: 100%;
height: auto;
}

#comments-container h2 {
font-size: 6vw;
margin-bottom: 40px;
}

.comments-article {
color: #e6e6e6;
margin: 0 8vw 40px 8vw;
}

.comments-article p {
font-size: 3.5vw;
margin-bottom: 20px;
}

.comments-article h4 {
font-size: 5.5vw;
}

.comments-article h4 span {
font-size: 0.5em;
display: inline-block;
margin-left: 1em;
opacity: 0.8;
}

#comment-notice {
margin: 0 8vw 20px 8vw;
}

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

#trailer-container {
width:91%;
padding:60px 4.5% 60px 4.5%;
}

#trailer-container h2 {
font-size: 8vw;
margin-bottom: 40px;
}

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

#theater-container {
width:91%;
padding:60px 4.5% 100px 4.5%;
}

#theater-container h2 {
font-size: 6.7vw;
margin-bottom: 40px;
}

#theater-container h2 span {
font-size: 0.8em;
}

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

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

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

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


/* チケット */

#theater-container h5 {
font-size:6vw;
margin-bottom: 30px;
}

a.btn-ticket {
font-size:0.8em;
padding:14px 30px 14px 60px;
background-position: 28px center;
background-size:18px auto;
line-height: 1.2em;
}

}

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


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

ul.banner {
display: block;
width: 100%;
}

ul.banner li {
width:100%;
max-width:100%;
text-align: center;
margin-bottom: 15px;
}

/* -------------------------------------------------
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 {
width:44px;
height: 44px;
}

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

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

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

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

}