@charset "UTF-8";
/*
 * 商品詳細の彫刻プレビュー（assets/js/engraving_preview.js と組み合わせて使う）
 * 既存のプレビューの見た目（common.css の「箱メッセージプレビュー」）はそのまま。ここでは新しく足した分だけを指定する。
 */

/* ---- 彫刻テンプレートから作った下絵（母の日・父の日・お年賀・バレンタイン） ----
   文字の位置と大きさは要素の style（--engraving-text-x・-y・-size）で、Customize\Service\EngravingSceneConfig が
   テンプレートの名入れ欄から計算した値を渡す。大きさは下絵の表示幅に追従させる（cqw）。 */
.preview.engraving-preview--layout > div {
  padding-top: var(--engraving-preview-ratio, 73.6%);
  container-type: inline-size;
}
.preview.engraving-preview--layout > div .text {
  left: var(--engraving-text-x, 50%);
  top: var(--engraving-text-y, 50%);
  right: auto;
  bottom: auto;
  width: max-content;
  max-width: none;
  height: auto;
  margin: 0;
  overflow: visible;
  white-space: nowrap;
  line-height: 1.2;
  transform: translate(-50%, -50%);
  /* コンテナクエリ非対応ブラウザ向け（表示幅394pxのとき） */
  font-size: calc(var(--engraving-text-size, 4) * var(--engraving-text-scale, 1) * 3.94px);
  font-size: calc(var(--engraving-text-size, 4) * var(--engraving-text-scale, 1) * 1cqw);
}
@supports not (font-size: 1cqw) {
  @media (max-width: 484px) {
    .preview.engraving-preview--layout > div .text {
      font-size: calc(var(--engraving-text-size, 4) * var(--engraving-text-scale, 1) * .814vw);
    }
  }
}

/* 父の日（洋風）：テンプレートの名入れ（筑紫A丸ゴシック B）と、文字の長さに合わせて動くリボンの両端 */
.preview.category_id205-2 > div .text {
  font-family: "fot-tsukuardgothic-std", sans-serif;
  font-weight: 700;
  letter-spacing: -.02em;
}
.preview.category_id205-2 > div .text::before,
.preview.category_id205-2 > div .text::after {
  content: "";
  position: absolute;
  top: 50%;
  width: .77em;
  height: 1.25em;
  background-color: #3d1903;
  transform: translateY(-50%);
}
.preview.category_id205-2 > div .text::before {
  right: calc(100% + .55em);
  -webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 28% 50%);
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 28% 50%);
}
.preview.category_id205-2 > div .text::after {
  left: calc(100% + .5em);
  -webkit-clip-path: polygon(0 0, 100% 0, 72% 50%, 100% 100%, 0 100%);
  clip-path: polygon(0 0, 100% 0, 72% 50%, 100% 100%, 0 100%);
}

/* バレンタイン：木箱の写真の見本の文字（丸ゴシック・彫刻の焼き色）に合わせる */
.preview.category_id240 > div .text {
  font-family: "fot-tsukuardgothic-std", sans-serif;
  font-weight: 400;
  letter-spacing: .05em;
  color: #834426;
}

/* ---- 「名入れ不要」を選んでいる間は名入れの文字を出さない ---- */
.preview [data-engraving-preview-element].is-engraving-opt-out {
  visibility: hidden;
}
.preview .engraving-preview-opt-out-note[hidden] {
  display: none;
}

/* ---- 入力の決まり（文字数・行数・全角など）に合わないとき、入力欄の下に出す知らせ ---- */
.engraving-field-error {
  margin: .4em 0 0;
  color: red;
  font-size: .9em;
  line-height: 1.6;
}
.engraving-field-error[hidden] {
  display: none;
}