@charset "utf-8";

.container {
    max-width: 1280px;
}

.nowrap {
    white-space: nowrap;
}

a {
    transition: 0.3s;
}

a:hover {
    opacity: 0.8;
}

.section {
    padding: 120px 0;
}

.underline {
    text-decoration: underline;
}

.d-inline {
    display: inline;
}

@media (min-width: 751px) {
    .d-md-inline {
        display: inline;
    }

    html {
        height: -webkit-fill-available;
        scroll-behavior: smooth;
    }
}

/* --------------------
カラー設定
--------------------*/
.color_red {
    color: red;
}

.color_white {
    color: white;
}

.color_gray {
    color: #4C4C4C;
}

.color_orange {
    color: #F57F31;
}

.color_yellow {
    color: #FFE500;
}

.color_black {
    color: #000;
}

.color_purple {
    color: #9181DF;
}

.bg_color__yellow {
    background-color: #FFF8EB;
}

.bg_color__gray {
    background-color: #F5F5F5;
}

.bg_color__orange {
    background-color: #F57F31;
}

.bg_color__white {
    background-color: #fff;
}

.bg_color__black {
    background-color: #000;
}

/* --------------------
文字サイズ設定
--------------------*/
body {
    font-size: 1.6rem;
}

.size_14 {
    font-size: 1.4rem;
}

.size_15 {
    font-size: 1.5rem;
}

.size_18 {
    font-size: 1.8rem;
}

.size_20 {
    font-size: 2rem;
}

.size_22 {
    font-size: 2.2rem;
}

.size_24 {
    font-size: 2.4rem;
}

.size_32 {
    font-size: 3.2rem;
}

.size_35 {
    font-size: 3.5rem;
}

.size_38 {
    font-size: 3.8rem;
}

.size_40 {
    font-size: 4.0rem;
}

.size_42 {
    font-size: 4.2rem;
}

.size_48 {
    font-size: 4.8rem;
}

.size_50 {
    font-size: 5rem;
}

.size_52 {
    font-size: 5.2rem;
}

@media (max-width: 1000px) {
    .size_14 {
        font-size: 1.3rem;
    }

    .size_18 {
        font-size: 1.6rem;
    }

    .size_20 {
        font-size: 1.8rem;
    }

    .size_22 {
        font-size: 2rem;
    }

    .size_24 {
        font-size: 2rem;
    }

    .size_32 {
        font-size: 2.4rem;
    }

    .size_35 {
        font-size: 2.8rem;
    }

    .size_38 {
        font-size: 3rem;
    }

    .size_40 {
        font-size: 3rem;
    }

    .size_42 {
        font-size: 3.2rem;
    }

    .size_48 {
        font-size: 3.4rem;
    }

    .size_50 {
        font-size: 3.6rem;
    }

    .size_52 {
        font-size: 4.6rem;
    }
}

@media (max-width: 750px) {
    body {
        font-size: 3.73333vw;
    }

    .size_14 {
        font-size: 2.933333vw;
    }

    /* 11px */
    .size_15 {
        font-size: 3.466666vw;
    }

    /* 1px */
    .size_18 {
        font-size: 4vw;
    }

    /* 15px */
    .size_20 {
        font-size: 4.26666vw;
    }

    /* 16px */
    .size_22 {
        font-size: 4.8vw;
    }

    .size_24 {
        font-size: 4.8vw;
    }

    .size_32 {
        font-size: 5vw;
    }

    .size_35 {
        font-size: 5.86666vw;
    }

    .size_38 {
        font-size: 5.86666vw;
    }

    .size_40 {
        font-size: 6.4vw;
    }

    /* 24px */
    .size_42 {
        font-size: 6.93333vw;
    }

    .size_48 {
        font-size: 6.9333vw;
    }

    .size_50 {
        font-size: 6.9333vw;
    }

    .size_52 {
        font-size: 8.5333vw;
    }
}

.size_big {
    font-size: 1.3333em;
}

/* --------------------
文字の下余白設定
--------------------*/
.mb_0_25em {
    margin-bottom: 0.25em;
}

.mb_0_5em {
    margin-bottom: 0.5em;
}

.mb_0_75em {
    margin-bottom: 0.75em;
}

.mb_1em {
    margin-bottom: 1em;
}

.mb_1_5em {
    margin-bottom: 1.5em;
}

.mb_2em {
    margin-bottom: 2em;
}

.mb_3em {
    margin-bottom: 3em;
}

.mb_3_5em {
    margin-bottom: 3.5em;
}

.mb_4em {
    margin-bottom: 4em;
}

.mb_5em {
    margin-bottom: 5em;
}

.mr_1em {
    margin-right: 1em;
}

/* --------------------
マーカー
--------------------*/
.marker_orange {
    position: relative;
    background: linear-gradient(transparent 78%, #F57F31 0%);
    line-height: 1.25;
    display: inline-block;
}

.marker_yellow {
    position: relative;
    background: linear-gradient(transparent 70%, #FFFA00 0%);
    line-height: 1.3;
    display: inline-block;
}

.wave {
    background: url(../img/wave.png) center bottom repeat-x;
    background-size: 25%;
}

/* --------------------
ボーダー
--------------------*/
.border_w__3 {
    border: 3px solid #000;
}

.border_w__5 {
    border: 5px solid #000;
}


/* --------------------
ボックスシャドウ
--------------------*/
.box_shadow__yellow {
    box-shadow: 8px 10px 0 #FFDFA4;
}

.box_shadow__purple {
    box-shadow: 8px 10px 0 #DBD5F6;
}

.box_shadow__black {
    box-shadow: 0.125vw 0.15vw 0 rgba(67, 67, 67, 1);
}

/* --------------------
flex
--------------------*/
@media (max-width: 750px) {
    .flex {
        flex-direction: column !important;
    }

    .flex .item {
        width: 100% !important;
    }
}