@charset "utf-8";

@media screen and (max-width: 750px) {
    :root{
        --bg-max-width: 750;
        --bg-max-width-px: 750px;

        --to-px: 120;
        --ajust-px: calc((var(--to-px)/var(--bg-max-width-px)) * minmax(100vw, var(--bg-max-width-px)));

        --bg-color-stlipe-brown: linear-gradient(
            45deg,
            #a6a58c 25%,
            #aba992 25%,
            #aba992 50%,
            #a6a58c 50%,
            #a6a58c 75%,
            #aba992 75%,
            #aba992
        );
    }
    .pc-only{   display: none !important;  }
    .sp-only{   display: block !important; }
}
@media screen and (min-width: 751px) {
    :root{
        --bg-max-width: 1080;
        --bg-max-width-px: 1080px;

        --to-px: 120;
        --ajust-px: calc((var(--to-px)/var(--bg-max-width-px)) * minmax(100vw, var(--bg-max-width-px)));

        --bg-color-stlipe-brown: linear-gradient(
            45deg,
            #a6a58c 25%,
            #aba992 25%,
            #aba992 50%,
            #a6a58c 50%,
            #a6a58c 75%,
            #aba992 75%,
            #aba992
        );
    }
    .pc-only{   display: block !important;  }
    .sp-only{   display: none !important; }
}
body{

    --color-brown: #9a671e;
    --color-darkbrown: #653a00;
    --color-white: white;
    --color-green: #48b6b8;
    --color-impact: #e25d27;
    --color-gray: #666666;
    --color-pink: #f58a90;

    --to-px: 120;
    --ajust-px: calc((var(--to-px)/var(--bg-max-width-px)) * minmax(100vw, var(--bg-max-width-px)));

    --height-px: 100px;
    --height: calc((var(--height-px)/var(--bg-max-width-px)) * minmax(100vw, var(--bg-max-width-px)));
}
.underline {
    padding: 0 2px;
    text-decoration:underline wavy var(--color-pink);
}





/* =========== 効果 =========== */
    .scrollanimeTop {
        opacity: 0;
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    }

    .fade {
        -webkit-animation-name: fadeInDown;
        animation-name: fadeInDown;
        -webkit-animation-duration: 3s;
        animation-duration: 3s;
        -webkit-animation-fill-mode: forwards;
        animation-fill-mode:forwards;
    }
    .downup {
        -webkit-transform: translateY(100px);
        -ms-transform: translateY(100px);
        transform:translateY(100px)
    }
    .scrollanime {
        opacity: 0;
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    }

    .fadeInDown {
        -webkit-animation-name: fadeInDown;
        animation-name: fadeInDown;
        -webkit-animation-duration: 3s;
        animation-duration: 3s;
        -webkit-animation-fill-mode: forwards;
        animation-fill-mode:forwards;
    }

    @-webkit-keyframes fadeInDown {
        0% {
            opacity: 0;
            -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
        }

        100% {
            opacity: 1;
            -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
            -webkit-transform: translate(0);
            transform:translate(0);
        }
    }

    @keyframes fadeInDown {
        0% {
            opacity: 0;
            -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
        }

        100% {
            opacity: 1;
            -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
            -webkit-transform: translate(0);
            transform:translate(0);
        }
    }


/* =========== 背景 =========== */
.bg_white_trans{
    background-color: rgba(255,255,255,0.8);
}
.bg_black_trans{
    background-color: rgba(0,0,0,0.22);
}
.bg_green{
    background-color: var(--color-green);
}
.bg_yellow{
    background-color: var(--bg-color-yellow);
}
.bg_impact{
    background-color: var(--color-impact);
}
.bg_stlipe{
    background-image: var(--bg-color-stlipe-yellow);
    background-size: 10px 10px;
    display: inline-block; 
}
.bg_stlipe_gray{
    background-image: var(--bg-color-stlipe);
    background-size: 10px 10px;
    display: inline-block;    
}
.bg_stlipe_brown{
    background-image: var(--bg-color-stlipe-brown);
    background-size: 13px 13px;
    display: inline-block;     
}

/* =========== 表示非表示 ========== */
    .hide{
        display: none !important;
    }

/* =========== 位置調整 ========== */

    /* padding-left */
    .padding_left{
        padding-left: 5vw;
    }
    .padding_left_141{
        padding-left: 14.1vw;
    }
    .padding_left_77{
        padding-left: 7.7vw;
    }
    .padding_right_77{
        padding-right: 7.7vw;
    }

    /* margin-top */
    .margin_top_22{
        margin-top: 2.26vw !important;  /* 17px */
    }
    .margin_top_37{
        margin-top: 3.7vw;
    }
    .margin_top_56{
        margin-top: 5.6vw;
    }
    .margin_top_42{
        margin-top: 4.2vw;
    }
    .margin_top_46{
        margin-top: 4.6vw;
    }
    .margin_top_49{
        margin-top: 4.93vw !important;  /* 37px */
    }
    .margin_top_62{
        margin-top: 6.2vw;
    }
    .margin_top_100{
        margin-top: 10vw !important;    /* 75px */
    }
    .margin_top_130{
        margin-top: 13vw;
    }
    .margin_top_314{
        margin-top: 31.46vw !important; /* 236px */   
    }

    /* margin-bottom */
    .margin_bottom_9{
        margin-bottom: 0.9vw !important;
    }
    .margin_bottom_37{
        margin-bottom: 3.73vw;  /* 28px */
    }
    .margin_bottom_40{
        margin-bottom: 4vw !important;  /* 30px */
    }
    .margin_bottom_42{
        margin-bottom: 4.2vw !important;    
    }
    .margin_bottom_53{
        margin-bottom: 5.33vw !important;   /* 40px */
    }
    .margin_bottom_56{
        margin-bottom: 5.6vw !important;    /* 42px */
    }
    .margin_bottom_57{
        margin-bottom: 5.7vw;
    }
    .margin_bottom_58{
        margin-bottom: 5.86vw !important;    /* 44px */
    }
    .margin_bottom_69{
        margin-bottom: 6.93vw !important;   /* 52px */
    }
    .margin_bottom_76{
        margin-bottom: 7.6vw !important;   /* 57px */
    }
    .margin_bottom_80{
        margin-bottom: 8vw;
    }
    .margin_bottom_89{
        margin-bottom: 8.9vw !important;    /* 67px */
    }
    .margin_bottom_106{
        margin-bottom: 10.67vw !important;  /* 80px */
    }
    .margin_bottom_122{
        margin-bottom: 12.27vw !important;  /* 92px */
    }
    .margin_bottom_133{
        margin-bottom: 13.3vw !important;
    }
    .margin_bottom_197{
        margin-bottom: 19.73vw !important;   /* 148px */
    }
    .margin_bottom_221{
        margin-bottom: 22.13vw !important;   /* 166px */
    }


    .margin-top_120px{
        margin-top: calc((120/750) * 100vw) !important;
    }
    .margin-bottom_10px{
        --margin-bottom-px: 15;
        margin-bottom: calc((var(--margin-bottom-px)/var(--bg-max-width)) * min(100vw, var(--bg-max-width-px))) !important;
    }
    .margin-bottom_15px{
        --margin-bottom-px: 15;
        margin-bottom: calc((var(--margin-bottom-px)/var(--bg-max-width)) * min(100vw, var(--bg-max-width-px))) !important;
    }
    .margin-bottom_20px{
        --margin-bottom-px: 20;
        margin-bottom: calc((var(--margin-bottom-px)/var(--bg-max-width)) * min(100vw, var(--bg-max-width-px))) !important;
    }
    .margin-bottom_25px{
        --margin-bottom-px: 25;
        margin-bottom: calc((var(--margin-bottom-px)/var(--bg-max-width)) * min(100vw, var(--bg-max-width-px))) !important;
    }
    .margin-bottom_30px{
        --margin-bottom-px: 30;
        margin-bottom: calc((var(--margin-bottom-px)/var(--bg-max-width)) * min(100vw, var(--bg-max-width-px))) !important;
    }

    .margin-bottom_40px{
        --margin-bottom-px: 40;
        margin-bottom: calc((var(--margin-bottom-px)/var(--bg-max-width)) * min(100vw, var(--bg-max-width-px))) !important;
    }
    .margin-bottom_45px{
        --margin-bottom-px: 45;
        margin-bottom: calc((var(--margin-bottom-px)/var(--bg-max-width)) * min(100vw, var(--bg-max-width-px))) !important;
    }
    .margin-bottom_55px{
        --margin-bottom-px: 55;
        margin-bottom: calc((var(--margin-bottom-px)/var(--bg-max-width)) * min(100vw, var(--bg-max-width-px))) !important;
    }
    .margin-bottom_80px{
        --margin-bottom-px: 80;
        margin-bottom: calc((var(--margin-bottom-px)/var(--bg-max-width)) * min(100vw, var(--bg-max-width-px))) !important;
    }
    .margin-bottom_120px{
        --margin-bottom-px: 120;
        margin-bottom: calc((var(--margin-bottom-px)/var(--bg-max-width)) * min(100vw, var(--bg-max-width-px))) !important;
    }
    .margin-bottom_165px{
        --margin-bottom-px: 165;
        margin-bottom: calc((var(--margin-bottom-px)/var(--bg-max-width)) * min(100vw, var(--bg-max-width-px))) !important;
    }
    .padding-bottom_100px{
        --padding-bottom-px: 100;
        padding-bottom: calc((var(--padding-bottom-px)/var(--bg-max-width)) * min(100vw, var(--bg-max-width-px))) !important;
    }
    .padding-bottom_240px{
        --padding-bottom-px: 240;
        padding-bottom: calc((var(--padding-bottom-px)/var(--bg-max-width)) * min(100vw, var(--bg-max-width-px))) !important;
    }
    .padding-bottom_30px{
        --padding-bottom-px: 30;
        padding-bottom: calc((var(--padding-bottom-px)/var(--bg-max-width)) * min(100vw, var(--bg-max-width-px))) !important;
    }
    .padding-top_30px{
        --padding-top-px: 30;
        padding-top: calc((var(--padding-top-px)/var(--bg-max-width)) * min(100vw, var(--bg-max-width-px))) !important;
    }
    .margin-top_30px{
        --margin-top-px: 30;
        margin-top: calc((var(--margin-top-px)/var(--bg-max-width)) * min(100vw, var(--bg-max-width-px))) !important;
    }
    .padding-top_120px{
        --padding-bottom-px: 120;
        padding-bottom: calc((var(--padding-bottom-px)/var(--bg-max-width)) * min(100vw, var(--bg-max-width-px))) !important;
    }