@charset "UTF-8";


.cont_about section{position: relative;}
.commitment .cont ul{border-top: 2px dotted #e4e4e4;}
.commitment .cont ul li{ border-bottom: 2px dotted #e4e4e4;position: relative;}
.commitment .cont ul li p{font-family: "YuGothic", "Hiragino Kaku Gothic ProN","Hiragino Sans",sans-serif;}
.commitment .cont ul li strong{background: #c2a400;color: #fff;text-align: center;display: inline-block;font-style: italic;font-weight: bold;}
.commitment .cont ul li strong span{margin-left: 10px;}
.commitment h2,.promise h2{color: #333;font-weight: bold;position: relative;text-align: center;}
.commitment h2 strong,.promise h2 strong{font-size: 34px;color: #c2a400;font-weight: bold;}
.commitment h2::before,.promise h2::before{content: "";display: block;width: 62px;height: 53px;background: url(../../images/bg_h3_title_left.png) no-repeat;
background-size: contain;position: absolute;bottom: 0;left: -13px;
}
.commitment h2::after,.promise h2::after{content: "";display: block;width: 62px;height: 53px;background: url(../../images/bg_h3_title_right.png) no-repeat;
    background-size: contain;position: absolute;bottom: 0;right: -10px;
}
.commitment .cont div > p{font-weight: bold;}


.environment,.staff{background: #f7fae9;background: -webkit-linear-gradient(left,  #f7fae9 0%,#fbf7e5 100%);
    background: linear-gradient(to right,  #f7fae9 0%,#fbf7e5 100%);position: relative;}

.environment .cont,.staff .wrapper .cont{background: #fff;}

.environment .cont ul{counter-reset: count 0;}
.environment .cont ul li{ border-top: 2px dotted #e4e4e4;}
.environment .cont ul li:first-of-type{border-top: none;}
.environment .cont ul li h3{font-weight: bold;}
.environment .cont ul li h3 span.num{display: block;color: #64b26c;}
.environment .cont ul li h3 span.num::after{ counter-increment: count;content: counter(count,decimal-leading-zero) " ";margin-left: 5px;}
.environment .cont ul li p{font-family: "YuGothic", "Hiragino Kaku Gothic ProN","Hiragino Sans",sans-serif;}
.environment .cont ul li p a{text-decoration: underline;color: #778273;}
.environment .images{display: flex;}
.environment .images p{width: 50%;}


.promise ul{display: flex;justify-content: space-between;max-width: 1040px;margin: 0 auto;}
.promise ul li{width: 33.333%;}
.promise ul li .box{width: 100%;position: relative;}
.promise ul li .box >div{border: 1px solid #dcdcdc;text-align: center;padding: 4px;}
.promise ul li .box div strong{font-weight: bold;text-align: center;display: block;position: relative;color: #c2a400;padding-left: 14px;
    background: -webkit-linear-gradient(left,  #f7fae9 0%,#fbf7e5 100%);background: linear-gradient(to right,  #f7fae9 0%,#fbf7e5 100%);
}
.promise ul li .box div strong span{margin-right: 10px;position: relative;}
.promise ul li .box div strong span::before{content: "";width: 27px;height: 31px;display: inline-block;background: url(../img/icon_promise.png) no-repeat;
position: absolute;left: -34px;top: -4px;
}
.promise ul li .box div span.text{text-align: center;color: #5d6d58;font-style: italic;font-weight: bold;display: block;width: 100%;}

.staff h3{font-weight: bold;}
.staff .area_text span{line-height: 1;display: block;}
.staff .position{color: #c2a400;}
.staff .area_text p,.staff figcaption{font-family: "YuGothic", "Hiragino Kaku Gothic ProN","Hiragino Sans",sans-serif;}
.staff figure span{display: block;width: 100%;margin-bottom: 10px;}
.staff ul li{ border-top: 2px dotted #e4e4e4;}
.staff ul li:first-of-type{border-top: none;}

.company h2,.history h2{color: #2ca453;font-weight: bold;}
.company h2::after,.history h2::after{
    content: "";display: block;width: 100%;height: 2px;background: -webkit-linear-gradient(left,  #2ca453 0%,#2ca453 59%,#86c255 100%);
    background: linear-gradient(to right,  #2ca453 0%,#2ca453 59%,#86c255 100%);
}
.cont table th,.cont table td{padding:12px 10px;border-bottom: 2px dotted #e4e4e4;font-family: "YuGothic", "Hiragino Kaku Gothic ProN","Hiragino Sans",sans-serif;}
.company table th{text-align: center;position: relative;}
.company table th::after{content: "";width: 1px;height: calc(100% - 40px);background: #e2e2e2;display: block;
    position: absolute;top: 20px;right: -1px;
}
.cont table th{font-weight: bold;}



@media screen and (max-width: 600px) {
    .environment .images{display: block;}
    .environment .images p{width: 100%;}
}
@media screen and (max-width:767px) {
    .commitment h2::before,.promise h2::before{width: 31px;height: 26.5px;bottom: 6px;left: -12px;}
    .commitment h2::after,.promise h2::after{width: 31px;height: 26.5px;bottom: 6px;right: -10px;}

    .commitment .wrapper{padding-top: 30px;padding-bottom: 50px;}
    .commitment h2,.promise h2{font-size: 20px;margin: 0 auto 0;}
    .commitment h2{max-width: 230px;}
    .commitment h2 strong, .promise h2 strong{font-size: 28px;}
    .commitment .cont{padding-top: 10px;}
    .commitment .cont ul li{padding: 14px 5px 10px;}
    .commitment .cont ul li strong{width: 130px;font-size: 14px;line-height: 30px;-webkit-border-radius: 15px;border-radius: 15px;margin-bottom: 8px;}
    .commitment .cont ul li p{font-size: 14px;}
    .commitment .cont div > p{font-size: 16px;margin-top: 15px;text-align: left;}

    .environment .wrapper{padding-top: 60px;padding-bottom: 50px;}
    .environment .come_title_h2 h2 span{top:-30px;max-width: 238px;}
    .environment .cont{padding: 10px 15px;}
    .environment .cont ul li{padding: 15px 0;}
    .environment .cont ul li p{font-size: 14px;padding-top: 10px;}
    .environment .cont ul li h3{font-size: 18px;line-height: 1;}
    .environment .cont ul li h3 span.num{font-size: 14px;margin-bottom: 9px;}

    .promise .wrapper{padding-top: 30px;padding-bottom: 50px;}
    .promise h2{max-width: 270px;}

    .cont_about .promise ul{display: block;}
    .cont_about .promise ul li{width: 80%;margin: 10px auto;}


    .staff .wrapper{padding-top: 60px;padding-bottom: 40px;}
    .staff .come_title_h2 h2 span{top: -36px;max-width: 128px;}
    .staff .wrapper .cont{padding: 0 15px;}
    .staff ul{padding: 5px 0;}
    .staff ul li .box{display: block;padding: 15px 0;}
    .staff figure span{max-width: 250px;margin: 0 auto;}
    .staff figcaption{font-size: 12.5px;margin-top: 10px;}
    .staff .area_text{margin-top: 20px;}
    .staff h3{margin-bottom: 10px;}
    .staff .area_text .name{font-size: 19px;margin-top: 7px;}
    .staff .area_text p{font-size: 14px;}
    .cont_about .promise ul li .box div strong {font-size: 20px;}
    .cont_about .promise ul li .box div > span{font-size: 120%;padding: 8px 0 10px;}

    .company h2,.history h2{font-size: 20px;}
    .company .wrapper{padding-top: 30px;padding-bottom: 20px;}
    .company table th{width: 100px;vertical-align: top;}

    .history .wrapper{padding-bottom: 30px;}
    .history table th,.history table td{display: block;width: 100%;}
    .history .cont table th{border-bottom: none;padding-bottom: 0;}
    .history .cont table td{padding-top: 5px;}

}

@media screen and (min-width:768px) {
    .cont_about{padding: 48px 0 50px;}

    .commitment .wrapper{padding-bottom: 100px;}
    .commitment .cont{line-height: 36px;font-size: 16px;}
    .commitment h2{margin: 0 auto 20px;max-width: 395px;}
    .commitment h2 strong{font-size: 34px;letter-spacing: 3px;}
    .commitment .cont ul li strong{width: 150px;font-size: 16px;position: absolute;top: 14px;left: 0;line-height: 34px;-webkit-border-radius: 17px;border-radius: 17px;}
    .commitment .cont ul li{font-size: 18px;padding: 20px 0 15px 170px;line-height: 26px;}
    .commitment .cont div > p{text-align: center;font-size: 20px;margin-top: 25px;}

    .environment .wrapper{padding-bottom: 100px;}
    .commitment h2,.promise h2{font-size: 30px;}

    .environment .wrapper{padding-top: 100px;padding-bottom: 80px;}
    .environment .cont{padding: 20px 60px 28px 60px;}
    .environment .come_title_h2 h2 span{top:-40px;max-width: 300px;}
    .environment .come_title_h2 h2{padding-top: 25px;}
    .environment .cont ul li{ padding: 30px 0 23.5px;}
    .environment .cont ul li h3{font-size: 24px;line-height: 1;}
    .environment .cont ul li h3 span.num{font-size: 16px;margin-bottom: 9px;}
    .environment .cont ul li p{font-size: 15px;line-height: 28px;padding-top: 13.5px;}


    .promise{padding-top: 80px;padding-bottom: 88px;}
    .promise h2{max-width: 410px;margin: 0 auto 30px;}
    .promise ul li{padding: 0 15px;}
    .promise ul li .box div span.text{padding: 23px 0 26px;}

    .staff .wrapper{padding-top: 100px;padding-bottom: 80px;}
    .staff .wrapper .cont{padding: 10px 60px 12px;}
    .staff .come_title_h2 h2 span{top:-42px;max-width: 160px;}
    .staff .come_title_h2 h2{padding-top: 35px;}
    .staff ul li .box{display: flex;flex-direction: row-reverse;position: relative;justify-content: space-between;
        padding: 40px 0 48px;
    }
    .staff h3{margin-bottom: 17px;}
    .staff .area_text{width: 76%;padding-right: 40px;}
    .staff .area_text .name{font-size: 26px;margin-top: 10px;}
    .staff .area_text p{font-size: 15px;line-height: 28px;}
    .staff figure{width: 24%;max-width: 250px;}
    .staff figcaption{font-size: 12px;}
    
    .company h2,.history h2{font-size: 28px;}
    .company .wrapper{padding-top: 66px;padding-bottom: 57px;}
    .company table{margin-top: 6px;}
    .cont table th,.cont table td{padding: 20px;}
    .company .cont table th{max-width: 200px;width: 20%;}
    .company .cont table td{padding-left: 40px;}

    .history .wrapper{padding-bottom: 50px;}
    .history .cont table th{text-align: center;}
    .history .cont table td{padding-left: 10px;}
}

@media screen and (max-width:800px){
    .promise ul{margin-right: -5px;margin-left: -5px;}
    .promise ul li{padding-right: 5px;padding-left: 5px;}
    .cont_about .promise ul li .box div strong {font-size: 20px;line-height: 40px;}

}

@media screen and (min-width:768px) and (max-width:1080px) {
    .environment .cont,.staff .wrapper .cont{padding-right: 20px;padding-left: 20px;}
    .cont_about .promise ul li .box div strong {font-size: 20px;height: 40px;line-height: 40px;}
    .promise ul li .box div span.text {font-size: 21px;}
    .history .cont table th{width: 150px;}

}

@media screen and (min-width:1081px) {
    .company .cont table th{width: 200px;}
    .history .cont table th{width: 15%;}
    .history .cont table td{width: 85%;}
    .promise ul li .box div strong{font-size: 22px;height: 54px;line-height: 1;padding-top: 18px;}
    .promise ul li .box div span.text{font-size: 26px;line-height: 38px;}
}