/* =================================== /
/ []
/ =================================== */
@import url('https://fonts.googleapis.com/css2?family=Kaisei+Opti:wght@400;500;700&display=swap');
/* =================================== /
/ []
/ =================================== */
/* ColorPalete */
/* https://huemint.com/gradient-4/#palette=f2e1a7-d2a774-7d8b6d-333333 */
:root {
  /* [基本3色] */
  --base-color-base: #333333;
  --base-color-highlight: #7d8b6d;
  --base-color-accent: #d2a774;
  /* [文字色] */
  --font-color-base: #f6f6f6;
  --font-color-link: #f2e1a7;
  /* [ボタンカラー] */
  --btn-primary: #0d6efd;
  --btn-hover-primary: #31d2f2;
  --btn-secondary: #6c757d;
  --btn-hover-secondary: #51585e;
  --btn-success: #198754;
  --btn-hover-success: #157347;
  --btn-danger: #dc3545;
  --btn-hover-danger: #bb2d3b;
  --btn-warning: #ffc107;
  --btn-hover-warning: #ffca2c;
  --btn-info: #0dcaf0;
  --btn-hover-info: #31d2f2;
  /* [半透明] */
  --opacity-dark10: rgba(0,0,0,.1);
  --opacity-dark20: rgba(0,0,0,.2);
  --opacity-dark30: rgba(0,0,0,.3);
  --opacity-dark40: rgba(0,0,0,.4);
  --opacity-dark50: rgba(0,0,0,.5);
  --opacity-dark60: rgba(0,0,0,.6);
  --opacity-dark70: rgba(0,0,0,.7);
  --opacity-dark80: rgba(0,0,0,.8);
  --opacity-dark90: rgba(0,0,0,.9);
  --opacity-dark100: rgba(0,0,0,1);

  --opacity-hithlight10: rgba(255,255,255,.1);
  --opacity-hithlight20: rgba(255,255,255,.2);
  --opacity-hithlight30: rgba(255,255,255,.3);
  --opacity-hithlight40: rgba(255,255,255,.4);
  --opacity-hithlight50: rgba(255,255,255,.5);
  --opacity-hithlight60: rgba(255,255,255,.6);
  --opacity-hithlight70: rgba(255,255,255,.7);
  --opacity-hithlight80: rgba(255,255,255,.8);
  --opacity-hithlight90: rgba(255,255,255,.9);
  --opacity-hithlight100: rgba(255,255,255,1);
}
/* =================================== /
/ []
/ =================================== */
* {
  box-sizing: border-box;
}
body, html {
  width: 100%;
  /* height: 100%; */
  color: var(--font-color-base);
  font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
  font-size: 62.5%;
  background: var(--base-color-base);
}
body {
  padding: 70px 0 50px;
}
a {
  color: var(--font-color-link);
}
a:hover {
  text-decoration: none;
}
/* =================================== /
/ [フォームパーツ]
/ =================================== */
/* [セレクト] */
.form-select {
  padding: 15px 10px;
  font-size: 1.6rem;
  line-height: 1;
  color: var(--font-color-base);
  background-color: var(--opacity-dark20);
  border: none;
  border-radius: 7px;
  box-shadow: 1px 1px 0 var(--opacity-hithlight10), -1px -1px 0 var(--opacity-dark30);
}
.form-select option {
  background: var(--base-color-base);
}
/* [カテゴリセレクト] */
.select-category {
  width: 95%;
  margin: auto;
  display: block;
}
/* [一つボタン]※式登録ボタンとか */

.input-sigle-button {
  width: 100%;
  color: #fff;
  font-size: 2rem;
  letter-spacing: .1em;
  line-height: 1;
  text-decoration: none;
  border: none;
  border-radius: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--btn-primary);
  box-sizing: border-box;
}
.input-sigle-button:hover {
  background: var(--btn-hover-primary);
}
/* [まるボタン] */
.circle-button {
  padding: 0;
  border: none;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  aspect-ratio: 1;
}
.input-text textarea {
}
/* [入力input:text] */
.input-text input[type="text"],
.input-text input[type="number"],
.input-text textarea {
  padding: 15px 10px;
  color: #fff;
  font-size: 1.6rem;
  background: var(--opacity-dark30);
  border-width: 1px;
  border-style: solid;
  border-color: var(--base-color-base);
  border-radius: 3px;
  transition: 150ms;
  box-shadow: 1px 1px 0 var(--opacity-hithlight10), 1px 1px 0 var(--opacity-dark30) inset;
}
.input-text input[type="text"]:focus,
.input-text input[type="number"]:focus,
.input-text textarea:focus {
  background: var(--opacity-dark80);
  border-color: var(--base-color-accent);
}
.input-text textarea {
  resize: none;
}
.input-text .input-text-label {
  height: 20px;
  margin-bottom: 5px;
  font-size: 1.4rem;
  font-weight: bold;
  line-height: 1;
  display: flex;
  align-items: center;
  position: relative;
}
.input-text .input-text-label:before {
  content: '';
  width: 5px;
  height: 100%;
  margin-right: 5px;
  background: var(--base-color-accent);
  border-radius: 5px;
  display: inline-block;
}

/* =================================== /
/ [ログイン]
/ =================================== */
.login-wrapper {
  width: 100%;
  height: 100Vh;
  padding-top: 20px;
  position: fixed;
  top: 0;
  left: 0;
  overflow: auto;
}
  .login {
    width: 90%;
    max-width: 640px;
    margin: 20px auto 0;
    padding: 20px 20px 40px;
    position: relative;
  }
  .login:before {
    content: '';
    width: 90%;
    height: 100%;
    background: rgba(128,128,128,.3);
    border-radius: 7px;
    display: block;
    transform: skewX(-3deg) skewY(3deg);
    position: absolute;
    top: 0;
    left: 5%;
    z-index: -1;
    box-shadow: 1px 1px 1px rgba(0,0,0,.3);
  }
  .login:after {
    content: '';
    width: 90%;
    height: 100%;
    background: rgba(128,128,128,.5);
    border-radius: 7px;
    display: block;
    transform: skewX(3deg) skewY(-3deg);
    position: absolute;
    top: 0;
    left: 5%;
    z-index: -1;
    box-shadow: 1px 1px 1px rgba(0,0,0,.3);
  }
    .login-logo {
      margin: 0 0 50px;
      padding: 0;
      font-family: "Kaisei Opti", serif;
      font-size: clamp(2.25rem, 1.523rem + 3.64vw, 4.25rem);
      font-weight: 700;
      text-align: center;
      text-shadow: 2px 2px 0 rgba(0,0,0,.2);
    }
    .login-inputs {
    }
      .login-inputs label {
        width: 90%;
        margin: 0 auto 40px;
        /* padding-left: 10px; */
        display: block;
        position: relative;
      }
        .login-inputs label span {
          font-size: 16px;
          position: absolute;
          top: 50%;
          left: 10px;
          transform: translateY(-50%);
          transition: 150ms;
        }
        .login-inputs label:has(input:focus) span {
          top: -15px;
        }
        .login-inputs label input {
          width: 100%;
          padding: 15px;
          color: #fff;
          font-size: 18px;
          background: rgba(255,255,255,.2);
          border: none;
          outline: none;
        }
    .login-button {
      width: 90%;
      margin: auto;
      /* padding-left: 10px; */
    }
      .login-button input {
        width: 100%;
        padding: 20px 0;
        color: #fff;
        font-family: "Kaisei Opti", serif;
        font-weight: 700;
        background: #333;
        border: none;
        border-radius: 50px;
        box-sizing: border-box;
        outline: none;
        transition: 150ms;
        box-shadow: 0 0 0 rgba(0,0,0,.3);
      }
      .login-button input:hover {
        background: #000;
        box-shadow: 0 0 20px rgba(0,0,0,.3);
      }
      .login-button input:active {
        transform: scale(.97);
      }
    .invalid {
      width: 80%;
      margin: 0 auto 40px;
      padding: 20px 10px;
      font-size: 14px;
      letter-spacing: .1em;
      text-align: center;
      background: rgba(255,0,0,.3);
      border: 1px solid #f00;
      border-radius: 7px;
    }
/* =================================== /
/ [ヘッダ]
/ =================================== */
.head {
  width: 100%;
  height: 70px;
  background: var(--opacity-dark80);
  backdrop-filter: blur(10px);
  position: fixed;
  top: 0;
  left: 0;
  z-index: 100;
  overflow: hidden;
}
  .head .inner {
    width: 100%;
    max-width: 640px;
    height: 100%;
    margin: auto;
    padding: 0;
    display: flex;
    align-items: center;
  }
    .head .logo {
      margin: 0;
      padding: 0;
      font-family: "Kaisei Opti", serif;
      font-size: clamp(2.25rem, 1.523rem + 3.64vw, 3rem);
      font-weight: 700;
      text-align: center;
      text-indent: 10px;
      text-shadow: 2px 2px 0 rgba(0,0,0,.2);
    }
    .head .logout {
      width: 44px;
      height: 44px;
      margin-left: auto;
      text-decoration: none;
      display: inline-flex;
      align-items: center;
      justify-content: center;
    }
      .head .logout .icon {
        font-size: 2.4rem;
      }
/* =================================== /
/ [フッタ]
/ =================================== */
.foot {
  width: 100%;
  background: var(--opacity-dark80);
  backdrop-filter: blur(10px);
  position: fixed;
  bottom: 0;
  left: 0;
  z-index: 100;
  box-shadow: 0 -1px 3px rgba(0,0,0,.7);
}
  .foot-navi {
    height: 70px;
  }
    .foot-navi .lists {
      width: 90%;
      max-width: 640px;
      height: 100%;
      margin: auto;
      padding: 0;
      display: flex;
      align-items: center;
      justify-content: space-between;
    }
      .foot-navi .item {
        list-style: none;
      }
        .foot-navi .item a {
          width: 40px;
          text-decoration: none;
          border-radius: 3px;
          display: inline-flex;
          align-items: center;
          justify-content: center;
          aspect-ratio: 1;
        }
          .foot-navi .item a .icon {
            font-size: 2.4rem;
          }
/* =================================== /
/ [共通コンテンツ要素]
/ =================================== */
.main-contents {
  width: 95%;
  max-width: 640px;
  margin: auto;
  overflow: hidden;
}
  .content-item {
    margin: 50px 0;
  }
    .content-item > .title {
      margin: 0 0 20px;
      padding: 10px 0 15px;
      color: var(--base-color-accent);
      font-family: "Kaisei Opti", serif;
      font-size: 2.2rem;
      font-weight: 700;
      text-indent: 5px;
      line-height: 1;
      border-top: 3px solid var(--base-color-accent);
      border-bottom: 3px solid var(--base-color-accent);
      position: relative;
    }
    .content-item > .title:before,
    .content-item > .title:after {
      content: '';
      display: inline-block;
      position: absolute;
      top: 100%;
    }
    .content-item > .title:before {
      border-top: 15px solid var(--base-color-accent);
      border-left: 12px solid transparent;
      border-right: 12px solid transparent;
      left: 20px;
    }
    .content-item > .title:after {
      border-top: 11px solid var(--base-color-base);
      border-left: 8px solid transparent;
      border-right: 8px solid transparent;
      left: 24px;
      transform: translateY(-1px);
    }
/* =================================== /
/ [50音別リスト]
/ =================================== */
.letter-lists {
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
  gap: 10px;
}
  .letter-lists-item {
    height: 44px;
    padding: 1px;
    background: var(--opacity-dark20);
    border: 1px solid var(--btn-primary);
    display: flex;
    align-items: center;
    list-style: none;
  }
    .letter-lists-item a {
      width: 50%;
      height: 100%;
      line-height: 1;
      text-decoration: none;
      background: var(--btn-primary);
      display: flex;
      align-items: center;
      justify-content: center;
      position: relative;
    }
    .letter-lists-item a:hover {
      background: var(--btn-hover-primary);
    }
      .letter-lists-item a .key {
        font-family: "Kaisei Opti", serif;
        font-size: 3rem;
        font-weight: 700;
        text-shadow: 2px 2px 0 var(--opacity-dark10);
        position: relative;
        top: -2px;
        z-index: 2;
      }
      .letter-lists-item a .suffix {
        padding: 2px;
        font-size: 1.2rem;
        font-weight: bold;
        border-radius: 50%;
        opacity: .7;
        display: inline-block;
        position: absolute;
        bottom: 2px;
        right: 2px;
        z-index: 1;
      }
    .letter-lists-item .regist-count {
      font-family: "Kaisei Opti", serif;
      font-size: 1.6rem;
      font-weight: 700;
      letter-spacing: .1em;
      flex: 1;
      text-align: center;
    }
/* =================================== /
/ [購入予定]
/ =================================== */
.new-release {
  margin: 0 auto 20px;
  padding: 0;
}
  .new-release-item {
    padding: 20px;
    list-style: none;
    border-bottom: 1px solid var(--opacity-dark50);
    border-top: 1px solid var(--opacity-hithlight10);
  }
  .new-release-item:first-child {
    border-top: none;
  }
  .new-release-item:last-child {
    border-bottom: none;
  }
  .new-release-item:nth-of-type(even) {
    background: var(--opacity-dark10);
  }
    .new-release-item > .date {
      height: 35px;
      line-height: 1;
      display: flex;
      align-items: center;
    }
      .new-release-item > .date .release-day {
        font-size: 1.6rem;
      }
        .new-release-item > .date .release-day > .icon {
          margin-right: 5px;
        }
      .new-release-item > .date .release-left {
        margin-left: auto;
      }
        .new-release-item > .date .release-left .badge {
          padding: 10px 15px;
          font-size: 1.4rem;
          letter-spacing: .1em;
          display: inline-block;
        }
        .new-release-item > .date .release-left .badge.today {
          background: var(--btn-danger);
        }
        .new-release-item > .date .release-left .badge.now {
          background: #18a1bd;
        }
        .new-release-item > .date .release-left .count {
          font-size: 1.2rem;
        }
          .new-release-item > .date .release-left .count > .num {
            margin: 0 3px;
            color: var(--btn-info);
            font-family: "Kaisei Opti", serif;
            font-size: 1.8rem;
            font-weight: 700;
            display: inline-flex;
          }
    .new-release-item > .book-info {
      display: flex;
      align-items: center;
    }
      .new-release-item > .book-info > .title-number {
        padding-right: 10px;
        font-size: 1.8rem;
        line-height: 1.6;
        flex: 1;
      }
        .new-release-item > .book-info > .title-number .title {
          font-weight: bold;
        }
        .new-release-item > .book-info > .title-number .number {
        }
      .new-release-item > .book-info > .edit {
        width: 90px;
        margin-left: auto;
        display: flex;
        justify-content: space-between;
      }
        .new-release-item > .book-info > .edit > button {
          width: 40px;
          color: #fff;
          font-size: 1.6rem;
        }
        .new-release-item > .book-info > .edit .add {
          background: var(--btn-success);
        }
        .new-release-item > .book-info > .edit .add:hover {
          background: var(--btn-hover-success);
        }
        .new-release-item > .book-info > .edit .del {
          background: var(--btn-danger);
        }
        .new-release-item > .book-info > .edit .del:hover {
          background: var(--btn-hover-danger);
        }
/* =================================== /
/ [購入予定追加ボタン]
/ =================================== */
.add-newreleas-link {
}
  .add-newreleas-link a {
    height: 44px;
    color: #fff;
    font-size: 2rem;
    letter-spacing: .1em;
    line-height: 1;
    text-decoration: none;
    border-radius: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--btn-primary);
  }
  .add-newreleas-link a:hover {
    background: var(--btn-hover-primary);
  }
  .add-newreleas-link a:active {
  }
/* =================================== /
/ [設定] ※各種(書名・著者名・出版社名)データ登録
/ =================================== */
.setting-lists {
  margin: 0;
  padding: 20px 0;
}
  .setting-lists-item {
    padding: 20px 10px;
    border-top: 1px solid var(--opacity-hithlight10);
    border-bottom: 1px solid var(--opacity-dark20);
    list-style: none;
    display: flex;
  }
  .setting-lists-item:first-child {
    border-top: none;
  }
  .setting-lists-item:last-child {
    border-bottom: none;
  }
  .setting-lists-item:nth-of-type(even) {
    background: var(--opacity-dark10);
  }
    .setting-lists-item > .inputs {
      flex: 1;
    }
      .setting-lists-item > .inputs .input-item {
        width: 95%;
        margin-bottom: 10px;
        position: relative;
      }
        .setting-lists-item > .inputs .input-item > input {
          width: 100%;
          padding: 15px 10px;
          color: #fff;
          font-size: 1.6rem;
          background: var(--opacity-dark30);
          border-width: 1px;
          border-style: solid;
          border-color: var(--base-color-base);
          border-radius: 3px;
          transition: 150ms;
          box-shadow: 1px 1px 0 var(--opacity-hithlight10), 1px 1px 0 var(--opacity-dark30) inset;
        }
        .setting-lists-item > .inputs .input-item > input:focus {
          background: var(--opacity-dark80);
          border-color: var(--base-color-accent);
        }
        .setting-lists-item > .inputs .input-item > .label {
          height: 20px;
          margin-bottom: 5px;
          font-size: 1.4rem;
          font-weight: bold;
          line-height: 1;
          display: flex;
          align-items: center;
          position: relative;
        }
        .setting-lists-item > .inputs .input-item > .label:before {
          content: '';
          width: 5px;
          height: 100%;
          margin-right: 5px;
          background: var(--base-color-accent);
          border-radius: 5px;
          display: inline-block;
        }
        .setting-lists-item > .inputs .input-item:has(input:focus) > .label {
          color: var(--base-color-accent);
        }
      .setting-lists-item > .inputs .input-item.name {
      }
      .setting-lists-item > .inputs .input-item.name_ja {
      }
    .setting-lists-item > .buttons {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 20px 0;
    }
      .setting-lists-item > .buttons > button {
        width: 40px;
        color: #fff;
        font-size: 1.6rem;
      }
      .setting-lists-item > .buttons > button.add { background: var(--btn-success); }
      .setting-lists-item > .buttons > button.add:hover { background: var(--btn-hover-success); }
      .setting-lists-item > .buttons > button.del { background: var(--btn-danger); }
      .setting-lists-item > .buttons > button.del:hover { background: var(--btn-hover-danger); }
/* =================================== /
/ [設定新規登録ボタン]
/ =================================== */
.setting-add-button {
  width: 100%;
  margin: auto;
  padding: 20px 0;
}
.setting-add-button button {
  padding: 15px 0;
}
/* =================================== /
/ [新規登録(入力)]
/ =================================== */
/* [画像アップロード] */

/* [データフォーム] */
.add-form {
  margin: 0;
  padding: 0;
}
  .add-form-item {
    padding: 20px 0;
    list-style: none;
    border-bottom: 1px solid var(--opacity-dark30);
    border-top: 1px solid var(--opacity-hithlight10);
  }
  .add-form-item:first-child {
    border-top: none;
  }
  .add-form-item:last-child {
    border-bottom: none;
  }
    .add-form-item .input-text {
      margin-bottom: 10px;
    }
      .add-form-item .input-text .input-text-label {
        margin-bottom: 10px;
      }
      .add-form-item .input-text input[type="text"],
      .add-form-item .input-text input[type="number"],
      .add-form-item .input-text select {
        width: 100%;
      }
      .add-form-item .input-text textarea {
        height: 250px;
      }
      .add-form-item .check-is_final {
      }
        .add-form-item .check-is_final label {
          width: 80px;
          height: 35px;
          background: var(--btn-secondary);
          border-radius: 100px;
          position: relative;
          display: inline-flex;
          align-items: center;
          justify-content: center;
          overflow: hidden;
          cursor: pointer;
          transition: 150ms;
        }
        .add-form-item .check-is_final label:has(input[type="checkbox"]:checked) {
          background: var(--btn-success);
        }
        .add-form-item .check-is_final label:has(input[type="checkbox"]:checked):before {
          background: var(--btn-success);
          left: 50%;
        }
        .add-form-item .check-is_final label:before {
          content: 'OFF';
          font-family: "Kaisei Opti", serif;
          font-size: 1.6rem;
          font-weight: 700;
          letter-spacing: .2em;
          cursor: pointer;
        }
        .add-form-item .check-is_final label:has(input[type="checkbox"]:checked):before {
          content: 'ON';
        }
        .add-form-item .add-confirm-button {
        }
          .add-form-item .add-confirm-button .input-sigle-button {
            padding: 15px 0;
            color: #fff;
            background: var(--btn-primary);
            border: none;
            border-radius: 100px;
            transition: 150ms;
            box-sizing: border-box;
          }
          .add-form-item .add-confirm-button .input-sigle-button:hover {
            background: var(--btn-hover-primary);
          }
          .add-form-item .error {
            margin: auto;
            padding: 10px;
            color: var(--btn-danger);
            font-size: 1.3rem;
            letter-spacing: .1em;
            text-align: left;
            background: var(--opacity-dark30);
            border: 1px solid rgba(255,0,0,.3);
            border-radius: 7px;
          }
/* =================================== /
/ [画像アップロード]
/ =================================== */
.image-container {
}
  .image-container > .upload-file {
    width:100%;
    height: 200px;
    border: 3px dashed var(--opacity-hithlight70);
    border-radius: 14px;
    display: block;
    position: relative;
    transition: 150sm
  }
  .image-container > .upload-file:hover,
  .image-container > .upload-file:hover:before,
  .image-container > .upload-file:hover:after {
    color: var(--opacity-hithlight100);
    border-color: var(--opacity-hithlight100);
  }
  .image-container > .upload-file:before {
    content: '\f0ee';
    color: var(--opacity-hithlight70);
    font: var(--fa-font-solid);
    font-size: 8.8rem;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, calc(-50% - 30px));
    transition: 150ms;
  }
  .image-container > .upload-file:after {
    content: 'ここに画像をドロップしてアップロード';
    width: 100%;
    color: var(--opacity-hithlight70);
    font-size: clamp(1rem, 0.818rem + 0.91vw, 1.5rem);
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: calc(50% + 40px);
    left: 0;
  }
    .image-container > .upload-file input {
      width: 100%;
      height: 100%;
      display: block;
      opacity: 0;
      position: absolute;
      left: 0;
      top: 0;
      cursor: pointer;
    }
  .image-container > .preview {
    margin: 20px 0;
    text-align: center;
  }
    .image-container > .preview img {
      width: 50%;
      /* aspect-ratio: 3 /4; */
      object-fit: cover;
    }
  .image-container .upload-button {
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .image-container .upload-button button {
    width: 100%;
    color: #fff;
    font-size: 1.6rem;
    letter-spacing: .1em;
    line-height: 1;
    background: var(--btn-primary);
    border: none;
    border-radius: 100px;
    cursor: pointer;
    transition: 150ms;
  }
    .image-container .upload-button button:hover {
      background: var(--btn-hover-primary);
    }
    .image-container .upload-button button:disabled {
      color: #fff;
      background: var(--opacity-hithlight70);
      cursor: default;
    }
    .image-container .upload-button button:disabled:hover {
    }
/* =================================== /
/ [新規登録(確認)]
/ =================================== */
.confirm-lists-title {
  min-height: 40px;
  font-family: "Kaisei Opti", serif;
  font-size: clamp(1.6rem, 0.818rem + 2vw, 2.4rem);
  font-weight: 700;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}
.confirm-lists-title:before {
  content: '';
  width: 100%;
  height: 100%;
  border-top: 3px double var(--btn-success);
  border-bottom: 4px double var(--btn-success);
  display: block;
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
}
  .confirm-lists-title > span {
    margin-left: 10px;
    font-display: inline-block;
  }
  .confirm-lists-title > span:before {
    content: ' / '
  }
.confirm-lists {
  margin: 0;
  padding: 0;
}
  .confirm-lists-item {
    padding: 20px 10px;
    border-top: 1px solid var(--opacity-hithlight10);
    border-bottom: 1px solid var(--opacity-dark30);
    list-style: none;
  }
  .confirm-lists-item:nth-of-type(even) {
    background: var(--opacity-dark10);
  }
  .confirm-lists-item:first-child {
    border-top: none;
  }
  .confirm-lists-item:last-child {
    border-bottom: none;
  }
    .confirm-lists-item .confirm-image {
      text-align: center;
    }
      .confirm-lists-item .confirm-image img {
        width: 50%;
        object-fit: cover;
      }
    .confirm-lists-item .input-text .input-text-label {
      color: var(--base-color-accent);
    }
    .confirm-lists-item .input-text > div {
      padding: 20px;
      font-size: 1.6rem;
      font-weight: bold;
    }
.confirm-buttons {
  margin-bottom: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
}
  .confirm-buttons input {
    margin: 0 20px;
    color: #fff;
    letter-spacing: .3em;
    border: none;
  }
  .confirm-buttons .back {
    padding: 10px 20px;
    font-size: 1.4rem;
    background: var(--btn-secondary);
    border-radius: 7px;
  }
  .confirm-buttons .back:hover {
    background: var(--btn-hover-secondary);
  }
  .confirm-buttons .do {
    padding: 15px 40px;
    font-size: 1.8rem;
    background: var(--btn-success);
    border-radius: 100px;
  }
  .confirm-buttons .do:hover {
    background: var(--btn-hover-success);
  }
/* =================================== /
/ [一覧]
/ =================================== */
/* タイトル */
.lists-title {
  min-height: 40px;
  font-family: "Kaisei Opti", serif;
  font-size: clamp(1.6rem, 0.818rem + 2vw, 2.4rem);
  font-weight: 700;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}
.lists-title:before {
  content: '';
  width: 100%;
  height: 100%;
  border-top: 3px double var(--btn-success);
  border-bottom: 4px double var(--btn-success);
  display: block;
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
}

/* リスト */
.data-lists {
  margin: 0;
  padding: 0;
}
  .data-lists-item {
    padding: 20px 10px;
    border-top: 1px solid var(--opacity-hithlight10);
    border-bottom: 1px solid var(--opacity-dark30);
    list-style: none;
    display: flex;
    align-items: center;
  }
  .data-lists-item:first-child {
    border-top: none;
  }
  .data-lists-item:last-child {
    border-bottom: none;
  }
  .data-lists-item:nth-of-type(even) {
    background: var(--opacity-dark30);
  }
    .data-lists-item .thumb {
      width: 30%;
    }
      .data-lists-item .thumb img {
        width: 90%;
        border: 3px solid var(--base-color-base);
        object-fit: cover;
        cursor: pointer;
        transition: 150ms;
      }
      .data-lists-item .thumb img:hover {
        border: 3px solid var(--base-color-accent);
        /* opacity: .7; */
      }
    .data-lists-item .text {
      flex: 1;
    }
      .data-lists-item .text .title {
        margin-bottom: 10px;
        font-size: 1.8rem;
        line-height: 1.3;
        font-weight: bold;
      }
      .data-lists-item .text .author {
        font-size: 1.4rem;
      }
      .data-lists-item .text .number {
        font-size: 1.4rem;
      }
        .data-lists-item .text .number > span {
          margin-right: 5px;
          font-size: 1.6rem;
          display: inline-block;
        }
    .data-lists-item .button {
      width: 50px;
      text-align: right;
    }
      .data-lists-item .button button {
        width: 44px;
        color: #fff;
        font-size: 1.6rem;
        background: var(--btn-danger);
       aspect-ratio: 1;
      }
      .data-lists-item .button button:hover {
        background: var(--btn-hover-danger);
      }

/* =================================== /
/ [購入予定なし]
/ =================================== */
.no-release {
  height: 100px;
  margin-bottom: 20px;
  color: var(--opacity-hithlight40);
  font-size: 2rem;
  text-shadow: 2px 2px 0 var(--opacity-dark10);
  background: var(--opacity-hithlight10);
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  user-select: none;
}
.no-release:before {
  content: '\f273';
  margin-right: 10px;
  font: var(--fa-font-solid);
  font-size: 2.2rem;
  position: relative;
  top: -1px;
}
/* =================================== /
/ []
/ =================================== */