@media only screen and (min-width : 501px) {
body {
background: #BA1012;
}
}
main{
background: #fff;
}
.main{
position: relative;
}
.main-ttl{
width: 92%;
position: absolute;
top: 4%;
left: 4%;
}
.main-img{
width: 64%;
position: absolute;
bottom: -4%;
left: 18%;
z-index: 10;
}
.prof-sec{
position: relative;
}
.prof-wrap{
position: absolute;
width: 78%;
top: 17%;
left: 11%;
}
.prof-detail{
display: flex;
justify-content: space-between;
flex-wrap: wrap;
font-size: clamp(12px, 3.15vw, 16px);
font-weight: 700;
}
.prof-img{
width: 36%;
}
.prof-name-box{
width: 58%;
font-weight: 700;
line-height: 1.4;
padding: 3% 0 0;
}
.prof-name-ttl{
font-size: clamp(12px, 5.1vw, 25px);
}
.prof-name{
font-size: clamp(12px, 7.5vw, 37px);
color: #FA1012;
}
.prof-name-sub{
font-size: clamp(12px, 3.45vw, 17px);
color: #FA1012;
}
.prof-hist-wrap{
padding: 0 2%;
}
.prof-hist{
display: flex;
justify-content: space-between;
flex-wrap: wrap;
padding: 1.4% 0;
border-bottom: 1px solid #000;
font-size: clamp(12px, 3.15vw, 16px);
font-weight: 700;
line-height: 1.5;
}
.prof-hist.last-unit{
border-bottom: none;
}
.prof-hist-left{
width: 16%;
}
.prof-hist-left.add-red{
color: #FA1012;
}
.prof-hist-right{
width: 83%;
}
.contents{
background: url("images/bg.jpg") repeat-y top center;
background-size: 100% auto;
padding: 0 5% 15%;
}
.anchor-sec{
display: flex;
justify-content: space-between;
padding: 10% 0 7%;
}
.anchor-once{
width: 32%;
}
.work-sec{
}
.sec-ttl{
position: relative;
width: 101%;
left: -1%;
padding: 3% 0 0;
}
.cont-box{
background: #fff;
padding: 2% 0;
border: 2px solid #000;
}
.cont-w-img{
width: 96%;
margin: 0 auto;
}
.cont-n-img{
width: 84%;
margin: 0 auto;
}
.cont-m-img{
width: 90%;
margin: 0 auto;
}
.cont-ctext{
text-align: center;
font-weight: 500;
font-size: clamp(12px, 3.7vw, 18px);
}
.sec-end-ttl{
font-weight: 700;
font-size: clamp(12px, 5.3vw, 26px);
padding: 0 5%;
}
.quiz-sec{
background: #FFFCE0;
padding: 8% 6%;
}
.quiz-sec .cont-box{
padding: 5% 0 7%;
}
.quiz-num{
text-align: center;
font-weight: 700;
color: #FA1012;
font-size: clamp(12px, 4.3vw, 21px);
}
.quiz-ttl{
text-align: center;
font-weight: 700;
font-size: clamp(12px, 4.7vw, 23px);
line-height: 1.4;
}
.a-box01{
width: 60%;
margin: 0 auto;
display: flex;
justify-content: space-between;
}
.a-box01-btn{
width: 43%;
}
.a-box02,
.a-box03{
width: 90%;
margin: 0 auto;
}
.a-box02-btn{
}
.ex-box{
width: 90%;
background: #FFE500;
margin: 0 auto;
padding: 5% 5% 7%;
border-radius: 3vw;
display: none;
}
.ex-box-b{
width: 90%;
background: #B0B0B0;
margin: 0 auto;
padding: 5% 5%;
border-radius: 3vw;
display: none;
}
.ex-box-ttl{
text-align: center;
font-weight: 700;
font-size: clamp(12px, 4.7vw, 23px);
}
.correct-p1{
text-align: center;
font-size: clamp(12px, 17.5vw, 89px);
line-height: 1.1;
}
.correct-p2{
text-align: center;
font-size: clamp(12px, 7.1vw, 30px);
line-height: 1.1;
font-weight: 700;
}
.ex-ttl{
font-weight: 700;
font-size: clamp(12px, 4.3vw, 21px);
}
.ex-box p{
font-size: clamp(12px, 3.4vw, 17px);
font-weight: 500;
}
.q01-correct,
.q01-incorrect,
.q02-correct,
.q03-correct{
opacity: 0;
display: none;
}
.q01-correct.selected,
.q01-incorrect.selected,
.q02-correct.selected,
.q03-correct.selected{
display: block;
opacity: 1;
transition:opacity 1.4s 0s;
animation: fadein 500ms 1;
}
@keyframes fadein {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
.talk-box{
display: flex;
justify-content: space-between;
flex-wrap: wrap;
padding: 8% 4% 10%;
position: relative;
}
.talk-box-av{
width: 20%;
}
.talk-box-text{
position: relative;
width: 79%;
display: flex;
align-items: center;
}
.talk-box-text p{
font-size: clamp(12px, 3.45vw, 17px);
font-weight: 500;
position: absolute;
width: 100%;
left: 0;
top: 0;
bottom: 0;
margin: auto 0;
padding: 0 12% 2.5% 5%;
line-height: 1.36;
display: flex;
align-items: center;
}
.talk01 .talk-box-text.q-box p{
font-size: clamp(12px, 3.7vw, 18px);
color: #00AEEF;
font-weight: 700;
padding: 0 5% 2.5% 12%;
line-height: 1.38;
}
.talk02 .talk-box-text.q-box p{
font-size: clamp(12px, 3.7vw, 18px);
color: #FF6E8D;
font-weight: 700;
padding: 0 5% 2.5% 12%;
line-height: 1.38;
}



@media only screen and (min-width : 501px) {
.ex-box,
.ex-box-b{
border-radius: 26px;
}
}