@charset "UTF-8";

.about {
    overflow: hidden;
}

/* ==============================
about
================================ */
.section--about {
    padding: 56px 4.2% 72px;
    position: relative;
}

.section--about .title::after {
    content: 'ABOUT';
    font-family: 'Wittgenstein';
    position: absolute;
    top: -16px;
    left: -7%;
    color: #e6e6e6;
    opacity: 40%;
    text-align: center;
    font-size: 6.4rem;
    font-weight: 900;
    line-height: 1;
    letter-spacing: 0.03em;
    z-index: -10;
}

.about__list {
    margin-top: 56px;
    position: relative;
}

.sub__title {
    text-align: center;
    font-size: 1.8rem;
    font-weight: 700;
    letter-spacing: 0.03em;
}

.item2 .sub__title::after {
    display: block;
    content: '';
    background-image: url(../img/staff-sp1.svg);
    background-size: cover;
    background-repeat: no-repeat;
    width: 120%;
    height: 100vh;
    position: absolute;
    top: -92px;
    left: -12%;
    z-index: -1;
    opacity: 80%;
}


.item1 {
    position: relative;
}

.number1 {
    font-family: 'Wittgenstein';
    font-size: 5.6rem;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0.03em;
    color: #e6e6e6;
    opacity: 50%;
    position: absolute;
    top:-24px;
    left: 50%;
    transform: translateX(30%);
    z-index: -10;
}

.item2 {
    position: relative;
}

.number2 {
    font-family: 'Wittgenstein';
    font-size: 5.6rem;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0.03em;
    color: #e6e6e6;
    opacity: 50%;
    position: absolute;
    top:-24px;
    left: 50%;
    transform: translateX(30%);
    z-index: -10;
}

.item3 {
    position: relative;
    background-color: #e6e6e6;
    padding: 40px 4.2%;
    margin: 0 calc(50% - 50vw);
    width: 100vw;
    z-index: 5;
}

.number3 {
    font-family: 'Wittgenstein';
    font-size: 5.6rem;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0.03em;
    color: #f5f5f5;
    opacity: 50%;
    position: absolute;
    top:20px;
    left: 50%;
    transform: translateX(30%);
    z-index: -10;
}
.item4 {
    position: relative;
    padding: 48px 0;
}

.number4 {
    font-family: 'Wittgenstein';
    font-size: 5.6rem;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0.03em;
    color: #e6e6e6;
    opacity: 50%;
    position: absolute;
    top:27px;
    left: 50%;
    transform: translateX(30%);
    z-index: -10;
}

.about__txt {
    margin-top: 32px;
    font-size: 1.6rem;
    line-height: 2;
    letter-spacing: 0.05em;
}

.about__pc {
    display: none;
}

.about__item:nth-of-type(2) {
    margin-top: 64px;
}

.content__list {
    display: block;
    margin: 32px auto 0;
    width: 250px;
    height: 1160px;
    position: relative;
}

.content__list::before {
    display: block;
    content: '';
    background-image: url(../img/staff-sp2.svg);
    background-size: cover;
    background-repeat: no-repeat;
    width: 150vw;
    height: 80%;
    position: absolute;
    /* top: 85px; */
    bottom: 302px;
    left: -40%;
    z-index: -1;
    opacity: 80%;
}

.content__list::after {
    display: block;
    content: '';
    background-image: url(../img/staff-sp1.svg);
    background-size: cover;
    background-repeat: no-repeat;
    width: 120vw;
    height: 100vh;
    position: absolute;
    bottom: -153px;
    left: -40%;
    z-index: -1;
    opacity: 80%;
}

.content__item:first-of-type img {
    position: absolute;
    top: 1%;
    left: -17%;
}

.content__item:nth-of-type(2) img {
    position: absolute;
    top: 7%;
    left: 50%;
}

.content__item:nth-of-type(3) img{
    position: absolute;
    top: 30%;
    left: -24%;
}

.content__item:nth-of-type(4) img{
    position: absolute;
    top: 40%;
    left: 20%;
}

.content__item:nth-of-type(5) img{
    position: absolute;
    top: 61%;
    left: -10%;
}

.content__item:nth-of-type(6) img{
    position: absolute;
    top: 69%;
    left: 18%;
}

.content__item:nth-of-type(7) img{
    position: absolute;
    top: 77%;
    left: -20%;
}

.itemImg__pc {
    display: none;
}

.section--about .btn {
    margin-top: 16px;
}



/* .about__txt {
    margin-top: 24px;
    font-size: 1.6rem;
}
 */


/* .about__pc {
    display: none;
}

.about__item:nth-of-type(2),
.about__item:last-of-type {
    margin-top: 40px;
}

.content__list {
    display: block;
    margin: 24px auto 0;
    width: 250px;
    height: 1160px;
    position: relative;
}


.content__item:first-of-type img {
    position: absolute;
    top: 1%;
    left: -12%;
}

.content__item:nth-of-type(2) img {
    position: absolute;
    top: 7%;
    left: 50%;
}

.content__item:nth-of-type(3) img{
    position: absolute;
    top: 30%;
    left: -12%;
}

.content__item:nth-of-type(4) img{
    position: absolute;
    top: 40%;
    left: 15%;
}

.content__item:nth-of-type(5) img{
    position: absolute;
    top: 61%;
    left: -10%;
}

.content__item:nth-of-type(6) img{
    position: absolute;
    top: 69%;
    left: 18%;
}

.content__item:nth-of-type(7) img{
    position: absolute;
    top: 77%;
    left: -20%;
}

*/

.name {
    margin-top: 32px;
    font-size: 1.6rem;
    text-align: center;
    letter-spacing: 0.05em;
}

.name__sp {
    font-size: 1.8rem;
}

.purpose__group {
    background-color: #f5f5f5;
    padding: 32px 8px;
    border-radius: 8px;
    margin-top: 24px;
}

.purpose__txt {
    font-size: 1.6rem;
}


.purpose__pc {
    display: none;
}

.purpose__txt p {
    margin-top: 32px;
    line-height: 2;
    letter-spacing: 0.0032em;
}

.purpose__txt:first-of-type p:first-of-type {
    margin-top: 0;
}

.purpose__txt img {
    margin-top: 32px;
    width: 100%;
}

.purpose__group img:nth-of-type(2) {
    display: flex;
}

.purpose__img2 {
    display: flex;
    justify-content: flex-end;
    margin-left: auto;
}

.employee__list {
    margin-top: 24px;
    font-size: 1.6rem;
}

.employee {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    margin-top: 2px;
    letter-spacing: 0.05em;
}

.post {
    width: 50%;
    text-align: end;
}

.employee__name {
    width: 50%;
    text-align: start;
}


.since {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    margin-top: 24px;
    font-size: 1.6rem;
    letter-spacing: 0.05em;
}

.year {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    margin-top: 8px;
    font-size: 1.6rem;
    letter-spacing: 0.05em;
}

.since__title,
.year__title {
    width: 40%;
    text-align: end;
}

.since__txt,
.year__txt {
    width: 60%;
    text-align: start;
}

/* about small 350px~ */
@media screen and (max-width: 350px) {
    .content__list::before {
        bottom: 203px;
    }
}

/* about tablet 425px~ */
@media screen and (min-width: 425px) {
    .item2 .sub__title::after {
        top: -68px;
    }

    .content__list::before {
        height: 89%;
        left: -70%;
        bottom: 135px;
        width: 125vw;
    }

    .content__list::after {
        height: 80%;
        left: -70%;
        bottom: -261px;
        top: unset;
    }
}

/* about tablet 450px~ */
@media screen and (min-width: 450px) {
    .content__list::before {
        bottom: 215px;
    }
}

/* about tablet 500px~ */
@media screen and (min-width: 500px) {
    .content__list::before {
        bottom: 290px;
    }
}



/* about tablet 600px~ */
@media screen and (min-width: 600px) {
    .section--about {
        padding: 80px 9.7% 148px;
    }

    .section--about .title::after {
        left: -13%;
    }

    .name__sp {
        display: none;
    }

    .sub__title--purpose::before {
        left: 50%;
        transform: translateX(-100%);
        width: 300px;
    }

    .sub__title--details::before {
        right: 47%;
        transform: translateX(+100%);
        width: 250px;
    }

    .sub__title--establishment::before {
        width: 400px;
    }

    .sub__title--marsrecord::before {
        width: 500px;
        top: 18px;
    }

    .item3 {
        padding: 64px 9.7%;
    }

    .number3 {
        top: 41px;
    }

    .purpose__group {
        margin-top: 48px;
    }

    .purpose__txt {
        padding: 0 5.5%;
    }

    .purpose__txt img {
        width: 450px;
        margin-top: 32px;
    }

    .item4 {
        padding: 80px 0 0;
    }

    .number4 {
        top: 58px;
    }

    .since__title,
    .year__title {
        width: 45%;
    }

    .since__txt,
    .year__txt {
        width: 55%;
    }

    .item2 .sub__title::after {
        background-image: url(../img/staffpc.svg);
        width: 126vw;
        height: 26%;
        top: 93px;
        left: -35%;
        transform: rotate(-8deg);
    }

    .content__list::before {
        background-image: url(../img/staffpc.svg);
        width: 126vw;
        height: 26%;
        left: -110%;
        bottom: 485px;
        transform: rotate(22deg);
    }

    .content__list::after {
        background-image: url(../img/staffpc.svg);
        width: 126vw;
        height: 26%;
        bottom: 140px;
        left: -122%;
        transform: rotate(-8deg);
    }
}
/* about 600px~ */



/* about pc 768px~ */
@media screen and (min-width: 768px) {
    .section--about {
        padding: 80px 9.7% 180px;
    }

    .content__list::before {
        left: -173%;
        bottom: 468px;
    }

    .content__list::after {
        bottom: 94px;
        left: -177%;
    }

}

/* about pc 1024px~ */
@media screen and (min-width: 1024px) {
    .section--about {
        padding: 120px 9.7% 148px;
    }

    .section--about .title::after {
        font-size: 9.6rem;
        top: -30px;
        left: -13%;
    }

    .sub__title {
        font-size: 2.4rem;
    }

    .about__number {
        font-size: 8.8rem;
        top: -36px;
        left: 49%;
    }

    .number3 {
        top: 40px;
    }

    .number4 {
        top: 76px;
    }

    .about__list {
        margin-top: 112px;
    }

    .content__list {
        margin-top: 32px;
    }

    .item2 .sub__title::after,
    .content__list::before,
    .content__list::after {
        display: none;
    }
    
    .itemImg__sp {
        display: none;
    }

    .itemImg__pc {
        display: block;
    } 

    .about__txt {
        padding: 0;
        margin: 32px auto 0;
        width: 838px;
    }

    .about__pc {
        display: block;
    }

    .about__item:nth-of-type(2) {
        margin-top: 104px;
    }

    .section--about::after {
        top: 3px;
        left: 0px;
        font-size: 12.8rem;
    }

    .content__list {
        width: 880px;
        height: 380px;
    }

    
    .content__item:first-of-type img {
        top: -21%;
        left: -12%;
    }
    
    .content__item:nth-of-type(2) img{
        top: 42%;
        left: 9%;
    }
    
    .content__item:nth-of-type(3) img{
        position: absolute;
        top: 2%;
        left: 22%;
    }
    
    .content__item:nth-of-type(4) img{
        top: 18%;
        left: 31%;
    }
    
    .content__item:nth-of-type(5) img{
        top: -28%;
        left: 56%;
    }
    
    .content__item:nth-of-type(6) img{
        top: 41%;
        left: 68%;
    }
    
    .content__item:nth-of-type(7) img{
        top: -14%;
        left: 82%;
    }
    
    .content__list::before,
    .content__list::after,
    .item2 .sub__title::after {
        display: none;
    }
    
    .content__list::after {
        display: block;
        content: '';
        background-image: url(../img/staffpc.svg);
        background-size: cover;
        background-repeat: no-repeat;
        width: 130vw;
        height: 110%;
        position: absolute;
        top: -56px;
        left: -37%;
        z-index: -1;
        transform: rotate(0deg);
        opacity: 80%;
    }
    
    .purpose__group {
        max-width: 1160px;
        margin: 80px auto 0;
        border-radius: 32px;
        padding-bottom: 80px;
    }
    
    .purpose__txt {
        display: flex;
        gap: 32px;
        align-items: flex-start;
        margin-top: 56px;
    }
    
    .purpose__pc {
        display: block;
        line-height: 1.3;
    }
    
    .purpose__sp {
        display: none;
    }
    
    .purpose__content,
    .purpose__pc {
        margin-top: 0;
    }
    
    .purpose__txt p {
        margin-top: 0;
    }
    
    .purpose__img2 {
        margin-right: 0;
    }
    
    .purpose__txt img {
        width: 360px;
        margin-top: 10px;

    }
    
    .purpose__txt:nth-of-type(2),
    .purpose__txt:nth-of-type(4) {
        flex-direction: row-reverse;
    }
    
    
    .item1 {
        margin-top: 112px;
    }

    .item2 {
        margin-top: 120px;
        margin-bottom: 80px;
    }
    
    .item3 {
        padding: 80px 9.7% 120px;
    }

    .item4 {
        max-width: 1160px;
        margin: 0 auto;
        padding: 120px 9.7% 64px;
    }
    
    .name {
        margin-top: 40px;
        font-size: 2rem;
    }
    
    .employee__list {
        margin-top: 40px;
        justify-content: flex-end;
    }
    
    .company__txt {
        width: 600px;
        margin: 0 auto;
    }

    .since {
        margin-top: 40px;
    }

}

/* about pc 1440px~ */
@media screen and (min-width: 1440px) {
    .section--about {
        padding: 160px 9.7% 196px;
    }

    .section--about .title::after {
        font-size: 10.4rem;
    }

    .purpose__txt img {
        width: 440px;
    }

    .purpose__txt p {
        line-height: 2.5;
    }

    .content__list::after {
        width: 130vw;
        height: 160%;
        top: -165px;
        left: -80%;
    }
}

/* about pc 2000px~ */
@media screen and (min-width: 2000px) {
    .section--about {
        padding: 200px 9.7% 240px;
    }

    .title {
        text-align: center;
    }

    .section--about .title::after {
        left: 50%;
        transform: translateX(-50%);
    }

    .item2 {
        margin-bottom: 120px;
    }

    .content__list::after {
        height: 200%;
        top: -232px;
        left: -134%;
    }
}


/* ====================
fade in
===================== */
.content__item--1 {
    opacity: 0;
    top: 50px;
    position: relative;
    transition-duration: 2s;
}

.content__item--1.active {
    opacity: 1;
    top: 0;
}

.content__item--2 {
    opacity: 0;
    top: 120px;
    position: relative;
    transition-duration: 2s;
}

.content__item--2.active {
    opacity: 1;
    top: 70px;
}

.content__item--3 {
    opacity: 0;
    top: 380px;
    position: relative;
    transition-duration: 2s;
}

.content__item--3.active {
    opacity: 1;
    top: 330px;
}

.content__item--4 {
    opacity: 0;
    top: 500px;
    position: relative;
    transition-duration: 2s;
}

.content__item--4.active {
    opacity: 1;
    top: 450px;
}

.content__item--5 {
    opacity: 0;
    top: 750px;
    position: relative;
    transition-duration: 2s;
}

.content__item--5.active {
    opacity: 1;
    top: 700px;
}

.content__item--6 {
    opacity: 0;
    top: 840px;
    position: relative;
    transition-duration: 2s;
}

.content__item--6.active {
    opacity: 1;
    top: 790px;
}

.content__item--7 {
    opacity: 0;
    top: 950px;
    position: relative;
    transition-duration: 2s;
}

.content__item--7.active {
    opacity: 1;
    top: 900px;
}

@media screen and (min-width:1024px) {
    .content__item--1 {
        top: 0;
    }

    .content__item--1.active {
        top: -50px;
    }

    .content__item--2 {
        top: 250px;
    }

    .content__item--2.active {
        top: 200px;
    }

    .content__item--3 {
        top: 100px;
    }

    .content__item--3.active {
        top: 50px;
    }

    .content__item--4 {
        top: 200px;
    }

    .content__item--4.active {
        top: 150px;
    }

    .content__item--5 {
        top: 0px;
    }

    .content__item--5.active {
        top: -50px;
    }
    .content__item--6 {
        top: 250px;
    }

    .content__item--6.active {
        top: 200px;
    }
    .content__item--7 {
        top: 0px;
    }

    .content__item--7.active {
        top: -50px;
    }
}