@charset "utf-8";
@import "anime.css";

/*
------------
home.css
------------
*/

/* kv_area */
#kv_area {
    width: 100%;
    height: min(calc(100vw * 680 / 1440), 680px);
    position: relative;
}
#kv_area .inner .item {
    width: 100%;
    opacity: 0;
    transform: translateY(15px);
    animation: copyFade 0.5s ease-out forwards;
    animation-delay: 0.85s;
    position: relative;
    z-index: 20;
}
#kv_area .inner .item span {
    width: min(calc(100vw * 160 / 1440), 160px);
    height: auto;
    aspect-ratio: 1 / 1;
    font-size: min(calc(100vw * 12 / 1440), 1.2rem);
    font-weight: 600;
    letter-spacing: 0.05em;
    line-height: 1.4;
    color: var(--blue);
    text-align: center;
    position: absolute;
    top: min(calc(100vw * 222 / 1440), 222px);
    left: min(calc(100vw * 1170 / 1440), 1170px);
    z-index: 1;
    display: flex;
    justify-content: center;
    align-items: center;
}
#kv_area .inner .item span::before {
    content: "";
    width: min(calc(100vw * 93 / 1440), 93px);
    height: auto;
    aspect-ratio: 1 / 1;
    background-color: var(--white);
    position: absolute;
    top: min(calc(100vw * 110 / 1440), 110px);
    left: calc(min(calc(100vw * 30 / 1440), 30px) * -1);
    z-index: -1;
}
#kv_area .inner .item span::after {
    content: "";
    width: 100%;
    height: 100%;
    border: 2px solid var(--blue);
    border-radius: 50%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -2;
}
#kv_area .inner .item h2 {
    width: min(calc(100vw * 427 / 1440), 427px);
    height: auto;
    aspect-ratio: 854 / 609;
    position: absolute;
    top: min(calc(100vw * 113 / 1440), 113px);
    left: min(calc(100vw * 794 / 1440), 794px);
    z-index: 2;
}
#kv_area .inner .item p {
    font-size: min(calc(100vw * 16 / 1440), 1.6rem);
    font-weight: 600;
    letter-spacing: 0.15em;
    line-height: 2;
    transform: skew(-5deg) rotate(-5deg);
    position: absolute;
    top: min(calc(100vw * 440 / 1440), 440px);
    left: min(calc(100vw * 915 / 1440), 915px);
    z-index: 1;
}
#kv_area .inner ul.img li {
    position: absolute;
}
#kv_area .inner ul.img li:nth-child(1) {
    width: min(calc(100vw * 522 / 1440), 522px);
    height: auto;
    aspect-ratio: 1 / 1;
    top: min(calc(100vw * 52 / 1440), 52px);
    left: min(calc(100vw * 133 / 1440), 133px);
}
#kv_area .inner ul.img li:nth-child(2) {
    width: min(calc(100vw * 351 / 1440), 351px);
    height: auto;
    aspect-ratio: 1 / 1;
    border: 2px solid var(--white);
    border-radius: 50%;
    top: min(calc(100vw * 242 / 1440), 242px);
    left: min(calc(100vw * 478 / 1440), 478px);
}
#kv_area .inner ul.img li:nth-child(3) {
    width: min(calc(100vw * 137 / 1440), 137px);
    height: auto;
    aspect-ratio: 273 / 159;
    top: min(calc(100vw * 276 / 1440), 276px);
    left: min(calc(100vw * 69 / 1440), 69px);
}
#kv_area .inner ul.img li:nth-child(4) {
    width: min(calc(100vw * 139 / 1440), 137px);
    height: auto;
    aspect-ratio: 278 / 161;
    top: min(calc(100vw * 513 / 1440), 513px);
    left: min(calc(100vw * 737 / 1440), 737px);
}
#kv_area .inner ul.img li:nth-child(5) {
    width: min(calc(100vw * 160 / 1440), 160px);
    height: auto;
    aspect-ratio: 1 / 1;
    background-color: var(--yellow);
    border-radius: 50%;
    position: absolute;
    top: min(calc(100vw * 405 / 1440), 405px);
    left: min(calc(100vw * 97 / 1440), 97px);
}
#kv_area .inner ul.img li:nth-child(6) {
    width: min(calc(100vw * 77 / 1440), 77px);
    height: auto;
    aspect-ratio: 1 / 1;
    background-color: var(--blue);
    border-radius: 50%;
    position: absolute;
    top: min(calc(100vw * 535 / 1440), 535px);
    left: min(calc(100vw * 395 / 1440), 395px);
}
#kv_area .inner ul.img li:nth-child(7) {
    width: min(calc(100vw * 300 / 1440), 300px);
    height: auto;
    aspect-ratio: 1 / 1;
    border: 2px solid var(--yellow);
    border-radius: 50%;
    position: absolute;
    top: calc(min(calc(100vw * 190 / 1440), 190px) * -1);
    left: min(calc(100vw * 654 / 1440), 654px);
}
#kv_area .inner ul.img li:nth-child(8) {
    width: min(calc(100vw * 224 / 1440), 224px);
    height: auto;
    aspect-ratio: 1 / 1;
    background-color: var(--blue);
    border-radius: 50%;
    position: absolute;
    top: min(calc(100vw * 452 / 1440), 452px);
    left: min(calc(100vw * 1306 / 1440), 1306px);
}
#kv_area .inner ul.img li.kv_circle {
    opacity: 0;
    transform: translateY(30px) scale(0.7);
    animation: kvPoyon 0.8s cubic-bezier(.34, 1.56, .64, 1) forwards;
}
#kv_area .inner ul.img li:nth-of-type(2) {
    animation-delay: 0.2s;
}
#kv_area .inner ul.img li:nth-of-type(8) {
    animation-delay: 0.2s;
}
#kv_area .inner ul.img li:nth-of-type(7) {
    animation-delay: 0.35s;
}
#kv_area .inner ul.img li:nth-of-type(6) {
    animation-delay: 0.5s;
}
#kv_area .inner ul.img li:nth-of-type(5) {
    animation-delay: 0.65s;
}
#kv_area .inner ul.img li.kv_word {
    opacity: 0;
    transform: translateY(15px) scale(0.6) rotate(-6deg);
    animation: wordPop 0.55s cubic-bezier(.34, 1.56, .64, 1) forwards;
}
#kv_area .inner ul.img li:nth-of-type(3) {
    animation-delay: 0.2s;
}
#kv_area .inner ul.img li:nth-of-type(4) {
    animation-delay: 0.35s;
}
@media only screen and (min-width: 1441px) {
    #kv_area .inner {
        position: relative;
        width: 1440px;
        margin: 0 auto;
    }
}
@media only screen and (max-width: 768px) {
    #kv_area {
        height: 100svh;
    }
    #kv_area .inner .item {
        animation-delay: 0.85s;
        position: relative;
        z-index: -1;
    }
    #kv_area .inner .item span {
        width: min(calc(100vw * 160 / 375), 160px);
        font-size: min(calc(100vw * 12 / 375), 1.2rem);
        top: min(calc(100vw * 70 / 375), 70px);
        left: auto;
        right: min(calc(100vw * 10 / 375), 10px);
    }
    #kv_area .inner .item span::before {
        width: min(calc(100vw * 93 / 375), 93px);
        top: min(calc(100vw * 60 / 375), 60px);
        left: calc(min(calc(100vw * 55 / 375), 55px) * -1);
    }
    #kv_area .inner .item h2 {
        width: min(calc(100vw * 212 / 375), 212px);
        top: min(calc(100vw * 378 / 375), 378px);
        left: min(calc(100vw * 42 / 375), 42px);
    }
    #kv_area .inner .item p {
        font-size: min(calc(100vw * 14 / 375), 1.4rem);
        line-height: 1.8;
        top: min(calc(100vw * 545 / 375), 545px);
        left: min(calc(100vw * 42 / 375), 42px);
    }
    #kv_area .inner ul.img li:nth-child(1) {
        width: min(calc(100vw * 250 / 375), 250px);
        top: min(calc(100vw * 97 / 375), 97px);
        left: calc(min(calc(100vw * 20 / 375), 20px) * -1);
    }
    #kv_area .inner ul.img li:nth-child(2) {
        width: min(calc(100vw * 155 / 375), 155px);
        top: min(calc(100vw * 241 / 375), 241px);
        left: min(calc(100vw * 162 / 375), 162px);
    }
    #kv_area .inner ul.img li:nth-child(3) {
        width: min(calc(100vw * 80 / 375), 80px);
        top: min(calc(100vw * 303 / 375), 303px);
        left: min(calc(100vw * 25 / 375), 25px);
    }
    #kv_area .inner ul.img li:nth-child(4) {
        width: min(calc(100vw * 82 / 375), 82px);
        top: min(calc(100vw * 369 / 375), 369px);
        left: min(calc(100vw * 256 / 375), 256px);
    }
    #kv_area .inner ul.img li:nth-child(5) {
        width: min(calc(100vw * 95 / 375), 95px);
        top: auto;
        bottom: calc(min(calc(100vw * 50 / 375), 50px) * -1);
        left: calc(min(calc(100vw * 40 / 375), 40px) * -1);
    }
    #kv_area .inner ul.img li:nth-child(6) {
        width: min(calc(100vw * 224 / 375), 224px);
        top: auto;
        left: auto;
        bottom: calc(min(calc(100vw * 70 / 375), 70px) * -1);
        right: calc(min(calc(100vw * 80 / 375), 80px) * -1);
    }
    #kv_area .inner ul.img li:nth-child(7) {
        display: none;
    }
    #kv_area .inner ul.img li:nth-child(8) {
        display: none;
    }
}

/* concept_area */
#concept_area {
    position: relative;
    margin: calc(100vw * 125 / 1440) 0 0 0;
}
#concept_area .inner {
    width: min(calc(100vw * 1100 / 1440), 1440px);
    margin: 0 auto;
}
#concept_area::before {
    content: "";
    width: calc(100vw * 555 / 1440);
    height: auto;
    aspect-ratio: 1 / 1;
    background-image: url(../../images/global/circleVi.svg);
    background-repeat: no-repeat;
    background-size: cover;
    position: absolute;
    top: calc(min(calc(100vw * 125 / 1440), 125px) * -1);
    right: min(calc(100vw * 110 / 1440), 110px);
    opacity: 0;
    transform: translateY(30px) scale(0.7); 
}
#concept_area.is-show::before {
    animation: kvPoyon 0.8s cubic-bezier(.34, 1.56, .64, 1) forwards;
    animation-delay: .5s;
}
#concept_area .inner h2 {
    font-size: min(calc(100vw * 40 / 1440), 4rem);
    font-weight: 600;
    letter-spacing: 0.15em;
    opacity: 0;
}
#concept_area .inner p {
    margin: min(calc(100vw * 35 / 1440), 35px) 0 0 0;
    font-size: min(calc(100vw * 16 / 1440), 1.6rem);
    font-weight: 500;
    letter-spacing: 0.15em;
    line-height: 2;
    opacity: 0;
}
#concept_area .inner p:not(:nth-of-type(1)) {
    margin: min(calc(100vw * 15 / 1440), 15px) 0 0 0;
}
#concept_area .inner h2 {
    transform: translateY(30px);
    transition: opacity .5s ease, transform 1s ease;
}
#concept_area .inner p {
    transform: translateY(30px);
    transition: opacity .5s ease .25s, transform 1s ease .25s;
}
#concept_area.is-show .inner h2,
#concept_area.is-show .inner p {
    transform: translateY(0);
    opacity: 1;
}
@media only screen and (max-width: 768px) {
    #concept_area {
        margin: calc(100vw * 125 / 375) 0 0 0;
        padding: calc(100vw * 125 / 375) 0 0 0;
    }
    #concept_area .inner {
        width: 80vw;
    }
    #concept_area::before {
        width: calc(100vw * 400 / 375);
        top: min(calc(100vw * 10 / 375), 10px);
        right: min(calc(100vw * 110 / 375), 110px);
    }
    #concept_area .inner h2 {
        font-size: min(calc(100vw * 30 / 375), 3rem);
        line-height: 1.5;
    }
    #concept_area .inner p {
        margin: min(calc(100vw * 25 / 375), 25px) 0 0 0;
        font-size: min(calc(100vw * 16 / 375), 1.6rem);
        line-height: 1.8;
        text-align: justify;
    }
    #concept_area .inner p:not(:nth-of-type(1)) {
        margin: min(calc(100vw * 10 / 375), 10px) 0 0 0;
    }
}
/* container_box */
.container_box .inner .heading span {
    font-size: 1.6rem;
    font-weight: 500;
    letter-spacing: 0.05em;
}
.container_box .inner .heading h2 {
    font-size: 3.6rem;
    line-height: 1.4;
    font-weight: 600;
    letter-spacing: 0.05em;
}
.container_box .inner .heading .color_blue {
    color: var(--blue);
}
.container_box .inner .heading .color_black {
    color: var(--black);
}
.container_box .inner .heading .color_white {
    color: var(--white);
}
@media only screen and (max-width: 768px) {
    .container_box .inner .heading span {
        display: inline-block;
        font-size: 1.4rem;
        margin: 0 0 5px 0;
    }
    .container_box .inner .heading h2 {
        font-size: 2.6rem;
    }
}
/* features_area */
#features_area {
    margin: 125px 0 0 0;
}
#features_area .inner {
    width: min(calc(100vw * 1100 / 1440), 1100px);
    margin: 0 auto;
}
#features_area .inner .list {
    margin: 40px 0 0 0;
    display: flex;
    justify-content: flex-start;
    gap: min(calc(100vw * 12 / 1440), 12px);
}
#features_area .inner .list article {
    width: calc((100% / 3) - min(calc(100vw * 8 / 1440), 8px));
    background-color: var(--blue);
    border-radius: min(calc(100vw * 20 / 1440), 20px);
    padding: min(calc(100vw * 40 / 1440), 40px);
    color: var(--white);
}
#features_area .inner .list article h3 {
    font-size: 2.2rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    line-height: 1.4;
}
#features_area .inner .list article p {
    font-size: 1.6rem;
    font-weight: 500;
    letter-spacing: 0.1em;
    line-height: 1.6;
    margin: 10px 0 0 0;
}
@media only screen and (max-width: 768px) {
    #features_area {
        margin: 100px 0 0 0;
    }
    #features_area .inner {
        width: 80vw;
    }
    #features_area .inner .list {
        margin: 35px 0 0 0;
        display: block;
    }
    #features_area .inner .list article {
        width: 100%;;
        border-radius: min(calc(100vw * 14 / 375), 14px);
        padding: min(calc(100vw * 20 / 375), 20px);
    }
    #features_area .inner .list article:not(:first-child) {
        margin: 10px 0 0 0;
    }
    #features_area .inner .list article h3 {
        font-size: 2rem;
    }
    #features_area .inner .list article p {
        text-align: justify;
    }
}
/* program_area */
#program_area {
    margin: 125px 0 0 0;
    padding: 125px 0 0 0;
    position: relative;
}
#program_area::before {
    content: "";
    width: 100%;
    height: 924px;
    background: linear-gradient(0deg, rgba(255, 255, 255, 0.00) 0%, #009EB8 100%);
    position: absolute;
    top: 0;
    left: 0;
    z-index: -2;
}
#program_area .inner {
    position: relative;
    z-index: 1;
}
#program_area .inner .heading {
    width: min(calc(100vw * 1100 / 1440), 1100px);
    margin: 0 auto;
}
#program_area .inner p.lead {
    width: min(calc(100vw * 1100 / 1440), 1100px);
    margin: 45px auto 0 auto;
    font-size: 1.6rem;
    font-weight: 500;
    letter-spacing: 0.1em;
    line-height: 1.6;
    color: var(--white);
}
#program_area .program_scroll {
    margin: 45px 0 0 0;
}
#program_area .program_scroll .scrollbar {
    width: min(calc(100vw * 1100 / 1440), 1100px);
    height: 4px;
    margin: 30px auto 0 auto;
    background: rgba(255, 255, 255, .25);
    border-radius: 10px;
    position: relative;
    overflow: hidden;
}
#program_area .program_scroll .scrollbar span {
    display: block;
    width: 25%;
    height: 100%;
    background: #fff;
    border-radius: 10px;
    position: absolute;
    top: 0;
    left: 0;
    transform: translateX(0);
}
#program_area .inner .list {
    padding: 0 calc(calc(100% - min(calc(100vw * 1100 / 1440), 1100px)) / 2);
    display: flex;
    justify-content: flex-start;
    gap: min(calc(100vw * 40 / 1440), 40px);
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}
#program_area .inner .list::-webkit-scrollbar {
    display: none;
}
#program_area .inner .list article {
    width: min(calc(100vw * 672 / 1440), 672px);
    flex-shrink: 0;
    height: 100%;
    background-color: var(--white);
    border-radius: min(calc(100vw * 20 / 1440), 20px);
    padding: min(calc(100vw * 40 / 1440), 40px);
    display: flex;
    justify-content: flex-start;
    flex-wrap: wrap;
    align-items: center;
    gap: min(calc(100vw * 27 / 1440), 27px);
    position: relative;
    outline: none;
    -webkit-tap-highlight-color: transparent;
}
#program_area .inner .list article::after {
    content: "";
    width: min(calc(100vw * 40 / 1440), 40px);
    height: 10px;
    background-color: var(--white);
    position: absolute;
    top: 50%;
    left: 100%;
    z-index: -1;
}
#program_area .inner .list article:last-child::after {
    content: none;
}
#program_area .inner .list article:last-child {
    width: min(calc(100vw * 759 / 1440), 759px);
}
#program_area .inner .list article figure {
    width: min(calc(100vw * 200 / 1440), 200px);
    aspect-ratio: 200 / 190;
    border-radius: min(calc(100vw * 10 / 1440), 10px);
    overflow: hidden;
}
#program_area .inner .list article figure img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
#program_area .inner .list article .item {
    width: calc(100% -  min(calc(100vw * 200 / 1440), 200px) - min(calc(100vw * 27 / 1440), 27px));
}
#program_area .inner .list article .item ul {
    display: flex;
    justify-self: flex-start;
    align-items: center;
    gap: min(calc(100vw * 50 / 1440), 50px);
}
#program_area .inner .list article .item ul li {
    color: var(--blue);
}
#program_area .inner .list article .item ul li:nth-child(1) {
    font-family: "Roboto", sans-serif;
    font-size: min(calc(100vw * 26 / 1440), 2.6rem);
    font-weight: 600;
    display: inline-block;
    position: relative;
}
#program_area .inner .list article .item ul li:nth-child(1) span {
    font-size: min(calc(100vw * 46 / 1440), 4.6rem);
    margin: 0 2px 0 0;
    display: inline-block;
}
#program_area .inner .list article .item ul li:nth-child(1)::after {
    content: "";
    width: 1px;
    height: 100%;
    background-color: var(--blue);
    position: absolute;
    top: 50%;
    right: calc(min(calc(100vw * 25 / 1440), 25px) * -1);
    transform: translateY(-50%);
}
#program_area .inner .list article .item ul li:nth-child(2) {
    font-size: min(calc(100vw * 24 / 1440), 2.4rem);
    font-weight: 600;
    letter-spacing: 0.1;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: min(calc(100vw * 10 / 1440), 10px);
}
#program_area .inner .list article .item ul li:nth-child(2) span {
    font-size: min(calc(100vw * 16 / 1440), 1.6rem);
    font-weight: 600;
    letter-spacing: 0.1;
    background-color: var(--light_blue01);
    padding: 6px 18px;
    border-radius: 300px;
    display: inline-block;
}
#program_area .inner .list article .item p {
    margin: min(calc(100vw * 20 / 1440), 20px) 0 0 0;
    font-size: min(calc(100vw * 16 / 1440), 1.6rem);
    font-weight: 500;
    letter-spacing: 0.05em;
    line-height: 1.6;
    text-align: justify;
}
@media only screen and (max-width: 768px) {
    #program_area {
        margin: 65px 0 0 0;
        padding: 65px 0 0 0;
    }
    #program_area::before {
        content: "";
        height: 924px;
    }
    #program_area .inner .heading {
        width: 80vw;
    }
    #program_area .inner p.lead {
        width: 80vw;
        margin: 35px auto 0 auto;
        text-align: justify;
    }
    #program_area .program_scroll {
        margin: 35px 0 0 0;
    }
    #program_area .program_scroll .scrollbar {
        display: none;
    }
    #program_area .inner .list {
        display: block;
        padding: 0;
    }
    #program_area .inner .list .slick-track {
        display: flex;
        margin: 0 0 0 10vw;
    }
    #program_area .inner .list .slick-track .slick-slide {
        height: auto;
        margin: 0 min(calc(100vw * 20 / 375), 20px) 0 0;
    }
    #program_area .inner .list .slick-track .slick-slide > div {
        height: 100%;
    }
    #program_area .inner .list article {
        width: min(calc(100vw * 260 / 375), 260px);
        height: 100%;
        border-radius: min(calc(100vw * 14 / 375), 14px);
        padding: min(calc(100vw * 20 / 375), 40px);
        display: block;
    }
    #program_area .inner .list article::after {
        width: min(calc(100vw * 20 / 375), 20px);
    }
    #program_area .inner .list article:last-child {
        width: min(calc(100vw * 260 / 375), 260px);
    }
    #program_area .inner .list article figure {
        width: 100%;
        border-radius: min(calc(100vw * 6 / 375), 6px);
    }
    #program_area .inner .list article .item {
        width: 100%;
        margin: 15px 0 0 0;
    }
    #program_area .inner .list article .item ul {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
    }
    #program_area .inner .list article .item ul li:nth-child(1) {
        font-size: min(calc(100vw * 16 / 375), 1.6rem);
        width: 100%;
    }
    #program_area .inner .list article .item ul li:nth-child(1) span {
        font-size: min(calc(100vw * 26 / 375), 2.6rem);
    }
    #program_area .inner .list article .item ul li:nth-child(1)::after {
        content: none;
    }
    #program_area .inner .list article .item ul li:nth-child(2) {
        font-size: min(calc(100vw * 14 / 375), 1.4rem);
        gap: min(calc(100vw * 10 / 375), 10px);
    }
    #program_area .inner .list article .item ul li:nth-child(2) span {
        font-size: min(calc(100vw * 12 / 375), 1.2rem);
    }
    #program_area .inner .list article .item p {
        margin: min(calc(100vw * 20 / 375), 20px) 0 0 0;
        font-size: min(calc(100vw * 16 / 375), 1.6rem);
    }
}
/* method_area */
#method_area {
    margin: 125px 0 0 0;
}
#method_area .inner {
    width: min(calc(100vw * 1100 / 1440), 1100px);
    margin: 0 auto;
}
#method_area .inner .lead {
    margin: 45px 0 0 0;
}
#method_area .inner .lead p:not(:first-child) {
    margin: 15px 0 0 0;
}
#method_area .inner .lead p {
    font-size: 1.6rem;
    letter-spacing: 0.05em;
    font-weight: 500;
    line-height: 1.6;
}
#method_area .inner .list {
    margin: 45px 0 0 0;
    display: flex;
    justify-content: space-between;
}
#method_area .inner .list article {
    width: min(calc(100vw * 510 / 1440), 510px);
}
#method_area .inner .list article figure {
    width: 100%;
    height: auto;
    aspect-ratio: 510 / 310;
    position: relative;
}
#method_area .inner .list article figure::before {
    content: "";
    height: auto;
    background-repeat: no-repeat;
    background-size: 100% auto;
    position: absolute;
    bottom: calc(min(calc(100vw * 10 / 1440), 10px) * -1);
    right: calc(min(calc(100vw * 30 / 1440), 30px) * -1);
    pointer-events: none;
}
#method_area .inner .list article:nth-child(1) figure::before {
    width: min(calc(100vw * 137 / 1440), 137px);
    aspect-ratio: 273 / 159;
    background-image: url(../../images/content/home/kv_img03.webp);
}
#method_area .inner .list article:nth-child(2) figure::before {
    width: min(calc(100vw * 139 / 1440), 139px);
    aspect-ratio: 278 / 161;
    background-image: url(../../images/content/home/kv_img04.webp);
}
#method_area .inner .list article figure img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: min(calc(100vw * 20 / 1440), 20px);
}
#method_area .inner .list article p {
    padding: 0 min(calc(100vw * 5 / 1440), 5px);
    font-size: 1.6rem;
    letter-spacing: 0.1em;
    line-height: 1.6;
    margin: 30px 0 0 0;
    text-align: justify;
}
@media only screen and (max-width: 768px) {
    #method_area {
        margin: 65px 0 0 0;
    }
    #method_area .inner {
        width: 80vw;
    }
    #method_area .inner .lead {
        margin: 35px 0 0 0;
        text-align: justify;
    }
    #method_area .inner .lead p:not(:first-child) {
        margin: 10px 0 0 0;
    }
    #method_area .inner .list {
        margin: 35px 0 0 0;
        display: block;
    }
    #method_area .inner .list article {
        width: 100%;
    }
    #method_area .inner .list article:not(:first-child) {
        margin: 35px 0 0 0;
    }
    #method_area .inner .list article figure::before {
        bottom: calc(min(calc(100vw * 10 / 375), 10px) * -1);
        right: calc(min(calc(100vw * 10 / 375), 10px) * -1);
    }
    #method_area .inner .list article:nth-child(1) figure::before {
        width: min(calc(100vw * 103 / 375), 137px);
    }
    #method_area .inner .list article:nth-child(2) figure::before {
        width: min(calc(100vw * 104 / 375), 139px);
    }
    #method_area .inner .list article figure img {
        border-radius: min(calc(100vw * 14 / 375), 14px);
    }
    #method_area .inner .list article p {
        padding: 0 min(calc(100vw * 5 / 375), 5px);
        margin: 20px 0 0 0;
    }
}
/* fiveone_area */
#fiveone_area {
    margin: 125px 0 0 0;
    padding: 125px 0;
    width: 100%;
    position: relative;
    overflow: hidden;
}
#fiveone_area::before {
    content: "";
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7);
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
}
#fiveone_area::after {
    content: "";
    position: absolute;
    top: -10%;
    left: 0;
    width: 100%;
    height: 120%;
    background-image: url(../../images/content/home/fiveoneBg.webp);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center bottom;
    transform: translateY(var(--parallax-y, 0));
    will-change: transform;
    z-index: 0;
}
#fiveone_area .inner {
    width: min(calc(100vw * 1100 / 1440), 1100px);
    margin: 0 auto;
    position: relative;
    z-index: 2;
}
#fiveone_area .inner p.lead {
    margin: 45px 0 0 0;
    font-size: 1.6rem;
    font-weight: 500;
    letter-spacing: 0.1em;
    line-height: 1.6;
    color: var(--white);
}
#fiveone_area .inner .element {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    flex-direction: row-reverse;
    margin: 45px 0 0 0;
}
#fiveone_area .inner .element figure {
    width: min(calc(100vw * 445 / 1440), 445px);
}
#fiveone_area .inner .element figure img {
    position: relative;
    top: calc(min(calc(100vw * 50 / 1440), 50px) * -1);
}
#fiveone_area .inner .element .list {
    width: min(calc(100vw * 490 / 1440), 490px);
}
#fiveone_area .inner .element .list article {
    width: 100%;
    color: var(--white);
}
#fiveone_area .inner .element .list article:not(:first-child) {
    margin: 35px 0 0 0;
}
#fiveone_area .inner .element .list article h3 {
    display: block;
    font-size: 2rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    position: relative;
}
#fiveone_area .inner .element .list article h3 span {
    font-size: 3rem;
    letter-spacing: 0;
    display: inline-block;
    margin: 0 10px 0 0;
}
#fiveone_area .inner .element .list article h3::before {
    content: "";
    width: 100%;
    height: 1px;
    background-color: var(--white);
    position: absolute;
    bottom: -10px;
    left: 0;
}
#fiveone_area .inner .element .list article p {
    margin: 15px 0 0 0;
    font-size: 1.6rem;
    font-weight: 500;
    letter-spacing: 0.1em;
    line-height: 1.6;
}
@media only screen and (max-width: 768px) {
    #fiveone_area {
        margin: 65px 0 0 0;
        padding: 65px 0;
    }
    #fiveone_area::after {
        background-image: url(../../images/content/home/fiveoneBgSP.webp);
    }
    #fiveone_area .inner {
        width: 80vw;
    }
    #fiveone_area .inner p.lead {
        margin: 35px 0 0 0;
        text-align: justify;
    }
    #fiveone_area .inner .element {
        display: block;
        margin: 35px 0 0 0;
    }
    #fiveone_area .inner .element figure {
        width: 100%;
    }
    #fiveone_area .inner .element figure img {
        position: relative;
        top: 0;
    }
    #fiveone_area .inner .element .list {
        width: 80vw;
        margin: 35px 0 0 0;
    }
    #fiveone_area .inner .element .list article h3 {
        font-size: 1.8rem;
    }
    #fiveone_area .inner .element .list article h3 span {
        font-size: 2.6rem;
    }
}
/* approach_area */
#approach_area {
    margin: 125px 0 0 0;
}
#approach_area .inner {
    width: min(calc(100vw * 1100 / 1440), 1100px);
    margin: 0 auto;
}
#approach_area .inner .list {
    margin: 45px 0 0 0;
    display: flex;
    justify-content: space-between;
}
#approach_area .inner .list article {
    width: min(calc(100vw * 330 / 1440), 330px);
}
#approach_area .inner .list article figure {
    width: 100%;
    height: auto;
    aspect-ratio: 330 / 220;
    border-radius: min(calc(100vw * 16 / 1440), 16px);
    overflow: hidden;
}
#approach_area .inner .list article span.sub {
    display: inline-block;
    margin: 25px 0 0 0;
    color: var(--blue);
    background-color: var(--light_blue01);
    font-size: 1.6rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    padding: 6px 18px;
    border-radius: 300px;
}
#approach_area .inner .list article h3 {
    margin: 15px 0 0 0;
    font-size: 2rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    line-height: 1.4;
    color: var(--blue);
}
#approach_area .inner .list article p {
    margin: 15px 0 0 0;
    font-size: 1.6rem;
    font-weight: 500;
    letter-spacing: 0.1em;
    line-height: 1.6;
}
@media only screen and (max-width: 768px) {
    #approach_area {
        margin: 65px 0 0 0;
    }
    #approach_area .inner {
        width: 90vw;
    }
    #approach_area .inner .list {
        margin: 35px 0 0 0;
        display: block;
    }
    #approach_area .inner .list article {
        width: 100%;
    }
    #approach_area .inner .list article:not(:first-child) {
        margin: 45px 0 0 0;
    }
    #approach_area .inner .list article figure {
        border-radius: min(calc(100vw * 14 / 375), 14px);
    }
    #approach_area .inner .list article span.sub {
        margin: 20px 0 0 0;
    }
    #approach_area .inner .list article h3 {
        margin: 10px 0 0 0;
        font-size: 1.8rem;
    }
    #approach_area .inner .list article p {
        margin: 10px 0 0 0;
        text-align: justify;
    }
}
/* support_area */
#support_area {
    margin: 125px 0 0 0;
    padding: 125px 0;
    background-color: var(--light_blue02);
}
#support_area .inner {
    width: min(calc(100vw * 1100 / 1440), 1100px);
    margin: 0 auto;
}
#support_area .inner .lead {
    margin: 45px 0 0 0;
    font-size: 1.6rem;
    letter-spacing: 0.1em;
    font-weight: 500;
    line-height: 1.6;
}
#support_area .inner .list {
    margin: 45px 0 0 0;
    display: flex;
    justify-content: space-around;
}
#support_area .inner .list article {
    width: min(calc(100vw * 540 / 1440), 540px);
    background-color: var(--white);
    border: 1px solid var(--blue);
    border-radius: min(calc(100vw * 20 / 1440), 20px);
    padding: min(calc(100vw * 40 / 1440), 40px);;
}
#support_area .inner .list article h3 {
    font-size: 2rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    color: var(--blue);
    position: relative;
    padding: 0 min(calc(100vw * 20 / 1440), 20px);
}
#support_area .inner .list article h3::before {
    content: "";
    width: 100%;
    height: 1px;
    background-color: var(--blue);
    position: absolute;
    bottom: -20px;
    left: 0;
}
#support_area .inner .list article ul {
    margin: 40px 0 0 0;
}
#support_area .inner .list article ul li {
    font-size: 1.6rem;
    letter-spacing: 0.1em;
    font-weight: 500;
    line-height: 1.6;
    padding: 0 0 0 2rem;
    color: #333333;
    position: relative;
}
#support_area .inner .list article ul li::before {
    content: "・";
    position: absolute;
    top: 0;
    left: 0;
}
#support_area .inner .list article ul li:not(:first-child) {
    margin: 10px 0 0 0;
}
#support_area .inner dl.note {
    margin: 45px 0 0 0;
    color: #666;
    font-size: 1.6rem;
    font-weight: 500;
    letter-spacing: 0.1em;
    line-height: 1.6;
}
@media only screen and (max-width: 768px) {
    #support_area {
        margin: 65px 0 0 0;
        padding: 65px 0;
    }
    #support_area .inner {
        width: 90vw;
    }
    #support_area .inner .lead {
        margin: 35px 0 0 0;
        text-align: justify;
    }
    #support_area .inner .list {
        margin: 35px 0 0 0;
        display: block;
    }
    #support_area .inner .list article {
        width: 100%;
        border-radius: min(calc(100vw * 16 / 375), 16px);
        padding: min(calc(100vw * 30 / 375), 30px) min(calc(100vw * 20 / 375), 20px);
    }
    #support_area .inner .list article:not(:first-child) {
        margin: 20px 0 0 0;
    }
    #support_area .inner .list article h3 {
        font-size: 1.8rem;
        padding: 0 min(calc(100vw * 20 / 375), 20px);
    }
    #support_area .inner dl.note {
        margin: 25px 0 0 0;
    }
}
/* access_area */
#access_area {
    margin: 125px 0 0 0;
}
#access_area .inner {
    width: min(calc(100vw * 1100 / 1440), 1100px);
    margin: 0 auto;
}
#access_area .inner figure {
    width: 313px;
    margin: 65px 0 0 0;
}
#access_area .inner .lead {
    margin: 25px 0 0 0;
    font-size: 1.6rem;
    letter-spacing: 0.1em;
    font-weight: 500;
    line-height: 1.6;
}
#access_area .inner .map {
    margin: 65px 0 0 0;
    width: 100%;
    height: 500px;
    overflow: hidden;
    border-radius: min(calc(100vw * 20 / 1440), 20px);
}
#access_area .inner .map iframe {
    width: 100%;
    height: 100%;
}
@media only screen and (max-width: 768px) {
    #access_area {
        margin: 65px 0 0 0;
    }
    #access_area .inner {
        width: 80vw;
    }
    #access_area .inner figure {
        width: 250px;
        margin: 45px 0 0 0;
    }
    #access_area .inner .lead {
        margin: 20px 0 0 0;
    }
    #access_area .inner .map {
        margin: 35px 0 0 0;
        height: 400px;
        border-radius: min(calc(100vw * 16 / 375), 16px);
    }
}
/* outro_area */
#outro_area {
    margin: 125px 0 0 0;
    background-image: url(../../images/content/home/outroBg.webp);
    background-repeat: no-repeat;
    background-size: 100% auto;
    background-position: center top;
    padding: min(calc(100vw * 815 / 1440), 815px) 0 0 0;
}
#outro_area .inner {
    width: min(calc(100vw * 1100 / 1440), 1100px);
    margin: 0 auto;
}
#outro_area .inner .item {
    width: fit-content;
    background-color: var(--white);
    padding: min(calc(100vw * 100 / 1440), 100px) min(calc(100vw * 100 / 1440), 100px) 0 min(calc(100vw * 100 / 1440), 100px);
    border-radius: min(calc(100vw * 20 / 1440), 20px);
}
#outro_area .inner .item h2 {
    font-size: 4rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    line-height: 1.6;
}
#outro_area .inner .item p {
    margin: 25px 0 0 0;
    font-size: 1.6rem;
    font-weight: 500;
    letter-spacing: 0.1em;
    line-height: 2.5;
}
@media only screen and (max-width: 768px) {
    #outro_area {
        margin: 65px 0 0 0;
        padding: min(calc(100vw * 220 / 375), 220px) 0 0 0;
    }
    #outro_area .inner {
        width: 90vw;
    }
    #outro_area .inner .item {
        width: 100%;
        padding: min(calc(100vw * 30 / 375), 30px) min(calc(100vw * 20 / 375), 20px) 0 min(calc(100vw * 20 / 375), 20px);
        border-radius: min(calc(100vw * 14 / 375), 14px);
    }
    #outro_area .inner .item h2 {
        font-size: 2rem;
    }
    #outro_area .inner .item p {
        margin: 20px 0 0 0;
        line-height: 1.8;
        text-align: justify;
    }
}
/* form_area */
#form_area {
    margin: 125px 0 0 0;
    padding: 125px 0;
    background-color: var(--blue);
}
#form_area .inner {
    width: min(calc(100vw * 1100 / 1440), 1100px);
    margin: 0 auto;
}
#form_area .inner .lead {
    margin: 45px 0 0 0;
}
#form_area .inner .lead p {
    font-size: 1.6rem;
    font-weight: 500;
    letter-spacing: 0.1em;
    line-height: 1.6;
    color: var(--white);
}
#form_area .inner .lead p:not(:first-child) {
    margin: 20px 0 0 0;
}
#form_area .inner .form_element {
    margin: 65px 0 0 0;
}
#form_area .inner .form_element .form_item:not(:nth-of-type(1)) {
    margin: 45px 0 0 0;
}
#form_area .inner .form_element .flx_container {
    display: flex;
    justify-content: space-between;
}
#form_area .inner .form_element .flx_container .form_item {
    width: calc((100% / 2) - min(calc(100vw * 60 / 1440), 60px));
    margin: 0;
}
#form_area .inner .form_element .form_item .form_label {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 10px;
}
#form_area .inner .form_element .form_item .form_label label {
    font-size: 1.6rem;
    font-weight: 500;
    letter-spacing: 0.1em;
    color: var(--white);
}
#form_area .inner .form_element .form_item .form_label label em {
    font-style: normal;
    font-size: 1.2rem;
}
#form_area .inner .form_element span.required {
    background-color: var(--white);
    color: var(--blue);
    font-size: 1.2rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    padding: 4px 10px;
    border-radius: 300px;
}
#form_area .inner .form_element .form_item .item {
    margin: 10px 0 0 0;
}
#form_area .inner .form_element .form_item .item input,
#form_area .inner .form_element .form_item .item select,
#form_area .inner .form_element .form_item .item textarea,
#form_area .inner .form_element button {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background: transparent;
    border: none;
    border-radius: 0;
    font: inherit;
    outline: none;
}
#form_area .inner .form_element .form_item .item input,
#form_area .inner .form_element .form_item .item select {
    width: 100%;
    color: var(--black);
    background-color: var(--white);
    border: 2px solid var(--white);
    border-radius: min(calc(100vw * 6 / 1440), 6px);
    padding: 15px;
    font-size: 1.6rem;
    font-weight: 500;
    letter-spacing: 0.1em;
    min-height: 56px;
    transition: border-color .3s ease;
}
#form_area .inner .form_element .form_item .item .select_wrap {
    position: relative;
}
#form_area .inner .form_element .form_item .item .select_wrap::after {
    content: "";
    position: absolute;
    top: 50%;
    right: 20px;
    width: 8px;
    height: 8px;
    border-right: 2px solid #333;
    border-bottom: 2px solid #333;
    transform: translateY(-70%) rotate(45deg);
    pointer-events: none;
}
#form_area .inner .form_element .form_item .item select {
    cursor: pointer;
}
#form_area .inner .form_element .form_item .item textarea {
    width: 100%;
    height: 280px;
    line-height: 1.6;
    background-color: var(--white);
    border: 2px solid var(--white);
    border-radius: min(calc(100vw * 6 / 1440), 6px);
    padding: 15px;
    font-size: 1.6rem;
    font-weight: 500;
    letter-spacing: 0.1em;
    transition: border-color .3s ease;
}
#form_area .inner .form_element .form_item .item input:focus,
#form_area .inner .form_element .form_item .item textarea:focus {
    border: 2px solid var(--yellow);
}
#form_area .inner .form_element .form_item .item input::placeholder,
#form_area .inner .form_element .form_item .item textarea::placeholder {
    color: #D9D9D9;
}
#form_area .inner .form_element .form_item .item .error_list {
    margin: 10px 0 0 0;
    font-size: 1.4rem;
    font-weight: 500;
    letter-spacing: 0.05em;
    line-height: 1.5;
    background-color: #ff3333;
    color: #fff;
    padding: 6px 20px;
    border-radius: min(calc(100vw * 6 / 1440), 6px);
}
#form_area .inner .form_element .privacy_chk {
    margin: 65px 0 0 0;
}
#form_area .inner .form_element .privacy_chk p.lead {
    margin: 15px 0 0 0;
    font-size: 1.6rem;
    font-weight: 500;
    letter-spacing: 0.1em;
    line-height: 1.6;
    color: var(--white);
}
#form_area .inner .form_element .privacy_chk p.lead a {
    text-decoration: underline;
    color: var(--white);
}
#form_area .inner .form_element .privacy_chk p.lead a:hover {
    text-decoration: none;
}
#form_area .inner .form_element .privacy_chk .chk_wrap {
    margin: 20px 0 0 0;
}
#form_area .inner .form_element .privacy_chk .chk_wrap input[type="checkbox"] {
    position: absolute;
    width: 20px;
    height: 20px;
    opacity: 0;
    cursor: pointer;
}
#form_area .inner .form_element .privacy_chk .chk_wrap label {
    position: relative;
    padding-left: 32px;
    cursor: pointer;
    user-select: none;
    font-size: 1.6rem;
    font-weight: 500;
    letter-spacing: 0.1rem;
    color: var(--white);
}
#form_area .inner .form_element .privacy_chk .chk_wrap label::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    width: 20px;
    height: 20px;
    border: 1px solid var(--white);
    border-radius: 4px;
    background-color: var(--white);
    transform: translateY(-50%);
    transition: border-color .3s ease;
}
#form_area .inner .form_element .privacy_chk .chk_wrap label::after {
    content: "";
    position: absolute;
    left: 6px;
    top: 50%;
    width: 6px;
    height: 10px;
    border-right: 2px solid var(--white);
    border-bottom: 2px solid var(--white);
    transform: translateY(-60%) rotate(45deg);
    opacity: 0;
    transition: opacity .3s ease;
}
#form_area .inner .form_element .privacy_chk .chk_wrap input[type="checkbox"]:checked + label::before {
    background-color: var(--black);
    border-color: var(--black);
}
#form_area .inner .form_element .privacy_chk .chk_wrap input[type="checkbox"]:checked + label::after {
  opacity: 1;
}
#form_area .inner .form_element .privacy_chk .chk_wrap label:hover::before {
  border-color: var(--black);
}
#form_area .inner .form_element .btn_area {
    margin: 45px 0 0 0;
}
#form_area .inner .form_element .btn_area button {
    font-size: 1.6rem;
    font-weight: 500;
    letter-spacing: 0.1em;
    color: var(--blue);
    background-color: var(--white);
    border: 1px solid var(--white);
    padding: 30px 80px;
    border-radius: 300px;
    cursor: pointer;
    pointer-events: all;
    transition: background-color .3s ease, color .3s ease, border-color .3s ease;
}
#form_area .inner .form_element .btn_area button.is-disabled {
    pointer-events: none;
    background-color: #a9a9a9;
    color: #D9D9D9;
    border: 1px solid var(--a9a9a9);
}
#form_area .inner .form_element .btn_area button:hover {
    background-color: var(--blue);
    color: var(--white);
}
@media only screen and (max-width: 768px) {
    #form_area {
        margin: 65px 0 0 0;
        padding: 65px 0;
    }
    #form_area .inner {
        width: 80vw;
    }
    #form_area .inner .lead {
        margin: 35px 0 0 0;
    }
    #form_area .inner .lead p {
        text-align: justify;
    }
    #form_area .inner .lead p:not(:first-child) {
        margin: 10px 0 0 0;
    }
    #form_area .inner .form_element {
        margin: 45px 0 0 0;
    }
    #form_area .inner .form_element .form_item:not(:nth-of-type(1)) {
        margin: 35px 0 0 0;
    }
    #form_area .inner .form_element .flx_container {
        display: block;
    }
    #form_area .inner .form_element .flx_container .form_item {
        width: 100%;
    }
    #form_area .inner .form_element .form_item .item input,
    #form_area .inner .form_element .form_item .item select {
        border-radius: min(calc(100vw * 6 / 375), 6px);
        padding: 10px;
        min-height: 56px;
    }
    #form_area .inner .form_element .form_item .item textarea {
        height: 200px;
        padding: 10px;
        border-radius: min(calc(100vw * 6 / 375), 6px);
    }
    #form_area .inner .form_element .form_item .item .error_list {
        border-radius: min(calc(100vw * 6 / 375), 6px);
    }
    #form_area .inner .form_element .privacy_chk {
        margin: 45px 0 0 0
    }
    #form_area .inner .form_element .btn_area {
        margin: 35px 0 0 0;
    }
    #form_area .inner .form_element .btn_area button {
        width: 100%;
        text-align: center;
        padding: 30px 0;
        transition: none
    }
    #form_area .inner .form_element .btn_area button:hover {
        background-color: var(--white);
        color: var(--blue);
    }
}