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

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

p {
margin-bottom:1.5em;
}

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

.pc {
display:block;
}

.sp {
display:none;
}

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

#overlay {
position:fixed;
top:0;
left:0;
width:100%;
height:100vh;
background-color:#000;
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: "FP-ヒラギノ角ゴオールド StdN W8","FP-HiraSansOldStdN-W8";
font-size:36px;
z-index:30px;
margin-bottom:30px;
}

#menu-flex ul.menu li a {
color:#fff;
text-decoration: none;
padding:20px 30px;
border-bottom: solid 1px #555454;
display: inline-block;
}

#menu-flex h3 {
font-family: "FP-ヒラギノ角ゴオールド StdN W8","FP-HiraSansOldStdN-W8";
color:#fff;
text-align: center;
font-size:28px;
margin-bottom:20px;
}

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


/* -------------------------------------------------
main
-------------------------------------------------*/

#content-wrapper {
width:100%;
max-width:1000px;
margin:0 auto;
text-align: center;
}

#content-wrapper img {
width:100%;
height:auto;
}

/* 比率を固定 */

#main-wrapper {
position: relative;
width: 100%;
margin-bottom:29px;
}

#main-wrapper:before {
content:"";
display:block;
padding-top:150%; /* 比率指定 */
}

#main-container {
position:absolute;
top:0;
left:0;
bottom:0;
right:0;
}

/* 比率を固定 end */

#main-container h1.sayonara {
position: absolute;
width:19.9%;
top:2.26%;
right:0;
}

#main-container h1.terebi {
position: absolute;
width:20.9%;
top:3.33%;
left:0;
}

#main-container h2 {
position: absolute;
width:4.3%;
top:17.13%;
left:72.6%;
}

#main-container h3 {
position: absolute;
width:14.5%;
top:47.86%;
left:2.9%;
}

#beling {
display: inline-block;
width:66.3%;
margin-bottom:32px;
}

#roadshow {
display: inline-block;
width:84.3%;
margin-bottom:20px;
}

#special-pg {
display: inline-block;
width:100%;
padding:17px 0;
margin-bottom:15px;
}

#special-pg img {
width:94%;
max-width: 1060px;
height: auto;
}

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

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

#intro-pic {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}

#intro-pic li {
width:50%;
position: relative;
}

#intro-pic li img:nth-of-type(1) {
position: absolute;
left:0;
top:0;
}

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

#intro-container {
width:100%;
max-width:1200px;
margin:0 auto;
overflow: auto;
padding:50px 0;
}

#intro-container h2 {
display: block;
float: right;
width:14.16%;
margin:0 5% 0 0;
}

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

#intro-container p {
font-family: "FP-ヒラギノ角ゴオールド StdN W7","FP-HiraSansOldStdN-W7";
font-size:22px;
line-height: 38px;
color:#0b4a8b;
display: block;
float: left;
width:70.83%;
margin:20px 0 0 5%;
}

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

#comment-wrapper {
width:100%;
background-color:#00455b;
background-image:url("../images/comment_bg.jpg");
background-repeat: no-repeat;
background-size: 100% auto;
background-position: center top;
padding:90px 0;
}

#comment-container {
width:100%;
max-width:800px;
margin:0 auto;
padding:0 12.5%;
}

#comment-container h2 {
font-family: "FP-ヒラギノ角ゴオールド StdN W8","FP-HiraSansOldStdN-W8";
text-align:center;
font-size:72px;
line-height: 1em;
color:#fff;
margin-bottom:80px;
}

.cmt h3 {
margin-bottom:20px;
}

.cmt h3 span.name {
font-family: "FP-ヒラギノ角ゴオールド StdN W8","FP-HiraSansOldStdN-W8";
font-size:38px;
color:#fff;
display: inline-block;
margin-right: 0.5em;
}

.cmt h3 span.work {
font-family: "FP-ヒラギノ角ゴオールド StdN W7","FP-HiraSansOldStdN-W7";
font-size:24px;
color:#48bdc1;
display: inline-block;
}

.cmt p {
font-size:18px;
line-height: 30px;
margin-bottom: 60px;
}

p.notice {
text-align: right;
opacity: 0.8;
}

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

#staff-container {
width:100%;
max-width:800px;
margin:0 auto;
padding:90px 12.5% 70px 12.5%;
}

#staff-container h2 {
font-family: "FP-ヒラギノ角ゴオールド StdN W8","FP-HiraSansOldStdN-W8";
text-align:center;
font-size:72px;
line-height: 1em;
color:#191919;
margin-bottom:80px;
}

.staff h3 {
margin-bottom:15px;
}

.staff h3 span.work {
font-family: "FP-ヒラギノ角ゴオールド StdN W7","FP-HiraSansOldStdN-W7";
font-size:24px;
color:#960c0c;
display: inline-block;
margin-right: 0.5em;
}

.staff h3 span.name {
font-family: "FP-ヒラギノ角ゴオールド StdN W8","FP-HiraSansOldStdN-W8","FOT-筑紫ゴシック Pro H","TsukuGoPro-H";
font-size:38px;
color:#191919;
display: inline-block;
}

.staff h3 span.kana {
font-family: "FP-ヒラギノ角ゴオールド StdN W8","FP-HiraSansOldStdN-W8";
font-size:18px;
color:#191919;
display: inline-block;
}

.staff p {
font-size:16px;
line-height: 28px;
color:#191919;
margin-bottom: 40px;
}

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

#trailer-wrapper {
width:90%;
background-color:#191919;
padding:70px 5%;
}

#trailer-container {
width:100%;
max-width:1300px;
margin:0 auto;
}

#trailer-container h2 {
font-family: "FP-ヒラギノ角ゴオールド StdN W8","FP-HiraSansOldStdN-W8";
text-align:center;
font-size:72px;
line-height: 1em;
color:#fff;
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 {
width:100%;
max-width:1000px;
margin:0 auto;
padding:90px 12.5% 70px 12.5%;
text-align: center;
}

#theater-container h2 {
font-family: "FP-ヒラギノ角ゴオールド StdN W8","FP-HiraSansOldStdN-W8";
font-size:72px;
line-height: 1em;
color:#191919;
margin-bottom:80px;
}

#theater-container h3 {
display: inline-block;
width:84.3%;
margin-bottom:20px;
}

#theater-container h4 {
display: inline-block;
width:90%;
padding:17px 0;
margin-bottom:15px;
}

#theater-container h3 img,
#theater-container h4 img {
width:100%;
height: auto;
}

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

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

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

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

.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: #0096c1;
	font-weight: bold;
	color:#fff;
}

.theater-table td a {
	color:#0096c1;
	text-decoration: none;
}

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

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

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

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

#footer-container h3 {
font-family: "FP-ヒラギノ角ゴオールド StdN W8","FP-HiraSansOldStdN-W8";
font-size:28px;
color:#fff;
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: 15px;
}

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

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

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

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

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

#sns-container {
	width: 100%;
	background-color:#242424;
	text-align:center;;
	padding:14px 0 7px 0;
	position:fixed;
	left:0;
	bottom:0;
}

#social {
	margin:0;
}

#social li {
	display:inline-block;
	padding:0 5px 0 5px;
}

#social li.eiga {
	margin-right:-20px;
}

/* -------------------------------------------------
1200以下
-------------------------------------------------*/

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

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

#intro-container {
width:100%;
max-width:none;
padding:5vw 0;
}

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

#comment-wrapper {
padding:8vw 0;
}

#comment-container {
width:80%;
padding:0 10%;
}

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

#staff-container {
width:80%;
padding:8vw 10% 6vw 10%;
}

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

#trailer-wrapper {
width:90%;
padding:8vw 5%;
}

#trailer-container {
width:100%;
max-width:none;
}

#theater-container h3 {
width:97.2%;
}

#theater-container h4 {
width:94%;
max-width: 1060px;
}

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

#theater-container {
width:80%;
max-width:none;
padding:8vw 10% 6vw 10%;
}

}

/* -------------------------------------------------
800以下
-------------------------------------------------*/


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

.pc {
display:none;
}

.sp {
display:block;
}

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

#intro-pic li {
width:100%;
display: block;
}

#intro-container h2 {
display: block;
float: right;
width:7%;
margin:0 6% 0 0;
}

#intro-container p {
font-size:22px;
line-height: 38px;
width:78%;
margin:3vw 0 0 5%;
}

}

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

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

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

#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;
margin-bottom:30px;
}

#menu-flex ul.menu li a {
padding:10px 20px;
border-bottom: solid 1px #555454;
display: inline-block;
}

#menu-flex h3 {
font-size:18px;
margin-bottom:20px;
}

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

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

/* -------------------------------------------------
main 640
-------------------------------------------------*/

a.btn-program {
font-size:14px;
padding:14px 30px 14px 60px;
background-image:url("../images/icon_pdf.png");
background-repeat: no-repeat;
background-position: 28px center;
background-size:18px auto;
margin-bottom:30px;
}

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

#intro-container {
padding:12vw 0 14vw 0;
}


#intro-container h2 {
width:9%;
margin:0 4% 0 0;
}

#intro-container p {
font-size:16px;
line-height: 28px;
width:77%;
margin:3vw 0 0 5%;
}

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

#comment-wrapper {
padding:14vw 0;
background-size: 150% auto;
}

#comment-container h2 {
font-size:45px;
margin-bottom:12vw;
}

.cmt h3 {
margin-bottom:2vw;
}

.cmt h3 span.name {
font-size:28px;
margin-right: 0.5em;
display: block;
margin-bottom:4px;
}

.cmt h3 span.work {
font-size:16px;
}

.cmt p {
font-size:16px;
line-height: 28px;
margin-bottom: 60px;
}

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

#staff-container {
padding:14vw 10% 12vw 10%;
}

#staff-container h2 {
font-size:45px;
margin-bottom:12vw;
}

.staff h3 {
margin-bottom:15px;
}

.staff h3 span.work {
font-size:18px;
display: block;
margin-bottom:4px;
}

.staff h3 span.name {
font-size:28px;
}

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

.staff p {
font-size:16px;
line-height: 28px;
color:#191919;
margin-bottom: 40px;
}

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

#trailer-wrapper {
width:90%;
padding:12vw 5%;
}

#trailer-container h2 {
font-size:45px;
margin-bottom:10vw;
}

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

#theater-container {
width:90%;
padding:12vw 5%;
}

#theater-container h2 {
font-size:45px;
margin-bottom:10vw;
}

#theater-container h3  {
width:100%;
margin-bottom: 15px;
}

#theater-container h4 {
width:100%;
padding:10px 0;
}

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

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

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

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

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

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

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

#footer-container h3 {
font-size:18px;
margin-bottom:14px;
}

}

/* -------------------------------------------------
480以下
-------------------------------------------------*/


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

/* -------------------------------------------------
main 480
-------------------------------------------------*/

#main-wrapper {
margin-bottom:14px;
}


#beling {
display: inline-block;
width:72.93%;
margin-bottom:16px;
}

#roadshow {
display: inline-block;
width:95%;
margin-bottom:10px;
}

#special-pg {
width:100%;
padding:10px 0;
margin-bottom:8px;
}

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

#footer-wrapper {
width:100%;
background-color: #000;
padding:30px 0 30px 0;
}

#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;
}

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

#sns-container {
	padding:8px 0 3px 0;
}

#social li {
	padding:0;
}

}