@charset "utf-8";
/*----------------------------------------------------
    共通css
----------------------------------------------------*/

dt {
    font-weight: bold;
}

dd {
    position: relative;
    padding: 0 14px;
}

dd:before {
    content: "・";
    left: 0%;
    position: absolute;
}

a {
    word-wrap: break-word;
}

p.spnsr {
    text-align: center;
    font-size: 12px;
}

footer p.spnsr {
    color: #fff;
}

#contents .btn-web2 a {
    padding: 28px 50px;
    background: #2F3437 url(img/arrow_btn_white.png) right 15px center no-repeat;
    background-size: 26px auto;
    text-align: center;
    font-weight: bold;
    color: #fff;
    line-height: 1.3;
    text-decoration: none;
    font-size: 15px;
    font-size: 1.5rem;
    display: block;
    border: solid 3px #646F75;
}

#toc {
    width: 80%;
    margin: 0 auto;
}

#contents p.cat {
    display: block;
    margin-bottom: -15px;
    font-weight: 600;
}

/* oki_20220513 */
.kanren {
    border: 3px solid #e7f2e6;
    padding: 20px 30px 0;
    margin: 30px 0;
    font-size: 14px;
    position: relative;
    box-sizing: border-box;
}

.midasi {
    border-bottom: 2px dotted #f5f5f5;
    font-size: 16px;
    font-weight: bold;
    text-align: center;
    margin-bottom: 15px;
}

.kanren br {
    display: none;
}

.readmore-content {
    position: relative;
    overflow: hidden;
    height: 200px;
}

.readmore-content::before {
    display: block;
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    content: "";
    /*以下お好み グラデーションの色と高さ 高さはreadmoreのheight以下にすること*/
    height: 50px;
    background: -webkit-linear-gradient(top, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.8) 50%, rgba(255, 255, 255, 0.8) 50%, #fff 100%);
    background: linear-gradient(top, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.8) 50%, rgba(255, 255, 255, 0.8) 50%, #fff 100%);
}

/* 続きを読むボタン */
.readmore-label {
    display: table;
    bottom: 5px;
    position: absolute;
    bottom: 5px;
    left: 50%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    margin: 0 auto;
    z-index: 2;
    padding: 0 10px;
    background-color: #316754;
    border-radius: 10px;
    color: #FFF;
    text-align: center;
}

.readmore-label:before {
    content: '続きを読む';
}

.readmore-check {
    display: none;
}

/*チェック時にボタンを非表示*/
.readmore-check:checked~.readmore-label {
    position: static;
    transform: translateX(0);
    -webkit-transform: translateX(0);
    /* 「続きを読む」を押した後、元に戻す必要がない場合は、上のオプションを消してこの1行だけにする */
    /* display: none; */
}

.readmore-check:checked~.readmore-label:before {
    content: '閉じる';
}

/*チェック時に高さを自動に戻す*/
.readmore-check:checked~.readmore-content {
    height: auto;
}

/*チェック時グラデーション等を削除*/
.readmore-check:checked~.readmore-content::before {
    display: none;
}

.img-none dt {
    height: 150px;
}

#pickupArea .pickupWrap .img-none li dt {
    width: auto;
}



/*----------------------------------------------------
    PCサイトcss
----------------------------------------------------*/

@media screen and (min-width: 769px) {

    /*/////////////PC用のCSSをここに作成してください。/////////////*/
    /*/////////////必ず中括弧の中に作成してください。/////////////*/
    p.fbnr a {
        display: none;
    }

    #contents .character-box {
        margin: 25px 0;
        border: 1px solid #dedede;
        border-radius: 10px;
        padding: 15px 15px 20px;
        background: #f5f5f5;
    }

    #contents .character-box:after {
        content: '';
        display: block;
        clear: both;
    }

    #contents .character-right {
        position: relative;
        width: 100px;
        float: right;
        margin-left: 10px;
        margin-bottom: 10px;
    }

    #contents .character-left {
        position: relative;
        width: 100px;
        float: left;
        margin-right: 10px;
        margin-bottom: 10px;
    }

    #contents .character-left .charcter-name {
        text-align: center;
        font-weight: bold;
        position: absolute;
        top: 83px;
        width: 100%;
        padding: 3px 5px;
        font-size: 12px;
        line-height: 1.4;
    }

    #contents .character-right .charcter-name {
        text-align: center;
        font-weight: bold;
        position: absolute;
        top: 83px;
        width: 100%;
        padding: 3px 5px;
        font-size: 12px;
        line-height: 1.4;
    }

    #contents .character-left .charcter-name.name01 {
        background: #d3f0f7;
    }

    #contents .character-right .charcter-name.name01 {
        background: #d3f0f7;
    }

    #contents .character-right .charcter-name.name02 {
        background: #d3f0f7;
    }

    #contents .character-left img {
        float: left;
        width: 100%;
    }

    #contents .character-right img {
        float: right;
        width: 100%;
    }

    form {
        margin: auto;
        padding: 1rem;
        border: 1px solid #316754;
        border-top: 4px solid #316754;
        box-shadow: 1px 1px 1px #f0f0f0;

    }

    label {
        display: inline-block;
        width: 200px;
        margin: auto;
        font-size: 16px;
        font-weight: bold;
    }

    textarea {
        resize: vertical;
        width: 100%;
        height: 8rem;
        border-bottom: 1px solid #e7f2e6;
        font-family: Meiryo UI;
    }

    button {
        display: block;
        background: #4285f4;
        padding: 0.3rem 1.5rem;
        border: none;
        border-radius: 2px;
        font-weight: bold;
        color: #fff;
    }

    button:hover {
        opacity: 0.5;
    }

    /*リンクの位置調整*/
    span.link-t-a {
        position: relative;
        top: -100px;
        /*左の数値を変えると、上下に調整します*/
        display: block;
    }


    .mokuzi {
        background-color: #eeeded;
    }


    .mokuzi p {
        font-size: larger;
        font-weight: bolder;
        color: white;
        text-align: center;
        padding: 10px;
        /* border: solid black; */
        background-color: #316754;
    }

    #contents ol li {
        padding: 2px 0 2px 30px;
        list-style: none;
        position: relative;
        counter-increment: number;
    }



    ol span {
        font-weight: bold;
        background: #fff0c8;
        color: #f57312;
    }

    #contents .btn-web.in a br.sp-li {
        display: none;
    }

    /* oki_20220513 */
    #pickupArea .pickupWrap ul.pickUlBox_right.img-none {
        float: left;
        margin-left: 55px;
    }

}

#contents .btn-web2 {
    text-align: center;
    margin: 20px auto 80px;
    padding: 0;
    width: 450px;
}

#toc {
    border: 2px solid #d7dcdf;
    padding: 15px;
    background: #fff;
    margin-bottom: 2rem;
    font-weight: 500;
}

a.index {
    display: block;
    font-weight: bold;
    text-align: center;
    color: #316754;
    position: relative;
    padding: 15px;
    margin: -15px;
}

a.index::before {
    transform: rotate(90deg);
}

a.index::before {
    transform: rotate(180deg);
}

a.index::before {
    content: "";
    position: absolute;
    top: 50%;
    right: 15px;
    width: 15px;
    height: 2px;
    background: #316754;
    transition: all .3s ease-in-out;

}

a.index.open::after {
    opacity: 0;
}

a.index::after {
    content: "";
    position: absolute;
    top: 50%;
    right: 15px;
    width: 15px;
    height: 2px;
    background: #316754;
    transition: all .2s ease-in-out;
}

#toc::before {
    display: none;
}

a.index {
    display: block;
    font-weight: bold;
    text-align: center;
    color: #316754;
    position: relative;
    padding: 15px;
    margin: -15px;
}

#toc>ol.chapter {
    display: none;
}

a.index::before {
    content: "";
    position: absolute;
    top: 50%;
    right: 15px;
    width: 15px;
    height: 2px;
    /*縦線に*/
    transform: rotate(90deg);
    background: #316754;
    transition: all .3s ease-in-out;
}

a.index::after {
    content: "";
    position: absolute;
    top: 50%;
    right: 15px;
    /*横線*/
    width: 15px;
    height: 2px;
    background: #316754;
    transition: all .2s ease-in-out;
}

a.index.open::before {
    transform: rotate(180deg);
}

a.index.open::after {
    opacity: 0;
}

#toc>ol.chapter {
    margin: 0 !important;
}




/*----------------------------------------------------
    SPサイトcss
----------------------------------------------------*/
@media screen and (max-width: 768px) {
    /*/////////////SP用のCSSをここに作成してください。/////////////*/
    /*/////////////必ず中括弧の中に作成してください。/////////////*/

    #contents .character-box {
        margin: 2rem 0;
        border: 1px solid #dedede;
        border-radius: 10px;
        padding: 0.8rem;
        background: #f5f5f5;
    }

    #contents .character-box:after {
        content: '';
        display: block;
        clear: both;
    }

    #contents .character-left {
        position: relative;
        float: left;
        width: 30%;
        margin: 0 1rem 2rem 0;
    }

    #contents .character-right {
        position: relative;
        float: right;
        width: 30%;
        margin: 0 0 2rem 1rem;
    }

    #contents .character-left .charcter-name {
        font-weight: bold;
        position: absolute;
        top: 83%;
        left: 0px;
        width: 100%;
        text-align: center;
        font-size: 13px;
        line-height: 1.4;
    }

    #contents .character-right .charcter-name {
        font-weight: bold;
        position: absolute;
        top: 83%;
        right: 0px;
        width: 100%;
        font-size: 13px;
        text-align: center;
        line-height: 1.4;
    }

    #contents .character-left .charcter-name.name01 {
        background: #d3f0f7;
    }

    #contents .character-right .charcter-name.name01 {
        background: #d3f0f7;
    }

    #contents .character-right .charcter-name.name02 {
        background: #d3f0f7;
    }

    #contents .character-left img {
        width: 100%;
    }

    #contents .character-right img {
        width: 100%;
    }

    #contents .character-left+.character-txt {
        padding-left: 10px;
    }

    #contents .character-right+.character-txt {
        padding-right: 10px;
    }

    form {
        margin: auto;
        padding: 1rem;
        border: 1px solid #316754;
        border-top: 4px solid #316754;
        box-shadow: 1px 1px 1px #f0f0f0;

    }

    label {
        display: inline-block;
        width: 200px;
        margin: auto;
        font-size: 16px;
        font-weight: bold;
    }

    textarea {
        resize: vertical;
        width: 100%;
        height: 8rem;
        border-bottom: 1px solid #e7f2e6;
        font-family: Meiryo UI;
    }

    button {
        display: block;
        background: #4285f4;
        padding: 0.3rem 1.5rem;
        border: none;
        border-radius: 2px;
        font-weight: bold;
        color: #fff;
    }

    button:hover {
        opacity: 0.5;
    }

    .mokuzi {
        background-color: #eeeded;
    }


    .mokuzi p {
        font-size: larger;
        font-weight: bolder;
        color: white;
        text-align: center;
        padding: 10px;
        /* border: solid black; */
        background-color: #316754;
    }

    #contents ol li {
        padding: 2px 0 2px 30px;
        list-style: none;
        position: relative;
        counter-increment: number;
    }

    #page ul:not(.subList),
    #page ol {
        padding: 30px 32px 30px 30px;
    }

    ol span {
        font-weight: bold;
        background: #fff0c8;
        color: #f57312;
    }

    #contents .btn-web2 {
        text-align: center;
        margin: 20px auto 80px;
        padding: 0;
        width: 90%;
    }

    #contents .btn-web.in a {
        padding: 18px 0px;
        line-height: revert;
        font-size: 13px;
    }

    .btn-internal.gold a {
        font-size: 13px;
        background: #d2c380;
        color: #333;
    }

   p.fbnr a {
    background: #333;
    position: fixed;
    bottom: 3px;
    left: 1px;
    z-index: 1000;
    width: 80%;
    text-align: center;
    padding: 1rem;
    line-height: 1.4;
    background: #f57312 url(https://www.engineeringworks-management.com/wp/wp-content/themes/wp001j/img/arrow_btn_white.png) right 15px center no-repeat;
    background-size: 20px;
    color: #fff;
    border: solid 3px #ff9b32;
    box-shadow: 0px -2px 4px #00000021;
}

    #contents .btn-web.in a {
        line-height: initial;
        font-size: initial;
    }

    #recommendArea .leftBox {
        background: url(https://www.engineeringworks-management.com/wp/wp-content/uploads/bg_recommend_blue.jpg) repeat;
        width: 100%;
        float: none;
        padding: 4%;
    }

    #recommendArea .rightBox {
        background: url(https://www.engineeringworks-management.com/wp/wp-content/uploads/bg_recommend_green.jpg) repeat;
        width: 100%;
        float: none;
        padding: 4%;
        margin: 60px 0 0;
    }

    #recommendArea .leftBox {
        background: url(https://www.engineeringworks-management.com/wp/wp-content/uploads/bg_recommend_blue.jpg) repeat;
        width: 100%;
        float: none;
        padding: 4%;
    }

    #recommendArea .rightBox {
        background: url(https://www.engineeringworks-management.com/wp/wp-content/uploads/bg_recommend_green.jpg) repeat;
        width: 100%;
        float: none;
        padding: 4%;
        margin: 60px 0 0;
    }

    #svBotArea {
        background: url(https://www.engineeringworks-management.com/wp/wp-content/uploads/bg_sv.jpg) no-repeat;
        background-size: cover;
        padding: 40px 4% 10px;
    }

    /* oki_20220513 */
    #page .kanren ul {
        padding: 10px;
    }


    /*20221114*/

    #contents #table01 th {
        display: table-cell;
    }

    #contents #table01 td {
        display: table-cell;

    }

    #contents #table02 th {
        display: table-cell;
    }

    #contents #table02 td {
        display: table-cell;

    }

    #contents #table03 th {
        display: table-cell;
    }

    #contents #table03 td {
        display: table-cell;

    }

	.footer-bnr{
		display:flex;
	}
	.footer-bnr .fbnr{
		width:80%;
	}
	.footer-bnr .btn-web{
		width:20%;
	}

}

/*----------------------------------------------------
    PCサイトcss
----------------------------------------------------*/

@media screen and (min-width: 769px) {
/*/////////////PC用のCSSをここに作成してください。/////////////*/
/*/////////////必ず中括弧の中に作成してください。/////////////*/
#svBotArea .photo .caption {
	text-align: right;
	color: #f0f0f0;
	margin: 0;
}
	
	
	.fbtn {
    display: none;
}

div#page {
    width: 1000px;
}
#superVisArea .addPart03 {
    width: 100%;
}
#svBotArea .wi1100 {width: 1000px;padding: 2rem;}
#index {
    width: 100%;
    margin: 0 auto;
}
.wi1100 {
    width: 100%;
}
#svBotArea .leftBox {
    width: 550px;
    margin: 0;
}
#svBotArea .photo {
    width: 380px;
}
#svBotArea .btnBox {
    width: 400px;
}
#svBotArea {
    padding: 4rem 0;
}
#contents #svBotArea .btnBox .btn-web a {
    width: 89%;
}
#superVisArea .addPart03 .flame {
    width: 300px;
}
#superVisArea .addPart03 .box-body {
    padding: 0 20px 0 0;
}
#superVisArea .addPart03 .box-inr {
    margin-bottom: 0;
}
#contents #superVisArea .addPart03 .btn-web {
    margin: 0rem auto 4rem;
}
.intro {
    padding: 0rem 2rem;
}
div#page {
    width: 1000px;
}
.fbtn {
    display: none;
}
#header .logoImg {
    position: relative;
}
#header .logoImg:before {
    background: #000;
    color: #fff;
    content: "PR";
    display: inline-block;
    font-size: 1.5rem;
    line-height: 1.4;
    margin-right: 1rem;
    padding: 0 1rem;
}
}






/*----------------------------------------------------
    SPサイトcss
----------------------------------------------------*/
@media screen and (max-width: 768px) {
/*/////////////SP用のCSSをここに作成してください。/////////////*/
/*/////////////必ず中括弧の中に作成してください。/////////////*/
#contents .box-wrap .box-body p.btn-web {
    margin: 20px auto;
    width: 95%;
}
#contents .box-wrap_2 .flame.resize_img {
    width: 87%;
    margin: auto;
}
#contents .btn-internal, #contents .btn-web, #contents .btn-tel, #contents .btn-link {
    text-align: center;
    margin: 20px auto;
    padding: 0;
    width: 95%;
}
.fbtn {
    background: #fff;
    width: 100%;
    position: fixed;
    display: block;
    bottom: 0;
    left: 0;
    height: 70px;
    box-shadow: 0px 10px 12px #000;
    z-index: 100;
}
div#page {
    width: auto;
}
#header .logoImg {
    position: relative;
}
#header .logoImg:before {
    background: #000;
    color: #fff;
    content: "PR";
    display: inline-block;
    font-size: 1.5rem;
    line-height: 1.4;
    margin-right: 1rem;
    padding: 0 1rem;
}
}






header .logoBox .greenLabel {
    font-size: 1.8rem;
    padding: 8px 0px;
}

#superVisArea .addPart03:before {
    content: none;
}
#category, #page {
    float: none;
    width: 100%;
    padding: 0 4%;
    margin: 10px auto 50px;
}
#superVisArea {
    position: relative;
    padding: 30px 4% 5px;
    background: #f5f5f5 url(img/bg_supervision_txt_sp.png) no-repeat top 2% right;
}
#contents .btn-web a {
    padding: 20px 30px;
    background-size: 20px auto;
    line-height: 1.3;
    font-size: 1.7rem;
}
.intro {
    font-weight: 500;
    text-align: left;
    border: solid #316754c7;
    border-radius: 10px;
    padding: 0px 5px;
    margin-bottom: inherit;
}
#contents.job .addPart03 .box-body .catch {
    margin-top: 20px;
}

#contents.job #svBotArea .greenLabel {
    width: 85%;
}
#contents.job h2.recruit {
    font-size: 1.6rem;
    font-weight: bold;
    margin: 40px 0 30px;
    line-height: 1.4;
    padding: 20px 20px 18px 20px;
    background: #e7f2e6;
    position: relative;
    border-left: solid 4px #316754;
}

#contents.job div#svBotArea {
    margin: -10px;
}

#contents.job .btn-web a {
    font-size: 1.4rem;
}

#contents.job #svBotArea .leftBox p {
    margin: 20px 0 0px;
}
#index {
    margin: 0 10px;
}
p.catch.center {
    text-align: center;
}
#page-top {
    bottom: 60px;
}
#contents .fbtn .btn-web a {
    margin: 0;
    padding: 10px;
    bottom: 10px;
    z-index: 999;
    position: fixed;
    width: 80%;
    left: 9%;
    height: 50px;
    border: none;
    box-shadow: 5px 5px #964000;
    line-height: 1.2;
    font-size: 14px;
}
#contents .btn-web a {
    box-shadow: 5px 5px #652c03;
    border: none;
    border-radius: 50px;
}


#contents .box-wrap .box-body p.btn-web a {
    box-shadow: 5px 5px #500101;
}
#contents .btn-web a {
    border-radius: 10px;
}