@charset "UTF-8";
/*======================
color
=====================*/
.blue {
    color: #0B68B2;
}
.yellow {
    color: #FCD535;
}
.red {
    color: #CB0918;
}
.white {
    color: #FFF;
}
.green{
    color: #03d715;
}
.bg_blue {
    background-color: #0B68B2;
}
.bg_yellow {
    background-color: #FCD535;
}
.bg_red {
    background-color: #CB0918;
}
.bg_gray {
    background-color: #F1F1F1;
}
.bg_gray_d {
    background-color: #939393;
}

.fs12{
    font-size: 12px !important;
}
/*======================
web font
=====================*/
/* ---------- google ---------- */
@import url('https://fonts.googleapis.com/css?family=PT+Sans+Narrow:400,700');
@import url('https://fonts.googleapis.com/css?family=Anton&display=swap');

.f-PT_sn {/*英字 長体細ゴシック*/
    font-family: 'PT Sans Narrow', sans-serif;
    letter-spacing: 1px;
}
.f-Anton {/*英字 impactの代用*/
    font-family: 'Anton', sans-serif;
}
/* ---------- typesquare ---------- */

.f-mb101 {
    font-family: 'ゴシックMB101 R', 'Gothic MB101 Regular', sans-serif;
}
.f-mb101 b {
    font-family: 'ゴシックMB101 B', 'Gothic MB101 Bold', sans-serif;
}
.f-mb101 em {
    font-family: 'ゴシックMB101 DB', 'Gothic MB101 DemiBold', sans-serif;
}
.f-A1 {
    font-family: 'A1ゴシック M', 'A1 Gothic M', sans-serif;
}
.f-A1 b {
    font-family: 'A1ゴシック B', 'A1 Gothic B', sans-serif;
}

/*======================
common
=====================*/
* {
    background-repeat: no-repeat;
    background-position: 0px 0px;
}
body {
    margin-right: auto;
    margin-left: auto;
    margin-top: 0px;
    margin-bottom: 0px;
    -webkit-text-size-adjust: 100%;/*sp用 */
}
body, div {
    margin: 0;
    padding: 0;
}
p, ul, ul li, ol, ol li, dl, dt, dd {
    margin: 0px;
    padding: 0px;
    list-style-type: none;
}
h1, h2, h3, h4, h5, h6, p, dl, dt, dd, ul, li, em, strong {
    font-weight: normal;
    margin: 0px;
    padding: 0px;
}
img {
    width: 100%;
}
img, a img {
    border-width: 0px;
    border-style: none;
}
a {
    cursor: pointer;
    cursor: hand
}
a:hover, a img:hover {
    opacity: .70; /* Standard: FF gt 1.5, Opera, Safari */
    filter: alpha(opacity=70); /* IE lt 8 */
    -ms-filter: "alpha(opacity=70)"; /* IE 8 */
    -khtml-opacity: .70; /* Safari 1.x */
    -moz-opacity: .70; /* FF lt 1.5, Netscape */
}
.clear {
    clear: both;
    font-size: 0px;
    line-height: 0px;
    margin: 0px;
    padding: 0px;
    height: 0px;
}
.clearfix {
    zoom: 1;
}
.clearfix:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}
form {
    margin: 0px;
    padding: 0px;
}
label {
    cursor: pointer;
}
.hd {
    display: none;
}

/*=======================
ドラッグ&ドロップ用
========================*/
.inputFile {
    position: relative;
    margin-top: 40px;
    padding: 40px 0 40px;
    width: 100%;
    text-align: center;
}
.inputFile:first-of-type {
    margin-top: 0;
}
.dropArea {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    padding: 10px 0 0;
    border: 2px dashed #0B68B2;
    background: rgb(255 221 59 / 40%);
    transition: all 0.25s cubic-bezier(0.21, 0.51, 0.51, 1);
    box-sizing: border-box;
    font-size: 14px;
    font-weight: bold;
    text-align: center;
}
.dropArea.dragover {
    border: 2px solid #0B68B2;
    background: rgb(241 205 31 / 64%);
}
.dropArea.error {
    background: rgb(255 59 59 / 40%);
}
.inputFileWrap {
    position: relative;
    display: inline-block;
}
.inputFile input[type="file"].file_btn {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 10;
    display: block;
    width: 160px;
    height: 32px;
    opacity:  0;
}
.inputFile input[type="file"].file_btn:hover {
    cursor: pointer;
}
.btnInputFile,
.btnChangeFile {
    display: inline-block;
    width: 160px;
    text-align: center;
}
.btnInputFile:hover {
    cursor: pointer;
    opacity: .7;
}
.btnChangeFile {
    display: none;
}
.btnInputFile span,
.btnChangeFile span {
    position: relative;
    z-index: 2;
    display: table-cell;
    width: 160px;
    height: 30px;
    border: 1px solid #18578a;
    border-radius: 4px;
    background: #0c68b2;
    text-decoration: none;
    color: #fff;
    font-size: 14px;
    line-height: 1;
    font-weight: bold;
    vertical-align: middle;
}
.btnChangeFile span {
    border: 1px solid #ca1111;
    background: #dc3636;
}
.inputFileWrap.selected .btnInputFile {
    display: none;
}
.inputFileWrap.selected .btnChangeFile {
    display: inline-block;
}
.fileName {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    font-size: 80%;
}
.required{
    color: red;
    margin-top: 5px;
    margin-bottom: 5px;
    font-size: 90%;
    font-weight: bold;
}
.upFileWrap .required.fileup {
    text-align: center;
    line-height: 1.4;
}
.upFileWrap .required.fileup strong {
    font-weight: bold;
    font-size: 120%;
    padding-bottom:2px;
    border-bottom: 1px solid;
}

.company-box{
    width: 50%;
}

.delBtn{
    padding: 5px 10px 7px 10px;
    background-color: #62615e;
    border-radius: 5px;
    color: white;
    cursor: pointer;
}

.delBtn:hover{
    background-color: #bbb9b3;
}

.input-box{
    width: 90%;
    padding: 3px;
}


.variable-btn{
    padding: 5px 20px !important;
    border: none;
    border-radius: 5px;
    background-color: #005aab;
    color: white;
    cursor: pointer;
}

.variable-btn:hover{
    background-color: #67b7ff;
}

/*
*TAG
*/

.w100p{
    width: 100%;
}

.w50p{
    width: 50%;
}

.w40p{
    width: 40%;
}

.w30p{
    width: 30% !important;
}

.w15p{
    width: 15%;
}

.w10p{
    width: 10%;
}

.align-left{
    text-align: left !important;
}

.align-center{
    text-align: center !important;
}

.align-right{
    text-align: right !important;
}

.hidden-box{
    display: none !important;
}

.cl-red{
    color: red !important;
}

.cl-green{
    color: green !important;
}

.cl-violet{
    color: #9300ff !important;
}

.mgl5{
    margin-left: 5px;
}

.mgl10{
    margin-left: 10px;
}

.mgr5{
    margin-right: 5px;
}
.mgr10{
    margin-right: 10px;
}