@charset "UTF-8";

html,body{
}

#pageContainer{
position: fixed;
width: 100%;
height: 100lvh;
top:0;
left: 0;
background: url("../images/news_bg_sea.png") center bottom no-repeat, linear-gradient(180deg,rgba(97, 215, 241, 1) 0%, rgba(9, 54, 167, 1) 100%);
background-size: 170%, 100%;
z-index: 0;
}
#light{
position: absolute;
top:0;
left: 0;
width: 100%;
mix-blend-mode: screen;
opacity: 0.3;
}
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;
}
#charaWrap{
display: block;
margin: 0 auto;
width: 100%;
aspect-ratio: 960/340;
max-width: 1060px;
position: relative;
margin-top: -15vw;
margin-bottom: -8vw;
background: url("../images/news_bubble_mobile.png") center center no-repeat;
background-size: 100%;
}
#charaWrap img{
width: 38%;
height: auto;
position: absolute;
left: 50%;
}
#charaWrap img:nth-of-type(1){
margin-left: 12%;
}
#charaWrap img:nth-of-type(2){
margin-left: -46%;
}
#charaWrap img:nth-of-type(3){
margin-left: -20%;
}
main h2{
display: inline-block;
background: url("../images/heading_news.png");
background-size: 100%;
text-indent: -999999;
aspect-ratio: 960/180;
width: 100vw;
}
.news{
width: 92%;
max-width: 960px;
margin: 2rem auto 6rem auto;
}
/*.news:nth-of-type(1){
margin-top: 1rem;
}*/
.news > article{
display: block;
backdrop-filter: blur(0.5vw) brightness(55%) saturate(260%);
-webkit-backdrop-filter: blur(0.5vw) brightness(55%) saturate(260%);
padding: 1.5rem 1.8rem 2rem 1.8rem;
border-radius: 8vw;
border: solid 0.6vw rgba(255, 255, 255, 0.7);
}
.newsWrap.effect{
/*transition-delay: 1.0s;*/
}
.newsTitle{
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: 25vw;
padding: 0;
background: url("../images/news_waku_anchor.png") center center no-repeat;
background-size: 30%;
margin-bottom: 0.5rem;
}
.newsTitle p.date{
display: block;
width: 100%;
font-size: 0.75rem;
text-align: center;
}
.newsTitle h3{
display: block;
width: 100%;
font-size: 1.1rem;
line-height: 1.4;
text-align: center;
}
.news > article p{
text-align: justify;
font-size: 1rem;
}
.news .fish{
position: absolute;
width: 50%;
filter: drop-shadow(0.5vw 0.5vw 1vw #009);
}
.news .fish:nth-of-type(1){
top:-5vw;
right: -2vw;
}
.news .fish:nth-of-type(2){
top:-5vw;
left: -2vw;
display: none;
}
.news .fish:nth-of-type(3){
bottom: -7vw;
left: -4.5vw;
}
.news h4{
display: inline-block;
font-size: 1.1rem;
line-height: 1.4;
width: 70%;
background: url("../images/dot.png") center bottom repeat-x;
background-size: 100%;
padding-bottom: 0.5em;
margin: 3rem auto 1rem auto;
}
.pict, .pictT, .yt{
border-radius: 1.5vw;
margin: 2rem auto;
}
.pict{
width: 100%;
}
.pictT{
width: 100%;
}
.yt{
width: 100%;
aspect-ratio:16/9;
}

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

#pageContainer{
background: url("../images/news_bg_sea.png") center bottom no-repeat, linear-gradient(180deg,rgba(97, 215, 241, 1) 0%, rgba(9, 54, 167, 1) 100%);
background-size: 100%, 100%;
}
header h1{
width: 25vw;
max-width: calc(1080px*0.25);
}
#charaWrap{
background: url("../images/news_bubble_pc.png") center center no-repeat;
background-size: 100%;
margin-top: -12vw;
margin-bottom: -14vw;
}
#charaWrap img{
width: 32%;
}
#charaWrap img:nth-of-type(1){
margin-left: 16%;
}
#charaWrap img:nth-of-type(2){
margin-left: -44%;
}
#charaWrap img:nth-of-type(3){
margin-left: -16%;
}
main h2{
width: 70vw;
max-width: calc(1080px*0.7);
}
.news > article{
backdrop-filter: blur(0.4vw) brightness(55%) saturate(260%);
-webkit-backdrop-filter: blur(0.4vw) brightness(55%) saturate(260%);
padding: 1.5rem 3rem 3rem 3rem;
border-radius: 4vw;
border: solid 0.4vw rgba(255, 255, 255, 0.7);
}
.newsTitle{
height: 15vw;
max-height: calc(1080px*0.15);
background: url("../images/news_waku_anchor.png") center center no-repeat;
background-size: 17%;
}
.newsTitle p.date{
font-size: 0.85rem;
}
.newsTitle h3{
font-size: 1.3rem;
}
.news .fish{
width: 32%;
filter: drop-shadow(0.15vw 0.15vw 0.3vw #009);
}
.news .fish:nth-of-type(1){
top:-4vw;
right: -2.5vw;
}
.news .fish:nth-of-type(2){
top:-4vw;
left: -3vw;
}
.news .fish:nth-of-type(3){
bottom: -3vw;
left: -2vw;
}

@media (orientation: portrait){

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

}

}


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

header h1{
max-width: calc(1080px*0.25);
}
#charaWrap{
margin-top: calc(-1080px*0.12);
margin-bottom: calc(-1080px*0.14);
}
.news > article{
backdrop-filter: blur(4px) brightness(55%) saturate(260%);
-webkit-backdrop-filter: blur(4px) brightness(55%) saturate(260%);
border-radius: 43px;
border: solid 4px rgba(255, 255, 255, 0.7);
}
.news .fish:nth-of-type(1){
top: calc(-1080px*0.04);
right: calc(-1080px*0.025);
}
.news .fish:nth-of-type(2){
top: calc(-1080px*0.04);
right: calc(-1080px*0.03);
}
.news .fish:nth-of-type(3){
bottom: calc(-1080px*0.03);
right: calc(-1080px*0.02);
}

.news h4{
width: 50%;
}
.pict, .pictT, .yt{
border-radius: 0.5vw;
}
.pictT{
width: 70%;
}
   
}