@charset "utf-8";

/* ===========================
 * variables
 */
:root{
    --inner-width: 1400px;
    --inner-gatter: clamp(24px, 3vw, 48px);

    --base-black: #333333;
    --base-white: #fafafa;
    --text-gray: #cccccc;
}

/* ===========================
 * COMMON
 */
html{
    scrollbar-gutter: stable;
}

body {
    color: var(--base-black);
    font-family: "Zen Kaku Gothic New", sans-serif;
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

.en-font {
    font-family: "Jost", sans-serif;
    font-optical-sizing: auto;
    font-style: normal;
}

.l-container{
    overflow-x: clip;
}

.l-inner{
    width: 100%;
    max-width: calc(var(--inner-width) + 2 * var(--inner-gatter));
    margin-inline: auto;
    padding-inline: var(--inner-gatter);
}


a.primary-link-button{
    --base-color: var(--base-black);
    --active-color: var(--base-white);

    --gatter-inline: 2em;
    z-index: 0;
    position: relative;
    display: block;
    width: 180px;
    padding-block: 1.125em;
    padding-inline: var(--gatter-inline);
    line-height: 1;
    overflow: hidden;
    background-color: transparent;
    border: 1px solid var(--base-color);
    border-radius: 9999px;
    color: var(--base-color);
    transition: color 0.4s ease;
}
.primary-link-button:hover, .primary-link-button:focus{
    color: var(--active-color);
}
.primary-link-button::before{
    z-index: -1;
    position: absolute;
    top: 50%;
    left: 50%;
    translate: -50% -50%;
    width: calc(100% + var(--gatter-inline) * 2);
    height: auto;
    aspect-ratio: 1;
    content: '';
    border-radius: 50%;
    background-color: var(--base-color);
    clip-path: circle(4px at calc(100% - var(--gatter-inline) * 2) 50%);
    transition: clip-path 0.4s ease 0.1s;
}
.primary-link-button:hover::before, .primary-link-button:focus::before{
    clip-path: circle(100px at 50% 50%);
}
.primary-link-button[data-color="inversion"]{
    --base-color: var(--base-white);
    --active-color: var(--base-black);
}

/* 白ヌキの矢印。リンクの装飾要素。ホバーアニメーションはとりあえず親側に記載。 */
.rounded-arrow{
    display: grid;
    place-items: center;
    width: 100%;
    height: auto;
    aspect-ratio: 1;
    border-radius: 50%;
    background-color: var(--base-white);
    border: 1px solid var(--base-black);
    transition: background-color 0.4s ease;
}
.rounded-arrow svg{
    fill: currentColor;
    transition: fill 0.4s ease;
}


/* ===========================
 * Layout
 */
.l-footer{
    display: grid;
    grid-template: 1fr / 1fr;
    place-items: end;
    min-height: 100vh;
}

.l-footer__inner{
    display: grid;
    grid-template-columns: 1fr;
    justify-items: center;
    padding-top: 10vh;
}

.footer-nav{
    display: grid;
    grid-template-columns: repeat(4, auto);
    row-gap: 20px;
    column-gap: 30px;
    width: fit-content;
}
.footer-nav a{
    display: inline;
    font-size: clamp(14px, 2.5vw, 18px);
    line-height: 1;
}


.l-footer__logo{
    width: 100%;
    max-width: 88px;
}

.l-footer__copy > *+*{
    margin-top: 54px;
}

.footer-main-copy{
    color: #777;
    margin-block: calc((1em - 1lh) / 2);
    font-size: clamp(32px, calc(64 / 12.8 * 1vw), 64px);
    line-height: calc(100 / 70);
    font-weight: 500;
}
.footer-main-copy span{
    display: block;
}
.footer-sub-copy{
    color: var(--text-gray);
    font-size: clamp(14px, calc(20 / 12.8 * 1vw), 20px);
    font-weight: 500;
}


a.footer-pp-link{
    display: inline;
    color: var(--text-gray);
    font-size: clamp(12px, 2.2vw, 14px);
    line-height: 1;
}
@media not all and (min-width: 768px){
    .l-footer__copy, .l-footer__nav, .l-footer__pp{
        display: none;
    }
}
@media (min-width: 768px){
    .l-footer{
        place-items: center;
    }
    .l-footer__inner{
        grid-template:
            "logo nav" auto
            "copy pp" auto / auto auto
        ;
        row-gap: 100px;
        justify-content: space-between;
    }

    .l-footer__nav{
        grid-area: nav;
        align-self: end;
        justify-self: end;
    }

    .l-footer__logo{
        grid-area: logo;
    }

    .l-footer__copy{
        grid-area: copy;
    }

    .l-footer__pp{
        grid-area: pp;
        align-self: end;
        justify-self: end;
    }
}


.l-copyright{
    color: var(--text-gray);
    font-size: clamp(10px, 2vw ,12px);
    line-height: 1;
    letter-spacing: 0.05em;
}
@media not all and (min-width: 640px){
    .l-copyright{
        margin-top: var(--inner-gatter);
        margin-bottom: calc(var(--inner-gatter) * 2);
    }
}
@media (min-width: 640px){
    .l-copyright{
        z-index: 9;
        position: fixed;
        top: 50%;
        right: var(--inner-gatter);
        translate: 50% -50%;
        writing-mode: sideways-lr;
    }
}





/* ===========================
 * Utility
 */
.heading-group{
    display: grid;
    grid-template-columns: 1fr;
    row-gap: 16px;
}
.heading-group__sub{
    margin-block: calc((1em - 1lh) / 2);
    font-size: 36px;
    font-weight: 500;
}
.heading-group__title{
    margin-block: calc((1em - 1lh) / 2);
    font-size: 14px;
    font-weight: 500;
}

.heading-group[data-color="inversion"]{
    color: var(--base-white);
}

.sr-only{
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
}

/* ===========================
 * contact section
 */
.contact-area {
    z-index: 0;
    position: relative;
    max-width: 100%;
    overflow-x: clip;
    padding-inline: 8px;
}
.contact-area__container{
    position: relative;
    padding-block: 50px;
    margin-inline: auto;
}
@media (min-width: 960px) {
    .contact-area{
        padding-inline: var(--inner-gatter);
    }
    .contact-area__container {
        padding-block: 100px;

    }
}

.contact-area__bg{
    z-index: -1;
    position: absolute;
    inset: 0;
    content: '';
    background-color: #ababab;
}

.contact-area__inner {
    width: 100%;
    padding-inline: var(--inner-gatter);
    max-width: 452px;
    margin-inline: auto;
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
    align-items: start;
}
@media (min-width: 640px) {
    .contact-area__inner {
        max-width: 640px;
    }
}
@media (min-width: 960px) {
    .contact-area__inner {
        grid-template-columns: repeat(2, 1fr);
        gap: 40px;
        max-width: calc(1280px + var(--inner-gatter) * 2);
    }
    .contact-area__inner .__recruit {
        padding-bottom: 40px;
    }
    .contact-area__inner .__company {
        padding-top: 40px;
    }
    .contact-area__inner .__2col {
        grid-column: span 2;
    }
}

.contact-card {
    display: block;
    background-color: var(--base-white);
    border-radius: clamp(15px,calc(30/1820*100vw),30px);
    padding-block: clamp(25px,calc(50/1820*100vw),50px);
    padding-inline: clamp(35px,calc(70/1820*100vw),70px);
}
.contact-card:hover .rounded-arrow {
    background-color: var(--base-black);
    color: var(--base-white);
}

.contact-card__title {
    font-size: clamp(42px, calc(65/1820*100vw), 65px);
    font-weight: 500;
    line-height: 1.3;
}
.contact-card__lead {
    font-size: 14px;
    font-weight: 500;
    line-height: 2.14em;
    margin-bottom: 0;
}
@media (max-width: 959px) {
    .contact-card__lead {
        font-size: clamp(12px, calc(12/375*100vw),15px);
    }
}

.contact-card__desc {
    font-size: 15px;
    line-height: 1.6;
    margin-bottom: 0;
}
@media (max-width: 959px) {
    .contact-card__desc {
        grid-column: span 2;
        padding-top: .5em;
    }
}
@media (max-width: 639px) {
    .contact-card__desc {
        font-size: 13px;
    }
    .contact-card__desc br.__adjust {
        display: none;
    }
}

.contact-card__image {
    width: 100%;
}
.contact-card__head {
    display: grid;
    grid-template-columns: 1fr 56.25%;
    align-items: center;
}
.contact-card__foot {
    display: grid;
    grid-template-columns: 1fr 40px;
    align-items: center;
    margin-top: min(calc(40/1820*100vw),40px);
}

.contact-card__wide {
    min-height: 149px;
    display: grid;
    grid-template-columns: 1fr 40px;
    align-items: center;
    row-gap: min(calc(40/1820*100vw),40px);
}
.contact-card__wide .rounded-arrow svg {
    width: 8px;
    height: 12px;
}
@media (min-width: 960px) {
    .contact-card__wide {
        grid-template-columns: auto 1fr 72px;
        column-gap: min(calc(70/1820*100vw),70px);
    }
    .contact-card__title {
        order: -1;
    }
}



/* ===========================
 * 見出しの背景色アニメーション
 * CSS Variables でアニメーション用の数値を管理し、gsapで数値を置き換える
 */
.js-line{
    --bg-scale: 0;
    z-index: 0;
    position: relative;
    display: block;
    width: fit-content;
    padding-top: 0.2em;
    padding-inline: 0.24em;
    padding-bottom: 0.24em;
}
.js-line::before{
    z-index: -1;
    position: absolute;
    inset: 0;
    display: block;
    margin: auto;
    content: '';
    background-color: var(--base-white);
    transform: scaleX(var(--bg-scale));
    transform-origin: left center;
    will-change: transform;
    /* box-shadow: 6px -6px 14px -10px rgb(0 0 0 / 0.1); */
}

/* 文字が下からマスクを突き破り滑り出る */
.js-mask-reveal{}
.js-mask-reveal__mask{
    display: block;
    overflow: hidden;
}
.js-mask-reveal__inner{
    display: block;
}

/* 帯が走り抜けテキストが現れるワイプリビール */
.js-wipe-reveal{}
.js-wipe-reveal__wipe{
    position: relative;
    display: block;
    width: fit-content;
}
.js-wipe-reveal__bar{
    z-index: 1;
    position: absolute;
    inset: -3px -2px;
    transform: scaleX(0);
    transform-origin: left center;
    background-color: currentColor;
}
.js-wipe-reveal__inner{
    z-index: 0;
    position: relative;
    display: block;
    opacity: 0;
}