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


/*----------------------------------------------------------------------------------
	基本指定
----------------------------------------------------------------------------------*/
.particle_blue::before,
.particle_red::before
{
    width: 1440px;  height: 800px;
}
article
{
    width: 100%;
}
.box
{
    width: 100%;
}
.bg_fog
{
    background-position: center 300px !important;
}

/*----------------------------------------------------------------------------------
	メインメニュー
----------------------------------------------------------------------------------*/
nav
{
    width: 100%;
}

nav h3
{
    width: 20px;  height: 20px;
}
h3 span,
h3 span:before,
h3 span:after
{
    width: 20px;
}
h3 span:before
{
    top: -7px;
}
h3 span
{
    top: 9px;
}
h3 span:after
{
    top: 7px;
}
.open h3 span::before
{
    transform: translateY(7px) rotate(-45deg);
}

nav .hamburger_menu
{
    width: 100%;
}

nav > a
{
    width: 24px;  height: 24px;
}
nav > a.twitter
{
    top: 68px;
}
nav > a.sound
{
    top: 110px;
}

a.update
{
    font-size: 20px;  top: 20px;  left: 20px;  width: 350px;  height: 72px;  background-size: 350px 72px !important;/*
	width: 300px;
	height: 61px;
	background-size: 300px 61px !important;*/
}


/*----------------------------------------------------------------------------------
	タイトル
----------------------------------------------------------------------------------*/
header
{
    margin-bottom: 200px;
}
header .box
{
    width: 950px;  height: 1750px;  padding-top: 150px;  background: url(../img/cover_header.png);
}
header h1
{
    width: 462px;  height: 81px;  background-size: 462px 81px !important;
}
header p
{
    width: 698px;  height: 159px;  margin-top: 120px;  background-size: 698px 159px !important;
}


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

[id*='layer_'] h2
{
    width: 720px;  height: 244px;  background-size: 720px 244px !important;
}
[id*='layer_'] .introduction
{
    width: 950px;
}

#main h3,
[id*='layer_'] h3
{
    width: 876px;  height: 58px;  margin: 120px auto 0 auto;
}
#main .cover,
[id*='layer_'] .cover
{
    margin: 40px auto 0 auto;
}
.cover a::before
{
    right: 30px;  bottom: 30px;  width: 120px;  height: 120px;
}
[id*='layer_'] .cover a::before
{
    right: 45px;  bottom: 10px;  width: 90px;  height: 90px;  background-size: 90px 90px;
}

.interview
{
    width: 950px;  margin: 0 auto;
}
.interview img.pic
{
    width: 450px;  height: 450px;
}
.interview img.pic.ss
{
    width: 900px;  height: 506px;
}
.interview h5
{
    width: 950px;  height: 89px;  margin: 150px auto -20px auto;  background-size: 950px 89px !important;
}
.interview h6
{
    margin: 70px auto 30px auto;
}
.interview img.pic + h6
{
    margin-top: 0;
}

/*----------------------------------------------------------------------------------
	メインテーマ
----------------------------------------------------------------------------------*/
#main .box
{
    padding-bottom: 100px;
}
#main h2
{
    width: 720px;  height: 366px;  background-size: 720px 366px !important;
}
#main .cover,
#main .cover a
{
    width: 700px;  height: 700px;
}
#main .cover a
{
    background-size: 700px 700px !important;
}


/*----------------------------------------------------------------------------------
	界層
----------------------------------------------------------------------------------*/
[id*='layer_'] .cover,
[id*='layer_'] .cover a
{
    width: 950px;  height: 244px;
}

#layer_1st .introduction
{
    height: 593px;  background: url(../img/introduction_1st.png);
}
#layer_1st .cover.route_a a
{
    background: url(../img/cover_1st_a.png);
}
#layer_1st .cover.route_b a
{
    background: url(../img/cover_1st_b.png);
}

#layer_2nd .introduction
{
    height: 715px;  background: url(../img/introduction_2nd.png);
}
#layer_2nd .cover.route_a a
{
    background: url(../img/cover_2nd_a.png);
}
#layer_2nd .cover.route_b a
{
    background: url(../img/cover_2nd_b.png);
}

#layer_3rd .introduction
{
    height: 595px;  background: url(../img/introduction_3rd.png);
}
#layer_3rd .cover.route_a a
{
    background: url(../img/cover_3rd_a.png);
}
#layer_3rd .cover.route_b a
{
    background: url(../img/cover_3rd_b.png);
}

#layer_4th .introduction
{
    height: 712px;  background: url(../img/introduction_4th.png);
}
#layer_4th .cover.route_a a
{
    background: url(../img/cover_4th_a.png);
}
#layer_4th .cover.route_b a
{
    background: url(../img/cover_4th_b.png);
}

#layer_5th .introduction
{
    height: 712px;  background: url(../img/introduction_5th.png);
}
#layer_5th .cover.route_a a
{
    background: url(../img/cover_5th_a.png);
}
#layer_5th .cover.route_b a
{
    background: url(../img/cover_5th_b.png);
}

#layer_1stAnv .introduction
{
    height: 715px;  background: url('../img/introduction_1stAnv.png');
}
#layer_1stAnv .cover.route_1 a
{
    background: url(../img/cover_1stAnv_1.png);
}
#layer_1stAnv .cover.route_2 a
{
    background: url(../img/cover_1stAnv_2.png);
}
#layer_1stAnv .cover.route_3 a
{
    background: url(../img/cover_1stAnv_3.png);
}

#layer_6th .introduction
{
    height: 712px;  background: url(../img/introduction_6th.png);
}
#layer_6th .cover.route_a a
{
    background: url(../img/cover_6th_a.png);
}
#layer_6th .cover.route_b a
{
    background: url(../img/cover_6th_b.png);
}
#layer_6th .cover.route_c1 a
{
    background: url(../img/cover_6th_c1.png);
}
#layer_6th .cover.route_c2 a
{
    background: url(../img/cover_6th_c2.png);
}



/*----------------------------------------------------------------------------------
	movie
----------------------------------------------------------------------------------*/
.movie
{
    margin: 80px auto -56px auto;
}
.movie p
{
    margin-bottom: 40px;
}
.movie iframe
{
    width: 740px;  height: 416px;  margin-bottom: 48px;
}


/*----------------------------------------------------------------------------------
	coming soon
----------------------------------------------------------------------------------*/
#coming
{
    height: 622px;  background: url(../img/comingsoon_bg.png);
}


/*----------------------------------------------------------------------------------
	誘導リンク
----------------------------------------------------------------------------------*/
#news .twitter_account
{
    border: 1px solid #2f3336;
}

#guide
{
    width: 800px;
}


/*----------------------------------------------------------------------------------
	フッター
----------------------------------------------------------------------------------*/
footer ul
{
    display: flex;  border-top: 1px solid #35333d;
}
footer li
{
    padding: 20px;
}

footer img
{
    width: 90px;  height: 30px;  margin: 40px auto 20px auto;
}
footer .attention
{
    font-size: 12px;
}