/*color*/
:root {
    --brown: #575937;
    --darkgreen: #2B8698;
    --green:#5FB229;
    --yellow: #F6D741;
    --lightyellow: #FFF8D5;
    --blue: #1E68A2;
    --darkblue: #1E4F79;
    --lightblue: #CCEFFF;
    --lightgreen: #C1F8AD;
    --red:  #E4604C;
    --gray: #BCD4DF;
     }
 
/* 共通パーツ
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.inline-modal .container {
    padding: 30% 35px 50px !important;
}

/*ポップアップ内カテゴリー*/
.cat-mech {
    background:linear-gradient(transparent 70%, #8de0a7 70%);
}
.cat-mob {
    background:linear-gradient(transparent 70%, #ffc5a0 70%);
}
.cat-ene {
    background:linear-gradient(transparent 70%, #64c0ab 70%);
}
.cat-bio {
    background:linear-gradient(transparent 70%, #8ad4e9 70%);
}
.cat {
    border: #fff 1.5px solid;
    letter-spacing: 0.03rem;
}


/*クイズ*/
.mech .quiz-area .modal .close_modal {
    background: #3CA02D;
}
.mech .quiz-area .question .wrapper .question__text {
    color: #3CA02D;
    border-bottom: dashed 3px var(--lightgreen);
}
.mech .quiz-area .question .wrapper .question__item {
    background-color: #e5f8d9;
    color: var(--brown);
}
.mech .quiz-area .question .wrapper .answer__explanation {
    color: var(--brown);
}
.mech .quiz-area .question .wrapper #js-nextQuestion {
    border: solid 2px var(--brown);
    color: var(--brown);
}

.mech .quiz-area .answer_result_text {
    color: var(--brown);
}

.mech .quiz-area .modal .pr_box .detail-box a {
    color: #3CA02D;
}

@media (max-width: 575px) {
    .mech .quiz-area .modal .close_modal {
        top: 190px;
    }
.mech  .quiz-area .modal .quiz_box {
        padding: 200px 0px 0px;
    }
.mech .quiz-area .modal {
    min-height: 1300px;
}
}

/* top
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.mech #top {
    background-color: var(--darkgreen);
}
.mech #top .cloud-wrap .cloud01 {
    width: 12%;
}
.mech #top .cloud-wrap .cloud02 {
    width: 17%;
}
.mech #top .cloud-wrap .cloud03 {
    width: 17%;
}


/* sec01
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.mech #sec01 {
    background-color: var(--green);
    position: relative;
}

.mech .sec01 .box {
    background-color: #fff;
    border-radius: 12px;
    box-shadow: 10px 10px #648f3a;
    padding: 25px 25px 18px;
    position: relative;
    margin: 10px;
    text-align: center;
}

.mech .sec01 .box p {
    color: var(--brown);
}

.mech .sec01 .box .profile {
    border-right: dashed 3px var(--lightgreen);
    border-radius: 3px;
}

.mech #sec01 .cloud-wrap .cloud02 {
    bottom: -5%;
    position: absolute;
    z-index: 1;
    width: 15%;
}

.mech #sec01 .cloud-wrap .cloud03 {
    bottom: 0;
    right: 5%;
    position: absolute;
    width: 15%;
}


/* sec02
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.mech .sec02 #item01 {
    top: 70%;
    right: 0;
    width: 18%;
}

.mech .sec02 #item02 {
    top: 5%;
    left: 0;
}

.mech .sec02 #item03 {
    top: inherit;
    left: 0;
    bottom: 18%;
}

/* sec03
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.mech .sec03 #item04 {
     width: 21%;
     right: 3%;
 }

.mech .sec03 #item05 {
    top: inherit;
    bottom: 7%;
    left: inherit;
     right: 3%;
     width: 22%;
 }

.mech .sec03 #item06 {
   bottom: 11%;
    left: 4%;
    width: 22%;
}

/* sec04
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.mech #scene3 .cloud01  {
    width: 15%;
}

.mech .sec04 #item07 {
    top: inherit;
    left: 3%;
    bottom: 17%;
    width: 20%;
}

.mech .sec04 #item08 {
    top: 18%;
    left: 5%;
    width: 20%;
}

.mech .sec04 #item09 {
    right:3%;
    bottom: 33%;
    width: 21%;
}

/* sec05
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.mech .sec05 {
    position: relative;
}
.mech  .sec05 .cloud-wrap .cloud01 {
    position: absolute;
    top: -8%;
    width: 15%;
}
.mech  .sec05 .cloud-wrap .cloud02 {
    position: absolute;
    bottom: -8%;
    right: 0;
    width: 18%;
    z-index: 1;
}


/* お仕事図鑑
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.mech .top-career .slick-dots .slick-active button::before {
    color: var(--green) !important;
}
.mech  .top-career .btn {
    background-color: var(--green) ;
    box-shadow: 6px 6px #648f3a;
}
.mech .top-career .btn:after {
    content: url(../img/pop_contents_btn.png);
    display: inline-block;
    vertical-align: middle;
    transform: scale(0.55);
    position: absolute;
    top: -2px;
    right: 7px;
}
.mech .sec01 {
    padding: 60px 0px 160px !important;
}
.mech .sec02 .sec02-teacher {
    top: -10% !important;
}

/* モーダル
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.inline-modal .tit-wrap {
    background-color: var(--green) !important;
}
.inline-modal .tit-wrap img {
    display: block;
}
.inline-modal h4 {
    color: #3CA02D !important;
}
.inline-modal p {
    color: var(--brown) !important;
}
.inline-modal .speech-balloon {
    background-color: var(--lightgreen) !important;
}
.inline-modal .speech-balloon-left:after {
    border-left: 20px solid  var(--lightgreen) !important;
}
.inline-modal .speech-balloon-right {
    margin-top: 15px;
}
.inline-modal .speech-balloon-right:after {
    border-right: 20px solid  var(--lightgreen) !important;
}
.inline-modal .btn {
    background-color: var(--green) !important;
}
.inline-modal .btn:after {
    content: url(../img/pop_btn_arrow.png);
}
.inline-modal .btn-close {
    border: solid 2px var(--green) !important;
    color:  var(--green) !important;
}

.inline-modal .teacher {
    margin-left: 12px;
}

.inline-modal a:hover {
    text-decoration: none;
}

/* footer
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.mech  footer .footer-top {
    background-color: var(--darkgreen);
}

.mech footer .cloud-wrap .cloud01 {
    width: 10%;
    left: 1%;
}

.mech footer .cloud-wrap .cloud02 {
    width: 15%;
    right: 1%;
}

.mech footer .footer-top .btn:after {
    content: url(../img/pop_contents_btn_green.png) ;
}

.mech  footer .footer-top .btn {
    box-shadow: 6px 6px #648f3a;
    color: #3CA02D;
}

/* お仕事図鑑ページ
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.mech-career .top .cloud-wrap .cloud02 {
    width: 15% !important;
    right: 5% !important; 
}
.mech-career .top  .cloud-wrap .cloud03 {
    width: 12% !important;
    bottom: 60%;
}
/*sec01*/
.mech-career .sec01-top {
    background-color: var(--green) !important;
}
.mech-career  .top-btm {
    background: linear-gradient(120deg, rgb(231, 255, 144) 30%, rgb(98, 223, 148) 100%) !important;
}
/*sec02*/
.mech-career  .sec02 {
    background: linear-gradient(120deg, rgb(194, 255, 144) 0%, rgb(98, 223, 148) 100%) !important;
}
.mech-career .inline-modal p {
    color: var(--brown) !important;
}
.career-inline-modal ul{
    color: var(--brown) !important;
}


@media (max-width: 1024px) {
    /* top
–––––––––––––––––––––––––––––––––––––––––––––––––– */
    .mech #top .cloud-wrap .cloud01 {
        width: 20%;
    }
    .mech #top .cloud-wrap .cloud02 {
        bottom: 40%;
        width: 20%;
    }
    .mech #top .cloud-wrap .cloud03 {
        width: 20%;
    }
        /* sec01
–––––––––––––––––––––––––––––––––––––––––––––––––– */
    .mech #sec01 .cloud-wrap .cloud03 {
        bottom: 5%;
        width: 20%;
    }
    .mech #sec01 .cloud-wrap .cloud02 {
        bottom: -10%;
        width: 20%;
    }
    
/* sec02
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.mech .sec02 #item01 {
    top: 60%;
    width: 40%;
}
.mech .sec02 #item03 {
    top: 45%;
}
/* sec03
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.mech .sec03 #item04 {
    top: 4%;
    width: 43%;
}
.mech .sec03 #item05 {
    bottom: 7%;
    left: 0;
    width: 43%;
}

.mech .sec03 .fix #item06 {
    bottom: 33%;
}
.mech .sec03 #item06 {
    bottom: 15%;
    width: 43%;
}
.mech .sec03 .arrow {
    margin-top: -100px;
}
    /* sec04
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.mech .sec04 .bg {
    bottom: 0px;
}
.mech .sec04 #item07 {
    bottom: 55%;
    width: 40%;
}
.mech .sec04 #item08 {
    top: 12%;
    width: 40%;
}
.mech .sec04 #item09 {
    bottom: 28%;
    width: 40%;
}
.mech #scene3 .cloud01 {
    width: 20%;
    z-index: 1;
}
    /* sec05
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.mech .sec05  {
    padding: 60px 0 30px;
}
.mech .sec05 .cloud-wrap .cloud01 {
    top: -5%;
    width: 20%;
}


    /* footer
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.mech footer .cloud-wrap .cloud01 {
    width: 20%;
}
.mech footer .cloud-wrap .cloud02 {
    bottom: 30%;
    width: 20%;
}
}


@media (max-width: 575px) {
    .mech #scene1, .mech #scene2, .mech #scene3 {
     padding-top: 0px;
    }
        /* top
–––––––––––––––––––––––––––––––––––––––––––––––––– */
    .mech #top .cloud-wrap .cloud01 {
        left: 0;
        width: 23%;
    }
    .mech #top .cloud-wrap .cloud02 {
        bottom: 45%;
        width: 25%;
    }
    .mech #top .cloud-wrap .cloud03 {
        bottom: -8%;
        width: 25%;
        z-index: 1;
    }
    /* sec01
–––––––––––––––––––––––––––––––––––––––––––––––––– */
    .mech .sec01 .box .profile {
        border-right: dashed 0px var(--lightgreen) !important;
        border-bottom: dashed 3px var(--lightgreen) !important;
        margin-bottom: 15px;
    }
    .mech #sec01 .cloud-wrap .cloud02 {
        bottom: -13%;
        width: 30%;
    }
    .mech #sec01 .cloud-wrap .cloud03 {
        bottom: 5%;
        right: 0;
        width: 30%;
    }
    .mech #sec01 {
        padding-bottom: 100px;
    }
    /* sec02
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.mech .sec02 #item01 {
    top: 61%;
    left: 10%;
    width: 56%;
}
.mech .sec02 #item03 {
    top: 43%;
    left: 2%;
    width: 56%;
}
    /* sec03
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.mech .sec03 #item04 {
    top: 0%;
    width: 58%;
    right: 2%;
}
.mech .sec03 #item05 {
    width: 58%;
}
#speech-balloon-inline5:after {
    margin-top: 45px !important;
}
.mech .sec03 #item06 {
    bottom: 15%;
    left: 3%;
    width: 58%;
}
.mech #scene3 .cloud01 {
    top: 3%;
    width: 35%;
}
    /* sec04
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.mech .sec04 #item07 {
    left: 3%;
    bottom: 55%;
    width: 53%;
}
.mech .sec04 #item08 {
    top: 15%;
    left: 2%;
    width: 53%;
}
.mech .sec04 #item09 {
    bottom: 25%;
    width: 56%;
}
    /* ポップアップ内調整
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.inline-modal .tit-wrap {
    padding: 20px 10px !important;
}
.inline-modal .container {
    padding: 52% 15px 30px !important;
}
.inline-modal .teacher {
    margin-left: 0px;
}
#inline5 .inline-modal .speech-balloon-sp:after {
    margin-top: 70px !important;
}
.inline-modal .speech-balloon-left {
    margin-bottom: 20px;
}
.inline-modal .speech-balloon-sp:after {
    margin-top: 35px !important;
}

    /* sec05
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.mech  .sec05 {
    padding: 40px 0 30px;
}
.mech .sec05 .cloud-wrap .cloud01 {
    width: 30%;
}
.mech .sec05 .cloud-wrap .cloud02 {
    width: 30%;
}

    /* お仕事図鑑
–––––––––––––––––––––––––––––––––––––––––––––––––– */
#career .sec01 {
    padding: 100px 20px 120px 15px !important; 
}
    /* footer
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.mech footer .cloud-wrap .cloud01 {
    width: 20%;
    left: 1%;
}
.mech footer .cloud-wrap .cloud02 {
    bottom: 40%;
    width: 20%;
}
}