@charset "UTF-8";

main, .scene, .sceneCover {
width: 100%;
height: 100svh;
transform-style: preserve-3d;
overflow: hidden;
perspective: 1200px;
top: 0;
left: 0;
background: #e60000;
z-index: 2;
}
.scene{
position: absolute;
}
.sceneCover{
position: absolute;
}
.sceneCover {
opacity: 0.25;
}
main{
position: relative;
display: grid;
place-items: center;
width: 100%;
}
main section {
color: #FFF;
width: 65%;
z-index: 2;
padding-bottom: 18vw;
}
main section h1{
font-size: 0;
background: url("../images/main_title.png") center center no-repeat;
background-size: 100%;
aspect-ratio: 520/540;
width: 100%;
margin-top: 3em;
}
main section p{
font-size: 0.75rem;
line-height: 1.7;
font-weight: bold;
margin-top: 3em;
}
.photo {
position: absolute;
top: 50%;
left: 50%;
object-fit: cover;
border-radius: 20px;
}
#scroll{
position: absolute;
display: block;
width: 10vw;
height: auto;
bottom: 12vw;
left: 45vw;
z-index: 2;
}
main .news{
position: absolute;
display: block;
background: #fff;
border-radius: 100vw;
width: 96vw;
padding: 0.5rem 0.5rem 0.5rem 0.7rem;
bottom: 2vw;
left: 2vw;
z-index: 2;
font-size: 0;
text-align: left;
line-height: 1;
}
main .news .newsSec1{
display: inline-block;
font-size: 0.75rem;
color: #e60000;
text-decoration: none;
line-height: 1;
font-weight: 700;
}
main .news .newsSec2{
font-size: 0.75rem;
color: #FFF;
background: #e60000;
padding: 0.2rem 0.4rem;
text-decoration: none;
line-height: 1;
border-radius: 100vw;
font-weight: 700;
position: absolute;
right:1.25vw;
top:1.15vw;
}

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

main section {
width: 35%;
max-width: calc(90dvh * 0.5);
}
main section {
padding-bottom: 3rem;
}
#scroll{
width: 3vw;
bottom: 2.5rem;
left: 48.5vw;
}
main .news{
width: 44vw;
padding: 0.3rem 0.4rem 0.4rem 0.6rem;
bottom: 1vw;
left: 28vw;
z-index: 2;
font-size: 0;
text-align: left;
}
main .news .newsSec1{
font-size: 0.6rem;
}
main .news .newsSec2{
font-size: 0.6rem;
padding: 0.12rem 0.4rem 0.18rem 0.4rem;
right:0.24rem;
top:0.2rem;
}

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