@charset "utf-8";

body{
width: 100%;
max-width: 1280px;
margin: auto;
}

.main {
margin-top: auto;
margin-left: auto;
margin-right: auto;
width: auto;
height: auto;
text-align: center;
}

header {
position: fixed;
z-index: 999;
top: 0;
width: 1280px;
height: 150px;
background-color:rgba(209,192,165,0.5);
box-sizing: border-box;
}

img {
width: 100%;
}

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

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

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

.vc7_logo {
position: absolute;
top: calc((150px - 84px) / 2);
right: 40px;
width: 955px;
height: 84px;
transition: filter 0.5s;
}

.vc7_logo:hover {
filter: brightness(1.4);
}

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

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

.mv_text {
position: absolute;
bottom: 360px;
left: 90px;
width: 974px;
height: 103px;
}

.mv_release {
position: absolute;
bottom: 200px;
left: calc((1280px - 1091px) / 2);
width: 1091px;
height: 140px;
}

.shop_button {
position: absolute;
bottom: 50px;
right: 90px;
width: 463px;
height: 121px;
transition: filter 0.5s, transform 0.5s;
}

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

.track01-container {
position: relative;
margin-top: -7px;
width: 1280px;
height: 530px;
display: inline-block;
}

.track01_index {
background-image: url('../image/track_index01.jpg');
position: absolute;
top: 0px;
left: 0px;
width: 50px;
height: 350px;
}

.track01_base {
position: absolute;
background-image: url('../image/track_base01.png');
top: 15px;
left: 70px;
width: 1200px;
height: 315px;
box-shadow: 1px 2px 5px 0px #362e2b;
border-radius: 20px;
}

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

.track02_index {
background-image: url('../image/track_index02.jpg');
position: absolute;
top: 0px;
right: 0px;
width: 50px;
height: 350px;
}

.track02_base {
position: absolute;
background-image: url('../image/track_base02.png');
top: 15px;
left: 10px;
width: 1200px;
height: 315px;
box-shadow: 1px 2px 5px 0px #362e2b;
border-radius: 20px;
}

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

.track03_index {
background-image: url('../image/track_index03.jpg');
position: absolute;
top: 0px;
left: 0px;
width: 50px;
height: 350px;
}

.track03_base {
position: absolute;
background-image: url('../image/track_base03.png');
top: 15px;
left: 70px;
width: 1200px;
height: 315px;
box-shadow: 1px 2px 5px 0px #362e2b;
border-radius: 20px;
}

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

.track04_index {
background-image: url('../image/track_index04.jpg');
position: absolute;
top: 0px;
right: 0px;
width: 50px;
height: 350px;
}

.track04_base {
position: absolute;
background-image: url('../image/track_base04.png');
top: 15px;
left: 10px;
width: 1200px;
height: 315px;
box-shadow: 1px 2px 5px 0px #362e2b;
border-radius: 20px;
}

.listen_button_a {
position: absolute;
top: 240px;
left: 100px;
width: 220px;
height: 65px;
box-shadow: 1px 2px 5px 0px #362e2b;
border-radius: 30px;
transition: filter 0.5s, transform 0.5s;
}

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

.listen_button_b {
position: absolute;
top: 240px;
left: 710px;
width: 220px;
height: 65px;
box-shadow: 1px 2px 5px 0px #362e2b;
border-radius: 30px;
transition: filter 0.5s, transform 0.5s;
}

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

.slider-right {
position: absolute;
top: 350px;
left: 0px;
width: 1280px;
height: 180px;
}

.slider-left {
position: absolute;
top: 350px;
left: 0px;
width: 1280px;
height: 180px;
}

.slide_cg {
width: 320px;
height: 180px;
}

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

.list {
position: absolute;
background-image: url('../image/list.png');
top: calc((400px - 302px) / 2);
left: calc((1280px - 1100px) / 2);
width: 1100px;
height: 302px;
}

.footer {
position: relative;
top: 0;
width: 1280px;
height: 200px;
background-color:rgba(209,192,165,0.5);
box-sizing: border-box;
}

.triangle_logo-footer {
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-footer:hover {
filter: brightness(1.2);
transform: scale(1.1);
}