@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/bg.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: 110px;
background-color:rgba(21,40,50,0.5);
box-sizing: border-box;
}

img {
width: 100%;
}

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

.cd8_header_logo {
position: absolute;
top: calc((110px - 65px) / 2);
left: 40px;
width: 224px;
height: 65px;
transition: filter 0.5s, transform 0.5s;
}

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

.princess_header_logo {
position: absolute;
top: calc((110px - 80px) / 2);
left: 350px;
width: 212px;
height: 80px;
transition: filter 0.5s, transform 0.5s;
}

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

.asklein_header_logo {
position: absolute;
top: calc((110px - 78px) / 2);
left: 585px;
width: 266px;
height: 78px;
transition: filter 0.5s, transform 0.5s;
}

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

.lemmtear2_header_logo {
position: absolute;
top: calc((110px - 78px) / 2);
left: 870px;
width: 382px;
height: 78px;
transition: filter 0.5s, transform 0.5s;
}

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

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

.bg_color {
position: relative;
background-color: #152732;
margin-top: 0px;
width: 1280px;
height: 1600px;
display: inline-block;
}

.mv {
position: absolute;
background-image: url('../image/cd8_mv.jpg');
top: 0px;
left: 0px;
width: 1280px;
height: 1600px;
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: 1150px;
left: 50px;
width: 995px;
height: 289px;
}

.mv_release {
position: absolute;
top: 1450px;
left: 50px;
width: 1044px;
height: 97px;
}

.mv_copy {
position: absolute;
background-image: url('../image/mv_copy.png');
top: 550px;
right: 50px;
width: 104px;
height: 889px;
}

.shop_button {
position: absolute;
top: 150px;
left: 50px;
width: 366px;
height: 316px;
transition: filter 0.5s, transform 0.5s;
}

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

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

.title_products {
position: absolute;
background-image: url('../image/title_products.png');
top: calc((120px - 38px) / 2);
right: calc((1280px - 233px) / 2);
width: 233px;
height: 38px;
}

.title_spec {
position: absolute;
background-image: url('../image/title_spec.png');
top: calc((120px - 41px) / 2);
right: calc((1280px - 181px) / 2);
width: 181px;
height: 41px;
}

.title_princess {
position: absolute;
background-image: url('../image/title_princess.png');
top: calc((120px - 42px) / 2);
right: calc((1280px - 472px) / 2);
width: 472px;
height: 42px;
}

.title_asklein {
position: absolute;
background-image: url('../image/title_asklein.png');
top: calc((120px - 39px) / 2);
right: calc((1280px - 447px) / 2);
width: 447px;
height: 39px;
}

.title_asklein_ap {
position: absolute;
background-image: url('../image/title_asklein_ap.png');
top: calc((120px - 39px) / 2);
right: calc((1280px - 1083px) / 2);
width: 1083px;
height: 39px;
}

.title_lemmtear2 {
position: absolute;
background-image: url('../image/title_lemmtear2.png');
top: calc((120px - 38px) / 2);
right: calc((1280px - 643px) / 2);
width: 643px;
height: 38px;
}

.title_lemmtear2_ap1 {
position: absolute;
background-image: url('../image/title_lemmtear2_ap1.png');
top: calc((120px - 39px) / 2);
right: calc((1280px - 1066px) / 2);
width: 1066px;
height: 39px;
}

.title_lemmtear2_ap2 {
position: absolute;
background-image: url('../image/title_lemmtear2_ap2.png');
top: calc((120px - 39px) / 2);
right: calc((1280px - 1135px) / 2);
width: 1135px;
height: 39px;
}

.text_bg-container {
position: relative;
background-color: rgba(215,1,89,0.5);
margin-top: -7px;
width: 1280px;
height: 360px;
display: inline-block;
}

.products_text {
position: absolute;
background-image: url('../image/products_text.png');
top: calc((360px - 251px) / 2);
right: calc((1280px - 1179px) / 2);
width: 1179px;
height: 251px;
}

.products_spec {
position: absolute;
background-image: url('../image/products_spec.png');
top: calc((360px - 270px) / 2);
right: calc((1280px - 1176px) / 2);
width: 1176px;
height: 270px;
}

.products_list-container {
position: relative;
margin-top: -5px;
width: 1280px;
height: 1070px;
display: inline-block;
}

.list_princess {
position: absolute;
top: 100px;
left: 50px;
width: 360px;
height: 417px;
transition: filter 0.5s, transform 0.5s;
}

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

.list_asklein {
position: absolute;
top: 100px;
left: calc((1280px - 360px) / 2);
width: 360px;
height: 417px;
transition: filter 0.5s, transform 0.5s;
}

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

.list_asklein_ap {
position: absolute;
top: 100px;
right: 50px;
width: 360px;
height: 404px;
transition: filter 0.5s, transform 0.5s;
}

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

.list_lemmtear2 {
position: absolute;
top: 580px;
left: 50px;
width: 360px;
height: 406px;
transition: filter 0.5s, transform 0.5s;
}

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

.list_lemmtear2_ap1 {
position: absolute;
top: 580px;
left: calc((1280px - 360px) / 2);
width: 360px;
height: 406px;
transition: filter 0.5s, transform 0.5s;
}

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

.list_lemmtear2_ap2 {
position: absolute;
top: 580px;
right: 50px;
width: 360px;
height: 405px;
transition: filter 0.5s, transform 0.5s;
}

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

.mv-container2 {
position: relative;
margin-top: 120px;
width: 1280px;
height: 1500px;
display: inline-block;
overflow: hidden;
}

.outline_bg {
position: relative;
background-color: rgba(21,39,50,0.5);
margin-top: 900px;
width: 1280px;
height: 600px;
display: inline-block;
}

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

.char_box {
position: relative;
margin-top: -6px;
width: 1280px;
height: 500px;
display: inline-block;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.outline_asklein {
position: absolute;
background-image: url('../image/outline_asklein.png');
top: calc((600px - 550px) / 2);
left: calc((1280px - 1180px) / 2);
width: 1180px;
height: 550px;
}

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

.outline_asklein_ap {
position: absolute;
background-image: url('../image/outline_asklein_ap.png');
top: calc((600px - 424px) / 2);
left: calc((1280px - 958px) / 2);
width: 958px;
height: 424px;
}

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

.outline_lemmtear2 {
position: absolute;
background-image: url('../image/outline_lemmtear2.png');
top: calc((600px - 504px) / 2);
left: calc((1280px - 1173px) / 2);
width: 1173px;
height: 504px;
}

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

.outline_lemmtear2_ap1 {
position: absolute;
background-image: url('../image/outline_lemmtear2_ap1.png');
top: calc((600px - 344px) / 2);
left: calc((1280px - 1165px) / 2);
width: 1165px;
height: 344px;
}

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

.outline_lemmtear2_ap2 {
position: absolute;
background-image: url('../image/outline_lemmtear2_ap2.png');
top: calc((600px - 464px) / 2);
left: calc((1280px - 1016px) / 2);
width: 1016px;
height: 464px;
}

.voice_icon1 {
position: absolute;
bottom: 40px;
left: 40px;
width: 110px;
height: 110px;
border-radius: 50%;
box-shadow: 0 8px 16px rgba(0, 0, 0, 0.5);
transition: filter 0.5s, transform 0.5s;
}

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

.voice_icon2 {
position: absolute;
bottom: 40px;
left: 180px;
width: 110px;
height: 110px;
border-radius: 50%;
box-shadow: 0 8px 16px rgba(0, 0, 0, 0.5);
transition: filter 0.5s, transform 0.5s;
}

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

.voice_icon3 {
position: absolute;
bottom: 40px;
left: 320px;
width: 110px;
height: 110px;
border-radius: 50%;
box-shadow: 0 8px 16px rgba(0, 0, 0, 0.5);
transition: filter 0.5s, transform 0.5s;
}

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

.voice_icon4 {
position: absolute;
bottom: 40px;
left: 460px;
width: 110px;
height: 110px;
border-radius: 50%;
box-shadow: 0 8px 16px rgba(0, 0, 0, 0.5);
transition: filter 0.5s, transform 0.5s;
}

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

.cg_thumb1 {
position: absolute;
bottom: 40px;
left: 630px;
width: 190px;
height: 190px;
border-radius: 25px;
box-shadow: 0 8px 16px rgba(0, 0, 0, 0.5);
transition: filter 0.5s, transform 0.5s;
}

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

.cg_thumb2 {
position: absolute;
bottom: 40px;
left: 840px;
width: 190px;
height: 190px;
border-radius: 25px;
box-shadow: 0 8px 16px rgba(0, 0, 0, 0.5);
transition: filter 0.5s, transform 0.5s;
}

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

.cg_thumb3 {
position: absolute;
bottom: 40px;
left: 1050px;
width: 190px;
height: 190px;
border-radius: 25px;
box-shadow: 0 8px 16px rgba(0, 0, 0, 0.5);
transition: filter 0.5s, transform 0.5s;
}

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

/* 特典ページ */
.shop_index00 {
position: absolute;
background-image: url('../image/shop/shop_index00.png');
top: calc((120px - 50px) / 2);
right: calc((1280px - 308px) / 2);
width: 308px;
height: 50px;
}

.shop_index01 {
position: absolute;
background-image: url('../image/shop/shop_index01.png');
top: calc((120px - 54px) / 2);
right: calc((1280px - 518px) / 2);
width: 518px;
height: 54px;
}

.shop_index02 {
position: absolute;
background-image: url('../image/shop/shop_index02.png');
top: calc((120px - 57px) / 2);
right: calc((1280px - 656px) / 2);
width: 656px;
height: 57px;
}

.shop_index03 {
position: absolute;
background-image: url('../image/shop/shop_index03.png');
top: calc((120px - 55px) / 2);
right: calc((1280px - 520px) / 2);
width: 520px;
height: 55px;
}

.shop_index04 {
position: absolute;
background-image: url('../image/shop/shop_index04.png');
top: calc((120px - 48px) / 2);
right: calc((1280px - 566px) / 2);
width: 566px;
height: 48px;
}

.shop_index05 {
position: absolute;
background-image: url('../image/shop/shop_index05.png');
top: calc((120px - 50px) / 2);
right: calc((1280px - 460px) / 2);
width: 460px;
height: 50px;
}

.shop_index06 {
position: absolute;
background-image: url('../image/shop/shop_index06.png');
top: calc((120px - 55px) / 2);
right: calc((1280px - 546px) / 2);
width: 546px;
height: 55px;
}

.shop_index07 {
position: absolute;
background-image: url('../image/shop/shop_index07.png');
top: calc((120px - 54px) / 2);
right: calc((1280px - 830px) / 2);
width: 830px;
height: 54px;
}

.shop_index08 {
position: absolute;
background-image: url('../image/shop/shop_index08.png');
top: calc((120px - 50px) / 2);
right: calc((1280px - 514px) / 2);
width: 514px;
height: 50px;
}

.shop_contents_box {
position: relative;
margin-top: -5px;
width: 1280px;
height: 500px;
display: inline-block;
}

.shop_title00 {
position: absolute;
background-image: url('../image/shop/shop_title00.png');
top: 20px;
left: 50px;
width: 808px;
height: 57px;
}

.shop_text00 {
position: absolute;
background-image: url('../image/shop/shop_text00.png');
top: 120px;
left: 720px;
width: 537px;
height: 148px;
}

.shop_title01 {
position: absolute;
background-image: url('../image/shop/shop_title01.png');
top: 20px;
left: 50px;
width: 707px;
height: 57px;
}

.shop_text01 {
position: absolute;
background-image: url('../image/shop/shop_text01.png');
top: 120px;
left: 720px;
width: 510px;
height: 148px;
}

.shop_title02 {
position: absolute;
background-image: url('../image/shop/shop_title02.png');
top: 20px;
left: 50px;
width: 720px;
height: 57px;
}

.shop_text02 {
position: absolute;
background-image: url('../image/shop/shop_text02.png');
top: 120px;
left: 720px;
width: 507px;
height: 119px;
}

.shop_title03 {
position: absolute;
background-image: url('../image/shop/shop_title03.png');
top: 20px;
left: 50px;
width: 636px;
height: 58px;
}

.shop_text03 {
position: absolute;
background-image: url('../image/shop/shop_text03.png');
top: 120px;
left: 720px;
width: 465px;
height: 148px;
}

.shop_title04 {
position: absolute;
background-image: url('../image/shop/shop_title04.png');
top: 20px;
left: 50px;
width: 680px;
height: 55px;
}

.shop_text04 {
position: absolute;
background-image: url('../image/shop/shop_text04.png');
top: 120px;
left: 720px;
width: 512px;
height: 119px;
}

.shop_title05 {
position: absolute;
background-image: url('../image/shop/shop_title05.png');
top: 20px;
left: 50px;
width: 341px;
height: 55px;
}

.shop_title06 {
position: absolute;
background-image: url('../image/shop/shop_title06.png');
top: 20px;
left: 50px;
width: 754px;
height: 55px;
}

.shop_title07 {
position: absolute;
background-image: url('../image/shop/shop_title07.png');
top: 20px;
left: 50px;
width: 680px;
height: 55px;
}

.shop_title08 {
position: absolute;
background-image: url('../image/shop/shop_title08.png');
top: 20px;
left: 50px;
width: 569px;
height: 58px;
}

.thumb_cg {
position: absolute;
top: 85px;
left: 40px;
width: 674px;
height: 394px;
transition: filter 0.5s, transform 0.5s;
}

.thumb_cg:hover {
filter: brightness(1.2);
transform: scale(1.02);
}

.thumb_cg_common {
position: absolute;
top: 85px;
left: 40px;
width: 674px;
height: 394px;
}

.store_button {
position: absolute;
top: 410px;
left: 720px;
width: 286px;
height: 56px;
transition: filter 0.5s, transform 0.5s;
}

.store_button:hover {
filter: brightness(1.2);
transform: scale(1.02);
}

.store_button2 {
position: absolute;
top: 340px;
left: 720px;
width: 286px;
height: 56px;
transition: filter 0.5s, transform 0.5s;
}

.store_button2:hover {
filter: brightness(1.2);
transform: scale(1.02);
}

.text_line01 {
position: absolute;
top: 340px;
left: 1010px;
color: #d70159;
font-size: 16px;
font-weight: bold;
text-shadow: 
-1px -1px 0 #fff,  
1px -1px 0 #fff,
-1px  1px 0 #fff,
1px  1px 0 #fff;
}

.text_line02 {
position: absolute;
top: 410px;
left: 1010px;
color: #d70159;
font-size: 16px;
font-weight: bold;
text-shadow: 
-1px -1px 0 #fff,  
1px -1px 0 #fff,
-1px  1px 0 #fff,
1px  1px 0 #fff;
}

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

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

.copyright {
position: absolute;
background-image: url('../image/copyright.png');
top: 250px;
left: calc((1280px - 397px) / 2);
width: 397px;
height: 20px;
}