@media only screen and (min-width : 501px) {
body {
background:#ffad01 url("images/pc_bg.jpg") repeat-y top center;
background-size: contain;
background-attachment: fixed;
}
}
main{
background: #fff;
}
.main{
position: relative;
}
.main-ttl{
position: absolute;
width: 90%;
bottom: 38%;
left: 5%;
}
.main-ill{
position: absolute;
width: 44.5%;
bottom: 10%;
right: 11.5%;
}
.main-copy-box{
background: #fcfbcf;
padding: 8% 7%;
}
.main-ph-box{
padding: 6% 7%;
display: flex;
justify-content: space-between;
}
.main-ph{
width: 46%;
}
.anchor-sec{
padding: 7% 5%;
background: #8cebdd;
}
.anchor-sec-ttl{
width: 20%;
margin: 0 auto;
}
.anchor-once{
}
.profile-sec{
background: #fcfbcf;
padding: 6% 5%;
}
.profile-box{
background: #fff;
padding: 6% 5%;
border: 3px solid #00d2b4;
border-radius: 3vw;
}
.profile-2col-box{
display: flex;
}
.profile-ph-box{
width: 44%;
}
.profile-name-box{
width: 56%;
padding: 0 0 0 5%;
}
.profile-box-ttl{
width: 48%;
font-weight: 700;
font-size: clamp(12px, 5.45vw, 26px);
color: #00d2b4;
margin: 0 auto;
border: 2px solid #00d2b4;
text-align: center;
}
.profile-history-ttl{
font-weight: 700;
font-size: clamp(12px, 4.1vw, 20px);
}
.profile-box p{
border-bottom: 1px solid #00d2b4;
font-size: clamp(12px, 3.3vw, 17px);
line-height: 2.3;
}
.profile-box p span{
width: 37%;
display: inline-block;
}
.profile-box p.last-line{
border-bottom: none;
}
.sec01 {
background: url("images/sec01_bg.jpg") no-repeat top center;
padding: 15% 5% 10%;
}
.sec01-cont {
}
.sec01-cont-head,
.sec02-cont-head{
background: #fcfbcf;
padding: 7% 5%;
}
.sec01-cont-head-ttl{
width: 58%;
margin: 0 auto;
}
.sec01-cont-head p,
.sec02-cont-head p{
font-size: clamp(12px, 4vw, 20px);
font-weight: 500;
line-height: 1.6;
}
.schedule01{
background: #8cebdd;
padding: 10% 4% 5%;
position: relative;
}
.schedule01-ttl{
width: 28.4%;
}
.schedule02-ttl{
width: 40%;
}
.schedule02{
background: #92d2e6;
padding: 10% 4% 5%;
position: relative;
}
.cont-ill01{
position: absolute;
right: 6%;
top: -3%;
width:35%;
}
.cont-ill02{
position: absolute;
right: 4%;
bottom: 24%;
width: 26%;
}
.cont-ill03{
position: absolute;
right: 13%;
bottom: 5%;
width: 23%;
}
.cont-ill04{
position: absolute;
right: 6%;
bottom: 35%;
width: 31%;
}
.cont-ill05{
position: absolute;
right: 11%;
bottom: 1%;
width: 24%;
}
.schedule-box{
display: flex;
flex-wrap: wrap;
}
.schedule-box .time{
width: 21.5%;
}
.schedule-box .act{
width: 78.5%;
padding: 0 0 2% 3%;
display: flex;
align-items: center;
font-size: clamp(12px, 4vw, 20px);
font-weight: 700;
line-height: 1.4;
}
.schedule-box .act span{
font-size: clamp(12px, 4.7vw, 24px);
}
.sec02 {
background: url("images/sec02_bg.jpg") no-repeat top center;
padding: 15% 5% 10%;
}
.sec02-cont {
background: #ffd2dc;
overflow: hidden;
}
.sec02-cont-head-ttl{
width: 58%;
margin: 0 auto;
}
.sec02-talk-cont{
background: #ffd2dc;
padding: 10% 5% 0;
position: relative;
}
.sec02-talk-cont-ill{
position: absolute;
width: 29%;
top: -2%;
right: 12%;
}
.sec02-talk-box{
display: flex;
justify-content: space-between;
flex-wrap: wrap;
}
.sec02-talk-av{
width: 26%;
}
.sec02-talk-text{
width: 67%;
display: flex;
align-items: center;
}
.sec02-talk-text p{
padding: 5% 5.5% 5% 5.5%;
background: #fff;
border-radius: 2.6vw;
font-size: clamp(12px, 3.7vw, 18px);
font-weight: 500;
line-height: 1.5;
position: relative;
}
.q-text p::after{
position: absolute;
content: '';
width: 9%;
height: 50%;
top: 30%;
left: -9%;
background: url("images/arrow-left.svg") no-repeat top center;
background-size: 100% auto;
}
.sec02-talk-text.q-text p{
font-size: clamp(12px, 3.85vw, 20px);
color: #ff6e8d;
font-weight: 700;
}
.sec02-talk-text p::after{
position: absolute;
content: '';
width: 9%;
height: 50%;
top: 15%;
right: -9%;
background: url("images/arrow-right.svg") no-repeat top center;
background-size: 100% auto;
}
.sec02-talk-text.q-text p::after{
position: absolute;
content: '';
width: 9%;
height: 50%;
top: 30%;
left: -9%;
background: url("images/arrow-left.svg") no-repeat top center;
background-size: 100% auto;
}
.sec02-talk-ttl01,
.sec02-talk-ttl02,
.sec02-talk-ttl03{
width: 14%;
}
.sec02-talk-ttl04{
width: 54%;
}
.sec02-end-ill{
width: 38%;
margin: 0 auto;
}
.sec03{
padding: 0 5%;
}
.sec03-ex{
background: #FCFBCF;
padding: 8% 5%;
}
.sec03-ex-ttl{
width: 29%;
margin: 0 auto;
}
.sec03-ex p{
font-size: clamp(12px, 3.85vw, 20px);
font-weight: 500;
}
.quiz-block{
background: #00D2B4;
padding: 8% 5%;
border-top: 2px solid #fff;
}
.quiz01-ttl,
.quiz02-ttl{
width: 25%;
margin: 0 auto;
}
.quiz-q{
}
.quiz-btn-box{
display: flex;
justify-content: space-between;
padding: 0 2%;
}
.quiz-btn-once{
width: 46%;
}
.quiz-btn-once:hover{
width: 50%;
opacity: 0.7!important;
cursor: pointer;
transition:opacity 0s 0s!important;
}
.quiz-btn-once.selected{
width: 50%;
}
.quiz01-correct,
.quiz02-correct,
.quiz01-incorrect,
.quiz02-incorrect{
display: none;
}
.quiz01-correct.selected,
.quiz02-correct.selected,
.quiz01-incorrect.selected,
.quiz02-incorrect.selected{
display: block;
opacity: 1;
transition:opacity 1.4s 0s;
animation: fadein 500ms 1;
}
@keyframes fadein {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
.ending-sec {
background: url("images/ending_bg.jpg") no-repeat top center;
background-size: 100% auto;
padding: 10% 5% 10%;
}
.ending-msg-ttl {
width: 96%;
margin: 0 auto;
}
.ending-ill {
width: 26%;
margin: 0 auto;
position: relative;
left: -2%;
}



@media only screen and (min-width : 501px) {
.profile-box{
border-radius: 26px;
}
.sec02-talk-text p{
border-radius: 18px;
}
}