@charset 'UTF-8';
body {
font-family: 'Raleway', 'M PLUS Rounded 1c', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', 'Yu Gothic', YuGothic, 'ヒラギノ角ゴ ProN W3', Hiragino Kaku Gothic ProN, Arial, 'メイリオ', Meiryo, sans-serif;
letter-spacing: .05em;
color: #111;
font-size: 1vw;
line-height: 2;
background: #fff;
}
a {
display: block;
height: auto;
transition: .5s;
text-decoration: none;
color: #ed6c00;
}
a:hover {
color: #e3007f;
}
img {
display: block;
width: 100%;
height: auto;
}
#loader-bg {
position: fixed;
width: 100%;
height: 100%;
top: 0;
left: 0;
background: #fff;
z-index: 3000;
}
#loading {
position: absolute;
background: url("../images/loader.png") no-repeat;
background-size: 100% auto;
width: 15%;
padding-top: calc(206.376% * 0.15);
left: 0;
right: 0;
top: 22%;
bottom: 0;
margin: auto;
display: none;
}
#wrapper {
position: relative;
overflow: hidden;
}
section {
position: relative;
}
header {
position: fixed;
width: 100%;
top: 0;
left: 0;
z-index: 100;
height: auto;
 padding: 2% 0;
background: rgba(255, 255, 255, 0.95);
}
header .sns {
font-size: 0;
letter-spacing: -0.4em;
display: block;
line-height: 1;
position: absolute;
right: 2%;
top: 30%;
}
header .sns li {
float: left;
position: relative;
margin-left: 1vw;
}
header .sns li a {
display: block;
font-size: 1.1vw;
line-height: 1.2;
padding-left: 1.5em;
font-family: 'M PLUS Rounded 1c';
}
header .sns li:nth-child(1) a {
background: url("../images/icon_twitter.svg") no-repeat center left;
background-size: 1.1em auto;
}
header .sns li:nth-child(2) a {
background: url("../images/icon_instagram.svg") no-repeat center left;
background-size: 1.1em auto;
}
header .sns li a:hover {
text-decoration: underline;
}
header nav {
position: absolute;
top: 30%;
left: 5%;
width: 68%;
}
header nav ul {
display: block;
font-size: 0;
letter-spacing: -0.4em;
}
header nav ul li {
display: inline-block;
padding-left: 2vw;
}
header nav ul li a {
display: block;
font-size: 1.1vw;
line-height: 1.2;
font-family: 'M PLUS Rounded 1c';
font-weight: 500;
color: #333;
letter-spacing: 0.075em;
}
#mv {
width: 100%;
position: relative;
padding: 4% 0 2%;
box-sizing: border-box;
z-index: 13;
}
#mv:after {
content: "";
display: block;
width: 55%;
background: url("../images/mv.jpg") no-repeat center center;
background-size: cover;
padding-top: calc(71.475% * 0.55);
position: relative;
margin-left: 37%;
}
#mv h1 {
position: absolute;
width: 18%;
left: 10%;
top: 14%;
}
#mv .info {
width: 26%;
position: absolute;
bottom: 5%;
left: 6%;
z-index: 1;
}
#introduction {
padding: 3% 0 0;
z-index: 10;
}
#introduction:before {
content: "";
display: block;
background: url("../images/ill_tokkuri.png") no-repeat;
background-size: cover;
width: 10%;
padding-top: calc(101.68% * 0.1);
position: absolute;
top: 5%;
left: 73%;
}
#introduction .secTtl {
width: 22%;
margin: 1.4% 0 3.5% 6%;
}
#introduction:after {
content: "";
display: block;
background: url("../images/bg_note.png") no-repeat;
background-size: cover;
width: 70%;
padding-top: calc(71.47% * 0.7);
position: absolute;
transform: rotate(-2deg);
top: 4%;
left: 8%;
z-index: -1;
opacity: 0.4;
}
#introduction:before {
content: "";
display: block;
background: url("../images/bg_note.png") no-repeat;
background-size: cover;
width: 70%;
padding-top: calc(71.47% * 0.7);
position: absolute;
transform: rotate(5deg);
top: 54%;
left: 23%;
z-index: -1;
opacity: 0.4;
}
#introduction ul li {
position: relative;
padding: 0 10% 3%;
width: 84%;
}
#introduction ul li:nth-child(2) {
margin-left: 2%;
width: 98%;
}
#introduction ul li:nth-child(3) {
padding: 0 10% 0;
width: 90%;
}
#introduction ul li:nth-child(1):after {
content: "";
display: block;
background: url("../images/img_intro01.png") no-repeat;
background-size: cover;
width: 24%;
padding-top: calc(131.1% * 0.24);
position: absolute;
right: -1%;
top: -15%;
}
#introduction ul li:nth-child(2):before {
content: "";
display: block;
background: url("../images/img_intro02.png") no-repeat;
background-size: cover;
width: 17%;
padding-top: calc(106.65% * 0.17);
position: absolute;
left: 5%;
bottom: 10%;
}
#introduction ul li:nth-child(3):after {
content: "";
display: block;
background: url("../images/img_intro03.png") no-repeat;
background-size: cover;
width: 30%;
padding-top: calc(82.75% * 0.3);
position: absolute;
right: -5%;
top: 10%;
transform: rotate(45deg);
}
#introduction ul li h3 {
height: 5.2vw;
width: auto;
display: block;
text-align: center;
margin-bottom: 2.5%;
}
#introduction ul li h3 img {
height: 100%;
width: auto;
display: inline-block;
text-align: center;
}
#introduction ul li p {
width: 80%;
text-align: justify;
}
#introduction ul li:nth-child(2) p {
margin-left: 17%;
}
#story {
padding: 15% 8% 0;
z-index: 11;
margin-top: -1%;
}
#story:before {
content: "";
display: block;
background: url("../images/bg_dotted.png") no-repeat;
background-size: cover;
width: 70%;
padding-top: calc(95.833% * 0.7);
position: absolute;
right: -10%;
top: 21%;
z-index: -1;
transform: rotate(-10deg);
}
#story .secTtl {
width: 12%;
position: absolute;
right: 26%;
top: 9%;
}
#story ul li {
width: 65%;
margin: 0 0 1% 35%;
background-color: rgba(255, 235, 109, 0.88);
padding: 3%;
border-radius: 14px;
position: relative;
}
#story ul li:nth-child(2) {
margin: 0 0 1%;
}
#story ul li:nth-child(3) {
width: 60%;
margin: 0 0 0 40%;
}
#story ul li:nth-child(1):after {
content: "";
display: block;
background: url("../images/img_story01.jpg") no-repeat;
background-size: cover;
width: 80%;
padding-top: calc(66.667% * 0.8);
position: absolute;
left: -63%;
top: -25%;
z-index: -1;
transform: rotate(-4deg);
}
#story ul li:nth-child(2):after {
content: "";
display: block;
background: url("../images/img_story02.png") no-repeat;
background-size: cover;
width: 72%;
padding-top: calc(67.095% * 0.72);
position: absolute;
right: -67%;
top: 12%;
z-index: -1;
transform: rotate(7deg);
}
#story ul li:nth-child(3):after {
content: "";
display: block;
background: url("../images/img_story03.jpg") no-repeat;
background-size: cover;
width: 66%;
padding-top: calc(66.667% * 0.66);
position: absolute;
left: -66%;
top: 1%;
z-index: -1;
transform: rotate(-4deg);
}
#story ul li:nth-child(1):before {
content: "";
display: block;
background: url("../images/ill_story01.png") no-repeat;
background-size: cover;
width: 23%;
padding-top: calc(71.9% * 0.23);
position: absolute;
top: -18%;
right: -5%;
}
#story ul li:nth-child(2):before {
content: "";
display: block;
background: url("../images/ill_story02.png") no-repeat;
background-size: cover;
width: 23%;
padding-top: calc(73.48% * 0.23);
position: absolute;
top: -7%;
right: 5%;
transform: rotate(6deg);
}
#story ul li:nth-child(3):before {
content: "";
display: block;
background: url("../images/ill_story03.png") no-repeat;
background-size: cover;
width: 20%;
padding-top: calc(64.08% * 0.20);
position: absolute;
bottom: -7%;
right: -7.5%;
}
#story ul li:nth-child(1) h3, #story ul li:nth-child(3) h3 {
height: 1.6vw;
margin-bottom: 3%;
}
#story ul li:nth-child(2) h3 {
height: 4.4vw;
margin-bottom: 3%;
}
#story ul li h3 img {
height: 100%;
width: auto;
}
#story ul li p {
text-align: justify;
}
#cast {
padding: 10% 10% 0;
z-index: 10;
margin-top: -3%;
}
#cast:before {
content: "";
display: block;
width: 140%;
background: url("../images/bg_paper.png") no-repeat;
background-size: cover;
padding-top: calc(14.54% * 1.4);
position: absolute;
top: -5%;
left: -50%;
margin: auto;
right: -50%;
z-index: -1;
transform: rotate(-8deg);
}
#cast:after {
content: "";
display: block;
width: 140%;
background: url("../images/bg_paper.png") no-repeat;
background-size: cover;
padding-top: calc(14.54% * 1.4);
position: absolute;
bottom: -1.8%;
left: -50%;
margin: auto;
right: -50%;
z-index: -1;
transform: rotate(-188deg);
clear: both;
}
#cast .secTtl {
width: 26%;
transform: rotate(-4deg);
top: 4%;
position: absolute;
}
#cast .mainCast > div {
position: relative;
margin-bottom: 3%;
width: 100%;
}
#cast .mainCast > div:after {
content: "";
display: block;
clear: both;
}
#cast .mainCast > div.cast01 {
width: 100%;
position: relative;
padding: 2% 25% 0 0;
margin-top: 2%;
}
#cast .mainCast > div.cast02 {
width: 100%;
position: relative;
padding: 2% 0 0 25%;
}
#cast .mainCast > div.cast01 .thumb {
position: absolute;
right: 0;
top: 0;
width: 25%;
overflow: hidden;
border-radius: 50%;
}
#cast .mainCast > div.cast02 .thumb {
position: absolute;
left: 0;
top: 0;
width: 25%;
overflow: hidden;
border-radius: 50%;
}
#cast .mainCast > div .profile {
position: relative;
vertical-align: bottom;
}
#cast .mainCast > div.cast01 .profile {
padding-right: 4%;
}
#cast .mainCast > div.cast02 .profile {
padding-left: 4%;
}
#cast .mainCast > div .profile h3 {
font-weight: normal;
font-size: 1.8vw;
line-height: 1.4;
margin-bottom: 1vw;
}
#cast .mainCast > div:nth-child(1) .profile h3 {
text-align: right;
}
#cast .mainCast > div .profile h3 span {
display: inline-block;
font-size: 1.1vw;
color: #444;
padding-left: 0.8em;
}
#cast .mainCast > div .profile h3 span em {
font-size: 70%;
}
#cast .mainCast > div .profile p {
font-size: 0.84vw;
line-height: 1.8;
color: #333333;
text-align: justify;
}
#cast .mainCast > div .comment01 {
position: absolute;
left: -3%;
width: 48%;
top: 1%;
transform: rotate(-3deg);
z-index: -1;
}
#cast .mainCast > div .comment02 {
position: absolute;
right: 3%;
width: 44%;
top: -7%;
transform: rotate(3deg);
z-index: -1;
}
#cast .mainCast > div .en {
color: #cfcfcf;
font-size: 3vw;
font-family: 'M PLUS 1p', sans-serif;
line-height: 1;
display: block;
padding-bottom: 2%;
}
#cast .mainCast > div:nth-child(1) .en {
text-align: right;
}
#cast .mainCast .comment {
margin-bottom: 3%;
}
#cast .casts {
position: relative;
}
#cast .casts:before {
content: "";
background: url("../images/pic_smile.jpg") no-repeat;
background-size: cover;
position: absolute;
width: 32%;
padding-top: calc(66.666% * 0.32);
bottom: 6%;
right: 9%;
z-index: 2;
transform: rotate(4deg);
border: solid 4px #fff;
box-shadow: 1px 1px 9px rgba(0, 0, 0, 0.15);
}
#cast .casts li {
width: 48%;
float: left;
position: relative;
margin: 0 2% 2% 0;
}
#cast .casts li:nth-child(even) {
margin: 0 0 2% 2%;
}
#cast .casts li .tb {
width: 100%;
display: table;
margin-bottom: 2%;
}
#cast .casts li .thumb {
width: 30%;
border-radius: 50%;
overflow: hidden;
display: table-cell;
vertical-align: middle;
}
#cast .casts li .name {
display: table-cell;
vertical-align: middle;
width: 70%;
padding-left: 4%;
}
#cast .casts li .name h3 {
font-weight: normal;
font-size: 1.8vw;
line-height: 1.4;
margin-bottom: 1vw;
}
#cast .casts li .name h3 span {
display: inline-block;
font-size: 1.1vw;
color: #444;
padding-left: 0.8em;
}
#cast .casts li .name h3 span em {
font-size: 70%;
}
#cast .casts li .profile {
font-size: 0.84vw;
line-height: 1.8;
color: #333333;
text-align: justify;
clear: both;
}
#cast .casts li .en {
color: #cfcfcf;
font-size: 2.2vw;
font-family: 'M PLUS 1p', sans-serif;
line-height: 1;
display: block;
padding-bottom: 2%;
}
#staff {
padding: 13% 10% 5%;
z-index: 9;
margin-top: -8%;
}
#staff:before {
content: "";
display: block;
width: 180%;
height: 82%;
position: absolute;
left: -50%;
right: -50%;
top: 9%;
z-index: -1;
transform: rotate(-6deg);
background: url("../images/bg_staff.png") no-repeat right 20% bottom -17% rgba(242, 251, 255, 1);
background-size: 30% auto;
}
#staff .secTtl {
width: 15%;
position: absolute;
right: 11%;
top: 10%;
}
#staff .staff01 {
margin: 0 0 3%;
position: relative;
}
#staff .staff02 {
width: 50%;
margin: 0 0 3%;
}
#staff .thumb {
width: 12%;
overflow: hidden;
display: table-cell;
vertical-align: middle;
}
#staff .staff02 .thumb {
width: 24%;
}
#staff .name {
display: table-cell;
vertical-align: middle;
width: 88%;
padding-left: 2%;
}
#staff .staff02 .name {
width: 76%;
padding-left: 4.5%;
}
#staff .name h3 {
font-weight: normal;
font-size: 1.8vw;
line-height: 1.4;
margin-bottom: 1vw;
}
#staff .name h3 span {
display: inline-block;
font-size: 1.1vw;
color: #444;
padding-left: 0.8em;
}
#staff .name h3 em {
font-size: 70%;
padding-right: 0.5em;
display: inline-block;
}
#staff .profile {
font-size: 0.84vw;
line-height: 1.8;
color: #333333;
text-align: justify;
clear: both;
margin-top: 2%;
}
#staff .en {
color: #bfbfbf;
font-size: 2.2vw;
font-family: 'M PLUS 1p', sans-serif;
line-height: 1;
display: block;
padding-bottom: 1%;
}
#staff .staff01 .comment03 {
position: absolute;
right: 5%;
width: 54%;
top: -27%;
transform: rotate(2deg);
z-index: -1;
}
.separate {
position: relative;
padding: 0 7% 0 5%;
z-index: 11;
margin-top: -7%;
}
.separate:after {
content: "";
display: block;
clear: both;
}
#trailer {
padding: 11% 0 0 0;
float: left;
width: 75%;
}
#trailer .secTtl {
width: 24%;
z-index: 3;
position: absolute;
top: 11%;
left: 1%;
transform: rotate(-2deg);
}
#trailer .yt {
width: 100%;
padding-top: 56.25%;
position: relative;
margin: 0 auto;
z-index: 2;
}
#trailer .yt iframe {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
}
#original {
width: 25%;
float: right;
padding: 11% 0 0 4%;
}
#original .secTtl {
width: 70%;
position: absolute;
top: 8%;
left: 20%;
transform: rotate(-4deg);
}
#original h3 {
font-size: 1.5vw;
}
#original .profile {
font-size: 0.84vw;
line-height: 1.8;
color: #333333;
text-align: justify;
clear: both;
}
#original .souffle {
margin: 0.5em 0;
}
#songs {
padding: 7% 0 0;
margin-top: -6%;
}
#songs .inner {
padding: 5% 5% 3%;
background: url("../images/bg_songs.jpg") no-repeat center bottom #f6f7f9;
background-size: 100% auto;
position: relative;
}
#songs:after {
content: "";
display: block;
background: rgba(255, 255, 255, 0.35) no-repeat;
width: 100%;
height: 100%;
position: absolute;
z-index: 1;
left: 0;
top: 0;
}
#songs .secTtl {
width: 18%;
transform: rotate(-7deg);
z-index: 2;
margin: -8.5% auto 0;
position: relative;
}
#songs .band {
width: 60%;
float: left;
position: relative;
z-index: 2;
padding-top: 1%;
}
#songs .band h3 {
font-size: 1.6vw;
line-height: 1.5;
font-weight: 500;
font-family: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', 'Yu Gothic', YuGothic, 'ヒラギノ角ゴ ProN W3', Hiragino Kaku Gothic ProN, Arial, 'メイリオ', Meiryo, sans-serif;
}
#songs .band h3 em {
display: block;
font-size: 1vw;
}
#songs .band .visual {
width: 43%;
position: relative;
z-index: 3;
padding-top: 3%;
}
#songs .band .profile {
font-size: 0.84vw;
line-height: 1.8;
color: #333333;
text-align: justify;
clear: both;
margin-top: 2%;
}
#songs .band .comment04 {
position: absolute;
left: 38%;
width: 70%;
bottom: -12%;
z-index: 2;
transform: rotate(-2deg);
}
#songs .lyrics {
width: 40%;
float: right;
padding-left: 5%;
position: relative;
z-index: 2;
font-family: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', 'Yu Gothic', YuGothic, 'ヒラギノ角ゴ ProN W3', Hiragino Kaku Gothic ProN, Arial, 'メイリオ', Meiryo, sans-serif;
}
#songs .lyrics h3 {
font-size: 1.6vw;
line-height: 1.5;
font-weight: bold;
text-align: center;
margin-bottom: 0.5em;
}
#songs .lyrics h3:after {
content: "";
display: block;
width: 35%;
margin: 0.3em auto 0;
height: 1px;
background: rgba(0, 0, 0, 0.3);
}
#songs .lyrics h4 {
text-align: center;
opacity: 0.8;
line-height: 1;
font-size: 0.8vw;
}
#songs .lyrics p {
padding-top: 1.5em;
font-size: 0.84vw;
text-align: center;
line-height: 1.6;
}
#theatreTicket {
padding: 5% 10% 0;
margin-top: -3%;
}
#theatreTicket .secTtl {
width: 46%;
margin: 0 auto 4%;
}
#theatreTicket .bnr {
display: block;
text-align: center;
position: relative;
z-index: 2;
}
#theatreTicket .bnr li {
width: 28%;
display: inline-block;
margin: 0 0.75%;
border: solid 1px #efefef;
transition: .1s;
}
#theatreTicket .bnr li:first-child {
display: block;
margin: 0 auto 2%;
}
#theatreTicket .bnr li:hover {
transform: rotate(-3deg);
opacity: 0.8;
}
footer {
background: url("../images/bg_footer.png") no-repeat center top;
background-size: cover;
position: relative;
padding: 12% 10% 0;
}
footer:before {
content: "";
display: block;
width: 32%;
background: url("../images/pic_yoi.png") no-repeat;
background-size: cover;
padding-top: calc(60.6% * 0.32);
position: absolute;
right: -1%;
top: -14%;
}
footer .cast {
margin-bottom: 1rem;
}
footer .cast ul {
display: block;
text-align: center;
}
footer .cast ul li {
display: inline-block;
padding: 0 0.4em;
font-size: 1.2vw;
line-height: 1.8;
}
footer .staff {
margin-bottom: 1rem;
}
footer .staff ul {
display: block;
text-align: center;
line-height: 1.3;
}
footer .staff li {
display: inline-block;
font-size: 1vw;
padding: 0 0.4em;
}
footer .staff li dl, footer .credit li dl {
display: table;
}
footer .staff li dl dt, footer .credit li dl dt {
display: table-cell;
vertical-align: middle;
}
footer .staff li dl dt:after, footer .credit li dl dt:after {
content: ":";
display: inline-block;
padding: 0 0.2em;
}
footer .staff li dl dd, footer .credit li dl dd {
display: table-cell;
vertical-align: middle;
}
footer .credit ul {
display: block;
text-align: center;
line-height: 1.3;
}
footer .credit ul li {
display: inline-block;
text-align: center;
font-size: 0.9vw;
padding: 0 0.4em;
}
footer .cr {
clear: both;
text-align: center;
padding: 1.4em 0 3em;
opacity: 0.8;
}
@media screen and (max-width:480px) {
body {
font-size: 2.8vw;
}
#loading {
width: 42%;
padding-top: calc(206.376% * 0.42);
top: 22%;
}
 #bgNav {
  transition: .3s;
  left: 0;
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.7);
  position: fixed;
  top: 0;
  opacity: 0;
 }
 #bgNav.active {
  opacity: 1;
  z-index: 98;
 }
 #toggle {
  display: block;
  position: fixed;
  right: 5px;
  top: 5px;
  width: 44px;
  height: 44px;
  z-index: 99;
  transition: 0.9s;
 }
 #toggle.active {
  right: 68%;
 }
  #toggle span {
   height: 3px;
   width: 80%;
   background: rgba(0,0,0,0.5);
   position: absolute;
   top: 50%;
   border-radius: 3px;
   left: 10%;
 }
 #toggle.active span {
  height: 0;
 }
 #toggle span:before {
  content: "";
  height: 3px;
   width: 100%;
   background: rgba(0,0,0,0.5);
   position: absolute;
   top: -9px;
   border-radius: 3px;
   left: 0;
  transition: 0.3s;
 }
 #toggle.active span:before {
  transform: rotate(45deg);
   background: #fff;
  top: 0;
 }
 #toggle span:after {
  content: "";
  height: 3px;
   width: 100%;
   background: rgba(0,0,0,0.5);
   position: absolute;
   bottom: -9px;
   border-radius: 3px;
   left: 0;
  transition: 0.3s;
 }
  #toggle.active span:after {
  transform: rotate(-45deg);
   bottom: -3px;
   background: #fff;
 }
 
header {
left: auto;
height: 100%;
right: -65%;
 transition: 0.9s;

width: 65%;
padding: 5% 0 5% 7%;
}
 header.active {
  right: 0;
 }
header .sns {
position: relative;
right: auto;
top: auto;
letter-spacing: 0;
}
header .sns li {
float: none;
margin-left: 0;
}
header .sns li a {
font-size: 1rem;
padding: 5% 0 5% 1.5em;
}
header nav {
position: relative;
top: auto;
left: auto;
width: auto;
}
header nav ul li {
display: block;
padding-left: 0;
}
header nav ul li a {
font-size: 1rem;
padding: 5% 0;
}
#mv {
padding: 2% 0;
}
#mv:after {
margin-left: 38%;
width: 60%;
padding-top: calc(71.475% * 0.6);
}
#mv h1 {
width: 25%;
left: 6.5%;
top: 8.5%;
}
#mv .info {
width: 50%;
bottom: -27%;
left: 25%;
}
#introduction {
margin-top: 10%;
padding: 5% 0 0;
}
#introduction:before {
width: 20%;
padding-top: calc(101.68% * 0.2);
top: 5%;
left: auto;
right: 2%;
}
#introduction .secTtl {
width: 46%;
margin: 2% 0 5% 5%;
}
#introduction:after {
display: none;
}
#introduction:before {
display: none;
}
#introduction ul li {
padding: 0 5% 5%;
width: 100%;
}
#introduction ul li:nth-child(1):after, #introduction ul li:nth-child(2):before, #introduction ul li:nth-child(3):after {
display: none;
}
#introduction ul li:nth-child(1):before {
content: "";
display: block;
background: url("../images/bg_note.png") no-repeat;
background-size: cover;
width: 180%;
padding-top: calc(71.47% * 1.8);
position: absolute;
transform: rotate(-93deg);
top: 20%;
left: -50%;
opacity: 0.4;
z-index: -1;
}
#introduction ul li:nth-child(3):before {
content: "";
display: block;
background: url("../images/bg_note.png") no-repeat;
background-size: cover;
width: 180%;
padding-top: calc(71.47% * 1.8);
position: absolute;
transform: rotate(-86deg);
top: -50%;
left: -50%;
opacity: 0.4;
z-index: -1;
}
#introduction ul li:nth-child(2) {
margin-left: 0;
width: 100%;
}
#introduction ul li:nth-child(3) {
padding: 0 5%;
width: 100%;
}
#introduction ul li p:after {
content: "";
display: block;
clear: both;
}
#introduction ul li:nth-child(1) p:before {
content: "";
display: block;
background: url("../images/img_intro01.png") no-repeat;
background-size: cover;
width: 34%;
padding-top: calc(131.1% * 0.34);
position: relative;
float: right;
margin: 0 0 0 3%;
}
#introduction ul li:nth-child(2) p:before {
content: "";
display: block;
background: url("../images/img_intro02.png") no-repeat;
background-size: cover;
width: 34%;
padding-top: calc(106.65% * 0.34);
float: left;
margin: 0 3% 0 0;
}
#introduction ul li:nth-child(3) p:before {
content: "";
display: block;
background: url("../images/img_intro03.png") no-repeat;
background-size: cover;
width: 40%;
padding-top: calc(82.75% * 0.4);
transform: rotate(30deg);
float: right;
margin-right: -3%;
}
#introduction ul li h3 {
height: 10vw;
margin-bottom: 5%;
clear: both;
}
#introduction ul li p {
width: 100%;
}
#introduction ul li:nth-child(2) p {
margin-left: 0;
}
#story {
padding: 5% 0 2%;
margin-top: 1%;
z-index: 9;
}
#story:before {
display: none;
}
#story .secTtl {
width: 26%;
right: 5%;
top: 0.5%;
z-index: 2;
}
#story ul li {
width: 100%;
margin: 0;
padding: 8% 5%;
border-radius: 0;
}
#story ul li:nth-child(2) {
margin: 0;
padding: 0 5%;
}
#story ul li:nth-child(3) {
width: 100%;
margin: 0;
padding: 2% 5% 10%;
}
#story ul li:nth-child(1):after {
width: 90%;
padding-top: calc(66.667% * 0.9);
position: relative;
left: auto;
top: auto;
z-index: 1;
transform: rotate(2deg);
margin: 1rem auto 0;
}
#story ul li:nth-child(2):after {
display: none;
}
#story ul li:nth-child(2) p:before {
content: "";
display: block;
background: url("../images/img_story02.png") no-repeat;
background-size: cover;
width: 72%;
padding-top: calc(67.095% * 0.72);
transform: rotate(7deg);
float: right;
margin: 0 -18% 0 0;
}
#story ul li:nth-child(3):before {
content: "";
display: block;
background: url("../images/img_story03.jpg") no-repeat;
background-size: cover;
width: 100%;
padding-top: calc(66.667% * 1);
position: relative;
left: auto;
top: auto;
z-index: 1;
transform: rotate(0deg);
margin-bottom: 1rem;
bottom: auto;
right: auto;
}
#story ul li:nth-child(1):before, #story ul li:nth-child(2):before {
display: none;
}
#story ul li:nth-child(1) p:before {
content: "";
display: block;
background: url("../images/ill_story01.png") no-repeat;
background-size: cover;
width: 30%;
padding-top: calc(71.9% * 0.30);
float: left;
}
#story ul li:nth-child(3):after {
display: none;
}
#story ul li:nth-child(1) h3, #story ul li:nth-child(3) h3 {
height: 3.6vw;
}
#story ul li:nth-child(2) h3 {
height: 9.8vw;
}
#story ul li p:after {
content: "";
display: block;
clear: both;
}
#cast {
padding: 7% 5% 0;
margin-top: -9%;
}
#cast:before {
top: -1%;
transform: rotate(-5deg);
}
#cast .secTtl {
width: 53%;
transform: rotate(-4deg);
top: auto;
position: relative;
}
#cast .mainCast > div {
margin-bottom: 2%;
}
#cast .mainCast > div.cast01 {
padding: 5% 0 0;
margin-top: 0;
}
#cast .mainCast > div.cast02 {
padding: 3% 0 0;
}
#cast .mainCast > div.cast01 .thumb {
display: none;
}
#cast .mainCast > div.cast02 .thumb {
display: none;
}
#cast .mainCast > div .profile {
position: relative;
vertical-align: bottom;
}
#cast .mainCast > div.cast01 .profile {
padding-right: 0;
}
#cast .mainCast > div.cast02 .profile {
padding-left: 0;
}
#cast .mainCast > div .profile h3 {
font-size: 5.4vw;
margin-bottom: 0.5em;
position: relative;
}
#cast .mainCast > div.cast01 .tb {
padding-right: 43%;
}
#cast .mainCast > div.cast01 .tb:after {
content: "";
display: block;
width: 40%;
background: url("../images/cast_matsumotohonoka.png") no-repeat;
background-size: cover;
padding-top: calc(100% * 0.4);
border-radius: 50%;
position: absolute;
top: -18%;
right: 0;
}
#cast .mainCast > div.cast02 .tb {
padding-left: 43%;
}
#cast .mainCast > div.cast02 .tb:after {
content: "";
display: block;
width: 40%;
background: url("../images/cast_shibukawakiyohiko.png") no-repeat;
background-size: cover;
padding-top: calc(100% * 0.4);
border-radius: 50%;
position: absolute;
top: -18%;
left: 0;
}
#cast .mainCast > div:nth-child(1) .profile h3 {
text-align: right;
}
#cast .mainCast > div .profile h3 span { font-size: 2.8vw;
}
#cast .mainCast > div .profile p {
font-size: 1em;
}
#cast .mainCast > div .comment01 {
position: relative;
left: auto;
width: 120%;
margin: 0 auto 0 -10%;
top: auto;
transform: rotate(0deg);
}
#cast .mainCast > div .comment02 {
position: relative;
right: auto;
width: 114%;
top: auto;
transform: rotate(0deg);
margin: -5% auto -8% -8.3%;
}
#cast .mainCast > div .en {
color: #aaa;
font-size: 5.4vw;
padding-bottom: 2%;
}
#cast .mainCast .comment {
margin-bottom: 6%;
}
#cast .casts:before {
display: none;
}
#cast .casts:after {
content: "";
background: url("../images/pic_smile.jpg") no-repeat;
background-size: cover;
position: relative;
width: 90%;
margin: 5% auto;
padding-top: calc(66.666% * 0.9);
transform: rotate(2deg);
border: solid 4px #fff;
box-shadow: 1px 1px 9px rgba(0, 0, 0, 0.15);
}
#cast .casts li {
width: 100%;
float: none;
margin: 0 0 2%;
}
#cast .casts li:nth-child(even) {
margin: 0 0 3%;
}
#cast .casts li .tb {
margin-bottom: 3%;
}
#cast .casts li .name h3 {
font-size: 5.4vw;
margin-bottom: 0.5em;
position: relative;
}
#cast .casts li .name h3 span { font-size: 2.8vw;
}
#cast .casts li .profile {
font-size: 1em;
}
#cast .casts li .en {
color: #aaa;
font-size: 5.4vw;
}
#staff {
padding: 32% 5% 68%;
margin-top: -15%;
}
#staff:before {
background: url("../images/bg_staff.png") no-repeat right 24% bottom -10% rgba(242, 251, 255, 1);
background-size: 70% auto;
top: 6%;
}
#staff .secTtl {
width: 24%;
position: absolute;
right: 7%;
top: 7%;
}
#staff .staff01 {
margin: 0 0 3%;

}
#staff .staff02 {
width: 100%;
margin: 0 0 3%;
}
#staff .thumb {
width: 30%;
}
#staff .staff02 .thumb {
width: 30%;
}
#staff .name {
width: 70%;
padding-left: 4%;
}
#staff .staff02 .name {
width: 70%;
padding-left: 4%;
}
#staff .name h3 {  
font-size: 5.4vw;
margin-bottom: 0.5em;
position: relative;
}
#staff .name h3 em {
padding: 0;
}
#staff .name h3 span { font-size: 2.8vw;
}

#staff .profile {
font-size: 1em;
}
#staff .en {
color: #aaa;
font-size: 5.4vw;
}
#staff .staff01 .comment03 {
position: relative;
right: auto;
width: 130%;
top: auto;
margin: -5% auto -5% -15%;
transform: rotate(0deg);
}
.separate {
padding: 0;
margin-top: -40%;
}

#trailer {
padding: 15% 0 0;
float: none;
width: 100%;
}
#trailer .secTtl {
width: 28%;
top: 12.5%;
left: 5%;
}

#original {
width: 100%;
float: none;
padding: 6% 5% 0;
}
#original .secTtl {
width: 33%;
position: relative;
top: auto;
left: auto;
margin: 0 auto;
}
#original h3 {
font-size: 4vw;
}
#original .profile {
font-size: 1em;
}
#original .souffle {
margin: 0.5em 0;
}
#original  .illustMessage {
padding: 0 15%;
}

#songs {
padding: 10% 0 0;
margin-top: 2%;
}
#songs .inner {
padding: 5% 5% 25%;
}

#songs .secTtl {
width: 24%;
margin: -8.5% auto 0;
}
#songs .band {
width: 100%;
float: none;
padding-top: 3%;
}
#songs .band h3 {
font-size: 4vw;
}
#songs .band h3 em {
font-size: 2.8vw;
}
#songs .band .visual {
width: 100%;
padding-top: 5%;
}
#songs .band .profile {
font-size: 1em;
margin-top: 2.5%;
}
#songs .band .comment04 {
position: relative;
left: auto;
width: 120%;
bottom: auto;
margin: 0 auto 0 -10%;
}
#songs .lyrics {
width: 100%;
float: none;
padding-left: 0;
}
#songs .lyrics h3 {
font-size: 4vw;
}
#songs .lyrics h4 {
font-size: 2.4vw;
}
#songs .lyrics p {
font-size: 1em;
}
#theatreTicket {
padding: 5% 5% 0;
margin-top: 0;
}
#theatreTicket .secTtl {
width: 74%;
margin: 0 auto 5%;
}

#theatreTicket .bnr li {
width: 100%;
display: block;
margin: 0 0 2%;
}
#theatreTicket .bnr li:first-child {
margin: 0 auto 2%;
}

footer {
padding: 10% 5% 0;
}
footer:before {
width: 60%;
padding-top: calc(60.6% * 0.6);
position: relative;
right: auto;
top: auto;
margin: 0 auto;
}
footer .cast {
margin-bottom: 0.8rem;
}
footer .cast ul li {
padding: 0 0.4em;
font-size: 3vw;
}
footer .staff {
margin-bottom: 0.8rem;
}

footer .staff li {
font-size: 2.4vw;
}

footer .credit ul li {
font-size: 2vw;
}
footer .cr {
font-size: 2vw;
}
}