@charset "utf-8";

html{
font-size:100%;
}

body {
margin: 0;
padding: 0;
background-color: #1D1919;
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/common/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: relative;
top: 0;
width: 1280px;
height: 130px;
background-color:rgba(4,0,0,0.75);
box-sizing: border-box;
}

body.top header {
position: fixed;
z-index: 999;
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: 130px;
display: inline-block;
}

.menu_button {
display: flex;
gap: 30px;
justify-content: center;
align-items: center;
height: 100%;
margin: 0;
}

.menu_button_base {
position: relative;
display: flex;
justify-content: center;
align-items: center;
width: 180px;
height: 100px;
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: 164px;
height: 65px;
background: url("../image/common/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: 150px;
height: 30px;
object-fit: contain;
z-index: 2;
display: block;
transition: transform 0.3s, filter 0.3s;
}

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

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

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

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

.menu_shop {
position: relative;
top: 0;
left: 0; 
width: 146px;
height: 29px;
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_gallery,
.menu_button_base:hover .menu_download,
.menu_button_base:hover .menu_event,
.menu_button_base:hover .menu_shop {
transform: scale(1.10);
filter: brightness(1.25) drop-shadow(0 0 8px #fff8);
}

.menu_button_base.disabled {
pointer-events: none;
opacity: 0.5;
filter: grayscale(100%);
cursor: default;
}

/* インデックス */
.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);
}

.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/common/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/top/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/common/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/common/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/common/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/common/line_title.png");
display: inline-block;
}

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

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

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

.title_gallery {
position: absolute;
width: 277px;
height: 63px;
top: calc((100px - 63px) / 2);
left: calc((1280px - 277px) / 2);
background: url("../image/gallery/title_gallery.png");
}

.title_download {
position: absolute;
width: 341px;
height: 63px;
top: calc((100px - 63px) / 2);
left: calc((1280px - 341px) / 2);
background: url("../image/download/title_download.png");
}

.title_event {
position: absolute;
width: 241px;
height: 63px;
top: calc((100px - 63px) / 2);
left: calc((1280px - 241px) / 2);
background: url("../image/event/title_event.png");
}

.title_pre_order {
position: absolute;
width: 294px;
height: 61px;
top: calc((100px - 61px) / 2);
left: calc((1280px - 294px) / 2);
background: url("../image/shop/title_pre_order.png");
}

.title_shop {
position: absolute;
width: 294px;
height: 61px;
top: calc((100px - 61px) / 2);
left: calc((1280px - 294px) / 2);
background: url("../image/shop/title_shop.png");
}

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

hr.partition {
border: none;
height: 50px;
background-color: #1D1919;
width: 1280px;
margin: -6px auto;
}

.information_base {
position: relative;
margin-top: -7px;
width: 1280px;
min-height: 300px;
background-color: rgba(4,0,0,0.5);
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: flex-start;
gap: 40px;
padding: 40px 0;
}

.news_bg {
position: relative;
width: 520px;
height: 280px;
background: url("../image/top/news_bg.png") no-repeat center/cover;
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.6);
border-radius: 20px;
overflow: hidden;
opacity: 0;
transform: translateY(20px) scale(0.9);
will-change: transform, opacity;
}

.news_bg.is-visible {
animation: popIn 0.7s cubic-bezier(0.25, 1.3, 0.5, 1) var(--reveal-delay, 0ms) forwards;
}

@keyframes popIn {
0%   { opacity: 0; transform: translateY(20px) scale(0.9); }
60%  { opacity: 1; transform: translateY(-6px) scale(1.02); }
80%  { opacity: 1; transform: translateY(3px)  scale(0.99); }
100% { opacity: 1; transform: translateY(0)    scale(1.00); }
}

.news_content{
position:absolute;
inset:0;
padding:70px 24px 20px;
color:#fff;
}

.news_date{
position:absolute;
top:5px;
left:24px;
font-size:28px;
font-weight:700;
color:#ffd8e8;
}

.news_text{
font-size:21px;
font-weight:700;
line-height:1.5;
text-shadow:0 0 6px rgba(0,0,0,.8);
}

.index_base {
position: relative;
background: url("../image/common/index_bg.jpg") no-repeat center/cover;
margin-top: 0px;
width: 1280px;
height: 250px;
background-color: rgba(4,0,0,0.5);
display: flex;
justify-content: center;
align-items: center;
}

.title_logo {
position: absolute;
width: 420px;
height: 163px;
top: calc((250px - 163px) / 2);
left: 25px;
transition: filter 0.5s, transform 0.5s;
}

.title_logo:hover {
filter: brightness(1.2);
transform: scale(1.05);
}

.index_title_story {
position: absolute;
width: 273px;
height: 86px;
bottom: 15px;
right: 15px;
background: url("../image/story/index_title_story.png") no-repeat center/cover;
transition: filter 0.5s, transform 0.5s;
}

.index_title_character {
position: absolute;
width: 464px;
height: 68px;
bottom: 15px;
right: 15px;
background: url("../image/character/index_title_character.png") no-repeat center/cover;
transition: filter 0.5s, transform 0.5s;
}

.index_title_gallery {
position: absolute;
width: 361px;
height: 86px;
bottom: 15px;
right: 15px;
background: url("../image/gallery/index_title_gallery.png") no-repeat center/cover;
transition: filter 0.5s, transform 0.5s;
}

.index_title_download {
position: absolute;
width: 435px;
height: 67px;
bottom: 15px;
right: 15px;
background: url("../image/download/index_title_download.png") no-repeat center/cover;
transition: filter 0.5s, transform 0.5s;
}

.index_title_event {
position: absolute;
width: 256px;
height: 66px;
bottom: 15px;
right: 15px;
background: url("../image/event/index_title_event.png") no-repeat center/cover;
transition: filter 0.5s, transform 0.5s;
}

.index_title_shop {
position: absolute;
width: 222px;
height: 67px;
bottom: 15px;
right: 15px;
background: url("../image/shop/index_title_shop.png") no-repeat center/cover;
transition: filter 0.5s, transform 0.5s;
}

/* ストーリー */
.story_base {
position: relative;
margin-top: -7px;
width: 1280px;
height: 1516px;
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/character/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/character/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/character/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/character/name_fairy_snow.png");
}

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

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

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

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

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

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

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

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

.profile_text {
position: absolute;
bottom: 110px;
left: 40px;
font-size: 21px;
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;
}

.voice_icon_container {
position: absolute;
bottom: 10px;
left: 30px;
display: flex;
gap: 0px;
}

.voice_icon {
width: 88px;
height: 88px;
transition: filter 0.5s, transform 0.5s;
}

.voice_icon:hover {
filter: brightness(1.2);
transform: scale(1.05);
}

.change_icon_container {
position: absolute;
bottom: 10px;
right: 10px;
display: flex;
flex-direction: column;
gap: 0px;
}

.change_icon {
width: 203px;
height: 138px;
transition: filter 0.5s, transform 0.5s;
}

.change_icon:hover {
filter: brightness(1.2);
transform: scale(1.05);
}


/* ギャラリー */
.gallery_base {
position: relative;
margin-top: -7px;
width: 1280px;
background-color: rgba(4,0,0,0.5);
padding: 50px 0;
box-sizing: border-box;
display: block;
}

.gallery_area {
width: 100%;
margin: 0 auto;
display: grid;
grid-template-columns: repeat(3, 365px);
gap: 30px;
justify-content: center;
}

.gallery_area img {
width: 365px;
height: 205px;
object-fit: cover;
display: block;
border-radius: 20px;
border: 2px solid #fff;
box-shadow: 0 0 0 4px #040000;
transition: filter 0.5s, transform 0.5s;
}

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

.gallery_area img[src*="common_thumb.jpg"]:hover {
filter: none;
transform: none;
}

/* ダウンロード */
.download_base {
margin-top: -7px;
width: 1280px;
background-color: rgba(4,0,0,0.5);
padding: 50px 0;
box-sizing: border-box;
display: flex;
flex-direction: column;
align-items: center;
gap: 50px;
}

.dl_contents_box {
position: relative;
margin-top: 30px;
margin-left: 0px;
left: 0px;
width: 1200px;
height: 900px;
display: inline-block;
}

.dl_contents_base {
position: absolute;
background-image: url('../image/download/download_bg_a.jpg');
border-radius: 20px;
top: 0px;
left: 0px;
width: 1200px;
height: 900px;
}

.dl_contents_base2 {
position: absolute;
background-image: url('../image/download/download_bg_b.jpg.png');
border-radius: 20px;
top: 0px;
left: 0px;
width: 1200px;
height: 900px;
}

.theme_song_index {
position: absolute;
background-image: url('../image/download/song_title.png');
top: 15px;
left: calc((1200px - 1053px) / 2);
width: 1053px;
height: 65px;
}

.song_youtube {
position: absolute;
top: 140px;
left: calc((1200px - 960px) / 2);
width: 960px;
height: 540px;
border-radius: 20px;
box-shadow: 0px 5px 15px 0 rgb(0, 0, 0, 0.4);
}

.lyric_button_text {
position: absolute;
background-image: url('../image/download/lyric_button_text.png');
bottom: 58px;
left: 140px;
width: 253px;
height: 113px;
}

.lyric_button {
position: absolute;
bottom: 65px;
left: 410px;
width: 83px;
height: 100px;
transition: filter 0.5s, transform 0.5s;
}

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

.download_button2 {
position: absolute;
bottom: 80px;
right: 180px;
width: 406px;
height: 91px;
transition: filter 0.5s, transform 0.5s;
}

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

.dl_text1 {
position: absolute;
top: 825px;
left: 50%;
transform: translateX(-50%);
color: #d70159;
font-size: 18px;
text-shadow: 
-1px -1px 0 #fff,  
1px -1px 0 #fff,
-1px  1px 0 #fff,
1px  1px 0 #fff;
}

.dl_text2 {
position: absolute;
top: 825px;
right: 205px;
color: #d70159;
font-size: 18px;
text-shadow: 
-1px -1px 0 #fff,  
1px -1px 0 #fff,
-1px  1px 0 #fff,
1px  1px 0 #fff;
}

/* 店舗特典 */
.shop_base {
margin-top: -7px;
width: 1280px;
background-color: rgba(4,0,0,0.5);
padding: 50px 0;
box-sizing: border-box;
display: flex;
flex-direction: column;
align-items: center;
gap: 50px;
}

.shop_item {
display: flex;
flex-direction: column;
align-items: center;
gap: 0px;
}

.shop_row {
display: flex;
justify-content: center;
gap: 50px;
width: 100%;
}

.shop_button {
width: 286px;
height: 56px;
transition: filter 0.3s, transform 0.3s;
}

.shop_button:hover {
filter: brightness(1.2);
transform: scale(1.05);
}

.shop_button_row {
display: flex;
justify-content: center;
gap: 40px;
margin-top: 0px;
}

.shop_button_item {
display: flex;
flex-direction: column;
align-items: center;
gap: 0px;
}

.shop_note {
font-size: 18px;
color: #fff;
text-align: center;
}

/* 商品概要 */
.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/common/fairy_break_mv.jpg");
background-size: cover;
}

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

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

.spec {
position: absolute;
bottom: 10px;
right: 5px;
width: 804px;
height: 284px;
display: block;
background: url("../image/common/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;
}

.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);
}