: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;
    --cta-orange      : #ff8d00;
    --cta-hover-orange: #ffa434;
    --cta-green       : #00b894;
    --cta-hover-green : #00d88c;
    --cta-blue        : #0984e3;
    --cta-hover-blue  : #389eec;
    --line            : #d6d6d6;
    --serif           : "Zen Kaku Gothic New", sans-serif;
    --sans            : "Noto Sans JP", sans-serif;
    --latin           : "Outfit", sans-serif;
    --maxw            : 1180px;
}

.is-pc {
    @media (max-width: 767px) {
        display: none;
    }
}

.is-sp {
    @media (min-width: 768px) {
        display: 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         : 106px;
}

.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);

    @media (max-width: 900px) {
        display: none;
    }
}

.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       : 0.5em 1em !important;
    font-size     : 12px;
    letter-spacing: .1em;
    color         : var(--ink);
    transition    : .35s;
    background    : transparent;
}

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

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

    @media (max-width: 900px) {
        display: flex;
    }
}

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

/* ボタン */
.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-orange {
    background: var(--cta-orange);
    color     : var(--paper);
    box-shadow: 0 14px 34px -16px rgba(0, 0, 0, .5)
}

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

.btn-green {
    background: var(--cta-green);
    color     : var(--paper);
    box-shadow: 0 14px 34px -16px rgba(0, 0, 0, .5)
}

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

.btn-blue {
    background: var(--cta-blue);
    color     : var(--paper);
    box-shadow: 0 14px 34px -16px rgba(0, 0, 0, .5)
}

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

/* MARK */
.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 h1 .mark--green::after {
    background: #5ecfb9;
}

.page-hero h1 .mark--blue::after {
    background: #74b9ff;
}

.page-hero h1 .mark--orange::after {
    background: #ffb86c;
}