#layout-three-container { display: flex; position: relative; }
#layout-three-container > article { flex: 1; position: relative; }

#layout-three-container > article > .container-box {

  flex: 1;
  position: absolute;
  top: 95px;
  padding: 10px;

}

#layout-three-container .container-banner > .container-box {
  width: 300px;
  left: 95%;
  transform: translateX(-95%);
  border: 3px dotted #dce4e3;
}

#layout-three-container .container-search > .container-box {
  width: 350px;
  left: 5%;
  transform: translateX(-5%);
  border-radius: 8px;
  box-shadow: 1px 2px 6px rgba(0,0,0,0.6);
}


.container-item { margin: 5px; padding: 10px; }
.container-title {
  font-size: 32px;
  font-weight: bold;
  padding: 8px 0 30px 0;
  text-align: center;
  font-family: 'twayfly';
}

.container-sub-title {
  font-size: 32px;
  font-weight: bold;
  padding-top: 30px;
  font-family: 'twayfly';
  text-align: left;
  color: #000;
}

.container-sub-notice {
  font-family: 'twayfly';
  line-height: 1.6em;
  border: 3px dotted #dce4e3;
  margin: 15px 0;
  padding: 10px;
}

.container-item pre {
  width: 100%;
  height: 100%;
  font-family: 'twayfly';
  font-size: 14px;
  line-height: 1.6em;
  overflow-x: hidden;
  white-space: pre-wrap;
}

.container-search { font-family: 'twayfly'; }

.search-option-header { border-bottom: 2px solid #1376b5; color: #003B4A; font-weight: bold; font-size: 16px; padding: 8px 0; margin: 0 16px; }
.search-option-body { font-size: 13px; padding: 15px; }
.search-option-body .container-flex .search-option-input { display: flex; }
.search-option-body .search-option-input label {
  flex: 1;
  padding: 5px 8px;
  border: 1px solid #dce4e3;
  cursor: pointer;
  margin: 5px;
  justify-content: flex-start;
}

.search-option-input input[type=radio], .search-option-input input[type=checkbox] { display: none; }

.search-option-input input[type=radio]:checked + label { background-color: #1376b5; color: #fff; border: 1px solid #1376b5; }
.search-option-input input[type=checkbox]:checked + label { background-color: #1376b5; color: #fff; border: 1px solid #1376b5; }

.search-option-input input[type=radio]:disabled + label { background-color: #efefef; color: #a5a5a5; border: 1px solid #efefef; }
.search-option-input input[type=checkbox]:disabled + label { background-color: #efefef; color: #a5a5a5; border: 1px solid #efefef; }

.search-option-title { color: #888; padding: 5px 0; border:none; cursor: default; }

.search-option-body .input-text {
  flex: 1;
  width: 100%;
  padding: 5px 8px;
  border: 1px solid #dce4e3;
  outline: none;
}
.search-option-body .input-text:focus {
  border: 1px solid #1376b5;
}

.container-flex.flex-column-two .search-option-input { flex-basis: 49%; }
.container-flex.flex-column-three .search-option-input { flex-basis: 33%;  }

/* .search-option-input input { display: none; } */

.search-option-range { padding: 15px 25px 5px 25px; }

.form-container {
    padding: 30px;
    background: #FFFFFF;
    /* box-shadow: 2px 3px 13px #00000029; */
    border: 1px solid #9e9e9e;
    border-radius: 10px;
    width: calc(100% - 26px);
    height: 230px;
    font-family: 'twayfly';
    /* margin-left: 14px;*/
}

.form-container  ul {
  margin: 0;
  padding: 0;
}

.form-container  ul li {
  float: left;
  width: 32%;
  height: 70px;
}

.css-selecter {
  /* content: "\f107";
  font-family: 'Font Awesome 5 Free';
  padding-left: 20px;
  font-size: 22px;
  line-height: 16px; */
  background: #fff url('/theme/basic/img/renewal/select-arrow_bg.png') right top no-repeat;
}

.form-container  ul li select {
  /* min-width: 110px; */
    border: 1px solid #d9d9d9;
    height: 40px;
    font-size: 13px;
    /* padding-left: 5px; */
    color: #373737;
    background-color: #fff;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    outline: none;
}


.order-box-form {
  width: 480px;
  margin: 10px auto;
  padding: 16px;
  border: 1px solid #dce4e3;
  border-radius: 5px;
  background-color: #f2f5f5;
  font-family: 'twayfly';
}

.order-box-form .container-btn { margin-top: 16px; }

.order-box-form .container-box-title { padding: 8px 0; margin: 0; }

.order-box-form .btn { width: 100%; padding: 10px 0; font-size: 16px; }

.order-box-form .input-group label { color: #3a3a3a; }

.order-box-form .input-group input[type=text],
.order-box-form .input-group input[type=tel],
.order-box-form .input-group input[type=password] {
  border: 1px solid #bbcac8;
  text-align: left;
  text-indent: 8px;
}

.container-card {
  font-family: 'twayfly';
  font-size: 14px;
  padding: 8px 16px;
  margin: 8px 0;

  border-bottom: 3px solid #dce4e3;
}


.container-card .container-card-header {
  display: flex;
  height: 35px;
  align-items: center;
  justify-content: flex-start;
}

.container-card .container-card-header span label { margin-right: 5px; color: #5a5a5a; }

.container-card .container-card-badge {
  width: 60px;
  background-color: #039be5;
  color: #fefefe;
  border-radius: 5px;
  padding: 3px;
  text-align: center;
  opacity: .3;
}
.container-card .container-card-badge.complete { opacity: 1; }
.container-card .container-card-badge.type { background-color: #6d9692; opacity: 1; }

.container-card .container-card-title {
  padding: 8px;
  margin: 5px 0;
  background-color: #c1e0e0;
  color: #003B4A;
}

.container-card.card-background { background-color: #e3f1f1; border: 1px solid #dce4e3; border-radius: 5px; }
.container-card .container-card-item { padding: 0 8px; background-color: #fdfefe; }

.container-card .card-label { width: 80px; padding: 8px 0; }
.container-card .container-card-row { display: flex; align-items: center; padding: 5px 0; }

.container-card .container-card-item .provision-text * {
  font-family: 'twayfly' !important;
  font-size: 13px !important;
  line-height: 1.6em !important;
  background-color: inherit !important;
}

.container-box.order-check {
  display: flex;
  align-items: flex-start;
}

.container-header.order-check {
  display: block;
}

.order-ok-list {
  border:1px solid #ddd;
  margin-top: 10px;
  padding: .8rem 0;
}
.order-ok-list table {
  margin: 0 auto;
  font-family: 'twayfly';
  width: 100%;
  max-width: 485px;
  table-layout: fixed;
  border-collapse: collapse;
  border-radius: .5rem;
}
.order-ok-list table tr td {
  padding: .8rem .3rem;
  font-size: 14px;
  color: #606060;
}
.order-ok-list table tr:nth-of-type(even) td { background-color: #e3f1f1; }
.order-ok-list table tr td:nth-child(1) { text-align: center; color: #424242; }
.order-ok-list table tr td:nth-child(1) span {
  background-color: #039be5;
  color: #f8f8f8;
  padding: .3rem .5rem;
  border-radius: .5rem;
}
.order-ok-list table tr td:nth-child(2) { text-align: center; color: #424242; }

@media only screen and (max-device-width: 1600px)  {

  #layout-three-container > article.container-banner { flex: .35; }

}

@media only screen and (min-device-width: 320px) and (max-device-width: 480px) {

  #layout-three-container { width: 100vw; padding: 1rem;}

  .container-item { margin: .5rem; padding: 1rem .5rem; }

  .order-box-form {
    width: 100%;
  }

  .container-title {
    font-size: 2rem;
    padding: .4px 0 1.5rem 0;
  }
  .container-sub-title {
    font-size: 2rem;
    padding-top: 1.6rem;
  }
  .container-sub-notice {
    font-size: 1.4rem;
    margin: .8rem 0;
  }

  .container-order-view { font-size: 1.2rem; }

  .container-order-check.s-full, .container-order-view.s-full { width: 100%; padding: 1rem; }
  .container-order-check .s-full, .container-order-view .s-full { width: 100%; }

  .container-order-view .container-item { padding: 0; }
  .container-order-view .container-box-title { margin: .5rem 0; }

  .container-order-view .container-card { font-size: 1.1rem; }
  .container-order-view .container-card .container-card-header { column-gap: .5rem;  }

  .container-order-view .container-card .container-card-header .btn { padding: .3rem .5rem; font-size: 1.2rem; }

  .container-order-view .container-card .container-box { padding: .5rem 0; }

  .container-order-view .container-card .container-card-item .provision-text * { font-size: 1.1rem !important; }

  .container-order-view .container-card-item-header {
    display: grid;
    height: auto;
    row-gap: .5rem;
    justify-content: unset !important;
  }

  .container-order-check .container-box-title { font-size: 2rem; }
  .container-order-check .container-item { margin: unset; }
  .order-box-form { padding: 1.6rem; }

  .container-order-check input, .container-order-check label { font-size: 1.6rem; }
  .container-order-check .input-group label { flex: .5; font-size: 1.1rem; }

  .container-order-complete.s-full { width: 90%; }
  .container-order-complete .s-full { width: 90%; }

  .container-board.s-full,
  .container-board .s-full { width: 100%; }

  .container-board .container-item * { word-break: unset !important; width: unset !important }

  .order-ok-list table tr td {
    font-size: 1.1rem;
  }

  .container-box.order-check {
    flex-direction: column-reverse;
  }

  .container-header.order-check .container-sub-notice span {
    font-size: 1.2rem;
  }

  .order-ok-list {
    margin-top: 15px;
    border: none;
  }
}