.custom-style {
    position: relative;
    padding: 5px 30px;
    cursor: pointer;
    z-index: 1;
}

.custom-style:before {
    width: 40px;
    height: 40px;
    border: 3px solid #ccc;
    border-radius: 50%;
    margin-top: -8px;
    top: -134px;
    left: 23px;
}

.custom-style:after,
.custom-style:before {
    position: absolute;
    content: "";
}

.custom-style::after {
    position: absolute;
    width: 27px;
    height: 40px;
    top: -142px;
    left: 33px;
    border-right: 8px solid #007bff;
    border-bottom: 8px solid #007bff;
    border-radius: 7px;
    content: '';
    margin-top: -7px;
    opacity: 0;
    transform: rotate(45deg);
}

input[type=checkbox]:checked+.custom-style::after {
    opacity: 1;
}

.custom-style-2 {
    position: relative;
    padding: 5px 30px;
    cursor: pointer;
    z-index: 1;
}

.custom-style-2:before {
    width: 40px;
    height: 40px;
    border: 3px solid #ccc;
    border-radius: 50%;
    margin-top: -8px;
    top: 0px;
    left: 6px;
}

.custom-style-2:after,
.custom-style-2:before {
    position: absolute;
    content: "";
}

.custom-style-2::after {
    position: absolute;
    width: 27px;
    height: 40px;
    top: -8px;
    left: 15px;
    border-right: 8px solid #007bff;
    border-bottom: 8px solid #007bff;
    border-radius: 7px;
    content: '';
    margin-top: -7px;
    opacity: 0;
    transform: rotate(45deg);
}

input[type=checkbox]:checked+.custom-style-2::after {
    opacity: 1;
}

body {
    zoom: 0.85;
}

/* button */
.btn-anchor {
    border: 0;
    background-color: #f8fafc;
    color: #3490dc;
    padding: 0 1px;
}
.btn-anchor--success {
      color: #38c172;
}
.btn-anchor--edit {
    color: #000000;
}
.btn-anchor--delete {
    color: red;
}
.btn-anchor:hover {
    text-decoration: underline;
}
.home-checkbox {
    width: 191px;  /* 幅を設定 */
    height: 20px; /* 高さを設定 */
    -webkit-appearance: none; /* Webkitベンダープレフィックス */
    -moz-appearance: none;    /* Mozillaベンダープレフィックス */
    appearance: none;         /* 見た目を設定しない */
    /* border: 1px solid rgb(226, 226, 226);  枠線を表示 */
    outline: none;            /* アウトラインを非表示 */
    position: relative;       /* 相対位置に設定 */
    cursor: pointer;          /* ポインタを変更 */
  }

  /* チェックボックスの背景スタイル */
  .home-checkbox::before {
    content: "";              /* コンテンツを設定しない */
    position: absolute;       /* 絶対位置に設定 */
    top: 0;                   /* 上端に設定 */
    left: 0;                  /* 左端に設定 */
    width: 100%;              /* 幅を100%に設定 */
    height: 100%;             /* 高さを100%に設定 */
    background-color: white;  /* 背景色を白に設定 */
    border: 1px solid rgb(226, 226, 226);  /* 枠線を表示 */
  }

  /* チェックボックスのチェックマークスタイル */
  .home-checkbox::after {
    content: "\2713";         /* Unicodeのチェックマークを設定 */
    position: absolute;       /* 絶対位置に設定 */
    top: 50%;                 /* 上端を50%に設定 */
    left: 50%;                /* 左端を50%に設定 */
    transform: translate(-50%, -50%); /* 中央揃え */
    font-size: 20px;          /* フォントサイズを設定 */
    color: rgb(255, 255, 255);             /* テキストカラーを設定 */
    visibility: hidden;       /* 非表示にする */
  }

  /* チェックボックスがチェックされた時のスタイルを設定 */
  .home-checkbox:checked::before {
    background-color: #007bff;  /* 背景色を黒に設定 */
  }

  .home-checkbox:checked::after {
    visibility: visible;      /* 表示する */
  }


/* box-border */
.caption__box {
    position: relative;
    margin-top: 1em;
    padding: 1.5em 2em 0.8em;
    border: 1px solid #ced4da
}
.caption__box .caption__text {
    position: absolute;
    top: 0;
    left: 0;
    font-size: 1em;
    padding: 0 1em;
    margin: 0;
    background-color: white;
    border: 1px solid #ced4da;
    transform: translateY(-50%) translateX(1em);
}

/* image関係 */
.image-table {
    width: 80px;
    height: 80px;
    object-fit: contain;
}
.image-middle {
    width: 250px;
    height: 250px;
    object-fit: contain;
}
.image-small {
    width: 200px;
    height: 200px;
    object-fit: contain;
}
.image-smaller {
    width: 130px;
    height: 130px;
    object-fit: contain;
}
.image-card {
    width: 191px;
    height: 160px;
    object-fit: contain;
}

.zindex-fixed {
    z-index: 1030;
}

.package-list {
    position: sticky;
    top: 0;
    background-color: #fff;
    padding: 30px;
    border-top: 1px solid #afafaf;
    border-bottom: 1px solid #afafaf;
}
.star-rating {
    position: relative;
    width: 5em;
    height: 1em;
    font-size: 30px;

    }
.star-rating-front {
    position: absolute;
    top: 0;
    left: 0;
    overflow: hidden;
    white-space: nowrap;
    color: #ffcc33;
    height: 35px;
}
.star-rating-back {
    color: #ccc;
}
.diagonal-line{
    background-image: linear-gradient(to right top, transparent calc(50% - 0.5px), #999 50%, #999 calc(50% + 0.5px), transparent calc(50% + 1px));
}