@charset "utf-8";

.doc-cnt.bg {background-color: #f8f8f8; padding: 80px 0; margin-bottom: 80px;}
.doc-cnt .subsidiary {margin: 120px 0;}
.doc-cnt .subsidiary h2 {margin-bottom: 55px; text-align: center; font-size: var(--font-size-36); font-weight: 600; letter-spacing: -.03em; line-height: 1.2em; color: #242424;}
.doc-cnt .subsidiary ul {display: flex; flex-wrap: wrap; justify-content: center; margin: -5px -6.5px;}
.doc-cnt .subsidiary ul li {padding: 5px 6.5px; width: 33.33%;}
.doc-cnt .sub-heading {text-align: center;}
.doc-cnt .sub-heading p {font-size: var(--font-size-18); font-weight: 600; letter-spacing: -.03em; line-height: 1.2em; color: #878787;}
.doc-cnt .sub-heading h2 {margin:10px 0 55px; font-size: var(--font-size-30); letter-spacing: -.03em; line-height: 1.2em; color: #242424;}
.doc-cnt .partners ul {display: flex; flex-wrap: wrap; margin: -5px;}
.doc-cnt .partners ul li {padding: 5px; text-align: center;}
.doc-cnt .partners ul li .txt {margin-top: 15px; font-size: var(--font-size-18); font-weight: 600; letter-spacing: -.03em; line-height: 1.2em; color: #242424;}
.doc-cnt .partners.center ul {justify-content: center;}
.doc-cnt .poster {margin-bottom: 65px;}
.doc-cnt .poster ul {display: flex; flex-wrap: wrap; justify-content: center; margin: -10px -9.5px;}
.doc-cnt .poster ul li {padding: 10px 9.5px;}

.greetings {display: flex; align-items: center;}
.greetings .img {width: 43%; margin-right: 85px;}
.greetings .cnt {flex: 1 1 auto; min-width: 0; width: 1%;}
.greetings .txt1 {margin-bottom: 45px; font-size: var(--font-size-36); color: #242424; letter-spacing: -.03em; line-height: 1.33em; font-weight: 600;}
.greetings .txt2 {font-size: var(--font-size-18); color: #454545; letter-spacing: -.03em; line-height: 1.78em;}
.greetings .txt2:nth-child(3) {margin: 25px 0;}
.greetings .sign {margin-top: 50px; display: flex; align-items: center; font-size: var(--font-size-18); color: #878787; letter-spacing: -.03em; line-height: 1.2em; font-weight: 600;}
.greetings .sign img {margin-left: 20px;}

.philosophy .group {display: flex; align-items: center; margin-bottom: 60px;}
.philosophy .group:last-child {margin-bottom: 0;}
.philosophy .group .img {width: 50%;}
.philosophy .group .cnt {padding: 0 0 0 80px; flex:1 1 auto; min-width:0; width:1%;}
.philosophy .cnt .en {font-size: var(--font-size-18); font-weight: 600; letter-spacing: -.03em; line-height: 1.2em; color: var(--color-primary);}
.philosophy .cnt h2 {margin: 12px 0 35px; font-size: var(--font-size-28); letter-spacing: -.03em; line-height: 1.2em; color: #242424;}
.philosophy .cnt .txt {font-size: var(--font-size-16); letter-spacing: -.03em; line-height: 1.75em; color: #454545;}
.philosophy .group:nth-child(even) {flex-direction: row-reverse;}
.philosophy .group:nth-child(even) .cnt {padding: 0 80px 0 0 ; text-align: right;}


.history-heading {margin-bottom: 110px;}
.history-heading h2 {margin-bottom: 15px; font-size: var(--font-size-36); font-weight: 600; letter-spacing: -.03em; line-height: 1.33em; color: #242424;}
.history-heading p {font-size: var(--font-size-18); letter-spacing: -.03em; line-height: 1.2em; color: #454545;}
.history {position: relative;}
.history .group {position: relative; display: flex; padding: 0 0 60px 95px;}
.history .group .year {margin-right: 40px; font-size: var(--font-size-24); font-weight: 700; letter-spacing: -.03em; line-height: 1.2em; color: #242424;}
.history .cnt {flex:1 1 auto; min-width:0; width:1%;}
.history .cnt ul li {display: flex;}
.history .cnt ul li .mon {margin-right: 25px; width: 3%; font-size: var(--font-size-16); font-weight: 700; letter-spacing: -.03em; line-height: 1.8em; color: #242424;}
.history .cnt ul li .txt-box {flex:1 1 auto; min-width:0; width:1%;}
.history .cnt ul li .txt {margin-bottom: 13px; font-size: var(--font-size-16); letter-spacing: -.03em; line-height: 1.8em; color: #454545;}


.progress-container {
    position: absolute;
    left: 13px; top: 10px;
    height: 100%;
    width: 1px;
    background: #dddddd;
    z-index: 10;
}


.progress-bar {
    position: relative;
    width: 2px;
    background: #890806;
    height: 0;
}

.progress-bar .dot {
    position: absolute;
    right: -9px;
    bottom: -10px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background:#890806;
}

.progress-bar .dot::after {
    display: block;
    position: absolute;
    content: "";
    width: 40px;
    height: 40px;
    background-color: #890806;
    border-radius: 50%;
    left: -16px;
    top: -16px;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
    animation: pin-wave 2s cubic-bezier(1,2,.66,3) infinite;
}

@keyframes pin-wave {
    0% {
        opacity: 0;
        transform: translate3d(-50%,-50%,0) scale(.1)
    }

    50% {
        opacity: .1
    }

    100% {
        opacity: 0;
        transform: translate3d(-50%,-50%,0) scale(1)
    }
}



.ci .img {margin-bottom: 65px; display: flex; align-items: center; justify-content: center; padding: 20px; background-image: url(/images/sub/ci-bg.jpg); width: 100%; height: 380px; background-position: 50%; background-repeat: no-repeat; background-size: cover;}
.ci .cnt {text-align: center;}
.ci .cnt h2 {font-size: var(--font-size-24); font-weight: 600; letter-spacing: -.03em; line-height: 1.2em; color: #242424;}
.ci .cnt p {margin: 20px 0 75px; font-size: var(--font-size-18); letter-spacing: -.03em; line-height: 1.78em; color: #454545;}
.ci .btn {position: relative; margin: 0 auto; display: flex; align-items: center; padding: 10px 30px; width: 260px; height: 60px; border-radius: 30px; border: 1px solid #ddd; color: #686868;}
.ci .btn:hover {border: 1px solid #505050; color: #242424;}
.ci .btn::after {content: ''; position: absolute; right: 30px; top: 50%; transform: translateY(-50%); width: 16px; height: 16px; background-image: url(/images/sub/btn-ico.png); background-repeat: no-repeat; background-size: contain;}

.esg .group {display: flex; flex-direction: column;}
.esg .group .img {margin-bottom: 35px;}
.esg .group .cnt {display: flex;}
.esg .group .cnt h2 {width: 7%; margin-right: 20px; font-size: var(--font-size-20); font-weight: 600; letter-spacing: -.03em; line-height: 1.2em; color: #242424;}
.esg .group .cnt ul {flex:1 1 auto; min-width:0; width:1%;}
.esg .group .cnt ul li {position: relative; margin-bottom: 15px; padding-left: 15px; font-size: var(--font-size-16); letter-spacing: -.03em; line-height: 1.2em; color: #000000;}
.esg .group .cnt ul li::after {content: ''; position: absolute; left: 0; top: 6px; width: 5px; height: 5px; border-radius: 100px; background-color: #c0c0c0;}
.esg .group.st2 {margin:-550px 0 40px; align-items: flex-end;}
.esg .group.st2 .cnt {margin-left: auto; max-width: 490px; width: 100%;}
.esg .group.st2 .cnt h2 {width: 19%;}
.esg .group.st3 .cnt {padding-left: 180px;}

.sub-title.has-img h1 {margin-top: 15px;}

.service {display: flex; margin: 0 -16px 80px;}
.doc-cnt.bg .service {margin-bottom: 0;}
.service .item {width: 33.33%; padding: 0 16px;}
.service .item dl {position: relative; margin-top: -60px;}
.service .item dl dt {text-align: center; margin-bottom: 20px; width: 100%; height: 60px; font-size: var(--font-size-20); font-weight: 600; letter-spacing: -.03em; display: inline-flex; align-items: center; justify-content: center; padding: 10px; color: #fff; background-color: var(--color-primary);}
.service .item:nth-child(even) dl dt {background-color: #2a2a2a;}
.service .item dl dd {text-align: center; font-size: var(--font-size-16); letter-spacing: -.03em; line-height: 1.75em; }

.talent h2 {margin-bottom: 55px; font-size: var(--font-size-36); font-weight: 600; letter-spacing: -.03em; line-height: 1.2em; color: #242424; text-align: center;}
.talent .row {display: flex; margin: 0 -30px;}
.talent .row .col {width: 50%; padding: 0 30px;}
.talent .row .col dl dt {margin: 22px 0 12px; font-size: var(--font-size-24); font-weight: 600; letter-spacing: -.03em; line-height: 1.2em; color: #242424; text-align: center;}
.talent .row .col dl dd {font-size: var(--font-size-18); letter-spacing: -.03em; line-height: 1.2em; color: #454545; text-align: center;}

.board-form {display: flex; flex-wrap: wrap; margin: 0 !important; padding-top: 40px; border-top: 2px solid #242424;}
.board-form dl {width: 50%; padding: 0 20px; margin-bottom: 25px;}
.board-form dl.w100 {width: 100%;}
.board-form dt {margin-bottom: 10px; font-size: var(--font-size-18); font-weight: 600; letter-spacing: -.03em; line-height: 1.2em; color: #242424;}
.board-form dd .input {border-radius: 5px;}
.board-form .essential { margin-left: 5px;}
.essential {color: var(--color-primary);}
.essential-txt {text-align: right; font-size: var(--font-size-16); letter-spacing: -.03em; margin-bottom: 20px;}

.file-upload {display:flex; height:44px; margin-bottom:10px;}
.file-button {margin-left: 10px; display:flex; justify-content:center; align-items:center; height:100%; padding:0 20px; border:0; border-radius:5px; background:#242424 !important; color:#fff; cursor:pointer;}
.file-button:hover {background:#2c2c2c;}
.file-name {flex:1 1 auto; min-width:0; width:1%; display:flex; align-items:center; height:100%; padding:0 14px; border:1px solid #505050; border-radius:5px; background-color: #f8f8f8;}