@charset "UTF-8";
/* モーダル全体のスタイル */
#modalOverlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 999;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* モーダルの中身 */
#modalContent {
  background-color: #fff;
  padding-top: 20px;
  width: 500px;
  max-width: 90%;
  border-radius: 8px;
}

.close-btn {
  position: absolute; /* 絶対位置 */
  top: 10px; /* 上からの距離 */
  right: 10px; /* 右からの距離 */
  background: none; /* 背景なし */
  border: none; /* 枠線なし */
  font-size: 24px; /* フォントサイズ */
  cursor: pointer; /* カーソルをポインタに */
}

/* STEPコンテンツ */
/* hiddenクラスで非表示状態にする */
.hidden {
  display: none !important;
}

.step-header {
  padding: 0 20px 20px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* 下に影をつける */
}
.step-header .step-header-wrapper {
  overflow: hidden; /* フロートをクリアするために追加 */
}
.step-header .step-header-wrapper .step-header-img {
  float: left; /* 左に配置 */
  width: 60%;
}
.step-header .step-header-wrapper #closeModalBtn1,
.step-header .step-header-wrapper #closeModalBtn2,
.step-header .step-header-wrapper #closeModalBtn3,
.step-header .step-header-wrapper #closeModalBtn4,
.step-header .step-header-wrapper #closeModalBtn5,
.step-header .step-header-wrapper #closeModalBtn6,
.step-header .step-header-wrapper #closeModalBtn7 {
  float: right; /* 右に配置 */
}
.step-header .step-header-wrapper #closeModalBtn1 img,
.step-header .step-header-wrapper #closeModalBtn2 img,
.step-header .step-header-wrapper #closeModalBtn3 img,
.step-header .step-header-wrapper #closeModalBtn4 img,
.step-header .step-header-wrapper #closeModalBtn5 img,
.step-header .step-header-wrapper #closeModalBtn6 img,
.step-header .step-header-wrapper #closeModalBtn7 img {
  width: 70%;
}
.step-header h2 {
  margin: 0;
  font-size: 1.5em;
  font-weight: bold;
}
@media (max-width: 768px) {
  .step-header h2 {
    font-size: 16px;
  }
}

/* STEP1: ポスター選択のデザイン調整 */
.poster-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  max-height: 450px;
  overflow-y: auto;
  border-color: #fff;
}
@media (max-width: 768px) {
  .poster-list {
    max-height: 400px;
  }
}

/* フレーム選択用の追加スタイル */
.frame-list {
  padding: 15px;
}

.frame-item {
  position: relative;
  margin-bottom: 10px;
}

.frame-item .poster-image-wrapper {
  position: relative;
  border: 4px solid transparent;
  border-radius: 8px;
  overflow: hidden;
}

.frame-item[data-frame=red] .poster-image-wrapper {
  border: 4px solid #D50000;
}

.frame-item[data-frame=blue] .poster-image-wrapper {
  border: 4px solid #2962FF;
}

.frame-item[data-frame=green] .poster-image-wrapper {
  border: 4px solid #00C853;
}

.frame-item[data-frame=gold] .poster-image-wrapper {
  border: 4px solid #FFD700;
}

.frame-item[data-frame=silver] .poster-image-wrapper {
  border: 4px solid #C0C0C0;
}

.frame-item[data-frame=none] .poster-image-wrapper {
  border: 4px solid #fff;
}

.frame-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

/* 選択時のチェックマーク表示 */
.frame-item.selected .poster-image-wrapper::after {
  content: "";
  background-image: url("../img/generator/select-poster-check.png");
  background-color: #e60012;
  background-size: 70%;
  background-repeat: no-repeat;
  background-position: center;
  position: absolute;
  top: 5px;
  right: 5px;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: block;
  z-index: 2;
}

.frame-item.selected .poster-image-wrapper {
  border-color: #e60012;
}

.poster-item {
  width: 35%;
  cursor: pointer;
  text-align: center;
  position: relative;
  padding: 5px;
}

.poster-item .poster-image-wrapper {
  position: relative;
  border: 4px solid #fff;
  border-radius: 8px;
}

.poster-item.selected .poster-image-wrapper {
  position: relative;
  border: 4px solid #e60012;
  border-radius: 8px;
}

.poster-item.selected .poster-image-wrapper::after {
  content: "";
  background-image: url("../img/generator/select-poster-check.png");
  background-size: cover; /* 画像をカバー */
  position: absolute;
  top: -4px;
  right: -4px;
  width: 24px;
  height: 24px;
  display: block; /* displayをblockに変更 */
}

.poster-image-wrapper {
  width: 100%;
  overflow: hidden;
  background-color: #ddd;
  border-radius: 4px;
}

.poster-image-wrapper img {
  width: 100%;
  height: auto;
  display: block;
}

.poster-item p {
  font-size: 16px;
  font-weight: bold;
  text-align: center;
  margin: 4px auto;
}

/* STEP2: テキストサイズ選択のデザイン調整 */
.textSizeOptions {
  margin-top: 15px;
  background: white;
  border-radius: 8px;
  overflow: hidden;
  padding: 5px 0;
  width: 70%;
  margin: 0 auto;
}
@media (max-width: 768px) {
  .textSizeOptions {
    width: 90%;
  }
}

.textSizeOptions label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 15px;
  border: 1px solid #ddd;
  font-size: 14px;
  text-align: left;
}
.textSizeOptions label .textSizeLabel {
  background-color: red;
  color: #fff;
  font-weight: bold;
  border-radius: 15px;
  width: 80px;
  height: 30px;
  text-align: center;
  line-height: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.textSizeOptions label .textSizeLabel .textSizeLabel-large {
  font-size: 18px;
  line-height: 30px;
}
.textSizeOptions label .textSizeLabel .textSizeLabel-small {
  margin-left: 5px;
  font-size: 10px;
  line-height: 15px;
}
.textSizeOptions label .textSizeLabel .fontFamilyLabel-small {
  font-size: 10px;
  line-height: 15px;
}
.textSizeOptions label .textSizeLabel .fontFamilyLabel-large {
  font-size: 18px;
  line-height: 30px;
  margin-left: 2px;
}
.textSizeOptions label .text-comment {
  width: 50%;
  font-size: 16px;
  margin-right: 20px;
  text-align: left;
}
.textSizeOptions label .text-comment.text-comment-size {
  font-size: 13px;
}
@media (max-width: 768px) {
  .textSizeOptions label .text-comment.text-comment-size {
    font-size: 11px;
  }
}
.textSizeOptions label .fontFamily-1 {
  font-family: "Noto Sans JP", sans-serif;
  font-size: bold;
}
.textSizeOptions label .fontFamily-2 {
  font-family: "Noto Serif JP", sans-serif;
  font-size: bold;
}
.textSizeOptions label .fontFamily-3 {
  font-family: "Stick", sans-serif;
  font-size: bold;
}
.textSizeOptions label .fontFamily-4 {
  font-family: "Yusei Magic", sans-serif;
  font-size: bold;
}
.textSizeOptions label .fontFamily-5 {
  font-family: "Kaisei Opti", sans-serif;
  font-size: bold;
}
.textSizeOptions label .circle {
  width: 25px;
  height: 25px;
  border-radius: 50%;
  background-color: red;
}

.textSizeOptions input[type=radio]:checked + label {
  background-color: red; /* チェックが入っている場合の背景色を赤に設定 */
}
.textSizeOptions input[type=radio]:checked + label .textSizeLabel {
  background-color: #fff;
  color: red;
}
.textSizeOptions input[type=radio]:checked + label .text-comment {
  color: #fff;
}
.textSizeOptions input[type=radio]:checked + label .circle {
  background-color: #fff;
}

.first-select {
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
}

.last-select {
  border-bottom-left-radius: 8px;
  border-bottom-right-radius: 8px;
}

.textSizeOptions label:last-child {
  border-bottom: none;
}

.textSizeOptions input[type=radio] {
  display: none;
}

/* STEP4: テキスト入力のデザイン調整 */
.textInputs {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 10px 0;
  width: 70%;
  margin: 0 auto;
}
@media (max-width: 768px) {
  .textInputs {
    width: 90%;
  }
}

.textInputs .textInput-label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #f0f0f0;
  border-radius: 8px;
  padding: 10px;
}

.textInputs .line-label {
  background: #d32f2f;
  color: white;
  font-size: 14px;
  font-weight: bold;
  padding: 5px 10px;
  border-radius: 20px;
  width: 40px;
}

.textInputs input {
  flex: 1;
  padding: 8px;
  border: none;
  background: transparent;
  font-size: 16px;
  width: 180px;
}
@media (max-width: 768px) {
  .textInputs input {
    width: 80%;
  }
}

.textInputs input::-moz-placeholder {
  color: #aaa;
}

.textInputs input::placeholder {
  color: #aaa;
}

.textInputs .apply-btn {
  background: #d32f2f;
  color: white;
  font-size: 14px;
  font-weight: bold;
  height: 40px;
  padding: 5px 15px;
  border-radius: 8px;
  border: none;
  cursor: pointer;
}
@media (max-width: 768px) {
  .textInputs .apply-btn {
    font-size: 12px;
    padding: 5px 5px;
  }
}

.textInputs .apply-btn:disabled {
  background: #ccc;
  cursor: not-allowed;
}

/* STEP5: 完成 & ダウンロードのデザイン調整 */
.save-annotation {
  margin: 10px auto;
  text-align: center;
  font-size: 14px;
}

.custom-button {
  display: flex;
  align-items: center;
  background-color: black;
  color: white;
  padding: 10px 10px;
  border-radius: 5px;
  border: none;
  cursor: pointer;
  font-size: 15px;
  margin: 0 auto 20px;
  width: 55%;
  text-decoration: none; /* aタグの下線をなくす */
}
@media (max-width: 768px) {
  .custom-button {
    width: 80%;
  }
}

.custom-button .icon {
  width: 20px;
  height: 20px;
  margin-right: 5px;
}
.custom-button .icon img {
  width: 100%;
  height: 100%;
  vertical-align: middle;
  display: block;
}

/* その他調整 */
.fontFamilyOptions,
.textInputs {
  margin-top: 10px;
}

.scroll-wrapper {
  overflow-y: auto;
  max-height: 500px;
}
@media (max-width: 768px) {
  .scroll-wrapper {
    max-height: 400px;
  }
}

canvas {
  display: block;
  margin: 20px auto;
  width: 90%;
  max-width: 300px;
  border-radius: 8px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

#posterCanvas {
  display: block;
  margin: 20px auto;
  width: 90%;
  max-width: 300px;
  height: auto;
  border-radius: 8px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

/* STEPボタンのスタイル */
.stepNav {
  background: white;
  text-align: center;
  border-top: 1px solid #ccc;
  display: flex;
  justify-content: space-between;
}
.stepNav button {
  height: 50px;
  font-size: 16px;
  border: none;
  cursor: pointer;
}
.stepNav .back-btn {
  width: 30%;
}
.stepNav .next-btn {
  width: 70%;
  background: #e60012;
  color: white;
}
.stepNav .next-btn.disabled {
  color: gray; /* グレーアウトのスタイル */
  cursor: not-allowed; /* カーソルを変更 */
}

/* ダウンロードボタンのスタイル */
.download-btn {
  background-color: #e60012; /* 緑色 */
  color: white;
  padding: 10px 20px;
  border-radius: 5px;
  text-align: center;
  font-size: 16px;
  cursor: pointer;
  transition: background-color 0.3s ease; /* ホバー時のスムーズな変化 */
  margin: 0 auto 20px;
  width: 55%;
}
.download-btn:hover {
  background-color: #b10312; /* ホバー時の色 */
}
@media (max-width: 768px) {
  .download-btn {
    width: 80%;
  }
}

/* テキスト配置選択のスタイル */
.textAlignOptions {
  margin: 15px auto;
  background: white;
  border-radius: 8px;
  overflow: hidden;
  padding: 15px;
  width: 90%;
  display: flex;
  justify-content: space-between;
  gap: 10px;
}

@media (max-width: 768px) {
  .textAlignOptions {
    width: 90%;
  }
}
.textAlignOptions label {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px;
  border: none;
  font-size: 14px;
  text-align: center;
  cursor: pointer;
}

.textAlignOptions .alignButton {
  background-color: #ccc;
  border-radius: 8px;
  padding: 15px;
  width: 100%;
  max-width: 120px;
  transition: background-color 0.3s ease;
}

.textAlignOptions .alignButton img {
  width: 100%;
  height: auto;
}

.textAlignOptions input[type=radio] {
  display: none;
}

.textAlignOptions input[type=radio]:checked + label .alignButton {
  background-color: #e60012;
}

.textAlignOptions input[type=radio]:checked + label {
  background-color: transparent;
}

.textAlignOptions label .text-comment {
  width: 50%;
  font-size: 16px;
  margin-right: 20px;
  text-align: left;
}
/* 確認ダイアログのスタイル */
#confirmDialog {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1000;
  background: white;
  border-radius: 8px;
  width: 90%;
  max-width: 400px;
  text-align: center;
}

.confirm-content {
  padding: 30px 20px;
}

.confirm-content p {
  font-size: 18px;
  margin: 0 0 30px 0;
  line-height: 1.5;
}

.confirm-buttons {
  display: flex;
  border-top: 1px solid #ccc;
}

.confirm-buttons button {
  flex: 1;
  padding: 15px;
  border: none;
  font-size: 16px;
  cursor: pointer;
}

.confirm-buttons .cancel-btn {
  background: white;
  color: black;
  border-right: 1px solid #ccc;
  border-bottom-left-radius: 8px;
}

.confirm-buttons .confirm-btn {
  background: #e60012;
  color: white;
  border-bottom-right-radius: 8px;
}

/* モーダルコンテンツの背景をぼかす */
#modalContent.blur {
  filter: blur(2px);
  pointer-events: none;
}
/*# sourceMappingURL=generator.css.map */