@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+JP:wght@400;500&display=swap');

body {
    font-family: 'ヒラギノ明朝 Pro W3', 'Hiragino Mincho Pro', '游明朝','Yu Mincho', '游明朝体', 'YuMincho', 'Noto Serif JP', 'ＭＳ Ｐ明朝', 'MS PMincho', serif;
    font-size: 12px;
    color: #000;
    line-height: 2.16em;
    letter-spacing: 0.04em;
}

body::before {
    content: '';
    position: fixed;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: #fff;
    z-index: 9999;
    pointer-events: none;
    right: 100%;
    -webkit-transition: right 0.8s cubic-bezier(0.4, 0, 0.2, 1);
    transition: right 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

body::after {
    content: '';
    position: fixed;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: #fff;
    z-index: 9999;
    pointer-events: none;
    left: 100%;
    -webkit-transition: left 0.8s cubic-bezier(0.4, 0, 0.2, 1);
    transition: left 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

body.is-slide::before {
    right: 0;
}

body.is-slide-in::after {
    left: 0;
}


a {
    /*line-height: 2.5em;*/
    position: relative;
    text-decoration: none;
}

a:hover {
    opacity: .5;
    transition: all  1s ease;
}

#global-menu a:not(.facebook):not(.instagram):not(.link-logo),
#footer a:not(.facebook-link):not(.instagram-link):not(.link-logo) {
    opacity: 1;
    position: relative;
    display: inline-block;
    text-decoration: none;
}

#global-menu a:not(.facebook):not(.instagram):not(.link-logo)::after,
#footer a:not(.facebook-link):not(.instagram-link):not(.link-logo)::after {
    position: absolute;
    bottom: -6px;
    left: 0;
    content: '';
    width: 100%;
    height: 1px;
    background: #FFF;
    opacity: 0;
    visibility: hidden;
    transition: .5s;
}
#global-menu a:not(.facebook):not(.instagram):not(.link-logo):hover::after,
#footer a:not(.facebook-link):not(.instagram-link):not(.link-logo):hover::after {
    bottom: 0;
    opacity: 1;
    visibility: visible;
}



.btn-green {
    font-size: inherit;
    color: #fff;
    background-color: #2C8F66;
    letter-spacing: .1em;
    padding: 20px 45px 20px 30px;

    margin-top: 40px;
}

.btn-green:hover {
    opacity: .9;
    color: #fff;
    text-decoration: none;
}

.box-image-horizontal {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
}
.box-image-horizontal div{
    max-width: 70px;
    margin: 0 6px;
}

.box-image-horizontal div img {
    max-width: 100%;
}

.box-sdgs-image div{
    max-width: 70px;
    margin: 0 6px;
}

.table-col2 {}

.table-col2 .table-title {
    font-size: 14px;
    text-align: center;
    padding-bottom: 10px;
    border-bottom: 1px #FF8300 solid;
    margin-bottom: 20px;
}

.table-col2 .table-body {
}

.table-col2 .table-body ul {
    padding-left: .75em;
    margin-bottom: 0;
}

.table-col2 .table-body ul li {
    list-style: none;
}

.table-col2 .table-body ul li::before {
    position: relative;
    left: -1em;
    display: inline-block;
    width: .25em;
    content: '・';
}

.table-col2 .table-body ol {
    position: relative;
    margin: 0;
    padding: 0
}

.table-col2 .table-body ol li  {
    list-style: none;
    list-style-position: outside;
    margin: 0;
    padding-left: 1.25em
}

.table-col2 .table-body ol li span {
    position: absolute;
    left: 0;
    margin: 0
}

.table-col3 {}

.table-col3 .table-title {
    font-size: 14px;
    text-align: center;
    padding-bottom: 10px;
    border-bottom: 1px #FF8300 solid;
    margin-bottom: 20px;
}

.table-col3 .table-body {
}

.img-row img{
    max-width: 95%;
}

.section h1 {
    font-size: 14px;
    letter-spacing: .1em;
    color: #2C8F66;
    margin-bottom: 30px;
}

.section h2 {
    font-size: 24px;
    letter-spacing: .02em;
    line-height: 1.79em;
    margin-bottom: 30px;
}

.section p {
    margin-bottom: unset;
}

#navbar {
    opacity: 1;
    padding: 0;
    height: 75px; /* #へのアンカーで調整するため固定 */
}

:target::before {
    content: '';
    display: block;
    height: 75px; /* ナビバーの高さ */
    margin-top: -75px; /* ナビバーの高さ */
}

.scrolled #navbar,
.opened #navbar {
    background: #FFF;
    background: rgba(255, 255, 255, 0.9);
    transition: 1.5s ;
}

.opened #navbar {
    background: rgba(255, 255, 255, 1);
}

#navbar .container-fluid.nav-header-container {
    /*max-width: 1300px;*/
    min-width: 820px;
    padding-left: 3%;
    padding-right: 3%;
    padding-top: 20px;
    padding-bottom: 20px;
}

#navbar .navbar-brand {
    width: 197px;
    background: url(../img/logo.png) left center no-repeat;
    background-size: contain;
    border: 0;
    text-indent: -99999px;
}

#nav-toggle {
    position: relative;
    height: 32px;
    cursor: pointer;
}

#navbar-page-label {
    position: absolute;
    top: -2px;
    right: 60px;
    width: 150px;
    font-size: 12px;
    height: 35px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    text-shadow: 1px 1px 10px #fff, 1px 1px 10px #fff;
}


#nav-toggle > div {
    position: relative;
    width: 36px;
}
#nav-toggle span {
    width: 100%;
    height: 1px;
    left: 0;
    display: block;
    background: #333;
    position: absolute;
    transition: transform 0.6s ease-in-out, top 0.5s ease;
}
#nav-toggle span:nth-child(1) {
    top: 4px;
}
#nav-toggle span:nth-child(2) {
    top: 14px;
}
#nav-toggle span:nth-child(3) {
    top: 23px;
}

.opened #nav-toggle span:nth-child(1) {
    top: 15px;
    transform: rotate(45deg);
}
.opened #nav-toggle span:nth-child(2) {
    top: 15px;
    width: 0;
    left: 50%;
}
.opened #nav-toggle span:nth-child(3) {
    top: 15px;
    transform: rotate(-45deg);
}

#nav-toggle {
    z-index: 1000;
}

#global-menu {
    position: fixed;
    overflow-y: auto;
    background: #2C7A5C;
    color: #fff;
    top: 75px;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 990;
    text-align: center;
    display: flex;
    visibility: hidden;
    /*flex-direction: column;*/
    justify-content: center;
    align-items: center;
    opacity: 0;
    transition: opacity 0.6s ease, visibility 0.6s ease;

    padding: 0;
}

#global-menu.nav-body-container .row {
    /*max-width: 1170px;*/
    /*min-width: 820px;*/
    width: 100%;
    padding: 0;
}

#global-menu .col {
    /*border: solid 1px;*/
}

#global-menu.nav-body-container ul {
    text-align: left;
    margin-bottom: 0;
}

#global-menu .col-left {
    flex-basis: 65%;
    padding-left: 3%;
    padding-right: 3%;
    padding-bottom: 60px;
    background-image: url(../img/menu-bg-menu.png);
    background-position: left top;
    background-repeat: no-repeat;
    background-size: 240px auto;
}

#global-menu .col-right {
    flex-basis: 35%;
    padding-left: 3%;
    padding-right: 3%;
    padding-bottom: 60px;
    background-color: #2C8F66;
    background-image: url(../img/menu-bg-info.png);
    background-position: left top;
    background-repeat: no-repeat;
    background-size: 234px auto;
    flex-direction: column;
    display: flex;

}

#global-menu a {
    display: inline-block;
    color: #fff;
    text-decoration: none;
}
#global-menu a:hover {}

.opened {
    overflow: hidden;
}
.opened #global-menu {
    visibility: visible;
    opacity: 1;
}

#global-menu ul{
     list-style: none;
}

#global-menu ul li.list-title {
    font-size: 18px;
    letter-spacing: .1em;

    display: flex;
    align-items: center;
    margin-bottom: 15px;
}

#global-menu ul li.list-title::after { /*横線*/
    content: "";
    flex-grow: 1;
    margin: 0 0 0 15px;
    height: 1px;
    background: #fff;
}

#global-menu ul li:not(.list-title) {
    line-height: 1.91em;
    /*padding-left: 1em;*/
    /*background-image: url(../img/mark-list.png);*/
    /*background-repeat: no-repeat;*/
    /*background-position: 0 50%;*/
    /*background-size: 4px auto;*/
    /*display: inline-block;*/

}

#global-menu .col-left ul li:not(.list-title) {
    padding-left: 1em;
    background-image: url(../img/mark-list.png);
    background-repeat: no-repeat;
    background-position: 0 50%;
    background-size: 4px auto;
    display: inline-block;

    margin-left: 25px;
    width: 25%;
}

#global-menu .col-right ul{
    padding-left: 0;
}

#global-menu .col-right .row {
    /*align-items: flex-end;*/
}

#global-menu .col-right .row-1 ul li.list-title {
    margin-bottom: 0;
}

#global-menu .col-right .row-1 ul li:not(.list-title) {
    border-bottom: dotted 1px #FFF;
    padding-top: 15px;
    padding-bottom: 15px;
}

#global-menu .col-right .row-1 ul li:not(.list-title):last-of-type {
    border-bottom: unset;
}

#global-menu .col-right .row-2 {
    text-align: left;
    align-items: flex-end;
    margin-top: auto;
}

#global-menu .col-right .logo-jpn{
    width: 207px;
    margin-bottom: 15px;
}

#global-menu .col-right address {
    margin-bottom: 20px;
}

#global-menu .col-right .instagram-icon:before {
    content: '';
    display: inline-block;
    width: 15px;
    height: 15px;
    background-image: url(../img/icon-insta.png);
    background-size: contain;
    vertical-align: middle;
}

#global-menu .col-right .facebook-icon:before {
    content: '';
    display: inline-block;
    width: 15px;
    height: 15px;
    background-image: url(../img/icon-fb.png);
    background-size: contain;
    vertical-align: middle;
}

#global-menu .col-right a.instagram {
    margin-bottom: 30px;
    margin-right: 10px;
}

#global-menu .col-right .row-2 ul.list-inline {
    margin-bottom: 0;
}

#global-menu .col-right .row-2 li {
    font-size: 10px;
}

#global-menu .col-right .row-2 .list-inline-item:before {
    content: ">";
    margin-right: .5em;
}


#global-menu.nav-body-container .row .col-12:first-of-type {
    margin-top: 60px;
}

#global-menu.nav-body-container .col-left .row .col-12:nth-of-type(n+2) {
    margin-top: 50px;
}

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

    #navbar-page-label {
        display: none;
    }

    #navbar .container-fluid.nav-header-container {
        min-width: unset;
        max-width: unset;
    }

    #global-menu .col-left {
        flex-basis: unset;
        padding-right: unset;
        padding-top: 30px;
        padding-left: 30px;
        background: unset;
    }

    #global-menu .col-left ul li:not(.list-title) {
        width: 95%;
        margin-left: 15px;
    }

    #global-menu.nav-body-container .row .col-12:first-of-type {
        margin-top: unset;
    }

    #global-menu ul {
        padding-left: 0;
    }
}


footer {
    background: #2C8F66;
    color: #FFF;
}

/*footer a {*/
/*    color: #FFF;*/
/*    text-decoration: none;*/
/*}*/

footer a, footer a:hover, footer a:focus {
    color: #FFF;
    text-decoration: none;
}

footer .container-fluid {
    min-width: 820px;
    max-width: 1300px;
    padding: 50px 5%;
}

footer .logo-jpn {
    width: 207px;
    margin-bottom: 15px;
}

footer address {
    margin-bottom: 20px;
}

footer .instagram-link,
footer .facebook-link {
    margin-right: 10px;
    vertical-align: middle;
}

.external-link-icon:before {
    content: '';
    display: inline-block;
    width: 12px;
    height: 12px;
    background-image: url(../img/mark-link.png);
    background-size: contain;
    vertical-align: text-bottom;
    margin-left: 5px;
}

footer .instagram-icon:before {
    content: '';
    display: inline-block;
    width: 15px;
    height: 15px;
    background-image: url(../img/icon-insta.png);
    background-size: contain;
    vertical-align: middle;
}

footer .facebook-icon:before {
    content: '';
    display: inline-block;
    width: 15px;
    height: 15px;
    background-image: url(../img/icon-fb.png);
    background-size: contain;
    vertical-align: middle;
}


footer .row-1 {
    margin-bottom: 50px;
}

footer .row-1 ul{
    border-left: solid 1px #FFF;
    padding: 0 0 0 20px;
    list-style: none;
}

footer .row-1 ul li.list-title {
    font-size: 15px;
}

footer .row-1 ul li:not(.list-title) {
    line-height: 1.91em;
    padding-left: 1em;
    background-image: url(../img/mark-list.png);
    background-repeat: no-repeat;
    background-position: 0 50%;
    background-size: 4px auto;
}

footer .row-2 ul.list-inline {
    margin-bottom: 0;
}

footer .row-2 li {
    font-size: 10px;
}

footer .row-2 .list-inline-item:before {
    content: ">";
    margin-right: .5em;
}

footer .row-2 .copy-right {
    font-size: 8px;
    margin-bottom: 0;
}

@media screen and (max-width: 768px) {
    footer {
        text-align: center;
    }

    footer .container-fluid {
        min-width: unset;
        max-width: unset;
        padding: 25px 5%;
    }
}

/*TOP Slide*/
#index-top-slide .container-fluid{
    height: 100vh;
    display: flex;
    justify-content: flex-end;
    align-items: center;
}

#index-top-slide .container-fluid .row {
    margin-right: 10.8%;
}

#index-top-slide .container-fluid .row div {
    text-align: right;
    text-shadow: 1px 1px 10px #fff, 1px 1px 10px #fff;
}

#index-top-slide h1 {
    font-size: 2.8rem;
    margin-right: 10px;
}

#index-top-slide .description p {
    font-size: 16px;
    line-height: 2em;
}

#index-top-slide .carousel-indicators {
    margin-bottom: 50px;
}

#index-top-slide .carousel-indicators li {
    width: 10px;
    height: 10px;
    border-radius: 100%;
    background-color: unset;
    margin-right: 15px;
    border: solid 1px #FFF;
}

#index-top-slide .carousel-indicators li.active {
    background-color: #FFF;
    opacity: .8;
}

#index-service-content .container-fluid .row {
    /*height: 100vh;*/
}

#index-service-content {
    background-image: url(../img/index-service-bg.png);
    background-position: right 7% top 0;
    background-size: contain;
    background-repeat: no-repeat;
}

#index-service-content .container-fluid {
    max-width: 1024px;
    min-width: 820px;
    padding-right: 4%;
    padding-left: 4%;
    padding-top: 140px;
    padding-bottom: 270px;
}

#index-service-content .middle-border:after {
    background-color: #000;
    content: "";
    display: inline-block;
    height: 1px;
    position: relative;
    vertical-align: super;
    width: 30px;
    margin-left: .5em;
}

#index-company-content {
    text-align: center;
    /*height: 100vh;*/
    /*padding-top: 380px;*/
    padding-bottom: 135px;

    /*background-image: url(../img/index-company-bg.png);*/
    /*background-position: top center;*/
    /*background-size: contain;*/
    /*background-repeat: no-repeat;*/
}

#index-company-content .container-fluid.container-company {
    display: flex;
    justify-content: center;
    align-items: center;
}

#index-company-content .col .img-wrapper {
    /*min-width: 1020px; */ /*TODO:保留*/
    /*max-width: 1300px;*/ /*TODO:保留*/
    height: auto;
    /*border: solid 1px grey;*/
}


#index-SDGs-content .container-fluid {
    /*height: 100vh;*/
    padding-top: 145px;
    padding-bottom: 300px;

    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
}

#index-recruit-content .container-fluid {
    max-width: 1024px;
    min-width: 820px;
    padding-right: 4%;
    padding-left: 4%;
}

#index-recruit-content .container-fluid .row {
    /*height: 100vh;*/
    padding-top: 200px;
    padding-bottom: 200px;
}

@media screen and (max-width: 768px) {
    .content-col {
        margin-left: 25px;
        margin-right: 25px;
        padding: 0;
    }

    #index-top-slide .container-fluid {
        justify-content: center;
        height: calc(var(--vh, 1vh) * 100); /*スマホ全画面用にJSで変数vhを設定*/
    }

    #index-top-slide .container-fluid .row {
        margin-left: unset;
        margin-right: unset;
        align-self: flex-start;
        margin-top: 25vh;
    }

    #index-top-slide .container-fluid .row div {
        text-align: center;
    }

    #index-top-slide h1 {
        font-size: 2rem;
        margin-right: unset;
    }

    #index-top-slide .description p {
        font-size: 14px;
    }

    #index-service-content {
        background: unset;
    }

    #index-service-content .container-fluid {
        max-width: unset;
        min-width: unset;
        text-align: center;
        padding-top: 0;
        padding-bottom: 140px;
    }

    h1.content-header {
        text-indent: 100%;
        white-space: nowrap;
        overflow: hidden;
        margin-left: calc(((100vw - 100%) / 2) * -1);
        margin-right: calc(((100vw - 100%) / 2) * -1);
        height: 150px;
        background-image: url(../img/service-header.jpg);
        background-position: center bottom;
        background-repeat: no-repeat;
        /*background-size: cover;*/
        background-size: 200% auto;
    }

    #index-service-content h1.content-header {
        background-image: url(../img/service-header.jpg);
    }

    #index-service-content .description {
        text-align: left;
    }

    #index-company-content {
        padding-bottom: 140px;
    }

    #index-company-content h1.content-header {
        background-image: url(../img/company-header.jpg);
    }

    #index-company-content .description {
        text-align: left;
    }

    #index-SDGs-content h1.content-header {
        background-image: url(../img/sdgs-header.jpg);
    }

    #index-SDGs-content .description {
        text-align: left;
    }

    #index-SDGs-content .container-fluid {
        padding-top: 0;
        padding-bottom: 140px;
    }

    #index-recruit-content .container-fluid {
        max-width: unset;
        min-width: unset;
    }

    #index-recruit-content .container-fluid {
        text-align: center;
    }

    #index-recruit-content h1.content-header {
        background-image: url(../img/index-recruit-bg.jpg);
        background-position: right; /*middle指定できない*/
    }

    #index-recruit-content .description {
        text-align: left;
    }

    #index-recruit-content .container-fluid .row {
        padding-top: 0;
        padding-bottom: 140px;
    }
}

.image-header {
    height: 450px;
    margin-bottom: 100px;
}

.image-header .image-header-container {
    max-width: 1300px;
    min-width: 820px;
    padding-left: 3%;
    padding-right: 3%;
    padding-top: 20px;
    padding-bottom: 20px;
}

.image-header h1 {
    display: none;
}



.default-container {
    max-width: 1024px;
    min-width: 820px;
    padding-left: 7%;
    padding-right: 7%;

    margin-bottom: 200px;
}

.wide-container {
    max-width: 1024px;
    min-width: 820px;
    padding-left: 4%;
    padding-right: 4%;

    margin-bottom: 200px;
}


.full-width-container {

}

.title-head-green {
    display: inline-block;
    background-color: #2C8F66;
    margin: 0;
    font-size: 12px;
    letter-spacing: .1em;
    color: #fff;
    padding: 10px 30px;
    margin-bottom: 30px;
}

.default-container h2 {
    font-size: 24px;
    letter-spacing: .02em;
    line-height: 1.79em;
    margin-bottom: 30px;
}

.default-container .description {
    margin-bottom: 60px;
}

.infographic-image img{
    width: 95%;
}

.default-container .col-md-4{
}

.default-container .col-md-4:nth-of-type(3n+1):not(:last-child) {
    /*margin-bottom: 40px;*/
}

.default-container .col-md-3:nth-of-type(4n+1):not(:last-child) {
    /*margin-bottom: 40px;*/
}

.box {
}

.box .box-title {
    position:relative;
    font-size: 14px;
    text-align: center;
    /*border-bottom: 1px #FF8300 solid;*/
    /*width: 90px;*/
    margin-left: auto;
    margin-right: auto;
    padding-bottom: 8px;
}

.box .box-title:before {
    content: "";
    display: block;
    border-bottom: 1px #FF8300 solid;
    width: 90px;
    position: absolute;
    bottom: 0;
    left: calc(50% - 45px);
}

.box .box-image-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
}

.box .box-image {
    width: 80%;
    height: auto;
}
.box .box-body {
    line-height: 1.75em;
}

.box-horizontal {
    display: flex;
    padding: 20px 0;
    border-bottom: dotted 1px #000;
}
.box-horizontal .box-image-wrapper {
    flex-shrink: 0;
}

.box-horizontal .box-image-wrapper img {
    height: 100px;
    width: auto;
}

.box-horizontal .box-right {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-left: 20px;
    width: 100%;
}

.box-horizontal .box-title {
    color: #2C8F66;
}

.box-vehicle {

}

.box-vehicle .box-image {
    width: 100%;
}

.box-vehicle .box-body {
    line-height: 1.75em;
    margin-top: 10px;
}

.box-vehicle .box-body small {
    display: block;
    font-size: 10px;
}

.box-office {
    padding: 0;
    margin-bottom: 40px;
    border-bottom: unset;
}

.box-office .box-image-wrapper {
    width: 45%;
}

.box-office .box-image-wrapper img {
    width: 100%;
    height: auto;
}

.box-office .box-right {
    padding-left: 4%;
    justify-content: start;
}

.box-office .box-title {
    font-size: unset;
}

.box-office .box-body {
    font-size: 11px;
    line-height: 1.63em;
}

.btn-filter.focus, .btn-filter:focus,
.btn-more.focus, .btn-more:focus{
    outline: unset;
    box-shadow: unset;
}

.btn-filter {
    font-size: 21px;
    opacity: .3;
}

.btn-filter.active {
    color: #000;
    opacity: 1;
    position: relative;
}

.btn-filter.active:after {
    content: "";
    display: block;
    border-bottom: 1px #FF8300 solid;
    width: 50px;
    position: relative;
    margin-right: auto;
    margin-left: auto;
}

.default-container .row {
justify-content: space-between;
}

.default-container .row.justify-none-row {
justify-content: unset;
}

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

    .image-header .image-header-container {
        max-width: unset;
        min-width: unset;
        padding-left: unset;
        padding-right: unset;
        padding-top: unset;
        padding-bottom: unset;
        overflow: hidden;
        min-height: 220px;
        background-position: center bottom;
        background-repeat: no-repeat;
        background-size: cover;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }

    #page-company .image-header .image-header-container {
        background-image: url(../img/company-header.jpg);
    }

    .image-header {
        height: unset;
        margin-bottom: 50px;
    }

    .image-header h1 {
        display: flex;
        margin: unset;
        font-size: 20px;
        color: #FFF;
        text-shadow: 1px 1px 10px #000, 1px 1px 10px #000;
    }

    .default-container {
        max-width: unset;
        min-width: unset;
        margin-bottom: 100px;
        padding-right: 7%;
        padding-left: 7%;
    }

    .wide-container {
        max-width: unset;
        min-width: unset;
        margin-bottom: 100px;
        padding-left: 4%;
        padding-right: 4%;
    }

    .default-container .description {
        margin-bottom: 40px;
        text-align: left;
    }
    
.default-container .description ul {
        width: 90% !important;
    }

    .table-col2 > div:nth-of-type(n+2){
        margin-top: 30px;
    }

    .table-col3 > div:nth-of-type(n+2){
        margin-top: 30px;
    }


    .btn-filter {
        padding: .375rem .25rem;
    }
}

.box-greeting {
text-align: center;
}

.box-greeting .box-image-wrapper {
height: unset;
}

.box-greeting .box-image-wrapper.image-headshot {
margin-bottom: 15px;
}

.box-greeting .box-body {
margin-bottom: 15px;
}

.box-greeting .image-sign .box-image {
width: 50%;
}

/* -----------------------------------------------
* Timeline
* --------------------------------------------- */

.timeline-wrapper h3 {
    font-size: inherit;
    width: 45px;
    height: 45px;
    border-radius: 50%;
    background-color: silver;
    color: #FFF;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin: auto;
}

.timeline {
    list-style: none;
    padding: 10px 0;
    position: relative;
    font-weight: 300;
    margin-bottom: 0;
}

.timeline.empty-timeline {
    padding: 0 0;
}

.timeline:before { /*沿革の縦棒*/
    top: 0;
    bottom: 0;
    position: absolute;
    content:" ";
    width: 1px;
    background: #808080;
    left: 50%;
    margin-left: -1.5px;
}
.timeline > li {
    margin-bottom: 30px;
    position: relative;
    width: 100%;
    float: left;
    clear: left;
}

.timeline > li:last-child {
    margin-bottom: 10px;
}

.timeline.empty-timeline > li:last-child {
    margin-bottom: 0;
}

.timeline > li:before, .timeline > li:after {
    content:" ";
    display: table;
}
.timeline > li:after {
    clear: both;
}
.timeline > li:before, .timeline > li:after {
    content:" ";
    display: table;
}
.timeline > li:after {
    clear: both;
}
.timeline > li > .timeline-panel {
    position: relative;
    border-bottom: dotted 1px #CFCFCF;
    width: 50%;
    display: flex;
}

.timeline > li > .timeline-badge {
    color: #ffffff;
    width: 24px;
    height: 24px;
    text-align: center;
    position: absolute;
    /*top: 16px;*/
    right: calc(50% - 12px);
    bottom: -12px;
    z-index: 100;
}
.timeline > li.timeline-inverted > .timeline-panel {
    left: 50%;
}


.timeline-title {
    margin-top: 0;
    color: inherit;
}
.timeline-heading {
    font-size: 11px;
    color: #2C8F66;
    display: inline-block;
    vertical-align: top;
    margin-right: 5px;
    width: 70px;
}

.timeline-inverted .timeline-heading {
    margin-left: 20px;
}

.timeline-body {
    display: inline-block;
}

.timeline-body > p, .timeline-body > ul {
    /*padding: 10px 15px;*/
    margin-bottom: 0;
}

.timeline-body > p {
    font-size: 10px;
}

.timeline i.fa.fa-circle {
    color: #808080;
}

.timeline > li.timeline-inverted {
    float: right;
    clear: right;
    /*margin-top: 15px;*/
}

.timeline > li.timeline-inverted > .timeline-badge {
    /*left: -12px;*/
}
.no-float {
    float: none !important;
}


#timeline-more-btn {
    font-size: 12px;
    margin-top: 10px;
}


@media (max-width: 767px) {
    ul.timeline:before {
        display: none;
    }

    ul.timeline {
        padding: 0;
        border-left: .5px solid #CFCFCF;
    }

    .timeline.empty-timeline {
        padding: 10px 0;
    }

    ul.timeline > li {
        margin-bottom: 30px;
        position: relative;
        width:100%;
        float: left;
        clear: left;
    }

    ul.timeline.empty-timeline > li {
        margin-bottom: 0;
    }

    ul.timeline > li > .timeline-panel {
        /*width: calc(100% - 65px);*/
        /*width: -moz-calc(100% - 65px);*/
        /*width: -webkit-calc(100% - 65px);*/
    }
    ul.timeline > li > .timeline-badge {
        /*left: 28px;*/
        /*margin-left: 0;*/
        /*top: 16px;*/
        /*display: none;*/

        right: unset;
        left: -12px;
    }
    ul.timeline > li > .timeline-panel {
        /*float: right;*/
        background: unset;
        width: 100%;
        right: 0;
        padding: 0;
        display: flex;
    }

    .timeline > li.timeline-inverted {
        margin-top: unset;
    }

    .timeline > li.timeline-inverted > .timeline-panel {
        float: unset;
        left: 0;
        padding: 0;
        display: flex;
    }

    .timeline > li.timeline-inverted > .timeline-badge {
        /*left: 28px;*/
    }

    .timeline > li:last-child {
        margin-bottom: unset;
    }

    .timeline > li:nth-child(2) {
        margin-top: unset;
    }

    .timeline-heading {
        margin-left: 20px;
        min-width: 70px;
    }

    .timeline-body > p {
        /*color: #1A1A1A;*/
        /*text-align: center;*/
    }

    .timeline-wrapper h3 {
        margin: unset;
        right: 22.5px;
        position: relative;
    }
}

.btn-more-container {
    text-align: center;
    display: flex;
    justify-content: center;
}

.btn-more {
    font-weight: bold;
    color: #808080;
    padding: 0;
    background-color: transparent;
}

.btn-more:before {
    content: 'LESS';
    margin-right: 0;
}

.btn-more.collapsed:before {
    content: 'MORE';
    margin-right: 0;
}

/* -----------------------------------------------
 * サービス
 * --------------------------------------------- */

#page-service .default-container .col-md-4 {
    max-width: 27%;
    padding: 0;
}

#page-service #kyouhai .default-container .col-md-4:nth-of-type(n+4) {
    margin-top: 40px;
}

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

    #page-service #kyouhai .default-container .col-md-4:nth-of-type(n+4) {
        margin-top: 0;
    }

    #page-service .image-header .image-header-container {
        background-image: url(../img/service-header.jpg);
    }

    #page-service .default-container .col-md-4 {
        max-width: unset;
        margin-bottom: 40px;
        padding-right: 3%;
        padding-left: 3%;
    }

    #page-service .box .box-image-wrapper {
        margin-bottom: 15px;
    }

}

/* -----------------------------------------------
 * 企業情報
 * --------------------------------------------- */

#page-company .title-head-green {
    margin-bottom: 60px;
}

#page-company .syaze {
    font-size: 36px;
    letter-spacing: .02em;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 60px;
}

#page-company .syaze small {
    margin-right: 25px;
    font-size: 14px;
}

#page-company .table-col2 .table-body {
    line-height: unset;
}

#page-company #gaiyou dl {
}

#page-company #gaiyou dt {
    font-size: 11px;
    color: #2C8F66;
    width: 110px;
    float: left;
    line-height: 1.64em;
}

#page-company #gaiyou dd {
    font-size: 11px;
    line-height: 1.64em;
    padding-bottom: 10px;
    margin-bottom: 30px;

    padding-left: 110px;
    border-bottom: 1px dotted #CFCFCF;
}

#page-company #gaiyou dd a {
    color: unset;
    text-decoration: none;
}

#page-company #gaiyou dd:after {
    content: '';
    display: block;
    clear: both;
}

#page-company #gaiyou .col-md-12 dt {
    width: 110px;

}

#page-company #gaiyou .col-md-12 dd {
    margin-bottom: 0;
}

#page-company #gaiyou .default-container dd .col-md-4 {
    max-width: unset;
}

#page-company #jigyousyo .btn-filter-wrapper {
    margin-bottom: 60px;
}

#page-company #syaryou .syaryou-row > div.col-md-3:nth-of-type(n+5) {
    margin-top: 40px;
}


@media screen and (max-width: 768px) {
    #page-company .syaze small {
        margin-right: 0;
    }

    #page-company .syaze {
        font-size: 28px;
        margin-bottom: 30px;
    }

    #page-company .title-head-green {
        margin-bottom: 30px;
    }

    #page-company #rinen h2 {
        display: block;
    }
    #page-company #rinen h2 small {
        display: block;
    }

    #page-company #syaryou .syaryou-row > div.col-6:nth-of-type(n+3) {
        margin-top: 40px;
    }
}

/* -----------------------------------------------
 * SDGs
 * --------------------------------------------- */

#page-sdgs #sengen .default-container h2 {
    margin-bottom: 60px;
}

#page-sdgs #sengen .sdgs-description {
    margin-bottom: 30px;
}
#page-sdgs #sengen .box-sdgs-image {
    margin-bottom: 60px;
}

#page-sdgs #torikumi  .img-sdgs4marks-wrapper {
    margin-bottom: 60px;
    width: 50%;
    margin-left: auto;
    margin-right: auto;
}

#page-sdgs #torikumi .table-col2 .table-body {
    line-height: 1.75em;
}

#page-sdgs #management .title-head-green {
    margin-bottom: 60px;
}

#page-sdgs #management .table-col2 {
    margin-bottom: 80px;
}

#page-sdgs #management .table-col2 .table-title {
    font-size: 18px;
}

#page-sdgs #management .default-container .col-md-4 {
}

#page-sdgs h3.header-orange {
    font-size: unset;
    color: #FF8300;
}

#page-sdgs #keikaku .default-container h2 {
    margin-bottom: 60px;
}

#page-sdgs #keikaku .planning-period {
    margin-bottom: 30px;
}

@media screen and (max-width: 768px){
    #page-sdgs .image-header .image-header-container {
        background-image: url(../img/sdgs-header.jpg);
    }

    #page-sdgs #sengen .default-container h2 {
        margin-bottom: 30px;
    }

    #page-sdgs #sengen .sdgs-description {
        text-align: left;
    }
    #page-sdgs #sengen .box-sdgs-image div {
        max-width: 21%;
    }
    #page-sdgs #sengen .box-sdgs-image div:nth-of-type(n+5) {
        margin-top: 15px;
    }

    #page-sdgs #torikumi  .img-sdgs4marks-wrapper {
        width: unset;
        margin-bottom: 30px;
    }

    #page-sdgs #management .title-head-green {
        margin-bottom: 30px;
    }

    #page-sdgs #management .table-col2 {
        margin-bottom: 30px;
    }

    #page-sdgs .box-color {
        padding-left: 30px;
        padding-right: 30px;
    }

    #page-sdgs .box-color:nth-of-type(n+1) {
        margin-top: 15px;
    }

    #page-sdgs .box-image-right {
        display:flex;
        flex-direction: row;
        justify-content: space-between;
        border-bottom: dotted 1px #CFCFCF;
        padding-bottom: 15px;
    }

    #page-sdgs .box-image-right .box-title {
        font-size: 24px;
    }

    #page-sdgs .box-image-right .box-image-wrapper {
        width: 15%;
    }

    #page-sdgs .box-image-right .box-image {
        width: 100%;
    }

    #page-sdgs  .planning-period {
        font-size: 18px;
    }
}

/* -----------------------------------------------
 * お知らせ
 * --------------------------------------------- */

#page-news .box-news .item-title {
    font-size: 18px;
    color: #2C8F66;
    padding-bottom: 10px;
    border-bottom: solid 1px #CFCFCF;
}

#page-news .box-news .item-body > ul {
    list-style: none;
    padding-left: 1em;
}

#page-news .box-news .item-body > ul li{
    padding: 15px;
    border-bottom: 1px dotted #CFCFCF;
}

#page-news .box-news .item-body > ul li .date-label{
    display: inline-block;
    margin-right: 2em;
}

#page-news .box-news .item-body > ul li .text {
    display: inline-block;

}

@media screen and (max-width: 768px) {
    #page-news .image-header .image-header-container {
        background-image: url(../img/news-header.jpg);
    }

    #page-news .box-news .item-title {
        text-align: center;
    }

    #page-news .box-news .item-body > ul li .date-label{
        display: block;
        margin-right:0;
    }
}

/* -----------------------------------------------
 * Privacy
 * --------------------------------------------- */

#page-privacy .box-privacy .item-title,
#page-terms .box-privacy .item-title {
    font-size: 18px;
    color: #2C8F66;
    padding-bottom: 10px;
    border-bottom: solid 1px #CFCFCF;
}

#page-privacy .box-privacy:nth-of-type(n+2),
#page-terms .box-privacy:nth-of-type(n+2) {
    margin-top: 40px;
}

@media screen and (max-width: 768px) {
    #page-privacy .image-header .image-header-container {
        background-image: url(../img/privacy-header.jpg);
    }

    #page-terms .image-header .image-header-container {
        background-image: url(../img/terms-header.jpg);
    }

    #page-privacy .box-privacy .item-title,
    #page-terms .box-privacy .item-title {
        text-align: center;
    }
}


/* -----------------------------------------------
 * お問い合わせ
 * --------------------------------------------- */


#page-contact .description,
#page-contact-personal .description {
    margin-bottom: 30px;
}

#page-contact .form-control,
#page-contact-personal .form-control {
    border: 1px solid #e6e6e6;
    background-color: #e6e6e6;
}

#page-contact .form-group small,
#page-contact-personal .form-control small{
    font-size: 10px;
    letter-spacing: 0;
    display: inline-block;
    padding-left: 3px;
    padding-right: 3px;
    background-color: #C1272D;
    color: #ffffff;
    margin-left: 5px;
    line-height: 1.75em;
}

.form-select.is-default,
#page-contact .form-control::placeholder,
#page-contact-personal .form-control::placeholder {
    opacity: .8;
}

#page-contact .form-control[readonly] {
    background-color: unset;
    opacity: 1;
    border: none;
}

#page-contact .form-control[readonly]::placeholder {
    font-size: 0;
}

#page-contact select.form-control[readonly] {
    -webkit-appearance: none;/* ベンダープレフィックス(Google Chrome、Safari用) */
    -moz-appearance: none; /* ベンダープレフィックス(Firefox用) */
    appearance: none; /* 標準のスタイルを無効にする */
}

#page-contact .description.confirm,
#page-contact .description.info,
#page-contact .description.error {
    font-size: 16px;
    font-weight: bold;
}

#page-contact .description.error {
    color: red;
}

@media screen and (max-width: 768px) {
    #page-contact .image-header .image-header-container,
    #page-contact-personal .image-header .image-header-container {
        background-image: url(../img/contact-header.jpg);
    }

    #page-contact .description {
        text-align: left;
    }
}

/* -----------------------------------------------
 * Animation AOLの拡張アニメーション定義
 * --------------------------------------------- */

[data-aos="lead-anime"] { /* fade-rightと同じ*/
    opacity: 0;
    transform: translate3d(-100px, 0, 0)
}

[data-aos="lead-anime"].aos-animate {
    opacity: 1;
    transform: translateZ(0);
}

@media screen and (max-width: 768px) {
    [data-aos="lead-anime"]{ /* fade-upと同じ */
        opacity: 0;
        transform: translate3d(0, 100px, 0);
    }
}