/*  Input Styles */

  .main-header {
    z-index: 0;
  }
  
  .input_form{
    width: 100%;
    padding: 15px;
    background:#f8f8f8;
    border:1px solid rgba(0, 0, 0, 0.075);
    margin-bottom:25px;
    color:#727272 !important;
    font-size:13px;
    -webkit-transition: all 0.4s;
    -moz-transition: all 0.4s;
    transition: all 0.4s;
  }

  .input_form:hover{
    border:1px solid #8BC3A3;
  }

  .input_form:focus{
    color: white;
    outline: none;
    border:1px solid #8BC3A3;
  }

  .input_textarea{
    height: 200px;
    max-height: 200px;
    max-width: 100%;
  }
  
/* Generic Button Styles */

  /* .button{
    padding:8px 12px;
    background:#0A5175;
    display: block;
    width:120px;
    margin:10px 0 0px 0;
    border-radius:3px;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    transition: all 0.3s;
    text-align:center;
    font-size:0.8em;
    box-shadow: 0px 1px 4px rgba(0,0,0, 0.10);
    -moz-box-shadow: 0px 1px 4px rgba(0,0,0, 0.10);
    -webkit-box-shadow: 0px 1px 4px rgba(0,0,0, 0.10);
  }

  .button:hover{
    background:#8BC3A3;
    color:white;
  } */

/* 保存 Button Styles */

  .form-btn{
    width:auto;
    display: block;
    height: auto;
    padding:15px;
    color:#fff;
    background:#40ba75 !important;
    border:none;
    border-radius:3px;
    outline: none;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    transition: all 0.3s;
    margin:auto;
    white-space: nowrap;
    box-shadow: 0px 1px 4px rgba(0,0,0, 0.10);
    -moz-box-shadow: 0px 1px 4px rgba(0,0,0, 0.10);
    -webkit-box-shadow: 0px 1px 4px rgba(0,0,0, 0.10);
  }

  .form-btn:hover{
    background:#111 !important;
    color: white;
    border:none;
  }

  .form-btn:active{
    opacity: 0.9;
  }

  /* 削除 Button Styles */
  .form-danger-btn{
    width:180px;
    display: block;
    height: auto;
    padding:15px;
    color:#fff;
    background:#8BC3A3 !important;
    border:none;
    border-radius:3px;
    outline: none;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    transition: all 0.3s;
    margin:auto;
    box-shadow: 0px 1px 4px rgba(0,0,0, 0.10);
    -moz-box-shadow: 0px 1px 4px rgba(0,0,0, 0.10);
    -webkit-box-shadow: 0px 1px 4px rgba(0,0,0, 0.10);
  }

  .form-danger-btn:hover{
    background:#ff0000 !important;
    color: white;
    border:none;
  }

  .form-danger-btn:active{
    opacity: 0.9;
  }
/* center{
  margin-top:330px;
}
input {
    position: relative;
    z-index: 9999;
} */
  .send-verification-button {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0 auto;
    max-width: 100%;
    padding: 10px 25px 10px 50px;
    color: #313131;
    transition: 0.3s ease-in-out;
    font-weight: 600;
    background: #eff9fd;
    border-radius: 50px;
    z-index:0;
    overflow: hidden;
  }
  
  .send-verification-button::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    width: 0;
    display: block;
    background: #daf4ff;
    transition: .3s;
    left:0;
  }

  .send-verification-button:hover::after {
    width: 100%;
    z-index: -1;
  }

/*------------------------------------
- COLOR primary
------------------------------------*/
.alert-primary {
  color: #010f1b;
  background-color: #6ab6f8;
  border-color: #56acf8;
}

.alert-primary hr {
  border-top-color: #3ea0f7;
}

.alert-primary .alert-link {
  color: #000000;
}

.badge-primary {
  color: #fff;
  background-color: #065091;
}

.badge-primary[href]:hover, .badge-primary[href]:focus {
  color: #fff;
  background-color: #033460;
}

.bg-primary {
  background-color: #065091 !important;
}

a.bg-primary:hover, a.bg-primary:focus,
button.bg-primary:hover,
button.bg-primary:focus {
  background-color: #033460 !important;
}

.border-primary {
  border-color: #065091 !important;
}

.btn-primary {
  color: #fff;
  background-color: #065091;
  border-color: #065091;
}

.btn-primary:hover {
  color: #fff;
  background-color: #043d6e;
  border-color: #033460;
}

.btn-primary:focus, .btn-primary.focus {
  box-shadow: 0 0 0 0.2rem rgba(6, 80, 145, 0.5);
}

.btn-primary.disabled, .btn-primary:disabled {
  color: #fff;
  background-color: #065091;
  border-color: #065091;
}

.btn-primary:not(:disabled):not(.disabled):active, .btn-primary:not(:disabled):not(.disabled).active, .show > .btn-primary.dropdown-toggle {
  color: #fff;
  background-color: #033460;
  border-color: #032c51;
}

.btn-primary:not(:disabled):not(.disabled):active:focus, .btn-primary:not(:disabled):not(.disabled).active:focus, .show > .btn-primary.dropdown-toggle:focus {
  box-shadow: 0 0 0 0.2rem rgba(6, 80, 145, 0.5);
}

.btn-outline-primary {
  color: #065091;
  background-color: transparent;
  border-color: #065091;
}

.btn-outline-primary:hover {
  color: #fff;
  background-color: #065091;
  border-color: #065091;
}

.btn-outline-primary:focus, .btn-outline-primary.focus {
  box-shadow: 0 0 0 0.2rem rgba(6, 80, 145, 0.5);
}

.btn-outline-primary.disabled, .btn-outline-primary:disabled {
  color: #065091;
  background-color: transparent;
}

.btn-outline-primary:not(:disabled):not(.disabled):active, .btn-outline-primary:not(:disabled):not(.disabled).active, .show > .btn-outline-primary.dropdown-toggle {
  color: #fff;
  background-color: #065091;
  border-color: #065091;
}

.btn-outline-primary:not(:disabled):not(.disabled):active:focus, .btn-outline-primary:not(:disabled):not(.disabled).active:focus, .show > .btn-outline-primary.dropdown-toggle:focus {
  box-shadow: 0 0 0 0.2rem rgba(6, 80, 145, 0.5);
}

.list-group-item-primary {
  color: #010f1b;
  background-color: #56acf8;
}

.list-group-item-primary.list-group-item-action:hover, .list-group-item-primary.list-group-item-action:focus {
  color: #010f1b;
  background-color: #3ea0f7;
}

.list-group-item-primary.list-group-item-action.active {
  color: #fff;
  background-color: #010f1b;
  border-color: #010f1b;
}

.table-primary,
.table-primary > th,
.table-primary > td {
  background-color: #56acf8;
}

.table-hover .table-primary:hover {
  background-color: #3ea0f7;
}

.table-hover .table-primary:hover > td,
.table-hover .table-primary:hover > th {
  background-color: #3ea0f7;
}

.text-primary {
  color: #065091 !important;
}

a.text-primary:hover, a.text-primary:focus {
  color: #033460 !important;
}

/* カードタイトルの色変更 */
.card-primary:not(.card-outline) > .card-header {
  background-color: #065091;
}

/* タブの色変更 */
.nav-pills .nav-link.active{
  background-color: #065091;
}

.custom_card_width {
  width: 100%;
  margin-left:auto;
  margin-right:auto;
}

.custom_card_table_width {
  width: 75%;
  margin-left:auto;
  margin-right:auto;
}

.custom_buy_complete {
  width: 50%;
  margin-left:auto;
  margin-right:auto;
}

.custom_history_table_width {
  width: 75%;
  margin-left:auto;
  margin-right:auto;
}

.custom_font_size {
  font-size: 1em;
}

.table th {
  background-color: #f8f8ff;
  width: 50%;
}

.table td {
  width: 50%;
}

.table tr {
  /* text-align: center; */
  vertical-align: middle;
}

.introduce {
  text-align: left;
  margin-left: auto;
  margin-right: auto;
  margin-top: 20px;
  margin-bottom: 20px;
  padding:2px;
  border: 3px #5c5c5c solid;
  width: 75%;
}

.custom_mt_5 {
  margin-top: 5px;
}

.custom_mt_10 {
  margin-top: 10px;
}

.custom_mt_30 {
  margin-top: 30px;
}

.custom_mb_5 {
  margin-bottom: 5px;
}

.custom_mb_10 {
  margin-bottom: 10px;
}

.custom_m_auto {
  margin: auto;
}

.custom_mt_20 {
  margin-top: 20px;
}

.custom_ml_10 {
  margin-left: 10px;
}

.custom_mr_10 {
  margin-right: 10px;
}

.custom_kuwashiku_button {
  margin-top: 10px;
  margin-bottom: 10px;
}

.custom_plan_card {
  border:3px #a9a9a9 solid;
  margin-top:20px;
  border-radius:20px;
  vertical-align: middle;
  padding: 0%;
}

.custom_indent_plan_information {
  padding: 0 20px;
}

.custom_indent_1 {
  text-indent: 1em;
}

.no_wrap {
  white-space: nowrap;
}

.custom_card_body_background {
  background-color:#87cefa;
}

.custom_input_title_payment {
  font-weight: bold;
  font-size: 1.2em;
  line-height: 1;
  border-left: 4px solid #ED1C24;
  padding: 0 0 0 15px;
}

.custom_profile_card {
  display: inline-block;
}

.custom_profile_div {
  width: 50%;
  /* margin: auto; */
}

.custom_list_center {
  display: flex;
  justify-content: center;
  align-items: center;
}

.custom_user_login {
  text-align: right;
  width: 110%;
  color: red;
}

.custom_user_register {
  text-align: right;
  width: 100%;
  color: red;
}

/* PC版にのみ適応する場合はここに */
@media (min-width: 768px) {
  .custom_kuwashiku_button {
    text-align: right;
    margin-right: 10px;
  }

  .custom_plan_title {
    padding-left: 3em;
    vertical-align: center;
  }

  .table-responsive table.table th,
  .table-responsive table.table td {
    width: 25%;
  }

}
/* SP版にのみ適応する場合はここに */
@media (max-width: 767px) {

  .custom_card_width {
    width: 100%;
  }

  .custom_card_table_width {
    width: 100%;
  }

  .custom_font_size {
    font-size: 0.75em;
  }

  .custom_profile_input_width {
    width: 100%;
  }

  .custom_modal_font_wrap {
    white-space: nowrap;
  }

  .doui_button {
    min-width: 200px; /* 最低200pxを確保 */
    height: 56px;
    font-size: 18px;
    font-weight: bold;
    padding: 0 16px; /* テキスト横の余白がキツキツにならないように */
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  .table th,
  .table td {
    display: block;
    width: 100%;
  }

  .introduce {
    width: 100%;
  }
  
  .custom_history_table_width {
    width: 100%;
  }

  .custom_history_table_width th,
  .custom_history_table_width td {
    display: table-cell;
  }

  .custom_kuwashiku_button {
    margin-top: 10px;
    text-align: center;
    margin-bottom: 10px;
  }

  .custom_plan_title {
    text-align: center;
  }

  .custom_profile_card {
    margin-top: 20px;
  }

  .custom_buy_complete {
    width: 100%;
  }

  .custom_indent_plan_information {
    text-align: center;
  }

  .custom_user_login {
    width: 100%;
  }
}