@charset "UTF-8";

.mb10 { margin-bottom: 10px; }
.mb20 { margin-bottom: 20px; }
.mb30 { margin-bottom: 30px; }
.mb40 { margin-bottom: 40px; }
.mb50 { margin-bottom: 50px; }
.mb60 { margin-bottom: 60px; }
.mb70 { margin-bottom: 70px; }
.mb80 { margin-bottom: 80px; }
.mb90 { margin-bottom: 90px; }
.mb100 { margin-bottom: 100px; }

.pb10 { padding-bottom: 10px; }
.pb20 { padding-bottom: 20px; }
.pb30 { padding-bottom: 30px; }
.pb40 { padding-bottom: 40px; }
.pb50 { padding-bottom: 50px; }
.pb60 { padding-bottom: 60px; }
.pb70 { padding-bottom: 70px; }
.pb80 { padding-bottom: 80px; }
.pb90 { padding-bottom: 90px; }
.pb100 { padding-bottom: 100px; }


body {
    font-family: "Helvetica Neue", Arial, "Hiragino Sans", "Hiragino Kaku Gothic ProN","Noto Sans JP", Meiryo, sans-serif;
}

/* PCはpc画像、タブレットはtab画像、スマホはsp画像だけ表示 */
.pc {
    display: block;
}

.tab {
    display: none;
}

.sp {
    display: none;
}

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

    .tab {
        display: block;
    }

    .sp {
        display: none;
    }
}

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

    .tab {
        display: none;
    }

    .sp {
        display: block;
    }
}


/*  fadeupアニメーション
------------------------------------------------------------------*/

/* --- 初期状態（画面外にあるとき） --- */
.fadeup {
    opacity: 0;
    /* 透明にする */
    transform: translateY(30px);
    /* 30px下にずらしておく */
    transition: opacity 1s, transform 1s;
    /* 1秒かけて変化させる */
}

/* --- アニメーション発火時（JSで付与されるクラス） --- */
.fadeup.is-visible {
    opacity: 1;
    /* 不透明にする */
    transform: translateY(0);
    /* 元の位置に戻す */
}

/*  fadeinアニメーション
------------------------------------------------------------------*/

/* --- その場でフェードイン --- */
.fadein {
    opacity: 0;
    transition: opacity 2s;
    /* ふわっとする時間 */
}

/* 表示された時のスタイル */
.fadein.is-visible {
    opacity: 1;
}

/* --- 左からスライド（左 → 元の位置） --- */
.fadeleft {
    opacity: 0;
    transform: translateX(-30px);
    /* 左に30pxずらしておく */
    transition: opacity 1s, transform 1s;
}

.fadeleft.is-visible {
    opacity: 1;
    transform: translateX(0);
}

/* --- 右からスライド（右 → 元の位置） --- */
.faderight {
    opacity: 0;
    transform: translateX(30px);
    /* 右に30pxずらしておく */
    transition: opacity 1s, transform 1s;
}

.faderight.is-visible {
    opacity: 1;
    transform: translateX(0);
}

/* 遅延用のクラス */
.delay-1 { transition-delay: 0.1s; }
.delay-2 { transition-delay: 0.2s; }
.delay-3 { transition-delay: 0.3s; }
.delay-4 { transition-delay: 0.4s; }
.delay-5 { transition-delay: 1s; }
.delay-6 { transition-delay: 1.2s; }
.delay-7 { transition-delay: 1.4s; }
.delay-8 { transition-delay: 1.6s; }
.delay-9 { transition-delay: 1.8s; }
.delay-10 { transition-delay: 2s; }