@charset "UTF-8";
/*--------------------------

ボタンの設定

--------------------------*/
.btn {
  display: inline-block;
  padding: 0.8em;
  font-size: 16px;
  font-weight: bold;
  min-width: 350px;
  color: #fff;
  cursor: pointer;
  text-decoration: none;
  margin-left: auto;
  margin-right: auto;
  background-color: #222;
  text-align: center;
  line-height: 1.2;
  box-sizing: border-box;
}
.btn:hover {
  opacity: 0.8;
  transition: all 300ms 0s ease;
}

input.btn, button.btn {
  border: none;
  border-radius: 0;
  padding: 0.8em;
}

.btnarea {
  text-align: center;
}
.btnarea.bt {
  border-top: 1px solid #C7C7C7;
  padding-top: 40px;
  margin-top: 25px;
}

.btnlog {
  min-width: 80%;
  text-align:left;
  margin-bottom:10px;
}

@media screen and (max-width: 768px) {
  .btn {
    min-width: auto;
    width: 80%;
    margin-left: 10%;
    margin-right: 10%;
  }

  .btnarea.bt {
    padding-top: 20px;
    margin-top: 15px;
  }
}
/*--------------------------

色

--------------------------*/
.btn-cl-green {
  background-color: #019F58;
}

.btn-cl-navy {
  background-color: #192636;
}

.btn-cl-bgreen {
  background-color: #0C6374;
}

.btn-cl-rgray {
  background-color: #EDF4F2;
  color: #333333;
}

.btn-cl-line {
  background: none;
  color: #333333;
  border: 1px solid #7B7B7B;
}
.btn-cl-line:hover {
  background-color: #efefef;
}

.bgdgray .btn-cl-line {
  color: #FFF;
}

/*--------------------------

アイコン

--------------------------*/
.btn-ico-search {
  padding-left: 40px;
  padding-right: 40px;
  background-image: url("../img/common/icon_search.png");
  background-repeat: no-repeat;
  background-position: left 10px center;
  background-size: auto 16px;
}

.btn-ico-blankw {
  padding-left: 40px;
  padding-right: 40px;
  background-image: url("../img/common/icon_blank_w.png");
  background-repeat: no-repeat;
  background-position: left 10px center;
  background-size: auto 16px;
}

.btn-ico-blankgr {
  padding-left: 40px;
  padding-right: 40px;
  background-image: url("../img/common/icon_blank_gr.png");
  background-repeat: no-repeat;
  background-position: left 10px center;
  background-size: auto 16px;
}

.btn-ico-pdf {
  padding-left: 40px;
  padding-right: 40px;
  background-image: url("../img/common/icon_pdf2.png");
  background-repeat: no-repeat;
  background-position: left 10px center;
  background-size: auto 28px;
}
.btn-ico-docx {
  padding-left: 40px;
  padding-right: 40px;
  background-image: url("../img/common/icon_docx.png");
  background-repeat: no-repeat;
  background-position: left 10px center;
  background-size: auto 28px;
}
.btn-ico-xlsx {
  padding-left: 40px;
  padding-right: 40px;
  background-image: url("../img/common/icon_xlsx.png");
  background-repeat: no-repeat;
  background-position: left 10px center;
  background-size: auto 28px;
}
.btn-ico-pptx {
  padding-left: 40px;
  padding-right: 40px;
  background-image: url("../img/common/icon_pdf.png");
  background-repeat: no-repeat;
  background-position: left 10px center;
  background-size: auto 16px;
}

.btn-ico-right {
  padding-left: 32px;
  padding-right: 32px;
  background-image: url("../img/common/icon_arr_r_gr.png");
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: auto 12px;
}

.btn-ico-rightw {
  padding-left: 32px;
  padding-right: 32px;
  background-image: url("../img/common/icon_arr_r.png");
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: auto 12px;
}

.btn-ico-left {
  padding-left: 32px;
  padding-right: 32px;
  background-image: url("../img/common/icon_arr_l_gr.png");
  background-repeat: no-repeat;
  background-position: left 10px center;
  background-size: auto 12px;
}

.btn-ico-leftw {
  padding-left: 32px;
  padding-right: 32px;
  background-image: url("../img/common/icon_arr_l.png");
  background-repeat: no-repeat;
  background-position: left 10px center;
  background-size: auto 12px;
}

/*--------------------------

ボタンボックス

--------------------------*/
.btnbox_w {
  margin: 10px 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}
.btnbox_w .btn {
  margin: 10px;
}
.btnbox_w.cols {
  flex-wrap: nowrap;
}
.btnbox_w.cols .btn {
  min-width: auto;
  width: 100%;
}

.btnbox_gr {
  background-color: #EDF4F2;
  padding: 10px;
  margin: 20px 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}
.btnbox_gr .btn {
  margin: 10px;
}
.btnbox_gr.cols {
  flex-wrap: nowrap;
}
.btnbox_gr.cols .btn {
  min-width: auto;
  width: 100%;
}
