@charset "utf-8";

/* commons */

.linethrough {
    text-decoration: line-through;
}

.coution {
    color: #ba0003;
}

.rank {
    color: #e98400;
}

.map-mark {
    color: #ba0003;
}

.gray-out {
    color: #858585;
}

.blue-fix {
    color: #3984b3;
}

.weight-bold {
    font-weight: bold;
}

.error-mess {
    display: block;
    padding: 10px;
/*    background: #6f0318; */
    background: #B00318;
    color: #fff;
    font-size: 1.3rem;
    font-weight: bold;
    position: absolute;
    left: 0;
    bottom: 115%;
}
.error-mess2 {
    display: block;
    padding: 10px;
    background: #6f0318;
    color: #fff;
    font-size: 1.3rem;
    font-weight: bold;
    position: absolute;
    right: 10px;
    top: 50px;
/*    bottom: 115%; */
}

/* clear fix */
.cfx:before, .cfx:after { content:""; display:table; }
.cfx:after { clear:both; }
.cfx { *zoom: 1; }

.attention{
    display: inline-block;
    color: #f00;
    font-size: 1.1rem;
    margin-top: 1rem;
    background:#f9dad8;
    padding: 3px;
}
.completed{
    display: inline-block;
    color: #009900;
    font-size: 1.1rem;
    margin-top: 1rem;
    background:#CCFFCC;
    padding: 3px;
}

.disabled {
  color: #ccc;
}

input[type="text"][disabled] {
  background: #eee;
  cursor:not-allowed; /* 禁止カーソル */
}

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

.al-l{
    text-align: left;
}

.al-c{
    text-align: center;
}
.fl-l{
    float: left;
}
.fl-r{
    float: right;
}
.mg-t10{
	margin-top: 10px;
}
.mg-t15{
	margin-top: 15px;
}
.mg-t20{
	margin-top: 20px;
}
.mg-t25{
	margin-top: 25px;
}
.mg-l10{
	margin-left: 10px;
}
.mg-l15{
	margin-left: 15px;
}
.mg-l20{
	margin-left: 20px;
}
.mg-r10{
	margin-right: 10px;
}
.mg-r15{
	margin-right: 15px;
}
.mg-r20{
	margin-right: 20px;
}
.mg-b10{
	margin-bottom: 10px;
}
.mg-b15{
	margin-bottom: 15px;
}
.mg-b20{
	margin-bottom: 20px;
}

/* ------------------------------------------------------------- start PC */
/* max 1160px */

@media (min-width: 769px) {

/* tablewrap */

    .tablewrap {
        display: table;
        width: 100%;
    }

    .inside.tablewrap {
		max-width: 1160px;
        margin: 0 auto;
    }

    .tablewrap.fixed {
        table-layout: fixed;
    }

    .tablewrap > * {
        display: table-cell;
        vertical-align: middle;
    }

/* button */

    .btn {
        display: inline-block;
        color: #fff;
        text-align: center;
        padding: 0.6em 1.25em 0.4em;
        border: none;
        -webkit-border-radius: 4px;
        border-radius: 4px;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
    }

    .btn-red {
        background: #840222;
        -webkit-box-shadow: 0 3px 0 #500002;
        -moz-box-shadow: 0 3px 0 #500002;
        box-shadow: 0 3px 0 #500002;
    }


    .btn-blue {
        background: #3984b3;
        border: 1px #3984b3 solid;
        -webkit-box-shadow: 0 3px 0 #1766a2;
        -moz-box-shadow: 0 3px 0 #1766a2;
        box-shadow: 0 3px 0 #1766a2;
    }
    .yoyaku .btn-blue {
        margin-left: 25px;
    }
    .btn-wh {
        color: #2e2e2e;
        background: #fff;
        border: 1px #aaaaaa solid;
        padding: 0.5em 1.25em;
        -webkit-box-shadow: 0 3px 0 #eee;
        -moz-box-shadow: 0 3px 0 #eee;
        box-shadow: 0 3px 0 #eee;
    }

    .btn-gray {
        color: #fff;
        background: #878787;
        padding: 0.5em 1.25em;
        -webkit-box-shadow: 0 3px 0 #565656;
        -moz-box-shadow: 0 3px 0 #565656;
        box-shadow: 0 3px 0 #565656;
    }

/* flex-between */

    .flex-between-wrap {
        display: -webkit-box;
        display: -webkit-flex;
        display: -ms-flexbox;
        display: flex;
        -webkit-flex-wrap: wrap;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
        -webkit-box-pack: justify;
        -ms-flex-pack: justify;
        -webkit-justify-content: space-between;
        justify-content: space-between;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        width: 100%;
    }

    .flex-between-nowrap {
        display: -webkit-box;
        display: -webkit-flex;
        display: -ms-flexbox;
        display: flex;
        -webkit-flex-wrap: nowrap;
        -ms-flex-wrap: nowrap;
        flex-wrap: nowrap;
        -webkit-box-pack: justify;
        -ms-flex-pack: justify;
        -webkit-justify-content: space-between;
        justify-content: space-between;
        -webkit-box-align: center;
        -ms-flex-align: center;
        /*align-items: center;*/
        width: 100%;
    }

    .flex-between-wrap-reverse {
        display: -webkit-box;
        display: -webkit-flex;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: horizontal;
        -webkit-box-direction: reverse;
        -ms-flex-direction: row-reverse;
        flex-direction: row-reverse;
        -webkit-flex-wrap: wrap;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
        -webkit-box-pack: justify;
        -ms-flex-pack: justify;
        justify-content: space-between;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        width: 100%;
    }

/* float-wrap */

    .float-wrap {
        overflow: hidden;
    }

    .float-wrap > .float-right-wrap {
        float: right;
    }

    .float-wrap > .float-left-wrap {
        float: left;
    }
} /* end PC */


/* 選択制御 */
.noselect {
  -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
     -khtml-user-select: none; /* Konqueror HTML */
       -moz-user-select: none; /* Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none; /* Non-prefixed version, currently
                                  supported by Chrome and Opera */
}

/* ------------------------------------------------------------------------- start MOBILES */

@media (max-width: 768px) {


/* button */

    .btn {
        display: inline-block;
        color: #fff;
        text-align: center;
        padding: 0.6em 1.25em 0.4em;
        border: none;
        -webkit-border-radius: 6px;
        border-radius: 6px;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
    }

    .btn-red{
        background: #b0132d;
    }
    .btn-blue{
        background: #235699;
    }
    .btn-wh {
        background: #840222;
    }

    .btn-gray {
        color: #fff;
        background: #878787;
        padding: 0.5em 1.25em;
    }
} /* end MOBILES */