@charset "UTF-8";
/*============================
#top
============================*/

#top {}
.section .inner {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 5em 20px;
}
.section {
    display: flex;
    justify-content: center;
    width: 100%;
    min-height: 100dvh;
    padding: 80px 0 0;
}
.section.is-show .inner {
    animation: slideInFromBottom 1s ease;
}
@keyframes slideInFromBottom {
    0% {
        transform: translateY(100%);
    }
    100% {
        transform: translateY(0);
    }
}
.section_title {
    display: block;
    width: 100%;
    margin: 0 0 40px;
}
.section_title h2 {
    font-size: 14vw;
    letter-spacing: 0;
    font-family: "Arial Black", Arial, sans-serif;
    text-align: center;
    mix-blend-mode: difference;
}
.section_title h2 span {
}
.section_content dl {}
.section_content dl dt,
.section_content dl dd {
    padding: 0 10px;
}
.section_content dl dt {
    border-top: 1px solid rgba(255,255,255,.25);
    font-weight: bold;
    padding-top: 10px;
    font-size: 1.4rem;
}
.section_content dl dd {
    padding-bottom: 10px;
}
.section_content dl dd:last-child {
    border-bottom: 1px solid rgba(255,255,255,.25);
}
@media screen and (min-width:960px) {
    #top {}
    .section .inner {}
    .section {}
    .section_title {}
    .section_title h2 {
        font-size: 10rem;
    }
    .section_title h2 span {}
    .section_content dl {
    overflow: hidden;
    height: auto;
    border-top: 1px solid rgba(255,255,255,.25);
}
    .section_content dl dt,
    .section_content dl dd {padding: 20px 20px;}
    .section_content dl dt {
    font-size: 1.8rem;
    width: 300px;
    clear: both;
    float: left;
    border-top: none;
}
    .section_content dl dd {
    width: 100%;
    padding-left: 300px;
    border-bottom: 1px solid rgba(255,255,255,.25);
}
}

/*============================
#first
============================*/

#first {
    align-items: center;
    padding: 0;
}
#first .inner {
    max-width: unset;
}
#first .inner .catchcopy {
}
#first .inner .catchcopy .en,
#first .inner .catchcopy .ja {
    line-height: 1;
    text-shadow: 0px 3px 6px rgba(0,0,0,0.9);
    mix-blend-mode: difference;
    color: rgba(255,255,255,.75);
}
#first .inner .catchcopy .en {
    font-size: 16vw;
    letter-spacing: 0;
    font-family: "Arial Black", Arial, sans-serif;
    margin: 0 0 20px;
}
#first .inner .catchcopy .ja {
    font-size: 6vw;
    line-height: 1.2;
}
@media screen and (min-width:960px) {
    #first {}
    #first .inner {}
    #first .inner .catchcopy {
    padding: 0 1.5%;
}
    #first .inner .catchcopy .en,
    #first .inner .catchcopy .ja {
    text-shadow: none;
}
    #first .inner .catchcopy .en {
    font-size: 8vw;
    margin: 0 0 40px;
}
    #first .inner .catchcopy .ja {
    font-size: 2vw;
    letter-spacing: 0.05em;
    margin: 0 0 0 10px;
}
}

/*============================
#background
============================*/

#background {
    align-items: center;
    padding: 0;
}
#background .inner {}
#background .inner .background_content {}
#background .inner .background_content h2 {
    margin: 0 0 1em;
    text-shadow: 0px 3px 6px rgba(0,0,0,0.9);
    font-size: 10vw;
}
#background .inner .background_content p {
    line-height: 1.8;
    margin: 0 0 1em;
    text-shadow: 0px 3px 6px rgba(0,0,0,0.9);
}
#background .inner .background_content p:nth-child(2) {}
#background .inner .background_content p:nth-child(3) {}
#background .inner .background_content p:nth-child(4) {}
#background .inner .background_content p:nth-child(5) {}
#background .inner .background_content p strong {}
@media screen and (min-width:960px) {
    #background {
    min-height: auto;
}
    #background .inner {}
    #background .inner .background_content {}
    #background .inner .background_content h2 {
    font-size: 2vw;
}
    #background .inner .background_content p {}
    #background .inner .background_content p strong {}
}

/*============================
#service
============================*/

#service {}
#service .inner {}
#service .section_title {
}
#service .section_title h2 {}
#service .section_title h2 span {}
#service .service_content {
    width: 100%;
    display: block;
}
.half-visible {
    margin-left: -50%;
    margin-right: -50%;
}
#service .service_content .service_wrap {}
#service .service_content .service_wrap .service_item {
    text-align: center;
    padding-bottom: 40px;
    position: relative;
}
#service .service_content .service_wrap .service_item h3 {
    font-size: 6vw;
    margin: 1em;
}
#service .service_content .service_wrap .service_item h3 span {}
#service .service_content .service_wrap .service_item .content {
    padding: 0 20px;
}
#service .service_content .service_wrap .service_item .content p {}
#service .service_content .service_wrap .service_item .content p.copy {
    font-size: 1.4rem;
    font-weight: bold;
    overflow-wrap: break-word;
    margin: 0 0 20px;
}
#service .service_content .service_wrap .service_item .content p.explanation {
    text-align: left;
}
#service .service_content .service_wrap .service_item .content p.soon {
    display: flex;
    background: rgba(0,0,0,0.5);
    background: linear-gradient(180deg, rgba(0,0,0,0.5) 0%, rgba(0,0,0,1) 100%);
    padding: 20px 40px;
    position: absolute;
    top: 50px;
    left: 0;
    right: 0;
    bottom: 40px;
    margin: auto;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    font-size: 6vw;
}

#service .service_link {
    display: inline-flex;
    margin-top: 20px;
    padding: 10px 18px;
    color: #111;
    font-weight: bold;
    background: #fff;
    border: 1px solid #fff;
    border-radius: 4px;
}

#service .service_link:hover {
    color: #fff;
    background: transparent;
}
@media screen and (min-width:960px) {
    #service {}
    #service .inner {
    position: relative;
}
    #service .section_title {}
    #service .section_title h2 {}
    #service .section_title h2 span {}
    #service .service_content {height: calc(100% - 230px);display: flex;align-items: center;justify-content: center;}
    #service .service_content .service_wrap {
    display: flex;
    flex-wrap: wrap;
}
    #service .service_content .service_wrap .service_item {
    width: calc(100% / 3 - 20px);
    margin: 0 auto;
    border-bottom: none;
}
    #service .service_content .service_wrap .service_item h3 {
    font-size: 2rem;
}
    #service .service_content .service_wrap .service_item h3 span {}
    #service .service_content .service_wrap .service_item .content {}
    #service .service_content .service_wrap .service_item .content p {}
    #service .service_content .service_wrap .service_item .content p.copy {}
    #service .service_content .service_wrap .service_item .content p.explanation {}
    #service .service_content .service_wrap .service_item .content p.soon {
    font-size: 3rem;
}
}

/*============================
#company
============================*/

#company {}
#company .inner {}
#company .section_title {
}
#company .section_title h2 {
}
#company .section_title h2 span {}
#company .company_content {}
#company .company_content .company_wrap {}
#company .company_content .company_wrap dl {}
#company .company_content .company_wrap dl dt,
#company .company_content .company_wrap dl dd {
}
#company .company_content .company_wrap dl dt {
}
#company .company_content .company_wrap dl dd {
}
#company .company_content .company_wrap dl dd a {
    color: #FFF;
    text-decoration: underline;
}
#company .company_content .company_wrap dl dd:last-child {
}
#company .company_content .company_wrap dl dd ol {}
#company .company_content .company_wrap dl dd ol li {}
@media screen and (min-width:960px) {
    #company {}
    #company .inner {}
    #company .section_title {}
    #company .section_title h2 {}
    #company .section_title h2 span {}
    #company .company_content {}
    #company .company_content .company_wrap {}
    #company .company_content .company_wrap dl {}
    #company .company_content .company_wrap dl dt,
    #company .company_content .company_wrap dl dd {}
    #company .company_content .company_wrap dl dt {}
    #company .company_content .company_wrap dl dd {}
    #company .company_content .company_wrap dl dd ol {}
    #company .company_content .company_wrap dl dd ol li {}
}

/*============================
#contact
============================*/

#contact {}
#contact .inner {}
#contact .section_title {}
#contact .section_title h2 {}
#contact .section_title h2 span {}
#contact .contact_content {}
#contact .contact_content .contact_wrap {}
#contact .contact_content .contact_wrap dl {
    margin-bottom: 20px;
}
#contact .contact_content .contact_wrap dl dt,
#contact .contact_content .contact_wrap dl dd {}
#contact .contact_content .contact_wrap dl dt {}

#contact .contact_content .contact_wrap dl dt:first-child {
    border-top: none;
    padding-top: 0;
}
#contact .contact_content .contact_wrap dl dt span.must {
    color: #dc3232;
    font-size: 10px;
    position: relative;
    left: 4px;
    top: -4px;
}
#contact .contact_content .contact_wrap dl dd {
    padding-bottom: 0;
    margin-bottom: 10px;
}
#contact .contact_content .contact_wrap dl dd select,
#contact .contact_content .contact_wrap dl dd input[type="text"],
#contact .contact_content .contact_wrap dl dd input[type="email"],
#contact .contact_content .contact_wrap dl dd textarea {
    color: #FFF;
    display: block;
    width: 100%;
    padding: 4px 8px 0;
    background: transparent;
    border: none;
    font-size: 1.6rem;
}
#contact .contact_content .contact_wrap dl dd select {
}
#contact .contact_content .contact_wrap dl dd select option {}
#contact .contact_content .contact_wrap dl dd input[type="text"] {}
#contact .contact_content .contact_wrap dl dd input[type="email"] {}
#contact .contact_content .contact_wrap dl dd textarea {
    height: 4em;
}
#contact .contact_content .contact_wrap .agree {
    text-align: center;
    margin-bottom: 40px;
}
#contact .contact_content .contact_wrap .agree p {
    font-size: 1.4rem;
}
#contact .contact_content .contact_wrap .agree p a {
    color: #FFF;
    text-decoration: underline;
}
#contact .contact_content .contact_wrap .submit {
    display: block;
    text-align: center;
}
#contact .contact_content .contact_wrap .submit .submit_button {
    display: inline-block;
    position: relative;
}

#contact .contact_content .contact_wrap .submit .submit_button .wpcf7-spinner {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    margin: auto;
}

#contact .contact_content .contact_wrap .submit .submit_button .wpcf7-spinner:before {background: #FFF;display: block;width: 24px;height: 24px;opacity: 1;}
#contact .contact_content .contact_wrap .submit .submit_button input[type="submit"] {
    font-size: 1.4rem;
    font-weight: bold;
    background: #FFF;
    border: none;
    border-radius: 4px;
    padding: 8px 16px;
    display: inline-block;
    color: #111;
}
#contact .contact_content .contact_wrap .submit .wpcf7-response-output {}
@media screen and (min-width:960px) {
    #contact {}
    #contact .inner {}
    #contact .section_title {}
    #contact .section_title h2 {}
    #contact .section_title h2 span {}
    #contact .contact_content {}
    #contact .contact_content .contact_wrap {}
    #contact .contact_content .contact_wrap dl {}
    #contact .contact_content .contact_wrap dl dt,
    #contact .contact_content .contact_wrap dl dd {}
    #contact .contact_content .contact_wrap dl dt {}

#contact .contact_content .contact_wrap dl dt:first-child {
    padding-top: 20px;
}
    #contact .contact_content .contact_wrap dl dt span.must {}
    #contact .contact_content .contact_wrap dl dd {
    padding-bottom: 20px;
}
    #contact .contact_content .contact_wrap dl dd select,
    #contact .contact_content .contact_wrap dl dd input[type="text"],
    #contact .contact_content .contact_wrap dl dd input[type="email"],
    #contact .contact_content .contact_wrap dl dd textarea {}
    #contact .contact_content .contact_wrap dl dd select {}
    #contact .contact_content .contact_wrap dl dd select option {}
    #contact .contact_content .contact_wrap dl dd input[type="text"] {}
    #contact .contact_content .contact_wrap dl dd input[type="email"] {}
    #contact .contact_content .contact_wrap dl dd textarea {}
    #contact .contact_content .contact_wrap .agree {}
    #contact .contact_content .contact_wrap .agree p {}
    #contact .contact_content .contact_wrap .agree p a {}
    #contact .contact_content .contact_wrap .submit {}
    #contact .contact_content .contact_wrap .submit .submit_button {}
    #contact .contact_content .contact_wrap .submit .submit_button input[type="submit"] {}
}


.eachTextAnime span {
    opacity: 0;
    display: inline-block; /* 各文字を一つの要素として表示するために必要 */
}

.eachTextAnime.appeartext span {
    animation: text_anime_on 1s ease-out forwards;
}

@keyframes text_anime_on {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}