: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  : 640px;
    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 TITLE ===== */
.page-title {
    padding      : 42px 0 70px;
    border-bottom: 1px solid var(--line)
}

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

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

.page-title h1 {
    font-family   : var(--serif);
    font-weight   : 900;
    font-size     : clamp(30px, 4.4vw, 52px);
    line-height   : 1.32;
    letter-spacing: .04em
}

/* ===== 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
}

/* ===== STORY ===== */
.story {
    padding: 120px 0
}

.story-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
}

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

.story-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
}

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

.story-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) {
    .story-lead {
        grid-template-columns: 1fr;
        gap                  : 14px;
        margin-top           : -6px
    }
}

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

.story-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
}

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

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

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

.story-eg {
    border     : 1px solid var(--line);
    border-left: 3px solid var(--ink);
    background : var(--gray-050);
    padding    : 26px 30px;
    margin     : 6px 0 26px
}

.story-eg .eg-lbl {
    font-family   : var(--latin);
    font-size     : 11px;
    letter-spacing: .24em;
    color         : var(--gray-400);
    display       : flex;
    align-items   : center;
    gap           : 12px;
    margin-bottom : 14px
}

.story-eg .eg-lbl::before {
    content   : "";
    width     : 22px;
    height    : 1px;
    background: var(--gray-400)
}

.story-eg p {
    font-size  : 14px;
    color      : var(--gray-900);
    line-height: 2.05;
    margin     : 0
}

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

/* ===== INFO TABLE ===== */
.info {
    padding      : 120px 0;
    background   : var(--gray-050);
    border-top   : 1px solid var(--line);
    border-bottom: 1px solid var(--line)
}

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

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

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

.info-row .th {
    background    : var(--gray-050);
    padding       : 22px 28px;
    font-family   : var(--serif);
    font-size     : 14px;
    font-weight   : 600;
    color         : var(--ink);
    letter-spacing: .04em;
    display       : flex;
    align-items   : center;
    gap           : 12px;
    border-right  : 1px solid var(--line)
}

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

.info-row .td {
    padding    : 22px 28px;
    font-size  : 14.5px;
    color      : var(--gray-900);
    line-height: 2
}

.info-row .td .sub {
    display       : block;
    font-size     : 12.5px;
    color         : var(--gray-400);
    margin-top    : 4px;
    letter-spacing: .04em
}

.info-row .td a {
    color         : var(--ink);
    border-bottom : 1px solid var(--gray-200);
    transition    : .3s;
    padding-bottom: 1px
}

.info-row .td a:hover {
    border-color: var(--ink)
}

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

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

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

/* ===== TIMELINE ===== */
.timeline {
    padding: 120px 0
}

.tl-grid {
    max-width : 880px;
    border-top: 1px solid var(--line)
}

.tl-row {
    display              : grid;
    grid-template-columns: 180px 1fr;
    gap                  : 34px;
    padding              : 26px 0;
    border-bottom        : 1px solid var(--line);
    align-items          : start
}

.tl-row .y {
    font-family   : var(--latin);
    font-size     : 18px;
    letter-spacing: .06em;
    color         : var(--ink);
    font-weight   : 600;
    padding-top   : 2px
}

.tl-row .y small {
    display       : block;
    font-family   : var(--latin);
    font-size     : 11px;
    letter-spacing: .2em;
    color         : var(--gray-400);
    margin-top    : 6px;
    font-weight   : 500
}

.tl-row .e {
    font-size  : 14.5px;
    color      : var(--gray-900);
    line-height: 2
}

.tl-row .e strong {
    font-family  : var(--serif);
    font-weight  : 700;
    color        : var(--ink);
    display      : block;
    margin-bottom: 4px
}

@media(max-width:640px) {
    .tl-row {
        grid-template-columns: 1fr;
        gap                  : 8px
    }
}

/* ===== BUSINESS ===== */
.biz {
    padding   : 120px 0;
    background: var(--ink);
    color     : var(--paper)
}

.biz .sec-no {
    border-color: #3a3a3a;
    color       : var(--gray-400)
}

.biz .sec-title {
    color: var(--paper)
}

.biz .sec-title small {
    color: var(--gray-400)
}

.biz-grid {
    display              : grid;
    grid-template-columns: repeat(3, 1fr);
    gap                  : 1px;
    background           : #2a2a2a;
    border               : 1px solid #2a2a2a
}

.biz-card {
    background: var(--ink);
    padding   : 42px 38px;
    transition: background .45s
}

.biz-card:hover {
    background: #141414
}

.biz-card .idx {
    font-family   : var(--latin);
    font-size     : 12px;
    letter-spacing: .3em;
    color         : var(--gray-400);
    margin-bottom : 22px
}

.biz-card h3 {
    font-family   : var(--serif);
    font-size     : 20px;
    font-weight   : 700;
    margin-bottom : 8px;
    letter-spacing: .04em
}

.biz-card .sub {
    font-family   : var(--latin);
    font-size     : 11px;
    letter-spacing: .24em;
    color         : var(--gray-400);
    margin-bottom : 22px
}

.biz-card p {
    font-size  : 13.5px;
    color      : #bdbdbd;
    line-height: 2.05
}

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

/* ===== MEDIA ===== */
.media {
    padding: 120px 0
}

.media-grid {
    display              : grid;
    grid-template-columns: repeat(3, 1fr);
    gap                  : 0;
    border-top           : 1px solid var(--line);
    border-left          : 1px solid var(--line)
}

.media-card {
    padding      : 30px 28px;
    border-right : 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    background   : var(--paper);
    transition   : background .35s
}

.media-card:hover {
    background: var(--gray-050)
}

.media-card .cat {
    font-family   : var(--latin);
    font-size     : 11px;
    letter-spacing: .22em;
    color         : var(--gray-400);
    margin-bottom : 14px
}

.media-card h4 {
    font-family   : var(--serif);
    font-size     : 18px;
    font-weight   : 700;
    margin-bottom : 10px;
    letter-spacing: .04em
}

.media-card p {
    font-size  : 13px;
    color      : var(--gray-600);
    line-height: 1.95
}

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

/* ===== ACCESS ===== */
.access {
    padding   : 120px 0;
    background: var(--gray-050);
    border-top: 1px solid var(--line)
}

.access-grid {
    display              : grid;
    grid-template-columns: 1fr 1fr;
    gap                  : 42px;
    align-items          : start;
    background           : var(--paper);
    border               : 1px solid var(--line)
}

.access-info {
    padding: 46px 42px
}

.access-info h3 {
    font-family   : var(--serif);
    font-size     : 20px;
    font-weight   : 700;
    margin-bottom : 16px;
    letter-spacing: .04em
}

.access-info .addr {
    font-size  : 14.5px;
    color      : var(--gray-900);
    line-height: 2.05
}

.access-info .addr strong {
    font-family  : var(--serif);
    font-weight  : 700;
    display      : block;
    margin-bottom: 4px
}

.access-info .meta {
    margin-top    : 24px;
    display       : flex;
    flex-direction: column;
    gap           : 10px;
    font-size     : 13.5px;
    color         : var(--gray-600)
}

.access-info .meta span {
    display: inline-flex;
    gap    : 14px
}

.access-info .meta b {
    font-family   : var(--latin);
    font-size     : 11px;
    letter-spacing: .18em;
    color         : var(--gray-400);
    font-weight   : 500;
    min-width     : 56px;
    padding-top   : 4px
}

.access-map {
    min-height : 340px;
    background : var(--gray-050) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='400' height='340'><g fill='none' stroke='%23d6d6d6' stroke-width='1'><path d='M0 80 L400 80'/><path d='M0 160 L400 160'/><path d='M0 240 L400 240'/><path d='M100 0 L100 340'/><path d='M200 0 L200 340'/><path d='M300 0 L300 340'/></g><circle cx='200' cy='170' r='8' fill='%230a0a0a'/></svg>") center/cover no-repeat;
    border-left: 1px solid var(--line)
}

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

    .access-map {
        border-left: none;
        border-top : 1px solid var(--line);
        min-height : 240px
    }
}

/* ===== 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-grid {
    display              : grid;
    grid-template-columns: 1fr 1fr;
    gap                  : 60px;
    align-items          : start;
    position             : relative
}

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

.cta-left 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-left p {
    font-size    : 14.5px;
    color        : var(--gray-600);
    line-height  : 2.15;
    margin-bottom: 32px
}

.cta-points li {
    list-style   : none;
    display      : flex;
    gap          : 14px;
    align-items  : center;
    font-size    : 13.5px;
    color        : var(--gray-600);
    padding      : 10px 0;
    border-bottom: 1px dashed var(--gray-200)
}

.cta-points li::before {
    content: "—";
    color  : var(--gray-400)
}

form {
    display       : flex;
    flex-direction: column;
    gap           : 18px
}

.field {
    display       : flex;
    flex-direction: column;
    gap           : 8px
}

.field label {
    font-size     : 12px;
    letter-spacing: .08em;
    color         : var(--gray-600)
}

.field label .req {
    color      : var(--ink);
    font-size  : 11px;
    margin-left: 6px;
    border     : 1px solid var(--ink);
    padding    : 1px 6px
}

.field input,
.field textarea,
.field select {
    font-family: var(--sans);
    font-size  : 14px;
    color      : var(--ink);
    border     : 1px solid var(--line);
    background : var(--gray-050);
    padding    : 13px 16px;
    transition : .3s;
    width      : 100%
}

.field input:focus,
.field textarea:focus,
.field select:focus {
    outline     : none;
    border-color: var(--ink);
    background  : var(--paper)
}

.field textarea {
    resize    : vertical;
    min-height: 90px
}

.form-submit {
    background    : var(--cta);
    color         : var(--paper);
    border        : none;
    padding       : 18px;
    font-family   : var(--sans);
    font-size     : 14.5px;
    letter-spacing: .1em;
    cursor        : pointer;
    transition    : .4s;
    margin-top    : 4px
}

.form-submit:hover {
    background    : var(--cta-hover);
    letter-spacing: .16em
}

.form-note {
    font-size  : 11.5px;
    color      : var(--gray-400);
    line-height: 1.8;
    text-align : center
}

@media(max-width:900px) {
    .cta-grid {
        grid-template-columns: 1fr;
        gap                  : 42px
    }

    .cta-box {
        padding: 42px 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) {
    .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
    }
}