@charset "UTF-8";
/* CSS Document */
/*---------------------

SDGs

---------------------*/
#sdgs .mainimg{
    text-align: center;
    margin-bottom: 80px;
    padding: 0 40px;
}
#sdgs .item1 .inner p:first-of-type{
    margin-bottom: 15px;
}
#sdgs .item2{
    background: #F5FAFF;
}
#sdgs .item2 .inner{
    background: #fff;
    padding: 50px;
    justify-content: space-between;
    align-items: center;
}
#sdgs .item2 .inner .txt{
    width: 72%;
}
#sdgs .item2 .inner .img{
    width: 26%;
}
#sdgs .item2 .inner .img img{
    max-width: 400px;
    width: 100%;
    box-sizing: border-box;
}
#sdgs .item3{
    background: #005AAD;
}
#sdgs .item3 .inner{
    justify-content: space-between;
    align-items: flex-start;
}
#sdgs .item3 .inner p{
    font-size: 1.8rem;
}
#sdgs .item3 .ttlarea{
    width: 30%;
}
#sdgs .item3 .ttlarea p{
    font-size: 1.6rem;
}
#sdgs .item3 .txt{
    width:65%;
}
.sdgbox li{
    margin-bottom: 6px;
    font-size: 1.8rem;
    font-weight: 500;
    display: flex;
    align-items: center;
}
.sdgbox li::before{
    content: "\f219";
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    color: #005AAD;
    font-size: 50%;
    margin-right: 8px;
}
#sdgs h3{
    font-size: 3rem;
    display: flex;
    color: #000;
    line-height: 1;
    font-weight: 500;
    align-items: center;
}
#sdgs h3::before{
    content: "";
    width: 40px;
    height: 1px;
    background: #005AAD;
    margin-right: 10px;
}
#sdgs .policy{
    margin:40px 0 100px;
}
#sdgs .policy ul li{
    color: #005AAD;
    display: flex;
    align-items: center;
    font-size: 1.8rem;
    padding: 30px 6px;
    border-top: solid 1px #005AAD;
    font-weight: 500;
}
#sdgs .policy ul li p:first-child{
    width: 30%;
}
#sdgs .policy ul li:last-of-type{
    border-bottom: solid 1px #005AAD;
}
#sdgs h4{
    font-size: 2.4rem;
    line-height: 1.6;
}
.sdgtable th{
    background: #fff;
    color: #005AAD;
    vertical-align: middle;
}
.sdgtable .bluebg th{
    background: #F5FAFF;
    font-size: 1.6rem;
    color: #000;
}
.sdgtable tr th,
.sdgtable tr td{
    width: 40%;
    border-right:#9BC2E5 solid 1px;
    border-bottom: #9BC2E5 solid 1px;
}
.sdgtable tr:first-of-type th,
.sdgtable tr:first-of-type td{
    border-top: #9BC2E5 solid 1px;
}
.sdgtable tr th:first-of-type{
    width: 20%;
    border-left: #9BC2E5 solid 1px;
}
.sdgtable tr td img{
    max-width: 100px;
    width: 100%;
    margin-right: 10px;
}
.sdgtable tr td p{
    margin-bottom: 15px;
    line-height: 1.6;
    font-weight: 600;
    font-size: 1.6rem;
}
/*---------------------

代表挨拶

---------------------*/
#message .inner{
    justify-content: space-between;
}
#message .img{
    width: 20%;
}
#message .txt{
    width: 76%;
    font-size: 1.6rem;
}
#message .name{
    font-size: 2.2rem;
    text-align: right;
    margin-top: 50px;
    color: #005AAD;
    font-weight: 600;
}
#sdgs .item4{
    overflow: hidden;
}
#sdgs .sasunal{
    position: relative;
}
#sdgs .sasunal .ilust{
    position: absolute;
    right: -14%;
   bottom: -190px;
    max-width: 60%;
}
/*---------------------

会社概要

---------------------*/
#company .btnlist li{
        margin-bottom: 16px;
    margin-right: 2%;
    width: 32%;
}
#company .btnlist li:nth-child(3n){
    margin-right: 0;
}
.btnlist li.message a{
    background: url("../images/company/btn-bg1.jpg")no-repeat;
    background-size: cover;
    background-position: right;
}
.btnlist li.sdgs a{
    background: url("../images/company/btn-bg2.jpg")no-repeat;
    background-size: cover;
}
.btnlist li.history a{
    background: url("../images/company/btn-bg3.jpg")no-repeat;
    background-size: cover;
}
.btnlist li.acsess a{
    background: url("../images/company/btn-bg4.jpg")no-repeat;
    background-size: cover;
}
.btnlist li.facility a{
    background: url("../images/company/btn-bg5.jpg")no-repeat;
    background-size: cover;
}
.btnlist li.news a{
    background: url("../images/company/btn-bg6.jpg")no-repeat;
    background-size: cover;
}
.btnlist li.profile a{
    background: url("../images/company/btn-bg7.jpg")no-repeat;
    background-size: cover;
}
#company .item1{
    background: url("../images/company/sicle-bg.png")repeat;
    background-size: 15px;
}
#company .item2 .inner{
    justify-content: space-between;
}
#company .item2 .inner .txt{
    width: 58%;
}
#company .item2 .inner .img{
    width: 40%;
}
#company .sanpou{
    background: #F0F8FF;
    border-left: 2px solid #005AAD;
    text-align: center;
    padding: 30px 15px;
    font-weight: 600;
    margin-top: 50px;
}
#company .sanpou ul{
    display: flex;
    justify-content: center;
}
#company .sanpou ul li{
    margin: 0 3px;
    font-weight: 600;
    font-size: 2rem;
}
#company .sanpou p{
    font-weight: 600;
    font-size: 3rem;
    margin-bottom: 10px;
    line-height: 1;
}
#company .item3{
    background: url("../images/company/visionbg.jpg")no-repeat;
    background-size: cover;
    background-position: center;
}
#company .item3 li{
    background: rgba(255,255,255,0.7);
    padding: 14px 20px;
    line-height: 1.4;
    font-size: 2rem;
    color: #005AAD;
    margin-bottom: 20px;
    font-weight: 600;
    border-bottom: 2px solid #005AAD;
}
#company .item3 li:last-of-type{
    margin-bottom: 0;
}
#company h3{
    font-size: 3rem;
    display: flex;
    color: #000;
    line-height: 1;
    font-weight: 500;
    align-items: center;
}
#company h3::before{
    content: "";
    width: 40px;
    height: 1px;
    background: #005AAD;
    margin-right: 10px;
}
#company .item4{
    background: #F5FAFF;
}
#company .item4 .inner.flex{
    justify-content: space-between;
    margin-bottom: 60px;
}
#company .item4 .inner.flex .txt{
    width: 44%;
}
#company .item4 .inner.flex .img{
    width: 54%;
}
#company .policy{
    margin-top: 40px;
}
#company .policy ul li{
    color: #005AAD;
    font-size: 1.8rem;
    padding: 30px 6px;
    border-top: solid 1px #005AAD;
    font-weight: 500;
}
#company .policy ul li:last-of-type{
    border-bottom: solid 1px #005AAD;
}
#company .policy ul li .otherpolicy li{
    font-size: 1.4rem;
    padding: 0;
    color: #000;
    padding: 0;
    border: none;
    font-weight: 400;
}
#company .policy ul li .otherpolicy{
    padding: 20px 0 0 30px;
}
.subttlarea{
    margin-bottom: 40px;
}
#company .name{
    text-align: right;
    margin-top: 40px;
    line-height: 2;
}
.companybox{
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}
.companybox dt{
    width: 20%;
    color: #005AAD;
    font-weight: 500;
}
.companybox dd{
    width: 80%;
}
.companybox dt,
.companybox dd{
    border-bottom: solid 1px #AFAFAF;
    padding: 30px 0 30px 20px;
    box-sizing: border-box;
    font-size: 1.6rem;
}

/*---------------------

沿革

---------------------*/
.timeline {
  list-style: none;
    
    margin-bottom: 60px;
}
.timeline > li {
    display: flex;
    justify-content: space-between;
}
.timeline-date {
    width: 18%;
    font-weight: 600;
    font-size: 2.6rem;
    line-height: 1.4;
    text-align: right;
    padding-right: 60px;
}
.timeline-content {
    width: 82%;
    border-left: 1px #005AAD solid;
    padding:8px 0 60px 70px;
    position: relative;
}
.timeline-content .img{
    margin-top: 30px;
}
#history .img.flex{
    justify-content: flex-start;
    display: flex;
}
#history .img.flex p{
    max-width: 48%;
}
#history .img.flex span{
    display: block;
    text-align: center;
    margin-top: 10px;
    font-weight: 600;
}
#history .img.flex.last{
    justify-content: center;
}
#history .img.flex p:first-child{
    margin-right: 15px;
}
.timeline-content:before {
    content: '';
    width: 12px;
    height: 12px;
    background: #fff;
    position: absolute;
    left: -12px;
    border:solid 5px #005AAD;
    top: 13px;
    border-radius: 100%;
}



/*---------------------

設備概要

---------------------*/

#facility section:nth-child(even){
    background: #F8F8F8;
}
#facility .menubox{
    justify-content: center;
}
#facility .menubox li{
    width: 30%;
}
#facility h3{
    font-size: 3rem;
    display: flex;
    line-height: 1;
    align-items: center;
}
#facility h3::before{
    content: "";
    width: 40px;
    height: 1px;
    background: #005AAD;
    margin-right: 10px;
}
#facility .ttlarea p{
    padding-top: 20px;
}
#facility .box h4{
    margin-bottom: 30px;
    font-size: 1.8rem;
}
#facility .box{
    margin-bottom: 60px;
}
#facility .box:last-of-type{
    margin-bottom: 0;
}
#facility small{
    text-align: right;
    margin-top: 30px;
    display: block;
}
#facility #ninsyo .item{
    display: flex;
    justify-content: space-around;
}
#facility #ninsyo .item img{
    width: 22%;
    max-width: 100%;
    border: solid 1px #D3D3D3;
    box-sizing: border-box;
}

/*---------------------

テーブル装飾

---------------------*/
.facilitybox{
    width: 100%;
}
.facilitybox th{
    color: #005AAD;
    font-weight: 500;
    font-size: 1.5rem;
    background: #F5FAFF;
    width: 12%;
}
.facilitybox td{
    width: 38%;
    background: #fff;
}
.facilitybox th,
.facilitybox td{
    padding: 20px 15px;
    border: 1px #9BC2E5 solid;
}
.facilitybox li{
    position: relative;
    padding-left: 15px;
}
.facilitybox li::before{
    position: absolute;
    top:6px;
    left: 0;
    content: "⚫︎";
    font-size: 60%;
    color: #005AAD;
}
.facilitybox .flex-p{
    display: flex;
    justify-content: space-between;
}
/*---------------------

アクセス

---------------------*/
#access .map{
    background:#F5FAFF;
    text-align: center;
    border-radius: 44px;
    margin-bottom: 80px;
    padding: 50px 10%;
}
#access .map img{
    max-width: 456px;
    width: 100%;
}
.mapbox li{
    justify-content: space-between;
    border-top: #9BC2E5 solid 1px;
    padding: 40px;
    position: relative;
}
.mapbox li:last-of-type{
    border-bottom: #9BC2E5 solid 1px;
}
.mapbox li h3{
    width: 15%;
    color: #005AAD;
    font-size: 2.6rem;
}
.mapbox li .txt{
    width: 80%;
}
.mapbox li .btnarea{
    position: absolute;
    right: 40px;
    bottom:40px;
    width: 260px;
}
.mapbox li .btn{
    border:solid 1px #005AAD; 
    border-radius: 100px;
    line-height: 1;
    position: relative;
}
.mapbox li .btn::before{
    display: none;
}
.mapbox li .btn::after{
    position: absolute;
    right: 20px;
    top: 37%;
    content: "\f124";
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    background: none;
    width: auto;
    height: auto;
    bottom: auto;
}




@media screen and (max-width: 1024px){
    #company .item2 .inner .txt,
    #company .item2 .inner .img,
    #company .item4 .inner.flex .txt,
    #company .item4 .inner.flex .img{
        width: 100%;
    }
    #company .item2 .inner .img{
        text-align: center;
    }
    #company .item2 .inner .img{
        margin-top: 50px;
    }
    #company .item4 .inner.flex .img{
        text-align: center;
        margin-top: 50px;
    }
    #company .item2 .inner .img img,
    #company .item4 .inner.flex .img img{
        max-width: 500px;
        width: 100%;
        padding: 0 10px;
        box-sizing: border-box;
    }
    #company .sanpou{
        margin: 50px 0;
    }
    #message .inner{
        justify-content: space-between;
    }
    #message .img,
    #message .txt{
        width: 100%;
    }
    #message .img{
        text-align: center;
        margin-bottom: 30px;
    }
    #message .img img{
        width: 100%;
        max-width: 200px;
        padding:0 15px;
        box-sizing: border-box;
    }
    #sdgs .item2 .inner .txt,
    #sdgs .item2 .inner .img{
        width: 100%;
    }
    #sdgs .item2 .inner .img{
        margin-top: 30px;
        text-align: center;
    }
    #sdgs .item3 .ttlarea{
        width: 100%;
        text-align: left;
    }
    #sdgs .item3 .txt{
        width: 100%;
    }
    .mapbox li h3{
        width: 100%;
    }
    .mapbox li .txt{
        width: 100%;
    }
    .mapbox li .btnarea{
        position: relative;
        right: auto;
        bottom: auto;
        width: 100%;
    }
    
}
@media screen and (max-width: 769px){
    #facility .menubox{
        display: flex;
    }
    #facility .menubox li{
        width: 47%;
        margin: 0 4px 10px;
    }
    #facility h3{
        font-size: 1.8rem;
    }
    #facility h3::before{
        width: 20px;
        margin-right: 8px;
    }
    #facility .box h4{
        font-size: 1.6rem;
        margin-bottom: 20px;
    }
    .facilitybox tr{
        display: flex;
        flex-wrap: wrap;
    }
    .facilitybox{
        border-bottom: 1px solid #9BC2E5;
    }
    .facilitybox th, .facilitybox td{
        box-sizing: border-box;
        border-bottom: none;
    }
    .facilitybox th{
        width: 30%;
        border-right: none;
    }
    .facilitybox td{
        width: 70%;
    }
    .facilitybox li{
        padding-left: 11px;
    }
    .facilitybox li::before{
        
    }
    #company h3{
        font-size: 1.8rem;
    }
    #company h3::before{
        width: 20px;
        margin-right: 8px;
    }
    #sdgs h4{
        font-size: 1.7rem;
    }
    #sdgs h3{
        font-size: 1.8rem;
    }
    #sdgs h3::before{
        width: 20px;
        margin-right: 8px;
    }
    #company .item3{
        background: url("../images/company/visionbg_sp.jpg")no-repeat;
        background-size: cover;
        background-position: center;
    }
    .subttlarea{
        margin-bottom: 20px;
    }
    #sdgs .mainimg{
        padding: 0 10%;
    }
    #sdgs .item2 .inner{
        padding: 30px 15px;
    }
    #sdgs .item2 .inner .img{
        padding: 0 15%;
    }
    .sdgtable{
        width: 200%;
    }
    .tablescroll{
        width: 100%;
        overflow-y: scroll;
    }
    #sdgs .sasunal .ilust{
        position: absolute;
        right: -14%;
       bottom: -140px;
        max-width: 60%;
    }
    #company .sanpou p{
        font-size: 2.2rem;
    }
    #company .sanpou ul li{
        font-size: 1.8rem;
    }
}
@media screen and (max-width: 500px){
    #sdgs .sasunal .ilust{
        position: absolute;
        right: -14%;
       bottom: -100px;
        max-width: 60%;
    }
}
@media screen and (max-width: 425px){
    .timeline-date{
        letter-spacing: .01em;
        width: 20%;
        font-size: 1.8rem;
        padding-right: 20px;
        padding-bottom: 30px;
    }
    .timeline-content:before {
        width: 8px;
        height: 8px;
        left: -7px;
        border: solid 3px #005AAD;
        top: 8px;
    }
    .timeline-content {
        width: 80%;
        padding: 0px 0 30px 20px;
    }
    .timeline-content .img{
        margin-top: 15px;
    }
    #history .img.flex p:first-child{
        margin-right: 5px;
    }
    #history .img.flex span{
        margin-top: 5px;
        font-size: 3vw;
    }
    .timeline{
        margin-bottom: 30px;
    }
    #company .sanpou{
        margin: 30px 0;
        padding: 15px 0;
    }
    #company .sanpou ul li{
        margin: 0 4px;
        font-size: 3.8vw;
    }
    #company .item2 .inner .img{
        margin-top:30px;
    }
    #company .item3 li{
        font-size: 1.5rem;
        padding: 10px;
        margin-bottom: 10px;
    }
    #company .item4 .inner.flex .img{
        margin-top: 30px;
    }
    #company .item4 .inner.flex{
        margin-bottom: 40px;
    }
    #company .policy ul li{
        padding: 20px 5px;
        font-size: 1.6rem;
        line-height: 1.6;
    }
    #company .policy ul li .otherpolicy{
        padding: 10px 0 0;
    }
    #company .name{
        margin-top: 20px;
    }
    .companybox dt, .companybox dd{
        font-size: 1.4rem;
        padding: 20px 0 20px 5px;
        line-height: 1.6;
    }
    .companybox dt{
        width: 25%;
    }
    .companybox dd{
        width: 75%;
    }
    #message .txt{
        font-size: 1.6rem;
    }
    #message .name{
        margin-top: 30px;
        font-size: 1.8rem;
    }
    #sdgs .policy ul li{
        padding: 20px 5px;
        font-size: 1.6rem;
        line-height: 1.6;
    }
    #sdgs .sasunal .ilust{
        max-width: 70%;
        bottom: -120px;
    }
    .sdgtable tr td p{
        font-size: 1.3rem;
        margin-bottom: 5px;
    }
    .sdgtable tr th, .sdgtable tr td{
        padding: 10px 10px 15px;
    }
    .sdgtable .bluebg th{
        font-size: 1.4rem;
    }
    .sdgtable tr td img{
        margin-right: 6px;
        width: 44%;
    }
    #sdgs .mainimg{
        margin-bottom: 50px;
    }
    #access .map{
        padding: 25px 10%;
        margin-bottom:40px;
    }
    .mapbox li{
        padding: 30px 5px;
    }
    .mapbox li h3{
        font-size: 2.2rem;
        line-height: 1;
        margin-bottom: 15px;
    }
    #company .btnlist li{
        width: 48%;
        margin: 0 1% 2%;
    }
    #facility #ninsyo .item{
        flex-wrap: wrap;
    }
    #facility #ninsyo .item img{
        width: 45%;
        margin-bottom: 15px;
    }
    #facility .ttlarea p{
        padding-top: 10px;
        font-size: 1.3rem;
    }

    

    
}
@media screen and (max-width: 330px){
    .facilitybox th, .facilitybox td{
        padding: 10px 5px;
    }
    #sdgs .policy ul li{
        font-size: 1.5rem;
    }
    
}