html { 
    font-family: "Noto Sans JP", sans-serif;
    color: #111;
}

body {
    min-width: 375px;
}

body.js-active {
    overflow: hidden;
}

main {
    overflow: hidden;
}

span {
    display: inline-block;
}

picture {
    display: block;
}

img {
    width: 100%;
    height: auto;
    object-fit: contain;
}

a {
    display: inline-block;
}

section {
    position: relative;
    overflow: hidden;
}

@media screen and (min-width: 901px) {
    a.--nomal {
        transition: opacity .5s;
    }

    a.--nomal:hover {
        opacity: 0.7;
    }
}

/* utility */
.u-en {
    font-family: "Foldit", sans-serif;
}

.--yellow {
    color: #fdf251;
}

/* text */
.c-head {
    font-size: 16px;
    line-height: 1.4;
}

.c-subHead {
    font-size: 124px;
    font-weight: 500;
    margin-top: 15px;
    line-height: 1;
    position: relative;
}

.c-subHead span {
    position: relative;
}
.c-subHead span::before {
    background: repeating-linear-gradient(90deg, #111, #111 20px, #b5b5b5 20px , #b5b5b5 40px);
    content: '';
    height: 2px;
    left: 0;
    position: absolute;
    bottom: 0;
    width: 100%;
}

.c-h3 {
    font-size: 28px;
    line-height: 1.4;
    font-weight: 700;
}

.c-txt {
    font-size: 14px;
    line-height: 1.8;
}

@media screen and (max-width: 900px) {
    .c-head {
        font-size: 12px;
    }
    
    .c-subHead {
        font-size: 82px;
    }
    
    .c-subHead span::before {
        background: repeating-linear-gradient(90deg, #111, #111 16px, #b5b5b5 16px , #b5b5b5 32px);
    }
    
    .c-h3 {
        font-size: 24px;
        line-height: 1.4;
        font-weight: 700;
    }
    
    .c-txt {
        line-height: 1.7;
    }    
}

/* layout */
.l-wrapper {
    padding-left: 40px;
    padding-right: 40px;
}

.l-inner {
    margin: 0 auto;
    max-width: 1100px;
}

@media screen and (max-width: 900px) {
    .l-wrapper {
        padding-left: 20px;
        padding-right: 20px;
    }

    .l-inner {
        max-width: 520px;
    }
}

/* common */
.pc-only {
    display: block;
}

.br-pc-only {
    display: inline-block;
}

.sp-only {
    display: none;
}

.br-sp-only {
    display: none;
}

@media screen and (max-width: 900px) {
    .pc-only {
        display: none;
    }

    .br-pc-only {
        display: none;
    }

    .sp-only {
        display: block;
    }

    .br-sp-only {
        display: inline-block;
    }
}

/*===========================================================================*/
/*  header  */
/*===========================================================================*/

/*===========================================================================*/
/*  mv  */
/*===========================================================================*/
.p-mv {
    overflow: hidden;
    font-size: 120px;
    font-weight: 500;
    line-height: 1.2;
}

.p-mv__txts {
    display: flex;
}

.p-mv__txts--inner {
    display: flex;
    border-bottom: #111 solid 3px;
    animation: slideAnimation 90s linear infinite normal;
}
.p-mv__txts.--02 .p-mv__txts--inner {
    animation: slideAnimation02 130s linear infinite normal;
}
.p-mv__txts.--03 .p-mv__txts--inner {
    animation: slideAnimation 80s linear infinite normal;
}
.p-mv__txts.--04 .p-mv__txts--inner {
    animation: slideAnimation02 160s linear infinite normal;
}

.p-mv__txts--inner h1,
.p-mv__txts--inner p {
    white-space: nowrap;
    padding-right: 40px;
}

@keyframes slideAnimation {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-100%);
    }
}
@keyframes slideAnimation02 {
    0% {
        transform: translateX(-100%);
    }
    100% {
        transform: translateX(0);
    }
}

@media screen and (max-width: 900px) {
    .p-mv {
        font-size: 68px;
    }
    
    .p-mv__txts--inner {
        border-bottom: #111 solid 2px;
        animation: slideAnimation 90s linear infinite normal;
    }
    .p-mv__txts.--02 .p-mv__txts--inner {
        animation: slideAnimation02 130s linear infinite normal;
    }
    .p-mv__txts.--03 .p-mv__txts--inner {
        animation: slideAnimation 80s linear infinite normal;
    }
    .p-mv__txts.--04 .p-mv__txts--inner {
        animation: slideAnimation02 160s linear infinite normal;
    }
    
    .p-mv__txts--inner h1,
    .p-mv__txts--inner p {
        padding-right: 22px;
    }
}

/*===========================================================================*/
/*  sv  */
/*===========================================================================*/
.p-sv__img {
    height: 840px;
    overflow: hidden;
    border-radius: 0 0 80px 80px;
}

.p-sv__img img {
    object-fit: cover;
    height: 100%;
}

@media screen and (max-width: 900px) {
    .p-sv__img {
        height: calc(100vh - 295px);
        border-radius: 0 0 40px 40px;
    }
}

/*===========================================================================*/
/*  about  */
/*===========================================================================*/
.p-about {
    padding-top: 120px;
    padding-bottom: 200px;
    position: relative;
    z-index: 0;
}

.p-about__inner {
    display: flex;
    justify-content: space-between;
}

.p-about__heads {
    width: 400px;
}

.p-about__txts {
    width: calc(100% - 400px);
    max-width: 590px;
}

.p-about__img {
    border-radius: 20px;
    overflow: hidden;
}

.p-about__subHead {
    margin-top: 35px;
}

.p-about__txt {
    margin-top: 15px;
}

@media screen and (max-width: 900px) {
    .p-about {
        padding-top: 70px;
        padding-bottom: 110px;
    }
    
    .p-about__inner {
        display: block;
    }
    
    .p-about__heads {
        width: 100%;
    }
    
    .p-about__txts {
        width: 100%;
        max-width: unset;
        margin-top: 20px;
    }
    
    .p-about__img {
        border-radius: 12px;
    }
    
    .p-about__subHead {
        margin-top: 20px;
    }
    
    .p-about__txt {
        margin-top: 15px;
    }
}

/*===========================================================================*/
/*  vision  */
/*===========================================================================*/
.p-vision {
    position: relative;
    z-index: 2;
    background-color: #111;
    border-radius: 80px 80px 0 0;
    margin-top: -80px;
    padding-top: 120px;
    padding-bottom: 200px;
}

.p-vision .c-head,
.p-vision .c-subHead {
    color: #fff;
    text-align: center;
}

.p-vision__subHead {
    text-align: center;
    color: #fff;
    margin-top: 52px;
}

.p-vision__txt {
    text-align: center;
    color: #fff;
    margin-top: 52px;
}

@media screen and (max-width: 900px) {
    .p-vision {
        border-radius: 40px 40px 0 0;
        margin-top: -40px;
        padding-top: 70px;
        padding-bottom: 110px;
    }
    
    .p-vision__subHead {
        margin-top: 32px;
    }
    
    .p-vision__txt {
        margin-top: 32px;
    }
}

/*===========================================================================*/
/*  service  */
/*===========================================================================*/
.p-service {
    padding-top: 120px;
    padding-bottom: 200px;
    background-color: #fff;
    border-radius: 80px 80px 0 0;
    margin-top: -80px;
    position: relative;
    z-index: 4;
}

.p-service__txt {
    margin-top: 32px;
}

.p-service__list {
    padding-top: 60px;
    display: flex;
    justify-content: space-between;
}

.p-service__list li {
    width: 23%;
    background-color: #111;
    border-radius: 20px;
    padding: 45px 10px;
}

.p-service__list--img {
    max-width: 68px;
    margin: 0 auto;
}

.p-service__list--head {
    margin-top: 25px;
    font-size: 18px;
    font-weight: 700;
    text-align: center;
    line-height: 1.4;
    color: #fff;
}

@media screen and (max-width: 900px) {
    .p-service {
        padding-top: 70px;
        padding-bottom: 110px;
        border-radius: 40px 40px 0 0;
        margin-top: -40px;
    }
    
    .p-service__txt {
        margin-top: 22px;
    }
    
    .p-service__list {
        padding-top: 30px;
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
        gap: 16px;
    }
    
    .p-service__list li {
        width: calc(50% - 8px);
        background-color: #111;
        border-radius: 12px;
        padding: 26px 10px;
    }
    
    .p-service__list--head {
        margin-top: 13px;
        font-size: 16px;
    }
}

/*===========================================================================*/
/*  company  */
/*===========================================================================*/
.p-company {
    position: relative;
    z-index: 4;
    background-color: #111;
    border-radius: 80px 80px 0 0;
    margin-top: -80px;
    padding-top: 120px;
    padding-bottom: 120px;
}

.p-company .c-head,
.p-company .c-subHead {
    color: #fff;
    text-align: center;
}

.p-company__table {
    max-width: 620px;
    margin: 60px auto 0;
    color: #fff;
    border-top: rgba(255,255,255,.4) solid 1px;
}

.p-company__table dl {
    display: flex;
    padding: 30px 20px;
    border-bottom: rgba(255,255,255,.4) solid 1px;
}

.p-company__table dl dt {
    font-size: 16px;
    font-weight: 500;
    width: 200px;
    line-height: 1.4;
}

.p-company__table dl dd {
    font-size: 16px;
    width: calc(100% - 200px);
    line-height: 1.4;
}

.p-company__table dl dd a {
    text-decoration: underline;
}

@media screen and (max-width: 900px) {
    .p-company {
        border-radius: 40px 40px 0 0;
        margin-top: -40px;
        padding-top: 70px;
        padding-bottom: 70px;
    }
    
    .p-company__table {
        margin: 50px auto 0;
    }
    
    .p-company__table dl {
        display: block;
        padding: 22px 15px;
    }
    
    .p-company__table dl dt {
        font-size: 14px;
        font-weight: 500;
        width: 100%;
    }
    
    .p-company__table dl dd {
        font-size: 14px;
        width: 100%;
        margin-top: 5px;
    }
}

/*===========================================================================*/
/*  contact  */
/*===========================================================================*/
.p-contact__txts {
    display: flex;
    font-size: 60px;
    font-weight: 500;
    line-height: 1.2;
}

.p-contact__txts--inner {
    display: flex;
    border-bottom: #111 solid 2px;
    animation: slideAnimation 90s linear infinite normal;
}
.p-contact__txts.--02 .p-contact__txts--inner {
    animation: slideAnimation02 90s linear infinite normal;
    border-bottom: none;
    border-top: #111 solid 2px;
}

.p-contact__txts--inner p {
    white-space: nowrap;
    padding-right: 26px;
}

.p-contact__wrapper {
    display: block;
    padding-top: 80px;
    padding-bottom: 100px;
}

.p-contact__content {
    position: relative;
    height: 100px;
}

.p-contact__head {
    position: absolute;
    width: 100%;
    left: 0;
    top: 50%;
    transform: translate(0, -50%);
    font-size: 42px;
    font-weight: 900;
    text-align: center;
    transition: opacity .5s 0s cubic-bezier(.44,.14,.09,1.02);
    line-height: 1.2;
}

.p-contact__headEn {
    position: absolute;
    width: 100%;
    left: 0;
    top: 50%;
    transform: translate(0, -50%);
    font-size: 58px;
    font-weight: 500;
    text-align: center;
    opacity: 0;
    transition: opacity .5s 0s cubic-bezier(.44,.14,.09,1.02);
    line-height: 1.2;
}

.p-contact__caution {
    text-align: center;
    margin-top: 15px;
    font-size: 12px;
    text-align: center;
    line-height: 1.4;
}

@media screen and (min-width: 901px) {
    .p-contact__wrapper:hover .p-contact__head {
        opacity: 0;
    }
    
    .p-contact__wrapper:hover .p-contact__headEn {
        opacity: 1;
    }
}

@media screen and (max-width: 900px) {
    .p-contact__txts {
        font-size: 42px;
    }

    .p-contact__txts--inner {
        animation: slideAnimation 70s linear infinite normal;
    }
    .p-contact__txts.--02 .p-contact__txts--inner {
        animation: slideAnimation02 70s linear infinite normal;
    }
    
    .p-contact__txts--inner p {
        white-space: nowrap;
        padding-right: 26px;
    }
    
    .p-contact__wrapper {
        display: block;
        padding-top: 60px;
        padding-bottom: 70px;
    }
    
    .p-contact__content {
        position: relative;
        height: 80px;
    }
    
    .p-contact__head {
        font-size: 32px;
    }
    
    .p-contact__headEn {
        display: none;
    }
    
    .p-contact__caution {
        font-size: 10px;
    }
}

/*===========================================================================*/
/*  footer  */
/*===========================================================================*/
.p-footer {
    padding-top: 24px;
    padding-bottom: 24px;
    background-color: #111;
    color: #fff;
    font-size: 12px;
    line-height: 1.4;
    text-align: center;
}

@media screen and (max-width: 900px) {
    .p-footer {
        padding-top: 20px;
        padding-bottom: 20px;
        font-size: 10px;
    }
}