@charset 'UTF-8';
/*************************************************
reset
*************************************************/
html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video
{
    font: inherit;
    font-size: 100%;

    margin: 0;
    padding: 0;

    vertical-align: baseline;

    border: 0;
}

html
{
    line-height: 1;

    height: 100%;

    -webkit-text-size-adjust: 100%;
        -ms-text-size-adjust: 100%;
}

ol,
ul
{
    list-style: none;
}

table
{
    border-spacing: 0;
    border-collapse: collapse;
}

caption,
th,
td
{
    font-weight: normal;

    text-align: left;
    vertical-align: middle;
}

q,
blockquote
{
    quotes: none;
}

q:before,
q:after,
blockquote:before,
blockquote:after
{
    content: '';
    content: none;
}

a img
{
    border: none;
}

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section,
summary
{
    display: block;
}

/*************************************************
	generic
*************************************************/
.to
{
    display: block;
    overflow: hidden;

    white-space: nowrap;
    text-indent: 100%;
}

/*************************************************
	keyframes
*************************************************/
@-webkit-keyframes bounce
{
    0%,
    20%,
    50%,
    80%,
    100%
    {
        -webkit-transform: scale(1, 1);
                transform: scale(1, 1);
        -webkit-transform-origin: bottom center;
                transform-origin: bottom center;
    }
    40%
    {
        -webkit-transform: scale(.8, 1.2);
                transform: scale(.8, 1.2);
        -webkit-transform-origin: bottom center;
                transform-origin: bottom center;
    }
    60%
    {
        -webkit-transform: scale(1, 1.1);
                transform: scale(1, 1.1);
        -webkit-transform-origin: bottom center;
                transform-origin: bottom center;
    }
}
@keyframes bounce
{
    0%,
    20%,
    50%,
    80%,
    100%
    {
        -webkit-transform: scale(1, 1);
                transform: scale(1, 1);
        -webkit-transform-origin: bottom center;
                transform-origin: bottom center;
    }
    40%
    {
        -webkit-transform: scale(.8, 1.2);
                transform: scale(.8, 1.2);
        -webkit-transform-origin: bottom center;
                transform-origin: bottom center;
    }
    60%
    {
        -webkit-transform: scale(1, 1.1);
                transform: scale(1, 1.1);
        -webkit-transform-origin: bottom center;
                transform-origin: bottom center;
    }
}

@-webkit-keyframes spin
{
    0%
    {
        -webkit-transform: rotate(0deg);
                transform: rotate(0deg);
    }
    100%
    {
        -webkit-transform: rotate(360deg);
                transform: rotate(360deg);
    }
}

@keyframes spin
{
    0%
    {
        -webkit-transform: rotate(0deg);
                transform: rotate(0deg);
    }
    100%
    {
        -webkit-transform: rotate(360deg);
                transform: rotate(360deg);
    }
}

@-webkit-keyframes spin02
{
    0%
    {
        -webkit-transform: rotate(0deg);
                transform: rotate(0deg);
    }
    100%
    {
        -webkit-transform: rotate(-360deg);
                transform: rotate(-360deg);
    }
}

@keyframes spin02
{
    0%
    {
        -webkit-transform: rotate(0deg);
                transform: rotate(0deg);
    }
    100%
    {
        -webkit-transform: rotate(-360deg);
                transform: rotate(-360deg);
    }
}

@-webkit-keyframes squiggly-anim
{
    0%
    {
        -webkit-filter: url('#squiggly-0');
                filter: url('#squiggly-0');
    }
    25%
    {
        -webkit-filter: url('#squiggly-1');
                filter: url('#squiggly-1');
    }
    50%
    {
        -webkit-filter: url('#squiggly-2');
                filter: url('#squiggly-2');
    }
    75%
    {
        -webkit-filter: url('#squiggly-3');
                filter: url('#squiggly-3');
    }
    100%
    {
        -webkit-filter: url('#squiggly-4');
                filter: url('#squiggly-4');
    }
}

@keyframes squiggly-anim
{
    0%
    {
        -webkit-filter: url('#squiggly-0');
                filter: url('#squiggly-0');
    }
    25%
    {
        -webkit-filter: url('#squiggly-1');
                filter: url('#squiggly-1');
    }
    50%
    {
        -webkit-filter: url('#squiggly-2');
                filter: url('#squiggly-2');
    }
    75%
    {
        -webkit-filter: url('#squiggly-3');
                filter: url('#squiggly-3');
    }
    100%
    {
        -webkit-filter: url('#squiggly-4');
                filter: url('#squiggly-4');
    }
}

@-webkit-keyframes spining-scale
{
    0%
    {
        -webkit-transform: scale(.01) rotate(0deg);
                transform: scale(.01) rotate(0deg);
    }
    100%
    {
        -webkit-transform: scale(4) rotate(45deg);
                transform: scale(4) rotate(45deg);

        opacity: 0;

        -ms-filter: 'progid:DXImageTransform.Microsoft.Alpha(Opacity=0)';
    }
}

@keyframes spining-scale
{
    0%
    {
        -webkit-transform: scale(.01) rotate(0deg);
                transform: scale(.01) rotate(0deg);
    }
    100%
    {
        -webkit-transform: scale(4) rotate(45deg);
                transform: scale(4) rotate(45deg);

        opacity: 0;

        -ms-filter: 'progid:DXImageTransform.Microsoft.Alpha(Opacity=0)';
    }
}

/*************************************************
	base
*************************************************/
body
{
    font-family: 'Roboto Slab', Garamond, 'Times New Roman', '游明朝', 'Yu Mincho', '游明朝体', 'YuMincho', 'ヒラギノ明朝 Pro W3', 'Hiragino Mincho Pro', 'HiraMinProN-W3', 'HGS明朝E', 'MS P明朝', 'MS PMincho', serif;
    font-size: 14px;
    line-height: 1.4;

    position: relative;

    overflow: hidden;

    width: 100vw;
    height: 100%;

    letter-spacing: 0;

    color: #fff;
    background: #222;

    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.android body
{
    height: 110%;
}

.wrapper
{
    width: 100vw;
    height: 100%;
}

a
{
    text-decoration: underline;

    color: #ffef00;
    outline: none;
}

a:hover
{
    text-decoration: none;
}

/**** 枠 ****/
[class*=common-boder]
{
    position: fixed;

    background-color: #e40057;
}

[class*=common-boder][class*=__top],
[class*=common-boder][class*=__bottom]
{
    z-index: 41;
    left: 20px;

    width: calc(100vw - 20px*2);
    height: 20px;
}

@media only screen and (max-width: 760px), (max-device-width: 760px)
{
    [class*=common-boder][class*=__top],
    [class*=common-boder][class*=__bottom]
    {
        left: 10px;

        width: calc(100vw - 10px*2);
        height: 10px;
    }
}

[class*=common-boder][class*=__top]
{
    top: 0;

    border-bottom: 1px solid #ffef00;
}

[class*=common-boder][class*=__bottom]
{
    bottom: 0;

    border-top: 1px solid #ffef00;
}

[class*=common-boder][class*=__right],
[class*=common-boder][class*=__left]
{
    z-index: 40;
    top: 0;

    width: 20px;
    height: 100%;
}

@media only screen and (max-width: 760px), (max-device-width: 760px)
{
    [class*=common-boder][class*=__right],
    [class*=common-boder][class*=__left]
    {
        width: 10px;
    }
}

[class*=common-boder][class*=__right]
{
    right: 0;

    border-left: 1px solid #ffef00;
}

[class*=common-boder][class*=__left]
{
    left: 0;

    border-right: 1px solid #ffef00;
}

[class*=common-boder]:after
{
    position: fixed;

    display: block;

    content: '';

    background-color: #ffef00;
}

[class*=common-boder][class*=__top]:after,
[class*=common-boder][class*=__bottom]:after
{
    left: 6px;

    width: calc(100vw - 6px*2);
    height: 2px;
}

@media only screen and (max-width: 760px), (max-device-width: 760px)
{
    [class*=common-boder][class*=__top]:after,
    [class*=common-boder][class*=__bottom]:after
    {
        left: 3px;

        width: calc(100vw - 3px*2);
        height: 1px;
    }
}

[class*=common-boder][class*=__top]:after
{
    top: 6px;
}

@media only screen and (max-width: 760px), (max-device-width: 760px)
{
    [class*=common-boder][class*=__top]:after
    {
        top: 3px;
    }
}

[class*=common-boder][class*=__bottom]:after
{
    bottom: 6px;
}

@media only screen and (max-width: 760px), (max-device-width: 760px)
{
    [class*=common-boder][class*=__bottom]:after
    {
        bottom: 3px;
    }
}

[class*=common-boder][class*=__right]:after,
[class*=common-boder][class*=__left]:after
{
    z-index: 50;
    top: 6px;

    width: 2px;
    height: calc(100% - 6px*2);
}

@media only screen and (max-width: 760px), (max-device-width: 760px)
{
    [class*=common-boder][class*=__right]:after,
    [class*=common-boder][class*=__left]:after
    {
        top: 3px;

        width: 1px;
        height: calc(100% - 3px*2);
    }
}

[class*=common-boder][class*=__right]:after
{
    right: 6px;
}

@media only screen and (max-width: 760px), (max-device-width: 760px)
{
    [class*=common-boder][class*=__right]:after
    {
        right: 3px;
    }
}

[class*=common-boder][class*=__left]:after
{
    left: 6px;
}

@media only screen and (max-width: 760px), (max-device-width: 760px)
{
    [class*=common-boder][class*=__left]:after
    {
        left: 3px;
    }
}

.copy
{
    position: fixed;
    z-index: 41;
    bottom: 0;
    left: calc(50% - 78px);

    width: 156px;
    height: 20px;

    background: url(../images/common_txt_copy.png) no-repeat center center #e40057;
}

@media only screen and (max-width: 760px), (max-device-width: 760px)
{
    .copy
    {
        left: calc(50% - 78px/2);

        width: calc(156px/2);
        height: calc(20px/2);

        -webkit-background-size: calc(138px/2), calc(10px/2);
                background-size: calc(138px/2), calc(10px/2);
    }
}

.common-scrollBtn
{
    position: fixed;
    z-index: 20;
    bottom: 21px;
    left: calc(50% - 63px);

    width: 126px;
    height: 80px;

    cursor: pointer;
}

.common-scrollBtn .sc_txt
{
    position: absolute;
    bottom: calc(50% - 32px);
    left: calc(50% - 52px/2);
}

@media only screen and (max-width: 920px), (max-device-width: 920px)
{
    .common-scrollBtn
    {
        bottom: 11px;

        -webkit-transform: scale(.8);
            -ms-transform: scale(.8);
                transform: scale(.8);
    }
}

@media only screen and (max-width: 760px), (max-device-width: 760px)
{
    .common-scrollBtn
    {
        bottom: 0;

        -webkit-transform: scale(.8);
            -ms-transform: scale(.8);
                transform: scale(.8);
    }
}

.common-scrollBtn path
{
    -webkit-animation: bounce 1.5s cubic-bezier(.215, .61, .355, 1) infinite;
            animation: bounce 1.5s cubic-bezier(.215, .61, .355, 1) infinite;
}

.common-scrollBtn:hover path
{
    -webkit-animation: bounce .7s cubic-bezier(.215, .61, .355, 1) infinite;
            animation: bounce .7s cubic-bezier(.215, .61, .355, 1) infinite;
}

.firefox .common-scrollBtn path,
.firefox .common-scrollBtn:hover path
{
    -webkit-animation: none;
            animation: none;
}

/*************************************************
	sec_block
*************************************************/
.sec_block
{
    position: fixed;

    width: 100vw;
    height: 100%;
}

.sec_block .inner
{
    position: relative;

    width: 100vw;
    height: 100%;
}

/*************************************************
	#load
*************************************************/
#load
{
    position: absolute;
    z-index: 50;

    overflow: hidden;

    width: 100vw;
    height: 100%;

    background: #222;
}

#load:before
{
    position: absolute;
    z-index: -1;
    top: calc(50% - 75vw);
    left: calc(50% - 75vw);

    display: block;

    width: 150vw;
    height: 150vw;

    content: '';
    -webkit-animation: spin02 60s linear infinite;
            animation: spin02 60s linear infinite;

    background-image: url(../images/load_bg01.png);
    background-repeat: no-repeat;
    -webkit-background-size: cover;
            background-size: cover;
}

@media only screen and (max-width: 760px), (max-device-width: 760px)
{
    #load:before
    {
        top: calc(50% - 75vh);
        left: calc(50% - 75vh);

        width: 150vh;
        height: 150vh;
    }
}

#load:after
{
    position: absolute;
    z-index: -1;
    top: 0;
    left: 0;

    width: 100vw;
    height: 100%;

    content: '';

    background: url(../images/cast_bg01.png) repeat left top transparent;
}

.load_parts01
{
    position: absolute;
    z-index: 10;
    top: calc(50% - 200px/2);
    left: calc(50% - 140px/2);

    display: block;
}

/*************************************************
	#nav
*************************************************/
/**** animation ****/
.js__nav-trigger
{
    position: fixed;
    z-index: -1;
    top: 21px;
    left: 21px;

    display: inline-block;
    overflow: hidden;

    width: 80px;
    height: 80px;

    opacity: 0;

    -ms-filter: 'progid:DXImageTransform.Microsoft.Alpha(Opacity=0)';
}

@media only screen and (max-width: 760px), (max-device-width: 760px)
{
    .js__nav-trigger
    {
        top: 11px;
        left: 11px;

        width: 40px;
        height: 40px;
    }
}

.js__nav-trigger .js__icon
{
    position: absolute;
    z-index: 25;
    top: 50%;
    left: 50%;

    display: inline-block;

    width: 40px;
    height: 6px;

    -webkit-transform: translateX(-50%) translateY(-50%);
        -ms-transform: translateX(-50%) translateY(-50%);
            transform: translateX(-50%) translateY(-50%);

    background-color: #e40057;
}

@media only screen and (max-width: 760px), (max-device-width: 760px)
{
    .js__nav-trigger .js__icon
    {
        width: 20px;
        height: 3px;
    }
}

.js__nav-trigger .js__icon:before,
.js__nav-trigger .js__icon:after
{
    position: absolute;
    top: 0;
    left: 0;

    width: 100%;
    height: 100%;

    content: '';
    -webkit-transition: -webkit-transform .3s;
            transition: -webkit-transform .3s;
            transition:         transform .3s;
            transition:         transform .3s, -webkit-transform .3s;
    -webkit-transform: translateZ(0);
            transform: translateZ(0);

    background-color: #e40057;

    -webkit-backface-visibility: hidden;
            backface-visibility: hidden;
}

.js__nav-trigger .js__icon:before
{
    -webkit-transform: translateY(-15px) rotate(0deg);
        -ms-transform: translateY(-15px) rotate(0deg);
            transform: translateY(-15px) rotate(0deg);
}

@media only screen and (max-width: 760px), (max-device-width: 760px)
{
    .js__nav-trigger .js__icon:before
    {
        -webkit-transform: translateY(-7px) rotate(0deg);
            -ms-transform: translateY(-7px) rotate(0deg);
                transform: translateY(-7px) rotate(0deg);
    }
}

.js__nav-trigger .js__icon:after
{
    -webkit-transform: translateY(15px) rotate(0deg);
        -ms-transform: translateY(15px) rotate(0deg);
            transform: translateY(15px) rotate(0deg);
}

@media only screen and (max-width: 760px), (max-device-width: 760px)
{
    .js__nav-trigger .js__icon:after
    {
        -webkit-transform: translateY(7px) rotate(0deg);
            -ms-transform: translateY(7px) rotate(0deg);
                transform: translateY(7px) rotate(0deg);
    }
}

.js__nav-trigger:before,
.js__nav-trigger:after
{
    position: absolute;
    top: 0;
    left: 0;

    width: 100%;
    height: 100%;

    content: '';
    -webkit-transition-property: -webkit-transform;
            transition-property: -webkit-transform;
            transition-property:         transform;
            transition-property:         transform, -webkit-transform;
    -webkit-transform: translateZ(0);
            transform: translateZ(0);
    -webkit-transform-origin: left top;
        -ms-transform-origin: left top;
            transform-origin: left top;

    -webkit-backface-visibility: hidden;
            backface-visibility: hidden;
}

.js__nav-trigger:before
{
    -webkit-transition-duration: .3s;
    -webkit-transition-duration: .4s;
            transition-duration: .3s;
            transition-duration: .4s;
    -webkit-transform: scale(1);
        -ms-transform: scale(1);
            transform: scale(1);

    background-color: #ffef00;
}

.js__nav-trigger:after
{
    -webkit-transition-duration: 0s;
            transition-duration: 0s;
            transition-duration: 0s;
    -webkit-transform: scale(0);
        -ms-transform: scale(0);
            transform: scale(0);

    background-color: #e40057;
}

.js__nav-trigger.close-nav:before
{
    -webkit-transform: scale(0);
        -ms-transform: scale(0);
            transform: scale(0);
}

.js__nav-trigger.close-nav:after
{
    -webkit-transition-duration: .3s;
    -webkit-transition-duration: .4s;
            transition-duration: .3s;
            transition-duration: .4s;
    -webkit-transform: scale(1);
        -ms-transform: scale(1);
            transform: scale(1);
}

.js__nav-trigger.close-nav .js__icon
{
    background-color: rgba(228, 0, 87, 0);
}

.js__nav-trigger.close-nav .js__icon:before,
.js__nav-trigger.close-nav .js__icon:after
{
    background-color: #ffef00;
}

.js__nav-trigger.close-nav .js__icon:before
{
    -webkit-transform: translateY(0) rotate(45deg);
        -ms-transform: translateY(0) rotate(45deg);
            transform: translateY(0) rotate(45deg);
}

.js__nav-trigger.close-nav .js__icon:after
{
    -webkit-transform: translateY(0) rotate(-45deg);
        -ms-transform: translateY(0) rotate(-45deg);
            transform: translateY(0) rotate(-45deg);
}

.js__primary-nav
{
    position: fixed;
    z-index: 23;
    top: 0;
    left: 0;

    visibility: hidden;
    overflow: hidden;

    width: 100vw;
    height: 100%;
    padding: 0;

    -webkit-transition: visibility 0s, opacity .3s;
            transition: visibility 0s, opacity .3s;

    opacity: 0;
    background-color: #ffef00;

    -webkit-overflow-scrolling: touch;
    -ms-filter: 'progid:DXImageTransform.Microsoft.Alpha(Opacity=0)';
}

.js__primary-nav.fade-in
{
    visibility: visible;

    opacity: 1;

    -ms-filter: 'progid:DXImageTransform.Microsoft.Alpha(Opacity=100)';
}

.js__overlay-nav,
.js__overlay-content
{
    position: fixed;
    top: 21px;
    right: 21;

    width: 4px;
    height: 4px;

    -webkit-transform: translateX(-20px) translateY(20px);
        -ms-transform: translateX(-20px) translateY(20px);
            transform: translateX(-20px) translateY(20px);
}

.js__overlay-nav span,
.js__overlay-content span
{
    position: absolute;

    display: inline-block;

    -webkit-transform: translateZ(0);
    -webkit-transform: scale(0);
        -ms-transform: scale(0);
            transform: translateZ(0);
            transform: scale(0);
    -webkit-transform-origin: 50% 50%;
        -ms-transform-origin: 50% 50%;
            transform-origin: 50% 50%;

    -webkit-backface-visibility: hidden;
            backface-visibility: hidden;
    will-change: transform;
}

.js__overlay-nav.is-hidden,
.js__overlay-content.is-hidden
{
    visibility: hidden;

    -webkit-transition: opacity .3s 0s, visibility 0s .3s;
            transition: opacity .3s 0s, visibility 0s .3s;

    opacity: 0;

    -ms-filter: 'progid:DXImageTransform.Microsoft.Alpha(Opacity=0)';
}

.js__overlay-nav
{
    z-index: 22;
}

.js__overlay-nav span
{
    background-color: #ffef00;
}

.js__overlay-content
{
    z-index: 24;
}

.js__overlay-content span
{
    background-color: #e40057;
}

.js__content
{
    z-index: 20;

    width: 90%;
    max-width: 100vh;
    margin: 0 auto;
    padding: 80px 0;
}

.js__content .js__intro
{
    height: 200px;
    padding-top: 4.6em;
}

/**** layout ****/
@media only screen and (max-width: 760px), (max-device-width: 760px)
{
    #common-nav ul
    {
        padding: 80px 20px 0 50px;
    }
}

#common-nav .dot01
{
    position: absolute;
    z-index: 22;
    bottom: 0;
    left: -500px;

    display: block;

    width: 751px;
    height: 300px;

    -webkit-transform: rotate(60deg);
        -ms-transform: rotate(60deg);
            transform: rotate(60deg);

    background: -webkit-radial-gradient(circle, #e40057 20%, transparent 10%), -webkit-radial-gradient(circle, #e40057 20%, transparent 10%) 20px 20px;
    background:         radial-gradient(circle, #e40057 20%, transparent 10%), radial-gradient(circle, #e40057 20%, transparent 10%) 20px 20px;
    -webkit-background-size: 40px 40px;
            background-size: 40px 40px;
}

@media only screen and (max-width: 760px), (max-device-width: 760px)
{
    #common-nav .dot01
    {
        background: -webkit-radial-gradient(circle, #e40057 20%, transparent 10%), -webkit-radial-gradient(circle, #e40057 20%, transparent 10%) 10px 10px;
        background:         radial-gradient(circle, #e40057 20%, transparent 10%), radial-gradient(circle, #e40057 20%, transparent 10%) 10px 10px;
        -webkit-background-size: 20px 20px;
                background-size: 20px 20px;
    }
}

@media only screen and (max-width: 760px), (max-device-width: 760px)
{
    #common-nav .dot01
    {
        bottom: -20px;
        left: -170px;

        width: 300px;
        height: 100px;
    }
}

#common-nav .dot02
{
    position: absolute;
    z-index: 22;
    top: -124px;
    left: -161px;

    display: block;

    width: 800px;
    height: 300px;

    -webkit-transform: rotate(-20deg);
        -ms-transform: rotate(-20deg);
            transform: rotate(-20deg);

    background: -webkit-radial-gradient(circle, #e40057 20%, transparent 10%), -webkit-radial-gradient(circle, #e40057 20%, transparent 10%) 40px 40px;
    background:         radial-gradient(circle, #e40057 20%, transparent 10%), radial-gradient(circle, #e40057 20%, transparent 10%) 40px 40px;
    -webkit-background-size: 80px 80px;
            background-size: 80px 80px;
}

@media only screen and (max-width: 760px), (max-device-width: 760px)
{
    #common-nav .dot02
    {
        background: -webkit-radial-gradient(circle, #e40057 20%, transparent 10%), -webkit-radial-gradient(circle, #e40057 20%, transparent 10%) 20px 20px;
        background:         radial-gradient(circle, #e40057 20%, transparent 10%), radial-gradient(circle, #e40057 20%, transparent 10%) 20px 20px;
        -webkit-background-size: 40px 40px;
                background-size: 40px 40px;
    }
}

@media only screen and (max-width: 760px), (max-device-width: 760px)
{
    #common-nav .dot02
    {
        height: 120px;
    }
}

#common-nav .dot03
{
    position: absolute;
    z-index: 22;
    right: -200px;
    bottom: -190px;

    display: block;

    width: 1000px;
    height: 300px;

    -webkit-transform: rotate(-25deg);
        -ms-transform: rotate(-25deg);
            transform: rotate(-25deg);

    background: -webkit-radial-gradient(circle, #e40057 20%, transparent 10%), -webkit-radial-gradient(circle, #e40057 20%, transparent 10%) 80px 80px;
    background:         radial-gradient(circle, #e40057 20%, transparent 10%), radial-gradient(circle, #e40057 20%, transparent 10%) 80px 80px;
    -webkit-background-size: 160px 160px;
            background-size: 160px 160px;
}

@media only screen and (max-width: 760px), (max-device-width: 760px)
{
    #common-nav .dot03
    {
        background: -webkit-radial-gradient(circle, #e40057 20%, transparent 10%), -webkit-radial-gradient(circle, #e40057 20%, transparent 10%) 40px 40px;
        background:         radial-gradient(circle, #e40057 20%, transparent 10%), radial-gradient(circle, #e40057 20%, transparent 10%) 40px 40px;
        -webkit-background-size: 80px 80px;
                background-size: 80px 80px;
    }
}

@media only screen and (max-width: 760px), (max-device-width: 760px)
{
    #common-nav .dot03
    {
        right: -200px;
        bottom: -200px;

        width: 800px;
        height: 200px;
    }
}

.common-navTop
{
    position: absolute;
    z-index: 23;
    top: -270px;
    right: -220px;

    display: block;

    width: 500px;
    height: 500px;

    white-space: nowrap;
    text-indent: 100%;

    border-radius: 50%;
    background: #e40057;
}

.common-navTop a
{
    position: relative;
    top: 380px;
    left: 66px;

    display: block;

    width: 200px;
    height: 32px;

    -webkit-transform: rotate(20deg);
        -ms-transform: rotate(20deg);
            transform: rotate(20deg);

    background-image: url(../images/common_txt_nav.png);
    background-repeat: no-repeat;
    background-position: -200px -280px;
}

.common-navTop a:after
{
    position: absolute;
    top: -65px;
    right: 80px;

    display: block;

    width: 32px;
    height: 54px;

    content: '';
    -webkit-transform: rotate(-20deg);
        -ms-transform: rotate(-20deg);
            transform: rotate(-20deg);

    background-image: url(../images/common_txt_nav.png);
    background-repeat: no-repeat;
    background-position: -200px -312px;
}

.common-navTop:hover
{
    -webkit-animation: squiggly-anim .34s linear infinite;
            animation: squiggly-anim .34s linear infinite;
}

@media only screen and (max-height: 900px), (max-device-height: 900px)
{
    .common-navTop
    {
        -webkit-transform: scale(.8);
            -ms-transform: scale(.8);
                transform: scale(.8);
        -webkit-transform-origin: center center;
            -ms-transform-origin: center center;
                transform-origin: center center;
    }
}

.safari .common-navTop:hover,
.safari [class*='common-navTxt']:hover,
.ios .common-navTop:hover,
.ios [class*='common-navTxt']:hover
{
    -webkit-animation: none;
            animation: none;

    opacity: .8;

    -ms-filter: 'progid:DXImageTransform.Microsoft.Alpha(Opacity=80)';
}

[class*='common-navTxt']
{
    position: absolute;
    z-index: 23;

    display: block;

    white-space: nowrap;
    text-indent: 100%;
}

[class*='common-navTxt'] a
{
    position: relative;

    display: block;

    width: 50px;
    height: 280px;

    background-image: url(../images/common_txt_nav.png);
    background-repeat: no-repeat;
}

[class*='common-navTxt'] a:after
{
    position: absolute;

    display: block;

    width: 25px;
    height: 180px;

    content: '';

    background-image: url(../images/common_txt_nav.png);
    background-repeat: no-repeat;
}

[class*='common-navTxt']:hover
{
    -webkit-animation: squiggly-anim .34s linear infinite;
            animation: squiggly-anim .34s linear infinite;
}

[class*='common-navTxt'][class*='__intro']
{
    top: 20%;
    right: 19%;
}

[class*='common-navTxt'][class*='__intro'] a
{
    -webkit-transform: rotate(-1deg);
        -ms-transform: rotate(-1deg);
            transform: rotate(-1deg);

    background-position: 0 0;
}

[class*='common-navTxt'][class*='__intro'] a:after
{
    top: 150px;
    left: -40px;

    -webkit-transform: rotate(-10deg);
        -ms-transform: rotate(-10deg);
            transform: rotate(-10deg);

    background-position: 0 -280px;
}

[class*='common-navTxt'][class*='__story']
{
    top: 16%;
    right: 40%;
}

[class*='common-navTxt'][class*='__story'] a
{
    -webkit-transform: rotate(-8deg);
        -ms-transform: rotate(-8deg);
            transform: rotate(-8deg);

    background-position: -50px 0;
}

[class*='common-navTxt'][class*='__story'] a:after
{
    top: -15px;
    right: -45px;

    height: 80px;

    -webkit-transform: rotate(8deg);
        -ms-transform: rotate(8deg);
            transform: rotate(8deg);

    background-position: -25px -280px;
}

[class*='common-navTxt'][class*='__cast']
{
    top: 19%;
    left: 41%;
}

[class*='common-navTxt'][class*='__cast'] a
{
    -webkit-transform: rotate(-22deg);
        -ms-transform: rotate(-22deg);
            transform: rotate(-22deg);

    background-position: -100px 0;
}

[class*='common-navTxt'][class*='__cast'] a:after
{
    top: 100px;
    left: -58px;

    height: 60px;

    -webkit-transform: rotate(25deg);
        -ms-transform: rotate(25deg);
            transform: rotate(25deg);

    background-position: -50px -280px;
}

[class*='common-navTxt'][class*='__music']
{
    top: 25%;
    left: 21%;
}

[class*='common-navTxt'][class*='__music'] a
{
    -webkit-transform: rotate(10deg);
        -ms-transform: rotate(10deg);
            transform: rotate(10deg);

    background-position: -150px 0;
}

[class*='common-navTxt'][class*='__music'] a:after
{
    top: 175px;
    left: -30px;

    height: 80px;

    -webkit-transform: rotate(-20deg);
        -ms-transform: rotate(-20deg);
            transform: rotate(-20deg);

    background-position: -75px -280px;
}

[class*='common-navTxt'][class*='__staff']
{
    right: 26%;
    bottom: 18%;
}

[class*='common-navTxt'][class*='__staff'] a
{
    -webkit-transform: rotate(-1deg);
        -ms-transform: rotate(-1deg);
            transform: rotate(-1deg);

    background-position: -200px 0;
}

[class*='common-navTxt'][class*='__staff'] a:after
{
    top: 208px;
    left: -48px;

    height: 80px;

    -webkit-transform: rotate(-70deg);
        -ms-transform: rotate(-70deg);
            transform: rotate(-70deg);

    background-position: -100px -280px;
}

@media only screen and (max-height: 900px), (max-device-height: 900px)
{
    [class*='common-navTxt'][class*='__staff']
    {
        right: 31%;
        bottom: 10%;
    }
}

[class*='common-navTxt'][class*='__trailer']
{
    bottom: 20%;
    left: 52%;
}

[class*='common-navTxt'][class*='__trailer'] a
{
    -webkit-transform: rotate(12deg);
        -ms-transform: rotate(12deg);
            transform: rotate(12deg);

    background-position: -250px 0;
}

[class*='common-navTxt'][class*='__trailer'] a:after
{
    top: 125px;
    right: -16px;

    height: 100px;

    -webkit-transform: rotate(-70deg);
        -ms-transform: rotate(-70deg);
            transform: rotate(-70deg);

    background-position: -125px -280px;
}

@media only screen and (max-height: 900px), (max-device-height: 900px)
{
    [class*='common-navTxt'][class*='__trailer']
    {
        bottom: 10%;
        left: 52%;
    }
}

[class*='common-navTxt'][class*='__theater']
{
    bottom: 14%;
    left: 36%;
}

[class*='common-navTxt'][class*='__theater'] a
{
    -webkit-transform: rotate(10deg);
        -ms-transform: rotate(10deg);
            transform: rotate(10deg);

    background-position: -300px 0;
}

[class*='common-navTxt'][class*='__theater'] a:after
{
    top: -72px;
    right: -39px;

    height: 120px;

    -webkit-transform: rotate(-70deg);
        -ms-transform: rotate(-70deg);
            transform: rotate(-70deg);

    background-position: -150px -280px;
}

@media only screen and (max-height: 900px), (max-device-height: 900px)
{
    [class*='common-navTxt'][class*='__theater']
    {
        bottom: 7%;
        left: 36%;
    }
}

[class*='common-navTxt'][class*='__information']
{
    bottom: 12%;
    left: 24%;
}

[class*='common-navTxt'][class*='__information'] a
{
    -webkit-transform: rotate(-15deg);
        -ms-transform: rotate(-15deg);
            transform: rotate(-15deg);

    background-position: -350px 0;
}

[class*='common-navTxt'][class*='__information'] a:after
{
    top: 150px;
    left: -50px;

    height: 170px;

    -webkit-transform: rotate(-14deg);
        -ms-transform: rotate(-14deg);
            transform: rotate(-14deg);

    background-position: -175px -280px;
}

@media only screen and (max-height: 900px), (max-device-height: 900px)
{
    [class*='common-navTxt'][class*='__information']
    {
        bottom: 5%;
        left: 24%;
    }
}

@media only screen and (max-height: 900px), (max-device-height: 900px)
{
    [class*='common-navTxt']
    {
        -webkit-transform: scale(.6);
            -ms-transform: scale(.6);
                transform: scale(.6);
    }
}

@media only screen and (max-width: 920px), (max-device-width: 920px)
{
    [class*='common-navTxt']
    {
        -webkit-transform: scale(.8);
            -ms-transform: scale(.8);
                transform: scale(.8);
    }
}

@media only screen and (max-width: 760px), (max-device-width: 760px)
{
    [class*='common-navTxt']
    {
        -webkit-transform: scale(1);
            -ms-transform: scale(1);
                transform: scale(1);
    }
}

[class*='common-navTxt'][class*='__brdvd']
{
    bottom: 28%;
    left: 10%;
}

[class*='common-navTxt'][class*='__brdvd'] a
{
    -webkit-transform: rotate(-15deg);
        -ms-transform: rotate(-15deg);
            transform: rotate(-15deg);

    background-image: url(../images/common_txt_nav_brdvd.png);
    background-position: 0 0;
}

[class*='common-navTxt'][class*='__brdvd'] a:after
{
    top: 150px;
    left: -50px;

    height: 170px;

    -webkit-transform: rotate(-14deg);
        -ms-transform: rotate(-14deg);
            transform: rotate(-14deg);

    background-image: url(../images/common_txt_nav_brdvd.png);
    background-position: 0 -280px;
}

@media only screen and (max-height: 900px), (max-device-height: 900px)
{
    [class*='common-navTxt'][class*='__brdvd']
    {
        bottom: 28%;
        left: 10%;
    }
}

@media only screen and (max-height: 900px), (max-device-height: 900px)
{
    [class*='common-navTxt']
    {
        -webkit-transform: scale(.6);
            -ms-transform: scale(.6);
                transform: scale(.6);
    }
}

@media only screen and (max-width: 920px), (max-device-width: 920px)
{
    [class*='common-navTxt']
    {
        -webkit-transform: scale(.8);
            -ms-transform: scale(.8);
                transform: scale(.8);
    }
}

@media only screen and (max-width: 760px), (max-device-width: 760px)
{
    [class*='common-navTxt']
    {
        -webkit-transform: scale(1);
            -ms-transform: scale(1);
                transform: scale(1);
    }
}

@media only screen and (max-width: 760px), (max-device-width: 760px)
{
    .common-navTop,
    [class*='common-navTxt']
    {
        line-height: 1.8;

        position: static;

        width: auto;
        height: auto;

        -webkit-transform: scale(1);
            -ms-transform: scale(1);
                transform: scale(1);
        white-space: normal;
        text-indent: 0;
        letter-spacing: .1em;

        border-radius: 0;
        background: transparent;
    }
    .common-navTop[class*='__brdvd'] a,
    .common-navTop[class*='__brdvd'] a:after,
    [class*='common-navTxt'][class*='__brdvd'] a,
    [class*='common-navTxt'][class*='__brdvd'] a:after
    {
        background-image: none;
    }
    .common-navTop a,
    [class*='common-navTxt'] a
    {
        font-family: '游ゴシック', 'Yu Gothic', '游ゴシック体', 'YuGothic', 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', 'Meiryo UI', 'メイリオ', Meiryo, 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif;
        font-size: 21px;
        font-weight: bold;

        position: static;

        width: auto;
        height: auto;

        -webkit-transform: rotate(0) !important;
            -ms-transform: rotate(0) !important;
                transform: rotate(0) !important;
        text-decoration: none;

        color: #e40057;
        background-image: none;
    }
    .common-navTop a:after,
    [class*='common-navTxt'] a:after
    {
        display: none !important;
    }
    .common-navTop a .sub_txt,
    [class*='common-navTxt'] a .sub_txt
    {
        font-size: 8.4px;
        font-weight: normal;

        display: inline-block;

        margin-left: 10px;
        padding-bottom: calc(1em/2);

        vertical-align: middle;
        letter-spacing: 0;
        text-transform: uppercase;
    }
    .common-navTop a .sub_txt.no-upper,
    [class*='common-navTxt'] a .sub_txt.no-upper
    {
        text-transform: inherit;
    }
}

/*************************************************
	#colorbox
*************************************************/
#colorbox,
#cboxOverlay,
#cboxWrapper
{
    position: absolute;
    z-index: 9999;
    top: 0;
    left: 0;
    /*overflow:hidden;*/
}

#cboxWrapper
{
    max-width: none;
}

#cboxOverlay
{
    position: fixed;

    width: 100%;
    height: 100%;
}

#cboxMiddleLeft,
#cboxBottomLeft
{
    clear: left;
}

#cboxContent
{
    position: relative;
}

#cboxLoadedContent
{
    overflow: auto;

    -webkit-overflow-scrolling: touch;
}

#cboxTitle
{
    margin: 0;
}

#cboxLoadingOverlay,
#cboxLoadingGraphic
{
    position: absolute;
    top: 0;
    left: 0;

    width: 100%;
    height: 100%;
}

#cboxPrevious,
#cboxNext,
#cboxClose,
#cboxSlideshow
{
    cursor: pointer;
}

.cboxPhoto
{
    display: block;
    float: left;

    max-width: none;
    margin: auto;

    -ms-interpolation-mode: bicubic;
    border: 0;
}

.cboxIframe
{
    display: block;

    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;

    border: 0;
}

#colorbox,
#cboxContent,
#cboxLoadedContent
{
    -webkit-box-sizing: content-box;
       -moz-box-sizing: content-box;
            box-sizing: content-box;
}

#cboxOverlay
{
    opacity: .9;
    background: rgba(228, 0, 87, .8);

    -ms-filter: 'progid:DXImageTransform.Microsoft.Alpha(Opacity=90)';
        filter: alpha(opacity=90);
}

#colorbox
{
    outline: 0;
}

#cboxContent
{
    /*overflow:hidden;*/
}

.cboxIframe
{
    /*background:#fff;*/
}

#cboxError
{
    padding: 50px;

    border: 1px solid #ccc;
}

#cboxPrevious,
#cboxNext,
#cboxSlideshow,
#cboxClose
{
    display: none;
    overflow: visible;

    width: auto;
    margin: 0;
    padding: 0;

    border: 0;
    background: none;
}

#cboxPrevious:active,
#cboxNext:active,
#cboxSlideshow:active,
#cboxClose:active
{
    outline: 0;
}

#cboxSlideshow
{
    position: absolute;
    right: 30px;
    bottom: 4px;

    color: #0092ef;
}

#cboxClose:hover
{
    opacity: .5;

    -ms-filter: 'progid:DXImageTransform.Microsoft.Alpha(Opacity=50)';
}

#cboxCurrent
{
    display: none !important;
}

/*************************************************
	index__ani
*************************************************/
.index__ani
{
    position: absolute;
    z-index: 20;

    width: 100vw;
    height: 100%;
}

.index__ani.is_animate .index__ani__parts03
{
    -webkit-animation: spining-scale 2s cubic-bezier(.95, .05, .795, .035);
            animation: spining-scale 2s cubic-bezier(.95, .05, .795, .035);
}

.index__ani__parts01
{
    position: absolute;
    z-index: 0;
    bottom: 0;

    width: 100vw;
    height: 100%;

    -webkit-transition: bottom 1s cubic-bezier(.47, 0, .745, .715), background-color .2s cubic-bezier(.47, 0, .745, .715);
            transition: bottom 1s cubic-bezier(.47, 0, .745, .715), background-color .2s cubic-bezier(.47, 0, .745, .715);

    background: #ffef00;
}

.index__ani__parts02
{
    position: absolute;
    z-index: 0;
    top: 0;

    width: 100vw;
    height: 100%;

    -webkit-transition: all 1s cubic-bezier(.47, 0, .745, .715);
            transition: all 1s cubic-bezier(.47, 0, .745, .715);

    background: url(../images/index_bg02.png) repeat left top transparent;
}

@media only screen and (max-width: 760px), (max-device-width: 760px)
{
    .index__ani__parts02
    {
        -webkit-background-size: 75px 75px;
                background-size: 75px 75px;
    }
}

.index__ani__parts03
{
    position: absolute;
    z-index: 1;
    top: calc(50% - 400px/2);
    left: calc(50% - 416px/2);

    display: block;

    -webkit-transform: scale(0);
        -ms-transform: scale(0);
            transform: scale(0);
}

/*************************************************
	#index
*************************************************/
#index
{
    z-index: 0;

    background: url(../images/index_bg01.png) no-repeat center center transparent;
    -webkit-background-size: cover;
            background-size: cover;
}

.index__logo
{
    font-size: 0;
    line-height: 1;

    position: absolute;
    z-index: 20;
    bottom: calc(8% + 136px);
    left: calc(50% - 640px/2);
}

.index__logo img
{
    width: 100%;
    height: auto;
}

@media only screen and (max-height: 900px), (max-device-height: 900px)
{
    .index__logo
    {
        left: calc(50% - 40%/2);

        width: 40%;
    }
}

@media only screen and (max-height: 650px), (max-device-height: 650px)
{
    .index__logo
    {
        bottom: calc(14.5% + 96px);
        left: calc(50% - 35%/2);

        width: 35%;
    }
}

@media only screen and (max-width: 920px), (max-device-width: 920px)
{
    .index__logo
    {
        bottom: calc(13% + 136px);
        left: calc(50% - 80%/2);

        width: 80%;
    }
}

@media only screen and (max-width: 760px), (max-device-width: 760px)
{
    .index__logo
    {
        z-index: 12;
        top: 8%;
        bottom: auto;
        left: calc(50% - 80%/2);

        width: 80%;
    }
}

.index__castText
{
    position: absolute;
    z-index: 20;
    bottom: 8%;
    left: calc(50% - 472px/2);

    display: block;
}

@media only screen and (max-height: 900px), (max-device-height: 900px)
{
    .index__castText
    {
        bottom: 12%;
        left: calc(50% - 320px/2);

        width: 320px;
    }
}

@media only screen and (max-height: 650px), (max-device-height: 650px)
{
    .index__castText
    {
        bottom: 14.5%;
        left: calc(50% - 320px/2);

        width: 320px;
    }
}

@media only screen and (max-width: 920px), (max-device-width: 920px)
{
    .index__castText
    {
        bottom: 13%;
    }
}

@media only screen and (max-width: 760px), (max-device-width: 760px)
{
    .index__castText
    {
        z-index: 15;
        bottom: 25%;
        left: calc(50% - 80%/2);

        width: 80%;
        height: auto;
    }
}

.index__date,
.index__infoLink
{
    position: absolute;
    z-index: 19;
    right: 40px;

    display: block;

    width: 200px;
}

.index__date img,
.index__infoLink img
{
    width: 100%;
    height: auto;
}

@media only screen and (max-width: 920px), (max-device-width: 920px)
{
    .index__date,
    .index__infoLink
    {
        bottom: 47%;

        width: 20vw;
    }
}

@media only screen and (max-width: 760px), (max-device-width: 760px)
{
    .index__date,
    .index__infoLink
    {
        right: 11px;

        width: 26vw;
    }
}

.index__date
{
    bottom: 60px;
}

@media only screen and (max-width: 920px), (max-device-width: 920px)
{
    .index__date
    {
        bottom: 47%;
    }
}

@media only screen and (max-width: 760px), (max-device-width: 760px)
{
    .index__date
    {
        bottom: calc(29% + 36vw/3);
    }
}

.index__infoLink
{
    bottom: 280px;
}

@media only screen and (max-width: 920px), (max-device-width: 920px)
{
    .index__infoLink
    {
        bottom: calc(47% + 20vw + 20px);
    }
}

@media only screen and (max-width: 760px), (max-device-width: 760px)
{
    .index__infoLink
    {
        bottom: calc(29% + 36vw/3 + 27vw);
    }
}

.index__midori
{
    position: absolute;
    z-index: 15;
    bottom: calc(38% - 1160px/2);
    left: calc(50% - 880px/2);

    display: block;
}

@media only screen and (max-height: 900px), (max-device-height: 900px)
{
    .index__midori
    {
        bottom: calc(38% - 130vh/1.8);
        left: calc(50% - 130vh/2.5);

        width: auto;
        height: 130vh;
    }
}

@media only screen and (max-height: 650px), (max-device-height: 650px)
{
    .index__midori
    {
        bottom: calc(38% - 150vh/1.8);
        left: calc(50% - 150vh/2.5);

        width: auto;
        height: 150vh;
    }
}

@media only screen and (max-width: 920px), (max-device-width: 920px)
{
    .index__midori
    {
        z-index: 15;
        bottom: calc(28% - 100%/2);
        left: calc(50% - 110%/2);

        width: 110%;
    }
}

@media only screen and (max-width: 760px), (max-device-width: 760px)
{
    .index__midori
    {
        bottom: -24%;
        left: calc(50% - 100vh/2.5);

        width: calc(100vh * .8);
        height: auto;
    }
}

@media only screen and (max-width: 760px), (max-device-width: 760px)
{
    .ios.safari .index__midori
    {
        bottom: -26%;
        left: calc(50% - 120%/2);

        width: 120%;
        height: auto;
    }
}

.index__eirin
{
    line-height: 1;

    position: absolute;
    z-index: 20;
    bottom: 40px;
    left: 40px;
}

.index__eirin li
{
    display: inline-block;

    margin-right: 5px;
}

@media only screen and (max-width: 920px), (max-device-width: 920px)
{
    .index__eirin
    {
        bottom: 60px;
        left: 20px;

        -webkit-transform: scale(.6, .6);
            -ms-transform: scale(.6, .6);
                transform: scale(.6, .6);
    }
}

@media only screen and (max-width: 760px), (max-device-width: 760px)
{
    .index__eirin
    {
        bottom: 10px;
        left: 0;

        -webkit-transform: scale(.6, .6);
            -ms-transform: scale(.6, .6);
                transform: scale(.6, .6);
    }
}

.index__credit
{
    font-family: '游ゴシック', 'Yu Gothic', '游ゴシック体', 'YuGothic', 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', 'Meiryo UI', 'メイリオ', Meiryo, 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif;
    font-size: calc(8px + .25vw);

    position: absolute;
    z-index: 20;
    right: 41px;
    bottom: 41px;

    display: inline-block;
}

@media only screen and (max-width: 920px), (max-device-width: 920px)
{
    .index__credit
    {
        right: 0;
        bottom: calc(13% - 55px);
        left: 0;

        display: block;

        text-align: center;
    }
}

@media only screen and (max-width: 760px), (max-device-width: 760px)
{
    .index__credit
    {
        right: 0;
        bottom: calc(25% - 59px);
        left: 0;

        display: block;

        text-align: center;
    }
}

.index__sns
{
    position: absolute;
    z-index: 15;
    bottom: 40px;
    left: 165px;

    overflow: hidden;

    width: 250px;
    margin-top: 20px;

    text-align: left;
}

@media only screen and (max-width: 920px), (max-device-width: 920px)
{
    .index__sns
    {
        bottom: calc(13% - 34px);
        left: calc(50% - 250px/2);
    }
}

@media only screen and (max-width: 760px), (max-device-width: 760px)
{
    .index__sns
    {
        bottom: calc(25% - 34px);
        left: calc(50% - 250px/2);
    }
}

.index__sns li
{
    line-height: 1;

    display: inline-block;

    vertical-align: bottom;
}

.index__sns li:first-child
{
    margin-right: 10px;
}

.index__bnr
{
    position: absolute;
    z-index: 19;
    bottom: 80px;
    left: 40px;
}

@media only screen and (max-width: 920px), (max-device-width: 920px)
{
    .index__bnr
    {
        display: none;
    }
}

@media only screen and (max-width: 760px), (max-device-width: 760px)
{
    .index__bnr
    {
        display: none;
    }
}

.index__bnr li
{
    font-size: 0;
    line-height: 1;

    display: block;

    margin-bottom: 10px;
}

.index__bnr .movie
{
    position: relative;

    cursor: pointer;

    border: 2px solid #ffef00;
}

.index__bnr .movie:after
{
    position: absolute;
    top: calc(50% - 18px/2);
    left: calc(50% - 30px/2);

    width: 0;
    height: 0;

    content: '';

    border-width: 18px 0 18px 31.2px;
    border-style: solid;
    border-color: transparent;
    border-left-color: rgba(255, 239, 0, .8);
}

.index__bnr .movie a
{
    display: block;
}

.index__newsBox
{
    font-family: '游ゴシック', 'Yu Gothic', '游ゴシック体', 'YuGothic', 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', 'Meiryo UI', 'メイリオ', Meiryo, 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif;
    font-size: 14px;

    position: absolute;
    z-index: 20;
    top: 21px;
    right: 21px;
    left: 101px;

    overflow: hidden;

    height: 40px;

    color: #ffef00;
    border-bottom: 1px solid #ffef00;
    background: rgba(228, 0, 87, .5);
}

@media only screen and (max-width: 760px), (max-device-width: 760px)
{
    .index__newsBox
    {
        display: none;
    }
}

.index__newsBox .newsTitle
{
    font-weight: bold;
    line-height: 40px;

    position: absolute;
    top: 0;
    left: 0;

    width: 80px;
    height: 40px;

    text-align: center;
    letter-spacing: .2em;

    border-right: 1px solid #ffef00;
}

.index__newsBox .tickerBox
{
    position: absolute;
    left: 100px;
}

.index__newsBox .js__ticker
{
    position: relative;

    height: 1em;
}

.index__newsBox .js__ticker ul
{
    position: relative;
    top: 12px;

    width: 100%;
    height: 20px;
    margin: 0 auto;
}

.index__newsBox .js__ticker ul li
{
    display: none;

    width: 100%;
    height: 1em;

    white-space: nowrap;
    letter-spacing: .1em;
}

.index__newsBox .js__ticker ul li span
{
    margin-right: 10px;
}

#p5_suzumeBox
{
    position: absolute;

    width: 100vw;
    height: 100%;
}

.suzume_image
{
    z-index: 5;
}

@media only screen and (max-width: 760px), (max-device-width: 760px)
{
    .suzume_image
    {
        width: 195px;
        height: auto;
    }
}

.suzume_image.small
{
    -webkit-transform: scale(.6, .6);
        -ms-transform: scale(.6, .6);
            transform: scale(.6, .6);
}

.suzume_image.large
{
    z-index: 18;

    -webkit-transform: scale(1.2, 1.2);
        -ms-transform: scale(1.2, 1.2);
            transform: scale(1.2, 1.2);
}

#inline-content02 .modal_inner
{
    font-family: '游ゴシック', 'Yu Gothic', '游ゴシック体', 'YuGothic', 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', 'Meiryo UI', 'メイリオ', Meiryo, 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif;

    -webkit-box-sizing: border-box;
            box-sizing: border-box;
    padding: 20px;

    color: #e40057;
    border: 12px double #e40057;
    background-color: #ffef00;
}

.theater__modal__title
{
    font-size: 25.2px;
    font-weight: bold;

    margin-bottom: 1em;
}

.theater__modal__title span
{
    font-size: 14px;

    margin-left: 10px;
}

@media only screen and (max-width: 920px), (max-device-width: 920px)
{
    .theater__modal__title span
    {
        display: block;
    }
}

@media only screen and (max-width: 760px), (max-device-width: 760px)
{
    .theater__modal__title
    {
        font-size: 19.6px;
    }
    .theater__modal__title span
    {
        font-size: 11.2px;

        display: block;
    }
}

.theater__modal__text
{
    font-size: 14px;
    line-height: 1.6;

    margin-bottom: 2em;
}

.theater__modal__text span
{
    font-size: 16.8px;
    font-weight: bold;
}

.theater__modal__text li
{
    font-size: 16.8px;
    font-weight: bold;

    margin-bottom: .6em;
}

.theater__modal__text li br
{
    display: none;
}

@media only screen and (max-width: 760px), (max-device-width: 760px)
{
    .theater__modal__text li
    {
        font-size: 14px;
    }
    .theater__modal__text li br
    {
        display: block;
    }
}

/*************************************************
	#introduction
*************************************************/
#introduction
{
    z-index: 10;

    display: none;

    background: url(../images/intro_bg01.png) no-repeat center center #ffef00;
    -webkit-background-size: cover;
            background-size: cover;
}

@media only screen and (max-width: 920px), (max-device-width: 920px)
{
    #introduction
    {
        background-position: left 20%;
        -webkit-background-size: contain;
                background-size: contain;
    }
}

@media only screen and (max-width: 760px), (max-device-width: 760px)
{
    #introduction
    {
        background-position: left 20%;
        -webkit-background-size: contain;
                background-size: contain;
    }
}

.intro__titleArea
{
    position: absolute;
    z-index: 20;
    top: -10px;
    right: -100px;

    width: 904px;
    height: 476px;

    -webkit-transition: all .2s cubic-bezier(.47, 0, .745, .715);
            transition: all .2s cubic-bezier(.47, 0, .745, .715);

    opacity: 0;

    -ms-filter: 'progid:DXImageTransform.Microsoft.Alpha(Opacity=0)';
}

.intro__titleArea .intro__title
{
    position: absolute;
    z-index: 21;
    top: 75px;
    left: 12px;

    -webkit-box-sizing: border-box;
            box-sizing: border-box;
    width: 300px;
    height: 50px;
    padding-top: 7px;

    text-align: center;
    vertical-align: bottom;

    background: #ffef00;
}

.intro__titleArea .intro__copy
{
    position: absolute;
    z-index: 20;
    top: 154px;
    right: 200px;
}

.intro__titleArea .intro_bg
{
    position: relative;
    top: -70px;
    right: -50px;

    display: block;
}

@media only screen and (max-height: 900px), (max-device-height: 900px)
{
    .intro__titleArea
    {
        top: -40px;

        -webkit-transform: scale(.8);
            -ms-transform: scale(.8);
                transform: scale(.8);
        -webkit-transform-origin: top right;
            -ms-transform-origin: top right;
                transform-origin: top right;
    }
}

@media only screen and (max-height: 650px), (max-device-height: 650px)
{
    .intro__titleArea
    {
        top: -10px;
        right: -60px;

        -webkit-transform: scale(.6);
            -ms-transform: scale(.6);
                transform: scale(.6);
        -webkit-transform-origin: top right;
            -ms-transform-origin: top right;
                transform-origin: top right;
    }
}

@media only screen and (max-width: 920px), (max-device-width: 920px)
{
    .intro__titleArea
    {
        -webkit-transform: scale(.75);
            -ms-transform: scale(.75);
                transform: scale(.75);
        -webkit-transform-origin: top right;
            -ms-transform-origin: top right;
                transform-origin: top right;
    }
}

@media only screen and (max-width: 760px), (max-device-width: 760px)
{
    .intro__titleArea
    {
        top: -10px;
        right: -50px;

        -webkit-transform: scale(.35);
            -ms-transform: scale(.35);
                transform: scale(.35);
        -webkit-transform-origin: top right;
            -ms-transform-origin: top right;
                transform-origin: top right;
    }
    .intro__titleArea .intro__title
    {
        top: 75px;
        left: 13%;
    }
}

.intro__textBox
{
    position: absolute;
    right: -50px;
    bottom: -145px;

    -webkit-box-sizing: border-box;
            box-sizing: border-box;
    width: 840px;
    height: 840px;
    padding: 200px 100px 0;

    opacity: 0;
    border-radius: 50%;
    background: -webkit-linear-gradient(315deg, rgba(255, 255, 255, .2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%, transparent 75%, transparent 0), rgba(255, 239, 0, .8);
    background:         linear-gradient(135deg, rgba(255, 255, 255, .2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%, transparent 75%, transparent 0), rgba(255, 239, 0, .8);
    background-position: auto auto;
    -webkit-background-clip: border-box;
            background-clip: border-box;
            background-origin: padding-box;
    -webkit-background-size: 20px 20px;
            background-size: 20px 20px;

    -webkit-background-origin: padding-box;
    -ms-filter: 'progid:DXImageTransform.Microsoft.Alpha(Opacity=0)';
}

.intro__textBox p
{
    font-size: 15.4px;
    line-height: 2;

    text-align: justify;
}

.intro__textBox p span
{
    background: #e40057;
}

@media only screen and (max-height: 900px), (max-device-height: 900px)
{
    .intro__textBox
    {
        bottom: -300px;

        padding: 180px 100px 0;
    }
    .intro__textBox p
    {
        font-size: 14px;
        line-height: 1.6;
    }
}

@media only screen and (max-height: 650px), (max-device-height: 650px)
{
    .intro__textBox
    {
        bottom: -350px;

        padding: 180px 100px 0;
    }
    .intro__textBox p
    {
        font-size: 12.6px;
        line-height: 1.6;
    }
}

@media only screen and (max-width: 920px), (max-device-width: 920px)
{
    .intro__textBox
    {
        right: 0;
        bottom: 0;

        width: 100vw;
        height: 50%;
        padding: 20px 60px;

        border-radius: 0;
    }
    .intro__textBox p
    {
        overflow: auto;

        height: 80%;

        -webkit-overflow-scrolling: touch;
    }
}

@media only screen and (max-width: 760px), (max-device-width: 760px)
{
    .intro__textBox
    {
        right: 0;
        bottom: 0;

        width: 100vw;
        height: 50%;
        padding: 20px;

        border-radius: 0;
    }
    .intro__textBox p
    {
        font-size: 12.6px;

        overflow: auto;

        height: 80%;

        -webkit-overflow-scrolling: touch;
    }
}

/*************************************************
	#story
*************************************************/
#story
{
    z-index: 0;

    display: none;

    cursor: url('../images/story_img_cursor.png'), pointer;

    background: url(../images/story_bg01.png) no-repeat center center transparent;
    -webkit-background-size: cover;
            background-size: cover;
}

#story:after
{
    position: absolute;
    z-index: -1;
    top: 100px;
    left: calc(50% - 125vw/2);

    width: 125vw;
    height: 300px;

    content: '';
    -webkit-transform: rotate(-20deg);
        -ms-transform: rotate(-20deg);
            transform: rotate(-20deg);

    background: url(../images/story_bg02.png) no-repeat center center transparent;
}

@media only screen and (max-width: 760px), (max-device-width: 760px)
{
    #story:after
    {
        top: 41px;
        left: 0;

        width: 100vw;
        height: 150px;

        -webkit-transform: rotate(0);
            -ms-transform: rotate(0);
                transform: rotate(0);

        -webkit-background-size: cover;
                background-size: cover;
    }
}

.story__title
{
    line-height: 1;

    position: absolute;
    top: 10%;
    left: 12%;

    width: 332px;
    height: 350px;
}

.story__title:after
{
    position: absolute;
    z-index: 11;
    top: 15px;
    right: -15px;

    display: block;

    width: 332px;
    height: 350px;

    content: '';

    opacity: .8;
    background: url(../images/story_txt_h2_shadow.png) no-repeat left top transparent;

    -ms-filter: 'progid:DXImageTransform.Microsoft.Alpha(Opacity=80)';
}

.story__title img
{
    position: relative;
    z-index: 12;
}

@media only screen and (max-height: 900px), (max-device-height: 900px)
{
    .story__title
    {
        -webkit-transform: scale(.9);
            -ms-transform: scale(.9);
                transform: scale(.9);
    }
}

@media only screen and (max-height: 650px), (max-device-height: 650px)
{
    .story__title
    {
        -webkit-transform: scale(.7);
            -ms-transform: scale(.7);
                transform: scale(.7);
        -webkit-transform-origin: left top;
            -ms-transform-origin: left top;
                transform-origin: left top;
    }
}

@media only screen and (max-width: 920px), (max-device-width: 920px)
{
    .story__title
    {
        top: 6%;
        left: 16%;

        -webkit-transform: scale(.9);
            -ms-transform: scale(.9);
                transform: scale(.9);
    }
}

@media only screen and (max-width: 760px), (max-device-width: 760px)
{
    .story__title
    {
        z-index: 15;
        top: 15px;
        left: 57%;

        -webkit-transform: scale(.35) rotate(20deg);
            -ms-transform: scale(.35) rotate(20deg);
                transform: scale(.35) rotate(20deg);
    }
}

.story__text
{
    font-size: 15.4px;
    font-weight: bold;
    line-height: 2;

    position: absolute;
    z-index: 12;
    right: 15%;
    bottom: 18%;

    width: 60%;

    -webkit-transform: rotate(-20deg);
        -ms-transform: rotate(-20deg);
            transform: rotate(-20deg);
    text-align: right;
    letter-spacing: .2em;

    text-shadow: 0 0 3px #0d7ab2, 0 0 5px #0d7ab2, 0 0 8px #0d7ab2;
}

@media only screen and (max-height: 900px), (max-device-height: 900px)
{
    .story__text
    {
        font-size: 13.3px;
        line-height: 1.7;
    }
}

@media only screen and (max-height: 650px), (max-device-height: 650px)
{
    .story__text
    {
        font-size: 11.9px;
        line-height: 1.7;
    }
}

@media only screen and (max-width: 920px), (max-device-width: 920px)
{
    .story__text
    {
        font-size: 13.3px;
        line-height: 1.7;
    }
}

@media only screen and (max-width: 760px), (max-device-width: 760px)
{
    .story__text
    {
        font-size: 12.6px;
        line-height: 1.4;

        right: 0;
        bottom: 70px;

        overflow: auto;

        -webkit-box-sizing: border-box;
                box-sizing: border-box;
                box-sizing: border-box;
        width: 100vw;
        height: 48%;
        padding: 20px 20px;
        padding: 10px 30px;

        -webkit-transform: rotate(0);
            -ms-transform: rotate(0);
                transform: rotate(0);
        text-align: justify;
        letter-spacing: 0;

        -webkit-overflow-scrolling: touch;
    }
}

[class*='story__floatImg']
{
    font-size: 0;
    line-height: 1;

    position: absolute;
    z-index: 11;

    display: block;

    width: 280px;
    height: 240px;

    -webkit-box-shadow: 15px 20px 7px 3px rgba(34, 34, 34, .2);
            box-shadow: 15px 20px 7px 3px rgba(34, 34, 34, .2);
}

[class*='story__floatImg'][class*='__01']
{
    top: 49%;
    left: 35px;

    -webkit-transform: rotate(15deg);
        -ms-transform: rotate(15deg);
            transform: rotate(15deg);
}

[class*='story__floatImg'][class*='__02']
{
    top: 30%;
    right: -50px;

    -webkit-transform: rotate(25deg);
        -ms-transform: rotate(25deg);
            transform: rotate(25deg);
}

[class*='story__floatImg'][class*='__03']
{
    bottom: -10px;
    left: 50%;

    -webkit-transform: rotate(15deg);
        -ms-transform: rotate(15deg);
            transform: rotate(15deg);
}

@media only screen and (max-height: 650px), (max-device-height: 650px)
{
    [class*='story__floatImg'][class*='__01']
    {
        top: 30%;
        left: 10px;

        -webkit-transform: scale(.6) rotate(15deg);
            -ms-transform: scale(.6) rotate(15deg);
                transform: scale(.6) rotate(15deg);
        -webkit-transform-origin: top left;
            -ms-transform-origin: top left;
                transform-origin: top left;
    }
    [class*='story__floatImg'][class*='__02']
    {
        top: 35%;
        right: 0;

        -webkit-transform: scale(.6) rotate(-15deg);
            -ms-transform: scale(.6) rotate(-15deg);
                transform: scale(.6) rotate(-15deg);
        -webkit-transform-origin: top right;
            -ms-transform-origin: top right;
                transform-origin: top right;
    }
    [class*='story__floatImg'][class*='__03']
    {
        bottom: 0;
        left: 200px;

        -webkit-transform: scale(.6) rotate(15deg);
            -ms-transform: scale(.6) rotate(15deg);
                transform: scale(.6) rotate(15deg);
        -webkit-transform-origin: bottom left;
            -ms-transform-origin: bottom left;
                transform-origin: bottom left;
    }
}

@media only screen and (max-width: 760px), (max-device-width: 760px)
{
    [class*='story__floatImg'][class*='__01']
    {
        top: 25%;
        left: -10px;

        -webkit-transform: scale(.4) rotate(15deg);
            -ms-transform: scale(.4) rotate(15deg);
                transform: scale(.4) rotate(15deg);
        -webkit-transform-origin: top left;
            -ms-transform-origin: top left;
                transform-origin: top left;
    }
    [class*='story__floatImg'][class*='__02']
    {
        top: 45%;
        right: -20px;

        -webkit-transform: scale(.4) rotate(-15deg);
            -ms-transform: scale(.4) rotate(-15deg);
                transform: scale(.4) rotate(-15deg);
        -webkit-transform-origin: top right;
            -ms-transform-origin: top right;
                transform-origin: top right;
    }
    [class*='story__floatImg'][class*='__03']
    {
        bottom: 25%;
        left: -10px;

        -webkit-transform: scale(.4) rotate(15deg);
            -ms-transform: scale(.4) rotate(15deg);
                transform: scale(.4) rotate(15deg);
        -webkit-transform-origin: bottom left;
            -ms-transform-origin: bottom left;
                transform-origin: bottom left;
    }
}

[class*='story__partsImg']
{
    font-size: 0;
    line-height: 1;

    position: absolute;
    z-index: 11;

    display: block;
}

[class*='story__partsImg'][class*='__01']
{
    top: -20px;
    left: calc(50% + 200px);
}

[class*='story__partsImg'][class*='__02']
{
    bottom: -70px;
    left: -70px;
}

[class*='story__partsImg'][class*='__03']
{
    right: -50px;
    bottom: -70px;
}

@media only screen and (max-height: 650px), (max-device-height: 650px)
{
    [class*='story__partsImg']
    {
        -webkit-transform: scale(.8);
            -ms-transform: scale(.8);
                transform: scale(.8);
    }
    [class*='story__partsImg'][class*='__01']
    {
        top: 0;
        right: -22px;
        left: auto;

        -webkit-transform-origin: top right;
            -ms-transform-origin: top right;
                transform-origin: top right;
    }
    [class*='story__partsImg'][class*='__02']
    {
        bottom: -60px;
        left: -50px;

        -webkit-transform-origin: bottom left;
            -ms-transform-origin: bottom left;
                transform-origin: bottom left;
    }
    [class*='story__partsImg'][class*='__03']
    {
        right: -45px;
        bottom: -65px;

        -webkit-transform-origin: bottom right;
            -ms-transform-origin: bottom right;
                transform-origin: bottom right;
    }
}

@media only screen and (max-width: 760px), (max-device-width: 760px)
{
    [class*='story__partsImg']
    {
        -webkit-transform: scale(.5);
            -ms-transform: scale(.5);
                transform: scale(.5);
    }
    [class*='story__partsImg'][class*='__01']
    {
        top: 0;
        right: -22px;
        left: auto;

        -webkit-transform-origin: top right;
            -ms-transform-origin: top right;
                transform-origin: top right;
    }
    [class*='story__partsImg'][class*='__02']
    {
        bottom: -60px;
        left: -50px;

        -webkit-transform-origin: bottom left;
            -ms-transform-origin: bottom left;
                transform-origin: bottom left;
    }
    [class*='story__partsImg'][class*='__03']
    {
        right: -45px;
        bottom: -65px;

        -webkit-transform-origin: bottom right;
            -ms-transform-origin: bottom right;
                transform-origin: bottom right;
    }
}

/*************************************************
	#cast
*************************************************/
#cast
{
    z-index: 0;

    display: none;

    background: #a245aa;
}

#cast:before
{
    position: absolute;
    z-index: -1;
    top: -40%;
    right: -80vw;

    display: block;

    width: 200vw;
    height: 200vw;

    content: '';
    -webkit-animation: spin 20s cubic-bezier(.455, .03, .515, .955) infinite;
            animation: spin 20s cubic-bezier(.455, .03, .515, .955) infinite;

    background-image: url(../images/cast_bg02.gif);
    background-repeat: no-repeat;
    -webkit-background-size: cover;
            background-size: cover;
}

@media only screen and (max-height: 650px), (max-device-height: 650px)
{
    #cast:before
    {
        top: -80%;
        right: -80vw;

        width: 200vw;
        height: 200vw;

        -webkit-animation-duration: 40s;
                animation-duration: 40s;
    }
}

@media only screen and (max-width: 920px), (max-device-width: 920px)
{
    #cast:before
    {
        top: -20vw;
        right: -110%;

        width: 200vh;
        height: 200vh;

        -webkit-animation-duration: 40s;
                animation-duration: 40s;
    }
}

@media only screen and (max-width: 760px), (max-device-width: 760px)
{
    #cast:before
    {
        top: -10%;
        right: -160%;

        width: 200vh;
        height: 200vh;

        -webkit-animation-duration: 40s;
                animation-duration: 40s;
    }
}

#cast:after
{
    position: absolute;
    z-index: -1;
    top: 0;
    left: 0;

    width: 100vw;
    height: 100%;

    content: '';

    background: url(../images/cast_bg01.png) repeat left top transparent;
}

.cast__title
{
    position: absolute;
    top: 41px;
    right: 3%;
}

@media only screen and (max-height: 900px), (max-device-height: 900px)
{
    .cast__title
    {
        -webkit-transform: scale(.9);
            -ms-transform: scale(.9);
                transform: scale(.9);
        -webkit-transform-origin: top right;
            -ms-transform-origin: top right;
                transform-origin: top right;
    }
}

@media only screen and (max-height: 900px), (max-device-height: 900px)
{
    .cast__title
    {
        -webkit-transform: scale(.6);
            -ms-transform: scale(.6);
                transform: scale(.6);
        -webkit-transform-origin: top right;
            -ms-transform-origin: top right;
                transform-origin: top right;
    }
}

@media only screen and (max-width: 920px), (max-device-width: 920px)
{
    .cast__title
    {
        top: 40px;
        right: 40px;

        -webkit-transform: scale(.8);
            -ms-transform: scale(.8);
                transform: scale(.8);
        -webkit-transform-origin: top right;
            -ms-transform-origin: top right;
                transform-origin: top right;
    }
}

@media only screen and (max-width: 760px), (max-device-width: 760px)
{
    .cast__title
    {
        top: 20px;
        right: 20px;

        -webkit-transform: scale(.35);
            -ms-transform: scale(.35);
                transform: scale(.35);
        -webkit-transform-origin: top right;
            -ms-transform-origin: top right;
                transform-origin: top right;
    }
}

.cast__listItem__midori
{
    position: absolute;
    z-index: 10;
    right: 9%;
    bottom: -50px;

    display: block;
}

.cast__listItem__midori .name
{
    position: absolute;
    z-index: 11;
    top: 352px;
    left: -50px;
}

.cast__listItem__midori .thumb
{
    position: relative;
    z-index: 10;
}

.cast__listItem__midori .shadow01
{
    position: absolute;
    z-index: 9;
    top: 15px;
    right: -15px;
}

.cast__listItem__midori .shadow02
{
    position: absolute;
    z-index: 8;
    top: 30px;
    right: -30px;
}

@media only screen and (max-height: 900px), (max-device-height: 900px)
{
    .cast__listItem__midori
    {
        -webkit-transform: scale(.9);
            -ms-transform: scale(.9);
                transform: scale(.9);
        -webkit-transform-origin: bottom right;
            -ms-transform-origin: bottom right;
                transform-origin: bottom right;
    }
}

@media only screen and (max-height: 650px), (max-device-height: 650px)
{
    .cast__listItem__midori
    {
        -webkit-transform: scale(.65);
            -ms-transform: scale(.65);
                transform: scale(.65);
        -webkit-transform-origin: bottom right;
            -ms-transform-origin: bottom right;
                transform-origin: bottom right;
    }
}

@media only screen and (max-width: 920px), (max-device-width: 920px)
{
    .cast__listItem__midori
    {
        -webkit-transform: scale(.9);
            -ms-transform: scale(.9);
                transform: scale(.9);
        -webkit-transform-origin: bottom right;
            -ms-transform-origin: bottom right;
                transform-origin: bottom right;
    }
}

@media only screen and (max-width: 760px), (max-device-width: 760px)
{
    .cast__listItem__midori
    {
        right: 9%;
        bottom: 12px;

        -webkit-transform: scale(.4);
            -ms-transform: scale(.4);
                transform: scale(.4);
        -webkit-transform-origin: bottom right;
            -ms-transform-origin: bottom right;
                transform-origin: bottom right;
    }
}

.cast__listItem__wander
{
    position: absolute;
    z-index: 10;
    top: 70px;
    left: 7%;

    display: block;
}

.cast__listItem__wander .thumb
{
    position: relative;
    z-index: 10;
}

.cast__listItem__wander .name
{
    position: absolute;
    z-index: 11;
    top: 300px;
    left: -40px;
}

.cast__listItem__wander .shadow01
{
    position: absolute;
    z-index: 9;
    top: -15px;
    left: -15px;
}

.cast__listItem__wander .shadow02
{
    position: absolute;
    z-index: 8;
    top: -30px;
    left: -30px;
}

@media only screen and (max-height: 900px), (max-device-height: 900px)
{
    .cast__listItem__wander
    {
        -webkit-transform: scale(.9);
            -ms-transform: scale(.9);
                transform: scale(.9);
        -webkit-transform-origin: top left;
            -ms-transform-origin: top left;
                transform-origin: top left;
    }
}

@media only screen and (max-height: 650px), (max-device-height: 650px)
{
    .cast__listItem__wander
    {
        left: 12%;

        -webkit-transform: scale(.6);
            -ms-transform: scale(.6);
                transform: scale(.6);
        -webkit-transform-origin: top left;
            -ms-transform-origin: top left;
                transform-origin: top left;
    }
}

@media only screen and (max-width: 920px), (max-device-width: 920px)
{
    .cast__listItem__wander
    {
        top: 60px;
        left: 10%;

        -webkit-transform: scale(.9);
            -ms-transform: scale(.9);
                transform: scale(.9);
        -webkit-transform-origin: top left;
            -ms-transform-origin: top left;
                transform-origin: top left;
    }
}

@media only screen and (max-width: 760px), (max-device-width: 760px)
{
    .cast__listItem__wander
    {
        top: 29px;
        left: 40px;

        -webkit-transform: scale(.4);
            -ms-transform: scale(.4);
                transform: scale(.4);
        -webkit-transform-origin: top left;
            -ms-transform-origin: top left;
                transform-origin: top left;
    }
}

[class*='cast__listItemR']
{
    position: absolute;

    display: block;

    width: 180px;
    height: 180px;
}

[class*='cast__listItemR'] .thumb
{
    border: 6px solid;
    border-radius: 50%;
}

[class*='cast__listItemR'] .name
{
    position: absolute;
    bottom: -40px;
    left: calc(50% - 180px/2);

    display: block;
}

[class*='cast__listItemR'][class*='__muchisute']
{
    top: 42%;
    left: 43%;
}

[class*='cast__listItemR'][class*='__muchisute'] .thumb
{
    border-color: #db478d;
}

[class*='cast__listItemR'][class*='__kanabun']
{
    top: 22%;
    right: 16%;
}

[class*='cast__listItemR'][class*='__kanabun'] .thumb
{
    border-color: #d2d03f;
}

[class*='cast__listItemR'][class*='__arashi']
{
    top: 7%;
    right: 34%;
}

[class*='cast__listItemR'][class*='__arashi'] .thumb
{
    border-color: #d74512;
}

[class*='cast__listItemR'][class*='__benietsu']
{
    bottom: 27%;
    left: 10%;
}

[class*='cast__listItemR'][class*='__benietsu'] .thumb
{
    border-color: #edbe1c;
}

[class*='cast__listItemR'][class*='__akaza']
{
    bottom: 16%;
    left: 30%;
}

[class*='cast__listItemR'][class*='__akaza'] .thumb
{
    border-color: #1524b2;
}

@media only screen and (max-height: 900px), (max-device-height: 900px)
{
    [class*='cast__listItemR']
    {
        -webkit-transform: scale(.8);
            -ms-transform: scale(.8);
                transform: scale(.8);
    }
    [class*='cast__listItemR'][class*='__kanabun']
    {
        top: 22%;
        right: 22%;

        -webkit-transform-origin: top right;
            -ms-transform-origin: top right;
                transform-origin: top right;
    }
    [class*='cast__listItemR'][class*='__arashi']
    {
        top: 7%;
        right: 39%;

        -webkit-transform-origin: top right;
            -ms-transform-origin: top right;
                transform-origin: top right;
    }
    [class*='cast__listItemR'][class*='__benietsu']
    {
        bottom: 22%;

        -webkit-transform-origin: bottom left;
            -ms-transform-origin: bottom left;
                transform-origin: bottom left;
    }
    [class*='cast__listItemR'][class*='__muchisute']
    {
        top: 42%;
        left: 48%;
    }
}

@media only screen and (max-height: 650px), (max-device-height: 650px)
{
    [class*='cast__listItemR']
    {
        -webkit-transform: scale(.6);
            -ms-transform: scale(.6);
                transform: scale(.6);
    }
    [class*='cast__listItemR'][class*='__kanabun']
    {
        top: 22%;
        right: 22%;

        -webkit-transform-origin: top right;
            -ms-transform-origin: top right;
                transform-origin: top right;
    }
    [class*='cast__listItemR'][class*='__arashi']
    {
        top: 7%;
        right: 39%;

        -webkit-transform-origin: top right;
            -ms-transform-origin: top right;
                transform-origin: top right;
    }
    [class*='cast__listItemR'][class*='__benietsu']
    {
        bottom: 22%;

        -webkit-transform-origin: bottom left;
            -ms-transform-origin: bottom left;
                transform-origin: bottom left;
    }
}

@media only screen and (max-width: 920px), (max-device-width: 920px)
{
    [class*='cast__listItemR']
    {
        -webkit-transform: scale(.7);
            -ms-transform: scale(.7);
                transform: scale(.7);
    }
    [class*='cast__listItemR'][class*='__arashi']
    {
        top: 7%;
        right: 20%;
    }
    [class*='cast__listItemR'][class*='__kanabun']
    {
        top: 28%;
        right: 16%;
    }
}

@media only screen and (max-width: 760px), (max-device-width: 760px)
{
    [class*='cast__listItemR']
    {
        -webkit-transform: scale(.33);
            -ms-transform: scale(.33);
                transform: scale(.33);
    }
    [class*='cast__listItemR'][class*='__muchisute']
    {
        top: 60%;
        left: 35%;

        -webkit-transform-origin: top left;
            -ms-transform-origin: top left;
                transform-origin: top left;
    }
    [class*='cast__listItemR'][class*='__kanabun']
    {
        top: 31%;
        right: 19%;

        -webkit-transform-origin: top right;
            -ms-transform-origin: top right;
                transform-origin: top right;
    }
    [class*='cast__listItemR'][class*='__arashi']
    {
        top: 43%;
        right: 36%;

        -webkit-transform-origin: top right;
            -ms-transform-origin: top right;
                transform-origin: top right;
    }
    [class*='cast__listItemR'][class*='__benietsu']
    {
        bottom: 41%;
        left: 12%;

        -webkit-transform-origin: bottom left;
            -ms-transform-origin: bottom left;
                transform-origin: bottom left;
    }
    [class*='cast__listItemR'][class*='__akaza']
    {
        bottom: 11%;
        left: 18%;

        -webkit-transform-origin: bottom left;
            -ms-transform-origin: bottom left;
                transform-origin: bottom left;
    }
}

.cast__nameOther
{
    position: absolute;
    bottom: 41px;
    left: 41px;
}

@media only screen and (max-height: 650px), (max-device-height: 650px)
{
    .cast__nameOther
    {
        -webkit-transform: scale(.8);
            -ms-transform: scale(.8);
                transform: scale(.8);
        -webkit-transform-origin: bottom left;
            -ms-transform-origin: bottom left;
                transform-origin: bottom left;
    }
}

@media only screen and (max-width: 920px), (max-device-width: 920px)
{
    .cast__nameOther
    {
        bottom: 426px;
        left: 65px;

        -webkit-transform: scale(.8) rotate(90deg);
            -ms-transform: scale(.8) rotate(90deg);
                transform: scale(.8) rotate(90deg);
        -webkit-transform-origin: top left;
            -ms-transform-origin: top left;
                transform-origin: top left;
    }
}

@media only screen and (max-width: 760px), (max-device-width: 760px)
{
    .cast__nameOther
    {
        bottom: 181px;
        left: 34px;

        -webkit-transform: scale(.4) rotate(90deg);
            -ms-transform: scale(.4) rotate(90deg);
                transform: scale(.4) rotate(90deg);
        -webkit-transform-origin: top left;
            -ms-transform-origin: top left;
                transform-origin: top left;
    }
}

/*************************************************
	#music
*************************************************/
#music
{
    z-index: 0;

    display: none;

    background: url(../images/music_bg01.jpg) no-repeat left center #ff824b;
    -webkit-background-size: contain;
            background-size: contain;
}

#music:before,
#music:after
{
    position: absolute;
    z-index: 12;
    right: 0;
    left: 0;

    display: block;

    width: 100vw;
    height: 172px;

    content: '';
}

#music:before
{
    top: 30px;

    background: url(../images/music_bg_pattern01.png) repeat-x center transparent;
}

#music:after
{
    bottom: 30px;

    background: url(../images/music_bg_pattern02.png) repeat-x center transparent;
}

@media only screen and (max-height: 900px), (max-device-height: 900px)
{
    #music:before,
    #music:after
    {
        height: 100px;

        -webkit-background-size: 200px 100px;
                background-size: 200px 100px;
    }
    #music:before
    {
        top: 21px;
    }
    #music:after
    {
        bottom: 25px;
    }
}

@media only screen and (max-height: 650px), (max-device-height: 650px)
{
    #music:before,
    #music:after
    {
        height: 50px;

        -webkit-background-size: 100px 50px;
                background-size: 100px 50px;
    }
}

@media only screen and (max-width: 920px), (max-device-width: 920px)
{
    #music
    {
        background-position: left -13vh;
        -webkit-background-size: cover;
                background-size: cover;
    }
    #music:before,
    #music:after
    {
        height: 100px;

        -webkit-background-size: 200px 100px;
                background-size: 200px 100px;
    }
    #music:before
    {
        top: 21px;
    }
    #music:after
    {
        bottom: 25px;
    }
}

@media only screen and (max-width: 760px), (max-device-width: 760px)
{
    #music
    {
        background-position: left -13vh;
    }
    #music:before,
    #music:after
    {
        height: 50px;

        -webkit-background-size: 100px 50px;
                background-size: 100px 50px;
    }
    #music:before
    {
        top: 11px;
    }
    #music:after
    {
        bottom: 14px;
    }
}

.music__textArea
{
    position: absolute;
    z-index: 12;
    top: 30%;
    right: 7%;

    width: 480px;
    height: auto;

    color: #006478;
}

.music__textArea .music__title
{
    position: absolute;
    top: 12px;
    left: -120px;
}

.music__textArea .music_artist,
.music__textArea .music__song
{
    margin-bottom: 40px;

    text-align: right;
}

.music__textArea p
{
    line-height: 1.8;

    margin-bottom: 40px;

    text-align: center;
}

@media only screen and (max-height: 900px), (max-device-height: 900px)
{
    .music__textArea
    {
        top: 25%;
    }
    .music__textArea .music_artist,
    .music__textArea .music__song
    {
        margin-bottom: 20px;
    }
    .music__textArea p
    {
        margin-bottom: 20px;
    }
}

@media only screen and (max-width: 920px), (max-device-width: 920px)
{
    .music__textArea
    {
        top: auto;
        right: 0;
        bottom: 0;

        -webkit-box-sizing: border-box;
                box-sizing: border-box;
        width: 100vw;
        height: 60%;
        padding: 20px 20px 0;

        background: #ff824b;
    }
    .music__textArea .music__title
    {
        top: -7px;
        left: 25px;
    }
    .music__textArea .music_artist,
    .music__textArea .music__song
    {
        margin: 0 40px 20px auto;

        text-align: right;
    }
    .music__textArea .music_artist img,
    .music__textArea .music__song img
    {
        width: 100%;
        height: auto;
    }
    .music__textArea .music_artist
    {
        width: 60vw;
        margin: 0 auto 20px 25%;
    }
    .music__textArea .music__song
    {
        width: 70vw;
        margin: 0 auto 20px;
    }
    .music__textArea p
    {
        line-height: 1.6;

        margin-bottom: 30px;
    }
}

@media only screen and (max-width: 760px), (max-device-width: 760px)
{
    .music__textArea
    {
        top: auto;
        right: 0;
        bottom: 0;

        -webkit-box-sizing: border-box;
                box-sizing: border-box;
        width: 100vw;
        height: 70%;
        padding: 10px 20px 0;

        background: #ff824b;
    }
    .music__textArea .music__title
    {
        top: -7px;
        left: 25px;

        -webkit-transform: scale(.4);
            -ms-transform: scale(.4);
                transform: scale(.4);
        -webkit-transform-origin: top left;
            -ms-transform-origin: top left;
                transform-origin: top left;
    }
    .music__textArea .music_artist,
    .music__textArea .music__song
    {
        margin: 0 10px 10px auto;

        text-align: right;
    }
    .music__textArea .music_artist img,
    .music__textArea .music__song img
    {
        width: 100%;
        height: auto;
    }
    .music__textArea .music_artist
    {
        width: 60vw;
    }
    .music__textArea .music__song
    {
        width: 80vw;
    }
    .music__textArea p
    {
        font-size: 11.2px;
        line-height: 1.4;

        margin-bottom: 12px;

        text-align: left;
    }
    .music__textArea p br
    {
        display: none;
    }
}

.music__comment__btn01
{
    position: relative;
    z-index: 13;

    width: 250px;
    margin: 0 auto;
}

.music__comment__btn01 a
{
    font-family: '游ゴシック', 'Yu Gothic', '游ゴシック体', 'YuGothic', 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', 'Meiryo UI', 'メイリオ', Meiryo, 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif;
    font-size: 16.1px;
    line-height: 50px;

    display: block;

    -webkit-box-sizing: border-box;
            box-sizing: border-box;

    -webkit-transition: all .2s cubic-bezier(.47, 0, .745, .715);
            transition: all .2s cubic-bezier(.47, 0, .745, .715);
    text-align: center;
    text-decoration: none;
    letter-spacing: .1em;
    text-transform: uppercase;

    color: #006478;
    border: 2px solid #006478;
    background: #ff824b;
}

.music__comment__btn01 a span:before
{
    display: inline-block;

    width: 26px;
    height: 26px;
    margin-right: 10px;

    content: '';
    vertical-align: sub;

    background: url(../images/music_icon_comment.png) no-repeat center center transparent;
}

.music__comment__btn01 a:after
{
    position: absolute;
    z-index: -1;
    top: 10px;
    right: -5px;

    display: block;

    width: 250px;
    height: 50px;

    content: '';
    -webkit-transition: all .1s cubic-bezier(.47, 0, .745, .715);
            transition: all .1s cubic-bezier(.47, 0, .745, .715);

    background: #006478;
}

.music__comment__btn01:hover
{
    padding: 5px 0 0 5px;
}

.music__comment__btn01:hover a:after
{
    top: 9px;
    right: 0;
}

@media only screen and (max-width: 920px), (max-device-width: 920px)
{
    .music__comment__btn01
    {
        width: 60vw;
    }
    .music__comment__btn01 a:after
    {
        width: 60vw;
    }
}

@media only screen and (max-width: 760px), (max-device-width: 760px)
{
    .music__comment__btn01
    {
        width: 60vw;
    }
    .music__comment__btn01 a:after
    {
        width: 60vw;
    }
}

.modal_inner
{
    font-family: '游ゴシック', 'Yu Gothic', '游ゴシック体', 'YuGothic', 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', 'Meiryo UI', 'メイリオ', Meiryo, 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif;

    -webkit-box-sizing: border-box;
            box-sizing: border-box;
    padding: 20px;

    color: #006478;
    border: 12px double #006478;
    background-color: #fff;
}

.music__modal__title
{
    font-size: 25.2px;
    font-weight: bold;

    margin-bottom: 1em;
}

.music__modal__title span
{
    font-size: 14px;

    margin-left: 10px;
}

@media only screen and (max-width: 920px), (max-device-width: 920px)
{
    .music__modal__title span
    {
        display: block;
    }
}

@media only screen and (max-width: 760px), (max-device-width: 760px)
{
    .music__modal__title
    {
        font-size: 19.6px;
    }
    .music__modal__title span
    {
        font-size: 11.2px;

        display: block;
    }
}

.music__modal__text
{
    font-size: 14px;
    line-height: 1.6;

    margin-bottom: 2em;
}

/*************************************************
	#staff
*************************************************/
#staff
{
    z-index: 0;

    display: none;

    background: url(../images/staff_bg01.gif) no-repeat 0 -50px #ffef00;
    -webkit-background-size: contain;
            background-size: contain;
}

@media only screen and (max-height: 900px), (max-device-height: 900px)
{
    #staff
    {
        background-position: 0 -25vh;
        -webkit-background-size: 100vw 100vw;
                background-size: 100vw;
    }
}

@media only screen and (max-width: 920px), (max-device-width: 920px)
{
    #staff
    {
        background-position: center -80px;
        -webkit-background-size: 150vw 150vw;
                background-size: 150vw;
    }
}

@media only screen and (max-width: 760px), (max-device-width: 760px)
{
    #staff
    {
        background-position: center -38px;
        -webkit-background-size: 150vw 150vw;
                background-size: 150vw;
    }
}

.staff__title
{
    position: absolute;
    top: 120px;
    left: 150px;

    width: 460px;
    height: 190px;
}

.staff__title [class*='staff__titleParts']
{
    position: absolute;

    display: block;
}

.staff__title [class*='staff__titleParts'][class*='__01']
{
    top: 20px;
    left: 0;
}

.staff__title [class*='staff__titleParts'][class*='__02']
{
    top: 0;
    left: 156px;
}

.staff__title [class*='staff__titleParts'][class*='__03']
{
    top: 41px;
    left: 279px;
}

.staff__title [class*='staff__titleParts'][class*='__04']
{
    top: 3px;
    right: 10px;
}

.staff__title [class*='staff__titleParts'][class*='__05']
{
    right: 0;
    bottom: 26px;

    -webkit-transform: rotate(-14deg);
        -ms-transform: rotate(-14deg);
            transform: rotate(-14deg);
}

@media only screen and (max-height: 900px), (max-device-height: 900px)
{
    .staff__title
    {
        top: 80px;

        -webkit-transform: scale(.7);
            -ms-transform: scale(.7);
                transform: scale(.7);
        -webkit-transform-origin: top left;
            -ms-transform-origin: top left;
                transform-origin: top left;
    }
}

@media only screen and (max-width: 920px), (max-device-width: 920px)
{
    .staff__title
    {
        top: 100px;
        left: 12%;

        -webkit-transform: scale(.8);
            -ms-transform: scale(.8);
                transform: scale(.8);
        -webkit-transform-origin: top left;
            -ms-transform-origin: top left;
                transform-origin: top left;
    }
}

@media only screen and (max-width: 760px), (max-device-width: 760px)
{
    .staff__title
    {
        z-index: 15;
        top: 50px;
        left: 30px;

        -webkit-transform: scale(.4);
            -ms-transform: scale(.4);
                transform: scale(.4);
        -webkit-transform-origin: top left;
            -ms-transform-origin: top left;
                transform-origin: top left;
    }
}

.story__bottom
{
    font-family: 'Roboto Slab', Garamond, 'Times New Roman', '游明朝', 'Yu Mincho', '游明朝体', 'YuMincho', 'ヒラギノ明朝 Pro W3', 'Hiragino Mincho Pro', 'HiraMinProN-W3', 'HGS明朝E', 'MS P明朝', 'MS PMincho', serif;

    position: absolute;
    z-index: 12;
    right: 0;
    bottom: 0;
    left: 0;

    -webkit-box-sizing: border-box;
            box-sizing: border-box;
    height: 48%;
    padding: 10px 80px 0 200px;

    color: #e40057;
    background: #ffef00;
}

.story__bottom:after
{
    display: block;
    clear: both;

    content: ' ';
}

@media only screen and (max-width: 1100px), (max-device-height: 1100px)
{
    .story__bottom
    {
        height: 58%;
        padding: 10px 10% 0 20%;
    }
}

@media only screen and (max-height: 900px), (max-device-height: 900px)
{
    .story__bottom
    {
        height: 58%;
    }
    .story__bottom .story__leftTxt ul li
    {
        font-size: 22.4px;
        line-height: 1.4;

        margin-bottom: .2em;
    }
    .story__bottom .story__leftTxt ul li span
    {
        font-size: 11.2px;

        display: inline-block;
    }
    .story__bottom .story__rightTxt ul li
    {
        font-size: 12.6px;
        line-height: 1.4;

        margin-bottom: .2em;
    }
    .story__bottom .story__rightTxt ul li span
    {
        font-size: 11.2px;

        display: inline-block;
    }
}

@media only screen and (max-width: 920px), (max-device-width: 920px)
{
    .story__bottom
    {
        height: 65%;
        padding: 40px 80px;
    }
    .story__bottom .story__leftTxt,
    .story__bottom .story__rightTxt
    {
        float: none;

        width: 100%;
        padding: 0;
    }
    .story__bottom .story__leftTxt ul li,
    .story__bottom .story__rightTxt ul li
    {
        font-size: 12.6px;
        line-height: 1.4;

        margin-bottom: .2em;
    }
    .story__bottom .story__leftTxt ul li span,
    .story__bottom .story__rightTxt ul li span
    {
        display: inline-block;
    }
    .story__bottom .story__leftTxt
    {
        margin-bottom: 1.5em;
    }
    .story__bottom .story__rightTxt
    {
        width: 90vw;
    }
}

@media only screen and (max-width: 760px), (max-device-width: 760px)
{
    .story__bottom
    {
        height: 74%;
        padding: 10px 20px;
    }
    .story__bottom .story__leftTxt,
    .story__bottom .story__rightTxt
    {
        float: none;

        width: 100%;
        padding: 0;
    }
    .story__bottom .story__leftTxt ul li,
    .story__bottom .story__rightTxt ul li
    {
        font-size: 10.5px;
        line-height: 1.4;

        margin-bottom: .2em;
    }
    .story__bottom .story__leftTxt ul li span,
    .story__bottom .story__rightTxt ul li span
    {
        font-size: 7.7px;

        display: inline-block;
    }
    .story__bottom .story__rightTxt
    {
        width: 90vw;
    }
}

@media only screen and (max-width: 760px), (max-device-width: 760px)
{
    .ios.safari .story__bottom .story__leftTxt
    {
        margin-bottom: .5em;
    }
    .ios.safari .story__bottom ul li
    {
        font-size: 10.5px;
        line-height: 1.3;

        margin-bottom: .2em;
    }
    .ios.safari .story__bottom ul li span
    {
        font-size: 7.7px;

        display: inline-block;
    }
}

.story__leftTxt
{
    float: left;

    width: 34%;
    padding-top: 50px;
}

.story__leftTxt ul li
{
    font-size: 30.8px;
    line-height: 1;

    margin-bottom: 1em;
}

.story__rightTxt
{
    float: right;

    width: 62%;
}

.story__rightTxt ul li
{
    font-size: 18.2px;
    line-height: 1.6;
}

.story__leftTxt ul li,
.story__rightTxt ul li
{
    font-weight: bold;

    vertical-align: middle;
    letter-spacing: .1em;
}

.story__leftTxt ul li span,
.story__rightTxt ul li span
{
    font-size: 14px;

    vertical-align: middle;
}

#js__wave
{
    position: absolute;
    top: -99px;
    left: 0;

    display: block;

    width: 100%;
    height: 100px;
}

#js__wave svg
{
    position: absolute;
    top: 0;
    left: 0;

    display: block;

    width: 100%;
    height: 100px;
}

@media only screen and (max-width: 920px), (max-device-width: 920px)
{
    #js__wave
    {
        top: -95px;
    }
}

@media only screen and (max-width: 760px), (max-device-width: 760px)
{
    #js__wave
    {
        top: -49px;

        height: 50px;
    }
    #js__wave svg
    {
        height: 50px;
    }
}

/*************************************************
	#scroll01
*************************************************/
#scroll01
{
    position: absolute;
    z-index: -1;

    display: none;
    overflow: hidden;

    width: 100vw;
    height: 100%;

    opacity: 0;
    background: #222;

    -ms-filter: 'progid:DXImageTransform.Microsoft.Alpha(Opacity=0)';
}

#scroll01 .scroll01__parts01
{
    position: absolute;
    bottom: 0;
    left: calc(50% - 40vw);

    display: block;

    width: 80vw;
    height: auto;
}

@media only screen and (max-width: 760px), (max-device-width: 760px)
{
    #scroll01 .scroll01__parts01
    {
        bottom: 10%;
        left: calc(50% - 150vw/2);

        width: 150vw;
    }
}

#scroll01 canvas
{
    display: block;

    width: 100vw;
    height: 100%;

    vertical-align: bottom;
}

/*************************************************
	#scroll02
*************************************************/
#scroll02
{
    position: absolute;
    z-index: -1;

    display: none;
    overflow: hidden;

    width: 100vw;
    height: 100%;

    background: url(../images/scroll_bg01.png) repeat left top, -webkit-gradient(linear, left top, left bottom, from(#3660e7), color-stop(50%, #fbafcd), to(#e40057));
    background: url(../images/scroll_bg01.png) repeat left top, -webkit-linear-gradient(top, #3660e7 0%, #fbafcd 50%, #e40057 100%);
    background: url(../images/scroll_bg01.png) repeat left top, linear-gradient(to bottom, #3660e7 0%, #fbafcd 50%, #e40057 100%);
}

#scroll02 ul
{
    margin: -100px -100px 0;

    text-align: center;
}

#scroll02 ul li
{
    display: inline-block;

    margin: 60px;

    text-align: center;
}

@media only screen and (max-width: 760px), (max-device-width: 760px)
{
    #scroll02 ul li
    {
        width: 15vh;
        margin: 30px;
    }
    #scroll02 ul li img
    {
        width: 100%;
        height: auto;
    }
}

/* スマホ縦横判別用
**********************************/
#overlay
{
    position: fixed;
    z-index: 9999;
    top: 0;
    bottom: 0;
    left: 0;

    width: 100%;
    height: 100%;

    background: rgba(228, 0, 87, .8);
}

#overlay p
{
    font-family: '游ゴシック', 'Yu Gothic', '游ゴシック体', 'YuGothic', 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', 'Meiryo UI', 'メイリオ', Meiryo, 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif;
    font-size: 30px;
    font-weight: bold;

    margin-top: 20%;
    padding: 0 50px;

    text-align: center;

    color: #fff;
}

#overlay02
{
    position: fixed;
    z-index: 9999;
    top: 0;
    bottom: 0;
    left: 0;

    width: 100%;
    height: 100%;

    background: rgba(228, 0, 87, .8);
}

#overlay02 p
{
    font-family: '游ゴシック', 'Yu Gothic', '游ゴシック体', 'YuGothic', 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', 'Meiryo UI', 'メイリオ', Meiryo, 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif;
    font-size: 30px;
    font-weight: bold;

    margin-top: 20%;
    padding: 0 50px;

    text-align: center;

    color: #fff;
}

.ipad.ios body
{
    height: 100%;
}

.ipad.ios .wrapper
{
    height: 100%;
}

/*************************************************
	print
*************************************************/
@media print
{
    .load_parts01,
    .sec_block img
    {
        visibility: hidden;
    }
}