@charset "UTF-8";
@import url('https://fonts.googleapis.com/css2?family=BIZ+UDPGothic&display=swap');


/* PC サブイベント背景CSS */

#soundmesse_sub_contents,
#soundmesse_subbottom_contents{
width: 100%;
margin: 0 auto;
color: #fff;
text-align: center;
font-family: "BIZ UDPGothic", sans-serif;
font-weight: 400;
font-style: normal;
font-size: 18px;
background-size: cover;
background-position: center;
border-radius: 30px;
border: 5px ridge #444;
position: relative;
overflow: hidden;
box-shadow: 0px 1px 2px 1px rgba(0, 0, 0, 0.3);
}

#soundmesse_sub_contents{
background-image: url(/features/allstores/event/soundmesse/2026/bg02.webp);
}

#soundmesse_subbottom_contents{
background-image: url(/features/allstores/event/soundmesse/2026/footer-bg.webp);
}

#soundmesse_subbottom_contents::before{
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
}

#soundmesse_sub_contents span.big-font,
#soundmesse_subbottom_contents span.big-font{
font-size: 1.5em;
font-weight: 800;
color: #eed9b3;
}

#soundmesse_sub_contents .stars,
#soundmesse_subbottom_contents .stars2{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
overflow: hidden;
background: linear-gradient(122deg,rgba(4, 6, 10, 0.3) 0%, rgba(19, 37, 56, 0.3) 66%, rgba(59, 68, 99, 0.3) 100%);
}

#soundmesse_sub_contents .star,
#soundmesse_subbottom_contents .star{
position: absolute;
display: block;
background-color: #fff;
border-radius: 50%;
box-shadow: 0 0 4px 2px rgba(255, 255, 255, 0.2);
opacity: 0;
animation: twinkle 4s infinite;
padding-left: 0px;
}

@keyframes twinkle{
 0%{
  opacity: 0;
 }
 50%{
  transform: scale(1.1);
  opacity: 1;
 }
 100%{
   opacity: 0;
   transform: scale(1);
 }
}

#soundmesse_sub_contents .shootingstar,
#soundmesse_subbottom_contents .shootingstar{
position: absolute;
width: 100%;
height: 100%;
}

#soundmesse_sub_contents .shootingstar.star_bg1,
#soundmesse_subbottom_contents .shootingstar.star_bg1{
background-image: radial-gradient(2px 2px at 20% 30%, white, transparent), radial-gradient(2px 2px at 60% 70%, white, transparent), radial-gradient(2px 2px at 80% 20%, white, transparent);
background-size: 100% 100%;
animation: star1 30s ease-in-out infinite alternate;
}

@keyframes star1{
 from{
  transform: translateY(0) translateX(0);
 }
 to{
  transform: translateY(30px) translateX(20px);
 }
}

#soundmesse_sub_contents .shootingstar.star_bg2,
#soundmesse_subbottom_contents .shootingstar.star_bg2{
background-image: radial-gradient(3px 3px at 40% 40%, white, transparent), radial-gradient(3px 3px at 70% 60%, white, transparent);
background-size: 100% 100%;
animation: star2 25s ease-in-out infinite alternate;
opacity: 0.8;
}

@keyframes star2{
 from {
  transform: translateY(0) translateX(0);
 }
 to {
  transform: translateY(60px) translateX(40px);
 }
}

#soundmesse_sub_contents .shootingstar.star_bg3,
#soundmesse_subbottom_contents .shootingstar.star_bg3{
background-image: radial-gradient(4px 4px at 30% 50%, white, transparent), radial-gradient(4px 4px at 80% 80%, white, transparent);
background-size: 100% 100%;
animation: star3 20s ease-in-out infinite alternate;
opacity: 0.9;
}

@keyframes star3{
 from {
  transform: translateY(0) translateX(0);
 }
 to {
  transform: translateY(90px) translateX(60px);
 }
}

#soundmesse_sub_contents .astronaut{
width: auto;
height: 60%;
aspect-ratio: 117 / 125;
position: absolute;
top: 20%;
left: -3%;
animation: astronaut_animation 3s ease-in-out infinite alternate;
transition: 1.5s ease-in-out;
background-size: contain;
background-repeat: no-repeat;
background-position: center bottom;
background-image: url('/features/allstores/event/soundmesse/2026/astronaut.webp');
z-index: 1;
}

@keyframes astronaut_animation{
 0%{
  transform:translate(0, 0) rotate(-7deg);
 }
 50%{
  transform:translate(0, -7px) rotate(0deg);
 }
 100%{
  transform:translate(0, 0) rotate(7deg);
 }
}

#soundmesse_subbottom_contents .spaceship{
width: 13%;
height: auto;
aspect-ratio: 702 / 1513;
position: absolute;
bottom: -100%;
right: -2%;
animation-name: spaceship_animation;
animation-duration: 10s;
animation-timing-function: ease-in;
animation-iteration-count: infinite;
background-size: contain;
background-repeat: no-repeat;
background-position: center bottom;
background-image: url('/features/allstores/event/soundmesse/2026/spaceship.webp');
z-index: 1;
}

@keyframes spaceship_animation{
 0% {
  bottom: -100%;
 }
 40% {
  bottom: -100%;
 }
 100% {
  bottom: 100%;
 }
}


/* PC サブイベントヘッダーCSS */

#soundmesse_sub_contents .text{
position: relative;
padding: 2em;
z-index: 2;
}

#soundmesse_sub_contents .text h3{
font-size: 23px;
margin: 0;
}

#soundmesse_sub_contents .text p{
font-size: 18px;
}

#soundmesse_sub_contents .text p:has(span.small-font){
margin: 1em auto 0;
}

#soundmesse_sub_contents .text p span.small-font{
display: inline-block;
font-size: 0.7em;
padding-left: 0.8em;
position: relative;
}

#soundmesse_sub_contents .text p span.small-font::before{
position: absolute;
content: "*";
top: 0;
left: 0;
}

#soundmesse_sub_contents .text b{
font-size: 1.2em;
font-weight: 800;
color: #eed9b3;
}

#soundmesse_sub_contents .text a{
display: inline-block;
margin: 0 auto 1em;
width: auto;
height: 4em;
background-size: contain;
background-repeat: no-repeat;
background-position: center;
}

#soundmesse_sub_contents.ag_sub_contents .text a,
#soundmesse_sub_contents.eg_sub_contents .text a{
aspect-ratio: 600 / 173;
background-image: url(/features/allstores/event/soundmesse/2026/2026sm_logo_m.webp);
}

#soundmesse_sub_contents.ef_sub_contents .text a{
aspect-ratio: 100 / 43;
background-image: url(/features/allstores/event/soundmesse/2026/summit_logo_s.webp);
}


/* PC サブイベントフッターCSS */

#soundmesse_subbottom_contents .text{
position: relative;
padding: 2em;
z-index: 2;
}

#soundmesse_subbottom_contents h3{
width: 100%;
margin: 0 0 1em;
text-align: center;
color: #fff;
font-size: 20px;
}

#soundmesse_subbottom_contents .title_logo{
margin: 0 auto 1em;
width: auto;
height: 3em;
background-size: contain;
background-repeat: no-repeat;
background-position: center;
aspect-ratio: 600 / 173;
background-image: url(/features/allstores/event/soundmesse/2026/2026sm_logo.webp);
}

#soundmesse_subbottom_contents ul{
display: flex;
flex-wrap: wrap;
gap: 0.6rem 2%;
}

#soundmesse_subbottom_contents li{
width: 23.5%;
}

#soundmesse_subbottom_contents li a{
display: flex;
position: relative;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
padding: 1em 2em 1em 1em;
font-size: 12px;
transition: 0.3s ease-in-out;
position: relative;
border-radius: 5px;
border: 1px solid rgba(255, 255, 255, 0.8);
overflow: hidden;
}

#soundmesse_subbottom_contents li a.all_item{
font-size: 15px;
padding: 0;
}

#soundmesse_subbottom_contents li a:hover{
text-decoration: none;
background-color: rgba(255, 255, 255, 0.25);
backdrop-filter: blur(1px);
-webkit-backdrop-filter: blur(1px);
box-shadow: 0 0 0.5em 0 rgba(255, 255, 255, 0.6);
}

#soundmesse_subbottom_contents li a:hover::before{
content: "";
position: absolute;
display: block;
background: linear-gradient(to right,rgba(255,255,255,0), rgba(255,255,255,0.8));
width: 100%;
aspect-ratio: 1 / 1;
top: -200%;
left: -100%;
animation-name: button_animation;
animation-duration: 4s;
animation-timing-function: ease-in;
}

@keyframes button_animation {
 0%{
  transform: scale(0) rotate(50deg);
  opacity: 0;
 }
 40%{
  transform: scale(1) rotate(50deg);
  opacity: 0.4;
 }
 100%{
  transform: scale(250) rotate(50deg);
  opacity: 0;
 }
}

#soundmesse_subbottom_contents li a::after{
position: absolute;
top: calc(50% - 0.25em);
right: 1em;
display: block;
width: 0.5em;
height: 0.5em;
content: "";
border-top: 1px solid;
border-right: 1px solid;
transform: rotate(45deg);
}

#soundmesse_subbottom_contents li a.active{
padding: 1em;
text-decoration: none;
background-color: rgba(255, 255, 255, 0.4);
backdrop-filter: blur(1px);
-webkit-backdrop-filter: blur(1px);
box-shadow: 0 0 0.5em 0 rgba(255, 255, 255, 0.6);
}

#soundmesse_subbottom_contents li a.active:hover::before,
#soundmesse_subbottom_contents li a.active::after{
content: none;
}


@media only screen and (max-device-width: 1000px) {

/* SP サブイベント背景CSS */

#soundmesse_sub_contents,
#soundmesse_subbottom_contents{
border-radius: 0.8em;
}

#soundmesse_sub_contents .astronaut{
height: 5em;
top: 0.3em;
left: -0.2em;
}

#soundmesse_subbottom_contents .spaceship{
width: 25%;
right: -5%;
}


/* SP サブイベントヘッダーCSS */

#soundmesse_sub_contents .text{
padding: 1.5em 1em;
}

#soundmesse_sub_contents .text h3{
font-size: 1.8rem;
}

#soundmesse_sub_contents .text a{
margin: 0 auto 0.5em;
height: 2.5em;
}

#soundmesse_sub_contents .text p{
font-size: 1.4rem;
}

#soundmesse_sub_contents .text p:has(span.small-font){
text-align: initial;
line-height: 1.5;
margin: 0.5em auto 0;
}

#soundmesse_sub_contents .text p span.small-font{
margin: 0.5em auto 0;
font-size: 0.8em;
}


/* SP サブイベントフッターCSS */

#soundmesse_subbottom_contents .text{
padding: 1.5em 1em;
}

#soundmesse_subbottom_contents h3{
font-size: 1.8rem;
}

#soundmesse_subbottom_contents li{
width: 49%;
}

#soundmesse_subbottom_contents li a{
font-size: 1.2rem;
}

#soundmesse_subbottom_contents li a.all_item{
font-size: 1.5rem;
}
}