@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: relative;
z-index: 999;
top: 0px;
width: 1280px;
height: 252px;
box-sizing: border-box;
}

img {
width: 100%;
}

/* 共通 */
.header_box {
position: relative;
margin-top: 0px;
width: 1280px;
height: 252px;
display: inline-block;
opacity: 0;
animation: fadeInDown 1s ease-in-out forwards;
animation-delay: 0.5s;
}

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

.button_top {
position: absolute;
background-image: url('../image/button_top.png');
top: 20px;
left: calc((1280px - 243px) / 2);
width: 243px;
height: 208px;
transition: filter 0.5s, transform 0.5s;
}

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

.button_box_L {
position: relative;
margin-top: 0px;
left: -120px;
width: 170px;
height: 130px;
display: inline-block;
}

.button_box_R {
position: relative;
margin-top: 0px;
right: -120px;
width: 170px;
height: 130px;
display: inline-block;
}

.button_outline {
position: absolute;
background-image: url('../image/button_outline.png');
top: 30px;
left: calc((170px - 132px) / 2);
width: 132px;
height: 70px;
transition: transform 0.5s;
}

.button_outline:hover {
transform: scale(1.1);
}

.button_character {
position: absolute;
background-image: url('../image/button_character.png');
top: 30px;
left: calc((170px - 166px) / 2);
width: 166px;
height: 69px;
transition: transform 0.5s;
}

.button_character:hover {
transform: scale(1.1);
}

.button_gallery {
position: absolute;
background-image: url('../image/button_gallery.png');
top: 30px;
left: calc((170px - 132px) / 2);
width: 132px;
height: 71px;
transition: transform 0.5s;
}

.button_gallery:hover {
transform: scale(1.1);
}

.button_download {
position: absolute;
background-image: url('../image/button_download.png');
top: 30px;
left: calc((170px - 164px) / 2);
width: 164px;
height: 71px;
transition: transform 0.5s;
}

.button_download:hover {
transform: scale(1.1);
}

.button_shop {
position: absolute;
background-image: url('../image/button_shop.png');
top: 30px;
left: calc((170px - 142px) / 2);
width: 142px;
height: 71px;
transition: transform 0.5s;
}

.button_shop:hover {
transform: scale(1.1);
}

.button_event {
position: absolute;
background-image: url('../image/button_event.png');
top: 30px;
left: calc((170px - 108px) / 2);
width: 108px;
height: 70px;
transition: transform 0.5s;
}

.button_event:hover {
transform: scale(1.1);
}

.menu::after {
position: absolute;
left: 50%;
content: '';
width: 100%;
height: 2px;
background: linear-gradient(to right, rgba(215, 0, 88, 0) 0%, #D70058 20%, #152732 50%, #D70058 80%, rgba(215, 0, 88, 0) 100%);
bottom: 4px;
opacity: 0;
visibility: hidden;
transform: translateX(-50%);
transition: 0.3s;
}

.menu::before {
content: '';
position: absolute;
left: 50%;
transform: translateX(-50%);
bottom: 2px;
width: 0;
height: 0;
border-left: 6px solid transparent;
border-right: 6px solid transparent;
border-bottom: 6px solid #152732;
opacity: 0;
visibility: hidden;
transition: 0.3s;
}

.menu:hover::after,
.menu:hover::before {
visibility: visible;
bottom: 12px;
opacity: 1;
}

.menu_line_box {
position: relative;
margin-top: 68px;
width: 170px;
height: 1.5px;
background: linear-gradient(to right, transparent, black 50%, transparent);
}

.menu_line_box::before {
content: "";
position: absolute;
top: 50%;
left: 50%;
width: 7px;
height: 7px;
background: black;
border-radius: 50%;
transform: translate(-50%, -50%);
}

.headline_box {
background-image: linear-gradient(to top, transparent 0%, transparent 60%, #fff 100%), url('../image/headline.jpg');
position: relative;
margin-top: -130px;
width: 1280px;
height: 250px;
display: inline-block;
}

.fade_box {
opacity: 0;
animation: fadeIn 1s ease-in-out forwards;
animation-delay: 0.8s;
transition: filter 0.5s;
}

.mv_box {
position: relative;
margin-top: -130px;
width: 1280px;
height: 1806px;
display: inline-block;
overflow: hidden;
}

.mv-gradient {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(to top, transparent 0%, transparent 90%, #fff 100%);
z-index: 1;
pointer-events: none;
}

.mv {
position: absolute;
background-image: url('../image/top/mv.jpg');
top: 0px;
left: 0px;
width: 1280px;
height: 1806px;
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_copy {
position: absolute;
background-image: url('../image/top/mv_copy.png');
top: 550px;
right: 50px;
width: 130px;
height: 787px;
z-index: 2;
opacity: 0;
animation: fadeInLarge 0.7s ease-in-out forwards;
animation-delay: 3s;
transition: filter 0.5s;
}

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

.mv_copy:hover {
filter: brightness(1.2);
}

.mv_logo {
position: absolute;
background-image: url('../image/top/mv_logo.png');
top: 500px;
left: 50px;
width: 852px;
height: 542px;
opacity: 0;
animation: fadeIn 1.5s ease-in-out forwards;
animation-delay: 2s;
transition: filter 0.5s;
}

.mv_logo:hover {
filter: brightness(1.2);
}

@keyframes fadeIn {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}

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

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

.mv_preorder_bonus {
position: absolute;
top: 250px;
right: 45px;
width: 393px;
height: 256px;
opacity: 0;
animation: fadeInMasterUP 1.5s ease-in-out forwards;
animation-delay: 2.5s;
transition: filter 0.5s;
}

.mv_preorder_bonus:hover {
filter: brightness(1.2);
}

.master_up {
position: absolute;
top: 50px;
right: 45px;
width: 251px;
height: 189px;
opacity: 0;
z-index: 999;
animation: fadeInMasterUP 1.5s ease-in-out forwards;
animation-delay: 2s;
transition: filter 0.5s;
}

.master_up:hover {
filter: brightness(1.2);
}

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

.dl_release {
position: absolute;
background-image: url('../image/top/dl_release.png');
bottom: 630px;
left: 70px;
width: 492px;
height: 50px;
opacity: 0;
animation: fadeIn 1.5s ease-in-out forwards;
animation-delay: 2.7s;
}

.fanza_button {
position: absolute;
bottom: 550px;
left: 70px;
width: 226px;
height: 63px;
opacity: 0;
animation: fadeIn 1.5s ease-in-out forwards;
animation-delay: 2.7s;
transition: filter 0.5s, transform 0.5s;
}

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

.dlsite_button {
position: absolute;
bottom: 550px;
left: 320px;
width: 206px;
height: 63px;
opacity: 0;
animation: fadeIn 1.5s ease-in-out forwards;
animation-delay: 2.7s;
transition: filter 0.5s, transform 0.5s;
}

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

.update_info {
position: absolute;
bottom: 50px;
left: 70px;
width: 516px;
height: 136px;
opacity: 0;
animation: fadeIn 1.5s ease-in-out forwards;
animation-delay: 2s;
transition: filter 0.5s, transform 0.5s;
}

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

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

.partition {
position: absolute;
background-image: url('../image/partition.png');
bottom: calc((50px - 42px) / 2);
left: calc((1280px - 197px) / 2);
width: 197px;
height: 42px;
}

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

.preorder_bonus_info {
position: absolute;
top: 95px;
right: 5px;
width: 393px;
height: 256px;
transition: filter 0.5s;
}

.preorder_bonus_info:hover {
filter: brightness(1.2);
}

.link_text {
position: absolute;
background-image: url('../image/top/link_text.png');
top: 30px;
left: 0px;
width: 750px;
height: 77px;
}

.fanbox {
position: absolute;
background-image: url('../image/top/fanbox.png');
top: 142px;
left: 0px;
width: 368px;
height: 118px;
transition: filter 0.5s, transform 0.5s;
}

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

.cien {
position: absolute;
background-image: url('../image/top/cien.png');
top: 142px;
left: 385px;
width: 368px;
height: 118px;
transition: filter 0.5s, transform 0.5s;
}

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

.event_info {
position: absolute;
top: 25px;
right: 0px;
width: 518px;
height: 243px;
transition: filter 0.5s, transform 0.5s;
}

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

.infomation_bg {
position: absolute;
background-image: url('../image/top/infomation_bg.png');
bottom: 0px;
left: 0px;
width: 1280px;
height: 722px;
}

.infomation_data {
position: absolute;
background-image: url('../image/top/infomation_data.png');
bottom: 50px;
left: calc((1280px - 1240px) / 2);
width: 1240px;
height: 940px;
}

/* ストーリーページ */
.headline_outline {
position: absolute;
background-image: url('../image/outline/headline_outline.png');
bottom: 12px;
left: 40px;
width: 421px;
height: 47px;
}

.story_box {
position: relative;
background-image: url('../image/outline/story_bg.jpg');
margin-top: -7px;
width: 1280px;
height: 900px;
display: inline-block;
}

.story_text01 {
position: absolute;
background-image: url('../image/outline/story_text01.png');
top: 80px;
left: 100px;
width: 481px;
height: 48px;
opacity: 0;
animation: fadeIn 1.5s ease-in-out forwards;
animation-delay: 1s;
}

.story_text02 {
position: absolute;
background-image: url('../image/outline/story_text02.png');
top: 130px;
left: 100px;
width: 1058px;
height: 48px;
opacity: 0;
animation: fadeIn 1.5s ease-in-out forwards;
animation-delay: 1.3s;
}

.story_text03 {
position: absolute;
background-image: url('../image/outline/story_text03.png');
top: 230px;
left: 100px;
width: 506px;
height: 48px;
opacity: 0;
animation: fadeIn 1.5s ease-in-out forwards;
animation-delay: 2.3s;
}

.story_text04 {
position: absolute;
background-image: url('../image/outline/story_text04.png');
top: 280px;
left: 100px;
width: 833px;
height: 48px;
opacity: 0;
animation: fadeIn 1.5s ease-in-out forwards;
animation-delay: 2.6s;
}

.story_text05 {
position: absolute;
background-image: url('../image/outline/story_text05.png');
top: 330px;
left: 100px;
width: 431px;
height: 48px;
opacity: 0;
animation: fadeIn 1.5s ease-in-out forwards;
animation-delay: 2.9s;
}

.story_text06 {
position: absolute;
background-image: url('../image/outline/story_text06.png');
top: 430px;
left: 100px;
width: 770px;
height: 48px;
opacity: 0;
animation: fadeIn 1.5s ease-in-out forwards;
animation-delay: 3.9s;
}

.story_text07 {
position: absolute;
background-image: url('../image/outline/story_text07.png');
top: 480px;
left: 100px;
width: 881px;
height: 48px;
opacity: 0;
animation: fadeIn 1.5s ease-in-out forwards;
animation-delay: 4.2s;
}

.story_text08 {
position: absolute;
background-image: url('../image/outline/story_text08.png');
top: 580px;
left: 100px;
width: 845px;
height: 48px;
opacity: 0;
animation: fadeIn 1.5s ease-in-out forwards;
animation-delay: 5.2s;
}

.story_text09 {
position: absolute;
background-image: url('../image/outline/story_text09.png');
top: 630px;
left: 100px;
width: 1006px;
height: 48px;
opacity: 0;
animation: fadeIn 1.5s ease-in-out forwards;
animation-delay: 5.5s;
}

.story_text10 {
position: absolute;
background-image: url('../image/outline/story_text10.png');
top: 730px;
left: 100px;
width: 672px;
height: 48px;
opacity: 0;
animation: fadeIn 1.5s ease-in-out forwards;
animation-delay: 6.5s;
}

.story_text11 {
position: absolute;
background-image: url('../image/outline/story_text11.png');
top: 780px;
left: 100px;
width: 1006px;
height: 48px;
opacity: 0;
animation: fadeIn 1.5s ease-in-out forwards;
animation-delay: 6.8s;
}

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

.partition2 {
position: absolute;
background-image: url('../image/outline/partition2.png');
top: calc((100px - 59px) / 2);
left: calc((1280px - 260px) / 2);
width: 260px;
height: 59px;
}

.title_list_box {
position: relative;
margin-bottom: 50px;
width: 1280px;
height: auto;
display: inline-block;
}

.relation_box1 {
position: relative;
background-image: url('../image/outline/title_bg1.png');
margin-top: 50px;
width: 1248px;
height: 308px;
display: inline-block;
}

.relation_box2 {
position: relative;
background-image: url('../image/outline/title_bg2.png');
margin-top: 50px;
width: 1248px;
height: 308px;
display: inline-block;
}

.title_story1 {
position: absolute;
background-image: url('../image/outline/title_story.png');
top: 110px;
left: 650px;
width: 120px;
height: 30px;
}

.title_story2{
position: absolute;
background-image: url('../image/outline/title_story.png');
top: 110px;
left: 30px;
width: 120px;
height: 30px;
}

.title_dl1 {
position: absolute;
background-image: url('../image/outline/title_dl1.png');
top: 252px;
left: 424px;
width: 210px;
height: 30px;
}

.title_dl2 {
position: absolute;
background-image: url('../image/outline/title_dl2.png');
top: 252px;
right: 424px;
width: 210px;
height: 30px;
}

.title_fanza1 {
position: absolute;
background-image: url('../image/outline/title_fanza.png');
top: 245px;
left: 648px;
width: 184px;
height: 44px;
transition: filter 0.5s, transform 0.5s;
}

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

.title_dlsite1 {
position: absolute;
background-image: url('../image/outline/title_dlsite.png');
top: 245px;
left: 848px;
width: 184px;
height: 44px;
transition: filter 0.5s, transform 0.5s;
}

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

.title_fanza2 {
position: absolute;
background-image: url('../image/outline/title_fanza.png');
top: 245px;
right: 848px;
width: 184px;
height: 44px;
transition: filter 0.5s, transform 0.5s;
}

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

.title_dlsite2 {
position: absolute;
background-image: url('../image/outline/title_dlsite.png');
top: 245px;
right: 648px;
width: 184px;
height: 44px;
transition: filter 0.5s, transform 0.5s;
}

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

.list_mv_box1 {
position: relative;
top: 22px;
left: -300px;
width: 600px;
height: 260px;
display: inline-block;
overflow: hidden;
border-top-left-radius: 20px;
border-bottom-left-radius: 20px;
}

.list_mv_box2 {
position: relative;
top: 22px;
right: -300px;
width: 600px;
height: 260px;
display: inline-block;
overflow: hidden;
border-top-right-radius: 20px;
border-bottom-right-radius: 20px;
}

.title_rena_mv {
position: absolute;
background-image: url('../image/outline/title_rena_mv.png');
width: 600px;
height: 260px;
transition: filter 0.5s, transform 0.5s;
}

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

.title_rena {
position: absolute;
background-image: url('../image/outline/title_rena.png');
top: 38px;
left: 690px;
width: 464px;
height: 43px;
}

.title_rena_text {
position: absolute;
background-image: url('../image/outline/title_rena_text.png');
top: 150px;
left: 650px;
width: 498px;
height: 80px;
}

.title_festival_mv {
position: absolute;
background-image: url('../image/outline/title_festival_mv.png');
width: 600px;
height: 260px;
transition: filter 0.5s, transform 0.5s;
}

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

.title_festival {
position: absolute;
background-image: url('../image/outline/title_festival.png');
top: 38px;
left: 80px;
width: 490px;
height: 43px;
}

.title_festival_text {
position: absolute;
background-image: url('../image/outline/title_festival_text.png');
top: 150px;
left: 30px;
width: 519px;
height: 80px;
}

.title_extrastage2_mv {
position: absolute;
background-image: url('../image/outline/title_extrastage2_mv.png');
width: 600px;
height: 260px;
transition: filter 0.5s, transform 0.5s;
}

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

.title_extrastage2 {
position: absolute;
background-image: url('../image/outline/title_extrastage2.png');
top: 38px;
left: 645px;
width: 562px;
height: 47px;
}

.title_extrastage2_text {
position: absolute;
background-image: url('../image/outline/title_extrastage2_text.png');
top: 150px;
left: 650px;
width: 536px;
height: 80px;
}

.title_emeroad_mv {
position: absolute;
background-image: url('../image/outline/title_emeroad_mv.png');
width: 600px;
height: 260px;
transition: filter 0.5s, transform 0.5s;
}

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

.title_emeroad {
position: absolute;
background-image: url('../image/outline/title_emeroad.png');
top: 38px;
left: 80px;
width: 490px;
height: 43px;
}

.title_emeroad_text {
position: absolute;
background-image: url('../image/outline/title_emeroad_text.png');
top: 150px;
left: 30px;
width: 560px;
height: 81px;
}

.title_extraignition_mv {
position: absolute;
background-image: url('../image/outline/title_extraignition_mv.png');
width: 600px;
height: 260px;
overflow: hidden;
transition: filter 0.5s, transform 0.5s;
}

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

.title_extraignition {
position: absolute;
background-image: url('../image/outline/title_extraignition.png');
top: 38px;
left: 642px;
width: 570px;
height: 43px;
}

.title_extraignition_text {
position: absolute;
background-image: url('../image/outline/title_extraignition_text.png');
top: 150px;
left: 650px;
width: 550px;
height: 78px;
}

.fadein {
opacity: 0;
transform: translate(0,0);
transition: all 1.5s;
&.fadein-left{
transform: translate(-30px,0);
}
&.fadein-right{
transform: translate(30px,0);
}
&.scrollin{
opacity: 1 !important;
transform: translate(0, 0) !important;
}
}

/* キャラクターページ */
.headline_character {
position: absolute;
background-image: url('../image/character/headline_character.png');
bottom: 12px;
left: 40px;
width: 544px;
height: 47px;
}

.character_box {
position: relative;
background-image: url('../image/character/character_bg.jpg');
margin-top: -7px;
width: 1280px;
height: 1200px;
display: inline-block;
}

.list_balance {
position: absolute;
background-image: url('../image/character/list_balance.png');
top: 20px;
left: calc((1280px - 301px) / 2);
width: 301px;
height: 203px;
}

.list_box_nephile {
position: relative;
margin-top: 60px;
left: -150px;
width: 228px;
height: 133px;
display: inline-block;
}

.list_name_nephile {
position: absolute;
background-image: url('../image/character/list_name_nephile.png');
top: 0px;
left: calc((228px - 132px) / 2);
width: 132px;
height: 41px;
}

.list_nephile {
position: absolute;
background-image: url('../image/character/list_nephile.png');
bottom: 0px;
left: 0px;
width: 228px;
height: 108px;
transition: filter 0.5s, transform 0.5s;
}

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

.list_box_rena {
position: relative;
margin-top: 60px;
left: -150px;
width: 228px;
height: 133px;
display: inline-block;
}

.list_name_rena {
position: absolute;
background-image: url('../image/character/list_name_rena.png');
top: 0px;
left: calc((228px - 188px) / 2);
width: 188px;
height: 41px;
}

.list_rena {
position: absolute;
background-image: url('../image/character/list_rena.png');
bottom: 0px;
left: 0px;
width: 228px;
height: 108px;
transition: filter 0.5s, transform 0.5s;
}

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

.list_box_lip {
position: relative;
margin-top: 60px;
left: 150px;
width: 228px;
height: 133px;
display: inline-block;
}

.list_name_lip {
position: absolute;
background-image: url('../image/character/list_name_lip.png');
top: 0px;
left: calc((228px - 155px) / 2);
width: 155px;
height: 41px;
}

.list_lip {
position: absolute;
background-image: url('../image/character/list_lip.png');
bottom: 0px;
left: 0px;
width: 228px;
height: 108px;
transition: filter 0.5s, transform 0.5s;
}

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

.list_box_fine {
position: relative;
margin-top: 60px;
left: 150px;
width: 228px;
height: 133px;
display: inline-block;
}

.list_name_fine {
position: absolute;
background-image: url('../image/character/list_name_fine.png');
top: 0px;
left: calc((228px - 206px) / 2);
width: 206px;
height: 41px;
}

.list_fine {
position: absolute;
background-image: url('../image/character/list_fine.png');
bottom: 0px;
left: 0px;
width: 228px;
height: 108px;
transition: filter 0.5s, transform 0.5s;
}

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

.intro_contents {
position: relative;
background-image: url('../image/character/thumb_bg.png');
margin-top: 50px;
left: 0px;
width: 1250px;
height: 800px;
display: inline-block;
}

.change_box {
position: relative;
margin-top: 635px;
left: 330px;
width: 537px;
height: 139px;
display: inline-block;
}

.change_text {
position: absolute;
background-image: url('../image/character/change_text.png');
top: 0px;
left: calc((537px - 527px) / 2);
width: 527px;
height: 41px;
}

.voice_name_common {
position: absolute;
background-image: url('../image/character/voice_name_common.png');
bottom: 210px;
right: 890px;
width: 183px;
height: 58px;
}

.voice_icon1 {
position: absolute;
background-image: url('../image/character/voice_icon.png');
bottom: 210px;
right: 800px;
width: 65px;
height: 50px;
opacity: 0.7;
transition: filter 0.5s, transform 0.5s;
}

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

.voice_icon2 {
position: absolute;
background-image: url('../image/character/voice_icon.png');
bottom: 210px;
right: 725px;
width: 65px;
height: 50px;
opacity: 0.7;
transition: filter 0.5s, transform 0.5s;
}

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

.voice_icon3 {
position: absolute;
background-image: url('../image/character/voice_icon.png');
bottom: 210px;
right: 650px;
width: 65px;
height: 50px;
opacity: 0.7;
transition: filter 0.5s, transform 0.5s;
}

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

.voice_icon4 {
position: absolute;
background-image: url('../image/character/voice_icon.png');
bottom: 210px;
right: 575px;
width: 65px;
height: 50px;
opacity: 0.7;
transition: filter 0.5s, transform 0.5s;
}

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

.voice_icon5 {
position: absolute;
background-image: url('../image/character/voice_icon.png');
bottom: 210px;
right: 500px;
width: 65px;
height: 50px;
opacity: 0.7;
transition: filter 0.5s, transform 0.5s;
}

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

.bio_undefined {
position: absolute;
background-image: url('../image/character/bio_undefined.png');
bottom: 0px;
right: 800px;
width: 378px;
height: 170px;
}

/* ネフィーレ */
.change_nephile_icon1 {
position: absolute;
background-image: url('../image/character/nephile/change_nephile_icon1.png');
bottom: 0px;
left: 0px;
width: 178px;
height: 109px;
transition: filter 0.5s, transform 0.5s;
}

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

.change_nephile_icon2 {
position: absolute;
background-image: url('../image/character/nephile/change_nephile_icon2.png');
bottom: 0px;
left: calc((537px - 178px) / 2);
width: 178px;
height: 109px;
transition: filter 0.5s, transform 0.5s;
}

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

.change_nephile_icon3 {
position: absolute;
background-image: url('../image/character/nephile/change_nephile_icon3.png');
bottom: 0px;
right: 0px;
width: 178px;
height: 109px;
transition: filter 0.5s, transform 0.5s;
}

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

.nephile {
position: absolute;
background-image: url('../image/character/nephile/nephile1.png');
bottom: -26px;
right: -27px;
width: 1250px;
height: 800px;
transition: opacity 0.5s ease-in-out;
}

.nephile_bio {
position: absolute;
background-image: url('../image/character/nephile/nephile_bio.png');
bottom: 0px;
right: 555px;
width: 623px;
height: 170px;
}

.nephile_cv {
position: absolute;
background-image: url('../image/character/nephile/nephile_cv.png');
bottom: 210px;
right: 890px;
width: 183px;
height: 58px;
}

/* エンシェルレナ */
.change_rena_icon1 {
position: absolute;
background-image: url('../image/character/rena/change_rena_icon1.png');
bottom: 0px;
left: 0px;
width: 178px;
height: 109px;
transition: filter 0.5s, transform 0.5s;
}

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

.change_rena_icon2 {
position: absolute;
background-image: url('../image/character/rena/change_rena_icon2.png');
bottom: 0px;
left: calc((537px - 178px) / 2);
width: 178px;
height: 109px;
transition: filter 0.5s, transform 0.5s;
}

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

.change_rena_icon3 {
position: absolute;
background-image: url('../image/character/rena/change_rena_icon3.png');
bottom: 0px;
right: 0px;
width: 178px;
height: 109px;
transition: filter 0.5s, transform 0.5s;
}

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

.rena {
position: absolute;
background-image: url('../image/character/rena/rena1.png');
bottom: -26px;
right: -27px;
width: 1250px;
height: 800px;
transition: opacity 0.5s ease-in-out;
}

.rena_bio {
position: absolute;
background-image: url('../image/character/rena/rena_bio.png');
bottom: 0px;
right: 743px;
width: 435px;
height: 170px;
}

.rena_cv {
position: absolute;
background-image: url('../image/character/rena/rena_cv.png');
bottom: 210px;
right: 885px;
width: 190px;
height: 57px;
}

/* スイートリップ */
.change_lip_icon1 {
position: absolute;
background-image: url('../image/character/lip/change_lip_icon1.png');
bottom: 0px;
left: 0px;
width: 178px;
height: 109px;
transition: filter 0.5s, transform 0.5s;
}

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

.change_lip_icon2 {
position: absolute;
background-image: url('../image/character/lip/change_lip_icon2.png');
bottom: 0px;
left: calc((537px - 178px) / 2);
width: 178px;
height: 109px;
transition: filter 0.5s, transform 0.5s;
}

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

.change_lip_icon3 {
position: absolute;
background-image: url('../image/character/lip/change_lip_icon3.png');
bottom: 0px;
right: 0px;
width: 178px;
height: 109px;
transition: filter 0.5s, transform 0.5s;
}

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

.lip {
position: absolute;
background-image: url('../image/character/lip/lip1.png');
bottom: -26px;
right: -27px;
width: 1250px;
height: 800px;
transition: opacity 0.5s ease-in-out;
}

.lip_bio {
position: absolute;
background-image: url('../image/character/lip/lip_bio.png');
bottom: 0px;
right: 779px;
width: 401px;
height: 170px;
}

.lip_cv {
position: absolute;
background-image: url('../image/character/lip/lip_cv.png');
bottom: 210px;
right: 888px;
width: 187px;
height: 58px;
}

/* エメロードフィーネ */
.change_fine_icon1 {
position: absolute;
background-image: url('../image/character/fine/change_fine_icon1.png');
bottom: 0px;
left: 0px;
width: 178px;
height: 109px;
transition: filter 0.5s, transform 0.5s;
}

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

.change_fine_icon2 {
position: absolute;
background-image: url('../image/character/fine/change_fine_icon2.png');
bottom: 0px;
left: calc((537px - 178px) / 2);
width: 178px;
height: 109px;
transition: filter 0.5s, transform 0.5s;
}

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

.change_fine_icon3 {
position: absolute;
background-image: url('../image/character/fine/change_fine_icon3.png');
bottom: 0px;
right: 0px;
width: 178px;
height: 109px;
transition: filter 0.5s, transform 0.5s;
}

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

.fine {
position: absolute;
background-image: url('../image/character/fine/fine1.png');
bottom: -26px;
right: -27px;
width: 1250px;
height: 800px;
transition: opacity 0.5s ease-in-out;
}

.fine_bio {
position: absolute;
background-image: url('../image/character/fine/fine_bio.png');
bottom: 0px;
right: 635px;
width: 543px;
height: 170px;
}

.fine_cv {
position: absolute;
background-image: url('../image/character/fine/fine_cv.png');
bottom: 210px;
right: 889px;
width: 183px;
height: 58px;
}

@keyframes fadein {
0% { opacity: 0; }
100% { opacity: 1; }
}

/* ギャラリーページ */
.headline_gallery {
position: absolute;
background-image: url('../image/gallery/headline_gallery.png');
bottom: 12px;
left: 40px;
width: 605px;
height: 46px;
}

.gallery_box {
position: relative;
background-image: url('../image/gallery/gallery_bg.jpg');
background-attachment: fixed;
background-size: cover;
background-position: center;
margin-top: -7px;
width: 1280px;
height: 4350px;
display: flex;
justify-content: center;
align-items: center;
}

.thumb_container {
margin-top: 0px;
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-template-rows: repeat(2, auto);
gap: 20px;
}


.thumb_box {
position: relative;
margin-top: 20px;
width: 562px;
height: 317px;
display: inline-block;
overflow: hidden;
border-radius: 20px;
}

.thumb_frame {
position: absolute;
background-image: url('../image/gallery/gallery_frame.png');
top: 0px;
left: 0px;
width: 562px;
height: 317px;
pointer-events: none;
}

.thumb_cg01, .thumb_cg02, .thumb_cg03, .thumb_cg04,
.thumb_cg05, .thumb_cg06, .thumb_cg07, .thumb_cg08,
.thumb_cg09, .thumb_cg10, .thumb_cg11, .thumb_cg12,
.thumb_cg13, .thumb_cg14, .thumb_cg15, .thumb_cg16,
.thumb_cg17, .thumb_cg18, .thumb_cg19, .thumb_cg20,
.thumb_cg21, .thumb_cg22, .thumb_cg23 {
  position: absolute;
  top: calc((317px - 315px) / 2);
  left: calc((562px - 560px) / 2);
  width: 560px;
  height: 315px;
  border-radius: 20px;
  transition: filter 0.5s, transform 0.5s;
}

.thumb_cg01 { background-image: url('../image/gallery/thumb_cg01.jpg'); }
.thumb_cg02 { background-image: url('../image/gallery/thumb_cg02.jpg'); }
.thumb_cg03 { background-image: url('../image/gallery/thumb_cg03.jpg'); }
.thumb_cg04 { background-image: url('../image/gallery/thumb_cg04.jpg'); }
.thumb_cg05 { background-image: url('../image/gallery/thumb_cg05.jpg'); }
.thumb_cg06 { background-image: url('../image/gallery/thumb_cg06.jpg'); }
.thumb_cg07 { background-image: url('../image/gallery/thumb_cg07.jpg'); }
.thumb_cg08 { background-image: url('../image/gallery/thumb_cg08.jpg'); }
.thumb_cg09 { background-image: url('../image/gallery/thumb_cg09.jpg'); }
.thumb_cg10 { background-image: url('../image/gallery/thumb_cg10.jpg'); }
.thumb_cg11 { background-image: url('../image/gallery/thumb_cg11.jpg'); }
.thumb_cg12 { background-image: url('../image/gallery/thumb_cg12.jpg'); }
.thumb_cg13 { background-image: url('../image/gallery/thumb_cg13.jpg'); }
.thumb_cg14 { background-image: url('../image/gallery/thumb_cg14.jpg'); }
.thumb_cg15 { background-image: url('../image/gallery/thumb_cg15.jpg'); }
.thumb_cg16 { background-image: url('../image/gallery/thumb_cg16.jpg'); }
.thumb_cg17 { background-image: url('../image/gallery/thumb_cg17.jpg'); }
.thumb_cg18 { background-image: url('../image/gallery/thumb_cg18.jpg'); }
.thumb_cg19 { background-image: url('../image/gallery/thumb_cg19.jpg'); }
.thumb_cg20 { background-image: url('../image/gallery/thumb_cg20.jpg'); }
.thumb_cg21 { background-image: url('../image/gallery/thumb_cg21.jpg'); }
.thumb_cg22 { background-image: url('../image/gallery/thumb_cg22.jpg'); }
.thumb_cg23 { background-image: url('../image/gallery/thumb_cg23.jpg'); }

.thumb_cg01:hover, .thumb_cg02:hover, .thumb_cg03:hover, .thumb_cg04:hover,
.thumb_cg05:hover, .thumb_cg06:hover, .thumb_cg07:hover, .thumb_cg08:hover,
.thumb_cg09:hover, .thumb_cg10:hover, .thumb_cg11:hover, .thumb_cg12:hover,
.thumb_cg13:hover, .thumb_cg14:hover, .thumb_cg15:hover, .thumb_cg16:hover,
.thumb_cg17:hover, .thumb_cg18:hover, .thumb_cg19:hover, .thumb_cg20:hover,
.thumb_cg21:hover, .thumb_cg22:hover, .thumb_cg23:hover {
  filter: brightness(1.2);
  transform: scale(1.1);
}

/* ダウンロードページ */
.headline_download {
position: absolute;
background-image: url('../image/download/headline_download.png');
bottom: 12px;
left: 40px;
width: 482px;
height: 46px;
}

.dl_contents_wrapper {
position: relative;
margin-top: -7px;
width: 1280px;
height: auto;
display: inline-block;
justify-content: center;
align-items: center;
}

.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/contents_base.png');
top: 0px;
left: 0px;
width: 1200px;
height: 900px;
}

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

.demo_index {
position: absolute;
background-image: url('../image/download/demo_index.png');
top: 10px;
left: calc((1200px - 870px) / 2);
width: 870px;
height: 82px;
}

.theme_song_index {
position: absolute;
background-image: url('../image/download/theme_song_index.png');
top: 10px;
left: calc((1200px - 1070px) / 2);
width: 1070px;
height: 82px;
}

.pv_index {
position: absolute;
background-image: url('../image/download/pv_index.png');
top: 10px;
left: calc((1200px - 572px) / 2);
width: 572px;
height: 73px;
}

.demo_cg {
position: absolute;
background-image: url('../image/download/demo_cg.png');
top: 140px;
left: calc((1200px - 989px) / 2);
width: 989px;
height: 589px;
}

.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: 53px;
left: 140px;
width: 236px;
height: 126px;
}

.lyric_button {
position: absolute;
bottom: 65px;
left: 400px;
width: 87px;
height: 104px;
transition: filter 0.5s, transform 0.5s;
}

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

.pv_cg {
position: absolute;
background-image: url('../image/download/pv_cg.png');
top: 140px;
left: calc((1200px - 989px) / 2);
width: 989px;
height: 589px;
}

.download_button1 {
position: absolute;
bottom: 80px;
left: calc((1200px - 406px) / 2);
width: 406px;
height: 91px;
transition: filter 0.5s, transform 0.5s;
}

.download_button1: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: 195px;
color: #d70159;
font-size: 18px;
text-shadow: 
-1px -1px 0 #fff,  
1px -1px 0 #fff,
-1px  1px 0 #fff,
1px  1px 0 #fff;
}

.dl_partition {
position: relative;
background-color: #152732;
margin-top: 30px;
width: 1280px;
height: 100px;
display: inline-block;
}

.free_talk_index {
position: absolute;
background-image: url('../image/download/free_talk_index.png');
top: calc((100px - 66px) / 2);
left: calc((1280px - 524px) / 2);
width: 524px;
height: 66px;
}

.free_talk_wrapper {
position: relative;
margin-top: -7px;
width: 1280px;
height: auto;
display: flex;
justify-content: center;
align-items: center;
}

.free_talk_container {
margin-top: 0px;
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-template-rows: repeat(2, auto);
gap: 0px;
}

.free_talk_box {
position: relative;
margin-top: 20px;
margin-left: 15px;
left: 0px;
width: 608px;
height: 168px;
display: inline-block;
}

.free_talk_base1 {
position: absolute;
background-image: url('../image/download/free_talk_nephile.png');
top: 0px;
left: 0px;
width: 608px;
height: 168px;
}

.free_talk_base2 {
position: absolute;
background-image: url('../image/download/free_talk_lip.png');
top: 0px;
left: 0px;
width: 608px;
height: 168px;
}

.free_talk_base3 {
position: absolute;
background-image: url('../image/download/free_talk_rena.png');
top: 0px;
left: 0px;
width: 608px;
height: 168px;
}

.free_talk_base4 {
position: absolute;
background-image: url('../image/download/free_talk_fine.png');
top: 0px;
left: 0px;
width: 608px;
height: 168px;
}

.free_talk1_index {
position: absolute;
background-image: url('../image/download/free_talk1_index.png');
top: 40px;
left: 360px;
width: 95px;
height: 25px;
}

.free_talk2_index {
position: absolute;
background-image: url('../image/download/free_talk2_index.png');
top: 40px;
left: 470px;
width: 95px;
height: 25px;
}

.talk_button1 {
position: absolute;
top: 75px;
left: 376px;
width: 65px;
height: 50px;
transition: filter 0.5s, transform 0.5s;
}

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

.talk_button2 {
position: absolute;
top: 75px;
left: 486px;
width: 65px;
height: 50px;
transition: filter 0.5s, transform 0.5s;
}

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

.free_talk2_text {
position: absolute;
background-image: url('../image/download/free_talk2_text.png');
top: 130px;
left: 475px;
width: 88px;
height: 17px;
}

/* イベントページ */
.headline_event {
position: absolute;
background-image: url('../image/event/headline_event.png');
bottom: 12px;
left: 40px;
width: 300px;
height: 46px;
}

.event_contents_wrapper {
position: relative;
margin-top: -7px;
width: 1280px;
height: auto;
display: inline-block;
justify-content: center;
align-items: center;
}

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

.event01_contents_base {
position: absolute;
background-image: url('../image/event/event01_base.png');
top: 0px;
left: 0px;
width: 1200px;
height: 900px;
}

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

.event02_contents_base {
position: absolute;
background-image: url('../image/event/event02_base.png');
top: 0px;
left: 0px;
width: 1200px;
height: 680px;
}

.event01_index {
position: absolute;
background-image: url('../image/event/event01_index.png');
top: 10px;
left: calc((1200px - 1105px) / 2);
width: 1105px;
height: 73px;
}

.event02_index {
position: absolute;
background-image: url('../image/event/event02_index.png');
top: 10px;
left: calc((1200px - 826px) / 2);
width: 826px;
height: 72px;
}

.event_pop01 {
position: absolute;
top: 170px;
left: 130px;
max-width: 450px;
height: auto;
display: block;
transition: filter 0.5s, transform 0.5s;
}

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

.event_pop02 {
position: absolute;
top: 170px;
right: 130px;
max-width: 450px;
height: auto;
display: block;
transition: filter 0.5s, transform 0.5s;
}

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

.event_pop03 {
position: absolute;
top: 155px;
left: 120px;
max-width: 300px;
height: auto;
display: block;
transition: filter 0.5s, transform 0.5s;
}

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

.event_pop04 {
position: absolute;
top: 155px;
left: calc((1200px - 300px) / 2);
max-width: 300px;
height: auto;
display: block;
transition: filter 0.5s, transform 0.5s;
}

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

.event_pop05 {
position: absolute;
top: 155px;
right: 120px;
max-width: 300px;
height: auto;
display: block;
transition: filter 0.5s, transform 0.5s;
}

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

/* ショップページ */
.headline_shop {
position: absolute;
background-image: url('../image/shop/headline_shop.png');
bottom: 12px;
left: 40px;
width: 540px;
height: 47px;
}

.shop_partition {
position: relative;
background-color: #152732;
margin-top: 30px;
width: 1280px;
height: 100px;
display: inline-block;
}

.shop_index {
position: absolute;
background-image: url('../image/shop/shop_index.png');
top: calc((100px - 41px) / 2);
left: calc((1280px - 299px) / 2);
width: 299px;
height: 41px;
}

.official_store_index {
position: absolute;
background-image: url('../image/shop/official_store_index.png');
top: calc((100px - 40px) / 2);
left: calc((1280px - 500px) / 2);
width: 500px;
height: 40px;
}

.org_shop_index {
position: absolute;
background-image: url('../image/shop/org_shop_index.png');
top: calc((100px - 46px) / 2);
left: calc((1280px - 450px) / 2);
width: 450px;
height: 46px;
}

.shop_box {
position: relative;
margin-top: 30px;
left: 0px;
width: 1280px;
height: 797px;
display: inline-block;
}

.shop_base {
position: absolute;
background-image: url('../image/shop/shop_base.png');
top: 0px;
left: calc((1280px - 1214px) / 2);
width: 1214px;
height: 797px;
}

.org_shop_wrapper {
position: relative;
margin-top: -7px;
width: 1280px;
height: auto;
display: flex;
justify-content: center;
align-items: center;
}

.org_shop_container {
margin-top: 0px;
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-template-rows: repeat(2, auto);
gap: 0px;
}

.org_shop_box {
position: relative;
margin-top: 30px;
margin-left: 30px;
left: -50px;
width: 594px;
height: 514px;
display: inline-block;
}

.org_shop_base {
position: absolute;
background-image: url('../image/shop/org_shop_base.png');
top: 0px;
left: calc((1280px - 1214px) / 2);
width: 594px;
height: 514px;
}

.dlc_index {
position: absolute;
background-image: url('../image/shop/dlc_index.png');
top: 100px;
left: 70px;
width: 490px;
height: 40px;
}

.thumb_dlc {
position: absolute;
top: 150px;
left: 55px;
width: 674px;
height: 394px;
transition: filter 0.5s, transform 0.5s;
}

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

.tapestry_index {
position: absolute;
background-image: url('../image/shop/tapestry_index.png');
top: 100px;
right: 82px;
width: 430px;
height: 40px;
}

.card_index {
position: absolute;
background-image: url('../image/shop/card_index.png');
top: 100px;
right: 82px;
width: 430px;
height: 40px;
}

.acrylic_index01 {
position: absolute;
background-image: url('../image/shop/acrylic_index01.png');
top: 100px;
right: 82px;
width: 430px;
height: 40px;
}

.acrylic_index02 {
position: absolute;
background-image: url('../image/shop/acrylic_index02.png');
top: 100px;
right: 82px;
width: 430px;
height: 40px;
}

.acrylic_index03 {
position: absolute;
background-image: url('../image/shop/acrylic_index03.png');
top: 100px;
right: 82px;
width: 430px;
height: 40px;
}

.acrylic_index04 {
position: absolute;
background-image: url('../image/shop/acrylic_index04.png');
top: 100px;
right: 82px;
width: 430px;
height: 40px;
}

.thumb_cg {
position: absolute;
top: 150px;
right: 65px;
width: 464px;
height: 394px;
transition: filter 0.5s, transform 0.5s;
}

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

.shop_button {
position: absolute;
bottom: 30px;
left: calc((1280px - 286px) / 2);
width: 286px;
height: 56px;
transition: filter 0.5s, transform 0.5s;
}

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

.shop_button_L {
position: absolute;
bottom: 40px;
left: 300px;
width: 286px;
height: 56px;
transition: filter 0.5s, transform 0.5s;
}

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

.shop_button_R {
position: absolute;
bottom: 40px;
right: 300px;
width: 286px;
height: 56px;
transition: filter 0.5s, transform 0.5s;
}

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

.text_L {
position: absolute;
bottom: -10px;
margin-left: 360px;
color: #d70159;
font-size: 18px;
font-weight: bold;
text-shadow: 
-1px -1px 0 #fff,  
1px -1px 0 #fff,
-1px  1px 0 #fff,
1px  1px 0 #fff;
}

.text_R {
position: absolute;
bottom: -10px;
margin-left: 700px;
color: #d70159;
font-size: 18px;
font-weight: bold;
text-shadow: 
-1px -1px 0 #fff,  
1px -1px 0 #fff,
-1px  1px 0 #fff,
1px  1px 0 #fff;
}

.thumb_tccc {
position: absolute;
top: 420px;
right: 70px;
width: 309px;
height: 171px;
transition: filter 0.5s, transform 0.5s;
}

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

.thumb_goods {
position: absolute;
top:80px;
left: 50px;
width: 559px;
height: 329px;
transition: filter 0.5s, transform 0.5s;
}

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

.org_goods01 {
position: absolute;
background-image: url('../image/shop/org_goods01.png');
top:420px;
left: 55px;
width: 253px;
height: 47px;
}

.org_goods02 {
position: absolute;
background-image: url('../image/shop/org_goods02.png');
top:420px;
left: 55px;
width: 240px;
height: 49px;
}

.org_goods03 {
position: absolute;
background-image: url('../image/shop/org_goods03.png');
top:420px;
left: 55px;
width: 237px;
height: 46px;
}

.org_shop_button {
position: absolute;
top:420px;
left: 315px;
width: 286px;
height: 56px;
transition: filter 0.5s, transform 0.5s;
}

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

/* 予約特典 */
.preorder_box {
position: relative;
margin-top: 30px;
left: 0px;
width: 1280px;
height: 714px;
display: inline-block;
}

.preorder_base {
position: absolute;
background-image: url('../image/shop/preorder_base.png');
top: 0px;
left: calc((1280px - 1214px) / 2);
width: 1214px;
height: 714px;
}

.preorder_index {
position: absolute;
background-image: url('../image/shop/preorder_index.png');
top: 12px;
left: 60px;
width: 224px;
height: 66px;
}

.preorder_icon {
position: absolute;
background-image: url('../image/shop/preorder_icon.png');
top: 15px;
right: 60px;
width: 61px;
height: 60px;
}

.preorder_title {
position: absolute;
background-image: url('../image/shop/preorder_title.png');
top: 530px;
left: 70px;
width: 582px;
height: 72px;
}

.preorder_text {
position: absolute;
background-image: url('../image/shop/preorder_text.png');
top: 595px;
left: 70px;
width: 1119px;
height: 87px;
}

.preorder_release {
position: absolute;
background-image: url('../image/shop/preorder_release.png');
top: 100px;
right: 70px;
width: 454px;
height: 84px;
}

.preorder_rena {
position: absolute;
background-image: url('../image/shop/preorder_rena.png');
bottom: 10px;
right: 40px;
width: 550px;
height: 567px;
}

/* ソフマップ */
.sofmap_index {
position: absolute;
background-image: url('../image/shop/sofmap_index.png');
top: 5px;
left: 60px;
width: 309px;
height: 73px;
}

.sofmap_title {
position: absolute;
background-image: url('../image/shop/sofmap_title.png');
top: 530px;
left: 70px;
width: 222px;
height: 72px;
}

.sofmap_text {
position: absolute;
background-image: url('../image/shop/sofmap_text.png');
top: 595px;
left: 70px;
width: 1023px;
height: 58px;
}

/* げっちゅ屋 */
.getchu_index {
position: absolute;
background-image: url('../image/shop/getchu_index.png');
top: 5px;
left: 60px;
width: 310px;
height: 70px;
}

.getchu_title {
position: absolute;
background-image: url('../image/shop/getchu_title.png');
top: 530px;
left: 70px;
width: 422px;
height: 72px;
}

.getchu_text {
position: absolute;
background-image: url('../image/shop/getchu_text.png');
top: 595px;
left: 70px;
width: 855px;
height: 58px;
}

/* トレーダー */
.trader_index {
position: absolute;
background-image: url('../image/shop/trader_index.png');
top: 5px;
left: 60px;
width: 306px;
height: 72px;
}

.trader_title {
position: absolute;
background-image: url('../image/shop/trader_title.png');
top: 530px;
left: 70px;
width: 502px;
height: 74px;
}

.trader_text {
position: absolute;
background-image: url('../image/shop/trader_text.png');
top: 595px;
left: 70px;
width: 941px;
height: 58px;
}

/* メロンブックス */
.melonbooks_index {
position: absolute;
background-image: url('../image/shop/melonbooks_index.png');
top: 5px;
left: 60px;
width: 410px;
height: 73px;
}

.melonbooks_title {
position: absolute;
background-image: url('../image/shop/melonbooks_title.png');
top: 530px;
left: 70px;
width: 382px;
height: 72px;
}

.melonbooks_text {
position: absolute;
background-image: url('../image/shop/melonbooks_text.png');
top: 590px;
left: 70px;
width: 975px;
height: 87px;
}

/* 駿河屋 */
.surugaya_index {
position: absolute;
background-image: url('../image/shop/surugaya_index.png');
top: 5px;
left: 60px;
width: 210px;
height: 66px;
}

.surugaya_title {
position: absolute;
background-image: url('../image/shop/surugaya_title.png');
top: 530px;
left: 70px;
width: 382px;
height: 72px;
}

.surugaya_text {
position: absolute;
background-image: url('../image/shop/surugaya_text.png');
top: 595px;
left: 70px;
width: 879px;
height: 58px;
}

/* Amazon */
.amazon_index {
position: absolute;
background-image: url('../image/shop/amazon_index.png');
top: 5px;
left: 60px;
width: 304px;
height: 64px;
}

.amazon_title {
position: absolute;
background-image: url('../image/shop/amazon_title.png');
top: 530px;
left: 70px;
width: 502px;
height: 72px;
}

.amazon_text {
position: absolute;
background-image: url('../image/shop/amazon_text.png');
top: 590px;
left: 70px;
width: 686px;
height: 87px;
}

.amazon_sp {
position: absolute;
top: 420px;
right: 70px;
width: 307px;
height: 164px;
}

/* メディオ！/お宝創庫 */
.medio_index {
position: absolute;
background-image: url('../image/shop/medio_index.png');
top: 5px;
left: 60px;
width: 534px;
height: 74px;
}

.medio_title {
position: absolute;
background-image: url('../image/shop/medio_title.png');
top: 530px;
left: 70px;
width: 782px;
height: 72px;
}

.medio_text {
position: absolute;
background-image: url('../image/shop/medio_text.png');
top: 595px;
left: 70px;
width: 883px;
height: 58px;
}

/* オフィシャル通販 */
.official_title {
position: absolute;
background-image: url('../image/shop/official_title.png');
top: 10px;
left: calc((1280px - 1178px) / 2);
width: 1178px;
height: 72px;
}

.official_text {
position: absolute;
background-image: url('../image/shop/official_text.png');
top: 542px;
left: 70px;
width: 1132px;
height: 139px;
}

/* あみあみ */
.amiami_index {
position: absolute;
background-image: url('../image/shop/amiami_index.png');
top: 10px;
left: 60px;
width: 260px;
height: 66px;
}

/* アリスNET */
.alicenet_index {
position: absolute;
background-image: url('../image/shop/alicenet_index.png');
top: 10px;
left: 60px;
width: 345px;
height: 65px;
}

/* パソコンショップMK */
.pcshopmk_index {
position: absolute;
background-image: url('../image/shop/pcshopmk_index.png');
top: 10px;
left: 60px;
width: 462px;
height: 64px;
}

/* ブックメイト */
.bookmate_index {
position: absolute;
background-image: url('../image/shop/bookmate_index.png');
top: 5px;
left: 60px;
width: 359px;
height: 73px;
}

/* よろずやショップびっく宝島 */
.bictakarajima_index {
position: absolute;
background-image: url('../image/shop/bictakarajima_index.png');
top: 10px;
left: 40px;
width: 580px;
height: 64px;
}

/* 古川電気 */
.furukawadenki_index {
position: absolute;
background-image: url('../image/shop/furukawadenki_index.png');
top: 10px;
left: 60px;
width: 261px;
height: 66px;
}

/* 中京マイコン */
.chukyomicon_index {
position: absolute;
background-image: url('../image/shop/chukyomicon_index.png');
top: 10px;
left: 60px;
width: 360px;
height: 66px;
}

/* 共通フッター */
footer {
position: relative;
z-index: 999;
background-color: #152732;
top: -7px;
width: 1280px;
height: 300px;
box-sizing: border-box;
}

.triangle_logo_footer {
position: absolute;
background-image: url('../image/triangle_logo.png');
top: calc((300px - 98px) / 2);
left: calc((1280px - 197px) / 2);
width: 193px;
height: 98px;
transition: filter 0.5s, transform 0.5s;
}

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