@charset "UTF-8";
a,
abbr,
acronym,
address,
applet,
b,
big,
blockquote,
body,
caption,
center,
cite,
code,
dd,
del,
dfn,
div,
dl,
dt,
em,
fieldset,
font,
form,
h1,
h2,
h3,
h4,
h5,
h6,
html,
i,
iframe,
img,
ins,
kbd,
label,
legend,
li,
object,
ol,
p,
pre,
q,
s,
samp,
small,
span,
strike,
strong,
sub,
sup,
table,
tbody,
td,
tfoot,
th,
thead,
tr,
tt,
u,
ul,
var {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    font-size: 100%;
    vertical-align: baseline;
    background: 0 0
}

body {
    line-height: 1
}

ol,
ul {
    list-style: none
}

blockquote,
q {
    quotes: none
}

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

:focus {
    outline: 0
}

ins {
    text-decoration: none
}

del {
    text-decoration: line-through
}

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

html {
    font-size: 62.5%;
    overflow: hidden
}

body {
    display: block;
    background-color: #000;
    color: #fff;
    font-family: 'Open Sans', sans-serif;
    font-weight: 100;
    overflow: hidden;
    position: absolute;
    width: 100%;
    height: 100%;
    -webkit-font-smoothing: antialiased
}

a {
    color: #fff;
    text-decoration: none;
    transition: opacity .3s;
    transition-timing-function: cubic-bezier(.165, .84, .44, 1)
}

a:hover {
    opacity: .8
}

header {
    position: relative;
    z-index: 2001
}

header h1 {
    position: fixed;
    font-weight: 100
}

header h1 .tit {
    font-size: 3.5rem
}

header h1 .tit span {
    letter-spacing: -.08em
}

header h1 .tit:after {
    position: relative;
    content: "";
    width: 20px;
    height: 1px;
    display: inline-block;
    background-color: #fff;
    top: -9px;
    margin-left: 20px
}

header h1 .sub_tit {
    position: relative;
    margin-left: 18px;
    font-size: 1.4rem;
    top: -5px
}

main #canvasContainer {
    width: 100%;
    height: 100%;
    position: relative;
    transition: transform .6s;
    transition-timing-function: cubic-bezier(.645, .045, .355, 1)
}

main #canvasContainer.open {
    transform: translate3d(500px, 0, 0)
}

main #canvasContainer #canvas.hide,
main #canvasContainer #canvas2.hide {
    display: none
}

main #canvasContainer #canvas {
    position: fixed;
    display: block
}

main #canvasContainer #canvas2 {
    position: fixed;
    display: block
}

main #menu {
    position: fixed;
    z-index: 1001;
    top: 0;
    width: 500px;
    background-color: #000;
    height: 100%;
    line-height: 2;
    display: table;
    transform: translate3d(-500px, 0, 0);
    transition: transform .6s;
    transition-timing-function: cubic-bezier(.645, .045, .355, 1)
}

main #menu.open {
    transform: translate3d(0, 0, 0)
}

main #menu nav.main_nav {
    position: fixed;
    top: 49px;
    left: 100px;
    font-size: 2rem;
    z-index: 1
}

main #menu nav.main_nav ul {
    display: flex
}

main #menu nav.main_nav ul li {
    line-height: 1;
    transition: opacity .3s;
    transition-timing-function: cubic-bezier(.165, .84, .44, 1);
    margin-right: 30px
}

main #menu nav.main_nav ul li:hover {
    opacity: .8
}

main #menu nav.icon_nav {
    position: absolute;
    font-size: 2rem;
    z-index: 2
}

main #menu nav.icon_nav ul li {
    display: inline-block;
    margin-right: 15px;
    transition: opacity .3s;
    transition-timing-function: cubic-bezier(.165, .84, .44, 1)
}

main #menu nav.icon_nav ul li:hover {
    opacity: .8
}

main #menu nav.icon_nav ul li:last-of-type {
    margin-right: 0
}

main #menu nav.tracks {
    position: absolute;
    left: 100px;
    top: 85px
}

main #menu nav.tracks ul {
    margin-top: 6px
}

main #menu nav.tracks>.tit {
    margin-bottom: 10px;
    font-size: 2rem
}

main #menu nav.tracks li {
    font-size: 2rem;
    margin-top: 10px;
    margin-bottom: 0;
    cursor: pointer;
    transition: opacity .3s;
    transition-timing-function: cubic-bezier(.165, .84, .44, 1);
    margin-left: 50px;
    position: relative;
    line-height: 1
}

main #menu nav.tracks li.current:before {
    content: "";
    position: absolute;
    width: 5px;
    height: 1px;
    background-color: #fff;
    display: inline-block;
    left: -15px;
    top: 13px
}

main #menu nav.tracks li:hover {
    opacity: .8
}

main #menu nav.tracks li .t_wrap {
    overflow: hidden;
    position: relative;
    display: inline-block;
    height: 22px
}

main #menu nav.tracks li .t_wrap span {
    vertical-align: baseline
}

main #menu nav.tracks li .t_wrap .t_chunk {
    position: relative;
    transition: transform 1.1s, opacity 0s;
    transition-timing-function: cubic-bezier(.165, .84, .44, 1);
    display: inline-block
}

main #menu nav.tracks li .t_wrap .t_child {
    display: inline-block;
    position: absolute;
    overflow: hidden;
    z-index: 2;
    top: 0;
    left: 0;
    overflow: hidden;
    transition: transform 1.1s;
    transition-timing-function: cubic-bezier(.165, .84, .44, 1);
    background-color: #000
}

main #menu nav.tracks li .t_wrap .t_child span {
    position: absolute;
    display: inline-block;
    transform-origin: left top;
    transition: left 1.1s, top 1.1s, transform 1.1s;
    transition-timing-function: cubic-bezier(.165, .84, .44, 1)
}

main #menu nav.tracks li .t_wrap .t_child2 {
    position: absolute;
    top: 0;
    left: 0;
    overflow: hidden;
    transition: width 1.1s, height 1.1s;
    transition-timing-function: cubic-bezier(.165, .84, .44, 1);
    height: 22px
}

main #menu nav.tracks li .t_wrap .t_child2 span {
    position: relative;
    display: inline-block;
    transition: transform .4s;
    transition-timing-function: cubic-bezier(.165, .84, .44, 1);
    transition-delay: 1s
}

main #menu nav.tracks li .t_wrap .t_child2.show {
    width: 100% !important
}

main #menu nav.tracks li .t_wrap .t_child3 {
    position: relative;
    display: inline-block;
    top: 0;
    left: 0;
    visibility: hidden;
    height: 22px
}

main #menu nav.tracks li .t_wrap .t_child3.space {
    width: 8.125px !important
}

main #menu .cp {
    position: absolute;
    right: 77px;
    bottom: 112px;
    font-size: 1rem;
    letter-spacing: .03em
}

main #menu .credit {
    position: absolute;
    right: 77px;
    bottom: 94px;
    font-size: 1rem;
    letter-spacing: -.015em
}

main #audio_ui {
    position: fixed;
    z-index: 1000;
    visibility: hidden;
    opacity: 0;
    transition: opacity .6s;
    transition-timing-function: cubic-bezier(.25, .46, .45, .94)
}

main #audio_ui.visible {
    visibility: visible
}

main #audio_ui.show {
    opacity: 1
}

main #audio_ui .track_tit {
    font-size: 1.8rem;
    margin-bottom: 20px;
    text-align: right
}

main #audio_ui .ui_child {
    display: flex;
    justify-content: flex-end
}

main #audio_ui .ui_child .bgm_setting {
    cursor: pointer;
    font-size: 2.1rem;
    transition: opacity .3s;
    transition-timing-function: cubic-bezier(.165, .84, .44, 1);
    top: -1px;
    position: relative
}

main #audio_ui .ui_child .bgm_setting span {
    transform: rotate(180deg);
    opacity: .5;
    display: inline-block
}

main #audio_ui .ui_child .bgm_setting.on span {
    opacity: 1;
    transform: rotate(0)
}

main #audio_ui .ui_child .bgm_setting:hover span {
    opacity: .8
}

main #audio_ui .ui_child .bgm_setting:hover:after {
    opacity: 1
}

main #audio_ui .ui_child .bgm_setting:after {
    pointer-events: none;
    opacity: 0;
    content: "Background play mode\AYou can play in the background";
    white-space: pre;
    background-color: #fff;
    padding: 10px;
    font-size: 1rem;
    color: #000;
    display: block;
    position: absolute;
    text-align: center;
    top: -50px;
    left: 50%;
    transform: translate3d(-50%, 0, 0);
    transition: opacity .3s;
    transition-timing-function: cubic-bezier(.165, .84, .44, 1);
    line-height: 1.5
}

main #audio_ui .ui_child .backward {
    cursor: pointer;
    margin-left: 15px;
    font-size: 1.4rem;
    transition: opacity .3s;
    transition-timing-function: cubic-bezier(.165, .84, .44, 1)
}

main #audio_ui .ui_child .backward:hover {
    opacity: .8
}

main #audio_ui .ui_child .play {
    cursor: pointer;
    margin-left: 10px;
    font-size: 1.4rem;
    transition: opacity .3s;
    transition-timing-function: cubic-bezier(.165, .84, .44, 1)
}

main #audio_ui .ui_child .play:hover {
    opacity: .8
}

main #audio_ui .ui_child .play svg:first-of-type {
    display: block
}

main #audio_ui .ui_child .play svg:nth-of-type(2) {
    display: none
}

main #audio_ui .ui_child .play.playing svg:first-of-type {
    display: none
}

main #audio_ui .ui_child .play.playing svg:nth-of-type(2) {
    display: block
}

main #audio_ui .ui_child .forward {
    cursor: pointer;
    margin-left: 10px;
    font-size: 1.4rem;
    transition: opacity .3s;
    transition-timing-function: cubic-bezier(.165, .84, .44, 1)
}

main #audio_ui .ui_child .forward:hover {
    opacity: .8
}

main #audio_ui .ui_child .vol {
    cursor: pointer;
    font-size: 1.8rem;
    margin-top: -2.5px;
    margin-left: 15px;
    width: 27px;
    transition: opacity .3s;
    transition-timing-function: cubic-bezier(.165, .84, .44, 1)
}

main #audio_ui .ui_child .vol:hover {
    opacity: .8
}

main #audio_ui .ui_child .vol svg:first-of-type {
    display: block
}

main #audio_ui .ui_child .vol svg:nth-of-type(2) {
    display: none
}

main #audio_ui .ui_child .vol.mute svg:first-of-type {
    display: none
}

main #audio_ui .ui_child .vol.mute svg:nth-of-type(2) {
    display: block
}

main #info_btn {
    position: fixed;
    cursor: pointer;
    visibility: hidden;
    opacity: 0;
    transition: opacity .6s;
    transition-timing-function: cubic-bezier(.25, .46, .45, .94)
}

main #info_btn.visible {
    visibility: visible
}

main #info_btn.show {
    opacity: 1
}

main #info_btn:hover {
    opacity: .8
}

main #info_btn .img {
    width: 100px;
    height: 100px;
    background-color: #fff;
    display: inline-block
}

main #info_btn .img img {
    width: 100%;
    height: 100%
}

main #info_btn .txt {
    margin-top: 10px;
    font-size: 1.6rem;
    line-height: 1;
    letter-spacing: -.04em
}

main #progress_bar {
    position: fixed;
    bottom: 0;
    height: 20px;
    cursor: pointer;
    opacity: 0;
    visibility: hidden;
    transition: opacity .6s;
    transition-timing-function: cubic-bezier(.25, .46, .45, .94)
}

main #progress_bar.visible {
    visibility: visible
}

main #progress_bar.show {
    opacity: 1
}

main #progress_bar .b_bar,
main #progress_bar .p_bar {
    top: 17px;
    width: 100vw;
    height: 3px
}

main #progress_bar .b_bar {
    position: relative;
    background-color: #666
}

main #progress_bar .p_bar {
    position: absolute;
    transform-origin: left top;
    transform: scaleX(0);
    background-color: #fff
}

main #open_btn {
    position: fixed;
    z-index: 1002;
    left: 50px;
    top: 50%;
    transform: translate3d(0, -50%, 0);
    cursor: pointer;
    visibility: hidden;
    opacity: 0;
    transition: opacity .6s;
    transition-timing-function: cubic-bezier(.165, .84, .44, 1)
}

main #open_btn.show {
    visibility: visible;
    opacity: 1
}

main #open_btn:hover {
    opacity: .8
}

main #open_btn.lock {
    pointer-events: none
}

main #open_btn .line {
    background-color: #fff;
    width: 20px;
    height: 1px;
    margin-bottom: 6px;
    transition: transform .4s;
    transition-timing-function: cubic-bezier(.165, .84, .44, 1)
}

main #open_btn.open .line:first-of-type {
    transform: translate3d(0, 15px, 0) rotate(45deg)
}

main #open_btn.open .line:nth-of-type(2) {
    transform: translate3d(0, 8px, 0) rotate(-45deg)
}

main #open_btn.open .line:nth-of-type(3) {
    transform: translate3d(0, 1px, 0) rotate(45deg)
}

main #open_btn.open .line:nth-of-type(4) {
    transform: translate3d(0, -5px, 0) rotate(-45deg)
}

main #open_btn.open .line:nth-of-type(5) {
    transform: translate3d(0, -12px, 0) rotate(45deg)
}

main #info {
    position: fixed;
    z-index: 2002;
    top: 0;
    background-color: rgba(0, 0, 0, .85);
    width: 100vw;
    height: 100%;
    display: none
}

main #info.show {
    display: block
}

main #info .close_btn {
    position: absolute;
    top: 50%;
    left: 50px;
    transform: translate3d(0, -50%, 0);
    cursor: pointer;
    transition: opacity .3s;
    transition-timing-function: cubic-bezier(.165, .84, .44, 1)
}

main #info .close_btn:hover {
    opacity: .8
}

main #info .close_btn .line {
    background-color: #fff;
    width: 20px;
    height: 1px;
    margin-bottom: 6px;
    transition: transform .4s;
    transition-timing-function: cubic-bezier(.165, .84, .44, 1)
}

main #info .close_btn .line:first-of-type {
    transform: translate3d(0, 7px, 0) rotate(45deg)
}

main #info .close_btn .line:nth-of-type(2) {
    transform: translate3d(0, 0, 0) rotate(-45deg)
}

main #info .info_child {
    width: 80vw;
    margin: 0 auto;
    display: flex;
    position: relative;
    top: 50%;
    transform: translate3d(0, -50%, 0)
}

main #info .info_child .img {
    width: auto;
    height: 40vw
}

main #info .info_child .img img {
    height: 100%
}

main #info .info_child .cont {
    margin-left: 50px
}

main #info .info_child .cont .txt {
    font-size: 3rem;
    line-height: 1.2
}

main #info .info_child .cont .links {
    margin-top: 50px
}

main #info .info_child .cont .links .head {
    font-size: 2rem;
    margin-bottom: 10px
}

main #info .info_child .cont .links li {
    font-size: 1.4rem;
    margin-bottom: 10px;
    margin-left: 10px
}

main #info .info_child .cont .links li a {
    transition: opacity .3s;
    transition-timing-function: cubic-bezier(.165, .84, .44, 1)
}

main #info .info_child .cont .links li a:hover {
    opacity: .8
}

main #sound_message {
    position: fixed;
    pointer-events: none;
    font-size: 1.8rem;
    white-space: nowrap;
    left: 50%;
    top: 50%;
    transform: translate3d(-50%, -70px, 0);
    opacity: 0;
    transition: opacity .6s;
    transition-timing-function: cubic-bezier(.165, .84, .44, 1)
}

main #sound_message.hide {
    display: none
}

main #sound_message.show {
    opacity: 1
}

main #start_play_btn {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate3d(-50%, -50%, 0);
    cursor: pointer;
    visibility: hidden;
    transition: opacity .6s;
    transition-timing-function: cubic-bezier(.165, .84, .44, 1);
    opacity: 0
}

main #start_play_btn.show {
    opacity: 1;
    visibility: visible
}

main #start_play_btn:hover {
    opacity: .8
}

main #start_play_btn.hide {
    display: none
}

main #announcement_for_ie {
    position: fixed;
    width: 100%;
    background: #000;
    padding: 20px;
    top: 50%;
    left: 50%;
    text-align: center;
    transform: translate(-50%, -50%);
    font-size: 2.7rem;
    display: none
}

main #announcement_for_ie.show {
    display: block
}

main #announcement_for_ie .icons {
    margin-top: 30px
}

main #announcement_for_ie .icons a {
    margin: 0 10px
}

@media screen and (max-height:630px) and (min-width:1024px) {
    main #menu nav.tracks ul {
        overflow-y: scroll;
        height: 50vh
    }
}

@media screen and (min-width:1024px) {
    .pc {
        display: block
    }
    .sp {
        display: none
    }
    header h1 {
        left: 50px;
        bottom: 40px
    }
    main #audio_ui {
        bottom: 40px;
        right: 50px
    }
    main #info_btn {
        bottom: 125px;
        right: 50px
    }
    main #menu nav.icon_nav {
        bottom: 145px;
        right: 77px
    }
}

@supports (-webkit-touch-callout:none) {
    body {
        height: -webkit-fill-available
    }
}

@media screen and (max-width:1023px) {
    .pc {
        display: none
    }
    .sp {
        display: block
    }
    header h1 {
        left: 20px;
        top: 20px
    }
    header h1 .tit {
        font-size: 2rem
    }
    header h1 .tit:after {
        margin-left: 7px;
        width: 10px;
        top: -5px
    }
    header h1 .sub_tit {
        margin-left: 7px;
        font-size: 1rem;
        top: -2px
    }
    main #canvasContainer.open {
        transform: translate3d(100vw, 0, 0)
    }
    main #menu {
        width: 100vw;
        transform: translate3d(-100vw, 0, 0)
    }
    main #menu nav.main_nav {
        font-size: 1.6rem
    }
    main #menu nav.main_nav {
        left: 60px;
        top: 80px
    }
    main #menu nav.icon_nav {
        bottom: 60px;
        right: 20px;
        font-size: 1.6rem
    }
    main #menu nav.icon_nav ul li {
        margin-right: 10px
    }
    main #menu nav.tracks {
        left: 60px;
        top: 120px
    }
    main #menu nav.tracks>.tit {
        font-size: 1.6rem
    }
    main #menu nav.tracks li {
        font-size: 1.8rem;
        margin-top: 0;
        margin-bottom: 12px;
        margin-left: 20px
    }
    main #menu nav.tracks li.current:before {
        top: 8px;
        left: -15px
    }
    main #menu nav.tracks li .t_wrap {
        height: 20px
    }
    main #menu nav.tracks li .t_wrap .t_child2,
    main #menu nav.tracks li .t_wrap .t_child3 {
        height: 20px
    }
    main #menu .cp {
        right: 20px;
        bottom: 35px
    }
    main #menu .credit {
        right: 20px;
        bottom: 20px
    }
    main #audio_ui {
        right: 20px;
        top: 24px
    }
    main #audio_ui .track_tit {
        margin-bottom: 10px;
        font-size: 1.5rem
    }
    main #audio_ui .ui_child {
        justify-content: flex-end
    }
    main #audio_ui .ui_child .bgm_setting {
        display: none
    }
    main #audio_ui .ui_child .backward {
        font-size: .9rem
    }
    main #audio_ui .ui_child .play {
        font-size: .9rem
    }
    main #audio_ui .ui_child .forward {
        font-size: .9rem
    }
    main #audio_ui .ui_child .vol {
        font-size: 1.1rem;
        margin-top: -.25vw;
        width: 18px
    }
    main #info_btn {
        right: 20px;
        top: 80px;
        text-align: right
    }
    main #info_btn .img {
        width: 50px;
        height: 50px
    }
    main #info_btn .txt {
        margin-top: 5px;
        font-size: 1.2rem
    }
    main #open_btn {
        left: 20px
    }
    main #info .close_btn {
        left: 20px
    }
    main #info .info_child {
        display: block;
        width: 60vw
    }
    main #info .info_child .cont {
        margin-top: 30px;
        margin-left: 0
    }
    main #info .info_child .cont .txt {
        font-size: 2rem
    }
    main #info .info_child .cont .links {
        margin-top: 30px
    }
    main #info .info_child .cont .links .head {
        font-size: 1.8rem
    }
    main #info .info_child .cont .links li {
        font-size: 1.4rem
    }
}

@media screen and (max-width:365px) {
    header h1 .tit {
        font-size: 1.8rem
    }
    header h1 .tit:after {
        width: 0
    }
    header h1 .sub_tit {
        display: none
    }
}

@media screen and (max-width:1023px) and (orientation:landscape) {
    main #menu nav.icon_nav {
        bottom: 110px
    }
    main #menu nav.tracks ul {
        display: flex;
        white-space: normal;
        flex-wrap: wrap;
        width: 100%;
        margin-left: 3vw
    }
    main #menu nav.tracks li {
        display: inline-block;
        width: 25vw;
        margin-bottom: 7px;
        margin-left: 20px
    }
    main #info .info_child {
        display: flex;
        width: 70vw
    }
    main #info .info_child .img {
        height: 33vw
    }
    main #info .info_child .cont {
        margin-top: 0;
        margin-left: 50px
    }
}