@charset "utf-8";

main{
    padding-top: 0;
}
.b-movie-wrap,
.b-movie{
    width: 100dvw;
}
.b-movie-wrap{
    position: fixed;
    top: 0;
    z-index: 0;
    overflow: hidden;
}
.b-movie{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
.b-indexContents{
    background: var(--color-perlGray);
    z-index: 2;
    position: relative;
}
@media screen and (max-width: 599px) {
    main{
        padding-top: calc(56.25vw + 90px);
    }
    .b-movie-wrap{
        height: 56.25vw;
        top: 90px;
    }
}
@media screen and (min-width: 600px) {
    main{
        padding-top: 100dvh;
    }
    .b-movie-wrap{
        height: 100dvh;
    }
    .b-movie{
        width: 177.77777778dvh;
        height: 56.25dvw;
        min-height: 100%;
        min-width: 100%;
    }
}
/*---------------------------

message

---------------------------*/
.message {
    align-items: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    overflow-x: hidden;
    padding: 108px 0;
    width: 100vw;
    background: #fff;
    position: relative;
    z-index: 2;
}
.message .b-box {
    margin: 0 auto;
    max-width: 680px;
}
.message .e-head {
    font-size: 45px;
    margin-bottom: 20px;
}
.message .e-head .js-message {
    position: relative;
}
@media screen and (max-width: 599px) {
    .message {
        padding: 68px 0 65px;
    }
    .message .e-head {
        font-size: 3rem;
    }
    .message .e-btn {
        margin: 0 auto;
    }
}
@media screen and (min-width: 600px) {
    .message .e-head {
        margin-bottom: 30px;
    }
}
@keyframes slow-wave {
    from {
        transform: translateY(0);
    }
    to {
        transform: translateY(-6px);
    }
}

.message .e-head span {
    animation-direction: alternate;
    animation-duration: 2s;
    animation-iteration-count: infinite;
    animation-name: slow-wave;
    display: inline-block;
}
.message .e-head .m-first :nth-child(29n + 0) {
    animation-delay: calc(-0.24 * 28s);
}
.message .e-head .m-first :nth-child(29n + 1) {
    animation-delay: calc(-0.24 * 27s);
}
.message .e-head .m-first :nth-child(29n + 2) {
    animation-delay: calc(-0.24 * 26s);
}
.message .e-head .m-first :nth-child(29n + 3) {
    animation-delay: calc(-0.24 * 25s);
}
.message .e-head .m-first :nth-child(29n + 4) {
    animation-delay: calc(-0.24 * 24s);
}
.message .e-head .m-first :nth-child(29n + 5) {
    animation-delay: calc(-0.24 * 23s);
}
.message .e-head .m-first :nth-child(29n + 6) {
    animation-delay: calc(-0.24 * 22s);
}
.message .e-head .m-first :nth-child(29n + 7) {
    animation-delay: calc(-0.24 * 21s);
}
.message .e-head .m-first :nth-child(29n + 8) {
    animation-delay: calc(-0.24 * 20s);
}
.message .e-head .m-first :nth-child(29n + 9) {
    animation-delay: calc(-0.24 * 19s);
}
.message .e-head .m-first :nth-child(29n + 10) {
    animation-delay: calc(-0.24 * 18s);
}
.message .e-head .m-first :nth-child(29n + 11) {
    animation-delay: calc(-0.24 * 17s);
}
.message .e-head .m-first :nth-child(29n + 12) {
    animation-delay: calc(-0.24 * 16s);
}
.message .e-head .m-second :nth-child(29n + 0) {
    animation-delay: calc(-0.24 * 15s);
}
.message .e-head .m-second :nth-child(29n + 1) {
    animation-delay: calc(-0.24 * 14s);
}
.message .e-head .m-second :nth-child(29n + 2) {
    animation-delay: calc(-0.24 * 13s);
}
.message .e-head .m-second :nth-child(29n + 3) {
    animation-delay: calc(-0.24 * 12s);
}
.message .e-head .m-second :nth-child(29n + 4) {
    animation-delay: calc(-0.24 * 11s);
}
.message .e-head .m-second :nth-child(29n + 5) {
    animation-delay: calc(-0.24 * 10s);
}
.message .e-head .m-second :nth-child(29n + 6) {
    animation-delay: calc(-0.24 * 9s);
}
.message .e-head .m-second :nth-child(29n + 7) {
    animation-delay: calc(-0.24 * 8s);
}
.message .e-head .m-second :nth-child(29n + 8) {
    animation-delay: calc(-0.24 * 7s);
}
.message .e-head .m-second :nth-child(29n + 9) {
    animation-delay: calc(-0.24 * 6s);
}
.message .e-head .m-second :nth-child(29n + 10) {
    animation-delay: calc(-0.24 * 5s);
}
.message .e-head .m-second :nth-child(29n + 11) {
    animation-delay: calc(-0.24 * 4s);
}
.message .e-head .m-second :nth-child(29n + 12) {
    animation-delay: calc(-0.24 * 3s);
}
.message .e-head .m-second :nth-child(29n + 13) {
    animation-delay: calc(-0.24 * 3s);
}
.message .e-head .m-second :nth-child(29n + 14) {
    animation-delay: calc(-0.24 * 2s);
}
.message .e-head .m-second :nth-child(29n + 15) {
    animation-delay: -0.24s;
}

.message .e-head b {
    animation: gradetxt 10s infinite;
    color: var(--main-blue);
}
@keyframes gradetxt {
    0% {
        color: var(--main-blue);
    }
    25% {
        color: #00ada5;
    }
    50% {
        color: var(--main-blue);
    }
    75% {
        color: #c27bff;
    }
    100% {
        color: var(--main-blue);
    }
}
.message .e-copy {
    color: #1a1a1c;
    font-size: 1.6rem;
    line-height: 2;
    margin-bottom: 60px;
}
.message .e-copy p + p {
    margin-top: 0.8em;
}
.message .b-slide .-list {
    padding-top: 80px;
    overflow: visible;
    position: relative;
    /*width: calc(100vw + 500px);*/
    z-index: -1;
}
@media screen and (max-width: 400px) {
    .message .b-slide .-list 
        left: -30vw
        margin-top: 0;
    }
}
.message .b-slide .e-li {
    position: relative;
}
.message .b-slide .e-li > .-img {
    width: auto;
    margin: 0 auto;
}
.message .b-slide .e-li span {
    align-items: center;
    bottom: 0;
    display: flex;
    justify-content: center;
    left: 50%;
    opacity: 0;
    position: absolute;
    transition: 0.5s;
    transform: scale(0) translateX(-50%);
    z-index: 99;
    display: none;
}
.message .b-slide .e-li span .e-img {
    height: 100%;
    object-fit: contain;
    width: 100%;
}
.message .b-slide .e-li.slick-center span {
    bottom: 180px;
    opacity: 1;
    transform: scale(1) translateX(-50%);
}

@media screen and (max-width: 599px) {
    .message .b-slide .e-li {
        width: 100px;
    }
    .message .b-slide .e-li > .-img {
        height: 120px;
    }
    .message .b-slide .e-li span {
        
    }
}
@media screen and (min-width: 600px) {
    .message .b-slide .e-li {
        width: 130px;
    }
    .message .b-slide .e-li > .-img {
        height: 133px;
    }
    .message .b-slide .e-li span {
        width: 200px;
        height: 200px;
    }
}
/*---------------------------

circle

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

.b-circle {
    background: var(--color-perlGray);
    padding-top: var(--sectionPT);
}
.-circle-wrap {
    display: block;
    width: 300dvw;
    height: 300dvw;
    left: 50%;
    position: fixed;
    pointer-events: none;
    top: 50%;
    transform: translate(-50%, -50%);
}
.-circle-wrap .e-circle {
    background-color: #fff;
    border-radius: 50%;
    display: block;
    height: 0;
    left: 50%;
    opacity: 0;
    position: relative;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 0;
}
@media screen and (max-width: 599px) {
    .-circle-wrap {
        width: 200dvh;
        height: 200dvh;
    }
}
/*---------------------------

service

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

.service.b-box {
    position: relative;
    z-index: 2;
}
.service.b-box .-inner {
    padding-top: 1px;
}

.b-service {
    position: relative;
}

.b-service .-service-img-list {
    display: block;
}
.b-service .-service-content::after {
    background-color: var(--main-black);
    content: '';
    display: block;
    height: 80px;
    margin: 60px 0 60px 28px;
    transform: rotate(45deg);
    width: 1px;
    display: none;
}
.b-service .-service-content .e-head {
    font-size: 36px;
    margin-bottom: 30px;
}
.b-service .-service-content .e-head.-num {
    color: var(--main-blue);
}
.b-service .-service-content .-packlist {
    border-left: 1px solid var(--main-black);
    margin-bottom: 40px;
    padding-left: 20px;
}
.b-service .-service-content .-packlist li {
    font-weight: 600;
    line-height: 2;
}
.b-service .-service-content .e-caption {
    font-size: 15px;
    margin-bottom: 35px;
}
.b-service .-service-content .e-link.-dot {
    margin: 0 0 0 auto;
    max-width: 120px;
}
.b-service .e-link .-wrap {
    position: relative;
}
.b-service .e-link .-wrap::before {
    background-color: #a1a1a1;
    content: '';
    display: block;
    height: 75px;
    margin: 60px 0 60px 28px;
    transform: rotate(45deg);
    width: 1px;
    position: absolute;
}

.b-service .-service-content.m-01 .e-link .-wrap::before {
    display: none;
}
@media screen and (max-width: 599px) {
    .b-service .-service-img-list-wrap {
        display: none;
    }
    .-service-content-list,
    .-service-content {
        width: 100% !important;
    }
    .-service-content .e-li {
        aspect-ratio: 1/1;
        overflow: hidden;
    }
    .-service-content .e-li .-img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
    .-service-img {
        margin-bottom: 30px;
    }
    .b-service .e-link .-wrap {
        padding-top: 50vw;
    }
    .b-service .-service-content.m-01 .e-link .-wrap {
        padding-top: 0;
    }
    .b-service .e-link .-wrap::before {
        top: 0;
    }
}
@media screen and (min-width: 600px) {
    .b-service .-service-content .e-head {
        margin-bottom: 40px;
    }
    .b-service .-list {
        display: flex;
        justify-content: space-between;
    }
    .b-service .-service-img-list-wrap {
        width: 52%;
        position: relative;
    }
    .b-service .-service-content-list {
        width: 40%;
    }
    .b-service .-service-img-list {
        position: sticky;
        top: 110px;
    }
    .b-service .-service-img-list {
        height: calc(100dvh - 160px);
        overflow: hidden;
    }

    .-service-img,
    .-service-img .slick-list,
    .-service-img .slick-track {
        height: 100% !important;
    }
    .-service-img {
        background: #fff;
    }
    .-service-img.m-03,
    .-service-img.m-04 {
        margin-top: calc((100dvh - 160px) * -1);
    }
    .-service-img .e-li .-img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
    .-service-content {
        display: flex;
        align-items: center;
        height: calc(100dvh - 160px);
    }
    .b-service .e-link .-wrap::before {
        top: -190px;
    }
}
@media screen and (min-width: 1025px) {
    .b-service .-service-img-list-wrap {
        width: 50vw;
        left: calc(50% + 50px);
        transform: translateX(-100%);
    }
    .-service-content {
        width: 420px;
        min-width: 420px;
        margin-right: auto;
    }
}

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

work

---------------------------*/
.work.b-box {
    background-color: #efefef;
    padding: var(--sectionPT) 0 var(--sectionPB-sp);
    position: relative;
    z-index: 2;
}
.work .e-btn {
    margin: 15px auto 0;
}

.b-work .-list {
    display: flex;
    flex-wrap: wrap;
}
.b-work .-list .e-li {
    margin-top: 32px;
    margin-right: 32px;
    overflow: hidden;
    width: calc(50% - 16px);
}
.b-work .-list .e-li:nth-child(-n + 2) {
    margin-top: 0;
}
.b-work .-list .e-li:nth-child(2n) {
    margin-right: 0;
}
.b-work .-list .e-li .-link {
    position: relative;
    width: 100%;
}
.b-work .-list .e-li .-link .b-img {
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: #fff;
}
.b-work .-list .e-li .-link .-img {
    width: 100%;
    height: 100%;
    object-fit: cover / center;
    transform: scale(1);
    transition: all 0.5s ease-in-out;
    width: 100%;
}
.b-work .-list .e-li .-link:hover .-img {
    transform: scale(1.1);
}

.b-work .-list .-description .e-title {
    font-size: 1.6rem;
    margin-bottom: 8px;
}
.b-work .-list .-description .-list {
    margin-top: 5px;
}
.b-work .-list .-description .-list li {
    border-right: 1px solid;
    font-size: 10px;
    line-height: 1;
    padding: 0 8px;
    margin-bottom: 5px;
}
.b-work .-list .-description .-list li:first-child {
    border-left: 1px solid;
}

@media screen and (max-width: 599px) {
    .b-work .-list .e-li {
        width: 100%;
        margin: 0 auto 40px;
    }
    .b-work .-list .e-li:nth-child(2n) {
        margin: 0 auto 40px;
    }
}
@media screen and (min-width: 600px) {
    .b-work .-list .e-li .-link:hover .e-img {
        transform: scale(1.1);
    }
    .work .e-btn {
        margin: 55px auto 0;
    }
}
@media screen and (max-width: 1024px) {
    .b-work .-list .-description {
        margin-top: 10px;
    }
}
@media screen and (min-width: 1025px) {
    .work.b-box {
        padding-bottom: var(--sectionPB-pc);
    }
    .b-work .-list .e-li .-link {
        aspect-ratio: 16 / 9;
        display: flex;
        justify-content: center;
        overflow: hidden;
    }
    .b-work .-list .-description .e-cover {
        background-color: #438d93;
        bottom: 0;
        content: '';
        height: 100%;
        left: 0;
        opacity: 0.6;
        position: absolute;
        width: 100%;
    }
    .b-work .-list .-description .e-title,
    .b-work .-list .-description .-list li {
        opacity: 0;
        transform: translateY(10px);
        transition: all 0.3s ease-in-out;
    }

    .b-work .-list .-description .-list li {
        font-size: 12px;
        transition-delay: 100ms;
    }
    .b-work .-list .-description .-list:last-child li {
        transition-delay: 150ms;
    }

    .b-work .-list .e-li:hover .-description .e-title,
    .b-work .-list .e-li:hover .-description .-list li {
        opacity: 1;
        transform: translateY(0);
    }

    .b-work .-list .-description {
        display: flex;
        flex-direction: column;
        height: 100%;
        justify-content: flex-end;
        opacity: 0;
        padding: 32px;
        position: absolute;
        transition: all 0.3s ease-in-out;
        width: 100%;
    }
    .b-work .-list .e-li:hover .-description {
        opacity: 1;
    }
    .b-work .-list .-description * {
        color: #fff;
        position: relative;
        z-index: 1;
    }
    .work .e-btn {
        margin: 75px auto 0;
    }
}

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

news

---------------------------*/
.news.b-box{
    background: var(--color-perlGray);
    padding: var(--sectionPT) 0 var(--sectionPB-sp);
    position: relative;
    z-index: 2;
}
.news .e-li time{
    display: block;
    font-weight: 600;
    font-size: 1.2rem;
    margin-bottom: 0.5em;
}
.news .e-li a{
    color: var(--main-blue);
    text-decoration: underline;
}
.news .e-li a:hover{
    text-decoration: none;
}

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

project

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

.project.b-box {
    background: var(--color-perlGray);
    position: relative;
    z-index: 1;
    padding-top: 65px;
}
.project.b-box .-inner .-wrap {
    background-color: #fff;
    border: 2px solid #efefef;
    overflow: hidden;
    padding: 60px 0;
}
.project .e-btn {
    margin: 64px auto 0;
}
@media screen and (max-width: 599px) {
    .project.b-box .-inner {
        width: 95%;
        margin-right: 0;
    }
    .project .e-head.-top,
    .project .b-list-wrap {
        margin-left: 25px;
    }
}
@media screen and (min-width: 600px) {
    .project.b-box {
        padding-top: 105px;
    }
    .project.b-box .-inner .-wrap {
        padding: 64px 88px 104px;
    }
}