@charset "UTF-8";


.outer{
display: flex;
justify-content: center;
align-items: center;
width: 100%;
min-height: 100dvh;
padding: 0;
}
.inner{
width: 100vw;
max-width: 900px;
position: relative;
z-index: 12;
}
.inner div{
margin: 0 auto;
}
#modaal-close{
cursor: pointer;
}

.commentWrap{
width: 94%;
max-width: 960px;
margin: 3rem auto;
display: block;
backdrop-filter: blur(0.5vw) brightness(70%) saturate(185%);
-webkit-backdrop-filter: blur(0.5vw) brightness(70%) saturate(185%);
padding: 1.5rem 1.5rem 3rem 1.5rem;
border-radius: 8vw;
border: solid 0.6vw rgba(255, 255, 255, 0.9);
transition: 1.0s all;
/*transition-delay: 1.0s;*/
transform: translate(0, 5vw);
opacity: 0;
filter: blur(2vw);
}
.commentWrap.active{
transform: translate(0, 0);
opacity: 1;
filter: blur(0);
}
.images{
border-radius: 1.5vw;
margin: 1rem auto;
}
h4{
width: 60%;
aspect-ratio:920/180;
margin: 0 auto;
background: url("../../song/images/heading_rope.png") center center no-repeat;
background-size: 100%;
text-align: center;
font-size: 1rem;
}
#title hgroup{
font-family: "Noto Serif JP", serif;
font-optical-sizing: auto;
font-weight: 600;
font-style: normal;
background: url("../../song/images/anchor.png") center center no-repeat;
background-size: 30%;
text-align: center;
padding: 1.5rem 0;
}
#title hgroup p{
font-size: 2rem;
line-height: 1.4;
text-align: center;
}
#title hgroup h3{
font-size: 3rem;
text-align: center;
line-height: 1;
font-weight: normal;
}
#title hgroup h3 span{
font-size: 2rem;
}
#title .images{
width: 100%;
margin: 0 auto 0.5rem auto;
}
#comment section{
background: rgba(0, 15, 100, 0.3);
background: rgba(0, 200, 255, 0.3);
background: rgba(0, 255, 255, 0.25);
/*border: solid 0.5vw rgba(255, 255, 255, 0.75);*/
margin-top: 2rem;
padding: 2rem 1rem;
border-radius: 3vw;
}
#comment section:nth-of-type(1){
margin-top: 1rem;
}
#comment h5{
font-size: 1.3rem;
line-height: 1;
padding: 0.75em 0 1.5em 0;
}
#comment h5 span{
font-size: 0.85rem;
padding-left: 0.3em;
}
#comment section p{
font-size: 1rem;
line-height: 1.7;
text-align: justify;
}

/*PC*/
@media screen and (min-width:768px){

.commentWrap{
backdrop-filter: blur(0.4vw) brightness(75%) saturate(185%);
-webkit-backdrop-filter: blur(0.4vw) brightness(75%) saturate(185%);
padding: 3rem;
border-radius: 4vw;
border: solid 0.4vw rgba(255, 255, 255, 0.9);
}
#title hgroup{
background-size: 25%;
padding: 2.5rem 0;
margin: -1rem auto 1rem auto;
}
#title hgroup p{
font-size: 2rem;
}
#title hgroup h3{
font-size: 3rem;
}
.images{
border-radius: 0.5vw;
}
h4{
width: 32%;
}
#comment section{
border-radius: 0.75rem;
padding: 3rem;
}
#comment h5{
padding: 0.6em 0 1.75em 0;
}

}


/*PC*/
@media screen and (min-width:1080px){

.commentWrap{
backdrop-filter: blur(4px) brightness(75%) saturate(185%);
-webkit-backdrop-filter: blur(4px) brightness(75%) saturate(185%);
border-radius: 43px;
border: solid 4px rgba(255, 255, 255, 0.9);
}
   
}