@charset "UTF-8";

html,body{
}

#pageContainer{
position: fixed;
width: 100%;
height: 100lvh;
top:0;
left: 0;
background: url("../images/song_bg_mobile.jpg") center top no-repeat;
background-size: cover;
z-index: 0;
}
header{
padding: 0.5rem 0;
}
header a{
z-index: 1;
}
header h1{
display: inline-block;
background: url("../../assets/images_common/header_logo_sub.png");
background-size: 100%;
text-indent: -999999;
aspect-ratio: 660/300;
width: 35vw;
}
main h2{
display: inline-block;
background: url("../images/heading_song.png");
background-size: 100%;
text-indent: -999999;
aspect-ratio: 1540/380;
width: 100vw;
text-indent: -99999;
width: 80vw;
margin: 1rem auto;
aspect-ratio: 1540/380;
}
.songWrap{
width: 94%;
max-width: 960px;
margin: 1rem auto 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);
}
.songWrap.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: 4rem auto 0 auto;
background: url("../images/heading_rope.png") center center no-repeat;
background-size: 100%;
text-align: center;
font-size: 1rem;
}
#title hgroup{
font-family: "EB Garamond", "Noto Sans JP", sans-serif;
font-optical-sizing: auto;
font-weight: 500;
font-style: normal;
background: url("../images/anchor.png") center center no-repeat;
background-size: 47%;
text-align: center;
padding: 1.5rem 0;
}
#title hgroup p{
font-size: 3rem;
line-height: 1;
text-align: center;
}
#title hgroup h3{
font-size: 5rem;
text-align: center;
line-height: 1;
font-weight: normal;
}
#title .images{
width: 100%;
margin: 0 auto 0.5rem auto;
}
#profile h4{
margin-top: 1rem;
}
#profile .images{
width: 80%;
}
#profile p{
font-size: 0.8rem;
line-height: 1.5;
text-align: justify;
}
#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;
}
#cd p{
font-size: 1.2rem;
line-height: 1;
margin-top: 1.5em;
}
#cd p:nth-of-type(2){
font-size: 0.9rem;
}
#cd p strong{
display: block;
font-size: 4.5rem;
font-family: "EB Garamond", "Noto Sans JP", sans-serif;
margin-top: 0.5rem;
}
#cd p span{
display: block;
font-size: 0.7rem;
margin-top: 0.25rem;
}
#cd p a{
color: #FF0;
padding-left: 0.3em;
}
#cd .caption{
font-size: 0.7rem;
line-height: 1.4;
margin-top: 0.4em;
}
#cd article{
display: inline-block;
width:50%;
}
#cd article:nth-of-type(1){
width:100%;
}
#cd .images{
width: 90%;
margin: 1.2rem auto 0 auto;
}
#cd article:nth-of-type(1) .images{
width:80%;
}

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

#pageContainer{
background: url("../images/song_bg_pc.jpg") center top no-repeat;
background-size: cover;
}
header h1{
width: 25vw;
max-width: calc(1080px*0.25);
}
main h2{
width: 70vw;
max-width: calc(1080px*0.7);

width: 50vw;
max-width: calc(1080px*0.50);
aspect-ratio: 1540/380;
}
.songWrap{
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: 36%;
padding: 2rem 0;
}
#title hgroup p{
font-size: 5rem;
}
#title hgroup h3{
font-size: 7rem;
}
.images{
border-radius: 0.5vw;
}
#profile .images{
display: inline-block;
width: 48%;
vertical-align: middle;
}
#profile p{
display: inline-block;
width: 52%;
padding-left: 1rem;
vertical-align: middle;
font-size: 0.82rem;
line-height: 1.65;
}
h4{
width: 32%;
}
#comment section{
border-radius: 0.75rem;
padding: 3rem;
}
#comment h5{
padding: 0.6em 0 1.75em 0;
}

#cd p strong{
font-size: 5.5rem;
}
#cd p{
font-size: 1.3rem;
}
#cd article:nth-of-type(1){
width:80%;
}
#cd article .images{
width:90%;
}
#cd article:nth-of-type(1) .images{
width:80%;
}
#cd p span,
#cd .caption{
font-size: 0.8rem;
}

@media (orientation: portrait){

/*デバイスが縦向きの場合*/

}

}


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

header h1{
max-width: calc(1080px*0.25);
}
.songWrap{
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);
}
.songWrap .fish:nth-of-type(1){
top: calc(1080px*0.005);
right: calc(-1080px*0.025);
}
.songWrap .fish:nth-of-type(2){
top: calc(-1080px*0.04);
right: calc(-1080px*0.03);
}
.songWrap .fish:nth-of-type(3){
bottom: calc(-1080px*0.03);
right: calc(-1080px*0.02);
}
   
}