@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: 12%;
}
#mv .info {
 /*width: 24%;
position: absolute;
bottom: 10%;
left: 7%;
z-index: 1;*/
 display: none;
}
#mv .dvd {
 position: absolute;
 bottom: 4%;
 left: 6%;
 width: 26%;
 display: block;
 text-align: center;
 font-size: 170%;
 line-height: 1.3;
}
#mv .dvd a {
 display: inline-block;
 color: #fff;
 background: #e3007f;
 padding: 0.5em 2.4em 0.4em 1.4em;
 position: relative;
}
#mv .dvd a:before {
 content: "";
 display: block;
 width: 0.7em;
 height: 0.7em;
 border-top: solid 3px #fff;
 border-right: solid 3px #fff;
 -webkit-transform: rotate(45deg);
 transform: rotate(45deg);
 position: absolute;
 right: 1em;
 top: 50%;
 margin-top: -0.4em;
 transition: .2s;
}
#mv .dvd a:hover:before {
 right: 0.7em;
}
#mv .dvd a strong {
 display: block;
 font-size: 145%;
}
#mv .dvd a:hover {
 background: #F66207;
}
#dvdDetail {
 padding: 2% 8% 0 30%;
 z-index: 10;
 position: relative;
}
#dvdDetail:after {
 content: "";
 display: block;
 position: absolute;
 background: url("../images/bg_dvd.png") no-repeat;
 background-size: cover;
 padding-top: calc(9.66% * 1.3);
 width: 130%;
 left: -99%;
 top: 95%;
 transform: rotate(-10deg);
}
#dvdDetail:before {
 content: "";
 display: block;
 background: url("../images/dvd.png") no-repeat;
 background-size: cover;
 width: 15%;
 padding-top: calc(141.36% * 0.15);
 position: absolute;
 left: 10%;
 top: 8%;
 border: solid 1px #dfdfdf;
 z-index: 2;
}
#dvdDetail h2 {
 font-size: 130%;
 line-height: 1.5;
 z-index: 2;
 position: relative;
}
#dvdDetail h2 strong {
 display: block;
 font-weight: bold;
 font-size: 150%;
 color: #00b9ef;
}
#dvdDetail h3 {
 font-size: 130%;
 line-height: 1.5;
 z-index: 2;
 position: relative;
}
#dvdDetail h3 strong {
 font-size: 180%;
 color: #e3007f;
 font-weight: bold;
 display: inline-block;
 padding-right: 0.5em;
}
#dvdDetail h3 em {
 font-size: 70%;
 font-weight: bold;
}
#dvdDetail h4 {
 padding: 0.5em 0 1em;
 z-index: 2;
 position: relative;
 font-size: 120%;
}
#dvdDetail dl {
 clear: both;
 margin-bottom: 1em;
 z-index: 2;
 position: relative;
}
#dvdDetail dl dt {
 float: left;
 width: 5.5em;
 box-sizing: border-box;
 padding: 0.4em;
 background: #acacac;
 color: #fff;
 text-align: center;
 line-height: 1;
 font-size: 90%;
}
#dvdDetail dl dd {
 float: left;
 display: inline-block;
 width: calc(100% - 5.5em);
 padding-left: 2em;
 line-height: 1.6;
}
#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%;
 }*/
 #mv .dvd {
  bottom: -30%;
  left: auto;
  right: auto;
  width: 100%;
  font-size: 170%;
 }
 #mv .dvd a {
  display: inline-block;
  color: #fff;
  background: #e3007f;
  padding: 0.5em 2.4em 0.4em 1.4em;
  position: relative;
 }
 #mv .dvd a:before {
  width: 0.5em;
  height: 0.5em;
  border-top: solid 2px #fff;
  border-right: solid 2px #fff;
  margin-top: -0.25em;
 }
 #mv .dvd a strong {
  display: inline-block;
  font-size: 100%;
  padding-left: 0.3em;
 }
 #dvdDetail {
  padding: 17% 5% 0;
 }
 #dvdDetail:after {
  background: url("../images/bg_dvd.png") no-repeat;
  background-size: cover;
  padding-top: calc(9.66% * 3);
  width: 300%;
  left: -200%;
  top: 60%;
  transform: rotate(-6deg);
 }
 #dvdDetail:before {
  display: none;
 }
 #dvdDetail h2 {
  font-size: 110%;
  text-align: center;
 }
 #dvdDetail h2 strong {
  letter-spacing: 0;
  font-size: 125%;
 }
 #dvdDetail h3 {
  font-size: 130%;
  text-align: center;
 }
 #dvdDetail h3 strong {
  font-size: 150%;
  display: block;
  padding: 0 0 0.1em;
 }
 #dvdDetail h3 em {
  font-size: 70%;
  font-weight: bold;
 }
 #dvdDetail h3:after {
  content: "";
  display: block;
  background: url("../images/dvd.png") no-repeat;
  background-size: cover;
  width: 40%;
  padding-top: calc(141.36% * 0.4);
  position: relative;
  margin: 2% auto 0;
  border: solid 1px #dfdfdf;
  z-index: 2;
 }
 #dvdDetail h4 {
  font-size: 110%;
 }
 #dvdDetail dl {
  clear: both;
  margin-bottom: 1em;
  z-index: 2;
  position: relative;
 }
 #dvdDetail dl dt {
  float: left;
  width: 5.5em;
  box-sizing: border-box;
  padding: 0.4em;
  background: #acacac;
  color: #fff;
  text-align: center;
  line-height: 1;
  font-size: 90%;
 }
 #dvdDetail dl dd {
  float: left;
  display: inline-block;
  width: calc(100% - 5.5em);
  padding-left: 2em;
  line-height: 1.6;
 }
 #introduction {
  margin-top: 0;
  padding: 3% 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;
 }
}