@charset "utf-8";

html, body{
    height:auto;
}

.sub-visual-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap:22px;
    width: 100%;
    height: 440px;
}

.sub-visual-wrap.sub01{
    background:url(../img/img-sub-visual-01.png) 50% 50% / cover no-repeat;
}

.sub-visual-wrap.sub02{
    background:url(../img/img-sub-visual-02.png) 50% 50% / cover no-repeat;
}

.sub-visual-wrap.sub03{
    background:url(../img/img-sub-visual-03.png) 50% 50% / cover no-repeat;
}

.sub-visual-wrap.sub04{
    background:url(../img/img-sub-visual-04.png) 50% 50% / cover no-repeat;
}

.sub-visual-wrap > span{
    font-size:24px;
    line-height:29px;
    font-weight:700;
    color:#50C59C;
}

.sub-visual-wrap > h2{
    font-size:60px;
    line-height:72px;
    font-weight:700;
    color:#ffffff;
}

.sub .content-box{
    width:100%;
    height:100%;
}

.breadcrumb{
    display:flex;
    align-items:center;
    justify-content: flex-start;
    width:100%;
    max-width:1400px;
    margin:0 auto;
    padding: 35px 0 20px;
    gap: 40px;
    border-bottom: 1px solid #c6c6c6;
}

.breadcrumb span{
    position: relative;
    display:block;
    min-width: 60px;
    width:auto;
}

.breadcrumb > span:first-of-type{
    min-width:initial;
    width:24px;
    height:24px;
    background:url(../img/img-breadcrumb-home.png) 50% 50% / contain no-repeat;
}

.breadcrumb .on-page{
    font-size:18px;
    line-height:22px;
    font-weight:500;
    color:#3aa580;
}

.breadcrumb span:after{
    content:'';
    display:block;
    width:8px;
    height:16px;
    background:url(../img/img-breadcrumb-arr.png) 50% 50% / contain no-repeat;
    position: absolute;
    right: -24px;
    top: 50%;
    transform: translateY(-50%);
}

.breadcrumb span:last-of-type:after{
    display:none;
}

.introduce-box{
    width:100%;
    max-width:1400px;
    padding:65px 0 0;
    margin: 0 auto;
}

.img-box{
    width:100%;
}

.img-box img{
    max-width:100%;
    height:auto;
}

.introduce-box .img-box{
    margin:0 0 100px;
}

.introduce-box .inner-box{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    width: 100%;
    margin: 0 0 200px;
}

.introduce-box .inner-box > div:first-of-type{
    width: 30%;
    font-size: 54px;
    line-height: 65px;
    font-weight: 700;
    color: #121212;
}

.introduce-box .inner-box > div:first-of-type span{
    margin:0 0 0 16px;
    color:#50c49b;
}

.introduce-box .inner-box > div:last-of-type{
    width: 66%;
}

.introduce-box .inner-box > div:last-of-type p{
    font-size:20px;
    line-height:38px;
    font-weight:400;
    color:#333;
}

.sub-visual-box{
    width:100%;
    height:640px;
    background:url(../img/img-sub02.png) 50% 50% / contain no-repeat;
    padding:140px 260px;
}

.sub-visual-box p{
    font-size:48px;
    line-height:64px;
    font-weight:700;
    color:#fff;
}

.sub .content-box.box01{
    padding:120px 30px 230px 0;
    background:#fff;
}

.sub .content-box.box02{
    padding:120px 0 230px 30px;
    background:#F9F9FB;
}

.sub .content-box:last-of-type{
    padding-bottom:0;
}

.sub .content-box > div:first-of-type{
    padding:0 0 70px 260px;
    font-size:64px;
    line-height:77px;
    font-weight:400;
    color:#000;    
}

.sub .content-box > div:first-of-type > span{
    font-weight:700;
}

.sub .content-box > div:last-of-type{
    display:flex;
    align-items:center;
    justify-content:space-between;
}

.sub .content-box.box02 > div:first-of-type{
    padding: 0 0 0 230px;
}

.sub .content-box.box02 > div:last-of-type{
    flex-direction:row-reverse;
}

.business-img-box{
    width:45%;
    align-self: stretch;
}

.business-img-box img{
    height: 100%;
    max-width: 100%;
}

.business-comment-box{
    width:50%;
}

.sub .content-box.box02 .business-img-box{
    width:45%;
}

.sub .content-box.box02 .business-comment-box{
    width:50%;
    padding: 0 0 0 230px;
}

.business-comment-box > div:first-of-type > span{
    font-size:20px;
    line-height:24px;
    font-weight:600;
    letter-spacing:-0.01em;
    color:#595959;
}

.business-comment-box > div:first-of-type > p:first-of-type{
    font-size:48px;
    line-height:58px;
    font-weight:600;
    letter-spacing:-0.02em;
    color:#121212;
    margin: 18px 0 28px;
}

.business-comment-box > div:first-of-type > p:last-of-type{
    font-size: 16px;
    line-height: 24px;
    font-weight:400;
    letter-spacing: -0.01em;
    color:#4f4f4f;
    margin: 0 0 70px;
}

.business-comment-box > div:last-of-type{
    font-size:18px;
    line-height:24px;
    font-weight:500;
    color:#119173;
}

.business-comment-box > div:last-of-type a{
    display:flex;
    align-items:center;
    gap:25px;
    width: 180px;
}

.business-comment-box > div:last-of-type span{
    display:block;
    width:36px;
    height:36px;
    border:1px solid #119173;
    padding:10px 14px;
    background:url(../img/img-more-plus.png) 50% 50% / 50% 50% no-repeat;
}

.notice-board-wrap{
    width:100%;
    max-width:1400px;
    margin: 0 auto 140px;
    padding:90px 0 0;
    text-align: center;
}

.board-search-wrap{
    position: relative;
    display:flex;
    align-items:center;
    justify-content:space-between;
    width:400px;
    margin: 0 auto 70px;
    padding: 0 0 10px;
    border-bottom:3px solid #111111;
}

.board-search-wrap select{
    border:0;
    outline: 0;
    width:120px;
}

.board-search-wrap input{
    width: 260px;
    border:0;
    outline:0;
}

.btn-search{
    position:absolute;
    display:block;
    width:24px;
    height:24px;
    background:url(../img/img-btn-search.png) 50% 50% / contain no-repeat;
    cursor:pointer;
    right:20px;
    top: 12px;
    transform:translate(50%, -50%);
}

.board-box{
    width:100%;
    margin: 0 0 100px;
}

.sein-table{
    width:100%;
    table-layout:fixed;
    border-collapse:collapse;
}

.sein-table th{
    font-size:16px;
    line-height:24px;
    font-weight:500;
    text-align:center;
    color:#121212;
    background:#F5F6F8;
    border-top:2px solid #555;
    border-bottom:1px solid #555;
    padding:12px 0;
}

.sein-table td{
    font-size:16px;
    line-height:24px;
    font-weight:400;
    text-align:center;
    color:#333;
    padding:12px 0;
    border-bottom:1px solid #b6b6b6;
}

.sein-table .notice-title{
    text-align:left;
    cursor: pointer;
}

.sein-table .btn-addon{
    display:block;
    width:25px;
    height:24px;
    margin: 0 auto;
    background:url(../img/img-btn-addon.png) 50% 50% / contain no-repeat;
    cursor: pointer;
}

.board-pagination{
    display:flex;
    align-items:center;
    justify-content: space-between;
    width:300px;
    margin:0 auto;
}

.board-pagination span{
    display:block;
    width:36px;
    height:36px;
    border:1px solid #b6b6b6;
    cursor:pointer;
    background:#fff;
}

.board-pagination .board-prev{
    background:url(../img/img-board-arr.png) 50% 50% / 7px 13px no-repeat #fff;
}

.board-pagination .board-next{
    background:url(../img/img-board-arr.png) 50% 50% / 7px 13px no-repeat #fff;
    transform:rotate(180deg);
}

.board-pagination > div{
    display:flex;
    align-items:center;
    justify-content: space-between;
    min-width: 200px;
}

.board-pagination > div span{
    padding:8px 0;
    font-size:16px;
    line-height:19px;
    font-weight:400;
    color:#555;
    text-align:center;
}

.board-pagination > div span.on{
    color:#fff;
    background:#ff0000;
    border: 1px solid #9e2020;
}

.board-box.news{
    display:flex;
    flex-wrap: wrap;
    align-items:center;
    justify-content: flex-start;
    gap: 30px;
}

.board-box.news .news-box{
    width: calc((100% - 90px) / 4);
    background: #EBEBEB;
    cursor:pointer;
}

.btn-more-news{
    font-size:16px;
    line-height:19px;
    font-weight:500;
    color:#50C59C;
    border:1px solid #50C59C;
    background:rgba(255,255,255,0.2);
    padding: 16px 26px;
    cursor:pointer;
}

.more-modal{
    display:none;
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:100%;
    padding:80px;
    background: rgba(0,0,0,0.8);
    z-index: 1000;
}

.more-modal.on{
    display:flex;
    align-items:center;
}

.btn-more-close{
    position:absolute;
    top:60px;
    right:60px;   
    display:block;
    width:80px;
    height:80px;
    background:#fff;
    transform:translate(50%, -50%);
    cursor:pointer;
}

.more-modal .modal-box{
    display:flex;
    flex-direction:column;
    justify-content: flex-start;
    width: 50%;
    height: 80%;
    background:#fff;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    padding: 40px;
}

.more-title{
    font-size:20px;
    line-height: 32px;
    font-weight: 700;
    padding: 0 0 10px;
    border-bottom: 1px solid #b1b1b1;
}

.more-text{
    font-size:16px;
    line-height:28px;
    font-weight:400;
    padding:10px 0 0;
}