@charset "UTF-8";

/*++++++++++++++++++++++++++
背景
++++++++++++++++++++++++++*/
#wrapper {
    width: 100%;
    margin: auto;
    padding: 8px;
    box-sizing: border-box;
    clear: both;
    background-image: url(../images/background.jpg);
    background-repeat: repeat;
    background-position: top center;
}

#wrapper_blue {
    width: 100%;
    margin: auto;
    padding: 8px;
    box-sizing: border-box;
    clear: both;
    background-color: #4AB8CB;
}

#wrapper_yellow {
    width: 100%;
    margin: auto;
    padding: 8px;
    box-sizing: border-box;
    clear: both;
    background-color: #FFFCED;
}



/*++++++++++++++++++++++++++
共通
++++++++++++++++++++++++++*/
section {
    margin: auto;
}

.wrap_col2 {
    max-width: 800px;
    margin: auto;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
}
.fadeIn{
    visibility: hidden;
}

/*++++++++++++++++++++++++++
ヘッダー
++++++++++++++++++++++++++*/
header {
    background-image: url(../images/background.jpg);
    background-repeat: repeat;
    background-position: top center;
    padding: 10px;
}

header .name {
    text-align: center;
    font-size: 16px;
    margin: 0 auto 10px;
}

header .header_logo {
    text-align: center;
    margin: 0 auto 0;
    width: 160px;

}

/*++++++++++++++++++++++++++
mainvisual
++++++++++++++++++++++++++*/
#mainvisual {
    background-color: #4AB8CB;
    padding: 20px 20px 0;
}
#mainvisual .main_pc  {
    display: block;
    max-width: 1100px;
    margin: auto;
}

#mainvisual .main_sp  {
    display: none;
}

@media screen and (max-width: 600px) {

    #mainvisual .main_pc  {
        display: none;
    }

    #mainvisual .main_sp  {
        display: block;
        max-width: 600px;
        margin: auto;
    }
}



/*++++++++++++++++++++++++++
　　　6割の県民が特定健診を受信
++++++++++++++++++++++++++*/
#rokuwari {
    max-width: 900px;
    width: 100%;
    padding: 50px 10px;
    margin: 30px auto;
    background-color: #ffffff;
    border-radius: 15px;
}

#rokuwari .rokuwari_title {
    max-width: 600px;
    width: 90%;
    margin: 0 auto 40px;
}

#rokuwari .rokuwari_se_title {
    max-width: 800px;
    width: 100%;
    padding: 5px 0;
    background-color: #FFD819;
    margin: 0 auto 20px;
    text-align: center;
    font-size: 20px;
}

#rokuwari .rokuwari_txt {
    width: 70%;
    margin: 0 auto 20px;
    font-size: 16px;
    line-height: 1.9em;
}

#rokuwari .illust05 {
    width: 30%;
    margin: 0 auto 20px;
}


#rokuwari .rokuwari_number {
    width: 70%;
    margin: 0 auto 20px;
}

#rokuwari .illust06 {
    width: 30%;
    margin: 0 auto 20px;
}

#rokuwari .rokuwari_number li {
    margin: 0 auto 5px;
    font-size: 20px;
    line-height: 1.5em;
}

#rokuwari .rokuwari_number li:nth-child(1)::before {
    content: url(../images/number01.svg);
    width: 30px;
    margin: 0 3px 0 0;
    vertical-align: -5px;

}

#rokuwari .rokuwari_number li:nth-child(2)::before {
    content: url(../images/number02.svg);
    width: 30px;
    margin: 0 3px 0 0;
    vertical-align: -5px;

}

#rokuwari .rokuwari_number li:nth-child(3)::before {
    content: url(../images/number03.svg);
    width: 30px;
    margin: 0 3px 0 0;
    vertical-align: -5px;
}

#rokuwari .rokuwari_number li:nth-child(4)::before {
    content: url(../images/number04.svg);
    width: 30px;
    margin: 0 3px 0 0;
    vertical-align: -5px;
}

#rokuwari .rokuwari_number li:nth-child(5)::before {
    content: url(../images/number05.svg);
    width: 30px;
    margin: 0 3px 0 0;
    vertical-align: -5px;
}

#rokuwari .rokuwari_txt2 {
    width: 50%;
    margin: 0 auto 20px;
    font-size: 16px;
    line-height: 1.9em;
}

#rokuwari .illust07 {
    width: 48%;
    margin: 0 auto 20px;
}


@media screen and (max-width: 600px) {

#rokuwari .rokuwari_title {
    width: 90%;
    margin: 0 auto 20px;
}

    #rokuwari {
        margin: auto;
    }

    #rokuwari .rokuwari_txt {
        width: 100%;
        margin: 0 auto 20px;
    }

    #rokuwari .illust05 {
        width: 60%;
    }

    #rokuwari .rokuwari_number {
        width: 100%;
    }

    #rokuwari .illust06 {
        width: 50%;
    }

    #rokuwari .rokuwari_txt2 {
        width: 100%;
    }

    #rokuwari .illust07 {
        width: 100%;
    }


}


/*++++++++++++++++++++++++++
特定健診ってしっていますか？
++++++++++++++++++++++++++*/
#tokuteikenshin {
    max-width: 900px;
    background-image: url(../images/binder_bk.svg);
    background-repeat: repeat;
    padding: 20px;
    margin: 30px auto;
    position: relative;
}

#tokuteikenshin .black_line {
    border: #000 5px solid;
    background-color: #fff;
    padding: 40px 10px 30px;
    margin: auto;
}

#tokuteikenshin .binder {
    width: 147px;
    position: absolute;
    top: -14px;
    left: 50%;
    transform: translateX(-50%);
    -webkit- transform: translateX(-50%);

}

#tokuteikenshin .tokuteikenshin_title {
    max-width: 500px;
    width: 80%;
    margin: 0 auto 40px;
}

#tokuteikenshin .tokuteikenshin_txt {
    width: 50%;
    margin: 0 auto 20px;
    font-size: 18px;
    line-height: 1.9em;
}

#tokuteikenshin .tokuteikenshin_table {
    width: 40%;
    margin: 0 auto 20px;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
}

#tokuteikenshin .tokuteikenshin_table li {
    font-size: 14px;
    line-height: 1.9em;
    width: 50%;
    text-align: center;
    margin: 0 auto 10px;
    padding: 5px;
    display: table;
    background-color: #CECECE;
}

#tokuteikenshin .tokuteikenshin_table ol {
    font-size: 14px;
    line-height: 1.9em;
    width: 50%;
    text-align: center;
    margin: 0 auto 10px;
    display: table;
    padding: 5px;
}

#tokuteikenshin .tokuteikenshin_table li p,
#tokuteikenshin .tokuteikenshin_table ol p{
    display: table-cell;
    vertical-align: middle;
}



#tokuteikenshin .tokuteikenshin_table li:nth-child(3) {
    background-color: #FFD819
}


@media screen and (max-width: 600px) {

    #tokuteikenshin .tokuteikenshin_title {
        width: 80%;
        margin: 0 auto 20px;
    }
    #tokuteikenshin .tokuteikenshin_txt {
        width: 100%;
    }

    #tokuteikenshin .tokuteikenshin_table {
        width: 80%;
    }

}


/*++++++++++++++++++++++++++
隠れた生活習慣病を発見する検査が受けられます
++++++++++++++++++++++++++*/
#kakureta {
    padding: 0;
    margin: 40px auto;
    position: relative;
    max-width: 900px;
}

#kakureta .kakureta_title {
    font-size: 28px;
    line-height: 1.8em;
    margin: 0 auto 20px;
    text-align: center;
    text-decoration: underline;
    text-decoration-color: #5AC4FF;
    text-underline-offset: 10px;
}

#kakureta .kakureta_txt {
    width: 95%;
    margin: 0 auto 20px;
    font-size: 16px;
    line-height: 1.9em;
}

#kakureta .icon {
    width: 90%;
    margin: 0 auto 20px;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
}

#kakureta .icon li {
    width: 25%;
    margin: 0 auto 10px;
    padding: 0 5px;
}


@media screen and (max-width: 600px) {
    #kakureta .icon li {
        width: 50%;
        margin: 0 auto 10px;
        padding: 0 5px;
    }
}


/*++++++++++++++++++++++++++
早めの気づきで生活習慣病の重症化を予防します
++++++++++++++++++++++++++*/
#hayame {
    max-width: 900px;
    padding: 0;
    margin: 40px auto;
    position: relative;
    max-width: 800px;
}

#hayame .hayame_title {
    font-size: 28px;
    line-height: 1.8em;
    margin: 0 auto 20px;
    text-align: center;
    text-decoration: underline;
    text-decoration-color: #F19B00;
    text-underline-offset: 10px;
}

#hayame .hayame_txt {
    width: 95%;
    margin: 0 auto 20px;
    font-size: 16px;
    line-height: 1.9em;
}
#hayame .hayame_txt2 {
    width: 95%;
    margin: 0 auto 20px;
    font-size: 16px;
    line-height: 1.9em;
    text-align: center;
    font-weight: bold;
}

#hayame .hayame_attention {
    width: 95%;
    margin: 0 auto 20px;
    padding: 10px;
    font-size: 14px;
    line-height: 1.6em;
    background-color: #FFCE00;
}

#hayame .icon {
    width: 90%;
    margin: 0 auto 20px;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
}

#hayame .icon li {
    width: 25%;
    margin: 0 auto 10px;
    padding: 0 5px;
}

@media screen and (max-width: 600px) {
    #hayame .icon li {
        width: 50%;
        margin: 0 auto 10px;
        padding: 0 5px;
    }
    #hayame .hayame_txt2 {
        text-align: left;
    }
}




/*++++++++++++++++++++++++++
脳血管を守る
++++++++++++++++++++++++++*/
#noukekkan {
    max-width: 900px;
    width: 100%;
    padding: 50px 10px;
    margin: 30px auto;
    background-color: #ffffff;
    border-radius: 15px;
}

#noukekkan .noukekkan_title {
    max-width: 500px;
    width: 90%;
    margin: 0 auto 40px;
}

#noukekkan .noukekkan_se_title {
    max-width: 800px;
    width: 100%;
    padding: 5px 0;
    background-color: #3284C7;
    color: #fff;
    margin: 40px auto 20px;
    text-align: center;
    font-size: 20px;
}

#noukekkan .noukekkan_txt {
    width: 55%;
    margin: 0 auto 20px 0;
    font-size: 16px;
    line-height: 1.9em;
}

#noukekkan .graph01 {
    width: 40%;
    margin: 0 auto 20px;
}

#noukekkan .noukekkan_txt2 {
    width: 100%;
    margin: 0 auto 20px 0;
    font-size: 16px;
    line-height: 1.9em;
}

#noukekkan .kenshinukemasho {
    width: 60%;
    margin: 0 auto 20px;
}

#noukekkan .noukekkan_attention1 {
    font-size: 16px;
    color: #1d2088;
    display: block;
    margin: 0 auto 0;
    font-weight: bold;
}

#noukekkan .noukekkan_attention2 {
    font-size: 14px;
    display: block;
    text-indent: -1em;
    padding-left: 1em;
}

#noukekkan .linkbuttom {
    font-size: 20px;
    color: #3284C7;
    border: #3284C7 2px solid;
    border-radius: 30px;
    padding: 5px;
    margin: 10px auto;
    max-width: 400px;
    width: 95%;
    display: block;
    text-align: center;
}


@media screen and (max-width: 600px) {

    #noukekkan .noukekkan_title {
        width: 90%;
        margin: 0 auto 20px;
    }

    #noukekkan .noukekkan_txt {
        width: 100%;
        margin: 0 auto 20px 0;
        font-size: 16px;
        line-height: 1.9em;
    }

    #noukekkan .graph01 {
        width: 100%;
        margin: 0 auto 20px;
    }

    #noukekkan .kenshinukemasho {
        width: 95%;
        margin: 0 auto 20px;
    }

}


/*++++++++++++++++++++++++++
20歳以上の県民、2人に1人が高血圧
++++++++++++++++++++++++++*/
#ketsuatsu {
    max-width: 900px;
    width: 100%;
    padding: 50px 10px;
    margin: 30px auto;
    background-color: #ffffff;
    border-radius: 15px;
}

#ketsuatsu .ketsuatsu_title {
    max-width: 500px;
    width: 90%;
    margin: 0 auto 40px;
}

#ketsuatsu .ketsuatsu_se_title {
    max-width: 800px;
    width: 100%;
    padding: 5px 0;
    background-color: #EC6B54;
    color: #fff;
    margin: 40px auto 20px;
    text-align: center;
    font-size: 20px;
}

#ketsuatsu .ketsuatsu_txt {
    width: 55%;
    margin: 0 auto 20px;
    font-size: 16px;
    line-height: 1.9em;
}

#ketsuatsu .illust01 {
    width: 30%;
    margin: 0 auto 20px;
}

#ketsuatsu .graph02 {
    width: 30%;
    margin: 0 auto 20px;
}

#ketsuatsu .illust02 {
    max-width: 800px;
    width: 50%;
    margin: 0 auto 20px;
}

#ketsuatsu .illust02 {
    max-width: 800px;
    width: 50%;
    margin: 0 auto 20px;
}

#ketsuatsu .illust03 {
    max-width: 800px;
    width: 40%;
    margin: 0 auto 20px;
}



@media screen and (max-width: 600px) {

    #ketsuatsu .ketsuatsu_title {
        width: 90%;
        margin: 0 auto 20px;
    }
    #ketsuatsu .illust01 {
        width: 40%;
        margin: 0 auto 20px;
    }

    #ketsuatsu .graph02 {
        width: 50%;
        margin: 0 auto 20px;
    }

    #ketsuatsu .illust02 {
        width: 90%;
    }

    #ketsuatsu .ketsuatsu_txt {
        width: 100%;
    }

    #ketsuatsu .illust03 {
        width: 70%;
    }

}



/*++++++++++++++++++++++++++
20歳以上の県民、5人1人がメタボ&予備群
++++++++++++++++++++++++++*/
#metabo {
    max-width: 900px;
    width: 100%;
    padding: 50px 10px;
    margin: 30px auto;
    background-color: #ffffff;
    border-radius: 15px;
}

#metabo .metabo_title {
    max-width: 500px;
    width: 90%;
    margin: 0 auto 40px;
}

#metabo .metabo_se_title {
    max-width: 800px;
    width: 100%;
    padding: 5px 0;
    background-color: #B7B322;
    color: #fff;
    margin: 40px auto 20px;
    text-align: center;
    font-size: 20px;
}

#metabo .metabo_txt {
    width: 65%;
    margin: 0 auto 20px;
    font-size: 16px;
    line-height: 1.9em;
}

#metabo .metabo_txt2 {
    margin: 0 auto 20px;
    font-size: 16px;
    line-height: 1.9em;
    text-align: center;
}

#metabo .graph03 {
    width: 30%;
    margin: 0 auto 20px;
}

#metabo .illust04 {
    max-width: 800px;
    width: 70%;
    margin: 0 auto 20px;
}

#metabo .graph04 {
    max-width: 800px;
    width: 60%;
    margin: 0 auto 20px;
}


@media screen and (max-width: 600px) {

    #metabo .metabo_title {
        width: 90%;
        margin: 0 auto 20px;
    }
    #metabo .metabo_txt {
        width: 100%;
    }

    #metabo .graph03 {
        width: 60%;
    }

    #metabo .illust04,
    #metabo .graph04 {
        width: 90%;
    }


}

/*++++++++++++++++++++++++++
アンケート
++++++++++++++++++++++++++*/
#enquete {
    max-width: 900px;
    width: 100%;
    padding: 40px 10px;
    margin: 30px auto;
}
#enquete .enquete_txt1 {
    text-align: center;
    margin: auto;
    font-size: 18px;
    color: #fff;
    margin: 0 auto 10px;
}
#enquete .enquete_txt2 {
    text-align: center;
    margin: auto;
    font-size: 25px;
    font-weight: bold;
    color: #fff;
    margin: 0 auto 30px;
}


#enquete .linkbuttom {
    font-size: 20px;
    color: #000000;
    background-color: #fff;
    border: #ffffff 2px solid;
    border-radius: 30px;
    padding: 5px;
    margin: 10px auto;
    max-width: 400px;
    width: 95%;
    display: block;
    text-align: center;
}





/*++++++++++++++++++++++++++
フッター
++++++++++++++++++++++++++*/
footer {
    padding: 40px 10px;
}

footer .ace_logo {
    margin: 0 auto 10px;
    max-width: 90px;
}

footer .shiawase_logo {
    margin: 0 auto 20px;
    max-width: 155px;
}

footer .footer_txt {
    text-align: center;
    margin: auto;
    font-size: 21px;
    margin: 0 0 10px;
}

footer .footer_txt2 {
    text-align: center;
    margin: auto;
    font-size: 15px;
}

footer .footer_txt3 {
    text-align: center;
    margin: auto;
    font-size: 13px;
}





/*--------------------------------------
    pagetop
---------------------------------------*/
a#btn_top {
    position: fixed;
    right: 40px;
    z-index: 10;
    text-decoration: none;
    color: #ffffff;
    text-align: center;
    display: block;
    width: 60px;
    height: 60px;
    box-sizing: border-box;
    padding: 8px 0 0 0;
    background: #4ab8cbce;
    font-size: 13px;
    border-radius: 40px;
    line-height: 1.2em;
    overflow: auto;
}


a#btn_top a:hover {
    text-decoration: none;
    background: #4ab8cbce;
    filter: alpha(opacity=100);
    -moz-opacity: 1;
    opacity: 1;
}

@media screen and (max-width: 600px) {

    a#btn_top {
        position: fixed;
        right: 10px;
        z-index: 10;
        text-decoration: none;
        color: #ffffff;
        text-align: center;
        display: block;
        width: 60px;
        height: 60px;
        box-sizing: border-box;
        padding: 8px 0 0 0;
        background: #4ab8cbce;
        font-size: 13px;
        border-radius: 40px;
        line-height: 1.2em;
        overflow: auto;
    }


}



/*--------------------------------------
		lightbox
---------------------------------------*/
.lightbox {
    display: none;
    color: #000;
    text-align: center;
    font-family: 'Noto Serif JP', serif;
}