/* common
--------------------------------------------------- */
#wrap{ overflow: visible;}
main{ padding: 50px 0 0;}

@media only screen and (max-width: 1024px) {
    main{ padding: 0;}
}

/* index
--------------------------------------------------- */
.company1{ padding: 100px 0; letter-spacing: normal; font-weight: 400; font-family: ryo-gothic-plusn, sans-serif; line-height: 1;}

@media only screen and (max-width: 1024px) {
    .company1{ padding: 10.66666667vw 2.666666667vw; background: #EFEFEF;}
}

.list-cn{ padding: 0 0 50px; border-bottom: 1px solid #707070;}
.list-cn > li + li{ margin: 10px 0 0;}
.list-cn > li a{ position: relative; display: block;}
.list-cn .detail{ position: absolute; top: 50%; left: 85px; display: flex; flex-direction: column; width: 440px; transform: translate(0,-50%); align-items: center;}
.list-cn h2{ display: flex; flex-direction: column; color: rgba(255,255,255,.7); letter-spacing: .1em; font-weight: 500; font-size: 16px; align-items: center;}
.list-cn h2 span{ margin: 0 0 15px; color: rgba(255,255,255,1); letter-spacing: .15em; font-weight: 400; font-size: 36px; font-family: century-gothic, sans-serif;}
.list-cn .btn{ display: flex; margin: 30px 0 0; width: 150px; height: 40px; border-radius: 20px; background: #fff; color: #4c4948; text-decoration: none; letter-spacing: 0.1em; font-size: 14px; font-family: century-gothic, sans-serif; align-items: center; justify-content: center;}

@media only screen and (max-width: 1024px) {
    .list-cn{ padding: 0 0 5.333333333vw;}
    .list-cn > li + li{ margin: 2.666666667vw 0 0;}
    .list-cn .detail{ left: 0; padding: 0 0 0 9.333333333vw; width: 100%; align-items: flex-start;}
    .list-cn h2{ flex-direction: column-reverse; color: rgba(255,255,255,1); font-size: 4.8vw; align-items: flex-start;}
    .list-cn h2 span{ margin: 2.666666667vw 0 0; color: rgba(255,255,255,1); font-size: 2.666666667vw;}
    .list-cn .btn{ display: none;}
}

.company1 > aside{ margin: 50px 0 0;}
.company1 > aside a{ position: relative; display: block;}
.company1 > aside .detail{ position: absolute; top: 50%; left: 85px; display: flex; flex-direction: column; width: 440px; transform: translate(0,-50%); align-items: center;}
.company1 > aside h2{ display: flex; flex-direction: column; color: rgba(255,255,255,.7); letter-spacing: .1em; font-weight: 500; font-size: 16px; align-items: center;}
.company1 > aside h2 span{ margin: 0 0 15px; color: rgba(255,255,255,1); letter-spacing: .15em; font-weight: 400; font-size: 36px; font-family: century-gothic, sans-serif;}
.company1 > aside .btn{ display: flex; margin: 30px 0 0; width: 64px; height: 40px; border-radius: 20px; background: #fff; color: #4c4948; text-decoration: none; align-items: center; justify-content: center;}
.company1 > aside .btn img{ width: 11.7px;}

@media only screen and (max-width: 1024px) {
    .company1 > aside{ margin: 5.333333333vw 0 0;}
    .company1 > aside .detail{ left: 0; padding: 0 0 0 9.333333333vw; width: 100%; align-items: flex-start;}
    .company1 > aside h2{ position: relative; flex-direction: column-reverse; padding: 0 6.666666667vw 0 0; color: rgba(255,255,255,1); font-size: 4.8vw; align-items: flex-start;}
    .company1 > aside h2 span{ margin: 2.666666667vw 0 0; color: rgba(255,255,255,1); font-size: 2.666666667vw;}
    .company1 > aside h2:after{ position: absolute; top: 0; right: 0; width: 4vw; height: 4vw; background: url("/img/company2024/common/arrow_w.png") no-repeat center / contain; content: "";}
    .company1 > aside .btn{ display: none;}
}

/* top message / outline / scheme
--------------------------------------------------- */
.company2{ /*padding: 100px 0 0;*/ padding: 0; color: #313131; letter-spacing: normal; font-weight: 400; font-family: ryo-gothic-plusn, sans-serif; line-height: 1;}
.company3{ padding: 100px 0 0; width: 960px; color: #313131; letter-spacing: normal; font-weight: 400; font-family: ryo-gothic-plusn, sans-serif; line-height: 1;}

@media only screen and (max-width: 1024px) {
    .company2{ /*padding: 16vw 12vw 0;*/ padding: 0 12vw;}
    .company3{ padding: 16vw 12vw 0; width: 100%;}
}

.tl{ display: flex; margin: 0 0 100px; letter-spacing: .1em; font-weight: 700; font-size: 26px; align-items: baseline;}
.tl span{ margin: 0 0 0 30px; font-weight: 400; font-size: 13px;}
.tl + p{ letter-spacing: .1em; font-size: 16px; line-height: 2.1875;}

.company2 .tl{font-weight: 700; font-family: "din-2014", sans-serif; }
.company2 .tl span{ font-weight: 400; font-family: ryo-gothic-plusn, sans-serif;}

@media only screen and (max-width: 1024px) {
    .tl{ flex-direction: column; margin: 0 0 26.66666667vw; font-size: 5.866666667vw; align-items: flex-start;}
    .tl span{ margin: 7.466666667vw 0 0; font-size: 3.466666667vw;}
    .tl + p{ font-size: 3.466666667vw; line-height: 2.307692308;}
}

.msg{ display: flex; padding: 0 0 200px; justify-content: space-between;}
.msg > figure{ width: 375px;}
.msg > .detail{ width: 635px; letter-spacing: .1em; font-weight: 300; font-size: 18px; font-family: "fot-tsukuaoldmin-pr6n", sans-serif; line-height: 2.777777778;}
.msg > .detail p + p{ margin: 2.5em 0 0;}

@media only screen and (max-width: 1024px) {
    .msg{ flex-direction: column; padding: 0 0 26.66666667vw; align-items: center; justify-content: flex-start;}
    .msg > figure{ width: 53.33333333vw;}
    .msg > .detail{ padding: 26.66666667vw 0 0; width: 100%; font-size: 3.466666667vw; line-height: 2.307692308;}
}

.bg1{ margin: 0 calc(50% - 50vw); height: 41.66666667vw; background: url("/img/company2024/message/bg.jpg") no-repeat top center / cover;}

@media only screen and (max-width: 1024px) {
    .bg1{ height: 134.9333333vw; background: url("/img/company2024/message/bg_sp.jpg") no-repeat top center / cover;}
}

.sec-bg{ margin: 0 calc(50% - 50vw); padding: 200px calc(50vw - 50%); background: #EFEFEF;}

@media only screen and (max-width: 1024px) {
    .sec-bg{ padding: 40vw calc(50vw - 50%) 26.66666667vw;}
}

.dl1{ display: flex; flex-direction: column; margin: 0 0 160px; text-align: center; align-items: center;}
.dl1 + .dl1{ margin: 0;}
.dl1 dt{ color: #313131; letter-spacing: .1em; font-size: 30px; font-family: acumin-pro, sans-serif;}
.dl1 dd{ padding: 80px 0 0; letter-spacing: .08em; font-size: 18px; font-family: "Yu Gothic Pr6N M"; line-height: 2.222222222;}
.dl1 .line1{ letter-spacing: .1em; font-size: 40px; font-family: "A1 Mincho"; line-height: 2;}

@media only screen and (max-width: 1024px) {
    .dl1{ margin: 0 0 40vw;}
    .dl1 + .dl1{ margin: 0;}
    .dl1 dt{ font-size: 5.333333333vw;}
    .dl1 dd{ padding: 13.33333333vw 0 0; letter-spacing: .1em; font-size: 3.466666667vw; line-height: 2.307692308;}
    .dl1 .line1{ letter-spacing: .05em; font-size: 8vw;}
}

.table1{ margin: 0 0 170px; width: 100%; text-align: left; letter-spacing: .1em; font-size: 16px;}
.table1 th{ padding: 30px 0; width: 220px; border-top: 1px solid #DBDBDB; vertical-align: top; font-weight: 500;}
.table1 td{ padding: 30px 0; border-top: 1px solid #DBDBDB;}
.table1 ul > li{ padding: 0 0 30px; border-bottom: 1px dashed #DBDBDB;}
.table1 ul > li + li{ margin: 30px 0 0;}

@media only screen and (max-width: 1024px) {
    .table1{ margin: 0 0 32vw; font-size: 3.466666667vw;}
    .table1 th{ display: block; padding: 5.333333333vw 0 2.666666667vw; width: 100%;}
    .table1 td{ display: block; padding: 0 0 5.333333333vw; border-top: none; line-height: 2;}
    .table1 ul > li{ padding: 0 0 5.333333333vw; border: none;}
    .table1 ul > li + li{ margin: 0; padding: 5.333333333vw 0; border-top: 1px dashed #DBDBDB;}
}

.tabs{ margin: 90px 0 0;}
.tabs > ul{ display: flex; justify-content: center;}
.tabs > ul > li{ margin: 0 20px; padding: 0 0 15px; border-bottom: 1px solid; color: #B9B9B9; letter-spacing: .1em; font-size: 20px; font-family: acumin-pro, sans-serif; cursor: pointer;}
.tabs > ul > li.select{ color: #313131;}
.tab-content{ padding: 80px 0 0;}
.tab-content table{ width: 100%; border-bottom: 1px solid #DBDBDB; text-align: left; letter-spacing: .1em; font-size: 16px; line-height: 2.1875;}
.tab-content th{ padding: 30px 0; width: 145px; border-top: 1px solid #DBDBDB; vertical-align: text-bottom; font-weight: 500; font-family: acumin-pro, sans-serif;}
.tab-content td{ padding: 30px 0; border-top: 1px solid #DBDBDB;}
.tab-content small{ font-size: 12px;}

@media only screen and (max-width: 1024px) {
    .tabs{ margin: 21.33333333vw 0 0;}
    .tabs > ul{ justify-content: space-between;}
    .tabs > ul > li{ margin: 0; padding: 0 0 2.666666667vw; font-size: 3.466666667vw;}
    .tab-content{ padding: 26.66666667vw 0 0;}
    .tab-content table{ border-bottom: none; font-size: 3.466666667vw; line-height: 2.307692308;}
    .tab-content th{ display: flex; padding: 0; width: 100%; border-top: none; align-items: center;}
    .tab-content th:after{ margin-left: 1em; height: 1px; background: #B9B9B9; content: ""; flex-grow: 1;}
    .tab-content td{ display: block; padding: 4vw 0 8vw; width: 100%; border-top: none;}
    .tab-content small{ font-size: 2.666666667vw;}
}

.sec{ padding: 150px 0;}
.sec.bg{ margin: 0 calc(50% - 50vw); padding: 150px calc(50vw - 50%); width: 100vw; background: #EFEFEF;}

@media only screen and (max-width: 1024px) {
    .sec{ padding: 26.66666667vw 0;}
    .sec.bg{ padding: 26.66666667vw calc(50vw - 50%);}
}

.sec .row1{ position: relative; display: flex; align-items: center; justify-content: space-between;}
.sec .row1 > figure{ width: 435px;}
.sec .row1 > .detail{ width: 420px; letter-spacing: .1em;}
.sec .row1 > .detail h3{ font-weight: 700; font-size: 20px;}
.sec .row1 > .detail p{ margin: 1.5em 0 0; font-size: 18px; line-height: 2.222222222;}
.sec .row1 > .detail .toggle{ position: absolute; right: 0; bottom: 0; border: none; font-size: 14px; cursor: pointer;}
.sec .row1-8{ align-items: flex-start;}
.sec .row1 > .detail .toggle8{ position: relative; right: auto; bottom: auto; margin: 40px 0 0; text-align: right;}

@media only screen and (max-width: 1024px) {
    .sec .row1{ flex-direction: column; align-items: flex-start; justify-content: flex-start;}
    .sec .row1 > figure{ width: 100%;}
    .sec .row1 > .detail{ padding: 18.66666667vw 0 0; width: 100%;}
    .sec .row1 > .detail h3{ font-size: 4.533333333vw;}
    .sec .row1 > .detail p{ margin: 10.66666667vw 0 0; font-size: 3.466666667vw; line-height: 2.307692308;}
    .sec .row1 > .detail .toggle{ position: relative; right: auto; bottom: auto; margin: 5.333333333vw 0 0; text-align: right; font-size: 2.666666667vw;}
    .sec .row1 > .detail .toggle8{ margin: 5.333333333vw 0 0;}
}

.sec > .detail{ display: none; padding: 100px 0 0; word-break: break-all; letter-spacing: .08em; font-size: 16px; font-family: "Yu Gothic Pr6N M"; line-height: 2.1875;}
.sec > .detail p + p{ margin: 2em 0 0;}
.sec > .detail .strong{ letter-spacing: .1em; font-weight: 500; font-family: ryo-gothic-plusn, sans-serif;}
.sec > .detail .ext{ display: block; margin: 2.5em 0 0; color: #313131; text-decoration: none; letter-spacing: .1em; font-family: ryo-gothic-plusn, sans-serif; line-height: 1;}
.sec > .detail .ext dl{ display: flex; flex-direction: column; align-items: flex-start;}
.sec > .detail .ext dt{ position: relative; padding: 0 26px 0 0; font-weight: 500;}
.sec > .detail .ext dt:after{ position: absolute; top: 50%; right: 0; width: 15.3px; height: 15.3px; background: url("/img/company2024/business/ico_ext.png") no-repeat center / contain; content: ""; transform: translate(0,-50%);}
.sec > .detail .ext dd{ margin: 1em 0 0; font-size: 12px;}
.sec > .detail .ext2{ margin: 2.5em 0; padding: 0 0 50px; border-bottom: 1px solid #707070;}

@media only screen and (max-width: 1024px) {
    .sec > .detail{ padding: 8vw 0 0; letter-spacing: .1em; font-size: 3.466666667vw; line-height: 2.307692308;}
    .sec > .detail p + p{ margin: 2.5em 0 0;}
    .sec > .detail .strong{ font-size: 3.2vw; line-height: 2.166666667;}
    .sec > .detail .ext{ margin: 3em 0 0;}
    .sec > .detail .ext dt{ padding: 0 5.333333333vw 0 0; font-size: 3.2vw;}
    .sec > .detail .ext dt:after{ width: 3.2vw; height: 3.2vw;}
    .sec > .detail .ext dd{ font-size: 2.666666667vw;}
    .sec > .detail .ext2{ margin: 2.5em 0; padding: 0 0 10.66666667vw;}
}

.sec .note1{ margin: 125px 0 0; padding: 50px; border: 1px solid #707070; background: #fff;}
.sec .note1 > p{ text-align: center; letter-spacing: .1em; font-weight: 500; font-size: 18px;}
.sec .note1 .row{ display: flex; margin: 70px 0 0; letter-spacing: .1em; justify-content: space-between;}
.sec .note1 .row > div{ display: flex; width: 570px; justify-content: space-between; flex-wrap: wrap;}
.sec .note1 .row dl{ padding: 0 2em 0 0; width: 50%; font-size: 14px; line-height: 2.142857143;}
.sec .note1 .row dt{ display: flex; align-items: center;}
.sec .note1 .row dt:after{ margin-left: 1em; height: 1px; background: #707070; content: ""; flex-grow: 1;}
.sec .note1 .row dd{ padding: 5px 0 30px; white-space: nowrap;}
.sec .note1 .row > p{ margin: 0; padding: 0 0 0 3em; width: calc(100% - 570px); font-size: 12px; line-height: 2.5;}
.sec .note1 .btn1{ padding: 10px 0 0;}
.sec .note1 .btn1 a{ display: flex; margin: 0 auto; width: 313px; height: 68px; border: 1px solid #7c7c7c; border-radius: 6px; background: #d5e2eb; box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.2); text-decoration: none; letter-spacing: .1em; font-weight: 500; font-size: 16px; justify-content: center; align-items: center;}

@media only screen and (max-width: 1024px) {
    .sec .note1{ margin: 10.66666667vw 0 0; padding: 10.66666667vw 5.333333333vw;}
    .sec .note1 > p{ text-align: left; font-size: 3.466666667vw; line-height: 2.307692308;}
    .sec .note1 .row{ flex-direction: column; margin: 8vw 0 0; justify-content: flex-start;}
    .sec .note1 .row > div{ flex-direction: column; width: 100%; justify-content: flex-start;}
    .sec .note1 .row dl{ padding: 0; width: 100%; font-size: 3.466666667vw; line-height: 2.307692308;}
    .sec .note1 .row dd{ padding: 0 0 5.333333333vw;}
    .sec .note1 .row > p{ margin: 2.666666667vw 0 0; padding: 0; width: 100%; font-size: 2.666666667vw; line-height: 2;}
    .sec .note1 .btn1{ padding: 5.333333333vw 0 0;}
    .sec .note1 .btn1 a{ margin: 0; width: 100%; height: 13.33333333vw; border-radius: 1.6vw; font-size: 3.2vw;}
}

/* recruit
--------------------------------------------------- */
.company4{ padding: 0; width: 960px; color: #313131; letter-spacing: normal; line-height: 1;}

@media only screen and (max-width: 736px) {
    .company4{ padding: 26.66666667vw 0 0; width: 100%;}
}

.company4 > aside{ position: fixed; top: 175px; right: 2.604166667vw; z-index: 10;}
.company4 > aside > ul{ display: flex; justify-content: flex-end;}
.company4 > aside > ul > li{ margin: 0 0 0 1.041666667vw;}
.company4 > aside > ul > li > a,
.company4 > aside > ul > li > div{ display: flex; flex-direction: column; width: 10.41666667vw; height: 4.6875vw; border-radius: 1.354166667vw; background: #128de8; box-shadow: 0px 0.260416667vw 0.520833333vw rgba(0, 0, 0, 0.16); color: #fff; text-align: center; text-decoration: none; font-size: 1.041666667vw; font-family: "Yu Gothic Pr6N B"; line-height: 1.5; cursor: pointer; align-items: center; justify-content: center;}
.company4 > aside > ul > li > a > small{ letter-spacing: .1em; font-size: 0.729166667vw; font-family: "Yu Gothic Pr6N M";}
.company4 > aside > ul > li.nav1 > a{ width: 13.02083333vw;}
.company4 > aside > ul > li:last-child > a{ width: 15.625vw; background: #62AEE6;}
.company4 > aside > ul > li.drop{ display: none;}

@media only screen and (max-width: 736px) {
    .company4 > aside{ top: 65px; right: auto; left: 0; z-index: 10; box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.16);}
    .company4 > aside > ul{ display: flex; width: 100vw; background: #128de8; box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.16); justify-content: flex-start;}
    .company4 > aside > ul > li{ position: relative; margin: 0; width: 25%; height: 26.66666667vw;}
    .company4 > aside > ul > li:after{ position: absolute; top: 50%; left: 0; width: 1px; height: 12.8vw; background: #fff; content: ""; transform: translate(0,-50%);}
    .company4 > aside > ul > li:nth-child(3):after{ content: none;}
    .company4 > aside > ul > li > a,
    .company4 > aside > ul > li > div{ position: relative; flex-direction: column; width: 100%; height: 100%; border-radius: 0; background: #128de8; box-shadow: none; font-size: 2.666666667vw; line-height: 1.4; filter: drop-shadow(0px 5px 5px rgba(0, 0, 0, 0.16));}
    .company4 > aside > ul > li > div{ line-height: 2.5;}
    .company4 > aside > ul > li > div:after{ position: absolute; top: 55%; left: 50%; width: 11.73333333vw; height: 1px; background: #fff; content: ""; transform: translate(-50%,0);}
    .company4 > aside > ul > li > a > span,
    .company4 > aside > ul > li > div > span{ font-size: 3.733333333vw;}
    .company4 > aside > ul > li > div > small{ font-size: 2.4vw;}
    .company4 > aside > ul > li.nav1{ display: none;}
    .company4 > aside > ul > li:last-child > a{ width: 100%; background: #62AEE6;}
    .company4 > aside > ul > li.drop{ position: relative; display: block;}
    .company4 > aside > ul > li.drop ul{ position: absolute; top: 100%; left: 0; display: flex; visibility: hidden; padding: 4.533333333vw 5.333333333vw; width: 100vw; background: rgba(255,255,255,.7); opacity: 0; transition: all .2s ease; justify-content: space-between;}
    .company4 > aside > ul > li.drop:hover ul,
    .company4 > aside > ul > li.drop:active ul{ visibility: visible; opacity: 1;}
    .company4 > aside > ul > li.drop ul > li{ width: 42.13333333vw;}
    .company4 > aside > ul > li.drop ul > li > a{ display: flex; flex-direction: column; width: 100%; height: 13.33333333vw; background: #128DE8; color: #fff; text-decoration: none; font-size: 3.733333333vw; font-family: "Yu Gothic Pr6N B"; align-items: center; justify-content: center;}
    .company4 > aside > ul > li.drop ul > li > a small{ margin: 0 0 .5em; font-size: 2.666666667vw; font-family: "Yu Gothic Pr6N M";}
}

.company4 > .line{ display: none;}

@media only screen and (max-width: 736px) {
    .company4 > .line{ position: fixed; top: 88vw; left: 1.333333333vw; z-index: 10; display: block; width: 3.021333333vw;}
}

.company4 .sec1{ position: relative; margin: 0 calc(50% - 50vw); padding: 70px 0 0 2.604166667vw; height: 48.28125vw;}
.company4 .sec1 h2{ display: flex; flex-direction: column;letter-spacing: .15em; font-size: 1.666666667vw; font-family: "Yu Gothic Pr6N B"; }
.company4 .sec1 h2 span{ margin: 0 0 0.9375vw; letter-spacing: .4em; font-size: 0.729166667vw;}
.company4 .sec1:after{ position: fixed; top: 125px; left: 0; z-index: -1; width: 100vw; height: 48.28125vw; background: url("/img/company2024/recruit/img_main.jpg") no-repeat top center / contain; content: "";}

@media only screen and (max-width: 736px) {
    .company4 .sec1{ margin: 0; padding: 0; height: 86.93333333vw;}
    .company4 .sec1 h2{ display: none;}
    .company4 .sec1:after{ top: calc(65px + 26.66666667vw); height: 86.93333333vw; background: url("/img/company2024/recruit/img_main_sp.jpg") no-repeat top center / contain;}
}

.company4 .sec2{ margin: 0 calc(50% - 50vw); padding: 100px calc(50vw - 50%) 150px; background: rgba(255,255,255,.85);}
.company4 .sec2 h3{ text-align: center; letter-spacing: -.15em; font-weight: 300; font-size: 85px; font-family: "fot-tsukuaoldmin-pr6n", sans-serif; line-height: 1.152941176;}
.company4 .sec2 p{ margin: 3em 0 0; letter-spacing: .05em; font-size: 20px; font-family: "Yu Gothic Pr6N M"; line-height: 2.5;}
.company4 .sec2 nav{ margin: 150px 0 0;}
.company4 .sec2 nav ul{ display: flex; justify-content: center;}
.company4 .sec2 nav ul > li{ padding: 0 13px;}
.company4 .sec2 nav a{ position: relative; display: flex; flex-direction: column; width: 168px; height: 168px; border: 1px solid #b9b9b9; border-radius: 10px; background: #fff; box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.16); color: #555555; text-align: center; text-decoration: none; font-weight: 500; font-size: 20px; font-family: zen-kaku-gothic-new, sans-serif; line-height: 1.45; align-items: center; justify-content: center;}
.company4 .sec2 nav a em{ display: flex; margin: .5em 0 0; min-height: 2em; letter-spacing: .1em; font-weight: 400; font-style: normal; font-size: 12px; font-family: century-gothic, sans-serif; align-items: center;}
.company4 .sec2 nav a:after{ position: absolute; bottom: 12px; left: 50%; border-width: 10px 8px 0 8px; border-style: solid; border-color: #128DE8 transparent transparent transparent; content: ""; transform: translate(-50%,0);}

@media only screen and (max-width: 736px) {
    .company4 .sec2{ margin: 0; padding: 21.33333333vw 12vw 40vw;}
    .company4 .sec2 h3{ text-align: left; letter-spacing: -.06em; font-size: 10.13333333vw; line-height: 1.052631579;}
    .company4 .sec2 p{ margin: 3em 0 0; letter-spacing: -.01em; font-weight: 300; font-size: 4.266666667vw; font-family: "fot-tsukuaoldmin-pr6n", sans-serif; line-height: 2.25;}
    .company4 .sec2 nav{ margin: 21.33333333vw 0 0; padding: 0;}
    .company4 .sec2 nav ul{ justify-content: space-between; flex-wrap: wrap;}
    .company4 .sec2 nav ul > li{ padding: 5.333333333vw 0 0; width: calc(50% - 2.666666667vw);}
    .company4 .sec2 nav a{ width: 100%; height: 35.2vw; border-radius: 2.666666667vw; box-shadow: 0.533333333vw 0.533333333vw 1.333333333vw rgba(0, 0, 0, 0.16); font-size: 4.266666667vw; line-height: 1.5;;}
    .company4 .sec2 nav a em{ margin: .5em 0 0; min-height: 0; font-size: 2.666666667vw; line-height: 1.4;}
    .company4 .sec2 nav a:after{ bottom: 2.666666667vw; border-width: 2.133333333vw 1.6vw 0 1.6vw;}
}

.company4 .sec3{ margin: 0 calc(50% - 50vw); padding: 150px calc(50vw - 50%); background: #fff;}
.company4 .sec3 .tl-wrap{ display: flex;}
.company4 .sec3 .tl-wrap figure{ width: 537px;}
.company4 .sec3 .tl-wrap .detail{ display: flex; flex-direction: column; width: 423px; background: #A5A5A5; color: #FFFFFF; align-items: center; justify-content: center;}
.company4 .sec3 .tl-wrap .detail p{ margin: 5em 0 0; width: 285px; letter-spacing: .1em; font-weight: 400; font-size: 13px; font-family: ryo-gothic-plusn, sans-serif; line-height: 2.307692308;}

@media only screen and (max-width: 736px) {
    .company4 .sec3{ margin: 0; padding: 0;}
    .company4 .sec3 .tl-wrap{ flex-direction: column;}
    .company4 .sec3 .tl-wrap figure{ width: 100%;}
    .company4 .sec3 .tl-wrap .detail{ padding: 26.66666667vw 12vw 17.33333333vw; width: 100%; justify-content: flex-start;}
    .company4 .sec3 .tl-wrap .detail p{ margin: 3em 0 0; width: 100%; font-size: 3.466666667vw; line-height: 2.307692308;}
}

.company4 .tl2{ display: flex; flex-direction: column; letter-spacing: .5em; font-weight: 500; font-size: 16px; font-family: zen-kaku-gothic-new, sans-serif; align-items: center;}
.company4 .tl2 span{ display: flex; flex-direction: column; margin: 1em 0 0; letter-spacing: .2em; font-weight: 400; font-size: 40px; font-family: century-gothic, sans-serif; align-items: center;}
.company4 .tl2 span small{ margin: 1em 0 0; letter-spacing: .1em; font-size: 16px;}

@media only screen and (max-width: 736px) {
    .company4 .tl2{ font-size: 4.266666667vw;}
    .company4 .tl2 span{ margin: 1em 0 0; letter-spacing: .1em; font-size: 10.66666667vw;}
    .company4 .tl2 span small{ font-size: 4.266666667vw;}
}

.company4 .list-staff{ display: flex; margin: 35px -9px 0; flex-wrap: wrap;}
.company4 .list-staff > li{ padding: 50px 9px 0; width: 25%;}
.company4 .list-staff > li > a{ color: #555555; text-decoration: none; cursor: pointer;}
.company4 .list-staff > li > a figcaption{ display: flex; flex-direction: column; padding: 1em 0 0; font-weight: 400; font-size: 16px; font-family: zen-kaku-gothic-new, sans-serif; line-height: 1.5; align-items: center;}
.company4 .list-staff > li > a figcaption span{ font-size: 14px;}

@media only screen and (max-width: 736px) {
    .company4 .list-staff{ margin: 0; background: #A5A5A5; justify-content: space-between;}
    .company4 .list-staff > li{ padding: 0 0 0.266666667vw; width: calc(50% - 0.133333333vw);}
    .company4 .list-staff > li > a figcaption{ padding: 0; height: 13.33333333vw; background: #fff; font-size: 3.733333333vw; line-height: 1.3; justify-content: center;}
    .company4 .list-staff > li > a figcaption span{ font-size: 3.2vw;}
}

.remodal,
.remodal-overlay{ background: none; letter-spacing: normal; line-height: 1;}
.modal-content{ position: relative; display: flex; padding: 130px 70px; width: 1100px; background: rgba(18,141,232,.85); color: #fff; justify-content: space-between;}
.modal-content .info h4{ letter-spacing: .05em; font-weight: 400; font-size: 30px; font-family: century-gothic, sans-serif;}
.modal-content .info figure{ display: flex; margin: 55px 0 0; align-items: flex-end;}
.modal-content .info figure img{ width: 260px;}
.modal-content .info figcaption{ display: flex; flex-direction: column; padding: 0 0 0 20px; font-weight: 400; font-size: 20px; font-family: zen-kaku-gothic-new, sans-serif; line-height: 1.3;}
.modal-content .info figcaption span{ margin: 2em 0 0; letter-spacing: .08em; font-size: 16px; font-family: "Yu Gothic Pr6N M";}
.modal-content > p{ width: 460px; letter-spacing: .1em; font-weight: 400; font-size: 14px; font-family: ryo-gothic-plusn, sans-serif; line-height: 2.142857143;}
.modal-content .close a{ position: absolute; right: 40px; bottom: 40px; display: block; padding: 0 30px 0 0; color: #1A1311; text-decoration: none; letter-spacing: .1em; font-weight: 400; font-size: 10px; font-family: new-frank, sans-serif; cursor: pointer;}
.modal-content .close a::after{ position: absolute; top: 50%; right: 0; width: 20px; height: 20px; background: url("/img/company2024/recruit/close.png") no-repeat center / contain; content: ""; transform: translate(0,-50%);}
.modal-overlay{ position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 10;}

@media only screen and (max-width: 736px) {
    .modal-content{flex-direction: column; overflow-y: auto;  margin: 0 auto; padding: 37.33333333vw 9.333333333vw 20vw; min-height: 100%; width: 94.66666667vw; justify-content: flex-start;}
    .modal-content .info{ position: relative;}
    .modal-content .info h4{ position: absolute; top: 0; left: 0; font-size: 5.333333333vw; line-height: 1.4;}
    .modal-content .info figure{ flex-direction: row-reverse; margin: 0; width: 100%; align-items: flex-end; justify-content: space-between;}
    .modal-content .info figure img{ width: 37.86666667vw;}
    .modal-content .info figcaption{ padding: 0; font-size: 4.266666667vw; line-height: 1.3;}
    .modal-content .info figcaption span{ margin: 1em 0 0; font-size: 3.2vw;}
    .modal-content > p{ margin: 12vw 0 0; width: 100%; font-size: 3.2vw; line-height: 1.75;}
    .modal-content .close{display: flex;  margin: 10.66666667vw 0 0; justify-content: flex-end;}
    .modal-content .close a{ position: relative; right: auto; bottom: auto; padding: 0 8vw 0 0; font-size: 2.666666667vw;}
    .modal-content .close a::after{ width: 5.333333333vw; height: 5.333333333vw;}
}

.company4 .sec4{ margin: 0 calc(50% - 50vw); padding: 150px calc(50vw - 50%); background: #DBDBDB; color: #555555;}
.company4 .sec4 h3 + p{ margin: 60px 0 0; text-align: center; letter-spacing: .1em; font-weight: 400; font-size: 16px; font-family: ryo-gothic-plusn, sans-serif; line-height: 2.1875;}
.company4 .sec4 .slide1-wrap{ margin: 140px calc(50% - 50vw) 0;}
.company4 .sec4 .slide1{ opacity: 0; transition: opacity 1s ease;}
.company4 .sec4 .slide1.slick-initialized{ opacity: 1;}
.company4 .sec4 .slide1 .slick-slide{ padding: 0 28px; width: 563px;}
.company4 .sec4 .slide1 figure a{ position: relative; display: block;}
.company4 .sec4 .slide1 figure a figcaption{ position: absolute; bottom: 18px; left: 18px; width: 111.69px;}
.company4 .sec4 .slide1 .line1{ margin: 55px 0 0; height: 65px; letter-spacing: .1em; font-size: 16px; font-family: "Yu Gothic Pr6N B"; line-height: 2.1875;}
.company4 .sec4 .slide1 .line2{ display: flex; margin: 50px 0 0; letter-spacing: .2em; font-size: 28px; font-family: "Yu Gothic Pr6N B"; align-items: baseline;}
.company4 .sec4 .slide1 .line2 em{ margin: 0 0 0 35px; letter-spacing: .08em; font-style: normal; font-size: 20px; font-family: "Yu Gothic Pr6N M";}
.company4 .sec4 .slide1 .line3{ margin: 30px 0 0; letter-spacing: .1em; font-weight: 400; font-size: 12px; font-family: ryo-gothic-plusn, sans-serif; line-height: 2;}

.slick-prev,
.slick-next{ top: -60px; width: 106.96px; height: 17.41px; transform: none;}
.slick-prev{ left: 50px;}
.slick-next{ right: 50px;}
.slick-prev.slick-disabled:before,
.slick-next.slick-disabled:before{ opacity: 1;}
.slick-prev:before,
.slick-next:before{display: block; width: 100%; height: 100%; background: url("/img/company2024/recruit/arrow.png") no-repeat center / contain; content: ''; opacity: 1; }
.slick-prev:before{ transform: scale(-1, 1);}

@media only screen and (max-width: 736px) {
    .company4 .sec4{ margin: 0; padding: 40vw 12vw;}
    .company4 .sec4 h3 + p{ margin: 16vw 0 0; text-align: left; font-size: 3.466666667vw; line-height: 2.307692308;}
    .company4 .sec4 .slide1-wrap{ margin: 13.33333333vw calc(50% - 50vw) 0;}
    .company4 .sec4 .slide1 .slick-slide{ padding: 0 4vw; width: 84vw;}
    .company4 .sec4 .slide1 figure a figcaption{ bottom: 2.666666667vw; left: 2.666666667vw; width: 16.72266667vw;}
    .company4 .sec4 .slide1 .line1{ margin: 8vw 0 0; height: 13.33333333vw; font-size: 4.266666667vw; line-height: 1.875;}
    .company4 .sec4 .slide1 .line2{ margin: 10.66666667vw 0 0; font-size: 4.266666667vw;}
    .company4 .sec4 .slide1 .line2 em{ margin: 0 0 0 2em; font-size: 3.2vw;}
    .company4 .sec4 .slide1 .line3{ margin: 1.5em 0 0; font-size: 3.2vw;}
}

.company4 .sec5{ margin: 0 calc(50% - 50vw); padding: 200px calc(50vw - 50%); background: #D5E2EB; color: #555555;}
.company4 .sec5 .tl-wrap{ display: flex; justify-content: space-between;}
.company4 .sec5 .tl-wrap > figure{ width: 537px;}
.company4 .sec5 .tl-wrap > .detail{ display: flex; flex-direction: column; width: calc(100% - 537px); justify-content: center; align-items: center;}
.company4 .sec5 .tl-wrap > .detail p{ margin: 3em 0 0; width: 331px; text-align: center; letter-spacing: .1em; font-weight: 400; font-size: 16px; font-family: ryo-gothic-plusn, sans-serif; line-height: 2.1875;}
.company4 .sec5 .tl-wrap > .detail .more1{ margin: 3em 0 0; letter-spacing: .1em; font-weight: 500; font-size: 14px;}
.company4 .sec5 .tl-wrap > .detail .more1 a{ position: relative; display: inline-block; padding: 0 20px 0 0; color: #128DE8; text-decoration: none;}
.company4 .sec5 .tl-wrap > .detail .more1 a:after{ position: absolute; top: 50%; right: 0; width: 14.18px; height: 14.18px; background: url("/img/company2024/recruit/ext.png") no-repeat center / contain; content: ""; transform: translate(0,-50%);}

@media only screen and (max-width: 736px) {
    .company4 .sec5{ margin: 0; padding: 0;}
    .company4 .sec5 .tl-wrap{ flex-direction: column; justify-content: flex-start;}
    .company4 .sec5 .tl-wrap > figure{ width: 100%;}
    .company4 .sec5 .tl-wrap > .detail{ padding: 26.66666667vw 12vw 13.33333333vw; width: 100%; justify-content: flex-start;}
    .company4 .sec5 .tl-wrap > .detail p{ margin: 3em 0 0; width: 100%; text-align: left; font-size: 3.466666667vw; line-height: 2.307692308;}
    .company4 .sec5 .tl-wrap > .detail .more1{ margin: 2em 0 0; width: 100%; font-size: 3.2vw;}
    .company4 .sec5 .tl-wrap > .detail .more1 a{ padding: 0 5.333333333vw 0 0;}
    .company4 .sec5 .tl-wrap > .detail .more1 a:after{ width: 3.2vw; height: 3.2vw;}
}

.company4 .tl3{ display: flex; flex-direction: column; text-align: center; letter-spacing: .2em; font-weight: 400; font-size: 30px; font-family: ryo-gothic-plusn, sans-serif; line-height: 1.533333333; align-items: center;}
.company4 .tl3 span{ margin: 1em 0 0; letter-spacing: .1em; font-weight: 400; font-size: 16px; font-family: century-gothic, sans-serif; line-height: 1.625;}

@media only screen and (max-width: 736px) {
    .company4 .tl3{ font-size: 8vw;}
    .company4 .tl3 span{ font-size: 4.266666667vw;}
}

.company4 .row{ display: flex; margin: 100px 0 0; justify-content: space-between;}
.company4 .row > div{ width: 460px;}

@media only screen and (max-width: 736px) {
    .company4 .row{ flex-direction: column; margin: 6.666666667vw 0 0; padding: 0 2.666666667vw 21.33333333vw; justify-content: flex-start;}
    .company4 .row > div{ width: 100%;}
    .company4 .row > div + div{ margin: 5.333333333vw 0 0;}
}

.company4 * + .toggle0{ margin: 40px 0 0;}
.company4 .toggle0 > dt{ position: relative; display: flex; padding: 24px 0 0; width: 100%; height: 65px; border: 1px solid #b9b9b9; border-radius: 6px; background: #fff; box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.16); letter-spacing: .1em; font-weight: 500; font-size: 20px; font-family: ryo-gothic-plusn, sans-serif; cursor: pointer; align-items: baseline; justify-content: center;}
.company4 .toggle0 > dt small{ margin: 0 0 0 1em; letter-spacing: .05em; font-size: 11px;}
.company4 .toggle0 > dt:before,
.company4 .toggle0 > dt:after{ position: absolute; top: 50%; right: 20px; width: 14px; height: 2px; background: #128DE8; content: ""; transform: translate(0,-50%);}
.company4 .toggle0 > dt:after{ transition: transform .2s ease; transform: translate(0,-50%) rotate(90deg);}
.company4 .toggle0 > dt.open:after{ transform: translate(0,-50%) rotate(180deg);}
.company4 .toggle1 > dt{ background: #FFFCF0;}
.company4 .toggle2 > dt{ background: #F7FCFF;}
.company4 .toggle3 > dt{ background: #FFF2F2;}
.company4 .toggle0 > dd{ display: none; padding: 50px 0;}
.company4 .toggle0 h4{ display: flex; margin: 50px 0 0; height: 36px; border-radius: 6px 6px 0px 0px; background: #128de8; color: #fff; letter-spacing: .15em; font-size: 14px; align-items: center; justify-content: center;}
.company4 .toggle0 p{ letter-spacing: .1em; font-weight: 400; font-size: 16px; font-family: ryo-gothic-plusn, sans-serif; line-height: 2.1875;}
.company4 .toggle0 figure ul li + li{ margin: 20px 0 0;}
.company4 .toggle0 dl{ letter-spacing: .1em; font-weight: 400; font-family: ryo-gothic-plusn, sans-serif;}
.company4 .toggle0 dl dt{ text-align: center; font-size: 16px;}
.company4 .toggle0 dl dd{ margin: 1.5em 0 0; font-size: 14px; line-height: 2.142857143;}
.company4 .toggle0 * + p{ margin: 1.5em 0 0;}
.company4 .toggle0 * + figure{ margin: 30px 0 0;}
.company4 .toggle0 dl * + dt{ margin: 50px 0 0;}

@media only screen and (max-width: 736px) {
    .company4 * + .toggle0{ margin: 5.333333333vw 0 0;}
    .company4 .toggle0 > dt{ padding: 4vw 0 0; height: 13.33333333vw; border-radius: 1.6vw; box-shadow: 0.533333333vw 0.533333333vw 1.333333333vw rgba(0, 0, 0, 0.16); font-size: 4.266666667vw;}
    .company4 .toggle0 > dt small{ font-size: 2.666666667vw;}
    .company4 .toggle0 > dt:before,
    .company4 .toggle0 > dt:after{ right: 4vw; width: 2.666666667vw; height: 0.533333333vw;}
    .company4 .toggle0 > dd{ padding: 12vw 9.333333333vw 21.33333333vw;}
    .company4 .toggle0 h4{ margin: 12vw 0 0; height: 9.6vw; border-radius: 1.6vw 1.6vw 0px 0px; font-size: 3.733333333vw;}
    .company4 .toggle0 p{ font-size: 3.466666667vw; line-height: 2.307692308;}
    .company4 .toggle0 figure ul li + li{ margin: 2.666666667vw 0 0;}
    .company4 .toggle0 dl dt{ font-size: 3.733333333vw;}
    .company4 .toggle0 dl dd{ margin: 1.5em 0 0; font-size: 3.466666667vw; line-height: 1.846153846;}
    .company4 .toggle0 * + p{ margin: 1.5em 0 0;}
    .company4 .toggle0 * + figure{ margin: 8vw 0 0;}
    .company4 .toggle0 dl * + dt{ margin: 10.66666667vw 0 0;}
}

.company4 .sec6{ margin: 0 calc(50% - 50vw); padding: 200px calc(50vw - 50%); background: #fff;}
.company4 .sec6 h3 + p{ margin: 45px 0 0; text-align: center; letter-spacing: .1em; font-weight: 400; font-size: 16px; font-family: ryo-gothic-plusn, sans-serif; line-height: 2.1875;}

@media only screen and (max-width: 736px) {
    .company4 .sec6{ margin: 0; padding: 26.66666667vw 0 0;}
    .company4 .sec6 h3 + p{ margin: 13.33333333vw 0 0; padding: 0 12vw; text-align: left; font-size: 3.466666667vw; line-height: 2.307692308;}
}

/* local nav
--------------------------------------------------- */
.company + nav{ margin: 0 calc(50% - 50vw); padding: 100px calc(50vw - 50%) 0; background: #4C4948; color: #fff; letter-spacing: normal; line-height: 1;}
.company1 + nav{ display: none;}
.company + nav h2{ display: flex; letter-spacing: .05em; font-size: 14px; font-family: acumin-pro, sans-serif; align-items: baseline;}
.company + nav h2 span{ margin: 0 1em 0 0; font-size: 26px;}
.company + nav > ul{ display: flex; margin: 60px 0 0; justify-content: space-between;}
.company + nav > ul > li{ width: 260px;}
.company + nav h3{ margin: 20px 0 0; letter-spacing: .1em; font-size: 18px; font-family: ryo-gothic-plusn, sans-serif;}
.company + nav > ul ul{ margin: 20px 0 0; letter-spacing: .1em; font-size: 12px; font-family: ryo-gothic-plusn, sans-serif;}
.company + nav > ul ul li{ position: relative; padding: 0 0 0 1em;}
.company + nav > ul ul li:after{ position: absolute; top: .4em; left: .2em; width: 3px; height: 3px; border-radius: 100%; background: #fff; content: "";}
.company + nav > ul ul li + li{ margin: 1em 0 0;}
.company + nav > ul a{ color: #fff; text-decoration: none;}

.company + nav aside{ margin: 100px 0 0;}
.company + nav aside a{ display: flex; margin: 0 calc(50% - 50vw); padding: 0 calc(50vw - 50%); height: 240px; background: url("/img/company2024/common/bg_sus.jpg") no-repeat top center / cover; color: #fff; text-decoration: none; align-items: center;}
.company + nav aside h2{ display: flex; letter-spacing: .05em; font-size: 14px; font-family: acumin-pro, sans-serif; align-items: baseline;}
.company + nav aside h2 span{ margin: 0 20px 0 0; font-size: 26px;}
.company + nav aside .btn{ display: flex; margin: 0 0 0 20px; width: 64px; height: 40px; border-radius: 20px; background: #fff; align-items: center; justify-content: center;}
.company + nav aside .btn img{ width: 11.7px;}

@media only screen and (max-width: 1024px) {
    .page .content .company + nav{ margin: 0; padding: 26.66666667vw 12vw;}
    .company + nav h2{ font-size: 3.2vw; justify-content: space-between;}
    .company + nav h2 span{ margin: 0; font-size: 4.266666667vw;}
    .company + nav > ul{ flex-direction: column; margin: 0; padding: 2.666666667vw 0 0; justify-content: flex-start;}
    .company + nav > ul > li{ margin: 5.333333333vw 0 0; width: 100%;}
    .company + nav figure{ display: none;}
    .company + nav h3{ margin: 0; font-size: 3.2vw;}
    .company + nav h3 a{ display: flex; padding: 0 0 0 5.333333333vw; width: 100%; height: 50px; border: 1px solid #7c7c7c; border-radius: 6px; background: #4c4948; box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.5); justify-content: flex-start; align-items: center;}
    .company + nav > ul ul{ display: none;}

    .company + nav aside{ margin: 10.66666667vw 0 0;}
    .company + nav aside a{ flex-direction: column; margin: 0; padding: 0; height: 24vw; background: url("/img/company2024/common/bg_sus_sp.jpg") no-repeat top center / cover; justify-content: center;}
    .company + nav aside h2{ flex-direction: column; letter-spacing: .1em; font-size: 2.133333333vw; align-items: center;}
    .company + nav aside h2 span{ margin: 0 0 2.133333333vw; font-size: 3.733333333vw;}
    .company + nav aside .btn{ display: block; margin: 2.133333333vw 0 0; width: 2.933333333vw; height: auto; border-radius: 0; background: none;}
    .company + nav aside .btn img{ width: 100%;}
}