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

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

/* main_area */
#main_area .inner {
    width: calc(100vw * 1100 / 1400);
    max-width: 1100px;
    margin: 0 auto;
    padding: 350px 0 0 0;
    position: relative;
}
#main_area .inner .philosophy h2 {
    font-size: 4.5rem;
    font-weight: 600;
    letter-spacing: 0.18em;
    line-height: 1.4;
    color: #cecece;
    position: relative;
    z-index: 1;
}
#main_area .inner .philosophy h2 span.webfont_en {
    display: block;
    font-size: 2.2rem;
    font-weight: 500;
    letter-spacing: 0;
    line-height: 1;
    margin: 15px 0 0 0;
}
#main_area .inner .philosophy h2::before {
    content: "";
    width: 530px;
    height: auto;
    aspect-ratio: 1 / 1;
    background: radial-gradient(50% 50% at 50% 50%, #FFE3BE 0%, rgba(255, 255, 255, 0.00) 100%);
    border-radius: 50%;
    position: absolute;
    top: calc(500px / 2 * -1);
    left: -70px;
    z-index: -1;
    opacity: 0;
    transform: scale(0.7);
    transform-origin: center;
    will-change: transform, opacity;
    animation:
    glowFadeIn_01 1s ease forwards 1s,
    glowBreath_01 5s ease-in-out infinite 2s;
}
#main_area .inner .philosophy .scroll_down {
    display: none;
}
#main_area .inner .lead {
    margin: 250px 0 0 0;
    font-size: 2.2rem;
    font-weight: 600;
    letter-spacing: 0.15em;
    line-height: 3.8;
}
#main_area .inner .lead p.webfont_en {
    font-size: 2rem;
    font-weight: 500;
    letter-spacing: 0;
    line-height: 3;
    margin: 65px 0 0 0;
}
#main_area .inner .revealText {
    color: transparent;
    -webkit-text-fill-color: transparent;
    background-image: linear-gradient(
        90deg,
        #000 0%,
        #000 50%,
        #cecece 50%,
        #cecece 100%
    );
    background-size: 200% 100%;
    background-position: 100% 0;
    background-clip: text;
    -webkit-background-clip: text;
    will-change: background-position;
    transition: background-image 1s ease;
}
#main_area .inner .lead .revealLine {
    display: inline-block;
    background-repeat: no-repeat;
}
@media (prefers-reduced-motion: reduce) {
    .revealText {
        color: var(--black);
        -webkit-text-fill-color: var(--black);
        background-image: none;
    }
}
#main_area .inner .link {
    margin: 85px 0 0 0;
}
#main_area .inner::after {
    content: "";
    width: min(calc(100vw * 1450 / 1400), 1450px);
    height: auto;
    aspect-ratio: 1 / 1;
    background: radial-gradient(50% 50% at 50% 50%, #FFE3DA 0%, rgba(255, 255, 255, 0.00) 100%);
    border-radius: 50%;
    position: absolute;
    top: 0;
    right: calc(-1 * min(calc(100vw * 1450 / 1400), 1450px) / 2);
    z-index: -1;
    opacity: 0;
    animation: glowFadeIn_02 1s ease forwards 2s;
}
@media only screen and (max-width: 768px) {
    #main_area .inner {
        width: 80vw;
        max-width: 80vw;
        padding: 0;
    }
    #main_area .inner .philosophy {
        min-height: 100svh;
        display: flex;
        align-items: center;
        position: relative;
    }
    #main_area .inner .philosophy h2 {
        font-size: 2.8rem;
        letter-spacing: 0.15em;
        line-height: 1.6;
    }
    #main_area .inner .philosophy h2 span.webfont_en {
        display: block;
        font-size: 1.4rem;
        margin: 20px 0 0 0;
    }
    #main_area .inner .philosophy h2::before {
        width: 340px;
        top: calc(340px / 2 * -1);
        left: calc((340px / 2 * -1) + 4em);
    }
    #main_area .inner .philosophy .scroll_down {
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 1.2rem;
        font-weight: 500;
        letter-spacing: .05em;
        width: 60px;
        height: 60px;
        border-radius: 50%;
        position: absolute;
        bottom: 20px;
        right: calc(-10vw + 20px);
        transition: opacity 1s ease;
        border: none;
    }
    #main_area .inner .philosophy .scroll_down > span {
        position: relative;
        z-index: 1;
    }
    #main_area .inner .philosophy .scroll_down .ring {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        transform: rotate(-90deg);
    }
    #main_area .inner .philosophy .scroll_down .ring_base {
        fill: none;
        stroke: var(--black);
        stroke-width: 2;
        opacity: .2;
    }
    #main_area .inner .philosophy .scroll_down .ring_line {
        fill: none;
        stroke: var(--black);
        stroke-width: 2;
        stroke-linecap: round;
        stroke-dasharray: 60 241.6;
        stroke-dashoffset: 0;
        animation: ringRun 4s linear infinite;
    }
    .scroll_show #main_area .inner .philosophy .scroll_down {
        opacity: 0;
    }
    #main_area .inner .lead {
        margin: 65px 0 0 0;
        font-size: 1.8rem;
        letter-spacing: 0.125em;
        line-height: 2;
        text-align: justify;
    }
    #main_area .inner .lead p.webfont_en {
        font-size: 1.5rem;
        line-height: 2;
        margin: 45px 0 0 0;
    }
    #main_area .inner .lead .revealLine {
        display: inline;
    }
    #main_area .inner .link {
        margin: 65px 0 0 0;
    }
    #main_area .inner::after {
        width: min(calc(100vw * 500 / 375), 500px);
        top: auto;
        bottom: calc((100vw * 500 / 375) / 2);
        right: calc(-1 * min(calc(100vw * 500 / 375), 500px) / 2);
    }
}
/* service_area */
.position_service {
    background-color: var(--black);
}
.position_service #main_area .inner .revealText {
    background-image: linear-gradient(
        90deg,
        #fff 0%,
        #fff 50%,
        #cecece 50%,
        #cecece 100%
    );
}
.position_service #main_area .inner::after {
    background: radial-gradient(50% 50% at 50% 50%, #fff 0%, rgba(0, 0, 0, 0.00) 100%);
}
#service_area {
    padding: 400px 0 0 0;
}
.position_service #service_area .inner {
    color: var(--white);
}
#service_area .inner {
    width: calc(100vw * 1100 / 1400);
    max-width: 1100px;
    margin: 0 auto;
    color: var(--black);
    transition: color 1s ease;
}
#service_area .inner p.lead {
    font-size: 1.6rem;
    font-weight: 500;
    letter-spacing: 0.125em;
    line-height: 2.8;
    margin: 65px 0 0 0;
}
#service_area .inner ul.list {
    margin: 65px 0 0 0;
    counter-reset: service;
    display: flex;
    justify-content: flex-start;
    flex-wrap: wrap;
    gap: 40px;
}
#service_area .inner ul.list li {
    display: inline-block;
    font-size: 1.6rem;
    font-weight: 500;
    letter-spacing: 0.125em;
    counter-increment: service;
    position: relative;
    padding: 0 0 0 4rem;
}
#service_area .inner ul.list li::before {
    font-family: gotham, sans-serif;
    content: counter(service, decimal-leading-zero);
    position: absolute;
    left: 0;
    top: 0;
    font-size: 1.8rem;
    letter-spacing: 0.05em;
}
#service_area .inner ul.list li::after {
    content: "";
    width: 100%;
    height: 1px;
    background-color: var(--black);
    position: absolute;
    bottom: -7px;
    left: 0;
    transition: baclground-color 1s ease;
}
.position_service #service_area .inner ul.list li::after {
    background-color: var(--white);
}
#service_area .inner p.link {
    margin: 125px 0 0 0;
}
@media only screen and (max-width: 768px) {
    #service_area {
        padding: 200px 0 0 0;
    }
    #service_area .inner {
        width: 80vw;
        max-width: 80vw;
    }
    #service_area .inner p.lead {
        line-height: 2;
        margin: 45px 0 0 0;
        text-align: justify;
    }
    #service_area .inner ul.list {
        margin: 45px 0 0 0;
        display: block;
    }
    #service_area .inner ul.list li:not(:first-child) {
        margin: 25px 0 0 0;
    }
    #service_area .inner p.link {
        margin: 65px 0 0 0;
    }
}
/* company_area */
#company_area {
    padding: 400px 0 0 0;
}
#company_area .inner {
    display: flex;
    justify-content: flex-start;
    flex-wrap: wrap;
    align-items: center;
    gap: clamp(0px, calc(100vw * 100 / 1400), 100px);
}
#company_area .inner figure {
    width: calc(100vw * 608 / 1400);
}
.position_service #company_area .inner figure img {
    filter: grayscale(100%);
}
#company_area .inner figure img {
    filter: grayscale(0);
    border-radius: 0 clamp(10px, calc(100vw * 20 / 1400), 20px) clamp(10px, calc(100vw * 20 / 1400), 20px) 0;
    transition: filter 1s ease;
}
.position_service #company_area .inner .item {
    color: var(--white);
}
#company_area .inner .item {
    width: calc(100% - (100vw * 608 / 1400) - clamp(0px, calc(100vw * 100 / 1400), 100px));
    transition: color 1s ease;
}
#company_area .inner .item p.lead {
    font-size: 1.6rem;
    font-weight: 500;
    letter-spacing: 0.125em;
    line-height: 2.8;
    margin: 65px 0 0 0;
}
#company_area .inner .item p.link {
    margin: 65px 0 0 0;
}
@media only screen and (max-width: 768px) {
    #company_area {
        padding: 200px 0 0 0;
    }
    #company_area .inner {
        display: block;
    }
    #company_area .inner figure {
        width: calc(100vw * 310 / 375);
    }
    #company_area .inner figure img {
        border-radius: 0 clamp(10px, calc(100vw * 20 / 375), 20px) clamp(10px, calc(100vw * 20 / 375), 20px) 0;
    }
    #company_area .inner .item {
        width: 80vw;
        margin: 65px auto 0 auto;
    }
    #company_area .inner .item p.lead {
        line-height: 2;
        margin: 45px 0 0 0;
        text-align: justify;
    }
    #company_area .inner .item p.link {
        margin: 45px 0 0 0;
    }
}
/* topics_area */
#topics_area {
    margin: 250px 0 0 0;
}
#topics_area .inner {
    width: calc(100vw * 1100 / 1400);
    max-width: 1100px;
    margin: 0 auto;
}
#topics_area .inner .list {
    display: flex;
    justify-content: flex-start;
    flex-wrap: wrap;
    gap: clamp(0px, calc(100vw * 20 / 1400), 20px);
    margin: 65px 0 0 0;
}
#topics_area .inner .list article {
    width: clamp(0px, calc(100vw * 260 / 1400), 260px);
}
#topics_area .inner .list article a {
    display: block;
    width: 100%;
    height: 100%;
}
#topics_area .inner .list article figure {
    aspect-ratio: 260 / 173;
    border-radius: clamp(4px, calc(100vw * 10 / 1400), 10px);
    overflow: hidden;
}
#topics_area .inner .list article figure img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition:
        filter .5s ease,
        transform .5s ease;
}
#topics_area .inner .list article a:hover figure img {
    filter: grayscale(100%);
    transform: scale(1.05);
}
#topics_area .inner .list article p.time {
    font-size: 1.4rem;
    font-weight: 500;
    letter-spacing: 0.05em;
    margin: 20px 0 0 0;
}
#topics_area .inner .list article h3 {
    font-size: 1.6rem;
    font-weight: 500;
    letter-spacing: 0.125em;
    line-height: 1.5;
    text-align: justify;
    margin: 5px 0 0 0;
}
#topics_area .inner .list article ul.category {
    margin: 20px 0 0 0;
    display: flex;
    justify-content: flex-start;
    flex-wrap: wrap;
    gap: 10px;
}
#topics_area .inner .list article ul.category li {
    color: var(--gray);
    font-size: 1.4rem;
    font-weight: 500;
    letter-spacing: 0.1em;
}
#topics_area .inner p.link {
    margin: 65px 0 0 0;
}
@media only screen and (max-width: 768px) {
    #topics_area {
        margin: 125px 0 0 0;
    }
    #topics_area .inner {
        width: 100vw;
        max-width: 100vw;
    }
    #topics_area .inner .heading {
        margin: 0 0 0 10vw;        
    }
    #topics_area .inner .list {
        display: block;
        margin: 45px 0 0 0;
    }
    #topics_area .inner .list article {
        width: 80vw;
    }
    #topics_area .inner .list article:not(:first-child) {
        margin: 0 0 0 10px;
    }
    #topics_area .inner .list .slick-slide {
        transform-origin: center;
        transition:
            opacity .5s ease,
            transform .5s ease;
    }
    #topics_area .inner .list .slick-slide:not(.slick-current) {
        opacity: .3;
        transform: scale(0.9);
    }
    #topics_area .inner .list article figure {
        border-radius: clamp(4px, calc(100vw * 10 / 375), 10px);
    }
    #topics_area .inner .list article figure img {
        transition: none;
    }
    #topics_area .inner .list article a:hover figure img {
        filter: grayscale(0);
        transform: scale(1);
    }
    #topics_area .inner p.link {
        width: 80vw;
        margin: 65px 0 0 10vw;
    }
}