@charset "utf-8";

html{
font-size:100%;
}

body {
margin: 0;
padding: 0;
background-color: #040000;
font-family: "M PLUS 1p", "メイリオ", "Hiragino Kaku Gothic ProN", sans-serif;
}

main {
position: relative;
width: 1280px;
margin: 0 auto;
min-height: 100vh;
box-sizing: border-box;
}

main::before {
content: "";
position: fixed;
left: 50%;
top: 0;
transform: translateX(-50%);
width: 1280px;
height: 100vh;
background: url("../image/fairy_break_mv.jpg") no-repeat center top / cover;
opacity: 0.5;
pointer-events: none;
z-index: 0;
}

main > * {
position: relative;
z-index: 1;
}

header {
position: fixed;
z-index: 999;
top: 0;
width: 1280px;
height: 150px;
background-color:rgba(4,0,0,0.75);
box-sizing: border-box;
transform: translate(-150px);
animation: menuDropDown 1.5s ease-in-out forwards;
}

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

img {
width: 100%;
}

.menu-container {
position: relative;
margin-top: 0px;
width: 1280px;
height: 150px;
display: inline-block;
}

.menu_logo {
position: absolute;
top: calc((150px - 110px) / 2);
left: 50px;
width: auto;
height: 110px;
display: block;
transition: filter 0.5s, transform 0.5s;
}

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

.menu_button {
display: flex;
gap: 20px;
margin-top: calc((150px - 120px) / 2);;
margin-left: 400px;
}

.menu_button_base {
position: relative;
display: flex;
justify-content: center;
align-items: center;
width: 250px;
height: 120px;
background: rgba(255,255,255,0.5);
border-radius: 20px;
box-shadow: inset 0 5px 10px rgba(0,0,0,0.50);
overflow: hidden;
}

.btn_bg {
position: absolute;
top: 50%;
left: 50%;
width: 213px;
height: 85px;
background: url("../image/button_bg.png");
opacity: 0;
pointer-events: none;
transform: translate(-50%, -50%) scale(1);
transition: opacity 0.4s, transform 0.4s;
z-index: 1;
}

.menu_button_base:hover .btn_bg {
opacity: 1;
transform: translate(-50%, -50%) scale(1.06);
}

.menu_story {
position: relative;
top: 0;
left: 0; 
width: 208px;
height: 39px;
object-fit: contain;
z-index: 2;
display: block;
transition: transform 0.3s, filter 0.3s;
}

.menu_character {
position: relative;
top: 0;
left: 0; 
width: 208px;
height: 39px;
object-fit: contain;
z-index: 2;
display: block;
transition: transform 0.3s, filter 0.3s;
}

.menu_spec {
position: relative;
top: 0;
left: 0; 
width: 208px;
height: 39px;
object-fit: contain;
z-index: 2;
display: block;
transition: transform 0.3s, filter 0.3s;
}

.menu_button_base:hover .menu_story,
.menu_button_base:hover .menu_character,
.menu_button_base:hover .menu_spec {
transform: scale(1.10);
filter: brightness(1.25) drop-shadow(0 0 8px #fff8);
}

.mv-container {
position: relative;
margin-top: 0px;
width: 1280px;
height: 1806px;
background-color: #040000;
display: inline-block;
overflow: hidden;
}

.mv {
position: absolute;
width: 1280px;
height: 1806px;
margin: 0 auto;
background: url("../image/fairy_break_mv.jpg");
opacity: 0;
display: inline-block;
transform-origin: top center;
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);
}
}

.copy {
position: absolute;
width: 184px;
height: 783px;
top: 250px;
right: 40px;
background: url("../image/copy.png");
display: inline-block;
opacity: 0;
animation: fadeInLarge 1.5s ease-in-out forwards;
animation-delay: 1.5s;
transition: filter 0.5s;
}

@keyframes fadeInLarge {
0% {
opacity: 0;
transform: scale(1.2);
}
100% {
opacity: 1;
transform: scale(1);
}
}

.logo {
position: absolute;
width: 1230px;
height: 477px;
bottom: 320px;
left: calc((1280px - 1230px) / 2);
background: url("../image/fairy_break_logo.png");
display: inline-block;
opacity: 0;
animation: fadeInLarge 1.5s ease-in-out forwards;
animation-delay: 1.5s;
transition: filter 0.5s;
}

.release_base {
position: absolute;
width: 1280px;
height: 300px;
bottom: 0;
left: 0;
background-color: rgba(4,0,0,0.75);
transform: translate(300px);
animation: FadeUp 1.5s ease-in-out forwards;
}

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

.release {
position: absolute;
width: 907px;
height: 55px;
bottom: 210px;
left: calc((1280px - 907px) / 2);
background: url("../image/release.png");
opacity: 0;
animation: fadeInLarge 1.5s ease-in-out forwards;
animation-delay: 1.5s;
transition: filter 0.5s;
}

.staff {
position: absolute;
width: 666px;
height: 163px;
bottom: 30px;
left: calc((1280px - 666px) / 2);
background: url("../image/staff.png");
opacity: 0;
animation: fadeInLarge 1.5s ease-in-out forwards;
animation-delay: 1.5s;
transition: filter 0.5s;
}

.line_title {
position: relative;
margin-top: 0px;
width: 1280px;
height: 100px;
background: url(../image/line_title.png);
display: inline-block;
}

.title_story {
position: absolute;
width: 276px;
height: 60px;
top: calc((100px - 60px) / 2);
left: calc((1280px - 276px) / 2);
background: url("../image/title_story.png");
}

.title_character {
position: absolute;
width: 343px;
height: 60px;
top: calc((100px - 60px) / 2);
left: calc((1280px - 343px) / 2);
background: url("../image/title_character.png");
}

.title_spec {
position: absolute;
width: 293px;
height: 60px;
top: calc((100px - 60px) / 2);
left: calc((1280px - 293px) / 2);
background: url("../image/title_spec.png");
}

.story_base {
position: relative;
margin-top: -7px;
width: 1280px;
height: 650px;
background-color: rgba(4,0,0,0.5);
display: flex;
justify-content: center;
align-items: center;
}

.story_text {
font-size: 24px;
font-weight: bold;
letter-spacing: 3px;
text-align: center;
color: #040000;
text-shadow:
2px 2px 0 #fff,
-2px 2px 0 #fff,
2px -2px 0 #fff,
-2px -2px 0 #fff,
0px 2px 0 #fff,
2px 0px 0 #fff,
-2px 0px 0 #fff,
0px -2px 0 #fff;
}

.story_text_sub {
font-size: 24px;
font-weight: bold;
letter-spacing: 3px;
color: #D70058;
text-align: center;
text-shadow:
2px 2px 0 #fff,
-2px 2px 0 #fff,
2px -2px 0 #fff,
-2px -2px 0 #fff,
0px 2px 0 #fff,
2px 0px 0 #fff,
-2px 0px 0 #fff,
0px -2px 0 #fff;
}

.story_text p {
margin: 6px 0;
line-height: 1.7;
}

.story_text .big_space {
margin: 50px 0;
height: 0;
}

.character_base {
position: relative;
margin-top: -7px;
width: 1280px;
height: 500px;
background-color: rgba(4,0,0,0.75);
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
}

.partition {
position: relative;
margin-top: 0;
width: 1280px;
height: 20px;
background-color: rgba(4,0,0,0.9);
display: inline-block;
}

.visual_snow {
position: absolute;
width: 1280px;
height: 500px;
top: 0;
left: 0;
background: url("../image/visual_fairy_snow.png");
transition: filter 0.5s, transform 0.5s;
}

.visual_silk {
position: absolute;
width: 1280px;
height: 500px;
top: 0;
left: 0;
background: url("../image/visual_fairy_silk.png");
transition: filter 0.5s, transform 0.5s;
}

.visual_bullet {
position: absolute;
width: 1280px;
height: 500px;
top: 0;
left: 0;
background: url("../image/visual_fairy_bullet.png");
transition: filter 0.5s, transform 0.5s;
}

.character_base:hover .visual_snow,
.character_base:hover .visual_silk,
.character_base:hover .visual_bullet {
filter: brightness(1.1);
transform: scale(1.05);
}

.profile_box {
position: relative;
margin-top: 0px;
margin-left: 0px;
width: 1280px;
height: 500px;
display: inline-block;
}

.name_snow {
position: absolute;
width: 467px;
height: 102px;
top: 40px;
left: 40px;
background: url("../image/name_fairy_snow.png");
}

.cv_snow {
position: absolute;
width: 137px;
height: 53px;
top: 140px;
left: 365px;
background: url("../image/cv_fairy_snow.png");
}

.words_snow {
position: absolute;
width: 89px;
height: 446px;
top: calc((500px - 446px) / 2);
right: 40px;
background: url("../image/words_fairy_snow.png");
}

.name_silk {
position: absolute;
width: 467px;
height: 103px;
top: 40px;
left: 40px;
background: url("../image/name_fairy_silk.png");
}

.cv_silk {
position: absolute;
width: 218px;
height: 53px;
top: 140px;
left: 285px;
background: url("../image/cv_fairy_silk.png");
}

.words_silk {
position: absolute;
width: 89px;
height: 448px;
top: calc((500px - 448px) / 2);
right: 40px;
background: url("../image/words_fairy_silk.png");
}

.name_bullet {
position: absolute;
width: 523px;
height: 103px;
top: 40px;
left: 40px;
background: url("../image/name_fairy_bullet.png");
}

.cv_bullet {
position: absolute;
width: 225px;
height: 53px;
top: 140px;
left: 335px;
background: url("../image/cv_fairy_bullet.png");
}

.words_bullet {
position: absolute;
width: 89px;
height: 446px;
top: calc((500px - 446px) / 2);
right: 40px;
background: url("../image/words_fairy_bullet.png");
}

.profile_text {
position: absolute;
bottom: 40px;
left: 40px;
font-size: 24px;
font-weight: bold;
letter-spacing: 3px;
text-align: left;
color: #A4005A;
text-shadow:
2px 2px 0 #fff,
-2px 2px 0 #fff,
2px -2px 0 #fff,
-2px -2px 0 #fff,
0px 2px 0 #fff,
2px 0px 0 #fff,
-2px 0px 0 #fff,
0px -2px 0 #fff;
}

.profile_text p {
margin: 6px 0;
line-height: 1.4;
}

.spec_base {
position: relative;
margin-top: -7px;
width: 1280px;
height: 654px;
background-color: rgba(4,0,0,0.85);
display: flex;
justify-content: center;
align-items: center;
}

.spec_mv {
position: absolute;
top: 0px;
left: 0px;
width: 464px;
height: 654px;
display: block;
background: url("../image/fairy_break_mv.jpg");
background-size: cover;
}

.spec_logo {
position: absolute;
top: 20px;
right: 150px;
width: 536px;
height: 208px;
display: block;
background: url("../image/fairy_break_logo.png");
background-size: cover;
}

.spec_staff {
position: absolute;
top: 230px;
right: 200px;
width: 442px;
height: 108px;
display: block;
background: url("../image/staff.png");
background-size: cover;
}

.spec {
position: absolute;
bottom: 10px;
right: 5px;
width: 804px;
height: 284px;
display: block;
background: url("../image/spec.png");
background-size: cover;
}

footer {
position: relative;
background-color: rgba(4,0,0,0.95);
margin-top: 0px;
width: 1280px;
height: 250px;
display: block;
}

.triangle_logo {
position: absolute;
top: calc((250px - 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);
}

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

.fadein.active {
opacity: 1;
}

.fadein-left {
opacity: 0;
transform: translateX(-50px);
transition: all 1.5s ease; /* ←ここをシンプルな"ease"に！ */
}

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

.fadein-right {
opacity: 0;
transform: translateX(50px);   /* 右に50pxずらす */
transition: all 1.5s ease;     /* バウンド感なし */
}

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