/* ==============================
  メイン
============================== */
.mv-wrap .photos {
    animation: none;
    position: relative;
    top: 0;
    left: 0;
    width: 100%;
    opacity: 1;
    transform: none;
}

.mv-wrap .text-wrap {
    position: absolute;
    top: 0;
    left: 0;
    animation: text-fadeIn 0.5s ease forwards 0.25s;
}
.mv-wrap .text-wrap h1 {
    left: 12.5%;
    top: 61.1%;
    font-size: 10.0rem;
    font-size: 7.3vw;
}
.mv-wrap .text-wrap h1 span {
    display: block;
    font-size: 7.4rem;
    font-size: 5.4vw;
    font-weight: bold;
    letter-spacing: 0.03em;
}
.mv-wrap .text-wrap .line {
    position: absolute;
    bottom: -1%;
    left: -11.2%;
    width: 22.7%;
}
.mv-wrap .text-wrap .line img {
    filter: invert(100%) sepia(100%) saturate(0%) hue-rotate(320deg) brightness(107%) contrast(101%);
}

@keyframes text-fadeIn {
    0% {
        opacity: 0;
        transform: translate(var(--start-x, -50px), var(--start-y, 50px));
    }
    100% {
        opacity: 1;
        transform: translate(0, 0);
    }
}

@media print, screen and (max-width: 1016px) {
    .mv-wrap .text-wrap h1 {
        font-size: 7.45rem;
    }
    .mv-wrap .text-wrap h1 span  {
        font-size: 5.513rem;
    }
}
@media print, screen and (max-width: 768px) {
    .mv-wrap .text-wrap h1 {
        left: 17.7vw;
        top: auto;
        bottom: 8svh;
        font-size: 14.4vw;
    }
    .mv-wrap .text-wrap h1 span {
        font-size: 10.9vw;
    }
    .mv-wrap .text-wrap .line {
        position: absolute;
        bottom: -3.4svh;
        left: -31.7vw;
        width: 47.2vw;
    }
}
/* ==============================
  mv-text
============================== */
.mv-text {
    background-color: #00003C;
    text-align: center;
    color: #3B87FF;
    padding: 6% 0 9.5%;
}
.mv-text h1 {
    font-size: 3.8rem;
    font-size: 2.7vw;
    font-weight: bold;
    letter-spacing: 0.14em;
    margin-bottom: 3.2%;
}
.mv-text p {
    font-size: 1.8rem;
    font-size: 1.3vw;
    letter-spacing: 0.04em;
    width: 65.3%;
    margin: 0 auto;
    line-height: 1.9;
}
@media print, screen and (max-width: 1016px) {
    .mv-text h1 {
        font-size: 2.831rem;
    }
    .mv-text p {
        font-size: 1.341rem;
    }
}
@media print, screen and (max-width: 768px) {
    .mv-text {
        padding: 11.9vw 0 29.2vw;
    }
    .mv-text h1 {
        font-size: 5.6vw;
        margin-bottom: 7.7vw;
    }
    .mv-text p {
        font-size: 3.7vw;
        width: 85vw;
        line-height: 2.1;
    }
}

/* ==============================
  Company List
============================== */
.compnay-list .title-wrap {
    position: relative;
    color: #FFF;
}
.compnay-list .title-wrap h2 {
    position: absolute;
    top: 26.7%;
    left: 12.6%;
    font-size: 7rem;
    font-size: 5.1vw;
    font-weight: bold;
    letter-spacing: 0.03em;
    line-height: 1.05;
}
.compnay-list .title-wrap h2 span {
    display: block;
    font-size: 2.4rem;
    font-size: 1.7vw;
    letter-spacing: 0.04em;
    margin-top: 2.4%;
}
.compnay-list .title-wrap .line {
    position: absolute;
    top: 28.7%;
    left: -11.2%;
    width: 22.7%;
}

.compnay-list .company-list-wrap .inner {
    width: 74.5%;
    margin: 0 auto;
    color: #FFF;
    padding-bottom: 4%;
}
.compnay-list .company-list-wrap .company-list-text {
    font-size: 2rem;
    letter-spacing: 0.04em;
    line-height: 1.75;
    padding: 5.2% 0 9.1%;
}
.compnay-list .company-list-box {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: flex-start;
}
.compnay-list .company-list-box section {
    display: flex;
    flex-direction: column;
    width: 30.5%;
    margin-right: 4.25%;
    margin-bottom: 4.6%;
}
.compnay-list .company-list-box section:nth-child(3n) {
    margin-right: 0;
}
.compnay-list .company-list-box section .photo {
    width: 100%;
    aspect-ratio: 311 / 220;
    background-color: #00003C;
    display: flex;
    justify-content: center;
    align-items: center;
}
.compnay-list .company-list-box section .photo.text {
    font-size: 3.3rem;
    font-size: 2.4vw;
    font-weight: bold;
    text-align: center;
    letter-spacing: 0.14em;
    line-height: 1.3;
    color: #3B87FF;
}

.compnay-list .company-list-box section .text-box {
    margin-top: 17px;
    margin-top: 5.4%;
    font-family: "Hiragino Sans", "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", Meiryo, メイリオ, Osaka, "MS PGothic", arial, helvetica, sans-serif;
}
.compnay-list .company-list-box section .text-box p {
    font-size: 1.6rem;
    font-size: 1.17vw;
}
.compnay-list .company-list-box section .text-box p.compnay_name {
    font-size: 1.9rem;
    font-size: 1.3vw;
    margin-bottom: 5.4%;
}
.compnay-list .company-list-box section .text-box ul {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    margin-bottom: 6.4%;
}
.compnay-list .company-list-box section .text-box ul li {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 47.9%;
    background-color: #0073FF;
    /* line-height: 1; */
    padding: 4px 4px 2px;
    font-size: 1.6rem;
    font-size: 1.17vw;
    box-sizing: border-box;
    line-height: 1.2;

    text-align: center;
}

@media print, screen and (max-width: 1016px) {
    .compnay-list .title-wrap h2 {
        font-size: 5.215rem;
    }
    .compnay-list .title-wrap h2 span {
        font-size: 1.788rem;
    }
    .compnay-list .company-list-wrap .company-list-text {
        font-size: 1.486rem;
    }
    .compnay-list .company-list-box section .photo.text {
        font-size: 2.4519rem;
    }
    .compnay-list .company-list-box section .text-box p {
        font-size: 1.192rem;
    }
    .compnay-list .company-list-box section .text-box p.compnay_name {
        font-size: 1.192rem;
    }
    .compnay-list .company-list-box section .text-box ul li {
        font-size: 1.192rem;
    }
}
@media print, screen and (max-width: 768px) {
    .compnay-list .title-wrap h2 {
        top: 17vw;
        left: 18.2vw;
        font-size: 10vw;
    }
    .compnay-list .title-wrap h2 span {
        font-size: 3.7vw;
        margin-top: 0.7vw;
    }
    .compnay-list .title-wrap .line {
        position: absolute;
        top: 18.5vw;
        left: -31.7vw;
        width: 47.2vw;
    }

    .compnay-list .company-list-wrap .inner {
        width: 85vw;
        padding-bottom: 13.3vw;
    }
    .compnay-list .company-list-wrap .company-list-text {
        font-size: 3.7vw;
        line-height: 2.18;
        padding: 9.3vw 0 16.3vw;
    }
    .compnay-list .company-list-box {
        display: flex;
        flex-wrap: wrap;
        justify-content: flex-start;
        align-items: flex-start;
    }
    .compnay-list .company-list-box section,
    .compnay-list .company-list-box section:nth-child(3n) {
        width: 40.6vw;
        margin-right:3.7vw;
        margin-bottom: 9.3vw;
    }
    .compnay-list .company-list-box section:nth-child(2n) {
        margin-right: 0;
    }
    .compnay-list .company-list-box section .photo.text {
        font-size: 4.2vw;
    }

    .compnay-list .company-list-box section .text-box {
        margin-top: 3.9vw;
    }
    .compnay-list .company-list-box section .text-box p {
        font-size: 3.7vw;
    }
    .compnay-list .company-list-box section .text-box p.compnay_name {
        font-size: 3.7vw;
        margin-bottom: 4.3vw
    }
    .compnay-list .company-list-box section .text-box ul {
        flex-wrap: wrap;
        margin-bottom: 3.5vw;
    }
    .compnay-list .company-list-box section .text-box ul li {
        width: 100%;
        padding: 0.58vw 0 0.93vw;
        font-size: 3.7vw;
    }
    .compnay-list .company-list-box section .text-box ul li + li {
        margin-top: 1.16vw;
    }
}

/* ==============================
  Life Science
============================== */
#life_science.compnay-list .title-wrap .line img {
    filter: invert(26%) sepia(97%) saturate(3064%) hue-rotate(206deg) brightness(105%) contrast(103%);
}
#life_science.compnay-list .company-list-wrap {
    background-color: #A4B9E9;
}
#life_science.compnay-list .company-list-box section .photo.text {
    color: #3B87FF;
}
#life_science.compnay-list .company-list-box section .text-box ul li {
    background-color: #0073FF;
}

/* ==============================
  Carbon Neutral
============================== */
#carbon_neutral.compnay-list .title-wrap .line img {
    filter: invert(85%) sepia(25%) saturate(5374%) hue-rotate(30deg) brightness(101%) contrast(102%);
}
#carbon_neutral.compnay-list .company-list-wrap {
    background-color: #A0C8AA;
}
#carbon_neutral.compnay-list .company-list-box section .photo.text {
    color: #9AE600;
}
#carbon_neutral.compnay-list .company-list-box section .text-box ul li {
    background-color: #9AE600;
}

/* ==============================
  AI/Web3.0
============================== */
#digital.compnay-list .title-wrap .line img {
    filter: invert(74%) sepia(56%) saturate(1988%) hue-rotate(232deg) brightness(103%) contrast(101%);
}
#digital.compnay-list .company-list-wrap {
    background-color: #AB00C1;
}
#digital.compnay-list .company-list-box section .photo.text {
    color: #EE8FFF;
}
#digital.compnay-list .company-list-box section .text-box ul li {
    background-color: #EE8FFF;
}

/* ==============================
  Other
============================== */
#other {
    background-color: #00003C;
}
#other .inner {
    width: 74.5%;
    margin: 0 auto;
    padding: 9.8% 0;
}

#other .title-wrap {
    position: relative;
}
#other .title-wrap h1 {
    position: absolute;
    top: 0;
    left: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    font-size: 2.4rem;
    font-size: 1.7vw;
    line-height: 1.6;
    letter-spacing: 0.04em;
    color: #FFF;
    text-align: center;
}
#other .btn-wrap a {
    border-color: #3B87FF;
    color: #3B87FF;
}
#other .btn-wrap a:hover {
    border-color: #FFF;
    background-color: #FFF;
    color: #160064;
}
#other .btn-wrap a::after {
    background-image: url(../images/btn-arrow-h_blue.svg);
}

#other .btn-wrap a:hover::after {
    background-image: url(../images/btn-arrow-blue.svg);
}

@media print, screen and (max-width: 1016px) {
    #other .title-wrap h1 {
        font-size: 1.788rem;
    }
}
@media print, screen and (max-width: 768px) {
    #other .inner {
        width: 85vw;
        margin: 0 auto;
        padding: 14.2vw 0;
    }
    #other .title-wrap h1 {
        font-size: 4.6vw;
        line-height: 1.45;
    }
    #other .btn-wrap .btn-box {
        width: 75.5vw;
    }
}