@charset "utf-8";<style>
    /*==========================================================================
    
    # reset css
    
    ========================================================================== */
    
    * {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    }
    
    html, body, h1, h2, h3, h4, h5, h6, ul, ol, dl, li, dt, dd, p, div, span, img, a, table, tr, th, td, small, button, time, figure {
    border: 0;
    margin: 0;
    padding: 0;
    vertical-align: baseline;
    }
    
    body {
    font-size: 16px;
    font-family: "游ゴシック体", "Yu Gothic", YuGothic, "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, "MS Pゴシック", "MS PGothic", sans-serif;
    }
    
    html {
    line-height: 1
    }
    
    ol, ul {
    list-style: none
    }
    
    li, dd {
    list-style-type: none;
    }
    
    header, footer, nav, section, article, aside, figure, figcaption {
    display: block;
    }
    
    img {
    border: none;
    vertical-align: bottom;
    }
    
    a {
    cursor: pointer;
    text-decoration: none;
    }


    /*==========================================================================
    
    # inner
    
    ========================================================================== */
    .inner {
        padding: 0 140px;
    }

    @media screen and (min-width: 768px) and (max-width: 1024px) {
    .tab-inner {
        padding: 0 40px;
    }
    }

    @media screen and (max-width: 767px) {
    .sm-inner {
        padding: 0 30px;
    }
    }
    
    /*==========================================================================
    
    # width
    
    ========================================================================== */
    .max-w-1400px {
        max-width: 1400px;
        width: 100%;
        margin: 0 auto;
    }

    .max-w-160px {
        max-width: 160px;
    }

    @media screen and (max-width: 767px) {
    .sm-max-w-initial {
        max-width: initial;
    }
}


    .w-40 {
        width: 40%;
    }

    .w-45 {
        width: 45%;
    }

    .w-50 {
        width: 50%;
    }
    
    .w-60 {
        width: 60%;
    }

    .w-75 {
        width: 75%;
    }

    .w-80 {
        width: 80%;
    }

    .w-95 {
        width: 95%;
    }

    .w-full {
        width: 100%;
    }

    .w-160px {
        width: 160px;
    }

    @media screen and (max-width: 767px) {
    .sm-w-170px {
        width: 170px;
    }
    }

    @media screen and (max-width: 767px) {
    .sm-w-full {
        width: 100%;
    }
    }


    @media screen and (min-width: 768px) and (max-width: 1024px) {
    .tab-w-60 {
        width: 60%;
    }
    }

    @media screen and (min-width: 768px) and (max-width: 1024px) {
    .tab-w-80 {
        width: 80%;
    }
    }

    @media screen and (min-width: 768px) and (max-width: 1024px) {
    .tab-w-full {
        width: 100%;
    }
    }



    /*==========================================================================
    
    # margin
    
    ========================================================================== */
    .mt-20px {
        margin-top: 20px;
    }

    .mt-50px {
        margin-top: 50px;
    }

    @media screen and (max-width: 767px) {
    .sm-mt-34px {
        margin-top: 34px;
    }
}

@media screen and (max-width: 767px) {
    .sm-mt-0 {
        margin-top: 0 !important;
    }
}

    /* bottom */

    .mx-auto {
        margin: 0 auto;
    }

    .mb-10px {
        margin-bottom: 10px;
    }

    .mb-16px {
        margin-bottom: 16px;
    }

    .mb-20px {
        margin-bottom: 20px;
    }

    .mb-24px {
        margin-bottom: 24px;
    }

    .mb-32px {
        margin-bottom: 32px;
    }
    
    .mb-38px {
        margin-bottom: 38px;
    }

    .mb-40px {
        margin-bottom: 40px;
    }
        
    .mb-56px {
        margin-bottom: 56px;
    }

    .mb-64px {
        margin-bottom: 64px;
    }

    .mb-70px {
        margin-bottom: 70px;
    }
    
    .mb-150px {
        margin-bottom: 150px;
    }

    .mb-160px {
        margin-bottom: 160px;
    }

    .mb-260px {
        margin-bottom: 260px;
    }

    .mb-270px {
        margin-bottom: 270px;
    }


    @media screen and (max-width: 767px) {
        .sm-mb-6px {
            margin-bottom: 6px;
        }
    }

    @media screen and (max-width: 767px) {
        .sm-mb-10px {
            margin-bottom: 10px;
        }
    }

    @media screen and (max-width: 767px) {
        .sm-mb-20px {
            margin-bottom: 20px;
        }
    }

    @media screen and (max-width: 767px) {
        .sm-mb-24px {
            margin-bottom: 24px;
        }
    }


    @media screen and (max-width: 767px) {
        .sm-mb-32px {
            margin-bottom: 32px;
        }
    }


    @media screen and (max-width: 767px) {
        .sm-mb-40px {
            margin-bottom: 40px;
        }
    }

    @media screen and (max-width: 767px) {
        .sm-mb-48px {
            margin-bottom: 48px;
        }
    }

        @media screen and (max-width: 767px) {
        .sm-mb-50px {
            margin-bottom: 50px;
        }
    }


    @media screen and (max-width: 767px) {
        .sm-mb-60px {
            margin-bottom: 60px;
        }
    }

    @media screen and (max-width: 767px) {
        .sm-mb-77px {
            margin-bottom: 77px;
        }
    }


    @media screen and (max-width: 767px) {
        .sm-mb-105px {
            margin-bottom: 105px;
        }
    }

    @media screen and (max-width: 767px) {
        .sm-mb-125px {
            margin-bottom: 125px;
        }
    }


    @media screen and (max-width: 767px) {
        .sm-mb-145px {
            margin-bottom: 145px;
        }
    }


    @media screen and (min-width: 768px) and (max-width: 1024px) {
    .tab-mb-160px {
        margin-bottom: 160px;
    }
    }

    /* left */
    .ml-45px {
        margin-left: 45px;
    }


    .ml-60px {
        margin-left: 60px;
    }

    .ml-76px {
        margin-left: 76px;
    }

    @media screen and (max-width: 767px) {
    .sm-ml-0 {
        margin-left: 0;
    }
    }

    @media screen and (min-width: 768px) and (max-width: 1024px) {
    .tab-ml-0 {
        margin-left: 0;
    }
    }

        /* right */

    .mr-48px {
        margin-right: 48px;
    }

    .mr-55px {
        margin-right: 55px;
    }

    .mr-65px {
        margin-right: 65px;
    }

    @media screen and (max-width: 767px) {
        .sm-mr-0 {
            margin-right: 0;
        }
    }

    @media screen and (min-width: 768px) and (max-width: 1024px) {
    .tab-mr-20px {
        margin-right: 20px;
    }
    }

    .mx-20px-auto {
        margin: 20px auto 0;
    }

    /*==========================================================================
    
    # padding
    
    ========================================================================== */
    .px-70px {
        padding: 0 70px;
    }

    @media screen and (max-width: 767px) {
    .sm-px-0 {
        padding: 0;
    }
    }

    @media screen and (max-width: 767px) {
    .sm-px-30px {
        padding: 0 30px;
    }
    }

    .py-30px {
        padding: 30px 0;
    }

    .pr-100px {
        padding-right: 100px;
    }

    @media screen and (max-width: 767px) {
        .sm-pr-0 {
            padding-right: 0;
        }
    }

    @media screen and (max-width: 767px) {
        .sm-pl-30px {
            padding-left: 30px;
        }
    }

    @media screen and (max-width: 767px) {
        .sm-pr-30px {
            padding-right: 30px;
        }
    }


    @media screen and (max-width: 767px) {
        .sm-px-30px {
            padding: 0 30px;
        }
    }

    @media screen and (min-width: 768px) and (max-width: 1024px) {
        .tab-pr-0 {
            padding-right: 0;
        }
    }



    /*==========================================================================
    
    # height
    
    ========================================================================== */
    .h-100px {
        height: 100px;
    }

    /*==========================================================================
    
    # font
    
    ========================================================================== */
    .font-helvetica {
        font-family: "Helvetica Neue","Roboto","Arial","sans-serif";
    }
    
    .font-raleway {
        font-family: "Raleway","Helvetica Neue","Roboto","Arial","sans-serif";
    }
    
    
    .text-xs {
        font-size: 12px;
    }

    .text-sm {
        font-size: 14px;
    }
    

    .text-base {
        font-size: 16px;
    }

    .text-2xl {
        font-size: 22px;
    }

    .text-4xl {
        font-size: 40px;
    }

    .text-15px {
        font-size: 15px;
    }

    .text-44px {
        font-size: 44px;
    }

    @media screen and (max-width: 767px) {
    .sm-text-3xs {
        font-size: 10px;
    }
    }

    @media screen and (max-width: 767px) {
    .sm-text-11px {
        font-size: 11px;
    }
    }

    @media screen and (max-width: 767px) {
    .sm-text-13px {
        font-size: 13px;
    }
    }

    @media screen and (max-width: 767px) {
    .sm-text-sm {
        font-size: 14px;
    }
    }


    @media screen and (max-width: 767px) {
    .sm-text-28px {
        font-size: 28px;
    }
    }

    @media screen and (max-width: 767px) {
    .sm-text-35px {
        font-size: 35px;
    }
    }
    
    .font-light {
        font-weight: 300;
    }

    .font-semibold {
        font-weight: 600;
    }


    /*==========================================================================
    
    # text
    
    ========================================================================== */    
    .text-center {
        text-align: center;
    }

    .text-right {
        text-align: right;
    }

    @media screen and (max-width: 767px) {
        .sm-text-left {
            text-align: left !important;
        }
    }


    @media screen and (max-width: 767px) {
        .sm-text-right {
            text-align: right;
        }
    }

    .text-justify {
        text-align: justify;
    }
    
    .text-white {
        color: #fff !important;
    }

    /*==========================================================================
    
    # flex
    
    ========================================================================== */
    .flex {
        display: flex;
    }

    .flex-wrap {
        flex-wrap: wrap;
    }

    .flex-row {
        flex-direction: row;
    }

    .flex-row-reverse {
        flex-direction: row-reverse;
    }

    @media screen and (max-width: 767px) {
    .sm-flex-col-reverse {
        flex-direction: column-reverse;
    }
}

    .justify-between {
        justify-content: space-between;
    }

    .justify-center {
        justify-content: center;
    }

    .justify-end {
        justify-content: end;
    }    
        

    /*==========================================================================
    
    # other
    
    ========================================================================== */
    .block {
        display: block;
    }

    @media screen and (max-width: 767px) {
    .sm-block {
        display: block;
    }
}

    .border {
            border: 1px solid #000;
        }

    .leading-1_75 {
        line-height: 1.75;
    }   
    

    .leading-50px {
        line-height: 50px;
    }   
    
    .leading-100px {
        line-height: 100px;
    }

    .pointer-events-none {
        pointer-events: none;
    }

    .bg-img img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
        
    .items-center {
        align-items: center;
    }

    @media screen and (min-width: 768px) and (max-width: 1024px) {
        .md-items-start {
            align-items: start;
        }
    }

    .bg-black {
        background: #000;
    }

    .bg-gray {
        background: #CECECE;
    }

        
    .border-bottom {
        display: block;
        width: 180px;
        height: 1px;
        background-color: #000;
        margin: 15px auto 30px;
    }
    
    
    @media screen and (max-width: 767px) {
    .sm-border-bottom {
        display: block;
        width: 120px;
        height: 1px;
        background-color: #000;
        margin: 15px auto 30px;
    }
    }
    
    .border-bottom-title {
        display: block;
        width: 50px;
        height: 1px;
        background-color: #000;
        margin: 45px auto 0;
    }


    .scroll-fade {
        opacity: 0;
    }


    /*==========================================================================
    
    #  img
    
    ========================================================================== */
    /* SP、TABのみ画像表示(bg) */

    @media screen and (min-width: 300px) and (max-width: 1023px) {
    .sp-tab-img {
        display: block;
    }

    .pc-img {
        display: none;
    }
}

    /* PCのみ画像表示 (bg)*/
    @media screen and (min-width: 1024px) {
    .pc-img {
        display: block;
    }

    .sp-tab-img {
        display: none;
    }
    }

    /* SPのみ画像表示(top) */
    @media screen and (max-width: 767px) {
    .sp-top-img {
        display: block;
    }

    .pc-top-img {
        display: none;
    }
}

    /* PCのみ画像表示 (top)*/
    @media screen and (min-width: 768px) {
    .pc-top-img {
        display: block;
    }

    .sp-top-img {
        display: none;
    }
}

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

    .sp-img {
        display: block;
    }
}

@media screen and (min-width: 768px) {
    .pc-img-tab {
        display: block;
    }

    .sp-img {
        display: none;
    }
}




    /*==========================================================================
    
    #  改行
    
    ========================================================================== */

       /*  PC、TABのみ改行 */
    @media screen and (min-width: 768px) {
    .br-pc {
        display: block;
    }
    .br-sp {
        display: none;
    }
    }
    
    /*  SPのみ改行 */
    @media screen and (max-width: 767px) {
    .br-sp {
        display: block;
    }
    .br-pc {
        display: none;
    }
    }

    @media screen and (max-width: 767px) {
        .display-sp {
            display: block;
        } 

        .display-pc {
            display: none;
        }
    }


    @media screen and (min-width: 768px) {
        .display-sp {
            display: none;
        } 

        .display-pc {
            display: flex;
        }
    }



    /*==========================================================================
    
    #  letter-spacing
    
    ========================================================================== */

    .tracking-0_78 {
        letter-spacing: 0.78px;
    }

    .tracking-1_2 {
        letter-spacing: 1.2px;
    }

    .tracking-1_4 {
        letter-spacing: 1.4px;
    }

    .tracking-3_2 {
        letter-spacing: 3.2px;
    }

    .tracking-4 {
        letter-spacing: 4px;
    }

    .tracking-15 {
        letter-spacing: 15px;
    }

    @media screen and (max-width: 767px) {
        .sm-tracking-0_9 {
        letter-spacing: 0.9px;
    }
}

@media screen and (max-width: 767px) {
        .sm-tracking-0_96 {
        letter-spacing: 0.96px;
    }
}

@media screen and (max-width: 767px) {
        .sm-tracking-1_2 {
        letter-spacing: 1.2px;
    }
}

@media screen and (max-width: 767px) {
        .sm-tracking-2_8{
        letter-spacing: 2.8px;
    }
}

    @media screen and (max-width: 767px) {
        .sm-tracking-3 {
        letter-spacing: 3px;
    }
}

    @media screen and (max-width: 767px) {
        .sm-tracking-9_5 {
        letter-spacing: 9.5px;
    }
}    
</style>