@charset 'UTF-8';
/*----------------------------------------------------------------------------------
Ctrl + F
	基本指定
	ローディング画面
	メインメニュー
	タイトル
	本文
	メインテーマ
	界層
	movie
	coming soon
	アプリダウンロード
	誘導リンク
	フッター
	キーフレーム
	メディアクエリ
----------------------------------------------------------------------------------*/


/*----------------------------------------------------------------------------------
	基本指定
----------------------------------------------------------------------------------*/
*
{
    box-sizing: border-box;  margin: 0;  padding: 0;
}

html,
body
{
    font-family: 'Helvetica Neue', Arial, 'Hiragino Kaku Gothic ProN', 'Hiragino Sans', Meiryo, sans-serif;  font-size: 14px;  line-height: 1.8;  width: 100%;  height: 100%;  transform-origin: 0 0;  color: #fff;  background: #000;
}

h1,
h2,
h3,
h4,
h5,
h6
{
    font-size: 0;  font-weight: normal;  line-height: 0;
}

img
{
    vertical-align: bottom;  border: 0;
}
.pic
{
    display: flex;  align-items: center;  justify-content: center;  margin: 10px auto;
}

a,
.tap
{
    transition: .2s ease-in;  text-decoration: none;  color: #fff;  -webkit-tap-highlight-color: rgba(0,0,0,0);
}
a:hover,
.hover
{
    opacity: .5;  color: #d6dbff;
}
li
{
    list-style-type: none;
}

.flex
{
    display: flex;  align-items: center;  justify-content: center;
}
.flex_top
{
    display: flex;  align-items: flex-start;  justify-content: center;
}

.left
{
    text-align: left !important;
}
.right
{
    text-align: right;
}
.center
{
    justify-content: center !important;  text-align: center !important;
}

.visible
{
    display: block;
}
.hidden
{
    display: none !important;
}

.particle_blue,
.particle_red
{
    position: relative;
}
.particle_blue::before,
.particle_red::before
{
    position: absolute;  z-index: 20;  top: 0;  left: 50%;  display: block;  content: '';  transform: translateX(-50%);
}
.particle_blue::before
{
    background: url(../img/bg_particle_blue.png) no-repeat;
}
.particle_red::before
{
    background: url(../img/bg_particle_red.png) no-repeat;
}

article
{
    overflow: hidden;          -webkit-transform-origin: left top;                  transform-origin: left top;  background: url(../img/bg_star.png);
}
.box
{
    position: relative;  z-index: 30;  margin: 0 auto;
}
.bg_fog
{
    background: url(../img/bg_fog.png) no-repeat;  background-size: 100%;
}


/*----------------------------------------------------------------------------------
	ローディング画面
----------------------------------------------------------------------------------*/
#loader
{
    position: absolute;  z-index: 9999;  display: flex;  align-items: center;  justify-content: center;  width: 100%;  height: 100%;  background: #000;
}
#loader p
{
    line-height: 2;  animation: fadeIn .5s ease-in;  text-align: center;
}
#loader .sp
{
    display: none;
}


/*----------------------------------------------------------------------------------
	メインメニュー
----------------------------------------------------------------------------------*/
nav
{
    position: fixed;  z-index: 100;  top: 0;  left: 0;          -webkit-transform-origin: left top;                  transform-origin: left top;
}

nav h3
{
    position: absolute;  z-index: 110;  top: 28px;  right: 28px;  margin: 0 2px 2px 2px;  cursor: pointer;
}
h3 span,
h3 span:before,
h3 span:after
{
    position: absolute;  display: block;  height: 2px;  content: '';  transition: .3s ease-in;  border-radius: 3px;  background-color: #fff;
}
.open h3 span::before
{
    bottom: 0;
}
.open h3 span
{
    background-color: rgba(255, 255, 255, 0);
}
.open h3 span::after
{
    top: 0;  transform: rotate(45deg);
}


nav .hamburger_menu
{
    display: flex;    align-items: flex-start;  justify-content: center;  height: 200vh;   background: rgba(0,0,0,.95);
}


nav ul
{
    position: absolute;  top: 100px;  height: 200vh; margin-right: 100px;
}
nav ul::before
{
    position: absolute;  top: 0;  left: -30px;  display: block;  width: 26px;  height: 739px;  content: '';  background: url(../img/nav_line.png) no-repeat;
}
nav ul::after
{
    position: absolute;  bottom: -50px;  left: -30px;  display: block;  width: 26px;  height: 52px;  content: '';  background: url(../img/nav_dot.png) repeat-y;
}
nav li
{
    margin-top: 59px;
}
nav li:first-of-type
{
    position: relative;  left: -30px;  margin-top: -20px;
}
nav li:nth-of-type(2)
{
    margin-top: 62px;
}
nav [id*='btn_'] a
{
    display: inline-block;  height: 32px;  transition: none;  text-indent: -9999px;  background-repeat: no-repeat !important;
}
nav [id*='btn_'] a:hover,
nav [id*='btn_'] a.hover
{
    position: relative;  opacity: 1;  background-position: 0 -32px !important;
}
nav [id*='btn_'] a:hover::after,
nav [id*='btn_'] a.hover::after
{
    position: absolute;  top: 20px;  left: -100px;  display: block;  width: 256px;  height: 13px;  content: '';  background: url(../img/nav_bg.png) no-repeat;  background-size: 256px 13px;
}
nav #btn_01 a
{
    width: 56px;  background: url(../img/nav_btn_01.png);  background-size: 56px 64px;
}
nav #btn_02 a
{
    width: 114px;  background: url(../img/nav_btn_02.png);  background-size: 114px 64px;
}
nav #btn_03 a
{
    width: 75px;  background: url(../img/nav_btn_03.png);  background-size: 75px 64px;
}
nav #btn_04 a
{
    width: 77px;  background: url(../img/nav_btn_04.png);  background-size: 77px 64px;
}
nav #btn_05 a
{
    width: 77px;  background: url(../img/nav_btn_05.png);  background-size: 77px 64px;
}
nav #btn_06 a
{
    width: 77px;  background: url(../img/nav_btn_06.png);  background-size: 77px 64px;
}
nav #btn_07 a
{
    width: 77px;  background: url(../img/nav_btn_07.png);  background-size: 77px 64px;
}
nav #btn_08 a
{
    width: 140px;  background: url(../img/nav_btn_08.png);  background-size: 140px 64px;
}
nav #btn_09 a
{
    width: 77px;  background: url(../img/nav_btn_09.png);  background-size: 77px  64px;
}


nav > a
{
    position: absolute;  z-index: 110;  right: 28px;  display: block;  overflow: hidden;  margin: 0;  white-space: nowrap;  text-indent: 100%;  background-repeat: no-repeat !important;
}
nav > a.twitter
{
    background: url(../img/icon_twitter.png);
}
nav > a.sound
{
    cursor: pointer;
}
nav > a.sound.on
{
    background: url(../img/icon_sound_on.png);
}
nav > a.sound.off
{
    background: url(../img/icon_sound_off.png);
}

a.update
{
    font-family: 'Noto Serif JP', serif;  font-weight: bold;  position: absolute;  z-index: 110;  display: flex;  align-items: center;  justify-content: center;  cursor: pointer;  color: #f0e3a0;  background: url(../img/btn_new.png);
}

/*----------------------------------------------------------------------------------
	タイトル
----------------------------------------------------------------------------------*/
header .box
{
    position: relative;  z-index: 10;  animation: fadeIn 3.0s ease-in;  background-color: #000 !important;  background-repeat: no-repeat !important;  background-position: center bottom !important;
}
header h1
{
    position: relative;  z-index: 30;  margin: 0 auto;  animation: slideUp 2.0s ease-in;  background: url(../img/title_header.png) no-repeat;
}
header p
{
    z-index: 30;  overflow: hidden;  margin: 0 auto;  animation: fadeIn 2.5s ease-in;  white-space: nowrap;  text-indent: 100%;  background: url(../img/introduction_header.png) no-repeat;
}


/*----------------------------------------------------------------------------------
	本文
----------------------------------------------------------------------------------*/
#main,
[id*='layer_']
{
    padding-top: 50px;
}

#main h2,
[id*='layer_'] h2
{
    margin: 0 auto 50px auto;  opacity: 0;  background-repeat: no-repeat !important;
}
[id*='layer_'] .introduction
{
    overflow: hidden;  margin: 0 auto 50px auto;  white-space: nowrap;  text-indent: 100%;  opacity: 0;  background-repeat: no-repeat !important;
}

#main h3,
[id*='layer_'] h3
{
    background: url(../img/theme_route.png) no-repeat;
}

[id='layer_1stAnv'] h3
{
    background: url(../img/theme_1stAnv.png) no-repeat;
}

[id='layer_6th'] h3
{
    background: url(../img/theme_climax.png) no-repeat;
}
[id*='layer_'] .cover
{
    background-repeat: no-repeat !important;
}
.cover a
{
    position: relative;  display: block;
}
.cover a::before
{
    position: absolute;  content: '';  animation: fadeIn 1.0s ease-in;  background: url(../img/icon_cover_open.png);  background-repeat: no-repeat !important;
}
.cover.active a::before
{
    animation: slideUp .2s ease-in;  background: url(../img/icon_cover_close.png);
}

.interview
{
    display: none;  padding-bottom: 50px;
}
.interview img.pic
{
    position: relative;  z-index: 30;
}
.interview img.pic.ss
{
    margin: 40px auto;
}
.interview h5
{
    background: url(../img/text_interview.png) no-repeat;
}
.interview h6
{
    font-size: 28px;  font-weight: bold;  line-height: 1.5;  color: #aa8;
}
.interview p
{
    font-size: 18px;  margin-bottom: 15px;
}

.interview h6,
.interview p:not(.movie p)
{
    font-family: 'Noto Serif JP', serif;
}


/*----------------------------------------------------------------------------------
	メインテーマ
----------------------------------------------------------------------------------*/
#main h2
{
    background: url(../img/title_main.png);
}
#main h3
{
    background: url(../img/theme_main.png);
}
#main .cover a
{
    margin: 0 auto;  opacity: 0;  background: url(../img/cover_main.png);
}


/*----------------------------------------------------------------------------------
	界層
----------------------------------------------------------------------------------*/
#layer_1st h2
{
    background: url(../img/title_1st.png);
}
#layer_2nd h2
{
    background: url(../img/title_2nd.png);
}
#layer_3rd h2
{
    background: url(../img/title_3rd.png);
}
#layer_4th h2
{
    background: url(../img/title_4th.png);
}
#layer_5th h2
{
    background: url(../img/title_5th.png);
}
#layer_1stAnv h2
{
    background: url(../img/title_1stAnv.png);
}
#layer_6th h2
{
    background: url(../img/title_6th.png);
}



/*----------------------------------------------------------------------------------
	movie
----------------------------------------------------------------------------------*/
.movie
{
    position: relative;  text-align: center;
}
.movie iframe
{
    position: relative;  z-index: 20;  border: 2px solid #fff;
}


/*----------------------------------------------------------------------------------
	coming soon
----------------------------------------------------------------------------------*/
#coming
{
    overflow: hidden;  margin: 100px auto;  white-space: nowrap;  text-indent: 100%;  background-repeat: no-repeat !important;  background-position: center !important;
}


/*----------------------------------------------------------------------------------
	アプリダウンロード
----------------------------------------------------------------------------------*/
#store
{
    margin: 0 auto 100px auto;
}
#store a
{
    display: block;  margin: 0 20px;
}
#store a img
{
    width: auto;  height: 47px;
}


/*----------------------------------------------------------------------------------
	誘導リンク
----------------------------------------------------------------------------------*/
#news
{
    margin: 0 auto 100px auto;
}
#news h2
{
    overflow: hidden;  width: 231px;  height: 39px;  margin: 0 auto 20px auto;  white-space: nowrap;  text-indent: 100%;  background: url(../img/text_news.png) no-repeat;  background-size: 231px 39px;
}
#news .twitter_account
{
    position: relative;  width: 550px;  height: 575px;  margin: 0 auto 30px;  background: #000;
}
#news .twitter_button
{
    text-align: center;
}

#guide
{
    position: relative;  margin: 0 auto 100px auto;  padding-top: 80px;  text-align: center;  border-top: 1px solid #343338;
}
#guide h2
{
    overflow: hidden;  width: 318px;  height: 39px;  margin: 0 auto 20px auto;  white-space: nowrap;  text-indent: 100%;  background: url(../img/text_bnr_chainchronicle.png) no-repeat;  background-size: 318px 39px;
}
#guide a
{
    display: block;  width: 440px;  height: 110px;  margin: 0 auto;
}


/*----------------------------------------------------------------------------------
	フッター
----------------------------------------------------------------------------------*/
footer
{
    position: relative;  z-index: 90;  width: 100%;  padding-bottom: 50px;  text-align: center;  background: #000;
}

footer ul
{
    align-items: center;  justify-content: center;  background-color: #171420;
}

footer .attention
{
    margin: 0 auto;
}


/*----------------------------------------------------------------------------------
	キーフレーム
----------------------------------------------------------------------------------*/
@keyframes fadeIn
{
    0%
    {
        opacity: 0;
    }
    100%
    {
        opacity: 1;
    }
}
@keyframes slideUp
{
    0%
    {
        transform: translateY(100px);  opacity: 0;
    }
    100%
    {
        transform: translateY(0px);  opacity: 1;
    }
}
@keyframes slideDown
{
    0%
    {
        transform: translateY(-100px);  opacity: 0;
    }
    100%
    {
        transform: translateY(0px);  opacity: 1;
    }
}
@keyframes slideLeft
{
    0%
    {
        transform: translateX(-100px);  opacity: 0;
    }
    100%
    {
        transform: translateX(0px);  opacity: 1;
    }
}
@keyframes slideRight
{
    0%
    {
        transform: translateX(100px);  opacity: 0;
    }
    100%
    {
        transform: translateX(0px);  opacity: 1;
    }
}