/* モーダル：対象商品 */
#modal-items[hidden] { display: none; }
#modal-items .modal-backdrop { background: rgba(0, 0, 0, 0.5); }

.modal-items { box-sizing: border-box; width: 956px; max-width: calc(100% - 32px); padding: 40px; background: var(--c-white); border-radius: 16px; color: var(--c-black); }
.modal-items .modal-items-inner { display: flex; flex-direction: column; align-items: flex-start; gap: 24px; width: 100%; }
.modal-items .modal-items-title { width: 100%; font-size: 24px; font-weight: 700; line-height: 1.6; letter-spacing: 1.2px; color: var(--c-pony-blue); text-align: left; }

.modal-items .modal-items-body { display: flex; align-items: flex-start; gap: 24px; width: 100%; }

.modal-items .modal-items-illust { box-sizing: border-box; display: flex; align-items: center; justify-content: center; gap: 6px; width: 428.571px; height: 240px; flex: none; background: var(--c-blue-gray); border-radius: 16px; overflow: hidden; }
.modal-items .modal-items-illust img { flex: none; max-width: none; }
.modal-items .modal-items-illust-jacket { width: 79.835px; height: 105px; }
.modal-items .modal-items-illust-onepiece { width: 72.381px; height: 110px; }
.modal-items .modal-items-illust-rompers { width: 69.109px; height: 75px; }

.modal-items .modal-items-illust-outer { width: 82.038px; height: 114px; transform: scaleX(-1); }
.modal-items .modal-items-illust-muffler { width: 63.486px; height: 75px; }

.modal-items .modal-items-text { display: flex; flex-direction: column; align-items: flex-start; gap: 32px; flex: 1 0 0; min-width: 1px; }
.modal-items .modal-items-block { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; width: 100%; }

.modal-items .modal-items-list { padding-left: 24px; list-style: disc; font-size: 16px; font-weight: 500; line-height: 1.6; letter-spacing: 0.8px; color: var(--c-black); }

.modal-items .modal-items-btn { box-sizing: border-box; display: flex; align-items: center; justify-content: center; gap: 8px; width: 226px; padding: 8px 16px; background: var(--c-clozy-blue); border-radius: 6px; font-size: 16px; font-weight: 700; line-height: 1.6; letter-spacing: 0.8px; color: var(--c-white); white-space: nowrap; }
.modal-items .modal-items-btn img { flex: none; width: 16px; height: 16px; }

.modal-items .modal-items-caution-title { box-sizing: border-box; padding: 3px; border-bottom: 1px solid #EA5023; font-size: 16px; font-weight: 700; line-height: 1.6; letter-spacing: 0.8px; color: #EA5023; text-align: center; white-space: nowrap; }
.modal-items .modal-items-caution-text { width: 100%; font-size: 16px; font-weight: 500; line-height: 1.6; letter-spacing: 0.8px; color: #EA5023; word-break: break-word; }

.modal-items .modal-close { position: absolute; right: 24px; top: 21.5px; width: 24px; height: 24px; display: block; }
.modal-items .modal-close img { width: 24px; height: 24px; }

@media (max-width: 767px) {

  #modal-items { padding: 0 16px; box-sizing: border-box; }
  .modal-items { width: 100%; max-width: 100%; max-height: calc(100% - 32px); overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 24px 16px; }
  .modal-items .modal-items-title { text-align: center; }
  .modal-items .modal-items-body { flex-direction: column; gap: 24px; }

  .modal-items .modal-items-illust { width: 100%; height: 182.56px; gap: 4.564px; border-radius: 12.171px; }
  .modal-items .modal-items-illust-jacket { width: 60.728px; height: 79.87px; }
  .modal-items .modal-items-illust-onepiece { width: 55.058px; height: 83.673px; }
  .modal-items .modal-items-illust-rompers { width: 52.569px; height: 57.05px; }
  .modal-items .modal-items-illust-outer { width: 62.404px; height: 86.716px; }
  .modal-items .modal-items-illust-muffler { width: 48.292px; height: 57.05px; }
  .modal-items .modal-items-text { gap: 24px; width: 100%; flex: none; }
  .modal-items .modal-items-block { gap: 24px; }
  .modal-items .modal-items-block-caution { gap: 16px; align-items: center; }
  .modal-items .modal-items-list { width: 100%; box-sizing: border-box; }

  .modal-items .modal-items-btn { width: 100%; padding: 12px 16px; }

  .modal-items .modal-close { width: 32px; height: 32px; }
  .modal-items .modal-close img { width: 32px; height: 32px; }
}