*, *::before, *::after {
    box-sizing: border-box;
}

/*html {*/
    /*min-height: 100%;*/
/*}*/

/*body {*/
    /*color: #435757;*/
    /*background: radial-gradient(#fff, #dac4cd);*/
    /*font: 1.4em/1 'Noto Sans', sans-serif;*/
/*}*/

/*.check {*/
    /*position: absolute;*/
    /*top: 50%;*/
    /*left: 50%;*/
    /*transform: translate(-50%, -50%);*/
/*}*/

div.tag{
    margin: 20px 5px;
}


/*******************  checkbox **********************/
input.check {
    position: absolute;
    left: -9999px;
}

label.check {
    /*display: block;*/
    position: relative;
    margin: 2px;
    padding: 8px 25px 10px 45px;
    border: 3px solid #fff;
    border-radius: 100px;
    color: #fff;
    background-color: #6a8494;
    box-shadow: 0 0 20px rgba(0, 0, 0, .2);
    white-space: nowrap;
    cursor: pointer;
    user-select: none;
    transition: background-color .2s, box-shadow .2s;
    /*font-size: 15px;*/
    /*line-height: 17px;*/
}

label.check::before {
    content: '';
    display: block;
    position: absolute;
    top: 10px;
    bottom: 10px;
    left: 10px;
    width: 21px;
    border: 3px solid #fff;
    border-radius: 100px;
    transition: background-color .2s;
    /*font-size: 17px;*/
    /*line-height: 17px;*/
}

/*label:first-of-type {*/
    /*transform: translateX(-40px);*/
/*}*/

/*label:last-of-type {*/
    /*transform: translateX(40px);*/
/*}*/

label.check:hover, input.check:focus + label {
    box-shadow: 0 0 20px rgba(0, 0, 0, .6);
}

/*input.check:checked + label {*/
    /*background-color: #2286fc;*/
/*}*/

input.tagWhite:checked + label {
    background-color: #b4dd85;
}
input.tagRed:checked + label {
    background-color: #e1898a;
}
input.tagBlue:checked + label {
    background-color: #5dbafb;
}

input.check:checked + label::before {
    background-color: #fff;
}



/*******************  radio **********************/


.status input[type=radio]:checked ~ label{
    color: #2a33bd;
}


/*ここからタブレット,スマホの環境の設定
@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@
---------------------------------------------------------------------------*/
/*表示を切り替えるウィンドウサイズの指定*/
@media (max-width: 767px) {
    label.check {
        /* display: block; */
        position: relative;
        margin: 2px;
        padding: 10px 20px 10px 35px;
        border: 3px solid #fff;
        border-radius: 100px;
        color: #fff;
        background-color: #6a8494;
        box-shadow: 0 0 20px rgb(0 0 0 / 20%);
        white-space: nowrap;
        cursor: pointer;
        user-select: none;
        transition: background-color .2s, box-shadow .2s;
    }
    label.check::before {
        content: '';
        display: block;
        position: absolute;
        top: 10px;
        bottom: 10px;
        left: 10px;
        width: 19px;
        border: 3px solid #fff;
        border-radius: 100px;
        transition: background-color .2s;
    }
}



/*ここからスマートフォン用（480px以下）環境の設定
@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@
---------------------------------------------------------------------------*/
/*表示を切り替えるウィンドウサイズの指定*/
/*@media (max-width : 480px){*/
    /*label.check {*/
        /*display: block;*/
        /*position: relative;*/
        /*margin: 2px;*/
        /*padding: 10px 12px 10px 34px;*/
        /*border: 3px solid #fff;*/
        /*border-radius: 100px;*/
        /*color: #fff;*/
        /*background-color: #6a8494;*/
        /*box-shadow: 0 0 20px rgba(0, 0, 0, .2);*/
        /*white-space: nowrap;*/
        /*cursor: pointer;*/
        /*user-select: none;*/
        /*transition: background-color .2s, box-shadow .2s;*/
        /*font-size: 13px;*/
        /*line-height: 16px;*/
        /*font-weight: normal;*/
    /*}*/

    /*label.check::before {*/
        /*font-size: 13px;*/
        /*line-height: 16px;*/
        /*content: '';*/
        /*display: block;*/
        /*position: absolute;*/
        /*top: 10px;*/
        /*bottom: 10px;*/
        /*left: 10px;*/
        /*width: 17px;*/
        /*border: 3px solid #fff;*/
        /*border-radius: 100px;*/
        /*transition: background-color .2s;*/
    /*}*/

/*}*/