@charset "UTF-8";

/*----------------------------------*/
/*	ストレスチェック制度の進め方　関連		*/
/*----------------------------------*/

/*タイトル、その他 */
@media print,screen and (min-width: 769px) {

    /*タイトル　*/
    div#title{
	    margin:0px auto 0px auto;
    	padding:0px;
	    max-width:100%;
    }

    div#title img {
          display:block;
        }

    .ov640 {    display: block;    }
    .ud639 {    display: none;    }

    a.document {
        width: 40%;
    }
    span.update {
        padding:0 5px;
        background:url(../img/common/blink_red.gif) no-repeat 50% 50%;
        color:#ffffff;
        font-size:70%;
    }

    /*  トップ */

    div#index div.mhlw_mn {
        position:relative;
        width:90%;
        margin:0 auto;
        padding:1em 0;
        border:1px dotted #cccccc;
        background:#f9f9f9 url(../img/sc-guide/bg_mhlw-mn.png) no-repeat 100% 100%;
        background-size:contain;
        color:#606060;
    }

    div#index div.mhlw_mn > div{
        width:70%;
        margin-left:1em;
    }
    div#index div.mhlw_mn a {
            display:block;
            width:50%;
            margin:0 0 0 auto;
            background:rgba(54,143,54,0.6) url(../img/sc-guide/icon_document.png) no-repeat 10px 50%;
            text-align:center;
            color:#ffffff;
            font-weight:bold;
            text-decoration:none;
            transition:0.2s;
                -moz-transition:0.2s;
                -webkit-transition:0.2s;
                -o-transition:0.2s;
                -ms-transition:0.2s;
        }
            div#index div.mhlw_mn a:hover{
                background-color:rgba(54,143,54,0.2);
                color:#ffffff;
            }

    div#index div.bg_flow {
        background:#ffffff url(../img/sc-guide/bg_flow_01.png) no-repeat 100% 0%;
        background-size:auto 250px;
    }
    div#index a.flow_link {
            display:block;
            width:50%;
            margin:0 0 0 auto;
            padding:5px 0;
            background-color:rgba(54,143,54,0.6);
            text-align:center;
            color:#ffffff;
            font-weight:bold;
            text-decoration:none;
            transition:0.2s;
                -moz-transition:0.2s;
                -webkit-transition:0.2s;
                -o-transition:0.2s;
                -ms-transition:0.2s;
        }
            div#index a.flow_link:hover{
                background-color:rgba(54,143,54,0.2);
                color:#ffffff;
            }

    div#index div.ph_box1 {/*各フェーズ説明*/
        float:left;
        position:relative;
        width:47%;
        min-height:170px;
        margin:10px 5px;
        background:#e9f1e5 url(../img/sc-guide/img_doctor_01.png) no-repeat 100% 100%;
        border-radius:10px;
    }

    div#index div.ph_box2 {/*各フェーズ説明*/
        float:left;
        position:relative;
        width:47%;
        min-height:170px;
        margin:10px 5px;
        background:#e9f1e5 url(../img/sc-guide/img_doctor_02.png) no-repeat 100% 100%;
        border-radius:10px;
    }

    div#index div.exp_box1 {/*そもそも制度とは*/
        float:left;
        position:relative;
        width:31%;
        min-height:100px;
        margin:10px 5px;
        padding:5px 0;
        border:1px solid #368f36;
        text-indent:0.5em;
    }

    /*  フェーズ１   */
    div#phase .bg_01 {
        background:url(../img/sc-guide/bg_phase1_01.png) no-repeat 120% 100%;
    }
    div#phase .bg_02 {
        background:url(../img/sc-guide/bg_phase1_02.png) no-repeat 100% 100%;
    }

    div#phase div.left1 {
        float:left;
        width:40%;
    }
    div#phase div.right1 {
        float:right;
        width:60%;
    }

    /*  フェーズ２   */
    div#phase .bg_03 {
        background: url(../img/sc-guide/bg_phase2_01.jpg) no-repeat 110% 100%;
    }
    div#phase .bg_04 {
        background: url(../img/sc-guide/bg_phase2_02.jpg) no-repeat 100% 100%;
    }
    div#phase .bg_05 {
        background: url(../img/sc-guide/bg_phase2_03.jpg) no-repeat 105% -20px;
    }
    div#phase .bg_06 {
        background: url(../img/sc-guide/bg_phase2_04.jpg) no-repeat 100% 50%;
    }
    div#phase .bg_07 {
        background: url(../img/sc-guide/bg_phase2_05.jpg) no-repeat 100% -20px;
    }

    /*  フェーズ３   */
    div#phase .bg_08 {
        background: url(../img/sc-guide/bg_phase3_01.png) no-repeat 100% -10px;
    }

    /*  フェーズ4   */
    div#phase div.left4 {
        float:left;
        width:60%;
    }
    div#phase div.right4 {
        float:right;
        width:40%;
    }

    /*  フェーズ５   */
    div#phase div.left5 {
        float:left;
        width:60%;
    }
    div#phase div.right5 {
        float:right;
        width:35%;
    }

    /*  ストレスチェックとは   */
    div#introduction .bg_01 {
        background:url(../img/sc-guide/bg_intro_01.jpg) no-repeat 100% 100%;
    }
    div#introduction .bg_02 {
        background:url(../img/sc-guide/bg_intro_02.jpg) no-repeat 105% 100%;
    }
    div#introduction .bg_03 {
        background:url(../img/sc-guide/bg_intro_03.jpg) no-repeat 95% 100%;
    }
    div#introduction .bg_04 {
        background:url(../img/sc-guide/bg_intro_04.jpg) no-repeat 100% -10px;
    }
    div#introduction div.purpose ul {
        width: 70%;
    }
    div#introduction p.wd {
        width: 70%;
    }



}

@media screen and (min-width:640px) and (max-width: 768px) {

    /*タイトル　*/
    div#title{
	    margin:0px auto 0px auto;
    	padding:0px;
	    max-width:100%;
    }

    div#title img {
          display:block;
        }
    .ov640 {    display: block;    }
    .ud639 {    display: none;    }

    a.document {
        width: 60%;
    }


    /*  トップ */

    div#index div.mhlw_mn {
        position:relative;
        width:95%;
        margin:0 auto;
        padding:1em 0;
        border:1px dotted #cccccc;
        background:#f9f9f9 url(../img/sc-guide/bg_mhlw-mn.png) no-repeat 100% 100%;
        background-size:contain;
        color:#606060;
    }

    div#index div.mhlw_mn > div{
        width:70%;
        margin-left:1em;
    }
    div#index div.mhlw_mn a {
            display:block;
            width:60%;
            margin:0 0 0 auto;
            padding-right:1em;
            background:rgba(54,143,54,0.6) url(../img/sc-guide/icon_document.png) no-repeat 10px 50%;
            text-align:right;
            color:#ffffff;
            font-weight:bold;
            text-decoration:none;
            transition:0.2s;
                -moz-transition:0.2s;
                -webkit-transition:0.2s;
                -o-transition:0.2s;
                -ms-transition:0.2s;
        }
            div#index div.mhlw_mn a:hover{
                background-color:rgba(54,143,54,0.2);
                color:#ffffff;
            }

    div#index div.bg_flow {
        background:#ffffff url(../img/sc-guide/bg_flow_01.png) no-repeat 100% 0%;
        background-size:auto 250px;
    }
    div#index a.flow_link {
            display:block;
            width:60%;
            margin:0 0 0 auto;
            padding:5px 0;
            background-color:rgba(54,143,54,0.2);
            text-align:center;
            color:#ffffff;
            font-weight:bold;
            text-decoration:none;
            transition:0.2s;
                -moz-transition:0.2s;
                -webkit-transition:0.2s;
                -o-transition:0.2s;
                -ms-transition:0.2s;
        }
            div#index a.flow_link:hover{
                background-color:rgba(54,143,54,0.2);
                color:#ffffff;
            }

    div#index div.ph_box1 {/*   各フェーズ説明 */
        position:relative;
        width:90%;
        min-height:170px;
        margin:10px auto;
        background:#e9f1e5 url(../img/sc-guide/img_doctor_01.png) no-repeat 100% 100%;
        border-radius:10px;
    }

    div#index div.ph_box2 {/*   各フェーズ説明 */
        position:relative;
        width:90%;
        min-height:170px;
        margin:10px auto;
        background:#e9f1e5 url(../img/sc-guide/img_doctor_02.png) no-repeat 100% 100%;
        border-radius:10px;
    }

    div#index div.exp_box1 {/*  そもそも制度とは    */
        float:left;
        position:relative;
        width:45%;
        min-height:100px;
        margin:10px 5px;
        padding:5px 0;
        border:1px solid #368f36;
        text-indent:0.5em;
    }

    /*フェーズ１*/
    div#phase div.left1 {
        float:none;
    }
    div#phase div.right1 {
        float:none;
    }

}

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

    /*タイトル　*/
    div#title{
	    margin:0px auto 0px auto;
    	padding:0px;
	    max-width:100%;
    }

    div#title img {
          display:block;
        }

    .ov640 {    display: none;    }
    .ud639 {    display: block;    }
        .ud639 a > img {    border:2px solid #0000ff;        }


    /*  トップ */

    div#index div.mhlw_mn {
        position:relative;
        width:95%;
        margin:0 auto;
        padding:1em 0;
        border:1px dotted #cccccc;
        background:#f9f9f9 url(../img/sc-guide/bg_mhlw-mn_2.png) no-repeat 100% 100%;
        background-size:contain;
        color:#606060;
    }

    div#index div.mhlw_mn > div{
        width:90%;
        margin-left:1em;
    }
    div#index div.mhlw_mn a {
            display:block;
            margin:0 0 0 auto;
            background-color:rgba(54,143,54,0.6);
            text-align:center;
            color:#ffffff;
            text-decoration:none;
            transition:0.2s;
                -moz-transition:0.2s;
                -webkit-transition:0.2s;
                -o-transition:0.2s;
                -ms-transition:0.2s;
        }
            div#index div.mhlw_mn a:hover{
                background-color:rgba(54,143,54,0.2);
                color:#ffffff;
            }

    div#index div.bg_flow {
        background:#ffffff url(../img/sc-guide/bg_flow_01.png) no-repeat 100% 100%;
        background-size:auto 250px;
    }
    div#index a.flow_link {
            display:block;
            width:50%;
            margin:0 0 0 auto;
            padding:5px 0;
            background-color:rgba(54,143,54,0.6);
            text-align:center;
            color:#ffffff;
            font-weight:bold;
            text-decoration:none;
            transition:0.2s;
                -moz-transition:0.2s;
                -webkit-transition:0.2s;
                -o-transition:0.2s;
                -ms-transition:0.2s;
        }
            div#index a.flow_link:hover{
                background-color:rgba(54,143,54,0.2);
                color:#ffffff;
            }

    div#index div.ph_box1 {/*   各フェーズ説明 */
        position:relative;
        width:90%;
        min-height:170px;
        margin:10px auto;
        background:#e9f1e5 url(../img/sc-guide/img_doctor_01.png) no-repeat 100% 100%;
        border-radius:10px;
    }

    div#index div.ph_box2 {/*   各フェーズ説明 */
        position:relative;
        width:90%;
        min-height:170px;
        margin:10px auto;
        background:#e9f1e5 url(../img/sc-guide/img_doctor_02.png) no-repeat 100% 100%;
        border-radius:10px;
    }

    div#index div.exp_box1 {/*  そもそも制度とは    */
        position:relative;
        width:80%;
        min-height:100px;
        margin:10px auto;
        padding:5px 0;
        border:1px solid #368f36;
        text-indent:0.5em;
    }

    /*フェーズ１*/
    div#phase div.left1 {
        float:none;
    }
    div#phase div.right1 {
        float:none;
    }

}

/*-----------------------------------------
　共　通
------------------------------------------*/

body {
    background:#e9f1e5;   /*上書き*/
}
div#container {
    background:url(../img/sc-guide/bg_flower.jpg) no-repeat 50% 100%;   /*上書き*/
}

div.content {
    background-color:#ffffff;   /*上書き*/
    border-radius:10px;   /*上書き*/
}

h1.title {
    border:0;/*上書き*/
    color:#2a6e2a;/*上書き*/
}
  

h1.sc-guide {
	margin:10px 0px 20px 0px;
    padding:10px 0px 10px 1em;
	background-color:#e5edf1;
	border-top:3px solid  #2a6e2a;
	color:#2a6e2a;
	font-size:130%;
    font-weight:normal;
}

h2.sc-guide{
	width:95%;
    margin:10px auto;
    padding:3px 0px 3px 1em;
    /*background-color:#f7f7f7;*/
    border-top:1px solid #cccccc;
    border-bottom:1px solid #cccccc;
    font-weight:normal;
	font-size:110%;
    color:#003600;
}
    h2.sc-guide:before{
	    margin-left:-1em;
        content: '';
        border-left:6px solid #2a6e2a;
        border-right:10px solid transparent;
    } 

.label{
    padding:3px 7px;
    background-color:#2a6e2a;
    color:#ffffff;
    border-radius:14px;
}

a.document {
    display:block;
    min-height:44px;
    margin:0 0 0 auto;
    padding-left:50px;
    background:#7db67b url(../img/sc-guide/icon_document.png) no-repeat 10px 50%;
    text-decoration:none;
    color:#ffffff;
}
    a.document:hover {
        background:#c5dec1 url(../img/sc-guide/icon_document.png) no-repeat 10px 50%;
    }   

p.footnote_kome {/* ※印付き脚注コメント    */
    width:90%;
    margin:0 auto;
    padding-left:2em;
    text-indent:-2em;
}

div#footer_sc p.box{/* フッターコメント    */
    margin:1em auto;
    padding-left:6em;
    text-indent:-6em;
    font-size:70%;
    color:#808080;
}


table{
    border-collapse:collapse;
}


/*  トップ */

    div#index h1.ttl{
            margin:0 0 10px 0;
            font-size:190%;
            font-weight:normal;
            color:#2a6e2a;/*上書き*/
            line-height:1.2;
        }

    div#index p.tgt_company {
        background-color:#ff9c00;
        border-radius:10px;
        text-align:center;
        color:#ffffff;
        font-weight:bold;
    }

    div#index div.ph_box1 a,div#index div.ph_box2 a{/*段階を追った説明*/
        display:block;
        width:100%;
        padding:5px 0;
        position:absolute;
        left:0%;
        bottom:10px;
        background-color:rgba(54,143,54,0.6);
        color:#ffffff;
        text-align:center;
        text-decoration:none;
        font-size:120%;
        font-weight:bold;
        transition:0.2s;
            -moz-transition:0.2s;
            -webkit-transition:0.2s;
            -o-transition:0.2s;
            -ms-transition:0.2s;

    }
        div#index div.ph_box1 a:hover, div#index div.ph_box2 a:hover{
            width:100%;
            background-color:rgba(54,143,54,0.2);
            color:#ffffff;
        }


        div#index div.ph_box1 ul, div#index div.ph_box2 ul {
            margin:0.5em 0 0.5em 2em;
            list-style-type:disc;
            font-size:80%;
            color:#748073;
        }



    div#index .exp_bg_01{/*そもそも制度とは*/
        background:#ffffff url(../img/sc-guide/bg_exp_01.png) no-repeat 45% 100%;
    }
    div#index .exp_bg_02{/*そもそも制度とは*/
        background:#ffffff url(../img/sc-guide/bg_exp_02.png) no-repeat 60% 100%;
    }
    div#index .exp_bg_03{/*そもそも制度とは*/
        background:#ffffff url(../img/sc-guide/bg_exp_03.png) no-repeat 60% 100%;
    }

    /*リンク*/
    div#index div.exp_box1 a,div#index div.exp_box1 span{/*そもそも制度とは*/
        display:block;
        width:7em;
        padding:5px 0;
        position:absolute;
        right:0%;
        bottom:5px;
        background-color:rgba(54,143,54,0.6);
        color:#ffffff;
        text-align:center;
        text-decoration:none;
        font-size:100%;
        transition:0.2s;
            -moz-transition:0.2s;
            -webkit-transition:0.2s;
            -o-transition:0.2s;
            -ms-transition:0.2s;

    }/*リンク*/
        div#index div.exp_box1 a:hover,div#index div.exp_box1 span:hover{
            background-color:rgba(54,143,54,0.3);
            color:#ffffff;
        }


/*------------------------------
    ストレスチェックの流れ
-------------------------------*/

    div#flow div.sc_flow {
        border:1px solid #cccccc;
    }
    div#flow div.icons {
        max-width:720px;
        margin:1em auto;
        color:#808080;
    }
    div#flow div.icons table{
        margin:0 auto;
    }
    div#flow div.icons table td{
        padding:5px;
    }
        div#flow div.icons table img {
            vertical-align:middle;
            max-width:82px;
            min-width:60px;
        }


/*------------------------------
    各段階の説明
-------------------------------*/
/*------------------------------
    フェーズ　共通
-------------------------------*/
    div#phase div.express {
        width: 90%;
        margin: 1em auto;
        padding: 1em 0;
        border-radius: 10px;
        background-color:#e5edf1 ;
    }
        div#phase div.express p {
            margin: 0 0 0.5em 1em;
            font-weight:bold;
            color:#606060;
        }
        div#phase div.express ul {
            list-style-type: disc;
            margin: 0 0 0 3em;
        }

    div#phase div.additional {
        width: 90%;
        padding: 1em;
        margin: 1em auto;
        border: 1px dashed #cccccc;
        color: #606060;
    }
        div#phase div.additional span.caption {
            padding: 1px 1em;
            background-color: #808080;
            border-radius: 10px;
            font-size: 80%;
            color: #ffffff;
        }

/*------------------------------
    フェーズ１
-------------------------------*/

    div#phase div.role{
        width:95%;
        margin:0 auto;
        border:1px solid #cccccc;
    }
        div#phase div.role > div {
            display:table;
            width:100%;
            margin:1em auto;
        }
            div#phase div.role > div > div{
                display:table-row;
            }
                div#phase div.role > div > div > div{
                    display:table-cell;
                }
                    div#phase div.role > div > div > div p.person{
                        margin:0.5em 0.5em;
                        padding:0.3em;
                        min-height:3em;
                        background-color:#e5edf1;
                        border-radius:10px;
                        text-align:center;
                        color:#4a5365;
                        font-weight:bold;
                    }
                    div#phase div.role > div > div > div p.task{
                        margin:0.5em;
                        border:2px dotted #cccccc;
                    }

    div#phase div.works {
        width: 90%;
        margin:1em auto;
        padding: 1em 0;
        border-radius: 10px;
        background-color:#e5edf1 ;

    }
    div#phase div.works ul{
        list-style-type: disc;
        margin:0 1em 0 2em;
    }
        div#phase div.works ul li{
            padding:0.5em 0 0.5em 8em;
            text-indent:-8em;
        }
    div#phase div.works p{
        margin:0 1em;
        padding:0 0 0 1em;
        text-indent:-1em;
    }


/*------------------------------
    フェーズ２
-------------------------------*/
    div#phase table.st1 {
        border-collapse:collapse;
    }
        div#phase table.st1 th {
            padding:0.5em;
            border:1px solid #cccccc;
            text-align:left;
            font-weight:normal;
        }
        div#phase table.st1 td {
            padding:0.5em;
            border:1px solid #cccccc;
            vertical-align:top;
        }
    div#phase div.bg_gr_line {
        background:url(../img/sc-guide/squre_gr.png) repeat-y 2em 50%;
    }
    div#phase div.bg_gr_dash {
        background:url(../img/sc-guide/dash_gr.png) repeat-y 2em 50%;
    }
        div#phase div.bg_gr_dash table {
            margin:1em 0 1em 3em;
            border-collapse:collapse;
        }
            div#phase div.bg_gr_dash table th {
                min-width:5em;
                padding:0 0.5em;
                border:1px solid #cccccc;
                text-align:left;
                font-weight:normal;
            }
            div#phase div.bg_gr_dash table td {
                padding:0 0.5em;
                border:1px solid #cccccc;
            }

            div#phase div.bg_gr_dash p.item{
                padding:0 0 0 1em;
                text-indent:-1em;
            }
            div#phase div.bg_gr_dash ul.items {
                margin:0 0 0 2em;
                list-style-type:disc;
            }

    div.tbl_scsho {
        display:table;
        width:80%;
        margin:0 auto;
        border-collapse:collapse;
    }
        div.tbl_scsho > div {
            display:table-row;
        }
        div.tbl_scsho > div > div{
            display: table-cell;
            padding:5px;
            border:1px solid #cccccc;
        }


    div#phase table.st2 {
        border-collapse:collapse;
        width:95%;
        margin:0 auto;
    }
        div#phase table.st2 th {
            min-width:5em;
            padding:0.5em;
            border:1px solid #cccccc;
            text-align:left;
            font-weight:normal;
        }
        div#phase table.st2 td {
            padding:0.5em;
            border:1px solid #cccccc;
            vertical-align:top;
        }
        div#phase table.st2 ul {
            margin:0 0 0 1em;
            list-style-type:disc;
        }
        div#phase table.st2 p.foot {
            text-indent:-1em;
            padding-left:1.5em;
            line-height:1.3;
            font-size:70%;
            color:#808080;
        }


    div#phase div.differ_pc {
        margin:1em auto 0 auto;
        border:1px solid #cccccc;
    }

    div#phase div.differ_sp {
        max-width:400px;
        margin:1em auto;
    }

    div#phase div.tnservice {
        padding-left: 1em;
        padding-right: 1em;
        padding-top: 1em;
        padding-bottom: 87px;
        border: 1px solid #cccccc;
        color: #627662;
        background: url(../img/sc-guide/bg_lnk_1.jpg) no-repeat 99% 98%;
    }
        div#phase div.tnservice a {
            display: block;
            position: absolute;
            bottom: 10px;
            right: 20px;
            width: 4em;
            padding: 5px;
            background-color: #368f36;
            color: #ffffff;
            text-decoration:none;
        }
            div#phase div.tnservice a:hover {
                background-color:#7db67b;
            }

/*------------------------------
    フェーズ３   
-------------------------------*/

    div#phase div.meyasu{
        width:90%;
        margin:0.5em auto;
    }
        div#phase div.meyasu > div{
            display:table;
            width:90%;
            margin:0 auto;
        }
        div#phase div.meyasu > div > div {
            display:table-row;
        }
        div#phase div.meyasu > div > div > div {
            display:table-cell;
        }
        div#phase div.meyasu > div > div > div p.task{
            margin:5px;
            padding:0.5em 0;
            background-color:#e5edf1;
            border-radius:5px;
            text-align:center;
        }



/*------------------------------
    ストレスチェック制度とは
-------------------------------*/

    /*  目的と趣旨    */
    div#introduction div.purpose {
        width: 95%;
        margin: 0 auto;
        padding: 0.5em 0;
        border-radius: 10px;
        background-color: #f7f7f7;
    }
        div#introduction div.purpose ul {
            margin: 1em auto 1em 2em;
            list-style-type: disc;
        }
        div#introduction div.purpose ul li{
            margin: 0.5em 0;
        }

    /*  用語の説明    */
    div#introduction table.word {
        border-collapse:collapse;
        width:95%;
        margin:0.5em auto;
    }
        div#introduction table.word th {
            width:20%;
            padding:0.5em;
            border: 1px solid #cccccc;
            text-align:left;
            vertical-align:middle;
            font-weight:normal;
        }
        div#introduction table.word td {
            width:80%;
            padding:0.5em;
            border: 1px solid #cccccc;
            vertical-align:middle;
        }
            div#introduction table.word td ul {
                list-style-type:disc;
                margin:0 0 0 2em;
            }

/*------------------------------
    更新履歴
-------------------------------*/
    div#index div.history {
        overflow-y:scroll;
        height:5em;
    }
        div#index div.history p.txt{
            text-indent:-6em;
            padding:0 0 0 6em;
            font-size:70%;
            /*color:#7c8f7c;#7c8f7c;*/
        }