@charset "utf-8";

html{
font-size:100%;
}

body {
margin: 0;
padding: 0;
background-color: #152732;
font-family: sans-serif;
}

.main {
width: 1280px;
margin: 0 auto;
min-height: 100vh;
background-image: url("../image/mv.jpg");
background-repeat: no-repeat;
background-position: center top;
background-attachment: fixed;
background-size: cover;
box-sizing: border-box;
}

header {
position: fixed;
z-index: 999;
top: 0;
width: 1280px;
height: 150px;
background-color:rgba(21,40,50,0.85);
box-sizing: border-box;
}

.header-container {
position: relative;
margin-top: 0px;
width: 1280px;
height: 150px;
display: inline-block;
opacity: 0;
animation: fadeInDown 1s ease-in-out forwards;
animation-delay: 0.5s;
}

@keyframes fadeInDown {
0% {
opacity: 0;
transform: translateY(-50px);
}
100% {
opacity: 1;
transform: translateY(0);
}
}

.menu_logo {
position: absolute;
top: calc((150px - 123px) / 2);
left: 40px;
width: 280px;
height: 123px;
transition: filter 0.5s, transform 0.5s;
}

.menu_logo:hover {
filter: brightness(1.2);
transform: scale(1.1);
}

.menu_story {
position: absolute;
top: calc((150px - 41px) / 2);
left: 380px;
width: 154px;
height: 41px;
transition: filter 0.5s, transform 0.5s;
}

.menu_story:hover {
filter: brightness(1.2);
transform: scale(1.1);
}

.menu_character {
position: absolute;
top: calc((150px - 41px) / 2);
left: 580px;
width: 264px;
height: 41px;
transition: filter 0.5s, transform 0.5s;
}

.menu_character:hover {
filter: brightness(1.2);
transform: scale(1.1);
}

.menu_visual {
position: absolute;
top: calc((150px - 40px) / 2);
left: 880px;
width: 171px;
height: 40px;
transition: filter 0.5s, transform 0.5s;
}

.menu_visual:hover {
filter: brightness(1.2);
transform: scale(1.1);
}

.menu_spec {
position: absolute;
top: calc((150px - 41px) / 2);
left: 1080px;
width: 123px;
height: 41px;
transition: filter 0.5s, transform 0.5s;
}

.menu_spec:hover {
filter: brightness(1.2);
transform: scale(1.1);
}

.mv-container {
position: relative;
background-color: rgba(21,40,50);
margin-top: 150px;
width: 1280px;
height: 720px;
overflow: hidden;
display: inline-block;
}

.mv_visual {
position: absolute;
background-image: url('../image/mv.jpg');
top: 0px;
left: 0px;
width: 1280px;
height: 720px;
animation: fadeZoomIn 10s ease-in-out forwards;
}

@keyframes fadeZoomIn {
0% {
opacity: 0;
transform: scale(1);
}
30% {
opacity: 1;
}
100% {
opacity: 1;
transform: scale(1.1);
}
}

.mv_logo {
position: absolute;
background-image: url('../image/mv_logo.png');
top: 250px;
left: 600px;
width: 637px;
height: 405px;
opacity: 0;
animation: fadeZoomIn 10s ease-in-out forwards;
animation-delay: 0.5s;
}

.mv_staff {
position: absolute;
background-image: url('../image/mv_staff.png');
top: 520px;
left: 62px;
width: 520px;
height: 80px;
opacity: 0;
animation: fadeInUp 1.5s ease-in-out forwards;
animation-delay: 2s;
}

@keyframes fadeInUp {
0% {
opacity: 0;
transform: translateY(20px);
}
100% {
opacity: 1;
transform: translateY(0);
}
}

.mv_release {
position: absolute;
background-image: url('../image/mv_release.png');
top: 620px;
left: calc((1280px - 1162px) / 2);
width: 1162px;
height: 79px;
opacity: 0;
animation: fadeInUp 1.5s ease-in-out forwards;
animation-delay: 3s;
}

.story-container {
position: relative;
background-color: rgba(21,40,50,0.85);
margin-top: -7px;
width: 1280px;
height: 720px;
display: inline-block;
}

.story_text {
position: absolute;
background-image: url('../image/story_text.png');
top: calc((720px - 588px) / 2);
left: calc((1280px - 1068px) / 2);
width: 1068px;
height: 588px;
}

.character_lip {
position: relative;
background-image: url('../image/chara_lip_bg.jpg');
margin-top: -7px;
width: 1280px;
height: 500px;
display: inline-block;
overflow: hidden;
}

.lip_std {
position: absolute;
background-image: url('../image/chara_lip_std.png');
top: 0px;
left: 530px;
width: 906px;
height: 500px;
}

.lip_name {
position: absolute;
background-image: url('../image/chara_lip_name.png');
top: 20px;
left: 30px;
width: 481px;
height: 139px;
}

.lip_outline {
position: absolute;
background-image: url('../image/chara_lip_outline.png');
bottom: 35px;
left: 30px;
width: 555px;
height: 265px;
}

.lip_cv {
position: absolute;
background-image: url('../image/chara_lip_cv.png');
top: 390px;
right: 30px;
width: 343px;
height: 88px;
}

.character_fine {
position: relative;
background-image: url('../image/chara_fine_bg.jpg');
margin-top: -7px;
width: 1280px;
height: 500px;
display: inline-block;
overflow: hidden;
}

.fine_std {
position: absolute;
background-image: url('../image/chara_fine_std.png');
top: 0px;
left: 130px;
width: 563px;
height: 500px;
}

.fine_name {
position: absolute;
background-image: url('../image/chara_fine_name.png');
top: 20px;
right: 30px;
width: 620px;
height: 136px;
}

.fine_outline {
position: absolute;
background-image: url('../image/chara_fine_outline.png');
bottom: 35px;
right: 30px;
width: 553px;
height: 289px;
}

.fine_cv {
position: absolute;
background-image: url('../image/chara_fine_cv.png');
top: 390px;
left: 30px;
width: 343px;
height: 88px;
}

.character_rena {
position: relative;
background-image: url('../image/chara_rena_bg.jpg');
margin-top: -7px;
width: 1280px;
height: 500px;
display: inline-block;
overflow: hidden;
}

.rena_std {
position: absolute;
background-image: url('../image/chara_rena_std.png');
top: 0px;
left: 130px;
width: 1153px;
height: 500px;
}

.rena_name {
position: absolute;
background-image: url('../image/chara_rena_name.png');
top: 20px;
left: 30px;
width: 543px;
height: 134px;
}

.rena_outline {
position: absolute;
background-image: url('../image/chara_rena_outline.png');
bottom: 35px;
left: 30px;
width: 653px;
height: 290px;
}

.rena_cv {
position: absolute;
background-image: url('../image/chara_rena_cv.png');
top: 390px;
right: 30px;
width: 343px;
height: 88px;
}

.character_nephile {
position: relative;
background-image: url('../image/chara_nephile_bg.jpg');
margin-top: -7px;
width: 1280px;
height: 500px;
display: inline-block;
overflow: hidden;
}

.nephile_std {
position: absolute;
background-image: url('../image/chara_nephile_std.png');
top: 0px;
left: -140px;
width: 1056px;
height: 500px;
}

.nephile_name {
position: absolute;
background-image: url('../image/chara_nephile_name.png');
top: 20px;
right: 30px;
width: 346px;
height: 134px;
}

.nephile_outline {
position: absolute;
background-image: url('../image/chara_nephile_outline.png');
bottom: 35px;
right: 30px;
width: 704px;
height: 314px;
}

.nephile_cv {
position: absolute;
background-image: url('../image/chara_nephile_cv.png');
top: 390px;
left: 30px;
width: 343px;
height: 88px;
}

.visual-container {
position: relative;
background-color: rgba(21,40,50,0.85);
margin-top: -7px;
width: 1280px;
height: 720px;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}

.image-grid {
width: 1280px;
margin: 0 auto;
display: grid;
grid-template-columns: 480px 480px;
justify-content: center;
column-gap: 30px;
row-gap: 30px;
justify-items: center;
}

.img-box {
width: 480px;
height: 270px;
border-radius: 20px;
padding: 2px;
background: white;
position: relative;
overflow: hidden;
box-shadow: 0 0 15px 5px rgba(215, 0, 88, 0.25);
}

.img-box img {
width: 100%;
height: 100%;
border-radius: 18px;
object-fit: cover;
display: block;
transition: filter 0.5s, transform 0.5s;
}

.img-box:hover img {
filter: brightness(1.2);
transform: scale(1.05);
}

.spec-container {
position: relative;
background-color: rgba(21,40,50);
margin-top: -7px;
width: 1280px;
height: 720px;
display: inline-block;
}

.spec_bg {
position: absolute;
background-image: url('../image/mv.jpg');
top: 0px;
left: 0px;
width: 1280px;
height: 720px;
opacity: 0.25;
}

.spec_mv {
position: absolute;
background-image: url('../image/spec_mv_logo.png');
top: calc((720px - 261px) / 2);
left: 120px;
width: 411px;
height: 261px;
}

.spec_text {
position: absolute;
background-image: url('../image/spec_text.png');
top: calc((720px - 590px) / 2);
right: 40px;
width: 601px;
height: 587px;
}

footer {
position: relative;
background-color: #152732;
margin-top: -7px;
width: 1280px;
height: 200px;
display: inline-block;
}

.triangle_logo {
position: absolute;
top: calc((200px - 98px) / 2);
left: calc((1280px - 193px) / 2);
width: 193px;
height: 98px;
transition: filter 0.5s, transform 0.5s;
}

.triangle_logo:hover {
filter: brightness(1.2);
transform: scale(1.1);
}

.partition_box {
position: relative;
background-color: #152732;
margin-top: -7px;
width: 1280px;
height: 80px;
display: inline-block;
}

.index_story {
position: absolute;
background-image: url('../image/index_story.png');
top: calc((80px - 50px) / 2);
left: calc((1280px - 194px) / 2);
width: 194px;
height: 50px;
}

.index_character {
position: absolute;
background-image: url('../image/index_character.png');
top: calc((80px - 50px) / 2);
left: calc((1280px - 341px) / 2);
width: 341px;
height: 50px;
}

.index_visual {
position: absolute;
background-image: url('../image/index_visual.png');
top: calc((80px - 50px) / 2);
left: calc((1280px - 209px) / 2);
width: 209px;
height: 50px;
}

.index_spec {
position: absolute;
background-image: url('../image/index_spec.png');
top: calc((80px - 50px) / 2);
left: calc((1280px - 160px) / 2);
width: 160px;
height: 50px;
}

.fadein {
opacity: 0;
transition: opacity 1.5s ease;
}

.fadein.active {
opacity: 1;
}

.fadein-left {
opacity: 0;
transform: translateX(-50px);
transition: all 1.5s ease;
}

.fadein-left.active {
opacity: 1;
transform: translateX(0);
}

.fadein-right {
opacity: 0;
transform: translateX(50px);
transition: all 1.5s ease;
}

.fadein-right.active {
opacity: 1;
transform: translateX(0);
}