/* =========================================
   BASE — Reset, body, typography, animation
   ========================================= */

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

html {
    scroll-behavior: smooth;
    overscroll-behavior-x: none;
}

body {
    color: var(--text-main);
    background: #ffffff;
    font-family: var(--font-body);
    font-size: 16px;
    line-height: 2.0;
    letter-spacing: 0.05em;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}

a {
    text-decoration: none;
    color: inherit;
    -webkit-tap-highlight-color: transparent;
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}


/* デバイス別改行制御 */
br.pc { display: none; }
br.sp { display: inline; }

@media (min-width: 768px) {
    br.pc { display: inline; }
    br.sp { display: none; }
}

/* md以上でフォントサイズアップ */
@media (min-width: 768px) {
    body {
        font-size: 18px;
    }
}


/* =========================================
   SCROLL ANIMATION
   ========================================= */

.fade-up {
    opacity: 0;
    transform: translate3d(0, 80px, 0);
    transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1),
        transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.fade-up.is-visible {
    opacity: 1;
    transform: translate3d(0, 0, 0);
}

.fade-up.delay-1 {
    transition-delay: 0.1s;
}

.fade-up.delay-2 {
    transition-delay: 0.2s;
}

.fade-up.delay-3 {
    transition-delay: 0.3s;
}