@charset "utf-8";
@media print, screen and (max-width:768px){
/*=========================================================================
CONTANTES BASIC
=========================================================================*/
#markNew {padding-left: 1.5%;}

/*=========================================================================
CONTANTES BASIC
=========================================================================*/
section {padding: 9% 0 12%;}


/* -------------------------------------------------------------------- */
#sectionTitle {font-size: 32px; margin-bottom: 6%;}

@media print, screen and (max-width:414px){
#sectionTitle {font-size: 7vw;}
}

/*----------------------------------------------------------*/
#btnMore {max-width: 160px; width: 45%;}
#btnMore a {font-size: 13px; padding: 10px 1em 10px;}

@media print, screen and (max-width:414px){
#btnMore a {font-size: 3.4vw;}
}

/*----------------------------------------------------------*/
#markNew {font-size: 11px;}

@media print, screen and (max-width:414px){
#markNew {font-size: 3vw;}
}

/* -------------------------------------------------------------------- */
#Coming {font-size: 20px; padding:20% 0 30%;}

@media print, screen and (max-width:414px){
#Coming {font-size: 5vw; }
}

/*=========================================================================
MOVIE
=========================================================================*/
section#Movie {padding-top: 0;}

#movieContents {padding: 0px 0 4%; overflow: hidden;}

#Movie {width: 96%; padding-bottom: 56.25%; top: 30%;}

@media print, screen and (max-width:414px){
#Movie {padding-bottom: 60%;}
}

/* -------------------------------------------------------------------- */
ul#movie_snsIcons {margin-top: 4%;}
ul#movie_snsIcons li {width: 31%; margin-right: 3%; max-width: 36px;}
ul#movie_snsIcons li:last-of-type{margin-right: 0;}


@media print, screen and (max-width:414px){
ul#movie_snsIcons{justify-content: center; } 
ul#movie_snsIcons li {width: 22%;}
}

/* -------------------------------------------------------------------- */
#catchCopy {margin-top:9%; font-size: 26px; padding-bottom: 40%; margin-bottom: 3%;}

@media print, screen and (max-width:414px){
#catchCopy {font-size: 5.3vw; }
}

/*=========================================================================
Introduction
=========================================================================*/
section#Introduction {padding-top: 0;}

#intro_linerNotes {padding:6% 4%; font-size: 13px; margin-bottom:6%; }
#intro_linerNotes p {margin-bottom: 1.5em;}


@media print, screen and (max-width:414px){
#intro_linerNotes {font-size: 3vw;}
}

/* -------------------------------------------------------------------- */
#introCatch {font-size: 25px; margin-top: 6%; margin-bottom: 2em;}

@media print, screen and (max-width:414px){
#introCatch {font-size: 4.8vw;}
}

/* -------------------------------------------------------------------- */
.intro_pick {font-size: 24px !important ;margin: 6% 0 !important;}

@media print, screen and (max-width:414px){
.intro_pick {font-size: 4.6vw !important;}
}


/* -------------------------------------------------------------------- */
ul#bg_introList {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
margin: 0 auto 4%;
height: auto;
}
ul#bg_introList li {width:32.3333%; margin-right: 1%; }
ul#bg_introList li:last-of-type {margin-right: 0;}


/* -------------------------------------------------------------------- */
#movieCatch {font-size: 22px; width: 60%; left: 68%; top: 70%;}

@media print, screen and (max-width:414px){
#movieCatch {font-size: 4vw;}
}

/* -------------------------------------------------------------------- */
#introCatch {width: 8.5%;left: 78%;top: 38%;}

/*=========================================================================
NEWS：LIST
=========================================================================*/
ul#newsList {margin-bottom: 12%;}
ul#newsList li {margin:0 auto; padding: 3% 1em;}
ul#newsList li a {display: block;}

/* -------------------------------------------------------------------- */
#topicsUpdate {font-size: 12px; margin-bottom: 1%; width: 100%;}
#topics_listCat {margin-right:.5em; padding: 4px 1em 5px; font-size: 12px; }

@media print, screen and (max-width:414px){
#topicsUpdate {font-size: 3vw;}
}

/* ------------------------------------------------------------------- 
#topicsThumb {margin-bottom: 2%; width: 36%; margin:0 4% 0 0;}
*/
/* -------------------------------------------------------------------- */
#list_topicsTitle {font-size: 14px;}

@media print, screen and (max-width:414px){
#list_topicsTitle {font-size: 3.2vw;}
}

/*=========================================================================
Theaters
=========================================================================*/
section#Theaters {padding-bottom: 20vh;background:rgba(242,197,207,.3); }

/* -------------------------------------------------------------------- */
#sub_naviBox {margin-bottom: 9%;}

/* -------------------------------------------------------------------- */
ul#subnaviList li {width: calc(100% / 9); }
ul#subnaviList li a {width: 92%; font-size: 13px; padding: 6px 0 7px; margin-right: 3%;}
ul#subnaviList li:last-of-type a {margin-right: 0;}

@media print, screen and (max-width:414px){
ul#subnaviList {justify-content: center;}
ul#subnaviList li {width: 19%; margin: 0 1% 1% 0; }
ul#subnaviList li:nth-child(5n) {margin-right: 0; }

ul#subnaviList li a {font-size: 3vw; width: 100%; margin: 0 auto;}
}

/* -------------------------------------------------------------------- */
#theaterHeadline {margin-bottom: 6%; font-size: 18px;}
#theaterHeadline span {padding: 0 10%;}

@media print, screen and (max-width:414px){
#theaterHeadline {font-size: 4.4vw;}
}


/* -------------------------------------------------------------------- */
#tableBody {width: 100%; height: auto; margin: 0 auto;overflow-y: hidden; overflow-x: scroll;-webkit-overflow-scrolling: touch;}
#tableBody::-webkit-scrollbar {background: #f5f5f5; height: 3px;}
#tableBody::-webkit-scrollbar-thumb {background:#d67f92;}
#tableBody::-webkit-scrollbar-thumb:hover {background:#fb6601;}

/* -------------------------------------------------------------------- */
table#scheduleTable {width: 1000px;}
table#scheduleTable th, table#scheduleTable td {font-size: 13px;}
table#scheduleTable th {padding: 5px 1em;}
table#scheduleTable td {padding:15px 1em; }

@media print, screen and (max-width:414px){
table#scheduleTable th, table#scheduleTable td {font-size: 3.4vw;}
}

/* -------------------------------------------------------------------- */
#tableCap {font-size: 12px;}

@media print, screen and (max-width:414px){
#tableCap {font-size: 3vw;}
}

/* -------------------------------------------------------------------- */
.place {width: 10%;}
.venue {width: 13%;}
.tel {width: 27%;}
.date{width: 25%;}
.ticket {width: 25%;}


/*=========================================================================
STORY
=========================================================================*/
section#Story {
background: rgb(243,243,228);
background: linear-gradient(0deg, rgba(243,243,228,.3) 87%, rgba(242,197,207,0.5) 100%);
}

section#Story #sectionTitle {margin-bottom: 3%;}

.arrow_next,
.arrow_prev {width: 25px;}

/* ---------------------------------------------------------------- */
.arrow_next:before,
.arrow_prev:before {width: 10px;height: 10px;}


/* ---------------------------------------------------------------- */
#outlineBox {padding: 6% 0 12%; width: 90%;}
#outlineBox #sectionTitle {margin-bottom: 1%;}
#outlineBox p {font-size: 14px; margin-bottom: 1em; letter-spacing: -1.5px;}


@media print, screen and (max-width:480px){
#outlineBox p {font-size: 3vw;}
}

/* -------------------------------------------------------------------- */
ul#story_photoList {list-style-type: none; }
ul#story_photoList li {
width: 69%;
-webkit-border-radius: 6px;
border-radius: 6px;
overflow: hidden;
margin-bottom: 6%;
position: relative;
z-index: 1;
padding-bottom: 46%;
}

ul#story_photoList li img {
position: absolute;
width: 100%;
height: 100%;
display: block;
object-fit: cover;
}

ul#story_photoList li.tate {padding-bottom: 55%; width: 48%;}

ul#story_photoList.top li:first-of-type {margin-left: 4%; margin-bottom: 4%;}
ul#story_photoList.top li:nth-of-type(2) {margin:0% 4% 4% auto; z-index: 0;}
ul#story_photoList.top li:nth-of-type(3) {margin:0% 0 4% 18%;}
ul#story_photoList.top li:nth-of-type(4) {margin:0% auto 0 8%;}


ul#story_photoList.bottom li:first-of-type {margin:0 4% 4% auto; z-index: 0;}
ul#story_photoList.bottom li:nth-of-type(2) {margin:0 auto 0 4%; z-index: 1;}
ul#story_photoList.bottom li:nth-of-type(3) {margin:4% 8% 0% auto; z-index: 0;}
ul#story_photoList.bottom li:nth-of-type(4) {margin:4% 0 12% 16%;}




/*=========================================================================
CAST
=========================================================================*/
#cast_fullContainer {margin-bottom: 12%;}

/* ---------------------------------------------------------------- */
dl#cast_profileBox {margin-bottom: 2%; }
dl#cast_profileBox dt {width: 60%; margin:0 auto 4%; }
dl#cast_profileBox dd {width:100%; padding: 0 0%; }

/* ---------------------------------------------------------------- */
#castName {font-size: 28px; margin-bottom: 2%;}
#castName span {font-size:18px;}
#castName p {font-size: 18px; margin-top: 3%;}

@media print, screen and (max-width:640px){
#castName {font-size: 26px;}
#castName span {font-size:16px;}
#castName p {font-size: 16px;}
}

@media print, screen and (max-width:480px){
#castName {font-size: 5.2vw;}
#castName span {font-size:3.2vw;}
#castName p {font-size: 3.2vw;}
}



/* ---------------------------------------------------------------- */
dl#cast_profileBox dd,
dl#cast_profileBox dd p{font-size: 13px;}
dl#cast_profileBox dd p {margin-bottom: 1.5em;}


@media print, screen and (max-width:414px){
dl#cast_profileBox dd,
dl#cast_profileBox dd p {font-size: 3vw;}
}

/* ---------------------------------------------------------------- */
#profileBloc, #commentBox, #biographyBox,
#profileBloc p, #commentBox p, #biographyBox p{font-size: 13px;}

#profileBloc p,
#commentBox p,
#biographyBox p{margin-bottom: 4%;}

@media print, screen and (max-width:414px){
#profileBloc, #commentBox,#biographyBox,
#profileBloc p, #commentBox p, #biographyBox p{font-size: 3vw;}
}

/* ---------------------------------------------------------------- */
#commentBox {padding: 1em 1.5em;}

/* ---------------------------------------------------------------- */
#commentTitle {font-size: 15px; margin-bottom: 2%;}

@media print, screen and (max-width:414px){
#commentTitle{font-size: 3.4vw;}
}

/*=========================================================================
CAST
=========================================================================*/
#cast_listContainer dl#cast_profileBox dt{
display: -webkit-flex;
display: flex;
flex-wrap: wrap;
text-align: left;
}
#cast_listContainer {margin-bottom: 12%;}

dl#cast_profileBox dt a {align-items: center;}

/* ---------------------------------------------------------------- */
#cast_listContainer dl#cast_profileBox {width: 90%; margin: 0 auto 9%; max-width: 700px;}
#cast_listContainer dl#cast_profileBox:last-of-type {margin-bottom: 0;}

/* ---------------------------------------------------------------- */
#cast_listContainer dl#cast_profileBox dt,
#cast_listContainer dl#cast_profileBox dd {width: 100%;}

#cast_listContainer dl#cast_profileBox dt {align-items: center;}
#cast_listContainer #castPhoto {width: 44%; margin:0 5% 0 0; }
#cast_listContainer #cast_nameBox {width:51%; padding: 1em 0 3em;}


/* ---------------------------------------------------------------- */
#biographyBox {margin-bottom: 6%;}

/* ---------------------------------------------------------------- */
#cast_listContainer dl#cast_profileBox dt:after {
font-size: 13px;
padding:0 .5em 3px;
left: 49%;
bottom: 15%;
}

@media print, screen and (max-width:414px){
#cast_listContainer dl#cast_profileBox dt:after {font-size: 3vw; border: 0%;}
}


/*=========================================================================
COMMENT
=========================================================================*/
ul#commentList {display: block;}
ul#commentList li {width: 100%; margin:0 auto 12%; }
ul#commentList li:last-of-type {margin-bottom: 0;}

/* ---------------------------------------------------------------- */
dl#commentContainer {align-items: center;}
dl#commentContainer dt {width:64%; margin:0 auto 6%;}
dl#commentContainer dd {
background: #d67f92;
-ms-border-radius: 12px;
-moz-border-radius: 12px;
-webkit-border-radius: 12px;
border-radius: 12px;
text-align: left;
}

dl#commentContainer dt, dl#commentContainer dt p,
dl#commentContainer dd, dl#commentContainer dd p{font-size: 13px;}


@media print, screen and (max-width:414px){
dl#commentContainer dt, dl#commentContainer dt p,
dl#commentContainer dd, dl#commentContainer dd p{font-size: 3vw;}
}


/* ---------------------------------------------------------------- */
dl#commentContainer:after {content: none;}

/* ---------------------------------------------------------------- */
.comment_inner {padding: 4% 6%;}

@media print, screen and (max-width:414px){
.comment_inner {padding: 4% 6%;}
}


/* ---------------------------------------------------------------- */
#commentName {font-size: 22px; margin-bottom:3%; padding-bottom: 2%;}

@media print, screen and (max-width:414px){
#commentName {font-size: 5vw;}
}


/* ---------------------------------------------------------------- */
#commentName span {
padding-left:0;
font-size: 13px;
display: inline-block;
vertical-align: 2px;
}


@media print, screen and (max-width:480px){
#commentName span  {font-size: 12px;}
}

@media print, screen and (max-width:414px){
#commentName span  {font-size: 3vw; display: block; padding-left: 0; margin-top: 1%;}

}

/*=========================================================================
MUSIC
=========================================================================*/
section#Music {padding: 6% 0;}
section#Music.section_basic {width: 80%;}

/* ---------------------------------------------------------------- */
#musicHeadline {font-size: 22px; margin-bottom: 12%; }

@media print, screen and (max-width:640px){
#musicHeadline {font-size: 4vw;}
}



/* ---------------------------------------------------------------- */
ul#musicList li {width: 43%; margin: 0 14% 14% 0;}
ul#musicList li:nth-of-type(even) {margin-right: 0;}


@media print, screen and (max-width:320px){
ul#musicList li {width: 100%;margin:0 auto 14%;}
ul#musicList li:nth-of-type(even) {margin:0 auto 14%;}
ul#musicList li:last-of-type {margin-bottom: 0;}
}

/* ---------------------------------------------------------------- */
#musicThumb {margin-bottom: 5%;}

@media print, screen and (max-width:320px){
#musicThumb {width: 80%; margin: 0 auto 5%;}
}


/* ---------------------------------------------------------------- */
#songName {font-size: 15px; margin-bottom: 9%;}

@media print, screen and (max-width:480px){
#songName {font-size:3vw;}
}


/* ---------------------------------------------------------------- */
#moreLink {width: 70%; max-width: 200px;}
#moreLink a {font-size: 13px; padding: .5em 0 .6em;}


@media print, screen and (max-width:414px){
#moreLink a {font-size: 3vw;}
}

/*=========================================================================
DIRECTOR
=========================================================================*/
section#Director #sectionTitle {margin-bottom: 3%;}

/* ---------------------------------------------------------------- */
#directorProfile {padding: 6% 0 0;}

section#Director #moreLink {margin-top: 9%; max-width: 120px;}
section#Director #directorContainer {padding-bottom: 0; margin-bottom: 0; font-size: 13px;}

@media print, screen and (max-width:414px){
section#Director #directorContainer {font-size: 3.4vw}
}
/* ---------------------------------------------------------------- */
#directorProfile {margin-bottom: 6%;}

/* ---------------------------------------------------------------- */
#directorName {font-size: 28px; margin-bottom: 6%;}
#directorName p {font-size:20px; margin-top:  1.5%; }
#directorHeadline {font-size: 28px; margin-bottom:1%;}

@media print, screen and (max-width:640px){
#directorName {font-size: 26px;}
#directorName p {font-size:18px;}
#directorHeadline {font-size: 26px;}
}

@media print, screen and (max-width:480px){
#directorName {font-size: 5.2vw}
#directorName p {font-size:3.2vw;}
#directorHeadline {font-size: 5.2vw;}
}




/*=========================================================================
STAFF
=========================================================================*/
section#Staff {padding-bottom: 30%;}

dl#staffList {margin-bottom: 6%; display: -webkit-flex; display: flex; flex-wrap: wrap; justify-content: center; max-width: 800px;}
dl#staffList dt, dl#staffList dd, #staffCap  {font-size: 14px;}
dl#staffList dt {width: 45%; margin-right: 3%; text-align: right;}
dl#staffList dd {width: 52%;}


dl#staffList dt:after {right:-7.8%;}

@media print, screen and (max-width:414px){
dl#staffList dt, dl#staffList dd, #staffCap {font-size: 3vw;}

dl#staffList dt:after {right:-7.8%;}
}

/* ---------------------------------------------------------------- */
#staffCap {margin-top: 6%; text-align: center;}


/*=========================================================================
NEWS
=========================================================================*/
section#inner_News .section_basic {padding: 6%; margin-top: 6%;}
section#inner_News ul#newsList {padding-bottom: 9%;}

/* ---------------------------------------------------------------- */
#articleContainer, #articleContainer p {font-size: 13px;}
#articleContainer p {margin-bottom: 1.4em;}

@media print, screen and (max-width:414px){
#articleContainer, #articleContainer p {font-size: 3.4vw;}
}

/* ---------------------------------------------------------------- */
#article_titleBloc { padding-bottom: 6%; margin-bottom: 6%; }
#articleTitle {font-size: 16px ;margin-bottom: 3%;}
#articleUpdate {font-size:14px;}

@media print, screen and (max-width:414px){
#articleTitle {font-size: 4vw;}
#articleUpdate {font-size:3.4vw;}
}

/*=========================================================================
PLANNER
=========================================================================*/
section#Planning #sectionTitle {font-size:24px; margin-bottom: 3%;}

@media print, screen and (max-width:414px){
section#Planning #sectionTitle{font-size: 4vw;}
}

/* ---------------------------------------------------------------- */
ul#profileLink {margin-top: 6%; margin-bottom: 6%;}

/* ---------------------------------------------------------------- */
ul#profileLink li {font-size: 15px;}
ul#profileLink li a {padding: 8px 1em;}

@media print, screen and (max-width:414px){
ul#profileLink li {font-size: 4vw; width: 45%; margin-right: 10%;}
ul#profileLink li:nth-of-type(even){margin-right: 0;}
ul#profileLink li a {padding: 8px 0;}
}

}