:root {
    --ink      : #0a0a0a;
    --paper    : #ffffff;
    --gray-900 : #1c1c1c;
    --gray-600 : #5b5b5b;
    --gray-400 : #9a9a9a;
    --gray-200 : #dcdcdc;
    --gray-100 : #efefef;
    --gray-050 : #f7f7f7;
    --cta      : #3a3a3a;
    --cta-hover: #0a0a0a;
    --line     : #d6d6d6;
    --serif    : "Zen Kaku Gothic New", sans-serif;
    --sans     : "Noto Sans JP", sans-serif;
    --latin    : "Outfit", sans-serif;
    --maxw     : 1180px;
}

* {
    margin    : 0;
    padding   : 0;
    box-sizing: border-box
}

html {
    scroll-behavior: smooth
}

body {
    font-family           : var(--sans);
    color                 : var(--ink);
    background            : var(--paper);
    line-height           : 1.85;
    font-weight           : 400;
    -webkit-font-smoothing: antialiased;
    overflow-x            : hidden
}

::selection {
    background: var(--ink);
    color     : var(--paper)
}

a {
    color          : inherit;
    text-decoration: none
}

.wrap {
    max-width: var(--maxw);
    margin   : 0 auto;
    padding  : 0 32px
}

.reveal {
    opacity   : 0;
    transform : translateY(26px);
    transition: opacity 1s cubic-bezier(.16, 1, .3, 1), transform 1s cubic-bezier(.16, 1, .3, 1)
}

.reveal.in {
    opacity  : 1;
    transform: none
}

/* HEADER */
header {
    position       : fixed;
    top            : 0;
    left           : 0;
    width          : 100%;
    z-index        : 100;
    background     : rgba(255, 255, 255, .82);
    backdrop-filter: blur(14px);
    border-bottom  : 1px solid transparent;
    transition     : border-color .4s, background .4s
}

header.scrolled {
    border-color: var(--line)
}

.nav {
    display        : flex;
    align-items    : center;
    justify-content: space-between;
    height         : 78px
}

.logo {
    font-family   : var(--serif);
    font-weight   : 900;
    font-size     : 20px;
    letter-spacing: .12em
}

.logo span {
    display       : block;
    font-family   : var(--latin);
    font-size     : 9px;
    letter-spacing: .42em;
    color         : var(--gray-400);
    font-weight   : 800;
    margin-top    : 2px
}

.nav-links {
    display       : flex;
    gap           : 38px;
    align-items   : center;
    font-size     : 13px;
    letter-spacing: .06em;
    color         : var(--gray-600)
}

.nav-links a {
    position  : relative;
    padding   : 6px 0;
    transition: color .3s
}

.nav-links a::after {
    content   : "";
    position  : absolute;
    left      : 0;
    bottom    : 0;
    width     : 0;
    height    : 1px;
    background: var(--ink);
    transition: width .35s ease
}

.nav-links a:hover {
    color: var(--ink)
}

.nav-links a:hover::after {
    width: 100%
}

.nav-cta {
    border        : 1px solid var(--ink);
    padding       : 11px 22px;
    font-size     : 12px;
    letter-spacing: .1em;
    color         : var(--ink);
    transition    : .35s;
    background    : transparent
}

.nav-cta:hover {
    background: var(--ink);
    color     : var(--paper)
}

.burger {
    display       : none;
    flex-direction: column;
    gap           : 5px;
    cursor        : pointer;
    background    : none;
    border        : none;
    padding       : 8px
}

.burger span {
    width     : 24px;
    height    : 1.5px;
    background: var(--ink);
    transition: .3s
}

/* BREADCRUMB */
.crumb {
    padding       : 108px 0 0;
    font-size     : 12px;
    color         : var(--gray-400);
    letter-spacing: .05em
}

.crumb a {
    color     : var(--gray-600);
    transition: .3s
}

.crumb a:hover {
    color: var(--ink)
}

.crumb .sep {
    margin: 0 10px;
    color : var(--gray-400)
}

/* PAGE HERO */
.page-hero {
    padding      : 42px 0 90px;
    position     : relative;
    border-bottom: 1px solid var(--line)
}

.page-hero::before {
    content           : "";
    position          : absolute;
    inset             : 0;
    background-image  : linear-gradient(var(--gray-100) 1px, transparent 1px), linear-gradient(90deg, var(--gray-100) 1px, transparent 1px);
    background-size   : 64px 64px;
    -webkit-mask-image: radial-gradient(ellipse 60% 60% at 80% 20%, #000 0%, transparent 70%);
    mask-image        : radial-gradient(ellipse 60% 60% at 80% 20%, #000 0%, transparent 70%);
    opacity           : .55;
    z-index           : -1
}

.page-hero .eyebrow {
    font-family   : var(--latin);
    font-size     : 12px;
    letter-spacing: .34em;
    color         : var(--gray-600);
    display       : flex;
    align-items   : center;
    gap           : 16px;
    margin-bottom : 30px
}

.page-hero .eyebrow::before {
    content   : "";
    width     : 46px;
    height    : 1px;
    background: var(--gray-400)
}

.page-hero h1 {
    font-family   : var(--serif);
    font-weight   : 900;
    font-size     : clamp(34px, 5.4vw, 68px);
    line-height   : 1.32;
    letter-spacing: .02em;
    margin-bottom : 32px
}

.page-hero h1 .mark {
    position: relative;
    display : inline-block
}

.page-hero h1 .mark::after {
    content   : "";
    position  : absolute;
    left      : -2px;
    right     : -2px;
    bottom    : 6px;
    height    : 12px;
    background: var(--gray-200);
    z-index   : -1
}

.page-hero p.hero-sub {
    position   : relative;
    max-width  : 680px;
    padding    : 6px 0 6px 28px;
    border-left: 2px solid var(--ink);
    line-height: 2.25;
    font-size  : 16px;
    color      : var(--gray-600)
}

.page-hero p.hero-sub::before {
    content   : "";
    position  : absolute;
    left      : -2px;
    top       : 0;
    width     : 2px;
    height    : 22px;
    background: var(--gray-400)
}

.page-hero p.hero-sub .lead-en {
    display       : block;
    font-family   : var(--latin);
    font-size     : 11px;
    letter-spacing: .28em;
    color         : var(--gray-400);
    margin-bottom : 14px;
    font-weight   : 500
}

.page-hero p.hero-sub .k {
    color      : var(--ink);
    font-weight: 700;
    position   : relative;
    white-space: nowrap
}

.page-hero p.hero-sub .k::after {
    content   : "";
    position  : absolute;
    left      : -2px;
    right     : -2px;
    bottom    : 1px;
    height    : 8px;
    background: var(--gray-200);
    z-index   : -1
}

.page-hero-actions {
    display    : flex;
    gap        : 18px;
    align-items: center;
    flex-wrap  : wrap;
    margin-top : 42px
}

.btn-primary {
    background    : var(--cta);
    color         : var(--paper);
    padding       : 21px 46px;
    font-size     : 15px;
    letter-spacing: .08em;
    font-weight   : 500;
    display       : inline-flex;
    align-items   : center;
    gap           : 14px;
    transition    : background .4s, transform .4s, box-shadow .4s;
    box-shadow    : 0 14px 34px -16px rgba(0, 0, 0, .5)
}

.btn-primary:hover {
    background: var(--cta-hover);
    transform : translateY(-3px);
    box-shadow: 0 22px 44px -18px rgba(0, 0, 0, .6)
}

.btn-primary .arr {
    transition: transform .4s
}

.btn-primary:hover .arr {
    transform: translateX(6px)
}

.btn-ghost {
    font-size     : 14px;
    letter-spacing: .06em;
    color         : var(--gray-600);
    display       : inline-flex;
    align-items   : center;
    gap           : 10px;
    padding       : 18px 6px;
    border-bottom : 1px solid var(--gray-200);
    transition    : .35s
}

.btn-ghost:hover {
    color       : var(--ink);
    border-color: var(--ink)
}

/* SECTION FRAME */
section {
    position: relative
}

.sec-head {
    display      : flex;
    align-items  : baseline;
    gap          : 22px;
    margin-bottom: 54px
}

.sec-no {
    font-family   : var(--latin);
    font-size     : 13px;
    color         : var(--gray-400);
    letter-spacing: .2em;
    border        : 1px solid var(--line);
    padding       : 7px 13px;
    flex-shrink   : 0
}

.sec-title {
    font-family   : var(--serif);
    font-weight   : 700;
    font-size     : clamp(24px, 3.2vw, 36px);
    letter-spacing: .04em;
    line-height   : 1.5
}

.sec-title small {
    display       : block;
    font-family   : var(--latin);
    font-size     : 12px;
    letter-spacing: .34em;
    color         : var(--gray-400);
    font-weight   : 400;
    margin-bottom : 14px
}

/* MESSAGE */
.message {
    padding: 120px 0
}

.message-lead {
    max-width            : 880px;
    margin               : -18px 0 50px;
    padding              : 32px 0 0;
    border-top           : 1px solid var(--line);
    display              : grid;
    grid-template-columns: auto 1fr;
    gap                  : 34px;
    align-items          : start
}

.message-lead .mk {
    font-family   : var(--latin);
    font-size     : 13px;
    letter-spacing: .2em;
    color         : var(--gray-400);
    padding-top   : 8px;
    white-space   : nowrap
}

.message-lead p {
    font-family   : var(--serif);
    font-weight   : 600;
    font-size     : clamp(18px, 2.2vw, 24px);
    line-height   : 1.85;
    color         : var(--gray-900);
    letter-spacing: .02em;
    margin        : 0
}

.message-lead p .hl {
    position: relative
}

.message-lead p .hl::after {
    content   : "";
    position  : absolute;
    left      : -2px;
    right     : -2px;
    bottom    : 3px;
    height    : 9px;
    background: var(--gray-200);
    z-index   : -1
}

@media(max-width:640px) {
    .message-lead {
        grid-template-columns: 1fr;
        gap                  : 14px;
        margin-top           : -6px
    }
}

.message-body {
    max-width: 880px
}

.message-body h2 {
    font-family   : var(--serif);
    font-weight   : 700;
    font-size     : clamp(22px, 2.8vw, 32px);
    line-height   : 1.6;
    margin-bottom : 24px;
    letter-spacing: .03em
}

.message-body h2 .u {
    position: relative
}

.message-body h2 .u::after {
    content   : "";
    position  : absolute;
    left      : 0;
    right     : 0;
    bottom    : 2px;
    height    : 8px;
    background: var(--gray-200);
    z-index   : -1
}

.message-body p {
    font-size    : 15px;
    color        : var(--gray-600);
    line-height  : 2.15;
    margin-bottom: 22px
}

.message-body p strong {
    font-family: var(--serif);
    color      : var(--ink);
    font-weight: 700
}

/* JOBS LIST */
.jobs {
    padding      : 120px 0;
    background   : var(--gray-050);
    border-top   : 1px solid var(--line);
    border-bottom: 1px solid var(--line)
}

.jobs-grid {
    display              : grid;
    grid-template-columns: 1fr 1fr;
    gap                  : 1px;
    background           : var(--line);
    border               : 1px solid var(--line)
}

.job-cap {
    background    : var(--paper);
    padding       : 42px 38px;
    display       : flex;
    flex-direction: column;
    gap           : 14px;
    transition    : background .35s
}

.job-cap:hover {
    background: var(--gray-050)
}

.job-cap .row1 {
    display        : flex;
    justify-content: space-between;
    align-items    : center;
    gap            : 12px
}

.job-cap .tag {
    font-family   : var(--latin);
    font-size     : 11px;
    letter-spacing: .22em;
    color         : var(--gray-400)
}

.job-cap .status {
    font-size     : 11px;
    letter-spacing: .04em;
    padding       : 4px 10px;
    border        : 1px solid var(--line);
    color         : var(--gray-600);
    background    : var(--paper)
}

.job-cap .status.open {
    border-color: var(--ink);
    color       : var(--ink)
}

.job-cap h3 {
    font-family   : var(--serif);
    font-size     : 22px;
    font-weight   : 700;
    line-height   : 1.5;
    letter-spacing: .03em
}

.job-cap h3 .sub {
    display       : block;
    font-family   : var(--latin);
    font-size     : 12px;
    letter-spacing: .18em;
    color         : var(--gray-400);
    font-weight   : 400;
    margin-top    : 4px
}

.job-cap .meta {
    display   : flex;
    flex-wrap : wrap;
    gap       : 8px;
    margin-top: 6px
}

.job-cap .meta span {
    font-size : 11.5px;
    color     : var(--gray-600);
    padding   : 5px 10px;
    background: var(--gray-050);
    border    : 1px solid var(--line)
}

.job-cap p {
    font-size  : 13.5px;
    color      : var(--gray-600);
    line-height: 1.95
}

.job-cap .lnk {
    margin-top    : 10px;
    display       : inline-flex;
    align-items   : center;
    gap           : 10px;
    font-family   : var(--latin);
    font-size     : 13px;
    letter-spacing: .08em;
    color         : var(--ink);
    border-bottom : 1px solid var(--line);
    padding-bottom: 5px;
    align-self    : flex-start;
    transition    : gap .3s, border-color .3s
}

.job-cap .lnk:hover {
    gap         : 18px;
    border-color: var(--ink)
}

@media(max-width:760px) {
    .jobs-grid {
        grid-template-columns: 1fr
    }
}

/* JOB DETAIL */
.job-detail {
    padding: 120px 0
}

.job-detail.alt {
    background   : var(--gray-050);
    border-top   : 1px solid var(--line);
    border-bottom: 1px solid var(--line)
}

.jd-head {
    display        : flex;
    align-items    : flex-start;
    justify-content: space-between;
    gap            : 24px;
    flex-wrap      : wrap;
    margin-bottom  : 36px
}

.jd-head .l {
    display       : flex;
    flex-direction: column;
    gap           : 10px
}

.jd-head .tag {
    font-family   : var(--latin);
    font-size     : 11px;
    letter-spacing: .22em;
    color         : var(--gray-400)
}

.jd-head h3 {
    font-family   : var(--serif);
    font-size     : clamp(22px, 2.6vw, 28px);
    font-weight   : 700;
    letter-spacing: .03em;
    line-height   : 1.5
}

.jd-head .badges {
    display   : flex;
    gap       : 8px;
    flex-wrap : wrap;
    margin-top: 4px
}

.jd-head .badges span {
    font-size : 11.5px;
    color     : var(--gray-600);
    padding   : 5px 10px;
    background: var(--paper);
    border    : 1px solid var(--line)
}

.jd-head .status {
    font-size     : 11.5px;
    letter-spacing: .04em;
    padding       : 6px 12px;
    border        : 1px solid var(--ink);
    color         : var(--ink);
    background    : var(--paper);
    white-space   : nowrap
}

.jd-head .status.closed {
    border-color: var(--gray-400);
    color       : var(--gray-600)
}

.jd-intro {
    font-size    : 15px;
    color        : var(--gray-600);
    line-height  : 2.15;
    max-width    : 880px;
    margin-bottom: 34px
}

.jd-intro strong {
    font-family: var(--serif);
    color      : var(--ink);
    font-weight: 700
}

.jd-table {
    background: var(--paper);
    border    : 1px solid var(--line)
}

.jd-row {
    display              : grid;
    grid-template-columns: 200px 1fr;
    border-bottom        : 1px solid var(--line)
}

.jd-row:last-child {
    border-bottom: none
}

.jd-row .th {
    background    : var(--gray-050);
    padding       : 20px 24px;
    font-family   : var(--serif);
    font-size     : 13.5px;
    font-weight   : 600;
    color         : var(--ink);
    letter-spacing: .04em;
    border-right  : 1px solid var(--line);
    display       : flex;
    align-items   : flex-start;
    gap           : 10px
}

.jd-row .th .en {
    font-family   : var(--latin);
    font-size     : 10px;
    letter-spacing: .18em;
    color         : var(--gray-400);
    font-weight   : 500;
    margin-left   : auto;
    padding-top   : 2px
}

.jd-row .td {
    padding    : 20px 24px;
    font-size  : 14px;
    color      : var(--gray-900);
    line-height: 2
}

.jd-row .td ul {
    list-style: none;
    padding   : 0
}

.jd-row .td ul li {
    padding-left: 18px;
    position    : relative;
    font-size   : 13.5px
}

.jd-row .td ul li::before {
    content   : "";
    position  : absolute;
    left      : 0;
    top       : 14px;
    width     : 8px;
    height    : 1px;
    background: var(--gray-400)
}

.jd-row .td .sub {
    display   : block;
    font-size : 12px;
    color     : var(--gray-400);
    margin-top: 6px
}

@media(max-width:760px) {
    .jd-row {
        grid-template-columns: 1fr
    }

    .jd-row .th {
        border-right : none;
        border-bottom: 1px solid var(--line);
        padding      : 14px 22px
    }

    .jd-row .td {
        padding: 16px 22px
    }
}

/* FLOW */
.flow {
    padding: 120px 0
}

.flow-grid {
    display              : grid;
    grid-template-columns: repeat(4, 1fr);
    gap                  : 0;
    border-top           : 1px solid var(--line);
    background           : var(--paper)
}

.step {
    padding     : 38px 28px;
    border-right: 1px solid var(--line)
}

.step:last-child {
    border-right: none
}

.step .sn {
    font-family  : var(--latin);
    font-size    : 42px;
    font-weight  : 400;
    color        : var(--gray-200);
    line-height  : 1;
    margin-bottom: 18px
}

.step h4 {
    font-family  : var(--serif);
    font-size    : 16px;
    font-weight  : 700;
    margin-bottom: 10px
}

.step p {
    font-size    : 13px;
    color        : var(--gray-600);
    line-height  : 1.95;
    padding-right: 12px
}

@media(max-width:760px) {
    .flow-grid {
        grid-template-columns: 1fr 1fr
    }

    .step {
        border-bottom: 1px solid var(--line)
    }
}

@media(max-width:460px) {
    .flow-grid {
        grid-template-columns: 1fr
    }

    .step {
        border-right: none
    }
}

/* CTA */
.cta {
    padding: 140px 0 120px
}

.cta-box {
    border    : 1px solid var(--ink);
    padding   : 74px 62px;
    position  : relative;
    background: var(--paper)
}

.cta-box::before {
    content       : "";
    position      : absolute;
    inset         : 9px;
    border        : 1px solid var(--line);
    pointer-events: none
}

.cta-inner {
    position  : relative;
    text-align: center;
    max-width : 680px;
    margin    : 0 auto
}

.cta-inner .tag {
    font-family   : var(--latin);
    font-size     : 12px;
    letter-spacing: .32em;
    color         : var(--gray-400);
    margin-bottom : 24px
}

.cta-inner h2 {
    font-family   : var(--serif);
    font-weight   : 900;
    font-size     : clamp(26px, 3.6vw, 40px);
    line-height   : 1.45;
    letter-spacing: .03em;
    margin-bottom : 22px
}

.cta-inner p {
    font-size    : 14.5px;
    color        : var(--gray-600);
    line-height  : 2.15;
    margin-bottom: 24px
}

.cta-inner .mail {
    display       : inline-block;
    font-family   : var(--latin);
    font-size     : 15px;
    letter-spacing: .05em;
    padding       : 8px 18px;
    background    : var(--gray-050);
    border        : 1px solid var(--line);
    margin-bottom : 24px
}

.cta-inner .note {
    font-size  : 12.5px;
    color      : var(--gray-400);
    margin-top : 18px;
    line-height: 1.9
}

@media(max-width:900px) {
    .cta-box {
        padding: 48px 28px
    }
}

/* FOOTER */
footer {
    background: var(--ink);
    color     : var(--gray-400);
    padding   : 84px 0 38px
}

.f-top {
    display              : grid;
    grid-template-columns: 1.4fr 1fr 1fr 1fr;
    gap                  : 40px;
    padding-bottom       : 56px;
    border-bottom        : 1px solid #2a2a2a
}

.f-brand .logo {
    color    : var(--paper);
    font-size: 22px
}

.f-brand .logo span {
    color: var(--gray-600)
}

.f-brand p {
    font-size  : 13px;
    line-height: 2;
    margin-top : 20px;
    max-width  : 280px
}

.f-col h5 {
    color         : var(--paper);
    font-size     : 12px;
    letter-spacing: .18em;
    margin-bottom : 20px;
    font-weight   : 500;
    font-family   : var(--latin)
}

.f-col a {
    display   : block;
    font-size : 13px;
    padding   : 7px 0;
    transition: .3s
}

.f-col a:hover {
    color       : var(--paper);
    padding-left: 6px
}

.f-bottom {
    display        : flex;
    justify-content: space-between;
    align-items    : center;
    padding-top    : 30px;
    font-size      : 12px;
    flex-wrap      : wrap;
    gap            : 12px
}

.f-bottom .corp {
    line-height: 1.9
}

@media(max-width:900px) {
    .nav-links {
        display: none
    }

    .burger {
        display: flex
    }

    .f-top {
        grid-template-columns: 1fr 1fr;
        gap                  : 30px
    }
}

@media(max-width:560px) {
    .wrap {
        padding: 0 22px
    }

    .f-top {
        grid-template-columns: 1fr
    }

    .sec-head {
        flex-direction: column;
        gap           : 14px
    }

    .cta-box::before {
        inset: 6px
    }
}