@charset "UTF-8";
/*
 * 商品詳細の手書きイラストのプレビュー（assets/js/engraving_illust_preview.js と組み合わせて使う）
 * 枠と木目の背景は common.css の「箱メッセージプレビュー」（.preview・.preview > div）のまま。ここでは足した分だけを指定する。
 */
.engraving-illust-preview .engraving-illust-preview__stage {
  padding-top: var(--engraving-preview-ratio, 73.6%);
}
.engraving-illust-preview .engraving-illust-preview__canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
/* 読み込み中・描けなかったとき・規約外の画像では、前の画像のイメージを残さない */
.engraving-illust-preview .engraving-illust-preview__stage:not(.is-rendered) .engraving-illust-preview__canvas {
  visibility: hidden;
}
.engraving-illust-preview .engraving-illust-preview__message {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 80%;
  margin: 0;
  transform: translate(-50%, -50%);
  text-align: center;
  font-size: .95em;
  font-weight: 500;
  line-height: 1.7;
  color: #3d1903;
  text-wrap: balance;
}
.engraving-illust-preview .engraving-illust-preview__message[hidden] {
  display: none;
}
/* プレビューの下のお知らせ（向きを直した・紙の外を除いた・規約外の理由など） */
.engraving-illust-preview .engraving-illust-preview__notes {
  margin: .75em 0 0;
  padding: 0;
  list-style: none;
}
.engraving-illust-preview .engraving-illust-preview__notes[hidden] {
  display: none;
}
/* 商品ページのフォームの li の間隔（common.css の .page-detail .section-orderform form dl dd ul li）より強く指定する */
.engraving-illust-preview .preview.engraving-illust-preview__card .engraving-illust-preview__notes li {
  position: relative;
  margin: 0 0 .25em;
  padding-left: 1em;
  font-size: .9em;
  line-height: 1.7;
}
.engraving-illust-preview .engraving-illust-preview__notes li::before {
  content: "・";
  position: absolute;
  left: 0;
}
.engraving-illust-preview .engraving-illust-preview__notes.is-warning li {
  color: #ad1617;
  font-weight: 500;
}