@charset "UTF-8";

/*------------------------------------------------------------- common */

p {
   line-height: 2;
}

.fw_400 {
   font-weight: 400;
}

.max1000 {
   width: min(1000px, 85%);
   margin: 0 auto;
}

.max650 {
   max-width: 630px;
   margin: 0 auto 50px;
}

.interview #wrapper {
   margin-top: 150px;
   font-weight: 500;
}

.categoryTitle {
    display: flex;
    flex-direction: column;
    text-align: center;
}

.categoryTitle .en {
    font-size: 1.2rem;
    letter-spacing: .8rem;
    margin-bottom: 20px;
}

.categoryTitle .jp {
    font-size: 3rem;
    font-weight: 500;
    letter-spacing: .4rem;
    line-height: 1.5;
}

.interview .categoryTitle .en {
    color: #4bcefa;
}

.lower #wrapper {
   margin-top: 100px;
   font-weight: 500;
}

.lower #contents {
   margin-bottom: 200px;
}

.lower p {
   line-height: 1.8;
}

.lower .categoryTitle {
    margin-bottom: 50px;
}


/*------------------------------------------------------------- interview */

#categoryTitle {
   margin-bottom: 150px;
   position: relative;
}

#categoryTitle .mainBox {
   display: flex;
   justify-content: flex-end;
   position: relative;
}

#categoryTitle .mainBox .copy {
    font-size: 3.4rem;
    line-height: 2;
    letter-spacing: .5rem;
    position: absolute;
    top: 14%;
    left: 11%;
}

#categoryTitle .mainBox .copy.ts {
    text-shadow: 0 0 7px #ffffff, 0 0 7px #fff, 0 0 7px #fff, 0 0 7px #fff, 0 0 7px #fff, 0 0 7px #fff, 0 0 7px #fff, 0 0 7px #fff, 0 0 7px #fff, 0 0 7px #fff, 0 0 7px #fff, 0 0 7px #ffffff;
}

#categoryTitle .mainBox .imgBox {
    width: 78.6%;
    height: 46.667vw;
    background-position: left center;
    background-size: cover;
    background-repeat: no-repeat;
    border-top-left-radius: max(350px, 23.33vw);
    border-bottom-left-radius: max(350px, 23.33vw);
}

#categoryTitle .textBox {
    width: 670px;
    height: 280px;
    padding: 100px 0;
    background: url(../images/interview/main_bg.png) center / cover no-repeat;
    border-top-right-radius: 140px;
    border-bottom-right-radius: 140px;
    position: absolute;
    bottom: -50px;
    left: 0;
}

#categoryTitle .textBoxInner {
   display: flex;
   justify-content: center;
   align-items: center;
}

#categoryTitle .textBoxInner .nameBox  {
   margin-right: 45px;
}

#categoryTitle .textBoxInner .nameBox .charge {
   font-size: 1.5rem;
   color: #4bcefa;
   line-height: 1;
   background-color: #fff;
   border-radius: 18px;
   padding: 10px 20px;
   margin-bottom: 15px;
   display: inline-block;
}

#categoryTitle .textBoxInner .nameBox .name {
    font-size: 2.2rem;
    line-height: 1;
    letter-spacing: .4rem;
    text-align: center;
}

#categoryTitle .textBoxInner .profile {
    line-height: 1.6;
}

/*#chapter .deco_common {
    width: 21%;
}*/

/* work */

.interview #work {
    width: min(1150px, 85%);
    margin: 0 auto 100px;
    background: url(../images/interview/work_bg.jpg) center center / cover no-repeat;
    border-radius: 30px;
}

/*.interview #work .text {
    font-weight: 400;
}*/

.interview #work .workInner {
    padding: 70px 70px 100px;
}

.interview #work .workInner .categoryTitle {
    margin-bottom: 50px;
}

.interview #work .workListInner {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}

.interview #work .workListInner dt {
    font-size: 1.5rem;
    text-align: center;
    color: #4bcefa;
    border: 1px solid #4bcefa;
    border-radius: 23px;
    padding: 14px 10px;
    width: 20%;
}

.interview #work .workListInner dd {
    width: 74%;
}

.interview #work .workListInner dd .list1 {
    display: flex;
    justify-content: space-between;
    margin-bottom: 30px;
}

.interview #work .workListInner dd .list1 li {
    width: 32%;
    background-color: #fff;
    border-radius: 20px;
    padding: 40px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.interview #work .workListInner dd .list1 li .icon {
    width: 80px;
    margin-bottom: 10px;
}

.interview #work .workListInner dd .list1 li h4 {
    font-size: 1.8rem;
    color: #4bcefa;
    line-height: 1.3;
    text-align: center;
    margin-bottom: 20px;
}

.interview #work .workListInner dd .list1 li .text {
    line-height:1.5 ;
}

.interview #work .workListInner dd .list2 {
    display: flex;
    flex-wrap: wrap;
    margin: -10px -5px 0px;
}

.interview #work .workListInner dd .list2 li {
    font-size: 1.5rem;
    color: #fff;
    background-color: #89dffc;
    border-radius: 23px;
    padding: 15px 40px;
    margin: 10px 5px 0px;
}

.interview #work .workListInner dd .list2 li:nth-child(n+2) {
    /*margin-left: 15px;*/
}

.interview #work .workListInner:nth-child(n+3) {
    margin-top: 15px;
}

/* chapter */

.interview #chapter {
    margin-bottom: 150px;
}

.interview #chapter .chapterBox {
    display: flex;
    align-items: center;
}

.interview #chapter .chapterBox .imgBox {
    width: 51.5%;
    margin-right: 100px;
    position: relative;
}

.interview #chapter .chapterBox .imgBox .deco {
    width: 52%;
}

.interview #chapter .chapterBox .imgBox .cp_deco01 {
    top: -19%;
    left: 60%;
}

.interview #chapter .chapterBox .imgBox .cp_deco02 {
    top: -9%;
    left: -10%;
    z-index: -1;
}

.interview #chapter .chapterBox .textBox {
    width: 32%;
}

.interview #chapter .chapterBox .textBox .chapterTitle {
    display: flex;
    flex-direction: column;
    margin-bottom: 35px;
}

.interview #chapter .chapterBox .textBox .chapterTitle .en {
    font-size: 1.2rem;
    color: #4bcefa;
    letter-spacing: .5rem;
    position: relative;
    margin-bottom: 40px;
    padding-left: 80px;
}

.interview #chapter .chapterBox .textBox .chapterTitle .en:before {
    position: absolute;
    content: "";
    width: 60px;
    height: 1px;
    background-color: #4bcefa;
    top: 0;
    bottom: 0;
    left: 0;
    margin: auto;
}

.interview #chapter .chapterBox .textBox .chapterTitle .jp {
    font-size: 2.6rem;
    letter-spacing: .4rem;
    line-height: 1.8;
}

.interview #chapter .chapterBox:nth-child(n+2) {
    margin-top: 80px;
}

.interview #chapter .chapterBox:nth-child(even) {
    flex-direction: row-reverse;
}

.interview #chapter .chapterBox:nth-child(even) .imgBox {
    margin-right: 0;
    margin-left: 100px;
}

/* kurukuru */

.interview .kurukuru {
    margin-bottom: 120px;
    position: relative;
}

.interview .kurukuru:before {
    content: "";
    display: block;
    width: 100%;
    height: 312px;
    left: 0;
    top: 0;
    animation: kurukuru 180000s linear infinite;
    background-position: left top;
    background-size: 1660px 312px;
    background-repeat: repeat-x;
}

#iv_01 .kurukuru:before {
    background-image: url(../images/interview/01/iv_kurukuru.png);
}

#iv_02 .kurukuru:before {
    background-image: url(../images/interview/02/iv_kurukuru.png);
}

#iv_03 .kurukuru:before {
    background-image: url(../images/interview/03/iv_kurukuru.png);
}

@keyframes kurukuru {
    from { background-position: 0 center; }
    to { background-position: -6271232px center; }
}

/* qa */

.interview #qa {
    width: min(1150px, 85%);
    margin: 0 auto 120px;
    background: url(../images/interview/qa_bg.jpg) center center / cover no-repeat;
    border-radius: 30px;
}

.interview #qa .qaInner {
    padding: 100px;
}

.interview #qa .qaInner .categoryTitle {
    margin-bottom: 70px;
}

.interview #qa .qaInner .categoryTitle .en {
    font-family: inherit;
    font-weight: bold;
}

.interview #qa .qaListInner {
    display: flex;
    justify-content: space-between;
}

.interview #qa .qaList {
    display: flex;
    justify-content: space-between;
}

.interview #qa .qaList li {
    width: 29.7%;
}

.interview #qa .qaList li .qaBox {
    display: flex;
    align-items: center;
}

.interview #qa .qaList li .qaBox .circle_width {
    width: 50px;
    border-radius: 50%;
    background-color: #4bcefa;
    margin-right: 15px;
}

.interview #qa .qaList li .qaBox .circle_height {
    position: relative;
    padding-top: 100%;
    height: 0;
}

.interview #qa .qaList li .qaBox .maru {
    position: absolute;
    top: calc((100% - 4rem)/2);
    left: 0;
    right: 0;
    margin: auto;
    text-align: center;
    font-size: 2rem;
    color: #fff;
}

.interview #qa .qaList li .aBox .qaBox {
    margin: 30px 0 20px;
}

.interview #qa .qaList li .aBox .qaBox .circle_width {
    background-color: #fff;
}

.interview #qa .qaList li .aBox .qaBox .maru {
    color: #4bcefa;
}

.interview #qa .qaList li .qaBox .title {
    width: calc(100% - 65px);
    font-size: 2rem;
    line-height: 1.5;
}

.interview #qa .qaList li .aBox .text {
    line-height: 1.5;
    margin-left: 65px;
}

/* circle */

.interview #circle {
    position: relative;
    background: url(../images/interview/circle_bg.svg) center bottom / cover no-repeat;
    padding-bottom: 160px;
}

.interview #circle:after {
    
}

.interview #circle .circleInner {
    width: min(955px, 85%);
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
}

.interview #circle .circleInner li {
    width: 40%;
    position: relative;
}

.interview #circle .circleInner li:nth-child(n+2):after {
    position: absolute;
    content: "";
    width: 1px;
    height: 100%;
    background-color: #baecfd;
    top: 0;
    left: -25%;
}

.interview #circle .circleInner li .categoryTitle {
    margin-bottom: 30px;
}

.interview #circle .circleInner li .categoryTitle .jp {
    letter-spacing: .1rem;
}

.interview #circle .circleInner li .imgBox {
    width: 60%;
    margin: 0 auto 30px;
}

.interview #circle .circleInner li h3 {
    font-size: clamp(1.1rem, 1.33vw, 2rem);
    text-align: center;
    line-height: 1.4;
    color: #4bcefa;
    padding: 15px;
    margin-bottom: 20px;
    position: relative;
}

.interview #circle .circleInner li h3:before {
    position: absolute;
    display: block;
    content: "";
    top: 0;
    left: 0;
    background: url(../images/interview/kakko_l.svg) left top / contain no-repeat;
    width: 23px;
    height: 50px;
}

.interview #circle .circleInner li h3:after {
    position: absolute;
    display: block;
    content: "";
    bottom: 0;
    right: 0;
    background: url(../images/interview/kakko_r.svg) right bottom / contain no-repeat;
    width: 23px;
    height: 50px;
}

/* person */

.interview #person {
    background: url(../images/interview/person_bg.png) center top / 2440px no-repeat;
    padding: 100px 0 200px;
    position: relative;
}

.interview #person .deco {
    width: 10.5%;
}

.interview #person .pe_deco01 {
    top: -8%;
    left: 69%;
}

.interview #person .pe_deco02 {
    top: 12%;
    left: 20%;
    display: none;
}

.interview #person .personInner {
    width: 85%;
    margin: 0 auto;
}

.interview #person .categoryTitle {
    margin-bottom: 30px;
}

.interview #person .categoryTitle .sub {
    width: 370px;
    margin: 0 auto 15px;
}


/* message */

.interview #message {
    background: url(../images/interview/message_bg.svg) center -50px / contain no-repeat;
    position: relative;
    z-index: 1;
    margin-top: max(-150px, -10%);
}

.interview #message .messageInner {
    width: min(1120px, 85%);
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.interview #message .messageInner .imgBox {
    width: 38%;
}

.interview #message .messageInner .textBox {
    width: 51%;
}

.interview #message .messageInner .textBox .categoryTitle {
    text-align: left;
    margin-bottom: 40px;
}

/* staff */

.interview #staff {
    background: url(../images/interview/staff_bg.svg) center top / cover no-repeat;
    padding: 200px 0 150px;
    margin-top: -100px;
    position: relative;
}

.interview #staff .st_deco01 {
    /*width: min(160px, 10.8%);*/
    width: 10.8%;
    top: 4%;
    left: 76%;
    z-index: 1;
}

.interview #staff .staffInner {
    width: min(900px, 85%);
    margin: 0 auto;
    display: flex;
    justify-content: center;
    align-items: center;
}

.interview #staff .staffInner .categoryTitle {
    text-align: left;
    margin-right: 90px;
}

.interview #staff .staffInner .staffList {
    width: min(67%, 600px);
    margin: 0 auto;
    display: flex;
    justify-content: center;
}

.interview #staff .staffInner .staffList li {
    width: 48%;
}

.interview #staff .staffInner .staffList li:nth-child(n+2) {
    margin-left: 50px;
}

.interview #staff .staffInner .staffList li .imgBox {
    margin-bottom: 20px;
    overflow: hidden;
    width: min(280px, 18.6vw);
    height: min(280px, 18.6vw);
    border-radius: 50%;
}

.interview #staff .staffInner .staffList li .imgBox img  {
    transition: .3s;
}

.interview #staff .staffInner .staffList li a .part {
    font-size: 2rem;
    line-height: 1;
    display: flex;
    justify-content: center;
    align-items: center;
}

.interview #staff .staffInner .staffList li a .part .arrow {
    width: 30px;
    height: 30px;
    margin-left: 20px;
    transition: .3s;
}

/* HOVER */

.interview #staff .staffInner .staffList li a:hover .imgBox img  {
    transform: scale(1.1, 1.1);
}


/*------------------------------------------------------------- about */

.lower #pageTitle {
    background-position: center bottom;
    background-size: cover;
    background-repeat: no-repeat;
}

.lower #pageTitle .pageTitleInner {
    max-width: 1500px;
    margin: 0 auto;
    padding: 140px 0 180px;
    position: relative;
}

.lower #pageTitle .pageTitleInner .pt_deco01 {
    width: min(260px, 17.3%);
    top: 55%;
    left: 15%;
}

.lower #pageTitle .pageTitleInner .categoryTitle .en {
    font-size: 1.4rem;
}

.lower #pageTitle .pageTitleInner .categoryTitle .jp {
    font-size: 3.6rem;
}

.lower #lead .leadInner {
    padding: 130px 0 110px;
}

.lower #lead .title {
    font-size: 3.2rem;
    text-align: center;
    line-height: 1.5;
    margin-bottom: 50px;
}

.lower #lead .text {
    font-size: 1.6rem;
    text-align: center;
    line-height: 2.5;
}

.lower #lead .le_deco01 {
    width: min(278px, 28%);
    top: auto;
    bottom: -20%;
    left: 0;
    right: 0;
    margin: auto;
}

.lower .bg_up {
    background-position: center top;
    background-size: contain;
    background-repeat: no-repeat;
    padding-top: 250px;
    margin-top: -100px;
    /*height: 556px;*/
}

.lower .bg_down {
    background-position: center top;
    background-size: contain;
    background-repeat: no-repeat;
    /*padding-top: 470px;
    margin-top: -160px;*/
    padding-top: 32vw;
    margin-top: -12vw;
}

.lower .pd_bt {
    padding-bottom: 170px;
}

#about.lower .bg_up {
    background-image: url(../images/about/pageTitle_bg_up.svg);
}

#about.lower #lead {
    position: relative;
    z-index: 1;
}

.titleIcon {
    font-size: 2.6rem;
    text-align: center;
    line-height: 1.3;
    padding-top: 35px;
    margin-bottom: 40px;
    position: relative;
}

.titleIcon:before {
    position: absolute;
    content: "";
    width: 25px;
    height: 25px;
    top: 0;
    left: 0;
    right: 0;
    margin: auto;
}

/* map */

#about #map {
    margin-bottom: 100px;
}

#about #map .mapBox {
    position: relative;
    width: min(1100px, 85%);
    margin: 0 auto;
}

#about #map .mapBox > .imgBox {
    width: 78.27%;
    position: relative;
    z-index: 1;
}

#about #map .mapBox .imgBox .map_title {
    width: 23.2%;
    top: -8%;
    left: -8.5%;
}

#about #map .mapBox .textBox {
    width: 29%;
    position: absolute;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
}

#about #map .mapBox .textBox .imgBox {
    margin-bottom: 70px;
}

#about #map .mapBox .textBox .imgBox img {
    border-radius: 20px;
}

#about #map .mapBox .textBox .sub {
    font-size: 2.4rem;
    margin-bottom: 50px;
}

#about #map .mapBox .textBox .text {
    margin-bottom: 30px;
}

/* banks */

#about #banks {
    margin-bottom: 150px;
}

/* role */

#about #role {
    margin-bottom: 220px;
    position: relative;
    z-index: 1;
}

/* 丸ピラミッド */
#about .roleCircle {
    display: flex;
    justify-content: center;
    align-items: center;
    /*min-height: 100vh;*/
    margin: 100px 0;
}

#about .roleCircle .circleBox {
    display: grid;
    grid-template-rows: repeat(2, auto);
    grid-template-columns: repeat(2, 1fr);
    /*gap: 50px;*/
    max-width: 682px;
    position: relative;
}

#about .roleCircle .circle {
    width: 350px;
    height: 350px;
    background-color: #d6f4e9;
    border-radius: 50%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    /*padding: 20px;*/
    mix-blend-mode: multiply;
}

#about .roleCircle .circle:nth-child(1) {
    grid-column: 1 / 3;
    justify-self: center;
}

#about .roleCircle .circle:nth-child(2) {
    grid-column: 1;
    justify-self: end;
    background-color: #e0f4e1;
    margin-top: -60px;
    margin-right: -10px;
}

#about .roleCircle .circle:nth-child(3) {
    grid-column: 2;
    justify-self: start;
    background-color: #e3f0c8;
    margin-top: -60px;
    margin-left: -10px;
}

#about .roleCircle .circle h2 {
    width: 92px;
    margin-bottom: 10px;
}

#about .roleCircle .circle .icon {
    width: 92px;
    margin-bottom: 10px;
}

#about .roleCircle .circle p {
    font-size: 1.5rem;
    text-align: center;
    line-height: 1.5;
}


#about #role .roleListArea {
    margin-bottom: 100px;
}

#about #role .roleListArea > ul > li:nth-child(n+2) {
    margin-top: 65px;
}

#about #role .roleListArea .roleList .title {
    font-size: 2.6rem;
    text-align: center;
    color: #3ecd97;
    padding-top: 35px;
    margin-bottom: 40px;
    position: relative;
}

#about #role .roleListArea .no2 .roleList .title {
    color: #76cf79;
}

#about #role .roleListArea .no3 .roleList .title {
    color: #add15b;
}

#about #role .roleListArea .roleList .title:before {
    position: absolute;
    content: "";
    width: 25px;
    height: 25px;
    top: 0;
    left: 0;
    right: 0;
    margin: auto;
}

#about #role .roleListArea .no1 .roleList .title:before {
    background: url(../images/about/title_icon_01.svg) center bottom / contain no-repeat;
}

#about #role .roleListArea .no2 .roleList .title:before {
    background: url(../images/about/title_icon_02.svg) center bottom / contain no-repeat;
}

#about #role .roleListArea .no3 .roleList .title:before {
    background: url(../images/about/title_icon_03.svg) center bottom / contain no-repeat;
}

.commonListBox {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
}

.commonListBox li {
    width: calc((100% - 60px) / 3);
    background-color: #d6f4e9;
    border-radius: 30px;
    padding: 50px;
    position: relative;
}

#about #role .roleListArea .no2 .roleListBox li {
    background-color: #e0f4e1;
}

#about #role .roleListArea .no3 .roleListBox li {
    background-color: #e3f0c8;
}

.commonListBox li:nth-child(n+2) {
    margin-left: 30px;
}

.commonListBox li:before {
    position: absolute;
    content: "";
    width: 125px;
    height: 5px;
    background-color: #3ecd97;
    top: 0;
    left: 0;
    right: 0;
    margin: auto;
}

#about #role .roleListArea .no2 .roleListBox li:before {
    background-color: #76cf79;
}

#about #role .roleListArea .no3 .roleListBox li:before {
    background-color: #add15b;
}

.commonListBox li {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.commonListBox li .name {
    font-size: 2rem;
    text-align: center;
    line-height: 1.2;
    margin-bottom: 30px;
}

.commonListBox li .imgBox {
    width: min(182px, 86%);
    margin-bottom: 30px;
}

#about #role .connection {
    background-color: #fdfaf1;
    border-radius: 30px;
    padding: 70px;
    position: relative;
}

#about #role .connection .ro_deco01 {
    width: 40.8%;
    top: auto;
    bottom: -12%;
    left: 54%;
}

#about #role .connection h3 {
    font-size: 2.6rem;
    text-align: center;
    margin-bottom: 40px;
}

#about #role .connection .text {
}

#about #role .connection .connectionList {
    display: flex;
    flex-wrap: wrap;
}

#about #role .connection .connectionList li {
    width: calc((100% - 60px) / 4);
    margin-right: 20px;
    margin-bottom: 20px;
    border-radius: 50%;
}

#about #role .connection .connectionList li:nth-child(4n) {
    margin-right: 0;
}

#about #role .connection .connectionList li:nth-last-child(-n+2) {
    margin-bottom: 0;
}

#about #role .connection .connectionList li a {
    text-align: center;
    color: #fff;
    display: block;
}

#about #role .connection .connectionList li a {
    position: relative;
}

#about #role .connection .connectionList li a .imgBox {
    position: relative;
    overflow: hidden;
    padding-top: min(200px, 100%);
    border-radius: 50%;
    background-size: 100%;
    background-position: center;
    transition: .3s;
    aspect-ratio: 1 / 1; /* 正円を維持 */
    contain: strict; /* 内部要素だけに描画を限定 */
}

#about #role .connection .connectionList li a:hover .imgBox {
    background-size: 110%;
    background-position: center;
}

#about #role .connection .connectionList li a .imgBox:before{
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    background: rgb(62 205 151 / 85%);
    position: absolute;
    left: 0;
    top: 0;
    z-index: 0;
    transform: translateZ(0); /* Safari対策 */
}

#about #role .connection .connectionList li:nth-child(2n) a .imgBox:before{
    background: rgb(118 207 121 / 85%);
}

#about #role .connection .connectionList li a .name {
    font-size: clamp(1.2rem, 1.06vw, 1.6rem);
    line-height: 1.8;
    text-align: center;
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    margin: auto;
    transform: translateY(-50%);
}

#about #role .connection .connectionList li a .arrow {
    position: absolute;
    bottom: 10px;
    right: 10px;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background-color: #008776;
    transition: .3s;
}

#about #role .connection .connectionList li:nth-child(2n) a .arrow {
    background-color: #009806;
}

#about #role .connection .connectionList li a .arrow:after {
    width: 10px;
    height: 7px;
}

/* nakawork */

#about #nakawork {
}

#about #nakawork .nakaworkList > li:nth-child(n+2) {
    margin-top: 100px;
}

#about #nakawork .nakaworkList > li .title {
    font-size: 2.4rem;
    text-align: center;
    color: #fff;
    line-height: 60px;
    background-color: #3ecd97;
    border-radius: 30px;
    margin-bottom: 40px;
    position: relative;
}

#about #nakawork .nakaworkList > li .title:after {
    content: "";
    display: block;
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translate(-50%, 100%);
    width: 0;
    height: 0;
    border-style: solid;
    border-right: 8px solid transparent;
    border-left: 8px solid transparent;
    border-top: 14px solid #3ecd97;
    border-bottom: 0;
}

#about #nakawork .nakaworkList > li .inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 25px;
}

#about #nakawork .nakaworkList > li:nth-child(even) .inner {
    flex-direction: row-reverse;
}

#about #nakawork .nakaworkList > li .inner .imgBox {
    width: 50%;
    position: relative;
}

#about #nakawork .nakaworkList > li .inner .imgBox a {
}

#about #nakawork .nakaworkList > li .inner .imgBoxInner {
    position: relative;
}

#about #nakawork .nakaworkList > li .inner .imgBoxInner .innerImg {
    overflow: hidden;
    position: relative;
    border-radius: 350px 350px 0 0; /* 上部をアーチ型にする */
}

#about #nakawork .nakaworkList > li .inner .imgBoxInner .innerImg img {
    transition: .3s;
}

#about #nakawork .nakaworkList > li .inner .imgBoxInner .deco {
    width: 39%;
    top: auto;
}

#about #nakawork .nakaworkList > li .inner .imgBoxInner .w_illust_01 {
    bottom: -2%;
    left: -20%;
}

#about #nakawork .nakaworkList > li .inner .imgBoxInner .w_illust_02 {
    bottom: -3%;
    left: -17%;
}

#about #nakawork .nakaworkList > li .inner .imgBoxInner .w_illust_03 {
    bottom: -7%;
    left: -19%;
}

#about #nakawork .nakaworkList > li .inner .imgBox .btnBox {
    position: absolute;
    bottom: -10px;
    right: -10px;
    font-size: 1.5rem;
    color: #fff;
    border-radius: 23px;
    background-color: #3ecd97;
    padding: 10px 35px;
}

#about #nakawork .nakaworkList > li .inner .imgBox .btnBox p {
    display: flex;
    align-items: center;
}

#about #nakawork .nakaworkList > li .inner .imgBox .btnBox .arrow {
    display: block;
    background-color: transparent;
    margin-left: 40px;
}

#about #nakawork .nakaworkList > li .inner .imgBox .btnBox .arrow:after {
    width: 12px;
    height: 10px;
}

#about #nakawork .nakaworkList > li .inner .textBox {
    width: 42%;
}

#about #nakawork .nakaworkList > li .inner .textBox h4 {
    font-size: 2rem;
    text-align: center;
    padding-bottom: 20px;
    margin-bottom: 30px;
    position: relative;
}

#about #nakawork .nakaworkList > li .inner .textBox h4:after {
    position: absolute;
    content: "";
    width: 35px;
    height: 1px;
    background-color: #3ecd97;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
}

#about #nakawork .nakaworkList > li .inner .textBox .textList {
    display: flex;
    justify-content: center;
    margin-bottom: 40px;
}

#about #nakawork .nakaworkList > li .inner .textBox .textList li {
    width: calc((100% - 50px) / 3);
}

#about #nakawork .nakaworkList > li .inner .textBox .textList li:nth-child(n+2) {
    margin-left: 25px;
}

#about #nakawork .nakaworkList > li .inner .textBox .textList li figure {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

#about #nakawork .nakaworkList > li .inner .textBox .textList li figure img {
    display: block;
    margin-bottom: 20px;
    /*box-shadow: 0px 0px 7px rgb(62 205 151 / 25%);*/
    filter: drop-shadow(0px 0px 7px rgba(62, 205, 151, 0.25));
}

#about #nakawork .nakaworkList > li .inner .textBox .textList li figure figcaption {
    font-size: 1.5rem;
    color: #3ecd97;
    text-align: center;
    line-height: 1.4;
}

/* no2 */
#about #nakawork .nakaworkList > li#nw_no2 .title,
#about #nakawork .nakaworkList > li#nw_no2 .inner .textBox h4:after,
#about #nakawork .nakaworkList > li#nw_no2 .inner .imgBox .btnBox {
    background-color: #76cf79;
}

#about #nakawork .nakaworkList > li#nw_no2 .title:after {
    border-top: 14px solid #76cf79;
}

#about #nakawork .nakaworkList > li#nw_no2 .inner .textBox .textList li figure figcaption {
    color: #76cf79;
}

#about #nakawork .nakaworkList > li#nw_no2 .inner .textBox .textList li figure img {
    filter: drop-shadow(0px 0px 7px rgba(118, 207, 121, 0.25));
}

/* no3 */
#about #nakawork .nakaworkList > li#nw_no3 .title,
#about #nakawork .nakaworkList > li#nw_no3 .inner .textBox h4:after,
#about #nakawork .nakaworkList > li#nw_no3 .inner .imgBox .btnBox {
    background-color: #add15b;
}

#about #nakawork .nakaworkList > li#nw_no3 .title:after {
    border-top: 14px solid #add15b;
}

#about #nakawork .nakaworkList > li#nw_no3 .inner .textBox .textList li figure figcaption {
    color: #add15b;
}

#about #nakawork .nakaworkList > li#nw_no3 .inner .textBox .textList li figure img {
    filter: drop-shadow(0px 0px 7px rgba(173, 209, 91, 0.25));
}

/* HOVER */

/*#about #nakawork .nakaworkList > li .inner .imgBox a .imgBoxInner > img {
    transition: .3s;
}*/

/*#about #nakawork .nakaworkList > li .inner .imgBox a:hover .imgBoxInner > img {
    opacity: .5;
}*/

#about #nakawork .nakaworkList > li .inner .imgBox a:hover .imgBoxInner .innerImg img {
    transform: scale(1.1);
}

#about #nakawork .nakaworkList > li .inner .imgBox a:hover .btnBox .arrow {
    transform: translateX(10px);
}


/*------------------------------------------------------------- recruit */

#recruit.lower #pageTitle .pageTitleInner .pt_deco01 {
    top: 45%;
}

#recruit.lower .bg_up {
    background-image: url(../images/recruit/pageTitle_bg_up.svg);
}

#recruit.lower #lead .leadInner {
    padding-bottom: 150px;
}

#recruit .mynaviBtn {
    max-width: 720px;
    margin: 50px auto 0;
}

#recruit .mynaviBtn a {
    padding: 33px 50px;
    border-radius: 60px;
    justify-content: space-between;
}

#recruit .mynaviBtn a .arrow {
    background-color: #fff;
}

#recruit .mynaviBtn a img {
    width: 252px;
}

#recruit #careerRec .careerRecTable {
    margin-bottom: 100px;
}

#recruit #careerRec .careerRecTable dl {
    display: flex;
    align-items: flex-start;
}

#recruit #careerRec .careerRecTable dl:nth-child(n+2) {
    margin-top: 30px;
}

#recruit #careerRec .careerRecTable dl dt {
    width: 22%;
    margin-right: 50px;
    padding: 17px 10px;
    border-radius: 25px;
    color: #fff;
    text-align: center;
    font-weight: 600;
}

#recruit #careerRec .careerRecTable dl dd {
    width: calc((100% - 22%) - 50px);
    padding-top: 9px;
    line-height: 2.2;
}

#recruit #careerRec .careerRecTable dl dd .inner {
    margin-top: 30px;
}

#recruit #careerRec .careerRecTable dl dd .asteriskListBox {
    margin-left: 1em;
}

#recruit #careerRec .titleIcon:before {
    background: url(../images/recruit/title_icon_01.svg) center bottom / contain no-repeat;
}

#recruit #careerRec .careerRatioTable table {
    width: 100%;
    border-collapse: collapse;
    font-weight: 600;
    table-layout: fixed;
}

#recruit #careerRec .careerRatioTable th, td {
    border: 1px solid #69a8ff;
    padding: 15px;
    text-align: center;
}

#recruit #careerRec .careerRatioTable th {
    line-height: 1.3;
}

#recruit #careerRec .careerRatioTable th.space {
    width: 47%;
}

#recruit #careerRec .careerRatioTable th:not(.space) {
    width: calc((100% - 47%) / 3);
}

#recruit #careerRec .careerRatioTable .label {
    background-color: #e7f1ff;
    line-height: 1.3;
}

#recruit #careerRec .careerRatioTable .data {
    background-color: #fdfaf1;
}

/* フッター調整 */
#recruit #footer .footerInner .footerEntryLink {
    display: none;
}

#recruit #footer .footerInner {
    padding-top: 210px;
}

#recruit #footer .footerInner:after {
    top: 26%;
}


/*------------------------------------------------------------- environment */

#environment.lower .bg_up {
    background-image: url(../images/environment/pageTitle_bg_up.svg);
}

#environment.lower .bg_down {
    background-image: url(../images/environment/pageTitle_bg_down.svg);
}

#environment.lower #pageTitle .pageTitleInner .pt_deco01 {
    top: 49%;
    left: 70%;
}

#environment .commonListBox li {
    background-color: #fee2e2;
}

/* training */

#environment #training {
    position: relative;
    z-index: 1;
}

#environment #training .trainingBox dl {
    display: flex;
    line-height: 1.4;
}

#environment #training .trainingBox dl:nth-child(n+2) {
    margin-top: 20px;
}

#environment #training .trainingBox dl dt {
    width: 130px;
    margin-right: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-weight: 600;
    text-align: center;
    background-color: #fc8c8c;
    position: relative;
}

#environment #training .trainingBox dl.up dt {
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
}

#environment #training .trainingBox dl.middle dt {
    margin-top: 20px;
}

#environment #training .trainingBox dl.down dt {
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
    margin-top: 20px;
}

#environment #training .trainingBox dl.up dt:after,
#environment #training .trainingBox dl.middle dt:before,
#environment #training .trainingBox dl.middle dt:after,
#environment #training .trainingBox dl.down dt:before {
    position: absolute;
    content: "";
    width: 100%;
    height: 30px;
    left: 0;
    background-size: cover;
    background-repeat: no-repeat;
}

#environment #training .trainingBox dl.up dt:after,
#environment #training .trainingBox dl.middle dt:after {
    background-image: url(../images/environment/training_arrow_down.svg);
    background-position: center bottom;
    bottom: -20px;
}

#environment #training .trainingBox dl.middle dt:before,
#environment #training .trainingBox dl.down dt:before {
    background-image: url(../images/environment/training_arrow_up.svg);
    background-position: center top;
    top: -20px;
}

#environment #training .trainingBox dl dd {
    width: calc(100% - 150px);
    background-color: #fdfaf1;
    border-radius: 10px;
    padding: 20px 40px;
}

#environment #training .trainingBox dl.middle dd {
    padding: 40px 40px;
}

#environment #training .trainingBox dl dd .monthBox {
    display: flex;
    align-items: center;
    font-weight: 600;
}

#environment #training .trainingBox dl dd .monthBox .month {
    border: 1px solid;
    margin-right: 15px;
    padding: 0 15px;
    border-radius: 15px;
    text-indent: .3rem;
}

#environment #training .trainingBox dl dd .trainingBoxList {
    display: flex;
    justify-content: space-between;
    margin-top: 15px;
}

#environment #training .trainingBox dl dd .trainingBoxList li {
    width: 48%;
    background-color: #fff;
    border-radius: 30px;
    padding: 40px;
}

#environment #training .trainingBox dl dd .trainingBoxList li h3 {
    text-align: center;
    margin-bottom: 20px;
}

/* careersteps */

#environment #careersteps .caseBox {
    background-color: #fdfaf1;
    border-radius: 30px;
    padding: 70px;
    position: relative;
}

#environment #careersteps .caseBox:nth-child(n+2) {
    margin-top: 100px;
}

#environment #careersteps .caseBox .title {
    position: absolute;
    top: -24px;
    left: 0;
    right: 0;
    margin: auto;
    width: min(800px, 80%);
}

#environment #careersteps .caseBox .title span {
    font-size: 1.4rem;
    font-weight: 600;
    color: #fff;
    text-align: center;
    letter-spacing: .8rem;
    line-height: 48px;
    border-radius: 24px;
    position: relative;
    display: block;
}

#environment #careersteps .caseBox .title span:after {
    content: "";
    display: block;
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translate(-50%, 100%);
    width: 0;
    height: 0;
    border-style: solid;
    border-right: 8px solid transparent;
    border-left: 8px solid transparent;
    border-top: 14px solid #fb6262;
    border-bottom: 0;
}

#environment #careersteps .caseBox .person {
    display: flex;
    align-items: center;
}

#environment #careersteps .caseBox .person figure {
    width: 20%;
    margin-right: 40px;
}

#environment #careersteps .caseBox .person figcaption {
    font-size: 1.8rem;
    text-align: center;
    margin-top: 15px;
}

#environment #careersteps .caseBox .person .comment {
    font-size: 2rem;
    margin-top: -20px;
}

#environment #careersteps .caseBox .caseBoxList {
    display: flex;
    justify-content: space-between;
    position: relative;
    margin-top: -90px;
}

#environment #careersteps .caseBox .caseBoxList:after {
    position: absolute;
    content: "";
    display: block;
    width: 78%;
    height: 1px;
    bottom: 28px;
    left: 0;
    right: 0;
    margin: auto;
}

#environment #careersteps .caseBox .caseBoxList .inner {
    display: flex;
    flex-direction: column-reverse;
    width: calc((100% - 60px) / 4);
    position: relative;
}

#environment #careersteps .caseBox .caseBoxList .inner:nth-child(n+2) {
    margin-left: 20px;
}

#environment #careersteps .caseBox .caseBoxList .inner dd {
    background-color: #fff;
    border-radius: 30px;
    padding: 40px;
}

#environment #careersteps .caseBox .caseBoxList .inner dd .year {
    font-weight: 600;
    text-align: center;
    padding-bottom: 20px;
    margin-bottom: 20px;
    position: relative;
}

#environment #careersteps .caseBox .caseBoxList .inner dd .year:after {
    position: absolute;
    content: "";
    width: 25px;
    height: 1px;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
}

#environment #careersteps .caseBox .caseBoxList .inner dt {
    font-size: 1.2rem;
    font-weight: 600;
    text-align: center;
    margin-top: 20px;
    padding-top: 25px;
    position: relative;
}

#environment #careersteps .caseBox .caseBoxList .inner dt:before {
    position: absolute;
    content: "";
    display: block;
    width: 17px;
    height: 17px;
    border-radius: 50%;
    top: 0;
    left: 0;
    right: 0;
    margin: auto;
}

#environment #careersteps .caseBox .caseBoxList .inner:nth-child(1) {
    margin-top: 19%;/*166px*/
}

#environment #careersteps .caseBox .caseBoxList .inner:nth-child(2) {
    margin-top: 13%;/*112px*/
}

#environment #careersteps .caseBox .caseBoxList .inner:nth-child(3) {
    margin-top: 6.5%;/*58px*/
}

#environment #careersteps .caseBox .caseBoxList .inner .deco {
    width: 27%;
    left: 0;
    right: 0;
    margin: auto;
}

#environment #careersteps #no1.caseBox .caseBoxList .inner:nth-child(4) .casedeco_01 {
    top: -35px;
}

#environment #careersteps #no2.caseBox .caseBoxList .inner:nth-child(2) .casedeco_02 {
    width: 22%;
    top: -20px;
}

/* 3つ並び */

#environment #careersteps #no2.caseBox .caseBoxList {
    margin-top: -120px;
}

#environment #careersteps #no2.caseBox .caseBoxList .inner {
    width: calc((100% - 40px) / 3);
}

#environment #careersteps #no2.caseBox .caseBoxList:after {
    width: 70%;
}

/* easytowork */

#environment #easytowork .easytoworkList {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
}

#environment #easytowork .easytoworkList li {
    width: calc((100% - 100px) / 3);
    margin-right: 50px;
}

#environment #easytowork .easytoworkList li:nth-child(3n) {
    margin-right: 0;
}

#environment #easytowork .easytoworkList li:nth-child(n+4) {
    margin-top: 80px;
}

#environment #easytowork .easytoworkList li .circleBoxArea {
    width: 100%;
    padding-top: 100%;
    position: relative;
}

#environment #easytowork .easytoworkList li .circleBoxArea:before {
    display: block;
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: url(../images/environment/circleBox_cicle_bg.png) center center / contain no-repeat;
    z-index: 0;
}

#environment #easytowork .easytoworkList li .circleBoxArea:after {
    position: absolute;
    content: "";
    width: 1px;
    height: 40px;
    top: -20px;
    left: 0;
    right: 0;
    margin: auto;
}

#environment #easytowork .easytoworkList li .circleBox {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    z-index: 1;
    position: absolute;
    left: 0;
    top: 0;
    text-align: center;
    padding-top: 15%;
}

#environment #easytowork .easytoworkList li .circleBox .number {
    font-size: 1.8rem;
    font-weight: 600;
    margin-bottom: 15px;
}

#environment #easytowork .easytoworkList li .circleBox .imgBox {
    width: 26%;
    margin-bottom: 10px;
}

#environment #easytowork .easytoworkList li .circleBox .title {
    font-size: clamp(1.6rem, 1.33vw, 2rem);
    text-align: center;
    font-weight: 600;
    line-height: 1.5;
}

#environment #easytowork .easytoworkList li .text {
    width: 80%;
    position: relative;
    margin: -35px auto 0;
}


/*------------------------------------------------------------- SPのみスワイプ */

.spOverflow {
    overflow-x: unset;
}

.swipeImgbox {
    /*overflow-x: scroll;
    padding: 25px 0 35px 25px;*/
}

.howToScroll.is-ua-sp {
    position: absolute;
    display: block;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
}

.howToScroll.is-ua-sp .howToScrollInr {
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    background-color: rgba(255,255,255,0.7);
    z-index: 1;
}

.howToScroll.is-ua-sp .howToScrollInr::after {
    content: "";
    display: block;
    width: 70%;
    height: 100%;
    position: absolute;
    left: 15%;
    top: 0;
    z-index: 2;
    background: url(../images/common/swipe_icon.svg)center center / 60% auto no-repeat;
    animation: slide 1500ms linear infinite;
    transition: all 300ms;
}

.howToScroll.is-ua-sp.delete,
.howToScroll.is-ua-sp .howToScrollInr.delete {
    animation: none;
    transition: .3s;
    opacity: 0;
    visibility: hidden;
}
    
@keyframes slide {
    0% { transform: translateX(10px); opacity: 0;}
    3% { transform: translateX(10px); opacity: 1;}
    100% { transform: translateX(-10px); opacity: 0; }
}

.personImgBox {
    max-width: 844px;
    margin: 0 auto;
}

.personImgBox .inner {
    width: 100%;
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
    padding-top: 59%;
    position: relative;
}

.banksImgBox {
    width: min(890px, 85%);
    margin: 70px auto 0;
}

.banksImgBox .inner {
    width: 100%;
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
    padding-top: 33.708%;
    position: relative;
}





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

1200px以下
                                    
------------------------------------------------------------------------------------*/

@media screen and (max-width:1200px) {

    /*------------------------------------------------------------- interview */

    #categoryTitle .textBox {
        width: 560px;
        height: 220px;
        padding: 70px 0;
        bottom: -90px;
    }

    #categoryTitle .mainBox .copy {
        font-size: 2.8rem;
    }

    .interview #work .workListInner {
        display: block;
    }

    .interview #work .workListInner dt {
        width: 100%;
        margin-bottom: 15px;
    }

    .interview #work .workListInner dd {
        width: 100%;
    }

    .interview #work .workListInner dd .list1 {
        margin-bottom: 40px;
    }

    .interview #work .workListInner:nth-child(n+3) {
        margin-top: 40px;
    }

    .interview #qa .qaInner {
        padding: 70px;
    }

    .interview #person {
        background-size: 1800px;
    }

    .interview #staff .st_deco01 {
        top: 8%;
    }

    /*------------------------------------------------------------- about */

    /* map */

    #about #map .mapBox .textBox {
        top: 5%;
        transform: translateY(0);
    }

    /*------------------------------------------------------------- environment */

    #environment #careersteps .caseBox .caseBoxList {
        margin-top: 0;
    }

}





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

以下 TAB 用
                                    
------------------------------------------------------------------------------------*/

@media screen and (max-width:900px) {

    .lower #wrapper {
        margin-top: 60px;
    }

    /*------------------------------------------------------------- interview */
    
    #categoryTitle .mainBox .copy {
        font-size: 2.2rem;
    }

    #categoryTitle .textBox {
        width: 480px;
        height: 130px;
        padding: 30px 0;
        bottom: -90px;
    }

    .interview #chapter .chapterBox {
        display: block;
    }

    #categoryTitle .textBoxInner .nameBox .charge {
        font-size: 1.4rem;
    }

    #categoryTitle .textBoxInner .nameBox .name {
        font-size: 1.8rem;
    }

    #categoryTitle .textBoxInner .profile {
        font-size: 1.4rem;
    }

    .interview #chapter .chapterBox .imgBox {
        width: 93%;
        margin-right: 0;
        margin-bottom: 40px;
    }

    .interview #chapter .chapterBox .textBox {
        width: 85%;
        margin: 0 auto;
    }

    .interview #qa .qaList {
        display: block;
    }

    .interview #qa .qaList li {
        width: 100%;
    }

    .interview #qa .qaList li:nth-child(n+2) {
        margin-top: 50px;
    }

    .interview #qa .qaList li .aBox .qaBox {
        margin: 15px 0 10px;
    }

    .interview .categoryTitle .en {
        line-height: 1.3;
    }

    .interview #circle .circleInner li .categoryTitle .jp {
        font-size: 2.5rem;
    }

    .interview #person {
        background-size: 1400px;
        padding-bottom: 80px;

    }

    .interview #person .pe_deco01 {
         top: -5%; 
        left: 84%;
    }

    .interview #person .pe_deco02 {
         top: 2%; 
        left: 2%;
    }

    .interview #message {
        margin-top: 0;
    }

    .interview #staff .staffInner {
        display: block;
    }

    .interview #staff .st_deco01 {
        top: 16%;
    }

    .interview #staff .staffInner .categoryTitle {
        text-align: center;
        margin-right: 0;
        margin-bottom: 30px;
    }

    .interview #staff .staffInner .staffList li {
        display: flex;
        flex-direction: column;
        align-items: center;
    }


    /*------------------------------------------------------------- about */

    .lower #pageTitle {
        background-size: contain;
    }

    .lower #pageTitle .pageTitleInner {
        padding: 70px 0;
    }

    .lower #pageTitle .pageTitleInner .pt_deco01 {
        top: 65%;
        left: 10%;
    }

    .lower #pageTitle .pageTitleInner .categoryTitle .jp {
        font-size: 2.8rem;
    }

    .lower #lead .leadInner {
        padding: 80px 0 140px;
    }

    .lower #lead .title {
        font-size: 2.2rem;
    }

    /* map */

    #about #map .mapBox {
        width: 100%;
    }

    #about #map .mapBox > .imgBox {
        width: 100%;
        margin-bottom: 50px;
    }

    #about #map .mapBox .imgBox .spOverflow picture {
        width: 85%;
        margin: 0 auto;
    }

    #about #map .mapBox .imgBox .map_title {
        top: -4%;
        left: 7%;
    }

    #about #map .mapBox .textBox {
        width: 85%;
        margin: 0 auto;
        position: static;
        transform: translateY(0);
    }

    #about #map .mapBox .kakudaiBox {
        width: 70%;
        margin: 0 auto 20px;
        position: relative;
        padding-top: 26%;
    }

    #about #map .mapBox .kakudaiBox .imgBox img {
        border-radius: 20px;
    }

    #about #map .mapBox .kakudaiBox .map_title {
        width: 50%;
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        margin: auto;
    }

    /* role */

    #about .roleCircle .circle {
        width: 300px;
        height: 300px;
    }

    .commonListBox {
        display: block;
    }

    .commonListBox li {
        width: 100%;
    }

    .commonListBox li:nth-child(n+2) {
        margin-left: 0;
        margin-top: 30px;
    }

    #about #role .connection .connectionList li {
        width: calc((100% - 20px) / 2);
    }

    #about #role .connection .connectionList li:nth-child(2n) {
        margin-right: 0;
    }

    #about #role .connection .connectionList li a .imgBox {
        padding-top: 100%;
    }

    #about #role .connection .connectionList li a .arrow {
        bottom: 10%;
        right: 10%;
    }

    #about #nakawork .nakaworkList > li .inner {
        display: block;
    }

    #about #nakawork .nakaworkList > li .inner .imgBox {
        width: 100%;
        margin-bottom: 70px;
    }

    #about #nakawork .nakaworkList > li .inner .imgBoxInner .deco {
        width: 30%;
    }

    #about #nakawork .nakaworkList > li .inner .imgBoxInner .w_illust_01 {
        left: -8%;
    }

    #about #nakawork .nakaworkList > li .inner .imgBoxInner .w_illust_02 {
        left: -8%;
    }

    #about #nakawork .nakaworkList > li .inner .imgBoxInner .w_illust_03 {
        left: -8%;
    }

    #about #nakawork .nakaworkList > li .inner .textBox {
        width: 100%;
    }


    /*------------------------------------------------------------- environment */

    #environment #training .trainingBox dl dt {
        width: 100px;
    }

    #environment #training .trainingBox dl dd {
        width: calc(100% - 120px);
    }

    #environment #easytowork .easytoworkList li {
        width: calc((100% - 50px) / 2);
    }

    #environment #easytowork .easytoworkList li:nth-child(3n) {
        margin-right: 50px;
    }

    #environment #easytowork .easytoworkList li:nth-child(2n) {
        margin-right: 0;
    }

    #environment #easytowork .easytoworkList li:nth-child(n+3) {
        margin-top: 80px;
    }

    #environment #easytowork .easytoworkList li .circleBox {
        justify-content: center;
        padding-top: 0;
    }

    #environment #easytowork .easytoworkList li .circleBox .number {
        margin-bottom: 10px;
    }

    #environment #easytowork .easytoworkList li .circleBox .imgBox {
        margin-bottom: 5px;
    }

    #environment #easytowork .easytoworkList li .text {
        margin-top: -20px;
    }

    #environment #careersteps .caseBox .person figure {
        width: 30%;
    }

    #environment #careersteps .caseBox .person .comment {
        font-size: 1.8rem;
        width: calc(100% -(30% + 40px));
    }

    #environment #careersteps .caseBox .caseBoxList:after {
        width: 1px;
        height: 75%;
        top: 50%;
        bottom: auto;
        transform: translateY(-52%);
        left: 30px;
        right: auto;
    }

    #environment #careersteps .caseBox .caseBoxList {
        display: block;
        margin-top: 50px;
    }

    #environment #careersteps .caseBox .caseBoxList .inner {
        width: calc(100% - 50px);
        margin-left: 50px;
        flex-direction: row;
        align-items: center;
        position: relative;
    }

    #environment #careersteps .caseBox .caseBoxList .inner:nth-child(1),
    #environment #careersteps .caseBox .caseBoxList .inner:nth-child(2),
    #environment #careersteps .caseBox .caseBoxList .inner:nth-child(3) {
        margin-top: auto;
    }

    #environment #careersteps .caseBox .caseBoxList .inner:nth-child(n+2) {
        margin-left: 50px;
        margin-top: 20px;
    }

    #environment #careersteps .caseBox .caseBoxList .inner dt {
        font-size: 1rem;
        margin-top: 0;
        padding-top: 0;
        writing-mode: vertical-lr;
        position: absolute;
        left: -44px;
        text-align: center;
        letter-spacing: .1rem;
    }

    #environment #careersteps .caseBox .caseBoxList .inner dt:before {
        top: 50%;
        transform: translateY(-50%);
        left: 17px;
        right: auto;
    }

    #environment #careersteps .caseBox .caseBoxList .inner .deco,
    #environment #careersteps #no2.caseBox .caseBoxList .inner:nth-child(2) .casedeco_02 {
        width: 70px;
    }

    #environment #careersteps #no1.caseBox .caseBoxList .inner:nth-child(4) .casedeco_01 {
        top: auto;
        bottom: -30px;
    }

    #environment #careersteps #no2.caseBox .caseBoxList {
        margin-top: 50px;
    }

    #environment #careersteps #no2.caseBox .caseBoxList:after {
        width: 1px;
        height: 67%;
        transform: translateY(-50%);
    }

    #environment #careersteps #no2.caseBox .caseBoxList .inner {
        width: calc(100% - 50px);
    }

    #environment #careersteps #no2.caseBox .caseBoxList .inner:nth-child(2) .casedeco_02 {
        top: -35px;
    }

}





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

以下 SP 用
                                    
------------------------------------------------------------------------------------*/

@media screen and (max-width:600px) {
    
    .categoryTitle .en {
        font-size: 1rem;
        letter-spacing: .5rem;
        margin-bottom: 5px;
    }

    .categoryTitle .jp {
        font-size: 1.8rem;
        letter-spacing: .3rem;
    }

    .lower #contents {
        margin-bottom: 100px;
    }

    .titleIcon {
        font-size: 1.8rem;
        margin-bottom: 30px;
    }

    .max650 {
        margin-bottom: 25px;
    }

    /*------------------------------------------------------------- interview */

    #categoryTitle .mainBox .copy {
        font-size: 1.8rem;
        line-height: 1.6;
        letter-spacing: .15rem;
        top: 7%;
        left: 7%;
    }

    #categoryTitle .mainBox .imgBox {
        width: 93%;
        margin-top: 105px;
        height: 318px;
        padding: 100px 0;
        /*background: url(../images/interview/01/main.png) 46% center / cover no-repeat;*/
        background-position: 46% center;
        background-size: cover;
        background-repeat: no-repeat;
        border-top-left-radius: 159px;
        border-bottom-left-radius: 159px;
    }

    #categoryTitle .textBox {
        width: 85%;
        height: 170px;
        padding: 38px 0 38px 12%;
        bottom: -110px;
    }

    #categoryTitle .textBoxInner {
        display: block;
    }

    #categoryTitle .textBoxInner .nameBox {
        margin-right: 0;
        margin-bottom: 12px;
        display: flex;
        align-items: center;
    }

    #categoryTitle .textBoxInner .nameBox .charge {
        font-size: 1.2rem;
        padding: 8px 14px;
        margin-bottom: 0;
        margin-right: 10px;
    }

    #categoryTitle .textBoxInner .nameBox .name {
        font-size: 1.4rem;
    }

    #categoryTitle .textBoxInner .profile {
        font-size: 1.2rem;
    }

    .interview #wrapper {
        margin-top: 50px;
    }

    .interview #work {
        border-radius: 15px;
        margin-bottom: 50px;
    }

    .interview #work .workInner {
        padding: 40px;
    }

    .interview #work .workListInner:nth-child(n+3) {
        margin-top: 25px;
    }

    .interview #work .workInner .categoryTitle {
        margin-bottom: 20px;
    }

    .interview #work .workListInner dt {
        font-size: 1.4rem;
        padding: 7px 10px;
        margin-bottom: 10px;
    }

    .interview #work .workListInner dd .list1 {
        display: block;
        margin-bottom: 25px;
    }

    .interview #work .workListInner dd .list1 li {
        width: 100%;
        border-radius: 10px;
        padding: 20px;
    }

    .interview #work .workListInner dd .list1 li:nth-child(n+2) {
        margin-top: 10px;
    }

    .interview #work .workListInner dd .list1 li h4 {
        font-size: 1.4rem;
        margin-bottom: 15px;
    }

    .interview #work .workListInner dd .list2 {
        margin: -5px -2px 0px;
    }

    .interview #work .workListInner dd .list2 li {
        font-size: 1.4rem;
        letter-spacing: .1rem;
        line-height: 1.2;
        padding: 7px 20px;
        margin: 5px 2px 0px;
    }

    .interview #chapter {
        margin-bottom: 50px;
    }

    .interview #chapter .chapterBox:nth-child(even) .imgBox {
        margin-left: 7%;
    }

    .interview #chapter .chapterBox .textBox .chapterTitle {
        margin-bottom: 10px;
    }

    .interview #chapter .chapterBox .textBox .chapterTitle .en {
        font-size: 1rem;
        letter-spacing: .5rem;
        margin-bottom: 15px;
        padding-left: 60px;
    }

    .interview #chapter .chapterBox .textBox .chapterTitle .en:before {
        width: 50px;
    }

    .interview #chapter .chapterBox .textBox .chapterTitle .jp {
        font-size: 1.8rem;
        letter-spacing: .3rem;
        line-height: 1.5;
    }

    .interview .kurukuru {
        margin-bottom: 50px;
    }

    .interview .kurukuru:before {
        height: 117px;
        background-size: 622.5px 117px;
    }

    .interview #qa {
        margin-bottom: 50px;
        border-radius: 15px;
    }

    .interview #qa .qaInner {
        padding: 40px;
    }

    .interview #qa .qaInner .categoryTitle {
        margin-bottom: 30px;
    }

    .interview #qa .qaList li .qaBox .circle_width {
        width: 34px;
    }

    .interview #qa .qaList li .qaBox .maru {
        font-size: 1.5rem;
        top: calc((100% - 3.2rem) / 2);
    }

    .interview #qa .qaList li:nth-child(n+2) {
        margin-top: 30px;
    }

    .interview #qa .qaList li .qaBox .title {
        font-size: 1.5rem;
        line-height: 1.5;
    }

    .interview #qa .qaList li .aBox .qaBox {
        margin: 15px 0 10px;
    }

    .interview #qa .qaList li .aBox .text {
        margin-left: 50px;
    }

    .interview #circle {
        background-size: contain;
    }

    .interview #circle .circleInner {
        display: block;
    }

    .interview #circle .circleInner li .categoryTitle {
        margin-bottom: 20px;
    }

    .interview #circle .circleInner li .categoryTitle .jp {
        font-size: 1.8rem;
    }

    .interview #circle .circleInner li {
        width: 100%;
    }

    .interview #circle .circleInner li:nth-child(n+2) {
        margin-top: 40px;
    }

    .interview #circle .circleInner li .imgBox {
        margin: 0 auto 15px;
    }

    .interview #circle .circleInner li h3 {
        font-size: 1.5rem;
        margin-bottom: 10px;
    }

    .interview #circle .circleInner li h3:before,
    .interview #circle .circleInner li h3:after {
        width: 15px;
        height: 32px;
    }

    .interview #person {
        padding: 50px 0;
        background: url(../images/interview/person_bg-sp.png) center -70% / cover no-repeat;
    }

    .interview #person .pe_deco01 {
        width: min(80px, 20%);
        top: -6%;
        left: 64%;
    }

    .interview #person .pe_deco02 {
        display: none;
    }

    .interview #person .categoryTitle .sub {
        width: 68%;
        margin-bottom: 5px;
    }

    .interview #person .personInner {
        width: 100%;
    }

    .interview #message {
        margin-bottom: 50px;
    }

    .interview #message .messageInner {
        display: block;
    }

    .interview #message .messageInner .imgBox {
        width: 68%;
        margin: 0 auto 20px;
    }

    .interview #message .messageInner .textBox {
        width: 100%;
    }

    .interview #message .messageInner .textBox .categoryTitle {
        text-align: center;
        margin-bottom: 20px;
    }

    .interview #staff {
        margin-top: 0;
        padding: 90px 0 90px;
        background-size: contain;
    }

    .interview #staff .st_deco01 {
        width: 25%;
        top: -3%;
        left: 70%;
    }

    .interview #staff .staffInner .staffList {
        width: 100%;
        display: block;
    }

    .interview #staff .staffInner .staffList li {
        width: 70%;
        margin-inline: auto;
    }

    .interview #staff .staffInner .staffList li .imgBox {
        width: 100%;
        height: 100%;
    }

    .interview #staff .staffInner .staffList li a .part {
        font-size: 1.4rem;
    }

    .interview #staff .staffInner .staffList li:nth-child(n+2) {
        margin-left: auto;
        margin-top: 50px;
    }

    .interview #staff .staffInner .staffList li a .part .arrow {
        width: 20px;
        height: 20px;
        margin-left: 10px;
    }

    .interview #staff .staffInner .staffList li a:hover .imgBox img {
        transform: none;
    }

    /*------------------------------------------------------------- about */

    .lower #pageTitle .pageTitleInner {
        padding: 35px 0;
    }

    .lower .categoryTitle {
        margin-bottom: 25px;
    }

    .lower #pageTitle .pageTitleInner .categoryTitle .en {
        font-size: 1rem;
    }

    .lower #pageTitle .pageTitleInner .categoryTitle .jp {
        font-size: 2.2rem;
    }

    .lower #pageTitle .pageTitleInner .pt_deco01 {
        width: 22%;
        top: 55%;
        left: 6%;
    }

    .lower #lead .leadInner {
        padding: 60px 0 140px;
    }

    .lower #lead .title {
        font-size: 1.8rem;
        margin-bottom: 25px;
    }

    .lower #lead .text {
        font-size: 1.4rem;
        line-height: 2.2;
    }

    .lower #lead .le_deco01 {
        width: 36%;
        bottom: 5%;
    }

    .lower .bg_up {
        padding-top: 115px;
        margin-top: -80px;
    }

    .lower .bg_down {
        padding-top: 150px;
        margin-top: 0px;
    }

    /* map */

    #about #map {
        /*margin-bottom: 80px;*/
    }

    #about #map .mapBox .textBox .imgBox {
        margin-bottom: 30px;
    }

    #about #map .mapBox .imgBox .spOverflow picture {
        width: 100%;
    }

    #about #map .mapBox .imgBox .spOverflow picture img {
        width: 585px;
        padding: 20px 7.5% 0;
    }

    #about #map .mapBox .imgBox .map_title {
        width: 150px;
        top: 0;
    }

    #about #map .mapBox .textBox .sub {
        font-size: 1.8rem;
        margin-bottom: 30px;
    }

    #about #map .mapBox .textBox .text {
        margin-bottom: 20px;
    }

    .banksImgBox {
        width: auto;
        margin-top: 50px;
    }

    /* role */

    #about #role {
        margin-bottom: 100px;
    }

    #about .roleCircle {
        margin: 50px 0;
    }

    #about .roleCircle .circleBox {
        display: block;
    }

    #about .roleCircle .circle:nth-child(2) {
        margin-top: -10px;
        margin-right: 0;
    }

    #about .roleCircle .circle:nth-child(3) {
        margin-top: -10px;
        margin-left: 0;
    }

    #about .roleCircle .circle h2 {
        margin-bottom: 0;
    }

    #about .roleCircle .circle .icon {
        margin-bottom: 0;
    }

    #about #role .roleListArea {
        margin-bottom: 50px;
    }

    #about #role .roleListArea > ul > li:nth-child(n+2) {
        margin-top: 45px;
    }

    #about #role .roleListArea .roleList .title {
        font-size: 1.8rem;
        margin-bottom: 30px;
    }

    .commonListBox li {
        border-radius: 15px;
        padding: 40px;
    }

    .commonListBox li:before {
        height: 3px;
    }

    .commonListBox li .name {
        font-size: 1.5rem;
        margin-bottom: 20px;
    }

    .commonListBox li .imgBox {
        width: 50%;
        margin-bottom: 20px;
    }

    #about #role .connection {
        border-radius: 15px;
        padding: 40px;
    }

    #about #role .connection h3 {
        font-size: 1.8rem;
        margin-bottom: 20px;
    }

    #about #role .connection .text {
        /*margin-bottom: 25px;*/
    }

    #about #role .connection .connectionList li a .arrow {
        bottom: 5px;
        right: 5px;
    }

    #about #role .connection .ro_deco01 {
        bottom: -13%;
        width: 48%;
        left: 26%;
    }

    /* nakawork */

    #about #nakawork {
        padding-top: 150px;
    }

    #about #nakawork .nakaworkList > li:nth-child(n+2) {
        margin-top: 50px;
    }

    #about #nakawork .nakaworkList > li .title {
        font-size: 1.8rem;
        line-height: 40px;
        border-radius: 20px;
        margin-bottom: 30px;
    }

    #about #nakawork .nakaworkList > li .title:after {
        border-right: 6px solid transparent;
        border-left: 6px solid transparent;
        border-top: 10px solid #3ecd97;
    }

    #about #nakawork .nakaworkList > li .inner .imgBox {
        margin-bottom: 50px;
    }

    #about #nakawork .nakaworkList > li .inner .imgBox .btnBox {
        font-size: 1.2rem;
        border-radius: 20px;
        padding: 7px 20px;
    }

    #about #nakawork .nakaworkList > li .inner .imgBox .btnBox .arrow {
        margin-left: 15px;
    }

    #about #nakawork .nakaworkList > li .inner .imgBoxInner .w_illust_01 {
        left: -14%;
        bottom: -4%;
    }

    #about #nakawork .nakaworkList > li .inner .imgBoxInner .w_illust_02 {
        left: -14%;
        bottom: -4%;
    }

    #about #nakawork .nakaworkList > li .inner .imgBoxInner .w_illust_03 {
        left: -14%;
        bottom: -4%;
    }

    #about #nakawork .nakaworkList > li .inner .textBox .textList {
        margin-bottom: 30px;
    }

    #about #nakawork .nakaworkList > li .inner .textBox .textList li figure figcaption {
        font-size: 1.4rem;
    }

    #about #nakawork .nakaworkList > li .inner .textBox h4 {
        font-size: 1.6rem;
    }

    #about #nakawork .nakaworkList > li .inner .imgBox a:hover .imgBoxInner .innerImg img {
        transform: scale(1);
    }


    /*------------------------------------------------------------- recruit */

    #recruit .mynaviBtn {
        margin-top: 25px;
    }

    #recruit .mynaviBtn a {
        padding: 20px 30px;
    }

    #recruit .mynaviBtn a img {
        width: 150px;
    }

    #recruit #careerRec .careerRecTable {
        margin-bottom: 50px;
    }

    #recruit #careerRec .careerRecTable dl {
        display: block;
    }

    #recruit #careerRec .careerRecTable dl dt {
        width: 100%;
        margin-right: 0;
        padding: 13px 10px;
    }

    #recruit #careerRec .careerRecTable dl dd {
        width: 100%;
        line-height: 1.8;
        padding-top: 15px;
    }

    #recruit #careerRec .careerRecTable dl dd .inner {
        margin-top: 15px;
    }

    #recruit #careerRec .careerRatioTable th.space {
        width: 42%;
    }

    #recruit #careerRec .careerRatioTable th:not(.space) {
        width: calc((100% - 42%) / 3);
    }

    /* フッター調整 */

    #recruit #footer .footerInner {
        padding-top: 120px;
    }

    #recruit #footer .footerInner:after {
        top: 14%;
    }


    /*------------------------------------------------------------- environment */

    #environment #training .trainingBox dl {
        font-size: 1.2rem;
        letter-spacing: .05rem;
    }

    #environment #training .trainingBox dl:nth-child(n+2) {
        margin-top: 15px;
    }

    #environment #training .trainingBox dl dt {
        width: 50px;
        margin-right: 10px;
    }

    #environment #training .trainingBox dl dd {
        width: calc(100% - 60px);
        padding: 15px;
        border-radius: 5px;
    }

    #environment #training .trainingBox dl dd .monthBox .month {
        margin-right: 10px;
        padding: 0 10px;
    }

    #environment #training .trainingBox dl.middle dd {
        padding: 15px;
    }

    #environment #training .trainingBox dl dd .trainingBoxList li {
        border-radius: 15px;
        padding: 15px;
    }

    #environment #training .trainingBox dl dd .trainingBoxList li h3 {
        margin-bottom: 10px;
        font-size: 1.2rem;
    }

    #environment #training .trainingBox dl dd p {
        line-height: 1.3;
    }

    #environment #training .trainingBox dl.up dt {
        border-top-left-radius: 5px;
        border-top-right-radius: 5px;
    }

    #environment #training .trainingBox dl.middle dt {
        margin-top: 20px;
    }

    #environment #training .trainingBox dl.down dt {
        border-bottom-left-radius: 5px;
        border-bottom-right-radius: 5px;
        margin-top: 20px;
    }

    #environment #training .trainingBox dl.up dt:after,
    #environment #training .trainingBox dl.middle dt:after {
        background-image: url(../images/environment/training_arrow_down-sp.svg);
        background-size: contain;
        bottom: -18px;
    }

    #environment #training .trainingBox dl.middle dt:before,
    #environment #training .trainingBox dl.down dt:before{
        background-image: url(../images/environment/training_arrow_up-sp.svg);
        background-size: contain;
        top: -16px;
    }

    #environment #easytowork .easytoworkList li {
        width: 100%;
        margin-right: 0;
        margin-top: 40px;
    }

    #environment #easytowork .easytoworkList li:nth-child(n+2) {
        margin-top: 40px;
    }

   #environment #easytowork .easytoworkList li:nth-child(3n) {
        margin-right: 0;
    }

    #environment #easytowork .easytoworkList li .circleBoxArea {
        width: 60%;
        padding-top: 60%;
        margin: 0 auto;
    }

    #environment #easytowork .easytoworkList li .circleBox {
        justify-content: flex-start;
        padding-top: 25px;
    }

    #environment #easytowork .easytoworkList li .circleBox .number {
        margin-bottom: 5px;
    }

    #environment #easytowork .easytoworkList li .circleBox .imgBox {
        width: 28%;
    }

    #environment #easytowork .easytoworkList li .circleBox .title {
        font-size: 1.8rem;
    }


    #environment #easytowork .easytoworkList li .text {
        margin-top: -15px;
    }

    #environment #careersteps .caseBox {
        border-radius: 15px;
        padding: 40px 25px;
        margin-top: 50px;
    }

    #environment #careersteps .caseBox .title {
        top: -20px;
    }

    #environment #careersteps .caseBox .title span {
        font-size: 1.2rem;
        line-height: 40px;
    }

    #environment #careersteps .caseBox .title span:after {
        border-right: 6px solid transparent;
        border-left: 6px solid transparent;
        border-top: 10px solid #fb6262;
    }

    #environment #careersteps .caseBox .person {
        display: block;
    }

    #environment #careersteps .caseBox .person figure {
        width: 50%;
        margin: 0 auto;
    }

    #environment #careersteps .caseBox .person figcaption {
        font-size: 1.5rem;
    }

    #environment #careersteps .caseBox .person .comment {
        width: 100%;
        margin-top: 30px;
    }

    #environment #careersteps .caseBox .caseBoxList {
        margin-top: 25px;
    }

    #environment #careersteps .caseBox .caseBoxList:after {
        left: 11px;
        transform: translateY(-53%);
    }

    #environment #careersteps .caseBox .caseBoxList .inner {
        width: calc(100% - 36px);
        margin-left: 30px;
    }

    #environment #careersteps .caseBox .caseBoxList .inner:nth-child(n+2) {
        margin-left: 30px;
    }

    #environment #careersteps .caseBox .caseBoxList .inner dd {
        border-radius: 15px;
        padding: 30px;
    }

    #environment #careersteps .caseBox .caseBoxList .inner dd .year {
        padding-bottom: 15px;
        margin-bottom: 15px;
    }

    #environment #careersteps .caseBox .caseBoxList .inner dd .text {
        line-height: 1.5;
    }

    #environment #careersteps .caseBox .caseBoxList .inner .deco,
    #environment #careersteps #no2.caseBox .caseBoxList .inner:nth-child(2) .casedeco_02 {
        width: 50px;
    }

    /*------------------------------------------------------------- SPのみスワイプ */

    .spOverflow {
        overflow-x: scroll;
        padding-bottom: 20px;
    }

    .personImgBox .inner {
        width: calc(600px + 15%);
        height: 355px;
    }

    .banksImgBox .inner {
        width: calc(700px + 15%);
        height: 236px;
    }

}