@charset "UTF-8";

input,select,textarea,label {
  line-height:1.8;
  cursor: pointer;
}
input,select,textarea {
  width:100%;
  min-height:50px;
  padding:1.2em;
  background-color:var(--white);
  border:solid 1px var(--gray);
}
::placeholder {
  color:var(--darkgray);
}

select{
  text-align:center;
  padding:0 1em 0 0;
  background-image:url(/images/common/select.svg);
  background-repeat:no-repeat;
  background-position:center right 5px;
  background-size:10px 15px;
}
textarea{
  display:flex;
  min-height:10em;
}
input + input {
  margin:12px 0 0 0;
}
input[type="submit"]{
  background:var(--orange);
  color:var(--white);
  border:none;
  text-align:center;
}
input[type="checkbox"],
input[type="radio"] {
  display:none;
}
input[type="checkbox"] + span,
input[type="radio"] + span {
  display:inline-flex;
  align-items:center;
  height:50px;
  padding:0 1.25em 0 2.5em;
  margin:2px;
  border:1px solid var(--gray);
  background-color:var(--white);
  position:relative;
}
input[type="checkbox"] + span:before ,
input[type="radio"] + span:before {
  content:"";
  display:inline-flex;
  aspect-ratio:1;
  margin:0 9px 0 0;
  border:1px solid var(--gray);
  border-radius:2px;
  background-color:var(--white);
  position:absolute;
  top:50%;
  left:1.25em;
  transform-origin:center;
  transition:.1s;
}
input[type="checkbox"] + span:before {
  width:1em;
  transform:translate(-50%,-50%) rotate(0deg);
}
input[type="radio"] + span:before {
  width:.75em;
  transform:translate(-50%,-50%) rotate(45deg);
}
input[type="checkbox"]:checked + span,
input[type="radio"]:checked + span {
  color:var(--white);
  border-color:var(--blue);
  background-color: var(--blue);
}
input[type="checkbox"]:checked + span:before,
input[type="radio"]:checked + span:before {
  border-color:var(--blue);
  border-radius:50%;
}
input[type="radio"]:checked + span:before {
  width:1em;
}

input[type="file"]{
  display:none;
}
input[type="hidden"] + input {
  margin:0;
}

.form_block {
  padding:30px 0;
  background-color:var(--base);
  border-top:1px solid var(--gray);
  border-bottom:1px solid var(--gray);
}
.form_block + .form_block {
  margin:30px 0 0 0;
}
.form_block hr {
  width:100%;
  height:1px;
  background-color:var(--gray);
  margin:30px 0;
}
.form_parts {
  display:flex;
  justify-content:flex-start;
  align-items:flex-start;
  padding:0 30px;
}
.form_parts + .form_parts {
  margin:15px 0 0 0;
}
.form_parts h3 {
  width:110px;
  padding:1em 0 0 0;
}
.form_parts .field {
  display:flex;
  flex-wrap:wrap;
  width:calc(100% - 110px);
}
.form_parts .field ul {
  width:100%;
}
.form_parts .field mark {
  display:inline-flex;
  align-items:center;
  margin:0 5px 0 0;
  font-size:95%;
}
.form_parts .field > * + mark {
  margin:0 5px;
}
.form_parts .field span {
  display:flex;
  align-items:center;
}
.form_parts .field .half {
  width:calc(50% - 10px);
}

.birthday select,
.sex select,
.term select {
  width:6.5em;
}
.zip input,
.price input {
  width:9em;
}
.dosage input,
.dosage select {
  width:9em;
}
.timestamp select,
.condition select {
  width:9em;
}

.area_message {
  display:flex;
  flex-direction:column;
  width:100%;
}
.show_message {
  width:100%;
}
.show_message input[type="checkbox"] + span {
  justify-content:center;
  margin:0;
}
[data-show-message-area="0"] {
  display:none !important;
  height:0;
}
[data-show-message-area="1"] {
  display:flex !important;
  height:auto;
}
.item_message {
  display:flex;
  flex-direction:column;
  width:100%;
  padding:25px;
  background-color:var(--white);
  border-left:1px solid var(--gray);
  border-right:1px solid var(--gray);
}
.item_message .form_parts {
  padding:0;
}
.item_message .form_parts h3 {
  width:50px;
}
.item_message .form_parts .field {
  width:calc(100% - 50px);
}
.export_message {
  width:100%;
  padding:0 25px 25px;
  background-color:var(--white);
  border:1px solid var(--gray);
  border-top:none;
}
.exported {
  margin:25px 0 0 0;
  background-color:var(--white);
}
.exported .record_block {
  display:flex;
  flex-direction:column;
  padding:25px;
  border:1px solid var(--gray);
  background-color:var(--white);
}
.exported > .record_block + .record_block {
  border-top:none;
}
.exported .detail {
  width:100%;
  position:relative;
}
.exported .recorded dl {
  display:flex;
  line-height:1.8;
}
.exported .recorded > dl + dl {
  margin:9px 0 0 0;
}
.exported .recorded dt {
  white-space:nowrap;
}
.exported .mode_edit .recorded dt {
  margin:1.2em 0 0 0;
}
.exported .recorded dt:after {
  content:'-';
  margin:0 10px;
}
.exported .recorded dd {
  width:100%;
}
.exported .recorded p {
  margin:6px 0 0 0;
}
.exported .process {
  display:flex;
  align-items:center;
  margin:25px 0 0 0;
}
.exported .process button {
  display:flex;
  justify-content:center;
  align-items:center;
  padding:6px 25px;
  color:var(--white);
  border-radius:2px;
}
.exported .process button[data-color="blue"] {
  background-color:var(--blue);
}
.exported .process button[data-color="black"] {
  background-color:var(--black);
}
.exported .process button[data-color="red"] {
  background-color:var(--red);
}
.exported .process button[data-color="orange"] {
  background-color:var(--orange);
}
.exported .process > button + button {
  margin:0 0 0 5px;
}
.exported .process span {
  display:flex;
  align-items:center;
}
.exported .process i {
  width:15px;
  aspect-ratio:1;
  margin:0 5px 0 0;
  position:relative;
}
.exported .process i hr {
  width:2px;
  height:100%;
  margin:0;
  background-color:var(--white);
  position:absolute;
  top:50%;
  left:50%;
}
.exported .process i hr:first-child {
  transform:translate(-50%,-50%) rotate(45deg);
}
.exported .process i hr:last-child {
  transform:translate(-50%,-50%) rotate(-45deg);
}
.exported .process.add button {
  width:100%;
  min-height:50px;
}
.exported .item_message {
  padding:0;
  background-color:initial;
  border-left:none;
  border-right:none;
}
.exported .export_message {
  padding:25px 0 0 0;
  background-color:initial;
  border:none;
}
.exported .confirm i {
  width:18px;
  top:calc(50% - 10px);
  left:calc(50% - 65px);
}

.disorde {}
.disorde_detail {
  margin:25px 0 0 0;
}
.disorde .recorded {
  padding:25px;
  border:1px solid var(--gray);
}
.disorde .recorded + .recorded {
  border-top:none;
}
.disorde .recorded h3 {
  display:inline-flex;
  align-items:center;
  width:100%;
  padding:0 0 15px 0;
}
.disorde .recorded h3 hr {
  width:10px;
  height:10px;
  margin:0 6px 0 0;
  border:1px solid;
  border-radius:50%;
  background-color:initial;
}
.disorde_type {
  display:flex;
  flex-wrap:wrap;
  width:100%;
  padding:10px;
  border:1px solid var(--gray);
  border-top:none;
}
.disorde .item_message {
  margin:-1px 0 0 0;
  padding:25px;
  border:1px solid var(--gray);
}
.add_disorde label {
  display:block;
  margin:25px 0 0 0;
}

.label_check label {
  width:100%;
}
.label_check label span {
  width:100%;
}
.label_checked .item {
  display:flex;
  justify-content:space-between;
  align-items:center;
  width:100%;
  height:50px;
  border:1px solid var(--gray);
  background-color:var(--white);
}
.label_checked .item + .item {
  margin:5px 0 0 0;
}
.label_checked .item span {
  display:inline-flex;
  flex-direction:column;
  height:100%;
}
.label_checked .item span > * {
  display:inline-flex;
  align-items:center;
  height:100%;
}
.label_checked .item i {
  padding:0 1.2em;
  position:relative;
}
.label_checked .item b {
  padding:0 2em;
  color:var(--white);
}
.label_checked .item span > a + a {
  margin:0 0 0 1px;
}
.label_checked .item ul {
  display:inline-flex;
  align-items:center;
  height:100%;
}
.label_checked .item ul li {
  display:inline-flex;
  align-items:center;
  height:100%;
}
.label_checked .item ul > li + li {
  border-left:1px solid var(--gray);
}

.label_checked .user_type {
  padding:10px;
  font-size:80%;
}

.label_checked .process {
  color:var(--white);
}
.label_checked .process a {
  padding:0 1.2em;
  cursor:pointer;
}
.label_checked .process a img {
  width:15px;
  margin:0 6px 0 0;
}
.label_checked .edit {
  background-color:var(--blue);
}
.label_checked .item.vertical {
  flex-direction:column;
  height:auto;
}
.label_checked .item.vertical b {
  background-color:initial;
  color:var(--black);
}
.label_checked .item_head {
  display:flex;
  justify-content:space-between;
  align-items:center;
  width:100%;
  height:50px;
}
.label_checked .item_list {
  display:flex;
  flex-wrap:wrap;
  width:100%;
  margin:0 -3px;
  padding:0 1.2em 15px;
}
.label_checked .item_list span {
  display:inline-flex;
  justify-content:center;
  align-items:center;
  width:calc(100% / 2 - 6px);
  height:40px;
  margin:3px;
  background-color:var(--base);
  position:relative;
}

.price_list .type_transfer .item {
  height:auto;
  min-height:50px;
}
.price_list .type_transfer .item span:not(.process) {
  padding:1em 0;
}

.item_block {
  display:flex;
  width:100%;
  background-color:var(--white);
}
.item_block + .item_block {
  margin:5px 0 0 0;
}
.item_block h3 {
  width:110px;
  border:1px solid var(--gray);
  border-right:none;
  background-color:var(--lowlight);
}
.item_block h3 i {
  display:inline-flex;
  justify-content:center;
  align-items:center;
  width:100%;
  padding:1em 0 0 0;
}
.item_block .item_detail {
  display:flex;
  flex-direction:column;
  width:calc(100% - 110px);
}
.label_checked .item_block .item + .item {
  margin:0;
  border-top:none;
}

.label_checked .item i .notion {
  top:50%;
  right:-6px;
}
.notion {
  width:15px;
  aspect-ratio:1;
  position:absolute;
  transform:translate(0,-50%);
}

.confirm {
  display:flex;
  justify-content:center;
  align-items:center;
  width:100%;
  height:50px;
  border-radius:2px;
  position:relative;
}
.confirm i {
  width:15px;
  aspect-ratio:1;
  position:absolute;
  top:calc(50% - 8px);
  left:calc(50% - 60px);
  pointer-events:none;
}
.confirm input {
  padding:0 0 0 3.5em;
  border-radius:2px;
}

/************** form process ******************/
.form_process {
  width:100%;
  padding:50px 0 25px;
}
.form_process .confirm input {
  height:60px;
}
.form_process .confirm i {
  width:20px;
  aspect-ratio:1;
  top:calc(50% - 11px);
  left:calc(50% - 70px);
}
.form_process .cancel {
  display:inline-flex;
  justify-content:center;
  align-items:center;
  width:auto;
  height:35px;
  margin:30px 0 0 0;
  padding:0 40px;
  background-color:var(--black);
  color:var(--white);
  border-radius:2px;
  font-size:95%;
}
.form_process .cancel i {
  width:18px;
  margin:0 6px 0 0;
}