@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: #fff;
}
main{
background: #fff;
color: #fff;
}
.main{
position: relative;
}
.main-ttl{
width: 82.5%;
position: absolute;
left: 8.75%;
top: 32%;
}
.main-ill{
position: absolute;
width: 103%;
bottom: 10%;
left: 1%;
}
.main-lead{
background: #000;
padding: 10% 6% 10%;
position: relative;
}
.main-lead-box{
padding: 10% 5%;
border-radius: 2.6vw;
border: 2px solid #fff;
font-weight: 700;
font-size: clamp(12px, 3.7vw, 19px);
}
.div-ex-sec{
background: url("images/div-ex-bg.jpg") repeat-y top center;
background-size: 100% auto;
padding: 15% 5%;
position: relative;
}
.div-sec-ill{
position: absolute;
width: 31%;
top: -9%;
left: 8%;
}
.div-ex-ttl{
font-weight: 700;
font-size: clamp(12px, 5.9vw, 30px);
text-align: center;
}
.div-list-ttl{
padding: 2% 4% 2% 15%;
position: relative;
font-weight: 700;
font-size: clamp(12px, 4.6vw, 23px);
background: #000;
border: 2px solid #fff;
border-radius: 2.6vw;
z-index: 10;
line-height: 1.4;
}
.div-once{
width: 90%;
margin: 0 auto;
padding: 2.5% 2% 2.5% 9%;
position: relative;
border-radius: 2vw;
z-index: 1;
line-height: 1.4;
}
.div-once.first-unit{
padding: 5% 2% 2.5% 9%;
}
.div-once::before{
position: absolute;
content: '';
width: 2px;
height: 100%;
background: #fff;
top: 0;
left: 0;
}
.div-once.last-unit::before{
height: 50%;
}
.div-once::after{
position: absolute;
content: '';
width: 30%;
height: 2px;
background: #fff;
top: 50%;
left: 0;
z-index: 0;
}
.div-once-inner{
padding: 3% 4%;
position: relative;
font-weight: 700;
font-size: clamp(12px, 3.4vw, 17px);
background: #000;
border: 2px solid #fff;
border-radius: 2.6vw;
z-index: 10;
}
.div-once h3{
font-weight: 700;
font-size: clamp(12px, 4.6vw, 22px);
}
.prof-sec{
background: #b2d369 url("images/prof-sec-bg.jpg") no-repeat top center;
background-size: 100% auto;
padding: 32% 5% 8%;
color: #000;
position: relative;
}
.prof-sec-ttl {
background: #000;
padding: 1% 2% 1%;
border-radius: 2.6vw;
border: 2px solid #fff;
font-size: clamp(12px, 5.1vw, 25px);
font-weight: 700;
text-align: center;
color: #fff;
line-height: 1.3;
position: relative;
}
.ttl-ill{
width: 25%;
position: absolute;
left: 7%;
bottom: -40%;
}
.prof-detail-box{
display: flex;
justify-content: space-between;
}
.prof-detail-img{
width: 27%;
}
.prof-detail-cont{
width: 70%;
}
.prof-detail-name{
font-weight: 700;
font-size: clamp(12px, 5.9vw, 30px);
}
.prof-detail-name span{
font-size: clamp(12px, 3.9vw, 20px);
}
.prof-detail-name p{
font-size: clamp(12px, 5.9vw, 20px);
padding: 2% 0 0;
}
.prof-hist-ttl{
font-size: clamp(12px, 4.6vw, 23px);
font-weight: 700;
}
.prof-sec p{
font-size: clamp(12px, 3.45vw, 17px);
font-weight: 700;
}
.anchor-sec{
background: #723700 url("images/anchor-sec-bg.jpg") no-repeat top center;
background-size: 100% auto;
padding: 15% 6% 8%;
}
.anchor-box{
display: flex;
justify-content: space-between;
}
.anchor-once{
width: 30%;
}
.sec01{
background: #8BC56C url("images/sec01-bg.jpg") no-repeat top center;
background-size: 100% auto;
padding: 36% 6% 26%;
position: relative;
}
.sec02{
background: #FBDFB4 url("images/sec02-bg.jpg") no-repeat top center;
background-size: 100% auto;
padding: 25% 6% 26%;
position: relative;
}
.sec03{
background: #080F3E url("images/sec03-bg.jpg") no-repeat top center;
background-size: 100% auto;
padding: 20% 6% 26%;
position: relative;
}
.quiz-sec-ill{
position: absolute;
width: 34%;
bottom: 3%;
left: 3%;
}
.quiz-cont{
background: #000;
padding: 10% 6% 17%;
border-radius: 2.6vw;
border: 2px solid #fff;
font-size: clamp(12px, 3.7vw, 18px);
font-weight: 700;
}
.quiz-cont-ttl{
font-size: clamp(12px, 4.6vw, 22px);
}
.quiz-cont p{
font-size: clamp(12px, 3.9vw, 20px);
}
.quiz-cont p.quiz-p02{
display: inline-block;
padding: 0 5% 0 0;
}
.quiz-cont p a{
color: #fff;
text-decoration: underline;
font-weight: 700;
font-size: clamp(12px, 4.2vw, 21px);
display: block;
}
.quiz-cont p a span{
font-size: clamp(12px, 8.5vw, 42px);
}
.icon-carrot{
width: 17%;
margin: 0 auto;
}
.icon-shrimp{
width: 43%;
margin: 0 auto;
}
.icon-meat{
width: 43%;
margin: 0 auto;
}
.close-area{
font-size: clamp(12px, 6.6vw, 33px);
font-weight: 700;
color: #fff;
text-align: left;
padding: 0 3%;
}
.close-area.ajust{
text-align: center;
}
.close-area:hover{
cursor: pointer;
}
.t1-correct{
background: #8BC56C url("images/sec01-bg.jpg") no-repeat top center;
background-size: 100% auto;
padding: 7% 6% 6%;
}
.t2-correct{
background: #FBDFB4 url("images/sec02-bg.jpg") no-repeat top center;
background-size: 100% auto;
padding: 7% 6% 6%;
}
.t3-correct{
background: #080F3E url("images/sec03-bg.jpg") no-repeat top center;
background-size: 100% auto;
padding: 7% 6% 6%;
}
.correct-cont{
background: #000;
padding: 1% 2%;
border-radius: 2.6vw;
border: 2px solid #fff;
font-size: clamp(12px, 5.9vw, 30px);
font-weight: 700;
text-align: center;
color: #fff;
}
.correct-cont p{
font-size: clamp(12px, 4.5vw, 22px);
text-align: center;
}
.correct-img{
width: 82%;
margin: 0 auto;
}
.correct-cont{
background: #000;
padding: 1% 2% 2%;
border-radius: 2.6vw;
border: 2px solid #fff;
font-size: clamp(12px, 5.1vw, 25px);
font-weight: 700;
text-align: center;
color: #fff;
}
.correct-cont p.ex-text{
font-size: clamp(12px, 3.9vw, 20px);
text-align: left;
padding: 5% 3%;
overflow: hidden;
}
.correct-cont p img.t01{
width: 28%;
float: left;
margin: 0 5% 4% 0;
padding: 3% 0 0;
}
.correct-cont p img.t02{
width: 28%;
float: right;
margin: 0 0 0 4%;
padding:0 0;
}
.t1-incorrect{
background: #8BC56C url("images/t1-incorrect.jpg") no-repeat top center;
background-size: 100% auto;
padding: 72% 6% 8%;
}
.t2-incorrect{
background: #8BC56C url("images/t2-incorrect.jpg") no-repeat top center;
background-size: 100% auto;
padding: 72% 6% 8%;
}
.t3-incorrect{
background: #8BC56C url("images/t3-incorrect.jpg") no-repeat top center;
background-size: 100% auto;
padding: 72% 6% 8%;
}
.incorrect-cont{
background: #000;
padding: 1% 2% 2%;
border-radius: 2.6vw;
border: 2px solid #fff;
font-size: clamp(12px, 5.1vw, 25px);
font-weight: 700;
text-align: center;
color: #fff;
}
.to-be-continued{
display: none;
}
.to-be-continued.clc1.clc2.clc3{
display: block;
}
.to-be-main{
}
.to-be-cont{
background: #ffc900;
padding: 10% 0 15%;
}
.to-be-cont-head{
width: 85%;
margin: 0 auto;
}
.to-be-text{
width: 85%;
margin: 0 auto;
font-size: clamp(12px, 4.6vw, 23px);
font-weight: 700;
color: #000;
}
.to-be-end-ill{
width: 88%;
position: relative;
left: 5%;
}



/* ==========================================================================
 Remodal's necessary styles
 ========================================================================== */

html.remodal-is-locked {
overflow: hidden;
touch-action: none;
}
.remodal,
[data-remodal-id] {
display: none;
}
.remodal-overlay {
position: fixed;
z-index: 9999;
top: -5000px;
right: -5000px;
bottom: -5000px;
left: -5000px;
display: none;
}
.remodal-wrapper {
position: fixed;
z-index: 10000;
top: 0;
right: 0;
bottom: 0;
left: 0;
display: none;
overflow: auto;
text-align: center;
-webkit-overflow-scrolling: touch;
}
.remodal-wrapper:after {
display: inline-block;
height: 100%;
content: "";
}
.remodal-overlay,
.remodal-wrapper {
backface-visibility: hidden;
}
.remodal {
position: relative;
outline: none;
text-size-adjust: 100%;
padding: 0 0 4%;
}
.remodal-is-initialized {
/* Disable Anti-FOUC */
display: inline-block;
}
.remodal-bg.remodal-is-opening,
.remodal-bg.remodal-is-opened {
filter: blur(30px);
}
.remodal-overlay {
background: rgba(0, 0, 0, 0.9);
}
.remodal-overlay.remodal-is-opening,
.remodal-overlay.remodal-is-closing {
animation-duration: 0.2s;
animation-fill-mode: forwards;
}
.remodal-overlay.remodal-is-opening {
animation-name: remodal-overlay-opening-keyframes;
}
.remodal-overlay.remodal-is-closing {
animation-name: remodal-overlay-closing-keyframes;
}
.remodal {
width: 100%;
transform: translate3d(0, 0, 0);
}
.remodal.remodal-is-opening,
.remodal.remodal-is-closing {
animation-duration: 0.4s;
animation-fill-mode: forwards;
}
.remodal.remodal-is-opening {
animation-name: remodal-opening-keyframes;
}
.remodal.remodal-is-closing {
animation-name: remodal-closing-keyframes;
}
.remodal,
.remodal-wrapper:after {
vertical-align: middle;
}
@keyframes remodal-opening-keyframes {
from {
transform: scale(.09);
opacity: 0;
}
to {
transform: none;
opacity: 1;
filter: blur(0);
}
}
@keyframes remodal-closing-keyframes {
from {
transform: scale(1);
opacity: 1;
}
to {
transform: scale(0.95);
opacity: 0;
filter: blur(0);
}
}
@keyframes remodal-overlay-opening-keyframes {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
@keyframes remodal-overlay-closing-keyframes {
from {
opacity: 1;
}
to {
opacity: 0;
}
}
@media only screen and (min-width: 501px) {
.remodal {
max-width: 500px;
}
}



@media only screen and (min-width : 501px) {
.div-list-ttl{
border-radius: 16px;
}
.div-once{
border-radius: 14px;
}
.div-once-inner{
border-radius: 16px;
}
.main-lead-box,
.prof-sec-ttl,
.quiz-cont,
.correct-cont,
.correct-cont,
.incorrect-cont{
border-radius: 18px;
}
}