@media only screen and (min-width : 501px) {
body {
background: url("images/pc_bg.jpg") no-repeat top center;
background-size: cover;
background-attachment: fixed;
}
}
main{
background: #000;
}
.main{
position: relative;
}
.main-ttl{
position: absolute;
top: 5%;
left: 6%;
width: 87%;
}
.main-ill{
position: absolute;
width: 44%;
top: 39.7%;
left: 13%;
overflow: hidden;
}
.message{
background: #050310;
}
.message-ttl{
width: 64%;
margin: 0 auto;
}
.message-box{
width: 90%;
margin: 0 auto;
display: flex;
justify-content: space-between;
}
.message-box-av{
width: 34%;
}
.message-box-text{
width: 60%;
}
.message-box-text p{
background: #fff;
border-radius: 2.6vw;
padding: 4% 4% 4% 5%;
position: relative;
font-size: clamp(12px, 3.4vw, 17px);
font-weight: 500;
}
.message-box-text p::after{
position: absolute;
width: 10%;
height: 50%;
top: 60%;
left: -10%;
content: '';
background: url(images/arrow-left.svg) no-repeat;
background-size: 100% auto;
}
.cont-once{
background: url("images/cont-bg.jpg") no-repeat top center;
background-size: 100% auto;
position: relative;
}
.cont-once-mark{
width: 12%;
position: absolute;
left: 0;
right: 0;
margin: -6% auto 0;
}
.cont-once-q{
position: relative;
padding: 8% 4% 2%;
color: #fff;
}
.cont-once-q h2{
position: relative;
font-size: clamp(12px, 4.25vw, 21px);
font-weight: 600;
font-family: "Noto Serif JP", serif;
text-align: center;
}
.cont-once-q-box{
display: flex;
justify-content: space-between;
}
.cont-once-q-box .q-a,
.cont-once-q-box .q-b{
width: 48%;
cursor: pointer;
}
.cont-once-q-box .q-a:hover,
.cont-once-q-box .q-b:hover{
opacity: 0.7;
}
.cont-once-q-box .q-a h3,
.cont-once-q-box .q-b h3{
font-size: clamp(12px, 3.15vw, 16px);
text-align: center;
font-weight: 500;
}
.correct-box.visible,
.incorrect-box.visible{
display: block;
opacity: 1;
@starting-style {
opacity: 0;
}
}
.incorrect-box{
display: none;
opacity: 0;
transition: opacity 0.3s, display 0.2s allow-discrete;
}
.correct-box{
display: none;
opacity: 0;
transition: opacity 0.3s, display 0.2s allow-discrete;
text-align: center;
}
.yes-no-box{
position: relative;
}
.incorrect-box,
.correct-box{
position: absolute;
top: 0;
left: 0;
width: 100%;
}
.cont-once-a{
text-align: center;
display: none;
}
.clicked .cont-once-a{
display: block;
}
.w47{
width: 47%;
}
.correct-text{
font-size: clamp(12px, 4.25vw, 21px);
font-weight: 600;
font-family: "Noto Serif JP", serif;
color: #fff;
}
.correct-exp{
padding: 3% 5% 5%;
}
.correct-comment{
display: flex;
}
.correct-comment-text{
width: 75%;
background: #ffff00;
padding: 3%;
font-size: clamp(12px, 3.4vw, 17px);
text-align: left;
border-radius: 2.6vw;
position: relative;
}
.correct-comment-text::after{
position: absolute;
width: 8%;
height: 30%;
top: 80%;
right: -5%;
content: '';
background: url(images/arrow-t01.svg) no-repeat;
background-size: 100% auto;
}
.correct-comment-text a{
color: #0071bc;
text-decoration: underline;
}
.correct-comment-av{
width: 25%;
display: flex;
align-items: flex-end;
padding: 0 0 5%;
}
.correct-comment-av img{
width: 115%;
position: relative;
left: -15%;
}
.before-answer{
text-align: center;
padding: 0 0 10%;
color: #fff;
font-weight: 600;
font-size: clamp(12px, 21vw, 106px);
line-height: 0.7;
opacity: 0.5;
}
.clicked .before-answer{
display: none;
}
.ending{
position: relative;
}
.clear-ttl{
position: absolute;
width: 61%;
left: 19.5%;
top: 9%;
display: none;
}
.ending p{
position: absolute;
width: 100%;
text-align: center;
font-size: clamp(12px, 4.25vw, 21px);
font-weight: 600;
font-family: "Noto Serif JP", serif;
left: 0;
bottom: 5%;
color: #fff;
display: none;
}
.ending p.not-clear{
position: absolute;
width: 100%;
height: 40%;
text-align: center;
font-size: clamp(12px, 6.6vw, 33px);
font-family: "Noto Serif JP", serif;
font-weight: 600;
left: 0;
top: 0;
bottom: 0;
margin: auto;
color: #fff;
display: block;
line-height: 1.4;
text-shadow: 0px 0px 8px #222;
}
.ending.cl01.cl02.cl03.cl05 .clear-ttl,
.ending.cl01.cl02.cl03.cl05 p{
display: block;
}
.ending.cl01.cl02.cl03.cl05 p.not-clear{
display: none;
}
.other-comment{
padding: 10% 0 12%;
display: none;
}
.other-comment.cl01.cl02.cl03.cl04.cl05{
display: block;
}
.other-comment-ttl{
margin: 0 auto;
width: 84.5%;
}
.others-box{
margin: 0 auto;
width: 90%;
display: flex;
justify-content: space-between;
flex-wrap: wrap;
}
.others-once{
width: 48%;
}
.others-once p{
color: #fff;
font-size: clamp(12px, 3.15vw, 16px);
font-weight: 500;
}



@media only screen and (min-width : 501px) {
.message-box-text p,
.correct-comment-text{
border-radius: 18px;
}
}