.image_edit {
    width: 200px;
    height: 250px;
}

.answer-estimate {
    color: red;
    font-weight: bold;
}

.iamge-top {
    width: 600px;
    height: 300px;
}

.image-brand-logo {
    width: 24px;
    height: 24px;
}

.iamge-category {
    width: 190px;
    height: 150px;
}

.iamge-item {
    width: 190px;
    height: 150px;
}

.cart {
    position: relative;
}

.img-cart {
    width: 32px;
    height: 32px;
}

.circle-number-cart {
  width: 16px;
  height: 16px;
  padding-top: 0px;
  border-radius: 50%;
  text-align: center;
  box-sizing: border-box;
  position: absolute;
  left: 0px;
  top: 0px;
}

.number-cart {
    color: white;
    background-color: red;
    font-size: 12px;
}

.status-cart {
	color: black;
}

.status-estiamted {
	background-color: red;
	color: white;
}

.status-contacted {
	background-color: blue;
	color: white;
}

.status-answered {
	background-color: green;
	color: white;
}

.status-ordered {
    color: black;
}

.status-lost-order {
	background-color: black;
	color: white;
}

.row-title {
    background-color: dimgray;
	color: white;
}

.row-odd {
    background-color: lightgray;
}

.row-even {
    background-color: whitesmoke;
}

.row-contact-title {
    background-color: lightgray;
    font-weight: bold;
}

.row-contact-body {
    background-color: whitesmoke;
}

.row-contact-responde-title {
    background-color: gainsboro;
    font-weight: bold;
}

.row-contact-responde-body {
    background-color: ghostwhite;
}

.wait-responde {
	background-color: red;
	color: white;
}

.preview-drawing-group {
    display: inline-block;
    position: relative;
    width: 110px;
    height: 140px;
    vertical-align: top;
}

.preview-drawing {
    position: relative;
    border: solid;
    width: 100px;
    height: 100px;
}

.preview-drawing-name {
    text-align: center;
    width: 100px;
    height: 25px;
}

.preview-drawing-name::after {
    display: inline;
}

.round_btn {
  display: block;
  position: absolute;
  width: 30px;
  height: 30px;
  border: 2px solid #333; /* 枠の調整 */
  border-radius: 50%;  /* 丸みの度合い */
  background: #fff; /* ボタンの背景色 */
  top: -15px;
  right: 0px;
}
 
.round_btn::before, .round_btn::after {
  content: "";
  position: absolute;
  top: 2px;
  right: 11px;
  width: 3px; /* 棒の幅（太さ） */
  height: 22px; /* 棒の高さ */
  background: #333; /* バツ印の色 */
}
 
.round_btn::before {
  transform: translate(0, 0) rotate(45deg);
}
 
.round_btn::after {
  transform: translate(0, 0) rotate(-45deg);
}

.slick-prev,
.slick-next {
    z-index: 100;
}

.slick-prev:before,
.slick-next:before {
    color: black;
}

.top-slider-thumb {
    text-align: center;
    width: 400px;
    height: 300px;
}

/* Confirm Term For Register */
.register-term {
    height: 300px;
    overflow: scroll;
}

.confirm-checkbox {
    text-align: center;
}

/* About */
.about-card {
    font-size: medium;
    /*
    background: #f8f8f0;
    */
}
.about-card-header {
    font-size: large;
}

.about-definition {
    font-size: large;
    margin-bottom: 15px;
}

.about-article {
    font-size: x-large;
    font-weight: bold;
    list-style-type: none;
    border-left: 5px solid #5db5bd;
    padding: 15px 0 15px 20px;
}

.about-paragraph {
    list-style: outside decimal;
    margin-bottom: 15px;
}

.about-paragraph::marker {
    color: #5db5bd;
}

.about-item {
    list-style: outside decimal;
    margin-bottom: 15px;
}

.about-item::marker {
    color: #5db5bd;
}

.about-content {
    list-style-type: none;
    margin-bottom: 15px;
}

.about-last {
    text-align: right;
}

input:invalid {
    background-color: lightpink;
}

.btn-delete {
    color: #fff;
    background-color: var(--red);
    border-color: var(--red);
}

.btn-delete:hover {
    color: #fff;
    background-color: #f08080;
    border-color: #f08080;
}

.btn-delete:focus,
.btn-delete.focus {
    color: #fff;
    background-color: #f08080;
    border-color: #f08080;
    box-shadow: 0 0 0 0.2rem rgba(250, 138, 145, 0.5);
}

.btn-delete.disabled,
.btn-delete:disabled {
    color: #fff;
    background-color: #6c757d;
    border-color: #6c757d;
}

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

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

/* SpinButtonHidden for Chrome/Safari */
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
}

/* SpinButtonHidden for Firefox */
input[type="number"] {
    appearance: inherit;
    -moz-appearance: textfield;
}

.color-red {
    color: var(--red);
}
.color-blue {
    color: var(--blue);
}
.color-yellow {
    color: var(--yellow);
}
.color-green {
    color: var(--green);
}

.list-detail-title {
    background-color: var(--yellow);
}

.list-detail-border {
    border-bottom: 1px dotted var(--blue);
}

.printed {
    color: var(--red);
}

.hidden {
    display: none;
}

/*
 * PAGE TOPボタン追加
 * https://ayaito.net/webtips/css/4396/
 */
#page_top{
   width: 40px;
   height: 40px;
   position: fixed;
   right: 0;
   bottom: 10px;
   background: #961818;
   opacity: 0.6;
   display: none;
}

#page_top div{
    position: relative;
    display: block;
    width: 40px;
    height: 40px;
    text-decoration: none;
}

#page_top div::after{
    content: '▲';
    font-size: 14px;
    font-weight: bold;
    color: #fff;
    position: absolute;
    top: 10px;
    bottom: 0;
    right: 0;
    left: 0;
    margin: auto;
    text-align: center;
}

/* ========FOOTMENU CUSTOMIZE======== */
.footMenu ul {
   margin: 5px 0;
   padding: 20px 0 0 0;
   text-align: center;
   border-top: 1px solid #ddd;
}

.footMenu li {
   display: inline;
   margin: 0 0 0 20px;
   list-style: none;
}

.footMenu li a {
   color: #999;
}

.footMenu li a:hover {
   color: #666;
   text-decoration: underline;
}


/* ========FOOTER CUSTOMIZE======== */
.copyright {
   font-style: normal;
   font-size: 11px;
   color: #999;
   line-height: 3.0;
   text-align: center;
}

/* ========flexselect custom======== */
.flexselect_dropdown li {
    font-size: 1.0em;
}

/* ========jquery.validate custom======== */
form.cmxform label.error, label.error {
	color: var(--red);
}