@charset "UTF-8";

/* キッズサイトTOPここから
----------------------------------------------- */
#body_wrapper{
    background-image: url(/images/kids/main_bg.gif);
    background-repeat: repeat-x;
}

.kids_wrapper{
    width: 96%;
    max-width: 1000px;
    margin: 0 auto;
}

.mainContent{
    width: 100%;
}

.kid_top_logo{
    text-align: center;
    margin-bottom: 24px;
}

.kid_top_logo img{
    max-width: 490px;
}

.top_message{
    text-align: center;
}

.kids_top_nav{
    background: url(/images/kids/car.png) no-repeat center bottom 5px,url(/images/kids/road_bg.png) repeat-x center bottom;
    margin-top: 40px;
}

.kids_top_nav ul{
    margin-left: 0;
    display: flex;
    justify-content: space-between;
    margin: 0 auto;
    width: 96%;
    max-width: 1000px;
}

.kids_top_nav ul li {
    width: calc(100% / 5);
    list-style-type: none;
    margin: 0;
    padding-top: 20px;
}

.kids_top_nav ul li a img {
    vertical-align: bottom;
}

.kids_top_nav ul li:nth-child(2) {
    padding: 80px 0 0;
}

.kids_top_nav ul li:nth-child(4) {
    padding: 80px 0 0;
}

.kids_top_nav ul li a {
    opacity: 1;
}


footer{
    position: relative;
    background-image: url(/images/kids/footer_bg.gif);
    background-repeat: repeat;
}

.footer_wrap{
    width: 96%;
    max-width: 1000px;
    margin: 0 auto;
    padding-top: 40px;
}

footer:before{
    content: "";
    width: 100%;
    background: url(/images//kids/footer_top_bg.gif) repeat top;
    height: 20px;
    display: block;
}

.kids_footer_nav{
    margin-bottom: 16px;
}

.kids_footer_nav ul{
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}

.kids_footer_nav ul li{
    width: calc(100% / 5);
    border-right: 1px solid #000;
    text-align: center;
    line-height: 1.2;
    padding: .5em;
}

.kids_footer_nav ul li a{
    font-size: 13px;
}

.kids_footer_nav ul li:last-child{
    border-right: none;
}

.back_top{
    text-align: center;
}

.copyright{
    text-align: center;
}

@media only screen and (max-width: 1199px) and (max-width: 767px) {

    .kids_top_nav ul li:nth-child(2) {
        padding: 15vh 0 0;
    }

    .kids_top_nav ul li:nth-child(4) {
        padding: 15vh 0 0;
    }

    .kids_footer_nav ul{
        flex-direction: column;
    }

    .kids_footer_nav ul li{
        width: 100%;
        border-right: none;
        border-bottom: 1px solid #000;
        text-align: left;
    }

    .kids_footer_nav ul li:last-child{
        border-bottom: none;
    }

    .kids_top_nav_sp{
        text-align: center;
    }

    .kids_top_nav_sp img{
        vertical-align: bottom;
    }


}


/* キッズサイトTOPここまで
----------------------------------------------- */

/* ミッチーくんプロフィールここから
----------------------------------------------- */
.header_kids_wrap{
    display: flex;
    justify-content: space-between;
}

.header_kids_wrap .kids_common_header_logo{
    padding-top: 10px;
}

.header_kids_wrap .kids_common_header_logo a img{
    width: 250px;
    height: 90px;
}

.header_pcnav ul{
    display: flex;
}

.header_pcnav ul li a{
    opacity: 1;
}

.mainContent.kids_content{
    width: 96%;
    margin: 0 auto;
    max-width: 1000px;
    margin:-10px auto 80px;
    box-shadow: 3px 3px 3px #888;
    border-radius: 50px;
    background-color: #fff;
    border: 1px solid #ddd;
    padding: 1em;
}

.mainContent.kids_content h2{
    margin: 16px 0;
    padding: 0;
}

.mainContent.kids_content h3{
    background: transparent;
    margin: 0;
    border-bottom: none;
    padding: 0;
}

.mainContent.kids_content h3::before{
    width: 0;
    height: 0;
}

.h1_top_title img{
    width: auto;
    vertical-align: bottom;
    padding: 5%;
}

.h2_title img{
    width: auto;
    vertical-align: bottom;
}


.road{
    width: 100%;
    height: 166px;
    background-image: url(/images//kids/road_bg.png);
}

.backtop_kids_wrap{
    margin: 0 auto;
    width: 96%;
    max-width: 1000px;
}


.backtop_kids{
    text-align: right;
    margin-top: 40px;
}

.backtop_kids img{
    width: auto;
    vertical-align: bottom;
}

.profile_list dt{
    font-weight: bold;
}

@media only screen and (max-width: 1199px) and (max-width: 767px) {
    .header_pcnav {
        margin-bottom: -10px;
    }
    
    .header_kids_wrap{
        flex-direction: column;
    }

    .header_kids_wrap .kids_common_header_logo{
        text-align: center;
    }
}



/* ミッチーくんプロフィールここまで
----------------------------------------------- */

/* 学研まんが「道づくりのひみつ」紹介ここから
----------------------------------------------- */
.detail_icon{
    color: #fff;
    background-color: #f39a00;
    padding: .7em 1em .2em ;
    font-size: 80%;
}

.detail_icon i{
    font-size: 150%;
}

.mainContent.kids_content h3.special{
    background: linear-gradient(to top,#e7eae6,transparent);
    margin: 0 0 16px 0;
    border-bottom: 1px solid #1f509c;
    padding: 8px 8px 4px 16px;
}

.mainContent.kids_content h3.special::before{
    width: 5px;
    height: 30px;
}

.common_container.comic_container .container_left{
    width: 29%;
}

.common_container.comic_container .container_right{
    width: 69%;
}

.common_container.comic_container .container_left figure{
    text-align: center;
}

.common_container.comic_container .container_left figure img{
    width: auto;
}

.mainContent.kids_content .detail_yellow_wrap{
    margin-bottom: 0;
}

.mainContent.kids_content .detail_yellow_wrap_bottom{
    padding-left: 7em;
}



@media only screen and (max-width: 1199px) and (max-width: 767px) {
    .detail_icon{
        width: 7.5em;
        display: block;
        margin-bottom: .3em;
    }

    .common_container.comic_container .container_left{
        width: 100%;
    }

    .common_container.comic_container .container_right{
        width: 100%;
    }

    .mainContent.kids_content .detail_yellow_wrap_bottom{
        padding: 0 1em;
    }

}


/* 学研まんが「道づくりのひみつ」紹介ここまで
----------------------------------------------- */

/* 調べよう！見てみよう！道づくりの自由研究 ここから
----------------------------------------------- */


.kids_index_list li{
    border-bottom: 3px solid #d1d1f1;
}

.kids_index_list li:last-child{
    border-bottom: none;
}

/* 調べよう！見てみよう！道づくりの自由研究 ここまで
----------------------------------------------- */

/* クイズ！「みち」への挑戦 ここから
----------------------------------------------- */
.quiz_nav ul{
    width: 60%;
    margin: 0 auto;
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
}

.quiz_nav ul li{
    list-style-type: none;
    width: 49%;
    margin: 0;
}

.mainContent.kids_content .quiz_title01,
.mainContent.kids_content .quiz_title02,
.mainContent.kids_content .quiz_title03 {
    position: relative;
    padding-left: 3.5em;
}

.quizbox {
    border-bottom: #d1d1d1 3px solid;
    padding-bottom: 16px;
    margin-bottom: 24px;
}

.quizbox .common_container .container_left{
    width: 70%;
}

.quizbox .common_container .container_right{
    width: 30%;
}

.mainContent.kids_content .quiz_title01::before,
.mainContent.kids_content .quiz_title02::before,
.mainContent.kids_content .quiz_title03::before{
    position:absolute;
    top: 10%;
    left: 0;
}

.mainContent.kids_content .quiz_title01::before{
    content: url(/images/kids/q1.gif);
}

.mainContent.kids_content .quiz_title02::before{
    content: url(/images/kids/q2.gif);
}


.mainContent.kids_content .quiz_title03::before{
    content: url(/images/kids/q3.gif);
}

.mainContent.kids_content .quiz_select span,
.mainContent.kids_content .quiz_answer01 span,
.mainContent.kids_content .quiz_answer02 span,
.mainContent.kids_content .quiz_answer03 span{
    color: red;
    font-weight: bold;
}

.answer_icon01,
.answer_icon02,
.answer_icon03{
    color: #fff;
    background-color: #f39a00;
    padding: .7em 1em .2em ;
    font-size: 80%;
    cursor: pointer;
}

.answer_icon01 i,
.answer_icon02 i,
.answer_icon03 i {
    font-size: 150%;
}

.common_container.quiz_top_container{
}

.common_container.quiz_top_container .container_left{
    width: 69%;
}

.common_container.quiz_top_container .container_right{
    width: 29%
}

.common_container.quiz_top_container .container_right figure{
    text-align: center;
}


.common_container.quiz_top_container .container_right figure img{
    width: auto;
}




@media only screen and (max-width: 1199px) and (max-width: 767px) {

    .quiz_nav ul{
        width: 100%;
    }

    .mainContent.kids_content .quiz_title01,
    .mainContent.kids_content .quiz_title02,
    .mainContent.kids_content .quiz_title03 {
        padding-left: 4em;
    }


    .quizbox .common_container .container_left{
        width: 100%;
    }

    .quizbox .common_container .container_right{
        width: 100%;
    }

    .answer_icon01,
    .answer_icon02,
    .answer_icon03{
        font-size: 150%;
}

.common_container.quiz_top_container .container_left{
    width: 100%;
}

.common_container.quiz_top_container .container_right{
    width: 100%
}


}


/* クイズ！「みち」への挑戦 ここまで
----------------------------------------------- */



/* ものしり博士 ここから
----------------------------------------------- */

.mainContent.kids_content .monoshiri_title{
    color: #03C;
    font-size: 20px;
    font-weight: bold;
    padding-left: 16px;
}

.monoshiri_pager_container{
    display: flex;
    justify-content: space-between;
}

.monoshiri04_img_wrap{
    overflow-x: scroll;
    margin-bottom: 24px;
}


.monoshiri04_img_wrap figure{
    width: 2000px;
}

/* ものしり博士 ここまで
----------------------------------------------- */

/* 道づくりの自由研究 ここから
----------------------------------------------- */

.research_box03,
.research_box02{
    display: flex;
    align-items: center;
    margin-bottom: 24px;
}

.research_box03 .container_left
.research_box02 .container_left{
    width: 20%;
}

.research_box03 .container_center{
    width: 50%;
}

.research_box03 .container_right{
    width: 30%;
}

.research_box02 .container_right{
    width: 70%;
}

.comic_introbox{
    color: red;
    border-top: 3px double red;
    border-bottom: 3px double red;
    font-size: 12px;
    text-align: center;
    padding-top: 5px;
}


.comic_introbox figure img{
    width: 80px;
}

.comic_introbox figure figcaption{
    line-height: 1;
}

.reserch_table{
    border: 1px solid #ccc;
    margin-bottom: 24px;
}

.reserch_table th{
    padding: 5px;
    text-align: center;
    background-color: #e6f9f6;
    border: 1px solid #ccc;
}

.reserch_table td{
    padding: 5px;
    border: 1px solid #ccc;
}

/* 道づくりの自由研究 ここまで
----------------------------------------------- */