: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
}

/* INTRO */
.intro {
    padding: 120px 0
}

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

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

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

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

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

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

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

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

/* STATS */
.stats {
    padding   : 80px 0;
    background: var(--ink);
    color     : var(--paper)
}

.stats-grid {
    display              : grid;
    grid-template-columns: repeat(4, 1fr);
    gap                  : 30px;
    text-align           : center
}

.stat .num {
    font-family: var(--latin);
    font-weight: 600;
    font-size  : clamp(28px, 4vw, 46px);
    color      : #fff;
    line-height: 1
}

.stat .num small {
    font-size  : 14px;
    color      : rgba(255, 255, 255, .55);
    margin-left: 4px;
    font-weight: 400
}

.stat .lbl {
    font-size     : 12px;
    color         : rgba(255, 255, 255, .55);
    margin-top    : 14px;
    letter-spacing: .05em
}

@media(max-width:760px) {
    .stats-grid {
        grid-template-columns: repeat(2, 1fr);
        gap                  : 36px
    }
}

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

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

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

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

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

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

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

/* PHILOSOPHY (SEOで大切なこと) */
.philo {
    padding: 120px 0
}

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

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

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

.philo-eg .eq {
    font-family   : var(--serif);
    font-weight   : 700;
    font-size     : clamp(17px, 2.2vw, 22px);
    line-height   : 1.85;
    color         : var(--ink);
    letter-spacing: .03em
}

.philo-eg .eq em {
    font-style: normal;
    position  : relative
}

.philo-eg .eq em::after {
    content   : "";
    position  : absolute;
    left      : -2px;
    right     : -2px;
    bottom    : 2px;
    height    : 8px;
    background: var(--gray-200);
    z-index   : -1
}

/* POINTS (3 pillars) */
.points {
    padding   : 120px 0;
    background: var(--ink);
    color     : var(--paper)
}

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

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

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

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

.pt-card {
    background: var(--ink);
    padding   : 46px 38px;
    transition: background .4s
}

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

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

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

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

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

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

/* MENU OVERVIEW */
.menu {
    padding: 120px 0
}

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

.menu-cell {
    background    : var(--paper);
    padding       : 38px 32px;
    display       : flex;
    flex-direction: column;
    gap           : 14px
}

.menu-cell .l {
    font-family   : var(--latin);
    font-size     : 11px;
    letter-spacing: .24em;
    color         : var(--gray-400)
}

.menu-cell h3 {
    font-family   : var(--serif);
    font-size     : 20px;
    font-weight   : 700;
    letter-spacing: .03em
}

.menu-cell .price {
    font-family: var(--latin);
    font-size  : 24px;
    font-weight: 500;
    color      : var(--ink);
    line-height: 1.2
}

.menu-cell .price small {
    font-size  : 12px;
    color      : var(--gray-600);
    font-weight: 400;
    margin-left: 4px
}

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

.menu-cell .lnk {
    margin-top    : auto;
    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
}

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

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

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

.fee-block {
    margin-bottom: 64px
}

.fee-block:last-child {
    margin-bottom: 0
}

.fee-block h3 {
    font-family   : var(--serif);
    font-size     : 20px;
    font-weight   : 700;
    margin-bottom : 18px;
    letter-spacing: .03em;
    display       : flex;
    align-items   : baseline;
    gap           : 14px
}

.fee-block h3 .num {
    font-family   : var(--latin);
    font-size     : 14px;
    color         : var(--gray-400);
    letter-spacing: .2em
}

.fee-block .desc {
    font-size    : 13.5px;
    color        : var(--gray-600);
    margin-bottom: 20px;
    line-height  : 1.95
}

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

.fee-row {
    display      : grid;
    border-bottom: 1px solid var(--line);
    font-size    : 13.5px
}

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

.fee-row.h {
    background    : var(--gray-050);
    font-family   : var(--serif);
    font-weight   : 600;
    font-size     : 12.5px;
    letter-spacing: .04em
}

.fee-row .c {
    padding     : 14px 18px;
    border-right: 1px solid var(--line);
    line-height : 1.85
}

.fee-row .c:last-child {
    border-right: none
}

.fee-row .c.lbl {
    font-family: var(--serif);
    font-weight: 600;
    color      : var(--ink);
    background : var(--gray-050)
}

.fee-row .c.amt {
    font-family          : var(--latin);
    color                : var(--ink);
    font-feature-settings: "tnum"
}

.fee-row .c.amt small {
    font-size  : 12px;
    color      : var(--gray-600);
    font-weight: 400;
    margin-left: 3px
}

/* per-table column counts */
.fee-table.c2 .fee-row {
    grid-template-columns: 1fr 1.2fr
}

.fee-table.c3 .fee-row {
    grid-template-columns: 1fr 1fr 1.4fr
}

.fee-table.c4 .fee-row {
    grid-template-columns: 1.2fr 1fr 1fr 1fr
}

@media(max-width:640px) {

    .fee-table.c3 .fee-row,
    .fee-table.c4 .fee-row {
        grid-template-columns: 1fr 1fr
    }

    .fee-table.c3 .fee-row .c:nth-child(2),
    .fee-table.c4 .fee-row .c:nth-child(2) {
        border-right: none
    }

    .fee-table.c3 .fee-row .c:nth-child(3),
    .fee-table.c4 .fee-row .c:nth-child(3),
    .fee-table.c4 .fee-row .c:nth-child(4) {
        border-top: 1px solid var(--line)
    }
}

/* 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: 32px
}

@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
    }
}