@charset "utf-8";
/*--------------------------------------------------------------*/
/* CSS and Graphics are released under Creative Commons Licence */
/* http://www.webplus.jp/                                       */
/* Copyright (C) Kiyonobu Horita @ WEBPLUS Inc.                 */
/*--------------------------------------------------------------*/

/* ========================================================

　Common Setting

=========================================================== */

body:not(.consul) .page-section {
    border-top: 1px solid rgba(204, 204, 204, 1.0);
}

#breadCrumb + .page-section,
.pager + .page-section {
    border-top: none;
}

article hr {
    height: 5px;
    background-color: rgba(210, 210, 210, 1.0);
    border: none;
}

/* head */
body:not(.policy):not(.work):not(.consul) article h2 {
    margin-bottom: 2.0rem;
    padding: 1.25rem 1.0rem 1.0rem;
    background-color: rgba(70, 170, 55, 0.1);
    border-left: 5px solid rgba(145, 190, 30, 1.0);
    font-size: 2.4rem;
}

body:not(.thanks) article h3 {
    margin-bottom: 2.0rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid rgba(70, 170, 55, 1.0);
    color: rgba(70, 170, 55, 1.0);
    font-weight: 500;
}

body:not(.thanks):not(.work) article h3 {
    font-size: 2.0rem;
}

/* table */
article table {
    width: 100%;
    font-size: 1.6rem;
}

article th {
    color: rgba(0, 0, 0, 1.0);
    font-weight: 400;
}

article td li {
    margin-bottom: 0.5rem;
}

article td em {
    display: block;
    font-weight: 400;
    font-style: normal;
}

article td .att {
    display: block;
    font-size: 1.3rem;
    line-height: 1.8rem;
}

/* dl */
article dt {
    margin-top: 1.0rem;
    color: rgba(0, 0, 0, 1.0);
    font-weight: 400;
}

article dd {
    margin: 0.5rem 0;
}

article dd em {
    color: rgba(0, 0, 0, 1.0);
    font-weight: 400;
    font-style: normal;
}

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

    body:not(.work) article th,
    body:not(.work) article td {
        display: block;
        width: 100%;
    }

    article th {
        padding: 0.75rem 1.0rem 0.5rem;
        background-color: rgba(240, 240, 240, 1.0);
    }

    article td {
        padding: 1.5rem 1.0rem 3.0rem;
    }

    article tr:last-child td {
        padding: 1.5rem 1.0rem 0;
    }

}

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

    article th,
    article td {
        padding: 1.0rem;
        vertical-align: top;
    }

}

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

    article table {
        border-spacing: 0.75rem;
    }

    article th,
    article td {
        padding: 1.5rem;
    }

    article th {
        width: 18.0rem;
    }

}

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

    article th {
        width: 20.0rem;
    }


}

/* IEハック */
@media all and (-ms-high-contrast:none) {

    body:not(.policy):not(.work) article h2 {
        padding: 1.0rem;
    }

}

/* IEハック */
@media only screen and (max-width:767px) and (-ms-high-contrast:none) {

    article th,
    article td {
        padding: 0.5rem 1.0rem;
    }

}

/*　header
----------------------------------------------------------- */
#masthead {
    width: 100%;
    height: 200px;
}

/* ページタイトル */
#masthead h1 {
    margin-left: 1.0rem;
    margin-right: 1.0rem;
    margin-bottom: 5.5rem;
    color: rgba(255, 255, 255, 1.0);
    font-size: 3.0rem;
    font-weight: 700;
    text-shadow: 1px 1px 0 rgba(0, 0, 0, 1.0);
    z-index: 20;
}

.consul #masthead h1 {
    margin-bottom: 1.5rem;
}

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

    #masthead {
        height: 300px;
    }

    #masthead h1 {
        margin-bottom: 8.0rem;
        font-size: 4.0rem;
    }

}

/*　breadCrumb
----------------------------------------------------------- */
#breadCrumb {
    padding: 0.5rem 0;
    background-color: rgba(240, 240, 240, 1.0);
}

#breadCrumb ul {
    margin: 0;
    padding: 0;
}

#breadCrumb li {
    display: inline-block;
    word-wrap: normal;
}

#breadCrumb li::before {
    margin-left: 0.75rem;
    font-family: "Font Awesome 5 Free";
    content: "\f0da";
    font-weight: 700;
}

#breadCrumb li:first-child::before {
    content: none;
}


/* ========================================================

　Policy Section

=========================================================== */

.policy #masthead {
    background: url("../images/eyecatch_policy.jpg") center center no-repeat;
    background-size: cover;
}

/* 背景画像 */
#policy {
    position: relative;
    padding: 5.0rem 0;
    background: url("../images/company/policy.jpg") right top no-repeat;
    background-size: cover;
    color: rgba(255, 255, 255, 1.0);
}

/* 前面のレイヤー */
#policy::before {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-color: rgba(0, 0, 0, 0.5);
    content: ' ';
}

/* 左テキスト部 */
#policy [class^="col-"]:first-child h2 {
    margin-bottom: 4.0rem;
    font-size: 2.4rem;
    font-weight: 500;
    text-align: justify;
    line-height: 3.0rem;
    opacity: 0;
    /* animation */
    -webkit-animation-name: fadeIntext;
    animation-name: fadeIntext;
    -webkit-animation-duration: 2.0s;
    animation-duration: 2.0s;
    -webkit-animation-iteration-count: 1;
    animation-iteration-count: 1;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
    -webkit-animation-direction: normal;
    animation-direction: normal;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
}

/* テキスト各行の時間差 */
#policy [class^="col-"]:first-child h2:nth-child(1) {
    -webkit-animation-delay: 0.5s;
    animation-delay: 0.5s;
}

#policy [class^="col-"]:first-child h2:nth-child(2) {
    -webkit-animation-delay: 1.0s;
    animation-delay: 1.0s;
}

#policy [class^="col-"]:first-child h2:nth-child(3) {
    -webkit-animation-delay: 1.5s;
    animation-delay: 1.5s;
}

@-webkit-keyframes fadeIntext {

    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }

}

@keyframes fadeIntext {

    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }

}

/* 右ベン図部 */
#policy [class^="col-"]:last-child {
    text-align: center;
}

#policy .venn {
    display: inline-block;
    margin: 0 auto;
}

#policy .circle {
    width: 160px;
    height: 160px;
    background-color: rgba(5, 110, 185, 0.5);
    border: 8px solid rgba(255, 255, 255, 0.7);
    border-radius: 50%;
    font-size: 1.8rem;
    font-weight: 700;
    text-align: center;
    line-height: 2.4rem;
}

/* 各サークル位置調整 */
#policy .circle01 {
    margin-left: 65px
}

#policy .circle02 {
    margin-top: -48px;
}

#policy .circle03 {
    margin-top: -160px;
    margin-left: 130px
}

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

    #policy {
        padding: 20.0rem 0;
    }

    #policy [class^="col-"]:first-child h2 {
        font-size: 2.8rem;
        line-height: 3.6rem;
    }

    #policy .circle {
        width: 200px;
        height: 200px;
        border: 10px solid rgba(255, 255, 255, 0.7);
        font-size: 2.2rem;
        line-height: 3.0rem;
    }

    #policy .circle01 {
        margin-left: 84px
    }

    #policy .circle02 {
        margin-top: -55px;
    }

    #policy .circle03 {
        margin-top: -200px;
        margin-left: 168px
    }

}


/* ========================================================

　Outline Section

=========================================================== */

.outline #masthead {
    background: url("../images/eyecatch_outline.jpg") center center no-repeat;
    background-size: cover;
}

#outline td ul {
    margin: 0;
    margin-left: 2.0rem;
    padding: 0;
}

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

    #outline tr:nth-child(2) td br {
        display: none;
    }

}

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

    /* table調整 */
    #outline table {
        border-collapse: separate;
        border-spacing: 0.5rem;
    }

    #outline tr:first-child th,
    #outline tr:first-child td {
        border-top: 1px solid rgba(204, 204, 204, 1.0);
    }

    #outline th {
        width: 15.0rem;
        border-right: 1px solid rgba(204, 204, 204, 1.0);
        border-bottom: 1px solid rgba(204, 204, 204, 1.0);
        text-align: right;
    }

    #outline td {
        border-bottom: 1px dotted rgba(204, 204, 204, 1.0);
    }

    #outline tr:last-child th,
    #outline tr:last-child td {
        border-bottom: 1px solid rgba(204, 204, 204, 1.0);
    }

}

/*　Access
----------------------------------------------------------- */
#access iframe {
    width: 100%;
    height: 200px;
    border: none;
}

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

    #access dd br {
        display: none;
    }

    #access iframe {
        height: 300px;
    }

}

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

    #access iframe {
        height: 360px;
    }

}


/* ========================================================

　Recruit Section

=========================================================== */

.recruit #masthead {
    background: url("../images/eyecatch_recruit.jpg") center center no-repeat;
    background-size: cover;
}

#recruit .row.justify-content-center + .row {
    margin-top: 5.0rem;
}

#recruit p {
    margin: 0;
}

#recruit p:nth-of-type(n+2) {
    margin-top: 1.0rem;
}

#recruit th {
    color: rgba(0, 0, 0, 1.00);
    font-weight: 500;
}

#recruit td .att {
    color: rgba(255, 0, 0, 1.00)
}

#recruit ul.none {
    list-style: square;
}

#recruit li:nth-of-type(n+2) {
    margin-top: 1.0rem;
}

#recruit dt {
    color: rgba(0, 0, 0, 1.00);
    font-weight: 400;
}

#recruit dt:nth-of-type(n+2) {
    margin-top: 2.0rem;
}

#recruit dd em {
    color: rgba(0, 0, 0, 1.00);
    font-weight: 400;
}

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

    /* table調整 */
    #recruit tr:nth-child(even) {
        background-color: rgba(204, 204, 204, 0.1);
    }

    #recruit tr:first-child th,
    #recruit tr:first-child td {
        border-top: 1px solid rgba(204, 204, 204, 0.5);
    }

    #recruit th {
        width: 20.0rem;
        border-right: 1px solid rgba(204, 204, 204, 0.5);
        border-bottom: 1px solid rgba(204, 204, 204, 0.5);
        text-align: right;
    }

    #recruit td {
        border-bottom: 1px solid rgba(204, 204, 204, 0.5);
    }

}


/* ========================================================

　News Section

=========================================================== */

.news #masthead {
    background: url("../images/eyecatch_news.jpg") center center no-repeat;
    background-size: cover;
}

#news .notice {
    clear: both;
    margin-top: 5.0rem;
    padding-bottom: 3.0rem;
    border-bottom: 10px solid rgba(200, 200, 200, 1.0);
}

#news .notice h1 {
    margin-bottom: 2.0rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid rgba(70, 170, 55, 1.0);
    color: rgba(70, 170, 55, 1.0);
}

#news .notice aside {
    margin-bottom: 1.0rem;
    font-weight: 500;
    text-align: right;
}

#news .notice p {
    text-align: justify;
}

#news .notice figure {
    text-align: center;
}

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

    #news .notice {
        margin-top: 10.0rem;
    }

}


/* ========================================================

　Sitemap Section

=========================================================== */

.sitemap #masthead {
    background: url("../images/eyecatch_sitemap.jpg") center center no-repeat;
    background-size: cover;
}

#sitemap dt {
    font-weight: 300;
}

#sitemap dd {
    margin-left: 1.4rem;
}

#sitemap dd ul {
    margin: 0;
    margin-top: 1.0rem;
    margin-bottom: 1.0rem;
    margin-left: 2.0rem;
    padding: 0;
    list-style: none;
}

#sitemap dd::before,
#sitemap dd ul li::before {
    margin-right: 0.5rem;
    font-family: "Font Awesome 5 Free";
    color: rgba(170, 170, 170, 1.0);
    font-weight: 700;
}

#sitemap dd::before {
    content: "\f061";
}

#sitemap dd ul li::before {
    content: "\f054";
}

#reco h4 {
    margin-bottom: 0.5rem;
    color: rgba(0, 0, 0, 1.0);
    font-size: 1.8rem;
}

#reco h4::before {
    margin-right: 0.5rem;
    color: rgba(50, 50, 50, 0.7);
    font-family: "Font Awesome 5 Free";
    content: "\f192";
    font-weight: 700;
}


/* ---- End of file --------------------------------------- */