﻿@charset "UTF-8";

html {
    font-size: 62.5%;
}

body {
    font-size: 1.4rem;
}


/* 変数定義 */

:root {
    --col-space: 10px;
    --base-margin: 10px;
    --color-main: #C3D100;
    --color-line: #00B900;
    --color-black: #1B1B1B;
    --ff-0000: #ff0000;
    --color-grey1: #777777;
    --color-grey2: #a7a7a7;
    --color-lightGreen1: #d0f6b4;
    /* --74-b-88-d: #66ae80; */
    /* --0-f-6-f-40: #435243; */
    --color-lightGreen2: #C3D100;
    --color-grey3: #f5f5f5;
    --color-grey4: #d4d4d4;
    --color-darkYellow: #b2aa74;
}

.contentWrap {
    /*max-width: 1240px;*/
    /* padding: 0 20px; */
    margin-left: auto;
    margin-right: auto;
    width: 100%;
}

.contentWrap2 {
    max-width: 1240px;
    padding: 0 20px;
    margin-left: auto;
    margin-right: auto;
}

.col2Wrap,
.col3Wrap,
.col4Wrap,
.col5Wrap,
.colFreeWrap {
    display: flex;
    justify-content: space-evenly;
    align-items: flex-start;
    /* margin: 0 calc(var(--col-space) * -1); */
    flex-wrap: wrap;
}

.colFreeWrap {
    flex-wrap: nowrap;
}

.col2Wrap .col,
.col3Wrap .col,
.col4Wrap .col,
.col5Wrap .col,
.colFreeWrap .col {
    margin: 0 var(--col-space);
}

.col2Wrap .col {
    flex-basis: calc(50% - (var(--col-space) * 2));
}

.col3Wrap .col {
    flex-basis: calc(33.33% - (var(--col-space) * 2));
}

.col4Wrap .col {
    flex-basis: calc(25% - (var(--col-space) * 2));
}

.col5Wrap .col {
    flex-basis: calc(20% - (var(--col-space) * 2));
}

.colFreeWrap .col {
    flex-grow: 1;
}

.colFreeWrap .col.s75 {
    flex-basis: 75%;
}

.colFreeWrap .col.s70 {
    flex-basis: 70%;
}

.colFreeWrap .col.s50 {
    flex-basis: 50%;
}

.colFreeWrap .col.s30 {
    flex-basis: 30%;
}

.colFreeWrap .col.s25 {
    flex-basis: 25%;
}

.col2Wrap.al-center,
.col3Wrap.al-center,
.col4Wrap.al-center,
.col5Wrap.al-center,
.colFreeWrap.al-center {
    align-items: center;
}

.col2Wrap.al-stretch,
.col3Wrap.al-stretch,
.col4Wrap.al-stretch,
.col5Wrap.al-stretch,
.colFreeWrap.al-stretch {
    align-items: stretch;
}

sup {
    font-size: 70%;
    vertical-align: top;
    position: relative;
    top: -0.1em;
}

.bgG {
    background-color: #F9F9F9;
}

.radius {
    background-color: #f6f7eb;
    border-radius: 10px;
}

.radius h2 {
    padding: 40px 20px 0;
}

.fon16 {
    font-size: 16px;

}

.fon18 {
    font-size: 18px;

}

.fon20 {
    font-size: 20px;

}

.fon24 {
    font-size: 24px;
}

.ls28 {
    letter-spacing: 0.1em;
}

.lh60 {
    line-height: 60px;
}

.p20 {
    padding: 20px;
}

.p30 {
    padding: 30px;
}

.p40 {
    padding: 40px;
}

.pd20 {
    padding: 20px 0;
}

.pd40 {
    padding: 40px 0;
}

.pb20 {
    padding-bottom: 20px;
}

.pb30 {
    padding-bottom: 30px;
}

.pb40 {
    padding-bottom: 40px;
}

.pb50 {
    padding-bottom: 50px;
}

.pb60 {
    padding-bottom: 60px;
}

.mlr30 {
    margin: 0px 30px;
}

.ml20 {
    /*
    margin-left: 20px;
    */
}

.ml30 {
    margin-left: 30px;
}

.ml40 {
    margin-left: 40px;
}

.ml50 {
    margin-left: 50px;
}

.ml60 {
    margin-left: 60px;
}

.ml80 {
    margin-left: 80px;
}



.mt10 {
    margin-top: 10px;

}

.mt20 {
    margin-top: 20px;

}

.mt30 {
    margin-top: 30px;

}

.mt40 {
    margin-top: 40px;

}

.mt50 {
    margin-top: 0px;
}

.mt100 {
    margin-top: 100px;

}

.mt200 {
    margin-top: 200px;

}

.mb10 {
    margin-bottom: calc(var(--base-margin) * 1);
}

.mb20 {
    margin-bottom: calc(var(--base-margin) * 2);
}

.mb30 {
    margin-bottom: calc(var(--base-margin) * 3);
}

.mb40 {
    margin-bottom: calc(var(--base-margin) * 4);
}

.mb50 {
    margin-bottom: calc(var(--base-margin) * 5);
}

.mb60 {
    margin-bottom: calc(var(--base-margin) * 6);
}

.mb70 {
    margin-bottom: calc(var(--base-margin) * 7);
}

.mb80 {
    margin-bottom: calc(var(--base-margin) * 8);
}

.mb90 {
    margin-bottom: calc(var(--base-margin) * 9);
}

.mb100 {
    margin-bottom: calc(var(--base-margin) * 10);
}

.mb110 {
    margin-bottom: calc(var(--base-margin) * 11);
}

.mb120 {
    margin-bottom: calc(var(--base-margin) * 12);
}

.mb130 {
    margin-bottom: calc(var(--base-margin) * 13);
}

.mb140 {
    margin-bottom: calc(var(--base-margin) * 14);
}

.mb150 {
    margin-bottom: calc(var(--base-margin) * 15);
}


.labG {
    background-color: #0EAB95;
    width: 140px;
    padding: 9px 10px;
    text-align: center;
    color: #fff;
    font-weight: bold;
}

i.fas {
    padding-right: 10px;
}

@media screen and (max-width: 768px) {

    .col2Wrap .col,
    .col3Wrap .col,
    .col4Wrap .col,
    .col5Wrap .col,
    .colFreeWrap .col {
        flex-basis: 100%;
    }

    .spFlexWrap {
        flex-wrap: wrap;
    }

    .colFreeWrap .col.s30 {
        flex-basis: 100%;
    }

    .colFreeWrap {
        /*display: flex;
	    justify-content: flex-start;
	    align-items: flex-start;*/
        margin: 0 calc(var(--col-space) * -1);
        flex-wrap: wrap;
    }

.mt50 {
    margin-top: 50px;
}

}