@charset "utf-8"; span.point {
    color: #E5134A;
}

@media screen and (max-width: 767px) {
    #mainAreaCont .breadcrumb {
        z-index: 30;
    }

    .lesson.driver #contents {
        padding: 0;
    }

    #contents .inner {
        width: 94%;
        padding: 1% 3%;
    }

    .lesson.driver .breadcrumb {
        z-index: 10;
    }

    .lesson.driver #mainAreaCont .logo {
        left: -56px;
        position: absolute;
        top: 10px;
        z-index: 20;
    }

    .lesson.driver #mainAreaCont .mainMv {
        margin: 0 auto;
        position: relative;
        width: 100%;
    }

    .lesson.driver #mainAreaCont .mainIn {
        left: 40px;
        margin: 0 auto;
        width: 100%;
        top: 0;
    }

    .lesson.driver #mainAreaCont .mainIn .ttl {
        left: auto;
        padding: 80px 10px 0 100px;
        position: relative;
        top: auto;
    }

    .lesson.driver #mainAreaCont {
        background: #e3d8e0 none repeat scroll 0 0;
        height: 200px;
        position: relative;
        overflow: hidden;
    }

    .lesson.driver #mainAreaCont .cover {
        background: url("/kiso/files/img/common/bg_main_bottom.png") repeat-x scroll center bottom, rgba(0, 0, 0, 0) url("/kiso/files/img/lesson/bg_main_op.png") repeat scroll 0 0;
        background-size: 25px auto, 6px 6px;
        height: 200px;
        left: 0;
        position: absolute;
        top: 0;
        width: 100%;
    }

    .lesson.driver #mainAreaCont .mainMv .mv {
        display: none;
    }

    .lesson.driver #mainAreaCont .mainMv .mvsp {
        background: url("/kiso/files/img/lesson/adjustable_wrench/L09_TOP.gif") no-repeat center 20px;
        height: 200px;
        width: 100%;
    }

    .driver .ktImg,.driver .ktText01 {
        display: none;
    }

    .driver .ktImg {
        width: 100px;
        display: inline-block;
        vertical-align: middle;
        position: relative;
    }

    .driver .ktText01, .driver [class^="lectureText0"] {
        display: inline-block;
        vertical-align: middle;
        width: calc(100% - 131px);
        padding: 1em;
        position: relative;
    }

    .driver [class^="lectureText0"] {
        background: #fff;
        border: #666 2px solid;
        border-radius: 12px;
        box-sizing: border-box;
        position: relative;
    }

    .driver [class^="lectureText0"]:before {
        content: '';
        display: block;
        width: 15px;
        height: 15px;
        border-top: #666 2px solid;
        border-left: #666 2px solid;
        background: #fff;
        position: absolute;
        top: 50%;
        margin-top: -8px;
        left: -10px;
        transform: rotate(-45deg);
    }

    .driver .lectureText01,
    .driver .lectureText03,
    .driver .lectureText04 {
        left: 19px;
        width: calc(100% - 125px);
    }

    .driver .ktLecture02 .ktImg {
        left: 19px;
    }

    .driver .lectureText02:before {
        left: calc(100% + -7px);
        transform: rotate(135deg);
    }

    .driver [class^="lectureText0"] p {
        font-size: 93%;
    }

    .driver .pickupArea {
        background: #4EB09C;
    }

    .driver .qaBox {
        background: none;
        padding: 40px 0 10px;
    }

    .driver .qaBox .qaImg {
        text-align: center;
        padding: 10px 0 20px;
    }

    .driver .qaBox h2.qaTtl {
        background: url("/kiso/files/img/lesson/adjustable_wrench/bg_monkey_qattl01.png") no-repeat left top;
        background-size: 60px 60px;
        color: #FFF;
        margin-bottom: 20px;
        min-height: 75px;
        padding: 2px 0 0 70px;
        font-size: 170%;
        font-weight: bold;
    }

    .driver .qaBox p {
        color: #FFF;
        font-size: 124%;
        margin: 0;
        padding: 0 2%;
        width: 96%;
    }

    .driver .qaBox .qaBtn {
        margin: 0 auto;
        max-width: 590px;
        width: 100%;
    }



    .driver .qaBox .qaBtn a {
        display: inline-block;
        margin: 1%;
        max-width: 280px;
        width: 48%;
        padding: 0;
        float: left;
    }


    .driver .qaBox .tipsBox {
        background: #FFF;
        border: 5px solid #FAB4C5;
        border-radius: 5px;
        margin: 15px auto 30px;
        padding: 5%;
    }

    .driver .qaBox .tipsBox .tips {
        color: #333333;
    }
    .driver .qaBox .tipsBox .tips .tipsLabel {
        background: url("/kiso/files/img/lesson/adjustable_wrench/bg_monkey_tipslabel_icon.gif") no-repeat left 3px;
        color: #E6154A;
        font-size: 154%;
        font-weight: bold;
        padding-left: 30px;
        margin-bottom: 10px;
    }

    .driver .qaBox .tipsBox .tips h3 {
        font-size: 154%;
        font-weight: bold;
        margin-bottom: 15px;
    }

    .driver .qaBox .tipsBox .tips p {
        font-size: 108%;
        color: #333;
        margin-bottom: 20px;
        width: 100%;
        margin: 0;
    }
    .driver .qaBox .tipsBox .tips p.img01 {
        text-align: center;
        margin: 35px auto;
    }


   .driver .qaBox .tipsBox {
        background: #FFF;
        border: 5px solid #FAB4C5;
        border-radius: 5px;
        margin: 15px auto 30px;
        padding: 5%;
    }


    .level_m .tipsBox {
        background: #FFF;
        border: 5px solid #FAB4C5;
        border-radius: 5px;
        margin: 15px auto 30px;
        padding: 5%;
    }
    .level_m .tipsBox .tips {
        color: #333333;
    }
    .level_m .tipsBox .tips .tipsLabel {
        background: url("/kiso/files/img/lesson/adjustable_wrench/bg_monkey_tipslabel_icon.gif") no-repeat left 3px;
        color: #E6154A;
        font-size: 154%;
        font-weight: bold;
        padding-left: 30px;
        margin-bottom: 10px;
       
    }

    .level_m .tipsBox .tips h3 {
        font-size: 154%;
        font-weight: bold;
        margin-bottom: 15px;
    }

    .level_m .tipsBox .tips p {
        font-size: 108%;
        color: #333;
        margin-bottom: 20px;
        width: 100%;
        margin: 0;
    }
    .level_m .tipsBox .tips p.img01 {
        text-align: center;
        margin: 35px auto;
    }




    .driver .useBox {
        padding: 35px 0 30px;
    }

    .driver .useBox h2.useTtl {
        background: url("/kiso/files/img/lesson/adjustable_wrench/bg_monkey_usettl01.png") no-repeat left top;
        background-size: 60px 60px;
        margin-bottom: 0px;
        min-height: 75px;
        padding: 10px 0 0 70px;
        font-size: 170%;
        font-weight: bold;
    }

    .driver .useBox .ktImg {
    }

    .driver .useBox .ktLecture01 {
    }

    .driver .useBox .ktLecture01 .lectureText01 {
    }
    .driver .useBox .ktLecture01 .ktImg {
        text-align: center;
        margin: 0 -10px 0 0;
    }

    .driver .useContents {
        padding: 0;
    }




    .driver h3.subTtl {
        background: url("/kiso/files/img/lesson/adjustable_wrench/bg_subttl_icon.png") no-repeat left center;
        background-size: 12px;
        font-size: 154%;
        font-weight: bold;
        padding: 3px 0 0 15px;
        margin-bottom: 20px;
    }
    .driver h3.subTtl02 {
        background: url("/kiso/files/img/lesson/adjustable_wrench/bg_subttl_icon02.png") no-repeat left 10px;
        background-size: 12px;
        font-size: 154%;
        font-weight: bold;
        padding: 3px 0 0 19px;
        margin-bottom: 20px;
        color: #fff;
    }
    .driver h3.subTtl02 img {
        margin: 10px 0 0;
    }
    .driver .useContents .useMovie {
        float: none;
        width: 100%;
        margin: 0 auto;
        max-width: 445px;
    }

    .driver .useContents .useMovie iframe {
        width: 100%;
    }

    .driver .useContents .useLecture {
        float: none;
        width: 100%;
    }

    .driver .useContents .useLecture p {
        font-size: 108%;
        margin-bottom: 20px;
        line-height: 180%;
        padding-top: 10px;
    }
    .driver .useContents .useLecture .img01 {
        text-align: right;
        margin: -18px 0 0;
    }
    .driver .useContents .useLecture .img01 img {
        width: 170px;
    }

    .driver .useImage {
        margin-bottom: 35px;
    }

    .driver .useImage h4 {
        font-size: 124%;
        margin-bottom: 5px;
    }

    .driver .useImage .useImages {
        margin-bottom: 20px;
    }

    .driver .noteArea {
        padding: 25px 0;
    }

    .driver .noteArea .noteList {
        background: url("/kiso/files/img/lesson/adjustable_wrench/bg_noteicon_sp.png") no-repeat left top;
        background-size: 22px;
        width: 100%;
        padding-top: 30px;
        float: none;
    }

    .driver .noteArea .noteList li {
        font-size: 108%;
        list-style-type: disc;
        margin-left: 20px;
        width: auto;
    }

    .driver .noteArea .noteImg {
        float: none;
        margin-left: 0;
        padding-top: 15px;
        text-align: center;
    }

    .driver .useContents .ktLecture02 {
        padding-bottom: 20px;
    }

    .driver .useContents .ktLecture02 .lectureText02 {
    }

    .driver .lineupBox {
        padding: 35px 0 30px;
    }

    .driver .lineupBox h2.lineupTtl {
        background: url("/kiso/files/img/lesson/adjustable_wrench/bg_monkey_lineupttl01.png") no-repeat left top;
        background-size: 60px 60px;
        color: #FFF;
        margin-bottom: 20px;
        min-height: 75px;
        padding: 10px 0 0 70px;
        font-size: 170%;
        font-weight: bold;
    }

    .driver .lineupBox .ktImg {
    }



    .driver .lineupBox .lineupContents {
        padding-top: 0;
    }

    .driver .lineupBox .lineupContents .subTtl {
        color: #FFF;
    }

    .driver .lineupBox .lineupContents .lineupListBox {
        color: #FFF;
        display: inline-block;
        vertical-align: top;
        max-width: 280px;
        width: 45%;
        padding: 2%;
    }

    .driver .lineupBox .lineupContents .lineupListBox a {
        color: #fff;
        /*color:#e5134a;*/
        text-decoration: underline;
    }

    .driver .lineupBox .lineupContents .lineupListBox a:hover {
        text-decoration: none;
    }

    .driver .lineupBox .lineupContents .lineupListBox .imgBox {
        margin-bottom: 10px;
    }

    .driver .lineupBox .lineupContents .lineupListBox h4 {
        font-weight: bold;
        font-size: 124%;
        margin-bottom: 10px;
    }

    .driver .lineupBox .lineupContents .lineupListBox p {
        font-size: 108%;
    }

    .driver .lineupBox .tipsBox {
        background: #FFF;
        border: 5px solid #FAB4C5;
        border-radius: 5px;
        box-sizing: border-box;
        margin: 15px auto;
        padding: 5%;
        width: 100%;
    }

    .driver .lineupBox .tipsBox .tips {
        color: #333333;
        width: 100%;
        float: none;
    }

    .driver .lineupBox .tipsBox .tipsImg {
        float: none;
    }

    .driver .lineupBox .tipsBox .tips .tipsLabel {
        background: url("/kiso/files/img/lesson/adjustable_wrench/bg_monkey_tipslabel_icon.gif") no-repeat left 3px;
        color: #E6154A;
        font-size: 124%;
        font-weight: bold;
        padding-left: 30px;
        margin-bottom: 10px;
    }

    .driver .lineupBox .tipsBox .tips h3 {
        font-size: 154%;
        font-weight: bold;
        margin-bottom: 15px;
    }

    .driver .lineupBox .tipsBox .tips h3 br {
        display: none;
    }

    .driver .lineupBox .tipsBox .tips p {
        font-size: 108%;
        margin-bottom: 20px;
    }



    /*----------------------------*/
    .driver .confirmationArea {
        background: url("/kiso/files/img/lesson/adjustable_wrench/bg_adjustable_wrench_confirmation.png") repeat-x left 50px;
        height: auto;
        padding-top: 40px;
        overflow: hidden;
        min-height: 380px;
    }
    .driver .confirmationArea h3 {
        font-size:  18px;
        font-weight: bold;
        color: #fff;
        padding: 15px 4% 0;
    }
    .driver .confirmationArea h3 span {
        font-size:  13px;
        font-weight: normal;
        display: inline-block;
        vertical-align: middle;
    }
    .driver .confirmationArea .inner {
        padding: 30px 0 45px !important;
    }
    .driver .confirmationArea .confirmationImg {
        width: 100px;
        display: inline-block;
        vertical-align: middle;
    }
    .driver .confirmationArea .confirmationImg > div {
        display: none;
    }
    .driver .confirmationArea .confirmationImg .default {
        display: block
    }
    .driver .confirmationArea .confirmationAnser {
        width: calc(100% - 120px);
        display: inline-block;
        vertical-align: middle;
        position: relative;
        top: -10px;
        max-height: 250px;
    }
    .driver .confirmationArea .confirmationAnser .confirmation,
    .driver .confirmationArea .confirmationAnser .confirmationOn {
        background: #fff;
        color: #666;
        width: 100%;
        display: inline-block;
        margin: 30px 0 10px;
        padding: 0;
        font-size: 93%;
        border: #666 2px solid;
        border-radius: 10px;
        box-sizing: border-box;
        padding: 1em;
        position: relative;
    }
    .driver .confirmationArea .confirmationAnser .confirmationOn {
        opacity: 0;
    }
    .driver .confirmationArea .confirmationAnser .confirmation a:not([href$=".html"]),
    .driver .confirmationArea .confirmationAnser .confirmationOn a:not([href$=".html"]) {
        margin: 70px 0 0;
    }
    .driver .confirmationArea .confirmationAnser .confirmation a[target="_blank"],
    .driver .confirmationArea .confirmationAnser .confirmationOn a[target="_blank"] {
        position: absolute;
        left: 0;
        bottom: -70px;
    }
    .driver .confirmationArea .confirmationAnser .confirmation a[href="#"],
    .driver .confirmationArea .confirmationAnser .confirmationOn a[href="#"] {
        position: absolute;
        left: 0;
        bottom: -136px;
    }
    .driver .confirmationArea .confirmationAnser img {
		height: 57px;
	}
    .driver .confirmationArea .confirmationAnser .confirmation:before,
    .driver .confirmationArea .confirmationAnser .confirmationOn:before {
        content: '';
        display: block;
        width: 10px;
        height: 10px;
        background: #fff;
        border-top: #666 2px solid;
        border-left: #666 2px solid;
        position: absolute;
        top: 50%;
        left: 0;
        margin: -6px 0 0 -7px;
        transform: rotate(315deg);
    }
    .driver .confirmationArea .confirmationAnser .anser {
        background: none;
        color: #666;
        width: 100%;
        height: auto;
        margin: 0;
        float: none;
        position: relative;
    }
    .driver #btn {
        margin: 0 auto;
        background-position: left top;
        background-repeat: no-repeat;
        position: relative;
    }
    .driver #btn a {
        display: block;
        vertical-align: top;
        box-sizing: border-box;
        font-size: 12px;
        font-weight: bold;
        color: #EA0B46;
        margin: 0 0 10px;
        text-align: left;
        padding: 9px 10px;
        background-color: #FEEDF1;
        border: #FAB4C5 2px solid;
        border-radius: 10px;
        box-shadow: 3px 3px 0 #ddd;
        animation: moveBtn 2s infinite 2s normal ease-out;
    }
    .driver #btn a:hover {
        text-decoration: none;
    }




    @keyframes moveBtn {
        0% {
            top: 26px;
        }

        20% {
            top: 32px;
        }

        25% {
            top: 32px;
        }

        30% {
            top: 16px;
        }

        38% {
            top: 26px;
        }

        42% {
            top: 20px;
        }


        48% {
            top: 26px;
        }
    }

    #btn a:hover {
        background-color: #FAB4C5;
        border: #ED6A89 5px solid;
        top: 30px;
        left: 40px;
        box-shadow: 1px 1px 0 #ddd;
        animation: none;
    }

    /*----------------------------*/
    .driver .twitterQuestion {
        max-width: 280px;
        width: 50%;
        margin: 0 auto;
        float: none;
    }

    .driver .snsSet {
        float: none;
    }

    .driverBottom {
        width: 100%;
        margin: 30px auto 0;
    }

    #contents .driverBottom .snsSet {
        padding-top: 30px;
        text-align: center;
    }



    /* 上級編 */
    .level h2.levelTtl {
        background: url(/kiso/files/img/lesson/adjustable_wrench/bg_monkey_usettl01.png) no-repeat left top;
        background-size: 60px 60px;
        margin-bottom: 0px;
        min-height: 70px;
        padding: 14px 0 0 70px;
        font-size: 170%;
        font-weight: bold;
        white-space: nowrap;
    }
    .level {
        padding: 20px 0 0;
        overflow: hidden;
    }
    /* Question */
    .level .qa-q {
        border-radius: 10px;
        border: #FFA742 5px solid;
        background: #fff;
        margin: 0 auto;
        overflow: hidden;
        box-sizing: border-box;
        padding: 15px 4%;
        position: relative;
    }
    .level .qa-q h3 {
        font-size: 24px;
        font-weight: bold;
        color: #FFA742;
        margin: 0 0 15px;
    }
    .level .qa-q h3 img {
        margin: 0 7px 0 0;
        width: 25px;
        position: relative;
        top: -5px;
    }
    .level .qa-q .img01 {
        margin: 25px auto 20px;
        text-align: center;
        width: 170px;
    }
    .level .qa-q > div {
    }
    .level .qa-q p.txt01 {
        font-size: 108%;
    }
    .level .qa-q p.txt02 {
        font-size: 123.1%;
        margin: 12px 0 0;
    }
    .level .qa-q p.txt02 strong {
        color: #E5134A;
    }
    .level .qa-q p.txt03 {
        font-size: 108%;
        font-weight: bold;
        color: #D86C00;
        margin: 10px 0 10px;
    }
    .level .qa-q p.txt03 img {
    text-align: center;
    display: block;
    margin: 25px 0;
    }

    /* Answer */
    .level .qa-a {
        background: #fff;
        margin: 30px auto 0;
        overflow: hidden;
        box-sizing: border-box;
        padding: 30px 4% 0;
        position: relative;
    }
    .level .qa-a h3 {
        font-size: 24px;
        font-weight: bold;
        color: #fff;
        margin: 0 0 20px;
        display: inline-block;
        background: #FFA64D;
        border-radius: 25px;
        padding: 5px 30px 5px 16px;
    }
    .level .qa-a h3 img {
        margin: 0 7px 0 0;
        position: relative;
        top: -9px;
        width: 22px;
    }
    .level .qa-a .txt01 {
        font-size: 108%;
        padding: 0 10px;
        margin: 0 0 30px;
    }
    .level .qa-a .txt01 strong {
        color: #E5134A;
    }
    .level .qa-a dl {
        box-sizing: border-box;
        margin: 0 auto 30px;
        padding: 0 10px;
    }
    .level .qa-a dl:nth-of-type(1) {
        border-bottom: #ccc 2px solid;
        padding: 0 0 20px;
    }
    .level .qa-a dt {
        font-size: 131%;
        font-weight: bold;
        color: #111;
        text-align: center;
        letter-spacing: -.05em;
        padding: 0 0 20px 0;
    }
    .level .qa-a dt br.pc {
        display: none;
    }
    .level .qa-a dt img {
        margin: 20px 0 0;
    }
    .level .qa-a dd span {
        display: block;
        font-size: 12px;
        margin: 25px 0 0 0;
        text-align: left;
    }
    .level .qa-a dd span strong {
        color: #E5134A;
    }

}

@media screen and (min-width: 768px) {
    .lesson.driver .breadcrumb {
        z-index:10;
    }

    .driver .ktArea {
    }

    .driver .ktArea .ktImg {
        float: left;
        margin-bottom: 0;
    }

    .driver .ktArea .ktText {
        float: left;
        padding-top: 35px;
        margin-left: 40px;
    }

    .driver .ktArea .ktText p {
        font-size: 139%;
    }

    .driver .ktArea .ktText h2 {
        font-size: 170%;
        font-weight: bold;
    }

    .driver .ktImg,.driver .ktText01 p {
        margin-bottom: 5px;
    }

    .driver .pickupArea {
        background: #4EB09C;
    }

    .driver .qaBox {
        background: url("/kiso/files/img/lesson/adjustable_wrench/bg_monkey_qaimg.gif") no-repeat right 10px top 50px;
        padding: 85px 0 20px;
    }

    .driver .qaBox h2.qaTtl {
        background: url("/kiso/files/img/lesson/adjustable_wrench/bg_monkey_qattl01.png") no-repeat left top;
        color: #FFF;
        margin-bottom: 20px;
        min-height: 75px;
        padding: 45px 0 0 90px;
        font-size: 231%;
        font-weight: bold;
    }

    .driver .qaBox p {
        color: #FFF;
        font-size: 139%;
        margin: 0 0 40px 20px;
        width: 510px;
    }
    .driver .qaBox p.cmn-screw {
        width: 100%;
        margin: 40px 0 0;
    }

    .driver .qaBox .qaBtn {
        margin-left: 40px;
    }

    .driver .qaBox .qaBtn a {
        display: inline-block;
        margin-right: 30px;
    }

    .driver .qaBox .tipsBox {
        background: #FFF;
        border: 5px solid #FAB4C5;
        border-radius: 5px;
        margin: 35px 15px;
        padding: 45px 25px 45px;
        width: 870px;
    }

    .driver .qaBox .tipsBox .tips {
        color: #333333;
    }
    .driver .qaBox .tipsBox .tips .tipsLabel {
        background: url("/kiso/files/img/lesson/adjustable_wrench/bg_monkey_tipslabel_icon.gif") no-repeat left 3px;
        color: #E6154A;
        font-size: 154%;
        font-weight: bold;
        padding-left: 30px;
        margin-bottom: 10px;
    }

    .driver .qaBox .tipsBox .tips h3 {
        font-size: 200%;
        font-weight: bold;
        margin-bottom: 14px;
    }

    .driver .qaBox .tipsBox .tips p {
        font-size: 139%;
        color: #333;
        margin-bottom: 20px;
        width: 100%;
        margin: 0;
    }
    .driver .qaBox .tipsBox .tips p.img01 {
        text-align: center;
        margin: 35px auto;
    }


    .level_m .tipsBox {
        background: #FFF;
        border: 5px solid #FAB4C5;
        border-radius: 5px;
        margin: 35px 15px;
        padding: 45px 25px 45px;
        width: 870px;
    }

    .level_m .tipsBox .tips {
        color: #333333;
    }
    .level_m .tipsBox .tips .tipsLabel {
         background: url("/kiso/files/img/lesson/adjustable_wrench/bg_monkey_tipslabel_icon.gif") no-repeat left 3px;
       
        color: #E6154A;
        font-size: 154%;
        font-weight: bold;
        padding-left: 30px;
        margin-bottom: 10px;
    }

    .level_m .tipsBox .tips h3 {
        font-size: 200%;
        font-weight: bold;
        margin-bottom: 14px;
    }

    .level_m .tipsBox .tips p {
        font-size: 139%;
        color: #333;
        margin-bottom: 20px;
        width: 100%;
        margin: 0;
    }
    .level_m .tipsBox .tips p.img01 {
        text-align: center;
        margin: 35px auto;
    }
    .driver .useBox {
        padding: 70px 0 60px;
    }

    .driver .useBox h2.useTtl {
        background: url("/kiso/files/img/lesson/adjustable_wrench/bg_monkey_usettl01.png") no-repeat left top;
        margin-bottom: 20px;
        min-height: 75px;
        padding: 45px 0 0 90px;
        font-size: 231%;
        font-weight: bold;
    }

    .driver .useBox .ktImg {
        float: left;
    }

    .driver .useBox .ktLecture01 {
    }

    .driver .useBox .ktLecture01 .lectureText01 {
        background: url("/kiso/files/img/lesson/adjustable_wrench/bg_kttext05.png") no-repeat right 0;
        padding: 26px 60px 0 60px;
        width: 440px;
        margin: 0 0 0 10px;
        height: 140px;
        float: left;
        opacity: 0;
        line-height: 1.6;
        box-sizing: border-box;
    }

    .driver .spLecture {
        display: none;
    }

    .driver .useBox .ktLecture01 .lectureText01 p {
        color: #666666;
        font-size: 18px;
        font-weight: bold;
    }

    .driver .useBox .ktLecture01 .lectureText01 p.emphasis {
        font-size: 22px;
    }

    .driver .useBox .ktLecture02 {
        position: relative;
    }
    .driver .useBox .ktLecture02 .lectureText02 {
        background: url("/kiso/files/img/lesson/adjustable_wrench/bg_kttext06.png") no-repeat left 15px;
        width: 440px;
        height: 205px;
        padding: 50px 60px 0 58px;
        float: left;
        opacity: 0;
        line-height: 1.6;
        box-sizing: border-box;
        margin: 0 0 0 320px;
    }
    .driver .useBox .ktLecture02 .lectureText02 p {
        color: #666666;
        font-size: 22px;
        font-weight: bold;
    }
    .driver .useBox .ktLecture02 .ktImg {
        position: absolute;
        right: 8px;
        top: -60px;
    }




    .driver .useContents {
        padding: 0 10px 0;
    }

    .driver h3.subTtl {
        background: url("/kiso/files/img/lesson/adjustable_wrench/bg_subttl_icon.png") no-repeat left center;
        font-size: 200%;
        font-weight: bold;
        padding: 3px 0 0 35px;
        margin-bottom: 20px;
    }
    .driver h3.subTtl02 {
        background: url("/kiso/files/img/lesson/adjustable_wrench/bg_subttl_icon02.png") no-repeat left 8px;
        font-size: 200%;
        font-weight: bold;
        padding: 3px 0 40px 35px;
        margin-bottom: 20px;
        color: #fff;
        position: relative;
    }
    .driver h3.subTtl02 img {
        position: absolute;
        top: 0;
        left: 410px;
    }


    .driver .useContents .useMovie {
        float: left;
        width: 445px;
        margin-left: 5px;
    }

    .driver .useContents .useLecture {
        float: right;
        width: 450px;
    }

    .driver .useContents .useLecture p {
        font-size: 139%;
        margin-bottom: 20px;
        line-height: 180%;
        padding-top: 10px;
    }
    .driver .useContents .useLecture p.img01 {
        text-align: right;
        margin: -14px 0 0;
    }
    .driver .useContents .useLecture p.img02 {
        text-align: center;
    }
    .driver .useContents .useLecture p strong {
        font-weight: normal;
        color: #E5134A;
    }


    .driver .useImage h4 {
        font-size: 139%;
        margin-bottom: 5px;
    }

    .driver .useImage .useImages {
        margin-bottom: 20px;
    }

    .driver .noteArea {
        margin: 0 0 50px;
    }

    .driver .noteArea .noteList {
        background: url("/kiso/files/img/lesson/adjustable_wrench/bg_noteicon.png") no-repeat left top;
        padding-top: 30px;
        width: 600px;
    }

    .driver .noteArea .noteList li {
        font-size: 108%;
        list-style-type: disc;
        margin-left: 20px;
    }

    .driver .noteArea .noteImg {
        float: left;
        margin-left: 45px;
        padding-top: 30px;
    }


    .driver .useContents .ktLecture01 .ktImg {
        float: left;
    }
    .driver .useContents .ktLecture01 .lectureText01 {
        background: url("/kiso/files/img/lesson/adjustable_wrench/bg_kttext07.png") no-repeat right 0;
        padding: 30px 40px 0 60px;
        width: 440px;
        margin: 0 0 0 10px;
        height: 230px;
        float: left;
        opacity: 0;
        line-height: 1.6;
        box-sizing: border-box;
    }

    .driver .spLecture {
        display: none;
    }

    .driver .useContents .ktLecture01 .lectureText01 p {
        color: #666666;
        font-size: 18px;
        font-weight: bold;
    }

    .driver .useContents .ktLecture01 .lectureText01 p.emphasis {
        font-size: 22px;
    }



    .driver .useContents .ktLecture02 {
        position: relative;
    }

    .driver .useContents .ktLecture02 .lectureText02 {
        background: url("/kiso/files/img/lesson/adjustable_wrench/bg_kttext06.png") no-repeat left 0;
        width: 440px;
        height: 205px;
        padding: 49px 60px 0 72px;
        float: left;
        opacity: 0;
        line-height: 1.6;
        box-sizing: border-box;
        margin: -10px 0 0 423px;
    }

    .driver .useContents .ktLecture02 .lectureText02 p {
        color: #666666;
        font-size: 22px;
        font-weight: bold;
    }

    .driver .useContents .ktLecture02 .ktImg {
        position: absolute;
        right: 0;
    }

    .driver .lineupBox {
        padding: 70px 0 60px;
    }

    .driver .lineupBox h2.lineupTtl {
        background: url("/kiso/files/img/lesson/adjustable_wrench/bg_monkey_lineupttl01.png") no-repeat left top;
        color: #FFF;
        margin-bottom: 20px;
        min-height: 75px;
        padding: 45px 0 0 90px;
        font-size: 231%;
        font-weight: bold;
    }

    .driver .lineupBox .ktImg {
        float: left;
    }

    .driver .lineupBox .lineupContents {
    }

    .driver .lineupBox .lineupContents .subTtl {
        color: #FFF;
    }

    .driver .lineupBox .lineupContents .lineupListBox {
        color: #FFF;
        display: inline-block;
        vertical-align: top;
        margin: 0 15px;
        width: 440px;
        padding: 0 0 30px;
    }

    .driver .lineupBox .lineupContents .lineupListBox a {
        color: #fff;
        /*color:#e5134a;*/
        text-decoration: underline;
    }

    .driver .lineupBox .lineupContents .lineupListBox a:hover {
        text-decoration: none;
    }

    .driver .lineupBox .lineupContents .lineupListBox .imgBox {
        margin-bottom: 10px;
    }

    .driver .lineupBox .lineupContents .lineupListBox h4 {
        font-weight: bold;
        font-size: 139%;
        margin-bottom: 10px;
    }

    .driver .lineupBox .lineupContents .lineupListBox p {
        font-size: 108%;
    }

    .driver .lineupBox .tipsBox {
        background: #FFF;
        border: 5px solid #FAB4C5;
        border-radius: 5px;
        margin: 30px 15px;
        padding: 45px 25px 45px;
        width: 870px;
    }

    .driver .lineupBox .tipsBox .tips {
        color: #333333;
        width: 560px;
        float: left;
    }

    .driver .lineupBox .tipsBox .tipsImg {
        float: right;
        margin: 40px 0 0;
    }

    .driver .lineupBox .tipsBox .tips .tipsLabel {
        background: url("/kiso/files/img/lesson/adjustable_wrench/bg_monkey_tipslabel_icon.gif") no-repeat left 3px;
        color: #E6154A;
        font-size: 154%;
        font-weight: bold;
        padding-left: 30px;
        margin-bottom: 10px;
    }

    .driver .lineupBox .tipsBox .tips h3 {
        font-size: 200%;
        font-weight: bold;
        margin-bottom: 25px;
    }

    .driver .lineupBox .tipsBox .tips p {
        font-size: 139%;
        margin-bottom: 20px;
    }





    /*----------------------------*/
        .driver .confirmationArea {
        background: url("/kiso/files/img/lesson/adjustable_wrench/bg_adjustable_wrench_confirmation.png") repeat-x left 50px;
        height: 520px;
        padding-top: 80px;
        overflow: hidden;
    }
    .driver .confirmationArea h3 {
        font-size:  30px;
        font-weight: bold;
        color: #fff;
        margin: 20px 0 25px 60px;
    }
    .driver .confirmationArea h3 span {
        font-size:  18px;
        font-weight: normal;
        display: inline-block;
        vertical-align: middle;
        margin: 0 0 0 40px;
    }
    .driver .confirmationArea .confirmationImg {
        width: 245px;
        float: left;
    }
    .driver .confirmationArea .confirmationImg > div {
        display: none;
    }
    .driver .confirmationArea .confirmationImg .default {
        display: block;
    }
    .driver .confirmationArea .confirmationAnser {
        width: 720px;
        float: left;
    }
    .driver .confirmationArea .confirmationAnser a {
        color: #666;
        text-decoration: underline;
    }
    .driver .confirmationArea .confirmationAnser .confirmation,
    .driver .confirmationArea .confirmationAnser .confirmationOn {
        color: #666;
        margin-top: 30px;
        font-size: 124%;
        font-weight: bold;
        width: 340px;
        background: url("/kiso/files/img/lesson/adjustable_wrench/bg_adjustable_wrench_confirmation01.gif") no-repeat left top;
    }
    .driver .confirmationArea .confirmationAnser .confirmation {
        height: 92px;
        padding: 69px 50px 0 80px;
  }
    .driver .confirmationArea .confirmationAnser .confirmationOn {
        opacity: 0;
        height: 125px;
        padding: 36px 50px 0 80px;
    }
    .driver .confirmationArea .confirmationAnser .confirmation img,
    .driver .confirmationArea .confirmationAnser .confirmationOn img {
        margin: 85px 0 -70px;
    }
    .driver .confirmationArea .confirmationAnser .anser {
        color: #666;
        margin: 25px 0 0 40px;
        position: relative;
    }
    .driver #btn {
        margin: 0 auto;
        background-position: left top;
        background-repeat: no-repeat;
        position: relative;
    }
    .driver #btn a {
        display: inline-block;
        vertical-align: top;
        box-sizing: border-box;
        font-size: 20px;
        font-weight: bold;
        color: #EA0B46;
        margin: 0 12px 20px;
        text-align: center;
        padding: 20px 20px;
        background-color: #FEEDF1;
        border: #FAB4C5 5px solid;
        border-radius: 10px;
        box-shadow: 5px 5px 0 #ddd;
        animation: moveBtn 2s infinite 2s normal ease-out;
        text-decoration: none;
    }





    @keyframes moveBtn {
        0% {
            top: 26px;
        }

        20% {
            top: 32px;
        }

        25% {
            top: 32px;
        }

        30% {
            top: 16px;
        }

        38% {
            top: 26px;
        }

        42% {
            top: 20px;
        }

        48% {
            top: 26px;
        }
    }

    #btn a:hover {
        background-color: #FAB4C5;
        border: #ED6A89 5px solid;
        top: 30px;
        left: 40px;
        box-shadow: 1px 1px 0 #ddd;
        animation: none;
        text-decoration: none;
    }

    .driver .twitterQuestion {
        width: 280px;
        float: left;
    }

    .driver .snsSet {
        float: right;
    }

    .ratchet_meganeBottom {
        width: 670px;
        margin: 30px auto 0;
    }


    /* 上級編 */
    .level {
        padding: 55px 0 0;
    }
    .level h2.levelTtl {
        background: url("/kiso/files/img/lesson/adjustable_wrench/bg_monkey_usettl01.png") no-repeat left top;
        margin-bottom: 20px;
        min-height: 75px;
        padding: 45px 0 0 90px;
        font-size: 231%;
        font-weight: bold;
    }

    /* Question */
    .level .qa-q {
        width: 920px;
        border-radius: 10px;
        border: #FFA742 5px solid;
        background: #fff;
        margin: 0 auto;
        overflow: hidden;
        box-sizing: border-box;
        padding: 15px;
        position: relative;
    }
    .level .qa-q h3 {
        font-size: 30px;
        font-weight: bold;
        color: #FFA742;
        margin: 0 0 30px;
    }
    .level .qa-q h3 img {
        margin: 0 7px 0 0;
    }
    .level .qa-q .img01 {
        width: 204px;
        float: left;
        margin: 25px 22px 7px -17px;
    }
    .level .qa-q > div {
        width: 650px;
        float: left;
    }
    .level .qa-q p.txt01 {
        font-size: 18px;
    }
    .level .qa-q p.txt02 {
        font-size: 26px;
    }
    .level .qa-q p.txt02 strong {
        color: #E5134A;
    }
    .level .qa-q p.txt03 {
        font-size: 18px;
        font-weight: bold;
        color: #D86C00;
        margin: 60px 0 0;
    }
    .level .qa-q p.txt03 img {
        position: absolute;
        bottom: 20px;
        right: 30px;
    }

    /* Answer */
    .level .qa-a {
        width: 920px;
        background: #fff;
        margin: 30px auto;
        overflow: hidden;
        box-sizing: border-box;
        padding: 30px 20px;
        position: relative;
    }
    .level .qa-a h3 {
        font-size: 30px;
        font-weight: bold;
        color: #fff;
        margin: 0 0 30px;
        display: inline-block;
        background: #FFA64D;
        border-radius: 25px;
        padding: 5px 30px 5px 16px;
    }
    .level .qa-a h3 img {
        margin: 0 7px 0 0;
        position: relative;
        top: -8px;
    }
    .level .qa-a .txt01 {
        font-size: 18px;
        padding: 0 10px;
        margin: 0 0 70px;
    }
    .level .qa-a .txt01 strong {
        color: #E5134A;
    }
    .level .qa-a dl {
        display: table;
        width: 866px;
        box-sizing: border-box;
        margin: 0 auto 55px;
        padding: 0 10px;
    }
    .level .qa-a dl:nth-of-type(1) {
        border-bottom: #ccc 2px solid;
        padding: 0 0 50px;
    }
    .level .qa-a dt,
    .level .qa-a dd {
        display: table-cell;
        vertical-align: top;
    }
    .level .qa-a dt {
        width: 265px;
        font-size: 18px;
        color: #111;
        letter-spacing: -.05em;
        padding: 0 0 0 30px;
        box-sizing: border-box;
    }
    .level .qa-a dt img {
        margin: 30px 0 0;
    }
    .level .qa-a dd {
        width: 540px;
        box-sizing: border-box;
        padding: 0 0 0 5px;
    }
    .level .qa-a dd span {
        display: block;
        font-size: 12px;
        margin: 20px 0 0 80px;
        width: 440px;
    }
    .level .qa-a dd span strong {
        color: #E5134A;
    }

}