@charset "UTF-8";
body {
margin: 0;
padding: 0;
}
p,h1,h2,h3,h4,ul,ol,dl,dt,dd,form,iframe {
margin: 0;
padding: 0;
}
a {
text-decoration: none;
}
li {
list-style-type: none;
}
* {
box-sizing: border-box;
}
p {
font-size: 13px;
line-height: 2em;
letter-spacing: 0.6pt;
}
img,iframe {
vertical-align: bottom;
}
.sp {
display: none;
}
#header,
#banners,
#trailer,
#main,
#footer {
min-width: 980px;
}

#headbanner {
	width: 100%;
}
#headbanner a.btn-joeikai {
	display: block;
	position: relative;
	width: 100%;
	background: #fff3f3;
	text-align: center;
}
#headbanner a.btn-joeikai img {
	width: 375px;
	height: auto;
}
#headbanner a.btn-joeikai:hover {
	opacity: 0.8;
	cursor: pointer;
}
#headbanner a.btn-joeikai span.bird {
	display: block;
	position: absolute;
	top: 0;
	left: 50%;
	width: 66px;
	margin-left: 260px;
}
#headbanner a.btn-joeikai span.bird img {
	width: 66px;
	height: auto;
}
/* ---------------------

joeikai

--------------------- */
#joeikai {
position: fixed;
display: none;
align-items: center;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1000;
background: #FFF;
}
#joeikai-inner {
width: 100%;
margin: 0 auto;
position: relative;
}
#joeikai-close {
position: absolute;
padding: 10px 20px;
top: -70px;
right: -60px;
font-size: 24px;
cursor: pointer;
}

/* ---------------------

Comment

--------------------- */
#comment {
position: fixed;
display: none;
align-items: center;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1000;
background: #FFF;
}
#comment-inner {
width: 480px;
margin: 0 auto;
position: relative;
}
#comment .author {
padding: 30px 0;
text-align: left;
}
#comment-close {
position: absolute;
padding: 10px 20px;
top: -70px;
right: -60px;
font-size: 24px;
cursor: pointer;
}

/* ---------------------

Header

-----------------------*/
#header {
position: relative;
text-align: center;
}
#header #kv1 {
padding-top: 40px;
margin-bottom: 112px;
}
#header #site-title {
position: absolute;
left: 50%;
top: 558px;
margin-left: -396px;
z-index: 100;
}
#header .catch1 {
position: absolute;
left: 50%;
top: 75px;
margin-left: -410px;
z-index: 100;
}
#header .catch2 {
position: absolute;
left: 50%;
top: 294px;
margin-left: 397px;
z-index: 100;
}
#header .koukai {
margin-bottom: 36px;
}

.btn-theater,
.btn-digital,
.btn-comment {
width: 498px;
height: 66px;
margin: 0 auto 30px;
}
.btn-theater a,
.btn-comment span {
display: block;
width: 498px;
height: 66px;
text-indent: -9999px;
background: url(/images/btn_theater2.png) no-repeat left top;
border: solid 1px #de5779;
cursor: pointer;
}
.btn-digital a {
display: block;
width: 498px;
height: 66px;
text-indent: -9999px;
background: url(/images/btn_streaming.png) no-repeat left top;
border: solid 1px #de5779;
cursor: pointer;
}
.btn-comment span {
background: url(/images/btn_comment.png) no-repeat left top;
}
.btn-theater a:hover,
.btn-digital a:hover,
.btn-comment span:hover {
border: solid 1px #f5b6c6;
}
#snsbtns {
width: 152px;
height: 54px;
margin: 0 auto 30px;
}
#snsbtns li {
float: left;
}
#snsbtns a {
display: block;
width: 76px;
height: 54px;
text-indent: -9999px;
background: url(/images/snsbtns.png) no-repeat left top;
background-size: 228px 54px;
}
#snsbtns .fb a {
background-position: left top;
}
#snsbtns .insta a {
background-position: -76px top;
}
#snsbtns .tw a {
background-position: right top;
}
#snsbtns a:hover {
opacity: 0.6;
}

#widget {
width: 640px;
margin: 0 auto 30px;
}
#widget .widget-title {
font-size: 18px;
font-weight: 400!important;
letter-spacing: 0.8pt;
margin-bottom: 5px;
text-align: center;
}
#widget-inner {
	background: #fef4e8;
	padding: 20px;
	margin: 0 auto;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}
#widget-twitter {
	width: 100%;
}

/* ---------------------

Banners

-----------------------*/
#banners {
text-align: center;
margin-bottom: 30px;
}
#banners a:hover {
opacity: 0.8;
}

/* ---------------------

Schedule

-----------------------*/
#schedule {
width: 640px;
margin: 0 auto 50px;
}
#schedule .schedule-title {
font-size: 18px;
font-weight: 400!important;
letter-spacing: 0.8pt;
margin-bottom: 5px;
text-align: center;
}
#schedule-inner {
padding: 10px;
border: solid 1px #de5779;
}
#schedule .schedule-subtitle {
padding: 10px;
font-size: 14px;
}
#schedule dl {
display: flex;
border-top: solid 1px #CCC;
padding: 0 5px;
}
#schedule dl.noborder {
border-top: none!important;
}
#schedule dt,
#schedule dd {
padding:  5px;
box-sizing: border-box;
font-size: 14px;
line-height: 1.7em;
letter-spacing: 0.3pt;
}
#schedule dt {
width: 24%;
}
#schedule dd {
width: 76%;
color: #de5779;
}
#schedule dd .theater-name {
color: #333;
font-weight: 700;
}
#schedule .kanbai {
background: #de5779;
color: #FFF;
padding: 0 4px;
margin-left: 4px;
line-height: 1.4em;
font-size: 12px;
display: inline-block;
}
#schedule .sub {
font-size: 12px;
font-weight: 400!important;
line-height: 1.5em;
color: #333;
}

/* ---------------------

Schedule

-----------------------*/
#media {
width: 640px;
margin: 0 auto 50px;
}
#media a {
color: #de5779;;
}
#media .media-title {
font-size: 18px;
font-weight: 400!important;
letter-spacing: 0.8pt;
margin-bottom: 5px;
text-align: center;
}
#media-inner {
padding: 10px;
border: solid 1px #de5779;
}
#media .media-subtitle {
padding: 10px;
font-size: 14px;
}
#media dl {
display: flex;
border-top: solid 1px #CCC;
padding: 0 5px;
}
#media dl.noborder {
border-top: none!important;
}
#media dt,
#media dd {
padding:  5px;
box-sizing: border-box;
font-size: 14px;
line-height: 1.7em;
letter-spacing: 0.3pt;
}
#media dt {
width: 24%;
}
#media dd {
width: 76%;
color: #de5779;
}
#media dd .theater-name {
color: #333;
}
#media .kanbai {
background: #de5779;
color: #FFF;
padding: 0 4px;
margin-left: 4px;
line-height: 1.4em;
font-size: 12px;
display: inline-block;
}
#media .sub {
font-size: 12px;
font-weight: 400!important;
line-height: 1.5em;
color: #333;
}


/* ---------------------

Common

-----------------------*/
.area-title {
text-align: center;
margin-bottom: 58px;
}

#trailer {
width: 920px;
margin: 0 auto;
padding: 80px 30px;
}

/* ---------------------

Introduction

-----------------------*/
#introduction {
padding: 80px 0;
}
#introduction .catch1 {
text-align: center;
margin-bottom: 37px;
}
#introduction .inner {
width: 950px;
padding: 0 20px;
margin: 0 auto;
overflow: hidden;
}
#introduction .photo {
float: right;
padding: 0 0 30px 30px;
}
#introduction p {
float: left;
width: 535px;
}

/* ---------------------

Profile

-----------------------*/
#profile {
clear: both;
padding: 56px 0 80px;
background: #fef4e8;
position: relative;
}
#profile .inner {
width: 980px;
padding: 0 35px;
margin: 0 auto;
position: relative;
}
#profile .clearfix {
clear: both;
}
#profile .deco1 {
position: absolute;
top: -247px;
right: 8px;
}
#profile .deco2 {
position: absolute;
bottom: -108px;
left: 0px;
}
#profile .deco3 {
position: absolute;
bottom: -40px;
right: 10px;
}
#profile .photo {
float: left;
padding: 0 0 30px 30px;
}
#profile .profile-text {
float: right;
width: 557px;
}
#profile .profile-name {
margin-bottom: 30px;
}

#director {
padding: 56px 0 80px;
}
#director .director-text {
width: 800px;
margin: 0 auto 40px;
}

#director .director-name {
margin-bottom: 30px;
}
#director-message {
padding: 60px 64px 30px; 
background: #fffef1;
width: 800px;
margin: 0 auto;
border: solid 1px #ecead6;
}
#director-message-title {
margin-bottom: 33px;
text-align: center;
}
p#director-message-text {
width: 670px;
height: 788px;
margin: 0 auto;
text-indent: -9999px;
background: url(/images/director_message.png) no-repeat center top;
}
p#director-message-text br {
display: none;
}


#kv2 {
text-align: center;
}
.interviewee {
clear: both;
overflow: hidden;
width: 950px;
margin: 0 auto;
padding: 0 40px 80px;
}
.interviewee-photo {
float: left;
width: 282px;
height: 204px;
padding: 14px;
background: url(/images/interview_p_bg.png) no-repeat left top;
background-size: cover;
}
.interviewee-text {
float: right;
width: 535px;
}
.interviewee-name {
margin-bottom: 30px;
}


.billing {
text-align: center;
padding: 45px 0;
}

/* ---------------------

SP

-----------------------*/
@media screen and (max-width: 760px) {
.pc {
display: none;
}
.sp {
display: block;
}
#header,
#banners,
#trailer,
#main,
#footer {
min-width: inherit;
}

section,div,dl,dt,dd,p,img {
width: 100%!important;
height: auto;
}
p {
font-size: 13px;
line-height: 1.8em;
letter-spacing: 0.3pt;
}

#headbanner a.btn-joeikai {
	display: block;
	position: relative;
	width: 100%;
	background: #fff3f3;
	text-align: center;
}
#headbanner a.btn-joeikai img {
	width: 100%;
	height: auto;
}
#headbanner a.btn-joeikai:hover {
	opacity: 1;
}
#headbanner a.btn-joeikai span.bird {
	display: none;
}

#header .catch1,
#header .catch2 {
display: none;
}
#header #kv1 {
padding-top: 0px;
margin-bottom: 122px;
background: url(/images/kv1_2_sp.jpg) no-repeat center top;
background-size: cover;
}
#header #kv1 img {
display: block;
opacity: 0;
}
#header #site-title {
left: 0;
top: auto;
bottom: 100px;
margin-left: 0;
}
#header .koukai {
padding: 0;
margin-bottom: 26px;
}
#banners {
padding: 0 20px 30px;
}
#banners a:hover {
opacity: 1;
}

.btn-theater,
.btn-digital,
.btn-comment {
width: 87%!important;
height: auto;
margin: 0 auto 15px;
}
.btn-theater a,
.btn-digital a,
.btn-comment span {
display: block;
position: relative;
text-align: center;
color: #000;
width: 100%;
background: none;
text-indent: 0;
height: 42px;
line-height: 42px;
font-size: 13px;
border: solid 1px #de5779;
}
.btn-theater a img,
.btn-digital a img,
.btn-comment span img {
width: 100%;
height: auto;
}
.btn-digital a:before
.btn-comment span:before {
content: 'NEW';
position: absolute;
top: 0;
left: 0;
padding-left: 10px;
height: 42px;
line-height: 42px;
color: #de5779;
letter-spacing: 0.6pt;
font-size: 11px;
}

.btn-theater a:hover,
.btn-digital a:hover,
.btn-comment span:hover {
border: solid 1px #de5779;
}
#snsbtns {
width: 152px;
height: 54px;
margin: 0 auto 15px;
}
#snsbtns li {
float: left;
}
#snsbtns a {
display: block;
width: 76px;
height: 54px;
text-indent: -9999px;
background: url(/images/snsbtns.png) no-repeat left top;
background-size: 228px 54px;
}
#snsbtns .fb a {
background-position: left top;
}
#snsbtns .insta a {
background-position: -76px top;
}
#snsbtns .tw a {
background-position: right top;
}
#snsbtns a:hover {
opacity: 1;
}
/* ---------------------

Widget

-----------------------*/
#widget {
margin: 0 auto 35px;
}
#widget .widget-title {
font-size: 16px;
letter-spacing: 0.4pt;
}
#widget-inner {
padding: 10px;
border-left: none;
border-right: none;
}
#widget .widget-subtitle {
padding: 10px 0 5px;
font-size: 14px;
}
#widget dl {
display: flex;
flex-direction: column;
padding: 5px;
}
#widget dt,
#widget dd {
padding:  0;
}
#widget .sub {
font-size: 11px;
}
/* ---------------------

Schedule

-----------------------*/
#schedule {
margin: 0 auto 35px;
}
#schedule .schedule-title {
font-size: 16px;
letter-spacing: 0.4pt;
}
#schedule-inner {
padding: 10px;
border-left: none;
border-right: none;
}
#schedule .schedule-subtitle {
padding: 10px 0 5px;
font-size: 14px;
}
#schedule dl {
display: flex;
flex-direction: column;
padding: 5px;
}
#schedule dt,
#schedule dd {
padding:  0;
}
#schedule .kanbai {
font-size: 10px;
}
#schedule .sub {
font-size: 11px;
}

/* ---------------------

Schedule

-----------------------*/
#media {
margin: 0 auto 35px;
}
#media .media-title {
font-size: 16px;
letter-spacing: 0.4pt;
}
#media-inner {
padding: 10px;
border-left: none;
border-right: none;
}
#media .media-subtitle {
padding: 10px 0 5px;
font-size: 14px;
}
#media dl {
display: flex;
flex-direction: column;
padding: 5px;
}
#media dt,
#media dd {
padding:  0;
}


section#trailer {
background: #000;
padding: 20px 0;
text-align: center;
}
section#trailer iframe {
width: 300px!important;
height: 160px!important;
margin: 0 auto!important;
}

.area-title {
margin-bottom: 24px;
}
.area-title img {
height: 80px;
width: auto!important;
}
#introduction .catch1 {
margin-bottom: 30px;
padding: 0 15px 0 10px;
}
#introduction .photo {
float: none;
width: 50%!important;
padding: 0;
margin: 0 auto 30px;
}

/* ---------------------

Profile

-----------------------*/
#profile {
clear: both;
padding: 56px 0 80px;
background: #fef4e8;
}
#profile .inner {
width: 950px;
padding: 0 20px;
margin: 0 auto;
}
#profile .photo {
float: none;
width: 50%!important;
padding: 0;
margin: 0 auto 30px;
}
#profile .profile-name {
height: 25px;
margin-bottom: 15px;
}
#profile .profile-name img {
height: 100%!important;
width: auto!important;
}
#profile .deco1 {
width: 80px!important;
top: -170px;
right: 8px;
}
#profile .deco2 {
width: 80px!important;
bottom: -92px;
left: 0px;
}
#profile .deco3 {
width: 62px!important;
bottom: -62px;
right: 10px;
}

#director .director-text {
padding: 0 20px;
}
.director-name {
height: 18px;
margin-bottom: 15px;
}
.director-name img {
height: 100%!important;
width: auto!important;
}

#director-message {
width: auto!important;
margin: 0 15px;
padding: 30px 20px;
}
#director-message-title {
margin-bottom: 18px;
}
#director-message-title img {
height: 14px;
width: auto!important;
}
p#director-message-text {
width: 100%;
height: auto;
text-indent: 0;
background: none;
}
p#director-message-text br {
display: block;
}

.interviewee {
padding: 0 20px 40px;
}
.interviewee-photo {
float: none;
width: 222px!important;
height: 160px;
padding: 14px;
margin: 0 auto 20px;
}
.interviewee-name {
height: 18px;
margin-bottom: 15px;
}
.interviewee-name img {
height: 100%!important;
width: auto!important;
}
.interviewee-text {
float: none;
}

/* ---------------------

Comment

--------------------- */
#comment {
position: fixed;
display: none;
align-items: center;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1000;
background: #FFF;
}
#comment-inner {
width: 84%!important;
margin: 0 auto;
position: static;
}
#comment .author {
padding: 15px 0;
text-align: left;
}
#comment-close {
position: absolute;
padding: 10px 20px;
top: 0!important;
right: 0!important;
text-align: right;
font-size: 24px;
cursor: pointer;
}



}