@import url(https://fonts.googleapis.com/css?family=Pacifico|Fredericka+the+Great|Great+Vibes|Shadows+Into+Light+Two|Roboto+Slab:400,300,700|League+Script|Parisienne|Tangerine:400,700);
@import url(https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;700&family=M+PLUS+Rounded+1c:wght@400;700&display=swap);
@charset "UTF-8";
/*-- Google Fonts インポート */
/*-- Google Fonts 追加 (deco-renew: 日本語フォント) */
/* フッターのボタン隠す */
.float-foote {
  display: none;
}

html,
body {
  height: 100%;
  overflow: hidden;
}

/*-- iOS用の勝手便利機能をOFF --*/
* {
  -webkit-touch-callout: none;
  -webkit-text-size-adjust: none;
  -moz-text-size-adjust: none;
       text-size-adjust: none;
}

/*-- Canvasの選択・タップ時のハイライトをOFF --*/
canvas {
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

/*-- 文字の選択をできないようにする --*/
body {
  -webkit-user-select: none;
  -moz-user-select: none;
       user-select: none;
}

.wrap {
  /* background-image: url(../img/bg_deco.png); */
  background-size: 320px auto;
  background-repeat: repeat-y;
  background-position: center top;
  position: relative;
}

/* リサイズオーバーアラート */
.over_alert {
  display: none;
  position: absolute;
  top: 10px;
  left: 50%;
  transform: translateX(-50%);
  text-align: center;
  padding: 5px 10px;
  background-color: rgba(255, 0, 0, 0.6);
  color: #fff;
  font-weight: bold;
  white-space: nowrap;
}

.over_alert.show {
  display: inline-block;
  z-index: 1;
}

.wrap_canvas {
  width: 100%;
  height: 100%;
  background-color: rgba(170, 170, 170, 0.3019607843);
  /* 初期化完了まで見えなくしておく */
  opacity: 0;
}

/* 初期化完了後は、見えるように */
.wrap_canvas.inited {
  opacity: 1;
  background-color: rgba(170, 170, 170, 0.3019607843);
}

/*--- PC/TABモード ---*/
body.pc_mode .wrap {
  background-size: 520px auto;
}

/*--- PC/TABモード ---*/
.drawUI,
.commandBtn,
.memberMenuBtn {
  display: block;
  width: 100%;
  height: 80px;
  background-color: #222;
  /* background-image: url(../img/dark_wood.png); */
  background-repeat: repeat;
  position: fixed;
  bottom: 0;
  opacity: 0.9;
  /*   z-index: 2;   */
}

.drawUI li {
  width: 20%;
  height: 100%;
  padding-top: 10px;
  padding-bottom: 10px;
  float: left;
  text-align: center;
  list-style: none;
}

.commandBtn li,
.memberMenuBtn li {
  width: 20%;
  height: 100%;
  float: left;
  text-align: center;
  list-style: none;
  border-right: 1px solid #555;
}

.commandBtn li:last-child,
.memberMenuBtn li:last-child {
  border: none;
}

.drawUI li:last-child {
  border: none;
  background-color: #e5ef6b !important;
}

.drawUI li img {
  width: 43px;
}

.drawUI li span,
.commandBtn li span,
.memberMenuBtn li span {
  display: block;
  margin-top: 8px;
  font-size: 10px;
}

.drawUI li a,
.commandBtn li a,
.memberMenuBtn li a {
  position: relative;
  display: block;
  color: #fff;
  font-weight: bold;
  text-decoration: none;
}

.drawUI li a.disabled {
  opacity: 0.3;
  pointer-events: none;
}

.drawUI li a span.finish {
  color: #222;
}

.deco-ti {
  font-size: 16px;
  color: #222;
  font-weight: bold;
  text-align: center;
  margin: 0 auto;
  position: relative;
  top: 52px;
  z-index: 2;
  width: 50%;
}

#fileInput {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  cursor: pointer;
  width: 100%;
  height: 100%;
}

.memberMenuBtn {
  padding: 5px;
  width: auto;
  height: auto;
  left: 10px;
  bottom: 90px;
  border: 1px solid #aaa;
  font-size: 80%;
}

.memberMenuBtn li {
  width: 40px;
  height: 40px;
}

.memberMenuBtn li img {
  height: 25px;
}

.memberMenuBtn li span {
  margin-top: 4px;
}

.commandBtn {
  padding: 5px;
  width: auto;
  height: auto;
  right: 10px;
  bottom: 90px;
  border: 1px solid #aaa;
  font-size: 80%;
}

.commandBtn.hide {
  display: none;
}

.commandBtn .buttonReedit.hide {
  display: none;
}

.commandBtn li {
  width: 40px;
  height: 40px;
}

.commandBtn li img {
  height: 25px;
}

.commandBtn li span {
  margin-top: 4px;
}

/* canvas */
#main_canvas {
  margin: auto;
  position: absolute;
  top: 0px;
  bottom: 0px;
  left: 0px;
  right: 0px;
  display: block;
}

#overlay_canvas {
  background-color: rgba(34, 32, 0, 0);
  display: block;
  position: absolute;
  margin: auto;
  top: 0px;
  bottom: 0px;
  left: 0px;
  right: 0px;
  pointer-events: none;
}

#temp_canvas {
  width: 500px;
  height: 500px;
  background-color: #fff;
  display: block;
  visibility: hidden;
  position: absolute;
  top: 0px;
  left: 0px;
  right: 0px;
  pointer-events: none;
}

.message {
  position: absolute;
  top: 4%;
  left: 50%;
  transform: translateX(-50%);
  text-align: center;
  padding: 5px 10px;
  font-weight: bold;
  line-height: 150%;
  font-size: 1vw;
  color: #7d7d7d;
  white-space: nowrap;
}

.history-box ul li img {
  -o-object-fit: cover;
     object-fit: cover;
  width: 85px;
  height: 85px;
  border: 1px solid #e3e3e3;
}

.history-box ul li {
  width: 85px;
  margin: 5px;
  height: auto;
}

@media screen and (max-width: 479px) {
  .message {
    top: 10%;
    font-size: 3vw; /* 赤色 */
  }
}
.img_history {
  width: 100%;
}

/* stamp */
.show_stamp .wrap {
  visibility: hidden;
  /* 	opacity: 0; */
  transition: 0.2s;
}

.show_stamp .stamp_wrapper.stamp {
  top: 0%;
  visibility: visible;
}

.show_frame .stamp_wrapper.frame {
  top: 0%;
  visibility: visible;
}

.show_history .stamp_wrapper.history {
  top: 0%;
  visibility: visible;
}

.stamp_wrapper {
  height: 100%;
  z-index: 1;
  position: fixed;
  top: 100%;
  left: 0;
  width: 100%;
  transition: 0.2s;
  background: #fff;
  visibility: hidden;
}

h3 {
  text-align: center;
  color: #222;
  padding-top: 10px;
  padding-bottom: 10px;
  font-weight: bold;
  font-size: 12px;
  letter-spacing: 0.1em;
  line-height: 1.5em;
}

h3 span {
  font-family: "DIN Condensed", sans-serif;
  font-size: 22px;
  font-weight: normal;
}

.event-ti {
  color: #a9924c;
}

.block_stamp {
  width: 320px;
  margin: 0 auto;
  height: 100%;
}

.block_stamp ul {
  height: 76%;
  width: 325px;
  margin: 20px auto 0 auto;
  overflow-y: scroll;
  -webkit-overflow-scrolling: touch;
}

.box_stamp {
  z-index: 2;
  background-color: #fff;
}

.box_stamp .cf {
  padding-bottom: 20px;
  margin-bottom: 10px;
  border-bottom: 1px dotted #e5e5e5;
}

.btn_back img {
  display: block;
  width: 32px;
  margin-top: 20px;
  margin-left: 284px;
  z-index: 1;
}

.stamp_wrapper ul {
  padding: 8px;
}

.stamp_wrapper ul li {
  width: 60px;
  height: 60px;
  float: left;
  margin: 6px;
}

.stamp_wrapper ul li img {
  width: 60px;
}

::-webkit-scrollbar {
  width: 10px;
  box-shadow: none !important;
}

::-webkit-scrollbar-track {
  background: #eee;
  border: none;
  border-radius: 10px;
  box-shadow: none !important;
}

::-webkit-scrollbar-thumb {
  background: #c1c1c1;
  border-radius: 10px;
  box-shadow: none !important;
}

/* サムネールを背景画像化 */
.stamp_wrapper ul li a {
  display: block;
  width: 60px;
  height: 60px;
  box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.3);
  background-repeat: no-repeat;
  /*background-size: 1600% 1200%;*/
}

.stamp_wrapper.frame ul li.no_bg_image a {
  background-image: none;
}

::-webkit-scrollbar {
  width: 12px;
}

::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
  border-radius: 10px;
}

::-webkit-scrollbar-thumb {
  border-radius: 10px;
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.5);
}

/* テキスト設定 */
.show_text .wrap {
  /*visibility:hidden;*/
  opacity: 0;
  transition: 0.2s;
}

.show_text #text_wrapper {
  visibility: visible;
  top: 0%;
}

.deco-ti-txt {
  width: 320px !important;
  display: block !important;
  margin: 0 auto;
  margin-bottom: 10px;
}

.deco-ti-txt .deco-ti {
  text-align: center;
  position: relative;
  top: 30px;
  z-index: 2;
}

.deco-ti-txt .btn_back-t img {
  display: block;
  width: 32px;
  position: relative;
  left: 90%;
  z-index: 100;
}

#text_wrapper {
  width: 360px;
  height: 100%;
  z-index: 1;
  position: fixed;
  top: 100%;
  left: 50%;
  transform: translate(-50%, 3%);
  transition: 0.2s;
  background-color: #fff;
  background: rgba(255, 255, 255, 0.85);
  visibility: hidden;
}

#text_wrapper > div {
  width: 100%;
  text-align: center;
  border: 1px solid #fff;
}

#text_wrapper .text_input_wrap {
  position: relative;
  width: 100%;
  height: 70px;
  /*--box-shadow: 0 0 20px rgba(0, 0, 0, 0.8);--*/
}

#text_wrapper .text_input {
  display: table;
  width: 100%;
  height: 100%;
  padding: 10px;
}

#text_wrapper .text_input .text_row {
  display: table-cell;
  width: 100%;
  height: 100%;
  padding: 0 10px;
  border: 1px solid #aaa;
  vertical-align: middle;
}

#text_wrapper .text_input .text_row input {
  display: inline-block;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0 25px 0 0;
  border: none;
  font-size: 18px;
  outline: 0;
}

#text_wrapper #text_clear {
  position: absolute;
  display: block;
  top: 50%;
  right: 15px;
  margin-top: -13px;
  padding-top: 7px;
  width: 50px;
  height: 26px;
  color: #fff;
  font-size: 14px;
  background-color: #999;
  border-radius: 5px;
  /*--background-image: url('../img/text_clear.png');--*/
  background-size: 100% 100%;
}

.text_contents {
  display: block;
  width: 100%;
  height: 80%;
  margin: 20px auto 0 auto;
  overflow-y: auto;
  overflow-x: hidden;
}

/*-- Webフォント定義 --*/
@font-face {
  font-family: "anzu";
  src: url("/fonts/anzu.eot"); /* IE9 Compat Modes */
  src: url("/fonts/anzu.eot?#iefix") format("embedded-opentype"), url("/fonts/anzu.woff") format("woff"), url("/fonts/anzu.ttf") format("truetype"), url("/fonts/anzu.svg#svgFontName") format("svg"); /* svg - Legacy iOS */
}
@font-face {
  font-family: "ranobepop";
  src: url("/fonts/ranobepop.eot"); /* IE9 Compat Modes */
  src: url("/fonts/ranobepop.eot?#iefix") format("embedded-opentype"), url("/fonts/ranobepop.woff") format("woff"), url("/fonts/ranobepop.ttf") format("truetype"), url("/fonts/ranobepop.svg#svgFontName") format("svg"); /* svg - Legacy iOS */
}
@font-face {
  font-family: "logoTypeGothic";
  src: url("/fonts/logoTypeGothic.eot"); /* IE9 Compat Modes */
  src: url("/fonts/logoTypeGothic.eot?#iefix") format("embedded-opentype"), url("/fonts/logoTypeGothic.woff") format("woff"), url("/fonts/logoTypeGothic.ttf") format("truetype"), url("/fonts/logoTypeGothic.svg#svgFontName") format("svg"); /* svg - Legacy iOS */
}
@font-face {
  font-family: "bebasneue";
  src: url("/fonts/bebasneue.eot"); /* IE9 Compat Modes */
  src: url("/fonts/bebasneue.eot?#iefix") format("embedded-opentype"), url("/fonts/bebasneue.woff") format("woff"), url("/fonts/bebasneue.ttf") format("truetype"), url("/fonts/bebasneue.svg#svgFontName") format("svg"); /* svg - Legacy iOS */
}
@font-face {
  font-family: "ounen-mouhitsu";
  src: url("/fonts/Ounen-mouhitsu.otf") format("opentype");
}
@font-face {
  font-family: "yuji-syuku";
  src: url("/fonts/YujiSyuku-Regular.ttf") format("truetype");
}
@font-face {
  font-family: "tamanegi-kaisho";
  src: url("/fonts/tamanegikaisyo.ttf") format("truetype");
}
@font-face {
  font-family: "kouzan-mouhitsu";
  src: url("/fonts/mouhitu.ttf") format("truetype");
}
/*-- Webフォント使用クラス --*/
.anzu {
  font-family: "anzu";
}

.ranobepop {
  font-family: "ranobepop";
}

.logoTypeGothic {
  font-family: "logoTypeGothic";
}

.Pacifico {
  font-family: "Pacifico";
}

.Fredericka_the_Great {
  font-family: "Fredericka the Great";
}

.Great_Vibes {
  font-family: "Great Vibes";
}

.Shadows_Into_Light_Two {
  font-family: "Shadows Into Light Two";
}

.Parisienne {
  font-family: "Parisienne";
}

.Tangerine_700 {
  font-family: "Tangerine";
  font-weight: 700;
}

.Roboto_Slab_700 {
  font-family: "Roboto Slab";
  font-weight: 700;
}

#text_wrapper .font_select {
  position: relative;
  width: 100%;
  height: auto;
  border-left-width: 0;
  border-right-width: 0;
}

#text_wrapper .font_select ul {
  display: block;
  margin: 0 auto;
  padding: 0 10px;
  width: 94.5%;
  overflow: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  border-top: 1px dotted #aaa;
  border-bottom: 1px dotted #aaa;
}

#text_wrapper .font_select ul li {
  display: block;
  margin: 0;
  padding: 0;
  list-style: none;
  text-align: left;
}

.select_font {
  font-weight: bold;
  margin-top: 15px !important;
  padding: 0px 5px !important;
  border-left: 2px solid #999;
}

#text_wrapper .font_select ul li input {
  position: absolute;
  top: 0;
  left: 0;
  width: 1px;
  height: 1px;
  opacity: 0;
}

#text_wrapper .font_select ul li label {
  display: block;
  widows: 100%;
  padding: 10px 10px;
  color: #000;
  font-size: 18px;
  border-bottom: 1px solid #999;
}

#text_wrapper .font_select ul li:last-child label {
  border: none;
}

#text_wrapper .font_select ul li input:checked + label {
  background-color: #ddd;
}

#text_wrapper .group {
  position: relative;
  padding-top: 15px;
  border: none;
  color: #fff;
}

/*--------------------------------------------------------------------*/
#text_wrapper .group .color_select {
  width: 90%;
  height: 200px;
  margin: 0 auto 10px auto;
}

#text_wrapper .group .color_select #colorPicker {
  width: 100%;
  height: 100%;
  position: relative;
}

#color_histories_label {
  width: 360px;
  text-align: left;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 5px;
  color: #222;
  font-weight: bold;
}

#color_histories_label p {
  padding: 0px 5px !important;
  border-left: 2px solid #999;
}

#color_histories {
  width: 360px;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 10px;
  display: flex;
}

#color_histories .color_history {
  width: 40px;
  height: 40px;
  margin-left: 2px;
  margin-right: 2px;
  border-radius: 5px;
}

#text_wrapper .group .color_select #colorPicker .track {
  background-color: #efefef;
  background-image: url("../img/pallete.png");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  width: 100%;
  height: 100%;
  padding: 0;
  cursor: crosshair;
  display: block !important;
}

#text_wrapper .group .color_select #colorPicker .track canvas {
  border: 1px solid #999;
}

#text_wrapper .group .color_select #colorPicker .color {
  width: 25px;
  height: 25px;
  padding: 4px;
  border: 1px solid #ccc;
  display: none;
  position: absolute;
  z-index: 11;
  background-color: #efefef;
  border-radius: 27px;
  cursor: pointer;
  top: 80px;
  left: 60px;
  margin-top: -12px;
  margin-left: -12px;
  pointer-events: none;
}

#text_wrapper .group .color_select #colorPicker .colorInner {
  width: 15px;
  height: 15px;
  border-radius: 27px;
  border: 1px solid #aaa;
}

/*--------------------------------------------------------------------*/
#text_wrapper .group .buttons a {
  display: inline-block;
  margin: 5px 0 15px 0;
  width: 12em;
  padding: 15px;
  text-align: center;
  text-decoration: none;
  color: #fff;
  font-weight: bold;
}

#text_wrapper .group .buttons a#text_cancel {
  background-color: #999;
  border-radius: 5px;
}

#text_wrapper .group .buttons a#text_ok {
  background-color: #01b528;
  border-radius: 5px;
}

#text_wrapper .group .buttons a#text_ok.disable {
  opacity: 0.7;
  pointer-events: none;
}

#text_wrapper .group .buttons a:first-child {
  margin-right: 30px;
}

/* preview */
.show_preview .wrap {
  visibility: hidden;
  opacity: 0;
  transition: 0.2s;
}

.show_preview #preview_wrapper {
  visibility: visible;
  top: 0%;
}

#preview_wrapper {
  /* 画面全体をカバー */
  height: 100%;
  height: 100dvh;
  height: 100svh;
  z-index: 1;
  position: fixed;
  top: 100%;
  left: 0;
  width: 100%;
  transition: 0.2s;
  overflow-y: scroll;
  -webkit-overflow-scrolling: touch;
  background: white;
  visibility: hidden;
}

#preview_wrapper ul {
  display: block;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  width: 100%;
  /* セーフエリア対応 */
  height: calc(100px + env(safe-area-inset-bottom, 0));
  padding-top: 10px;
  padding-bottom: calc(10px + env(safe-area-inset-bottom, 0));
  background-color: #222;
  /* background-image: url(../img/dark_wood.png); */
  background-repeat: repeat;
  opacity: 0.9;
}

#preview_wrapper li {
  width: 50%;
  float: left;
  text-align: center;
  border-right: 1px solid rgba(225, 225, 225, 0.3);
}

#preview_wrapper li:last-child {
  border: none;
}

#preview_wrapper .back_deco {
  padding-top: 10px;
}

#preview_wrapper ul li img {
  width: 43px;
}

#preview_wrapper ul li span {
  display: block;
  margin-top: 8px;
  line-height: 17px;
  font-size: 10px;
}

#preview_wrapper ul li a {
  display: block;
  color: #fff;
  font-weight: bold;
  text-decoration: none;
}

#submitImg {
  /* 	邪魔なので飛ばす */
  position: absolute;
  top: 0;
  left: 0;
}

.waiting {
  visibility: hidden;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 20;
  background-color: rgba(0, 0, 0, 0.4);
}

.waiting.show_waiting {
  visibility: visible;
}

.waiting #loaderImage {
  position: absolute;
  width: 64px;
  height: 49px;
  top: 50%;
  left: 50%;
  margin-top: -32px;
  margin-left: -24.5px;
  background-image: url("../img/waiting.png");
}

/* ========================================
   Vue 3 deco-renew レイアウト (Canva風)
   ======================================== */
/* ルートコンテナ */
.deco-app-layout {
  display: flex;
  flex-direction: column;
  background: #f5f5f5;
  /* 100vh → 100dvh フォールバック (dvhが後で正しく上書き) */
  height: 100vh;
  height: 100dvh;
  height: 100svh; /* iOS Safari対応: small viewport height */
  overflow: hidden;
}

/* ヘッダー */
.deco-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 48px;
  padding: 0 12px;
  background: #fff;
  border-bottom: 1px solid #e0e0e0;
  flex-shrink: 0;
  z-index: 5;
}

.deco-header__info {
  flex: 1;
  min-width: 0;
  overflow: hidden;
}

.deco-header__guide {
  font-size: 11px;
  color: #666;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: block;
  line-height: 1.4;
}

.deco-header__alert {
  font-size: 11px;
  color: #d32f2f;
  font-weight: bold;
  display: block;
}

.deco-header__warn {
  font-size: 11px;
  color: #e65100;
  font-weight: bold;
  display: block;
}

.deco-finish-btn {
  margin-left: 12px;
  padding: 8px 20px;
  background: #e5ef6b;
  border: none;
  border-radius: 20px;
  font-size: 14px;
  font-weight: bold;
  color: #222;
  cursor: pointer;
  flex-shrink: 0;
}
.deco-finish-btn:active {
  opacity: 0.75;
}

/* キャンバスエリア */
.deco-canvas-area {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f5f5f5;
  overflow: hidden;
  padding: 20px;
  /* ツールバー(fixed)の高さ分、下に余白 */
  padding-bottom: calc(84px + env(safe-area-inset-bottom, 0));
}
.deco-canvas-area .konvajs-content {
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.7);
  max-width: 100%;
}

/* キャンバスラップ: 削除ボタンの基準点 */
.deco-canvas-wrap {
  position: relative;
  display: inline-block;
  line-height: 0;
}

/* 選択オブジェクト右上の削除ボタン */
.canvas-delete-btn {
  position: absolute;
  width: 36px;
  height: 36px;
  background: #d32f2f;
  color: #fff;
  border: 2px solid #fff;
  border-radius: 50%;
  font-size: 15px;
  font-weight: bold;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transform: translate(-50%, -50%);
  z-index: 10;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
  -webkit-tap-highlight-color: transparent;
}
.canvas-delete-btn:active {
  opacity: 0.75;
  transform: translate(-50%, -50%) scale(0.9);
}

/* ツールバー */
.deco-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-around;
  height: 64px;
  background: #222;
  flex-shrink: 0;
  z-index: 5;
  /* 端末の下部に確実に固定 */
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  /* iOSセーフエリア対応（ホームインジケータ部分） */
  padding-bottom: env(safe-area-inset-bottom, 0);
  height: calc(64px + env(safe-area-inset-bottom, 0));
}

.toolbar-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex: 1;
  height: 64px;
  background: none;
  border: none;
  color: #fff;
  cursor: pointer;
  padding: 6px 4px;
  gap: 3px;
  position: relative;
  -webkit-tap-highlight-color: transparent;
}
.toolbar-btn:active {
  opacity: 0.65;
}

.toolbar-icon {
  width: 34px;
  height: auto;
}

.toolbar-label {
  font-size: 10px;
  font-weight: bold;
  color: #fff;
  line-height: 1;
}

/* プロパティバー (選択時 fixed) */
.deco-props-bar {
  position: fixed;
  /* ツールバー + セーフエリア分の上 */
  bottom: calc(64px + env(safe-area-inset-bottom, 0));
  left: 0;
  right: 0;
  height: 52px;
  display: flex;
  align-items: center;
  background: #fff;
  border-top: 1px solid #e0e0e0;
  padding: 0 8px;
  gap: 2px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  z-index: 4;
  box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.1);
}

.props-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-width: 48px;
  height: 44px;
  padding: 2px 6px;
  background: none;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  color: #333;
  flex-shrink: 0;
  -webkit-tap-highlight-color: transparent;
}
.props-btn:active {
  background: #f0f0f0;
}

.props-icon {
  font-size: 15px;
  line-height: 1;
}

.props-label {
  font-size: 9px;
  color: #555;
  margin-top: 2px;
  line-height: 1;
}

.props-btn--delete {
  margin-left: auto;
  color: #d32f2f;
}
.props-btn--delete .props-label {
  color: #d32f2f;
}

.props-color {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  cursor: pointer;
}
.props-color input[type=color] {
  width: 26px;
  height: 26px;
  padding: 0;
  border: 1px solid #ccc;
  border-radius: 4px;
  cursor: pointer;
}

.props-size {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-width: 56px;
  height: 44px;
  flex-shrink: 0;
  gap: 1px;
}

.size-btn {
  background: #f0f0f0;
  border: none;
  border-radius: 4px;
  width: 32px;
  height: 16px;
  font-size: 11px;
  cursor: pointer;
  line-height: 1;
}
.size-btn:active {
  background: #e0e0e0;
}

.size-val {
  font-size: 10px;
  color: #333;
  min-width: 24px;
  text-align: center;
}

/* パネルオーバーレイ */
.deco-app-layout .stamp_wrapper,
.deco-app-layout #text_wrapper,
.deco-app-layout #preview_wrapper {
  visibility: visible !important;
  top: 0 !important;
  z-index: 20;
  animation: deco-panel-slide-up 0.25s ease-out;
}

@keyframes deco-panel-slide-up {
  from {
    transform: translateY(100%);
  }
  to {
    transform: translateY(0);
  }
}
/* ローディングオーバーレイ */
.deco-app-layout .waiting {
  visibility: visible !important;
}

/* ========================================
   テキスト追加モーダル
   ======================================== */
/* #text_wrapper をモーダル全画面バックドロップとして使用 */
.deco-app-layout #text_wrapper {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: rgba(0, 0, 0, 0.55) !important;
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  z-index: 25 !important;
  padding: 0 !important;
  transform: none !important;
}

.text-modal-backdrop {
  position: absolute;
  inset: 0;
}

.text-modal-inner {
  position: relative;
  background: #fff;
  border-radius: 20px;
  width: calc(100% - 32px);
  max-width: 440px;
  max-height: 88vh;
  overflow-y: auto;
  padding: 20px 16px 24px;
  z-index: 1;
  -webkit-overflow-scrolling: touch;
}

.text-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}
.text-modal-header h3 {
  font-size: 16px;
  font-weight: bold;
  color: #222;
  margin: 0;
}

.text-modal-close {
  width: 32px;
  height: 32px;
  border: none;
  background: #f0f0f0;
  border-radius: 50%;
  font-size: 14px;
  cursor: pointer;
  color: #555;
  display: flex;
  align-items: center;
  justify-content: center;
}
.text-modal-close:active {
  background: #e0e0e0;
}

.text-modal-section {
  margin-bottom: 18px;
}

.text-modal-label {
  font-size: 12px;
  font-weight: bold;
  color: #888;
  margin: 0 0 8px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* テキスト入力 */
.text-input-row {
  display: flex;
  align-items: center;
  border: 2px solid #e0e0e0;
  border-radius: 10px;
  padding: 0 12px;
  background: #fafafa;
}
.text-input-row:focus-within {
  border-color: #1a73e8;
  background: #fff;
}

.text-input-field {
  flex: 1;
  height: 48px;
  border: none;
  background: none;
  font-size: 18px;
  outline: none;
  color: #222;
}

.text-clear-btn {
  border: none;
  background: none;
  color: #aaa;
  font-size: 16px;
  cursor: pointer;
  padding: 4px;
}
.text-clear-btn:active {
  color: #555;
}

/* フォントグリッド (2段) */
.font-grid {
  display: grid;
  grid-template-rows: repeat(2, auto);
  grid-auto-flow: column;
  grid-auto-columns: max-content;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  gap: 8px;
  padding-bottom: 4px;
}

.font-btn {
  padding: 8px 14px;
  border: 2px solid #e8e8e8;
  border-radius: 10px;
  background: #fff;
  font-size: 14px;
  cursor: pointer;
  white-space: nowrap;
  color: #333;
  line-height: 1.4;
  -webkit-tap-highlight-color: transparent;
}
.font-btn.active {
  border-color: #1a73e8;
  background: #e8f0fe;
  color: #1a73e8;
}
.font-btn:active {
  opacity: 0.7;
}

/* カラーパレット (10×2) */
.color-grid {
  display: grid;
  grid-template-columns: repeat(10, 1fr);
  gap: 6px;
}

.color-swatch {
  width: 100%;
  aspect-ratio: 1;
  border-radius: 50%;
  border: 2px solid transparent;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: transform 0.1s;
}
.color-swatch.active {
  border-color: #1a73e8;
  box-shadow: 0 0 0 2px #fff inset;
  transform: scale(1.15);
}
.color-swatch:active {
  transform: scale(0.9);
}

/* 白は枠線を付ける */
.color-swatch[style*=FFFFFF],
.color-swatch[style*=ffffff] {
  border-color: #ddd;
}

/* 方向選択 */
.direction-btns {
  display: flex;
  gap: 10px;
}
.direction-btns button {
  flex: 1;
  padding: 12px;
  border: 2px solid #e8e8e8;
  border-radius: 10px;
  background: #fff;
  font-size: 15px;
  cursor: pointer;
  color: #555;
  -webkit-tap-highlight-color: transparent;
}
.direction-btns button.active {
  border-color: #1a73e8;
  background: #e8f0fe;
  color: #1a73e8;
  font-weight: bold;
}
.direction-btns button:active {
  opacity: 0.7;
}

/* 追加ボタン */
.text-add-btn {
  display: block;
  width: 100%;
  padding: 15px;
  background: #1a73e8;
  color: #fff;
  border: none;
  border-radius: 12px;
  font-size: 16px;
  font-weight: bold;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.text-add-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
.text-add-btn:not(:disabled):active {
  opacity: 0.85;
}

/* ========================================
   フレーム・スタンプ選択モーダル (ボトムシート)
   ======================================== */
.deco-panel-modal {
  position: fixed;
  inset: 0;
  z-index: 30;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.5);
  padding: 16px;
  box-sizing: border-box;
  overflow: hidden;
}

.deco-panel-backdrop {
  position: absolute;
  inset: 0;
}

.deco-panel-inner {
  position: relative;
  background: #fff;
  border-radius: 20px;
  width: 100%;
  max-width: 500px;
  max-height: 80vh;
  display: flex;
  flex-direction: column;
  z-index: 1;
  overflow: hidden;
  animation: modal-pop 0.2s ease-out;
}

@keyframes modal-pop {
  from {
    opacity: 0;
    transform: scale(0.92);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}
.deco-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 16px 12px;
  border-bottom: 1px solid #eee;
  flex-shrink: 0;
}

.deco-panel-title {
  font-size: 15px;
  font-weight: bold;
  color: #222;
  margin: 0;
  padding: 0;
  text-align: left;
}

.deco-panel-close {
  width: 32px;
  height: 32px;
  border: none;
  background: #f0f0f0;
  border-radius: 50%;
  font-size: 14px;
  cursor: pointer;
  color: #555;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.deco-panel-close:active {
  background: #e0e0e0;
}

.deco-panel-scroll {
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  flex: 1;
  padding: 12px 16px 24px;
}

.deco-panel-group-label {
  font-size: 12px;
  font-weight: bold;
  line-height: 1.5;
  color: #888;
  margin: 16px 0 8px;
  padding-left: 2px;
  word-break: break-word;
}
.deco-panel-group-label:first-child {
  margin-top: 4px;
}
.deco-panel-group-label.is-event {
  color: #e65100;
}

.deco-panel-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 4px;
}

.deco-panel-item {
  aspect-ratio: 1;
  padding: 4px;
  border: 2px solid transparent;
  border-radius: 10px;
  background: #f8f8f8;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  -webkit-tap-highlight-color: transparent;
}
.deco-panel-item img {
  width: 100%;
  height: 100%;
  -o-object-fit: contain;
     object-fit: contain;
}
.deco-panel-item:active {
  border-color: #1a73e8;
  background: #e8f0fe;
}

/* プレビュー: ギャラリー内で shadow と作成画像を重ねるための基準点 */
#gallery {
  position: relative;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  height: 100vh;
  /* デフォルトでセンタリング */
  margin: 0 auto;
  /* 下部のボタンエリアの余白 */
  margin-bottom: calc(110px + env(safe-area-inset-bottom, 0));
}

/* プレビュータイトル */
#preview_wrapper h2 {
  text-align: center;
  padding: 16px;
  font-size: 16px;
  font-weight: bold;
  color: white;
  margin: 0;
}

/* プレビュー内のシャドウ・プレビュー画像 */
#preview_wrapper .shadow,
#preview_wrapper .preview {
  position: absolute;
}

/* PC/タブレット対応 */
@media screen and (min-width: 768px) {
  #preview_wrapper h2 {
    font-size: 20px;
    padding: 20px;
  }
  #gallery {
    /* PCでは最大幅を制限 */
    max-width: 375px;
    width: 100%;
  }
  #preview_wrapper ul {
    /* PCでは幅を制限してセンタリング */
    max-width: 600px;
    left: 50%;
    transform: translateX(-50%);
    border-radius: 20px 20px 0 0;
  }
}
/* TextPanel フォントサイズコントロール */
.font-size-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 10px 16px;
  border-bottom: 1px solid #eee;
}
.font-size-row label {
  font-size: 13px;
  font-weight: bold;
  color: #333;
}

.font-size-controls {
  display: flex;
  align-items: center;
  gap: 8px;
}
.font-size-controls button {
  width: 32px;
  height: 32px;
  background: #f0f0f0;
  border: 1px solid #ccc;
  border-radius: 6px;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
}
.font-size-controls button:active {
  background: #e0e0e0;
}

.font-size-val {
  min-width: 36px;
  text-align: center;
  font-size: 16px;
  font-weight: bold;
  color: #333;
}